/* ══════════════════════════════════════════════════════════════════════
   REFERENZEN — „Was zählt und was nicht"
   Gleiche Grammatik wie die Startseite. Andere Bedeutung des Wechsels:
   nicht „andere Welt", sondern „andere Beweiskraft".
   Ein ausgeführtes Projekt bekommt eine volle Welt.
   Vier Studien bekommen einen kleinen Bogen.
   213 Messungen bekommen eine Zahlenfläche.
   Die Hierarchie ist die Ehrlichkeit.
   ══════════════════════════════════════════════════════════════════════ */

/* Bildspalte wie auf der Startseite — deshalb auch deren rechter Rand. */
.auftakt--unter{padding-right:calc(var(--bild) + var(--rand) * .7)}
.auftakt__mitte{max-width:1240px;width:100%}
.auftakt__vor{
  margin-top:1.1em;
  max-width:44ch;
  font-size:clamp(.94rem,2.2vw,1.2rem);
  line-height:1.36;
  color:var(--leise);
  text-wrap:pretty;
}
.dach--seite{
  font-family:Mono,monospace;
  font-size:clamp(0.7rem,1.5vw,.72rem);
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--leise);
  margin-bottom:1.1em;
}

/* ══════════════ 01 · DAS PROJEKT ══════════════ */

/* ── DIE FARBE DER ABSCHNITTE (Sadan, 02.08.: „zu dunkel viel zu grau,
   schwarz … kannst jeden Bereich mit Farbe befuellen wie das eine magenta") ──
   Vorher trugen VIER der fuenf Abschnitte denselben Papierton und der fuenfte
   war fast schwarz. Jetzt hat jeder seinen eigenen Grund, alle aus der
   Palette der Seite (styles.css :root) — keine neuen Farben erfunden:
     Auftakt   Papier   #faf9f7   ruhiger Eingang, das Handy bringt die Farbe
     01 Loshaj Gelb     #f4c400   der ausgefuehrte Auftrag, das Signal
     02 Studien Rosé    #fce8f0   helles Magenta, damit die vier Entwuerfe
                                  darauf leuchten statt zu konkurrieren
     03 Messung Blau    #e9eeff   WAR #0d0d11 — der schwarze Block, den Sadan
                                  meinte. Jetzt hell; die Farbe tragen die
                                  Zahlen in --strom.
     Schluss   Papier   #faf9f7   unveraendert
   Tinte bleibt ueberall #111 — auf allen vier hellen Gruenden ueber 10:1. */
.lade--echt{
  --w-grund:#f4c400;
  --w-tinte:#111111;
  --w-strich:#111111;
  /* Das Sekundaergrau MUSS hier dunkler werden. Gerechnet, nicht geschaetzt:
     Gelb #f4c400 hat die Leuchtdichte 0,582 — das ist ein HELLER Grund, und
     das uebliche --leise #5b5b5b kommt darauf nur auf 4,12:1 (gemessen vom
     Designscan an sechs Stellen, u. a. „Industrieregale aus dem
     Rhein-Main-Gebiet"). Fuer 4,5:1 darf die Tinte hoechstens 0,0905
     Leuchtdichte haben, das ist #555555; #4a4a4a gibt Reserve: 5,3:1. */
  --leise:#4a4a4a;
  /* Dieselbe Rechnung fuer den Markenton: --knall-text #bd0049 hat 0,1116
     Leuchtdichte und kommt auf Gelb nur auf 3,91:1 („loshaj-regalbau.de
     ansehen"). #9c003c hat 0,0739 → 5,1:1. */
  --knall-text:#9c003c;
}
.satz--echt{align-self:center}

/* Die Bühne darf hier mitwachsen. Sie ist sonst exakt 100 svh hoch, und
   der Satzblock dieses Abschnitts passt da nicht hinein: bei 1440×900
   braucht er 816 px von 742 verfügbaren, bei 1280×720 sogar 796 von 562.
   Der Überhang lief unten in die absolut gesetzte .fahne — nachgemessen
   45 px bei 900 und 193 px bei 720 Fensterhöhe. Kürzen allein reicht
   nicht, der Fehler haengt an der Fensterhöhe, nicht am Text.
   Platz ist da: die Welt ist --halt (170 vh) hoch, die Bühne belegt
   davon nur die ersten 100 svh. */
