/* ============================================================
   STARTHAUS Oberwiesenthal — Design-System "Nachtski"
   base.css · Tokens, Reset, Typografie, Layout, Komponenten
   ============================================================ */

/* ---------- Fonts (self-hosted, NAS-tauglich, keine externen Requests) ---------- */
@font-face{
  font-family:'Archivo';
  src:url('../fonts/archivo-latin-ext-wdth-normal.woff2') format('woff2-variations');
  font-weight:100 900; font-stretch:62% 125%; font-display:swap;
  unicode-range:U+0000-00FF,U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'InterVar';
  src:url('../fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
  font-weight:100 900; font-display:swap;
}
@font-face{
  font-family:'SpaceMono';
  src:url('../fonts/space-mono-latin-ext-400-normal.woff2') format('woff2');
  font-weight:400; font-display:swap;
}
@font-face{
  font-family:'SpaceMono';
  src:url('../fonts/space-mono-latin-ext-700-normal.woff2') format('woff2');
  font-weight:700; font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  /* Farben — Nachtskihang am Fichtelberg */
  --night:#070C12;
  --bg:#0A1017;
  --bg-2:#0D141D;
  --panel:#111A24;
  --panel-2:#16212C;

  --snow:#F4F9FD;
  --text:#BDCAD6;
  --soft:#7C8B99;
  --dim:#5A6773;

  --ice:#8FD3F4;          /* kalter Leitakzent */
  --ice-deep:#2C6B95;
  --flut:#FFB25C;         /* Flutlicht — warmer Akzent */
  --flut-deep:#C77B2E;
  --pine:#7FA98C;         /* Sommer / Wandern */

  --line:rgba(196,214,230,.10);
  --line-2:rgba(196,214,230,.20);
  --line-3:rgba(196,214,230,.34);

  /* Typografie */
  --disp:'Archivo',system-ui,sans-serif;
  --mono:'SpaceMono',ui-monospace,monospace;
  --body:'InterVar','Inter',system-ui,sans-serif;

  /* Maße */
  --wrap:1280px;
  --gut:clamp(20px,4vw,56px);
  --nav-h:82px;                 /* mit dem größeren Logo braucht die Leiste Luft */
  --r:16px;
  --r-l:24px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* laufender Sektionsakzent (Cursor + Details) */
  --accent:var(--ice);
  --cur-accent:143,211,244;
}

*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 16px);
}
/* NIE overflow-x:hidden — das zerstört position:sticky */
html,body{overflow-x:clip}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:clamp(15.5px,.42vw + 14.5px,17px);
  line-height:1.65;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:rgba(143,211,244,.28);color:var(--snow)}

:focus-visible{
  outline:2px solid var(--ice);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- Layout ---------- */
.wrap{width:min(100% - var(--gut)*2, var(--wrap));margin-inline:auto}
.wrap-wide{width:min(100% - var(--gut)*2, 1520px);margin-inline:auto}
.sec{position:relative;padding:clamp(72px,9vw,140px) 0}
.sec--tight{padding:clamp(56px,6vw,96px) 0}

/* ---------- Typografie ---------- */
.disp{
  font-family:var(--disp);
  font-weight:800;
  font-variation-settings:'wdth' 112;
  letter-spacing:-.022em;
  line-height:.94;
  color:var(--snow);
  text-wrap:balance;
}
.d1{font-size:clamp(2.9rem,8.6vw,7.4rem)}
.d2{font-size:clamp(2.3rem,5.4vw,4.5rem)}
.d3{font-size:clamp(1.6rem,2.6vw,2.5rem);font-variation-settings:'wdth' 104;line-height:1.02}
.d4{font-size:clamp(1.15rem,1.5vw,1.4rem);font-variation-settings:'wdth' 100;font-weight:700;line-height:1.2}

.disp--wide{font-variation-settings:'wdth' 125;font-weight:900}
.tint{color:var(--accent)}
.muted{color:var(--soft)}
.lead{font-size:clamp(1.02rem,1.05vw + .78rem,1.24rem);line-height:1.62;color:var(--text);max-width:62ch}
.small{font-size:.86rem;line-height:1.55;color:var(--soft);max-width:68ch}
/* Zwei Fußnoten hintereinander klebten aneinander — der Stern und der
   Doppelstern lasen sich als ein Absatz. */
.small + .small{margin-top:10px}

/* Eyebrow — Startnummer-Optik */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;
  color:var(--accent);
}
.eyebrow::before{
  content:'';width:22px;height:1px;background:currentColor;opacity:.7;
}
.eyebrow--num::before{display:none}
.eyebrow .num{
  display:inline-grid;place-items:center;
  min-width:26px;height:20px;padding:0 6px;
  border:1px solid currentColor;border-radius:3px;
  font-size:10px;letter-spacing:.08em;opacity:.9;
}

