/* ══════════════════════════════════════════════════════════════
   STAGE.CSS — Die Morph-Bühne des Eingangs
   Jemke Solutions | 2026

   Wenn der Besucher eine Situation wählt, baut sich die Seite um:
   Ton, Grundfläche, Frage, Rahmen und Geometrie wechseln. Nicht ein
   Kasten mit anderem Text — acht echte Kompositionsarten.

   Der Vorgeschmack ist bewusst KEIN Nachbau der Zielwelt. Er zeigt
   deren Mechanik in einer Minute; die volle Welt bleibt eine eigene
   Seite (zweiter Klick).

   Präfix: st-  ·  Arten: browser panel relay islands dock sources
                         boundary lanes
══════════════════════════════════════════════════════════════ */

/* ── Ton: verschiebt Akzent UND Grundfläche der ganzen Seite ─── */
body.en[data-ton="ops"]   { --acc:#818cf8; --acc2:#818cf8; --wash:rgba(129,140,248,.07); }
body.en[data-ton="web"]   { --acc:#e879f9; --acc2:#e879f9; --wash:rgba(232,121,249,.07); }
body.en[data-ton="know"]  { --acc:#fbbf24; --acc2:#fbbf24; --wash:rgba(251,191,36,.07); }
body.en[data-ton="infra"] { --acc:#22d3ee; --acc2:#22d3ee; --wash:rgba(34,211,238,.07); }
body.en[data-ton="ai"]    { --acc:#4ade80; --acc2:#4ade80; --wash:rgba(74,222,128,.07); }
/* Eine Welt = ein Wert. Auch im hellen Theme gibt es keine dunklere Ersatzfarbe. */
html[data-theme="light"] body.en[data-ton="ops"]   { --acc:#818cf8; --acc2:#818cf8; --wash:rgba(129,140,248,.07); }
html[data-theme="light"] body.en[data-ton="web"]   { --acc:#e879f9; --acc2:#e879f9; --wash:rgba(232,121,249,.07); }
html[data-theme="light"] body.en[data-ton="know"]  { --acc:#fbbf24; --acc2:#fbbf24; --wash:rgba(251,191,36,.07); }
html[data-theme="light"] body.en[data-ton="infra"] { --acc:#22d3ee; --acc2:#22d3ee; --wash:rgba(34,211,238,.07); }
html[data-theme="light"] body.en[data-ton="ai"]    { --acc:#4ade80; --acc2:#4ade80; --wash:rgba(74,222,128,.07); }
body.en { --wash: transparent; }
body.en[data-ton] { background-image: radial-gradient(120% 55% at 50% 0%, var(--wash), transparent 70%); }

/* Akzent-abgeleitete Tokens folgen dem Ton mit */
body.en[data-ton] { --acc-d: color-mix(in srgb, var(--acc) 13%, transparent);
                    --acc-g: color-mix(in srgb, var(--acc) 30%, transparent); }

/* ── Das Feld tritt zurück, sobald eine Bühne steht ─────────── */
body.en[data-ton] .en-field__head,
body.en[data-ton] .en-field > .en-in > .en-lead { opacity: .5; }

/* ══════════════════════════════════════════════════════════
   RAHMEN DER BÜHNE
══════════════════════════════════════════════════════════ */
.st { position: relative; }
.st__eyebrow {
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--fm); font-size:.68rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--acc); margin:0 0 1rem;
}
.st__eyebrow::before { content:""; width:20px; height:1px; background:currentColor; }
.st__frage {
  font-family:var(--fh); font-weight:700;
  font-size:clamp(1.7rem,4.4vw,3.1rem); line-height:1.05;
  letter-spacing:-.033em; margin:0 0 clamp(1.6rem,3.5vw,2.4rem);
  max-width:20ch; text-wrap:balance;
}
.st__world {
  position:relative; isolation:isolate;
  padding-top:clamp(12rem,31vw,21.5rem);
}
.st__cinema {
  position:absolute; z-index:0; inset:0 0 auto; height:clamp(16rem,38vw,28rem);
  overflow:hidden; border:1px solid var(--hair2); border-radius:20px;
  background-image:
    linear-gradient(90deg,rgba(5,6,10,.72),transparent 32%,transparent 70%,rgba(5,6,10,.4)),
    linear-gradient(180deg,rgba(5,6,10,.1),rgba(5,6,10,.86)),
    var(--router-art);
  background-size:cover; background-position:var(--router-art-pos);
  box-shadow:0 38px 100px rgba(0,0,0,.42),0 0 80px var(--acc-d);
}
.st__cinema::before {
  content:""; position:absolute; inset:0;
  background:radial-gradient(46% 66% at 52% 48%,transparent 0 35%,rgba(5,6,10,.34) 100%);
}
.st__cinema::after {
  content:""; position:absolute; inset:auto 0 0; height:36%;
  background:linear-gradient(transparent,var(--s0));
}
.st__cinema-flow {
  position:absolute; inset:0; opacity:.55;
  background:
    radial-gradient(circle at 28% 68%,var(--acc) 0 2px,transparent 3px),
    radial-gradient(circle at 52% 42%,var(--acc2) 0 2px,transparent 3px),
    radial-gradient(circle at 74% 62%,var(--acc) 0 2px,transparent 3px);
  filter:drop-shadow(0 0 12px var(--acc));
  animation:stCinemaPulse 4.8s ease-in-out infinite;
}
@keyframes stCinemaPulse { 50% { opacity:.9; filter:drop-shadow(0 0 20px var(--acc)) } }
.st__stage {
  position:relative; z-index:2; margin-inline:clamp(.45rem,4vw,3rem);
  padding:clamp(.65rem,1.8vw,1.2rem);
  border:1px solid color-mix(in srgb,var(--acc) 28%,var(--hair2));
  border-radius:18px;
  background:color-mix(in srgb,var(--s0) 88%,transparent);
  box-shadow:0 28px 70px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
}
.st__foot {
  display:flex; gap:.7rem; flex-wrap:wrap; align-items:center;
  margin-top:clamp(1.6rem,3.5vw,2.4rem);
  padding-top:1.4rem; border-top:1px solid var(--hair);
}
.st__hint { font-family:var(--fm); font-size:.7rem; color:var(--ink3); }

/* Auswahlreihe, die manche Arten mitbringen */
.st__picks { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.2rem; }
.st__pick {
  font:inherit; cursor:pointer; font-family:var(--fh); font-weight:700; font-size:.9rem;
  padding:.55rem .95rem; border-radius:10px;
  border:1px solid var(--hair2); background:var(--s2); color:var(--ink);
  transition:border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.st__pick:hover { transform:translateY(-2px); border-color:var(--acc); }
.st__pick[aria-pressed="true"] { border-color:var(--acc); background:var(--acc-d); color:var(--acc); }
.st__pick:focus-visible { outline:2px solid var(--acc); outline-offset:3px; }

/* ══════════════════════════════════════════════════════════
   ART: BROWSER — die Seite baut sich um ein Ziel um
══════════════════════════════════════════════════════════ */
.st-brw { border:1px solid var(--hair2); border-radius:14px; overflow:hidden; background:var(--s1);
  box-shadow:0 24px 60px rgba(0,0,0,.35); }
html[data-theme="light"] .st-brw { box-shadow:0 18px 44px rgba(20,26,60,.12); }
.st-brw__chrome { display:flex; align-items:center; gap:.5rem; padding:.55rem .8rem;
  background:var(--s2); border-bottom:1px solid var(--hair); }
.st-brw__chrome i { width:8px; height:8px; border-radius:50%; background:var(--hair2); }
.st-brw__url { margin-left:.6rem; font-family:var(--fm); font-size:.64rem; color:var(--ink3);
  background:var(--s0); border:1px solid var(--hair); border-radius:5px; padding:.2rem .55rem; }
.st-brw__nav { display:flex; gap:1.1rem; padding:.8rem 1.2rem; border-bottom:1px solid var(--hair);
  font-family:var(--fh); font-size:.8rem; font-weight:700; color:var(--ink2); flex-wrap:wrap; }
.st-brw__nav span:first-child { color:var(--acc); }
.st-brw__hero { padding:clamp(1.4rem,3vw,2.4rem) 1.2rem; text-align:center;
  background:linear-gradient(180deg, var(--acc-d), transparent); }
.st-brw__hero b { display:block; font-family:var(--fh); font-weight:700;
  font-size:clamp(1.1rem,2.6vw,1.7rem); letter-spacing:-.02em; margin-bottom:.9rem; }
.st-brw__cta { display:inline-block; font-family:var(--fh); font-weight:700; font-size:.85rem;
  background:var(--acc); color:#07080c; padding:.55rem 1.1rem; border-radius:9px; }
html[data-theme="light"] .st-brw__cta { color:#fff; }
.st-brw__mods { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hair); }
.st-brw__mod { background:var(--s1); padding:.9rem .8rem; font-size:.8rem; color:var(--ink2);
  display:flex; flex-direction:column; gap:.5rem; }
.st-brw__mod i { font-style:normal; font-family:var(--fm); font-size:.6rem; color:var(--acc); }
.st-brw__mod span { height:4px; border-radius:2px; background:var(--hair2); }
.st-brw__mod span:nth-child(4) { width:66%; }
@media (max-width:760px){ .st-brw__mods { grid-template-columns:1fr 1fr; } }

/* ══════════════════════════════════════════════════════════
   ART: PANEL — Arbeitsfläche mit Reitern
══════════════════════════════════════════════════════════ */
.st-pan { border:1px solid var(--hair2); border-radius:14px; overflow:hidden; background:var(--s1); }
.st-pan__bar { display:flex; gap:.2rem; padding:.5rem .6rem 0; background:var(--s2);
  border-bottom:1px solid var(--hair); }
.st-pan__tab { font-family:var(--fm); font-size:.7rem; padding:.5rem .85rem;
  border-radius:8px 8px 0 0; color:var(--ink3); border:1px solid transparent; border-bottom:0; }
.st-pan__tab.on { color:var(--acc); background:var(--s1); border-color:var(--hair); }
.st-pan__rows { padding:.8rem; display:flex; flex-direction:column; gap:.45rem; }
.st-pan__row { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) auto; gap:.9rem;
  align-items:center; border:1px solid var(--hair); border-radius:9px; padding:.65rem .8rem;
  font-family:var(--fm); font-size:.76rem; color:var(--ink2);
  animation:stIn var(--t-base) var(--ease) both; animation-delay:calc(var(--i)*90ms); }
.st-pan__row b { color:var(--acc); font-weight:400; }
.st-pan__row em { font-style:normal; color:var(--ink); }
.st-pan__row span:last-child { color:var(--ink3); justify-self:end; }
@keyframes stIn { from { opacity:0; transform:translateY(8px) } }
@media (max-width:640px){ .st-pan__row { grid-template-columns:1fr; row-gap:.25rem } .st-pan__row span:last-child{justify-self:start} }

/* ══════════════════════════════════════════════════════════
   ART: RELAY — dieselbe Angabe wandert und verliert
══════════════════════════════════════════════════════════ */
.st-rel { display:flex; flex-direction:column; gap:1.4rem; }
.st-rel__track { position:relative; display:flex; align-items:flex-start; gap:.4rem;
  overflow-x:auto; padding-bottom:.4rem; }
.st-rel__st { flex:1 0 auto; min-width:104px; text-align:center; position:relative; }
.st-rel__st::after { content:""; position:absolute; top:15px; left:calc(50% + 22px); right:calc(-50% + 22px);
  height:1px; background:var(--hair2); }
.st-rel__st:last-child::after { display:none; }
.st-rel__dot { width:30px; height:30px; margin:0 auto .5rem; border-radius:50%;
  border:1px solid var(--hair2); background:var(--s1); display:grid; place-items:center;
  font-family:var(--fm); font-size:.66rem; color:var(--ink3); position:relative; z-index:2; }
.st-rel__st.on .st-rel__dot { border-color:var(--acc); background:var(--acc-d); color:var(--acc); }
.st-rel__lb { font-family:var(--fm); font-size:.66rem; color:var(--ink3); }
.st-rel__st.on .st-rel__lb { color:var(--ink2); }
.st-rel__fact { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap;
  border:1px solid var(--hair); border-radius:11px; background:var(--s1); padding:.9rem 1rem; }
.st-rel__fact b { font-family:var(--fm); font-size:1.05rem; }
.st-rel__fact .bad { color:#f87171; text-decoration:line-through; }
.st-rel__fact .good { color:var(--acc); }
.st-rel__fact small { font-family:var(--fm); font-size:.68rem; color:var(--ink3); }

/* ══════════════════════════════════════════════════════════
   ART: ISLANDS — Programme bleiben, der Mensch trägt
══════════════════════════════════════════════════════════ */
.st-isl { position:relative; aspect-ratio:16/8.5; max-width:660px; margin-inline:auto; }
.st-isl__svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.st-isl__wire { stroke:var(--hair2); stroke-width:1; fill:none; }
.st-isl__wire.br { stroke:var(--acc); stroke-width:2; }
.st-isl__n { position:absolute; translate:-50% -50%; z-index:2;
  font-family:var(--fm); font-size:.7rem; white-space:nowrap;
  border:1px solid var(--hair2); border-radius:9px; background:var(--s1);
  padding:.42rem .7rem; color:var(--ink2); }
.st-isl__core { position:absolute; left:50%; top:50%; translate:-50% -50%; z-index:3;
  width:74px; height:74px; border-radius:50%; display:grid; place-items:center; text-align:center;
  border:1px solid var(--acc-g); background:var(--acc-d); color:var(--acc);
  font-family:var(--fm); font-size:.62rem; line-height:1.25; }
.st-isl__load { display:flex; align-items:baseline; gap:.7rem; justify-content:center;
  margin-top:1rem; font-family:var(--fm); font-size:.74rem; color:var(--ink3); }
.st-isl__load b { font-size:1.5rem; color:var(--acc); font-family:var(--fh); }
.st-isl__load s { color:var(--ink3); }
@media (max-width:640px){ .st-isl { aspect-ratio:1/1.05 } .st-isl__n { font-size:.62rem; padding:.3rem .5rem } }

/* ══════════════════════════════════════════════════════════
   ART: DOCK — Verstreutes dockt an Kontexte an
══════════════════════════════════════════════════════════ */
.st-dock { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(1rem,3vw,2rem); align-items:start; }
.st-dock__loose { display:flex; flex-wrap:wrap; gap:.45rem; }
.st-dock__f { font-family:var(--fm); font-size:.68rem; color:var(--ink2);
  border:1px solid var(--hair); border-radius:6px; background:var(--s1);
  padding:.42rem .6rem; rotate:var(--r,0deg);
  transition:opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.st-dock.is-docked .st-dock__f { opacity:.22; transform:scale(.94); }
.st-dock__cols { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
.st-dock__col { border:1px solid var(--hair); border-radius:11px; background:var(--s1);
  padding:.7rem .6rem; min-height:112px; }
.st-dock.is-docked .st-dock__col { border-color:var(--acc-g); }
.st-dock__h { font-family:var(--fm); font-size:.62rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink3); margin:0 0 .5rem; }
.st-dock.is-docked .st-dock__h { color:var(--acc); }
.st-dock__i { font-family:var(--fm); font-size:.62rem; color:var(--ink2);
  border-bottom:1px solid var(--hair); padding:.3rem 0; opacity:0; transform:translateY(6px);
  transition:opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
  transition-delay:calc(var(--i)*90ms); }
.st-dock.is-docked .st-dock__i { opacity:1; transform:none; }
@media (max-width:760px){ .st-dock { grid-template-columns:1fr } }

/* ══════════════════════════════════════════════════════════
   ART: SOURCES — Antwort nennt ihre Quelle
══════════════════════════════════════════════════════════ */
.st-src { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1rem,3vw,2rem); align-items:start; }
.st-src__q { border:1px solid var(--hair2); border-radius:11px; background:var(--s2);
  padding:.9rem 1rem; font-size:.98rem; line-height:1.45; }
.st-src__q::before { content:"?"; font-family:var(--fm); color:var(--acc); margin-right:.5rem; font-weight:700; }
.st-src__docs { display:flex; flex-direction:column; gap:.4rem; margin-top:.9rem; }
.st-src__doc { display:flex; align-items:center; gap:.55rem;
  font-family:var(--fm); font-size:.7rem; color:var(--ink3);
  border:1px solid var(--hair); border-radius:8px; background:var(--s1); padding:.5rem .65rem;
  opacity:.4; transform:translateX(-8px);
  transition:opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease),
             border-color var(--t-base) var(--ease);
  transition-delay:calc(var(--i)*140ms); }
.st-src.is-lit .st-src__doc { opacity:1; transform:none; border-color:var(--acc-g); color:var(--ink2); }
.st-src__doc b { font-family:var(--fm); color:var(--acc); font-weight:400; }
.st-src__a { border-left:2px solid var(--acc); padding-left:1rem;
  opacity:0; transition:opacity var(--t-slow) var(--ease) 500ms; }
.st-src.is-lit .st-src__a { opacity:1; }
.st-src__a p { margin:0 0 .6rem; font-size:1rem; line-height:1.55; }
.st-src__cites { display:flex; gap:.35rem; flex-wrap:wrap; }
.st-src__cite { font-family:var(--fm); font-size:.62rem; color:var(--acc);
  border:1px solid var(--acc-g); background:var(--acc-d); border-radius:5px; padding:.15rem .4rem; }
@media (max-width:760px){ .st-src { grid-template-columns:1fr } }

/* ══════════════════════════════════════════════════════════
   ART: BOUNDARY — eine Linie, innen und außen
══════════════════════════════════════════════════════════ */
.st-bnd { position:relative; border:1px dashed var(--hair2); border-radius:14px;
  padding:clamp(1rem,2.5vw,1.6rem); }
.st-bnd__line { position:absolute; left:0; right:0; top:50%; height:1px;
  background:repeating-linear-gradient(90deg,var(--acc) 0 8px, transparent 8px 16px); opacity:.7; }
.st-bnd__lbl { position:absolute; right:.8rem; top:calc(50% - 1.5rem);
  font-family:var(--fm); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--acc); }
.st-bnd__half { display:flex; flex-wrap:wrap; gap:.45rem; padding:1rem 0; }
.st-bnd__half--in  { min-height:78px; }
.st-bnd__half--out { min-height:78px; opacity:.45; }
.st-bnd__cap { font-family:var(--fm); font-size:.64rem; color:var(--ink3); margin:0; }
.st-bnd__chip { font-family:var(--fm); font-size:.7rem;
  border:1px solid var(--hair2); border-radius:8px; background:var(--s1); padding:.42rem .65rem; }
.st-bnd__half--in .st-bnd__chip { border-color:var(--acc-g); color:var(--acc); background:var(--acc-d); }
.st-bnd__count { display:inline-flex; align-items:baseline; gap:.4rem; margin-top:.8rem;
  font-family:var(--fm); font-size:.72rem; color:var(--ink3); }
.st-bnd__count b { font-family:var(--fh); font-size:1.4rem; color:var(--acc); }

/* ══════════════════════════════════════════════════════════
   ART: LANES — zwei Spuren, eine Uhr
══════════════════════════════════════════════════════════ */
.st-lan { display:flex; flex-direction:column; gap:.5rem; }
.st-lan__clock { display:grid; grid-template-columns:132px 1fr; gap:.8rem; align-items:center;
  font-family:var(--fm); font-size:.62rem; color:var(--ink3); }
.st-lan__ticks { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; }
.st-lan__lane { display:grid; grid-template-columns:132px 1fr; gap:.8rem; align-items:center; }
.st-lan__name { font-family:var(--fm); font-size:.68rem; color:var(--ink2); }
.st-lan__bar { position:relative; height:34px; border:1px solid var(--hair); border-radius:8px;
  background:var(--s1); overflow:hidden; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; }
.st-lan__seg { border-right:1px solid var(--hair); }
.st-lan__seg:last-child { border-right:0; }
.st-lan__lane--ok .st-lan__seg { background:var(--acc-d); }
.st-lan__lane--bad .st-lan__seg { background:var(--acc-d); }
.st-lan__lane--bad .st-lan__seg.dead { background:repeating-linear-gradient(45deg,
  rgba(248,113,113,.22) 0 6px, transparent 6px 12px); }
.st-lan__mark { position:absolute; top:0; bottom:0; width:2px; background:#f87171; z-index:2; }
.st-lan__note { font-family:var(--fm); font-size:.66rem; color:var(--ink3); margin:.4rem 0 0 0; }
.st-lan__note b { color:#f87171; font-weight:400; }
@media (max-width:640px){
  .st-lan__clock, .st-lan__lane { grid-template-columns:1fr; gap:.25rem }
  .st-lan__name { color:var(--ink3) }
}

/* ══════════════════════════════════════════════════════════
   MORPH
   View Transitions morphen den Wechsel zwischen zwei Bühnen.
   Wo es sie nicht gibt, bleibt eine schlichte Blende.
══════════════════════════════════════════════════════════ */
.st__stage { view-transition-name: st-stage; }
.st__frage { view-transition-name: st-frage; }

@supports not (view-transition-name: x) {
  .st__stage { animation: stFade var(--t-slow) var(--ease); }
  @keyframes stFade { from { opacity:0; transform:translateY(10px) } }
}

::view-transition-old(st-stage),
::view-transition-new(st-stage) { animation-duration:.5s; }
::view-transition-old(st-frage),
::view-transition-new(st-frage) { animation-duration:.38s; }

@media (prefers-reduced-motion: reduce) {
  .st__stage, .st__frage { view-transition-name: none; }
  .st-dock__f, .st-dock__i, .st-src__doc, .st-src__a, .st-pan__row { transition:none !important; animation:none !important }
  .st__cinema-flow { animation:none !important; }
}

@media (max-width:760px) {
  .st__world { padding-top:clamp(9.5rem,48vw,14rem); }
  .st__cinema { height:clamp(13rem,64vw,19rem); border-radius:15px; }
  .st__stage { margin-inline:.35rem; padding:.48rem; border-radius:14px; }
}

/* ══════════════════════════════════════════════════════════
   ABWEHR gegen eine site-weite Regel
   styles.css enthält einen Descender-Fix, der ALLE Klassen mit
   der Zeichenfolge „__h" auf display:inline-block setzt:

       [class*="grad"], [class*="__h"] { display:inline-block; … }

   Gedacht war er für gradient-geclippte Überschriften. Er trifft
   aber auch __hero, __hint, __head und __half — die schrumpfen
   dann auf ihre Inhaltsbreite. Deshalb hier ausdrücklich zurück.
   (Unsere Dateien laden nach styles.css, gleiche Spezifität → wir gewinnen.)
══════════════════════════════════════════════════════════ */
.st-brw__hero { display: block; }
.st-dock__h   { display: block; }
.st__hint     { display: block; }
.st-bnd__half { display: flex; }