/* ══════════════════════════════════════════════════════════════════════════
   tc-auswertung.css — gemeinsame Gestaltung der Auswertung
   Eingebunden von quickcheck.html UND full-audit.html.

   WARUM GEMEINSAM: Beide Seiten haben eigene renderResult()/renderReport().
   Die Gestaltung lag dadurch doppelt und lief auseinander — dasselbe Muster
   wie bei den sieben unabhängigen Stufen-Berechnungen (Befund 03.09.2026).
   Diese Datei ist die einzige Quelle für das Aussehen der Auswertung.

   Kevins Entscheidung 04.09.2026:
     Standardansicht  = Option A "Bento"            → .aw-*
     Report-Ansicht   = Option C "Entscheidung zuerst" → .rp-*

   SELBSTVERSORGEND: full-audit.html trägt noch die alte Palette
   (--text-2, --gold-bright). Alle Farben hier haben deshalb eigene
   --aw-Token mit Rückfall, damit die Auswertung in BEIDEN Seiten gleich
   aussieht, egal was die Seite lokal definiert.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --aw-panel:#FFFFFF;
  --aw-panel2:#F4F9FD;
  --aw-navy:#0A1E33;
  --aw-navy2:#12304F;
  --aw-blue:#14477E;
  --aw-blue2:#3A7BC8;
  --aw-wash:#E8F0F8;
  --aw-track:#E7EDF4;
  --aw-gold:#B0872C;
  --aw-goldlt:#D9B45B;
  --aw-goldtxt:#8A671E;
  --aw-ink:#0F1B2A;
  --aw-ink2:#4C5768;
  --aw-ink3:#8B95AC;
  --aw-green:#177C49;
  --aw-amber:#A3541C;
  --aw-red:#A83226;
  --aw-hair:rgba(10,30,51,.09);
  --aw-schatten:0 1px 2px rgba(10,30,51,.04), 0 8px 24px -12px rgba(10,30,51,.10);
  --aw-lift:0 2px 4px rgba(10,30,51,.05), 0 18px 40px -16px rgba(10,30,51,.20);
  --aw-jak:"Plus Jakarta Sans",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --aw-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}
[data-theme="dark"]{
  --aw-panel:#12304F;
  --aw-panel2:#0E2742;
  --aw-blue:#3A7BC8;
  --aw-blue2:#5D9AE0;
  --aw-wash:#14355A;
  --aw-track:#0C1F35;
  --aw-gold:#D9B45B;
  --aw-goldlt:#E9CE86;
  --aw-goldtxt:#E1BE6C;
  --aw-ink:#EAF2FA;
  --aw-ink2:#A9BDD2;
  --aw-ink3:#7A90A8;
  --aw-green:#57BC80;
  --aw-amber:#E0A151;
  --aw-red:#F0645A;
  --aw-hair:rgba(255,255,255,.09);
  --aw-schatten:0 1px 2px rgba(0,0,0,.30), 0 10px 30px -14px rgba(0,0,0,.60);
  --aw-lift:0 2px 6px rgba(0,0,0,.35), 0 20px 46px -18px rgba(0,0,0,.70);
}

/* ── Gemeinsame Bausteine ─────────────────────────────────────────────────── */
.aw, .rp{ font-family:var(--aw-jak); color:var(--aw-ink) }
.aw-kick,.rp-kick{ font-family:var(--aw-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--aw-goldtxt) }
.aw-karte{ background:var(--aw-panel);border:1px solid var(--aw-hair);border-radius:22px;
  padding:20px 22px;box-shadow:var(--aw-schatten) }
.aw-pille{ display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--aw-navy);color:#fff;border:none;cursor:pointer;font:700 13.5px var(--aw-jak);
  padding:13px 22px;border-radius:999px;min-height:48px;text-decoration:none;
  box-shadow:0 10px 24px -10px rgba(10,30,51,.5) }
.aw-pille.blau{ background:var(--aw-blue);box-shadow:0 10px 24px -10px rgba(20,71,126,.55) }
.aw-pille.leer{ background:var(--aw-panel2);color:var(--aw-ink2);border:1px solid var(--aw-hair);box-shadow:none }
.aw-pille:hover{ filter:brightness(1.06) }

/* Dimensionszeile — eine Fassung für beide Ansichten */
.aw-dim{ display:grid;grid-template-columns:120px 1fr 36px;align-items:center;gap:11px;
  margin:11px 0;font-size:12.5px }
.aw-dim .n{ color:var(--aw-ink2) }
.aw-dim .b{ height:8px;border-radius:99px;background:var(--aw-track);overflow:hidden }
.aw-dim .b i{ display:block;height:100%;border-radius:99px }
.aw-dim .v{ text-align:right;font-weight:800;letter-spacing:-.02em }

/* Befund */
.aw-befund{ border-radius:16px;padding:14px 16px;font-size:13.5px;line-height:1.6;
  border:1px solid;margin-bottom:10px }
