/* ============================================================================
   Design tokens - the single source of truth for the template.

   Colour was locked with the owner on 2026-09-07 ("Roof red", hand-tuned after the
   palette tool's three proposals all came back blue-only), the logo on the same day,
   and the type scale on the same day from the stage 2 tuner page, judged on the real
   northern-lights article at desktop width and at 390px.

   Nothing in the renderer may hard-code a colour, size or family. Everything reads from
   here, so a change lands everywhere at once and translates cleanly into the nine other
   locales.
   ============================================================================ */

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 700;          /* one variable file, not two static cuts */
  font-display: swap;
  src: url("/assets/fonts/figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/figtree-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {

  /* ---- Typography -------------------------------------------------------
     ONE family for everything. That was a speed decision as much as a visual
     one: a single variable font means one file, one connection, no second
     face blocking first paint.

     SELF-HOSTED, and on this site that is still a legal question rather than a
     preference. The guide publishes in ten languages, German among them, and a
     German reader loading the face from fonts.googleapis.com would send their IP
     address to Google before any consent could be collected - the setup the
     Landgericht Muenchen penalised in 2022. Serve it from our own origin. There
     is no Google connection anywhere in the pages.

     Two subsets, 30 KB total, one variable file each covering 400..700. The
     browser downloads latin-ext only if a glyph needs it; English prose never
     does, and Icelandic place names (Reykjavik, Hallgrimskirkja, Thingvellir)
     are written with their real letters in the latin-ext range, so the second
     file does get pulled on most pages of this site. Figtree is OFL licensed;
     assets/fonts/OFL.txt ships beside it as the licence requires.             */


  --font-body: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-head: var(--font-body);

  --size-body:      19px;
  --leading-body:   1.62;
  --measure:        680px;   /* max line length for running prose */
  --space-para:     1.10em;
  --weight-body:    400;

  --size-h1:        43px;
  --weight-head:    700;
  --tracking-head:  -0.025em;
  --leading-head:   1.15;

  /* Heading scale.
     NOTE: h2 is set explicitly rather than derived from h1. Deriving it on the
     reference site produced a 21.5px h2, only 16 % above body text, which is too
     weak a step for articles that run to 2,500 words. These values keep a
     readable ladder under the h1 whatever the h1 ends up being.              */
  --size-h2:        29px;
  --size-h3:        23px;
  --size-lede:      21.5px;  /* the standfirst under h1 */
  --size-small:     16.5px;  /* captions, meta, footnotes */
  --size-micro:     13.5px;  /* eyebrows, labels, table headers */

  /* Mobile step-down. English headlines are shorter than the German ones these
     numbers were first cut for, but "When the northern lights are actually
     visible from Reykjavik" still needs the h1 to come down at 390px.        */
  --size-h1-sm:     32px;
  --size-h2-sm:     24px;
  --size-body-sm:   18px;

  /* ---- Colour -----------------------------------------------------------
     Light only, by owner decision: light hero, light body, light everywhere.
     The palette is "Roof red", read off the owner's own hero photograph on
     2026-09-07: the bay and the mountain give the blue, the roofs of the old
     town give the red, and the neutrals are cooled towards the blue so they
     read as chosen rather than defaulted. Every ratio below is measured
     against --paper, not estimated.                                          */

  --paper: #F5F7F9;   /* page ground - a cool near-white, the winter light in
                                  the hero photograph */
  --paper-sunk: #E7ECF0;   /* alternating section bands */
  --card: #FFFFFF;   /* cards lift off the cool ground */
  --ink: #12222C;   /* body text - the harbour navy. 15.15:1 */
  --ink-soft: #54626B;   /* secondary text, captions. 5.86:1 */
  --ink-faint: #8B979E;   /* meta, disabled - decorative only, never body copy */
  --rule: #D4DCE2;   /* card borders */
  --rule-soft: #E4EAEE;   /* internal dividers, table rows */

  --accent: #0F6C9E;   /* links, eyebrows. The bay blue, dark enough to read
                                  as text. 5.34:1 */
  --accent-rgb: 15, 108, 158;  /* the same colour as a triplet, for the rgba() stops of
                                  the subheading device. Keep in step with --accent. */
  --accent-ink: #0A4C70;   /* link hover. 8.57:1 */
  --teal: #2C6E74;   /* the secondary accent. Non-commercial notes and
                                  informational callouts only. 5.45:1 */

  /* ---- Call to action ---------------------------------------------------
     BINDING RULE, owner instruction: the CTA must always hold strong contrast
     against everything around it. Reserved for commercial calls to action and
     never reused for links, headings, borders, icons or decoration.

     THE LABEL IS WHITE HERE, and that is measured, not assumed. This palette
     inverts the reference site's rule, which had a navy label on a bright amber:
        #FFFFFF on #C2301A  =  5.63:1  AA    correct
        #12222C on #C2301A  =  2.89:1  FAIL  unreadable
     A dark label on this red is the single easiest way to break the button. The
     hover state is darker still (#A62817), so white only gets safer: 7.15:1.

     The hierarchy works because the two colours are far apart in hue and close
     in weight: links are blue and never red, the button is red and never blue,
     and nothing else on a page is allowed to be either.                       */

  --cta: #C2301A;   /* the red roofs of the old town. 5.24:1 on paper */
  --cta-hover: #A62817;
  --cta-ink: #FFFFFF;   /* white label. Never the ink navy - see above. */

  /* ---- Evidence -----------------------------------------------------------
     The badge on an offer ("Most booked", "Top rated") and the star beside a rating.
     They are not decoration and not a third accent: they say the catalogue has counted
     something. Amber because that is what a rating is everywhere, held to a tint pale
     enough that the roof red stays the only saturated thing on a card.
        #8A4B00 on #FBEBD2  =  5.80:1
     The star is a glyph next to a number set in ink, so it carries no meaning on its
     own and 3.82:1 against white is a decorative contrast, not a text one.          */

  --badge:     #FBEBD2;
  --badge-ink: #8A4B00;
  --star:      #B8730B;

  /* ---- Shape and depth --------------------------------------------------
     Rounded blocks and cards, per reference 1. Shadows stay very light: the
     separation comes from the border and the ground, not from drop shadow.  */

  /* ---- Charts ----------------------------------------------------------
     The pair is checked against the page ground: warm and cool are far enough
     apart to survive protanopia, both carry chroma above the paper, and both
     clear 3:1 against it. --chart-mute is the fill of the bars that are NOT
     highlighted: it has to lift off the track, or a row of five bars reads as
     four empty gutters and one full one. That was the mistake it fixes.      */
  --chart-warm: #C2301A;
  --chart-cool: #0F6C9E;
  --chart-mute: #93A0A7;
  --chart-track: #E1E7EB;

  --radius-card:    14px;
  --radius-control: 9px;
  --radius-pill:    999px;
  --shadow-card:    0 1px 2px rgba(25,23,19,.05),
                    0 8px 24px -12px rgba(25,23,19,.14);

  /* ---- Spacing scale ----------------------------------------------------
     4px base. Use these, never arbitrary values, or the alignment the owner
     liked in reference 1 quietly decays.                                    */

  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 24px;  --s6: 32px;  --s7: 48px;  --s8: 64px;  --s9: 96px;

  /* ---- Marks ------------------------------------------------------------
     The section mark: Hallgrimskirkja's spire and its cross, the same building the
     logo draws. It is a MASK, not a coloured picture, so it takes --accent (or any
     colour a rule paints behind it) and follows the palette by construction. Drawn
     on a 14x27 grid; article.css hangs it in the gutter beside every article h2. */
  --mark-spire: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 27'%3E%3Crect x='5.6' y='3' width='2.8' height='24' rx='1.4'/%3E%3Crect x='1.6' y='4.6' width='10.8' height='2.6' rx='1.3'/%3E%3Ccircle cx='7' cy='1.6' r='1.6'/%3E%3C/svg%3E");

  --gutter:         40px;    /* horizontal page padding, desktop */
  --gutter-sm:      20px;    /* horizontal page padding, mobile  */
  --width-wide:     1180px;  /* full-width sections, card grids  */
}

@media (max-width: 700px) {
  :root {
    --size-h1:   var(--size-h1-sm);
    --size-h2:   var(--size-h2-sm);
    --size-body: var(--size-body-sm);
    --gutter:    var(--gutter-sm);
  }
}

/* Respect reduced-motion everywhere; no exceptions in the renderer. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------- icon floor
   Not one <svg> on this site carries width or height attributes: all 5.040 of them
   are sized by CSS. An SVG with a viewBox and neither is 300x150 by CSS default,
   which is how a chevron came to fill a paragraph, a checkmark to dwarf its list
   item, and an arrow to make a CTA 300px wider than its own label. Three separate
   incidents, one cause.

   So this is the floor rather than three more patches. Specificity keeps it out of
   the way - every `.thing svg` rule in the stylesheets is 0,1,1 and beats this 0,0,1
   - and anything nobody remembered to size now lands at text size instead of
   catastrophic. */
svg{width:1em;height:1em;flex:none}

/* The same floor for bitmaps. An <img> with no rule renders at its intrinsic
   width - 1400px inside a 140px card column, in the case that prompted this -
   and bursts whatever contains it. Every specific rule still wins on
   specificity; this only catches what nobody remembered to size. */
img{max-width:100%}

/* The header is sticky and 66px tall, so a jump to #b6 put the top of that block
   underneath it. `scroll-margin-top` is the property for exactly this: it does not
   move the element, only where the browser stops when scrolling to it. 88px is the
   header plus enough air that the block reads as the thing you jumped to rather than
   as something wedged under a bar. */
[id]{scroll-margin-top:88px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.cta svg,.cta2 svg{width:1.05em;height:1.05em}
:root{
  --font-body:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --size-body:18.5px; --leading-body:1.65; --measure:720px;
  --paper:#FEFBF6; --paper-sunk:#F7F3EA; --card:#FFFFFF;
  --ink:#1A2737; --ink-soft:#5A6472; --ink-faint:#8A8F98;
  --rule:#E7E1D6; --rule-soft:#F0EBE1;
  --accent:#B25309; --accent-ink:#8A3F06; --teal:#15616D; --teal-bg:#EDF4F5;
  --cta:#F2A72A; --cta-hover:#E09612; --cta-ink:#1A2737;
  --radius-card:14px; --gutter:40px; --toc-w:236px; --toc-gap:48px;
  --container:calc(var(--measure) + var(--toc-gap) + var(--toc-w));
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);
     font-size:var(--size-body);line-height:var(--leading-body);-webkit-font-smoothing:antialiased}
/* NOT sticky: the site header sticks to top:0 too, and the demo chrome was
   parking on top of it, which made a working sticky header look broken. */
.demobar{background:#1A2737;color:#cdd6e2;padding:10px 20px;font-size:13px;display:flex;gap:16px;
         align-items:center;flex-wrap:wrap;justify-content:center;position:relative;z-index:99}
