/* Caronic – Website. Farbquelle: docs/marke/caronic/logo-final/README.md. Eigener Code, lokal. */

@font-face{
  font-family:'Plus Jakarta Sans';font-style:normal;font-weight:300 800;font-display:swap;
  src:url('../fonts/PlusJakartaSans-Variable.woff2') format('woff2');
}

:root{
  --c-navy:#11142A;
  --c-orange:#E9661F;          /* Logo-Punkt: Flächen, Grafik, Text ≥ 24 px */
  --c-orange-ink:#B35222;      /* Vera ✓, logo-final/README.md: kleine Schrift/Icons auf Weiß, 5,06:1 */
  --c-orange-tint:#FCEDE4;     /* Vera ✓, logo-final/README.md: Icon-Felder, Marke „Neu“ */
  --c-white:#FFFFFF;
  --c-text-2:#55586C;
  --c-line-strong:#8A8DA0;
  --c-line:#C9CBD6;
  --c-divider:#DFE0E7;
  --c-surface:#F4F4F6;
  --c-on-navy-2:#C9CBD6;

  /* Zeilenhöhen als rem auf ganze Pixel (Vera: gebrochene Zeilen verschoben das Footer-Logo auf Subpixel) */
  --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --t-display:700 3.625rem/4rem var(--font);              /* Startseite und schlichte Heros (58/64) */
  --t-display-unter:700 2.75rem/3.25rem var(--font);       /* Einzelgeschichten und Produktseiten (44/52) */
  --t-display-recht:700 2.5rem/3rem var(--font);           /* Rechtsseiten (40/48) */
  --t-h2:600 2.25rem/2.5625rem var(--font);
  --t-h3-l:700 1.5rem/2rem var(--font);
  --t-h3:600 1.125rem/1.75rem var(--font);
  --t-lead:400 1.125rem/1.8125rem var(--font);
  --t-body:400 1rem/1.625rem var(--font);
  --t-small:400 .875rem/1.4375rem var(--font);
  --t-ui:500 .875rem/1.25rem var(--font);
  --t-nav:500 .9375rem/1.3125rem var(--font);
  --t-caption:400 .75rem/1rem var(--font);
  --ls-tight:-0.02em;

  --container:1300px; --gutter:40px;
  --measure-h2:900px; --measure-lead:768px; --measure-hero:672px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px;
  --s-10:40px; --s-12:48px; --s-14:56px; --s-16:64px; --s-20:80px; --s-24:96px; --s-28:112px;
  --section-y:var(--s-28);
  --nav-h:80px;                /* Schutzraum Logo 0,5 × H = 20 px oben und unten (docs/marke/caronic/logo/konstruktion.md, Abschnitt Schutzraum) */
  --hero-top:88px;             /* Navigation → H1: H1 bleibt bei y 168 wie mit 64 + 104 */

  --r-xs:10px; --r-sm:14px; --r-md:16px; --r-lg:24px; --r-xl:28px; --r-pill:999px;
  --sh-device:0 22px 70px rgba(17,20,42,.14);
  --border:1px solid var(--c-divider);
  --btn-h:40px; --btn-px:18px;
  --focus:0 0 0 2px var(--c-white), 0 0 0 4px var(--c-navy);
  --focus-dark:0 0 0 2px var(--c-navy), 0 0 0 4px var(--c-orange);
}

@media (max-width:767px){
  :root{
    --gutter:20px;
    --t-display:700 2.125rem/2.375rem var(--font);   /* Obergrenze 34/38; Startseiten-H1 nutzt min(2.125rem,(100vw - 40px)/10.9), Zeilenhöhe gerundet (Z. ~618) – 390 px: 32,11/36 */
    --t-h2:600 1.5rem/1.8125rem var(--font);
    --section-y:var(--s-20);
    --hero-top:32px;           /* H1 bleibt bei y 112 wie mit 64 + 48 */
    --btn-h:44px;
  }
}

/* ---------- Verlaufssystem „Glut“, Variante B (Lena, Inhaber-Entscheidung 18.10.2026; Regel: logo-final/README.md) ----------
   Schrift auf allen Verläufen Navy; Weiß kommt auf diesen Flächen nicht vor. Interpolation in oklab. */
:root{
  /* Stützfarben – nur in Verläufen, nie als Vollfläche, nie als Schrift */
  --c-glut-gold:#F5A54A;       /* Amber/Gelborange: Navy 8,95 : 1 */
  --c-glut-hellorange:#F28C38; /* Navy 7,42 : 1 */
  --c-glut-koralle:#EE6A4F;    /* Navy 5,88 : 1 */
  --c-glut-rose:#F2846F;       /* Koralle mit Hauch Rosé, nur als Licht: Navy 7,18 : 1 */
  --c-glut-schein:#F9B36A;     /* helles Amber, nur als Licht: Navy 10,1 : 1 */
  --c-glut-pfirsich:#FDE6D4;   /* Navy 15 : 1 */
  --c-glut-apricot:#F8B887;    /* Navy 10 : 1 */

  /* Grund */
  --g-grund-leucht:linear-gradient(in oklab 150deg, var(--c-glut-gold) 0%, var(--c-glut-hellorange) 45%, var(--c-orange) 100%);
  --g-grund-leucht-2:linear-gradient(in oklab 210deg, var(--c-glut-hellorange) 0%, var(--c-orange) 55%, var(--c-glut-koralle) 100%);
  --g-grund-hell:linear-gradient(in oklab 150deg, var(--c-glut-pfirsich) 0%, var(--c-glut-apricot) 100%);
  --g-grund-hell-2:linear-gradient(in oklab 210deg, var(--c-glut-apricot) 0%, var(--c-glut-pfirsich) 75%, var(--c-orange-tint) 100%);

  /* Licht (sitzt am Gerät) */
  --g-licht-rose:radial-gradient(closest-side in oklab, var(--c-glut-rose) 0%, var(--c-glut-koralle) 40%, rgb(238 106 79 / .5) 65%, rgb(238 106 79 / 0) 100%);
  --g-licht-schein:radial-gradient(closest-side in oklab, var(--c-glut-schein) 0%, var(--c-glut-schein) 35%, rgb(249 179 106 / .5) 65%, rgb(249 179 106 / 0) 100%);
  --g-licht-orange:radial-gradient(closest-side in oklab, var(--c-orange) 0%, var(--c-glut-hellorange) 35%, rgb(245 165 74 / .6) 65%, rgb(245 165 74 / 0) 100%);
  --g-licht-koralle:radial-gradient(closest-side in oklab, var(--c-glut-koralle) 0%, var(--c-glut-rose) 38%, rgb(242 132 111 / .6) 58%, rgb(242 132 111 / 0) 100%);

  /* Die vier Varianten (Licht + Grund) */
  --g-leucht:var(--g-licht-rose),var(--g-grund-leucht);            /* 1 · Leuchtend: Amber → Orange, Licht Rosé-Koralle – Kachel 1, Demo-CTA */
  --g-leucht-koralle:var(--g-licht-schein),var(--g-grund-leucht-2); /* 2 · Leuchtend Koralle: Orange → Koralle, Licht Amber – Kachel 4 */
  --g-amber:var(--g-licht-orange),var(--g-grund-hell);              /* 3 · Amber (hell) – Kachel 2 */
  --g-pfirsich:var(--g-licht-koralle),var(--g-grund-hell-2);        /* 4 · Pfirsich (hell) – Kachel 3 */

  /* Körnung: neutral grau, soft-light; Kontrast inkl. Körnung gemessen */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0' intercept='.22'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font:var(--t-body);color:var(--c-navy);background:var(--c-white);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus{outline:none}
:focus-visible{box-shadow:var(--focus);border-radius:6px;outline:2px solid transparent;outline-offset:2px}
[hidden]{display:none !important}
main:focus{box-shadow:none}
section[id],article[id],li[id]{scroll-margin-top:calc(var(--nav-h) + 24px)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.i{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}   /* non-scaling-stroke im Sprite: sichtbar 1,5 px */
.i-20{width:20px;height:20px}
.nowrap{white-space:nowrap}

.wrap{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:var(--s-4);top:-100px;z-index:100;background:var(--c-navy);color:var(--c-white);padding:10px 16px;border-radius:var(--r-xs);font:var(--t-ui);text-decoration:none}
.skip:focus{top:var(--s-3);box-shadow:var(--focus-dark)}

/* ---------- Typo ---------- */
.h2{font:var(--t-h2);letter-spacing:var(--ls-tight);text-wrap:balance}
.h3-l{font:var(--t-h3-l);text-wrap:balance}
.h3{font:var(--t-h3);letter-spacing:var(--ls-tight);text-wrap:balance}
.lead{font:var(--t-lead);color:var(--c-text-2);margin-top:var(--s-5);text-wrap:pretty}
p{text-wrap:pretty}
.measure-h2{max-width:var(--measure-h2)}
.measure-lead{max-width:var(--measure-lead)}
.note{font:var(--t-caption);color:var(--c-text-2);margin-top:var(--s-4)}

/* ---------- Knöpfe, Marke „Neu“ ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;height:var(--btn-h);padding:0 var(--btn-px);border-radius:var(--r-pill);font:600 .875rem/1.25rem var(--font);text-decoration:none;white-space:nowrap;transition:background-color .2s,color .2s}
.btn-orange{background:linear-gradient(135deg,#F07F2E 0%,var(--c-orange) 50%,#D2541C 100%);color:var(--c-white);font-weight:500;box-shadow:0 1px 2px rgb(17 20 42 / .12)}   /* Inhaber 19.10.2026: Weiß auf Orange-Verlauf wie Reonic; Kontrast < 4,5 : 1 → Liste vor Veröffentlichung S29 */
.btn-orange:hover{background:linear-gradient(135deg,var(--c-orange) 0%,#D2541C 60%,var(--c-orange-ink) 100%);color:var(--c-white)}
.btn-orange:focus-visible{box-shadow:var(--focus),0 1px 2px rgb(17 20 42 / .12)}   /* Fokusring nicht vom Knopf-Schatten überdecken (Mila 2.4.7) */
.dark .btn-orange:focus-visible{box-shadow:var(--focus-dark)}
.btn-block{display:flex;width:100%}
.btn-navy{background:var(--c-navy);color:var(--c-white)}            /* auf den Verlaufsflächen: Weiß auf Navy 17,9:1, Knopf gegen Orange ≥ 5,5:1 */
.btn-navy:hover{background:var(--c-white);color:var(--c-navy)}
.btn > .i{width:16px;height:16px;margin-right:8px}   /* Kalender vor „Demo anfragen“ (wie Reonic „Demo buchen“) */
.neu{display:inline;margin-left:6px;color:var(--c-orange-ink);font:700 .6875rem/.6875rem var(--font);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;vertical-align:.12em}   /* 5,06:1 auf Weiß */
.dark .neu{color:var(--c-orange)}   /* 5,52:1 auf Navy */

/* ---------- Navigation ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--nav-h);background:rgba(255,255,255,0);border-bottom:1px solid transparent;transition:background-color .2s,border-color .2s}
.nav.is-scrolled{background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom-color:var(--c-divider)}
.nav.is-open{background:var(--c-white);border-bottom-color:var(--c-divider)}
.nav-bar{display:flex;align-items:center;height:var(--nav-h);gap:var(--s-6)}
.nav-logo{display:block;flex:none;border-radius:6px}
.nav-logo img{width:190px;height:40px}
.nav-logo .nav-logo-icon{display:none;width:36px;height:36px}
.nav-main{flex:1;display:flex;justify-content:center;position:relative}
.nav-list{display:flex;gap:var(--s-1)}
.nav-item{position:static}   /* Mega-Menü zentriert unter der Navigation, nie aus dem Fenster */
/* Ohne JavaScript (site.js nicht geladen): Mega-Menüs per Hover und Fokus, Brücke über den Abstand; Menüknopf ohne Funktion ausblenden */
.no-js .nav-item:hover > .mega,.no-js .nav-item:focus-within > .mega{display:block !important}
.no-js .mega::before{content:"";position:absolute;left:0;right:0;top:-24px;height:24px}
.no-js .nav-toggle{display:none !important}
.nav-link{display:inline-flex;align-items:center;gap:6px;height:37px;padding:8px 14px;white-space:nowrap;border-radius:var(--r-xs);font:var(--t-nav);text-decoration:none;color:var(--c-navy);transition:background-color .15s}
.nav-link:hover,.nav-link[aria-expanded="true"]{background:var(--c-divider)}
.chev{width:16px;height:16px;transition:transform .2s}
[aria-expanded="true"] > .chev{transform:rotate(180deg)}
.nav-cta{flex:none;height:36px;padding:0 16px;font-size:.875rem}   /* schlanker wie Reonic „Demo buchen“ */
.nav-cta > .i{width:15px;height:15px;margin-right:7px}
.nav-link[aria-current="page"],.sheet-link[aria-current="page"],.foot-col a[aria-current="page"]{font-weight:600}   /* aktuelle Seite auch sichtbar, nicht nur für Screenreader */
.nav-toggle{display:none;flex:none;width:44px;height:44px;border-radius:var(--r-xs);align-items:center;justify-content:center;margin-left:auto}
.nav-toggle .i{width:20px;height:20px}
.nav-toggle .i-close{display:none}
.nav-toggle[aria-expanded="true"] .i-open{display:none}
.nav-toggle[aria-expanded="true"] .i-close{display:block}

.mega{position:absolute;top:calc(100% + 22px);left:50%;transform:translateX(-50%);width:640px;background:var(--c-white);border:var(--border);border-radius:var(--r-md);box-shadow:0 18px 50px rgba(17,20,42,.12);padding:var(--s-3)}
.mega{max-height:calc(100vh - var(--nav-h) - 24px);overflow-y:auto}   /* Sicherung bei Zoom/kleinen Fenstern; KI-Menü (10 Karten) endet bei 1200×800 auf y 558 */
.mega-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-1)}
.mega-grid li:last-child:nth-child(odd){grid-column:1 / -1}
.mega-grid-1{grid-template-columns:minmax(0,1fr)}   /* drei Einträge: drei Spalten brechen Titel bei 640 px (gemessen), daher eine */
.mega.mega-schmal{width:400px}   /* einspaltig: keine 300 px Leerraum */
.mega-card{display:flex;gap:var(--s-3);align-items:flex-start;height:100%;padding:var(--s-3) var(--s-4);border-radius:var(--r-sm);text-decoration:none}
.mega-card:hover{background:var(--c-surface)}   /* „Neu“ #B35222 auf #F4F4F6: 4,63:1 */
.mega-ic{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:10px;background:var(--c-surface);color:var(--c-orange-ink)}
.mega-ic .i{width:20px;height:20px}
.mega-card:hover .mega-ic{background:var(--c-white)}
.mega-ic{border:1px solid var(--c-divider)}
.mega-title{display:block;font:600 .9375rem/1.3125rem var(--font);color:var(--c-navy)}
.mega-text{display:block;margin-top:2px;font:400 .8125rem/1.25rem var(--font);color:var(--c-text-2)}
.mega-gruppe{margin:var(--s-2) var(--s-4) var(--s-1);font:700 .6875rem/1rem var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--c-text-2)}   /* KI-Menü: „Die Plattform“ / „KI im Produkt“ (Nav-Ordnung 20.10.2026); 7,4:1 auf Weiß */
.mega-gruppe:first-child{margin-top:var(--s-1)}
.ptag{display:inline-block;margin-left:6px;padding:0 7px;border:1px solid var(--c-divider);border-radius:var(--r-pill);background:var(--c-surface);font:600 .6875rem/1.125rem var(--font);color:var(--c-text-2);white-space:nowrap;vertical-align:.1em}   /* Produkt-Marke an KI-Funktionen; #55586C auf #F4F4F6 ≥ 5,6:1 */
.mega-card:hover .ptag{background:var(--c-white)}
.sheet{position:fixed;z-index:49;top:var(--nav-h);left:0;right:0;bottom:0;background:var(--c-white);display:flex;flex-direction:column;overflow-y:auto;border-top:var(--border)}
.sheet-nav{padding:var(--s-2) var(--gutter);flex:1}
.acc{border-bottom:var(--border)}
.acc-btn,.sheet-link{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:56px;font:600 1.0625rem/1.5rem var(--font);text-decoration:none;color:var(--c-navy)}
.sheet-link{border-bottom:var(--border)}
.acc-panel{padding:0 0 var(--s-3)}
.acc-panel a{display:flex;align-items:center;gap:var(--s-2);min-height:44px;font:var(--t-body);color:var(--c-text-2);text-decoration:none}
.acc-gruppe{margin:var(--s-2) 0 2px;font:700 .6875rem/1.5rem var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--c-text-2)}   /* Mobilmenü KI: Blocktitel wie .mega-gruppe */
.sheet-foot{padding:var(--s-4) var(--gutter) var(--s-6);border-top:var(--border)}
.sheet-close{display:flex;align-items:center;justify-content:center;gap:var(--s-2);width:100%;min-height:44px;margin-top:var(--s-2);font:600 .875rem/1.25rem var(--font);color:var(--c-navy);border-radius:var(--r-pill)}
.sheet-close .i{width:16px;height:16px}

