/* "Alpine Lake" design system - annecyguide.com
   DM Serif Display headings + Inter body on Essaouira's typographic rhythm,
   recoloured for Annecy: fir-and-lake teal, glacier stone, Old Town terracotta.

   Every colour pair below was measured against WCAG before it shipped. The two
   that needed inventing are --sage-lt and --coral-lt: the footer sits on --ink,
   and neither --sage nor --coral clears 4.5 against it (--coral is 2.65). Any
   text or accent glyph on a dark band uses the -lt pair.

   Class names are the portal engine's and must not be renamed - build_site.py,
   build_home.py and the content modules all emit them literally.

   Three rules here are load-bearing rather than decorative:
     * .map-embed isolation - without it Leaflet paints over the sticky header.
     * .real-strip.breakout width:min(1180px,94vw) - the 94vw ceiling is what
       keeps the full-bleed strip from causing horizontal scroll.
     * a.tour colour/decoration reset - the whole card is one <a> (helpers._card),
       so link styling has to be killed and re-expressed as hover feedback. */

/* ---------- metric-matched fallbacks (CLS) ----------
   The font link is display=swap, so the first paint uses a local font. If that
   font is a different width the headings wrap to a different line count and the
   page jumps when the webfont lands - measured at 0.19-0.25 CLS on an earlier
   site, and only in a ~940-1100px band, which is why a 1280px screenshot shows
   nothing. These ratios were measured per weight (Inter is 105.25% at 400 but
   100.87% at 600) against Liberation Serif/Sans, which are metric clones of
   Times New Roman/Arial by design - so a ratio measured here is the ratio on a
   visitor's Windows box. ascent/descent are divided by size-adjust, since
   size-adjust scales the overridden metrics too. */
@font-face{font-family:"DM Serif Display fb";src:local("Times New Roman"),local("Liberation Serif"),local("Tinos"),local("Nimbus Roman"),local("Thorndale AMT");font-weight:400;size-adjust:106.82%;ascent-override:96.98%;descent-override:31.36%;line-gap-override:0%}
@font-face{font-family:"Inter fb";src:local("Arial"),local("Helvetica"),local("Liberation Sans"),local("Arimo"),local("Albany AMT");font-weight:400;size-adjust:105.25%;ascent-override:92.04%;descent-override:22.92%;line-gap-override:0%}
@font-face{font-family:"Inter fb";src:local("Arial"),local("Helvetica"),local("Liberation Sans"),local("Arimo"),local("Albany AMT");font-weight:600;size-adjust:100.87%;ascent-override:96.04%;descent-override:23.91%;line-gap-override:0%}
@font-face{font-family:"Inter fb";src:local("Arial"),local("Helvetica"),local("Liberation Sans"),local("Arimo"),local("Albany AMT");font-weight:700;size-adjust:101.85%;ascent-override:95.12%;descent-override:23.68%;line-gap-override:0%}

:root{
  --ink:#123B44;        /* deep fir-and-lake teal: headlines, core text, dark bands */
  --sage:#4F6E73;       /* slate teal: captions, metadata, secondary rules */
  --sage-lt:#A8C0C4;    /* body text on --ink (6.34) */
  --sage-mid:#8AA6AB;   /* micro-labels on --ink (4.68) */
  --coral:#C2542F;      /* Old Town terracotta: the sole interaction accent */
  --coral-ink:#A8431F;  /* readable terracotta for link/body text (6.02 on white) */
  --coral-dk:#8C3717;   /* button hover */
  --coral-lt:#E8865C;   /* links and accent glyphs on --ink (4.61) */
  --neutral:#EDF1F0;    /* pale glacier stone: page foundation */
  --surface:#FFFFFF;    /* card / panel surface */
  --white:#FFFFFF;
  --line:#DCE4E1;       /* hairline on light */
  --line-mid:#C2D0CC;   /* stronger hairline */
  --line-dark:#2A5A63;  /* divider on --ink */
  --font-serif:"DM Serif Display","DM Serif Display fb",Georgia,"Times New Roman",serif;
  --font:"Inter","Inter fb",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --shadow-sm:0 2px 8px rgba(18,59,68,.06);
  --shadow-md:0 6px 24px rgba(18,59,68,.10);
  --shadow-lg:0 12px 40px rgba(18,59,68,.14);
  --r-sm:14px;
  --r-md:22px;
  --r-lg:34px;
  --maxw:1220px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}}
