/* ============================================================
   SuppTree Dokument-System — supp-doc.css
   Einheitliches, druckbares Layout für ALLE Pläne & Berichte.
   Themen werden über CSS-Custom-Properties gesteuert (siehe supp-doc.js).
   Grundstile: .sd-clean · .sd-warm · .sd-bold · .sd-minimal
   ============================================================ */

/* DSGVO: Google-Fonts-@import ENTFERNT (IP-Übertragung an Google vor Einwilligung;
   wurde in jede einbindende App geladen). Die Font-Stacks unten haben System-
   Fallbacks; Apps mit lokalem Inter/Fraunces (z.B. Shop) liefern die Marken-
   Schriften selbst. Poppins/Lora/JetBrains bei Bedarf lokal hosten. */

.sd-doc {
  /* Theme-Tokens — werden pro Vorlage inline überschrieben */
  --sd-accent: #00A67E;
  --sd-accent-2: #1a5a3a;
  --sd-on-accent: #ffffff;          /* Textfarbe AUF Akzentflächen (auto je nach Helligkeit) */
  --sd-accent-ink: var(--sd-accent);/* Akzent als Text auf hellem Grund (heller Akzent wird abgedunkelt) */
  --sd-paper: #ffffff;
  --sd-ink: #1f2430;
  --sd-muted: #6b7280;
  --sd-line: #e6e8ec;
  --sd-soft: #f4f6f8;                                                   /* Fallback */
  --sd-soft: color-mix(in srgb, var(--sd-accent) 7%, var(--sd-paper)); /* auto-getönt aus Akzent */
  --sd-hero-ink: #ffffff;
  --sd-radius: 14px;        /* Blatt-Außenecke */
  --sd-radius-card: 10px;   /* innere Kästchen (Karten/Stats/Tage/Notizen) — vom "Ecken"-Regler gesteuert */
  --sd-font: 'Inter', system-ui, -apple-system, sans-serif;
  --sd-head-font: 'Inter', system-ui, sans-serif;
  --sd-head-weight: 800;
  --sd-head-spacing: -0.01em;

  box-sizing: border-box;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  background: var(--sd-paper);
  color: var(--sd-ink);
  font-family: var(--sd-font);
  font-size: 14px;
  line-height: 1.5;
  border-radius: var(--sd-radius);
  overflow: hidden;
  position: relative;
  box-shadow: 0 10px 40px rgba(15,23,42,0.10);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.sd-doc *, .sd-doc *::before, .sd-doc *::after { box-sizing: border-box; }

/* ---------- Kopf / Branding ---------- */
.sd-head {
  padding: 22px 26px 18px;
  border-bottom: 1px solid var(--sd-line);
}
.sd-brandrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.sd-brand { display: flex; align-items: center; gap: 8px; }
.sd-brand-mark { width: 26px; height: 26px; flex: 0 0 auto; display: block; }
.sd-brand-word { height: 22px; width: auto; display: block; flex: 0 0 auto; }
.sd-partner {
  text-align: right;
  font-size: 11px;
  line-height: 1.35;
  color: var(--sd-muted);
}
.sd-partner strong { display: block; color: var(--sd-ink); font-size: 12.5px; font-weight: 700; }
.sd-partner-person { display: block; color: var(--sd-ink); font-size: 11px; font-weight: 600; margin-top: 1px; }
.sd-partner img { max-height: 44px; max-width: 160px; margin-left: auto; display: block; margin-bottom: 5px; object-fit: contain; }

.sd-titlewrap { margin-top: 18px; }
.sd-kicker {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--sd-accent-ink);
  margin-bottom: 6px;
}
.sd-title {
  font-family: var(--sd-head-font);
  font-weight: var(--sd-head-weight);
  letter-spacing: var(--sd-head-spacing);
  font-size: 26px;
  line-height: 1.12;
  margin: 0;
  color: var(--sd-ink);
}
.sd-subtitle { font-size: 13px; color: var(--sd-muted); margin-top: 5px; }

.sd-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 14px;
}
.sd-meta-item { font-size: 11px; }
.sd-meta-item .l { color: var(--sd-muted); text-transform: uppercase; letter-spacing: 0.06em; font-size: 9px; font-weight: 700; display: block; }
.sd-meta-item .v { font-weight: 700; font-size: 13px; color: var(--sd-ink); }

/* ---------- Körper ---------- */
.sd-body { padding: 20px 26px 8px; }
.sd-intro { font-size: 13.5px; color: var(--sd-ink); margin: 0 0 18px; padding: 12px 14px; background: var(--sd-soft); border-left: 3px solid var(--sd-accent); border-radius: var(--sd-radius-card); }

