/* Sektionen in Seitenreihenfolge.
      Ablauf und Videos, jeweils mit demselben zentrierten Kopf. Drei Sektionen */

/* ═══ Sektionsgerüst ═══════════════════════════════════════════════════ */
.section{padding:var(--space-section) 0;}

.section-head{max-width:36rem;}
.section-head .eyebrow{margin-bottom:18px;}
.section-head .lead{font-size:var(--t-md);color:var(--ink-soft);margin-top:18px;}

/* Zwischen Hero und Schwerpunkten gibt es KEIN Dekorelement.
   ebenso das zugehörige SVG in index.php. Den Übergang trägt der Farbwechsel */

/* ═══ Hero ════════════════════════════════════════════════════════════ */
.hero{position:relative;overflow:hidden;padding:clamp(48px,5vw,84px) 0 var(--space-section);}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;}
.hero-bg .glow{
  position:absolute;width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle, rgb(var(--amber-rgb) / .14), transparent 66%);
  top:-220px;right:-140px;
}
.hero-grid{position:relative;z-index:1;align-items:center;}

/* also nahezu symmetrisch — das wirkt unentschieden. */
.hero-copy{grid-column:1 / span 7;}
.hero-visual{grid-column:8 / span 5;position:relative;}

.hero-copy .eyebrow{margin-bottom:24px;}
.hero h1{font-size:var(--t-2xl);}

/* Der Akzent bekommt eine feine Goldlinie statt eines Textmarker-Balkens.
   WICHTIG: kein white-space:nowrap mehr — das erzwang 533px Mindestbreite */
/* Gewichtsbruch: Die H1 steht im Lichtschnitt, die Akzentzeile im schwersten.
   Beide brauchen eigene font-variation-settings — siehe Warnung in tokens.css. */
.hero h1{font-variation-settings:var(--vf-display);}
.hero h1 .accent{
  color:var(--petrol);position:relative;
  font-variation-settings:var(--vf-accent);
}
.hero h1 .accent::after{
  content:"";position:absolute;left:0;right:0;bottom:-.06em;height:2px;
  background:linear-gradient(90deg,var(--amber),rgb(var(--amber-rgb) / 0));
}

.hero-sub{font-size:var(--t-md);color:var(--ink-soft);margin-top:26px;max-width:34em;}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px;}
.hero-trust{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-top:30px;
  color:var(--ink-soft);font-size:var(--t-sm);
}
.hero-trust .dot{width:5px;height:5px;border-radius:50%;background:var(--amber);flex:none;}

/* ── Bildrahmen ─────────────────────────────────────────────────────── */
.photo-frame{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  aspect-ratio:4/4.8;
  background:linear-gradient(170deg,#2a3a64,var(--petrol-700) 70%);
  box-shadow:var(--shadow-md);
  display:grid;place-items:center;text-align:center;
}
.frame-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;z-index:1;}

/* ── Bildausschnitt je Motiv ──────────────────────────────────────────
   Beide Rahmen sind breiter als ihre Bilddatei hoch ist, deshalb füllt */
.frame-img--hero {object-position:center 14%;}
.frame-img--about{object-position:center 30%;}
.photo-frame::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,transparent 55%,rgb(var(--petrol-900-rgb) / .34));
  pointer-events:none;
}
.photo-badge{
  position:absolute;left:-22px;bottom:22px;z-index:3;
  background:var(--paper);border-radius:var(--r);padding:14px 18px;
  box-shadow:var(--shadow-md);display:flex;align-items:center;gap:12px;max-width:320px;
}
.photo-badge .pb-ic{
  width:38px;height:38px;border-radius:var(--r-sm);background:var(--amber-soft);
  display:grid;place-items:center;flex:none;
}
.photo-badge .pb-ic svg{width:20px;height:20px;color:var(--amber-deep);}
.photo-badge .pb-t{font-family:"Bricolage Grotesque";font-weight:700;font-size:var(--t-sm);line-height:1.15;}
.photo-badge .pb-s{font-size:var(--t-xs);color:var(--ink-soft);}

/* ═══ Schwerpunkte — redaktionelle Liste ═══════════════════════════════
   großen Ordnungszahlen und Haarlinien. Kein Kartenrahmen, kein Kachel-Icon. */
.focus{background:var(--paper);}
.focus-list{margin-top:var(--space-block);border-top:var(--hairline);}