/* ---------- 1 · Hero ---------- */
.hero-text{display:flex;flex-direction:column;align-items:center}
.hero h1{font:var(--t-display);letter-spacing:var(--ls-tight);max-width:900px;text-wrap:balance}
.hero h1 .hl{color:var(--c-orange);white-space:nowrap}       /* Orange-Text nur ≥ 24 px (hier 50/34 px) */
.hero-lead{font:var(--t-lead);color:var(--c-text-2);max-width:var(--measure-hero);margin-top:var(--s-6);text-wrap:balance}

.panel{height:100%;position:relative}
/* Auto-Wechsel (site.js): das neue Panel blendet über dem alten ein, das alte liegt so lange darunter.
   isolation: z-index der Panels bleibt im Bildschirm des Tablets, das Hero-Telefon liegt in jedem Frame darüber (Nora r13 K1) */
.screen{position:relative}
.tablet .screen{isolation:isolate}
.panel.ist-alt{position:absolute;inset:0;z-index:0}
.panel.ist-neu{z-index:1;animation:panel-ein .9s ease both}
@keyframes panel-ein{from{opacity:0}to{opacity:1}}
/* Cockpit-Reiter: Ebene 2 (Langaufnahme) im Inhaltsfenster von Ebene 1; Lage aus dem Wertesatz in build.py (EBENE) */
.cockpit-fenster{position:absolute;left:var(--l);top:var(--o);width:var(--b);height:var(--h);overflow:hidden;pointer-events:none}
.device img.cockpit-lang{display:block;width:100%;height:auto;object-fit:fill;will-change:transform;backface-visibility:hidden}
.panel:focus-visible{box-shadow:none;outline:none}
/* Fokusring am Gerät, weil .screen{overflow:hidden} ihn sonst abschneidet */

/* ---------- Abschnitte (Rhythmus: weiße Abschnitte teilen sich einen Abstand) ---------- */
.sec{padding-top:var(--section-y)}
.sec.bg-surface,.sec.dark{padding-bottom:var(--section-y)}
.sec:has(+ .bg-surface),.sec:has(+ .dark){padding-bottom:var(--section-y)}
.sec-line{border-top:var(--border)}
.sec:has(+ .sec-line){padding-bottom:var(--s-20)}   /* Linie zwischen zwei Abschnitten mittig: Inhalt stößt nicht an die Linie */
.sec + .sec-line{padding-top:var(--s-20)}
.bg-surface{background:var(--c-surface)}

/* 1b · Kommunikation: Text links, rechts Posteingang und Lead-Reaktionszeit als Ausschnitte, davor das Telefon mit dem WhatsApp-Gespräch */
.kom-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-14);align-items:center}
.kom-punkte{margin-top:var(--s-8);display:grid;gap:var(--s-6)}
.kom-punkte li{display:flex;gap:var(--s-4)}
.kom-punkte li > .i{width:20px;height:20px;margin-top:4px;color:var(--c-orange-ink)}
.kom-punkte p{font:var(--t-small);color:var(--c-text-2);margin-top:2px}
.kom-buehne{display:grid;grid-template-columns:minmax(0,1fr) 27%;column-gap:var(--s-6);row-gap:var(--s-4);align-items:center;margin:0}   /* Telefon in eigener Spalte: keine Überlagerung */
.kom-desk{grid-column:1;border:var(--border);border-radius:var(--r-md);overflow:hidden;background:var(--c-white);box-shadow:var(--sh-device)}
.kom-desk img{width:100%;height:auto}
.tphone.kom-phone{grid-column:2;grid-row:1 / span 2;position:static;justify-self:stretch;width:auto;height:auto;margin:0;transform:none}
.tphone.kom-phone .tphone-screen{height:auto;aspect-ratio:390/844}
.kom-buehne .note{grid-column:1 / -1;margin-top:var(--s-2)}

/* 2 · Säulen: Icon, Titel, Text, Liste, Aufklapper in gemeinsamen Zeilen (Listen auf gleicher Höhe) */
/* Icon, Titel, Text und 10 Listenzeilen je Säule in gemeinsamen Rasterzeilen: Listen und Trennlinien auf gleicher Höhe */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(13,auto);column-gap:var(--s-8);margin-top:var(--s-12)}
.pillar{display:grid;grid-row:span 13;grid-template-rows:subgrid;align-content:start}
.pi-feld{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--c-orange-tint);color:var(--c-orange-ink)}
.pi-feld .i{width:20px;height:20px}

/* ---------- Kartenköpfe: Icon LINKS neben der Überschrift (Inhaber 20.10.2026, Etappe 19) ----------
   Icon und erste Zeile der Überschrift sind mittig zueinander; bricht die Überschrift um, bleibt das Icon an der ersten Zeile.
   Umsetzung ohne Markup-Änderung: Raster mit Icon-Spalte, alle übrigen Kinder über die volle Breite. Das Icon trägt die Schrift
   der Überschrift, damit 1lh dieselbe Zeilenhöhe ist; der kleinere Teil (Icon oder Zeile) wird um die halbe Differenz versetzt. */
.pillar,.principle,.steps-icon .step,.p-text,.mk{display:grid;grid-template-columns:var(--kopf-icon) minmax(0,1fr);column-gap:14px;align-content:start}
.pillar{--kopf-icon:40px}
.principle,.steps-icon .step{--kopf-icon:20px;column-gap:12px}
.p-text,.mk{--kopf-icon:40px}
.pillar > *,.principle > *,.steps-icon .step > *,.p-text > *,.mk > *{grid-column:1 / -1}
.pillar > .pi-feld,.principle > .i,.steps-icon .step-k,.p-text > .p-icon,.mk > .p-icon{grid-column:1;grid-row:1;align-self:start;margin:0;margin-top:max(0px, calc((1lh - var(--kopf-icon)) / 2))}
.pillar > .pi-feld + .h3-l,.principle > .i + .h3,.steps-icon .step-k + .h3,.p-text > .p-icon + .h2,.mk > .p-icon + .h3{grid-column:2;grid-row:1;align-self:start;margin-top:0;padding-top:max(0px, calc((var(--kopf-icon) - 1lh) / 2))}
.pillar > .pi-feld{font:var(--t-h3-l)}
.principle > .i,.steps-icon .step-k{font:var(--t-h3)}
.p-text > .p-icon{font:var(--t-h2)}
.mk > .p-icon{font:var(--t-h3)}
.p-text > .p-icon,.mk > .p-icon{width:40px;height:40px;border-radius:12px}
.p-text > .p-icon .i,.mk > .p-icon .i{width:20px;height:20px}
.p-text > .lead{margin-top:var(--s-4)}
.mk{grid-template-rows:auto auto auto 1fr}
.mk .mk-verweise{align-self:end}
.pillar .h3-l{margin-top:0}
.pillar-text{font:var(--t-body);color:var(--c-text-2);margin-top:var(--s-3);margin-bottom:var(--s-6)}
.feat{grid-row:span 10;display:grid;grid-template-rows:subgrid;align-content:start}
.feat li{display:flex;align-items:flex-start;gap:var(--s-3);padding:12px 0;border-bottom:var(--border);font:500 .875rem/1.25rem var(--font)}
.feat li:first-child{border-top:var(--border)}
.feat li .i{margin-top:2px;color:var(--c-orange-ink)}   /* 16-px-Icon mittig zur ersten 20-px-Zeile */
.alle-btn{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s-6);min-height:40px;font:600 .875rem/1.25rem var(--font);color:var(--c-navy);border-radius:6px}
.module + .more{display:flex;width:fit-content}   /* „Mehr zum Betriebssystem“ in eigener Zeile unter dem Aufklapper (Etappe 19) */
.alle-btn:hover{text-decoration:underline;text-decoration-color:var(--c-orange-ink);text-underline-offset:4px}
.module{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-8);margin-top:var(--s-4);padding:var(--s-8);background:var(--c-surface);border-radius:var(--r-md)}
.module:focus-visible{box-shadow:var(--focus)}
.mod-g{min-width:0}
.mod-g h3{font:600 .875rem/1.25rem var(--font);margin-bottom:var(--s-2)}
.mod-g li{font:var(--t-small);color:var(--c-text-2);padding:2px 0;overflow-wrap:anywhere}

/* 3 · KI-Kacheln: Verlaufsflächen „Glut“, gedrehtes Telefon mit echtem Ausschnitt */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5);margin-top:var(--s-12)}
/* Kachel als ein Variablensatz: Verlauf, Lichtlage, Schrift, Fließtext und „Neu“ hängen zusammen; Schrift auf allen Kacheln Navy */
.tile{display:grid;grid-template-columns:minmax(0,1fr) 236px;column-gap:var(--s-12);align-items:start;height:auto;min-height:330px;padding:var(--s-12) var(--s-6) 0 var(--s-8);border-radius:var(--r-xl);overflow:hidden;color:var(--tile-fg)}
.tile .neu{color:var(--tile-label)}
.tile-text{max-width:520px;padding-bottom:var(--s-8)}   /* Luft unter dem Text, wenn er die Kachel trägt (1.4.12) */
.tile-h{font:600 1.5rem/1.75rem var(--font);letter-spacing:var(--ls-tight);text-wrap:pretty}
.tile-text p{font:var(--t-small);line-height:1.5rem;margin-top:var(--s-3);color:var(--tile-text)}

/* Gemeinsamer Flächen-Satz für Kachel und CTA */
.tile,.cta{
  background-color:var(--glut-base);
  background-image:var(--grain),var(--glut);
  background-blend-mode:soft-light,normal,normal;
  background-repeat:repeat,no-repeat,no-repeat;
  background-size:180px 180px,var(--licht-size),100% 100%;
  background-position:0 0,var(--licht-pos),0 0;
}
.tile{
  --glut:var(--g-leucht);--glut-base:var(--c-glut-hellorange);
  --tile-fg:var(--c-navy);--tile-text:var(--c-navy);--tile-label:var(--c-navy);
  --licht-size:620px 700px;--licht-pos:right -180px bottom -350px;   /* Lichtmitte 130 px vom rechten Rand, auf der Unterkante = am Telefon */
}
/* 2×2 diagonal: Leuchtend · Amber / Pfirsich · Leuchtend Koralle. Schriftsatz je Kachel ausdrücklich Navy, damit kein alter Navy-Kachel-Satz (Weiß/#C9CBD6) durchschlägt */
.tile:nth-child(2){--glut:var(--g-amber);--glut-base:var(--c-glut-pfirsich);--tile-fg:var(--c-navy);--tile-text:var(--c-navy);--tile-label:var(--c-navy)}
.tile:nth-child(3){--glut:var(--g-pfirsich);--glut-base:var(--c-glut-pfirsich);--tile-fg:var(--c-navy);--tile-text:var(--c-navy);--tile-label:var(--c-navy)}
.tile:nth-child(4){--glut:var(--g-leucht-koralle);--glut-base:var(--c-orange);--tile-fg:var(--c-navy);--tile-text:var(--c-navy);--tile-label:var(--c-navy)}
@media (max-width:1279px){   /* einspaltig: leuchtend · hell · leuchtend · hell */
  .tile:nth-child(3){--glut:var(--g-leucht-koralle);--glut-base:var(--c-orange);--tile-fg:var(--c-navy);--tile-text:var(--c-navy);--tile-label:var(--c-navy)}
  .tile:nth-child(4){--glut:var(--g-pfirsich);--glut-base:var(--c-glut-pfirsich);--tile-fg:var(--c-navy);--tile-text:var(--c-navy);--tile-label:var(--c-navy)}
}
@media (max-width:767px){    /* Telefon steht unten mittig: Licht wandert mit */
  .tile{--licht-size:600px 640px;--licht-pos:50% calc(100% + 320px)}
}
.tile .tphone{margin-bottom:calc(330px - var(--s-12) - 460px)}   /* Telefon (−20 + 480 px) trägt nur 282 px zur Höhe bei: Kachel bleibt 330 px, wächst aber mit dem Text (WCAG 1.4.12, Mila) */

