/* ==========================================================================
   bmd-unterseiten.css — Sektionen, die es nur auf Unterseiten gibt
   Stand 02.09.2026

   bmd-site.css bleibt unangetastet. Was die Startseite bereits mitbringt
   (.kick, .lead-big, .sec-head, .btn, .arrow-link, .screen, .rv, .sw,
   .process, .steps, .pricing, .faq, .closing, das Formular) wird hier NICHT
   wiederholt — diese Datei ergaenzt ausschliesslich, was in der Leitfassung
   der Unterseiten neu hinzukommt.

   Reihenfolge im TypoScript: bmd-fonts -> bmd-tokens -> bmd-site ->
   bmd-unterseiten.
   ========================================================================== */

/* ==========================================================================
   1 · Seiten-Held — ruhige Buehne (kein Video, kein Ken-Burns)
   Unterschied zur Startseite ist Absicht: dort faehrt die Buehne Wort fuer
   Wort auf, hier kommt die Zeile als ein Block. Bewegt wird nur der
   Mint-Marker — ein Signal, keine Show. Die H1 ist eine Stufe kleiner als
   auf der Startseite, bleibt aber >= Faktor 1,25 ueber H2.
   ========================================================================== */
.page-hero{
  position:relative;
  background:
    radial-gradient(115% 82% at 10% 0%, oklch(0.33 0.058 195 / 0.52), transparent 62%),
    var(--tinte-deep);
}
.page-hero-grid{
  display:grid; gap:clamp(2.25rem, 5vw, 4rem);
  padding-block:clamp(2.5rem, 5.5vw, 4.25rem) clamp(2.75rem, 6vw, 4.5rem);
  align-content:center;
}
.page-hero-copy{ display:grid; gap:1.45rem; justify-items:start; align-content:center; }

/* Brotkrumen: Links bleiben Links, die aktuelle Seite ist Text. */
.crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:0.55rem;
  font:600 var(--fs-kick)/1.4 var(--fb);
  letter-spacing:0.09em; text-transform:uppercase;
  color:oklch(0.975 0.006 190 / 0.5);
}
.crumbs a{ color:oklch(0.975 0.006 190 / 0.72); text-decoration:none; }
.crumbs a:hover{ color:var(--mint-hell); text-decoration:underline; text-underline-offset:0.3em; }
.crumbs .here{ color:oklch(0.975 0.006 190 / 0.5); }

.page-hero h1{
  color:var(--paper); max-width:13.5em;
  font-size:clamp(2.6rem, 6.6vw, 4.4rem);
}
/* Marker unter einem EINZELNEN Wort: als inline-block bricht er nie um,
   und ein Wort passt auch auf 320px noch in die Zeile. */
.mark{ position:relative; display:inline-block; color:var(--mint-hell); }
.mark::after{
  content:""; position:absolute; left:0.02em; right:0.02em; bottom:0.015em;
  height:0.075em; border-radius:2px;
  background:var(--mint-tief);
  transform-origin:left center;
}
.page-hero-sub{
  max-width:37rem;
  font-size:clamp(1.05rem, 1.5vw, 1.2rem);
  color:oklch(0.975 0.006 190 / 0.84);
}

.page-hero-media{ position:relative; min-width:0; }
.shot{ margin:0; }
.shot img{
  width:100%; border-radius:var(--radius);
  aspect-ratio:3/2; object-fit:cover;
  box-shadow:0 30px 70px oklch(0.14 0.025 198 / 0.5);
}
.shot-cap{
  margin-top:0.85rem;
  font:600 var(--fs-kick)/1.4 var(--fb); letter-spacing:0.09em; text-transform:uppercase;
  color:oklch(0.975 0.006 190 / 0.5);
}
.page-hero-proof{
  border-top:1px solid oklch(0.975 0.006 190 / 0.14);
  padding-top:1.4rem;
  color:oklch(0.975 0.006 190 / 0.78);
  font-size:var(--fs-s);
  max-width:46rem;
}
@media (min-width:768px){
  .page-hero-grid{ grid-template-columns:1.06fr 0.94fr; align-items:center; }
  .page-hero-proof{ grid-column:1 / -1; }
}

/* Ruhiger Auftakt: ein Fade-up je Zeile, danach zieht der Marker nach. */
@media (prefers-reduced-motion: no-preference){
  .js .page-hero-copy > *, .js .page-hero-media, .js .page-hero-proof{
    opacity:0; transform:translateY(20px);
    animation:fadeUp 0.9s var(--eq) forwards; animation-delay:var(--d, 0s);
  }
  @keyframes fadeUp{ to{ opacity:1; transform:none; } }
  .js .page-hero .mark::after{ transform:scaleX(0); animation:markIn 0.6s var(--eq) forwards 0.8s; }
  @keyframes markIn{ to{ transform:scaleX(1); } }
}

/* ==========================================================================
   2 · Leistungsumfang — Tafel statt Kartenraster
   Bewusst KEIN Kachelgitter: eine Beschreibungsliste, Begriff links,
   Erklaerung rechts, getrennt durch Haarlinien. Liest sich wie ein
   Leistungsverzeichnis und nicht wie vier gleiche Karten. Der Akzent
   haengt als eigenes Sand-Panel darunter, damit die Spaltenkante der
   Tafel ungestoert durchlaeuft.
   ========================================================================== */
.scope{ padding-block:var(--sec-y) clamp(3rem, 7vw, 5.5rem); }
.scope-list{ display:grid; max-width:62rem; }
.scope-row{
  display:grid; gap:0.45rem clamp(1.5rem, 4vw, 3rem);
  padding-block:clamp(1.35rem, 3vw, 2rem);
  border-top:1px solid oklch(0.300 0.050 196 / 0.16);
}
.scope-row:last-child{ border-bottom:1px solid oklch(0.300 0.050 196 / 0.16); }
.scope-row dt{
  font:650 clamp(1.15rem, 1.7vw, 1.4rem)/1.2 var(--fd);
  letter-spacing:-0.008em; color:var(--tinte);
  text-wrap:balance;
}
.scope-row dd{ margin:0; max-width:38rem; }
@media (min-width:768px){
  .scope-row{ grid-template-columns:15rem 1fr; align-items:baseline; }
}

.scope-note{
  margin-top:clamp(2rem, 4vw, 3rem);
  display:grid; gap:0.9rem; justify-items:start;
  background:var(--sand);
  background:color-mix(in oklab, var(--sand) 74%, var(--paper));
  border:1px solid oklch(0.300 0.050 196 / 0.14);
  border-radius:var(--radius);
  padding:clamp(1.6rem, 3.4vw, 2.6rem);
}
.scope-note-lead{
  font:650 clamp(1.3rem, 2.2vw, 1.75rem)/1.15 var(--fd);
  letter-spacing:-0.012em; color:var(--tinte);
  max-width:24em;
}
.scope-note p{ max-width:38rem; }

/* ==========================================================================
   3 · Fach-Argument — dunkle Zwischen-Buehne
   Andere Komposition als die Preis-Buehne (die ist asymmetrisch
   zweispaltig): hier laeuft die Begruendung in einer Spalte, darunter liegt
   eine dreiteilige Merkmal-Leiste ueber die volle Breite.
   ========================================================================== */
.t3{
  padding-block:var(--sec-y);
  background:
    radial-gradient(100% 85% at 92% 0%, oklch(0.32 0.056 195 / 0.5), transparent 62%),
    var(--tinte-deeper);
}
.t3 h2{ color:var(--paper); }
.t3-body{ max-width:44rem; }
.t3 p{ color:oklch(0.975 0.006 190 / 0.85); max-width:38rem; }
.t3-more{ margin-top:1.75rem; }

.t3-marks{
  list-style:none; display:grid; gap:0;
  margin-top:clamp(2.5rem, 5vw, 3.75rem);
}
.t3-marks li{
  border-top:1px solid oklch(0.975 0.006 190 / 0.16);
  padding-block:1.05rem;
  display:grid; grid-template-columns:auto 1fr; gap:0.85rem;
  align-items:baseline;
  font-size:var(--fs-s); line-height:1.6;
  color:oklch(0.975 0.006 190 / 0.8);
}
.t3-marks li::before{
  content:""; width:1.15rem; height:2px; border-radius:1px;
  background:var(--mint-hell);
  transform:translateY(-0.3em);
}
.t3-marks strong{ color:var(--paper); font-weight:650; }
@media (min-width:768px){
  .t3-marks{ grid-template-columns:repeat(3, 1fr); gap:0 clamp(1.75rem, 3.5vw, 3rem); }
}

/* ==========================================================================
   4 · Belege — zwei Referenzen, bewusst ungleich
   Kein Sticky-Showcase auf der Unterseite: zwei Faelle nebeneinander,
   der zweite schmaler und tiefer angesetzt, damit keine Kartenkante
   die andere spiegelt.
   ========================================================================== */
.proof{ padding-block:var(--sec-y) clamp(3rem, 7vw, 5.5rem); }
.proof-grid{ display:grid; gap:clamp(2.25rem, 5vw, 3rem); }
.case{ display:grid; gap:0.9rem; align-content:start; justify-items:start; min-width:0; }
.case-media{ border-radius:var(--radius); overflow:hidden; width:100%; }
.case-media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:3/2; }
.case-kick{
  font:600 var(--fs-kick)/1.3 var(--fb);
  letter-spacing:0.09em; text-transform:uppercase;
  color:var(--mint-tief); margin-top:0.35rem;
}
.case h3{ font-size:clamp(1.35rem, 2.2vw, 1.85rem); }
.case p{ max-width:34rem; }
.case-tags{
  list-style:none; display:flex; flex-wrap:wrap; gap:0.4rem 1.35rem;
  margin-top:0.35rem; padding-top:0.95rem; width:100%;
  border-top:1px solid oklch(0.300 0.050 196 / 0.16);
  font:600 var(--fs-s)/1.5 var(--fb); letter-spacing:0.01em;
  color:var(--petrol);
}
.case-tags li{ display:flex; align-items:center; gap:0.5rem; }
.case-tags li::before{
  content:""; width:0.35rem; height:0.35rem; border-radius:50%;
  background:var(--mint-tief); flex:none;
}
/* Verweis vom Beleg auf den Projektbericht. Steht UNTER den Schlagworten,
   damit die Reihenfolge stimmt: erst was es war, dann wo es nachzulesen ist. */
