/* ============================================================
   Sophie Bergmann Steuerberatung
   Klickdummy · Stand p.003 · gebaut gegen eyedee Kanon v2.1
   ============================================================ */

:root{
  /* Marke — Petrol aus stb_SB_Logofinal.pdf gemessen (300 dpi, Vollton) */
  --petrol:#00616B;
  --petrol-tief:#073B41;
  --tinte:#23302F;
  --grau:#5B6B6A;
  --kalk:#EEF1F0;
  --papier:#FFFFFF;
  --linie:#D5DEDC;
  --linie-stark:#A8BCBB;   /* sichtbarer Rahmen fuer Geist-Schaltflaechen */
  --dunst:#E2EAE9;         /* getoenter Grund, damit Kaesten nie weiss auf weiss stehen */

  /* Spacing-Tokens (Kanon 5.1) */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4rem;
  --sec-s:clamp(3rem,6vh,4.5rem);
  --sec-m:clamp(4.5rem,9vh,7rem);
  --sec-l:clamp(7rem,12vh,9rem);

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  --lh:1.65;
  --rand:clamp(1.25rem,5vw,4rem);
  --breite:1240px;
  --kopf:72px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--kalk);color:var(--tinte);
  font-family:var(--sans);font-size:clamp(1rem,.96rem + .18vw,1.0625rem);
  line-height:var(--lh);font-weight:400;-webkit-font-smoothing:antialiased;
}
.rahmen{position:relative}
section{clip-path:inset(-200vh 0)}          /* Kanon 5.10: Klemmung per clip-path */

img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:300;color:var(--petrol-tief);margin:0;
  letter-spacing:-.012em;line-height:1.12;text-wrap:balance}
h1{font-size:clamp(2.35rem,1.6rem + 3.2vw,4.2rem)}
h2{font-size:clamp(1.85rem,1.4rem + 1.9vw,3rem)}
h3{font-size:clamp(1.2rem,1.08rem + .5vw,1.45rem);line-height:1.25}
p{margin:0}

.wrap{width:100%;max-width:var(--breite);margin-inline:auto;padding-inline:var(--rand)}
.eng{max-width:820px}
.sek{padding-block:var(--sec-m)}
.sek--l{padding-block:var(--sec-l)}
.sek--hell{background:var(--papier)}

/* Signaturelement aus dem Logoaufbau: gesperrtes Label + auslaufende Haarlinie */
.marke{display:flex;align-items:center;gap:var(--sp-4);margin:0 0 var(--sp-5);
  font-family:var(--mono);font-size:.7rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--petrol)}
.marke::after{content:"";flex:1;height:1px;background:var(--linie)}
.marke--kurz::after{flex:0 0 clamp(2rem,8vw,5rem)}

.lead{font-size:clamp(1.08rem,1.02rem + .35vw,1.3rem);color:var(--tinte);max-width:52ch}
.klein{font-size:.9375rem;color:var(--grau)}
.zahl,.tel{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- Kopf ---------- */
.kopf{position:fixed;inset:0 0 auto;z-index:60;height:var(--kopf);
  background:rgba(238,241,240,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linie)}
.kopf__in{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);height:100%}
.logo{display:block;width:clamp(148px,20vw,190px)}
.nav{display:flex;align-items:center;gap:clamp(var(--sp-4),1.8vw,var(--sp-6))}
.nav a:not(.btn){font-size:.9375rem;text-decoration:none;color:var(--petrol-tief);
  padding:var(--sp-3) 0;border-bottom:1px solid transparent}
.nav a[aria-current="page"]:not(.btn){border-bottom-color:var(--petrol);color:var(--petrol)}
.nav__zugang{font-family:var(--mono);font-size:.78rem!important;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--petrol-tief)!important}

.burger{display:none;width:52px;height:52px;border:0;background:none;color:var(--petrol-tief);
  cursor:pointer;place-items:center;padding:0}
