/* ═══════════════════════════════════════════════════════════════════════
   ShapeFactor® Vollanalyse – Print Stylesheet v2
   Professionelle Druckausgabe · Weiß · Tintensparsam · Sauber
   ═══════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────
   1. PAGE SETUP
   ────────────────────────────────────────────────────────────────────── */
@page {
    size: A4 portrait;
    margin: 18mm 15mm 20mm 15mm;
}

* {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
}


/* ──────────────────────────────────────────────────────────────────────
   2. HIDE SCREEN-ONLY ELEMENTS
   ────────────────────────────────────────────────────────────────────── */

/* Hero section (full-screen intro) */
body > section.no-print:first-of-type,
section.no-print.min-h-screen {
    display: none !important;
}

/* Fixed UI: header, nav, footer, progress bar */
header, footer, nav,
.progress-bar, #progressBar,
.fixed:not(section),
.sticky {
    display: none !important;
}

/* Buttons, CTAs, interactive-only */
button, .mode-btn,
a[href="#kap7"] {
    display: none !important;
}

/* Selective no-print: hide element but not section wrappers */
.no-print:not(section):not([id^="kap"]) {
    display: none !important;
}

/* Decorative blobs */
.blob, .blob-1, .blob-2, .blob-3, .blob-4,
body > .fixed.inset-0 {
    display: none !important;
}

/* Kapitel 7 (CTA/Sales) — komplett ausblenden */
#kap7 {
    display: none !important;
}

/* ALL decorative background image overlays */
section > .absolute.inset-0,
#kap1 > .no-print.absolute.inset-0,
#kap2 > .absolute.inset-0,
#kap3 > .absolute.inset-0,
#kap5 > div > .absolute {
    display: none !important;
}

