/* ============================================================
   wearejerry.com — rebuild.css (Neuausrichtung 04.08.2026 · OWNER: Agent BUILD)
   NUR Ergänzungen für die Routen-Architektur (topnav + route-component + footer).
   Ausschließlich bestehende Token-Werte aus tokens.css (No Hallucinated Design):
   --green #4cd494 · --yellow #ffcc33 · --blue #002dff · --ink #000 · Poppins/Manrope/JetBrains Mono.
   Burger-Overlay (.menu/.mbig/.mclose/.msocial) ist in components.css bereits gestylt.
   ============================================================ */

/* ---- Topbar: sticky, dunkel, Wortmarke links + Burger rechts ---- */
.topnav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:14px 5%;background:rgba(0,0,0,.92);border-bottom:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.topnav .tn-logo{display:flex;align-items:center;text-decoration:none}
.topnav .tn-logo img{height:24px;width:auto;display:block}
@media(max-width:600px){.topnav{padding:12px 5%}.topnav .tn-logo img{height:20px}}

/* Anker-Sprünge (#faq etc.) nicht unter der sticky Topbar verstecken */
html{scroll-padding-top:76px}

/* ---- Menü-Overlay = ORIGINAL (components.css .menu/.mtitle/.msub/.mbig/.msocial/.mlegal greift 1:1).
   Nur zwei Routen-Welt-Ergänzungen (Original-first-Pass 04.08.):
   ① Rubrikname im mTitle in der Akzentfarbe der aktuellen Rubrik (--acc setzt app.js/openMenu wie live)
   ② mOthers sind jetzt echte Links → Hover in der Rubrikfarbe des ZIELS (Original:
     .mbig[data-section="0/1/2"]:hover gelb/blau/grün — --acc2 setzt app.js pro Eintrag). ---- */
.menu .mtitle b{font:inherit;color:var(--acc)}
.menu #mOthers .mbig:hover{color:var(--acc2,var(--acc))}

/* ---- Route-Seiten: H1-Skala (analog .shero h1; .sblock hatte bisher nur h2) ---- */
.sblock h1{font:700 clamp(2.1rem,4.6vw,3.4rem)/1.08 var(--disp);letter-spacing:-.01em;margin-bottom:18px}
.sblock.white h1{color:var(--ink)}
.sblock .lead{font:500 clamp(1.1rem,1.8vw,1.35rem)/1.5 var(--body);max-width:34ch;margin:0 auto 8px}
.sblock .sub2{opacity:.75}

/* ============================================================
   retrofit (04.08.2026, RETROFIT-Agent) — nur Token-Werte.
   Zweck: Original-Sektionsoptik der Tiles auf den Routen-Seiten reaktivieren
   (Sparten-Scoping .content[data-sec] + Kachel-Chooser als echte Links).
   ============================================================ */
/* .content war in der Tile-Architektur absolut/versteckt — im Routen-Kontext (body[data-route])
   wird sie zum normalen Flow-Container; alle [data-sec]-Farbregeln greifen wieder. */
