/* =========================================================
   tabellen.css — Zahlenwerk, Fragebogen, Hilfeteil

   Die Tabellen sind nach dem Vorbild amtlicher Statistik gesetzt:
   Zahlen rechtsbündig auf gleicher Ziffernbreite, dünne Linien,
   keine Rahmen, keine Zebrastreifen, keine Farbe. Der Balken unter
   jeder Zahl ist eine Lesehilfe und trägt keine eigene Aussage.
   ========================================================= */

.werk { margin-block: clamp(2rem, 4vw, 2.75rem); }

.tafel {
  width: 100%;
  font-family: var(--grotesk);
  font-size: .92rem;
  /* Feste Spaltenbreiten: Sonst schrumpfen die Wertspalten auf die
     Breite der Zahl, und die Balken darunter werden zu kurz, um einen
     Unterschied zu zeigen. */
  table-layout: fixed;
}
.tafel col.spur-merkmal { width: 34%; }
.tafel col.spur-wert { width: 21%; }
.tafel col.spur-diff { width: 24%; }
.tafel caption {
  text-align: left;
  font-weight: 600;
  color: var(--tinte);
  padding-bottom: .55rem;
}
.tafel thead th {
  font-weight: 400;
  font-size: .8rem;
  color: var(--tinte-leise);
  text-align: right;
  padding: 0 0 .4rem .9rem;
  border-bottom: 1px solid var(--tinte);
  white-space: nowrap;
}
.tafel thead th:first-child { text-align: left; padding-left: 0; }
/* Auf schmalen Displays trägt die feste Aufteilung nicht mehr. */
@media (max-width: 40rem) { .tafel { table-layout: auto; } }

.tafel tbody th {
  font-weight: 400;
  text-align: left;
  color: var(--tinte);
  padding: .7rem .9rem .7rem 0;
  vertical-align: top;
  hyphens: auto;
}
.tafel tbody th strong { font-weight: 600; }
/* Einheit unter der Zeilenbeschriftung, wenn jede Zeile etwas anderes misst. */
.tafel__einheit {
  display: block;
  font-size: .8rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--tinte-leise);
  margin-top: .15rem;
}
.tafel tbody td {
  text-align: right;
  padding: .7rem 0 .7rem .9rem;
  vertical-align: top;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Tafeln ohne Zahlen: Fließtext gehört linksbündig, sonst franst die
   Spalte aus. */
.tafel--text thead th,
.tafel--text tbody td { text-align: left; }
.tafel--text tbody td { padding-right: .9rem; }
.tafel--text tbody td:last-child { padding-right: 0; }
.tafel tbody tr + tr th,
.tafel tbody tr + tr td { border-top: 1px solid var(--linie); }

/* Die Zahl und darunter der Balken. */
.zelle__wert { display: block; }
.zelle__saeule {
  display: block;
  height: 3px;
  margin-top: .35rem;
  background: var(--linie);
}
.zelle__saeule i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--saeule);
  transition: width .9s cubic-bezier(.22, .61, .36, 1);
}

/* Ohne JavaScript bliebe eine leere Schiene stehen. Dann lieber nichts. */
.zelle__saeule { display: none; }
.js .zelle__saeule { display: block; }

/* Die Spalte mit dem Unterschied trägt die eigentliche Aussage. */
.tafel .spalte-diff {
  color: var(--tinte-leise);
  font-size: .85rem;
}
.tafel tr.betont .spalte-diff { color: var(--tinte); font-weight: 600; }
/* Fußnotenziffer: klassisch statt Sonderzeichen, weil ein Pfeil- oder
   Dreieckglyph in vielen Textschriften fehlt und dann als Ersatzzeichen
   erscheint. */
.fussmarke {
  font-size: .7em;
  vertical-align: super;
  line-height: 0;
  color: var(--tinte-leise);
  padding-left: .1em;
}
.tafel__fussnote .fussmarke { padding-right: .25em; }

.tafel__fussnote {
  font-family: var(--grotesk);
  font-size: .82rem;
  line-height: 1.45;
  color: var(--tinte-leise);
  margin-top: .8rem;
}
.tafel__fussnote + .tafel__fussnote { margin-top: .35rem; }

/* Auf schmalen Displays bricht die Tafel in Blöcke um. */
@media (max-width: 40rem) {
  .tafel, .tafel tbody, .tafel tr, .tafel tbody th, .tafel tbody td { display: block; width: 100%; }
  /* Die Beschriftung bleibt sonst auf die Breite der ersten Spalte
     gestaucht und bricht Wort für Wort um. */
  .tafel caption { display: block; width: 100%; }
  .tafel colgroup { display: none; }
  .tafel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tafel tbody tr { padding-block: .85rem; border-top: 1px solid var(--linie); }
  .tafel tbody tr:first-child { border-top: 1px solid var(--tinte); }
  .tafel tbody tr + tr th, .tafel tbody tr + tr td { border-top: 0; }
  .tafel tbody th { padding: 0 0 .5rem; font-weight: 600; }
  .tafel tbody td {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    align-items: baseline;
    gap: .5rem .9rem;
    text-align: left;
    padding: .2rem 0;
  }
  .tafel tbody td::before {
    content: attr(data-spalte);
    font-size: .8rem;
    color: var(--tinte-leise);
  }
  .zelle__wert { text-align: left; }
  .js .zelle__saeule { grid-column: 2; margin-top: .15rem; }
}

