/* ============================================================
   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;
}
/*  Die Pinselschrift für den einen Satz „Das wird dein Winter".
 *
 *  RENÉ WOLLTE SIE, UND ER SOLL SIE HABEN — nur nicht die alte.
 *
 *  Erst stand hier Archivo kursiv als Ersatz. Am 14.08.2026 kam die
 *  Originalschrift von seiner Seite hinein („Syabab Brush Script") und
 *  am selben Tag wieder heraus: auf Nachfrage schrieb er
 *  „Da haben wir keine Lizenz. Wir haben es einfach so geschrieben."
 *  Eine unlizenzierte Schrift auf einer Geschäftsseite ist eine
 *  Abmahnung mit Ansage.
 *
 *  Jetzt YELLOWTAIL unter der SIL Open Font License — frei nutzbar,
 *  auch gewerblich, auch selbst ausgeliefert. Ausgewählt aus vier
 *  Kandidaten (Caveat Brush, Pacifico, Courgette, Yellowtail) im
 *  direkten Vergleich gegen das Original: gleicher Schrägzug,
 *  verbundene Pinselschrift, ähnlicher Rhythmus. Caveat Brush steht
 *  aufrecht und verbindet nicht, Pacifico ist runder und schwerer,
 *  Courgette zu zart. Yellowtail kommt am nächsten — und ist mit
 *  28 KB für beide Zeichensätze zugleich die kleinste.
 *
 *  ZWEI DATEIEN, nicht eine: „latin" trägt Ä Ö Ü ä ö ü ß, „latin-ext"
 *  die tschechischen Zeichen (ě š č ř ž ...). Der Abbinder steht auf
 *  allen drei Sprachfassungen — ohne den zweiten Satz stünde auf der
 *  tschechischen Seite ein Kasten statt eines Buchstabens.
 *
 *  Selbst ausgeliefert, nicht über Google. Die Datenschutzerklärung
 *  sagt zu, dass die Seite nichts von fremden Rechnern nachlädt.
 */
/*  ENTSCHEIDUNG JONAS, 14.08.2026: das Original bleibt vorerst drin.
 *  „Lass es einfach drin, ist egal. Da kümmern wir uns später drum."
 *
 *  Der Stand der Dinge, damit ihn niemand nachschlagen muss:
 *  René hat KEINE Lizenz für diese Schrift („wir haben es einfach so
 *  geschrieben"). Auf der Vorschau ist das verkraftbar — sie steht auf
 *  noindex und niemand findet sie. VOR DEM LIVEGANG ist es ein Risiko,
 *  und zwar eines mit Rechnung: Abmahnungen wegen Schriftlizenzen sind
 *  ein eigenes Geschäftsmodell.
 *
 *  Deshalb diese Reihenfolge: Original zuerst, Yellowtail direkt
 *  dahinter. Wer die Datei löscht, bekommt automatisch die lizenzierte
 *  Schrift — kein CSS anfassen, keine Suche, kein Loch im Abbinder.
 *  Das ist der Ausschalter, und er ist genau einen Handgriff groß.
 *
 *  → Steht als offener Punkt in der ARBEITSLISTE.
 */
