/* ══════════════════════════════════════════════════════════════
   SCENE.CSS — Ein Betrieb, keine Kartenwand
   Jemke Solutions | 2026

   Die ersten 70–80 % der Erfahrung sind EINE Szene. Neun Objekte
   liegen auf einer gemeinsamen Fläche und gehören sichtbar zum
   selben Arbeitsplatz. Wer etwas anklickt, wählt keine Kategorie —
   er zeigt auf etwas, das bei ihm auch herumliegt.

   Zustände der Szene (data-phase am Abschnitt):
     ruhe      alles gleichwertig, nichts hervorgehoben
     fokus     Gewähltes tritt vor, Beziehungen werden sichtbar
     befund    das Gewählte rückt zusammen, der Rest verschwindet
     vorschau  die Szene weicht der Bühne der Zielwelt

   Präfix: sc-
══════════════════════════════════════════════════════════════ */

.sc { position:relative; padding:clamp(1.2rem,3vh,2.2rem) var(--gut) clamp(2.4rem,5vh,4rem); }
.sc__in { max-width:1180px; margin-inline:auto; }

/* Die Illustration ist keine Tapete: Der Zustand des Routers bestimmt,
   welche Welt hinter den Arbeitsfragmenten sichtbar wird. */
body.en {
  --router-art:url("/assets/images/v3/entry-anime/router-workday-connections.webp");
  --router-art-pos:center 48%;
}
body.en[data-ton="ops"] {
  --router-art:url("/assets/images/v3/entry-anime/router-connected-workflow.webp");
  --router-art-pos:center 52%;
}
body.en[data-ton="web"] {
  --router-art:url("/assets/images/v3/entry-anime/router-web-customer-flow.webp");
  --router-art-pos:center 48%;
}
body.en[data-ton="know"] {
  --router-art:url("/assets/images/v3/entry-anime/router-knowledge-sources.webp");
  --router-art-pos:center 46%;
}
body.en[data-ton="infra"] {
  --router-art:url("/assets/images/v3/entry-anime/router-infrastructure-cyan.webp");
  --router-art-pos:center 50%;
}
body.en[data-ton="ai"] {
  --router-art:url("/assets/images/v3/entry-anime/router-local-ai-green.webp");
  --router-art-pos:center 48%;
}

/* ── Die Frage über der Szene ─────────────────────────────── */
.sc__ask { max-width:min(680px, 92%); margin:0 0 clamp(1.2rem,2.6vw,1.8rem); }
.sc__eyebrow {
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--fm); font-size:.66rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink3); margin:0 0 .9rem;
}
.sc__eyebrow::before { content:""; width:20px; height:1px; background:var(--acc); }
.sc__q {
  max-width:20ch;
  font-family:var(--fh); font-weight:700;
  font-size:clamp(1.65rem,3.5vw,2.7rem); line-height:1.06;
  letter-spacing:-.034em; margin:0; text-wrap:balance;
}
.sc__sub { font-size:.98rem; line-height:1.6; color:var(--ink2); margin:.9rem 0 0; max-width:52ch; }

/* ── Die Fläche ───────────────────────────────────────────── */
.sc__plane {
  --look-x:50%; --look-y:50%; --shift-x:0px; --shift-y:0px;
  position:relative; aspect-ratio:16/8.7;
  border:1px solid var(--hair2); border-radius:18px;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb,var(--acc) 22%,transparent), transparent 66%),
    linear-gradient(180deg, var(--s2), var(--s1));
  overflow:hidden; isolation:isolate;
  box-shadow:0 30px 72px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.1);
  transition:border-color var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease);
}
/* feines Raster: macht aus den Objekten einen gemeinsamen Ort */
.sc__plane::before {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:none;
  opacity:0;
}
.sc__plane::after {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(260px 220px at var(--look-x) var(--look-y), color-mix(in srgb,var(--acc) 17%,transparent), transparent 72%),
    linear-gradient(180deg,transparent 58%,rgba(4,5,9,.36));
  mix-blend-mode:screen;
  opacity:.72;
}
.sc__plane.is-focused {
  border-color:color-mix(in srgb,var(--acc) 46%,var(--hair));
  box-shadow:0 42px 110px rgba(0,0,0,.48), 0 0 70px var(--acc-d), inset 0 1px 0 rgba(255,255,255,.08);
}