/* 4 · Ablauf */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-12) var(--s-8);margin-top:var(--s-12)}
.step-k{display:flex;align-items:center;gap:var(--s-3);color:var(--c-orange-ink)}
.step-n{font:600 .875rem/.875rem var(--font);letter-spacing:.04em}
.step-k .i{width:20px;height:20px}
.step .h3{margin-top:var(--s-3)}
.step p{color:var(--c-text-2);margin-top:var(--s-2)}

/* 5 · Für wen */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5);margin-top:var(--s-12)}
.card{display:flex;flex-direction:column;background:var(--c-white);border:var(--border);border-radius:var(--r-md);padding:var(--s-8)}
.checks{margin-top:var(--s-4);display:grid;gap:var(--s-3)}
.checks li{display:flex;gap:var(--s-3);font:var(--t-small);color:var(--c-text-2)}
.checks .i{margin-top:4px;color:var(--c-orange-ink);stroke-width:1.5}
.more{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:auto;padding-top:var(--s-6);font:600 .875rem/1.25rem var(--font);text-decoration:none;color:var(--c-navy)}
.more:hover{text-decoration:underline;text-decoration-color:var(--c-orange-ink);text-underline-offset:4px}

/* 6 · OS-Bildkarten */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-12) var(--s-6);margin-top:var(--s-12)}   /* drei gleich breite Karten (Karte „Konzern-Cockpit“ gestrichen) */
/* Konzern-Cockpit (#konzern-cockpit): großes Tablet links, Punkte im Stil von .kom-punkte rechts */
.cockpit-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:var(--s-12);align-items:center;margin-top:var(--s-12)}
.cockpit-buehne{margin:0}
.cockpit-buehne .note{margin-top:var(--s-4)}
.cockpit-grid .kom-punkte{margin-top:0}
.shot-img{border:var(--border);border-radius:var(--r-md);overflow:hidden;background:var(--c-surface);padding:12px}
.shot-img img{width:100%;height:auto;border-radius:6px}
.shot .h3{margin-top:var(--s-4)}
.shot p{font:var(--t-small);color:var(--c-text-2);margin-top:var(--s-1)}
.shots + .note,.tiles + .note,.auto-ebene + .note{margin-top:var(--s-6)}
/* Zweitebene in #ki (Texte v4 §4): zwei Listen im Stil von .kom-punkte, keine Karten */
.auto-ebene{margin-top:var(--s-16)}
.auto-spalten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-10) var(--s-14);margin-top:var(--s-8)}
.auto-spalten .kom-punkte{margin-top:0}

/* 7 · Website-System */
.ws{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-14);align-items:center}
.ws-punkte{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-8) var(--s-14)}   /* unter Text und Bühne über die volle Breite (Nora r8), schlicht wie bisher */
.ws-punkte li{display:flex;gap:var(--s-4)}
.ws-punkte li > .i{width:20px;height:20px;margin-top:4px;color:var(--c-orange-ink)}
.ws-punkte p{font:var(--t-small);color:var(--c-text-2);margin-top:2px}
.ws-buehne{position:relative;padding-right:12%;padding-bottom:var(--s-8)}
.browser{border-radius:14px;overflow:hidden;background:var(--c-white);border:var(--border);box-shadow:var(--sh-device)}
.browser-bar{display:flex;gap:6px;align-items:center;height:28px;padding:0 12px;background:var(--c-white);border-bottom:var(--border)}
.browser-bar span{width:9px;height:9px;border-radius:50%;background:var(--c-divider)}
.browser img{width:100%;height:auto}
.ws-phone{width:26%;bottom:0}
.ws-buehne .note{margin-top:var(--s-4);padding-right:30%}

/* 8 · Prinzipien */
.dark{background:var(--c-navy);color:var(--c-white)}
.dark :focus-visible{box-shadow:var(--focus-dark)}
.principles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-10) var(--s-14);margin-top:var(--s-12)}   /* 2×2: Texte bleiben bei 1440 px in 3 Zeilen (Δ kurz) */
.principle .i{width:20px;height:20px;color:var(--c-orange)}
.principle .h3{margin-top:0}
.principle p{font:var(--t-body);color:var(--c-on-navy-2);margin-top:var(--s-2)}
.dark .more{color:var(--c-white);padding-top:var(--s-4)}
.dark .more:hover{text-decoration-color:var(--c-orange)}
.dark .btn{margin-top:var(--s-12)}

/* CTA */
.sec-cta{padding:var(--section-y) 0 var(--s-20)}
.cta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:var(--s-12);border-radius:var(--r-lg);padding:var(--s-14);overflow:hidden}
.cta .btn{margin-top:var(--s-8)}
.cta{
  --glut:var(--g-leucht);--glut-base:var(--c-glut-hellorange);
  --licht-size:900px 860px;--licht-pos:right -250px top 55%;   /* Lichtmitte 200 px vom rechten Rand, hinter dem Tablet */
  color:var(--c-navy);
}
.cta .lead,.cta-mail,.cta-mail a{color:var(--c-navy)}
.cta-mail{font:var(--t-small);margin-top:var(--s-4)}
.cta-mail a{text-underline-offset:3px}

/* Footer */
.foot{background:var(--c-surface);padding:var(--s-14) 0 var(--s-10)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:var(--s-8)}
.foot-brand img{width:190px;height:40px}
.foot-brand a{display:inline-block;border-radius:6px}
.foot-claim{font:var(--t-small);margin:var(--s-4) 0 var(--s-3)}
.foot-addr{font:400 .8125rem/1.375rem var(--font);color:var(--c-text-2);max-width:none}
.foot-addr a{color:var(--c-navy);text-underline-offset:3px}
.foot-col h2{font:600 .875rem/1.25rem var(--font);margin-bottom:var(--s-3)}
.foot-col li{min-height:28px;display:flex;align-items:center}
.foot-col a{font:400 .8125rem/1.0625rem var(--font);text-decoration:none;color:var(--c-navy);padding:4px 0}
.foot-col a:hover{text-decoration:underline;text-underline-offset:3px}
.foot-muted li{font:400 .8125rem/1.0625rem var(--font);color:var(--c-text-2)}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-12);padding-top:var(--s-6);border-top:1px solid var(--c-divider);font:var(--t-caption);color:var(--c-text-2)}

/* ---------- Vertrauensleiste (TEXTE-INFRASTRUKTUR §1): schlichte Reihe, Icon 20 px Navy, Text 15 px.
   Einzeilig geht nicht: die fünf Punkte sind 1211 px breit, der Container 1220 px (gemessen). 52rem ergibt 3 + 2. ---------- */
.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-3) var(--s-8);max-width:52rem;margin:var(--s-12) auto 0}
.trust li{display:flex;align-items:flex-start;gap:var(--s-2);font:500 .9375rem/1.3125rem var(--font);color:var(--c-navy)}
.trust .i{width:20px;height:20px;margin-top:.5px;color:var(--c-navy)}   /* 20 px Icon an der ersten 21-px-Zeile */

/* ---------- Referenzleiste (Inhaber 19.10.2026, wie Reonic): Original-Logos, dezent grau, gleiche optische Fläche ---------- */
.referenzen{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--s-6) var(--s-14);margin-top:var(--s-12)}
.referenzen img{display:block;width:auto;height:var(--h);filter:grayscale(1);opacity:var(--o,.55)}   /* --h je Logo aus der gemessenen Tintenfläche */

/* ---------- Über uns ---------- */
.zweispalt{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-14);align-items:start}   /* Über uns: Szenen und Team als Textzeilen, kein Kachelraster */
.zeilen .zeile{display:flex;gap:var(--s-4);padding:var(--s-6) 0;border-top:var(--border)}   /* Icon je Szene/Team-Feld (Δ kurz) */
.zeilen .zeile:first-child{padding-top:0;border-top:0}
.zeilen .zeile > .i{flex:none;width:24px;height:24px;margin-top:3px;color:var(--c-orange-ink)}
.zeilen p{font:var(--t-lead);color:var(--c-text-2)}
.zeilen strong{font-weight:600;color:var(--c-navy)}
.gruender-kurz{display:flex;align-items:center;gap:var(--s-6);padding-top:var(--s-6);border-top:var(--border)}
.gruender-kurz img{flex:none;width:160px;height:160px;border-radius:var(--r-lg);background:var(--c-surface);object-fit:cover}
.gruender-kurz p{color:var(--c-text-2);margin-top:var(--s-2)}
.standort{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-14);align-items:start}   /* Leiste oben bündig mit der H2 */
.standort-trust .trust{flex-direction:column;align-items:flex-start;gap:var(--s-4);max-width:none;margin:0}
.anschrift{font-style:normal;font:var(--t-body);color:var(--c-navy);margin-top:var(--s-6)}
.anschrift a{color:var(--c-navy);text-underline-offset:3px}

/* ---------- Ganze Pixel (Vera): Bildrahmen-Höhe = Containerbreite × Seitenverhältnis, auf 1 px gerundet.
   Sonst schieben gebrochene Höhen alles Folgende, bis zum Footer-Logo, auf Subpixel. Ohne round() gilt die Regel davor. */
.tablet,.phone,.kom-desk,.kom-phone,.shot-img,.browser{container-type:inline-size}
.tablet .screen{height:round(nearest,100cqw * 10 / 16,1px)}
.phone .screen{height:round(nearest,100cqw * 844 / 390,1px)}
.tphone.kom-phone .tphone-screen{height:round(nearest,100cqw * 844 / 390,1px)}
.kom-desk img{object-fit:cover;height:round(nearest,100cqw * 904 / 1600,1px)}
.kom-desk-2 img{height:round(nearest,100cqw * 615 / 1280,1px)}
.shot-img img{object-fit:cover;height:round(nearest,100cqw * 522 / 1280,1px)}
.browser img{object-fit:cover;height:round(nearest,100cqw * 900 / 1440,1px)}


/* ---------- Breiten ---------- */
@media (max-width:1279px){
  .tiles{grid-template-columns:1fr}
  .tile{column-gap:var(--s-12);padding-right:var(--s-12)}
}
@media (max-width:1199px){
  .principles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .module{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* Navigation mit sechs Punkten + CTA passt erst ab 1200 px (gemessen: 1150 px = 1 px Überstand) → darunter Menüknopf */
  .nav-main{display:none}
  .nav-toggle{display:inline-flex;margin-left:var(--s-2)}
  .nav-cta{margin-left:auto;height:44px;padding:0 14px}   /* „Demo anfragen“ bleibt auch mit Menüknopf sichtbar (Uma P1); 44 px Zielgröße (Bea r2) */
}
@media (max-width:479px){
  .nav-toggle{margin-left:0}
  /* Inhaber 19.10.2026: Logo überall mit Tachonadel, Wortlogo ab 36 px, sonst Icon ab 32 px. 36 px Wortlogo bräuchte
     20 + 171 + 16 + 120 + 16 + 44 + 20 = 407 px, darum unter 480 px das Original-Icon (36 px, dreifarbig) statt einer Kleinfassung */
  .nav-logo .nav-logo-wort{display:none}
  .nav-logo .nav-logo-icon{display:block}
  .nav-bar{gap:18px}   /* Schutzraum 0,5 × Icon-Höhe */
}
@media (max-width:419px){
  .nav-cta{padding:0 12px;font-size:.8125rem}
  .nav-cta > .i{display:none}   /* schmale Telefone: nur die Beschriftung, Logo und Menüknopf behalten Platz */
}

@media (max-width:1023px){
  .pillars{grid-template-columns:1fr;grid-template-rows:none}
  .pillar{grid-row:auto;grid-template-rows:none;align-items:start}
  .pillar .feat{width:100%;display:block}
  .pillar + .pillar{margin-top:var(--s-12)}
  .steps,.cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards,.shots{grid-template-columns:1fr}
  .cockpit-grid{grid-template-columns:minmax(0,1fr);gap:var(--s-10)}
  .ws{grid-template-columns:1fr}
  .kom-grid{grid-template-columns:1fr}
  .auto-spalten{grid-template-columns:1fr;row-gap:var(--s-6)}   /* Büro-Liste zuerst, läuft als eine Liste weiter */
  .zweispalt{grid-template-columns:1fr;gap:var(--s-8)}
  .cta{grid-template-columns:1fr;--licht-size:1000px 640px;--licht-pos:50% calc(100% + 320px)}   /* Tablet unter dem Text */
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-brand{grid-column:1 / -1}
}
@media (max-width:767px){
  .hero-text{align-items:flex-start}
  .hero h1{font-size:min(2.125rem,8.2vw);line-height:1.12;line-height:round(1.12em,1px)}
  .steps,.principles,.shots{grid-template-columns:1fr}
  .steps{gap:var(--s-8)}
  .tile{grid-template-columns:minmax(0,1fr);height:auto;padding:var(--s-6) var(--s-6) 0;row-gap:var(--s-6)}
  .tile-text{padding-bottom:0}
  .module{grid-template-columns:minmax(0,1fr);padding:var(--s-5)}
  .card{padding:var(--s-6)}
  .cta{padding:var(--s-8) var(--s-6)}
  .foot-grid{grid-template-columns:1fr}
  .trust{flex-direction:column;align-items:flex-start;gap:var(--s-3)}
  .standort{grid-template-columns:1fr;gap:var(--s-10)}   /* einspaltig: Leiste unter der Anschrift */
  .referenzen{gap:var(--s-5) var(--s-8)}
  .referenzen img{height:calc(var(--h) * .75);height:round(nearest,calc(var(--h) * .75),1px)}   /* ganze Pixel */
  .gruender-kurz{flex-direction:column;align-items:flex-start;gap:var(--s-5)}
  .ws-punkte{grid-template-columns:1fr;gap:var(--s-6)}
  .ws-buehne{padding-right:16%}
  .kom-buehne{grid-template-columns:minmax(0,1fr) 32%;column-gap:var(--s-4);align-items:start}
  .kom-desk{grid-column:1 / -1}
  .kom-desk-2{grid-column:1;grid-row:2;align-self:stretch}   /* unten bündig mit dem Telefon */
  .kom-desk-2 img{height:100%;object-fit:cover;object-position:left top}
  .tphone.kom-phone{grid-column:2;grid-row:2;justify-self:stretch;width:auto;height:auto;transform:none}
  .ws-buehne{padding-bottom:0}
  .ws-phone{position:relative;right:auto;bottom:auto;width:30%;margin:-36% -16% 0 auto;margin-top:round(nearest,-36%,1px)}   /* im Fluss: Bildunterschrift steht darunter */
  .ws-buehne .note{padding-right:0;margin-top:var(--s-4);white-space:nowrap}
}
@media (forced-colors:active){
  .tile,.cta{background-image:none;background-color:Canvas;color:CanvasText;border:1px solid CanvasText}   /* Verläufe weg, Systemfarben */
  .btn{border:1px solid currentColor}   /* Knöpfe behalten eine Kontur, wenn ihre Fläche entfällt */
  /* durchgehende Grundlinie: Reiter ohne Lücke, jeder trägt die Linie selbst */
  .tablet:has(.panel:focus-visible){outline-color:Highlight}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important;animation:none !important}
  .cockpit-fenster{display:none}   /* kein Scrollen: Ebene 1 (oberer Ausschnitt) steht still */
}

