/* austria-tour.info — static rebuild
   Headings use a CJK serif (明體/宋體): the classical face suits Habsburg,
   architecture and concert material better than another grotesk, and every
   platform already ships one, so it costs no download. */

:root{
  --ink:#16130f;
  --ink-soft:#4a423a;
  --muted:#7d7268;
  --bg:#fdfcfa;
  --bg-warm:#f6f1ea;
  --deep:#12202e;
  --deep-2:#1b2f42;
  --accent:#d96f14;
  --accent-ink:#a8530a;
  --line:#e6ded2;
  --line-soft:#f0e9df;
  --maxw:1240px;
  --gut:clamp(20px,5vw,64px);
  --headh:82px;   /* height of the sticky header; the drawer hangs off it */
}

/* Keyboard users get the same guidance a mouse user gets from :hover. */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Inter","Helvetica Neue","PingFang TC","Microsoft JhengHei",
              "Noto Sans TC","Heiti TC",sans-serif;
  font-size:17px;line-height:1.85;-webkit-font-smoothing:antialiased;
  font-feature-settings:"kern" 1;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
[hidden]{display:none!important;}

.serif{font-family:"Cormorant Garamond","Songti TC","Noto Serif TC","PMingLiU",
  "Times New Roman",serif;}

h1,h2,h3,.serif-h{
  font-family:"Cormorant Garamond","Songti TC","Noto Serif TC","PMingLiU",
              "Times New Roman",serif;
  font-weight:600;letter-spacing:.005em;
}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut);}
.narrow{max-width:780px;}