/* Backdrop filters (sinnlos im Druck) */
[class*="backdrop-blur"] {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Large decorative chapter numbers (01, 02, 03…) */
span[class*="text-8xl"][class*="font-display"],
span[class*="text-9xl"][class*="font-display"] {
    display: none !important;
}

/* Decorative divider lines */
.w-24.h-1 {
    display: none !important;
}

/* Decorative small dividers inside step cards */
.h-0\.5.w-10 {
    display: none !important;
}


/* ──────────────────────────────────────────────────────────────────────
   3. BODY & BASE TYPOGRAPHY
   ────────────────────────────────────────────────────────────────────── */
body {
    background: white !important;
    color: #0F1720 !important;
    font-size: 10.5pt !important;
    line-height: 1.55 !important;
    font-family: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: none !important;
}

h1 { font-size: 24pt !important; line-height: 1.2 !important; color: #163A47 !important; }
h2 { font-size: 20pt !important; line-height: 1.25 !important; color: #111827 !important; margin-top: 0 !important; margin-bottom: 4mm !important; break-after: avoid !important; }
h3 { font-size: 13pt !important; line-height: 1.3 !important; color: #163A47 !important; break-after: avoid !important; }
h4 { font-size: 11.5pt !important; line-height: 1.35 !important; color: #163A47 !important; break-after: avoid !important; }
p, li { color: #333 !important; orphans: 3; widows: 3; }

a { color: inherit !important; text-decoration: none !important; }


/* ──────────────────────────────────────────────────────────────────────
   4. GLOBAL LAYOUT RESETS
   ────────────────────────────────────────────────────────────────────── */

/* Animations → sofort sichtbar */
.reveal, .reveal.active {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

.min-h-screen { min-height: 0 !important; }
.fixed { position: static !important; }

/* Details: aufgeklappt, summary versteckt */
details { display: block !important; }
details[open] summary ~ * { display: block !important; }
details summary { display: none !important; }

/* Hover-Effekte entfernen */
.glow-card, .glow-card:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Container max-widths entfernen */
.max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl, .max-w-3xl {
    max-width: 100% !important;
}

/* Shadows entfernen */
.shadow-sm, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl, .shadow-3xl,
[class*="ring-"] {
    box-shadow: none !important;
}


/* ──────────────────────────────────────────────────────────────────────
   5. SPACING — Screen→Print
   ────────────────────────────────────────────────────────────────────── */
section[id^="kap"] {
    display: block !important;
    position: relative !important;
    overflow: visible !important;
    /* Einheitlicher Seitenaufbau: oben immer erst Header, dann Inhalt */
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* Einheitliches Kapitel-Innenlayout: Der eigentliche Content bekommt Top-Padding */
section[id^="kap"] > div {
    padding-top: 6mm !important;
}

.py-32, .py-24, .py-20 { padding-top: 5mm !important; padding-bottom: 5mm !important; }
.px-10, .px-8, .px-6 { padding-left: 0 !important; padding-right: 0 !important; }
.pt-16 { padding-top: 3mm !important; }
.pb-16 { padding-bottom: 3mm !important; }

.mb-32 { margin-bottom: 5mm !important; }
.mb-24 { margin-bottom: 4mm !important; }
.mb-20, .mb-16 { margin-bottom: 3.5mm !important; }
.mb-12, .mb-10 { margin-bottom: 3mm !important; }
.mb-8, .mb-6 { margin-bottom: 2mm !important; }

.mt-14, .mt-12 { margin-top: 4mm !important; }
.mt-10, .mt-8 { margin-top: 3mm !important; }

.gap-16 { gap: 4mm !important; }
.gap-8 { gap: 3mm !important; }
.gap-6 { gap: 2.5mm !important; }
.gap-5 { gap: 2mm !important; }
.gap-4 { gap: 2mm !important; }
.gap-3 { gap: 1.5mm !important; }

.space-y-10 > * + *, .space-y-12 > * + * { margin-top: 3mm !important; }
.space-y-6 > * + * { margin-top: 2mm !important; }
.space-y-5 > * + * { margin-top: 2mm !important; }
.space-y-8 > * + * { margin-top: 2.5mm !important; }


/* ──────────────────────────────────────────────────────────────────────
   6. PAGE BREAKS
   ────────────────────────────────────────────────────────────────────── */
#kap1 { break-before: auto !important; }
#kap2 { break-before: page !important; }
#kap3 { break-before: page !important; }
#kap4 { break-before: page !important; }
#kap5 { break-before: page !important; }
#kap6 { break-before: page !important; }

.break-inside-avoid,
article {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
}


/* ──────────────────────────────────────────────────────────────────────
   7. FARBEN — Alles hell / weiß (kein dunkler Druck)
   ────────────────────────────────────────────────────────────────────── */

/* Dunkle Hintergründe → weiß */
.bg-brand, [class*="bg-brand"],
.bg-cream, [class*="bg-cream"],
[class*="bg-white/"] {
    background: white !important;
}

/* Alle text-white → dunkel */
.text-white, [class*="text-white"] {
    color: #0F1720 !important;
}

#kap1, #kap5 {
    background: white !important;
    color: #0F1720 !important;
}

/* Universaler Color-Fix für ehemals dunkle Sektionen */
#kap1 h2, #kap1 h3, #kap1 h4, #kap1 p, #kap1 span, #kap1 strong, #kap1 li,
#kap5 h2, #kap5 h3, #kap5 h4, #kap5 p, #kap5 span, #kap5 strong, #kap5 li, #kap5 em {
    color: #0F1720 !important;
}

/* ─── STIL-AKZENTFARBEN BEWAHREN ─── */
.text-driver { color: #e63946 !important; }
.text-planner { color: #457b9d !important; }
.text-connector { color: #2a9d8f !important; }
.text-innovator { color: #e9c46a !important; }
.text-brand { color: #2A647A !important; }
.text-green-700 { color: #15803d !important; }
.text-red-700 { color: #b91c1c !important; }

/* Auch innerhalb kap5 (hohe Spezifität) */
#kap5 .text-connector, #kap5 .font-semibold.text-connector { color: #2a9d8f !important; }
#kap5 .text-driver, #kap5 .font-semibold.text-driver { color: #e63946 !important; }
#kap5 .text-innovator { color: #e9c46a !important; }
#kap5 .text-planner { color: #457b9d !important; }

/* Hintergründe Stil-Akzente */
.bg-driver-light, .bg-driver-light\/50 { background: #fef2f2 !important; }
.bg-planner-light, .bg-planner-light\/50 { background: #f0f9ff !important; }
.bg-connector-light, .bg-connector-light\/50 { background: #f0fdf4 !important; }
.bg-innovator-light, .bg-innovator-light\/50 { background: #fefce8 !important; }

.bg-driver { background-color: #e63946 !important; }
.bg-planner { background-color: #457b9d !important; }
.bg-connector { background-color: #2a9d8f !important; }
.bg-innovator { background-color: #e9c46a !important; }

.border-driver { border-color: #e63946 !important; }
.border-planner { border-color: #457b9d !important; }
.border-connector { border-color: #2a9d8f !important; }
.border-innovator { border-color: #e9c46a !important; }

.bg-green-50 { background: #f0fdf4 !important; }
.bg-red-50 { background: #fef2f2 !important; }
.bg-gray-50 { background: #f9fafb !important; }

/* Grautöne */
.text-gray-400 { color: #9ca3af !important; }
.text-gray-500 { color: #6b7280 !important; }
.text-gray-600 { color: #4b5563 !important; }
.text-gray-700 { color: #374151 !important; }
.text-gray-800 { color: #1f2937 !important; }

/* Transparente Boxen in kap1/kap5 → hellgrau */
#kap1 [class*="bg-white/5"],
#kap1 [class*="bg-white/10"],
#kap5 [class*="bg-white/5"],
#kap5 [class*="bg-white/10"] {
    background: #f5f5f5 !important;
    border: 1px solid #e0e0e0 !important;
}

/* Farbige Boxen in kap5 */
#kap5 [class*="bg-planner/20"] { background: #f0f9ff !important; border: 1px solid #457b9d50 !important; }
#kap5 [class*="bg-innovator/20"] { background: #fefce8 !important; border: 1px solid #e9c46a50 !important; }
#kap5 [class*="bg-connector/20"] { background: #f0fdf4 !important; border: 1px solid #2a9d8f50 !important; }
#kap5 [class*="bg-driver/20"] { background: #fef2f2 !important; border: 1px solid #e6394650 !important; }

/* kap5 white borders → grau */
#kap5 [class*="border-white"] { border-color: #e0e0e0 !important; }


/* ──────────────────────────────────────────────────────────────────────
   8. ROUNDED CORNERS — druckfreundlich
   ────────────────────────────────────────────────────────────────────── */
.rounded-3xl { border-radius: 3mm !important; }
.rounded-2xl { border-radius: 2mm !important; }
.rounded-xl { border-radius: 1.5mm !important; }
.rounded-\[2rem\] { border-radius: 2mm !important; }


/* ══════════════════════════════════════════════════════════════════════
   KAPITEL-SPEZIFISCHE REGELN
   ══════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────
   9. KAPITEL 1 — Einleitung (hell)
   ────────────────────────────────────────────────────────────────────── */

/* Step-Card Icons (absolute über Karten) → verstecken */
#kap1 .grid.md\:grid-cols-3 .absolute.-top-6 {
    display: none !important;
}

/* Step-Karten hellgrau */
#kap1 .grid.md\:grid-cols-3 .break-inside-avoid[class*="bg-white"] {
    background: #f7f7f7 !important;
    border: 1px solid #e5e7eb !important;
    padding: 4mm !important;
    padding-top: 4mm !important;
}

/* Profil & Features 2-Spalten */
#kap1 .grid.lg\:grid-cols-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4mm !important;
    align-items: start !important;
}

/* "Was dich erwartet" Karte */
#kap1 .break-inside-avoid[class*="backdrop-blur"] {
    background: #f5f5f5 !important;
    border: 1px solid #e5e7eb !important;
    padding: 4mm !important;
}

/* Checkmark-Kreise */
#kap1 .w-10.h-10.rounded-full[class*="bg-white"] {
    background: #eee !important;
}
#kap1 .w-10.h-10.rounded-full svg { color: #1a1a2e !important; }

/* Stil-Badges */
#kap1 .rounded-full[class*="text-driver-light"],
#kap1 .rounded-full[class*="text-planner-light"],
#kap1 .rounded-full[class*="text-connector-light"],
#kap1 .rounded-full[class*="text-innovator-light"] {
    color: #1a1a2e !important;
    border-color: #ccc !important;
    background: #f0f0f0 !important;
}

/* "Dein Profil im Fokus" → neue Seite */
#kap1 .grid.lg\:grid-cols-2.items-center {
    break-before: page !important;
}

/* Benefits 4-Spalten */
#kap1 .grid.sm\:grid-cols-2.lg\:grid-cols-4 {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
}

#kap1 .grid.sm\:grid-cols-2.lg\:grid-cols-4 > div {
    background: #f7f7f7 !important;
    border: 1px solid #e5e7eb !important;
}

/* Icons → dunkel */
#kap1 .w-12.h-12 svg { color: #1a1a2e !important; }

/* Border divider */
#kap1 .border-t { border-color: #e5e7eb !important; }


/* ──────────────────────────────────────────────────────────────────────
   10. KAPITEL 2 — Methodik
   ────────────────────────────────────────────────────────────────────── */

/* Journey line & Numbers */
#kap2 .hidden.md\:block.absolute,
#kap2 .hidden.md\:flex.absolute,
#kap2 .hidden.sm\:flex {
    display: none !important;
}

/* Checkpoints → kein padding-left mehr */
#kap2 .md\:pl-20 { padding-left: 0 !important; }

/* Cards */
#kap2 [class*="bg-white/80"] {
    background: #fafafa !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: none !important;
    padding: 4mm !important;
    break-inside: avoid !important;
}


/* ──────────────────────────────────────────────────────────────────────
   11. KAPITEL 3 — Die 4 Verhaltensstile
   ────────────────────────────────────────────────────────────────────── */

/* Grid → Einspaltig */
#kap3 > .relative > .grid {
    display: block !important;
}

/* ─── GLOW-CARDS: KEINE Borders, fließender Text ─── */
#kap3 .glow-card {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    margin-bottom: 4mm !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
}

/* Seitenumbruch VOR jeder Stil-Karte außer erster */
#kap3 > .relative > .grid > .reveal:nth-child(n+2) .glow-card {
    break-before: page !important;
}

/* ─── BILD HEADER → Bild weg, Name sichtbar ─── */

/* Bild komplett ausblenden */
#kap3 .glow-card > .relative img {
    display: none !important;
}

/* Gradient-Overlay ausblenden */
#kap3 .glow-card > .relative > .absolute.inset-0 {
    display: none !important;
}

/* Image-Container: auto-height, kein overflow */
#kap3 .glow-card > .relative {
    position: relative !important;
    height: auto !important;
    overflow: visible !important;
    background: transparent !important;
    padding: 0 0 3mm 0 !important;
    margin-bottom: 2mm !important;
}

/* Name-Block (war absolute bottom) → statisch sichtbar */
#kap3 .glow-card > .relative > .absolute {
    position: static !important;
    display: block !important;
    padding: 0 !important;
}

/* Stil-Icon-Box neben Name → ausblenden */
#kap3 .glow-card > .relative .w-16.h-16 {
    display: none !important;
}

/* Name (DRIVER, PLANNER etc.) → groß, als Überschrift */
#kap3 .glow-card > .relative h3 {
    font-size: 20pt !important;
    font-weight: 700 !important;
    margin-bottom: 1mm !important;
    line-height: 1.2 !important;
}

/* Untertitel (Der Antreiber etc.) */
#kap3 .glow-card > .relative p[class*="text-white"],
#kap3 .glow-card > .relative p {
    color: #6b7280 !important;
    font-size: 11pt !important;
}

/* ─── Farbiger linker Akzent-Balken pro Stil ─── */
#kap3 .reveal:nth-child(1) .glow-card > .relative {
    border-left: 5px solid #e63946 !important;
    padding-left: 4mm !important;
}
#kap3 .reveal:nth-child(1) .glow-card > .relative h3 { color: #e63946 !important; }

#kap3 .reveal:nth-child(2) .glow-card > .relative {
    border-left: 5px solid #457b9d !important;
    padding-left: 4mm !important;
}
#kap3 .reveal:nth-child(2) .glow-card > .relative h3 { color: #457b9d !important; }

#kap3 .reveal:nth-child(3) .glow-card > .relative {
    border-left: 5px solid #2a9d8f !important;
    padding-left: 4mm !important;
}
#kap3 .reveal:nth-child(3) .glow-card > .relative h3 { color: #2a9d8f !important; }

#kap3 .reveal:nth-child(4) .glow-card > .relative {
    border-left: 5px solid #e9c46a !important;
    padding-left: 4mm !important;
}
#kap3 .reveal:nth-child(4) .glow-card > .relative h3 { color: #e9c46a !important; }

/* ─── Card Body: keine extra-Padding ─── */
#kap3 .glow-card > .p-8,
#kap3 .glow-card > [class*="p-8"],
#kap3 .glow-card > [class*="p-10"],
#kap3 .glow-card > div:last-child {
    padding: 0 !important;
}

/* Innere Grids (Verhaltensfokus / Typisches Verhalten) */
#kap3 .glow-card .grid.md\:grid-cols-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2.5mm !important;
}

/* Stärken/Risiko */
#kap3 .bg-green-50, #kap3 .bg-red-50 {
    padding: 3mm !important;
}

/* Vorstellungstext */
#kap3 .bg-gray-50 {
    padding: 3mm !important;
    margin-bottom: 2mm !important;
}

/* Details */
#kap3 details {
    break-inside: avoid !important;
    margin-bottom: 2mm !important;
}
#kap3 details > div {
    margin-top: 1mm !important;
    padding: 3mm !important;
}

/* Tipp-Box */
#kap3 .flex.items-start.gap-4[class*="border"] {
    padding: 3mm !important;
    break-inside: avoid !important;
    margin-top: 2mm !important;
}