/* =====================================================================================================
   Erster Bereich und Geräte (Lena, 19.10.2026; Regel: logo-final/README.md „Hero-Grund“, „Geräterahmen“).
   Steht bewusst am Dateiende: dieselbe Kaskade wie in Lenas Vorschau (site.css + hero.css). Ersetzte Regeln sind oben entfernt.
   ===================================================================================================== */
:root{
  /* Hero-Grund: ein Hauch des Orange-Tints. color-mix(in oklab, #FCEDE4 22 %, #FFF), gemessen #FEFBF9 (Körnung ±1).
     Kein neuer Ton im Sinne der Neutralskala: abgeleitet aus --c-orange-tint (Vera ✓ 18.10.). */
  --c-hero-grund:color-mix(in oklab, var(--c-orange-tint) 22%, var(--c-white));   /* 22 %, nicht mehr: H1-Orange braucht ≥ 3:1 */
  /* Wärme an den Rändern: nur Pfirsich/Tint (hellste Stufen der Familie „Glut“), rechts auf Höhe des Telefons und links unten –
     nie hinter der H1 (dort kostete sie das Orange 0,4 Kontrastpunkte: 2,90:1 bei 390 px, gemessen).
     Freigegeben (Koordinator nach Inhaber-Auftrag 19.10.), Regel ergänzt in logo-final/README.md „Hero-Grund“; Vera-Gate offen. */
  --hero-waerme:
    radial-gradient(38% 46% at 100% 64%, rgb(253 230 212 / .85) 0%, rgb(253 230 212 / 0) 100%),   /* Pfirsich #FDE6D4 */
    radial-gradient(36% 42% at 0% 100%, rgb(252 237 228 / .9) 0%, rgb(252 237 228 / 0) 100%);   /* Tint #FCEDE4 */

  /* Geräte „Titan hell“: nur Töne der Neutralskala. Rahmen hell (#F4F4F6), Kante Titan (#DFE0E7 + Haarlinie #C9CBD6),
     Glanz oben (Weiß), Schatten Navy wie --sh-device, aber weicher und zweistufig. */
  --dev-rahmen:var(--c-surface);
  --dev-kante:0 0 0 1px var(--c-white) inset, 0 0 0 2px var(--c-divider), 0 0 0 3px var(--c-line);
  --dev-schatten:0 1px 2px rgb(17 20 42 / .06), 0 24px 64px -8px rgb(17 20 42 / .16);
  --dev-screen-linie:0 0 0 1px var(--c-divider);
}

/* ---------- Grund: ganzer erster Bereich inkl. Navigation (transparent darüber) und Logoleiste, feine Abschlusslinie ---------- */
.hero{
  padding-top:calc(var(--nav-h) + var(--hero-top));
  padding-bottom:var(--s-14);
  text-align:center;
  background-color:var(--c-hero-grund);
  background-image:var(--grain),var(--hero-waerme);
  background-blend-mode:soft-light,normal,normal;
  background-repeat:repeat,no-repeat,no-repeat;
  background-size:180px 180px,100% 100%,100% 100%;
  border-bottom:var(--border);                       /* #DFE0E7: Abschluss wie Reonic */
}
/* Folgeabschnitt beginnt auf Weiß; .kom trägt bisher .sec-line (Linie oben) – doppelte Linie vermeiden: */
.hero + .sec-line{border-top:0}

/* ---------- Bühne: Geräte, darunter EINE Zeile (Ansichtswahl links an der Tablet-Kante, Bildunterschrift rechts an der Telefon-Kante) ---------- */
.stage{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:var(--s-6);row-gap:var(--s-6);
  max-width:calc(1100px + 2 * var(--gutter));margin-top:var(--s-16)
}
.stage-inner{grid-column:1 / -1;grid-row:1;position:relative;width:100%;padding-right:16%;padding-bottom:var(--s-10)}
.stage .stage-leiste{grid-column:1;grid-row:2;justify-self:start;display:flex;align-items:center;gap:var(--s-2)}     /* DOM-Reihenfolge bleibt: Reiter vor den Panels (ARIA) */
/* Pause-Knopf an den Reitern: gleiche Höhe und Kontur wie die Reiterleiste (34 + 2 × 3 + 2 × 1 = 42 px) */
.reiter-steuer{flex:none;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;margin:0;border:var(--border);border-radius:12px;background:var(--c-white);color:var(--c-navy);cursor:pointer;transition:background-color .15s}
.reiter-steuer[hidden]{display:none}
.reiter-steuer:hover{background:var(--c-surface)}
.reiter-steuer:focus-visible{outline:2px solid transparent;box-shadow:var(--focus)}
.reiter-steuer svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.reiter-steuer span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
@media (forced-colors:active){ .reiter-steuer{border:1px solid ButtonText} }
.stage .note{grid-column:2;grid-row:2;justify-self:end;margin-top:0;text-align:right}

/* ---------- Geräte „Titan hell“, einheitlich auf der ganzen Seite (Startseite + Über uns) ----------
   Tablets: .device.tablet (Hero, CTA). Telefone: .device.phone (Hero, Website-System) und .tphone (KI-Kacheln, Kommunikation).
   Jedes Telefon hat eine Statusleiste (15 % der Breite) mit Dynamic Island: alle Telefonbilder tragen oben Inhalt, die Insel
   verdeckt so nichts. Das Bild rückt um die Leiste nach unten und wird unten beschnitten. Nur CSS, kein Markup. */
.device,.tphone{background:var(--dev-rahmen);box-shadow:var(--dev-kante),var(--dev-schatten)}
.device .screen,.tphone-screen{overflow:hidden;box-shadow:var(--dev-screen-linie);background:var(--c-white)}   /* overflow stand bisher in der ersetzten Regel */
.device img{width:100%;height:100%;object-fit:cover;object-position:top center}

.tablet{border-radius:34px;padding:12px}
.tablet .screen{aspect-ratio:16/10;border-radius:22px}
.tablet:has(.panel:focus-visible){box-shadow:var(--focus),var(--dev-schatten);outline:2px solid transparent;outline-offset:2px}
.cta-tablet{padding:10px;border-radius:26px;transform:rotate(-3deg)}
.cta-tablet .screen{border-radius:16px}

:where(.phone){position:absolute;right:0;bottom:0;width:23.3%}   /* Lage ohne Spezifität: .ws-phone (26 %, mobil im Fluss) gewinnt immer, egal in welcher Reihenfolge */
.phone{border-radius:44px;padding:7px}
.phone .screen{aspect-ratio:390/844;border-radius:37px}
.tphone{width:236px;height:480px;margin-top:-20px;padding:7px;border-radius:44px;transform:rotate(-6deg)}
.tphone-screen{width:100%;height:100%;border-radius:37px;overflow:hidden}
.tphone img{width:100%;height:auto}
.tile .tphone{box-shadow:var(--dev-kante),0 1px 2px rgb(17 20 42 / .08),0 24px 50px -6px rgb(17 20 42 / .22)}   /* auf Orange etwas dichter, damit die helle Kante steht */

.phone,.tphone{container-type:inline-size}
.phone .screen,.tphone-screen{position:relative;padding-top:15cqw}
.phone .screen img{height:100%}
.phone .screen::before,.tphone-screen::before{                                 /* Dynamic Island, rein CSS, ohne Markenzeichen */
  content:"";position:absolute;z-index:1;left:50%;top:3.6cqw;width:31cqw;height:9cqw;
  transform:translateX(-50%);border-radius:var(--r-pill);background:var(--c-navy)
}

/* ---------- Ansichtswahl: Segment-Steuerung statt Reiterleiste (ARIA-Tabs unverändert, site.js unverändert) ---------- */
.tabs{display:inline-flex;gap:2px;padding:3px;margin:0;border:var(--border);border-radius:12px;background:var(--c-white);width:auto;max-width:100%}
.tab{height:34px;padding:0 14px;margin:0;border:0;border-radius:9px;font:var(--t-ui);color:var(--c-text-2);white-space:nowrap;transition:background-color .15s,color .15s}
.tab:hover{color:var(--c-navy);background:var(--c-surface)}
.tab[aria-selected="true"]{color:var(--c-white);background:var(--c-navy);font-weight:600}   /* Weiß auf Navy 17,9:1; Segment gegen Weiß 17,9:1 (1.4.11) */
.tab:focus-visible{border-radius:9px;box-shadow:var(--focus)}

/* ---------- Logoleiste: Abschluss des Grunds, etwas leiser als bisher ---------- */
.hero .referenzen{margin-top:var(--s-16);gap:var(--s-6) var(--s-16)}
.hero .referenzen img{height:calc(var(--h) * .85);height:round(nearest,calc(var(--h) * .85),1px);opacity:var(--o,.5)}

/* ---------- Telefonbreite ---------- */
@media (max-width:767px){
  .hero{padding-bottom:var(--s-10);text-align:left}   /* wie bisher: Telefon linksbündig */
  .stage{grid-template-columns:minmax(0,1fr);margin-top:var(--s-10);row-gap:var(--s-3)}
  .stage-inner{padding-right:18%;padding-bottom:var(--s-6)}
  .stage .stage-leiste{grid-column:1;grid-row:2;justify-self:stretch}
  .stage .tabs{display:flex;flex:1 1 auto;min-width:0}
  .stage .note{grid-column:1;grid-row:3;justify-self:start;text-align:left}
  .tab{flex:1 1 auto;padding:0 8px;font-size:.8125rem}
  .tablet{border-radius:20px;padding:6px}
  .tablet .screen{border-radius:14px}
  .cta-tablet{transform:none}
  :where(.phone){width:30%}
  .phone{border-radius:22px;padding:4px}
  .phone .screen{border-radius:18px}
  .tphone,.tile .tphone{justify-self:center;width:240px;height:300px;margin:0;transform:none;border-radius:40px 40px 0 0;padding:7px 7px 0}
  .tphone-screen{border-radius:33px 33px 0 0}
  .tphone.kom-phone{padding:5px;border-radius:28px}
  .tphone.kom-phone .tphone-screen{border-radius:23px}
  .hero .referenzen{margin-top:var(--s-12);gap:var(--s-5) var(--s-8)}
  .hero .referenzen img{height:calc(var(--h) * .7);height:round(nearest,calc(var(--h) * .7),1px)}
}

/* ---------- Schmale Telefone: vier Segmente einzeilig brauchen 344 px (gemessen), darunter 2 × 2 ---------- */
@media (max-width:389px){
  .stage .tabs{display:grid;grid-template-columns:1fr 1fr}
  .tab,.tab[aria-selected="true"]{padding:0 6px;border:0;text-align:center}   /* neutralisiert auch die alte 359-px-Regel, falls sie stehen bleibt */
}

/* ---------- Kontrastmodus ---------- */
@media (forced-colors:active){
  .hero{background-image:none;background-color:Canvas}
  .tabs{border:1px solid CanvasText}
  .tab[aria-selected="true"]{background:Highlight;color:HighlightText;forced-color-adjust:none}
  .phone .screen::before,.tphone-screen::before{background:CanvasText}
  .device,.tphone{border:1px solid CanvasText}
}

/* ---------- Logoleiste ab 768 px: eine Zeile, Logos über die Breite verteilt (Nora r8); mobil weiter 3 + 2 ---------- */
@media (min-width:768px){
  .hero .referenzen{display:grid;grid-template-columns:repeat(5,auto);justify-content:space-between;column-gap:var(--s-6)}
}

/* ---------- H1 und Lead wie Reonic (Inhaber 19.10.2026): kräftige H1, Wort im Orange-Verlauf, Lead in zwei Zeilen ----------
   Verlauf aus den dunkelsten Stufen der Familie Glut (logo-final/README.md „H1-Textverlauf“): Hellorange → Orange → Koralle, oklab.
   Kontrast unter 3 : 1 an der hellen Stufe ist Inhaber-Entscheidung (Liste „vor Veröffentlichung“). */