/* --- Zwei Zahlen nebeneinander im Text --- */
.gegenueber {
  display: grid;
  gap: 1.25rem 2.5rem;
  margin-block: 1.6em;
  padding-block: 1.1rem;
  border-top: 1px solid var(--tinte);
  border-bottom: 1px solid var(--linie);
}
@media (min-width: 34rem) { .gegenueber { grid-template-columns: 1fr 1fr; } }

.gegenueber__wer {
  font-family: var(--grotesk);
  font-size: .8rem;
  color: var(--tinte-leise);
  margin-bottom: .1rem;
}
.gegenueber__zahl {
  font-size: clamp(2rem, 4.5vw, 2.9rem);
  line-height: 1.05;
  font-weight: 400;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -.015em;
}
.gegenueber__text {
  font-family: var(--grotesk);
  font-size: .86rem;
  line-height: 1.45;
  color: var(--tinte-leise);
  margin-top: .45rem;
}

/* --- Aufzählung der Gewaltformen --- */
.formen { margin-block: 1.5em; }
.formen__eintrag { padding-block: 1.15rem; border-top: 1px solid var(--linie); }
.formen__eintrag:first-child { border-top: 1px solid var(--tinte); }
.formen__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .3rem 1rem;
  margin-bottom: .45rem;
}
.formen__eintrag h3 { margin: 0; }
.formen__zahlen {
  font-family: var(--grotesk);
  font-size: .84rem;
  font-variant-numeric: tabular-nums;
  color: var(--tinte-leise);
  white-space: nowrap;
}
.formen__beispiele {
  font-family: var(--grotesk);
  font-size: .88rem;
  line-height: 1.5;
  color: var(--tinte-leise);
  margin-top: .55rem;
}

/* --- Gegenüberstellung zweier Sichtweisen --- */
.spalten { display: grid; gap: 1.75rem; margin-block: 1.6em; }
@media (min-width: 46rem) { .spalten { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
.spalten__titel {
  font-family: var(--grotesk);
  font-size: .88rem;
  font-weight: 600;
  padding-bottom: .5rem;
  margin-bottom: .8rem;
  border-bottom: 1px solid var(--tinte);
}
.spalten .liste li { font-size: .96rem; }

/* --- Fragebogen --- */
.bogen { margin-block: 1.5em; }
.bogen__zaehler {
  font-family: var(--grotesk);
  font-size: .8rem;
  color: var(--tinte-leise);
  margin-bottom: 1.1rem;
  font-variant-numeric: tabular-nums;
}
.frage { padding-top: 1.1rem; border-top: 1px solid var(--linie); margin-bottom: 1.6rem; }
.frage:first-of-type { border-top: 1px solid var(--tinte); }
.frage legend {
  font-size: 1.08rem;
  line-height: 1.4;
  margin-bottom: .85rem;
}
.frage__nr {
  display: block;
  font-family: var(--grotesk);
  font-size: .78rem;
  color: var(--tinte-leise);
  margin-bottom: .3rem;
}

/* Mit JavaScript wird jeweils nur die aktive Frage gezeigt. */
.js .frage { display: none; margin-bottom: 0; }
.js .frage.ist-aktiv { display: block; }
.js .bogen__schritte:not(:has(.ist-aktiv)) .frage:first-of-type { display: block; }

.antworten { display: grid; gap: .1rem; }
.antwort {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  padding: .55rem .2rem;
  cursor: pointer;
  border-bottom: 1px solid var(--linie);
}
.antwort:last-child { border-bottom: 0; }
.antwort input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: .85rem; height: .85rem;
  border: 1px solid var(--linie-fest);
  border-radius: 50%;
  position: relative;
  top: .25em;
}
.antwort input:checked { border-color: var(--tinte); background: var(--tinte); }
.antwort__text { color: var(--tinte-weich); }
.antwort:has(input:checked) .antwort__text { color: var(--tinte); }
.antwort:has(input:focus-visible) { outline: 2px solid var(--tinte); outline-offset: 1px; }
.antwort:hover .antwort__text { color: var(--tinte); }

.bogen__navi {
  gap: 1.5rem;
  align-items: center;
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--linie);
}
.bogen__hinweis {
  font-family: var(--grotesk);
  font-size: .84rem;
  color: var(--tinte-leise);
  margin-top: 1.1rem;
}
/* Muss hinter .bogen__navi stehen: ohne JavaScript ist die Navigation nutzlos. */
.bogen__navi { display: none; }
.js .bogen__navi { display: flex; }
.js .bogen__hinweis { display: none; }

