/* Kursschicht Businessplanung: Informationsarchitektur der Folien, Deckblatt, eigene SVG-Klassen.
   Ladereihenfolge: styles.css (Framework) -> hdbw-ci.css (CI) -> bp.css (dieser Kurs).
   Regeln für Autoren: AUTHORING.md. */

/* ---------- Präsentation: Raum nutzen ---------- */
/* Inhalt füllt die Höhe der Folie; Visuals wachsen mit, statt oben zu kleben. */
.fbody { display: flex; flex-direction: column; }
.fbody > .lay-stack, .fbody > .lay-split { flex: 1 1 auto; min-height: 0; }
/* "safe center": Wird der Inhalt zu hoch, läuft er nach unten über (und shrinkToFit greift),
   statt oben abgeschnitten zu werden. */
.lay-stack { display: flex; flex-direction: column; justify-content: safe center; gap: 22px; }
.lay-stack .visual { margin-top: 0; }
.lay-stack > .visual { flex: 0 1 auto; }
.lay-split { gap: 48px; }
.fbody .txt p { margin: 0 0 .7em; }
.fbody > .source { margin-top: 8px; }

/* Kursübersicht auf der Titelfolie: Begleitmaterial (E99, immer das letzte Kapitel) nicht anzeigen. */
.f-title .map-ch:last-child:not(.on):not(:first-child) { display: none; }

/* Größere, luftigere Bausteine: lesbar aus der letzten Reihe. */
.v-cards { font-size: 1em; gap: 22px; grid-auto-rows: 1fr; }
.v-cards .card { padding: 26px 28px; border-radius: 14px; }
.stage .lay-stack .v-cards .card { min-height: 190px; }
.handout .v-cards .card { padding: 3mm 4mm; }
.v-cards .card strong { font-size: 1.08em; margin-bottom: 4px; }
.v-cards .card p { font-size: .88em; line-height: 1.4; margin-top: 8px; }
.v-cards .num { width: 34px; height: 34px; font-size: 17px; margin-bottom: 10px; }
.v-steps { font-size: .88em; gap: 26px; }
.v-steps .step { padding: 18px 18px 20px; border-radius: 12px; }
.v-steps .num { width: 32px; height: 32px; font-size: 16px; }
.v-steps small { font-size: .88em; margin-top: 6px; }
.v-compare { font-size: .9em; gap: 22px; }
.v-compare h4 { padding: 12px 18px; }
.v-compare ul { padding: 14px 18px 16px 38px; }
.v-compare li { margin: .35em 0; }
.v-table { font-size: .95em; }
.v-table th { padding: 12px 16px; }
.v-table td { padding: 14px 16px; }
.v-table + .v-note { font-size: .78em; margin-top: 14px; }
.handout .v-table { font-size: 10pt; }
.handout .v-table td, .handout .v-table th { padding: 2mm 3mm; }
.v-quote { font-size: 1.5em; padding: 12px 28px; }
.v-stat .big { font-size: 4.2em; }

/* Übungen mit Arbeitsblatt: links Aufgabe, rechts Visual. shrinkToFit verkleinert nur Schrift,
   SVGs skalieren mit der Breite; deshalb begrenzt die Spalte das Arbeitsblatt. */
