/* Dunkel ist der Standard -- hell gibt es nur, wenn jemand aktiv umschaltet
   ([data-theme="light"], gespeichert in localStorage "bw-theme"). */
:root {
  --bg: #15181b;
  --bg-alt: #1c2023;
  --karte: #1c2023;
  --ink: #eef1f2;
  --ink-muted: #99a4ab;
  --tanne: #2bb3a1;
  --tanne-dunkel: #4fc9b8;
  --tanne-bg: rgba(43, 179, 161, 0.14);
  --kritisch: #ef6b5c;
  --kritisch-bg: rgba(239, 107, 92, 0.14);
  --empfehlung: #e0a542;
  --empfehlung-bg: rgba(224, 165, 66, 0.14);
  --erfolg: #4dc281;
  --erfolg-bg: rgba(77, 194, 129, 0.14);
  --rand: #2b3136;
  --radius: 8px;
  --schrift-headline: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --schrift-text: -apple-system, "Segoe UI", Roboto, sans-serif;
  --schrift-mono: ui-monospace, "SF Mono", "Roboto Mono", Consolas, monospace;
}

:root[data-theme="dark"] {
  --bg: #15181b; --bg-alt: #1c2023; --karte: #1c2023; --ink: #eef1f2; --ink-muted: #99a4ab;
  --tanne: #2bb3a1; --tanne-dunkel: #4fc9b8; --tanne-bg: rgba(43, 179, 161, 0.14);
  --kritisch: #ef6b5c; --kritisch-bg: rgba(239, 107, 92, 0.14);
  --empfehlung: #e0a542; --empfehlung-bg: rgba(224, 165, 66, 0.14);
  --erfolg: #4dc281; --erfolg-bg: rgba(77, 194, 129, 0.14);
  --rand: #2b3136;
}

:root[data-theme="light"] {
  --bg: #ffffff; --bg-alt: #f7f8f9; --karte: #ffffff; --ink: #1e2328; --ink-muted: #5f6b72;
  --tanne: #0d8f80; --tanne-dunkel: #0a6e62; --tanne-bg: #e6f5f3;
  --kritisch: #d93a2b; --kritisch-bg: #fdeceb;
  --empfehlung: #b5790a; --empfehlung-bg: #fdf3e0;
  --erfolg: #157f43; --erfolg-bg: #e7f6ee;
  --rand: #e1e5e8;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--schrift-text);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
}

.kopf {
  padding: 18px 16px;
  border-bottom: 1px solid var(--rand);
  display: flex;
  justify-content: center;
}

.marke {
  display: flex;
  align-items: center;
  gap: 9px;
}

.marke-zeichen {
  width: 24px;
  height: 24px;
  color: var(--tanne);
  flex-shrink: 0;
}

.marke-wort {
  font-family: var(--schrift-headline);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

.hero {
  max-width: 1080px;
  margin: 0 auto;
  padding: 52px 20px 40px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 44px;
  align-items: center;
}

@media (max-width: 780px) {
  .hero {
    grid-template-columns: 1fr;
  }
}

.eyebrow {
  color: var(--tanne);
  font-weight: 700;
  font-size: 0.85rem;
  margin: 0 0 14px;
}

.hero-headline {
  font-family: var(--schrift-headline);
  font-weight: 800;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
}

.hero-sub {
  color: var(--ink-muted);
  font-size: 1.02rem;
  max-width: 48ch;
  margin: 0 0 26px;
}

.hero-cta {
  display: inline-block;
  background: var(--tanne);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  padding: 14px 26px;
  border-radius: var(--radius);
  font-size: 1rem;
}

.hero-cta:hover {
  background: var(--tanne-dunkel);
}

.hero-stat-zeile {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 36px;
}

.hero-stat {
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
  color: var(--ink-muted);
  max-width: 140px;
}

.hero-stat span {
  font-family: var(--schrift-headline);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--tanne);
}

/* ---------- Hero: Beispiel-Vorschau ---------- */

.vorschau-wrap {
  position: relative;
}

.vorschau-etikett {
  position: absolute;
  top: -13px;
  left: 20px;
  background: var(--tanne);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 12px;
  border-radius: 999px;
  z-index: 2;
}

.vorschau-karte {
  background: var(--bg-alt);
  border: 1px solid var(--rand);
  border-radius: 12px;
  padding: 22px;
  box-shadow: 0 20px 44px -24px rgba(0, 0, 0, 0.35);
}

.vorschau-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
  gap: 8px;
  flex-wrap: wrap;
}

.vorschau-url {
  font-weight: 700;
  font-size: 0.92rem;
}

.vorschau-meta {
  font-family: var(--schrift-mono);
  font-size: 0.7rem;
  color: var(--ink-muted);
}

.vorschau-reihe {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.vorschau-ring {
  width: 88px;
  height: 88px;
}

.vorschau-ring .ring-zahl .n {
  font-size: 1.45rem;
  color: var(--empfehlung);
}

.vorschau-ring .ring-zahl .l {
  font-size: 0.52rem;
}

.vorschau-reihe .chip-stat {
  padding: 7px 12px;
  min-width: 84px;
}

.vorschau-reihe .chip-stat .n {
  font-size: 0.95rem;
}

.vorschau-reihe .chip-stat .l {
  font-size: 0.62rem;
}

.vorschau-befund {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-left: 3px solid var(--kritisch);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 8px;
}

.vorschau-befund h2 {
  margin: 0 0 3px;
  font-size: 0.86rem;
  font-weight: 700;
}

.vorschau-befund p {
  margin: 0;
  font-size: 0.78rem;
  color: var(--ink-muted);
}

.vorschau-fussnote {
  text-align: center;
  font-size: 0.76rem;
  color: var(--ink-muted);
  margin-top: 14px;
}

.sektion-titel {
  font-family: var(--schrift-headline);
  font-weight: 800;
  text-align: center;
  font-size: 1.3rem;
  margin: 0 0 28px;
}

.warum {
  max-width: 920px;
  margin: 0 auto;
  padding: 40px 20px;
  border-top: 1px solid var(--rand);
}

.warum-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.warum-karte {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 20px 22px;
}

.warum-icon {
  width: 20px;
  height: 20px;
  color: var(--tanne);
  margin-bottom: 12px;
}

.warum-karte h3 {
  font-family: var(--schrift-headline);
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 700;
}

.warum-karte p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.88rem;
}

