/* Förderverein der Ortsfeuerwehr Lehrte · v2
 * Farben: Lackierung der Lehrter Einsatzfahrzeuge (Feuerrot, Weiß, Gelb der Beschriftung)
 * Schrift: Schibsted Grotesk (selbst gehostet)
 * Gilt für Startseite, Impressum, Datenschutz, Satzung, Danke.
 */
@font-face { font-family: "Schibsted Grotesk"; src: url(fonts/SchibstedGrotesk-400-900.woff2) format("woff2"); font-weight: 400 900; font-display: swap; }

:root {
  --rot: #ab2a1f;
  --rot-dunkel: #7c1d15;
  --rot-tief: #4e130e;
  --rot-hell: #fbeeec;
  --auf-rot: #fbe9e6;
  --gelb: #f4c419;
  --gelb-dunkel: #dcae08;
  --weiss: #ffffff;
  --grund: #f3f2ef;
  --linie: #dddad4;
  --rand-feld: #7a746b;
  --text: #1f1d1b;
  --text-2: #57534d;
  --platzhalter: #6b665e;
  --fokus: #1f6fb2;
  --schrift: "Schibsted Grotesk", "Segoe UI", Arial, sans-serif;
  --breite: 1200px;
  --rand: clamp(16px, 4vw, 40px);
  --kopf-hoehe: 72px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-hoehe) + 8px); }
html, body { overflow-x: clip; }
body { font: 400 1.0625rem/1.6 var(--schrift); color: var(--text); background: var(--weiss); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
source { display: none; }
a { color: inherit; }
::selection { background: var(--gelb); color: var(--text); }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
h1, h2, h3, h4 { font-weight: 800; line-height: 1.08; letter-spacing: -0.015em; text-wrap: balance; overflow-wrap: anywhere; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.25rem; line-height: 1.2; }
.container, .wrap { max-width: var(--breite); margin: 0 auto; padding-inline: var(--rand); }
.container-narrow { max-width: 760px; margin: 0 auto; padding-inline: var(--rand); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -100px; background: var(--gelb); color: var(--text); padding: 10px 16px; border-radius: 4px; z-index: 100; font-weight: 700; }
.skip-link:focus { top: 8px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; font: 700 1rem/1 var(--schrift); padding: 15px 24px; border-radius: 6px; text-decoration: none; white-space: nowrap; border: 0; cursor: pointer; transition: background .15s, color .15s; }
.btn:active { transform: translateY(1px); }
.btn-gelb, .btn-glow { background: var(--gelb); color: var(--text); }
.btn-gelb:hover, .btn-glow:hover { background: var(--gelb-dunkel); }
.btn-rot { background: var(--rot); color: var(--weiss); }
.btn-rot:hover { background: var(--rot-dunkel); }
.btn-rand { color: var(--rot); box-shadow: inset 0 0 0 2px var(--rot); background: transparent; }
.btn-rand:hover { background: var(--rot); color: var(--weiss); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn, .nav-toggle span, .sticky-cta { transition: none; } }

/* Kopf (Startseite und Unterseiten) */
.nav { background: var(--rot); color: var(--weiss); position: sticky; top: 0; z-index: 50; }
.nav-inner { max-width: var(--breite); margin: 0 auto; padding-inline: var(--rand); height: var(--kopf-hoehe); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav-logo-img { height: 40px; width: auto; filter: brightness(0) invert(1); }
.nav-links { display: flex; align-items: center; gap: 28px; font-weight: 600; }
.nav-links a { text-decoration: none; white-space: nowrap; }
.nav-links a:not(.nav-cta):hover, .nav-links a[aria-current] { text-decoration: underline; text-decoration-color: var(--gelb); text-underline-offset: 6px; text-decoration-thickness: 2px; }
.nav-cta { background: var(--gelb); color: var(--text); padding: 11px 18px; border-radius: 6px; font-weight: 700; }
.nav-cta:hover { background: var(--gelb-dunkel); }
.nav-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; position: relative; cursor: pointer; }
.nav-toggle span { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--weiss); transition: transform .2s, opacity .2s; }
.nav-toggle span:nth-child(1) { top: 15px; } .nav-toggle span:nth-child(2) { top: 21px; } .nav-toggle span:nth-child(3) { top: 27px; }
.nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Bühne */
.buehne { position: relative; background: var(--rot); }
.buehne-bild { width: 100%; height: min(78vh, 640px); object-fit: cover; object-position: 50% 35%; }
.buehne-feld { position: absolute; left: max(var(--rand), calc((100vw - var(--breite)) / 2 + var(--rand))); bottom: 48px; max-width: 580px; background: var(--rot); color: var(--weiss); padding: 32px 36px 36px; border-radius: 4px; }
.buehne h1 { font-size: clamp(2rem, 4.2vw, 3.25rem); }
.buehne-feld p { margin: 14px 0 24px; font-size: 1.125rem; color: var(--auf-rot); }
.knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.knoepfe a:not(.btn) { font-weight: 600; color: var(--weiss); text-underline-offset: 5px; white-space: nowrap; }
.foto-hinweis { position: absolute; right: var(--rand); bottom: 12px; font-size: .8125rem; color: var(--weiss); background: rgb(0 0 0 / .5); padding: 3px 8px; border-radius: 3px; }

