/* Erster Bildschirm 1:1 von „Onlineshop erstellen lassen“ (46.224.140.36:8443), Devin 18.10.2026: „ich finde das original besser. kopiere das einfach mal rüber.“
   Übernommen aus dort site.css: Hero (Zeilen 40–74), Beispiel-Shop (75–295), schmale Ansicht (472–485), KI-Kennzeichnung (824–828).
   Abweichungen: ohne Augenbraue und ohne KI-Zeile, ruhiger gemacht (Block am Ende), kürzere Subline 1 px größer, Text im Monitor kleiner (Devin), Band so hoch wie das Fenster unter dem Kopf (hier ist der Kopf immer sichtbar),
   Kopf-Regeln der Onlineshop-Seite nicht übernommen. */

.hero-band{--font:var(--schrift);--accent:#60A8BF;--zeiger:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M5 3 L5 31 L12 24.5 L17 35 L22.5 32.6 L17.5 22.2 L27 22.2 Z' fill='%233d4a53' stroke='%23fff' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E") 5 3;
}

/* Hero */
/* Hero-Band: ChatGPT-Bild „Lager mit Fensterlicht" samt Monitor, Tablet und Handy. Die grünen Bildschirme sind
   ausgeschnitten; dahinter laufen unsere echten Shops, per matrix3d genau auf die Bildschirm-Ecken gelegt (szene.js). */
/* Das Bild füllt immer das ganze Fenster vom oberen bis zum unteren Rand (der Kopf ist anfangs ausgeblendet; Tischkante sichtbar; Devin).
   Die zweite Sektion beginnt schon im ersten Bildschirm: eine weiße Karte mittig unten, die über das Bild ragt und in der die
   H2 „Kosten" angeschnitten zu sehen ist (Devin, wie das Video bei der LinkedIn-Agentur; Scroll-Knöpfe ignoriert die Zielgruppe). */

.hero-band{--hb:max(420px, calc(100vh - 64px));position:relative;overflow:hidden;height:var(--hb);background:#eef1f3}
/* Hinter der Bühne: dasselbe Lager unscharf; sichtbar nur, wenn das Bild bei niedrigen Fenstern schmaler als das Band ist */
.hero-hinter{position:absolute;inset:-40px;background:url(/static/demo/bilder/hero-lager-960.jpg) right bottom/cover no-repeat;filter:blur(22px)}
.buehne.rand .buehne-bild{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 7%);mask-image:linear-gradient(to right,transparent 0,#000 7%)}
.buehne.oben .buehne-bild{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 9%);mask-image:linear-gradient(to bottom,transparent 0,#000 9%)}
.buehne-rahmen{position:absolute;inset:0}
/* Bild unten um 80 px verlängert (unscharf gespiegelter Tisch), damit die Szene höher sitzen kann (Devin) */
.buehne{position:absolute;left:0;top:0;width:1916px;height:901px;transform-origin:0 0}
.buehne-bild{position:absolute;left:0;top:0;width:1916px;height:901px;z-index:3;pointer-events:none;user-select:none}
/* Weiß nur unter dem Text (lesbar über den Fensterrahmen); endet vor dem Monitor und über dem Tisch */
.hero-band::before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.42) 28%,rgba(255,255,255,.2) 40%,rgba(255,255,255,0) 47%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 58%,transparent 76%);mask-image:linear-gradient(to bottom,#000 0%,#000 58%,transparent 76%)}
/* Schriftgrößen fließend; Augenbraue halb so groß wie die H1 */
/* jeweils 1 px kleiner als die Grundgröße (Devin), damit die Subline links vor der Wand bleibt */
.hero{--f1b:clamp(34px, 3.05vw, 58px);--f1:calc(var(--f1b) - 1px);--fe:calc(var(--f1b) * .5 - 1px);--fs:clamp(17px, 1.32vw, 24px);position:relative;z-index:5;box-sizing:border-box;height:100%;padding:0 max(24px, 5.1vw);pointer-events:none}
/* Oberkante der Augenbraue (Versalhöhe) auf Höhe der linken Monitor-Oberkante; --mon-oben setzt szene.js */
/* Oberkante des Logos in der Augenbraue auf Höhe der linken Monitor-Oberkante */
.hero-text{width:fit-content;pointer-events:auto;padding-top:var(--mon-oben, 120px)}
/* Gleiche Abstände: Grundlinie Augenbraue bis Versalhöhe H1 = Zeilenabstand der H1 = letzte H1-Zeile bis Versalhöhe Subline
   (Montserrat: Oberlänge .968, Unterlänge .251, Versalhöhe .703 em) */
.hero h1{font-size:var(--f1);line-height:1.18;font-weight:700;margin:0 0 calc(.2455 * var(--f1) - .4705 * var(--fs));max-width:12.9em}
.hero h1 .akzent{color:var(--accent)}
/* Augenbraue wie der Kopf: links das Fisch-Logo (1,5-fache Schrifthöhe), dann der Text, mittig zueinander.
   Abstand: Grundlinie bis Versalhöhe der H1 = Zeilenabstand der H1 (Text sitzt mittig in der 1,5 em hohen Zeile) */
.hero h1 .augenbraue{display:flex;align-items:center;gap:.35em;font-size:var(--fe);line-height:1.4;font-weight:700;color:var(--accent);margin-bottom:calc(.2315 * var(--f1) - .3915 * var(--fe))}
.augenbraue-logo{display:block;height:1.5em;width:auto;flex:none}
.hero h1 .nachsatz{display:block}
.subline{font-size:var(--fs);line-height:1.63;margin:0;max-width:min(28em, 40vw);text-wrap:pretty}


/* Shops in den Bildschirmen (Breite wie gestaltet, Höhe passend zum Seitenverhältnis des Bildschirms im Bild) */
.vp{position:absolute;top:0;left:0;z-index:1;transform-origin:0 0;background:#fff;overflow:hidden}
/* leichter Glasglanz, Licht von links wie im Bild */
.vp::after{content:"";position:absolute;inset:0;z-index:40;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.05) 30%,rgba(255,255,255,0) 50%)}
.vp-desk{width:1000px;height:629px}
.vp-tab{width:600px;height:1028px}
.vp-mob{width:390px;height:942px}

/* Demo-Zeiger und eigene Maus im selben Design */
.demo-zeiger{position:absolute;left:0;top:0;width:40px;height:40px;pointer-events:none;opacity:0;transition:opacity .4s;z-index:5;filter:drop-shadow(1px 2px 2px rgba(0,0,0,.25))}
.demo-zeiger.da{opacity:1}
.demo-zeiger.weg{opacity:0 !important}
.demo-zeiger svg{display:block;transition:transform .15s;transform-origin:5px 3px}
.demo-zeiger.klick svg{transform:scale(.82)}
.buehne.eigen .vp,.buehne.eigen .vp *{cursor:var(--zeiger),auto}

/* Beispiel-Shop (in virtuellen Pixeln) */
/* Shop-Farben: Grautöne passend zum Anthrazit der Werkbank, eine einzige Farbe = unser Hellblau #60A8BF auf dem Knopf
   und „bleiben" (Devin: ein eigenes Grün wirkte zu bunt, weil es sonst nirgends vorkommt). Der Generator ist schwarz (Devin 01.11.2026:
   Text „richtiges schwarz“, Akzent das Blau #5fa7be), siehe unten */
/* Eine dunkle Farbe für Text auf der Shop-Startseite = unser Schiefergrau #445662 wie die H1 (Devin); nur die Pfeile der Kategorien bleiben hell */
/* Ist der Generator höher als der Bildschirm, scrollt er im Gerät (ohne sichtbare Leiste); szene.js lässt die anderen Geräte anteilig mitscrollen (Devin 01.11.2026) */
.s{--s-dunkel:#445662;--s-tief:#445662;--s-grau:#445662;--s-grau2:#445662;--s-hell:#a19e98;--s-linie:#ece9e3;--s-rahmen:#e5e1da;--s-feld:#d6d1c9;--s-flaeche:#fff;--s-akzent:#60A8BF;--s-knopf-bg:#60A8BF;--s-knopf-text:#fff;--s-knopf-rand:#60A8BF;position:relative;font-family:var(--font);font-size:14px;color:var(--s-grau);background:#fff;height:100%;overflow-x:hidden;overflow-y:auto;scrollbar-width:none}
.s::-webkit-scrollbar{display:none}

/* ===== Generator im Beispiel-Shop (Devin 01.11.2026: „genau so wie in der Arbeitsprobe“) =====
   Ersetzt den alten Konfigurator (Breite, Schubladen, Lochwand, Zeichnung, 3D-Modell). Aufbau 1:1 aus der Arbeitsprobe
   (Briefprozess\Arbeitsproben\00_werkbank\generator\generator.css, die gemeinsame Vorlage aller Generatoren): eine Karte, keine Überschrift,
   keine Trennlinien, nummerierte Fragen, Antwortkarten mit Symbol und Haken, Regler mit Füllstand, nur Modell und Knöpfe fett.
   Klassen mit g- davor, weil .frage, .fragen, .ergebnis und .knopf auf der Seite schon vergeben sind. Darunter: Monitor kompakter, Tablet und Handy einspaltig.
   Devins Rückmeldungen vom 01.11.2026 nach dem ersten Ansehen:
   - „richtiges schwarz“ für den Text (Lesbarkeit), „ci farbe ist bei dir falsch. das blau ist übrigens: #5fa7be“: Akzent = das Blau des Knopfs
     „Werkbank konfigurieren“ (Nummern, Haken, gewählte Karte, Regler, Schalter, Hauptknopf, Rand des Termin-Knopfs), die gewählte Karte hellblau.
     Weiß auf #5fa7be hat nur etwa 2,6 : 1; das ist Devins Vorgabe wie beim Shop-Knopf, die 7 : 1 gelten für den schwarzen Text.
   - „die schriftgröße 1px größer“: jede Schriftgröße 1 px größer als in der Arbeitsprobe.
   - „zwischen den fragen vielleicht ein bisschen mehr platz“: mehr Abstand zwischen den Frageblöcken.
   - „die 3 spalten können raus. das ist zuviel kleinkram“: keine Faktenzeile mehr, unter dem Modell nur die eine Zeile, dann die Raten.
   - „ich sehe die buttons nicht“: Knöpfe immer zu sehen (unten).
   Die Shop-Startseite im Gerät bleibt, wie sie ist */
.s-gen{--g-karte:#fff;--g-ring:#fff;--g-hover:#a9c9d4;--g-schalter-aus:#8f8676;--g-auf-ci:#fff;--g-schatten:0 6px 22px rgba(60,50,30,.06);
  --g-akzent:#5fa7be;--g-akzent-hell:#eef6f9;--g-ci:#5fa7be;--g-text:#000;--g-linie:#e5e1da;--g-bahn:#d6d1c9;--g-bild-format:4 / 3;--g-ci-schrift:#000;
  --g-haken:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5.5 10.2 3 3 6-6.2' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  display:none;padding:14px 28px 28px;font-size:17px;line-height:normal;color:var(--g-text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:where(.s-gen) *{box-sizing:border-box;margin:0;padding:0}
.s-gen [hidden]{display:none !important}
/* Einzige Navigation im Generator: schlichter Link oben links, ohne Leiste und ohne Warenkorb */
.g-modell,.g-knopf{font-family:var(--font)}
/* Alles in einer einzigen Karte: Fragen | Empfehlung, darunter die zwei Knöpfe; keine Trennstriche, nur Abstand trennt */
.g-karte{background:var(--g-karte);border:1px solid var(--g-linie);border-radius:16px;box-shadow:var(--g-schatten);padding:12px 32px 16px}
.g-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.g-fragen{padding-right:32px;counter-reset:g-frage}
/* Fragen; zwischen den Frageblöcken mehr Abstand als in der Arbeitsprobe (Devin 01.11.2026) */
.g-frage{padding:18px 0 20px;min-width:0;border:0;counter-increment:g-frage}
.g-frage + .g-frage{margin-top:16px}
.g-nr::before{content:counter(g-frage)}
.g-frage legend{float:left;width:100%;display:flex;flex-wrap:nowrap;align-items:center;gap:10px 14px;font-size:19px;font-weight:400;line-height:1.3;margin-bottom:16px}
.g-frage legend + *{clear:both}
.g-nr{flex:none;width:30px;height:30px;border-radius:50%;background:var(--g-ci);color:var(--g-auf-ci);font-size:16px;display:grid;place-items:center}
/* Antworten als Karten mit Symbol (schwarz) über dem Text, zentriert, und Haken */
.g-wahl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.g-wahl--drei{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-wahl label{position:relative;display:flex;min-width:0;cursor:pointer}
.g-wahl input{position:absolute;opacity:0;pointer-events:none}
.g-wahl span{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:64px;padding:14px 8px;border:1.5px solid var(--g-linie);border-radius:12px;background:var(--g-karte);font-size:17px;text-align:center;min-width:0;hyphens:manual;overflow-wrap:break-word;transition:border-color .15s,background .15s}
.g-wahl span svg{flex:none;width:28px;height:28px;fill:none;stroke:var(--g-text);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.g-wahl label:hover span{border-color:var(--g-hover)}
.g-wahl input:checked + span{border:2px solid var(--g-akzent);padding:13.5px 7.5px;background:var(--g-akzent-hell)}
.g-wahl input:checked + span::after{content:"";position:absolute;top:9px;right:9px;width:20px;height:20px;border-radius:50%;background:var(--g-ci) var(--g-haken) center / 20px no-repeat}
.g-wahl input:focus-visible + span{outline:2px solid var(--g-text);outline-offset:2px}
/* Regler: Füllstand in der Akzentfarbe (--fuellung setzt szene.js) */
.s-gen input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer}
.s-gen input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--g-akzent) var(--fuellung,50%),var(--g-bahn) var(--fuellung,50%))}
.s-gen input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--g-akzent) var(--fuellung,50%),var(--g-bahn) var(--fuellung,50%))}
.s-gen input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;background:var(--g-akzent);border:3px solid var(--g-ring);box-shadow:0 1px 4px rgba(0,0,0,.3)}
.s-gen input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--g-akzent);border:3px solid var(--g-ring);box-shadow:0 1px 4px rgba(0,0,0,.3)}
.s-gen input[type=range]:focus-visible{outline:2px solid var(--g-text);outline-offset:4px}
.g-regler{display:flex;align-items:center;gap:24px}
.g-regler input{flex:1}
.g-regler output{min-width:6.5em;font-size:19px;font-weight:400;text-align:right}
/* Schalter beim Aussetzen der Raten */
.g-ja-nein input{position:absolute;opacity:0;pointer-events:none}
.g-schalter-bahn{position:relative;flex:none;width:46px;height:26px;border-radius:13px;background:var(--g-schalter-aus);transition:background .15s}
.g-schalter-bahn::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.g-ja-nein input:checked ~ .g-schalter-bahn{background:var(--g-akzent)}
.g-ja-nein input:checked ~ .g-schalter-bahn::after{transform:translateX(20px)}
.g-ja-nein input:focus-visible ~ .g-schalter-bahn{outline:2px solid var(--g-text);outline-offset:2px}
/* Empfehlung: Foto, Modell (einzig fett), eine Zeile, dann gleich die Raten */
.g-ergebnis{padding:20px 0 0 32px}
.g-produkt{display:block;width:100%;height:auto;aspect-ratio:var(--g-bild-format);object-fit:cover;border-radius:12px}
.g-modell{margin-top:16px;font-size:27px;font-weight:700;line-height:1.2;text-wrap:balance}
.g-zeile{margin-top:4px;font-size:16px;line-height:1.45}
/* Ratenregler wie bei Lucama */
.g-raten{margin-top:16px;padding-top:14px}
.g-raten-kopf{font-weight:400;display:flex;justify-content:space-between;align-items:baseline;font-size:16px}
.g-raten input[type=range]{margin-top:6px}
.g-raten-betrag{margin-top:4px;font-size:16px;line-height:1.45}
.g-pause{margin-top:12px;padding-top:12px;font-size:16px;line-height:1.45}
.g-ja-nein{display:flex;align-items:center;gap:10px;margin-top:8px;cursor:pointer}
/* Links „Termin mit … heraussuchen“, rechts „Produkt im Shop öffnen“ (öffnet die Produktseite), nebeneinander unten in der Karte, je unter einer Spalte.
   Hauptknopf wie „Werkbank konfigurieren“: Blau, weiße fette Schrift; Termin-Knopf blauer Rand, schwarze Schrift.
   Immer zu sehen: Ist der Generator höher als das Gerät, kleben die Knöpfe unten im Gerät, auf weißem Grund ohne Linie,
   und der Inhalt scrollt dahinter (Mausrad, Wischen) */