.sd-section { margin-bottom: 22px; break-inside: avoid; }
.sd-section-title {
  font-family: var(--sd-head-font);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sd-accent-2);
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--sd-line);
}

/* Stats */
.sd-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.sd-stat { padding: 12px 13px; background: var(--sd-soft); border-radius: var(--sd-radius-card); border: 1px solid var(--sd-line); }
.sd-stat .v { font-size: 22px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--sd-ink); }
.sd-stat .l { font-size: 11px; color: var(--sd-muted); margin-top: 4px; }
.sd-stat .s { font-size: 10px; color: var(--sd-accent-ink); margin-top: 2px; font-weight: 600; }

/* Bars */
.sd-bars { display: flex; flex-direction: column; gap: 11px; }
.sd-bar-row .top { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 4px; }
.sd-bar-row .top .val { font-weight: 700; }
.sd-bar-track { height: 7px; background: rgba(0,0,0,0.07); border-radius: 4px; overflow: hidden; }
.sd-bar-fill { height: 100%; background: var(--sd-accent); border-radius: 4px; }

/* Tabelle */
.sd-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sd-table th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sd-muted); font-weight: 700; padding: 0 8px 7px; border-bottom: 1.5px solid var(--sd-line); }
.sd-table td { padding: 8px; border-bottom: 1px solid var(--sd-line); vertical-align: top; }
.sd-table tr:last-child td { border-bottom: none; }
.sd-table td:first-child, .sd-table th:first-child { padding-left: 0; }

/* Liste */
.sd-list { display: flex; flex-direction: column; gap: 8px; }
.sd-li { display: flex; gap: 11px; align-items: flex-start; padding: 10px 12px; background: var(--sd-soft); border-radius: var(--sd-radius-card); }
.sd-li-num { flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--sd-accent); color: var(--sd-on-accent); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.sd-li-body { flex: 1; }
.sd-li-title { font-weight: 700; font-size: 13px; }
.sd-li-sub { font-size: 11.5px; color: var(--sd-muted); margin-top: 2px; }
.sd-li-meta { font-size: 11px; color: var(--sd-accent-ink); font-weight: 700; white-space: nowrap; }

/* Tage (Plan-Struktur) */
.sd-days { display: flex; flex-direction: column; gap: 12px; }
.sd-day { border: 1px solid var(--sd-line); border-radius: var(--sd-radius-card); overflow: hidden; break-inside: avoid; }
.sd-day-head { padding: 9px 14px; background: var(--sd-accent-2); color: var(--sd-hero-ink); font-weight: 700; font-size: 13px; display: flex; justify-content: space-between; align-items: center; }
.sd-day-head .tag { font-size: 10px; font-weight: 700; opacity: 0.85; background: rgba(255,255,255,0.18); padding: 2px 8px; border-radius: 20px; }
.sd-day-items { padding: 4px 14px; }
.sd-day-item { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--sd-line); font-size: 12.5px; }
.sd-day-item:last-child { border-bottom: none; }
.sd-day-item .name { font-weight: 600; }
.sd-day-item .detail { color: var(--sd-muted); white-space: nowrap; font-weight: 600; }

/* Text / Notiz */
.sd-text { font-size: 13px; line-height: 1.6; }
.sd-note { font-size: 12.5px; padding: 12px 14px; background: var(--sd-soft); border-radius: var(--sd-radius-card); border: 1px dashed var(--sd-line); color: var(--sd-ink); }

/* Pills (z.B. Insights) */
.sd-pills { display: flex; flex-wrap: wrap; gap: 7px; }
.sd-pill { font-size: 11.5px; font-weight: 600; padding: 5px 11px; border-radius: 20px; background: var(--sd-soft); border: 1px solid var(--sd-line); }
.sd-pill.good { background: rgba(16,160,110,0.10); border-color: transparent; color: var(--sd-accent-2); }
.sd-pill.warn { background: rgba(217,119,6,0.10); border-color: transparent; color: #9a5208; }

/* ---------- Fuß ---------- */
.sd-foot {
  margin-top: 8px;
  padding: 14px 26px 20px;
  border-top: 1px solid var(--sd-line);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 10.5px;
  color: var(--sd-muted);
}
.sd-foot-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sd-foot .powered { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--sd-ink); }
.sd-foot .powered svg { width: 15px; height: 15px; }
.sd-foot-meta { font-size: 10px; color: var(--sd-muted); text-align: right; }
.sd-legal { font-size: 9.5px; line-height: 1.45; color: var(--sd-muted); border-top: 1px dashed var(--sd-line); padding-top: 8px; }