.knopf {
  font-family: var(--grotesk);
  font-size: .9rem;
  font-weight: 600;
  color: var(--tinte);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--tinte);
  padding: .35rem 0;
  min-height: 2.5rem;
}
.knopf:hover { border-bottom-width: 2px; padding-bottom: calc(.35rem - 1px); }
.knopf[disabled] { color: var(--tinte-leise); border-bottom-color: var(--linie); cursor: not-allowed; }
.knopf[disabled]:hover { border-bottom-width: 1px; padding-bottom: .35rem; }
.knopf--weiter { margin-left: auto; }

/* --- Auswertung --- */
.befund { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--tinte); }
.befund[hidden] { display: none; }
.befund__marke {
  font-family: var(--grotesk);
  font-size: .8rem;
  color: var(--tinte-leise);
  margin-bottom: .4rem;
}
.befund__titel { font-size: 1.3rem; font-weight: 600; margin-bottom: .8rem; line-height: 1.25; }
.befund__text > p + p { margin-top: .85em; }
.befund__schutz {
  margin-block: 1.2em;
  padding-left: 1.15rem;
  border-left: 2px solid var(--notruf);
  font-size: .96rem;
  color: var(--tinte-weich);
}
.befund__schritte-titel {
  font-family: var(--grotesk);
  font-size: .8rem;
  color: var(--tinte-leise);
  margin-top: 1.5rem;
  margin-bottom: .5rem;
}
.befund__hinweis {
  margin-top: 1.35rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linie);
  font-family: var(--grotesk);
  font-size: .84rem;
  line-height: 1.5;
  color: var(--tinte-leise);
}
.befund__neu { margin-top: 1.2rem; }

/* --- Hilfe und Notruf: der einzige farbige Teil der Seite --- */
.hilfe {
  margin-block: 1.6em;
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--notruf);
}
.hilfe p + p { margin-top: .8em; }
.nummern {
  display: grid;
  gap: .1rem;
  margin-block: 1.2rem;
  font-family: var(--grotesk);
  font-size: .94rem;
}
.nummern li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .8rem;
  padding-block: .6rem;
  border-bottom: 1px solid var(--linie);
}
.nummern li:last-child { border-bottom: 0; }
.nummern__wann { color: var(--tinte-leise); font-size: .84rem; flex: 1 1 11rem; }
.nummern a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Kurze Nummern wie die 110 blieben sonst unter der Mindestbreite
     von 24 px aus WCAG 2.5.8. */
  min-width: 1.75rem;
  min-height: 1.75rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--notruf);
  text-decoration-color: var(--notruf);
  white-space: nowrap;
  padding-block: .3rem;
}
.hilfe__klein {
  font-family: var(--grotesk);
  font-size: .84rem;
  line-height: 1.5;
  color: var(--tinte-leise);
}

/* --- Häufige Fragen --- */
.fragen { margin-block: 1.5em; }
.fragen__punkt { border-top: 1px solid var(--linie); }
.fragen__punkt:first-child { border-top: 1px solid var(--tinte); }
.fragen__punkt summary {
  display: flex;
  gap: .8rem;
  padding-block: .85rem;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--tinte);
}
.fragen__punkt summary::-webkit-details-marker { display: none; }
.fragen__punkt summary::before {
  content: '+';
  flex: none;
  width: .9rem;
  font-family: var(--grotesk);
  font-weight: 400;
  color: var(--tinte-leise);
}
.fragen__punkt[open] summary::before { content: '–'; }
.fragen__antwort { padding: 0 0 1.1rem 1.7rem; color: var(--tinte-weich); }
.fragen__punkt[open] .fragen__antwort { animation: aufklappen .3s ease-out; }
@keyframes aufklappen {
  from { opacity: 0; transform: translateY(-.3rem); }
  to { opacity: 1; transform: none; }
}

/* --- Quellenverzeichnis --- */
.quellen { font-size: .95rem; color: var(--tinte-weich); }
.quellen li {
  padding-left: 1.6rem;
  position: relative;
  margin-bottom: .8em;
  line-height: 1.5;
}
.quellen li::before {
  content: counter(quelle);
  counter-increment: quelle;
  position: absolute;
  left: 0; top: .12em;
  font-family: var(--grotesk);
  font-size: .78rem;
  color: var(--tinte-leise);
}
.quellen ol { counter-reset: quelle; }
.quellen__nachsatz {
  font-family: var(--grotesk);
  font-size: .84rem;
  line-height: 1.5;
  color: var(--tinte-leise);
  margin-top: 1.1rem;
}

/* --- Was nicht stimmt: durchgestrichene Sätze --- */
.parolen { margin-block: 1.4em; }
.parolen li {
  padding-block: .45rem;
  color: var(--tinte-leise);
  border-bottom: 1px solid var(--linie);
}
.parolen li:last-child { border-bottom: 0; }
.parolen li s { text-decoration-color: var(--linie-fest); text-decoration-thickness: 1px; }