/* Landingpage – Erscheinungsbild Orgalotse (docs/04-platform/gestaltung.md, Entscheidung Jürgen 09.11.2026). Flächen
   überwiegend weiß, Schwarz nur zum Hervorheben (Sicherheit, Fuß, Filmleiste). Hellblau für Linien und Akzente, als
   Schrift nur auf Schwarz. Grün als Fläche, Linie oder Akzent – nie als Schrift, Schrift auf Grün immer Tinte. Rot nur
   als Signal für Notfälle und Fehler. League Spartan (Überschriften) und Inter (Text), selbst ausgeliefert (schriften/),
   keine fremden Quellen. Linien statt Schatten, eckige Knöpfe, Raster mit 12 Spalten. Kontrast ≥ 4,5:1 prüfen
   tests/test_webseite.py und tests/test_gestaltung.py. Grau (#717976) erreicht auf Weiß nur 4,47:1: nur für Ränder, nie
   für Text. Icons: Lucide (ISC, LICENSE-lucide.txt) direkt als SVG, Farbe über currentColor. */
@font-face { font-family: "League Spartan"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("schriften/league-spartan-600.woff2") format("woff2"); }
@font-face { font-family: "League Spartan"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("schriften/league-spartan-700.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("schriften/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("schriften/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("schriften/inter-600.woff2") format("woff2"); }

:root {
  --tinte: #000000;           /* Text, schwarze Akzentflächen (Sicherheit, Fuß, Filmleiste) */
  --schiefer: #1E2321;        /* leiser Text, Fließtext */
  --grau: #717976;            /* nur Ränder der Eingabefelder (≥ 3:1), nie Text */
  --linie: #B5BDB9;           /* Trennlinien 2 px */
  --leise-auf-tinte: #D9DEDC; /* leiser Text auf Schwarz */
  --hell: #E9FAFE;            /* Hellblau-Fläche: helle Abschnitte */
  --weiss: #FFFFFF;           /* Grundfläche */
  --blau: #88E6FA;            /* Hellblau: Linien, Akzente, Icons auf Schwarz – nie als Schrift auf Weiß */
  --signal: #39DC48;          /* nur Fläche, Linie, Akzent – Schrift darauf immer Tinte */
  --signal-dunkel: #2CC23B;   /* grüner Knopf beim Darüberfahren */
  --signal-hell: #E3FAE5;     /* Kreis um das Icon „Selbst senden“ */
  --notfall: #DB0707;         /* nur Notfälle und Fehler */
  --notfall-flaeche: #FCEDEB; /* so hell, dass rote Schrift darauf 4,5:1 erreicht */
  --breite: 75rem;
  --titel: "League Spartan", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --schrift: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; font-family: var(--schrift); font-size: 1.0625rem; line-height: 1.65;
  color: var(--schiefer); background: var(--weiss);
}
strong, b { font-weight: 600; color: var(--tinte); }
a { color: var(--tinte); text-decoration-color: var(--tinte); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; text-decoration-color: var(--signal-dunkel); }
:focus-visible { outline: 3px solid var(--tinte); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--titel); color: var(--tinte); line-height: 1.1; margin: 0; }
h2 { font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); font-weight: 700; }
h3 { font-size: 1.35rem; font-weight: 600; }
p { margin: 0; }
.innen { max-width: var(--breite); margin: 0 auto; padding: 0 1.25rem; }
.sprung {
  position: absolute; left: .75rem; top: -4rem; z-index: 10; padding: .6rem 1.1rem;
  background: var(--signal); color: var(--tinte); font-weight: 600; border: 2px solid var(--tinte);
}
.sprung:focus { top: .75rem; }

/* Raster mit 12 Spalten: schmal alles untereinander, breit nach Bereich */
.raster-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem 1.5rem; }
.raster-12 > * { grid-column: 1 / -1; }

