/* Frank Dippold Vermögensberatung. Skelett S3 Halbiert (hell), IBM Plex Sans.
   Drei Größen: h1 / h2 / Text, dazu Kleintext. Radius 2 px überall, kein Schatten. */
@font-face{font-family:"IBM Plex Sans";src:url(assets/fonts/plex-sans.woff2) format("woff2");font-weight:100 700;font-display:swap}

:root{
  --papier:#f4f2ed; --tinte:#1d2022; --grau:#5f6264; --linie:#d8d4cc; --linie-fein:#e6e2da;
  --petrol:#2a7570; --petrol-hell:#4ca69f; --flaeche:#2b2d30; --flaeche-text:#e9e7e1; --flaeche-grau:#b7b9b9;
  --schrift:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --h1:clamp(2.5rem,5.5vw,4.75rem); --h2:clamp(1.8rem,3.1vw,2.75rem); --text:1.0625rem; --klein:.8125rem;
  --kopf:76px; --rand:5vw; --gutter:24px; --breit:1320px;
  --eng:4rem; --normal:8rem; --weit:12rem;
  --kurve:cubic-bezier(.22,1,.36,1); --kurve-bild:cubic-bezier(.77,0,.175,1);
}

*{box-sizing:border-box;margin:0}
html{background:var(--papier);color:var(--tinte);font-family:var(--schrift);font-size:16px;-webkit-font-smoothing:antialiased;scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf) + 1rem)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{line-height:1.6;font-size:var(--text);overflow-x:hidden}
body.intro-an,body.menu-offen{overflow:hidden}
::selection{background:var(--petrol);color:#fff}
:focus-visible{outline:2px solid var(--petrol);outline-offset:3px;border-radius:2px}
input,textarea,select{caret-color:var(--petrol)}
a{color:inherit;text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:var(--petrol-hell);transition:text-decoration-color .18s}
a:hover{text-decoration-color:var(--petrol)}
img{display:block;max-width:100%;height:auto}
svg{display:inline-block;width:1.05em;height:1.05em;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.15em}
h1,h2,h3{font-weight:500;letter-spacing:-.022em;line-height:1.06;text-wrap:balance}
h1{font-size:var(--h1)}
h2{font-size:var(--h2);line-height:1.12}
h3{font-size:var(--text);line-height:1.4;letter-spacing:0}
p{max-width:62ch;text-wrap:pretty}
p+p{margin-top:1em}
.klein{font-size:var(--klein);color:var(--grau);line-height:1.55}
time,.nr,.tnum{font-variant-numeric:tabular-nums}
.versteckt{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprung{position:absolute;left:-999px;top:.5rem;background:var(--tinte);color:var(--papier);padding:.5rem .8rem;z-index:1000;text-decoration:none}
.sprung:focus{left:.5rem}

/* Zwei Haarlinien am Rand des Rasters, laufen über die ganze Seite (Flächen und Bilder decken sie ab) */
main{position:relative}
main::before,main::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:rgba(29,32,34,.07);pointer-events:none;z-index:0}
main::before{left:calc(max(var(--rand),calc((100% - var(--breit)) / 2 + var(--rand))) - 1.5rem)}
main::after{right:calc(max(var(--rand),calc((100% - var(--breit)) / 2 + var(--rand))) - 1.5rem)}
main>*{position:relative}
@media (max-width:900px){main::before,main::after{display:none}}

/* Raster: 12 Spalten, Rand 5vw, max. 1320 */
.rand{max-width:var(--breit);margin:0 auto;padding-left:var(--rand);padding-right:var(--rand)}
.raster{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);row-gap:2.5rem;max-width:var(--breit);margin:0 auto;padding:0 var(--rand)}
.raster>.voll{grid-column:1/-1}
.raster>.links{grid-column:1/6}
.raster>.rechts{grid-column:7/-1}
.raster>.versetzt{grid-column:6/-1}
.abstand-eng{padding:var(--eng) 0}
.abstand-normal{padding:var(--normal) 0}
.abstand-weit{padding:var(--weit) 0}
@media (max-width:900px){
  :root{--eng:3rem;--normal:5rem;--weit:6.5rem}
  .raster{row-gap:1.75rem}
  .raster>.links,.raster>.rechts,.raster>.versetzt{grid-column:1/-1}
}

