/* =========================================================
   story.css: Befunde, Anlagen, Kriterien, Glossar, Grafiken

   Alle Bausteine hier arbeiten mit Haarlinien und Weißraum.
   Es gibt keine Schatten und keine gefüllten Flächen außer den
   winzigen Kennzeichnungen und dem Notfallabschnitt.
   ========================================================= */

/* --- Anlage: die Ratschläge aus dem Netz, durchgestrichen --- */
.exhibit__head {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  margin-bottom: .5rem;
}
.exhibit__list {
  padding-left: 1.2rem;
  list-style: disc;
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-color: var(--ink-3);
}
.exhibit__foot { margin-top: .75rem; color: var(--ink-2); font-size: .95rem; }

/* --- Befunde --- */
.records { display: grid; gap: 2rem; }
.record__claim { margin-bottom: .4rem; }
.record__body p { color: var(--ink-2); }
.record__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0 .5rem;
  margin-top: .4rem;
  font-size: .85rem;
  color: var(--ink-3);
}
.record__source::before { content: '·'; margin-right: .5rem; }
.record__verdict { margin-top: .4rem; font-style: italic; }

/* --- Zahlenblock --- */
.tally { margin-top: 2rem; }
.tally__value {
  font-size: 2rem;
  line-height: 1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.tally__label { margin-block: .5rem .25rem; }
.tally__caption { color: var(--ink-2); }

/* --- Kriterien: Bedingungen über der Liste --- */
.criteria__gate { margin-bottom: 2rem; }
.criteria__gate-title { margin-bottom: 1rem; color: var(--ink-3); }
.criteria__gates { display: grid; gap: .65rem; }
.criteria__gates li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: .5rem;
  font-size: .97rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.criteria__gates li::before {
  content: '';
  width: .85rem;
  height: .85rem;
  margin-top: .42em;
  border: 1px solid var(--ink-3);
  background:
    linear-gradient(to bottom right, transparent 44%, var(--ink-3) 44%, var(--ink-3) 56%, transparent 56%),
    linear-gradient(to bottom left,  transparent 44%, var(--ink-3) 44%, var(--ink-3) 56%, transparent 56%);
}

.criteria__title { margin-bottom: 1.1rem; }
.criteria__list { display: grid; gap: 0; counter-reset: crit; border-top: 1px solid var(--rule); }
.criteria__list li {
  counter-increment: crit;
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: .5rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: .99rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.criteria__list li::before {
  content: counter(crit, decimal-leading-zero);
  font-size: .82rem;
  color: var(--ink-3);
  padding-top: .3em;
  font-variant-numeric: tabular-nums;
}
.criteria__foot { margin-top: 1.25rem; color: var(--ink-3); font-size: .92rem; }

/* --- Gegenüberstellung: dafür und dagegen --- */
.scales { display: grid; gap: 2rem; }

.scale__title { margin-bottom: 1.1rem; }
.scale--pro .scale__title { color: var(--ink-2); }
.scale--contra .scale__title { color: var(--ink-3); }
.scale__list { display: grid; gap: .85rem; }
.scale__list li {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  gap: .5rem;
  color: var(--ink-2);
  font-size: .99rem;
  line-height: 1.55;
}
.scale__list li::before {
  font-size: .9rem;
  line-height: 1.7;
}
.scale--pro .scale__list li::before { content: '+'; color: var(--ink-2); }
.scale--contra .scale__list li::before { content: '−'; color: var(--ink-3); }

.scale__ref {
  font-size: .82rem;
  letter-spacing: .01em;
  color: var(--ink-3);
  white-space: nowrap;
}
.scale__ref::before { content: '['; }
.scale__ref::after { content: ']'; }

/* --- Gegenüberstellung als Tabelle --- */
.ledger { border-top: 1px solid var(--rule-mid); overflow-x: auto; }
.ledger table { min-width: 34rem; }
.ledger th, .ledger td {
  text-align: left;
  vertical-align: top;
  padding: .9rem 1rem .9rem 0;
  border-bottom: 1px solid var(--rule);
}
.ledger thead th {
  font-family: var(--font-text);
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  font-weight: 400;
  padding-top: 1.25rem;
  border-bottom-color: var(--rule-mid);
}
.ledger thead th:nth-child(2) { color: var(--ink-2); }
.ledger thead th:nth-child(3) { color: var(--ink-3); }
.ledger tbody th {
  width: 11rem;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--ink-3);
  padding-top: 1.15rem;
}
.ledger td { color: var(--ink-2); font-size: .99rem; }

/* --- Drei Schritte --- */
.steps { display: grid; gap: 2.5rem; }

.step__num { margin-bottom: 1rem; color: var(--ink-3); }
.step h3 { margin-bottom: .5rem; }
.step__claim { color: var(--ink-2); margin-bottom: 1.35rem; }
.step__when { margin-bottom: .7rem; }
.ticks { display: grid; gap: .6rem; margin-bottom: 1.5rem; }
.ticks li {
  display: grid;
  grid-template-columns: 1rem 1fr;
  gap: .4rem;
  font-size: .96rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.ticks li::before { content: '·'; color: var(--ink-3); }
.step__note {
  font-size: .93rem;
  color: var(--ink-3);
}
.step__note span {
  display: block;
  font-size: .82rem;
  letter-spacing: .01em;
  color: var(--ink-3);
  margin-bottom: .35rem;
}

/* --- Merkliste --- */
.notes { margin-top: 2rem; }
.notes__title { margin-bottom: .9rem; }
.notes__items { display: grid; gap: .7rem; }
.notes__items li {
  display: grid;
  grid-template-columns: 1rem 1fr;
  gap: .4rem;
  font-size: .96rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.notes__items li::before { content: '—'; color: var(--ink-3); font-size: .8rem; line-height: 1.9; }

/* --- Beispielsätze --- */
.quote { border-top: 1px solid var(--rule); padding-block: 1.75rem; }
.quote:last-of-type { border-bottom: 1px solid var(--rule); }
.quote__label { margin-bottom: .9rem; }
.quote blockquote {
  padding-left: 1.25rem;
  border-left: 2px solid var(--ink);
}
.quote blockquote p {
  font-size: clamp(1.15rem, 1.7vw, 1.38rem);
  line-height: 1.5;
  font-style: italic;
  color: var(--ink);
  max-width: 46ch;
}
.quote__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
  margin-top: 1.25rem;
}
.quote__status { font-size: .9rem; color: var(--ink-2); }

.hints { display: grid; gap: .8rem; margin-top: 2rem; }
.hints li {
  display: grid;
  grid-template-columns: 1rem 1fr;
  gap: .4rem;
  font-size: .96rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.hints li::before { content: '·'; color: var(--ink-3); }

/* --- Glossar --- */
.glossary { border-top: 1px solid var(--rule); }
.glossary__item {
  display: grid;
  gap: .25rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--rule);
}
.glossary__term { font-size: 1.1rem; color: var(--ink); }
.glossary__text { font-size: .96rem; line-height: 1.55; color: var(--ink-2); }
.glossary__badge { justify-self: start; }
.glossary__legend { margin-top: 1.5rem; color: var(--ink-3); font-size: .93rem; max-width: 54ch; }

/* --- Häufige Fragen --- */
.faq { border-top: 1px solid var(--rule-mid); max-width: 54rem; }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__frage {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.15rem 0;
  cursor: pointer;
  list-style: none;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: var(--ink);
}
.faq__frage::-webkit-details-marker { display: none; }
.faq__frage::before {
  content: '+';
  flex: none;
  width: 1rem;
  font-size: .95rem;
  color: var(--ink-3);
}
.faq__item[open] .faq__frage::before { content: '–'; }
.faq__frage:hover { color: var(--ink-3); }
.faq__frage:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.faq__antwort { padding: 0 0 1.35rem 2rem; max-width: var(--measure); color: var(--ink-2); }
.faq__item[open] .faq__antwort { animation: faq-open .35s var(--ease); }
@keyframes faq-open { from { opacity: 0; translate: 0 -.3rem; } }

/* --- Satz-Werkstatt in Abschnitt 10 ---
   Ohne JavaScript würde das Feld nichts tun, deshalb erscheint es erst mit. */
.werkstatt { display: none; }
.js .werkstatt { display: grid; gap: .6rem; max-width: var(--measure); }
.werkstatt__label { font-weight: 600; }
.werkstatt__input {
  width: 100%;
  padding: .6rem .7rem;
  border: 1px solid var(--rule-mid);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}
.werkstatt__input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.werkstatt__out:empty,
.werkstatt__summary:empty { display: none; }
.werkstatt__out { line-height: 1.7; }
/* Markiert wird mit Durchstreichen, wie bei der Probe auf Papier. */
.werkstatt__mark {
  background: none;
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.werkstatt__summary { color: var(--ink-2); }
.werkstatt__note { font-size: .88rem; color: var(--ink-3); }

/* --- Die Ausnahme: der einzige rote Abschnitt der Seite.
   Er bewegt sich nie, auch nicht beim Einblenden. --- */
.emergency {
  padding-left: 1.25rem;
  border-left: 2px solid var(--alarm);
  color: var(--ink-2);
}
.emergency p + p { margin-top: 1rem; }
.emergency strong { color: var(--ink); }

.hotlines { display: grid; gap: 0; margin: 1.75rem 0 1.25rem; border-top: 1px solid var(--alarm); }
.hotlines li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--rule);
}
.hotlines__when {
  font-size: .82rem;
  letter-spacing: .01em;
  color: var(--alarm);
  flex: none;
  width: 100%;
}
@media (min-width: 40rem) { .hotlines__when { width: 12rem; } }
.hotlines__who { color: var(--ink-2); font-size: .97rem; }
/* Die Notfallnummern sind das Wichtigste hier: bequem antippbar. */
.hotlines a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: .3rem .85rem;
  margin-left: auto;
  border: 1px solid var(--alarm);
  color: var(--ink);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-decoration: none;
}
.hotlines a:hover { background: var(--alarm); color: #fbfaf7; }
.emergency__small { font-size: .92rem; color: var(--ink-3); }

/* Wer über „Hilfe“ hierher springt, sucht zuerst die eigene Lage,
   nicht den Text darüber. Deshalb stehen die Wege vor der Erklärung. */
.routes__title { margin-bottom: .5rem; }
.routes { margin-bottom: 1.75rem; border-top: 1px solid var(--rule); }
.routes li { padding: .7rem 0; border-bottom: 1px solid var(--rule); }
.routes a { color: var(--ink); font-weight: 600; }
.routes span { display: block; margin-top: .15rem; font-size: .92rem; }

.traces { margin-top: 1.5rem; border-block: 1px solid var(--rule); }
.traces__title {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--ink);
  font-size: .95rem;
  cursor: pointer;
}
.traces__title:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.traces__list { display: grid; gap: .6rem; padding-bottom: 1.1rem; font-size: .92rem; }