body{
  margin:0;
  font-family:var(--font);
  font-size:16px;line-height:1.6;color:var(--ink);background:var(--white);
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
img{max-width:100%;height:auto;display:block}
a{color:var(--coral-ink);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- type scale (Essaouira rhythm) ----------
   Display faces sit at weight 400 - DM Serif Display has no bold, and asking
   for one gets a synthesised smear. Weight lives in the sans instead. */
h1,h2,.display{font-family:var(--font-serif);font-weight:400;letter-spacing:-.015em}
.display{font-size:clamp(2.8rem,6vw,4.5rem);line-height:1.08}
h1{font-size:clamp(1.9rem,3.6vw,2.6rem);line-height:1.18;margin:.1em 0 .5em}
h2{font-size:clamp(1.45rem,2.6vw,1.9rem);line-height:1.28;margin:2.1em 0 .6em}
h3{font-family:var(--font);font-size:1.08rem;font-weight:700;line-height:1.35;letter-spacing:-.005em;margin:1.6em 0 .4em}
h4{font-family:var(--font);font-weight:600;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sage);margin:0 0 .6em}
p{margin:0 0 1.05em}

.label{font-family:var(--font);font-weight:600;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sage);margin:0 0 .5em}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--coral);color:#fff;font-family:var(--font);font-weight:600;
  font-size:.95rem;letter-spacing:0;
  padding:13px 26px;border-radius:var(--r-md);border:1.5px solid var(--coral);
  transition:background .15s,border-color .15s,transform .12s,box-shadow .15s;
  text-align:center;cursor:pointer;white-space:nowrap;
}
.btn:hover{background:var(--coral-dk);border-color:var(--coral-dk);text-decoration:none;color:#fff;transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line-mid)}
.btn-ghost:hover{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---------- header + dropdown nav ---------- */
.site-head{position:sticky;top:0;z-index:40;background:var(--white);border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm)}
.site-head .wrap{display:flex;align-items:center;gap:18px;height:68px}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink);font-family:var(--font-serif);font-size:1.22rem;font-weight:400;letter-spacing:-.015em;white-space:nowrap}
.logo:hover{text-decoration:none}
.logo .mark{width:30px;height:30px;flex:0 0 auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.nav-item{position:relative}
.nav .nav-top{display:flex;align-items:center;gap:6px;color:var(--ink);font-family:var(--font);font-weight:600;font-size:.9rem;letter-spacing:.01em;padding:23px 13px;border-radius:var(--r-sm)}
.nav .nav-top:hover{color:var(--coral-ink);text-decoration:none}
.nav .caret{width:9px;height:6px;opacity:.55}
.nav .drop{display:none;position:absolute;top:100%;left:0;min-width:252px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-lg);padding:8px 0;z-index:50;overflow:hidden}
.nav .drop a{display:block;color:var(--ink);font-family:var(--font);font-weight:500;font-size:.88rem;padding:9px 18px}
.nav .drop a:hover{background:var(--neutral);color:var(--coral-ink);text-decoration:none}
/* section thumbnail at the top of each dropdown panel */
.nav .drop .drop-img{display:block;padding:0;margin:0 12px 8px;border-radius:var(--r-sm);overflow:hidden}
.nav .drop .drop-img img{width:100%;height:110px;object-fit:cover;display:block;transition:transform .18s ease}
.nav .drop .drop-img:hover{background:none}
.nav .drop .drop-img:hover img{transform:scale(1.03)}
@media(min-width:981px){
  .nav-item.has-drop:hover .drop,.nav-item.has-drop:focus-within .drop{display:block}
}
.nav .nav-cta{margin-left:12px;color:#fff;padding:11px 20px;font-size:.88rem}
.nav .nav-cta:hover{color:#fff}
.nav-toggle{display:none;margin-left:auto;background:none;border:0;font-size:1.5rem;color:var(--ink);cursor:pointer}
@media(max-width:980px){
  .nav-toggle{display:block}
  .nav{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
        background:var(--white);border-bottom:1px solid var(--line);box-shadow:var(--shadow-md);
        padding:4px 24px 16px;max-height:calc(100vh - 68px);overflow-y:auto}
  .nav.open{display:flex}
  .nav-item{width:100%}
  .nav .nav-top{padding:13px 0;border-bottom:1px solid var(--line);width:100%;justify-content:space-between;border-radius:0}
  .nav .drop{display:none;position:static;border:0;border-radius:0;box-shadow:none;min-width:0;padding:2px 0 6px;background:var(--neutral)}
  .nav .drop .drop-img{display:none} /* keep the mobile accordion light */
  .nav .drop a{padding:9px 14px;font-size:.86rem}
  .nav-item.has-drop.open .drop{display:block}
  .nav-item.has-drop.open > .nav-top .caret{transform:rotate(180deg)}
  .nav .nav-cta{margin:14px 0 0;text-align:center;width:100%}
}

/* ---------- breadcrumb ---------- */
.crumb{font-family:var(--font);font-weight:600;font-size:.72rem;color:var(--sage);padding:16px 24px 0;text-transform:uppercase;letter-spacing:.05em}
.crumb a{color:var(--sage)}

/* ---------- portal hero (homepage): full-width photo, centred display title ---------- */
/* The JPEG fallback is og.jpg, NOT hero.jpg. hero.jpg is the 1920px Commons
   original: it is the input make_assets.py resizes from, it is 640KB, and the
   deploy zip deliberately leaves it behind - so pointing the fallback at it
   meant pre-image-set browsers requested a file the server does not have and
   got a flat dark hero. og.jpg is the same photograph, already shipping as the
   social card, and a centre crop of it reads correctly under background-cover.
   Anything that understands image-set never fetches either one. */
.hero{position:relative;background:var(--ink) center/cover no-repeat;background-image:url('/images/og.jpg');color:#fff}
.hero{background-image:-webkit-image-set(url('/images/hero.webp') type('image/webp'),url('/images/og.jpg') type('image/jpeg'));background-image:image-set(url('/images/hero.webp') type('image/webp'),url('/images/og.jpg') type('image/jpeg'))}
/* teal-tinted scrim, not neutral black - keeps the lake reading cold rather than grey */
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,59,68,.30) 0%,rgba(18,59,68,.52) 100%)}
.hero .wrap{position:relative;z-index:1;min-height:540px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:96px 24px}
.hero .label{color:#fff;opacity:.92;letter-spacing:.14em}
.hero h1{font-family:var(--font-serif);font-size:clamp(2.6rem,5.6vw,4.2rem);font-weight:400;letter-spacing:-.02em;line-height:1.06;margin:0 0 .3em;color:#fff;
  /* column floor: stops the wrap count changing across the swap band */
  max-width:clamp(60%,16em,100%)}
.hero .lede{font-size:1.1rem;color:rgba(255,255,255,.93);max-width:38em;margin:0 auto 1.7em;line-height:1.55}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin:0}
.hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.12)}
.hero .btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.hero-trust{font-size:.9rem;color:rgba(255,255,255,.88);margin:1.5em 0 0}
.hero-trust b{color:#fff}
/* Attribution for the hero background. It is a CSS background image, so there
   is no figure to caption - this line is the only place the CC BY-SA credit can
   appear. Sits over the scrim (z-index above ::before), deliberately quiet but
   never hidden: display:none here would be a licence breach, not a style choice.

   The text-shadow is doing compliance work, not decoration. At 72% white with no
   shadow the line was legible on desktop only because it happened to fall over
   dark water; on mobile the same line lands on a pale, busy stretch of the aerial
   photo and effectively disappeared. An attribution nobody can read is not an
   attribution, and legibility must not depend on which part of the photograph
   sits behind it - so the line carries its own contrast. */
.hero-photo-credit{position:absolute;right:14px;bottom:10px;z-index:1;margin:0;
  font-size:11px;line-height:1.3;color:rgba(255,255,255,.9);text-align:right;max-width:60%;
  text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 10px rgba(0,0,0,.55)}
.hero-photo-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.hero-photo-credit a:hover{color:#fff}
@media(max-width:640px){.hero .wrap{min-height:400px;padding:64px 24px}.hero h1{max-width:100%}
  /* On a narrow hero the absolute credit can collide with the CTA buttons, so
     it drops into normal flow beneath them instead of overlapping. */
  .hero-photo-credit{position:static;text-align:center;max-width:100%;padding:0 24px 12px}}

/* ---------- facts strip (under hero) ---------- */
.facts-strip{background:var(--white);border-bottom:1px solid var(--line)}
.facts-strip .wrap{display:flex;flex-wrap:wrap;padding:0}
.facts-item{flex:1 1 0;min-width:150px;padding:20px 24px;border-right:1px solid var(--line)}
.facts-item:last-child{border-right:0}
.facts-val{font-family:var(--font-serif);font-weight:400;font-size:1.35rem;line-height:1.1;color:var(--ink);letter-spacing:-.01em}
.facts-val .star{color:var(--coral)}
.facts-label{font-family:var(--font);font-size:.7rem;font-weight:600;color:var(--sage);text-transform:uppercase;letter-spacing:.07em;margin-top:.5em}
@media(max-width:780px){.facts-item{flex:1 1 50%;min-width:0;border-bottom:1px solid var(--line)}.facts-item:nth-child(2n){border-right:0}}
@media(max-width:420px){.facts-item{flex:1 1 100%;border-right:0}}

/* ---------- portal homepage sections ---------- */
/* centred intro essay */
.intro-essay{max-width:850px;margin:0 auto;padding:60px 24px 8px;text-align:left}
.intro-essay h2{margin:0 0 .6em}
.intro-essay p{font-size:1.02rem;color:#1B2F33;text-align:left}
.intro-essay p:first-of-type{font-size:1.1rem;line-height:1.62}
/* section heading: short terracotta rule above, hairline across */
.sec-head{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.sec-head h2{margin:2.6em 0 .3em;padding-top:.8em;border-top:1px solid var(--line);position:relative}
.sec-head h2::before{content:"";position:absolute;top:-2px;left:0;width:64px;height:3px;border-radius:2px;background:var(--coral)}
.sec-head .sec-sub{color:var(--sage);margin:0 0 1.4em;max-width:52em}
/* where-to-go: alternating photo/text rows */
.wtg{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.wtg-row{display:grid;grid-template-columns:1.1fr 1fr;gap:0;margin:0 0 26px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;transition:box-shadow .2s,transform .2s}
.wtg-row:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.wtg-row:nth-child(even){grid-template-columns:1fr 1.1fr}
.wtg-row:nth-child(even) .wtg-img{order:2}
.wtg-img{margin:0;overflow:hidden;background:var(--neutral)}
.wtg-img img{width:100%;height:100%;min-height:260px;object-fit:cover;transition:transform .4s}
.wtg-row:hover .wtg-img img{transform:scale(1.03)}
.wtg-body{padding:32px 36px;display:flex;flex-direction:column;justify-content:center}
.wtg-body h3{margin:0 0 .45em;font-family:var(--font-serif);font-weight:400;font-size:1.5rem;letter-spacing:-.015em}
.wtg-body p{color:#1B2F33;font-size:.95rem;margin:0 0 1.1em}
.wtg-more{font-family:var(--font);font-weight:600;font-size:.82rem;letter-spacing:.02em;color:var(--coral-ink)}
@media(max-width:760px){.wtg-row,.wtg-row:nth-child(even){grid-template-columns:1fr}.wtg-row:nth-child(even) .wtg-img{order:0}.wtg-body{padding:24px 24px 26px}}
/* featured content cards */
.featured{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.featured-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:0 0 10px}
.featured-grid a.fcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface);color:var(--ink);transition:box-shadow .2s,transform .2s}
.featured-grid a.fcard:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);text-decoration:none}
.fcard figure{margin:0;aspect-ratio:3/2;overflow:hidden;background:var(--neutral)}
.fcard img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.fcard:hover img{transform:scale(1.04)}
.fcard-body{padding:16px 20px 20px;display:flex;flex-direction:column;flex:1}
.fcard-kicker{font-family:var(--font);font-weight:600;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--coral-ink);margin-bottom:.5em}
.fcard h3{margin:0 0 .4em;font-size:1.02rem;line-height:1.3}
.fcard p{font-size:.88rem;color:var(--sage);margin:0}
@media(max-width:960px){.featured-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.featured-grid{grid-template-columns:1fr}}
/* plan-your-visit CTA panel */
.plan-cta{max-width:var(--maxw);margin:52px auto;padding:0 24px}
.plan-cta-inner{background:var(--neutral);border:1px solid var(--line);border-radius:var(--r-lg);padding:40px 42px}
.plan-cta-inner h2{margin:0 0 .4em}
.plan-cta-inner>p{max-width:56em;color:#1B2F33}
.plan-list{list-style:none;margin:1.2em 0 1.6em;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 32px}
.plan-list li{position:relative;padding:8px 0 8px 26px;border-bottom:1px solid var(--line-mid);font-size:.95rem}
.plan-list li::before{content:"\2192";position:absolute;left:0;color:var(--coral-ink);font-weight:700}
.plan-list a{color:var(--ink)}
.plan-list a:hover{color:var(--coral-ink)}
@media(max-width:680px){.plan-list{grid-template-columns:1fr}.plan-cta-inner{padding:28px 24px}}

/* ---------- explore link cluster (keyword interlinks, above footer) ---------- */
.explore{margin:2.4em 0 0;padding:28px 0 0;border-top:1px solid var(--line-mid)}
.explore h2{margin:0 0 .7em}

/* ---------- link tiles (boxed link blocks) ---------- */
.link-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:1.2em 0 1.8em}
.link-tiles .tile{display:flex;align-items:center;gap:14px;
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--coral);
  border-radius:var(--r-sm);
  color:var(--ink);font-family:var(--font);font-weight:600;font-size:.94rem;
  padding:15px 18px;line-height:1.35;transition:box-shadow .18s,background .18s,transform .18s}