.lade--echt .buehne{height:auto;min-height:100svh}
/* … und die Welt dazu NICHT MEHR STICKY. Audit 02.08.: die Buehne ist
   hoeher als der Viewport (1013 px bei 900, 1143 bei 844, 1333 bei 1024).
   Gepinnt hiess das: der untere Teil war bei KEINEM Scrollstand sichtbar —
   bei 768 fehlten die drei 100er komplett, bei 390 kam der Loshaj-CTA nie
   ins Bild, und selbst bei 1440 blieben CTA-Unterstrich und Fahne
   abgeschnitten. Der Pin-Mechanismus setzt exakt 100svh voraus; diese eine
   Welt ist laenger. Also scrollt sie normal — Inhalt schlaegt Effekt. */
.lade--echt{position:static;height:auto}

.lade__titel{
  margin:.5em 0 0;
  font-family:Schibsted,sans-serif;
  font-weight:900;
  font-size:clamp(2.4rem,8vw,6rem);
  line-height:.9;
  letter-spacing:-.048em;
}
.lade__text{
  margin-top:1em;
  max-width:38ch;
  font-size:clamp(.92rem,2.1vw,1.12rem);
  line-height:1.38;
  color:var(--leise);
  text-wrap:pretty;
}
.lade__zitat{
  margin-top:clamp(1.6rem,5vh,2.6rem);
  max-width:26ch;
  font-family:Schibsted,sans-serif;
  font-weight:900;
  font-size:clamp(1.3rem,3.6vw,2.3rem);
  line-height:1.06;
  letter-spacing:-.03em;
  text-wrap:balance;
}
.lade__quelle{
  margin-top:.9em;
  font-family:Mono,monospace;
  font-size:clamp(0.7rem,1.5vw,.7rem);
  letter-spacing:.12em;
  color:var(--leise);
}

/* Die drei Hundert: gestaffelt, nicht in einer Reihe */
.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;
  font-size:clamp(2.4rem,7.4vw,5rem);
  line-height:.84;
  letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;
  color:var(--strom);              /* die Zahlen tragen die Farbe */
}
.werte span{
  margin-top:.5em;
  font-family:Mono,monospace;
  font-size:clamp(0.7rem,1.4vw,.66rem);
  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:clamp(0.7rem,1.4vw,.68rem);
  letter-spacing:.1em;
  color:var(--leise);
}
.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:clamp(.95rem,2.2vw,1.3rem);
  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)}
/* WAR var(--bone) — helle Tinte, gebaut fuer den schwarzen Messungsgrund.
   Seit der Abschnitt hell ist, stand „Wie wir pruefen" mit 1,01:1 da, also
   praktisch unsichtbar. Jetzt der Markenblau-Ton, der auch die Zahlen
   traegt. --strom selbst reicht knapp NICHT: bei 390 px misst der Designscan
   4,47:1 gegen 4,5 gefordert. #2145d8 (Leuchtdichte 0,0954) gibt 5,98:1.
   Die grossen Zahlen daneben duerfen --strom behalten — grosse Schrift
   braucht nur 3:1. */
