/* styles/slides.css
 * Slide-Baukasten: wiederverwendbare, überlauf-sichere Layout- und Text-Bausteine.
 * Konsumiert Brand-Tokens aus brand-dfk.css. Decks komponieren NUR mit diesen Klassen
 * statt mit Einzel-CSS. Doku + Beispiele: decks/LAYOUT.md.
 */

:root {
  /* Folien-Basis-Schriftgröße. reveal-Default (~42px) ist für kurze Bullet-Folien;
     unsere Storytelling-Folien haben mehr Text → kleinere Basis, damit Inhalt ins
     960×700-Canvas passt und Auto-Fit nur noch selten/leicht eingreift. */
  --pm-base: 24px;

  /* Abstands-Tokens (em → skaliert mit reveal-Canvas) */
  --pm-pad:    1.1em;
  --pm-gap:    0.7em;
  --pm-gap-sm: 0.4em;
  --pm-gap-lg: 1.1em;

  /* Layout-Maße */
  --pm-measure:  620px;  /* lesbare Textbreite */
  --pm-card-min: 150px;  /* Mindestbreite Karte, dann Umbruch */

  /* Typo-Skala (em, fest fürs 960×700-Canvas; KEIN vw) */
  --pm-text-xl: 2.2em;
  --pm-text-lg: 1.3em;
  --pm-text-md: 0.92em;
  --pm-text-sm: 0.74em;
  --pm-text-xs: 0.66em;
}

/* ── Globale Überlauf-Sicherung (nur innerhalb der Bausteine) ─────────── */
.pm-slide, .pm-slide * { box-sizing: border-box; }

/* Text bricht IMMER um statt abzuschneiden (lange deutsche Wörter). */
.pm-slide p, .pm-slide h1, .pm-slide h2, .pm-slide h3,
.pm-slide li, .pm-slide span, .pm-slide div {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* ── pm-slide: Basis-Folie ───────────────────────────────────────────── */
/* reveal erzwingt display:block auf der aktiven Folie und zentriert vertikal
   selbst (center:true) — Flexbox auf der section wäre wirkungslos. Wir setzen
   daher nur eine folientaugliche Schriftgröße, zentrieren horizontal über
   auto-Margins und geben den direkten Kindern vertikalen Rhythmus.
   WICHTIG: Der von presenter.js erzeugte .pm-fit-Wrapper muss volle Breite
   behalten — sonst schrumpft er auf Inhaltsbreite und die (top-center)
   skalierte Folie rutscht aus der Mitte. */
.reveal .slides section.pm-slide {
  font-size: var(--pm-base);
  padding: var(--pm-pad);
  text-align: center;
}
.reveal .slides section.pm-slide > .pm-fit { width: 100%; }
.reveal .slides section.pm-slide > *,
.reveal .slides section.pm-slide > .pm-fit > * {
  margin-left: auto;
  margin-right: auto;
}
.reveal .slides section.pm-slide > * + *,
.reveal .slides section.pm-slide > .pm-fit > * + * {
  margin-top: var(--pm-gap);
}

/* ── pm-stack: gleichmäßiger Vertikal-Rhythmus ───────────────────────── */
.pm-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pm-gap);
  width: 100%;
  max-width: var(--pm-measure);
}
.pm-stack--sm   { gap: var(--pm-gap-sm); }
.pm-stack--wide { max-width: 820px; }

/* ── Text-Bausteine ──────────────────────────────────────────────────── */
.pm-lead {
  font-family: var(--brand-serif);
  font-size: var(--pm-text-lg);
  line-height: 1.45;
  color: var(--brand-navy);
  margin: 0;
  max-width: var(--pm-measure);
}
.pm-body {
  font-family: var(--brand-sans);
  font-size: var(--pm-text-md);
  line-height: 1.5;
  color: var(--brand-muted);
  margin: 0;
  max-width: var(--pm-measure);
}
.pm-caption {
  font-family: var(--brand-sans);
  font-size: var(--pm-text-sm);
  line-height: 1.4;
  color: var(--brand-muted);
  margin: 0;
}
.pm-accent { color: var(--brand-navy); }
.pm-gap    { color: var(--brand-gap); }
.pm-strong { font-weight: bold; }

/* ── pm-cards: überlauf-sichere Karten-Reihe ─────────────────────────── */
.pm-cards {
  display: flex;
  flex-wrap: wrap;            /* bricht um statt zu überlaufen */
  justify-content: center;
  align-items: stretch;      /* gleiche Höhe */
  gap: var(--pm-gap);
  width: 100%;
  max-width: 780px;          /* breit genug für 3 Karten nebeneinander */
}
.pm-cards--wide { max-width: 900px; }

.pm-card {
  flex: 1 1 var(--pm-card-min);
  min-width: 0;              /* DER Fix: Karte schrumpft unter Inhaltsbreite, kein Clip */
  background: #fff;
  border: 1.5px solid var(--brand-accent);
  border-radius: 5px;
  padding: var(--pm-gap);
  display: flex;
  flex-direction: column;
  gap: var(--pm-gap-sm);
  text-align: center;
}
.pm-card--navy { border-color: var(--brand-navy); }