.link-tiles .tile:hover{background:var(--neutral);box-shadow:var(--shadow-sm);transform:translateY(-1px);text-decoration:none;color:var(--coral-ink)}
.link-tiles .tile-arrow{color:var(--coral-ink);font-size:1.3rem;line-height:1;flex:0 0 auto;margin-left:auto}
@media(max-width:560px){.link-tiles{grid-template-columns:1fr}}

/* ---------- best-seller rows (compact ticket blocks, no images) ---------- */
.sell-list{border:1px solid var(--line);border-top:3px solid var(--coral);border-radius:var(--r-md);overflow:hidden;margin:1.2em 0 1.8em;background:var(--surface);box-shadow:var(--shadow-sm)}
.sell-row{display:flex;align-items:center;gap:18px;padding:17px 22px;border-bottom:1px solid var(--line);color:var(--ink)}
.sell-row:last-child{border-bottom:0}
.sell-row:hover{background:var(--neutral);text-decoration:none}
.sell-main{flex:1 1 auto;min-width:0}
.sell-main b{display:block;font-family:var(--font);font-weight:700;font-size:1rem;letter-spacing:-.005em;line-height:1.3;margin-bottom:2px}
.sell-rate{font-size:.82rem;color:var(--sage)}
.sell-price{flex:0 0 auto;font-weight:700;white-space:nowrap}
.sell-price small{font-weight:400;color:var(--sage)}
.sell-row .btn{flex:0 0 auto;padding:10px 20px;font-size:.86rem}
@media(max-width:640px){.sell-row{flex-wrap:wrap;gap:10px 18px}.sell-main{flex:1 1 100%}}

