/* Glockenbach Legal — Stylesheet
   Schriften selbst gehostet, keine externen Ressourcen. */

@font-face{font-family:"Newsreader";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/NR-400.woff2") format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/IS-400.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/SG-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/Inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/Inter-600.woff2") format("woff2")}

:root{
  --tinte:#1B1814;      /* warmes Schwarz, Text und Flächen */
  --tinte-weich:#3A342C;
  --grau:#6E665C;       /* Fließtext zweiter Ordnung */
  --bronze:#9A7B45;     /* einziger Akzent */
  --bronze-hell:#C2A874;
  --papier:#F5EFE3;
  --sand:#EAE1D0;
  --sand-tief:#E1D7C2;
  --linie:#D6CBB4;
  --linie-fein:#E3D9C6;
  --mass:1240px;
  --spalte:680px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--papier);
  color:var(--tinte);
  font-family:"Inter","Helvetica Neue",Arial,sans-serif;
  font-size:17px;
  line-height:1.72;
  font-feature-settings:"kern","liga","calt";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg{max-width:100%}

a{color:var(--tinte);text-decoration:none;background-image:linear-gradient(var(--bronze),var(--bronze));
  background-repeat:no-repeat;background-position:0 100%;background-size:100% 1px;
  padding-bottom:1px;transition:background-size .25s ease,color .25s ease}
a:hover{color:var(--bronze)}

h1,h2,h3{font-family:"Newsreader","Iowan Old Style",Georgia,serif;font-weight:400}
h1{font-size:clamp(42px,6.1vw,74px);line-height:1.06;letter-spacing:-.014em;margin:0 0 26px}
h2{font-size:clamp(29px,3.7vw,43px);line-height:1.14;letter-spacing:-.01em;margin:0 0 20px}
h3{font-size:clamp(21px,2.3vw,26px);line-height:1.2;margin:0 0 10px}
p{margin:0 0 20px;max-width:64ch}

.wrap{max-width:var(--mass);margin:0 auto;padding:0 42px}
.wrap.text{display:grid;grid-template-columns:210px minmax(0,var(--spalte));column-gap:84px}
.wrap.text > *{grid-column:2;max-width:var(--spalte)}
.wrap.text > .kicker{grid-column:1;grid-row:1;margin:11px 0 0;text-align:right}
.wrap.text > .schritte{max-width:var(--spalte)}
.wrap.text > .buchen-huelle{grid-column:1 / -1;max-width:none}
.wrap.recht > *{max-width:74ch}
.wrap.schmal > *{max-width:var(--spalte)}

/* ---------- Etiketten ---------- */
.kicker,.etikett,.nr,.jahr,.weiter,.knopf,nav.haupt,.marke,.legalzeile,footer.fuss .spalte h4{
  font-family:"Space Grotesk","Inter",sans-serif}
.kicker{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--bronze);margin:0 0 26px}

/* ---------- Kopfzeile ---------- */
.topbar{background:var(--papier);border-bottom:1px solid var(--linie-fein);position:sticky;top:0;z-index:40;
  transition:box-shadow .4s ease,background-color .4s ease}
.topbar .wrap{transition:min-height .4s cubic-bezier(.22,.61,.36,1)}
.topbar.kompakt{box-shadow:0 1px 0 var(--linie),0 14px 30px -22px rgba(27,24,20,.45);
  background:rgba(245,239,227,.94);backdrop-filter:saturate(1.1) blur(8px)}
.topbar.kompakt .wrap{min-height:70px}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px;min-height:90px}

.marke{display:inline-flex;align-items:stretch;background:none;padding:0;line-height:1;
  white-space:nowrap;color:var(--tinte);font-family:"Inter","Space Grotesk",sans-serif}
.marke .kasten{display:inline-flex;align-items:center;background:var(--tinte);color:var(--papier);
  font-weight:600;font-size:14px;letter-spacing:.19em;text-transform:uppercase;
  padding:11px 14px 11px 16px;transition:background-color .35s ease,color .35s ease}
