/* ═══════════════════════════════════════════════════════════════════════════
   Zillertalbahn — Zillertaler Verkehrsbetriebe AG
   Colour and type tokens live in :root; every value below resolves through
   them, so the palette is changed in one place. Palette sampled from the live
   zillertalbahn.at stylesheet (blue #117CC1) and from the Dampfzug press
   photography (carriage red #B8402A).

   Layout and scroll mechanics ported from era-residence.com:
     PHASE A  image translates slowly (~0.18× scroll) to its bottom edge
              content scrolls at 1.0× · counter/rail/nav pinned at 0×
     PHASE B  image stops, zooms from scroll; #after slides up over the hero
   Reference's own numbers: bg box = viewport + 418.5px travel over a 3520px
   pin = 0.119 visual speed; later sections 0.07–0.27; scrub 0.5 lag.
   Type scale: display 12vw / lh .875 / ls -.024em · labels 8.8px / +.048em.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Zillertalbahn palette ───────────────────────────────────────────────
     --brand is the house blue sampled straight off zillertalbahn.at (it is
     also the colour of the swoosh in the logo); --accent is the red of the
     nostalgia-train carriages, sampled from the Schlitters press photo. */
  --brand:#117CC1;            /* ZVB blue */
  --brand-dk:#0C5F94;         /* pressed / hover state for solid fills */
  --brand-lt:#3E9AD6;         /* blue that survives on a dark ground */
  /* #117CC1 is a mid-tone: white on it only reaches 4.49:1, so it cannot carry
     a whole section behind body copy. --brand-deep is the colour field
     (white on it clears 7:1); --brand-txt is the blue for text below ~19px on
     a light ground, where #117CC1 would land just under 4.5:1. */
  --brand-deep:#0B5B8C;
  --brand-txt:#0B5F93;
  --accent:#B8402A;           /* Dampfzug carriage red */
  --accent-rgb:184,64,42;
  --accent-lt:#E1795F;        /* accent on a dark ground */
  --brand-red:var(--accent);  /* legacy alias, kept so older rules resolve */

  --ink:#0C1922;              /* deep blue-black page ground */
  --ink-2:#11242F;            /* raised surface / hero gradient top */
  --ink-rgb:12,25,34;         /* for rgba() on light sections */

  --bone:#FFFFFF;
  --bone-rgb:234,241,246;     /* cool near-white, for rgba() on dark */
  --bone-60:rgba(255,255,255,.8);
  --bone-38:rgba(255,255,255,.45);
  --bone-16:rgba(255,255,255,.18);
  --mauve:#8FA9BD;            /* muted steel blue */
  --wood:var(--accent);       /* legacy alias */
  --sky:#EFF3F6;              /* light panel */
  --ebar-h:4.75rem;           /* Höhe der festen Fahrplanleiste, s. .ebar */
  --brass:var(--accent);      /* legacy alias */

  --f-display:"Outfit","Inter",sans-serif;
  --f-ui:"Outfit","Inter",sans-serif;
  /* Zilla Slab stands in for the reference's Cinzel: Roman capitals read as
     luxury hotel, a slab reads as enamel station signage and timetable print. */
  --f-script:"Zilla Slab",Georgia,serif;

  --fs-display:clamp(1.6rem,5.8vw,5.2rem);
  --fs-script:clamp(1.5rem,6.3vw,5rem);       /* трохи менше, було 7.4vw/5.9rem */
  --fs-label:.5625rem;
  --fs-body:.8125rem;

  --gut:clamp(1.15rem,3.2vw,3rem);
  /* на скільки секція з куполом заходить поверх попередньої. Одне джерело для
     двох місць: негативний margin-top купола (#info) і запас padding-bottom під
     ним (.menus) — інакше зміна одного числа накрила б куполом чужий контент */
  --dome-rise:clamp(6rem,18vw,22rem);
  --nav-h:clamp(8.5rem,13vw,11rem);   /* висота лівого блоку nav: лого + індикатор скролу */
  --svh:100vh;

  --ease:cubic-bezier(.76,0,.24,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  /* CustomEase "Out" з коду референсу (assets.slater.app/…/60900.js:
     CustomEase.create("Out","0.25,1,0.5,1")) — та сама крива, що на hover
     character-flip лінків (initLinkHover, durM=.8s). Попередня версія брала
     їхню криву "In" (0.5,0,0.75,0) — вона за формою ease-in (повільний старт,
     різкий фінал), тому zoom-in картки виглядав як смик. */
  --ease-card:cubic-bezier(.25,1,.5,1);
  --dur-card:.8s;   /* durM з їхнього коду — константа, зарезервована саме під hover-взаємодії */
}

/* driven by hero.js */
@property --pa{syntax:'<number>';inherits:true;initial-value:0}
@property --pb{syntax:'<number>';inherits:true;initial-value:0}
@property --sc{syntax:'<number>';inherits:true;initial-value:1}

*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
  max-width:100%;
  width:100%;
}
body{
  margin:0;background:var(--ink);color:var(--bone);
  font-family:var(--f-ui);font-size:var(--fs-body);font-weight:500;line-height:1.385;letter-spacing:-.024em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  max-width:100%;
  width:100%;
  /* Platz für die feste Fahrplanleiste (.ebar) — ohne ihn läge sie auf dem
     Fussbereich. Der Wert ist die Höhe der Leiste je Stufe. */
  padding-bottom:var(--ebar-h);
}
main{
  overflow-x:hidden;
  max-width:100%;
  width:100%;
}
h1,h2,h3,p,ol,dl{margin:0}
ol{padding:0;list-style:none}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:99}
.skip:focus{left:var(--gut);top:.5rem;padding:.6rem 1rem;background:var(--bone);color:var(--ink)}

.label{
  font-size:var(--fs-label);line-height:1.45;letter-spacing:.048em;
  text-transform:uppercase;font-weight:650;
}

/* roll-up hover — clip on .roll_i so button padding can't leak the copy */
.roll_i{display:block;height:1.15em;overflow:hidden}
.roll_i>span{display:block;height:1.15em;transition:transform .6s var(--ease)}
.roll:hover .roll_i>span,.roll:focus-visible .roll_i>span{transform:translateY(-100%)}

/* ── nav ─────────────────────────────────────────────────────────────────────
   Фіксований на весь екран оверлей (не бар). Лого + індикатор скролу (nav_left)
   і посилання (nav_links) — окремі кутові блоки, завжди на екрані на всіх
   сторінках сайту, незалежно від висоти hero чи довжини сторінки. ──────────── */
.nav{
  position:fixed;inset:0;z-index:40;padding:var(--gut);
  pointer-events:none;
}
.nav_left,.nav_right_actions{pointer-events:auto}

.nav_left{
  position:absolute;top:var(--gut);left:var(--gut);
  display:flex;flex-direction:column;align-items:flex-start;gap:1rem;
}
/* Zwei Marken übereinander: die helle für dunklen Grund, die dunkle für hellen.
   Umgeschaltet wird über .is-onlight, das nav-tone.js setzt — ein Wechsel der
   src würde blinken, eine Überblendung nicht. */
.nav_logo{width:clamp(3.6rem,5.5vw,5.1rem);position:relative;display:block}
.nav_logo img{width:100%;height:auto;display:block}
.nav_logo_i--dark{
  position:absolute;inset:0;opacity:0;
  transition:opacity .35s var(--ease);
}
.nav_logo_i--light{transition:opacity .35s var(--ease)}
.nav_left.is-onlight .nav_logo_i--dark{opacity:1}
.nav_left.is-onlight .nav_logo_i--light{opacity:0}

.nav_right_actions{
  position:absolute;top:var(--gut);right:var(--gut);
  display:flex;align-items:center;gap:1.2rem;
}
/* Als Text gesetzt, nicht als Pille — aber die Trefferfläche muss trotzdem
   greifbar sein: ohne min-height wäre sie exakt die Zeilenhöhe (9px Schrift =
   10px hoch). Gleiche Höhe wie der Burger daneben, unsichtbar, weil weder
   Hintergrund noch Rahmen gesetzt sind. */
.nav_right_actions .btn--solid{
  display:inline-flex;align-items:center;min-height:2.75rem;
  background:transparent;color:var(--bone);border:none;padding:0 .35rem;
  font-size:var(--fs-label);letter-spacing:.048em;text-transform:uppercase;font-weight:650;
  opacity:.85;transition:opacity .3s var(--ease);
}
.nav_right_actions .btn--solid:hover{background:transparent;color:var(--bone);opacity:1}

.burger_btn{
  width:2.75rem;height:2.75rem;border-radius:50%;
  border:1px solid var(--bone-38);background:rgba(var(--ink-rgb),.4);
  backdrop-filter:blur(4px);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  cursor:pointer;transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.burger_btn:hover{border-color:var(--bone);background:var(--brand)}
.burger_btn span{display:block;width:1.15rem;height:2px;background:var(--bone);border-radius:1px}

/* Burger drawer overlay */
.burger_overlay{
  position:fixed;inset:0;z-index:100;
  display:flex;justify-content:flex-end;
  opacity:0;visibility:hidden;
  transition:opacity .4s var(--ease),visibility .4s;
}
.burger_overlay.is-open{opacity:1;visibility:visible}

.burger_backdrop{
  position:absolute;inset:0;background:rgba(var(--ink-rgb),.75);backdrop-filter:blur(8px);
}
.burger_content{
  position:relative;z-index:2;width:min(26rem,85vw);height:100%;
  background:var(--ink);border-left:1px solid var(--bone-16);
  padding:var(--gut) clamp(1.5rem,4vw,3rem);display:flex;flex-direction:column;justify-content:center;
  transform:translateX(100%);transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.burger_overlay.is-open .burger_content{transform:translateX(0)}
.burger_close{
  position:absolute;top:var(--gut);right:var(--gut);
  width:2.5rem;height:2.5rem;font-size:2rem;line-height:1;
  color:var(--bone-60);display:grid;place-items:center;
  transition:color .3s var(--ease);cursor:pointer;
}
.burger_close:hover{color:var(--bone)}
.burger_nav{display:flex;flex-direction:column;gap:1.5rem}
.burger_link{
  font-family:var(--f-display);font-size:clamp(1.25rem,3.2vw,2rem);
  text-transform:uppercase;color:var(--bone);letter-spacing:-.01em;
}

/* ── HERO ────────────────────────────────────────────────────────────────── */
.hero{
  position:relative;z-index:0;background:var(--ink);
  /* висоту (FH+LA+LB) створює сам ScrollTrigger через pin-spacer — тут нічого
     не задаємо, інакше зайвий порожній простір поверх spacer'а */
}
.hero_frame{
  height:var(--svh);
  /* position:fixed застосує сюди сам ScrollTrigger (pin:true) на час скролу;
     clip, НЕ hidden — hidden зробив би предка scroll-контейнером */
  overflow:clip;
  background:linear-gradient(160deg,var(--ink-2) 0%,var(--ink) 100%);
}

/* slow layer. Full width at natural aspect ⇒ taller than the frame; the
   surplus IS the travel distance for phase A. Bottom-anchored origin so the
   phase-B zoom pushes into the food and never exposes an edge. */
.hero_media{
  position:absolute;top:0;left:0;width:100%;
  transform-origin:50% 100%;
  will-change:transform;
}
.hero_img{
  width:100%;height:auto;
  opacity:0;
  will-change:transform,opacity;
}
.nav_left,.nav_links,.hero_eyebrow,.hero_tag,.hero_cta{opacity:0}
body.is-ready .nav_left,body.is-ready .nav_links,body.is-ready .hero_eyebrow,body.is-ready .hero_tag,body.is-ready .hero_cta{opacity:1}

/* fallback where the image is shorter than the viewport (portrait phones):
   no reveal to give, so cover the frame and keep only the phase-B zoom */
.hero--simple .hero_media{height:100%}
.hero--simple .hero_img{height:100%;object-fit:cover;object-position:58% 100%}

.hero_scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(var(--ink-rgb),.74) 0%, rgba(var(--ink-rgb),.32) 26%,
      rgba(var(--ink-rgb),0)   46%, rgba(var(--ink-rgb),0) 78%,
      rgba(var(--ink-rgb),.34) 100%),
    radial-gradient(120% 76% at 16% 26%,rgba(var(--ink-rgb),.28) 0%,rgba(var(--ink-rgb),0) 60%);
}
/* Der Scrim oben lässt das Band von 46–78 % absichtlich frei: im Motiv des
   Referenzdesigns lag dort ein dunkler Berghang. Im Zillertalbahn-Composite ist
   genau dieser Streifen heller Himmel mit Schneegipfeln — weiße Schrift käme
   dort auf 1,6:1 und wäre praktisch unlesbar.

   Diese zweite Ebene deckt deshalb das Titelband ab, blendet sich aber über
   --pa (Fortschritt der Phase A, gesetzt von hero.js) wieder weg: sobald der
   Titel nach oben aus dem Kader gescrollt ist, liegen Zug, Bus und Dampfzug
   ungetrübt frei. Ohne JavaScript bleibt --pa auf 0 — dann bleibt die Abdeckung
   stehen, und der Titel ist in jedem Fall lesbar. */
.hero_scrim::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(var(--ink-rgb),.30) 0%,
    rgba(var(--ink-rgb),.62) 34%,
    rgba(var(--ink-rgb),.62) 66%,
    rgba(var(--ink-rgb),.18) 88%,
    rgba(var(--ink-rgb),0)   100%);
  opacity:clamp(0,calc(1 - var(--pa) * 1.7),1);
}
.hero_cover{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  background:var(--ink-2);will-change:opacity;
}

/* ── hotspots ────────────────────────────────────────────────────────────── */
.pins{
  position:absolute;inset:0;z-index:3;
  opacity:clamp(0,(var(--pa) - .5) * 3.2,1);
  pointer-events:none;
}
.pins.on{pointer-events:auto}
.pin{position:absolute;left:var(--x);top:var(--y);width:0;height:0}
/* counter-scale so markers keep their size through the phase-B zoom */
.pin>*{transform:scale(calc(1 / var(--sc)))}

.pin_dot{
  position:absolute;translate:-50% -50%;
  width:2.5rem;height:2.5rem;border-radius:50%;
  border:1px solid rgba(255,255,255,.75);background:rgba(255,255,255,.10);
  backdrop-filter:blur(2px);
  display:grid;place-items:center;
  transition:background-color .4s var(--ease),border-color .4s var(--ease);
}
.pin_dot::after{
  content:"";width:.4rem;height:.4rem;border-radius:50%;background:#fff;
  transition:transform .4s var(--ease);
}
.pin_dot:hover,.pin_dot:focus-visible{background:rgba(255,255,255,.9);border-color:#fff}
.pin_dot:hover::after,.pin_dot:focus-visible::after{background:var(--ink);transform:scale(1.5)}

/* пульсуюче кільце навколо точки. У референса аналогічний ефект (.pin_bg_pulse)
   керується GSAP-твіном, значення якого не вдалось зняти (кільця неактивні в
   поточній сесії) — тому тривалість/крива тут підібрані власноруч. */
.pin_dot::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(255,255,255,.7);pointer-events:none;
  animation:pinPulse 2.4s cubic-bezier(.4,0,.2,1) infinite;
}
.pin.open .pin_dot::before{animation-play-state:paused;opacity:0}
@keyframes pinPulse{
  0%{transform:scale(1);opacity:.65}
  100%{transform:scale(1.9);opacity:0}
}

