@import url("./fonts/schriften.css");

/* ============================================================
   Beratungspraxis Haug-Bodenmüller

   BAUPRINZIP — Minimal-Maximal (Entscheidung Matthias, 29.08.2026):
   Oben steht fast nichts. Sichtbar sind das Angebot, sich kennenzulernen,
   und der Weg dorthin. Alles Weitere klappt auf, wer es wissen will.

   EIN ERSCHEINUNGSBILD, kein Dunkelmodus. Die Seite lebt vom Wechsel
   zwischen warmem Papier und dunklen Bändern — ein umgekehrtes Schema
   würde genau diesen Wechsel zerstören. Deshalb ist jede Farbe explizit
   gesetzt und es gibt bewusst keinen prefers-color-scheme-Block.

   KEINE ANIMATION. Die Aufklapper öffnen ohne Übergang. Begründung:
   ein Teil der Zielgruppe sind autistische Menschen und ihre Angehörigen.

   Die Farben sind nicht gewählt, sondern aus den Praxisfotos gemessen.
   ============================================================ */

/* Sanfter Seitenwechsel: einzige bewusste Ausnahme von "keine Animation",
   auf Wunsch von Matthias. Ueberblendet die ganze Seite beim Klick auf
   einen Link zu einer anderen Seite. Browser ohne Unterstuetzung wechseln
   einfach ohne Uebergang -- kein Fehler, keine Abhaengigkeit. */
@view-transition{ navigation:auto }
::view-transition-old(root), ::view-transition-new(root){ animation-duration:.35s }
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root), ::view-transition-new(root){ animation-duration:.01ms }
}

:root{
  --tief:       #16140E;
  --tief-2:     #201C14;
  --kopf-grund: #35686C;   /* Kopfzeile: Petrol, Navigation jetzt in Papier statt Logo-Gruen fuer mehr Helligkeit */
  --terra-hell: #F0A67A;   /* Terra-Akzent, hell genug fuer grossen Text auf --kopf-grund, 3,97:1 */
  --logo-akzent:#B4DF40;   /* Aus dem Logo gemessenes Gruen, leicht aufgehellt: 5,18:1 auf --kopf-grund */
  --papier:     #F8F4EC;
  --papier-2:   #EFE7D9;
  --tinte:      #221F19;
  --leise:      #6C6254;
  --leise-hell: #B5A995;
  --terra:      #C1502A;
  --terra-tief: #A5401F;
  --terra-link: #A5401F;
  --gruen:      #7E8C3C;
  --linie:      rgba(34,31,25,.13);
  --linie-satt: #8A7A63;   /* Bedienelemente: 3,79:1 auf Papier, 3,39:1 auf Flaeche */
  --linie-hell: rgba(248,244,236,.15);

  --titel: Fraunces, Georgia, "Times New Roman", serif;
  --text:  "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mass:  34em;
  --rand:  clamp(22px, 5vw, 56px);
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{ margin:0; background:var(--papier); color:var(--tinte);
  font-family:var(--text); font-size:18px; line-height:1.6; text-align:left;
  -webkit-font-smoothing:antialiased }
@media(min-width:700px){ body{ font-size:18.5px } }
img{ display:block; max-width:100%; height:auto }
a{ color:var(--terra-link); text-underline-offset:3px }
a:hover{ color:var(--terra) }
h1,h2,h3{ font-family:var(--titel); font-weight:500; margin:0;
  letter-spacing:-.02em; text-wrap:balance }
strong{ font-weight:700 }
:focus-visible{ outline:3px solid var(--gruen); outline-offset:3px; border-radius:2px }
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important } }

.zum-inhalt{ position:absolute; left:-9999px; background:var(--tinte); color:var(--papier);
  padding:12px 18px; z-index:100; text-decoration:none }
.zum-inhalt:focus{ left:12px; top:12px }

.bahn{ max-width:1180px; margin:0 auto; padding:0 var(--rand) }
.eyebrow{ font-size:14px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--leise); display:flex; align-items:center; gap:14px; margin:0 0 22px }
.eyebrow::before{ content:""; width:34px; height:2px; background:var(--terra); flex:0 0 auto }