/* ──────────────────────────────────────────────────────────────────────
   12. KAPITEL 4 — Dashboard & Charts
   ────────────────────────────────────────────────────────────────────── */

/* Haupt-Karte */
#kap4 > div > .reveal > .bg-white {
    border: none !important;
    box-shadow: none !important;
    padding: 2mm 0 !important;
}

/* Mode Toggle */
#kap4 .sticky { display: none !important; }

/* ─── "Deine Auswertung auf einen Blick" ───
   WICHTIG: Kein globaler Seitenumbruch auf .mt-8, sonst landet der komplette Block ohne Überschrift auf der nächsten Seite.
*/
#kap4 > div > .reveal > .bg-white.rounded-3xl {
    break-inside: auto !important;
    page-break-inside: auto !important;
}

/* ─── resultsApp Karten ausblenden (Duplikat von evaluationRow) ─── */
#resultsApp {
    display: none !important;
}

/* ─── Jede Chart-Sektion auf eigener Seite ─── */

/* Pie Chart (360°) → eigene Seite */
#kap4 .grid.grid-cols-1.lg\:grid-cols-2 {
    display: block !important;
}

#kap4 .grid.grid-cols-1.lg\:grid-cols-2 > div:first-child {
    break-before: page !important;
    break-inside: avoid !important;
}

