/* Aktions-Landingpage „Ihr Logo läuft mit.“ (sinnesro.php) — Craft Sinnesro 1 mit Firmenlogo. Präfix cs-.
   Neuaufbau 03.11.2026 (Lars: Layout unter dem Hero „komplett neu aufbauen“, Ablauf „mit horizontalen Reitern“):
   Hero über die volle Breite; darunter EIN Inhaltsrahmen .cs-inhalt (max. 1200 px, zentriert, 24 px Rand, 16 px am Handy)
   mit Abschnitten .cs-block in festem Rhythmus. Reiter (.cs-reiter) für Damen/Herren und für die fünf Schritte über
   dasselbe Muster; ohne JavaScript (.cs-js fehlt) stehen alle Inhalte untereinander.
   Shirtschleuder-CI über die Katalog-Tokens (ci/css/tokens.css): Petrol als Hausfarbe (Hero, Schlussband), Orange nur
   als Akzent/Knopf mit Petrol-tief-Schrift (nie Weiß auf Orange), Schrift Outfit, Labels Montserrat (.ss-overline).
   Keine festen Farbwerte; Dark Mode läuft über dieselben Tokens. Nur Breiten in Prozent/px — kein vw-Rechnen in
   Eigenschaften, damit jeder Browser dieselben Spalten zeigt. */
.cs-seite{margin:0 0 32px;color:var(--text);font-family:var(--font-sans)}
.cs-seite *,.cs-seite *::before,.cs-seite *::after{box-sizing:border-box}
.cs-seite h2{margin:0 0 12px;font-size:30px;line-height:1.15;font-weight:600;letter-spacing:-.015em;color:var(--text-strong)}
.cs-seite h3{margin:0;color:var(--text-strong)}
.cs-seite p{margin:0 0 12px;line-height:1.55}
.cs-kopf{max-width:760px;margin:0 0 24px}
.cs-kopf p{margin:0}
.cs-kopf .ss-overline,.cs-warum .ss-overline,.cs-mengen .ss-overline{display:block;margin-bottom:10px;color:var(--link)}
.cs-knoepfe{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0}
.cs-404{padding:48px 24px}

/* ===== Inhaltsrahmen und Abschnitte */
.cs-inhalt{max-width:1200px;margin:0 auto;padding:0 24px}
.cs-block{padding:64px 0 0}
.cs-block:first-child{padding-top:56px}

/* ===== Hero: Petrol-Fläche über die volle Breite, innen derselbe Rahmen; Text links, Film rechts (16:9); schmal untereinander */
.cs-hero{margin:0 calc(50% - 50vw);padding:56px 0;background:var(--petrol);color:var(--on-brand)}
.cs-hero-innen{display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:center;max-width:1200px;margin:0 auto;padding:0 24px}
.cs-hero-text{min-width:0}
.cs-hero-film{min-width:0}
.cs-overline{display:block;margin-bottom:14px;color:var(--on-brand);opacity:.85}
.cs-titel{margin:0 0 16px;font-size:60px;line-height:1;font-weight:700;letter-spacing:-.02em;color:var(--on-brand)}
.cs-satz{margin:0;font-size:18px;line-height:1.55;color:var(--on-brand);opacity:.92}
.cs-preis{display:grid;gap:4px;margin:24px 0 0;padding:16px 18px;border-radius:var(--radius-md);background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.cs-aktion-marke{display:inline-block;justify-self:start;padding:1px 9px;border-radius:var(--radius-pill);background:var(--accent);color:var(--on-accent);font-family:var(--font-label);font-weight:600;font-size:10px;letter-spacing:.14em;text-transform:uppercase;line-height:18px}
.cs-preis-netto{font-size:38px;line-height:1.1;font-weight:700;letter-spacing:-.02em}
.cs-preis-rest{font-size:14px;line-height:1.4;opacity:.85}
.cs-hero .cs-knoepfe .ss-btn--onbrand:hover{background:rgba(255,255,255,.12)}
.cs-hero-film{position:relative;margin:0;border-radius:var(--radius-md);overflow:hidden;background:var(--petrol-tief);box-shadow:0 18px 48px rgba(0,0,0,.28)}
.cs-video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--weiss)}
.cs-video--foto{object-fit:contain;background:var(--weiss)}
.cs-hero-film .ki-label{right:12px;top:12px;bottom:auto}
.cs-ki-hinweis{padding:8px 12px;font-size:12px;line-height:1.45;color:var(--on-brand);opacity:.85;background:var(--petrol-tief)}

/* ===== Reiter (Damen/Herren, Schritte): Leiste mit Unterstrich, Inhalt darunter; mit JavaScript nur der gewählte Inhalt */
.cs-reiter-leiste{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 24px;padding:0;list-style:none;border-bottom:2px solid var(--border)}
.cs-reiter-leiste li{margin:0;padding:0}
.cs-reiter-knopf{display:inline-flex;align-items:center;gap:10px;margin-bottom:-2px;padding:12px 18px;border-bottom:3px solid transparent;text-decoration:none;color:var(--text-muted);font-weight:600;font-size:16px;line-height:1.2;white-space:nowrap}
.cs-reiter-knopf small{font-weight:400;font-size:13px;color:var(--text-muted)}
.cs-reiter-knopf:hover{color:var(--text-strong);border-bottom-color:var(--border-strong)}
.cs-reiter-knopf[aria-selected="true"]{color:var(--text-strong);border-bottom-color:var(--accent)}
.cs-reiter-knopf:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.cs-js .cs-reiter-inhalt[hidden]{display:none}
.cs-reiter-inhalt{min-width:0}
/* Schritt-Knöpfe: Nummer im Kreis + Titel */
.cs-schritt-knopf b{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--surface);color:var(--text-strong);font-size:14px;font-weight:600;border:1px solid var(--border)}
.cs-schritt-knopf[aria-selected="true"] b{background:var(--petrol);color:var(--on-brand);border-color:var(--petrol)}
[data-theme="dark"] .cs-schritt-knopf[aria-selected="true"] b{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}

