/*
  Online Auffallen, Stilblatt fuer alle Seiten.
  Eine Datei, keine Inline-Styles: die Content-Security-Policy erlaubt
  ausschliesslich style-src 'self', siehe infra/nginx/security-headers.conf.
  Schriften ebenso als Datei, font-src 'self' laesst keine data-URIs zu.
*/

@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonts/fraunces-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces'; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url('fonts/fraunces-latin-wght-italic.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

:root {
  --grund: #ffffff; --flaeche: #f5f5f8; --tief: #131218; --auf-tief: #f4f2f8;
  --tinte: #111014; --text: #3a3944; --leise: #67656f; --linie: #e5e3eb;
  --marker: #ffe600; --auf-marker: #111014;
  /* Korrekturrot im Fehlersuch-Spiel. Fehlte, dadurch fiel stroke auf none
     zurueck und der Strich durch die falsche Zeile wurde nie gezeichnet. */
  --rot: #c81e1e;
  --dv-violett: #7c3aed;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --grund: #141319; --flaeche: #1e1d27; --tief: #000000; --auf-tief: #f4f2f8;
    --tinte: #f3f1f7; --text: #cfccd7; --leise: #a09bad; --linie: #302e3a; --rot: #ff6b6b; --dv-violett: #a684f5;
  }
}
:root[data-theme="dark"] {
  --grund: #141319; --flaeche: #1e1d27; --tief: #000000; --auf-tief: #f4f2f8;
  --tinte: #f3f1f7; --text: #cfccd7; --leise: #a09bad; --linie: #302e3a; --rot: #ff6b6b; --dv-violett: #a684f5;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0; background: var(--grund); color: var(--text);
  font-family: ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: clamp(1rem, 0.97rem + 0.16vw, 1.09rem); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: 'Fraunces', Georgia, serif; color: var(--tinte); text-wrap: balance; margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
/* Auf dunklen Flaechen ist currentColor weiss, der Ring lag dadurch
   unsichtbar auf dem hellen Seitengrund. */
.ruf:focus-visible, .knopf:focus-visible, .weg:focus-visible { outline-color: var(--tinte); }

.bahn { max-width: 70rem; margin-inline: auto; padding-inline: clamp(1.15rem, 4.5vw, 3rem); }
.schmal { max-width: 33em; }
.eyebrow { font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--leise); margin: 0 0 1rem; }