.marke .zwei{display:inline-flex;align-items:center;font-weight:400;font-size:14px;
  letter-spacing:.42em;text-transform:uppercase;color:var(--tinte);
  padding:11px 7px 11px 16px;border:1px solid var(--tinte);border-left:0;
  transition:color .35s ease,border-color .35s ease}
.marke:hover .kasten{background:var(--bronze)}
.marke:hover .zwei{color:var(--bronze);border-color:var(--bronze)}
.topbar.kompakt .marke .kasten{padding-top:9px;padding-bottom:9px}
.topbar.kompakt .marke .zwei{padding-top:9px;padding-bottom:9px}

nav.haupt{display:flex;align-items:center;gap:38px;font-size:12px;letter-spacing:.17em;text-transform:uppercase}
nav.haupt > a,nav.haupt .zweig > span{background:none;padding:0;color:var(--tinte-weich);cursor:pointer;white-space:nowrap;position:relative}
nav.haupt > a::after,nav.haupt .zweig > span::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;
  background:var(--bronze);transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
nav.haupt > a:hover,nav.haupt .zweig:hover > span{color:var(--tinte)}
nav.haupt > a:hover::after,nav.haupt .zweig:hover > span::after,
nav.haupt a.aktiv::after,nav.haupt .zweig.aktiv > span::after{transform:scaleX(1)}

.zweig{position:relative}
.caret{display:inline-block;width:4px;height:4px;margin-left:9px;vertical-align:2px;
  border-right:1px solid var(--bronze);border-bottom:1px solid var(--bronze);
  transform:rotate(45deg);transition:transform .25s ease}
.zweig:hover .caret{transform:rotate(45deg) translate(1.5px,1.5px)}
.zweig .klappe{position:absolute;top:calc(100% + 14px);left:-24px;min-width:232px;background:var(--papier);
  border:1px solid var(--linie);padding:10px 0;opacity:0;visibility:hidden;transform:translateY(5px);
  transition:.18s ease;box-shadow:0 18px 44px rgba(27,24,20,.10)}
.zweig:hover .klappe,.zweig:focus-within .klappe{opacity:1;visibility:visible;transform:none}
.zweig .klappe a{display:block;padding:11px 26px;background:none;color:var(--tinte-weich);letter-spacing:.14em}
.zweig .klappe a:hover{background:var(--sand);color:var(--tinte)}

.mobil-schalter{display:none;background:none;border:1px solid var(--linie);padding:10px 16px;
  font-family:"Space Grotesk","Inter",sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tinte);cursor:pointer}

/* ---------- Abschnitte ---------- */
section{padding:82px 0}
.sand{background:var(--sand)}
.linie-oben{border-top:1px solid var(--linie-fein)}
.lead{font-size:clamp(19px,1.9vw,23px);line-height:1.55;color:var(--grau);max-width:52ch}

.held{padding:100px 0 82px}
.held h1{max-width:12ch}
.held h1 .zusatz{display:block;font-family:"Space Grotesk","Inter",sans-serif;
  font-size:clamp(12px,1.1vw,13.5px);letter-spacing:.34em;text-transform:uppercase;
  color:var(--bronze);margin-top:26px;line-height:1;-webkit-text-stroke:.3px currentColor;
  paint-order:stroke fill}
.held .lead{margin-top:38px}
.held .rolle{max-width:none}
.held .rolle .teiler{display:inline-block;width:1px;height:1em;background:var(--bronze);
  opacity:.55;margin:0 1.5em 0 1.1em;vertical-align:-.12em}
.nowrap{white-space:nowrap}
.held .rolle{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--bronze);margin:0 0 28px;
  font-family:"Space Grotesk","Inter",sans-serif}
.held.knapp{padding:92px 0 52px}

/* ---------- Spalten statt Kästen ---------- */
.raster{display:grid;gap:0;margin-top:50px;border-top:1px solid var(--linie)}
.raster.zwei{grid-template-columns:repeat(2,1fr)}
.saeule{padding:34px 48px 36px 0;border-bottom:1px solid var(--linie);display:flex;flex-direction:column}
.saeule + .saeule{border-left:1px solid var(--linie);padding-left:52px;padding-right:0}
.saeule h3{margin-bottom:14px}
.saeule p{font-size:16.5px;color:var(--grau);margin-bottom:26px}
.weiter{margin-top:auto;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--bronze);
  background:none;align-self:flex-start}