/* ===== Modelle: Farbkarten (3 nebeneinander), Größentabelle */
.cs-abteilung{margin:0 0 16px;font-size:20px;line-height:1.3;font-weight:600}
.cs-abteilung span{font-weight:400;font-size:15px;color:var(--text-muted)}
.cs-karten{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;margin:0;padding:0;list-style:none}
.cs-karte{display:flex;flex-direction:column;min-width:0;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-card);overflow:hidden}
.cs-karte-bild{position:relative;display:block;width:100%;aspect-ratio:4/3;background:var(--weiss);overflow:hidden}
.cs-karte-bild img,.cs-karte-bild video{display:block;width:100%;height:100%;object-fit:cover;object-position:center 58%}
.cs-karte-bild video{object-fit:contain}
.cs-karte-bild .ki-label{left:10px;top:10px;right:auto;bottom:auto}
.cs-lupe{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--weiss);color:var(--petrol);font-family:var(--font-label);font-weight:500;font-size:11px;letter-spacing:.1em;text-transform:uppercase;cursor:zoom-in;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.cs-lupe:hover,.cs-lupe:focus-visible{background:var(--petrol);color:var(--on-brand);border-color:var(--petrol);outline:none}
.cs-lupe:focus-visible{box-shadow:0 0 0 3px var(--focus)}
/* Vergrößerung: ein <dialog> für alle Drehclips (sinnesro.js füllt src und Titel) */
.cs-dialog{border:0;padding:0;margin:auto;width:min(1100px,94vw,calc((92vh - 120px) * 4 / 3));max-width:none;max-height:none;background:transparent;color:var(--text)}
.cs-dialog[data-format="16/9"]{width:min(1100px,94vw,calc((92vh - 120px) * 16 / 9))}
.cs-dialog::backdrop{background:rgba(13,17,23,.78)}
.cs-dialog-innen{display:grid;border-radius:var(--radius-md);overflow:hidden;background:var(--bg-card);border:1px solid var(--border)}
.cs-dialog-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:var(--petrol);color:var(--on-brand)}
.cs-dialog-kopf .ss-overline{color:var(--on-brand);margin:0}
.cs-dialog-zu{border:1px solid rgba(255,255,255,.45);border-radius:var(--radius-pill);background:transparent;color:var(--on-brand);padding:5px 12px;font-family:var(--font-label);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.cs-dialog-zu:hover,.cs-dialog-zu:focus-visible{background:var(--on-brand);color:var(--petrol);outline:none}
.cs-dialog-bild{position:relative;background:var(--weiss);aspect-ratio:4/3}
.cs-dialog-bild[data-format="16/9"]{aspect-ratio:16/9;background:var(--petrol-tief)}
.cs-lupe--hero{right:12px;bottom:auto;top:12px;left:auto}
.cs-hero-film .cs-lupe--hero{right:auto;left:12px}
.cs-dialog-bild video{display:block;width:100%;height:100%;object-fit:contain}
.cs-dialog-bild .ki-label{left:12px;top:12px;right:auto;bottom:auto}
.cs-dialog-fuss{margin:0;padding:10px 16px;font-size:12px;line-height:1.5;color:var(--text-muted)}
.cs-360{position:absolute;right:10px;top:10px;padding:3px 9px;border-radius:var(--radius-pill);background:var(--petrol);color:var(--on-brand);font-family:var(--font-label);font-weight:600;font-size:11px;letter-spacing:.1em}
.cs-karte-text{display:grid;gap:3px;padding:14px 16px 16px;font-size:14px;line-height:1.4}
.cs-karte-text strong{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:600;color:var(--text-strong)}
.cs-punkt{width:14px;height:14px;border-radius:50%;background:var(--f,transparent);box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.cs-karte-text em{font-style:normal;color:var(--text-muted)}
.cs-karte-preis{margin-top:8px;font-size:17px;font-weight:600;color:var(--text-strong)}
.cs-karte-text small{font-size:12px;color:var(--text-muted)}
.cs-karte-link{margin-top:10px;font-family:var(--font-label);font-weight:500;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--link);text-decoration:none}
.cs-karte-link:hover{text-decoration:underline}
.cs-ki-zeile{margin:12px 0 0;font-size:12px;color:var(--text-muted)}
.cs-gt-rahmen{margin:24px 0 0;overflow-x:auto}
.cs-gt-rahmen:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.cs-gt{border-collapse:collapse;font-size:13px;line-height:18px;font-variant-numeric:tabular-nums}
.cs-gt caption{text-align:left;padding:0 0 6px;font-size:13px;line-height:1.45;color:var(--text-muted)}
.cs-gt th,.cs-gt td{padding:5px 9px;text-align:center;white-space:nowrap;border-bottom:1px solid var(--border);color:var(--text)}
.cs-gt th[scope="row"]{position:sticky;left:0;text-align:left;font-weight:600;background:var(--bg-card);color:var(--text-strong)}
.cs-gt thead th{font-weight:700;color:var(--text-strong)}

/* ===== Patch: zwei große Seitenfotos (linker Schuh gespiegelt, rechter Schuh) mit der Druckfläche als Fünfeck;
   das Fünfeck kommt aus Lars' Druckvorlage schuhedruck.pdf (KT_CS_DRUCKFLAECHE, Pixel des 1300×628-Ausschnitts) und liegt
   als SVG mit demselben viewBox über dem Bild — .cs-patch-rahmen umschließt nur das Bild, nicht die Bildunterschrift.
   Bild medien/craft/sinnesro-1-white-aussen.webp = Ausschnitt 650×314 des Katalogfotos cr-c18877_1000, auf 1300×628 vergrößert. */
.cs-patch-paar{display:grid;gap:20px;margin:0 0 28px}
.cs-patch{margin:0;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;background:var(--weiss)}
.cs-patch-rahmen{position:relative;display:block;width:100%}
.cs-patch-rahmen img{display:block;width:100%;height:auto}
.cs-patch-rahmen--spiegel img{transform:scaleX(-1)}
.cs-patch-flaeche{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.cs-patch-flaeche polygon{fill:rgba(239,126,7,.12);stroke:var(--orange);stroke-width:3;stroke-dasharray:12 8;stroke-linejoin:miter;vector-effect:non-scaling-stroke;animation:cs-puls-linie 2.4s ease-in-out infinite}
.cs-patch-marke{position:absolute;left:var(--mx,50%);top:var(--my,60%);transform:translate(-50%,14px);white-space:nowrap;padding:4px 12px;border-radius:var(--radius-pill);background:var(--petrol);color:var(--weiss);font-family:var(--font-label);font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase;pointer-events:none}
.cs-patch-marke b{font-weight:500}
.cs-patch figcaption{padding:8px 14px;font-size:12px;color:var(--text-muted);background:var(--bg-card);border-top:1px solid var(--border)}
.cs-patch figcaption b{color:var(--text);font-weight:600}
@keyframes cs-puls-linie{0%,100%{stroke-width:3}50%{stroke-width:5}}
@media(prefers-reduced-motion:reduce){.cs-patch-flaeche polygon{animation:none}}
.cs-fakten{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.cs-fakten li{position:relative;padding-left:26px;line-height:1.5}
.cs-fakten li::before{content:"";position:absolute;left:0;top:.55em;width:14px;height:8px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.cs-fakten--zwei{grid-template-columns:1fr 1fr;gap:12px 32px;margin-top:0}

/* ===== Ablauf: Schritte als waagerechte Reiter, darunter der gewählte Schritt groß */
.cs-schritte-leiste{counter-reset:none}
.cs-schritt{display:grid;grid-template-columns:120px 1fr;gap:32px;align-items:start;padding:28px 32px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface)}
.cs-schritt-nr{font-size:64px;line-height:1;font-weight:700;letter-spacing:-.03em;color:var(--petrol)}
.cs-schritt-nr small{font-size:20px;font-weight:500;color:var(--text-muted);letter-spacing:0}
[data-theme="dark"] .cs-schritt-nr{color:var(--accent)}
.cs-schritt-text{min-width:0}
.cs-schritt-text h3{margin:0 0 10px;font-size:22px;line-height:1.25;font-weight:600}
.cs-schritt-text p{max-width:62ch;font-size:17px;line-height:1.6}
.cs-schritt-weiter{display:inline-block;margin-top:6px;font-family:var(--font-label);font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--link);text-decoration:none}
.cs-schritt-weiter:hover{text-decoration:underline}
/* ohne JavaScript: alle Schritte untereinander, mit Abstand */
.cs-reiter--schritte .cs-schritt + .cs-schritt{margin-top:12px}
.cs-ablauf-satz{margin:20px 0 0;font-size:14px;color:var(--text-muted)}

/* ===== Warum + Mengen nebeneinander */
.cs-warum{display:grid;grid-template-columns:7fr 5fr;gap:48px}
.cs-warum-text{min-width:0}
.cs-mengen{min-width:0;padding:28px;border-radius:var(--radius-md);background:var(--petrol-hell);color:var(--text)}
[data-theme="dark"] .cs-mengen,[data-theme="dark"] .cs-karte,[data-theme="dark"] .cs-dialog-innen,[data-theme="dark"] .cs-gt th[scope="row"],[data-theme="dark"] .cs-patch figcaption{background:var(--surface)}
.cs-mengen h2{font-size:24px}
.cs-mengen p{margin:0 0 10px}
.cs-groessen-satz{font-size:14px;color:var(--text-muted)}

/* ===== FAQ */
.cs-faq{max-width:820px}
.cs-frage{border-top:1px solid var(--border)}
.cs-frage:last-of-type{border-bottom:1px solid var(--border)}
.cs-frage summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;cursor:pointer;font-size:17px;font-weight:600;color:var(--text-strong);list-style:none}
.cs-frage summary::-webkit-details-marker{display:none}
.cs-frage summary::after{content:"+";flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--border-strong);display:grid;place-items:center;font-weight:400;font-size:20px;line-height:1;color:var(--text-strong)}
.cs-frage[open] summary::after{content:"–"}
.cs-frage summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.cs-frage p{margin:0 0 18px;line-height:1.6}

