/* "Sandstone & Ledger" design system - nurembergguide.com
   Newsreader headings + Inter body. Nuremberg was Europe's printing capital -
   Koberger's 1493 Chronicle, Duerer's workshop - so the register is documentary
   print: a laid-paper ground, a warm printer's black rather than a cold
   blue-black, and a rubrication red lifted off the city's own sandstone roofs.

   The accent is doing double duty deliberately. This site has to hold a
   Christmas market page and the Nazi rally grounds in the same skin. Festive
   red-and-green would make the history pages tasteless; institutional grey
   would make the market pages lifeless. An oxide red is warm enough for
   December and sober enough for the Zeppelinfeld.

   Three token groups depart from the portal default on purpose, and together
   they are what makes this read as print rather than as a soft travel app:
     * radii are roughly halved (6/10/16 against 14/22/34). Letterpress has
       corners.
     * shadows are near-flat and warm-tinted; separation is carried by the
       hairline rules instead, which is how a page of print does it.
     * --maxw is 1180, narrower than the 1220 default, so measure stays closer
       to a column.

   Every colour pair below was measured against WCAG before it shipped, not
   eyeballed. The three that needed solving are --sage-lt, --sage-mid and
   --oxide-lt: the footer sits on --ink and the base --sage and --oxide do not
   clear 4.5 against it. Any text or accent glyph on a dark band uses a -lt/-mid.

   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 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. Two things that are easy to get wrong:
   ascent/descent are divided by size-adjust, because size-adjust scales the
   overridden metrics too; and both families are variable with an *opsz* axis, so
   each must be instanced at the axis DEFAULT (Newsreader 18, Inter 14) - that is
   what Google serves for a wght-only request. Instancing Inter at opsz 32
   instead of 14 moves its ratio from 109% to 100%, which would quietly defeat
   the whole point of this block. */
@font-face{font-family:"Newsreader fb";src:local("Times New Roman"),local("Liberation Serif"),local("Tinos"),local("Nimbus Roman"),local("Thorndale AMT");font-weight:400;size-adjust:100.45%;ascent-override:73.17%;descent-override:26.38%;line-gap-override:0%}
@font-face{font-family:"Newsreader fb";src:local("Times New Roman"),local("Liberation Serif"),local("Tinos"),local("Nimbus Roman"),local("Thorndale AMT");font-weight:600;size-adjust:99.43%;ascent-override:73.92%;descent-override:26.65%;line-gap-override:0%}
@font-face{font-family:"Newsreader fb";src:local("Times New Roman"),local("Liberation Serif"),local("Tinos"),local("Nimbus Roman"),local("Thorndale AMT");font-weight:700;size-adjust:102.11%;ascent-override:71.98%;descent-override:25.95%;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:109.38%;ascent-override:88.57%;descent-override:22.05%;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:102.65%;ascent-override:94.37%;descent-override:23.50%;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:104.18%;ascent-override:92.99%;descent-override:23.15%;line-gap-override:0%}

:root{
  --ink:#23201C;        /* warm printer's black: headlines, core text, dark bands */
  --sage:#6B6055;       /* sandstone grey-brown: captions, metadata, secondary rules */
  --sage-lt:#ABA095;    /* body text on --ink (6.33) */
  --sage-mid:#95887A;   /* micro-labels on --ink (4.70) */
  --coral:#9C3B24;      /* rubrication oxide red: the sole interaction accent (6.85 on white) */
  --coral-ink:#85311D;  /* darker oxide for link/body text */
  --coral-dk:#6E2817;   /* button hover */
  --coral-lt:#D6684E;   /* links and accent glyphs on --ink (4.59) */
  --neutral:#F4EFE6;    /* laid paper: page foundation (ink on it, 14.16) */
  --surface:#FFFFFF;    /* card / panel surface */
  --white:#FFFFFF;
  --line:#E2D9CA;       /* hairline on light */
  --line-mid:#CDBFA9;   /* stronger hairline */
  --line-dark:#463E37;  /* divider on --ink (1.55) */
  --font-serif:"Newsreader","Newsreader fb",Georgia,"Times New Roman",serif;
  --font:"Inter","Inter fb",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --shadow-sm:0 1px 2px rgba(35,32,28,.07);
  --shadow-md:0 2px 8px rgba(35,32,28,.09);
  --shadow-lg:0 6px 22px rgba(35,32,28,.13);
  --r-sm:6px;
  --r-md:10px;
  --r-lg:16px;
  --maxw:1180px;
}

