/* ════════════════════════════════════════════════════════════════════
KI STRATEGIUM — Master Print Stylesheet (v1.0)
Verbindlich fuer alle 22 Tools (Schnupper + Vollversion)
Target: Chrome/Edge >= 100, Safari modern, Firefox
Einbindung:
Tool-Name am Body:
════════════════════════════════════════════════════════════════════ */
/* ─── @page: A4 mit Margins und Header/Footer-Streifen ─────────────── */
@page {
size: A4;
margin: 22mm 16mm 22mm 16mm;
@top-left {
content: attr(data-tool);
font: 600 8.5pt 'Inter', system-ui, -apple-system, sans-serif;
color: #4a4a5e;
padding-bottom: 3mm;
border-bottom: 0.4pt solid #d1d5db;
vertical-align: bottom;
}
@top-right {
content: "KI STRATEGIUM";
font: 700 8.5pt 'Inter', system-ui, -apple-system, sans-serif;
color: #E8007D;
letter-spacing: 0.05em;
padding-bottom: 3mm;
border-bottom: 0.4pt solid #d1d5db;
vertical-align: bottom;
}
@bottom-left {
content: "© KI STRATEGIUM · Thomas Schwittlich";
font: 7.5pt 'Inter', system-ui, -apple-system, sans-serif;
color: #9CA3AF;
padding-top: 3mm;
vertical-align: top;
}
@bottom-right {
content: "Seite " counter(page) " / " counter(pages);
font: 7.5pt 'Inter', system-ui, -apple-system, sans-serif;
color: #4a4a5e;
padding-top: 3mm;
vertical-align: top;
}
}
/* ─── Globale Druck-Norm ──────────────────────────────────────────
Hinweis: KEIN @media-print Wrapper. Die Datei wird per
eingebunden
und ist damit schon auf Druck beschraenkt. Doppeltes Gatekeeping
verhinderte sonst die Browser-Vorschau (media="all"-Switch zum
Testen) und ist redundant.
─────────────────────────────────────────────────────────────── */
/* ─ Reset: weisses Papier, dunkler Text, keine Vollflaechen ─ */
html, body {
background: #fff !important;
color: #1a1a2e !important;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 10pt;
line-height: 1.4;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
/* Dekorative Layer / Overlays raus */
body::before, body::after { display: none !important; }
.eu-stars-container, .auth-overlay, .siri-orb, .hero-orb-wrap,
.toast, #toast-container, .toast-container,
[data-no-print], .no-print, .print-hidden {
display: none !important;
}
/* Navigation & Steuerleisten raus */
.header, .main-tabs, .user-bar, .btn-row, .nav-row,
.footer, .kistr-footer, .kistr-disclaimer-wrap,
.stepper, .filter-bar, .results-actions, .form-actions,
.header-cta, .auth-skip, .auth-toggle,
.progress-bar-wrap, .progress-steps, .wizard, .wizard-steps,
.stepper-wrap, .stepper-bar, .nav-tabs, .tabs-nav, .tab-bar,
.cta-section {
display: none !important;
}
/* Interaktive Steuerelemente raus (Ausnahme: .print-keep) */
button:not(.print-keep),
.btn:not(.print-keep),
.copy-btn, .btn-icon, .btn-back, .load-more, .delete {
display: none !important;
}
/* Container freistellen */
.main-container, main, .container, .content, .page,
.hero, section {
max-width: none !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
/* Hero leicht erhalten (Tool-Intro), aber kompakt */
.hero {
padding: 0 0 6pt 0 !important;
margin: 0 0 8pt 0 !important;
border-bottom: 0.5pt solid #d1d5db;
page-break-after: avoid;
break-after: avoid;
}
.hero-badge {
background: transparent !important;
background-image: none !important;
color: #4a4a5e !important;
border: 0.4pt solid #d1d5db !important;
padding: 2pt 6pt !important;
border-radius: 999px !important;
}
.gradient-text {
background: none !important;
background-image: none !important;
color: #080C1A !important;
-webkit-text-fill-color: currentColor !important;
-webkit-background-clip: border-box !important;
background-clip: border-box !important;
border: 0 !important;
padding: 0 !important;
}
/* Wenn Tool einen print-header hat → screen-hero weg, sonst doppelt */
body:has(.print-header) .hero { display: none !important; }
/* ─ Print-Header: optionales Tool-spezifisches Deckblatt-Element ─
Im Druck einheitlich kompakt mit Pink-Underline. */
.print-header {
display: block !important;
text-align: center !important;
padding: 0 0 0.3cm !important;
border-bottom: 1.5pt solid #E8007D !important;
margin: 0 0 0.4cm !important;
page-break-after: avoid;
break-after: avoid;
}
.print-header h1 {
font-size: 17pt !important;
color: #080C1A !important;
margin: 0 0 3pt !important;
line-height: 1.2 !important;
border-bottom: none !important;
padding: 0 !important;
}
.print-header p {
font-size: 9pt !important;
color: #6B7280 !important;
margin: 0 !important;
}
/* Result-Container: KEINE eigene Karten-Optik, nur Layout-Wrapper */
.results-section, .step-panel {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
/* ─ Karten / Panels druckfreundlich ─ */
.card, .question-card, .tracker-category, .feature-card,
.calc-result, .calc-step, .kb-entry, .auth-card, .doc-item,
.tab-panel, .answer-option, .form-group, .calc-grid,
.feature-grid > *, .doc-list > *,
.score-hero, .radar-wrap, .dim-result, .sg-card, .roi-card,
.rec-section, .matrix-wrap, .matrix-cell,
.rec-phase, .roi-metric,
.chart-card, .info-card, .welcome-card, .review-card,
.result-card, .next-step-card, .level-card {
background: #fff !important;
color: #1a1a2e !important;
border: 0.6pt solid #d1d5db !important;
box-shadow: none !important;
border-radius: 3pt !important;
padding: 6pt 8pt !important;
margin: 0 0 5pt 0 !important;
page-break-inside: avoid;
break-inside: avoid;
}
/* Verschachtelte Karten nicht doppelt umranden */
.card .card, .card .question-card, .tab-panel .card,
.tab-panel .question-card, .tab-panel .calc-result,
.rec-section .rec-phase, .matrix-wrap .matrix-cell {
border-width: 0.4pt !important;
margin: 4pt 0 !important;
}
/* Item-Listen innerhalb von Karten — keine eigene Border */
.sg-item, .matrix-item, .dim-result-info {
background: transparent !important;
color: #1a1a2e !important;
border: none !important;
box-shadow: none !important;
padding: 1pt 0 !important;
margin: 0 !important;
page-break-inside: avoid;
}
/* rec-item hat farbigen Pseudo-Punkt absolute positioniert — Padding-Left
halten, sonst rutscht der Bullet unter den Text */
.rec-item {
position: relative !important;
background: transparent !important;
color: #1a1a2e !important;
border: none !important;
box-shadow: none !important;
padding: 3pt 0 3pt 14pt !important;
margin: 0 !important;
page-break-inside: avoid;
line-height: 1.4 !important;
}
.rec-item::before {
position: absolute !important;
left: 4pt !important;
top: 6pt !important;
width: 4pt !important;
height: 4pt !important;
border-radius: 50% !important;
/* Background kommt aus Tool-spezifischer rec-phase-Variante */
}
/* ─ Headings: keine Witwen/Waisen ─ */
h1, h2, h3, h4, h5 {
color: #080C1A !important;
page-break-after: avoid;
break-after: avoid;
page-break-inside: avoid;
margin-top: 0;
}
h1 { font-size: 15pt; margin: 0 0 5pt 0; }
h2 {
font-size: 12pt;
margin: 8pt 0 4pt 0;
padding-bottom: 2pt;
border-bottom: 0.6pt solid #E8007D;
}
h3 { font-size: 10.5pt; margin: 6pt 0 3pt 0; color: #003399 !important; }
h4 { font-size: 9.5pt; margin: 4pt 0 2pt 0; }
p { margin: 0 0 4pt 0; orphans: 3; widows: 3; }
/* ─ Links: URL nachstellen (nur externe http(s)) ─ */
a { color: #003399 !important; text-decoration: none; word-break: break-word; }
a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 7.5pt;
color: #6B7280;
word-break: break-all;
}
a[href^="#"]::after,
a[href^="mailto:"]::after,
a[href^="tel:"]::after,
a[href^="javascript:"]::after { content: ""; }
/* ─ Listen ─ */
ul, ol { padding-left: 14pt; margin: 0 0 4pt 0; }
li { page-break-inside: avoid; margin: 1pt 0; }
/* ─ Tabellen ─ */
table {
width: 100% !important;
border-collapse: collapse !important;
page-break-inside: auto;
margin: 4pt 0;
background: #fff !important;
}
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
th, td {
border: 0.4pt solid #d1d5db !important;
padding: 3pt 5pt !important;
font-size: 9pt !important;
color: #1a1a2e !important;
background: #fff !important;
text-align: left;
vertical-align: top;
}
th {
background: #f4f4f8 !important;
font-weight: 600;
color: #080C1A !important;
}
tr { page-break-inside: avoid; break-inside: avoid; }
/* ─ Bilder & SVGs ─ */
img, svg, canvas {
max-width: 100% !important;
height: auto !important;
page-break-inside: avoid;
break-inside: avoid;
}
/* ─ Charts / Diagramme ─
Begrenzte Breite (passt auf A4 mit Platz fuer ueberlaufende Labels);
overflow visible damit SVG-Text aus der viewBox nicht abgeschnitten wird;
Container mit horizontalem Padding fuer Beschriftungs-Platz. */
#radarChart, #spectrumChart, #benchmarkChart, #roiChart, #scoreChart,
svg.chart, svg.radar, canvas.chart {
max-width: 12cm !important;
width: 100% !important;
height: auto !important;
margin: 4pt auto !important;
display: block !important;
overflow: visible !important;
page-break-inside: avoid;
break-inside: avoid;
}
.radar-wrap, .chart-wrap, .chart-container, .chart-wrapper {
padding: 6pt 18pt !important;
text-align: center;
page-break-inside: avoid;
break-inside: avoid;
overflow: visible !important;
}
/* Canvas-basierte Charts brauchen feste Aspect-Ratio im Druck —
sonst rendert Chart.js auf Window-Pixel und wird gigantisch */
canvas {
max-height: 11cm !important;
}
/* Radar/Chart-Grid-Linien (rgba-weiss aus Dark-Mode) werden im Druck
sonst als schwarz/dunkel gerendert — hellgrau ueberschreiben.
Polygone (data/benchmark) NICHT antasten, nur line + circle[fill=none]. */
#radarChart line, svg.radar line, svg.chart line { stroke: #e5e7eb !important; }
#radarChart circle[fill="none"], svg.radar circle[fill="none"],
svg.chart circle[fill="none"] { stroke: #e5e7eb !important; }
/* Achsen-Labels innerhalb des Radars: lesbar dunkel */
#radarChart text { fill: #4b5563 !important; }
/* Akzent-Linien (border-left/right Streifen z.B. rec-phase.immediate,
matrix-cell q1-q4) im Druck einheitlich graue Rand-Linie ueberall
— keine roten/cyanen/violetten Streifen, die wirken im Druck wie Fehler */
.rec-phase, .matrix-cell, .sg-card, .roi-metric {
border-left-color: #d1d5db !important;
border-right-color: #d1d5db !important;
border-top-color: #d1d5db !important;
border-bottom-color: #d1d5db !important;
border-left-width: 0.6pt !important;
border-right-width: 0.6pt !important;
border-top-width: 0.6pt !important;
border-bottom-width: 0.6pt !important;
}
/* Animations & Transforms im Druck immer aus */
*, *::before, *::after {
animation: none !important;
transition: none !important;
}
/* ─ Lesbarkeit: Alle "blassen" Dark-Mode-Textfarben hart auf dunkel ─
Inline-Styles und CSS-Variablen aus dem Dark-Theme uebersteuern,
damit Fliesstext im Druck nicht im Hellgrau verschwindet. */
p, li, span, div, .welcome-info, .welcome-feature .label,
.description, .desc, .form-hint, .info-text, .hint, .note {
color: #1a1a2e !important;
}
/* Sekundaere Meta-Texte (Untertitel, Hilfetexte) bleiben mittelgrau */
small, .meta, .subtitle, .hero-subtitle, .step-hint, .form-hint,
.dim-result-desc, .info-label, .roi-label, .matrix-axes {
color: #4b5563 !important;
}
/* Strong/b im Print explizit dunkel — manche Tools setzen sie auf var(--pink-light) */
strong, b { color: #080C1A !important; font-weight: 700; }
/* ─ Hero-Section: Verlaeufe als dezente Print-Variante ─
User mag den Farbverlauf-Kopf — beibehalten, aber HELL statt dunkel:
statt schwarzem Background ein zarter Pink/Teal-Hauch */
.hero {
background: linear-gradient(135deg, rgba(232,0,125,0.05), rgba(0,200,212,0.05)) !important;
color: #080C1A !important;
padding: 8pt 12pt 6pt !important;
margin: 0 0 8pt 0 !important;
border: 0.5pt solid #d1d5db !important;
border-radius: 4pt !important;
text-align: center;
page-break-inside: avoid;
page-break-after: avoid;
}
.hero h1, .hero h2 {
color: #080C1A !important;
border-bottom: none !important;
padding: 0 !important;
margin: 0 0 4pt 0 !important;
}
.hero p, .hero .hero-subtitle {
color: #4b5563 !important;
font-size: 9.5pt !important;
}
/* Hero-Badge im Print: kleine Pink-Pille mit Border */
.hero .hero-badge {
background: transparent !important;
border: 0.5pt solid #E8007D !important;
color: #E8007D !important;
padding: 1pt 6pt !important;
border-radius: 999px !important;
font-size: 8pt !important;
font-weight: 600 !important;
}
/* Siri-Orb (animierter Kreis) im Druck weg */
.siri-orb, .hero-orb-wrap { display: none !important; }
/* ─ Welcome-Features / Punkt-Listen mit nummerierten Kreisen ─
Im Print: Inhalt voll lesbar */
.welcome-features { display: block !important; }
.welcome-feature {
display: flex !important;
align-items: center !important;
gap: 6pt !important;
padding: 2pt 0 !important;
margin: 0 !important;
background: transparent !important;
border: none !important;
color: #1a1a2e !important;
}
.welcome-feature .num {
background: #E8007D !important;
color: #fff !important;
width: 14pt !important; height: 14pt !important;
min-width: 14pt !important;
border-radius: 50% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 8pt !important;
font-weight: 700 !important;
}
.welcome-feature .label {
font-size: 10pt !important;
color: #1a1a2e !important;
font-weight: 500 !important;
}
.welcome-info {
background: #f4f4f8 !important;
border: 0.4pt solid #d1d5db !important;
padding: 4pt 6pt !important;
margin: 4pt 0 !important;
font-size: 8.5pt !important;
color: #4b5563 !important;
border-radius: 3pt !important;
}
.welcome-info strong { color: #080C1A !important; }
/* Chart-Card Headline ueberschreiben — sonst hellgrau auf weiss = unlesbar */
.chart-card h3, .chart-card h4, .chart-card > h2 {
color: #003399 !important;
}
/* Antworten-Optionen / Frage-Cards: Frage dunkel, Antwort dunkel */
.question-card .question-text, .question-card h3,
.answer-option, .answer-label, .answer-text {
color: #1a1a2e !important;
}
.answer-option.selected, .answer-option[aria-selected="true"] {
background: rgba(232,0,125,0.08) !important;
border-color: #E8007D !important;
color: #080C1A !important;
}
.answer-option .letter {
background: #f4f4f8 !important;
color: #1a1a2e !important;
border: 0.4pt solid #d1d5db !important;
}
.answer-option.selected .letter {
background: #E8007D !important;
color: #fff !important;
border-color: #E8007D !important;
}
/* ─ Badges / Pillen: Border statt Vollflaeche ─ */
.badge, .gold-badge, .badge-eu, .badge-new, .dot,
.kb-cat-chip {
background: #fff !important;
color: #1a1a2e !important;
border: 0.5pt solid #6B7280 !important;
box-shadow: none !important;
padding: 1pt 4pt !important;
border-radius: 2pt !important;
font-weight: 600;
}
/* Formular-Felder: gedruckte Werte sichtbar machen */
input, textarea, select {
background: #fff !important;
color: #1a1a2e !important;
border: 0.4pt solid #9CA3AF !important;
box-shadow: none !important;
padding: 2pt 4pt !important;
}
input[type="checkbox"], input[type="radio"] {
transform: scale(0.9);
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
/* ─ Helper-Klassen fuer Tool-Autoren ─ */
.print-break,
.print-page-break {
page-break-before: always !important;
break-before: page !important;
}
.print-break-after {
page-break-after: always !important;
break-after: page !important;
}
.print-avoid-break {
page-break-inside: avoid !important;
break-inside: avoid !important;
}
.print-only { display: block !important; }
.screen-only { display: none !important; }
/* Verborgene Inhalte (z.B. inaktive Tabs) bleiben verborgen */
[hidden], .hidden { display: none !important; }
/* Schnupper-Hinweis: bleibt sichtbar als Marker */
.schnupper-banner, .schnupper-notice {
background: #fff !important;
color: #C0006A !important;
border: 0.6pt dashed #E8007D !important;
padding: 4pt 6pt !important;
margin: 0 0 6pt 0 !important;
font-weight: 600;
page-break-inside: avoid;
}
/* Code/Pre */
pre, code {
background: #f4f4f8 !important;
color: #1a1a2e !important;
border: 0.3pt solid #d1d5db !important;
padding: 2pt 4pt !important;
font-size: 9pt !important;
word-wrap: break-word;
white-space: pre-wrap;
page-break-inside: avoid;
}
/* Farben in Rahmen erlauben (Druckerfreundlichkeit) */
* {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}