.burger span{display:block;width:24px;height:1px;background:currentColor;margin:5px 0;
  transition:transform .25s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:scaleX(0)}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:1000px){
  .burger{display:grid}
  .nav{position:fixed;inset:var(--kopf) 0 0;flex-direction:column;align-items:flex-start;
    justify-content:center;gap:var(--sp-2);
    padding:var(--sp-6) var(--rand) calc(var(--sp-8) + env(safe-area-inset-bottom));
    background:var(--petrol-tief);
    transform:translateY(-100%);transition:transform .32s cubic-bezier(.22,.61,.36,1);
    overflow-y:auto}
  .nav[data-offen]{transform:translateY(0)}
  .nav a{font-family:var(--serif);font-size:1.65rem;color:var(--papier);
    min-height:56px;display:flex;align-items:center;border:0}
  .nav a[aria-current="page"]{color:#9FD4D8;border:0}
  .nav__zugang{font-size:.78rem!important;color:#9FB6B8!important;min-height:48px!important}
  .nav .btn{margin-top:var(--sp-4);font-family:var(--sans);font-size:1rem;
    background:var(--papier);color:var(--petrol);border-color:var(--papier)}
  .nav__tel{margin-top:var(--sp-6);font-family:var(--mono)!important;
    font-size:1.0625rem!important;color:#C7D6D7!important;text-decoration:underline;
    text-underline-offset:.2em}
}
@media (min-width:1001px){.nav__tel{display:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:52px;padding:0 var(--sp-5);                 /* Kanon 5.3: 52 px */
  background:var(--petrol);color:var(--papier);text-decoration:none;
  font-size:.9375rem;font-weight:500;border:1px solid var(--petrol);border-radius:2px;
  cursor:pointer;font-family:var(--sans);
  transition:background .18s ease,color .18s ease}
.btn--geist{background:transparent;color:var(--petrol);border-color:var(--linie-stark);font-weight:600}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--petrol);outline-offset:3px}

@media (hover:hover) and (pointer:fine){            /* Kanon 5.20 */
  .nav a:not(.btn):hover{border-bottom-color:var(--petrol);color:var(--petrol)}
  .btn:hover{background:var(--petrol-tief);color:var(--papier)}
  .btn--geist:hover{background:var(--petrol);color:var(--papier);border-color:var(--petrol)}
  .petrol .btn:hover{background:var(--petrol-tief);color:var(--papier);border-color:var(--petrol-tief)}
  .karte__mehr:hover{text-decoration-thickness:2px}
  .fuss a:not(.btn):hover,.prosa a:not(.btn):hover{text-decoration-thickness:2px}
}

/* ---------- Bühne Startseite ---------- */
.buehne{padding-top:calc(var(--kopf) + var(--sec-s));padding-bottom:var(--sec-m)}
.buehne__gitter{display:grid;grid-template-columns:1fr;gap:var(--sp-8)}
@media (min-width:960px){
  .buehne__gitter{grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4.5rem);align-items:end}
}
.buehne h1{margin-bottom:var(--sp-5)}
.buehne__akt{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6)}

.bild{position:relative;background:var(--linie);aspect-ratio:4/5;overflow:hidden;border-radius:2px}
.bild img{width:100%;height:100%;object-fit:cover;filter:saturate(.12) contrast(1.04)}
.bild--breit{aspect-ratio:3/2}
.bild__cap{margin-top:var(--sp-3);font-family:var(--mono);font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--grau)}

/* ---------- Seitenkopf Unterseiten ---------- */
.seitenkopf{padding-top:calc(var(--kopf) + var(--sec-s));padding-bottom:var(--sec-s);
  border-bottom:1px solid var(--linie)}
.seitenkopf h1{margin-bottom:var(--sp-5);max-width:20ch}
.seitenkopf .lead{max-width:60ch}

/* ---------- Erreichbarkeit (Signaturmodul) ---------- */
.erreich{margin-top:var(--sp-7);border:1px solid var(--linie);background:var(--papier);
  border-radius:2px;padding:var(--sp-5);max-width:33rem}