/* Gauges → eigene Seite */
#kap4 .grid.grid-cols-1.lg\:grid-cols-2 > div:last-child {
    break-before: page !important;
    break-inside: avoid !important;
}

/* Before/After Chart → eigene Seite */
#beforeAfter {
    break-before: page !important;
}

/* Container um beforeAfter */
#kap4 .space-y-6 > .bg-white.rounded-xl:nth-child(n+3) {
    break-before: page !important;
}

/* Overview Table → eigene Seite */
#overviewTableSection {
    break-before: page !important;
    break-inside: avoid !important;
}

/* ECharts Container */
#pieAngle { height: 450px !important; break-inside: avoid !important; }
#beforeAfter { height: 300px !important; break-inside: avoid !important; }
#g_driver, #g_planner, #g_connector, #g_innovator { height: 180px !important; break-inside: avoid !important; }
canvas { max-width: 100% !important; break-inside: avoid !important; }

/* Chart-Karten */
#kap4 .bg-white.rounded-xl {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 3mm !important;
}

#kap4 .bg-slate-50\/50 { background: #f8fafc !important; }

/* Gauges 2x2 Grid beibehalten */
#kap4 .grid.grid-cols-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
}

/* ─── evaluationRow: Kreis-Chart unter der Karte ─── */

/* WICHTIG: Karten im Druck nicht splitten, keine Linien, keine Gradient-Overlays */
#kap4 #evaluationRow > div {
    break-inside: avoid !important;
    page-break-inside: avoid !important;

    margin: 0 0 10mm 0 !important;

    border: none !important;
    box-shadow: none !important;
    outline: none !important;

    /* inline radial-gradient killen */
    background: white !important;
    background-image: none !important;

    /* linke Farbleiste aus dem JS entfernen */
    border-left: none !important;

    overflow: visible !important;
}