/* ---------------- Kopfzeile ---------------- */
.kopf{ background:var(--kopf-grund); color:var(--papier); position:sticky; top:0; z-index:5 }
.kopf--auf{ position:absolute; top:0; left:0; right:0; z-index:5; background:transparent }
.kopf-innen{ padding:24px var(--rand);
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px }
.marke{ display:flex; align-items:center; gap:14px; font-family:var(--titel); font-size:23px; font-weight:600; color:var(--papier);
  text-decoration:none; line-height:1.1; margin-right:auto; letter-spacing:-.015em }
.marke img{ width:50px; height:50px; flex:0 0 auto }
.marke small{ display:block; font-family:var(--text); font-size:12px; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase; color:var(--leise-hell); margin-top:5px }
.kopf nav ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:nowrap; gap:6px 22px }
.kopf nav a, .kopf .ruf{ color:var(--papier); text-decoration:none; font-size:17px; font-weight:700; opacity:.96;
  padding:4px 0; border-bottom:2px solid transparent; display:inline-block;
  text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 }
.kopf .ruf{ margin-left:auto }
.kopf nav a:hover, .kopf .ruf:hover{ opacity:1; color:var(--papier) }
.kopf nav a[aria-current="page"]{ opacity:1; border-bottom-color:var(--logo-akzent) }
.menue-knopf{ display:none }
@media(min-width:1001px) and (max-width:1300px){
  .marke{ font-size:16px; gap:8px }
  .marke img{ width:32px; height:32px }
  .marke small{ display:none }
  .kopf-innen{ gap:8px 16px }
  .kopf nav ul{ gap:6px 10px }
  .kopf nav a{ font-size:15px }
}
@media(max-width:1000px){
  .menue-knopf{ display:inline-block; font-family:var(--text); font-size:15.5px;
    background:transparent; color:var(--papier); border:1px solid rgba(248,244,236,.4);
    border-radius:2px; padding:9px 16px; cursor:pointer }
  .kopf nav{ flex-basis:100% }
  .kopf nav ul{ flex-direction:column; gap:0 }
  .kopf nav li{ border-top:1px solid var(--linie-hell) }
  .kopf nav a{ display:block; padding:12px 0; font-size:17px }
  .kopf nav[hidden]{ display:none }
  .marke{ font-size:18px; gap:10px }
  .marke img{ width:36px; height:36px }
  .marke small{ display:none }
}

/* ---------------- Knöpfe ---------------- */
.knopf{ display:inline-block; background:var(--terra); color:#fff; text-decoration:none;
  font-weight:700; font-size:17px; padding:17px 28px; border-radius:2px;
  border:2px solid var(--terra); font-family:var(--text); cursor:pointer }
