/*
 * app-shell-redesign.css — Phase B ADM Shell
 * ============================================
 * Geladen nur auf /app/* Routen (isAppPath, Site.astro).
 * Laedt nach app-shell.css und redesign.css — wirkt als Override-Layer.
 *
 * PHILOSOPHIE:
 *   Kein Renderer-Code wird angefasst. Kein JSON. Keine Routen.
 *   Wir tauschen die Hülle, nicht den Inhalt.
 *   Der ADM-Workspace saß bisher in einer Card-Hülle die aus dem
 *   öffentlichen VDAN-Layout stammt und nie für ADM redesigned wurde.
 *   Phase B macht den Workspace zur ersten Ebene.
 *
 * RUECKSPRUNG:
 *   git checkout pre-phase-b
 *   (Tag gesetzt vor Beginn Phase B, 2026-05-23)
 *
 * AENDERUNGSPROTOKOLL:
 *   2026-05-23 — Phase B initiiert nach Claude Design Spec
 *                Spec: /Users/michaellauenroth/Downloads/spec.html
 *   Autor: Claude Code (Michael Lauenroth)
 */


/* ═══════════════════════════════════════════════════════════════════
   FCP ORANGE — Akzentfarbe ersetzt Gold-Fallbacks
   ───────────────────────────────────────────────────────────────────
   Alle var(--rd-gold, #d46a20) Fallbacks werden durch FCP Orange
   ersetzt. Definiert als Custom Properties damit künftige Änderungen
   an einem Ort passieren. FCP Orange: #d46a20 (--fcp-o aus main.css).
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --rd-gold:        #d46a20;                   /* FCP Orange, war #b79a63 */
  --rd-gold-lo:     #c05818;                   /* gemäßigt/text, war #9c8148 */
  --rd-gold-hi:     #bf5414;                   /* hover/pressed, war #a08842 */
  --rd-gold-soft:   rgba(212, 106, 32, .12);   /* Tint, war rgba(183,154,99,.12) */
  --rd-gold-softer: rgba(212, 106, 32, .06);   /* Hauch, war rgba(183,154,99,.06) */
}

/* ═══════════════════════════════════════════════════════════════════
   SCHRITT 2 — Astro-Card neutralisieren
   ───────────────────────────────────────────────────────────────────
   WAS WAR: <Site containerClass="container--admin-wide"> rendert
            eine <section class="card"><div class="card__body">.
            Diese Card erzeugte: sichtbare Border, Background (#0b1018),
            Padding 1.5rem und Box-Shadow um den gesamten ADM-Workspace.
            Ergebnis: "Card in Card in Card" — drei Tiefen gleichzeitig.

   WARUM GEAENDERT: Die Astro-Card ist für den öffentlichen VDAN-Auftritt
            gebaut. Für den ADM-Workspace ist sie eine leere Hülle die
            nur visuellen Lärm erzeugt. Phase B macht den Workspace selbst
            zur ersten sichtbaren Ebene.

   WAS BLEIBT: Das HTML-Element bleibt im DOM (kein JS-Bruch).
            Nur visuelle Eigenschaften werden entfernt.
   ═══════════════════════════════════════════════════════════════════ */

.container--admin-wide > section.card,
.container--admin-wide > section.card > .card__body {
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
  border-radius: 0;
}

/* App-Hintergrund auf /app/* Routen: warme Arbeitsfläche */
body[data-app-theme="fcp_tactical"] .container--admin-wide {
  background: var(--rd-bg);
  /* Platz fuer die schwebende Begehungsleiste (.fcpb-bar: position fixed,
     44px hoch, 16px ueber dem unteren Rand). Sie verdeckte bisher immer das
     unterste Element der Seite -- erst die letzte Tabellenzeile, seit dem
     Blaettern vom 09.09.2026 die Seitensteuerung, die damit unbedienbar war.
     Der Platz wird hier reserviert und nicht in der Leiste selbst geaendert:
     Begehungsdateien sind fuer den Bugfixer gesperrt (Klasse C). */
  padding-block-end: calc(76px + env(safe-area-inset-bottom, 0px));
}


/* ═══════════════════════════════════════════════════════════════════
   SCHRITT 5 — Navigation leise stellen
   ───────────────────────────────────────────────────────────────────
   WAS WAR: .admin-board__nav hatte Card-Optik:
            border: 1px solid var(--line), border-radius: 12px,
            background: rgba(255,255,255,.03), padding: 8px.
            Optisch: eine Card als Nav-Container mit 11 Button-Items
            die jeweils eigene Border und Background hatten.
            sticky top: 84px — dieser Wert stammt aus dem öffentlichen
            Layout-Header (VDAN public header ~84px hoch).

   WARUM GEAENDERT: Navigation soll fluestern, nicht schreien.
            Der Button-Stapel-Look kommuniziert "Formular" statt
            "Navigation". Phase B: Rail mit Trennlinie statt Card,
            Links statt Buttons, Gold-Stripe für Aktiv-State.
            top: 18px weil der ADM-eigene Topbar schlanker ist.
   ═══════════════════════════════════════════════════════════════════ */

/* Spezifität 0,2,0 — schlägt app-shell.css (0,1,0) im gleichen Cascade-Slot */
body[data-app-theme="fcp_tactical"] .admin-board {
  grid-template-columns: 236px 1fr;
  gap: 0;
}

/* Ohne maskeneigene Navigation (die Sidebar fuehrt die Abschnitte) nimmt der
   Inhalt die volle Breite. Gleiche Spezifitaetsklasse wie die Regel darueber,
   damit die Entscheidung hier faellt und nicht in einer zweiten Ebene. */
body[data-app-theme="fcp_tactical"] .admin-board.fcp-adm-shell--nav-in-shell {
  grid-template-columns: 1fr;
}

body[data-app-theme="fcp_tactical"] .admin-board__nav {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--rd-line, rgba(var(--tint-rgb), 0.14));
  border-radius: 0;
  padding: 6px 16px 24px 0;
  top: 18px;
}

/* Spezifität 0,2,0 — schlägt app-shell.css .admin-nav-btn (0,1,0) */
body[data-app-theme="fcp_tactical"] .admin-nav-btn {
  border: 0;
  background: transparent;
  color: var(--rd-ink-2, #4a4e40);
  border-radius: 7px;
  min-height: 44px; /* Touch Target ≥ 44px (Gate B) */
  padding: 6px 12px;
  font-size: 13px;
  position: relative;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease;
}

body[data-app-theme="fcp_tactical"] .admin-nav-btn:hover {
  background: var(--rd-gold-softer, rgba(183, 154, 99, 0.06));
  color: var(--rd-ink, #2a2d24);
}

/* Navigationseintrag ohne Bauauftrag (Maskenvertrag setzt workspaceNav.items[].disabled,
   z. B. Maskenverwaltung: Versionen/Protokoll/Einstellungen — Bauplan B1 §6). Sichtbar,
   nicht klickbar, Grund im title-Tooltip. Generisch fuer jede Maske nutzbar. */
body[data-app-theme="fcp_tactical"] .admin-nav-btn--disabled,
body[data-app-theme="fcp_tactical"] .admin-nav-btn--disabled:hover {
  color: var(--rd-muted-soft, #9a9a86);
  cursor: not-allowed;
  background: transparent;
  opacity: 0.55;
}

/* WAS WAR: .is-active nutzte --accent-cool-soft (blaustichig, dunkel)
   WARUM: Gold-Soft passt zur Produktsprache — warm, nicht kuehltechnisch.
          Der 2px-Stripe links signalisiert Aktiv-Zustand ohne Fläche. */
body[data-app-theme="fcp_tactical"] .admin-nav-btn.is-active {
  background: var(--rd-gold-soft, rgba(183, 154, 99, 0.12));
  color: var(--rd-gold-lo, #c05818);
  font-weight: 500;
  border-color: transparent;
}

body[data-app-theme="fcp_tactical"] .admin-nav-btn.is-active::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--rd-gold, #d46a20);
  border-radius: 2px;
}


/* ═══════════════════════════════════════════════════════════════════
   SCHRITT 6 — Panels (admin-card) als primäre Card definieren
   ───────────────────────────────────────────────────────────────────
   WAS WAR: .admin-card hatte RGBA-Glass-Look:
            background: rgba(255,255,255,.03) — kaum sichtbar auf dunkel,
            border: 1px solid var(--line), border-radius: 12px,
            padding: 10px — Inhalt hatte kein eigenes Padding.
            Kollision: glass-dark-Card umschloss helle cream-Tabelle
            → zwei Farbsprachen prallten aufeinander.

   WARUM GEAENDERT: Das Panel soll die primäre Datenfläche sein.
            Weiss, klare Border, kein Padding nach aussen —
            das Innenleben (Form, Tabelle, Readonly) bringt eigenes
            Padding mit. Inline-Data-Table v2 sitzt jetzt in seinem
            natürlichen Habitat.
   ═══════════════════════════════════════════════════════════════════ */

.admin-card {
  background: var(--rd-surface-hi, #fff);
  border: 1px solid var(--rd-line, rgba(var(--tint-rgb), 0.14));
  border-radius: 10px;
  padding: 0;
  gap: 0;
}

/* Owner-Befund 07.09.2026 (Begehung, c89b633f): "Border und Radius und
   Padding lassen die maske billig aussehen. die seite ist nicht wie aus einem
   Guss. die Tabelle selbst sollte zur app gehören."
   Gemessen an club_settings_members: die Tabelle sass in article.admin-card
   mit 1px Rahmen, 12px Radius, aufgehelltem Hintergrund und zusaetzlichem
   Innenabstand aus admin-card__header/-content — eine abgesetzte Karte um
   etwas, das selbst schon eine Flaeche ist. Derselbe Fehlertyp wie 607c494d,
   nur eine Ebene tiefer: dort die Astro-Karte der Seite, hier die Karte des
   ADM-Renderers.
   Bewusst NUR fuer Panels, die eine Tabelle tragen (:has). Formular-Panels
   wie die Vereinsstammdaten behalten ihre Karte — dort traegt sie Bedeutung,
   weil mehrere Felder zusammengefasst werden. Das HTML bleibt unveraendert,
   nur die sichtbaren Eigenschaften fallen weg (gleiche Handschrift wie die
   Card-Neutralisierung in Schritt 2 weiter oben).

   NACHTRAG 08.09.2026: seit es eine zweite Ansicht gibt (Tabelle | Board,
   fcp-adm-qfm-shared-renderers.js wrapWithViewSwitch), haengt die Tabelle
   eine Ebene tiefer — im Inhalt steht dann .fcp-view-shell, und die Regel
   griff fuer die Maske Meldungen nicht mehr: die Karte war dort wieder da.
   Deshalb beide Formen, und nur diese beiden. */
.admin-card:has(> .admin-card__content > .qfp-table-wrap),
.admin-card:has(> .admin-card__content > .fcp-view-shell > .qfp-table-wrap) {
  background: transparent;
  border: 0;
  border-radius: 0;
}

.admin-card:has(> .admin-card__content > .qfp-table-wrap) > .admin-card__content,
.admin-card:has(> .admin-card__content > .fcp-view-shell > .qfp-table-wrap) > .admin-card__content {
  padding: 0;
}

.admin-card:has(> .admin-card__content > .qfp-table-wrap) > .admin-card__header,
.admin-card:has(> .admin-card__content > .fcp-view-shell > .qfp-table-wrap) > .admin-card__header {
  border-bottom: 0;
  padding: 0 0 8px;
}

.admin-card__header {
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--rd-line, rgba(var(--tint-rgb), 0.14));
}

/* WAS WAR: h3 in admin-card__header hatte ca. 17px — konkurrierte mit
            Section-h2 und Tabellen-h1 auf gleicher Aughöhe.
   WARUM: 13.5px Semibold als Panel-Titel ordnet sich unter dem
          Workspace-Header ein, ohne zu verschwinden. */
.admin-card__header h3 {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--rd-ink, #2a2d24);
  margin: 0;
}

/* WAS WAR: Section-Heading h2 war ~28px — zu dominant neben Tabellen-h1.
   WARUM: 15px mit Border-Bottom macht den Section-Header zum
          Cluster-Trenner, nicht zum konkurrierenden Titel. */
.qfp-section-heading h2 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--rd-ink, #2a2d24);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rd-line, rgba(var(--tint-rgb), 0.14));
  margin-bottom: 14px;
}

/* State-Badges: "Live" / "Vertrag offen" / "Vorschau" sind
   interne Entwickler-Indikatoren, kein Vereinsadmin braucht sie.
   Vollständig ausgeblendet — bleiben im DOM für Entwicklertools,
   sichtbar nur über DevTools oder falls ein künftiger Superadmin-
   Modus die Klasse .adm-devmode am root setzt.
   Spezifität: (0,2,0) — schlägt app-shell.css .admin-state-badge.is-live (0,2,0)
   da app-shell-redesign.css später geladen wird. */
.fcp-adm-shell .admin-state-badge {
  display: none;
}

/* Section-Wrapper: kein eigener Background mehr, nur Gap */
.admin-section.is-active {
  gap: 14px;
}


/* ═══════════════════════════════════════════════════════════════════
   SCHRITT 7 — Sticky-Offset-Patch
   ───────────────────────────────────────────────────────────────────
   WAS WAR: top: 84px / scroll-margin-top: 108px
            Diese Werte stammen aus dem öffentlichen VDAN-Layout-Header
            (Höhe ca. 60-84px) und wurden nie auf den ADM-Kontext
            angepasst. Im ADM-eigenen Topbar-Kontext ist der Offset
            deutlich kleiner.

   WARUM GEAENDERT: Mit dem schlankeren ADM-Topbar (54px) und
            dem Workspace-Header passt top: 18px.
            scroll-margin-top: 24px reicht für den Section-Wechsel.
   ═══════════════════════════════════════════════════════════════════ */

.admin-board__nav {
  top: 18px;
}

.admin-section {
  scroll-margin-top: 24px;
}


/* ═══════════════════════════════════════════════════════════════════
   SCHRITT 4 — Workspace-Header (page-level, vor dem admin-board)
   ───────────────────────────────────────────────────────────────────
   WAS WAR: Kicker + H1 + Beschreibung aus resolvedMask.header, statisch
   gerendert. Ein spaeterer Patch (weiter unten in dieser Datei) hatte
   Kicker/Beschreibung bereits per display:none stillgelegt und den
   Titel auf 16px verkleinert — zwei Regel-Ebenen fuer dieselbe Fluent,
   Titel blieb aber sichtbar und duplizierte die Topbar.

   KORREKTUR 31.08.2026 (Owner-Begehung): Kicker/H1/Beschreibung sind aus
   dem Markup der sechs Masken entfernt (natur-gewaesser, mitglieder-
   verwaltung, termine-v3, eventplaner-v3, mitgliederabrechnung,
   maskenverwaltung) — die Topbar fuehrt den Maskentitel. Diese Regel und
   ihr spaeterer Patch sind zu EINER Quelle zusammengefuehrt: der Header
   traegt jetzt nur noch den Vereins-Umschalter (falls vorhanden) und
   richtet ihn rechtsbuendig aus — keine zweite Regel-Ebene mehr.
   ═══════════════════════════════════════════════════════════════════ */

.adm-workspace-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 10px 0;
  min-height: 0;
}

.adm-workspace-header:empty {
  display: none;
}

/* Vereins-Umschalter: gemeinsamer Renderer fuer alle Masken mit Slot
   <div data-fcp-club-switch> (public/js/fcp-mask-page-loader.js).
   Diese Klassen waren bisher ungestylt — genau die Ursache des
   "Verein-Select-Versatz"-Befunds (Owner-Begehung 31.08.2026). */
.adm-workspace-header__club-switch,
.adm-workspace-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 100%;
  min-width: 0;
}

.adm-workspace-header__club-switch-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rd-muted, #7a7c68);
  flex: 0 0 auto;
}

