/* kv-bausteine.css — gemeinsame Bausteine nach Systemblatt P67/P69 (.work/p67/systemblatt.md Abschn. 9).
   Aus index.html herausgelöst (P69 Schritt 1, 02.11.2026): Regeln wörtlich, Klassennamen der Startseite.
   Seitenspezifisches (Kopf, Wizard, Marke-Bühne, #faq, Datenschutz-Frage) bleibt eingebettet in der Seite.
   Andere Seiten binden diese Datei erst in ihrem Umbauschritt ein (P69 Schritte 2–7). */
/* ── Raster, Schrift, Kennzeile, Flächen, Schluss, FAQ (vorher index.html Zeile 87) ── */
:root{--section-px:var(--s-10);--section-py:var(--s-24);}
@media (min-width:1024px){:root{--section-py:var(--s-32)}}
@media (max-width:640px){:root{--section-py:var(--s-16);--section-px:var(--s-5);}}
#ambient{position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient( circle 600px at var(--mx,50%) var(--my,50%),rgba(61,139,122,0.08),transparent 55% )}
@media (hover:none),(prefers-reduced-motion:reduce){#ambient{display:none}}
.h-display{font-size:clamp(38px,3.9vw,56px);font-weight:var(--fw-medium);line-height:1.05;letter-spacing:var(--tr-tight);color:var(--ink);font-variation-settings:"opsz" 40}
.h-display>span{display:block;text-wrap:balance}
.h-display .it{color:inherit;font-style:normal;font-weight:inherit}
.h-display-sub{font-size:0.48em;font-weight:var(--fw-regular);color:var(--body);letter-spacing:var(--tr-tight);line-height:1.2;margin-top:var(--s-4)}
.h-display-sub em{font-style:italic;color:var(--teal);font-weight:var(--fw-medium)}
.h-section{font-size:clamp(30px,3.8vw,46px);font-weight:var(--fw-medium);line-height:var(--lh-snug);letter-spacing:var(--tr-snug);color:var(--ink);font-variation-settings:"opsz" 40}
.h-section .it{color:inherit;font-style:normal;font-weight:inherit}
.lead{font-size:var(--fs-xl);line-height:var(--lh-relaxed);color:var(--muted);font-weight:var(--fw-regular);max-width:56ch;text-wrap:pretty}
.lead strong{color:var(--ink);font-weight:var(--fw-semibold)}
.eyebrow{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--fs-sm);font-weight:var(--fw-semibold);letter-spacing:var(--tr-wider);text-transform:uppercase;color:var(--teal);white-space:nowrap}
.eyebrow::before{content:"— ";color:var(--teal)}
.section{padding:var(--section-py) var(--section-px);position:relative;overflow:hidden;background:transparent;z-index:2}
.section-in{max-width:var(--max-w);margin:0 auto;position:relative;z-index:1}
.section-hdr{max-width:62ch;margin-bottom:var(--s-12)}
.section-hdr>.eyebrow{margin-bottom:var(--s-5)}
.section-hdr>.h-section{margin-bottom:var(--s-4)}
.section--dark{background:var(--ink);color:var(--white);margin:0 var(--s-5);border-radius:var(--r-5);box-shadow:var(--sh-5)}
.section--dark .eyebrow{color:#71C3AA}
.section--dark .h-section .it{color:#71C3AA;font-style:italic}
.section--dark .h-section{color:var(--white)}
.section--dark .lead{color:rgba(255,255,255,.62)}
.section--dark .lead strong{color:var(--white)}
.section--dark::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 40% at 20% 0%,rgba(61,139,122,.08),transparent 70%),radial-gradient(ellipse 50% 50% at 90% 100%,rgba(46,64,87,.3),transparent 70%);pointer-events:none;z-index:0}
.section.flat::after{content:"";position:absolute;left:18%;right:18%;bottom:0;height:1px;background:linear-gradient(to right,transparent,rgba(28,43,58,.14),transparent);pointer-events:none}
.section.highlight{background:var(--white);border:1px solid var(--border);border-radius:var(--r-5);margin:var(--s-8) var(--s-5);box-shadow:0 22px 44px -18px rgba(28,43,58,.12)}
.section-in{z-index:2}
.final{padding:calc(var(--section-py) + var(--s-6)) var(--section-px);position:relative;overflow:hidden;text-align:center;z-index:2}
.final.section--dark{margin:0 var(--s-5) var(--s-5);border-radius:var(--r-5);box-shadow:var(--sh-5)}
.final.section--dark::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(61,139,122,.12),transparent 70%),radial-gradient(ellipse 50% 50% at 50% 100%,rgba(46,64,87,.35),transparent 70%);pointer-events:none;z-index:0}
.final-in{max-width:720px;margin:0 auto;position:relative;z-index:1}
.final-in>.eyebrow{margin-bottom:var(--s-5)}
.final-in>.h-display{margin-bottom:var(--s-5);font-size:clamp(42px,5.2vw,68px);font-weight:var(--fw-regular);color:var(--white)}
.final-nowrap{white-space:nowrap}
.final-in>.h-display .it{color:#71C3AA;font-style:italic}
.final-sub{font-size:var(--fs-xl);line-height:var(--lh-relaxed);color:rgba(255,255,255,.62);margin-bottom:var(--s-10)}
.final-sub strong{color:var(--white);font-weight:var(--fw-semibold)}
.bento{display:flex;flex-direction:column;max-width:760px;margin:0;border-top:1px solid var(--border)}   /* Lesespalte an Kante 1 (Systemblatt §9/§11, P69 02.11.) */
.bento-card{background:transparent;border:none;border-bottom:1px solid var(--border);border-radius:0;padding:0;transition:background 0.3s var(--ease-smooth);position:relative;overflow:hidden;display:block}
.bento-card:hover{background:rgba(61,139,122,0.025)}
.bento-card summary{cursor:pointer;padding:var(--s-5) var(--s-3);display:grid;grid-template-columns:130px 1fr auto;gap:var(--s-4);align-items:center;list-style:none;user-select:none}
.bento-card summary::-webkit-details-marker{display:none}
.bento-card summary::marker{content:""}
.bento-tag{display:inline-block;font-size:11px;font-weight:var(--fw-semibold);letter-spacing:var(--tr-wider);text-transform:uppercase;color:var(--teal);margin-bottom:0}
.bento-q{font-size:var(--fs-lg);font-weight:var(--fw-medium);letter-spacing:var(--tr-tight);color:var(--ink);line-height:1.35;margin:0}
.bento-chev{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;color:var(--muted);transition:transform 0.3s var(--ease-smooth),color 0.3s var(--ease-smooth)}
.bento-card[open] .bento-chev{transform:rotate(180deg);color:var(--teal)}
.bento-a{padding:0 var(--s-3) var(--s-5) calc(130px + var(--s-4) + var(--s-3));max-width:70ch;color:var(--body);line-height:var(--lh-relaxed);font-size:var(--fs-base);margin:0}
.bento-a em{font-style:normal;font-weight:var(--fw-semibold);color:var(--ink);background:linear-gradient(to bottom,transparent 60%,var(--teal-lt2) 60%);padding:0 2px}
.bento-foot{margin-top:var(--s-10);display:flex;align-items:center;justify-content:flex-start;gap:var(--s-3);font-size:var(--fs-md);color:var(--muted)}
@media (max-width:720px){.bento-card summary{gap:var(--s-3);padding:var(--s-4) var(--s-2);grid-template-columns:120px 1fr auto}.bento-tag{font-size:10px}.bento-q{font-size:var(--fs-md);line-height:1.3}.bento-a{padding:0 var(--s-2) var(--s-4) var(--s-2);font-size:var(--fs-sm)}.bento-card:hover{background:transparent}}
@media (max-width:1100px){.bento{grid-template-columns:repeat(2,1fr)}.bento-card,.bento-lg{grid-column:span 1}}
@media (max-width:640px){.eyebrow{white-space:normal}.bento{grid-template-columns:1fr;gap:var(--s-3)}.bento-q{font-size:var(--fs-lg)}.bento-lg .bento-q{font-size:var(--fs-xl)}.bento-foot{flex-direction:column;align-items:flex-start;gap:var(--s-2)}.section--dark{margin:0 var(--s-3);border-radius:var(--r-4)}.final::after{height:70px}.h-display{font-size:clamp(36px,8.5vw,52px) !important;line-height:1.06 !important}.h-display-sub{font-size:0.52em;margin-top:var(--s-3)}.bento-card summary{padding:var(--s-4) var(--s-3);gap:var(--s-2);grid-template-columns:104px 1fr auto}.bento-tag{font-size:10.5px;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;line-height:1.35}.bento-q{font-size:var(--fs-md);line-height:1.35}.bento-lg .bento-q{font-size:var(--fs-lg)}.bento-a{padding:var(--s-1) var(--s-3) var(--s-4) var(--s-3);font-size:var(--fs-sm);max-width:100%;line-height:1.6}.final.section--dark{padding:var(--s-16) var(--s-5)}.final-in>.h-display{font-size:clamp(34px,8vw,48px) !important}.final-sub{font-size:var(--fs-md);margin-bottom:var(--s-6)}.section-hdr .h-section{font-size:clamp(26px,6.5vw,36px) !important;line-height:1.15 !important}.section-hdr .lead{font-size:var(--fs-md)}}
@media (max-width:380px){.h-display{font-size:clamp(30px,9vw,44px) !important}.section-hdr .h-section{font-size:clamp(22px,6.5vw,30px) !important}.final-in>.h-display{font-size:clamp(28px,8.5vw,40px) !important}.bento-q{font-size:var(--fs-sm)}.bento-lg .bento-q{font-size:var(--fs-md)}.bento-a{font-size:12.5px}.bento-card summary{grid-template-columns:92px 1fr auto}.bento-tag{letter-spacing:.08em}}
@media (max-width:640px){.section.highlight{margin-left:var(--s-3);margin-right:var(--s-3);border-radius:var(--r-4)}}

/* ── Abschnittskopf, Artikel-Blatt, Register, Satzreihe (vorher index.html <style id="kv-start-sek">) ── */
.st-kopf{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s-6) var(--s-16);align-items:end;margin-bottom:var(--s-12)}
.st-kopf .eyebrow{margin-bottom:var(--s-4)}
.st-kopf .h-section{margin:0}
.st-lede{margin:0;font-size:var(--fs-xl);line-height:1.6;color:var(--muted);text-wrap:pretty;max-width:56ch}




