/* ============================================================
   report-styles.css
   Gemeinsame Styles für Reports (Performance & Risikoanalyse)
   60/30/10 Neutral Palette · editorial / professional
   ============================================================ */

/* --- 1. Design Tokens --------------------------------------- */
:root{
  /* 60 % – Background (warm off-white, dominant) */
  --bg:            #f4f1ec;
  --bg-rgb:        244, 241, 236;   /* --bg channels, for translucent surfaces */

  /* 30 % – Surfaces (Karten / Content-Flächen) */
  --surface:       #ffffff;
  --surface-2:     #fbf9f5;
  --surface-sunken:#efeae2;

  /* 10 % – Accent (warmes Charcoal) */
  --accent:        #1c1a17;
  --accent-soft:   #2c2925;

  /* Typografie */
  --ink:           #2a2724;
  --ink-2:         #4d4844;
  --muted:         #807872;
  --on-accent:     #f4f1ec;

  /* Linien */
  --border:        #e6e0d6;
  --border-strong: #c9c0b1;

  /* Status (gedeckt, professionell) */
  --ok:            #4f6b3a;
  --warn:          #b07a35;
  --risk:          #9c3a2f;
  --crit:          #6b1f1a;

  /* Heatmap-Stufen (Wahrsch. × Wirkung) */
  --h-low:         #8b9d6b;
  --h-medlow:      #b8a955;
  --h-med:         #b07a35;
  --h-high:        #9c3a2f;
  --h-crit:        #6b1f1a;

  /* Layout */
  --radius:        10px;
  --radius-lg:     14px;
  --radius-sm:     6px;
  --nav-h:         56px;            /* fixed top-nav height; body padding + .topnav share it */
  --shadow:        0 1px 2px rgba(28,26,23,.04), 0 1px 1px rgba(28,26,23,.03);
  --shadow-lift:   0 2px 6px rgba(28,26,23,.06);

  --font-sans:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-serif:    "Source Serif Pro", Georgia, "Times New Roman", serif;
}

/* --- 2. Base ----------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* --- 3. Page Container ------------------------------------- */
.page{
  max-width:960px;
  margin:32px auto;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:56px 64px;
  box-shadow:var(--shadow);
}

/* --- 4. Typography ----------------------------------------- */
h1{
  font-size:36px;
  font-weight:600;
  color:var(--accent);
  letter-spacing:-0.02em;
  line-height:1.1;
  margin:0 0 6px;
}
h2{
  font-size:22px;
  font-weight:600;
  color:var(--accent);
  letter-spacing:-0.01em;
  margin:40px 0 14px;
  padding-bottom:10px;
  border-bottom:1px solid var(--border-strong);
}
h3{
  font-size:17px;
  font-weight:600;
  color:var(--accent);
  margin:24px 0 8px;
}
h4{
  font-size:15px;
  font-weight:600;
  color:var(--accent);
  margin:14px 0 6px;
}
p{margin:0 0 12px;}
.lede{
  color:var(--muted);
  font-size:15px;
  margin:0 0 28px;
  font-style:italic;
}
hr.div{
  border:0;
  border-top:1px solid var(--border-strong);
  margin:0 0 22px;
}
hr.sub{
  border:0;
  border-top:1px solid var(--border);
  margin:14px 0;
}
strong,b{color:var(--accent);font-weight:600;}
code{
  font-family:"SF Mono", "Menlo", "Consolas", monospace;
  font-size:.92em;
  background:var(--surface-sunken);
  padding:1px 6px;
  border-radius:4px;
  color:var(--accent-soft);
}
a{color:var(--accent);text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:3px;}
a:hover{text-decoration-color:var(--accent);}

/* --- 5. Meta Table ----------------------------------------- */
table.meta{
  width:100%;
  border-collapse:collapse;
  margin-bottom:18px;
}
table.meta td{
  padding:9px 0;
  border-bottom:1px solid var(--border);
  font-size:14px;
  vertical-align:top;
}
table.meta td.k{
  font-weight:600;
  color:var(--accent);
  width:200px;
  padding-right:18px;
}