/* ---------------- eyebrow ---------------- */
.eyebrow{
  font-family:"Inter",sans-serif;
  font-size:11.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);margin:0 0 14px;
}
.on-dark .eyebrow{color:#e9a663;}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 30px;border:0;border-radius:2px;
  background:var(--ink);color:#fff;text-decoration:none;
  font-family:"Inter",sans-serif;font-size:14.5px;font-weight:600;
  letter-spacing:.04em;line-height:1;cursor:pointer;
  transition:background .2s ease,transform .2s ease;
}
.btn:hover{background:var(--accent-ink);}
.btn.accent{background:var(--accent);}
.btn.accent:hover{background:var(--accent-ink);}
.btn.ghost{
  background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55);
}
.btn.ghost:hover{background:rgba(255,255,255,.14);border-color:#fff;}
.btn.dark-ghost{background:transparent;color:var(--ink);border:1px solid var(--line);}
.btn.dark-ghost:hover{background:var(--bg-warm);border-color:var(--ink);}

/* a quieter call to action: underlined text with a rule that grows */
.linkcta{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-family:"Inter",sans-serif;font-size:14.5px;font-weight:600;
  letter-spacing:.03em;color:var(--accent-ink);padding-bottom:3px;
  border-bottom:1px solid currentColor;
}
.linkcta:hover{color:var(--ink);}
.on-dark .linkcta{color:#f0b378;}
.on-dark .linkcta:hover{color:#fff;}

/* ---------------- header ---------------- */
header{
  position:sticky;top:0;z-index:60;background:rgba(253,252,250,.92);
  backdrop-filter:saturate(150%) blur(14px);border-bottom:1px solid var(--line-soft);
}
.hrow{display:flex;align-items:center;gap:18px;min-height:82px;}
.logo{flex:0 0 auto;}
.logo img{height:46px;width:auto;}
.menu{margin-left:auto;display:flex;flex-wrap:wrap;gap:0 4px;justify-content:flex-end;align-items:center;}
.menu a{
  padding:9px 12px;text-decoration:none;font-size:13.5px;letter-spacing:.02em;
  color:var(--ink-soft);border-bottom:1px solid transparent;
}
.menu a:hover{color:var(--ink);border-bottom-color:var(--accent);}
.menu a.on{color:var(--ink);border-bottom-color:var(--accent);}
.navtoggle{display:none;}

/* ---------------- hero ---------------- */
.hero{
  position:relative;min-height:min(88vh,760px);
  display:flex;align-items:flex-end;
  background:var(--deep) url("img/herobg.jpg") center 40%/cover no-repeat;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,14,20,.88) 0%,rgba(8,14,20,.42) 46%,rgba(8,14,20,.18) 100%);
}
.hero-in{position:relative;z-index:2;width:100%;padding-block:clamp(48px,9vw,104px);color:#fff;}
.hero h1{
  margin:0 0 22px;font-size:clamp(38px,7.4vw,88px);line-height:1.06;
  font-weight:500;letter-spacing:-.01em;max-width:16ch;
  text-shadow:0 2px 40px rgba(0,0,0,.35);
}
.hero-lede{
  margin:0;font-size:clamp(16px,1.8vw,20px);line-height:1.75;
  color:rgba(255,255,255,.9);max-width:40ch;font-weight:300;
}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px;}

/* thin credential strip under the hero */
.strip{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.strip div{padding:26px var(--gut);border-right:1px solid var(--line);}
.strip div:last-child{border-right:0;}
.strip b{
  display:block;font-family:"Cormorant Garamond","Songti TC","Noto Serif TC","PMingLiU",serif;
  font-size:22px;font-weight:600;margin-bottom:3px;letter-spacing:.01em;
}
.strip span{font-size:13.5px;color:var(--muted);line-height:1.7;}

/* ---------------- sections ---------------- */
section{padding-block:clamp(64px,9vw,132px);}
section.warm{background:var(--bg-warm);}
section.dark{background:var(--deep);color:#fff;}
section.dark h1,section.dark h2,section.dark h3{color:#fff;}
section.dark p{color:rgba(255,255,255,.82);}

.sec-head{max-width:760px;margin-bottom:clamp(36px,5vw,60px);}
.sec-head.center{margin-inline:auto;text-align:center;}
.sec-title{
  margin:0;font-size:clamp(30px,4.6vw,52px);line-height:1.18;
  font-weight:500;letter-spacing:-.005em;
}
.sec-sub{
  margin:18px 0 0;font-size:17px;line-height:1.85;color:var(--muted);
  font-weight:300;max-width:60ch;
}
.sec-head.center .sec-sub{margin-inline:auto;}

/* ---------------- cards ---------------- */
/* min() keeps the track from staying 310px wide on a 320px phone, where a bare
   minmax(310px,1fr) would push the grid past the screen edge. */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr));gap:clamp(20px,3vw,40px);}
.card{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:transparent;
}
.card-img{overflow:hidden;aspect-ratio:3/2;background:var(--bg-warm);}
.card-img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
.card:hover .card-img img{transform:scale(1.045);}
.card-body{padding:22px 0 0;display:flex;flex-direction:column;gap:9px;flex:1;}
.card h3{
  margin:0;font-size:25px;font-weight:600;line-height:1.32;letter-spacing:.005em;
}
.card p{margin:0;font-size:15px;line-height:1.8;color:var(--muted);flex:1;font-weight:300;}
.card .linkcta{align-self:flex-start;margin-top:6px;}
.card-num{
  font-family:"Inter",sans-serif;font-size:11.5px;letter-spacing:.2em;
  color:var(--accent);font-weight:600;
}

/* ---------------- split rows ---------------- */
.split{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(28px,5vw,76px);align-items:center;
}
.split-img img{width:100%;}
.split h2,.split h3{margin:0 0 18px;font-size:clamp(26px,3.4vw,40px);line-height:1.24;font-weight:500;}
.split p{margin:0 0 16px;font-size:16.5px;line-height:1.88;color:var(--ink-soft);font-weight:300;}
section.dark .split p{color:rgba(255,255,255,.8);}

.checks{list-style:none;margin:24px 0 30px;padding:0;}
.checks li{
  padding:11px 0 11px 30px;position:relative;font-size:16px;
  border-bottom:1px solid var(--line-soft);
}
section.dark .checks li{border-bottom-color:rgba(255,255,255,.13);}
.checks li::before{
  content:"";position:absolute;left:2px;top:22px;
  width:11px;height:1px;background:var(--accent);
}

/* ---------------- guide / quote ---------------- */
.pull{
  max-width:880px;margin:0 auto;text-align:center;
}
.pull p{
  margin:0 0 22px;font-size:clamp(18px,2.2vw,24px);line-height:1.72;
  font-weight:300;
}
.pull .lead{
  font-family:"Cormorant Garamond","Songti TC","Noto Serif TC","PMingLiU",serif;
  font-size:clamp(26px,3.6vw,40px);line-height:1.3;font-weight:500;
}
.cred{
  display:inline-block;margin-top:14px;padding:11px 26px;
  border:1px solid rgba(255,255,255,.28);border-radius:2px;
  font-size:14.5px;letter-spacing:.03em;
}
section:not(.dark) .cred{border-color:var(--line);}

/* ---------------- contact ---------------- */
.contact-grid{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(26px,4vw,56px);
  align-items:center;max-width:900px;
}
.qr{margin:0;text-align:center;}
.qr img{width:200px;aspect-ratio:1;border:1px solid var(--line);border-radius:4px;}
.qr figcaption{margin-top:11px;font-size:13px;color:var(--muted);letter-spacing:.02em;}
.channels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:0;}
.ch{
  display:flex;flex-direction:column;gap:3px;justify-content:center;
  min-height:72px;padding:16px 0;text-decoration:none;
  border-bottom:1px solid var(--line);
}
a.ch:hover .ch-value{color:var(--accent-ink);}
.ch-label{
  font-family:"Inter",sans-serif;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);font-weight:600;
}
/* break-all zerhackte auch kurze Adressen mitten im Wort; anywhere bricht
   erst, wenn die Zeile sonst wirklich ueberlaeuft. */
.ch-value{font-size:17px;font-weight:500;word-break:normal;overflow-wrap:anywhere;letter-spacing:.01em;}

/* ---------------- inner pages ---------------- */
.page{padding-block:clamp(44px,6vw,84px);}
.page-head{max-width:820px;margin-bottom:clamp(30px,4vw,52px);}
.page-title{
  margin:0;font-size:clamp(32px,5vw,56px);line-height:1.14;font-weight:500;
  letter-spacing:-.005em;
}
.page-title::after{
  content:"";display:block;width:64px;height:2px;background:var(--accent);margin-top:26px;
}
/* Some articles carry a bare URL as the link text, and a few older pages use
   runs of   as makeshift tabs. Both are single unbreakable "words" that
   would push a phone screen sideways, so let them break. */
