/* ══════════════════════════════════════════════════════════════════════
   FALLSTUDIEN — „Der Beweis, in drei Beweiskraften"
   Gleiche Grammatik wie Startseite und Referenzen. Die Hierarchie ist
   wieder die Ehrlichkeit:
     ein ausgefuehrtes Projekt (Loshaj)         → volle Welt, echte Farben
     Befunde aus echten Pruefungen (anonym)      → eine Zahlenflaeche
     Konzept-Entwuerfe (anonym, kein Auftrag)    → ein Bogen
     213 fremde Startseiten                       → eine Zahlenflaeche
   Keine neuen Farben — alle aus styles.css :root. Kein box-shadow.
   Schriftgroessen NUR aus der Type-Skala (--t-*, styles.css :root);
   Ausnahmen sind allein die Riesenziffern (.werte b, .zahlen b) —
   Bildelemente aus Schrift, dort einzeln begruendet.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Auftakt ── */
.auftakt__vor{
  margin-top:1.1em;
  max-width:46ch;
  font-size:var(--t-vorsatz);   /* Lead unter der H1 */
  line-height:1.36;
  color:var(--leise);
  text-wrap:pretty;
}
.dach--seite{
  font-family:Mono,monospace;
  font-size:var(--t-label);
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--leise);
  margin-bottom:1.1em;
}
/* Diese Seite hat KEIN Auftakt-Bild — ohne Override erbte sie bei
   schmalen Schirmen trotzdem den Bildplatz-Abstand der Bild-Auftakte
   (26svh, styles.css SCHMAL): 239 px leere Flaeche vor dem Kopf.
   Rechtsseiten starten bei y≈20 — hier genauso kompakt. */
@media (max-width:860px){
  .auftakt--unter{padding-top:clamp(1rem,3vh,2rem)}
}

/* ══════════════ 01 · DAS PROJEKT (Loshaj) ══════════════
   Wortwoertlich die Grammatik der Referenzen-Welt: gelber Grund, das
   Geraet mit vier umschaltbaren Bildschirmen, echte Farben.            */
.lade--echt{
  --w-grund:#f4c400;
  --w-tinte:#111111;
  --w-strich:#111111;
  --leise:#4a4a4a;      /* auf Gelb 5,3:1 — gerechnet wie in referenzen.css */
  --knall-text:#9c003c; /* auf Gelb 5,1:1 */
  position:static;height:auto;
  background:var(--w-grund);
  color:var(--w-tinte);
}
.lade--echt .buehne{
  height:auto;min-height:100svh;
  display:grid;
  grid-template-columns:minmax(0,1fr) min(54%,720px);
  align-items:center;
  column-gap:clamp(2rem,5vw,4rem);
  padding:calc(var(--rand) * 1.1) var(--rand) calc(var(--rand) * 1.1) var(--achse);
  position:relative;
}
.lade--echt .satz--echt{grid-column:1;grid-row:1;align-self:center}
.schau{grid-column:2;grid-row:1;z-index:1}
.schau__wahl{position:absolute;width:1px;height:1px;opacity:0;margin:0}

.lade__titel{
  margin:.5em 0 0;
  font-family:Schibsted,sans-serif;
  font-weight:900;
  font-size:var(--t-haupt);   /* Sektions-Hero, wie .zwei */
  line-height:.9;
  letter-spacing:-.048em;
}
.lade__text{
  margin-top:1em;
  max-width:40ch;
  font-size:var(--t-text);
  line-height:1.38;
  color:var(--leise);
  text-wrap:pretty;
}
.lade__zitat{
  margin-top:clamp(1.6rem,5vh,2.6rem);
  max-width:28ch;
  font-family:Schibsted,sans-serif;
  font-weight:900;
  font-size:var(--t-zeile);   /* herausgehobene Zeile */
  line-height:1.06;
  letter-spacing:-.03em;
  text-wrap:balance;
}
.lade__quelle{
  margin-top:.9em;
  font-family:Mono,monospace;
  font-size:var(--t-label);
  letter-spacing:.12em;
  color:var(--leise);
}

/* Die drei Lighthouse-Werte: gestaffelt, nicht in einer Reihe.
    EHRLICH: zwei echte 100, eine echte 96 — die Zahlen tragen die Farbe. */