/* --- 6. Callouts ------------------------------------------- */
.callout{
  border-radius:var(--radius);
  padding:16px 20px;
  margin:20px 0;
  background:var(--surface-2);
  border:1px solid var(--border);
  color:var(--ink);
}
.callout .title{
  font-weight:600;
  font-size:15px;
  margin-bottom:6px;
  color:var(--accent);
}
.callout.accent{
  background:var(--accent);
  color:var(--on-accent);
  border-color:var(--accent);
}
.callout.accent .title{color:var(--on-accent);}
.callout.accent strong,
.callout.accent b{color:var(--on-accent);}
.callout.risk{
  background:var(--surface);
  border-left:4px solid var(--risk);
  border-radius:var(--radius);
}
.callout.risk .title{color:var(--risk);}
.callout.primary{
  background:var(--surface-sunken);
  border-left:4px solid var(--accent);
}
.callout.outline{
  background:var(--surface);
}

/* --- 7. Verdict Box (Risikoanalyse) ------------------------ */
.verdict{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:24px;
  align-items:center;
  border-radius:var(--radius-lg);
  padding:24px 28px;
  margin:24px 0 12px;
  background:var(--surface);
  border:1px solid var(--border-strong);
  border-left:6px solid var(--warn);
}
.verdict.risk{border-left-color:var(--risk);}
.verdict.ok{border-left-color:var(--ok);}
.verdict .badge{
  font-size:30px;
  font-weight:600;
  color:var(--warn);
  line-height:1.1;
  letter-spacing:-0.01em;
  max-width:230px;
}
.verdict.risk .badge{color:var(--risk);}
.verdict.ok .badge{color:var(--ok);}
.verdict .label{
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:6px;
  font-weight:600;
}
.verdict .title{
  font-size:16px;
  font-weight:400;
  color:var(--ink);
  line-height:1.55;
}

/* --- 8. KPI Cards & Stats ---------------------------------- */
.kpis{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin:16px 0 22px;
}
.kpi{
  border-radius:var(--radius);
  padding:18px 20px;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-top:3px solid var(--accent);
}
.kpi .label{
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:600;
}
.kpi .value{
  font-size:26px;
  font-weight:600;
  letter-spacing:-0.02em;
  color:var(--accent);
  line-height:1.1;
  margin:8px 0 2px;
}
.kpi .sub{
  font-size:12px;
  color:var(--muted);
}
.kpi.ok{border-top-color:var(--ok);}
.kpi.warn{border-top-color:var(--warn);}
.kpi.risk{border-top-color:var(--risk);}
.kpi.ok .value{color:var(--ok);}
.kpi.warn .value{color:var(--warn);}
.kpi.risk .value{color:var(--risk);}

.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin:14px 0 20px;
}
.stat{
  border-radius:var(--radius);
  padding:14px 16px;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-left:3px solid var(--accent);
}
.stat .v{
  font-size:22px;
  font-weight:600;
  color:var(--accent);
  line-height:1.15;
  letter-spacing:-0.01em;
  font-variant-numeric:tabular-nums;
}
.stat .l{
  font-size:12px;
  color:var(--muted);
  margin-top:6px;
  line-height:1.4;
}
.stat.ok{border-left-color:var(--ok);}     .stat.ok .v{color:var(--ok);}
.stat.warn{border-left-color:var(--warn);} .stat.warn .v{color:var(--warn);}
.stat.risk{border-left-color:var(--risk);} .stat.risk .v{color:var(--risk);}

/* --- 9. Data Tables ---------------------------------------- */
table.data{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  margin:12px 0 18px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
}
table.data th{
  background:var(--accent);
  color:var(--on-accent);
  text-align:left;
  padding:11px 14px;
  font-weight:600;
  font-size:12.5px;
  letter-spacing:.03em;
}
table.data td{
  padding:11px 14px;
  border-bottom:1px solid var(--border);
  vertical-align:top;
}
table.data tbody tr:last-child td{border-bottom:0;}
table.data tbody tr:nth-child(even){background:var(--surface-2);}
table.data td.center{text-align:center;}
table.data td.num{
  font-variant-numeric:tabular-nums;
  font-weight:600;
  color:var(--accent);
  text-align:center;
  width:36px;
}

/* Priorities Table (accent header variant) */
table.data.accent thead th{
  background:var(--accent-soft);
}
table.data.accent tbody td.priority-label{
  font-weight:600;
  color:var(--accent);
}

/* --- 10. Chips (Status) ------------------------------------ */
.chip{
  display:inline-block;
  padding:3px 10px;
  border-radius:var(--radius-sm);
  color:var(--on-accent);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.02em;
  white-space:nowrap;
  background:var(--muted);
}
.chip.ok{background:var(--ok);}
.chip.warn{background:var(--warn);}
.chip.risk{background:var(--risk);}
.chip.crit{background:var(--crit);}
.chip.primary{background:var(--accent);}
.chip.muted{background:var(--muted);}