.weiter:hover{color:var(--tinte)}
.weiter::after{content:"";display:inline-block;width:22px;height:1px;background:currentColor;
  vertical-align:4px;margin-left:12px;transition:width .25s ease}
.weiter:hover::after{width:34px}

.felder{display:grid;grid-template-columns:repeat(2,1fr);margin-top:54px;border-top:1px solid var(--linie)}
.feld{padding:36px 50px 38px 0;border-bottom:1px solid var(--linie)}
.feld:nth-child(even){border-left:1px solid var(--linie);padding-left:50px;padding-right:0}
.feld .nr{font-size:10.5px;letter-spacing:.26em;color:var(--bronze);display:block;margin-bottom:18px}
.feld p{font-size:16.5px;color:var(--grau);margin:0}

.schritte{list-style:none;counter-reset:s;padding:0;margin:42px 0 0;max-width:var(--spalte)}
.schritte li{counter-increment:s;position:relative;padding:22px 0 24px 70px;border-bottom:1px solid var(--linie)}
.schritte li:first-child{border-top:1px solid var(--linie)}
.schritte li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:25px;
  font-family:"Space Grotesk","Inter",sans-serif;font-size:10.5px;letter-spacing:.2em;color:var(--bronze)}
.schritte li b{display:block;font-weight:600;margin-bottom:5px;letter-spacing:.005em}
.schritte li span{color:var(--grau);font-size:16.5px}

.vita{margin-top:44px;max-width:900px;border-top:1px solid var(--linie)}
.vita .zeile{display:grid;grid-template-columns:180px 1fr;gap:34px;padding:24px 0;border-bottom:1px solid var(--linie)}
.vita .jahr{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--bronze);padding-top:7px}
.vita .was b{display:block;font-weight:600;font-size:17.5px;margin-bottom:2px}
.vita .was span{color:var(--grau);font-size:16.5px}

.hinweis{border-top:1px solid var(--bronze);padding:22px 0 0;margin:36px 0;max-width:var(--spalte)}
.hinweis p{font-size:16px;color:var(--grau);margin-bottom:0}
.hinweis p b{color:var(--tinte);font-weight:600}

blockquote.satz{margin:0;padding:0;font-family:"Newsreader",Georgia,serif;
  font-size:clamp(26px,3.2vw,38px);line-height:1.3;letter-spacing:-.006em;max-width:20ch}

/* ---------- Kontakt ---------- */
.kontaktraster{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start;margin-top:48px}
.kdaten{list-style:none;padding:0;margin:0;border-top:1px solid var(--linie)}
.kdaten li{padding:20px 0;border-bottom:1px solid var(--linie)}
.kdaten .etikett{display:block;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--bronze);margin-bottom:8px}
.kdaten .wert{font-size:18px;line-height:1.5}

.knopf{position:relative;display:inline-block;background:none;border:1px solid var(--tinte);
  padding:16px 34px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--tinte);
  cursor:pointer;overflow:hidden;isolation:isolate;
  transition:color .4s cubic-bezier(.22,.61,.36,1),border-color .4s ease}
.knopf::before{content:"";position:absolute;inset:0;background:var(--tinte);z-index:-1;
  transform:scaleY(0);transform-origin:bottom;transition:transform .42s cubic-bezier(.22,.61,.36,1)}
.knopf:hover{color:var(--papier)}
.knopf:hover::before{transform:scaleY(1)}
.knopf.voll{color:var(--papier)}
.knopf.voll::before{transform:scaleY(1);background:var(--tinte)}
.knopf.voll:hover{border-color:var(--bronze);color:#fff}
.knopf.voll::after{content:"";position:absolute;inset:0;background:var(--bronze);z-index:-1;
  transform:scaleY(0);transform-origin:bottom;transition:transform .42s cubic-bezier(.22,.61,.36,1)}
.knopf.voll:hover::after{transform:scaleY(1)}
.knopfreihe{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}

.buchen-huelle{position:relative;border:1px solid var(--linie);background:var(--sand-tief);
  min-height:420px;margin-top:26px;overflow:hidden}
.buchen-huelle iframe{width:100%;height:600px;border:0;display:block;background:#fff}
.karten-huelle{margin-top:26px}
.karten-huelle{position:relative;border:1px solid var(--linie);background:var(--sand);aspect-ratio:4/3;overflow:hidden}
.karten-huelle iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.72)}
.karten-schild{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;gap:22px;padding:44px;background:var(--sand)}
.karten-schild p{font-size:14.5px;color:var(--grau);max-width:38ch;margin:0}