.werte{
  display:flex;flex-wrap:wrap;align-items:flex-end;
  gap:.4em clamp(1.2rem,4vw,2.8rem);
  margin-top:clamp(1.8rem,6vh,3rem);
}
.werte li{display:flex;flex-direction:column}
.werte li:nth-child(2){transform:translateY(.34em)}
.werte li:nth-child(3){transform:translateY(.68em)}
.werte b{
  font-family:Schibsted,sans-serif;font-weight:900;
  /* AUSNAHME zur Skala: Riesenziffern (100/100/96) — Bildelement aus
     Schrift, wie in styles.css :root festgehalten */
  font-size:clamp(2.4rem,7.4vw,5rem);
  line-height:.84;letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;
  color:var(--strom);
}
.werte span{
  margin-top:.5em;
  font-family:Mono,monospace;
  font-size:var(--t-label);
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--leise);
}
.lade__fuss{
  margin-top:clamp(1.6rem,5vh,2.4rem);
  font-family:Mono,monospace;
  font-size:var(--t-label);
  letter-spacing:.1em;line-height:1.6;
  color:var(--leise);
  max-width:44ch;text-wrap:pretty;
}
.lade__tat{margin-top:clamp(1.4rem,4vh,2.2rem)}
.lade__tat a{
  display:inline-flex;align-items:center;gap:.6em;
  text-decoration:none;
  font-family:Schibsted,sans-serif;font-weight:900;
  font-size:var(--t-text);   /* wie .lade__tat a in referenzen.css — bleibt einzeilig neben der Fahne */
  letter-spacing:-.02em;
  color:var(--knall-text);
}
.lade__tat span{border-bottom:2px solid currentColor;padding-bottom:.06em}
.lade__tat a:hover .pfeil{transform:translateX(.22em)}