.pin_card{
  position:absolute;left:2.25rem;top:-1rem;width:min(20rem,64vw);
  transform-origin:0 0;
  padding:1.25rem 1.35rem 1.35rem;border-radius:3px;
  background:rgba(var(--bone-rgb),.97);color:var(--ink);
  box-shadow:0 1.5rem 3rem rgba(var(--ink-rgb),.3);
  opacity:0;visibility:hidden;transform:scale(.82);
  /* крива й тривалість — реальні значення з референсу: computed transition
     на .floating-tip-card (картка, що з'являється при наведенні на пін) */
  transition:opacity var(--dur-card) var(--ease-card),transform var(--dur-card) var(--ease-card),visibility var(--dur-card);
}
.pin--left .pin_card{left:auto;right:2.25rem;transform-origin:100% 0}
.pin.open .pin_card{opacity:1;visibility:visible;transform:scale(1)}
.pin_card h3{
  font-family:var(--f-display);font-variation-settings:'opsz' 24;font-weight:400;
  text-transform:uppercase;font-size:1.15rem;line-height:1.05;letter-spacing:-.02em;
  margin-bottom:.6rem;padding-right:1.5rem;
}
.pin_card p{font-size:.8125rem;line-height:1.45;color:rgba(var(--ink-rgb),.78)}
.pin_meta{margin-top:.6rem;font-weight:600;color:var(--brand-txt)!important}
.pin_x{
  position:absolute;top:.5rem;right:.6rem;width:1.75rem;height:1.75rem;
  border-radius:50%;display:grid;place-items:center;font-size:1.1rem;line-height:1;
  color:rgba(var(--ink-rgb),.5);
}
.pin_x:hover{color:var(--ink);background:rgba(var(--ink-rgb),.07)}

/* ── normal-speed content layer ──────────────────────────────────────────── */
.hero_content{
  position:absolute;inset:0;z-index:5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  /* центр по всій висоті кадру — nav — це fixed-оверлей поза потоком, тому
     відступ на nav-h тут більше не потрібен (був причиною зсуву вниз) */
  text-align:center;padding:0 var(--gut);
  will-change:transform;
}
.hero_stack{width:100%;max-width:56rem;display:flex;flex-direction:column;align-items:center}

.hero_eyebrow{display:flex;gap:.6em;align-items:center;justify-content:center;color:var(--bone-60)}
.hero_eyebrow i{font-style:normal;color:var(--bone-38)}

/* ── split title animation ────────────────────────────────────────────────── */
.split-word{
  display:inline-block !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  vertical-align:bottom !important;
  margin-right:.22em;
}
.split-word:last-child{margin-right:0}
.split-char{
  display:inline-block !important;
  will-change:transform,opacity;
}

.hero_script .split-word{
  padding:.35em .15em;
  margin:-.35em -.15em;
}

.hero_script{
  font-family:var(--f-script);font-weight:400;
  font-size:var(--fs-script);line-height:.82;
  margin:clamp(1.1rem,3.2vh,2.4rem) 0 0 .06em;color:var(--mauve);   /* більший відступ, було 2.2vh/1.75rem */
}
.hero_display{
  font-family:var(--f-display);font-optical-sizing:auto;
  font-weight:650;text-transform:uppercase;               /* було 400 — занадто тонко для Fraunces у великому кеглі */
  font-size:var(--fs-display);line-height:.875;letter-spacing:-.024em;
  margin-top:.25em;white-space:nowrap;
}
/* the reference's split tagline with a rule between the halves */
.hero_tag{
  margin-top:clamp(1.5rem,3.6vh,2.75rem);                 /* більший відступ, було 2.6vh/2rem */
  display:flex;align-items:center;justify-content:center;gap:clamp(.9rem,2vw,1.7rem);
  font-family:var(--f-display);font-optical-sizing:auto;font-weight:550;
  text-transform:uppercase;letter-spacing:.03em;font-size:clamp(.75rem,1.05vw,.9rem);
  color:var(--bone-60);
}
/* Drei Wörter, zwei Striche — vorher standen hier zwei Wortgruppen, die auf
   schmalen Fenstern in zwei Zeilen umbrachen. Die Striche schrumpfen zuerst
   (flex-shrink), die Wörter bleiben unversehrt und die Zeile bleibt eine. */
.hero_tag{flex-wrap:nowrap}
.hero_tag span{white-space:nowrap}
.hero_tag em{flex:0 1 4.5rem;min-width:1.5rem;height:1px;background:var(--bone-38)}

.hero_cta{display:flex;gap:.85rem;flex-wrap:wrap;justify-content:center;margin-top:clamp(1.75rem,4.2vh,3rem)}   /* більший відступ, було 3vh/2.25rem */
.btn{
  display:inline-block;padding:.9em 1.5em;border:1px solid transparent;border-radius:2px;   /* трохи менше, було 1.05em 1.7em */
  font-size:var(--fs-label);letter-spacing:.048em;text-transform:uppercase;font-weight:700;
  transition:background-color .45s var(--ease),border-color .45s var(--ease),color .45s var(--ease);
}
.btn--solid{background:var(--bone);color:var(--ink)}
.btn--solid:hover{background:var(--brand);color:var(--bone)}
.btn--ghost{border-color:var(--bone-38);color:var(--bone)}
.btn--ghost:hover{border-color:var(--bone);background:rgba(var(--bone-rgb),.08)}

/* ── nav_scroll — індикатор скролу ────────────────────────────────────────── */
.nav_scroll{display:flex;flex-direction:column;align-items:flex-start;gap:.65rem}
.nav_count{
  font-family:var(--f-display);font-variation-settings:'opsz' 16;color:var(--bone);
  font-size:1.5rem;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.nav_rail{display:block;width:1px;height:50vh;background:var(--bone-16);position:relative;overflow:hidden}
.nav_rail i{
  position:absolute;top:0;left:0;right:0;display:block;height:40px;background:var(--bone);
  will-change:transform;
}
.nav_word{writing-mode:vertical-rl;color:var(--bone-60);transition:opacity .5s var(--ease)}

/* ── Kopfzeile auf hellem Grund ───────────────────────────────────────────────
      Die Kopfzeile liegt fest über der Seite und ist durchgehend hell gesetzt —
      über den hellen Abschnitten stand damit weiss auf weiss. nav-tone.js misst,
      was gerade darunter liegt, und setzt .is-onlight; hier steht nur, wie es
      dann aussieht. Die Leiste bekommt einen eigenen Schalter, weil sie 50vh
      hoch ist und über einer anderen Sektion enden kann als das Logo. ───────── */
.nav_count,.nav_word{transition:color .35s var(--ease)}
.nav_left.is-onlight .nav_count{color:var(--ink)}
.nav_left.is-onlight .nav_word{color:rgba(var(--ink-rgb),.62)}

.nav_rail,.nav_rail i{transition:background-color .35s var(--ease)}
.nav_rail.is-onlight{background:rgba(var(--ink-rgb),.18)}
.nav_rail.is-onlight i{background:var(--ink)}

.nav_right_actions .btn--solid,.burger_btn,.burger_btn span{
  transition:color .35s var(--ease),background-color .35s var(--ease),border-color .35s var(--ease);
}
.nav_right_actions.is-onlight .btn--solid{color:var(--ink);opacity:1}
.nav_right_actions.is-onlight .btn--solid:hover{color:var(--brand-deep)}
.nav_right_actions.is-onlight .burger_btn{
  border-color:rgba(var(--ink-rgb),.28);background:rgba(var(--bone-rgb),.55);
}
.nav_right_actions.is-onlight .burger_btn span{background:var(--ink)}
.nav_right_actions.is-onlight .burger_btn:hover{border-color:var(--brand-deep);background:var(--brand)}
.nav_right_actions.is-onlight .burger_btn:hover span{background:var(--bone)}

/* ── AFTER — rides up over the pinned hero ──────────────────────────────── */
.after{
  position:relative;z-index:10;width:100%;
  margin-top:calc(var(--svh) * -1);       /* provisional; hero.js sets exact px */
  background:var(--sky);color:var(--ink);
  padding:0 var(--gut) clamp(4rem,10vh,8rem);
  /* купол: два кутові радіуси по 50vw у сумі точно = ширині секції (100vw),
     тож дуги сходяться рівно в центрі без зламу — справжній півкруг, а не
     плаский eліпс. Довжина в vw, не % — % рахувався б від власної (величезної)
     висоти секції і зламав би форму. */
  border-radius:50vw 50vw 0 0;
}
.after_arc{
  margin:0 auto;max-width:64rem;padding-top:clamp(.5rem,1.5vw,1.5rem);
  transform:translateY(100px);
}
.after_arc svg{width:100%;height:auto;overflow:visible}
.after_arc text{
  fill:var(--ink);font-family:var(--f-display);font-variation-settings:'opsz' 40;
  font-size:52px;text-transform:uppercase;letter-spacing:.06em;
}

/* ── after_deco — заповнює простір, доки купол (border-radius:50vw) ще
      видимий; вимірюється у vw, щоб лишатись пропорційною радіусу купола
      на будь-якій ширині екрана ─────────────────────────────────────────── */
.after_deco{
  margin-top:5vw;display:flex;flex-direction:column;align-items:center;gap:clamp(1.5rem,4vw,3rem);
}
.after_deco_row{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(.9rem,2vw,1.6rem);color:rgba(var(--ink-rgb),.5);
  width:100%;max-width:32rem;
}
.after_deco_row .label{flex:1 1 0;color:rgba(var(--ink-rgb),.72)}
.after_deco_row .label:first-child{text-align:right}
.after_deco_row .label:last-child{text-align:left}
/* два декоративні мотиви секції — ромб-розділювач і вертикальна волосінь.
   Другі імена (.deco_mark/.deco_line) — щоб той самий мотив можна було взяти
   в іншу секцію (#reinheit) без копіювання значень. Висота волосіні там своя,
   через локальний перебив. */
.after_deco_mark,.deco_mark{
  width:.45rem;height:.45rem;flex:none;
  border:1px solid rgba(var(--ink-rgb),.4);transform:rotate(45deg);
}
.after_deco_line,.deco_line{width:1px;height:clamp(5rem,13vw,10rem);background:rgba(var(--ink-rgb),.18)}
.after_deco_sub{
  /* .55 measured 3.86:1 on --sky at 14px — raised to clear 4.5:1 */
  font-family:var(--f-display);font-optical-sizing:auto;font-weight:550;
  text-transform:uppercase;letter-spacing:.03em;font-size:clamp(.75rem,1.05vw,.9rem);
  color:rgba(var(--ink-rgb),.75);text-align:center;line-height:1.5;
}

/* ── acols — асиметричний колонковий шаблон із референсу ────────────────────
      Виміряно на референсі: широка колонка — порожній канал — така сама широка
      колонка, у пропорції 1000 : 500 : 1000, тобто 40% : 20% : 40%. Сітка на
      10 колонок дає цю пропорцію РІВНО цілими спанами: колонки 1–4 (40%) ·
      канал 5–6 (20%) · колонки 7–10 (40%). (На 12 колонках цілими спанами така
      пропорція не виражається — вийшло б 41.7 / 16.7 / 41.7, тобто канал на
      чверть вужчий за референс, тому саме 10.)
      Контент ніколи не займає всю ширину — тільки один із двох крайніх блоків,
      тож порожній канал тримає асиметрію на будь-якій ширині екрана без жодного
      фіксованого px.
      Ритм — почерговий (right → left → right → left → right) із вертикальним
      перекриттям --stagger: сусідні блоки заходять один одному «за плече».
      Перекриття зроблене негативним margin-top: він зменшує висоту власного
      рядка, тому всі наступні рядки підтягуються вгору, а сам блок виступає
      над своїм рядком — без absolute і без transform (тобто потік і висота
      секції лишаються коректними). Колізії немає: блоки, що перекриваються по
      вертикалі, стоять у різних колонках і горизонтально не перетинаються. */
.acols{
  /* --stagger керує і перекриттям сусідніх блоків, і порожнечею ВСЕРЕДИНІ
     колонки: між двома лівими блоками стоїть рядок правого, тому
     вертикальний просвіт у колонці = висота плитки − 2 × stagger. Отже
     stagger і просвіт — обернені: просвіт = висота_фото + 2×висота_підпису
     − 2×stagger. Тому "більший просвіт" = МЕНШИЙ stagger (і, відповідно,
     менше перекриття з правою колонкою — це та сама одна величина).
     Форма calc(6vw + 2.4rem), а не чисті vw: підпис має фіксовану висоту, тому
     лише мішана формула тримає просвіт у стабильній пропорції до фото
     (≈0.6 його висоти) на всіх ширинах, а не лише на одній.
     Історія: 5vw (≈0.7 висоти фото) → 11vw (≈0.34) → 13vw (≈0.3) →
     тепер ≈0.6, тобто вдвічі більший просвіт. */
  --stagger:clamp(1.25rem,calc(6vw + 2.4rem),15rem);
  margin-top:clamp(3rem,7vw,6rem);
  display:grid;grid-template-columns:repeat(10,1fr);align-items:start;
}
.acols_i{grid-column:1/5}        /* ліва широка колонка — 40% */
.acols_i--r{grid-column:7/11}    /* права широка колонка — 40% */
/* кожен блок — у власному рядку. Без цього auto-placement пакує лівий і правий
   блоки в ОДИН рядок (по колонках вони не конфліктують), і ритм виходить
   симетричний «пліч-о-пліч» замість почергового зигзагу референсу.
   Додається блок у секцію → дописати йому номер рядка тут. */
.acols_i:nth-child(1){grid-row:1}
.acols_i:nth-child(2){grid-row:2}
.acols_i:nth-child(3){grid-row:3}
.acols_i:nth-child(4){grid-row:4}
.acols_i:nth-child(5){grid-row:5}
.acols_i:nth-child(6){grid-row:6}
.acols_i+.acols_i{margin-top:calc(var(--stagger) * -1)}

/* ── lead — заголовок + текст рівно як на референсі: великий display-заголовок
      на всю ширину колонки (перший рядок із відступом — деталь референсу),
      а короткий абзац — лише в правій частині тієї ж колонки, вирівняний по
      її правому краю. Довгий суцільний абзац переписано в цю пару. ───────── */
.lead{
  grid-column:5/11;
  display:grid;grid-template-columns:repeat(5,1fr);row-gap:clamp(1.5rem,4.5vw,4.5rem);
}
@media (max-width:56rem){
  .lead{grid-column:1/-1}
}
.lead_h{
  grid-column:1/-1;color:var(--ink);
  font-family:var(--f-display);font-variation-settings:'opsz' 40;font-weight:500;
  font-size:clamp(1.35rem,2.7vw,2.9rem);line-height:1.06;letter-spacing:-.008em;
  text-transform:uppercase;
}
/* 2/-1 = 80% ширини колонки; правий край збігається з правим краєм заголовка */
.lead_p{grid-column:2/-1;color:rgba(var(--ink-rgb),.72);font-size:.9375rem;line-height:1.55}
@media (min-width:64rem){
  .lead_h{padding-left:3.2em}
}

.tile{display:block}   /* заокруглення прибрано — референс: гострі кути */
/* display:block обовʼязковий: на inline-елементі aspect-ratio не діє взагалі,
   тому висота бралася з власних пропорцій картинки (3/2), а не з заданої */
.tile_img{display:block;position:relative;aspect-ratio:4/3;overflow:clip;background:var(--ink)}
.tile_img img{width:100%;height:100%;object-fit:cover}   /* без hover-анімації самого фото */

/* ── Film in der Kachel ───────────────────────────────────────────────────────
      Der Film liegt deckungsgleich über dem Standbild, das aus seinem ersten
      Frame stammt. Beide werden mit object-fit:cover in denselben 4:3-Ausschnitt
      geschnitten (das Material ist 16:9), also sitzt beim Einblenden nichts um
      ein Pixel versetzt — der Übergang ist unsichtbar.

      Sichtbar wird der Film erst, wenn er wirklich läuft: tile-video.js setzt
      .is-playing, sobald das erste Bild dekodiert ist. Ohne diese Bedingung
      zeigte sich beim ersten Zeigen kurz ein schwarzes Feld, solange der Film
      noch lädt (preload="none" — vorher wird kein Byte geholt). ──────────────*/
.tile_vid{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease);
}
.tile_vid.is-playing{opacity:1}

