/* Nexus Sichtbarkeits-Check — Oberfläche im NOVA-Look von nexus-ki.de.
   ────────────────────────────────────────────────────────────────────────
   Die Marken (Farben, Maße, Radien) sind aus DESIGNSYSTEM.md der Website
   übernommen, damit der Besucher beim Wechsel von nexus-ki.de hierher
   keinen Bruch sieht. Regeln von dort, die hier gelten:

   · Die Akzentfarbe hat DREI Rollen. --accent ist NUR Deko (Verläufe,
     Leuchten). Alles, was Schrift ist, nimmt --accent-text. Jede Fläche mit
     weißer Schrift nimmt --accent-fl. Wer var(--accent) für Schrift benutzt,
     baut einen Kontrastfehler ein.
   · In clamp()/calc() muss um + und − ein LEERZEICHEN stehen, sonst
     verwirft der Browser die ganze Deklaration (kostete die Website
     am 09.08.2026 dreizehn Schriftgrade).
   · [hidden] muss display:flex/grid schlagen — sonst steht eine leere
     Karte offen (dieselbe Falle wie in der ersten Fassung dieser App).
   · Der Druckblock steht als LETZTE Regel und setzt die Dunkelmodus-Farben
     zurück, sonst druckt Text unsichtbar auf Papier.
*/

/* ── Marken ───────────────────────────────────────────────────────────── */
:root {
  --nxw: 1080px;
  --rand: clamp(20px, 6.25vw, 84px);
  --lese: 660px;
  --rad: 28px;
  --rad-klein: 12px;
  --rad-pille: 980px;
  --ease: cubic-bezier(.4, 0, .6, 1);
  --takt: .32s;

  --flaeche-a: #FBFCFF;
  --flaeche-b: #EEF2FC;
  --karte: #FFFFFF;
  --ink: #1D1D1F;
  --ink2: #5B5B61;          /* auf #FFFFFF 6,6:1 · auf #EEF2FC 6,0:1 */
  --line: #D5DDF2;
  --line-fein: #E3E9F8;

  --accent: #2F63E8;        /* nur Deko */
  --accent-text: #2F63E8;   /* Schrift und Symbole (5,16:1 auf Weiß) */
  --accent-fl: #2F63E8;     /* Flächen mit weißer Schrift */
  --accent2: #0B7387;

  --gut: #1D5C2E;
  --mittel: #7A4F00;
  --schlecht: #A3231B;
  --offen: #6E6E73;

  --ring-a: #2F63E8;
  --ring-b: #0B7387;

  --nav: rgba(251, 252, 255, .72);
  --navb: rgba(47, 99, 232, .14);
  --glas: rgba(255, 255, 255, .70);
  --schatten: 0 20px 50px -30px rgba(47, 99, 232, .28);
  --schimmer-1: rgba(47, 99, 232, .10);
  --schimmer-2: rgba(11, 115, 135, .08);
  color-scheme: light;
}

html[data-theme="dark"] {
  --flaeche-a: #05070F;
  --flaeche-b: #0A0E1D;
  --karte: rgba(255, 255, 255, .045);
  --ink: #F5F7FF;
  --ink2: #A8B4D0;          /* auf #05070F 9,7:1 */
  --line: rgba(140, 170, 255, .18);
  --line-fein: rgba(140, 170, 255, .10);

  --accent: #3F7BFF;
  --accent-text: #93B8FF;   /* auf dunklem Grund 8,2:1 */
  --accent-fl: #2F63E8;
  --accent2: #2CB4CE;

  --gut: #4ADE80;
  --mittel: #F5C860;
  --schlecht: #FF8A80;
  --offen: #9AA3B8;

  --ring-a: #4C82FF;
  --ring-b: #2CB4CE;

  --nav: rgba(13, 17, 32, .70);
  --navb: rgba(140, 170, 255, .16);
  --glas: rgba(255, 255, 255, .05);
  --schatten: 0 24px 70px -34px rgba(0, 0, 0, .85);
  --schimmer-1: rgba(63, 123, 255, .20);
  --schimmer-2: rgba(44, 180, 206, .12);
  color-scheme: dark;
}