.hero h1{font:var(--t-display);letter-spacing:-.025em;max-width:none}   /* Token = genutzter Wert (Vera) */
.hero h1 .hl{background:linear-gradient(in oklab 90deg,var(--c-glut-hellorange) 0%,var(--c-orange) 55%,var(--c-glut-koralle) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.hero-lead{font:400 1.0625rem/1.625rem var(--font);max-width:48rem;text-wrap:balance}
@media (max-width:767px){
  .hero h1{font-size:min(2.125rem,calc((100vw - 40px) / 10.9));line-height:1.12;line-height:round(1.12em,1px)}   /* „Das KI-Betriebssystem“ = 10,73 × Schriftgröße breit (gemessen): bleibt bis 320 px einzeilig */
}
@media (forced-colors:active){
  .hero h1 .hl{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText}
}

/* =====================================================================================================
   Referenzen (19.10.2026): Übersicht mit Karten (Aufbau nach Reonic, Texte eigen) und Einzelgeschichten aus einer Vorlage
   ===================================================================================================== */
/* Kennzahlen als nackte Werte: Wert groß, Bezeichnung darunter, keine Kacheln, keine Animation */
.kennzahlen{display:flex;flex-wrap:wrap;gap:var(--s-6) var(--s-12);margin-top:var(--s-8)}
.kennzahlen li{display:flex;flex-direction:column;gap:var(--s-1);min-width:0}
.kennzahlen strong{font:700 1.75rem/2.25rem var(--font);letter-spacing:-.02em;color:var(--c-navy)}
.kennzahlen span{font:var(--t-small);color:var(--c-text-2);hyphens:auto;overflow-wrap:break-word}   /* schmale 2×2-Spalten bei 320 px */
.kennzahlen-klein{gap:var(--s-4) var(--s-8);margin-top:var(--s-5)}
.kennzahlen-klein strong{font:700 1.25rem/1.75rem var(--font)}

/* Übersicht: zwei große Karten, drei darunter; je Reihe gleich hoch, Link am Kartenboden */
.ref-karten{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s-12) var(--s-8)}
.ref-karte{grid-column:span 2;display:flex;flex-direction:column}
.ref-karte-gross{grid-column:span 3}
.ref-karte .h3-l{margin-top:var(--s-6)}
.ref-karte > p{color:var(--c-text-2);margin-top:var(--s-3)}
.ref-bild{position:relative;border-radius:var(--r-lg);overflow:hidden;border:var(--border);background:var(--c-surface);aspect-ratio:16/10}
.ref-bild > img{width:100%;height:100%;object-fit:cover}
.ref-karte .more{margin-top:auto;padding-top:var(--s-6)}

/* Kurzgeschichten: Bild links (16:9, Logo im Bild), Text rechts */
.geschichte-logo{display:block;width:auto;height:var(--h);margin-bottom:var(--s-6)}
.kurz-raster{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--s-14);align-items:center}   /* Nora r9: Bild breiter und mittig zur Textspalte, keine Leerfläche unter dem Bild */
.kurz-bild{border-radius:var(--r-lg);overflow:hidden;border:var(--border);background:var(--c-surface)}
.kurz-bild img{display:block;width:100%;object-fit:cover}
.kurz-inhalt .kurz-text{margin-top:var(--s-5)}
.kurz-text{font:var(--t-lead);color:var(--c-text-2)}
.kurzprofil-h{font:600 .9375rem/1.3125rem var(--font);color:var(--c-navy);margin-top:var(--s-8)}
.blick{display:grid;gap:var(--s-3);margin-top:var(--s-4)}
.blick li{display:flex;gap:var(--s-3);min-width:0;font:var(--t-body);color:var(--c-navy)}   /* min-width:0: Punkt darf nie breiter werden als seine Spalte (mobil 429 statt 390 px gemessen) */
.blick li > .i{width:20px;height:20px;margin-top:3px;color:var(--c-orange-ink)}

/* Zitat: linker Akzent (Orange als Grafik, nicht als Schrift) */
.zitat{margin-top:var(--s-8);padding-left:var(--s-6);border-left:3px solid var(--c-orange)}
.zitat blockquote{margin:0}
.zitat blockquote p{font:600 1.25rem/1.875rem var(--font);color:var(--c-navy);text-wrap:pretty}
.zitat figcaption{font:var(--t-small);color:var(--c-text-2);margin-top:var(--s-3)}

/* Einzelgeschichte: Hero zweispaltig, linksbündig; H1 kleiner als auf der Startseite */
.hero-geschichte{text-align:left}
.geschichte-hero{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--s-14);align-items:center}
.hero-geschichte h1{font:var(--t-display-unter);letter-spacing:-.02em;max-width:none}
.hero-geschichte .hero-lead{margin-top:var(--s-5);max-width:none;text-wrap:pretty}
.geschichte-hero-text .kennzahlen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6) var(--s-14)}   /* Nora r10 K1: max-content brach bei 1024 px 131 px aus der Spalte aus */   /* vier Werte passen nicht in eine Zeile der Textspalte: bewusst 2 × 2 statt 3 + 1 */
.geschichte-bild{border-radius:var(--r-lg);overflow:hidden;border:var(--border);box-shadow:var(--dev-schatten);aspect-ratio:16/9;background:var(--c-white)}   /* Hero 16:9 (Lenas Mockups) */
.geschichte-bild img,.geschichte-zwischenbild img{display:block;width:100%;height:100%;object-fit:cover}
.geschichte-zwischenbild{margin-top:var(--s-8);border-radius:var(--r-md);overflow:hidden;border:var(--border);aspect-ratio:16/10}
.geschichte{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s-14);align-items:start;padding-top:var(--section-y)}
.kurzprofil{position:sticky;top:calc(var(--nav-h) + 24px);padding:var(--s-6);border:var(--border);border-radius:var(--r-lg);background:var(--c-surface)}
.kurzprofil > .kurzprofil-h:first-child{margin-top:0}
.inhalt{margin-top:var(--s-8);padding-top:var(--s-6);border-top:var(--border)}
.inhalt .kurzprofil-h{margin-top:0}
.kurzprofil dl{display:grid;gap:var(--s-4);margin:var(--s-4) 0 0}
.kurzprofil dt{font:var(--t-ui);color:var(--c-text-2)}
.kurzprofil dd{margin:var(--s-1) 0 0;font:var(--t-small);color:var(--c-navy)}
.kurzprofil dd ul{display:grid;gap:var(--s-1)}
.inhalt ol{display:grid;gap:var(--s-2);margin-top:var(--s-3);list-style:none;padding:0}
.inhalt a{font:var(--t-small);color:var(--c-navy);text-underline-offset:3px}
.geschichte-text > section + section{margin-top:var(--s-16)}
.geschichte-text p{font:var(--t-lead);color:var(--c-text-2);margin-top:var(--s-5);max-width:var(--measure-lead)}
.geschichte-text .zitat blockquote p{margin-top:0;color:var(--c-navy);font:600 1.25rem/1.875rem var(--font)}
.geschichte-h3{margin-top:var(--s-10)}
.geschichte-text .h2 + .geschichte-h3{margin-top:var(--s-6)}
.geschichte-text .blick{margin-top:var(--s-5)}
.kennzahlen-abschnitt{margin-top:var(--s-6)}
/* Zitat-Entwurf: gestrichelter Akzent, Beschriftung sagt „Entwurf“ (K-R16) */
.zitat-entwurf{border-left-style:dashed}
/* Zeitleiste: waagerecht ab 768 px, Punkte auf einer Linie; darunter senkrecht */
.zeitleiste{margin-top:var(--s-8)}
.zeitleiste ol{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-5);list-style:none;padding:0;margin:0;position:relative}
.zeitleiste ol::before{content:"";position:absolute;left:0;right:0;top:5px;border-top:2px solid var(--c-divider)}
.zeitleiste li{position:relative;display:flex;flex-direction:column;gap:var(--s-1);padding-top:var(--s-6)}
.zeitleiste li::before{content:"";position:absolute;left:0;top:0;width:12px;height:12px;border-radius:50%;background:var(--c-orange)}
.zeit-jahr{font:700 1.125rem/1.625rem var(--font);color:var(--c-navy)}
.zeit-text{font:var(--t-small);color:var(--c-text-2);overflow-wrap:anywhere}   /* Netz: nie über die schmale Spalte hinaus */
.zeitleiste figcaption{font:var(--t-small);color:var(--c-text-2);margin-top:var(--s-5);max-width:var(--measure-lead)}
/* Standorte: Liste mit Ortsmarke (Platzhalter für Lenas Standortkarte) */
.standorte{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--s-3) var(--s-6);margin-top:var(--s-6)}
.standorte li{display:flex;align-items:flex-start;gap:var(--s-2);font:var(--t-body);color:var(--c-navy)}
.standorte li > .i{flex:none;width:20px;height:20px;margin-top:3px;color:var(--c-orange-ink)}
/* Abschluss der Übersicht: zwei Icons links vom Text */
.gemeinsam{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-8);align-items:start;max-width:880px}
.gemeinsam-icons{display:grid;gap:var(--s-3)}
.gemeinsam-icons span{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--r-md);background:var(--c-surface);border:var(--border)}
.gemeinsam-icons .i{width:24px;height:24px;color:var(--c-orange-ink)}
.gemeinsam .lead{margin-top:var(--s-4)}

@media (max-width:1023px){
  .ref-karten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ref-karte,.ref-karte-gross{grid-column:span 1}
  .geschichte-hero,.geschichte,.kurz-raster{grid-template-columns:1fr;gap:var(--s-10)}
  .kurzprofil{position:static}
}
@media (max-width:767px){
  .ref-karten{grid-template-columns:1fr}
  .hero-geschichte h1,.hero-produkt h1{font:700 1.75rem/2.25rem var(--font);hyphens:auto;overflow-wrap:break-word}   /* lange Wörter wie „Wachstumschampions“ sprengen bei 320 px sonst die Zeile */
  .kennzahlen strong{font:700 1.375rem/1.875rem var(--font)}
  .zitat blockquote p,.geschichte-text .zitat blockquote p{font:600 1.125rem/1.75rem var(--font)}
  .geschichte-hero-text .kennzahlen{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5) var(--s-6)}
  .zeitleiste ol{grid-template-columns:1fr;gap:var(--s-5);padding-left:var(--s-6)}
  .zeitleiste ol::before{left:5px;right:auto;top:6px;bottom:6px;border-top:0;border-left:2px solid var(--c-divider)}
  .zeitleiste li{padding-top:0}
  .zeitleiste li::before{left:calc(-1 * var(--s-6));top:7px}
  .gemeinsam{grid-template-columns:1fr;gap:var(--s-5)}
  .gemeinsam-icons{grid-auto-flow:column;justify-content:start}
}

/* Ganze Pixel auch für die Bildrahmen der Referenzen: Höhe aus Rahmenbreite × Seitenverhältnis, gerundet (sonst Subpixel bis zum Footer) */
.ref-bild,.geschichte-bild,.geschichte-zwischenbild,.kurz-bild{container-type:inline-size;aspect-ratio:auto}
.ref-bild > img,.geschichte-zwischenbild img{height:calc(100cqw * 10 / 16);height:round(nearest,100cqw * 10 / 16,1px)}
.geschichte-bild img,.kurz-bild img{height:calc(100cqw * 9 / 16);height:round(nearest,100cqw * 9 / 16,1px)}

/* Kennzahlen im zentrierten Hero (Über uns) */
.hero .kennzahlen-hero{justify-content:center;margin-top:var(--s-10)}
@media (max-width:767px){ .hero .kennzahlen-hero{justify-content:flex-start;gap:var(--s-5) var(--s-8)} }


/* =====================================================================================================
   Produktseiten Welle 1 (19.10.2026): produkte/<slug>.html aus einer Vorlage (produkte.py, produkt.src.html)
   ===================================================================================================== */
/* Kopf: linksbündig, Text links, Bild rechts; H1 mit Orange-Wort wie die Startseite, kleiner gesetzt */
.hero-produkt{text-align:left}
.produkt-hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-14);align-items:center}
.hero-produkt h1{font:var(--t-display-unter);letter-spacing:-.02em;max-width:none;margin-top:var(--s-5)}
.hero-produkt .hero-lead{margin-top:var(--s-5);max-width:none;text-wrap:pretty}
.haken{margin-top:var(--s-6)}
.produkt-hero-text > .btn{margin-top:var(--s-8)}
/* Brotkrume: normale Schrift und Textfarbe, Trenner „›“, keine Versalien, keine Pille */
.krume ol{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-2);list-style:none;padding:0;margin:0;font:var(--t-small);color:var(--c-text-2)}
.krume li + li::before{content:"›";margin-right:var(--s-2);color:var(--c-text-2)}
.krume a{color:var(--c-text-2);text-underline-offset:3px}
.krume a:hover{color:var(--c-navy)}
.krume [aria-current="page"]{color:var(--c-navy)}

/* Bilder: Desktop-Aufnahme im Rahmen, Telefon wie in „Kommunikation“; Höhe ganzzahlig aus dem gemessenen Seitenverhältnis */
.p-bild{margin:0}
.p-rahmen{container-type:inline-size;border-radius:var(--r-lg);overflow:hidden;border:var(--border);background:var(--c-white);box-shadow:var(--dev-schatten)}
.p-rahmen img{display:block;width:100%;height:calc(100cqw * var(--v));height:round(nearest,100cqw * var(--v),1px);object-fit:cover}
.p-bild-telefon{display:flex;flex-direction:column;align-items:center}
.tphone.p-phone{position:static;width:260px;height:auto;margin:0;transform:none;padding:6px;border-radius:36px}
.tphone.p-phone .tphone-screen{height:calc(100cqw * 844 / 390);height:round(nearest,100cqw * 844 / 390,1px);border-radius:30px;padding-top:0}
.tphone.p-phone .tphone-screen::before{display:none}   /* die Aufnahme bringt die Statusleiste selbst mit */
.p-bild .note{margin-top:var(--s-3)}