/* Wissen: R1 „Aufmacher“ (Fabio 22.10., Mockup .work/mockups/startseite-wissen/r1-aufmacher.html) —
   Jetzt gefragt mit Bildern (Aufmacher + drei Zeilen, Raster 7 : 5), darunter die sechs Themen mit Bild.
   Ohne Karten-Kästen: Bilder tragen Radius + weichen Schatten, Trennung durch Haarlinien. */
.st-bild{position:relative;margin:0;overflow:hidden;border-radius:var(--r-3);background:#E6E5E0;isolation:isolate}
.st-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out)}
.st-bild--hell img{filter:brightness(1.14) saturate(1.04)}   /* Blog-Vorschaubilder sind abgedunkelt gespeichert */
.st-bild--ganz{background:#A8A8A8}                           /* Logo-Bild Markenvergleich: nicht beschneiden */
.st-bild--ganz img{object-fit:contain}
.st-tag{display:block;margin:0 0 6px;font-style:normal;font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:var(--tr-wider);text-transform:uppercase;color:var(--teal-d)}
.st-kopf-r{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-6)}
.st-blatt{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-12);align-items:start}
.st-auf{display:block;color:inherit;text-decoration:none}
.st-auf .st-bild{aspect-ratio:16/9;border-radius:var(--r-4);box-shadow:0 22px 44px -18px rgba(28,43,58,.16)}
.st-auf-txt{padding:var(--s-6) var(--s-2) 0 0}
.st-auf h3{margin:0;font-size:30px;font-weight:var(--fw-medium);line-height:1.18;letter-spacing:var(--tr-snug);color:var(--ink);text-wrap:balance;max-width:24em;transition:color var(--dur-base) var(--ease-smooth)}
.st-auf p{margin:var(--s-3) 0 0;font-size:var(--fs-xl);line-height:1.6;color:var(--muted);max-width:52ch;text-wrap:pretty}
.st-neben{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.st-neben li+li{border-top:1px solid var(--border)}
.st-neben li:first-child a{padding-top:0}
.st-neben a{display:grid;grid-template-columns:168px minmax(0,1fr);gap:var(--s-5);align-items:start;padding:var(--s-6) 0;color:inherit;text-decoration:none}
.st-neben .st-bild{aspect-ratio:4/3;box-shadow:0 14px 28px -16px rgba(28,43,58,.18)}
.st-neben b{display:block;font-size:var(--fs-2xl);font-weight:var(--fw-semibold);line-height:1.3;letter-spacing:var(--tr-base);color:var(--ink);text-wrap:pretty;transition:color var(--dur-base) var(--ease-smooth)}
.st-neben span{display:block;margin-top:6px;font-size:var(--fs-lg);line-height:1.55;color:var(--muted);text-wrap:pretty}
@media (hover:hover){.st-auf:hover h3,.st-neben a:hover b{color:var(--teal-d)}}
.st-reg-k{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-4);margin:var(--s-16) 0 var(--s-4)}
.st-reg-k h3{margin:0;font-size:var(--fs-sm);font-weight:var(--fw-semibold);letter-spacing:var(--tr-wider);text-transform:uppercase;color:var(--muted)}
.st-reg{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--ink)}
.st-reg li{border-bottom:1px solid var(--border)}
.st-reg li:nth-child(3n+2),.st-reg li:nth-child(3n+3){border-left:1px solid var(--border)}
.st-reg a{display:grid;grid-template-columns:76px minmax(0,1fr);gap:var(--s-5);align-items:center;height:100%;box-sizing:border-box;padding:var(--s-5) var(--s-6);color:inherit;text-decoration:none;transition:background var(--dur-base) var(--ease-smooth)}
.st-reg a:hover{background:var(--white)}
.st-reg .st-bild{width:76px;height:76px;border-radius:var(--r-3)}
.st-reg b{display:block;font-size:24px;font-weight:var(--fw-medium);letter-spacing:var(--tr-tight);line-height:1.2;color:var(--ink)}
.st-reg span{display:block;margin-top:4px;font-size:var(--fs-lg);color:var(--muted)}
@media(max-width:1100px){
 .st-neben a{grid-template-columns:128px minmax(0,1fr);gap:var(--s-4)}
 .st-neben span{display:none}
}
@media (prefers-reduced-motion:reduce){.st-bild img{transition:none}}
.mk-satz{padding:var(--s-8) 0;border-top:1px solid var(--border);transition:border-color .4s}
.mk-satz:first-child{padding-top:var(--s-6)}
.mk-satz p{margin:0 0 var(--s-3);max-width:44ch;font-size:clamp(17px,1.35vw,19px);line-height:1.55;color:var(--muted);text-wrap:pretty}
.mk-satz p strong{display:block;margin:0 0 var(--s-3);font-size:clamp(28px,2.8vw,40px);line-height:1.08;letter-spacing:var(--tr-snug);
 font-weight:var(--fw-semibold);color:var(--muted);transition:color .4s}