.lade__tat--hell a{color:#2145d8}

/* ── Die beiden Loshaj-Aufnahmen laufen in ECHTEN FARBEN ──
   Alle anderen Bilder dieser Seite sind hart schwarz-weiß behandelt.
   Diese zwei nicht, und zwar mit Absicht: es sind keine Stimmungsfotos,
   sondern der Beweis. Eine entfärbte Bildschirmaufnahme zeigt nicht mehr
   die Seite, die dort steht — sie zeigt eine Behauptung über sie.
   Dass genau dieses eine Projekt aus dem Grauraster heraussticht, ist
   dieselbe Hierarchie wie überall auf der Seite: was echt ist, wiegt
   mehr als die Studien.
   Beide Zuschnitte sind auf 1:2,02 gerechnet — das ist das GEMESSENE
   Verhältnis beider Spalten bei 1440×900, nicht das aus dem CSS
   geschlossene. Achtung, hier lag ich erst falsch: `.bild` steckt in
   `.buehne` (100 svh), nicht in `.welt` (--halt, 170 vh). Wer die Bilder
   tauscht, misst den Kasten im Browser, statt ihn herzuleiten. */
/* ══════════════════════════════════════════════════════════════════════
   DIE SCHAU — das Gerät, auf dem die Seite steht
   Vorher lag hier ein hoher Streifen der Kundenseite im schmalen
   Bildplatz (446 px). Das zeigte die Seite von oben nach unten
   heruntergescrollt — nie so, wie ein Besucher sie sieht.
   Jetzt: ein Laptop im Querformat, vier umschaltbare Bildschirme.

   Ohne JavaScript: die Umschaltung sind vier Radiobuttons, die Bilder
   liegen gestapelt und werden per :checked ~ eingeblendet. Deshalb
   MUESSEN die Inputs im Markup VOR der Figur stehen — der
   Geschwisterselektor ~ greift nur nach vorn.
   ══════════════════════════════════════════════════════════════════════ */

/* Der Bildplatz dieses Abschnitts ist breit statt schmal — ein Laptop im
   446-px-Streifen waere briefmarkengross. Deshalb hier ein echtes
   Zweispaltenraster statt der absoluten Bildspalte: sonst muesste die
   Buehne rechts genau so viel Rand reservieren, wie das Geraet breit ist,
   und beide Werte liefen bei jeder Aenderung auseinander.
   Schiene und Fahne stehen absolut und belegen keine Rasterzelle — die
   Grammatik der Seite gilt weiter. */
.lade--echt .buehne{
  grid-template-columns:minmax(0,1fr) min(54%,720px);
  align-items:center;
  column-gap:clamp(2rem,5vw,4rem);
  padding-right:var(--rand);
}
.lade--echt .satz--echt{grid-column:1;grid-row:1}
.schau{
  grid-column:2;
  grid-row:1;
  z-index:1;
}
.schau__wahl{position:absolute;width:1px;height:1px;opacity:0;margin:0}

/* ── Das Handy im Auftakt ──
   Vorher lag hier `loshaj-start.webp` (1100x2223) mit `object-position:50% 0`
   in einem 446x900-Platz: der lange Streifen von oben, den Sadan zweimal
   angestrichen hat. Ein Querabzug in einem Hochplatz kann nur ein Ausschnitt
   sein — die Loesung ist nicht ein anderer Ausschnitt, sondern ein Bild, das
   von sich aus hoch ist. Deshalb eine Handyaufnahme derselben Seite.
   Kein `box-shadow`: die Seite hat durchgehend keinen (DESIGN-PRINZIPIEN). */
.auftakt__bild--geraet{
  display:grid;
  place-items:center;
  background:#f1efea;                 /* eine Spur tiefer als das Papier,
                                         damit die Spalte als Bildfeld liest */
  padding:clamp(1.4rem,4vw,3rem);
}
.handy{display:block;width:min(292px,74%)}
.handy__deckel{
  display:block;
  background:#1d1d1f;                 /* dasselbe Aluminium wie beim Laptop */
  border-radius:40px;
  padding:9px;
}
.handy__rahmen{
  position:relative;
  display:block;
  border-radius:32px;
  overflow:hidden;
  aspect-ratio:780/1688;              /* das Verhaeltnis der Aufnahme */
  background:#000;
}
.handy__rahmen img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 0;
  filter:none;                        /* echte Farben — dieselbe Begruendung
                                         wie bei `.bild--echt img` */
}
.handy__insel{
  position:absolute;
  top:9px;left:50%;
  width:62px;height:17px;
  margin-left:-31px;
  border-radius:10px;
  background:#0a0a0a;
  z-index:2;
}

@media (max-width:860px){
  /* Schmal sitzt der Bildplatz OBEN statt rechts (Regel in styles.css) und
     ist dort nur rund 219 px hoch. Ein nach der Breite bemessenes Geraet war
     dann 514 px hoch und ragte unten heraus — im Bild abgeschnitten,
     nachgemessen bei 390 px.
     Also zwei Dinge: der Platz bekommt hier mehr Hoehe, und das Geraet
     richtet sich nach der HOEHE statt nach der Breite. */
  .auftakt--unter{--geraet-h:min(44vh,320px)}
  .auftakt__bild--geraet{
    /* EINE Quelle fuer Feldhoehe und Kopf-Reservierung (--geraet-h) — zwei
       lose Kopien desselben Werts waren die Ursache dafuer, dass der Kopf
       hinter dem Feld verschwand. Und flacher als vorher (400px): mit 400
       lag der Auftakt-CTA bei y=860, also 16 px unter der 844er-Falz. */
    height:var(--geraet-h);
    padding:.9rem;
  }
  .handy{
    display:flex;
    /* width:100% + justify-content:center — NICHT auto oder fit-content.
       Beide scheitern am selben Grund: die Breite des Geraets entsteht erst
       im Layout aus height+aspect-ratio, die INTRINSISCHE Breite der Kette
       ist ~0. width:auto kollabierte auf 12 px (Geraet stand 83 px neben
       der Mitte), fit-content genauso. Der Container nimmt deshalb die
       volle Breite und zentriert das fertig gelayoutete Kind. */
    width:100%;
    justify-content:center;
    height:100%;
  }
  .handy__deckel{
    display:flex;
    padding:6px;
    border-radius:27px;
  }
  .handy__rahmen{
    height:100%;
    width:auto;
    aspect-ratio:780/1688;
    border-radius:21px;
  }
  .handy__insel{top:6px;width:46px;height:13px;margin-left:-23px}
}