/* Abschnitte: Text und Medien nebeneinander, abwechselnd gespiegelt; ohne Medien eine Spalte, Funktionen zweispaltig */
.p-raster{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--s-14);align-items:start}   /* 6:6, damit Abschnittstexte bei 1440 px in 3 Zeilen bleiben (Δ kurz) */
.p-gespiegelt .p-text{order:2}
.p-ohne-medien .p-raster{grid-template-columns:minmax(0,1fr)}
.p-nur-karte .p-raster,.p-nur-karte.p-gespiegelt .p-raster{grid-template-columns:minmax(0,6fr) minmax(0,6fr);align-items:center}   /* nur Ablaufkarte: mittig neben dem Text, keine Leerfläche */
.p-ohne-medien .p-text{max-width:880px}
.p-ohne-medien .blick{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-10)}
.p-icon{display:grid;place-items:center;width:48px;height:48px;margin-bottom:var(--s-5);border-radius:var(--r-md);background:var(--c-surface);border:var(--border)}
.p-icon .i{width:24px;height:24px;color:var(--c-orange-ink)}
.p-medien{display:grid;gap:var(--s-6)}

/* Überblick: ruhige Liste, Icon + Titel + eine Zeile, keine Rahmen */
.p-liste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-8) var(--s-10);margin-top:var(--s-10)}
.p-liste li{display:flex;gap:var(--s-4)}
.p-liste li > .i{flex:none;width:24px;height:24px;margin-top:2px;color:var(--c-orange-ink)}
.p-liste p{font:var(--t-body);color:var(--c-text-2);margin-top:var(--s-2)}

/* Ablaufkarte „Wenn · dann · Ergebnis“ (KI-Agenten) */
.ablauf{display:grid;border:var(--border);border-radius:var(--r-lg);background:var(--c-white)}
.ablauf-z{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--s-4);padding:var(--s-4) var(--s-5)}
.ablauf-z + .ablauf-z{border-top:var(--border)}
.ablauf-k{font:600 .875rem/1.5rem var(--font);color:var(--c-orange-ink)}
.ablauf-t{font:var(--t-body);color:var(--c-navy)}

/* HTML-Visuals */
.fig{margin:0}
.fig-routing{display:grid;gap:var(--s-3)}
.fig-routing li{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--s-3)}
.fig-von,.fig-an{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-3) var(--s-4);border:var(--border);border-radius:var(--r-md);font:var(--t-body);color:var(--c-navy);background:var(--c-white)}
.fig-an{background:var(--c-surface)}
.fig-von,.fig-an{min-width:0;hyphens:auto;overflow-wrap:break-word}   /* „Finanzierungsberater“ ragte bei 1024 px 4,7 px aus dem Kästchen (Sweep Etappe 18) */
.fig-an .i,.fig-pfeil{width:20px;height:20px;flex:none;color:var(--c-orange-ink)}
.fig-treppe{padding:var(--s-5);border:var(--border);border-radius:var(--r-lg);background:var(--c-white)}
.treppe{position:relative;display:grid;grid-template-columns:repeat(4,1fr);align-items:end;gap:var(--s-3);height:120px;border-bottom:var(--border)}
.treppe span{height:var(--h);border-radius:var(--r-sm) var(--r-sm) 0 0;background:var(--c-surface);border-top:3px solid var(--c-orange)}
.treppe-grenze{position:absolute;left:0;right:0;bottom:calc(var(--grenze) - 3px);border-top:2px dashed var(--c-navy)}   /* liegt genau auf der letzten Stufe: darunter senkt kein Agent */
.fig-treppe figcaption{font:var(--t-small);color:var(--c-navy);margin-top:var(--s-3)}
.fig-quelle{padding:var(--s-5);border:var(--border);border-radius:var(--r-lg);background:var(--c-white)}
.quelle-mitte{display:flex;align-items:center;gap:var(--s-3);font:600 1rem/1.5rem var(--font);color:var(--c-navy)}
.quelle-mitte .i{width:24px;height:24px;color:var(--c-orange-ink)}
.quelle-kanaele{display:grid;grid-template-columns:repeat(5,auto);justify-content:space-between;gap:var(--s-2);margin-top:var(--s-5);padding-top:var(--s-5);border-top:2px solid var(--c-divider)}
.quelle-kanaele li{display:flex;flex-direction:column;align-items:center;gap:var(--s-1);font:var(--t-small);color:var(--c-navy);text-align:center}
.quelle-kanaele .i{width:20px;height:20px;color:var(--c-orange-ink)}

/* ---------- Produktseiten Welle 2 (Etappe 19): Kundenreise, Funktionstabelle, Modulkarte, Vorher/Nachher, Figuren ---------- */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* Kundenreise: Schrittleiste wie #ablauf der Startseite; der Titel verweist auf den Abschnitt */
.p-kennz{margin-top:var(--s-3)}
.p-reise-liste{margin-top:var(--s-10)}
.p-reise-liste .h3 a{display:inline-flex;align-items:center;gap:6px;color:inherit;text-decoration:none}
.p-reise-liste .h3 a .i{width:18px;height:18px;flex:none;color:var(--c-orange-ink)}
.p-reise-liste .h3 a:hover{text-decoration:underline;text-decoration-color:var(--c-orange-ink);text-underline-offset:4px}
.p-reise + .p-abschnitt,.p-reise .more{margin-top:0}
/* Funktionstabelle: echte Tabelle, Kopfzeile und erste Spalte als th */
.ftab-rahmen{margin-top:var(--s-8);border:var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--c-white);max-width:880px}
.ftab{width:100%;border-collapse:collapse;font:var(--t-body);color:var(--c-navy)}
.ftab th,.ftab td{padding:var(--s-3) var(--s-5);text-align:left;vertical-align:top}
.ftab thead th{font:600 .875rem/1.25rem var(--font);background:var(--c-surface);border-bottom:var(--border)}
.ftab tbody tr + tr th,.ftab tbody tr + tr td{border-top:var(--border)}
.ftab tbody th{font-weight:500}
.ftab td{color:var(--c-text-2)}
.ftab .ja{color:var(--c-orange-ink);font-weight:700}
.p-tabelle .note{margin-top:var(--s-4)}
/* Modulkarte: acht Bereiche, Module aufklappbar */
.mkarte{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-5);margin-top:var(--s-10)}
.mk{padding:var(--s-6);border:var(--border);border-radius:var(--r-md);background:var(--c-white)}
.mk p{font:var(--t-small);color:var(--c-text-2);margin-top:var(--s-3)}
.mk-module{margin-top:var(--s-4);border-top:var(--border)}
.mk-module summary{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);min-height:44px;cursor:pointer;list-style:none;font:600 .875rem/1.25rem var(--font);color:var(--c-navy)}
.mk-module summary::-webkit-details-marker{display:none}
.mk-module summary:focus-visible{outline:2px solid transparent;box-shadow:var(--focus);border-radius:var(--r-xs)}
.mk-module[open] .faq-chev{transform:rotate(180deg)}
.mk-module ul{display:grid;gap:var(--s-1);padding-bottom:var(--s-2);font:var(--t-small);color:var(--c-text-2)}
.mk-verweise{display:grid;gap:0;margin-top:auto}
.mk-verweise .more{padding-top:var(--s-3)}
/* Vorher/Nachher im Kopf (AutoStudio) */
.p-paar-bilder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
.p-paar-teil{position:relative;border-radius:var(--r-md);overflow:hidden;border:var(--border);background:var(--c-surface)}
.p-paar-teil img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.p-paar-marke{position:absolute;left:var(--s-3);top:var(--s-3);padding:2px 10px;border-radius:var(--r-pill);background:var(--c-white);font:600 .75rem/1.25rem var(--font);color:var(--c-navy)}
/* Betriebssystem #fahrzeug: Schrittleiste; #ki: Kacheln mit Verweis */
.weg{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-2);counter-reset:weg}
.weg li{display:flex;flex-direction:column;align-items:center;gap:var(--s-2);padding:var(--s-4) var(--s-2);border:var(--border);border-radius:var(--r-md);background:var(--c-white);font:var(--t-small);color:var(--c-navy);text-align:center;min-width:0;overflow-wrap:anywhere}
.weg .i{width:22px;height:22px;color:var(--c-orange-ink)}
.fig-weg .note{margin-top:var(--s-3)}
.fig-kacheln{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
.fig-kacheln a{display:flex;align-items:center;gap:var(--s-3);min-height:56px;padding:var(--s-4);border:var(--border);border-radius:var(--r-md);background:var(--c-white);font:600 1rem/1.5rem var(--font);color:var(--c-navy);text-decoration:none}
.fig-kacheln a:hover{background:var(--c-surface)}
.fig-kacheln .i{width:22px;height:22px;flex:none;color:var(--c-orange-ink)}
.fig-kacheln .kachel-pfeil{margin-left:auto;width:18px;height:18px}
@media (max-width:1199px){ .mkarte{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:767px){
  .mkarte,.fig-kacheln{grid-template-columns:minmax(0,1fr)}
  .weg{grid-template-columns:minmax(0,1fr);gap:var(--s-2)}
  .weg li{flex-direction:row;justify-content:flex-start;text-align:left;padding:var(--s-3) var(--s-4)}
  .ftab th,.ftab td{padding:var(--s-3)}
}
@media (forced-colors:active){ .p-paar-marke,.mk,.weg li,.fig-kacheln a{border:1px solid CanvasText} }
/* ---------- Etappe 20: Dickreich-Bilder (W3b) im neutralen Rahmen „Titan hell“ (Vera), Callouts, Karten ---------- */
.dr-rahmen{padding:8px;border-radius:var(--r-lg);background:var(--dev-rahmen);box-shadow:var(--dev-kante),var(--dev-schatten)}
.dr-rahmen .browser-bar{height:24px;border-radius:12px 12px 0 0;border:0;background:var(--c-white)}
.dr-rahmen .cm-flaeche{border-radius:0 0 12px 12px;overflow:hidden}
.cm-flaeche{position:relative;container-type:inline-size;background:var(--c-white)}
.cm-flaeche img{display:block;width:100%;height:auto}
.cm{position:absolute;display:grid;place-items:center;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:var(--c-navy);color:var(--c-white);font:700 .75rem/1 var(--font);box-shadow:0 0 0 2px var(--c-white),0 2px 6px rgb(17 20 42 / .25)}   /* Navy, weiße Ziffer: kein Orange neben Dickreich-Rot */
.cm-liste{display:grid;gap:var(--s-2);margin-top:var(--s-4);counter-reset:cm;font:var(--t-small);color:var(--c-text-2)}
.cm-liste li{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:var(--s-3);align-items:start;counter-increment:cm}
.cm-liste li::before{content:counter(cm);display:grid;place-items:center;width:22px;height:22px;margin-top:-1px;border-radius:50%;background:var(--c-navy);color:var(--c-white);font:700 .75rem/1 var(--font)}
.cm-liste strong{color:var(--c-navy);font-weight:600}
.p-callout .note{margin-top:var(--s-3)}
.dr-karte{position:relative;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--c-divider);box-shadow:0 1px 2px rgb(17 20 42 / .06),0 12px 32px -8px rgb(17 20 42 / .16);background:var(--c-white)}
.dr-karte img{display:block;width:100%;height:auto}
.p-social-raster{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--s-5);align-items:start}
.p-social-spalte{display:grid;gap:var(--s-5);justify-items:center}
.p-social-klein{width:100%}
.tphone.p-phone.p-social-tel{width:min(100%,170px);padding:5px;border-radius:26px}
.tphone.p-phone.p-social-tel .tphone-screen{height:auto;aspect-ratio:9/16;border-radius:21px;padding-top:0}
.p-social-tel .tphone-screen img{width:100%;height:100%;object-fit:cover}
/* Kundenreise: Ausschnitte als gleich breite Karten, ohne Gerät (Vera 5) */
.reise-bild{margin:0 0 var(--s-4)}
.reise-rahmen{position:relative;aspect-ratio:4/3;border-radius:var(--r-md);border:1px solid var(--c-divider);background:var(--c-white);overflow:hidden}
.reise-rahmen img{position:absolute;inset:var(--s-3);width:calc(100% - 2 * var(--s-3));height:calc(100% - 2 * var(--s-3));object-fit:contain}   /* gleich hohe Karten, Ausschnitt ganz sichtbar */
.reise-bild .note{margin-top:var(--s-2)}
@media (max-width:767px){ .p-social-raster{grid-template-columns:minmax(0,1fr)} .p-social-spalte{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start} }