/* Hard-Reset: dünne Rahmenlinien in Kap4 komplett entfernen (außer Tabellen) */
#kap4 * {
    border-color: transparent !important;
}
#kap4 table, #kap4 th, #kap4 td {
    border-color: #e5e7eb !important;
}

/* Grid stapeln */
#kap4 #evaluationRow .grid.grid-cols-1 {
    display: block !important;
}

/* Text-Spalte zuerst */
#kap4 #evaluationRow [class*="lg:col-span-8"],
#kap4 #evaluationRow [class*="col-span-8"] {
    width: 100% !important;
    padding: 3mm 0 !important;
}

/* Chart-Spalte darunter: zentrieren + keine border-l */
#kap4 #evaluationRow [class*="lg:col-span-4"],
#kap4 #evaluationRow [class*="col-span-4"] {
    width: 100% !important;
    padding: 4mm 0 0 0 !important;

    border: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Chart-Container: im HTML h-[220px] → im Druck kleiner und stabil */
#kap4 #evaluationRow div[id^="chart_eval_"] {
    width: 48mm !important;
    height: 48mm !important;
    max-width: 48mm !important;
    max-height: 48mm !important;
    margin: 0 auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#kap4 #evaluationRow div[id^="chart_eval_"] canvas,
#kap4 #evaluationRow div[id^="chart_eval_"] svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