.case-more{ margin-top:1.15rem; }
.proof-foot{ margin-top:clamp(2.25rem, 4.5vw, 3.25rem); }
@media (min-width:768px){
  .proof-grid{ grid-template-columns:repeat(12, minmax(0, 1fr)); align-items:start; }
  .case-a{ grid-column:span 7; }
  .case-b{ grid-column:span 5; margin-top:clamp(2rem, 5vw, 4.5rem); }
  .case-b .case-media img{ aspect-ratio:4/3; }
}
@media (hover:hover) and (prefers-reduced-motion: no-preference){
  .case-media{ transition:transform 0.45s var(--eq); }
  .js .case-media:hover{ --img-s:1.04; transform:translateY(-4px); }
}
@media (max-width:767.98px){
  .case-b{ margin-top:0; }
}

/* ==========================================================================
   5 · Nachtraege zu bmd-site.css — nur additiv, ohne Eingriff dort
   ========================================================================== */

/* Auf der Startseite schliesst die Frage-Sektion eine bereits geoeffnete
   Licht-Buehne; ihr oberer Abstand ist deshalb in bmd-site.css bewusst
   verkuerzt. Steht sie auf einer Unterseite als ERSTE Sektion in einer
   eigenen Buehne, fehlt genau dieser Abstand. Der Selektor greift daher nur
   im Erst-Kind-Fall und laesst die Startseite unberuehrt. */
.screen > .faq:first-child{ padding-top:var(--sec-y); }

/* Prosa-Antworten duerfen einen Link tragen (z. B. auf die Wartung). */
.faq-item a{
  color:var(--mint-tief); font-weight:600;
  text-decoration:underline; text-underline-offset:0.25em; text-decoration-thickness:1.5px;
}

/* ==========================================================================
   9 · Regionalseite und Case — Stand 02.09.2026
   Ergaenzt bmd-unterseiten.css um die Sektionen der Blocks bmd_story,
   bmd_shots, bmd_lineup und bmd_duo sowie um die Case-Variante des
   Seiten-Helds. bmd-site.css bleibt unangetastet.

   Zur Benennung: die Vorlagen nutzen dreimal denselben Klassennamen .proof
   fuer drei verschiedene Dinge (Leistungsseite: Referenzkarten, Regionalseite:
   Beweisbuehne, Case: Ergebniskarten). Die Referenzkarten stehen bereits in
   Abschnitt 5 dieser Datei. Die beiden anderen heissen hier deshalb .shots
   und .case-outcome/.outcome-*. Gleiches gilt fuer .shot (in Abschnitt 1
   bereits die Hero-Kachel) — die Screenshot-Kachel heisst .shotfig.
   ========================================================================== */

/* --- 9.1 Erzaehlabschnitt (bmd_story) ------------------------------------ */
.why{ padding-block:var(--sec-y); }
.why-grid{ display:grid; gap:clamp(2rem, 4.5vw, 3.75rem); align-items:start; }
.why-copy{ display:grid; gap:1.15rem; }
.why-copy p{ max-width:36rem; }
.why-fig{ margin:0; display:grid; gap:0.85rem; }
.why-fig .rv-img{ border-radius:var(--radius); overflow:hidden; }
.why-fig img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.why-cap{
  font:600 var(--fs-kick)/1.5 var(--fb);
  letter-spacing:0.08em; text-transform:uppercase;
  color:oklch(0.300 0.050 196 / 0.55);
}
/* Wege-Liste: Achse mit Punkten — keine Akzentbalken, keine Karten.
   Mobil senkrecht an einer 1px-Achse, ab 900px als dreispaltige Zeile
   unter Text und Bild. */
.wege{
  list-style:none; margin-top:0.75rem;
  border-left:1px solid oklch(0.300 0.050 196 / 0.22);
}
.wege li{ position:relative; padding:0 0 1.5rem 1.7rem; }
.wege li:last-child{ padding-bottom:0; }
.wege li::before{
  content:""; position:absolute; left:-4.5px; top:0.5em;
  width:9px; height:9px; border-radius:50%;
  background:var(--mint-tief);
}
.wege h3{ font-size:1.1rem; margin-bottom:0.3rem; }
.wege p{ font-size:var(--fs-s); line-height:1.6; max-width:32rem; }
@media (min-width:900px){
  .why-grid{ grid-template-columns:1.08fr 0.92fr; align-items:start; }
  .why-fig{ margin-top:0.4rem; }
  .wege{
    grid-column:1 / -1;
    margin-top:clamp(2.25rem, 4vw, 3.25rem);
    border-left:0;
    display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
    gap:clamp(1.5rem, 3vw, 2.75rem);
  }
  .wege li{ padding:1.4rem 0 0; border-top:1px solid oklch(0.300 0.050 196 / 0.22); }
  .wege li::before{ left:0; top:-5px; }
  .wege p{ max-width:none; }
}

/* --- 9.2 Screenshot-Buehne mit Faktenpanel (bmd_shots, Variante panel) ---- */
.shots{
  padding-block:var(--sec-y);
  background:
    radial-gradient(105% 80% at 12% 6%, oklch(0.33 0.058 195 / 0.5), transparent 62%),
    var(--tinte-deep);
}
.shots h2{ color:var(--paper); }
.shots .lead{ color:oklch(0.975 0.006 190 / 0.82); max-width:38rem; }
.shots-grid{ display:grid; gap:clamp(2rem, 4vw, 3.25rem); align-items:start; }
.shots-figs{ display:grid; gap:clamp(0.75rem, 1.6vw, 1.1rem); }
/* Zwei-Zeilen-Raster: Bild oben (nimmt die Resthoehe), Unterschrift unten.
   Ohne das wuerde das Bild bei height:100% die Unterschrift aus dem
   overflow:hidden herausdruecken. */
.shotfig{
  margin:0; border-radius:var(--radius); overflow:hidden;
  border:1px solid oklch(0.975 0.006 190 / 0.14);
  background:var(--tinte-deeper);
  display:grid; grid-template-rows:1fr auto;
}
/* Die Aufnahme behaelt ihr Seitenverhaeltnis — --ar kommt aus FAL an der Figur
   an (shots/templates/frontend.fluid.html). Vorher standen hier zwei harte
   Formate nach Position: Slot a und c auf 3/2, Slot b auf volle Spaltenhoehe.
   Ein Hochformat in Slot a verlor damit knapp die Haelfte seiner Hoehe, ein
   Querformat in Slot b fast seine ganze Breite. object-fit:cover bleibt, weil
   es bei gleichem Verhaeltnis nichts wegnimmt und die Rundung abfaengt. */
.shots-figs .shotfig img{
  width:100%; height:auto; min-height:0;
  aspect-ratio:var(--ar, 3/2);
  object-fit:cover; object-position:50% 0;
}
/* Einzige Ausnahme, und die ist gewollt: der seitenlange Mitschnitt einer
   Website (mindestens doppelt so hoch wie breit). Er bekommt ein festes
   Fenster und zeigt den Kopf der Seite — seine volle Laenge wuerde den
   Abschnitt sprengen. Frueher galt das fuer alles in Slot b. */
.shots-figs .is-lang img{ aspect-ratio:auto; height:100%; }
.shots-figs .shotfig figcaption{
  padding:0.8rem 1.1rem 0.95rem;
  font:600 var(--fs-kick)/1.4 var(--fb);
  letter-spacing:0.08em; text-transform:uppercase;
  color:oklch(0.975 0.006 190 / 0.6);
  background:oklch(0.975 0.006 190 / 0.04);
}
.shots-panel{
  border:1px solid oklch(0.700 0.130 182 / 0.42);
  border-radius:var(--radius);
  padding:clamp(1.6rem, 3.2vw, 2.5rem);
  display:grid; gap:1.1rem; align-content:start;
}
.shots-panel h3{ color:var(--paper); }
.shots-panel p{ color:oklch(0.975 0.006 190 / 0.82); font-size:var(--fs-s); line-height:1.65; }
.shots-facts{ list-style:none; display:grid; gap:0.7rem; font-size:var(--fs-s); }
.shots-facts li{
  display:grid; grid-template-columns:auto 1fr; gap:0.7rem; align-items:start;
  color:oklch(0.975 0.006 190 / 0.85);
}
.shots-facts li::before{
  content:""; width:0.45rem; height:0.45rem; margin-top:0.55em;
  border-radius:50%; background:var(--mint-hell);
}
@media (min-width:768px){
  /* Zwei Spalten: links stapeln die Querformate, rechts steht das Hochformat
     ueber beide Reihen. Welche Figur wohin kommt, entscheidet ihre Form —
     nicht mehr ihre Position. Sonst landete auf /business-portraits das
     einzige Hochformat in der breiten Reihe und wurde halbiert. */
  .shots-figs{ grid-template-columns:repeat(12, minmax(0,1fr)); }
  .shots-figs > .shotfig{ grid-column:1 / 8; }
  .shots-figs > .is-hoch{ grid-column:8 / -1; grid-row:1 / 3; align-self:start; }
  /* Der seitenlange Mitschnitt bleibt schmal und fuellt die Spalte wie bisher —
     dafuer war diese Flaeche gebaut. */
  .shots-figs > .is-lang{ grid-column:9 / -1; align-self:stretch; }

  /* Drei Querformate, kein Hochformat: die rechte Spalte bliebe leer. Dann
     fuehrt das erste Bild breit, die beiden anderen teilen sich die Reihe
     darunter. Betrifft heute /webdesign/sinsheim. */
  .shots-figs:not(:has(> .is-hoch)) > .shotfig{ grid-column:span 6; }
  .shots-figs:not(:has(> .is-hoch)) > .shotfig:first-child{ grid-column:1 / -1; }
}
@media (min-width:1060px){
  .shots-grid{ grid-template-columns:1.55fr 1fr; }
}