/* Der Kopf jedes Abschnitts bekommt eine Linie, die sich beim Einblenden
   zieht. Ein Strich, der andeutet: hier fängt etwas Neues an. */
.sec-head{
  position:relative;display:flex;flex-direction:column;gap:18px;
  margin-bottom:clamp(36px,4.5vw,64px);padding-top:22px;
}
.sec-head::before{
  content:'';position:absolute;left:0;top:0;height:2px;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--accent,var(--ice)),transparent);
  transition:width 1.1s var(--ease-out) .12s;
}
.sec-head.in::before{width:min(180px,32%)}
.sec-head .lead{margin-top:4px;max-width:62ch}
@media (prefers-reduced-motion:reduce){.sec-head::before{transition:none;width:min(180px,32%)}}

/* ---------- Ambient (Höhenlinien, Orbs, Rauschen) ---------- */
.ambient{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.ambient .orb{
  position:absolute;border-radius:50%;filter:blur(130px);opacity:.34;
  transition:background .9s var(--ease);
}
.ambient .orb-a{width:52vw;height:52vw;left:-16vw;top:-12vw;background:#17415f}
.ambient .orb-b{width:46vw;height:46vw;right:-14vw;top:38vh;background:#4a2f16}
.ambient .hoehen{
  position:absolute;inset:-10% -5%;opacity:.5;
  background-repeat:repeat;
  background-size:1400px 900px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='900' viewBox='0 0 1400 900'%3E%3Cg fill='none' stroke='%238FD3F4' stroke-opacity='.10' stroke-width='1'%3E%3Cpath d='M-50 700C150 640 260 690 420 650s250-90 430-60 300 100 470 60 180-60 180-60'/%3E%3Cpath d='M-50 620C170 556 280 612 440 570s250-92 430-60 300 100 470 58 180-62 180-62'/%3E%3Cpath d='M-50 540C190 470 300 534 460 490s250-94 430-60 300 100 470 56 180-64 180-64'/%3E%3Cpath d='M-50 460C210 384 320 456 480 410s250-96 430-60 300 100 470 54 180-66 180-66'/%3E%3Cpath d='M-50 380C230 298 340 378 500 330s250-98 430-60 300 100 470 52 180-68 180-68'/%3E%3Cpath d='M-50 300C250 212 360 300 520 250s250-100 430-60 300 100 470 50 180-70 180-70'/%3E%3Cpath d='M-50 220C270 126 380 222 540 170s250-102 430-60 300 100 470 48 180-72 180-72'/%3E%3Cpath d='M-50 140C290 40 400 144 560 90s250-104 430-60 300 100 470 46 180-74 180-74'/%3E%3C/g%3E%3C/svg%3E");
  mask-image:radial-gradient(120% 90% at 50% 10%,#000 10%,transparent 76%);
  transform:translate3d(var(--hx,0px),var(--hy,0px),0);
  transition:transform 1.4s cubic-bezier(.16,1,.3,1);
}
.ambient .noise{
  position:absolute;inset:-50%;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
main,header,footer{position:relative;z-index:1}

/* Höhenlinien-Trenner */
.contour{
  height:120px;width:100%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%238FD3F4' stroke-opacity='.16'%3E%3Cpath d='M0 84C120 60 220 96 340 78s200-54 330-34 260 62 380 40 150-40 150-40'/%3E%3Cpath d='M0 62C140 44 240 74 360 58s210-46 330-28 250 50 360 30 150-32 150-32'/%3E%3Cpath d='M0 40C150 26 250 52 380 38s200-38 320-22 240 40 350 22 150-26 150-26'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat;
  pointer-events:none;
}

/* ---------- Buttons ---------- */
.btn{
  --bh:52px;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  min-height:var(--bh);padding:0 26px;border-radius:999px;
  font-family:var(--mono);font-size:12.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;
  border:1px solid transparent;cursor:pointer;
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease),background .35s var(--ease),color .3s,border-color .3s;
  will-change:transform;
}
.btn .arw{transition:transform .35s var(--ease-out)}
.btn:hover .arw{transform:translateX(4px)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

.btn-ice{
  background:linear-gradient(135deg,#a7ddf7,#5aa9d4);
  color:#06222f;box-shadow:0 10px 30px -12px rgba(143,211,244,.6);
}
.btn-ice:hover{box-shadow:0 18px 44px -14px rgba(143,211,244,.75)}

.btn-flut{
  background:linear-gradient(135deg,#ffc274,#e08a30);
  color:#2a1502;box-shadow:0 10px 30px -12px rgba(255,178,92,.55);
}
.btn-flut:hover{box-shadow:0 18px 44px -14px rgba(255,178,92,.7)}

.btn-ghost{
  background:rgba(255,255,255,.02);
  border-color:var(--line-2);color:var(--snow);
  backdrop-filter:blur(8px);
}
.btn-ghost:hover{border-color:var(--line-3);background:rgba(255,255,255,.05)}

/* 44 px, nicht 42: das ist die Mindestgröße, die man auf einem Handy
   zuverlässig trifft. Der Abstands-Prüfer hat die zwei Pixel zu Recht
   angemahnt — sie kosten optisch nichts und tragen spürbar. */
.btn-sm{--bh:44px;padding:0 18px;font-size:11.5px}

/* Textlink mit Unterstrich-Draw */
.tlink{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--mono);font-size:12px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--accent);
  padding-bottom:3px;background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .45s var(--ease-out);
;min-height:44px;display:inline-flex;align-items:center}
.tlink:hover{background-size:100% 1px}

/* ---------- Karten ---------- */
.card{
  position:relative;
  background:linear-gradient(160deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);border-radius:var(--r-l);
  overflow:hidden;
  transition:border-color .4s var(--ease),transform .5s var(--ease-out),box-shadow .5s var(--ease);
}
.card:hover{border-color:var(--line-2);transform:translateY(-4px);box-shadow:0 26px 60px -30px rgba(0,0,0,.9)}
.card--hi{border-color:rgba(143,211,244,.36)}
.card--hi::before{
  content:'';position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:radial-gradient(70% 55% at 50% 0%,rgba(143,211,244,.16),transparent 70%);
}

/* ---------- Bilder ---------- */
.ph{position:relative;overflow:hidden;background:#0d151d}
.ph img{width:100%;height:100%;object-fit:cover}
.ph--r{border-radius:var(--r-l)}
.zoomable img{transition:transform 1.1s var(--ease-out)}
.zoomable:hover img{transform:scale(1.045)}

/* ---------- Reveals ---------- */
/* Einblenden mit einem Hauch Unschärfe — das Auge liest den Übergang
   als Tiefenschärfe statt als Überblendung. Kostet nichts, wirkt sofort. */
.rv{opacity:0;transform:translateY(26px);filter:blur(6px);
  transition:opacity .85s var(--ease-out),transform .85s var(--ease-out),filter .7s var(--ease-out)}
.rv.in{filter:none}
.rv.in{opacity:1;transform:none}
.rv.dl1{transition-delay:.09s}.rv.dl2{transition-delay:.18s}
.rv.dl3{transition-delay:.27s}.rv.dl4{transition-delay:.36s}
.rv.dl5{transition-delay:.45s}.rv.dl6{transition-delay:.54s}

/* ---------- Navigation ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:var(--nav-h);
  transition:background .4s var(--ease),border-color .4s,backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
/* .78 waren zu durchsichtig: große helle Überschriften schienen durch die
   Leiste hindurch und die Navigation wirkte kaputt. Dazu ein weicher
   Auslauf nach unten, damit die Kante nicht abrupt abbricht. */
.nav.stuck{
  background:rgba(8,13,19,.93);backdrop-filter:blur(22px) saturate(1.35);
  border-bottom-color:var(--line);
}
.nav.stuck::after{
  content:'';position:absolute;left:0;right:0;top:100%;height:26px;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,13,19,.55),transparent);
}
@media(max-width:900px){
  .nav.stuck{background:rgba(8,13,19,.97)}
}
.nav .row{display:flex;align-items:center;gap:clamp(12px,2vw,32px);height:100%}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0;min-height:44px}
/* Das Logo trägt die Marke — 30 px waren zu bescheiden. */
.brand img{height:42px;width:auto}
.brand .sub{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--soft);line-height:1;
  padding-left:11px;border-left:1px solid var(--line-2);
}
.nav-links{display:flex;align-items:center;gap:clamp(10px,1.5vw,26px);margin-left:auto}
.nav-links a{
  position:relative;font-family:var(--mono);font-size:11.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text);
  padding:6px 2px;min-height:44px;display:inline-flex;align-items:center;
  transition:color .3s;
}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:2px;height:1px;width:0;
  background:var(--ice);transition:width .4s var(--ease-out);
}
.nav-links a:hover{color:var(--snow)}
.nav-links a:hover::after,.nav-links a[aria-current]::after{width:100%}
.nav-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.lang{display:flex;align-items:center;gap:2px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em}
.lang a{padding:6px 8px;min-width:44px;justify-content:center;color:var(--dim);min-height:44px;display:inline-flex;align-items:center;transition:color .25s}
.lang a[aria-current]{color:var(--snow)}
.lang a:hover{color:var(--ice)}
.lang span{color:var(--line-3)}

