/* Marco Bornschein – Stylesheet
   Farben, Schriften und Abstände zentral in :root ändern. */

@font-face{font-family:"Newsreader";src:url("fonts/newsreader-latin-300-normal.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("fonts/newsreader-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("fonts/newsreader-latin-300-italic.woff2") format("woff2");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"Newsreader";src:url("fonts/newsreader-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("fonts/hanken-grotesk-latin-300-normal.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("fonts/hanken-grotesk-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  --papier:#FAF6EE;
  --papier-alt:#F1EBDF;
  --linie:#D6CEC2;
  --tinte:#2A2B2F;
  --text:#333333;
  --text-leise:#55575A;
  --patina:#4F7366;
  --patina-tief:#3E5D51;
  --salbei:#E3EBE5;
  --salbei-linie:#C3D2C8;
  --serif:"Newsreader",Georgia,serif;
  --sans:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --rand:clamp(20px,5.5vw,80px);
  --max:1280px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--papier);color:var(--tinte);font-family:var(--sans);font-size:16px;line-height:1.5;letter-spacing:-0.023em}
img{max-width:100%;display:block}
a{color:inherit}
a:hover{color:var(--patina-tief)}
:focus-visible{outline:2px solid var(--patina);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{width:100%;max-width:calc(var(--max) + 2*var(--rand));margin-inline:auto;padding-inline:var(--rand)}

/* Typografie */
.serif{font-family:var(--serif);font-weight:400;letter-spacing:normal}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:400;letter-spacing:normal}
em{font-style:italic;font-weight:300;color:var(--patina)}
.h-xl{font-size:clamp(40px,6vw,80px);line-height:1}
.h-l{font-size:clamp(36px,5vw,72px);line-height:1}
.h-m{font-size:clamp(30px,4vw,60px);line-height:1.02}
.center{text-align:center}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:40px;font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:-0.02em;text-decoration:none;border:1.5px solid var(--patina);background:var(--patina);color:var(--papier);cursor:pointer}
.btn:hover{background:var(--patina-tief);border-color:var(--patina-tief);color:var(--papier)}
.btn-line{background:transparent;color:var(--patina)}
.btn-line:hover{background:var(--patina);color:var(--papier)}
.btn-hell{background:var(--papier);border-color:var(--papier);color:var(--patina)}
.btn-hell:hover{background:#fff;border-color:#fff;color:var(--patina-tief)}
.btns{display:flex;flex-wrap:wrap;gap:14px}
.link{font-weight:600;color:var(--patina);text-underline-offset:5px}

/* Hinweisleiste */
.leiste{background:var(--patina);color:var(--papier);text-align:center;font-size:14px;padding:10px var(--rand)}
.leiste a{color:var(--papier)}

/* Hero */
.hero{position:relative;min-height:min(800px,92vh);display:flex;flex-direction:column;background:#3A3833;color:var(--papier);overflow:hidden}
.hero-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 21%}
.hero::before,.hero::after{content:"";position:absolute;left:0;right:0;pointer-events:none}
.hero::before{top:0;height:180px;background:linear-gradient(to bottom,rgba(24,20,16,.4),rgba(24,20,16,0))}
.hero::after{bottom:0;height:70%;background:linear-gradient(to top,rgba(24,20,16,.82),rgba(24,20,16,0))}
.nav{position:relative;z-index:2;margin:16px var(--rand) 0;min-height:72px;padding:0 16px 0 24px;border-radius:12px;background:rgba(30,26,22,.28);display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav .marke{white-space:nowrap;font-family:var(--serif);font-size:26px;letter-spacing:normal;text-decoration:none;color:var(--papier)}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:30px}
.nav ul a{color:var(--papier);text-decoration:none;font-size:16px}
.nav ul a:hover{text-decoration:underline;text-underline-offset:5px}
.nav .btn{min-height:46px;padding:0 22px}
.hero-inhalt{position:relative;z-index:1;margin-top:auto;padding:0 var(--rand) clamp(40px,7vh,72px);display:flex;justify-content:space-between;align-items:flex-end;gap:48px;flex-wrap:wrap}
.hero-text{max-width:720px;display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.badge{padding:8px 14px;border-radius:9999px;background:rgba(250,246,238,.16);font-size:14px;font-weight:600}
.hero h1{font-style:italic;font-weight:300;font-size:clamp(48px,7vw,88px);line-height:.95}
.hero p{margin:0;font-size:clamp(17px,1.6vw,20px);line-height:1.45;color:#EDE7DC}
.fakten{display:flex}
.fakten div{padding:0 28px;border-left:1px solid rgba(250,246,238,.4)}
.fakten div:first-child{padding-left:0;border-left:0}
.fakten strong{display:block;font-size:22px;font-weight:600}
.fakten span{font-size:15px;color:#E4DDD1}

/* Abschnitte */
.abschnitt{padding-block:clamp(72px,10vw,128px)}
.abschnitt-alt{background:var(--papier-alt)}
.kopf{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;margin-bottom:clamp(40px,5vw,64px)}
.kopf p{margin:0;font-size:clamp(17px,1.6vw,20px);color:var(--text)}

/* Ablauf */
.schritte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;list-style:none;margin:0 0 56px;padding:0}
.schritt{background:var(--papier-alt);border-radius:24px;padding:44px 32px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.schritt .nr{font-size:17px;font-weight:600;color:var(--patina)}
.schritt h3{font-size:38px;line-height:1.1}
.schritt p{margin:0;color:var(--text);max-width:300px}
.ablauf .btns{justify-content:center}

/* Themen-Laufband */
.haken{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px;margin:0;padding:0;list-style:none;color:var(--text)}
.haken li{display:inline-flex;align-items:center;gap:8px}
.haken svg{color:var(--patina);flex-shrink:0}
.band{position:relative;margin-top:64px;overflow:hidden;display:flex;flex-direction:column;gap:22px}
.band::before,.band::after{content:"";position:absolute;top:0;bottom:0;width:8%;z-index:1;pointer-events:none}
.band::before{left:0;background:linear-gradient(to right,var(--papier),rgba(250,246,238,0))}
.band::after{right:0;background:linear-gradient(to left,var(--papier),rgba(250,246,238,0))}
.band-zeile{display:flex;width:max-content;animation:laufen 90s linear infinite}
.band-zeile.rueck{animation-direction:reverse;animation-duration:105s}
.band-zeile span{font-size:20px;color:#4A4B4F;white-space:nowrap}
.band-zeile span::after{content:"•";color:#B9B0A4;padding:0 20px}
@keyframes laufen{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.band-zeile{animation:none}}

/* Säulen */
.zitat{display:flex;align-items:center;justify-content:center;gap:36px;flex-wrap:wrap;margin-bottom:clamp(40px,5vw,64px)}
.zitat blockquote{margin:0;max-width:360px;color:var(--text)}
.person{display:flex;align-items:center;gap:14px;font-size:14px;line-height:1.35}
.avatar{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:50% 18%}
.person strong{display:block;font-weight:600}
.person span{color:var(--text-leise)}
.saeulen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;margin:0;padding:0}
.saeule{padding:44px 32px 40px;border-left:1px solid var(--linie);border-top:1px solid var(--linie)}
.saeule:nth-child(3n+1){border-left:0;padding-left:0}
.saeule:nth-child(-n+3){border-top:0}
.saeule h3{font-size:44px;line-height:1.05;hyphens:manual}
.saeule .nr{margin:14px 0 26px;font-size:14px;font-weight:600;color:var(--patina)}
.saeule ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:18px;color:var(--text)}
.saeule li:last-child{color:#8C8A85}
.plus{margin-top:40px;padding-top:36px;border-top:1px solid var(--linie);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.plus h3{font-size:34px}
.plus p{margin:6px 0 0;color:var(--text)}
.chips{display:flex;flex-wrap:wrap;gap:12px;list-style:none;margin:0;padding:0}
.chips li{padding:14px 20px;border-radius:10px;background:var(--papier-alt);font-weight:600;font-size:15px}

/* Standpunkt-Mosaik */
.mosaik{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;align-items:end}
.kachel-bild{position:relative;height:480px;border-radius:16px;overflow:hidden;background:#6B5646;color:var(--papier);display:flex;flex-direction:column;justify-content:flex-end;padding:22px}
.kachel-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.kachel-bild::after{content:"";position:absolute;left:0;right:0;bottom:0;height:55%;background:linear-gradient(to top,rgba(24,20,16,.82),rgba(24,20,16,0))}
.kachel-bild figcaption{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px}
.kachel-bild .q{font-size:19px;font-weight:600;line-height:1.3}
.kachel-bild .wer{font-size:12px;letter-spacing:.08em}
.kachel-leer{background:#56615B}
.kachel-leer .hinweis{position:absolute;top:22px;left:22px;font-size:12px;color:#D5DDD8;z-index:1}
.kachel-fakt{min-height:200px;border-radius:16px;background:var(--papier-alt);padding:28px;display:flex;flex-direction:column;justify-content:center;gap:8px}
.kachel-fakt h3{font-size:30px;line-height:1.1}
.kachel-fakt p{margin:0;font-size:15px;color:var(--text)}
.mehr{margin-top:40px;text-align:center}

/* Fragen */
.fragen{max-width:772px;margin:0 auto 40px;display:flex;flex-direction:column;gap:12px}
.fragen details{background:var(--papier-alt);border:1px solid #DDD5C9;border-radius:10px}
.fragen summary{list-style:none;cursor:pointer;min-height:64px;padding:12px 12px 12px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-weight:600;font-size:17px}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary .pm{width:36px;height:36px;flex-shrink:0;border-radius:6px;border:1px solid var(--linie);background:var(--papier);display:inline-flex;align-items:center;justify-content:center;transition:transform .2s}
.fragen details[open] .pm{transform:rotate(45deg)}
.fragen details p{margin:0;padding:0 24px 22px;color:var(--text);max-width:640px}

/* Abschluss */
.abschluss{text-align:center}
.abschluss h2{font-size:clamp(48px,6vw,80px);line-height:1}
.abschluss p{margin:20px 0 40px;font-size:22px}
.abschluss .btns{justify-content:center}

/* Footer */
.fuss{background:var(--papier-alt);padding:0 0 40px}
.fuss-karte{background:var(--papier);border-radius:24px;box-shadow:rgba(42,43,47,.08) 12px 32px 80px 0;padding:clamp(28px,4vw,56px) clamp(24px,4vw,52px) 40px;display:grid;grid-template-columns:3fr 2fr 6fr;gap:40px 24px}
.fuss-karte .marke{font-family:var(--serif);font-size:30px;letter-spacing:normal;margin:0 0 12px}
.fuss-karte address{font-style:normal;color:var(--text-leise);font-size:15px;line-height:1.6}
.fuss-karte nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.fuss-karte nav a{text-decoration:none}
.empfehlen h2{font-size:30px}
.empfehlen p{margin:12px 0 20px;color:var(--text);font-size:15px}
.recht{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:24px;font-size:13px}
.recht a{color:var(--text-leise);text-decoration:none}
.recht a:hover{text-decoration:underline}
.pflicht{margin-top:28px;font-size:12px;color:var(--text-leise)}
.pflicht-hinweis{margin-top:6px}
.pflicht-hinweis a{color:inherit}

/* Rechtsseiten */
.einfach-kopf{padding:24px var(--rand);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--linie)}
.einfach-kopf .marke{font-family:var(--serif);font-size:24px;letter-spacing:normal;text-decoration:none}
.rechtstext{max-width:760px;margin:0 auto;padding:clamp(48px,8vw,96px) var(--rand)}
.rechtstext h1{font-size:clamp(40px,5vw,60px);line-height:1;margin-bottom:32px}
.rechtstext h2{font-size:28px;margin:44px 0 12px}
.rechtstext p,.rechtstext li{color:var(--text);line-height:1.6}
.entwurf{background:var(--papier-alt);border-radius:10px;padding:16px 20px;font-size:15px;color:var(--text)}
.ph{background:#E9E1D3;border-radius:4px;padding:0 4px}

/* Responsive */
@media (max-width:1100px){
  .mosaik{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fuss-karte{grid-template-columns:1fr 1fr}
  .empfehlen{grid-column:1/-1}
}
@media (max-width:900px){
  .nav ul{display:none}
  .schritte{grid-template-columns:1fr}
  .saeulen{grid-template-columns:1fr 1fr}
  .saeule,.saeule:nth-child(3n+1){padding:36px 24px;border-left:1px solid var(--linie);border-top:1px solid var(--linie)}
  .saeule:nth-child(2n+1){border-left:0;padding-left:0}
  .saeule:nth-child(-n+2){border-top:0}
  .saeule:nth-child(3){border-top:1px solid var(--linie)}
  .saeule h3{font-size:36px}
  .fakten{display:none}
}
@media (max-width:600px){
  .nav{padding:0 10px 0 18px}
  .nav .marke{font-size:21px}
  .nav .btn{padding:0 16px;font-size:15px}
  .saeulen{grid-template-columns:1fr}
  .saeule,.saeule:nth-child(n){border-left:0;padding:32px 0;border-top:1px solid var(--linie)}
  .saeule:first-child{border-top:0}
  .mosaik{grid-template-columns:1fr}
  .kachel-bild{height:440px}
  .fuss-karte{grid-template-columns:1fr}
  .band-zeile span{font-size:17px}
}
@media (max-width:480px){
  .nav .btn{display:none}
  .nav{min-height:60px}
}

/* ---------- Navigation: Burger, Kopfleiste, Menü ---------- */
.nav-rechts{display:flex;align-items:center;gap:10px}
.burger{display:none;width:46px;height:46px;border:0;border-radius:40px;background:rgba(250,246,238,.16);color:var(--papier);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.burger span{display:block;width:18px;height:1.5px;background:currentColor;border-radius:2px}
.burger-dunkel{background:var(--papier-alt);color:var(--tinte)}

.kopfleiste{position:fixed;top:0;left:0;right:0;z-index:40;padding:10px var(--rand);transform:translateY(-110%);transition:transform .45s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.kopfleiste.sichtbar{transform:none;pointer-events:auto}
.kopfleiste-innen{max-width:var(--max);margin:0 auto;min-height:60px;padding:0 10px 0 22px;border-radius:12px;background:rgba(250,246,238,.97);box-shadow:0 1px 0 var(--linie),rgba(42,43,47,.06) 0 12px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.kopfleiste .marke{font-family:var(--serif);font-size:22px;letter-spacing:normal;text-decoration:none;white-space:nowrap}
.kopfleiste ul{list-style:none;margin:0;padding:0;display:flex;gap:28px}
.kopfleiste ul a{text-decoration:none;font-size:15px}
.kopfleiste ul a.aktiv{color:var(--patina)}
.kopfleiste .btn{min-height:42px;padding:0 20px;font-size:15px}

.menue{position:fixed;inset:0;z-index:60;background:var(--papier);display:flex;flex-direction:column;padding:16px var(--rand) 32px;overflow-y:auto}
.menue[hidden]{display:none}
.menue-kopf{display:flex;justify-content:space-between;align-items:center;min-height:60px}
.menue-kopf .marke{font-family:var(--serif);font-size:22px;letter-spacing:normal}
.menue-zu{width:46px;height:46px;border:0;border-radius:40px;background:var(--papier-alt);color:var(--tinte);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.menue nav{margin:auto 0}
.menue ul{list-style:none;margin:0;padding:0}
.menue li{border-bottom:1px solid var(--linie)}
.menue li a{display:block;padding:18px 0;font-family:var(--serif);font-size:clamp(34px,9vw,48px);line-height:1.05;letter-spacing:normal;text-decoration:none}
.menue-fuss{display:flex;flex-direction:column;gap:12px;margin-top:32px}
.menue.offen li{animation:menueRein .5s cubic-bezier(.2,.7,.2,1) both}
.menue.offen li:nth-child(2){animation-delay:.05s}
.menue.offen li:nth-child(3){animation-delay:.1s}
.menue.offen li:nth-child(4){animation-delay:.15s}
@keyframes menueRein{from{opacity:0;transform:translateY(14px)}}
body.gesperrt{overflow:hidden}

@media (max-width:900px){
  .burger{display:inline-flex}
  .kopfleiste ul{display:none}
}
@media (max-width:480px){
  .kopfleiste .btn{display:none}
  .nav .btn{display:none}
}

/* ---------- Scroll-Effekte (nur mit JS, nur ohne reduzierte Bewegung) ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .hero-bild{transform:scale(1.08);transition:transform 1.8s cubic-bezier(.2,.7,.2,1)}
  .js .hero.geladen .hero-bild{transform:scale(1)}
  .js .hero-text>*{opacity:0;transition:opacity 1s ease}
  .js .hero.geladen .hero-text>*{opacity:1}
  .js .hero.geladen .hero-text>:nth-child(2){transition-delay:.12s}
  .js .hero.geladen .hero-text>:nth-child(3){transition-delay:.24s}
  .js .hero.geladen .hero-text>:nth-child(4){transition-delay:.36s}
  .js .fakten{opacity:0;transition:opacity 1.2s ease .6s}
  .js .hero.geladen .fakten{opacity:1}

  .js [data-rein]{opacity:0;transition:opacity .9s ease;transition-delay:var(--v,0s)}
  .js [data-rein].da{opacity:1}
  .js [data-rein] em{opacity:0;transition:opacity 1s ease .35s}
  .js [data-rein].da em{opacity:1}

  .js .saeulen [data-rein]{transform:none;opacity:0;transition:opacity .9s ease;transition-delay:var(--v,0s)}
  .js .saeulen [data-rein].da{opacity:1}

  .js .kachel-bild[data-rein] img{transform:scale(1.12);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
  .js .kachel-bild[data-rein].da img{transform:scale(1)}
}
.saeule{transition:background-color .3s}
.saeule ul li:first-child{transition:color .3s}
.saeule:hover .nr{color:var(--patina-tief)}

/* ---------- Unterseiten: Kopf ---------- */
.unterkopf{position:sticky;top:0;z-index:40;padding:10px var(--rand);background:linear-gradient(var(--papier) 60%,rgba(250,246,238,0))}
.unterkopf .kopfleiste-innen{background:rgba(250,246,238,.97)}
.unterkopf .marke{font-family:var(--serif);font-size:22px;letter-spacing:normal;text-decoration:none;white-space:nowrap}
.unterkopf ul{list-style:none;margin:0;padding:0;display:flex;gap:28px}
.unterkopf ul a{text-decoration:none;font-size:15px}
.unterkopf ul a[aria-current]{color:var(--patina)}
.unterkopf .btn{min-height:42px;padding:0 20px;font-size:15px}
@media (max-width:900px){.unterkopf ul{display:none}}
@media (max-width:480px){.unterkopf .btn{display:none}}

.seiten-hero{padding:clamp(56px,9vw,112px) 0 clamp(56px,8vw,96px);text-align:center}
.seiten-hero .wrap{display:flex;flex-direction:column;align-items:center;gap:24px}
.seiten-hero h1{max-width:980px}
.seiten-hero .lead{max-width:640px}
.seiten-hero-schmal{padding-bottom:48px}
.lead{margin:0;font-size:clamp(18px,1.7vw,21px);line-height:1.5;color:var(--text)}
.saeulen-hinweis{margin:0;font-size:15px;font-weight:600;color:var(--patina)}
.btns-mitte{justify-content:center}
.themenwahl{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:8px}
.themenwahl a{padding:9px 16px;border-radius:9999px;border:1px solid var(--linie);text-decoration:none;font-size:14px;font-weight:600}
.themenwahl a.aktiv{background:var(--tinte);border-color:var(--tinte);color:var(--papier)}

/* Gegenüberstellung */
.gegenueber{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.stimme{border-radius:24px;padding:clamp(28px,4vw,48px);display:flex;flex-direction:column;gap:18px}
.stimme-oft{background:var(--papier-alt)}
.stimme-ich{border:1.5px solid var(--patina)}
.wer-sagt{margin:0;font-size:15px;font-weight:600;color:var(--text-leise)}
.stimme-ich .wer-sagt{color:var(--patina)}
.aussage{margin:0;font-family:var(--serif);font-size:clamp(22px,2.2vw,28px);line-height:1.3;letter-spacing:normal}
.stimme-oft .aussage{font-style:italic;font-weight:300}

/* Punkte-Raster */
.punkte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;margin:0;padding:0}
.punkt{padding:36px 32px 40px;border-left:1px solid var(--linie);border-top:1px solid var(--linie)}
.punkt:nth-child(3n+1){border-left:0;padding-left:0}
.punkt:nth-child(-n+3){border-top:0}
.punkt h3{font-size:32px;line-height:1.1;margin-bottom:14px}
.punkt p{margin:0;color:var(--text);font-size:17px}

/* Zweispaltig mit Liste */
.zweispaltig{display:grid;grid-template-columns:4fr 7fr;gap:48px}
.zweispaltig-kopf h2{position:sticky;top:120px}
.fehler{list-style:none;margin:0;padding:0}
.fehler li{padding:28px 0;border-top:1px solid var(--linie);display:grid;grid-template-columns:5fr 6fr;gap:24px}
.fehler li:first-child{border-top:0;padding-top:0}
.fehler h3{font-size:26px;line-height:1.15}
.fehler p{margin:0;color:var(--text)}
.chips-mitte{justify-content:center}

/* Standpunkt */
.standpunkt-hero{padding:clamp(40px,6vw,80px) 0 clamp(64px,8vw,112px)}
.standpunkt-raster{display:grid;grid-template-columns:7fr 5fr;gap:56px;align-items:center}
.standpunkt-text{display:flex;flex-direction:column;gap:28px}
.manifest{font-size:clamp(40px,5vw,68px);line-height:1.02}
.standpunkt-bild{margin:0;border-radius:24px;overflow:hidden;aspect-ratio:4/5;background:#6B5646}
.standpunkt-bild img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.kapitel-liste{max-width:1080px}
.kapitel{display:grid;grid-template-columns:5fr 7fr;gap:48px;padding:44px 0;border-top:1px solid var(--linie)}
.kapitel h2{font-size:clamp(28px,3vw,38px);line-height:1.1}
.kapitel p{margin:0;font-size:18px;line-height:1.65;color:var(--text)}
.sport{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.sport-bild{aspect-ratio:4/3;border-radius:24px;background:#56615B;display:flex;align-items:flex-end;padding:22px;color:#D5DDD8;font-size:13px}
.sport-text p{margin:24px 0 0;font-size:20px;line-height:1.6;color:var(--text)}

/* Empfehlen */
.tippgeber{max-width:760px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:24px}
.tippgeber p{margin:0;font-size:19px;line-height:1.6;color:var(--text)}

/* Formular */
.formular{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.formular fieldset{margin:0;border:1px solid #DDD5C9;border-radius:16px;background:var(--papier-alt);padding:28px clamp(20px,3vw,32px) 30px}
.formular legend{float:left;width:100%;padding:0;margin-bottom:18px;font-family:var(--serif);font-size:clamp(22px,2.2vw,28px);line-height:1.2;letter-spacing:normal;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.formular legend .nr{font-family:var(--sans);font-size:15px;font-weight:600;color:var(--patina);letter-spacing:-0.02em}
.leise{font-family:var(--sans);font-size:14px;font-weight:400;color:var(--text-leise);letter-spacing:-0.02em}
.optionen{clear:both;display:flex;flex-wrap:wrap;gap:10px}
.option{position:relative;cursor:pointer}
.option input{position:absolute;opacity:0;inset:0;cursor:pointer}
.option span{display:inline-flex;align-items:center;min-height:46px;padding:10px 18px;border-radius:12px;border:1px solid var(--linie);background:var(--papier);font-size:16px;line-height:1.3;transition:background-color .2s,border-color .2s,color .2s}
.option:hover span{border-color:var(--patina)}
.option input:checked+span{background:var(--patina);border-color:var(--patina);color:var(--papier)}
.option input:focus-visible+span{outline:2px solid var(--patina);outline-offset:3px}
.option input:disabled+span{opacity:.45;cursor:not-allowed}
.feld{clear:both;display:flex;flex-direction:column;gap:8px;font-size:15px;font-weight:600}
.feld input{height:54px;padding:0 18px;border-radius:12px;border:1px solid #B9B0A4;background:var(--papier);font:400 17px var(--sans);color:var(--tinte);letter-spacing:-0.02em}
.feld input:focus{outline:2px solid var(--patina);outline-offset:1px;border-color:var(--patina)}
.felder{clear:both;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.hilfe{margin:12px 0 0;font-size:15px;color:var(--text-leise)}
.datenschutz-hinweis{margin:0}
.formular .ungueltig{border-color:#9A3B2E;box-shadow:0 0 0 1px #9A3B2E}
.fehlermeldung{margin:0;color:#9A3B2E;font-weight:600}
.btn-gross{min-height:58px;padding:0 34px;font-size:17px;align-self:flex-start}
.danke{max-width:760px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px}
.danke p{margin:0;font-size:19px;color:var(--text)}
.danke .hilfe{font-size:15px}

@media (max-width:900px){
  .gegenueber,.zweispaltig,.standpunkt-raster,.sport{grid-template-columns:1fr}
  .zweispaltig-kopf h2{position:static}
  .punkte{grid-template-columns:1fr 1fr}
  .punkt,.punkt:nth-child(3n+1){padding:32px 24px;border-left:1px solid var(--linie);border-top:1px solid var(--linie)}
  .punkt:nth-child(2n+1){border-left:0;padding-left:0}
  .punkt:nth-child(-n+2){border-top:0}
  .punkt:nth-child(3){border-top:1px solid var(--linie)}
  .kapitel{grid-template-columns:1fr;gap:16px}
  .standpunkt-bild{aspect-ratio:4/5;max-height:620px}
}
@media (max-width:600px){
  .punkte{grid-template-columns:1fr}
  .punkt,.punkt:nth-child(n){border-left:0;padding:28px 0;border-top:1px solid var(--linie)}
  .punkt:first-child{border-top:0}
  .fehler li{grid-template-columns:1fr;gap:10px}
  .felder{grid-template-columns:1fr}
  .option{width:100%}
  .option span{width:100%}
  .btn-gross{align-self:stretch}
}
.saeule{position:relative}
.saeule-link{color:inherit;text-decoration:none}
.saeule-link::after{content:"";position:absolute;inset:0}
.saeule:hover h3{color:var(--patina-tief)}

/* Testmodus ohne Effekte: ?ohne-effekte an die Adresse anhängen */
.still .band-zeile{animation:none}
.still .kopfleiste{transition:none}

/* ---------- Salbei: zweite Flächenfarbe (1–2 Abschnitte pro Seite) ---------- */
.abschnitt-salbei{background:var(--salbei)}
.abschnitt-salbei .schritt{background:var(--papier)}
.abschnitt-salbei .nr,.abschnitt-salbei .link,.abschnitt-salbei .saeulen-hinweis{color:var(--patina-tief)}
.abschnitt-salbei .fehler li{border-top-color:var(--salbei-linie)}
.abschnitt-salbei .btn-line{border-color:var(--patina-tief);color:var(--patina-tief)}
.abschnitt-salbei .btn-line:hover{background:var(--patina-tief);color:var(--papier)}
.abschnitt-salbei .sport-bild{background:#4A6358;color:#DCE6E0}
.abschnitt-salbei .fragen details{background:var(--papier);border-color:var(--salbei-linie)}
.abschnitt-salbei .fragen summary .pm{background:var(--salbei);border-color:var(--salbei-linie)}

.unterfrage{clear:both;margin:22px 0 12px;font-weight:600;font-size:16px}
.formular fieldset .felder+.unterfrage{margin-top:24px}
.optionen+.felder{margin-top:18px}
.hinweis-gesundheit{margin:0;max-width:640px;font-size:15px;color:var(--text-leise);background:var(--salbei);border-radius:12px;padding:14px 18px}

[hidden]{display:none!important}

/* ---------- Architektur-Strukturen (Duotone-Fotos) ---------- */
.struktur-dunkel{position:relative;isolation:isolate;background:#1E322D url("img/struktur-dunkel.webp") center/cover no-repeat;color:var(--papier)}
.struktur-dunkel::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(22,36,31,.5),rgba(22,36,31,.7))}
.struktur-dunkel h2{color:var(--papier)}
.struktur-dunkel em{color:#BFD6CB}
.struktur-dunkel p{color:#E4ECE7}
.struktur-dunkel .btn{background:var(--papier);border-color:var(--papier);color:var(--patina-tief)}
.struktur-dunkel .btn:hover{background:#fff;border-color:#fff;color:var(--patina-tief)}
.struktur-dunkel .btn-line{background:transparent;border-color:var(--papier);color:var(--papier)}
.struktur-dunkel .btn-line:hover{background:var(--papier);color:var(--patina-tief)}
.struktur-hell{background:var(--salbei) url("img/struktur-hell.webp") center/cover no-repeat}

/* ---------- Anfrage: Umschalter, Kontakt ---------- */
.formwahl{max-width:820px;margin:0 auto 28px;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:6px;border-radius:20px;background:var(--papier-alt);border:1px solid #DDD5C9}
.formwahl button{all:unset;box-sizing:border-box;cursor:pointer;border-radius:14px;padding:16px 20px;display:flex;flex-direction:column;gap:2px;font-family:var(--sans);color:var(--tinte);transition:background-color .2s,color .2s}
.formwahl button:hover{background:rgba(79,115,102,.08)}
.formwahl button[aria-selected="true"]{background:var(--patina);color:var(--papier)}
.formwahl button:focus-visible{outline:2px solid var(--patina);outline-offset:3px}
.formwahl-titel{font-family:var(--serif);font-size:24px;letter-spacing:normal;line-height:1.15}
.formwahl-info{font-size:14px;opacity:.85}
.feld-breit{grid-column:1/-1}
.feld-oben{margin-top:22px}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sendefehler{margin:0;color:#9A3B2E;font-weight:600}
.formular button[type="submit"]:disabled{opacity:.7;cursor:wait}
.seiten-hero .hinweis-gesundheit{text-align:left}
@media (max-width:600px){.formwahl-titel{font-size:20px}.formwahl button{padding:12px 14px}}
.fuss-kontakt{margin:12px 0 0;font-size:15px}
.wa-teilen{display:inline-flex}

/* ---------- Stimmen (Testimonials) ---------- */
.stimmen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.stimme-karte{margin:0;padding:36px 32px 32px;border-radius:24px;background:var(--papier-alt);display:flex;flex-direction:column;justify-content:space-between;gap:32px}
.stimme-karte blockquote{margin:0;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(22px,2vw,26px);line-height:1.35;letter-spacing:normal;color:var(--tinte)}
.stimme-karte figcaption{display:flex;align-items:center;gap:14px}
.stimme-karte img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex-shrink:0}
.stimme-karte figcaption>span{display:flex;flex-direction:column;gap:2px;font-size:14px;line-height:1.4}
.stimme-karte strong{font-weight:600;font-size:15px}
.stimme-karte figcaption span span{color:var(--text-leise)}
.platzhalter-hinweis{margin:24px 0 0;text-align:center;font-size:13px;color:var(--text-leise)}
/* Mandantenstimmen auf dem Handy: seitlich wischen wie durch ein Magazin blättern */
.stimmen-punkte{display:none}
@media (max-width:900px){
  .stimmen{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 calc(-1 * var(--rand));padding:6px var(--rand) 10px;scroll-padding:0 var(--rand)}
  .stimmen::-webkit-scrollbar{display:none}
  .stimme-karte{flex:0 0 84%;scroll-snap-align:center;scroll-snap-stop:always}
  .stimmen.wischbar .stimme-karte{transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .5s ease;transition-delay:0s}
  .js .stimmen.wischbar .stimme-karte:not(.aktiv){transform:scale(.93);opacity:.55}
  .stimmen-punkte{display:flex;justify-content:center;gap:4px;margin-top:14px}
  .stimmen-punkte button{min-width:24px;height:24px;padding:0;border:0;background:none;display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .stimmen-punkte button::before{content:"";display:block;width:8px;height:8px;border-radius:99px;background:var(--linie);transition:width .35s cubic-bezier(.2,.7,.2,1),background-color .35s ease}
  .stimmen-punkte button[aria-current="true"]::before{width:26px;background:var(--patina)}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){
  .stimmen.wischbar .stimme-karte,.stimmen-punkte button::before{transition:none}
}

/* ---------- Startseite: neue Reihenfolge ---------- */
.band.band-streifen{margin-top:0;padding:26px 0;gap:14px;background:var(--salbei)}
.band.band-streifen::before{background:linear-gradient(to right,var(--salbei),rgba(227,235,229,0))}
.band.band-streifen::after{background:linear-gradient(to left,var(--salbei),rgba(227,235,229,0))}
.band.band-streifen .band-zeile span{font-size:18px;color:#3E4A45}
.band.band-streifen .band-zeile span::after{color:#9DB5AA}

.haltung{display:grid;grid-template-columns:5fr 7fr;gap:clamp(40px,6vw,88px);align-items:center}
.haltung-bild.kachel-bild{height:clamp(440px,48vw,620px)}
.haltung-text{display:flex;flex-direction:column;gap:28px;align-items:flex-start}
.haltung-text .lead{max-width:560px}
.belege{list-style:none;margin:0;padding:0;width:100%}
.belege li{display:grid;grid-template-columns:5fr 6fr;gap:24px;align-items:baseline;padding:20px 0;border-top:1px solid var(--linie)}
.belege li:last-child{border-bottom:1px solid var(--linie)}
.belege h3{font-size:26px;line-height:1.15}
.belege p{margin:0;color:var(--text)}

.abschnitt-alt .saeule,.abschnitt-alt .saeule:nth-child(n){border-color:#DDD5C9}
.vertiefung{margin-top:56px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.vertiefung a{display:flex;flex-direction:column;gap:8px;padding:28px 30px;border-radius:16px;background:var(--papier);text-decoration:none;border:1.5px solid transparent;transition:border-color .2s}
.vertiefung a:hover{border-color:var(--patina);color:inherit}
.vertiefung-nr{font-size:14px;font-weight:600;color:var(--patina)}
.vertiefung-titel{font-family:var(--serif);font-size:30px;line-height:1.1;letter-spacing:normal}
.vertiefung-mehr{margin-top:8px;font-size:15px;font-weight:600;color:var(--patina);text-decoration:underline;text-underline-offset:5px}
.ablauf .kopf{gap:24px}

@media (max-width:900px){
  .haltung{grid-template-columns:1fr}
  .haltung-bild.kachel-bild{height:460px}
  .vertiefung{grid-template-columns:1fr}
  .belege li{grid-template-columns:1fr;gap:6px}
}

/* ---------- Hero mit Querformat: Marco links, Text rechts ---------- */
.hero-rechts .hero-bild{object-position:36% 18%}
.hero-rechts::after{height:100%;background:linear-gradient(to left,rgba(24,20,16,.72) 0%,rgba(24,20,16,.45) 38%,rgba(24,20,16,0) 62%),linear-gradient(to top,rgba(24,20,16,.7) 0%,rgba(24,20,16,0) 45%)}
@media (min-width:1025px){
  .hero-rechts .hero-inhalt{flex-direction:column;align-items:flex-end;justify-content:flex-end;gap:36px}
  .hero-rechts .hero-text{max-width:600px;width:600px}
  .hero-rechts .fakten{width:600px;padding-top:28px;border-top:1px solid rgba(250,246,238,.3)}
}
@media (max-width:1024px){
  .hero-rechts::after{background:linear-gradient(to top,rgba(24,20,16,.85) 0%,rgba(24,20,16,.55) 40%,rgba(24,20,16,0) 70%)}
}
@media (max-width:760px){
  .hero-rechts .hero-bild{object-position:50% 12%}
}
.hero-rechts::before{height:200px;background:linear-gradient(to bottom,rgba(24,20,16,.5),rgba(24,20,16,0))}
picture{display:contents}

/* Echter Fall: Beitragsbescheid PKV (Krankenversicherung) */
.beleg{background:var(--papier-alt);border-radius:24px;padding:clamp(28px,4.5vw,56px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,4vw,56px);align-items:start}
.beleg-kopf{display:flex;flex-direction:column;gap:18px}
.beleg-kopf .wer-sagt{color:var(--patina)}
.beleg-kopf h2,.beleg-kopf p{margin:0}
.beleg-kopf p:last-child{font-size:clamp(17px,1.6vw,19px)}
.beleg-zahlen{display:flex;flex-direction:column;gap:24px;padding-top:6px}
.balken-zeile{display:grid;grid-template-columns:minmax(0,1fr) 130px;gap:8px 18px;align-items:center}
.balken-label{grid-column:1/-1;font-size:15px;font-weight:600;color:var(--text-leise)}
.balken{display:block;height:14px;border-radius:99px;width:var(--w)}
.balken-ohne{background:var(--linie)}
.balken-mit{background:var(--patina)}
.balken-wert{font-family:var(--serif);font-size:clamp(28px,3vw,40px);line-height:1;color:var(--tinte);text-align:right;white-space:nowrap}
.balken-wert-leise{color:var(--text-leise);font-weight:300}
.beleg-ergebnis{margin:0;padding-top:22px;border-top:1px solid var(--linie);font-size:17px}
.beleg-ergebnis strong{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.4vw,32px);line-height:1.15;color:var(--patina);margin-bottom:8px}
.beleg-auszug{grid-column:1/-1;justify-self:start;width:100%;max-width:760px;margin:0;background:#FBF8F1;border:1px solid var(--linie);border-radius:14px;padding:clamp(14px,2vw,22px) clamp(14px,2vw,22px) 12px;box-shadow:rgba(42,43,47,.07) 0 12px 30px;transform:rotate(-.5deg)}
.beleg-auszug img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
.beleg-auszug figcaption{margin-top:10px;font-size:13px;color:var(--text-leise)}
.beleg-klartext{grid-column:1/-1;margin:0;font-size:16px;line-height:1.6}
.beleg-klartext strong{font-weight:600;color:var(--tinte)}
.beleg-quelle{grid-column:1/-1;margin:-12px 0 0;font-size:13px;line-height:1.5;color:var(--text-leise)}
@media (max-width:900px){.beleg{grid-template-columns:1fr}}
@media (max-width:480px){.balken-zeile{grid-template-columns:minmax(0,1fr) 96px}}
@media (prefers-reduced-motion:reduce){.beleg-auszug{transform:none}}

/* ---------- Mobiles Menü: Burger wird zum Kreuz, Kopfzeile bleibt stehen, Kreis-Öffnung ---------- */
.burger{transition:background-color .3s ease .3s,color .3s ease .3s;-webkit-tap-highlight-color:transparent}
.burger span{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
.menue{clip-path:circle(0px at var(--mx,calc(100% - 44px)) var(--my,44px));transition:clip-path .56s cubic-bezier(.65,0,.25,1)}
.menue.offen{clip-path:circle(150vmax at var(--mx,calc(100% - 44px)) var(--my,44px))}
.menue-kopf{visibility:hidden}
.nav{transition:background-color .3s ease .3s}
.nav .marke{transition:color .3s ease .3s}
.menue-offen .nav,.menue-offen .nav .marke,.menue-offen .nav .burger{transition-delay:.18s}
.kopfleiste-innen{transition:background-color .35s ease,box-shadow .35s ease}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .nav{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .kopfleiste-innen,.unterkopf .kopfleiste-innen{background:rgba(250,246,238,.78);-webkit-backdrop-filter:saturate(1.5) blur(16px);backdrop-filter:saturate(1.5) blur(16px)}
}
.menue-offen .nav,.menue-offen .kopfleiste,.menue-offen .unterkopf{z-index:70}
.menue-offen .nav{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.menue-offen .nav .marke{color:var(--tinte)}
.menue-offen .nav .burger{background:var(--papier-alt);color:var(--tinte)}
.menue-offen .kopfleiste-innen,.menue-offen .unterkopf .kopfleiste-innen{background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.menue-offen .unterkopf{background:transparent}
@media (prefers-reduced-motion:reduce){
  .menue{clip-path:none;transition:none}
  .burger,.burger span,.nav,.nav .marke,.kopfleiste-innen{transition:none}
}
.still .menue{clip-path:none;transition:none}
.still .burger span{transition:none}

/* ---------- Themenbilder (Unsplash, Vorschau zur Auswahl) ---------- */
.vertiefung a{overflow:hidden}
.vertiefung-bild{display:block;margin:-28px -30px 10px;height:190px;overflow:hidden;background:var(--papier-alt)}
.vertiefung-bild img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.vertiefung a:hover .vertiefung-bild img{transform:scale(1.04)}
.themenbild{margin:0 0 clamp(36px,4.5vw,60px);border-radius:24px;overflow:hidden;aspect-ratio:21/8;background:var(--papier-alt)}
.seiten-hero .themenbild{width:100%;max-width:1120px;margin:12px 0 0;aspect-ratio:21/9}
.themenbild img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:760px){.themenbild,.seiten-hero .themenbild{aspect-ratio:4/3;border-radius:18px}}
@media (prefers-reduced-motion:reduce){.vertiefung-bild img{transition:none}}

/* Nur zwei Mandantenstimmen: zweispaltig statt dreispaltig */
@media (min-width:901px){.stimmen:has(> .stimme-karte:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:901px){.stimmen:has(> .stimme-karte:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
.stimme-karte figcaption a{color:inherit;text-decoration:underline;text-underline-offset:2px}