@media (prefers-reduced-motion: no-preference) {
  .js .auf { opacity: 0; transform: translateY(1.1rem); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
  .js .auf.da { opacity: 1; transform: none; }
}

.kopf { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: clamp(1.3rem, 3.4vw, 2.2rem); }
/* Lockup aus dem vektoriellen Zeichen und der Original-Wortmarke.
   Die Wortmarke liegt als Alphamaske vor, deshalb folgt sie der Textfarbe
   und funktioniert in beiden Themes aus einer einzigen Datei. */
.lockup { display: flex; align-items: center; gap: clamp(0.7rem, 1.6vw, 1.05rem); text-decoration: none; }
.zeichen {
  display: block; width: clamp(2.6rem, 5vw, 3.5rem); height: auto; color: var(--tinte);
  --oa-stroke: 7; transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.wortmarke {
  display: block; width: clamp(9.5rem, 17vw, 13.5rem); aspect-ratio: 373 / 32;
  background-color: var(--tinte);
  -webkit-mask: url('logo-wortmarke.png') no-repeat left center / contain;
  mask: url('logo-wortmarke.png') no-repeat left center / contain;
}
@supports not ((-webkit-mask-image: url(#m)) or (mask-image: url(#m))) {
  .wortmarke { display: none; }
}
.lockup:hover .zeichen { transform: rotate(-8deg) scale(1.06); }
.kopf .ort { font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--leise); }

/* Aufmacher */
.hero { padding-block: clamp(3.5rem, 13vw, 9rem) clamp(2rem, 6vw, 4rem); }
.hero h1 { font-weight: 700; font-size: clamp(2.4rem, 9vw, 6.4rem); line-height: 0.99; letter-spacing: -0.045em; max-width: 8.6em; }
.hero .nach { font-size: clamp(1.1rem, 2.1vw, 1.42rem); line-height: 1.45; max-width: 26em; margin: clamp(1.6rem, 4vw, 2.4rem) 0 0; }

.mark { position: relative; display: inline-block; isolation: isolate; color: var(--auf-marker); }
/* Grundzustand ist sichtbar. Nur wenn JavaScript läuft und Bewegung
   erwünscht ist, wird der Balken zurückgezogen und gezeichnet. Sonst
   wäre die Markierung ohne JS dauerhaft weg. */
.mark::before {
  content: ""; position: absolute; z-index: -1; left: -0.09em; right: -0.09em; top: 0.09em; bottom: 0.08em;
  background: var(--marker); transform: scaleX(1); transform-origin: left center;
}
@media (prefers-reduced-motion: no-preference) {
  .js .mark::before { transform: scaleX(0); }
  .js .hero .mark::before { animation: markieren 500ms cubic-bezier(.65,0,.35,1) 380ms forwards; }
  .js .zwischenruf p.da .mark::before { animation: markieren 520ms cubic-bezier(.65,0,.35,1) 140ms forwards; }
}
@keyframes markieren { to { transform: scaleX(1); } }

/* Beweisstreifen */
.beweis { background: var(--tief); color: var(--auf-tief); padding-block: clamp(2.4rem, 7vw, 4.5rem); }
/* Im Hellmodus traegt der schwarze Streifen den staerksten Bruch der Seite,
   18,6 zu 1 gegen den Grund. Dunkel waeren es 1,1 zu 1, er verschwaende also.
   Eine gelbe Oberkante markiert ihn dort stattdessen als eigenen Bereich. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .beweis { border-top: 3px solid var(--marker); }
}
:root[data-theme="dark"] .beweis { border-top: 3px solid var(--marker); }
.beweis h2 { color: var(--auf-tief); font-weight: 600; font-size: clamp(1.25rem, 2.6vw, 1.7rem); letter-spacing: -0.02em; max-width: 18em; }
.beweis .eyebrow { color: #8f8b9c; }
.messwerte {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: clamp(1.4rem, 4vw, 2.5rem); margin: clamp(1.6rem, 4vw, 2.4rem) 0 0;
  border-top: 1px solid #2f2c39; padding-top: clamp(1.4rem, 4vw, 2.2rem);
}
.mw dt { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: #8f8b9c; margin-bottom: 0.4rem; }
.mw dd {
  margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 600;
  font-size: clamp(2rem, 5.4vw, 3.4rem); line-height: 1; letter-spacing: -0.035em;
  color: var(--marker); font-variant-numeric: tabular-nums;
}
.mw dd small { font-size: 0.36em; font-weight: 500; letter-spacing: 0.02em; color: #b8b3c4; margin-left: 0.25em; font-family: inherit; }
.beweis .fussnote { font-size: 0.82rem; color: #8f8b9c; margin: clamp(1.3rem, 3vw, 1.8rem) 0 0; max-width: 42em; }

/* Abschnitte */
.block { padding-block: clamp(2.8rem, 8vw, 5.5rem); }
.block.flaeche { background: var(--flaeche); }
.block h2 { font-weight: 650; font-size: clamp(1.6rem, 4vw, 2.7rem); line-height: 1.12; letter-spacing: -0.03em; max-width: 15em; margin-bottom: clamp(1.1rem, 2.6vw, 1.6rem); }
.block > .bahn > p { max-width: 33em; margin: 0 0 1rem; }

.leistungen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr)); gap: clamp(1.5rem, 4vw, 2.8rem); margin-top: clamp(1.8rem, 4vw, 2.6rem); }
.leistung { position: relative; padding-top: 0.95rem; }
.leistung::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--tinte);
}
.leistung::after {
  content: ""; position: absolute; inset: 0 auto auto 0; height: 2px; width: 100%;
  background: var(--marker); transform: scaleX(0); transform-origin: left;
  transition: transform .42s cubic-bezier(.2,.7,.3,1);
}
.leistung:hover::after, .leistung:focus-within::after { transform: scaleX(1); }
.leistung h3 { font-weight: 650; font-size: clamp(1.12rem, 2vw, 1.3rem); line-height: 1.22; letter-spacing: -0.016em; margin-bottom: 0.5rem; }
.leistung p { margin: 0; font-size: 0.97em; }
.leistung .fuer { display: block; margin-top: 0.65rem; font-size: 0.83em; color: var(--leise); }

/* Zwischenruf: ein Satz, der Tempo belegt statt behauptet */
.zwischenruf { padding-block: clamp(2.4rem, 7vw, 4.5rem); border-top: 1px solid var(--linie); }
/* Kindkombinator, nicht Nachkomme: sonst erbt jeder Absatz im aufklappbaren
   Formular darunter die Aufmacher-Typografie und wird riesig. */
.zwischenruf > p {
  font-family: 'Fraunces', Georgia, serif; font-weight: 600;
  font-size: clamp(1.5rem, 4.4vw, 3rem); line-height: 1.12; letter-spacing: -0.032em;
  color: var(--tinte); max-width: 15em; margin: 0; text-wrap: balance;
}
.zwischenruf > .dazu { font-family: inherit; font-weight: 400; font-size: clamp(0.95rem, 1.7vw, 1.05rem); line-height: 1.55; color: var(--leise); letter-spacing: 0; max-width: 32em; margin-top: clamp(1rem, 2.4vw, 1.4rem); }