/* ── tile_ring — кільце з підписом усередині фото: їде за курсором і видиме
      лише під час hover (як на референсі). Анімується transform-ом (translate),
      тобто композитором, без layout; плавне "доганяння" курсора дає сам
      transition на translate — власний rAF-lerp не потрібен.
      Якір — центр фото (left/top:50%), а JS пише у --rx/--ry ВІДХИЛЕННЯ курсора
      від цього центру. Тому дефолт (--rx/--ry = 0, тобто без JS або до першого
      руху мишею, включно з появою по focus-visible) — це рівний центр фото.
      Відсоток у translate рахується від САМОГО кільця, тож -50%/-50% центрують
      його на якорі — мішати туди позицію курсора у % не можна, це і давало б
      куток замість центру.
      Окремі властивості translate/scale (а не transform) — щоб JS (позиція) і
      CSS (поява/масштаб) не перезаписували одне одного.
      overflow:clip на .tile_img обрізає кільце по краю фото — воно ніколи не
      виходить за межі картинки. ──────────────────────────────────────────── */
.tile_ring{
  position:absolute;left:50%;top:50%;z-index:1;pointer-events:none;
  width:clamp(5.5rem,8.5vw,9rem);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(var(--bone-rgb),.8);
  display:grid;place-items:center;padding:0 .9rem;
  color:var(--bone);text-align:center;
  font-size:var(--fs-label);letter-spacing:.048em;text-transform:uppercase;font-weight:650;line-height:1.4;
  translate:calc(var(--rx,0px) - 50%) calc(var(--ry,0px) - 50%);
  scale:.82;opacity:0;
  transition:translate .45s var(--ease-out),scale .45s var(--ease-out),opacity .3s var(--ease-out);
}
.tile:hover .tile_ring,.tile:focus-visible .tile_ring{scale:1;opacity:1}
/* стрибок кільця на місце курсора при вході, без проїзду з попередньої точки */
.tile_ring.is-jump{transition:scale .45s var(--ease-out),opacity .3s var(--ease-out)}
/* тач: hover-стану немає — кільце нічого не додає, лише блимало б після тапу,
   а опис має бути видимий завжди, інакше на телефоні до нього не дістатись */
@media (hover:none){
  .tile_ring{display:none}
  .tile_desc>span{clip-path:none;transition:none}
}

/* підпис — плоский текст під картинкою, без фону/тіні/накладання: у
   референсі жодна підпис-плитка не має тіні чи боксу поверх фото */
.tile_label{
  display:block;margin-top:1rem;color:var(--ink);
  font-size:1.3rem;letter-spacing:.02em;text-transform:uppercase;font-weight:600;
}

/* ── tile_desc — опис під підписом, з'являється лише на hover ───────────────
      Маска: зовнішній span має висоту тексту й overflow:clip, внутрішній
      живе у потоці (тому висота зарезервована завжди — hover нічого не
      штовхає) і виїжджає translate-ом з-під нижнього краю маски.
      Mask-in і mask-out — різні: transition на базовому стані описує ВИХІД
      (швидше, симетрична крива), transition у :hover — ВХІД (довше, ease-out).
      Через це поява читається як витягування тексту, а зникання — як швидке
      прибирання під маску. ────────────────────────────────────────────────── */
/* margin-left:20% — той самий лівий відступ, що й у описі під заголовком
   (.lead_p стоїть у 2-й з 5 колонок своєї колонки, тобто теж 20%).
   34ch замість 42ch — щоб довший текст лягав у 3 рядки, а не в 2. */
.tile_desc{display:block;overflow:clip;margin-top:.55rem;margin-left:20%;max-width:34ch}
/* Сам ТЕКСТ не рухається взагалі — рухається лише край маски (clip-path):
   inset(0 100% 0 0) = обрізано праворуч повністю (тексту не видно) →
   inset(0 0 0 0) = маска зійшла, текст відкритий. Це і є "штора", що
   з'їжджає з нерухомого тексту; жодного translate на тексті. */
.tile_desc>span{
  display:block;color:rgba(var(--ink-rgb),.72);font-size:.875rem;line-height:1.5;
  clip-path:inset(0 100% 0 0);
  transition:clip-path .4s var(--ease);        /* mask-out: штора накриває */
}
.tile:hover .tile_desc>span,.tile:focus-visible .tile_desc>span{
  clip-path:inset(0 0 0 0);
  transition:clip-path .6s var(--ease-out);    /* mask-in: штора відкриває */
}

/* ── Rezepte — по центру секції, з центрованим описом під кнопкою ─────────── */
.acols_i--mid{
  grid-column:1/-1;                     /* на всі 10 колонок, а не в одну з двох */
  display:grid;justify-items:center;text-align:center;
}
.rezepte_desc{
  margin-top:clamp(1.25rem,2.4vw,2.25rem);max-width:36ch;
  color:rgba(var(--ink-rgb),.72);font-size:.9375rem;line-height:1.55;
}
.rezepte_kicker{margin-top:clamp(1rem,1.8vw,1.75rem);color:rgba(var(--ink-rgb),.5)}

/* кругла кнопка "Rezepte" — окремий елемент, не плитка з фото */
.round-btn{
  position:relative;
  width:clamp(9rem,16vw,13rem);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;
  font-size:var(--fs-label);letter-spacing:.048em;text-transform:uppercase;font-weight:650;color:var(--ink);
}
.round-btn_ring{
  position:absolute;inset:0;border-radius:50%;border:1px solid rgba(var(--ink-rgb),.32);
  transition:border-color .4s var(--ease),transform .4s var(--ease);
}
.round-btn .roll_i{position:relative;z-index:1}   /* інакше кільце (position:absolute) намалюється над текстом */
.round-btn:hover .round-btn_ring,.round-btn:focus-visible .round-btn_ring{border-color:var(--ink);transform:scale(1.04)}

/* пульс — той самий "вказівник", що на пінах у hero (.pin_dot::before): та сама
   тривалість 2.4s і та сама крива. Відрізняється лише масштаб: пін — 2.5rem на
   фото (scale 1.9 = +30px), а кругла кнопка ~13rem, і scale 1.9 роздуло б кільце
   майже на 200px у сусідній контент, тому 1.22.
   ОДНЕ правило на всі круглі кнопки сайту (Rezepte + Catering) — щоб пульс не
   розʼїхався по копіях; різниться лише колір кільця, бо контекст різний:
   ink на світлій секції, bone на фото. */
.round-btn::before,.cat_cta::before{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  border:1px solid currentColor;
  animation:btnPulse 2.4s cubic-bezier(.4,0,.2,1) infinite;
}
.round-btn::before{color:rgba(var(--ink-rgb),.32)}
.cat_cta::before{color:rgba(var(--bone-rgb),.45)}
/* на hover пульс заважає — там уже своя реакція кільця (scale 1.04) */
.round-btn:hover::before,.round-btn:focus-visible::before,
.cat_cta:hover::before,.cat_cta:focus-visible::before{animation-play-state:paused;opacity:0}
@keyframes btnPulse{
  0%{transform:scale(1);opacity:.55}
  100%{transform:scale(1.22);opacity:0}
}

/* світлий варіант тієї самої круглої кнопки — для темних секцій. Мусить стояти
   ПІСЛЯ .round-btn і .round-btn::before: специфічність однакова (0,1,0), тому
   вирішує порядок — раніше правило стояло вище й ink просто перебивав bone. */
.round-btn--light{color:var(--bone)}
.round-btn--light .round-btn_ring{border-color:rgba(var(--bone-rgb),.42)}
.round-btn--light:hover .round-btn_ring,
.round-btn--light:focus-visible .round-btn_ring{border-color:var(--bone)}
.round-btn--light::before{color:rgba(var(--bone-rgb),.42)}

/* вузькі екрани: асиметрія й перекриття не мають сенсу — один стовпчик на всю
   ширину, звичайний вертикальний ритм */
@media (max-width:56rem){
  .acols{--stagger:0px;row-gap:clamp(2rem,7vw,3.5rem)}
  .acols_i,.acols_i--r{grid-column:1/-1}
  .lead_p{grid-column:1/-1}
}

/* ── pure (Reinheit) — біла секція з відео-фоном ────────────────────────────
      Композиція з референсу: капс-eyebrow → центрований display-заголовок →
      центрований текст → сітка "frei von"-значків замикає композицію (замість
      декоративного ромба з референсу: тут цю роль виконує змістовний блок).
      isolation:isolate — щоб z-index відео не конфліктував із фіксованим nav. */
.pure{
  position:relative;isolation:isolate;overflow:clip;
  background:#fff;color:var(--ink);
  min-height:100svh;
  padding:clamp(6rem,20vh,14rem) var(--gut) clamp(9rem,20vw,22rem);
  display:grid;align-content:center;
}
/* ЦЕЙ блок і центрує вміст. Без нього (був просто div без стилів) центрованим
   виходив лише сам wrapper, а його діти — ліворуч у ньому: eyebrow і абзаци
   стояли зі зсувом вліво, і центрованим виглядав тільки заголовок, бо мав
   власний text-align. */
.pure_in{
  display:grid;justify-items:center;text-align:center;
  width:100%;max-width:82rem;margin-inline:auto;
}
/* відео — фон, не контент: без контролів, без фокуса, під вмістом.
   Не inset:0 + cover! Секція майже завжди вища за 16/9, і тоді cover обрізав би
   кадр ПО БОКАХ — тобто саме там, де корова і свині (на 1585×1148 це -228px з
   кожного боку). Тому відео — смуга на всю ширину, прибита до низу, з власною
   пропорцією 16/9: кадр не ріжеться ніколи, зверху лишається біле поле, яке
   збігається з фоном секції, а якщо вʼюпорт нижчий за смугу — overflow:clip
   зрізає верх кадру, де все одно біле небо. */
/* У самому файлі відео є темна кайма: заміряно по кадру через canvas —
   верхні 5px ≈ яскравість 21 (майже чорні) і 3 крайні лівих стовпці темні.
   Саме ця кайма й читалась як тонка темна лінія через увесь екран.
   Тому: бока й низ смуги виносяться ЗА межі секції (overflow:clip їх зрізає),
   а верх зрізається clip-path. Зрізи не видно — навколо все одно білий фон
   секції, який дорівнює білому небу в кадрі. */
.pure_bg{
  position:absolute;left:-1rem;bottom:-1rem;z-index:-1;
  width:calc(100% + 2rem);height:auto;aspect-ratio:16/9;
  clip-path:inset(.75rem 0 0 0);
  pointer-events:none;
}
.pure_k{color:rgba(var(--ink-rgb),.8)}
/* Пропорції знято з референсу (2000px vp): заголовок ≈50px (2.5vw) при мірі
   ≈54vw — тобто НЕ гігантський кегль у вузьку колонку, а середній у широку. */
.pure_h{
  margin-top:clamp(1.25rem,2.3vw,2.75rem);max-width:34ch;
  font-family:var(--f-display);font-variation-settings:'opsz' 40;font-weight:500;
  font-size:clamp(1.5rem,2.6vw,3.4rem);line-height:1.06;letter-spacing:-.012em;
  text-transform:uppercase;
}
/* декор між заголовком і сіткою — той самий стек, що в after_deco:
   рядок капс-слів із ромбами-розділювачами, під ним вертикальна волосінь.
   Волосінь тут коротша за ту в #after: там вона тримає великий порожній простір
   під куполом, тут — лише пауза між заголовком і сіткою. */
.pure_deco{
  margin-top:clamp(1.75rem,4vw,3.5rem);
  display:flex;flex-direction:column;align-items:center;gap:clamp(1.25rem,3vw,2.25rem);
}
.pure_deco_row{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:clamp(.9rem,2vw,1.6rem);color:rgba(var(--ink-rgb),.5);
}
.pure_deco_row .label{color:rgba(var(--ink-rgb),.72)}
.pure_deco .deco_line{height:clamp(2.5rem,6vw,4.5rem)}

/* міра ширша за референсну (22rem → 40rem): тут два змістових абзаци, а не
   один короткий підпис, і вузька колонка робила з них довгий стовпчик */
.pure_c{
  margin-top:clamp(2.25rem,5vw,4.5rem);max-width:min(100%,40rem);
  display:grid;gap:1rem;
  color:rgba(var(--ink-rgb),.72);font-size:.9375rem;line-height:1.6;
}

/* ── frei — сітка "frei von"-значків: 3 в рядок × 2 рядки, як у клієнтському
      макеті зі значками. Ширина збігається з мірою опису під нею (40rem), тому
      обидва блоки стоять в одній вертикальній колоні. На вузькому екрані —
      2 колонки, бо три підписи на кшталт "Gentechnik frei" там не вміщаються. */
.frei{
  list-style:none;margin:clamp(2rem,4.5vw,4rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.75rem,3.5vw,2.75rem) clamp(1.5rem,3vw,2.5rem);
  width:100%;max-width:min(100%,40rem);
}
@media (min-width:30rem){.frei{grid-template-columns:repeat(3,minmax(0,1fr))}}
.frei_i{display:grid;justify-items:center;gap:.7rem;color:var(--ink)}
.frei_i svg{
  width:clamp(1.6rem,2.3vw,2.1rem);height:auto;
  fill:none;stroke:currentColor;stroke-width:1.15;
  stroke-linecap:round;stroke-linejoin:round;
  color:rgba(var(--ink-rgb),.62);
}
/* риска "frei von" — трохи товща й темніша за сам предмет, щоб читалась
   як окремий знак, а не як частина малюнка */
.frei_i .frei_slash{stroke-width:1.4;stroke:rgba(var(--ink-rgb),.85)}
.frei_i .label{color:rgba(var(--ink-rgb),.72);letter-spacing:.06em}

