/* ============================================================
   Wiederkehrende Bausteine: Baender, Zahlen, Wegstrecke, Listen, Suchfeld
   ============================================================
   Teil der nach Funktion aufgeteilten Gestaltung (29.08.2026).

   Vorher lag alles in einer seite.css mit 1.940 Zeilen, und jede neue
   Funktion wurde hinten drangehaengt. Max am 29.08.2026: "dass nicht
   alles in App.js reinkommt und in CSS, sondern dass das nach Funktion
   getrennt wird." Beim JavaScript war das laengst so, beim CSS nicht.

   Neue Regeln gehoeren in die Datei ihrer Funktion, nicht ans Ende der
   naechstbesten. Die Einbindereihenfolge in den HTML-Dateien entspricht
   der Reihenfolge, in der die Bloecke vorher in seite.css standen -
   daran haengt die Kaskade. tests/frontend-architecture.test.js prueft
   beides.
   ============================================================ */

/* ============================================================
   NEUE BAUSTEINE (Runde 5, 18.08.2026)

   Max' Befund: "Alles ist ein bisschen so Einheitsbrei." Er hatte
   recht - jede Sektion war Überschrift plus Raster aus weißen Karten
   mit 1px-Rand. Bei fünf Sektionen hintereinander verschwimmt das.

   Die Gegenmittel hier sind bewusst KEINE zusätzlichen Verzierungen,
   sondern Rhythmus: dunkle Vollbreit-Bänder zwischen hellen
   Abschnitten, große Zahlen als typografischer Ruhepunkt, eine
   senkrechte Wegstrecke statt einer weiteren Kachelreihe, und
   Listenzeilen dort, wo man sucht statt stöbert.
   ============================================================ */

/* ---------- Vollbreites Band ----------
   Bricht aus der 1140px-Spalte aus, ohne dass das Markup umgebaut
   werden muss: negative Margin in Höhe des halben Viewport-Überstands.
   100vw statt 100% wegen der Scrollleiste - deshalb overflow-x am
   body gesperrt, sonst entsteht ein waagerechter Schieber. */
body { overflow-x: hidden; }

.band {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 46px calc(50vw - 550px);
  margin-bottom: 36px;
}
@media (max-width: 1180px) { .band { padding-left: 20px; padding-right: 20px; } }

.band-dunkel {
  background: var(--marke-dunkel);
  color: #fff;
  position: relative;
  overflow: hidden;
}
/* Schiedsrichter-Motiv: die Diagonalen der Fahne, sehr zurückgenommen.
   Rein dekorativ, deshalb kein eigenes Element im Markup. */
.band-dunkel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 14px, transparent 14px 28px);
  pointer-events: none;
}
.band-dunkel > * { position: relative; z-index: 1; }
.band-dunkel h2 {
  font-family: var(--font-titel);
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.025em;
  margin: 0 0 14px;
  line-height: 1.06;
}
/* NUR die Absaetze, die wirklich auf dem dunklen Grund liegen. Vorher
   stand hier ".band-dunkel p" ohne Einschraenkung - das faerbte auch die
   Probefrage ein, die zwar im Band steckt, aber auf einer WEISSEN Karte
   sitzt. Ergebnis waren 1,48:1 Kontrast auf dem wichtigsten Element der
   Startseite. Gefunden im Review am 18.08.2026. */
/* NICHT ".band-dunkel p" und auch nicht "> div > p": die Probefrage sitzt in
   einem div, das direktes Kind von .band-zwei ist - sie wurde dadurch weiter
   hellgrau auf weißer Karte gesetzt, Kontrast 1,48:1. Im gerenderten
   Screenshot am 21.08.2026 endlich selbst gesehen. Jetzt zählt nur noch, was
   wirklich auf dem dunklen Grund liegt. */
