@charset "UTF-8";

:root {
  --text: #1f1a2b;
  --muted: #6b6280;
  --lilac-bg: #f4effb;
  --glass-border: #cfc2e2;
  --line: #dfd6ec;
  --accent: #5b3fa0;
  --accent-soft: #9a7bd6;
}

* {
  box-sizing: border-box;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* Heller Flieder-Hintergrund auf dem Root-Element: er fuellt jede
   gedruckte Seite komplett und braucht kaum Farbe. */
html { background: var(--lilac-bg); }

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
}

.page {
  min-height: 100vh;
  padding: 32px 16px;
}

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

h1 {
  margin: 0 0 4px;
  font-size: 1.6rem;
  color: var(--accent);
}
.sub { margin: 0 0 20px; color: var(--muted); }

.toolbar { margin-bottom: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.toolbar button {
  font: inherit;
  color: var(--text);
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, .7);
  cursor: pointer;
}
.toolbar button:hover { background: rgba(255, 255, 255, .95); }

/* Glas-Karte: helle Verlaeufe, Rand und Innenlicht statt backdrop-filter */
.table-card {
  border-radius: 24px;
  overflow: hidden;
  word-wrap: normal;
  border: 1.5px solid var(--glass-border);
  background: linear-gradient(135deg, #fefefe 0%, #faf8fd 45%, #fdfcfe 100%);
  box-shadow:
    0 6px 18px rgba(90, 60, 140, .12),
    inset 0 2px 0 rgba(255, 255, 255, .95),
    inset 0 -2px 0 rgba(126, 96, 176, .10),
    inset 0 0 30px rgba(255, 255, 255, .60);
}

.table-card table { width: 100%; border-collapse: collapse; }

/* Aeussere Tabelle: Selektoren mit ">" treffen NUR die Hauptzellen,
   verschachtelte Tabellen in einer Zelle bleiben davon unberuehrt. */
.table-card > table > :is(thead, tbody, tfoot) > tr > th,
.table-card > table > :is(thead, tbody, tfoot) > tr > td { padding: 14px 18px; text-align: left; vertical-align: middle; }

.table-card > table > :is(thead, tbody, tfoot) > tr > th {
  text-align: center;
  color: var(--accent);
  background: linear-gradient(180deg, #ddd1f0, #ece5f7);
  font-weight: 600;
  letter-spacing: .02em;
  border-bottom: 2px solid var(--accent-soft);
}

.table-card > table > :is(thead, tbody, tfoot) > tr > td:first-child {
  text-align: center;
  font-weight: 600;
  color: var(--accent);
  background: #f0ebf9;
}

.table-card > table > :is(thead, tbody, tfoot) > tr > td { border-top: 1px solid var(--line); }
.table-card > table > :is(thead, tbody, tfoot) > tr:first-child > td { border-top: 0; }
.table-card > table > :is(thead, tbody, tfoot) > tr:nth-child(even) > td { background: #f4eefa; }
.table-card > table > :is(thead, tbody, tfoot) > tr:nth-child(even) > td:first-child { background: #ebe3f7; }

.table-card > table > :is(thead, tbody, tfoot) > tr > td.num,
.table-card > table > :is(thead, tbody, tfoot) > tr > th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Verschachtelte Tabelle in einer Zelle (z. B. Fragen und Antworten):
   schlichte Zeilen, gleiche Hoehe, damit Frage und Antwort auf einer Linie liegen */
.table-card td > table td {
  padding: 8px 4px;
  height: 3.6em;
  text-align: left;
  vertical-align: middle;
  font-weight: 400;
  color: var(--text);
  background: transparent;
  border-top: 1px solid var(--line);
}
.table-card td > table tr:first-child td { border-top: 0; }

/* Gruppen: ein <tbody class="group"> pro Vergleich. Die erste Zelle geht mit
   rowspan ueber alle Fragezeilen, Fragen und Antworten teilen sich je eine Zeile. */
.table-card > table > tbody.group > tr > td {
  height: 3.6em;
  background: transparent;
  border-top: 1px solid #e9e2f3;
}
.table-card > table > tbody.group > tr:first-child > td { border-top: 1px solid var(--line); }
.table-card > table > tbody.group:first-of-type > tr:first-child > td { border-top: 0; }

/* Beschriftungszelle (Vergleich) */
.table-card > table > tbody.group > tr:first-child > td:first-child { background: #f0ebf9; }

/* Folgezeilen: die erste Zelle ist hier die Frage, keine Beschriftung */
.table-card > table > tbody.group > tr:not(:first-child) > td:first-child {
  text-align: left;
  font-weight: 400;
  color: var(--text);
  background: transparent;
}

/* jede zweite Gruppe getoent */
.table-card > table > tbody.group:nth-of-type(even) > tr > td { background: #f4eefa; }
.table-card > table > tbody.group:nth-of-type(even) > tr:first-child > td:first-child { background: #ebe3f7; }
.table-card > table > tbody.group:nth-of-type(even) > tr:not(:first-child) > td:first-child { background: #f4eefa; }

/* Schlichte Ansicht (Umschalter) */
html.plain { background: #fff; --text: #111; --muted: #555; }
html.plain .table-card {
  background: #fff;
  border: 1px solid #999;
  border-radius: 0;
  box-shadow: none;
}
html.plain h1,
html.plain .table-card > table > :is(thead, tbody, tfoot) > tr > th,
html.plain .table-card > table > :is(thead, tbody, tfoot) > tr > td:first-child { color: #111; }
html.plain .table-card > table > :is(thead, tbody, tfoot) > tr > th { background: #eee; border-color: #999; }
html.plain .table-card > table > :is(thead, tbody, tfoot) > tr > td:first-child { background: transparent; }
html.plain .table-card > table > :is(thead, tbody, tfoot) > tr > td { border-color: #ccc; }
html.plain .table-card td > table td { border-color: #ccc; }
html.plain .table-card > table > :is(thead, tbody, tfoot) > tr:nth-child(even) > td,
html.plain .table-card > table > :is(thead, tbody, tfoot) > tr:nth-child(even) > td:first-child { background: transparent; }
html.plain .table-card > table > tbody.group > tr > td {
  background: transparent !important;
  color: #111 !important;
  border-color: #ccc !important;
}
html.plain .toolbar button { background: #fff; color: #111; border-color: #999; }

input[type="checkbox"] {
  /* 1. Standard-Browser-Design entfernen */
  appearance: none;
  -webkit-appearance: none;

  /* 2. Eigene Box stylen (mit Rand, damit sie auf hellem Grund sichtbar bleibt) */
  width: 20px;
  height: 20px;
  border: 1.5px solid #8f74c2;
  border-radius: 50%;
  background-color: #fff;

  /* 3. Das "x" perfekt in der Box zentrieren */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* Checkbox + Text als Zeile: bei Zeilenumbruch laeuft der Text unter dem
   Text weiter (Einzug), nicht unter der Checkbox. */
.table-card label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}
.table-card label + label { margin-top: 4px; }
.table-card label input[type="checkbox"] {
  flex: 0 0 20px;
  margin: 0;
  top: 0;
}

/* Wenn die Checkbox ausgewaehlt ist: */
input[type="checkbox"]:checked::after {
  content: "x";
  font-family: sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #2563eb; /* Farbe des "x" */
  line-height: 1;
}

/* Druck: beliebig viele Seiten. Die Seitenraender kommen NICHT aus @page,
   sondern aus dem Innenabstand von .page, der sich auf jeder Seite
   wiederholt (box-decoration-break: clone). Der Flieder liegt auf dem
   Root-Element und fuellt so immer die komplette Seite, egal was im
   Druckdialog bei "Raender" steht. */
@page { size: A4; margin: 0; background: #f4effb; }

@media print {
  .toolbar { display: none !important; }

  /* Flieder als echte Fläche hinter dem Inhalt. Ein fixiertes Element
     wird auf JEDER gedruckten Seite wiederholt und füllt sie komplett. */
  body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--lilac-bg);
    z-index: -1;
  }
  html.plain body::before { display: none; }

  .page {
    min-height: 0;
    padding: 16mm 14mm;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  .table-card {
    box-shadow: none;
  }

  .table-card table { font-size: 11pt; }
  .table-card > table > :is(thead, tbody, tfoot) > tr > th,
  .table-card > table > :is(thead, tbody, tfoot) > tr > td { padding: 8px 12px; }
  .table-card td > table td { padding: 6px 4px; }

  .table-card thead { display: table-header-group; }
  .table-card > table > tbody.group { break-inside: avoid; page-break-inside: avoid; }
  .table-card tr { break-inside: avoid; page-break-inside: avoid; }
}