*{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}
/* nowrap is structural, not cosmetic. Without it a nav label that does not fit
   breaks across two lines INSIDE its own item - "Christmas / Market" - and the
   header still measures 68px tall, so nothing downstream notices: the layout
   sweep sees no overflow, no shift and a constant header height while every
   label on the site is broken in half. With nowrap the failure becomes visible
   as overflow, which is what the breakpoint below is set from. */
/* 10px of side padding, not the 13px this header started with. 13px left only
   20px of free space between the wordmark and the nav at every width above
   1280 - LESS headroom than at the hamburger breakpoint itself, where the
   compaction band gives 37px. These widths are measured in headless Chromium
   on Linux and read on Windows, where Inter's metrics differ slightly, and a
   2% difference is about 19px across seven items: at 20px of slack that is the
   whole margin. 10px buys the headroom back to 56px and is not perceptibly
   tighter. */
.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 10px;border-radius:var(--r-sm);white-space:nowrap}
.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)}
/* ---- the hamburger breakpoint: 1150px, and it is MEASURED, per language ----
   Re-measured 2026-08-28 when DE/SV/IT shipped. Two things changed the budget:
   the language switcher is a new ~60px item in the row, and translated labels
   are not English labels. At >=1281px the shell gives 1132px of content, the
   wordmark takes 186 and the switcher ~60, leaving about 849px for the nav.
   Measured need was en 890, it 968, de 832, sv 842 - so English and Italian
   overflowed the row and the other two had no usable margin.
   Fixed by shortening the ONE fat slot rather than by widening the shell (the
   shell was already proven not to help): the map CTA carried the site subject
   redundantly, "Nuremberg Map" 155px / "Mappa di Norimberga" 193px, and is now
   Map / Karte / Karta / Mappa. it+sv also lost a very long Nazi-era label.
   After that, headroom at the breakpoint: en 23, it 28, de 73, sv 145 - so
   ENGLISH is now the widest language, not German.
   1150 rather than 1121 for the usual reason: measured in headless Chromium on
   Linux, read on Windows where Inter runs 1-2% wider (~15px across this nav).
   30px is that margin.
   FOUR rules share this breakpoint - this one, the mobile block below, the
   compaction band, and the switcher block appended at the end of this file.
   The last one is generated: change the number here and re-run
   `translate_nuremberg.py --prep-only`, which rewrites it between sentinels.
   The accordion in build_site.NAV_JS reads it off the computed style of
   .nav-toggle rather than repeating the number.
   If you add a language, re-run navsweep_i18n.py. Do NOT binary-search it. */
@media(min-width:1151px){
  .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:1150px){
  .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'))}
/* ink-tinted scrim, not neutral black - keeps photos reading warm rather than grey */
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(35,32,28,.30) 0%,rgba(35,32,28,.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(35,32,28,.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}
/* Clustered pins. The markercluster plugin ships its own styling - a lime and
   blue double halo that belongs to no palette on this site - so it is
   overridden rather than loaded and lived with. A cluster reuses .map-pin, so
   it is the same 28px disc as a single pin and reads as "several of these",
   which is exactly what it is. The white ring is the only difference, enough
   to tell it from a lone pin without introducing a second shape. */
.map-cluster span{cursor:pointer;box-shadow:0 0 0 3px rgba(255,255,255,.55),0 2px 6px rgba(35,32,28,.45)}
.marker-cluster,.marker-cluster div{background:none!important;border:0!important}
.marker-cluster-small,.marker-cluster-medium,.marker-cluster-large{background:none!important}
.leaflet-cluster-anim .leaflet-marker-icon{transition:transform .2s ease-out,opacity .2s ease-in}
.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}
tbody tr.row-hi{background:var(--neutral)}
tbody tr.row-hi td:first-child{box-shadow:inset 3px 0 0 var(--coral)}
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}

/* Time-limited service notice - engineering works, closures, seasonal changes.
   Deliberately NOT styled as .tip: a tip is advice you can ignore, this is a
   fact that will ruin someone's day if they miss it. Heavier rule, ink-coloured
   label, and a dated footer line so a reader can tell at a glance whether it has
   expired. Always pass the expiry to notice() - an undated warning outlives its
   truth and quietly turns a correct page into a wrong one. */