/* ---------- Schwarze Akzentflächen: weiße Schrift, Fokus und Akzent in Hellblau ---------- */
.abschnitt-dunkel, .fuss { background: var(--tinte); color: var(--weiss); }
.abschnitt-dunkel a { color: var(--weiss); text-decoration-color: var(--blau); }
.fuss a { color: var(--weiss); text-decoration-color: var(--signal-dunkel); }
.abschnitt-dunkel :focus-visible, .fuss :focus-visible { outline-color: var(--blau); }
.abschnitt-dunkel h2 { color: var(--weiss); }
.abschnitt-dunkel h3 { color: var(--blau); }

/* ---------- Bildmarke: Kreis mit 2-px-Linie, grüner Punkt ---------- */
.bildmarke {
  position: relative; display: inline-block; flex: none; width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid currentColor;
}
.bildmarke::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: var(--signal);
}
.bildmarke-klein { width: 24px; height: 24px; }
.bildmarke-klein::after { width: 8px; height: 8px; margin: -4px 0 0 -4px; }
.fuss .bildmarke, .film-leiste .bildmarke { border-color: var(--blau); }

/* ---------- Icons (Lucide, direkt als SVG) ---------- */
.icon { width: 1.75rem; height: 1.75rem; flex: none; }
.icon-kreis {
  display: inline-grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%;
  background: var(--hell); border: 2px solid var(--tinte); color: var(--tinte);
}
.schritte li:nth-child(3) .icon-kreis { background: var(--signal-hell); }
h3.mit-icon { display: flex; align-items: center; gap: .6rem; }

/* ---------- Kopf ---------- */
.kopf { background: var(--weiss); color: var(--tinte); border-bottom: 2px solid var(--linie); }
.kopf .innen {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 2rem;
  padding-top: .9rem; padding-bottom: .9rem;
}
.marke {
  display: inline-flex; align-items: center; gap: .65rem; min-height: 44px;
  font: 700 1.45rem/1 var(--titel); text-decoration: none; color: var(--tinte);
}
.kopf .marke, .fuss .marke { text-decoration: none; }
.marke .name { padding-top: .15em; }
.kopf nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.kopf nav a:not(.knopf) {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem;
  text-decoration: none; font-size: .95rem; font-weight: 500; border-bottom: 2px solid transparent;
}
.kopf nav a:not(.knopf):hover { border-bottom-color: var(--signal); }
.kopf nav .knopf { margin-left: .75rem; }
@media (max-width: 47.99rem) {
  /* Schmal: alle Bereiche bleiben erreichbar, die Navigation bricht unter die Marke um */
  .kopf nav { width: 100%; }
  .kopf nav a:not(.knopf) { padding: 0 .55rem; font-size: .9rem; }
  .kopf nav li:first-child a:not(.knopf) { padding-left: 0; }
  .kopf nav .knopf { margin-left: auto; }
}