/* ---------- Fußzeile ---------- */
footer.fuss{background:var(--tinte);color:#B9B0A2;padding:74px 0 40px;font-size:15px}
footer.fuss a{color:#EDE5D6;background-image:linear-gradient(var(--bronze-hell),var(--bronze-hell))}
footer.fuss a:hover{color:var(--bronze-hell)}
footer.fuss .marke .kasten{background:#F1E9DA;color:var(--tinte)}
footer.fuss .marke .zwei{color:#E2D9C8;border-color:rgba(255,255,255,.22)}
footer.fuss .oben{display:flex;flex-wrap:wrap;gap:52px;justify-content:space-between;
  padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.13)}
footer.fuss .spalte h4{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--bronze-hell);
  margin:0 0 20px;font-weight:400}
footer.fuss .spalte ul{list-style:none;padding:0;margin:0}
footer.fuss .spalte li{margin-bottom:12px}
footer.fuss .unten{padding-top:32px;display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;
  font-size:12.5px;letter-spacing:.02em;color:#8B8377}

/* ---------- Klein ---------- */
.klein{font-size:15.5px;color:var(--grau)}
.rechtstext h2{margin-top:52px;font-size:clamp(25px,2.8vw,32px)}
.rechtstext h3{font-family:"Inter",sans-serif;font-size:15.5px;font-weight:600;letter-spacing:.01em;margin:36px 0 8px}
.rechtstext p,.rechtstext li{max-width:72ch;font-size:16.5px;color:var(--grau)}
.rechtstext ul{padding-left:20px}
.rechtstext li{margin-bottom:9px}

@media (max-width:1080px){
  .wrap.text{grid-template-columns:minmax(0,1fr);column-gap:0}
  .wrap.text > *{grid-column:1}
  .wrap.text > .kicker{grid-column:1;grid-row:auto;text-align:left;margin:0 0 26px}
}
@media (max-width:960px){
  .wrap{padding:0 26px}
  .raster.zwei,.felder{grid-template-columns:1fr}
  .saeule{padding:34px 0 38px}
  .saeule + .saeule{border-left:none;padding-left:0}
  .feld{padding:34px 0 36px}
  .feld:nth-child(even){border-left:none;padding-left:0}
  .kontaktraster{grid-template-columns:1fr;gap:52px}
  .vita .zeile{grid-template-columns:1fr;gap:8px;padding:24px 0}
  .mobil-schalter{display:block}
  nav.haupt{display:none;position:absolute;top:100%;left:0;right:0;background:var(--papier);
    border-bottom:1px solid var(--linie);flex-direction:column;align-items:stretch;gap:0;padding:6px 26px 26px}
  nav.haupt.offen{display:flex}
  .topbar .wrap{position:relative;min-height:82px}
  nav.haupt > a,nav.haupt .zweig > span{padding:16px 0;border-bottom:1px solid var(--linie-fein)}
  nav.haupt > a::after,nav.haupt .zweig > span::after{display:none}
  .zweig .klappe{position:static;opacity:1;visibility:visible;transform:none;border:none;box-shadow:none;
    padding:0 0 0 20px;min-width:0}
  .zweig .klappe a{padding:13px 0}
  section{padding:56px 0}
  .held{padding:60px 0 48px}
  .held.knapp{padding:70px 0 40px}
  .marke{font-size:13px;letter-spacing:.24em}
}
/* ---------- Bewegung ---------- */
.steigt{opacity:0;transform:translateY(16px);
  transition:opacity .78s cubic-bezier(.22,.61,.36,1),transform .78s cubic-bezier(.22,.61,.36,1)}
.steigt.sichtbar{opacity:1;transform:none}
.saeule,.feld{transition-duration:.85s}
.karten-huelle,.buchen-huelle{transform:translateY(22px)}

/* Haarlinien zeichnen sich beim Erscheinen ---------------------------------- */
.raster,.felder,.kdaten,.vita{position:relative;border-top-color:transparent}
.raster::before,.felder::before,.kdaten::before,.vita::before{content:"";position:absolute;
  top:-1px;left:0;right:0;height:1px;background:var(--linie);transform:scaleX(0);
  transform-origin:left;transition:transform 1.05s cubic-bezier(.22,.61,.36,1)}
.raster.sichtbar::before,.felder.sichtbar::before,.kdaten.sichtbar::before,
.vita.sichtbar::before,.raster:not(.steigt)::before,.felder:not(.steigt)::before,
.kdaten:not(.steigt)::before,.vita:not(.steigt)::before{transform:scaleX(1)}

.saeule h3,.feld h3{transition:color .3s ease}
.saeule:hover h3,.feld:hover h3{color:var(--bronze)}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .steigt{opacity:1;transform:none}
  .raster::before,.felder::before,.kdaten::before,.vita::before{transform:scaleX(1)}
}

/* ---------- Formular ---------- */
.formular{margin-top:34px}
.feldpaar{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.feldgruppe{display:block;margin:0 0 22px;max-width:none}
.feldgruppe label{display:block;font-family:"Space Grotesk","Inter",sans-serif;font-size:10.5px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--bronze);margin-bottom:9px}
.feldgruppe .optional{color:var(--grau);letter-spacing:.16em}
.feldgruppe input[type=text],.feldgruppe input[type=email],.feldgruppe input[type=tel],
.feldgruppe select,.feldgruppe textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--linie);
  padding:11px 2px;font:inherit;font-size:16.5px;color:var(--tinte);border-radius:0;
  transition:border-color .3s ease,background-color .3s ease}