/* --- 9.3 Bildstrecke (bmd_shots, Variante strip) ------------------------- */
.shots--strip{
  background:
    radial-gradient(88% 62% at 88% 4%, oklch(0.32 0.056 195 / 0.42), transparent 62%),
    var(--tinte-deeper);
}
.strip-grid{
  display:grid; gap:clamp(0.85rem, 1.8vw, 1.25rem);
  margin-top:clamp(2rem, 4.5vw, 3rem);
}
.shots--strip .shotfig{
  border:0; background:none; border-radius:0; overflow:visible;
  display:flex; flex-direction:column; gap:0.7rem;
}
/* Die Lightbox aus bmd-site.js bindet an .fb-tile — die Kachel traegt die
   Klasse deshalb weiter, ihr Baender-Aussehen wird hier zurueckgesetzt. */
.strip-grid .fb-tile{
  flex:0 1 auto; height:auto; aspect-ratio:auto;
  border-radius:var(--radius); overflow:hidden;
  border:1px solid oklch(0.975 0.006 190 / 0.14);
  scroll-snap-align:none;
}
/* Die Kachel bekommt das echte Seitenverhaeltnis der Aufnahme — --ar kommt
   aus FAL an die Figur (shots/templates/frontend.fluid.html). Vorher stand
   hier hart 3/2, und ein Hochformat verlor darin ueber die Haelfte seiner
   Hoehe. object-fit:cover bleibt: bei gleichem Verhaeltnis nimmt es nichts
   weg und faengt die Rundung ab. */
.strip-grid .fb-tile img{ width:100%; aspect-ratio:var(--ar, 3/2); object-fit:cover; object-position:50% 0; }
.shotfig-cap{
  font:600 var(--fs-kick)/1.5 var(--fb);
  letter-spacing:0.08em; text-transform:uppercase;
  color:oklch(0.975 0.006 190 / 0.58);
}
/* Einzige Ausnahme vom echten Verhaeltnis, und die ist gewollt: der
   seitenlange Mitschnitt einer Website (is-lang, mindestens doppelt so hoch
   wie breit). Einspaltig wuerde er die halbe Seite fressen — er behaelt ein
   festes Fenster und zeigt den Kopf der Seite, die ganze Laenge gibt es in
   der Lightbox. Vorher galt das fuer jedes Hochformat. */
@media (max-width:819px){
  .strip-grid > .is-lang .fb-tile img{ aspect-ratio:3/4; }
}
@media (min-width:820px){
  .strip-grid{ grid-template-columns:repeat(12, minmax(0,1fr)); align-items:start; }
  /* Grundfall: zwei Kacheln je Reihe. Traegt zwei und vier Bilder ohne
     Sonderregel — vier hatten vorher gar keine und landeten als
     Briefmarke in einer eigenen Reihe. */
  .strip-grid > .shotfig{ grid-column:span 6; }
  /* Genau drei ohne hohes Bild: zwei oben, das dritte breit darunter.
     Sonst bliebe unten rechts ein Loch. */
  .strip-grid:not(:has(> .is-hoch)):has(> .shotfig:nth-child(3):last-child) > .shotfig:nth-child(3){
    grid-column:1 / -1;
  }

  /* Ein Hochformat ist hoch — also darf es nicht so breit sein wie ein
     Querformat, sonst haette seine Reihe die doppelte Hoehe. Es teilt die
     Reihe im Verhaeltnis 4 zu 8 mit seinem Nachbarn: bei 2:3 gegen 3:2
     enden beide Kacheln auf rund 40 px gleich hoch. Der Nachbar ist die
     Kachel, die mit ihm in der Reihe steht — vor ihm, wenn das Hochformat
     an gerader Stelle sitzt, sonst hinter ihm. */
  .strip-grid > .is-hoch:not(.is-lang){ grid-column:span 4; }
  .strip-grid > .is-hoch:not(.is-lang):nth-child(odd) + .shotfig:not(.is-hoch){ grid-column:span 8; }
  .strip-grid > .shotfig:not(.is-hoch):has(+ .is-hoch:not(.is-lang):nth-child(even)){ grid-column:span 8; }

  /* Genau drei, und das Hochformat steht hinten: allein in seiner Reihe
     bliebe daneben ein Loch. Dann stapeln sich die Querformate links und
     das Hochformat steht rechts ueber beide Reihen. Die 6/6-Teilung ist
     dabei kein Zufall — zwei gestapelte 3:2-Kacheln und ein 2:3-Bild enden
     bei gleicher Breite fast auf derselben Hoehe.
     Betrifft /portfolio/mischke-finanzberatung. */
  .strip-grid:has(> .shotfig:nth-child(3):last-child):has(> .is-hoch:not(.is-lang)) > .shotfig{
    grid-column:1 / 7;
  }
  .strip-grid:has(> .shotfig:nth-child(3):last-child):has(> .is-hoch:not(.is-lang)) > .is-hoch{
    grid-column:7 / -1; grid-row:1 / 3;
  }

  /* Der seitenlange Mitschnitt behaelt seine schmale Spalte ueber beide
     Reihen und sein festes Fenster — dafuer war diese Flaeche gebaut.
     Betrifft /portfolio/hof-apotheken. */
  .strip-grid:has(> .is-lang){ align-items:stretch; }
  .strip-grid:has(> .is-lang) > .shotfig{ grid-column:1 / 8; }
  .strip-grid:has(> .is-lang) > .is-lang{ grid-column:8 / -1; grid-row:1 / 3; }
  .strip-grid > .is-lang .fb-tile{ flex:1 1 auto; min-height:0; position:relative; }
  .strip-grid > .is-lang .fb-tile img{ position:absolute; inset:0; height:100%; aspect-ratio:auto; }
}

/* --- 9.4 Leistungszeilen (bmd_lineup, Variante offer) -------------------- */
.offer{ padding-block:var(--sec-y); }
.offer-list{ list-style:none; }
.offer-row{
  position:relative; display:grid; gap:0.45rem;
  padding-block:clamp(1.5rem, 3vw, 2.25rem);
  border-top:1px solid oklch(0.300 0.050 196 / 0.18);
  transition:transform 0.35s var(--eq);
  will-change:transform;
}
.offer-row:last-child{ border-bottom:1px solid oklch(0.300 0.050 196 / 0.18); }
.offer-row:hover{ transform:translateX(6px); }
.offer-row:focus-within{ outline:2px solid var(--focus); outline-offset:6px; border-radius:6px; }
.offer-kick{
  font:600 var(--fs-kick)/1.4 var(--fb);
  letter-spacing:0.08em; text-transform:uppercase;
  color:var(--mint-tief);
}
.offer-row h3 a{ text-decoration:none; color:inherit; }
.offer-row h3 a:focus-visible{ outline:none; }
.offer-row h3 a::after{ content:""; position:absolute; inset:0; }
.offer-row p{ font-size:var(--fs-s); line-height:1.65; max-width:38rem; }
.offer-arr{
  color:var(--mint-tief); pointer-events:none;
  transition:transform 0.35s var(--eq);
}
.offer-row:hover .offer-arr{ transform:translateX(6px); }
@media (min-width:768px){
  .offer-row{
    grid-template-columns:minmax(9rem, 14rem) 1fr auto;
    gap:0.5rem 2.5rem; align-items:start;
  }
  .offer-kick{ padding-top:0.35rem; }
  .offer-arr{ align-self:center; }
}

/* --- 9.5 Einzugsgebiet (bmd_lineup, Variante area) ----------------------- */
.area{ padding-block:var(--sec-y); background:var(--tinte-deeper); }
.area h2{ color:var(--paper); }
.area .lead{ color:oklch(0.975 0.006 190 / 0.8); max-width:40rem; }
.area-grid{
  display:grid; gap:1px;
  background:oklch(0.975 0.006 190 / 0.13);
  border:1px solid oklch(0.975 0.006 190 / 0.13);
  border-radius:var(--radius); overflow:hidden;
}
.area-cell{
  background:var(--tinte-deeper);
  padding:clamp(1.4rem, 2.8vw, 2.1rem);
  display:grid; gap:0.5rem; align-content:start;
}
.area-cell h3{ color:var(--paper); font-size:clamp(1.15rem, 1.8vw, 1.45rem); }
.area-cell p{ color:oklch(0.975 0.006 190 / 0.76); font-size:var(--fs-s); line-height:1.6; }
.area-tag{
  font:600 var(--fs-kick)/1.4 var(--fb);
  letter-spacing:0.08em; text-transform:uppercase;
  color:var(--mint-hell);
}
.area-home{ background:var(--petrol-deep); }
.area-foot{
  margin-top:clamp(1.75rem, 3.5vw, 2.5rem);
  color:oklch(0.975 0.006 190 / 0.8); max-width:44rem;
}
@media (min-width:768px){
  .area-grid{ grid-template-columns:repeat(6, minmax(0,1fr)); }
  .area-cell{ grid-column:span 2; }
  .area-hd{ grid-column:span 4; }
}

/* --- 9.6 Case-Held (bmd_pagehero, Variante case) ------------------------- */
/* Flacher als der Standard-Held: wer hier landet, hat schon eine Frage im
   Kopf — die Buehne muss ihn nicht erst abholen. */
