/*
 * Stil des pandaworks Website-Checks (Stufe 4 Teil B, ENTWURF-STUFE4B.md, Entscheidungen 2 und 3 vom 02.11.2026).
 * Farben, Schriftstufen und Rundungen aus pandaworks.de: Tinte und Papier, Bambusgrün als einziger Akzent, Nachtgrün
 * mit Minze für Kopf und Fuß. Neu für das Tool: vier Schwere-Farben (nur zusammen mit Wort und Form, nie allein) und
 * der Abdeckungsbalken. Text auf Hell ist nie grau. Grau bleibt Zuständen vorbehalten.
 * Ausgeliefert über Workers Static Assets: kein Inline-Stil, keine fremde Ressource, ladbar mit style-src 'self'.
 * Die PDF-Fassung nutzt weiter den eingebetteten Stil aus src/assets.ts (Netz beim Druck gesperrt).
 */

@font-face { font-family: 'Bricolage Text'; font-weight: 400 800; font-display: swap; src: url('schriften/bricolage-grotesque-text.woff2') format('woff2'); }
@font-face { font-family: 'Bricolage Titel'; font-weight: 800; font-display: swap; src: url('schriften/bricolage-grotesque-titel.woff2') format('woff2'); }
@font-face { font-family: 'Bricolage Kopf'; font-weight: 700; font-display: swap; src: url('schriften/bricolage-grotesque-kopf.woff2') format('woff2'); }
/* Ersatzschrift mit den Maßen von pandaworks.de, damit beim Nachladen nichts springt */
@font-face { font-family: 'Bricolage Text Ersatz'; font-weight: 400 500; src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Helvetica'); size-adjust: 104.2%; ascent-override: 89.72%; descent-override: 26.05%; line-gap-override: 0%; }
@font-face { font-family: 'Bricolage Text Ersatz'; font-weight: 600 800; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Helvetica Bold'); size-adjust: 101.68%; ascent-override: 91.47%; descent-override: 26.55%; line-gap-override: 0%; }
@font-face { font-family: 'Bricolage Titel Ersatz'; font-weight: 800; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Helvetica Bold'); size-adjust: 74.92%; ascent-override: 124.14%; descent-override: 36.04%; line-gap-override: 0%; }
@font-face { font-family: 'Bricolage Kopf Ersatz'; font-weight: 700; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Helvetica Bold'); size-adjust: 88.34%; ascent-override: 105.28%; descent-override: 30.56%; line-gap-override: 0%; }

/* Aufbau: eine Spalte bis 72rem, Kopf und Fuß nachtgrün, dazwischen Papier mit Karten auf heller Fläche. */
:root {
  color-scheme: light;
  /* von pandaworks.de */
  --tinte: #1a1a1a;
  --papier: #fff;
  --flaeche: #f2f2ee;
  --linie: #d5d4cf;
  --akzent: #2f6b3f;
  --akzent-dunkel: #24542f;
  --akzent-flaeche: #e8efdf;
  --nacht: #1e2b25;
  --nacht-2: #2a3b33;
  --minze: #a6dbb4;
  --hell: #e9eee9;
  --fehler: #a3261c;
  /* neu für das Tool: Schwere (je mindestens 7:1 auf Weiß und 6:1 auf --flaeche) */
  --kritisch: #a3261c;
  --hoch: #8a3a00;
  --mittel: #6a5200;
  --niedrig: #2f4f7a;
  --zustand: #8b8a85;   /* nur für Rahmen und nicht erreichte Schritte, nie für Text */
  /* Ringfarben wie Lighthouse/PageSpeed Insights (Mario 03.11.2026: „dunkel rot bei 89 ist erschreckend“): helle
     Signalfarben für den Bogen, leicht getöntes Inneres; die Zahl bleibt in --tinte und trägt die Aussage. */
  --ring-gut: #0cce6b;      --ring-gut-innen: #e7f8ee;
  --ring-mittel: #ffa400;   --ring-mittel-innen: #fff4e0;
  --ring-schwach: #ff4e42;  --ring-schwach-innen: #ffeceb;

  --ersatz: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --schrift: 'Bricolage Text', 'Bricolage Text Ersatz', var(--ersatz);
  --schrift-titel: 'Bricolage Titel', 'Bricolage Titel Ersatz', var(--ersatz);
  --schrift-kopf: 'Bricolage Kopf', 'Bricolage Kopf Ersatz', var(--ersatz);
  --schrift-code: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  --gr-display: clamp(2.25rem, 1.6rem + 3.2vw, 4rem);
  --gr-h2: clamp(1.625rem, 1.3rem + 1.3vw, 2.25rem);
  --gr-vorspann: clamp(1.1875rem, 1.05rem + .5vw, 1.4375rem);
  --gr-h3: 1.25rem;
  --gr-text: 1.125rem;
  --gr-klein: .9375rem;
  --abschnitt: clamp(48px, 6vw, 88px);
  --spalt: clamp(20px, 2.6vw, 36px);
  --breite: 72rem;
}

*, *::before, *::after { box-sizing: border-box; }
/* Wie pandaworks.de (Mario 03.11.2026): dunkler Grund hinter der Seite, damit Safari oben und beim Überziehen dunkel
   bleibt (dazu theme-color im Kopf); Fuß immer unten. */
html { -webkit-text-size-adjust: 100%; background: var(--nacht); scroll-padding-top: 88px; }
body { margin: 0; background: var(--papier); color: var(--tinte); font: 400 var(--gr-text)/1.55 var(--schrift); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
img, svg { max-width: 100%; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
h1 { font: 800 var(--gr-display)/1.04 var(--schrift-titel); letter-spacing: -.01em; }
h2 { font: 700 var(--gr-h2)/1.15 var(--schrift-kopf); }
h3 { font: 700 var(--gr-h3)/1.3 var(--schrift); }
p { margin: 0; }
p, li { max-width: 40em; }
code, pre, kbd { font-family: var(--schrift-code); font-size: .875em; }
a { color: inherit; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
a:hover { text-decoration-thickness: 2px; text-decoration-color: var(--akzent); }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; }
.nacht :focus-visible, .kopf :focus-visible, .fuss :focus-visible { outline-color: var(--minze); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

.breite { width: 100%; max-width: var(--breite); margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.stapel { display: grid; gap: var(--spalt); }
.stapel-eng { display: grid; gap: 12px; }
.abschnitt { padding-block: var(--abschnitt); }
.abschnitt + .abschnitt { padding-top: 0; }
.vorspann { font-size: var(--gr-vorspann); line-height: 1.45; }
.klein { font-size: var(--gr-klein); }
.zahl { font-variant-numeric: tabular-nums; }
/* hidden gilt auch für Elemente mit eigener display-Regel (Knöpfe, die erst das Skript zeigt) */
[hidden] { display: none !important; }
.nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Sprungmarke */
.springen { position: absolute; left: 16px; top: -100px; z-index: 20; padding: 10px 16px; background: var(--minze); color: var(--nacht); font-weight: 600; border-radius: 6px; text-decoration: none; }
.springen:focus { top: 12px; }

/* Kopf */
.kopf { background: var(--nacht); color: var(--papier); position: sticky; top: 0; z-index: 20; }
.kopf-innen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px; padding-block: 10px; min-height: 51px; }
.marke { display: inline-flex; align-items: baseline; gap: 10px; text-decoration: none; }
.marke-wort { font: 700 1.375rem/1 var(--schrift-kopf); }
.marke-tool { font-size: var(--gr-klein); font-weight: 500; color: var(--hell); padding-left: 10px; border-left: 1px solid var(--nacht-2); }
.menue { display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: var(--gr-klein); }
.menue a, .fuss a { text-decoration: none; }
.menue a:hover, .menue a[aria-current], .fuss a:hover { text-decoration: underline 2px var(--minze); text-underline-offset: 6px; }

/* Nachtband für den ersten Bildschirm */
.nacht { background: var(--nacht); color: var(--papier); }
.nacht .vorspann, .nacht p { color: var(--hell); }

/* Fuß */
.fuss { background: var(--nacht); color: var(--hell); font-size: var(--gr-klein); margin-top: var(--abschnitt); }
/* Endet die Seite mit einem dunklen Band (Angebot), schließt die Fußzeile direkt an; sonst bliebe der Abstand als
   weißer Streifen stehen (Mario 03.11.2026). Eine feine Linie trennt beide. */
main:has(> .nacht:last-child) + .fuss { margin-top: 0; border-top: 1px solid rgb(255 255 255 / 0.12); }
.fuss .breite { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding-block: 32px; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }

/* Karten, Raster */
.karte { background: var(--flaeche); border-radius: 14px; padding: clamp(20px, 3vw, 36px); min-width: 0; }
.karte-weiss { background: var(--papier); }
.karte.nacht { background: var(--nacht); }
.karte-rand { background: var(--papier); border: 1.5px solid var(--linie); }
.raster, .raster-3 { display: grid; gap: var(--spalt); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } .raster-3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .raster { grid-template-columns: minmax(0, 1fr); } }
.raster-2 { display: grid; gap: var(--spalt); grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.zwei-spalten { display: grid; gap: var(--spalt); grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 860px) { .zwei-spalten { grid-template-columns: minmax(0, 1fr); } }

/* Knöpfe (wie pandaworks.de: ein gefüllter, ein umrandeter) */
.knopf, .knopf-rand { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 22px; font: 600 1.0625rem/1.2 var(--schrift); border: 1.5px solid transparent; border-radius: 8px; cursor: pointer; text-decoration: none; }
.knopf { background: var(--akzent); border-color: var(--akzent); color: var(--papier); }
.knopf:hover { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); text-decoration: none; }
.knopf-rand { background: transparent; border-color: var(--tinte); color: var(--tinte); }
.knopf-rand:hover { background: var(--nacht-2); border-color: var(--nacht-2); color: var(--papier); text-decoration: none; }
.nacht .knopf { background: var(--minze); border-color: var(--minze); color: var(--nacht); }
.nacht .knopf:hover { background: #c4e9cd; border-color: #c4e9cd; }
.nacht .knopf-rand { border-color: var(--papier); color: var(--papier); }
.nacht .knopf-rand:hover { background: var(--papier); border-color: var(--papier); color: var(--nacht); }
.knopf-klein { min-height: 40px; padding: 6px 14px; font-size: var(--gr-klein); }

/* Formulare */
.feld { display: grid; gap: 6px; }
.feld label, .feld .etikett { font-weight: 600; }
.feld .hilfe { font-size: var(--gr-klein); }
input[type='text'], input[type='email'], input[type='url'], textarea, select {
  font: inherit; color: var(--tinte); background: var(--papier); border: 1.5px solid var(--tinte); border-radius: 6px; padding: 12px 14px; width: 100%; min-height: 48px;
}
textarea { min-height: 7rem; resize: vertical; }
.nacht input[type='text'] { border-color: var(--papier); }
.eingabe-zeile { display: flex; flex-wrap: wrap; gap: 12px; }
.eingabe-zeile input { flex: 1 1 18rem; min-width: 0; font-size: 1.1875rem; }
.kaestchen { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; }
.kaestchen input { width: 22px; height: 22px; margin: 3px 0 0; accent-color: var(--akzent); }
.auswahl { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; }
.auswahl legend { font-weight: 600; margin-bottom: 4px; }
.platzhalter { border: 1.5px dashed var(--zustand); border-radius: 8px; padding: 12px 14px; font-size: var(--gr-klein); }
.nacht .platzhalter { border-color: var(--hell); }

/* Schwere: Wort + Form + Farbe */
.sev { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.sev::before { content: ''; width: 10px; height: 10px; background: currentColor; flex: none; }
.sev-critical { color: var(--kritisch); }
.sev-critical::before { width: 0; height: 0; background: none; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 11px solid currentColor; }
.sev-high { color: var(--hoch); }
.sev-medium { color: var(--mittel); }
.sev-medium::before { border-radius: 50%; }
.sev-low { color: var(--niedrig); }
.sev-low::before { background: none; border: 2px solid currentColor; border-radius: 50%; }
.sev-passed { color: var(--akzent); }
.sev-passed::before { width: 6px; height: 11px; background: none; border: solid currentColor; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px, -2px); }
.sev-info, .sev-not_applicable, .sev-not_checked, .sev-error { color: var(--tinte); }
.sev-info::before, .sev-not_applicable::before, .sev-not_checked::before, .sev-error::before { background: none; border: 1.5px dashed var(--tinte); }

/* Abdeckung: groß, mit Balken */
.abdeckung-zahl { font: 800 clamp(2rem, 1.6rem + 1.6vw, 2.75rem)/1 var(--schrift-titel); font-variant-numeric: tabular-nums; }
meter { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 12px; border-radius: 6px; background: var(--papier); border: 1.5px solid var(--tinte); overflow: hidden; }
meter::-webkit-meter-bar { background: var(--papier); border: 0; border-radius: 6px; height: 12px; }
meter::-webkit-meter-optimum-value, meter::-webkit-meter-suboptimum-value, meter::-webkit-meter-even-less-good-value { background: var(--akzent); border-radius: 0; }
meter::-moz-meter-bar { background: var(--akzent); }

.kategorie { display: grid; gap: 10px; align-content: start; }
.kategorie .wert { font-size: var(--gr-klein); }
.kategorie-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.kategorie-kopf strong { font: 700 1.5rem/1 var(--schrift-kopf); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Große Zahl ist die Abdeckung, beschriftet (Design-Audit Nr. 8) */
.kennzahl { display: grid; justify-items: end; gap: 2px; }
.kennzahl span { font-size: .8125rem; font-weight: 600; }
.kategorie.zu-wenig meter { border-style: dashed; }

/* Befundkarten */
.befund { display: grid; gap: 10px; }
/* Beleg und Lösungsweg abgesetzt (Design-Audit Nr. 9). Schwere nur über Zeichen und Wort, nie als Randbalken
   (Mario 02.11.2026: farbige Seitenränder gelten als Erkennungszeichen KI-erzeugter Gestaltung). */
.befund dd.beleg { background: var(--papier); border-radius: 6px; padding: 6px 12px; font-weight: 500; }
.befund dd.loesung { background: var(--akzent-flaeche); border-radius: 6px; padding: 6px 12px; }
/* Zähler je Schwere unter der Abdeckung (Design-Audit Nr. 7) */
.zaehler { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding-top: 14px; border-top: 1px solid var(--linie); max-width: none; }
.zaehler a { text-decoration: none; }
.zaehler a:hover { text-decoration: underline; }
/* Methodik (Design-Audit Nr. 11–12): Übersicht in voller Breite, Gewicht als Balken, Faktenkasten neben dem Text */
.methodik h2 { scroll-margin-top: 16px; }
.bereich-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; border-top: 1px solid var(--linie); padding-top: 28px; }
.sprungleiste { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pruefliste { width: 100%; border-collapse: collapse; font-size: var(--gr-klein); }
.pruefliste th { text-align: left; font-weight: 600; padding: 8px 12px 8px 0; border-bottom: 1.5px solid var(--tinte); }
.pruefliste td { vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--linie); }
.pruefliste th:nth-child(2), .pruefliste td:nth-child(2) { width: 11rem; }
.pruefliste th:nth-child(3), .pruefliste td:nth-child(3) { width: 4.5rem; }
.pruefliste .pruef-id { display: block; margin-top: 2px; }
.gewicht { display: flex; align-items: center; gap: 10px; }
.gewicht meter { width: 7rem; height: 10px; }
.methodik-detail { align-items: start; }
.methodik-detail > *, .methodik-detail section { min-width: 0; }
.methodik li, .methodik p { overflow-wrap: anywhere; }
.fakten { position: sticky; top: 16px; }
.fakten dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin: 0; }
.fakten dt { font-size: .8125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-top: 10px; }
.fakten dd { margin: 0; overflow-wrap: anywhere; }
.code-block { background: var(--flaeche); border-radius: 8px; padding: 12px 14px; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; font-size: .8125rem; }
.quellen { border-top: 1px solid var(--linie); padding-top: 20px; }
@media (max-width: 860px) { .fakten { position: static; order: -1; } }
@media (max-width: 560px) { .pruefliste th:nth-child(3), .pruefliste td:nth-child(3) { display: none; } .pruefliste th:nth-child(2), .pruefliste td:nth-child(2) { width: 6.5rem; } .gewicht meter { width: 3.5rem; } }
/* nur im Druck: Kopf mit Marke, Adresse, Zeit und die Ergebnisadresse (Design-Audit Nr. 10) */
.nur-druck { display: none; }
.befund-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.befund dl { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 8px 16px; margin: 0; }
.befund dt { font-weight: 600; }
.befund dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) { .befund dl { grid-template-columns: minmax(0, 1fr); } .befund dd { margin-bottom: 6px; } }
.pruef-id { font-family: var(--schrift-code); font-size: .8125rem; }
/* Bereich als ruhiges Etikett statt Prüf-ID (Design-Audit Nr. 2) */
.bereich { font-size: var(--gr-klein); white-space: nowrap; }
.zeilen .bereich::before { content: '· '; }
@media (max-width: 560px) { .zeilen .bereich { display: block; } .zeilen .bereich::before { content: none; } }

/* „Befund stimmt nicht“: aufklappbar, ohne Skript bedienbar */
.rueckmeldung { border-top: 1px solid var(--linie); padding-top: 10px; }
.rueckmeldung summary { cursor: pointer; font-size: var(--gr-klein); font-weight: 600; width: fit-content; }
.rueckmeldung summary:hover { text-decoration: underline 2px var(--akzent); text-underline-offset: 6px; }
.rueckmeldung form { display: grid; gap: 14px; margin-top: 14px; max-width: 36rem; }

/* Liste aller Befunde, eine Zeile je Befund */
.zeilen { list-style: none; padding: 0; margin: 0; display: grid; }
.zeilen li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--linie); max-width: none; }
@media (max-width: 560px) { .zeilen li { grid-template-columns: minmax(0, 1fr); } }

/* Fortschritt */
.schritte { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.schritte li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--linie); max-width: none; }
.schritt-zeichen { width: 28px; height: 28px; border-radius: 50%; border: 1.5px dashed var(--zustand); display: grid; place-items: center; }
.schritte [data-zustand='laeuft'] .schritt-zeichen { border: 3px solid var(--flaeche); border-top-color: var(--akzent); animation: drehen 1s linear infinite; }
.schritte [data-zustand='fertig'] .schritt-zeichen { border: 0; background: var(--akzent); }
.schritte [data-zustand='fertig'] .schritt-zeichen::after { content: ''; width: 7px; height: 12px; border: solid var(--papier); border-width: 0 2.5px 2.5px 0; transform: translate(0, -1px) rotate(45deg); }
.schritte [data-zustand='offen'] .schritt-name { color: var(--tinte); }
.schritt-status { font-size: var(--gr-klein); font-variant-numeric: tabular-nums; text-align: right; }
@keyframes drehen { to { transform: rotate(360deg); } }
progress { -webkit-appearance: none; appearance: none; width: 100%; height: 12px; border: 1.5px solid var(--tinte); border-radius: 6px; background: var(--papier); overflow: hidden; }
progress::-webkit-progress-bar { background: var(--papier); }
progress::-webkit-progress-value { background: var(--akzent); }
progress::-moz-progress-bar { background: var(--akzent); }

/* Hinweisblöcke */
.hinweis { background: var(--akzent-flaeche); padding: 20px 24px; border-radius: 14px; }
.hinweis-grenze { background: var(--flaeche); }
.etikett-rand { display: inline-block; width: fit-content; border: 1px solid currentColor; padding: 1px 8px; font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

/* Angebot am Ende */
/* Bereichsringe wie PageSpeed Insights (Design-Recherche, Mario 02.11.2026): Wert im Ring, festes Farbband
   (0–49 / 50–89 / 90–100), Füllgrad aus Klasse p-N (keine Inline-Stile). Zu wenig geprüft: grau gestrichelt, ohne Wert. */
.ringe { display: grid; gap: 28px 16px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1000px) { .ringe { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .ringe { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bereich-ring { display: grid; justify-items: center; text-align: center; gap: 6px; align-content: start; }
.bereich-ring h3 { font-size: 1.0625rem; margin-top: 6px; }
.bereich-ring p { max-width: 14em; }
.ring { --p: 0; --farbe: var(--zustand); --innen: var(--flaeche); width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(closest-side, var(--innen) 82%, transparent 83%), conic-gradient(var(--farbe) calc(var(--p) * 1%), var(--papier) 0); }
.ring-zahl { font: 800 2rem/1 var(--schrift-titel); font-variant-numeric: tabular-nums; color: var(--tinte); }
.band-gut { --farbe: var(--ring-gut); --innen: var(--ring-gut-innen); }
.band-mittel { --farbe: var(--ring-mittel); --innen: var(--ring-mittel-innen); }
.band-schwach { --farbe: var(--ring-schwach); --innen: var(--ring-schwach-innen); }
/* Gesamtwert: derselbe Ring, größer, mit Erklärung daneben (auf dem Handy darunter). Eigener Klassenname: `.gesamt`
   gehört zur Vertriebsansicht (kleine Schrift, Linie oben). */
.gesamtwert { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; padding-bottom: var(--spalt); border-bottom: 1px solid var(--linie); }
.gesamtwert > .stapel-eng { flex: 1 1 22em; }
.ring-gross { width: 168px; height: 168px; flex: none; }
.ring-gross .ring-zahl { font-size: 3.5rem; }
.gesamt-zeile { font: 700 var(--gr-vorspann)/1.3 var(--schrift-titel); margin: 0; }
.gesamt-stufe { font-weight: 400; color: var(--tinte); }
@media (max-width: 480px) { .gesamtwert { justify-content: center; text-align: center; } .ring-gross { width: 144px; height: 144px; } .ring-gross .ring-zahl { font-size: 3rem; } }
.ring-leer { background: var(--flaeche); border: 3px dashed var(--zustand); }
/* Warteseite (Mario 02.11.2026): dieselben Ringe, leer und ruhig pulsierend, bis das ganze Ergebnis da ist. */
.ring-wartet { background: radial-gradient(closest-side, var(--flaeche) 82%, transparent 83%), var(--linie); animation: warten 1.6s ease-in-out infinite; }
@keyframes warten { 50% { opacity: 0.45; } }
/* Weicher Übergang Warteseite → Ergebnis (View Transitions, ohne Skript; ohne Bewegungswunsch abgeschaltet). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .ringe { view-transition-name: bereiche; }
}
/* „Erneut prüfen“ im Kontext der Messung */
.erneut { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; margin-top: 4px; }
.erneut .kaestchen { flex: 1 1 18em; }
.erneut p { margin: 0; }
.erneut button[disabled] { opacity: 0.6; cursor: not-allowed; }
.ring-leer .ring-zahl { font-size: 1.5rem; }
.p-0{--p:0} .p-1{--p:1} .p-2{--p:2} .p-3{--p:3} .p-4{--p:4} .p-5{--p:5} .p-6{--p:6} .p-7{--p:7} .p-8{--p:8} .p-9{--p:9} .p-10{--p:10} .p-11{--p:11} .p-12{--p:12} .p-13{--p:13} .p-14{--p:14} .p-15{--p:15} .p-16{--p:16} .p-17{--p:17} .p-18{--p:18} .p-19{--p:19} .p-20{--p:20} .p-21{--p:21} .p-22{--p:22} .p-23{--p:23} .p-24{--p:24} .p-25{--p:25} .p-26{--p:26} .p-27{--p:27} .p-28{--p:28} .p-29{--p:29} .p-30{--p:30} .p-31{--p:31} .p-32{--p:32} .p-33{--p:33} .p-34{--p:34} .p-35{--p:35} .p-36{--p:36} .p-37{--p:37} .p-38{--p:38} .p-39{--p:39} .p-40{--p:40} .p-41{--p:41} .p-42{--p:42} .p-43{--p:43} .p-44{--p:44} .p-45{--p:45} .p-46{--p:46} .p-47{--p:47} .p-48{--p:48} .p-49{--p:49} .p-50{--p:50} .p-51{--p:51} .p-52{--p:52} .p-53{--p:53} .p-54{--p:54} .p-55{--p:55} .p-56{--p:56} .p-57{--p:57} .p-58{--p:58} .p-59{--p:59} .p-60{--p:60} .p-61{--p:61} .p-62{--p:62} .p-63{--p:63} .p-64{--p:64} .p-65{--p:65} .p-66{--p:66} .p-67{--p:67} .p-68{--p:68} .p-69{--p:69} .p-70{--p:70} .p-71{--p:71} .p-72{--p:72} .p-73{--p:73} .p-74{--p:74} .p-75{--p:75} .p-76{--p:76} .p-77{--p:77} .p-78{--p:78} .p-79{--p:79} .p-80{--p:80} .p-81{--p:81} .p-82{--p:82} .p-83{--p:83} .p-84{--p:84} .p-85{--p:85} .p-86{--p:86} .p-87{--p:87} .p-88{--p:88} .p-89{--p:89} .p-90{--p:90} .p-91{--p:91} .p-92{--p:92} .p-93{--p:93} .p-94{--p:94} .p-95{--p:95} .p-96{--p:96} .p-97{--p:97} .p-98{--p:98} .p-99{--p:99} .p-100{--p:100}

/* Kontext der Messung unter dem Titel */
.kontext { display: grid; gap: 10px; }
.kontext dl { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 0; font-size: var(--gr-klein); }
.kontext dt { font-size: .8125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.kontext dd { margin: 0; overflow-wrap: anywhere; }
.kontext-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 560px) { .kontext dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Bestandene Prüfungen, eingeklappt */
.bestanden > summary { cursor: pointer; font-weight: 600; padding: 10px 0; }

/* Angebot: ein dunkles Band über die volle Breite, links das Gespräch, rechts die übrigen Leistungen (Mario 02.11.2026) */
.angebot { display: grid; gap: var(--spalt) calc(var(--spalt) * 2); grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 860px) { .angebot { grid-template-columns: minmax(0, 1fr); } .leistungen { border-top: 1px solid var(--nacht-2); padding-top: 24px; margin-top: 8px; } }
.angebot-kopf { grid-column: 1 / -1; }
.gespraech h3 { font: 700 1.5rem/1.2 var(--schrift-kopf); color: var(--papier); }
.gespraech .preis { color: var(--minze); }
.gespraech .knopf { margin-top: 6px; }
.leistungen dl { margin: 0; }
.leistungen dl > div { padding: 16px 0; border-top: 1px solid var(--nacht-2); }
.leistungen dl > div:first-child { border-top: 0; padding-top: 0; }
.leistungen dt { font-weight: 700; color: var(--papier); }
.leistungen dd { margin: 4px 0 0; color: var(--hell); }
.preis { font: 700 1.125rem/1.2 var(--schrift-kopf); }

/* Gesamtwert: bewusst klein und zuletzt */
.gesamt { font-size: var(--gr-klein); border-top: 1px solid var(--linie); padding-top: 16px; }

.tabelle { overflow-x: auto; }
.tabelle table { border-collapse: collapse; width: 100%; font-size: var(--gr-klein); }
.tabelle th, .tabelle td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--linie); }

/*
 * Berichtsseite aus Teil A: gleiche Klassen wie packages/report (banner, cats, finding …), neuer Stil.
 * So kann Teil B die Vorlage behalten und nur das Stylesheet tauschen.
 */
.bericht h1 { font-size: clamp(2rem, 1.5rem + 2.4vw, 3.25rem); }
.bericht h2 { margin-top: 12px; }
.bericht .meta, .bericht .muted { font-size: var(--gr-klein); }
.bericht .url { overflow-wrap: anywhere; }
.bericht .banner { background: var(--flaeche); border-radius: 14px; padding: clamp(20px, 3vw, 36px); display: grid; gap: 12px; }
.bericht .banner h2 { margin: 0; font-size: var(--gr-klein); font-family: var(--schrift); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.bericht .coverage { font: 800 clamp(1.75rem, 1.3rem + 2vw, 2.75rem)/1.1 var(--schrift-titel); font-variant-numeric: tabular-nums; }
.bericht .cats { display: grid; gap: var(--spalt); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.bericht .cat { background: var(--flaeche); border-radius: 14px; padding: 20px 24px; display: grid; gap: 8px; align-content: start; }
.bericht .cat h3 { margin: 0; }
.bericht .cat strong { font: 700 1.5rem/1 var(--schrift-kopf); font-variant-numeric: tabular-nums; }
.bericht .cat .score { font-size: var(--gr-klein); }
.bericht ol.top { display: grid; gap: 10px; padding-left: 1.5rem; margin: 0; }
.bericht ol.top li { max-width: none; }
.bericht .finding { border: 1.5px solid var(--linie); border-radius: 14px; padding: 4px 20px; background: var(--papier); }
.bericht .finding[open] { padding-bottom: 18px; }
.bericht .finding > summary { cursor: pointer; padding: 12px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.bericht .finding > summary .muted { font-family: var(--schrift-code); font-size: .8125rem; }
.bericht .finding dl { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 10px 18px; margin: 6px 0 14px; }
.bericht .finding dt { font-weight: 600; }
.bericht .finding dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) { .bericht .finding dl { grid-template-columns: minmax(0, 1fr); } .bericht .finding dd { margin-bottom: 6px; } }
.bericht pre { background: var(--flaeche); border-radius: 8px; padding: 12px 14px; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; margin: 6px 0; font-size: .8125rem; }
.bericht .code .label { font-size: var(--gr-klein); font-weight: 600; display: flex; align-items: center; gap: 10px; }
.bericht button[data-copy] { font: 600 .8125rem/1 var(--schrift); padding: 6px 10px; min-height: 32px; border: 1.5px solid var(--tinte); border-radius: 6px; background: var(--papier); color: var(--tinte); cursor: pointer; }
.bericht button[data-copy]:hover { background: var(--nacht-2); border-color: var(--nacht-2); color: var(--papier); }
.bericht .filters { display: flex; flex-wrap: wrap; gap: 12px 20px; background: var(--flaeche); border-radius: 14px; padding: 14px 18px; }
.bericht .filters label { display: grid; gap: 4px; font-size: var(--gr-klein); font-weight: 600; }
.bericht .filters select { min-height: 44px; padding: 8px 10px; }
.bericht .overall { border-top: 1px solid var(--linie); padding-top: 16px; font-size: var(--gr-klein); }
.bericht .overall h2 { font: 600 var(--gr-klein)/1.4 var(--schrift); }
.bericht footer { font-size: var(--gr-klein); display: grid; gap: 8px; }

/* Teil A im neuen Stil: Meldungen, Tabellen und Formulare der Vertriebsansicht und Methodik */
.bericht table { border-collapse: collapse; width: 100%; font-size: var(--gr-klein); display: block; overflow-x: auto; }
.bericht th, .bericht td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--linie); }
.bericht form.stack { display: grid; gap: 14px; max-width: 40rem; }
.bericht form.stack label { display: grid; gap: 6px; font-weight: 600; }
.bericht form button[type='submit'] { justify-self: start; min-height: 48px; padding: 10px 22px; font: 600 1.0625rem/1.2 var(--schrift); border: 1.5px solid var(--akzent); border-radius: 8px; background: var(--akzent); color: var(--papier); cursor: pointer; }
.bericht form button[type='submit']:hover { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); }
.bericht p.banner { display: block; }
.msg { background: var(--akzent-flaeche); padding: 12px 16px; border-radius: 8px; }
.msg.err { background: var(--flaeche); color: var(--fehler); }

/* Köderfeld gegen Formular-Bots: für Menschen unsichtbar, nicht per Tab erreichbar */
.falle { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Druckansicht der Kurzauswertung (statt PDF-Mail): ohne Kopf, Fuß, Formulare und Knöpfe, A4, kleinere Schrift.
   Raster werden im Druck zu Blockfluss mit Inline-Blöcken: Grid-Elemente teilt WebKit trotz break-inside über
   Seitengrenzen, Inline-Blöcke nie. Media-Queries nach Breite greifen beim Drucken nicht verlässlich (Safari misst das
   Fenster), deshalb feste zwei Spalten. */
@media print {
  @page { size: A4; margin: 14mm 13mm 16mm; }
  :root { --gr-display: 26pt; --gr-h2: 16pt; --gr-vorspann: 11.5pt; --gr-h3: 11.5pt; --gr-text: 10pt; --gr-klein: 8.5pt; --abschnitt: 16pt; --spalt: 9pt; }
  html { font-size: 10pt; }
  body { background: #fff; line-height: 1.45; }
  .kopf, .fuss, .noprint, .springen, .falle { display: none !important; }
  .nur-druck { display: block; }
  .druckkopf { font-size: 8.5pt; padding-bottom: 6pt; border-bottom: 1px solid var(--linie); }
  @page { @bottom-right { content: counter(page) " / " counter(pages); font: 8pt sans-serif; } }
  .ring, .zaehler .sev, .befund dd.beleg, .befund dd.loesung { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a { color: inherit; text-decoration: none; }
  p, li { max-width: none; orphans: 3; widows: 3; }
  h1, h2, h3, .befund-kopf { break-after: avoid; }
  .breite { padding-left: 0; padding-right: 0; max-width: none; }

  .stapel, .stapel-eng, .raster, .raster-2, .raster-3, .zwei-spalten, .bericht .cats { display: block; }
  .stapel > * + *, .stapel-eng > * + * { margin-top: var(--spalt); }
  .raster > *, .raster-2 > *, .raster-3 > *, .bericht .cats > * { display: inline-block; vertical-align: top; width: 48.5%; margin: 0 0 var(--spalt); }
  .raster > :nth-child(odd), .raster-2 > :nth-child(odd), .raster-3 > :nth-child(odd), .bericht .cats > :nth-child(odd) { margin-right: 2%; }
  .raster > .kategorie { display: inline-grid; }

  .karte, .bericht .finding, .bericht .cat, .zeilen li, .hinweis { break-inside: avoid; }
  .karte { padding: 10pt 12pt; border-radius: 8px; border: 1px solid var(--linie); }
  .kategorie-kopf strong { font-size: 13pt; }
  meter, .sev::before, .schwere, .bericht .sev { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .zeilen li { padding: 5pt 0; }
  .befund { display: block; }
  .befund > * + * { margin-top: 6pt; }
}