/* Knöpfe: einer je Sektion, Radius 2 px, keine Pillen */
.knopf{display:inline-block;border:1px solid var(--tinte);padding:.85rem 1.2rem;font-size:.9375rem;font-weight:500;border-radius:2px;line-height:1;text-decoration:none;color:var(--tinte);background:transparent;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .18s,color .18s,border-color .18s,transform .12s}
.knopf:hover{background:var(--tinte);color:var(--papier)}
.knopf:active{transform:scale(.97)}
.knopf.voll{background:var(--tinte);color:var(--papier)}
.knopf.voll:hover{background:var(--petrol);border-color:var(--petrol)}
.knopf[disabled]{opacity:.55;cursor:default;transform:none}
.pfeillink{text-decoration:none;font-weight:500;display:inline-flex;align-items:center;gap:.45rem}
.pfeillink svg{transition:transform .18s var(--kurve)}
.pfeillink:hover svg{transform:translateX(4px)}

/* Kopfzeile */
.kopf{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--papier) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.kopf.fest{border-bottom-color:var(--linie-fein)}
.kopf-inner{display:flex;align-items:center;justify-content:space-between;height:var(--kopf);max-width:var(--breit);margin:0 auto;padding:0 var(--rand)}
.logo{display:block;text-decoration:none}
.logo img{height:34px;width:auto}
.nav{display:flex;align-items:center;gap:2.25rem;font-size:.9375rem}
.nav a{text-decoration:none;position:relative;padding-bottom:2px}
.nav a:not(.knopf)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s var(--kurve)}
.nav a:not(.knopf):hover::after,.nav a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.nav .knopf{padding:.6rem .9rem;border-bottom:1px solid var(--tinte)}
.nav .knopf:hover{border-color:var(--tinte)}
.burger{display:none;background:none;border:0;width:44px;height:44px;padding:10px;cursor:pointer;flex-direction:column;justify-content:center;gap:6px;margin-right:-10px}
.burger span{display:block;height:1.5px;background:var(--tinte);transition:transform .2s var(--kurve)}
body.menu-offen .burger span:first-child{transform:translateY(3.75px) rotate(45deg)}
body.menu-offen .burger span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
.mobilmenu{display:none}
@media (max-width:900px){
  .nav{display:none}
  .burger{display:flex}
  .mobilmenu{display:flex;flex-direction:column;gap:0;position:fixed;inset:var(--kopf) 0 0 0;z-index:40;background:var(--papier);padding:1rem var(--rand) 2rem;overflow-y:auto;transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .2s,transform .22s var(--kurve)}
  body.menu-offen .mobilmenu{opacity:1;transform:none;pointer-events:auto}
  .mobilmenu{counter-reset:menu}
  .mobilmenu a{text-decoration:none;font-size:1.75rem;font-weight:500;padding:1.1rem 0;border-bottom:1px solid var(--linie);display:flex;align-items:baseline;gap:1rem;letter-spacing:-.015em}
  .mobilmenu a::before{counter-increment:menu;content:counter(menu,decimal-leading-zero);font-size:var(--klein);color:var(--grau);font-weight:400;letter-spacing:.04em;min-width:1.6rem;font-variant-numeric:tabular-nums}
}

/* Hero: halbiert, Text links auf Papier, Foto rechts hart bis zum Rand */
.hero{display:grid;grid-template-columns:11fr 9fr;padding-left:max(var(--rand),calc((100% - var(--breit)) / 2 + var(--rand)));min-height:calc(100svh - var(--kopf));max-height:780px}
.hero-text{padding:3.5rem 4vw 3rem 0;display:flex;flex-direction:column;justify-content:space-between;gap:2.5rem}
.hero h1{font-size:clamp(2.4rem,4vw,3.85rem)}
.hero h1 em{font-style:normal;color:var(--petrol)}
.hero-sub{margin-top:1.75rem;max-width:44ch}
.hero-fuss{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.hero-foto{position:relative;overflow:hidden;clip-path:inset(0 0 0 0)}
.hero-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%}
.hero-unter{max-height:820px}
.hero-unter h1{font-size:clamp(2rem,3vw,2.75rem)}
.hero-unter .hero-sub{max-width:52ch;font-size:1rem}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:0;max-height:none;padding-left:0}
  .hero-text{padding:3rem var(--rand) 2.5rem;gap:2rem;order:2}
  .hero-foto{order:1;aspect-ratio:4/5;max-height:70vh}
}