.g-knopf{display:block;margin-top:16px;padding:16px 20px;border-radius:12px;background:var(--g-ci);color:var(--g-auf-ci);font-size:19px;font-weight:700;text-align:center;text-decoration:none}
.g-knoepfe{position:sticky;bottom:0;z-index:2;background:var(--g-karte);margin-top:12px;padding:16px 0 12px;display:grid;grid-template-columns:1fr 1fr;gap:64px}
.g-knoepfe .g-knopf{margin-top:0;padding:14px 8px;font-size:16px}
.g-knopf--neben{background:var(--g-karte);color:var(--g-ci-schrift);border:2px solid var(--g-ci)}
.g-knoepfe .g-knopf--neben{padding:12px 8px}
/* Monitor (1000 × 629): zwei Spalten wie in der Arbeitsprobe, aber Bild flacher (16 : 9 statt 4 : 3) und engere Abstände, damit auch im höchsten
   Zustand (mit Aussetzen-Frage) alles ohne Scrollen in den Bildschirm passt, Knöpfe eingeschlossen. Zwischen den Frageblöcken 40 statt 16 px.
   Schrift wie oben, nur der Modellname kleiner (23 statt 27 px). Rechts endet der Inhalt 50 px vor dem Rand, weil dort unten das Tablet liegt */
.vp-desk .s-gen{padding:6px 50px 4px 28px}
.vp-desk .s > .s-kopf{height:60px}
.vp-desk .g-karte{padding:0 26px 2px}
.vp-desk .g-fragen{padding-right:26px}
.vp-desk .g-ergebnis{padding:8px 0 0 26px}
.vp-desk .g-frage{padding:10px 0 6px}
.vp-desk .g-frage + .g-frage{margin-top:16px}
.vp-desk .g-frage legend{margin-bottom:8px}
.vp-desk .g-wahl{gap:8px}
.vp-desk .g-wahl span{min-height:0;padding:8px 6px;gap:3px}
.vp-desk .g-wahl input:checked + span{padding:7.5px 5.5px}
/* Ausschnitt: ohne Rollen Platte bis Füße, mit Rollen Werkzeug, Platte und Rollen */
.vp-desk .g-produkt{aspect-ratio:1.9 / 1;object-position:50% 45%}
.vp-desk .g-produkt[data-bild$="-rollen"]{object-position:50% 64%}
.vp-desk .g-modell{margin-top:6px;font-size:23px;line-height:1.15}
.vp-desk .g-zeile{margin-top:2px}
.vp-desk .g-raten{margin-top:8px;padding-top:2px}
.vp-desk .g-raten input[type=range]{margin-top:2px}
.vp-desk .g-raten-betrag{margin-top:0}
.vp-desk .g-pause{margin-top:6px;padding-top:0}
.vp-desk .g-ja-nein{margin-top:4px}
.vp-desk .g-knoepfe{margin-top:0;padding:8px 0 4px;gap:52px}
.vp-desk .g-knoepfe .g-knopf{padding:12px 8px}
.vp-desk .g-knoepfe .g-knopf--neben{padding:10px 8px}
/* Nur noch der Shop-Knopf (Devin 01.11.: „terminknopf bitte raus“): im Monitor unter der Empfehlung */
.vp-desk .g-knoepfe > .g-knopf:only-child{grid-column:2}
/* Tablet (600 breit) und Handy (390 breit): einspaltig, erst die Fragen, dann die Empfehlung, die Knöpfe untereinander (Termin über Shop),
   unten im Gerät festgeklebt, solange die Empfehlung noch nicht ganz zu sehen ist */
.vp-tab .g-raster,.vp-mob .g-raster{grid-template-columns:minmax(0,1fr)}
.vp-tab .g-fragen,.vp-mob .g-fragen{padding-right:0}
.vp-tab .g-ergebnis,.vp-mob .g-ergebnis{padding:14px 0 0}
.vp-tab .g-knoepfe,.vp-mob .g-knoepfe{grid-template-columns:minmax(0,1fr);gap:10px;margin-top:10px;padding:14px 0 14px}
.vp-tab .s-gen{padding:16px 20px 28px}
.vp-tab .g-karte{padding:6px 24px 10px}
.vp-mob .s-gen{padding:14px 12px 24px}
.vp-mob .g-karte{padding:4px 16px 6px}
.vp-mob .g-regler{gap:16px}