@media (max-width: 640px) {
  .warum-grid { grid-template-columns: 1fr; }
}

.vergleich {
  max-width: 780px;
  margin: 0 auto 40px;
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: 12px;
  padding: 24px 28px;
}

.vergleich-sub {
  text-align: center;
  color: var(--ink-muted);
  font-size: 0.9rem;
  margin: 0 0 20px;
}

.vtab {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.vtab th {
  text-align: left;
  padding: 10px 10px;
  font-weight: 700;
  border-bottom: 1px solid var(--rand);
}

.vtab th.mitte,
.vtab td {
  text-align: center;
}

.vtab td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--rand);
  color: var(--ink-muted);
}

.vtab td:first-child {
  text-align: left;
  color: var(--ink);
}

.vtab tr:last-child td {
  border-bottom: none;
}

.vtab .col-us {
  background: var(--tanne-bg);
  border-radius: 6px;
}

.vtab .col-us-h {
  color: var(--tanne);
}

.vtab .ok {
  color: var(--erfolg);
  font-weight: 700;
}

.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--rand);
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 700;
  margin-left: 4px;
  cursor: help;
  position: relative;
  vertical-align: middle;
}

.info-icon:hover,
.info-icon:focus {
  background: var(--tanne);
  color: var(--bg);
  outline: none;
}

.info-tip {
  display: none;
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  background: var(--bg-alt);
  border: 1px solid var(--rand);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink);
  text-align: left;
  z-index: 5;
  line-height: 1.4;
}

.info-icon:hover .info-tip,
.info-icon:focus .info-tip {
  display: block;
}

.vergleich-fussnote {
  text-align: center;
  font-size: 0.78rem;
  color: var(--ink-muted);
  margin-top: 16px;
}

.ress-sub {
  text-align: center;
  color: var(--ink-muted);
  font-size: 0.9rem;
  max-width: 640px;
  margin: 0 auto 32px;
}

.ress-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  max-width: 920px;
  margin: 0 auto;
}

.ress-karte {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 20px 22px;
  transition: border-color 0.15s;
}

.ress-karte:hover {
  border-color: var(--tanne);
}

.ress-icon {
  width: 20px;
  height: 20px;
  color: var(--tanne);
  margin-bottom: 12px;
}

.ress-karte h3 {
  font-family: var(--schrift-headline);
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 700;
}

.ress-karte p {
  margin: 0 0 14px;
  color: var(--ink-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.ress-link {
  color: var(--tanne);
  font-size: 0.83rem;
  font-weight: 700;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}

.tabs {
  display: flex;
  gap: 4px;
  justify-content: center;
  padding: 24px 16px 20px;
  flex-wrap: wrap;
  scroll-margin-top: 20px;
}

.tab-btn {
  background: transparent;
  color: var(--ink-muted);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 8px 16px;
  font-size: 0.92rem;
  font-weight: 600;
  font-family: var(--schrift-text);
  cursor: pointer;
}

.tab-btn.ist-aktiv {
  color: var(--tanne);
  border-bottom-color: var(--tanne);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--tanne);
  outline-offset: 2px;
}

main {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 16px 64px;
}

.tab-inhalt {
  display: none;
}

.tab-inhalt.ist-aktiv {
  display: block;
}

.karte {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 20px;
}

label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  margin-top: 14px;
}

input,
textarea {
  background: var(--bg);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  color: var(--ink);
  padding: 11px 13px;
  font-size: 1rem;
  font-family: var(--schrift-text);
}

textarea {
  resize: vertical;
}

button {
  margin-top: 18px;
  background: var(--tanne);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 12px 18px;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: var(--schrift-text);
  cursor: pointer;
}

button:hover {
  background: var(--tanne-dunkel);
}

button:disabled {
  opacity: 0.55;
  cursor: wait;
}

.hinweis-text {
  color: var(--ink-muted);
  font-size: 0.85rem;
  min-height: 1.2em;
  margin-top: 10px;
}

.ergebnis-bereich {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---------- Ergebnis-Panel ---------- */

.ergebnis-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}

.ergebnis-titel {
  font-weight: 700;
  font-size: 1rem;
}

.ergebnis-meta {
  font-family: var(--schrift-mono);
  font-size: 0.76rem;
  color: var(--ink-muted);
}

.score-panel {
  background: var(--bg-alt);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 22px;
}