.burger{
  display:none;width:44px;height:44px;place-items:center;
  background:none;border:1px solid var(--line-2);border-radius:12px;cursor:pointer;
}
.burger i{display:block;width:17px;height:1.5px;background:var(--snow);position:relative;transition:.3s var(--ease)}
.burger i::before,.burger i::after{content:'';position:absolute;left:0;width:17px;height:1.5px;background:var(--snow);transition:.3s var(--ease)}
.burger i::before{top:-5.5px}.burger i::after{top:5.5px}
html.menu-open .burger i{background:transparent}
html.menu-open .burger i::before{transform:translateY(5.5px) rotate(45deg)}
html.menu-open .burger i::after{transform:translateY(-5.5px) rotate(-45deg)}

.drawer{
  position:fixed;inset:var(--nav-h) 0 0;z-index:190;
  background:rgba(7,12,18,.97);backdrop-filter:blur(20px);
  padding:32px var(--gut) 48px;
  display:flex;flex-direction:column;gap:6px;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;
  overflow-y:auto;
}
html.menu-open .drawer{opacity:1;visibility:visible;transform:none}
.drawer a{
  font-family:var(--disp);font-weight:700;font-variation-settings:'wdth' 108;
  font-size:clamp(1.6rem,7vw,2.2rem);color:var(--snow);
  padding:11px 0;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
}
.drawer a span{font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:.1em}
.drawer .foot{margin-top:26px;display:flex;flex-direction:column;gap:14px}

