@charset "UTF-8";
/* ============================================================================
   Stress Balance Retreat 2026 — Nadin Förster
   Farbwelt: die Website nadin-foerster.de gibt Gold auf Fast-Schwarz vor,
   der Flyer Sand und Kastanie. Beides greift ineinander — helle Sandflächen
   wechseln sich mit fast schwarzen ab, Gold setzt die Akzente auf dunklem Grund.
   Gistesy (Script) trägt ausschließlich die Akzentwörter, wie auf dem Flyer
   und wie auf der Website.
   ========================================================================= */

/* ---------------------------------------------------------------- Schriften */
@font-face{font-family:"Assistant";src:url("../font/assistant-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Assistant";src:url("../font/assistant-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Assistant";src:url("../font/assistant-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Gistesy";src:url("../font/gistesy.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* ---------------------------------------------------------------- Marken */
:root{
  /* Angelehnt an nadin-foerster.de: Gold auf Fast-Schwarz, helle neutrale Flächen.
     Sand und Kastanie bleiben als Farben des Flyers erhalten. */
  --sand-50:#FAF8F5;
  --sand-100:#F2EEE8;
  --sand-200:#E7DFD3;
  --sand-300:#D6C4AC;
  --sand-400:#C8B093;   /* CI Flyer */
  --kastanie:#7C3827;   /* CI Flyer */
  --kastanie-tief:#5C2818;
  --terra:#8D5440;
  --tief:#1D1D1B;       /* warmes Fast-Schwarz, wie in der Referenz */
  --tief-2:#141312;
  --tief-3:#2A2926;
  /* Schleier des Hero-Bereichs: Farbton 202°, aus dem Wasser des Bildes
     abgeleitet. Sehr dunkel, aber erkennbar blau statt schwarz. */
  --hero-dunkel:#0A1C27;
  --gold:#B5903D;       /* Akzentfarbe — Flächen, Ränder, große Schrift */
  --gold-hell:#DCB166;  /* Gold für Text auf dunklem Grund */
  --gold-tief:#7A5F1F;  /* Gold für Text auf hellem Grund — tief genug für AA bei 11px */
  /* Eigenes, tieferes Gold NUR für Knopfflächen: trägt weiße Schrift mit 4,9:1.
     Auf dem helleren --gold käme Weiß nur auf 2,99 und fiele durch. */
  --gold-knopf:#8F6B24;
  --gold-knopf-tief:#6E5119;  /* Zustand beim Überfahren — dunkler, nicht heller */
  --eis:#B5903D;
  --eis-hell:#F2E6CC;
  --weiss:#FFFFFF;
  --text:#241A15;
  --text-2:#5A4A41;
  --text-3:#7C6B60;

  --mass: 1180px;
  --kopf: 112px;  /* Höhe der Kopfzeile — Hero und Sprungnavi rechnen damit */
  --pad: clamp(1.15rem, 4.5vw, 2.5rem);
  --rund: 16px;   /* Karten */
  --pille: 999px; /* Buttons */

  --schrift:"Assistant", system-ui, -apple-system, "Segoe UI", sans-serif;
  --script:"Gistesy", "Snell Roundhand", cursive;

  --schatten-s:0 1px 2px rgba(36,26,21,.06), 0 4px 12px -6px rgba(36,26,21,.14);
  --schatten-m:0 2px 4px rgba(36,26,21,.06), 0 18px 40px -22px rgba(36,26,21,.3);
  --ease:cubic-bezier(.22,.68,.36,1);
}

/* ---------------------------------------------------------------- Grundlage */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body{
  margin:0;
  background:var(--sand-50);
  color:var(--text);
  font-family:var(--schrift);
  font-size:clamp(1rem,.96rem + .22vw,1.115rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* Autoren-Regeln wie .feld{display:flex} schlagen das UA-Stylesheet — ohne
   diese Zeile bleibt jedes Element mit hidden-Attribut sichtbar. */
[hidden]{display:none!important}
img,svg{max-width:100%;display:block}
/* NICHT display:contents — Chrome zeichnet das <img> darin nicht.
   Als Block verhält sich <picture> wie eine normale Bildhülle. */
picture{display:block}
img{height:auto}
h1,h2,h3,h4{margin:0;font-weight:800;line-height:1.1;letter-spacing:-.021em;text-wrap:balance;
  hyphens:auto}
/* Nur Fließtext darf notfalls harte Umbrüche setzen — Überschriften nie. */
p,li,dd,td{overflow-wrap:break-word}
p,ul,ol,dl,figure,blockquote{margin:0}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--gold-tief);outline-offset:3px;border-radius:2px}
.tief :focus-visible,.formular :focus-visible{outline-color:var(--eis)}
::selection{background:var(--eis-hell);color:var(--text)}

/* Nur für Screenreader */
.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:absolute;left:.5rem;top:-4rem;z-index:200;background:var(--tief);color:#fff;
  padding:.7rem 1.1rem;border-radius:var(--rund);transition:top .18s var(--ease);text-decoration:none;font-weight:600;
}
.skip:focus{top:.5rem}

/* ---------------------------------------------------------------- Bausteine */
.mass{max-width:var(--mass);margin-inline:auto;padding-inline:var(--pad)}
.eng{max-width:64ch}

/* Die Script-Wörter tragen den Marken-Goldton #B5903D. Sie sind mit 33–60px
   groß genug, dass die 3:1-Schwelle für große Schrift gilt.
   Kleine Beschriftungen behalten das tiefere Gold — dort wären 3:1 zu wenig. */
.script{
  color:var(--gold);
  font-family:var(--script);font-weight:400;letter-spacing:0;
  /* Gistesy sitzt hoch und schmal — optischer Ausgleich statt Rohmaß */
  font-size:1.34em;line-height:.7;display:inline-block;
  transform:translateY(.05em);padding-inline:.06em;
}

.kicker{
  font-size:.8rem;letter-spacing:.19em;text-transform:uppercase;font-weight:600;
  color:var(--gold-tief);
}
/* Kleine gesperrte Versalien auf Fast-Schwarz: Gold trägt hier am besten. */
.tief .kicker{color:var(--gold-hell)}

.h-gross{font-size:clamp(1.95rem,1.35rem + 2.9vw,3.9rem);line-height:1.12}
.h-mittel{font-size:clamp(1.55rem,1.18rem + 1.85vw,2.75rem);line-height:1.16}
.h-klein{font-size:clamp(1.16rem,1.05rem + .5vw,1.42rem)}

.lead{font-size:clamp(1.09rem,1.02rem + .42vw,1.32rem);color:var(--text-2);line-height:1.6}
.tief .lead{color:#D9D5CF}

section{padding-block:clamp(3.4rem,9vw,6.6rem);scroll-margin-top:calc(var(--kopf) + 8px)}
.tief{background:var(--tief);color:#EDEBE7}
.tief h1,.tief h2,.tief h3,.tief h4{color:#fff}
.tief .script,.held .script{color:var(--gold-hell)}
.sand{background:var(--sand-100)}
.sand-tief{background:var(--sand-200)}

.kopf{display:flex;flex-direction:column;gap:.85rem;margin-bottom:clamp(2rem,4.5vw,3.2rem)}

/* -------- Rechtstexte -------- */
/* Die Teilnahmebedingungen bringen ihre Detailregeln selbst mit. Kürzere
   Rechtstexte teilen sich diese klar begrenzte, wiederverwendbare Gestaltung. */
.rechtstext{background:var(--sand-50);padding-block:clamp(2.5rem,7vw,5rem) clamp(3rem,8vw,6rem)}
.rechtstext .atb__inhalt{max-width:70ch}
.rechtstext .atb__inhalt p{margin-bottom:1rem;color:var(--text-2);font-size:1rem;line-height:1.7}
.rechtstext .atb__inhalt p b{color:var(--text);font-weight:800;margin-right:.15rem}
.rechtstext .atb__inhalt h2{
  display:flex;gap:.7rem;align-items:baseline;
  font-size:1.22rem;margin:2.6rem 0 1.1rem;padding-top:1.4rem;
  border-top:1px solid var(--sand-200);scroll-margin-top:calc(var(--kopf) + 1rem);
}
.rechtstext .atb__inhalt h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.rechtstext .atb__nr{color:var(--gold-tief);font-variant-numeric:tabular-nums;flex:0 0 auto}
.rechtstext .atb__liste,.rechtstext .atb__bildnachweis{
  margin:0 0 1.2rem;padding-left:1.3rem;color:var(--text-2);font-size:1rem;line-height:1.7;
}
.rechtstext .atb__liste li+li,.rechtstext .atb__bildnachweis li+li{margin-top:.45rem}
.rechtstext .atb__stand{margin-top:2.4rem;padding-top:1.2rem;border-top:1px solid var(--sand-200);
  font-size:.9rem;color:var(--text-3)}
.rechtstext__kurz{
  max-width:70ch;margin:calc(clamp(2rem,4.5vw,3.2rem) * -.35) 0 clamp(2.2rem,5vw,3.4rem);
  padding:1.2rem 1.35rem;border-left:3px solid var(--gold);border-radius:0 var(--rund) var(--rund) 0;
  background:var(--sand-100);color:var(--text-2);
}
.rechtstext__kurz p{margin:0;line-height:1.65}
.rechtstext__kurz b{color:var(--text)}

/* -------- Schaltflächen -------- */
.btn{
  /* Weiße Schrift auf tieferem Gold (4,89:1). Das hellere --gold der Ränder und
     Schmuckwörter trüge Weiß nur mit 2,99 und fiele durch — deshalb hat die
     Knopffläche einen eigenen Farbwert. */
  --btn-bg:var(--gold-knopf);--btn-fg:#FFFFFF;
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  background:var(--btn-bg);color:var(--btn-fg);
  padding:.95rem 1.9rem;border:0;border-radius:var(--pille);
  font-weight:700;font-size:.85rem;letter-spacing:.09em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;
  box-shadow:var(--schatten-s);
  transition:background .16s var(--ease), transform .16s var(--ease), box-shadow .16s var(--ease);
  min-height:52px;
}
/* Beim Überfahren dunkler statt heller: Ein aufgehelltes Gold würde die weiße
   Schrift unter den Mindestkontrast drücken. */
.btn:hover{background:var(--gold-knopf-tief);transform:translateY(-1px);box-shadow:var(--schatten-m)}
.btn:active{transform:translateY(0)}
.btn--gross{padding:1.25rem 2.4rem;font-size:.92rem;min-height:60px;width:100%}
.btn--hell{--btn-bg:var(--gold-knopf);--btn-fg:#FFFFFF}
.btn--hell:hover{background:var(--gold-knopf-tief)}
.btn--rand{
  --btn-bg:transparent;--btn-fg:currentColor;
  box-shadow:inset 0 0 0 1.5px currentColor;font-weight:600;
}
.btn--rand:hover{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1.5px currentColor}
@media (min-width:600px){.btn--gross{width:auto}}

.textlink{
  color:var(--gold-tief);font-weight:600;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1.5px;
  text-decoration-color:rgba(122,95,31,.45);
}
.textlink:hover{text-decoration-color:var(--gold-tief)}
/* Links auf dunklem Grund in Gold, deutlich unterstrichen. */
.tief .textlink{color:var(--gold-hell);text-decoration-color:rgba(220,177,102,.65);text-decoration-thickness:1.5px}
.tief .textlink:hover,.tief .textlink:focus-visible{color:#F0D9A8;text-decoration-color:#F0D9A8}

/* -------- Kopfzeile -------- */
.topbar{
  position:sticky;top:0;z-index:60;
  background:rgba(32,34,42,0);backdrop-filter:none;
  transition:background .3s var(--ease), backdrop-filter .3s var(--ease), box-shadow .3s var(--ease);
}
.topbar.fest{background:rgba(21,22,28,.95);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(255,255,255,.09)}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:var(--kopf)}
.topbar__logo{display:flex;align-items:center}
.topbar__logo img{height:78px;width:auto}
/* Unterseiten: sichtbarer Rückweg neben dem Logo. Auf schmalen Geräten bleibt
   nur der Knopf — das Logo führt dort ebenfalls zurück. */
.topbar__zurueck{display:flex;align-items:center;gap:1.2rem}
.zurueck{
  display:none;align-items:center;gap:.4rem;color:#D5D1CA;text-decoration:none;
  font-size:.92rem;font-weight:600;
}
.zurueck svg{width:17px;height:17px}
.zurueck:hover{color:#fff}
@media (min-width:620px){.zurueck{display:inline-flex}}
.topbar__nav{display:none}
.topbar .btn{padding:.62rem 1.1rem;font-size:.92rem;min-height:42px}

/* -------- Held -------- */
/* Der Hero ist ein <section>, erbt also die allgemeinen Abschnitts-Abstände.
   Hier sind sie falsch: die Höhe steuert .held__in über min-height. */
.held{position:relative;isolation:isolate;color:#fff;margin-top:calc(var(--kopf) * -1);padding-block:0}
/* Kein negativer z-index: 'isolation:isolate' auf .held würde das Bild sonst
   hinter die eigene Hintergrundfläche schieben. */
.held__bild{position:absolute;inset:0;z-index:0;background:var(--hero-dunkel)}
.held__bild img{width:100%;height:100%;object-fit:cover;object-position:center 52%;
  filter:saturate(.78) contrast(1.04) brightness(.94)}
.held__bild picture{display:block;width:100%;height:100%}
.held__schleier{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg, rgba(10,28,39,.55) 0%, rgba(10,28,39,.26) 30%, rgba(10,28,39,.66) 58%, rgba(10,28,39,.93) 82%, rgba(10,28,39,.97) 100%),
    linear-gradient(96deg, rgba(10,28,39,.72) 0%, rgba(10,28,39,.46) 38%, rgba(10,28,39,.08) 72%, rgba(10,28,39,0) 100%);
}
.held__in{
  position:relative;z-index:2;
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:100svh;padding-top:calc(var(--kopf) + 1.5rem);padding-bottom:clamp(2.8rem,8vw,5rem);
  gap:1.35rem;
}
/* Ein Foto ist kein verlässlicher Hintergrund — ein weicher Schatten sichert
   die Lesbarkeit, egal welches Bild später eingesetzt wird. */
.held__text{text-shadow:0 1px 22px rgba(6,20,28,.55), 0 1px 3px rgba(6,20,28,.4)}
.held__text{display:flex;flex-direction:column;gap:clamp(1.05rem,2.6vw,1.6rem)}
.held h1{color:#fff;font-size:clamp(2rem,1.35rem + 3.3vw,4.15rem);line-height:1.14}
.held .lead{color:#DFDBD5;max-width:44ch;line-height:1.62}
.held__meta{
  display:flex;flex-wrap:wrap;gap:.55rem 1.1rem;align-items:center;
  font-size:.855rem;letter-spacing:.02em;color:#BCD0CC;
}
.held__meta b{color:#fff;font-weight:600}
.held .kicker{color:var(--gold-hell)}
.held__aktion{display:flex;flex-direction:column;gap:.8rem;margin-top:clamp(.3rem,1.4vw,.8rem)}
.held__vertrauen{
  display:flex;flex-wrap:wrap;gap:.55rem 1.25rem;font-size:.88rem;color:#CDC9C2;
  margin-top:clamp(.25rem,1vw,.6rem);
}
.held__vertrauen span{display:inline-flex;align-items:center;gap:.35rem}
.held__vertrauen svg{width:15px;height:15px;flex:0 0 auto;color:var(--eis)}
.held__runter{display:none}

/* -------- Faktenband -------- */
.fakten{background:var(--sand-400);color:var(--text)}
.fakten__gitter{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(36,26,21,.14)}
.fakten__gitter>div{background:var(--sand-400);padding:1.05rem .35rem;text-align:center}
/* 11px gesperrte Versalien auf Sand: die reguläre Kastanie liegt unter AA. */
.fakten dt{font-size:.71rem;letter-spacing:.12em;text-transform:uppercase;color:#4E3A0C;font-weight:600;margin-bottom:.2rem}
.fakten dd{margin:0;font-weight:800;font-size:.99rem;line-height:1.25}
.fakten dd small{display:block;font-weight:400;font-size:.79rem;color:#3A2E27;letter-spacing:0}

/* -------- Sprungnavigation (nur Desktop) -------- */
.sprung{display:none}

/* -------- Für wen -------- */
.passt{display:grid;gap:1rem}
.passt__karte{
  background:var(--weiss);border:1px solid var(--sand-200);border-radius:var(--rund);
  padding:1.6rem 1.5rem;box-shadow:var(--schatten-s);
}
.passt__karte h3{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem;font-size:1.12rem}
.passt__karte h3 .marke{
  width:26px;height:26px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;font-size:.9rem;font-weight:800;
}
.passt--ja .marke{background:var(--eis-hell);color:#6B4E14}
.passt--nein .marke{background:var(--sand-200);color:var(--gold-tief)}
.passt__karte ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:.7rem}
.passt__karte li{padding-left:1.35rem;position:relative;color:var(--text-2)}
.passt__karte li::before{
  content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;
  background:var(--sand-300);
}
.passt--ja li::before{background:var(--gold)}

/* -------- Programm --------
   Drei Textblöcke statt Stundenplan: der Ablauf soll beweglich bleiben. */
.tage{display:flex;flex-direction:column;gap:2.2rem}
.tag__kopf{display:flex;align-items:baseline;gap:.7rem;margin-bottom:.8rem}
.tag__kopf h3{font-size:1.45rem}
.tag__kopf span{font-size:.85rem;color:var(--gold-hell)}
.tag__text{color:#D9D5CF;font-size:1.01rem;line-height:1.68}

/* Die „Das erwartet dich“-Punkte vom Flyer */
.erwartet{
  margin-top:2.6rem;padding-top:2.2rem;border-top:1px solid rgba(255,255,255,.12);
  display:grid;gap:1.6rem;
}
.erwartet h3{font-size:1.12rem;margin-bottom:1rem}
.erwartet ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:.75rem}
.erwartet li{display:flex;gap:.75rem;align-items:flex-start;color:#D9D5CF;font-size:.98rem}
.erwartet li svg{width:17px;height:17px;flex:0 0 auto;margin-top:.35em;color:var(--gold-hell)}

.programm__hinweis{
  margin-top:2.4rem;padding:1.15rem 1.35rem;border-left:3px solid var(--gold);
  background:rgba(181,144,61,.13);font-size:.96rem;color:#DEDAD4;
  border-radius:0 var(--rund) var(--rund) 0;
}
.programm__hinweis b{color:#fff}

/* -------- Sessions -------- */
.sessions{
  --session-breite:min(76vw,21rem);
  display:grid;grid-auto-flow:column;grid-auto-columns:var(--session-breite);gap:.9rem;
  overflow-x:auto;scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;
  padding:0 calc((100vw - var(--session-breite)) / 2) 1rem;
  margin-inline:calc(var(--pad) * -1);scroll-padding-inline:calc((100vw - var(--session-breite)) / 2);
  scrollbar-width:thin;
}
.sessions>*{scroll-snap-align:center;scroll-snap-stop:always}
.sessions__wischhinweis{
  display:flex;align-items:center;justify-content:center;gap:.55rem;margin:0 0 .8rem;
  color:var(--gold-tief);font-size:.78rem;letter-spacing:.075em;text-transform:uppercase;font-weight:700;
}
.sessions__wischhinweis span{font-size:1.12rem;line-height:1;color:var(--gold)}
.session{
  background:var(--weiss);border:1px solid var(--sand-200);border-radius:var(--rund);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--schatten-s);
}
.session__bild{aspect-ratio:16/10;overflow:hidden;background:var(--sand-200)}
.session__bild picture{height:100%}
.session__bild img{width:100%;height:100%;object-fit:cover}
.session__text{padding:1.25rem 1.3rem 1.45rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.session__text h3{font-size:1.08rem}
.session__text p{font-size:.945rem;color:var(--text-2)}
.session__marke{
  align-self:flex-start;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:var(--gold-tief);background:var(--sand-100);padding:.28rem .75rem;border-radius:99px;
}
.session--stark{border-color:var(--gold);border-width:1.5px}
.session--stark .session__marke{background:var(--eis-hell);color:#6B4E14}

/* -------- Ort -------- */
.ort__haupt{display:grid;gap:1.5rem;margin-bottom:1.5rem}
.ort__gross{border-radius:var(--rund);overflow:hidden;box-shadow:var(--schatten-m)}
.ort__gross img{width:100%;aspect-ratio:4/3;object-fit:cover}
.ort__liste{list-style:none;padding:0;display:flex;flex-direction:column;gap:.85rem;margin-top:1.2rem}
.ort__liste li{display:flex;gap:.7rem;align-items:flex-start;color:var(--text-2)}
.ort__liste svg{width:19px;height:19px;flex:0 0 auto;margin-top:.28em;color:var(--gold-tief)}
.ort__galerie{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem}
.ort__galerie figure{border-radius:var(--rund);overflow:hidden;position:relative;background:var(--sand-200)}
.ort__galerie img{width:100%;aspect-ratio:4/3;object-fit:cover}
/* Ungerade Anzahl: die letzte Kachel füllt die Zeile, statt halb leer zu stehen.
   Die Regel greift nur bei genau drei Kacheln und löst sich von selbst auf,
   sobald wieder eine vierte dazukommt. */
.ort__galerie figure:nth-child(3):last-child{grid-column:1/-1}
.ort__galerie figure:nth-child(3):last-child img{aspect-ratio:16/9}
.ort__galerie figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:.9rem .8rem .55rem;
  background:linear-gradient(0deg,rgba(15,16,20,.88),transparent);
  color:#fff;font-size:.8rem;font-weight:600;
}

/* -------- Unterkunft (getrennter Vertrag) -------- */
.hotel{
  margin-top:2rem;background:var(--weiss);border:1.5px solid var(--sand-300);
  border-radius:var(--rund);padding:1.6rem 1.5rem;box-shadow:var(--schatten-s);
}
.hotel h3{font-size:1.14rem;margin-bottom:.7rem}
.hotel p{color:var(--text-2);font-size:.97rem}
.hotel__preise{
  display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;margin:1.2rem 0;
}
.hotel__preise div{background:var(--sand-50);border:1px solid var(--sand-200);border-radius:var(--rund);padding:.85rem .9rem}
.hotel__preise dt{font-size:.78rem;color:var(--text-3);margin-bottom:.15rem}
.hotel__preise dd{margin:0;font-weight:800;font-size:1.28rem;font-variant-numeric:tabular-nums}
.hotel__preise small{display:block;font-weight:400;font-size:.74rem;color:var(--text-3);letter-spacing:0}
.hotel p.hotel__hinweis{font-size:.88rem;color:var(--text-3)}
.hotel__recht{
  margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--sand-200);
  font-size:.855rem;color:var(--text-3);line-height:1.55;
}

/* -------- Kosten -------- */
.kosten__karten{display:grid;gap:1rem}
.karte-preis{
  background:var(--weiss);border:1px solid var(--sand-200);border-radius:var(--rund);
  padding:1.7rem 1.6rem;display:flex;flex-direction:column;gap:1rem;box-shadow:var(--schatten-s);
}
.karte-preis--haupt{border:2px solid var(--gold);box-shadow:var(--schatten-m)}
.karte-preis__wer{
  font-size:.73rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--gold-tief);
}
.karte-preis--haupt .karte-preis__wer{color:var(--gold-tief)}
/* Frühbucher-Band über dem Preis. Gefüllt in Knopf-Gold mit weißer Schrift —
   dieselbe Farbe wie der Buchen-Knopf, damit Rabatt und Handlung zusammengehören.
   Der Balken zählt die Restzeit mit; nach dem Stichtag fällt er ersatzlos weg. */
.fruehbucher{
  display:inline-flex;align-items:center;gap:.55rem;flex-wrap:wrap;
  align-self:flex-start;margin-bottom:-.35rem;
  background:var(--gold-knopf);color:#fff;border-radius:var(--pille);
  padding:.42rem .95rem .42rem .8rem;box-shadow:var(--schatten-s);
}
.fruehbucher__marke{
  font-size:.78rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
}
.fruehbucher__frist{
  /* Weiß statt Creme: Creme läge bei 3,9:1 und damit unter der Schwelle für
     kleine Schrift. Unterschieden wird über Strichstärke und Trennlinie. */
  font-size:.78rem;font-weight:600;color:#fff;
  padding-left:.55rem;border-left:1px solid rgba(255,255,255,.45);
}
.sparen{
  margin-top:-.5rem;font-size:.98rem;color:var(--gold-tief);font-weight:600;
}
.sparen b{font-weight:800}
.karte-preis__zahl{
  font-size:clamp(2.25rem,1.4rem + 3vw,3.1rem);font-weight:800;line-height:1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.karte-preis__zahl small{font-size:.9rem;font-weight:400;color:var(--text-3);letter-spacing:0}
/* Durchgestrichener Regulärpreis neben dem Frühbucherpreis. Der rote Strich ist
   dünn gehalten: Er soll die Zahl markieren, nicht unleserlich machen. */
.karte-preis__vorher{
  margin-inline:.6rem .45rem;font-size:.52em;font-weight:600;color:var(--text-3);
  text-decoration:line-through;text-decoration-color:#C0392B;
  text-decoration-thickness:.09em;text-underline-offset:0;
}
.karte-preis ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:.55rem}
.karte-preis li{display:flex;gap:.6rem;align-items:flex-start;font-size:.96rem;color:var(--text-2)}
.karte-preis li svg{width:17px;height:17px;flex:0 0 auto;margin-top:.3em;color:var(--gold-tief)}
/* Zimmerpreise in der Kostenkarte: dieselbe Darstellung wie im Abschnitt „Wo du
   schläfst“, nur ohne dessen Außenabstand — die Karte setzt den Abstand selbst. */
.karte-preis .hotel__preise{margin:0}
.karte-preis .hotel__preise dd{font-size:1.5rem}
.karte-preis__fuss{
  margin-top:auto;padding-top:.95rem;border-top:1px solid var(--sand-200);
  font-size:.85rem;color:var(--text-3);
}
.getrennt{
  margin-top:1.2rem;background:var(--sand-200);border-radius:var(--rund);padding:1.3rem 1.4rem;
  font-size:.95rem;color:var(--text-2);
}
.getrennt b{color:var(--text)}
.nicht-drin{margin-top:1.2rem;font-size:.92rem;color:var(--text-3)}
.nicht-drin b{color:var(--text-2)}

.platzhalter{
  display:inline-flex;align-items:center;gap:.35rem;vertical-align:middle;
  font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;font-weight:800;
  background:#FBE6C8;color:#8A5200;padding:.22rem .5rem;border-radius:2px;margin-left:.55rem;
  font-family:var(--schrift);
}

/* -------- Ablauf der Anmeldung -------- */
.schritte{list-style:none;padding:0;counter-reset:s;display:flex;flex-direction:column;gap:0}
.schritte li{
  display:grid;grid-template-columns:2.35rem minmax(0,1fr);column-gap:1rem;row-gap:.2rem;
  padding:1.15rem 0;border-bottom:1px solid var(--sand-200);position:relative;
}
.schritte li:last-child{border-bottom:0}
.schritte li::before{
  counter-increment:s;content:counter(s);
  width:2.05rem;height:2.05rem;border-radius:50%;
  background:var(--eis-hell);color:var(--gold-tief);
  display:grid;place-items:center;font-weight:800;font-size:.92rem;
  grid-column:1;grid-row:1 / span 2;
}
.schritte b{display:block;grid-column:2;margin-bottom:.2rem;font-size:1.03rem}
.schritte p{grid-column:2;color:var(--text-2);font-size:.955rem}

/* -------- Nadin -------- */
.nadin{display:grid;gap:1.6rem;align-items:center}
.nadin__bild{border-radius:var(--rund);overflow:hidden;box-shadow:var(--schatten-m);max-width:340px}
.nadin__zahlen{display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:1.4rem}
.nadin__zahlen div strong{display:block;font-size:1.7rem;line-height:1;letter-spacing:-.02em}
.nadin__zahlen div span{font-size:.83rem;color:var(--text-3)}
/* Fremdsiegel: an der Grundlinie ausgerichtet, damit das hochformatige Signet und
   das querformatige Verbandslogo trotz unterschiedlicher Form eine Linie bilden. */
.siegel{display:flex;flex-wrap:wrap;align-items:flex-end;gap:1.8rem;margin-top:2.8rem}
.siegel__stueck{display:block;transition:opacity .16s var(--ease)}
.siegel__stueck:hover{opacity:.78}
.siegel img{display:block;height:auto}
/* Das Signet trägt die Note im Bild — zu klein wäre „17 Kundenbewertungen“ nicht
   mehr lesbar und das Siegel damit wertlos. */
.siegel__stueck:nth-child(1) img{width:122px}
.siegel__stueck:nth-child(2) img{width:164px;margin-bottom:.6rem}

/* -------- Stimmen -------- */
.stimmen{display:grid;gap:1rem}
.stimme{
  background:var(--weiss);border:1px solid var(--sand-200);border-radius:var(--rund);
  padding:1.45rem 1.5rem;display:flex;flex-direction:column;gap:.9rem;box-shadow:var(--schatten-s);
}
.stimme blockquote{font-size:1rem;line-height:1.6;color:var(--text-2)}
.stimme figcaption{font-size:.86rem;color:var(--text-3);margin-top:auto}
.stimme figcaption b{display:block;color:var(--text);font-size:.95rem}
.stimme__stern{color:var(--gold);letter-spacing:.12em;font-size:.9rem}
.stimmen__quelle{margin-top:1.2rem;font-size:.85rem;line-height:1.6;color:var(--text-3);max-width:78ch}

/* -------- FAQ -------- */
.faq{display:grid;gap:.55rem;align-content:start}
.faq details{
  background:var(--weiss);border:1px solid var(--sand-200);border-radius:var(--rund);overflow:hidden;
}
.faq details[open]{border-color:var(--sand-300);box-shadow:var(--schatten-s)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.05rem 3rem 1.05rem 1.25rem;position:relative;
  font-weight:600;font-size:1.005rem;min-height:56px;display:flex;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:1.25rem;top:50%;width:11px;height:11px;
  border-right:2px solid var(--gold-tief);border-bottom:2px solid var(--gold-tief);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq summary:hover{background:var(--sand-50)}
.faq__inhalt{padding:0 1.25rem 1.3rem;color:var(--text-2);font-size:.97rem}
.faq__inhalt p+p{margin-top:.7rem}

/* -------- Formular -------- */
.formular{background:var(--tief);color:#EDEBE7}
.formular__gitter{display:grid;gap:2rem}
.feld{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.05rem}
.feld label{font-size:.92rem;font-weight:600;color:#F0EEEA}
.feld label .opt{font-weight:400;color:#ABA69E;font-size:.85em}
.feld input[type="text"],.feld input[type="email"],.feld input[type="tel"],.feld textarea,.feld select{
  width:100%;padding:.85rem .95rem;border-radius:var(--rund);
  border:1.5px solid rgba(255,255,255,.22);background:rgba(255,255,255,.055);color:#fff;
  font:inherit;font-size:1rem;min-height:50px;
  transition:border-color .16s var(--ease), background .16s var(--ease);
}
.feld textarea{min-height:108px;resize:vertical;line-height:1.5}
.feld input::placeholder,.feld textarea::placeholder{color:#95908A}
.feld input:focus,.feld textarea:focus,.feld select:focus{
  border-color:var(--eis);background:rgba(255,255,255,.09);outline:none;
}
.feld--fehler input,.feld--fehler textarea{border-color:#E39B84}
.feld__fehler{font-size:.85rem;color:#F0B7A3;font-weight:600}
.feld__hilfe{font-size:.85rem;color:#B5B0A7;line-height:1.5}

.radios{display:grid;gap:.5rem;grid-template-columns:1fr}
.radio{
  display:flex;align-items:flex-start;gap:.7rem;padding:.85rem 1rem;cursor:pointer;
  border:1.5px solid rgba(255,255,255,.22);border-radius:var(--rund);
  background:rgba(255,255,255,.04);transition:border-color .16s var(--ease), background .16s var(--ease);
}
.radio:hover{border-color:rgba(255,255,255,.42)}
.radio input{margin:0;margin-top:.25em;accent-color:var(--eis);width:18px;height:18px;flex:0 0 auto}
.radio:has(input:checked){border-color:var(--eis);background:rgba(229,177,99,.14)}
.radio span{font-size:.96rem}
.radio small{display:block;color:#B5B0A7;font-size:.84rem}

.zustimmung{display:flex;flex-direction:column;gap:.85rem;margin:1.5rem 0}
.check{
  display:flex;gap:.75rem;align-items:flex-start;font-size:.94rem;line-height:1.55;
  color:#DEDAD4;cursor:pointer;
}
.check input{margin:0;margin-top:.22em;width:19px;height:19px;flex:0 0 auto;accent-color:var(--eis)}
.check--fehler{color:#F0B7A3}
.zustimmung__datenschutz{margin:-.25rem 0 .15rem 2.45rem;color:#C3D3D0;font-size:.9rem;line-height:1.55}

/* Pflichtangaben vor der Schaltfläche (§ 312j Abs. 2 BGB). Sie müssen
   „hervorgehoben“ sein — deshalb eigener Kasten, heller Rand, klare Trennung
   zwischen Bezeichnung und Wert. Steht auf dunklem Grund im Formularabschnitt. */
.bestellung{
  margin:1.6rem 0 1.2rem;padding:1.3rem 1.4rem;border-radius:var(--rund);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
}
.bestellung__titel{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:#fff;margin-bottom:.9rem}
.bestellung__liste{margin:0;display:flex;flex-direction:column;gap:.7rem}
.bestellung__liste div{display:grid;gap:.15rem}
.bestellung__liste dt{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:#9FB6B2}
.bestellung__liste dd{margin:0;font-size:.95rem;line-height:1.55;color:#E4ECEA}
.bestellung__summe{margin-top:.4rem;padding-top:.8rem;border-top:1px solid rgba(255,255,255,.16)}
.bestellung__summe dd{font-size:1.75rem;font-weight:800;color:#fff;line-height:1.1}
.bestellung__summe dd span{display:block;font-size:.82rem;font-weight:400;color:#9FB6B2;margin-top:.25rem}
/* Frühbucher-Marke auf dunklem Grund: gefülltes Gold käme hier nur auf 2,9 gegen
   die Fläche. Deshalb Umriss und helles Gold als Schrift — 7,3:1. */
.bestellung__summe dd span.bestellung__marke{
  display:inline-block;margin:0 0 0 .7rem;vertical-align:.35em;
  font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-hell);border:1px solid rgba(220,177,102,.55);border-radius:var(--pille);
  padding:.28rem .7rem;
}
@media (min-width:700px){
  .bestellung__liste div{grid-template-columns:150px 1fr;gap:1rem;align-items:baseline}
  .bestellung__liste dt{padding-top:.15rem}
}

.bestellung__recht{
  margin:0 0 1.1rem;font-size:.86rem;line-height:1.6;color:#B7C6C3;
}
.hinweis-vertrag{
  margin-top:1.3rem;font-size:.885rem;color:#B9B4AB;line-height:1.62;
  padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.16);
}
.hinweis-vertrag b{color:#F0EEEA}

.danach{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--rund);padding:1.5rem 1.45rem;align-self:start;
}
.danach h3{font-size:1.05rem;margin-bottom:1rem}
.danach ol{padding-left:1.15rem;display:flex;flex-direction:column;gap:.78rem;font-size:.95rem;color:#D5D1CA}
.danach ol li::marker{color:var(--eis);font-weight:800}

.honigtopf{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

.meldung{
  padding:1.05rem 1.2rem;border-radius:var(--rund);margin-bottom:1.5rem;font-size:.96rem;
  border-left:3px solid;
}
.meldung--fehler{background:rgba(227,155,132,.13);border-color:#E39B84;color:#F3CDC0}

/* -------- Fußzeile -------- */
.fuss{background:var(--tief-2);color:#ACA79E;padding-block:3.2rem 2.4rem;font-size:.92rem}
.fuss a{color:#C6C2BB;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(195,211,208,.35)}
.fuss a:hover{text-decoration-color:currentColor}
.fuss__gitter{display:grid;gap:1.8rem}
.fuss__logo{margin:0 0 1.15rem}
.fuss__logo img{height:56px;width:auto;margin-left:0;display:block}
.fuss h4{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-hell);margin-bottom:.7rem;font-weight:600}
.fuss ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:.45rem}
.fuss__recht{
  margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.09);
  font-size:.84rem;color:#9A958D;line-height:1.65;
}
.at{font-size:.9em}

/* -------- Klebeleiste (nur Mobil) -------- */
.klebe{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:rgba(21,22,28,.97);backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,.16);
  padding:.7rem var(--pad) calc(.7rem + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:.9rem;
  transform:translateY(105%);transition:transform .28s var(--ease);
}
.klebe.an{transform:translateY(0)}
.klebe__preis{flex:1;min-width:0;line-height:1.25}
.klebe__preis b{display:block;color:#fff;font-size:1.02rem;font-weight:800}
.klebe__preis span{font-size:.79rem;color:#B9B4AB}
.klebe .btn{padding:.8rem 1.25rem;font-size:.96rem;white-space:nowrap;min-height:48px}

/* ============================================================================
   Ab hier: Desktop. Nicht nur breiter — anders komponiert.
   Mobil führt durch die Seite (ein Tag, eine Karte, ein Schritt).
   Desktop zeigt nebeneinander, was auf dem Handy nacheinander kommt:
   drei Programmtage im Vergleich, Formular neben dem Ablauf.
   ========================================================================= */
@media (min-width:900px){
  .topbar__nav{
    display:flex;gap:1.6rem;align-items:center;font-size:.93rem;font-weight:600;
  }
  .topbar__nav a{color:#D7D3CC;text-decoration:none;padding:.35rem 0;position:relative}
  .topbar__nav a::after{
    content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--eis);
    transition:right .2s var(--ease);
  }
  .topbar__nav a:hover::after{right:0}

  .held__in{min-height:min(94svh,900px);display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.5fr);align-items:end;gap:2.5rem}
  .held__text{grid-column:1}
  .held__aktion{flex-direction:row;align-items:center;gap:1rem}
  .held__runter{
    display:flex;grid-column:2;justify-self:end;align-self:end;align-items:center;gap:.6rem;
    color:#BCD0CC;font-size:.84rem;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;
    padding-bottom:.4rem;
  }
  .held__runter svg{width:18px;height:18px;animation:sinken 2.4s var(--ease) infinite}
  @keyframes sinken{0%,100%{transform:translateY(0);opacity:.65}50%{transform:translateY(5px);opacity:1}}

  .fakten__gitter{grid-template-columns:repeat(var(--spalten,6),1fr)}
  .fakten__gitter>div{padding:1.35rem .5rem}

  /* Sprungnavigation ersetzt auf Desktop das mobile Scrollen */
  .sprung{
    display:block;background:var(--sand-50);border-bottom:1px solid var(--sand-200);
    position:sticky;top:var(--kopf);z-index:50;
  }
  .sprung ul{
    /* gap etwas enger als vorher: „Deine Trainerin und Mentorin“ ist der längste
       Eintrag und würde die Leiste sonst über die Satzbreite hinausdrücken. */
    list-style:none;margin:0;padding:0;display:flex;gap:1.5rem;justify-content:center;
    font-size:.9rem;font-weight:600;flex-wrap:wrap;
  }
  .sprung a{
    display:block;padding:.95rem 0;color:var(--text-2);text-decoration:none;
    border-bottom:2px solid transparent;transition:color .16s var(--ease), border-color .16s var(--ease);
  }
  .sprung a:hover,.sprung a.aktiv{color:var(--gold-tief);border-color:var(--gold-tief)}

  .passt{grid-template-columns:1fr 1fr;gap:1.4rem}
  .passt__karte{padding:2rem 1.9rem}

  /* Drei Tage nebeneinander — der Überblick IST auf Desktop das Argument */
  .tage{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem}
  .tag+.tag{border-left:1px solid rgba(255,255,255,.12);padding-left:2.4rem}
  .erwartet{grid-template-columns:1fr 1fr;gap:2.4rem 3rem}

  .sessions{
    grid-auto-flow:row;grid-template-columns:repeat(3,1fr);grid-auto-columns:auto;
    overflow:visible;scroll-snap-type:none;gap:1.3rem;
    margin-inline:0;padding-inline:0;padding-bottom:0;
  }
  .sessions__wischhinweis{display:none}

  .ort__haupt{grid-template-columns:1.15fr .85fr;gap:2.6rem;align-items:center}
  /* auto-fit: leere Spuren fallen weg, die Kacheln teilen sich die Breite —
     funktioniert mit drei wie mit vier Bildern ohne weitere Anpassung. */
  .ort__galerie{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
  .ort__galerie figure:nth-child(3):last-child{grid-column:auto}
  .ort__galerie figure:nth-child(3):last-child img{aspect-ratio:4/3}
  .hotel{display:grid;grid-template-columns:1.2fr .8fr;gap:2.2rem;align-items:start;padding:2rem 2rem}
  .hotel__kopf{grid-column:1}
  .hotel__box{grid-column:2}
  .hotel__preise{margin-top:0}
  .hotel__recht{grid-column:1/-1;margin-top:.4rem}

  .kosten__karten{grid-template-columns:1fr 1fr;gap:1.4rem;align-items:stretch}
  .karte-preis{padding:2.1rem 2rem}

  .schritte{display:grid;grid-template-columns:repeat(5,1fr);gap:1.5rem}
  .schritte li{
    display:flex;flex-direction:column;gap:.55rem;border-bottom:0;padding:0;
    border-top:2px solid var(--sand-300);padding-top:1.1rem;
  }
  .schritte li::before{width:1.9rem;height:1.9rem;font-size:.85rem}

  .nadin{grid-template-columns:340px 1fr;gap:3.2rem}
  .nadin__bild{max-width:none}

  /* Zwei Spalten statt drei: Die Bewertungen zum Retreat sind länger als die
     früheren Kurzzitate und brauchen Zeilenbreite, sonst bricht jeder Satz um. */
  .stimmen{grid-template-columns:repeat(2,1fr);gap:1.3rem}

  .faq{grid-template-columns:1fr 1fr;gap:.7rem 1.4rem}

  .formular__gitter{grid-template-columns:1.35fr .65fr;gap:3.2rem;align-items:start}
  .radios{grid-template-columns:repeat(3,1fr)}
  .formular__felder{display:grid;grid-template-columns:1fr 1fr;gap:0 1.1rem}
  .feld--breit{grid-column:1/-1}

  .fuss__gitter{grid-template-columns:1.5fr 1fr 1fr;gap:3rem}

  /* Auf Desktop führt die Kopfzeile, nicht eine Leiste am Daumen */
  .klebe{display:none}
}

@media (min-width:1220px){
  .held h1{font-size:4.4rem}
  .sessions{gap:1.5rem}
}

/* Sehr schmale Geräte */
/* Am Handy ist der Platz knapp: der obere Abstand im Hero ist ungenutzt,
   weil der Text unten sitzt. Ihn zu kürzen bringt die Vertrauenszeile ins Bild,
   ohne die Abstände zwischen den Textbausteinen anzufassen. */
@media (max-width:899px){
  :root{--kopf:88px}
  .topbar__logo img{height:60px}
  .held__in{padding-top:calc(var(--kopf) + .25rem);padding-bottom:2.1rem}
  .held__aktion{gap:.9rem;align-items:flex-start}
  .held__aktion .btn--gross{min-height:56px}
  /* Zwei gleich starke Vollbreite-Buttons kosten am Handy fast 130px Höhe und
     schwächen sich gegenseitig. Die zweite Aktion wird deshalb ein Textlink. */
  .held__aktion .btn--rand{
    width:auto;min-height:0;padding:.2rem 0;background:none;box-shadow:none;
    font-size:1rem;font-weight:600;text-decoration:underline;
    text-underline-offset:5px;text-decoration-color:rgba(255,255,255,.45);
    text-decoration-thickness:1.5px;
  }
  .held__aktion .btn--rand::after{content:" ↓";text-decoration:none}
  .held__aktion .btn--rand:hover{background:none;box-shadow:none;transform:none;text-decoration-color:#fff}
  .held__vertrauen{font-size:.85rem;gap:.45rem 1.1rem}
}

@media (max-width:359px){
  .fakten__gitter{grid-template-columns:1fr}
  .hotel__preise{grid-template-columns:1fr}
}

/* Druck: die Seite als Merkzettel */
@media print{
  .topbar,.klebe,.sprung,.held__runter,.formular{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .tief{background:#fff!important;color:#000!important}
  .tief h2,.tief h3,.tag__text{color:#000!important}
  section{padding-block:1.2rem;break-inside:avoid}
  .tage{display:grid!important;grid-template-columns:repeat(3,1fr)!important}
}

/* Noch nicht vorliegende Dokumente werden benannt, aber nicht verlinkt. */
.offen{color:#B98A5E;font-weight:600;white-space:nowrap}
.fuss .offen{color:#9E8464}

/* Die Ziffernblöcke der Telefonnummer sind nur zur Bot-Abwehr in Elemente
   zerlegt — sie sollen wie normaler Text aussehen. */
.tel i,a i{font-style:normal}