/* ─── globalSummarySection: Konsistentes Layout ─── */
#globalSummarySection {
    break-inside: avoid !important;
    border: none !important;
    box-shadow: none !important;
    background: white !important;
    padding: 0 0 4mm 0 !important;
    margin-bottom: 4mm !important;
    border-radius: 0 !important;
}

/* Zusammenfassung h3 → zentriert, wie andere Kapitel-Überschriften */
#globalSummarySection h3 {
    text-align: center !important;
    font-size: 16pt !important;
    margin-bottom: 4mm !important;
}
#globalSummarySection .flex.items-center.gap-3 {
    justify-content: center !important;
}

/* Fließtext */
#globalSummarySection .space-y-6 {
    text-align: justify !important;
}

/* Detaillierte Stil-Dynamik h4 → zentriert */
#globalSummarySection h4 {
    text-align: center !important;
    margin-bottom: 3mm !important;
}

/* Border-top vor Detaillierter Analyse */
#globalSummarySection .border-t {
    border-color: #e5e7eb !important;
    padding-top: 4mm !important;
}

/* 4-Karten Grid beibehalten */
#globalSummarySection .grid.md\:grid-cols-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 3mm !important;
}

/* Einzelne Stil-Karten in Zusammenfassung */
#globalSummarySection .bg-slate-50\/50,
#globalSummarySection [class*="bg-slate-50"] {
    background: #fafafa !important;
    border: 1px solid #e5e7eb !important;
    break-inside: avoid !important;
    padding: 3mm !important;
}