.aw-befund b{ display:block;margin-bottom:3px }
.aw-befund.critical,.aw-befund.krit{ background:rgba(168,50,38,.06);border-color:rgba(168,50,38,.34) }
.aw-befund.warning,.aw-befund.warn{ background:rgba(163,84,28,.06);border-color:rgba(163,84,28,.30) }
.aw-befund.info{ background:rgba(58,123,200,.07);border-color:rgba(58,123,200,.30) }

/* ══════════ STANDARDANSICHT (Option A · Bento) ══════════════════════════ */
.aw-kopf{ margin:0 0 20px }
.aw-h1{ font-size:32px;font-weight:700;letter-spacing:-.03em;line-height:1.09;margin:8px 0 0 }
.aw-lead{ font-size:14.5px;color:var(--aw-ink2);margin:8px 0 0;max-width:64ch;line-height:1.6 }
.aw-gitter{ display:grid;grid-template-columns:repeat(12,1fr);gap:15px }
.aw-g5{ grid-column:span 5 } .aw-g7{ grid-column:span 7 } .aw-g12{ grid-column:span 12 }
@media(max-width:860px){ .aw-gitter > *{ grid-column:1/-1 } }

.aw-zahl{ font-size:62px;font-weight:800;letter-spacing:-.05em;line-height:.94;color:var(--aw-navy) }
[data-theme="dark"] .aw-zahl{ color:var(--aw-goldlt) }
.aw-zahl small{ font-size:17px;font-weight:600;color:var(--aw-ink2);letter-spacing:0 }
.aw-stufe{ display:inline-flex;align-items:center;gap:7px;margin-top:9px;background:var(--aw-wash);
  color:var(--aw-blue);font:700 12px var(--aw-jak);padding:7px 13px;border-radius:999px }
.aw-stufe.gedeckelt{ background:rgba(163,84,28,.12);color:var(--aw-amber) }
.aw-skala{ height:28px;margin-top:16px;position:relative;border-radius:8px;overflow:hidden;
  background:var(--aw-track) }
.aw-skala i{ position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--aw-navy),#1B5A9E) }
.aw-skala u{ position:absolute;top:-3px;bottom:-3px;left:75%;width:3px;background:var(--aw-goldlt);border-radius:2px }
.aw-skalatext{ display:flex;justify-content:space-between;font-family:var(--aw-mono);font-size:9px;
  letter-spacing:.08em;color:var(--aw-ink3);margin-top:6px }

/* Urteilskarte — dunkel, damit sie die Aussage trägt */
.aw-urteil{ background:linear-gradient(155deg,var(--aw-navy2),var(--aw-navy) 62%);
  border:1px solid transparent;border-radius:22px;padding:20px 22px;color:#EAF2FA;
  box-shadow:var(--aw-schatten) }
