/* Oberflow — Bausteine für die CRA-Seite
 *
 * Ergänzt stil.css, ersetzt nichts. Die Seite lädt beide Dateien.
 * Eigene Datei, damit an den bestehenden Seiten nichts kippt.
 *
 * GESTALTUNGSENTSCHEIDUNG: Das Material dieses Themas ist eine Textdatei.
 * Eine security.txt nach RFC 9116 ist ein Klartextdokument mit festen Feldern.
 * Deshalb steht im Hero nicht eine Behauptung über das Produkt, sondern das
 * Produkt selbst — zwei HTTP-Antworten nebeneinander, vorher und nachher.
 * Monospace ist hier kein Dekor, sondern das Original.
 *
 * KONTRASTE nachgerechnet nach der WCAG-Formel (relative Luminanz),
 * genau wie in stil.css:
 *   #b3261e auf #ffffff   6.53:1   „fehlt"-Zustand
 *   #b3261e auf #f5f5f7   6.00:1   derselbe auf der Fläche
 *   #1D7268 auf #ffffff   5.74:1   „vorhanden"-Zustand (Token aus stil.css)
 *   #1d1d1f auf #f5f5f7  15.46:1   Dateitext
 *   #a8a8ad auf #1d1d1f   7.11:1   Kommentarzeilen auf dunkel
 *
 * Farbe trägt nirgends allein eine Bedeutung: Jeder Zustand hat zusätzlich
 * ein Wort („fehlt" / „vorhanden") und den HTTP-Status im Klartext.
 * WCAG 1.4.1.
 */

:root {
  --fehlt: #b3261e;
  --mono:
    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
}

/* ---------- Die zwei Zustände ---------- */

.zustaende {
  display: grid;
  gap: var(--s5);
  grid-template-columns: 1fr;
  margin-top: var(--s7);
}
@media (min-width: 48rem) {
  .zustaende {
    grid-template-columns: 1fr 1fr;
    gap: var(--s6);
  }
}

.zustand {
  display: flex;
  flex-direction: column;
  background: var(--flaeche);
  border-radius: var(--radius);
  overflow: hidden;
}

/* Der Kopf trägt Farbe UND Wort — nie Farbe allein. */
.zustand-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s3);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--rahmen);
  font-size: 0.94rem;
}
.zustand-wann {
  font-weight: 700;
}
.zustand-status {
  font-family: var(--mono);
  font-size: 0.86rem;
}
.zustand-fehlt .zustand-status {
  color: var(--fehlt);
}
.zustand-da .zustand-status {
  color: var(--aktion);
}

.zustand pre {
  margin: 0;
  padding: var(--s5);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.84rem;
  line-height: 1.65;
  color: var(--text);
  tab-size: 2;
}
.zustand pre .leer {
  color: var(--text-leise);
  font-style: italic;
  font-family: inherit;
}

/* ---------- Messung in der dunklen Sektion ---------- */

.messung {
  display: grid;
  gap: var(--s5);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 54rem) {
  .messung {
    grid-template-columns: auto 1fr;
    gap: var(--s8);
  }
}
.messung-zahl {
  font-size: clamp(2.6rem, 7vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  white-space: nowrap;
}
.messung-zahl span {
  display: block;
  margin-top: var(--s3);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--auf-dunkel-leise);
  white-space: normal;
  max-width: 22ch;
}
.messung-methode {
  font-family: var(--mono);
  font-size: 0.84rem;
  line-height: 1.7;
  color: var(--auf-dunkel-leise);
  margin-top: var(--s5);
}

/* ---------- Leistungsliste ---------- */

.leistung {
  max-width: var(--spalte);
}
.leistung + .leistung {
  margin-top: var(--s7);
}
.leistung h3 {
  margin-bottom: var(--s2);
}
.leistung > p {
  color: var(--text-leise);
  margin-bottom: var(--s4);
}
.leistung ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.leistung li {
  position: relative;
  padding-left: var(--s5);
  margin-bottom: var(--s3);
}
.leistung li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--aktion);
}
.leistung li code {
  font-family: var(--mono);
  font-size: 0.88em;
}