/* Leiste */
.leiste { background: var(--rot-tief); color: var(--auf-rot); }
.leiste ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 40px; padding-block: 16px; font-weight: 600; }
.leiste b { color: var(--gelb); font-weight: 800; }

/* Abschnitte */
.abschnitt { padding-block: 88px; }
.grau { background: var(--grund); }
.einl { color: var(--text-2); font-size: 1.125rem; max-width: 60ch; margin-top: 12px; }

/* Warum */
.warum { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.warum img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; }
.gruende { list-style: none; margin-top: 24px; display: grid; gap: 16px; }
.gruende li { padding-left: 20px; border-left: 3px solid var(--rot); }
.gruende b { display: block; font-size: 1.125rem; }
.gruende span { color: var(--text-2); }

/* Projekte */
.projekte { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px; margin-top: 40px; }
.projekt { grid-column: span 4; }
.projekt.gross { grid-column: span 8; grid-row: span 2; }
.projekt img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; background: var(--grund); }
.projekt.gross img { aspect-ratio: 4 / 3; }
.projekt-grafik { aspect-ratio: 3 / 2; border-radius: 4px; background: var(--rot-hell); color: var(--rot); display: grid; place-items: center; }
.projekt-grafik svg { width: 34%; height: auto; }
.projekt h3 { margin-top: 14px; }
.projekt p { color: var(--text-2); margin-top: 6px; }
.projekt .standard { display: inline-block; margin-top: 8px; font-size: .875rem; font-weight: 700; color: var(--rot); }
.weitere { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--linie); color: var(--text-2); }
.weitere b { color: var(--text); }

/* Mitmachen */
.stufen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 40px; }
.stufe { background: var(--weiss); border: 1px solid var(--linie); border-top: 6px solid var(--rot); border-radius: 4px; padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.preis { font-size: 2.75rem; font-weight: 900; line-height: 1; color: var(--rot); font-variant-numeric: tabular-nums; }
.preis small { font-size: 1rem; font-weight: 600; color: var(--text-2); }
.stufe ul { padding-left: 1.1em; color: var(--text-2); display: grid; gap: 4px; }
.stufe ul li::marker { color: var(--rot); }
.stufe .btn { align-self: flex-start; margin-top: auto; }
.einmal { margin-top: 24px; color: var(--text-2); }
.einmal b { color: var(--text); }

/* Gemeinschaft */
.gemeinschaft { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; }
.gemeinschaft img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; }
.gemeinschaft p { color: var(--text-2); margin-top: 14px; }
.termine { list-style: none; margin-top: 20px; border-top: 1px solid var(--linie); }
.termine li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--linie); font-weight: 600; }
.termine span { color: var(--text-2); font-weight: 400; text-align: right; }