/* --- Drei Fragen für heute Abend --- */
.tonight { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.75rem; border-top: 1px solid var(--rule-mid); }
.tonight__title { margin-bottom: 1.25rem; }
.tonight__list { display: grid; gap: 0; counter-reset: t; border-top: 1px solid var(--rule); }
.tonight__list li {
  counter-increment: t;
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: .5rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.45;
}
.tonight__list li::before {
  content: counter(t, decimal-leading-zero);
  font-size: .82rem;
  color: var(--ink-3);
  padding-top: .45em;
  font-variant-numeric: tabular-nums;
}

/* --- Quellen --- */
.sources { max-width: 54rem; color: var(--ink-2); }
.sources__list { display: grid; gap: 0; margin: 1.75rem 0 1.5rem; border-top: 1px solid var(--rule); counter-reset: src; }
/* Kein Grid: Die Einträge enthalten <em> und <a>, und jedes weitere
   Kind bekäme im Grid eine eigene Zelle. Die Ziffer steht deshalb
   absolut, der Text bekommt links Platz. */
.sources__list li {
  counter-increment: src;
  position: relative;
  padding: .9rem 0 .9rem 2.75rem;
  border-bottom: 1px solid var(--rule);
  font-size: .95rem;
  line-height: 1.6;
}
.sources__list li::before {
  content: counter(src, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.25rem;
  font-size: .82rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.sources__note { color: var(--ink-3); font-size: .92rem; max-width: 56ch; }