/* Fragen und Antworten, der SEO-Kern */
.fragen { margin-top: clamp(1.6rem, 4vw, 2.4rem); max-width: 48rem; }
.frage { border-top: 1px solid var(--linie); }
.frage:last-of-type { border-bottom: 1px solid var(--linie); }
.frage summary {
  cursor: pointer; list-style: none; padding-block: clamp(0.95rem, 2.4vw, 1.3rem);
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.2rem;
  font-family: 'Fraunces', Georgia, serif; font-weight: 600; color: var(--tinte);
  font-size: clamp(1.04rem, 2vw, 1.24rem); line-height: 1.3; letter-spacing: -0.014em;
  transition: color .2s ease;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary:hover { color: var(--leise); }
.frage .zeichenplus {
  flex: none; width: 1.1em; height: 1.1em; position: relative; margin-top: 0.15em;
}
.frage .zeichenplus::before, .frage .zeichenplus::after {
  content: ""; position: absolute; background: var(--tinte); border-radius: 1px;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), opacity .3s ease;
}
.frage .zeichenplus::before { inset: 48% 0 auto 0; height: 2px; }
.frage .zeichenplus::after { inset: 0 auto 0 48%; width: 2px; }
.frage[open] .zeichenplus::after { transform: rotate(90deg); opacity: 0; }
.huelle { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s cubic-bezier(.2,.7,.3,1); }
.frage[open] .huelle { grid-template-rows: 1fr; }
.antwort { overflow: hidden; }
.antwort p { margin: 0 0 0.85rem; max-width: 36em; }
.antwort p:last-child { padding-bottom: clamp(1rem, 2.6vw, 1.5rem); }
@media (prefers-reduced-motion: reduce) {
  .huelle, .frage .zeichenplus::before, .frage .zeichenplus::after, .leistung::after { transition: none; }
}

/* ---------- Der Sprayer ----------
   Der Avatar läuft auf einer Linie UNTER dem Absatz, nicht über den Text.
   Das Canvas deckt die ganze Antwort ab, nimmt aber keine Klicks an, damit
   der Link jederzeit anklickbar bleibt. */
.antwort.mit-sprayer { position: relative; padding-bottom: 2.6rem; }
.antwort.mit-sprayer > canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 2;
}
.ziel-dv {
  color: var(--tinte); text-decoration: none; font-weight: 600;
  border-bottom: 2px solid currentColor; padding-bottom: 1px; white-space: nowrap;
  transition: color .55s cubic-bezier(.4,0,.3,1);
}
/* Eigener Ton fuer den Dunkelmodus. #7c3aed kommt dort auf 3,06:1 gegen die
   Flaeche, und der Sprayer faerbt den Link dauerhaft um, verschlechtert ihn
   also von 15:1 auf 3:1. #a684f5 bringt rund 6:1. */
.ziel-dv:hover, .ziel-dv.faerbt { color: var(--dv-violett); }

@media (prefers-reduced-motion: reduce) {
  .antwort.mit-sprayer > canvas { display: none; }
  .antwort.mit-sprayer { padding-bottom: 0; }
}

/* Gelber Bruch */
.filter { background: var(--marker); color: var(--auf-marker); padding-block: clamp(2.8rem, 8vw, 5.5rem); }
.filter h2 { color: var(--auf-marker); font-weight: 700; font-size: clamp(1.7rem, 4.6vw, 3rem); letter-spacing: -0.032em; max-width: 13em; }
.filter .eyebrow { color: #6b5f00; }
.filter > .bahn > p { max-width: 33em; margin: 0 0 1rem; }
.nicht { list-style: none; padding: 0; margin: clamp(1.5rem, 4vw, 2.2rem) 0 0; max-width: 44rem; }
.nicht li { border-top: 1px solid rgba(17,16,20,.22); padding-block: clamp(0.9rem, 2.2vw, 1.2rem); display: grid; grid-template-columns: 1.5rem 1fr; gap: 0 0.5rem; }
.nicht li:last-child { border-bottom: 1px solid rgba(17,16,20,.22); }
/* Volle Deckung statt 55 Prozent: das Zeichen wird vorgelesen und lag mit
   2,75:1 deutlich unter der Grenze. */
.nicht li::before { content: "\00d7"; font-size: 1.15em; line-height: 1.35; opacity: .75; }
.nicht b { font-weight: 700; display: block; }
.nicht span { font-size: 0.95em; opacity: .78; }

/* Abschluss */
.abschluss { padding-block: clamp(3.2rem, 9vw, 6.5rem); }
.abschluss h2 { font-size: clamp(1.8rem, 5vw, 3.4rem); font-weight: 700; letter-spacing: -0.035em; }
.ruf {
  display: inline-block; margin-top: clamp(1.5rem, 4vw, 2.1rem); background: var(--tinte); color: var(--grund);
  font-weight: 650; font-size: clamp(1.05rem, 2.2vw, 1.3rem); letter-spacing: -0.012em;
  text-decoration: none; padding: 0.66em 1.15em;
  transition: background .25s ease, color .25s ease, transform .25s cubic-bezier(.2,.7,.3,1);
}
.ruf:hover { background: var(--marker); color: var(--auf-marker); transform: translateY(-2px); }
.zweitweg { margin-top: 1rem; font-size: 0.95em; color: var(--leise); }

.fuss { border-top: 1px solid var(--linie); padding-block: clamp(1.6rem, 4vw, 2.4rem); font-size: 0.84rem; color: var(--leise); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.8rem 2rem; }
.fuss p { margin: 0; max-width: 36em; }

/* Die zwei Wege */
.wege { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: clamp(1rem, 3vw, 1.8rem); margin-top: clamp(1.8rem, 4vw, 2.6rem); }
.weg {
  display: block; text-decoration: none; border: 2px solid var(--tinte);
  padding: clamp(1.15rem, 3vw, 1.7rem); position: relative; overflow: hidden;
  transition: transform .28s cubic-bezier(.2,.7,.3,1);
}
.weg::before {
  content: ""; position: absolute; inset: 0; background: var(--marker);
  transform: translateY(101%); transition: transform .32s cubic-bezier(.2,.7,.3,1); z-index: 0;
}
.weg:hover { transform: translateY(-3px); }
.weg:hover::before { transform: translateY(0); }
.weg > * { position: relative; z-index: 1; }
.weg:hover, .weg:hover .wert, .weg:hover .art { color: var(--auf-marker); }
.weg .art { display: block; font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--leise); margin-bottom: 0.5rem; }
.weg .wert { font-family: 'Fraunces', Georgia, serif; font-weight: 650; font-size: clamp(1.25rem, 3vw, 1.85rem); letter-spacing: -0.022em; color: var(--tinte); line-height: 1.1; display: block; }
.weg .dazu { display: block; margin-top: 0.55rem; font-size: 0.88em; color: var(--leise); }
.weg:hover .dazu { color: #5a5100; }
.ablauf { list-style: none; padding: 0; margin: clamp(1.4rem, 3.5vw, 2rem) 0 0; max-width: 42rem; counter-reset: s; }
.ablauf li { display: grid; grid-template-columns: 2rem 1fr; gap: 0 1rem; padding-block: clamp(0.8rem, 2vw, 1.05rem); border-top: 1px solid var(--linie); }
.ablauf li:last-child { border-bottom: 1px solid var(--linie); }
.ablauf li::before { counter-increment: s; content: counter(s); font-family: 'Fraunces', Georgia, serif; font-weight: 600; color: var(--leise); font-variant-numeric: tabular-nums; }
.ablauf b { display: block; font-family: 'Fraunces', Georgia, serif; font-weight: 650; color: var(--tinte); }
.ablauf span { font-size: 0.96em; color: var(--leise); }
/* ---------- Die Spielerei: Fehler finden ---------- */
.spielraum { display: none; }
.js .spielraum { display: block; }
.spiel {
  border: 2px solid var(--tinte); margin-top: clamp(1.5rem, 4vw, 2.2rem);
  max-width: 46rem; background: var(--grund);
}
.spiel-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: clamp(0.85rem, 2.2vw, 1.1rem) clamp(1rem, 2.6vw, 1.4rem);
  border-bottom: 2px solid var(--tinte); background: var(--tinte); color: var(--grund);
}
.spiel-kopf .titel { font-family: 'Fraunces', Georgia, serif; font-weight: 650; font-size: clamp(0.98rem, 2vw, 1.12rem); letter-spacing: -0.014em; }
.spiel-kopf .stand { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: .72; font-variant-numeric: tabular-nums; }