@media(max-width:1080px){
  .nav-links{display:none}
  .burger{display:grid}
  .nav .lang{display:none}          /* wandert in den Drawer */
}
@media(max-width:560px){
  .brand .sub{display:none}
  .brand img{height:34px}
  .nav-actions{gap:8px}
  .nav-actions .btn{--bh:44px;padding:0 14px;font-size:10px;letter-spacing:.09em}
  .nav-actions .btn .arw{display:none}
}
@media(max-width:400px){
  .nav-actions .btn{padding:0 11px;font-size:9.5px}
  .burger{width:44px;height:44px}
}
/* Sprachwahl im Drawer */
.drawer .lang{margin-top:22px;justify-content:flex-start;gap:6px}
.drawer .lang a{font-family:var(--mono);font-size:12px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;letter-spacing:.12em}
.drawer .lang a[aria-current]{border-color:var(--line-3);color:var(--snow)}
@media(min-width:1081px){.drawer{display:none}}

/* Tippflächen auf schmalen Screens — Layout bleibt, Kasten wird höher */
@media(max-width:760px){
  .tlink{min-height:44px}
  .lang a{min-height:44px}
}

/* ---------- Footer ---------- */
.foot{
  border-top:1px solid var(--line);
  padding:clamp(56px,6vw,88px) 0 34px;
  background:linear-gradient(180deg,transparent,rgba(7,12,18,.7));
}
.foot-grid{
  display:grid;gap:clamp(30px,4vw,56px);
  grid-template-columns:1.5fr 1fr 1fr 1.2fr;
}
.foot h4,.foot .foot-h{
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.19em;
  text-transform:uppercase;color:var(--ice);margin-bottom:16px;
}
.foot li{margin-bottom:0}
/* 18 auf 44 Pixel. Der Rand am li ist weg: der Abstand steckt jetzt in
   der Höhe des Links selbst, sonst wäre die Fußzeile nur luftiger
   geworden, ohne dass man besser trifft. */
