/* =========================================================
   HOWE simracing – Mitgliederbereich (FOKALiS CMS, Seiten unter /_site/mitglieder/…)
   Gestaltung: Dennis, 07.10.2026 (Entwurf: FOKALiS CMS/docs/design/entwurf-mitglieder).
   Lädt nur im Mitgliederbereich (data-mitglieder="bereich" in impressum.html) – nach
   dem Grund-CSS des CMS; die Klassen .fk-m-… liefert das CMS, hier kommt der HOWE-Look.

   Kontraste (auf #1A1A1A bzw. #242424): Text #F0F0F0 15:1 · leise #B8B8B8 8,8:1 ·
   Gelb 11:1 · Grün #3EC74A 7,8:1 · Rot #FF7A6B 6,9:1
   ========================================================= */

:root {
  --mg-flaeche: #242424;        /* Karten, Seitenleiste */
  --mg-flaeche-2: #2c2c2c;      /* Eingabefelder (wie Warteliste) */
  --mg-flaeche-3: #383838;      /* Hover */
  --mg-linie: rgba(255,255,255,.14);
  --mg-linie-stark: rgba(255,255,255,.32);
  --mg-text: #f0f0f0;
  --mg-text-leise: #b8b8b8;
  --mg-gruen: #3ec74a;
  --mg-rot: #ff7a6b;
  --mg-lmu: #ff006e;
  --mg-acc: #ba0000;
  --mg-endu: #6692e7;

  /* Maß-System (Dennis, 08.10.2026) – überall dieselben Höhen, damit Zeilen bündig stehen:
     48 px = Feld, Auswahl, Knopf, Segment, Farbfeld · 36 px = kleiner Knopf, Filter, Knöpfe in Tabellen */
  --mg-hoehe: 48px;
  --mg-hoehe-klein: 36px;

  /* Variablen des CMS-Grund-CSS */
  --fk-m-akzent: var(--c-gelb);
  --fk-m-akzent-text: var(--c-bg);
  --fk-m-flaeche: var(--mg-flaeche);
  --fk-m-feld: var(--mg-flaeche-2);
  --fk-m-linie: var(--mg-linie);
  --fk-m-leise: var(--mg-text-leise);
  --fk-m-radius: 0;
  --fk-m-titel-schrift: var(--f-head);
}

/* Immer border-box: Das Grund-CSS vererbt box-sizing nur („inherit“). Im Inhalt von <details>
   (::details-content) kommt dann content-box an – Felder wurden dort 67 statt 48 px hoch und
   ragten 53 px aus der Karte (Team-Seite, Konto › Passwort, Lizenzen › Saisons). */
.fk-m *, .fk-m *::before, .fk-m *::after { box-sizing: border-box; }

/* ---------- Seitenrahmen: Platz unter dem festen Kopf ---------- */
.fk-m {
  max-width: none;
  padding: calc(var(--header-h) + clamp(20px, 2.2vw, 44px)) 5vw clamp(48px, 5vw, 96px);
  font: 400 16px/1.5 var(--f-text);
  color: var(--mg-text);
}
.fk-m-raster { max-width: 1680px; margin-inline: auto; }
.fk-m a:hover { color: inherit; }
.fk-m-link { color: var(--c-gelb); text-decoration-color: currentColor; }
.fk-m a.fk-m-link:hover { color: var(--c-weiss); }

/* ---------- Knöpfe ----------
   normal 48 px · klein 36 px · leise (Textknopf) gleich hoch wie seine Größe · Symbolknopf quadratisch.
   Padding nur seitlich – die Höhe kommt allein aus min-height, egal ob a, button, label oder span. */