.karte { padding: clamp(1rem, 2.6vw, 1.5rem); }
.karte .firma { font-family: 'Fraunces', Georgia, serif; font-weight: 650; font-size: clamp(1.05rem, 2.2vw, 1.25rem); color: var(--tinte); margin-bottom: 0.15rem; }
.karte .quelle { font-size: 0.76rem; color: var(--leise); margin-bottom: clamp(0.8rem, 2vw, 1.1rem); }

.zeilen { display: grid; gap: 0; }
.zeile {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  border-top: 1px solid var(--linie); padding: clamp(0.6rem, 1.8vw, 0.85rem) 0.3rem;
  font: inherit; color: inherit; cursor: pointer; position: relative;
  transition: background .18s ease;
}
.zeile-innen {
  display: grid; grid-template-columns: minmax(7rem, 9.5rem) 1fr;
  gap: 0 clamp(0.6rem, 2vw, 1.2rem); align-items: baseline;
}
/* Auf schmalen Schirmen untereinander, zweispaltig bliebe fuer den Wert
   kaum Platz und lange Adressen brechen mitten im Wort. */
@media (max-width: 34rem) {
  .zeile-innen { grid-template-columns: 1fr; gap: 0.1rem; }
  .zeile .feld { font-size: 0.68rem; }
}
.zeile:last-child { border-bottom: 1px solid var(--linie); }
/* Dunkel ergab der Gelbstich #484114, darauf kam die Feldbeschriftung auf
   3,81:1. Ein neutraler Ton aus der Textfarbe funktioniert in beiden Themes. */
.zeile:hover:not([disabled]) { background: color-mix(in srgb, var(--tinte) 9%, transparent); }
.zeile[disabled] { cursor: default; }
.zeile .feld { font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--leise); }
.zeile .inhalt { color: var(--tinte); }

/* Der Strich ist ein Hintergrundverlauf, kein Overlay. Ein absolut gesetztes
   SVG richtet sich nach der Box, und die ist bei inline-block breiter als der
   Text, der Strich ragte deshalb rechts hinaus. Ein Hintergrund folgt dem
   Text selbst, auch ueber einen Zeilenumbruch hinweg. */
.zeile.gefunden .inhalt {
  background-image: linear-gradient(var(--rot), var(--rot));
  background-repeat: no-repeat;
  background-position: 0 58%;
  background-size: 0 3px;
  animation: durchstreichen 460ms cubic-bezier(.55,.1,.35,1) forwards;
}
@keyframes durchstreichen { to { background-size: 100% 3px; } }

.zeile .berichtigung {
  display: inline-block; margin-left: 0.7em; font-family: 'Fraunces', Georgia, serif;
  font-style: italic; font-weight: 500; color: var(--rot); opacity: 0;
  transform: rotate(-1.8deg) translateY(0.2em);
}
.zeile.gefunden .berichtigung { animation: notieren 380ms ease-out 320ms forwards; }
@keyframes notieren { to { opacity: 1; transform: rotate(-1.8deg) translateY(0); } }