.prose{max-width:760px;font-size:17px;line-height:1.95;color:var(--ink-soft);overflow-wrap:break-word;}
.prose a{overflow-wrap:anywhere;}
.prose h1{font-size:clamp(26px,3.4vw,36px);margin:48px 0 14px;font-weight:500;line-height:1.3;color:var(--ink);}
.prose h2{font-size:clamp(24px,3vw,32px);margin:46px 0 14px;font-weight:500;line-height:1.32;color:var(--ink);}
.prose h3{font-size:clamp(21px,2.4vw,26px);margin:38px 0 12px;font-weight:600;line-height:1.4;color:var(--ink);}
.prose h4,.prose h5,.prose h6{
  font-family:"Inter",sans-serif;font-size:15px;letter-spacing:.12em;text-transform:uppercase;
  margin:34px 0 10px;font-weight:600;color:var(--ink);
}
.prose p{margin:0 0 20px;}
.prose img{margin:32px 0;}
.prose ul,.prose ol{margin:0 0 22px;padding-left:22px;}
.prose li{margin-bottom:9px;}
.prose a{color:var(--accent-ink);text-decoration:none;border-bottom:1px solid var(--line);}
.prose a:hover{border-bottom-color:var(--accent);}
.prose blockquote{
  margin:32px 0;padding:4px 0 4px 28px;border-left:2px solid var(--accent);
  font-family:"Cormorant Garamond","Songti TC","Noto Serif TC","PMingLiU",serif;
  font-size:clamp(20px,2.4vw,26px);line-height:1.55;color:var(--ink);
}
.prose blockquote p{margin:0;}
.prose hr{border:0;border-top:1px solid var(--line);margin:40px 0;}
.prose table{width:100%;border-collapse:collapse;margin:28px 0;font-size:16px;}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:14px 14px 14px 0;text-align:left;}
.prose th{
  font-family:"Inter",sans-serif;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);font-weight:600;border-bottom-color:var(--ink);
}
.prose figure{margin:32px 0;}
.prose figcaption{font-size:14px;color:var(--muted);margin-top:10px;}

/* blog index */
.postlist{list-style:none;margin:0;padding:0;max-width:820px;}
.postlist li{border-bottom:1px solid var(--line);}
.postlist a{
  display:block;padding:22px 0;text-decoration:none;font-size:19px;line-height:1.5;
  font-family:"Cormorant Garamond","Songti TC","Noto Serif TC","PMingLiU",serif;font-weight:600;
  transition:padding-left .25s ease;
}
.postlist a:hover{padding-left:12px;color:var(--accent-ink);}
.postlist .postdate{
  display:block;margin-top:6px;
  font-family:"Inter",system-ui,sans-serif;font-size:13px;font-weight:400;
  letter-spacing:.04em;color:var(--muted);
}

/* ---------------- footer ---------------- */
footer{
  background:var(--deep);color:rgba(255,255,255,.72);
  padding-block:clamp(46px,6vw,76px);font-size:14.5px;line-height:1.95;
}
footer a{color:#fff;}
.fgrid{display:grid;grid-template-columns:1fr auto;gap:26px;align-items:end;}
.fbrand{
  font-family:"Cormorant Garamond","Songti TC","Noto Serif TC","PMingLiU",serif;
  font-size:24px;color:#fff;font-weight:500;margin-bottom:6px;
}
.fcontact{color:rgba(255,255,255,.6);font-size:13.5px;}

@media (max-width:980px){
  .split{grid-template-columns:1fr;}
  .split.rev .split-img{order:-1;}
  .contact-grid{grid-template-columns:1fr;justify-items:start;}
  .fgrid{grid-template-columns:1fr;align-items:start;}
}
@media (max-width:860px){
  :root{--headh:70px;}
  body{font-size:16px;}
  .hrow{min-height:70px;}
  .logo img{height:38px;}
  .hero{min-height:74vh;}
  .strip div{border-right:0;border-bottom:1px solid var(--line);}
  .strip div:last-child{border-bottom:0;}
  .prose table{display:block;overflow-x:auto;white-space:nowrap;}
  /* A table that scrolls sideways has to say so: shadows at the edges appear
     only while there is more table in that direction. Pure CSS — the gradients
     that scroll with the content cover the ones that stay put. */
  .prose table:not(.tourtab){
    background:
      linear-gradient(to right,var(--bg) 40%,rgba(253,252,250,0)) left center/34px 100% no-repeat,
      linear-gradient(to left ,var(--bg) 40%,rgba(253,252,250,0)) right center/34px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%,rgba(22,19,15,.14),rgba(22,19,15,0)) left center/12px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%,rgba(22,19,15,.14),rgba(22,19,15,0)) right center/12px 100% no-repeat;
    background-attachment:local,local,scroll,scroll;
  }
}
/* Only on a phone: side by side the two buttons each get too narrow to hit.
   On a tablet there is room for both, so the rule stops well before that. */
@media (max-width:560px){
  .hero-cta{flex-direction:column;align-items:stretch;gap:12px;}
  .hero-cta .btn{width:100%;}
  .strip div{padding-block:22px;}
  .page-title::after{margin-top:20px;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none!important;animation:none!important;}
}