@font-face{
  font-family:'SyababOriginal';
  src:url('../fonts/starthaus-schreib.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'StarthausSchreib';
  src:url('../fonts/yellowtail-latin-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'StarthausSchreib';
  src:url('../fonts/yellowtail-latin-ext-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

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

  --snow:#F4F9FD;
  --text:#BDCAD6;
  --soft:#7C8B99;
  /* Aufgehellt am 08.08.2026 von #5A6773.
     Gemessen über alle 15 deutschen Seiten mit korrekter
     Alpha-Komposition: der alte Ton ergab auf dem Seitengrund 3,29,
     auf Karten sogar nur 2,81 — gefordert sind 4,5 für Fließtext.
     Betroffen war lauter Kleingedrucktes: Jahreszahl in der Fußzeile,
     Sprachwahl, Kennziffern der Vorteilskacheln, die Hinweise unter
     den Formularen, der Satz unter dem Preisrechner. Also genau die
     Texte, die ohnehin schwer zu lesen sind.
     #7C8995 erreicht auf allen drei Untergründen mindestens 4,56 —
     Seitengrund, Panel und Panel-2 durchgerechnet, nicht geschätzt.
     Der Ton bleibt ein zurückhaltendes Grau; es ist der kleinste
     Schritt, der die Grenze überall überschreitet. */
  --dim:#7C8995;

  --ice:#8FD3F4;          /* kalter Leitakzent */
  --ice-deep:#2C6B95;
  --flut:#FFB25C;         /* Flutlicht — warmer Akzent */
  /*  Dieselbe Farbe als SCHRIFT. Im Nachthimmel ist das dasselbe Orange;
      der Hell-Schalter in bereiche.css setzt es auf eine tragfähige
      Fassung um. Wer künftig Flutlicht als Textfarbe setzt, nimmt dieses
      Token — sonst steht es auf hellen Seiten bei 1,7 : 1.  */
  --flut-schrift:var(--flut);
  --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 */
  /*  --schreib — die Schreibschrift für „Das wird dein Winter".
   *
   *  Auf Renés laufender Seite steht dieser eine Satz in einer
   *  Pinselschrift. Sie ist das einzige handgeschriebene Element im
   *  ganzen Auftritt, und genau deshalb wirkt sie.
   *
   *  Hier liegt noch keine Schriftdatei. Solange das so ist, greift
   *  die Ersatzangabe: Archivo, kursiv gestellt und in der schmalsten
   *  Achse. Das sieht sauber aus, ist aber NICHT das Original.
   *
   *  SO KOMMT DIE ECHTE SCHRIFT HINEIN — drei Handgriffe:
   *
   *    1. Die .woff2-Datei nach  site/assets/fonts/  legen.
   *    2. Hier den Namen an den Anfang der Liste setzen.
   *    3. Unten in diesem Block das @font-face ergänzen (Muster steht
   *       auskommentiert direkt darunter).
   *
   *  Welche Schrift? Am schnellsten geht es, wenn René sie aus dem
   *  All-Inkl-Zugang seiner alten Seite holt — dort liegt sie schon
   *  und ist für ihn lizenziert. Zweitbester Weg: eine frei
   *  lizenzierte Pinselschrift mit SIL-Open-Font-Lizenz, die auch
   *  Umlaute kann (Ä, Ö, Ü) — das können längst nicht alle.
   *
   *  Keine Google-Fonts-Einbindung über deren Server: die Seite lädt
   *  ausdrücklich nichts von fremden Rechnern (siehe
   *  Datenschutzerklärung). Die Datei wird selbst ausgeliefert. */
    --schreib:'SyababOriginal','StarthausSchreib','Archivo',system-ui,sans-serif;

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

/*  AUF DEM HANDY OHNE UNSCHÄRFE — und kürzer.

    René und Jonas am 18.08.2026 zum Scrollen auf dem Telefon: „wie die
    Kästen werden … das könnte noch alles flüssiger sein."

    Die Unschärfe ist der teure Teil. `filter:blur()` zwingt den Browser,
    jede Kachel bei jedem Einzelbild neu zu zeichnen, statt sie fertig
    auf der Grafikeinheit zu schieben — auf einem Telefon reicht das,
    um aus einer weichen Blende ein Stocken zu machen. Sie war als
    Tiefenschärfe gedacht und ist bei Kachelgröße auf 390 px ohnehin
    kaum zu sehen. Also raus: es bleiben Deckkraft und Verschiebung,
    und die beiden laufen ohne Neuzeichnen.

    Dazu kürzere Wege und Zeiten. 26 px über 0,85 s wirken auf einem
    kleinen Schirm nicht ruhig, sondern zäh — man hat die Kachel schon
    gelesen, während sie noch ankommt. 14 px über 0,45 s ist derselbe
    Gedanke in der Zeit, die das Auge tatsächlich braucht.

    Die Staffelung wird mitgekürzt: bei sechs Kacheln lagen zwischen
    der ersten und der letzten 0,54 s reine Wartezeit. Jetzt 0,24 s.  */
@media (max-width:820px){
  .rv{transform:translateY(14px);filter:none;
      transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
  .rv.dl1{transition-delay:.04s}.rv.dl2{transition-delay:.08s}
  .rv.dl3{transition-delay:.12s}.rv.dl4{transition-delay:.16s}
  .rv.dl5{transition-delay:.20s}.rv.dl6{transition-delay:.24s}
}

/* ---------- 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 */
}
/*  Der schmale Streifen zwischen Burger-Umschaltpunkt und breitem
    Schirm: Menüleiste ja, aber der Untertitel muss weichen. Er ist
    119 px breit, und genau die fehlten dem Reservieren-Knopf, der
    sonst rechts aus dem Bild läuft. Die Marke steht ohnehin im Logo;
    „Oberwiesenthal am Fichtelberg" ist die Zugabe, nicht der Name. */
@media(min-width:1081px) and (max-width:1340px){
  .brand .sub{display:none}
}
@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}
}
/* Sehr schmale Geräte (320 px, iPhone SE der ersten Reihe).
   Dort war die Kopfleiste 15 px zu breit — der Burger-Knopf stand
   halb außerhalb und war schlecht zu treffen. Die Sprachwahl fliegt
   raus, nicht der Knopf: sie steht im Schubfach ohnehin noch einmal,
   der Burger dagegen ist der einzige Weg dorthin. */
@media(max-width:360px){
  .nav-actions > .lang{display:none}
  /* Auch der Reservieren-Knopf muss weichen: Logo + Suche + Knopf +
     Burger sind zusammen breiter als 320 px. Er steht im Schubfach
     und im Abschluss-Kasten jeder Seite noch einmal — der Burger
     dagegen ist der einzige Weg in die Navigation. */
  .nav-actions > .btn{display:none}
  .nav-actions{gap:6px}
}

/* Lange deutsche Einzelwörter in der Displayschrift.
   „Allgemeine Geschäftsbedingungen" ist auf einem 390-px-Gerät 462 px
   breit — die Überschrift schob die AGB- und die Datenschutzseite um
   bis zu 92 px seitlich weg. Gemessen, nicht vermutet, und ein
   Altfehler: er stand schon in V125 drin, nur hatte bis jetzt niemand
   die Rechtstextseiten in schmal angesehen.
   `break-word` bricht ein Wort NUR, wenn es allein nicht in die Zeile
   passt. Auf breiten Bildschirmen ändert sich dadurch nichts. */
.disp{overflow-wrap:break-word}
/* 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? */
/*  align-items war `center`. Sobald der Text in der Pille umbricht —
    auf dem Handy der Normalfall — rutschte der Punkt in die Mitte
    zwischen beide Zeilen und stand neben nichts. Er gehört auf die
    Höhe der ersten Zeile, wie ein Aufzählungszeichen.
    `line-height` von 1 auf 1.5, sonst kleben die zwei Zeilen. */
.zeitampel{
  display:inline-flex;align-items:flex-start;gap:9px;line-height:1.5;
  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;margin-top:5px;
  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}
/*  „pretty" hält das einzelne Wort aus der letzten Zeile. Gemessen auf
    der Depotseite (Chromium 151): ohne Regel endet der Vorspann auf
    „Seite.", mit „pretty" auf „zur Seite.".

    NICHT auf „balance" umstellen. Das wurde am 15.08.2026 versucht und
    gemessen — 132 Vorspänne auf zehn Seiten bei 390, 768 und 1440 px:

        pretty    3 Vorspänne mit Einzelwort am Ende
        balance   7

    Auf der Depotseite sah „balance" besser aus, auf der Skischul- und
    der Serviceseite schlechter. Der Einzelfall, an dem man es prüft,
    ist nicht der Durchschnitt. Deshalb bleibt es bei „pretty".

    Die drei verbliebenen Fälle sind lange Einzelwörter
    („umweltfreundlich.", „entspricht.") — die passen physisch nicht
    mehr in die vorherige Zeile. Das ist mit CSS nicht zu lösen,
    sondern höchstens mit anderer Wortwahl. */
.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}


/*  ══════════════════════════════════════════════════════════════════
    EINWILLIGUNGSDIALOG
    ══════════════════════════════════════════════════════════════════
    Er sitzt unten am Rand statt als Vorhang über der ganzen Seite.
    Das ist eine bewusste Entscheidung: Der Gast soll lesen können,
    worauf er gelandet ist, bevor er entscheidet. Ein Vollbild-Vorhang
    zwingt zur Entscheidung, ohne dass man weiß, worum es geht — das
    ist genau die Situation, in der Leute wahllos „Alles" drücken.

    DIE WICHTIGSTE REGEL STEHT IN .ew-knopf:
    Beide Schaltflächen sind IDENTISCH gestaltet. Gleiche Fläche,
    gleicher Rand, gleiche Farbe, gleicher Kontrast, gleiche Breite.
    Wer hier eine davon hervorhebt — heller, größer, farbig —, macht
    aus einer Einwilligung ein Dark Pattern und die Zustimmung
    angreifbar. Das ist keine Geschmacksfrage. Nicht „schöner machen".  */
.ew{
  position:fixed;left:0;right:0;bottom:0;z-index:400;
  padding:clamp(12px,2vw,20px);
  display:flex;justify-content:center;
  opacity:0;transform:translateY(14px);
  transition:opacity .26s var(--ease-out),transform .26s var(--ease-out);
  pointer-events:none;
}
.ew-da{opacity:1;transform:none;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.ew{transition:none}}

.ew-kasten{
  width:min(680px,100%);
  background:linear-gradient(170deg,var(--panel-2),var(--night));
  border:1px solid var(--line-3);border-radius:var(--r-l);
  box-shadow:0 40px 110px -40px rgba(0,0,0,.95);
  padding:clamp(20px,2.6vw,30px);
}
.ew-titel{
  font-family:var(--disp);font-weight:800;font-variation-settings:'wdth' 104;
  font-size:1.3rem;line-height:1.1;color:var(--snow);margin:0 0 10px;
}
.ew-text{font-size:.92rem;line-height:1.6;color:var(--text);margin:0 0 18px;max-width:68ch}

.ew-knoepfe{display:flex;gap:10px;flex-wrap:wrap}
.ew-knopf{
  flex:1 1 200px;min-height:48px;padding:13px 20px;cursor:pointer;
  font-family:var(--mono);font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--snow);background:rgba(196,214,230,.07);
  border:1px solid var(--line-3);border-radius:999px;
  transition:background .25s,border-color .25s;
}
.ew-knopf:hover{background:rgba(196,214,230,.13);border-color:var(--ice)}
.ew-knopf:focus-visible{outline:2px solid var(--ice);outline-offset:3px}