.f-activity .fbody:has(> .visual) {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); grid-template-rows: auto auto 1fr;
  column-gap: 40px; align-content: start;
}
.f-activity .fbody:has(> .visual) > :not(.visual) { grid-column: 1; }
.f-activity .fbody:has(> .visual) > .visual { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
.f-activity .fbody:has(> .visual) .task { font-size: .9em; line-height: 1.4; }
.f-activity .fbody:has(> .visual) .task li { margin: .45em 0; }
.f-activity .bp-svg svg { max-height: 480px; }

/* Eigene Bausteine */
.bp-statement { font-size: 1.55em; font-weight: 700; color: var(--navy); line-height: 1.25; }
.bp-statement em { font-style: normal; color: var(--accent-dark); }
.bp-hero { display: grid; grid-template-columns: 1.25fr 1fr; gap: 44px; align-items: center; height: 100%; }
.bp-hero img { width: 100%; border-radius: 14px; display: block; }
.bp-hero .hook { font-size: 1.35em; font-weight: 700; color: var(--navy); line-height: 1.3; }
.bp-hero .hook small { display: block; font-size: .62em; font-weight: 400; color: var(--muted); margin-top: 14px; line-height: 1.45; }
.bp-svg { width: 100%; }
.bp-svg svg { width: 100%; height: auto; display: block; max-height: 470px; }
.lay-split .bp-svg svg { max-height: 500px; }
.bp-legend { font-size: .7em; color: var(--muted); margin-top: 8px; }

/* SVG-Klassen (Farben nur über Klassen, nie über fill="var(..)") */
.bp-svg text { font-family: var(--font); fill: var(--ink); }
.bp-svg .tw { fill: #fff; }
.bp-svg .tn { fill: var(--navy); }
.bp-svg .ta { fill: var(--accent-dark); }
.bp-svg .tm { fill: var(--muted); }
.bp-svg .b { font-weight: 700; }
.bp-svg .fn { fill: var(--navy); } .bp-svg .fb { fill: var(--hdbw-bar); } .bp-svg .fs { fill: var(--sky); }
.bp-svg .fa { fill: var(--accent); } .bp-svg .fo { fill: var(--hdbw-orange); } .bp-svg .fc { fill: var(--hdbw-coral); }
.bp-svg .fw { fill: #fff; } .bp-svg .fl { fill: var(--line); } .bp-svg .fas { fill: var(--accent-soft); }
.bp-svg .sn { stroke: var(--navy); fill: none; } .bp-svg .sb { stroke: var(--hdbw-bar); fill: none; }
.bp-svg .sl { stroke: var(--line); fill: none; } .bp-svg .sa { stroke: var(--accent); fill: none; }
.bp-svg .dash { stroke-dasharray: 6 6; }

/* ---------- Handout ---------- */
.handout .bp-svg svg { max-height: 120mm; }
.handout .bp-hero { grid-template-columns: 1fr 1fr; gap: 6mm; height: auto; }
.handout .bp-hero .hook { font-size: 13pt; }
.handout .bp-statement { font-size: 14pt; }

/* ---------- Deckblatt ---------- */
.h-cover { justify-content: flex-start; padding-top: 42mm; min-height: 252mm; }
.h-cover .inst { font-size: 9.5pt; }
.h-cover h1 { font-size: 34pt; margin: 5mm 0 2mm; }
.h-cover .sub { font-size: 12.5pt; }
.h-cover .sess { background: var(--sky); color: var(--navy); font-size: 17pt; padding: 5mm 7mm; margin: 14mm 0 0; border-radius: 3mm; }
.h-cover .sess:has(+ .day-title) { border-radius: 3mm 3mm 0 0; padding-bottom: 1.5mm; }
.h-cover .day-title { background: var(--sky); color: var(--ink); font-size: 11.5pt; padding: 0 7mm 5mm; margin: 0; border-radius: 0 0 3mm 3mm; }
.h-cover .lect { margin-top: 6mm; font-weight: 600; }
.h-cover .toc { margin-top: 9mm; font-size: 10.5pt; }
.h-cover .toc ol { padding-left: 5mm; }
.h-cover .use { margin-top: 8mm; }
.h-cover .cover-img { margin-top: auto; width: 100%; max-height: 62mm; object-fit: cover; border-radius: 3mm; }

/* ---------- Übersicht ---------- */
.sessions .day-title { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; line-height: 1.3; }

/* Handout-Umbruch: Kopf "Selbstcheck" nie allein am Seitenende, Lösungsschlüssel nicht zerreißen
   (sonst landet die letzte Lösung allein auf einer neuen Seite). */
.h-check > .h-label { break-after: avoid; page-break-after: avoid; }
.h-check > .quiz-h { break-before: avoid; page-break-before: avoid; }
.h-solution.key { break-inside: avoid; page-break-inside: avoid; }

/* Dozentenfassung im Querformat für den zweiten Bildschirm, Drehbuch in eigener Spalte (HDB-63).
   Übernommen aus der PSD-Kurs-App (18.10.2026), dort per <style> in app.js handout(). Hier über eine
   benannte Seite, damit app.js und styles.css unverändert bleiben (Framework wird aus dem Pre-Kurs kopiert). */
@page drehbuch { size: A4 landscape; margin: 11mm 13mm 13mm; }
body.handout.instructor { page: drehbuch; }
body.handout.instructor #app { max-width: 287mm; }
.handout.instructor .h-screen { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 7mm; align-items: start; }
.handout.instructor .h-screen > * { grid-column: 1; }
.handout.instructor .h-screen > .h-notes { grid-column: 2; grid-row: 1 / span 40; margin: 0; font-size: 14pt; line-height: 1.4; }
.handout.instructor .h-block-head + .h-objectives + .h-notes { font-size: 11pt; }
.handout.instructor .h-cover { min-height: 0; padding-top: 12mm; }
.handout.instructor .h-cover .cover-img { display: none; }   /* Cover passt sonst nicht auf eine Querseite (gemessen 194 mm bei 186 mm nutzbar) */