/* Hero-Auftritt: Foto öffnet sich von oben, einmal, mit dem Vorhang */
@media (prefers-reduced-motion:no-preference){
  .hero-foto{animation:heroFoto 1.1s var(--kurve-bild) both}
  .hero-foto img{animation:heroFotoZoom 1.4s var(--kurve) both}
  body.intro-an .hero-foto,body.intro-an .hero-foto img{animation-play-state:paused}
}
@keyframes heroFoto{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes heroFotoZoom{from{transform:scale(1.06)}to{transform:none}}

/* Zitat: Sektion ohne Überschrift */
.zitat-satz{grid-column:1/12;font-size:clamp(2rem,3.6vw,3.25rem);font-weight:500;letter-spacing:-.022em;line-height:1.1;max-width:none;hanging-punctuation:first}
.zitat-text{grid-column:7/-1;margin-top:-.5rem}
.zitat-bild{grid-column:1/6;margin:0}.zitat-bild img{display:block;width:100%;border-radius:2px}.zitat-bild figcaption{margin-top:.7rem;font-size:var(--klein);color:var(--grau)}
@media (max-width:900px){.zitat-satz,.zitat-text,.zitat-bild{grid-column:1/-1}.zitat-text{margin-top:0}}

/* Grundsätze: Überschrift links, 2×2 Text rechts */
.grundsaetze .links p,.kontinuitaet .links p{margin-top:1.25rem}
.grundsaetze dl{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem var(--gutter)}
.grundsaetze dt{font-weight:500;margin-bottom:.5rem;padding-top:.85rem;border-top:1px solid var(--linie)}
.grundsaetze dd{color:var(--grau);font-size:1rem}
@media (max-width:600px){.grundsaetze dl{grid-template-columns:1fr}}

/* Leistungen: nummerierte Liste, versetzt ab Spalte 4 */
.schritte{grid-column:4/-1;list-style:none;padding:0;border-top:1px solid var(--linie)}
.schritte li{display:grid;grid-template-columns:4rem 1fr;gap:var(--gutter);padding:1.75rem 0;border-bottom:1px solid var(--linie)}
.schritte .nr{color:var(--grau);font-size:var(--klein);padding-top:.35em;letter-spacing:.04em}
.schritte h3{margin-bottom:.35rem}
.schritte p{color:var(--grau);font-size:1rem}
.schritte-link{grid-column:4/-1;margin-top:-.5rem}
.schritte.lang{grid-column:1/-1;border-top:0}
.schritte.lang li{grid-template-columns:2fr 6fr 4fr;padding:3.5rem 0}
.schritte.lang li:first-child{padding-top:0}
.schritte.lang li>div{grid-column:2}
.schritte.lang h2{margin-bottom:1.25rem}
.schritte.lang p{color:var(--tinte);font-size:var(--text)}
@media (max-width:900px){
  .schritte,.schritte-link{grid-column:1/-1}
  .schritte li{grid-template-columns:2.5rem 1fr;gap:1rem}
  .schritte.lang li{grid-template-columns:3rem 1fr;padding:2.25rem 0}
  .schritte.lang li>div{grid-column:2}
}

/* Zwei Fotos nebeneinander, ein Wort darunter */
.paar{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);padding-left:var(--rand);padding-right:var(--rand);max-width:var(--breit);margin-left:auto;margin-right:auto}
.paar-teil{text-decoration:none;display:block}
.paar-teil img{aspect-ratio:3/2;object-fit:cover;width:100%;border-radius:2px;transition:filter .3s}
.paar-teil:hover img{filter:saturate(.82) contrast(1.02) brightness(.94)}
.paar-wort{display:inline-flex;align-items:center;gap:.45rem;margin-top:.9rem;font-weight:500}
.paar-teil svg{transition:transform .18s var(--kurve)}
.paar-teil:hover svg{transform:translateX(4px)}
@media (max-width:600px){.paar{grid-template-columns:1fr;gap:2rem}}