.zeile.daneben { animation: wackeln 340ms ease; }
@keyframes wackeln { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)} 45%{transform:translateX(4px)} 70%{transform:translateX(-2px)} }

@media (prefers-reduced-motion: reduce) {
  /* Nur der gefundene Fehler wird aufgedeckt. Vorher galten diese Regeln fuer
     jede Zeile, damit stand die Loesung schon vor dem ersten Klick da. */
  .zeile.gefunden .inhalt { background-size: 100% 3px; animation: none; }
  .zeile.gefunden .berichtigung { opacity: 1; transform: rotate(-1.8deg); animation: none; }
  /* Ersatz fuer das Wackeln beim Fehlgriff, sonst gaebe es gar keine Rueckmeldung */
  .zeile.daneben { animation: none; outline: 2px solid var(--rot); outline-offset: -2px; }
}

/* Keine eigene Oberkante: die letzte Zeile der Liste hat bereits eine
   Unterkante, zusammen ergab das eine doppelte Linie, auch im zugeklappten
   Zustand. Der Abstand entsteht erst beim Aufklappen. */
.aufloesung {
  margin: 0; font-size: 0.93em; color: var(--leise);
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .34s cubic-bezier(.2,.7,.3,1), margin-top .34s cubic-bezier(.2,.7,.3,1);
}
.aufloesung.sichtbar { grid-template-rows: 1fr; margin-top: clamp(0.9rem, 2.4vw, 1.2rem); }
.aufloesung > div { overflow: hidden; }
.aufloesung p { margin: 0 0 0.8rem; max-width: 40em; }

.knopf {
  font: inherit; font-weight: 650; cursor: pointer; border: 2px solid var(--tinte);
  background: var(--tinte); color: var(--grund); padding: 0.5em 1em; text-decoration: none;
  display: inline-block; transition: background .22s ease, color .22s ease, transform .22s ease;
}
.knopf:hover { background: var(--marker); color: var(--auf-marker); border-color: var(--marker); transform: translateY(-2px); }
.knopf.leise { background: none; color: var(--tinte); }
.knopf.leise:hover { background: var(--tinte); color: var(--grund); border-color: var(--tinte); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 0.4rem; }

.ergebnis { padding: clamp(1.2rem, 3vw, 1.8rem); }
.ergebnis .zahl { font-family: 'Fraunces', Georgia, serif; font-weight: 650; font-size: clamp(1.8rem, 5vw, 2.8rem); line-height: 1.05; letter-spacing: -0.03em; color: var(--tinte); margin-bottom: 0.5rem; }
.ergebnis p { margin: 0 0 0.9rem; max-width: 38em; }

/* Kleinerer Aufmacher auf Unterseiten */
.hero.klein { padding-block: clamp(2.6rem, 9vw, 6rem) clamp(1.6rem, 4vw, 2.6rem); }
.hero.klein h1 { font-size: clamp(2rem, 6.6vw, 4.4rem); line-height: 1.02; letter-spacing: -0.04em; max-width: 11em; }
.hero.klein p { font-size: clamp(1.05rem, 1.9vw, 1.28rem); line-height: 1.5; max-width: 30em; margin: clamp(1.3rem, 3vw, 1.9rem) 0 0; }