.foot li a{color:var(--soft);font-size:.92rem;transition:color .25s;
  display:inline-flex;align-items:center;min-height:44px}
.foot li a:hover{color:var(--snow)}
.foot-bot{
  margin-top:clamp(40px,5vw,64px);padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:space-between;
  font-size:.8rem;color:var(--dim);
}
.foot-bot nav{display:flex;flex-wrap:wrap;gap:8px 20px}
/* Auch die kleinen Rechtslinks sind Tippziele — AGB war 23 auf 37 Pixel. */
.foot-bot a{transition:color .25s;min-height:44px;display:inline-flex;
  align-items:center;justify-content:center;min-width:44px;padding:0 2px}
.foot-bot a:hover{color:var(--text)}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){
  .foot-grid{grid-template-columns:1fr}
  .foot li a,.foot-bot a{min-height:44px;display:inline-flex;align-items:center}
}

/* ---------- Utility ---------- */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{
  position:fixed;top:8px;left:8px;z-index:999;transform:translateY(-160%);
  background:var(--ice);color:#06222f;padding:12px 20px;border-radius:10px;
  min-height:44px;display:inline-flex;align-items:center;
  font-family:var(--mono);font-size:12px;font-weight:700;transition:transform .25s;
}
.skip:focus{transform:none}

/* Verweise im Kleingedruckten sind trotzdem Tippziele. Der negative Rand
   hält den Zeilenabstand, das Padding vergrößert die Fläche — sonst ist
   der AGB-Link 26 auf 15 Pixel groß.

   `small a` gehört ausdrücklich dazu: <small> ist ein Element, keine
   Klasse, und `.small a` greift dort nicht. Und `display:inline-block`
   ist der eigentliche Punkt — bei `inline` wirkt vertikales Padding
   nicht auf die Trefferfläche. */
small a,.small a,.fine a,.hint a,.tbl-note a,a.tlink{
  display:inline-block;padding:14px 10px;margin:-14px -10px;
}

/* Telefon und Mail stehen im Impressum in einem ganz normalen Absatz —
   ohne Klasse, also greift die Regel darüber nicht. Sie waren 20 Pixel
   hoch. Genau die zwei Links, die man am ehesten antippt. */
.prose a[href^="tel:"],.prose a[href^="mailto:"],
p a[href^="tel:"],p a[href^="mailto:"]{
  display:inline-block;padding:12px 4px;margin:-12px -4px;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .rv{opacity:1;transform:none}
}