/* ---------- Knöpfe: eckig, Grün mit Tinte ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 1.6rem;
  border-radius: 2px; border: 2px solid transparent; font: 600 1.05rem/1.2 var(--schrift); text-decoration: none;
  cursor: pointer;
}
.knopf-klein { min-height: 44px; padding: 0 1.1rem; font-size: .95rem; }
.knopf-signal, a.knopf-signal { background: var(--signal); color: var(--tinte); border-color: var(--tinte); }
.knopf-signal:hover, a.knopf-signal:hover { background: var(--signal-dunkel); border-color: var(--signal-dunkel); color: var(--tinte); }

/* ---------- Bühne (oben, hell mit Verlauf ins Hellblau) ---------- */
.buehne {
  padding: 3rem 0 3.5rem; color: var(--tinte);
  background: linear-gradient(180deg, var(--weiss) 0%, var(--weiss) 70%, var(--hell) 100%);
}
.buehne a { text-decoration-color: var(--signal-dunkel); }
.dachzeile {
  display: inline-block; padding-left: .8rem; border-left: 4px solid var(--blau);
  color: var(--schiefer); font-size: .95rem; font-weight: 500;
}
.buehne h1 {
  font-weight: 700; font-size: clamp(2.6rem, 1.5rem + 4.6vw, 4.75rem); line-height: 1.02; letter-spacing: -.01em;
  margin-top: 1.25rem;
}
.buehne h1 .betont {
  text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 4px;
  text-underline-offset: .12em;
}
.buehne-text { font-size: 1.15rem; color: var(--schiefer); }
.buehne-links { display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; align-items: center; margin-top: 1.75rem; }
.buehne-bild { margin: 2rem 0 0; }
.buehne-bild svg { width: 100%; height: auto; max-width: 32rem; display: block; }
.weiter {
  display: inline-flex; align-items: center; gap: .7rem; min-height: 44px; font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em;
}
.weiter:hover { text-decoration-thickness: 4px; }
.pfeil { position: relative; display: inline-block; width: 1.1rem; height: 2px; background: currentColor; }
.pfeil::after {
  content: ""; position: absolute; right: 0; top: -4px; width: 8px; height: 8px;
  border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg);
}
.film-link {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; font-weight: 500; text-decoration: none;
}
.film-link:hover { text-decoration: underline; }
.abspielen { position: relative; width: 32px; height: 32px; border: 2px solid var(--tinte); border-radius: 50%; }
.abspielen::after {
  content: ""; position: absolute; left: 10px; top: 7px; border-style: solid; border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent var(--tinte);
}
.film-link:hover .abspielen { background: var(--blau); }
@media (min-width: 60rem) {
  .buehne { padding: 5rem 0 5.5rem; }
  .buehne .raster-12 { align-items: center; row-gap: 1.5rem; }
  .buehne-claim { grid-column: 1 / span 6; grid-row: 1; }
  .buehne-text { grid-column: 1 / span 6; grid-row: 2; }
  .buehne-bild { grid-column: 8 / span 5; grid-row: 1 / span 2; margin: 0; }
  .buehne h1 { font-size: clamp(2.6rem, 4.6vw, 4.2rem); }
}

/* ---------- Abschnitte ---------- */
.abschnitt { padding: 4.5rem 0; }
.abschnitt-weiss { background: var(--weiss); border-top: 2px solid var(--linie); border-bottom: 2px solid var(--linie); }
.abschnitt-dunkel .kopfzeile p { color: var(--leise-auf-tinte); }
.kopfzeile { max-width: 46rem; margin-bottom: 2.5rem; }
.kopfzeile h2 { padding-top: 1rem; border-top: 4px solid var(--signal); display: inline-block; }
#ablauf .kopfzeile h2, #sicherheit .kopfzeile h2, #fragen .kopfzeile h2 { border-top-color: var(--blau); }
.kopfzeile p { margin-top: 1rem; font-size: 1.1rem; }
.klein-titel { font-size: 1.6rem; }

/* Sortierte Post (eigene Darstellung, keine Fotos): Liste mit 4-px-Strich links – Grün = Entwurf, Rot = Notfall */
.abschnitt-post { padding: 3.5rem 0; background: var(--hell); border-top: 2px solid var(--blau); }
.post-text p { margin-top: .75rem; }
.legende { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; font-size: .95rem; }
.legende li { display: flex; align-items: center; gap: .7rem; }
.strich { display: inline-block; width: 4px; height: 1.4rem; background: var(--signal); }
.strich-notfall { background: var(--notfall); }
.post { list-style: none; margin: 0; padding: 0; background: var(--weiss); border: 2px solid var(--tinte); }
.post-zeile {
  display: grid; gap: .15rem; padding: 1rem 1.25rem; border-left: 4px solid var(--signal);
}
.post-zeile + .post-zeile { border-top: 2px solid var(--linie); }
.post-notfall { border-left-color: var(--notfall); background: var(--notfall-flaeche); }
.post-zeile .kategorien { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .35rem; }
.kategorie {
  display: inline-flex; align-items: center; padding: .05rem .55rem; border: 2px solid var(--linie);
  font-size: .8rem; font-weight: 600; color: var(--tinte); background: var(--weiss);
}
.kategorie-dringend { background: var(--notfall); border-color: var(--notfall); color: var(--weiss); letter-spacing: .04em; }
.post-zeile .anliegen { font-weight: 600; color: var(--tinte); }
.post-zeile .haus { font-size: .95rem; }
.post-zeile .stand { font-size: .9rem; font-weight: 600; color: var(--tinte); }
.post-notfall .stand { color: var(--notfall); }
@media (min-width: 60rem) {
  .post-text { grid-column: 1 / span 4; }
  .post { grid-column: 6 / span 7; }
}