/* Die eine Farbfläche: Werdegang */
.flaeche{background:var(--flaeche);color:var(--flaeche-text);padding:var(--normal) 0}
.flaeche ::selection{background:var(--petrol-hell);color:var(--flaeche)}
.flaeche .klein,.flaeche .grau{color:var(--flaeche-grau)}
.flaeche a{text-decoration-color:var(--petrol-hell)}
.flaeche .raster>.rechts{color:var(--flaeche-grau)}
.werdegang .rechts p+p{margin-top:1em}
.leiste-wrap{position:relative;margin-top:5rem}
.leiste{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(7,1fr);gap:var(--gutter)}
.leiste-linie{position:absolute;left:0;right:0;top:0;height:1px;background:var(--petrol-hell);transform-origin:left;transform:scaleX(0);transition:transform 1.6s var(--kurve-bild)}
.leiste-wrap:has(.leiste.gezogen) .leiste-linie{transform:scaleX(1)}
.leiste li{padding-top:1.25rem;position:relative;font-size:.875rem;line-height:1.5}
.leiste li::before{content:"";position:absolute;top:-3px;left:0;width:7px;height:7px;border-radius:50%;background:var(--petrol-hell);opacity:0;transition:opacity .3s}
.leiste.gezogen li::before{opacity:1;transition-delay:calc(var(--i,0) * .2s)}
.leiste time{display:block;font-size:1.25rem;font-weight:500;color:var(--flaeche-text);margin-bottom:.4rem;letter-spacing:-.01em}
.leiste b{display:block;font-weight:500;color:var(--flaeche-text)}
.leiste span{color:var(--flaeche-grau);display:block;max-width:18ch}
.leiste .jetzt time{color:var(--petrol-hell)}
.leiste-link{margin-top:3.5rem}
@media (max-width:1100px){.leiste{grid-template-columns:repeat(4,1fr)}.leiste-linie{display:none}.leiste li{padding-left:1rem;border-left:1px solid var(--petrol-hell);padding-top:0}.leiste li::before{display:none}}
@media (max-width:600px){.leiste{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){.leiste-linie{transform:none;transition:none}.leiste li::before{opacity:1;transition:none}}

/* Ein Preset für alle Stimmungsbilder (Porträt und Presse ausgenommen) */
.paar-teil img,.nurbild img{filter:saturate(.82) contrast(1.02)}

/* Nur Bild */
.nurbild img{width:100%;height:min(72vh,720px);object-fit:cover}
.nurbild .rand{margin-top:.9rem}.nurbild .klein{max-width:70ch}
.nurbild.abstand-eng{padding-bottom:0}

/* Versetzter Text (ab Spalte 6) */
.erreichbar .versetzt p,.schluss .versetzt p,.presse .versetzt p{margin-top:1.25rem}
.schluss .knopf{margin-top:.5rem}

/* Kontakt: Formular auf Papier, kein Farbwechsel */
.kontakt .links p{margin-top:1.25rem}
.kontakt-daten{margin-top:2.5rem;display:grid;gap:1rem;max-width:32ch}
.kontakt-daten div{display:grid;grid-template-columns:6rem 1fr;gap:1rem;font-size:1rem}
.kontakt-daten dt{color:var(--grau);font-size:var(--klein);padding-top:.25em}
.kontakt-daten a{text-decoration:none}
.kontakt-daten a:hover{text-decoration:underline}

.formular{display:grid;gap:1.35rem}
.formular .zeile{display:grid;grid-template-columns:1fr 1fr;gap:1.35rem var(--gutter)}
@media (max-width:600px){.formular .zeile{grid-template-columns:1fr}}
.feld{display:grid;gap:.4rem}
.feld label{font-size:var(--klein);font-weight:500;color:var(--grau);letter-spacing:.01em}
.feld .hilfe{font-weight:400;color:var(--grau);font-size:var(--klein)}
.feld input,.feld select,.feld textarea{font:inherit;font-size:1.0625rem;color:var(--tinte);background:transparent;border:0;border-bottom:1px solid var(--linie);border-radius:0;padding:.55rem 0 .7rem;min-height:44px;width:100%;transition:border-color .25s}
.feld textarea{resize:vertical;min-height:6.5rem}
.feld input:hover,.feld select:hover,.feld textarea:hover{border-color:#b9b4aa}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:none;border-color:var(--petrol)}
.feld input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--papier) inset}
.feld select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d2022' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0 center;background-size:16px;padding-right:2rem}
.fehlertext{display:none;color:#9a2f2f;font-size:var(--klein)}
.feld.fehler .fehlertext{display:block}
.feld.fehler input,.feld.fehler textarea{border-color:#9a2f2f}
.haken{display:flex;gap:.75rem;align-items:flex-start;font-size:.9375rem;font-weight:400;cursor:pointer}
.haken input{width:18px;height:18px;min-height:0;margin-top:.2rem;flex:none;accent-color:var(--petrol)}
.senden{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}

/* Seitenkopf der Unterseiten */
.seitenkopf{padding:4.5rem 0 3.5rem}
.seitenkopf h1{font-size:clamp(2.1rem,4vw,3.5rem);max-width:28ch}
.seitenkopf .rechts{margin-top:-.5rem}
.seitenkopf+.nurbild{padding-top:0}

/* Über mich: Stationen als Linienliste, Presse, Kürzel */
.stationen{list-style:none;padding:0;border-top:1px solid var(--linie)}
.stationen li{display:grid;grid-template-columns:9rem 1fr;gap:var(--gutter);padding:1.1rem 0;border-bottom:1px solid var(--linie);font-size:1rem}
.stationen time{color:var(--grau);font-size:var(--klein);padding-top:.3em}
.stationen b{font-weight:500;display:block}
.stationen span{color:var(--grau);display:block;font-size:.9375rem}
@media (max-width:600px){.stationen li{grid-template-columns:1fr;gap:.2rem}}
.ausschnitte{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);margin-top:1.5rem}
.ausschnitte figure{margin:0}
.ausschnitte img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top;border:1px solid var(--linie);border-radius:2px;filter:grayscale(1) contrast(1.02)}
.ausschnitte figcaption{margin-top:.75rem;font-size:var(--klein);color:var(--grau)}
.ausschnitte figcaption b{display:block;color:var(--tinte);font-weight:500}
@media (max-width:700px){.ausschnitte{grid-template-columns:1fr}}
.kuerzel{display:grid;gap:0;border-top:1px solid #45484c}
.kuerzel div{display:grid;grid-template-columns:8rem 1fr;gap:var(--gutter);padding:1.4rem 0;border-bottom:1px solid #45484c}
.kuerzel dt{font-weight:500;color:var(--petrol-hell)}
.kuerzel dd b{display:block;font-weight:500;color:var(--flaeche-text);margin-bottom:.2rem}
.kuerzel dd{color:var(--flaeche-grau);font-size:1rem}
@media (max-width:600px){.kuerzel div{grid-template-columns:1fr;gap:.3rem}}
.prosa p+p{margin-top:1.1em}
.prosa .knopf{margin-top:.75rem}

/* Rechtstexte */
.recht{max-width:72ch;margin-left:auto;margin-right:auto;padding-bottom:var(--normal)}
.recht h2{font-size:1.35rem;margin:2.75rem 0 .75rem}
.recht h3{margin:1.5rem 0 .4rem}
.recht p{margin-bottom:.9rem;max-width:none}
.recht ul{padding-left:1.2rem;margin-bottom:1rem}
.recht li{margin-bottom:.35rem}

/* Fuß */
.fuss{border-top:1px solid var(--linie);padding:5rem 0 2.5rem;margin-top:var(--eng)}
.fuss-satz{font-size:var(--h2);font-weight:500;letter-spacing:-.022em;line-height:1.12;max-width:none}
.fuss-mail{display:inline-block;margin-top:.6rem;font-size:clamp(1.5rem,3.4vw,3rem);font-weight:400;letter-spacing:-.025em;line-height:1.1;text-decoration:none;position:relative;color:var(--tinte)}
.fuss-mail::after{content:"";position:absolute;left:0;right:0;bottom:-.06em;height:2px;background:var(--petrol);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--kurve)}
.fuss-mail:hover::after{transform:scaleX(1);transform-origin:left}
.fuss-kopf{padding-bottom:3.5rem;margin-bottom:3.5rem;border-bottom:1px solid var(--linie-fein)}
.fuss-oben{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--gutter);align-items:start}
.fuss-links b{display:block;font-weight:500;font-size:var(--klein);color:var(--grau);margin-bottom:.35rem;letter-spacing:.02em}
.fuss-marke img{height:34px;width:auto;margin-bottom:1rem}
.fuss-links{list-style:none;padding:0;display:grid;gap:.5rem;font-size:.9375rem}
.fuss-links a{text-decoration:none}
.fuss-links a:hover{text-decoration:underline}
.fuss-unten{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);margin-top:3.5rem;padding-top:1.25rem;border-top:1px solid var(--linie-fein)}
@media (max-width:900px){.fuss-oben{grid-template-columns:1fr 1fr}.fuss-marke{grid-column:1/-1}}
@media (max-width:700px){.fuss-oben,.fuss-unten{grid-template-columns:1fr;gap:2rem}.fuss-unten{gap:.75rem}.fuss-mail{font-size:1.35rem;word-break:break-all}}