/* ============================================================
   GRUNDSTIL 1 — CLEAN / KLASSISCH (Default)
   ============================================================ */
.sd-clean .sd-head { background: var(--sd-paper); }
.sd-clean .sd-kicker { padding: 2px 0; border-bottom: 2px solid var(--sd-accent); }

/* ============================================================
   GRUNDSTIL 2 — WARM / EDITORIAL (Serif)
   ============================================================ */
.sd-warm {
  --sd-head-font: 'Fraunces', Georgia, serif;
  --sd-head-weight: 600;
  --sd-head-spacing: 0;
  --sd-radius: 16px;
  --sd-paper: #FAF6EF;   /* Editorial = Creme-Papier, unabhängig von der Farbe */
  --sd-ink: #2c2a26;
}
.sd-warm .sd-title { font-size: 30px; line-height: 1.08; }
.sd-warm .sd-section-title { text-transform: none; letter-spacing: 0; font-family: 'Fraunces', serif; font-weight: 600; font-size: 16px; border-bottom: none; color: var(--sd-ink); }
.sd-warm .sd-head { padding-bottom: 22px; }
.sd-warm .sd-stat, .sd-warm .sd-li, .sd-warm .sd-note { background: var(--sd-soft); }
.sd-warm .sd-day-head { font-family: 'Fraunces', serif; font-weight: 600; }

/* ============================================================
   GRUNDSTIL 3 — MODERN / BOLD (Dunkler Hero)
   ============================================================ */
.sd-bold .sd-head {
  background: linear-gradient(135deg, var(--sd-accent-2) 0%, var(--sd-accent) 130%);
  color: var(--sd-hero-ink);
  border-bottom: none;
  padding-bottom: 24px;
}
.sd-bold .sd-brand-name { color: var(--sd-hero-ink); }
.sd-bold .sd-title { color: var(--sd-hero-ink); font-size: 30px; font-weight: 800; }
.sd-bold .sd-subtitle, .sd-bold .sd-partner, .sd-bold .sd-partner strong { color: rgba(255,255,255,0.82); }
.sd-bold .sd-kicker { color: var(--sd-hero-ink); opacity: 0.85; }
.sd-bold .sd-meta-item .l { color: rgba(255,255,255,0.7); }
.sd-bold .sd-meta-item .v { color: var(--sd-hero-ink); }
.sd-bold .sd-stat { background: var(--sd-soft); border: none; }
.sd-bold .sd-stat .v { color: var(--sd-accent-2); font-size: 24px; }
.sd-bold .sd-section-title { color: var(--sd-ink); border-bottom: 2px solid var(--sd-accent); display: inline-block; }

/* ============================================================
   GRUNDSTIL 4 — MINIMAL / MONO (S/W, ein Akzent)
   ============================================================ */