/* Table */
#overviewTableSection { break-inside: avoid !important; }
#overviewTableSection table { width: 100% !important; border-collapse: collapse !important; font-size: 9pt !important; }
#overviewTableSection th, #overviewTableSection td { padding: 1.5mm 2mm !important; border: 1px solid #e5e7eb !important; }


/* ──────────────────────────────────────────────────────────────────────
   13. KAPITEL 5 — Wichtige Informationen (hell)
   ────────────────────────────────────────────────────────────────────── */

/* ─── Reihenfolge umstellen: 5.5 nach oben holen (vor Seitenumbruch) ─── */
/* Flexbox statt Grid → besserer Support für break-before in Flex-Contexten */
#kap5 > div > .relative {
    display: flex !important;
    flex-direction: column !important;
}

/* Header (kein --i) */
#kap5 > div > .relative > .text-center.mb-16 {
    order: 1 !important;
}
/* Intro + Wichtiger Hinweis */
#kap5 .reveal[style*="--i:1"] { order: 2 !important; }
/* Der entscheidende Punkt */
#kap5 .reveal[style*="--i:2"] { order: 3 !important; }
/* 5.5 Wofür nutzen → hierher hochgezogen */
#kap5 .reveal[style*="--i:8"] { order: 4 !important; }
/* 5.1 Absicht und Verhalten (Seitenumbruch) */
#kap5 .reveal[style*="--i:3"] { order: 5 !important; }
/* 5.2 Im Alltag und unter Druck */
#kap5 .reveal[style*="--i:4"] { order: 6 !important; }
/* 5.3 Die Punkteskala */
#kap5 .reveal[style*="--i:5"] { order: 7 !important; }
/* 5.4 Die Bedeutung der Differenz */
#kap5 .reveal[style*="--i:6"] { order: 8 !important; }

/* "Der entscheidende Punkt" Badge — zentriert, nicht abgeschnitten */
#kap5 .reveal[style*="--i:2"] .relative {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

#kap5 .reveal[style*="--i:2"] .absolute.top-0 {
    position: static !important;
    display: block !important;
    transform: none !important;
    left: auto !important;
    text-align: center !important;
    margin: 0 auto 3mm auto !important;
    width: fit-content !important;
    background: #1a1a2e !important;
    border-color: #1a1a2e !important;
    border-radius: 20px !important;
    padding: 1.5mm 4mm !important;
}
#kap5 .reveal[style*="--i:2"] .absolute.top-0 span {
    color: white !important;
}

/* Abstand über "Der entscheidende Punkt" Box reduzieren */
#kap5 .reveal[style*="--i:2"] > .relative {
    margin-top: 0 !important;
}
#kap5 .reveal[style*="--i:2"] > .relative > .pt-4,
#kap5 .reveal[style*="--i:2"] > .relative > p[class*="pt-4"] {
    padding-top: 0 !important;
}

/* "5.1 Absicht und Verhalten" → neue Seite */
#kap5 .reveal[style*="--i:3"] {
    break-before: page !important;
}