.feldgruppe textarea{resize:vertical;min-height:150px;line-height:1.6}
.feldgruppe select{appearance:none;background-image:
  linear-gradient(45deg,transparent 50%,var(--bronze) 50%),
  linear-gradient(135deg,var(--bronze) 50%,transparent 50%);
  background-position:calc(100% - 12px) 22px,calc(100% - 7px) 22px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.feldgruppe input:focus,.feldgruppe select:focus,.feldgruppe textarea:focus{
  outline:none;border-bottom-color:var(--bronze);background:rgba(154,123,69,.05)}
.feldgruppe.zustimmung{display:grid;grid-template-columns:20px 1fr;gap:14px;align-items:start;
  margin-top:30px;padding-top:22px;border-top:1px solid var(--linie-fein)}
.feldgruppe.zustimmung input{width:16px;height:16px;margin-top:5px;accent-color:var(--bronze)}
.feldgruppe.zustimmung label{font-family:"Inter",sans-serif;font-size:14.5px;letter-spacing:0;
  text-transform:none;color:var(--grau);line-height:1.6;margin:0}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.hinweis-klein{margin-top:22px;font-size:14px}
.meldung{border-left:2px solid var(--bronze);background:rgba(255,255,255,.5);
  padding:22px 26px;margin:34px 0 0}
.meldung p{margin:0;font-size:16px;color:var(--grau)}
.meldung p b{color:var(--tinte)}
@media (max-width:960px){
  .feldpaar{grid-template-columns:1fr;gap:0}
}

/* ---------- Kontaktleiste ---------- */
section.leiste{padding:0;border-top:1px solid var(--linie)}
.kontaktleiste{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,1fr)}
.kontaktleiste li{padding:30px 30px 32px 0;border-right:1px solid var(--linie-fein);
  display:flex;flex-direction:column;gap:7px;font-size:16px}
.kontaktleiste li:last-child{border-right:0}
.kontaktleiste li + li{padding-left:30px}
.kontaktleiste .etikett{font-family:"Space Grotesk","Inter",sans-serif;font-size:10.5px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--bronze)}
.blocktitel{font-size:clamp(20px,2vw,24px);margin-bottom:8px}

