/* ══════════════════════════════════════════════════════════════════════════
ERKLÄRVIDEO-KLEID (Entwurf 08.10.2026) — Gestaltungsschicht über den Playern
--------------------------------------------------------------------------
Eine Zeile je Player:
und auf das Thema: data-thema="steu|pens|vors|verm|wohn|fam"
Szenen, Texte, Untertitel, Timing bleiben unangetastet — es werden nur
Farben, Flächen, Perle und Steuerung überlagert (Reihenfolge nach dem
Glas-Layer vom 18.08.2026, daher die wenigen !important).
Palette = Themenfarben der Website (css/styles.css, 16.09.2026).
══════════════════════════════════════════════════════════════════════════ */
:root{
--navy:#1D3A65; --navy-d:#12284A; --gold:#B09E80; --paper:#FBFAF7;
--th:#B09E80; --th-d:#66593F; --th-l:#F1ECE2; --th-n:#CFC0A6;
--ink:#1D3A65; --ink-soft:#4F6079; --line:#E3E0D8;
--p1:var(--th); --p1-t:var(--th-l); --p2:#B09E80; --p2-t:#F1ECE2; --p3:#2F6F5E; --p3-t:#E2EFEA;
--alert:#8E3B46; --alert-t:#F4E4E7;
}
html[data-thema="steu"]{--th:#8E3B46;--th-d:#732E38;--th-l:#F4E4E7;--th-n:#E7A8B0}
html[data-thema="pens"]{--th:#B09E80;--th-d:#66593F;--th-l:#F1ECE2;--th-n:#CFC0A6}
html[data-thema="vors"]{--th:#2F6F5E;--th-d:#245648;--th-l:#E2EFEA;--th-n:#8FD3BC}
html[data-thema="verm"]{--th:#2A6F8A;--th-d:#20566B;--th-l:#E0EDF2;--th-n:#8FC6DC}
html[data-thema="wohn"]{--th:#BF7A48;--th-d:#8A5630;--th-l:#F6EADF;--th-n:#E9BD98}
html[data-thema="fam"]{--th:#5A6B8C;--th-d:#465472;--th-l:#E7EAF1;--th-n:#B7C3DD}
/* ── Hintergrund und Rahmen ─────────────────────────────────────────────── */
body{background:
radial-gradient(900px 560px at 10% -10%, color-mix(in oklab, var(--th-n) 55%, transparent), transparent 60%),
radial-gradient(760px 520px at 95% 110%, rgba(29,58,101,.16), transparent 62%),
#EEECE6 !important}
.player{
background:linear-gradient(160deg, rgba(255,255,255,.90), rgba(251,250,247,.74)) !important;
border:1px solid rgba(255,255,255,.9) !important;
box-shadow:0 30px 70px rgba(18,40,74,.22), inset 0 1px 0 #fff !important;
position:relative}
/* Themenband oben — ruhig, 4 px */
.player::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;z-index:3;
background:linear-gradient(90deg, var(--th-d), var(--th) 55%, var(--th-n))}
/* ── Bühne ──────────────────────────────────────────────────────────────── */
.stage{background:
radial-gradient(640px 400px at 100% 0%, color-mix(in oklab, var(--th-l) 70%, transparent), transparent 70%),
linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)) !important}
.eyebrow{color:var(--th-d) !important;letter-spacing:.2em}
.eyebrow::before{content:"";display:inline-block;width:18px;height:2px;background:var(--th);vertical-align:middle;margin-right:9px;border-radius:2px}
h1,h2{color:var(--navy);letter-spacing:-.01em}
h1{max-width:22ch;text-wrap:balance}
.lead{color:var(--ink-soft);max-width:38ch}
/* Inhalt der Folien: nicht am Boden kleben, sondern im Restraum zentriert (Rhythmus, Blinzeltest) */
.facts,.checks,.vs,.steps,.hero,.stackbox,.tip,.warn{margin-top:auto !important;margin-bottom:auto}
/* Hinweis + Abschluss (letzte Folie) als eine Gruppe mittig */
.tip:has(+ .cta),.warn:has(+ .cta){margin-bottom:0}
.tip + .cta,.warn + .cta{margin-top:clamp(16px,3.2vw,30px) !important;margin-bottom:auto}
/* Perle auf der Titelfolie: füllt die leere Fläche, trägt das Themensymbol */
.scene:first-child{overflow:hidden}
.scene:first-child::before{content:"";position:absolute;right:clamp(18px,6%,64px);bottom:clamp(14px,7%,56px);
width:clamp(120px,28%,230px);aspect-ratio:1;border-radius:50%;z-index:0;
background:url('../assets/perle-licht.webp') center/100% 100% no-repeat,url('../assets/perle-schatten.webp') center/100% 100% no-repeat,
radial-gradient(circle at 36% 28%,color-mix(in oklab,var(--th) 30%,#fff) 0%,color-mix(in oklab,var(--th) 58%,#fff) 45%,color-mix(in oklab,var(--th) 84%,#fff) 82%);
background-blend-mode:normal,multiply,normal;filter:saturate(2.1) brightness(1.05);
box-shadow:0 26px 40px -18px rgba(6,18,40,.55), inset 0 0 0 .5px rgba(255,255,255,.35);
animation:bbSchweben 9s ease-in-out infinite}
.scene:first-child::after{content:"";position:absolute;right:clamp(18px,6%,64px);bottom:clamp(14px,7%,56px);
width:clamp(120px,28%,230px);aspect-ratio:1;z-index:1;pointer-events:none;
background:var(--symbol) center/42% no-repeat;animation:bbSchweben 9s ease-in-out infinite}
.scene:first-child > *{position:relative;z-index:2}
@keyframes bbSchweben{0%,100%{translate:0 0}50%{translate:0 -5px}}
@media (prefers-reduced-motion: reduce){.scene:first-child::before,.scene:first-child::after{animation:none}}
@media(max-width:560px){.scene:first-child::before,.scene:first-child::after{width:34%;right:6%;bottom:5%}}
/* Themensymbole (Linien in Navy) */
html[data-thema="steu"]{--symbol:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D3A65' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%3E%3Ccircle cx='6.5' cy='6.5' r='2.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.5'/%3E%3C/svg%3E")}
html[data-thema="pens"]{--symbol:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D3A65' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 16a8 8 0 0 1 16 0'/%3E%3Cline x1='2.5' y1='19' x2='21.5' y2='19'/%3E%3Cline x1='12' y1='4' x2='12' y2='6'/%3E%3C/svg%3E")}
html[data-thema="vors"]{--symbol:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D3A65' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 2.8v5.2c0 4.3-2.9 7.2-7 8.7-4.1-1.5-7-4.4-7-8.7V5.8z'/%3E%3Cpolyline points='9 12 11 14 15 10'/%3E%3C/svg%3E")}
html[data-thema="verm"]{--symbol:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D3A65' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 17 10 11 14 14 20 7'/%3E%3Cpolyline points='15 7 20 7 20 12'/%3E%3C/svg%3E")}
html[data-thema="wohn"]{--symbol:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D3A65' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 11L12 4l8.5 7'/%3E%3Cpath d='M5.5 9.7V20h13V9.7'/%3E%3C/svg%3E")}
html[data-thema="fam"]{--symbol:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D3A65' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Ccircle cx='17' cy='10' r='2.4'/%3E%3Cpath d='M3.5 20c0-3.3 2.5-5.5 5.5-5.5s5.5 2.2 5.5 5.5'/%3E%3Cpath d='M15 20c0-2.3 1.4-3.8 3.3-3.8S21.5 17.7 21.5 20'/%3E%3C/svg%3E")}
/* ── Karten, Schritte, Panels: Glas bleibt, Akzent in Themenfarbe ──────── */
.fact,.check,.panel,.step{border-radius:14px !important;
box-shadow:0 6px 20px rgba(18,40,74,.08), inset 0 1px 0 #fff !important}
/* Nummern als kleine Perlen statt farbiger Seitenstreifen */
.check{align-items:center !important}
.check .m{color:var(--th-d) !important;width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
background:radial-gradient(circle at 36% 28%, #fff, var(--th-l) 70%);box-shadow:0 2px 6px rgba(18,40,74,.14), inset 0 0 0 1px color-mix(in oklab, var(--th) 35%, #fff);font-size:.95em}
.fact b,.step .n{color:var(--navy)}
.panel h3{color:var(--navy) !important}
.panel li.g:before{color:#2F6F5E}
.panel li.b:before{color:#8E3B46}
.hero .big{color:var(--th-d) !important;letter-spacing:-.02em}
.warn{background:#F4E4E7 !important;border-left-color:#8E3B46 !important}
.tip{background:var(--th-l) !important;border-left-color:var(--th) !important}
.layer{box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 4px 12px rgba(18,40,74,.10)}
/* ── Untertitel, Steuerung, Knöpfe ──────────────────────────────────────── */
.subs{background:linear-gradient(150deg, rgba(29,58,101,.96), rgba(18,40,74,.90)) !important;
font-size:clamp(13px,1.9vw,16.5px);letter-spacing:.005em}
.controls{background:linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.94)) !important}
button{background:linear-gradient(150deg, #27497a, var(--navy)) !important;
box-shadow:0 8px 22px rgba(29,58,101,.30), inset 0 1px 0 rgba(255,255,255,.26) !important}
button.ghost{color:var(--navy) !important}
button.ghost:hover{border-color:var(--th) !important}
button:focus-visible{outline:3px solid var(--th) !important}
.btn{background:linear-gradient(150deg, #27497a, var(--navy)) !important;border-radius:999px}
.segbar{background:rgba(29,58,101,.12) !important;height:5px}
.segbar i{background:linear-gradient(90deg, var(--th-d), var(--th)) !important;box-shadow:0 0 8px color-mix(in oklab, var(--th) 55%, transparent)}
.scenenum{color:var(--th-d);font-weight:600}
.small{color:var(--ink-soft)}
/* ══ Variante «Nacht» (08.10.2026): Welt wie «Unser Ansatz» auf der Startseite ═══════════
html[data-kleid="nacht"] — Navy-Welt, Serif-Titel (DM Serif Display), Gold-Akzent,
Bühne als Glas-Karte, Perle mit Themensymbol. Dieselben Themenfarben, hell aufgehellt. */
html[data-kleid="nacht"]{--ink:#F4F1EA;--ink-soft:#C9CFDA;--line:rgba(255,255,255,.14);--gold-l:#D9C9A8}
html[data-kleid="nacht"] body{background:
radial-gradient(900px 600px at 8% -10%, color-mix(in oklab, var(--th) 32%, transparent), transparent 62%),
radial-gradient(800px 560px at 100% 110%, rgba(176,158,128,.18), transparent 64%),
linear-gradient(180deg, #16305a, #0f1f38) !important}
html[data-kleid="nacht"] .player{
background:linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.04)) !important;
-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);
border:1px solid rgba(255,255,255,.18) !important;
box-shadow:0 36px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.22) !important}
html[data-kleid="nacht"] .stage{background:
radial-gradient(640px 400px at 100% 0%, color-mix(in oklab, var(--th) 26%, transparent), transparent 70%),
linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)) !important}
html[data-kleid="nacht"] .eyebrow{color:var(--gold) !important;letter-spacing:.22em}
html[data-kleid="nacht"] .eyebrow::before{background:var(--gold)}
html[data-kleid="nacht"] h1,html[data-kleid="nacht"] h2{font-family:'DM Serif Display',Georgia,serif !important;font-weight:400 !important;color:#F4F1EA !important;letter-spacing:0}
html[data-kleid="nacht"] h1{font-size:clamp(28px,5vw,50px) !important;line-height:1.06 !important}
html[data-kleid="nacht"] h2{font-size:clamp(22px,3.6vw,34px) !important}
html[data-kleid="nacht"] .lead{color:#C9CFDA}
html[data-kleid="nacht"] .scene:first-child::before{box-shadow:0 30px 50px -16px rgba(0,0,0,.7), inset 0 0 0 .5px rgba(255,255,255,.4)}
/* Karten: helles Glas auf Navy, Schrift dunkel (Kontrast) */
html[data-kleid="nacht"] .fact,html[data-kleid="nacht"] .check,html[data-kleid="nacht"] .panel,html[data-kleid="nacht"] .step{
background:linear-gradient(150deg, rgba(255,255,255,.96), rgba(255,255,255,.84)) !important;
border:1px solid rgba(255,255,255,.9) !important;color:#1D3A65;
box-shadow:0 14px 34px rgba(0,0,0,.28), inset 0 1px 0 #fff !important}
html[data-kleid="nacht"] .check{color:#1D3A65}
html[data-kleid="nacht"] .fact span,html[data-kleid="nacht"] .step span,html[data-kleid="nacht"] .panel li{color:#4F6079}
html[data-kleid="nacht"] .hero .big{color:var(--gold-l) !important;font-family:'DM Serif Display',Georgia,serif;font-weight:400}
html[data-kleid="nacht"] .hero .biglabel{color:#C9CFDA}
html[data-kleid="nacht"] .tip{background:rgba(255,255,255,.10) !important;border-left-color:var(--gold) !important;color:#F4F1EA;
-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.16);border-left:4px solid var(--gold)}
html[data-kleid="nacht"] .warn{background:rgba(142,59,70,.28) !important;border-left-color:#E7A8B0 !important;color:#F4F1EA;border:1px solid rgba(255,255,255,.14);border-left:4px solid #E7A8B0}
html[data-kleid="nacht"] .small{color:#C9CFDA}
html[data-kleid="nacht"] .btn{background:linear-gradient(150deg, #C8B48E, var(--gold)) !important;color:#0f1f38 !important;border:0}
html[data-kleid="nacht"] .subs{background:linear-gradient(150deg, rgba(255,255,255,.12), rgba(255,255,255,.06)) !important;color:#F4F1EA !important;
border-top:1px solid rgba(255,255,255,.14);text-shadow:none}
html[data-kleid="nacht"] .controls{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.10)) !important;border-top:1px solid rgba(255,255,255,.14) !important}
html[data-kleid="nacht"] button{background:linear-gradient(150deg, #C8B48E, var(--gold)) !important;color:#0f1f38 !important;border:0 !important;
box-shadow:0 10px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.5) !important}
html[data-kleid="nacht"] button.ghost{background:rgba(255,255,255,.10) !important;color:#F4F1EA !important;border:1px solid rgba(255,255,255,.22) !important;box-shadow:none !important}
html[data-kleid="nacht"] .segbar{background:rgba(255,255,255,.16) !important;box-shadow:none}
html[data-kleid="nacht"] .segbar i{background:linear-gradient(90deg, #C8B48E, var(--gold)) !important;box-shadow:0 0 8px rgba(176,158,128,.6)}
html[data-kleid="nacht"] .scenenum{color:var(--gold-l)}
html[data-kleid="nacht"] .check .m{color:#0f1f38 !important;background:radial-gradient(circle at 36% 28%, #fff, #E9DFC9 70%);box-shadow:0 2px 6px rgba(0,0,0,.18), inset 0 0 0 1px rgba(176,158,128,.6)}
/* CTA-Leiste (js/bb-video-cta.js) in der Nacht-Welt */
html[data-kleid="nacht"] #bb-vcta{background:rgba(255,255,255,.06) !important;border-top:1px solid rgba(255,255,255,.14) !important}
html[data-kleid="nacht"] #bb-vcta .bbv-t b{color:#F4F1EA !important}
html[data-kleid="nacht"] #bb-vcta .bbv-t span{color:#C9CFDA !important;opacity:1 !important}
html[data-kleid="nacht"] #bb-vcta a{border-color:rgba(255,255,255,.35) !important;color:#F4F1EA !important}
html[data-kleid="nacht"] #bb-vcta a.bbv-p{background:linear-gradient(150deg, #C8B48E, var(--gold)) !important;color:#0f1f38 !important;border-color:transparent !important}
/* ── Titelfolie wie der Ansatz-Film der Startseite (Nicolas 08.10.): mittig, Serif, zweite Zeile gold-kursiv, Abspielen in der Mitte ── */
html[data-kleid="nacht"] .scene:first-child{align-items:center;text-align:center;justify-content:center;gap:0}
html[data-kleid="nacht"] .scene:first-child .eyebrow{color:var(--gold) !important;margin-bottom:14px}
html[data-kleid="nacht"] .scene:first-child .eyebrow::before{display:none}
html[data-kleid="nacht"] .scene:first-child h1{color:var(--gold-l) !important;font-style:italic;max-width:24ch;margin:0 auto;font-size:clamp(30px,5.6vw,56px) !important}
html[data-kleid="nacht"] .scene:first-child h1::first-line{color:#F4F1EA;font-style:normal}
html[data-kleid="nacht"] .scene:first-child .lead{margin:14px auto 0;max-width:46ch;color:#C9CFDA}
html[data-kleid="nacht"] .scene:first-child > div[style*="margin-top:auto"]{display:none}
/* Perle kleiner, unten rechts, als Themenzeichen */
html[data-kleid="nacht"] .scene:first-child::before,html[data-kleid="nacht"] .scene:first-child::after{width:clamp(72px,13%,120px);right:clamp(14px,4%,36px);bottom:clamp(12px,4%,32px)}
/* Abspielen-Knopf in der Mitte (js/bb-video-kleid.js) */
.bbk-play{position:absolute;left:50%;bottom:clamp(14px,9%,54px);transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:8px;
background:none !important;border:0 !important;box-shadow:none !important;width:auto !important;height:auto !important;color:#C9CFDA !important;font:600 11px/1 'Inter',sans-serif;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.bbk-play i{display:block;width:clamp(52px,8vw,72px);height:clamp(52px,8vw,72px);border-radius:50%;background:linear-gradient(150deg,#C8B48E,var(--gold));
box-shadow:0 14px 34px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5);position:relative;transition:transform .25s cubic-bezier(.2,.8,.3,1)}
.bbk-play i::after{content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);border-left:clamp(16px,2.4vw,22px) solid #0f1f38;border-top:clamp(10px,1.5vw,14px) solid transparent;border-bottom:clamp(10px,1.5vw,14px) solid transparent}
.bbk-play:hover i{transform:scale(1.06)}
html:not([data-kleid="nacht"]) .bbk-play{color:var(--ink-soft) !important}
html:not([data-kleid="nacht"]) .bbk-play i{background:linear-gradient(150deg,#27497a,var(--navy))}
html:not([data-kleid="nacht"]) .bbk-play i::after{border-left-color:#fff}
.bbk-play.weg{display:none}
@media(max-width:560px){html[data-kleid="nacht"] .scene:first-child{aspect-ratio:auto}.bbk-play{bottom:6%}}
/* ── Nicolas 08.10.: «Abspielen ist die Perle in derselben Farbe» — die Perle wird zum Knopf ── */
html[data-kleid="nacht"] .scene:first-child::before,html[data-kleid="nacht"] .scene:first-child::after{display:none}
html[data-kleid="nacht"] .scene:first-child{padding-bottom:clamp(96px,20%,150px)}
.bbk-play i{
background:url('../assets/perle-licht.webp') center/100% 100% no-repeat,url('../assets/perle-schatten.webp') center/100% 100% no-repeat,
radial-gradient(circle at 36% 28%,color-mix(in oklab,var(--th) 30%,#fff) 0%,color-mix(in oklab,var(--th) 58%,#fff) 45%,color-mix(in oklab,var(--th) 84%,#fff) 82%) !important;
background-blend-mode:normal,multiply,normal;filter:saturate(2.1) brightness(1.05);
width:clamp(68px,11vw,96px);height:clamp(68px,11vw,96px);
box-shadow:0 22px 40px -12px rgba(0,0,0,.6), inset 0 0 0 .5px rgba(255,255,255,.4);
animation:bbSchweben 9s ease-in-out infinite}
.bbk-play i::after{border-left-color:#12284A;filter:drop-shadow(0 1px 0 rgba(255,255,255,.35))}
.bbk-play span{color:var(--gold-l,#D9C9A8)}
html:not([data-kleid="nacht"]) .bbk-play i{filter:saturate(2.1) brightness(1.05)}
html:not([data-kleid="nacht"]) .bbk-play i::after{border-left-color:#12284A}
html:not([data-kleid="nacht"]) .bbk-play span{color:var(--th-d)}
@media (prefers-reduced-motion: reduce){.bbk-play i{animation:none}}
.scene:first-child > .bbk-play{position:absolute !important;z-index:4 !important}
/* Handy: Schatten unter der Abspiel-Perle kleiner */
@media(max-width:560px){.bbk-play i{box-shadow:0 12px 22px -10px rgba(0,0,0,.55), inset 0 0 0 .5px rgba(255,255,255,.4)}}
/* Nicolas 08.10.: Begleittext (Untertitelband) muss sich abheben — dunkles, sattes Band mit Goldkante; Steuerung darunter heller */
html[data-kleid="nacht"] .subs{background:linear-gradient(180deg, rgba(10,22,42,.96), rgba(10,22,42,.92)) !important;color:#F7F3EA !important;
border-top:2px solid var(--gold) !important;font-size:clamp(13.5px,2vw,17px);line-height:1.5;text-shadow:none}
html[data-kleid="nacht"] .controls{background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.18)) !important;border-top:1px solid rgba(255,255,255,.18) !important}
html[data-kleid="nacht"] #bb-vcta{background:rgba(255,255,255,.08) !important}
/* Abspiel-Perle im Fluss der Titelfolie (unter Lead bzw. Hero-Grafik), nicht mehr absolut — sonst Überlagerung bei Playern mit Hero (Module 5–21) */
html[data-kleid="nacht"] .scene:first-child{padding-bottom:clamp(16px,3.6vw,40px)}
html[data-kleid="nacht"] .scene:first-child > .bbk-play{position:relative !important;left:auto;bottom:auto;transform:none;margin-top:clamp(12px,2.6vw,22px)}
html[data-kleid="nacht"] .scene:first-child .hero{margin:clamp(10px,2vw,18px) auto 0;gap:8px}
html[data-kleid="nacht"] .scene:first-child .hero .shield,html[data-kleid="nacht"] .scene:first-child .hero > div:first-child:not(.big){
width:clamp(44px,6vw,60px) !important;height:clamp(44px,6vw,60px) !important;font-size:clamp(20px,3vw,28px) !important;border-radius:14px !important;
background:rgba(255,255,255,.12) !important;border:1px solid rgba(255,255,255,.22) !important;box-shadow:none !important;color:#F4F1EA !important;display:flex;align-items:center;justify-content:center}
html[data-kleid="nacht"] .scene:first-child .hero .cap{color:var(--gold-l) !important;font-size:clamp(12px,1.7vw,15px) !important}
html[data-kleid="nacht"] .scene:first-child .lead{margin-top:10px}
html[data-kleid="nacht"] .scene:first-child h1{font-size:clamp(26px,4.8vw,48px) !important}
/* Abspiel-Perle ohne die Schattenebene des Materials (wirkte am Handy wie eine zweite Kugel); echter weicher Schatten stattdessen */
.bbk-play i{background:url('../assets/perle-licht.webp') center/100% 100% no-repeat,
radial-gradient(circle at 36% 28%,color-mix(in oklab,var(--th) 30%,#fff) 0%,color-mix(in oklab,var(--th) 58%,#fff) 45%,color-mix(in oklab,var(--th) 84%,#fff) 82%) !important;
background-blend-mode:normal,normal;box-shadow:0 18px 30px -10px rgba(0,0,0,.55), inset 0 0 0 .5px rgba(255,255,255,.4) !important}
@media(max-width:560px){.bbk-play i{box-shadow:0 12px 20px -8px rgba(0,0,0,.5), inset 0 0 0 .5px rgba(255,255,255,.4) !important}}
/* Der Abspiel-Knopf ist ein