/* ---------- Navigation mit Untermenüs (Original-Aufbau) ---------- */
/* NUR die oberste Liste liegt waagerecht. Als Nachfahren-Regel traf sie
   auch das Untermenü — dort standen die Einträge dann nebeneinander und
   brachen mitten im Wort um („SAISON / SKI / MIETE"). */
.nav-links > ul{display:flex;align-items:center;gap:clamp(8px,1.4vw,22px)}
.nav-links li{position:relative}
.nav-links .caret{
  display:inline-block;width:5px;height:5px;margin-left:7px;vertical-align:2px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg);opacity:.55;transition:transform .3s var(--ease),opacity .3s;
}
.nav-links .has-sub:hover .caret{transform:rotate(225deg) translate(-2px,-2px);opacity:1}
.nav-links .sub{
  position:absolute;top:calc(100% + 6px);left:-14px;
  display:block;width:max-content;min-width:230px;max-width:300px;
  padding:8px;border-radius:16px;
  background:linear-gradient(180deg,rgba(16,25,35,.97),rgba(9,14,20,.97));
  backdrop-filter:blur(18px) saturate(1.2);
  border:1px solid var(--line-2);box-shadow:0 30px 70px -28px rgba(0,0,0,.94);
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top left;
  transition:opacity .26s var(--ease),transform .3s var(--ease-out),visibility .3s;
}
/* Eine unsichtbare Brücke: sonst klappt das Menü zu, sobald der Zeiger
   den Spalt zwischen Reiter und Feld überquert. */
.nav-links .has-sub::after{
  content:'';position:absolute;left:0;right:0;top:100%;height:10px;
}
.nav-links .has-sub:hover .sub,.nav-links .has-sub:focus-within .sub{
  opacity:1;visibility:visible;transform:none;
}
.nav-links .sub li{display:block}
.nav-links .sub a{
  display:flex;align-items:center;gap:10px;
  padding:11px 13px;border-radius:10px;min-height:44px;
  letter-spacing:.1em;color:var(--soft);white-space:nowrap;
  transition:background .22s,color .22s,padding-left .28s var(--ease-out);
}
.nav-links .sub a::after{display:none}
.nav-links .sub a::before{
  content:'';width:4px;height:4px;border-radius:50%;flex:none;
  background:var(--ice);opacity:0;transform:scale(.4);
  transition:opacity .22s,transform .28s var(--ease-out);
}
.nav-links .sub a:hover,.nav-links .sub a:focus-visible{
  background:rgba(143,211,244,.1);color:var(--snow);padding-left:15px;
}
.nav-links .sub a:hover::before,.nav-links .sub a[aria-current]::before{opacity:1;transform:none}
.nav-links .sub a[aria-current]{color:var(--snow)}

/* Drawer-Gruppen */
.drawer .dgrp{margin-bottom:14px}
.drawer .dgrp-t{
  display:block;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.19em;
  text-transform:uppercase;color:var(--ice);margin:14px 0 4px;
}
.drawer .dgrp a{font-size:clamp(1.25rem,5.4vw,1.7rem);padding:9px 0}

/* ---------- Live-Öffnungsstatus ----------
   Beantwortet die Frage, die eine Zeitentabelle offen lässt:
   kann ich JETZT hin? */
.zeitampel{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 14px 8px 12px;border-radius:999px;
  background:rgba(255,255,255,.03);border:1px solid var(--line);
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--soft);
  transition:border-color .4s,color .4s,background .4s;
}
.zeitampel .zt-punkt{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--dim);box-shadow:0 0 0 0 rgba(127,169,140,.5);
}
.zeitampel.zu-offen{color:var(--snow);border-color:rgba(127,169,140,.45);background:rgba(127,169,140,.1)}
.zeitampel.zu-offen .zt-punkt{background:var(--pine);animation:ampelPuls 2.4s var(--ease) infinite}
.zeitampel.zu-knapp{border-color:rgba(255,178,92,.45);background:rgba(255,178,92,.1)}
.zeitampel.zu-knapp .zt-punkt{background:var(--flut);animation-duration:1.3s}
.zeitampel.zu-zu .zt-punkt{background:rgba(196,214,230,.34)}
@keyframes ampelPuls{
  0%{box-shadow:0 0 0 0 rgba(127,169,140,.55)}
  70%{box-shadow:0 0 0 8px rgba(127,169,140,0)}
  100%{box-shadow:0 0 0 0 rgba(127,169,140,0)}
}
@media (prefers-reduced-motion:reduce){.zeitampel .zt-punkt{animation:none}}
body.rm .zeitampel .zt-punkt{animation:none}
.za-hero{margin-bottom:18px}
.kon-card .zeitampel{margin:16px 0 4px}