/* Fragen */
.fragen { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen details:first-child { border-top: 1px solid var(--linie); }
.fragen summary { cursor: pointer; padding: 18px 0; font-weight: 700; font-size: 1.125rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; color: var(--rot); font-weight: 800; font-size: 1.5rem; line-height: 1; }
.fragen details[open] summary::after { content: "−"; }
.fragen details p { color: var(--text-2); padding-bottom: 18px; max-width: 62ch; }

/* Beitritt */
.beitritt { background: var(--rot); color: var(--weiss); }
.beitritt-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; padding-block: 88px; }
.beitritt .einl { color: var(--auf-rot); max-width: 40ch; }
.ziel { margin-top: 28px; font-weight: 600; color: var(--auf-rot); }
.ziel small { font-size: .8125rem; font-weight: 400; }
.ziel b { color: var(--gelb); font-weight: 800; font-size: 1.25rem; } /* ab 18,66px fett gilt 3:1, Gelb auf Rot hat 4,1:1 */
.kontaktdaten { margin-top: 20px; font-size: .9375rem; color: var(--auf-rot); }
.kontaktdaten b { color: var(--weiss); }
.join-form-wrap { background: var(--weiss); color: var(--text); border-radius: 4px; padding: 32px; }
.join-form { display: grid; gap: 16px; }
.wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border: 0; }
.wahl legend { font-weight: 700; margin-bottom: 8px; }
.wahl label { border: 2px solid var(--linie); border-radius: 4px; padding: 12px 14px; cursor: pointer; font-weight: 600; }
.wahl label:has(input:checked) { border-color: var(--rot); background: var(--rot-hell); }
.wahl input { accent-color: var(--rot); margin-right: 6px; }
.reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.f-group { display: grid; gap: 6px; }
.f-group[hidden] { display: none; }
.f-group label { font-weight: 600; font-size: .9375rem; }
.f-group input, .f-group select { font: 400 1rem var(--schrift); color: var(--text); padding: 12px 14px; border: 1.5px solid var(--rand-feld); border-radius: 4px; background: var(--weiss); width: 100%; }
.f-group input::placeholder { color: var(--platzhalter); }
.f-group input:focus, .f-group select:focus { outline: 3px solid var(--fokus); outline-offset: 0; border-color: var(--fokus); }
.check-label { display: flex; gap: 10px; align-items: flex-start; font-size: .9375rem; color: var(--text-2); }
.check-label input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--rot); flex: none; }
.check-label a { color: var(--rot); font-weight: 600; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error { color: var(--rot-dunkel); background: var(--rot-hell); padding: 12px 14px; border-radius: 4px; font-weight: 600; }
.join-form .btn { justify-self: start; }
.form-success { display: grid; gap: 10px; padding: 24px 0; }
.form-success[hidden] { display: none; }
.form-success h3 { font-size: 1.75rem; color: var(--rot); }
.form-success p { color: var(--text-2); }

/* Vorstand */
.team-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.member img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; background: var(--grund); }
.member h3 { font-size: 1.0625rem; margin-top: 12px; }
.member p { color: var(--text-2); font-size: .9375rem; }

/* Fuß */
.foot { background: var(--rot-tief); color: var(--auf-rot); font-size: .9375rem; }
.foot-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: 40px; padding-block: 56px 32px; }
.foot-logo { height: 48px; width: auto; filter: brightness(0) invert(1); }
.foot-brand p { margin-top: 14px; max-width: 34ch; }
.foot h2 { font-size: 1rem; letter-spacing: 0; color: var(--weiss); margin-bottom: 10px; }
.foot address { font-style: normal; }
.foot a { color: var(--weiss); text-underline-offset: 3px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot-copy { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid rgb(255 255 255 / .18); font-size: .875rem; }

/* Unterseiten */
.subpage { padding-block: 56px 88px; }
.subpage-header { margin-bottom: 32px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--rot); font-weight: 600; text-decoration: none; margin-bottom: 16px; }
.back-link:hover { text-decoration: underline; }
.subpage-header h1 { font-size: clamp(2rem, 5vw, 3rem); }
.subpage-subtitle { color: var(--text-2); margin-top: 8px; }
.legal-content h2 { font-size: 1.375rem; margin: 32px 0 8px; }
.legal-content h3 { font-size: 1.125rem; margin: 24px 0 6px; }
.legal-content p, .legal-content li { color: var(--text-2); }
.legal-content p + p { margin-top: 10px; }
.legal-content ul, .legal-content ol { padding-left: 1.3em; margin: 8px 0; display: grid; gap: 4px; }
.legal-content a { color: var(--rot); }

