/* ===== SmatiStory Design System — Duo-Identität (19.09.2026) =====
   Tag  = Warm Storybook (papierwarm, Aquarell: Amber #f59e0b → Orange #ea580c)
   Nacht = Deep Night Calm (Gutenacht/Audio: tiefes Nachtblau + Gold #fcd34d → #f59e0b)
   Violett (#8b5cf6/#d946ef) bleibt als kleiner Akzent: .grad-text, .h-chip, Partikel.
   Entscheidung: Korab, 19.09.2026 · Vorlage: alt07_warm.html / alt07_night.html */
*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased}
html,body{width:375px;height:812px;overflow:hidden}
body{
  font-family:'Nunito','Segoe UI Rounded',-apple-system,BlinkMacSystemFont,sans-serif;
  background:linear-gradient(165deg,#fffaf0 0%,#ffedd5 55%,#fde4cf 100%);
  color:#44403c;position:relative;font-size:14px;
}
body.dark{background:linear-gradient(170deg,#04060f 0%,#0b1026 58%,#141c40 100%);color:#e2e8f0}

/* Floating particles (warm paper, violet whisper as accent) */
.p{position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.p1{width:190px;height:190px;background:radial-gradient(circle,rgba(245,158,11,.22),transparent 68%);top:-56px;right:-56px}
.p2{width:130px;height:130px;background:radial-gradient(circle,rgba(139,92,246,.16),transparent 68%);top:180px;left:-52px}
.p3{width:160px;height:160px;background:radial-gradient(circle,rgba(234,88,12,.15),transparent 68%);bottom:130px;right:-48px}
.p4{width:96px;height:96px;background:radial-gradient(circle,rgba(251,191,36,.30),transparent 68%);bottom:56px;left:26px}
.p5{width:74px;height:74px;background:radial-gradient(circle,rgba(139,92,246,.14),transparent 68%);top:360px;right:30px}
.p6{width:60px;height:60px;background:radial-gradient(circle,rgba(217,119,6,.18),transparent 68%);top:80px;right:120px}
/* Floating particles (dark: stars + moon glow) */
body.dark .p1{width:3px;height:3px;background:#fff;opacity:.9;top:70px;left:44px;box-shadow:0 0 8px 1px rgba(255,255,255,.9)}
body.dark .p2{width:2.5px;height:2.5px;background:#e0e7ff;opacity:.8;top:150px;right:60px;left:auto;box-shadow:0 0 6px 1px rgba(224,231,255,.8)}
body.dark .p3{width:3px;height:3px;background:#fef3c7;opacity:.85;top:280px;left:70px;right:auto;bottom:auto;box-shadow:0 0 7px 1px rgba(253,230,138,.9)}
body.dark .p4{width:2px;height:2px;background:#fff;opacity:.7;top:420px;right:90px;left:auto;bottom:auto;box-shadow:0 0 5px 1px rgba(255,255,255,.7)}
body.dark .p5{width:3px;height:3px;background:#c7d2fe;opacity:.8;top:560px;left:50px;right:auto;box-shadow:0 0 7px 1px rgba(199,210,254,.8)}
body.dark .p6{width:170px;height:170px;background:radial-gradient(circle,rgba(251,191,36,.22),transparent 66%);top:-40px;right:-40px;left:auto;box-shadow:none}

.screen{position:relative;z-index:2;display:flex;flex-direction:column;height:812px}

/* Status bar */
.statusbar{height:46px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:8px 24px 0 27px;font-size:14px;font-weight:800;letter-spacing:.2px;position:relative;z-index:6;color:#57534e}
body.dark .statusbar{color:#f1f5f9}
.statusbar .sic{display:flex;align-items:center;gap:6px}

/* Header */
.header{flex:none;display:flex;align-items:center;gap:12px;padding:8px 20px 2px}
.backbtn{width:38px;height:38px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.85);border:1px solid rgba(217,119,6,.28);box-shadow:0 4px 14px rgba(180,83,9,.10);color:#b45309;flex:none;font-size:17px;font-weight:900}
body.dark .backbtn{background:rgba(15,23,42,.55);border-color:rgba(251,191,36,.25);color:#fcd34d}
.h-title{font-size:17px;font-weight:900;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h-chip{flex:none;font-size:11px;font-weight:800;padding:6px 11px;border-radius:999px;background:rgba(139,92,246,.12);color:#6d28d9;border:1px solid rgba(139,92,246,.25)}
body.dark .h-chip{background:rgba(251,191,36,.14);color:#fcd34d;border-color:rgba(251,191,36,.3)}

.content{flex:1;min-height:0;display:flex;flex-direction:column;padding:8px 20px 6px;overflow:hidden;position:relative}

/* Cards */
.card{background:rgba(255,255,255,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(217,119,6,.18);border-radius:20px;box-shadow:0 8px 26px rgba(180,83,9,.10)}
body.dark .card{background:rgba(15,23,42,.55);border-color:rgba(251,191,36,.16);box-shadow:0 8px 30px rgba(0,0,0,.5)}

/* Typography helpers */
.title-xl{font-size:22px;font-weight:900;line-height:1.2}
.title-lg{font-size:19px;font-weight:900;line-height:1.25}
.sub{font-size:12.5px;font-weight:700;color:#78716c;line-height:1.4}
body.dark .sub{color:#94a3b8}
.label{font-size:11.5px;font-weight:900;letter-spacing:.5px;text-transform:uppercase;color:#b45309;margin:0 2px 7px}
body.dark .label{color:#fcd34d}
.grad-text{background:linear-gradient(135deg,#8b5cf6,#d946ef);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.dark .grad-text{background:linear-gradient(135deg,#fcd34d,#f59e0b);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* Buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:16px;font-family:inherit;font-weight:900;cursor:pointer;font-size:15px}
.btn-p{background:linear-gradient(135deg,#f59e0b,#ea580c);color:#fff;box-shadow:0 10px 24px rgba(245,158,11,.35)}
.btn-s{background:rgba(255,255,255,.78);color:#b45309;border:1.5px solid rgba(217,119,6,.35);box-shadow:0 6px 16px rgba(180,83,9,.12)}
.btn-g{background:rgba(255,255,255,.42);color:#7c2d12;border:1.5px dashed rgba(217,119,6,.35)}
.btn-off{background:#efe9e1;color:#b8b0a4;box-shadow:none;border:none}
body.dark .btn-p{background:linear-gradient(135deg,#fcd34d,#f59e0b);color:#1c1917;box-shadow:0 10px 26px rgba(251,191,36,.28)}
body.dark .btn-s{background:rgba(15,23,42,.6);color:#fcd34d;border-color:rgba(251,191,36,.35);box-shadow:0 6px 16px rgba(0,0,0,.35)}
body.dark .btn-g{background:rgba(15,23,42,.35);color:#fcd34d;border-color:rgba(251,191,36,.35)}
body.dark .btn-off{background:rgba(148,163,184,.18);color:#7c85a8}

/* Chips */
.chip{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.9);border:1.5px solid rgba(217,119,6,.32);font-size:12.5px;font-weight:800;color:#92400e;white-space:nowrap}
.chip.on{background:linear-gradient(135deg,#f59e0b,#ea580c);color:#fff;border-color:transparent;box-shadow:0 4px 14px rgba(245,158,11,.35)}
body.dark .chip{background:rgba(15,23,42,.6);border-color:rgba(148,163,184,.25);color:#cbd5e1}
body.dark .chip.on{background:linear-gradient(135deg,#fcd34d,#f59e0b);color:#1c1917;border-color:transparent;box-shadow:0 4px 16px rgba(251,191,36,.3)}
.chip-dashed{border-style:dashed;color:#a8a29e;background:transparent}
.chips{display:flex;flex-wrap:wrap;gap:8px}

/* Fields */
.field{background:rgba(255,255,255,.66);border:1.5px solid rgba(217,119,6,.18);border-radius:14px;padding:11px 14px;font-size:14px;font-weight:700;color:#44403c;display:flex;align-items:center;gap:8px;box-shadow:0 3px 12px rgba(180,83,9,.07)}
body.dark .field{background:rgba(15,23,42,.5);border-color:rgba(148,163,184,.22);color:#e2e8f0}
.field .muted{color:#a8a29e;font-weight:700}
body.dark .field .muted{color:#94a3b8}
.field .chev{margin-left:auto;color:#d97706;font-weight:900}
body.dark .field .chev{color:#fcd34d}

/* Slider */
.slider{position:relative;height:6px;border-radius:3px;background:rgba(217,119,6,.18)}
.slider .fill{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:linear-gradient(90deg,#f59e0b,#ea580c)}
.slider .thumb{position:absolute;top:50%;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid #f59e0b;transform:translate(-50%,-50%);box-shadow:0 4px 12px rgba(245,158,11,.4)}
.bubble{position:absolute;bottom:16px;transform:translateX(-50%);background:linear-gradient(135deg,#f59e0b,#ea580c);color:#fff;font-size:11.5px;font-weight:900;padding:4px 10px;border-radius:10px;box-shadow:0 4px 12px rgba(245,158,11,.4);white-space:nowrap}
.bubble::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#ea580c}
.slider-ends{display:flex;justify-content:space-between;font-size:10.5px;font-weight:800;color:#a8a29e;margin-top:7px}
body.dark .slider-ends{color:#94a3b8}
body.dark .slider{background:rgba(148,163,184,.22)}
body.dark .slider .fill{background:linear-gradient(90deg,#fcd34d,#f59e0b)}
body.dark .slider .thumb{border-color:#fcd34d;background:#0b1026}
body.dark .bubble{background:linear-gradient(135deg,#fcd34d,#f59e0b);color:#1c1917}
body.dark .bubble::after{border-top-color:#f59e0b}

/* Toggle */
.tgl{width:46px;height:27px;border-radius:14px;background:linear-gradient(135deg,#f59e0b,#ea580c);position:relative;flex:none;box-shadow:0 3px 10px rgba(245,158,11,.35)}
.tgl::after{content:'';position:absolute;top:3px;right:3px;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.tgl.off{background:#e7e0d6;box-shadow:none}
.tgl.off::after{right:auto;left:3px}
body.dark .tgl{background:linear-gradient(135deg,#fcd34d,#f59e0b)}
body.dark .tgl::after{background:#1c1917}
body.dark .tgl.off{background:rgba(148,163,184,.3)}

/* Radio / checkbox */
.radio{width:20px;height:20px;border-radius:50%;border:2px solid rgba(217,119,6,.4);flex:none;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.5)}
.radio.on{border:none;background:linear-gradient(135deg,#f59e0b,#ea580c)}
.radio.on::after{content:'';width:8px;height:8px;border-radius:50%;background:#fff}
.cbox{width:22px;height:22px;border-radius:7px;border:2px solid rgba(217,119,6,.45);flex:none;background:rgba(255,255,255,.55)}
body.dark .radio{border-color:rgba(148,163,184,.4);background:rgba(15,23,42,.4)}
body.dark .radio.on{border:none;background:linear-gradient(135deg,#fcd34d,#f59e0b)}
body.dark .radio.on::after{background:#1c1917}
body.dark .cbox{border-color:rgba(148,163,184,.4);background:rgba(15,23,42,.4)}

/* Segmented tabs */
.tabs{flex:none;display:flex;background:rgba(255,255,255,.55);border:1px solid rgba(217,119,6,.16);border-radius:15px;padding:4px;gap:4px;box-shadow:0 4px 14px rgba(180,83,9,.08)}
.tab{flex:1;text-align:center;padding:8px 4px;border-radius:11px;font-size:13px;font-weight:800;color:#a8a29e;white-space:nowrap}
.tab.on{background:linear-gradient(135deg,#f59e0b,#ea580c);color:#fff;box-shadow:0 4px 12px rgba(245,158,11,.3)}
body.dark .tabs{background:rgba(15,23,42,.5);border-color:rgba(148,163,184,.2)}
body.dark .tab{color:#94a3b8}
body.dark .tab.on{background:linear-gradient(135deg,#fcd34d,#f59e0b);color:#1c1917}

/* Progress dots */
.dots{display:flex;gap:6px;align-items:center}
.dot{width:8px;height:8px;border-radius:50%;background:rgba(217,119,6,.25)}
.dot.on{width:22px;border-radius:5px;background:linear-gradient(90deg,#f59e0b,#ea580c)}

/* List row */
.lrow{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:15px;background:rgba(255,255,255,.55);border:1px solid rgba(217,119,6,.14)}
body.dark .lrow{background:rgba(15,23,42,.5);border-color:rgba(148,163,184,.18)}

/* Bottom navigation */
.bottomnav{flex:none;height:78px;margin:8px 14px 14px;border-radius:24px;display:flex;align-items:flex-start;padding:10px 6px 0;background:rgba(255,255,255,.62);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(217,119,6,.16);box-shadow:0 10px 30px rgba(180,83,9,.14);position:relative;z-index:5}
.navi{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:9.8px;font-weight:800;color:#a8a29e}
.navi .ic{font-size:18px;width:42px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:13px;line-height:1}
.navi.on{color:#b45309}
.navi.on .ic{background:linear-gradient(135deg,rgba(245,158,11,.18),rgba(234,88,12,.18))}
body.dark .bottomnav{background:rgba(4,6,15,.72);border-color:rgba(251,191,36,.16);box-shadow:0 10px 30px rgba(0,0,0,.45)}
body.dark .navi{color:#94a3b8}
body.dark .navi.on{color:#fcd34d}
body.dark .navi.on .ic{background:rgba(251,191,36,.14)}

/* Home indicator */
.homebar{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);width:132px;height:5px;border-radius:3px;background:rgba(68,64,60,.3);z-index:20}
body.dark .homebar{background:rgba(241,245,249,.4)}

/* Fades */
.fade-b{position:absolute;left:0;right:0;bottom:0;height:60px;background:linear-gradient(180deg,rgba(255,250,240,0),rgba(255,250,240,.96) 82%);pointer-events:none;border-radius:0 0 20px 20px}
.fade-r{position:absolute;top:0;bottom:0;right:0;width:46px;background:linear-gradient(90deg,rgba(255,248,238,0),rgba(255,247,237,.95) 85%);pointer-events:none;border-radius:0 18px 18px 0}
body.dark .fade-b{background:linear-gradient(180deg,rgba(4,6,15,0),rgba(4,6,15,.96) 82%)}
body.dark .fade-r{background:linear-gradient(90deg,rgba(4,6,15,0),rgba(4,6,15,.95) 85%)}

/* Option card (selectable) */
.opt{position:relative;border-radius:16px;background:rgba(255,255,255,.78);border:2px solid rgba(217,119,6,.2);box-shadow:0 4px 14px rgba(180,83,9,.08)}
.opt.on{border-color:transparent;background:linear-gradient(rgba(255,255,255,.96),rgba(255,255,255,.96)) padding-box,linear-gradient(135deg,#f59e0b,#ea580c) border-box;box-shadow:0 8px 22px rgba(245,158,11,.28)}
.opt .tick{position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#f59e0b,#ea580c);color:#fff;font-size:10px;font-weight:900;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(245,158,11,.4)}
body.dark .opt{background:rgba(15,23,42,.55);border-color:rgba(148,163,184,.22)}
body.dark .opt.on{background:linear-gradient(rgba(15,23,42,.93),rgba(15,23,42,.93)) padding-box,linear-gradient(135deg,#fcd34d,#f59e0b) border-box;box-shadow:0 8px 22px rgba(251,191,36,.28)}
body.dark .opt .tick{background:linear-gradient(135deg,#fcd34d,#f59e0b);color:#1c1917}

.section{margin-bottom:13px;flex:none}
.link{color:#b45309;font-weight:800;font-size:12.5px}
body.dark .link{color:#c4b5fd} /* violet accent survives in the night */

/* ==========================================================================
   PATTERN-BIBLIOTHEK v2 · UX-System „Intuitive Kombination" (Band 7)
   Verbindliche Regeln für alle Screens — Begründungen im UX-Dokument.
   ========================================================================== */

/* P0 · Klick-Prototyp: Links verhalten sich wie ihr Inhalt (kein Layout-Bruch) */
a.hl{display:contents;text-decoration:none;color:inherit}

/* P1 · Primärer CTA: immer unten, volle Breite, 52px hoch, Textform „Verb + Icon".
   Genau EIN .btn-p pro Screen. Farbe folgt der Identität (Duo, 19.09.2026):
   Tag = Amber→Orange, Nacht = Gold (vorher: Violet→Fuchsia überall). */
.cta{height:52px;flex:none;width:100%}

/* P2 · Header: feste Höhe, Schema [Zurück | Titel | Kontext-Aktion].
   Touch-Targets ≥ 44px. */
.header{height:54px;padding:8px 20px 2px}
.backbtn{width:44px;height:44px;border-radius:16px;font-size:19px}
.h-sp{width:44px;flex:none} /* leerer Slot, damit der Titel mittig bleibt */

/* P3 · Fortschrittsanzeige: Flow-Screens zeigen Step-Dots statt Bottom-Nav.
   (Onboarding 02–04: Schritt 1–3 von 3 · Erstellung 06–09: Schritt 2 von 3) */
body.dark .dot{background:rgba(148,163,184,.3)}
body.dark .dot.on{background:linear-gradient(90deg,#fcd34d,#f59e0b)}

/* P4 · Auswahl-System (EIN System überall):
   Chip aktiv   = Verlauf gefüllt + Häkchen
   Karte aktiv  = 2px-Rahmen in Identitätsfarbe + Badge-Häkchen oben rechts (.opt/.tick)
   Radio-Liste  = links Icon, rechts Radio-Kreis (.radio)                   */
.chip.on::before{content:'✓';font-weight:900;margin-right:1px}
.chip{min-height:32px}

/* P5 · Slider-Box: ein Muster — Wert-Bubble oben, Track mit Verlauf,
   Min/Max-Labels unten (Text oder Icon). Kompakt-Variante: .mini (Player). */
.sliderbox{padding:12px 18px 9px}
.sliderbox .s-zone{position:relative;height:30px}

/* P6 · Leere Zustände: Icon + 1 Satz + CTA (Muster, siehe Screen 11 Kommentar) */
.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:18px;border:2px dashed rgba(217,119,6,.35);border-radius:18px;color:#78716c;background:rgba(255,255,255,.3)}
.empty .eic{font-size:30px;line-height:1}
.empty .et{font-size:12.5px;font-weight:800;line-height:1.45;max-width:230px}
.empty .btn{height:44px;padding:0 20px;font-size:13px;margin-top:4px}
body.dark .empty{border-color:rgba(148,163,184,.35);color:#94a3b8;background:rgba(15,23,42,.3)}

/* P7 · Bottom-Nav: NUR auf den 5 Hauptbereichen (05 Home, 11 Bibliothek,
   12 Audio, 13 Baby, 19 Profil). Tab = 44px+ Touch-Target. */
.navi{min-height:44px;justify-content:center}

/* ==========================================================================
   THEME: Violet Dream (Klassisch, 20.09.2026 als dritte Identität angehängt)
   1:1 aus base.css.bak-violett-20260919 unter body.violet gescoped —
   das allererste Design, unverändert, wählbar per Knopf & Anmeldefrage.
   ========================================================================== */
body.violet{font-family:'Nunito','Segoe UI Rounded',-apple-system,BlinkMacSystemFont,sans-serif;
  background:linear-gradient(160deg,#f8f7ff 0%,#eef2ff 48%,#fdf4ff 100%);
  color:#312e59;position:relative;font-size:14px;}
body.violet.dark{background:linear-gradient(165deg,#0b1026 0%,#1e1b4b 68%,#2b1c55 100%);color:#e2e8f0}
body.violet .p{position:absolute;border-radius:50%;pointer-events:none;z-index:0}
body.violet .p1{width:190px;height:190px;background:radial-gradient(circle,rgba(139,92,246,.26),transparent 68%);top:-56px;right:-56px}
body.violet .p2{width:130px;height:130px;background:radial-gradient(circle,rgba(34,211,238,.30),transparent 68%);top:180px;left:-52px}
body.violet .p3{width:160px;height:160px;background:radial-gradient(circle,rgba(217,70,239,.20),transparent 68%);bottom:130px;right:-48px}
body.violet .p4{width:96px;height:96px;background:radial-gradient(circle,rgba(251,191,36,.32),transparent 68%);bottom:56px;left:26px}
body.violet .p5{width:74px;height:74px;background:radial-gradient(circle,rgba(139,92,246,.24),transparent 68%);top:360px;right:30px}
body.violet .p6{width:60px;height:60px;background:radial-gradient(circle,rgba(34,211,238,.26),transparent 68%);top:80px;right:120px}
body.violet.dark .p1{width:3px;height:3px;background:#fff;opacity:.9;top:70px;left:44px;box-shadow:0 0 8px 1px rgba(255,255,255,.9)}
body.violet.dark .p2{width:2.5px;height:2.5px;background:#e0e7ff;opacity:.8;top:150px;right:60px;left:auto;box-shadow:0 0 6px 1px rgba(224,231,255,.8)}
body.violet.dark .p3{width:3px;height:3px;background:#fef3c7;opacity:.85;top:280px;left:70px;right:auto;bottom:auto;box-shadow:0 0 7px 1px rgba(253,230,138,.9)}
body.violet.dark .p4{width:2px;height:2px;background:#fff;opacity:.7;top:420px;right:90px;left:auto;bottom:auto;box-shadow:0 0 5px 1px rgba(255,255,255,.7)}
body.violet.dark .p5{width:3px;height:3px;background:#c7d2fe;opacity:.8;top:560px;left:50px;right:auto;box-shadow:0 0 7px 1px rgba(199,210,254,.8)}
body.violet.dark .p6{width:170px;height:170px;background:radial-gradient(circle,rgba(251,191,36,.22),transparent 66%);top:-40px;right:-40px;left:auto;box-shadow:none}
body.violet .screen{position:relative;z-index:2;display:flex;flex-direction:column;height:812px}
body.violet .statusbar{height:46px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:8px 24px 0 27px;font-size:14px;font-weight:800;letter-spacing:.2px;position:relative;z-index:6;color:#312e59}
body.violet.dark .statusbar{color:#f1f5f9}
body.violet .statusbar .sic{display:flex;align-items:center;gap:6px}
body.violet .header{flex:none;display:flex;align-items:center;gap:12px;padding:8px 20px 2px}
body.violet .backbtn{width:38px;height:38px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.72);box-shadow:0 4px 14px rgba(139,92,246,.10);color:#6d28d9;flex:none;font-size:17px;font-weight:900}
body.violet.dark .backbtn{background:rgba(30,27,75,.55);border-color:rgba(167,139,250,.28);color:#c4b5fd}
body.violet .h-title{font-size:17px;font-weight:900;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.violet .h-chip{flex:none;font-size:11px;font-weight:800;padding:6px 11px;border-radius:999px;background:rgba(139,92,246,.14);color:#6d28d9;border:1px solid rgba(139,92,246,.22)}
body.violet.dark .h-chip{background:rgba(251,191,36,.14);color:#fcd34d;border-color:rgba(251,191,36,.3)}
body.violet .content{flex:1;min-height:0;display:flex;flex-direction:column;padding:8px 20px 6px;overflow:hidden;position:relative}
body.violet .card{background:rgba(255,255,255,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.65);border-radius:20px;box-shadow:0 8px 32px rgba(139,92,246,.12)}
body.violet.dark .card{background:rgba(30,27,75,.5);border-color:rgba(167,139,250,.22);box-shadow:0 8px 32px rgba(0,0,0,.35)}
body.violet .title-xl{font-size:22px;font-weight:900;line-height:1.2}
body.violet .title-lg{font-size:19px;font-weight:900;line-height:1.25}
body.violet .sub{font-size:12.5px;font-weight:700;color:#7a76a0;line-height:1.4}
body.violet.dark .sub{color:#a5b0d6}
body.violet .label{font-size:11.5px;font-weight:900;letter-spacing:.5px;text-transform:uppercase;color:#7c3aed;margin:0 2px 7px}
body.violet.dark .label{color:#c4b5fd}
body.violet .grad-text{background:linear-gradient(135deg,#8b5cf6,#d946ef);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.violet .btn{display:flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:16px;font-family:inherit;font-weight:900;cursor:pointer;font-size:15px}
body.violet .btn-p{background:linear-gradient(135deg,#8b5cf6,#d946ef);color:#fff;box-shadow:0 10px 24px rgba(139,92,246,.38)}
body.violet .btn-s{background:rgba(255,255,255,.78);color:#6d28d9;border:1.5px solid rgba(139,92,246,.35);box-shadow:0 6px 16px rgba(139,92,246,.12)}
body.violet .btn-g{background:rgba(255,255,255,.42);color:#4c1d95;border:1.5px dashed rgba(139,92,246,.35)}
body.violet .btn-off{background:#e3e1f1;color:#a5a3c2;box-shadow:none;border:none}
body.violet.dark .btn-off{background:rgba(148,163,184,.18);color:#7c85a8}
body.violet .chip{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.6);border:1.5px solid rgba(139,92,246,.22);font-size:12.5px;font-weight:800;color:#5b21b6;white-space:nowrap}
body.violet .chip.on{background:linear-gradient(135deg,#8b5cf6,#d946ef);color:#fff;border-color:transparent;box-shadow:0 4px 14px rgba(139,92,246,.35)}
body.violet.dark .chip{background:rgba(30,27,75,.55);border-color:rgba(167,139,250,.3);color:#ddd6fe}
body.violet.dark .chip.on{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#442c04;border-color:transparent;box-shadow:0 4px 16px rgba(251,191,36,.35)}
body.violet .chip-dashed{border-style:dashed;color:#8b87a8;background:transparent}
body.violet .chips{display:flex;flex-wrap:wrap;gap:8px}
body.violet .field{background:rgba(255,255,255,.66);border:1.5px solid rgba(139,92,246,.18);border-radius:14px;padding:11px 14px;font-size:14px;font-weight:700;color:#312e59;display:flex;align-items:center;gap:8px;box-shadow:0 3px 12px rgba(139,92,246,.07)}
body.violet.dark .field{background:rgba(15,16,38,.5);border-color:rgba(167,139,250,.25);color:#e2e8f0}
body.violet .field .muted{color:#9b96b8;font-weight:700}
body.violet .field .chev{margin-left:auto;color:#8b5cf6;font-weight:900}
body.violet.dark .field .chev{color:#a78bfa}
body.violet .slider{position:relative;height:6px;border-radius:3px;background:rgba(139,92,246,.18)}
body.violet .slider .fill{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:linear-gradient(90deg,#8b5cf6,#d946ef)}
body.violet .slider .thumb{position:absolute;top:50%;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid #8b5cf6;transform:translate(-50%,-50%);box-shadow:0 4px 12px rgba(139,92,246,.4)}
body.violet .bubble{position:absolute;bottom:16px;transform:translateX(-50%);background:linear-gradient(135deg,#8b5cf6,#d946ef);color:#fff;font-size:11.5px;font-weight:900;padding:4px 10px;border-radius:10px;box-shadow:0 4px 12px rgba(139,92,246,.4);white-space:nowrap}
body.violet .bubble::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#a855f7}
body.violet .slider-ends{display:flex;justify-content:space-between;font-size:10.5px;font-weight:800;color:#9b96b8;margin-top:7px}
body.violet.dark .slider-ends{color:#8f8ab5}
body.violet.dark .slider{background:rgba(167,139,250,.22)}
body.violet.dark .slider .fill{background:linear-gradient(90deg,#a78bfa,#fbbf24)}
body.violet.dark .slider .thumb{border-color:#a78bfa;background:#1e1b4b}
body.violet.dark .bubble{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#442c04}
body.violet.dark .bubble::after{border-top-color:#f59e0b}
body.violet .tgl{width:46px;height:27px;border-radius:14px;background:linear-gradient(135deg,#8b5cf6,#d946ef);position:relative;flex:none;box-shadow:0 3px 10px rgba(139,92,246,.35)}
body.violet .tgl::after{content:'';position:absolute;top:3px;right:3px;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25)}
body.violet .tgl.off{background:#d6d3e8;box-shadow:none}
body.violet .tgl.off::after{right:auto;left:3px}
body.violet .radio{width:20px;height:20px;border-radius:50%;border:2px solid rgba(139,92,246,.35);flex:none;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.5)}
body.violet .radio.on{border:none;background:linear-gradient(135deg,#8b5cf6,#d946ef)}
body.violet .radio.on::after{content:'';width:8px;height:8px;border-radius:50%;background:#fff}
body.violet .cbox{width:22px;height:22px;border-radius:7px;border:2px solid rgba(139,92,246,.4);flex:none;background:rgba(255,255,255,.55)}
body.violet .tabs{flex:none;display:flex;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.65);border-radius:15px;padding:4px;gap:4px;box-shadow:0 4px 14px rgba(139,92,246,.08)}
body.violet .tab{flex:1;text-align:center;padding:8px 4px;border-radius:11px;font-size:13px;font-weight:800;color:#8b87a8;white-space:nowrap}
body.violet .tab.on{background:linear-gradient(135deg,#8b5cf6,#d946ef);color:#fff;box-shadow:0 4px 12px rgba(139,92,246,.3)}
body.violet.dark .tabs{background:rgba(15,16,38,.5);border-color:rgba(167,139,250,.22)}
body.violet.dark .tab{color:#8f8ab5}
body.violet.dark .tab.on{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#442c04}
body.violet .dots{display:flex;gap:6px;align-items:center}
body.violet .dot{width:8px;height:8px;border-radius:50%;background:rgba(139,92,246,.25)}
body.violet .dot.on{width:22px;border-radius:5px;background:linear-gradient(90deg,#8b5cf6,#d946ef)}
body.violet .lrow{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:15px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.6)}
body.violet.dark .lrow{background:rgba(30,27,75,.5);border-color:rgba(167,139,250,.2)}
body.violet .bottomnav{flex:none;height:78px;margin:8px 14px 14px;border-radius:24px;display:flex;align-items:flex-start;padding:10px 6px 0;background:rgba(255,255,255,.62);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.72);box-shadow:0 10px 30px rgba(139,92,246,.15);position:relative;z-index:5}
body.violet .navi{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:9.8px;font-weight:800;color:#9b96b8}
body.violet .navi .ic{font-size:18px;width:42px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:13px;line-height:1}
body.violet .navi.on{color:#7c3aed}
body.violet .navi.on .ic{background:linear-gradient(135deg,rgba(139,92,246,.2),rgba(217,70,239,.2))}
body.violet.dark .bottomnav{background:rgba(13,15,36,.7);border-color:rgba(167,139,250,.22);box-shadow:0 10px 30px rgba(0,0,0,.4)}
body.violet.dark .navi{color:#8f8ab5}
body.violet.dark .navi.on{color:#fbbf24}
body.violet.dark .navi.on .ic{background:rgba(251,191,36,.14)}
body.violet .homebar{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);width:132px;height:5px;border-radius:3px;background:rgba(49,46,89,.28);z-index:20}
body.violet.dark .homebar{background:rgba(241,245,249,.4)}
body.violet .fade-b{position:absolute;left:0;right:0;bottom:0;height:60px;background:linear-gradient(180deg,rgba(252,251,255,0),rgba(251,250,255,.96) 82%);pointer-events:none;border-radius:0 0 20px 20px}
body.violet .fade-r{position:absolute;top:0;bottom:0;right:0;width:46px;background:linear-gradient(90deg,rgba(246,244,255,0),rgba(245,243,253,.95) 85%);pointer-events:none;border-radius:0 18px 18px 0}
body.violet.dark .fade-b{background:linear-gradient(180deg,rgba(20,18,50,0),rgba(20,18,50,.96) 82%)}
body.violet.dark .fade-r{background:linear-gradient(90deg,rgba(20,18,50,0),rgba(20,18,50,.95) 85%)}
body.violet .opt{position:relative;border-radius:16px;background:rgba(255,255,255,.55);border:2px solid rgba(139,92,246,.16);box-shadow:0 4px 14px rgba(139,92,246,.08)}
body.violet .opt.on{border-color:transparent;background:linear-gradient(rgba(255,255,255,.94),rgba(255,255,255,.94)) padding-box,linear-gradient(135deg,#8b5cf6,#d946ef) border-box;box-shadow:0 8px 22px rgba(139,92,246,.28)}
body.violet .opt .tick{position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#8b5cf6,#d946ef);color:#fff;font-size:10px;font-weight:900;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(139,92,246,.4)}
body.violet.dark .opt{background:rgba(30,27,75,.5);border-color:rgba(167,139,250,.22)}
body.violet.dark .opt.on{background:linear-gradient(rgba(30,27,75,.94),rgba(30,27,75,.94)) padding-box,linear-gradient(135deg,#fbbf24,#f59e0b) border-box;box-shadow:0 8px 22px rgba(251,191,36,.28)}
body.violet.dark .opt .tick{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#442c04}
body.violet .section{margin-bottom:13px;flex:none}
body.violet .link{color:#7c3aed;font-weight:800;font-size:12.5px}
body.violet.dark .link{color:#c4b5fd}
body.violet a.hl{display:contents;text-decoration:none;color:inherit}
body.violet .cta{height:52px;flex:none;width:100%}
body.violet .header{height:54px;padding:8px 20px 2px}
body.violet .backbtn{width:44px;height:44px;border-radius:16px;font-size:19px}
body.violet .h-sp{width:44px;flex:none}
body.violet.dark .dot{background:rgba(167,139,250,.3)}
body.violet.dark .dot.on{background:linear-gradient(90deg,#fbbf24,#f59e0b)}
body.violet .chip.on::before{content:'✓';font-weight:900;margin-right:1px}
body.violet .chip{min-height:32px}
body.violet .sliderbox{padding:12px 18px 9px}
body.violet .sliderbox .s-zone{position:relative;height:30px}
body.violet .empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:18px;border:2px dashed rgba(139,92,246,.35);border-radius:18px;color:#7a76a0;background:rgba(255,255,255,.3)}
body.violet .empty .eic{font-size:30px;line-height:1}
body.violet .empty .et{font-size:12.5px;font-weight:800;line-height:1.45;max-width:230px}
body.violet .empty .btn{height:44px;padding:0 20px;font-size:13px;margin-top:4px}
body.violet.dark .empty{border-color:rgba(167,139,250,.35);color:#a5b0d6;background:rgba(30,27,75,.3)}
body.violet .navi{min-height:44px;justify-content:center}
/* Design-Knopf (theme.js) braucht rechts Luft — Header-Chips nicht überlappen */
.h-chip{margin-right:42px}