/* ---------- Ausschlüsse ---------- */
/* Bewusst dieselbe Form wie die Leistungen, nur mit anderem Marker:
   Es ist dieselbe Art von Information, nur mit umgekehrtem Vorzeichen. */

.ausschluss li::before {
  content: '';
  top: 0.78em;
  height: 2px;
  width: 12px;
  border-radius: 0;
  background: var(--fehlt);
}
.ausschluss li strong {
  display: block;
}
.ausschluss li span {
  color: var(--text-leise);
}

/* ---------- Preis ---------- */

.preise-cra {
  display: grid;
  gap: var(--s5);
  grid-template-columns: 1fr;
  margin-top: var(--s6);
}
@media (min-width: 48rem) {
  .preise-cra {
    grid-template-columns: 1fr 1fr;
    gap: var(--s6);
  }
}
.preisblock {
  padding: var(--s6);
  background: var(--flaeche);
  border-radius: var(--radius);
}
/* Nur ein Block ist hervorgehoben — die Grenze trägt Bedeutung,
   deshalb eine Farbe mit über 3:1 nach WCAG 1.4.11, kein blasser Rahmen. */
.preisblock-betont {
  background: var(--weiss);
  border: 2px solid var(--aktion);
}
.preisblock h3 {
  margin-bottom: var(--s2);
}
.preisblock .betrag {
  font-size: clamp(1.7rem, 3.4vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--s2);
}
.preisblock .betrag small {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-leise);
}
.preisblock p {
  color: var(--text-leise);
  margin-bottom: 0;
}
.preisblock p + p {
  margin-top: var(--s3);
}

/* Der Block scrollt waagerecht, also muss er per Tastatur erreichbar sein
   (WCAG 2.1.1). tabindex="0" steht im HTML, der sichtbare Fokus hier. */
.zustand pre:focus-visible {
  outline: 3px solid var(--aktion);
  outline-offset: -3px;
}

/* ========== Grafiken statt Textwüste ==========
 *
 * Felix' Kritik am 09.09.2026: „voller Text ohne Struktur, das ist stur zum
 * Lesen" und „das Design einfach langweilig". Die Farben bleiben.
 *
 * Der website-brief.md sagt dasselbe schon seit dem 26.07.: Der Besucher hat
 * 20 bis 40 Sekunden und springt von Überschrift zu Überschrift (Layer-Cake).
 * „Das F-Muster ist ein Symptom schlecht gegliederter Fließtexte."
 *
 * Alle Grafiken sind Inline-SVG ohne JavaScript und ohne externe Datei —
 * dieselbe Regel wie im übrigen stil.css. Jede trägt role="img" und einen
 * <title>, und daneben steht der Sachverhalt zusätzlich als Text: Wer die
 * Grafik nicht sieht, verliert nichts.
 */

/* ---------- Bild und Text nebeneinander ---------- */

.bildtext {
  display: grid;
  gap: var(--s6);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 56rem) {
  .bildtext {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--s8);
  }
  .bildtext-gedreht > svg {
    order: 2;
  }
}
.bildtext > svg {
  width: 100%;
  height: auto;
}
.bildtext p:last-child {
  margin-bottom: 0;
}

/* ---------- Der Meldeweg ---------- */

.weg-linie {
  stroke: var(--rahmen-stark);
  stroke-width: 2;
  fill: none;
}
.weg-linie-tot {
  stroke: var(--fehlt);
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 6 5;
}
.weg-kasten {
  fill: var(--flaeche);
}
.weg-kasten-aktiv {
  fill: var(--aktion);
}
.weg-kasten-tot {
  fill: #fbeceb;
}
.weg-text {
  font-size: 13px;
  fill: var(--text);
}
.weg-text-hell {
  font-size: 13px;
  fill: var(--weiss);
  font-weight: 600;
}
.weg-text-tot {
  font-size: 13px;
  fill: var(--fehlt);
}
.weg-klein {
  font-size: 11.5px;
  fill: var(--text-leise);
}