/* ── cat (Catering) — клон композиції референсу ──────────────────────────────
      Сітка 2×3 розкладає три кутові блоки так само, як у референсі:
        ряд 1 / колонка 2 → список-перемикач (праворуч, під фіксованим nav)
        ряд 3 / колонка 1 → опис (знизу-ліворуч)
        ряд 3 / колонка 2 → кругла CTA (знизу-праворуч)
      padding-top обраний так, щоб список починався НИЖЧЕ посилань фіксованого
      nav — вони теж у правому верхньому куті. ──────────────────────────────── */
.cat{
  position:relative;isolation:isolate;overflow:clip;
  min-height:100svh;color:var(--bone);background:var(--ink);
  padding:clamp(9rem,17vh,12rem) var(--gut) clamp(2.5rem,7vh,5rem);
  display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr auto;
  gap:clamp(2rem,5vh,4rem) clamp(1.5rem,4vw,4rem);
}

/* фото: три шари один над одним, активний проявляється + доїжджає з масштабу
   (як на референсі — не різкий cut, а мʼяка зміна кадру) */
.cat_media{position:absolute;inset:0;z-index:-1}
.cat_img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.045);
  transition:opacity .9s var(--ease-out),transform 1.6s var(--ease-out);
}
.cat_img.is-on{opacity:1;transform:scale(1)}
/* фото світлі (білі скатертини) — без цього градієнта біла типографіка на них
   просто зникає; знизу темніше, бо там найбільший блок тексту */
.cat_scrim{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(var(--ink-rgb),.78) 0%,rgba(var(--ink-rgb),.42) 45%,rgba(var(--ink-rgb),.34) 100%);
}

.cat_nav{grid-area:1/2;justify-self:end;display:grid;gap:clamp(.9rem,2vw,1.6rem);justify-items:start}
.cat_k{color:rgba(var(--bone-rgb),.5)}
.cat_tabs{list-style:none;margin:0;padding:0;display:grid;gap:clamp(.15rem,.4vw,.4rem);justify-items:start}
.cat_tab{
  position:relative;display:block;padding:.1em 0;text-align:left;cursor:pointer;
  font-family:var(--f-display);font-variation-settings:'opsz' 40;font-weight:500;
  font-size:clamp(1.05rem,1.75vw,1.85rem);line-height:1.2;letter-spacing:.008em;
  text-transform:uppercase;color:rgba(var(--bone-rgb),.42);
  transition:color .45s var(--ease);
}
.cat_tab:hover{color:rgba(var(--bone-rgb),.78)}
.cat_tab.is-on{color:var(--bone)}
/* волосінь ліворуч від активного пункту — деталь референсу */
.cat_tab.is-on::before{
  content:"";position:absolute;left:-.7em;top:.24em;bottom:.24em;width:1px;background:currentColor;
}

/* опис: великий текст статичний, а підписи-відлуння стоять усі в ОДНІЙ клітинці
   сітки — тому перемикання не змінює висоту блоку й нічого не штовхає */
.cat_copy{grid-area:3/1;align-self:end;display:grid;max-width:min(100%,44rem)}
.cat_labels{display:grid;margin-bottom:clamp(.9rem,2vw,1.5rem)}
.cat_lab{grid-area:1/1;color:rgba(var(--bone-rgb),.6);opacity:0;transition:opacity .45s var(--ease)}
.cat_lab.is-on{opacity:1}
.cat_t{
  font-family:var(--f-display);font-variation-settings:'opsz' 40;font-weight:500;
  font-size:clamp(1.15rem,2.1vw,2.2rem);line-height:1.12;letter-spacing:-.008em;
  text-transform:uppercase;
}

/* кругла CTA — світлий двійник .round-btn: та сама геометрія, інший контекст
   кольору (на фото, а не на світлій секції), текст ліворуч як у референсі */
/* текст: блок по центру кола (justify-items:center), але вирівняний ЛІВОРУЧ
   у собі — тому при переносі на два рядки другий не з'їжджає до центру */
.cat_cta{
  grid-area:3/2;justify-self:end;align-self:end;
  position:relative;width:clamp(9.5rem,17vw,15rem);aspect-ratio:1;border-radius:50%;
  display:grid;place-content:center;justify-items:center;text-align:left;
  padding-inline:clamp(1.2rem,2.5vw,2rem);
  margin-top:clamp(5rem,12vh,9rem) !important;
  transform:translateY(clamp(3rem,6vh,5rem));
  font-size:var(--fs-label);letter-spacing:.048em;text-transform:uppercase;font-weight:650;
  color:var(--bone);
}
.cat_cta_ring{
  position:absolute;inset:0;border-radius:50%;border:1px solid rgba(var(--bone-rgb),.45);
  transition:border-color .4s var(--ease),transform .4s var(--ease);
}
.cat_cta .roll_i{position:relative;z-index:1}
.cat_cta:hover .cat_cta_ring,.cat_cta:focus-visible .cat_cta_ring{border-color:var(--bone);transform:scale(1.04)}

/* вузькі екрани: три кутові блоки не вміщаються по колонках — один потік */
@media (max-width:56rem){
  .cat{grid-template-columns:1fr;grid-template-rows:auto 1fr auto auto;padding-top:clamp(7rem,15vh,10rem)}
  .cat_nav{grid-area:1/1;justify-self:start}
  .cat_copy{grid-area:3/1}
  .cat_cta{grid-area:4/1;justify-self:start;margin-top:clamp(1.5rem,4vh,2.5rem)}
}

/* ── menus (Mittagstisch) — картки меню з менеджера меню ────────────────────
      Секція темна (як решта сайту), самі аркуші — білі A4: вони й працюють як
      "папір на столі". Розкладка карток — flex, а не auto-fit grid: меню може
      бути два або пʼять, і flex-центрування тримає їх однакового розміру за
      будь-якої кількості, тоді як auto-fit розтягував би два аркуші на всю
      ширину. ───────────────────────────────────────────────────────────────── */
/* padding-bottom містить --dome-rise: стільки ж «з'їдає» купол наступної
   секції (#info), який лежить поверх цієї — без запасу він накрив би низ форми */
/* z-index нижчий за #info: секція піниться (ScrollTrigger робить її fixed), і без
   явного порядку купол #info міг би поїхати ПІД нею замість поверх */
.menus{
  position:relative;z-index:1;
  background: linear-gradient(135deg, var(--ink) 0%, var(--brand) 60%, var(--ink-2) 100%);
  border-top: 1px solid rgba(var(--accent-rgb),0.35);
  padding: clamp(4rem,12vh,10rem) var(--gut) calc(var(--dome-rise) + clamp(4rem, 8vw, 8rem));
}
.menus_k{color:var(--bone-38)}
.menus_h{
  margin-top:clamp(1.25rem,2.4vw,2.5rem);
  font-family:var(--f-display);font-variation-settings:'opsz' 40;font-weight:400;
  font-size:clamp(1.6rem,3.4vw,3.1rem);line-height:1.04;letter-spacing:-.022em;
}
.menus_lead{
  margin-top:clamp(1.25rem,2.4vw,2rem);
  font-family:var(--f-display);font-optical-sizing:auto;font-weight:550;
  text-transform:uppercase;letter-spacing:.03em;
  font-size:clamp(.75rem,1.05vw,.9rem);color:var(--bone-60);line-height:1.5;
}
.menus_c{
  margin-top:clamp(1.5rem,3vw,2.5rem);
  color:var(--bone-60);font-size:.9375rem;line-height:1.6;
}

/* ── menus layout ────────────────────────────────────────────────────────── */
@media (min-width: 56.01rem){
  .menus .acols{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    column-gap:clamp(2rem,4vw,5rem);
    align-items:start;
    row-gap:1.25rem;
    --stagger:0px;
  }
  .menus .acols_i+.acols_i{margin-top:0 !important}
  .menus_head{grid-column:1/7 !important;grid-row:1 !important;padding-left:clamp(1.5rem,5vw,6rem);padding-right:1rem}
  .menus_form{grid-column:7/13 !important;grid-row:1 !important;margin-top:0 !important}
  .menus_cta{
    grid-column:1/5 !important;grid-row:3 !important;
    justify-self:center !important;
    margin-top:1.5rem !important;
    transform:none !important;
  }
}

/* меню — один аркуш на всю ширину лівої колонки (їх може бути й кілька:
   тоді вони стають одне під одним, тому це grid, а не окремий випадок).
   padding-left відсуває аркуш від лівого краю: там висить фіксований nav
   (лого + лічильник + рейка), і без відступу він лягав просто на меню. */
.menus_grid{
  display:grid;gap:clamp(2rem,5vw,4rem);width:100%;
  padding-left:clamp(1.5rem,7vw,8rem);
}
.mcard{width:100%}
/* кнопка-обкладинка: сам аркуш і є вміст кнопки, тому в неї немає ні фону, ні
   падінгів — лише тінь і підйом на hover */
.mcard_face{
  display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;
  box-shadow:0 1rem 2.5rem rgba(var(--ink-rgb),.45);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out);
}
.mcard_face:hover,.mcard_face:focus-visible{
  transform:translateY(-.5rem);box-shadow:0 1.6rem 3.5rem rgba(var(--ink-rgb),.55);
}
.mcard_face img{width:100%;aspect-ratio:210/297;object-fit:cover;background:#fff}
.mcard_face.is-empty{
  cursor:default;aspect-ratio:210/297;display:grid;place-items:center;
  border:1px dashed var(--bone-16);box-shadow:none;background:rgba(var(--bone-rgb),.04);
}
.mcard_face.is-empty:hover{transform:none;box-shadow:none}
.mcard_soon{
  font-size:var(--fs-label);letter-spacing:.048em;text-transform:uppercase;
  font-weight:650;color:var(--bone-38);
}
.mcard_label{
  margin-top:clamp(.9rem,1.8vw,1.4rem);
  font-size:1.3rem;letter-spacing:.02em;text-transform:uppercase;font-weight:600;
}
.mcard_label span{
  display:block;margin-top:.35rem;
  font-size:var(--fs-label);letter-spacing:.048em;font-weight:650;color:var(--bone-38);
}

/* ── mcardf — форма-картка (стиль референсу) ─────────────────────────────────
      Світле полотно на темній секції; ліва рейка (волосінь — знак — волосінь);
      поля — підкреслені рядки, де підпис стоїть ПРЕФІКСОМ усередині рядка, а не
      окремим лейблом над ним; знизу примітка ліворуч і pill-кнопка праворуч.
      Рядок — це <label> навколо поля, тому префікс лишається справжнім лейблом
      (клік фокусує, скрінрідер читає назву), хоча візуально це просто текст на
      одній лінії з полем. ────────────────────────────────────────────────────── */
.menus_form_k{color:var(--bone-38);margin-bottom:clamp(1.25rem,2.4vw,2rem)}
.menus_form .mcardf{margin-top:100px !important}
.mcardf{
  background:var(--sky);color:var(--ink);
  padding:clamp(1.5rem,3vw,2.75rem);
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(1.25rem,3vw,2.5rem);
}
/* рейка: дві волосіні тягнуться, знак тримає центр */
.mcardf_rail{display:grid;justify-items:center;align-content:stretch;gap:clamp(1rem,2vw,1.5rem)}
.mcardf_line{width:1px;background:rgba(var(--ink-rgb),.28)}
.mcardf_rail{grid-template-rows:1fr auto 1fr}
.mcardf_mark{width:clamp(2.5rem,4.5vw,3.75rem);height:auto}

.mcardf_body{display:grid;gap:clamp(.75rem,1.5vw,1.1rem)}
.mcardf_k{color:rgba(var(--ink-rgb),.72);margin-bottom:clamp(.25rem,1vw,.75rem)}

/* один рядок = підпис + поле на спільній підкресленій лінії */
.mfield{
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;
  gap:.6rem;padding-bottom:.45rem;
  border-bottom:1px solid rgba(var(--ink-rgb),.3);
  transition:border-color .35s var(--ease);
}
.mfield:focus-within{border-bottom-color:var(--ink)}
.mfield>span{
  font-size:var(--fs-label);letter-spacing:.048em;text-transform:uppercase;
  font-weight:650;color:rgba(var(--ink-rgb),.62);white-space:nowrap;
}
.mfield input,.mfield select,.mfield textarea{
  width:100%;padding:.15rem 0;
  font:inherit;font-size:.9375rem;letter-spacing:normal;text-transform:none;
  color:var(--ink);background:transparent;border:0;border-radius:0;
}
.mfield input:focus,.mfield select:focus,.mfield textarea:focus{outline:0}
.mfield ::placeholder{color:rgba(var(--ink-rgb),.38)}
.mfield select{appearance:none;cursor:pointer}
/* нативний список малює ОС — задаємо явні кольори, щоб не вийшло світле на світлому */
.mfield select option{color:var(--ink);background:#fff}
.mfield input[type=date]::-webkit-calendar-picker-indicator{opacity:.55;cursor:pointer}
.mfield input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:1}
/* трійка Tag/Menü/Anzahl в одному рядку: три пари підпис+поле.
   display:contents на парі — щоб її підпис і поле стали клітинками СПІЛЬНОЇ
   сітки рядка; зв'язок label↔поле від цього не страждає (він у DOM, не в layout) */
.mfield--split{grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr) auto 3.5rem}
.mfield_pair{display:contents}
.mfield_qty{text-align:right}
.mfield--area{align-items:start;grid-template-columns:auto minmax(0,1fr)}
.mfield--area textarea{resize:vertical;line-height:1.5}