.notice{background:var(--surface);border:1px solid var(--line-mid);border-left:5px solid var(--ink);border-radius:0 var(--r-md) var(--r-md) 0;padding:18px 24px;margin:1.6em 0;box-shadow:var(--shadow-sm)}
.notice-label{display:inline-block;font-family:var(--font);font-weight:700;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:.45em}
.notice-label::before{content:"";display:inline-block;width:.5em;height:.5em;margin-right:.55em;border-radius:50%;background:var(--coral);vertical-align:.08em}
.notice p{margin:0 0 .8em;font-size:.95rem}
.notice p:last-child{margin-bottom:0}
.notice-until{display:block;margin-top:.9em;padding-top:.7em;border-top:1px solid var(--line);font-family:var(--font);font-size:.76rem;color:var(--sage);letter-spacing:.02em}

/* ---------- 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(35,32,28,.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(35,32,28,0) 0%,rgba(35,32,28,.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)}

/* ---- header compaction band ----
   Between the hamburger breakpoint and 1280px the one-line nav fits, but only
   just, so it buys width back from horizontal padding - the one thing in the
   header that is decoration rather than content. 2px off each side of six nav
   items is 24px, plus 12px from the CTA, which is what carries the row through
   the last 60px above the breakpoint.
   HORIZONTAL ONLY. `.nav .nav-top` ships `padding:23px 10px`, 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 1280px the row has room
   to spare and the roomier padding is the better-looking default, so the
   compaction must not leak into it.

   What used to live here was the language-switcher block, and it was dead code
   on a monolingual site - "lang-dd" appears zero times in the built HTML. Dead
   is not harmless. It carried `.site-head .nav-toggle{margin-left:0}`, which
   overrode the hamburger's own `margin-left:auto` and parked the button next to
   the wordmark in the middle of an empty header on every phone. It also carried
   a comment insisting the nav labels were SUPPOSED to wrap to two lines and
   that nowrap would push the nav 174px off-screen. Both claims were measured on
   the four-item nav of the site this block came from; on this seven-item header
   the labels wrapped at 1920px too, which is not a narrow-window trade-off, and
   the fix was to shorten two labels rather than to accept broken ones. The
   translation pipeline re-adds the switcher CSS with the site's own breakpoint
   when a site actually becomes multilingual. */
@media(min-width:1151px) and (max-width:1280px){
  .nav .nav-top{padding-left:8px;padding-right:8px}
  .nav .nav-cta{margin-left:8px;padding-left:14px;padding-right:14px}
}

/* 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%}
/* ==== LANG-SWITCHER BEGIN (generated by translate_nuremberg.py) ==== */
/* ---- Language dropdown ----
   Two margin traps live in this block; both have shipped as bugs before.

   1) `.nav` carries `margin-left:auto` to sit flush right. The switcher needs
      the same thing, and two `auto` margins SPLIT the free space instead of
      handing it to the last item - the nav ends up floating in the middle of
      the header. So the switcher takes the auto and `.nav` gives it up.
   2) The mirror image on mobile: below the breakpoint `.nav` is display:none
      and `.nav-toggle` is what needs to sit right, so the toggle keeps its own
      auto only while no switcher is present. Here a switcher IS present and
      comes first in source order, so the switcher takes the auto and the toggle
      must give it up - otherwise they split the bar and the hamburger strands
      in the middle. NEVER copy `.nav-toggle{margin-left:0}` into a site with no
      switcher; on its own it is exactly the stranded-hamburger bug.
   Verify both: on desktop the nav should end a gutter in from the right edge,
   on a phone the hamburger should. */
.site-head .wrap{display:flex;align-items:center}
.site-head .nav{margin-left:0}
.lang-dd{position:relative;margin-left:auto;flex-shrink:0}
.lang-dd summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:5px;font-family:var(--font);font-weight:700;font-size:.72rem;letter-spacing:.04em;color:var(--ink);padding:5px 9px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);white-space:nowrap}
.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:var(--white);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-md);padding:6px;display:flex;flex-direction:column;min-width:132px;z-index:60}
.lang-menu a{padding:7px 10px;border-radius:var(--r-sm);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)}
/* The switcher sits between the nav and the hamburger, so it must compact at
   the SAME width the nav collapses at - otherwise there is a band where a
   full-size switcher stands next to a hamburger. This number is the site's
   hamburger breakpoint and is measured, not chosen: see the header comment in
   style.css. If nav items or languages change, re-measure. */
@media(max-width:1150px){.lang-dd{margin-right:10px}.lang-dd summary{padding:4px 8px;font-size:.68rem}.site-head .nav-toggle{margin-left:0}}
/* ==== LANG-SWITCHER END ==== */