.ew-fuss{
  display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;
  margin:16px 0 0;font-size:.82rem;
}
/*  MINDESTHÖHE 44 px — gemessen am 18.08.2026 auf 390 px Fensterbreite.
    „Lieber selbst wählen", „Datenschutz" und „Impressum" waren 34 px hoch:
    6 px Polster über und unter einer 13-px-Zeile. Auf dem Telefon ist das
    ein Tippziel unter jeder gängigen Schwelle — und es steht ausgerechnet
    im Einwilligungsdialog, also an der Stelle, an der ein Fehlgriff eine
    Zustimmung wird, die niemand geben wollte.

    Gelöst über die Höhe, nicht über mehr Polster: `min-height` plus
    `inline-flex` lässt das Aussehen unverändert (Unterstreichung sitzt
    weiter am Text) und vergrößert nur die Fläche, die auf einen Daumen
    reagiert.  */
.ew-fuss a,.ew-link{
  color:var(--soft);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--line-3);background:none;border:0;padding:6px 0;
  font-family:var(--body);font-size:.82rem;cursor:pointer;
  display:inline-flex;align-items:center;min-height:44px;
}
.ew-fuss a:hover,.ew-link:hover{color:var(--text);text-decoration-color:var(--ice)}
.ew-fuss a:focus-visible,.ew-link:focus-visible{outline:2px solid var(--ice);outline-offset:3px;border-radius:6px}

/*  Die Einzelauswahl. Alle Schalter stehen auf AUS — keine
    Vorauswahl, das ist Vorschrift und nicht Höflichkeit.  */
.ew-liste{margin:0 0 16px;border-top:1px solid var(--line);padding-top:14px}
.ew-dienst{
  display:flex;gap:12px;align-items:flex-start;
  padding:11px 0;border-bottom:1px solid var(--line);cursor:pointer;
}
.ew-dienst input{
  width:20px;height:20px;margin:2px 0 0;flex:none;cursor:pointer;
  accent-color:var(--ice);
}
.ew-d-text{display:flex;flex-direction:column;gap:3px}
.ew-d-text b{font-size:.92rem;color:var(--snow);font-weight:600}
.ew-d-text small{font-size:.8rem;line-height:1.5;color:var(--soft)}
.ew-d-text .ew-wer{color:var(--dim);font-family:var(--mono);font-size:.72rem;letter-spacing:.03em}
.ew-knopf--wahl{margin-top:14px;width:100%;flex:none}

@media(max-width:520px){
  .ew{padding:10px}
  .ew-knoepfe .ew-knopf{flex:1 1 100%}
}