.page-hero--case .page-hero-grid{
  padding-block:clamp(2rem, 4.5vw, 3.5rem) clamp(2.5rem, 5vw, 4rem);
}
.page-hero--case .page-hero-copy{ gap:1.35rem; }
.page-hero--case h1{ font-size:clamp(2.5rem, 5.4vw, 4.3rem); max-width:14em; }
/* Ergebniszeile: eine Zeile, die den ganzen Fall traegt. */
.case-result{
  font-family:var(--fd); font-weight:650;
  font-size:clamp(1.15rem, 2.1vw, 1.55rem); line-height:1.25; letter-spacing:-0.012em;
  color:var(--mint-hell); max-width:24rem;
  padding-left:1.1rem;
  border-left:1px solid oklch(0.700 0.130 182 / 0.55);
}
/* Leistungs-Chips: benennen, was im Projekt steckt. Keine Links, also auch
   keine Link-Signale. */
.chips{ list-style:none; display:flex; flex-wrap:wrap; gap:0.5rem; }
.chips li{
  font:600 var(--fs-s)/1 var(--fb); letter-spacing:0.015em;
  color:oklch(0.975 0.006 190 / 0.86);
  border:1px solid oklch(0.975 0.006 190 / 0.24);
  border-radius:999px; padding:0.55rem 0.95rem;
}
/* Fall-Daten unter der Buehne. */
.case-meta{
  grid-column:1 / -1;
  border-top:1px solid oklch(0.975 0.006 190 / 0.14);
  padding-top:1.4rem;
  display:grid; gap:1.1rem 2.5rem;
  /* .page-hero-proof deckelt auf 46rem — die Fall-Daten laufen ueber die
     ganze Buehnenbreite, sonst stauchen sich die vier Spalten. */
  max-width:none;
  color:oklch(0.975 0.006 190 / 0.82); font-size:var(--fs-s);
}
.case-meta dt{
  font:600 var(--fs-kick)/1.3 var(--fb); letter-spacing:0.09em; text-transform:uppercase;
  color:var(--mint-hell); margin-bottom:0.35rem;
}
.case-meta dd{ font-weight:500; }
@media (min-width:768px){
  .case-meta{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .page-hero--case .page-hero-grid{ grid-template-columns:1.02fr 0.98fr; }
}

/* --- 9.7 Doppelspalte Ausgangslage/Aufgabe (bmd_duo) --------------------- */
.case-brief{
  padding-block:var(--sec-y);
  background:
    radial-gradient(95% 70% at 10% 6%, oklch(0.33 0.058 195 / 0.42), transparent 62%),
    var(--tinte-deeper);
}
.case-brief h2{ color:var(--paper); }
.case-brief p{ color:oklch(0.975 0.006 190 / 0.8); max-width:34rem; }
.brief-p2{ margin-top:1.1rem; }
.brief-grid{ display:grid; gap:clamp(2.5rem, 6vw, 3.5rem); }
.brief-col .sec-head{ margin-bottom:clamp(1.25rem, 3vw, 1.75rem); }
@media (min-width:900px){
  .brief-grid{ grid-template-columns:1.02fr 0.98fr; gap:clamp(3rem, 6vw, 5rem); }
  /* Haarlinie statt Kasten: zwei Blickwinkel auf denselben Fall. */
  .brief-col + .brief-col{
    border-left:1px solid oklch(0.975 0.006 190 / 0.14);
    padding-left:clamp(3rem, 6vw, 5rem);
  }
}
.case-detail{
  list-style:none; display:grid; gap:0.55rem; margin-top:1.5rem;
  font-size:var(--fs-s); color:oklch(0.975 0.006 190 / 0.72);
}
.case-detail li{ display:grid; grid-template-columns:auto 1fr; gap:0.75rem; align-items:baseline; }
.case-detail li::before{
  content:""; width:1.1rem; height:1px; background:var(--mint-hell);
  transform:translateY(-0.35em); opacity:0.7;
}
.task-list{ list-style:none; display:grid; gap:1.5rem; margin-top:1.75rem; }
.task-list li{ display:grid; grid-template-columns:auto 1fr; gap:0.9rem; align-items:start; }
.task-list li::before{
  content:""; width:0.6rem; height:0.6rem; margin-top:0.55rem;
  border-radius:50%; border:1.5px solid var(--mint-hell);
}
.task-list b{
  display:block; font-family:var(--fd); font-weight:650;
  font-size:1.1rem; line-height:1.25; letter-spacing:-0.008em;
  color:var(--paper); margin-bottom:0.25rem;
}
.task-list p{ font-size:var(--fs-s); line-height:1.6; }

/* --- 9.8 Loesungszeilen (bmd_lineup, Variante solution) ------------------ */
.solution{ padding-block:var(--sec-y); }
.sol-list{ margin-top:clamp(2rem, 4.5vw, 3rem); }
.sol-item{
  display:grid; gap:0.6rem clamp(1.5rem, 4vw, 3rem);
  padding-block:clamp(1.5rem, 3vw, 2.25rem);
  border-top:1px solid oklch(0.300 0.050 196 / 0.18);
}
.sol-item:last-child{ border-bottom:1px solid oklch(0.300 0.050 196 / 0.18); }
.sol-label{
  font:600 var(--fs-kick)/1.3 var(--fb); letter-spacing:0.09em; text-transform:uppercase;
  color:var(--mint-tief); font-variant-numeric:tabular-nums;
}
/* 36rem ergeben bei Instrument Sans 17px rund 70 Zeichen */
.sol-item p{ max-width:36rem; }
@media (min-width:768px){
  .sol-item{ grid-template-columns:minmax(0, 11rem) minmax(0, 1fr); align-items:start; }
  .sol-label{ grid-row:span 2; padding-top:0.3rem; }
}
/* Der Winkel fasst das Zitat: offene Ecke oben links, der Satz beginnt darin
   — dieselbe Beziehung wie im Logo, wo die Ecke den Satzblock haelt. Ein
   Zitat je Projektseite, also elfmal auf der ganzen Website; das ist selten
   genug, dass es bedeutet statt zu schmuecken.
   Mint-tief #006A62 auf Papier = 6,04:1, Mint-hell auf Tiefpetrol = 10,05:1. */
.case-quote{ margin-top:clamp(2.5rem, 5vw, 3.5rem); display:grid; gap:0.9rem; max-width:44rem; }
.case-quote::before{
  content:""; display:block; width:1.375rem; aspect-ratio:1;
  background:var(--mint-hell); clip-path:var(--ci-winkel);
}
.screen .case-quote::before{ background:var(--mint-tief); }
.case-quote blockquote p{
  font-family:var(--fd); font-weight:600;
  font-size:clamp(1.3rem, 2.6vw, 1.85rem); line-height:1.25; letter-spacing:-0.014em;
  color:var(--petrol); max-width:none;
}
.case-quote figcaption{
  font:600 var(--fs-s)/1.4 var(--fb); letter-spacing:0.015em;
  color:oklch(0.300 0.050 196 / 0.6);
}

/* --- 9.9 Ergebnis-Belege (bmd_lineup, Variante outcome) ------------------ */
.case-outcome{
  padding-block:var(--sec-y);
  background:
    radial-gradient(100% 80% at 88% 100%, oklch(0.33 0.058 195 / 0.48), transparent 60%),
    var(--tinte-deep);
}
.case-outcome h2{ color:var(--paper); }
.case-outcome .lead{ color:oklch(0.975 0.006 190 / 0.8); }
.outcome-grid{ display:grid; gap:clamp(1rem, 2vw, 1.5rem); margin-top:clamp(2rem, 4.5vw, 3rem); }
.outcome-item{
  display:grid; gap:0.7rem; align-content:start;
  border:1px solid oklch(0.975 0.006 190 / 0.16);
  border-radius:var(--radius);
  background:oklch(0.26 0.045 197 / 0.5);
  padding:clamp(1.4rem, 2.8vw, 2rem);
}
.outcome-top{ display:flex; align-items:center; gap:0.7rem; }
.outcome-mark{
  flex:none; display:grid; place-items:center;
  width:1.65rem; height:1.65rem; border-radius:50%;
  border:1px solid oklch(0.700 0.130 182 / 0.5); color:var(--mint-hell);
}
.outcome-item h3{ color:var(--paper); font-size:1.15rem; }
/* fs-s laeuft schmaler: 30rem halten die Zeile bei rund 66 Zeichen */
.outcome-item p{ color:oklch(0.975 0.006 190 / 0.8); font-size:var(--fs-s); line-height:1.6; max-width:30rem; }
@media (min-width:768px){
  .outcome-grid{ grid-template-columns:repeat(12, minmax(0, 1fr)); }
  .outcome-a{ grid-column:span 7; }
  .outcome-b{ grid-column:span 5; }
  .outcome-c{
    grid-column:span 12;
    grid-template-columns:minmax(0, 17rem) minmax(0, 1fr);
    gap:0.7rem clamp(2rem, 5vw, 4rem); align-items:start;
  }
}
.case-note{
  margin-top:clamp(1.75rem, 3.5vw, 2.5rem);
  padding-top:1.4rem;
  border-top:1px solid oklch(0.975 0.006 190 / 0.14);
  max-width:34rem;
  font-size:var(--fs-s);
  color:oklch(0.975 0.006 190 / 0.66);
}

/* --- 9.10 Zwei getoente Teaser (bmd_lineup, Variante follow) ------------- */
.follow{ padding-block:var(--sec-y) clamp(3rem, 7vw, 5.5rem); }
.follow-grid{ display:grid; gap:clamp(1rem, 2vw, 1.5rem); margin-top:clamp(2rem, 4vw, 3rem); }
.follow-item{
  position:relative; border-radius:var(--radius);
  padding:clamp(1.6rem, 3.2vw, 2.4rem);
  display:grid; gap:0.75rem; align-content:start;
  transition:transform 0.35s var(--eq); will-change:transform;
}
.follow-item:hover{ transform:translateY(-5px); }
.follow-item:focus-within{ outline:2px solid var(--focus); outline-offset:2px; }
.follow-item h3 a{ text-decoration:none; color:inherit; }
.follow-item h3 a:focus-visible{ outline:none; }
.follow-item h3 a::after{ content:""; position:absolute; inset:0; border-radius:inherit; }
.follow-kick{
  font:600 var(--fs-kick)/1.3 var(--fb); letter-spacing:0.09em; text-transform:uppercase;
  color:var(--mint-tief);
}
.follow-item .arr{ transition:transform 0.35s var(--eq); }
.follow-item:hover .arr{ transform:translateX(6px); }
.follow-a{ background:var(--dunst); }
.follow-b{ background:var(--sand); }
@media (min-width:768px){
  .follow-grid{ grid-template-columns:1.08fr 0.92fr; }
}

/* --- 9.11 Projekt-Raster (bmd_lineup, Variante projects) ----------------- */
.more{
  padding-block:var(--sec-y);
  background:
    radial-gradient(95% 70% at 8% 92%, oklch(0.32 0.056 195 / 0.4), transparent 60%),
    var(--tinte-deeper);
}
.more h2{ color:var(--paper); }
.more .lead{ color:oklch(0.975 0.006 190 / 0.8); max-width:40rem; }
.more-head{
  display:flex; flex-wrap:wrap; gap:0.9rem 2rem;
  align-items:baseline; justify-content:space-between;
  margin-bottom:clamp(2rem, 4vw, 3rem);
}
.more-grid{ display:grid; gap:clamp(1.5rem, 3vw, 2.25rem); }
.more-item{ position:relative; display:grid; gap:0.9rem; align-content:start; }
.more-media{
  border-radius:var(--radius); overflow:hidden;
  --mask-tone:var(--tinte-deeper);
  box-shadow:0 14px 34px oklch(0.175 0.03 198 / 0.4);
}
.more-media img{ width:100%; aspect-ratio:3/2; object-fit:cover; }
.more-kick{
  font:600 var(--fs-kick)/1.3 var(--fb); letter-spacing:0.09em; text-transform:uppercase;
  color:var(--mint-hell);
}
.more-item h3{ color:var(--paper); font-size:clamp(1.2rem, 1.9vw, 1.45rem); }
.more-item h3 a{ text-decoration:none; color:inherit; }
.more-item h3 a:focus-visible{ outline:none; }
.more-item h3 a::after{ content:""; position:absolute; inset:0; border-radius:var(--radius); }
.more-item:focus-within{ outline:2px solid var(--focus); outline-offset:8px; border-radius:6px; }
.more-item p{ color:oklch(0.975 0.006 190 / 0.78); font-size:var(--fs-s); line-height:1.6; max-width:32rem; }
.more-item .arr{ transition:transform 0.35s var(--eq); display:inline-block; }
.more-item:hover .arr{ transform:translateX(6px); }
@media (min-width:768px){
  .more-grid{ grid-template-columns:1fr 1fr; }
}
@media (min-width:1140px){
  .more-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (hover:hover) and (prefers-reduced-motion: no-preference){
  .more-media{ transition:transform 0.5s var(--eq); }
  .js .more-item:hover .more-media{ --img-s:1.04; transform:translateY(-4px); }
}

/* --- 9.12 Sicherheitsnetz: unter 768px strikt einspaltig ----------------- */
@media (max-width:767px){
  .why-grid, .shots-grid, .shots-figs, .strip-grid, .offer-row,
  .area-grid, .brief-grid, .sol-item, .outcome-grid, .follow-grid,
  .more-grid, .case-meta{ grid-template-columns:1fr; }
  /* Der hohe Mobil-Screenshot wuerde einspaltig die halbe Seite fressen —
     er bekommt hier ein festes Fenster statt seiner vollen Laenge. Das gilt
     fuer den seitenlangen Mitschnitt, nicht fuer die zweite Figur: vorher hing
     die Regel an der Position und presste am Handy jedes Portraet in Slot b
     in ein Querfenster. */
  .shots-figs .is-lang img{ height:clamp(20rem, 78vw, 30rem); aspect-ratio:auto; }
  .case-result{ max-width:none; }
}

/* ==========================================================================
   10 · Schaubild (bmd_schema) — Stand 02.09.2026
   Eine Doppelseite, kein eingefuegtes Bild: Kopf, Figur und Lesehilfen
   liegen in EINEM 12-Spalten-Raster, aber jeder Teil anders eingerueckt —
   Kopf 1 bis 7, Figur 2 bis 13, Lesehilfen 5 bis 13. Der Versatz ist der
   ganze Trick; mittig gesetzt waere es wieder eine Bildstrecke.

   Der Block laeuft auf beiden Gruenden: ohne Buehne auf der dunklen Tafel,
   mit layout=1 auf einem eigenen Paper-Screen. Die hellen Faelle stehen
   gesammelt am Ende dieses Abschnitts — bmd-unterseiten.css laedt NACH
   bmd-site.css, gleich spezifische Regeln wie .schema h2 wuerden .screen h2
   sonst ueberschreiben und helle Schrift auf helles Papier setzen.

   Bewegung: ausschliesslich die vorhandenen Mechaniken .rv und .rv-img mit
   der Stagger-Variablen --d aus bmd-site.css, Abschnitt 5. Keine eigenen
   Keyframes. Fuer prefers-reduced-motion steht dort bereits eine globale
   Abschaltung (animation/transition none, Maske und Sweep aus) — hier ist
   nichts nachzuziehen.
   ========================================================================== */
.schema{
  padding-block:var(--sec-y);
  background:
    radial-gradient(88% 66% at 82% 6%, oklch(0.32 0.056 195 / 0.4), transparent 62%),
    var(--tinte-deeper);
}
.schema h2{ color:var(--paper); }
.schema .lead{ color:oklch(0.975 0.006 190 / 0.82); max-width:38rem; }

/* Ein Raster fuer alle drei Teile. Die Abstaende kommen aus gap — deshalb
   faellt der Standardabstand von .sec-head hier weg. */
.schema-grid{ display:grid; gap:clamp(2.25rem, 5vw, 3.5rem) clamp(1rem, 2vw, 1.5rem); }
.schema-head{ margin-bottom:0; }

/* --- 10.1 Die Figur ------------------------------------------------------ */
/* Rahmen und Reveal-Maske sitzen auf .schema-frame, die Unterschrift steht
   ausserhalb davon: overflow:hidden wuerde sie sonst unter das Bild
   schieben (dieselbe Falle wie bei .shotfig). */
.schema-fig{ margin:0; min-width:0; display:grid; gap:1rem; }
.schema-frame{
  position:relative; overflow:hidden;
  border-radius:var(--radius);
  /* Haarlinie aus dem Papierton gemischt, kein neues Grau. */
  box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--paper) 14%, transparent);
  /* Der Reveal-Vorhang faehrt in der Farbe des Grundes weg, auf dem er liegt. */
  --mask-tone:var(--tinte-deeper);
}
/* Lichtsaum an der Oberkante: 1px, rund 10 % Weiss. Er liegt ueber dem Bild
   (z-index 1), aber unter dem Reveal-Vorhang (z-index 2) — der Saum kommt
   also mit dem Bild hervor und nicht davor. overflow:hidden zieht ihn in
   den Radius, dadurch wirkt die Kante koerperlich statt aufgemalt. */