/* Intro: Logo auf Anthrazit, Fläche hebt sich. Eine Bewegung, unter 1,5 s. */
.intro{position:fixed;inset:0;z-index:900;background:var(--flaeche);display:flex;align-items:center;justify-content:center;will-change:transform;cursor:pointer}
.intro[hidden]{display:none}
.intro__logo{width:clamp(180px,22vw,300px);height:auto;opacity:0;transform:translateY(10px)}
.intro.laeuft .intro__logo{animation:introLogo .6s var(--kurve) .05s forwards}
.intro.geht{pointer-events:none;animation:introWeg .7s cubic-bezier(.76,0,.24,1) forwards}
.intro.geht .intro__logo{animation:introLogoWeg .35s ease forwards}
.intro__mitte{display:flex;flex-direction:column;align-items:center}
@keyframes introLogo{to{opacity:1;transform:none}}
@keyframes introLogoWeg{to{opacity:0;transform:translateY(-8px)}}
@keyframes introWeg{to{transform:translateY(-101%)}}

/* Häufige Fragen: aufklappbare Zeilen */
.faq-liste{border-top:1px solid var(--linie)}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{cursor:pointer;list-style:none;padding:1.25rem 0;font-weight:500;display:flex;justify-content:space-between;gap:1.5rem;align-items:center;transition:color .2s}
.faq summary:hover{color:var(--petrol)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:11px;height:11px;flex:none;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .3s var(--kurve)}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(2px)}
.faq details p{color:var(--grau);padding:0 0 1.5rem;max-width:60ch}