/* ============================================================
   Veredelung
   ============================================================ */

/* ---------- Seitenübergänge ----------
   View Transitions: der Browser blendet zwischen zwei Seiten über,
   statt weiß aufzublitzen. Wo es die API nicht gibt, passiert einfach
   nichts — kein Ersatzcode, kein Risiko. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtRaus .22s var(--ease) both}
::view-transition-new(root){animation:vtRein .34s var(--ease-out) both}
@keyframes vtRaus{to{opacity:0}}
@keyframes vtRein{from{opacity:0;transform:translateY(8px)}}
/* Kopfleiste und Fußbereich bleiben stehen — sonst wandert die
   Navigation bei jedem Klick, und das wirkt unruhig statt edel. */
.nav{view-transition-name:kopfleiste}
.foot{view-transition-name:fussbereich}
.rail{view-transition-name:verzeichnis}
::view-transition-group(kopfleiste),
::view-transition-group(fussbereich),
::view-transition-group(verzeichnis){animation-duration:.001s}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ---------- Fokus, der etwas taugt ----------
   Vorher gab es einen Ring. Jetzt einen, den man auf jedem Untergrund
   sieht — heller Kern, dunkler Saum. */
:focus-visible{
  outline:2px solid var(--ice);
  outline-offset:3px;
  border-radius:6px;
  box-shadow:0 0 0 5px rgba(6,10,15,.75);
}
.btn:focus-visible,.chip:focus-visible,.art:focus-visible,
.sale-tag:focus-visible,.merk-knopf:focus-visible,.nav-suche:focus-visible{
  outline-offset:3px;
}
/* Mausklick soll keinen Ring hinterlassen — Tastatur schon. */
:focus:not(:focus-visible){outline:none}

/* ---------- Auswahl ---------- */
::selection{background:rgba(143,211,244,.3);color:var(--snow)}

/* ---------- Mikro-Typografie ---------- */
.disp{text-wrap:balance}
.lead,p.small,.tb p{text-wrap:pretty}
.tbl td .eur,.mt-p,.sk-ab,.sr-wert b,.st-proz i{font-variant-numeric:tabular-nums}
abbr[title]{text-decoration:underline dotted;text-underline-offset:3px;cursor:help}

/* ---------- Ladefortschritt beim Seitenwechsel ----------
   Die Leiste, die sonst nur den Scrollstand zeigt, meldet auch, dass
   ein Klick angekommen ist. Auf einer langsamen Leitung ist das der
   Unterschied zwischen „kaputt" und „gleich da". */
.progress.laedt i{
  animation:ladeBalken 1.4s var(--ease-out) infinite;
  background:linear-gradient(90deg,var(--ice),var(--flut));
}
@keyframes ladeBalken{
  0%{transform:scaleX(0);transform-origin:left}
  55%{transform:scaleX(.75);transform-origin:left}
  100%{transform:scaleX(1);transform-origin:right}
}
@media (prefers-reduced-motion:reduce){.progress.laedt i{animation:none}}

/* ---------- [hidden] muss gewinnen ----------
   Klassische Falle: das Attribut hidden setzt display:none nur über das
   Browser-Grundblatt. Jede eigene display-Regel schlägt es. Real passiert:
   der Merkzettel stand mit „0" am Rand, und das Suchfenster blieb nach dem
   Schließen liegen. Deshalb hier einmal ausdrücklich. */
[hidden]{display:none !important}