/* ---------- map page ---------- */
/* isolation + z-index:0 keep Leaflet's own stacking context below the sticky
   header. Removing either lets tiles and pins float over the nav. */
.map-embed{position:relative;z-index:0;isolation:isolate;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin:1.4em 0 .5em;background:var(--neutral)}
.map-embed iframe,.map-embed>div{display:block;width:100%;height:460px;border:0}
.map-note{font-size:.84rem;color:var(--sage);margin:0 0 1.6em}
.map-note a{color:var(--coral-ink)}
@media(max-width:640px){.map-embed iframe,.map-embed>div{height:340px}}
/* numbered attraction pins (Leaflet divIcon) + matching tile numbers.
   Background comes in inline per category, so these only set the disc + label. */
.map-pin{background:none;border:0;box-shadow:none}
.map-pin span{width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 6px rgba(18,59,68,.4)}
.map-pin svg{width:16px;height:16px;display:block}
.map-pin span{font-family:var(--font);font-weight:700;font-size:13px;line-height:1}
.map-pin span svg{width:16px;height:16px;display:block}
.map-note .dot{display:inline-block;width:11px;height:11px;border-radius:50%;margin:0 3px 0 6px;vertical-align:baseline}
.guide-entry{margin:0 0 28px}
.guide-entry h3{display:flex;align-items:center;gap:12px;margin:0 0 10px;font-family:var(--font-serif);font-weight:400;font-size:1.4rem;letter-spacing:-.015em}
.guide-entry h3 a{color:inherit}
/* .g-num carries an inline background from content_things (category colour).
   It is white-on-colour by contract - never reuse it without that inline fill,
   or the numeral renders white on white. */
.g-num{flex:0 0 32px;width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--coral);color:#fff;font-family:var(--font);font-weight:700;font-size:15px;line-height:1}
/* Guide-entry photo. The <figure> wrapper exists to carry the CC attribution:
   these are Commons files, so the credit is not optional furniture. The margin
   that used to sit on the image now sits on the figure, so the caption stays
   attached to its photo rather than floating into the paragraph below. */