.demobar b{color:#fff}.demobar .grp{display:inline-flex;gap:5px;align-items:center}
.demobar button{background:#2b3b50;color:#cdd6e2;border:1px solid #3d4f68;border-radius:6px;
                padding:5px 11px;font:inherit;font-size:12.5px;cursor:pointer}
.demobar button[aria-pressed=true]{background:var(--cta);color:var(--cta-ink);border-color:var(--cta);font-weight:700}
.note-en{background:#fff8e8;border-left:3px solid var(--cta);padding:13px 16px;margin:0;
         font-size:13.5px;line-height:1.6;color:#5c4a22}
.note-en b{color:#3d3116}
.frame{margin:0 auto;transition:max-width .2s}
.wide{max-width:calc(var(--container) + var(--gutter)*2);margin:0 auto;padding-inline:var(--gutter)}

/* header */
/* transparent over the hero, solid once you scroll past it */
.site-header{position:sticky;top:0;z-index:50;background:transparent;border-bottom:1px solid transparent;
             transition:background .18s,border-color .18s}
.site-header.solid{background:var(--paper);border-bottom-color:var(--rule)}
.site-header:not(.solid) .brand b,.site-header:not(.solid) .hnav span{color:#fff;
             text-shadow:0 1px 10px rgba(10,16,24,.5)}
.site-header:not(.solid) .brand svg path{fill:#fff;stroke:#fff}
.site-header:not(.solid) .pill{color:#fff;border-color:rgba(255,255,255,.4);
             background:rgba(255,255,255,.12);backdrop-filter:blur(4px)}
.bar{max-width:calc(var(--container) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter);
     height:66px;display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
/* burger + drawer, so mobile keeps the navigation instead of losing it */
.burger{display:none;margin-left:auto;flex-direction:column;gap:4px;padding:9px 10px;
        border:1px solid var(--rule);border-radius:9px;background:var(--card);cursor:pointer}
.burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px}
.site-header:not(.solid) .burger{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);
        backdrop-filter:blur(4px)}
.site-header:not(.solid) .burger span{background:#fff}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;flex:none}
.brand svg{width:26px;height:26px;flex:none}.brand b{font-size:16px;letter-spacing:-.022em;white-space:nowrap}
/* Six German group labels on one line is a lot of width: "Touren und Erlebnisse"
   and "Anreise und vor Ort" alone are ~300px. They used to wrap to two lines, which
   fitted but looked broken; nowrap fixed the look and then overran the bar into the
   wordmark. So the bar is tightened AND the burger takes over earlier - the desktop
   nav is only shown at widths where it genuinely fits. */
.hnav{margin-left:auto;display:flex;gap:1px;font-size:13.5px;color:var(--ink-soft);
      flex:none}
.hnav span{padding:8px 10px;border-radius:8px;white-space:nowrap}
.hutil{display:flex;gap:6px;flex:none;margin-left:10px}
.pill{border:1px solid var(--rule);border-radius:999px;padding:5px 8px;font-size:12px;
      color:var(--ink-soft);white-space:nowrap}
@media(max-width:1150px){.hnav,.hutil{display:none}.burger{display:flex}}

/* ================= HERO =================
   Full-bleed, full first screen. A photograph being dark does not break the light
   palette - the palette governs UI surfaces, not pictures.

   The scrim is not a flat overlay. It is a bottom-weighted gradient, so the sky
   stays open and untouched while the text sits on genuinely dark ground. That is
   what lets the red CTA keep its contrast: on bare snow it would disappear. */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
      margin-top:-66px;isolation:isolate;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-2}
/* Between the photograph and the words: above the image and its gradient at -2,
   below .hero-in at 1. `.hero` already isolates and clips, so grains cannot
   escape the section. Never display:none - a hidden canvas measures 0x0 and
   every draw silently goes nowhere; sand.js decides instead, and it also
   honours reduced motion and the 900px breakpoint. The id is the kit's; the
   script falls as snow on this site. */
#sand{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-bg img{width:100%;height:100%;object-fit:cover;display:block}
/* The darkening between the photograph and the words. The owner set the value at the
   words on the stage 2 tuner: 0.65, no more - past that the photograph stops being the
   point. The stops above it are the least that keeps the transparent header readable
   over a bright sky (0.38 at the top) and the mid-frame from going muddy. */
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(20,29,41,.38) 0%, rgba(20,29,41,.12) 26%,
    rgba(20,29,41,.26) 52%, rgba(20,29,41,.50) 78%, rgba(20,29,41,.65) 100%)}
.hero-in{position:relative;z-index:1;width:100%;
         max-width:calc(var(--container) + var(--gutter)*2);margin:0 auto;
         padding:0 var(--gutter) 78px;color:#fff}
/* The hero is bottom-aligned with a fixed 78px pad, which reads correctly on a
   laptop and badly on a tall display: the text ends up pinned to the very bottom
   under a large empty area. On a big screen only, lift the block toward the middle.
   `clamp` keeps it sane - a proportional pad alone would push the text off a very
   tall window, and a fixed one would do nothing on a 1600px-high display.
   Gated on BOTH dimensions, so a short wide laptop is untouched. */
@media (min-width:1100px) and (min-height:760px){
  .hero-in{padding-bottom:clamp(140px, 24vh, 320px)}
}
.hero-t{max-width:60ch}
.eyebrow{display:inline-block;font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;
         color:#FBD98A;font-weight:700;margin:0 0 18px;
         border:1px solid rgba(251,217,138,.45);border-radius:999px;padding:6px 14px;
         backdrop-filter:blur(3px)}
.hero h1{font-size:clamp(40px,6.2vw,76px);font-weight:700;letter-spacing:-.035em;line-height:1.02;
         margin:0 0 20px;text-wrap:balance;color:#fff;
         text-shadow:0 2px 24px rgba(10,16,24,.45)}
.hero .lede{font-size:clamp(17px,1.55vw,22px);line-height:1.5;color:#E7EBF1;margin:0 0 30px;
            max-width:52ch;text-shadow:0 1px 12px rgba(10,16,24,.5)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.cta{display:inline-flex;align-items:center;justify-content:center;background:var(--cta);
     color:var(--cta-ink);border:0;border-radius:12px;padding:17px 30px;font:inherit;font-size:17.5px;
     font-weight:700;text-decoration:none;white-space:nowrap;transition:background .12s,transform .12s;
     box-shadow:0 8px 26px -8px rgba(242,167,42,.6)}
.cta:hover{background:var(--cta-hover);transform:translateY(-1px)}
.cta2{display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);
      color:#fff;border:1.5px solid rgba(255,255,255,.45);border-radius:12px;padding:16px 28px;
      font:inherit;font-size:17.5px;font-weight:700;text-decoration:none;white-space:nowrap;
      backdrop-filter:blur(6px)}
.cta2:hover{background:rgba(255,255,255,.2);border-color:#fff}
.hero-meta{display:flex;gap:10px;flex-wrap:wrap;font-size:14.5px;color:#B9C3D0;margin:26px 0 0}
.hero-meta i{font-style:normal;color:rgba(255,255,255,.3)}
/* The byline in the hero: same line as the homepage's independence claim, but it is
   the article's own evidence. White on a photograph, so it drops the article version's
   rule and ink colours. */
.byline.hero-meta{color:#C7CFDA;border-bottom:0;padding-bottom:0;margin:24px 0 0;
  font-size:14.5px;text-shadow:0 1px 8px rgba(10,16,24,.5)}
.byline.hero-meta svg{opacity:.9}
.byline.hero-meta i{color:rgba(255,255,255,.32)}
.byline.hero-meta .src2{color:#8FD3DC}
.hero-cred{position:absolute;right:var(--gutter);bottom:14px;z-index:1;
           font-size:11.5px;color:rgba(255,255,255,.5)}
.scroll{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:1;
        color:rgba(255,255,255,.65);animation:bob 2.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}
@media (prefers-reduced-motion:reduce){.scroll{animation:none}}

/* key figures */
.glance{background:var(--paper-sunk);border-block:1px solid var(--rule)}
.glance-in{max-width:calc(var(--container) + var(--gutter)*2);margin:0 auto;padding:26px var(--gutter);
           display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.glance b{display:block;font-size:27px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.glance span{display:block;font-size:14.5px;color:var(--ink-soft);margin-top:5px;line-height:1.35}

/* section cards */
.secs{padding:56px 0 20px}
.secs-in{max-width:calc(var(--container) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter)}
.secs-head{grid-column:1/-1;margin-bottom:6px}
.secs h2{font-size:30px;letter-spacing:-.025em;margin:0 0 8px;font-weight:700}
.secs-head p{font-size:17px;color:var(--ink-soft);margin:0;max-width:62ch}
.secs-in{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.sec{display:grid;grid-template-columns:150px 1fr;gap:0;background:var(--card);
     border:1px solid var(--rule);border-radius:var(--radius-card);overflow:hidden;
     text-decoration:none;color:inherit;transition:border-color .12s,box-shadow .12s,transform .12s}
.sec:hover{border-color:var(--ink-faint);box-shadow:0 10px 26px -14px rgba(26,39,55,.3);transform:translateY(-2px)}
.sec-img img{width:100%;height:100%;object-fit:cover;display:block}
/* A section with no usable photograph must not keep the 150px image column,
   or its text renders in a narrow strip beside an empty gap. */
.sec.noimg{grid-template-columns:1fr}
.sec-b{padding:16px 18px}
.sec-h{display:flex;align-items:baseline;gap:9px;margin-bottom:6px}
.sec-h h3{font-size:19px;margin:0;letter-spacing:-.018em}
.cnt{font-size:11.5px;color:var(--ink-faint);background:var(--paper-sunk);border-radius:999px;padding:2px 8px}
.sec-b p{font-size:15.5px;color:var(--ink-soft);margin:0 0 10px;line-height:1.45}
.sec-b ul{list-style:none;margin:0 0 11px;padding:0;display:flex;flex-wrap:wrap;gap:5px}
.sec-b li{font-size:13px;color:var(--ink-soft);background:var(--paper-sunk);
          border:1px solid var(--rule);border-radius:6px;padding:2px 8px}
.more{font-size:14.5px;font-weight:700;color:var(--accent)}

/* one featured product */
.pick{padding:44px 0}
.pick-in{max-width:calc(var(--container) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter)}
.pick h2{font-size:26px;letter-spacing:-.022em;margin:0 0 6px}
.pick .sub{font-size:16.5px;color:var(--ink-soft);margin:0 0 20px;max-width:70ch}
.pcard{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius-card);
       display:grid;grid-template-columns:210px 1fr 250px;gap:22px;padding:18px;align-items:center}
.pcard-i img{width:100%;height:auto;border-radius:10px;display:block;aspect-ratio:1/1;object-fit:cover}
.partner{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--ink-faint)}
.pcard-b h3{font-size:20px;margin:6px 0 7px;letter-spacing:-.018em;line-height:1.3}
.pcard-b p{font-size:16px;color:var(--ink-soft);margin:0 0 12px;line-height:1.5}
.trust{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:7px 14px}
.trust li{display:flex;gap:7px;align-items:flex-start;font-size:14.5px;color:var(--ink-soft);line-height:1.35}
.trust svg{width:15px;height:15px;flex:none;color:var(--teal);margin-top:2px}
.pcard-f{border-left:1px solid var(--rule-soft);padding-left:22px}
/* Scoped to the pick card. Unscoped, this reached every offer block in every
   article and added a 12px bottom margin and a 14.5px size those cards never asked
   for - article.css only overrides `white-space`, so the rest simply applied. */
.pcard-f .price{font-size:14.5px;color:var(--ink-soft);line-height:1.2;margin-bottom:12px}
.pcard-f .price b{display:block;font-size:28px;color:var(--ink);font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.pcard-f .cta{width:100%}

/* source logos */
.trustrow{background:var(--paper-sunk);border-top:1px solid var(--rule);padding:38px 0 46px}
.trustrow-in{max-width:calc(var(--container) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter)}
.trustrow h2{font-size:22px;letter-spacing:-.02em;margin:0 0 6px}
.trustrow p{font-size:16px;color:var(--ink-soft);margin:0 0 18px;max-width:70ch}
.logos{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
.logos img{width:34px;height:34px;border-radius:7px;background:#fff;padding:4px;object-fit:contain;
           box-shadow:0 0 0 1px rgba(26,39,55,.08);filter:grayscale(1);opacity:.6;
           transition:filter .12s,opacity .12s}
.logos img:hover{filter:none;opacity:1}
.trustrow .small{font-size:14px;color:var(--ink-faint);margin:0}
.trustrow a{color:var(--accent)}
/* ===================== article on the homepage ===================== */
.article{padding:56px 0 20px;border-top:1px solid var(--rule)}
.art-in{max-width:calc(var(--measure) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter)}
.kicker{font-size:13.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);
        font-weight:700;margin:0 0 12px}
.art-h{font-size:var(--size-h1);font-weight:700;letter-spacing:-.028em;line-height:1.15;margin:0 0 .5em;text-wrap:balance}
/* At the FOOT of the article now, so the rule sits above it rather than below. */
.byline{display:flex;flex-wrap:wrap;gap:7px 12px;align-items:center;font-size:15.5px;
        color:var(--ink-faint);padding-top:22px;border-top:1px solid var(--rule);margin:34px 0 0}
.byline svg{width:14px;height:14px;flex:none;opacity:.85;margin-right:-4px}
.byline i{font-style:normal;color:var(--rule)}
.byline .src2{color:var(--teal);font-weight:700;display:inline-flex;align-items:center;gap:6px}
.art-in p{margin:0 0 1.1em;font-size:var(--size-body);line-height:var(--leading-body)}
/* :not(.cta) matters: without it this rule painted every button's label orange
   and underlined it, because a CTA is an <a> inside the article too. */
.art-in a:not(.cta):not(.cta2){color:var(--accent);text-decoration:underline;text-underline-offset:2.5px}
.ph{color:var(--ink-faint);border-bottom:1px dotted var(--ink-faint);cursor:help}

.blk{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius-card);
     padding:22px 24px;margin:1.7em 0}
.blk>h3{font-size:var(--size-h3);font-weight:700;letter-spacing:-.015em;margin:0 0 4px;line-height:1.25}
.blk .intro{font-size:16px;color:var(--ink-soft);margin:0 0 16px}
.blk .foot{font-size:14.5px;color:var(--ink-soft);margin:16px 0 0;padding-top:13px;
           border-top:1px solid var(--rule-soft);line-height:1.5}
.facts{margin:0;display:grid}
.frow{display:flex;justify-content:space-between;gap:24px;padding:11px 0;border-bottom:1px solid var(--rule-soft)}
.frow:first-child{padding-top:0}.frow:last-child{border-bottom:0}
.frow dt{color:var(--ink-soft);font-size:16.5px;max-width:46%}
.frow dd{margin:0;text-align:right;font-weight:700;font-size:16.5px}
.aag{background:var(--paper-sunk);border:0;border-left:3px solid var(--teal);border-radius:0 14px 14px 0}

.tw{overflow-x:auto;margin:0 -24px;padding:0 24px}
table{width:100%;border-collapse:collapse;font-size:16px;min-width:560px}
th{text-align:left;font-size:12px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;
   color:var(--ink-faint);padding:0 14px 9px 0;border-bottom:1px solid var(--rule)}
td{padding:13px 14px 13px 0;border-bottom:1px solid var(--rule-soft);color:var(--ink-soft);vertical-align:top}
td:first-child{color:var(--ink);font-weight:700}
tr:last-child td{border-bottom:0}
.stack{display:none}
.srow{padding:14px 0;border-bottom:1px solid var(--rule-soft)}
.srow:last-child{border-bottom:0}
.srow b{display:block;font-size:16.5px;margin-bottom:7px}
.srow dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-size:15px}
.srow dt{color:var(--ink-faint);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;padding-top:3px}
.srow dd{margin:0;color:var(--ink-soft);line-height:1.45}

.myth{display:grid;margin:0;padding:0}
.myth>li{list-style:none;padding:16px 0;border-bottom:1px solid var(--rule-soft);
         display:grid;grid-template-columns:auto 1fr;gap:14px}
.myth>li:first-child{padding-top:0}.myth>li:last-child{border-bottom:0;padding-bottom:0}
.vd{display:inline-flex;align-items:center;justify-content:center;gap:5px;border-radius:999px;
    padding:4px 10px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    white-space:nowrap;align-self:start;width:108px}
.vd svg{width:14px;height:14px}
.vd.stimmt{background:var(--teal-bg);color:var(--teal)}
.vd.teilweise{background:transparent;color:var(--ink-soft);border:1.5px solid var(--rule)}
.vd.falsch{background:var(--ink);color:#fff}
.myth .claim{font-weight:700;margin:0 0 5px!important;line-height:1.4}
.myth .exp{margin:0!important;color:var(--ink-soft);font-size:16.5px;line-height:1.5}

/* Figures break out of the prose measure to the same width as the comparison block,
   so photographs, pairs and galleries all line up on one edge instead of each finding
   their own. Same mechanism: `.art-in` is page-centred, so 50% of it is the page
   centre, and a -50% translate re-centres the wider element without 100vw and the
   scrollbar overflow that comes with it. Captions stay at the measure - they are
   prose and a 1180px line is unreadable. */
.fig{margin:1.9em 0}
@media(min-width:1280px){
  .fig{width:var(--width-wide);margin-left:50%;transform:translateX(-50%)}
  .fig figcaption,.fig .galtitle{max-width:var(--measure);margin-left:auto;margin-right:auto}
}
.fig img{width:100%;height:auto;display:block;border-radius:var(--radius-card)}
.fig figcaption{font-size:16px;color:var(--ink-soft);margin-top:10px;line-height:1.5}

/* Caption as a panel on the picture, bottom right.

   `.fig > .pic` is a direct child only on a single-image block: an image-pair nests
   its pictures in `.pair` and a gallery in `.gal > div`, and both of those caption
   each tile separately. So this selector reaches the 254 single images and nothing
   else, without needing a new class in the markup.

   The panel carries its own contrast rather than trusting the photograph underneath.
   A caption over the King's Chamber and one over a noon sky cannot both rely on a
   text shadow, and these captions carry real information - "Woran man die amtliche
   Seite erkennt: ..." is the point of its picture, not a label for it. Backdrop blur
   is an enhancement; the 74% ground alone already clears contrast on any image.

   The credit moves to the left on these figures, because it used to sit exactly
   where the panel now is. */
.fig{position:relative}
.fig > .pic + figcaption{
  position:absolute;right:14px;bottom:14px;left:auto;margin:0;
  max-width:min(46ch,calc(100% - 28px));
  padding:11px 14px;border-radius:10px;
  background:rgba(14,19,26,.74);
  -webkit-backdrop-filter:blur(7px) saturate(1.15);
  backdrop-filter:blur(7px) saturate(1.15);
  color:#F4F6F8;font-size:14.5px;line-height:1.45;text-wrap:pretty;
  box-shadow:0 8px 24px -10px rgba(0,0,0,.55)}
.fig > .pic .credit{left:10px;right:auto}

.stand{margin:2.4em 0 0;padding:16px 20px;background:var(--paper-sunk);border:1px solid var(--rule);
       border-radius:var(--radius-card);display:flex;gap:13px;align-items:flex-start}
.stand svg{width:19px;height:19px;flex:none;color:var(--teal);margin-top:2px}
.stand div{font-size:16px;line-height:1.5;color:var(--ink-soft)}
.stand b{color:var(--ink);display:block;margin-bottom:2px}

.offer{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius-card);
       padding:18px;margin:1.9em 0;display:grid;grid-template-columns:140px 1fr;gap:20px}
.offer.noimg{grid-template-columns:1fr}
/* Shape only, through the component's own variable. This used to restate width,
   height, object-fit and aspect-ratio, which merely duplicated carousel.css, and
   a border-radius that carousel.css does NOT override - so every slide was
   rounded inside an already-rounded frame. */
.offer .top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.offer h3{font-size:19.5px;margin:6px 0 0;letter-spacing:-.018em;line-height:1.3}
.rate{display:inline-flex;align-items:center;gap:6px;font-size:15px;white-space:nowrap}
.rate b{color:#B4740A;font-weight:700}
/* was `.rate s` - the strikethrough element, chosen by accident and then hidden
   with text-decoration:none. `i` carries no such meaning and needs no undoing. */
.rate i{color:var(--ink-faint);font-style:normal;font-size:14px}
.bene{list-style:none;margin:13px 0 0;padding:0;display:grid;gap:8px}
.bene li{display:flex;gap:9px;font-size:16px;line-height:1.45;color:var(--ink-soft)}
.bene svg{width:16px;height:16px;flex:none;color:var(--teal);margin-top:3px}
/* `1fr auto` gave the button its max-content width, and `.cta` is white-space:nowrap,
   so a long German label - 201 of the 311 on this site run past 34 characters - took
   the whole row and squeezed the price hint into one word per line.
   `fit-content(58%)` caps the button's share so it wraps to two lines instead of
   starving the text beside it, and the label is allowed to wrap at all. */
.buy{display:grid;grid-template-columns:minmax(0,1fr) fit-content(58%);align-items:center;
     gap:16px;margin-top:16px;padding-top:15px;border-top:1px solid var(--rule-soft)}
.buy .cta{white-space:normal;text-align:center;line-height:1.25}
/* The amount and its symbol are one token. Without nowrap a narrow column breaks
   "114 €" across two lines, which reads as a different number. */
.price{white-space:nowrap}
.price b{white-space:nowrap;display:block}
.price.sm{font-size:15px;white-space:normal}
/* The live price line: „ab" and any unit small and grey, the amount carries the weight.
   Owner-approved treatment, 2026-09-02 („plain, but ab smaller and gray"). */
.price.sm .ab{font-size:.78em;color:var(--ink-faint);font-weight:400}
.price.sm b{display:inline;color:var(--accent);font-size:1.16em;font-weight:800;
 letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.cta.sm{padding:11px 18px;font-size:15.5px;border-radius:10px;box-shadow:none;white-space:nowrap}

.compact{background:var(--paper-sunk);border:1px solid var(--rule);border-radius:var(--radius-card);
         padding:14px;margin:1.8em 0;display:grid;
         grid-template-columns:82px minmax(0,1fr) fit-content(46%);gap:16px;align-items:center}
.compact img{width:82px;height:82px;object-fit:cover;border-radius:9px;display:block}
/* Only GetYourGuide products come with photography. The other partners get the
   same card without the thumbnail column, not an empty 82px gutter. */
.compact.noimg{grid-template-columns:minmax(0,1fr) fit-content(46%)}
.compact h4{font-size:17px;margin:4px 0 3px;letter-spacing:-.015em;line-height:1.3}
.compact p{font-size:15.5px!important;color:var(--ink-soft);margin:0!important;line-height:1.45}
.compact .side{display:flex;align-items:center;gap:13px;min-width:0}
.compact .side .cta{white-space:normal;text-align:center;line-height:1.25}

.cmp{margin:1.9em 0}
.cmp>p{font-size:16.5px;color:var(--ink-soft)}
/* The comparison block breaks out of the prose measure.

   13 of the 18 of these carry three options and the grid was hard-coded to two
   columns, so they rendered 2 + 1 with an orphan on its own row - the worst possible
   shape for the block whose whole job is putting choices side by side. 660px of
   measure cannot hold three cards, so the block leaves the measure instead.

   `.art-in` is centred on the page, so 50% of it IS the page centre: margin-left:50%
   with a -50% translate re-centres the wider block without needing 100vw, which would
   have added a scrollbar's width of horizontal overflow on any platform that still
   draws a classic one. The intro paragraph keeps the measure - it is prose. */
.cmp .grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:760px){
  /* two options fit inside the measure; three do not */
  .cmp .grid:not(:has(>:nth-child(3))){grid-template-columns:1fr 1fr}
}
@media(min-width:1280px){
  .cmp{width:var(--width-wide);margin-left:50%;transform:translateX(-50%)}
  .cmp>p{max-width:var(--measure);margin-inline:auto}
  .cmp .grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
}
.opt{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius-card);
     overflow:hidden;display:flex;flex-direction:column}
.opt.best{border-color:var(--cta);box-shadow:0 0 0 3px rgba(242,167,42,.16)}
.optwrap{position:relative}
.opt img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block}
/* The recommended option keeps the solid amber badge. The others get a quiet
   dark one: still a distinct claim, but it does not compete with the pick. */
.badge{display:inline-flex;align-items:center;gap:5px}
.badge svg{width:13px;height:13px;flex:none}
.badge.alt{background:rgba(16,22,30,.78);color:#fff;backdrop-filter:blur(4px)}
/* The flame keeps its own colour on the amber badge, where currentColor would
   make it disappear into the background. */
.badge:not(.alt) svg{color:#D2500F}
.badge{position:absolute;top:10px;left:10px;background:var(--cta);color:var(--cta-ink);font-size:11px;
       font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:999px}
/* Same badge on a card with no image to sit on: it flows instead of floating. */
.optbadge{padding:15px 17px 0}
.optbadge .badge{position:static;display:inline-block}
.opt .in{padding:15px 17px 17px;display:flex;flex-direction:column;flex:1}
.opt h4{font-size:17.5px;margin:0 0 10px;letter-spacing:-.015em;line-height:1.3}
.opt dl{margin:0 0 14px;display:grid;gap:7px;font-size:15px}
.opt dt{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);font-weight:700}
.opt dd{margin:0;color:var(--ink-soft);line-height:1.42}
/* Grid, not wrapping flex. `justify-content:space-between` with flex-wrap:wrap put
   the button on its own line the moment the price hint got long - "deutlich darüber,
   dafür ohne zweiten Anfahrtstag" wrapped and the CTA dropped below it, left-aligned,
   while the shorter cards beside it kept theirs on the right. Two columns: the hint
   takes what is left and wraps inside its own cell, the button is always the right
   column. */
.opt .foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--rule-soft);
           display:grid;grid-template-columns:minmax(0,1fr) fit-content(56%);
           align-items:center;gap:12px}

/* ---------------------------------------------------------------- FAQ
   The `faq` renderer has emitted <details>/<summary> with an inline chevron since
   chapter 2 and NOTHING styled it. An <svg> with a viewBox and no width or height
   has no intrinsic size, so it filled the paragraph box - a chevron several hundred
   pixels tall under every question - and <summary> still showed the browser's own
   disclosure triangle beside our own. 904 question pairs across the site. */
.faq{margin:2.6em 0 0}
.faq h2{font-size:var(--size-h2);letter-spacing:-.022em;margin:0 0 14px}
.faq details{border-top:1px solid var(--rule)}
.faq details:last-of-type{border-bottom:1px solid var(--rule)}
.faq summary{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:15px 2px;cursor:pointer;font-weight:700;font-size:17px;line-height:1.4;
  list-style:none;color:var(--ink)}
/* Two rules, NOT one comma group. A selector list is discarded whole if any part of
   it is unknown to the browser, so grouping these would have dropped ::marker in
   every engine that does not know ::-webkit-details-marker. Both are needed:
   ::marker for Firefox and Chrome, the -webkit- pseudo for Safari, which still
   ignores list-style on a summary. */
.faq summary::marker{display:none;content:""}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary span{flex:1}
.faq .chev{width:19px;height:19px;flex:none;margin-top:3px;color:var(--ink-faint);
  transition:transform .18s ease}
.faq details[open] .chev{transform:rotate(180deg)}
.faq .a{margin:0 0 17px;padding-right:36px;font-size:16.5px;line-height:1.6;
  color:var(--ink-soft)}

/* ============================================================================
   BLOCKS THAT SHIPPED WITH NO CSS AT ALL

   48 classes emitted by render.py matched no rule in any stylesheet. The FAQ was
   the first one anybody noticed; the checklist on /ganzer-tag-route/ was the
   second. The failure is always the same and always ugly: an inline <svg> carries
   a viewBox and no width or height, which gives it no intrinsic size, so it
   expands to fill whatever box it lands in - a checkmark several hundred pixels
   tall next to one line of text.

   Every icon below is therefore given an explicit size. That is the rule to keep.
   ============================================================================ */

/* tip-box. Renamed from `.tip`, which belongs to the hotspot tooltip and is
   display:none until its script runs - so every tip-box was invisible. */
.tipbox{display:flex;gap:13px;align-items:flex-start;margin:1.8em 0;padding:16px 18px;
  border-radius:var(--radius-card);border:1px solid var(--rule)}
.tipbox>svg{width:20px;height:20px;flex:none;margin-top:2px}
.tipbox h4{font-size:16px;margin:0 0 3px;letter-spacing:-.01em}
.tipbox p{margin:0!important;font-size:16px;line-height:1.5;color:var(--ink-soft)}
.tipbox.tipp{background:var(--teal-bg);border-color:transparent}
.tipbox.tipp>svg{color:var(--teal)}
.tipbox.achtung{background:#FDF4EC;border-color:#F0DCC6}
.tipbox.achtung>svg{color:#B25309}
.tipbox.gut-zu-wissen{background:var(--paper-sunk)}
.tipbox.gut-zu-wissen>svg{color:var(--ink-faint)}

/* checklist */
.chk{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.chk li{display:flex;gap:10px;font-size:16.5px;line-height:1.5;color:var(--ink-soft)}
.chk svg{width:16px;height:16px;flex:none;color:var(--teal);margin-top:4px}

/* step-list */
.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:15px}
.steps li{counter-increment:s;display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start}
.steps li::before{content:counter(s);width:25px;height:25px;border-radius:50%;flex:none;
  background:var(--teal-bg);color:var(--teal);font-size:13px;font-weight:700;
  display:grid;place-items:center}
.steps b{display:block;font-size:16.5px;margin-bottom:2px}
.steps p{margin:0!important;font-size:16px;line-height:1.5;color:var(--ink-soft)}

/* pros-cons */
.pc{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pc h4{display:flex;align-items:center;gap:7px;font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;margin:0 0 10px}
.pc .yes h4{color:var(--teal)}
.pc .no h4{color:var(--ink-faint)}
.pc svg{width:15px;height:15px;flex:none}
.pc ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pc li{position:relative;padding-left:15px;font-size:16px;line-height:1.45;color:var(--ink-soft)}
.pc li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;
  border-radius:50%;background:var(--rule)}

/* comparison-cards */
/* Same breakout as the offer comparison. 19 of the 23 of these carry three cards,
   and 720px of prose measure fits two - so they rendered 2 + 1 with an orphan, which
   is the wrong shape for a block whose whole job is showing options side by side.
   `.art-in` is page-centred, so 50% of it is the page centre and a -50% translate
   re-centres the wider block without 100vw. The heading keeps the measure. */
.ccwrap{margin:1.9em 0}
@media(min-width:1280px){
  .ccwrap{width:var(--width-wide);margin-left:50%;transform:translateX(-50%)}
  .ccwrap>h3{max-width:var(--measure);margin-left:auto;margin-right:auto}
}
.ccwrap>h3{font-size:var(--size-h3);font-weight:700;letter-spacing:-.015em;margin:0 0 14px}
.cc{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:16px}
.cc>div{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius-card);
  padding:17px 18px}
.cc h4{font-size:17.5px;margin:0 0 6px;letter-spacing:-.015em;line-height:1.3}
.cc .sum{font-size:15.5px;color:var(--ink-soft);margin:0 0 14px!important;line-height:1.45}
.cc dl{margin:0;display:grid;gap:11px}
.cc dt{display:flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;font-weight:700;margin-bottom:3px}
.cc .yes dt{color:var(--teal)}
.cc .no dt{color:var(--ink-faint)}
.cc svg{width:14px;height:14px;flex:none}
.cc dd{margin:0;font-size:15.5px;line-height:1.45;color:var(--ink-soft)}

/* hypothesis-cards */
.hypwrap{margin:1.9em 0}
.hypwrap>h3{font-size:var(--size-h3);font-weight:700;letter-spacing:-.015em;margin:0 0 14px}
.hyp{display:grid;gap:16px}
.hyp>div{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius-card);padding:18px}
.hyp h4{font-size:17.5px;margin:0 0 7px;letter-spacing:-.015em;line-height:1.3}
.hyp .idea{font-size:16px;color:var(--ink-soft);margin:0 0 14px!important;line-height:1.5}
.fa{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding-top:14px;
  border-top:1px solid var(--rule-soft)}
.fa h5{display:flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;margin:0 0 6px}
.fa .pro h5{color:var(--teal)}
.fa .con h5{color:var(--ink-faint)}
.fa svg{width:14px;height:14px;flex:none}
.fa p{margin:0!important;font-size:15.5px;line-height:1.45;color:var(--ink-soft)}

/* timeline */
.tl{list-style:none;margin:0;padding:0 0 0 19px;display:grid;gap:16px;
  border-left:2px solid var(--rule)}
.tl li{position:relative}
.tl li::before{content:"";position:absolute;left:-25px;top:6px;width:9px;height:9px;
  border-radius:50%;background:var(--teal);box-shadow:0 0 0 3px var(--paper)}
.tl b{display:block;font-size:13px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent);margin-bottom:3px}
.tl p{margin:0!important;font-size:16px;line-height:1.5;color:var(--ink-soft)}

/* map-static and infographic share a shape: a graphic beside its legend */
.map,.info{display:grid;grid-template-columns:1.15fr 1fr;gap:22px;margin:1.9em 0;
  background:var(--card);border:1px solid var(--rule);border-radius:var(--radius-card);padding:18px}
.map h4,.info h4{font-size:17.5px;margin:0 0 10px;letter-spacing:-.015em}
.mapimg{min-width:0}   /* grid child: without this a wide graphic refuses to shrink */
.maplg ol{margin:0;padding-left:19px;display:grid;gap:8px}
.maplg li{font-size:15.5px;color:var(--ink-soft);line-height:1.4}
.maplg b{color:var(--ink);display:block}
.maplg span{display:block}
.infolg ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.infolg li{font-size:13.5px;color:var(--ink-soft);background:var(--paper-sunk);
  border-radius:999px;padding:4px 11px}
.map.noimg{grid-template-columns:1fr}

/* quote-source */
.quote{margin:2em 0;padding:2px 0 2px 20px;border-left:3px solid var(--teal)}
.quote blockquote{margin:0;font-size:19px;line-height:1.5;letter-spacing:-.012em}
.quote cite{display:block;margin-top:11px;font-style:normal;font-size:15px;color:var(--ink-soft)}
.quote .note{margin:8px 0 0!important;font-size:14.5px;color:var(--ink-faint);line-height:1.5}

/* image-pair and gallery */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pair img{border-radius:var(--radius-card)}
.galtitle{font-size:13px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;
  color:var(--ink-faint);margin:0 0 12px!important}
/* 280 not 220: at the figure's new 1180px the smaller floor produced five thin
   columns out of a six-image gallery. */
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.gal img{border-radius:var(--radius-card)}
.gal figcaption{font-size:14.5px;color:var(--ink-soft);margin-top:7px;line-height:1.45}

/* chart: bars, and the one chart that renders as a table */
/* The chart owns `c`-prefixed names because two of the obvious ones were already
   taken by other components, and both collisions landed on this one block:

     .bar   home.css - the site header bar. Every chart row inherited max-width
            1084px, margin:0 auto, 40px of padding and height:66px, so the rows were
            centred, fixed-height and far narrower than the block.
     .val   hotspot.css - a value label pinned onto a graphic, `position:absolute`.
            Every chart number was taken out of flow and dropped on top of its own
            label, which is the floating chip in the middle of the wreckage.

   Neither was overridden, because both stylesheets declare properties this one never
   mentions - a later rule only wins the properties it actually sets. */
.bars{display:grid;gap:9px;margin:4px 0 2px}
.cbar{display:grid;grid-template-columns:minmax(78px,auto) 1fr auto;gap:11px;align-items:center}
.cbar .clab{font-size:14.5px;color:var(--ink-soft)}
.cbar .ctrack{height:9px;border-radius:999px;background:var(--paper-sunk);overflow:hidden}
.cbar .cfill{display:block;height:100%;border-radius:999px;background:var(--teal)}
.cbar .cval{font-size:14.5px;font-weight:700;font-variant-numeric:tabular-nums}
.ctab{min-width:0}
.take{margin:15px 0 0!important;font-size:15.5px;line-height:1.5;color:var(--ink)}

/* size-comparison: columns whose height carries the meaning */
.sizes{display:flex;align-items:flex-end;gap:12px;min-height:210px;margin:6px 0 2px}
.sz{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  height:210px;text-align:center}
.sz .m{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;margin-bottom:5px}
.sz .col{display:block;width:100%;max-width:62px;border-radius:5px 5px 0 0;
  background:var(--rule);min-height:3px}
.sz.subj .col{background:var(--teal)}
.sz.subj .m{color:var(--teal)}
.sz .n{font-size:12.5px;color:var(--ink-soft);margin-top:7px;line-height:1.3}

/* calculator */
.calc{display:grid;gap:13px}
.calc>div{display:grid;gap:5px}
.calc label{font-size:13px;font-weight:700;color:var(--ink-soft)}
.calc input,.calc select{font:inherit;font-size:16px;padding:10px 12px;
  border:1px solid var(--rule);border-radius:var(--radius-control);background:var(--paper);color:var(--ink)}
.calc .out{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  margin-top:4px;padding-top:14px;border-top:1px solid var(--rule-soft)}
.calc .out .lab{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-faint)}
.calc .out .big{font-size:27px;font-weight:700;letter-spacing:-.02em}

/* quiz */
.qz{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.qz .q{display:flex;gap:10px;align-items:baseline;font-weight:700;font-size:16.5px;
  margin:0 0 10px!important;line-height:1.4}
.qz .q i{font-style:normal;color:var(--accent);font-variant-numeric:tabular-nums}
.opts{display:grid;gap:7px}
.opts button{display:flex;align-items:center;gap:9px;text-align:left;font:inherit;font-size:16px;
  padding:11px 13px;border:1px solid var(--rule);border-radius:var(--radius-control);
  background:var(--card);color:var(--ink);cursor:pointer}
.opts button:hover{border-color:var(--ink-faint)}
.opts .mk{display:inline-flex;width:17px;height:17px;flex:none;opacity:0;color:var(--teal)}
.opts .mk svg{width:17px;height:17px}
.opts button[data-right] .mk{opacity:1}
.qz .exp{margin:10px 0 0!important;font-size:15.5px;line-height:1.5;color:var(--ink-soft)}

/* benefit-box */
.benefit{background:var(--paper-sunk);border:1px solid var(--rule);border-radius:var(--radius-card);
  padding:18px;margin:1.9em 0}
.benefit h4{font-size:18px;margin:5px 0 11px;letter-spacing:-.015em;line-height:1.3}
.benefit ul{list-style:none;margin:0 0 15px;padding:0;display:grid;gap:7px}
.benefit li{position:relative;padding-left:15px;font-size:16px;line-height:1.45;color:var(--ink-soft)}
.benefit li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;
  border-radius:50%;background:var(--teal)}

/* ---- offer-comparison: facets to scan, not a paragraph to read ---- */
.opt .ometa,.opt .ofit{display:flex;gap:8px;align-items:flex-start;margin:0 0 12px!important;
  font-size:15px;line-height:1.4;color:var(--ink-soft)}
.opt .ometa svg,.opt .ofit svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--ink-faint)}
.opt .ometa{font-weight:700;color:var(--ink)}
/* No margin-top:auto here - `.opt .foot` already claims the free space to stay
   pinned at the card's bottom, and two auto margins split it between them. */