/* ── Grundlagen ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; min-height: 100%; }
html { overflow-x: clip; }   /* NICHT hidden — das macht sticky wirkungslos */

body {
  font-family: -apple-system, "SF Pro Text", "SF Pro Display", BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.4706;
  letter-spacing: -0.022em;
  color: var(--ink);
  background: var(--flaeche-a);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; }
h1 {
  font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem);
  line-height: 1.05; letter-spacing: -0.015em;
  hyphens: auto; overflow-wrap: break-word;   /* deutsche Komposita */
}
p { margin: 0; }
a { color: var(--accent-text); }

.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Sichtbarer Fokus — Tastaturbedienung muss erkennbar bleiben. */
:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--accent-text);
  outline-offset: 2px;
  border-radius: 6px;
}
/* Ausnahme: Nach der Prüfung springt der Fokus auf die Bewertung, damit
   Vorlese-Programme das Ergebnis ansagen. Chromium zeichnet dabei einen
   Rahmen, als wäre die Überschrift ein Eingabefeld — der muss weg, sonst
   sieht das Ergebnis nach Formular aus (im Bild vom 11.08.2026 gesehen). */
.score-note:focus, .score-note:focus-visible { outline: none; }

/* Ruhiger Farbschimmer hinter allem, wie die Bühnen der Website. */
.schimmer {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(52% 40% at 78% -6%, var(--schimmer-1), transparent 68%),
    radial-gradient(46% 36% at -8% 22%, var(--schimmer-2), transparent 70%),
    var(--flaeche-a);
}

/* ── Kopfzeile: schwebende Glas-Pille wie auf nexus-ki.de ─────────────── */
.kopf {
  position: sticky; top: 12px; z-index: 40;
  width: min(var(--nxw), calc(100% - 2 * var(--rand)));
  margin: 12px auto 0;
  padding: 10px 10px 10px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-radius: var(--rad-pille);
  background: var(--nav);
  border: 1px solid var(--navb);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .kopf { background: var(--flaeche-a); }
}
.marke {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink); text-decoration: none; font-weight: 600;
  letter-spacing: -0.01em;
}
.marke-bild { border-radius: 8px; display: block; }
.marke-text strong { color: var(--accent-text); font-weight: 600; }
.kopf-rechts { display: flex; align-items: center; gap: 8px; }

.pille {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 38px; padding: 0 18px;
  border-radius: var(--rad-pille);
  background: var(--accent-fl); color: #fff;
  text-decoration: none; font-size: 15px; font-weight: 500;
  border: 0; cursor: pointer;
  transition: transform var(--takt-kurz, .16s) var(--ease), filter var(--takt) var(--ease);
}
.pille:hover { filter: brightness(1.08); }
.pille.still {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line);
}
.pille.still:hover { border-color: var(--accent-text); filter: none; }
.thema-dunkel { display: none; }
html[data-theme="dark"] .thema-hell { display: none; }
html[data-theme="dark"] .thema-dunkel { display: inline; }

/* ── Inhalt ───────────────────────────────────────────────────────────── */
.inhalt {
  width: min(var(--nxw), calc(100% - 2 * var(--rand)));
  margin: 0 auto;
  padding: clamp(40px, 7vw, 88px) 0 64px;
  display: grid; gap: 28px;
}

.buehne { display: grid; gap: 18px; justify-items: start; }
.eyebrow {
  font-size: clamp(1.05rem, 1rem + .25vw, 1.2rem);
  font-weight: 600; letter-spacing: .009em;
  color: var(--ink2);
}
.lead {
  font-size: clamp(1.1875rem, 1.13rem + .3vw, 1.3125rem);
  line-height: 1.381; letter-spacing: .011em;
  color: var(--ink2); max-width: var(--lese);
}
.lead strong { color: var(--ink); font-weight: 600; }