.erreich__kopf{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.erreich__punkt{width:8px;height:8px;border-radius:50%;background:var(--petrol);flex:0 0 auto}
.erreich__punkt[data-zu]{background:var(--grau)}
.erreich__status{font-family:var(--mono);font-size:.8125rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--petrol)}
.erreich__punkt[data-zu] + .erreich__status{color:var(--grau)}
.erreich__zeit{margin-top:var(--sp-3);font-size:.9375rem;color:var(--tinte)}
.erreich__note{margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--linie);
  font-size:.875rem;color:var(--grau)}

/* ---------- Faktenband ---------- */
.band{border-block:1px solid var(--linie);background:var(--papier)}
.band ul{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4) var(--sp-6);
  list-style:none;margin:0;padding:var(--sp-5) 0}
@media (min-width:820px){.band ul{grid-template-columns:repeat(4,1fr)}}
.band li{font-family:var(--mono);font-size:.75rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--petrol-tief)}

/* ---------- Kartengitter ---------- */
.gitter{display:grid;gap:1px;background:var(--linie);border:1px solid var(--linie);
  border-radius:2px;overflow:hidden}
@media (min-width:800px){.gitter{grid-template-columns:1fr 1fr}}
.karte{background:var(--papier);padding:clamp(1.5rem,3.4vw,2.5rem);border:0}
.karte h3{margin-bottom:var(--sp-3)}
.karte p{color:var(--tinte);max-width:46ch}
.karte__label{font-family:var(--mono);font-size:.68rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--petrol);display:block;margin-bottom:var(--sp-4)}
.karte__label::after{content:"";display:block;width:28px;height:1px;background:var(--linie);
  margin-top:var(--sp-3)}
.karte__mehr{display:inline-block;margin-top:var(--sp-4);font-size:.9375rem;color:var(--petrol);
  text-decoration:underline;text-underline-offset:.18em}

/* ---------- Ablauf: echte Reihenfolge, deshalb nummeriert ---------- */
.ablauf{display:grid;gap:var(--sp-6);counter-reset:s}
@media (min-width:820px){.ablauf{grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,3rem)}}
.schritt{border-top:1px solid var(--linie);padding-top:var(--sp-5)}
.schritt::before{counter-increment:s;content:counter(s,decimal-leading-zero);
  display:block;font-family:var(--mono);font-size:.8125rem;color:var(--petrol);
  letter-spacing:.1em;margin-bottom:var(--sp-4)}
.schritt h3{margin-bottom:var(--sp-3)}

/* ---------- Zweispalter / Zitat ---------- */
.zitat{display:grid;gap:var(--sp-7);align-items:center}
@media (min-width:900px){.zitat{grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4.5rem)}}
blockquote{margin:0;font-family:var(--serif);font-weight:300;
  font-size:clamp(1.45rem,1.1rem + 1.5vw,2.25rem);line-height:1.28;
  color:var(--petrol-tief);text-wrap:balance}
.zitat cite{display:block;margin-top:var(--sp-5);font-family:var(--mono);font-style:normal;
  font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--grau)}

/* ---------- Fließtext ---------- */
.prosa p + p,.prosa ul + p,.prosa p + ul,.prosa h2,.prosa h3{margin-top:var(--sp-5)}
.prosa h2{margin-top:var(--sp-8)}
.prosa p,.prosa li{max-width:68ch}
.prosa a:not(.btn){color:var(--petrol);text-decoration:underline;text-underline-offset:.18em}  /* Kanon 5.29 */
.prosa ul{padding-left:1.15rem;margin:0}
.prosa li + li{margin-top:var(--sp-2)}
.prosa dl{margin:0}
.prosa dt{font-weight:500;color:var(--petrol-tief);margin-top:var(--sp-5)}
.prosa dd{margin:var(--sp-1) 0 0}

/* ---------- Detailliste Leistungen ---------- */
.leistung{border-top:1px solid var(--linie);padding-block:var(--sp-7)}
.leistung:last-child{border-bottom:1px solid var(--linie)}
.leistung__in{display:grid;gap:var(--sp-5)}
@media (min-width:880px){.leistung__in{grid-template-columns:.42fr .58fr;gap:clamp(2rem,5vw,4rem)}}
.leistung h2{font-size:clamp(1.5rem,1.25rem + 1.1vw,2.1rem)}

