/* Simulationen „Elektrischer Strom“. Das Kapitel-Design (Titelleiste mit Reitern, Handy-Leiste, Knöpfe, Quiz, Teilen)
   kommt aus site/shared/kapitel.css – gleich wie bei den Calliope-Kapiteln. Hier nur: Zuordnung für diesen Bereich
   (:root) und die Bausteine der Simulationen (Bühne, Bedienung, Erklärung, Schritt-Text). Keine Inline-Stile in den
   Seiten (CSP der Website). Pfade: sync.py macht aus "../../shared/" online "../../shared/". */
@import url("../../shared/fonts/fonts.css");
@import url("../../shared/kapitel.css");
@import url("farben.css");   /* Physik-Farben --sim-…, gemeinsam mit den Arbeitsblättern */

:root{
  /* Zuordnung – NUR HIER ändern */
  --fach:var(--natur);                                   /* Physik = Naturwissenschaften */
  --no-text:"Elektrischer Strom · Thema ";               /* in der Titelleiste vor der Nummer (kapitel.css) */
}
/* Titelleiste (kapitel.css): Bild der Kachel */
.bar h1::after{background-image:url("../../shared/bilder/strom.svg")}
[hidden]{display:none !important}

/* Einstieg (abstimmung in sim.js): Karten wie Quiz-Antworten, mit Bild untereinander, am Handy Bild neben Text */
.sec h2{margin-bottom:.8rem}
.ab-karten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin-top:1rem}
.ab-karten.mit-bild{grid-template-columns:repeat(3,minmax(0,1fr))}
.mit-bild .ab-karte{flex-direction:column;align-items:stretch;gap:.6rem}
.mit-bild .ab-karte .L{align-self:flex-start}
.ab-bild svg{display:block;width:100%;height:auto;max-height:24vh}
.ab-text{font-weight:600}
.ab-los{margin-top:1.2rem}
.ab-aufloesung{font-size:1.15rem;line-height:1.5}
.fold{margin-top:1.6rem}
/* Bilder der Karten: Farben der Physik aus :root */
.ab-bild .kabel{fill:none;stroke:var(--sim-kabel);stroke-width:3}
.ab-bild .leer{fill:none;stroke:var(--sim-kabel);stroke-width:3;stroke-dasharray:2 5;opacity:.45}
.ab-bild .e{fill:var(--sim-elektron)}
.ab-bild .pfeil{fill:none;stroke:var(--sim-elektron);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.ab-bild .minus{fill:var(--sim-elektron)} .ab-bild .plus{fill:var(--sim-plus)} .ab-bild .batt{fill:var(--sim-kabel)}
.ab-bild .glas{fill:var(--karte);stroke:var(--sim-kabel);stroke-width:2.5} .ab-bild .glut{fill:var(--sim-gluehen);opacity:.55}
.ab-bild .knall{fill:var(--sim-markiert);stroke:var(--sim-kabel);stroke-width:1.5}
.ab-bild text{font:800 13px var(--font-head);fill:#fff;text-anchor:middle;dominant-baseline:central}
.ab-bild text.klein{font:700 9px var(--font-text)}
.ab-bild text.pol{font:800 9px var(--font-head)}
.ab-bild text.name{font:600 10px var(--font-text);fill:var(--ink)}

/* Simulation: zweite Leiste mit den Szenen (am Handy in einer Zeile zum Wischen), immer nur eine Szene sichtbar */
/* Szenen-Leiste mit Pfeilen links und rechts zum Durchklicken (nach der letzten Szene weiter zum Quiz) */
.sim-szenen-leiste{display:flex;align-items:flex-start;gap:.5rem;margin-bottom:1rem}
.sim-szenen{display:flex;gap:.5rem;flex-wrap:wrap;min-width:0}
.ghost.small.sim-pfeil{flex:none;min-width:2.4rem;padding:0 .5rem;font-size:1.3rem;font-weight:700;line-height:1.15}
.ghost.small.sim-pfeil:disabled{opacity:.35;box-shadow:none;cursor:default}
/* Große Pfeilspitzen links und rechts am Bildschirm zum Blättern durch die Szenen (Nutzerwunsch Nov. 2026). Nur auf
   großen Bildschirmen und nur, solange die Simulation offen ist; dann entfallen die kleinen Pfeile an der Leiste. */
.sim-blaettern{display:none}
/* Handy: unten „‹ Zurück“ und „Weiter ›“ durch die Szenen (Nutzerwunsch); die Reiter-Knöpfe von kapitel.js entfallen hier */
.sim-unten{display:none}
@media (max-width:63.99rem){
  .sim-unten{display:flex;justify-content:space-between;gap:8px;margin-top:1.4rem}
  .sim-unten button{font-size:14px}
  body:has(#simulation.on) .schritt-weiter{display:none !important}
}
@media (min-width:64rem){
  #simulation{padding:0 58px}
  .sim-szenen-leiste .sim-pfeil{display:none}
  #simulation.on .sim-blaettern{display:grid;place-items:center;position:fixed;top:50%;z-index:5;width:52px;height:110px;margin-top:-20px;
    border:0;background:none;color:var(--ink);cursor:pointer}
  .sim-blaettern.zurueck{left:6px} .sim-blaettern.weiter{right:6px}
  .sim-blaettern .mt-symbol{width:40px;height:84px}
  .sim-blaettern:hover{background:var(--tint)}
  .sim-blaettern:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
  #simulation.on .sim-blaettern:disabled{opacity:.15;cursor:default;background:none}
}
.szene:not(.on){display:none}
.sim-szenen button.on,.sim-szenen button.on:hover{background:var(--fach);box-shadow:none;transform:translate(2px,2px)}
@media (max-width:47.99rem){
  .sim-szenen{flex-wrap:nowrap;overflow-x:auto;padding:0 2px 6px;scrollbar-width:thin}
  .sim-szenen button{flex:none;white-space:nowrap}
  .ab-karten,.ab-karten.mit-bild{grid-template-columns:minmax(0,1fr)}
  .mit-bild .ab-karte{display:grid;grid-template-columns:auto 7.5rem 1fr;align-items:center}
}

/* Szene: Überschrift mit den Hilfen rechts (Beschriftung, Erklärung), darunter das „Gerät“: Bedienleiste mit den Reglern
   der Szene oben im Rahmen, darunter das Bild (Nutzerwunsch Nov. 2026). Regler: Kippschalter (eckig, an = Fachfarbe),
   Werte als Segmente oder Schieber. Alles gleich hoch (34 px). */
.sim-kopf{display:flex;align-items:center;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;margin-bottom:.8rem}
.sim-kopf h2{margin-bottom:0}
.sim-hilfen{display:flex;gap:18px;margin-left:auto}
/* Das „Gerät“: Bedienleiste und Bild in einem Rahmen; ohne Regler keine Leiste */
.sim-geraet{width:100%;max-width:max(600px,calc((100vh - 400px) * 16 / 9));margin:0 auto;border:var(--blatt-rand);background:var(--sim-papier)}
.sim-regler{display:flex;gap:8px 18px;flex-wrap:wrap;align-items:center;padding:8px 12px;border-bottom:1.5px solid var(--line);background:var(--karte)}
.sim-regler:empty{display:none}
.sim-kipp{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0;border:0;background:none;color:var(--ink);
  font:600 15px var(--font-text);cursor:pointer}
.sim-kipp-bahn{position:relative;flex:none;width:40px;height:22px;border:2px solid var(--ink);background:var(--karte);transition:background 120ms}
.sim-kipp-bahn::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;background:var(--muted);transition:transform 120ms,background 120ms}
.sim-kipp[aria-checked="true"] .sim-kipp-bahn{background:var(--fach)}
.sim-kipp[aria-checked="true"] .sim-kipp-bahn::after{transform:translateX(18px);background:var(--ink)}
.sim-kipp:focus-visible,.sim-segmente button:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.sim-wahl{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px}
.sim-segmente{display:inline-flex;border:var(--blatt-rand);background:var(--karte)}
.sim-segmente button{min-width:34px;height:30px;padding:0 8px;border:0;border-left:1.5px solid var(--line);background:none;
  font:600 14px var(--font-mono);color:var(--ink);cursor:pointer}
.sim-segmente button:first-child{border-left:0}
.sim-segmente button:hover{background:var(--tint)}
.sim-segmente button[aria-pressed="true"]{background:var(--fach)}
.sim-einheit{font:600 14px var(--font-mono);color:var(--muted)}
.sim-schieber input{width:min(13rem,36vw);accent-color:var(--fach)}
.sim-schieber output{min-width:2.6rem;text-align:right;font:700 14px var(--font-mono)}
/* Bühne höchstens so groß, dass Leiste, Bedienung und Bühne ohne Scrollen auf den Bildschirm passen (Beamer, Laptop);
   auf niedrigen Bildschirmen (Handy quer) aber mindestens 600 px breit – dann wird gescrollt */
.sim-buehne{position:relative;width:100%}
.sim-buehne canvas{display:block;width:100%;height:auto}
/* Bild und Erklärung: auf großen Bildschirmen nebeneinander (Nutzerwunsch: beides gleichzeitig sehen), sonst untereinander */
@media (min-width:64rem){
  .sim-inhalt{display:flex;gap:1.2rem;align-items:flex-start}
  .sim-inhalt .sim-geraet{flex:1;min-width:0}
  .sim-inhalt .sim-erklaerung{flex:0 0 clamp(16rem,24vw,24rem);margin-top:0;font-size:1.05rem}
}
.sim-erklaerung{margin-top:1rem;padding:.9rem 1.2rem;border:var(--blatt-rand);border-left:6px solid var(--fach);background:var(--karte);font-size:1.15rem;line-height:1.5}
.sim-erklaerung p + p{margin-top:.6em}

/* Zeile je nach Reglern (jetzt): hervorgehoben, ändert sich beim Ausprobieren */
.sim-jetzt{margin-top:.7em;padding:.45em .7em;background:color-mix(in srgb,var(--fach) 22%,var(--karte));border-left:4px solid var(--fach)}
/* „Probier aus“ am Ende des Texts: Auftrag zum Ausprobieren mit den Reglern */
.sim-erklaerung .probier{margin-top:.8em;padding-top:.6em;border-top:1.5px dashed var(--line)}
.ghost:disabled,.btn-main:disabled{opacity:.4;cursor:default}