/* Mathmagical Escape – Erlebnis-Ebene für alle sechs Räume.
   Schichten je Szene (unten → oben): Kulisse · Lichtinsel/Leuchtkanten (SVG) · Staub · Klickflächen mit Beschriftung · Sprechblase/Funk.
   Keine Rahmenlinien: Objekte heben sich durch Licht ab. */

/* ---------- Kamera-Hülle ---------- */
.szene.erl-an .erl-kamera { position:absolute; top:0; right:0; bottom:0; left:0; transform-origin:50% 45%; }
html.pausiert .erl-staub span, html.pausiert .erl-licht *, html.pausiert .erl-kanten * { -webkit-animation-play-state:paused; animation-play-state:paused; }

/* ---------- Bestehende Knöpfe: unsichtbare Fläche, Beschriftung bleibt sichtbar ---------- */
.szene.erl-an .raumobjekt,
.szene.erl-an .raumfoto ~ button.raumobjekt,
.szene.erl-an .raumobjekt[data-locked="false"],
#szene.erl-an[data-tuer="offen"] #btn-schleuse { background:transparent !important; border-color:transparent !important; box-shadow:none !important; min-width:0; min-height:0; margin:0 !important; outline:none; }
.szene.erl-an .raumobjekt:hover { background:transparent !important; }
.szene.erl-an .raumobjekt:focus { outline:none; }
.szene.erl-an .erl-tuer { z-index:2; align-items:flex-end !important; padding-bottom:5%; }
.szene.erl-an .erl-objekt { z-index:3; }
#szene.erl-an #btn-konsole { padding-bottom:20%; }
#labor-szene4.erl-an #r4-konsole, #labor-szene6.erl-an #r6-konsole, #labor-szene5.erl-an #r5-konsole { padding-bottom:12%; }
#einstieg-szene2.erl-an #r2-detail { padding-bottom:9%; }
.szene.erl-an .raumobjekt > span { position:relative; z-index:5; }
#szene.erl-an #btn-karte > span { position:absolute; }
.szene.erl-an .erl-tuer[data-locked="false"] > span { color:var(--gruen) !important; border-color:var(--gruen) !important; }
.szene.erl-an .erl-objekt::after, .szene.erl-an .erl-deko::after { content:""; position:absolute; left:50%; top:50%;
  width:100%; height:100%; min-width:44px; min-height:44px; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); }