@media (max-width:960px){
  .kontaktleiste{grid-template-columns:1fr 1fr}
  .kontaktleiste li{padding:22px 22px 24px 0}
  .kontaktleiste li:nth-child(2n){border-right:0;padding-left:22px}
  .kontaktleiste li:nth-child(n+3){border-top:1px solid var(--linie-fein)}
}
@media (max-width:560px){
  .kontaktleiste{grid-template-columns:1fr}
  .kontaktleiste li,.kontaktleiste li + li{padding:18px 0;border-right:0;
    border-top:1px solid var(--linie-fein)}
  .kontaktleiste li:first-child{border-top:0}
}

/* ---------- Lesefortschritt ---------- */
.fortschritt{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--bronze);
  transform:scaleX(0);transform-origin:left;opacity:.85;pointer-events:none}

/* ---------- Aufsteigende Überschrift im Kopfbereich ---------- */
.held h1.steigt{clip-path:inset(-25% 0 100% 0);transform:translateY(26px);
  transition:clip-path 1.05s cubic-bezier(.22,.61,.36,1),transform 1.05s cubic-bezier(.22,.61,.36,1),opacity .5s ease}
.held h1.steigt.sichtbar{clip-path:inset(-25% 0 -25% 0);transform:none}

/* ---------- Seitenwechsel ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:seiteRaus .26s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:seiteRein .42s cubic-bezier(0,0,.2,1) both}
@keyframes seiteRaus{to{opacity:0}}
@keyframes seiteRein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .held h1.steigt{clip-path:none;transform:none}
}


/* ---------- Zur Person: Text links, haftende Tafel rechts ---------- */
.wrap.duo{display:grid;grid-template-columns:minmax(0,1fr) 400px;column-gap:96px;align-items:start}
.strang > *{max-width:60ch}
.haftend{position:sticky;top:118px;align-self:start}

.tafel{position:relative}
.tafel .bildnis{margin:0}
.tafel .stationen{margin-top:46px}
.tafel .stationen .kicker{margin-bottom:14px}
.tafel .stationen .blocktitel{margin-bottom:18px}
.tafel .vita{margin-top:0;max-width:none;border-top:1px solid var(--linie);
  border-top-color:var(--linie)}
/* Die sich aufziehende Haarlinie gilt hier nicht: In der Tafel steuert die Scrollposition alles. */
.tafel .vita::before{content:none}
.tafel .vita .zeile{grid-template-columns:92px 1fr;gap:16px;padding:12px 0}
.tafel .vita .jahr{font-size:9.5px;letter-spacing:.18em;padding-top:5px}
.tafel .vita .was b{font-size:16px;line-height:1.45}
.tafel .vita .was span{font-size:14px;line-height:1.45;display:block}
.tafel .stationen .blocktitel{font-size:24px;margin-bottom:14px}
.tafel .stationen .kicker{margin-bottom:12px}

.bildnis .rahmen{position:relative;overflow:hidden;background:var(--sand);aspect-ratio:4 / 5}
.bildnis img{display:block;width:100%;height:100%;object-fit:cover}
.bildnis .rahmen::after{content:"";position:absolute;inset:0;border:1px solid rgba(27,24,20,.14);
  pointer-events:none}
.bildnis figcaption{margin-top:16px;padding-top:13px;border-top:1px solid var(--linie);
  font-size:14.5px;line-height:1.6;color:var(--tinte)}
.bildnis figcaption span{color:var(--grau);font-size:13.5px}

