/* AgentOS · Bühne (A228, 04.10.2026)
   Moderne Schicht über studio.css und einfach.css: Tiefe statt Rahmen, eine Bühne je Seite, Bewegung mit Sinn.
   Marke: fluxward-web tokens.css (Royal #1263FF, DM Sans, Plus Jakarta Sans). Dauern 180–420 ms, ease-out, kein Bounce.
   Bewegung nur bei prefers-reduced-motion: no-preference. Einblenden steuert buehne.js (Klasse .ao-bewegt). */

:root{
  --ao-ease:cubic-bezier(.16,1,.3,1);
  --ao-t1:180ms;--ao-t2:280ms;--ao-t3:420ms;
  --ao-grund:#F4F7FC;
  --ao-kante:rgba(15,23,42,.07);
  --ao-hebung-1:0 1px 2px rgba(15,23,42,.05),0 6px 20px -10px rgba(15,23,42,.14);
  --ao-hebung-2:0 2px 6px rgba(15,23,42,.06),0 22px 48px -20px rgba(15,23,42,.26);
  --ao-hebung-blau:0 12px 28px -12px rgba(18,99,255,.6);
  --ao-nacht:linear-gradient(135deg,#0A1638 0%,#0D2468 48%,#1252E8 100%);
  --ao-netz:repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 28px),
            repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 28px);
  --ao-hell-auf-nacht:#A9C6FF;
}
:root[data-theme="dunkel"]{
  --ao-grund:#151B28;
  --ao-kante:rgba(255,255,255,.07);
  --ao-hebung-1:0 0 0 1px rgba(255,255,255,.06),0 8px 22px -12px rgba(0,0,0,.6);
  --ao-hebung-2:0 0 0 1px rgba(255,255,255,.09),0 24px 50px -20px rgba(0,0,0,.75);
}
@media (prefers-reduced-motion:reduce){:root{--ao-t1:1ms;--ao-t2:1ms;--ao-t3:1ms}}

/* ---------- Grund, Hülle, Typografie ---------- */
body.studio{background:var(--ao-grund)}
.studio .inhalt{padding-top:28px}
.studio h1{letter-spacing:-.03em}
.studio .kurs-h2,.studio .abschnitt>h2,.studio .abschnitt>summary>h2{font:700 24px/1.2 var(--fw-font-heading);letter-spacing:-.02em;border-left:0;padding-left:0;margin:40px 0 16px;color:var(--fw-ink)}
.studio .kurs-haupt>.kurs-h2:first-child{margin-top:0}
.studio .zahl,.studio .ring .mitte,.studio .rz-nr,.studio .anzahl{font-variant-numeric:tabular-nums}

/* Seitenleiste: hell, ohne Strich, gleitende Aktiv-Marke */
.seitenleiste{border-right:0;box-shadow:1px 0 0 var(--ao-kante)}
.nav a{position:relative;transition:background var(--ao-t1) var(--ao-ease),color var(--ao-t1) var(--ao-ease)}
.nav a .ico{transition:color var(--ao-t1) var(--ao-ease),transform var(--ao-t2) var(--ao-ease)}
.nav a:hover .ico{transform:translateX(2px)}
.seitenleiste .nav a[aria-current="page"]{background:var(--fw-blue-soft);color:var(--fw-ink);font-weight:700;view-transition-name:nav-aktiv}
.seitenleiste .nav a[aria-current="page"]::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--fw-blue)}
.seiten-fortschritt{border-color:transparent;background:var(--ao-grund);transition:background var(--ao-t1) var(--ao-ease),transform var(--ao-t2) var(--ao-ease)}
.seiten-fortschritt:hover{background:var(--fw-blue-soft);transform:translateY(-1px)}

