/* AV-Board — Stile des Moduls js/zeichnung.js (Stufe 2, 24.08.2026).
   Gemeinsame Tokens/Basis bleiben in style.css; hier nur, was dieses Modul braucht. */

/* ── Marken sind klickbar (Rückrichtung Marke → Zeile) ───────────────────
   Die Ebene selbst lässt Klicks durch (style.css: pointer-events none), damit
   das Bild weiter das Vollbild öffnet — nur die Marken fangen sie ab. */
.marken .marke {
  pointer-events: auto;
  cursor: pointer;
}
.marken .marke:not(.aktiv):hover {
  border-color: var(--primary, #0080C9);
  background: rgba(0, 128, 201, .18);
  box-shadow: 0 0 0 2px rgba(0, 128, 201, .28);
}

/* ── Markierungen auf dem Blatt (AP-5, D15): Zeilen-, Wort- und Verwendungskasten ──
   Der Zeilenkasten liegt über die volle Breite der Stücklistentabelle und
   bleibt dezent; das gefundene Wort darin wird betont. Aktive Marke kräftig. */
.marken .marke.zeile {
  border: 1.5px solid rgba(0, 128, 201, .45);
  background: rgba(0, 128, 201, .05);
  border-radius: 3px;
}
.marken .marke.zeile:not(.aktiv):hover {
  background: rgba(0, 128, 201, .12);
}
.marken .marke.zeile.aktiv {
  border: 2px solid var(--accent, #DC500F);
  background: rgba(220, 80, 15, .12);
  box-shadow: 0 0 0 2px rgba(220, 80, 15, .25);
  animation: zeilePuls 1.2s ease-out;
  mix-blend-mode: multiply;
}
html.dark .marken .marke.zeile.aktiv,
[data-theme="dark"] .marken .marke.zeile.aktiv { mix-blend-mode: normal; }
.marken .marke.wort.aktiv {
  border-width: 2px;
}
@keyframes zeilePuls {
  0%   { box-shadow: 0 0 0 10px rgba(220, 80, 15, 0); }
  40%  { box-shadow: 0 0 0 7px rgba(220, 80, 15, .45); }
  100% { box-shadow: 0 0 0 2px rgba(220, 80, 15, .25); }
}

/* Verwendungsstelle: orange gestrichelt — außerhalb der Stückliste, z. B. am Kabel. */
.marken .marke.verwendung {
  border: 1.5px dashed rgba(220, 80, 15, .6);
  background: rgba(220, 80, 15, .05);
  border-radius: 3px;
}
.marken .marke.verwendung:not(.aktiv):hover {
  border-color: var(--accent, #DC500F);
  background: rgba(220, 80, 15, .14);
  box-shadow: 0 0 0 2px rgba(220, 80, 15, .25);
}
.marken .marke.verwendung.aktiv {
  border: 2px dashed var(--accent, #DC500F);
  background: rgba(220, 80, 15, .16);
  box-shadow: 0 0 0 3px rgba(220, 80, 15, .28), 0 0 14px rgba(220, 80, 15, .4);
  animation: zeilePuls 1.2s ease-out;
  mix-blend-mode: multiply;
}
html.dark .marken .marke.verwendung.aktiv,
[data-theme="dark"] .marken .marke.verwendung.aktiv { mix-blend-mode: normal; }

/* ── Fußzeile der Bühne: „Pos 7 · Stücklistenzeile" mit Durchschalter ────── */
.zeichnung-fuss b { font-weight: 600; color: var(--text); }
.zeichnung-fuss .badge { padding: 1px 7px; font-size: .66rem; vertical-align: 1px; }
.zeichnung-fuss .fund-schalter {
  margin-left: .5rem;
  font-size: .76rem;
  font-family: var(--font-body);
  color: var(--primary-dark, #005f97);
  background: var(--primary-soft, #e6f3fb);
  border: 1px solid rgba(0, 128, 201, .45);
  border-radius: var(--radius-sm, 6px);
  padding: 2px 9px;
  cursor: pointer;
  transition: background var(--motion, 160ms), color var(--motion, 160ms);
}
.zeichnung-fuss .fund-schalter:hover {
  background: var(--primary, #0080C9);
  color: #fff;
}
/* Dunkle Palette: helleres Blau, sonst steht Blau auf Blau. */
html.dark .zeichnung-fuss .fund-schalter,
[data-theme="dark"] .zeichnung-fuss .fund-schalter {
  color: #7cc4ef;
  border-color: rgba(0, 128, 201, .7);
}
.zeichnung-fuss .fund-schalter:focus-visible {
  outline: 2px solid var(--primary, #0080C9);
  outline-offset: 1px;
}

/* ── Vollbild: Rahmen mit den Maßen des gedrehten Blatts ──────────────────
   Zoom setzt die Breite des Blatts (nicht transform: scale), damit der
   rollbare Bereich mitwächst. Der Rahmen trägt die Maße des gedrehten Blatts;
   das Blatt hängt zentriert darin und dreht um seine Mitte — die Marken in
   Prozent drehen mit. margin:auto im Flex-Container zentriert, solange Platz
   ist, und lässt sonst links oben beginnen: alle Ecken bleiben erreichbar. */
.vollbild-buehne {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.vollbild-buehne .blatt-rahmen {
  position: relative;
  flex: none;
  margin: auto;
}
.vollbild-buehne .blatt {
  position: absolute;
  left: 50%;
  top: 50%;
  min-width: 0;
  margin: 0;
  width: auto;
  transform-origin: center center;
  transition: transform var(--motion, 160ms);
  background: #fff;
}
.vollbild-buehne .blatt img {
  width: 100%;
  height: 100%;
  display: block;
}
.vollbild-fuss {
  background: rgba(15, 23, 42, .96);
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .82);
  padding: 7px 16px;
  font-size: .78rem;
  min-height: 34px;
}
.vollbild-fuss b { color: #fff; }
.vollbild-fuss .fuss-quelle { color: rgba(255, 255, 255, .55); }
.vollbild-fuss .warnung { color: #fbbf24; }
.vollbild-fuss .badge { background: rgba(251, 191, 36, .18); color: #fbbf24; }
.vollbild-fuss .fund-schalter {
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .3);
}
.vollbild-fuss .fund-schalter:hover { background: rgba(255, 255, 255, .28); }

@media (prefers-reduced-motion: reduce) {
  .marken .marke.zeile.aktiv, .marken .marke.verwendung.aktiv { animation: none; }
  .vollbild-buehne .blatt { transition: none; }
}