/* ── Eingabe ──────────────────────────────────────────────────────────── */
.eingabe-zeile {
  display: flex; gap: 10px; flex-wrap: wrap;
  width: 100%; max-width: 680px; margin-top: 6px;
}
.feld {
  font: inherit; color: var(--ink);
  background: var(--karte);
  border: 1px solid var(--line);
  border-radius: var(--rad-klein);
  padding: 14px 16px;
  min-height: 48px;
  width: 100%;
}
.eingabe-zeile .feld { flex: 1 1 260px; width: auto; font-size: 1.0625rem; }
.feld::placeholder { color: var(--offen); }
.feld:focus { border-color: var(--accent-text); }

.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px;
  border: 0; border-radius: var(--rad-pille);
  font: inherit; font-weight: 500; letter-spacing: -0.01em;
  cursor: pointer; text-decoration: none;
  transition: transform var(--takt) var(--ease), filter var(--takt) var(--ease);
}
.knopf.haupt { background: var(--accent-fl); color: #fff; }
.knopf.haupt:hover { filter: brightness(1.08); transform: translateY(-1px); }
.knopf.haupt:disabled { opacity: .55; cursor: default; transform: none; filter: none; }
.knopf.still {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line);
}
.knopf.still:hover { border-color: var(--accent-text); }
.knopf.hell { background: #fff; color: #12225A; }
.knopf.leer { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.45); }
.knopf.hell:hover, .knopf.leer:hover { filter: brightness(1.06); }

.fehler {
  margin-top: 4px; padding: 12px 16px;
  border-radius: var(--rad-klein);
  background: color-mix(in srgb, var(--schlecht) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--schlecht) 34%, transparent);
  color: var(--ink); max-width: 680px;
}

