/* =====================================================================
   case.css — gemeinsames Layout der beiden Case-Study-Seiten
   (thesis.html und comvm.html). Geladen NACH tokens.css.

   NICHT hier drin, weil je Seite verschieden:
     .hero .stage img   (Bildausschnitt des Hero)
     .hero::after       (Verlauf ueber dem Hero)
   sowie .draws / .media.doc (nur thesis) und
         .decision / .moodboard (nur comvm).
   Diese stehen weiterhin im <style> der jeweiligen Datei.
   ===================================================================== */

/* Nur seitenspezifisch — alles Uebrige steht in tokens.css */
  :root{--gut:clamp(1.1rem,4vw,3.2rem);--maxw:1280px;}
body{background-color:var(--paper);background-image:url(assets/texture-gold.png);background-size:340px;background-attachment:fixed;color:var(--ink);font-family:var(--read);font-size:var(--t-4);line-height:1.58;-webkit-font-smoothing:antialiased;overflow-x:clip}
.prog{position:fixed;top:0;left:0;height:3px;background:var(--ox);width:0;z-index:100;transition:width .1s linear}
/* Frueher mix-blend-mode:difference. Ueber einfarbigen Flaechen war das gut,
 ueber den grossen Bildstreifen konnte die Schrift fast verschwinden. Das Band
 mit .66 Deckkraft haelt selbst ueber einem reinweissen Bildbereich 5,7:1. */