/* --- 11. Bar Chart (SVG) ----------------------------------- */
.chart{margin:14px 0 8px;padding:8px 0;}
.chart figcaption{
  font-size:12px;
  color:var(--muted);
  margin-top:6px;
  font-style:italic;
}
.chart svg .grid{stroke:var(--border);stroke-width:1;}
.chart svg .axis{stroke:var(--border-strong);stroke-width:1;}
.chart svg .label{
  font-family:var(--font-sans);
  font-size:11px;
  fill:var(--muted);
}
.chart svg .bar{fill:var(--accent);}
.chart svg .bar.risk{fill:var(--risk);}
.chart svg .value{
  font-family:var(--font-sans);
  font-size:10px;
  fill:var(--ink);
  text-anchor:middle;
}
.chart svg .value.risk{fill:var(--risk);font-weight:600;}

/* --- 12. Wins (Performance) -------------------------------- */
.win{margin:14px 0;padding-left:0;}
.win .ttl{
  color:var(--accent);
  font-weight:600;
  font-size:15px;
  margin-bottom:4px;
}
.win .ttl::before{
  content:"✓";
  color:var(--ok);
  font-weight:700;
  margin-right:10px;
}

/* --- 13. Priority Matrix (Performance) --------------------- */
.matrix{
  display:grid;
  grid-template-columns:140px 1fr 1fr;
  gap:0;
  border:1px solid var(--border-strong);
  border-radius:var(--radius);
  overflow:hidden;
  margin:14px 0;
  background:var(--surface);
}
.matrix .h{
  background:var(--accent);
  color:var(--on-accent);
  padding:12px;
  font-weight:600;
  text-align:center;
  font-size:13.5px;
}
.matrix .y{
  background:var(--accent);
  color:var(--on-accent);
  padding:14px 12px;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:13.5px;
}
.matrix .cell{
  padding:16px;
  font-size:13.5px;
  line-height:1.55;
  border-left:1px solid var(--border);
  border-top:1px solid var(--border);
}
.matrix .cell strong{
  color:var(--accent);
  display:block;
  margin-bottom:6px;
}
.matrix .cell.good{background:#eef2e6;}
.matrix .cell.warn{background:#f7eedc;}
.matrix .cell.risk{background:#f4dcd6;}

/* --- 14. Trend Cards (Risikoanalyse) ----------------------- */
.trends{display:grid;grid-template-columns:1fr;gap:14px;margin:14px 0;}
.trend{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px 22px;
  background:var(--surface);
}
.trend .tag{
  display:inline-block;
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--on-accent);
  background:var(--accent);
  padding:3px 10px;
  border-radius:var(--radius-sm);
  margin-bottom:10px;
}
.trend .tag.risk{background:var(--risk);}
.trend .tag.warn{background:var(--warn);}
.trend h3{margin:0 0 6px;}
.trend .nums{
  display:flex;
  flex-wrap:wrap;
  gap:14px 22px;
  margin:10px 0;
  padding:12px 14px;
  background:var(--surface-sunken);
  border-radius:var(--radius-sm);
}
.trend .nums span{font-size:12.5px;color:var(--muted);}
.trend .nums b{
  color:var(--accent);
  font-size:14.5px;
  font-variant-numeric:tabular-nums;
  font-weight:600;
}

/* --- 15. Competitor Cards (Risikoanalyse) ------------------ */
.comps{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:10px 0;}
.comp{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px 18px;
  background:var(--surface);
}
.comp .name{
  font-weight:600;
  color:var(--accent);
  font-size:15px;
  margin-bottom:2px;
}
.comp .pos{
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:8px;
  font-weight:600;
}
.comp .meta{font-size:13.5px;line-height:1.55;color:var(--ink-2);}
.comp .meta strong{color:var(--accent);}

/* --- 16. Strategic Options (Risikoanalyse) ----------------- */
.options{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:16px 0;}
.option{
  border:1px solid var(--border);
  border-top:4px solid var(--muted);
  border-radius:var(--radius);
  padding:18px;
  background:var(--surface);
}
.option .head{
  font-weight:600;
  color:var(--accent);
  font-size:15px;
  margin-bottom:8px;
  line-height:1.35;
}
.option .head .sub{
  display:block;
  font-weight:400;
  font-size:12.5px;
  color:var(--muted);
  margin-top:2px;
}
.option .verdict-line{
  font-size:12px;
  font-weight:600;
  margin-bottom:12px;
  letter-spacing:.02em;
}
.option p{font-size:13.5px;color:var(--ink-2);}
.option.go{border-top-color:var(--ok);}
.option.go .verdict-line{color:var(--ok);}
.option.maybe{border-top-color:var(--warn);}
.option.maybe .verdict-line{color:var(--warn);}
.option.nogo{border-top-color:var(--risk);}
.option.nogo .verdict-line{color:var(--risk);}

/* --- 17. Risk Heatmap (Risikoanalyse) ---------------------- */
.heatmap{
  display:grid;
  grid-template-columns:140px repeat(5,1fr);
  gap:3px;
  margin:16px 0;
  padding:3px;
  background:var(--surface-sunken);
  border-radius:var(--radius);
}
.heatmap > div{
  padding:10px 8px;
  font-size:11.5px;
  line-height:1.4;
}
.heatmap .corner{background:transparent;}
.heatmap .axis-x,
.heatmap .axis-y{
  background:var(--accent);
  color:var(--on-accent);
  text-align:center;
  font-weight:600;
  font-size:12px;
  letter-spacing:.02em;
}
.heatmap .axis-y{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.heatmap .h-cell{
  min-height:90px;
  border-radius:var(--radius-sm);
  color:var(--on-accent);
  font-weight:500;
  display:flex;
  flex-direction:column;
}
.heatmap .h-cell .rid{
  display:inline-block;
  background:rgba(255,255,255,.22);
  border-radius:4px;
  padding:1px 6px;
  margin-right:5px;
  font-weight:700;
  font-size:10.5px;
}
.heatmap .h-cell.empty{background:var(--surface);color:transparent;}
.heatmap .h-low{background:var(--h-low);}
.heatmap .h-medlow{background:var(--h-medlow);color:var(--accent);}
.heatmap .h-medlow .rid{background:rgba(28,26,23,.18);color:var(--accent);}
.heatmap .h-med{background:var(--h-med);}
.heatmap .h-high{background:var(--h-high);}
.heatmap .h-crit{background:var(--h-crit);}

/* --- 18. Bare Lists ---------------------------------------- */
ul.bare{list-style:none;padding:0;margin:8px 0;}
ul.bare li{padding:4px 0;font-size:13.5px;color:var(--ink-2);}
ul.bare li::before{
  content:"→";
  color:var(--accent);
  margin-right:10px;
  font-weight:700;
}

/* --- 19. Sources ------------------------------------------- */
.sources{
  font-size:13px;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px 20px;
}
.sources ol{margin:6px 0 0;padding-left:22px;}
.sources li{margin:6px 0;color:var(--ink-2);}
.sources a{color:var(--accent);}

/* --- 20. Footer -------------------------------------------- */
.footer{
  margin-top:40px;
  padding-top:18px;
  border-top:1px solid var(--border);
  font-size:12px;
  color:var(--muted);
  font-style:italic;
}

/* --- 21. Utility Helpers ----------------------------------- */
.text-small{font-size:13.5px;}
.text-muted{color:var(--muted);}

/* --- 21a. Landingpage / Index ------------------------------ */
.hero{
  margin:8px 0 32px;
  padding:0;
}
.hero .eyebrow{
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:600;
  margin-bottom:14px;
}
.hero h1{
  font-size:42px;
  line-height:1.08;
  letter-spacing:-0.025em;
  margin:0 0 16px;
  font-weight:600;
}
.hero p.intro{
  font-size:17px;
  line-height:1.6;
  color:var(--ink-2);
  max-width:640px;
  margin:0 0 8px;
}

.doc-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin:28px 0;
}
.doc-cards.design{
  grid-template-columns:repeat(2,1fr);
}
.doc-card{
  display:flex;
  flex-direction:column;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:24px 22px 22px;
  text-decoration:none;
  color:var(--ink);
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
  position:relative;
}
.doc-card:hover{
  border-color:var(--accent);
  transform:translateY(-2px);
  box-shadow:var(--shadow-lift);
}
.doc-card .head-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:20px;
}
.doc-card .num{
  font-family:var(--font-serif);
  font-size:14px;
  color:var(--muted);
  letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
}
.doc-card .badge{
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--ok);
  background:#eef2e6;
  padding:3px 8px;
  border-radius:var(--radius-sm);
}
.doc-card .badge.warn{color:var(--warn);background:#f7eedc;}
.doc-card .badge.muted{color:var(--muted);background:var(--surface-sunken);}
.doc-card h3{
  font-size:19px;
  line-height:1.3;
  margin:0 0 8px;
  border:0;
  padding:0;
  color:var(--accent);
}
.doc-card .desc{
  font-size:13.5px;
  color:var(--ink-2);
  line-height:1.55;
  margin:0 0 18px;
  flex-grow:1;
}
.doc-card .meta-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--border);
  padding-top:14px;
  font-size:12px;
  color:var(--muted);
}
.doc-card .meta-row .kind{
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:600;
}
.doc-card .meta-row .open{
  color:var(--accent);
  font-weight:600;
}
.doc-card .meta-row .open::after{
  content:" →";
}