@media(max-width:900px){
 .mk-satz{padding:var(--s-6) 0}
 .mk-satz:first-child{padding-top:var(--s-4)}
 .mk-satz p{font-size:16.5px}
 .mk-satz p strong{font-size:28px}
 .st-kopf,.st-blatt{grid-template-columns:1fr}
 .st-kopf{gap:var(--s-4);margin-bottom:var(--s-8)}
 .st-blatt{gap:var(--s-8)}
 .st-neben li:first-child{border-top:1px solid var(--border)}
 .st-neben li:first-child a{padding-top:var(--s-5)}
 .st-reg{grid-template-columns:repeat(2,minmax(0,1fr))}
 .st-reg li:nth-child(3n+2),.st-reg li:nth-child(3n+3){border-left:0}
 .st-reg li:nth-child(2n){border-left:1px solid var(--border)}
}
@media(max-width:640px){
 .st-auf-txt{padding-top:var(--s-4)}
 .st-auf .st-bild{border-radius:var(--r-3);aspect-ratio:2/1}
 .st-auf h3{font-size:22px;line-height:1.25}
 .st-auf p{display:none}                     /* Handy: Titel reicht, Abschnitt bleibt kurz */
 .st-blatt{gap:var(--s-5)}
 .st-neben a{grid-template-columns:96px minmax(0,1fr);gap:var(--s-4);padding:var(--s-4) 0;align-items:center}
 .st-neben li:first-child a{padding-top:var(--s-4)}
 .st-neben .st-bild{border-radius:var(--r-2)}
 .st-neben b{font-size:var(--fs-lg);line-height:1.35}
 .st-reg-k{margin:var(--s-10) 0 var(--s-3)}
 /* Register: zwei Spalten, Bild klein neben dem Titel — sechs Themen auf drei Zeilen */
 .st-reg a{grid-template-columns:44px minmax(0,1fr);gap:var(--s-3);padding:var(--s-3) var(--s-3) var(--s-3) 0}
 .st-reg li:nth-child(2n) a{padding-left:var(--s-3)}
 .st-reg .st-bild{width:44px;height:44px;border-radius:var(--r-2)}
 .st-reg b{font-size:var(--fs-lg);font-weight:var(--fw-semibold);letter-spacing:var(--tr-base);line-height:1.25}
 .st-reg span{display:none}
}