.schema-frame::before{
  content:""; position:absolute; z-index:1; pointer-events:none;
  inset:0 0 auto 0; height:1px;
  background:color-mix(in oklab, var(--paper) 10%, transparent);
}
/* Schaubilder werden NICHT beschnitten: keine aspect-ratio, kein cover.
   width und height stehen am img, der Platz ist vor dem Laden reserviert. */
.schema-frame img{ width:100%; }

/* Unterschrift unter der Figur, leise, mit kurzer Haarlinie davor.
   Der Text kommt aus den FAL-Metadaten, nicht aus einem eigenen Feld. */
.schema-cap{
  display:flex; align-items:flex-start; gap:0.8rem;
  font:600 var(--fs-kick)/1.5 var(--fb);
  letter-spacing:0.08em; text-transform:uppercase;
  color:oklch(0.975 0.006 190 / 0.58);
}
.schema-cap::before{
  content:""; flex:none; width:1.75rem; height:1px; margin-top:0.72em;
  background:currentColor; opacity:0.55;
}

/* --- 10.2 Die Lesehilfen ------------------------------------------------- */
/* Kein Kartenrahmen: die Eintraege haelt eine gemeinsame Oberkante
   zusammen, nicht ein Kasten. Reihenfolge zaehlt, deshalb <ol>. */
.schema-keys{ list-style:none; display:grid; gap:1.4rem; }
.schema-key{
  display:grid; gap:0.35rem; align-content:start;
  padding-top:1.1rem;
  border-top:1px solid color-mix(in oklab, var(--paper) 16%, transparent);
  transition:border-color 240ms var(--eo);
}
/* Jeder Eintrag traegt zugleich .rv — und .js .rv setzt transition als
   Kurzschreibweise, loescht mit gleicher Spezifitaet also die Zeile darueber
   wieder weg. Die Trennlinie spraenge dann hart um. Deshalb hier die
   vollstaendige Liste: die beiden Reveal-Eigenschaften unveraendert aus
   bmd-site.css, Abschnitt 5, plus die Linie. Ohne JS bleibt es bei der
   kurzen Angabe oben. */
.js .schema-keys .schema-key{
  transition:
    opacity 0.75s var(--eq),
    transform 0.75s var(--eq),
    border-color 240ms var(--eo);
}
.schema-key-num{
  font:650 var(--fs-kick)/1.2 var(--fb);
  letter-spacing:var(--ls-kick);
  font-variant-numeric:tabular-nums;
  color:var(--mint-hell);
  transition:color 240ms var(--eo);
}
.schema-key-title{
  font-family:var(--fd); font-weight:600;
  font-size:1.05rem; line-height:1.25; letter-spacing:-0.006em;
  color:var(--paper);
}
/* fs-s laeuft schmal: rund 66 Zeichen je Zeile in einer Viertelspalte. */
.schema-key-text{ font-size:var(--fs-s); line-height:1.6; color:oklch(0.975 0.006 190 / 0.76); }