.knopf:hover{ background:var(--terra-tief); border-color:var(--terra-tief); color:#fff }
.knopf--geist{ background:transparent; color:var(--papier); border-color:rgba(248,244,236,.4) }
.knopf--geist:hover{ background:rgba(248,244,236,.1); border-color:var(--papier); color:var(--papier) }
.knopf--rand{ background:transparent; color:var(--terra-link); border-color:var(--terra-link) }
.knopf--rand:hover{ background:rgba(193,80,42,.08); color:var(--terra-tief) }
.knopf--icon{ display:inline-flex; align-items:center; justify-content:center; padding:15px; line-height:0 }
.knoepfe{ display:flex; flex-wrap:wrap; gap:14px; align-items:center }
.oder{ color:var(--leise-hell); font-size:16px }
.oder a{ color:var(--papier); font-weight:700 }

/* ---------------- Auftakt ---------------- */
.auftakt{ position:relative; background:var(--kopf-grund); color:var(--papier);
  min-height:min(94vh,920px); display:flex; align-items:center; overflow:hidden }
.auftakt--klein{ min-height:auto }
.auftakt-bild{ position:absolute; top:0; right:clamp(28px,4vw,56px);
  bottom:clamp(40px,6vh,64px); left:auto; width:min(46%,620px) }
.auftakt-bild img{ width:100%; height:100%; object-fit:cover; object-position:50% 16% }
.auftakt > .bahn{ max-width:none; width:100% }
.auftakt-innen{ position:relative; z-index:2;
  max-width:min(720px, calc(100% - clamp(28px,4vw,56px) - min(46%,620px) - 40px));
  margin-right:auto; padding:clamp(50px,7vh,90px) 0 clamp(50px,7vh,70px) }
.auftakt .eyebrow{ color:var(--leise-hell) }
.auftakt h1{ font-size:clamp(38px,6.6vw,84px); line-height:1.04; margin:0 0 26px;
  font-variation-settings:"opsz" 120 }
.auftakt h1 em{ font-style:normal; color:var(--terra-hell) }
.auftakt .fuehrung{ font-size:clamp(17px,1.5vw,20px); line-height:1.55; color:#E6DDCE;
  max-width:32em; margin:0 0 30px }
.kostenlos{ margin:0 0 32px }
.kostenlos b{ font-family:var(--titel); font-size:clamp(24px,2.5vw,33px); color:var(--terra-hell);
  font-variation-settings:"opsz" 60; font-weight:600 }
@media(max-width:700px){
  .auftakt{ display:block; min-height:auto }
  .auftakt-bild{ position:static; width:100%; aspect-ratio:4/3 }
  .auftakt-innen{ max-width:none; margin-right:0;
    padding:clamp(32px,7vw,48px) 0 clamp(40px,8vw,56px) }
}

/* ---------------- Bild-Trio ---------------- */
.trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 }
.trio img{ width:100%; height:clamp(150px,23vw,320px); object-fit:cover }
@media(max-width:640px){ .trio{ grid-template-columns:1fr 1fr } .trio :nth-child(3){ display:none } }

/* ---------------- Aufklapper ---------------- */
.mehr{ padding:clamp(66px,9vw,120px) 0 }
.mehr h2{ font-size:clamp(26px,3.4vw,42px); line-height:1.1; margin:0 0 8px;
  font-variation-settings:"opsz" 72 }
.mehr .unter{ color:var(--leise); font-size:17px; margin:0 0 40px; max-width:38em }
details{ border-top:1px solid var(--linie) }
details:last-of-type{ border-bottom:1px solid var(--linie) }
.beratungssetting > .bahn, .voll > .bahn{ max-width:none }
.angebote-liste{ display:grid; grid-template-columns:1fr }
@media(min-width:700px){
  .angebote-liste{ grid-template-columns:1fr 1fr; column-gap:clamp(24px,3vw,40px);
    border-bottom:1px solid var(--linie) }
  .angebote-liste > details:last-of-type{ border-bottom:none }
}
summary{ list-style:none; cursor:pointer; display:grid;
  grid-template-columns:9.2em minmax(0,1fr) 44px; align-items:center;
  gap:clamp(12px,2vw,28px); padding:clamp(22px,2.6vw,30px) 0 }
summary::-webkit-details-marker{ display:none }
.s-nr:empty{ display:none }
.s-nr img{ width:100%; max-width:9.2em; height:auto; aspect-ratio:8/11; object-fit:cover;
  border-radius:2px; display:block }
.s-titel{ font-family:var(--titel); font-size:clamp(21px,2.5vw,30px); line-height:1.16;
  font-variation-settings:"opsz" 60 }
.s-zeichen{ width:44px; height:44px; border:1px solid var(--linie-satt); border-radius:50%;
  display:grid; place-items:center; color:var(--terra); font-size:22px; line-height:1;
  justify-self:end }