/* Kopfleiste: ruhig, beim Scrollen mit Fläche */
.kopfleiste{background:var(--ao-grund)}
.kopfleiste.gescrollt{background:color-mix(in srgb,var(--ao-grund) 84%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom-color:var(--ao-kante)}
.suche-knopf{border-color:transparent;background:var(--fw-surface);box-shadow:var(--ao-hebung-1);transition:box-shadow var(--ao-t1) var(--ao-ease),color var(--ao-t1) var(--ao-ease)}
.suche-knopf:hover{box-shadow:var(--ao-hebung-2);color:var(--fw-ink)}
.kopf-aktionen .knopf.rahmen.frag-navi{border-color:transparent;box-shadow:var(--ao-hebung-1)}
.kopf-aktionen .knopf.rahmen.frag-navi:hover{box-shadow:var(--ao-hebung-2)}

/* ---------- Knöpfe ---------- */
.knopf{transition:background var(--ao-t1) var(--ao-ease),border-color var(--ao-t1) var(--ao-ease),color var(--ao-t1) var(--ao-ease),box-shadow var(--ao-t2) var(--ao-ease),transform var(--ao-t2) var(--ao-ease)}
.knopf .ico{transition:transform var(--ao-t2) var(--ao-ease)}
.knopf:hover>.ico:last-child:not(:first-child){transform:translateX(3px)}
.knopf.haupt:hover{transform:translateY(-1px);box-shadow:var(--ao-hebung-blau)}
.knopf:active{transform:translateY(0) scale(.98)}
.knopf.rahmen{border-color:var(--fw-control-line)}
.knopf.rahmen:hover{border-color:var(--fw-text-2);transform:translateY(-1px);box-shadow:var(--ao-hebung-1)}

/* ---------- Flächen: Tiefe statt Rahmen ---------- */
.studio :is(.karte,.lz-karte,.reise-zeile,.navi-blase,.info-karte,.start-karte,.danach-karte,.akkordeon,.os-schritt,.medium,
  .angaben-karte,.profi-bereich,.profi-wege,.reise-zu,.konfig-schritt,.etappe-check,.naechste-etappe,.lektion-raster .naechste,
  .kt-liste,.kl-teile,.lektion-leiste,.agent-erklaer,.quiz,details.hakt,details.praxis-aufgabe,.frage-feld,.regeln-kasten,
  .text-zum-film,.mensch-hilfe,.handbuch,.beitraege){
  border-color:transparent;box-shadow:var(--ao-hebung-1)}
.studio .info-karte{background:var(--fw-surface)}
.studio .info-karte.navi-karte{background:var(--fw-blue-soft);box-shadow:none}

/* Klickbare Flächen heben sich */
.studio :is(a.start-karte,a.danach-karte,a.medium,a.karte.klick,a.etappe-check,a.naechste-etappe,a.angaben-karte,.lektion-raster a.naechste){
  transition:transform var(--ao-t2) var(--ao-ease),box-shadow var(--ao-t2) var(--ao-ease)}
.studio :is(a.start-karte,a.danach-karte,a.medium,a.karte.klick,a.etappe-check,a.naechste-etappe,a.angaben-karte,.lektion-raster a.naechste):hover{
  transform:translateY(-3px);box-shadow:var(--ao-hebung-2)}
.studio :is(.reise-zeile,.lz-karte){transition:transform var(--ao-t2) var(--ao-ease),box-shadow var(--ao-t2) var(--ao-ease)}
.studio :is(.reise-zeile,.lz-karte):hover{transform:translateY(-2px);box-shadow:var(--ao-hebung-2)}

/* Bilder in Karten: ruhiger Zoom */
.start-karte img{transition:transform var(--ao-t3) var(--ao-ease)}
.start-karte:hover img{transform:scale(1.04)}
.vorschau.lt-kachel{transition:transform var(--ao-t3) var(--ao-ease),box-shadow var(--ao-t3) var(--ao-ease)}
:is(.reise-zeile,.lz-karte,.lektion-zeile,.modul):hover .vorschau.lt-kachel{transform:scale(1.03)}

/* ---------- Navi-Begrüßung ---------- */
.navi-blase{box-shadow:var(--ao-hebung-1)}
.navi-zeile .navi{filter:drop-shadow(0 8px 14px rgba(18,99,255,.22))}

/* ---------- Bühnen: Start „Weiter lernen“ und Kopf der Lernreise ---------- */
.studio .start-weiter{position:relative;overflow:hidden;border:0;background:var(--ao-netz),var(--ao-nacht);color:#fff;padding:32px;border-radius:28px;gap:36px;box-shadow:var(--ao-hebung-2)}
.studio .start-weiter .vorschau{width:340px;border-color:rgba(255,255,255,.18);box-shadow:0 24px 48px -20px rgba(0,0,0,.6);transform:perspective(900px) rotateY(-6deg) rotateX(2deg)}
.studio .start-weiter:hover .vorschau{transform:perspective(900px) rotateY(-2deg) rotateX(0) translateY(-2px)}
.studio .start-weiter .sw-text>p:first-child{color:var(--ao-hell-auf-nacht)}
.studio .start-weiter .sw-text h1{color:#fff;font-size:clamp(30px,3.6vw,46px)}
.studio .start-weiter .sw-text p{color:rgba(255,255,255,.82)}
.studio .start-weiter .knopf.haupt{background:#fff;color:#0B2A8A}
.studio .start-weiter .knopf.haupt:hover{background:#EEF4FF;box-shadow:0 14px 30px -14px rgba(0,0,0,.6)}
.studio .start-weiter .knopf.rahmen{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.studio .start-weiter .knopf.rahmen:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.75);box-shadow:none}
.studio .start-weiter .ns-stand{color:rgba(255,255,255,.78)}
.studio .start-weiter .ns-balken{background:rgba(255,255,255,.18)}
.studio .start-weiter .ns-balken>span{background:linear-gradient(90deg,#7FB0FF,#FFFFFF)}
.studio .start-weiter.fertig{background:var(--ao-netz),linear-gradient(135deg,#0B3B2C,#147A54)}

.studio .kurs-kopf{position:relative;overflow:hidden;background:var(--ao-netz),var(--ao-nacht);border-radius:26px;padding:22px 28px 22px 22px;box-shadow:var(--ao-hebung-2)}
.studio .kurs-kopf .ring .wert{stroke:#9CC0FF}
.studio .kurs-kopf .vorschau{box-shadow:0 18px 36px -18px rgba(0,0,0,.6)}

/* Reiter als Segmente mit gleitender Marke */
.studio .kurs-reiter{display:inline-flex;gap:4px;padding:5px;border-radius:16px;background:var(--fw-bg-deep);box-shadow:inset 0 0 0 1px var(--ao-kante)}
.studio .kurs-reiter a{border:0;background:transparent;border-radius:12px;min-height:40px;transition:background var(--ao-t1) var(--ao-ease),color var(--ao-t1) var(--ao-ease)}
.studio .kurs-reiter a:hover{background:color-mix(in srgb,var(--fw-surface) 60%,transparent)}
.studio .kurs-reiter a[aria-current="page"]{background:var(--fw-surface);color:var(--fw-ink);box-shadow:var(--ao-hebung-1);view-transition-name:reiter-aktiv}

/* ---------- Lernreise als Zeitleiste ---------- */
.studio .reise-zeilen{position:relative;gap:12px}
.studio .reise-zeilen::before{content:"";position:absolute;left:25px;top:28px;bottom:28px;width:2px;border-radius:2px;background:linear-gradient(var(--fw-blue-line),var(--fw-line))}
.studio .reise-zeile{position:relative;border-radius:20px}
.studio .reise-zeile.jetzt{border-color:transparent;box-shadow:0 0 0 2px var(--fw-blue),var(--ao-hebung-2)}
.studio .reise-zeile.fertig{background:var(--fw-surface);opacity:.86}
.studio .rz-nr{position:relative;z-index:1;box-shadow:0 0 0 4px var(--fw-surface)}
@media (prefers-reduced-motion:no-preference){
  .studio .reise-zeile.jetzt .rz-nr::after,.studio .lz-karte.jetzt .rz-nr::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--fw-blue);animation:ao-welle 2.4s var(--ao-ease) 3}
}
@keyframes ao-welle{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}
.studio .lz-karte.jetzt{border-color:transparent;box-shadow:0 0 0 2px var(--fw-blue),var(--ao-hebung-2)}

/* ---------- Fortschritt ---------- */
.balken,.ns-balken{position:relative}
.balken>span,.ns-balken>span{position:relative;overflow:hidden}
@media (prefers-reduced-motion:no-preference){
  .balken>span::after,.ns-balken>span::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-100%);animation:ao-glanz 1.4s var(--ao-ease) .5s 1 both}
}
@keyframes ao-glanz{to{transform:translateX(100%)}}

/* ---------- Lektion ---------- */
.studio .lektion-leiste{border-radius:18px}
.studio .kl-werkzeug{border-color:transparent;background:var(--fw-surface);box-shadow:var(--ao-hebung-1);transition:box-shadow var(--ao-t1) var(--ao-ease),transform var(--ao-t2) var(--ao-ease)}
.studio .kl-werkzeug:hover{box-shadow:var(--ao-hebung-2);transform:translateY(-1px)}
.studio .kl-text>section[id^="teil-"]{padding-top:36px;margin-top:36px;border-top-color:var(--ao-kante)}
.studio .kl-text>section.einstieg[id^="teil-"]{padding-top:8px;margin-top:12px;border-top:0}
.studio .kl-text section.abruf{box-shadow:inset 0 0 0 1px var(--fw-blue-line)}
.studio .kl-text section.uebung{padding:28px 28px 24px!important;border:0!important;border-radius:24px;background:var(--fw-surface);box-shadow:var(--ao-hebung-1)}
.studio .kl-text section.uebung .teil-art{background:var(--fw-success-soft)}
.studio .lesefortschritt span{background:linear-gradient(90deg,#1252E8,#5B9BFF)}

/* Weiches Aufklappen (wo der Browser es kann) */
@supports selector(::details-content){
  @media (prefers-reduced-motion:no-preference){
    :root{interpolate-size:allow-keywords}
    .studio details::details-content{height:0;overflow:clip;transition:height var(--ao-t3) var(--ao-ease),content-visibility var(--ao-t3) allow-discrete}
    .studio details[open]::details-content{height:auto}
  }
}

/* ---------- Schwebender Navi ---------- */
@media (prefers-reduced-motion:no-preference){
  .navi-schwebt{animation:ao-schweben 4.8s ease-in-out infinite alternate}
  .navi-schwebt:hover{animation-play-state:paused}
}
@keyframes ao-schweben{from{transform:translateY(0)}to{transform:translateY(-5px)}}

/* ---------- Seitenwechsel ---------- */
::view-transition-old(root){animation:160ms var(--ao-ease) both ao-vt-aus}
::view-transition-new(root){animation:340ms var(--ao-ease) both ao-vt-ein}
::view-transition-group(nav-aktiv),::view-transition-group(reiter-aktiv){animation-duration:340ms;animation-timing-function:var(--ao-ease)}
@keyframes ao-vt-aus{to{opacity:0;transform:translateY(-4px)}}
@keyframes ao-vt-ein{from{opacity:0;transform:translateY(12px)}}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* ---------- Einblenden beim Laden und Scrollen (buehne.js) ---------- */
.ao-bewegt [data-ao]{opacity:0;transform:translateY(16px)}
.ao-bewegt [data-ao].ao-da{opacity:1;transform:none;transition:opacity 380ms var(--ao-ease),transform var(--ao-t3) var(--ao-ease)}
@media print{.ao-bewegt [data-ao]{opacity:1!important;transform:none!important}}

/* ---------- Handy ---------- */
@media (max-width:1023px){
  .handy-leiste a{position:relative;transition:color var(--ao-t1) var(--ao-ease)}
  .handy-leiste a[aria-current="page"]::before{content:"";position:absolute;top:0;left:50%;width:28px;height:3px;margin-left:-14px;border-radius:0 0 3px 3px;background:var(--fw-blue);view-transition-name:nav-aktiv-handy}
  .handy-leiste{border-top-color:var(--ao-kante);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);background:color-mix(in srgb,var(--fw-surface) 88%,transparent)}
}
@media (max-width:640px){
  .studio .inhalt{padding-top:16px}
  .studio .start-weiter{padding:18px;border-radius:22px;gap:18px}
  .studio .start-weiter .vorschau{width:100%;transform:none}
  .studio .start-weiter:hover .vorschau{transform:none}
  .studio .kurs-kopf{border-radius:20px;padding:16px}
  .studio .kurs-reiter{display:flex;width:100%;overflow-x:auto}
  .studio .kl-text section.uebung{padding:18px 16px 16px!important;border-radius:18px}
  .studio .reise-zeilen::before{display:none}
}

/* ---------- Öffentliche Seiten (Start, Lernweg, Preise, Hilfe, Über uns) ---------- */
body.w-seite{background:var(--ao-grund)}
.w-seite .w-hell{border-top-color:transparent;border-bottom-color:transparent}
.w-seite :is(.w-weg,.w-lektion-karte,.w-plan,.akkordeon,.w-etappe,.w-karten>li,.w-galerie>li,.w-fakten,.w-held-bild,.w-sicher-bild){
  border-color:transparent;box-shadow:var(--ao-hebung-1)}
.w-seite :is(.w-plan,.w-karten>li,.w-galerie>li,.w-etappe,.w-film){transition:transform var(--ao-t2) var(--ao-ease),box-shadow var(--ao-t2) var(--ao-ease)}
.w-seite :is(.w-plan,.w-karten>li,.w-galerie>li,.w-etappe):hover{transform:translateY(-3px);box-shadow:var(--ao-hebung-2)}
.w-seite .w-film:hover{transform:translateY(-3px)}
.w-seite .w-plan.w-plan-jetzt{box-shadow:0 0 0 2px var(--fw-blue),var(--ao-hebung-2)}
.w-seite .w-held-buehne .szene-rahmen{box-shadow:var(--ao-hebung-2)}
/* Markierung im Titel zieht sich auf */
.ao-bewegt .w-mark{background-repeat:no-repeat;background-size:0% 100%;transition:background-size 720ms var(--ao-ease)}
.ao-bewegt .w-mark.an{background-size:100% 100%}
@media print{.ao-bewegt .w-mark{background-size:100% 100%}}

/* Spalten in Code-Kästen bleiben bündig: kein zusätzlicher Wortabstand in Monospace */
.studio :is(pre,code,kbd,samp){word-spacing:normal}

/* Endprüfung V2: Abstände und Tippziele */
.studio .vk-hinweis{margin-top:14px}
.studio .gesperrt-karte .lead{margin-top:12px}
@media (max-width:640px){.studio footer.inhalt.meta a{display:inline-block;padding:4px 2px;min-height:24px}}

/* Endprüfung V2: Kästen mit Spalten. Zwei Spalten als Raster (Handy: Bezeichnung über dem Wert),
   mehr Spalten bleiben ausgerichtet und scrollen seitlich, mit weichem Rand als Hinweis */
.studio .lesetext .kasten-raster{font:14.5px/1.6 var(--fw-font-mono);word-spacing:normal;background:var(--fw-surface-soft);border:1px solid var(--fw-line);border-radius:var(--fw-radius);padding:16px 18px;margin:0 0 1.2em;color:var(--fw-text)}
.studio .lesetext figure.ergebnis .kasten-raster{margin:0}
.studio .kasten-raster .kr-titel{margin:0 0 .7em;white-space:pre-wrap}
.studio .kasten-raster dl{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:2ch;margin:0}
.studio .kasten-raster dt,.studio .kasten-raster dd{margin:0;white-space:pre-wrap;overflow-wrap:break-word}
.studio .kasten-raster dd{white-space:pre-line}
.studio .kasten-raster dt{color:var(--fw-ink)}
.studio .kasten-raster .kr-abstand{margin-top:.8em}
.studio .lesetext pre.spalten{white-space:pre;overflow-x:auto;
  background:linear-gradient(to right,var(--fw-surface-soft) 30%,transparent) left/28px 100% no-repeat local,
             linear-gradient(to left,var(--fw-surface-soft) 30%,transparent) right/28px 100% no-repeat local,
             linear-gradient(to right,rgba(15,23,42,.14),transparent) left/12px 100% no-repeat scroll,
             linear-gradient(to left,rgba(15,23,42,.14),transparent) right/12px 100% no-repeat scroll,
             var(--fw-surface-soft)}
.studio .lesetext pre.spalten:focus-visible{outline:2px solid var(--fw-blue);outline-offset:2px}
@media (max-width:640px){
  .studio .lesetext .kasten-raster{font-size:14px;padding:14px}
  .studio .kasten-raster dl{grid-template-columns:minmax(0,1fr)}
  .studio .kasten-raster dt{font-weight:700;margin-top:.55em}
  .studio .kasten-raster dt:first-of-type{margin-top:0}
  .studio .kasten-raster dd{padding-left:2ch;white-space:normal}
  .studio .lesetext pre.spalten{font-size:14px;padding:14px}
}