/* „vs."-Trenner zwischen zwei Vergleichskarten (z. B. Arbeitskraft vs. Audi) */
.pm-vs {
  align-self: center;
  flex: 0 0 auto;
  font-family: var(--brand-serif);
  font-size: var(--pm-text-lg);
  color: var(--brand-muted);
}

/* ── pm-two-col ──────────────────────────────────────────────────────── */
.pm-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));  /* minmax(0,..) = Überlauf-Schutz */
  gap: var(--pm-gap-lg);
  width: 100%;
  max-width: 820px;
  align-items: start;
  text-align: left;
}
.pm-two-col > * { min-width: 0; }

/* ── pm-stat: große Kennzahl ─────────────────────────────────────────── */
.pm-stat { display: flex; flex-direction: column; gap: 0.1em; }
.pm-stat__value {
  font-family: var(--brand-serif);
  font-size: var(--pm-text-xl);
  font-weight: bold;
  line-height: 1.05;
  color: var(--brand-navy);
}
.pm-stat__value--gap { color: var(--brand-gap); }
.pm-stat__label {
  font-family: var(--brand-sans);
  font-size: var(--pm-text-sm);
  color: var(--brand-muted);
}

/* In Karten kleinere Kennzahl, damit Werte wie „Ø ~2.000 €" in schmalen Karten
   nicht hässlich umbrechen. Auf reinen pm-stat-Folien (z. B. „jeder 4.") bleibt
   die Kennzahl groß. */
.pm-card .pm-stat__value { font-size: var(--pm-text-lg); line-height: 1.15; }

/* ── pm-quote ────────────────────────────────────────────────────────── */
.pm-quote {
  font-family: var(--brand-serif);
  font-size: var(--pm-text-md);
  font-style: italic;
  color: var(--brand-muted);
  border-left: 3px solid var(--brand-accent);
  padding: 0.4em 0.9em;
  margin: 0;
  max-width: var(--pm-measure);
  text-align: left;
}

/* ── pm-frame: gerahmter Rechner-/Chart-Bereich ──────────────────────── */
.pm-frame {
  background: #fff;
  border: 1.5px solid var(--brand-navy);
  border-radius: 5px;
  padding: var(--pm-gap-lg);
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: var(--pm-gap);
}

/* Steuer-Zeile im Frame: Label/Slider/Wert im FLUSS (kein Überlappen). */
.pm-control {
  display: flex;
  flex-wrap: wrap;           /* bricht um statt zu überlappen */
  align-items: center;
  justify-content: center;
  gap: var(--pm-gap-sm);
  font-family: var(--brand-sans);
  font-size: var(--pm-text-sm);
  color: var(--brand-muted);
}
.pm-control > label { flex: 0 0 auto; }
.pm-control > input[type="range"] {
  flex: 1 1 140px;
  min-width: 0;
  max-width: 200px;
  accent-color: var(--brand-navy);
}
.pm-control__value {
  flex: 0 0 auto;
  min-width: 4em;
  text-align: right;
  color: var(--brand-navy);
  font-weight: bold;
}

/* ── pm-toggle: Status-Umschalter (Buttons) ──────────────────────────── */
.pm-toggle {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--pm-gap-sm);
}
.pm-toggle button {
  font-family: var(--brand-sans);
  font-size: var(--pm-text-sm);
  padding: 0.4em 1em;
  border: 1.5px solid var(--brand-accent);
  border-radius: 3px;
  background: transparent;
  color: var(--brand-navy);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.pm-toggle button.is-active,
.pm-toggle button:hover { background: var(--brand-accent); color: #fff; }

/* ── Touch-Geräte: größere Tap-Targets & Bedienelemente ──────────────────── */
@media (pointer: coarse) {
  .pm-card.zg-btn,
  .pm-card.pp-btn,
  .pm-card.tarif-btn { min-height: 48px; }
  .reveal input[type="range"] { height: 28px; }
}

/* ── Sprecher-Notizen: nie auf der Folie sichtbar (nur Skript/Speaker-View) ── */
.reveal aside.notes { display: none; }

/* ── merkmal-liste: reveal-Theme (.reveal ul{list-style:disc}) hat höhere
   Spezifität als die Deck-eigene .merkmal-liste{list-style:none} → sonst
   erscheint ein doppelter Marker (• zusätzlich zum ✓). Hier überschreiben. ── */
.reveal ul.merkmal-liste { list-style: none; }

/* ── kosten-band: Kosten-Stats als zusammenhängendes Band (Icon + Zahl + Label),
   statt drei loser Karten. Zahlen in Kosten-Rot, Icons ruhig. ── */
.kosten-band {
  display: flex;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  background: #F4EEEE;
  border-radius: 12px;
  padding: 1rem 0.4rem;
}
.kosten-band__item {
  flex: 1;
  min-width: 0;
  padding: 0 0.7rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  text-align: center;
}
.kosten-band__item + .kosten-band__item { border-left: 1px solid #E3D5D5; }
.kosten-band__item svg { width: 26px; height: 26px; color: #8A7A7A; }
.kosten-band__v {
  font-family: var(--brand-serif);
  font-size: 1.5em;
  font-weight: bold;
  line-height: 1.05;
  color: var(--brand-gap);
}
.kosten-band__l {
  font-family: var(--brand-sans);
  font-size: 0.64em;
  line-height: 1.35;
  color: var(--brand-muted);
}