/* Film */
.film-rahmen { margin: 0; background: var(--weiss); border: 2px solid var(--linie); }
.film-leiste {
  display: flex; align-items: center; gap: .6rem; padding: .8rem 1.2rem; font: 600 1.15rem/1.2 var(--titel);
  background: var(--tinte); color: var(--weiss); border-bottom: 2px solid var(--linie);
}
.film-rahmen video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--tinte); }
.film-rahmen figcaption { padding: 1rem 1.2rem 1.2rem; font-size: .95rem; border-top: 2px solid var(--linie); }
.film-rahmen details { margin-top: .6rem; }
.film-rahmen summary {
  cursor: pointer; color: var(--tinte); font-weight: 600; min-height: 44px; display: flex; align-items: center;
  text-decoration: underline; text-underline-offset: .2em;
}
.sprechertext { margin-top: .5rem; display: grid; gap: .6rem; }
@media (max-width: 37.49rem) {
  #film .innen { padding: 0; }
  .film-rahmen { border-left: 0; border-right: 0; }
}

/* Ablauf: drei nummerierte Schritte mit Trennlinien */
.schritte { list-style: none; margin: 0; padding: 0; display: grid; border-top: 2px solid var(--linie); }
.schritte li { padding: 1.75rem 0; display: grid; gap: .6rem; align-content: start; }
.schritte li + li { border-top: 2px solid var(--linie); }
.nummer {
  font: 700 2.75rem/1 var(--titel); color: var(--tinte); padding-bottom: .5rem; justify-self: start;
  border-bottom: 4px solid var(--blau);
}
@media (min-width: 48rem) {
  .schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .schritte li { padding: 2rem 1.75rem 2rem 0; }
  .schritte li + li { border-top: 0; border-left: 2px solid var(--linie); padding-left: 1.75rem; }
}
.notfall-hinweis {
  margin-top: 2.5rem; padding: 1.25rem 1.5rem; display: grid; gap: .4rem;
  border: 2px solid var(--linie); border-left: 4px solid var(--notfall); background: var(--notfall-flaeche);
}
.notfall-hinweis h3 { color: var(--notfall); }

/* Sicherheit und Datenschutz: schwarze Fläche, vier Blöcke mit blauer Akzentlinie (ab Tablet 2 × 2) */
.vertrauen {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 2.25rem 2.5rem;
}
@media (min-width: 48rem) {
  .vertrauen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.vertrauen > li { display: grid; gap: .75rem; align-content: start; padding-top: 1.25rem; border-top: 4px solid var(--blau); }
.punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; color: var(--leise-auf-tinte); }
.punkte li { position: relative; padding-left: 1.2rem; }
.punkte li::before {
  content: ""; position: absolute; left: 0; top: .7em; width: .55rem; height: 2px; background: var(--blau);
}
.sicherheit-fuss { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 2px solid var(--blau); color: var(--leise-auf-tinte); }
.sicherheit-fuss a:first-child { font-weight: 600; }