/* ── Kompositionen A–H (design.md 12 + 13, freigegeben Fabio 04.11.; Katalog .work/mockups/kompositionen/) ──
   Abschnitt: <section class="section ko ko-x"> (Tafel zusätzlich .highlight). Raster .ko-raster = 12 Sp., Abstand 24.
   Kopf .st-kopf auf Raster 5 : 6. Effekte: A über js/kv-satzleiter.js (.ko-a-blatt), C/D über js/kv-kompositionen.js.
   Nur verwenden, nie je Seite nachbauen; seitenbezogen sind nur Inhalte und die Skala-Lage in C (Variablen unten). */
.ko-raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.ko .st-kopf{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.ko .st-kopf>div:first-child{grid-column:1/span 5}
.ko .st-kopf>.st-lede{grid-column:7/span 6}
.ko .st-kopf--breit>div:first-child{grid-column:1/span 8}
.ko p{margin:0}
.ko .rh-legende{max-width:75ch}

/* A Bühne: Objekt 5 Sp. klebt und schwebt dezent (Werte wie Startseite #marke mkSchweben, design.md 13 Ausnahme Fabio 04.11.),
   Sätze .mk-satz 6 Sp. Hover pausiert, reduced-motion steht. */
.ko-a.section{overflow:clip}
.ko-a-blatt{align-items:start}
.ko-a-buehne{grid-column:1/span 5;position:sticky;top:max(calc(var(--nav-h) + var(--s-6)),calc(50vh - 300px));
 display:flex;justify-content:center;padding:var(--s-4) 0 var(--s-12)}
.ko-a-buehne img{width:100%;max-width:480px;height:auto;transform:rotate(-2deg);animation:koSchweben 7s ease-in-out infinite;will-change:transform}
@keyframes koSchweben{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-18px) rotate(-.8deg)}}
@media (hover:hover){.ko-a-buehne:hover img{animation-play-state:paused}}
.ko-a .mk-stufen{grid-column:7/span 6}
.ko-a .mk-satz:first-child{padding-top:var(--s-8)}
.ko-a .mk-satz p{max-width:52ch}
.ko-a .mk-satz p a{color:var(--teal-d);font-weight:var(--fw-semibold)}
.ko-a .mk-satz p strong,.ko-a .mk-stufen:not(.hat-fokus) .mk-satz p strong{color:var(--ink)}
.ko-a .mk-stufen.hat-fokus .mk-satz:not(.ist-an) p strong{color:var(--muted)}
.ko-a .mk-satz{transition:border-color .4s,box-shadow .4s}
.ko-a .mk-satz.ist-an{border-top-color:var(--ink);box-shadow:inset 0 1px 0 var(--ink)}
/* A mit Bildwechsel (Fabio 06.11.): je Satz ein Objekt (img[data-satz] in Satz-Reihenfolge), übereinander gestapelt;
   das Objekt des leuchtenden Satzes blendet in .6 s ein (js/kv-satzleiter.js). Ohne JS/reduzierte Bewegung: das erste. */
