/* Mathmagical Escape – Projekt EXTREMUM · Pop-ups, Notfall-Konsolen, Fundstücke, Übergang
   Nur eigene Schriften (Fira Sans, Fira Math). Keine Bilder: alle Materialien sind CSS/SVG. */

/* Statuszeile unter dem Bild: nur noch für Screenreader */
.raum-status { position:absolute !important; width:1px; height:1px; min-height:0; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- Pop-ups an der angetippten Stelle ---------- */
.szene .erl-blase { bottom:auto; left:4%; right:4%; z-index:8; padding:.55rem .8rem .65rem; font-size:1rem; line-height:1.42; cursor:pointer;
  background:rgba(3,15,20,.96); border:1px solid var(--rand); border-radius:9px; box-shadow:0 6px 22px rgba(0,0,0,.85); }
.erl-blase::before { content:""; position:absolute; left:var(--pfeil,50%); width:14px; height:14px; margin-left:-7px; background:inherit;
  border:inherit; border-width:0 1px 1px 0; -webkit-transform:rotate(45deg); transform:rotate(45deg); }
.erl-blase[data-pfeil="oben"]::before { top:-8px; border-width:1px 0 0 1px; }
.erl-blase[data-pfeil="unten"]::before { bottom:-8px; }
.erl-blase__name { display:block; font-size:.78rem; font-weight:600; letter-spacing:.16em; margin-bottom:.15rem; }
.erl-blase__name[hidden] { display:none; }
.erl-blase--apex { border-color:#7a2e38; border-left:3px solid var(--rot); }
.erl-blase--apex .erl-blase__name { color:var(--rot); }
.erl-blase--info { color:#e2eef0; border-color:#3b5d66; font-style:italic; }
.erl-blase--system { border-color:#6b5a2a; border-left:3px solid var(--gelb); font-variant-numeric:tabular-nums; }
.erl-blase--system .erl-blase__name { color:var(--gelb); }
.erl-blase .erl-wort { -webkit-transition:opacity .15s; transition:opacity .15s; }
.erl-blase__text.laeuft .erl-wort { opacity:.1; }
.erl-blase__text.laeuft .erl-wort.da { opacity:1; }

/* ---------- Apex-Satz beim Betreten ---------- */
.funkspruch__text.erl-sprechen { cursor:pointer; }

/* ---------- Fundstücke im Raum ---------- */
.erl-fundbild { position:absolute; z-index:1; pointer-events:none; }
.erl-fundbild svg { display:block; width:100%; height:100%; overflow:visible; }
.erl-fundbild--papier { -webkit-filter:drop-shadow(0 0 6px rgba(95,214,217,.35)); filter:drop-shadow(0 0 6px rgba(95,214,217,.35)); }
.erl-fundbild--tablet svg { -webkit-filter:drop-shadow(0 0 5px rgba(95,214,217,.45)); filter:drop-shadow(0 0 5px rgba(95,214,217,.45)); }
.szene.erl-an .erl-fund { z-index:3; align-items:flex-end; }
.szene.erl-an .erl-fund > span { position:absolute; left:50%; top:calc(100% + 2px); -webkit-transform:translateX(-50%); transform:translateX(-50%); }

/* Funkgerät: kein Rahmen, kein Leuchten. LED aus, bis Apex ausgeredet hat */
.erl-funk-led { fill:#3b1519; }
.erl-funk-led--punkt { display:block; width:100%; height:100%; border-radius:50%; background:#3b1519; }
.erl-funk-bereit .erl-funk-led { fill:#ff3b4a; -webkit-animation:erl-led 1.1s steps(1) infinite; animation:erl-led 1.1s steps(1) infinite; }
.erl-funk-bereit .erl-funk-led--punkt { background:#ff3b4a; box-shadow:0 0 8px #ff3b4a; }
.erl-funkgeraet--gemalt { z-index:2; }

/* Notfunk im Finale: im Textfluss statt über dem Bild */
.erl-funk.erl-funk--eingebettet { position:static; margin:1rem 0; }

/* ---------- Übergang zwischen den Räumen ---------- */
.erl-schwarz { position:fixed; top:0; right:0; bottom:0; left:0; z-index:300; background:#000; opacity:0; pointer-events:none;
  -webkit-transition:opacity .45s ease-in; transition:opacity .45s ease-in; }
.erl-schwarz.an { opacity:1; pointer-events:auto; }
.erl-schwarz:not(.an) { -webkit-transition:opacity .6s ease-out; transition:opacity .6s ease-out; }
.erl-schwarz.erl-schwarz--kurz, .erl-schwarz.erl-schwarz--kurz:not(.an) { -webkit-transition-duration:.15s; transition-duration:.15s; }

/* ---------- Raum 6: Kernüberlastung ---------- */
.szene.erl-ueberlast::after { content:""; position:absolute; top:0; right:0; bottom:0; left:0; z-index:4; pointer-events:none;
  background:radial-gradient(ellipse at 28% 27%, rgba(255,40,50,.42), rgba(255,0,20,.14) 55%, rgba(80,0,0,.32));
  -webkit-animation:erl-ueberlast 1.15s steps(2) infinite; animation:erl-ueberlast 1.15s steps(2) infinite; }
@-webkit-keyframes erl-ueberlast { 0% { opacity:.95; } 50% { opacity:.25; } 100% { opacity:.95; } }
@keyframes erl-ueberlast { 0% { opacity:.95; } 50% { opacity:.25; } 100% { opacity:.95; } }
.szene.erl-ueberlast .erl-glimmen { -webkit-animation-duration:.5s !important; animation-duration:.5s !important; }
.erl-warnung { position:absolute; left:4%; right:4%; top:2.5%; z-index:6; margin:0; padding:.45rem .6rem; text-align:center; font-weight:700; font-size:.85rem;
  letter-spacing:.12em; color:#fff; background:rgba(120,0,10,.88); border:1px solid #ff5a64; border-radius:6px; pointer-events:none;
  -webkit-animation:erl-led .8s steps(1) infinite; animation:erl-led .8s steps(1) infinite; }

/* ---------- Notfall-Konsolen ---------- */
.konsole-titel { font-family:var(--schrift); font-size:1rem !important; letter-spacing:.08em; color:var(--petrol); font-variant-numeric:tabular-nums; }
.konsole-titel__tipp::after { content:"▌"; margin-left:2px; opacity:0; }
.konsole-titel.tippt .konsole-titel__tipp::after { opacity:1; }
.konsole { margin:0 0 .85rem; }
.konsole__status { margin:0 0 .6rem; padding:.6rem .75rem; color:#ffd9a0; background:#1c1508; border:1px solid #6b5420; border-radius:8px; font-variant-numeric:tabular-nums; }
.konsole__status strong { color:var(--gelb); letter-spacing:.06em; }
.konsole__warn { margin-right:.45rem; color:var(--gelb); }
.konsole__status[hidden], .konsole__auftrag[hidden] { display:none; }
.konsole__auftrag { padding:.7rem .8rem .3rem; background:#061a1f; border:1px solid var(--petrol-dunkel); border-left:3px solid var(--petrol); border-radius:8px; }
.konsole__auftrag p { margin:0 0 .5rem; }
.konsole__ansehen { margin:.1rem 0 .5rem !important; border-color:var(--petrol); color:var(--petrol); }
.konsole__hinweis { font-size:.9rem; }
.rueckmeldung { font-variant-numeric:tabular-nums; }
#vor-graph-status, #mc-status, #r4-meldung, #r5-meldung, #r6-meldung { margin:.5rem 0 0; font-weight:600; }
#vor-graph-status:empty, #mc-status:empty, #r4-meldung:empty, #r5-meldung:empty, #r6-meldung:empty { margin:0; }

/* ---------- Nahansichten (Dialoge) ---------- */
.dlg--fund .dlg__inhalt { padding:1rem .75rem; }
.fund { position:relative; margin:0 auto; max-width:30rem; }
.fund p { margin:0 0 .55rem; }
.fund__formel { margin:.4rem 0 .7rem; font-family:var(--mathe); font-size:1.4rem; line-height:1.4; white-space:nowrap; overflow-x:auto; }
.fund__formel-klein { font-family:var(--mathe); font-size:1.3rem; }

/* Raum 1 · durchnässtes Kalibrierprotokoll */
.fund--papier { padding:1rem .9rem .7rem; color:#22303a; border-radius:3px;
  background:
    radial-gradient(ellipse 38% 30% at 96% 100%, rgba(120,140,130,.45), rgba(120,140,130,.12) 70%, transparent 72%),
    radial-gradient(ellipse 40% 32% at 96% 100%, transparent 70%, rgba(110,100,70,.35) 72%, transparent 76%),
    linear-gradient(103deg, transparent 47%, rgba(0,0,0,.05) 49%, rgba(255,255,255,.35) 50%, transparent 53%),
    linear-gradient(8deg, transparent 58%, rgba(0,0,0,.04) 60%, rgba(255,255,255,.3) 61%, transparent 64%),
    #f3eedf;
  box-shadow:0 10px 26px rgba(0,0,0,.6), inset 0 0 40px rgba(150,130,90,.25); -webkit-transform:rotate(-.6deg); transform:rotate(-.6deg); }
.papier__kopf { font-weight:700; font-size:.95rem; letter-spacing:.08em; color:#1d2b33; border-bottom:1.5px solid #2c3b44; padding-bottom:.3rem; }
.papier__fuss { font-size:.9rem; color:#3a4a52; text-align:right; margin:0 !important; }
.fund--papier .vor-graph { max-width:100%; margin:.3rem auto; }
.fund--papier .vor-graph > rect { fill:transparent; }
.fund--papier .vor-graph path[stroke="#48616a"] { stroke:#a7b6bd; }
.fund--papier .vor-graph path[stroke="#e8f3f3"] { stroke:#24323a; }
.fund--papier .vor-graph text { fill:#24323a; stroke:#f3eedf; }
.fund--papier .vor-graph polyline { stroke:#0e4f86; }
.fund--papier .vor-graph circle { fill:#c0262f; stroke:#f3eedf; }
.fund--papier .vor-graph .graph-marke { fill:#c0262f; }

/* Raum 2 · Wartungsplakette aus gebürstetem Metall */
.fund--metall { padding:1.4rem 1.5rem 1.1rem; color:#2a2f32; border-radius:6px; border:1px solid #6e777b;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0, rgba(255,255,255,.07) 1px, rgba(0,0,0,.04) 1px, rgba(0,0,0,.04) 2px),
    linear-gradient(135deg, #c9cfd2 0%, #9aa3a8 35%, #d8dde0 52%, #8f989d 74%, #b9c0c4 100%);
  box-shadow:0 10px 26px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 4px rgba(0,0,0,.25); }
.fund--metall p { text-shadow:0 1px 0 rgba(255,255,255,.55), 0 -1px 0 rgba(0,0,0,.35); }
.metall__kopf { font-weight:700; letter-spacing:.1em; font-size:1rem; color:#1f2427; }
.metall__typ { font-size:.78rem; letter-spacing:.14em; color:#3d4448; }
.metall__linie { border:0; height:2px; margin:.4rem 0 .8rem; background:linear-gradient(#5f686c, #e6eaec); }
.fund--metall .fund__formel { color:#16191b; }
.metall__abl { display:flex; align-items:center; flex-wrap:wrap; }
.metall__abl .fund__formel-klein { margin-right:.4rem; color:#16191b; }
.brandfleck { display:block; flex:1 1 9rem; min-width:9rem; max-width:15rem; height:3.6rem; overflow:visible; }
.schraube { position:absolute; width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #f2f4f5, #8d969a 55%, #50585c); box-shadow:0 1px 2px rgba(0,0,0,.6); }
.schraube::after { content:""; position:absolute; left:2px; right:2px; top:6px; height:2px; background:#3d4448; -webkit-transform:rotate(35deg); transform:rotate(35deg); }
.schraube--lo { left:8px; top:8px; } .schraube--ro { right:8px; top:8px; } .schraube--lu { left:8px; bottom:8px; } .schraube--ru { right:8px; bottom:8px; }

/* Raum 2 · Stationsprotokoll auf Endlospapier */
.fund--endlos { padding:1rem 2.1rem; color:#1f2a24; font-size:.88rem; line-height:1.45; letter-spacing:.03em; font-variant-numeric:tabular-nums;
  background:
    radial-gradient(circle at 12px 50%, #0c1d23 4px, transparent 4.5px) left top / 24px 22px repeat-y,
    radial-gradient(circle at calc(100% - 12px) 50%, #0c1d23 4px, transparent 4.5px) right top / 24px 22px repeat-y,
    repeating-linear-gradient(180deg, #e7f0e3 0, #e7f0e3 44px, #f6f8f1 44px, #f6f8f1 88px);
  border-left:1px dashed #b8c2b4; border-right:1px dashed #b8c2b4; box-shadow:0 10px 26px rgba(0,0,0,.6); }
.endlos__kopf { font-weight:700; letter-spacing:.1em; border-bottom:1px solid #6e7c72; padding-bottom:.3rem; }
.endlos__liste { list-style:none; margin:0; padding:0; }
.endlos__liste li { margin:0 0 .35rem; }
.endlos__zeit { white-space:nowrap; font-weight:600; }

/* Raum 3 · Notfall-Datenkarte */
.fund--karte { padding:0 0 .2rem; max-width:24rem; color:#0d2a30; border-radius:16px; overflow:hidden;
  background:linear-gradient(160deg, #f4fbfb 0%, #dcefef 60%, #c6e3e4 100%); box-shadow:0 12px 28px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.7); }
.karte__band { display:flex; justify-content:space-between; padding:.5rem .9rem; font-size:.72rem; font-weight:600; letter-spacing:.12em; color:#e8fbfb; background:linear-gradient(90deg, #0f6f74, #0b4e57); }
.karte__chip { width:44px; height:34px; margin:.8rem 0 0 .9rem; border-radius:6px; background:linear-gradient(135deg, #e8cf7a, #b8963c 60%, #e3c66c);
  box-shadow:inset 0 0 0 1px rgba(90,70,20,.6); position:relative; }
.karte__chip::after { content:""; position:absolute; left:6px; right:6px; top:10px; bottom:10px; border:1px solid rgba(90,70,20,.55); border-left:0; border-right:0; }
.karte__titel { margin:.5rem .9rem .6rem !important; font-weight:700; letter-spacing:.1em; font-size:1rem; line-height:1.3; }
.karte__label { margin:0 .9rem !important; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:#2c5b62; }
.fund--karte .fund__formel { margin:.1rem .9rem .5rem; color:#06262b; }
.karte__text { margin:0 .9rem .8rem !important; font-size:.92rem; }
.karte__streifen { height:28px; margin:0 0 .6rem; background:#14181a; }

/* Raum 4 · Klemmbrett mit Messblatt unter Raureif */
.fund--klemmbrett { padding:1.8rem .9rem .9rem; border-radius:10px; background:linear-gradient(160deg, #6b5847, #4c3e31); box-shadow:0 12px 28px rgba(0,0,0,.65); }
.klemme { position:absolute; left:50%; top:.4rem; width:6.5rem; height:1.7rem; margin-left:-3.25rem; z-index:2; border-radius:5px;
  background:linear-gradient(#e2e7ea, #8d989e 60%, #b6c0c5); box-shadow:0 2px 4px rgba(0,0,0,.5); }
.klemmbrett__blatt { position:relative; padding:1rem .9rem .6rem; color:#1d2830; background:#f2f5f6; overflow:hidden;
  background-image:repeating-linear-gradient(180deg, transparent 0, transparent 1.55rem, #c8d6e2 1.55rem, #c8d6e2 1.62rem); }
.blatt__kopf { font-weight:700; letter-spacing:.08em; font-size:.9rem; }
.blatt__zeile { font-size:.95rem; }
.blatt__hand { font-style:italic; font-size:1.1rem; color:#163a7a; -webkit-transform:rotate(-2deg); transform:rotate(-2deg); }
.frost { position:absolute; top:0; right:0; bottom:0; left:0; pointer-events:none;
  background:
    radial-gradient(ellipse at 0 0, rgba(235,248,255,.85), transparent 38%),
    radial-gradient(ellipse at 100% 100%, rgba(235,248,255,.8), transparent 34%),
    radial-gradient(ellipse at 100% 0, rgba(225,244,255,.6), transparent 26%),
    radial-gradient(circle at 20% 80%, rgba(255,255,255,.5) 0 2px, transparent 3px),
    radial-gradient(circle at 85% 30%, rgba(255,255,255,.5) 0 1.5px, transparent 2.5px); }

/* Raum 5 · Wartungstablet mit gesprungenem Display */
.fund--tablet { padding:.9rem; border-radius:22px; background:linear-gradient(145deg, #2a3236, #0d1215); box-shadow:0 12px 28px rgba(0,0,0,.7), inset 0 0 0 2px #3c474c; }
.tablet__bild { position:relative; padding:.6rem .8rem .8rem; border-radius:10px; color:#bff6f4; overflow:hidden;
  background:radial-gradient(ellipse at 30% 20%, #0f4752, #06232a 70%); box-shadow:inset 0 0 30px rgba(0,0,0,.6); }
.tablet__leiste { display:flex; justify-content:space-between; font-size:.7rem; letter-spacing:.12em; color:#7fc9cb; margin-bottom:.5rem; }
.tablet__akku { color:#ff8a8a; }
.tablet__kopf { font-weight:700; font-size:.88rem; letter-spacing:.1em; color:#5fd6d9; }
.fund--tablet .fund__formel { color:#e9ffff; text-shadow:0 0 8px rgba(95,214,217,.6); }
.tablet__text { font-size:.95rem; }
.tablet__status { font-size:.8rem; letter-spacing:.08em; color:#8ff0b0; }
.tablet__punkt { display:inline-block; width:8px; height:8px; margin-right:.4rem; border-radius:50%; background:#8ff0b0; }
.tablet__riss { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; }

/* Raum 6 · Notiz von Dr. Hartmann */
.fund--notiz { padding:1.2rem 1rem 1rem 2.6rem; color:#1a2238; font-style:italic; font-size:1.02rem; line-height:1.62rem;
  background:
    linear-gradient(90deg, transparent 2.1rem, rgba(210,70,70,.55) 2.1rem, rgba(210,70,70,.55) 2.2rem, transparent 2.2rem),
    repeating-linear-gradient(180deg, #fbfaf3 0, #fbfaf3 1.55rem, #b9c8e0 1.55rem, #b9c8e0 1.62rem);
  box-shadow:0 12px 28px rgba(0,0,0,.65); -webkit-transform:rotate(.5deg); transform:rotate(.5deg); }
.fund--notiz p { margin:0 0 .4rem; }
.fund--notiz .fund__formel { font-style:normal; color:#0f1a3a; margin:.1rem 0 .5rem; }
.notiz__unterstrichen { text-decoration:underline; text-decoration-thickness:2px; }
.notiz__name { text-align:right; }

/* ---------- Finale ---------- */
.funkspruch--zerfall { margin-top:1rem; }
.funkspruch--zerfall .funkspruch__auge { -webkit-animation:erl-flackern-auge 2.4s steps(1) infinite; animation:erl-flackern-auge 2.4s steps(1) infinite; }
@-webkit-keyframes erl-flackern-auge { 0%,100% { opacity:1; } 30% { opacity:.2; } 34% { opacity:.9; } 62% { opacity:.1; } 70% { opacity:.6; } }
@keyframes erl-flackern-auge { 0%,100% { opacity:1; } 30% { opacity:.2; } 34% { opacity:.9; } 62% { opacity:.1; } 70% { opacity:.6; } }
.finale__text { line-height:1.55; }
.story-text .story-ton { margin-top:.6rem; }

/* ---------- Ruhe und Kontrast ---------- */
@media (prefers-reduced-motion: reduce) {
  .szene.erl-ueberlast::after, .erl-warnung, .erl-funk-bereit .erl-funk-led, .funkspruch--zerfall .funkspruch__auge { -webkit-animation:none !important; animation:none !important; }
  .fund--papier, .fund--notiz, .blatt__hand { -webkit-transform:none; transform:none; }
}
@media (forced-colors: active) {
  .erl-fundbild, .erl-schwarz, .szene.erl-ueberlast::after { display:none; }
  .erl-blase, .konsole__status, .konsole__auftrag, .fund { border:2px solid CanvasText; forced-color-adjust:auto; }
  .erl-warnung { border:2px solid CanvasText; }
}