/* ============================================================
   Regeluebersicht: Filter, Karten und Abzeichen
   ============================================================
   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.
   ============================================================ */

/* ---------- Herkunfts-Abzeichen ----------
   Wird von den Listenzeilen der Informationsseite benutzt. Die frueheren
   Dokumentkacheln daneben sind entfallen. */

.abzeichen {
  font-size: .68rem; font-weight: 700;
  padding: 3px 8px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .03em;
}
.abz-hier { background: var(--green-light); color: var(--green-dark); }
.abz-extern { background: var(--blau-hell); color: #1d4ed8; }

/* ---------- Regelübersicht ----------
   Das Original des Stadtverbands ist eine Tabelle mit zehn Spalten. Auf
   dem Handy ist die praktisch unlesbar, und man muss jedes Mal die
   richtige Zeile suchen. Deshalb hier Karten statt Tabelle: eine Karte
   je Spielklasse, Werte beschriftet, Filter und Suche darüber. */

.filterleiste { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 9px; }
.filterleiste button {
  font: inherit; font-size: .81rem; font-weight: 600;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card);
  cursor: pointer; color: var(--marke-hell);
  min-height: 44px;
}
.filterleiste button:hover { border-color: var(--marke-hell); }
.filterleiste button.an { background: var(--marke); color: #fff; border-color: var(--marke); }


.rk { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--card); }
.rk-kopf { padding: 11px 14px; background: var(--marke-lighter); border-bottom: 1px solid var(--border); }
.rk-kopf .klasse { font-size: .9rem; font-weight: 600; font-family: var(--font-titel); line-height: 1.3; margin-top: 2px; }
/* Die gelbe Hervorhebung ist entfallen. Sie stammte aus dem Original des
   Stadtverbands und markierte dort die Änderungen zur Saison 2024/25 -
   Max, 18.08.2026: "dadurch, dass das ja auch Stand 24/25 ist, sind die
   Erneuerungen ja auch schon wieder veraltet". Eine Markierung, die etwas
   Falsches behauptet, ist schlechter als gar keine. */

.rk-fuss { padding: 9px 14px; font-size: .76rem; color: var(--muted); line-height: 1.5; }
.keine { padding: 26px; text-align: center; color: var(--muted); font-size: .88rem; }

/* ---------- Ausklappbare Frage/Antwort ---------- */

.faltung {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card); margin-bottom: 9px; overflow: hidden;
}
.faltung > summary {
  padding: 15px 17px;
  font-weight: 600; font-size: .92rem; font-family: var(--font-titel);
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 11px;
  min-height: 44px;
}
.faltung > summary::-webkit-details-marker { display: none; }
.faltung > summary::after {
  content: "+"; margin-left: auto;
  font-size: 1.25rem; color: var(--muted); line-height: 1;
  transition: transform .18s;
}
.faltung[open] > summary::after { content: "−"; }
.faltung > summary:hover { background: #f9fafb; }
/* .faltung hat overflow:hidden (fuer die runden Ecken). Der Fokusrahmen
   liegt mit outline-offset:2px ausserhalb und wurde dadurch komplett
   weggeschnitten - Tastaturbedienung ohne jede Rueckmeldung. Rahmen nach
   innen zeichnen loest das, ohne die Ecken aufzugeben. */
.faltung > summary:focus-visible { outline-offset: -3px; }
.faltung .antwort { padding: 0 17px 16px; font-size: .87rem; color: var(--muted); line-height: 1.65; }
.faltung .antwort p { margin: 0 0 9px; }
.faltung .antwort p:last-child { margin-bottom: 0; }

/* ---------- Regelübersicht: Gruppierung nach Altersklasse ---------- */

.regelgruppe { margin-bottom: 30px; }
.regelgruppe-titel {
  font-family: var(--font-titel); font-size: 1.02rem; margin: 0 0 12px;
  display: flex; align-items: center; gap: 13px;
}
/* Linie hinter der Überschrift statt eines weiteren Kastens - trennt die
   Gruppen, ohne dass noch ein Rahmen dazukommt. */
.regelgruppe-titel::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ---------- Widerspruch zwischen zwei Quellen ----------
   Steht an der einzelnen Regelkarte, nicht als Fußnote am Seitenende.
   Wer nur schnell die Spielzeit nachschlägt, scrollt nicht bis unten -
   und genau der soll die Warnung sehen. */

/* Bewusst leiser als .hinweisbalken: taucht potenziell mehrfach pro
   Seitenansicht auf (je eine Karte mit Widerspruch), eine flaechige
   Gelbfaerbung an mehreren Stellen zugleich wirkte laut statt auffaellig
   (29.08.2026). Duennerer Farbakzent statt Flaeche traegt dieselbe
   Bedeutung, ohne die Seite zu uebertoenen. */
.rk-konflikt {
  margin: 0 12px 12px;
  padding: 9px 12px 9px 13px;
  background: #fffdf6;
  border-left: 3px solid #f2b90c;
  border-radius: 6px;
  font-size: .78rem;
  line-height: 1.55;
  color: var(--marke-hell);
}
.rk-konflikt strong { color: var(--marke-dunkel); }

/* Ruhige Variante des Hinweisbalkens: gleiche Form, aber ohne die
   Alarmfarbe. Für Angaben, die stimmen und nur eingeordnet werden. */
.hinweisbalken.ruhig {
  background: #f7fafd;
  border-left-color: var(--blau);
  color: var(--text);
}
.hinweisbalken.ruhig strong { color: #12263f; }
.hinweisbalken.ruhig a { color: #1e3a5f; }

/* Zwei Segmentschalter untereinander brauchen etwas Luft dazwischen. */
#ebeneFilter { margin-bottom: 16px; }

/* Drei Entscheidungen statt Filterteppich: Ebene, Spielart, konkrete
   Spielklasse. Der Nutzer kommt aus einer Ansetzung und sucht genau eine
   Antwort, nicht eine Gesamtschau aller Wettbewerbe. */
.regel-finder {
  display: grid;
  gap: 12px;
  margin: 24px 0 18px;
}

.regel-finder-schritt {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 13px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
}

.regel-finder-nr {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--marke);
  color: #fff;
  font-weight: 800;
}

.regel-finder-schritt h2 {
  margin: 3px 0 12px;
  font-family: var(--font-titel);
  font-size: .98rem;
}

/* Runde 3, iPhone: "Was für ein Spiel ist es? / Freundschaftsspiel" ragte
   über die Karte hinaus. .segment ist ein inline-flex ohne Umbruch - es
   schrumpft also nie unter die Summe seiner Knopfbreiten, und drei
   Knöpfe brauchen mehr als die rund 240 px, die bei 360 px Fensterbreite
   im Schritt übrig bleiben. Im Finder darf die Reihe deshalb umbrechen.
   Die 44 px Höhe sind gleich mit dabei: aus .segment kamen nur 40. */
.regel-finder-schritt .segment {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}
.regel-finder-schritt .segment button {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 9px 14px;
}

.regel-auswahl {
  width: 100%;
  min-height: 48px;
  padding: 10px 42px 10px 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
}

.regel-auswahl:focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; }
.freundschaft-hinweis { margin-top: 14px; }
.regel-finder-erklaerung {
  margin: 9px 0 0;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--muted);
}