/* ── Das Geraet ── */
.mac{margin:0}
.mac__deckel{
  background:#1d1d1f;                 /* Aluminium, dunkel eloxiert */
  border-radius:14px;
  padding:12px 12px 16px;
}
.mac__rahmen{
  position:relative;
  border-radius:5px;
  overflow:hidden;
  aspect-ratio:1200/750;              /* das Verhaeltnis der Aufnahmen */
  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);
}
/* Der erste Bildschirm traegt, solange nichts gewaehlt ist. */
.mac__schirm--1{opacity:1}
#loshaj-2:checked ~ .mac .mac__schirm--1,
#loshaj-3:checked ~ .mac .mac__schirm--1,
#loshaj-4:checked ~ .mac .mac__schirm--1{opacity:0}
#loshaj-2:checked ~ .mac .mac__schirm--2,
#loshaj-3:checked ~ .mac .mac__schirm--3,
#loshaj-4:checked ~ .mac .mac__schirm--4{opacity:1}

/* Der Fuss: die Kerbe zum Aufklappen macht das Geraet erkennbar. */
.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;
}

/* ── Dasselbe Geraet, kleiner: die vier Studien ──
   Sie zeigten bisher welt-strom.webp, welt-haut.webp … — also dieselben
   Stimmungsfotos wie die Startseite. Ein Abschnitt mit der Ueberschrift
   „Vier Studien" zeigte damit gar keine Studien, sondern Stockfotos.
   Jetzt stehen dort die Entwuerfe selbst, aufgenommen von der eigenen
   Seite bei 1440×900. Kleiner als das Loshaj-Geraet, weil die Hierarchie
   die Ehrlichkeit ist: ein ausgefuehrtes Projekt wiegt mehr. */
.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}
/* Die alte Regel `.probe img` setzt 3/4 HOCH — ein Bildschirm ist quer.
   Sie hier ausdruecklich und vollstaendig ueberschreiben: mit nur
   `aspect-ratio` blieb das Bild 390x520 gross, der Rahmen klemmte es auf
   390x244 und man sah einen dreifach vergroesserten senkrechten Streifen
   statt des Entwurfs. Deshalb Hoehe UND Verhaeltnis setzen. */
.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;
}

/* ── Die Wege: vier Textzeilen, keine Kaesten ── */
.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;                    /* Tippziel */
  font-family:Mono,monospace;
  font-size:clamp(0.7rem,1.6vw,.78rem);
  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)}
#loshaj-1:checked ~ .schau__wege label[for="loshaj-1"],
#loshaj-2:checked ~ .schau__wege label[for="loshaj-2"],
#loshaj-3:checked ~ .schau__wege label[for="loshaj-3"],
#loshaj-4:checked ~ .schau__wege label[for="loshaj-4"]{
  color:var(--tinte);
  border-bottom-color:var(--knall);
}
/* Tastatur: der Punkt ist unsichtbar, der Ring muss es nicht sein. */
.schau__wahl:focus-visible + .schau__wahl + .schau__wahl + .schau__wahl ~ .schau__wege label{outline:none}
#loshaj-1:focus-visible ~ .schau__wege label[for="loshaj-1"],
#loshaj-2:focus-visible ~ .schau__wege label[for="loshaj-2"],
#loshaj-3:focus-visible ~ .schau__wege label[for="loshaj-3"],
#loshaj-4:focus-visible ~ .schau__wege label[for="loshaj-4"]{
  outline:2px solid var(--knall);
  outline-offset:.3em;
}