/* Beim Ueberfahren wandert die Nummer in den Akzent und die Trennlinie
   darueber wird kraeftiger. Animiert werden nur Farben. */
@media (hover:hover){
  .schema-key:hover{ border-top-color:color-mix(in oklab, var(--paper) 38%, transparent); }
  .schema-key:hover .schema-key-num{ color:var(--amber); }
}

/* --- 10.3 Raster --------------------------------------------------------- */
@media (max-width:767px){
  .schema-grid, .schema-keys{ grid-template-columns:1fr; }
}
@media (min-width:768px){
  .schema-keys{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.5rem clamp(1.5rem, 3vw, 2.5rem); }
}
@media (min-width:1024px){
  .schema-grid{ grid-template-columns:repeat(12, minmax(0,1fr)); }
  .schema-head{ grid-column:1 / 8; }
  .schema-fig{ grid-column:2 / 13; }
  .schema-keys{ grid-column:5 / 13; grid-template-columns:repeat(4, minmax(0,1fr)); }
}

/* --- 10.4 Auf heller Buehne ---------------------------------------------- */
/* Steht die Sektion in einem Paper-Screen, traegt der Screen die Flaeche:
   der eigene dunkle Grund muss weg, alle Kontraste drehen sich um. Die
   Selektoren sind absichtlich eine Stufe spezifischer als oben. */
.screen .schema{ background:none; }
.screen .schema h2{ color:var(--tinte); }
.screen .schema .lead{ color:oklch(0.300 0.050 196 / 0.88); }
.screen .schema-frame{
  --mask-tone:var(--paper);
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--tinte) 16%, transparent),
    /* Weicher, in den Buehnenton getoenter Schatten: grosser Radius,
       negativer Spread, kein neutrales Grau und kein harter Schlagschatten. */
    0 26px 60px -26px color-mix(in oklab, var(--tinte) 38%, transparent);
}
.screen .schema-cap{ color:oklch(0.300 0.050 196 / 0.58); }
.screen .schema-key{ border-top-color:color-mix(in oklab, var(--tinte) 18%, transparent); }
.screen .schema-key-num{ color:var(--mint-tief); }
.screen .schema-key-title{ color:var(--tinte); }
.screen .schema-key-text{ color:oklch(0.300 0.050 196 / 0.82); }
@media (hover:hover){
  .screen .schema-key:hover{ border-top-color:color-mix(in oklab, var(--tinte) 40%, transparent); }
  /* Amber-ink statt Amber: der helle Amber-Ton traegt auf Paper den
     Kontrast nicht. Derselbe Wechsel, nur in Tinte gedacht. */
  .screen .schema-key:hover .schema-key-num{ color:var(--amber-ink); }
}

/* ==========================================================================
   11 · Solitär (bmd_solitaer) — Stand 02.09.2026

   Eine einzelne streitbare Aussage je Seite. Der Block ist der Hebel gegen
   die Gleichfoermigkeit: gleiche Form auf allen Seiten, jedes Mal andere
   Aussage.

   Das Besondere ist die Anordnung: Aussage links, Begruendung rechts DANEBEN
   statt darunter. Jeder andere Block der Website fuehrt Kopf ueber Inhalt —
   dieser nicht. Genau daran erkennt man ihn beim Durchscrollen wieder, ohne
   dass er Schmuck braucht.
   ========================================================================== */
.sol{ padding-block:clamp(4.5rem, 10vw, 8rem); background:var(--tinte-deeper); }

.sol-grid{
  display:grid; gap:clamp(1.3rem, 2.6vw, 2rem);
  border-top:1px solid oklch(0.700 0.130 182 / 0.30);
  padding-top:clamp(1.9rem, 4vw, 3rem);
}
.sol-kick{
  font:600 var(--fs-kick)/1.2 var(--fb);
  letter-spacing:0.09em; text-transform:uppercase;
  color:var(--mint-hell);
}
.sol-satz{
  font-family:var(--fd); font-weight:700;
  font-size:clamp(1.9rem, 4.4vw, 3.4rem);
  line-height:1.04; letter-spacing:-0.022em;
  color:var(--paper); max-width:18ch; text-wrap:balance;
}
.sol-text{ color:oklch(0.975 0.006 190 / 0.74); max-width:44ch; }
.sol-text p + p{ margin-top:0.85rem; }
.sol-text strong{ color:var(--paper); font-weight:650; }

@media (min-width:900px){
  .sol-grid{
    grid-template-columns:minmax(0, 7fr) minmax(0, 5fr);
    column-gap:clamp(2.5rem, 5vw, 5rem);
    align-items:start;
  }
  .sol-kick{ grid-column:1 / -1; }
  .sol-satz{ grid-column:1; }
  /* Der kleine Versatz nach unten laesst die Begruendung an der Grundlinie
     der zweiten Zeile der Aussage ansetzen statt an deren Oberkante. */
  .sol-text{ grid-column:2; padding-top:0.6rem; }
}

/* Helle Fassung: der Block liegt dann in einer .screen-Flaeche, die Grund und
   h2-Farbe schon setzt — hier bleiben nur Kicker, Linie und Fliesstext. */
.screen .sol{ background:none; padding-block:clamp(3.5rem, 8vw, 6rem); }
.screen .sol-kick{ color:var(--mint-tief); }
.screen .sol-satz{ color:var(--tinte); }
.screen .sol-text{ color:oklch(0.300 0.050 196 / 0.86); }
.screen .sol-text strong{ color:var(--tinte); }
.screen .sol-grid{ border-top-color:oklch(0.300 0.050 196 / 0.20); }


/* ==========================================================================
   12 · Zulieferung (bmd_zulieferung) — Stand 02.09.2026

   „Was Sie mir liefern — und was nicht." Ersetzt den nummerierten Ablauf auf
   Seiten ohne echte Reihenfolge.

   Das Argument steckt im durchgestrichenen Punkt. Er bekommt deshalb als
   einziger eine eigene Flaeche und eine Mint-Kante: Er soll beim Ueberfliegen
   der Liste haengenbleiben, weil dort steht, was hier NICHT verlangt wird.
   ========================================================================== */
.zul{ padding-block:var(--sec-y); }

.zul-liste{ list-style:none; margin:0; padding:0; display:grid; }
.zul-punkt{
  display:grid; gap:0.3rem;
  padding-block:clamp(1.05rem, 2.2vw, 1.55rem);
  border-top:1px solid oklch(0.300 0.050 196 / 0.16);
}
.zul-punkt:last-child{ border-bottom:1px solid oklch(0.300 0.050 196 / 0.16); }

.zul-titel{
  font-family:var(--fd); font-weight:650;
  font-size:1.1rem; line-height:1.25; letter-spacing:-0.006em;
  color:var(--tinte);
}
.zul-text{ max-width:48ch; color:oklch(0.300 0.050 196 / 0.86); }

/* Der entfallende Punkt — das eigentliche Argument des Blocks. */
.zul-weg{
  background:oklch(0.700 0.130 182 / 0.09);
  border-top-color:oklch(0.700 0.130 182 / 0.35);
  border-left:2px solid var(--mint-tief);
  padding-inline:clamp(0.9rem, 2vw, 1.4rem);
  margin-inline:calc(-1 * clamp(0.9rem, 2vw, 1.4rem));
}
.zul-weg + .zul-punkt{ border-top-color:oklch(0.700 0.130 182 / 0.35); }
.zul-weg .zul-titel s{
  text-decoration-thickness:1px; text-decoration-color:oklch(0.300 0.050 196 / 0.5);
  color:oklch(0.300 0.050 196 / 0.55);
}
.zul-marke{
  display:inline-block; margin-left:0.5rem; vertical-align:0.08em;
  font:600 var(--fs-kick)/1 var(--fb);
  letter-spacing:0.09em; text-transform:uppercase;
  color:var(--mint-tief);
}
.zul-weg .zul-text{ color:var(--tinte); }

@media (min-width:760px){
  .zul-punkt{
    grid-template-columns:minmax(0, 14rem) minmax(0, 1fr);
    column-gap:clamp(1.5rem, 3.2vw, 3rem);
    align-items:baseline;
  }
}

/* Dunkle Fassung: dieselbe Liste auf der Buehne. Die Klasse kommt aus dem
   Template (layout 0), nicht aus einer Nachbarschaftsregel — sonst haengt die
   Farbe davon ab, welcher Block zufaellig davor steht. */
.zul.zul-dunkel{ background:var(--tinte-deeper); }
.zul.zul-dunkel .zul-titel{ color:var(--paper); }
.zul.zul-dunkel .zul-text{ color:oklch(0.975 0.006 190 / 0.78); }
.zul.zul-dunkel .zul-punkt{ border-top-color:oklch(0.975 0.006 190 / 0.16); }
.zul.zul-dunkel .zul-punkt:last-child{ border-bottom-color:oklch(0.975 0.006 190 / 0.16); }
.zul.zul-dunkel .zul-weg .zul-titel s{ color:oklch(0.975 0.006 190 / 0.55); text-decoration-color:oklch(0.975 0.006 190 / 0.5); }
.zul.zul-dunkel .zul-marke{ color:var(--mint-hell); }
.zul.zul-dunkel .zul-weg{ border-left-color:var(--mint-hell); }
.zul.zul-dunkel .zul-weg .zul-text{ color:var(--paper); }

/* ==========================================================================
   13 · Projektseite — randlose Baender und versetztes Raster
   Stand 02.09.2026, uebertragen aus PORTFOLIO-RANDLOS.html.

   Grundmuster der Baender: KEIN Verlaufsteppich ueber das ganze Bild, sondern
   eine seitliche Flaeche, die bis rund ein Viertel der Breite voll deckt und
   dann auslaeuft. Der Rest des Motivs bleibt unangetastet — das ist der Kern
   des Entwurfs, nicht ein Detail.
   ========================================================================== */

/* --- Leistungszeile, geteilt von Baendern und Raster ----------------------
   Hoechstens drei Eintraege, getrennt durch einen schmalen Mittelpunkt in
   Mint. Der Punkt ist gezeichnet, nicht gesetzt: so liest ihn kein
   Screenreader als Satzzeichen mit. */