/* Rechtstexte */
.rechtstext { max-width: 42rem; padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(2.5rem, 7vw, 4.5rem); }
.rechtstext h1 { font-weight: 700; font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.1; letter-spacing: -0.032em; margin-bottom: 0.7rem; }
.untertext { font-size: clamp(1rem, 1.8vw, 1.12rem); color: var(--leise); margin: 0 0 clamp(2rem, 5vw, 3rem); max-width: 34em; }
.rechtstext h2 { font-weight: 650; font-size: clamp(1.15rem, 2.2vw, 1.35rem); line-height: 1.3; margin: clamp(2rem, 4.5vw, 2.6rem) 0 0.6rem; }
.rechtstext p, .rechtstext ul { margin: 0 0 1rem; max-width: 36em; }
.rechtstext ul { padding-left: 1.2rem; }
.rechtstext li { margin-bottom: 0.3rem; }
.rechtstext a { color: var(--tinte); text-decoration-color: var(--marker); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.anschrift { font-style: normal; margin: 0 0 1rem; line-height: 1.7; }
.daten { margin: 0 0 1rem; display: grid; grid-template-columns: minmax(11rem, auto) 1fr; gap: 0.35rem 1.5rem; max-width: 38em; }
.daten dt { color: var(--leise); }
.daten dd { margin: 0; }
.stand { margin-top: clamp(2rem, 5vw, 3rem); padding-top: 1rem; border-top: 1px solid var(--linie); font-size: 0.85rem; color: var(--leise); }
@media (max-width: 52rem) {
  .daten { grid-template-columns: 1fr; gap: 0; }
  .daten dt { margin-top: 0.7rem; }
}

/* Kopfnavigation */
.kopfnav { display: flex; align-items: center; gap: clamp(1.1rem, 3.4vw, 2.4rem); flex-wrap: wrap; justify-content: flex-end; }
/* Die Ortsangabe ist Information, kein Navigationspunkt. Sie steht deshalb
   weiter weg vom Link und ohne dessen Auszeichnung. */
.kopfnav .ort { opacity: .82; }
/* Die Zeile ist laenger als der alte Ortsvermerk. Sie bekommt deshalb eine
   engere Sperrung und weicht auf schmalen Bildschirmen ganz, statt den Kopf
   umbrechen zu lassen. Titel, Einzugsgebiet und die strukturierten Daten
   tragen die Angabe ohnehin. */
.kopfnav .ort { letter-spacing: 0.16em; }
@media (max-width: 46rem) { .kopfnav .ort { display: none; } }
.kopfnav a {
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
  color: var(--tinte); text-decoration: none; border-bottom: 2px solid var(--marker); padding-bottom: 2px;
}
.kopfnav a:hover { border-bottom-color: var(--tinte); }


/* ---------- Ratgeberseiten ---------- */
.artikel { max-width: 44rem; padding-block: clamp(1.2rem, 3vw, 2rem) clamp(2.5rem, 7vw, 4.5rem); }
.krume { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--leise); margin: 0 0 clamp(1rem, 2.6vw, 1.5rem); }
.artikel .krume a { color: var(--leise); text-underline-offset: 3px; }
.artikel .krume a:hover { color: var(--tinte); }
.artikel h1 { font-weight: 700; font-size: clamp(1.9rem, 5.2vw, 3.2rem); line-height: 1.08; letter-spacing: -0.034em; margin-bottom: clamp(1rem, 2.6vw, 1.5rem); max-width: 16em; }
.kurzantwort {
  font-size: clamp(1.05rem, 2vw, 1.22rem); line-height: 1.52; color: var(--tinte);
  border-left: 4px solid var(--marker); padding: 0.2rem 0 0.2rem 1.1rem;
  margin: 0 0 clamp(2rem, 5vw, 3rem); max-width: 34em;
}
.artikel h2 { font-weight: 650; font-size: clamp(1.35rem, 3vw, 1.85rem); line-height: 1.18; letter-spacing: -0.024em; margin: clamp(2.2rem, 5vw, 3rem) 0 0.8rem; max-width: 18em; }
.artikel h3 { font-weight: 650; font-size: clamp(1.08rem, 2vw, 1.24rem); line-height: 1.25; margin: clamp(1.5rem, 3.4vw, 2rem) 0 0.5rem; }
.artikel p { margin: 0 0 1rem; max-width: 36em; }
.artikel ul, .artikel ol { margin: 0 0 1.2rem; padding-left: 1.3rem; max-width: 36em; }
.artikel li { margin-bottom: 0.45rem; }
/* :not(.ruf), weil .artikel a sonst die weisse Schrift des Knopfes
   ueberschreibt: zwei Klassen schlagen eine, das ergab schwarz auf schwarz. */