/* Handgemalte Betriebswelt. Die starken Randmasken halten die darüber
   liegenden echten UI-Fragmente jederzeit lesbar. */
.sc__art {
  position:absolute; inset:-2.5%; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(90deg,rgba(8,11,18,.54) 0%,rgba(8,11,18,.1) 28%,rgba(8,11,18,.07) 72%,rgba(8,11,18,.5) 100%),
    linear-gradient(180deg,rgba(8,11,18,.08),rgba(8,11,18,.27)),
    var(--router-art);
  background-size:cover; background-position:var(--router-art-pos);
  filter:saturate(1.06) contrast(1.03) brightness(.96);
  transform:translate3d(var(--shift-x),var(--shift-y),0) scale(1.045);
  transition:background-image var(--t-slow) var(--ease), filter var(--t-slow) var(--ease),
             transform 900ms var(--ease), opacity var(--t-slow) var(--ease);
}
.sc__art::before {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(50% 60% at 50% 53%,transparent 18%,rgba(8,11,18,.14) 82%),
    linear-gradient(180deg,rgba(8,11,18,.2),transparent 24%,transparent 72%,rgba(8,11,18,.42));
}
.sc__art-glow {
  position:absolute; left:50%; top:49%; width:34%; aspect-ratio:1; translate:-50% -50%;
  border-radius:50%; background:radial-gradient(circle,var(--acc-g),transparent 68%);
  filter:blur(22px); opacity:.42;
  animation:scBreathe 5.6s ease-in-out infinite;
}
@keyframes scBreathe { 50% { opacity:.72; transform:scale(1.13) } }
.sc__plane.is-focused .sc__art { filter:saturate(1.1) contrast(1.05) brightness(1); }
.sc__plane.is-gathered .sc__art { opacity:.62; filter:saturate(.86) contrast(1.05) brightness(.8); }

.sc__vision {
  position:absolute; z-index:5; left:50%; bottom:.7rem; translate:-50% 0;
  display:flex; align-items:center; gap:.48rem; margin:0; white-space:nowrap;
  padding:.34rem .58rem; border:1px solid rgba(255,255,255,.14); border-radius:999px;
  background:rgba(6,7,12,.68); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  font-family:var(--fm); font-size:.58rem; letter-spacing:.08em; color:#c5cadb;
  box-shadow:0 10px 28px rgba(0,0,0,.28); pointer-events:none;
}
.sc__vision b { font-weight:600; color:var(--acc); text-transform:uppercase; letter-spacing:.13em; }
.sc__vision-dot { width:6px; height:6px; border-radius:50%; background:var(--acc);
  box-shadow:0 0 0 4px var(--acc-d),0 0 16px var(--acc); animation:scBlink 2.2s ease-in-out infinite; }
@keyframes scBlink { 50% { opacity:.48; box-shadow:0 0 0 7px transparent,0 0 8px var(--acc) } }

/* Beziehungen zwischen Objekten */
.sc__wires { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:2; }
.sc__wire { fill:none; stroke:var(--acc); stroke-opacity:.32; stroke-width:1.4; }
.sc__pulse {
  fill:none; stroke:var(--acc); stroke-width:2.4; stroke-linecap:round;
  stroke-dasharray:7 93; stroke-dashoffset:100;
  animation:scPulse 2.8s linear infinite; animation-delay:var(--d,0s);
}
@keyframes scPulse { to { stroke-dashoffset:0 } }