.aw-urteil .aw-kick{ color:#9FC0E0 }
.aw-urteil h3{ font-size:19px;font-weight:700;letter-spacing:-.025em;margin:7px 0 0;color:#fff }
.aw-urteil p{ font-size:13.5px;line-height:1.62;color:#A9C4DD;margin:9px 0 0 }
.aw-urteil .marke{ display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  background:var(--aw-goldlt);color:#1A1405;font:800 11px var(--aw-mono);letter-spacing:.1em;
  text-transform:uppercase;padding:7px 12px;border-radius:999px }

/* Nächste Schritte */
.aw-schritte{ display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px }
@media(max-width:700px){ .aw-schritte{ grid-template-columns:1fr } }
.aw-schritt{ background:var(--aw-panel2);border:1px solid var(--aw-hair);border-radius:16px;padding:14px 15px }
.aw-schritt .nr{ width:26px;height:26px;border-radius:999px;background:var(--aw-wash);color:var(--aw-blue);
  display:grid;place-items:center;font:700 12px var(--aw-mono);margin-bottom:9px }
.aw-schritt b{ font-size:13.5px;letter-spacing:-.01em }
.aw-schritt p{ font-size:12.5px;color:var(--aw-ink2);margin:4px 0 0;line-height:1.55 }

/* Der lange Rest (Rechenwerk, Potenzial, Angebote …) bleibt inhaltlich
   unangetastet und bekommt nur eine ruhige Fläche. */
.aw-details{ margin-top:15px;display:grid;gap:15px }
.aw-details > h3{ font-size:16px;font-weight:700;letter-spacing:-.02em;margin:6px 0 0 }

/* ══════════ REPORT-ANSICHT (Option C · Entscheidung zuerst) ═════════════ */
.rp{ max-width:620px;margin:0 auto }
.rp-held{ background:linear-gradient(158deg,var(--aw-navy2),var(--aw-navy) 66%);border-radius:24px;
  padding:26px 24px;color:#EAF2FA;box-shadow:var(--aw-lift);text-align:center;position:relative;overflow:hidden }
.rp-held > *{ position:relative }
.rp-ring{ margin:6px auto 0;position:relative;width:150px;height:150px;display:grid;place-items:center }
.rp-ring svg{ position:absolute;inset:0 }
.rp-ring .z{ font-size:44px;font-weight:800;letter-spacing:-.04em;line-height:1;color:#fff }
.rp-ring .z small{ display:block;font-size:11px;font-weight:600;color:#9FC0E0;letter-spacing:.08em;margin-top:3px }
.rp-urteil{ font-size:20px;font-weight:700;letter-spacing:-.025em;margin:16px 0 0;color:#fff }
.rp-warum{ font-size:13.5px;color:#A9C4DD;line-height:1.6;margin:9px auto 0;max-width:44ch }
.rp-tat{ margin-top:18px }

.rp-falten{ margin-top:14px;display:flex;flex-direction:column;gap:9px }
.rp-falte{ background:var(--aw-panel);border:1px solid var(--aw-hair);border-radius:18px;
  box-shadow:var(--aw-schatten);overflow:hidden }
.rp-kopf{ display:flex;align-items:center;gap:11px;padding:15px 17px;cursor:pointer;user-select:none;
  font-size:14px;font-weight:700;letter-spacing:-.01em;min-height:54px;
  background:none;border:none;width:100%;text-align:left;font-family:var(--aw-jak);color:inherit }
.rp-kopf .ampel{ width:9px;height:9px;border-radius:99px;flex:0 0 auto }
.rp-kopf .zahl{ margin-left:auto;font:600 11px var(--aw-mono);color:var(--aw-ink3);letter-spacing:.06em }
.rp-kopf .chev{ transition:transform .26s cubic-bezier(.23,1,.32,1);color:var(--aw-ink3);flex:0 0 auto }
.rp-falte.auf .chev{ transform:rotate(180deg) }
.rp-koerper{ max-height:0;overflow:hidden;transition:max-height .34s cubic-bezier(.23,1,.32,1) }
.rp-falte.auf .rp-koerper{ max-height:3000px }
.rp-inhalt{ padding:2px 17px 17px;font-size:13.5px;line-height:1.7;color:var(--aw-ink2) }
.rp-inhalt b{ color:var(--aw-ink) }
.rp-inhalt ul,.rp-inhalt ol{ margin:0;padding-left:20px }
.rp-inhalt li{ margin-bottom:6px }

.rp-tipp{ border-left:2px solid var(--aw-gold);background:rgba(176,135,44,.06);
  padding:11px 14px;border-radius:0 12px 12px 0;margin-bottom:10px }
.rp-fuss{ margin-top:18px;font-family:var(--aw-mono);font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--aw-ink3);text-align:center;line-height:1.8 }
.rp-leiste{ display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px }

/* ── DRUCK ────────────────────────────────────────────────────────────────
   Kevins Wahl war Option C als Report. Zusammengefaltet und mit dunklem Held
   wäre der Ausdruck unbrauchbar: der Inhalt bliebe in den Falten verborgen
   und der Held würde ein schwarzer Block. Beim Drucken wird deshalb alles
   aufgeklappt und flach gesetzt. */
@media print{
  .rp{ max-width:100%;margin:0 }
  .rp-held{ background:none !important;color:#000 !important;box-shadow:none !important;
    border:none;border-bottom:2px solid #000;border-radius:0;padding:0 0 14px;text-align:left }
  .rp-held .rp-kick,.rp-held .rp-warum{ color:#333 !important }
  .rp-held .rp-urteil{ color:#000 !important;font-size:22px }
  .rp-ring{ margin:8px 0 0 }
  .rp-ring .z{ color:#000 !important }
  .rp-ring .z small{ color:#444 !important }
  .rp-tat,.rp-leiste,.no-print{ display:none !important }
  .rp-falte{ box-shadow:none !important;border:none;border-bottom:1px solid #bbb;border-radius:0;
    page-break-inside:avoid }
  .rp-kopf{ padding:12px 0 4px;min-height:0;font-size:15px }
  .rp-kopf .chev{ display:none }
  /* Entscheidend: alle Falten offen, unabhängig von der Klasse */
  .rp-koerper{ max-height:none !important;overflow:visible !important }
  .rp-inhalt{ padding:0 0 12px;color:#222 }
  .rp-fuss{ color:#555 }
  .aw-karte,.aw-urteil{ box-shadow:none !important;border:1px solid #ccc !important }
  .aw-urteil{ background:none !important;color:#000 !important }
  .aw-urteil h3,.aw-urteil p{ color:#000 !important }
}

/* ── Handy ───────────────────────────────────────────────────────────────── */
@media(max-width:700px){
  .aw-karte,.aw-urteil{ border-radius:18px;padding:16px 15px }
  .aw-h1{ font-size:25px }
  .aw-zahl{ font-size:52px }
  .aw-gitter{ gap:11px }
  .aw-dim{ grid-template-columns:1fr auto;grid-template-areas:"n v" "b b";gap:4px 10px;margin:13px 0 }
  .aw-dim .n{ grid-area:n } .aw-dim .v{ grid-area:v } .aw-dim .b{ grid-area:b }
  .aw-pille{ width:100% }
  .rp-held{ border-radius:20px;padding:20px 16px }
}
@media (prefers-reduced-motion:reduce){
  .rp-koerper,.rp-falte .chev{ transition:none }
}