.artikel a:not(.ruf) { color: var(--tinte); text-decoration-color: var(--marker); text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* Kein Grid auf dem li: Steht im Listenpunkt ein Element und danach noch
   Fliesstext, wird der Text ein eigenes Grid-Item und landet in der schmalen
   Zahlenspalte. Dort bricht dann jedes Wort einzeln um. Eine absolut
   gesetzte Ziffer ist gegen beliebigen Inhalt unempfindlich. */
.schritte-liste { counter-reset: sl; list-style: none; padding-left: 2.9rem; }
.schritte-liste li { counter-increment: sl; position: relative; margin-bottom: 0.8rem; }
.schritte-liste li::before {
  content: counter(sl); position: absolute; left: -2.9rem; width: 2rem; text-align: right;
  font-family: 'Fraunces', Georgia, serif; font-weight: 650;
  color: var(--leise); font-variant-numeric: tabular-nums;
}
.anschluss {
  margin-top: clamp(2.5rem, 6vw, 3.8rem); padding: clamp(1.4rem, 3.4vw, 2rem);
  background: var(--flaeche); border-left: 4px solid var(--tinte);
}
.anschluss h2 { margin-top: 0; font-size: clamp(1.2rem, 2.6vw, 1.5rem); }
.anschluss p { margin-bottom: 1.2rem; }

/* Weiterfuehrender Link unter einer Antwort */
.mehr {
  display: inline-block; margin-top: 0.4rem; font-weight: 650; font-size: 0.95em;
  color: var(--tinte); text-decoration: none;
  border-bottom: 2px solid var(--marker); padding-bottom: 1px;
}
.mehr:hover { border-bottom-color: var(--tinte); }
.mehr::after { content: " \2192"; }

/* Ausgang aus den Leistungsblöcken. Bewusst ein Textlink und kein Knopf:
   drei Knöpfe nebeneinander wären lauter als der Abschluss unten. */
.mehr-leistung { margin-top: 0.9rem; font-size: 0.9em; }

/* Die Umkehrung nach der Ausschlussliste. Wer sich in keinem der drei Punkte
   wiedererkennt, ist der beste Interessent der Seite. Bewusst ein Satz und
   kein Knopf, direkt unter einer Absage wirkt ein Knopf aufdringlich. */
/* p.umkehr statt .umkehr: ".filter > .bahn > p" setzt margin: 0 0 1rem und
   ist spezifischer, der Abstand nach oben ging dadurch verloren und der Satz
   klebte an der Trennlinie der Liste darueber. */
.filter > .bahn > p.umkehr {
  margin: clamp(2rem, 5vw, 3rem) 0 0; max-width: 34em;
  font-family: 'Fraunces', Georgia, serif; font-weight: 600;
  font-size: clamp(1.08rem, 2.2vw, 1.35rem); line-height: 1.32; letter-spacing: -0.016em;
}
.umkehr a { color: inherit; text-decoration: none; border-bottom: 2px solid var(--auf-marker); padding-bottom: 1px; }
.umkehr a:hover { opacity: .68; }

/* Ersetzt ein style-Attribut, das das Skript frueher direkt gesetzt hat. */
.dv-link { text-underline-offset: 3px; }

/* Querverweise zwischen den Ratgebern. Wer über eine Suchanfrage auf einer
   Seite landet, fand von dort bisher keinen Weg zu den anderen. */
.weiterlesen { margin-top: clamp(2.5rem, 6vw, 3.5rem); }
.weiterlesen h2 { font-size: clamp(1.1rem, 2.2vw, 1.3rem); margin: 0 0 0.9rem; }
.weiterlesen ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; max-width: 40rem; }
.weiterlesen li { border-top: 1px solid var(--linie); margin: 0; }
.weiterlesen li:last-child { border-bottom: 1px solid var(--linie); }
.weiterlesen a { display: block; padding-block: clamp(0.8rem, 2vw, 1.05rem); text-decoration: none; }
.weiterlesen a:hover b { text-decoration: underline; text-decoration-color: var(--marker); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.weiterlesen b { display: block; font-family: 'Fraunces', Georgia, serif; font-weight: 650; color: var(--tinte); font-size: clamp(1rem, 2vw, 1.14rem); line-height: 1.25; }
.weiterlesen span { display: block; margin-top: 0.15rem; font-size: 0.9em; color: var(--leise); }

/* Was am Ende dasteht. Gegengewicht zur Ausschlussliste: die Seite erklaerte
   an fuenf Stellen, wann man sie nicht braucht, und an keiner das Ergebnis. */
.ergebnisliste { list-style: none; padding: 0; margin: clamp(1.5rem, 4vw, 2.2rem) 0 0; max-width: 44rem; }
.ergebnisliste li { border-top: 1px solid var(--linie); padding-block: clamp(0.9rem, 2.2vw, 1.2rem); display: grid; grid-template-columns: 1.5rem 1fr; gap: 0 0.5rem; }
.ergebnisliste li:last-child { border-bottom: 1px solid var(--linie); }
.ergebnisliste li::before { content: ""; width: 0.62rem; height: 0.62rem; margin-top: 0.5em; background: var(--marker); }
.ergebnisliste b { color: var(--tinte); font-weight: 650; display: block; font-family: 'Fraunces', Georgia, serif; font-size: clamp(1.02rem, 2vw, 1.15rem); }
.ergebnisliste span { font-size: 0.95em; color: var(--leise); }

/* ---------- Umschalter für den Farbmodus ----------
   Standard bleibt die Systemeinstellung. Erst ein Klick setzt data-theme
   auf der Wurzel und legt die Wahl in localStorage ab. Ohne JavaScript ist
   der Knopf nicht sichtbar, dann gilt weiterhin prefers-color-scheme. */
.thema { display: none; }
.js .thema {
  display: inline-flex; align-items: center; gap: 0.45em;
  font: inherit; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600; color: var(--leise); background: none; border: 0; cursor: pointer;
  padding: 0.2em 0; border-bottom: 2px solid transparent;
}
.js .thema:hover { color: var(--tinte); border-bottom-color: var(--marker); }
.thema::before {
  content: ""; width: 0.85em; height: 0.85em; border-radius: 50%;
  border: 2px solid currentColor; flex: none;
  background: linear-gradient(to right, currentColor 0 50%, transparent 50% 100%);
}
/* Der Kreis zeigt, wohin der Klick fuehrt: leer steht fuer hell, voll fuer dunkel */
.thema[data-thema="light"]::before { background: currentColor; }
.thema[data-thema="dark"]::before { background: none; }
@media (max-width: 30rem) { .js .thema .thema-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }

/* ---------- Erhoehter Kontrast ----------
   Manche Systeme melden diesen Wunsch, etwa Windows im Kontrastmodus oder iOS
   mit "Kontrast erhoehen". Bisher hat die Seite das ignoriert. Verstaerkt
   werden die schwachen Toene: gedaempfter Text, Trennlinien, Randfarben. */
@media (prefers-contrast: more) {
  :root { --leise: #4a4854; --linie: #9a96a8; --text: #24232b; }
  :root:not([data-theme="light"]) { }
  .leistung::before, .frage summary { font-weight: 700; }
  .kopfnav a, .zurueck, .mehr { border-bottom-width: 3px; }
  .nicht li::before { opacity: 1; }
  :focus-visible { outline-width: 3px; }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --leise: #d2cede; --linie: #6a6678; --text: #efedf5; }
}
@media (prefers-contrast: more) {
  :root[data-theme="dark"] { --leise: #d2cede; --linie: #6a6678; --text: #efedf5; }
}

.weiterlesen.bahn { margin-bottom: clamp(2.5rem, 7vw, 4rem); }

/* ---------- Wartungsseite anfragen ----------
   Kein echtes Formular: die CSP verbietet mit form-action 'none' jedes
   Absenden, und einen Endpunkt gibt es seit den Spamwellen im August bewusst
   nicht mehr. Der Knopf setzt stattdessen einen mailto-Link zusammen. Damit
   verlaesst kein Datensatz den Rechner, bevor der Absender es selbst tut. */
.notfall { margin-top: clamp(1.6rem, 4vw, 2.4rem); max-width: 40rem; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.notfall summary {
  cursor: pointer; list-style: none; padding-block: clamp(0.9rem, 2.2vw, 1.2rem);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-family: 'Fraunces', Georgia, serif; font-weight: 650; color: var(--tinte);
  font-size: clamp(1.02rem, 2vw, 1.2rem); letter-spacing: -0.014em;
}
.notfall summary::-webkit-details-marker { display: none; }
.notfall summary:hover { color: var(--leise); }
.notfall .zeichenplus { flex: none; width: 1.1em; height: 1.1em; position: relative; }
.notfall .zeichenplus::before, .notfall .zeichenplus::after {
  content: ""; position: absolute; background: var(--tinte); border-radius: 1px;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), opacity .3s ease;
}
.notfall .zeichenplus::before { inset: 48% 0 auto 0; height: 2px; }
.notfall .zeichenplus::after { inset: 0 auto 0 48%; width: 2px; }
.notfall[open] .zeichenplus::after { transform: rotate(90deg); opacity: 0; }
.notfall-innen { padding-bottom: clamp(1.2rem, 3vw, 1.8rem); }
.notfall p {
  font-family: inherit; font-weight: 400; font-size: 0.97rem; line-height: 1.6;
  letter-spacing: 0; color: var(--text); max-width: 34em; text-wrap: initial;
}
.notfall .notfall-hinweis { color: var(--leise); margin: 0 0 1.3rem; }
.feldreihe { display: grid; gap: 0.3rem; margin-bottom: 0.9rem; }
.feldreihe label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--leise); font-weight: 600; }
.feldreihe input, .feldreihe textarea {
  font: inherit; font-size: 0.98rem; color: var(--tinte); background: var(--grund);
  border: 2px solid var(--linie); padding: 0.6em 0.7em; width: 100%; border-radius: 0;
}
.feldreihe input:focus, .feldreihe textarea:focus { border-color: var(--tinte); outline: 2px solid var(--marker); outline-offset: -2px; }
.feldreihe textarea { resize: vertical; min-height: 4.5em; }
/* .ruf bringt einen eigenen margin-top mit, im Flex-Container sitzt der Knopf
   dadurch tiefer als der Link daneben. Hier zuruecksetzen. */
.notfall-knopfe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.4rem; margin: 1.4rem 0 0; }
.notfall-knopfe .ruf { margin-top: 0; }
.notfall .nf-anruf { font-size: 0.92rem; font-family: inherit; font-weight: 500; letter-spacing: 0; color: var(--leise); text-underline-offset: 3px; }
.nf-anruf:hover { color: var(--tinte); }
.notfall .notfall-fuss { font-size: 0.85rem; color: var(--leise); margin: 1rem 0 0; }
#nf-status:empty { display: none; }
.notfall #nf-status { color: var(--tinte); font-weight: 600; }