/* Schmal: das Geraet steht oben, der Satz darunter — wie die anderen
   Welten auch (siehe styles.css, Bildspalte wandert nach oben). */
@media (max-width:860px){
  /* Eine Spalte: Geraet oben, Satz darunter — wie die Bildspalte der
     anderen Welten schmal ebenfalls nach oben wandert. */
  .lade--echt .buehne{
    grid-template-columns:minmax(0,1fr);
    row-gap:clamp(1.6rem,5vh,2.6rem);
    padding-top:calc(var(--rand) * .9);
  }
  .schau{grid-column:1;grid-row:1}
  .lade--echt .satz--echt{grid-column:1;grid-row:2}
}

/* ══════════════ 02 · DER BOGEN ══════════════
   Kein Karten-Grid: vier Proben auf einem Bogen, ohne Rahmen,
   ohne Schatten, unterschiedlich hoch abgesetzt.                */

.bogen{
  position:relative;
  z-index:1;
  background:#fce8f0;                 /* helles Magenta — Begruendung oben */
  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:clamp(2rem,7.4vw,5.4rem);
  line-height:.94;
  letter-spacing:-.045em;
  text-wrap:balance;
}
.bogen__warnung{
  max-width:56ch;
  margin-bottom:clamp(2.4rem,8vh,4rem);
  font-size:clamp(.9rem,2.1vw,1.08rem);
  line-height:1.42;
  color:var(--leise);
  text-wrap:pretty;
}
.bogen__warnung b{color:var(--tinte);border-bottom:2px solid var(--knall)}

.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:nth-child(4){transform:translateY(clamp(.6rem,2.4vh,1.6rem))}
.probe img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  display:block;
}
.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:clamp(.9rem,2vw,1.06rem);
  letter-spacing:-.02em;
}
.probe figcaption span{
  font-family:Mono,monospace;
  font-size:clamp(0.7rem,1.4vw,.66rem);
  letter-spacing:.1em;
  color:var(--leise);
}

/* Die Handschriften der Startseite, damit man die Welten wiedererkennt */
/* KEIN Graufilter und KEINE Farbebene mehr — beides stammt aus der Zeit,
   als hier Stimmungsfotos lagen. Die Ebene faerbte das Foto in die Farbe
   seiner Welt ein (Deckkraft .3 bis .9), der Filter entsaettigte es.
   Seit die Kacheln die ENTWUERFE zeigen, zerstoert beides den Inhalt:
   nachgemessen blieb von jedem Bildschirm nur eine Volltonflaeche uebrig
   — Blau, Weiss, Gelb, Rosa. Ein Entwurf bringt seine Farbe selbst mit.
   Die Regeln stehen bewusst nicht mehr da, statt auf `none` gesetzt zu
   werden: wer sie sucht, soll den Grund lesen und nicht die Ausnahme. */
/* Die Farbebene sitzt auf einem echten Kasten um das Bild —
   ein absolut positioniertes Pseudo mit aspect-ratio war unzuverlässig. */
.probe__feld{
  position:relative;
  display:block;
  isolation:isolate;
}
/* (Die Farbebene ist entfallen — Begruendung oben.) */

/* Der Wechsel-Film steht im selben Geraet wie die Loshaj-Aufnahmen darueber.
   Vorher: max-width:min(360px,54vw) und ein 540x1080-Film — also Handyformat
   neben einem Laptop. Der Film ist seit 02.08. 1600x1000, das ist genau
   `aspect-ratio:1200/750` des Rahmens; deshalb schneidet `cover` hier nichts
   ab, es fuellt exakt. */