.sd-minimal {
  --sd-soft: #fafafa;
  --sd-line: #ececec;
  --sd-radius: 8px;
}
.sd-minimal { box-shadow: 0 2px 14px rgba(0,0,0,0.06); border: 1px solid #ececec; }
.sd-minimal .sd-title { font-size: 24px; font-weight: 700; }
.sd-minimal .sd-section-title { color: var(--sd-ink); border-bottom: 1px solid var(--sd-ink); font-weight: 700; }
.sd-minimal .sd-stat { background: transparent; border: none; border-left: 2px solid var(--sd-accent); border-radius: 0; padding-left: 11px; }
.sd-minimal .sd-li { background: transparent; border-bottom: 1px solid var(--sd-line); border-radius: 0; padding-left: 0; padding-right: 0; }
.sd-minimal .sd-li-num { background: transparent; color: var(--sd-accent); border: 1px solid var(--sd-accent); }
.sd-minimal .sd-day-head { background: var(--sd-ink); }
.sd-minimal .sd-intro { background: transparent; }

/* ============================================================
   GRUNDSTIL 5 — KOMPAKT (dicht gepackt, viel auf eine Seite)
   ============================================================ */
.sd-kompakt { font-size: 12.5px; --sd-radius: 10px; }
.sd-kompakt .sd-head { padding: 16px 20px 12px; }
.sd-kompakt .sd-body { padding: 14px 20px 4px; }
.sd-kompakt .sd-foot { padding: 12px 20px 16px; }
.sd-kompakt .sd-title { font-size: 20px; }
.sd-kompakt .sd-titlewrap { margin-top: 12px; }
.sd-kompakt .sd-meta { margin-top: 10px; gap: 6px 16px; }
.sd-kompakt .sd-section { margin-bottom: 13px; }
.sd-kompakt .sd-section-title { margin-bottom: 7px; padding-bottom: 4px; font-size: 11px; }
.sd-kompakt .sd-intro { margin-bottom: 12px; padding: 9px 11px; }
.sd-kompakt .sd-stat { padding: 8px 10px; }
.sd-kompakt .sd-stat .v { font-size: 18px; }
.sd-kompakt .sd-li { padding: 7px 10px; }
.sd-kompakt .sd-day-item { padding: 5px 0; }
.sd-kompakt .sd-day-head { padding: 7px 12px; font-size: 12px; }

/* ============================================================
   GRUNDSTIL 6 — KARTEN (Abschnitte als abgesetzte Karten)
   ============================================================ */
.sd-karten { --sd-radius: 18px; --sd-radius-card: 13px; }
.sd-karten .sd-body { background: var(--sd-soft); padding-top: 18px; padding-bottom: 18px; }
.sd-karten .sd-section { background: #fff; border: 1px solid var(--sd-line); border-radius: var(--sd-radius-card); padding: 15px 16px; box-shadow: 0 2px 10px rgba(15,23,42,0.05); margin-bottom: 14px; }
.sd-karten .sd-section-title { border-bottom: none; color: var(--sd-accent-2); margin-bottom: 11px; }
.sd-karten .sd-intro { background: #fff; border: 1px solid var(--sd-line); border-left: 3px solid var(--sd-accent); }
.sd-karten .sd-stat { background: var(--sd-soft); border: none; }
.sd-karten .sd-li { background: var(--sd-soft); }

/* ============================================================
   GRUNDSTIL 7 — PASTELL (sanft getöntes Papier, runde Formen)
   ============================================================ */
.sd-pastell {
  --sd-radius: 22px;
  --sd-radius-card: 16px;
  --sd-soft: #ffffff;                                                  /* Fallback */
  --sd-soft: #ffffff;
  --sd-paper: #f7faf8;                                                 /* Fallback */
  --sd-paper: color-mix(in srgb, var(--sd-accent) 6%, #ffffff);
  --sd-line: #eef2f0;                                                  /* Fallback */
  --sd-line: color-mix(in srgb, var(--sd-accent) 12%, #ffffff);
}
.sd-pastell .sd-head { background: #f0f6f3; border-bottom: none; }
.sd-pastell .sd-head { background: color-mix(in srgb, var(--sd-accent) 13%, #ffffff); }
.sd-pastell .sd-title { font-weight: 800; }
.sd-pastell .sd-stat { background: #fff; border: 1px solid var(--sd-line); border-radius: var(--sd-radius-card); }
.sd-pastell .sd-li { background: #fff; border: 1px solid var(--sd-line); border-radius: var(--sd-radius-card); }
.sd-pastell .sd-note, .sd-pastell .sd-intro { background: #fff; border-radius: var(--sd-radius-card); }
.sd-pastell .sd-day { border-radius: var(--sd-radius-card); }
.sd-pastell .sd-day-head { border-radius: 0; }
.sd-pastell .sd-pill { border-radius: 20px; }

/* ============================================================
   GRUNDSTIL 8 — KONTRAST (dunkles Dokument, heller Text)
   ============================================================ */
.sd-dark {
  --sd-paper: #15181d;
  --sd-ink: #eef1f5;
  --sd-muted: #9aa3af;
  --sd-line: #2a2f37;
  --sd-soft: #1d2128;                                                   /* Fallback */
  --sd-soft: color-mix(in srgb, var(--sd-accent) 15%, #15181d);
}
.sd-dark { box-shadow: 0 18px 50px rgba(0,0,0,0.45); }
.sd-dark .sd-stat { background: var(--sd-soft); border: 1px solid var(--sd-line); }
.sd-dark .sd-stat .v { color: var(--sd-accent); }
.sd-dark .sd-stat .s { color: var(--sd-ink); opacity: .7; }
.sd-dark .sd-section-title { color: var(--sd-accent); border-bottom: 1px solid var(--sd-line); }
.sd-dark .sd-day-head { background: var(--sd-accent); color: #0b0d10; }
.sd-dark .sd-bar-track { background: rgba(255,255,255,0.10); }
.sd-dark .sd-table th { border-bottom-color: var(--sd-line); }
.sd-dark .sd-table td { border-bottom-color: var(--sd-line); }
.sd-dark .sd-intro { border-left-color: var(--sd-accent); }

/* ============================================================
   GRUNDSTIL 9 — REPORT (formell, Serifen, wie ein Fachbericht)
   ============================================================ */
.sd-report {
  --sd-font: Georgia, 'Times New Roman', serif;
  --sd-head-font: 'Fraunces', Georgia, serif;
  --sd-head-weight: 600;
  --sd-head-spacing: 0;
  --sd-radius: 4px;
  --sd-radius-card: 4px;
}
.sd-report .sd-head { border-bottom: 3px double var(--sd-ink); padding-bottom: 16px; }
.sd-report .sd-brand-name { font-family: Georgia, serif; }
.sd-report .sd-title { font-size: 27px; line-height: 1.12; }
.sd-report .sd-section-title { text-transform: none; letter-spacing: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 15px; color: var(--sd-ink); border-bottom: 1px solid var(--sd-ink); }
.sd-report .sd-text { text-align: justify; }
.sd-report .sd-stat, .sd-report .sd-li, .sd-report .sd-note { border-radius: var(--sd-radius-card); }
.sd-report .sd-day { border-radius: var(--sd-radius-card); }
.sd-report .sd-kicker { letter-spacing: 0.12em; }

/* ============================================================
   FEINSCHLIFF-MODIFIKATOREN (frei mit jedem Stil kombinierbar)
   ============================================================ */

/* — Dichte — */
.sd-d-kompakt { font-size: 12.5px; }
.sd-d-kompakt .sd-head { padding: 16px 20px 12px; }
.sd-d-kompakt .sd-body { padding: 14px 20px 4px; }
.sd-d-kompakt .sd-foot { padding: 12px 20px 16px; }
.sd-d-kompakt .sd-section { margin-bottom: 13px; }
.sd-d-kompakt .sd-stat { padding: 8px 10px; }
.sd-d-kompakt .sd-li { padding: 7px 10px; }
.sd-d-kompakt .sd-day-item { padding: 5px 0; }
.sd-d-luftig .sd-head { padding: 30px 34px 26px; }
.sd-d-luftig .sd-body { padding: 28px 34px 12px; }
.sd-d-luftig .sd-foot { padding: 22px 34px 28px; }
.sd-d-luftig .sd-section { margin-bottom: 30px; }
.sd-d-luftig .sd-stat { padding: 16px 16px; }
.sd-d-luftig .sd-li { padding: 13px 15px; }

/* — Kopf-Layout — */
.sd-h-center .sd-brandrow { flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.sd-h-center .sd-partner { text-align: center; }
.sd-h-center .sd-partner img { margin: 0 auto 4px; }
.sd-h-center .sd-titlewrap { text-align: center; }
.sd-h-center .sd-meta { justify-content: center; }
.sd-h-center .sd-kicker { display: block; }

.sd-h-stack .sd-brand { flex-direction: column; align-items: flex-start; gap: 7px; }
.sd-h-stack .sd-brand-mark { width: 40px; height: 40px; }
.sd-h-stack .sd-brand-word { height: 30px; }

/* — Akzent-Deko — */
.sd-deco-edge { border-left: 6px solid var(--sd-accent); }
.sd-deco-band .sd-head { border-bottom: 5px solid var(--sd-accent); }
.sd-deco-band.sd-bold .sd-head { border-bottom: none; box-shadow: inset 0 -5px 0 rgba(255,255,255,0.25); }
.sd-deco-frame { box-shadow: inset 0 0 0 2px var(--sd-accent), 0 10px 40px rgba(15,23,42,0.10); }
.sd-deco-corner::before, .sd-deco-corner::after { content: ''; position: absolute; width: 26px; height: 26px; pointer-events: none; z-index: 3; }
.sd-deco-corner::before { top: 12px; left: 12px; border-top: 3px solid var(--sd-accent); border-left: 3px solid var(--sd-accent); }
.sd-deco-corner::after { bottom: 12px; right: 12px; border-bottom: 3px solid var(--sd-accent); border-right: 3px solid var(--sd-accent); }
.sd-deco-ribbon::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, var(--sd-accent), var(--sd-accent-2)); z-index: 3; }
.sd-body { position: relative; }
.sd-watermark { position: absolute; right: 20px; bottom: 26px; width: 150px; height: 150px; opacity: 0.05; pointer-events: none; z-index: 0; }
.sd-watermark svg { width: 100%; height: 100%; }
.sd-body > .sd-section, .sd-body > .sd-intro { position: relative; z-index: 1; }

/* ============================================================
   DRUCK
   ============================================================ */
@media print {
  @page { margin: 14mm; size: A4; }
  html, body { background: #fff !important; margin: 0; padding: 0; }
  .sd-doc {
    box-shadow: none !important;
    border-radius: 0 !important;
    max-width: 100% !important;
    border: none !important;
  }
  .sd-section, .sd-day, .sd-stat { break-inside: avoid; }
  .sd-no-print { display: none !important; }
}