/* ---------- Stand-Hinweis zum Aufklappen ----------
   Warum überhaupt: siehe zeichneStand() in regeluebersicht.html. Kurz -
   der Balken war so groß, dass der Inhalt darunter übersehen wurde.

   Die Regeln hängen bewusst an BEIDEN Klassen. stil/hinweise.css wird
   nach dieser Datei geladen; mit nur .hinweis-falt gewinnen dort
   display:flex und die Polsterung von .hinweisbalken. */
.hinweisbalken.hinweis-falt { display: block; padding: 0; }
.hinweisbalken.hinweis-falt > summary {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 15px; min-height: 44px;
  cursor: pointer; list-style: none;
}
.hinweisbalken.hinweis-falt > summary::-webkit-details-marker { display: none; }
.hinweisbalken.hinweis-falt > summary:focus-visible { outline-offset: -3px; }
.hinweisbalken.hinweis-falt .hinweis-kurz { min-width: 0; overflow-wrap: anywhere; }
/* Wort statt Pfeil - dieselbe Hausregel wie bei .sym-wort. */
.hinweisbalken.hinweis-falt .hinweis-mehr {
  margin-left: auto; white-space: nowrap;
  font-size: .75rem; font-weight: 700; color: var(--muted);
}
.hinweisbalken.hinweis-falt:not([open]) .hinweis-mehr::after { content: "Warum"; }
.hinweisbalken.hinweis-falt[open] .hinweis-mehr::after { content: "Zuklappen"; }
.hinweisbalken.hinweis-falt .hinweis-text { padding: 0 15px 13px; }

/* ---------- Kartenkopf: Altersklasse, Quelle, Spielklasse ----------
   Die Karte muss für sich allein lesbar sein - wer mitten in der Liste
   landet, sieht die Gruppenüberschrift nicht mehr. */
.rk-kopfzeile {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-bottom: 3px;
}
.rk-alter {
  font-size: .72rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .045em;
}
.regel-grenze { margin: 14px 0 20px; color: var(--muted); font-size: .82rem; line-height: 1.55; }

@media (min-width: 880px) {
  .regel-finder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .regel-finder-schritt { grid-template-columns: 32px minmax(0, 1fr); }
  .regel-finder-schritt:last-child { grid-column: 1 / -1; }
  .regel-finder-schritt:last-child > div { max-width: 720px; }
}