.tldr{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px 24px;
  margin:24px 0;
}
.tldr h2{font-size:17px;margin:0 0 4px;padding:0;border:0;}
.tldr ul{padding-left:18px;margin:8px 0 0;}
.tldr li{margin:6px 0;color:var(--ink-2);font-size:14px;}
.tldr li strong{color:var(--accent);}

.signature{
  margin-top:48px;
  padding-top:20px;
  border-top:1px solid var(--border);
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  font-size:12.5px;
  color:var(--muted);
}
.signature .left strong{color:var(--accent);font-weight:600;}
.signature .right{text-align:right;}

/* --- 21b. Fixed Top Nav ------------------------------------ */
html{ scroll-padding-top:var(--nav-h); }   /* in-page anchors clear the fixed bar */
body{ padding-top:var(--nav-h); }          /* clear the fixed bar */
.topnav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--nav-h);
  background:rgba(var(--bg-rgb),.82);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border);
}
.topnav .inner{
  max-width:960px; height:100%; margin:0 auto;
  padding:0 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.topnav .brand{
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none; color:var(--accent);
  font-weight:600; font-size:14.5px; letter-spacing:-0.01em;
}
.topnav .brand .mark{
  width:24px; height:24px; border-radius:7px;
  background:var(--accent); color:var(--on-accent);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; letter-spacing:.02em;
}
.topnav .brand .sub{ color:var(--muted); font-weight:500; }
.topnav .brand:hover .mark{ background:var(--accent-soft); }
.topnav .back{
  display:inline-flex; align-items:center; gap:7px;
  text-decoration:none;
  font-size:13px; font-weight:600; letter-spacing:.01em;
  color:var(--accent);
  background:var(--surface);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);
  padding:7px 14px;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.topnav .back::before{ content:"←"; font-size:14px; line-height:1; }
.topnav .back:hover{ border-color:var(--accent); transform:translateY(-1px); box-shadow:var(--shadow); }
.topnav .here{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}

/* --- 22. Print --------------------------------------------- */
@media print{
  .topnav{display:none;}
  body{padding-top:0;background:var(--surface);}
  .page{
    margin:0;
    padding:24px;
    border:0;
    box-shadow:none;
    max-width:none;
    border-radius:0;
  }
  h2{page-break-after:avoid;break-after:avoid;}
  .kpi,.stat,.chip,.callout,.trend,.comp,.option,
  .heatmap .h-cell,.verdict,table.data th{
    print-color-adjust:exact;
    -webkit-print-color-adjust:exact;
  }
}

/* --- 23. Responsive ---------------------------------------- */
@media (max-width:820px){
  .page{padding:28px 22px;border-radius:0;margin:0;border:0;}
  .kpis{grid-template-columns:1fr 1fr;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .comps,.options{grid-template-columns:1fr;}
  .matrix{grid-template-columns:1fr;}
  /* Breite Datentabellen + Heatmap: horizontal scrollen statt den Viewport zu sprengen */
  table.data{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .heatmap{grid-template-columns:84px repeat(5,minmax(84px,1fr));overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .heatmap .h-cell{font-size:10.5px;min-height:80px;}
  .verdict{grid-template-columns:1fr;gap:12px;}
  .verdict .badge{font-size:24px;}
  h1{font-size:28px;}
  h2{font-size:19px;}

  /* Landingpage */
  .hero h1{font-size:30px;}
  .doc-cards{grid-template-columns:1fr;}
  .signature{flex-direction:column;align-items:flex-start;gap:8px;}
  .signature .right{text-align:left;}
}

/* Schmale Phones: KPI-/Stat-Raster einspaltig — 2 Spalten sprengen ≤360px */
@media (max-width:480px){
  .kpis,.stats{grid-template-columns:1fr;}
  .topnav .inner{padding:0 16px;}
  .topnav .brand .sub{display:none;}
}