.fk-m-knopf { min-height: var(--mg-hoehe); padding: 0 24px; gap: 10px; font: 700 15px/1.2 var(--f-text); }
.fk-m-knopf--klein { min-height: var(--mg-hoehe-klein); padding: 0 14px; gap: 8px; font-size: 14px; }
.fk-m-knopf--klein .fk-m-icon { width: 18px; height: 18px; }
.fk-m-knopf--leise { min-height: var(--mg-hoehe); padding: 0 4px; }
.fk-m-knopf--leise.fk-m-knopf--klein { min-height: var(--mg-hoehe-klein); }
.fk-m-knopf--icon { min-width: var(--mg-hoehe); padding: 0; }
.fk-m-knopf--icon.fk-m-knopf--klein { min-width: var(--mg-hoehe-klein); }
/* Knopfreihen: Knöpfe behalten ihre Höhe statt sich auf die höchste Nachbarin zu strecken */
.fk-m-aktionen { align-items: center; }
.fk-m-formular > .fk-m-aktionen { align-self: end; }
/* Steht ein normaler Knopf (kein Text- oder Symbolknopf) in der Reihe, werden kleine mit ihm gleich groß (z. B. „Löschen | Abbrechen | Speichern“) */
.fk-m-aktionen:has(> .fk-m-knopf:not(.fk-m-knopf--klein, .fk-m-knopf--leise, .fk-m-knopf--icon), > * > .fk-m-knopf:not(.fk-m-knopf--klein, .fk-m-knopf--leise, .fk-m-knopf--icon)) .fk-m-knopf--klein { min-height: var(--mg-hoehe); padding-inline: 24px; font-size: 15px; }
.fk-m-aktionen:has(> .fk-m-knopf:not(.fk-m-knopf--klein, .fk-m-knopf--leise, .fk-m-knopf--icon), > * > .fk-m-knopf:not(.fk-m-knopf--klein, .fk-m-knopf--leise, .fk-m-knopf--icon)) .fk-m-knopf--leise { padding-inline: 4px; }
/* In Tabellen immer klein (Zeile 56 px) */
.fk-m-tabelle .fk-m-knopf { min-height: var(--mg-hoehe-klein); padding: 0 14px; gap: 8px; font-size: 14px; }
.fk-m-tabelle .fk-m-knopf--leise { padding: 0 4px; }
.fk-m-tabelle .fk-m-knopf--icon { min-width: var(--mg-hoehe-klein); padding: 0; }
.fk-m-tabelle .fk-m-knopf .fk-m-icon { width: 18px; height: 18px; }
/* Knopfreihe direkt unter einer Tabelle: nicht an der letzten Linie kleben */
.fk-m-tabelle-huelle + .fk-m-aktionen { margin-top: 16px; }
/* Knopf in einer Feld-Zeile: so hoch wie das Feld daneben, unten bündig */
.fk-m-serie-zeile .fk-m-knopf,
.fk-m-filter .fk-m-knopf,
.fk-m-formular--2 > .fk-m-aktionen:not(.fk-m-breit) .fk-m-knopf { min-height: var(--mg-hoehe); }
.fk-m-knopf:hover { background: var(--c-bg); color: var(--c-gelb); }
.fk-m-knopf:focus-visible { outline-offset: 3px; }
.fk-m-knopf--google { border-color: #fff; }

/* ---------- Felder (Look der Warteliste: dunkles Feld, helle Unterkante) ---------- */
/* align-content: start – sonst verteilt das Grid Resthöhe (z. B. wenn das Nachbarfeld einen Hinweis
   hat) auf Label und Feld: Felder wurden 80 statt 48 px hoch und standen versetzt. */
.fk-m-feld { align-content: start; gap: 8px; }
.fk-m-feld__label { font: 400 14px/1.3 var(--f-text); color: var(--mg-text); }
input.fk-m-eingabe, select.fk-m-eingabe { min-height: var(--mg-hoehe); }
textarea.fk-m-eingabe { padding-block: 12px; }
.fk-m-feld__hinweis { color: var(--mg-text-leise); }
.fk-m-eingabe {
  border: 0; border-bottom: 1px solid var(--mg-text);
  color: var(--c-weiss); font: 400 16px/1.4 var(--f-text);
}
.fk-m-eingabe:hover { background: var(--mg-flaeche-3); }
.fk-m-eingabe:focus-visible { outline: 2px solid var(--c-gelb); outline-offset: 2px; border-bottom-color: var(--c-gelb); }
.fk-m-eingabe[readonly] { background: transparent; border-bottom-style: dashed; color: var(--mg-text-leise); }
/* Auge im Passwortfeld: volle Feldhöhe (über der Unterkante) statt 42 px mittig */
.fk-m-eingabe-gruppe__knopf { top: 0; bottom: 1px; right: 0; width: var(--mg-hoehe); height: auto; transform: none; color: var(--mg-text); }
.fk-m-eingabe-gruppe__knopf:hover, .fk-m-eingabe-gruppe__knopf[aria-pressed="true"] { color: var(--c-gelb); }
.fk-m-eingabe-vorsatz > span { min-width: 40px; background: #333; border: 0; border-bottom: 1px solid var(--mg-text); font-size: 16px; color: var(--mg-text-leise); }
/* Leise Zeile direkt unter einem Kartentitel: Abstand zum Inhalt darunter */
.fk-m-karte__titel + .fk-m-feld__hinweis { margin: -6px 0 18px; }

/* ---------- Hinweise ---------- */
.fk-m-hinweis { font-size: 14px; border-left-color: var(--mg-text-leise); }
.fk-m-hinweis > .fk-m-icon { color: var(--mg-text-leise); }
.fk-m-hinweis--info { border-left-color: var(--c-gelb); }
.fk-m-hinweis--info > .fk-m-icon { color: var(--c-gelb); }
.fk-m-hinweis--erfolg { border-left-color: var(--mg-gruen); }
.fk-m-hinweis--erfolg > .fk-m-icon { color: var(--mg-gruen); }
.fk-m-hinweis--fehler { border-left-color: var(--mg-rot); }
.fk-m-hinweis--fehler > .fk-m-icon { color: var(--mg-rot); }

/* ---------- Anmelden / Registrieren ---------- */
.fk-m-zugang__buehne { background: #111; }
.fk-m-zugang__form { background: var(--c-bg); }
.fk-m-titel { font: italic 400 clamp(28px, 2.2vw, 38px)/1.15 var(--f-head); color: var(--c-gelb); margin-bottom: 4px; }
.fk-m-unterzeile { font-size: 15px; color: var(--mg-text-leise); }
.fk-m-zugang__form .fk-m-formular { gap: 14px; }
.fk-m-oder { color: var(--mg-text-leise); }
.fk-m-oder::before, .fk-m-oder::after { background: var(--mg-linie-stark); }

/* Bühne: Inhalt kommt aus <template data-mitglieder="text-…"> (src/partials/mitglieder-texte.html) */
.fk-m-zugang__linien { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--c-gelb); opacity: .22; }
.fk-m-zugang__buehne > :not(.fk-m-zugang__linien) { position: relative; }
.fk-m-zugang__buehne--oben { justify-content: flex-start; }
.fk-m-zugang__kicker { margin: 0; font-size: 14px; color: var(--mg-text-leise); }
.fk-m-zugang__buehne .fk-m-zugang__titel { margin: 0; font: italic 700 clamp(34px, 3.4vw, 60px)/1.05 var(--f-head); color: var(--c-weiss); }
.fk-m-zugang__titel span { color: var(--c-gelb); }
.fk-m-zugang__liste { display: grid; gap: 10px; font-size: 15px; }
.fk-m-zugang__liste li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; }
.fk-m-zugang__liste .fk-m-icon { color: var(--c-gelb); margin-top: 1px; }
.fk-m-zugang__serien { display: flex; flex-wrap: wrap; gap: 8px; }
.fk-m-plakette {
  display: inline-flex; align-items: center; min-height: 26px; padding: 2px 10px;
  font: italic 400 13px/1.2 var(--f-head); letter-spacing: .02em; white-space: nowrap;
}
.fk-m-plakette--lmu { background: var(--mg-lmu); color: #1a1a1a; }
.fk-m-plakette--acc { background: var(--mg-acc); color: #fff; }
.fk-m-plakette--endu { background: var(--mg-endu); color: #1a1a1a; }

/* ---------- Konto: Seitenleiste ---------- */
.fk-m-leiste { position: sticky; top: calc(var(--header-h) + 20px); }
.fk-m-avatar { color: var(--c-bg); background: var(--c-gelb); font: italic 700 20px/1 var(--f-head); }
.fk-m-avatar--gross { font-size: 32px; }
.fk-m-person__name { font: italic 400 17px/1.25 var(--f-head); color: var(--c-weiss); }
.fk-m-menue a, .fk-m-menue button { color: var(--mg-text); font: 400 15px/1.3 var(--f-text); transition: background-color .2s ease, color .2s ease; }
.fk-m-menue a::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: var(--c-gelb); transform: scaleY(0); transition: transform .25s ease; }
.fk-m-menue a:hover, .fk-m-menue button:hover { background: var(--mg-flaeche); color: var(--c-weiss); }
.fk-m-menue a[aria-current="page"] { color: var(--c-gelb); font-weight: 700; box-shadow: none; }
.fk-m-menue a[aria-current="page"]::before { transform: scaleY(1); }
.fk-m-menue__abmelden button { color: var(--mg-text-leise); }

/* ---------- Konto: Inhalt ---------- */
.fk-m-kopf__titel { font: italic 400 clamp(30px, 2.5vw, 48px)/1.15 var(--f-head); color: var(--c-gelb); }
.fk-m-karte__titel { font: italic 400 clamp(19px, 1.25vw, 24px)/1.25 var(--f-head); color: var(--c-weiss); margin-bottom: 14px; }
.fk-m-kopf__kicker, .fk-m .fk-m-menue__titel { line-height: 1.4; }
/* Zwei Spalten wie im Entwurf: links „Deine Angaben“, rechts später die Team-Seite */
.fk-m-profil { max-width: none; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
.fk-m-foto { align-items: start; }
.fk-m-aufklapper > summary:focus-visible { outline: 2px solid var(--c-gelb); outline-offset: 2px; }

/* ---------- Verwaltung (Mitglieder, Rollen & Rechte) – Bausteine aus Dennis' Entwurf ---------- */
.fk-m-knopf--klein { font-size: 14px; }
.fk-m-knopf--zweit { color: var(--c-weiss); border-color: var(--mg-linie-stark); }
.fk-m-knopf--zweit:hover { background: transparent; color: var(--c-gelb); border-color: var(--c-gelb); }
.fk-m-knopf--leise { color: var(--mg-text); }
.fk-m-knopf--leise:hover { color: var(--c-gelb); }
.fk-m-knopf--gefahr { color: var(--mg-rot); border-color: rgba(255,122,107,.6); }
.fk-m-knopf--gefahr:hover { background: #d33a2c; color: var(--c-weiss); border-color: #d33a2c; }
.fk-m-auswahl { background-color: var(--mg-flaeche-2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6.5 9.5 5.5 5.5 5.5-5.5' fill='none' stroke='%23f0f0f0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.fk-m-auswahl option { background: #2c2c2c; }

/* Häkchen: eigene Optik, echtes input bleibt bedienbar */
.fk-m-haken { grid-template-columns: 22px minmax(0, 1fr); gap: 12px; line-height: 1.45; }
.fk-m-haken input {
  appearance: none; -webkit-appearance: none; display: grid; place-items: center; width: 22px; height: 22px; margin: 1px 0 0;
  border: 1.5px solid var(--mg-text); background: var(--mg-flaeche-2); transition: background-color .2s ease, border-color .2s ease;
}
.fk-m-haken input:checked { background: var(--c-gelb) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.3 4.3L19 7' fill='none' stroke='%231a1a1a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; border-color: var(--c-gelb); }
.fk-m-haken input:disabled { opacity: .55; }
.fk-m-haken input:focus-visible { outline: 2px solid var(--c-gelb); outline-offset: 3px; }
.fk-m-haken small { color: var(--mg-text-leise); }

/* Tabelle */
.fk-m-tabelle { font: 400 15px/1.4 var(--f-text); color: var(--mg-text); }
.fk-m-tabelle th { font: 700 12px/1.3 var(--f-text); letter-spacing: .1em; color: var(--mg-text-leise); border-bottom-color: var(--mg-linie-stark); }
.fk-m-tabelle td { border-bottom-color: var(--mg-linie); }
.fk-m-tabelle tbody tr:nth-child(even) { background: #1f1f1f; }
.fk-m-tabelle tbody tr:hover { background: var(--mg-flaeche-2); }
.fk-m-tabelle__name { font: italic 400 16px/1.25 var(--f-head); color: var(--c-weiss); }
.fk-m-person-link:hover .fk-m-tabelle__name { color: var(--c-gelb); text-decoration: none; }
.fk-m-avatar--klein { font-size: 12px; }
.fk-m-leer { background: var(--mg-flaeche); color: var(--mg-text-leise); }

/* Status und Rollen: nie nur über Farbe – immer mit Wort */
.fk-m-status, .fk-m-rolle { font: 700 13px/1.2 var(--f-text); padding: 2px 10px 2px 8px; min-height: 26px; }
.fk-m-status--aktiv { color: var(--mg-gruen); }
.fk-m-status--offen { color: var(--c-gelb); }
.fk-m-status--gesperrt { color: var(--mg-rot); }
.fk-m-rolle { color: var(--mg-text); border-color: var(--mg-linie-stark); font-weight: 400; }
.fk-m-rolle--admin { background: var(--c-gelb); border-color: var(--c-gelb); color: var(--c-bg); font-weight: 700; }

/* Angaben (wie Lizenz-Daten im Entwurf) */
.fk-m-daten { font-size: 14px; gap: 6px 14px; }
.fk-m-daten dt { color: var(--mg-text-leise); }
.fk-m-daten dd { color: var(--c-weiss); }
.fk-m-daten--untereinander dt { color: var(--c-weiss); }
.fk-m-daten--untereinander dd { color: var(--mg-text-leise); }

.fk-m-einladen > summary { color: var(--c-weiss); }
.fk-m-einladen > summary .fk-m-icon { color: var(--c-gelb); }
/* Gelbe Oberkante 3 px ohne dickeren Rahmen – sonst sitzt die Admin-Karte 2 px tiefer als ihre Nachbarn */
.fk-m-rolle-karte--admin { border-top-color: var(--c-gelb); box-shadow: inset 0 2px 0 var(--c-gelb); }
/* Mitglieder-Suche: Das Grund-CSS definiert .fk-m-filter zweimal (Suche als Raster, Vorlagen als
   Knopfleiste) – die zweite Regel gewinnt, die Suche schrumpfte auf 200 px. Hier gilt wieder das Raster. */
form.fk-m-filter { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; margin: 0 0 20px; }
/* Status in Angaben-Listen darf umbrechen (sonst ragt „Noch nicht hochgeladen“ am Handy aus der Karte) */
.fk-m-daten .fk-m-status { white-space: normal; }
/* Aufklapper: Symbol und Text nebeneinander statt untereinander (Warteliste, Team-Seite) */
.fk-m-aufklapper > summary > span { display: inline-flex; align-items: center; gap: 10px; }
.fk-m-aufklapper > summary > span > .fk-m-icon { color: var(--c-gelb); }
/* Aufklapper als Karte: schmaler Balken statt 96 px, Abstand kommt vom Stapel */
.fk-m-karte.fk-m-aufklapper { padding-block: 0; }
.fk-m-karte.fk-m-aufklapper > summary { min-height: 64px; }
.fk-m-stapel > .fk-m-aufklapper { margin-top: 0; }
.fk-m-aktionen--leiste { background: linear-gradient(to top, var(--c-bg) 70%, rgba(26,26,26,0)); }

/* ---------- Lizenzen – nach Dennis' Entwurf (lizenzen.html) ---------- */
.fk-m-reiter { border-bottom-color: var(--mg-linie-stark); }
.fk-m-reiter__knopf { font: italic 400 16px/1.2 var(--f-head); color: var(--mg-text-leise); }
.fk-m-reiter__knopf:hover, .fk-m-reiter__knopf[aria-current="page"] { color: var(--c-weiss); }
.fk-m-reiter__knopf::after { background: var(--c-gelb); }
.fk-m-lizenz { background: var(--mg-flaeche); border-color: var(--mg-linie); }
.fk-m-lizenz__serie { font: italic 700 22px/1.05 var(--f-head); }
.fk-m-lizenz__art { font: 700 12px/1.3 var(--f-text); }
.fk-m-lizenz .fk-m-daten dd { font-variant-numeric: tabular-nums; }
.fk-m-saison__name { font: italic 400 16px/1.25 var(--f-head); color: var(--c-weiss); }
.fk-m-saison__serie { font: italic 400 13px/1.2 var(--f-head); letter-spacing: .02em; }
.fk-m-saison-neu > summary { color: var(--c-weiss); }
.fk-m-saison-neu > summary .fk-m-icon:first-child { color: var(--c-gelb); }
.fk-m-produkt .fk-m-karte__titel .fk-m-icon { color: var(--c-gelb); }
.fk-m-eingabe[type="color"] { background: var(--mg-flaeche-2); padding: 8px 10px; }
/* Serien-Zeile: Farbfläche und „Livery“-Haken auf Feldhöhe, Haken mittig zum Feld */
.fk-m-serie-zeile__farbe { height: var(--mg-hoehe); }
.fk-m-serie-zeile .fk-m-serie-zeile__livery { align-self: end; min-height: var(--mg-hoehe); align-items: center; }
.fk-m-serie-zeile__livery input { margin: 0; }
.fk-m-fahrer-zeile__nr { height: var(--mg-hoehe); }
.fk-m-textfeld { border: 0; border-bottom: 1px solid var(--mg-text); }

/* ---------- Lizenz kaufen – nach Dennis' Entwurf (Reiter „Lizenz kaufen“) ---------- */
.fk-m-schritte li { font: 400 14px/1.3 var(--f-text); color: var(--mg-text-leise); border-top-color: var(--mg-linie-stark); }
.fk-m-schritte li::before { font: 700 12px/1 var(--f-text); }
.fk-m-schritt { font: italic 400 clamp(20px, 1.5vw, 26px)/1.2 var(--f-head); color: var(--c-weiss); }
.fk-m-schritt__nr { font: italic 700 15px/1 var(--f-head); }
/* Zwei Karten nebeneinander statt drei à 200 px – Preise brachen um („9,00 / €“), Texte wurden Säulen */
.fk-m-wahl-raster { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.fk-m-wahl__alt { white-space: nowrap; }
.fk-m-wahl { background: var(--mg-flaeche); border-color: var(--mg-linie-stark); transition: border-color .2s ease, background-color .2s ease; }
.fk-m-wahl:hover { border-color: var(--mg-text); }
.fk-m-wahl:has(input:checked) { border-color: var(--c-gelb); background: #2a2718; box-shadow: inset 0 0 0 1px var(--c-gelb); }
.fk-m-wahl input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 1px 0 0; border: 1.5px solid var(--mg-text); border-radius: 50%; background: var(--mg-flaeche-2); cursor: pointer; }
.fk-m-wahl input:checked { background: var(--c-bg); border-color: var(--c-gelb); box-shadow: inset 0 0 0 4px var(--c-bg), inset 0 0 0 11px var(--c-gelb); }
.fk-m-wahl input:focus-visible { outline: 2px solid var(--c-gelb); outline-offset: 3px; }
.fk-m-wahl__titel { font: italic 400 17px/1.3 var(--f-head); color: var(--c-weiss); }
.fk-m-wahl__preis { font: italic 700 24px/1.2 var(--f-head); color: var(--c-gelb); }
.fk-m-wahl__text { color: var(--mg-text-leise); }
.fk-m-wahl__text strong { color: var(--mg-text); }
/* Treue-Rabatt: alter Preis leise (ohne zusätzliche Deckkraft), Rabatt-Satz gelb */
.fk-m-wahl__alt { color: var(--mg-text-leise); opacity: 1; }
.fk-m-wahl__text .fk-m-wahl__treue { color: var(--c-gelb); }
.fk-m-segment { border-color: var(--mg-linie-stark); }
.fk-m-segment label { min-height: var(--mg-hoehe); }
.fk-m-segment label + label { border-left-color: var(--mg-linie-stark); }
.fk-m-segment label:has(input:checked) { background: var(--c-gelb); color: var(--c-bg); }
.fk-m-eltern { background: var(--mg-flaeche); border-left-color: var(--c-gelb); }
.fk-m-bestellung__zeile { color: var(--c-weiss); border-bottom-color: var(--mg-linie); }
.fk-m-bestellung__gesamt span { color: var(--mg-text-leise); }
.fk-m-bestellung__gesamt strong { font: italic 700 clamp(30px, 2.4vw, 40px)/1.1 var(--f-head); color: var(--c-gelb); }
.fk-m-bestellung { top: calc(var(--header-h) + 20px); }

@media (max-width: 1180px) {
  .fk-m-profil { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1000px) {
  .fk-m-leiste { position: static; }
  .fk-m-avatar { width: 44px; height: 44px; font-size: 16px; }
  .fk-m-avatar--gross { width: 96px; height: 96px; font-size: 32px; }
  .fk-m-menue a::before { left: 8px; right: 8px; top: auto; bottom: -1px; width: auto; height: 2px; transform: scaleX(0); }
  .fk-m-menue a[aria-current="page"]::before { transform: scaleX(1); }
}
@media (max-width: 860px) {
  .fk-m-zugang__liste { display: none; }
}
@media (max-width: 760px) {
  form.fk-m-filter { grid-template-columns: minmax(0, 1fr); }
  form.fk-m-filter .fk-m-knopf { justify-self: start; }
  /* Serien-Zeile: Name neben der Farbfläche, darunter Kürzel | Farbe, dann Livery und Knöpfe.
     (Das Grund-CSS setzt das Kürzel sonst in die 40-px-Spalte der Farbfläche.) */
  .fk-m-serie-zeile { grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
  .fk-m-serie-zeile > .fk-m-feld:not(.fk-m-feld--klein) { grid-column: 2 / -1; }
  .fk-m-serie-zeile > .fk-m-feld + .fk-m-feld--klein { grid-column: 1 / 3; }
  .fk-m-serie-zeile > .fk-m-feld--klein + .fk-m-feld--klein { grid-column: 3; }
  .fk-m-serie-zeile .fk-m-serie-zeile__livery { grid-column: 1 / -1; min-height: 0; }
  .fk-m-serie-zeile .fk-m-aktionen { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .fk-m-menue a, .fk-m-menue a::before { transition: none; }
}

/* ---------- Team-Bereich: Text-Vorlagen – nach Dennis' Entwurf (vorlagen.html) ---------- */
.fk-m-filter__knopf { min-height: var(--mg-hoehe-klein); padding: 0 14px; border-color: var(--mg-linie-stark); border-radius: 0; color: var(--mg-text); }
/* Karten einer Reihe gleich hoch, „Geändert … / Kopieren“ immer unten bündig */
.fk-m-vorlagen { align-items: stretch; }
.fk-m-vorlage { grid-template-rows: auto auto 1fr; }
.fk-m-vorlage__fuss { align-self: end; }
.fk-m-filter__knopf:hover { border-color: var(--mg-text); }
.fk-m-filter__knopf[aria-current="true"] { background: var(--c-weiss); border-color: var(--c-weiss); color: var(--c-bg); }
.fk-m-vorlage__titel { font: italic 400 18px/1.25 var(--f-head); color: var(--c-weiss); }
.fk-m-vorlage__text mark { background: rgba(255, 197, 37, .18); color: var(--c-gelb); }

/* ---------- Team-Lizenz (Endu) – Titel wie im Entwurf ---------- */
.fk-m-bedingt__titel { font: italic 400 16px/1.3 var(--f-head); color: var(--c-gelb); }

/* ---------- Team-Bereich: Briefing – nach Dennis' Entwurf (briefing.html) ---------- */
.fk-m-reiter__punkt { border-radius: 0; transform: skewX(-12deg); }
.fk-m-briefing__stand strong { color: var(--c-weiss); }
.fk-m-fortschritt { height: 8px; background: #3a3a3a; border-radius: 0; }
.fk-m-fortschritt__balken { background: var(--c-gelb); }
.fk-m-fortschritt--fertig .fk-m-fortschritt__balken { background: var(--mg-gruen); }
.fk-m-abschnitt { border: 1px solid var(--mg-linie); background: var(--mg-flaeche); }
.fk-m-abschnitt > summary { padding: 12px 16px; background: var(--mg-abschnitt, var(--c-gelb)); color: var(--mg-abschnitt-text, var(--c-bg)); }
.fk-m-abschnitt__titel { font: italic 700 17px/1.2 var(--f-head); letter-spacing: .04em; }
.fk-m-abschnitt[data-fk-abschnitt="ligaleitung"] { --mg-abschnitt: #ffc525; --mg-abschnitt-text: #1a1a1a; }
.fk-m-abschnitt[data-fk-abschnitt="rennleitung"] { --mg-abschnitt: #ba0000; --mg-abschnitt-text: #ffffff; }
.fk-m-abschnitt[data-fk-abschnitt="rennkommission"] { --mg-abschnitt: #6692e7; --mg-abschnitt-text: #1a1a1a; }
.fk-m-abschnitt[data-fk-abschnitt="stream"] { --mg-abschnitt: #e6e6e6; --mg-abschnitt-text: #1a1a1a; }
/* Spaltenbreiten inkl. Innenabstand (border-box): „ERLEDIGT“ passt in den Kopf, FZG-NR. bleibt einzeilig */
.fk-m-tabelle--checkliste .fk-m-briefing__pos { width: 72px; }
.fk-m-tabelle--checkliste th:nth-child(3) { width: 112px; }
.fk-m-tabelle--checkliste .fk-m-briefing__haken { width: 112px; }
.fk-m-tabelle--checkliste td.fk-m-briefing__pos { font: italic 700 15px/1 var(--f-head); color: var(--mg-text-leise); }
.fk-m-fzg-nr { background: var(--c-weiss); color: var(--c-bg); border: 0; border-radius: 0; font: italic 700 15px/1 var(--f-head); }
.fk-m-tabelle--checkliste tr:has(input:checked) td:not(.fk-m-briefing__haken) { opacity: 1; color: #9a9a9a; }
.fk-m-tabelle--checkliste tr:has(input:checked) .fk-m-fzg-nr { background: #6e6e6e; color: #fff; }
.fk-m-haken-zelle input { accent-color: var(--c-gelb); }
/* Briefing bearbeiten: Info-Feld einzeilig so hoch wie die übrigen Felder der Zeile (war 66 px) */
.fk-m-tabelle--briefing-form .fk-m-briefing__info-eingabe { height: var(--mg-hoehe); min-height: var(--mg-hoehe); padding-block: 12px; }

/* Menüleiste auf schmalen Fenstern: Scrollbalken schmal und dunkel statt Windows-Weiß */
.fk-m-menue { scrollbar-width: thin; scrollbar-color: var(--mg-linie-stark) transparent; }