/* retrofit */
body[data-route] .content{position:static;inset:auto;z-index:auto;opacity:1;pointer-events:auto;overflow:visible}
/* retrofit: Startseiten-Chooser — Kacheln als echte <a>-Links, Fronten (Label + Logo) sichtbar */
.start .tile{display:block;text-decoration:none;color:inherit}
body[data-route="home"] .tile .brand{display:none} /* live-Parität: EINE zentrale Wortmarke, Kachel trägt kein Lockup */
body[data-route="home"] .start{min-height:calc(100vh - 53px)}
/* retrofit: Claim-Block (Wortmarke + Claim + Kategorie-Satz) in Original-Skala */
body[data-route="home"] .top{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;pointer-events:none;padding:0 40px;max-height:none}
body[data-route="home"] .tiles{min-height:calc(100vh - 53px)}
body[data-route="home"] .top .hallo,body[data-route="home"] .top h1,body[data-route="home"] .top .sub{text-shadow:0 4px 24px rgba(0,0,0,.55)}
body[data-route="home"] .top h1{font:700 clamp(1.9rem,3.6vw,3rem)/1.06 var(--disp);letter-spacing:-.015em;color:#fff;max-width:24ch;margin-top:30px}
body[data-route="home"] .top .sub{margin-top:18px;font:400 clamp(.98rem,1.15vw,1.12rem)/1.6 var(--body);color:#c9cdd1;max-width:56ch}
/* retrofit: Badge „Neu · Jerry Engine" unter die (längere) Label-Zeile „Eigene Systeme" rücken */
body[data-route="home"] .tilebadge{top:54px}
/* ============================================================
   Rückportierung Live-Landing (04.08.2026, PARITY-Agent) — Regeln aus components.css
   DUPLIZIERT (dort hängen sie an body[data-route-index="-1"] / .brandover) und für die
   Routen-Architektur unter body[data-route="home"] freigeschaltet. Nur Token-Werte.
   ============================================================ */

/* Fix 3 — legalmini: ZURÜCKGENOMMEN 05.08.2026 (Karsten). Im Original war sie die einzige Rechtszeile,
   weil components.css:1265 auf der Landing den Footer ausblendet; in der Routen-Welt läuft der Footer mit
   → die Zeile stand doppelt. Element ist aus route-home.html entfernt, Regeln hier ersatzlos gestrichen. */

/* Fix 2 — farbwechselndes Logo im Claim-Block (Original: .brandover .wm, components.css:1299 + 1436-1442, V19-5).
   Vier deckungsgleiche Lockups (Master + 3 Sparten); Kachel-Hover blendet das Sparten-Lockup ein.
   Trigger: .wm liegt im .top, die Kacheln in .tiles — gemeinsamer Vorfahr ist .start → :has auf .start. */
body[data-route="home"] .top .wm{position:relative;width:min(36vw,500px);aspect-ratio:118.44/63.70;margin:0 auto 14px}
body[data-route="home"] .top .wm>img{position:absolute;top:0;left:0;width:100%;height:auto;display:block;filter:drop-shadow(0 10px 44px rgba(0,0,0,.5))}
body[data-route="home"] .top .wm .wmaster{position:relative;opacity:1;transition:opacity .3s}
body[data-route="home"] .top .wm .wsp{opacity:0;transition:opacity .3s;pointer-events:none}
body[data-route="home"] .start:has(.t1:hover) .wm .wmaster,
body[data-route="home"] .start:has(.t2:hover) .wm .wmaster,
body[data-route="home"] .start:has(.t3:hover) .wm .wmaster{opacity:0}
body[data-route="home"] .start:has(.t1:hover) .wm .wsp.s1{opacity:1}
body[data-route="home"] .start:has(.t2:hover) .wm .wsp.s2{opacity:1}
body[data-route="home"] .start:has(.t3:hover) .wm .wsp.s3{opacity:1}
@media (max-width:900px){body[data-route="home"] .top .wm{width:min(60vw,320px)}}

/* Fix 1 (CSS-Anteil) — Öffnen-Effekt: .tile.fly (components.css:944) setzt 100vw/100vh; in der
   Routen-Architektur braucht die fliegende Kachel fixed, damit sie den Viewport wirklich deckt. */
body[data-route="home"] .tile.fly{position:fixed;z-index:40}
/* Kachel-Hover wie live (V17-L4): s/w-Belichtung → Farbe (Original: body[data-route-index="-1"], components.css:1246-1248) */
body[data-route="home"] .fw .photo{filter:grayscale(1) brightness(.8) contrast(1.04)}
body[data-route="home"] .tile:hover .fw .photo{filter:grayscale(0) saturate(.85) brightness(.8) contrast(1.04)}
@media (max-width:900px){body[data-route="home"] .fw .photo{filter:grayscale(0) saturate(.85) brightness(.8) contrast(1.04)}}

/* retrofit: hallo-Zeile wie live (brandover-Regeln gelten dort nicht) */
body[data-route="home"] .start .hallo{font:800 clamp(1.25rem,2.1vw,1.8rem)/1 var(--disp);letter-spacing:.02em;color:#fff;text-align:center;margin-bottom:10px}

/* retrofit: mobil kein Overlay — Kopf statisch über den gestapelten Kacheln (wie live @media) */
@media (max-width:900px){
  body[data-route="home"] .top{position:static;pointer-events:auto;padding:26px 20px 10px}
  body[data-route="home"] .tiles{min-height:0}
}

/* retrofit: nahtloser Übergang Kachel → Unterseiten-Hero (Cross-Document View Transitions).
   Die KACHEL selbst morpht in den Seiten-Hero (ein einziger fließender Übergang; app.js
   navigiert bei Support sofort, ohne separaten Öffnen-Effekt). Fallback: Öffnen-Effekt. */
@view-transition{navigation:auto}
body[data-route="home"] .t1{view-transition-name:hero-beratung}
body[data-route="home"] .t2{view-transition-name:hero-digital}
body[data-route="home"] .t3{view-transition-name:hero-engine}
body[data-route="beratung"] .shero{view-transition-name:hero-beratung}
body[data-route="digital"] .shero{view-transition-name:hero-digital}
body[data-route="jerry-engine"] .shero{view-transition-name:hero-engine}
::view-transition-group(hero-beratung),::view-transition-group(hero-digital),::view-transition-group(hero-engine){animation-duration:.55s;animation-timing-function:cubic-bezier(.33,0,.15,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s}

/* retrofit: Rubriken-Akzente je Route — --acc steuert FAQ-Marker, Bullets, Hover (Default war global grün).
   Beratung 🟡 · Digital + Jerry OS 🔵 · Engine + JSE 🟢 · Haus-Seiten neutral (Tinte/Hell je Untergrund). */
body[data-route="beratung"]{--acc:var(--yellow)}
body[data-route="digital"],body[data-route="jerry-os"]{--acc:var(--blue)}
body[data-route="jerry-engine"],body[data-route="jerry-social-engine"]{--acc:var(--green)}
body[data-route="home"],body[data-route="referenzen"],body[data-route="kontakt"],body[data-route="impressum"],body[data-route="datenschutz"]{--acc:#101112}
body[data-route="home"] .sblock:not(.white){--acc:#e8eaec}
body[data-route="home"] #systeme{--acc:var(--green)}   /* die Systeme-Sektion darf grün — das ist ihre Rubrik */

/* ============================================================
   ORIGINAL-FIRST-Pass (04.08.2026, Agent BUILD) — Landing-Feinschliff gegen den Live-Snapshot.
   Duplikate von Original-Regeln aus components.css, die dort an body[data-route-index="-1"]
   bzw. .tile-Kontext gekoppelt sind — freigeschaltet für die Routen-Welt. Nur Token-Werte.
   ============================================================ */

/* Kachel-Foto: Original-Basiszustand inkl. Filter-Transition (components.css:1253 —
   dort body[data-route-index="-1"]; ohne die Transition springt s/w→Farbe hart). */
body[data-route="home"] .fw .photo{transition:filter .5s ease}

/* V17-L7 (components.css:1310): Kacheln nicht randlos — Luft rundum, Hover-Pop sichtbar */
body[data-route="home"] .tiles{padding:22px 26px;box-sizing:border-box}
@media (max-width:900px){body[data-route="home"] .tiles{padding:0 14px 14px}}

/* V18-2 + V17-L5 (components.css:1487/1295): Bild-Ausschnitte der Kacheln wie live */
body[data-route="home"] .t1 .fw .photo{object-position:26% 50%}
@media (max-width:900px){
  body[data-route="home"] .tile{min-height:31vh}
  body[data-route="home"] .t1 .fw .photo{object-position:50% 32%}
  body[data-route="home"] .t2 .fw .photo{object-position:66% 45%}
  body[data-route="home"] .t3 .fw .photo{object-position:50% 30%}
}

/* Hero-Glow (components.css:217-218): --glow hing an .tile.t1/.t2/.t3 — in der Routen-Welt
   liegt die .shero direkt auf der Seite → Farbe je Route (JSE grün, OS blau wie ihre Rubrik). */
body[data-route="beratung"] .shero::after{--glow:#ffcc33}
body[data-route="digital"] .shero::after,body[data-route="jerry-os"] .shero::after{--glow:#002dff}
body[data-route="jerry-engine"] .shero::after,body[data-route="jerry-social-engine"] .shero::after{--glow:#4cd494}

/* ============================================================
   Screenshot-Feinschliff 05.08.2026 (Session „WEBSITE · Design-Details", Karsten).
   Nur Bestands-Token und Bestands-Klassen — keine neue Farbe, kein neuer Font, keine neue Klasse.
   ============================================================ */

/* A · CTA auf farbigem Sparten-Grund kippt auf Weiß mit der Rubrikfarbe als Schrift.
   Original-Grammatik: .ospanel .cta (components.css:1166) macht genau das auf der blauen Fläche.
   Ohne die Regel stünde .cta.green (grün) auf .sblock.gbg (grün) praktisch unsichtbar. */
.sblock.gbg .cta.green{background:#fff;color:var(--green)}

/* B · Keine grüne Schrift auf grünem Grund → Tinte, analog .sblock.gbg .mark (components.css:525).
   Zwei Quellen, beide auf .sblock.gbg direkt auf dem Grün:
   ① .acc = #2bb277 (components.css:400) — Ton seit 01.07.2026 zurückgezogen (ein Jerry-Grün #4cd494)
   ② .tfoot b = --green (components.css:1031) — Kontrast 1,00, der Satz war buchstäblich unsichtbar
      („Capability Loop: Predict. Guarantee. Operate. Learn.", Karsten 05.08.)
   NICHT verallgemeinern: im selben gbg-Abschnitt steht weitere grüne Schrift (.fact b, .secnum,
   .prodname b, .cta.green) — die sitzt auf EIGENEN schwarzen/weissen Flächen und ist korrekt.
   Kontrast-Messung über alle Rubrik-Seiten 05.08.: sonst kein Treffer < 1,6. */
.sblock.gbg .acc,
.sblock.gbg .tfoot b{color:var(--ink)}

/* B2 · 🔴 GRÜN IN DER BLAUEN WELT — Nachtrag 10.08. (Karsten, zum zweiten Mal gemeldet).
   Mein erster Fix griff nur auf .sblock.gbg. Auf WEISSEM Grund blieb das Grün stehen, weil zwei
   Regeln global auf var(--green) auflösen: .tfoot b (components.css:1031) und .secnum (:541).
   Mein Prüfweg war zusätzlich falsch: Ich hatte nach „#4cd494" im HTML gegrept — dort steht der
   Wert nie, er kommt aus dem CSS. Nur eine Messung der BERECHNETEN Farbe findet das.
   Scope bewusst .content[data-sec="d"]: gilt für /jerry-os/ UND /digital/, beide sind blau. */
.content[data-sec="d"] .tfoot b,
.content[data-sec="d"] .secnum,
.content[data-sec="d"] .acc{color:var(--blue)}

/* C · Icon-Kachel-Versatz: das Muster ist 4-spaltig gedacht (0/22/8/28px — components.css:1349-1353
   via margin-top, ab V19-2 :1414-1416 via top). Für den 6er-Fall gibt es eine eigene 6n-Staffel
   (:1417-1422) — für den 5er-Fall im 3-Spalten-Raster wurde nie eine geschrieben, deshalb läuft dort
   das 4n-Muster gegen den Spaltenrhythmus und wirkt zufällig. In #herausforderung darum Versatz aus
   (BEIDE Mechanismen) und Rest-Zeile mittig: 6-Spalten-Hilfsraster, je Kachel 2 Spalten. */
@media(min-width:900px){
  #herausforderung .igrid.i3{grid-template-columns:repeat(6,1fr)}
  #herausforderung .igrid.i3 .ic{grid-column:span 2;margin-top:0;top:0}
  #herausforderung .igrid.i3 .ic:nth-child(4){grid-column:2/span 2}
  #herausforderung .igrid.i3 .ic:nth-child(5){grid-column:4/span 2}
}

/* D · ALTRA im Logo-Laufband. Die Original-Ausgleichsregeln (components.css:1473 max-width:104px ·
   :1485 height:31px) sind absolut und folgen den responsiven Höhenstufen (47→38→34px) NICHT.
   Bei 34px Basishöhe rendert ALTRA 104px breit, der breiteste Nachbar rund 51px. Gleiche Proportion
   wie im Original (31/47 Höhe, 104px Kappe bei Basishöhe), nur je Stufe nachgezogen. */
@media(max-width:1512px){.refmini img[alt="ALTRA"]{height:25px;max-width:84px}}
@media(max-width:1280px){.refmini img[alt="ALTRA"]{height:22px;max-width:75px}}

/* E · Rechtsseiten: Fließtext wie im Original-Overlay (.ovlin, components.css:298/301) —
   linksbündig, 680px Satzbreite, 1rem/1.6. Die Routen-Regel .sblock .win>p (components.css:376)
   zentriert Fließtext und zog den Rechtstext auf 780px Marketing-Optik. */
body[data-route="datenschutz"] .sblock .win,
body[data-route="impressum"] .sblock .win{max-width:680px}
body[data-route="datenschutz"] .sblock .win>p,
body[data-route="impressum"] .sblock .win>p{text-align:left;max-width:none;font:400 1rem/1.6 var(--body)}

/* F · Sekundäre CTA im selben .ctr: gefüllt führt, die zweite gleichfarbige wird zur Outline-Pille.
   Form ist Bestand (.faqnav .fnl, components.css:1480 — 1.5px currentColor, radius 999px); als
   inset-box-shadow statt border, damit Polsterung und Größe des Buttons unverändert bleiben.
   Zweite Zeile ist Vorsorge: auf farbigem Grund läuft .cta.green schon auf Weiß (Regel A).
   Schrift = Tinte, Ring = Grün (Karsten 05.08.): grüne Schrift auf Weiss misst 1,88 Kontrast und ist
   in Fliesstext-Grösse zu blass. --ink-soft ist derselbe Ton wie in der gefüllten Schwester-CTA
   (components.css:157), die beiden Buttons lesen sich dadurch als ein Paar. */
.ctr .cta.green ~ .cta.green{background:transparent;color:var(--ink-soft);box-shadow:inset 0 0 0 1.5px var(--green)}
.sblock.gbg .ctr .cta.green ~ .cta.green{color:#fff;box-shadow:inset 0 0 0 1.5px #fff}
/* 🔴 DRITTE FASSUNG ergänzt 13.08. — für DUNKLE Sektionen. Die Ghost-Variante war für weisse und
   grüne Flächen gebaut; auf Schwarz stand Tinte auf Tinte, gemessen 1,11 (unsichtbar). Aufgefallen,
   als #entdecken auf /jerry-engine/ die Fläche wechselte. Grün statt Weiss, weil es die Rubrikfarbe
   der Seite ist und auf Schwarz 11,1:1 misst — Weiss wäre kontrastreicher, aber rubrikneutral. */
.sblock:not(.white):not(.ybg):not(.gbg) .ctr .cta.green ~ .cta.green{color:var(--green);box-shadow:inset 0 0 0 1.5px var(--green)}

/* ============================================================
   Jerry-OS-Inhalte 10.08.2026 (Karsten-Freigabe: Block A + Gap-Rahmen + Dreiklang + Praxisbeispiel).
   Nur Bestands-Token. Zwei Bauteile, die es in der Routen-Welt noch nicht gab.
   ============================================================ */

/* G · Schere/Gap-Grafik — portiert aus jerry-deck.css:1173-1184 (OS-Sales-Deck v0.2.0).
   Werte 1:1, nur die Deck-Variablen auf die Website-Token gemappt (--mut-l/--line-l existieren
   hier nicht). Farblogik wie im Deck: KI-Kurve blau, Haus-Kurve Tinte, Lücke gelb hinterlegt.
   ⚑ Das Gelb ist hier KEINE Rubrikfarbe, sondern die Hervorhebungsfläche der Grafik — die
   Rubrik (blau) trägt weiterhin die Kurve. Falls Karsten das anders will: eine Zeile. */
/* Anordnung 10.08. (Karsten): Grafik links, Text rechts — nicht mehr mittig gestapelt.
   Getragen von .win.two.rev; hier nur die Anpassungen, die der Kontext braucht. */
.schere{margin:0 0 10px}
/* Deckel weg 11.08. (Karsten: „links Grafik zu klein") — sie sass in einer ~530px-Spalte und
   war zusätzlich auf 720px begrenzt. In der Spalte soll sie die volle Breite nehmen. */
#luecke .schere{max-width:none}
.schere svg{width:100%;height:auto;display:block}
/* .media ist für Fotos gebaut (dunkler Grund, Rahmen, min-height 320 — components.css:106).
   Für ein SVG auf weißem Grund alles zurücknehmen; die Klasse bleibt, weil .win.two.rev die
   Spaltenreihenfolge über SIE steuert (components.css:95). */
/* Die Kurve ist flach und breit, die Textspalte hoch — bei align-self:start hingen 328px Leerraum
   unter der Grafik. Mittig gesetzt wirkt der Rest als bewusster Weißraum statt als Loch. */
#luecke .media{background:none;border:none;min-height:0;display:block;overflow:visible;align-self:stretch}
/* Spaltenbalance 11.08. (Karsten: „sollte genauso weit nach unten gehen wie der Textbaustein
   rechts daneben"). Gemessen war links 525px, rechts 339px — 185px Versatz, die rechte Spalte
   endete deutlich früher. Beide Spalten laufen jetzt auf volle Höhe und verteilen ihren Inhalt,
   sodass sie unten bündig abschliessen. */
#luecke .wtxt{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between}
#luecke .media{display:flex;flex-direction:column;justify-content:space-between}
/* Quellen minimal — zwei lange Zeilen, deshalb ohne Versalien (die Original-.bsrc ist uppercase
   und für 3-Wort-Labels gedacht, nicht für einen Satz mit Titel und Datum). */
#luecke .bsrc{font-size:.62rem;letter-spacing:.01em;text-transform:none;opacity:.45;line-height:1.45}
/* Conclusion: fett, GROSS und in Rubrikblau, sauber abgesetzt (Karsten 10.08.). */
#luecke .tfoot{color:var(--blue);text-align:left;font:800 clamp(1.35rem,2.1vw,1.75rem)/1.25 var(--disp);
  margin-top:22px;padding-top:18px;border-top:2px solid var(--blue)}
#luecke .km-big,#luecke .wtxt>p{text-align:left;max-width:none;margin-left:0}
/* 🔴 GEMESSENE REGRESSION 11.08., beim Umzug der Zusage in die Textspalte entstanden und sofort
   wieder gefixt. components.css:1003 setzt `@media(min-width:760px){.km-big .mark{white-space:nowrap}}`
   — sinnvoll auf voller Breite (verhindert ein einzelnes Waisenwort in der Auszeichnung), zerstörend
   in einer SPALTE: der Satz „Wir schließen die Lücke — mit Deinem Team." darf dann nicht umbrechen,
   seine min-content-Breite wird zur Mindestbreite der Rasterspalte, und die frisst die andere.
   GEMESSEN: Raster kippte von 1.05fr/.95fr auf 294,7px/813,8px — die Schere-Grafik schrumpfte von
   rund 620 auf 295px Breite und 130px Höhe. Das ist genau die Beschwerde „Grafik zu klein" von
   heute früh, nur diesmal von mir verursacht. Nur in dieser Spalte zurückgenommen. */
#luecke .wtxt .km-big .mark{white-space:normal}
/* SVG-Beschriftung: der Kasten rendert bei ~534px Breite, ein 19px-Label im 1000er-viewBox landet
   also bei rund 10px auf dem Schirm — unlesbar (Karsten: „kann kein Mensch lesen"). Schriftgrade
   im viewBox verdoppelt; „Was möglich wäre" ist ganz raus, die y-Achse erklärt jetzt der Fließtext. */
#luecke .schere .sl{font-size:36px}
#luecke .schere .sgapl{font-size:30px}
#luecke .schere .sx{font-size:22px;letter-spacing:.1em}
/* .lgap/.lgrow ENTFERNT 11.08.: selbstgebautes Zahlen-Muster, ersetzt durch das
   CI-Bauteil .bento/.bcell/.bignum (components.css) — siehe #luecke. */

/* I · Schichten-Stapel (#schichten) — portiert aus OS-Sales-Deck v0.2.0, Folie 12.
   Drei Ebenen von oben nach unten: Module · Basis · was beim Kunden schon läuft.
   ⚑ Die TRAGENDE Design-Regel kommt aus dem Deck und darf nicht wegoptimiert werden:
   die unterste Ebene ist SCHMALER (78 %) als die beiden Jerry-OS-Ebenen darüber —
   „die Breitendifferenz ist die halbe Aussage; bei gleicher Breite läse es niemand als Schicht."
   Nur Bestands-Token. Ein neuer Wrapper (.osstack) plus drei Hilfsklassen, weil es diese
   Komponente in der Routen-Welt noch nicht gab.
   NEU GEBAUT 10.08. nach Karsten-Feedback („der gesamte Aufbau ist eine Katastrophe … auf einen Blick
   die drei Ebenen erkennen, nicht über 30 cm Höhe"). Die erste Fassung stapelte drei ausformulierte
   Blöcke — Modul-Beschreibungen und Basis-Sätze allein machten über 1000px. Jetzt: Icons + Namen oben,
   Stichwort-Bullets in der Mitte, Kacheln unten. Zielhöhe unter 500px.
   Die 78-%-Regel der untersten Ebene bleibt — sie ist die Schicht-Aussage, nicht Dekoration. */
/* RAHMEN 11.08. (Karsten: „wird nicht als zusammenspielendes System wahrgenommen — es müsste ein
   Rahmen um die 3 Ebenen gezogen werden"). Die drei Ebenen standen als lose Blöcke untereinander;
   nichts sagte, dass sie EIN System sind. Jetzt eine gemeinsame Klammer mit Beschriftung. */
.osstack{margin:24px 0 16px;display:flex;flex-direction:column;gap:8px;align-items:stretch;
  border:2px solid var(--blue);border-radius:20px;padding:18px 18px 22px;position:relative}
.osstack::before{content:"JERRY OS";position:absolute;top:-11px;left:26px;background:#fff;
  padding:0 12px;font:800 .7rem var(--body);letter-spacing:.16em;color:var(--blue)}
/* Auf dunklem/blauem Grund muss die Rahmen-Beschriftung den Grund aufnehmen, sonst steht ein
   weisser Kasten in der Fläche. */
.sblock:not(.white) .osstack::before{background:var(--ink)}
.sblock.bbg .osstack::before{background:var(--blue);color:#fff}
/* 🔴 EBENEN-STAPEL BERUHIGT 12.08. (Karsten: „der ganze Ebenen sieht nicht gut aus, nicht mittig
   ausgerichtete Inhalte und eine sehr hohe Balken-/Ebenendarstellung").
   GEMESSEN, was der Befund war: Der Stapel war 515px hoch, und die drei Ebenen richteten sich
   UNTERSCHIEDLICH aus — Modul-Ebene links, Basis-Ebene links, Werkzeug-Ebene zentriert. Genau
   dieser Bruch liest sich als „nicht ausgerichtet": die unterste Ebene ist zusätzlich schmaler
   (78 %, das ist die Schicht-Aussage und bleibt), sodass die Kante nirgends durchgeht.
   ZWEI EINGRIFFE:
   ① Alles mittig — Label, Aufzählung und Zusatzzeile. Ein Schaubild hat eine Mittelachse; die
      Werkzeug-Ebene hatte sie schon, die beiden darüber nicht.
   ② Höhe raus, ohne Inhalt zu streichen: Polster, Zeilenabstände und Icon-Größe zurück.
      Die Breitendifferenz der untersten Ebene bleibt unangetastet — sie trägt die Aussage. */
.oslayer{border-radius:16px;padding:14px 20px 15px}
.oslayer.mod{background:#f4f5f5;border:1px solid rgba(0,0,0,.08)}
.oslayer.base{background:var(--blue);color:#fff}
.oslayer.tools{width:78%;margin:0 auto;background:#fff;border:1px dashed rgba(0,0,0,.22)}
.osstack .oslbl{font:800 .68rem var(--body);letter-spacing:.13em;text-transform:uppercase;
  color:#6b7075;margin:0 0 10px;text-align:center;max-width:none}
.osstack .oslbl i{font-style:normal;font-weight:600;letter-spacing:.02em;text-transform:none;opacity:.75}
.osstack .oslbl.wh{color:#cfd8ff}
/* Module: eine Reihe aus sechs Icon-Kacheln — Icon + Name, sonst nichts */
.osmods{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.osmod{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;
  background:#fff;border-radius:12px;padding:12px 8px}
.osmod img{width:32px;height:32px;display:block}
.osmod b{font:800 .78rem/1.25 var(--disp);color:var(--ink-soft)}
/* Basis: sechs Stichworte in drei Spalten */
/* 🔴 PARALLELOGRAMM STATT PUNKT 12.08. (Karsten: „in der Jerry OS Basis-Darstellung sind Punkte als
   Bullets — müssen kleine Parallelogramme sein"). Befund bestätigt: hier stand `border-radius:50%`,
   also ein RUNDER Punkt — als einzige Aufzählung im ganzen System. Die Hausform ist
   `transform:skew(-12deg)` mit leicht gerundeter Ecke (components.css:599/643/1491 …), sie ist eine
   Signature des Design-Systems und nicht verhandelbar.
   Vertikal nach derselben rechnenden Regel wie die FAQ-Keile (Block U): Marker-Mitte = halbe
   Zeilenhöhe. Damit ist auch dieser Keil gegen künftige Schriftgrößen immun statt getrimmt. */
.osbul{display:grid;grid-template-columns:repeat(3,max-content);justify-content:center;gap:6px 40px}
.osbul span{position:relative;padding-left:17px;font:700 .92rem/1.45 var(--body);color:#fff}
.osbul span::before{content:"";position:absolute;left:0;top:calc((1lh - 9px)/2);width:9px;height:9px;
  border-radius:2.5px;transform:skew(-12deg);background:#cfd8ff}
/* Versalien entfernt 11.08. (Karsten: „den Style haben wir doch nicht in unserer CI, oder doch?").
   Antwort: doch — aber nur für Kleinstelemente. Das Design-System führt Versalien als Signature #1
   ausschließlich für den Eyebrow (8.5pt uppercase, tracked); alle 26 Verwendungen in components.css
   sind Labels (.label, .chip, .mcap, .reflab, .tilebadge …), nie ein Satz. Diese Dreierzeile ist eine
   Aussage, kein Label — deshalb Normalschreibung. */
.osmehr{margin:12px auto 0;font:600 .9rem/1.45 var(--body);color:#cfd8ff;text-align:center;max-width:820px}
.osmehr b{color:#fff;font-weight:800}
/* Unterste Ebene: Kacheln, ruhig */
.ostools{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.ostools span{background:#f4f5f5;border-radius:999px;padding:6px 14px;
  font:700 .82rem var(--body);color:#3a3e42}
@media(max-width:900px){
  .osmods{grid-template-columns:repeat(3,1fr)}
  .osbul{grid-template-columns:repeat(2,1fr)}
  .oslayer.tools{width:100%}
}
@media(max-width:560px){.osmods{grid-template-columns:repeat(2,1fr)}.osbul{grid-template-columns:1fr}}

/* J · #kern gestalterisch (Karsten 10.08.). Zwei gemessene Ursachen:
   ① Die drei Dreiklang-Karten standen versetzt (top 0/34/12) — das ist die 6n-Staffel der blauen
      Welt (components.css:1417-1422), gedacht für Sechser-Gruppen. Bei DREI Karten wirkt sie
      zufällig, genau wie das 4n-Muster bei den fünf JSE-Kacheln. Versatz hier aus.
   ② Der Fließtext lief auf 600px in einem 1152px-Container — Rest der Zweispalten-Anordnung, die
      es seit dem Entfernen des Alt-Schaubilds nicht mehr gibt. Die halbe Sektion stand leer.
   Der Abschnitt ist eine Anmoderation, also mittige Satzachse wie .whead im Original
   (components.css:97) — nicht linksbündig wie eine Textspalte neben einem Bild. */
/* Satzachse 11.08. (Karsten: „nun sind alle zentriert — passt das zur Gesamtgestaltung?").
   Nachgemessen: Die Seite liegt mit 58 % zentriert genau im Website-Schnitt (/digital/ 58 %,
   /jerry-engine/ 65 %) — ABER dieser Abschnitt war als einziger 4/0, also voll zentriert
   inklusive Fließtext. Ursache: Beim Entfernen des Alt-Schaubilds verlor er seine zweite Spalte,
   der Text blieb aber in der Mitte stehen. Kein anderer Abschnitt der Website macht das.
   Jetzt Hausform: Überschrift und Kernaussage mittig (wie .whead überall), Fließtext LINKSBÜNDIG
   in einer Spalte auf 780px — dieselbe Satzbreite wie die Original-Regel .sblock .win>p
   (components.css:376). Zentrierter Fließtext trägt nur bis etwa zwei Zeilen. */
#kern .wtxt{text-align:center}
#kern .wtxt>h2{max-width:820px;margin-left:auto;margin-right:auto}
#kern .wtxt>.km-big{max-width:900px;margin-left:auto;margin-right:auto}
#kern .wtxt>p:not(.km-big){text-align:left;max-width:780px;margin-left:auto;margin-right:auto}
/* Dreiklang-Karten (Karsten 10.08.: „zu nah am Text und grau — sieht öde aus"):
   Versatz aus, deutlich mehr Luft nach oben, und Rubrikfarbe statt #f4f5f5-Grau. Die Karten sind
   der Kern der Sektion — sie sollen tragen, nicht als Fußnote unter dem Absatz kleben.
   Blau lasiert + blaue Kontur + blaue Überschrift; das Grau kam aus .sblock.white .ic
   (components.css:134) und ist auf einer blauen Rubrikseite belanglos. */
/* Flächenwechsel 11.08. (Karsten: „das muss immer wechseln, sonst merkt man nicht, dass etwas Neues
   thematisiert wird"). Vier Abschnitte in Folge waren weiss. Neue Folge:
   Kopf blau · Lücke weiss · Kern DUNKEL · Schichten weiss · Beispiel DUNKEL · Nutzen BLAU · Termin weiss.
   Die Kacheln brauchen dafür eine Fassung für dunklen Grund. */
#kern .igrid{margin-top:44px;gap:20px}
#kern .igrid .ic{top:0;margin-top:0;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.2);padding:26px 22px;border-radius:16px}
#kern .igrid .ict{color:#fff;font-size:1.12rem}
#kern .igrid .icd{color:#c9cdd1}
#kern .wtxt>p:not(.km-big):last-of-type{border-top-color:rgba(255,255,255,.2);color:#c9cdd1}
#kern .klist.b span{color:#e8eaec}
/* 🔴 ZURÜCKGEBAUT 11.08. — #beispiel steht wieder auf WEISS (Karsten: „nie zwei Abschnitte
   hintereinander auf demselben Hintergrund"; #schichten davor ist dunkel).
   Damit sind die vier Weiss-auf-Dunkel-Regeln, die hier standen, zu Fehlern geworden — sie hätten
   weisse Schrift auf weisser Fläche ergeben, also exakt den Kontrast-1,00-Fall, den derselbe
   Flächenwechsel am 11.08. schon einmal erzeugt hat (siehe Kommentar unten). Entfernt statt
   überschrieben, damit keine tote Regel liegen bleibt:
   · .wflabel b (war #fff)  → Basis rebuild.css:406 var(--ink-soft)
   · .wflabel span (war #cfd8ff) → Basis rebuild.css:407 var(--blue)
   · .km-big (war #fff)     → components.css:792 .sblock.white .km-big = #101112
   · .tfoot (war #fff)      → Basis; .tfoot b trägt rebuild.css:175 var(--blue)
   · .sstep::after (war #fff, der Verbindungspfeil) → components.css:857 #101112
   Was BLEIBT, weil es auf beiden Flächen stimmt: die Rollen-Kante und der Tinte-Kartentext. */
#beispiel .sstep.du{border-left-color:var(--ink-soft)}
/* Kartentext explizit auf Tinte — stand ursprünglich hier, weil die dunkle Sektion color:#fff
   vererbte und die Karten background:#fff haben (Kontrast 1,00, Karteninhalt unsichtbar). Auf
   weisser Fläche ist die Regel redundant, aber richtig; sie bleibt als Schutz stehen, falls die
   Sektion je wieder kippt. */
#beispiel .sstep,#beispiel .sstep b,#beispiel .sstep p,#beispiel .sstep i{color:var(--ink-soft)}
#beispiel .sstep.os .secnum{color:var(--blue)}
#beispiel .sstep.du .secnum{color:var(--ink-soft)}
/* Karten-Grund auf dunkler Fläche: .sstep.os hatte nur 4 % Blau-Lasur — auf Schwarz blieb der Grund
   dunkel, der Text ist aber Tinte. Kontrast 1,11. Beide Kartentypen brauchen einen DECKENDEN
   hellen Grund; der Rollen-Unterschied trägt weiterhin die Kante, nicht die Fläche. */
/* Blaue Auszeichnungen kippen auf dunklem Grund: #002dff auf Schwarz misst 2,82. Auf hellen
   Flächen bleibt Rubrikblau richtig, auf dunklen wird es hell.
   Spezifität bewusst hoch: components.css setzt .kontakt .eyebrow und .faqsec .eyebrow bereits
   über data-sec bzw. --acc; eine flache Regel würde dort verlieren. */
.content[data-sec="d"] .sblock:not(.white):not(.bbg) .tfoot b,
.content[data-sec="d"] .sblock:not(.white):not(.bbg) .eyebrow,
.content[data-sec="d"] .kontakt .eyebrow,
.content[data-sec="d"] .kontakt .maillink,
.content[data-sec="d"] .faqsec .eyebrow{color:#cfd8ff}
/* Datenschutz-Satz absetzen: er beantwortet eine andere Frage als der Dreiklang darüber */
#kern .wtxt>p:last-of-type{margin-top:26px;padding-top:20px;border-top:1px solid rgba(0,0,0,.1);
  font-size:.95rem;color:#3a3e42}

/* K · Zwei Workflows mit Rollen-Kennzeichnung (#beispiel, Karsten 10.08. 22:13: „A und B beide").
   Kern der Darstellung ist Karstens Grundsatzentscheidung von 21:32: Wir verkaufen VORBEREITUNG,
   nicht Automatisierung. Deshalb trägt JEDER Schritt sichtbar, wer ihn tut — blaue Kante = Jerry OS
   bereitet vor, dunkle Kante = Du entscheidest. Ohne diese Unterscheidung liest sich eine
   Schrittkette wieder als „die Maschine macht es, Du nickst" — genau der Fehler von heute Abend.
   .sysflow ist ohne Zusatzregel fünfspaltig (components.css:852), passt also für fünf Schritte. */
#beispiel .sysflow{margin:14px 0 30px}
#beispiel .sstep{border:1px solid rgba(0,0,0,.1);border-left-width:4px}
/* Deckende helle Kartengründe. Der Rollen-Unterschied trägt die KANTE, nicht die Fläche.
   NACHGEZOGEN 11.08. beim Rückbau auf Weiss: `.du` hatte `background:#fff`. Auf der dunklen
   Sektion war das richtig, auf der weissen ist es eine Kachel in der SEKTIONSFARBE —
   DESIGN-REGELN.md Regel 3 („Kacheln NIE in der Hintergrundfarbe der Sektion"). Ein 10-%-Rand
   allein trägt das nicht. Deshalb der neutrale Ton #f4f5f5 — kein neuer Wert, sondern derselbe,
   den `#luecke .bcell` auf derselben weissen Fläche schon verwendet. `.os` behält die blaue
   Lasur und setzt sich dadurch weiterhin von `.du` ab. */
#beispiel .sstep.os{border-left-color:var(--blue);background:#eef2ff}
#beispiel .sstep.du{border-left-color:var(--ink-soft);background:#f4f5f5}
#beispiel .sstep i{font-style:normal;font-weight:800;color:var(--ink-soft);display:block;margin-top:6px}
#beispiel .sstep.os .secnum{color:var(--blue)}
#beispiel .sstep.du .secnum{color:var(--ink-soft)}
/* Vorspann je Workflow */
.wflabel{display:flex;align-items:baseline;gap:12px;margin:30px 0 0;text-align:left}
.wflabel b{font:800 1.05rem/1.3 var(--disp);color:var(--ink-soft)}
.wflabel span{font:800 .68rem var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}

/* H · Sieben-Schritt-Ablauf. .sysflow ist auf repeat(5,1fr) fest (components.css:852); bei sieben
   Karten entstünde 5+2. Hilfsraster mit 24 Spalten: je Karte 6 → 4 in Zeile 1, die restlichen 3
   mittig darunter (4+3). Der Pfeil von Karte 4 zeigt sonst aus der Zeile heraus → dort aus.
   Unter 980px greift die Original-Regel (einspaltig, Pfeil nach unten) unverändert. */
@media(min-width:981px){
  .sysflow.os7{grid-template-columns:repeat(24,1fr)}
  .sysflow.os7 .sstep{grid-column:span 6}
  .sysflow.os7 .sstep:nth-child(4)::after{content:""}
  .sysflow.os7 .sstep:nth-child(5){grid-column:4/span 6}
  .sysflow.os7 .sstep:nth-child(6){grid-column:10/span 6}
  .sysflow.os7 .sstep:nth-child(7){grid-column:16/span 6}
}

/* L · Messaging-Pfeiler im Kopf (11.08., Karsten: „Spielsystem-Absatz zum Header-Content machen").
   NICHT als zweite .km-big: Der Design-Check erlaubt genau EIN Key-Message-Statement je Sektion
   (route-jerry-os.html#kopf: 2 Key-Message-Statements, max 1) — die Regel hat den ersten Versuch
   sofort abgefangen. Eigene, ruhigere Auszeichnung: prominent, aber dem Claim untergeordnet. */
.spielsystem{font:600 clamp(1.05rem,1.5vw,1.25rem)/1.45 var(--body);margin-top:10px;
  max-width:46ch;margin-left:auto;margin-right:auto}
.sblock.bbg .spielsystem b{color:#fff}

/* M · Übergabe-Zeile am Kopfende (11.08.) — abgesetzt, damit sie als Brücke in die nächste
   Sektion liest und nicht als vierte Kopfzeile. */
.gapline{margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.25);
  font:600 clamp(1rem,1.35vw,1.15rem)/1.5 var(--body);max-width:52ch;margin-left:auto;margin-right:auto}

/* N · Kopf-Auszeichnung (11.08., Karsten: „weisser Balken mit blauer Schrift statt schwarzem —
   Kacheln auch weiss mit blauer Schrift und passenden Icons, alle auf gleicher Höhe").
   Der Balken nimmt damit die Original-Grammatik auf: components.css:529 setzt .mark auf
   .sblock.bbg bereits auf weiss/blau. Kein neuer Ton, nur konsequent angewandt. */
.inkbar{background:#fff;color:var(--blue);padding:.04em .22em;border-radius:6px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.kopflead{margin-top:22px;font:500 clamp(1rem,1.3vw,1.12rem)/1.6 var(--body);max-width:56ch;
  margin-left:auto;margin-right:auto}
.kopflead b{color:#fff}
/* Kacheln: weiss, blaue Überschrift, gleiche Höhe. align-items:stretch ist Grid-Default, die
   Karten waren nur durch den geerbten 6n-Versatz (components.css:1417-1422) unterschiedlich
   platziert — top:0 stellt sie auf eine Linie, die gleiche Höhe kommt aus dem Raster. */
#kopf .igrid{margin-top:34px;align-items:stretch}
#kopf .igrid .ic{background:#fff;border:none;padding:26px 22px;border-radius:16px;
  top:0;margin-top:0;height:100%;box-sizing:border-box;justify-content:flex-start}
#kopf .igrid .ic img{width:46px;height:46px;display:block}
#kopf .igrid .ict{color:var(--blue);font-size:1.1rem}
#kopf .igrid .icd{color:#3a3e42}

/* O · Datenschutz-Satz in #schichten (11.08.): NICHT als zweite .km-big — der Design-Check erlaubt
   genau eine je Sektion und hat den ersten Versuch abgefangen. Eigene, ruhigere Auszeichnung. */
.dsatz{margin-top:22px;font:500 1rem/1.6 var(--body);max-width:820px;margin-left:auto;margin-right:auto}

/* P · Zahlen-Bento in #luecke (11.08.): zwei Zellen statt drei Spalten, deshalb Raster überschreiben.
   Alles andere kommt aus dem Original-Bauteil — .bignum, .blab, .bsrc bleiben unangetastet.
   ⚑ ABGELÖST durch .luecke4 (siehe P2) — die Regel bleibt, weil .luecke2 auch anderswo greifen kann. */
.bento.luecke2{grid-template-columns:repeat(2,1fr);margin-top:34px}
@media(max-width:820px){.bento.luecke2{grid-template-columns:1fr}}

/* P2 · VIER FAKTEN in #luecke (11.08., Karsten §3.1: „Key Fact links, Erläuterung rechts daneben").
   ⚑ KEIN NEUES BAUTEIL. Im Original gibt es nichts, was Zahl-links/Text-rechts leistet — geprüft:
   .kwrap ist die Kontaktkarte, .factrow/.fact sind zentrierte Pillen, .kpipanel ist gestapelt.
   Statt ein Bauteil zu erfinden, verteilt dieser Modifier die BEREITS VORHANDENEN Kinder der Zelle
   (.bignum · .blab · p · .bsrc) auf zwei Spalten. Das Markup bekommt dadurch keine einzige neue
   Klasse, und die Tonwerte der Hell-Fassung (Block Q darunter) greifen unverändert weiter.
   Spalte 1 = der Fakt (Zahl über Kurzlabel) · Spalte 2 = der Satz über der Quellenzeile.
   Zeile 2 ist bei beiden Spalten dieselbe Rasterzeile, dadurch stehen Label und Quelle auf einer Linie. */
.bento.luecke4{grid-template-columns:repeat(2,1fr);margin-top:34px}
/* Überleitungszeile unter dem einen verbliebenen Vorgang (13.08.). Bewusst NICHT .tfoot: die Sektion
   hat bereits einen Abbinder, ein zweiter in gleicher Optik hätte ihn entwertet. .ctr ist Bestand
   (components.css:378), hier nur ruhiger Grad und Abstand. */
.wfhint{margin-top:22px;font:500 .98rem/1.6 var(--body);color:#3a3e42;max-width:760px;margin-left:auto;margin-right:auto}
/* Ergebnis-Zeile im Vorgangs-Panel (13.08.). Etwas kräftiger als die Überleitungszeile darunter —
   sie ist das Ergebnis des Ablaufs, nicht ein Verweis. Kein .km-big (nur eines je Sektion erlaubt). */
.wfout{margin:18px auto 0;font:600 1.02rem/1.6 var(--body);color:var(--ink-soft);max-width:820px}
.wfout b{font-weight:800}
.content[data-sec="d"] .wfout b{color:var(--blue)}
/* Spaltenteilung 32 %, gemessen: bei 30 % brach „1.200 ×/Tag" als einzige der vier Zahlen um
   (185px Textbreite in einer 164px-Spalte). Nach der Verkleinerung (Karsten 11.08.: „die vier
   Kacheln bitte etwas kleiner") ist die Zahl schmaler, deshalb reicht die Spalte wieder — und die
   Erläuterung gewinnt die Breite zurück, die die Kachel an Höhe verliert. */
.bento.luecke4 .bcell{display:grid;grid-template-columns:minmax(120px,38%) 1fr;column-gap:22px;row-gap:6px;align-content:start;padding:20px 22px 18px}
.bento.luecke4 .bcell .bignum{grid-column:1;grid-row:1;margin-bottom:0}
.bento.luecke4 .bcell .blab{grid-column:1;grid-row:2;margin:0}
.bento.luecke4 .bcell p{grid-column:2;grid-row:1}
.bento.luecke4 .bcell .bsrc{grid-column:2;grid-row:2;margin-top:0;align-self:end}
/* ZAHL WIEDER GRÖSSER 12.08. (Karsten: „da müssten auch die Big Figures in blau und größer sein").
   Kein Widerspruch zum Verkleinern von gestern: die KACHEL bleibt kompakt (Polster 20/22/18, Label
   und Satz klein) — nur die Zahl wächst zurück. Vorher 34px, jetzt 46px; damit steht sie wieder
   nahe an der Original-Stufe des Bauteils (clamp 40–64px, components.css:500), ohne die Kachel
   auf ihre alte Höhe zu treiben. Die Fakt-Spalte wächst dafür von 32 auf 38 % mit, sonst bricht
   „1.200 ×/Tag" um — derselbe gemessene Effekt wie am 11.08. */
.bento.luecke4 .bcell .bignum{font-size:clamp(32px,3.2vw,46px);line-height:1.02}
.bento.luecke4 .bcell .blab{font-size:.85rem;line-height:1.3}
.bento.luecke4 .bcell p{font-size:.83rem;line-height:1.5}
/* components.css:683 versetzt jede zweite Bento-Zelle um 12px — richtig für die vierspaltige
   Original-Reihe, falsch für ein 2×2-Raster, wo es als Fehlausrichtung liest (Karsten 11.08.:
   „nicht gut strukturiert"). Nur für dieses Raster zurückgenommen. */
@media(min-width:900px){.bento.luecke4 .bcell:nth-child(even){margin-top:0}}
@media(max-width:980px){.bento.luecke4{grid-template-columns:1fr}}
@media(max-width:560px){.bento.luecke4 .bcell{grid-template-columns:1fr;row-gap:4px}
  .bento.luecke4 .bcell .bignum,.bento.luecke4 .bcell .blab,.bento.luecke4 .bcell p,.bento.luecke4 .bcell .bsrc{grid-column:1;grid-row:auto}}

/* Q · Zahlen-Bento auf der OS-Seite (11.08., korrigiert nach Karsten: „aus den 4 Fakten nun
   schwarze Kacheln gemacht? Sieht aus wie ein Friedhof").
   Der Befund war richtig und die Ursache ist eine Kontextverwechslung meinerseits: .bcell ist zwar
   das CI-Bauteil für Zahlen, aber es ist für DUNKLE Sektionen gebaut — Grund #141514, weisse Zahl,
   grünes Label (components.css:498-502). Auf /jerry-social-engine/ steht es auf dunklem Grund und
   ist dort richtig. Auf einer weissen Sektion werden daraus schwarze Blöcke.
   Deshalb hier die HELLE Fassung desselben Bauteils — Struktur, Typo und Klassen bleiben identisch,
   nur die Tonwerte drehen. Vorbild ist .sblock.white .ic (components.css:134), die Hell-Variante
   der Icon-Kachel: #f4f5f5 mit feiner Kontur. */
#luecke .bcell{background:#f4f5f5;border:1px solid rgba(0,0,0,.08)}
/* ZAHL AUF RUBRIKBLAU 12.08. (Karsten: „die Big Figures in blau"). Zulässig, weil die Zahl eine
   GROSSE Fläche ist — die Design-Regel „klein grün/gelb auf hell → Tinte" trifft Kleinschrift, nicht
   eine 46px-Ziffer; Blau misst auf #f4f5f5 6,96:1.
   ⚑ FOLGEÄNDERUNG, sonst konkurrieren zwei Blautöne: Das Label stand ebenfalls auf Rubrikblau. Mit
   blauer Zahl DARÜBER wird daraus ein Farb-Doppel ohne Rangfolge — die Kachel hätte zwei gleich
   laute Stimmen. Label geht deshalb auf Tinte. Neue Rangfolge: Zahl blau (laut) → Label Tinte
   (mittel) → Erläuterung grau (leise) → Quelle grau/klein. */
#luecke .bcell .bignum{color:var(--blue)}
#luecke .bcell .bunit{color:#6b7075}
#luecke .bcell .blab{color:var(--ink-soft)}
#luecke .bcell p{color:#3a3e42}
#luecke .bcell .bsrc{color:#6b7075;opacity:.85;text-transform:none;letter-spacing:.01em;font-size:.66rem}
#luecke .bcell:hover{border-color:rgba(0,45,255,.45)}
/* Grafik füllt ihre Spalte: .media ist seit der Spaltenbalance ein Flex-Container, darin schrumpfte
   das SVG auf seine intrinsische Breite (gemessen 300px statt Spaltenbreite). */
#luecke .schere{width:100%}
#luecke .schere svg{width:100%;height:auto}

/* R · 🔴 WIEDERHERGESTELLT 11.08. — der komplette Farb-Block der Schere-Grafik war verloren.
   Ursache: eine meiner Block-Ersetzungen per Skript hat ihn mitgelöscht; übrig blieben nur die
   Schriftgrad-Regeln. Das SVG rendert ohne diese Regeln in Browser-Standard — schwarze Fläche,
   schwarze Linien. Karsten hat es zweimal gemeldet („kompletter schwarzer Keil"); ich hatte
   danach die MASSE gemessen (521×229, Seitenverhältnis korrekt) und daraus geschlossen, die
   Grafik sei in Ordnung. Falsche Eigenschaft geprüft — die Farbe war das Problem.
   Werte 1:1 aus jerry-deck.css:1173-1184 (OS-Sales-Deck), Lücken-Fläche auf Rubrikblau statt
   Deck-Gelb (Karsten 10.08.: „da müssen wir blau bleiben — grün ist Jerry Engine"). */
.schere .sgrid{stroke:rgba(0,0,0,.12);stroke-width:1;fill:none}
.schere .sline{fill:none;stroke-width:5;stroke-linecap:round}
.schere .sline.tech{stroke:var(--blue)}
.schere .sline.haus{stroke:var(--ink-soft)}
.schere .sdot{r:9}
.schere .sdot.tech{fill:var(--blue)}
.schere .sdot.haus{fill:var(--ink-soft)}
.schere .sfill{fill:var(--blue);opacity:.14}
.schere .sl{font:800 19px/1 var(--disp);fill:var(--ink-soft)}
.schere .sl.tech{fill:var(--blue)}
.schere .sgapl{font:800 15px/1 var(--body);fill:var(--ink-soft);letter-spacing:.02em}
.schere .sx{font:800 12px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;fill:#6b7075}
#luecke .schere .sl{font-size:36px}
#luecke .schere .sx{font-size:22px;letter-spacing:.1em}

/* T · FAQ-SEKTION AUF WEISS (11.08.2026, Karsten: „FAQ auf weiß").
   Die Sektion trägt jetzt `white` im Markup (build.py), damit alle vorhandenen .sblock.white-
   Regeln greifen und der neue Regel-9-Check die Fläche aus der Klasse ablesen kann.
   Was NICHT von selbst mitkommt, sind die drei Regeln in components.css:1515-1517 — sie färben
   die FAQ hart für dunklen Grund und ergäben sonst weisse Schrift auf weisser Fläche. Sie werden
   hier gezielt gedreht, nicht global gelöscht: .faqsec kann auf anderen Flächen wieder dunkel
   gebraucht werden. Spezifität .sblock.faqsec (0,2,x) schlägt .faqsec (0,1,x); rebuild.css lädt
   zuletzt (build.py:273). */
.sblock.faqsec.white .faqi>summary{color:var(--ink-soft)}
/* 🔴 HOVER MUSS AUF DERSELBEN EBENE STEHEN (13.08., nachdem Karsten meldete „Hover funktioniert in
   keiner Section"). Der Befund war korrekt und die Ursache meine: Die Ruhe-Regel darüber hat
   Spezifität 0-0-4-1, die Originalregel `.faqi>summary:hover` (components.css:1494) nur 0-0-2-1.
   Damit gewinnt die Ruhefarbe AUCH im Hover-Zustand — der Hover konnte nie greifen.
   Das hartcodierte Blau zu entfernen hat ihn deshalb nicht freigelegt, sondern ganz abgeschaltet.
   Lehre: Eine Zustandsregel muss mindestens so spezifisch sein wie die Regel, die den Ruhezustand
   setzt — sonst ist sie stumm, ohne dass irgendetwas warnt. */
.sblock.faqsec.white .faqi>summary:hover{color:var(--acc)}
.sblock.faqsec.white .faqa{color:#3a3e42}
.sblock.faqsec.white .faqi,.sblock.faqsec.white .faqi:first-child{border-color:rgba(0,0,0,.12)}
/* 🔴 ENTFERNT 13.08. (Karsten): Hier stand `color:var(--blue)` — hart verdrahtet, und damit auf
   /beratung/ (gelb) und /jerry-engine/ (grün) die FALSCHE Rubrik. Ich hatte Blau gesetzt, weil es
   als einzige Rubrikfarbe auf Weiss die WCAG-Schwelle hält; das war eine von MIR eingeführte
   Schwelle, keine Jerry-Regel — die DESIGN-REGELN kennen dazu keine Zahl.
   Jetzt greift wieder die Originalregel components.css:1494 `.faqi>summary:hover{color:var(--acc)}`,
   also je Route die echte Rubrikfarbe. Karsten-Entscheidung: Original-Farbe, kein Umbau der Fläche.
   ⚠️ Bewusst getragen: Auf Weiss misst Gelb 1,51 und Grün 1,88 — der Hover ist dort schwächer
   lesbar als der Ruhezustand (Tinte, 17,31). Das ist ein Hover-Zustand, kein Dauerzustand, und
   die Zeile springt nicht — die Information geht nicht verloren. */
/* 🔴 Eyebrow — zweiter Anlauf, nachdem der erste GEMESSEN durchgefallen ist.
   Erster Versuch war `.content[data-sec="d"] … {color:var(--blue)}` — nur für blaue Routen.
   Auf /beratung/ (data-sec="c") blieb damit die Rubrikfarbe stehen: components.css:1513 setzt
   .faqsec .eyebrow auf var(--acc), das ist dort GELB. Gemessen auf weissem Grund: 1,51:1 —
   der Text war faktisch unsichtbar. Exakt die Fehlerklasse §6.3 (Bauteil stimmt, Kontext nicht),
   diesmal von mir, und nur gefunden, weil ich die Farbe auf einer ZWEITEN Route nachgemessen habe.
   Route-unabhängige Fassung: Auf heller Fläche trägt weder Gelb (1,51) noch Jerry-Grün (~1,8) als
   Kleinschrift — das ist die bestehende Design-Regel „kleine grüne/gelbe Schrift auf hell → Tinte",
   und einen dunkleren Gelb-/Grünton gibt es in den Tokens nicht (No Hallucinated Design; green-600
   ist am 01.07. zurückgezogen worden). Blau träge (7,45), aber eine je Route unterschiedliche
   Lösung wäre eine Sonderregel pro Rubrik. Deshalb überall Tinte; die Rubrikfarbe trägt auf
   derselben Seite der Keil und das Auf-/Zu-Zeichen NICHT mehr — auch die sind aus demselben Grund
   auf Tinte gesetzt (siehe unten). */
.sblock.faqsec.white .eyebrow{color:var(--ink-soft)}
/* ⚑ Das Auf-/Zu-Zeichen und der Aufzählungs-Keil hängen an var(--acc) — je Route gelb (Beratung),
   blau (Digital/OS) oder grün (Engine/JSE). Auf DUNKLEM Grund tragen alle drei. Auf WEISS trägt
   Gelb nicht (#ffcc33 auf #fff = 1,66:1) und Grün nur knapp — genau die Regel aus dem
   Design-System: kleine grüne/gelbe Schrift auf hell wird Tinte. Grosse Flächen und Rahmen
   dürfen die Rubrikfarbe behalten, dieses Zeichen ist ein Kleinstglyph. */
.sblock.faqsec.white .faqi>summary::after{color:var(--ink-soft)}
.sblock.faqsec.white .faqi>summary::before{background:var(--ink-soft)}

/* U · AUFZÄHLUNGS-PARALLELOGRAMME AUF DIE TEXTZEILE (12.08.2026, Karsten: „die kleinen Bullet
   Parallelogramme sind irgendwie nicht auf einer Linie mit den Texten dahinter (bei FAQ) —
   bitte überall challengen").
   BEFUND (analytisch über das Box-Modell auf allen acht Routen gemessen, nicht geschätzt):
   Es gibt SIEBEN Parallelogramm-Regeln mit sieben verschiedenen Vertikal-Offsets — top:13px ·
   top:16px · top:17px · top:50%+margin · margin-top:.5em · top:.4em · top:.62em. Jede ist von Hand
   auf EINE Schriftgröße getrimmt. Das ist die Ursache: sobald sich fs oder line-height ändert,
   wandert der Keil, und niemand merkt es.
   Abweichung Marker-Mitte gegen Mitte der ersten Textzeile:
     .klist span   −0,2px ✓   ·  .dgrid span   0,0px ✓  ·  .osbul span  +0,5px ✓
     .faqi>summary +1,5px ✗   ·  .fsitem      +1,2px ✗
   Nur die beiden Falschen werden angefasst — und zwar RECHNEND statt getrimmt:
   Marker-Mitte := halbe Zeilenhöhe. `1lh` ist die Zeilenhöhe des Elements selbst, damit stimmt die
   Regel bei JEDER künftigen Schriftgröße von allein. Unterstützung vorher im Browser geprüft
   (CSS.supports + Messung: 20px/1.4 → calc((1lh - 11px)/2) = 8,5px, exakt der Sollwert).
   Die drei sauberen Regeln bleiben unangetastet — sie stimmen heute, und ein Umbau ohne Not wäre
   genau die Art Kollateralschaden, vor der §6 warnt. */
.faqi>summary::before{margin-top:calc((1lh - 11px)/2)}
.fsitem::before{top:calc((1lh - 12px)/2)}

/* V · VORGANGS-PANELS in #beispiel (12.08.2026, Karsten: „die beiden Workflows sollten sich
   irgendwie optisch unterscheiden"). Vorher liefen beide Ketten ungerahmt untereinander und lasen
   sich als EIN Ablauf mit zehn Schritten.
   ⚑ Werte 1:1 aus .calbox (components.css:314) — dem Haus-Panel. Nur der NAME ist neu: .calbox
   heisst nach der Calendly-Box, und ein Workflow ist keine. .oscard (720px zentriert) und .oslayer
   (gehört dem OS-Stapel) passen ebenfalls nicht. Kein neuer Ton, kein neuer Radius, keine neue Kontur.
   ⚑ KARTENTON KIPPT JE PANEL — und zwar aus Regel 3, nicht aus Geschmack: .sstep.du hat auf
   weisser Fläche #f4f5f5. Auf dem grauen Panel wäre das eine Kachel in der Panelfarbe. Also dort
   weiss. Die ROLLE hängt an der Kante (blau = Jerry OS bereitet vor, Tinte = Du entscheidest),
   nicht an der Fläche — so seit 10.08. dokumentiert, deshalb trägt der Tonwechsel keine Bedeutung. */
.wfblock{border:1px solid rgba(0,0,0,.12);border-radius:14px;padding:18px 22px 22px;margin-top:26px}
.wfblock.a{background:#f4f5f5}
.wfblock.b{background:#fff}
.wfblock .wflabel{margin-top:0}
.wfblock .sysflow{margin:12px 0 0}
/* Neutraler Kartenton je Panel gegenläufig (Regel 3) — die blaue OS-Karte bleibt in beiden gleich.
   ⚑ `#beispiel` MUSS im Selektor stehen: `#beispiel .sstep.du{background:#f4f5f5}` (Block K oben)
   trägt einen ID-Selektor und schlägt jede klassenbasierte Regel, egal wie spezifisch. Ohne das
   Präfix blieb die Du-Karte auf dem grauen Panel grau — gemessen: Kachelgrund identisch mit
   Panelgrund, also exakt der Regel-3-Verstoss, den diese Regel verhindern soll. */
#beispiel .wfblock.a .sstep.du{background:#fff}
#beispiel .wfblock.b .sstep.du{background:#f4f5f5}
@media(max-width:900px){.wfblock{padding:14px 14px 18px}}

/* W · 🔴 AUSRICHTUNG #luecke (12.08.2026, Karsten mit Screenshot: „siehst Du hier die diffuse
   Anordnung — die Grafik links sollte unten bündig sein mit unserer Conclusion, die kann also
   weiter nach oben, und dann ist auch der große Abstand rechts gefüllt").
   URSACHE, gemessen: BEIDE Spalten standen auf `justify-content:space-between`. Das verteilt den
   Rest gleichmäßig statt zu setzen — rechts riss es ein Loch von 89px zwischen Absatz und Zusage,
   links 20px zwischen Achse und Quellenzeile, und die linke Spalte endete 32px tiefer. Der Abstand
   war nirgends entschieden, er war Rest.
   VORGEHEN: Statt zu schätzen, sieben Spalten-/Abstands-/Schriftgrad-Kombinationen im laufenden
   DOM durchgemessen und die mit der kleinsten Rest-Differenz genommen.
   ERGEBNIS bei 1440px: Grafik-Unterkante zu Zusagen-Unterkante = −2px (vorher 32px auseinander,
   plus 89px Loch). Grafik 302 → 366px (+21 %), Absatz und Zusage beide 4-zeilig, rechte Spalte
   478px — breit genug, dass die Zusage nicht zerfranst.
   ⚑ Die Zusage wächst von 36 auf 40px mit. Das ist kein Zufallsfund, sondern der Hebel, der die
   rechte Spalte füllt UND die Conclusion markanter macht — beides stand auf Karstens Liste.
   ⚠️ EHRLICHE GRENZE: Die −2px gelten für 1440px. Die Bündigkeit hängt an den Zeilenumbrüchen
   beider Textblöcke; bei anderen Breiten kippt ein Block früher um und die Differenz wächst wieder.
   Das ist die Natur zweier flüssiger Textspalten neben einer festen Grafik — ohne feste Höhen
   nicht auflösbar, und feste Höhen wären der schlechtere Tausch. */
#luecke .win.two.rev{grid-template-columns:1.15fr .85fr}
#luecke .wtxt{justify-content:flex-start}
#luecke .media{justify-content:flex-start}
#luecke .wtxt .km-big{margin-top:40px;font-size:clamp(1.6rem,2.9vw,2.5rem)}
#luecke .bsrc{margin-top:16px}
@media(max-width:900px){#luecke .win.two.rev{grid-template-columns:1fr}
  #luecke .wtxt .km-big{margin-top:28px}}
/* Zwischenband 1150–1339px: Dort schrumpft die Zusage über den vw-Anteil der clamp-Formel schneller
   als die Grafik und fällt von vier auf drei Zeilen — die linke Spalte lief dadurch 41–54px länger
   (gemessen bei 1200 und 1280 am echten Viewport, nicht im iframe: dessen Werte waren durch
   Font-Ladezeitpunkt und injizierte Stile unbrauchbar und widersprachen sich um über 100px).
   Über den Schriftgrad ist es nicht zu lösen — der Block springt dort von drei auf fünf Zeilen,
   vier gibt es nicht. Also über die Spaltenteilung: 1fr/1fr nimmt der Grafik genau die Höhe, die
   der Zusage fehlt. Gemessen: 1280 → +8px, 1200 → −3px (vorher +54 bzw. +41). */
@media(min-width:1150px) and (max-width:1339px){#luecke .win.two.rev{grid-template-columns:1fr 1fr}}

/* X · 🔴 FLÄCHENWECHSEL-SICHERUNG (13.08.2026) — entstanden beim Abarbeiten der neun
   Regel-9-Verstöße. Neun Sektionen haben die Fläche gewechselt; die Kontrast-Messung danach fand
   in SIEBEN von ihnen unlesbaren Text. Alle Fälle sind dieselbe Fehlerklasse:
   ein Bauteil erbt die Textfarbe der SEKTION, obwohl es seinen eigenen Grund mitbringt —
   oder eine Rubrikfarbe steht auf der gleichfarbigen Rubrikfläche.
   Bewusst GENERISCH formuliert, nicht je Sektion: Diese Regeln greifen bei JEDEM künftigen
   Flächenwechsel. Eine Regel je Fundstelle hätte denselben Fehler beim nächsten Wechsel
   wieder entstehen lassen — genau so ist er ja entstanden. */

/* ① Calendly-Box: heller Grund (#f4f5f5), Text erbte auf dunkler Sektion WEISS → gemessen 1,09.
   Exakt der Fall vom 11.08. bei den Schritt-Karten in #beispiel. Der Kasten bringt seinen Grund
   selbst mit, also muss er auch seine Textfarbe selbst setzen — unabhängig von der Sektion. */
.calbox{color:var(--ink-soft)}
.calbox .cal-sub,.calbox .cal-note{color:var(--ink-soft)}

/* ② Eyebrow in der Rubrikfarbe auf der gleichfarbigen Rubrikfläche → gemessen 1,00.
   Betraf #story (gelb auf gelb) und #systeme (grün auf grün). */
.sblock.ybg .eyebrow.yl,.sblock.gbg .eyebrow.gr{color:var(--ink)}
/* ③ Umgekehrt: Tinte-Eyebrow auf dunkler oder blauer Fläche → gemessen 1,11 (Startseite,
   Sektion ②, damals #erfahrung — seit dem Inhalts-Umbau 16.08. heißt sie #jerry-os). */
.sblock:not(.white):not(.ybg):not(.gbg) .eyebrow.ink{color:#fff}

/* ④ Abbinder der Beratungs-Spur steht in Gelb (components.css:983) — auf gelber Fläche
   unsichtbar (1,00). Spezifität 0-0-3-0 schlägt die Original-Regel 0-0-2-0. */
.sblock.ybg .agclose,.sblock.ybg .agclose b{color:var(--ink)}

/* ⑤ Bild-Unterschrift im Produkt-Peek auf GRÜNER Sektion.
   🔴 Zwei falsche Anläufe, beide von der Messung widerlegt — die Kette gehört dokumentiert:
     1. Annahme „erbt Weiss, steht auf Grün" → Regel auf Schwarz gesetzt. Falsch.
     2. Annahme „vorbestehender Fehler, unabhängig vom Flächenwechsel" → Regel zurückgenommen.
        Ebenfalls falsch, und die gefährlichere der beiden: Sie hätte einen selbst verursachten
        Fehler als Altlast abgelegt.
   WAS TATSÄCHLICH GILT (per Gegenprobe im DOM gemessen — Sektion testweise auf dunkel gedreht):
   Der Kasten-Grund HÄNGT von der Sektionsfläche ab. Auf dunkler Sektion ist er hell (#f4f5f5),
   auf grüner dunkel (#0b0b0b) — components.css:628 setzt das für `.sblock.gbg` ausdrücklich, und
   `.media.prodpeek.light` (:660) kann es nicht überschreiben: 4 Klassen schlagen 3.
   Auf Grün ist der dunkle Kasten also ABSICHT — dann muss die Unterschrift hell sein, wie in der
   Grundfassung (:630). Nur die Farbe der Schrift wird gedreht, nicht der Kasten.
   Spezifität 0-0-5-0 schlägt :661 (0-0-4-0). Gemessen danach: 8,4:1 statt 1,07:1. */
.sblock.gbg .media.prodpeek.light .mcap{color:rgba(255,255,255,.7)}

/* Y · ÜBERLAPPUNG UND ÜBERHÖHTER BALKEN in /beratung/ #wie (13.08.2026, Karsten mit Screenshot:
   „weisse Kacheln kollidieren mit schwarzem Highlight-Balken — ich denke der Balken ist durch das
   Update viel zu gross geworden").
   ⚑ NICHT durch das Update entstanden — nachgewiesen: An `#wie` wurde in dieser Session nichts
   geändert; alle `.igrid`/`.ic`-Regeln dieser Datei sind auf `#kopf` und `#luecke` gescopt. Beide
   Effekte sind Bestand und fallen nur auf, weil unter der versetzten Reihe eine zweite Zeile steht.

   ZWEI URSACHEN, getrennt gemessen:
   ① Der „Balken" ist keine Sektion, sondern die FÜNFTE KACHEL desselben Rasters (.ic.acht.wide).
      Rasterzellen strecken sich (`align-items:stretch`), also wurde eine Zeile Text auf die Höhe
      der vier Inhaltskacheln gezogen: 243px. Ein vollbreites Band ist kein Kachel-Geschwister —
      es soll seine Inhaltshöhe behalten. Gemessen: 243 → 100px.
   ② Das Versatzmuster (components.css V19-2, `position:relative; top:0/22/8/28px`) verschiebt
      OPTISCH, reserviert aber keinen Layout-Platz. Bei 16px Zeilenabstand laufen die um 22 und
      28px versetzten Kacheln in die zweite Zeile. Gemessen: 6 und 12px Überlappung.
      46px = 16px Grundabstand + 28px grösster Versatz + 2px Reserve. Gemessen danach: 0.

   SITE-WEIT GEPRÜFT (8 Routen): sechs versetzte Raster, zwei mit zweiter Zeile — kollidiert nur
   dieses. `/digital/ #leistungen` (6 Kacheln, 3 Spalten) misst sauber, weil es für den 6er-Fall
   eine eigene Staffel gibt. Deshalb ist der Zeilenabstand bewusst auf #wie gescopt und nicht
   generisch: `/digital/` hat kein Problem und soll seine Abstände behalten. */
#wie .igrid.stag{row-gap:46px}
/* Vollbreite Bänder generell nicht auf Kachelhöhe strecken — betrifft heute genau ein Element
   site-weit, ist aber die richtige Regel für das Bauteil, nicht für die Fundstelle. */
.igrid .ic.wide{align-self:start}

/* Z · 🔴 KACHELBILD-ZUSCHNITTE — Migrationsverlust nachgezogen (14.08.2026, Karsten: „das Bild in
   der gelben und blauen Kachel sind verschoben — das Zentrum der Bilder ist nicht erkennbar").
   BEFUND, nicht Gestaltung: components.css trägt DREIZEHN getunte object-position-Regeln für
   .t1/.t2/.t3, alle am Selektor `body[data-route-index="-1"]` der alten Kachel-Architektur. Der
   Neubau stellte den Body auf `data-route="home"` um — mitportiert wurden nur VIER: die drei
   Mobil-Werte und EIN Desktop-Wert für t1, dazu ausgerechnet der ERSTE der Kaskade (26% 50%)
   statt des zuletzt gewinnenden. Für t2/t3 wurde auf Desktop nichts portiert → Standard 50% 50%.
   GEOMETRIE, gerechnet: Rahmen 463×739 (0,63) gegen Bild 2560×1440 (1,78). Bei object-fit:cover
   passt die HÖHE exakt, die Breite läuft über — sichtbar sind 463 von 1314px = 35 % der Bildbreite.
   Der vertikale Anteil der Position ist auf Desktop deshalb WIRKUNGSLOS; nur der horizontale zählt.
   MOTIVLAGE, an den Dateien selbst abgelesen:
     hero_beratung.jpg  Sieger mit erhobenen Armen bei 73 % der Bildbreite (Arme 61–85 %)
     hero_digital.jpg   E-Sportler + Monitor bei 71 % (Motiv 47–95 %, linke Hälfte ist schwarz)
   Der alte Standard 50 % zeigte damit 32–68 % — beim Digital-Bild fast nur die schwarze Fläche.
   Rechenweg für X: X = (skalierteBreite·Motivmitte − Rahmenbreite/2) / (skalierteBreite − Rahmenbreite)
   t1 86 % → sichtbar 55–91 % (beide erhobenen Fäuste drin) · t2 82 % → sichtbar 53–89 %.
   ⚑ 82 % ist KEIN neuer Wert: components.css:1395 trägt für .t2 bereits genau `82% 50%` — die
   Rechnung bestätigt den Original-Zuschnitt, sie erfindet ihn nicht.
   ⚠️ Nicht mit Augen geprüft (Browser-Pane ausgeblendet) — Zuschnitt ist gerechnet, nicht gesehen. */
body[data-route="home"] .t1 .fw .photo{object-position:86% 50%}
body[data-route="home"] .t2 .fw .photo{object-position:82% 50%}
body[data-route="home"] .t3 .fw .photo{object-position:50% 26%}

/* AA · ══ HOME-UNTERBAU · Fassung 16.08. (Karsten, 3. Korrektur) ═════════════════════════════
   „Erst gelb — das Agentenprinzip. Dann blau: Erfahrung und Netzwerk. Dann grün: Eigene Systeme
    (analog oben der Kachelreihenfolge)."
   ⚑ Am 14.08. hatte ich nur die FARBEN getauscht, nicht die REIHENFOLGE der Sektionen — deshalb
     stimmte die Zuordnung dreimal nicht. Die Sektionen stehen jetzt in route-home.html physisch
     in der Kachelfolge; hier stehen nur noch die Farben dazu.

   Reihenfolge ① Agentenprinzip GELB · ② Erfahrung BLAU · ③ Systeme GRÜN
   Flächen     ① DUNKEL · ② WEISS · ③ DUNKEL  → mit FAQ (weiss) und Kontakt (dunkel):
               dunkel · weiss · dunkel · weiss · dunkel — Regel 9 hält.

   Die Flächen folgen der Messung, nicht dem Geschmack: Gelb trägt auf Dunkel 13,94, auf Weiss nur
   1,51 · Grün 11,15 vs. 1,88 · Blau umgekehrt 7,45 auf Weiss, nur 2,82 auf Dunkel. Gelb und Grün
   müssen also auf Dunkel, Blau auf Weiss — und weil Blau in der Mitte steht, alterniert es von
   selbst. Die gewünschte Farbfolge und Regel 9 gehen hier ohne Kompromiss zusammen. */

/* ① Agentenprinzip — dunkel, gelb */
body[data-route="home"] #agentenprinzip .eyebrow.yl{color:var(--yellow)}
body[data-route="home"] #agentenprinzip .mark{background:var(--yellow);color:var(--ink)}
body[data-route="home"] #agentenprinzip .km-big{color:#fff}
body[data-route="home"] #agentenprinzip .kmsub b{color:var(--yellow)}

/* ② Jerry OS — weiss, blau (id 16.08. von #erfahrung umbenannt, Inhalts-Umbau) */
body[data-route="home"] #jerry-os .eyebrow.bl{color:var(--blue)}
body[data-route="home"] #jerry-os .mark{background:var(--blue);color:#fff}

/* ③ Eigene Systeme — dunkel, grün */
body[data-route="home"] #systeme .eyebrow.gr{color:var(--green)}
body[data-route="home"] #systeme .mark{background:var(--green);color:var(--ink)}
body[data-route="home"] #systeme .km-big{color:#fff}

/* Einheitliches Raster: eyebrow · h2 · KEY MESSAGE · 2 Bullets — in allen dreien.
   KEY MESSAGE GRÖSSER (Karsten 16.08.): Default ist clamp(1.6rem,2.6vw,2.25rem)
   → clamp(1.8rem,3vw,2.6rem). Und MITTIG: `.whead` zentriert zwar den Text, aber der Block lief
   über die volle Spaltenbreite — bei 1440px riss das die Zeilen unterschiedlich weit auseinander
   und der Absatz stand optisch nicht unter seiner Headline. Feste Maximalbreite + auto-Ränder. */
body[data-route="home"] #agentenprinzip .km-big,
body[data-route="home"] #jerry-os .km-big,
body[data-route="home"] #systeme .km-big{
  margin:26px auto 4px;max-width:23ch;
  font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.3;text-wrap:balance}
@media(min-width:900px){
  body[data-route="home"] #agentenprinzip .km-big,
  body[data-route="home"] #jerry-os .km-big,
  body[data-route="home"] #systeme .km-big{max-width:min(940px,88%)}}

/* Die Arbeitsprinzip-Zeile in ① — im selben Block wie das Zitat, aber als eigene Ebene lesbar.
   ⚑ SEIT 16.08. UNGENUTZT: Karsten hat die Zeile aus ① entfernt, weil sie der letzte Baustein war,
   den ② und ③ nicht hatten. Die Regeln bleiben stehen, damit die Zeile mit EINEM Edit im Markup
   zurückkommt — aber nur, wenn ② und ③ dann ebenfalls eine bekommen. */
body[data-route="home"] .kmsub{display:inline-block;margin-top:18px;
  font-size:.62em;line-height:1.4;color:#c9cdd1}

/* BULLETS GRÖSSER (Karsten: „wirken komplett verloren so").
   Default ist components.css:641 → .92rem/1.45. Hier auf 1,12rem hochgezogen, mit mehr Luft.
   Der Keil sass auf top:13px — ein fester Wert, der zur alten Zeilenhöhe gehörte. Auf die im
   Haus schon verwendete 1lh-Rechnung umgestellt, damit er bei JEDER Schriftgrösse mittig zur
   ersten Zeile sitzt statt nur zufällig bei 0,92rem. */
body[data-route="home"] .klist{gap:0;margin-top:20px}
body[data-route="home"] .klist span{font-size:1.12rem;line-height:1.5;padding:14px 0 14px 30px}
body[data-route="home"] .klist span::before{width:13px;height:13px;top:calc(14px + (1lh - 13px)/2)}
body[data-route="home"] .klist span a{font-size:.95em;white-space:nowrap}
@media(max-width:640px){body[data-route="home"] .klist span{font-size:1.02rem;padding-left:26px}}

/* Die Bullet-Liste steht linksbündig (Haus-Grammatik der .klist), der Kopf darüber zentriert.
   Damit sie trotzdem unter ihrer Headline sitzt statt an der Spaltenkante: gleiche Maximalbreite
   wie die Key Message, mittig gestellt. */
body[data-route="home"] .klist{max-width:min(940px,88%);margin-left:auto;margin-right:auto}

/* klist auf DUNKEL (① und ③): die Trennlinie von components.css:641 ist rgba(0,0,0,.12) — auf
   Schwarz unsichtbar. Text und Linie aufhellen; die Keile tragen die Rubrikfarbe (.y bzw. grün). */
body[data-route="home"] #agentenprinzip .klist span,
body[data-route="home"] #systeme .klist span{color:#e8eaec;border-bottom-color:rgba(255,255,255,.2)}
body[data-route="home"] #agentenprinzip .klist span b,
body[data-route="home"] #systeme .klist span b{color:#fff}
body[data-route="home"] #systeme .klist span a{color:var(--green)}
/* ② steht auf WEISS und hat seit dem Inhalts-Umbau 16.08. ebenfalls einen Link (→ /jerry-os/).
   Ohne eigene Regel erbt er die Default-Linkfarbe; Rubrikblau auf Weiss ist gemessen 7,45 und
   ist zugleich die Farbe der Sektion. Kein neuer Wert — var(--blue) wie Eyebrow und .mark. */
body[data-route="home"] #jerry-os .klist span a{color:var(--blue)}

/* AB · 🔴 HERO: VERLAUF STATT FLÄCHENABDUNKLUNG (14.08.2026, Karsten: „auf den jeweiligen
   Header-Abschnitten sind die Motive im Hintergrund kaum erkennbar").
   BEFUND: components.css:72 legt `filter:brightness(.42)` über das GANZE Hero-Bild — es ist also
   überall auf 42 % gedimmt, auch dort, wo gar keine Schrift steht. Der Grund war richtig (weisse
   H1 braucht Kontrast), das Mittel zu grob: Es kostet das Motiv, um Text an EINER Stelle lesbar
   zu machen.
   LÖSUNG: Das Bild wird deutlich heller (0,42 → 0,72), und die Abdunklung kommt als VERLAUF
   darüber — stark hinter dem Textblock in der Mitte, schwach an Ober- und Unterkante. Das Motiv
   bleibt in den Randzonen sichtbar, der Text behält seinen Grund.
   ⚑ Kein neuer Farbwert: der Verlauf ist reines Schwarz mit Deckungsstufen, wie die bestehende
   Abdunklung auch. ⚑ ::after statt eines neuen Elements — das Markup bleibt unangetastet.
   ⚑ z-index 1 liegt zwischen Bild (0) und .sheroin (2), die Reihenfolge stimmt ohne Eingriff.
   ⚠️ Nicht mit Augen geprüft (Browser-Pane ausgeblendet). Kontrast der H1 gegen den Verlauf ist
   gerechnet: in der Mitte bleibt die Abdunklung effektiv bei rund 0,40 — also mindestens so
   dunkel wie vorher dort, wo der Text steht. */
.shero>img{filter:brightness(.72)}
.shero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(0,0,0,.18) 0%,
    rgba(0,0,0,.34) 22%,
    rgba(0,0,0,.52) 45%,
    rgba(0,0,0,.52) 62%,
    rgba(0,0,0,.30) 84%,
    rgba(0,0,0,.16) 100%)}