.band-dunkel > p,
.band-dunkel > .aufruf p,
.band-dunkel > .band-zwei > .band-text p { color: #cbd5e1; line-height: 1.6; margin: 0; }


/* ---------- Zahlenstreifen ----------
   Drei bis vier Werte groß gesetzt. Bewusst ohne Kartenrahmen: das ist
   der eine Ort auf der Seite, an dem Typografie allein trägt. */

/* 210px statt 150px: mit der größeren Ziffernhöhe stießen "25-55 €" und
   "0 €" sonst aneinander. Am gerenderten Screenshot gesehen. */
.zahlen { display: grid; gap: clamp(26px, 3vw, 44px); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.zahl .z {
  font-family: var(--font-titel);
  font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 800; line-height: .95;
  letter-spacing: -.04em;
}
.zahl .b { font-size: .84rem; margin-top: 7px; line-height: 1.45; }
.band-dunkel .zahl .z { color: #fff; }
.band-dunkel .zahl .b { color: #cbd5e1; }

/* ---------- Wegstrecke (Schiri werden) ----------
   Senkrechte Linie mit nummerierten Punkten. Anderer Bautyp als alles
   sonst auf der Seite - genau das ist der Zweck. */

.weg { position: relative; margin: 0; padding: 0 0 0 46px; list-style: none; }
.weg::before {
  content: "";
  position: absolute; left: 17px; top: 10px; bottom: 26px;
  width: 2px; background: var(--border);
}
.weg-schritt { position: relative; padding: 0 0 26px; }
.weg-schritt:last-child { padding-bottom: 0; }
.weg-schritt::before {
  content: attr(data-nr);
  position: absolute; left: -46px; top: 0;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--marke); color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-titel); font-weight: 700; font-size: .92rem;
  box-shadow: 0 0 0 5px var(--bg-start);
}
.weg-schritt h3 { margin: 4px 0 7px; font-family: var(--font-titel); font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; }
/* Zeilenlänge begrenzt: über die volle Spaltenbreite wurden daraus
   Zeilen mit über 120 Zeichen, die man beim Lesen verliert. */
.weg-schritt p { margin: 0; font-size: .95rem; color: var(--muted); line-height: 1.65; max-width: 62ch; }
.weg-schritt .dauer {
  display: inline-block; margin-top: 8px;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: var(--marke-lighter); color: var(--marke-hell);
  padding: 4px 9px; border-radius: 999px;
}

/* ---------- Listenzeilen (Unterlagen) ----------
   Ersetzt fünf identische Kachelraster. Wer auf dieser Seite landet,
   sucht ein bestimmtes Dokument - dafür sind schmale Zeilen mit
   gleichbleibender Titelposition schneller zu überfliegen als Karten,
   deren Titel je nach Textlänge woanders steht. */

.liste { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); overflow: hidden; }
.lz {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid #f3f4f6;
  text-decoration: none; color: inherit;
  transition: background .14s;
}
.lz:last-child { border-bottom: 0; }
.lz:hover { background: #f9fafb; }
/* Gleicher Grund wie bei .faltung: .liste hat overflow:hidden. */
.lz:focus-visible { outline-offset: -3px; }
.lz-symbol {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center; font-size: 1.1rem;
  background: var(--marke-lighter);
}
.lz-symbol.hier { background: var(--green-light); }
.lz-symbol.extern { background: var(--blau-hell); }
.lz-text { flex: 1; min-width: 0; display: block; }
.lz-titel { display: block; font-size: .92rem; font-weight: 600; font-family: var(--font-titel); line-height: 1.35; }
.lz-sub { display: block; font-size: .8rem; color: var(--muted); line-height: 1.5; margin-top: 3px; }
.lz-rechts { flex: none; display: flex; align-items: center; gap: 9px; padding-top: 8px; }
.lz-pfeil { color: var(--muted); font-size: .9rem; }

/* Abschnittsüberschrift innerhalb einer Liste. */
.liste-kopf {
  padding: 11px 16px;
  background: var(--marke-lighter);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-titel); font-weight: 700; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .05em; color: var(--marke-hell);
}
.liste-kopf:not(:first-child) { border-top: 1px solid var(--border); }

/* Eigene Unterlagen mit Wappen (03.09.2026).

   Auf informationen.html stehen unsere eigenen Vorlagen in einer eigenen
   Gruppe ueber den Verbandsdokumenten. Sonst weiss niemand mehr, wer fuer
   welchen Inhalt geradesteht - und das macht beide Sorten weniger
   vertrauenswuerdig, nicht nur eine.

   Wappen UND Wortmarke: das Bild allein waere ein Symbol ohne Wort. */
.eigene-sachen { margin-top: 20px; }
.eigene-sachen-kopf {
  display: flex;
  align-items: center;
  gap: 9px;
  text-transform: none;
  letter-spacing: 0;
  font-size: .86rem;
  color: var(--marke-dunkel);
}
/* Schlaegt die 40 px aus stil/kopf-fuss.css - dieselbe Spezifitaet, aber
   spaeter eingebunden. Die Klasse "wappen" bleibt dran, damit seite.js das
   Bild aus verein.config.js auch hier austauscht. */
.eigen-wappen { height: 22px; width: 22px; }

/* Ueberschrift des Fremd-Teils. Steht frei und nicht in einer .liste,
   deshalb keine Balkenoptik. */
.verbands-kopf {
  margin: 34px 0 6px;
  font-family: var(--font-titel);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--marke-dunkel);
}