nav.top{position:fixed;inset:0 0 auto 0;z-index:90;display:flex;align-items:center;justify-content:space-between;padding:.8rem var(--gut);background:rgba(16,11,7,.66);backdrop-filter:blur(10px) saturate(1.08);-webkit-backdrop-filter:blur(10px) saturate(1.08);border-bottom:1px solid rgba(244,239,228,.1);color:#F4EFE4}
nav.top a{text-decoration:none;font-family:var(--mono);font-size:var(--t-2);letter-spacing:.18em;text-transform:uppercase}
nav.top .bk::before{content:"←  "}
.hero .stage{position:absolute;inset:0;overflow:hidden}
.hero .inner{position:relative;z-index:2;color:#F4EFE4;padding:0 var(--gut);will-change:transform}
.hero .kick{font-family:var(--mono);font-size:var(--t-2);letter-spacing:.28em;text-transform:uppercase;color:rgba(244,239,228,.85);margin-bottom:1rem}
.hero h1{font-family:var(--didone);font-weight:500;text-transform:uppercase;letter-spacing:.04em;line-height:.88;font-size:var(--t-10);text-shadow:0 2px 40px rgba(0,0,0,.5)}
.hero h1 em{font-style:italic;text-transform:none;color:#E9B7A8}
.hero .sub{font-family:var(--read);font-style:italic;font-size:var(--t-5);margin-top:.8rem;color:#F4EFE4}
.hero .cue{position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);z-index:2;font-family:var(--mono);font-size:var(--t-1);letter-spacing:.24em;text-transform:uppercase;color:rgba(244,239,228,.8)}
main{position:relative;z-index:3;background-color:var(--paper);background-image:url(assets/texture-gold.png);background-size:340px}
/* Die Basiszeile MUSS hier stehen, nicht im Inline-style der Seiten: case.css wird
   vorher geladen, eine Kopie im Inline-style wuerde die Mobil-Regel unten totlegen. */
.meta{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.meta div{padding:1.1rem var(--gut);border-right:1px dashed var(--line-2)}
.meta div:last-child{border-right:0}
.meta dt{font-family:var(--mono);font-size:var(--t-1);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.4rem}
.meta dd{font-family:var(--didone);font-weight:500;font-size:var(--t-4);color:var(--ox-2);line-height:1.1}
@media(max-width:760px){.meta{grid-template-columns:1fr 1fr}.meta div{border-bottom:1px dashed var(--line-2)}.meta div:nth-child(2n){border-right:0}}
.lead p{font-family:var(--read);font-size:var(--t-6);line-height:1.28;color:var(--ink)}
.lead p em{font-style:italic;color:var(--ox-2)}
.step.flip{grid-template-columns:.82fr 1.18fr}
.step.flip .media{order:2}
.media{position:relative;display:grid;gap:.5rem}
.media.stack{grid-template-columns:1fr 1fr}
.media figure{position:relative;overflow:hidden;margin:0;background:var(--paper-2)}
.media img{width:100%;height:clamp(230px,36vh,360px);object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.media figure:hover img{transform:scale(1.04)}
.media.stack img{height:clamp(190px,30vh,300px);aspect-ratio:auto}
.media figcaption{position:absolute;left:0;bottom:0;font-family:var(--mono);font-size:var(--t-1);letter-spacing:.1em;text-transform:uppercase;color:#F4EFE4;background:rgba(20,14,10,.55);backdrop-filter:blur(4px);padding:.35rem .55rem}
.txt .num{font-family:var(--mono);font-size:var(--t-2);letter-spacing:.2em;text-transform:uppercase;color:var(--ox-2);display:block;margin-bottom:.7rem}
.txt h2{font-family:var(--didone);font-weight:500;font-size:var(--t-7);line-height:.98;letter-spacing:-.01em;margin-bottom:1rem}
.txt h2 em{font-style:italic;color:var(--ox-2)}
.txt p{font-size:var(--t-4);color:var(--ink-2);margin-bottom:1rem}
.txt p b{color:var(--ink);font-weight:500}
@media(max-width:820px){.step{grid-template-columns:1fr;gap:1.2rem}.step.flip .media{order:0}}
.used .ul{font-family:var(--mono);font-size:var(--t-1);letter-spacing:.18em;text-transform:uppercase;color:var(--ox-2);display:block;margin-bottom:.6rem;border-bottom:1px dashed var(--line-2);padding-bottom:.5rem}
.used dl{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.2rem}
.used dt{font-family:var(--mono);font-size:var(--t-1);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.used dd{font-family:var(--mono);font-size:var(--t-2);color:var(--ink);text-align:right}
.stat{display:flex;flex-wrap:wrap;gap:1.2rem 2.4rem;border-top:2px solid var(--ink);padding-top:1rem;margin-top:1.2rem}
.stat div{display:flex;flex-direction:column}
.stat b{font-family:var(--didone);font-weight:500;font-size:var(--t-6);color:var(--ox-2);line-height:1}
.stat span{font-family:var(--mono);font-size:var(--t-1);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-top:.3rem}
/* Vollbild-Moment. Lag bis 08/2026 als identische Kopie im <style> von fuenf
   Seiten — mymex.html wurde ohne sie gebaut, dadurch verlor die Bildunterschrift
   ihren Bezugsrahmen und rutschte ueber den Text darunter. Gehoert hierher. */
.full{position:relative;width:100vw;margin-inline:calc(50% - 50vw);overflow:hidden;
  height:clamp(320px,72vh,720px);margin-block:clamp(2rem,6vh,4.5rem)}
.full img{width:100%;height:100%;object-fit:cover;will-change:transform}
.full figcaption{position:absolute;left:var(--gut);bottom:1.1rem;font-family:var(--mono);font-size:var(--t-1);letter-spacing:.12em;text-transform:uppercase;color:#F4EFE4;background:rgba(20,14,10,.5);backdrop-filter:blur(3px);padding:.4rem .6rem}
.pullband{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(3rem,8vh,6rem) var(--gut)}
.pull{max-width:1000px;margin-inline:auto;font-family:var(--didone);font-weight:500;font-style:italic;font-size:var(--t-7);line-height:1.16;color:var(--ink)}
.end{text-align:center;padding:clamp(4rem,10vh,8rem) var(--gut)}
.end .big{font-family:var(--didone);font-weight:500;font-style:italic;font-size:var(--t-8)}
/* Zwei Ausgaenge statt einer Sackgasse: Kontakt + naechste Case Study */
  .end .mailto{display:inline-block;max-width:100%;overflow-wrap:anywhere;margin-top:1.6rem;font-family:var(--didone);font-weight:500;
    font-size:var(--t-6);color:var(--ink);text-decoration:none;
    border-bottom:2px solid var(--ox);padding-bottom:.12rem;text-transform:none;letter-spacing:0;
    transition:color .3s var(--ease),border-color .3s var(--ease)}
.end .mailto:hover{color:var(--ox-2);border-color:var(--ox-2)}
.end-links{display:flex;flex-wrap:wrap;gap:1rem 2.2rem;justify-content:center;margin-top:1.7rem}
.end-links a{margin-top:0}
.end a{display:inline-block;margin-top:1.6rem;font-family:var(--mono);font-size:var(--t-2);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--ox);padding-bottom:.3rem;color:var(--ox-2)}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none}.hero .stage img{inset:0;width:100%;height:100%}}

/* ---------- Zustaende ----------
   Die Fallstudien hatten keinen einzigen :hover und keinen :active. Genau hier
   liest eine Personalerin am laengsten - und nichts reagierte. Gleiche Gesten-
   sprache wie die Startseite: Farbe zu Ochsenrot, Pfeil wandert, leichtes Senken. */
nav.top a{transition:color .3s var(--ease)}
nav.top a:hover{color:#E9B7A8}
.bk{transition:color .3s var(--ease)}
.bk:hover{color:var(--ox-2)}
.bk:hover::before{transform:translateX(-4px)}
.bk::before{display:inline-block;transition:transform .3s var(--ease)}
.end a:hover{color:var(--ox-2)}
.end-links a{transition:color .3s var(--ease),border-color .3s var(--ease)}
.end-links a:hover{color:var(--ox-2);border-color:var(--ox-2)}
/* Tastdruck-Rueckmeldung: ein Recruiter oeffnet das Portfolio oft am Telefon,
   dort gibt es kein :hover - ohne :active passiert beim Antippen sichtbar nichts. */
nav.top a:active,.bk:active,.end a:active,.end-links a:active{transform:translateY(1px)}

/* ---------- Beruehrungsflaechen ----------
   Die Wirkung bleibt, wie sie ist: der sichtbare Text behaelt seine Groesse,
   darunter liegt unsichtbar ein 44 px hohes Feld. Das ist das Mindestmass,
   bei dem ein Daumen zuverlaessig trifft. Verlinkungen mitten im Fliesstext
   sind bewusst ausgenommen — dort waere ein grosses Feld eher stoerend. */
nav.top a,.end a,.end-links a,.decision-next .weiter,.bk{position:relative}
nav.top a::after,.end a::after,.end-links a::after,
.decision-next .weiter::after,.bk::after{content:"";position:absolute;
  left:-.3rem;right:-.3rem;top:50%;transform:translateY(-50%);height:44px}



/* ---------------------------------------------------------------
   Aus dem Inline-Stil der Startseite hierher gezogen: die Kapitel 03 und 04
   liegen jetzt auf eigenen Unterseiten (textile.html, buying.html) und
   brauchen dieselben Regeln. Doppelt pflegen waere die naechste Fehlerquelle.
   --------------------------------------------------------------- */
.kick{font-family:var(--mono);font-size:var(--t-2);letter-spacing:.26em;text-transform:uppercase;color:var(--ox-2)}
.kick.dim{color:var(--ink-soft)}
.more-in{padding-top:1.4rem}
/* Diese drei Bloecke lagen ohne eigenen Seitenrand im Layout. Auf schmalen
   Displays beruehrte der Fliesstext die Displaykante — die uebrigen Bausteine
   ziehen ihren Rand aus var(--gut), diese nicht. */
.body,.decision,.tpteaser{padding-inline:var(--gut)}
/* Ab 821px traegt main den Rand, darunter die Bausteine selbst. Vorher fiel der
   Rand ab 821px ersatzlos weg und der Text lief bis an die Fensterkante. */
@media(min-width:821px){.body,.tpteaser{padding-inline:0}}
main>*:not(.meta):not(.full):not(.pullband){width:min(var(--maxw),100% - 2*var(--gut));margin-inline:auto}
.body{display:grid;grid-template-columns:1.5fr .9fr;gap:clamp(1.6rem,4vw,4rem);margin-top:clamp(1.8rem,4vw,3rem);align-items:start}
.body .cols{columns:2;column-gap:2.2rem;column-rule:1px solid var(--line)}
.body .cols p{margin-bottom:.85rem;break-inside:avoid}
.body .cols p:first-of-type::first-letter{float:left;font-family:var(--didone);font-weight:500;font-size:3.5em;line-height:.72;padding:.05em .12em 0 0;color:var(--ox)}
.aside{border-top:2px solid var(--ink);padding-top:1rem}
.aside .kick{display:block;margin-bottom:1rem}
.metrics{display:flex;flex-direction:column;gap:.9rem}
.metrics div{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;border-bottom:1px dotted var(--line-2);padding-bottom:.55rem}
.metrics b{font-family:var(--didone);font-weight:500;font-size:var(--t-6);color:var(--ox-2);line-height:1}
.metrics span{font-family:var(--mono);font-size:var(--t-1);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);text-align:right;max-width:16ch}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.2rem}
.tag{font-family:var(--mono);font-size:var(--t-2);letter-spacing:.06em;text-transform:uppercase;padding:.32rem .6rem;border:1px solid var(--line-2);color:var(--ink-2)}
@media(max-width:820px){.body{grid-template-columns:1fr}.body .cols{columns:1}.head-over{max-width:100%}}
.hscroll{display:flex;align-items:flex-end;gap:.9rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:clamp(1.6rem,4vw,2.6rem) 0 .6rem;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--ox) transparent}
.hscroll::-webkit-scrollbar{height:5px}
.hscroll::-webkit-scrollbar-thumb{background:var(--ox);border-radius:10px}
/* Bildregie: gemeinsame Grundlinie, Breite folgt dem echten Seitenverhaeltnis.
     Querformate werden nicht mehr auf 4:5 beschnitten — das Material bestimmt die Form. */
  .hscroll figure{position:relative;flex:0 0 auto;height:clamp(210px,30vh,300px);
    scroll-snap-align:start;overflow:hidden;background:var(--paper-2)}
/* Das Eroeffnungsbild traegt den Streifen — Groesse erzaehlt, was wichtig ist. */
  .hscroll figure:first-child{height:clamp(280px,42vh,430px)}
.hscroll img{height:100%;width:auto;max-width:min(72vw,540px);object-fit:cover;
    transition:transform .7s var(--ease);filter:saturate(.96)}
.hscroll figure:hover img{transform:scale(1.05)}
/* liquid-glass zoom badge on hover */
  .hscroll figure::before{content:"⤢";position:absolute;z-index:3;top:.7rem;right:.7rem;width:38px;height:38px;display:grid;place-items:center;color:#fff;font-size:var(--t-4);border-radius:50%;background:rgba(255,255,255,.16);backdrop-filter:blur(9px) saturate(1.4);-webkit-backdrop-filter:blur(9px) saturate(1.4);border:1px solid rgba(255,255,255,.4);box-shadow:0 4px 20px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.5);opacity:0;transform:scale(.7) translateY(-4px);transition:.4s var(--ease)}
.hscroll figure:hover::before{opacity:1;transform:none}
.hscroll figcaption{position:absolute;inset:auto 0 0 0;z-index:2;font-family:var(--mono);font-size:var(--t-1);letter-spacing:.1em;text-transform:uppercase;color:#F4EFE4;background:rgba(20,14,10,.66);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-top:1px solid rgba(244,239,228,.14);padding:.45rem .6rem}
.hscroll figcaption b{color:#E9B7A8;font-weight:500}
/* Begruendete Einkaufsentscheidung — textgefuehrt, bricht das Bild-Text-Modul */
  /* Seitlich auto, sonst klebt der Kasten auf buying.html an der linken Kante.
     comvm.html hatte dafuer eine eigene Inline-Regel — die gilt jetzt fuer beide. */
  .decision{max-width:860px;margin:clamp(1.4rem,4vh,2.6rem) auto clamp(1.6rem,4vh,2.6rem);
    padding:clamp(1.4rem,3.5vw,2.4rem);border:1px solid var(--line-2);background:rgba(228,220,201,.45)}
/* Querverweis-Kasten: gleiche Bauform wie der Entscheidungsblock,
   aber ohne Aufzaehlung — er soll zur eigenen Seite weiterschicken. */
.decision-next{border-left:3px solid var(--ox)}
.decision-next .weiter{font-family:var(--mono);font-size:var(--t-2);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ox-2);text-decoration:none;
  border-bottom:1px solid var(--ox);padding-bottom:.25rem;
  transition:color .3s var(--ease),border-color .3s var(--ease)}
.decision-next .weiter:hover{color:var(--ink);border-color:var(--ink)}
.decision .dk{font-family:var(--mono);font-size:var(--t-1);letter-spacing:.16em;text-transform:uppercase;color:var(--ox-2);display:block}
.decision h2,.decision h4{font-family:var(--didone);font-weight:500;font-size:var(--t-7);line-height:1.02;letter-spacing:-.01em;margin:.7rem 0 1.1rem}
.decision h2 em,.decision h4 em{font-style:italic;color:var(--ox-2)}
.decision p{font-size:var(--t-4);color:var(--ink-2);line-height:1.62;margin-bottom:.9rem;max-width:62ch}
.decision p b{color:var(--ink);font-weight:500}
.decision p em{font-style:italic;color:var(--ink)}
.decision .used{margin-top:1.3rem;max-width:none}
.decision .used dl{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.2rem}
.decision .used dt{font-family:var(--mono);font-size:var(--t-1);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.decision .used dd{font-family:var(--mono);font-size:var(--t-2);color:var(--ink);text-align:right}
.decision .used .ul{font-family:var(--mono);font-size:var(--t-1);letter-spacing:.18em;text-transform:uppercase;color:var(--ox-2);display:block;margin-bottom:.6rem;border-bottom:1px dashed var(--line-2);padding-bottom:.5rem}
.tpteaser{display:grid;grid-template-columns:1.25fr 1fr;border:1px solid var(--line-2);margin-top:1.6rem;background:var(--paper-2);transition:border-color .3s}
.tpteaser:hover{border-color:var(--ox)}
.tpteaser .thumb{overflow:hidden;background:#fff;aspect-ratio:16/10}
.tpteaser .thumb img{width:100%;height:100%;object-fit:contain;background:#fff;transition:transform .6s var(--ease)}
.tpteaser:hover .thumb img{transform:scale(1.03)}
.tpteaser .meta{padding:clamp(1.3rem,3vw,2.3rem);display:flex;flex-direction:column;justify-content:center;gap:.5rem;border-left:1px solid var(--line-2)}
.tpteaser .meta h4{font-family:var(--didone);font-weight:500;font-size:var(--t-6)}
.tpteaser .meta p{color:var(--ink-2);font-size:var(--t-3)}
@media(max-width:600px){.tpteaser{grid-template-columns:1fr}.tpteaser .meta{border-left:0;border-top:1px solid var(--line-2)}}
/* ---------- chapter beats (holistic feature) ---------- */
  .beat{margin-top:clamp(2.6rem,6vw,5rem)}
.beat-head{display:flex;align-items:baseline;gap:1rem;border-top:1px solid var(--ink);padding-top:1rem;margin-bottom:1.3rem}
.beat-head .bn{font-family:var(--mono);font-size:var(--t-2);letter-spacing:.14em;color:var(--ox-2);white-space:nowrap}
.beat-head h2,.beat-head h4{font-family:var(--didone);font-weight:500;font-size:var(--t-6);line-height:1;letter-spacing:-.01em}
.beat-head h2 em,.beat-head h4 em{font-style:italic;color:var(--ox-2)}
.beat .lead{font-family:var(--read);font-size:var(--t-5);color:var(--ink-2);max-width:62ch}
.beat .lead b{color:var(--ink);font-weight:500}
/* ---------- textile lab · standards ---------- */
  .lab{width:min(var(--maxw),100% - 2*var(--gut));margin:clamp(1.2rem,2.4vw,2.2rem) auto;position:relative;z-index:2}
.lab-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-bottom:2px solid var(--ink);padding-bottom:1rem;margin-bottom:.2rem}
.lab-head h2,.lab-head h3{font-family:var(--didone);font-weight:500;font-size:var(--t-7);letter-spacing:-.01em}
.lab-head h2 em,.lab-head h3 em{font-style:italic;color:var(--ox-2)}
.lab-head p{font-family:var(--read);font-style:italic;color:var(--ink-2);max-width:34ch}
/* Feste Spaltenzahlen statt auto-fill: 8 Kacheln gehen nur bei 1, 2 oder 4 Spalten auf.
     auto-fill lieferte bei 1240px fuenf Spalten — die letzte Reihe blieb zu zwei Fuenfteln
     leer und zeigte den dunklen Containerhintergrund. */
  .lab-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-2);border-left:1px solid var(--line-2);border-right:1px solid var(--line-2)}
@media(max-width:900px){.lab-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.lab-grid{grid-template-columns:1fr}}
.lab-grid div{background:var(--paper);padding:1.2rem 1.2rem 1.4rem;transition:background .3s}
.lab-grid div:hover{background:var(--paper-2)}
.lab-grid .n{font-family:var(--mono);font-size:var(--t-1);letter-spacing:.14em;color:var(--ox-2);display:block;margin-bottom:.7rem}
.lab-grid .t{font-family:var(--didone);font-weight:500;font-size:var(--t-5);line-height:1.05;display:block}
.lab-grid .s{font-family:var(--mono);font-size:var(--t-1);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-top:.5rem}
.pl-head .kick{display:block;margin-bottom:.7rem}
.dcase-r .metrics div b{font-size:var(--t-6)}


/* Data-Index: Regeln fuer data.html. Der Abschnitt lag frueher nur auf der
   Startseite; ohne diese Regeln lief die Fallliste als unformatierter Textblock. */
.scrollcue .dot{width:1px;height:34px;background:rgba(244,239,228,.6);animation:cue 2.2s var(--ease) infinite}
/* ---------- DATA directory ---------- */
  .directory{padding-block:clamp(1.8rem,3.4vw,3rem)}
/* ---------- self-drawing data viz ---------- */
  /* D—01 als ausgefuehrte Case Study — steht dort, wo vorher die Deko-Grafik war */
  .dcase{border:1px solid var(--line-2);background:rgba(228,220,201,.4);padding:clamp(1.3rem,3vw,2.4rem);
    margin:1.4rem 0 2.4rem;display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(1.4rem,4vw,3rem)}
.dcase-l h2,.dcase-l h3{font-family:var(--didone);font-weight:500;font-size:var(--t-6);line-height:1.06;margin:.5rem 0 1rem}
.dcase-l h2 em,.dcase-l h3 em{font-style:italic;color:var(--ox-2)}
.dcase-l p{font-size:var(--t-3);color:var(--ink-2);line-height:1.55;margin-bottom:.8rem}
.dcase-l p b{color:var(--ink);font-weight:500}
.dcase-foot{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;justify-content:space-between;align-items:baseline;
    border-top:1px solid var(--line-2);padding-top:.8rem;margin-top:1.1rem}
.dcase-team{font-family:var(--mono);font-size:var(--t-1);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.dcase-foot a{font-family:var(--mono);font-size:var(--t-1);letter-spacing:.1em;text-transform:uppercase;
    color:var(--ox-2);text-decoration:none;border-bottom:1px solid var(--ox);padding-bottom:.15rem;white-space:nowrap}
.dcase-r{display:flex;flex-direction:column;gap:1rem}
.dvk{font-family:var(--mono);font-size:var(--t-1);letter-spacing:.16em;text-transform:uppercase;color:var(--ox-2);display:block}
.dv-stacks{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:auto}
.dv-stacks span{font-family:var(--mono);font-size:var(--t-1);letter-spacing:.05em;text-transform:uppercase;border:1px solid var(--line-2);padding:.3rem .55rem;color:var(--ink-2)}
@media(max-width:820px){.dcase{grid-template-columns:1fr}}
/* medallion pipeline (bronze/silver/gold) self-drawing */
  .medallion{border:1px solid var(--line-2);background:rgba(228,220,201,.4);padding:clamp(1.3rem,3vw,2rem) clamp(1.3rem,3vw,2.2rem) clamp(1rem,2.5vw,1.6rem);margin:0 0 2rem}
.medallion .mk{font-family:var(--mono);font-size:var(--t-1);letter-spacing:.16em;text-transform:uppercase;color:var(--ox-2);display:block;margin-bottom:.9rem}
.med-svg{width:100%;height:auto;overflow:visible;display:block}
.med-track{fill:none;stroke:var(--line-2);stroke-width:1.5;stroke-dasharray:6 6}
.med-draw{fill:none;stroke:var(--ox);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:640;stroke-dashoffset:640;transition:stroke-dashoffset 2.2s var(--ease)}
[data-reveal].in .med-draw{stroke-dashoffset:0}
.med-node{opacity:0;transform:scale(0);transform-origin:center;transform-box:fill-box;transition:opacity .5s var(--ease),transform .5s var(--ease)}
[data-reveal].in .med-node{opacity:1;transform:scale(1)}
[data-reveal].in .med-node.n1{transition-delay:.25s}
[data-reveal].in .med-node.n2{transition-delay:1s}
[data-reveal].in .med-node.n3{transition-delay:1.75s}
.med-nlabel{font-family:var(--mono);font-size:var(--t-1);letter-spacing:.06em;fill:var(--paper);text-anchor:middle;opacity:0;transition:opacity .5s var(--ease)}
[data-reveal].in .med-nlabel{opacity:1}
[data-reveal].in .med-nlabel.n1{transition-delay:.45s}
[data-reveal].in .med-nlabel.n2{transition-delay:1.2s}
[data-reveal].in .med-nlabel.n3{transition-delay:1.95s}
.med-labels{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.1rem}
.med-labels .ml b{font-family:var(--didone);font-weight:500;font-size:var(--t-5);display:block}
/* Die Farbcodierung der Datenstufen bleibt erhalten, wandert aber von der
     Schriftfarbe in ein Plaettchen: Gold auf Papier erreichte nur 1,9:1. */
  .med-labels .ml b .dot{display:inline-block;width:.62em;height:.62em;border-radius:2px;
    margin-right:.5em;vertical-align:baseline;box-shadow:0 0 0 1px rgba(27,23,20,.25)}
.med-labels .ml span{font-family:var(--mono);font-size:var(--t-1);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-top:.25rem}
@media(max-width:600px){.med-labels{grid-template-columns:1fr;gap:.5rem}}
.dir-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-bottom:2px solid var(--ink);padding-bottom:1rem;margin-bottom:.4rem}
.dir-head h2{font-family:var(--didone);font-weight:500;font-size:var(--t-7);letter-spacing:-.01em}
.dir-head a{text-decoration:none}
.dir a.row{display:grid;grid-template-columns:auto 1.3fr 1.7fr auto;gap:1.2rem;align-items:baseline;padding:1.2rem 0;border-bottom:1px solid var(--line);text-decoration:none;transition:padding-left .35s var(--ease),background .3s}
.dir a.row:hover{padding-left:1rem;background:linear-gradient(90deg,rgba(178,58,40,.08),transparent)}
.dir .dn{font-family:var(--mono);font-size:var(--t-2);letter-spacing:.08em;color:var(--ox-2)}
.dir .dt{font-family:var(--didone);font-weight:500;font-size:var(--t-5);line-height:1.05}
.dir .dd{font-family:var(--read);font-size:var(--t-3);color:var(--ink-2);line-height:1.4}
.dir .dx{font-family:var(--mono);font-size:var(--t-2);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;transition:transform .35s var(--ease),color .3s}
.dir a.row:hover .dx{color:var(--ox-2);transform:translateX(4px)}
@media(max-width:760px){.dir a.row{grid-template-columns:auto 1fr auto;row-gap:.5rem}
    .dir .dd{grid-column:1 / -1;order:3}.dir .dx{order:2}}
@media(prefers-reduced-motion:reduce){
    [data-reveal]{opacity:1!important;transition:none}
    /* Die beiden Dauerschleifen muessen mit: 42-s-Logoband und Scroll-Punkt. */
    .marquee .track{animation:none;transform:none}
    .scrollcue .dot{animation:none}
    *{scroll-behavior:auto!important}
  }

/* ---------- Lightbox ----------
   Geruest und Verhalten stehen in case.js; die Unterseiten hatten vorher
   einen Lupenzeiger ohne Funktion. */
.lb{position:fixed;inset:0;z-index:200;background:rgba(18,12,8,.55);backdrop-filter:blur(20px) saturate(1.1);-webkit-backdrop-filter:blur(20px) saturate(1.1);display:none;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3.5rem);opacity:0;transition:opacity .35s var(--ease)}
.lb.open{display:flex;opacity:1}
.lb .glass{position:relative;max-width:min(1120px,94vw);display:flex;flex-direction:column;border:1px solid rgba(244,239,228,.26);border-radius:16px;overflow:hidden;background:rgba(244,239,228,.05);box-shadow:0 40px 100px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.16);transform:scale(.96);transition:transform .4s var(--ease)}
.lb.open .glass{transform:none}
.lb img{max-width:100%;max-height:74vh;object-fit:contain;display:block;background:rgba(0,0,0,.15)}
.lb .lbinfo{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1.2rem;background:rgba(20,14,10,.34);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid rgba(244,239,228,.16)}
.lb .lbcap{font-family:var(--mono);font-size:var(--t-1);letter-spacing:.12em;text-transform:uppercase;color:#F4EFE4}
.lb .lbidx{font-family:var(--mono);font-size:var(--t-1);letter-spacing:.14em;color:rgba(244,239,228,.6)}
.lb button{position:absolute;z-index:2;color:#F4EFE4;font-family:var(--mono);font-size:var(--t-4);width:48px;height:48px;border-radius:50%;cursor:pointer;background:rgba(255,255,255,.12);backdrop-filter:blur(10px) saturate(1.3);-webkit-backdrop-filter:blur(10px) saturate(1.3);border:1px solid rgba(255,255,255,.34);box-shadow:inset 0 1px 0 rgba(255,255,255,.4);transition:background .25s,transform .25s}
.lb button:hover{background:var(--ox);border-color:var(--ox);transform:scale(1.08)}
.lb .lbx{top:1.1rem;right:1.2rem}
.lb .lbp{left:1.3rem;top:50%;transform:translateY(-50%)}
.lb .lbn{right:1.3rem;top:50%;transform:translateY(-50%)}
.lb .lbp:hover,.lb .lbn:hover{transform:translateY(-50%) scale(1.08)}
.lb button.hide{display:none}
.zoomable{cursor:zoom-in}
.zoomable:focus-visible{outline:2px solid var(--ox);outline-offset:3px}

/* ---------- Der Ergebnis-Moment ----------
   Kritik von aussen, berechtigt: die staerkste Zahl jedes Projekts stand
   klein in der Kennzahlenleiste und ging unter. Sie bekommt jetzt eine
   eigene Bahn, frueh auf der Seite — ein Personaler sieht in drei Sekunden,
   was herausgekommen ist, bevor er entscheidet, ob er weiterliest.
   Dunkel, weil der Rest der Seite Papier ist: ein Bruch, kein Kasten. */
.ergebnis{width:100vw;margin-inline:calc(50% - 50vw);
  background:radial-gradient(120% 140% at 22% 0%,#2A211A,#15100C 70%);
  color:#F4EFE4;padding:clamp(2.6rem,7vh,4.4rem) 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-block:clamp(1.6rem,4vh,2.8rem)}
.erg-in{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);
  display:grid;grid-template-columns:auto 1fr;gap:clamp(1.4rem,5vw,4rem);align-items:center}
.erg-zahl{font-family:var(--didone);font-weight:500;line-height:.82;
  font-size:clamp(4.4rem,13vw,10rem);letter-spacing:-.03em;color:#F4EFE4;white-space:nowrap}
.erg-zahl em{font-style:italic;color:#E9B7A8}
.erg-txt{max-width:44ch}
.erg-txt .kick{color:#E9B7A8;display:block;margin-bottom:.7rem}
.erg-txt p{font-family:var(--didone);font-weight:500;font-style:italic;
  font-size:var(--t-5);line-height:1.22;color:#F4EFE4;margin:0 0 .8rem}
.erg-txt .sub{font-family:var(--mono);font-size:var(--t-1);letter-spacing:.14em;
  text-transform:uppercase;color:rgba(244,239,228,.6);line-height:1.8}
@media(max-width:760px){
  .erg-in{grid-template-columns:1fr;gap:1.2rem}
  .erg-zahl{font-size:clamp(3.6rem,22vw,6rem)}
}