/* ---------- Zeitstrahl ---------- */

.zeit-achse {
  stroke: var(--rahmen);
  stroke-width: 3;
}
.zeit-gelaufen {
  stroke: var(--aktion);
  stroke-width: 3;
}
.zeit-punkt {
  fill: var(--aktion);
}
.zeit-punkt-offen {
  fill: var(--weiss);
  stroke: var(--rahmen-stark);
  stroke-width: 2.5;
}
.zeit-datum {
  font-size: 13px;
  font-weight: 700;
  fill: var(--text);
}
.zeit-was {
  font-size: 12px;
  fill: var(--text-leise);
}
.zeit-rueck {
  fill: none;
  stroke: var(--fehlt);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}

/* ---------- Balken für die Messung ---------- */

.balken-hintergrund {
  fill: rgba(255, 255, 255, 0.14);
}
.balken-voll {
  fill: #6ee7d4;
}
.balken-zahl {
  font-size: 15px;
  font-weight: 700;
  fill: var(--weiss);
}
.balken-label {
  font-size: 13px;
  fill: var(--auf-dunkel-leise);
}

/* ---------- Selbst-Einordnung: zwei Spalten, ja und nein ---------- */

.einordnung {
  display: grid;
  gap: var(--s5);
  grid-template-columns: 1fr;
  margin-top: var(--s6);
}
@media (min-width: 48rem) {
  .einordnung {
    grid-template-columns: 1fr 1fr;
    gap: var(--s6);
  }
}
.einordnung > div {
  padding: var(--s5) var(--s6);
  border-radius: var(--radius);
}
.einordnung-ja {
  background: var(--flaeche);
  border-top: 4px solid var(--aktion);
}
.einordnung-nein {
  background: var(--flaeche);
  border-top: 4px solid var(--rahmen-stark);
}
.einordnung h3 {
  font-size: 1.06rem;
  margin-bottom: var(--s3);
}
.einordnung ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.einordnung li {
  padding-left: var(--s5);
  position: relative;
  margin-bottom: var(--s2);
  font-size: 0.98rem;
}
.einordnung-ja li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--aktion);
}
.einordnung-nein li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 11px;
  height: 2px;
  background: var(--rahmen-stark);
}

/* ---------- Vertrauenszeile im Hero ---------- */

.vertrauen-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  margin-top: var(--s5);
  font-size: 0.92rem;
  color: var(--text-leise);
}
.vertrauen-zeile span {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}
.vertrauen-zeile span::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--aktion);
  flex: none;
}

/* ---------- Sofort-Pruefung im Selbsttest (10.09.2026) ----------
   Formular auf der dunklen Sektion. Kontraste: Eingabefeld weiss mit
   #1d1d1f-Text (16.83:1), Hinweistext #a8a8ad auf #1d1d1f (7.11:1, Token
   --auf-dunkel-leise), Ergebnistext weiss (16.83:1). */
.pruef-formular {
  margin-top: var(--s6);
  max-width: 44rem;
}
.pruef-formular label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--s2);
}
.pruef-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}
.pruef-zeile input {
  flex: 1 1 14rem;
  min-height: 50px;
  padding: var(--s2) var(--s4);
  font-size: 1.02rem;
  color: var(--text);
  background: var(--weiss);
  border: 2px solid transparent;
  border-radius: var(--radius-pille);
}
.pruef-zeile input:focus-visible {
  outline: 3px solid #7fd4c6;
  outline-offset: 2px;
}
.pruef-ergebnis {
  margin-top: var(--s4);
  padding: var(--s4) var(--s5);
  background: rgba(255, 255, 255, 0.08);
  border-left: 4px solid #6ee7d4;
  border-radius: 0 var(--radius) var(--radius) 0;
  max-width: none;
}
.pruef-hinweis {
  margin-top: var(--s3);
  font-size: 0.86rem;
  color: var(--auf-dunkel-leise);
  max-width: none;
}