/* ---------------- language selector ---------------- */
.langbar{
  position:relative;display:inline-flex;align-items:center;gap:7px;
  margin-left:16px;padding:7px 12px;border:1px solid var(--line);border-radius:2px;
  color:var(--ink-soft);cursor:pointer;
}
.langbar:hover{border-color:var(--ink);color:var(--ink);}
.langbar .globe{
  width:17px;height:17px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}
.langbar #langcode{
  font-family:"Inter",sans-serif;font-size:12.5px;font-weight:600;
  letter-spacing:.06em;line-height:1;white-space:nowrap;
}
/* the real control, invisible but still the thing you click */
.langbar select{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:pointer;border:0;padding:0;
  font-size:16px; /* keeps iOS from zooming the page on focus */
}
.langbar:focus-within{border-color:var(--accent);}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
/* Google's own chrome: top banner, tooltip, and the offset it forces on body */
.goog-te-banner-frame,.skiptranslate>iframe,#goog-gt-tt,.goog-te-balloon-frame{display:none!important;}
body{top:0!important;}
#gt{display:none;}
font[style]{background:none!important;box-shadow:none!important;}
@media (max-width:860px){
  .langbar{margin:16px 0 0;width:100%;justify-content:center;padding-block:13px;}
}

/* ---------------- room for translated text ----------------
   Everything above was sized against Chinese, where a headline is a dozen
   characters. English and German run two to three times longer, so anything
   that was measured in ch or assumed a short string needs slack. */
.hero h1{
  font-size:clamp(30px,5.2vw,64px);
  max-width:22ch;
  text-wrap:balance;
  hyphens:auto;
}
.hero-lede{max-width:46ch;text-wrap:pretty;}
.sec-title,.page-title,.split h2,.split h3,.card h3,.pull .lead{text-wrap:balance;}
.strip b{font-size:clamp(17px,1.9vw,22px);line-height:1.3;}
.strip span{hyphens:auto;}
.btn{text-align:center;line-height:1.25;padding-block:12px;height:auto;min-height:52px;}
.linkcta{line-height:1.4;}

/* The menu holds eight items. In Chinese they are three characters each; in
   English they are whole phrases, so it collapses to the toggle much earlier.
   Below that width it is no longer a panel that pushes the page down but a
   drawer that slides in from the left over a dimmed page. */
.navscrim{display:none;}
@media (max-width:1180px){
  /* backdrop-filter would make <header> the containing block for its fixed
     children, so the drawer could never leave the header bar. */
  header{backdrop-filter:none;background:var(--bg);z-index:100;}

  .navtoggle{
    display:inline-flex;align-items:center;justify-content:center;margin-left:auto;
    width:48px;height:48px;border:1px solid var(--line);background:transparent;
    color:var(--ink);font-size:19px;cursor:pointer;line-height:1;border-radius:2px;
  }

  /* The drawer hangs below the header rather than over it, so the logo and the
     toggle stay put and the toggle keeps working as the close button. */
  .menu{
    position:fixed;top:var(--headh);left:0;bottom:0;width:min(320px,80vw);
    flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;
    gap:0;margin:0;background:var(--bg);border-right:1px solid var(--line);
    padding:10px 22px calc(32px + env(safe-area-inset-bottom));
    overflow-y:auto;overscroll-behavior:contain;
    box-shadow:14px 0 44px rgba(0,0,0,.16);
    transform:translateX(-100%);visibility:hidden;
    transition:transform .3s cubic-bezier(.4,0,.2,1),visibility 0s .3s;
  }
  .nav-open .menu{
    transform:none;visibility:visible;
    transition:transform .3s cubic-bezier(.4,0,.2,1),visibility 0s;
  }
  .menu a{
    padding:14px 2px 14px 14px;font-size:16px;min-height:48px;
    display:flex;align-items:center;
    border-bottom:1px solid var(--line-soft);
    border-left:2px solid transparent;
  }
  .menu a:hover{border-bottom-color:var(--line-soft);}
  /* In the horizontal bar the current page is marked by the underline; in the
     drawer that reads as just another divider, so it needs its own marker. */
  .menu a.on{
    border-bottom-color:var(--line-soft);
    border-left-color:var(--accent);color:var(--ink);font-weight:600;
  }
  /* The toggle doubles as the close button, so it should look like one. */
  .nav-open .navtoggle{font-size:0;border-color:var(--ink);}
  .nav-open .navtoggle::before{content:"\2715";font-size:17px;line-height:1;}
  .langbar{margin:20px 0 0;width:100%;justify-content:center;padding-block:13px;}

  .navscrim{
    display:block;position:fixed;inset:0;z-index:80;
    background:rgba(12,16,20,.45);
    opacity:0;visibility:hidden;
    transition:opacity .3s ease,visibility 0s .3s;
  }
  .nav-open .navscrim{opacity:1;visibility:visible;transition:opacity .3s ease,visibility 0s;}
  /* page underneath must not scroll while the drawer is open */
  html.nav-open{overflow:hidden;}
}
/* ---- Footer-Kontakt: auf dem Handy als saubere Liste ---- */
ul.fchannels{
  list-style:none;margin:12px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:4px 30px;
}
ul.fchannels li{display:flex;align-items:baseline;gap:9px;}
.fc-k{
  font-family:"Inter",sans-serif;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.42);
  flex:0 0 auto;white-space:nowrap;
}
.fc-v{color:rgba(255,255,255,.82);text-decoration:none;word-break:break-word;}
a.fc-v:hover{color:#fff;text-decoration:underline;}

@media (max-width:860px){
  ul.fchannels{flex-direction:column;gap:0;margin-top:14px;}
  ul.fchannels li{
    align-items:center;gap:12px;min-height:46px;
    border-bottom:1px solid rgba(255,255,255,.10);
  }
  ul.fchannels li:last-child{border-bottom:0;}
  .fc-k{flex:0 0 84px;}
  .fc-v{font-size:15px;}
}
/* ---- Footer: QR-Codes nur auf dem Desktop ---- */
.fqr{display:flex;gap:16px;margin-top:24px;flex-wrap:wrap;}
.fqr-card{display:block;width:116px;text-decoration:none;border-radius:5px;
  transition:transform .18s ease,box-shadow .18s ease;}
.fqr-card img{width:116px;height:auto;display:block;border-radius:5px;}
.fqr-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.35);}
.fqr-card[hidden]{display:none;}