/* ===== Schlussband und Fußnote */
.cs-schluss{margin:64px calc(50% - 50vw) 0;padding:48px 0;background:var(--petrol);color:var(--on-brand)}
.cs-schluss-innen{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px 40px;max-width:1200px;margin:0 auto;padding:0 24px}
.cs-schluss h2{color:var(--on-brand);font-size:34px}
.cs-schluss p{margin:0;color:var(--on-brand);opacity:.9}
.cs-schluss .cs-knoepfe{margin:0}
.cs-fuss{max-width:1200px;margin:20px auto 0;padding:0 24px;font-size:12px;line-height:1.55;color:var(--text-muted)}

/* ===== Schmal */
@media(max-width:960px){
    .cs-hero-innen{grid-template-columns:1fr;gap:28px}
    .cs-titel{font-size:44px}
    .cs-warum{grid-template-columns:1fr;gap:32px}
    .cs-karten{gap:14px}
    .cs-schritt{grid-template-columns:72px 1fr;gap:20px;padding:22px}
    .cs-schritt-nr{font-size:44px}
    .cs-fakten--zwei{grid-template-columns:1fr}
}
@media(max-width:700px){
    .cs-seite h2{font-size:26px}
    .cs-block{padding-top:48px}
    .cs-hero{padding:36px 0}
    .cs-titel{font-size:38px}
    .cs-karten{grid-template-columns:1fr;gap:12px}
    .cs-karte{flex-direction:row}
    .cs-karte-bild{flex:0 0 42%;aspect-ratio:1/1;align-self:stretch}
    .cs-karte-text{padding:12px 14px}
    .cs-reiter-knopf{padding:10px 12px;font-size:15px}
    .cs-reiter-leiste{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}
    .cs-schritt{grid-template-columns:1fr;gap:8px;padding:18px}
    .cs-schritt-nr{font-size:36px}
    .cs-schritt-text p{font-size:16px}
    .cs-patch-marke{font-size:10px;padding:3px 8px;transform:translate(-50%,8px)}
    .cs-schluss h2{font-size:28px}
}
@media(max-width:600px){
    .cs-inhalt,.cs-hero-innen,.cs-schluss-innen,.cs-fuss{padding-left:16px;padding-right:16px}
    .cs-404{padding:32px 16px}
}