.bogen__film{
  margin:clamp(3rem,10vh,6rem) auto 0;
  max-width:min(860px,90vw);
}
.bogen__film .film,
.bogen__film .standbild{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.bogen__film .standbild{display:none}
.fahne--bogen{
  position:static;
  margin-top:1em;
  padding:0;
  text-align:center;
}
@media (prefers-reduced-motion: reduce){
  .bogen__film .film{display:none}
  /* Groesse kommt schon aus der Regel oben (absolut, inset:0). Frueher stand
     hier width:100%;height:auto — das ergibt im absolut positionierten
     Rahmen keine Hoehe mehr und das Standbild waere zusammengefallen. */
  .bogen__film .standbild{display:block}
}

/* ══════════════ 03 · DIE MESSUNG ══════════════ */

.messung{
  position:relative;
  z-index:1;
  /* WAR #0d0d11 — der schwarze Block. Jetzt hell und blau; die Farbe
     tragen die Zahlen. Alle Tinten darunter mussten mitgedreht werden:
     was fuer hellen Text auf Schwarz gebaut war, ist auf Hellblau blind. */
  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:52ch;
  margin-bottom:clamp(2.4rem,8vh,4rem);
  font-size:clamp(.9rem,2.1vw,1.08rem);
  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;
  font-size:clamp(2.2rem,8vw,5.4rem);
  line-height:.86;
  letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;
  color:var(--strom);              /* die Zahlen tragen die Farbe */
}
.zahlen span{
  font-size:clamp(.92rem,2.1vw,1.16rem);
  line-height:1.3;
  color:var(--tinte);
  text-wrap:pretty;
}
.zahlen i{
  font-style:normal;
  font-family:Mono,monospace;
  font-size:clamp(0.7rem,1.4vw,.66rem);
  letter-spacing:.14em;
  color:#5a6285;
}
.messung__fuss{
  margin-top:clamp(2rem,6vh,3rem);
  max-width:52ch;
  font-family:Mono,monospace;
  font-size:clamp(0.7rem,1.4vw,.68rem);
  letter-spacing:.1em;
  line-height:1.7;
  color:#4b5378;
}
@media (min-width:820px){
  /* 11rem, nicht 6.5rem: „91,4 %" steht dank   umbruchfrei und
     rendert in Tabellenziffern rund 9 rem breit. Bei 6.5 rem lief die
     Zahl ueber die Spaltengrenze und legte sich auf das „h" von
     „hatten". Die Schriftgroesse ist zugleich gedeckelt, damit die
     Rechnung auch auf sehr breiten Schirmen aufgeht. */
  .zahlen li{grid-template-columns:minmax(0,11rem) minmax(0,1fr) minmax(0,12rem)}
  .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 ref-ein{from{opacity:0;transform:translateY(24px)}44%{opacity:1}to{opacity:1;transform:none}}
  .lade--echt .dach{animation:ref-ein .8s var(--schwung) .05s both}
  .lade--echt .lade__titel{animation:ref-ein .95s var(--schwung) .14s both}
  .lade--echt .lade__text{animation:ref-ein .9s var(--schwung) .26s both}
  .lade--echt .lade__zitat{animation:ref-ein .9s var(--schwung) .38s both}
  .lade--echt .werte li{animation:ref-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()){
    .probe,.zahlen li,.zwei{
      animation:ref-ein linear both;
      animation-timeline:view();
      animation-range:entry 8% entry 72%;
    }
  }
}

/* ══════════════ SCHMAL ══════════════ */
@media (max-width:860px){
  .auftakt--unter{padding-top:calc(var(--rand) * 1.1)}
  .probe:nth-child(2),.probe:nth-child(4){transform:none}
  .werte li:nth-child(2),.werte li:nth-child(3){transform:none}
}

/* (`.auftakt__bild--regal` ist entfallen. Der Auftakt zeigt die Kundenseite
   seit 02.08. im Handy-Rahmen — Begründung oben bei `.auftakt__bild--geraet`.
   `loshaj-start.webp` wird dadurch nicht mehr gebraucht.) */

@media (max-width:860px){
  /* Schmal sitzt die Bildspalte oben statt rechts (siehe styles.css) —
     also oben Platz schaffen und den rechten wieder freigeben, sonst
     deckt das Bild Logo und Navigation zu. */
  .auftakt--unter{
    padding-right:var(--rand);
    padding-top:calc(var(--bild) + var(--rand) * 1.1);
  }
}


@media (max-width:860px){
  /* Audit 02.08., SCHWERE HOCH: das Geraetefeld ist min(54vh,400px) hoch,
     der Auftakt reservierte aber nur die Standardhoehe (--bild) — Logo,
     Navigation und der einzige CTA lagen HINTER dem Feld, unsichtbar und
     unklickbar (elementFromPoint traf an allen sechs Punkten die FIGURE).
     Der erste mobile Viewport zeigte ausserdem ausschliesslich die
     Fremdmarke Loshaj. Die Reservierung muss der Feldhoehe folgen. */
  .auftakt--unter{padding-top:calc(var(--geraet-h) + var(--rand))}
}