.leist{
  list-style:none; display:flex; flex-wrap:wrap;
  align-items:center; gap:0.35rem 0.75rem;
  margin-top:1.05rem; padding-top:0.85rem;
  border-top:1px solid oklch(0.975 0.006 190 / 0.20);
  font-family:var(--fd); font-weight:650;
  font-size:0.83rem; letter-spacing:0.1em; text-transform:uppercase;
  line-height:1.4; color:oklch(0.975 0.006 190 / 0.95);
}
.leist li{ display:flex; align-items:center; gap:0.75rem; }
.leist li + li::before{
  content:""; flex:none;
  width:4px; height:4px; border-radius:50%;
  background:var(--mint-hell);
}

/* --- Die Baender ---------------------------------------------------------- */
.baender{ --band-x:clamp(1.25rem, 5vw, 4.5rem); }

.band{
  position:relative; isolation:isolate;
  width:100%; height:clamp(24rem, 58vh, 34rem);
  overflow:hidden; background:var(--tinte-deeper);
}
.band + .band{ border-top:1px solid oklch(0.975 0.006 190 / 0.10); }

/* Das Partial liefert bei WebP ein blankes <img>, bei JPG/PNG ein <picture>.
   Deshalb traegt der Rahmen die Absolutlage, nicht das Bildelement selbst. */
.band__media{ position:absolute; inset:0; z-index:0; display:block; }
.band__media picture{ display:block; width:100%; height:100%; }
.band__img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  transform:scale(1); transform-origin:center;
  transition:transform var(--dur-slow) var(--eo);
}
/* Bewegung nur dort, wo sie auch etwas ankuendigt: auf dem klickbaren Band. */
.band--link:hover .band__img,
.band--link:focus-within .band__img{ transform:scale(1.03); }

/* Die Flaeche endet in derselben Farbe mit Deckkraft 0 — nicht in
   "transparent", das in manchen Browsern ueber Schwarz interpoliert. */
.band__plate{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.band--left .band__plate{
  background:linear-gradient(90deg,
    oklch(0.215 0.037 198 / 0.94) 0%,
    oklch(0.215 0.037 198 / 0.94) 22%,
    oklch(0.215 0.037 198 / 0) 100%);
}
.band--right .band__plate{
  background:linear-gradient(270deg,
    oklch(0.215 0.037 198 / 0.94) 0%,
    oklch(0.215 0.037 198 / 0.94) 22%,
    oklch(0.215 0.037 198 / 0) 100%);
}
/* Dunkles, grafisches Motiv: die Flaeche darf schwaecher ausfallen. */
.band--soft.band--left .band__plate{
  background:linear-gradient(90deg,
    oklch(0.215 0.037 198 / 0.80) 0%,
    oklch(0.215 0.037 198 / 0.76) 18%,
    oklch(0.215 0.037 198 / 0) 92%);
}
.band--soft.band--right .band__plate{
  background:linear-gradient(270deg,
    oklch(0.215 0.037 198 / 0.80) 0%,
    oklch(0.215 0.037 198 / 0.76) 18%,
    oklch(0.215 0.037 198 / 0) 92%);
}

.band__inner{
  position:relative; z-index:2;
  height:100%; display:flex; align-items:center;
  padding-inline:var(--band-x);
}
.band--right .band__inner{ justify-content:flex-end; }

.band__txt{ max-width:40ch; }
.band__txt .kick{ margin-bottom:0.7rem; text-shadow:0 1px 12px oklch(0.215 0.037 198 / 0.55); }
.band__txt h3{
  font-size:clamp(1.9rem, 3.4vw, 3rem); font-weight:750;
  letter-spacing:-0.02em; line-height:1.04;
  color:var(--paper); max-width:15ch;
  text-shadow:0 1px 14px oklch(0.215 0.037 198 / 0.55);
}
.band__satz{
  margin-top:0.9rem; max-width:38ch;
  color:oklch(0.975 0.006 190 / 0.88);
  text-shadow:0 1px 12px oklch(0.215 0.037 198 / 0.5);
}
.band .leist{ border-top-color:oklch(0.975 0.006 190 / 0.28); }

/* Der Hinweis erscheint nur, wo es auch ein Ziel gibt. Das ganze Band ist der
   Link, deshalb bleibt die Zeile hier reine Optik. */
.band__more{
  display:inline-flex; align-items:center; gap:0.5rem;
  margin-top:1.15rem;
  font-family:var(--fd); font-weight:650; font-size:var(--fs-s);
  color:var(--mint-hell);
}
.band__more .arr{ flex:none; transition:transform var(--dur-base) var(--eo); }
.band--link:hover .band__more .arr{ transform:translateX(4px); }

.band__link{ position:absolute; inset:0; z-index:3; }
.band__link:focus-visible{ outline:2px solid var(--focus); outline-offset:-8px; border-radius:0; }

/* Schmale Schirme: dieselbe Flaeche, nur nach unten gedreht. Das Motiv
   behaelt seine oberen zwei Drittel.

   ACHTUNG, hier steckte der Fehler des Entwurfs: Die Hoehe wird schmal
   unbestimmt, damit ein langer Text das Band wachsen laesst. Damit verliert
   "height:100%" am Inneren aber seinen Bezug — es schrumpft auf die Texthoehe
   und klebt oben, waehrend der Verlauf unten abdunkelt. Deshalb wird das Band
   selbst zum Flex-Behaelter und das Innere bekommt "width:100%": erst dann
   dehnt es sich ueber die volle Bandhoehe und flex-end wirkt wieder. */
@media (max-width:860px){
  .band{ height:auto; min-height:clamp(24rem, 66vh, 32rem); display:flex; }
  .band__inner{
    height:auto; width:100%; align-items:flex-end;
    padding-block:clamp(1.75rem, 6vw, 2.5rem);
  }
  .band--right .band__inner{ justify-content:flex-start; }
  .band__txt{ max-width:none; }
  .band__txt h3{ font-size:clamp(1.75rem, 7vw, 2.2rem); max-width:18ch; }
  .band__satz{ font-size:0.98rem; line-height:1.55; max-width:46ch; }
  /* Der Textblock im Band ist fuenfzeilig — Kicker, Titel, Satz, Leistungen,
     Hinweis — und nimmt gut vierzig Prozent der Bandhoehe ein. Endete der
     Verlauf schon bei 58 Prozent, stand der Kicker des ersten Bandes auf dem
     hellsten Teil des Motivs. Er deckt deshalb bis 34 Prozent voll und laeuft
     erst bei 76 Prozent aus; das obere Viertel bleibt unangetastet. */
  .band--left .band__plate,
  .band--right .band__plate,
  .band--soft.band--left .band__plate,
  .band--soft.band--right .band__plate{
    background:linear-gradient(to top,
      oklch(0.215 0.037 198 / 0.95) 0%,
      oklch(0.215 0.037 198 / 0.93) 34%,
      oklch(0.215 0.037 198 / 0) 76%);
  }
}

/* --- Kopf der Strecke und Umschalter --------------------------------------
   Alle Projekte stehen jetzt in EINER Strecke, deshalb braucht sie einen
   eigenen Kopf. Er traegt zugleich den Umschalter: Baender zeigen jedes
   Projekt gross, Karten bringen alle auf einen Blick. Beide Ansichten lesen
   dasselbe Markup — was sich aendert, ist allein die Flaeche. */
/* Der Umschalter faellt bei langer Ueberschrift unter den Kopf — dasselbe
   Verhalten wie beim Kopf des Projekt-Rasters (.more-head). Darunter darf
   es dann nicht eng werden: unter der Gruppe beginnt sofort die randlose
   Bildkante des ersten Bandes. */
.baender__kopf{ padding:clamp(3.25rem, 7vw, 5.25rem) 0 clamp(2.25rem, 4.5vw, 3.5rem); }
.baender__kopfzeile{
  display:flex; flex-wrap:wrap; gap:1.6rem 2.25rem;
  align-items:flex-end; justify-content:space-between;
}
.baender__kopftext{ display:grid; gap:1.05rem; }
.baender__lead{ max-width:46ch; }
.baender__fuss{ padding:clamp(2.4rem, 5vw, 3.4rem) 0 var(--sec-y); }
.baender__fuss .area-foot{ margin-top:0; }

/* Zwei Schaltflaechen in einer Gruppe. Der Zustand steht in aria-pressed,
   nicht in einem versteckten Formularfeld — deshalb genuegt hier Farbe. */
.ansicht{
  flex:none; display:inline-flex; gap:2px; padding:3px;
  border-radius:999px;
  border:1px solid oklch(0.975 0.006 190 / 0.20);
  background:oklch(0.975 0.006 190 / 0.05);
}
.ansicht__b{
  appearance:none; -webkit-appearance:none; border:0; cursor:pointer;
  padding:0.62rem 1.2rem; border-radius:999px;
  font:650 var(--fs-s)/1 var(--fd); letter-spacing:0.01em;
  color:oklch(0.975 0.006 190 / 0.74); background:transparent;
  transition:color 0.2s var(--eo), background-color 0.2s var(--eo);
}
.ansicht__b:hover{ color:var(--paper); }
.ansicht__b:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.ansicht__b[aria-pressed="true"]{ background:var(--mint-hell); color:var(--tinte-deeper); }
/* Ohne JavaScript schaltet nichts. Dann bleiben die Baender stehen und die
   Gruppe verschwindet, statt ins Leere zu zeigen. */
html.no-js .ansicht{ display:none; }

/* Bildschirmaufnahmen im Band: Ausschnitt von oben, damit die Kopfleiste der
   gezeigten Seite stehen bleibt und das Band als Seite lesbar ist. Die
   Haarlinie liegt am Bildrahmen, nicht am Band — sonst wanderte sie in der
   Kartenansicht um den ganzen Text. */
.band--screen .band__img{ object-position:center top; }
.band--screen .band__media::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px oklch(0.975 0.006 190 / 0.14);
}