/* Glossar: zweispaltige Begriffsliste */
.glossar-liste{display:grid;grid-template-columns:1fr 1fr;gap:3rem var(--gutter)}
.glossar-liste>div{border-top:1px solid var(--linie);padding-top:1rem;scroll-margin-top:calc(var(--kopf) + 1.5rem)}
.glossar-liste dt{font-weight:500;font-size:1.25rem;margin-bottom:.5rem;letter-spacing:-.01em}
.glossar-liste dd{color:var(--grau);font-size:1rem}
.glossar-liste>div:target dt{color:var(--petrol)}
@media (max-width:700px){.glossar-liste{grid-template-columns:1fr}}

/* Fotostreifen (Über mich): eigene Fotos aus Frankfurt, waagerecht */
.streifen-huelle{overflow:hidden;margin-top:3rem}
.streifen-bahn{display:flex;gap:var(--gutter);padding:0 var(--rand);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.streifen-bahn::-webkit-scrollbar{display:none}
.streifen figure{flex:0 0 auto;width:min(520px,78vw);scroll-snap-align:start;margin:0}
.streifen figure.hoch{width:min(340px,60vw)}
.streifen img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:2px;filter:saturate(.88) contrast(1.03)}
.streifen figure.hoch img{aspect-ratio:3/4}
.streifen figcaption{margin-top:.7rem;font-size:var(--klein);color:var(--grau)}

/* Werdegang: eigenes Skyline-Foto liegt gedämpft hinter der Fläche */
.werdegang.flaeche{padding:0}
.werdegang .pin{position:relative;padding:var(--normal) 0}
.werdegang .pin>*{position:relative}
.werdegang-hintergrund{position:absolute!important;inset:0;overflow:hidden;pointer-events:none}
.werdegang-hintergrund img{width:100%;height:100%;object-fit:cover;object-position:center 60%;opacity:.6;filter:saturate(.7)}
.werdegang-hintergrund::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(43,45,48,.8),rgba(43,45,48,.5) 45%,rgba(43,45,48,.88))}