/* Auf dem Handy zaehlen die antippbaren Links, nicht die QR-Codes:
   ein QR laesst sich nicht mit demselben Geraet scannen, das ihn anzeigt. */
@media (max-width:860px){
  .fqr{display:none;}
}
/* ================= Hero-Diaschau =================
   Die Bilder liegen als gestapelte <img> uebereinander statt als
   CSS-Hintergrund: nur das erste laedt sofort, der Rest per loading="lazy".
   Das haelt den Seitenaufbau schnell.                                     */
.hero{background-image:none;}

/* CJK bricht sonst zwischen beliebigen zwei Zeichen um und zerreisst dabei
   Woerter (aus 深度 wurde 深 / 度). keep-all verbietet das; die einzige
   erlaubte Umbruchstelle ist das <wbr> nach dem Komma. */
.hero h1{word-break:keep-all;}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--deep);}
.hero-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 40%;
  opacity:0;transition:opacity 1.8s ease-in-out;
  will-change:opacity;
}
.hero-img.is-on{opacity:1;}

/* Bildunterschrift unter den Schaltflaechen, mit feiner Trennlinie */
.hero-caption{
  margin-top:clamp(26px,4vw,44px);
  padding-top:15px;
  border-top:1px solid rgba(255,255,255,.20);
  max-width:52ch;
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
}
.hc-items{position:relative;flex:1 1 auto;min-height:3.4em;}
.hc-item{
  margin:0;position:absolute;inset:0;
  opacity:0;visibility:hidden;
  transition:opacity .7s ease;
}
.hc-item.is-on{opacity:1;visibility:visible;}
.hc-item b{
  display:block;font-weight:500;font-size:14px;letter-spacing:.06em;
  color:#fff;margin-bottom:5px;
}
.hc-item span{
  display:block;font-size:13.5px;line-height:1.65;
  color:rgba(255,255,255,.72);font-weight:300;
}