.fitem{
  display:grid;
  grid-template-columns:minmax(84px,1fr) minmax(0,4fr) minmax(0,5fr);
  gap:var(--col-gap);
  align-items:start;
  padding:clamp(26px,3vw,42px) 0;
  border-bottom:var(--hairline);
  transition:background .3s var(--ease);
}
.fitem:hover{background:rgb(var(--petrol-rgb) / .022);}

.fitem .num{
  font-family:"Bricolage Grotesque";font-weight:800;
  font-size:var(--t-num);line-height:.9;
  color:transparent;-webkit-text-stroke:1.5px rgb(var(--petrol-rgb) / .3);
  letter-spacing:-.03em;
}
/* Icon, Kicker und Überschrift stehen in EINER Spalte übereinander, damit die
   anderer Höhe als der Kicker — das gab eine unruhige Kante. */
.fitem-head{display:flex;flex-direction:column;gap:10px;align-items:flex-start;}
.fitem .fic{display:inline-flex;color:var(--amber-deep);}
/* 24 -> 28px. Bewusst nur leicht: Das Icon soll die Gruppe aus Kicker und
   Überschrift stützen, nicht mit der Konturziffer konkurrieren. Alle vier */
.fitem .fic svg{width:28px;height:28px;}
.fitem .kicker{
  font-size:var(--t-2xs);font-weight:600;letter-spacing:var(--ls-wide);
  text-transform:uppercase;color:var(--amber-text);
}
/* „Berufsunfähigkeitsversicherung" ist 30 Zeichen und als ein Wort nicht
   umbrechbar. --t-lg ist eine feste Stufe (1.375rem), klammert also nicht */
.fitem h3{font-size:var(--t-lg);hyphens:auto;}
.fitem-body p{color:var(--ink-soft);font-size:var(--t-base);}

.focus-note{margin-top:var(--space-block);color:var(--ink-soft);font-size:var(--t-base);}
.focus-note a{color:var(--petrol);font-weight:600;border-bottom:2px solid var(--amber-soft);}
.focus-note a:hover{border-color:var(--amber);}

/* ═══ bKV / Für Arbeitgeber ════════════════════════════════════════════
   Gliederung in drei Bänder statt zwei Spalten: */
.bkv{background:var(--mist);}

.bkv-top{align-items:center;}
.bkv-copy{grid-column:1 / span 6;}
.bkv-media{grid-column:7 / span 6;position:relative;}
.bkv-copy .eyebrow{margin-bottom:18px;}
.bkv-copy .lead{font-size:var(--t-md);color:var(--ink-soft);margin-top:18px;}

/* Zwei Spalten, Haarlinien als Trenner. Bewusst KEINE Kacheln mit Rahmen und
   Schatten — die Nutzenpunkte sollen redaktionell ruhig bleiben. */
.bkv-benefits{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(30px,4vw,72px);
  margin-top:var(--space-block);
  border-top:var(--hairline);
}
/* Erste Spalte 26 -> 30px, genau die Icongröße. Der Abstand zum Text wächst
   von 16 auf 18px mit, sonst rückt der größere Körper des Icons optisch an */
.bkv-item{
  display:grid;grid-template-columns:30px minmax(0,1fr);gap:18px;
  align-items:start;
  padding:22px 0;
  border-bottom:var(--hairline);
}
/* Icons ohne Kachel: die goldene Kachel war Teil des Template-Musters.
   22 -> 30px, hier deutlich statt behutsam: Die vier Nutzenpunkte sind der */
.bkv-item .bic{color:var(--amber-deep);display:inline-flex;padding-top:4px;}
.bkv-item .bic svg{width:30px;height:30px;}
.bkv-item h3{font-size:var(--t-base);margin-bottom:4px;}
.bkv-item p{color:var(--ink-soft);font-size:var(--t-sm);}

.bkv-cta{margin-top:var(--space-block);}

.video-embed{
  position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-md);background:var(--petrol-700);
}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.bkv-vidnote{margin-top:14px;font-size:var(--t-xs);color:var(--ink-soft);}

/* ── Gesperrte Einbettung (Zwei-Klick-Lösung) ──────────────────────────
   Der bKV-Erklärfilm lädt erst nach ausdrücklichem Klick. Bis dahin steht
   ⚠ Kein Vorschaubild von YouTube. Ein Bild von i.ytimg.com würde beim */
