/* ============================================================================
   Design tokens - the single source of truth for the template.
   Locked with the owner on 2026-08-31 via the Schriftlabor tuner, judged on
   real article text from /oeffnungszeiten/ at desktop and 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 that is a legal requirement here, not a preference.
     Loading the face from fonts.googleapis.com sends every German visitor's IP
     address to Google before any consent can be collected - the exact setup the
     Landgericht Muenchen penalised in 2022. Owner decision, 2026-08-31: 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, which German prose
     never does, so the real cost is the 20 KB latin file. 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:      18.5px;
  --leading-body:   1.65;
  --measure:        660px;   /* max line length for running prose */
  --space-para:     1.10em;
  --weight-body:    400;

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

  /* Heading scale.
     NOTE: h2 is set explicitly rather than derived from h1. See the warning in
     CHAPTER-PLAN.md Ch 2 - deriving it from a 37px h1 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 locked h1. */
  --size-h2:        26px;
  --size-h3:        21px;
  --size-lede:      21px;    /* the standfirst under h1 */
  --size-small:     16px;    /* captions, meta, footnotes */
  --size-micro:     13.5px;  /* eyebrows, labels, table headers */

  /* Mobile step-down. German compounds are long; the h1 has to shrink or
     "Oeffnungszeiten der Pyramiden von Gizeh" breaks badly at 390px.        */
  --size-h1-sm:     29px;
  --size-h2-sm:     22px;
  --size-body-sm:   17.5px;

  /* ---- Colour -----------------------------------------------------------
     Light only, by owner decision: light hero, light body, light everywhere.
     Neutrals carry a slight warm bias so they read as chosen rather than
     defaulted, and so the limestone photography sits on them without
     clashing.                                                              */

  --paper:          #FEFBF6;   /* page ground - the logo's own cream, so the mark sits
                                  on it seamlessly with no cut-out needed */
  --paper-sunk:     #F7F3EA;   /* alternating section bands */
  --card:           #FFFFFF;   /* cards lift off the cream ground */
  --ink:            #1A2737;   /* body text - the navy from the logo pyramid. 14,6:1 */
  --ink-soft:       #5A6472;   /* secondary text, captions. 5,8:1 */
  --ink-faint:      #8A8F98;   /* meta, disabled - decorative only, never body copy */
  --rule:           #E7E1D6;   /* card borders */
  --rule-soft:      #F0EBE1;   /* internal dividers, table rows */

  --accent:         #B25309;   /* links, eyebrows. Deep rust: unmistakably orange but
                                  dark enough to read as text. 4,9:1 */
  --accent-rgb:     178,83,9;  /* the same colour as a triplet, for the rgba() stops in
                                  the subheading sand trail. Keep in step with --accent. */
  --accent-ink:     #8A3F06;   /* link hover */
  --teal:           #15616D;   /* the secondary accent. Non-commercial notes and
                                  informational callouts only. 6,9: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 NAVY, NOT WHITE. Measured, not guessed:
        #1A2737 on #F2A72A  =  7,44:1  AAA   correct
        #FFFFFF on #F2A72A  =  2,03:1  FAIL  unreadable
     A white label on this amber is the single easiest way to break the button.

     The hierarchy works because the three oranges are separated by lightness:
     the sun amber is the brightest thing on any page, links sit far darker in
     rust, and nothing else is allowed to be amber at all.                    */

  --cta:            #F2A72A;   /* the sun, straight from the logo */
  --cta-hover:      #E09612;
  --cta-ink:        #1A2737;   /* navy label. Never white. */

  /* ---- 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.  */

  /* ---- Diagramme -------------------------------------------------------
     Das Paar ist gegen die Papierflaeche geprueft: OKLab-Abstand 25,1 bei
     normalem Sehen und 19,8 unter Protanopie, Chroma ueber dem Boden, Kontrast
     ueber 3:1. --chart-mute ist der Fuellton der NICHT hervorgehobenen Balken:
     er muss sich von der Bahn abheben, sonst sieht eine Reihe von fuenf Balken
     aus wie vier leere Rinnen und ein voller. Genau das war der Fehler. */
  --chart-warm:     #B25309;
  --chart-cool:     #0B7FA6;
  --chart-mute:     #BFB6A5;
  --chart-track:    #F1EADC;

  --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;

  --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 amber CTA keep its contrast: on bare sand 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. */