.adm-workspace-header__club-switch-select {
  height: 36px;
  min-width: 0;
  max-width: 100%;
  width: min(240px, 100%);
  border: 1px solid var(--rd-line-strong, rgba(var(--tint-rgb), 0.28));
  border-radius: 9px;
  background: var(--rd-surface-hi, #ffffff);
  color: var(--rd-ink, #2a2d24);
  padding: 0 10px;
  font-size: 12.5px;
  font-family: inherit;
}

/* Owner-Grundsatz 04.09.2026: Touch-Zweig, damit iOS beim Fokus nicht zoomt. */
@media (pointer: coarse), (max-width: 899px) {
  .adm-workspace-header__club-switch-select {
    font-size: 16px;
  }
}

/* Owner-Entscheidung 08.09.2026 (Variante A): der Vereins-Umschalter sitzt
   im Kopf der Tabellenkarte statt in einer eigenen Leiste darueber.
   Die Kopfzeile ist bereits eine Flex-Zeile mit space-between
   (src/styles/app-shell.css .admin-card__header) — hier stehen deshalb nur
   die beiden Dinge, die dort fehlen und nur mit Umschalter gebraucht
   werden. Karten ohne Umschalter bleiben unveraendert. */

/* Die Grundregel richtet die Kopfzeile oben aus (align-items: flex-start),
   was zu einem 36 Pixel hohen Bedienelement nicht passt. Betrifft seit
   08.09.2026 den Umschalter Tabelle | Board. */
.admin-card__header:has(.fcp-view-switch) {
  align-items: center;
}

/* Diese Koepfe tragen oft keinen Titel (Panel- und Section-Titel sind gleich,
   der Renderer laesst die Ueberschrift dann weg). Bei einem einzigen Kind hat
   space-between nichts zu verteilen — ohne diese Zeile bliebe der Umschalter
   links kleben. */
.admin-card__header:has(.fcp-view-switch) > .admin-card__header-side {
  margin-left: auto;
}

/* Vereins-Umschalter in der Titelzeile der Tabelle (Owner-Befund 7d31d42f,
   zweiter Durchgang 08.09.2026: „unterhalb der Ueberschrift"). Die Titelzeile
   ist bereits eine Flex-Zeile mit space-between; hier steht nur, dass der
   Umschalter unten an der Zeile sitzt — also auf Hoehe der Beschreibung unter
   dem Namen der Tabelle, nicht neben der Ueberschrift. Label und Auswahlfeld
   behalten die Klassen des gemeinsamen Renderers, also dieselbe Gestaltung
   wie zuvor. */
.data-table-shell .title-row__side {
  /* Owner-Artboard 08.09.2026 („Kopf kompakt zusammenfuehren"): Umschalter
     und Hauptaktion stehen rechts in DERSELBEN Zeile wie der Titel. Vorher
     stand der Umschalter in einer eigenen Zeile darunter — das war der
     Zwischenstand vom Nachmittag, den das Artboard abgeloest hat. */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
  flex-wrap: wrap;
}

.data-table-shell .title-row__switch {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}


/* ═══════════════════════════════════════════════════════════════════
   DARK/LIGHT TOGGLE — bleibt für den Tabellen-Body intakt
   ───────────────────────────────────────────────────────────────────
   Die Inline-Data-Table v2 hat einen eigenen Dark/Light-Toggle.
   Dieser betrifft nur den Tabellen-Body — die Aussenwelt bleibt hell.
   Keine Überschreibung nötig — redesign.css handhabt das bereits
   via [data-rd-theme="dark"] innerhalb .is-redesign.
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   HOSTED-SHELL KRÜCKE — neutralisiert durch Card-Neutralisierung
   ───────────────────────────────────────────────────────────────────
   WAS WAR: .fcp-adm-shell--hosted nutzte negative margin
            (calc(-1 * var(--card-padding, 1.5rem))) um den ADM-Workspace
            aus der Astro-Card-Hülle herauszuzwingen.
            Das war eine Krücke weil die Card-Hülle nie entfernt wurde.

   JETZT: Die Card-Hülle ist transparent (Schritt 2).
          Die negative-margin-Krücke kann auf 0 gesetzt werden.
   ═══════════════════════════════════════════════════════════════════ */

.fcp-adm-shell--hosted {
  margin: 0;
}


/* ═══════════════════════════════════════════════════════════════════
   SCHRITT 3 — ADM Topbar (Phase B Step 3)
   ───────────────────────────────────────────────────────────────────
   WAS WAR: header.header war der öffentliche VDAN/FCP Siteheader —
            dunkel (#090d15 mit Blur), 60px hoch, sticky top:0.
            Auf /app/* Routen ist dieser Header fehl am Platz: er zeigt
            Login, Burger-Menü und öffentliche Links für einen
            bereits eingeloggten Admin-User.

   WARUM GEAENDERT: Phase B ersetzt ihn auf /app/* durch einen
            ADM-eigenen Topbar — 54px, hell (#fbf7ee), mit FCP-Brand,
            BETA-Badge, kontextbezogenen Breadcrumbs und User-Pill.
            Der alte Header bleibt im DOM (display:none ≠ removed),
            damit member-auth.js, notifications-center.js etc. weiter
            ihre Elemente finden können.

   ROLLBACK: git checkout pre-phase-b (Tag vor Phase B gesetzt)
   ═══════════════════════════════════════════════════════════════════ */

/* Alter Header: nur visuell entfernen — DOM bleibt für JS intakt */
body[data-app-theme="fcp_tactical"] header.header {
  display: none;
}

/* Footer: auf /app/* nicht relevant — entfernen */
body[data-app-theme="fcp_tactical"] footer.site-footer {
  display: none;
}

/* Main: kein top-padding nötig — Topbar ist im Flow, schiebt Content selbst runter */
body[data-app-theme="fcp_tactical"] .main {
  padding-top: 0;
}

/* ADM Topbar — Layout
   UMBAU 31.08.2026 (Portalmenue, Owner-GO): Die Marke sitzt jetzt im Kopf der
   Sidebar, nicht mehr im Topbar. Der Topbar traegt Menue-Knopf (Handy),
   Breadcrumb "Gruppe / Maske" und die Nutzerwerkzeuge — hell auf Grundfarbe,
   wie im Artboard PortalmenueWeb.dc.html. Geaendert wurde die Quelle, es liegt
   keine zweite Regel-Ebene darueber. */
.adm-topbar {
  height: 56px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 14px;
  position: sticky;
  top: 0;
  z-index: 100;
  justify-content: space-between;
}

/* Spacer: schiebt die Nutzerwerkzeuge nach rechts */
.adm-topbar__sp {
  flex: 1;
}

/* Utility-Bereich rechts */
.adm-topbar__util {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 0 0 auto;
}

.adm-topbar__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}

/* User-Avatar: FCP-Orange-Kreis mit Initialen — eigenständige Warmfarbe,
   bewusst nicht an --text/--bg gekoppelt (Badge, kein Fließtext). */
.adm-topbar__av {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(212, 106, 32, 0.12);
  color: var(--rd-gold-lo, #c05818);
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  font-style: normal;
}

.adm-topbar__username {
  font-size: 12.5px;
  color: var(--text);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adm-topbar__chevron {
  color: var(--muted);
  font-size: 10px;
}

/* ═══════════════════════════════════════════════════════════════════
   SCHRITT 7 PATCH — Sticky-Offsets neu kalibriert auf Topbar-Höhe
   ───────────────────────────────────────────────────────────────────
   WAS WAR (Schritt 7): top: 18px — kalibriert auf Szenario ohne Topbar.
   JETZT: Topbar ist 56px hoch (Portalmenue-Umbau 31.08.2026). Nav soll
          18px Luft unter dem Topbar haben → top: 56px + 18px = 74px.
          scroll-margin-top: Topbar-Höhe + Section-Gap = ~80px.
   Höhere Spezifizität (body[...]) überschreibt Schritt 7 korrekt.
   ═══════════════════════════════════════════════════════════════════ */

body[data-app-theme="fcp_tactical"] .admin-board__nav {
  top: 74px;
}

body[data-app-theme="fcp_tactical"] .admin-section {
  scroll-margin-top: 80px;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE OVERRIDE — Sidebar bleibt bei schmalen Viewports
   ───────────────────────────────────────────────────────────────────
   app-shell.css bricht bei max-width: 1180px das admin-board auf
   grid-template-columns: 1fr auf und gibt der Nav 2 Spalten.
   FCP Admin Shell ist kein Mobile-Tool — wir halten die Sidebar-
   Struktur auch mit DevTools-Panel oder auf Laptops mit ~900px.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1180px) {
  body[data-app-theme="fcp_tactical"] .admin-board {
    grid-template-columns: 200px 1fr;
    gap: 0;
  }

  body[data-app-theme="fcp_tactical"] .admin-board__nav {
    position: sticky;
    top: 74px;
    max-height: calc(100dvh - 120px);
    grid-template-columns: 1fr; /* 1-spaltig — kein Mehrspalten-Responsive */
  }
}


/* ═══════════════════════════════════════════════════════════════════
   ADM NAV ENHANCER — Gruppen-Labels und Icons
   ───────────────────────────────────────────────────────────────────
   Erzeugt von adm-nav-enhancer.js nach dem ADM-Renderer-Run.
   Renderer bleibt unangetastet — wir ergänzen nur visuell.
   ═══════════════════════════════════════════════════════════════════ */

/* Gruppen-Label (z. B. "CLUBSETTINGS", "OPERATIV", "SYSTEM") */
.adm-nav__group {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rd-muted-soft, #9b9c88);
  padding: 14px 12px 6px 12px;
  user-select: none;
  grid-column: 1 / -1; /* Volle Breite — unabhängig von Nav-Grid-Spalten */
}

.adm-nav__group:first-child {
  padding-top: 6px;
}

/* Icon vor dem Navigationseintrag */
.adm-nav__ic {
  width: 16px;
  display: inline-grid;
  place-items: center;
  font-size: 11px;
  color: var(--rd-muted-soft, #9b9c88);
  margin-right: 8px;
  flex-shrink: 0;
}

/* Aktiver Nav-Button: Icon erbt Gold */
body[data-app-theme="fcp_tactical"] .admin-nav-btn.is-active .adm-nav__ic {
  color: var(--rd-gold-lo, #c05818);
}

/* Nav-Buttons als Flex für Icon-Ausrichtung */
body[data-app-theme="fcp_tactical"] .admin-nav-btn {
  display: flex;
  align-items: center;
}


/* ═══════════════════════════════════════════════════════════════════
   ADM TABELLE — Compact-Dichte
   ───────────────────────────────────────────────────────────────────
   WAS WAR: redesign.css Standard-Dichte: --rd-row-h: 40px,
            --rd-font: 14px, --rd-cell-px: 14px.
   WARUM GEAENDERT: Im ADM-Workspace stehen viele Datenspalten.
            Compact-Zeilen (32px) erlauben mehr Daten auf einmal
            und entsprechen dem Spec-Look.
   METHODE: CSS-Variable-Override auf .is-redesign im ADM-Kontext.
            Kein JS, kein density-Prop, kein Renderer-Eingriff.
   ═══════════════════════════════════════════════════════════════════ */

/* Tabellen-Kompaktheit: alle data-table-shell auf /app/* Routen.
   app-shell-redesign.css ist der Scope-Gate — diese Datei laed
   nur auf isAppPath-Routen. body[fcp_tactical] hier ist sicher. */
body[data-app-theme="fcp_tactical"] .is-redesign,
body[data-app-theme="fcp_tactical"] .data-table-shell {
  --rd-row-h:    32px;
  --rd-cell-px:  10px;
  --rd-font:     12.5px;
}


/* ═══════════════════════════════════════════════════════════════════
   ADM WORKSPACE — Compact-Rhythmus für ALLE Komponenten
   ───────────────────────────────────────────────────────────────────
   WAS WAR: --control-height: 48px (ui-standards.css), Scope: .admin-board.
            Dieser enge Scope brach die Grundregel:
            "JEDE inline-data-table und JEDE QFM-Komponente muss
             optisch identisch sein — egal auf welcher Seite."
            ADM-Mask, inline-data-table, QFM-Felder und direkte
            HTML-Inputs auf /app/* Routen können ALLE unabhängig
            voneinander gerendert werden. Nur ein gemeinsamer Scope
            garantiert visuelle Konsistenz.

   LOESUNG: CSS-Variable --control-height auf .container--admin-wide
            (dem einzigen Layout-Wrapper, der ALLE /app/* Inhalte
            umschliesst). Alle Komponenten erben automatisch.

   SCOPE-ENTSCHEIDUNG:
     .container--admin-wide  ← korrekt: nur /app/* Seiten
     body[fcp_tactical]      ← zu breit: trifft statische Seiten
     .admin-board            ← zu eng: nur ADM-Renderer-Root
   ═══════════════════════════════════════════════════════════════════ */

/* 1. CSS-Variable global für alle /app/* Inhalte.
      app-shell-redesign.css laed NUR auf isAppPath-Routen —
      öffentliche Seiten (Login, Kontakt, Datenschutz) sind
      nicht betroffen, auch wenn sie data-app-theme="fcp_tactical"
      tragen. Diese Datei ist der Scope-Gate. */
body[data-app-theme="fcp_tactical"] {
  --control-height: 34px;
  --form-control-height: 34px;
  /* Owner-Befund 09.09.2026: die Textknoepfe standen trotz dieser Zeile auf
     48px, die Icon-Knoepfe daneben auf 34px. Ursache: --lib-btn-height wird
     in main.css auf :root aus --control-height abgeleitet und friert dort
     auf dem :root-Wert (48px) ein -- die Umstellung hier erreicht die
     abgeleitete Variable nie. Sie wird deshalb im selben Kontext neu
     berechnet. */
  --lib-btn-height: var(--control-height);
}

/* Touch behaelt das groessere Ziel (Gate B, >=44px): am Finger ist 34px zu
   klein, am Zeiger sind 48px zu gross. */
@media (pointer: coarse) {
  body[data-app-theme="fcp_tactical"] {
    --control-height: 44px;
    --form-control-height: 44px;
    --lib-btn-height: var(--control-height);
  }
}

/* 2. Direkte Input-Overrides — gilt für Fangliste, ADM, QFM,
      inline-data-table, alle Seiten unter /app/* gleichermassen */
/* Ausnahme wie in main.css: die Atome des Designsystems tragen ihre
   eigenen Masse (44 px Desktop / 48 px Touch) und werden hier an der
   Quelle ausgenommen statt später zurückgeholt. */
body[data-app-theme="fcp_tactical"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):where(:not(.fcp-control):not(.fcp-textarea)),
body[data-app-theme="fcp_tactical"] select:where(:not(.fcp-control)),
body[data-app-theme="fcp_tactical"] textarea:where(:not(.fcp-control):not(.fcp-textarea)) {
  min-height: 34px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 13px;
}

/* Owner-Grundsatz 04.09.2026: Ein Input-Fokus darf am Handy nie zoomen — iOS zoomt unter 16 px. */
@media (pointer: coarse), (max-width: 899px) {
  body[data-app-theme="fcp_tactical"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):where(:not(.fcp-control):not(.fcp-textarea)),
  body[data-app-theme="fcp_tactical"] select:where(:not(.fcp-control)),
  body[data-app-theme="fcp_tactical"] textarea:where(:not(.fcp-control):not(.fcp-textarea)) {
    font-size: 16px;
  }
}

/* 3. Inline-Data-Table Editoren: noch kompakter (innerhalb Tabellenzelle) */
body[data-app-theme="fcp_tactical"] .data-table__editor-cell input:not([type="checkbox"]):not([type="radio"]),
body[data-app-theme="fcp_tactical"] .data-table__editor-cell select,
body[data-app-theme="fcp_tactical"] .data-table__editor-cell textarea,
body[data-app-theme="fcp_tactical"] .cell-input,
body[data-app-theme="fcp_tactical"] .cell-select {
  min-height: 28px;
  padding-top: 3px;
  padding-bottom: 3px;
  font-size: 12.5px;
}

/* Owner-Grundsatz 04.09.2026: Touch-Zweig, damit iOS beim Fokus nicht zoomt. */
@media (pointer: coarse), (max-width: 899px) {
  body[data-app-theme="fcp_tactical"] .data-table__editor-cell input:not([type="checkbox"]):not([type="radio"]),
  body[data-app-theme="fcp_tactical"] .data-table__editor-cell select,
  body[data-app-theme="fcp_tactical"] .data-table__editor-cell textarea,
  body[data-app-theme="fcp_tactical"] .cell-input,
  body[data-app-theme="fcp_tactical"] .cell-select {
    font-size: 16px;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   ADM TOPBAR — Burger entfallen (31.08.2026, Portalmenue-Umbau)
   ───────────────────────────────────────────────────────────────────
   Auf /app/* fuehrt genau EIN Menue durch das Portal (Zwei-Zonen-Sidebar
   auf dem Web, dieselbe Liste als Vollbild auf dem Handy). Der zweite Weg
   ueber den Topbar-Burger ist damit weggefallen, samt seiner Regeln.
   Der Burger auf den oeffentlichen Seiten ist unberuehrt (main.css).
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   WORKSPACE BACKGROUND — Alle /app/* Seiten: helle Arbeitsfläche
   ───────────────────────────────────────────────────────────────────
   PROBLEM: body[fcp_tactical] setzt in main.css:
     background: linear-gradient(180deg, #2f352a 0%, #252b21 100%)
   Seiten MIT .container--admin-wide (mitgliederverwaltung etc.)
   bekommen bereits den hellen Override (Regel weiter oben).
   Seiten OHNE (Fangliste, Arbeitseinsaetze, Zustaendigkeiten)
   zeigen den dunklen Koerper-Hintergrund — wirkt wie dunkle Seite.

   LOESUNG: .main ist der gemeinsame Wrapper aller /app/* Seiten
   (Site.astro: <main class="main">). Er erhaelt den hellen Hintergrund.
   .workscreen (Fangliste, Zustaendigkeiten) bekommt ihn explizit dazu.

   Scope-Sicherheit: app-shell-redesign.css laedt NUR auf /app/* —
   öffentliche Seiten sind nie betroffen.
   ═══════════════════════════════════════════════════════════════════ */

body[data-app-theme="fcp_tactical"] .main,
body[data-app-theme="fcp_tactical"] .workscreen {
  background: var(--rd-bg);
}

/* min-height: Kein dunkler body-bg am Seitenende wenn Inhalt kurz ist. */
body[data-app-theme="fcp_tactical"] .main {
  min-height: calc(100vh - 56px);
}


/* ═══════════════════════════════════════════════════════════════════
   HEADING SIZES — Standalone /app/* Seiten
   ───────────────────────────────────────────────────────────────────
   Fangliste, Arbeitseinsätze, Zuständigkeiten: h1 ist zu gross.
   Standard-Browser-h1 (~32px) wirkt wie eine Webseite, nicht SaaS.
   app-shell-redesign.css ist Scope-Gate — keine öffentlichen Seiten
   betroffen.
   ═══════════════════════════════════════════════════════════════════ */

body[data-app-theme="fcp_tactical"] .main h1 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: 0;
  margin-bottom: 10px;
}

body[data-app-theme="fcp_tactical"] .main h2:not(.qfp-section-heading h2) {
  font-size: 14px;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 8px;
}


/* ═══════════════════════════════════════════════════════════════════
   ADMIN-CARD — Padding straffer
   ───────────────────────────────────────────────────────────────────
   14px/18px/12px wirkt zu luftig für ein SaaS-Tool.
   10px/14px/8px: gleiche Hierarchie, weniger Raum-Verschwendung.
   ═══════════════════════════════════════════════════════════════════ */

.admin-card__header {
  padding: 10px 14px 8px;
}

/* Weniger Gap zwischen Sektionen */
/* align-content:start verhindert dass der Grid-Container die Rows
   streckt wenn admin-board__content höher ist als Sectioninhalt.
   Root Cause: admin-board__content wird auf Navigationshöhe gestretched,
   admin-section.is-active erbt die Höhe → Tab-Strip wächst mit (Bug).  */
.admin-section.is-active {
  gap: 10px;
  align-content: start;
}

/* Section-Header selbst braucht weniger Luft nach oben */
.qfp-section-header-simple {
  padding-top: 4px;
  padding-bottom: 0;
}

/* Info-Trigger (i-Button) klein und inline */
.qfp-info-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--rd-surface-2);
  border: 1px solid var(--rd-line, rgba(var(--tint-rgb), .18));
  color: var(--rd-muted, #7a7c68);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  vertical-align: middle;
  margin-left: 6px;
  padding: 0;
  line-height: 1;
}

/* Section-Heading: h2 + i-Button nebeneinander als Flex-Zeile */
.qfp-section-heading {
  display: flex;
  align-items: center;
  gap: 0;
}


/* ═══════════════════════════════════════════════════════════════════
   ADM FORM FIELDS — Compact Override gegen redesign.css 44px
   ───────────────────────────────────────────────────────────────────
   redesign.css setzt .fcp-adm-shell .qfp-form-field input auf 44px.
   Spezifität: 0,2,0 (2 Klassen via :where).
   Diese Regel: body[attr] + 2 Klassen = 0,3,1 → gewinnt immer.
   Gilt nur auf /app/* weil app-shell-redesign.css Scope-Gate ist.
   ═══════════════════════════════════════════════════════════════════ */

body[data-app-theme="fcp_tactical"] .fcp-adm-shell .qfp-form-field :where(input, select, textarea) {
  min-height: 34px;
  border-radius: 6px;
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: 13px;
}

/* Owner-Grundsatz 04.09.2026: Touch-Zweig, damit iOS beim Fokus nicht zoomt. */
@media (pointer: coarse), (max-width: 899px) {
  body[data-app-theme="fcp_tactical"] .fcp-adm-shell .qfp-form-field :where(input, select, textarea) {
    font-size: 16px;
  }
}

body[data-app-theme="fcp_tactical"] .fcp-adm-shell .qfp-form-field textarea {
  min-height: 72px;
}

/* Form-Grid: kompaktere Spalten-/Zeilenabstaende */
body[data-app-theme="fcp_tactical"] .fcp-adm-shell .qfp-form-grid {
  gap: 6px 12px;
}

/* Form-Field: Abstand zwischen Label und Input */
body[data-app-theme="fcp_tactical"] .fcp-adm-shell .qfp-form-field {
  gap: 3px;
}


/* ═══════════════════════════════════════════════════════════════════
   RESP-FORM-GRID — Kachelbau-Fund Welle 1 (05.09.2026, ROSCCX-Auftrag)
   ───────────────────────────────────────────────────────────────────
   .resp-form-grid/.resp-full existierten bisher nur im Vite-Bundle
   (src/styles/app-shell.css) — custom-Panel-Renderer wie
   public/js/fcp-zugang-pruefen-panel.js laufen ohne Vite und rendern
   die Klasse deshalb einspaltig. Eigenstaendige Portal-Fassung, Gap
   ueber die main.css/ui-standards.css-Tokens statt fixer Pixelwerte.
   Vite-Definition bleibt bestehen (identisch), Astro-Komponenten
   ziehen weiter von dort.
   ═══════════════════════════════════════════════════════════════════ */

.resp-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--form-gap, 10px);
  min-width: 0;
}

.resp-form-grid > * {
  min-width: 0;
}

.resp-form-grid label {
  display: grid;
  gap: var(--field-gap, 6px);
  margin: 0;
  min-width: 0;
}

.resp-form-grid input,
.resp-form-grid select,
.resp-form-grid textarea {
  width: 100%;
  min-width: 0;
}

.resp-full {
  grid-column: 1 / -1;
}

@media (min-width: 900px) {
  .resp-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ═══════════════════════════════════════════════════════════════════
   ADM CARD CONTENT — Innenabstand + Readonly-Grid
   ───────────────────────────────────────────────────────────────────
   .admin-card__content hat kein CSS. Readonly/Form-Inhalt
   schwimmt ohne Abstand zum Card-Rand.
   ═══════════════════════════════════════════════════════════════════ */

.admin-card__content {
  padding: 10px 14px 12px;
}

/* Readonly-Items: stacked, kompakter Abstand */
.fcp-adm-shell .qfp-readonly-grid {
  display: grid;
  gap: 8px;
}

.fcp-adm-shell .qfp-readonly-item {
  display: grid;
  gap: 2px;
}


/* ═══════════════════════════════════════════════════════════════════
   CATCH-DIALOG — FCP Tactical Light Theme
   ───────────────────────────────────────────────────────────────────
   Das catch-dialog wird direkt in document.body gehängt
   (nicht in .fcp-adm-shell). Daher eigene Selektoren nötig.
   main.css: dark gradient background → hier: cream-light ersetzen.
   Scope-Gate: app-shell-redesign.css laed NUR auf /app/* Routen.
   Impact: KEIN Einfluss auf GoFishing-Dialog, Feed-Dialog etc.
   (diese laufen nicht auf /app/* mit app-shell-redesign.css)
   ═══════════════════════════════════════════════════════════════════ */

/* Dialog-Rahmen: dezente Border + Schatten statt hartem Dark-Rand */
body[data-app-theme="fcp_tactical"] .catch-dialog {
  border-left: 1px solid var(--rd-line, rgba(var(--tint-rgb), 0.18));
  box-shadow: -6px 0 32px rgba(62, 56, 34, 0.12);
}

/* Dialog-Form: Dark-Gradient → Cream */
body[data-app-theme="fcp_tactical"] .catch-dialog__form {
  background: var(--rd-bg);
  color: var(--rd-ink, #2a2d24);
}

/* Titel-Zeile: h3 als Titelbalken mit Trennlinie nach unten */
body[data-app-theme="fcp_tactical"] .catch-dialog__form h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--rd-ink, #2a2d24);
  margin: 0 0 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rd-line, rgba(var(--tint-rgb), 0.18));
  letter-spacing: -0.01em;
}

/* Readonly-Grid: 2-spaltig im Dialog (wie Fangliste-Detail) */
body[data-app-theme="fcp_tactical"] .catch-dialog__body.qfp-readonly-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  margin-top: 14px;
}

/* Einzelnes Readonly-Item */
body[data-app-theme="fcp_tactical"] .catch-dialog__body .qfp-readonly-item {
  display: grid;
  gap: 2px;
}

/* Full-width Items */
body[data-app-theme="fcp_tactical"] .catch-dialog__body .qfp-readonly-item.is-full {
  grid-column: 1 / -1;
}

/* Label im Readonly */
body[data-app-theme="fcp_tactical"] .catch-dialog__body .qfp-field-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rd-muted, #7a7c68);
}

/* Wert im Readonly */
body[data-app-theme="fcp_tactical"] .catch-dialog__body .qfp-field-value {
  font-size: 13.5px;
  color: var(--rd-ink, #2a2d24);
  line-height: 1.4;
}

/* Form-Grid (editierbarer Modus): 1-spaltig, kompakt */
body[data-app-theme="fcp_tactical"] .catch-dialog__body.qfp-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 14px;
}

/* Inputs im Dialog (nicht in .fcp-adm-shell — globale Regel greift nicht).
   Owner-Befund 04.09.2026: feste Cremefläche + var(--rd-ink)-Text ergab im
   Dunkel hellen Text auf hellem Grund — jetzt --rd-surface-hi/--rd-line. */
body[data-app-theme="fcp_tactical"] .catch-dialog__body .qfp-form-field :where(input, select, textarea) {
  min-height: 34px;
  border-radius: 6px;
  font-size: 13px;
  background: var(--rd-surface-hi, rgba(243, 239, 229, 0.98));
  border: 1px solid var(--rd-line-strong, rgba(var(--tint-rgb), 0.28));
  color: var(--rd-ink, #2a2d24);
  padding: 0 10px;
  width: 100%;
  box-sizing: border-box;
}

/* Owner-Grundsatz 04.09.2026: Touch-Zweig, damit iOS beim Fokus nicht zoomt. */
@media (pointer: coarse), (max-width: 899px) {
  body[data-app-theme="fcp_tactical"] .catch-dialog__body .qfp-form-field :where(input, select, textarea) {
    font-size: 16px;
  }
}

body[data-app-theme="fcp_tactical"] .catch-dialog__body .qfp-form-field :where(input, select, textarea):focus {
  outline: none;
  border-color: var(--rd-gold, #d46a20);
  box-shadow: 0 0 0 2px var(--rd-gold-soft, rgba(183, 154, 99, 0.12));
}

/* Label im Form-Dialog */
body[data-app-theme="fcp_tactical"] .catch-dialog__body .qfp-form-field .qfp-field-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rd-muted, #7a7c68);
}

/* Aktions-Zeile: Trennlinie oben, Button-Reihe — NICHT für Go-Fishing (eigene Brand-Styles) */
body[data-app-theme="fcp_tactical"] .catch-dialog__actions:not(.portal-gofishing-actions) {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--rd-line, rgba(var(--tint-rgb), 0.18));
  background: var(--rd-bg);
}

/* Ghost-Buttons im Form-Body (außerhalb catch-dialog__actions) */
body[data-app-theme="fcp_tactical"] .catch-dialog__form .feed-btn--ghost:not(:is(.catch-dialog__actions .feed-btn--ghost)) {
  background: transparent;
  border: 1px solid var(--rd-line, rgba(var(--tint-rgb), 0.18));
  color: var(--rd-ink-2, #4a4e40);
  border-radius: 7px;
  box-shadow: none;
}

/* Schliessen-Button: ghost-Stil, FCP-warm */
body[data-app-theme="fcp_tactical"] .catch-dialog__actions .feed-btn--ghost {
  background: transparent;
  border: 1px solid var(--rd-line-strong, rgba(var(--tint-rgb), 0.28));
  color: var(--rd-ink-2, #4a4e40);
  border-radius: 7px;
}

body[data-app-theme="fcp_tactical"] .catch-dialog__actions .feed-btn--ghost:hover {
  background: var(--rd-surface-2);
}

/* Speichern-Button: gold primary */
body[data-app-theme="fcp_tactical"] .catch-dialog__actions .feed-btn:not(.feed-btn--ghost) {
  background: var(--rd-gold, #d46a20);
  border: 1px solid var(--rd-gold, #d46a20);
  color: var(--rd-on-accent, #fff);
  border-radius: 7px;
  font-weight: 600;
}

body[data-app-theme="fcp_tactical"] .catch-dialog__actions .feed-btn:not(.feed-btn--ghost):hover {
  background: var(--rd-gold-hi, #bf5414);
  border-color: var(--rd-gold-hi, #bf5414);
}

/* ═══════════════════════════════════════════════════════════════════
   ACCOUNT MENU — ADM Topbar User Pill + Dropdown
   ───────────────────────────────────────────────────────────────────
   Nur auf /app/* Routen (Scope-Gate: app-shell-redesign.css).
   Das Portalmenü (Sidebar/Vollbildliste) bleibt unberührt.
   ═══════════════════════════════════════════════════════════════════ */

/* Wrapper: Positionierungskontext für das Dropdown */
.adm-topbar__user-wrap {
  position: relative;
}

/* Pill als Button: Cursor zeigt Interaktivität */
.adm-topbar__pill.adm-topbar__user {
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  gap: 6px;
}

/* Chevron: minimal, rotiert wenn expanded */
.adm-topbar__chevron {
  font-size: 10px;
  opacity: 0.6;
  transition: transform 0.15s ease;
  margin-left: 2px;
}
.adm-topbar__user[aria-expanded="true"] .adm-topbar__chevron {
  transform: rotate(180deg);
}

/* Dropdown-Menü: cream, Schatten, rechts ausgerichtet */
.adm-account-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--rd-bg);
  border: 1px solid var(--rd-line, rgba(var(--tint-rgb), 0.18));
  border-radius: 12px;
  box-shadow:
    0 4px 24px rgba(62, 56, 34, 0.13),
    0 1px 4px rgba(62, 56, 34, 0.08);
  padding: 6px;
  z-index: 9999;
  /* hidden by default via [hidden] — keine transition nötig da Pill selten geklickt */
}

/* Menu-Header: Initialen-Avatar + Name */
.adm-account-menu__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--rd-line, rgba(var(--tint-rgb), 0.14));
  margin-bottom: 4px;
}
.adm-account-menu__av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--rd-gold-soft, rgba(183, 154, 99, 0.15));
  color: var(--rd-gold-lo, #c05818);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.adm-account-menu__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--rd-ink, #2a2d24);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Navigations-Links */
.adm-account-menu__links {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.adm-account-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--rd-ink, #2a2d24);
  text-decoration: none;
  transition: background 0.1s ease;
}
.adm-account-menu__item:hover {
  background: var(--rd-surface-2);
  color: var(--rd-ink, #2a2d24);
}

/* Trennlinie vor Logout */
.adm-account-menu__sep {
  height: 1px;
  background: var(--rd-line, rgba(var(--tint-rgb), 0.14));
  margin: 4px 4px;
}

/* Logout-Button: diskrete Darstellung, Rot bei Hover */
.adm-account-menu__logout {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  font-size: 13px;
  color: var(--rd-ink-2, #4a4e40);
  cursor: pointer;
  text-align: left;
  transition: background 0.1s ease, color 0.1s ease;
}
.adm-account-menu__logout:hover {
  background: rgba(180, 60, 60, 0.08);
  color: #b43c3c;
}

/* Legal-Footer im Account-Menü — CHECK-01 Fix */
.adm-account-menu__legal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 10px 3px;
}
.adm-account-menu__legal-link {
  font-size: 11px;
  color: var(--rd-ink-2, #4a4e40);
  text-decoration: none;
  opacity: 0.55;
  transition: opacity 0.1s ease;
}
.adm-account-menu__legal-link:hover {
  opacity: 1;
  text-decoration: underline;
}
.adm-account-menu__legal-dot {
  font-size: 11px;
  color: var(--rd-ink-2, #4a4e40);
  opacity: 0.35;
}

/* Konto-Menü-Eintrag "Befund melden" als <button> statt <a> (05.09.2026,
   Owner-Auftrag Elementpicker) -- .adm-account-menu__item liefert
   Flex/Gap/Padding/Hover bereits, dieser Modifier ergänzt nur den
   Button-Reset (Breite, Rahmen, Textausrichtung), gleiches Prinzip wie
   .adm-account-menu__logout weiter oben. */
.adm-account-menu__item--button {
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.adm-account-menu__item--shortcut {
  margin-left: auto;
  font-size: 11px;
  opacity: 0.55;
}

/* Element-Picker — Begehung Stufe 1 (05.09.2026, Owner-Auftrag). Das Overlay
   umrandet nur das Element unter der Maus (kein Eingriff am Element selbst),
   deshalb position:fixed + pointer-events:none, Geometrie kommt aus
   getBoundingClientRect() in public/js/fcp-elementpicker.js. Farbe/Fläche aus
   den bestehenden Tokens (--accent, hell+dunkel bereits in public/css/main.css
   definiert), kein neuer Farbwert. */
.fcp-elementpicker-overlay {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  border: 2px solid var(--accent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
}
body[data-fcp-elementpicker-active="1"] {
  cursor: crosshair;
}

/* ═══════════════════════════════════════════════════════════════════
   KPI-STRIP — Phase B ADM Shell
   Thin secondary bar sticky below topbar (top: 56px = adm-topbar-Höhe).
   Befüllt via adm-kpi-loader.js aus Supabase.
   Bleibt hidden=[true] bis JS-Daten vorhanden sind.
   ───────────────────────────────────────────────────────────────────
   KORREKTUR 31.08.2026 (Owner-Begehung): opacity:0.72 auf dem GANZEN
   Element machte auch den Hintergrund halbtransparent — beim Scrollen
   schien der Seiteninhalt durch den Strip durch. Das "Zurücktreten"
   ist bereits über die gedämpften Textfarben/Icon-Opacities der
   Kinder (.adm-kpi-pill__icon, __value, __label) gelöst; der Strip
   selbst bekommt einen voll opaken Hintergrund aus dem Farb-Token.
   ═══════════════════════════════════════════════════════════════════ */
.adm-kpi-strip {
  position: sticky;
  top: 56px;
  z-index: 99;
  background: var(--rd-surface-2);
  border-bottom: 1px solid var(--rd-line, rgba(var(--tint-rgb), 0.14));
  height: 26px;                                /* war 30px — etwas kompakter */
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 0;
  overflow: hidden;
}

.adm-kpi-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--rd-ink-2, #4a4e40);
  white-space: nowrap;
  padding: 0 2px;
}

.adm-kpi-pill--alert {
  font-weight: 600;
}

.adm-kpi-pill__icon {
  font-size: 9px;                              /* war 10px */
  opacity: 0.4;                               /* war 0.55 — mehr zurückgetreten */
}

.adm-kpi-pill__value {
  font-size: 11.5px;                          /* war 12.5px */
  font-weight: 600;                           /* war 700 — weniger dominant */
  color: var(--rd-ink-2, #4a4e40);           /* war rd-ink (dunkelster Ton) */
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.adm-kpi-pill--alert .adm-kpi-pill__value {
  color: var(--rd-gold, #d46a20);
}

.adm-kpi-pill__label {
  font-size: 11px;
  color: var(--rd-muted, #7a7c68);
  letter-spacing: 0.01em;
}

.adm-kpi-sep {
  font-size: 10px;
  color: var(--rd-line-strong, rgba(var(--tint-rgb), 0.35));
  padding: 0 10px;
  user-select: none;
  line-height: 1;
}

/* ── Nav-Rail Badges ──────────────────────────────────────────────── */
/*
 * Injiziert via adm-kpi-loader.js nach adm-nav-enhancer.js.
 * .admin-nav-btn hat display:flex → Badge mit margin-left:auto drückt
 * ihn an den rechten Rand.
 */
.adm-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--rd-gold, #d46a20);
  color: var(--rd-on-accent, #fff);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
  margin-left: auto;
  flex-shrink: 0;
  letter-spacing: 0;
}


/* ═══════════════════════════════════════════════════════════════════
   ADM — Form-Group Verbesserungen
   ───────────────────────────────────────────────────────────────────
   WAS WAR: .qfp-form-group CSS galt nur für OFM/QFM.
            Im ADM-Kontext zeigte <details>/<summary> den nativen
            Browser-Pfeil (▼) und hatte kein Layout.
   WARUM: Saubere Accordion-Karten ohne Browser-Artefakte.
          Eigene Chevron-Anzeige via ::after.
   ═══════════════════════════════════════════════════════════════════ */

/* Native Disclosure-Dreiecke unterdrücken */
.fcp-adm-shell .qfp-form-group {
  border: 1px solid var(--rd-line, rgba(var(--tint-rgb), .14));
  border-radius: 8px;
  overflow: hidden;
  background: var(--rd-surface-2);
  grid-column: 1 / -1;
}

.fcp-adm-shell .qfp-form-group__summary {
  list-style: none;
  cursor: pointer;
  padding: 11px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  user-select: none;
}

.fcp-adm-shell .qfp-form-group__summary::-webkit-details-marker {
  display: none;
}

.fcp-adm-shell .qfp-form-group__summary::marker {
  content: "";
}

/* Eigener Chevron als ::after */
.fcp-adm-shell .qfp-form-group__summary::after {
  content: "+";
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(var(--tint-rgb), .1);
  color: var(--rd-muted, #7a7c68);
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background .15s;
}

.fcp-adm-shell .qfp-form-group[open] .qfp-form-group__summary::after {
  content: "−";
}

.fcp-adm-shell .qfp-form-group__summary-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.fcp-adm-shell .qfp-form-group__title {
  font-size: .83rem;
  font-weight: 600;
  color: var(--rd-ink, #2a2d24);
}

.fcp-adm-shell .qfp-form-group__hint {
  font-size: .76rem;
  color: var(--rd-muted, #7a7c68);
  line-height: 1.4;
}

.fcp-adm-shell .qfp-form-group__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--rd-line, rgba(var(--tint-rgb), .14));
}

.fcp-adm-shell .qfp-form-group__grid--ungrouped {
  grid-column: 1 / -1;
  padding: 0;
  border-top: 0;
}

/* admin-card Speichern-Button in Form-Panels */
.fcp-adm-shell .admin-card .admin-card__save-row {
  display: flex;
  justify-content: flex-end;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--rd-line, rgba(var(--tint-rgb), .14));
}
/* Touch Target: Speichern-Button ≥ 44px (Gate B) */
.fcp-adm-shell .admin-card__save-row .feed-btn {
  min-height: 44px;
}

/* ── Notification Bell im ADM Topbar ─────────────────────────────── */
/* Die Glocke wurde von header.header in #admTopbar verschoben (Phase B).
   header-notification-toggle hat bereits fcp_tactical-Styles in main.css.
   Hier nur Topbar-spezifisches Alignment. */
.adm-topbar__bell {
  display: flex;
  align-items: center;
}
.adm-topbar__bell.hidden {
  display: none;
}

/* ── Punkt 1: Toggle-Felder in ADM Form-Panels ──────────────────────
   Checkboxen in .fcp-adm-shell .qfp-toggle-row werden als
   native Toggle-Switch dargestellt statt Browser-Checkbox. */
.fcp-adm-shell .qfp-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0;
  min-height: 44px; /* Touch Target ≥ 44px — Trefferbereich nicht der Switch selbst (Gate B) */
}

.fcp-adm-shell .qfp-toggle-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 44px;  /* Touch Target ≥ 44px (Gate B) — visueller Switch vergrößert */
  height: 26px; /* proportional angepasst */
  border-radius: 11px;
  background: rgba(var(--tint-rgb), .18);
  border: 1.5px solid rgba(var(--tint-rgb), .32);
  cursor: pointer;
  position: relative;
  transition: background .18s, border-color .18s;
}

.fcp-adm-shell .qfp-toggle-row input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(var(--tint-rgb), .5);
  transition: transform .18s, background .18s;
}

.fcp-adm-shell .qfp-toggle-row input[type="checkbox"]:checked {
  background: #595a3d;
  border-color: #595a3d;
}

.fcp-adm-shell .qfp-toggle-row input[type="checkbox"]:checked::after {
  transform: translateX(16px);
  background: #fff;
}

.fcp-adm-shell .qfp-toggle-row input[type="checkbox"]:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.fcp-adm-shell .qfp-toggle-label {
  font-size: 0.87rem;
  color: var(--rd-ink, #1a1d12);
  line-height: 1.3;
}

/* ── Punkt 11: QFM/OFM Mask — light override für fcp_tactical ───────
   ofmMask.css definiert --ofm-surface als dunkel (Fallback #181d18).
   Auf /app/* lädt app-shell-redesign.css nach und überschreibt auf cream. */
body[data-app-theme="fcp_tactical"] .qfp-shell[data-mask-family="OFM"],
body[data-app-theme="fcp_tactical"] .qfp-shell[data-mask-family="QFM"] {
  --ofm-bg: #f6f1e5;
  --ofm-surface: #fbf7ee;
  --ofm-surface-2: #f0ebe0;
  --ofm-soft: #e8e2d5;
  --ofm-text: #1a1d12;
  --ofm-muted: rgba(61,64,45,.65);
  --ofm-line: rgba(var(--tint-rgb), .14);
  --ofm-line-strong: rgba(var(--tint-rgb), .3);
  --ofm-accent: #595a3d;
  --ofm-accent-strong: #4b4c33;
  --ofm-accent-warm: #e8d9b5;
  --ofm-shadow: 0 4px 20px rgba(0,0,0,.08);
}

/* ── Punkt 8: Section-Tab-Strip für sectionLayout:"tabs" ──────────────
   Angewendet wenn admin-panel-mask.js ein "tabs"-Layout rendert.
   Derzeit aktiv für: Ausweise (club_settings_cards). */
.fcp-adm-shell .adm-section-tabs {
  display: flex;
  align-items: flex-end;               /* Fix Tab-Bug: verhindert dass Buttons auf volle Container-Höhe strecken */
  gap: 2px;
  margin: 0 0 16px 0;
  border-bottom: 2px solid var(--line);
  padding-bottom: 0;
  flex-shrink: 0;                      /* Strip selbst nicht stauchen */
}

/* Owner-Befund 04.09.2026: hier stand var(--rd-muted, ...)/var(--rd-ink, ...) —
   der Tab-Strip liegt nicht unter .is-redesign, die Variable war nie definiert
   und griff immer auf den Fallback zurück (fest hell). Jetzt die echten
   Hüllen-Tokens, damit der Strip mit dem Darstellung-Schalter mitgeht. */
.fcp-adm-shell .adm-section-tab {
  padding: 7px 18px 9px;
  min-height: 44px; /* Touch Target ≥ 44px (Gate B) */
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  border-radius: 4px 4px 0 0;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}

.fcp-adm-shell .adm-section-tab:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

.fcp-adm-shell .adm-section-tab.is-active {
  color: var(--text);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

/* ── Tab-Panel-Wrapper: verhindert Höhen-Propagation bei Tab-Wechsel ── */
[data-tab-panel] {
  overflow: hidden;                    /* Höhenwechsel bleibt im Panel — kein Outer-Layout-Shift */
  min-height: 0;
}

/* ── Nav-Submenü für Tab-Sektionen ─────────────────────────────────── */
.fcp-adm-shell .adm-nav-subitem-wrap {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 2px 0 6px 28px;
}

.fcp-adm-shell .adm-nav-subitem {
  display: block;
  width: 100%;
  min-height: 44px; /* Touch Target ≥ 44px (Gate B) */
  padding: 5px 10px;
  font-size: 0.8rem;
  color: var(--rd-muted, rgba(61,64,45,.6));
  background: transparent;
  border: none;
  border-radius: 5px;
  text-align: left;
  cursor: pointer;
  transition: background .12s, color .12s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fcp-adm-shell .adm-nav-subitem:hover {
  background: rgba(var(--tint-rgb), .08);
  color: var(--rd-ink, #1a1d12);
}

.fcp-adm-shell .adm-nav-subitem.is-active {
  background: rgba(89,90,61,.12);
  color: var(--rd-ink, #1a1d12);
  font-weight: 500;
}

/* ── Leere Sektion (alle Panels gap) ───────────────────────────────── */
.fcp-adm-shell .adm-section-empty {
  padding: 32px 24px;
  color: var(--rd-muted, rgba(61,64,45,.5));
  font-size: 0.875rem;
  font-style: italic;
}

/* ── Punkt 4: Inline-Data-Table Toolbar — kompakte Buttons im ADM ──
   .feed-btn erbt --control-height:34px aber lib-btn-font-size bleibt
   1rem was die Buttons optisch zu groß macht. Hier explizit reduzieren. */
/* Owner-Entscheidung 09.09.2026 (Karte 6cb684af, Widget: "Knopfhoehe:
   ja_bugfixer"): Icon- und Textknoepfe der Werkzeugleiste sind gleich hoch.
   Hier standen feste 32px, waehrend die Textknoepfe daneben aus
   --control-height kamen (34px am Zeiger). Die feste Zahl ist raus -- damit
   zieht die Werkzeugleiste den Touch-Wert (44px) automatisch mit, statt ihn
   ein zweites Mal zu pflegen. */
body[data-app-theme="fcp_tactical"] .data-table-shell__toolbar .feed-btn,
body[data-app-theme="fcp_tactical"] .data-table-shell__toolbar .feed-btn--ghost,
body[data-app-theme="fcp_tactical"] .data-table-shell__toolbar .icon-utility {
  min-height: var(--control-height);
  height: var(--control-height);
  padding-inline: 12px;
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: 6px;
}

body[data-app-theme="fcp_tactical"] .data-table-shell__toolbar .icon-utility {
  width: var(--control-height);
  /* main.css setzt min-inline-size: 40px -- ohne diese Zeile bliebe der
     Icon-Knopf 40px breit bei 34px Hoehe und waere nicht mehr quadratisch. */
  min-inline-size: var(--control-height);
  inline-size: var(--control-height);
  padding-inline: 0;
  font-size: 0.9rem;
}

/* ── Row-Action-Buttons — Touch Target (Gate B) ────────────────────
   Buttons haben Klassen: feed-btn feed-btn--ghost row-action-btn
   redesign.css: .is-redesign .feed-btn--ghost { min-width: 34px } (Spez. 0,2,0)
   Fix braucht ≥ 3-Klassen-Selektor um zu gewinnen (Spez. 0,3,0). */
.fcp-adm-shell .rd-row-actions .row-action-btn {
  min-width: 44px;
  min-height: 44px;
}
.work-part-actions .feed-btn,
.work-part-actions button:not([type="submit"]) {
  min-width: 44px;
  min-height: 44px;
}

/* ── Maske fade-in — dämpft den Flash beim Sektionswechsel ─────────
   innerHTML = "" → Repaint ist unvermeidbar, aber opacity-Animation
   macht den Übergang weniger hart. */
.fcp-adm-shell .admin-section.is-active {
  animation: adm-fadein 0.1s ease-out both;
}

@keyframes adm-fadein {
  from { opacity: 0; }                 /* Fix Layout-Shift: translateY entfernt — nur Opacity-Fade, kein Sprung */
  to   { opacity: 1; }
}

/* ── Section-Header H2 im Content ausblenden ───────────────────────
   renderSectionHeader() wird im JS nicht mehr aufgerufen — diese Regel
   ist ein Safety-Net falls ein anderer Codepfad den Header rendert. */
.fcp-adm-shell .admin-section.is-active > .qfp-section-header-simple {
  display: none;
}

/* ── Loading-State: Content-Bereich gedimmt während Daten geladen werden ──
   Klasse adm-content--loading wird von activateSection() gesetzt und
   von renderContent() entfernt. Alter Content bleibt sichtbar (gedimmt)
   bis renderContent() den DOM atomar austauscht — kein weißer Flash. */
.fcp-adm-shell .admin-board__content.adm-content--loading {
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 0.08s ease;
  min-height: 120px;
}

/* Breite Tabellen (z.B. Eventplaner 1480px) dürfen nicht auf Page-Ebene überlaufen.
   clip statt hidden: erstellt keinen Scroll-Container → position:sticky und child-overflow-x:auto bleiben funktional. */
.fcp-adm-shell .admin-board__content {
  overflow-x: clip;
  min-width: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE TOPBAR — ≤ 600 px
   ───────────────────────────────────────────────────────────────────
   Problem: Topbar-Kinder haben alle flex:0 0 auto + white-space:nowrap.
   Die Summe uebersteigt sonst 320 px → horizontaler Overflow.

   Lösung: Breadcrumb darf schrumpfen + truncaten, Padding halbieren.
   Util bleibt sichtbar (Bell + Avatar = wichtig).
   KPI-Strip: Padding angleichen, bereits overflow:hidden.

   Marke und Burger sind mit dem Portalmenue-Umbau (31.08.2026) aus dem
   Topbar verschwunden — die Marke sitzt im Sidebar-Kopf, das Menue
   oeffnet der Haus-FAB der Bottom-Bar (.fcp-tabbar__fab). Der Topbar
   traegt nur noch Breadcrumb und Nutzerwerkzeuge.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .adm-topbar {
    padding: 0 12px;
    gap: 6px;
  }

  /* Spacer-Flex reduzieren — der Breadcrumb braucht mehr Platz */
  .adm-topbar__sp {
    flex: 0 0 8px;
  }

  .fcp-shell-crumbs {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    gap: 4px;
  }

  .fcp-shell-crumbs__step {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
  }

  /* KPI-Strip: Padding auf 12px, analog Topbar */
  .adm-kpi-strip {
    padding: 0 12px;
  }

  /* Topbar-Overflow-Fix: Topbar clippt, Util darf schrumpfen, Username weg */
  .adm-topbar {
    overflow: hidden; /* Verhindert document-level Overflow durch Util-Kinder */
  }
  .adm-topbar__util {
    flex: 0 1 auto; /* darf schrumpfen, wächst nicht */
    min-width: 0;
  }
  .adm-topbar__username {
    display: none; /* Kein Platz auf 375px — Avatar + Chevron reichen */
  }
  /* Touch Target: User-Pill auf Mobile vergrößern */
  .adm-topbar__pill {
    min-height: 44px; /* Touch Target ≥ 44px (Gate B) */
  }

  /* Arbeitseinsätze: Tab-Leiste scrollbar statt overflow.
     display:flex + overflow-x:auto funktioniert nicht zuverlässig
     weil der Flex-Container sich auf Content-Breite aufzieht.
     Lösung: Container → display:block + white-space:nowrap,
             Tab-Buttons → display:inline-flex (fließen dann horizontal). */
  .fcp-adm-shell .adm-section-tabs {
    display: block;
    white-space: nowrap;
    overflow-x: auto;
    width: 100%;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
  }
  .fcp-adm-shell .adm-section-tabs::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }
  .fcp-adm-shell .adm-section-tab {
    display: inline-flex;
    align-items: flex-end;   /* wie ursprüngliches align-items:flex-end am Container */
    vertical-align: bottom;  /* bündig zur Unterkante */
    white-space: nowrap;
  }
  /* Content-Bereich auf Mobile: kein Overflow nach außen */
  .fcp-adm-shell .admin-board__content {
    overflow: hidden;
    min-width: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE ADM NAV — Slide-In Overlay (Option A)
   ───────────────────────────────────────────────────────────────────
   - Abschnittswechsler (.adm-nav-mob-burger) wird per JS oben IN DIE MASKE
     injiziert — nur auf Mobile via CSS sichtbar. Er schaltet die Abschnitte
     DIESER Maske, nicht das Portalmenue (das steht in der Huelle).
   - admin-board wechselt auf 1-Spalte (Content full-width).
   - admin-board__nav: position:fixed, schiebt sich von links rein.
   - Klasse adm-nav-open auf .admin-board steuert den Open-State.
   - Backdrop via ::before (halbtransparent), Klick schließt via JS.
   - Nav-Item-Klick schließt automatisch (in renderNav onClick).
   ═══════════════════════════════════════════════════════════════════ */

/* Desktop + Tablet: Hamburger und Close-Button versteckt */
.adm-nav-mob-burger,
.adm-nav-close-btn {
  display: none;
}

@media (max-width: 600px) {
  /* 2-Spalten-Grid → 1 Spalte (Content full-width) */
  body[data-app-theme="fcp_tactical"] .admin-board {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* Nav: aus normalem Flow raus, fixed links versteckt */
  body[data-app-theme="fcp_tactical"] .admin-board__nav {
    position: fixed;
    top: 86px;          /* Topbar 56px + KPI-Strip 30px */
    left: 0;
    bottom: 0;
    width: 236px;
    max-width: 88vw;
    max-height: none;
    z-index: 200;
    background: var(--rd-surface);
    border-right: 1px solid var(--rd-line, rgba(var(--tint-rgb), .14));
    border-top: 1px solid var(--rd-line, rgba(var(--tint-rgb), .14));
    border-left: 0;
    border-radius: 0;
    padding: 12px 16px 32px;
    box-shadow: 4px 0 24px rgba(62, 56, 34, .18);
    /* Versteckt: links außerhalb + unsichtbar */
    transform: translateX(-110%);
    visibility: hidden;
    transition: transform .22s cubic-bezier(.4, 0, .2, 1), visibility 0s .22s;
  }

  /* Nav offen: reingeschoben + sichtbar */
  body[data-app-theme="fcp_tactical"] .admin-board.adm-nav-open .admin-board__nav {
    transform: translateX(0);
    visibility: visible;
    transition: transform .22s cubic-bezier(.4, 0, .2, 1), visibility 0s 0s;
  }

  /* Backdrop: dimmt Content wenn Nav offen */
  body[data-app-theme="fcp_tactical"] .admin-board.adm-nav-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(47, 53, 42, .38);
    z-index: 199;
    pointer-events: auto;
  }

  /* Nav: fixed von RECHTS eingehend (Toggle ist rechts → Drawer kommt von rechts) */
  body[data-app-theme="fcp_tactical"] .admin-board__nav {
    right: 0;
    left: auto;
    border-left: 1px solid var(--rd-line, rgba(var(--tint-rgb), .14));
    border-right: 0;
    box-shadow: -4px 0 24px rgba(62, 56, 34, .18);
    transform: translateX(110%);
  }

  body[data-app-theme="fcp_tactical"] .admin-board.adm-nav-open .admin-board__nav {
    transform: translateX(0);
  }

  /* Abschnittswechsler der Maske — oben in der Maske, nicht im Topbar */
  .adm-nav-mob-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    align-self: start;
    margin-bottom: 12px;
    padding: 0 12px;
    min-width: 44px;  /* Touch Target ≥ 44px (Gate B) */
    min-height: 44px; /* Touch Target ≥ 44px (Gate B) */
    font-size: 13px;
    color: var(--rd-ink-2, #4a4e40);
    background: transparent;
    border: 1px solid var(--rd-line, rgba(var(--tint-rgb), .22));
    border-radius: 7px;
    cursor: pointer;
    flex-shrink: 0;
  }

  /* Schließen-Button oben im Nav */
  .adm-nav-close-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px; /* Touch Target ≥ 44px (Gate B) */
    padding: 4px 6px 10px;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--rd-muted, #7a7c68);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--rd-line, rgba(var(--tint-rgb), .14));
    cursor: pointer;
    text-align: left;
  }
}

/* Die frueher hier definierten .adm-nav-public-link/-sep sind mit dem
   Portalmenue-Umbau (31.08.2026) entfallen: der Topbar-Burger, den sie auf
   Mobile ersetzt haben, existiert auf /app/* nicht mehr. Datenschutz und
   Impressum stehen im Konto-Menue des Topbars. */

/* ═══════════════════════════════════════════════════════════
   FCP COMBOBOX — global (fangliste + go-fishing + future)
   ═══════════════════════════════════════════════════════════ */
.fcp-combobox { display: grid; gap: var(--space-1, 4px); margin: 0; }
.fcp-combobox__label { font-size: .92rem; color: var(--muted); }
.fcp-combobox__anchor { position: relative; }
.fcp-combobox__trigger {
  display: flex; align-items: center; justify-content: space-between;
  text-align: left; width: 100%;
}
.fcp-combobox__trigger[aria-expanded="true"] {
  outline: 2px solid rgba(212,106,32,.4);
  outline-offset: 1px;
}
.fcp-combobox__chevron { width: 16px; height: 16px; flex-shrink: 0; transition: transform .15s; }
.fcp-combobox__trigger[aria-expanded="true"] .fcp-combobox__chevron { transform: rotate(180deg); }
.fcp-combobox__panel {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-md, 6px); padding: var(--space-1, 4px);
  display: grid; gap: var(--space-1, 4px);
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
body[data-app-theme="fcp_tactical"] .fcp-combobox__panel {
  background: var(--rd-surface-2);
  border-color: var(--rd-line, rgba(var(--tint-rgb), .18));
}
.fcp-combobox__search { width: 100%; box-sizing: border-box; }
.fcp-combobox__list { list-style: none; padding: 0; margin: 0; max-height: 200px; overflow-y: auto; }
.fcp-combobox__option {
  padding: 8px var(--space-2, 8px); border-radius: calc(var(--radius-md, 6px) - 2px);
  cursor: pointer; list-style: none;
}
.fcp-combobox__option:hover { background: rgba(255,255,255,.07); }
body[data-app-theme="fcp_tactical"] .fcp-combobox__option:hover { background: rgba(var(--tint-rgb), .1); }
.fcp-combobox__option--selected { background: rgba(212,106,32,.12); color: var(--rd-gold-lo, #c05818); }
body[data-app-theme="fcp_tactical"] .fcp-combobox__option--selected {
  background: rgba(212,106,32,.12); color: var(--rd-gold, #d46a20);
}
.fcp-combobox__empty { padding: 8px var(--space-2, 8px); opacity: .5; font-size: .875rem; text-align: center; list-style: none; }

/* ═══════════════════════════════════════════════════════════════════
   FUNKTIONSVERWALTUNG PRO VEREIN (Admin Board › Clubs)
   ───────────────────────────────────────────────────────────────────
   Ersetzt die frühere Modul/Usecase-Matrix im Club-Detail.
   Optik nach dem am 28.08.2026 freigegebenen Mockup
   (SYSTEM/FCP/ZIELBILDER/UI_MOCKUP_MODULKONFIG_PRO_VEREIN.html):
   40px-Funktionszeilen, 44px-Gruppenzeilen, 14px Grundschrift,
   weißer Spaltenkopf, 32x18-Schalter, Orange nur für Primäraktionen.
   Tokens wie im Rest dieser Datei mit Fallback, weil redesign.css
   auf dieser Route nicht geladen wird.
   ═══════════════════════════════════════════════════════════════════ */

.fnadmin {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  max-width: 100%;
  font-size: var(--rd-font, 14px);
  color: var(--rd-ink, #2a2d24);
}

.fnadmin-breadcrumb {
  margin: 0;
  font-size: 12px;
  color: var(--rd-muted, #7a7c68);
}

.fnadmin-breadcrumb strong {
  color: var(--rd-ink, #2a2d24);
  font-weight: 600;
}

/* ---------- Vereinsauswahl (Pflicht, kein stiller Default) ---------- */

.fnadmin-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 18rem;
}

.fnadmin-field label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--rd-muted, #7a7c68);
}

.fnadmin-field select {
  font: inherit;
  font-size: 13px;
  color: var(--rd-ink, #2a2d24);
  background-color: var(--rd-surface-hi, #ffffff);
  border: 1px solid var(--rd-line-strong, rgba(var(--tint-rgb), .22));
  border-radius: var(--rd-radius-sm, 6px);
  padding: 5px 8px;
  cursor: pointer;
}

/* Owner-Grundsatz 04.09.2026: Touch-Zweig, damit iOS beim Fokus nicht zoomt. */
@media (pointer: coarse), (max-width: 899px) {
  .fnadmin-field select {
    font-size: 16px;
  }
}

.fnadmin-placeholder {
  margin: 0;
  background-color: var(--rd-surface);
  border: 1px dashed var(--rd-line-strong, rgba(var(--tint-rgb), .22));
  border-radius: var(--rd-radius, 10px);
  padding: 22px 14px;
  text-align: center;
  color: var(--rd-muted, #7a7c68);
  font-size: 13px;
}

/* hidden-Attribut muss gegen die display-Regeln dieser Komponente gewinnen —
   sonst blendet ein display:flex die Sperre wieder ein (FCP-Falle). */
.fnadmin[hidden],
.fnadmin-panel[hidden],
.fnadmin-foot[hidden],
.fnadmin-placeholder[hidden] { display: none !important; }

/* ---------- Tabelle ---------- */

.fnadmin-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.fnadmin-list-head {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rd-muted, #7a7c68);
}

/* Die Tabelle scrollt im eigenen Container waagerecht, die Seite nie. */
.fnadmin-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--rd-line-strong, rgba(var(--tint-rgb), .22));
  border-radius: var(--rd-radius, 10px);
  background-color: var(--rd-surface);
  max-width: 100%;
}

table.fnadmin-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 40rem;
  font-size: 14px;
  background-color: var(--rd-surface);
}

table.fnadmin-table th,
table.fnadmin-table td {
  text-align: left;
  vertical-align: middle;
  padding: 6px 14px;
  border-bottom: 1px solid var(--rd-line, rgba(var(--tint-rgb), .14));
}

table.fnadmin-table thead th {
  height: 34px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rd-muted, #7a7c68);
  background-color: var(--rd-surface-hi, #ffffff);
  border-bottom: 1px solid var(--rd-line-strong, rgba(var(--tint-rgb), .22));
  white-space: nowrap;
}

table.fnadmin-table th.fnadmin-col-switch,
table.fnadmin-table td.fnadmin-col-switch {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

table.fnadmin-table tbody tr:last-child td { border-bottom: 0; }

/* Gruppen-Kopfzeile mit Sammelschalter und Zähler */
table.fnadmin-table tr.fnadmin-group td {
  height: 44px;
  padding-top: 0;
  padding-bottom: 0;
  background-color: var(--rd-surface-2);
  border-top: 1px solid var(--rd-line-strong, rgba(var(--tint-rgb), .22));
  border-bottom: 1px solid var(--rd-line-strong, rgba(var(--tint-rgb), .22));
}

table.fnadmin-table tr.fnadmin-group:first-child td { border-top: 0; }

.fnadmin-group-name { font-size: 14px; font-weight: 700; }

.fnadmin-group-count {
  font-size: 12px;
  color: var(--rd-muted, #7a7c68);
  white-space: nowrap;
}

/* Funktionszeile — sichtbar eingerückt unter der Gruppe */
table.fnadmin-table tr.fnadmin-row td { height: 40px; }
table.fnadmin-table tr.fnadmin-row td:first-child { padding-left: 28px; }

.fnadmin-fn-name { font-weight: 500; }

.fnadmin-fn-note {
  display: block;
  font-size: 12px;
  line-height: 1.35;
  color: var(--rd-muted, #7a7c68);
}

.fnadmin-fn-visible {
  font-size: 12px;
  color: var(--rd-muted, #7a7c68);
  overflow-wrap: anywhere;
}

.fnadmin-fn-visible code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  background-color: var(--rd-surface-2);
  border-radius: 3px;
  padding: 1px 4px;
}

table.fnadmin-table tr.fnadmin-row.is-auto td {
  background-color: rgba(var(--tint-rgb), .05);
}

.fnadmin-row-hint {
  margin: 4px 0 2px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--rd-ink, #2a2d24);
  background-color: var(--rd-surface-2);
  border-left: 2px solid var(--accent, #595a3d);
  border-radius: 0 4px 4px 0;
  padding: 6px 8px;
  max-width: 22rem;
}

/* ---------- Schalter: an / aus / teils / automatisch aus ---------- */

.fnadmin-switch {
  appearance: none;
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--rd-muted, #7a7c68);
  cursor: pointer;
}

.fnadmin-col-switch .fnadmin-switch {
  width: 130px;
  justify-content: flex-start;
}

.fnadmin-switch-track {
  position: relative;
  display: block;
  flex: none;
  width: 32px;
  height: 18px;
  box-sizing: border-box;
  border: 1px solid var(--rd-line-strong, rgba(var(--tint-rgb), .22));
  border-radius: 999px;
  background-color: #ddd7c8;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.fnadmin-switch-knob {
  position: absolute;
  top: 50%;
  left: 2px;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  background-color: #ffffff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  transition: left 120ms ease;
}

.fnadmin-switch-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
  flex: 1 1 auto;
  text-align: left;
}

.fnadmin-switch[data-state="an"] { color: var(--accent, #595a3d); }
.fnadmin-switch[data-state="an"] .fnadmin-switch-track {
  background-color: var(--accent, #595a3d);
  border-color: var(--accent-strong, #4b4c33);
}
.fnadmin-switch[data-state="an"] .fnadmin-switch-knob { left: 16px; }

.fnadmin-switch[data-state="teils"] .fnadmin-switch-track {
  background-color: #a9a98c;
  border-color: var(--rd-line-strong, rgba(var(--tint-rgb), .22));
}
.fnadmin-switch[data-state="teils"] .fnadmin-switch-knob { left: 9px; }

.fnadmin-switch[data-state="auto"] { opacity: .7; }
.fnadmin-switch[data-state="auto"] .fnadmin-switch-track {
  background-color: transparent;
  border-style: dashed;
  border-color: var(--rd-line-strong, rgba(var(--tint-rgb), .22));
}
.fnadmin-switch[data-state="auto"] .fnadmin-switch-knob {
  background-color: #e6e0d2;
  box-shadow: none;
}

.fnadmin-switch:hover .fnadmin-switch-track { border-color: var(--accent, #595a3d); }
.fnadmin-switch[aria-disabled="true"] { cursor: default; }
.fnadmin-switch[aria-disabled="true"]:hover .fnadmin-switch-track {
  border-color: var(--rd-line-strong, rgba(var(--tint-rgb), .22));
}
.fnadmin-switch[data-state="an"][aria-disabled="true"]:hover .fnadmin-switch-track {
  border-color: var(--accent-strong, #4b4c33);
}

.fnadmin-switch-lock { font-size: 11px; }

/* ---------- Fußzeile: Zähler und explizites Speichern ---------- */

.fnadmin-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.fnadmin-counter {
  margin: 0;
  font-size: 13px;
  color: var(--rd-muted, #7a7c68);
}

.fnadmin-counter[data-open="true"] {
  color: var(--rd-ink, #2a2d24);
  font-weight: 600;
}

.fnadmin-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Orange bleibt der Primäraktion vorbehalten. */
.feed-btn.fnadmin-btn-primary {
  background-color: var(--rd-gold, #d46a20);
  border: 1px solid var(--rd-gold-hi, #bf5414);
  color: var(--rd-on-accent, #fff);
}

.feed-btn.fnadmin-btn-primary:hover:not([disabled]) {
  background-color: var(--rd-gold-hi, #bf5414);
}

.feed-btn.fnadmin-btn-primary[disabled],
.fnadmin-actions .feed-btn[disabled] { cursor: default; opacity: .45; }

/* ---------- Rückmeldung nach dem Speichern ---------- */

.fnadmin-feedback {
  background-color: var(--rd-surface);
  border: 1px solid var(--rd-line-strong, rgba(var(--tint-rgb), .22));
  border-left: 3px solid var(--accent, #595a3d);
  border-radius: var(--rd-radius-sm, 6px);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--rd-ink, #2a2d24);
}

.fnadmin-feedback[hidden] { display: none; }

.fnadmin-feedback ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.fnadmin-feedback-note { color: var(--rd-muted, #7a7c68); font-size: 12px; }

/* ---------- Bestätigungsdialog ---------- */

.fnadmin-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(26, 29, 18, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1000;
}

.fnadmin-overlay[hidden] { display: none; }

.fnadmin-dialog {
  background-color: var(--rd-surface);
  border: 1px solid var(--rd-line-strong, rgba(var(--tint-rgb), .22));
  border-radius: var(--rd-radius, 10px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
  max-width: 32rem;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--rd-ink, #2a2d24);
}

.fnadmin-dialog h2 { margin: 0; font-size: 15px; font-weight: 600; }
.fnadmin-dialog p { margin: 0; font-size: 13px; }

.fnadmin-dialog ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
}

.fnadmin-dialog code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  background-color: var(--rd-surface-2);
  border-radius: 3px;
  padding: 1px 4px;
  overflow-wrap: anywhere;
}

.fnadmin-impact { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.fnadmin-impact p { margin: 0; }
.fnadmin-impact ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.fnadmin-impact-head { font-weight: 600; }
.fnadmin-impact-note { color: var(--rd-muted, #7a7c68); }

.fnadmin-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 2px;
}

.fnadmin-switch:focus-visible,
.fnadmin-field select:focus-visible {
  outline: 2px solid var(--accent, #595a3d);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .fnadmin-switch-track,
  .fnadmin-switch-knob { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   FCP FORMULAR-ATOME — Standard
   ───────────────────────────────────────────────────────────────────
   2026-08-30 — Kanonische Formularbausteine für alle FCP-Masken.
   Quelle: Artboard Formularelemente.dc.html, Owner-Abnahme 30.08.2026.
   Neue Klassen (.fcp-field, .fcp-control, .fcp-check, .fcp-radio,
   .fcp-toggle, .fcp-btn) — sie überschreiben KEINE bestehenden
   Selektoren (kein .feed-btn, kein bares input), damit keine zweite
   Kaskadenebene entsteht. Bestehende Masken bleiben unberührt, bis
   sie bewusst auf diese Atome umgestellt werden.
   Kontrollhöhe: Desktop 44px, Touch 48px (siehe Touch-Variante unten).
   ═══════════════════════════════════════════════════════════════════ */

/* ---------- Feld-Gruppe (Label + Kontrolle + Fehler/Hinweis) ---------- */

.fcp-field {
  display: grid;
  gap: 6px;
}

.fcp-field__label {
  font-size: 13px;
  color: var(--rd-ink-2, #4a4e40);
  font-weight: 500;
}

.fcp-field__required {
  color: var(--rd-gold-lo, #c05818);
}

.fcp-field__error {
  font-size: 12.5px;
  color: var(--fcp-danger, #a3391f);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
}

.fcp-field__hint {
  font-size: 12px;
  color: var(--rd-muted, #7a7c68);
  margin-top: 7px;
  line-height: 1.4;
}

/* ---------- Text-/Zahl-/Auswahlfelder ---------- */

.fcp-control {
  height: 44px;
  border: 1px solid rgba(var(--tint-rgb), 0.32);
  border-radius: 10px;
  background: var(--rd-surface-hi, #ffffff);
  padding: 0 13px;
  font-size: 14.5px;
  box-sizing: border-box;
  color: var(--rd-ink, #2a2d24);
  width: 100%;
}

.fcp-control::placeholder {
  color: var(--rd-muted, #7a7c68);
}

.fcp-control:focus,
.fcp-control:focus-visible {
  border: 1.5px solid var(--rd-gold, #d46a20);
  box-shadow: 0 0 0 3px rgba(212, 106, 32, 0.16);
  outline: none;
}

.fcp-control--error {
  border: 1.5px solid var(--fcp-danger, #a3391f);
  box-shadow: 0 0 0 3px rgba(163, 57, 31, 0.12);
}

.fcp-control:disabled,
.fcp-control--disabled {
  background: rgba(var(--tint-rgb), 0.08);
  border-color: rgba(var(--tint-rgb), 0.20);
  color: var(--rd-muted, #7a7c68);
}

.fcp-textarea {
  height: auto;
  min-height: 76px;
  padding: 10px 13px;
  font-size: 14px;
  line-height: 1.45;
}

/* Select/Datum: Chevron bzw. Kalender-Icon rechts. Als Wrapper-Layout
   (display:flex) UND als natives <select>/<input type=date> nutzbar —
   das Icon liegt als Hintergrundbild rechts, Text bricht nicht darunter. */
.fcp-control--select,
.fcp-control--date {
  display: flex;
  align-items: center;
  justify-content: space-between;
  appearance: none;
  -webkit-appearance: none;
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 36px;
}

.fcp-control--select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%237a7c68' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.fcp-control--date {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Crect x='2' y='3' width='12' height='11' rx='1.5' stroke='%237a7c68' stroke-width='1.3'/%3E%3Cpath d='M2 6.5h12M5 1.5v3M11 1.5v3' stroke='%237a7c68' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------- Checkbox / Radio / Toggle ----------
   Eigene Klassen statt globalem input-Override, appearance:none,
   damit die Atome ohne Extra-Markup funktionieren. */

input[type="checkbox"].fcp-check,
.fcp-check {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid rgba(var(--tint-rgb), 0.45);
  background: var(--rd-surface-hi, #ffffff);
  display: inline-block;
  box-sizing: border-box;
  flex-shrink: 0;
  cursor: pointer;
}

input[type="checkbox"].fcp-check:checked,
.fcp-check:checked {
  background-color: var(--rd-gold, #d46a20);
  border-color: var(--rd-gold, #d46a20);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11' fill='none'%3E%3Cpath d='M1.5 5.5l2.7 2.7 5.3-5.7' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 11px;
}

input[type="radio"].fcp-radio,
.fcp-radio {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1.5px solid rgba(var(--tint-rgb), 0.45);
  background: var(--rd-surface-hi, #ffffff);
  display: inline-block;
  box-sizing: border-box;
  flex-shrink: 0;
  cursor: pointer;
}

input[type="radio"].fcp-radio:checked,
.fcp-radio:checked {
  border: 5.5px solid var(--rd-gold, #d46a20);
  background: var(--rd-surface-hi, #ffffff);
}

input[type="checkbox"].fcp-toggle,
.fcp-toggle {
  appearance: none;
  -webkit-appearance: none;
  width: 40px;
  height: 23px;
  border-radius: 999px;
  background: rgba(var(--tint-rgb), 0.30);
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  cursor: pointer;
  transition: background-color .15s ease;
}

.fcp-toggle::after {
  content: "";
  position: absolute;
  top: 2.5px;
  left: 2.5px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(42, 45, 36, 0.25);
  transition: left .15s ease;
}

input[type="checkbox"].fcp-toggle:checked,
.fcp-toggle:checked {
  background: var(--rd-gold, #d46a20);
}

.fcp-toggle:checked::after {
  left: 19.5px;
}

/* ---------- Knöpfe (Artboard: genau EIN Primärknopf je Ansicht) ---------- */

.fcp-btn {
  height: 44px;
  padding: 0 20px;
  border-radius: 10px;
  font-size: 15px;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}

.fcp-btn--primary {
  background: var(--rd-gold, #d46a20);
  color: var(--rd-on-accent, #ffffff);
  font-weight: 600;
}

.fcp-btn--primary:hover {
  background: var(--rd-gold-hi, #bf5414);
}

.fcp-btn--secondary {
  border: 1px solid rgba(var(--tint-rgb), 0.32);
  background: transparent;
  color: var(--rd-ink-2, #4a4e40);
  font-weight: 500;
}

.fcp-btn--danger {
  border: 1px solid rgba(163, 57, 31, 0.45);
  background: transparent;
  color: var(--fcp-danger, #a3391f);
  font-weight: 500;
  /* NIE gefüllt neben dem Primärknopf */
}

.fcp-btn:disabled,
.fcp-btn--disabled {
  background: rgba(var(--tint-rgb), 0.16);
  color: #7a7c68;
  font-weight: 600;
  border: 0;
  cursor: not-allowed;
}

.fcp-btn--icon {
  height: 44px;
  width: 44px;
  padding: 0;
  border: 1px solid rgba(var(--tint-rgb), 0.32);
  background: var(--rd-surface-hi, #ffffff);
}

/* ---------- Touch-Variante ----------
   Größere Ziele für Finger statt Maus/Stift — siehe DialogHandy-Artboard. */

@media (pointer: coarse), (max-width: 899px) {
  .fcp-control,
  .fcp-btn,
  .fcp-btn--icon {
    height: 48px;
    border-radius: 12px;
    font-size: 16px;
  }

  .fcp-btn--icon {
    width: 48px;
  }

  .fcp-textarea {
    font-size: 16px;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   FCP DATA-TABLE — SPALTENKOPF-STANDARD
   ───────────────────────────────────────────────────────────────────
   Quelle: Artboards SpaltenkopfStandard.dc.html, Kontextmenu.dc.html,
           FanglisteDesktop.dc.html, FilterHandy.dc.html
   Owner-Abnahme: 30.08.2026 ("Der data-table wird EINMAL im Designsystem
   definiert — Spaltenkopf mit Sortieren, Filtern, Ein-/Ausblenden, Resize
   und Reihenfolge gehört zum Standard. Jede Maske nutzt denselben
   Baustein; künftige Änderungen passieren am Designsystem, nie als
   Insellösung in einer Maske.")

   Alle Klassen hier sind NEU — sie überschreiben keine bestehende Regel.
   Die Ruhe-Optik des Kopfes (Fläche, Trennlinie) ist an ihrer Quelle in
   main.css geändert, damit keine zweite Kaskadenebene entsteht.

   Vier Zustände des Kopfes:
     Ruhe      — nur der Titel, keine Icons
     Hover     — Griff, Sortierpfeil und Trichter erscheinen
     Sortiert  — Titel und Pfeil in Gold
     Gefiltert — gefüllter Trichter, Zähler-Badge, Spalte leicht getönt
   ═══════════════════════════════════════════════════════════════════ */

.fcp-dt-head {
  align-items: center;
  gap: 6px;
  padding: 0 6px 0 4px;
  transition: background .12s ease;
}

.fcp-dt__head .fcp-dt-head:hover {
  background: rgba(var(--tint-rgb), .07);
}

.fcp-dt-head__title {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 8px;
  cursor: pointer;
}

.fcp-dt-head__title[disabled] {
  cursor: default;
}

.fcp-dt-head__label {
  font-size: 12.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rd-muted, #7a7c68);
  font-weight: 600;
  /* Owner-Artboard 09.09.2026, Punkt f: Spaltennamen werden nicht mehr
     abgeschnitten ("VERE..." statt "Vereins-Nr."). Reicht die Spaltenbreite
     nicht, bricht der Name auf zwei Zeilen um. */
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

/* Griff, Sortierpfeil und Trichter sind in Ruhe unsichtbar und
   beanspruchen trotzdem ihren Platz — sonst springt der Titel beim
   Überfahren. */
.fcp-dt-head__grip,
.fcp-dt-head__sort {
  opacity: 0;
  transition: opacity .12s ease, color .12s ease;
}

.fcp-dt-head:hover .fcp-dt-head__grip,
.fcp-dt-head:hover .fcp-dt-head__sort,
.fcp-dt-head:hover .fcp-dt-head__filter,
.fcp-dt-head:focus-within .fcp-dt-head__grip,
.fcp-dt-head:focus-within .fcp-dt-head__sort,
.fcp-dt-head:focus-within .fcp-dt-head__filter {
  opacity: 1;
}

.fcp-dt-head__grip {
  display: inline-flex;
  align-items: center;
  flex: none;
  cursor: grab;
  padding: 0 1px;
}

.fcp-dt-head__grip .fcp-dt-icon--grip {
  fill: rgba(var(--tint-rgb), .55);
}

.fcp-dt-head__sort {
  display: inline-flex;
  align-items: center;
  flex: none;
  color: rgba(var(--tint-rgb), .5);
}

.fcp-dt-head .fcp-dt-head__filter {
  all: unset;
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  cursor: pointer;
  color: rgba(var(--tint-rgb), .5);
  /* "all: unset" setzt auch die Deckkraft aus der Zustandsregel oben
     zurück — der Ruhezustand muss deshalb HIER stehen, sonst zeigt der
     Trichter dauerhaft und der Kopf ist nie wirklich in Ruhe. */
  opacity: 0;
  transition: opacity .12s ease, color .12s ease;
}

.fcp-dt-head .fcp-dt-head__filter:hover {
  background: rgba(var(--tint-rgb), .12);
}

/* Zustand „Sortiert" — Titel und Pfeil in Gold, Pfeil bleibt sichtbar. */
.fcp-dt-head.is-sorted .fcp-dt-head__label {
  color: var(--rd-gold-lo, #c05818);
}

.fcp-dt-head.is-sorted .fcp-dt-head__sort {
  opacity: 1;
  color: var(--rd-gold-lo, #c05818);
}

/* Zustand „Gefiltert" — Spalte getönt, Trichter gefüllt, Zähler-Badge. */
.fcp-dt-head.is-filtered {
  background: rgba(212, 106, 32, .08);
}

.fcp-dt-head.is-filtered .fcp-dt-head__label {
  color: var(--rd-gold-lo, #c05818);
}

.fcp-dt-head .fcp-dt-head__filter.is-on {
  opacity: 1;
  color: var(--rd-gold-lo, #c05818);
}

.fcp-dt-head__badge {
  position: absolute;
  top: -3px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--rd-gold, #d46a20);
  color: var(--rd-on-accent, #ffffff);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-sizing: border-box;
}

/* ── Breite ziehen ─────────────────────────────────────────────────
   Die Greiffläche ist bewusst breiter als die sichtbare Linie —
   8 px lassen sich mit der Maus treffen, 1 px nicht. */
.fcp-dt-head__resizer {
  position: absolute;
  top: 0;
  right: -4px;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  z-index: 3;
  touch-action: none;
}

.fcp-dt-head__resizer::after {
  content: "";
  position: absolute;
  top: 20%;
  left: 3px;
  width: 2px;
  height: 60%;
  border-radius: 2px;
  background: transparent;
  transition: background .12s ease;
}

.fcp-dt-head__resizer:hover::after,
.fcp-dt-head__resizer.is-active::after {
  background: var(--rd-gold, #d46a20);
}

.fcp-dt-head__resizer.is-active::after {
  top: 0;
  height: 100%;
  width: 2px;
}

.data-table.is-resizing {
  cursor: col-resize;
  user-select: none;
}

/* ── Reihenfolge ziehen — goldene Linie zeigt die Einsortierung ──── */
.fcp-dt-head.is-dragging {
  opacity: .45;
}

.fcp-dt-head.is-drop-before::before,
.fcp-dt-head.is-drop-after::after {
  content: "";
  position: absolute;
  top: 0;
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: var(--rd-gold, #d46a20);
  z-index: 4;
}

.fcp-dt-head.is-drop-before::before { left: -1px; }
.fcp-dt-head.is-drop-after::after { right: -1px; }


/* ═══════════════════════════════════════════════════════════════════
   FCP DATA-TABLE — ÜBERLAGERUNGEN
   ───────────────────────────────────────────────────────────────────
   Ein Menükörper für drei Aufgaben: Spaltenfilter (Excel-Prinzip, öffnet
   AN der geklickten Spalte), Spalten-Menü (Sichtbarkeit + Reihenfolge)
   und Rechtsklick-Kontextmenü. Gleiche Fläche, Radien und Icons.
   Am Handy wird aus demselben Inhalt ein Dialog von unten.
   ═══════════════════════════════════════════════════════════════════ */

.fcp-dt-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
}

.fcp-dt-overlay--popover .fcp-dt-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: transparent;
}

.fcp-dt-overlay--popover .fcp-dt-menu {
  position: absolute;
  width: 252px;
  max-height: min(60vh, 460px);
  overflow-y: auto;
  /* Owner-Befund 04.09.2026: Popover hängt per document.body.appendChild
     außerhalb von .is-redesign — fest weiße Fläche + var(--rd-ink)-Text
     ergab im Dunkel hellen Text auf Weiß (unbedienbar). Jetzt Fläche und
     Rahmen ebenfalls über --rd-* (Fallback bleibt der bisherige helle
     Wert, der Body trägt die echten Tokens jetzt auch im Dunkeln). */
  background: var(--rd-surface, #ffffff);
  border: 1px solid var(--rd-line-strong, rgba(var(--tint-rgb), .28));
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(42, 45, 36, .20);
  padding: 8px 6px;
  box-sizing: border-box;
  color: var(--rd-ink, #2a2d24);
}

.fcp-dt-overlay--popover .fcp-dt-menu--columns { width: 230px; }
.fcp-dt-overlay--popover .fcp-dt-menu--context { width: 236px; padding: 6px; }

.fcp-dt-menu__title {
  padding: 4px 10px 8px;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rd-muted, #7a7c68);
  font-weight: 600;
}

.fcp-dt-menu__group {
  display: flex;
  flex-direction: column;
}

.fcp-dt-menu .fcp-dt-menu__item {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--rd-ink, #2a2d24);
  cursor: pointer;
}

.fcp-dt-menu .fcp-dt-menu__item svg { color: var(--rd-muted, #7a7c68); flex: none; }
.fcp-dt-menu .fcp-dt-menu__item:hover { background: rgba(var(--tint-rgb), .10); }

.fcp-dt-menu .fcp-dt-menu__item.is-accent {
  background: rgba(212, 106, 32, .10);
  color: var(--rd-gold-lo, #c05818);
  font-weight: 600;
}

.fcp-dt-menu .fcp-dt-menu__item.is-accent svg { color: var(--rd-gold-lo, #c05818); }

.fcp-dt-menu__hint {
  margin-left: auto;
  color: var(--rd-muted, #7a7c68);
  font-size: 12px;
}

.fcp-dt-menu__sep {
  height: 1px;
  background: rgba(var(--tint-rgb), .18);
  margin: 4px 8px;
}

.fcp-dt-menu__searchwrap {
  position: relative;
  margin: 6px 6px 2px;
}

.fcp-dt-menu__searchicon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  color: var(--rd-muted, #7a7c68);
  pointer-events: none;
}

.fcp-dt-menu .fcp-dt-menu__search {
  width: 100%;
  height: 32px;
  min-height: 32px;
  box-sizing: border-box;
  padding: 0 10px 0 30px;
  border: 1px solid var(--rd-line-strong, rgba(var(--tint-rgb), .28));
  border-radius: 8px;
  background: var(--rd-surface, #ffffff);
  font-size: 13px;
  color: var(--rd-ink, #2a2d24);
}

/* Owner-Grundsatz 04.09.2026: Touch-Zweig, damit iOS beim Fokus nicht zoomt. */
@media (pointer: coarse), (max-width: 899px) {
  .fcp-dt-menu .fcp-dt-menu__search {
    font-size: 16px;
  }
}

.fcp-dt-menu .fcp-dt-menu__search:focus {
  outline: none;
  border-color: var(--rd-gold, #d46a20);
  box-shadow: 0 0 0 3px rgba(212, 106, 32, .16);
}

.fcp-dt-menu__list {
  display: flex;
  flex-direction: column;
  padding: 6px 0 4px;
  max-height: 240px;
  overflow-y: auto;
}

.fcp-dt-menu .fcp-dt-menu__option {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--rd-ink, #2a2d24);
  cursor: pointer;
}

.fcp-dt-menu .fcp-dt-menu__option:hover { background: rgba(var(--tint-rgb), .10); }
.fcp-dt-menu .fcp-dt-menu__option--all { font-weight: 600; }

.fcp-dt-menu__optionlabel {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fcp-dt-menu__count {
  color: var(--rd-muted, #7a7c68);
  font-size: 12px;
  flex: none;
}

.fcp-dt-menu__empty {
  margin: 0;
  padding: 12px 10px;
  font-size: 13px;
  color: var(--rd-muted, #7a7c68);
  text-align: center;
}

/* Kästchen im Menü — dieselbe Sprache wie die Checkbox-Atome,
   nur eine Spur kleiner, weil sie in einer Liste sitzen. */
.fcp-dt-check {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--rd-line-strong, rgba(var(--tint-rgb), .45));
  background: var(--rd-surface, #ffffff);
  box-sizing: border-box;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--rd-on-accent, #ffffff);
}

.fcp-dt-check.is-on,
.fcp-dt-check.is-mixed {
  background: var(--rd-gold, #d46a20);
  border-color: var(--rd-gold, #d46a20);
}

.fcp-dt-menu__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 6px;
}

.fcp-dt-menu .fcp-dt-menu__reset {
  all: unset;
  box-sizing: border-box;
  flex: 1 1 auto;
  font-size: 13px;
  color: var(--rd-gold-lo, #c05818);
  font-weight: 500;
  cursor: pointer;
}

.fcp-dt-menu .fcp-dt-menu__reset--block {
  display: block;
  padding: 7px 10px 3px;
  font-size: 12.5px;
}

.fcp-dt-menu .fcp-dt-menu__apply {
  all: unset;
  box-sizing: border-box;
  height: 32px;
  padding: 0 18px;
  border-radius: 8px;
  background: var(--rd-gold, #d46a20);
  color: var(--rd-on-accent, #ffffff);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.fcp-dt-menu .fcp-dt-menu__apply:hover { background: var(--rd-gold-hi, #bf5414); }

/* ── Spalten-Menü: Zeilen mit Griff und Häkchen ─────────────────── */
.fcp-dt-colrow {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: 8px;
  cursor: grab;
}

.fcp-dt-colrow:hover { background: rgba(var(--tint-rgb), .10); }
.fcp-dt-colrow.is-off { color: var(--rd-muted, #7a7c68); }
.fcp-dt-colrow.is-off .fcp-dt-icon--grip { fill: rgba(var(--tint-rgb), .35); }
.fcp-dt-colrow__grip { display: inline-flex; flex: none; }
.fcp-dt-colrow__grip .fcp-dt-icon--grip { fill: rgba(var(--tint-rgb), .55); }

.fcp-dt-menu .fcp-dt-colrow__toggle {
  all: unset;
  box-sizing: border-box;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  cursor: pointer;
}

.fcp-dt-menu .fcp-dt-colrow__toggle[disabled] { cursor: default; opacity: .55; }

.fcp-dt-colrow.is-drop-before::before,
.fcp-dt-colrow.is-drop-after::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--rd-gold, #d46a20);
}

.fcp-dt-colrow.is-drop-before::before { top: -1px; }
.fcp-dt-colrow.is-drop-after::after { bottom: -1px; }


/* ═══════════════════════════════════════════════════════════════════
   FCP DATA-TABLE — FILTER ALS DIALOG VON UNTEN (Handy)
   ───────────────────────────────────────────────────────────────────
   Quelle: Artboard FilterHandy.dc.html. Gleiche Inhalte, gleiche
   Reihenfolge wie das Popover — nur als Vollbreite-Sheet mit größeren
   Zielflächen (48 px Touch) und einer festen Fußzeile.
   ═══════════════════════════════════════════════════════════════════ */

.fcp-dt-overlay--sheet .fcp-dt-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(42, 45, 36, .38);
}

.fcp-dt-overlay--sheet .fcp-dt-menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--rd-surface);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -12px 36px rgba(42, 45, 36, .30);
  color: var(--rd-ink, #2a2d24);
}

.fcp-dt-menu__handle {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--rd-line-strong, rgba(var(--tint-rgb), .35));
  margin: 10px auto 2px;
  flex: none;
}

.fcp-dt-menu__sheethead {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 8px 16px;
  flex: none;
}

.fcp-dt-menu__sheettitle {
  flex: 1 1 auto;
  font-size: 17px;
  font-weight: 600;
}

.fcp-dt-menu .fcp-dt-menu__close {
  all: unset;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--rd-ink-2, #4a4e40);
  flex: none;
}

.fcp-dt-overlay--sheet .fcp-dt-menu__title { display: none; }

.fcp-dt-overlay--sheet .fcp-dt-menu__group { padding: 0 8px; }

.fcp-dt-overlay--sheet .fcp-dt-menu__item {
  gap: 12px;
  padding: 12px 10px;
  min-height: 48px;
  font-size: 15px;
}

.fcp-dt-overlay--sheet .fcp-dt-menu__item svg { width: 17px; height: 17px; }
.fcp-dt-overlay--sheet .fcp-dt-menu__hint { font-size: 13px; }
.fcp-dt-overlay--sheet .fcp-dt-menu__sep { margin: 4px 16px; }
.fcp-dt-overlay--sheet .fcp-dt-menu__searchwrap { margin: 10px 16px 0; }
.fcp-dt-overlay--sheet .fcp-dt-menu__searchicon { left: 12px; }

.fcp-dt-overlay--sheet .fcp-dt-menu__search {
  height: 44px;
  min-height: 44px;
  border-radius: 12px;
  padding: 0 12px 0 34px;
  font-size: 16px;
  border-color: var(--rd-line-strong, rgba(var(--tint-rgb), .28));
}

.fcp-dt-overlay--sheet .fcp-dt-menu__list {
  padding: 6px 8px 0;
  max-height: none;
  flex: 1 1 auto;
  overflow-y: auto;
}

.fcp-dt-overlay--sheet .fcp-dt-menu__option,
.fcp-dt-overlay--sheet .fcp-dt-colrow {
  gap: 12px;
  padding: 12px 10px;
  min-height: 48px;
  font-size: 15px;
}

.fcp-dt-overlay--sheet .fcp-dt-menu__count { font-size: 13px; }

.fcp-dt-overlay--sheet .fcp-dt-check {
  width: 20px;
  height: 20px;
  border-radius: 6px;
}

.fcp-dt-overlay--sheet .fcp-dt-check svg { width: 12px; height: 12px; }

.fcp-dt-overlay--sheet .fcp-dt-menu__foot {
  display: flex;
  gap: 10px;
  padding: 12px 16px 28px;
  border-top: 1px solid var(--rd-line, rgba(var(--tint-rgb), .18));
  margin-top: 6px;
  flex: none;
}

.fcp-dt-overlay--sheet .fcp-dt-menu__reset {
  flex: none;
  height: 52px;
  padding: 0 18px;
  border: 1px solid var(--rd-line-strong, rgba(var(--tint-rgb), .32));
  border-radius: 12px;
  color: var(--rd-ink-2, #4a4e40);
  font-size: 16px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fcp-dt-overlay--sheet .fcp-dt-menu__reset--block {
  flex: 1 1 auto;
  margin: 0 16px 24px;
}

.fcp-dt-overlay--sheet .fcp-dt-menu__apply {
  flex: 1 1 auto;
  height: 52px;
  border-radius: 12px;
  font-size: 16px;
  justify-content: center;
}

/* Am Handy ersetzt die Card-Liste die Tabelle — der Kopf mit Griff und
   Trichter hat dort keine Aufgabe mehr. */
@media (max-width: 899px) {
  .fcp-dt-head__resizer,
  .fcp-dt-head__grip {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   FANGLISTE — KPI-LEISTE, TOOLBAR, SEGMENTED-TOGGLE, MOBILE CARD-LISTE
   ───────────────────────────────────────────────────────────────────
   Bauauftrag Paket 4 + 5 (2026-08-30), Referenzmaske Fangliste.
   Quelle: Artboards FanglisteDesktop.dc.html / FanglisteHandy.dc.html.
   Ausschließlich neue, auf .catch-screen begrenzte Klassen. Wo eine
   Klasse mit main.css kollidiert (z. B. .trip-view-toggle .feed-btn),
   wird bewusst mit gleicher oder höherer Selektor-Spezifität
   überschrieben — genau die Rolle, für die diese Datei nach main.css
   geladen wird (siehe FCP-DATA-TABLE-Blöcke oben als Präzedenzfall).
   ═══════════════════════════════════════════════════════════════════ */

/* ---------- Paket 5a: KPI-Leiste (ersetzt die alte Stats-Box unten) ---------- */

.catch-screen__kpis {
  display: block;
}

.fangliste-kpis__msg {
  margin: 0;
  color: var(--rd-muted, #7a7c68);
}

/* .workscreen ist ein Grid ohne Spaltendefinition. Grid-Items haben
   min-width:auto — die KPI-Leiste (4×148px + Lücken = 640px) zwang damit
   die einzige Spur auf 640px und sprengte die Maske am Handy nach rechts.
   min-width:0 lässt die Items schrumpfen; die KPI-Leiste scrollt dann in
   sich (overflow-x:auto), wie im Artboard FanglisteHandy vorgesehen. */
.catch-screen > * {
  min-width: 0;
}

.fangliste-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.fangliste-kpi {
  background: var(--rd-surface);
  border: 1px solid rgba(var(--tint-rgb), 0.20);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 1px 3px rgba(42, 45, 36, 0.07);
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

.fangliste-kpi__icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--rd-gold-soft, rgba(212, 106, 32, 0.12));
  display: grid;
  place-items: center;
  flex: none;
}

.fangliste-kpi__icon svg {
  width: 19px;
  height: 19px;
  display: block;
}

.fangliste-kpi__body {
  display: block;
  min-width: 0;
}

.fangliste-kpi__label {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rd-muted, #7a7c68);
  font-weight: 600;
}

/* Desktop volles Label („Fangquote"), Handy das kurze („Quote") —
   beide stehen im Markup, hier wird umgeschaltet. */
.fangliste-kpi__label--kurz {
  display: none;
}

.fangliste-kpi__value-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 3px;
}

.fangliste-kpi__value {
  font-size: 27px;
  font-weight: 680;
  letter-spacing: -0.01em;
  color: var(--rd-ink, #2a2d24);
  white-space: nowrap;
  /* Ein zu langer Wert darf die Kachel nie mehr sprengen — er wird
     abgeschnitten statt über den Maskenrand hinauszulaufen. */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fangliste-kpi__unit {
  font-size: 13px;
  color: var(--rd-muted, #7a7c68);
}

.fangliste-kpi__subline {
  display: block;
  font-size: 12.5px;
  color: var(--rd-muted, #7a7c68);
  margin-top: 2px;
}

@media (max-width: 899px) {
  /* Owner-GO 30.08. (Artboard FangstatistikHandy): 2×2-Raster statt
     seitlichem Scrollen — alle vier Werte auf einen Blick, kein Wert
     versteckt sich hinter dem Rand. Löst die frühere Scroll-Leiste ab. */
  .fangliste-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .fangliste-kpi {
    width: auto;
    padding: 10px 12px;
    border-radius: 12px;
  }

  .fangliste-kpi__icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }

  .fangliste-kpi__label {
    font-size: 10.5px;
  }

  .fangliste-kpi__label--lang {
    display: none;
  }

  .fangliste-kpi__label--kurz {
    display: inline;
  }

  .fangliste-kpi__value {
    font-size: 20px;
  }

  .fangliste-kpi__value-row {
    margin-top: 1px;
  }

  /* Quelle FanglisteHandy.dc.html: am Handy nur Label + nackte Zahl,
     Einheit und Subline entfallen — kein Platz in der 148px-Kachel. */
  .fangliste-kpi__unit,
  .fangliste-kpi__subline {
    display: none;
  }
}

/* ---------- Paket 5c: Toolbar-Zeile (Suche · Spalten · Segmented-Toggle) ---------- */

.fangliste-toolbar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.fangliste-toolbar-row__search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  max-width: 320px;
  margin: 0;
}

.fangliste-toolbar-row__search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--rd-muted, #7a7c68);
  pointer-events: none;
}

.fangliste-toolbar-row__search-input {
  width: 100%;
  height: 40px;
  border: 1px solid rgba(var(--tint-rgb), 0.32);
  border-radius: 10px;
  background: var(--rd-surface-hi, #ffffff);
  padding: 0 12px 0 36px;
  font-size: 14px;
  box-sizing: border-box;
  color: var(--rd-ink, #2a2d24);
}

/* Owner-Grundsatz 04.09.2026: Touch-Zweig, damit iOS beim Fokus nicht zoomt. */
@media (pointer: coarse), (max-width: 899px) {
  .fangliste-toolbar-row__search-input {
    font-size: 16px;
  }
}

.fangliste-toolbar-row__search-input::placeholder {
  color: var(--rd-muted, #7a7c68);
}

.fangliste-toolbar-row__search-input:focus,
.fangliste-toolbar-row__search-input:focus-visible {
  border-color: var(--rd-gold, #d46a20);
  outline: none;
  box-shadow: 0 0 0 3px rgba(212, 106, 32, 0.16);
}

.fangliste-toolbar-row__spacer {
  flex: 1;
}

.fangliste-toolbar-row__columns-btn {
  height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(var(--tint-rgb), 0.32);
  background: var(--rd-surface-hi, #ffffff);
  color: var(--rd-ink-2, #4a4e40);
  font-size: 14px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  white-space: nowrap;
  flex: none;
}

.fangliste-toolbar-row__columns-btn svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.fangliste-toolbar-row__columns-btn:hover,
.fangliste-toolbar-row__columns-btn:focus-visible {
  border-color: rgba(var(--tint-rgb), 0.48);
}

/* Handy-Filterknopf: unsichtbar am Desktop, ersetzt dort Spalten-Knopf +
   Segmented-Toggle als einziges Filterwerkzeug in der Toolbar-Zeile. */
.fangliste-toolbar-row__mobile-filter {
  display: none;
  position: relative;
  /* Icon-Knopf: das .fcp-btn-Textpadding (0 20px) würde bei 44px
     Gesamtbreite den Innenraum auf 2px quetschen — Icon unsichtbar. */
  padding: 0;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(var(--tint-rgb), 0.28);
  background: var(--rd-surface-hi, #ffffff);
  border-radius: 12px;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--rd-ink-2, #4a4e40);
  cursor: pointer;
}

.fangliste-toolbar-row__mobile-filter svg {
  width: 17px;
  height: 17px;
}

.fangliste-toolbar-row__mobile-filter-dot {
  display: none;
  position: absolute;
  top: 7px;
  right: 7px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--rd-gold, #d46a20);
}

.fangliste-toolbar-row__mobile-filter.is-active-filter .fangliste-toolbar-row__mobile-filter-dot {
  display: block;
}

/* ---------- Segmented-Toggle — Standardbaustein ----------
   Quelle: Artboard FanglisteDesktop.dc.html (Tabelle/Karten).
   Bewusst OHNE .feed-btn und ohne .trip-view-toggle aufgebaut: beide
   tragen bereits Regeln aus app-shell.css und main.css. Trüge der
   Umschalter sie weiter, entschiede allein die Ladereihenfolge, welche
   Optik gewinnt. Eigene Klassen heißt: eine Quelle, kein Tie-Break.
   Nutzbar in jeder Maske, nicht nur in der Fangliste. */

.fcp-segmented {
  display: inline-flex;
  gap: 2px;
  /* Token deckungsgleich mit --rd-line (redesign.css) — Fallback ist das
     bisherige Literal. Außerhalb eines .is-redesign-Vorfahren (z. B.
     Fangliste) existiert --rd-line nicht, der Fallback greift unverändert.
     Erst innerhalb .is-redesign[data-rd-theme="dark"] löst der Aufruf auf
     den dort bereits definierten Dunkel-Wert auf. */
  background: var(--rd-line, rgba(var(--tint-rgb), 0.14));
  border-radius: 999px;
  padding: 3px;
  flex: none;
}

.fcp-segmented .fcp-segmented__btn {
  all: unset;
  box-sizing: border-box;
  height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  background: transparent;
  color: var(--rd-muted, #7a7c68);
  font-size: 14px;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
}

.fcp-segmented .fcp-segmented__btn.is-active {
  /* Token deckungsgleich mit --rd-surface-hi (redesign.css) — gleiches
     Fallback-Prinzip wie oben bei .fcp-segmented. */
  background: var(--rd-surface-hi, #ffffff);
  box-shadow: 0 1px 2px rgba(42, 45, 36, 0.14);
  color: var(--rd-gold-lo, #c05818);
  font-weight: 600;
}

.fcp-segmented .fcp-segmented__btn svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.fcp-segmented .fcp-segmented__btn:focus-visible {
  outline: 2px solid var(--rd-gold, #d46a20);
  outline-offset: 1px;
}

/* Touch: 44 px Zielfläche, ohne dass die Hülle die Toolbar sprengt. */
@media (pointer: coarse) {
  .fcp-segmented .fcp-segmented__btn {
    height: 44px;
    font-size: 15px;
  }
}

/* Dunkel-Pendant, Owner-Befund 04.09.2026 (Top 5, Fund 5): der Schalter,
   der Hell/Dunkel umschaltet, hatte selbst keine Dunkel-Variante — die
   var(--rd-*, Fallback)-Aufrufe oben lösen außerhalb eines .is-redesign-
   Vorfahren immer auf den hellen Fallback auf. Diese Regel gilt für JEDES
   .fcp-segmented (Einstellungen, Fangliste, jede weitere Maske), nicht nur
   innerhalb .is-redesign — höhere Spezifität gewinnt in beiden Fällen und
   löst in Dunkel überall auf denselben Tokenwert auf. */
html[data-fcp-theme="dark"] .fcp-segmented {
  background: var(--line);
}

html[data-fcp-theme="dark"] .fcp-segmented .fcp-segmented__btn {
  color: var(--muted);
}

html[data-fcp-theme="dark"] .fcp-segmented .fcp-segmented__btn.is-active {
  background: var(--surface-2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  color: var(--accent);
}

html[data-fcp-theme="dark"] .fcp-segmented .fcp-segmented__btn:focus-visible {
  outline-color: var(--accent);
}

@media (max-width: 899px) {
  /* Maskenentscheidung, keine Eigenschaft des Bausteins: am Handy ersetzt
     die Card-Liste die Tabelle, damit hat der Umschalter nichts zu wählen.
     Deshalb hier auf die Fangliste-Toolbar bezogen und nicht auf
     .fcp-segmented allgemein — andere Masken dürfen ihn behalten. */
  .fangliste-toolbar-row__columns-btn,
  .catch-screen .fcp-segmented {
    display: none;
  }

  .fangliste-toolbar-row__mobile-filter {
    display: flex;
  }

  .fangliste-toolbar-row__search {
    max-width: none;
  }

  .fangliste-toolbar-row__search-input {
    height: 44px;
    border-radius: 12px;
    font-size: 16px;
  }
}

/* ---------- Paket 4: Card-Liste am Handy (ersetzt die Tabelle, keine Schrumpfform) ---------- */

.fangliste-cardlist {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fangliste-card {
  background: var(--rd-surface);
  border: 1px solid rgba(var(--tint-rgb), 0.22);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  cursor: pointer;
}

.fangliste-card__body {
  flex: 1;
  min-width: 0;
}

.fangliste-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fangliste-card__date {
  font-size: 15px;
  font-weight: 600;
  color: var(--rd-ink, #2a2d24);
}

.fangliste-card__chip {
  font-size: 12px;
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}

.fangliste-card__chip--catch {
  font-weight: 600;
  color: var(--rd-gold-lo, #c05818);
  background: var(--rd-gold-soft, rgba(212, 106, 32, 0.12));
}

.fangliste-card__chip--empty {
  color: var(--rd-muted, #7a7c68);
  border: 1px solid rgba(var(--tint-rgb), 0.32);
}

.fangliste-card__meta {
  margin: 3px 0 0;
  font-size: 13px;
  color: var(--rd-muted, #7a7c68);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fangliste-card__chevron {
  width: 18px;
  height: 18px;
  flex: none;
}

/* ═══════════════════════════════════════════════════════════════════
   FANGLISTE-RAHMEN nach FanglisteDesktop-Artboard (Owner-Abnahme 30.08.)
   Volle Arbeitsbreite mit 1400er-Deckel; Kopf = genau EIN Primärknopf
   rechts. Der FAB gehört laut Handy-Artboard nur auf Mobil — ab 900px
   übernimmt der Kopf-Knopf, darunter der FAB.
   ───────────────────────────────────────────────────────────────────
   KORREKTUR 31.08.2026 (Owner-Begehung): Titel 26px + Subline lagen
   hier als eigener H1-Block — duplizierte die Topbar ("Fangliste").
   H1/Subline sind aus dem Markup entfernt (Site.astro-Topbar führt),
   die zugehörigen Regeln (.catch-screen h1 gross, .catch-screen__subline)
   sind mit ihnen entfallen statt als totes CSS liegen zu bleiben.
   ═══════════════════════════════════════════════════════════════════ */

body[data-app-theme="fcp_tactical"] .catch-screen {
  max-width: 1400px;
  margin: 0 auto;
}

body[data-app-theme="fcp_tactical"] .catch-screen .catch-screen__header .catch-table-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.fangliste-add-btn {
  height: 44px;
  padding: 0 20px;
  border: 0;
  /* Owner-Rückgabe 05.09.2026: fest #d46a20 + Weiß blieb im Dunkeln hell-
     orange mit unlesbarem Weiß (~2,2:1 auf dem hellen Dunkel-Gold) --
     dieselben Tokens wie .fcp-btn--primary. */
  background: var(--rd-gold, #d46a20);
  color: var(--rd-on-accent, #fff);
  font-size: 15px;
  font-weight: 600;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background-color .15s;
}

.fangliste-add-btn:hover {
  background: var(--rd-gold-hi, #c05818);
}

@media (min-width: 900px) {
  .fangliste-fab-stack { display: none; }
}

@media (max-width: 899px) {
  .fangliste-add-anchor { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   DIALOG-STANDARDFORM — Owner-Entscheidung 30.08.2026
   ───────────────────────────────────────────────────────────────────
   Quelle: Artboards Main.dc.html (Desktop-Modal) und
   DialogHandy.dc.html (Handy-Vollbild-Sheet).
   Anatomie überall gleich: Kopf (Titel + Kontext + Schließen) /
   Felder (scrollbar) / feste Aktionsleiste.
   Ersetzt die Seitenpanel-Optik des catch-dialog auf /app/*-Masken,
   die die Klasse .fcp-dialog tragen. Die alten catch-dialog-Regeln
   bleiben für Masken ohne Umzug unberührt.
   ═══════════════════════════════════════════════════════════════════ */

/* Overlay: abgedunkelter Grund, Modal mittig (Desktop) */
body[data-app-theme="fcp_tactical"] .fcp-dialog {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 44px 24px;
  background: rgba(42, 45, 36, 0.38);
  overflow: auto;
  border: 0;
  box-shadow: none;
}

/* hidden-Attribut muss gegen display:flex gewinnen (FCP-Fallgrube:
   CSS-Klassen können hidden überschreiben) */
body[data-app-theme="fcp_tactical"] .fcp-dialog[hidden],
body[data-app-theme="fcp_tactical"] .fcp-dialog.hidden {
  display: none !important;
}

/* Panel: Karte mit Rahmen + Schatten, Kopf/Body/Fuß als Spalte */
body[data-app-theme="fcp_tactical"] .fcp-dialog .fcp-dialog__panel {
  width: 560px;
  max-width: 100%;
  height: auto;
  max-height: calc(100dvh - 88px);
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--rd-surface);
  border: 1px solid rgba(var(--tint-rgb), 0.22);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(42, 45, 36, 0.28);
  transform: none;
  transition: none;
}

/* Grip: nur am Handy-Sheet sichtbar */
body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fcp-dialog__grip {
  display: none;
}

/* Kopf */
body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fcp-dialog__head {
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 24px 14px;
  border-bottom: 1px solid rgba(var(--tint-rgb), 0.18);
}

body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fcp-dialog__titles {
  flex: 1;
  min-width: 0;
}

body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fcp-dialog__title {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 19px;
  font-weight: 600;
  color: var(--rd-ink, #2a2d24);
  letter-spacing: normal;
}

body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fcp-dialog__context {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--rd-muted, #7a7c68);
}

body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fcp-dialog__context:empty {
  display: none;
}

body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fcp-dialog__close {
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--rd-ink-2, #4a4e40);
  cursor: pointer;
}

body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fcp-dialog__close:hover {
  background: rgba(var(--tint-rgb), 0.14);
}

/* Felderbereich: scrollt, Kopf und Fuß bleiben stehen */
body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fcp-dialog__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px 24px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Feldbeschriftungen nach Artboard (13px/500) */
body[data-app-theme="fcp_tactical"] .fcp-dialog__body label > span {
  font-size: 13px;
  font-weight: 500;
  color: var(--rd-ink-2, #4a4e40);
}

/* Eingabefelder nach Artboard Main.dc.html: WEISS auf Sand — das Feld hebt
   sich von der Dialogfläche ab. Die Theme-Pauschalregel in main.css streicht
   Inputs sonst sandfarben; diese Regel ist spezifischer und gilt nur im
   Standardform-Dialog. */
body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fcp-dialog__body input:not([type="checkbox"]):not([type="radio"]),
body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fcp-dialog__body select,
body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fcp-dialog__body .fcp-combobox__trigger {
  min-height: 44px;
  border: 1px solid rgba(var(--tint-rgb), 0.32);
  border-radius: 10px;
  /* Owner-Rückgabe 05.09.2026: fest Weiß blieb im Dunkeln stehen, waehrend
     die Schrift (--rd-ink) auf --text umschaltete — helle Schrift auf
     weissem Feld. var(--rd-surface-hi, #fff) ist im Hellen weiterhin Weiss
     (Fallback identisch zum bisherigen Wert), im Dunkeln --surface-2. */
  background: var(--rd-surface-hi, #ffffff);
  color: var(--rd-ink, #2a2d24);
  font-size: 15px;
  padding: 0 12px;
}

body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fcp-dialog__body textarea {
  min-height: 64px;
  border: 1px solid rgba(var(--tint-rgb), 0.32);
  border-radius: 10px;
  background: var(--rd-surface-hi, #ffffff);
  color: var(--rd-ink, #2a2d24);
  font-size: 15px;
  padding: 10px 12px;
}

/* Feste Aktionsleiste */
body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fcp-dialog__footer {
  flex: none;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  justify-content: flex-end;
  margin: 0;
  padding: 14px 24px 18px;
  border-top: 1px solid rgba(var(--tint-rgb), 0.18);
  background: var(--rd-surface);
}

body[data-app-theme="fcp_tactical"] .fcp-dialog__footer .fcp-dialog__footer-spacer {
  flex: 1;
}

/* Löschen: roter Textknopf links, NIE gefüllt (Artboard) */
body[data-app-theme="fcp_tactical"] .fcp-dialog__footer .fcp-dialog__danger {
  height: auto;
  padding: 10px 4px;
  border: 0;
  background: transparent;
  color: var(--fcp-danger, #a3391f);
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
}

body[data-app-theme="fcp_tactical"] .fcp-dialog__footer .fcp-dialog__danger:hover {
  background: rgba(163, 57, 31, 0.08);
}

/* ---------- Handy: Vollbild-Sheet (Artboard DialogHandy) ---------- */
@media (max-width: 899px) {
  body[data-app-theme="fcp_tactical"] .fcp-dialog {
    padding: 0;
    align-items: stretch;
  }

  body[data-app-theme="fcp_tactical"] .fcp-dialog .fcp-dialog__panel {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fcp-dialog__grip {
    display: flex;
    justify-content: center;
    padding: 10px 0 2px;
  }

  body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fcp-dialog__grip::before {
    content: "";
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: rgba(var(--tint-rgb), 0.35);
  }

  body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fcp-dialog__head {
    padding: 8px 12px 12px;
    align-items: center;
  }

  body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fcp-dialog__title {
    font-size: 17px;
  }

  body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fcp-dialog__close {
    width: 44px;
    height: 44px;
    border-radius: 10px;
  }

  body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fcp-dialog__body {
    padding: 16px;
  }

  /* Felder am Handy nach Artboard DialogHandy: 48px, Radius 12, 16px Schrift */
  body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fcp-dialog__body input:not([type="checkbox"]):not([type="radio"]),
  body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fcp-dialog__body select,
  body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fcp-dialog__body .fcp-combobox__trigger {
    min-height: 48px;
    border-radius: 12px;
    font-size: 16px;
    padding: 0 14px;
  }

  body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fcp-dialog__body textarea {
    min-height: 88px;
    border-radius: 12px;
    font-size: 16px;
    padding: 12px 14px;
  }

  body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fcp-dialog__footer {
    flex-wrap: wrap;
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 12px));
  }

  body[data-app-theme="fcp_tactical"] .fcp-dialog__footer .fcp-btn--primary {
    flex: 1;
    height: 52px;
    border-radius: 12px;
    font-size: 16px;
  }

  body[data-app-theme="fcp_tactical"] .fcp-dialog__footer .fcp-btn--secondary {
    height: 52px;
    border-radius: 12px;
    font-size: 16px;
  }

  /* Löschen rutscht am Handy in eine eigene erste Zeile */
  body[data-app-theme="fcp_tactical"] .fcp-dialog__footer .fcp-dialog__danger {
    flex-basis: 100%;
    text-align: left;
  }

  body[data-app-theme="fcp_tactical"] .fcp-dialog__footer .fcp-dialog__footer-spacer {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   FANGLISTE UPLOAD-BAUSTEIN (Owner-GO Artboard "UploadBaustein", 2026-08-30)
   Ersetzt den nackten <input type="file"> in Erfassen- und Detail-Dialog.
   Web (≥900px): Dropzone. Handy (≤899px): zwei Knöpfe (Kamera/Galerie),
   Umschaltung rein per CSS. Nach Dateiwahl (beide Geräte): Vorschaukarte.
   Sitzt unter body[data-app-theme="fcp_tactical"] .fcp-dialog__panel wie
   der Standardform-Block darüber, gleiche Selektor-Tiefe -- jede Regel
   trägt mindestens zwei Klassen, damit sie gegen die button/input-
   Pauschalregel in main.css (Zeile ~179) gewinnt.
   ═══════════════════════════════════════════════════════════════════ */

body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fangliste-upload {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Verdeckter Ursprungs-Input (+ Kamera-/Galerie-Hilfsinputs) bleibt die
   einzige Wahrheit für files[0] -- rein visuell versteckt, kein
   display:none, damit .click() zuverlässig einen Dateidialog öffnet. */
body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fangliste-upload input[data-upload-main],
body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fangliste-upload input[data-upload-camera],
body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fangliste-upload input[data-upload-gallery] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Dropzone (Web ≥900px) */
body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fangliste-upload .fangliste-upload-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
  padding: 22px 16px;
  border: 1.5px dashed rgba(var(--tint-rgb), 0.45);
  border-radius: 12px;
  background: var(--rd-surface-hi, #ffffff);
  text-align: center;
  cursor: pointer;
}

body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fangliste-upload .fangliste-upload-dropzone:hover,
body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fangliste-upload .fangliste-upload-dropzone:focus-visible {
  border-color: rgba(212, 106, 32, 0.6);
}

body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fangliste-upload .fangliste-upload-dropzone.is-dragover {
  border-color: #d46a20;
  background: rgba(212, 106, 32, 0.06);
}

body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fangliste-upload .fangliste-upload-icon {
  color: #d46a20;
  flex: none;
}

body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fangliste-upload .fangliste-upload-title {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
  color: var(--rd-ink, #2a2d24);
}

body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fangliste-upload .fangliste-upload-sub {
  margin: 0;
  font-size: 13px;
  color: var(--rd-ink-2, #4a4e40);
}

body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fangliste-upload .fangliste-upload-pick {
  color: #d46a20;
  text-decoration: underline;
}

body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fangliste-upload .fangliste-upload-hint {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--rd-muted, #7a7c68);
}

/* Handy (≤899px): zwei gestapelte Knöpfe statt Dropzone (Artboard
   DialogHandy) -- per Default (Web) unsichtbar. */
body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fangliste-upload .fangliste-upload-mobile {
  display: none;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fangliste-upload .fangliste-upload-mobile-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  border: 1px solid rgba(var(--tint-rgb), 0.32);
  border-radius: 12px;
  background: var(--rd-surface-hi, #ffffff);
  color: var(--rd-ink, #2a2d24);
  font-size: 15px;
  font-weight: 650;
  cursor: pointer;
}

body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fangliste-upload .fangliste-upload-mobile-btn svg {
  color: #d46a20;
  flex: none;
}

/* Vorschaukarte (beide Geräte, nach Dateiwahl) */
body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fangliste-upload .fangliste-upload-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid rgba(var(--tint-rgb), 0.32);
  border-radius: 12px;
  background: var(--rd-surface-hi, #ffffff);
}

body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fangliste-upload .fangliste-upload-thumb {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(var(--tint-rgb), 0.12);
}

body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fangliste-upload .fangliste-upload-meta {
  flex: 1;
  min-width: 0;
}

body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fangliste-upload .fangliste-upload-filename {
  margin: 0;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--rd-ink, #2a2d24);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fangliste-upload .fangliste-upload-meta .fangliste-upload-hint {
  margin: 2px 0 0;
}

body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fangliste-upload .fangliste-upload-actions {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fangliste-upload .fangliste-upload-text-btn {
  border: 0;
  background: transparent;
  padding: 2px 0;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
}

body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fangliste-upload .fangliste-upload-text-btn--replace {
  color: #d46a20;
}

body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fangliste-upload .fangliste-upload-text-btn--remove {
  color: var(--rd-muted, #7a7c68);
  font-weight: 500;
}

/* [hidden] muss gegen die display-Regeln oben gewinnen (gleiche
   FCP-Fallgrube wie beim .fcp-dialog[hidden] weiter oben in dieser
   Datei -- CSS-Klassen können hidden sonst überschreiben). */
body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fangliste-upload .fangliste-upload-dropzone[hidden],
body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fangliste-upload .fangliste-upload-mobile[hidden],
body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fangliste-upload .fangliste-upload-preview[hidden] {
  display: none !important;
}

/* ---------- Handy (≤899px): Dropzone raus, zwei Knöpfe rein ---------- */
@media (max-width: 899px) {
  body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fangliste-upload .fangliste-upload-dropzone {
    display: none;
  }

  body[data-app-theme="fcp_tactical"] .fcp-dialog__panel .fangliste-upload .fangliste-upload-mobile {
    display: flex;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ANSICHTS-UMSCHALTER (08.09.2026)
   ───────────────────────────────────────────────────────────────────
   Erzeugt von fcp-adm-qfm-shared-renderers.js wrapWithViewSwitch(),
   sobald ein Panel im Maskenvertrag meta.boardView traegt. Erste
   Nutzerin: die Maske Meldungen mit Tabelle | Board.

   Nur eigene Klassen, keine Regel ueber einen bestehenden Baustein,
   kein !important, keine feste Farbe — alles aus den vorhandenen
   Tokens, damit Hell und Dunkel ohne Zweitquelle stimmen.
   ═══════════════════════════════════════════════════════════════════ */
.fcp-view-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.fcp-view-switch {
  align-self: flex-end;
  display: inline-flex;
  height: 36px;
  padding: 3px;
  gap: 2px;
  box-sizing: border-box;
  border: 1px solid var(--rd-line-strong, var(--line));
  border-radius: 10px;
  background: var(--rd-surface-hi, var(--surface));
}

.fcp-view-switch__btn {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--rd-ink-2, var(--text));
  cursor: pointer;
}

.fcp-view-switch__btn.is-active {
  background: var(--rd-gold-soft);
  color: var(--rd-gold-lo);
  font-weight: 700;
}

.fcp-view-switch__btn:focus-visible {
  outline: 2px solid var(--rd-gold);
  outline-offset: 2px;
}

/* Ausblenden ueber das hidden-Attribut, ausdruecklich mit eigener Regel:
   eine Klasse mit display-Wert am selben Element wuerde hidden sonst
   ueberstimmen (bekannte FCP-Fallgrube). */
.fcp-view-pane[hidden] {
  display: none;
}