/* ===== Produktseite (Devin 01.11.2026): „Produkt im Shop öffnen“ führt hierher, „und dort wird dann eben gekauft“ =====
   Kopf, Warenkorb mit Zahl, Mini-Warenkorb, Galerie zum Durchklicken und „Passend dazu“ wie im alten Shop (demo.css.vor-generator-szene-20261101-114100),
   aber nichts zum Wählen: keine Breite, Schubladen, Lochwand, keine Zeichnung, kein 3D-Modell. Unter dem Namen eine schlichte Zeile mit der
   Ausführung aus dem Generator (keine Faktenspalten, Devin: „zuviel kleinkram“), dann Preis, gewählte Raten und „In den Warenkorb“ */
.s-kopf{height:65px;display:flex;align-items:center;gap:26px;padding:0 28px;border-bottom:1px solid var(--s-rahmen)}
.s-kopf .s-zurueck{font-size:14px;color:var(--s-dunkel);white-space:nowrap}
.s-korb{display:flex;align-items:center;gap:7px;margin-left:auto;color:var(--s-dunkel);font-weight:700;cursor:pointer}
/* Kleiner Knopf „Zum Online-Shop“ links neben dem Warenkorb (Devin 01.11.2026) */
.s-zum-shop{margin-left:auto;font-size:13px;font-weight:600;color:var(--s-dunkel);border:1.5px solid var(--s-akzent);border-radius:7px;padding:5px 11px;white-space:nowrap;cursor:pointer}
.s-zum-shop + .s-korb{margin-left:0}
.s-korb-text{font-size:14px}
.s-korb svg{display:block;transform-origin:50% 70%}
.s-korb b{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--s-dunkel);color:#fff;font-size:11px;line-height:1}
.s-korb b.leer{display:none}
.s-korb.hupf svg{animation:korb-hupf .6s ease-out}
.s-korb.hupf b{animation:korb-zahl .6s ease-out}
@keyframes korb-hupf{0%{transform:none}30%{transform:translateY(-3px) scale(1.25)}60%{transform:scale(.95)}100%{transform:none}}
@keyframes korb-zahl{0%{transform:none}30%{transform:scale(1.4);background:var(--s-akzent)}100%{transform:none}}
/* Mini-Warenkorb mit Sprechblasen-Pfeil zum Warenkorb-Symbol */
.s-mini{position:absolute;top:73px;right:14px;width:380px;max-width:calc(100% - 28px);box-sizing:border-box;padding:18px 18px 12px;background:#fff;border-radius:14px;filter:drop-shadow(0 0 1.5px rgba(0,0,0,.45)) drop-shadow(0 12px 24px rgba(0,0,0,.2));z-index:20;opacity:0;transform:translateY(-8px);transition:opacity .25s,transform .25s;pointer-events:none}
.s-mini.offen{opacity:1;transform:none;pointer-events:auto}
.s-mini::before{content:"";position:absolute;top:-11px;right:var(--pfeil,22px);width:22px;height:22px;background:#fff;transform:rotate(45deg);border-radius:4px 0 0 0}
.s-mini-kopf{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:700;color:var(--s-tief);margin-bottom:12px}
.s-mini-kopf b{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--s-dunkel);color:#fff;font-size:12px}
.s-mini-zeile{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--s-linie);font-size:13.5px}
.s-mini-zeile img{flex:none;width:46px;height:46px;border-radius:6px;object-fit:cover;background:var(--s-flaeche)}
.s-mini-zeile span{flex:1;color:var(--s-grau2);line-height:1.35}
.s-mini-zeile b{font-weight:600;color:var(--s-tief);white-space:nowrap}
.s-mini-zeile button{font:inherit;font-size:15px;line-height:1;color:var(--s-hell);background:none;border:0;padding:0 2px;cursor:pointer}
.s-mini-summe{display:flex;align-items:baseline;justify-content:space-between;padding:12px 0 14px;font-size:13.5px}
.s-mini-summe b{font-size:19px;color:var(--s-tief)}
.s-mini-kasse{display:block;width:100%;font:inherit;font-size:15px;font-weight:700;color:#fff;background:var(--s-akzent);border:0;border-radius:22px;padding:11px 0;cursor:pointer;box-shadow:0 6px 14px rgba(0,0,0,.16)}
.s-mini-link{display:block;width:100%;font:inherit;font-size:13px;color:var(--s-grau);background:none;border:0;padding:10px 0 2px;cursor:pointer}
/* Galerie: großes Bild, kleine Kästchen oben links; Bild 0 = Ausführung aus dem Generator, 1–3 = Fotos der Bank */
.s-produkt{padding:32px 28px 0}
.s-galerie{position:relative}
.s-bild{position:relative;overflow:hidden;background:var(--s-flaeche);border-radius:10px}
.s-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Foto 1 ist freigestellt: ganz zeigen, auf Weiß, rechts von den Kästchen */
.s-bild.weiss .s-foto{object-fit:contain;padding:18px 18px 18px 74px;box-sizing:border-box;background:#fff}
.vp-desk .s-bild.weiss .s-foto{padding:18px 14px 18px 68px}
.vp-mob .s-bild.weiss .s-foto{padding:12px 12px 12px 54px}
/* Kästchen größer, mit dickem weißem Rahmen und Schatten, und sie sitzen auf der linken Bildkante: 20 % ragen über den Rand hinaus,
   80 % liegen auf dem Bild (Devin 01.11.2026: „ich kann die 4 bilder da viel zu schlecht lesen … leicht dickeren weißrahmen … am linken rand
   rübergucken zu 20 %“). Platz dafür gibt der linke Seitenrand (28 bzw. 16 px), .s-bild schneidet nur das große Bild ab */
.s-thumbs{position:absolute;top:12px;left:-13.6px;z-index:2;display:flex;flex-direction:column;gap:10px}
.s-thumb{width:68px;height:51px;padding:0;border:4px solid #fff;border-radius:9px;overflow:hidden;background:var(--s-flaeche);cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.28)}
.s-thumb.an{border-color:var(--s-dunkel)}
.s-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.s-name{font-weight:700;font-size:19px;color:var(--s-dunkel);margin:0 0 6px}
/* Ausführung und Beschreibung wie der Text der Shop-Startseite (.s-start-text p): Farbe, Größe, Gewicht (Devin 01.11.2026) */
.s-ausfuehrung{margin:0;font-size:15px;line-height:1.6;color:var(--s-grau)}
.s-beschreibung{margin:8px 0 0;font-size:15px;line-height:1.6;color:var(--s-grau)}
/* Preis, Aufbau im Keller und Raten untereinander über die ganze Spaltenbreite, darunter linksbündig „In den Warenkorb“ (Devin 01.11.2026) */
.s-kauf{margin-top:16px}
.s-preis{font-size:22px;font-weight:700;color:var(--s-dunkel);white-space:nowrap}
.s-rate-text{font-size:12px;margin-top:2px}
.s-knopf svg{flex:none;width:1.15em;height:1.15em}
.s-knopf{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font:inherit;background:var(--s-knopf-bg);color:var(--s-knopf-text);border:1px solid var(--s-knopf-rand);font-weight:700;font-size:13px;padding:9px 16px;border-radius:7px;white-space:nowrap;cursor:pointer}
.s-dazu{padding:24px 28px 24px}
.s-dazu-titel{font-weight:700;font-size:15px;color:var(--s-dunkel);margin-bottom:10px}
.s-karten{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.s-karte{border:1px solid var(--s-rahmen);border-radius:10px;overflow:hidden}
.s-karte .bb{height:110px;background:var(--s-flaeche)}
.s-karte .bb img{display:block;width:100%;height:100%;object-fit:cover}
.s-karte .tt{padding:8px 10px;font-size:12px}
.s-karte b{display:block;font-size:13px;color:var(--s-dunkel);margin-bottom:2px}
/* Monitor: Schriftstufen wie im alten Shop (--t 21, --t3 26 px); Bild 380 px breit. Rechts nur 28 px Rand: Die Textspalte liegt oben,
   wo das Tablet den Monitor nicht verdeckt, so passt die Ausführung in eine Zeile; „Passend dazu“ endet weiter 50 px vor dem Rand */
.vp-desk .s-kopf .s-zurueck,.vp-desk .s-korb-text{font-size:var(--t)}
.vp-desk .s-korb b{font-size:var(--t);min-width:34px;height:34px;padding:0 9px;border-radius:17px;box-sizing:border-box}
.vp-desk .s-korb svg{width:23px;height:23px}
.vp-desk .s-produkt{display:grid;grid-template-columns:380px 1fr;gap:24px;padding-right:28px}
.vp-desk .s-thumb{width:72px;height:54px}
.vp-desk .s-thumbs{left:-14.4px}
.vp-desk .s-bild{height:340px}
.vp-desk .s-name{font-size:var(--t3);line-height:1.2;margin-bottom:8px}
.vp-desk .s-ausfuehrung{font-size:var(--t);line-height:1.45}
.vp-desk .s-beschreibung{font-size:var(--t);line-height:1.45;margin-top:10px}
.vp-desk .s-zum-shop{font-size:18px;padding:6px 14px}
.vp-desk .s-kauf{margin-top:20px}
.vp-desk .s-preis{font-size:var(--t3)}
.vp-desk .s-rate-text{font-size:var(--t);margin-top:4px}
.vp-desk .s-knopf{font-size:var(--t);padding:11px 20px;margin-top:18px}
.vp-desk .s-dazu{padding-right:50px}
.vp-desk .s-dazu-titel{font-size:var(--t2);margin-bottom:12px}
.vp-desk .s-karte .tt{font-size:var(--t);padding:9px 12px}
.vp-desk .s-karte b{font-size:var(--t);margin-bottom:1px}
.vp-desk .s-mini{width:520px;right:50px}
.vp-desk .s-mini-kopf{font-size:var(--t2)}
.vp-desk .s-mini-kopf b{font-size:var(--t);min-width:34px;height:34px;padding:0 9px;border-radius:17px;box-sizing:border-box}
.vp-desk .s-mini-zeile,.vp-desk .s-mini-summe,.vp-desk .s-mini-kasse,.vp-desk .s-mini-link{font-size:var(--t)}
.vp-desk .s-mini-summe b{font-size:var(--t2)}
/* Tablet und Handy wie im alten Shop: Galerie über dem Namen */
.vp-tab .s-bild{height:300px}
.vp-tab .s-galerie{margin-bottom:14px}
.vp-tab .s-karten,.vp-mob .s-karten{grid-template-columns:repeat(2,1fr)}
.vp-mob .s-kopf{padding:0 16px;gap:14px}
/* Handy: neben „Zum Online-Shop“ nur Symbol und Zahl des Warenkorbs */
.vp-mob .s-korb-text{display:none}
.vp-mob .s-zum-shop{font-size:12px;padding:4px 9px}
.vp-mob .s-produkt{padding:16px 16px 0}
.vp-mob .s-dazu{padding-left:16px;padding-right:16px}
.vp-mob .s-bild{height:240px}
.vp-mob .s-galerie{margin-bottom:12px}
.vp-mob .s-thumbs{top:10px;left:-11.2px;gap:8px}
.vp-mob .s-thumb{width:56px;height:42px;border-width:3px;border-radius:8px}

/* Startseite des Shops: Werkstatt-Foto als Hintergrund (gespiegelt, Fensterlicht rechts), Weiß läuft von rechts ins Bild;
   Text und Knopf rechts. Der Knopf (und die Karte „Werkbänke“) öffnet den Generator, dessen Knopf „Produkt im Shop öffnen“ die Produktseite */
.s-produktseite{display:none}
.s > .s-kopf{display:none}
.s.auf-generator > .s-kopf,.s.auf-produkt > .s-kopf{display:flex}
.s.auf-generator .s-start,.s.auf-produkt .s-start{display:none}
.s.auf-generator .s-gen{display:block;animation:seite-ein .35s ease}
.s.auf-produkt .s-produktseite{display:block;animation:seite-ein .35s ease}
@keyframes seite-ein{from{opacity:0}to{opacity:1}}
[data-seite]{cursor:pointer}
.s-start-held{position:relative;overflow:hidden;background:#fff}
.s-start-bild{position:relative;overflow:hidden}
.s-start-bild img{display:block;width:100%;height:100%;object-fit:cover;object-position:40% 78%}
.s-start-bild::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(255,255,255,0) 72%,#fff 100%)}
.s-start-text{position:relative;z-index:1;padding:18px 28px 0}
.s-start-text h2{margin:0 0 14px;font-size:36px;line-height:1.15;font-weight:700;color:var(--s-tief)}
.s-start-text p{margin:0 0 24px;font-size:15px;line-height:1.6;color:var(--s-grau)}
/* „bleiben" in der Akzentfarbe (ohne Unterstrich, Devin) */
.s-betont{position:relative;color:var(--s-akzent);white-space:nowrap}
.s-start-knopf{font:inherit;font-size:15px;font-weight:700;color:#fff;background:var(--s-akzent);border:0;border-radius:7px;padding:12px 20px;white-space:nowrap}
.s-kat{padding:26px 28px 0}
.s-kat-titel{font-weight:700;font-size:15px;color:var(--s-dunkel);margin-bottom:10px}
.s-kat-karten{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.s-kat-karte{border:1px solid var(--s-rahmen);border-radius:10px;overflow:hidden;background:#fff}
.s-kat-karte .bb{height:96px;background:var(--s-flaeche)}
.s-kat-karte .bb img{display:block;width:100%;height:100%;object-fit:cover}
.s-kat-karte .tt{display:flex;justify-content:space-between;align-items:center;padding:9px 11px;font-size:13px;font-weight:700;color:var(--s-dunkel)}
.s-kat-karte .tt span{color:var(--s-hell);font-weight:400}
/* Desktop: Foto über die ganze Breite, Werkbank links, Text rechts auf dem Fensterlicht */
.vp-desk .s-start-held{height:329px;display:flex;justify-content:flex-end;align-items:center}
.vp-desk .s-start-bild{position:absolute;inset:0}
.vp-desk .s-start-bild img{position:absolute;width:803px;height:452px;left:-90px;top:-110px;max-width:none}
.vp-desk .s-start-bild::after{background:linear-gradient(90deg,rgba(255,255,255,0) 34%,rgba(255,255,255,.82) 47%,#fff 58%)}
.vp-desk .s-start-text{width:330px;padding:0 40px 0 0}
.vp-tab .s-start-bild{height:300px}
.vp-tab .s-kat-karten,.vp-mob .s-kat-karten{grid-template-columns:repeat(2,1fr)}
.vp-mob .s-start-bild{height:220px}
.vp-mob .s-start-text{padding:14px 16px 0}
.vp-mob .s-kat{padding:22px 16px 0}
.vp-mob .s-start-text h2{font-size:30px}

/* Desktop-Ansicht der Shop-Startseite (der Generator hat oben eigene Größen wie die Arbeitsprobe) */
/* Schriftstufen im Shop (Desktop), Text und Zwischentitel einheitlich 23, Überschrift 28 (Devin) · Überschrift 27 · große Überschrift 42 px.
   Fett nur für Überschriften, Preise und Knöpfe; alles andere normal. Tablet und Handy bleiben, wie sie sind. */
/* hier 2 virtuelle px kleiner als im Original (≈ 1 px auf dem Bildschirm), wirkte gequetscht (Devin 18.10.) */
.vp-desk .s{--t:21px;--t2:21px;--t3:26px;--t4:40px}
/* Rechts unten liegt im Bild das Tablet vor dem Monitor: Inhalt endet 50 px vor dem Rand (Devin: halbiert, darf leicht dahinter liegen) */
.vp-desk .s-kat{padding-right:50px}
/* Startseite */
.vp-desk .s-start-text{width:450px;padding:0 50px 0 0;box-sizing:border-box}
.vp-desk .s-start-text h2{font-size:var(--t4);line-height:1.12;margin-bottom:14px}
.vp-desk .s-start-text p{font-size:var(--t);line-height:1.45;margin-bottom:20px}
.vp-desk .s-start-knopf{font-size:var(--t);padding:12px 22px}
.vp-desk .s-kat-titel{font-size:var(--t2);margin-bottom:12px}
.vp-desk .s-kat-karte .tt{font-size:var(--t);padding:10px 12px}
/* Tablet-Ansicht */
.vp-tab .s{font-size:15px}


@media (max-width:1099px){
  .hero-band{height:auto;display:flex;flex-direction:column;background:linear-gradient(180deg,#f3f5f6 0%,#e7ebed 100%)}
  .hero-band::before{display:none}
  .hero{order:1;height:auto;padding:40px max(16px, 5.1vw) 0;pointer-events:auto}
  .hero-text{padding-top:0;width:auto}
  .buehne-rahmen{order:2;position:relative;inset:auto;flex:none;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%);mask-image:linear-gradient(to bottom,transparent 0,#000 18%)}
}

@media (max-width:900px){
  .hero{--f1b:33px;--fs:18px}
  .subline{max-width:none}
}


/* Anschnitt wie im Original: Die nächste Sektion (hier das Video statt der Kosten-Karte) ragt so weit in den ersten Bildschirm,
   wie die Kosten-Karte dort (main-Variablen aus dem Original); schmal ragt nichts hinein, wie dort */
main{--h2:40px;--kosten-oben:30px;--anriss:calc(var(--kosten-oben) + .78 * var(--h2))}



/* ===== Ruhiger erster Bildschirm (Devin 18.10.2026: „der above the fold muss ruhig wirken“; Maus bleibt; kein heller Grund, „wirkt verträumt“) =====
   Text bricht früher um, damit er links vor dem Fenster im Bild bleibt (Schriftgrößen und Bild wachsen beide mit der Fensterbreite,
   deshalb passt die Breite in em überall); Text höher, mehr Luft zwischen H1 und Subline.
   Anschnitt unten: Statt der Decke aus dem Video ragt nur der ruhige obere Rand einer weißen Karte herein; Schatten weich. */
.hero h1{margin-bottom:.45em}
@media (min-width:1100px){
  .hero h1{max-width:10.2em}
  .subline{max-width:23em}
  /* Text mittig im ruhigen Bildteil über dem Tisch: Kartons und Pflanze vorn beginnen im Bild bei y ≈ 640 von 901, also 261 px über
     der Unterkante; das Bild steht unten bündig und wächst mit der Breite (1916 px Bild ≙ 100vw, 261 px ≙ 13,6vw). So rutscht die Subline
     auch in breiten, niedrigen Fenstern nicht auf die dunklen Kartons (Devin: „ich kann das G von Gespräch nicht lesen“) */
  .hero-text{position:absolute;left:max(24px, 5.1vw);top:calc((100% - 13.6vw) * .5);transform:translateY(-50%);padding-top:0}
}
/* Das Video ragt nicht mehr in den ersten Bildschirm; das macht jetzt die Sektion über Devin */
.video-box{margin-top:0}

/* Beispiel-Shop ruhiger (Devin 18.10.): kein Logo; die Startseite des Shops ohne Kopf, das Werkstatt-Bild beginnt ganz oben.
   Seit dem Generator (Devin 01.11.2026) gibt es gar keinen Kopf mehr, im Generator nur den Link „Zurück zur Startseite“.
   Desktop: Bild 65 px höher (so hoch wie der Kopf war), damit unten kein Weiß entsteht */
.vp-desk .s-start-held{height:394px}
.vp-desk .s-start-bild img{top:-58px}

/* Mouseover im Beispiel-Shop (Devin 18.10.): deutlich, weil der Shop im kleinen Monitor auf etwa die Hälfte verkleinert ist
   („das hast du für einen detektiv programmiert“), aber ruhig: nichts wird größer, nichts bewegt sich, nur Ton, Rand und Schatten.
   Werte in virtuellen Pixeln, auf dem Bildschirm etwa halb so groß. Über allem Klickbaren zeigt der Zeiger die Hand,
   schiefergrau mit weißem Rand wie der Pfeil (Devin: nicht weiß wie die Hand des Systems) */
.buehne{--hand:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='%23fff' stroke='%23fff' stroke-width='4.4' stroke-linejoin='round'%3E%3Crect x='12' y='2' width='6.4' height='21' rx='3.2'/%3E%3Crect x='18' y='11.5' width='5.8' height='13' rx='2.9'/%3E%3Crect x='23.6' y='13' width='5.6' height='12' rx='2.8'/%3E%3Crect x='29' y='15' width='5.2' height='10.5' rx='2.6'/%3E%3Cpath d='M12 20 L34.2 20 L34.2 29 C34.2 33.5 31.2 37 27 37 L20 37 C15.5 37 12 33.5 12 29 Z'/%3E%3Crect x='5.6' y='19.5' width='5.8' height='12.5' rx='2.9' transform='rotate%28-38 12 28%29'/%3E%3C/g%3E%3Cg fill='%233d4a53'%3E%3Crect x='12' y='2' width='6.4' height='21' rx='3.2'/%3E%3Crect x='18' y='11.5' width='5.8' height='13' rx='2.9'/%3E%3Crect x='23.6' y='13' width='5.6' height='12' rx='2.8'/%3E%3Crect x='29' y='15' width='5.2' height='10.5' rx='2.6'/%3E%3Cpath d='M12 20 L34.2 20 L34.2 29 C34.2 33.5 31.2 37 27 37 L20 37 C15.5 37 12 33.5 12 29 Z'/%3E%3Crect x='5.6' y='19.5' width='5.8' height='12.5' rx='2.9' transform='rotate%28-38 12 28%29'/%3E%3C/g%3E%3Cg stroke='%23fff' stroke-width='.9' stroke-linecap='round' fill='none'%3E%3Cpath d='M18.2 20.5 V24.5 M23.8 21 V25 M29.2 21.5 V25.3'/%3E%3C/g%3E%3C/svg%3E") 15 3}
/* Hand auch über den inneren Teilen (Symbol und Text der Antwortkarten, Punkt des Schalters), sonst greift dort die Pfeil-Regel für .vp *
   Seit dem Generator (Devin 01.11.2026): Antwortkarten, beide Regler, Schalter und die zwei Knöpfe; auf der Produktseite Kästchen, Warenkorb und Knöpfe */
.buehne.eigen .vp :is(.s-start-knopf,.s-kat-karte[data-seite],.s-zurueck,.s-zum-shop,.g-wahl label,.g-ja-nein,.g-knopf,input[type=range],.s-knopf,.s-mini-kasse,.s-mini-link,.s-thumb,.s-korb,.s-mini-zeile button),
.buehne.eigen .vp :is(.s-start-knopf,.s-kat-karte[data-seite],.s-zurueck,.s-zum-shop,.g-wahl label,.g-ja-nein,.g-knopf,.s-knopf,.s-mini-kasse,.s-mini-link,.s-thumb,.s-korb,.s-mini-zeile button) *{cursor:var(--hand),pointer}
.s-start-knopf,.s-knopf,.s-mini-kasse{transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}
.s-start-knopf:hover,.s-knopf:hover,.s-mini-kasse:hover{background-color:#3b7d92;border-color:#3b7d92;box-shadow:0 0 0 7px rgba(96,168,191,.32)}
.s-thumb{transition:border-color .15s ease,box-shadow .15s ease}
.s-thumb:hover{border-color:#60A8BF;box-shadow:0 0 0 3px rgba(96,168,191,.35),0 4px 14px rgba(0,0,0,.25)}
.s-korb{transition:color .15s ease}
.s-korb:hover{color:#3b7d92}
.s-zum-shop{transition:border-color .15s ease,color .15s ease}
.s-zum-shop:hover{color:#3b7d92;border-color:#3b7d92}
.s-korb b{transition:background-color .15s ease}
.s-korb:hover b{background-color:#3b7d92}
.s-mini-link{transition:color .15s ease;text-underline-offset:4px;text-decoration-thickness:2px}
.s-mini-link:hover{color:#3b7d92;text-decoration-line:underline}
.s-mini-zeile button{transition:color .15s ease}
.s-mini-zeile button:hover{color:var(--s-dunkel)}
.s-kat-karte{transition:box-shadow .15s ease,border-color .15s ease}
.s-kat-karte[data-seite]:hover{border-color:#60A8BF;box-shadow:0 0 0 3px rgba(96,168,191,.3),0 12px 28px rgba(30,40,48,.2)}
.s-kat-karte[data-seite]:hover .tt{color:#3b7d92}
.s-zurueck{transition:color .15s ease;text-underline-offset:4px;text-decoration-thickness:2px}
.s-zurueck:hover{color:#3b7d92;text-decoration-line:underline}
/* Generator: Antwortkarten wie in der Arbeitsprobe (Rand hellblau); die zwei Knöpfe mit Ring wie der Knopf der Shop-Startseite */
.g-knopf{transition:background-color .15s ease,box-shadow .15s ease}
.g-knopf:hover{background-color:#3b7d92;box-shadow:0 0 0 7px rgba(96,168,191,.32)}
.g-knopf--neben:hover{background-color:var(--g-akzent-hell)}
.g-ja-nein:hover .g-schalter-bahn{box-shadow:0 0 0 6px rgba(96,168,191,.3)}
@media (prefers-reduced-motion:reduce){.s *{transition:none !important}}

/* Sektion über Devin (P5): ein persönlicher Brief wie Devins Bewerbung und Coldmail. Weiße Karte, die mit der H2 in den ersten
   Bildschirm ragt (Anriss wie die Kosten-Karte im Original). Text über die volle Breite, am Ende Gruß mit kleinem Porträt
   (statt eines Fotos neben dem Text, das wirkte „blog mäßig“, Devin 18.10.) */
.ich{position:relative;z-index:6;box-sizing:border-box;width:calc(100% - 2 * max(24px, 5.1vw));max-width:1000px;margin:calc(-1 * var(--anriss)) auto 0;
  padding:var(--kosten-oben) 64px 52px;background:#fff;border-radius:15px;box-shadow:0 14px 40px rgba(30,40,48,.16)}
.ich h2{font-size:var(--h2);line-height:1.2;margin:0 0 .85em;max-width:19em}
.ich-text p{margin:0 0 1em;font-size:20px;line-height:1.65}
.ich-gruss{display:flex;align-items:center;gap:18px;margin-top:36px}
.ich-gruss img{display:block;width:84px;height:84px;flex:none}
.ich-gruss p{margin:0;line-height:1.35}
.ich-gruss span{display:block;font-size:18px}
.ich-gruss b{display:block;font-size:20px;font-weight:700}
@media (max-width:1099px){
  .ich{margin-top:0;width:calc(100% - 20px);padding:30px 28px 36px}
}
@media (max-width:767px){
  .ich-text p{font-size:18px}
  .ich-gruss img{width:68px;height:68px}
}

/* Weitere Sektionen nach Devin (18.10.): Team, Methode, Vorher/Nachher. Gleiche ruhige weiße Karte wie die Sektion über Devin,
   gleicher Abstand dazwischen; Text bis zum rechten Rand */
/* Offene Sektionen wie auf devinkandelhard.de (Devin 19.10.2026): keine Karten, Abstand 12vw wie dort (.blk),
   ab und zu der helle Hintergrund mit dem Seefoto (wie „Ideal für Klein-Unternehmer“) */
.ab{margin-top:12vw;font-size:20px;line-height:1.6}
.ab h2{font-size:var(--h2);line-height:1.2;margin:0 0 60px;max-width:21em}
.ab p{margin:0 0 1em;font-size:20px;line-height:1.6}
.ab p:last-child{margin-bottom:0}
.ab.hell{margin-top:9vw;padding:7vw 0;background:#fff url(/static/bilder/above-the-fold-zertifiziert-3.png) center/cover no-repeat}
.ab.hell + .ab{margin-top:9vw}
/* Illustration und Text nebeneinander, die Seite wechselt; die Illustration bleibt beim Lesen langer Texte stehen */
.ab-raster{display:grid;grid-template-columns:minmax(0, 1fr) 34%;column-gap:7%;align-items:start}
.ab-raster.bild-links{grid-template-columns:34% minmax(0, 1fr)}
.ab-bild{align-self:stretch}
.ab-bild img{position:sticky;top:110px;display:block;width:100%;max-width:380px;height:auto;margin:0 auto}
/* Zeitleiste: schieferblaue Karte wie die Personen-Karten auf devinkandelhard.de */
.karte-dunkel{border-radius:15px;padding:44px 64px 52px}
/* Team: zwei Menschen nebeneinander, darunter die Haltung */
/* Team wie die Ansprech-Partnerinnen auf devinkandelhard.de: schieferblaue Karten */
.team-karten{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-bottom:44px}
.team-karte{display:flex;gap:24px;align-items:center;background:var(--ink);color:#fff;border-radius:15px;padding:28px 30px}
.team-karte img{display:block;width:140px;height:auto;flex:none}
.team-karte h3{color:#fff;font-size:26px;line-height:1.3;margin:0 0 10px}
.team-karte p{margin:0;font-size:18px;line-height:1.6}
.team-schluss{font-weight:700}
/* Vorher/Nachher: je Kunde zwei Bilder nebeneinander mit leiser Beschriftung, darunter der Text */
.vn + .vn{margin-top:46px;padding-top:42px;border-top:1px solid #e6eaed}
.vn h3{font-size:24px;line-height:1.3;margin:0 0 18px}
.vn-bilder{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:0 0 22px}
.vn-bilder figure{margin:0}
.vn-bilder img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:10px;border:1px solid #e3e7ea;box-shadow:0 8px 22px rgba(30,40,48,.10)}
.vn-bilder figcaption{margin-top:9px;font-size:15px;color:#7b8a93}
@media (max-width:1099px){
  .ab h2{margin-bottom:44px}
}
@media (max-width:767px){
  main{--h2:32px}
  .ab p{font-size:18px}
  .ab h2{margin-bottom:32px}
  .team-karten{grid-template-columns:1fr;gap:20px}
  .team-karte{flex-direction:column;align-items:flex-start;padding:24px}
  .team-karte img{width:120px}
  .ab-raster,.ab-raster.bild-links{grid-template-columns:1fr;row-gap:28px}
  .ab-bild{order:-1}
  .ab-bild img{position:static;max-width:280px}
  .karte-dunkel{padding:30px 22px 34px}
  .vn-bilder{grid-template-columns:1fr;gap:16px}
  .vn h3{font-size:21px}
}

/* Zeitleiste, Kosten, P7 (Devin 19.10.): in offenen Sektionen (.ab). Schriftgröße auf der Karte, damit die em-Werte aus dem Original passen */
.ab .nb{white-space:nowrap}
/* Zeitleiste: schieferblaue Karte mit leichtem Schimmer oben rechts wie im Original */
.karte-dunkel{--hell-akzent:#7cc0d5;color:#fff;background:radial-gradient(120% 95% at 100% 0%, rgba(255,255,255,.17) 0%, rgba(255,255,255,.07) 30%, rgba(255,255,255,0) 62%), var(--ink)}
.karte-dunkel h2{color:#fff}
.karte-dunkel .akzent{color:var(--hell-akzent)}
.karte-dunkel .akzent path{stroke:var(--hell-akzent)}
.zl{margin-top:1.8em;font-size:.8em;line-height:1.4}
.zl-wahl{display:inline-flex;gap:4px;padding:4px;border-radius:12px;background:rgba(255,255,255,.09);margin-bottom:1.6em}
.zl-wahl button{font:inherit;font-weight:700;color:#fff;background:transparent;border:0;border-radius:9px;padding:.55em 1.2em;cursor:pointer;transition:background .2s, color .2s}
.zl-wahl button.an{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.18)}
/* Namensspalte in em, damit sie mit der Schrift wächst und „Individuelle Programmierungen“ auf einer Zeile bleibt */
.zl-zeile{display:grid;grid-template-columns:20em minmax(0, 1fr);align-items:center}
.zl-name{padding:.55em 1em .55em 0;font-weight:600;transition:color .2s}
.zl-leise{color:#aebbc3;font-weight:400}
.zl-raster{display:grid;grid-template-columns:repeat(var(--n), minmax(0, 1fr));text-align:center;font-size:.85em}
.zl-spur{position:relative;height:2.6em;background:linear-gradient(90deg, rgba(255,255,255,.13) 1px, transparent 1px) 0 0/calc(100% / var(--n)) 100%;border-right:1px solid rgba(255,255,255,.13)}
.zl-marken{height:1.7em;background:none;border:0}
.zl-marke{position:absolute;bottom:.25em;transform:translateX(-50%);white-space:nowrap;font-size:.85em;font-weight:600;color:var(--hell-akzent)}
.zl-marke.rechts{transform:translateX(-100%)}
.zl-strich{position:absolute;top:0;bottom:0;border-left:1.5px dashed rgba(124, 192, 213, .55)}
.zl-balken{position:absolute;top:28%;bottom:28%;border-radius:6px;background:var(--hell-akzent);transform:scaleX(0);transform-origin:left center;transition:transform .9s ease var(--d, 0s), opacity .25s}
.zl.gezeichnet .zl-balken{transform:none}
/* Phase antippen oder mit der Maus darüber: hervorgehoben, darunter die Erklärung (sagt immer etwas, das links nicht schon steht, Devin) */
.zl-phase{cursor:pointer}
.zl-phase:not(.aktiv) .zl-balken{opacity:.45}
.zl-phase.aktiv .zl-name{color:var(--hell-akzent)}
.zl .zl-info{margin:1.4em 0 0;min-height:3em}
@media (prefers-reduced-motion:reduce){.zl-balken{transition:none}}
@media (max-width:760px){.zl{font-size:.7em}.zl-zeile{grid-template-columns:7em minmax(0, 1fr)}.zl-raster{font-size:.8em}}

.stimmen{position:relative;display:grid;gap:1.3em;margin:0 0 2em;padding-left:1.6em}
.stimmen::before{content:"";position:absolute;left:0;top:.3em;bottom:.3em;width:1.5px;background:#60A8BF;transform:scaleY(0);transform-origin:top;transition:transform 1.4s ease}
.stimmen::after{content:"";position:absolute;left:-5px;top:.3em;bottom:.3em;width:11px;border-top:1.5px solid #60A8BF;border-bottom:1.5px solid #60A8BF;opacity:0;transition:opacity .4s ease 1.2s}
.stimmen.gezeichnet::before{transform:none}
.stimmen.gezeichnet::after{opacity:1}
.stimme{margin:0}
.stimme blockquote{margin:0;font-size:.9em;line-height:1.6}
.stimme figcaption{margin-top:.4em;font-size:.72em;color:#7d8c95}
@media (prefers-reduced-motion:reduce){.stimmen::before,.stimmen::after{transition:none}}

.sicher-liste{list-style:none;margin:1.2em 0 1.4em;padding:0;counter-reset:sicher;display:flex;flex-direction:column;gap:.9em}
.sicher-liste li{counter-increment:sicher;position:relative;padding-left:2.6em}
.sicher-liste li::before{content:counter(sicher);position:absolute;left:0;top:.15em;box-sizing:border-box;width:1.62em;height:1.62em;border-radius:50%;border:2px solid #60A8BF;color:#60A8BF;font-size:.9em;font-weight:700;display:flex;align-items:center;justify-content:center}


/* Kosten: ruhige Liste mit Stunden und Preis rechtsbündig, feine Linien statt Kästen */
.preise-ruhig{width:100%;border-collapse:collapse;margin:.4em 0 1.3em;font-size:18px;line-height:1.5}
.preise-ruhig td{padding:.75em 0;border-bottom:1px solid #e6eaed;vertical-align:top}
.preise-ruhig tr:first-child td{border-top:1px solid #e6eaed}
.preise-ruhig td:nth-child(2){padding-left:1.4em;white-space:nowrap;color:#7b8a93}
.preise-ruhig td:nth-child(3){padding-left:1.4em;white-space:nowrap;text-align:right;font-weight:700}
.preise-ruhig:last-child{margin-bottom:0}
/* feste Spaltenbreiten, damit Stunden und Preise in beiden Listen untereinander stehen */
.preise-ruhig{table-layout:fixed}
.preise-ruhig td:nth-child(2){width:8.4em;text-align:right}
.preise-ruhig td:nth-child(3){width:5.6em}
@media (max-width:767px){
  .ab{font-size:18px}
  /* Handy: Beschreibung oben über die ganze Breite, darunter Stunden links und Preis rechts */
  .preise-ruhig,.preise-ruhig tbody{display:block}
  .preise-ruhig{font-size:16px}
  .preise-ruhig tr{display:grid;grid-template-columns:1fr auto;column-gap:1em;padding:.75em 0;border-bottom:1px solid #e6eaed}
  .preise-ruhig tr:first-child{border-top:1px solid #e6eaed}
  .preise-ruhig td,.preise-ruhig tr:first-child td{padding:0;border:0}
  .preise-ruhig td:first-child{grid-column:1/-1;margin-bottom:.3em}
  .preise-ruhig td:nth-child(2),.preise-ruhig td:nth-child(3){width:auto;padding-left:0;text-align:left}
  .preise-ruhig td:nth-child(3){text-align:right}
  /* Zeitleiste: lange Namen trennen statt in die Wochen zu laufen */
  .ab .zl-name{-webkit-hyphens:auto;hyphens:auto}
}

/* P9 Kontakt (Devin 19.10.): Brief-Schluss mit Gruß wie bei der Sektion über Devin */
.kontakt .ich-gruss{margin-top:30px}

/* Generatoren (Devin 19.10.): zwei echte Kunden-Generatoren nebeneinander, hochkant, mit Link zum Ausprobieren */
.gen-bilder{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:30px 0 0}
.gen-bilder figure{margin:0}
.gen-bilder img{display:block;width:100%;height:auto;aspect-ratio:17/20;object-fit:cover;object-position:top;border-radius:10px;border:1px solid #e3e7ea;box-shadow:0 8px 22px rgba(30,40,48,.10)}
.gen-bilder figcaption{margin-top:10px;font-size:16px}
.ab a{color:inherit;text-decoration:underline;text-decoration-color:#60A8BF;text-underline-offset:3px}
.ab a:hover{color:#3b7d92}
.gen-bilder figure > a{display:block}
@media (max-width:767px){
  .gen-bilder{grid-template-columns:1fr;gap:26px}
}

/* Unterstrich (Devin 20.10.2026): 3 s lang, beginnt 1 s nachdem das Wort ganz zu sehen ist */
.akzent.gezeichnet path{animation-duration:3s;animation-delay:1s}
@media (prefers-reduced-motion:reduce){.akzent.gezeichnet path{animation-duration:0s;animation-delay:0s}}

/* Team mit vier Personen (Devin 20.10.2026): je Foto mit gezeichneter Figur, darunter Name, Aufgabe, Muttersprache; Text an der Kante des runden Fotos */
.team-vier{display:grid;grid-template-columns:1fr 1fr;gap:44px 30px;margin-bottom:44px}
.team-vier figure{margin:0}
.team-vier img{display:block;width:100%;height:auto}
.team-vier figcaption{margin-top:4px;padding-left:5%;font-size:18px;line-height:1.55}
.team-vier figcaption b{display:block;font-size:20px;margin-bottom:2px}
.team-vier figcaption span{display:block}
@media (max-width:767px){
  .team-vier{grid-template-columns:1fr;gap:30px}
}

/* Die vier klein in einer Reihe am Ende der Geschichte (Devin 20.10.2026), wie eine Unterschrift unter „Herzvolle Grüße“ */
.ich-team{margin-top:34px}
.ich-team-gruss{margin:0 0 8px;font-size:18px}
.ich-team-reihe{display:grid;grid-template-columns:repeat(3, calc((100% - 54px) / 4));justify-content:center;gap:18px}
.ich-team-reihe figure{margin:0}
.ich-team-reihe img{display:block;width:100%;height:auto}
.ich-team-reihe figcaption{padding-left:5%;font-size:14px;line-height:1.45}
.ich-team-reihe figcaption b{display:block;font-size:15px;font-weight:700}
.ich-team-reihe figcaption span{display:block}
@media (max-width:767px){
  .ich-team-reihe{grid-template-columns:1fr 1fr;gap:16px 12px}
}

/* Ablauf in sechs Schritten (Devin 20.10.2026): Raster und Abstände von devinkandelhard.de (.schritt in site.css), Bilder begrenzt */
.schritte6 .schritt-bild img{display:block;width:100%;max-width:340px;height:auto;margin:0 auto}
.schritte6 .schritt-bild img.foto{border-radius:10px;border:1px solid #e3e7ea;box-shadow:0 8px 22px rgba(30,40,48,.10)}
.schritte6 .schritt-text h3{font-size:28px;line-height:1.3;margin-bottom:18px}
.schritte6 .schritt{margin-bottom:96px}
.schritte6 .schritt:last-child{margin-bottom:0}
@media (max-width:767px){
  .schritte6 .schritt-text h3{font-size:23px}
  .schritte6 .schritt{margin-bottom:50px}
}

/* Lucama: eine Vorher-Nachher-Grafik statt zwei Einzelbildern (Devin 20.10.2026) */
.vn-eins{margin:0 0 22px}
.vn-eins img{display:block;width:100%;max-width:860px;height:auto;border-radius:10px}

/* Schritt 2 (Devin 20.10.2026): breites Bild der Konfiguratoren, deshalb mehr Platz fürs Bild als in den anderen Schritten */
.schritte6 .schritt.bild-rechts.breit{grid-template-columns:42% 53%}
.schritte6 .schritt.breit .schritt-bild img{max-width:none;border-radius:10px}
@media (max-width:767px){.schritte6 .schritt.bild-rechts.breit{grid-template-columns:1fr}}

/* Schritt 3 (Devin 20.10.2026): vier Kacheln – Vorher, Produktbild, 3D-Ansicht (dreht sich langsam von selbst), Im Einsatz */
.schritte6 .schritt.bild-links.galerie3{grid-template-columns:56% minmax(0, 1fr);column-gap:5%}
.s3-raster{display:grid;grid-template-columns:1fr 1fr;gap:16px 14px}
.s3-raster figure{margin:0}
.schritte6 .s3-raster img,.s3-raster model-viewer{display:block;width:100%;max-width:none;height:auto;aspect-ratio:4/3;object-fit:cover;margin:0;border-radius:10px;border:1px solid #e3e7ea;box-shadow:0 6px 18px rgba(30,40,48,.08)}
.s3-raster model-viewer{background:linear-gradient(#fdfefe, #eef2f4)}
.s3-raster figcaption{margin-top:6px;font-size:15px;color:#7b8a93}
@media (max-width:767px){
  .schritte6 .schritt.bild-links.galerie3{grid-template-columns:1fr}
  .s3-raster{gap:12px 10px}
  .s3-raster figcaption{font-size:14px}
}

/* Schritt 3: quadratische Kacheln, damit das hochkante Bild „Im Einsatz“ mit Kopf und Laufband passt (Devin 21.10.2026) */
.schritte6 .s3-raster img,.s3-raster model-viewer{aspect-ratio:1/1}

/* Schritt 3: Angelika klein unten links am Vorher-Bild, gespiegelt, sie fotografiert nach rechts in die Kacheln (Devin 21.10.2026) */
.s3-mit-figur{position:relative}
.schritte6 .s3-raster img.s3-angelika{position:absolute;z-index:2;left:-10%;bottom:calc(1.6em + 2px);width:18%;height:auto;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none;object-fit:contain;filter:drop-shadow(0 6px 6px rgba(30,40,48,.18));pointer-events:none}
@media (max-width:767px){.schritte6 .s3-raster img.s3-angelika{left:-8%;width:20%}}

/* Schritt 4 Korrekturschleifen (Angelika 26.10.2026): Entwurf mit Fernbedienung wie auf onlineshop-erstellen-lassen (Port 8443).
   Bühne 600 × 380, per --s auf die Breite skaliert (korrektur.js). Der Zeiger blättert zum nächsten Entwurf, markiert eine Textstelle
   und schreibt Kritik dazu; die drei Schritte unter dem Text leuchten mit */
.schritte6 .schritt-ew{--accent:var(--akzent);--font:var(--schrift);align-items:center}
.entwurf{position:relative;width:100%;aspect-ratio:600/380;border-radius:12px;overflow:hidden;background:#fff;border:1px solid #dfe6ea;box-shadow:0 10px 30px rgba(28,40,48,.10)}
.ew-buehne{position:absolute;left:0;top:0;width:600px;height:380px;transform:scale(var(--s, 1));transform-origin:0 0;font-family:var(--font);font-size:16px;color:var(--ink);line-height:1.4}
.ew-kopf{position:absolute;left:0;right:0;top:0;height:50px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid #eef1f3;font-size:14px;font-weight:700}
.ew-held{position:absolute;left:0;right:0;top:50px;bottom:0;display:grid;grid-template-columns:250px 1fr}
.ew-bild{position:relative;overflow:hidden;background:#eef1f3}
.ew-text{padding:48px 26px 0}
.ew-titel{position:relative;height:68px;font-size:27px;line-height:1.22;font-weight:700}
.ew-titel span{position:absolute;left:0;right:0;top:0;transition:opacity .5s}
.ew-titel em{font-style:normal;color:var(--accent)}
.ew-titel .t4,.ew-neu .ew-titel .t3{opacity:0}
.ew-neu .ew-titel .t4{opacity:1}
.ew-absatz{margin:16px 0 22px;font-size:16px;line-height:1.55}
.ew-mark{background:linear-gradient(rgba(96,168,191,.32), rgba(96,168,191,.32)) no-repeat 0 0/0 100%}
.ew-mark.an{background-size:100% 100%}
.ew-knopf{display:inline-block;background:var(--accent);color:#fff;font-size:15px;font-weight:700;padding:11px 18px;border-radius:8px}
.ew-fb{position:absolute;z-index:3;top:8px;left:57%;transform:translateX(-50%);display:flex;align-items:center;gap:2px;padding:3px;background:var(--ink);border-radius:999px;color:#fff;font-size:14px;font-weight:700;box-shadow:0 4px 14px rgba(28,40,48,.25)}
.ew-fb button{font:inherit;font-size:19px;line-height:1;color:#fff;background:transparent;border:0;width:32px;height:32px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}
.ew-fb button:hover{background:rgba(255,255,255,.14)}
.ew-fb span{padding:0 6px;white-space:nowrap}
.ew-kritik{position:absolute;z-index:3;font:inherit;font-size:14px;font-weight:700;color:#fff;background:var(--accent);border:0;border-radius:8px;padding:7px 13px;opacity:0;transform:translateY(4px);transition:opacity .25s, transform .25s;pointer-events:none;box-shadow:0 4px 12px rgba(28,40,48,.2)}
.ew-kritik.da{opacity:1;transform:none}
.ew-notiz{position:absolute;z-index:3;left:20px;bottom:20px;width:290px;background:#fff;border-radius:10px;padding:13px 16px;font-size:15px;line-height:1.5;box-shadow:0 0 1.5px rgba(0,0,0,.35), 0 12px 28px rgba(28,40,48,.22);opacity:0;transform:translateY(8px);transition:opacity .3s, transform .3s}
.ew-notiz.offen{opacity:1;transform:none}
.ew-notiz b{display:block;margin-bottom:3px;font-size:13px;color:var(--accent)}
.ew-tipp{display:block;min-height:1.5em}
.ew-notiz.offen .ew-tipp::after{content:"";display:inline-block;width:1px;height:1.1em;margin-left:1px;vertical-align:-2px;background:var(--ink);animation:ew-blink 1s steps(1) infinite}
.ew-gespeichert{display:block;margin-top:5px;font-size:12.5px;color:#8a979f;opacity:0;transition:opacity .3s}
.ew-gespeichert.da{opacity:1}
@keyframes ew-blink{50%{opacity:0}}
.ew-zeiger{position:absolute;z-index:5;left:0;top:0;width:34px;height:34px;pointer-events:none;transition-property:transform;transition-timing-function:cubic-bezier(.45, .05, .3, 1);filter:drop-shadow(1px 2px 2px rgba(0,0,0,.25))}
.ew-zeiger svg{display:block;width:100%;height:100%;transform-origin:4px 3px;transition:transform .15s}
.ew-zeiger.klick svg,.ew-zeiger.druck svg{transform:scale(.84)}
/* Bilder in der Bühne nicht wie die übrigen Schrittbilder behandeln */
.schritte6 .schritt .schritt-bild .entwurf img{width:auto;max-width:none;height:auto;margin:0;border-radius:0}
.schritte6 .schritt .schritt-bild .ew-kopf img{display:block;width:auto;height:24px}
.schritte6 .schritt .schritt-bild .ew-bild img{display:block;width:100%;height:100%;object-fit:cover;object-position:22% 70%;transition:object-position .8s ease}
.schritte6 .schritt .schritt-bild .ew-neu .ew-bild img{object-position:38% 62%}
/* die drei Schritte unter dem Text leuchten mit, während der Zeiger sie ausführt */
.ew-schritte{list-style:none;margin:0;padding:0;counter-reset:ew}
.ew-schritte li{counter-increment:ew;transition:color .3s, opacity .3s}
.schritte6 .ew-schritte{display:flex;flex-direction:column;gap:.7em;margin-top:1.1em;font-size:inherit;font-weight:600;color:#7d8c95}
.schritte6 .ew-schritte li{display:flex;align-items:center;gap:.8em}
.schritte6 .ew-schritte li::before{content:counter(ew);flex:none;box-sizing:border-box;width:2.1em;height:2.1em;border-radius:50%;border:1.5px solid currentColor;display:flex;align-items:center;justify-content:center;font-weight:700;transition:background .3s, color .3s, border-color .3s}
[data-schritt="1"] .ew-schritte li[data-n="1"],[data-schritt="2"] .ew-schritte li[data-n="2"],[data-schritt="3"] .ew-schritte li[data-n="3"]{color:var(--accent)}
[data-schritt="1"] .ew-schritte li[data-n="1"]::before,[data-schritt="2"] .ew-schritte li[data-n="2"]::before,[data-schritt="3"] .ew-schritte li[data-n="3"]::before{background:var(--accent);border-color:var(--accent);color:#fff}

/* Methode (Angelika 30.10.2026): weißer Grund statt hellblauer Bildkarten in den 7 Schritten (überschreibt methode.css, die bleibt unberührt) */
#ablauf .pfad .schritt .schritt-bild{background:none;padding:0;border-radius:0}
/* Schritt 1: oben das Original, Pfeil mit Angelika am Laptop, unten die Produktseite wie in der Demo; der Mauszeiger klickt die
   Bilder durch (schritt1.js). Die Vorschaubilder ragen wie in der Skizze links über den Rand, dafür rückt alles um --einzug ein */
#ablauf .s1-weg{--einzug:28px;width:100%;max-width:330px;margin:0 auto}
#ablauf .s1-weg img{max-width:none;margin:0}
#ablauf .s1-original{margin:0 0 0 var(--einzug);border:1px solid #e3e7ea;border-radius:14px;overflow:hidden;box-shadow:0 8px 22px rgba(30,40,48,.10)}
#ablauf .s1-original img{display:block;width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover;object-position:50% 58%}
#ablauf .s1-mitte{position:relative;height:88px;margin-left:var(--einzug)}
#ablauf .s1-pfeil{position:absolute;left:50%;top:8px;width:24px;height:72px;margin-left:-12px;color:#445662}
#ablauf .s1-angelika{position:absolute;left:calc(50% + 20px);bottom:0;width:auto;height:84px}
#ablauf .s1-shop{position:relative;margin-left:var(--einzug);border:1px solid #e3e7ea;border-radius:14px;background:#fff;box-shadow:0 10px 30px rgba(28,40,48,.10)}
#ablauf .s1-buehne{position:relative;aspect-ratio:1 / 1;border-radius:13px 13px 0 0;overflow:hidden;background:#fff}
/* Bildunterschrift unter dem Original und unter dem Bild im Video (wechselt mit dem Bild, schritt1.js) */
#ablauf .s1-original figcaption,#ablauf .s1-unter{padding:6px 10px 7px;border-top:1px solid #eef1f3;background:#fff;font-size:13px;font-weight:600;line-height:1.3;text-align:center;color:#445662}
#ablauf .s1-buehne > img,#ablauf .s1-buehne > model-viewer{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease}
#ablauf .s1-buehne > .an{opacity:1}
#ablauf .s1-buehne > model-viewer{background:#fff}
#ablauf .s1-thumbs{position:absolute;z-index:2;left:calc(var(--einzug) * -1);top:18px;display:flex;flex-direction:column;gap:10px}
#ablauf .s1-thumbs button{position:relative;display:block;width:52px;height:39px;padding:0;border:2px solid #fff;border-radius:7px;overflow:hidden;background:#f7f8f9 center / cover no-repeat;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.18);transition:border-color .2s, box-shadow .2s}
#ablauf .s1-thumbs button.an{border-color:#445662}
#ablauf .s1-thumbs button:not(.an):hover{border-color:#60A8BF;box-shadow:0 0 0 3px rgba(96,168,191,.35), 0 4px 14px rgba(0,0,0,.25)}
#ablauf .s1-thumbs img{display:block;width:100%;height:100%;object-fit:cover}
#ablauf .s1-thumbs em{position:absolute;right:3px;bottom:3px;padding:0 4px;border-radius:4px;background:#fff;font-style:normal;font-size:11px;font-weight:700;line-height:1.4;color:#445662}
#ablauf .s1-zeiger{position:absolute;z-index:3;left:0;top:0;width:26px;height:26px;pointer-events:none;transition-property:transform;transition-timing-function:cubic-bezier(.45,.05,.3,1);filter:drop-shadow(1px 2px 2px rgba(0,0,0,.25))}
#ablauf .s1-zeiger svg{display:block;width:100%;height:100%;transform-origin:4px 3px;transition:transform .15s}
#ablauf .s1-zeiger.klick svg{transform:scale(.84)}
@media (prefers-reduced-motion:reduce){
  #ablauf .s1-buehne > img,#ablauf .s1-buehne > model-viewer{transition:none}
}

/* Schritt 2 (Angelika 30.10.2026): das fast quadratische Bild füllt die Spalte, ohne Ränder einer 4:3-Fläche */
/* Methode (Angelika 03.11.2026): Abstände wie im Kostenabschnitt und zwischen Zeitleiste und Kosten. */
#ablauf .w1000 > h2{margin-bottom:60px}
#ablauf.schritte6 .pfad > .schritt:not(:last-child){margin-bottom:12vw}
#ablauf.schritte6 .pfad > .schritt:last-child{margin-bottom:0}
#ablauf.schritte6{margin-bottom:12vw}
#ablauf ~ #demo{margin-top:12vw}
@media (max-width:1099px){
  #ablauf .w1000 > h2{margin-bottom:44px}
}
@media (max-width:767px){
  #ablauf .w1000 > h2{margin-bottom:32px}
}
/* Schritt 2 (Angelika 30.10.2026): Fragen in der Liste so groß und in derselben Farbe wie der übrige Text */
#ablauf .pfad .kette .frage{font-size:inherit;line-height:inherit;color:inherit}
#ablauf .pfad .schritt .schritt-bild:is(.s2-bild,.s3-bild,.s5-bild,.s6-bild){aspect-ratio:auto}
#ablauf .pfad .schritt :is(.s2-bild,.s3-bild,.s6-bild) > img{height:auto;border-radius:0}
/* Schritt 5 (Angelika 30.10.2026, Schrift überall + 2 px Devin 01.11.2026): Bestellverwaltung im grünen Feld der Illustration. Das Grün ist im Bild durchsichtig, die Bestellverwaltung
   (430 × 256 px wie in schritt5.js) liegt darunter und wird dort perspektivisch eingepasst */
#ablauf .s5-buehne{position:relative;width:100%}
#ablauf .pfad .schritt .s5-buehne > img{position:relative;z-index:1;display:block;width:100%;max-width:none;height:auto;margin:0;border-radius:0}
#ablauf .s5-schirm{position:absolute;z-index:0;left:0;top:0;width:430px;height:256px;overflow:hidden;background:#f3f7f9;transform-origin:0 0;visibility:hidden;font-size:19px;line-height:1.3;color:#445662;text-align:left}
#ablauf .s5-schirm.bereit{visibility:visible}
#ablauf .s5-liste,#ablauf .s5-detail{position:absolute;inset:0;padding:16px 12px;transition:opacity .25s ease}
#ablauf .s5-detail{padding-top:14px;opacity:0}
#ablauf .s5-offen .s5-liste{opacity:0}
#ablauf .s5-offen .s5-detail{opacity:1}
#ablauf .s5-zeile{display:grid;grid-template-columns:34px minmax(0, 1fr) auto 12px;align-items:center;gap:10px;height:54px;margin-bottom:12px;padding:0 12px;border-radius:8px;background:#fff;box-shadow:0 1px 3px rgba(30,40,48,.08);transition:background-color .15s, box-shadow .15s}
#ablauf .s5-zeile.hover{background:#e9f3f6;box-shadow:inset 3px 0 0 #60A8BF}
#ablauf .s5-zeile b{font-weight:700;color:#3b7d92}
#ablauf .s5-zeile span{font-weight:600;white-space:nowrap}
#ablauf .s5-zeile.hover span{color:#3b7d92;text-decoration:underline;text-underline-offset:3px}
#ablauf .s5-zeile em{font-style:normal;font-size:25px;line-height:1;color:#b9c2c8}
#ablauf .s5-badge{display:inline-block;padding:2px 9px;border-radius:999px;background:#f2f8fa;box-shadow:inset 0 0 0 1px #cfe5ec;color:#3b7d92;font-style:normal;font-size:16px;font-weight:600;white-space:nowrap}
#ablauf .s5-badge.ok{background:#60A8BF;box-shadow:none;color:#fff}
#ablauf .s5-dkopf{display:flex;justify-content:space-between;align-items:center;height:20px;font-size:17px}
#ablauf .s5-zurueck{color:#7b8a93}
#ablauf .s5-gespeichert{font-weight:600;color:#3b7d92;opacity:0;transition:opacity .3s}
#ablauf .s5-gespeichert.da{opacity:1}
#ablauf .s5-dtitel{display:flex;align-items:center;gap:10px;margin:8px 0 14px;font-size:22px;font-weight:700}
#ablauf .s5-draster{display:grid;grid-template-columns:minmax(0, 1fr) 182px;gap:14px}
#ablauf .s5-label{margin-bottom:4px;font-size:15px;color:#7b8a93}
#ablauf .s5-feld{box-sizing:border-box;height:36px;margin-bottom:8px;padding:0 8px;border:1px solid #dde3e7;border-radius:7px;background:#fff;font-size:18px;line-height:34px;white-space:nowrap;overflow:hidden;transition:border-color .15s, box-shadow .15s}
#ablauf .s5-feld.fokus{border-color:#60A8BF;box-shadow:0 0 0 2px rgba(96,168,191,.25)}
#ablauf .s5-feld.markiert [data-s5-wert]{background:rgba(96,168,191,.35)}
#ablauf .s5-feld.fokus:not(.markiert) [data-s5-wert]::after{content:"";display:inline-block;width:1.5px;height:17px;margin-left:1px;vertical-align:-3px;background:#445662;animation:s5-blink 1s steps(1) infinite}
@keyframes s5-blink{50%{opacity:0}}
#ablauf .s5-plzort{display:grid;grid-template-columns:72px minmax(0, 1fr);gap:8px}
#ablauf .s5-artikel{font-size:16px;line-height:1.5;white-space:nowrap}
#ablauf .s5-zeiger{position:absolute;z-index:3;left:0;top:0;width:30px;height:30px;pointer-events:none;transition-property:transform;transition-timing-function:cubic-bezier(.45,.05,.3,1);filter:drop-shadow(1px 2px 2px rgba(0,0,0,.25))}
#ablauf .s5-zeiger svg{display:block;width:100%;height:100%;transform-origin:4px 3px;transition:transform .15s}
#ablauf .s5-zeiger.klick svg{transform:scale(.84)}
@media (prefers-reduced-motion:reduce){
  #ablauf .s5-liste,#ablauf .s5-detail{transition:none}
}
/* Schritt 4 (Angelika 30.10.2026): Angelika steht rechts neben dem Entwurf, die Füße auf Höhe der Unterkante, der Finger zeigt auf den Bildschirm.
   Breite 22,2 % des Entwurfs, Abstand oben 63,3 % − 53,4 % (Entwurf 600:380, Figur 266:640). Nur ab 1240 px, darunter ist neben dem Bildschirm kein Platz */
#ablauf .pfad .schritt-ew .schritt-bild{position:relative}
#ablauf .pfad .schritt-ew .schritt-bild > .ew-angelika{display:none;position:absolute;left:calc(100% + 6px);top:0;margin-top:9.9%;width:22.2%;height:auto;object-fit:fill;border-radius:0;mix-blend-mode:normal;pointer-events:none}
@media (min-width:1240px){
  #ablauf .pfad .schritt-ew .schritt-bild > .ew-angelika{display:block}
}


/* Schritt 7: echter Demo-Ratgeber hinter Sarahs Bildschirm, 02.11.2026. */
#ablauf .pfad .schritt .schritt-bild.s7-bild{aspect-ratio:auto;display:block}
#ablauf .s7-buehne{position:relative;width:100%;isolation:isolate;line-height:0}
#ablauf .pfad .schritt .s7-buehne > img{position:relative;z-index:1;display:block;width:100%;max-width:none;height:auto;margin:0;border-radius:0;mix-blend-mode:normal;pointer-events:none}
#ablauf .s7-schirm{position:absolute;z-index:0;left:6.02%;top:20.11%;width:62.71%;height:46.51%;overflow:hidden;background:#fff;pointer-events:none}
#ablauf .s7-schirm iframe{position:absolute;left:0;top:0;border:0;margin:0;max-width:none;transform-origin:0 0;background:#fff;pointer-events:none}