/* ---------- Deko und Funkgerät: unsichtbare Flächen ---------- */
.szene.erl-an .erl-deko, .szene.erl-an .erl-deko:hover { position:absolute; z-index:3; margin:0 !important; padding:0; border:0 !important; background:transparent !important;
  box-shadow:none !important; min-width:0 !important; min-height:0 !important; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.szene.erl-an .erl-deko:focus { outline:none; }

/* ---------- Licht-Ebene: Lichtinsel + Leuchtkante + Puls ---------- */
.erl-ebene { position:absolute; top:0; left:0; width:100%; height:100%; display:block; pointer-events:none; z-index:1; overflow:visible; }
.erl-dunkel { fill:#000; opacity:.42; }
.erl-r__kante, .erl-r__kante rect { fill:none; stroke:#8af0f4; stroke-width:10; opacity:.5; stroke-linejoin:round;
  -webkit-animation:erl-puls 7s ease-in-out infinite; animation:erl-puls 7s ease-in-out infinite; }
@-webkit-keyframes erl-puls { 0%,72%,100% { opacity:.5; stroke-width:10; } 82% { opacity:1; stroke-width:18; } }
@keyframes erl-puls { 0%,72%,100% { opacity:.5; stroke-width:10; } 82% { opacity:1; stroke-width:18; } }
.erl-r__linie, .erl-r__linie rect { fill:none; stroke:transparent; stroke-width:3px; vector-effect:non-scaling-stroke; stroke-linejoin:round; }
.erl-r.ist-zeiger .erl-r__kante, .erl-r.ist-zeiger .erl-r__kante rect { opacity:.95; }
.erl-r.ist-fokus .erl-r__linie, .erl-r.ist-fokus .erl-r__linie rect { stroke:var(--fokus); }
.erl-r.ist-blitz .erl-r__kante, .erl-r.ist-blitz .erl-r__kante rect { -webkit-animation:erl-blitz .7s ease-out 1; animation:erl-blitz .7s ease-out 1; }
@-webkit-keyframes erl-blitz { 0% { opacity:1; stroke-width:30; stroke:#e9ffff; } 100% { opacity:.5; stroke-width:10; } }
@keyframes erl-blitz { 0% { opacity:1; stroke-width:30; stroke:#e9ffff; } 100% { opacity:.5; stroke-width:10; } }
.szene.erl-offen .erl-r--tuer .erl-r__kante { stroke:#8ff0b0; opacity:.75; }
.szene.erl-impuls .erl-r--tuer .erl-r__kante { -webkit-animation:erl-impuls 1.3s ease-out 2; animation:erl-impuls 1.3s ease-out 2; }
@-webkit-keyframes erl-impuls { 0%,100% { stroke-width:10; opacity:.75; } 60% { stroke-width:34; opacity:1; } }
@keyframes erl-impuls { 0%,100% { stroke-width:10; opacity:.75; } 60% { stroke-width:34; opacity:1; } }

/* ---------- Licht im Raum ---------- */
.erl-glanz { fill:#cff6fa; opacity:.12; -webkit-animation:erl-flackern 9s steps(1) infinite; animation:erl-flackern 9s steps(1) infinite; }
@-webkit-keyframes erl-flackern { 0%,100% { opacity:.12; } 61% { opacity:.4; } 62% { opacity:.06; } 64% { opacity:.3; } 65% { opacity:.12; } }
@keyframes erl-flackern { 0%,100% { opacity:.12; } 61% { opacity:.4; } 62% { opacity:.06; } 64% { opacity:.3; } 65% { opacity:.12; } }
.erl-glimmen { opacity:.15; -webkit-animation:erl-glimmen 3s ease-in-out infinite; animation:erl-glimmen 3s ease-in-out infinite; }
@-webkit-keyframes erl-glimmen { 0%,100% { opacity:.08; } 50% { opacity:.32; } }
@keyframes erl-glimmen { 0%,100% { opacity:.08; } 50% { opacity:.32; } }
.erl-warnlicht { fill:#ff3b4a; opacity:.35; -webkit-animation:erl-warn 3.2s ease-in-out infinite; animation:erl-warn 3.2s ease-in-out infinite; }
.erl-warnkern { fill:#ff5f6b; opacity:0; }
@-webkit-keyframes erl-warn { 0%,100% { opacity:.2; } 50% { opacity:.6; } }
@keyframes erl-warn { 0%,100% { opacity:.2; } 50% { opacity:.6; } }
.szene.erl-offen .erl-warnlicht { fill:#6ff0a0; opacity:.55; -webkit-animation:none; animation:none; }
.szene.erl-offen .erl-warnkern { fill:#b9ffd2; opacity:.95; }

/* ---------- Staub ---------- */
.erl-staub { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; overflow:hidden; z-index:1; }
.erl-staub span { position:absolute; width:2px; height:2px; border-radius:50%; background:#d9f6f7; opacity:0;
  -webkit-animation:erl-staub 14s linear infinite; animation:erl-staub 14s linear infinite; }
@-webkit-keyframes erl-staub { 0% { opacity:0; -webkit-transform:translate(0,0); } 20% { opacity:.45; } 80% { opacity:.3; } 100% { opacity:0; -webkit-transform:translate(18px,46px); } }
@keyframes erl-staub { 0% { opacity:0; transform:translate(0,0); } 20% { opacity:.45; } 80% { opacity:.3; } 100% { opacity:0; transform:translate(18px,46px); } }

/* ---------- Sprechblase (Deko) ---------- */
.erl-blase { position:absolute; left:4%; right:4%; bottom:3%; z-index:6; margin:0; padding:.6rem .8rem; font-size:1rem; line-height:1.4;
  color:var(--text); background:rgba(3,17,23,.95); border:1px solid var(--rand); border-left:3px solid var(--rot); border-radius:8px; box-shadow:0 4px 16px #000; }
.erl-blase__name { display:block; font-size:.8rem; font-weight:600; letter-spacing:.14em; color:var(--rot); margin-bottom:.15rem; }

/* ---------- Funkgerät und Funkspruch ---------- */
.erl-funkgeraet { position:absolute; z-index:1; pointer-events:none; }
.erl-funkgeraet svg { display:block; width:100%; height:100%; }
@-webkit-keyframes erl-led { 0%,100% { opacity:1; } 50% { opacity:.15; } }
@keyframes erl-led { 0%,100% { opacity:1; } 50% { opacity:.15; } }
.erl-funk { position:absolute; left:4%; right:4%; top:4%; z-index:7; margin:0; padding:.2rem .85rem .8rem; color:#ffe9e9;
  background:rgba(14,4,7,.95); border:1px solid #8a3a44; border-left:3px solid var(--rot); border-radius:8px; box-shadow:0 6px 24px #000; }
.erl-funk__kopf { display:flex; align-items:center; min-height:44px; }
.erl-funk__led { width:10px; height:10px; border-radius:50%; background:#ff3b4a; box-shadow:0 0 8px #ff3b4a; margin-right:.5rem; flex:none; }
.erl-funk.laeuft .erl-funk__led { -webkit-animation:erl-led .6s steps(1) infinite; animation:erl-led .6s steps(1) infinite; }
.erl-funk__titel { font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--rot); margin-right:auto; }
.erl-funk__zu { width:44px; height:44px; margin:0 -.5rem 0 0; border:0; background:transparent; color:#ffd3d3; font:inherit; font-size:1.1rem; cursor:pointer; }
.erl-funk__text { margin:0; font-size:1.05rem; line-height:1.45; min-height:2.9em; }
.erl-funk__ende { margin:.35rem 0 0; font-size:.85rem; font-style:italic; color:#d89aa0; }
.erl-funk__ende:empty { display:none; }
.erl-flacker { color:#fff; font-weight:600; -webkit-animation:erl-flacker 1.4s steps(1) 2; animation:erl-flacker 1.4s steps(1) 2; }
@-webkit-keyframes erl-flacker { 0%,100% { opacity:1; } 10% { opacity:.1; } 20% { opacity:1; } 35% { opacity:.3; } 45% { opacity:1; } }
@keyframes erl-flacker { 0%,100% { opacity:1; } 10% { opacity:.1; } 20% { opacity:1; } 35% { opacity:.3; } 45% { opacity:1; } }

/* ---------- Apex spricht Wort für Wort ---------- */
.funkspruch__text.erl-sprechen { cursor:pointer; }
.erl-wort { opacity:1; -webkit-transition:opacity .18s; transition:opacity .18s; }
.funkspruch__text.laeuft .erl-wort { opacity:.12; }
.funkspruch__text.laeuft .erl-wort.da { opacity:1; }


/* ---------- Kopfzeile: Icon, Schlösser, Uhr, Ton ---------- */
.markenkopf .erl-icon { display:none; width:36px; height:36px; flex:none; }
.markenkopf .schloesser { margin-right:auto; }
body[data-abschnitt="intro"] .markenkopf .schloesser { margin-right:0; }
@media (max-width:430px) {
  body:not([data-abschnitt="intro"]) .markenkopf .erl-logo { display:none; }
  body:not([data-abschnitt="intro"]) .markenkopf .erl-icon { display:block; }
}
.erl-kopfuhr { display:flex; align-items:center; margin:0 .6rem 0 .5rem; font-size:1.05rem; }
.erl-kopfuhr .erl-zeit__symbol { width:18px; height:18px; margin-right:.3rem; fill:none; stroke:var(--petrol); stroke-width:2; stroke-linecap:round; }
body[data-abschnitt="intro"] .erl-kopfuhr { display:none; }
.erl-zeit__wert { font-variant-numeric:tabular-nums; font-weight:600; color:var(--petrol); }
.erl-zeit[data-gestoppt="true"] .erl-zeit__wert { color:var(--gruen); }
.erl-zeit[data-gestoppt="true"] .erl-zeit__symbol { stroke:var(--gruen); }
.erl-tonwrap { position:relative; flex:none; }
body[data-abschnitt="intro"] .erl-tonwrap { position:absolute; right:max(12px, env(safe-area-inset-right)); top:50%; -webkit-transform:translateY(-50%); transform:translateY(-50%); }
.erl-ton { width:44px; height:44px; padding:0; border-radius:50%; border:1.5px solid var(--rand); background:var(--flaeche); color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.erl-ton:hover, .erl-ton[aria-expanded="true"] { border-color:var(--petrol); }
.erl-ton svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.erl-ton .erl-ton__aus { display:none; }
.erl-ton[data-an="false"] { color:var(--text-2); }
.erl-ton[data-an="false"] .erl-ton__wellen { display:none; }
.erl-ton[data-an="false"] .erl-ton__aus { display:inline; }
.erl-tonfeld { position:absolute; right:0; top:calc(100% + 10px); z-index:30; width:260px; max-width:calc(100vw - 24px); padding:.75rem .9rem .5rem;
  background:var(--flaeche-2); border:1px solid var(--rand); border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.7); text-align:left; }
.erl-tonfeld[hidden] { display:none; }
.erl-tonschalter { display:flex; align-items:center; width:100%; min-height:44px; padding:0 .7rem; margin:0 0 .5rem; font:inherit; font-weight:600; font-size:1rem;
  color:var(--text); background:var(--flaeche); border:1.5px solid var(--rand); border-radius:999px; cursor:pointer; }
.erl-tonschalter__punkt { width:14px; height:14px; margin-right:.55rem; border-radius:50%; border:2px solid var(--text-2); }
.erl-tonschalter[aria-pressed="true"] { border-color:var(--petrol); }
.erl-tonschalter[aria-pressed="true"] .erl-tonschalter__punkt { background:var(--petrol); border-color:var(--petrol); box-shadow:0 0 8px var(--petrol); }
.erl-regler { display:block; margin:.35rem 0 .4rem; font-size:.95rem; color:var(--text-2); }
.erl-regler span { display:block; margin-bottom:.15rem; }
.erl-regler input { display:block; width:100%; height:36px; margin:0; accent-color:var(--petrol); }

/* ---------- Startbild: Ladebalken ---------- */
.erl-start { margin-top:.6rem; }
.erl-laden__balken { height:6px; border-radius:3px; background:rgba(255,255,255,.12); overflow:hidden; }
.erl-laden__balken span { display:block; height:100%; width:0; background:var(--petrol); -webkit-transition:width .3s; transition:width .3s; }
.erl-laden[data-fertig="true"] .erl-laden__balken span { background:var(--gruen); }
.erl-laden__text { margin:.35rem 0 0; font-size:.95rem; color:var(--text-2); }

/* ---------- Ziffernfeld ---------- */
.erl-ziffern { margin:0 0 .5rem; }
.erl-ziffern__fuer { margin:0 0 .35rem; font-size:.9rem; color:var(--text-2); text-align:center; }
.erl-ziffern__raster { display:grid; grid-template-columns:repeat(4, 1fr); grid-gap:6px; gap:6px; }
.erl-taste { min-height:46px; margin:0; padding:0; font-family:var(--mathe); font-size:1.35rem; color:var(--text); background:#0a2228; border:1px solid var(--rand); border-radius:10px; cursor:pointer;
  -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none; }
.erl-taste:active { background:#14424b; border-color:var(--petrol); }
.erl-taste--loeschen { font-family:var(--schrift); font-size:1.15rem; color:var(--text-2); }
.erl-taste--weiter { grid-column:span 3; font-family:var(--schrift); font-size:1rem; font-weight:600; color:var(--petrol); }
.feld input.erl-aktiv { border-color:var(--fokus); }
@media (max-height:600px) { .erl-taste { min-height:40px; font-size:1.2rem; } .erl-ziffern__fuer { display:none; } }

/* ---------- Abschluss-Nachweis ---------- */
.erl-ausweis { display:flex; align-items:center; margin:1rem 0; padding:1rem; background:var(--flaeche-2); border:1.5px solid var(--gruen); border-radius:var(--radius); box-shadow:0 0 24px rgba(143,240,176,.15); }
.erl-siegel { width:96px; height:96px; flex:none; margin-right:1rem; color:var(--gruen); -webkit-animation:erl-drehen 24s linear infinite; animation:erl-drehen 24s linear infinite; }
@-webkit-keyframes erl-drehen { to { -webkit-transform:rotate(360deg); } }
@keyframes erl-drehen { to { transform:rotate(360deg); } }
.erl-ausweis__inhalt { min-width:0; }
.erl-ausweis h2 { margin:0 0 .35rem; font-size:1.1rem; color:var(--gruen); }
.erl-ausweis__zeile { margin:0 0 .15rem; color:var(--text-2); }
.erl-ausweis__zeile b { color:var(--text); font-variant-numeric:tabular-nums; margin-left:.3rem; }
.erl-ausweis__zeit { font-size:1.5rem; color:var(--gruen) !important; }
.erl-ausweis__punkt { display:inline-block; width:8px; height:8px; margin-left:.4rem; border-radius:50%; background:var(--gruen); -webkit-animation:erl-led 1s steps(1) infinite; animation:erl-led 1s steps(1) infinite; }
.erl-ausweis__hinweis { margin:.4rem 0 0; font-size:.9rem; color:var(--text-2); }
@media (max-width:360px) { .erl-ausweis { display:block; } .erl-siegel { margin:0 0 .5rem; width:80px; height:80px; } }

/* ---------- Ruhe: reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .erl-staub span, .erl-glanz, .erl-glimmen, .erl-warnlicht, .erl-r__kante, .erl-r__kante rect,
  .erl-r.ist-blitz .erl-r__kante, .szene.erl-impuls .erl-r--tuer .erl-r__kante, .erl-flacker, .erl-siegel, .erl-funk-led { -webkit-animation:none !important; animation:none !important; }
  .erl-staub { display:none; }
  .erl-wort { -webkit-transition:none; transition:none; }
}

/* ---------- Hoher Kontrast (Windows) ---------- */
@media (forced-colors: active) {
  .erl-ebene, .erl-staub, .erl-funkgeraet { display:none; }
  .szene.erl-an .raumobjekt, .szene.erl-an .erl-deko { border:2px solid CanvasText !important; }
}