/* ---------- Animation „Das Haus füllt sich“ (W3 §3, gedaechtnis.py): Endbild ohne Klassen, Bewegung nur mit .ani-bereit/.ani-los ---------- */
.ani{margin:0}
.ani-svg{display:block;width:100%;height:auto;font-family:var(--font);overflow:visible}   /* 1.4.12: gesperrte Schrift darf über die Fläche hinaus, statt abgeschnitten zu werden (Mila e20 W2) */
.ani-mobil{display:none}
@media (max-width:767px){ .ani-breit{display:none} .ani-mobil{display:block;max-width:400px;margin-inline:auto} }
.ani-svg path,.ani-svg rect{fill:none;stroke:var(--c-navy);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
/* Schrift in Einheiten der Zeichenfläche; gerendert ≥ 11 px bei jeder Breite (Nora e20 H1), geprüft mit Schriftgröße × Skalierung */
.ani-svg text{fill:var(--c-navy);font-size:14px}
.ani-svg .ani-label{font-size:15px;font-weight:600}
.ani-svg .ani-wort{font-size:14px;fill:var(--c-text-2)}
.ani-svg .ani-klein{font-size:14px;fill:var(--c-text-2)}
.ani-svg .ani-etikett{font-size:13px;font-weight:700;letter-spacing:.04em}
.ani-svg .ani-gross{font-size:17px;fill:var(--c-text-2)}
.ani-still-getrennt .ani-svg .ani-klein{font-size:15px}
.ani-svg .ani-scheibe{fill:rgb(17 20 42 / .12)}
.ani-svg .ani-rahmen{fill:var(--c-white)}
.ani-svg .ani-karte{fill:var(--c-surface);stroke:var(--c-divider)}
.ani-svg .ani-licht{fill:var(--c-orange);stroke:none}
.ani-svg .ani-punkt,.ani-svg .ani-pfeilspitze{fill:var(--c-navy);stroke:none}
.ani-svg .ani-nachbar .ani-linie{stroke:var(--c-text-2);stroke-dasharray:5 4}   /* gedimmt per Strichelung, Kontrast 7:1 (Mila e20 W3) */
.ani-svg .ani-trenn{stroke:var(--c-text-2);stroke-dasharray:2 6}
.ani-svg .ani-schloss{fill:none;stroke:var(--c-navy);stroke-width:1.75}
.ani-lernt{width:100%;max-width:480px;margin-inline:auto}   /* Nora e20 M4 */
.ani-still{width:100%;max-width:440px;margin-inline:auto}
.ani-svg .ani-frage{opacity:0}
.ani-bereit .ani-t{opacity:0}
.ani-bereit .ani-fundament,.ani-bereit .ani-haus,.ani-bereit .ani-fenster{opacity:1}
.ani-bereit .ani-zug{stroke-dasharray:1;stroke-dashoffset:1}
.ani-bereit .ani-fenster .ani-scheibe{fill:transparent}
.ani-bereit .ani-fenster .ani-licht{opacity:0}
.ani-bereit .ani-dach{transform:translateY(50px)}
.ani-los .ani-t{animation:ani-ein var(--l) ease-out var(--d) both}
.ani-los .ani-fundament,.ani-los .ani-haus,.ani-los .ani-fenster{animation:none}
.ani-los .ani-zug{animation:ani-zug var(--l) ease-in-out var(--d) both}
.ani-los .ani-fenster .ani-scheibe{animation:ani-hell var(--l) ease-out var(--d) both}
.ani-los .ani-fenster .ani-licht{animation:ani-ein var(--l) ease-out var(--d) both}
.ani-los .ani-blase{animation-name:ani-auf}
.ani-los .ani-dach{animation:ani-dach .6s ease-in-out .7s both}
.ani-los .ani-frage{animation:ani-flug .8s ease-in 0s both}
.ani-pause *{animation-play-state:paused !important}
@media (forced-colors:active){   /* Mila e20 H1: Strich, Schrift und Marken in Systemfarben */
  .ani-svg path,.ani-svg rect,.ani-svg .ani-schloss{stroke:CanvasText}
  .ani-svg text{fill:CanvasText}
  .ani-svg .ani-scheibe{fill:Canvas}
  .ani-svg .ani-rahmen,.ani-svg .ani-karte{fill:Canvas}
  .ani-svg .ani-licht,.ani-svg .ani-punkt,.ani-svg .ani-pfeilspitze{fill:CanvasText}
  .cm,.cm-liste li::before{forced-color-adjust:none;background:CanvasText;color:Canvas;box-shadow:0 0 0 2px Canvas}
  .vgl-karte,.vgl-frage,.vgl-chip{border:1px solid CanvasText}
}
@keyframes ani-ein{from{opacity:0}to{opacity:1}}
@keyframes ani-auf{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes ani-zug{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes ani-hell{from{fill:transparent}to{fill:rgb(17 20 42 / .12)}}
@keyframes ani-dach{from{transform:translateY(50px)}to{transform:none}}
@keyframes ani-flug{0%{opacity:1;transform:translate(150px,-85px)}85%{opacity:1;transform:none}100%{opacity:0;transform:none}}
/* Startseite #betriebsgedaechtnis: Text links, Animation rechts */
.bg-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-14);align-items:center}
.bg-grid .kom-punkte{margin-top:var(--s-8)}
@media (min-width:1024px) and (max-width:1279px){ .bg-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr)} }   /* Animation breiter, Schrift ≥ 11 px (Nora e20 H1) */
@media (max-width:1023px){ .bg-grid{grid-template-columns:minmax(0,1fr);gap:var(--s-10)} }
@media (max-width:479px){   /* Funktionstabelle bei 320–390 px: „Kramer (öffentlich)“ ragte aus der Spalte (Schlusslauf Etappe 19) */
  .ftab{font-size:.875rem;line-height:1.25rem}
  .ftab th,.ftab td{padding:var(--s-3) var(--s-2)}
  .ftab th:first-child,.ftab td:first-child{padding-left:var(--s-3)}
  .ftab th,.ftab td{overflow-wrap:anywhere;hyphens:auto}
}
.fig-alarm{display:flex;gap:var(--s-4);align-items:flex-start;padding:var(--s-4) var(--s-5);border:var(--border);border-left:3px solid var(--c-orange);border-radius:var(--r-lg);background:var(--c-white)}
.fig-alarm > .i{flex:none;width:24px;height:24px;color:var(--c-orange-ink)}
.fig-alarm strong{display:block;font:600 1rem/1.5rem var(--font);color:var(--c-navy)}
.fig-alarm span{font:var(--t-small);color:var(--c-text-2)}
.fig-schema{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
.fig-schema li{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4);border:var(--border);border-radius:var(--r-md);font:var(--t-body);color:var(--c-navy);background:var(--c-white)}
.fig-schema .i{width:22px;height:22px;color:var(--c-orange-ink)}

/* Telefon-KI Kopf: Anruf als HTML-Szene; Zeilen erscheinen einmal nacheinander, reduced-motion: Endzustand */
.caro{margin:0;padding:var(--s-6);border:var(--border);border-radius:var(--r-xl);background:var(--c-white);box-shadow:var(--dev-schatten)}
.caro-kopf{display:flex;align-items:center;gap:var(--s-3);font:600 .9375rem/1.375rem var(--font);color:var(--c-navy)}
.caro-kopf .i{width:22px;height:22px;color:var(--c-orange-ink)}
.caro-verlauf{display:grid;gap:var(--s-3);list-style:none;padding:0;margin:var(--s-5) 0 0}
.caro-verlauf li{max-width:85%;padding:var(--s-3) var(--s-4);border-radius:var(--r-lg);font:var(--t-body);color:var(--c-navy);background:var(--c-surface)}
.caro-verlauf .caro-caro{justify-self:end;background:var(--c-navy);color:var(--c-white)}
.caro-wer{display:block;font:600 .75rem/1rem var(--font);margin-bottom:var(--s-1);color:inherit;opacity:.8}
.caro-ende{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-5);padding:var(--s-4);border:var(--border);border-left:3px solid var(--c-orange);border-radius:var(--r-md);font:var(--t-body);color:var(--c-navy)}
.caro-ende .i{flex:none;width:22px;height:22px;color:var(--c-orange-ink)}
.caro .note{margin-top:var(--s-4)}
@media (prefers-reduced-motion:no-preference){
  .caro-verlauf li,.caro-ende{animation:caro-ein .45s ease both}
  .caro-verlauf li:nth-child(1){animation-delay:.3s}
  .caro-verlauf li:nth-child(2){animation-delay:1.2s}
  .caro-verlauf li:nth-child(3){animation-delay:2.1s}
  .caro-ende{animation-delay:3s}
}
@keyframes caro-ein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Zusammen mit den anderen Modulen */
.p-zusammen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-8);margin-top:var(--s-10)}
.p-zusammen li{padding-top:var(--s-5);border-top:2px solid var(--c-orange)}
.p-zusammen a{display:inline-flex;align-items:center;gap:var(--s-2);color:var(--c-navy);text-decoration:none}
.p-zusammen a:hover{text-decoration:underline;text-underline-offset:3px}
.p-zusammen a .i{width:18px;height:18px}
.p-zusammen p{font:var(--t-body);color:var(--c-text-2);margin-top:var(--s-3)}

/* FAQ als <details>: Tastatur und Screenreader nativ */
.p-faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s-14);align-items:start}
.faq{border-top:var(--border)}
.faq:last-child{border-bottom:var(--border)}
.faq summary{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-4);padding:var(--s-5) 0;cursor:pointer;list-style:none;font:600 1.0625rem/1.625rem var(--font);color:var(--c-navy)}
.faq summary::-webkit-details-marker{display:none}
.faq-q{min-width:0}   /* eine Flex-Zelle für die ganze Frage, Nora r11 F1 */
.faq-chev{flex:none;width:20px;height:20px;margin-top:3px;color:var(--c-navy);transition:transform .2s}
.faq[open] .faq-chev{transform:rotate(180deg)}
.faq p{font:var(--t-body);color:var(--c-text-2);padding-bottom:var(--s-5);max-width:var(--measure-lead)}

/* Einblenden beim Scrollen: nur mit Skript und ohne reduced-motion (site.js setzt .js-einblenden), sonst sofort sichtbar */
@media (prefers-reduced-motion:no-preference){
  .js-einblenden [data-einblenden] > .p-raster{transition:opacity .6s ease,transform .6s ease}
  .js-einblenden [data-einblenden]:not(.ist-sichtbar) > .p-raster{opacity:0;transform:translateY(24px)}
  .js-einblenden .treppe span{transition:height .5s ease}
  .js-einblenden .treppe span:nth-child(2){transition-delay:.15s}
  .js-einblenden .treppe span:nth-child(3){transition-delay:.3s}
  .js-einblenden .treppe span:nth-child(4){transition-delay:.45s}
  .js-einblenden .fig-treppe:not(.ist-sichtbar) .treppe span{height:6%}
}

@media (max-width:1023px){
  .produkt-hero,.p-raster,.p-gespiegelt .p-raster,.p-faq{grid-template-columns:minmax(0,1fr);gap:var(--s-10)}
  .p-nur-karte .p-raster,.p-nur-karte.p-gespiegelt .p-raster{grid-template-columns:minmax(0,1fr)}   /* Nora r9: sonst zweispaltig bis 320 px, Text abgeschnitten */
  .p-gespiegelt .p-text{order:0}
  .p-liste,.p-zusammen{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .hero-produkt h1{font:700 1.75rem/2.25rem var(--font)}
  .p-liste,.p-zusammen,.p-ohne-medien .blick,.quelle-kanaele{grid-template-columns:minmax(0,1fr)}
  .quelle-kanaele li{flex-direction:row;text-align:left}
  .fig-routing li{grid-template-columns:minmax(0,1fr)}
  .fig-pfeil{transform:rotate(90deg);justify-self:start;margin-left:var(--s-4)}
  .fig-schema{grid-template-columns:minmax(0,1fr)}
  .tphone.p-phone{width:220px;padding:5px;border-radius:30px}
  .tphone.p-phone .tphone-screen{border-radius:25px}
  .ablauf-z{grid-template-columns:minmax(0,1fr);gap:var(--s-1)}
}

/* Rechtsseiten (Impressum, Datenschutz, Barrierefreiheit): ruhige Textspalte unter der festen Navigation */
.recht{padding-top:calc(var(--nav-h) + var(--s-16));padding-bottom:var(--section-y)}
.recht-text{max-width:calc(760px + 2 * var(--gutter))}
.recht h1{font:var(--t-display-recht);letter-spacing:-.02em;color:var(--c-navy)}
.recht h2{font:600 1.5rem/2rem var(--font);letter-spacing:var(--ls-tight);color:var(--c-navy);margin-top:var(--s-12)}
.recht h3{font:600 1.0625rem/1.625rem var(--font);color:var(--c-navy);margin-top:var(--s-8)}
.recht p,.recht-liste li{font:var(--t-body);color:var(--c-text-2)}
.recht p{margin-top:var(--s-3)}
.recht .lead{font:var(--t-lead);margin-top:var(--s-5)}
.recht a{color:var(--c-navy);text-underline-offset:3px}
.recht strong{color:var(--c-navy);font-weight:600}
.recht-liste{display:grid;gap:var(--s-2);margin-top:var(--s-3);padding-left:1.25em;list-style:disc}
.recht-stand{margin-top:var(--s-12) !important;font:var(--t-small) !important}
@media (max-width:767px){ .recht h1{font:700 1.75rem/2.25rem var(--font)} }


/* Startseite #ihre-marke: dieselbe Funktion in zwei Kunden-CIs nebeneinander */
.marke-paar{margin-top:var(--s-12)}
.marke-bilder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-8)}
@media (max-width:767px){ .marke-bilder{grid-template-columns:minmax(0,1fr);gap:var(--s-5)} }
.marke-bilder:has(.tphone){grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:var(--s-12)}   /* W4-2: Desktop und Telefon, Rahmen in Bildhöhe (sonst streckt die Zeile den Desktoprahmen auf Telefonhöhe) */
@media (max-width:767px){ .marke-bilder:has(.tphone){grid-template-columns:minmax(0,1fr);row-gap:var(--s-8)} }

/* Nora r9: Bühne bis 959 px einspaltig – Reiter, darunter die Bildunterschrift (bei 768 px überlappten sie um 139 px) */
@media (min-width:768px) and (max-width:959px){
  .stage{grid-template-columns:minmax(0,1fr)}
  .stage .stage-leiste{grid-column:1;grid-row:2;justify-self:start}
  .stage .note{grid-column:1;grid-row:3;justify-self:start;text-align:left}
}