/* Danke */
.danke-page { min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: var(--rot); }
.danke-card { background: var(--weiss); border-radius: 4px; padding: 48px 40px; max-width: 520px; display: grid; gap: 16px; justify-items: start; }
.danke-icon { color: var(--rot); font-size: 2.5rem; line-height: 1; }
.danke-card h1 { font-size: 2.25rem; }
.danke-card p { color: var(--text-2); }

@media (max-width: 960px) {
  .nav-toggle { display: block; }
  .nav-links { display: none; position: absolute; top: var(--kopf-hoehe); left: 0; right: 0; background: var(--rot); flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--rand) 20px; border-top: 1px solid rgb(255 255 255 / .2); }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 0; }
  .nav-links .nav-cta { margin-top: 8px; text-align: center; padding: 14px; }
  .team-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 900px) {
  .buehne-bild { height: 38vh; }
  .buehne-feld { position: static; max-width: none; border-radius: 0; padding: 28px var(--rand) 32px; }
  .foto-hinweis { bottom: auto; top: 12px; }
  .projekt, .projekt.gross { grid-column: span 12; grid-row: auto; }
  .warum, .stufen, .gemeinschaft, .fragen, .beitritt-inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .abschnitt { padding-block: 64px; }
  .beitritt-inner { padding-block: 64px; }
}
@media (max-width: 520px) {
  .reihe, .wahl { grid-template-columns: 1fr; }
  .join-form-wrap { padding: 22px; }
  .nav-logo-img { height: 34px; }
  .team-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .member:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 12px); }
  .termine li { flex-direction: column; gap: 0; }
  .termine span { text-align: left; }
}

/* Mindestbeitrag & Betragswahl */
.mehr { margin-top: -6px; font-size: .9375rem; font-weight: 600; color: var(--text-2); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: 600 1rem var(--schrift); color: var(--text); background: var(--weiss); border: 2px solid var(--linie); border-radius: 4px; padding: 8px 16px; cursor: pointer; }
.chip[aria-pressed="true"] { border-color: var(--rot); background: var(--rot-hell); }
.chip:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.hinweis { font-size: .875rem; color: var(--text-2); }
.check-label[hidden] { display: none; }

/* Fokus auf Rot: Blau hätte nur 1,3:1, Gelb/Weiß sind gut sichtbar */
.nav :focus-visible, .buehne-feld :focus-visible, .leiste :focus-visible, .beitritt-inner > div:first-child :focus-visible, .foot :focus-visible { outline-color: var(--gelb); }

/* Ziel-Balken */
.balken { margin-top: 10px; height: 8px; max-width: 320px; background: rgb(255 255 255 / .22); border-radius: 4px; overflow: hidden; }
.balken span { display: block; height: 100%; background: var(--gelb); }
.kontaktdaten a { color: var(--weiss); }

/* Optionale Angaben */
.optional summary { cursor: pointer; font-weight: 600; font-size: .9375rem; color: var(--text-2); }
.optional[open] summary { margin-bottom: 12px; }
.form-error:focus, .form-success h3:focus { outline: none; }

/* Sticky-Button mobil */
.sticky-cta { display: none; }
@media (max-width: 900px) {
  .sticky-cta { display: block; position: fixed; left: var(--rand); right: var(--rand); bottom: 12px; z-index: 40; text-align: center; box-shadow: 0 4px 16px rgb(0 0 0 / .25); transform: translateY(150%); transition: transform .2s; }
  .sticky-cta.zeigen { transform: none; }
}

/* Mithelfen */
.mithelfen { margin-top: 16px; }
.mithelfen a { color: var(--rot); font-weight: 600; }

/* Bildzitat */
.bildzitat { position: relative; margin: 0; height: min(70vh, 640px); overflow: hidden; background: var(--rot-tief); }
.bildzitat img { width: 100%; height: 100%; object-fit: cover; object-position: 45% 50%; }
.bildzitat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .75), rgb(0 0 0 / .2) 60%); }
.bildzitat blockquote { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: var(--breite); padding: 0 var(--rand) 56px; }
.bildzitat p { margin-left: auto; text-align: right; color: var(--weiss); font-weight: 800; font-size: clamp(1.625rem, 4vw, 3rem); line-height: 1.12; letter-spacing: -0.015em; max-width: 22ch; text-wrap: balance; }
@media (max-width: 900px) { .bildzitat { height: 60vh; } .bildzitat blockquote { padding-bottom: 32px; } }