/* ZAB Studio v11 · Blume + Brand-Verläufe (Papier-Korn) – baut auf styles.css + v9.css + v10.css auf */
html.v11,.v11 #sky{background:#070B14}

/* ---------- Brand-Verläufe als Szenen: weich, körnig wie Papier ---------- */
.v11 .sky__imgs .g{position:absolute;inset:0;opacity:0;overflow:hidden;will-change:opacity,translate}
.v11 .sky__imgs .g::after{content:"";position:absolute;inset:0;background:var(--grain);background-size:220px;opacity:.5;mix-blend-mode:overlay;pointer-events:none}
.v11 .sky__imgs .g .fl{position:absolute;inset:-8%;width:116%;height:116%;animation:flow11 34s ease-in-out infinite alternate}
@keyframes flow11{from{transform:translate3d(-1.5%,1%,0) rotate(-1deg) scale(1)}to{transform:translate3d(1.5%,-1.5%,0) rotate(1.2deg) scale(1.05)}}
.v11 .sky__imgs .g i{position:absolute;border-radius:50%;filter:blur(90px);animation:drift 26s ease-in-out infinite alternate}
/* A · Blaue Stunde mit hellem Lichtschwung (wie Intro A/B) */
.g-blau{background:radial-gradient(90% 55% at 50% 110%,#FF8A3D 0%,rgba(255,138,61,.35) 30%,transparent 62%),radial-gradient(120% 90% at 30% 0%,#1f4fc4 0%,#123a9a 38%,#0b2468 70%,#081a4a 100%)}
.g-blau .o1{width:46vmax;height:46vmax;left:-10vmax;top:-18vmax;background:#2F5FD0;opacity:.55}
.g-blau .o2{width:34vmax;height:34vmax;right:-8vmax;bottom:-14vmax;background:#FFC56B;opacity:.3;animation-direction:alternate-reverse}
/* Morgennebel (hell) */
.g-morgen{background:radial-gradient(55% 55% at 72% 78%,#FFC56B,rgba(255,197,107,0) 70%),linear-gradient(170deg,#8FB4DA,#cddcea 45%,#F4EFE7 78%)}
.g-morgen .o1{width:40vmax;height:40vmax;left:-12vmax;top:-14vmax;background:#2F5FD0;opacity:.18}
.g-morgen .o2{width:30vmax;height:30vmax;right:6vw;bottom:-10vmax;background:#FFC56B;opacity:.35;animation-direction:alternate-reverse}
/* Pfirsich (hell) */
.g-pfirsich{background:radial-gradient(48% 50% at 66% 64%,rgba(255,138,61,.8),rgba(255,138,61,0) 70%),radial-gradient(60% 60% at 28% 26%,#FFC56B,rgba(255,197,107,0) 70%),#F4EFE7}
.g-pfirsich .o1{width:36vmax;height:36vmax;right:-6vmax;top:-12vmax;background:#8FB4DA;opacity:.35}
.g-pfirsich .o2{width:28vmax;height:28vmax;left:8vw;bottom:-12vmax;background:#FF8A3D;opacity:.25;animation-direction:alternate-reverse}
/* Papier · Leuchten (hell, Ref. 43 „Radiance“) */
.g-radiance{background:radial-gradient(40% 50% at 76% 46%,rgba(47,95,208,.18),transparent 70%),#F2EDE4}
.g-radiance .o1{width:30vmax;height:30vmax;right:4vw;top:6vh;background:#2F5FD0;opacity:.28}
.g-radiance .o2{width:24vmax;height:24vmax;right:16vw;top:30vh;background:#FFC56B;opacity:.35;animation-direction:alternate-reverse}
/* Papier · Welle (hell, Ref. 43 „Flow“) */
.g-welle{background:radial-gradient(60% 50% at 20% 100%,rgba(255,197,107,.35),transparent 70%),#F3EEE6}
.g-welle .o1,.g-welle .o2{display:none}
/* Blaue Stunde (dunkel, Brandboard) mit hellem Schwung */
.g-stunde{background:radial-gradient(70% 45% at 50% 100%,#FF8A3D,rgba(255,138,61,0) 70%),radial-gradient(90% 80% at 50% 10%,#2F5F96,#0F1E36 75%)}
.g-stunde .o1{width:40vmax;height:40vmax;left:-12vmax;top:-16vmax;background:#2F5FD0;opacity:.4}
.g-stunde .o2{width:30vmax;height:30vmax;right:-8vmax;bottom:-12vmax;background:#FFC56B;opacity:.25;animation-direction:alternate-reverse}
/* Papier mit Farbschwung (hell, Ref. 43) */
.g-papier{background:#F1ECE3}
.g-papier .o1,.g-papier .o2{display:none}
.v11 .sky__imgs img:nth-child(-n+2){animation:none;transform:none}
.v11 .sky__imgs .g-papier,.v11 .sky__imgs .g-welle,.v11 .sky__imgs .g-radiance{}

.v11 .sky__imgs img,.v11 .sky__imgs .g{transform-origin:50% 88%}

/* Raster nur gezielt, fein */
.v11 .sky__grid line,.v11 .sky__grid circle{stroke:rgba(255,255,255,.3)}
.v11 .sky__grid2 line,.v11 .sky__grid2 circle,.v11 .sky__grid2 .cr{fill:none;stroke:rgba(11,18,32,.16);stroke-width:.8;vector-effect:non-scaling-stroke}
.v11 .sky__grid2 .cr{stroke:rgba(11,18,32,.35)}

/* ---------- Helle Abschnitte: dunkle Schrift, helles Glas ---------- */
.v11 [data-ink="hell"]{--text:#0B1220;--text2:#4F5A6B;--line:rgba(11,18,32,.1);--pill-bg:rgba(255,255,255,.62);--pill-b:rgba(11,18,32,.14);--link:#2F5FD0;--glass-b:rgba(255,255,255,.75);color:var(--text)}
.v11 [data-ink="hell"] h2{color:#14223b;text-shadow:0 0 30px rgba(255,255,255,.6)}
.v11 [data-ink="hell"] h2 em{color:#B65F22;text-shadow:0 0 22px rgba(255,255,255,.9),0 0 40px rgba(255,214,150,.5)}
.v11 [data-ink="hell"] .label{color:#4F5A6B}
.v11 [data-ink="hell"] .glass:not(.scard):not(.chat){background:linear-gradient(145deg,rgba(255,255,255,.7),rgba(255,255,255,.42))!important;border-color:rgba(255,255,255,.85)!important;box-shadow:inset 0 1px 0 #fff,0 24px 48px -24px rgba(41,37,36,.25)!important;color:#0B1220}
.v11 [data-ink="hell"] .glass p,.v11 [data-ink="hell"] .val span{color:#4F5A6B}
.v11 [data-ink="hell"] p,.v11 [data-ink="hell"] .lead{color:#33405a}
.v11 [data-ink="hell"] .btn:not(.primary):not(.glut){background:rgba(255,255,255,.6);color:#0B1220;border-color:rgba(11,18,32,.14)}
.v11 [data-ink="hell"] .scard{background:linear-gradient(145deg,rgba(255,255,255,.55),rgba(255,255,255,.28))!important;border-color:rgba(255,255,255,.8)!important;box-shadow:0 30px 70px -30px rgba(41,37,36,.35)!important}
.v11 [data-ink="hell"] .scard h2{color:#14223b}
.v11 [data-ink="hell"] .scard p{color:#33405a}
.v11 [data-ink="hell"] details summary{color:#0B1220}
.v11 [data-ink="hell"] .about2__h .wm__s{color:#2F5FD0}

/* ---------- herausstechen: links, Wort wird mit Licht geschrieben ---------- */
.v11 .stand{height:270vh}
.v11 .stand__stick{background:none!important}
.v11 .stand__stick::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:calc(1 - var(--out,0));background:linear-gradient(90deg,rgba(7,11,20,.58) 0%,rgba(7,11,20,.28) 40%,transparent 62%)!important}
.stand__col{position:absolute;z-index:3;left:max(20px,6vw);top:50%;transform:translateY(-50%) translateY(calc(var(--out,0)*-40px));opacity:calc(1 - var(--out,0));width:min(640px,50vw);color:#fff}
.v11 .stand__pre,.v11 .stand__post{display:block;font:300 clamp(20px,1.9vw,30px)/1.25 var(--sans);letter-spacing:-.015em;color:#E6ECF3;opacity:0;filter:blur(8px);transition:opacity 1.1s var(--ease),filter 1.1s var(--ease)}
.v11 .stand.on .stand__pre{opacity:.95;filter:none}
.v11 .stand__h{position:static!important;transform:none!important;opacity:1!important;left:auto!important;top:auto!important;width:auto!important;text-align:left!important;margin:.06em 0 .12em!important;line-height:1!important;font-size:inherit}
.v11 .stand__h em.stand__w{position:relative;display:inline-block;font-family:var(--serif3);font-style:italic;font-weight:400;font-size:clamp(64px,8.6vw,156px);line-height:1;padding:0 .1em .08em 0;color:#FFE7BE;background:none;-webkit-text-fill-color:currentColor;
  text-shadow:0 0 30px rgba(255,214,150,.75),0 0 70px rgba(255,170,90,.45);
  -webkit-mask-image:linear-gradient(90deg,#000 calc(var(--w,-10)*1% - 6%),transparent calc(var(--w,-10)*1% + 3%));mask-image:linear-gradient(90deg,#000 calc(var(--w,-10)*1% - 6%),transparent calc(var(--w,-10)*1% + 3%))}
.stand__h{position:relative}
.stand__h::after{content:"";position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,#fff 0,rgba(255,230,180,.9) 25%,rgba(255,170,90,.35) 55%,transparent 72%);filter:blur(1px);
  left:calc(var(--wx,0) * 1px);top:58%;opacity:var(--pen,0)}
.v11 .stand__post{margin-top:.2em}
.v11 .stand.done .stand__post{opacity:.9;filter:none;transition-delay:.05s}
.v11 .stand__p{margin:28px 0 0;max-width:560px;padding:18px 22px;border-radius:22px;background:rgba(5,7,13,.4);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.16);color:#E6ECF3;font-size:clamp(16px,1.35vw,19px);line-height:1.55;
  opacity:0;transform:translateY(16px);filter:blur(6px);transition:opacity 1s var(--ease) .25s,transform 1.1s var(--ease) .25s,filter 1s var(--ease) .25s}
.v11 .stand .pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;opacity:0;transition:opacity 1s .55s}
.v11 .stand.done .stand__p{opacity:1;transform:none;filter:none}
.v11 .stand.done .pills{opacity:1}
@media (max-width:700px){
  .stand__col{left:16px;right:16px;width:auto;top:12vh;transform:translateY(calc(var(--out,0)*-40px))}
  .v11 .stand__h em.stand__w{font-size:clamp(54px,15.5vw,84px)}
  .v11 .stand__p{margin-top:42vh;font-size:15.5px}
  .v11 .stand__stick::before{background:linear-gradient(180deg,rgba(7,11,20,.55) 0%,rgba(7,11,20,.15) 35%,transparent 55%,rgba(7,11,20,.5) 100%)!important}
}

/* ---------- Überschriften: Einblend-Effekte ---------- */
.v11 [data-r] .wd{display:inline-block}
.v11 [data-r="maske"] .wd{overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.v11 [data-r] .ch{display:inline-block}
.v11 [data-r="tippen"].caret .ch.cur::after{content:"";position:absolute;width:2px;height:.9em;margin:.08em 0 0 2px;background:currentColor;animation:caret .8s steps(1) infinite}
.v11 [data-r="tippen"] .ch{position:relative}
.v11 [data-r].rvw .wd{opacity:1;filter:none;transform:none;transition:none}

/* ---------- Leistungen: Reihe wie vorher, Karte hebt sich beim Drüberfahren und leuchtet ---------- */
.v11 .hs .tile{transition:transform .55s var(--ease),box-shadow .5s var(--ease),border-color .5s,filter .5s}
.v11 .hs .tile:hover{transform:translateY(-12px) scale(1.035);border-color:rgba(255,226,170,.55);box-shadow:0 0 0 1px rgba(255,226,170,.35),0 26px 60px -18px rgba(255,170,90,.45),0 0 60px -10px rgba(255,214,150,.35)}
.v11 .hs .track:hover .tile:not(:hover){filter:brightness(.78) saturate(.85)}
.v11 .hs .tile.v{height:min(66svh,620px)}
.v11 .hs .track{gap:12px}
@media (max-width:700px){.v11 .hs .tile.v{height:min(58svh,480px)}}

/* ---------- Kapitel 07: Bild beginnt mit dem Kapitel und wächst mit den Fragen; Chat klein, öffnet sich leicht ---------- */
.v11 .faq2{align-items:stretch}
.v11 .chatart{position:relative!important;top:0!important;margin-top:0!important;height:auto!important;min-height:560px}
.v11 .chat{top:auto!important;bottom:16px!important}
.v11 .chat.open .chat__log{height:min(32svh,290px)!important;flex:0 0 auto!important}
.v11 [data-ink="hell"] .chat.glass{background:linear-gradient(145deg,rgba(7,11,20,.5),rgba(7,11,20,.3))!important;color:#EEF2F6;--text:#EEF2F6}
.v11 [data-ink="hell"] .chat .msg.q{background:#fff;color:#0B1220}
@media (max-width:1000px){.v11 .chatart{min-height:560px}}

/* ---------- Menüleiste: durchsichtiges Glas, passt sich dem Hintergrund an ---------- */
.v11 .nav{background:rgba(10,16,30,.22)!important;border-color:rgba(255,255,255,.16)!important;backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);box-shadow:0 8px 30px rgba(7,11,20,.12);transition:background .5s,border-color .5s,color .5s}
.v11.nav-hell .nav{background:rgba(255,255,255,.4)!important;border-color:rgba(255,255,255,.75)!important;box-shadow:0 8px 30px rgba(41,37,36,.1)}
.v11.nav-hell .nav .links a,.v11.nav-hell .nav .logo,.v11.nav-hell .nav .lang{color:#0B1220}
.v11.nav-hell .nav .lang{border-color:rgba(11,18,32,.2)}
.v11.nav-hell .nav .cta{background:#0B1220!important;color:#fff!important;border-color:#0B1220!important}
.v11 .nav .links a,.v11 .nav .logo,.v11 .nav .lang{transition:color .5s}
.v11 [data-ink="hell"] .btn.primary{background:#0B1220!important;color:#fff!important;border-color:#0B1220!important}
.v11 [data-ink="hell"] .btn.primary .arr{color:#fff}
.v11 [data-ink="hell"] .step .n{color:#B65F22}
.v11 [data-ink="hell"] .step h3,.v11 [data-ink="hell"] .val b{color:#0B1220}
.v11 [data-ink="hell"] .chip{color:#0B1220}
.v11 [data-ink="hell"] .chip.on.glass.glass{background:#0B1220!important;color:#fff!important}
.v11 [data-ink="hell"] .pane{color:#fff}
.v11 [data-ink="hell"] .pane p,.v11 [data-ink="hell"] .pane li{color:#E6ECF3}
.v11 [data-ink="hell"] .pill.t{background:rgba(11,18,32,.06);color:#33405a;border-color:rgba(11,18,32,.12)}
.v11 [data-ink="hell"] .steps svg path{stroke:#B65F22}
.v11.nav-hell .nav .burger span,.v11.nav-hell .nav .burger span::before,.v11.nav-hell .nav .burger span::after{background:#0B1220}
.v11.nav-hell .nav .burger{color:#0B1220}
.v11.nav-hell .nav .burger span{background:#0B1220;box-shadow:0 5px 0 #0B1220,0 -5px 0 #0B1220}