.score-reihe {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.ring-wrap {
  position: relative;
  width: 108px;
  height: 108px;
  flex-shrink: 0;
}

.ring-zahl {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ring-zahl .n {
  font-family: var(--schrift-mono);
  font-weight: 700;
  font-size: 1.8rem;
  font-variant-numeric: tabular-nums;
}

.ring-zahl .l {
  font-size: 0.6rem;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.score-gut .ring-zahl .n { color: var(--erfolg); }
.score-mittel .ring-zahl .n { color: var(--empfehlung); }
.score-schlecht .ring-zahl .n { color: var(--kritisch); }

.stat-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.chip-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 10px 15px;
  min-width: 108px;
}

.chip-stat .n {
  font-family: var(--schrift-mono);
  font-weight: 700;
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
}

.chip-stat .l {
  font-size: 0.7rem;
  color: var(--ink-muted);
}

.chip-stat.rot .n { color: var(--kritisch); }

.legende {
  display: flex;
  gap: 16px;
  font-size: 0.76rem;
  color: var(--ink-muted);
  flex-wrap: wrap;
}

.legende span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.dot.rot { background: var(--kritisch); }
.dot.gelb { background: var(--empfehlung); }
.dot.gruen { background: var(--erfolg); }

.pdf-button {
  background: transparent;
  color: var(--tanne);
  border: 1px solid var(--tanne);
  margin-top: 0;
}

.pdf-button:hover {
  background: var(--tanne);
  color: #fff;
}

.manuell-kriterium {
  padding: 10px 0;
  border-bottom: 1px solid var(--rand);
}

.manuell-kriterium:last-child {
  border-bottom: none;
}

.manuell-kriterium-kopf {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}

.manuell-kriterium-titel {
  font-weight: 700;
  font-size: 0.9rem;
}

.manuell-kriterium-hinweis {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.website-aktionen {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* ---------- Befunde ---------- */

.gruppen-titel {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  margin: 4px 0 4px;
}

.gruppen-titel .anzahl {
  font-family: var(--schrift-mono);
  font-size: 0.78rem;
  color: var(--ink-muted);
  font-weight: 500;
}

.befund {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-left: 3px solid var(--kritisch);
  border-radius: var(--radius);
  padding: 16px 18px;
}

.befund.schwere-empfehlung {
  border-left-color: var(--empfehlung);
}

.befund-kopf {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.befund h3 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
}

.befund-wcag {
  font-family: var(--schrift-mono);
  font-size: 0.74rem;
  color: var(--ink-muted);
}

.befund p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.9rem;
}

.sperre-teaser {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px dashed var(--rand);
  border-radius: var(--radius);
  font-size: 0.85rem;
  color: var(--ink-muted);
  background: var(--empfehlung-bg);
}

.loesung-box {
  margin-top: 12px;
  padding: 12px 14px;
  border-left: 3px solid var(--tanne);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--tanne-bg);
}

.loesung-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--tanne);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}

.loesung-box p {
  margin: 0;
  color: var(--ink);
  font-size: 0.87rem;
  line-height: 1.5;
}

.sperr-banner {
  background: var(--tanne-bg);
  border: 1px solid var(--tanne);
  border-radius: var(--radius);
  padding: 18px 20px;
  text-align: center;
}

.sperr-banner p {
  margin: 0 0 14px;
  color: var(--ink-muted);
  font-size: 0.9rem;
}

.zugang-status {
  font-weight: 700;
  padding: 4px 0;
}

.zugang-status.frei { color: var(--erfolg); }
.zugang-status.gesperrt { color: var(--empfehlung); }

.beispiel-liste {
  margin: 12px 0 0;
  padding-left: 18px;
  font-size: 0.82rem;
  font-family: var(--schrift-mono);
  color: var(--ink-muted);
}

.beispiel-liste li {
  margin-bottom: 8px;
  word-break: break-word;
}

.beispiel-liste a {
  color: var(--tanne);
}

.seite-tag {
  display: block;
  color: var(--ink-muted);
  opacity: 0.8;
  margin-top: 2px;
}

.leer-status {
  text-align: center;
  color: var(--erfolg);
  padding: 22px;
  border: 1px dashed var(--rand);
  border-radius: var(--radius);
}

/* ---------- Details/Summary (Manuell/Bestanden) ---------- */

details {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  overflow: hidden;
}

summary {
  padding: 13px 18px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  background: var(--bg-alt);
}

summary::-webkit-details-marker {
  display: none;
}

summary .pfeil {
  transition: transform 0.15s ease;
  color: var(--ink-muted);
}

details[open] summary .pfeil {
  transform: rotate(90deg);
}

.details-inhalt {
  padding: 14px 18px 18px;
  font-size: 0.86rem;
  color: var(--ink-muted);
}

.details-inhalt ul {
  margin: 0;
  padding-left: 20px;
}

.details-inhalt li {
  margin-bottom: 6px;
}

.badge-manuell { color: var(--empfehlung); }
.badge-bestanden { color: var(--erfolg); }

/* ---------- Dashboard ---------- */

.stat-zeile {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.stat-karte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px 10px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--bg-alt);
}

.stat-zahl {
  font-family: var(--schrift-mono);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--tanne);
}

.stat-label {
  font-size: 0.72rem;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: center;
}

.site-karte {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 12px;
  background: var(--bg-alt);
}