.info-klapptext {
  margin: 8px 0 18px;
  max-width: 62ch;
}
.info-klapptext summary {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--card);
  color: var(--marke-hell);
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}
.info-klapptext summary::-webkit-details-marker { display: none; }
.info-klapptext[open] summary { background: var(--marke-lighter); border-color: var(--marke-hell); }
.info-klapptext p {
  margin: 10px 0 0;
  padding: 12px 14px;
  border-left: 3px solid var(--marke);
  border-radius: 0 10px 10px 0;
  background: var(--marke-lighter);
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.55;
}

/* ---------- Segmentierter Umschalter ----------
   Zwei sich ausschließende Zustände. Als zwei einzelne Pillen sah man
   nicht, dass sie zusammengehören; als ein Bauteil mit Schieber schon. */

.segment {
  display: inline-flex;
  background: var(--marke-lighter);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  gap: 4px;
}
.segment button {
  font: inherit; font-size: .85rem; font-weight: 600;
  padding: 9px 20px; border-radius: 999px;
  border: 0; background: transparent; color: var(--marke-hell);
  cursor: pointer; min-height: 40px;
  transition: background .15s, color .15s, box-shadow .15s;
}
.segment button[aria-pressed="true"] {
  background: var(--card); color: var(--marke-dunkel);
  box-shadow: var(--shadow);
}

/* ---------- Suchfeld mit Symbol ---------- */

.suchzeile { position: relative; max-width: 420px; flex: 1 1 260px; }
/* Statt eines Lupen-Emojis eine gezeichnete Lupe als Hintergrundbild.
   Max, 21.08.2026: "nicht so KI-mäßig mit so Icons und so Emojis". */
.suchzeile::before {
  content: "";
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; opacity: .45; pointer-events: none;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='7'/%3E%3Cpath d='M15.6 15.6 21 21'/%3E%3C/svg%3E");
}
.suchzeile input {
  width: 100%;
  padding: 12px 14px 12px 38px;
  border: 1px solid var(--border); border-radius: 999px;
  font: inherit; font-size: .87rem;
  background: var(--card);
  min-height: 44px;
}

.werkzeugleiste {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin-bottom: 14px;
}
.trefferzahl { font-size: .8rem; color: var(--muted); margin: 0 0 16px; }

/* ---------- Aufruf am Seitenende ---------- */

.aufruf {
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
  justify-content: space-between;
}
.aufruf-text h2 { margin: 0 0 6px; }
/* Zwei Knoepfe nebeneinander, seit die Unterlagenseite auf beide
   Verbandsseiten verweist (22.08.2026). Auf schmalen Geraeten brechen sie
   um - sonst quetschen sich zwei 48-px-Knoepfe in eine Zeile von 320 px. */