/* honeypot: приховане поле, але не display:none — боти таке пропускають */
.mform_trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.mcardf_foot{
  margin-top:clamp(2rem,4vw,3.25rem);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:clamp(1rem,2vw,1.5rem);
}
.mcardf_note{font-size:.8125rem;line-height:1.5;color:rgba(var(--ink-rgb),.6)}
.mcardf_note a{border-bottom:1px solid rgba(var(--ink-rgb),.3)}
.mcardf_note a:hover{border-bottom-color:var(--ink)}
.mform_status{margin-top:.4rem;font-size:.8125rem;line-height:1.4}
.mform_status.is-ok{color:#2f6b23}
.mform_status.is-err{color:#8c2f28}
/* pill-кнопка з референсу: тільки контур, великий радіус */
.mcardf_send{
  padding:.95rem 2.25rem;border:1px solid rgba(var(--ink-rgb),.45);border-radius:999px;
  font-size:var(--fs-label);letter-spacing:.048em;text-transform:uppercase;
  font-weight:650;color:var(--ink);background:transparent;
  transition:background-color .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease);
}
.mcardf_send:hover,.mcardf_send:focus-visible{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.mcardf_send:disabled{opacity:.5;cursor:default}

@media (max-width:44rem){
  /* рейка з'їдає ширину, якої на вузькому екрані і так нема */
  .mcardf{grid-template-columns:1fr}
  .mcardf_rail{display:none}
  /* трійка розпадається на три рядки: пара знову стає власним рядком-сіткою */
  .mfield--split{grid-template-columns:1fr;gap:.6rem}
  .mfield_pair{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.6rem;align-items:center}
  .mfield_qty{text-align:left}
}

/* ── lb — великий вигляд меню ────────────────────────────────────────────── */
.lb{
  position:fixed;inset:0;z-index:60;
  display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:1fr auto;
  align-items:center;gap:clamp(.5rem,2vw,1.5rem);
  padding:clamp(3.5rem,7vh,5rem) clamp(.75rem,3vw,2.5rem) clamp(1.25rem,3vh,2rem);
  background:rgba(var(--ink-rgb),.94);
  opacity:0;transition:opacity .32s var(--ease-out);
}
/* ОБОВʼЯЗКОВО: display:grid вище перебиває браузерне [hidden]{display:none}
   (клас сильніший за UA-правило), тому закритий оверлей лишався у шарі — з
   opacity:0, але на весь екран — і перехоплював усі кліки та виділення тексту */
.lb[hidden]{display:none}
.lb.is-on{opacity:1}
.lb_stage{
  grid-column:2;grid-row:1;
  display:grid;place-items:center;min-height:0;height:100%;
}
/* A4: висота 88vh → ширина 88vh × 210/297 ≈ 62vh. min() із 92vw тримає аркуш
   у межах екрана і на вузьких вьюпортах */
.lb_sheet{width:min(92vw,62vh)}
.lb_img{max-width:min(92vw,62vh);max-height:88vh;width:auto;height:auto;background:#fff}
.lb_x{
  position:absolute;top:clamp(.75rem,2vh,1.5rem);right:clamp(.75rem,3vw,2.5rem);
  width:2.75rem;height:2.75rem;border-radius:50%;
  border:1px solid var(--bone-38);color:var(--bone);font-size:1.5rem;line-height:1;
  display:grid;place-items:center;
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.lb_x:hover,.lb_x:focus-visible{border-color:var(--bone);background:rgba(var(--bone-rgb),.1)}
.lb_nav{
  grid-row:1;align-self:center;
  width:2.75rem;height:2.75rem;border-radius:50%;
  border:1px solid var(--bone-38);color:var(--bone);font-size:1.6rem;line-height:1;
  display:grid;place-items:center;
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.lb_nav:hover,.lb_nav:focus-visible{border-color:var(--bone);background:rgba(var(--bone-rgb),.1)}
.lb_nav--prev{grid-column:1}
.lb_nav--next{grid-column:3}
.lb_cap{
  grid-column:1/-1;grid-row:2;text-align:center;
  font-size:var(--fs-label);letter-spacing:.048em;text-transform:uppercase;
  font-weight:650;color:var(--bone-60);
}
.lb_count{margin-left:1rem;color:var(--bone-38)}

/* кнопка живе в ЛІВІЙ колонці на рівні форми (grid-row:3), а не під нею: саме
   там лишалась велика порожнеча. Специфічність .menus .menus_cta (0,2,0) не
   нижча за .acols_i:nth-child(4) і правило стоїть пізніше — тому перебиває
   автоматичний номер рядка. */
.menus .menus_cta{
  grid-column:1/5;grid-row:3;
  justify-self:center;
  /* низ рядка, а не центр: угорі кнопка стояла майже під підписом аркуша, і
     порожнеча лишалась саме нижче */
  align-self:end;
}

/* ── info — акордеон із референсу ────────────────────────────────────────────
      Композиція: капс-рядок → вертикальна волосінь → стос великих заголовків.
      Клік по заголовку розкриває опис ПІД ним, «+» перетворюється на «×».
      Фон кремовий (--bone) — той самий колір, що текст на темних секціях, тому
      секція читається як «вивернута» решта сайту, а не як чужа вставка. ────── */
.info{
  position:relative;z-index:2;
  background:var(--bone);color:var(--ink);
  /* та сама техніка купола, що в .after: два кутові радіуси по 50vw у сумі = 100vw
     (ширина секції), тому дуги сходяться рівно в центрі верхньої межі — це
     справжній півкруг, а не плаский еліпс. vw, не % — % рахувався б від власної
     висоти секції і зламав би форму.
     Негативний margin підіймає секцію ПОВЕРХ .menus на ту саму --dome-rise, під
     яку в .menus зарезервований padding-bottom, тож купол «виїжджає» на фіолетове
     тло, нічого не накриваючи. */
  margin-top:calc(var(--dome-rise) * -1);
  border-radius:50vw 50vw 0 0;
  padding:clamp(4rem,12vh,9rem) var(--gut) clamp(5rem,14vh,10rem);
  display:grid;justify-items:center;text-align:center;
}
.info_k{color:rgba(var(--ink-rgb),.55)}
.info_line{margin-top:clamp(1.5rem,4vw,3rem);background:rgba(var(--ink-rgb),.22)}
.info_list{
  margin-top:clamp(2.5rem,7vw,6rem);width:100%;max-width:64rem;
  display:grid;gap:clamp(2rem,5vw,4rem);
}
.info_i_k{color:rgba(var(--ink-rgb),.68)}
.info_h{margin:0}
/* кнопка — увесь заголовок: клікабельна площа = сам текст, а не окрема іконка */
.info_t{
  display:inline-flex;align-items:flex-start;gap:.12em;
  margin-top:clamp(.6rem,1.4vw,1.1rem);
  font-family:var(--f-display);font-variation-settings:'opsz' 40;font-weight:500;
  font-size:clamp(1.7rem,5vw,4.5rem);line-height:1.02;letter-spacing:-.014em;
  text-transform:uppercase;color:var(--ink);text-align:center;
  transition:opacity .35s var(--ease);
}
.info_t:hover,.info_t:focus-visible{opacity:.62}
/* «+»/«×» — надрядковий знак, як у референсі */
.info_x{
  font-style:normal;font-size:.3em;line-height:1;font-weight:400;
  transform:translateY(.35em);
}
.info_i.is-open .info_x::after{content:""}

/* Розкриття: grid-template-rows 0fr→1fr анімує НЕВІДОМУ висоту без JS-замірів
   (max-height потребував би магічного числа). visibility прибирає закритий
   текст із дерева доступності — тому тут НЕ hidden: атрибут hidden із власним
   display у CSS не працює (як це було з лайтбоксом), а тут ще й ламав би
   анімацію. */
.info_p{
  display:grid;grid-template-rows:0fr;
  visibility:hidden;
  transition:grid-template-rows .55s var(--ease-out),visibility .55s;
}
.info_p_in{overflow:hidden;display:grid;justify-items:center}
.info_i.is-open .info_p{grid-template-rows:1fr;visibility:visible}
.info_p p{
  margin-top:clamp(1.5rem,3vw,2.5rem);max-width:52ch;
  color:rgba(var(--ink-rgb),.72);font-size:.9375rem;line-height:1.62;
}
.info_p p+p{margin-top:clamp(.9rem,1.8vw,1.4rem)}
.info_quote{font-style:italic}
.info_quote span{
  display:block;margin-top:.6rem;font-style:normal;
  font-size:var(--fs-label);letter-spacing:.048em;text-transform:uppercase;
  font-weight:650;color:rgba(var(--ink-rgb),.5);
}
/* коротка риска під текстом — теж деталь референсу */
.info_rule{
  width:clamp(3rem,6vw,5rem);height:1px;background:rgba(var(--ink-rgb),.35);
  margin-top:clamp(1.75rem,4vw,3rem);
}

/* ── loc — карта + години роботи ─────────────────────────────────────────────
      Той самий кремовий фон, що в #info, і жодної верхньої межі: візуально це
      продовження тієї ж «сторінки».
      Карта в потоці (задає висоту секції), але виходить за лівий край і згасає
      в прозоре з чотирьох боків — тому виглядає намальованою на тлі, а не
      вставленою картинкою в рамці. ─────────────────────────────────────────── */
.loc{
  background:var(--bone);color:var(--ink);
  /* верхній відступ — це та сама пауза між «Die ecoBOX» і заголовком годин */
  padding:clamp(4rem,13vh,10rem) var(--gut) clamp(3rem,9vh,7rem);
  /* дві рівні половини: карта ліворуч, стос «заголовок + картка годин» праворуч.
     minmax(0,…), а не auto: трек із auto міряється по вмісту, а вміст має
     width:min(100%,…) — відсоток від невизначеного треку, і карта згорталась. */
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);align-items:center;
}
/* правий стос: заголовок, під ним картка — обидва по центру своєї половини */
.loc_side{
  grid-column:2;
  display:grid;justify-items:center;
  gap:clamp(1rem,3vw,2.5rem);
}
.loc_h{
  text-align:left;justify-self:start;
  font-family:var(--f-display);font-variation-settings:'opsz' 40;font-weight:500;
  font-size:clamp(1.5rem,3vw,2.75rem);line-height:1.05;letter-spacing:-.012em;
  text-transform:uppercase;
}
.loc_map{grid-column:1}
/* волосінь-розділювач: на всю ширину рядка, сама лінія по центру */
.loc_end{
  grid-column:1/-1;justify-self:center;
  margin-top:clamp(2.5rem,7vh,5rem);
  background:rgba(var(--ink-rgb),.22);
}
/* карта вдвічі менша за початкову (46rem → 23rem) і БЕЗ виходу за лівий край:
   вона лишається в межах padding секції та ще й трохи відступає */
.loc_map{
  position:relative;
  margin-left:clamp(0rem,4vw,4rem);
  width:100%;
}
.loc_map img{
  display:block;width:100%;height:auto;
  /* дві маски перетинаються: горизонтальне і вертикальне згасання разом дають
     плавний край з усіх боків (mask-composite:intersect — саме для цього) */
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%),
                     linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%),
             linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%);
  /* -webkit- варіант першим, стандартний після: source-in — це те саме, що
     intersect, але старим синтаксисом (Safari < 15.4) */
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}

/* ── пін: точка з пульсом (той самий btnPulse, що в круглих кнопках) і
      відкрита картка з адресою. Координати — у % від картинки. ────────────── */
.loc_pin{position:absolute;left:56.1%;top:36.8%}
.loc_pin_dot{
  position:absolute;left:0;top:0;translate:-50% -50%;
  width:.7rem;height:.7rem;border-radius:50%;background:var(--brand);
  box-shadow:0 0 0 .28rem rgba(var(--ink-rgb),.22);
}
.loc_pin_dot::after{
  content:"";position:absolute;inset:-.28rem;border-radius:50%;
  border:1px solid var(--brand);
  animation:btnPulse 2.4s cubic-bezier(.4,0,.2,1) infinite;
}
.loc_pin_card{
  position:absolute;left:1.1rem;top:-.6rem;
  /* 13rem, а не 15: карта тепер вужча, і ширша картка залазила б у колонку годин */
  width:max-content;max-width:13rem;
  background:var(--ink);color:var(--bone);
  padding:clamp(.9rem,1.6vw,1.2rem) clamp(1rem,1.8vw,1.35rem);
  box-shadow:0 .9rem 2.2rem rgba(var(--ink-rgb),.28);
}
.loc_pin_k{color:var(--bone-60);margin-bottom:.6rem}
.loc_pin_addr{font-size:.875rem;line-height:1.45}
.loc_pin_line{margin-top:.45rem;font-size:.875rem}
.loc_pin_line a{border-bottom:1px solid var(--bone-16)}
.loc_pin_line a:hover{border-bottom-color:var(--bone)}

/* ── картка годин — того самого крою, що форма-картка (.mcardf): світле
      полотно --sky, рядки з підкресленням, підпис ліворуч / значення праворуч.
      Так у секції два однакові «аркуші» — форма вище й години тут — а не текст,
      що висить у порожнечі. ────────────────────────────────────────────────── */
.loc_card{
  margin:0;background:var(--sky);color:var(--ink);
  padding:clamp(1.5rem,3vw,2.75rem);
  display:grid;gap:clamp(1rem,2vw,1.6rem);
  /* по центру своєї половини (не притиснута до лівого краю треку) */
  justify-self:center;width:min(100%,26rem);
}
.loc_g{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:baseline;gap:1rem;
  padding-bottom:clamp(.6rem,1.2vw,.9rem);
  border-bottom:1px solid rgba(var(--ink-rgb),.28);
}
.loc_g:last-child{padding-bottom:0;border-bottom:0}
.loc_g dt{
  font-size:var(--fs-label);letter-spacing:.048em;text-transform:uppercase;
  font-weight:650;color:rgba(var(--ink-rgb),.55);
}
.loc_g dd{
  margin:0;justify-self:end;text-align:right;
  font-family:var(--f-display);font-optical-sizing:auto;font-weight:600;
  font-size:clamp(.95rem,1.35vw,1.15rem);letter-spacing:.01em;white-space:nowrap;
}

@media (max-width:56rem){
  .loc{grid-template-columns:1fr;gap:clamp(2rem,6vw,3rem)}
  .loc_map,.loc_side{grid-column:1}
  .loc_card{justify-self:stretch;width:auto}
  .loc_map{margin-left:0}
  /* на вузькому екрані картка піна не влізає збоку — ставимо її під точкою */
  .loc_pin_card{left:auto;right:0;top:1.4rem;transform:translateX(min(0px,calc(50vw - 100%)))}
}

/* ── cta — фото на весь екран + велика пара рядків + кругла кнопка ───────────
      Клон композиції референсу era-residence ("PERFECT SEA VIEWS"):
        ряд 1  display-пара рядків + розріджений капс-підпис під нею (верхня
               третина кадру, по центру — НЕ по вертикальному центру секції)
        ряд 3  кругла кнопка-кільце, по центру внизу
      Сітка на три ряди, де середній — розтяжна порожнеча: так обидва блоки
      тримаються своїх країв на будь-якій висоті екрана, без магічних відсотків.
      padding-top обраний так, щоб заголовок починався НИЖЧЕ рядка фіксованого
      nav (лого ліворуч / посилання праворуч) — інакше він наїхав би на них,
      бо стоїть по центру, а не в колонці. ──────────────────────────────────── */
.cta{
  position:relative;isolation:isolate;overflow:clip;
  /* фон — колір підвалу, а не --ink: коли кадр «відступає» (див. .cta_media
     нижче), навколо нього відкривається саме ця площина, і перехід у підвал
     читається як одне полотно, а не як третій колір між ними */
  min-height:100svh;background:var(--brand-deep);color:var(--bone);
  /* великі поля з обох боків: у референсі заголовок і кільце помітно віддалені
     від країв кадру — саме ця «повітряність» і робить секцію афішею, а не
     банером. Верхнє поле водночас тримає заголовок нижче рядка nav. */
  padding:clamp(8.5rem,23vh,15rem) var(--gut) clamp(5rem,15vh,10rem);
  display:grid;grid-template-rows:auto 1fr auto;
  justify-items:center;text-align:center;
}
/* overflow:clip обовʼязковий: фото вище за свій контейнер (див. нижче), і без
   обрізки воно вилазило б за межі кадру, quando той зменшується.
   transform-origin — НИЖНЯ межа: кадр, що відступає, лишається приклеєним до
   межі з підвалом, а не відривається від неї, лишаючи фіолетову смугу.
   Сам scale ставить hero.js — тут лише геометрія. */
.cta_media{
  position:absolute;inset:0;z-index:-1;overflow:clip;
  transform-origin:50% 100%;will-change:transform;
}
/* object-position нижче центру: угорі кадру — глухий фасад і небо, а вітрина,
   маркіза й столики (те, за чим фото тут узагалі стоїть) — у нижніх 2/3.
   height:126% + top:-13% — це запас під паралакс: фото їде ±9% власної висоти
   повільніше за сторінку, і завдяки запасу воно ніколи не відкриває краю. */
.cta_media img{
  position:absolute;left:0;top:-13%;
  width:100%;height:126%;object-fit:cover;object-position:50% 62%;
  will-change:transform;
}
/* фото світле (світле дерево, бруківка, кремова стіна) — без цього scrim'у біла
   типографіка на ньому просто зникає. Темніше зверху й знизу, бо саме там
   стоять заголовок і кнопка; у середині кадр лишається відкритим */
/* Mitte von .44 auf .56 nachgezogen, als das Motiv gewechselt hat: der Dampfzug
   vor Schlitters bringt hellen Himmel und besonnten Fels genau in das Band, in
   dem die Überschrift steht — dort fiel Weiss auf 2,99:1. Mit .56 sind es
   4,1:1, und die Bildmitte bleibt trotzdem offener als Kopf und Fuss. */
.cta_scrim{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(var(--ink-rgb),.7) 0%,rgba(var(--ink-rgb),.56) 46%,rgba(var(--ink-rgb),.66) 100%);
}