.site-url {
  font-weight: 600;
  margin: 0 0 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-zeile {
  display: flex;
  align-items: center;
  gap: 16px;
}

.site-score {
  font-family: var(--schrift-mono);
  font-size: 1.4rem;
  font-weight: 700;
  min-width: 2.2ch;
}

.site-score.score-gut { color: var(--erfolg); }
.site-score.score-mittel { color: var(--empfehlung); }
.site-score.score-schlecht { color: var(--kritisch); }

.verlauf-balken {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 30px;
  flex: 1;
}

.verlauf-segment {
  width: 6px;
  min-height: 4px;
  background: var(--tanne);
  border-radius: 2px;
  opacity: 0.75;
}

.verlauf-segment:last-child {
  opacity: 1;
}

.detail-bereich {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vergleich-karte {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 16px 20px;
  background: var(--bg-alt);
}

.behoben-titel { color: var(--erfolg); font-weight: 600; margin: 12px 0 4px; }
.neu-titel { color: var(--kritisch); font-weight: 600; margin: 12px 0 4px; }

.vergleich-liste {
  margin: 0 0 8px;
  padding-left: 20px;
  font-size: 0.88rem;
}

.historie-liste {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.historie-zeile {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--rand);
  font-size: 0.85rem;
}

.historie-url {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-muted);
}

.historie-score {
  font-weight: 700;
  font-family: var(--schrift-mono);
}

.historie-trend {
  color: var(--ink-muted);
  font-family: var(--schrift-mono);
  font-size: 0.78rem;
}

.historie-datum {
  color: var(--ink-muted);
  font-size: 0.78rem;
}

pre.erklaerung-text {
  white-space: pre-wrap;
  background: var(--bg-alt);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 18px;
  font-size: 0.88rem;
  font-family: var(--schrift-text);
}

.fuss {
  text-align: center;
  color: var(--ink-muted);
  font-size: 0.8rem;
  padding: 24px;
  border-top: 1px solid var(--rand);
}

/* ---------- Header mit Theme-Toggle ---------- */

.kopf-innen {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.kopf-aktionen {
  display: flex;
  align-items: center;
  gap: 10px;
}

.anmelden-button {
  margin-top: 0;
  background: transparent;
  color: var(--tanne);
  border: 1px solid var(--tanne);
  padding: 8px 14px;
  font-size: 0.84rem;
  font-weight: 700;
}

.anmelden-button:hover {
  background: var(--tanne);
  color: #fff;
}

.theme-toggle {
  margin-top: 0;
  background: transparent;
  color: var(--ink-muted);
  border: 1px solid var(--rand);
  border-radius: 999px;
  width: 38px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle:hover {
  background: var(--bg-alt);
  color: var(--ink);
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
}

/* Standard (dunkel): Sonne zeigen = "hier geht's zum hellen Modus". */
.theme-toggle .icon-sonne { display: block; }
.theme-toggle .icon-mond { display: none; }

:root[data-theme="light"] .theme-toggle .icon-sonne { display: none; }
:root[data-theme="light"] .theme-toggle .icon-mond { display: block; }

/* ---------- Preise ---------- */

.preise {
  max-width: 980px;
  margin: 0 auto;
  padding: 40px 20px 48px;
  border-top: 1px solid var(--rand);
}

.preise-untertitel {
  text-align: center;
  color: var(--ink-muted);
  margin: -16px 0 28px;
  font-size: 0.95rem;
}

.preise-gruppe {
  font-family: var(--schrift-headline);
  font-weight: 700;
  font-size: 1.05rem;
  margin: 34px 0 16px;
}

.preis-hinweis {
  color: var(--ink-muted);
  font-size: 0.84rem;
  margin: 0 0 12px;
}

.zusatz-tabelle {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 20px;
}

.zusatz-zeile {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 18px;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--rand);
  background: var(--karte);
}

.zusatz-zeile:last-child {
  border-bottom: none;
}

.zusatz-zeile span:last-child {
  font-weight: 700;
  white-space: nowrap;
}

.link-button {
  margin-top: 0;
  background: none;
  border: none;
  color: var(--tanne);
  padding: 0;
  font-size: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.link-button:hover {
  background: none;
  color: var(--tanne-dunkel);
}

.preise-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}

@media (max-width: 780px) {
  .preise-grid { grid-template-columns: 1fr; }
}

.preis-karte {
  position: relative;
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: 12px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
}

.preis-karte-haupt {
  border-color: var(--tanne);
  box-shadow: 0 12px 32px -18px color-mix(in srgb, var(--tanne) 55%, transparent);
}

.preis-badge {
  position: absolute;
  top: -11px;
  left: 22px;
  background: var(--tanne);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 999px;
}

.preis-karte h4 {
  margin: 0 0 10px;
  font-family: var(--schrift-headline);
  font-size: 1rem;
  font-weight: 700;
}

.preis-betrag {
  margin: 0 0 14px;
  color: var(--ink-muted);
  font-size: 0.9rem;
}

.preis-betrag span {
  font-family: var(--schrift-headline);
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--ink);
  margin-right: 4px;
}

.preis-liste {
  margin: 0 0 18px;
  padding-left: 18px;
  color: var(--ink-muted);
  font-size: 0.86rem;
  flex: 1;
}

.preis-liste li { margin-bottom: 7px; }

.preis-cta {
  margin-top: auto;
  width: 100%;
}

.preis-cta-sekundaer {
  background: transparent;
  color: var(--tanne);
  border: 1px solid var(--tanne);
}

.preis-cta-sekundaer:hover {
  background: var(--tanne);
  color: #fff;
}

/* ---------- Konto: Unternavigation + Karten ---------- */

.konto-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.konto-kopf h3 {
  margin: 0;
  font-family: var(--schrift-headline);
  font-size: 1.15rem;
}

.konto-kopf .hinweis-text { margin: 2px 0 0; }

.logout-button {
  margin-top: 0;
  background: transparent;
  color: var(--ink-muted);
  border: 1px solid var(--rand);
  padding: 8px 14px;
  font-size: 0.85rem;
}

.logout-button:hover {
  background: var(--bg-alt);
  color: var(--ink);
}

.konto-nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--rand);
  margin: 14px 0 20px;
}

.konto-nav button {
  margin-top: 0;
  background: transparent;
  color: var(--ink-muted);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 9px 14px;
  font-size: 0.88rem;
  font-weight: 600;
}

.konto-nav button:hover {
  background: transparent;
  color: var(--ink);
}

.konto-nav button.ist-aktiv {
  color: var(--tanne);
  border-bottom-color: var(--tanne);
}

.abo-status-karte {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--bg-alt);
  padding: 18px 20px;
  margin-bottom: 16px;
}

.abo-status-karte h4 { margin: 0 0 10px; font-size: 0.98rem; }