.hc-dots{display:flex;gap:8px;flex:0 0 auto;padding-bottom:4px;}
.hc-dot{
  width:7px;height:7px;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.32);cursor:pointer;
  transition:background .3s ease,transform .3s ease;
}
.hc-dot:hover{background:rgba(255,255,255,.6);}
.hc-dot.is-on{background:var(--accent);transform:scale(1.35);}
.hc-dot:focus-visible{outline:2px solid #fff;outline-offset:3px;}

@media (max-width:860px){
  .hero-caption{flex-direction:column;align-items:flex-start;gap:14px;max-width:none;}
  .hc-items{min-height:4.2em;width:100%;}
  .hc-dots{padding-bottom:0;}
}

/* Wer Bewegung reduziert haben will, bekommt ein ruhiges Standbild. */
@media (prefers-reduced-motion:reduce){
  .hero-img{transition:none;}
  .hc-item{transition:none;}
}

/* Der Untertitel steht auf wechselnden Fotos - ueber hellen Flaechen
   (Schlossfassade, Himmel) reicht der Verlauf allein nicht aus.
   Ein Schatten traegt unabhaengig vom Motiv. */
.hc-item b{
  text-shadow:0 1px 3px rgba(0,0,0,.55), 0 2px 16px rgba(0,0,0,.75);
}
.hc-item span{
  color:rgba(255,255,255,.88);
  text-shadow:0 1px 3px rgba(0,0,0,.55), 0 2px 16px rgba(0,0,0,.75);
}
.hero-caption{border-top-color:rgba(255,255,255,.32);}
.hc-dot{box-shadow:0 1px 6px rgba(0,0,0,.5);}

/* Tastaturhinweis neben den Punkten. Auf Touch-Geraeten gibt es keine
   Pfeiltasten - dort wird gewischt, der Hinweis waere nur Ballast. */
.hc-keys{
  flex:0 0 auto;padding-bottom:2px;
  font-size:12px;letter-spacing:.18em;line-height:1;
  color:rgba(255,255,255,.55);
  text-shadow:0 1px 4px rgba(0,0,0,.6);
  user-select:none;
}
@media (hover:none){ .hc-keys{display:none;} }
@media (max-width:860px){ .hc-keys{display:none;} }
/* ================= Tagestouren: Label/Wert-Tabellen =================
   Der Inhalt kam aus einem Word-Export, in dem jede Zelle ein <h3> war.
   Jetzt traegt die linke Spalte ein <th scope="row">; diese Regeln geben
   ihr eine ruhige Beschriftung statt der globalen Versalien-Kopfzeile. */
.prose .tourtab{table-layout:fixed;margin:22px 0 44px;}
.prose .tourtab th{
  width:132px;vertical-align:top;padding:16px 22px 16px 0;
  font-family:inherit;font-size:16px;font-weight:600;letter-spacing:normal;
  text-transform:none;color:var(--ink);
  border-bottom:1px solid var(--line);
  word-break:keep-all;
}
.prose .tourtab td{vertical-align:top;padding:16px 0;line-height:1.9;}
.prose .tourtab p{margin:0 0 8px;}
.prose .tourtab p:last-child{margin-bottom:0;}
.prose .tourtab tr:last-child th,.prose .tourtab tr:last-child td{border-bottom:0;}

/* Auf dem Handy kippt die Zeile: Beschriftung oben, Wert darunter. Die
   globale Regel weiter oben macht Tabellen scrollbar und setzt nowrap -
   beides waere hier falsch, die Texte sind ganze Absaetze. */
@media (max-width:860px){
  .prose .tourtab{display:block;overflow-x:visible;white-space:normal;table-layout:auto;}
  .prose .tourtab tbody,.prose .tourtab tr,.prose .tourtab th,.prose .tourtab td{
    display:block;width:auto;
  }
  .prose .tourtab tr{border-bottom:1px solid var(--line);padding:14px 0;}
  .prose .tourtab tr:last-child{border-bottom:0;}
  .prose .tourtab th{
    border-bottom:0;padding:0 0 4px;
    font-size:12px;letter-spacing:.14em;color:var(--muted);
  }
  .prose .tourtab td{border-bottom:0;padding:0;}
}

/* ================= Kontaktblock auf dem Handy =================
   Am Schreibtisch steht der QR links neben den Kanaelen: man zueckt das
   Handy und scannt. Auf dem Handy selbst ist genau das unmoeglich - dort
   zaehlt der Fingertipp. Also kommen erst die antippbaren Kanaele, der QR
   rutscht darunter und wird kleiner. Er bleibt aber stehen: im
   WeChat-Browser laesst sich ein QR per langem Druck erkennen. */
@media (max-width:860px){
  .contact-grid{grid-template-columns:1fr;gap:28px;justify-items:stretch;}
  .channels{order:1;grid-template-columns:1fr;}
  .qr{order:2;}
  .qr img{width:min(190px,52vw);margin-inline:auto;}
  .qr figcaption{margin-top:9px;}

  /* Je Kanal eine ganze Zeile als Ziel - eine Reihe aus zwei Spalten
     traefe auf 360 px niemand zuverlaessig. */
  .ch{min-height:62px;padding:14px 0;}
  .ch-label{font-size:10.5px;}
  .ch-value{font-size:16px;}
}

/* Auf dem Handy waechst und schrumpft die Adressleiste; 100vh rechnet mit
   der ausgeblendeten Leiste und schiebt den Hero-Text unter die Kante.
   dvh misst, was gerade wirklich sichtbar ist. */
@supports (height:1dvh){
  .hero{min-height:min(88dvh,760px);}
  @media (max-width:860px){
    .hero{min-height:74dvh;}
  }
}

/* --- Eingebettete Videos -------------------------------------------------
   Der Rahmen behaelt das Seitenverhaeltnis 16:9 bei jeder Breite, damit auf
   dem Handy nichts ueberlaeuft. Der Player wird erst geladen, wenn er ins
   Bild kommt (loading="lazy" im HTML). */
.video{
  margin:26px 0;
  padding:0;
  border-radius:12px;
  overflow:hidden;
  background:#000;
  box-shadow:0 2px 14px rgba(0,0,0,.10);
}
.video iframe{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  height:auto;
  border:0;
}
@media (max-width:860px){
  .video{margin:20px 0;border-radius:9px;}
}

/* Zugang zur Besucherstatistik - nur fuer den Betreiber gedacht, deshalb
   zurueckhaltend gesetzt. Die Seite selbst ist passwortgeschuetzt. */
.fstats{
  margin-left:14px;
  color:rgba(255,255,255,.34);
  text-decoration:none;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
.fstats:hover,.fstats:focus-visible{
  color:rgba(255,255,255,.78);
  text-decoration:underline;
}

/* Hinweis auf die oeffentliche Besucherkarte - anders als der
   Statistik-Zugang darf der gesehen werden. */
.fmap{
  display:block;margin-bottom:10px;
  color:rgba(255,255,255,.82);text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.22);
  padding-bottom:3px;
}
.fmap:hover,.fmap:focus-visible{color:#fff;border-bottom-color:rgba(255,255,255,.7);}
.fcopy{display:block;}

/* --- Griff zum Durchziehen der Seite -------------------------------------
   Die Seiten sind lang; am Handy ist das Menue oben und der Kontakt unten.
   Der Griff am rechten Rand zeigt, wo man gerade ist, und laesst sich packen
   und ziehen. Er erscheint beim Scrollen und blendet nach kurzer Ruhe wieder
   aus, damit er nichts verdeckt. Auf kurzen Seiten bleibt er ganz weg. */
.scrub{
  position:fixed;z-index:70;
  top:calc(var(--headh,82px) + 10px);
  bottom:calc(10px + env(safe-area-inset-bottom));
  right:0;width:40px;
  pointer-events:none;
  opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility 0s .3s;
}
.scrub.is-da{opacity:1;visibility:visible;transition:opacity .16s ease,visibility 0s;}

/* Der Griff ist bewusst breiter als der sichtbare Strich - ein 5 px
   schmales Ziel trifft am Handy niemand zuverlaessig. */
.scrub-griff{
  position:absolute;top:0;right:0;
  width:40px;height:54px;
  background:none;border:0;
  pointer-events:auto;
  touch-action:none;
  cursor:grab;
  -webkit-tap-highlight-color:transparent;
  will-change:transform;
}
.scrub-griff::after{
  content:"";position:absolute;
  top:6px;bottom:6px;right:7px;width:5px;
  border-radius:99px;
  background:rgba(22,19,15,.3);
  box-shadow:0 0 0 1px rgba(253,252,250,.55);
  transition:width .16s ease,background-color .16s ease,right .16s ease;
}
.scrub-griff:hover::after{background:rgba(22,19,15,.46);}
.scrub-griff:focus-visible{outline:none;}
.scrub-griff:focus-visible::after{
  background:var(--accent,#8a6a3b);width:7px;
  box-shadow:0 0 0 2px rgba(253,252,250,.9),0 0 0 4px rgba(138,106,59,.35);
}
/* Beim Ziehen wird der Strich kraeftiger - man sieht, dass man ihn hat. */
.scrub.zieht .scrub-griff{cursor:grabbing;}
.scrub.zieht .scrub-griff::after{
  width:9px;right:6px;
  background:var(--accent,#8a6a3b);
  box-shadow:0 0 0 1px rgba(253,252,250,.75),0 2px 10px rgba(22,19,15,.25);
}

/* Solange die Menueschublade offen ist, hat der Griff nichts zu suchen. */
.nav-open .scrub{opacity:0;visibility:hidden;}
@media print{ .scrub{display:none;} }
@media (prefers-reduced-motion:reduce){
  .scrub{transition:opacity .01s,visibility 0s;}
  .scrub-griff::after{transition:none;}
}
/* Mit Maus ist die Fensterleiste da - den Griff braucht vor allem das Handy. */
@media (min-width:1181px) and (hover:hover){
  .scrub{display:none;}
}

/* ---臉書專頁連結（頁首）-------------------------------------------------
   Reihenfolge im Kopf ueber flex-order, weil das Menue im Quelltext nach dem
   Umschalter steht: am Rechner sitzt das Zeichen rechts neben dem Menue, am
   Handy links neben dem Menue-Knopf. */
.fb{
  order:2;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  color:var(--ink,#16130f);opacity:.55;
  text-decoration:none;-webkit-tap-highlight-color:transparent;
  transition:opacity .16s ease,color .16s ease,background-color .16s ease;
}
.fb svg{width:20px;height:20px;fill:currentColor;display:block;}
.fb:hover,.fb:focus-visible{opacity:1;color:#1877F2;background:rgba(24,119,242,.10);}
.fb:focus-visible{outline:2px solid #1877F2;outline-offset:2px;}
.menu{order:1;}
.navtoggle{order:3;}
@media (max-width:1180px){
  /* Die Schublade liegt fest positioniert, also bleiben in der Zeile nur
     Logo, Zeichen und Knopf - das Zeichen schiebt sich nach rechts. */
  .fb{margin-left:auto;width:44px;height:44px;}
  .navtoggle{margin-left:8px;}
}

/* --- Einleitungssatz unter der Seitenueberschrift ---------------------- */
.page-lead{
  font-size:clamp(17px,2vw,20px);line-height:1.75;
  color:var(--ink-2,#443c33);opacity:.9;
  max-width:52ch;margin:14px 0 0;
}

/* --- Bilder auf Inhaltsseiten ------------------------------------------
   Ein grosses Aufmacherbild und ein Raster fuer mehrere Aufnahmen. Das
   Raster bricht am Handy auf eine Spalte um; die Bilder behalten ihr
   Seitenverhaeltnis, damit beim Laden nichts springt. */
.prose .bild-gross{margin:30px 0 40px;}
.prose .bild-gross img{
  margin:0;width:100%;height:auto;
  aspect-ratio:3/2;object-fit:cover;
  border-radius:12px;
}
.prose .bildgrid{
  display:grid;gap:14px;margin:30px 0 44px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.prose .bildgrid figure{margin:0;}
.prose .bildgrid img{
  margin:0;width:100%;height:auto;
  aspect-ratio:4/3;object-fit:cover;
  border-radius:10px;display:block;
}
.prose .bildgrid figcaption{margin-top:7px;font-size:13.5px;}
@media (max-width:860px){
  .prose .bild-gross{margin:22px 0 30px;}
  .prose .bild-gross img{aspect-ratio:4/3;border-radius:9px;}
  .prose .bildgrid{gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
}

/* --- Kontaktangaben auf Inhaltsseiten ----------------------------------
   Bewusst keine Tabelle: Tabellen scrollen auf dem Handy seitlich, und
   dabei wurde die Mailadresse abgeschnitten. Eine Liste bricht stattdessen
   um, und lange Adressen bleiben vollstaendig lesbar. */
.prose .kontaktliste{list-style:none;margin:24px 0 28px;padding:0;}
.prose .kontaktliste li{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;
  padding:14px 0;margin:0;
  border-bottom:1px solid var(--line,rgba(22,19,15,.14));
}
.prose .kontaktliste li:last-child{border-bottom:0;}
.kl-k{
  font-family:"Inter",sans-serif;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted,#8b8175);font-weight:600;
  flex:0 0 auto;min-width:11rem;
}
.kl-v{font-size:17px;overflow-wrap:anywhere;}
a.kl-v{color:var(--accent-ink);border-bottom:1px solid var(--line);text-decoration:none;}
a.kl-v:hover{border-bottom-color:var(--accent,#8a6a3b);}
@media (max-width:560px){
  .kl-k{min-width:100%;}
  .kl-v{font-size:16px;}
}

/* Quellenangabe unter einem Zitat oder einem Dokument -------------------
   Kleiner und zurueckhaltender als der Fliesstext: sie belegt die Aussage,
   ohne sie zu ueberlagern. */
.prose .quelle{
  font-size:14px;line-height:1.7;
  color:var(--muted,#8b8175);
  margin:-6px 0 30px;
  padding-left:14px;
  border-left:2px solid var(--line,rgba(22,19,15,.14));
}

/* Amtliches Dokument als Beleg -----------------------------------------
   Bewusst nicht ueber die volle Breite: ein Schriftstueck im Hochformat
   waere sonst so gross, dass man scrollen muss, um es zu erfassen. Der
   Rahmen macht sichtbar, dass es ein Dokument ist und kein Foto. */
.prose .dokument{
  margin:26px 0 10px;
  max-width:460px;
}
.prose .dokument img{
  margin:0;width:100%;height:auto;display:block;
  border:1px solid var(--line,rgba(22,19,15,.16));
  border-radius:3px;
  background:#fff;
  box-shadow:0 2px 12px rgba(22,19,15,.10);
}
.prose .dokument a{border-bottom:0;display:block;}
.prose .dokument figcaption{margin-top:9px;font-size:13.5px;}
@media (max-width:560px){
  .prose .dokument{max-width:100%;}
}

/* Verweis unter einem Abschnittskopf; der Abstand richtet sich nach dem
   Untertitel darueber, damit beide als ein Block gelesen werden. */
.sec-link{margin:24px 0 0;}

/* --- Verzeichnis der Guides ---------------------------------------------
   Keine Tabelle: vier Spalten mit Nummern und Mailadressen laufen auf dem
   Handy seitlich aus dem Bild, und gerade die Kontaktdaten sind hier der
   Inhalt. Auf breiten Schirmen drei Spalten, auf schmalen untereinander. */
.prose .gdlist{list-style:none;margin:18px 0 40px;padding:0;}
.prose .gdlist li{
  display:grid;gap:2px 24px;align-items:baseline;
  grid-template-columns:minmax(210px,1.1fr) minmax(150px,.8fr) minmax(200px,1.1fr);
  padding:13px 0;margin:0;
  border-bottom:1px solid var(--line-soft,rgba(22,19,15,.09));
}
.prose .gdlist li:last-child{border-bottom:0;}
.gd-name{font-size:16px;}
.gd-name b{font-weight:600;margin-left:7px;}
a.gd-wert{
  font-size:15px;color:var(--accent-ink);text-decoration:none;
  border-bottom:1px solid var(--line,rgba(22,19,15,.14));
  overflow-wrap:anywhere;justify-self:start;
}
a.gd-wert:hover{border-bottom-color:var(--accent,#8a6a3b);}
.gd-en{
  font-family:"Inter",sans-serif;font-size:.5em;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#8b8175);
  margin-left:12px;vertical-align:middle;
}
.prose .gd-sprung{font-size:15px;margin:0 0 34px;}
.prose .gd-sprung a{margin:0 2px;}
.prose .gd-hinweis{
  font-size:14.5px;color:var(--muted,#8b8175);
  border-top:1px solid var(--line,rgba(22,19,15,.14));
  padding-top:20px;margin-top:36px;
}
@media (max-width:760px){
  .prose .gdlist li{grid-template-columns:1fr;gap:5px;padding:15px 0;}
  .gd-name{font-weight:600;}
}

/* Guide mit eigenem Beitrag auf der Website - der Name wird zum Verweis. */
a.gd-seite{
  color:var(--ink,#16130f);text-decoration:none;
  border-bottom:1px solid var(--accent,#8a6a3b);
}
a.gd-seite:hover{color:var(--accent-ink);}

/* Marke fuer Guides mit eigenem Beitrag ---------------------------------
   Sie steht innerhalb des Verweises, damit die ganze Zeile anklickbar ist,
   und ist bewusst klein: in einem Verzeichnis von fuenfzig Namen soll ein
   Hinweis nicht wie eine Auszeichnung wirken. */
.gd-marke{
  display:inline-block;vertical-align:2px;
  margin-left:9px;padding:2px 8px 3px;
  font-family:"Inter",sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.1em;line-height:1.5;
  color:var(--accent-ink);
  background:rgba(138,106,59,.10);
  border-radius:999px;
  white-space:nowrap;
}
a.gd-seite:hover .gd-marke{background:rgba(138,106,59,.20);}
@media (max-width:760px){
  .gd-marke{margin-left:7px;font-size:10px;}
}