/* ---------- Ankerleiste ---------- */
.anker{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);margin-top:var(--sp-6);
  list-style:none;padding:0}
.anker a{font-family:var(--mono);font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--petrol);text-decoration:underline;text-underline-offset:.25em;
  display:inline-flex;align-items:center;min-height:44px}

/* ---------- Karriere ---------- */
.petrol{background:var(--petrol);color:var(--papier)}
.petrol h2,.petrol h3,.petrol .marke{color:var(--papier)}
.petrol .marke::after{background:rgba(255,255,255,.32)}
.petrol p,.petrol li{color:#E3EDEE}
.petrol .btn{background:var(--papier);color:var(--petrol);border-color:var(--papier)}
.petrol__in{display:grid;gap:var(--sp-6)}
@media (min-width:880px){.petrol__in{grid-template-columns:1.1fr .9fr;align-items:end;gap:var(--sp-8)}}

/* ---------- Kontakt ---------- */
.kontakt__gitter{display:grid;gap:var(--sp-7)}
@media (min-width:880px){.kontakt__gitter{grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem)}}
.zeiten{width:100%;border-collapse:collapse;font-size:.9375rem}
.zeiten th{text-align:left;font-weight:400;color:var(--grau);padding:var(--sp-3) 0;
  border-bottom:1px solid var(--linie);font-family:var(--sans)}
.zeiten td{text-align:right;padding:var(--sp-3) 0;border-bottom:1px solid var(--linie);
  font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--tinte)}
.zeiten tr[data-heute] th,.zeiten tr[data-heute] td{color:var(--petrol);font-weight:500}
.adresse{font-style:normal;line-height:1.8}
.adresse a:not(.btn){color:var(--petrol);text-decoration:underline;text-underline-offset:.18em}

/* ---------- Formular ---------- */
.form{display:grid;gap:var(--sp-5)}
.feld{display:grid;gap:var(--sp-2)}
.feld label{font-size:.875rem;font-weight:500;color:var(--petrol-tief)}
.feld input,.feld textarea,.feld select{
  font-family:var(--sans);font-size:1rem;color:var(--tinte);
  background:var(--papier);border:1px solid var(--linie);border-radius:2px;
  padding:var(--sp-3) var(--sp-4);min-height:52px;width:100%}
.feld textarea{min-height:140px;resize:vertical;line-height:1.55}
.feld--zeile{display:grid;gap:var(--sp-5)}
@media (min-width:640px){.feld--zeile{grid-template-columns:1fr 1fr}}
.pflicht{color:var(--petrol)}
.zustimmung{display:flex;gap:var(--sp-3);align-items:flex-start;font-size:.9375rem;
  color:var(--grau);min-height:52px}
.zustimmung input{width:22px;height:22px;flex:0 0 auto;margin-top:.28rem;accent-color:var(--petrol)}
.zustimmung a{color:var(--petrol);text-decoration:underline;text-underline-offset:.18em}
.formhinweis{display:none;border-left:2px solid var(--petrol);background:var(--dunst);
  padding:var(--sp-4) var(--sp-5);font-size:.9375rem;color:var(--tinte)}
.formhinweis[data-an]{display:block}

/* ---------- Entwurfshinweis ---------- */
.hinweis{border:0;border-left:2px solid var(--petrol);background:var(--dunst);border-radius:2px;
  padding:var(--sp-5);font-size:.9375rem;color:var(--tinte);max-width:68ch}
.hinweis strong{color:var(--petrol-tief);font-weight:600}