.abo-zeile {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--rand);
  font-size: 0.88rem;
  flex-wrap: wrap;
}

.abo-zeile:last-child { border-bottom: none; }

.abo-zeile dt { color: var(--ink-muted); margin: 0; }
.abo-zeile dd { margin: 0; font-weight: 600; text-align: right; }

.abo-zeile dd.mono { font-family: var(--schrift-mono); font-weight: 600; }

.status-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
}

.status-pill.aktiv { background: var(--erfolg-bg); color: var(--erfolg); }
.status-pill.wartet { background: var(--empfehlung-bg); color: var(--empfehlung); }
.status-pill.problem { background: var(--kritisch-bg); color: var(--kritisch); }
.status-pill.neutral { background: var(--bg-alt); color: var(--ink-muted); border: 1px solid var(--rand); }

.plan-wahl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 8px 0 14px;
}

@media (max-width: 640px) {
  .plan-wahl { grid-template-columns: 1fr; }
}

.plan-option {
  margin-top: 0;
  background: var(--karte);
  color: var(--ink);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 14px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.plan-option:hover {
  background: var(--bg-alt);
  border-color: var(--tanne);
}

.plan-option.ist-gewaehlt {
  border-color: var(--tanne);
  box-shadow: 0 0 0 1px var(--tanne);
  background: var(--tanne-bg);
}

.plan-option .plan-name { font-weight: 700; font-size: 0.92rem; }
.plan-option .plan-preis { font-size: 0.84rem; color: var(--ink-muted); }

.zahlart-wahl {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.zahlart-option {
  margin-top: 0;
  flex: 1;
  min-width: 150px;
  background: var(--karte);
  color: var(--ink);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 0.88rem;
  font-weight: 600;
}

.zahlart-option:hover {
  background: var(--bg-alt);
  border-color: var(--tanne);
}

.zahlart-option.ist-gewaehlt {
  border-color: var(--tanne);
  box-shadow: 0 0 0 1px var(--tanne);
  background: var(--tanne-bg);
}

.zahlart-option:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.ueberweisung-daten {
  background: var(--bg-alt);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 16px 18px;
  font-size: 0.9rem;
}

.ueberweisung-daten .mono {
  font-family: var(--schrift-mono);
  font-weight: 700;
}

.verwendungszweck-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--tanne-bg);
  border: 1px dashed var(--tanne);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin: 10px 0;
  flex-wrap: wrap;
}

.verwendungszweck-box .code {
  font-family: var(--schrift-mono);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
}

.kopier-button {
  margin-top: 0;
  background: transparent;
  color: var(--tanne);
  border: 1px solid var(--tanne);
  padding: 6px 12px;
  font-size: 0.8rem;
}

.kopier-button:hover { background: var(--tanne); color: #fff; }

/* ---------- Einstellungen ---------- */

.einstellungen-karte {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 16px;
}

.einstellungen-karte h4 { margin: 0 0 4px; font-size: 0.98rem; }
.einstellungen-karte > p.hinweis-text { margin-top: 0; }

.einstellungen-karte form {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.feld-reihe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

@media (max-width: 560px) {
  .feld-reihe { grid-template-columns: 1fr; }
}

.theme-wahl {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.theme-wahl button {
  margin-top: 0;
  background: var(--karte);
  color: var(--ink);
  border: 1px solid var(--rand);
  padding: 10px 16px;
  font-size: 0.86rem;
  font-weight: 600;
}

.theme-wahl button:hover { background: var(--bg-alt); }

.theme-wahl button.ist-gewaehlt {
  border-color: var(--tanne);
  box-shadow: 0 0 0 1px var(--tanne);
  background: var(--tanne-bg);
}

.danger-karte {
  border-color: color-mix(in srgb, var(--kritisch) 45%, var(--rand));
}

.danger-karte h4 { color: var(--kritisch); }

.danger-button {
  background: transparent;
  color: var(--kritisch);
  border: 1px solid var(--kritisch);
  align-self: flex-start;
}

.danger-button:hover { background: var(--kritisch); color: #fff; }

.support-anfrage {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 10px;
  font-size: 0.88rem;
}

.support-anfrage .kopfzeile {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.support-anfrage .kopfzeile strong { font-size: 0.92rem; }
.support-anfrage p { margin: 0; color: var(--ink-muted); white-space: pre-wrap; }

/* ---------- Footer-Rechtslinks ---------- */

.fuss-links {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.fuss-links .link-button {
  color: var(--ink-muted);
  text-decoration: none;
  font-weight: 600;
}

.fuss-links .link-button:hover {
  color: var(--tanne);
  text-decoration: underline;
}

/* ---------- Vollbild-App-Ansicht ---------- */

body.app-offen {
  overflow: hidden;
}

.app-ansicht[hidden] {
  display: none;
}

.app-ansicht {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  animation: app-auf 0.18s ease;
}

@keyframes app-auf {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.app-kopf {
  border-bottom: 1px solid var(--rand);
  background: var(--bg);
  flex-shrink: 0;
}

.app-kopf-innen {
  max-width: 900px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.marke-button {
  margin-top: 0;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--ink);
}

.marke-button:hover { background: transparent; }

.app-schliessen {
  margin-top: 0;
  background: transparent;
  color: var(--ink-muted);
  border: 1px solid var(--rand);
  padding: 8px 14px;
  font-size: 0.84rem;
  font-weight: 600;
}

.app-schliessen:hover {
  background: var(--bg-alt);
  color: var(--ink);
}

.app-inhalt {
  flex: 1;
  overflow-y: auto;
  padding: 28px 20px 60px;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
}

/* ---------- Login / Registrierung ---------- */

.auth-wrap {
  min-height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 24px;
}

.auth-karte {
  width: 100%;
  max-width: 440px;
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: 14px;
  padding: 32px 30px;
  box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.4);
}

.auth-titel {
  font-family: var(--schrift-headline);
  font-size: 1.4rem;
  font-weight: 800;
  margin: 0 0 6px;
  text-align: center;
}

.auth-unterzeile {
  color: var(--ink-muted);
  font-size: 0.9rem;
  text-align: center;
  margin: 0 0 22px;
}

.auth-umschalter {
  display: flex;
  gap: 4px;
  background: var(--bg-alt);
  border: 1px solid var(--rand);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 22px;
}

.auth-umschalter button {
  margin-top: 0;
  flex: 1;
  background: transparent;
  color: var(--ink-muted);
  border: none;
  border-radius: 7px;
  padding: 9px;
  font-size: 0.9rem;
  font-weight: 700;
}

.auth-umschalter button.ist-aktiv {
  background: var(--karte);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-feld {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 0;
}

.auth-feld span {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-muted);
}

.auth-feld input {
  width: 100%;
}

.auth-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--ink-muted);
  margin-top: 2px;
  line-height: 1.5;
}

.auth-checkbox input {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--tanne);
}

.auth-checkbox .link-button {
  font-size: 0.82rem;
}

.auth-submit {
  margin-top: 6px;
  width: 100%;
  padding: 13px;
  font-size: 0.95rem;
}

.auth-status {
  text-align: center;
  margin-top: 2px;
}

.auth-vergessen {
  align-self: center;
  font-size: 0.84rem;
  margin-top: 2px;
}

/* ---------- Scan-Archiv (alte Scans herunterladen) ---------- */

.scan-archiv { margin-top: 4px; }

.scan-pdf-zeile {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 10px 0 16px;
}

.archiv-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rand);
}

.archiv-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.archiv-score {
  font-family: var(--schrift-mono);
  font-weight: 700;
  font-size: 1.05rem;
  min-width: 2.4ch;
  text-align: center;
}

.archiv-score.score-gut { color: var(--erfolg); }
.archiv-score.score-mittel { color: var(--empfehlung); }
.archiv-score.score-schlecht { color: var(--kritisch); }

.archiv-datum { font-size: 0.84rem; color: var(--ink-muted); }
.archiv-status { display: block; }

/* ---------- FAQ (Landingpage / SEO) ---------- */

.faq {
  max-width: 780px;
  margin: 0 auto;
  padding: 40px 20px;
  border-top: 1px solid var(--rand);
}

.faq-liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--karte);
  overflow: hidden;
}