.ko-a-buehne.ko-a-wechsel{display:grid;grid-template-columns:minmax(0,1fr);place-items:center}   /* volle Spur: %-Breiten der Bilder wie ohne Stapel */
.ko-a-wechsel>img{grid-area:1/1;opacity:0;transition:opacity .6s var(--ease-smooth)}
.ko-a-wechsel>img.ist-an{opacity:1}

/* B Objekt-Seite: Text 7 Sp. · Render 5 Sp. bündig unten */
.ko-b-blatt{align-items:end}
.ko-b-text{grid-column:1/span 7}
.ko-b-text .eyebrow{margin-bottom:var(--s-4)}
.ko-b-text .h-section{margin:0 0 var(--s-5)}
.ko-b-text .st-lede{margin-bottom:var(--s-8)}
.ko-b-abs{max-width:58ch;font-size:18px;line-height:1.6;color:var(--body)}
.ko-b-abs+.ko-b-abs{margin-top:var(--s-4)}
.ko-b-text .rh-l{display:inline-block;margin-top:var(--s-6)}
.ko-b-bild{grid-column:8/span 5;margin:0}
.ko-b-bild img{width:100%;height:auto}

/* C Breitbild: Objekt 12 Sp., Linien/Werte je --y (Prozent der Feldhöhe), Messmarke wandert scrollgebunden (Stufe 2,
   transform setzt js/kv-kompositionen.js).
   Lage des Renders je Seite: --ko-c-strich (Strichbeginn ab Bildmitte, × Höhe), --ko-c-start (Weg der Marke, × Höhe),
   Handy --ko-c-links / --ko-c-marke / --ko-c-wert. Vorgaben = AStV-Skala (out/3d/p69-objekt/astv_skala_abbildung.json). */
.ko-c-feld{--h:600px;--ko-c-strich:.0377;--ko-c-start:.32843;--ko-c-links:-.3252;--ko-c-marke:.1356;--ko-c-wert:.2;position:relative;height:var(--h)}
.ko-c-skala{position:absolute;top:0;left:50%;z-index:1;height:100%;width:auto;max-width:none;transform:translateX(-50%)}
.ko-c-linie{position:absolute;left:0;right:0;top:var(--y);height:0;border-top:1px solid var(--ink)}
.ko-c-wert{position:absolute;left:0;top:var(--y);z-index:2;margin:0;padding-top:var(--s-2);display:flex;align-items:baseline;gap:var(--s-3);white-space:nowrap}
.ko-c-wert b{font-size:var(--fs-4xl);font-weight:var(--fw-medium);letter-spacing:var(--tr-snug);line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}
.ko-c-wert span{font-size:var(--fs-lg);color:var(--muted)}
.ko-c-wert--ihr{left:auto;right:0;padding-top:0;transform:translateY(calc(-100% - var(--s-2)))}
.ko-c-wert--ihr b{color:var(--teal-d)}
.ko-c-marke{position:absolute;left:calc(50% + var(--h) * var(--ko-c-strich));right:0;top:var(--y);z-index:2;height:3px;margin-top:-1px;background:var(--teal)}
.ko-c-spalten{margin-top:var(--s-12)}
.ko-c-spalte{grid-column:span 4}
.ko-c-spalte b{display:block;font-size:var(--fs-2xl);font-weight:var(--fw-semibold);line-height:1.35;color:var(--ink)}
.ko-c-spalte p{margin-top:var(--s-2);font-size:17px;line-height:1.55;color:var(--muted);max-width:40ch}
.ko-c .rh-legende{margin-top:var(--s-8)}
/* C mit breitem Querbild (.ko-c--quer, Hülle .ko-c-quer um .ko-c-feld; Muster gewerbe-entscheidungsvorlage #inhalt, P69 05.11.):
   --ko-c-ar = Höhe/Breite des Renders. Feldhöhe so, dass das Bild nie breiter als die Spalte wird. Unter 1200 px füllt das Bild
   die Spalte → Namen an den Marken (.ko-lang) aus, die Spalten darunter tragen sie. Handy: Bild in Lesegröße, quer scrollbar
   (design.md 12 C), Skala an Kante 1; --ko-c-marke setzt die Seite. */