.cta_head{grid-row:1;display:grid;justify-items:center}
/* той самий кегль і крива, що в hero_display: це друга «афіша» сайту */
.cta_h{
  font-family:var(--f-display);font-optical-sizing:auto;font-weight:650;
  font-size:clamp(2.2rem,9.4vw,8.5rem);line-height:.875;letter-spacing:-.024em;
  text-transform:uppercase;
  text-shadow:0 .06em .5em rgba(var(--ink-rgb),.3);   /* страховка на світлих ділянках кадру */
}
/* підпис у референсі помітно розріджений — це його головна прикмета, тому
   letter-spacing тут набагато більший за звичний .048em у .label */
.cta_sub{
  margin-top:clamp(1.5rem,5.5vh,4rem);
  letter-spacing:.34em;text-indent:.34em;   /* компенсація трекінгу останньої літери, інакше блок здається зсунутим уліво */
  font-size:clamp(.5625rem,.85vw,.8125rem);color:var(--bone-60);
}

/* кругла кнопка — той самий елемент, що .cat_cta, лише текст по центру
   (у кейтерингу він ліворуч) і кільце трохи більше, як у референсі */
.cta_btn{
  grid-row:3;position:relative;
  width:clamp(10rem,15vw,14.5rem);aspect-ratio:1;border-radius:50%;
  display:grid;place-content:center;justify-items:center;text-align:center;
  padding-inline:clamp(1.2rem,2.5vw,2rem);
  margin-top:clamp(3.5rem,9vh,7rem);
  transform:translateY(clamp(2rem,5vh,4.5rem));
  font-size:var(--fs-label);letter-spacing:.048em;text-transform:uppercase;font-weight:650;
  color:var(--bone);cursor:pointer;
}
.cta_btn_ring{
  position:absolute;inset:0;border-radius:50%;border:1px solid rgba(var(--bone-rgb),.5);
  transition:border-color .4s var(--ease),transform .4s var(--ease);
}
.cta_btn .roll_i{position:relative;z-index:1}
.cta_btn:hover .cta_btn_ring,.cta_btn:focus-visible .cta_btn_ring{border-color:var(--bone);transform:scale(1.04)}
/* пульс — той самий, що на решті круглих кнопок сайту */
.cta_btn::before{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  border:1px solid currentColor;color:rgba(var(--bone-rgb),.45);
  animation:btnPulse 2.4s cubic-bezier(.4,0,.2,1) infinite;
}
.cta_btn:hover::before,.cta_btn:focus-visible::before{animation-play-state:paused;opacity:0}

/* ── pop — попап-анкета з кнопки «Anfrage senden» ────────────────────────────
      Оверлей того самого крою, що .lb: fixed, темне тло, opacity-перехід.
      [hidden] мусить бути ПІСЛЯ display:grid — клас сильніший за UA-правило
      [hidden]{display:none}, і без цього рядка закритий попап лишався б на весь
      екран і перехоплював кліки (та сама пастка, що в .lb). ────────────────── */
/* ── UNIVERSAL POPUP TEMPLATE (Card in middle + dark overlay) ─────────────── */
.pop{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(1rem,4vw,3rem);
  opacity:0;visibility:hidden;
  transition:opacity .55s var(--ease-out),visibility .55s;
}
.pop[hidden]{display:none}
.pop.is-on{opacity:1;visibility:visible}

.pop_backdrop{
  position:absolute;inset:0;
  background:rgba(var(--ink-rgb),.78);
  backdrop-filter:blur(8px);
  cursor:pointer;
  transition:opacity .55s var(--ease-out);
}

/* Card fixed size & center alignment */
.pop_box{
  position:relative;z-index:2;
  width:min(54rem,90vw);
  height:min(36rem,85vh);
  background:var(--sky);
  color:var(--ink);
  border-radius:4px;
  box-shadow:0 2rem 4rem rgba(0,0,0,.5);
  display:flex;flex-direction:column;
  overflow:hidden;
  transform:translateY(24px) scale(.95);
  transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .55s var(--ease-out);
}
.pop.is-on .pop_box{transform:translateY(0) scale(1)}

.pop_x{
  position:absolute;top:1.25rem;right:1.25rem;z-index:10;
  width:2.5rem;height:2.5rem;border-radius:50%;
  border:1px solid rgba(var(--ink-rgb),.35);background:rgba(255,255,255,.25);
  backdrop-filter:blur(4px);
  display:grid;place-items:center;
  font-size:1.3rem;line-height:1;color:var(--ink);
  cursor:pointer;transition:border-color .3s var(--ease),background-color .3s var(--ease),transform .3s var(--ease);
}
.pop_x:hover,.pop_x:focus-visible{
  border-color:var(--ink);background:rgba(255,255,255,.8);
  transform:scale(1.06);
}

.pop_scroll{
  flex:1;overflow-y:auto;
  overscroll-behavior:contain;
  touch-action:pan-y;
  padding:clamp(1.75rem,4vw,3.25rem);
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:var(--brand) rgba(var(--ink-rgb),.15);
}
.pop_scroll::-webkit-scrollbar{width:7px}
.pop_scroll::-webkit-scrollbar-track{background:rgba(var(--ink-rgb),.12);border-radius:999px}
.pop_scroll::-webkit-scrollbar-thumb{background:var(--brand);border-radius:999px}
.pop_scroll::-webkit-scrollbar-thumb:hover{background:var(--brand-dk)}

/* ── Navigation popup styling ── */
.pop_nav_in{padding:.25rem 0}
.pop_nav_list{
  display:flex;flex-direction:column;
  gap:clamp(.5rem,1vw,1rem);margin-top:1.25rem;
}
.pop_nav_link{
  display:flex;align-items:center;gap:1.2rem;
  font-family:var(--f-display);font-size:clamp(1.15rem,2.1vw,1.85rem);
  font-weight:500;text-transform:uppercase;letter-spacing:.02em;
  color:var(--ink);padding:.65rem .9rem;border-radius:4px;
  text-decoration:none;
  transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
}
.pop_nav_link .num{
  font-family:var(--f-body);font-size:var(--fs-label);
  color:rgba(var(--ink-rgb),.45);font-weight:650;letter-spacing:.08em;
}
.pop_nav_link:hover{
  background:rgba(var(--ink-rgb),.12);color:var(--brand);
  transform:translateX(8px);
}

/* zweite Gruppe (Sprünge innerhalb der Startseite): dieselbe Liste, eine Stufe
   leiser, damit die Seitennavigation darüber die erste Stimme behält */
.pop_nav_k{
  margin-top:clamp(1.5rem,3vw,2.25rem);
  padding-top:clamp(.9rem,2vw,1.25rem);
  border-top:1px solid rgba(var(--ink-rgb),.16);
  color:rgba(var(--ink-rgb),.62);
}
.pop_nav_list--sub{margin-top:.5rem;gap:.15rem}
.pop_nav_list--sub .pop_nav_link{
  font-size:clamp(.95rem,1.5vw,1.15rem);font-weight:600;
  padding:.5rem .9rem;color:rgba(var(--ink-rgb),.82);
}

/* Telefon: sass aus dem Kopf hierher gezogen, als der Knopf dort zum Fahrplan
   wurde — es darf nicht nur im Fussbereich stehen */
.pop_nav_tel{
  display:inline-block;
  margin-top:clamp(1.4rem,3vw,2rem);
  padding-top:clamp(.9rem,2vw,1.25rem);
  border-top:1px solid rgba(var(--ink-rgb),.16);
  width:100%;
  font-family:var(--f-display);font-size:clamp(1.05rem,1.8vw,1.35rem);
  font-weight:600;letter-spacing:.02em;
  color:var(--brand-txt);text-decoration:none;
  transition:color .3s var(--ease);
}
.pop_nav_tel:hover,.pop_nav_tel:focus-visible{color:var(--ink)}
/* Folgt die Abschnittsliste direkt auf das Telefon, reicht eine Trennlinie */
.pop_nav_tel+.pop_nav_k{border-top:0;padding-top:0;margin-top:clamp(1.1rem,2.4vw,1.6rem)}

.pop_h{
  margin-bottom:clamp(.75rem,2vw,1.25rem);
  font-family:var(--f-display);font-variation-settings:'opsz' 40;font-weight:500;
  font-size:clamp(1.25rem,2.4vw,2rem);line-height:1.06;letter-spacing:-.012em;
  text-transform:uppercase;
}

/* ── foot — підвал за композицією референсу ──────────────────────────────────
      Стос по центру: знак → гігантський номер телефону → дрібний капс-блок з
      адресою і поштою; найнижче — рядок копірайт/кнопки, прибитий до низу
      екрана великим верхнім відступом (у референсі між адресою і цим рядком
      порожньо майже на третину висоти).
      Фон — фірмовий #604769. Він світліший за --ink, тому власні прозорості
      тексту тут свої, а не спільні --bone-60/38: на фіолетовому ті самі
      значення читаються надто блідо. ─────────────────────────────────────────*/
.foot{
  background:var(--brand-deep);color:var(--bone);
  padding:clamp(4rem,12vh,8rem) var(--gut) clamp(1.5rem,4vh,2.5rem);
  display:grid;justify-items:center;text-align:center;
}
/* сам логотип — фіолетовий квадрат того ж кольору, що тло, тому виглядає як
   знак, а не як вставлена картинка; рамка на ньому й дає той «медальйон» */
.foot_mark{width:clamp(6rem,10vw,9rem);height:auto}
/* головний елемент підвалу: номер телефону кеглем афіші */
.foot_tel{
  display:block;margin-top:clamp(1.5rem,4vw,3rem);
  font-family:var(--f-display);font-optical-sizing:auto;font-weight:500;
  font-size:clamp(1.9rem,6.4vw,5.5rem);line-height:1;letter-spacing:-.02em;
  white-space:nowrap;transition:opacity .35s var(--ease);
}
.foot_tel:hover,.foot_tel:focus-visible{opacity:.72}

.foot_addr{margin-top:clamp(1.25rem,3vw,2.25rem);display:grid;justify-items:center;gap:.55rem}
.foot_k{color:rgba(var(--bone-rgb),.82)}
/* адреса — той самий дрібний капс, але щільніший і трохи яскравіший за підпис
   над нею: у референсі це найконтрастніший рядок блоку */
.foot_lines{line-height:1.7;font-weight:700}
.foot_mail{margin-top:.35rem}
.foot_mail a{border-bottom:1px solid rgba(var(--bone-rgb),.35);padding-bottom:.15em}
.foot_mail a:hover{border-bottom-color:var(--bone)}

/* нижній рядок: копірайт ліворуч, кнопки праворуч. Великий верхній відступ —
   це і є та порожнеча з референсу, яка відсуває рядок до самого низу. */
.foot_bar{
  width:100%;max-width:96rem;
  margin-top:clamp(4rem,16vh,11rem);
  display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;
  gap:clamp(1.25rem,3vw,2.5rem);text-align:left;
}
.foot_c{color:rgba(var(--bone-rgb),.82);line-height:1.7}
/* посилання — просто текст; ритм тримають ромби-розділювачі між ними */
.foot_links{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(.7rem,1.6vw,1.25rem)}
.foot_link{
  font-size:var(--fs-label);letter-spacing:.048em;text-transform:uppercase;font-weight:650;
  color:rgba(var(--bone-rgb),.78);
  border-bottom:1px solid transparent;padding-bottom:.15em;
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.foot_link:hover,.foot_link:focus-visible{color:var(--bone);border-bottom-color:var(--bone)}
/* Admin — службовий вхід, тому тихіший за решту */
.foot_link--admin{color:rgba(var(--bone-rgb),.5)}
/* ромб успадковує колір рамки з --bone-версії: базовий .deco_mark темний (він
   для світлих секцій), тут фон фіолетовий */
.foot_dot{border-color:rgba(var(--bone-rgb),.4)}

@media (max-width:44rem){
  .foot_bar{flex-direction:column;align-items:center;text-align:center}
}

/* ── entrance ────────────────────────────────────────────────────────────── */
.hero_stack>*{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.is-ready .hero_stack>*{opacity:1;transform:none}
.is-ready .hero_eyebrow{transition-delay:.15s}
.is-ready .hero_script{transition-delay:.26s}
.is-ready .hero_display{transition-delay:.34s}
.is-ready .hero_tag{transition-delay:.48s}
.is-ready .hero_cta{transition-delay:.58s}

/* ── narrow ──────────────────────────────────────────────────────────────── */
@media (max-width:60rem){
  .nav_links{display:none}                 /* лого + скрол лишаються — .nav_left не ховаємо */
  .after_arc text{font-size:64px}
  .pin_card{width:min(17rem,70vw)}
}
/* Unter 40rem passt die Karte des mittleren Pins (x 49 %) nicht mehr neben den
   Punkt — sie würde am rechten Rand des Kaders abgeschnitten. Auf dem Handy
   entfallen die Hotspots deshalb ganz: dieselben drei Aussagen stehen direkt
   darunter in den Kacheln Zug / Bus / Dampf, es geht also kein Inhalt verloren. */
@media (max-width:40rem){
  .pins{display:none}
}
/* Die Zeile trug früher zwei ganze Wortgruppen und musste hier umbrechen —
   die Striche verschwanden dabei. Jetzt sind es drei kurze Wörter (zusammen
   gut 100 px), die auch auf 320 px nebeneinander passen; die Striche bleiben
   also stehen und werden nur kürzer. */
@media (max-width:36rem){
  .hero_tag{gap:.7rem}
  .hero_tag em{flex:0 1 2.25rem;min-width:1rem}
}

/* ── reduced motion: no runway, no overlap, nothing driven by scroll ─────── */
@media (prefers-reduced-motion:reduce){
  .after{margin-top:0;border-radius:0}
  .hero_media{transform:none!important;height:100%}
  .hero_img{height:100%;object-fit:cover;object-position:50% 100%;opacity:1;transition:none}
  .hero_content{transform:none!important}
  .pins{opacity:1;pointer-events:auto}
  .nav_rail i{transform:none}
  .hero_stack>*{opacity:1;transform:none;transition:none}
  .roll_i>span{transition:none}
  /* кільце лишається (це affordance, не декор), але без "доганяючого" руху —
     стоїть точно під курсором */
  .tile_ring{transition:opacity .3s linear}
  /* опис теж лишається hover-залежним, але без руху шторки — миттєво */
  .tile_desc>span{transition:none}
  .round-btn::before,.cat_cta::before,.cta_btn::before{animation:none;opacity:0}
  /* попап лишається (це відповідь на клік), але без наїзду картки */
  .pop_box{transform:none;transition:none}
  /* відео-фон — це рух на весь екран, тобто саме те, від чого відмовляється
     користувач із reduce; секція лишається білою й читабельною без нього */
  .pure_bg{display:none}
  /* зміна кадру в каталозі лишається (це відповідь на клік, не декор), але без
     наїзду масштабу — тільки проявлення */
  .cat_img{transform:none;transition:opacity .3s linear}
  /* фото в #anfrage — звичайний нерухомий фон: і паралакс, і «відступ» кадру
     веде саме hero.js, який при reduce не запускається взагалі */
  .cta_media img{top:0;height:100%}
}

/* ═══════════════════════════════════════════════════════════════════════════
   ZILLERTALBAHN — CUSTOM COMPONENT STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Kombiangebote / Ausflugsziele ───────────────────────────────────────────
   Replaces the reference's partner-logo wall. Zillertalbahn's excursion
   partners are destinations rather than brands and no logo files exist on the
   source site, so each one is a photo card that can carry its own copy. */
.zvb_partners_sec {
  padding: 5rem 0;
  background: var(--bone);
  color: var(--ink);
  border-top: 1px solid rgba(var(--ink-rgb),0.12);
}
.zvb_partners_head {
  text-align: center;
  max-width: 48rem;
  margin: 0 auto 3rem;
  padding: 0 var(--gut);
}
.zvb_partners_head h2 {
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  margin-bottom: 0.8rem;
  color: var(--brand);
}
.zvb_partners_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 2.5rem 2rem;
  max-width: 75rem;
  margin: 0 auto;
  padding: 0 var(--gut);
}
.zvb_partner_card {
  display: flex;
  flex-direction: column;
  color: inherit;
}
.zvb_partner_media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  margin-bottom: 1.1rem;
}
.zvb_partner_media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-card);
}
.zvb_partner_card:hover .zvb_partner_media img,
.zvb_partner_card:focus-visible .zvb_partner_media img {
  transform: scale(1.05);
}
.zvb_partner_k {
  color: var(--accent);
  margin-bottom: 0.45rem;
}
.zvb_partner_card h3 {
  font-family: var(--f-display);
  font-size: 1.22rem;
  line-height: 1.2;
  color: var(--brand);
  margin-bottom: 0.5rem;
}
.zvb_partner_card p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(var(--ink-rgb),0.72);
}
.zvb_partner_more {
  margin-top: 0.8rem;
  font-size: var(--fs-label);
  letter-spacing: 0.048em;
  text-transform: uppercase;
  font-weight: 650;
  color: var(--brand-txt);
}
.zvb_partner_card:hover .zvb_partner_more { color: var(--accent); }