/* ---------- Fuß ---------- */
.fuss{background:var(--petrol-tief);color:#C7D6D7;padding-block:var(--sec-s)}
.fuss__gitter{display:grid;gap:var(--sp-6)}
@media (min-width:760px){.fuss__gitter{grid-template-columns:1.4fr 1fr 1fr;gap:var(--sp-7)}}
.fuss h2{font-size:1rem;font-family:var(--mono);font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:#A6C6C9;margin-bottom:var(--sp-3)}
.fuss a:not(.btn){color:#DCE8E9;text-decoration:underline;text-underline-offset:.18em;
  display:inline-block;min-height:44px;line-height:44px}
.fuss ul{list-style:none;margin:0;padding:0;font-size:.9375rem}
.fuss address{font-style:normal;font-size:.9375rem;line-height:1.9;color:#C7D6D7}
.fuss__unten{margin-top:var(--sp-7);padding-top:var(--sp-5);
  border-top:1px solid rgba(255,255,255,.16);display:flex;flex-wrap:wrap;
  gap:var(--sp-3) var(--sp-6);align-items:center;justify-content:space-between}
.credit{margin:0;font-size:.875rem;color:#C7D6D7}
.credit .heart{color:#D70E54}                      /* Kanon 1.2 */
.credit sup{font-size:.62em;vertical-align:super;line-height:0}

/* ---------- Barrierefreiheits-Schalter (Kanon 5.4) ---------- */
.a11y-btn{position:fixed;right:16px;bottom:16px;z-index:70;width:52px;height:52px;
  border-radius:50%;border:1px solid var(--linie);background:var(--papier);
  color:var(--petrol);display:grid;place-items:center;cursor:pointer;
  box-shadow:0 2px 14px rgba(7,59,65,.14);margin-bottom:env(safe-area-inset-bottom)}
.a11y-btn svg{width:24px;height:24px}
.a11y-panel{position:fixed;right:16px;bottom:80px;z-index:70;width:min(300px,calc(100vw - 32px));
  background:var(--papier);border:1px solid var(--linie);border-radius:2px;
  padding:var(--sp-5);display:none;box-shadow:0 8px 30px rgba(7,59,65,.16)}
.a11y-panel.open{display:block}
.a11y-panel h2{font-size:1.05rem;margin-bottom:var(--sp-4)}
.a11y-row{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);
  min-height:44px;font-size:.9375rem}
.a11y-panel input[type=checkbox]{width:22px;height:22px;accent-color:var(--petrol)}
body.a11y-kontrast{--tinte:#0B1A1C;--grau:#33454A;--linie:#7E9497;--kalk:#FFFFFF}

/* ---------- Bewegung (Kanon 13.4/13.5) ---------- */
.reveal{opacity:1;transform:translateY(14px);
  transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.reveal.is-in{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
  .reveal{transform:none;transition:none}
  html{scroll-behavior:auto}
  .burger span{transition:none}
  .nav{transition:none}
}
body.a11y-motion .reveal{transform:none;transition:none}

[id]{scroll-margin-top:clamp(5rem,11vh,6.5rem)}      /* Kanon 5.26 */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:80;background:var(--petrol);
  color:var(--papier);padding:var(--sp-3) var(--sp-5)}
.skip:focus{left:var(--sp-4);top:var(--sp-4)}

/* ============================================================
   Ergaenzung p.004 — Icons, Bildrollen, scrollgebundene Bewegung
   ============================================================ */

/* ---------- Icons in den Leistungskarten ----------
   Duenne Konturen, gleiche Strichstaerke wie die Haarlinie der Wortmarke.
   Ein Icon je Leistung; keine Dekoration ohne Bezeichnung. */
.karte__icon{display:block;width:44px;height:44px;color:var(--petrol);margin-bottom:var(--sp-4)}
.karte__icon svg{width:100%;height:100%;display:block}
.karte__label{margin-bottom:var(--sp-3)}
.karte__label::after{display:none}
.leistung__marke{display:flex;align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-4)}
.leistung__marke .karte__icon{margin:0;flex:0 0 auto}

/* ---------- Bildrollen ----------
   Das Portraet ist ein Beleg, kein Buehnenmotiv. Es steht klein
   neben der Aussage, nicht anstelle von ihr. */
.portraet{display:block;width:clamp(96px,14vw,132px);aspect-ratio:1/1;border-radius:50%;overflow:hidden;
  border:1px solid var(--linie);flex:0 0 auto;background:var(--dunst)}
.portraet img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.person{display:flex;align-items:center;gap:var(--sp-5);margin-bottom:var(--sp-6)}
.person__name{font-family:var(--mono);font-size:.72rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--grau);margin-top:var(--sp-2)}
.person__name strong{display:block;font-family:var(--serif);font-size:1.5rem;font-weight:300;
  letter-spacing:-.01em;text-transform:none;color:var(--petrol-tief);margin-bottom:var(--sp-1)}

.portraet--gross{width:min(320px,60vw);border-radius:2px;aspect-ratio:4/5}
.portraet--gross img{object-position:50% 18%}

/* ---------- Bildplatzhalter ----------
   Bis die Motive liegen, steht hier eine benannte Flaeche statt eines
   gebrochenen Bildes. Kein graues Rechteck ohne Aussage. */
.platzhalter{position:relative;display:grid;place-items:center;background:var(--dunst);
  border:1px solid var(--linie);border-radius:2px;overflow:hidden;isolation:isolate}
.platzhalter::before{content:"";position:absolute;inset:auto var(--sp-6) 38% var(--sp-6);
  height:1px;background:var(--linie-stark)}
.platzhalter span{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grau);text-align:center;padding:0 var(--sp-5);
  transform:translateY(1.4rem)}
/* Ueberhoehe, damit der Parallax-Weg (max. ±28 px) nie die Kante freilegt */
.platzhalter img{position:absolute;left:0;top:-8%;width:100%;height:116%;
  object-fit:cover;z-index:1}
.platzhalter--breit{aspect-ratio:16/9}
.platzhalter--quer{aspect-ratio:3/2}
.platzhalter--hoch{aspect-ratio:3/4}

/* ---------- Bildband ----------
   Ein ruhiges, breites Motiv statt eines grossen Gesichts. */
.bildband{padding-block:0}
.bildband .wrap{padding-inline:0}
@media (min-width:1240px){.bildband .wrap{padding-inline:var(--rand)}}

/* ---------- Scrollgebundene Bewegung (Kanon 12) ----------
   Zielwerte kommen aus dem Scroll, ein Tiefpass folgt ihnen traege nach.
   Gemessene Kennwerte des Kanons: Lerp 0,075 pro Frame, 90 % der Strecke
   in rund 500 ms, eingeschwungen nach 1,5–2 s. */
.drift{will-change:transform}
.zieh{display:block;width:100%;height:1px;overflow:visible;
  margin-block:var(--sp-6)}
.zieh line{stroke:var(--linie-stark);stroke-width:1;
  stroke-dasharray:1;stroke-dashoffset:1}
.zieh--kraeftig line{stroke:var(--petrol)}

@media (prefers-reduced-motion:reduce){
  .drift{transform:none!important}
  .zieh line{stroke-dashoffset:0!important}
}
body.a11y-motion .drift{transform:none!important}
body.a11y-motion .zieh line{stroke-dashoffset:0!important}

/* ---------- Schaltflaechen gegen Vererbung absichern (Kanon 5.2) ----------
   Anlass p.005: .nav a und .prosa a haben die Textfarbe der Schaltflaeche
   ueberschrieben — Petroltief bzw. Petrol auf Petrolgrund, Kontrast 1,71
   und 1,00. Die Schrift war unlesbar bzw. unsichtbar. Die Selektoren sind
   auf :not(.btn) geschoert; dieser Block ist der zweite Riegel, damit ein
   spaeter ergaenzter Element-Selektor denselben Fehler nicht wiederholt. */
a.btn,button.btn{color:var(--papier);text-decoration:none;border-bottom:0;line-height:1}
a.btn--geist{color:var(--petrol)}
.petrol a.btn,.petrol button.btn{color:var(--petrol)}
/* Kopfzeile: Petrolgrund, weisse Schrift. Im Mobiloverlay dreht sich das um. */
.nav a.btn{color:var(--papier)}
@media (max-width:1000px){.nav a.btn{color:var(--petrol)}}