/* ZAB Studio v10 · Mischung – baut auf styles.css + v9.css auf */
html.v10{background:#070B14}
.v10 #sky{background:#070B14}

/* ---------- Branding-Verläufe als Szenen ---------- */
.sky__imgs .g{position:absolute;inset:0;opacity:0;overflow:hidden}
.sky__imgs .g i{position:absolute;border-radius:50%;filter:blur(90px);animation:drift 26s ease-in-out infinite alternate}
.g-brand{background:radial-gradient(120% 90% at 18% 0%,#1d3d8f 0%,#0F1E36 46%,#070B14 100%)}
.g-brand .o1{width:62vmax;height:62vmax;left:-18vmax;top:-26vmax;background:#2F5FD0;opacity:.55}
.g-brand .o2{width:42vmax;height:42vmax;right:-12vmax;bottom:-20vmax;background:#FF8A3D;opacity:.32;animation-direction:alternate-reverse;animation-duration:20s}
.g-brand .o3{width:30vmax;height:30vmax;left:42vw;top:34vh;background:#8FB4DA;opacity:.22;animation-duration:32s}
.g-dusk{background:linear-gradient(180deg,#0B1630 0%,#132a5c 48%,#2F5F96 100%)}
.g-dusk .o1{width:56vmax;height:56vmax;right:-16vmax;top:-22vmax;background:#2F5FD0;opacity:.5}
.g-dusk .o2{width:38vmax;height:38vmax;left:-10vmax;bottom:-16vmax;background:#FFC56B;opacity:.28;animation-direction:alternate-reverse}
.g-dusk .o3{width:26vmax;height:26vmax;left:46vw;top:46vh;background:#8FB4DA;opacity:.25;animation-duration:30s}
.g-peach{background:linear-gradient(180deg,#121c3e 0%,#3b3b72 42%,#8a5a7c 74%,#d98c6c 100%)}
.g-peach .o1{width:50vmax;height:50vmax;left:-14vmax;top:-18vmax;background:#2F5FD0;opacity:.45}
.g-peach .o2{width:44vmax;height:44vmax;right:-14vmax;bottom:-18vmax;background:#FFC56B;opacity:.35;animation-direction:alternate-reverse}
.g-peach .o3{width:28vmax;height:28vmax;left:40vw;top:20vh;background:#FF8A3D;opacity:.18;animation-duration:30s}
.sky__imgs img{inset:-4%;width:108%;height:108%}

/* ---------- die eine Blume: nur ein weicher Schein, der Lichtstrahl ist im Bild gemalt ---------- */
.v10 .sky__mark i{display:none}
.v10 .sky__mark{width:calc(170px*var(--ms,1));height:calc(170px*var(--ms,1));margin:calc(-85px*var(--ms,1)) 0 0 calc(-85px*var(--ms,1));transform:scale(calc(.7 + var(--g,0)*.5))}

/* ---------- Kapitel 01: Bilder sauber zentriert, Wechsel zur nächsten Szene weich ---------- */
.v10 .rot{height:330vh}
.v10 .rot__card,.v10 .rot__lbl{will-change:opacity,transform}
.v10 .so:nth-child(1) img{object-position:78% 72%}
.v10 .so:nth-child(2) img{object-position:42% 80%}
.v10 .so:nth-child(3) img{object-position:52% 78%}
.v10 .so:nth-child(4) img{object-position:68% 66%}

/* ---------- herausstechen: früher, mittig, gut lesbar ---------- */
.v10 .stand{height:210vh}
.v10 .stand__stick::before{background:radial-gradient(70% 55% at 50% 30%,rgba(7,11,20,.45),transparent 70%),linear-gradient(0deg,rgba(7,11,20,.55),transparent 35%)}
.v10 .stand__h{left:50%;right:auto;top:12vh;transform:translate(-50%,24px);text-align:center;width:min(1100px,92vw)}
.v10 .stand.on .stand__h{transform:translate(-50%,0)}
.v10 .stand__h em{font-size:1.05em;font-size:clamp(64px,9vw,150px)}
.v10 .stand__txt{left:50%;right:auto;transform:translateX(-50%);bottom:7vh;text-align:center;max-width:620px;width:92vw}
.v10 .stand__txt .pills{justify-content:center}
.v10 .stand__txt p{text-align:center}

/* ---------- Kapitel 07: Chat steht fest, wächst beim Öffnen weich ---------- */
.v10 .faq2{align-items:start}
.v10 .chatart{position:sticky;top:96px;height:min(74svh,680px)}
.v10 .chat{left:16px;right:16px;bottom:16px;top:auto!important;max-height:calc(100% - 32px);transition:none}
.v10 .chat .chat__log{display:flex!important;height:0;padding-top:0;padding-bottom:0;overflow:hidden;transition:height .55s var(--ease),padding .55s var(--ease)}
.v10 .chat.open .chat__log{height:min(40svh,380px);padding:18px;overflow-y:auto;scrollbar-width:none}
.v10 .chat .chat__quick{display:flex!important;max-height:0;padding-top:0;padding-bottom:0;overflow:hidden;border-top-color:transparent;transition:max-height .55s var(--ease),padding .55s}
.v10 .chat.open .chat__quick{max-height:120px;padding:12px 16px 16px;border-top-color:var(--glass-b)}
@media (max-width:1000px){.v10 .chatart{position:relative;top:0;height:560px}.v10 .chat.open .chat__log{height:300px}}
/* Kapitel 01: Karte links, rechts bleibt die (noch dunkle) Blume sichtbar */
.v10 .rot__stick{align-items:flex-start;padding-left:max(16px,4vw)}
.v10 .rot__lbl{margin-left:0}
.v10 .rot__card{width:min(1080px,62vw);height:min(70svh,680px)}
@media (max-width:1000px){.v10 .rot__card{width:100%}.v10 .rot__stick{align-items:center;padding-left:12px}}
.v10 .rot__card{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.v10 .rot__txt{font-size:clamp(40px,3.9vw,74px)}
/* Chat: Verlauf hat beim Öffnen sofort seine feste Höhe (wächst nicht beim Tippen) */
.v10 .chat .chat__log{flex:0 0 auto;justify-content:flex-start}
.v10 .chat.open .chat__log{flex:0 0 auto}
.v10 .chat .msg{flex:none}
.v10 .chat.open .chat__log{height:min(30svh,270px)}
@media (max-width:1000px){
  .v10 .rot__card{grid-template-columns:1fr!important;grid-template-rows:auto minmax(0,1fr);width:100%;height:min(78svh,760px)}
  .v10 .rot__txt{font-size:clamp(36px,9.5vw,54px)}
  .v10 .rot__txt br:first-of-type{display:none}
}