/* ── Ein Objekt ───────────────────────────────────────────── */
.sc-o {
  position:absolute; z-index:3;
  left:var(--x); top:var(--y); width:var(--w);
  text-align:left; font:inherit; color:inherit;
  background:none; border:0; padding:0;
  transition:opacity var(--t-slow) var(--ease),
             filter var(--t-slow) var(--ease),
             transform var(--t-slow) var(--spring);
}
.sc-o--pick { cursor:pointer; }
.sc-o--pick:hover { transform:translateY(-3px) scale(1.02); z-index:6; }
.sc-o:focus-visible { outline:2px solid var(--acc); outline-offset:4px; border-radius:10px; }

/* Zustand: etwas ist gewählt → Unbeteiligtes tritt zurück */
.sc__plane.is-focused .sc-o:not(.is-lit) { opacity:.2; filter:saturate(.25) blur(1.4px); transform:scale(.95); }
.sc__plane.is-focused .sc-o.is-lit { z-index:5; }
.sc-o.is-on .sc-o__body { box-shadow:0 0 0 2px var(--acc), 0 20px 44px rgba(0,0,0,.45); }
.sc-o__mark {
  position:absolute; top:-9px; right:-9px; z-index:4;
  width:22px; height:22px; border-radius:50%;
  background:var(--acc); color:#06070c; display:grid; place-items:center;
  opacity:0; transform:scale(.5);
  transition:opacity var(--t-base) var(--ease), transform var(--t-base) var(--spring);
}
html[data-theme="light"] .sc-o__mark { color:#fff; }
.sc-o.is-on .sc-o__mark { opacity:1; transform:none; }

/* Zustand: Befund → Gewähltes rückt in die Mitte, Rest geht */
.sc__plane.is-gathered .sc-o:not(.is-on) { opacity:0; transform:scale(.9); pointer-events:none; }
.sc__plane.is-gathered .sc-o.is-on {
  left:calc(50% + var(--gx, 0%)); top:50%; width:min(30%, 260px);
  transform:translate(-50%, -50%);
}
.sc__plane.is-gathered .sc__wires { opacity:0; }
.sc__plane.is-gathered {
  aspect-ratio:16/4.2;
  transition:aspect-ratio var(--t-slow) var(--ease);
}
/* Freitext und Zähler gehören nicht in den Moment. */
.sc[data-phase="befund"] .sc__free,
.sc[data-phase="befund"] .sc__count,
.sc[data-phase="befund"] .sc__beat,
.sc[data-phase="befund"] .sc__next { display:none; }

/* ── Objektarten ──────────────────────────────────────────── */
.sc-o__body { position:relative; filter:drop-shadow(0 12px 16px rgba(0,0,0,.32)); }
.sc-o__tag {
  display:block; margin-top:.45rem;
  font-family:var(--fm); font-size:.66rem; line-height:1.35; color:var(--ink3);
  transition:color var(--t-base) var(--ease);
}
.sc-o.is-lit .sc-o__tag, .sc-o.is-on .sc-o__tag { color:var(--ink); }

.sc-msg { background:var(--s2); border:1px solid var(--hair2); border-radius:12px 12px 12px 3px; padding:.7rem .8rem; }
.sc-msg__h { display:flex; justify-content:space-between; gap:.6rem; font-family:var(--fm); font-size:.6rem; color:var(--ink3); margin-bottom:.35rem; }
.sc-msg__b { font-size:.88rem; line-height:1.35; }

.sc-win { border:1px solid var(--hair2); border-radius:9px; overflow:hidden; background:var(--s1); }
.sc-win__bar { display:flex; align-items:center; gap:5px; padding:.35rem .5rem; background:var(--s2); border-bottom:1px solid var(--hair); }
.sc-win__bar i { width:6px; height:6px; border-radius:50%; background:var(--hair2); }
.sc-win__bar span { margin-left:auto; font-family:var(--fm); font-size:.56rem; color:var(--ink3); }
.sc-win__r { font-family:var(--fm); font-size:.66rem; color:var(--ink2); padding:.28rem .55rem; border-bottom:1px solid var(--hair); }
.sc-win__r:last-child { border-bottom:0; }

.sc-mail { border:1px solid var(--hair2); border-radius:9px; background:var(--s1); padding:.6rem .7rem; text-align:center; }
.sc-mail__n { font-family:var(--fm); font-size:.62rem; color:var(--ink3); display:block; margin-top:.25rem; }
.sc-mail svg { color:var(--ink3); }

.sc-file { display:flex; align-items:center; gap:.55rem; background:var(--s1); border:1px solid var(--hair); border-radius:8px; padding:.55rem .65rem; }
.sc-file__ic { width:20px; height:24px; flex-shrink:0; border:1px solid var(--hair2); border-radius:2px; background:var(--s2); }
.sc-file__n { font-family:var(--fm); font-size:.62rem; word-break:break-all; line-height:1.3; }

.sc-row { border:1px solid var(--hair); border-radius:5px; overflow:hidden; background:var(--s1); font-family:var(--fm); font-size:.64rem; }
.sc-row__c { display:flex; }
.sc-row__c span { flex:1; padding:.34rem .45rem; border-right:1px solid var(--hair); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sc-row__c span:last-child { border-right:0; }
.sc-row__c--ghost { opacity:.38; }
.sc-row__m { padding:.24rem .45rem; border-top:1px solid var(--hair); color:var(--acc2); font-size:.58rem; }

.sc-note { background:#e9d98a; color:#33301f; border-radius:2px; padding:.7rem .65rem; rotate:-1.8deg;
  box-shadow:0 8px 20px rgba(0,0,0,.3); font-family:var(--fm); font-size:.66rem; line-height:1.4; }

.sc-site { border:1px solid var(--hair2); border-radius:7px; overflow:hidden; background:var(--s1); }
.sc-site__bar { display:flex; gap:4px; padding:.3rem .45rem; background:var(--s2); border-bottom:1px solid var(--hair); }
.sc-site__bar i { width:5px; height:5px; border-radius:50%; background:var(--hair2); }
.sc-site__p { padding:.55rem .55rem .7rem; display:flex; flex-direction:column; gap:.3rem; }
.sc-site__nav { font-family:var(--fm); font-size:.56rem; color:var(--ink3); }
.sc-site__l { height:4px; border-radius:2px; background:var(--hair); }
.sc-site__l:nth-child(3) { width:72%; }

.sc-srv { border:1px solid var(--hair2); border-left:3px solid var(--acc2); border-radius:0 8px 8px 0;
  background:var(--s1); padding:.55rem .7rem; font-family:var(--fm); font-size:.66rem; }
.sc-srv__t { display:block; font-size:.56rem; color:var(--ink3); margin-bottom:.2rem; }

.sc-you { text-align:center; }
.sc-you__ring {
  width:54px; height:54px; margin:0 auto; border-radius:50%;
  border:1px dashed var(--hair2); display:grid; place-items:center;
  background:var(--s1); color:var(--ink2);
}
.sc-o.is-lit .sc-you__ring, .sc-o.is-on .sc-you__ring { border-color:var(--acc); border-style:solid; color:var(--acc); }
.sc-you__l { display:block; font-family:var(--fm); font-size:.62rem; color:var(--ink3); margin-top:.35rem; }

/* ── Was die Szene sagt ───────────────────────────────────── */
.sc__beat {
  margin-top:clamp(1.2rem,2.5vw,1.8rem);
  min-height:2.6em;
  display:flex; align-items:flex-start; gap:.8rem; flex-wrap:wrap;
}
.sc__befund {
  font-family:var(--fh); font-weight:700; font-size:clamp(1.02rem,2.1vw,1.35rem);
  letter-spacing:-.02em; line-height:1.35; margin:0; max-width:46ch;
  opacity:0; transform:translateY(8px);
  transition:opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.sc__befund.is-in { opacity:1; transform:none; }
.sc__count { font-family:var(--fm); font-size:.7rem; color:var(--ink3); margin-left:auto; white-space:nowrap; }

.sc__next { display:flex; gap:.7rem; flex-wrap:wrap; align-items:center; margin-top:1.2rem; }
.sc__quiet {
  background:none; border:0; padding:.4rem 0; cursor:pointer;
  font-family:var(--fm); font-size:.72rem; color:var(--ink3);
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--hair2);
}
.sc__quiet:hover { color:var(--acc); text-decoration-color:var(--acc); }

/* ── Branchenfrage: erst NACH der ersten Situation ────────── */
.sc__ind { margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid var(--hair);
  opacity:0; max-height:0; overflow:hidden;
  transition:opacity var(--t-slow) var(--ease), max-height var(--t-slow) var(--ease); }
.sc__ind.is-in { opacity:1; max-height:300px; }
.sc__ind-q { font-family:var(--fm); font-size:.72rem; color:var(--ink3); margin:0 0 .7rem; }
.sc__ind-row { display:flex; gap:.45rem; flex-wrap:wrap; }
.sc__ind-b {
  font:inherit; cursor:pointer; font-family:var(--fm); font-size:.74rem;
  border:1px solid var(--hair2); border-radius:8px; background:var(--s1); color:var(--ink2);
  padding:.42rem .75rem;
  transition:border-color var(--t-fast), color var(--t-fast), background-color var(--t-fast);
}
.sc__ind-b:hover { border-color:var(--acc); color:var(--ink); }
.sc__ind-b[aria-pressed="true"] { border-color:var(--acc); background:var(--acc-d); color:var(--acc); }
.sc__ind-b:focus-visible { outline:2px solid var(--acc); outline-offset:3px; }

/* ── Freitext: eine Zeile, kein Formular ──────────────────── */
.sc__free { margin-top:1.4rem; display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.sc__free input {
  flex:1; min-width:230px;
  border:1px solid var(--hair2); border-radius:10px; background:var(--s1); color:var(--ink);
  font-family:var(--fb); font-size:.95rem; padding:.7rem .9rem;
}
.sc__free input:focus { outline:none; border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-d); }
.sc__free input::placeholder { color:var(--ink3); }

/* ── Der Moment: drei Symptome, ein Satz ──────────────────── */
.sc__verdict { margin-top:clamp(1.8rem,4vw,2.8rem); }
.sc__back { margin-top:1.6rem; }
.sc__v1, .sc__v2 {
  max-width:26ch;
  font-family:var(--fh); font-weight:700;
  font-size:clamp(1.5rem,3.6vw,2.6rem); line-height:1.07; letter-spacing:-.032em;
  margin:0; opacity:0; transform:translateY(12px);
  transition:opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.sc__v2 { color:var(--acc); margin-top:.4rem; }
.sc__verdict.step1 .sc__v1, .sc__verdict.step2 .sc__v1 { opacity:1; transform:none; }
.sc__verdict.step2 .sc__v2 { opacity:1; transform:none; }
.sc__v3 { margin-top:1.2rem; max-width:56ch; opacity:0; transition:opacity var(--t-slow) var(--ease) 260ms; }
.sc__verdict.step2 .sc__v3 { opacity:1; }

/* ══════════════════════════════════════════════════════════
   MOBIL — dieselbe Welt, aber gestapelt statt räumlich
══════════════════════════════════════════════════════════ */
@media (max-width:820px) {
  .sc__plane { aspect-ratio:auto; min-height:520px; padding:clamp(7.5rem,36vw,11rem) .9rem .9rem;
    display:flex; flex-direction:column; gap:.7rem; }
  .sc__plane::before { background-size:40px 40px; }
  .sc__plane::after { background:linear-gradient(180deg,transparent 0 8%,rgba(5,6,10,.34) 26%,rgba(5,6,10,.74) 54%); mix-blend-mode:normal; }
  .sc__art { inset:0 0 auto; height:clamp(12rem,58vw,19rem); transform:none;
    background-image:linear-gradient(180deg,rgba(8,11,18,.04),rgba(8,11,18,.62)),var(--router-art);
    background-position:var(--router-art-pos); filter:saturate(1.06) contrast(1.03) brightness(.96); }
  .sc__art-glow { top:58%; width:45%; }
  .sc__vision { top:.65rem; bottom:auto; left:.65rem; translate:0; }
  .sc__vision span:last-child { display:none; }
  .sc-o { position:static; width:auto !important; }
  .sc-o--pick:hover { transform:none; }
  .sc__wires { display:none; }
  .sc__plane.is-focused .sc-o:not(.is-lit) { display:none; }
  .sc__plane.is-gathered .sc-o.is-on { position:static; transform:none; width:auto; }
  .sc-o__mark { top:-6px; right:-6px; }
  .sc__count { margin-left:0; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-o, .sc__befund, .sc__v1, .sc__v2, .sc__v3, .sc__ind { transition:none !important; }
  .sc__pulse { animation:none; stroke-dashoffset:50; }
  .sc__art { transform:none !important; }
  .sc__art-glow, .sc__vision-dot { animation:none !important; }
}

/* ── Ohne JavaScript ──────────────────────────────────────── */
.sc__nojs { padding:1.4rem; }
.sc__nojs p { color:var(--ink2); margin:0 0 .8rem; }
.sc__nojs ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.sc__nojs a { color:var(--acc); font-size:.95rem; }
/* Der Katalog ist die Navigation, wenn die Szene nicht laufen kann. */
html.no-js [data-act="browse"] { display:block !important; }
html.no-js .sc__free, html.no-js .sc__ind, html.no-js .sc__next { display:none; }


/* Router V3.1: Auswahl bleibt sichtbar und wird als Verbindung lesbar. */
.sc__plane.is-focused .sc-o:not(.is-lit) {
  opacity:.62;
  filter:saturate(.64) brightness(.82);
  transform:scale(.985);
}
.sc__plane.is-focused .sc-o--pick:not(.is-lit):hover {
  opacity:1;
  filter:none;
  transform:translateY(-3px) scale(1.02);
}
.sc__connect {
  position:relative;
  margin-top:.85rem;
  padding:1rem clamp(1rem,2.4vw,1.4rem);
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--acc) 38%,var(--hair));
  border-radius:14px;
  background:linear-gradient(110deg,color-mix(in srgb,var(--acc) 12%,var(--s1)),var(--s1));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 42px rgba(0,0,0,.2);
}
.sc__connect::before {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.3;
  background:linear-gradient(90deg,transparent,var(--acc-d),transparent);
  transform:translateX(-100%); animation:scConnectSweep 4.8s ease-in-out infinite;
}
.sc__connect-k {
  position:relative; z-index:1; display:block; margin-bottom:.72rem;
  color:var(--acc); font:700 .59rem var(--fm); letter-spacing:.15em;
}
.sc__connect-row {
  position:relative; z-index:1; display:flex; align-items:center; gap:.48rem; flex-wrap:wrap;
}
.sc__connect-chip {
  display:inline-flex; align-items:center; gap:.55rem; min-height:2.15rem;
  padding:.44rem .68rem; border:1px solid color-mix(in srgb,var(--acc) 48%,var(--hair2));
  border-radius:999px; background:color-mix(in srgb,var(--acc) 11%,var(--s2)); color:var(--ink);
  font:650 .7rem var(--fm); cursor:pointer;
}
.sc__connect-chip span { color:var(--acc); font-size:.92rem; }
.sc__connect-chip:hover { border-color:var(--acc); background:var(--acc-d); }
.sc__connect-wire {
  position:relative; width:clamp(1.4rem,3vw,3rem); height:1px; flex:0 0 auto;
  background:linear-gradient(90deg,var(--acc),var(--acc2));
}
.sc__connect-wire::after {
  content:""; position:absolute; top:50%; left:0; width:5px; height:5px; border-radius:50%;
  background:var(--acc); box-shadow:0 0 10px var(--acc); transform:translateY(-50%);
  animation:scLinkNode 1.8s linear infinite;
}
.sc__connect p { position:relative; z-index:1; margin:.72rem 0 0; color:var(--ink2); font-size:.82rem; }
.sc[data-phase="befund"] .sc__connect { display:none; }

@media (max-width:820px) {
  .sc__plane.is-focused .sc-o:not(.is-lit) {
    display:block; opacity:.7; filter:saturate(.68) brightness(.86); transform:none;
  }
  .sc__connect-wire { width:1.15rem; }
  .sc__connect-chip { font-size:.64rem; }
}
@media (prefers-reduced-motion:reduce) {
  .sc__connect::before,.sc__connect-wire::after { animation:none !important; }
}

/* Router V3.2 · Mehrfachauswahl bleibt wirklich sichtbar. */
.sc__plane.is-focused .sc-o--pick:not(.is-on){opacity:.94;filter:none;transform:none;z-index:4}
.sc__plane.is-focused .sc-o--pick:not(.is-on):hover{opacity:1;filter:none;transform:translateY(-4px) scale(1.018);z-index:7}
.sc__plane.is-focused .sc-o--pick .sc-o__body{padding:.14rem;border:1px solid color-mix(in srgb,var(--acc) 24%,rgba(255,255,255,.12));border-radius:13px;background:rgba(7,9,15,.72);box-shadow:0 14px 34px rgba(0,0,0,.32);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.sc__plane.is-focused .sc-o--pick:not(.is-on)::before{content:"+";position:absolute;z-index:8;top:-.48rem;left:-.48rem;width:1.35rem;height:1.35rem;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--acc) 56%,rgba(255,255,255,.16));border-radius:50%;background:#0b0e16;color:var(--acc);font:800 .8rem var(--fm);box-shadow:0 0 18px var(--acc-d)}
.sc__plane.is-focused .sc-o:not(.sc-o--pick):not(.is-lit){opacity:.4;filter:saturate(.5) brightness(.75)}
.sc__plane.is-focused .sc__vision{border-color:color-mix(in srgb,var(--acc) 52%,rgba(255,255,255,.14));background:color-mix(in srgb,var(--acc) 13%,rgba(6,7,12,.86));box-shadow:0 12px 34px rgba(0,0,0,.38),0 0 28px var(--acc-d)}
.sc__plane.is-focused .sc__vision b{color:#fff}
@keyframes scConnectSweep{55%,100%{transform:translateX(100%)}}
@keyframes scLinkNode{to{left:calc(100% - 5px)}}
@media(max-width:820px){
 .sc__plane{min-height:0;padding:clamp(9.6rem,48vw,12rem) .7rem .8rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:.62rem}
 .sc__art{height:clamp(9rem,46vw,11.5rem)}
 .sc__plane::after{background:linear-gradient(180deg,transparent 0 8%,rgba(8,11,18,.14) 24%,rgba(8,11,18,.68) 43%);mix-blend-mode:normal}
 .sc__plane .sc-o:not(.sc-o--pick){display:none!important}
 .sc__plane .sc-o--pick{position:static;width:auto!important;min-width:0;display:flex;flex-direction:column}
 .sc__plane .sc-o--pick .sc-o__body{flex:1;display:block}
 .sc__plane .sc-o--pick .sc-o__body>*{height:100%;min-height:72px}
 .sc__plane .sc-o--pick .sc-o__tag{font-size:.59rem;line-height:1.32;margin:.38rem .12rem 0}
 .sc__plane.is-focused .sc-o--pick:not(.is-on){display:flex;opacity:.96;filter:none;transform:none}
 .sc__plane.is-focused .sc-o--pick:not(.is-on):hover{transform:none}
 .sc__plane.is-gathered{grid-template-columns:repeat(2,minmax(0,1fr));aspect-ratio:auto}
 .sc__plane.is-gathered .sc-o:not(.is-on){display:none!important}
 .sc__plane.is-gathered .sc-o.is-on{display:flex;position:static;transform:none;width:auto!important}
 .sc__vision{top:.55rem;left:.55rem;right:.55rem;bottom:auto;translate:0;white-space:normal;justify-content:center;text-align:center}
}
@media(max-width:390px){.sc__plane{grid-template-columns:1fr 1fr;gap:.5rem;padding-inline:.55rem}.sc-msg__b{font-size:.78rem}.sc-win__r,.sc-row{font-size:.57rem}.sc-o__tag{overflow-wrap:anywhere}}