/* Häufige Fragen: Linien statt Karten */
.fragen { border-top: 2px solid var(--linie); }
.fragen details { border-bottom: 2px solid var(--linie); }
.fragen summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 60px; padding: .9rem 0; font-weight: 600; color: var(--tinte); font-size: 1.1rem;
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after {
  content: "+"; flex: none; display: grid; place-items: center; width: 2rem; height: 2rem;
  border: 2px solid var(--tinte); color: var(--tinte); font-size: 1.25rem; font-weight: 600; line-height: 1;
}
.fragen details[open] summary::after { content: "–"; background: var(--tinte); border-color: var(--tinte); color: var(--weiss); }
.fragen details > :not(summary) { margin: 0 3rem 1rem 0; }
.fragen details > :last-child { margin-bottom: 1.4rem; }
.fragen .preise { list-style: none; padding: 0; display: grid; gap: .5rem; }
.fragen .preise li { position: relative; padding-left: 1.4rem; }
.fragen .preise li::before {
  content: ""; position: absolute; left: 0; top: .55rem; width: .55rem; height: .55rem; background: var(--signal);
}
@media (min-width: 60rem) {
  .fragen-kopf { grid-column: 1 / span 4; }
  .fragen { grid-column: 6 / span 7; }
}

/* ---------- Formular ---------- */
.pilot-kopf p + p { margin-top: 1rem; }
.formular { background: var(--weiss); border: 2px solid var(--linie); padding: 1.5rem; display: grid; gap: 1.2rem; }
.formular .zwei { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.feld { display: grid; gap: .35rem; }
.feld label { font-weight: 600; color: var(--tinte); }
.feld .hilfe { font-size: .9rem; }
.feld input, .feld textarea {
  width: 100%; min-height: 48px; padding: .65rem .9rem; border: 1px solid var(--grau); border-radius: 2px;
  font: 400 1rem/1.5 var(--schrift); color: var(--tinte); background: var(--weiss);
}
.feld textarea { min-height: 9rem; resize: vertical; }
.feld input:focus-visible, .feld textarea:focus-visible { outline: 3px solid var(--tinte); outline-offset: 1px; border-color: var(--tinte); }
.feld input:user-invalid, .feld textarea:user-invalid { border-color: var(--notfall); border-width: 2px; }
.pflicht { color: var(--notfall); }
.zustimmung { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; font-size: .95rem; }
.zustimmung input { width: 1.4rem; height: 1.4rem; margin: .15rem 0 0; accent-color: var(--tinte); }
/* Spam-Schutz: Feld nur für Programme, für Menschen unsichtbar und nicht per Tab erreichbar */
.honig { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.formular .knopf { justify-self: start; }
.formular .klein { font-size: .9rem; }
@media (min-width: 60rem) {
  .pilot-kopf { grid-column: 1 / span 4; }
  .formular { grid-column: 6 / span 7; padding: 2rem; }
}

/* ---------- Rechtstexte und Rückmeldeseiten ---------- */
.text-seite { padding: 3rem 0 4.5rem; }
.text-seite .innen { max-width: 52rem; }
.text-seite .blatt { background: var(--weiss); border: 2px solid var(--linie); border-top: 4px solid var(--blau); padding: 2rem 1.5rem; }
.text-seite h1 { font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem); font-weight: 700; margin-bottom: 1.5rem; overflow-wrap: break-word; }
.text-seite h2 { font-size: 1.5rem; font-weight: 600; margin: 2.2rem 0 .7rem; }
.text-seite p, .text-seite ul, .text-seite address { margin: 0 0 .9rem; }
.text-seite address { font-style: normal; }
.text-seite ul { padding-left: 1.3rem; }
.text-seite .stand { margin-top: 2rem; }
.text-seite .knopf { margin-top: 1rem; }

/* ---------- Fußzeile (schwarz, blaue Linie) ---------- */
.fuss { font-size: .95rem; border-top: 4px solid var(--blau); }
.fuss .innen {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 2rem;
  padding-top: 1.8rem; padding-bottom: 1.8rem;
}
.marke-fuss { font-size: 1.15rem; }
.fuss .claim-fuss { font: 600 1.1rem/1.3 var(--titel); }
.fuss ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.fuss a:not(.marke) { display: inline-flex; align-items: center; min-height: 44px; }
.fuss p { color: var(--leise-auf-tinte); }
.fuss .claim-fuss, .fuss .herkunft { color: var(--weiss); }

@media (min-width: 48rem) {
  .formular { padding: 2rem; }
  .text-seite .blatt { padding: 3rem; }
}