/* Themenseiten */
.verweise{list-style:none;padding:0;margin-top:2.5rem;border-top:1px solid var(--linie);display:grid}
.verweise li{border-bottom:1px solid var(--linie)}
.verweise a{display:block;padding:.85rem 0;text-decoration:none;font-weight:500}
.verweise a:hover{color:var(--petrol)}
.thema-block+.thema-block{padding-top:0}
.schritte.lang .pfeillink{margin-top:.5rem}

/* Tafel-Galerie (Leistungen auf der Startseite, seit 14.09.): fünf Tafeln über die Randbreite, die aktive breit, die anderen schmal und weich. Öffnet sich wie eine Tür. */
.galerie .raster+.tafeln{margin-top:2.75rem}
.tafeln{display:flex;gap:6px;height:min(78vh,760px);min-height:520px;max-width:var(--breit);margin:0 auto;padding:0 var(--rand)}
.tafel{position:relative;flex:1 1 0;min-width:0;overflow:hidden;border-radius:2px;color:#fff;text-decoration:none;background:#1a1d20;transition:flex 1s var(--kurve-bild)}
.tafel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.02) blur(6px);transform:scale(1.08);transition:filter .9s var(--kurve),transform 1.2s var(--kurve-bild)}
.tafel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.15) 40%,rgba(0,0,0,.2) 55%,rgba(0,0,0,.78));opacity:.6;transition:opacity .6s}
.tafel.aktiv{flex:5 1 0}
.tafel.aktiv img{filter:saturate(.9) contrast(1.03) blur(0);transform:none}
.tafel.aktiv::after{opacity:1}
.tafel-kopf,.tafel-fuss{position:absolute;left:1.6rem;right:1.6rem;z-index:1}
.tafel-kopf{top:1.5rem;display:grid;gap:.5rem}
.tafel-nr{font-size:var(--klein);letter-spacing:.06em;opacity:.8}
.tafel-titel{font-size:clamp(1.5rem,2.4vw,2.35rem);font-weight:500;letter-spacing:-.02em;line-height:1.08;white-space:nowrap;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .7s var(--kurve)}
.tafel-fuss{bottom:1.5rem;display:grid;gap:.6rem;max-width:44ch;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .7s var(--kurve)}
.tafel-text{font-size:.9375rem;line-height:1.55;color:rgba(255,255,255,.9)}
.tafel-mehr{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--klein);font-weight:500}
.tafel-mehr svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.6}
.tafel.aktiv .tafel-titel,.tafel.aktiv .tafel-fuss{opacity:1;transform:none;transition-delay:.25s}
.tafel:not(.aktiv) .tafel-kopf{writing-mode:vertical-rl;top:1.5rem;left:auto;right:1.2rem}
.tafel:focus-visible{outline:2px solid var(--petrol);outline-offset:2px}
.galerie-link{margin-top:2.5rem}
@media (max-width:900px){
  .tafeln{flex-direction:column;height:auto;min-height:0;gap:6px}
  .tafel{height:120px;flex:none;transition:height .8s var(--kurve-bild)}
  .tafel.aktiv{flex:none;height:420px}
  .tafel:not(.aktiv) .tafel-kopf{writing-mode:horizontal-tb;left:1.2rem;right:1.2rem;top:1.2rem}
  .tafel:not(.aktiv) .tafel-titel{opacity:1;transform:none;font-size:1.15rem;white-space:normal}
  .tafel-kopf,.tafel-fuss{left:1.2rem;right:1.2rem}
}



/* KI-Kapitel: Überschrift links, Text rechts */

/* Kontinuität: zwei Fotos, gleiche Stelle, 14 Jahre dazwischen */
.bildpaar{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);align-items:start}
.bildpaar figure{margin:0}
.bildpaar img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px}
.bildpaar figcaption,.schild figcaption,.kater figcaption{margin-top:.7rem;font-size:var(--klein);color:var(--grau)}
.schild{margin:2.5rem 0 0;max-width:275px}
.schild img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:2px}
.kater figure{margin:0}
.kater img{display:block;width:100%;aspect-ratio:5/3;object-fit:cover;border-radius:2px}
@media (max-width:900px){.bildpaar{gap:.75rem}}

