:root{
  --ink:#0F1218; --soft:#39414E; --muted:#727C8A; --faint:#9AA3B0;
  --line:#E4E7EC; --line2:#CDD3DB; --wash:#F7F8FA; --paper:#FFFFFF;
  --signal:#B23C16; --signal-bg:#FBEDE7; --signal-soft:#E4A891;
  --warn:#8A6200; --warn-bg:#FCF4E2; --warn-soft:#DCC183;
  --neutral:#4A5464; --neutral-bg:#EDEFF3; --neutral-soft:#B4BCC8;
  --ok:#1B6144; --ok-bg:#E7F1EC;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,"DejaVu Sans Mono",monospace;
  --r:10px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--wash);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:640;letter-spacing:-.021em;line-height:1.15}
p{margin:0}
a{color:var(--signal);text-underline-offset:2px}
.wrap{max-width:56rem;margin:0 auto;padding:0 1.5rem}
@media(max-width:620px){.wrap{padding:0 1.1rem}}

/* Hinweisband */
.notice{background:var(--ink);color:#E8EBEF;padding:1.1rem 0;font-size:.9rem;line-height:1.55}
.notice b{color:#fff;font-weight:640}

/* Kopf */
.sheet{background:var(--paper);border-left:1px solid var(--line);border-right:1px solid var(--line)}
.hero{padding:3.2rem 0 2.4rem}
.kicker{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.hero h1{font-size:clamp(2rem,5.2vw,2.9rem);margin-top:.7rem}
.hero .sub{margin-top:.9rem;color:var(--soft);font-size:1.05rem;max-width:44rem}

/* Zahlenband */
.stats{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:2rem}
@media(max-width:760px){.stats{grid-template-columns:1fr 1fr}}
.stat{background:var(--paper);padding:1.1rem 1.1rem 1.2rem}
.stat .lbl{font-size:.78rem;color:var(--muted);letter-spacing:.01em}
.stat .val{margin-top:.35rem;font-size:2rem;font-weight:660;letter-spacing:-.03em;line-height:1}
.stat.lead .val{font-size:3.2rem;color:var(--signal)}
.stat .note{margin-top:.4rem;font-size:.78rem;color:var(--faint)}

/* Verteilungsbalken */
.dist{margin-top:1.6rem}
.dist .bar{display:flex;gap:2px;height:14px;margin-top:.7rem}
.dist .seg{border-radius:2px}
.dist .seg:first-child{border-radius:7px 2px 2px 7px}
.dist .seg:last-child{border-radius:2px 7px 7px 2px}
.dist .keys{display:flex;flex-wrap:wrap;gap:1.1rem;margin-top:.75rem;font-size:.84rem;color:var(--soft)}
.dist .key{display:flex;align-items:center;gap:.45rem}
.dist .dot{width:9px;height:9px;border-radius:50%;flex:none}
.dist .n{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}

/* Umfang */
.scope{margin-top:2rem;background:var(--wash);border:1px solid var(--line);border-radius:var(--r);padding:1.2rem 1.3rem;font-size:.92rem;color:var(--soft)}
.scope p+p{margin-top:.8rem}
.scope .h{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}

section{padding:2.6rem 0}
section+section{border-top:1px solid var(--line)}
.sechead{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.sechead h2{font-size:1.45rem}
.sechead .meta{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.lead{margin-top:.7rem;color:var(--soft);max-width:44rem}

/* Tabelle */
.tblwrap{margin-top:1.4rem;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
table.ov{width:100%;border-collapse:collapse;font-size:.92rem}
table.ov th{text-align:left;font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);font-weight:400;padding:.7rem .9rem;background:var(--wash);border-bottom:1px solid var(--line)}
table.ov td{padding:.62rem .9rem;border-bottom:1px solid var(--line);vertical-align:middle}
table.ov tr:last-child td{border-bottom:0}
table.ov tr:hover td{background:#FCFCFD}
table.ov td.num{font-family:var(--mono);color:var(--faint);width:2.6rem;font-variant-numeric:tabular-nums}
table.ov td.st{width:8.5rem}
table.ov td.eff{font-family:var(--mono);font-size:.8rem;color:var(--muted);width:5rem;text-align:right}
@media(max-width:620px){table.ov td.eff,table.ov th.eff{display:none}table.ov td.st{width:auto}}

.pill{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;font-weight:600;letter-spacing:.01em;
  padding:.2rem .5rem .2rem .42rem;border-radius:99px;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.p-ab{background:var(--signal-bg);color:var(--signal)}
.p-fehlt{background:var(--warn-bg);color:var(--warn)}
.p-klar{background:var(--neutral-bg);color:var(--neutral)}
.p-ok{background:var(--ok-bg);color:var(--ok)}

/* Funde */
.finding{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);margin-top:1.1rem;overflow:hidden}
.finding>.top{display:flex;gap:1rem;justify-content:space-between;align-items:flex-start;
  padding:1.1rem 1.3rem;border-bottom:1px solid var(--line);border-left:3px solid var(--signal-soft)}
.finding.f-fehlt>.top{border-left-color:var(--warn-soft)}
.finding>.top h3{font-size:1.12rem;letter-spacing:-.015em}
.finding .fnum{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;color:var(--faint);white-space:nowrap;padding-top:.2rem}
.finding .body{padding:1.1rem 1.3rem 1.3rem}
.row{display:grid;grid-template-columns:6.2rem 1fr;gap:.9rem;padding:.75rem 0;border-top:1px solid var(--line)}
.row:first-child{border-top:0;padding-top:0}
@media(max-width:620px){.row{grid-template-columns:1fr;gap:.25rem}}
.row .k{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-top:.25rem}
.row .v{color:var(--soft)}
.row .v strong{color:var(--ink);font-weight:640}

code{font-family:var(--mono);font-size:.84rem;background:var(--wash);border:1px solid var(--line);
  padding:.05rem .3rem;border-radius:4px;color:var(--ink)}
pre.code{font-family:var(--mono);font-size:.82rem;background:#0F1218;color:#D8DEE7;border-radius:8px;
  padding:.85rem 1rem;margin:.6rem 0 0;overflow-x:auto;line-height:1.6}
pre.code .hl{color:#F0A184}

table.svc{width:100%;border-collapse:collapse;margin-top:.75rem;font-size:.87rem}
table.svc th{text-align:left;font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-weight:400;border-bottom:1px solid var(--line2);padding:.35rem .5rem}
table.svc td{padding:.42rem .5rem;border-bottom:1px solid var(--line);color:var(--soft)}
table.svc td.n{font-family:var(--mono);text-align:right;white-space:nowrap;width:5.2rem;
  font-variant-numeric:tabular-nums;color:var(--ink)}
table.svc td.h{font-family:var(--mono);font-size:.8rem;color:var(--muted);word-break:break-all}

.shot{margin-top:.9rem;border:1px dashed var(--line2);border-radius:8px;background:var(--wash);
  padding:.7rem .9rem;font-size:.8rem;color:var(--muted);line-height:1.5}

/* Zeitachse */
.timeline{margin-top:.9rem;border:1px solid var(--line);border-radius:8px;padding:1rem 1rem .6rem;background:var(--paper)}
.timeline .cap{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.timeline svg{width:100%;height:auto;display:block;margin-top:.5rem}

/* Reihenfolge */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;margin-top:1.3rem}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.step{border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.1rem;background:var(--paper)}
.step .n{font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--signal)}
.step .t{margin-top:.4rem;font-weight:640;font-size:.95rem}
.step .d{margin-top:.45rem;font-size:.88rem;color:var(--soft)}

ul.plain{margin:.9rem 0 0;padding-left:1.15rem;color:var(--soft)}
ul.plain li{margin-bottom:.5rem}

.signoff{padding:1.6rem 0 2.6rem;font-size:.86rem;color:var(--muted);border-top:1px solid var(--line)}

/* CTA */
.cta{background:var(--ink);color:#fff;padding:3rem 0}
.cta h2{font-size:1.6rem;color:#fff}
.cta p{margin-top:.8rem;color:#B9C0CB;max-width:40rem}
.cta .btn{display:inline-block;margin-top:1.4rem;background:#fff;color:var(--ink);text-decoration:none;
  font-weight:640;font-size:.95rem;padding:.8rem 1.4rem;border-radius:8px}
.foot{padding:1.4rem 0 2.5rem;font-size:.82rem;color:var(--muted)}
.foot a{color:var(--muted)}

/* ---------- Druckfassung ---------- */
@media print {
  @page { size: A4; margin: 16mm 14mm 18mm 14mm; }
  html, body { background: #fff !important; font-size: 9.7pt; }
  .wrap { max-width: none; padding: 0; }
  .sheet { border: 0; }
  a { color: var(--ink); text-decoration: none; }

  .notice { background: #fff !important; color: var(--soft) !important;
            border: 1px solid var(--line2); border-radius: 8px; padding: 9px 12px;
            font-size: 8.6pt; margin-bottom: 14px; }
  .notice b { color: var(--ink) !important; }

  .hero { padding: 0 0 14px; }
  .hero h1 { font-size: 21pt; }
  .hero .sub { font-size: 10pt; margin-top: 6px; }
  .stats { margin-top: 14px; grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .stat { padding: 9px 10px; }
  .stat .val { font-size: 16pt; }
  .stat.lead .val { font-size: 24pt; }
  .stat .lbl, .stat .note { font-size: 7.6pt; }
  .dist { margin-top: 12px; }
  .scope { margin-top: 14px; padding: 10px 12px; font-size: 8.8pt; }

  section { padding: 16px 0; break-inside: auto; }
  section + section { border-top: 1px solid var(--line); }
  .sechead h2 { font-size: 12.5pt; }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  .lead { font-size: 9.4pt; }

  .tblwrap { break-inside: auto; }
  table.ov { font-size: 8.6pt; }
  table.ov th { padding: 5px 7px; }
  table.ov td { padding: 4px 7px; }
  table.ov tr { break-inside: avoid; page-break-inside: avoid; }
  table.ov tr:hover td { background: transparent; }

  .finding { break-inside: auto; margin-top: 10px; }
  .finding > .top { break-after: avoid; page-break-after: avoid; padding: 9px 12px; }
  .finding > .top h3 { font-size: 11pt; }
  .finding .body { padding: 9px 12px 11px; }
  .row { break-inside: avoid; page-break-inside: avoid; padding: 7px 0; }
  .row .k { font-size: 7.4pt; }
  pre.code { break-inside: avoid; page-break-inside: avoid; font-size: 8pt; padding: 8px 10px; }
  table.svc { font-size: 8.4pt; }
  table.svc tr { break-inside: avoid; page-break-inside: avoid; }
  .timeline { break-inside: avoid; page-break-inside: avoid; }
  .shot { break-inside: avoid; font-size: 8pt; }

  .steps { break-inside: avoid; page-break-inside: avoid; gap: 8px; }
  .step { padding: 9px 10px; }
  .step .d { font-size: 8.6pt; }
  ul.plain li { font-size: 9.2pt; }

  .signoff { break-inside: avoid; page-break-inside: avoid; font-size: 8.4pt; padding: 12px 0 0; }

  .cta { background: #fff !important; color: var(--ink) !important;
         border: 1px solid var(--line2); border-radius: 8px;
         padding: 14px 16px !important; margin-top: 18px;
         break-inside: avoid; page-break-inside: avoid; }
  .cta h2 { color: var(--ink) !important; font-size: 12pt; }
  .cta p { color: var(--soft) !important; font-size: 9.2pt; }
  .cta .btn { display: none; }
  .cta::after { content: "shopbefund.de  ·  eric@shopbefund.de";
                display: block; margin-top: 10px; font-family: var(--mono);
                font-size: 9pt; color: var(--ink); }
  .foot { display: none; }
}

/* ==========================================================================
   Ergaenzt beim Einbau auf shopbefund.de, 29.08.2026
   Die Seite laeuft unter der Content-Security-Policy der Seite:
   style-src 'self', ohne unsafe-inline. Ein <style>-Block und ein
   style-Attribut waeren dort beide gesperrt, die Seite kaeme ohne jede
   Gestaltung an. Deshalb liegt der Stil in dieser Datei, und die dreizehn
   Werte, die vorher im Attribut standen, stehen jetzt als Klassen hier.
   ========================================================================== */

/* Schriften der Seite, damit der Bericht aussieht wie der Rest. Dieselben
   Dateien wie in basis.css, vom eigenen Server, kein fremder Host. */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/inter-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/inter-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/inter-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/geist-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/geist-mono-latin-500-normal.woff2") format("woff2")}
:root{
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,"DejaVu Sans Mono",monospace;
}

/* Die drei Segmente des Verteilungsbalkens. Die Zahlen sind die Fundzahlen
   je Status: 13 weicht ab, 9 fehlt, 2 Nachweis oder Klaerung noetig. */
.dist .seg-a{flex:13;background:var(--signal)}
.dist .seg-b{flex:9;background:var(--warn)}
.dist .seg-c{flex:2;background:var(--neutral)}
.dist .dot-a{background:var(--signal)}
.dist .dot-b{background:var(--warn)}
.dist .dot-c{background:var(--neutral)}

.abstand{margin-top:.7rem}
.abstand-gross{margin-top:1rem}