/* Lochraster-Planer: layout, toolbar, panels, board styling and print layout. */
:root {
  --bg: #f4f1ea; --flaeche: #e9e4d8; --panel: #ffffff; --text: #222; --leise: #666;
  --rand: #d3ccbd; --akzent: #1f6f5c; --akzent-hell: #d7efe8; --fehler: #c92a2a; --warn-bg: #fff4e6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1d1f21; --flaeche: #26292c; --panel: #2c3034; --text: #e8e8e8; --leise: #a0a0a0;
    --rand: #44494e; --akzent: #4fb39a; --akzent-hell: #1f3d36; --fehler: #ff6b6b; --warn-bg: #3a2e1f;
  }
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { display: flex; flex-direction: column; background: var(--bg); color: var(--text); font: 14px/1.4 system-ui, "Segoe UI", sans-serif; }

.kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 8px 12px; border-bottom: 1px solid var(--rand); background: var(--panel); }
.kopf h1 { font-size: 17px; margin: 0; white-space: nowrap; }
.leiste { display: flex; flex-wrap: wrap; gap: 8px; }
.gruppe { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; padding-right: 8px; border-right: 1px solid var(--rand); }
.gruppe:last-child { border-right: 0; }
button { font: inherit; padding: 4px 9px; border: 1px solid var(--rand); border-radius: 5px; background: var(--panel); color: var(--text); cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--akzent); }
button:disabled { opacity: 0.4; cursor: default; }
button.aktiv { background: var(--akzent); border-color: var(--akzent); color: #fff; }
button.haupt { background: var(--akzent); color: #fff; border-color: var(--akzent); }
button.gefahr { color: var(--fehler); }
.segment button { border-radius: 0; margin-left: -1px; }
.segment button:first-child { border-radius: 5px 0 0 5px; }
.segment button:last-child { border-radius: 0 5px 5px 0; }
label.inline { display: inline-flex; gap: 4px; align-items: center; color: var(--leise); }
select, input { font: inherit; padding: 3px 5px; border: 1px solid var(--rand); border-radius: 4px; background: var(--panel); color: var(--text); }

.arbeitsbereich { flex: 1; display: grid; grid-template-columns: 190px 1fr 260px; min-height: 0; }
.seite { overflow-y: auto; padding: 10px 12px; background: var(--panel); }
.seite.links { border-right: 1px solid var(--rand); }
.seite.rechts { border-left: 1px solid var(--rand); }
.seite h2 { font-size: 15px; margin: 0 0 6px; }
.seite h3 { font-size: 13px; margin: 12px 0 4px; color: var(--leise); text-transform: uppercase; letter-spacing: 0.03em; }
#eigenschaften h3 { text-transform: none; color: var(--text); font-size: 15px; margin-top: 0; letter-spacing: 0; }
.biblio { display: block; width: 100%; text-align: left; margin-bottom: 3px; }
.biblio[hidden], .biblio-gruppe[hidden] { display: none; }
.biblio-suche { width: 100%; margin-bottom: 4px; }
.biblio-gruppe summary { font-size: 12px; margin: 8px 0 4px; color: var(--leise); text-transform: uppercase; letter-spacing: 0.03em; cursor: pointer; font-weight: 600; }
.feld { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.feld span { font-size: 12px; color: var(--leise); }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.knopfreihe { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; margin-top: 8px; }
.klein { font-size: 12px; color: var(--leise); }
.ok { color: var(--akzent); }
.warnungen { margin-top: 16px; padding-top: 8px; border-top: 1px solid var(--rand); }
.warnungen ul { margin: 0; padding: 0; list-style: none; }
.warnungen li { background: var(--warn-bg); border-left: 3px solid var(--fehler); padding: 5px 7px; margin-bottom: 4px; cursor: pointer; font-size: 13px; }

.flaeche { overflow: auto; padding: 16px; background: var(--flaeche); }
#platine { display: block; margin: 0 auto; user-select: none; touch-action: none; }
#platine[data-werkzeug="bauteil"], #platine[data-werkzeug^="draht"], #platine[data-werkzeug="trennen"], #platine[data-werkzeug="pruefen"] { cursor: crosshair; }
#platine[data-werkzeug="loeschen"] .teil, #platine[data-werkzeug="loeschen"] .draht { cursor: not-allowed; }
#platine[data-werkzeug="auswahl"] .teil { cursor: move; }

/* Board content (units: 1 = grid pitch) */
.achse text { font-size: 0.42px; fill: var(--leise); text-anchor: middle; }
.bein { stroke: #9a9a9a; stroke-width: 0.12; stroke-linecap: round; }
.koerper { stroke: rgba(0, 0, 0, 0.45); stroke-width: 0.05; }
.pol { font-size: 0.6px; fill: #fff; text-anchor: middle; font-weight: bold; }
/* Hit areas: only the fill (parts) or the stroke (wires) counts. With pointer-events "all" the
   invisible default stroke (1 grid unit wide) made every part grab the neighbouring holes. */
.treffer { fill: transparent; stroke: none; pointer-events: fill; }
line.treffer, polyline.treffer { stroke: transparent; fill: none; pointer-events: stroke; }
.teil.gewaehlt .treffer { stroke: #1c7ed6; stroke-width: 0.08; stroke-dasharray: 0.25 0.15; }
.teil.warnung .treffer { stroke: var(--fehler); stroke-width: 0.1; }
.draht.gewaehlt .leitung { filter: drop-shadow(0 0 0.15px #1c7ed6); stroke-dasharray: 0.4 0.15; }
.teile.blass { opacity: 0.22; pointer-events: none; }
.beschriftung { font-size: 0.55px; font-weight: 600; text-anchor: middle; fill: #111; paint-order: stroke; stroke: rgba(255, 255, 255, 0.85); stroke-width: 0.12px; pointer-events: none; }
.netzmarke { fill: #ffe14d; fill-opacity: 0.75; stroke: #e0a800; stroke-width: 0.06; pointer-events: none; }
.draht.im-netz .leitung { filter: drop-shadow(0 0 0.2px #ffd000); }
.geist { opacity: 0.55; pointer-events: none; }
.geist.falsch { opacity: 0.35; filter: drop-shadow(0 0 0.15px red); }

.status { display: flex; justify-content: space-between; gap: 12px; padding: 5px 12px; border-top: 1px solid var(--rand); background: var(--panel); font-size: 13px; }
.status .fehler { color: var(--fehler); font-weight: 600; }
.status .pos { font-variant-numeric: tabular-nums; color: var(--leise); min-width: 4em; text-align: right; }

dialog { border: 1px solid var(--rand); border-radius: 8px; background: var(--panel); color: var(--text); max-width: min(720px, 94vw); padding: 16px 18px; }
dialog::backdrop { background: rgba(0, 0, 0, 0.35); }
dialog h2 { margin: 0 0 10px; font-size: 17px; }
.tabelle { border-collapse: collapse; width: 100%; font-size: 13px; }
.tabelle th, .tabelle td { border-bottom: 1px solid var(--rand); padding: 4px 6px; text-align: left; vertical-align: top; }
.druckbereich { display: none; }

/* Task mode: page links, mode banner, plan pane, results */
.seiten { display: flex; gap: 10px; font-size: 13px; }
.seiten a { color: var(--akzent); text-decoration: none; }
.seiten a:hover { text-decoration: underline; }
.gruppe.aufgabe button:not([hidden]) { border-color: var(--akzent); }
.modus { display: flex; align-items: center; gap: 12px; padding: 6px 12px; background: var(--akzent-hell); border-bottom: 1px solid var(--rand); }
.modus[hidden] { display: none; }
.arbeitsbereich.mit-plan { grid-template-columns: 190px minmax(220px, var(--plan-breite, 38%)) 1fr 260px; }
.arbeitsbereich.plan-zu { grid-template-columns: 190px 34px 1fr 260px; }
.schaltplan { overflow: auto; padding: 10px 12px; background: var(--panel); border-right: 1px solid var(--rand); display: flex; flex-direction: column; gap: 8px; }
.schaltplan[hidden] { display: none; }
.plan-inhalt { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; }
.schaltplan .plan-auf { display: none; }
.schaltplan.zu { padding: 6px 2px; overflow: hidden; }
.schaltplan.zu .plan-inhalt { display: none; }
.schaltplan.zu .plan-auf { display: block; writing-mode: vertical-rl; padding: 10px 4px; width: 100%; }
.plan-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.plan-kopf h2 { font-size: 15px; margin: 0; }
.plan-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; }
.plan-leiste a { color: var(--akzent); }
.plan-leiste .segment { display: inline-flex; }
.plan-leiste button { padding: 2px 8px; }
.plan-zoom { display: inline-flex; align-items: center; gap: 3px; }
.plan-zoomwert { min-width: 3.2em; text-align: center; font-variant-numeric: tabular-nums; color: var(--leise); }
.plan-rahmen { overflow: auto; flex: 1; min-height: 0; }
.auftrag { white-space: pre-wrap; margin: 4px 0 0; }
.plan-bild { width: 100%; max-width: none; height: auto; display: block; background: #fff; border: 1px solid var(--rand); }
.plan-pdf { width: 100%; flex: 1; min-height: 60vh; border: 1px solid var(--rand); background: #fff; }
.auswahlliste { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.beispiel { display: flex; gap: 8px; align-items: flex-start; padding: 6px; border: 1px solid var(--rand); border-radius: 6px; }
.beispiel input { margin-top: 3px; }
.ergebnis { font-weight: 600; font-size: 15px; }
.ergebnis.gut { color: var(--akzent); }
.ergebnis.schlecht { color: var(--fehler); }
.meldungen { padding-left: 18px; }
.meldungen li { margin-bottom: 3px; }

/* Simulation */
.gruppe.sim button.aktiv { background: #2f9e44; border-color: #2f9e44; }
.simbereich { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--rand); }
.simbereich:empty { display: none; }
.simbereich ul { margin: 0 0 8px; padding-left: 16px; font-size: 13px; }
.sim-fehler li { color: var(--fehler); }
.sim-hinweis li { color: var(--leise); }
/* Fixed overlay: it must never shift the board, or clicks land on other holes */
.multimeter { position: fixed; right: 276px; bottom: 44px; z-index: 5; min-width: 200px; padding: 8px 12px; pointer-events: none;
  background: #1e2a22; color: #b6f5c8; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.3); font-variant-numeric: tabular-nums; }
.multimeter[hidden] { display: none; }
.mm-titel { font-size: 12px; color: #8fd3a5; }
.mm-wert { font-size: 26px; font-weight: 700; font-family: "Consolas", "Courier New", monospace; }
.mm-detail { font-size: 12px; color: #9fc9ad; }

/* Generated schematic: floating, resizable window */
.stromlauf { position: fixed; top: 110px; right: 280px; width: min(760px, 70vw); height: min(520px, 60vh); z-index: 6;
  display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--rand); border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); resize: both; overflow: hidden; }
.stromlauf[hidden] { display: none; }
.stromlauf-kopf { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-bottom: 1px solid var(--rand); }
.stromlauf-kopf .klein { flex: 1; }
.stromlauf-bild { flex: 1; overflow: auto; padding: 8px; background: #fff; }
.schaltplan-svg { display: block; }
.schaltplan-svg line, .sz-linie { stroke: #111; stroke-width: 0.3; fill: none; stroke-linecap: round; }
.schaltplan-svg rect, .schaltplan-svg circle, .schaltplan-svg path { stroke: #111; stroke-width: 0.3; }
.sz-hohl, .schaltplan-svg rect:not(.sz-voll) { fill: #fff; }
.sz-voll { fill: #111; }
.sz-dick { stroke-width: 0.9 !important; }
.sz-wirk { stroke-dasharray: 0.8 0.6; }
.sz-punkt { fill: #111; }
.schaltplan-svg text { font-family: system-ui, sans-serif; stroke: none; }
.sz-bez { font-size: 2.1px; font-weight: 700; fill: #111; }
.sz-netz { font-size: 1.9px; font-weight: 600; fill: #1f5fbf; }
.sz-offen { font-size: 1.6px; fill: #999; font-style: italic; }
.sz-pin { font-size: 1.4px; fill: #333; }
.sz-klein { font-size: 1.7px; fill: #111; }
.sz-text { font-size: 1.7px; fill: #111; }

/* Oscilloscope drawer below the work area */
.oszi { border-top: 2px solid #1e2a22; background: #14231a; color: #cfe9d8; padding: 6px 10px; display: flex; flex-direction: column; gap: 6px; }
.oszi[hidden] { display: none; }
.oszi select, .oszi input { background: #0d1a12; color: #cfe9d8; border-color: #35513f; }
.oszi button { background: #20362a; color: #cfe9d8; border-color: #35513f; }
.oszi button.aktiv { background: #2f9e44; border-color: #2f9e44; color: #fff; }
.oszi-zeile { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 13px; }
.oszi-zeile input[type=number] { width: 64px; }
.oszi-kanaele { display: flex; flex-wrap: wrap; gap: 6px; }
.oszi-kanal { display: flex; gap: 6px; align-items: center; padding: 3px 6px; border-left: 4px solid var(--kfarbe); background: #0d1a12; border-radius: 4px; font-size: 13px; }
.oszi-kanal input[type=number] { width: 52px; }
.oszi-titel { font-weight: 700; color: var(--kfarbe); display: flex; gap: 4px; align-items: center; }
.oszi-unten { display: flex; gap: 10px; align-items: stretch; }
.oszi-bild { flex: 1; height: 240px; min-width: 0; border-radius: 4px; }
.oszi-messbereich { width: 430px; overflow: auto; font-size: 12px; }
.oszi-mess { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.oszi-mess th, .oszi-mess td { padding: 2px 5px; text-align: right; border-bottom: 1px solid #2a4033; }
.oszi-mess th { color: #8fd3a5; font-weight: 600; }
.oszi .klein { color: #8fb39c; }
@media (max-width: 900px) {
  .oszi-unten { flex-direction: column; }
  .oszi-messbereich { width: auto; }
}

@media (max-width: 900px) {
  .arbeitsbereich { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  .seite.links, .seite.rechts { border: 0; border-bottom: 1px solid var(--rand); max-height: 30vh; }
  .biblio { display: inline-block; width: auto; margin-right: 3px; }
}

@media print {
  body > *:not(.druckbereich) { display: none !important; }
  body { display: block; background: #fff; color: #000; }
  .druckbereich { display: block; }
  .druckbereich h1 { font-size: 18px; margin: 0 0 4px; }
  .druck-hinweis { font-size: 11px; color: #555; }
  .druck-blatt { break-inside: avoid; margin: 0 0 8mm; }
  .druck-blatt h2 { font-size: 14px; margin: 4mm 0 2mm; }
  .druck-blatt svg { display: block; }
  .druck-blatt .schaltplan-svg { max-width: 100%; height: auto; }
  .achse text { fill: #555; }
  .tabelle th, .tabelle td { border-bottom: 1px solid #999; }
}

@media (max-width: 900px) {
  .arbeitsbereich.mit-plan, .arbeitsbereich.plan-zu { grid-template-columns: 1fr; }
  .schaltplan.zu .plan-auf { writing-mode: horizontal-tb; }
  .schaltplan { max-height: 45vh; border-right: 0; border-bottom: 1px solid var(--rand); }
}