/* Einsatzbereiche List in #reinheit */
.zvb_services_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem 3.5rem;
  margin-top: 3.5rem;
  text-align: left;
  width: 100%;
  max-width: 68rem;
}
@media (max-width: 48rem) {
  .zvb_services_list {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
.zvb_service_item {
  border-top: 1px solid rgba(var(--ink-rgb),0.18);
  padding-top: 1.5rem;
}
.zvb_service_item h3 {
  font-family: var(--f-display);
  font-size: 1.35rem;
  color: var(--brand);
  margin-bottom: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.zvb_service_item p {
  color: rgba(var(--ink-rgb),0.85);
  font-size: 0.93rem;
  line-height: 1.65;
}

/* Counters – editorial minimal (no cards, no backgrounds) */
.zvb_counters_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 2.5rem;
}
.zvb_counter_card {
  background: none;
  backdrop-filter: none;
  border: none;
  border-radius: 0;
  padding: 1.6rem 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* thin top separator on every card */
.zvb_counter_card {
  border-top: 1px solid rgba(var(--bone-rgb),0.18);
}
/* vertical separator: odd cards get a right border */
.zvb_counter_card:nth-child(odd) {
  padding-right: 1.5rem;
  border-right: 1px solid rgba(var(--bone-rgb),0.18);
}
.zvb_counter_card:nth-child(even) {
  padding-left: 1.5rem;
}
/* hide icon badge entirely */
.zvb_counter_icon_badge {
  display: none;
}
/* Weiss, nicht --brand-red: die Sektion liegt auf einem blauen Verlauf, auf dem
   das Rot der Dampfzugwagen fremd wirkt und obendrein nur mit Mühe ablesbar ist
   (3,2:1). Die Rangfolge zur Beschriftung darunter trägt jetzt Grösse und
   Gewicht statt der Farbe — weiss auf dem hellsten Punkt des Verlaufs sind
   4,5:1, für Text dieser Grösse mehr als genug. */
.zvb_counter_val {
  font-family: var(--f-display);
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  font-weight: 700;
  color: var(--bone);
  line-height: 1;
  letter-spacing: -0.02em;
}
.zvb_counter_lbl {
  font-size: 0.78rem;
  color: var(--bone-60);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  margin-top: 0.45rem;
}

/* ── Aktuelles ───────────────────────────────────────────────────────────────
   Replaces the reference's Google-reviews block: the ZVB has no review corpus,
   but it does publish operational notices that riders genuinely need up front
   (timetable changes, seasonal steam-train dates). Same two-column shape. */
.zvb_news_sec {
  padding: 6rem 0;
  background: var(--brand-deep);
  color: var(--bone);
  border-top: 1px solid rgba(var(--bone-rgb),0.12);
}
.zvb_news_wrapper {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  max-width: 75rem;
  margin: 0 auto;
  padding: 0 var(--gut);
  align-items: start;
}
@media (max-width: 56rem) {
  .zvb_news_wrapper { grid-template-columns: 1fr; gap: 2.5rem; }
}
.zvb_news_h {
  font-family: var(--f-display);
  font-size: clamp(2rem, 3.8vw, 3.5rem);
  color: var(--bone);
  line-height: 1.1;
  margin-top: 0.5rem;
}
.zvb_news_aside {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(var(--bone-rgb),0.2);
}
.zvb_news_aside p {
  color: rgba(255,255,255,.9);
  font-size: 0.9rem;
  line-height: 1.6;
}
.zvb_news_aside a {
  color: var(--bone);
  border-bottom: 1px solid rgba(var(--bone-rgb),0.4);
}
.zvb_news_aside a:hover { border-bottom-color: var(--bone); }

.zvb_news_list { display: flex; flex-direction: column; gap: 0; }
.zvb_news_card {
  border-bottom: 1px solid rgba(var(--bone-rgb),0.18);
  padding: 1.6rem 0;
  display: block;
  color: inherit;
}
.zvb_news_card:last-child { border-bottom: none; }
.zvb_news_date {
  font-size: var(--fs-label);
  letter-spacing: 0.048em;
  text-transform: uppercase;
  font-weight: 650;
  color: rgba(255,255,255,.82);
  margin-bottom: 0.6rem;
}
.zvb_news_card h3 {
  font-family: var(--f-display);
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  line-height: 1.25;
  margin-bottom: 0.6rem;
  color: var(--bone);
}
.zvb_news_text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255,255,255,.92);
}
/* an operational warning needs to out-rank the rest of the list */
.zvb_news_card--alert { position: relative; padding-left: 1.4rem; }
.zvb_news_card--alert::before {
  content: "";
  position: absolute;
  left: 0; top: 1.6rem; bottom: 1.6rem;
  width: 3px;
  background: var(--accent);
}

/* ── Ansprechpartner grid, inside the #ueber-uns accordion ───────────────────
   Replaces the reference's photo team grid: the ZVB publishes names, roles and
   direct addresses but no staff portraits, so this is a typographic contact
   card set on the same three-column rhythm. */
.zvb_contact_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 1.5rem;
}
@media (max-width: 56rem) {
  .zvb_contact_grid { grid-template-columns: 1fr; }
  .zvb_contact_card {
    border-right: none !important;
    border-bottom: 1px solid rgba(var(--ink-rgb),0.12);
    padding: 1.4rem 0 !important;
  }
  .zvb_contact_card:last-child { border-bottom: none; }
}
.zvb_contact_card {
  border-right: 1px solid rgba(var(--ink-rgb),0.12);
  color: var(--ink);
  padding: 0 2rem;
}
.zvb_contact_card:first-child { padding-left: 0; }
.zvb_contact_card:last-child { border-right: none; padding-right: 0; }
.zvb_contact_k {
  color: var(--accent);
  margin-bottom: 0.55rem;
}
.zvb_contact_card h4 {
  font-family: var(--f-display);
  font-size: 1.15rem;
  margin-bottom: 0.25rem;
  color: var(--brand-txt);
}
.zvb_contact_role {
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(var(--ink-rgb),0.62);
  margin-bottom: 0.3rem;
}
.zvb_contact_role + a { margin-bottom: 0.9rem; }
.zvb_contact_card a {
  display: block;
  font-size: 0.82rem;
  color: var(--brand-txt);
  word-break: break-word;
  border-bottom: 1px solid rgba(var(--ink-rgb),0.18);
  padding-bottom: 0.15rem;
}
.zvb_contact_card a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.zvb_inline_link {
  font-size: var(--fs-label);
  letter-spacing: 0.048em;
  text-transform: uppercase;
  font-weight: 650;
  color: var(--brand-txt);
  border-bottom: 1px solid rgba(var(--ink-rgb),0.25);
  padding-bottom: 0.2rem;
}
.zvb_inline_link:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Vacancies / Jobs Section */
.zvb_jobs_sec {
  padding: 5rem 0;
  background: var(--ink);
  color: var(--bone);
  border-top: 1px solid var(--bone-16);
}
.zvb_jobs_head {
  text-align: center;
  max-width: 48rem;
  margin: 0 auto 3rem;
  padding: 0 var(--gut);
}
.zvb_jobs_head h2 {
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 3.5vw, 3rem);
}
.zvb_jobs_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  max-width: 75rem;
  margin: 0 auto;
  padding: 0 var(--gut);
}
.zvb_job_card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.3s var(--ease);
}
.zvb_job_card:hover {
  border-color: var(--brass);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}
.zvb_job_img {
  height: 180px;
  width: 100%;
  object-fit: cover;
}
.zvb_job_body {
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.zvb_job_title {
  font-family: var(--f-display);
  font-size: 1.3rem;
  margin-bottom: 0.8rem;
  color: var(--bone);
}
.zvb_job_meta {
  font-size: 0.82rem;
  color: var(--mauve);
  margin-bottom: 1rem;
  line-height: 1.5;
}
.zvb_job_list {
  font-size: 0.85rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  padding-left: 1.2rem;
  color: var(--bone-60);
  flex-grow: 1;
}
.zvb_job_btn {
  align-self: flex-start;
}


/* ═══════════════════════════════════════════════════════════════════════════
   UNTERSEITEN — Fahrplan, Bus, Dampfzug, Rent a Bike, Jobs, Kontakt
   The landing page carries the pinned-hero choreography; these pages are here
   to be read, so they use a static image band and a light prose body. Same
   tokens, same nav and footer, no GSAP dependency.
   ═══════════════════════════════════════════════════════════════════════════ */

.subhero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(19rem, 44vh, 29rem);
  padding: calc(var(--nav-h) + 1.5rem) var(--gut) clamp(2rem, 5vw, 3.5rem);
  background: var(--ink);
  overflow: clip;
}
.subhero_media { position: absolute; inset: 0; z-index: 0; }
.subhero_media img { width: 100%; height: 100%; object-fit: cover; }
.subhero_media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(var(--ink-rgb), .94) 0%, rgba(var(--ink-rgb), .62) 52%, rgba(var(--ink-rgb), .38) 100%);
}
.subhero_in { position: relative; z-index: 1; max-width: 58rem; }
.crumb {
  display: flex; flex-wrap: wrap; gap: .45rem;
  color: rgba(var(--bone-rgb),.78); margin-bottom: 1rem;
}
.crumb a { color: var(--bone-60); }
.crumb a:hover { color: var(--bone); }
.subhero_h {
  font-family: var(--f-display);
  font-size: clamp(2rem, 5.4vw, 4rem);
  line-height: 1.03; letter-spacing: -.024em;
  color: var(--bone);
}
.subhero_lead {
  margin-top: 1.1rem; max-width: 46rem;
  color: var(--bone-60);
  font-size: clamp(.95rem, 1.5vw, 1.08rem); line-height: 1.6;
}

/* ── light prose body ───────────────────────────────────────────────────────── */
.sub { background: var(--bone); color: var(--ink); }
.sub_sec { padding: clamp(2.75rem, 6.5vw, 5.5rem) var(--gut); }
.sub_sec + .sub_sec { padding-top: 0; }
.sub_wrap { max-width: 68rem; margin: 0 auto; }
.sub_k { color: var(--accent); margin-bottom: .6rem; }
.sub_h2 {
  font-family: var(--f-display);
  font-size: clamp(1.45rem, 3vw, 2.4rem);
  line-height: 1.12; color: var(--brand);
  margin-bottom: 1.1rem;
}
.sub_h3 {
  font-family: var(--f-display);
  font-size: 1.18rem; color: var(--brand-txt);
  margin: 1.8rem 0 .6rem;
}
.sub_p {
  font-size: .95rem; line-height: 1.72;
  color: rgba(var(--ink-rgb), .82);
  max-width: 54rem;
}
.sub_p + .sub_p { margin-top: .9rem; }
.sub_p a, .sub_li a { color: var(--brand-txt); border-bottom: 1px solid rgba(var(--ink-rgb), .22); }
.sub_p a:hover, .sub_li a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.sub_rule { display: block; height: 1px; background: rgba(var(--ink-rgb), .14); margin: clamp(2rem,4vw,3rem) 0; }

/* dark band, for pulling a highlight out of the flow */
.sub_sec--dark { background: var(--ink); color: var(--bone); padding-block: clamp(2.75rem, 6.5vw, 5rem); }
.sub_sec--dark .sub_h2 { color: var(--bone); }
.sub_sec--dark .sub_p { color: var(--bone-60); }
.sub_sec--dark .sub_p a { color: var(--bone); border-bottom-color: rgba(var(--bone-rgb), .4); }
.sub_sec--dark .sub_k { color: var(--brand-lt); }
.sub_sec--dark .sub_card { border-top-color: rgba(var(--bone-rgb), .2); }
.sub_sec--dark .sub_card h3 { color: var(--bone); }
.sub_sec--dark .sub_card p { color: var(--bone-60); }