.opt .ofit{padding-top:2px}
.facets{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:7px}
.facets li{display:flex;gap:9px;align-items:flex-start;font-size:15px;line-height:1.38}
.facets svg{width:15px;height:15px;flex:none;margin-top:3px}
/* Three states, three weights: what you get reads strongest, what costs extra sits
   between, what you do not get recedes without being hidden. */
.f-included{color:var(--ink)}
.f-included svg{color:var(--teal)}
.f-add_on{color:var(--ink-soft)}
.f-add_on svg{color:var(--cta-hover,#B25309)}
.f-excluded{color:var(--ink-faint)}
.f-excluded svg{color:var(--rule)}
/* A named property's own amenities: each line has its own icon, so the eye can
   tell a pool from a rooftop restaurant without reading. */
.f-feature{color:var(--ink)}
.f-feature svg{color:var(--teal)}
.oinc{font-size:15px;line-height:1.45;color:var(--ink-soft);margin:0 0 14px!important}

/* Partner map. Breaks out like the other comparison blocks - a map squeezed into
   the prose measure is a map you cannot read. */
.embed{margin:1.9em 0;border-radius:var(--radius-card);overflow:hidden;
  border:1px solid var(--rule);background:var(--paper-sunk)}
.embed iframe{display:block;width:100%}
@media(min-width:1280px){
  .embed{width:var(--width-wide);margin-left:50%;transform:translateX(-50%)}
}

/* Article subheadings.
   The prose blocks were always the sections; these finally name them. One step above the
   h3 that block titles use, so the article's own sections outrank the boxes sitting inside
   them - the hierarchy a screen reader and Google both walk.

   The mark is the church spire and its cross, hung in the margin (owner's pick, 2026-09-07,
   from six on the stage 2 tuner page). Three things make it behave rather than merely look
   right:

   1. It hangs OUTSIDE the text column, in the gutter `.art-in` already reserves, so nothing
      interrupts the line the words start on and a heading that wraps to three lines is not
      pushed around by it. 30px left of the text edge inside a 40px gutter.
   2. It is drawn as a mask over `background:var(--accent)`, not as a coloured SVG, so it
      follows the palette. One token changes it everywhere.
   3. On a phone there is no gutter to hang in - 20px, and the mark would collide with the
      screen edge - so it stops being absolute and sits above the heading instead, which is
      the same mark doing the same job in the space that exists. */
.art-in h2.ah{
  font-size:var(--size-h2);font-weight:var(--weight-head);letter-spacing:-.022em;
  line-height:1.22;color:var(--ink);margin:2.15em 0 .5em;padding:0;border:0;
  background:none;text-wrap:balance;position:relative}
.art-in h2.ah::before{
  content:"";position:absolute;left:-30px;top:.2em;width:14px;height:27px;
  background:var(--accent);
  -webkit-mask:var(--mark-spire) center/14px 27px no-repeat;
  mask:var(--mark-spire) center/14px 27px no-repeat}
.art-in h2.ah:first-child{margin-top:1.1em}

/* ------------------------------------------------------------------ Tourverzeichnis
   Zwei Bloecke: `tour-list` (Angebote einer Kategorie oder eines Ortes) und
   `place-facts` (die belegten Kennzahlen eines Ortes). Die Faktentabelle borgt sich
   .tw/.stack/.srow von `table` und braucht deshalb nur zwei eigene Regeln; die
   Tourliste ist eine Zeile statt einer Karte, weil vierzig Angebote nebeneinander
   nicht vergleichbar sind und untereinander schon. */
.trl{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.trl-i{display:grid;grid-template-columns:152px 1fr auto;gap:16px;align-items:start;
  background:var(--paper);border:1px solid var(--rule);border-radius:14px;padding:12px}
.trl-pic{display:block;border-radius:10px;overflow:hidden;line-height:0}
.trl-pic img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block}
.trl-b{min-width:0}
.trl-b h4{font-size:17px;margin:0 0 6px;letter-spacing:-.015em;line-height:1.32}
/* Der Kartentitel ist ein Link und darf trotzdem nicht wie einer aussehen: acht
   unterstrichene Zeilen in Rost wuerden die Liste in ein Linkverzeichnis verwandeln
   und mit dem Knopf um dieselbe Aufmerksamkeit streiten. Die Ausnahmen im Selektor
   spiegeln die Artikelregel, weil sie sonst spezifischer bleibt als diese hier. */
.art-in .trl-b h4 a:not(.cta):not(.cta2){color:var(--ink);text-decoration:none}
.art-in .trl-b h4 a:not(.cta):not(.cta2):hover{text-decoration:underline;
  text-underline-offset:2.5px;text-decoration-color:var(--rule)}
.trl-m{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 6px;font-size:14.5px;
  color:var(--ink-faint)}
.trl-m span+span::before{content:"·";margin-right:14px;color:var(--rule)}
.trl-r{margin:0 0 9px;display:flex;align-items:baseline;gap:7px;font-size:15px}
/* Die Note traegt einen Stern als Zeichen, nicht als Bild: eine Reihe von fuenf
   Sternen behauptet eine Genauigkeit, die eine Kommazahl schon hat. */
.trl-r b{color:var(--ink);font-weight:800}
.trl-r b::before{content:"\2605";color:var(--cta);margin-right:5px;font-weight:400}
.trl-r em{font-style:normal;color:var(--ink-faint);font-size:14px}
/* Unter der Qualitaetsschwelle des Projekts: nicht versteckt, aber auch nicht
   hervorgehoben. Die Zahl steht da, damit der Leser sie einordnen kann. */
.trl-r.thin b,.trl-r.thin em{color:var(--ink-faint);font-weight:600}
.trl-r.thin b::before{color:var(--rule)}
.trl-f{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px;
  font-size:14px;color:var(--ink-soft)}
.trl-f li{display:flex;align-items:center;gap:5px}
.trl-f svg{width:13px;height:13px;flex:none;color:var(--teal)}
.trl-p{display:flex;flex-direction:column;align-items:flex-end;gap:9px;padding-left:4px}
.trl-p .price.sm{text-align:right}
.tlist .foot{line-height:1.5}

/* Die Anmerkung einer Faktenzeile steht unter dem Wert, nicht daneben: sie erklaert
   ihn haeufig ("400 bis 1.500 EGP kursieren") und gehoert damit in dieselbe Zelle. */
.pfn{display:block;font-size:14px;color:var(--ink-faint);line-height:1.45;margin-top:3px}
.pf .pfq{font-size:14.5px;white-space:normal}
.pf td:first-child{white-space:normal}

/* Der Reiseverlauf als Leiste. Die Linie liegt hinter den Punkten und endet am
   letzten Punkt, nicht am Rand des Kastens: sonst zeigt der Tag ins Nichts weiter.
   Start und Rueckkehr sind gefuellte Punkte, die Halte dazwischen offene - die
   Unterscheidung traegt Bedeutung und ist nicht nur Zierde. */
.stpl{list-style:none;margin:0;padding:0;position:relative}
.stpl::before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:2px;
  background:var(--rule);border-radius:2px}
.stp{position:relative;padding:0 0 22px 34px}
.stp:last-child{padding-bottom:0}
.stp::before{content:"";position:absolute;left:0;top:6px;width:16px;height:16px;
  border-radius:50%;background:var(--paper);border:2.5px solid rgb(var(--accent-rgb));
  box-sizing:border-box}
.stp.end::before{background:rgb(var(--accent-rgb))}
.stp-b h4{font-size:18px;margin:0 0 3px;letter-spacing:-.012em;line-height:1.25}
.art-in .stp-b h4 a{color:var(--ink);text-decoration:none;
  border-bottom:1px solid rgba(var(--accent-rgb),.35)}
.art-in .stp-b h4 a:hover{border-bottom-color:rgb(var(--accent-rgb))}
.stp-x{margin:0;color:var(--ink-soft);font-size:16px;line-height:1.5}
.stp-f{list-style:none;margin:9px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.stp-f li{background:var(--paper-sunk);border-radius:8px;padding:6px 11px;font-size:13.5px;
  color:var(--ink-soft);line-height:1.35;display:flex;align-items:baseline;gap:7px;
  flex-wrap:wrap;max-width:100%}
.stp-f b{color:var(--ink-faint);font-weight:700;font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;white-space:nowrap}
.stp-v{color:var(--ink);font-weight:600}
.stp-q{font-size:11.5px;color:var(--ink-faint);flex-basis:100%}
.art-in .stp-q a{color:var(--ink-faint);text-decoration:none;border-bottom:1px dotted var(--rule)}

/* ------------------------------------------------------- Tourseiten, zweiter Teil
   Bildstrecke, zwei Diagrammformen, Vergleichstabelle, Datenblatt, Quellenapparat. */

/* Die Bildstrecke laeuft ueber die volle Textbreite. carousel.js findet jedes .mc
   und baut Pfeile und Punkte; hier steht nur das Seitenverhaeltnis. */
.tgal{margin:1.9em 0}
.mc-wide{--ar:16/10;border-radius:var(--radius-card);overflow:hidden;
  border:1px solid var(--rule)}
.gcap{font-size:15px;color:var(--ink-faint);margin:9px 0 0;line-height:1.45}

/* Balken. Eine Reihe, ein Farbton; der hervorgehobene Eintrag ist das Subjekt der
   Seite und nicht der groesste Wert - die Farbe folgt der Identitaet, nicht dem Rang. */
.chart .cbars{display:grid;gap:9px;margin:4px 0 2px}
.cb{display:grid;grid-template-columns:minmax(120px,34%) 1fr auto;gap:12px;align-items:center;
  font-size:14.5px}
.cbl{color:var(--ink-soft);line-height:1.35}
.cbt{height:14px;background:var(--chart-track);border-radius:7px;overflow:hidden}
.cbf{display:block;height:100%;background:var(--chart-mute);border-radius:7px}
.cb.on .cbf{background:var(--chart-warm)}
.cb.on .cbl,.cb.on .cbv{color:var(--ink);font-weight:700}
.cbv{font-variant-numeric:tabular-nums;color:var(--ink-soft);white-space:nowrap;min-width:62px;
  text-align:right}

/* Linien. Zwei Reihen ueber zwoelf Monate, eine Achse, Punkte nur an den Extremwerten. */
.clegend{display:flex;flex-wrap:wrap;gap:16px;margin:2px 0 10px;font-size:14px;
  color:var(--ink-soft)}
.clg{display:inline-flex;align-items:center;gap:7px}
.clg i{width:14px;height:3px;border-radius:2px;display:inline-block}
.cline{display:block;width:100%;height:auto}
.cax{font-size:11.5px;fill:var(--ink-faint)}
.cpt{font-size:12px;fill:var(--ink);font-weight:700}
.cdata{margin-top:14px;border-top:1px solid var(--rule-soft);padding-top:11px}
.cdata summary{font-size:14px;color:var(--ink-faint);cursor:pointer}
.cdata[open] summary{margin-bottom:11px}
.chart .take{font-size:16px;color:var(--ink-soft);margin:14px 0 0;line-height:1.5}

/* Vergleich. Die eigene Spalte traegt einen Rahmen, damit man sie im Scrollen
   wiederfindet, und keine Fuellfarbe, damit sie nicht wie eine Empfehlung aussieht. */
.cmpt table{font-size:15px}
.cmpt th[scope=row]{text-align:left;color:var(--ink);font-weight:700;white-space:nowrap;
  padding:11px 16px 11px 0;border-bottom:1px solid var(--rule-soft);vertical-align:top}
/* Die Kopfzeile traegt Tournamen, keine Feldnamen. Die globale th-Regel setzt sie in
   gesperrte Versalien, was bei „ANBIETER" richtig ist und bei einem Titel aus acht
   Woertern unlesbar wird - also hier zurueckgenommen. Der Link bleibt ein Link, traegt
   die Unterstreichung aber erst beim Darueberfahren, damit fuenf unterstrichene
   Blocksaetze nebeneinander die Tabelle nicht zerreissen. */
.cmpt thead th{vertical-align:bottom;line-height:1.35;white-space:normal;min-width:132px;
  text-transform:none;letter-spacing:0;font-size:14.5px;font-weight:700;color:var(--ink);
  padding:0 16px 12px 0}
.art-in .cmpt thead th a:not(.cta){color:inherit;text-decoration:none}
.art-in .cmpt thead th a:not(.cta):hover,
.art-in .cmpt thead th a:not(.cta):focus-visible{color:var(--accent);
  text-decoration:underline;text-underline-offset:3px}
.cmpt thead th.sub{color:var(--accent);padding-top:10px}
.cmpt td{white-space:normal}
.cmpt .sub{background:rgba(var(--accent-rgb),.06);color:var(--ink);font-weight:700}
.cmpt thead th.sub{box-shadow:inset 0 3px 0 rgb(var(--accent-rgb))}

/* Das Datenblatt. Zugeklappt, aber vollstaendig im HTML. */
.sheet .dscsv{font-size:15px;color:var(--ink-soft);margin:0 0 14px}
.dsx summary{font-size:16.5px;font-weight:700;cursor:pointer;padding:12px 15px;
  background:var(--paper-sunk);border-radius:10px;color:var(--ink)}
.dsx[open] summary{margin-bottom:14px}
.ds{font-size:14.5px}
.ds td{padding:9px 14px 9px 0;vertical-align:top}
.ds td:first-child{font-weight:400;color:var(--ink-soft);width:34%}
.ds td:nth-child(2){color:var(--ink);font-weight:700}
.dsq{color:var(--ink-faint);font-size:13.5px}
.art-in .dsq a{color:var(--ink-faint);text-decoration:none;border-bottom:1px dotted var(--rule)}
tr.dsg th{background:var(--paper-sunk);color:var(--ink);font-size:12.5px;letter-spacing:.08em;
  text-transform:uppercase;padding:10px 14px;border-radius:6px;position:relative}
tr.dsg th i{font-style:normal;color:var(--ink-faint);font-weight:400;margin-left:8px}

/* Der Apparat. Nummeriert, mit Abrufdatum, wie in einer Arbeit. */
.rlist{list-style:none;margin:0;padding:0;display:grid;gap:11px;counter-reset:r}
.rlist li{display:grid;grid-template-columns:26px 1fr;gap:11px;font-size:15px;
  color:var(--ink-soft);line-height:1.5}
.rn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;background:var(--paper-sunk);color:var(--ink-faint);font-size:12.5px;
  font-weight:700;margin-top:2px}
.rdate{color:var(--ink-faint);white-space:nowrap}
.rwhat{display:block;color:var(--ink-faint);font-size:14px;margin-top:2px}

/* Ein Produktname von sechzig Zeichen in der Heldenschrift ergibt vier Zeilen, und
   weil der Held von unten ausgerichtet ist, wandert der ganze Block dabei nach oben.
   Lange Titel bekommen deshalb einen eigenen Grad; der Block wird kuerzer und sitzt
   damit wieder da, wo er auf der Startseite sitzt. */
.hero h1.long{font-size:clamp(30px,3.6vw,52px);letter-spacing:-.028em;line-height:1.08}
body[data-kind=directory] .hero-t{max-width:52ch}

/* Betraege im Fliesstext, die der Waehrungsumschalter anfasst. Sie sollen als Zahl
   auffallen und nicht als fettes Wort mitten im Satz, deshalb Ziffern in Tabellen-
   breite und ein halber Schritt Gewicht statt eines ganzen. */
.art-in b.cur{font-weight:560;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Die Vergleichstabelle traegt fuenf Spalten und passt nicht in die Textbreite (660px),
   also bricht sie auf dem Desktop aus ihr aus - mittig, nicht nach rechts. Die Breite
   haengt an `min`, damit der Ausbruch nie ueber den Viewport hinauswaechst und aus dem
   Scrollen im Block ein Scrollen der ganzen Seite wird. `.tw` behaelt sein overflow-x
   als Netz fuer schmale Desktops.

   ACHTUNG, hier ist schon einmal etwas kaputtgegangen: _mobile_layer() in site.py
   entscheidet ueber eine Textsuche im Selektortext, und der Selektortext ist alles
   zwischen der letzten schliessenden Klammer und der naechsten oeffnenden - also
   dieser Kommentar mit. Steht die gesuchte Zeichenfolge im Kommentar, wandert der
   ganze Block in die max-width-Abfrage und die Desktopregel greift nie. Deshalb wird
   die Zeichenfolge hier umschrieben und nicht ausgeschrieben: gemeint ist das
   Attribut, mit dem die Mockups ihre Mobilregeln markiert haben. */
@media (min-width:1100px){
  .cmpt{width:min(1180px, calc(100vw - 48px));max-width:none;
        margin-left:50%;transform:translateX(-50%)}
  .cmpt thead th{min-width:0}
  .cmpt .tw{overflow-x:auto}
  .cmpt table{width:100%;table-layout:fixed}
  .cmpt th[scope=row]{white-space:normal;width:19%}
}

/* Die Landeswaehrung hinter dem umgerechneten Betrag: da, aber nicht laut. */
.art-in .egp,.art-in .cur-src{color:var(--ink-faint);font-size:.92em;white-space:nowrap}

/* ---------------------------------------------------------------- Tour-Finder
   Der Block liegt hier und nicht mehr im Renderer: so greift `site.py --css-only`
   und eine Aenderung am Aussehen kostet eine halbe Sekunde statt eines vollen Laufs.

   Die erste Regel ist die wichtigste. `.art-in a:not(.cta):not(.cta2)` faerbt und
   unterstreicht jeden Link im Artikel und wiegt (0,3,1); jede Regel aus drei Klassen
   verliert dagegen. Der Finder besteht fast nur aus Links - Pillen, Karten, Kacheln -
   und stand deshalb unterstrichen und orange auf der Startseite. */
.art-in .finder a:not(.cta):not(.cta2){color:inherit;text-decoration:none;border-bottom:0}

.finder{margin:2.4em 0}
.finder .fin{--fpaper:var(--paper);background:var(--paper-sunk);border:1px solid var(--rule);
  border-radius:20px;padding:26px 24px 24px}
.finder .eyebrow{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  color:var(--accent);margin:0 0 8px}
.finder h3{font-size:29px;font-weight:800;letter-spacing:-.025em;line-height:1.13;margin:0 0 7px;
  text-wrap:balance}
.finder .flead{margin:0 0 20px;color:var(--ink-soft);font-size:16.5px;max-width:64ch}
.finder .fgrid{display:grid;grid-template-columns:auto 1fr;gap:11px 18px;align-items:start;
  padding:17px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.finder .rlab{display:flex;align-items:center;gap:8px;font-size:12.5px;letter-spacing:.07em;
  text-transform:uppercase;font-weight:700;color:var(--ink-soft);margin:6px 0 0}
.finder .rlab svg{width:16px;height:16px;flex:none}
.finder .pills{display:flex;flex-wrap:wrap;gap:8px}
.finder .pill{font:inherit;font-size:15px;font-weight:600;cursor:pointer;
  border:1px solid var(--rule);background:var(--card);color:var(--ink);border-radius:999px;
  padding:7px 14px;display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  transition:background .13s,border-color .13s,color .13s}
.finder .pill .pi{width:17px;height:17px;flex:none;opacity:.7}
.finder .pill[aria-pressed=true] .pi{opacity:1}
.finder .pill em{font-style:normal;font-variant-numeric:tabular-nums;color:var(--ink-faint);
  font-weight:500;font-size:13.5px}
.finder .pill:hover:not([disabled]){border-color:rgba(var(--accent-rgb),.5)}
.finder .pill[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}
.finder .pill[aria-pressed=true] em{color:rgba(255,255,255,.75)}
.finder .pill[disabled]{opacity:.3;cursor:not-allowed}
.finder .tally{display:flex;align-items:baseline;gap:15px;flex-wrap:wrap;margin:16px 0 14px}
.finder .tally b{font-size:32px;font-weight:800;letter-spacing:-.02em;line-height:1;
  font-variant-numeric:tabular-nums}
.finder .tally span{color:var(--ink-soft);font-size:15px}
.finder .reset{margin-left:auto;font-size:14px;color:var(--accent);background:none;border:0;
  font-family:inherit;font-weight:600;cursor:pointer;padding:0}
.finder .rail{position:relative;margin:0 -24px;padding:0 24px}
.finder .rail::before,.finder .rail::after{content:"";position:absolute;top:0;bottom:12px;
  width:34px;pointer-events:none;z-index:2;opacity:0;transition:opacity .2s}
.finder .rail::before{left:0;background:linear-gradient(to right,var(--paper-sunk),transparent)}
.finder .rail::after{right:0;background:linear-gradient(to left,var(--paper-sunk),transparent)}
.finder .rail[data-l]::before{opacity:1}
.finder .rail[data-r]::after{opacity:1}
.finder .fcards{display:grid;grid-auto-flow:column;grid-auto-columns:258px;gap:13px;
  overflow-x:auto;overflow-y:hidden;padding-bottom:12px;scroll-snap-type:x proximity;
  scrollbar-width:none;cursor:grab;overscroll-behavior-x:contain;scroll-behavior:smooth}
/* KEIN touch-action hier. `pan-y` sagt dem Browser: du darfst nur senkrecht
   schieben, waagerecht gehoert der Anwendung - und die Schiene liess sich am
   iPhone nicht mehr wischen. Der Zeigercode ueberspringt Beruehrungen ohnehin
   (`pointerType === 'touch'` steigt sofort aus), also soll der Browser beide
   Richtungen behalten. Das ist der Vorgabewert, und der ist hier der richtige. */
.finder .fcards::-webkit-scrollbar{height:0}
.finder .fcards.grabbing{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.finder .fcards.grabbing .fcard{pointer-events:none}
.finder .fcard{position:relative;display:block;text-decoration:none;color:#fff;overflow:hidden;
  border-radius:14px;aspect-ratio:4/3;background:#2A3646;scroll-snap-align:start;
  user-select:none;-webkit-user-drag:none}
.finder .fcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);-webkit-user-drag:none;pointer-events:none}
.finder .fcard:hover img{transform:scale(1.06)}
.finder .fcard .shade{position:absolute;inset:0;background:linear-gradient(to top,
  rgba(10,16,24,.93) 0%,rgba(10,16,24,.6) 36%,rgba(10,16,24,.04) 74%)}
.finder .fcard .fb{position:absolute;left:0;right:0;bottom:0;padding:13px 14px}
.art-in .finder .fcard h4{margin:0 0 6px;font-size:15px;font-weight:700;line-height:1.28;
  color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Die Fusszeile der Karte darf nie ueberlaufen. Sie stand auf `nowrap`, und sobald
   der Umschalter auf eine Waehrung mit dreistelligem Code stand („ab 48 CHF" statt
   „ab 48 €"), schob sich der Preis rechts aus der Karte. Der Preis ist die eine
   Angabe, die nicht verhandelbar ist: er behaelt seine Breite, die Dauer gibt nach
   und kuerzt sich notfalls mit Auslassungspunkten. */
.finder .fcard .fm{display:flex;align-items:center;gap:6px;font-size:13px;color:#D6DDE6;
  font-variant-numeric:tabular-nums;white-space:nowrap;min-width:0;overflow:hidden}
.finder .fcard .fm .thin{min-width:0;overflow:hidden;text-overflow:ellipsis}
.finder .fcard .pr{flex:none}
.finder .fcard .st{flex:none}
.finder .fcard .sp{flex:1}
.finder .fcard .dot{opacity:.45}
.finder .fcard .st{color:#FFCF8B;font-weight:700}
.finder .fcard .pr{font-weight:800;color:#fff}
.finder .fcard .thin{color:#B6C0CC;font-weight:500}
.finder .fcard .flag{position:absolute;top:9px;left:9px;background:rgba(255,255,255,.94);
  color:#16202C;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px}
.finder .fnav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:40px;
  height:40px;border-radius:999px;border:1px solid var(--rule);background:rgba(255,255,255,.94);
  color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0;
  box-shadow:0 3px 14px rgba(20,30,45,.13);transition:transform .12s}
.finder .fnav:hover{transform:translateY(-50%) scale(1.07)}
.finder .fnav svg{width:19px;height:19px}
.finder .fnav[hidden]{display:none}
.finder .fnav.prev{left:2px}
.finder .fnav.next{right:2px}
@media (hover:none){.finder .fnav{display:none}}
.art-in .finder a.fgo:not(.cta){display:inline-flex;align-items:center;gap:9px;margin-top:16px;
  background:var(--accent);color:#fff;text-decoration:none;font-weight:700;font-size:16px;
  padding:12px 21px;border-radius:11px;transition:background .14s}
.art-in .finder a.fgo:not(.cta):hover{background:var(--accent-ink);color:#fff}
.finder .fgo svg{width:19px;height:19px}
.finder .fsub{margin:30px 0 12px;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:700;color:var(--ink-soft);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.finder .fsub i{font-style:normal;font-weight:500;letter-spacing:0;text-transform:none;
  color:var(--ink-faint);font-size:14px}
.finder .tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:12px}
.finder .tile{position:relative;display:block;text-decoration:none;color:#fff;overflow:hidden;
  border-radius:13px;aspect-ratio:5/4;background:#2A3646}
.finder .tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.finder .tile:hover img{transform:scale(1.06)}
.finder .tile .shade{position:absolute;inset:0;background:linear-gradient(to top,
  rgba(10,16,24,.9) 0%,rgba(10,16,24,.5) 44%,rgba(10,16,24,.06) 78%)}
.finder .tile .ti{position:absolute;top:10px;left:10px;width:30px;height:30px;border-radius:9px;
  background:rgba(255,255,255,.18);display:grid;place-items:center}
.finder .tile .ti svg{width:17px;height:17px}
.finder .tile .tb{position:absolute;left:0;right:0;bottom:0;padding:11px 12px}
.art-in .finder .tile h4{margin:0 0 3px;font-size:15px;font-weight:700;line-height:1.2;color:#fff}
.finder .tile .m{font-size:12.5px;color:#C7D0DA;font-variant-numeric:tabular-nums}
.finder .tile .m b{color:#fff;font-weight:700}
.finder .frest{margin:24px 0 0;padding-top:17px;border-top:1px solid var(--rule);
  font-size:14.5px;color:var(--ink-soft);line-height:2.1}
.finder .frest b{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:5px}
.art-in .finder .frest a:not(.cta){color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--rule)}
.art-in .finder .frest a:not(.cta):hover{color:var(--accent);border-color:currentColor}
.finder .fempty{padding:18px;border:1px dashed var(--rule);border-radius:12px;
  color:var(--ink-soft);font-size:15.5px}
@media(max-width:760px){
  .finder .fgrid{grid-template-columns:1fr}
  .finder .rlab{margin:2px 0 0}
  .finder h3{font-size:24px}
  .finder .fin{padding:20px 16px 18px;border-radius:16px}
  .finder .rail{margin:0 -16px;padding:0 16px}
  .finder .tiles{grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
}
/* Dieselbe Ausbruchsbreite wie die Vergleichsbloecke, damit die Startseite eine
   Kante hat und nicht drei. Unter 1280px bleibt der Block im Textmass.

   Die Werkzeugleiste steht direkt darunter und lag im Textmass, also 720 gegen 1180:
   zwei Kanten auf derselben Seite, und die schmalere zuerst. Sie bekommt denselben
   Ausbruch, damit es bei einer bleibt. Der Aufbau ist derselbe wie bei .fig und .cmp -
   `.art-in` ist seitenzentriert, 50 Prozent davon ist die Seitenmitte, und die
   Ruecknahme um die halbe eigene Breite zentriert den breiteren Block ohne 100vw und
   den Ueberlauf, den das mit einer Bildlaufleiste ausloest. */
@media(min-width:1280px){
  .finder{width:var(--width-wide);margin-left:50%;transform:translateX(-50%)}
  /* Die Werkzeugleiste steht direkt darunter und lag im Textmass: zwei Kanten auf
     derselben Seite, die schmalere zuerst. Sie bekommt denselben Ausbruch.

     `.art-in .htools` und nicht `.htools`, weil die Leiste ihr Grundformat aus
     site.py bezieht und dieser Block dort ZWANZIG Kilobyte spaeter steht. Das
     `margin:24px 0` von dort ueberschrieb ein einfaches `margin-left:50%` wieder,
     die Ruecknahme um die halbe Breite blieb stehen, und der Block rutschte um seine
     halbe Breite nach links aus dem Bild. Zwei Klassen gewinnen unabhaengig von der
     Reihenfolge. */
  .art-in .htools{width:var(--width-wide);margin-left:50%;transform:translateX(-50%)}
}

/* Kacheln auf schmalen Schirmen. Der Titel steht unten und waechst nach oben; bei
   „Touren mit deutschsprachigem Guide" wuchs er in das Symbol hinein und die
   Preiszeile brach um und lief aus der Kachel. Zwei Zeilen Titel, eine Zeile
   Zahlen, und auf dem Telefon etwas mehr Hoehe, damit beides Platz hat. */
.art-in .finder .tile h4{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;text-wrap:balance}
.finder .tile .m{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.finder .tile .tb{padding-right:12px}
@media(max-width:760px){
  .finder .tile{aspect-ratio:4/3}
  .art-in .finder .tile h4{font-size:14px;line-height:1.22}
  /* Auf einer 150 Pixel breiten Kachel passt „186 Angebote · ab 12 €" nur knapp.
     Bei 12px wurde daraus „ab 1…" - abgeschnitten wurde ausgerechnet der Preis,
     also das, wofuer die Zeile da ist. Eine Spur kleiner und enger, und sie passt
     ganz; der Titel darueber traegt die Groesse. */
  .finder .tile .m{font-size:11px;letter-spacing:-.01em}
  /* Der Grenzfall ist die dreistellige Zahl auf beiden Seiten: „127 Angebote ·
     ab 103 €". Nur dafuer eine halbe Stufe kleiner, damit auch dort der Preis
     ganz dasteht statt als „ab 103…". */
  .finder .tile .m{font-size:10.5px}
  .finder .tile .tb{padding:9px 10px}
  .finder .tile .ti{width:26px;height:26px;border-radius:8px;top:8px;left:8px}
  .finder .tile .ti svg{width:15px;height:15px}
}

/* Zugeklappte Zusammenstellungen. Der Knopf sitzt in der Ueberschrift und greift nur
   unter 760px: am Schreibtisch sind Kacheln und Linkliste eine Uebersicht, auf dem
   Telefon stehen sie zwischen dem Leser und dem Artikel. Das Attribut setzt das
   Skript immer; welche Breite es betrifft, entscheidet allein diese Abfrage. */
.finder .fr-t{display:none}
@media(max-width:760px){
  .finder .fsub{margin:22px 0 0;align-items:center;justify-content:space-between;
    flex-wrap:nowrap;gap:10px}
  .finder .fsub .fs-txt{min-width:0;display:block}
  .finder .fsub i{display:block;margin-top:3px}
  .finder .fin[data-collapsed] .fr-fold{display:none}
  .finder .fr-fold{margin-top:12px}
  .finder .fr-t{display:inline-flex;align-items:center;justify-content:center;
    width:30px;height:30px;flex:none;border-radius:999px;border:1px solid var(--rule);
    background:var(--card);color:var(--ink);cursor:pointer;padding:0;
    transition:transform .18s ease,background .14s}
  .finder .fr-t svg{width:16px;height:16px}
  .finder .fin:not([data-collapsed]) .fr-t{transform:rotate(45deg);
    background:var(--paper-sunk)}
}

/* ---- kit blocks, 2026-09-06: compare-slider, explainer, map-leaflet ------------------- */
/* compare-slider: both pictures in the DOM; without the script they sit side by side,
   with it the after-image is clipped to the handle position (a range input). */
.cmps-stage{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:relative}
.cmps-stage img{width:100%;height:auto;display:block;border-radius:var(--radius-card)}
.cmps-before,.cmps-after{position:relative}
.cmps-lab{position:absolute;left:10px;bottom:10px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;
  font-weight:700;padding:3px 8px;border-radius:var(--radius-pill,999px);letter-spacing:.02em}
.cmps-range{display:none}
.cmps[data-ready] .cmps-stage{display:block;--x:50%;overflow:hidden;border-radius:var(--radius-card)}
.cmps[data-ready] .cmps-stage img{border-radius:0;aspect-ratio:16/10;object-fit:cover}
.cmps[data-ready] .cmps-after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--x))}
.cmps[data-ready] .cmps-after .cmps-lab{left:auto;right:10px}
.cmps[data-ready] .cmps-stage::after{content:"";position:absolute;top:0;bottom:0;left:var(--x);width:2px;
  margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.25);pointer-events:none}
.cmps[data-ready] .cmps-range{display:block;position:absolute;inset:0;width:100%;height:100%;margin:0;
  opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent}
.cmps[data-ready] .cmps-handle{position:absolute;top:50%;left:var(--x);width:36px;height:36px;margin:-18px 0 0 -18px;
  border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.35);pointer-events:none;
  display:flex;align-items:center;justify-content:center;color:var(--ink);font-weight:800;font-size:14px}

/* explainer: every panel in the DOM with its heading; the script adds a tab strip and
   shows one panel at a time. `steps` mode adds previous/next buttons. */
.explainer{border:1px solid var(--rule);border-radius:var(--radius-card);padding:18px 20px;margin:1.9em 0;background:var(--card)}
.explainer>h3{margin:0 0 12px;font-size:1.15em}
.ex-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding:0;list-style:none}
.ex-tabs button{border:1px solid var(--rule);background:var(--paper);color:var(--ink);border-radius:var(--radius-pill,999px);
  padding:6px 12px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.ex-tabs button[aria-selected=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ex-panel>h4{margin:0 0 8px;font-size:1em}
.ex-panel+.ex-panel{border-top:1px solid var(--rule-soft);margin-top:14px;padding-top:14px}
.explainer[data-ready] .ex-panel{display:none;border:0;margin:0;padding:0}
.explainer[data-ready] .ex-panel[data-on]{display:block}
.ex-nav{display:flex;justify-content:space-between;gap:10px;margin-top:14px}
.ex-nav button{border:1px solid var(--rule);background:var(--paper);color:var(--ink);border-radius:var(--radius-control,8px);
  padding:7px 12px;font:inherit;font-size:14px;cursor:pointer}
.ex-nav button:disabled{opacity:.4;cursor:default}
.ex-count{font-size:13px;color:var(--ink-faint);align-self:center}

/* map-leaflet: the legend is server-rendered and stands alone; the map fills in when
   the self-hosted Leaflet arrives. */
.maplf-map{height:420px;border-radius:var(--radius-card);background:var(--paper-sunk);border:1px solid var(--rule)}
.maplf-map:empty::before{content:attr(data-fallback);display:block;padding:16px;color:var(--ink-faint);font-size:14px}
.maplf-legend{margin:12px 0 0;padding-left:1.4em;font-size:15px;color:var(--ink-soft)}
.maplf-legend li{margin:4px 0}
.maplf-legend b{color:var(--ink)}
.leaflet-container{font:inherit}
.leaflet-popup-content{font-size:14px;line-height:1.45}
/* ===================== footer ===================== */
.ft{background:var(--paper-sunk);color:var(--ink);border-top:1px solid var(--rule);margin-top:60px}
.ft-in{max-width:calc(var(--container) + var(--gutter)*2);margin:0 auto;padding:44px var(--gutter) 0}
/* Brand beside blurb, same .78/1.22 split and hairline as .ft-mid below, so the
   two rows of the footer read as one system. */
.ft-top{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  align-items:center;padding-bottom:34px}
.fbrand{display:flex;align-items:center;gap:11px;margin:0;padding-right:34px;
 color:inherit;text-decoration:none}
.fbrand:hover b{color:var(--accent)}
.fbrand svg{width:36px;height:36px;flex:none;color:var(--ink)}
.fbrand b{font-size:19px;letter-spacing:-.02em;line-height:1.1;display:block}
.fbrand small{display:block;font-size:10.5px;letter-spacing:.055em;text-transform:uppercase;
              color:var(--ink-faint);margin-top:2px}
.ft-blurb{font-size:16px;line-height:1.55;color:var(--ink-soft);margin:0;
  border-left:1px solid var(--rule);padding-left:34px}
.nl h3{font-size:18px;margin:0 0 6px;letter-spacing:-.015em}
.nl p{font-size:15.5px;color:var(--ink-soft);margin:0 0 14px;line-height:1.5;max-width:44ch}
.nl form{display:flex;gap:9px;flex-wrap:wrap}
.nl input{flex:1 1 200px;min-width:0;background:#fff;border:1px solid var(--rule);border-radius:10px;
          padding:12px 14px;font:inherit;font-size:16px;color:var(--ink)}
.nl button{background:var(--cta);color:var(--cta-ink);border:0;border-radius:10px;padding:12px 20px;
           font:inherit;font-size:16px;font-weight:700;cursor:pointer;white-space:nowrap}
.nl button:hover{background:var(--cta-hover)}
.nl .small{font-size:13px;color:var(--ink-faint);margin:9px 0 0}
.ft-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 30px;padding:32px 0 34px;
         border-top:1px solid var(--rule)}
.ft-cols h4{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);
            font-weight:700;margin:0 0 11px}
.ft-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ft-cols a{color:var(--ink-soft);text-decoration:none;font-size:15.5px}
.ft-cols a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:2.5px}
/* source row, in the footer on every page */
/* The sources and the affiliate note sit side by side. The note is the longer
   text so it takes the wider column, and a hairline between them does the
   separating that two stacked full-width rules used to. */
.ft-mid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  border-top:1px solid var(--rule);padding:24px 0 22px}
.ft-src{padding:0 34px 0 0}
.ft-src h4{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);
           font-weight:700;margin:0 0 4px}
.ft-src .lead{font-size:14.5px;color:var(--ink-soft);margin:0 0 14px;line-height:1.5}
.srcgrid{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.srcgrid img{width:34px;height:34px;border-radius:7px;background:#fff;padding:4px;object-fit:contain;
             box-shadow:0 0 0 1px rgba(26,39,55,.08);filter:grayscale(1);opacity:.6;
             transition:filter .12s,opacity .12s;cursor:default}
.srcgrid img:hover{filter:none;opacity:1}

.ft-aff{border-left:1px solid var(--rule);padding:0 0 0 34px;display:grid;grid-template-columns:auto 1fr;
        gap:14px;align-items:start}
.ft-aff svg{width:19px;height:19px;color:var(--ink-faint);flex:none;margin-top:2px}
.ft-aff p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-soft)}
.ft-aff .partners{margin-top:7px;font-size:13.5px;color:var(--ink-faint)}
.ft-legal{border-top:1px solid var(--rule);padding:18px 0 30px;display:flex;justify-content:space-between;
          align-items:center;gap:16px;flex-wrap:wrap}
.ft-legal nav{display:flex;gap:18px;flex-wrap:wrap}
.ft-legal a{color:var(--ink-soft);text-decoration:none;font-size:14.5px}
.ft-legal .cr{font-size:14px;color:var(--ink-faint)}
/* ============================================================================
   media-carousel — ONE component, used wherever an image appears.

   Controls (arrows, dots) render only when there is more than one slide, so a
   single-image block degrades to a plain picture and lights up automatically
   when more images arrive. No template change needed later.

   Size is set by the parent, not by this component: it always fills its
   container and takes its shape from --ar.
   ============================================================================ */
.mc{position:relative;border-radius:var(--mc-radius,11px);overflow:hidden;background:var(--paper-sunk)}
.mc-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
          cursor:grab;touch-action:pan-x;user-select:none;scrollbar-width:none;-ms-overflow-style:none}
.mc-track::-webkit-scrollbar{display:none}
.mc-track.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.mc-track img{flex:0 0 100%;width:100%;height:auto;display:block;scroll-snap-align:center;
              aspect-ratio:var(--ar,3/2);object-fit:cover;pointer-events:none}
.mc-track:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* single slide: no chrome at all */
.mc[data-n="1"] .mc-arrow,.mc[data-n="1"] .mc-dots{display:none}

.mc-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
          width:var(--mc-arrow,32px);height:var(--mc-arrow,32px);border-radius:50%;border:0;padding:0;
          background:rgba(254,251,246,.94);color:var(--ink);cursor:pointer;display:grid;place-items:center;
          box-shadow:0 2px 8px rgba(26,39,55,.24);opacity:0;transition:opacity .14s,background .12s}
.mc-arrow:hover{background:#fff}
.mc-arrow svg{width:calc(var(--mc-arrow,32px) * .46);height:calc(var(--mc-arrow,32px) * .46)}
.mc-arrow.prev{left:8px}.mc-arrow.next{right:8px}
.mc:hover .mc-arrow,.mc-arrow:focus-visible{opacity:1}
.mc-arrow[disabled]{opacity:0!important;pointer-events:none}

.mc-dots{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);display:flex;gap:5px;z-index:3}
.mc-dots button{width:6px;height:6px;border-radius:50%;border:0;padding:0;cursor:pointer;
                background:rgba(255,255,255,.65);transition:width .15s,background .15s}
.mc-dots button[aria-current=true]{background:#fff;width:16px;border-radius:3px}

/* very small instances: no room for chrome, tap the image instead */
.mc.mc-mini .mc-arrow{--mc-arrow:22px}
.mc.mc-mini .mc-dots{bottom:5px;gap:3px}
.mc.mc-mini .mc-dots button{width:4px;height:4px}
.mc.mc-mini .mc-dots button[aria-current=true]{width:10px}

/* touch: arrows are pointless, the swipe is the control */
@media (hover:none){.mc-arrow{display:none}}
/* ============================================================================
   Interactive infographic. A commissioned bitmap plus numbered hotspots
   positioned in percentages, so they hold at any width.

   The tooltip is INSTANT: no transition, no delay, no animation. A teaching
   overlay that fades in reads as sluggish, and the reader is comparing several
   markers in quick succession.
   ============================================================================ */
/* NOT overflow:hidden. A tooltip near an edge must be able to leave the figure,
   so the rounding lives on the image and the legend instead of on a clipping box. */
.ig{position:relative;border:1px solid var(--rule);border-radius:var(--radius-card);
    background:var(--paper);margin:1.6em 0}
.ig-fig{position:relative;display:block;line-height:0}
.ig-fig img{display:block;width:100%;height:auto;
            border-radius:calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px) 0 0}
.ig-legend{border-radius:0 0 calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px)}

