/* ------------------------------------------------------------------ *
 * Neckarfront Stuttgart - Stylesheet
 * Farben in Anlehnung an den VfB: Weiß, Brustring-Rot, dunkles Anthrazit.
 * ------------------------------------------------------------------ */

:root {
  --rot: #e32219;
  --rot-dunkel: #b81a13;
  --rot-hell: #fdecea;
  --tinte: #16181d;
  --tinte-weich: #4a5059;
  --linie: #e3e6ea;
  --flaeche: #ffffff;
  --flaeche-grau: #f5f6f8;
  --gruen: #1a7f47;
  --gruen-hell: #e8f5ed;
  --gelb: #8a6100;
  --gelb-hell: #fff6e0;
  --radius: 12px;
  --radius-klein: 8px;
  --schatten: 0 1px 2px rgba(20, 22, 28, .06), 0 8px 24px rgba(20, 22, 28, .06);
  --breite: 1120px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--tinte);
  background: var(--flaeche);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main { flex: 1 0 auto; }

h1, h2, h3 { line-height: 1.2; letter-spacing: -.015em; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); }
h2 { font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }

a { color: var(--rot); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--rot-dunkel); }

.huelle { width: min(100% - 2.5rem, var(--breite)); margin-inline: auto; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--tinte); color: #fff; padding: .6rem 1rem;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--rot); outline-offset: 2px; border-radius: 4px; }

/* --------------------------------- Kopf ---------------------------------- */

.kopf {
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
  position: sticky; top: 0; z-index: 40;
}
.kopf::before {
  content: ""; display: block; height: 4px;
  background: linear-gradient(90deg, var(--rot) 0 33%, var(--tinte) 33% 66%, var(--rot) 66%);
}
.kopf-inhalt { display: flex; align-items: center; gap: 1rem; min-height: 72px; }

.marke { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; }
.marke img { display: block; }
.marke strong { display: block; font-size: 1.15rem; letter-spacing: -.02em; }
.marke small { display: block; font-size: .74rem; color: var(--tinte-weich); text-transform: uppercase; letter-spacing: .09em; }