/* Nora r9: Überblick mit vier Einträgen ohne verwaisten vierten – 4 Spalten, darunter 2 × 2, am Telefon einspaltig */
.p-liste.p-liste-vier{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1199px){ .p-liste.p-liste-vier{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:767px){ .p-liste.p-liste-vier{grid-template-columns:minmax(0,1fr)} }

/* Nora r9: Über-uns-Hero mit Collage aus drei Referenz-Mockups (mittig vorn, seitlich versetzt dahinter) */
.uu-collage{position:relative;max-width:1040px;margin:var(--s-14) auto 0;padding-top:64px}   /* Versatz der Seitenbilder als Innenabstand (Außenabstand fiele zusammen) */
.uu-collage .p-rahmen{position:absolute;width:58%}
.uu-collage .uu-mitte{position:relative;margin:0 0 0 21%;z-index:2}   /* im Fluss: die Figur ist so hoch wie Versatz + Bild */
.uu-collage .uu-links{left:0;top:0;width:44%;z-index:1}
.uu-collage .uu-rechts{right:0;top:0;width:44%;z-index:1}
.uu-collage figcaption{text-align:center;margin-top:var(--s-4)}
@media (max-width:767px){
  .uu-collage{margin-top:var(--s-10);padding-top:0}
  .uu-collage .uu-seite{display:none}
  .uu-collage .uu-mitte{margin:0;width:100%}
  .uu-collage figcaption{display:none}   /* mobil nur ein Bild: die Unterschrift mit drei Namen träfe nicht zu */
}


/* Nora r10 K1 (Gegenprobe Dick Automobile): bei 1024–1199 px ist die Textspalte des Geschichten-Kopfs 444–520 px schmal;
   „Wachstumschampions“ in 44 px passte nicht hinein. Eine Stufe kleiner statt Trennung mitten im Wort. */
@media (min-width:1024px) and (max-width:1199px){ .hero-geschichte h1{font-size:2.375rem;line-height:2.875rem} }

/* Nora r10 M3: Zitat-Einleitung gehört zum Zitat – Abstand zum vorigen Absatz größer, zum Zitat kleiner
   (Selektoren überstimmen .geschichte-text p und .kurz-inhalt .kurz-text) */
.geschichte-text p.zitat-einleitung,.kurz-inhalt p.zitat-einleitung{margin-top:var(--s-8)}
.zitat-einleitung + .zitat{margin-top:var(--s-4)}


/* Mila (WCAG 1.4.12, cfec011): mit Nutzer-Textabständen (Zeilenhöhe 1,5, Laufweite .12em, Wortabstand .16em) bei 320–767 px nichts abschneiden */
@media (max-width:767px){
  h1,.h2,.h3-l,.h3,.tile-h,summary,main p,main li > span,.kennzahlen span{overflow-wrap:anywhere;hyphens:auto}
  h1,.h2,.h3-l,.h3,.tile-h,summary,main p,main li > span,.kennzahlen span{hyphenate-limit-chars:12 4 4}   /* keine Trennung kurzer Wörter (Proble-me, Mar-ke, Ih-rer), Nora r11 G-neu-2; gleiche Grenze wie die Trennung darüber */
  .nowrap{hyphens:manual}
  .zitat p{hyphens:manual}   /* große Zitate ohne Trennung („empfeh-len!“), Nora r12 R1 */
  .stage .tabs{flex-wrap:wrap}
  .ws-buehne .note{white-space:normal}   /* Unterschrift darf umbrechen */
}
@media (max-width:479px){   /* vier Reiter: 2 × 2 statt 3 + 1 (nur ohne JS sichtbar, siehe unten) */
  .stage .tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Unter 768 px verdeckt das Hero-Telefon 54–74 % des Tablets (Leitung, Nora r13 M1): keine Reiter, kein Auto-Wechsel, kein
   Cockpit-Scroll; das Tablet zeigt Ebene 1 des Cockpits still. Die Pause am Telefon bleibt für den Chat. site.js setzt dazu .ist-still. */
@media (max-width:767px){
  .stage.ist-still .stage-leiste .tabs{display:none}   /* Pause-Knopf der Leiste bleibt: unter dem Tablet ist sie im Bild, wenn die Telefonecke schon oben herausgescrollt ist (2.2.2) */
  .stage.ist-still .cockpit-fenster{display:none}
}
@media (max-width:419px){   /* nur dort, wo das Icon fehlt: Knopf darf bei großen Textabständen zweizeilig werden statt den Menüknopf zu verdrängen */
  .nav-cta{flex:0 1 auto;min-width:0;white-space:normal;height:auto;min-height:44px;padding-top:4px;padding-bottom:4px;line-height:1.15;text-align:center}
}

/* ---------- Etappe 21 ---------- */
/* Betriebsgedächtnis: Kopf mit breiterem Bild, damit die Animation lesbar bleibt (Nora e20 H1); Website-System: Text bleibt neben hohen Bildern stehen (M6) */
@media (min-width:1024px){
  .produkt-hero.produkt-hero-bild-breit{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .p-klebt .p-raster > .p-text{position:sticky;top:calc(var(--nav-h) + var(--s-8));align-self:start}
}
/* Bild nur breit oder nur mobil (Kunden-App, Nora e20 M8); Telefonrahmen in der Höhe der Aufnahme (--tv = Höhe/Breite) */
.p-nur-mobil{display:none}
@media (max-width:767px){ .p-nur-breit{display:none} .p-nur-mobil{display:block} }
.tphone.p-phone[style*="--tv"] .tphone-screen{height:calc(100cqw * var(--tv));height:round(nearest,100cqw * var(--tv),1px)}
/* #von-der-stange (W3c): Kundenfrage, zwei gleich hohe und gleich gewichtete Karten; mobil untereinander, links zuerst */
.vgl{margin:0;container-type:inline-size}
.vgl-frage{width:fit-content;max-width:min(100%,30em);margin:0 0 var(--s-5) auto;padding:var(--s-3) var(--s-5);border:var(--border);border-radius:var(--r-lg) var(--r-lg) var(--r-xs) var(--r-lg);background:var(--c-surface);font:var(--t-body);color:var(--c-navy)}
.vgl-karten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5)}
@container (max-width:519px){ .vgl-karten{grid-template-columns:minmax(0,1fr)} }
.vgl-karte{display:flex;flex-direction:column;padding:var(--s-5);border:var(--border);border-radius:var(--r-lg);background:var(--c-white)}
.vgl-kopf{font:600 1rem/1.5rem var(--font);color:var(--c-navy)}
.vgl-unter{font:var(--t-small);color:var(--c-text-2)}
.vgl-etikett{font:700 .75rem/1.25rem var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--c-text-2)}
.vgl-antwort{margin-top:var(--s-3);font:var(--t-body);color:var(--c-navy)}
.vgl-chips{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-4)}
.vgl-chip{white-space:nowrap;padding:var(--s-1) var(--s-3);border:1px solid var(--c-line);border-radius:var(--r-pill);font:var(--t-small);color:var(--c-navy)}
.vgl-fuss{margin-top:auto;padding-top:var(--s-4);font:var(--t-small);color:var(--c-text-2)}
/* Callout-Marken auf schmalen Bildern etwas kleiner, damit sie weniger vom Bild verdecken (Nora e20 M3) */
@container (max-width:419px){ .cm{width:20px;height:20px;margin:-10px 0 0 -10px;font-size:.6875rem} }

/* ---------- Etappe 22 (W4): Bausteine der Produktseiten ---------- */
/* Detailzeile unter den Funktionen (#suche): Icon links neben der H3 */
.p-detail{margin-top:var(--s-8);padding:var(--s-5);border:var(--border);border-radius:var(--r-lg);background:var(--c-white)}
.p-detail-h{display:flex;align-items:center;gap:var(--s-3);font:var(--t-h3);color:var(--c-navy)}
.p-detail-h .i{width:22px;height:22px;flex:none;color:var(--c-orange-ink)}
.p-detail > p{margin-top:var(--s-3);font:var(--t-body);color:var(--c-text-2)}
.p-detail .blick{margin-top:var(--s-4)}
/* Volle Breite unter dem Raster: drei Funktionen, Kachelreihe, Schrittleiste */
.p-unten{margin-top:var(--s-12)}
.p-unten > .p-liste{margin-top:0}
.p-unten-h{margin-top:var(--s-12);margin-bottom:var(--s-5)}
.p-unten > .p-liste + .p-unten-h{margin-top:var(--s-12)}
.p-unten .fig-kacheln{grid-template-columns:repeat(4,minmax(0,1fr))}
.p-unten > .steps{margin-top:0}
@media (max-width:1023px){ .p-unten .fig-kacheln{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:479px){ .p-unten .fig-kacheln{grid-template-columns:minmax(0,1fr)} }
/* Caro im Team (#ki): Chat aus den Bausteinen von W3c */
.vgl-chat .vgl-karte{max-width:34em}
.vgl-wer{margin:0 0 var(--s-2) auto;width:fit-content;font:var(--t-small);color:var(--c-text-2)}
.bsp-karten{display:grid;gap:var(--s-2);margin-top:var(--s-4)}
.bsp-karte{padding:var(--s-2) var(--s-3);border:1px solid var(--c-divider);border-radius:var(--r-md);background:var(--c-surface);font:var(--t-small);color:var(--c-navy)}
/* ---------- Etappe 22 (W3d): „Zwei Türen“, „Gleiche Frage, drei Rollen“, Telefon-Ausschnitt ---------- */
.ani-svg .ani-schranke{stroke:var(--c-navy);stroke-width:4}   /* ruhiger Balken, kein Schloss, kein Warnsymbol (W3d §4.2) */
.ani-svg .ani-person{fill:none;stroke:var(--c-navy);stroke-width:1.75}
.ani-svg .ani-strich{stroke-dasharray:3 4}
.ani-svg .ani-fett{font-weight:700;fill:var(--c-navy)}
.ani-tueren{width:100%}
.ani-los .ani-wander{animation:ani-wandern var(--l) ease-in-out var(--d) both}
@keyframes ani-wandern{from{opacity:1;transform:translate(var(--dx),var(--dy))}to{opacity:1;transform:none}}
@media (forced-colors:active){ .ani-svg .ani-person,.ani-svg .ani-schranke{stroke:CanvasText} }
.vgl-drei{grid-template-columns:repeat(3,minmax(0,1fr))}
@container (max-width:719px){ .vgl-drei{grid-template-columns:minmax(0,1fr)} }
.vgl-schmal{display:grid;gap:var(--s-2);margin-top:var(--s-5);padding:var(--s-4) var(--s-5);border:var(--border);border-radius:var(--r-lg);background:var(--c-white);font:var(--t-small);color:var(--c-navy)}
.vgl-schmal .vgl-etikett{margin-right:var(--s-2)}
.vgl-rollen > .vgl-bild > .vgl-fuss{margin-top:var(--s-3)}
.vgl-uebergabe{display:flex;align-items:center;gap:var(--s-2);margin-top:var(--s-4);font:600 .875rem/1.25rem var(--font);color:var(--c-navy)}
.vgl-uebergabe .i{width:18px;height:18px;flex:none;color:var(--c-orange-ink)}
/* Schrittleisten (Startseite #ablauf, Kundenreise, OS #einrichtung): Nummer und Icon links in der Zeile der H3 (Regel „Icons neben Überschriften“, Bea) */
.steps:not(.steps-icon) > .step{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--s-3);align-content:start}
.steps:not(.steps-icon) > .step > *{grid-column:1 / -1}
.steps:not(.steps-icon) > .step > .step-k{grid-column:1;align-self:start;font:var(--t-h3);height:1lh}
.steps:not(.steps-icon) > .step > .step-k + .h3{grid-column:2;margin-top:0}
.steps:not(.steps-icon) .step-n{font-variant-numeric:tabular-nums;min-width:2.4ch}   /* gleiche Breite für 01–09: alle H3 beginnen auf derselben Kante */
.ani-tueren{max-width:760px;margin-inline:auto}   /* volle Breite, höchstens 760 px (W3d §4.2) */
/* ---------- Etappe 22b: Icons links neben den Kartenköpfen der Startseite (Inhaber-Regel, Bea r2) ---------- */
.kopf-i{display:flex;align-items:flex-start;gap:12px}
.kopf-i > .i{flex:none;width:20px;height:20px;margin-top:calc((1lh - 20px) / 2);color:var(--c-orange-ink)}
.tile .kopf-i > .i{color:currentColor}   /* auf der orangen Kachel kein Orange auf Orange */
/* Schrittleisten: Icon in einer Kachel von 38 px (20-px-Icon), oben bündig mit der H3 */
.steps:not(.steps-icon) > .step > .step-k{height:auto}
.steps:not(.steps-icon) .step-k .i{width:38px;height:38px;padding:9px;box-sizing:border-box;border:var(--border);border-radius:var(--r-md);background:var(--c-surface)}
.steps:not(.steps-icon) > .step > .step-k + .h3{padding-top:calc((38px - 1lh) / 2)}
/* ---------- Etappe 22b: Noras Runde zu fb36a71 ---------- */
.p-rahmen.p-rahmen-innen{padding:var(--s-4) var(--s-5)}   /* G5: Tabelle läuft nicht bis an den Rahmen */
.mega-card .ptag{display:table;margin:4px 0 0}   /* M3: Plakette immer in eigener Zeile, bündig */
.kennzahlen span{hyphens:manual}   /* G4: „mobile.de-Konten“ wird nicht getrennt */
.hero .kennzahlen-hero{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:880px;margin-inline:auto}   /* M6: Kennzahlenband Über uns in drei gleichen Spalten, nie 2 + 1 */
@media (max-width:479px){ .hero .kennzahlen-hero{grid-template-columns:minmax(0,1fr)} }
/* G3: fünf Schritte ohne Lücke: 3 + 2, zweite Reihe mittig */
.steps.p-schritte{display:flex;flex-wrap:wrap;justify-content:center}
.steps.p-schritte > .step{flex:0 0 calc((100% - 2 * var(--s-8)) / 3)}
@media (max-width:1023px){ .steps.p-schritte > .step{flex-basis:calc((100% - var(--s-8)) / 2)} }
@media (max-width:767px){ .steps.p-schritte > .step{flex-basis:100%} }
/* M5: Funktionsübersicht unter 600 px gestapelt, Funktion fett über dem Nutzen */
@media (max-width:599px){
  .ftab,.ftab tbody,.ftab tr,.ftab th,.ftab td{display:block}
  .ftab thead.sr-klein{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}   /* wie .sr-only, nur unter 600 px */
  .ftab tbody th{font-weight:700;padding-bottom:0}
  .ftab tbody td{padding-top:var(--s-1)}
  .ftab tbody tr + tr td{border-top:0}
  .ftab th,.ftab td{hyphens:manual}
}
.ani-svg .ani-gesperrt{text-decoration:line-through;text-decoration-thickness:1.5px}   /* „Einkaufspreis“ an der Schranke: gesperrt (Nora M2) */
/* G1 (Nora e22b): Pfeil bleibt beim Umbruch am Titel der Kundenreise */
.p-reise-liste .h3 a{display:inline}
.p-reise-liste .h3 a > .i{display:inline-block;vertical-align:-.15em;margin-left:6px}
/* KI-Kacheln: „Mehr zum …“ je Kachelreihe auf gleicher Höhe (Leitung, Etappe 23) */
.tile-text{display:flex;flex-direction:column;align-self:stretch}
.tile-text > .more{margin-top:auto;align-self:flex-start}
.tile-text > p:has(+ .more){margin-bottom:var(--s-5)}   /* Mindestabstand Text → Link */