/* Loop 12 (30.09.): Franks Bilder vom 29.09. */
/* Leitgedanke: Vater als schwacher Hintergrund, tritt beim Scrollen leicht hervor (--zb aus kino.js) */
.zitat{overflow:clip}
.zitat .pin{position:relative}
.zitat-hintergrund{position:absolute!important;top:0;bottom:0;right:0;width:min(62%,900px);margin:0;pointer-events:none;z-index:0}
.zitat-hintergrund img{width:100%;height:100%;object-fit:cover;object-position:60% 30%;opacity:calc(.18 + var(--zb,.6) * .32);filter:grayscale(1) sepia(.25) contrast(.95);transform:scale(calc(1.06 - var(--zb,0) * .06));-webkit-mask-image:linear-gradient(90deg,transparent,#000 45%,#000 75%,transparent),linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 45%,#000 75%,transparent),linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);mask-composite:intersect}
.zitat-hintergrund figcaption{position:absolute;right:var(--rand);bottom:2rem;font-size:var(--klein);color:var(--grau);opacity:calc(.35 + var(--zb,.6) * .65)}
.zitat .raster{position:relative;z-index:1}
@media (max-width:900px){.zitat .pin{padding-bottom:2.75rem}.zitat-hintergrund{width:100%}.zitat-hintergrund img{object-position:55% 25%;opacity:calc(.16 + var(--zb,.6) * .29)}.zitat-hintergrund figcaption{bottom:0}}

/* Werdegang: 8 Stationen */
.leiste{grid-template-columns:repeat(8,1fr)}
@media (max-width:1100px){.leiste{grid-template-columns:repeat(4,1fr)}}
@media (max-width:600px){.leiste{grid-template-columns:1fr 1fr}}

/* Loop 13 (12.10.): New York als ruhiges Fotoband über die volle Breite, beide Bilder gleich hoch (Frank: „wie selbst hingezimmert“) */
.erreichbar .raster{align-items:start}
.erreichbar .rechts p+p{margin-top:1.25rem}
.erreichbar-foto{margin:1.5rem 0 0}
.ny-paar{display:flex;gap:var(--gutter);align-items:flex-start}
.ny-paar img{display:block;min-width:0;height:auto;border-radius:2px;filter:saturate(.8) contrast(1.02)}
.ny-paar img:first-child{flex:.679 1 0}
.ny-paar img:last-child{flex:1.796 1 0}
.erreichbar-foto figcaption{margin-top:.7rem;font-size:var(--klein);color:var(--grau)}
@media (max-width:900px){.ny-paar{gap:.75rem}.erreichbar-foto{margin-top:.5rem}}
.kontinuitaet h2{text-wrap:balance}
.kontinuitaet .links p:first-child{margin-top:0}

/* Tafel mit hellem Motiv (Cappuccino): offen liegt das Bild oben, darunter Schwarz mit Titel und Text */
.tafel.halb{background:#0f1011}
.tafel.halb img{transition:filter .9s var(--kurve),transform 1.2s var(--kurve-bild),height 1s var(--kurve-bild)}
.tafel.halb:not(.aktiv)::after{background:rgba(0,0,0,.5);opacity:1}
.tafel.halb.aktiv img{height:60%;object-position:50% 38%}
.tafel.halb.aktiv::after{background:linear-gradient(180deg,transparent 50%,#0f1011 60%)}
.tafel.halb.aktiv .tafel-kopf{top:calc(60% + 1.2rem)}
@media (max-width:900px){.tafel.halb.aktiv{height:560px}.tafel.halb.aktiv img{height:56%;object-position:50% 40%}.tafel.halb.aktiv::after{background:linear-gradient(180deg,transparent 47%,#0f1011 56%)}.tafel.halb.aktiv .tafel-kopf{top:calc(56% + 1rem)}}

@media (prefers-reduced-motion:reduce){.tafel,.tafel img,.tafel.halb img,.tafel::after,.tafel-titel,.tafel-fuss{transition:none}}
@media (min-width:901px){.erreichbar .raster>h2.links{grid-column:1/7}.erreichbar .raster>.rechts{grid-column:8/-1}}
/* Ohne Kino (reduzierte Bewegung) kein Pin: Bildzeile unter den Text statt darauf (Abnahme 12.10.) */
html:not(.kino) .zitat .pin{padding-bottom:3.5rem}
html:not(.kino) .zitat-hintergrund figcaption{bottom:.5rem}