/* ---------- Herkunft: Landesverband ----------
   Dritte Stufe neben "Bei uns" (grün) und "Stadtverband" (blau). Violett,
   weil es sich von beiden deutlich unterscheiden muss - die Frage, WER für
   eine Angabe geradesteht, entscheidet bei widersprüchlichen Quellen alles.
   Kontrast 7,4:1 auf dem hellen Grund, also deutlich über WCAG AA. */

.abz-land { background: #ede9fe; color: #5b21b6; }
.abz-dfb { background: var(--red-hell); color: #991b1b; }
.lz-symbol.land { background: #ede9fe; }

/* Gesamtsumme, in der etwas fehlt oder ungeprüft ist. Grün signalisiert
   "fertig" - genau das darf hier nicht stehen, wenn z.B. die Fahrtkosten
   der Assistenten noch fehlen. Kontrast 8,07:1. */
.q-gesamt.unvollstaendig { background: var(--karte-gelb-hell); }
.q-gesamt.unvollstaendig b:last-child { color: #713f12; }

/* ---------- Regelkarten 2026: Wesentliches zuerst ----------
   Jede Spielklasse folgt derselben Blickreihenfolge. Die fünf Angaben,
   die am Spieltag am häufigsten gebraucht werden, bleiben offen sichtbar;
   seltenere Sonderregeln liegen in einem einzigen, beschrifteten Detail.
   Das Kartenraster gilt bewusst auch auf breiten Bildschirmen: die frühere
   Zehn-Spalten-Tabelle war zwar dicht, aber nicht schnell erfassbar. */
.regelkarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 14px;
}

.rk {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  box-shadow: 0 8px 28px rgba(17, 24, 39, .07);
}

.rk-kopf {
  padding: 16px 18px;
  background: linear-gradient(135deg, var(--marke-lighter), #fff);
}

.rk-kopf .klasse {
  font-size: 1rem;
  font-weight: 700;
}

.rk-kernwerte {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
}

.rk-kernwert {
  min-width: 0;
  min-height: 92px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--card);
}

.rk-kernwert:last-child:nth-child(odd) { grid-column: 1 / -1; }

.rk-symbol {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--marke);
  background: var(--marke-lighter);
}

.rk-symbol svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rk-kerntext {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rk-kerntext > span:first-child {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.rk-kerntext strong {
  overflow-wrap: anywhere;
  font-family: var(--font-titel);
  font-size: .98rem;
  line-height: 1.25;
}

.rk-kerntext small {
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.3;
}

.rk-ja-nein {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
}

.rk-ja-nein.ja { color: #15803d; background: #f0fdf4; }
.rk-ja-nein.nein { color: #b91c1c; background: #fef2f2; }

.rk-mehr {
  border-top: 1px solid var(--border);
  background: #fafafa;
}

.rk-mehr summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 10px 17px;
  cursor: pointer;
  list-style: none;
  color: var(--marke-hell);
  font-size: .8rem;
  font-weight: 700;
}

.rk-mehr summary::-webkit-details-marker { display: none; }
.rk-mehr summary::after { content: "+"; margin-left: auto; font-size: 1.1rem; }
.rk-mehr[open] summary::after { content: "−"; }
.rk-mehr summary:focus-visible { outline-offset: -3px; }

.rk-zusatzwerte {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0 17px 13px;
  gap: 9px 16px;
}

.rk-zusatzwert {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rk-zusatzwert span { color: var(--muted); font-size: .7rem; }
.rk-zusatzwert strong { overflow-wrap: anywhere; font-size: .8rem; line-height: 1.35; }

.rk-fuss { border-top: 1px solid var(--border); background: #fafafa; }
.rk-konflikt { margin-top: 12px; }

@media (max-width: 430px) {
  .rk-kernwerte { grid-template-columns: 1fr; }
  .rk-kernwert { min-height: 72px; }
  .rk-zusatzwerte { grid-template-columns: 1fr; }
}

/* Belege an der einzelnen Regelzeile (12.09.2026)
   Vorher stand am Seitenende eine Liste aller Quellen - wer bei den
   C-Junioren stand, musste selbst heraussuchen, welches der 23
   Dokumente gemeint ist. Der Block sitzt am Fuss der Karte, also nach
   den Regeln: er ist der Beleg, nicht die Auskunft. */
.rk-belege {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px dashed var(--border);
}
.rk-belege h3 {
  margin: 0 0 7px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.rk-belege ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.rk-belege li { display: grid; gap: 2px; }
/* 44px Trefferflaeche, ohne dass der Link wie ein Knopf aussieht: der
   Innenabstand liegt senkrecht und der Text bleibt ein Link. */
.rk-belege a {
  display: inline-block;
  padding: 6px 0;
  min-height: 32px;
  font-weight: 650;
  font-size: .92rem;
  color: var(--marke);
}
.rk-belege li > span { font-size: .84rem; color: var(--muted); line-height: 1.45; }
@media print { .rk-belege { border-top-style: solid; } }