#sand{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-bg img{width:100%;height:100%;object-fit:cover;display:block}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(20,29,41,.42) 0%, rgba(20,29,41,.14) 26%,
    rgba(20,29,41,.34) 52%, rgba(20,29,41,.74) 78%, rgba(20,29,41,.92) 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:32px;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:21px;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:24px;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:21px;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:21px;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. 26px sits one
   step above the 21px 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 heading is centred between two sand trails, which is options 6 and 7 of the ten
   the owner reviewed, fused: 6 ran a rule from the last word to the column edge so the
   rule measured the heading, 7 ran a rust line that dissolved rightward like the hero's
   wind. Settings below were chosen in a live tuner and are baked as picked.

   Three things make it behave rather than merely look right:

   1. Two pseudo-elements at flex:1 are equal BY CONSTRUCTION, so the words land on the
      column's centre line without any width being measured or hard-coded.
   2. ::before runs at 270deg, not a mirrored 90deg. Both trails are therefore solid
      where they meet the words and gone at the margin, so the sand reads as streaming
      THROUGH the heading rather than radiating out of it.
   3. align-items:flex-start with a seat of .61em puts the trails on the FIRST line. A
      heading that wraps - three of eight do on the pillar pages - would otherwise float
      them in the gap between its two lines, which reads as a mistake. */
.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;
  display:flex;align-items:flex-start;justify-content:center;text-align:center;gap:18px}
.art-in h2.ah::before,.art-in h2.ah::after{
  content:"";flex:1 1 40px;min-width:30px;height:2px;border-radius:2px;
  margin-top:calc(.61em - 1px)}
.art-in h2.ah::after{background:linear-gradient(90deg,
  rgb(var(--accent-rgb)) 0, rgba(var(--accent-rgb),.62) 34%,
  rgba(var(--accent-rgb),.20) 66%, transparent 100%)}
.art-in h2.ah::before{background:linear-gradient(270deg,
  rgb(var(--accent-rgb)) 0, rgba(var(--accent-rgb),.62) 34%,
  rgba(var(--accent-rgb),.20) 66%, transparent 100%)}
.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{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)}
}
/* ===================== 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: Night Contrast, owner-tuned 2026-09-04 ---- */
.tourbar{position:fixed;left:0;right:0;bottom:0;z-index:60;
  padding:14px 14px calc(14px + env(safe-area-inset-bottom)) 14px;
  background:linear-gradient(180deg,#2A3345,#141C28);color:#fff;
  border-radius:16px 16px 0 0;box-shadow:0 -10px 34px rgba(10,14,20,.35)}
.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:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.tb-im{position:relative;flex:none;width:58px;height:58px;
  border-radius:12px;overflow:hidden;background:#0d131d}
.tb-im img{width:100%;height:100%;object-fit:cover;display:block}
.tb-b{position:absolute;left:14px;top:-9px;background:#F2C14E;color:#141C28;font-size:8.5px;
  font-weight:800;letter-spacing:.05em;padding:2px 9px;border-radius:6px;text-transform:uppercase}
.tourbar .tb-b{position:absolute}
.tb-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.tb-r1{display:flex;align-items:baseline;gap:12px;padding-right:26px}
.tb-r2{display:flex;align-items:center;gap:12px}
.tb-title{flex:1;min-width:0;font-size:13.5px;font-weight:700;line-height:1.25;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-meta{flex:1;min-width:0;display:flex;gap:7px;align-items:center;
  font-size:11px;color:#A8B2C2;white-space:nowrap;overflow:hidden}
.tb-r{font-weight:700;color:#A8B2C2}
.tb-r,.tb-meta .tb-r{color:#A8B2C2}
.tb-star{color:#F2C14E}
.tb-t{color:#7FC79A}
.tb-p{flex:none;font-size:16px;font-weight:800;color:#F2C14E;line-height:1;
  font-variant-numeric:tabular-nums}
.tb-p i{font-style:normal;font-size:10px;font-weight:600;color:#A8B2C2;margin-right:3px}
.tb-cta{flex:none;background:#F2C14E;color:#141C28;font-size:12.5px;font-weight:800;
  padding:8px 14px;border-radius:10px;white-space:nowrap}
.tb-x{position:absolute;top:4px;right:4px;width:30px;height:30px;border:0;background:none;
  color:rgba(255,255,255,.45);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:#141C28;color:#fff;font-weight:800;font-size:12.5px;padding:11px 17px;
  border-radius:999px;cursor:pointer;box-shadow:0 8px 24px rgba(10,14,20,.3)}
body.tb-open{padding-bottom:104px}
@media(max-width:900px){.tb-t{display:none}}
@media(min-width:901px){
  .tourbar{left:auto;right:22px;bottom:22px;width:460px;border-radius:16px;
    padding:14px;box-shadow:0 16px 44px rgba(10,14,20,.4)}
  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:25px}
.faq h2{font-size:21px}
.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;gap:12px}
.art-in h2.ah::before, .art-in h2.ah::after{flex-basis:20px;min-width:16px}
.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}
.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}
}