/* Der Wechsel selbst: kurz, und nur Deckkraft und Verschiebung. */
.baender__liste{ transition:opacity 0.16s var(--eo), transform 0.16s var(--eo); }
.baender__liste.is-wechsel{ opacity:0; transform:translateY(8px); }

/* --- Kartenansicht --------------------------------------------------------
   Uebersichtlich heisst hier: mehr Projekte auf einen Blick, alle im selben
   Format. Das Raster fuellt sich von selbst — es gibt keine gesetzte
   Dreierreihe, die ein Projekt vor die anderen stellte. Der Text steht unter
   dem Bild, nicht darauf.

   Die Regeln tragen zwei Klassen und schlagen damit auch die Schmalschirm-
   Regeln der Baender, die weiter oben stehen. */
.baender.is-karten .baender__liste{
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad-x);
  display:grid; grid-template-columns:repeat(auto-fill, minmax(19rem, 1fr));
  gap:1.5rem;
}
.baender.is-karten .band{
  display:block; height:auto; min-height:0;
  overflow:visible; background:transparent;
}
.baender.is-karten .band + .band{ border-top:0; }
.baender.is-karten .band__media{
  position:relative; inset:auto;
  aspect-ratio:3 / 2; border-radius:var(--radius-l);
  overflow:hidden; background:var(--tinte-deep);
}
.baender.is-karten .band__plate{ display:none; }
.baender.is-karten .band__inner{
  position:static; display:block; height:auto;
  padding-inline:0; padding-block:1.15rem 0;
}
.baender.is-karten .band__txt{ max-width:none; }
.baender.is-karten .band__txt .kick{ margin-bottom:0.55rem; text-shadow:none; }
.baender.is-karten .band__txt h3{
  font-size:var(--fs-h3); line-height:1.18; max-width:none; text-shadow:none;
}
/* Ein Satz genuegt in der Karte. Gekuerzt wird die vorhandene Zeile, damit
   kein zweiter Text gepflegt werden muss. */
.baender.is-karten .band__satz{
  margin-top:0.6rem; max-width:none; text-shadow:none;
  font-size:0.97rem; line-height:1.55;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  overflow:hidden;
}
.baender.is-karten .leist{
  margin-top:0.9rem; padding-top:0.75rem; font-size:0.78rem;
  border-top-color:oklch(0.975 0.006 190 / 0.20);
}
.baender.is-karten .band__more{ margin-top:0.85rem; font-size:0.83rem; }
.baender.is-karten .band__link{ border-radius:var(--radius-l); }
.baender.is-karten .band__link:focus-visible{ outline-offset:3px; }

@media (max-width:400px){
  .baender.is-karten .baender__liste{ grid-template-columns:1fr; }
}

/* Bewegungsarmut: der Wechsel geschieht ohne Uebergang, nicht langsamer. */
@media (prefers-reduced-motion: reduce){
  .baender__liste{ transition:none; }
  .baender__liste.is-wechsel{ opacity:1; transform:none; }
  .ansicht__b{ transition:none; }
}

/* --- Zaesur auf Papier ---------------------------------------------------- */
.zaesur{
  background:var(--paper); color:var(--petrol-deep);
  padding:clamp(2.1rem, 4.5vw, 3.1rem) 0;
}
.zaesur h2{
  font-size:clamp(1.15rem, 2.1vw, 1.55rem); font-weight:650;
  color:var(--petrol-deep); letter-spacing:-0.01em; max-width:40ch;
}

/* --- Versetztes Raster ----------------------------------------------------
   Zwei Seitenverhaeltnisse im Wechsel, unten buendig, senkrechter Abstand
   deutlich groesser als der waagerechte. Text steht UNTER dem Bild. */
.raster{ background:var(--tinte-deeper); padding:clamp(3.5rem, 7vw, 5.5rem) 0 var(--sec-y); }
.raster__lead{ color:oklch(0.975 0.006 190 / 0.8); max-width:44rem; margin-bottom:clamp(2rem, 4vw, 3rem); }
.raster__grid{ display:grid; grid-template-columns:1fr; gap:3.25rem 1.5rem; }
@media (min-width:900px){
  .raster__grid{ grid-template-columns:1fr 1fr; gap:6rem 1.5rem; align-items:end; }
}

.proj__fig{
  overflow:hidden; border-radius:var(--radius-l);
  background:var(--tinte-deep); aspect-ratio:3 / 2;
}
.proj__fig img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.proj__fig picture{ display:block; width:100%; height:100%; }
@media (min-width:900px){
  .ar-45 .proj__fig{ aspect-ratio:4 / 5; }
}
/* Bildschirmaufnahmen sind flaechig statt raeumlich. Eine Haarlinie nach innen
   laesst sie als Bildschirm lesen, nicht als missratenes Foto. Und weil die
   Kopfleiste oben links steht, wird von dort beschnitten — sonst verschwindet
   in der 4:5-Kachel genau die Kernaussage. */
.is-screen .proj__fig{ position:relative; }
.is-screen .proj__fig::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  border-radius:inherit; box-shadow:inset 0 0 0 1px oklch(0.975 0.006 190 / 0.14);
}
.is-screen .proj__fig img{ object-position:left top; }

.proj__txt{ padding-top:1.5rem; max-width:46ch; }
.proj__txt .kick{ margin-bottom:0.7rem; }
.proj__txt h3{ color:var(--paper); }
.proj__satz{ margin-top:0.75rem; color:oklch(0.975 0.006 190 / 0.80); }

/* Bewegungsarmut: Startzustaende werden zu Endzustaenden, nicht bloss die
   Animation abgeschaltet. */
@media (prefers-reduced-motion: reduce){
  .band__img,
  .band--link:hover .band__img,
  .band--link:focus-within .band__img{ transform:none !important; }
  .band--link:hover .band__more .arr{ transform:none !important; }
}


/* --- 9.12 Scroll-Zeitleisten auf den Projektseiten -----------------------
   Zwei Bewegungen, die an der Scrollposition haengen statt einmalig
   abzulaufen. Beide brauchen kein JavaScript: CSS-Scroll-Zeitleisten laufen
   im Compositor, ohne Scroll-Listener und ohne Neuberechnung im Hauptfaden.

   Wo der Browser sie nicht kennt, passiert nichts — dann bleibt es bei der
   vorhandenen Choreografie aus .rv. Das ist Absicht: Die Bewegung ist eine
   Zugabe, kein Traeger. Unter prefers-reduced-motion faellt sie ebenfalls weg,
   und zwar auf den Endzustand, nicht auf den Anfangszustand.
   -------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* 1 · Leseband. Ein Haarstrich ueber der Kopfleiste, der mitwaechst.
       Er sitzt an .page-hero--case und erscheint damit ausschliesslich auf
       Projektseiten — auf einer Leistungsseite waere ein Lesefortschritt
       eine Behauptung ueber die Textlaenge, die dort nicht stimmt. */
    .page-hero--case::after{
      content:""; position:fixed; inset:0 0 auto 0; height:3px; z-index:120;
      transform-origin:0 50%; transform:scaleX(0); pointer-events:none;
      background:linear-gradient(90deg,
        var(--mint-tief) 0%, var(--mint) 55%, var(--mint-hell) 100%);
      animation:leseband linear both;
      animation-timeline:scroll(root block);
    }
    @keyframes leseband{ to{ transform:scaleX(1); } }

    /* 2 · Bildstrecke. Die Kacheln steigen nicht auf einen Schlag ein,
       sondern folgen dem Scrollen: Beim Hereinfahren heben sie sich aus der
       Flaeche, beim Hinausfahren sinken sie zurueck. Weil die Bewegung an der
       Position haengt, laesst sie sich zurueckscrollen — das ist der ganze
       Unterschied zu einem Reveal, das einmal feuert und dann steht.

       Die innere Kachel traegt sonst ihre eigene Einblendung (.rv-img). Hier
       wird sie stillgelegt, sonst blendet dasselbe Bild zweimal ein. */
    .shots--strip .strip-grid > .shotfig{
      animation:kachelAuf linear both;
      animation-timeline:view();
      /* Eine einzige Phase, kein Mischen von entry und cover: Der Lauf
         ist beendet, sobald die Kachel ganz im Bild steht. Mit einem
         gemischten Bereich blieb die letzte Kachel in einem hohen
         Fenster auf halbem Weg stehen. */
      animation-range:entry 8% entry 92%;
      will-change:transform;
    }
    /* KEINE Deckkraft in diesen Keyframes. Sonst entscheidet eine
       Zeitleiste darueber, ob ein Bild zu sehen ist — und wenn sie
       nicht durchlaeuft, fehlt das Bild ganz. Das Einblenden macht
       weiterhin .rv-img. */
    @keyframes kachelAuf{
      from{ transform:translateY(30px) scale(0.972); }
      to  { transform:none; }
    }

    /* 3 · Die Fall-Daten unter der Buehne schieben sich beim Weiterscrollen
       leicht mit. Nur ein paar Pixel — genug, dass die Buehne beim Verlassen
       Tiefe bekommt, zu wenig, um als Effekt aufzufallen.

       KEINE Deckkraft — dieselbe Regel wie oben bei kachelAuf, und sie war
       hier bis zum 04.09.2026 gebrochen: opacity lief von 1 auf 0,55. Dass
       kein Schaden sichtbar wurde (das Element ist beim Abdunkeln schon aus
       dem Bild), aendert nichts daran, dass eine Zeitleiste damit ueber
       Sichtbarkeit entschied. Die Tiefenwirkung traegt translateY allein. */
    .page-hero--case .case-meta{
      animation:datenZieht linear both;
      animation-timeline:view();
      animation-range:exit 0% exit 100%;
    }
    @keyframes datenZieht{
      from{ transform:none; }
      to  { transform:translateY(-22px); }
    }
  }
}