.video-embed--gesperrt{background:linear-gradient(150deg,#2a3a64,var(--petrol-900));}
.sperre{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;
  padding:clamp(20px,4.5%,34px);text-align:center;
}
/* Reine Gestaltung, kein Bedienelement: zurückgenommen und ohne Schatten,
   damit niemand daneben klickt statt auf den Knopf. */
.sperre-play{
  width:46px;height:46px;border-radius:50%;flex:none;
  background:rgb(255 255 255 / .14);display:grid;place-items:center;
  color:rgb(255 255 255 / .8);
}
.sperre-play svg{width:20px;height:20px;margin-left:2px;}
.sperre-text{
  color:rgb(255 255 255 / .9);font-size:var(--t-sm);line-height:1.5;
  max-width:34ch;margin:0;text-wrap:balance;
}
.sperre-knopf{font-size:var(--t-sm);}
.sperre-fein{
  color:rgb(255 255 255 / .58);font-size:var(--t-2xs);line-height:1.5;
  max-width:44ch;margin:0;
}
.sperre-fein em{font-style:normal;color:rgb(255 255 255 / .78);}
.sperre-fein a{color:var(--amber);border-bottom:1px solid rgb(var(--amber-rgb) / .45);}
.sperre-fein a:hover{color:#fff;border-bottom-color:#fff;}

/* Ohne JavaScript ersetzt <noscript> die Fläche. Die gescriptete Variante
   muss dann weg, sonst stünden zwei Sperren übereinander. */
.sperre--ohne-js{background:linear-gradient(150deg,#2a3a64,var(--petrol-900));}

/* ⚠ .video-embed kommt NUR hier vor, beim bKV-Erklärfilm. Die Videokarten
   arbeiten mit externen Links, nicht mit Einbettungen. */

/* ═══ Über mich ════════════════════════════════════════════════════════ */
.about-grid{align-items:center;}
.about-photo{grid-column:1 / span 5;}
.about-copy{grid-column:7 / span 6;}
.about-photo .photo-frame{aspect-ratio:1/1.15;background:linear-gradient(160deg,#2b3c68,#101935);}
.about-copy .eyebrow{margin-bottom:18px;}
.about-copy p{color:var(--ink-soft);margin-top:20px;font-size:var(--t-md);}
.about-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;}
.tag{
  display:inline-flex;align-items:center;gap:.5em;
  background:transparent;border:var(--hairline-amber);border-radius:var(--r-full);
  padding:.45em 1em;font-size:var(--t-xs);font-weight:600;color:var(--petrol-700);
}
.tag svg{width:15px;height:15px;color:var(--amber-deep);flex:none;}

/* ═══ Ablauf — echte Zeitachse ═════════════════════════════════════════
   durchgehende Linie, auf der die Ordnungszahlen sitzen. */
.steps{background:var(--petrol-700);color:#fff;position:relative;overflow:hidden;}
.steps .glow{
  position:absolute;width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle,rgb(var(--amber-rgb) / .13),transparent 66%);
  bottom:-240px;left:-140px;
}
.steps .section-head h2{color:#fff;}
.steps .section-head .lead{color:rgb(255 255 255 / .78);}
/* Auf dunklem Grund reicht --amber-deep nicht als Kontrast, deshalb --amber. */
.steps .eyebrow{color:var(--amber);}

.timeline{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--col-gap);
  /* <ol> wegen der Semantik (nummerierte Schritte), aber ohne die
     Standard-Nummerierung — sonst steht neben der gestalteten „01“ noch die */
  list-style:none;
  margin:var(--space-block) 0 0;
  padding:52px 0 0;
}
/* Die durchgehende Achse */
.timeline::before{
  content:"";position:absolute;left:0;right:0;top:22px;height:1px;
  background:linear-gradient(90deg,
    rgb(var(--amber-rgb) / .55) 0%,
    rgb(var(--amber-rgb) / .55) 88%,
    rgb(var(--amber-rgb) / 0) 100%);
}
.tstep{position:relative;}
/* Knoten auf der Achse */
.tstep::before{
  content:"";position:absolute;top:-34px;left:0;
  width:9px;height:9px;border-radius:50%;
  background:var(--amber);
  box-shadow:0 0 0 5px rgb(var(--amber-rgb) / .16);
}
.tstep .sn{
  font-family:"Bricolage Grotesque";font-weight:800;font-size:var(--t-num);
  color:transparent;-webkit-text-stroke:1.5px rgb(var(--amber-rgb) / .72);
  line-height:.9;letter-spacing:-.03em;margin-bottom:18px;display:block;
}
.tstep h3{color:#fff;font-size:var(--t-lg);margin-bottom:10px;}
.tstep p{color:rgb(255 255 255 / .74);font-size:var(--t-base);}

/* ═══ YouTube-Kanal — eigener heller Schwerpunkt ═══════════════════════
   ⚠ IN DIESER SEKTION GIBT ES KEINE EINBETTUNG. Kein iframe, kein
   bKV-Film vor.
   ⚠ Keinen Ersatz einbauen: keine Welle, keine Höhenlinien, kein Verlauf. */
.videos{background:var(--paper);}
/* Die drei Farbregeln für dunklen Grund (h2 auf #fff, .lead auf Weiß-78 %,
   greifen die Vorgaben des Designsystems, und das sind genau die gewünschten */

/* Kopf: links Überschrift und Einleitung, rechts Rhythmus und Button.
   flex-wrap sorgt dafür, dass die rechte Gruppe bei Platznot unter den Kopf */
.video-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;}
.video-aside{display:flex;flex-direction:column;align-items:flex-start;gap:20px;}

/* ── Veröffentlichungshinweis ──────────────────────────────────────────
   Dieselbe Bildsprache wie .phone-block im Kontaktbereich: ruhige Fläche, */
.yt-rhythmus{
  display:flex;flex-direction:column;gap:6px;
  padding:16px 20px;
  border-radius:var(--r);
  background:var(--mist);
  border:var(--hairline-amber);
  border-left:3px solid var(--amber);
  min-width:0;max-width:22rem;
}
/* --amber-text statt --amber: Das helle Messing trägt auf --mist nicht,
   derselbe Wechsel wie beim Eyebrow. */
.yt-rhythmus-kopf{
  display:flex;align-items:center;gap:.55em;
  font-size:var(--t-2xs);font-weight:600;letter-spacing:var(--ls-wide);
  text-transform:uppercase;color:var(--amber-text);
}
.yt-rhythmus-kopf svg{width:15px;height:15px;flex:none;}
.yt-rhythmus-text{
  font-family:"Bricolage Grotesque";font-weight:600;
  font-size:var(--t-base);line-height:var(--lh-snug);color:var(--ink);
}

/* ── Wartender Kanal-Button ────────────────────────────────────────────
   Ein <span> mit .btn-primary, siehe index.php — also die volle goldene
   ⚠ Kein opacity mehr: gedämpft soll er ausdrücklich nicht wirken. */
.btn--wartet{cursor:default;box-shadow:none;}
.btn--wartet:hover{
  background:var(--amber);color:#37260a;
  transform:none;box-shadow:none;
}

/* grid-auto-rows:1fr hält ALLE Karten gleich hoch, auch über mehrere
   Rasterzeilen hinweg. Nötig, sobald die Karten umbrechen: Bei 980px (zwei */
.video-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:1fr;
  gap:var(--col-gap);margin-top:var(--space-block);
}
/* Karte auf hellem Grund: --mist, nicht --paper.
   Die Sektion ist selbst --paper — eine Karte in derselben Farbe wäre nur noch */
.vcard{
  border-radius:var(--r);overflow:hidden;
  background:var(--mist);
  border:var(--hairline);
  display:flex;flex-direction:column;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease),
             background .25s var(--ease), border-color .25s var(--ease);
}
/* ⚠ Hover NUR auf a.vcard. Eine Vorschaukarte ist ein <article> ohne href —
   sie darf sich nicht anfassen lassen wie ein Link. */
a.vcard:hover{
  transform:translateY(-4px);box-shadow:var(--shadow-md);
  background:var(--paper);border-color:rgb(var(--amber-rgb) / .55);
}
a.vcard:hover .vmeta h3{color:var(--amber-text);}
.vcard--wartet{cursor:default;}

.vthumb{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  background:linear-gradient(150deg,#2a3a64,var(--petrol-900));
  display:grid;place-items:center;
}
/* Lokales Vorschaubild, sobald eines hinterlegt ist. Füllt dieselbe
   16:9-Fläche wie der Platzhalter, damit alle Karten gleich hoch bleiben. */
.vthumb-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;z-index:0;
}

.vthumb::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(circle at 50% 60%,transparent,rgb(var(--petrol-900-rgb) / .38));
}
.play{
  position:relative;z-index:2;width:58px;height:58px;border-radius:50%;
  background:rgb(255 255 255 / .93);display:grid;place-items:center;
  box-shadow:0 10px 24px rgb(var(--petrol-900-rgb) / .3);
  transition:transform .25s var(--ease);
}
a.vcard:hover .play{transform:scale(1.07);}
/* Im Vorschauzustand ist das Symbol reine Gestaltung — es soll nicht wie ein
   Bedienelement aussehen, deshalb zurückgenommen und ohne Schatten. */
.vcard--wartet .play{
  background:rgb(255 255 255 / .18);
  box-shadow:none;
}
.vcard--wartet .play svg{color:rgb(255 255 255 / .8);}
.play svg{width:22px;height:22px;color:var(--petrol-700);margin-left:3px;}
/* War rgba(8,36,32,.55) — ebenfalls Grün. */
.vlabel{
  position:absolute;left:14px;top:14px;z-index:2;
  background:rgb(var(--petrol-900-rgb) / .6);color:#fff;
  font-size:var(--t-2xs);font-weight:600;letter-spacing:.04em;
  padding:.25em .7em;border-radius:var(--r-sm);
}
/* „Neueste Folge" — gefüllt in Gold, damit sie sich von „Demnächst" abhebt,
   ohne die Karte zu vergrössern. */
.vlabel--neu{background:var(--amber);color:#37260a;}

/* Textbereich der Karte: Auf --mist tragen die normalen Textfarben des
   Designsystems. Der Titel bekommt --ink ausdrücklich, weil h3 innerhalb der */
.vmeta{padding:20px 22px;}
.vmeta h3{font-size:var(--t-base);color:var(--ink);transition:color .2s;}
.vmeta p{font-size:var(--t-xs);color:var(--ink-soft);margin-top:8px;}

/* Zweiter Textlink unter den Karten — nur bei vorhandenem Kanal, siehe
   index.php. Zurückhaltend: kein Button, nur Text mit Goldunterkante. */
.video-foot{margin-top:var(--space-block);}
.video-foot a{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:var(--t-base);font-weight:600;color:var(--petrol);
  border-bottom:2px solid var(--amber-soft);
  padding-bottom:2px;transition:color .2s, border-color .2s;
}
.video-foot a:hover{color:var(--amber-text);border-color:var(--amber);}
.video-foot svg{width:17px;height:17px;}

/* ═══ Social-Band ══════════════════════════════════════════════════════ */
.social{background:var(--mist);padding:46px 0;border-top:var(--hairline);border-bottom:var(--hairline);}
.social-row{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;}
.social-row .lbl{font-family:"Bricolage Grotesque";font-weight:600;font-size:var(--t-base);}
.social-icons{display:flex;gap:12px;}
.sic{
  width:44px;height:44px;border-radius:var(--r-sm);background:transparent;
  border:var(--hairline);display:grid;place-items:center;color:var(--petrol-700);
  transition:transform .25s var(--ease), background .25s, color .25s, border-color .25s;
}
/* ⚠ Hover nur auf a.sic. Solange kein YouTube-Kanal existiert, ist das
   YouTube-Symbol ein <span> (siehe index.php) — es darf sich nicht anfassen
   lassen wie ein Link. */
a.sic:hover{transform:translateY(-3px);background:var(--petrol);border-color:var(--petrol);color:#fff;}
.sic svg{width:20px;height:20px;}
/* Wartender Kanal: gleiche Form, gedämpft, ohne Rückmeldung. Das Symbol bleibt
   sichtbar, damit die Reihe nicht von vier auf drei Zeichen springt und später */
.sic--wartet{cursor:default;opacity:.45;}

/* ═══ Kontakt ══════════════════════════════════════════════════════════
   Kein Formular mehr — nur noch die Kontaktwege, dafür durchgestaltet. */
.contact{background:var(--paper);}

.contact-card{
  background:linear-gradient(155deg,var(--petrol) 0%,var(--petrol-700) 62%,var(--petrol-900) 100%);
  color:#fff;
  border-radius:var(--r-lg);
  padding:clamp(30px,4.5vw,64px);
  box-shadow:var(--shadow-md);
  position:relative;
  overflow:hidden;
  align-items:start;
}
/* Feiner Goldschimmer oben rechts — nimmt das Hero-Glow wieder auf, damit
   die Seite oben und unten dieselbe Handschrift hat. */
.contact-card::before{
  content:"";position:absolute;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgb(var(--amber-rgb) / .13),transparent 66%);
  top:-240px;right:-160px;pointer-events:none;
}

.contact-intro{grid-column:1 / span 6;position:relative;z-index:1;}
.contact-channels{grid-column:8 / span 5;position:relative;z-index:1;}

.contact-intro .eyebrow{color:var(--amber);margin-bottom:18px;}
.contact-intro h2{color:#fff;}
.contact-intro .lead{font-size:var(--t-md);color:rgb(255 255 255 / .78);margin-top:18px;}

.contact-signature{
  margin-top:34px;padding-top:22px;
  border-top:1px solid rgb(255 255 255 / .16);
  display:flex;flex-direction:column;gap:2px;
}
.contact-signature strong{
  font-family:"Bricolage Grotesque";font-weight:700;font-size:var(--t-base);
  letter-spacing:var(--ls-normal);color:#fff;
}
.contact-signature span{font-size:var(--t-xs);color:rgb(255 255 255 / .62);}

/* ── Telefonnummer: das dominierende Element ─────────────────────────── */
.phone-block{
  display:flex;flex-direction:column;gap:8px;
  padding:22px 24px;
  border-radius:var(--r);
  background:rgb(255 255 255 / .05);
  border:1px solid rgb(var(--amber-rgb) / .3);
  border-left:3px solid var(--amber);
  transition:background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.phone-block:hover{
  background:rgb(255 255 255 / .09);
  border-color:var(--amber);
  transform:translateY(-2px);
}
.phone-label{
  display:flex;align-items:center;gap:.55em;
  font-size:var(--t-2xs);font-weight:600;letter-spacing:var(--ls-wide);
  text-transform:uppercase;color:var(--amber);
}
.phone-label svg{width:15px;height:15px;flex:none;}
.phone-number{
  font-family:"Bricolage Grotesque";font-weight:700;
  font-size:var(--t-xl);line-height:1.05;letter-spacing:var(--ls-tight);
  color:#fff;
  /* Gleiche Laufweite für alle Ziffern — die Zahl steht damit ruhig,
     statt durch unterschiedlich breite Ziffern zu flimmern. */
  font-variant-numeric:tabular-nums;
}
.phone-note{font-size:var(--t-xs);color:rgb(255 255 255 / .66);}

/* ── Weitere Kontaktwege ─────────────────────────────────────────────── */
.channel-list{list-style:none;margin:8px 0 0;padding:0;}
.channel-list li{border-bottom:1px solid rgb(255 255 255 / .13);}
.channel-list li:first-child{border-top:1px solid rgb(255 255 255 / .13);}

.channel-list a,
.channel-list .ch-static{
  display:grid;grid-template-columns:22px minmax(0,1fr);gap:14px;
  align-items:start;padding:17px 2px;
}
.channel-list a{transition:padding-left .25s var(--ease);}
.channel-list a:hover{padding-left:8px;}
.channel-list a:hover .ch-main{color:var(--amber);}

.ch-ic{color:var(--amber);display:inline-flex;padding-top:2px;}
.ch-ic svg{width:19px;height:19px;}
.ch-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
.ch-main{
  font-weight:600;line-height:1.35;color:#fff;
  transition:color .2s;
  /* Lange Mailadressen dürfen umbrechen statt die Karte zu sprengen. */
  overflow-wrap:anywhere;
}
.ch-sub{font-size:var(--t-xs);color:rgb(255 255 255 / .62);}

.contact-foot{
  margin-top:26px;
  display:grid;grid-template-columns:19px minmax(0,1fr);gap:.8em;
  align-items:start;
  font-size:var(--t-xs);color:rgb(255 255 255 / .8);
}
.contact-foot svg{width:17px;height:17px;color:var(--amber);margin-top:3px;}
/* ═══ Footer ═══════════════════════════════════════════════════════════ */
footer{background:var(--petrol-900);color:rgb(255 255 255 / .7);padding:64px 0 30px;}
.foot-top{
  display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;
  padding-bottom:32px;border-bottom:1px solid rgb(255 255 255 / .12);
}
.foot-brand{max-width:24rem;}
.foot-brand .brand-text strong{color:#fff;}
.foot-brand .brand-text span{color:rgb(255 255 255 / .55);}
.foot-brand p{margin-top:18px;font-size:var(--t-sm);}
.foot-cols{display:flex;gap:60px;flex-wrap:wrap;}
/* Die Spaltenüberschriften sind h2, damit die Überschriftenfolge auf JEDER
   Seite aufgeht — auch auf einer, die im Inhalt nur eine h1 hat.
   line-height muss hier stehen: Die allgemeine Regel für h1–h3 in base.css
   setzt --lh-tight, was für diese kleine Versalzeile zu eng ist. */
.foot-col h2{
  font-family:"Bricolage Grotesque";font-size:var(--t-2xs);letter-spacing:.1em;
  text-transform:uppercase;color:#fff;margin:0 0 16px;font-weight:600;
  line-height:var(--lh-base);
}
.foot-col a{display:block;font-size:var(--t-sm);margin-bottom:10px;color:rgb(255 255 255 / .7);transition:color .2s;}
.foot-col a:hover{color:var(--amber);}
.foot-bottom{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:26px;font-size:var(--t-xs);color:rgb(255 255 255 / .5);
}
/* Unterstrichen: Der Link steht mitten im Fließtext der Fußzeile und wäre
   sonst allein an der Farbe zu erkennen. Wer Farben schlecht unterscheidet,
   sieht ihn dann gar nicht. */
.foot-bottom a{color:rgb(255 255 255 / .6);text-decoration:underline;text-underline-offset:3px;}
.foot-bottom a:hover{color:#fff;}

/* Der Einstellungsknopf steht zwischen Links und muss sich wie einer lesen —
   ein <button> bringt aber Browser-Vorgaben für Rahmen, Hintergrund,
   ⚠ Er BLEIBT trotzdem ein <button>: Er öffnet etwas auf dieser Seite, statt
     zu einer Adresse zu führen. */
.foot-knopf{
  display:block;font-family:inherit;font-size:var(--t-sm);
  margin-bottom:10px;padding:0;text-align:left;
  background:none;border:0;cursor:pointer;
  color:rgb(255 255 255 / .7);transition:color .2s;
}
.foot-knopf:hover{color:var(--amber);}

/* ═══ Datenschutz-Einstellungen ════════════════════════════════════════
   Ein natives <dialog>. Abdunklung, Tastaturfalle, Escape und Fokusrückgabe
   ⚠ <dialog> hat Browser-Vorgaben für Rahmen, Breite und Innenabstand und
     sitzt ohne Zutun mittig; margin:auto hält es dort auch, wenn die eigene */
.ds{
  border:0;padding:0;margin:auto;
  width:min(34rem,calc(100vw - 2*var(--gutter)));
  max-height:min(86vh,44rem);
  background:var(--paper);color:var(--ink);
  border-radius:var(--r-lg);box-shadow:var(--shadow-md);
}
.ds::backdrop{background:rgb(var(--petrol-900-rgb) / .62);backdrop-filter:blur(3px);}
.ds-inner{display:flex;flex-direction:column;gap:16px;padding:clamp(24px,4vw,36px);}
.ds h2{font-size:var(--t-lg);margin:0;}
.ds-lead{font-size:var(--t-sm);color:var(--ink-soft);line-height:var(--lh-base);margin:0;}
.ds-lead strong{color:var(--ink);}

.ds-schalter{
  display:flex;gap:14px;align-items:flex-start;cursor:pointer;
  padding:16px;border:var(--hairline);border-radius:var(--r);
  background:#fff;transition:border-color .2s,background .2s;
}
.ds-schalter:hover{border-color:rgb(var(--amber-rgb) / .55);background:rgb(var(--amber-rgb) / .04);}
.ds-schalter input{
  width:20px;height:20px;flex:none;margin-top:2px;
  accent-color:var(--amber-deep);cursor:pointer;
}
.ds-schalter-text{font-size:var(--t-xs);color:var(--ink-soft);line-height:1.5;}
.ds-schalter-text strong{display:block;font-size:var(--t-sm);color:var(--ink);margin-bottom:3px;}

.ds-fein{font-size:var(--t-2xs);color:var(--ink-soft);line-height:1.5;margin:0;}
.ds-fein a{color:var(--petrol);border-bottom:2px solid var(--amber-soft);}
.ds-aktionen{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px;}
.ds-aktionen .btn{font-size:var(--t-sm);}

/* ═══ Rechtsseiten — Impressum, Datenschutz, Erstinformation ═══════════
   Eigener Block, weil Rechtstexte anders funktionieren als die Startseite: */
.legal-section{padding-bottom:var(--space-block);}

/* ⚠ Rechtsseiten tragen die längsten Einzelwörter des ganzen Projekts.
   ist aber nur 284px breit — das ergab 6px horizontalen Überlauf auf der
   ganzen Seite. Im Fließtext stehen noch längere Brocken */
.legal-section h1,
.legal h2,
.legal h3{hyphens:auto;}

/* Jede Seite braucht genau eine h1 — auf den Rechtsseiten ist das der
   Seitentitel. Optisch soll er aber wie die Sektionsüberschriften der */
.legal-section h1{font-size:var(--t-xl);}

.legal{max-width:38rem;margin-top:var(--space-block);}
.legal p{margin-bottom:1.25em;}
.legal p:last-child{margin-bottom:0;}

/* Die Anschrift trägt die Seite an und darf etwas größer stehen. */
.legal-anschrift{font-size:var(--t-md);color:var(--ink);}

/* Zweistufige Gliederung: h1 als Seitentitel, darunter nummerierte Hauptabschnitte (h2) und benannte
   Unterabschnitte (h3). Das Impressum nutzt nur h2, die Datenschutzerklärung */
.legal h2{
  font-size:var(--t-lg);line-height:var(--lh-snug);
  margin:2.4em 0 .8em;
  padding-top:1em;
  border-top:var(--hairline);
}
.legal h2:first-of-type{margin-top:1.6em;padding-top:0;border-top:0;}

/* ⚠ NICHT auf --t-base setzen. Das Token ist 1rem = 16px, base.css stellt den
   Fließtext aber auf 17px — eine Zwischenüberschrift wäre damit KLEINER als
   --t-md (18px) stellt die Reihenfolge wieder her: 22 / 18 / 17. */
.legal h3{
  font-size:var(--t-md);font-weight:700;line-height:var(--lh-snug);
  color:var(--ink);
  margin:1.9em 0 .6em;
}
.legal h3 + p{margin-top:0;}

/* Lange Rechtsbegriffe und Adressen brechen sonst über ihre Box hinaus —
   „Umsatzsteueridentifikationsnummer" allein ist 34 Zeichen. */
.legal p{overflow-wrap:break-word;}

/* Links wie im übrigen Fließtext der Seite (vgl. .focus-note a).
   Wortumbruch erlaubt, weil E-Mail-Adresse und Registernummer bei 320px */
.legal a{
  color:var(--petrol);font-weight:600;
  border-bottom:2px solid var(--amber-soft);
  transition:color .2s, border-color .2s;
  overflow-wrap:anywhere;
}
.legal a:hover{color:var(--amber-text);border-color:var(--amber);}

/* ═══ Reveal — gestaffelt ══════════════════════════════════════════════
   was mechanisch wirkt. Jetzt kürzer und gestaffelt. */
.reveal{
  opacity:0;transform:translateY(16px);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
  transition-delay:var(--reveal-delay,0ms);
}
.reveal.in{opacity:1;transform:none;}

/* ═══ Hinweis beim ersten Besuch ═══════════════════════════════════════════
   Ein Balken am unteren Rand, KEIN abdunkelndes Fenster über der Seite.
   ⚠ Beide Knöpfe tragen dieselbe Klasse und damit dieselbe Gestaltung. */
.ebalken{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--paper);border-top:var(--hairline);
  box-shadow:0 -8px 32px rgb(var(--petrol-900-rgb) / .14);
  padding:18px 0 max(18px,env(safe-area-inset-bottom));
}
.ebalken[hidden]{display:none;}
.ebalken-inner{
  display:grid;gap:14px 28px;align-items:center;
  grid-template-columns:1fr auto;
}
.ebalken-text{
  margin:0;font-size:var(--t-sm);line-height:1.55;color:var(--ink-soft);
  max-width:62ch;
}
.ebalken-text strong{color:var(--ink);}
.ebalken-aktionen{display:flex;gap:10px;flex-wrap:wrap;}
.ebalken-aktionen .btn{font-size:var(--t-sm);}
/* Die Fusszeile steht in der ersten Spalte unter dem Text, damit die Knöpfe
   rechts auf einer Höhe mit dem Absatz bleiben. */
.ebalken-fein{
  grid-column:1;margin:0;
  font-size:var(--t-2xs);line-height:1.5;color:var(--ink-soft);
}
.ebalken-fein em{font-style:normal;color:var(--ink);}
.ebalken-fein a{color:var(--petrol);border-bottom:2px solid var(--amber-soft);}

/* Zwei Elemente, die erst mit der neuen Datenschutzerklärung dazugekommen sind.
   .legal code — für den Namen des Speicherschlüssels und die beiden Werte. */
.legal code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.92em;
  background:rgb(var(--petrol-rgb) / .06);
  border-radius:var(--r-sm);
  padding:.12em .4em;
  overflow-wrap:anywhere;
}
.legal-stand{
  margin-top:2.6em;padding-top:1.2em;border-top:var(--hairline);
  font-size:var(--t-xs);color:var(--ink-soft);
}