.guide-figure{margin:0 0 12px}
.guide-photo{display:block;width:100%;height:auto;border-radius:var(--r-md);margin:0}
.guide-figure figcaption{font-size:12px;color:var(--sage);margin-top:6px}
.guide-figure figcaption a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.infographic{margin:24px 0 28px}
.infographic img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r-md)}
.infographic figcaption{font-size:13px;color:var(--sage);margin-top:8px}
.infographic-sq img{max-width:640px;margin:0 auto}
.leaflet-popup-content{font-family:var(--font);font-size:.9rem;line-height:1.45}
.leaflet-popup-content a{color:var(--coral-ink);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{border-radius:var(--r-sm)}
.tile-num{flex:0 0 26px;width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--coral);color:#fff;font-family:var(--font);font-weight:700;font-size:.78rem}
.tile-num svg{width:14px;height:14px;display:block}

/* ---------- main / prose ---------- */
.section-pad{padding-top:44px;padding-bottom:68px}
.prose{max-width:860px;margin:0 auto}
.prose.wide{max-width:1060px}
.prose ul,.prose ol{margin:0 0 1.15em;padding-left:1.2em}
.prose li{margin:.34em 0}
ul.check{list-style:none;padding-left:0}
ul.check li{position:relative;padding-left:1.7em;margin:.5em 0}
ul.check li::before{content:"\2192";position:absolute;left:0;top:0;color:var(--coral-ink);font-weight:700}

/* page-hero banner inside articles */
.page-hero{margin:0 0 1.6em;border-radius:var(--r-lg);overflow:hidden}
.page-hero img{width:100%;max-height:380px;object-fit:cover}
.page-hero .hero-credit{font-size:12px;color:var(--sage);margin:6px 0 0;padding:0 4px}
.page-hero .hero-credit a{color:var(--sage);text-decoration:underline;text-underline-offset:2px}

/* ---------- answer box ----------
   House rule: no prices and no rating figures in here, on any page, including
   review verdicts. Links stay underlined so they survive the tinted panel. */
.answer-box{background:var(--neutral);border-left:4px solid var(--coral);border-radius:0 var(--r-md) var(--r-md) 0;padding:22px 26px;margin:0 0 1.8em}
.answer-box p{margin:0}
.answer-box strong{color:var(--ink)}
.answer-box a{text-decoration:underline;text-underline-offset:2px}

/* ---------- key takeaways (homecontent.TAKEAWAYS) ---------- */
.ia-takeaways{background:var(--neutral);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 34px;margin:36px 0;color:#1B2F33}
.ia-takeaways h2{color:var(--ink);margin:0 0 14px;font-size:1.35rem}
.ia-takeaways ul{list-style:none;margin:0;padding:0}
.ia-takeaways li{display:flex;align-items:flex-start;gap:14px;padding:12px 0;line-height:1.55;border-bottom:1px solid var(--line-mid)}
.ia-takeaways li:last-child{border-bottom:0}
.ia-takeaways .tk-ico{flex:0 0 36px;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--coral);color:#fff;margin-top:2px}
.ia-takeaways .tk-ico svg{width:19px;height:19px}
.ia-takeaways li>div{flex:1}
.ia-takeaways b,.ia-takeaways strong{color:var(--ink)}
.ia-takeaways a{color:var(--coral-ink);text-decoration:underline;text-underline-offset:2px}
.ia-takeaways a:hover{color:var(--ink)}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;margin:1.3em 0;font-size:.94rem}
/* A bare markdown table has no minimum width in English and needs none. Its
   German translation does: "Ideal fuer / See, Baden, Radfahren" will not fold
   below about 460px, so on a 360px phone the table pushed the whole document
   125px wide. Give every table the same scroll container .cmp-wrap already
   gives the comparison tables, rather than letting one cell size the page. */
.tbl-wrap{overflow-x:auto;margin:1.3em 0;-webkit-overflow-scrolling:touch}
.tbl-wrap > table{margin:0}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:var(--ink);color:#fff;font-family:var(--font);font-weight:600;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}
thead th:first-child{border-top-left-radius:var(--r-sm)}
thead th:last-child{border-top-right-radius:var(--r-sm)}

/* ---------- tip / keyfacts / proscons ---------- */
.tip{background:var(--neutral);border:1px solid var(--line);border-left:4px solid var(--coral);border-radius:0 var(--r-md) var(--r-md) 0;padding:17px 22px;margin:1.5em 0}
.tip-label{display:inline-block;font-family:var(--font);font-weight:600;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--coral-ink);margin-bottom:.3em}
.tip p{margin:0}