/* an operational notice that must not be skimmed past */
.sub_note {
  border-left: 3px solid var(--accent);
  background: var(--sky);
  padding: 1.1rem 1.3rem;
  margin: 1.6rem 0;
  max-width: 54rem;
}
.sub_note p { font-size: .92rem; line-height: 1.65; color: rgba(var(--ink-rgb), .85); }
.sub_note p + p { margin-top: .6rem; }
.sub_note strong { color: var(--accent); }

/* ── column sets ────────────────────────────────────────────────────────────── */
.sub_cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 1.8rem;
}
.sub_cols--2 { grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); }
.sub_card { border-top: 1px solid rgba(var(--ink-rgb), .18); padding-top: 1.15rem; }
.sub_card h3 {
  font-family: var(--f-display);
  font-size: 1.1rem; color: var(--brand-txt);
  margin-bottom: .5rem;
}
.sub_card p { font-size: .88rem; line-height: 1.62; color: rgba(var(--ink-rgb), .72); }
.sub_card_meta {
  display: block; margin-top: .6rem;
  font-size: var(--fs-label); letter-spacing: .048em;
  text-transform: uppercase; font-weight: 650; color: var(--accent);
}

/* ── download / link lists ──────────────────────────────────────────────────── */
.dl { list-style: none; padding: 0; margin: 1.4rem 0 0; }
.dl li { border-bottom: 1px solid rgba(var(--ink-rgb), .14); }
.dl li:first-child { border-top: 1px solid rgba(var(--ink-rgb), .14); }
.dl a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.2rem;
  padding: .95rem .2rem;
  font-size: .92rem; font-weight: 600; color: var(--brand-txt);
}
.dl a:hover { color: var(--accent); background: var(--sky); }
.dl_meta {
  flex: 0 0 auto;
  font-size: var(--fs-label); letter-spacing: .048em;
  text-transform: uppercase; font-weight: 650;
  color: rgba(var(--ink-rgb), .66);
}
.dl a:hover .dl_meta { color: var(--accent); }
.sub_sec--dark .dl li,
.sub_sec--dark .dl li:first-child { border-color: rgba(var(--bone-rgb), .18); }
.sub_sec--dark .dl a { color: var(--bone); }
.sub_sec--dark .dl a:hover { color: var(--brand-lt); background: rgba(var(--bone-rgb), .06); }
.sub_sec--dark .dl_meta { color: rgba(var(--bone-rgb), .78); }
/* Colours picked for a light ground do not survive on --ink: the slab headings
   and the accent kicker drop to 2.6:1 and 3.2:1, and the table caption to
   1.0:1 (invisible). Each needs its dark-ground counterpart. */
.sub_sec--dark .sub_h3 { color: var(--brand-lt); }
.sub_sec--dark .sub_card_meta { color: var(--accent-lt); }
.sub_sec--dark .tbl caption { color: rgba(var(--bone-rgb), .8); }
.sub_sec--dark .tbl th { color: var(--brand-lt); border-bottom-color: rgba(var(--bone-rgb), .35); }
.sub_sec--dark .tbl th, .sub_sec--dark .tbl td { border-bottom-color: rgba(var(--bone-rgb), .18); }
.sub_sec--dark .tbl td { color: rgba(var(--bone-rgb), .92); }
.sub_sec--dark .tbl tbody tr:hover td { background: rgba(var(--bone-rgb), .07); }
.sub_sec--dark .sub_note { background: rgba(var(--bone-rgb), .08); }
.sub_sec--dark .sub_note p { color: rgba(var(--bone-rgb), .92); }
.sub_sec--dark .sub_note strong { color: var(--accent-lt); }
.sub_sec--dark .sub_rule { background: rgba(var(--bone-rgb), .2); }

/* ── tables (prices, opening hours) ─────────────────────────────────────────── */
.tblwrap { overflow-x: auto; margin-top: 1.4rem; }
.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 30rem; }
.tbl caption { text-align: left; padding-bottom: .7rem; font-size: .85rem; color: rgba(var(--ink-rgb), .6); }
.tbl th, .tbl td {
  text-align: left; padding: .75rem .85rem;
  border-bottom: 1px solid rgba(var(--ink-rgb), .14);
}
.tbl th {
  font-size: var(--fs-label); letter-spacing: .048em;
  text-transform: uppercase; font-weight: 650; color: var(--brand-txt);
  border-bottom-color: rgba(var(--ink-rgb), .3);
}
.tbl td:last-child, .tbl th:last-child { text-align: right; white-space: nowrap; }
.tbl tbody tr:hover td { background: var(--sky); }

/* ── list ───────────────────────────────────────────────────────────────────── */
.sub_ul { margin: 1rem 0 0; padding-left: 1.1rem; max-width: 54rem; }
.sub_li { font-size: .93rem; line-height: 1.68; color: rgba(var(--ink-rgb), .82); margin-bottom: .45rem; }
.sub_sec--dark .sub_li { color: var(--bone-60); }

/* ── closing band with a button ─────────────────────────────────────────────── */
.sub_cta {
  background: var(--brand-deep); color: var(--bone);
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--gut);
  text-align: center;
}
.sub_cta h2 {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 3.4vw, 2.6rem); line-height: 1.12;
  margin-bottom: .8rem;
}
.sub_cta p { color: var(--bone-60); max-width: 40rem; margin: 0 auto 1.8rem; font-size: .95rem; line-height: 1.6; }
.sub_cta .btn--solid { background: var(--bone); color: var(--brand); border-color: var(--bone); }
.sub_cta .btn--solid:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); }

/* ══ ebar — Fahrplanleiste, fest am unteren Bildrand ══════════════════════════
      Kein iframe: das alte efa_light-iframe war ein 4-Feld-Formular (S, Z, date,
      time), das per POST auf fahrplan.vvt.at ging — dieser Weg ist tot, VVT
      leitet dorthin auf smartride.vvt.at um und verwirft dabei die Felder. Als
      GET auf /webapp/ greifen dieselben vier Parameter weiterhin, und weil wir
      das Formular selbst stellen, gehorcht es unserem Design.

      Achtung beim Datum: HAFAS will dd.mm.yy. Ein ISO-Wert wird still
      falschgelesen (2026-08-15 → 01.02.2090, null Treffer). Die sichtbaren
      Datum-/Zeitfelder tragen deshalb KEIN name, anfrage.js füllt die
      versteckten Felder beim Absenden um; leer bleiben sie abgeschaltet, dann
      sucht VVT ab "Jetzt".

      Die Leiste liegt über allem ausser Menü (100) und Popup (120); der Kopf
      (40) ist am anderen Bildrand und kommt ihr nicht in die Quere. Der Platz,
      den sie verdeckt, wird unten am <body> wieder angehängt — sonst läge sie
      auf dem Impressum. ─────────────────────────────────────────────────────*/
.ebar{
  --ebar-max:104rem;          /* Breite des zentrierten Inhalts, s. .ebar::after */
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--bone);color:var(--ink);
  border-top:1px solid rgba(var(--ink-rgb),.14);
  box-shadow:0 -.4rem 1.6rem rgba(var(--ink-rgb),.16);
}
.ebar_in{
  max-width:var(--ebar-max);margin:0 auto;
  display:grid;align-items:stretch;
  grid-template-columns:auto auto minmax(0,1.15fr) minmax(0,1.15fr) minmax(0,.72fr) minmax(0,.56fr) auto;
}
/* Haarlinien wie im Vorbild: jede Zelle trägt ihre linke Kante selbst */
.ebar_in>*+*{border-left:1px solid rgba(var(--ink-rgb),.14)}
.ebar_go{border-left:0}

.ebar_brand,.ebar_note{
  display:flex;align-items:center;white-space:nowrap;
  padding:0 clamp(.9rem,1.8vw,1.6rem);
}
.ebar_brand{
  font-family:var(--f-display);font-size:clamp(.85rem,1.15vw,1.05rem);
  letter-spacing:.02em;text-transform:uppercase;color:rgba(var(--ink-rgb),.62);
}
.ebar_brand b{font-weight:700;color:var(--ink);margin-right:.35em}
.ebar_note{font-size:.8125rem;color:rgba(var(--ink-rgb),.62)}

/* Feldzelle: Beschriftung oben, Eingabe darunter — dieselbe Ordnung wie im
   Vorbild, nur ohne Rahmen; die Zelle selbst ist der Rahmen. */
.ebar_f{
  display:grid;align-content:center;gap:.1rem;min-width:0;
  padding:clamp(.55rem,1.2vw,.8rem) clamp(.8rem,1.6vw,1.35rem);
}
/* .70 und nicht .55: die Beschriftung steht bei 9px, das zählt als kleiner
   Text und braucht 4,5:1. Bei .55 waren es auf dem weissen Grund der Leiste
   nur 3,98:1. */
.ebar_f>span{
  font-size:var(--fs-label);letter-spacing:.09em;text-transform:uppercase;
  font-weight:650;color:rgba(var(--ink-rgb),.70);
}
.ebar_f input{
  width:100%;padding:.1rem 0;
  font:inherit;font-size:.9375rem;font-weight:600;letter-spacing:normal;
  color:var(--ink);background:transparent;border:0;border-radius:0;
}
.ebar_f input:focus{outline:0}
.ebar_f input:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
/* Der Platzhalter ist hier nur ein Hinweis — die Beschriftung steht darüber —,
   aber Text bleibt Text: bei .42 misst er 2,69:1. */
.ebar_f ::placeholder{color:rgba(var(--ink-rgb),.60);font-weight:500}
.ebar_f input[type=date]::-webkit-calendar-picker-indicator,
.ebar_f input[type=time]::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer}
.ebar_f input[type=date]::-webkit-calendar-picker-indicator:hover,
.ebar_f input[type=time]::-webkit-calendar-picker-indicator:hover{opacity:1}

/* Der Knopf ist im Vorbild ein durchgefärbter Block über die volle Höhe.
   --brand-deep und nicht --brand: weiss auf --brand kommt nur auf 4,49:1. */
.ebar_go{
  display:flex;align-items:center;justify-content:center;
  padding:0 clamp(1.4rem,3vw,3rem);
  border:0;background:var(--brand-deep);color:var(--bone);cursor:pointer;
  font-family:var(--f-display);font-size:var(--fs-label);
  letter-spacing:.12em;text-transform:uppercase;font-weight:700;white-space:nowrap;
  transition:background-color .35s var(--ease);
}
.ebar_go:hover,.ebar_go:focus-visible{background:var(--ink)}

/* Der Knopf schliesst den zentrierten Inhalt nach rechts ab — auf breiten
   Schirmen endet dieser Inhalt aber vor dem Bildrand (bei 1920 bleiben je
   120 px), und rechts vom Knopf stand ein weisser Streifen. Dieser Zwickel
   wird in der Knopffarbe ausgemalt, damit der Block bis an den Rand läuft.
   Links bleibt der Streifen weiss und fällt nicht auf, weil die Leiste selbst
   weiss ist. Unterhalb von --ebar-max wird die Breite 0 und nichts gezeichnet. */
.ebar::after{
  content:"";position:absolute;top:0;bottom:0;right:0;
  width:max(0px,(100% - var(--ebar-max)) / 2);
  background:var(--brand-deep);pointer-events:none;
  transition:background-color .35s var(--ease);
}
.ebar:has(.ebar_go:hover)::after,
.ebar:has(.ebar_go:focus-visible)::after{background:var(--ink)}

/* ── Stufen: was zuerst geht, ist das Beiwerk, nie die Felder ───────────────
      < 78rem  ohne Zusatz ("Auskunft des VVT")
      < 64rem  ohne Wortmarke
      < 46rem  ohne Datum und Zeit — Start, Ziel, Suchen bleiben. Fehlen beide
               Zeitfelder, sucht VVT ab "Jetzt"; genau das will jemand, der
               unterwegs am Telefon die nächste Verbindung braucht. */
@media (max-width:78rem){
  .ebar_note{display:none}
  .ebar_in{grid-template-columns:auto minmax(0,1.15fr) minmax(0,1.15fr) minmax(0,.72fr) minmax(0,.56fr) auto}
}
@media (max-width:64rem){
  .ebar_brand{display:none}
  .ebar_in{grid-template-columns:minmax(0,1.15fr) minmax(0,1.15fr) minmax(0,.72fr) minmax(0,.56fr) auto}
}
@media (max-width:46rem){
  /* Die Leiste wird flacher — der reservierte Platz am <body> mit ihr */
  :root{--ebar-h:3.9rem}
  .ebar_f--when{display:none}
  .ebar_in{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}
  .ebar_go{padding:0 clamp(1rem,4vw,1.6rem)}
}

/* ══ npop — redaktionelles Popup (aus admin/ erzeugt) ═════════════════════════
      Kopfleiste in der Signalfarbe, Text auf Weiss — dieselbe Aufteilung wie
      der Hinweis der alten Seite, nur in den Schriften und Farben von hier.
      Sichtbar wird es erst durch [hidden]-Entfernen in popup.js: liegt der
      heutige Tag ausserhalb data-from/data-until, bleibt es weg. ─────────────*/
.npop{
  position:fixed;inset:0;z-index:120;
  display:grid;place-items:center;padding:clamp(1rem,4vw,2.5rem);
  opacity:0;transition:opacity .4s var(--ease);
}
.npop[hidden]{display:none}
.npop.is-on{opacity:1}
.npop_backdrop{position:absolute;inset:0;background:rgba(var(--ink-rgb),.72);cursor:pointer}
.npop_box{
  position:relative;width:min(46rem,100%);max-height:86vh;
  display:flex;flex-direction:column;
  background:var(--bone);color:var(--ink);
  box-shadow:0 2rem 5rem rgba(0,0,0,.45);
  transform:translateY(1.5rem) scale(.98);
  transition:transform .5s var(--ease-out);
}
.npop.is-on .npop_box{transform:none}

.npop_head{
  display:flex;align-items:flex-start;gap:1rem;
  padding:clamp(1.1rem,2.5vw,1.6rem) clamp(1.2rem,3vw,2rem);
  background:var(--accent);color:var(--bone);
}
.npop--info .npop_head{background:var(--brand-deep)}
.npop--dark .npop_head{background:var(--ink)}
.npop_h{
  margin:0;flex:1;
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.1rem,2.4vw,1.6rem);line-height:1.2;letter-spacing:-.01em;
}
.npop_x{
  /* 2.75rem wie Burger und Kopf-Knopf — eine Trefferfläche für alle */
  flex:none;width:2.75rem;height:2.75rem;margin:-.5rem -.7rem 0 0;
  display:grid;place-items:center;
  border:0;border-radius:50%;background:transparent;color:inherit;
  font-size:1.6rem;line-height:1;cursor:pointer;
  transition:background-color .3s var(--ease);
}
.npop_x:hover,.npop_x:focus-visible{background:rgba(255,255,255,.22)}

.npop_body{
  overflow-y:auto;
  padding:clamp(1.2rem,3vw,2rem);
  font-size:.9375rem;line-height:1.65;
}
.npop_body p{margin:0 0 1em}
.npop_body p:last-child{margin-bottom:0}
.npop_body strong{font-weight:700}
.npop_body a{color:var(--brand-txt);text-decoration:underline;text-underline-offset:.15em}
.npop_body a:hover{color:var(--ink)}

@media (prefers-reduced-motion: reduce){
  .npop,.npop_box{transition:none}
}