.faq-item summary {
  padding: 16px 20px;
  cursor: pointer;
  font-family: var(--schrift-headline);
  font-weight: 700;
  font-size: 1rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  color: var(--tanne);
  font-size: 1.3rem;
  font-weight: 700;
  flex-shrink: 0;
}

.faq-item[open] summary::after { content: "–"; }

.faq-item p {
  margin: 0;
  padding: 0 20px 18px;
  color: var(--ink-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* ---------- Rechtstexte ---------- */

.recht-wrap {
  max-width: 680px;
  margin: 0 auto;
}

.recht-zurueck {
  margin-bottom: 18px;
  font-size: 0.9rem;
  font-weight: 600;
}

.recht-titel {
  font-family: var(--schrift-headline);
  font-size: 1.6rem;
  font-weight: 800;
  margin: 0 0 20px;
}

.recht-h {
  font-family: var(--schrift-headline);
  font-size: 1.02rem;
  font-weight: 700;
  margin: 22px 0 6px;
}

.recht-p {
  color: var(--ink-muted);
  font-size: 0.92rem;
  margin: 0 0 8px;
  line-height: 1.6;
}

.recht-warnung {
  background: var(--empfehlung-bg);
  border: 1px solid var(--empfehlung);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 0.86rem;
  color: var(--empfehlung);
  margin-bottom: 18px;
}

.wissen-checkliste {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wissen-checkliste li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  font-size: 0.86rem;
}

.wissen-check-ref {
  font-family: var(--schrift-mono);
  color: var(--tanne);
  font-size: 0.78rem;
  flex-shrink: 0;
}

.wissen-check-titel {
  flex: 1;
  color: var(--ink);
}

.wissen-check-auto {
  font-size: 0.72rem;
  color: var(--ink-muted);
  border: 1px solid var(--rand);
  border-radius: 999px;
  padding: 1px 8px;
  flex-shrink: 0;
}

.kontrast-rechner {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-top: 12px;
}

.kontrast-felder {
  display: flex;
  gap: 24px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.kontrast-felder label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--ink-muted);
}

.kontrast-felder input[type="color"] {
  width: 60px;
  height: 36px;
  border: 1px solid var(--rand);
  border-radius: 6px;
  background: none;
  padding: 2px;
  cursor: pointer;
}

.kontrast-vorschau {
  padding: 20px;
  border-radius: var(--radius);
  font-size: 1.3rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 14px;
}

.kontrast-ergebnis {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.88rem;
}

.kontrast-zahl {
  font-family: var(--schrift-mono);
  font-size: 1.1rem;
  font-weight: 700;
}

.kontrast-ok { color: var(--erfolg); }
.kontrast-schlecht { color: var(--kritisch); }

.app-inhalt .konto-kopf {
  max-width: 100%;
}

/* ---------- Konsole: Sidebar + Hauptbereich ---------- */

.app-ansicht:has(.konsole) .app-inhalt,
.app-inhalt:has(.konsole) {
  max-width: 1240px;
  padding-left: 16px;
  padding-right: 16px;
}

.konsole {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 26px;
  align-items: start;
}

@media (max-width: 900px) {
  .konsole { grid-template-columns: 1fr; }
}

.konsole-seite {
  position: sticky;
  top: 0;
  background: var(--bg-alt);
  border: 1px solid var(--rand);
  border-radius: 14px;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.konsole-profil {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 4px 6px 14px;
  border-bottom: 1px solid var(--rand);
}

.profil-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--tanne);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.profil-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.profil-text strong { font-size: 0.9rem; }

.profil-text span {
  font-size: 0.76rem;
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.konsole-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-gruppe {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-muted);
  margin: 14px 8px 6px;
}

.nav-gruppe:first-child { margin-top: 0; }

.nav-eintrag {
  margin-top: 0;
  background: transparent;
  color: var(--ink);
  border: none;
  border-radius: 9px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
  font-weight: 600;
}

.nav-eintrag:hover { background: var(--karte); }

.nav-eintrag.ist-aktiv {
  background: var(--tanne-bg);
  color: var(--tanne);
  box-shadow: inset 2px 0 0 var(--tanne);
}

.nav-text { display: flex; flex-direction: column; min-width: 0; }
.nav-label { font-size: 0.9rem; }

.nav-unter {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-eintrag.ist-aktiv .nav-unter { color: var(--tanne); opacity: 0.8; }

.nav-pfeil { color: var(--ink-muted); flex-shrink: 0; }

.konsole-seite .logout-button { width: 100%; }

.konsole-haupt { min-width: 0; }

.haupt-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.haupt-titel {
  font-family: var(--schrift-headline);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}

.haupt-sub {
  color: var(--ink-muted);
  font-size: 0.92rem;
  margin: 0;
}

.haupt-inhalt {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ---------- KPI-Kacheln ---------- */

.kpi-reihe {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

@media (max-width: 780px) {
  .kpi-reihe { grid-template-columns: repeat(2, 1fr); }
}

.kpi-kachel {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.kpi-label {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
}

.kpi-zahl {
  font-family: var(--schrift-mono);
  font-size: 1.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.kpi-hinweis { font-size: 0.76rem; color: var(--ink-muted); }

.kpi-kachel.kpi-rot .kpi-zahl { color: var(--kritisch); }
.kpi-kachel.score-gut .kpi-zahl { color: var(--erfolg); }
.kpi-kachel.score-mittel .kpi-zahl { color: var(--empfehlung); }
.kpi-kachel.score-schlecht .kpi-zahl { color: var(--kritisch); }

/* ---------- Panels ---------- */

.panel {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: 14px;
  overflow: hidden;
}

.panel-kopf {
  padding: 16px 20px;
  border-bottom: 1px solid var(--rand);
  background: var(--bg-alt);
}

.panel-titel {
  font-family: var(--schrift-headline);
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  overflow-wrap: anywhere;
}

.panel-sub {
  font-size: 0.8rem;
  color: var(--ink-muted);
  margin: 3px 0 0;
}

.panel-koerper {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.panel-reihe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.panel-reihe.reihe-2-1 { grid-template-columns: 1.35fr 1fr; }

@media (max-width: 860px) {
  .panel-reihe, .panel-reihe.reihe-2-1 { grid-template-columns: 1fr; }
}

/* ---------- Gesamtbewertung ---------- */

.bewertung-koerper {
  flex-direction: row;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.bewertung-ring { flex-shrink: 0; }

.bewertung-text { flex: 1; min-width: 190px; display: flex; flex-direction: column; gap: 8px; }

.bewertung-note {
  font-family: var(--schrift-headline);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
}

.bewertung-text .hinweis-text { margin: 0; }

/* ---------- Donut ---------- */

.verteilung-koerper {
  flex-direction: row;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.donut-svg { width: 150px; height: 150px; flex-shrink: 0; }

.donut-legende {
  flex: 1;
  min-width: 170px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.legende-zeile {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.86rem;
}

.legende-punkt {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

.legende-label { flex: 1; color: var(--ink-muted); }

.legende-wert {
  font-family: var(--schrift-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------- Verlauf-Chart ---------- */

.verlauf-chart { display: flex; flex-direction: column; gap: 6px; }

.verlauf-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.verlauf-spanne {
  display: flex;
  justify-content: space-between;
  font-size: 0.74rem;
  color: var(--ink-muted);
  font-family: var(--schrift-mono);
}

/* ---------- Balken ---------- */

.balken-zeile { display: flex; flex-direction: column; gap: 6px; }

.balken-kopf {
  display: flex;
  justify-content: space-between;
  font-size: 0.86rem;
  gap: 10px;
}

.balken-wert {
  font-family: var(--schrift-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.balken-spur {
  height: 8px;
  background: var(--bg-alt);
  border: 1px solid var(--rand);
  border-radius: 999px;
  overflow: hidden;
}

.balken-fuellung {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}

.scan-fortschritt {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0;
}

.scan-fortschritt-label {
  font-size: 0.86rem;
  color: var(--ink-muted);
}

.scan-fortschritt-fuellung {
  transition: width 1.1s ease, background 0.3s ease;
}

/* ---------- Website-Zeilen ---------- */

.website-zeile {
  border: 1px solid var(--rand);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: var(--bg-alt);
}

.website-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.website-url {
  font-weight: 600;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.website-score {
  font-family: var(--schrift-mono);
  font-weight: 700;
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.website-score.score-gut { color: var(--erfolg); }
.website-score.score-mittel { color: var(--empfehlung); }
.website-score.score-schlecht { color: var(--kritisch); }

.website-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--ink-muted);
}

.trend-hoch { color: var(--erfolg); font-weight: 700; }
.trend-runter { color: var(--kritisch); font-weight: 700; }

.website-zeile .kopier-button { align-self: flex-start; }

.website-detail-kopf {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.website-zahlen {
  flex: 1;
  min-width: 240px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

@media (max-width: 640px) {
  .website-zahlen { grid-template-columns: repeat(2, 1fr); }
}

.website-zahlen .kpi-kachel { padding: 11px 13px; }
.website-zahlen .kpi-zahl { font-size: 1.3rem; }

/* ---------- Aktionskarte ---------- */

.aktions-karte {
  background: var(--tanne-bg);
  border: 1px solid var(--tanne);
  border-radius: 14px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.aktions-karte h4 {
  font-family: var(--schrift-headline);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
}

.aktions-karte p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.9rem;
  max-width: 68ch;
}

.aktions-karte button { margin-top: 6px; }

.haupt-inhalt .einstellungen-karte:last-child { margin-bottom: 0; }

/* ---------- Paket-Auswahl (Einmalkauf) ---------- */

.paket-wahl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (max-width: 820px) {
  .paket-wahl { grid-template-columns: 1fr; }
}

.paket-option {
  margin-top: 0;
  background: var(--bg-alt);
  color: var(--ink);
  border: 1px solid var(--rand);
  border-radius: 11px;
  padding: 16px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}

.paket-option:hover {
  background: var(--bg-alt);
  border-color: var(--tanne);
}

.paket-option.ist-gewaehlt {
  border-color: var(--tanne);
  box-shadow: 0 0 0 1px var(--tanne);
  background: var(--tanne-bg);
}

.paket-kopf {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.paket-name { font-weight: 700; font-size: 0.94rem; }

.paket-preis {
  font-family: var(--schrift-mono);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--tanne);
}

.paket-liste {
  margin: 0;
  padding-left: 17px;
  font-size: 0.8rem;
  color: var(--ink-muted);
  font-weight: 500;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.paket-fussnote {
  font-size: 0.74rem;
  color: var(--empfehlung);
  font-weight: 600;
}

.preis-link {
  margin-top: 8px;
  align-self: center;
  font-size: 0.82rem;
}

/* ---------- Scan-Formular im Dashboard ---------- */

.scan-form-dash {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.scan-form-dash label {
  margin-top: 12px;
}

.scan-form-dash label:first-child {
  margin-top: 0;
}

.scan-fertig-hinweis {
  margin-bottom: 4px;
}

/* ---------- Vorher / Nachher ---------- */

.vgl-steuerung {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 14px;
}

.vgl-feld {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 0;
  flex: 1;
  min-width: 180px;
}

.vgl-feld > span {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}

.vgl-select {
  background: var(--bg);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  color: var(--ink);
  padding: 10px 12px;
  font-size: 0.92rem;
  font-family: var(--schrift-text);
  width: 100%;
}

.vgl-ergebnis {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.vgl-score-koerper {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.vgl-score-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.vgl-badge {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 12px;
  border-radius: 999px;
}

.vgl-badge-vorher {
  background: var(--bg-alt);
  color: var(--ink-muted);
  border: 1px solid var(--rand);
}

.vgl-badge-nachher {
  background: var(--tanne-bg);
  color: var(--tanne);
}

.vgl-score-datum {
  font-size: 0.78rem;
  color: var(--ink-muted);
  font-family: var(--schrift-mono);
}

.vgl-score-pfeil {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.vgl-grosser-pfeil {
  font-size: 1.8rem;
  color: var(--ink-muted);
}

.vgl-score-delta {
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
}

.vgl-besser { color: var(--erfolg); }
.vgl-schlechter { color: var(--kritisch); }

@media (max-width: 620px) {
  .vgl-score-pfeil { transform: rotate(90deg); }
}

.vgl-kennzahl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rand);
  flex-wrap: wrap;
}

.vgl-kennzahl:last-child { border-bottom: none; }

.vgl-kennzahl-label { font-size: 0.9rem; }

.vgl-kennzahl-werte {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--schrift-mono);
  font-variant-numeric: tabular-nums;
}

.vgl-vorher-wert { color: var(--ink-muted); font-weight: 700; }
.vgl-pfeil { color: var(--ink-muted); }
.vgl-nachher-wert { font-weight: 700; font-size: 1.05rem; }

.vgl-delta {
  font-size: 0.82rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-alt);
}

.vgl-delta.vgl-besser { background: var(--erfolg-bg); }
.vgl-delta.vgl-schlechter { background: var(--kritisch-bg); }

.vgl-liste { margin-bottom: 16px; }
.vgl-liste:last-child { margin-bottom: 0; }

.vgl-liste-titel {
  font-family: var(--schrift-headline);
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 8px;
}

.vgl-behoben .vgl-liste-titel { color: var(--erfolg); }
.vgl-neu .vgl-liste-titel { color: var(--kritisch); }
.vgl-offen .vgl-liste-titel { color: var(--ink-muted); }

.vgl-fund-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vgl-fund-liste li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border: 1px solid var(--rand);
  border-radius: 8px;
  background: var(--bg-alt);
  flex-wrap: wrap;
}

.vgl-behoben .vgl-fund-liste li { border-left: 3px solid var(--erfolg); }
.vgl-neu .vgl-fund-liste li { border-left: 3px solid var(--kritisch); }
.vgl-offen .vgl-fund-liste li { border-left: 3px solid var(--empfehlung); }

.vgl-fund-titel { font-size: 0.88rem; font-weight: 600; }

.vgl-fund-wcag {
  font-family: var(--schrift-mono);
  font-size: 0.74rem;
  color: var(--ink-muted);
  white-space: nowrap;
}

@media print {
  .kopf, .hero, .warum, .preise, .tabs, #scan-formular, footer, .tab-btn { display: none !important; }
  body { background: #fff; color: #000; }
}