/* Scale boxes */
#kap5 .grid.grid-cols-5 > div {
    break-inside: avoid !important;
    border: 1px solid #e5e7eb !important;
    background: white !important;
}

/* Ideal-Box Akzent */
#kap5 .grid.grid-cols-5 > div:nth-child(3) {
    border: 2px solid #2a9d8f !important;
    background: #f0fdf4 !important;
}

/* Scale bar Gradient: weißer Hintergrund, also sichtbar machen */
#kap5 .h-3.rounded-full {
    break-inside: avoid !important;
}
#kap5 .h-3.rounded-full > div {
    background: linear-gradient(to right, #e5e7eb, #2a9d8f, #e63946) !important;
}
#kap5 .h-3.rounded-full.bg-white\/10,
#kap5 .rounded-full[class*="bg-white/10"] {
    background: #f0f0f0 !important;
}

/* Differenz-Karten */
#kap5 .grid.sm\:grid-cols-4 > div {
    border: 1px solid #e5e7eb !important;
    background: white !important;
}

/* Wofür-nutzen Karten */
#kap5 .grid.sm\:grid-cols-2 [class*="bg-white/10"] {
    background: #f5f5f5 !important;
    border: 1px solid #e5e7eb !important;
}


/* ──────────────────────────────────────────────────────────────────────
   14. KAPITEL 6 — Push & Pull
   ────────────────────────────────────────────────────────────────────── */

/* "Warum Push und Pull für deine Entwicklung…" → neue Seite */
#kap6 > div > .reveal[style*="--i:2"] {
    break-before: page !important;
}

#kap6 .grid.md\:grid-cols-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 3mm !important;
}

#kap6 .bg-white.rounded-3xl {
    break-inside: avoid !important;
    box-shadow: none !important;
    border: 1px solid #e5e7eb !important;
}

/* Top Farbbalken */
#kap6 .absolute.top-0.left-0.w-full.h-1 { height: 3px !important; }

/* Warum-wichtig Box */
#kap6 [class*="from-planner-light"] {
    background: #f8fafc !important;
    border: 1px solid #e5e7eb !important;
}


/* ──────────────────────────────────────────────────────────────────────
   15. GRIDS — Generisch beibehalten
   ────────────────────────────────────────────────────────────────────── */
.grid { display: grid !important; }

/* Ausnahme: kap3 Hauptgrid */
#kap3 > .relative > .grid.md\:grid-cols-2 { display: block !important; }

.grid.md\:grid-cols-2:not(#kap3 > .relative > .grid) { grid-template-columns: 1fr 1fr !important; }
.grid.md\:grid-cols-3 { grid-template-columns: 1fr 1fr 1fr !important; }
.grid.sm\:grid-cols-2 { grid-template-columns: 1fr 1fr !important; }
.grid.sm\:grid-cols-3 { grid-template-columns: 1fr 1fr 1fr !important; }
.grid.sm\:grid-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }
.grid.grid-cols-5 { grid-template-columns: repeat(5, 1fr) !important; }
.grid.lg\:grid-cols-2 { grid-template-columns: 1fr 1fr !important; }
.grid.lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }


/* ──────────────────────────────────────────────────────────────────────
   16. IMAGES & SVGs
   ────────────────────────────────────────────────────────────────────── */
svg { max-width: 100% !important; }
img { max-width: 100% !important; break-inside: avoid !important; }

/* SVGs in ehemalig dunklen Sektionen */
#kap1 svg, #kap5 svg { color: #1a1a2e !important; }

/* Stil-spezifische Icon-Farben bewahren */
.text-driver svg { color: #e63946 !important; }
.text-planner svg { color: #457b9d !important; }
.text-connector svg { color: #2a9d8f !important; }
.text-innovator svg { color: #e9c46a !important; }


/* ──────────────────────────────────────────────────────────────────────
   17. CLEANUP
   ────────────────────────────────────────────────────────────────────── */
body::after { content: none !important; }
section, .container { overflow: visible !important; }