.zusagen {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin: 4px 0 0; padding: 0; list-style: none;
  color: var(--ink2); font-size: 15px;
}
.zusagen li { display: flex; align-items: center; gap: 8px; }
.zusagen li::before {
  content: ""; width: 16px; height: 16px; flex: none;
  border-radius: 50%;
  background: var(--gut);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ── „Was wird geprüft" ───────────────────────────────────────────────── */
.was-karten {
  display: grid; gap: 14px; width: 100%; margin-top: 22px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.was {
  padding: 20px;
  border-radius: var(--rad);
  background: var(--karte);
  box-shadow: inset 0 0 0 1px var(--line-fein), var(--schatten);
}
.was-nr {
  display: block; font-size: 13px; font-weight: 600;
  letter-spacing: .06em; color: var(--accent-text); margin-bottom: 6px;
}
.was h2 { font-size: 1.3125rem; letter-spacing: .007em; }
.was p { color: var(--ink2); font-size: 15px; margin-top: 4px; }

/* ── Karten ───────────────────────────────────────────────────────────── */
.karte {
  padding: clamp(20px, 3vw, 32px);
  border-radius: var(--rad);
  background: var(--karte);
  box-shadow: inset 0 0 0 1px var(--line-fein), var(--schatten);
}
html[data-theme="dark"] .karte,
html[data-theme="dark"] .was {
  box-shadow: inset 0 0 0 1px var(--line-fein), 0 24px 70px -40px #000;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.karten-titel {
  font-size: 1.3125rem; letter-spacing: .007em; margin-bottom: 12px;
}

/* ── Fortschritt ──────────────────────────────────────────────────────── */
.fortschritt { display: flex; gap: 18px; align-items: flex-start; }
.puls {
  width: 16px; height: 16px; margin-top: 6px; border-radius: 50%; flex: none;
  background: var(--accent);
  animation: pulsen 1.4s ease-in-out infinite;
}
@keyframes pulsen {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); }
  50%      { box-shadow: 0 0 0 12px transparent; }
}
.schritte { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.schritte li { color: var(--ink2); }
.schritte li.aktiv { color: var(--ink); font-weight: 500; }
.schritte li.fertig::before { content: "✓ "; color: var(--gut); }

/* ── Score ────────────────────────────────────────────────────────────── */
.score-karte { display: flex; gap: clamp(20px, 4vw, 44px); align-items: center; flex-wrap: wrap; }
.score-ring { position: relative; width: 220px; height: 220px; flex: none; margin: 0 auto; }
.score-ring svg { width: 100%; height: 100%; display: block; }
.ring-grund { fill: none; stroke: var(--line-fein); stroke-width: 14; }
html[data-theme="dark"] .ring-grund { stroke: rgba(255,255,255,.10); }
.ring-wert {
  fill: none; stroke: url(#ringfarbe); stroke-width: 14; stroke-linecap: round;
  stroke-dasharray: 578; stroke-dashoffset: 578;
  transition: stroke-dashoffset 1.6s cubic-bezier(.22, .8, .24, 1);
}
.score-mitte { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.score-zahl {
  font-size: clamp(3rem, 2rem + 2vw, 4rem); font-weight: 600; line-height: 1;
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}
.score-max { color: var(--ink2); font-size: 15px; margin-top: 4px; }
.score-rechts { flex: 1 1 260px; display: grid; gap: 10px; }
.score-note { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem); font-weight: 600; line-height: 1.1; }
.score-url { color: var(--ink2); overflow-wrap: anywhere; font-size: 15px; }
.ampel-summe { display: flex; gap: 8px; flex-wrap: wrap; }
.ampel-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: var(--rad-pille);
  border: 1px solid var(--line-fein);
  font-size: 14px; color: var(--ink2);
}
.punkt {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  display: inline-grid; place-content: center;
  font-size: 12px; font-weight: 700; line-height: 1; color: #fff;
}
/* Die Zeichen sind der eigentliche Träger der Aussage, die Farbe verstärkt sie
   nur. Vorher unterschied NUR die Farbe — bei Rot-Grün-Sehschwäche und im
   Schwarzweiß-Ausdruck sahen alle drei Punkte gleich aus (WCAG 1.4.1). */
.punkt::before { content: ""; }
.punkt.gut { background: var(--gut); }
.punkt.gut::before { content: "✓"; }
.punkt.mittel { background: var(--mittel); }
.punkt.mittel::before { content: "!"; }
.punkt.schlecht { background: var(--schlecht); }
.punkt.schlecht::before { content: "×"; font-size: 14px; }
.punkt.offen { background: var(--offen); }
.punkt.offen::before { content: "?"; }
html[data-theme="dark"] .punkt { color: #05070F; }
.score-aktionen { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.score-aktionen .knopf { min-height: 44px; padding: 0 18px; font-size: 15px; }

/* ── Bericht ──────────────────────────────────────────────────────────── */
.druckkopf { display: none; }
.bericht-text { white-space: pre-wrap; max-width: var(--lese); }
.bericht-quelle { margin-top: 12px; color: var(--ink2); font-size: 14px; }
/* Solange die KI schreibt: ruhiges Atmen, damit erkennbar ist, dass hier
   noch etwas kommt — der Rest des Berichts steht bereits. */
.bericht.laedt .bericht-text { color: var(--ink2); animation: atmen 1.8s ease-in-out infinite; }
@keyframes atmen { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ── Kategorien ───────────────────────────────────────────────────────── */
#kategorien { display: grid; gap: 28px; }
.kategorie-kopf {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap; margin-bottom: 8px;
}
.kategorie-kopf h2 { font-size: 1.3125rem; letter-spacing: .007em; }
.kategorie-punkte { color: var(--ink2); font-size: 14px; font-variant-numeric: tabular-nums; }
.pruef-zeile {
  display: grid; grid-template-columns: 24px 1fr; gap: 12px;
  padding: 14px 0; border-top: 1px solid var(--line-fein);
}
.pruef-zeile .punkt { margin-top: 4px; }
.pruef-titel { font-weight: 500; }
.pruef-befund { color: var(--ink2); margin-top: 3px; }
.pruef-tipp {
  margin-top: 8px; padding: 10px 14px;
  border-left: 3px solid var(--accent-text);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius: 0 var(--rad-klein) var(--rad-klein) 0;
  color: var(--ink);
}

/* ── Anfrage ──────────────────────────────────────────────────────────── */
.anfrage-text { color: var(--ink2); max-width: var(--lese); }
.anfrage-form { display: grid; gap: 14px; margin-top: 18px; max-width: 680px; }
.feld-paar { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.etikett { display: grid; gap: 6px; font-size: 15px; font-weight: 500; }
.etikett .opt { color: var(--ink2); font-weight: 400; }
.haken {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 15px; color: var(--ink2);
  padding: 4px 0;             /* macht die Trefferfläche des Labels höher */
  cursor: pointer;
}
/* WCAG 2.2 verlangt 24 × 24 px. 18 px waren zu klein — am 11.08.2026 gemessen. */
.haken input {
  width: 24px; height: 24px; margin: 0; flex: none;
  accent-color: var(--accent-fl); cursor: pointer;
}
.haken span { padding-top: 2px; }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.anfrage-meldung {
  padding: 12px 16px; border-radius: var(--rad-klein);
  background: color-mix(in srgb, var(--gut) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--gut) 34%, transparent);
}
.anfrage-meldung.schlimm {
  background: color-mix(in srgb, var(--schlecht) 12%, transparent);
  border-color: color-mix(in srgb, var(--schlecht) 34%, transparent);
}

/* ── Abschluss-Band ───────────────────────────────────────────────────── */
.band {
  padding: clamp(28px, 5vw, 56px);
  border-radius: 32px; color: #F5F7FF;
  display: grid; gap: 14px; justify-items: start;
  background:
    radial-gradient(70% 90% at 50% -10%, rgba(76,130,255,.32), transparent 60%),
    linear-gradient(135deg, #101A44 0%, #0B1030 55%, #1A1040 100%);
  box-shadow: inset 0 0 0 1px rgba(140,170,255,.22);
}
.band h2 { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.25rem); line-height: 1.12; }
.band p { color: #C7D2F0; max-width: var(--lese); }
.band-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

/* ── Verlauf (nur privat) ─────────────────────────────────────────────── */
.verlauf-liste { margin: 0; padding: 0; list-style: none; }
.verlauf-liste li {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 0; border-top: 1px solid var(--line-fein); cursor: pointer;
}
.verlauf-host { font-weight: 500; }
.verlauf-meta { color: var(--ink2); font-size: 14px; }
.verlauf-score {
  font-variant-numeric: tabular-nums; font-weight: 600;
  padding: 4px 12px; border-radius: var(--rad-pille);
  border: 1px solid var(--line-fein);
}

/* ── Fußzeile ─────────────────────────────────────────────────────────── */
.fuss {
  width: min(var(--nxw), calc(100% - 2 * var(--rand)));
  margin: 0 auto; padding: 32px 0 64px;
  border-top: 1px solid var(--line-fein);
  color: var(--ink2); font-size: 14px;
  display: grid; gap: 8px;
}
.fuss p { max-width: var(--lese); }
/* Am Handy müssen auch die Fußzeilen-Verweise bequem zu treffen sein. */
.fuss-links { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.fuss-links a { display: inline-flex; align-items: center; min-height: 32px; }

/* ── Handy ────────────────────────────────────────────────────────────── */
@media (max-width: 620px) {
  .eingabe-zeile .knopf { width: 100%; }
  .score-karte { justify-content: center; text-align: center; }
  .score-rechts { text-align: center; justify-items: center; }
  .ampel-summe, .score-aktionen, .band-knoepfe { justify-content: center; }
  .buehne { justify-items: stretch; }
  .band { justify-items: center; text-align: center; }
}
/* Auf Berührgeräten müssen Trefferflächen mindestens 44 × 44 px haben. */
@media (hover: none) {
  .pille { min-height: 44px; padding: 0 20px; }
  .knopf, .score-aktionen .knopf { min-height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
      transition-duration: .001ms !important; }
  .ring-wert { transition: none; }
}

/* ── NEU in V1.1: Vergleichsfeld, Prioritäten, Übersicht, Vergleich ──── */

/* Aufklappbarer Vergleich unter der Eingabe */
.vergleich-auf { margin-top: 14px; }
.verweis-knopf {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 15px; color: var(--accent-text);
  text-decoration: underline; text-underline-offset: 3px;
}
.verweis-knopf:hover { text-decoration-thickness: 2px; }
.verweis-knopf[aria-expanded="true"] { font-weight: 600; }
#vergleich-feld { margin-top: 12px; max-width: 460px; display: grid; gap: 8px; }
.klein { font-size: 13.5px; color: var(--ink2); line-height: 1.5; }
.karten-unter { font-size: 14.5px; color: var(--ink2); margin: -6px 0 14px; }

/* Die drei wichtigsten Schritte */
.prio-liste { list-style: none; display: grid; gap: 12px; margin: 0; padding: 0;
              counter-reset: prio; }
.prio {
  counter-increment: prio;
  position: relative;
  padding: 14px 16px 14px 52px;
  border-radius: var(--rad-klein);
  background: var(--flaeche-b);
  box-shadow: inset 0 0 0 1px var(--line-fein);
}
.prio::before {
  content: counter(prio);
  position: absolute; left: 16px; top: 12px;
  font-size: 20px; font-weight: 700; color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.prio-kopf { display: flex; gap: 12px; align-items: baseline;
             justify-content: space-between; flex-wrap: wrap; }
.prio-titel { font-weight: 600; font-size: 16px; }
.prio-gewinn {
  font-size: 13.5px; font-weight: 700; color: var(--accent-text);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.prio-tipp { margin-top: 4px; color: var(--ink2); line-height: 1.55; font-size: 15px; }
.prio-bereich { margin-top: 6px; font-size: 12.5px; color: var(--ink2);
                text-transform: uppercase; letter-spacing: .05em; }

/* Balken-Übersicht der Bereiche */
.ueb-zeile {
  display: grid; grid-template-columns: minmax(150px, 1.1fr) 3fr auto;
  gap: 14px; align-items: center; padding: 8px 0;
  border-bottom: 1px solid var(--line-fein);
}
.ueb-zeile:last-child { border-bottom: 0; }
.ueb-name { font-size: 15px; }
.ueb-spur {
  height: 9px; border-radius: 980px; background: var(--line-fein);
  overflow: hidden; display: block;
}
.ueb-balken { display: block; height: 100%; border-radius: 980px;
              transition: width var(--takt) var(--ease); }
.ueb-balken.gut { background: var(--gut); }
.ueb-balken.mittel { background: var(--mittel); }
.ueb-balken.schlecht { background: var(--schlecht); }
.ueb-wert { font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums;
            min-width: 52px; text-align: right; }

/* Vergleich mit dem Mitbewerber */
.vergleich-gitter {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px; margin-bottom: 16px;
}
.verg-feld {
  padding: 16px; border-radius: var(--rad-klein); text-align: center;
  background: var(--flaeche-b); box-shadow: inset 0 0 0 1px var(--line-fein);
}
.verg-feld.vorn { box-shadow: inset 0 0 0 2px var(--accent-text); }
.verg-rolle { font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em;
              color: var(--ink2); }
.verg-punkte { font-size: 40px; font-weight: 700; line-height: 1.1;
               font-variant-numeric: tabular-nums; }
.verg-punkte.gut { color: var(--gut); }
.verg-punkte.mittel { color: var(--mittel); }
.verg-punkte.schlecht { color: var(--schlecht); }
.verg-host { font-size: 14px; word-break: break-word; }
.verg-note { font-size: 13.5px; color: var(--ink2); margin-top: 2px; }
.verg-zeile {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 7px 0; border-bottom: 1px solid var(--line-fein); font-size: 15px;
}
.verg-zeile:last-child { border-bottom: 0; }
.verg-bereich { color: var(--ink); }
.verg-abstand { font-weight: 600; font-variant-numeric: tabular-nums; }
.verg-abstand.gut { color: var(--gut); }
.verg-abstand.schlecht { color: var(--schlecht); }
.verg-abstand.gleich { color: var(--ink2); }
.vergleich-bereiche { margin-bottom: 10px; }

.teilen-hinweis {
  margin-top: 10px; font-size: 14px; color: var(--ink2);
  word-break: break-all; line-height: 1.5;
}

/* Auf dem Handy sind drei Spalten in der Übersicht zu eng — der Balken
   wandert dann unter den Namen, statt ihn zu quetschen. */
@media (max-width: 560px) {
  .ueb-zeile { grid-template-columns: 1fr auto; }
  .ueb-spur { grid-column: 1 / -1; order: 3; }
  .prio { padding-left: 46px; }
}

/* ── NEU in V1.2: Warnkarte und Vorher/Nachher-Band ──────────────────── */

/* Platzhalterseite: gelb-warnend, aber nicht alarmierend. Es ist kein Fehler
   des Besuchers, sondern eine Einordnung. */
.warnkarte {
  border-left: 4px solid var(--mittel);
  background: color-mix(in srgb, var(--mittel) 7%, var(--karte));
  margin-bottom: 18px;
}
.warnkarte .karten-titel { color: var(--mittel); }
.warnkarte p { color: var(--ink); line-height: 1.6; }

/* Vorher/Nachher: die wichtigste Zahl für einen wiederkehrenden Besucher. */
.verlauf-band {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-top: 14px; padding: 10px 14px;
  border-radius: var(--rad-klein);
  background: var(--flaeche-b);
  box-shadow: inset 0 0 0 1px var(--line-fein);
}
.verlauf-zahl {
  font-size: 24px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.verlauf-zahl.gut { color: var(--gut); }
.verlauf-zahl.schlecht { color: var(--schlecht); }
.verlauf-zahl.gleich { color: var(--ink2); }
.verlauf-text { font-size: 14.5px; color: var(--ink2); line-height: 1.45; }

/* ── Druck: MUSS die letzte Regel bleiben ─────────────────────────────── */
@media print {
  :root, html[data-theme="dark"], html[data-theme="light"] {
    --flaeche-a: #FFFFFF !important; --flaeche-b: #FFFFFF !important;
    --karte: #FFFFFF !important;
    --ink: #000000 !important; --ink2: #333333 !important;
    --line: #BBBBBB !important; --line-fein: #DDDDDD !important;
    --accent-text: #12429E !important;
    --gut: #14532D !important; --mittel: #6B3F00 !important;
    --schlecht: #8B1A14 !important; --offen: #555555 !important;
  }
  .schimmer, .kopf, .buehne, .fortschritt, .anfrage, .band, .verlauf,
  .score-aktionen, #nx-ki-zahnrad { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .karte {
    background: #fff !important; box-shadow: none !important;
    border: 1px solid #CCCCCC !important; break-inside: avoid;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  .pruef-tipp { background: #F4F4F4 !important; }
  .prio, .verg-feld { background: #F4F4F4 !important;
                      box-shadow: none !important; border: 1px solid #CCC !important; }
  .ueb-balken.gut { background: #14532D !important; }
  .ueb-balken.mittel { background: #6B3F00 !important; }
  .ueb-balken.schlecht { background: #8B1A14 !important; }
  .ueb-spur { background: #DDDDDD !important; }
  .teilen-hinweis { display: none !important; }
  .verlauf-band, .warnkarte { background: #F4F4F4 !important;
                              box-shadow: none !important;
                              border: 1px solid #CCC !important; }
  .druckkopf { display: block !important; margin-bottom: 18px;
               padding-bottom: 10px; border-bottom: 2px solid #333;
               font-size: 12pt; color: #000 !important; }
  .ring-wert { stroke: #12429E !important; }
  a { color: #12429E !important; }
}


/* Sehr schmale Handys (360 px ist die verbreitetste Android-Breite): Ohne diese
   Zone brach der Markenschriftzug in der Kopfzeile um (Prüferbefund 12.08.2026). */
@media (max-width: 400px) {
  .kopf { padding: 8px 8px 8px 12px; gap: 8px; }
  .marke { gap: 7px; font-size: 15px; }
  .marke-bild { width: 26px; height: 26px; }
  .pille { padding: 0 13px; font-size: 14px; }
  .kopf-rechts { gap: 6px; }
}