/* Deck-Styling für "Artefakte in Claude" im byte5-Stil.
   Importiert die byte5 Design-Tokens; die Slides sind ansonsten
   vollständig inline gestylt (aus dem Claude-Design-Deck übernommen). */
@import url('byte5.css');

* { box-sizing: border-box; }

deck-stage section {
  font-family: var(--font-text);
  color: var(--b5-blau-dunkel);
  background: var(--b5-weiss);
  overflow: hidden;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/* ── Interaktive Format-Tabelle (Slide 08) ──────────────────────────
   Ersetzt die <sc-if>-Reaktivität des Design-Decks durch reines CSS +
   interactions.js. Die Modal-Backdrops sind standardmäßig versteckt. */
.fmt-modal {
  display: none;
  align-items: center;
  justify-content: center;
}
.fmt-modal.open { display: flex; }

[data-fmt-open] { cursor: pointer; }

/* Quiz im "Interaktive App"-Beispiel */
[data-quiz] { transition: border-color 140ms var(--ease-out, ease); }
[data-quiz]:hover { border-color: var(--accent) !important; }
.qfb[hidden] { display: none; }