.hs{position:absolute;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;
    border:2px solid #fff;background:var(--ink);color:#fff;font:700 14px/1 var(--font-body);
    font-variant-numeric:tabular-nums;display:grid;place-items:center;cursor:pointer;padding:0;
    box-shadow:0 1px 4px rgba(26,39,55,.35);z-index:2;
    transition:background .1s,transform .1s}
.hs:hover,.hs[aria-expanded="true"]{background:var(--accent);transform:translate(-50%,-50%) scale(1.12)}
.hs:focus-visible{outline:3px solid var(--cta);outline-offset:2px}
/* a quiet pulse ring, once, so the reader notices the markers are live */
.hs::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--ink);
           opacity:0;animation:hsr 2.4s ease-out 3}
@keyframes hsr{0%{opacity:.5;transform:scale(.75)}60%,100%{opacity:0;transform:scale(1.25)}}
@media (prefers-reduced-motion:reduce){.hs::after{animation:none}.hs{transition:none}}

.tip{position:absolute;z-index:40;width:min(300px,72vw);background:var(--ink);color:#fff;
     border-radius:11px;padding:12px 14px;box-shadow:0 8px 28px -8px rgba(26,39,55,.55);
     transform:translate(-50%,0);pointer-events:none;
     display:none}                      /* instant: shown by display, never faded */