@media (min-width:1081px){
  /* Alles in der Tafel folgt unmittelbar der Scrollposition, ohne eigene Übergänge:
     sonst hinkt eine Ebene der anderen hinterher und beide sind gleichzeitig zu sehen. */
  .tafel.geregelt *{transition:none}
  .tafel.geregelt{height:var(--hoehe,560px)}
  .tafel.geregelt .bildnis,.tafel.geregelt .stationen{position:absolute;left:0;right:0;top:0;margin:0}
  .tafel.geregelt .bildnis .rahmen{height:calc(var(--hoehe,560px) - 62px);aspect-ratio:auto}

  /* Das Bild tritt zurück ... */
  .tafel.geregelt .bildnis{
    opacity:clamp(0, calc((0.46 - var(--p,0)) / 0.3), 1);
    transform:translateY(calc(var(--p,0) * -22px)) scale(calc(1 - var(--p,0) * 0.035));
    transform-origin:top center}

  /* ... und die Stationen treten nacheinander an seine Stelle */
  .tafel.geregelt .stationen > .kicker{
    opacity:clamp(0, calc((var(--p,0) - 0.4) / 0.1), 1)}
  .tafel.geregelt .stationen > .blocktitel{
    opacity:clamp(0, calc((var(--p,0) - 0.44) / 0.1), 1);
    transform:translateY(calc((1 - clamp(0, calc((var(--p,0) - 0.44) / 0.1), 1)) * 12px))}
  .tafel.geregelt .stationen .vita{
    border-top-color:rgba(214,203,180,calc(clamp(0, calc((var(--p,0) - 0.48) / 0.1), 1)))}
  .tafel.geregelt .vita .zeile{
    --s:clamp(0, calc((var(--p,0) - 0.5 - var(--i,0) * 0.065) / 0.12), 1);
    opacity:var(--s);
    transform:translateY(calc((1 - var(--s)) * 16px));
    border-bottom-color:rgba(214,203,180,calc(var(--s)))}
  .tafel.geregelt .vita .zeile:nth-child(1){--i:0}
  .tafel.geregelt .vita .zeile:nth-child(2){--i:1}
  .tafel.geregelt .vita .zeile:nth-child(3){--i:2}
  .tafel.geregelt .vita .zeile:nth-child(4){--i:3}
  .tafel.geregelt .vita .zeile:nth-child(5){--i:4}
  .tafel.geregelt .vita .zeile:nth-child(6){--i:5}
}

@media (max-width:1080px){
  .wrap.duo{grid-template-columns:minmax(0,1fr);row-gap:52px}
  .haftend{position:static}
  .tafel{max-width:420px}
}

/* Beide Spalten bleiben stehen, bis die Stationen vollständig sind.
   Die Höhe des Abschnitts bestimmt, wie lange der Wechsel dauert. */
@media (min-width:1081px){
  .wrap.duo{min-height:min(1480px, 168vh)}
  /* Beide Spalten sind gleich hoch, damit sie am Ende gemeinsam mitgehen. */
  .haftend.strang{min-height:var(--hoehe,560px)}
}

/* ---------- Porträt neben dem Text auf der Startseite ---------- */
.wrap.text.mitbild{grid-template-columns:210px minmax(0,1fr) 300px;column-gap:64px}
.wrap.text.mitbild > *{grid-column:2}
.wrap.text.mitbild > .kicker{grid-column:1;grid-row:1}
.wrap.text.mitbild > .bildnis{grid-column:3;grid-row:1 / span 6;margin:0;align-self:start;max-width:300px}
.bildnis.schlicht figcaption{display:none}

@media (max-width:1080px){
  .wrap.text.mitbild{grid-template-columns:minmax(0,1fr);column-gap:0}
  .wrap.text.mitbild > *{grid-column:1}
  .wrap.text.mitbild > .kicker{grid-column:1;grid-row:auto;text-align:left;margin:0 0 26px}
  .wrap.text.mitbild > .bildnis{grid-column:1;grid-row:auto;max-width:320px;margin-top:36px}
}

/* ---------- Verweis auf das Netzwerkprofil ---------- */
.netzlink{display:inline-flex;align-items:center;gap:9px;background-image:none;padding-bottom:0}
.netzlink span{background-image:linear-gradient(var(--bronze),var(--bronze));background-repeat:no-repeat;
  background-position:0 100%;background-size:100% 1px;padding-bottom:1px}
footer.fuss .netzlink span{background-image:linear-gradient(var(--bronze-hell),var(--bronze-hell))}
.netzzeichen{width:15px;height:15px;flex:0 0 auto;opacity:.75;transition:opacity .25s ease}
.netzlink:hover .netzzeichen{opacity:1}
.kontaktleiste .netzlink{font-size:16px}