.ko-c--quer .ko-c-feld{--ko-c-ar:.5833;--h:min(600px,calc((100vw - 120px) * var(--ko-c-ar)))}
@media (max-width:1199px){.ko-c--quer .ko-c-wert .ko-lang{display:none}}

/* D Zahlen-Bühne: Zahl 7 Sp. · Einordnung 4 Sp. (Spalte 9–12); Zahl zählt über data-ko-zahl */
.ko-d-blatt{align-items:end}
.ko-d-zahl{grid-column:1/span 7}
.ko-d-k{font-size:var(--fs-sm);font-weight:var(--fw-semibold);letter-spacing:var(--tr-wider);text-transform:uppercase;color:var(--muted)}
.ko-d-n{display:block;margin-top:var(--s-4);font-size:clamp(72px,9.2vw,132px);font-weight:var(--fw-medium);line-height:.95;
 letter-spacing:var(--tr-tight);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.ko-d-ust{display:block;margin-top:var(--s-4);font-size:var(--fs-2xl);color:var(--muted)}
.ko-d-satz{grid-column:9/span 4}
.ko-d-satz>p:first-child{font-size:var(--fs-2xl);line-height:1.45;color:var(--ink);text-wrap:pretty}
.ko-d-q{margin-top:var(--s-6)!important;font-size:var(--fs-lg);line-height:1.6;color:var(--muted)}
.ko-d-q a{color:var(--teal-d);font-weight:var(--fw-semibold)}

/* E Tabelle mit Haltung: .kb-tw 8 Sp. · Kernaussage S3 (20 px) 4 Sp. */
.ko-e-blatt{align-items:start}
.ko-e-tab{grid-column:1/span 8}
.ko-e-kern{grid-column:9/span 4;padding-top:var(--s-8)}
.ko-e-kern p:first-child{font-size:var(--fs-2xl);font-weight:var(--fw-medium);line-height:1.45;color:var(--ink);text-wrap:pretty}
.ko-e-kern p+p{margin-top:var(--s-4);font-size:var(--fs-lg);line-height:1.6;color:var(--muted)}
.ko-e .rh-legende{margin-top:var(--s-5)}

/* F Raster = Richtung B „Tafel-Felder“ (Fabio 04.11., f-neu/b.html): .st-reg 3 × n ohne Haarlinien-Gitter und Ink-Oberkante,
   je Feld weiße Tafel Radius 24 + Tafel-Schatten, freigestelltes Render ragt 48 px über die Oberkante, darunter Titel + eine Zeile.
   Handy F2: je Zeile eine Tafel Radius 20, Render 112 × 84 links (unter 375 px 88 × 66), kein Wischen. */
.ko-f .st-reg{border-top:0;column-gap:var(--s-6);row-gap:calc(var(--s-12) * 2);padding-top:var(--s-12)}
.ko-f .st-reg li,.ko-f .st-reg li:nth-child(n){background:var(--white);border:1px solid var(--border);border-radius:var(--r-5);
 box-shadow:0 22px 44px -18px rgba(28,43,58,.12);transition:box-shadow var(--dur-base) var(--ease-smooth)}
.ko-f .st-reg a,.ko-f .st-reg li:nth-child(n) a{display:flex;flex-direction:column;align-items:stretch;gap:0;height:auto;
 padding:0 var(--s-8) var(--s-8);border-radius:var(--r-5);background:none}
.ko-f .st-reg a:hover{background:none}
.ko-f .st-reg .st-bild{width:100%;height:280px;margin:calc(var(--s-12) * -1) 0 var(--s-5);background:none;border-radius:0;overflow:visible}
.ko-f .st-reg .st-bild img{object-fit:contain;object-position:50% 100%;transition:transform var(--dur-slow) var(--ease-out)}
.ko-f .st-reg b{font-size:var(--fs-3xl);font-weight:var(--fw-medium);letter-spacing:var(--tr-snug);line-height:1.2;color:var(--ink);
 transition:color var(--dur-base) var(--ease-smooth)}
.ko-f .st-reg span{margin-top:var(--s-2);font-size:var(--fs-xl);line-height:1.55;color:var(--muted);max-width:36ch;text-wrap:pretty}
.ko-f .st-reg a:focus-visible{outline:2px solid var(--teal);outline-offset:6px}
@media (hover:hover){
 .ko-f .st-reg li:hover{box-shadow:0 30px 60px -22px rgba(28,43,58,.2)}
 .ko-f .st-reg a:hover b{color:var(--teal-d)}
 .ko-f .st-reg a:hover .st-bild img{transform:translateY(-6px)}
}
@media (prefers-reduced-motion:reduce){.ko-f .st-reg li,.ko-f .st-reg .st-bild img{transition:none}}

/* G Gegenüberstellung: zwei Hälften je 6 Sp., Haarlinie in der Spaltenfuge */
.ko-g-h{position:relative;grid-column:span 6}
.ko-g-h+.ko-g-h::before{content:"";position:absolute;left:-12px;top:0;bottom:0;border-left:1px solid var(--border)}
.ko-g-h+.ko-g-h{padding-left:var(--s-10)}
.ko-g-h:first-child{padding-right:var(--s-10)}
.ko-g-h h3{margin:0;font-size:var(--fs-4xl);font-weight:var(--fw-medium);letter-spacing:var(--tr-snug);line-height:1.15;color:var(--ink)}
.ko-g-bild{height:320px;margin:var(--s-6) 0 var(--s-8);display:flex;align-items:flex-end;justify-content:center}
.ko-g-bild img{width:auto;max-width:100%;height:var(--ko-g-h,240px)}
.ko-g-m{margin:0;display:grid;gap:var(--s-4)}
.ko-g-m dt{font-size:var(--fs-sm);font-weight:var(--fw-semibold);letter-spacing:var(--tr-wider);text-transform:uppercase;color:var(--muted)}
.ko-g-m dd{margin:var(--s-1) 0 0;font-size:18px;line-height:1.55;color:var(--body);max-width:46ch}
.ko-g-fuss{margin-top:var(--s-12)!important;font-size:var(--fs-lg);line-height:1.6;color:var(--muted);max-width:75ch}

/* H Kernsatz: ein Satz S1 auf 9 Sp. */
.ko-h .eyebrow{grid-column:1/span 9;margin-bottom:var(--s-6)}
.ko-h-satz{grid-column:1/span 9;margin:0;font-size:56px;font-weight:var(--fw-medium);line-height:1.08;letter-spacing:var(--tr-tight);
 color:var(--ink);text-wrap:balance}
.ko-h-q{grid-column:1/span 9;margin-top:var(--s-6)!important;font-size:var(--fs-lg);line-height:1.6;color:var(--muted)}
.ko-h-q a{color:var(--teal-d);font-weight:var(--fw-semibold)}

/* Leben (Fabio 06.11., design.md 3): freigestellte Objekte in B und G schweben dezent (über `translate`, damit `transform`
   frei bleibt; G-Hälften gegenläufig), Bilder reagieren auf die Maus: Objekte heben sich leicht, Fotos zoomen 4 %. */
.ko-b-bild,.ko-g-bild img{animation:kvSchweben 8s ease-in-out infinite}
.ko-g-h+.ko-g-h .ko-g-bild img{animation-delay:-4s}
@keyframes kvSchweben{0%,100%{translate:0 0}50%{translate:0 -10px}}
@media (hover:hover){
 .ko-b-bild,.ko-g-bild img,.ko-a-buehne,.ph-c-bild img{transition:scale .7s var(--ease-out)}
 .ko-b-bild:hover,.ko-g-h:hover .ko-g-bild img,.ko-a-buehne:hover,.ph-c-bild:hover img{scale:1.03}
 .st-bild:hover img{transform:scale(1.04)}
}
@media (prefers-reduced-motion:reduce){
 .ko-b-bild,.ko-g-bild img{animation:none}
 .ko-b-bild,.ko-g-bild img,.ko-a-buehne,.ph-c-bild img{transition:none}
}
@media (prefers-reduced-motion:reduce){
 .ko-a .mk-satz{transition:none}
 .ko-a-buehne img{animation:none}
 .ko-c-feld .ko-c-marke{transform:none!important}
}
@media (max-width:1100px){
 .ko .st-kopf>div:first-child{grid-column:1/span 6}
 .ko .st-kopf>.st-lede{grid-column:7/span 6}
 .ko-e-tab{grid-column:1/-1}
 .ko-e-kern{grid-column:1/span 8;order:-1;padding:0 0 var(--s-8)}
 .ko-h-satz,.ko-h-q,.ko-h .eyebrow{grid-column:1/-1}
}
@media (max-width:900px){
 .ko .st-kopf>div:first-child,.ko .st-kopf>.st-lede{grid-column:1/-1}
 .ko-a-buehne{grid-column:1/-1;top:var(--nav-h);z-index:4;padding:var(--s-4) 0 var(--s-10);margin:0 calc(var(--section-px) * -1);
  background:linear-gradient(to bottom,var(--white) 0,var(--white) 78%,rgba(255,255,255,0) 100%);transition:top 280ms var(--ease-smooth)}
 .flat .ko-a-buehne{background:linear-gradient(to bottom,var(--bg) 0,var(--bg) 78%,rgba(245,245,243,0) 100%)}   /* auf Grund G kein weißes Band */
 body:has(.nav--hidden) .ko-a-buehne{top:0}
 .ko-a-buehne img{width:min(44%,190px)}
 .ko-a .mk-stufen{grid-column:1/-1}
 .ko-b-text{grid-column:1/-1}
 .ko-b-bild{grid-column:1/-1;order:-1;justify-self:center;width:min(72%,320px);margin-bottom:var(--s-8)}
 .ko-d-zahl{grid-column:1/-1}
 .ko-d-satz{grid-column:1/span 10;margin-top:var(--s-8)}
 .ko-c-spalte{grid-column:1/-1}
 .ko-c-spalte+.ko-c-spalte{margin-top:var(--s-6)}
 .ko-f .st-reg{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ko-f .st-reg .st-bild{height:220px}
 .ko-g-h{grid-column:1/-1}
 .ko-g-h:first-child{padding-right:0}
 .ko-g-h+.ko-g-h{padding-left:0;margin-top:var(--s-10);padding-top:var(--s-10)}
 .ko-g-h+.ko-g-h::before{left:0;right:0;bottom:auto;border-left:0;border-top:1px solid var(--border)}
}
@media (max-width:640px){
 .ko .st-kopf .h-section{font-size:clamp(28px,7.6vw,34px);line-height:1.12}
 .ko .st-lede{font-size:var(--fs-lg)}
 .ko-b-abs{font-size:17px}
 /* C hochkant: Skala links an Kante 1, Werte rechts daneben */
 .ko-c-feld{--h:440px}
 .ko-c-skala{left:calc(var(--h) * var(--ko-c-links));transform:none}
 .ko-c-marke{left:calc(var(--h) * var(--ko-c-marke))}
 .ko-c-wert{left:calc(var(--h) * var(--ko-c-wert) + 16px);gap:var(--s-2)}
 .ko-c-wert--ihr{left:auto;right:0}
 .ko-c-wert b{font-size:var(--fs-3xl)}
 .ko-c-wert span{font-size:var(--fs-md)}
 .ko-c-wert .ko-lang{display:none}
 .ko-c--quer .ko-c-quer{overflow-x:auto;overflow-y:hidden;margin:0 calc(var(--section-px) * -1);padding:0 var(--section-px);
  scrollbar-width:thin;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
 .ko-c--quer .ko-c-feld{--h:300px;--ko-c-links:0;width:calc(var(--h) / var(--ko-c-ar))}
 .ko-d-k{font-size:var(--fs-xs)}
 .ko-d-n{font-size:clamp(64px,18vw,84px)}
 .ko-d-ust{font-size:var(--fs-xl)}
 .ko-d-satz{grid-column:1/-1}
 .ko-d-satz>p:first-child{font-size:var(--fs-xl)}
 .ko-e-kern{grid-column:1/-1}
 /* F Handy (F2): je Zeile eine Tafel Radius 20 — Render links 112 × 84 (unter 375 px 88 × 66), Titel + Zeile rechts, kein Wischen */
 .ko-f .st-reg{display:block;padding-top:0}
 .ko-f .st-reg li,.ko-f .st-reg li:nth-child(n){border-radius:var(--r-4);box-shadow:0 14px 28px -18px rgba(28,43,58,.16)}
 .ko-f .st-reg li+li{margin-top:var(--s-3)}
 .ko-f .st-reg a,.ko-f .st-reg li:nth-child(n) a{display:grid;grid-template-columns:112px minmax(0,1fr);gap:var(--s-4);align-items:center;
  padding:var(--s-3) var(--s-4) var(--s-3) var(--s-3);border-radius:var(--r-4)}
 .ko-f .st-reg .st-bild{width:112px;height:84px;margin:0}
 .ko-f .st-reg .st-bild img{object-position:50% 50%}
 .ko-f .st-reg a:hover .st-bild img{transform:none}
 .ko-f .st-reg b{font-size:var(--fs-2xl);font-weight:var(--fw-semibold);letter-spacing:var(--tr-base);line-height:1.3}
 .ko-f .st-reg span{display:block;margin-top:var(--s-1);font-size:var(--fs-lg);line-height:1.5}
 .ko-g-h h3{font-size:var(--fs-3xl)}
 .ko-g-bild{height:220px;margin:var(--s-5) 0 var(--s-6)}
 .ko-g-bild img{height:calc(var(--ko-g-h,240px) * .68)}
 .ko-g-m dd{font-size:17px}
 .ko-h-satz{font-size:34px;line-height:1.12}
}
@media (max-width:374px){
 .ko-f .st-reg a,.ko-f .st-reg li:nth-child(n) a{grid-template-columns:88px minmax(0,1fr)}
 .ko-f .st-reg .st-bild{width:88px;height:66px}
}