/* Erzwungene Farben, etwa Windows-Kontrastmodus: Hintergrundbilder werden dort
   verworfen, die Durchstreichung waere weg und die Loesung nur noch an der
   Schriftfarbe erkennbar. Farbe darf nie der einzige Traeger sein. */
@media (forced-colors: active) {
  .zeile.gefunden .inhalt { text-decoration: line-through; text-decoration-thickness: 3px; }
  .zeile.gefunden .berichtigung { forced-color-adjust: none; }
  .mark::before, .ergebnisliste li::before { forced-color-adjust: none; }
}

/* V1: Der gelbe Marker der Ergebnisliste kam auf Weiss nur auf 1,27:1 und
   wirkte wie eine leere Spalte. */
.ergebnisliste li::before { background: var(--tinte); }

/* V3: Statt einzelner Ausnahmen alles stilllegen, was sich bewegt. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}

/* V5: Die Mailadresse hat keine Umbruchstelle und wurde bei 320px abgeschnitten. */
.weg .wert { overflow-wrap: anywhere; }

.gefunden-hinweis { color: var(--tinte); font-weight: 650; margin-bottom: 0.5rem; }

/* Ohne JavaScript findet keine Messung statt, dann darf der Abschnitt sie auch
   nicht behaupten. Er verschwindet dann ganz, statt Striche zu zeigen. */
.nurjs { display: none; }
.js .nurjs { display: block; }

/* Sprunglink: erst beim Tabben sichtbar, davor aus dem Fluss genommen. */
.sprung {
  position: absolute; left: 0.5rem; top: -4rem; z-index: 10;
  background: var(--tinte); color: var(--grund); padding: 0.6em 1em;
  font-weight: 650; text-decoration: none; transition: top .18s ease;
}
.sprung:focus { top: 0.5rem; }