/* ---------- deep-dive components (ticket cards, dos/donts, facts, timeline) ---------- */
.ticket-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:1.6em 0}
@media(max-width:700px){.ticket-cards{grid-template-columns:1fr}}
.tcard{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--coral);border-radius:var(--r-md);padding:20px 22px;display:flex;flex-direction:column;box-shadow:var(--shadow-sm)}
.tcard h3{margin:0 0 .35em;font-size:1.05rem}
.tcard .tc-meta{font-family:var(--font);font-weight:600;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--sage);margin-bottom:.5em}
.tcard p{margin:0 0 1em;font-size:.92rem;flex:1}
.tcard .btn{align-self:flex-start;padding:10px 20px;font-size:.86rem}
.dd-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:1.5em 0}
@media(max-width:700px){.dd-cols{grid-template-columns:1fr}}
.dd-col{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:18px 22px}
.dd-col h3{margin:0 0 .6em;font-size:.8rem;font-family:var(--font);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.dd-do h3{color:#1B6B4A}.dd-dont h3{color:#B3341F}
.dd-col ul{list-style:none;margin:0;padding:0}
.dd-col li{position:relative;padding-left:1.6em;margin:.45em 0;font-size:.93rem}
.dd-do li::before{content:"\2713";position:absolute;left:0;color:#1B6B4A;font-weight:700}
.dd-dont li::before{content:"\2715";position:absolute;left:0;color:#B3341F;font-weight:700}
ol.facts{list-style:none;counter-reset:fct;margin:1.4em 0;padding:0;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line)}
ol.facts li{counter-increment:fct;position:relative;padding:15px 20px 15px 62px;border-bottom:1px solid var(--line);background:var(--surface)}
ol.facts li:last-child{border-bottom:0}
ol.facts li::before{content:counter(fct,decimal-leading-zero);position:absolute;left:20px;top:13px;font-family:var(--font-serif);font-weight:400;font-size:1.25rem;color:var(--coral-ink)}

.keyfacts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin:1.6em 0}
.keyfacts div{background:var(--surface);padding:15px 18px}
.kf-label{display:block;font-family:var(--font);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sage);font-weight:600;margin-bottom:3px}
.keyfacts b{font-size:1rem}
@media(max-width:640px){.keyfacts{grid-template-columns:repeat(2,1fr)}}

.proscons{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:1.6em 0}
.pc{border:1px solid var(--line);border-radius:var(--r-md);padding:20px 22px;background:var(--surface)}
.pc ul{list-style:none;margin:0;padding:0}
.pc li{position:relative;padding-left:1.6em;margin:.5em 0}
.pros{border-top:3px solid var(--coral)}
.cons{border-top:3px solid var(--sage)}
.pros li::before{content:"\2713";position:absolute;left:0;color:var(--coral-ink);font-weight:700}
.cons li::before{content:"!";position:absolute;left:.25em;color:var(--sage);font-weight:700}
@media(max-width:640px){.proscons{grid-template-columns:1fr}}

.inclist{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:1.6em 0}
.inclist>div{border:1px solid var(--line);border-radius:var(--r-md);padding:20px 22px;background:var(--surface)}
.inclist h4{margin:0 0 .5em;font-family:var(--font);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.inclist ul{list-style:none;margin:0;padding:0}
.inclist li{position:relative;padding-left:1.6em;margin:.5em 0}
.inclist .inc{border-top:3px solid var(--coral)}
.inclist .inc h4{color:var(--coral-ink)}
.inclist .inc li::before{content:"\2713";position:absolute;left:0;color:var(--coral-ink);font-weight:700}
.inclist .exc{border-top:3px solid var(--sage)}
.inclist .exc h4{color:var(--sage)}
.inclist .exc li::before{content:"\00d7";position:absolute;left:.15em;color:var(--sage);font-weight:700}
.inclist.solo{grid-template-columns:1fr}
@media(max-width:640px){.inclist{grid-template-columns:1fr}}

/* ---------- tour cards ---------- */
.tours-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:20px;margin:1.5em 0 .4em}
.tours-grid.cols-4{grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:860px){.tours-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1024px){.tours-grid.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.tours-grid,.tours-grid.cols-4{grid-template-columns:1fr}}
.tour{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface);display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s}
.tour:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
/* whole card is an <a> (see helpers._card) - kill link styling, keep hover feedback */
a.tour{color:inherit;text-decoration:none}
a.tour:hover .btn{background:var(--coral-dk);border-color:var(--coral-dk)}
.thumb{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--neutral)}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s}
a.tour:hover .thumb img{transform:scale(1.04)}
.badge{position:absolute;top:12px;left:12px;background:#fff;color:var(--ink);font-family:var(--font);font-weight:700;font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;padding:5px 11px;border-radius:var(--r-sm);box-shadow:0 2px 6px rgba(18,59,68,.2)}
.tour-body{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.tour-body h3{font-size:1rem;margin:0 0 .45em;line-height:1.3;font-weight:700}
.rate{font-size:.85rem;color:var(--sage);margin-bottom:.5em}
.star{color:var(--coral)}
.price{font-weight:700;margin-bottom:.8em}
.price span{font-weight:400;color:var(--sage);font-size:.85rem}
.tour-body .btn{margin-top:auto;width:100%}
/* decorative filler tile (rounds out incomplete card rows on desktop) */
.tour-filler{position:relative;border:1px dashed var(--line-mid);border-radius:var(--r-md);background:var(--neutral);align-items:center;justify-content:center;min-height:180px;opacity:.45;filter:grayscale(1)}
.tour-filler:hover{border-color:var(--line-mid);box-shadow:none;transform:none}
.tour-filler .filler-art{position:absolute;inset:0;width:100%;height:100%;opacity:.5}
.tour-filler .filler-label{position:relative;font-family:var(--font);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.64rem;color:var(--sage);background:rgba(237,241,240,.88);padding:5px 12px;border-radius:var(--r-sm)}
@media(max-width:860px){.tour-filler{display:none}}
/* entry-fee badge on card thumbs */
.fee-badge{position:absolute;left:12px;bottom:12px;background:var(--ink);color:#fff;
  font-size:.72rem;font-weight:700;letter-spacing:.02em;padding:5px 11px;border-radius:var(--r-sm)}
/* price-per-day subtext */
.perday{font-size:.8rem;color:var(--sage);margin:-4px 0 10px}

/* ---------- book-card (docked chip availability) ---------- */
.book-card{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 22px 16px;margin:1.8em 0;background:var(--surface);box-shadow:var(--shadow-md)}
.book-chip{position:absolute;top:-14px;left:22px;background:var(--coral);color:#fff;font-family:var(--font);font-weight:700;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding:6px 16px;border-radius:var(--r-sm)}
.gyg-frame{min-height:220px}
/* cancel-note under availability widgets */
.cancel-note{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:.82rem;color:var(--sage)}

/* ---------- comparison table ---------- */
.cmp-wrap{overflow-x:auto;margin:1.8em 0}
/* The breakout is 110px on each side and the prose column caps at 1060px, so
   the wrapper is 1280px wide the moment this rule applies - which it did from
   1080px, leaving it up to 86px wider than the viewport for a 200px-wide band.
   Every page carrying a .cmp table had a horizontal scrollbar between 1080 and
   1279px, in ENGLISH as well; it survived the English render sweep only because
   that sweep never visits a page with a comparison table. Gate the rule on the
   width it actually needs (1060 + 220) plus a 20px gutter each side, so the
   breakout only happens when there is room for it. */
@media(min-width:1320px){.cmp-wrap{margin-left:-110px;margin-right:-110px}}
table.cmp{border-collapse:separate;border-spacing:0;min-width:640px;width:100%;font-size:1rem}
table.cmp th,table.cmp td{border:0;border-bottom:1px solid var(--line);padding:16px 20px;background:var(--surface)}
table.cmp thead th{background:var(--neutral);color:var(--ink);vertical-align:bottom;text-transform:none;letter-spacing:-.01em;font-family:var(--font);font-weight:700;border-radius:0}
table.cmp .rowlabel{font-family:var(--font);font-weight:600;color:var(--sage);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}
table.cmp .feat{background:var(--neutral);border-left:2px solid var(--coral);border-right:2px solid var(--coral)}
table.cmp thead .feat{border-top:2px solid var(--coral)}
table.cmp tr.cmp-book .feat{border-bottom:2px solid var(--coral)}
.cmp-badge{display:inline-block;background:var(--coral);color:#fff;font-family:var(--font);font-weight:700;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:var(--r-sm);margin-bottom:6px}
.feat-title{display:block;font-family:var(--font-serif);font-weight:400;font-size:1.25rem;letter-spacing:-.015em}
.col-alt{color:var(--ink)}
table.cmp .btn{width:100%;padding:11px 12px;font-size:.86rem}

/* ---------- gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:1.8em 0}
.gallery figure{margin:0;position:relative;border-radius:var(--r-md);overflow:hidden}
.gallery img{width:100%;aspect-ratio:3/4;object-fit:cover}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,rgba(18,59,68,0) 0%,rgba(18,59,68,.86) 55%);color:#fff;font-family:var(--font);font-weight:600;font-size:.72rem;padding:24px 14px 11px;letter-spacing:.03em}
@media(max-width:760px){.gallery{grid-template-columns:repeat(2,1fr)}}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:1.5em 0;counter-reset:s}
.step{border-top:3px solid var(--coral);padding:16px 4px 0;counter-increment:s}
.step::before{content:counter(s);font-family:var(--font-serif);font-weight:400;font-size:1.7rem;color:var(--coral-ink);display:block;margin-bottom:.05em;line-height:1.1}
.step h3{margin:0 0 .25em;font-size:1.02rem}
.step p{font-size:.9rem;color:var(--sage);margin:0}
@media(max-width:760px){.steps{grid-template-columns:repeat(2,1fr)}}

/* ---------- reviews band (aggregate rating strip on money pages) ---------- */
.reviews-band{background:var(--neutral);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;margin:1.8em 0}
.reviews-head{display:flex;align-items:center;gap:18px}
.reviews-head .big{font-family:var(--font-serif);font-weight:400;font-size:3.2rem;color:var(--ink);line-height:1;letter-spacing:-.02em}
.reviews-head .stars{color:var(--coral);font-size:1.1rem;letter-spacing:2px}

/* ---------- honest guide ---------- */
.honest-guide{background:var(--neutral);border:1px solid var(--line);border-radius:var(--r-lg);padding:36px 34px;margin:2.4em 0}
.honest-guide h2{margin-top:0}
.honest-guide .lead{font-size:1.08rem;color:var(--ink)}
.honest-guide h3{margin-top:1.5em}

/* ---------- quick-answers band (numbered Q&A grid, distinct from FAQ accordion) ---------- */
.qa-band{background:var(--neutral);border:1px solid var(--line);border-top:3px solid var(--coral);border-radius:var(--r-lg);padding:38px 34px;margin:2.4em 0}
.qa-band h2{margin-top:0}
.qa-band .lead{font-size:1.05rem;color:var(--ink);max-width:44em}
.qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px 36px;margin-top:1.6em;counter-reset:qa}
.qa-cell{counter-increment:qa;position:relative;padding-left:46px}
.qa-cell::before{content:counter(qa,decimal-leading-zero);position:absolute;left:0;top:0;font-family:var(--font-serif);font-weight:400;font-size:1.35rem;color:var(--coral);letter-spacing:-.02em;line-height:1.2}
.qa-cell h3{margin:0 0 .4em;font-size:1.02rem}
.qa-cell p{margin:0;font-size:.94rem}
.qa-cell a{color:var(--coral-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
@media(max-width:700px){.qa-grid{grid-template-columns:1fr}.qa-band{padding:28px 22px}}
.guide-fig{margin:1.5em 0}
.guide-fig img{width:100%;max-height:340px;object-fit:cover;border-radius:var(--r-md)}
.guide-fig figcaption{font-size:.84rem;color:var(--sage);margin-top:.5em;font-style:italic}

/* ---------- FAQ ---------- */
.faq{margin:1em 0}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;font-weight:600;padding:15px 30px 15px 0;position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--coral-ink)}
.faq summary::after{content:"+";position:absolute;right:4px;top:12px;color:var(--coral-ink);font-weight:700;font-size:1.3rem}
.faq details[open] summary::after{content:"\2212"}
.faq-body{padding:0 0 14px}
.faq-body p{margin:0}
.faq-contact{margin:1.1em 0 .2em;font-weight:600;color:var(--ink)}
.faq-contact a{color:var(--coral-ink)}

/* ---------- disclosure ---------- */
.disclosure{font-size:.84rem;color:var(--sage);background:var(--neutral);border-radius:var(--r-sm);padding:14px 18px;margin:1em 0 1.6em}
.disclosure a{color:var(--coral-ink)}

/* related strip */
.related{border-top:1px solid var(--line-mid);margin-top:2.4em;padding-top:1.4em}

/* sitemap */
.sitemap-list{list-style:none;padding-left:0}
.sitemap-list li{margin:.4em 0;padding-left:1.2em;position:relative}
.sitemap-list li::before{content:"\2192";position:absolute;left:0;color:var(--coral-ink)}

/* ---------- footer ----------
   Everything here sits on --ink, so body text is --sage-lt (6.34), micro-labels
   are --sage-mid (4.68) and dividers are --line-dark. --coral would be 2.65
   against this background and is used only for the decorative top rule. */
.site-foot{background:var(--ink);color:var(--sage-lt);margin-top:48px;border-top:4px solid var(--coral)}
.site-foot .wrap{padding:52px 24px 32px}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.4fr;gap:32px}
.site-foot .brand .logo{color:#fff;margin-bottom:.6em}
.site-foot .brand p{font-size:.9rem;max-width:34em}
.site-foot h4{color:#fff;margin-bottom:.8em}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin:.42em 0}
.site-foot a{color:var(--sage-lt);font-size:.9rem}
.site-foot a:hover{color:#fff}
.foot-answers{margin-top:28px;border-top:1px solid var(--line-dark);padding-top:20px;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px}
.foot-answers .label{font-family:var(--font);font-weight:600;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sage-mid)}
.foot-answers nav{display:flex;flex-wrap:wrap;gap:8px 18px}
.foot-answers a{color:var(--sage-lt);font-size:.86rem}
.foot-answers a:hover{color:#fff}
.foot-brand{display:grid;grid-template-columns:1.7fr 1.3fr;gap:32px;align-items:end;margin-bottom:34px;border-bottom:1px solid var(--line-dark);padding-bottom:30px}
.foot-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.foot-facts .kf-label,.foot-facts .label{display:block;font-family:var(--font);font-weight:600;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sage-mid);margin-bottom:3px}
.foot-facts b{color:#fff;font-size:.92rem}
.foot-bottom{margin-top:28px;border-top:1px solid var(--line-dark);padding-top:18px;font-family:var(--font);font-size:.74rem;color:var(--sage-mid)}
.foot-bottom a{color:var(--sage-lt)}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-template-columns:1fr;align-items:start}}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr}.foot-facts{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.foot-facts{grid-template-columns:repeat(2,1fr)}}

/* ---------- real-photo trust strip (Wikimedia Commons, credited) ---------- */
.real-strip{margin:0 0 40px}
.real-strip>h2{text-align:center}
.real-strip>p{color:var(--sage);margin-top:4px;text-align:center;max-width:820px;margin-left:auto;margin-right:auto}
.real-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}
.real-grid figure{margin:0}
.real-grid img{width:100%;aspect-ratio:3/2;height:auto;object-fit:cover;display:block;border-radius:var(--r-md)}
.real-grid figcaption{font-size:.76rem;color:var(--sage);margin-top:7px;line-height:1.4}
.real-grid figcaption a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@media(max-width:720px){.real-grid{grid-template-columns:1fr}}
/* full-bleed escape from .prose. The 94vw ceiling is what stops this causing
   horizontal scroll - any breakout added later must be gated the same way. */
.real-strip.breakout{position:relative;left:50%;transform:translateX(-50%);width:min(1180px,94vw)}
.real-zoom{display:block;cursor:zoom-in}
.real-zoom img{transition:transform .18s ease}
.real-zoom:hover img{transform:scale(1.015)}
/* lightbox overlay for full-size photos */
.lightbox{position:fixed;inset:0;z-index:80;background:rgba(9,30,35,.94);
  display:flex;align-items:center;justify-content:center;cursor:zoom-out;padding:24px}
.lightbox[hidden]{display:none}
.lightbox figure{margin:0;max-width:min(1500px,96vw);text-align:center}
.lightbox img{max-width:100%;max-height:84vh;display:block;margin:0 auto;border-radius:var(--r-sm)}
.lightbox figcaption{color:#E4ECEC;font-size:.82rem;margin-top:10px;line-height:1.4}
.lightbox figcaption a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* author card (EEAT, about page - driven by cfg.AUTHOR) */
.author-card{display:flex;gap:20px;align-items:center;margin:18px 0 26px;padding:20px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.author-card img{width:96px;height:96px;border-radius:50%;object-fit:cover;flex-shrink:0}
.author-card div{display:flex;flex-direction:column;gap:3px}
.author-card b{font-size:1.05rem}
.author-card span{font-size:.85rem;color:var(--sage)}

/* ---- Language dropdown ----
   The switcher is inserted BEFORE .nav-toggle, i.e. between the logo and the
   nav. Both .nav and .nav-toggle ship with margin-left:auto, and a second auto
   margin does not stack — it splits the free space, which strands the switcher
   in the middle of an empty header instead of parking it beside the nav. So the
   auto margin moves onto .lang-dd and comes off the two elements after it; the
   three then travel as one right-aligned group.
   The 920px below is not a round number picked for tidiness: it is this
   header's own hamburger breakpoint, so the compact switcher and the collapsed
   nav appear at exactly the same width. Inheriting a breakpoint from wherever
   this block was last used leaves a band where a full-size switcher sits next
   to a hamburger. */
.site-head .wrap{display:flex;align-items:center}
/* NO `.nav a{white-space:nowrap}` here, however tempting. It rode along in this
   block from a site whose nav was four short items, and on this portal's six
   items plus a CTA it is destructive: between 921px (the hamburger breakpoint) and
   1120px the nav labels are SUPPOSED to wrap to two lines, and that wrapping is
   the only reason the header fits at all. Forcing them onto one line pushed the
   nav 174px past the right edge of the viewport and gave every page a
   horizontal scrollbar in a band no default screenshot width visits. The
   switcher's own menu does need nowrap — it is set on `.lang-menu a` below,
   where it belongs. */
.site-head .nav{margin-left:0}
.site-head .nav-toggle{margin-left:0}
.lang-dd{position:relative;margin-left:auto;margin-right:10px;flex-shrink:0}
.lang-dd summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:5px;font-family:"Inter","Inter fb",sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.04em;color:var(--ink);padding:5px 10px;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.lang-dd summary::-webkit-details-marker{display:none}
.lang-dd summary::after{content:"\25BE";font-size:.6rem;color:var(--sage)}
.lang-dd[open] summary{background:var(--neutral)}
.lang-dd .lang-menu{position:absolute;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.10);padding:6px;display:flex;flex-direction:column;min-width:130px;z-index:60}
.lang-menu a{padding:7px 10px;border-radius:6px;font-size:.78rem;font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap}
.lang-menu a:hover{background:var(--neutral)}
.lang-menu a.active{color:var(--coral-ink);background:var(--neutral)}
@media(max-width:980px){.lang-dd{margin-right:6px}.lang-dd summary{padding:4px 8px;font-size:.68rem}}
/* The switcher costs the header about 59px (49px box + 10px margin-right + the
   flex gap). Between the hamburger breakpoint and ~1120px the nav has ALREADY
   wrapped to two lines and cannot give that width back by wrapping further — its
   right edge is pinned at its minimum, measured at 947px. Without this rule the
   last 26px go past the viewport and every page gets a horizontal scrollbar in a
   band no default screenshot width visits. So buy the width back from horizontal
   padding, the one thing in the header that is decoration rather than content:
   4px off each side of six nav items is 48px, plus 16px from the CTA.
   HORIZONTAL ONLY. `.nav .nav-top` ships `padding:23px 13px`, and that 23px is
   what sets the header's height — rewriting the shorthand here would collapse the
   header by 20px at exactly these widths and nowhere else.
   The upper bound is a real bound, not tidiness: above ~1120px the nav sits on one
   line with room to spare, and the roomier padding is the better-looking default,
   so this compaction must not leak into it. */
@media(min-width:981px) and (max-width:1120px){
  .nav .nav-top{padding-left:9px;padding-right:9px}
  .nav .nav-cta{margin-left:8px;padding-left:14px;padding-right:14px}
  .lang-dd{margin-right:6px}
  .lang-dd summary{padding:4px 8px;font-size:.68rem}
}

/* The hero CTA must be allowed to fold. `.btn` ships white-space:nowrap, which is
   right for the short English labels but makes the button an unbreakable box: the
   German "Beginnen Sie mit dem vollstaendigen Guide" measures 361px against a
   360px viewport, so the whole document scrolled sideways by 1px on the German
   homepage. Nothing in the English render sweep can see this - the English label
   is half the length - which is the same shape of blindness as the comparison
   table breakout above.

   Deliberately NOT gated behind a media query. white-space:normal only PERMITS
   wrapping; an inline-flex button still sizes to max-content whenever max-content
   fits, so every viewport where the label already sat on one line renders
   identically. A breakpoint here would be a guess about which label in which
   language runs long at which width, and would be wrong the next time a language
   is added. Scoped to .hero-cta so the nav CTA and in-body buttons keep the
   nowrap they were given. */
.hero-cta .btn{white-space:normal;max-width:100%}