.nav { margin-left: auto; display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.nav > a {
  padding: .45rem .7rem; border-radius: var(--radius-klein);
  color: var(--tinte); text-decoration: none; font-size: .95rem; font-weight: 500;
}
.nav > a:hover { background: var(--flaeche-grau); color: var(--rot); }
.nav > a.aktiv { color: var(--rot); background: var(--rot-hell); }
.nav > a.knopf, .nav > a.knopf:hover { color: #fff; }
.nav-trenner { width: 1px; height: 24px; background: var(--linie); margin: 0 .4rem; }
.nav-formular { margin: 0; }

.verlinkt {
  background: none; border: 0; padding: .45rem .7rem; font: inherit; font-size: .95rem;
  color: var(--tinte-weich); cursor: pointer; border-radius: var(--radius-klein);
}
.verlinkt:hover { background: var(--flaeche-grau); color: var(--rot); }

.nav-schalter, .nav-knopf { display: none; }

/* -------------------------------- Bausteine ------------------------------- */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .7rem 1.3rem; border: 1px solid transparent; border-radius: var(--radius-klein);
  background: var(--rot); color: #fff; font: inherit; font-weight: 600; font-size: .97rem;
  text-decoration: none; cursor: pointer; transition: background .15s ease;
}
.knopf:hover { background: var(--rot-dunkel); color: #fff; }
.knopf-klein { padding: .45rem .95rem; font-size: .9rem; }
.knopf-zweit { background: var(--flaeche); color: var(--tinte); border-color: var(--linie); }
.knopf-zweit:hover { background: var(--flaeche-grau); color: var(--tinte); }
.knopf-gefahr { background: var(--flaeche); color: var(--rot); border-color: #f0c5c2; }
.knopf-gefahr:hover { background: var(--rot-hell); color: var(--rot-dunkel); }
.knopf-gruen { background: var(--gruen); }
.knopf-gruen:hover { background: #14653a; }

.karte {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--schatten);
}
.karte h3 { margin-top: 0; }
.karte > :last-child { margin-bottom: 0; }

.abschnitt { padding: 3.5rem 0; }
.abschnitt-grau { background: var(--flaeche-grau); }
.abschnitt-kopf { max-width: 62ch; margin-bottom: 2rem; }
.abschnitt-kopf p { color: var(--tinte-weich); margin-bottom: 0; }

.raster { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* Rasterfelder dürfen unter ihre Inhaltsbreite schrumpfen. Ohne das schiebt
   ein langes Wort - etwa eine E-Mail-Adresse - die Karte über den Rand hinaus. */
.raster > *, .kennzahlen > * { min-width: 0; }

.marke-strich {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--rot); margin-bottom: .6rem;
}

.hinweis {
  border-radius: var(--radius-klein); padding: .9rem 1.1rem; margin: 1.25rem 0;
  border: 1px solid var(--linie); background: var(--flaeche-grau); font-size: .96rem;
}
.hinweis-erfolg { background: var(--gruen-hell); border-color: #bfe3cd; color: #12492c; }
.hinweis-fehler { background: var(--rot-hell); border-color: #f3c9c6; color: #8d1912; }
.hinweis-info   { background: #eef4fd; border-color: #cfdff5; color: #1c3c67; }
.hinweis-warnung{ background: var(--gelb-hell); border-color: #f0dcaa; color: var(--gelb); }

.marke-plakette {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .6rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600; letter-spacing: .01em;
  background: var(--flaeche-grau); color: var(--tinte-weich); border: 1px solid var(--linie);
}
.plakette-gruen { background: var(--gruen-hell); color: #12492c; border-color: #bfe3cd; }
.plakette-rot   { background: var(--rot-hell); color: #8d1912; border-color: #f3c9c6; }
.plakette-gelb  { background: var(--gelb-hell); color: var(--gelb); border-color: #f0dcaa; }

/* ------------------------------- Startseite ------------------------------- */

.buehne {
  position: relative; color: #fff; overflow: hidden;
  background:
    radial-gradient(120% 120% at 80% 0%, #2b2f38 0%, #16181d 55%),
    var(--tinte);
}
.buehne::after {
  content: ""; position: absolute; inset: 0; opacity: .55; pointer-events: none;
  background: repeating-linear-gradient(115deg,
    transparent 0 60px, rgba(227, 34, 25, .22) 60px 100px, transparent 100px 160px);
}
.buehne-inhalt { position: relative; z-index: 1; padding: 5rem 0 4.5rem; max-width: 42rem; }
.buehne h1 { color: #fff; margin-bottom: .6rem; }
.buehne .marke-strich { color: #ff8b84; }
.buehne p { color: #d5d8de; font-size: 1.1rem; }
.buehne-knoepfe { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.buehne .knopf-zweit { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.buehne .knopf-zweit:hover { background: rgba(255,255,255,.12); color: #fff; }

.zahlen { display: flex; flex-wrap: wrap; gap: 2.5rem; margin-top: 3rem; }
.zahlen div strong { display: block; font-size: 2rem; line-height: 1; color: #fff; }
.zahlen div span { font-size: .85rem; color: #a9aeb8; text-transform: uppercase; letter-spacing: .08em; }

/* -------------------------------- Termine --------------------------------- */

.termin-liste { display: grid; gap: 1rem; }
.termin {
  display: grid; grid-template-columns: 84px 1fr auto; gap: 1.25rem; align-items: center;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 1.1rem 1.35rem;
}
.termin-datum {
  text-align: center; background: var(--rot-hell); border-radius: var(--radius-klein);
  padding: .5rem .2rem; color: var(--rot-dunkel);
}
.termin-datum strong { display: block; font-size: 1.5rem; line-height: 1.1; }
.termin-datum span { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.termin h3 { margin: 0 0 .15rem; font-size: 1.05rem; }
.termin p { margin: 0; color: var(--tinte-weich); font-size: .93rem; }
.termin-alt { opacity: .62; }

/* -------------------------------- Formulare ------------------------------- */

.formular-seite { padding: 3rem 0; }
.formular-schmal { width: min(100% - 2.5rem, 30rem); margin-inline: auto; }
.formular-mittel { width: min(100% - 2.5rem, 46rem); margin-inline: auto; }

.feld { margin-bottom: 1.1rem; }
.feld > label, .feld-gruppe > legend {
  display: block; font-weight: 600; font-size: .92rem; margin-bottom: .35rem;
}
.feld small { display: block; color: var(--tinte-weich); font-size: .84rem; margin-top: .3rem; }

input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="date"], input[type="time"], input[type="number"], select, textarea {
  width: 100%; padding: .65rem .8rem; font: inherit; font-size: .97rem;
  color: var(--tinte); background: var(--flaeche);
  border: 1px solid #ccd1d8; border-radius: var(--radius-klein);
}
input:focus, select:focus, textarea:focus { border-color: var(--rot); outline-offset: 1px; }
textarea { min-height: 7rem; resize: vertical; }

.feld-paar { display: grid; gap: 0 1rem; grid-template-columns: 1fr 1fr; }
.feld-paar-schmal { grid-template-columns: 8rem 1fr; }

fieldset.feld-gruppe {
  border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 1.1rem 1.25rem; margin: 0 0 1.25rem;
}
fieldset.feld-gruppe legend { padding: 0 .4rem; }

.wahl {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .6rem .75rem; border: 1px solid var(--linie); border-radius: var(--radius-klein);
  margin-bottom: .55rem; cursor: pointer; background: var(--flaeche);
}
.wahl:hover { border-color: #bcc2cb; background: var(--flaeche-grau); }
.wahl input { margin: .3rem 0 0; accent-color: var(--rot); width: 1.05rem; height: 1.05rem; flex: none; }
.wahl:has(input:checked) { border-color: var(--rot); background: var(--rot-hell); }
.wahl strong { display: block; font-weight: 600; font-size: .96rem; }
.wahl span { display: block; color: var(--tinte-weich); font-size: .86rem; }

.formular-fuss {
  display: flex; flex-wrap: wrap; gap: .8rem; align-items: center;
  margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--linie);
}

/* -------------------------------- Tabellen -------------------------------- */

.tabelle-huelle { overflow-x: auto; border: 1px solid var(--linie); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: .93rem; background: var(--flaeche); }
th, td { text-align: left; padding: .75rem .9rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
th { background: var(--flaeche-grau); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinte-weich); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fbfcfd; }

.daten-liste {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: .1rem 1.5rem;
  margin: 0;
}
.daten-liste dt { color: var(--tinte-weich); font-size: .92rem; padding: .35rem 0; }
.daten-liste dd { margin: 0; padding: .35rem 0; font-weight: 500; }
/* Lange E-Mail-Adressen und Links umbrechen statt überstehen */
.daten-liste dt, .daten-liste dd { min-width: 0; overflow-wrap: anywhere; }

/* In schmalen Karten untereinander statt nebeneinander */
@container (max-width: 26rem) {
  .daten-liste { grid-template-columns: 1fr; }
  .daten-liste dt { padding-bottom: 0; }
}
.karte { container-type: inline-size; }

/* ------------------------------- Mitgliederbereich ------------------------ */

.bereich-kopf { background: var(--flaeche-grau); border-bottom: 1px solid var(--linie); padding: 2.25rem 0 1.75rem; }
.bereich-kopf h1 { margin-bottom: .25rem; }
.bereich-kopf p { color: var(--tinte-weich); margin: 0; }

.reiter { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: 1.25rem; }
.reiter a {
  padding: .45rem .9rem; border-radius: 999px; text-decoration: none;
  color: var(--tinte-weich); font-size: .92rem; font-weight: 500; border: 1px solid transparent;
}
.reiter a:hover { background: var(--flaeche); border-color: var(--linie); color: var(--tinte); }
.reiter a.aktiv { background: var(--tinte); color: #fff; }

.kennzahlen { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.kennzahl { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.25rem; }
.kennzahl strong { display: block; font-size: 2.1rem; line-height: 1.1; }
.kennzahl span { color: var(--tinte-weich); font-size: .88rem; }

.kopier-feld { display: flex; gap: .5rem; }
.kopier-feld input { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; }

.leer {
  text-align: center; padding: 3rem 1.5rem; color: var(--tinte-weich);
  border: 1px dashed var(--linie); border-radius: var(--radius); background: var(--flaeche-grau);
}

/* --------------------------------- Fuß ------------------------------------ */

.fuss { background: var(--tinte); color: #c7cbd3; margin-top: 4rem; padding: 3rem 0 1.5rem; font-size: .93rem; }
.fuss-inhalt { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; }
.fuss strong { color: #fff; font-size: 1.05rem; }
.fuss p { max-width: 34ch; margin: .4rem 0 0; }
.fuss nav { display: grid; gap: .35rem; }
.fuss a { color: #c7cbd3; text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss-zeile {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid #2c3038; font-size: .84rem; color: #8b919b;
}

/* -------------------------------- Schmal ---------------------------------- */

@media (max-width: 860px) {
  .nav-knopf {
    display: block; margin-left: auto; width: 44px; height: 44px;
    border: 1px solid var(--linie); border-radius: var(--radius-klein); cursor: pointer; position: relative;
  }
  .nav-knopf span, .nav-knopf::before, .nav-knopf::after {
    content: ""; position: absolute; left: 11px; right: 11px; height: 2px;
    background: var(--tinte); border-radius: 2px;
  }
  .nav-knopf span { top: 21px; }
  .nav-knopf::before { top: 14px; }
  .nav-knopf::after { top: 28px; }

  .nav {
    display: none; width: 100%; margin-left: 0; flex-direction: column;
    align-items: stretch; gap: .1rem; padding: .75rem 0 1rem; border-top: 1px solid var(--linie);
  }
  .nav-schalter:checked ~ .nav { display: flex; }
  .nav > a { padding: .65rem .8rem; }
  .nav > a.knopf { justify-content: center; margin-top: .4rem; }
  .nav-trenner { width: 100%; height: 1px; margin: .5rem 0; }
  .verlinkt { text-align: left; padding: .65rem .8rem; }

  .kopf-inhalt { flex-wrap: wrap; }
  .termin { grid-template-columns: 64px 1fr; }
  .termin > :last-child { grid-column: 1 / -1; }
  .feld-paar { grid-template-columns: 1fr; }
  .daten-liste { grid-template-columns: 1fr; }
  .daten-liste dt { padding-bottom: 0; }
}

/* --------------------------------- Druck ---------------------------------- */

@media print {
  .kopf, .fuss, .reiter, .formular-fuss, .skip-link { display: none; }
  body { font-size: 12pt; }
  .karte { box-shadow: none; border-color: #999; }
}