.tip[data-on]{display:block}
.tip b{display:block;font-size:14.5px;line-height:1.3;margin-bottom:5px}
.tip span{display:block;font-size:13.5px;line-height:1.5;color:#c8d1dd}
.tip::before{content:"";position:absolute;left:var(--arrow,50%);margin-left:-7px;border:7px solid transparent}
.tip[data-side="below"]::before{top:-14px;border-bottom-color:var(--ink)}
.tip[data-side="above"]::before{bottom:-14px;border-top-color:var(--ink)}

/* Static value labels. Some graphics are unreadable without their numbers, and a
   number you must hover to see is a number most readers never see. */
.val{position:absolute;transform:translate(0,-50%);z-index:1;white-space:nowrap;
     font:700 13px/1 var(--font-body);font-variant-numeric:tabular-nums;color:var(--ink);
     background:rgba(254,251,246,.86);padding:2px 6px;border-radius:5px}
.val.hi{color:var(--accent)}
@media (max-width:560px){.val{font-size:11px;padding:1px 4px}}

.ig-legend{border-top:1px solid var(--rule-soft);padding:14px 18px 16px;background:var(--card)}
.ig-legend h4{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);
              margin:0 0 10px;font-weight:700}
.ig-legend ol{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.ig-legend li{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:15.5px;align-items:start}
.ig-legend b{width:22px;height:22px;border-radius:50%;background:var(--paper-sunk);
             border:1px solid var(--rule);color:var(--ink-soft);display:grid;place-items:center;
             font-size:12px;font-variant-numeric:tabular-nums}
.ig-legend li.on b{background:var(--accent);border-color:var(--accent);color:#fff}
.ig-legend span{color:var(--ink-soft);line-height:1.4;padding-top:1px}
.ig-legend li.on span{color:var(--ink)}
.ig-note{font-size:13.5px;color:var(--ink-faint);line-height:1.5;margin:12px 0 0;
         padding-top:11px;border-top:1px solid var(--rule-soft)}

@media (max-width:560px){
  .hs{width:26px;height:26px;font-size:12.5px}
  .tip{width:min(260px,80vw)}
}

.lsw{position:relative}
.lsw summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;
  -webkit-user-select:none;user-select:none}
.lsw summary::-webkit-details-marker{display:none}
.lsw summary svg{width:14px;height:14px}
.lsw summary .chev{width:12px;height:12px;transition:transform .18s ease}
.lsw[open] summary .chev{transform:rotate(180deg)}
.lsw-m{position:absolute;right:0;top:calc(100% + 10px);min-width:200px;z-index:80;
  background:var(--paper,#fff);border:1px solid var(--rule,#e4ddd1);border-radius:16px;
  box-shadow:0 14px 40px rgba(26,39,55,.18);padding:7px;display:flex;flex-direction:column}
.lsw-m a,.lsw-m .cur,.lsw-m button{display:flex;align-items:center;gap:10px;padding:8px 11px;
  border-radius:10px;font-size:13.5px;color:var(--ink,#1A2737);text-decoration:none;
  text-shadow:none;white-space:nowrap;border:0;background:none;font-family:inherit;
  width:100%;text-align:left;cursor:pointer}
.lsw-m a:hover,.lsw-m button:hover{background:var(--card,#f4efe6)}
.lsw-cur{min-width:250px}
.lsw-cur em{font-style:normal;margin-left:auto;padding-left:14px;font-size:11.5px;
  color:var(--ink-faint,#8a8274);font-variant-numeric:tabular-nums;white-space:nowrap}
.lsw-cur button>svg{width:14px;height:14px;flex:none;margin-left:10px;color:var(--accent,#C97B2D)}
.lsw-cur button[aria-current]{font-weight:800}
.lsw-m .cur{font-weight:700}
.lsw-m .cur svg{width:14px;height:14px;margin-left:auto;color:var(--accent,#C97B2D)}
.lsw-m i{font-style:normal;font-weight:800;font-size:10.5px;letter-spacing:.04em;
  width:24px;flex:none;color:var(--ink-faint,#8a8274)}
.lsw-flat{display:flex;flex-wrap:wrap;gap:4px 12px;padding:10px 0;font-size:13.5px}
.lsw-flat a{color:inherit;text-decoration:none;opacity:.75}
.lsw-flat a:hover{opacity:1;text-decoration:underline}
.lsw-flat b{font-weight:800}
/* ---- mobile drawer: full screen, one left edge, settled bottom bar ---- */
.drawer{position:fixed;top:66px;left:0;right:0;bottom:0;height:auto;
  display:none;flex-direction:column;background:var(--paper);
  border-top:1px solid var(--rule);z-index:70;overscroll-behavior:contain}
.drawer[data-open]{display:flex;animation:dw-in .24s ease}
@keyframes dw-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.drawer[data-open]{animation:none}}
body.dw-open{overflow:hidden}
.dw-scroll{flex:1;overflow-y:auto;padding:10px 26px 24px;-webkit-overflow-scrolling:touch;
  scrollbar-width:none}
.dw-scroll::-webkit-scrollbar{display:none}
.drawer details{border-bottom:1px solid var(--rule-soft)}
.drawer details:last-child{border-bottom:0}
.drawer summary{display:flex;align-items:center;justify-content:space-between;
  padding:19px 0;font-size:16.5px;font-weight:800;letter-spacing:-.01em;color:var(--ink);
  cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none}
.drawer summary::-webkit-details-marker{display:none}
.drawer summary svg{width:17px;height:17px;flex:none;color:var(--ink-faint);
  transition:transform .2s ease}
.drawer details[open] summary svg{transform:rotate(180deg)}
.dw-links{padding:2px 0 16px}
.drawer .dw-links a{display:block;padding:11.5px 0;font-size:15.5px;font-weight:500;
  color:var(--ink-soft);text-decoration:none;border:0}
.drawer .dw-links a.all{color:var(--accent);font-weight:700;padding-top:14px}
.dw-foot{flex:none;border-top:1px solid var(--rule);background:var(--card,#f7f2e9)}
/* burger becomes a clean X while open */
.burger span{transition:transform .2s ease,opacity .15s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
/* the bar above an open drawer is always solid, hero or not */
.site-header.dw-solid{background:var(--paper);border-bottom-color:var(--rule)}
.site-header.dw-solid .brand b{color:var(--ink);text-shadow:none}
.site-header.dw-solid .brand svg path{fill:var(--ink);stroke:var(--ink)}
.site-header.dw-solid .burger{background:var(--card);border-color:var(--rule)}
.site-header.dw-solid .burger span{background:var(--ink)}

/* ---- full-screen pickers (language, currency) ---- */
.picker{position:fixed;inset:0;z-index:100;background:var(--paper);
  display:flex;flex-direction:column;animation:pk-in .22s ease}
.picker[hidden]{display:none}
@keyframes pk-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.picker{animation:none}}
.pk-top{display:flex;align-items:center;gap:12px;padding:20px 26px;
  border-bottom:1px solid var(--rule);flex:none}
.pk-top svg{width:20px;height:20px;color:var(--accent);flex:none}
.pk-top b{font-size:19px;letter-spacing:-.01em}
.pk-x{margin-left:auto;border:1px solid var(--rule);background:var(--card);
  border-radius:999px;width:38px;height:38px;display:flex;align-items:center;
  justify-content:center;cursor:pointer;color:var(--ink)}
.pk-x svg{width:16px;height:16px;color:inherit}
.pk-list{flex:1;overflow:hidden;padding:8px 14px calc(10px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;justify-content:center}
.pk-row{display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  flex:1 1 0;min-height:42px;max-height:70px;padding:0 14px;
  border:0;border-radius:14px;background:none;cursor:pointer;
  font-size:16.5px;font-weight:600;color:var(--ink);text-decoration:none}
.pk-row:hover{background:var(--card)}
.pk-row[aria-current]{font-weight:800}
.pk-row i{font-style:normal;font-weight:800;font-size:12px;width:38px;height:38px;
  flex:none;display:flex;align-items:center;justify-content:center;border-radius:999px;
  background:var(--card);border:1px solid var(--rule);color:var(--ink-soft);
  letter-spacing:.02em}
.pk-row span{flex:1;min-width:0}
.pk-row em{font-style:normal;margin-left:12px;font-size:12.5px;color:var(--ink-faint);
  font-variant-numeric:tabular-nums;white-space:nowrap;flex:none}
.pk-row>svg{width:16px;height:16px;color:var(--accent);flex:none;margin-left:10px}
.pk-row[aria-current]>svg{margin-left:auto}
.pk-row em+svg{margin-left:10px}
/* the two settings rows at the drawer's foot */
.dw-foot{padding:10px 14px calc(12px + env(safe-area-inset-bottom))}
.dw-set{display:flex;align-items:center;gap:13px;width:100%;padding:15px 12px;
  border:0;background:none;border-radius:14px;cursor:pointer;text-align:left;
  font-size:15.5px;color:var(--ink)}
.dw-set:hover{background:var(--paper)}
.dw-set>svg:first-child{width:19px;height:19px;color:var(--accent);flex:none}
.dw-set>svg:last-child{width:15px;height:15px;color:var(--ink-faint);flex:none;margin-left:auto}
.dw-set .s-l{font-weight:700}
.dw-set .s-v{color:var(--ink-faint);font-weight:600;margin-left:auto}
.dw-set .s-v+svg{margin-left:10px}
.dw-set+.dw-set{border-top:1px solid var(--rule-soft)}
.pill-btn{cursor:pointer;background:none;font:inherit;font-size:12px}
body.pk-open{overflow:hidden}

/* ---- homepage tools strip ---- */
.htools{margin:24px 0;padding:13px 14px 12px;background:var(--card,#f4efe6);
  border:1px solid var(--rule,#e4ddd1);border-radius:15px}
.ht-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 9px}
.ht-head b{font-size:14.5px;letter-spacing:-.01em}
.ht-head span{font-size:12px;color:var(--ink-faint,#8a8274)}
.ht-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.htools .ht-grid a,.art-in .htools .ht-grid a{display:flex;align-items:center;gap:10px;
  padding:9px 10px;background:var(--paper,#fff);
  border:1px solid var(--rule,#e4ddd1);border-radius:13px;text-decoration:none;
  color:var(--ink,#1A2737);font-size:12.5px;font-weight:700;line-height:1.2;
  transition:transform .15s ease,box-shadow .15s ease}
.ht-grid a:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(26,39,55,.10)}
.ht-grid i{flex:none;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;background:color-mix(in srgb,var(--accent,#C97B2D),#fff 86%);
  color:var(--accent,#C97B2D)}
.ht-grid i svg{width:16px;height:16px}
.ht-grid span{flex:1;min-width:0}
.ht-grid .ht-a{width:13px;height:13px;flex:none;color:var(--ink-faint,#8a8274)}
@media(max-width:900px){.ht-grid{grid-template-columns:1fr 1fr}}
@media(max-width:430px){.ht-grid{grid-template-columns:1fr 1fr}
  .ht-grid a{padding:11px 10px;font-size:12.5px}}

/* ---- sticky tour bar. Rebuilt 2026-09-07 to the owner's own layout, on this site's
   palette instead of the reference site's night card: a white card on the page's ground,
   with the roof red doing the only selling on it.

   The layout is his, drawn as a grid rather than nested rows, so each part sits where he
   put it and nothing depends on the order the renderer emits them in:

       title .................... price       price right, on the title's first line
       picture   badge           button       badge and rating stack beside the picture
                 rating
       reviews  ·  duration  ·  cancellation  one line, spread across the full width

   That last line is space-between, not a row of separators: the owner asked for the width
   to be used with bigger gaps, not bigger text. Two facts or four, it still fills. */
.tourbar{position:fixed;left:0;right:0;bottom:0;z-index:60;
  padding:12px 14px calc(12px + env(safe-area-inset-bottom)) 14px;
  background:var(--card);color:var(--ink);border-top:1px solid var(--rule);
  border-radius:16px 16px 0 0;box-shadow:0 -10px 34px rgba(18,34,44,.20)}
.tourbar[hidden],.tb-pill[hidden]{display:none!important}
.tourbar{animation:tb-in .22s ease-out}
@keyframes tb-in{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.tourbar{animation:none}}
.tb-card{display:grid;grid-template-columns:58px 1fr auto;gap:8px 12px;
  grid-template-areas:"t t p" "im md cta" "mt mt mt";
  align-items:center;color:inherit;text-decoration:none;
  /* the close button lives in this strip, so nothing in the card has to dodge it
     and the price, the button and the end of the bottom line all end on one edge */
  padding-right:22px}
.tb-title{grid-area:t;align-self:start;font-size:13.5px;font-weight:700;line-height:1.3;
  color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tb-p{grid-area:p;align-self:start;text-align:right;white-space:nowrap;line-height:1.2;
  font-size:17px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.tb-p i{font-style:normal;font-size:10.5px;font-weight:600;color:var(--ink-soft);margin-right:3px}
.tb-im{grid-area:im;width:58px;height:58px;border-radius:10px;overflow:hidden;
  background:var(--paper-sunk)}
.tb-im img{width:100%;height:100%;object-fit:cover;display:block}
.tb-md{grid-area:md;min-width:0;display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.tb-b{background:var(--badge);color:var(--badge-ink);font-size:10.5px;font-weight:700;
  letter-spacing:.02em;padding:2px 7px;border-radius:4px;white-space:nowrap}
.tb-r{font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap}
.tb-star{color:var(--star)}
.tb-cta{grid-area:cta;background:var(--cta);color:var(--cta-ink);font-size:13px;font-weight:700;
  padding:11px 16px;border-radius:var(--radius-control);white-space:nowrap;text-align:center}
.tb-meta{grid-area:mt;display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-size:11.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden}
/* A phone is 360px wide and the button's label is a sentence in some languages. The
   button keeps its size; the padding gives way first, then the label wraps to two
   lines rather than pushing the picture and the rating off the card. */
@media(max-width:420px){
  .tb-cta{padding:10px 11px;font-size:12.5px;white-space:normal;line-height:1.25}
  .tb-title{font-size:13px}
}
.tb-t{color:var(--teal)}
.tb-x{position:absolute;top:6px;right:6px;width:30px;height:30px;border:0;background:none;
  color:var(--ink-faint);cursor:pointer;display:flex;align-items:center;justify-content:center}
.tb-x svg{width:14px;height:14px}
.tb-pill{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:60;
  border:0;background:var(--ink);color:#fff;font-weight:700;font-size:12.5px;padding:11px 17px;
  border-radius:999px;cursor:pointer;box-shadow:0 8px 24px rgba(18,34,44,.28)}
body.tb-open{padding-bottom:150px}
@media(min-width:901px){
  .tourbar{left:auto;right:22px;bottom:22px;width:500px;border:1px solid var(--rule);
    border-radius:16px;padding:14px;box-shadow:0 16px 44px rgba(18,34,44,.22)}
  body.tb-open{padding-bottom:0}
}

.smap-lang{margin-top:34px}
.smap-lang h2{display:flex;align-items:baseline;gap:10px;font-size:24px;
  border-bottom:1px solid var(--rule,#e4ddd1);padding-bottom:8px}
.smap-lang h2 i{font-style:normal;font-size:13px;font-weight:400;color:var(--ink-faint,#8a8274)}
.smap-lang .hubcol h3{display:flex;align-items:baseline;gap:8px;font-size:17px;margin:18px 0 10px}
.smap-lang .hubcol h3 i{font-style:normal;font-size:12px;font-weight:400;color:var(--ink-faint,#8a8274)}
.smap-lang .hubcol h3 a{color:inherit;text-decoration:none}
.smap-lang .hubcol h3 a:hover{text-decoration:underline}
.smap-jump{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13.5px}
.smap-jump a{color:var(--ink-soft,#5a5348);text-decoration:none}
.smap-jump a:hover{text-decoration:underline}

.pic{position:relative}
.pic img{display:block;width:100%;height:auto;border-radius:10px}
.pic .credit{position:absolute;right:8px;bottom:8px;background:rgba(18,22,28,.62);
  color:#fff;font-size:11.5px;padding:3px 7px;border-radius:5px;backdrop-filter:blur(3px)}
.pic .credit a{color:#fff;text-decoration:none}
/* carousel.css owns the component. Only the things that are actually different
   about a tour thumbnail belong here - a square crop and a tighter radius. The
   track, the dots and the arrows were duplicated here once, and the copy set
   `left:0;right:0` on the dots while leaving carousel.css's
   `transform:translateX(-50%)` in force, which shoved them off to the left. */
.othumb .mc{border-radius:12px;--ar:1}
/* A card that names its own picture puts a bare <img> here, with no carousel
   around it. The old `.othumb img` rule was removed when the carousel took over
   sizing, so that image had nothing constraining it and rendered at its natural
   width, bursting the 140px column. Direct child only, so it cannot reach the
   carousel slides, which carousel.css already sizes. */
.othumb>img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;
  border-radius:12px}

.hubwrap{max-width:var(--container);margin:0 auto;padding:26px var(--gutter) 80px}
.hubhead{max-width:660px;margin:0 0 34px}
.hubhead h1{font-size:clamp(30px,5vw,44px);line-height:1.1;letter-spacing:-.025em;margin:0 0 12px}
.hubhead p{color:var(--ink-soft);font-size:18px;margin:0}
.hubhead .cnt{margin-top:12px;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);font-weight:700}
.huboffer{max-width:var(--measure);margin:0 0 34px}
.huboffer .offer{margin:0}
.hubgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:30px 34px;align-items:start}
.hubcol h2{font-size:15px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint);
  border-bottom:1px solid var(--rule);padding-bottom:9px;margin:0 0 12px;display:flex;
  justify-content:space-between;align-items:baseline}
.hubcol h2 i{font-style:normal;font-size:13px;color:var(--ink-faint);opacity:.7}
.hubcol ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.hubcol li a{display:block;font-weight:700;color:var(--ink);text-decoration:none;font-size:16.5px;line-height:1.3}
.hubcol li a:hover{color:var(--accent)}
.hubcol li span{display:block;color:var(--ink-soft);font-size:13.5px;line-height:1.45;margin-top:3px}
.hnav .mpanel a.all{color:var(--accent);font-weight:700;
  border-top:1px solid var(--rule-soft);margin-top:5px;padding-top:9px}

/* --- shell additions the mockups carried inline --- */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:200}
.skip:focus{left:8px;top:8px}
.crumbs{max-width:var(--container);margin:0 auto;padding:14px var(--gutter) 0;display:flex;
  gap:7px;align-items:center;flex-wrap:wrap;font-size:13.5px;color:var(--ink-faint)}
.crumbs a{color:var(--ink-soft);text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.crumbs svg{width:14px;height:14px;flex:none;opacity:.55}
.crumbs [aria-current]{color:var(--ink)}
.hnav .mgroup{position:relative}
.hnav .mgroup>button{background:none;border:0;font:inherit;cursor:pointer;color:inherit;
  display:inline-flex;align-items:center;gap:2px;padding:8px 5px;white-space:nowrap}
/* home.css sets white-space and the over-hero white on `.hnav span`, but every
   group label is a <button>. Neither rule was reaching the navigation. */
.site-header:not(.solid) .hnav .mgroup>button{color:#fff;
  text-shadow:0 1px 10px rgba(10,16,24,.5)}
.hnav .mgroup>button svg{width:12px;height:12px;transition:transform .15s}
.hnav .mgroup[data-open] >button svg{transform:rotate(180deg)}
.hnav .mpanel{display:none;position:absolute;top:100%;left:-14px;min-width:250px;background:var(--card);
  border:1px solid var(--rule);border-radius:12px;padding:9px;box-shadow:0 16px 40px rgba(20,25,35,.13);z-index:60}
.hnav .mgroup[data-open] .mpanel{display:grid}
.hnav .mpanel a{padding:7px 11px;border-radius:7px;text-decoration:none;color:var(--ink);font-size:15.5px}
.hnav .mpanel a:hover{background:var(--paper-sunk);color:var(--accent)}
.drawer details a{display:block;padding:9px 14px;color:var(--ink-soft);text-decoration:none}
.srcgrid .src{position:relative;display:inline-flex}
.srcgrid .tip{display:none;position:absolute;bottom:130%;left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;padding:9px 12px;border-radius:9px;width:max-content;max-width:250px;
  font-size:13px;line-height:1.45;z-index:70}
.srcgrid .tip i{display:block;opacity:.72;font-style:normal}
.srcgrid .src:hover .tip,.srcgrid .src:focus .tip{display:block}
.ph-img{aspect-ratio:3/2;background:var(--paper-sunk);border-radius:10px}
.ph-img.mini{aspect-ratio:1}
.ph-graphic{aspect-ratio:16/10;background:var(--paper-sunk);border-radius:12px;display:grid;
  place-items:center;color:var(--ink-faint);font-size:14px}

@media (max-width:900px){
.frame{max-width:390px;border-left:1px solid var(--rule);border-right:1px solid var(--rule)}
:root{--gutter:20px}
.burger{display:flex}
.hnav, .hutil{display:none}
.hero{margin-top:-66px}
.hero-bg img{object-position:72% 50%}
.hero-in{padding-bottom:64px}
.hero h1{font-size:38px}
.cta, .cta2{width:100%}
.scroll, .hero-cred{display:none}
.glance-in{grid-template-columns:1fr 1fr;gap:18px;padding:20px var(--gutter)}
.glance b{font-size:22px}
.secs-in{grid-template-columns:1fr}
.sec{grid-template-columns:1fr}
.sec-img img{aspect-ratio:16/9}
.secs h2{font-size:24px}
.secs{padding-top:34px}
.pcard{grid-template-columns:1fr;gap:14px}
.trust{grid-template-columns:1fr}
.pcard-f{border-left:0;padding-left:0;border-top:1px solid var(--rule-soft);padding-top:14px}
.pick h2{font-size:22px}
.frow{flex-direction:column;gap:2px}
.frow dd{text-align:left}
.frow dt{max-width:none}
.tw{display:none}
.stack{display:block}
.myth>li{grid-template-columns:1fr;gap:7px}
.vd{width:auto;justify-self:start}
.fig img{aspect-ratio:4/5;object-fit:cover}
.fig > .pic + figcaption{
  position:static;max-width:none;margin-top:10px;padding:0;border-radius:0;
  background:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:none;color:var(--ink-soft);font-size:16px;line-height:1.5}
.fig > .pic .credit{right:8px;left:auto}
.offer{grid-template-columns:1fr;padding:14px}
.othumb .mc{--ar:16/9}
.othumb>img{aspect-ratio:16/9}
.offer h3{font-size:18px}
.bene li{font-size:15.5px}
.buy{grid-template-columns:1fr;align-items:stretch;gap:12px}
.buy .cta{width:100%;justify-content:center;white-space:normal;text-align:center;
                              padding-inline:16px}
.price.sm{font-size:14.5px}
.compact{grid-template-columns:64px 1fr}
.compact.noimg{grid-template-columns:1fr}
.compact img{width:64px;height:64px}
.compact .side{grid-column:1/-1;justify-content:space-between;align-items:center}
.compact .price b{font-size:22px}
.compact .cta{white-space:nowrap}
.cmp .grid{grid-template-columns:1fr}
.opt .foot .cta{white-space:nowrap}
.art-h{font-size:var(--size-h1-sm)}
.faq h2{font-size:var(--size-h2-sm)}
.faq summary{font-size:16px}
.faq .a{font-size:16px;padding-right:0}
.pc{grid-template-columns:1fr;gap:16px}
.cc{grid-template-columns:1fr}
.fa{grid-template-columns:1fr;gap:13px}
.map, .info{grid-template-columns:1fr}
.pair, .gal{grid-template-columns:1fr}
.sz .n{font-size:11px}
.art-in h2.ah{font-size:var(--size-h2-sm);margin:1.75em 0 .45em}
.art-in h2.ah::before{position:static;display:block;
  width:11px;height:21px;margin:0 0 .34em;
  -webkit-mask-size:11px 21px;mask-size:11px 21px}
.trl-i{grid-template-columns:1fr;gap:11px;padding:11px}
.trl-pic img{aspect-ratio:16/9}
.trl-p{flex-direction:row;align-items:center;
  justify-content:space-between;padding:0;width:100%}
.stp{padding-left:28px}
.stp-f li{width:100%}
.cdata .tw, .sheet .tw{display:block;margin:0;padding:0}
.cdata table, .sheet table{min-width:480px}
.cb{grid-template-columns:1fr auto;grid-template-areas:"l v" "t t";gap:5px 10px}
.cbl{grid-area:l}
.cbv{grid-area:v}
.cbt{grid-area:t}
.ds td:first-child{width:auto}
.maplf-map{height:320px}
.ft-top{grid-template-columns:1fr;gap:20px;align-items:start}
.fbrand{padding:0}
.ft-blurb{border-left:0;padding-left:0}
.ft-cols{grid-template-columns:1fr 1fr;gap:22px}
.ft-mid{grid-template-columns:1fr;gap:20px}
.ft-src{padding:0}
.ft-aff{border-left:0;border-top:1px solid var(--rule);padding:18px 0 0}
.ft-legal{flex-direction:column;align-items:flex-start;gap:12px}
}