/* ===== Gestalter (Lars 06.11.2026): Farbwahl, Motiv aus „Meine Motive“, Platzierung auf beiden Schuhen.
   Das alte .cs-patch-flaeche-SVG ist zum Gestalter (.cs-gestalt) geworden: dieselbe Druckfläche, aber anklickbar,
   mit Motiv (clipPath = Druckfläche), Rahmen, Skalier- und Drehgriff. sinnesro-gestalter.js setzt .cs-gestalter-an. */
.cs-etappen{display:flex;flex-wrap:wrap;gap:8px 24px;margin:0 0 20px;padding:0;list-style:none;font-size:14px;color:var(--text-muted)}
.cs-etappen li{display:flex;align-items:center;gap:8px}
.cs-etappen b{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--petrol);color:var(--on-brand);font-size:12px}
[data-theme="dark"] .cs-etappen b{background:var(--accent);color:var(--on-accent)}
.cs-gestalter{margin:0 0 28px;padding:20px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface)}
.cs-gestalter-leiste{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;margin:0 0 16px}
.cs-farbwahl{display:flex;flex-wrap:wrap;gap:8px}
.cs-farbe{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--border-strong);border-radius:var(--radius-pill);background:var(--bg);color:var(--text);font:inherit;font-size:15px;cursor:pointer}
.cs-farbe:hover{border-color:var(--text-strong)}
.cs-farbe[aria-checked="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent);color:var(--text-strong);font-weight:600}
.cs-farbe:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.cs-motivwahl{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.cs-motiv-stand{font-size:14px;color:var(--text-muted)}
.cs-hat-motiv .cs-motiv-stand{color:var(--text-strong);font-weight:600}
.cs-js-nur{display:none}
.cs-gestalter-an .cs-js-nur{display:inline-flex}
.cs-gestalter .cs-patch-paar{grid-template-columns:1fr 1fr;margin:0}
.cs-gestalt{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;touch-action:none}
.cs-flaeche-feld{fill:rgba(239,126,7,.12);stroke:var(--orange);stroke-width:3;stroke-dasharray:12 8;vector-effect:non-scaling-stroke;animation:cs-puls-linie 2.4s ease-in-out infinite}
.cs-gestalter-an .cs-flaeche-feld{cursor:pointer}
.cs-gestalter-an .cs-flaeche-feld:hover{fill:rgba(239,126,7,.22)}
.cs-hat-motiv .cs-flaeche-feld{fill:transparent;animation:none;stroke-width:2;stroke-opacity:.7}
.cs-gestalt image{cursor:move}
.cs-griffe{outline:none}
.cs-rahmen{fill:transparent;stroke:var(--petrol);stroke-width:1.5;stroke-dasharray:6 5;vector-effect:non-scaling-stroke;cursor:move}
.cs-griffe:focus .cs-rahmen,.cs-griffe:focus-visible .cs-rahmen{stroke:var(--focus);stroke-width:3;stroke-dasharray:none}
.cs-griff{fill:var(--weiss);stroke:var(--petrol);stroke-width:2;vector-effect:non-scaling-stroke}
.cs-griff--groesse{cursor:nwse-resize}
.cs-griff--dreh{cursor:grab}
.cs-dreh-stiel{stroke:var(--petrol);stroke-width:1.5;vector-effect:non-scaling-stroke}
.cs-zieht .cs-griff--dreh{cursor:grabbing}
.cs-ecke{position:absolute;top:10px;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--petrol);border-radius:var(--radius-pill);background:var(--weiss);color:var(--petrol);font-family:var(--font-label);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.cs-ecke span[aria-hidden]{font-size:16px;line-height:1}
.cs-ecke--links{left:10px}
.cs-ecke--rechts{right:10px}
.cs-ecke:hover,.cs-ecke:focus-visible{background:var(--petrol);color:var(--on-brand);outline:none}
.cs-ecke:focus-visible{box-shadow:0 0 0 3px var(--focus)}
.cs-werkzeug{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;margin:16px 0 0}
.cs-werkzeug[hidden]{display:none}
.cs-regler{display:grid;grid-template-columns:auto 1fr 48px;align-items:center;gap:10px;font-size:14px;color:var(--text)}
.cs-regler input{accent-color:var(--accent);width:100%}
.cs-regler output{font-variant-numeric:tabular-nums;color:var(--text-muted);text-align:right}
.cs-werkzeug-knoepfe{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px}
.cs-werkzeug-knopf{padding:7px 12px;border:1px solid var(--border-strong);border-radius:var(--radius-pill);background:var(--bg);color:var(--text);font:inherit;font-size:13px;cursor:pointer}
.cs-werkzeug-knopf:hover,.cs-werkzeug-knopf:focus-visible{border-color:var(--text-strong);outline:none}
.cs-werkzeug-knopf--weg{color:var(--text-muted)}
.cs-gestalter-hilfe{grid-column:1/-1;margin:0;font-size:13px;color:var(--text-muted)}

/* Motive-Dialog und Warnung */
.cs-motive{border:0;padding:0;margin:auto;width:min(1180px,96vw);max-width:none;height:min(860px,92vh);max-height:none;background:transparent;color:var(--text)}
.cs-motive::backdrop,.cs-warnung::backdrop{background:rgba(13,17,23,.78)}
.cs-motive-innen{display:grid;grid-template-rows:auto auto 1fr;height:100%;border-radius:var(--radius-md);overflow:hidden;background:var(--bg);border:1px solid var(--border)}
.cs-motive-satz{margin:0;padding:10px 16px;font-size:14px;color:var(--text-muted);border-bottom:1px solid var(--border)}
.cs-motive-rahmen{display:block;width:100%;height:100%;border:0;background:var(--bg)}
.cs-warnung{border:0;padding:0;margin:auto;width:min(560px,94vw);background:transparent;color:var(--text)}
.cs-warnung-innen{padding:24px;border-radius:var(--radius-md);background:var(--bg);border:1px solid var(--border);border-top:4px solid var(--accent)}
.cs-warnung h2{margin:0 0 10px;font-size:22px;color:var(--text-strong)}
.cs-warnung-wahl{display:grid;gap:10px;margin:18px 0 0}
.cs-warnung-option{display:grid;gap:3px;padding:12px 14px;text-align:left;border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--surface);color:var(--text);font:inherit;cursor:pointer}
.cs-warnung-option b{color:var(--text-strong)}
.cs-warnung-option span{font-size:13px;color:var(--text-muted)}
.cs-warnung-option:hover,.cs-warnung-option:focus-visible{border-color:var(--accent);outline:none}
.cs-warnung-zurueck{justify-self:start;padding:6px 0;border:0;background:none;color:var(--link);font:inherit;font-size:14px;cursor:pointer;text-decoration:underline}

/* Bestellliste */
.cs-bestellen{margin:40px 0 0;scroll-margin-top:calc(var(--kopf, 64px) + 16px)}
.cs-bestellen-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 32px;margin:0 0 16px}
.cs-bestellen-kopf h3{margin:0 0 6px;font-size:22px}
.cs-bestellen-satz{max-width:62ch;font-size:14px;color:var(--text-muted)}
.cs-modus{display:inline-flex;padding:3px;border:1px solid var(--border-strong);border-radius:var(--radius-pill);background:var(--surface)}
.cs-modus-knopf{padding:8px 14px;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--text);font:inherit;font-size:14px;cursor:pointer;white-space:nowrap}
.cs-modus-knopf[aria-pressed="true"]{background:var(--petrol);color:var(--on-brand);font-weight:600}
[data-theme="dark"] .cs-modus-knopf[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.cs-modus-knopf:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.cs-staffel-kopf{margin:4px 0 12px}
.cs-staffel-titel{margin:0;font-size:22px;line-height:1.25;color:var(--text-strong)}
.cs-staffel-unter{margin:4px 0 0;font-size:14px;color:var(--text-muted)}
/* Staffel als aufsteigende Treppe (Lars 06.11.2026: „intensiver anzeigen“) — je Stufe kräftiger, aktive Stufe gefüllt */
.cs-staffel{display:grid;grid-template-columns:repeat(4,1fr);align-items:end;gap:10px;margin:0 0 24px;padding:0;list-style:none}
.cs-staffel li{position:relative;display:grid;gap:4px;align-content:end;min-height:calc(118px + var(--stufe) * 16px);padding:16px 16px 14px;border:2px solid var(--petrol);border-radius:var(--radius-md);background:var(--bg);transition:transform .15s,box-shadow .15s}
.cs-staffel li[style*="--stufe:0"]{border-color:var(--border-strong)}
.cs-staffel b{font-size:30px;line-height:1.1;font-weight:700;color:var(--text-strong);font-variant-numeric:tabular-nums}
.cs-staffel small{font-size:13px;color:var(--text-muted)}
.cs-stufe-menge{font-size:15px;font-weight:600;color:var(--text-strong)}
.cs-stufe-rabatt{position:absolute;top:-14px;right:12px;padding:4px 12px;border-radius:var(--radius-pill);background:var(--accent);color:var(--on-accent);font-size:16px;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.cs-stufe-noch{font-style:normal;font-size:13px;font-weight:700;color:var(--text-strong)}
.cs-stufe-noch[hidden]{display:none}
.cs-staffel li.cs-stufe--aktiv{background:var(--petrol);border-color:var(--petrol);transform:translateY(-4px);box-shadow:0 10px 24px -8px rgba(14,39,37,.55)}
.cs-staffel li.cs-stufe--aktiv :is(b,small,.cs-stufe-menge,.cs-stufe-noch){color:var(--on-brand)}
.cs-staffel li.cs-stufe--naechste{border-color:var(--accent);border-style:dashed}
.cs-staffel li.cs-stufe--naechste .cs-stufe-noch{color:var(--accent)}
[data-theme="dark"] .cs-staffel li{border-color:var(--border-strong)}
[data-theme="dark"] .cs-staffel li.cs-stufe--aktiv{background:var(--surface);border-color:var(--accent)}
[data-cs-modus="muster"] .cs-staffel{opacity:.55}
.cs-bestellen-raster{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
.cs-liste{margin:0 0 20px}
.cs-liste-titel{margin:0 0 8px;font-size:17px;color:var(--text-strong)}
.cs-liste-titel span{font-weight:400;font-size:14px;color:var(--text-muted)}
.cs-liste-rahmen{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg)}
.cs-liste-rahmen:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.cs-mengen-tabelle{border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.cs-mengen-tabelle th,.cs-mengen-tabelle td{padding:6px 4px;border-bottom:1px solid var(--border);text-align:center;white-space:nowrap}
.cs-mengen-tabelle thead th{font-weight:600;color:var(--text-strong);line-height:1.15}
.cs-mengen-tabelle thead th small{display:block;font-weight:400;font-size:11px;color:var(--text-muted)}
.cs-mengen-tabelle th[scope="row"],.cs-ecke-th{position:sticky;left:0;z-index:1;padding:6px 10px;text-align:left;background:var(--bg);color:var(--text-strong);font-weight:600}
.cs-mengen-tabelle th[scope="row"] .cs-punkt{display:inline-block;vertical-align:-2px;margin-right:6px}
.cs-farbzeile--gewaehlt th[scope="row"]{box-shadow:inset 3px 0 0 var(--accent)}
.cs-menge{width:46px;padding:5px 2px;border:1px solid var(--border-strong);border-radius:6px;background:var(--bg);color:var(--text);font:inherit;text-align:center;-moz-appearance:textfield}
.cs-menge::-webkit-outer-spin-button,.cs-menge::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cs-menge:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:transparent}
.cs-zelle--voll .cs-menge{border-color:var(--accent);background:var(--petrol-hell);font-weight:600;color:var(--text-strong)}
.cs-zelle--aus{color:var(--text-muted);opacity:.6}
.cs-verf{display:flex;align-items:center;justify-content:center;gap:3px;margin-top:3px;font-size:10.5px;line-height:1;color:var(--text-muted)}
.cs-verf .ampel{width:7px;height:7px}
.cs-zelle--knapp .cs-menge{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}
.cs-zelle--knapp .cs-verf{color:var(--red);font-weight:600}
.cs-verf-legende{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:-8px;font-size:12.5px;color:var(--text-muted)}
.cs-verf-legende span{display:inline-flex;align-items:center;gap:6px}
.cs-muster-wahl{display:none;position:relative;width:30px;height:30px;margin:0 auto;cursor:pointer}
.cs-muster-wahl input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.cs-muster-wahl span{display:block;width:22px;height:22px;margin:4px;border:1.5px solid var(--border-strong);border-radius:6px;background:var(--bg)}
.cs-muster-wahl input:checked + span{background:var(--accent);border-color:var(--accent)}
.cs-muster-wahl input:checked + span::after{content:"";display:block;width:10px;height:5px;margin:6px 0 0 5px;border-left:2px solid var(--on-accent);border-bottom:2px solid var(--on-accent);transform:rotate(-45deg)}
.cs-muster-wahl input:focus-visible + span{outline:2px solid var(--focus);outline-offset:2px}
[data-cs-modus="muster"] .cs-menge{display:none}
[data-cs-modus="muster"] .cs-muster-wahl{display:block}
.cs-summe{position:sticky;top:calc(var(--kopf, 64px) + 16px);display:grid;gap:10px;padding:20px;border-radius:var(--radius-md);background:var(--petrol-hell);color:var(--text)}
[data-theme="dark"] .cs-summe{background:var(--surface);border:1px solid var(--border)}
.cs-summe h3{margin:0;font-size:18px}
.cs-summe-liste{display:grid;grid-template-columns:1fr;gap:2px;margin:0}
.cs-summe-liste dt{font-weight:600;color:var(--text-strong)}
.cs-summe-liste dd{margin:0 0 6px;font-size:13px;color:var(--text-muted)}
.cs-summe-betrag{display:flex;justify-content:space-between;align-items:baseline;margin:0;padding-top:8px;border-top:1px solid var(--border)}
.cs-summe-betrag b{font-size:24px;color:var(--text-strong);font-variant-numeric:tabular-nums}
.cs-summe-klein{margin:0;font-size:12px;color:var(--text-muted)}
.cs-summe-tipp{margin:0;font-size:13px;font-weight:600;color:var(--link)}
.cs-summe-warn{margin:0;padding:8px 10px;border-radius:6px;font-size:13px;background:var(--bg);border-left:3px solid var(--accent)}
.cs-in-korb{width:100%;justify-content:center}
.cs-meldung{margin:12px 0 0;padding:10px 14px;border-radius:var(--radius-md);background:var(--surface);border-left:3px solid var(--petrol);font-size:14px}
.cs-meldung--fehler{border-left-color:var(--accent);font-weight:600}
.cs-staffel-satz{margin:16px 0 0;font-size:15px;line-height:1.5;color:var(--on-brand);opacity:.9}

@media(max-width:960px){
    .cs-bestellen-raster{grid-template-columns:1fr}
    .cs-summe{position:static}
    .cs-staffel{grid-template-columns:1fr 1fr;row-gap:22px}.cs-staffel b{font-size:24px}
}
@media(max-width:700px){
    .cs-gestalter{padding:12px}
    .cs-gestalter .cs-patch-paar{grid-template-columns:1fr}
    .cs-werkzeug{grid-template-columns:1fr}
    .cs-ecke{top:6px;padding:5px 9px;font-size:11px}
    .cs-ecke--links{left:6px}.cs-ecke--rechts{right:6px}
    .cs-modus{width:100%}.cs-modus-knopf{flex:1;white-space:normal}
}

/* Verschiedene Motive links/rechts (Lars 06.11.2026): Umschalter in der Leiste, der bearbeitete Schuh ist orange umrandet */
.cs-paar-modus{display:inline-flex;flex-wrap:wrap;padding:3px;border:1px solid var(--border-strong);border-radius:var(--radius-pill);background:var(--bg)}
.cs-gestalter-an .cs-paar-modus.cs-js-nur{display:inline-flex}
.cs-paar-modus .cs-modus-knopf{font-size:13px;padding:7px 12px}
.cs-getrennt .cs-patch{transition:box-shadow .15s}
.cs-getrennt .cs-patch--aktiv{box-shadow:0 0 0 3px var(--accent)}
.cs-werkzeug-fuer{grid-column:1/-1;margin:0;font-size:13px;font-weight:600;color:var(--text-strong)}
.cs-werkzeug-fuer[hidden]{display:none}
@media(max-width:700px){.cs-paar-modus{width:100%;border-radius:var(--radius-md)}.cs-paar-modus .cs-modus-knopf{flex:1;white-space:normal}}

/* Motivsets (Lars 06.11.2026): Reiter je Set + „Schuh mit weiterem Motiv“, Name je Set (verschieden) */
.cs-set-tafel{display:grid;gap:10px;margin:0 0 16px;padding:0 0 16px;border-bottom:1px solid var(--border)}
.cs-gestalter-an .cs-set-tafel.cs-js-nur{display:grid}
.cs-sets{display:flex;flex-wrap:wrap;gap:8px}
.cs-set .cs-punkt{flex:none}
.cs-set,.cs-set-neu{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--bg);color:var(--text);font:inherit;font-size:14px;cursor:pointer}
.cs-set small{font-size:12px;color:var(--text-muted)}
.cs-set[aria-selected="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent);color:var(--text-strong);font-weight:600}
.cs-set--ohne span::after{content:" · ohne Logo";font-weight:400;font-size:12px;color:var(--text-muted)}
.cs-set-neu{border-style:dashed;color:var(--link);font-weight:600}
.cs-set-neu span{font-size:18px;line-height:1}
.cs-set:hover,.cs-set-neu:hover,.cs-set:focus-visible,.cs-set-neu:focus-visible{border-color:var(--text-strong);outline:none}
.cs-set-name-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.cs-set-name{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;color:var(--text)}
.cs-set-name input{min-width:240px;padding:7px 10px;border:1px solid var(--border-strong);border-radius:6px;background:var(--bg);color:var(--text);font:inherit}
.cs-set-name input:focus{outline:2px solid var(--focus);outline-offset:1px}
.cs-set-name input[aria-invalid="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.cs-set-fehler{margin:0;font-size:13px;font-weight:600;color:var(--text-strong);border-left:3px solid var(--accent);padding-left:8px}
.cs-set-fehler[hidden]{display:none}
.cs-liste-fuer{margin:0 0 12px;padding:8px 12px;border-radius:6px;background:var(--petrol-hell);font-size:14px;font-weight:600;color:var(--text-strong)}
[data-theme="dark"] .cs-liste-fuer{background:var(--surface)}
.cs-liste-fuer[hidden]{display:none}
.cs-summe-fehlt{color:var(--text-strong)}

/* Vorschau: beide Schuhe groß, ohne Druckfläche, Rahmen, Griffe und Knöpfe */
.cs-ansicht-knopf{display:none;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--petrol);border-radius:var(--radius-pill);background:var(--bg);color:var(--petrol);font-family:var(--font-label);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
[data-theme="dark"] .cs-ansicht-knopf{color:var(--text-strong);border-color:var(--border-strong)}
.cs-gestalter-an .cs-ansicht-knopf.cs-js-nur{display:inline-flex}
.cs-ansicht-knopf:hover,.cs-ansicht-knopf:focus-visible{background:var(--petrol);color:var(--on-brand);outline:none}
.cs-ansicht{border:0;padding:0;margin:auto;width:min(1500px,97vw);max-width:none;max-height:95vh;background:transparent;color:var(--text)}
.cs-ansicht::backdrop{background:rgba(13,17,23,.85)}
.cs-ansicht-innen{display:grid;grid-template-rows:auto 1fr auto;max-height:95vh;border-radius:var(--radius-md);overflow:hidden;background:var(--bg);border:1px solid var(--border)}
.cs-ansicht-inhalt{overflow:auto;padding:16px;display:grid;gap:24px}
.cs-ansicht-set h3{margin:0 0 10px;font-size:18px;color:var(--text-strong)}
.cs-ansicht-paar{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cs-ansicht-schuh{margin:0;border-radius:var(--radius-md);overflow:hidden;background:var(--weiss)}
.cs-ansicht-schuh figcaption{padding:6px 12px;font-size:12px;color:var(--text-muted);background:var(--bg)}
.cs-ansicht .cs-patch-rahmen{pointer-events:none}
.cs-ansicht .cs-griffe,.cs-ansicht .cs-ecke,.cs-ansicht .cs-patch-marke{display:none!important}
.cs-ansicht .cs-flaeche-feld{fill:none!important;stroke:none!important;animation:none!important}
@media(max-width:800px){.cs-ansicht-paar{grid-template-columns:1fr}.cs-set-name input{min-width:0;width:100%}}
.cs-summe-muster{position:relative;padding-left:16px;font-size:13px;line-height:1.45;color:var(--text)}
.cs-summe-muster::before{content:"";position:absolute;left:2px;top:.45em;width:8px;height:5px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
/* Raster-Spalte darf schrumpfen, sonst schiebt die Mengentabelle die Seite auf dem Handy seitlich (Tabelle scrollt im Rahmen) */
.cs-bestellen-raster>*{min-width:0}
.cs-liste-rahmen{max-width:100%;overflow-x:auto}
.cs-liste-fuer a{color:inherit;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:3px}
.cs-liste-fuer a:hover,.cs-liste-fuer a:focus-visible{color:var(--link);outline:none}
#cs-motivsets{scroll-margin-top:96px}

/* Modellname „Sinnesro 1“ (Lars 07.11.2026): die 1 gehört zum Namen — fett, untrennbar, orange unterlegt */
.cs-modellname{white-space:nowrap;font-weight:700;color:inherit;padding:0 .15em;border-radius:3px;
  background:linear-gradient(transparent 58%,color-mix(in srgb,var(--accent) 38%,transparent) 58%)}
.cs-overline .cs-modellname{color:inherit;font-weight:800;letter-spacing:.06em}
.breadcrumb .cs-modellname{font-weight:600;color:inherit}
/* Rückfrage „Motiv wechseln“: die Wahl, die zum angetippten Schuh passt, steht vorn */
.cs-warnung-option[data-cs-vorschlag]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}

/* Vorschau als PDF mailen (Lars 07.11.2026) */
.cs-ansicht-mail{display:flex;flex-wrap:wrap;align-items:end;gap:10px 14px;padding:14px 16px;border-top:1px solid var(--border);background:var(--surface)}
.cs-ansicht-mail-feld{display:grid;gap:4px;flex:1 1 260px;font-size:14px;font-weight:600;color:var(--text-strong)}
.cs-ansicht-mail-feld input{padding:9px 12px;border:1px solid var(--border-strong);border-radius:6px;background:var(--bg);color:var(--text);font:inherit;font-weight:400}
.cs-ansicht-mail-feld input:focus{outline:2px solid var(--focus);outline-offset:1px}
.cs-ansicht-mail-feld input[aria-invalid="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.cs-ansicht-mail-meldung{flex-basis:100%;margin:0;font-size:13px;font-weight:600;color:var(--text-strong)}
.cs-ansicht-mail-meldung:empty{display:none}
.cs-ansicht-mail-meldung.cs-fehler{border-left:3px solid var(--accent);padding-left:8px}

/* Bestellbereich abgesetzt + Modus klar sichtbar (Lars 07.11.2026): eigene Fläche mit Rahmen und Kopfband —
   Bestellmodus Petrol, Anprobemodus Orange (Rahmen, Band, Fläche, Umschalter) */
.cs-bestellen{position:relative;margin:48px 0 0;padding:0 24px 24px;border:2px solid var(--petrol);border-radius:14px;background:var(--bg);
  box-shadow:0 14px 34px -20px rgba(14,39,37,.55);transition:border-color .2s,background-color .2s}
.cs-modus-band{display:flex;align-items:center;gap:10px;margin:0 -24px 20px;padding:12px 24px;border-radius:12px 12px 0 0;
  background:var(--petrol);color:var(--on-brand);font-size:15px;line-height:1.35;transition:background-color .2s,color .2s}
.cs-modus-band b{font-weight:800;letter-spacing:.02em;text-transform:uppercase;font-size:13px;padding:2px 8px;border-radius:var(--radius-pill);
  background:color-mix(in srgb,currentColor 16%,transparent)}
.cs-modus-band-ikon{flex:none}
.cs-bestellen[data-cs-modus="muster"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--bg))}
.cs-bestellen[data-cs-modus="muster"] .cs-modus-band{background:var(--accent);color:var(--on-accent)}
.cs-modus-knopf{padding:10px 18px;font-size:15px}
.cs-bestellen[data-cs-modus="muster"] .cs-modus-knopf[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
[data-theme="dark"] .cs-bestellen{border-color:var(--border-strong)}
[data-theme="dark"] .cs-bestellen[data-cs-modus="muster"]{border-color:var(--accent)}
@media(max-width:700px){.cs-bestellen{padding:0 14px 16px}.cs-modus-band{margin:0 -14px 16px;padding:10px 14px;font-size:14px}}

/* Landen per Sprungmarke (Lars 07.11.2026, gilt überall): Zielbereich pulsiert zweimal im Akzent */
@keyframes cs-landen{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 75%,transparent)}
  45%{box-shadow:0 0 0 10px color-mix(in srgb,var(--accent) 30%,transparent)}100%{box-shadow:0 0 0 18px transparent}}
.cs-gelandet{animation:cs-landen .85s ease-out 2;border-radius:12px}
@media(prefers-reduced-motion:reduce){.cs-gelandet{animation:none;outline:3px solid var(--accent);outline-offset:4px}}
/* Band bis an den Rahmen (eine allgemeinere p-Regel setzte den Rand auf 0) */
.cs-bestellen>.cs-modus-band{margin:0 -24px 20px}
@media(max-width:700px){.cs-bestellen>.cs-modus-band{margin:0 -14px 16px}}
.cs-bestellen[data-cs-modus="muster"] .cs-liste-rahmen{border-color:var(--accent)}