summary:hover .s-titel{ color:var(--terra) }
summary:hover .s-zeichen,
details[open] > summary .s-zeichen{ background:var(--terra); border-color:var(--terra); color:#fff }
.s-zeichen::before{ content:""; width:.45em; height:.45em; border-right:2px solid currentColor;
  border-bottom:2px solid currentColor; transform:translateY(-.14em) rotate(45deg) }
details[open] > summary .s-zeichen::before{ transform:translateY(.14em) rotate(-135deg) }
.inhalt{ padding:0 0 clamp(26px,3vw,38px) }
.inhalt figure{ margin:16px 0 0 }
.inhalt figure img{ border-radius:2px; width:100% }
.inhalt figcaption{ font-size:14px; color:var(--leise); margin-top:8px }
.inhalt p{ margin:0 0 14px; max-width:40em; color:#463F35; font-size:17px }
.inhalt p:last-child{ margin-bottom:0 }
.inhalt ul{ margin:0 0 14px; padding-left:1.1em; max-width:40em; color:#463F35; font-size:17px }
.inhalt li{ margin-bottom:6px }
.inhalt a{ font-weight:700 }
@media(min-width:860px){
  .inhalt-mit-bild{ grid-template-columns:2.6em minmax(0,1.35fr) minmax(0,1fr) }
  .inhalt-mit-bild figure{ grid-column:3; grid-row:1; margin:0 }
}
.details-verschachtelt summary{ grid-template-columns:minmax(0,1fr) 44px }
@media(max-width:860px){
  summary{ grid-template-columns:5.6em minmax(0,1fr) 34px }
  .s-nr img{ max-width:5.6em }
  .s-zeichen{ width:34px; height:34px; font-size:18px }
  .details-verschachtelt summary{ grid-template-columns:minmax(0,1fr) 34px }
}

/* ---------------- Abschnitte ---------------- */
.abschnitt{ padding:clamp(60px,8vw,110px) 0 }
.abschnitt--flaeche{ background:var(--papier-2) }
.abschnitt--tief{ background:var(--tief); color:var(--papier) }
.abschnitt--tief h2,.abschnitt--tief h3{ color:var(--papier) }
.abschnitt--tief p{ color:#D9CFBF }
.abschnitt--tief .eyebrow{ color:var(--leise-hell) }
.abschnitt h2{ font-size:clamp(27px,3.6vw,44px); line-height:1.1; margin:0 0 20px;
  font-variation-settings:"opsz" 72 }
.abschnitt h3{ font-size:clamp(19px,2vw,23px); line-height:1.25; margin:0 0 10px; font-weight:600 }
.abschnitt p{ margin:0 0 15px; max-width:var(--mass) }
.gross{ font-size:1.12em; line-height:1.5 }
.leise{ color:var(--leise) }

.angebote{ display:grid; grid-template-columns:1fr; gap:clamp(28px,4vw,40px);
  margin-top:clamp(28px,4vw,40px); padding-bottom:clamp(28px,4vw,40px) }
.angebot-zeile{ display:flex; flex-direction:column; align-items:center; gap:16px;
  padding:0 clamp(20px,4vw,48px); text-align:center }
.angebot-zeile picture{ display:block; width:100%; max-width:260px; margin:0 auto; aspect-ratio:8/11;
  flex:0 0 auto }
.angebot-zeile img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:2px }
.angebot-zeile h3{ margin:0; font-size:clamp(20px,2.3vw,27px) }
.angebot-zeile p{ margin:0; max-width:32em }
@media(min-width:700px){
  .angebote{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .angebot-zeile{ border-left:1px solid transparent; padding:0 clamp(14px,3.5vw,48px) }
  .angebot-zeile:not(:first-child){ border-left-color:rgba(193,80,42,.3) }
  .angebot-zeile h3{ min-height:2.6em; display:flex; align-items:flex-end; justify-content:center }
}

.zwei{ display:grid; gap:clamp(28px,5vw,60px); grid-template-columns:minmax(0,1fr) }
@media(min-width:880px){
  .zwei{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:center }
  .zwei--bild-links{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) }
}
.zwei img{ border-radius:2px; width:100% }

/* ---------------- Listen ---------------- */
.anliegen{ list-style:none; padding:0; margin:0 0 20px; max-width:46em }
.anliegen--spalten{ max-width:none; column-gap:clamp(24px,4vw,48px) }
@media(min-width:700px){ .anliegen--spalten{ columns:2 } }
.anliegen--spalten li{ break-inside:avoid }

.haltung-spalten{ max-width:none; column-gap:clamp(24px,4vw,48px);
  margin-top:clamp(20px,3vw,28px) }
@media(min-width:700px){ .haltung-spalten{ columns:2 } }
.haltung-spalten p{ max-width:none; break-inside:avoid; margin:0 0 1em }
.anliegen li{ padding:12px 0 12px 30px; border-top:1px solid var(--linie); position:relative; margin:0 }
.anliegen li:first-child{ border-top:none }
.anliegen li::before{ content:""; position:absolute; left:4px; top:22px;
  width:12px; height:2px; background:var(--terra) }
.abschnitt--tief .anliegen li{ border-top-color:var(--linie-hell) }

.fakten{ list-style:none; padding:0; max-width:46em; column-gap:44px; margin:0 0 20px }
@media(min-width:760px){ .fakten{ columns:2 } }
.fakten li{ break-inside:avoid; padding:8px 0 8px 22px; position:relative; margin:0; font-size:17px }
.fakten li::before{ content:""; position:absolute; left:2px; top:17px; width:8px; height:8px;
  border-radius:50%; background:var(--linie-satt) }

/* ---------------- Schritte ---------------- */
.stufen{ display:grid; gap:clamp(24px,3vw,44px); grid-template-columns:1fr;
  list-style:none; padding:0; margin:0 }
@media(min-width:800px){ .stufen{ grid-template-columns:repeat(3,1fr) } }
.stufe{ padding-top:20px; border-top:3px solid var(--terra) }
.stufe b{ display:block; font-family:var(--titel); font-size:12.5px; color:var(--terra);
  letter-spacing:.16em; text-transform:uppercase; margin-bottom:12px }
.stufe p{ color:var(--leise); font-size:16.5px; margin:0; max-width:none }
.abschnitt--tief .stufe p{ color:#C8BEAE }

/* ---------------- Preise ---------------- */
.preisreihe{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline;
  gap:8px 24px; padding:20px 0; border-top:1px solid var(--linie); max-width:46em }
.preisreihe:last-of-type{ border-bottom:1px solid var(--linie) }
.preisreihe b{ font-size:18px; flex:0 0 auto }
.preisreihe span{ color:var(--leise); font-size:15.5px; flex:1 1 220px }
.preisreihe em{ font-family:var(--titel); font-style:normal; font-size:25px;
  font-variant-numeric:tabular-nums; font-variation-settings:"opsz" 60 }

/* ---------------- Bildband ---------------- */
.bildband{ position:relative; margin:0 }
.bildband img{ width:100%; aspect-ratio:16/9; height:auto; object-fit:cover;
  max-height:min(60vh,540px) }
/* Variante ohne Deckelung: zeigt das ganze Foto, auch die Beine, keine
   Kappung ueber max-height. Fuer Fotos, bei denen der volle Bildausschnitt
   wichtiger ist als eine einheitliche Bandhoehe. */
.bildband--frei img{ aspect-ratio:auto; max-height:none; object-fit:initial }
.bildband figcaption{ position:absolute; left:0; right:0; bottom:0;
  padding:clamp(18px,3vw,30px) var(--rand);
  background:linear-gradient(transparent,rgba(22,20,14,.8));
  color:var(--papier); font-size:14.5px }

/* ---------------- Kasten ---------------- */
.kasten{ border:1px solid var(--linie-satt); border-left:4px solid var(--terra);
  border-radius:2px; background:var(--papier-2); padding:clamp(20px,3vw,28px);
  margin:0 0 20px; max-width:46em }
.kasten > :last-child{ margin-bottom:0 }
.kasten-reihe{ display:grid; grid-template-columns:1fr; gap:20px;
  margin-top:clamp(32px,4vw,48px) }
@media(min-width:700px){ .kasten-reihe{ grid-template-columns:1fr 1fr } }
.kasten-reihe .kasten{ margin:0; max-width:none }
.kasten h3{ margin-top:0 }
.kasten .fakten{ columns:1; max-width:none }

.begriffe{ display:grid; grid-template-columns:1fr; gap:28px 48px; margin:clamp(28px,4vw,40px) 0 0 }
@media(min-width:700px){ .begriffe{ grid-template-columns:1fr 1fr } }
.begriff{ border-top:2px solid var(--terra); padding-top:16px }
.begriff dt{ font-family:var(--titel); font-size:clamp(19px,2vw,23px); font-weight:600;
  color:var(--terra-tief); margin:0 0 8px }
.begriff dd{ margin:0; max-width:none }

/* ---------------- Formular ---------------- */
form{ max-width:40em }
.feld{ margin-bottom:22px }
.feld label{ display:block; font-weight:700; font-size:16.5px; margin-bottom:6px }
.feld .hinweis{ display:block; font-weight:400; font-size:15px; color:var(--leise); margin-bottom:8px }
.feld input,.feld select,.feld textarea{ width:100%; font-family:var(--text); font-size:17px;
  color:var(--tinte); background:#fff; border:1px solid var(--linie-satt);
  border-radius:2px; padding:13px 15px; line-height:1.5 }
.feld textarea{ min-height:170px; resize:vertical }
.honigtopf{ position:absolute; left:-9999px }

/* ---------------- Schlussruf ---------------- */
.kennen{ background:var(--kopf-grund); color:var(--papier); padding:clamp(74px,11vw,146px) 0;
  text-align:center }
.kennen h2{ font-size:clamp(29px,4.8vw,60px); line-height:1.07; margin:0 auto 20px;
  max-width:15em; font-variation-settings:"opsz" 110; color:var(--papier) }
.kennen h2 em{ font-style:normal; color:var(--terra-hell) }
.kennen p{ color:#D9CFBF; font-size:18px; max-width:32em; margin:0 auto 34px }
.kennen .knoepfe{ justify-content:center }
.kennen .oder{ display:block; margin-top:28px }

/* ---------------- Fußzeile ---------------- */
.fuss{ background:var(--tief-2); color:var(--leise-hell); padding:44px 0 34px;
  font-size:15px; border-top:1px solid var(--linie-hell) }
.fuss a{ color:var(--leise-hell) }
.fuss a:hover{ color:var(--papier) }
.fuss-raster{ display:grid; gap:26px 44px; grid-template-columns:1fr }
@media(min-width:720px){ .fuss-raster{ grid-template-columns:1.3fr 1fr 1fr } }
.fuss h2{ font-family:var(--text); font-size:12px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--leise-hell); margin:0 0 12px; opacity:.75 }
.fuss ul{ list-style:none; padding:0; margin:0 }
.fuss li{ margin-bottom:7px }
.fuss address{ font-style:normal; line-height:1.7 }
.fuss-schluss{ margin-top:30px; padding-top:18px; border-top:1px solid var(--linie-hell);
  display:flex; flex-wrap:wrap; gap:8px 24px; font-size:14px; opacity:.8 }
.fuss-schluss p{ margin:0 }

/* ---------------- Rechtstexte ---------------- */
.rechtstext h2{ font-size:clamp(20px,2.3vw,25px); margin-top:2.2em }
.rechtstext h3{ margin-top:1.6em }
.rechtstext p,.rechtstext ul{ max-width:var(--mass) }

/* ---------------- Zu prüfen ---------------- */
mark.pruefen{ background:#FFF3C4; color:#3B2C00; padding:1px 4px;
  border-bottom:2px solid #C79A00; border-radius:2px }
mark.pruefen::after{ content:" [PRÜFEN]"; font-size:.7em; font-weight:700;
  letter-spacing:.06em; vertical-align:2px; color:#7A6000 }


/* ============================================================
   Bruecke fuer die Unterseiten
   Die Inhaltsdateien der Unterseiten benutzen noch die Klassen der
   ersten Fassung. Statt zehn Dateien umzuschreiben, bekommen diese
   Klassen hier ihr neues Aussehen. Wer eine Unterseite neu schreibt,
   nimmt die Klassen von der Startseite und diese Bruecke schrumpft.
   ============================================================ */

/* Der Seitenkopf der Unterseiten: dunkles Band statt heller Flaeche */
.abschnitt.kopfteil{
  background:var(--kopf-grund); color:var(--papier);
  padding:clamp(56px,8vw,96px) 0 clamp(46px,6vw,72px);
}
.abschnitt.kopfteil > .bahn{ max-width:none }
.abschnitt.kopfteil h1{
  font-size:clamp(32px,4.8vw,58px); line-height:1.06; margin:0 0 clamp(56px,8vw,80px);
  font-variation-settings:"opsz" 96; color:var(--papier);
}
.abschnitt.kopfteil .orientierung{ max-width:none }
.kopf-spalten{ display:grid; grid-template-columns:1fr; gap:24px; margin-top:clamp(28px,4vw,40px) }
@media(min-width:700px){
  .kopf-spalten{ grid-template-columns:repeat(3,1fr) }
  .kopf-spalten--zwei{ grid-template-columns:repeat(2,1fr) }
  .kopf-spalten > div:not(:first-child){ border-left:1px solid rgba(240,166,122,.35); padding-left:24px }
}
.kopf-spalten h3{ font-family:var(--titel); font-size:1.05em; margin:0 0 8px; color:var(--papier);
  font-variation-settings:"opsz" 40 }
.kopf-spalten p{ margin:0 0 8px; max-width:none; color:#E0D6C6 }
.kopf-spalten p:last-child{ margin-bottom:0 }
.kopf-naechster{ margin-top:clamp(32px,4vw,44px); text-align:center }
.kopf-naechster h3{ font-family:var(--titel); font-size:1.05em; margin:0 0 8px; color:var(--papier);
  font-variation-settings:"opsz" 40 }
.kopf-naechster p{ margin:0; max-width:none }
.kopf-naechster a{ color:var(--terra-hell); font-weight:700 }
.kopfteil-titel{ display:flex; align-items:center; gap:22px; margin:0 0 22px }
.kopfteil-titel img{ width:72px; height:99px; object-fit:cover; border-radius:2px; flex:0 0 auto }
@media(max-width:640px){ .kopfteil-titel img{ width:56px; height:77px } }
.abschnitt.kopfteil p{ color:#E0D6C6 }
.abschnitt.kopfteil .gross{ font-size:1.14em; color:#E9E0D1; max-width:36em }
.abschnitt.kopfteil a{ color:var(--papier); font-weight:700 }

/* Das Auge oben — hiess auf den Unterseiten oben-label */
.oben-label{
  font-size:14px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--leise-hell); display:flex; align-items:center; gap:14px; margin:0 0 20px;
}
.oben-label::before{ content:""; width:34px; height:2px; background:var(--terra); flex:0 0 auto }

/* Der Orientierungsblock: auf dunklem Grund eine helle Karte */
.orientierung{
  background:var(--papier); color:var(--tinte);
  border:none; border-left:4px solid var(--terra); border-radius:2px;
  padding:clamp(22px,3vw,30px); margin:0 0 clamp(24px,3vw,34px); max-width:46em;
}
.orientierung h2{
  font-family:var(--text); font-size:12px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--leise); margin:0 0 16px;
}
.orientierung dl{ margin:0 }
.orientierung dt{ font-weight:700; font-size:14.5px; color:var(--leise);
  letter-spacing:.02em; margin-top:14px }
.orientierung dt:first-of-type{ margin-top:0 }
.orientierung dd{ margin:3px 0 0; color:var(--tinte); font-size:17px }
.orientierung a{ color:var(--terra-link); font-weight:700 }
/* Die Karte steht auf dem dunklen Seitenkopf, ist selbst aber hell.
   Ohne diese Regel gewinnt .abschnitt.kopfteil a (hoehere Spezifitaet)
   und der Link wird papierfarben auf papierfarbenem Grund — unsichtbar.
   Genau das war am 29.08.2026 auf allen Angebotsseiten der Fall. */
.abschnitt.kopfteil .orientierung a{ color:var(--terra-link) }
.abschnitt.kopfteil .orientierung a:hover{ color:var(--terra) }
.abschnitt.kopfteil .orientierung p{ color:var(--tinte) }
.abschnitt.kopfteil .orientierung strong{ color:var(--tinte) }

/* Bild direkt unter dem Seitenkopf, randlos */
.bild-breit{ margin:0 }
.bild-breit img{ width:100%; border-radius:2px }

/* Die alte Schritte-Liste weiterverwenden */
.schritte{ list-style:none; padding:0; margin:0 0 24px; max-width:46em; counter-reset:schritt }
.schritte li{
  counter-increment:schritt;
  display:grid; grid-template-columns:46px minmax(0,1fr);
  column-gap:18px; row-gap:4px;
  padding:22px 0; border-top:1px solid var(--linie); margin:0;
}
.schritte li::before{
  content:counter(schritt); grid-column:1; grid-row:1;
  font-family:var(--titel); font-size:26px; font-weight:600; color:var(--terra);
  line-height:1.1; font-variation-settings:"opsz" 60;
}
.schritte li > *{ grid-column:2 }
.schritte li:first-child{ border-top:none; padding-top:0 }
.schritte h3{ margin:0 0 4px }
.schritte p{ margin:0; max-width:none }

/* Preise als Karten */
.preise{ display:grid; grid-template-columns:1fr; gap:24px;
  margin:0 0 clamp(28px,4vw,40px); max-width:none }
@media(min-width:700px){ .preise{ grid-template-columns:repeat(3,1fr) } }
.preis{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
  border-top:2px solid var(--terra); padding-top:18px }
.preis-wert{ font-size:15px; font-weight:700; color:var(--terra-tief);
  font-variant-numeric:tabular-nums; white-space:nowrap }
.preis-name{ font-weight:700 }
.preis-name small{ display:block; font-weight:400; color:var(--leise); font-size:15px; margin-top:4px }

/* Kontaktwege und Wege-Karten */
.kontaktwege{ display:grid; gap:16px; grid-template-columns:1fr;
  margin:clamp(28px,4vw,40px) 0 0; max-width:46em }
@media(min-width:620px){ .kontaktwege{ grid-template-columns:1fr 1fr } }
.kontaktweg{ border:1px solid var(--linie-satt); border-radius:2px; padding:22px; background:#fff }
.kontaktweg h3{ margin:0 0 6px; font-size:17px }
.kontaktweg p{ margin:0 0 10px; font-size:16px; color:var(--leise); max-width:none }
.kontaktweg a{ font-size:19px; font-weight:700; overflow-wrap:anywhere }

.wege{ display:grid; gap:16px; grid-template-columns:minmax(0,1fr); margin:0; padding:0; list-style:none }
@media(min-width:620px){ .wege{ grid-template-columns:1fr 1fr } }
@media(min-width:1000px){ .wege{ grid-template-columns:repeat(4,1fr) } }
.wege li{ margin:0 }
.weg{ display:flex; flex-direction:column; height:100%; background:#fff;
  border:1px solid var(--linie-satt); border-top:3px solid var(--terra);
  border-radius:2px; padding:22px; text-decoration:none; color:var(--tinte) }
.weg:hover{ border-color:var(--terra) }
.weg h3{ margin:0 0 8px }
.weg p{ margin:0 0 16px; font-size:16.5px; color:var(--leise); max-width:none }
.weg .pfeil{ margin-top:auto; color:var(--terra-link); font-weight:700; font-size:16px }

.knopfreihe{ display:flex; flex-wrap:wrap; gap:12px; margin:0 0 20px }
figure{ margin:0 0 20px }
figcaption{ font-size:15px; color:var(--leise); margin-top:10px; max-width:var(--mass) }
.abschnitt--flaeche + .abschnitt--flaeche{ padding-top:0 }

/* ---------------- Einblenden beim Scrollen ----------------
   Auf Wunsch von Matthias, 13.09.2026, trotz Hinweis auf COGA 4.6.1.
   Nur aktiv, wenn Javascript laeuft (.js-einblenden auf <html>) und die
   Systemeinstellung "Bewegung reduzieren" nicht gesetzt ist. Ohne beides
   ist der Text sofort da — nichts geht verloren. */
@media(prefers-reduced-motion:no-preference){
  .js-einblenden main h1, .js-einblenden main h2, .js-einblenden main h3,
  .js-einblenden main p, .js-einblenden main li{
    opacity:0; transform:translateY(32px);
    transition:opacity 1s ease-out, transform 1s ease-out;
  }
  .js-einblenden main h1.sichtbar, .js-einblenden main h2.sichtbar, .js-einblenden main h3.sichtbar,
  .js-einblenden main p.sichtbar, .js-einblenden main li.sichtbar{
    opacity:1; transform:none;
  }
}