/**
 * WZIG Presto Jumpmarks — Transkript-Styling.
 *
 * Diese Datei stylt das <details class="hw-transcript">-Element,
 * das vom Plugin nach (oder oben in) dem Video eingefügt wird.
 *
 * Du kannst diese Datei jederzeit anpassen — Änderungen wirken sofort
 * (Browser-Cache ggf. leeren).
 */

.hw-transcript {
  /* Links 40px einrücken, damit das Element optisch unter dem Video sitzt
     (Video hat einen kleinen Innenrand, das Transkript sonst dahinter raus). */
  margin: 1.5em 0 1.5em 40px;
  font-size: 0.85em;
  color: #555;
}
.hw-transcript > summary {
  cursor: pointer;
  list-style: none;
  display: inline-block;
  font-size: 0.85em;
  color: #888;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hw-transcript > summary::-webkit-details-marker { display: none; }
.hw-transcript > summary::marker { content: ""; }
.hw-transcript[open] > summary {
  margin-bottom: 1em;
}
.hw-transcript__content {
  font-size: 0.95em;
  color: #333;
  line-height: 1.6;
  border-left: 2px solid #e0e0e0;
  padding-left: 1.2em;
  margin-top: 0.8em;
}
.hw-transcript__content p {
  margin: 0.7em 0;
}

/* ----------------------------------------------------------------
   Hervorhebung von Software-Befehlen (Menüs, Schaltflächen,
   Kontrollkästchen, Tastaturkürzel) im Transkript.
   Das LLM wickelt diese in <span class="hw-cmd">…</span>.
   Hier ist Holgers Default-Stil: fett + kursiv, leicht abgesetzt.
   Beliebig anpassbar (Farbe, Hintergrund, Schriftschnitt).
   ---------------------------------------------------------------- */
.hw-transcript__content .hw-cmd {
  font-weight: 600;
  font-style: italic; 
  /* Alternative-Beispiele (auskommentiert):
     color: #1a3a5c;
     background: #f0f4f8;
     padding: 0 0.2em;
     border-radius: 2px;
     letter-spacing: 0.01em;
  */
}

/* Auf schmalen Telefonen weniger Einrückung — sonst hat das Transkript
   kaum noch Lesefläche. */
@media (max-width: 600px) {
  .hw-transcript {
    margin-left: 12px;
  }
}