/* ── Das Geraet (Laptop) mit vier echten Loshaj-Aufnahmen ── */
.mac{margin:0}
.mac__deckel{background:#1d1d1f;border-radius:14px;padding:12px 12px 16px}
.mac__rahmen{position:relative;border-radius:5px;overflow:hidden;aspect-ratio:1200/750;background:#000}
.mac__kamera{position:absolute;top:-8px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#3a3a3d;z-index:2}
.mac__schirm{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;opacity:0;transition:opacity .4s var(--schwung)}
.mac__schirm--1{opacity:1}
#los-2:checked ~ .mac .mac__schirm--1,
#los-3:checked ~ .mac .mac__schirm--1,
#los-4:checked ~ .mac .mac__schirm--1{opacity:0}
#los-2:checked ~ .mac .mac__schirm--2,
#los-3:checked ~ .mac .mac__schirm--3,
#los-4:checked ~ .mac .mac__schirm--4{opacity:1}
.mac__fuss{position:relative;height:11px;width:106%;margin-left:-3%;border-radius:0 0 10px 10px;background:linear-gradient(#c9c9cd,#9a9aa0)}
.mac__kerbe{position:absolute;top:0;left:50%;width:92px;height:6px;margin-left:-46px;border-radius:0 0 7px 7px;background:#8a8a90}

/* Die vier Textwege unter dem Geraet */
.schau__wege{display:flex;flex-wrap:wrap;gap:0 clamp(1rem,2.6vw,1.9rem);margin-top:1.1rem}
.schau__wege label{
  display:flex;align-items:center;min-height:44px;
  font-family:Mono,monospace;font-size:var(--t-label);
  letter-spacing:.14em;text-transform:uppercase;color:var(--leise);
  border-bottom:2px solid transparent;cursor:pointer;
  transition:color .2s var(--schwung),border-color .2s var(--schwung);
}
.schau__wege label:hover{color:var(--tinte)}
/* Unterstrich der gewaehlten Taste: WAR var(--knall) — das volle #e8005a
   traegt auf dem Gelb der Buehne nur 2,8:1 (unter den 3:1 fuer
   Bedienelemente). var(--knall-text) ist im .lade--echt-Block schon auf
   Gelb gerechnet: #9c003c, 5,1:1 — dieselbe Korrektur wie referenzen.css. */
#los-1:checked ~ .schau__wege label[for="los-1"],
#los-2:checked ~ .schau__wege label[for="los-2"],
#los-3:checked ~ .schau__wege label[for="los-3"],
#los-4:checked ~ .schau__wege label[for="los-4"]{color:var(--tinte);border-bottom-color:var(--knall-text)}
#los-1:focus-visible ~ .schau__wege label[for="los-1"],
#los-2:focus-visible ~ .schau__wege label[for="los-2"],
#los-3:focus-visible ~ .schau__wege label[for="los-3"],
#los-4:focus-visible ~ .schau__wege label[for="los-4"]{outline:2px solid var(--knall);outline-offset:.3em}

@media (max-width:860px){
  .lade--echt .buehne{
    grid-template-columns:minmax(0,1fr);
    row-gap:clamp(1.6rem,5vh,2.6rem);
    padding:calc(var(--rand) * 1.1) var(--rand);
  }
  .schau{grid-column:1;grid-row:1}
  .lade--echt .satz--echt{grid-column:1;grid-row:2}
  /* Die Fahne sass absolut am Buehnen-Boden (styles.css) und lag dort
     auf dem Link „loshaj-regalbau.de ansehen" — sie fing dessen Taps ab.
     Schmal deshalb in den Fluss, als letzte Grid-Zeile. Der linke
     Einzug haelt ihre alte Satzkante (--achse) und damit Abstand zur
     vertikalen Schienen-Nummer „01" am Buehnen-Boden. */
  .lade--echt .fahne{position:static;grid-column:1;margin:0 0 0 calc(var(--achse) - var(--rand))}
}

/* ══════════════ 02 · DIE BEFUNDE (anonyme Audits) ══════════════
   Helles Blau wie die Messungsflaeche der Referenzen — dieselbe Sprache
   fuer „nachgemessen". Drei echte Pruefungen als Karten, jede ein Gewerk
   und eine grobe Region, darunter die WOERTLICHEN Befunde.             */
.befunde{
  position:relative;z-index:1;
  background:#e9eeff;color:var(--tinte);
  padding:clamp(4rem,14vh,8rem) var(--rand) clamp(3.4rem,11vh,6rem);
}
.befunde > *{max-width:1240px;margin-inline:auto}
.befunde .dach--seite{color:#3f4a7a}
.befunde__vor{
  max-width:60ch;margin-bottom:clamp(2.4rem,8vh,4rem);
  font-size:var(--t-vorsatz);line-height:1.42;color:#39405e;text-wrap:pretty;
}
.befunde__feld{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:clamp(1.4rem,3vw,2.4rem);
  align-items:start;
}
.fall{
  margin:0;
  background:var(--papier);
  border:1px solid rgba(47,91,255,.22);
  padding:clamp(1.4rem,3vw,2rem);
  display:flex;flex-direction:column;
}
.fall__gewerk{
  font-family:Schibsted,sans-serif;font-weight:900;
  font-size:var(--t-zeile);   /* kleiner Titel der Karte */
  line-height:1.02;letter-spacing:-.03em;
}
.fall__ort{
  margin-top:.35em;
  font-family:Mono,monospace;font-size:var(--t-label);
  letter-spacing:.14em;text-transform:uppercase;color:#5a6285;
}
.fall__liste{margin:clamp(1.1rem,3vh,1.6rem) 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.7em}
.fall__liste li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:.6em;align-items:start;
  font-size:var(--t-text);line-height:1.34;text-wrap:pretty;
  padding-top:.7em;border-top:1px solid rgba(17,17,17,.1);
}
.fall__liste li:first-child{border-top:0;padding-top:0}
.fall__marke{
  color:var(--knall-text);font-weight:700;
  font-variant-numeric:tabular-nums;line-height:1.34;
}
.fall__liste b{font-weight:700;color:var(--tinte)}
.fall__liste span{color:var(--leise);display:block;margin-top:.1em;font-size:var(--t-klein)}
.fall__fuss{
  margin-top:auto;padding-top:clamp(1rem,3vh,1.5rem);
  font-family:Mono,monospace;font-size:var(--t-label);
  letter-spacing:.1em;color:#5a6285;line-height:1.5;text-wrap:pretty;
}
.befunde__fuss{
  margin-top:clamp(2rem,6vh,3rem);max-width:62ch;
  font-family:Mono,monospace;font-size:var(--t-label);
  letter-spacing:.08em;line-height:1.7;color:#4b5378;
}

/* ══════════════ 03 · DIE BANDBREITE (Konzept-Entwuerfe) ══════════════
   Helles Magenta wie der Studien-Bogen der Referenzen. Drei Konzept-
   Vorher/Nachher, ehrlich als Entwurf gerahmt, anonym.                */
.bogen{
  position:relative;z-index:1;
  background:#fce8f0;
  padding:clamp(4rem,14vh,8rem) var(--rand) clamp(3rem,10vh,6rem);
}
.bogen > *{max-width:1240px;margin-inline:auto}
.zwei{
  margin:0 auto clamp(1.4rem,4vh,2.2rem);max-width:1240px;
  font-family:Schibsted,sans-serif;font-weight:900;
  font-size:var(--t-haupt);line-height:.94;letter-spacing:-.045em;text-wrap:balance;
}
.bogen__warnung{
  max-width:60ch;margin-bottom:clamp(2.4rem,8vh,4rem);
  font-size:var(--t-vorsatz);line-height:1.42;color:var(--leise);text-wrap:pretty;
}
.bogen__warnung b{color:var(--tinte);border-bottom:2px solid var(--knall)}

/* Die Studien im Geraet — dieselbe Grammatik wie referenzen.css .probe:
   vier (hier drei) Proben auf einem Bogen, ohne Rahmen, ohne Schatten,
   unterschiedlich hoch abgesetzt. Die Bilder sind quer (1200/750). */
.bogen__feld{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));
  gap:clamp(1.2rem,3.4vw,2.4rem);
  align-items:start;
}
.probe{margin:0;position:relative}
.probe:nth-child(2){transform:translateY(clamp(1rem,4vh,2.6rem))}
.probe__feld{position:relative;display:block;isolation:isolate}
.probe figcaption{margin-top:.9em;display:flex;flex-direction:column;gap:.35em}
.probe figcaption b{
  font-family:Schibsted,sans-serif;font-weight:900;
  font-size:var(--t-text);letter-spacing:-.02em;
}
.probe figcaption span{
  font-family:Mono,monospace;font-size:var(--t-label);
  letter-spacing:.1em;color:var(--leise);
}
/* Dasselbe Geraet, kleiner (referenzen.css .mac--klein) */
.mac--klein{display:block}
.mac--klein .mac__deckel{display:block;border-radius:8px;padding:6px 6px 8px}
.mac--klein .mac__rahmen{display:block;border-radius:3px}
.mac--klein .mac__fuss{display:block;height:6px;border-radius:0 0 6px 6px}
.mac--klein .mac__kerbe{width:46px;height:3px;margin-left:-23px;border-radius:0 0 4px 4px}
.probe .probe__feld .mac .mac__rahmen img{
  filter:none;width:100%;height:100%;aspect-ratio:auto;
  position:absolute;inset:0;object-fit:cover;object-position:50% 0;display:block;
}
.bogen__nach{
  margin-top:clamp(2.4rem,7vh,4rem);max-width:60ch;
  font-family:Mono,monospace;font-size:var(--t-label);
  letter-spacing:.08em;line-height:1.7;color:var(--leise);
}
.bogen__nach a{color:var(--knall-text);text-decoration:underline;text-underline-offset:.15em}
@media (max-width:860px){
  .probe:nth-child(2){transform:none}
}

/* ══════════════ 04 · DIE MESSUNG (213) ══════════════
   Wortwoertlich die Messungsflaeche der Referenzen — helles Blau, die
   Zahlen tragen die Farbe.                                            */
.messung{
  position:relative;z-index:1;
  background:#e9eeff;color:var(--tinte);
  padding:clamp(4rem,14vh,8rem) var(--rand) clamp(3.4rem,11vh,6rem);
}
.messung > *{max-width:1240px;margin-inline:auto}
.zwei--hell{color:var(--tinte)}
.messung .dach--seite{color:#3f4a7a}
.messung__vor{
  max-width:56ch;margin-bottom:clamp(2.4rem,8vh,4rem);
  font-size:var(--t-vorsatz);line-height:1.42;color:#39405e;text-wrap:pretty;
}
.zahlen{margin:0;padding:0;list-style:none}
.zahlen li{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:.3em clamp(1.4rem,4vw,3rem);align-items:baseline;
  padding:clamp(1rem,3vh,1.7rem) 0;border-top:1px solid rgba(47,91,255,.22);
}
.zahlen b{
  font-family:Schibsted,sans-serif;font-weight:900;
  /* AUSNAHME zur Skala: Riesenziffern (91,4 % …) — Bildelement aus
     Schrift, wie in styles.css :root festgehalten */
  font-size:clamp(2.2rem,8vw,5.4rem);line-height:.86;letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;color:var(--strom);
}
.zahlen span{font-size:var(--t-text);line-height:1.3;color:var(--tinte);text-wrap:pretty}
.zahlen i{font-style:normal;font-family:Mono,monospace;font-size:var(--t-label);letter-spacing:.14em;color:#5a6285}
.messung__fuss{
  margin-top:clamp(2rem,6vh,3rem);max-width:56ch;
  font-family:Mono,monospace;font-size:var(--t-label);
  letter-spacing:.1em;line-height:1.7;color:#4b5378;
}
.lade__tat--hell{margin-top:clamp(1.6rem,5vh,2.6rem)}
.lade__tat--hell a{color:#2145d8}
@media (min-width:820px){
  .zahlen li{grid-template-columns:minmax(0,11rem) minmax(0,1fr) minmax(0,12rem)}
  /* AUSNAHME zur Skala: dieselbe Riesenziffer, in der 11rem-Spalte
     gedeckelt, damit „88,2 %" die Spalte nicht sprengt */
  .zahlen b{font-size:clamp(2rem,4.4vw,3rem)}
}

/* ══════════════ SCHLUSS ══════════════ */
.schluss--unter{padding-top:clamp(4rem,14vh,8rem)}

/* ══════════════ BEWEGUNG ══════════════ */
@media (prefers-reduced-motion: no-preference){
  @keyframes fs-ein{from{opacity:0;transform:translateY(24px)}44%{opacity:1}to{opacity:1;transform:none}}
  .lade--echt .dach{animation:fs-ein .8s var(--schwung) .05s both}
  .lade--echt .lade__titel{animation:fs-ein .95s var(--schwung) .14s both}
  .lade--echt .lade__text{animation:fs-ein .9s var(--schwung) .26s both}
  .lade--echt .lade__zitat{animation:fs-ein .9s var(--schwung) .38s both}
  .lade--echt .werte li{animation:fs-ein .9s var(--schwung) calc(.48s + var(--i,0) * .09s) both}
  .werte li:nth-child(1){--i:0}
  .werte li:nth-child(2){--i:1}
  .werte li:nth-child(3){--i:2}
  @supports (animation-timeline: view()){
    .fall,.entwurf,.zahlen li,.zwei{
      animation:fs-ein linear both;animation-timeline:view();animation-range:entry 8% entry 72%;
    }
  }
}

/* ══════════════ SCHMAL ══════════════ */
@media (max-width:860px){
  .werte li:nth-child(2),.werte li:nth-child(3){transform:none}
}


/* ══════════════ BELEBT — der iOS-Ersatz fuer die view()-Einblendungen ══
   iOS-Safari kennt animation-timeline nicht; assets/beleben.js setzt dort
   html.belebt und vergibt beim Eintritt ins Bild die Klasse .da (Gate und
   Begruendung im Skript). Gleiche Kandidaten wie im @supports-Block oben,
   gleiche Ausfallrichtung: ohne JavaScript kein html.belebt, kein
   Verstecken — der Grundzustand bleibt die fertige Seite. */
html.belebt .fall,
html.belebt .entwurf,
html.belebt .zahlen li,
html.belebt .zwei{
  opacity:0;
  transform:translateY(1.6rem);
  transition:opacity .7s var(--schwung),transform .7s var(--schwung);
}
html.belebt .fall.da,
html.belebt .entwurf.da,
html.belebt .zahlen li.da,
html.belebt .zwei.da{opacity:1;transform:none}