.aufruf-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }
.knopf-weiss {
  background: #fff; color: var(--marke-dunkel);
  border: 0; border-radius: 999px;
  padding: 14px 26px;
  font: inherit; font-weight: 700; font-size: .9rem;
  text-decoration: none; cursor: pointer;
  min-height: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.knopf-weiss:hover { background: #e5e7eb; }

/* ---------- Wortmarke statt Warn-Emoji ----------
   Max, 21.08.2026: "nicht so KI-mäßig mit so Icons und so, sondern mit
   Bildern, mit großen Überschriften, mit großen Schlagwörtern arbeiten."
   Ein Wort sagt hier ohnehin mehr als ein Dreieck - und es wird von
   Vorleseprogrammen richtig vorgelesen statt als "Warnzeichen". */

.sym-wort {
  flex: none;
  align-self: flex-start;
  font-size: .66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(113, 63, 18, .12);
  color: #713f12;
  margin-top: 1px;
}
.hinweisbalken.ruhig .sym-wort { background: rgba(30, 58, 95, .12); color: #1e3a5f; }

/* Ausgeblendete, aber im Dokument verbleibende Auflösung. "hidden" hätte
   sie aus dem Barrierefreiheitsbaum genommen - siehe Kommentar im Markup. */
.probe-aufloesung.leer { display: none; }
/* Wiederverwendbare Farbauswahl fuer Ausruestungsbestand und -anfrage. */
.ausruestungs-farbblock { min-width: 0; margin: 0 0 14px; padding: 0; border: 0; }
.ausruestungs-farbblock legend { margin-bottom: 8px; font-size: .84rem; font-weight: 700; }
.ausruestungs-farbwahl { display: grid; grid-template-columns: repeat(6, minmax(44px, 1fr)); gap: 7px; }
.ausruestungs-farbe { position: relative; display: grid; justify-items: center; gap: 3px; min-width: 0; cursor: pointer; }
.ausruestungs-farbe input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ausruestungs-farbe span { display: grid; place-items: center; width: 38px; height: 38px; box-sizing: border-box; border: 2px solid var(--border); border-radius: 50%; background: var(--ausruestungs-farbe, var(--marke-lighter)); color: var(--marke); font-size: 1.25rem; font-weight: 800; }
.ausruestungs-farbe input:checked + span { border-color: var(--marke); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marke) 22%, transparent); }
.ausruestungs-farbe input:focus-visible + span { outline: 3px solid var(--marke-hell); outline-offset: 2px; }
.ausruestungs-farbe small { max-width: 100%; overflow: hidden; color: var(--muted); font-size: .64rem; text-overflow: ellipsis; }
.ausruestungs-farbe-eigen span { background: var(--card); }
.ausruestungs-farbblock > input:not([type="hidden"]) { margin-top: 10px; }
@media (max-width: 420px) { .ausruestungs-farbwahl { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Sekundaerer Knopf (Nebenaktion) ----------
   Die Klasse ".sekundaer-button" war bis 12.09.2026 AUSSCHLIESSLICH in
   style.css definiert - dem Buendel, das nur quiz.html, duell.html und die
   drei Rechtstexte laden. Auf allen Vereinsseiten (die stil/*.css laden)
   trug damit zwar Markup die Klasse, hatte aber keinerlei Gestaltung: ein
   nackter Link ohne Flaeche, ohne Umriss, ohne Trefferflaeche.

   Warum hier und nicht in einer Seitendatei: die Klasse taucht in mehreren
   Seiten und in gemeinsam genutztem JS auf - eine Kopie je Seite waere
   genau die Doppelung, die spaeter auseinander laeuft.

   Warum das die Quiz-Fassung nicht stoert: keine einzige Seite bindet
   style.css UND stil/bausteine.css zusammen ein (geprueft ueber alle
   *.html; duell.html laedt style.css, aber kein bausteine.css). Die beiden
   Definitionen treffen sich also nie in derselben Kaskade. Deshalb steht
   hier bewusst eine eigenstaendige Regel und kein Aufbohren von style.css -
   das Quiz laeuft und soll von Aenderungen der Vereinsseite unberuehrt
   bleiben (siehe Kopf dieser Datei).

   Gestaltung als Nebenaktion, nicht als Hauptaktion: heller Grund mit
   dunklem Umriss statt gefuellter Markenflaeche. Der Umriss ist
   --marke-hell (#374151) und nicht --border (#e5e7eb) - letzteres kommt
   auf Weiss nur auf rund 1,2:1 und faellt damit unter die 3:1, die ein
   Bedienelement fuer seinen Umriss braucht. #374151 liegt bei rund 10:1,
   die Beschriftung (--text) bei rund 17:1. */

.sekundaer-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* 44 px ist die kleinste Trefferflaeche, die am Handy zuverlaessig
     getroffen wird; das Padding allein kam bei .85rem nicht dorthin. */
  min-height: 44px;
  padding: 9px 18px;
  border: 1.5px solid var(--marke-hell);
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

/* basis.css setzt [hidden] { display: none !important; } global - diese
   Zeile ist trotzdem noetig, weil die Klasse auch auf Seiten ohne
   basis.css denkbar ist und "display: inline-flex" sonst gewinnt. */
.sekundaer-button[hidden] { display: none; }

.sekundaer-button:hover {
  background: var(--marke-lighter);
  border-color: var(--marke-dunkel);
}

/* Kompakter Hilfe-Hub: dieselbe Karte bleibt auf Handy und Desktop
   lesbar, ohne einen neuen Sonderstil fuer jede Hilfeart einzufuehren. */
.hilfe-raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}
.funktions-kachel {
  min-height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--shadow);
}
.funktions-kachel:hover { border-color: var(--marke-hell); }
.funktions-kachel span { color: var(--muted); font-size: .9rem; line-height: 1.45; }
@media (max-width: 600px) {
  .hilfe-raster { grid-template-columns: 1fr; }
}