/* ==========================================================================
   FireTrack Mobile-UI (Phase 1) - siehe docs/design/MOBILE_UI.md
   WHY: Alle neuen Regeln liegen hier statt in styles.css, damit die Statusseite
   (/status/, Body-Klasse ft-dashboard) und Desktop-Tabellenfarben unberuehrt bleiben.
   Seiten-/Body-Stile haengen an .ft-app; nur Tokens + Kopf/Tab-Leiste gelten auch
   unter .ft-dashboard (angemeldete Nutzer brauchen dort mobil Navigation).
   ========================================================================== */

/* --- 1. Schriften (selbst gehostet, E1; kein Request an Google Fonts) --- */
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 400;
  src: url(../fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 400;
  src: url(../fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 500;
  src: url(../fonts/ibm-plex-sans-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 500;
  src: url(../fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 600;
  src: url(../fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 600;
  src: url(../fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 700;
  src: url(../fonts/ibm-plex-sans-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 700;
  src: url(../fonts/ibm-plex-sans-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 400;
  src: url(../fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 400;
  src: url(../fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 500;
  src: url(../fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 500;
  src: url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 600;
  src: url(../fonts/ibm-plex-mono-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 600;
  src: url(../fonts/ibm-plex-mono-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* --- 2. Design-Tokens (MOBILE_UI.md §2) ---
   WHY: Variablen auch unter .ft-dashboard, weil Kopf-/Tab-Leiste dort fuer angemeldete
   Nutzer erscheinen; Variablen allein veraendern den Dashboard-Look nicht. */
.ft-app, .ft-dashboard {
  --ft-ink: #16181D; --ft-ground: #F4F3F0; --ft-surface: #FFFFFF;
  --ft-line: #E2E0DA; --ft-line-soft: #EEECE7; --ft-control: #CFCCC4; --ft-fill: #F1EFEA;
  --ft-muted: #5B5F68; --ft-muted-on-dark: #B9BCC4;
  --ft-brand: #B3261E; --ft-brand-soft: #FBE7E4;
  --ft-anw: #1E7A4C;   --ft-anw-soft: #E3F1E8;   --ft-anw-text: #165C39;
  --ft-ent: #F2B230;   --ft-ent-soft: #FDF1D6;   --ft-ent-text: #6B4A00;
  --ft-fehlt: #8E1F17; --ft-fehlt-soft: #F6E1DE;
  --ft-ph-plan-bg: #E9E7E2; --ft-ph-plan-fg: #3D4048;
  --ft-ph-conf-bg: #E3ECF8; --ft-ph-conf-fg: #1D4F91;
  --ft-ph-live-bg: #FBE7E4; --ft-ph-live-fg: #9A1F17;
  --ft-ph-book-bg: #FDEBD3; --ft-ph-book-fg: #7A3E00;
  --ft-ph-done-bg: #E3F1E8; --ft-ph-done-fg: #165C39;
  --ft-topbar-h: 56px; --ft-tabbar-h: 64px; --ft-actionbar-h: 68px; --ft-touch: 44px;
  --ft-r-sm: 10px; --ft-r: 12px; --ft-r-lg: 14px; --ft-r-sheet: 22px;
  --ft-gap: 12px; --ft-pad: 16px;
  --ft-font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ft-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

/* --- 3. Basis (nur .ft-app; Dashboard bleibt wie vorher) --- */
.ft-app {
  font-family: var(--ft-font); font-size: 15px; line-height: 1.35;
  color: var(--ft-ink); background: var(--ft-ground);
}
.ft-app .ft-mono { font-family: var(--ft-mono); }
.ft-app .ft-label {
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ft-muted);
}
/* Tab-Leiste ist mobil fixed -> Seitenende darf nie darunter verschwinden (z. B. erfasse_teilnahme). */
@media (max-width: 991.98px) {
  .ft-has-tabbar { padding-bottom: calc(var(--ft-tabbar-h) + env(safe-area-inset-bottom, 0px)); }
  /* WHY: styles.css setzt .table{width:max-content}/display:inline-table; Seiten (Phase 2/4 bauen um)
     duerfen mobil nicht die ganze Seite horizontal aufweiten -> Scrollen bleibt im Wrapper. */
  .ft-app .table-wrapper { overflow-x: auto; max-width: 100%; }
  /* WHY: Bootstrap-Buttons auf FireTrack-Seiten mobil auf Touch-Mindesthoehe (§4.11). */
  .ft-app .btn { min-height: var(--ft-touch); }
  /* WHY: Der globale 600px-Block aus styles.css (0.25rem Container-Padding) ist fuer den neuen Rahmen zu eng. */
  .ft-app .container, .ft-app .container-fluid { padding-left: var(--ft-pad); padding-right: var(--ft-pad); }
}

/* --- 4. Desktop-Navbar (>= lg) ---
   WHY: styles.css erzwingt .navbar-collapse{display:flex!important} und wrapt .navbar-nav;
   hier einzeilig und ohne Umbruch-Chaos, ausserhalb von .ft-app, damit es auch auf /status/ passt. */
.ft-desknav { padding: 0 1rem; min-height: 48px; }
.ft-desknav .navbar-nav { flex-wrap: nowrap; align-items: center; }
.ft-desknav .navbar-nav .nav-item { flex: 0 0 auto; margin: 0 .15rem; }
.ft-desknav .nav-link { padding: .75rem .75rem; border-bottom: 2px solid transparent; }
.ft-desknav .nav-link.active { color: #fff; border-bottom-color: #E5533D; font-weight: 600; }

/* --- 5. Kopfleiste mobil (§4.1) --- */
.ft-topbar {
  position: sticky; top: 0; z-index: 1030; height: var(--ft-topbar-h);
  display: flex; align-items: center; gap: 4px; padding: 0 6px 0 16px;
  background: var(--ft-ink); color: #fff; font-family: var(--ft-font);
}
.ft-topbar.has-back { padding-left: 2px; }
.ft-topbar__title { flex: 1 1 auto; min-width: 0; }
.ft-topbar__title b { display: block; font-size: 17px; font-weight: 600; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-topbar__title small { display: block; font-size: 12px; line-height: 1.3; color: var(--ft-muted-on-dark);
  font-family: var(--ft-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-topbar__actions { display: flex; flex: 0 0 auto; }
.ft-iconbtn {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: inherit; border-radius: var(--ft-r); padding: 0; text-decoration: none;
}
.ft-iconbtn:hover { color: inherit; background: rgba(255,255,255,.08); }

/* --- 6. Tab-Leiste mobil (§4.2) --- */
.ft-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
  display: flex; background: #fff; border-top: 1px solid var(--ft-line); font-family: var(--ft-font);
  height: calc(var(--ft-tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding: 6px 4px env(safe-area-inset-bottom, 0px);
}
.ft-tabbar__link {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; font-size: 11px; font-weight: 500; color: var(--ft-muted); text-decoration: none;
}
.ft-tabbar__link:hover { color: var(--ft-muted); }
.ft-tabbar__ic { width: 56px; height: 30px; border-radius: 15px; display: flex; align-items: center; justify-content: center; }
.ft-tabbar__link[aria-current="page"] { color: var(--ft-brand); font-weight: 600; }
.ft-tabbar__link[aria-current="page"] .ft-tabbar__ic { background: var(--ft-brand-soft); }

/* --- 7. Chips (§4.3) --- */
.ft-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.ft-chips::-webkit-scrollbar { display: none; }
.ft-chip {
  display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 18px; flex: 0 0 auto;
  border: 1px solid var(--ft-control); background: #fff; color: var(--ft-ink); font-size: 14px; text-decoration: none;
}
.ft-chip.is-active, .btn-check:checked + .ft-chip { background: var(--ft-ink); color: #fff; border-color: var(--ft-ink); }
.ft-chip--toggle { height: 40px; }

/* --- 8. Segment-Gruppe (§4.4) und Toggle-Knopf (§4.5): btn-check + label, Inputs bleiben (DOM-Vertrag) --- */
.ft-seg { display: inline-flex; border: 1px solid var(--ft-control); border-radius: var(--ft-r-sm); overflow: hidden; background: #fff; }
.ft-seg label { min-width: 52px; height: var(--ft-touch); display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; border-left: 1px solid var(--ft-line); cursor: pointer; margin: 0; }
.ft-seg label:first-of-type { border-left: 0; }
.ft-seg .btn-check:checked + label { background: var(--ft-ph-conf-fg); color: #fff; }
.ft-seg .ft-seg--anw:checked + label { background: var(--ft-anw); color: #fff; }
.ft-seg .ft-seg--ent:checked + label { background: var(--ft-ent); color: var(--ft-ink); }
.ft-seg .ft-seg--fehlt:checked + label { background: var(--ft-fehlt); color: #fff; }
.ft-toggle { min-width: 72px; height: var(--ft-touch); display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  border: 1px solid var(--ft-control); border-radius: var(--ft-r-sm); background: #fff; font-size: 13px; font-weight: 600; cursor: pointer; margin: 0; }
.btn-check:checked + .ft-toggle { background: var(--ft-anw); color: #fff; border-color: var(--ft-anw); }
.btn-check:checked + .ft-toggle--check { background: var(--ft-ink); border-color: var(--ft-ink); }

/* --- 9. Modus-Umschalter (§4.6) --- */
.ft-modes { display: flex; padding: 3px; gap: 3px; background: #E4E2DC; border-radius: var(--ft-r); }
.ft-modes [role="tab"] { flex: 1 1 0; height: 40px; border: 0; background: transparent; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--ft-muted); }
.ft-modes [role="tab"][aria-selected="true"] { background: #fff; color: var(--ft-ink); box-shadow: 0 1px 2px rgba(22,24,29,.15); }
.ft-modes .ft-count { font-family: var(--ft-mono); font-size: 11px; margin-left: 4px; }

/* --- 10. Statusleiste (§4.7) --- */
.ft-statusbar { position: relative; background: #fff; border: 1px solid var(--ft-line); border-radius: var(--ft-r); padding: 12px 14px; }
.ft-steps { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; margin-bottom: 10px; }
.ft-steps span { display: block; height: 4px; border-radius: 2px; background: #E4E2DC; }
.ft-steps span.is-past { background: var(--ft-ink); }
.ft-steps span.is-current { background: var(--ft-brand); }
.ft-statusbar__row { display: flex; align-items: center; gap: 10px; }
.ft-statusbar__desc { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--ft-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-statusbar__n { font-family: var(--ft-mono); font-size: 12px; color: var(--ft-muted); }
/* WHY: natives <select id="veranstaltungsstatus"> liegt unsichtbar vollflaechig darueber (OS-Picker, DOM-Vertrag). */
.ft-statusbar select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* --- 11. Status-Badge (§4.8) --- */
.ft-badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px; border-radius: 11px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ft-badge .ft-dot { width: 6px; height: 6px; border-radius: 3px; background: var(--ft-brand); }
.ft-ph-plan { background: var(--ft-ph-plan-bg); color: var(--ft-ph-plan-fg); }
.ft-ph-conf { background: var(--ft-ph-conf-bg); color: var(--ft-ph-conf-fg); }
.ft-ph-live { background: var(--ft-ph-live-bg); color: var(--ft-ph-live-fg); }
.ft-ph-book { background: var(--ft-ph-book-bg); color: var(--ft-ph-book-fg); }
.ft-ph-done { background: var(--ft-ph-done-bg); color: var(--ft-ph-done-fg); }

/* --- 12. Kennzahl-Kacheln (§4.9) --- */
.ft-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; }
.ft-tile { background: #fff; border: 1px solid var(--ft-line); border-radius: var(--ft-r); padding: 10px 12px; }
.ft-tile b { display: block; font-family: var(--ft-mono); font-size: 20px; font-weight: 600; line-height: 1.2; }
.ft-tile small { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ft-muted); }
.ft-tile small i { width: 8px; height: 8px; border-radius: 4px; background: var(--ft-control); display: inline-block; }

/* --- 13. Aktionsleiste (§4.10) --- */
.ft-actionbar {
  position: fixed; left: 0; right: 0; z-index: 1020; display: flex; gap: 8px; padding: 10px 16px;
  bottom: calc(var(--ft-tabbar-h) + env(safe-area-inset-bottom, 0px));
  background: #fff; border-top: 1px solid var(--ft-line);
}
.ft-actionbar .ft-btn:not(.ft-btn--icon) { flex-grow: 1; }

/* --- 14. Knoepfe (§4.11) --- */
.ft-btn { height: 48px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--ft-ink); border-radius: var(--ft-r); background: var(--ft-ink); color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; }
.ft-btn:hover { color: #fff; }
.ft-btn--secondary { background: #fff; color: var(--ft-ink); border-color: var(--ft-control); }
.ft-btn--secondary:hover { color: var(--ft-ink); }
.ft-btn--danger { background: var(--ft-brand); border-color: var(--ft-brand); }
.ft-btn--icon { width: 48px; padding: 0; }

/* --- 15. Bottom-Sheet (§4.12) ---
   WHY: Offcanvas-bottom von Bootstrap; Radius/Griff/max-height nur Optik. */
.ft-sheet.offcanvas-bottom { border-radius: var(--ft-r-sheet) var(--ft-r-sheet) 0 0; max-height: 85vh; height: auto; font-family: var(--ft-font); }
.ft-sheet .ft-sheet__handle { width: 40px; height: 5px; border-radius: 3px; background: var(--ft-control); margin: 10px auto 0; }
.ft-sheet .offcanvas-body { overflow-y: auto; }
.ft-sheet__actions { display: flex; gap: 8px; margin-top: 16px; }
.ft-sheet__actions .ft-btn { flex: 1 1 0; }
@media (max-width: 991.98px) {
  /* WHY entfernt: Regeln fuer das Bootstrap-Modal #distributeTasksModal (unten verankert). Das Modal gibt es nicht mehr -
     "Aufgaben verteilen" nutzt jetzt ftConfirm (Bottom-Sheet, s. u.), siehe DEVLOG. */
}
/* ftConfirm: eine Markup-Variante, Desktop = zentriertes Panel statt Sheet */
@media (min-width: 992px) {
  #ftConfirmSheet.offcanvas-bottom { top: 50%; bottom: auto; left: 50%; right: auto; width: 420px; max-width: 92vw;
    transform: translate(-50%, -40%); border-radius: var(--ft-r-lg); border: 1px solid var(--ft-line); visibility: hidden; opacity: 0; transition: opacity .2s, transform .2s; }
  #ftConfirmSheet.offcanvas-bottom.show, #ftConfirmSheet.offcanvas-bottom.showing { transform: translate(-50%, -50%); visibility: visible; opacity: 1; }
  #ftConfirmSheet .ft-sheet__handle { display: none; }
}

/* --- 16. Listenzeile (§4.13) und Karte (§4.14) --- */
.ft-row { min-height: 56px; display: flex; align-items: center; gap: 14px; padding: 8px 12px 8px 14px; text-decoration: none; color: inherit; border-top: 1px solid var(--ft-line-soft); }
.ft-row:first-child { border-top: 0; }
.ft-row:hover { color: inherit; }
.ft-row__name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-row__sub { font-size: 12px; color: var(--ft-muted); }
.ft-row__ico { width: 34px; height: 34px; border-radius: 9px; background: var(--ft-fill); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ft-card { background: #fff; border: 1px solid var(--ft-line); border-radius: var(--ft-r-lg); overflow: hidden; }

/* --- 17. FAB (§4.15) --- */
.ft-fab { position: fixed; right: 16px; z-index: 1020; bottom: calc(var(--ft-tabbar-h) + env(safe-area-inset-bottom, 0px) + 16px);
  height: 56px; padding: 0 20px; display: inline-flex; align-items: center; gap: 8px; border-radius: 16px; background: var(--ft-brand); color: #fff; font-weight: 600; text-decoration: none; box-shadow: 0 4px 12px rgba(22,24,29,.25); }
.ft-fab:hover { color: #fff; }

/* --- 18. Mehr-Seite: Kontokarte --- */
.ft-avatar { width: 44px; height: 44px; border-radius: 22px; background: var(--ft-ink); color: #fff; font-weight: 600; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }

/* --- 19. Erfassen (Phase 2, MOBILE_UI.md §5.2) -------------------------------------------------
   WHY ein Template + data-mode statt drei Ansichten: die Inputs (Radios, Select, Checkboxen) sind
   DOM-Vertraege von status_bus.js und muessen genau einmal existieren. Die Modi blenden per CSS nur
   Spalten/Zeilen aus; #erfassenRoot liegt ausserhalb des Soft-Reload-Wrappers, data-mode ueberlebt Reloads.
   Spezifitaet: styles.css arbeitet mit !important (.anwesend, .erledigt, ...) - daher hier gezielt
   unter #erfassenRoot/#teilnahmeTabelle und, wo noetig, ebenfalls !important. styles.css bleibt unberuehrt. */

/* 19.1 Kopf: Titel-Knopf oeffnet "Dienst waehlen" */
.ft-titlebtn { display: flex; align-items: center; gap: 4px; max-width: 100%; border: 0; background: transparent;
  color: inherit; padding: 0; font: inherit; text-align: left; }
.ft-titlebtn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 19.2 Bausteine (alle Breiten) */
.ft-lockhint { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--ft-r);
  background: var(--ft-anw-soft); color: var(--ft-anw-text); font-size: 13px; font-weight: 600; }
/* WHY flex:0: in schmalen Kacheln (4 Spalten mobil) schrumpfte der Farbpunkt sonst auf 0 px */
.ft-tile small i { flex: 0 0 auto; }
.ft-tile small i.ft-dot--anw { background: var(--ft-anw); }
.ft-tile small i.ft-dot--ent { background: var(--ft-ent); }
.ft-tile small i.ft-dot--fehlt { background: var(--ft-fehlt); }
.ft-tile small i.ft-dot--ink { background: var(--ft-ink); }
.ft-tile small i.ft-dot--brand { background: var(--ft-brand); }
.ft-row[aria-current="page"] { background: var(--ft-fill); }
.ft-erfassen__done { flex-grow: 1; background: var(--ft-anw-soft); color: var(--ft-anw-text); border-color: #BCDCC8; opacity: 1; }
.ft-erfassen__done:disabled { opacity: 1; }
/* Gesperrte Aktionen (E3, data-ft-locked) sichtbar als inaktiv - .ft-btn hatte keinen :disabled-Stil */
#erfassenRoot .ft-btn:disabled:not(.ft-erfassen__done) { opacity: .45; cursor: default; }
.ft-hiddenhint { width: 100%; height: 52px; margin-top: -1px; border: 1px solid var(--ft-line); border-radius: 0 0 var(--ft-r-lg) var(--ft-r-lg);
  background: #FAF9F6; color: var(--ft-muted); font-size: 13px; font-weight: 500; }
.ft-hiddenhint.is-empty { display: none; }
/* Kennzahlen folgen dem Modus (auch Desktop: dort ist es der Default-Modus des Status) */
#erfassenRoot[data-mode="att"] .ft-tiles:not([data-ft-for="att"]),
#erfassenRoot[data-mode="task"] .ft-tiles:not([data-ft-for="task"]),
#erfassenRoot[data-mode="check"] .ft-tiles:not([data-ft-for="check"]) { display: none; }

/* Status-Segmente und Toggles als btn-check + label (Inputs bleiben, §4.4/§4.5) */
.ft-att { min-width: 52px; height: 36px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ft-control); border-radius: 8px; background: #fff; color: var(--ft-muted);
  font-size: 13px; font-weight: 600; cursor: pointer; margin: 0; user-select: none; }
.btn-check:checked + .ft-att--anw { background: var(--ft-anw); border-color: var(--ft-anw); color: #fff; }
.btn-check:checked + .ft-att--ent { background: var(--ft-ent); border-color: var(--ft-ent); color: var(--ft-ink); }
.btn-check:checked + .ft-att--fehlt { background: var(--ft-fehlt); border-color: var(--ft-fehlt); color: #fff; }
.btn-check:focus-visible + .ft-att, .btn-check:focus-visible + .ft-toggle, .btn-check:focus-visible + .ft-chip {
  outline: 2px solid var(--ft-ph-conf-fg); outline-offset: 2px; }
.btn-check:disabled + .ft-att, .btn-check:disabled + .ft-toggle, .btn-check:disabled + .ft-chip { opacity: .55; cursor: default; pointer-events: none; }
/* Ohne Aufgabe gibt es nichts zu erledigen: Labels verbergen, sonst toggelt der Label-Klick die (per JS
   ausgeblendete) Checkbox und der Server antwortet "Keine Aufgaben-Zuweisung". */
#teilnahmeTabelle tr[data-hat-aufgabe="0"] td.col-check label { visibility: hidden; }
/* Abgeschlossen (E3): auch der Desktop-Link "Mehr" ist nur Ansicht */
#erfassenRoot[data-status="abgeschlossen"] .col-actions a { pointer-events: none; opacity: .5; }
/* Unterzeile im Namen: nur mobil sichtbar (Desktop hat die Aufgaben-Spalte) */
#teilnahmeTabelle .ft-sub { display: none; }
/* Fehler-Toast (showNotification(text, true)) */
.ft-app .saved-toast--error { background-color: var(--ft-brand); }

/* 19.3 Mobil */
@media (max-width: 991.98px) {
  #erfassenRoot { padding-bottom: calc(var(--ft-actionbar-h) + 8px); }

  /* Modus-abhaengige Bausteine: Aktionen, Chips, Ausgeblendet-Hinweis.
     WHY ~= statt =: data-ft-for darf mehrere Modi nennen (Sortieren-Knopf gilt fuer att, task und check). */
  #erfassenRoot[data-mode="att"] .ft-erfassen__actions [data-ft-for]:not([data-ft-for~="att"]),
  #erfassenRoot[data-mode="task"] .ft-erfassen__actions [data-ft-for]:not([data-ft-for~="task"]),
  #erfassenRoot[data-mode="check"] .ft-erfassen__actions [data-ft-for]:not([data-ft-for~="check"]) { display: none; }
  #erfassenRoot:not([data-mode="task"]) .ft-erfassen__chipsbox { display: none; }
  #erfassenRoot[data-mode="att"] .ft-hiddenhint { display: none; }
  .ft-erfassen__actions .ft-btn--secondary { flex: 0 0 auto; }

  /* Tabelle als Liste: styles.css setzt .table-wrapper mehrspaltig/flex und .table max-content */
  #erfassenRoot #teilnahmeTabelleWrapper { display: block; column-width: auto; overflow: visible; }
  #erfassenRoot #teilnahmeTabelle { display: block; width: 100% !important; margin: 0; border: 1px solid var(--ft-line);
    border-radius: var(--ft-r-lg); background: #fff; overflow: hidden; font-size: 15px; }
  #erfassenRoot[data-mode="task"] #teilnahmeTabelle,
  #erfassenRoot[data-mode="check"] #teilnahmeTabelle { border-radius: var(--ft-r-lg) var(--ft-r-lg) 0 0; }
  #teilnahmeTabelle thead { display: none; }
  #teilnahmeTabelle tbody { display: block; }
  #teilnahmeTabelle tbody tr { display: flex; align-items: center; min-height: 58px; padding: 6px 8px 6px 14px;
    border-top: 1px solid var(--ft-line-soft); }
  #teilnahmeTabelle tbody tr:first-child { border-top: 0; }
  /* E7: Zeilenfarben mobil neutral - Klassen bleiben am DOM, der aktive Segmentknopf zeigt den Status */
  .ft-app #teilnahmeTabelle td { display: block; position: static; padding: 0 !important; border: 0 !important;
    background: var(--ft-surface) !important; color: var(--ft-ink) !important; box-shadow: none !important;
    white-space: nowrap; font-size: 15px; }
  #teilnahmeTabelle td.col-name { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-right: 8px !important; }
  #teilnahmeTabelle .ft-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
  #teilnahmeTabelle .ft-sub { display: inline-flex; align-self: flex-start; align-items: center; height: 22px; padding: 0 8px;
    border-radius: 6px; background: var(--ft-fill); color: #3D4048; font-size: 12px; font-weight: 500; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; }
  #teilnahmeTabelle .ft-sub:empty, #erfassenRoot[data-mode="task"] #teilnahmeTabelle .ft-sub { display: none; }

  /* Sichtbare Spalten je Modus (Tabelle §5.2.2); E2: Aktionen/"Mehr" mobil immer aus */
  #teilnahmeTabelle td.col-actions,
  #erfassenRoot[data-mode="att"] #teilnahmeTabelle td:is(.col-task, .col-check),
  #erfassenRoot[data-mode="task"] #teilnahmeTabelle td:is(.col-att, .col-check),
  #erfassenRoot[data-mode="check"] #teilnahmeTabelle td:is(.col-att, .col-task) { display: none; }
  /* Sichtbare Zeilen je Modus */
  #erfassenRoot[data-mode="task"] #teilnahmeTabelle tbody tr:not([data-status="anwesend"]),
  #erfassenRoot[data-mode="check"] #teilnahmeTabelle tbody tr:not([data-status="anwesend"][data-hat-aufgabe="1"]) { display: none; }

  /* Anwesenheit: drei <td> rahmenlos nebeneinander als eine Segmentgruppe (52x44) */
  #teilnahmeTabelle td.col-att { flex: 0 0 auto; }
  #teilnahmeTabelle .ft-att { width: 52px; height: var(--ft-touch); border-radius: 0; margin-left: -1px; }
  #teilnahmeTabelle td.col-att:nth-child(2) .ft-att { border-radius: var(--ft-r-sm) 0 0 var(--ft-r-sm); margin-left: 0; }
  #teilnahmeTabelle td.col-att:nth-child(4) .ft-att { border-radius: 0 var(--ft-r-sm) var(--ft-r-sm) 0; }

  /* Aufgabe: natives Select gross (E5), ohne Wert gestrichelt */
  #teilnahmeTabelle td.col-task { flex: 0 0 auto; }
  #teilnahmeTabelle select.aufgabe-select { width: 168px; height: var(--ft-touch); border-radius: var(--ft-r-sm);
    border-color: var(--ft-control); font-size: 14px; font-weight: 500; }
  #teilnahmeTabelle select.aufgabe-select:has(> option[value=""]:checked) { border-style: dashed; color: var(--ft-muted); }

  /* Kontrolle: Erl./Gepr. als Toggle 72x44 (§4.5) */
  #teilnahmeTabelle td.col-check { flex: 0 0 auto; margin-left: 6px; }

  /* Toasts unten ueber der Aktionsleiste (statt oben rechts) */
  .ft-app .saved-toast { top: auto; left: 16px; right: 16px; text-align: center;
    bottom: calc(var(--ft-tabbar-h) + var(--ft-actionbar-h) + env(safe-area-inset-bottom, 0px) + 8px); }
}

/* 19.4 Desktop (>= lg, E11): alle Spalten wie bisher, Aktionsleiste als Knopfreihe ueber der Tabelle */
@media (min-width: 992px) {
  #erfassenRoot .ft-modes, #erfassenRoot .ft-hiddenhint { display: none; }
  #erfassenRoot .ft-erfassen__actions { position: static; padding: 0; margin: 8px 0; background: transparent; border: 0;
    flex-wrap: wrap; justify-content: flex-start; }
  #erfassenRoot .ft-erfassen__actions .ft-btn { flex-grow: 0; height: 40px; }
  #erfassenRoot .ft-erfassen__actions .ft-btn--icon { width: 40px; }
  #aufgabenListe.ft-chips { flex-wrap: wrap; overflow: visible; }
  #dienstSheet.ft-sheet { border-radius: 0; max-height: none; }
  #teilnahmeTabelle .ft-toggle { min-width: 64px; height: 36px; }
}

/* --- 20. Start/Dienste (Phase 3, MOBILE_UI.md §5.3/§5.4) ------------------------------------------
   WHY .ft-evcard statt .ft-card: .ft-card hat overflow:hidden und wuerde das ⋯-Dropdown abschneiden. */
.ft-minw0 { min-width: 0; }
.ft-evcard { background: #fff; border: 1px solid var(--ft-line); border-radius: var(--ft-r-lg); margin-bottom: var(--ft-gap); }
.ft-evcard.is-highlight { border-color: var(--ft-anw); box-shadow: 0 0 0 1px var(--ft-anw); }
.ft-evcard__main { display: flex; gap: 12px; padding: 14px; }
.ft-evcard__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
/* Start-Variante: kein Datumblock -> Inhalt untereinander */
.ft-evcard__main:has(> .ft-evcard__meta) { flex-direction: column; gap: 10px; padding: 16px; }
.ft-evcard__meta { display: flex; align-items: center; gap: 10px; }
.ft-evcard__head { display: flex; align-items: flex-start; gap: 8px; }
.ft-evcard__head .ft-evcard__title { flex: 1 1 auto; }
.ft-evcard__title { font-size: 16px; font-weight: 600; line-height: 1.25; }
.ft-evcard__main:has(> .ft-evcard__meta) .ft-evcard__title { font-size: 19px; }
.ft-evcard__sub { font-size: 12px; color: var(--ft-muted); }
.ft-evcard__count { font-size: 12px; color: var(--ft-ph-plan-fg); }
.ft-evcard__actions { display: flex; gap: 8px; padding: 0 14px 14px; }
.ft-evcard__actions .ft-btn:not(.ft-btn--icon) { flex: 1 1 0; min-width: 0; padding: 4px 10px; font-size: 14px; line-height: 1.2; white-space: normal; text-align: center; }
.ft-steps--card { margin: 4px 0 0; }
.ft-date { width: 48px; flex: 0 0 auto; text-align: center; line-height: 1.1; text-transform: uppercase; }
.ft-date small { display: block; font-size: 11px; color: var(--ft-muted); }
.ft-date b { display: block; font-size: 22px; font-weight: 600; }
.ft-evrow .ft-row__name { max-width: 100%; }
.ft-grouphead { width: 100%; display: flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 14px 0 8px; text-align: left; }
.ft-grouphead .ft-count { font-family: var(--ft-mono); }
.ft-grouphead svg { margin-left: auto; transition: transform .15s; }
.ft-grouphead[aria-expanded="true"] svg { transform: rotate(180deg); }
.ft-page-pad { padding-top: 12px; }
/* Desktop: Liste nicht ueber die ganze Breite ziehen */
@media (min-width: 992px) {
  .ft-narrow { max-width: 720px; margin-left: auto; margin-right: auto; }
}
/* Mobil: FAB darf den letzten Eintrag nicht verdecken */
.ft-has-fab { padding-bottom: 88px; }
/* Rueckmeldungen (§5.5) */
.ft-bar { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; background: #E7E5E0; }
.ft-bar span { display: block; height: 100%; }
.ft-qa { height: var(--ft-touch); padding: 0 12px; border-radius: var(--ft-r-sm); font-size: 13px; font-weight: 600; border: 1px solid transparent; }
.ft-qa--a { background: var(--ft-anw-soft); color: var(--ft-anw-text); border-color: #BCDCC8; }
.ft-qa--e { background: var(--ft-ent-soft); color: var(--ft-ent-text); border-color: #F0D69A; }
/* WHY: "Fehlend" im Status-Popup der Rueckmeldungen (rot wie ft-seg--fehlt/ft-att--fehlt). */
.ft-qa--f { background: var(--ft-fehlt-soft); color: var(--ft-fehlt); border-color: #E3B8B2; }
/* Status-Popup: Eintraege untereinander, volle Breite, Touch-Hoehe */
.ft-lang { display: inline; }
.ft-kurz { display: none; }
/* WHY per Messung statt fester Breite: Die Klasse .ft-eng setzt das Skript in veranstaltung_detail.html auf eine Liste, sobald
   dort ein Name mit ausgeschriebenen Knoepfen abgeschnitten wuerde. Solange alles passt, bleibt "Entschuldigt" ausgeschrieben.
   Alternativen verworfen: Viewport-Breakpoint und Container-Query mit fester Schwelle - beide kuerzten schon, wenn noch viel Platz war. */
.ft-eng .ft-lang { display: none; }
.ft-eng .ft-kurz { display: inline; }
/* Infobox Veranstaltungsdetail: schmal = ein Eintrag je Zeile; breit = in einer Zeile, getrennt durch "·".
   WHY Container-Query: massgeblich ist die Breite der Infobox, nicht des Geraets. Label und Wert bleiben per &nbsp; zusammen. */
.ft-infocont { container-type: inline-size; }
.ft-info__item { display: block; }
@container (min-width: 640px) {
  .ft-info__item { display: inline; }
  .ft-info__item + .ft-info__item::before { content: "\00B7\00A0"; margin: 0 .2em 0 .4em; }
}
.ft-status-menu { min-width: 150px; padding: 6px; }
.ft-status-menu li + li { margin-top: 6px; }
.ft-status-menu .ft-qa { width: 100%; text-align: left; }
.ft-pills { display: flex; padding: 3px; gap: 3px; background: #E4E2DC; border-radius: var(--ft-r); }
.ft-pills button { flex: 1 1 0; min-height: 40px; line-height: 1.15; padding: 0 4px; border: 0; background: transparent; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--ft-muted); }
.ft-pills button[aria-selected="true"] { background: #fff; color: var(--ft-ink); box-shadow: 0 1px 2px rgba(22,24,29,.15); }
.ft-list { background: #fff; border: 1px solid var(--ft-line); border-radius: var(--ft-r-lg); }
.ft-list .ft-row { gap: 8px; }
.ft-list .ft-row__name { flex: 1 1 auto; min-width: 0; font-weight: 500; }
.ft-list select { height: var(--ft-touch); max-width: 150px; }

/* --- 21. Listen & Formulare (Phase 4, MOBILE_UI.md §5.6-§5.11) ------------------------------------
   WHY eigene Bausteine statt Bootstrap-Standardformulare: Touch-Ziele >= 44 px, Karten statt Tabellen.
   Die Inputs bleiben echte <input>/<select> (Progressive Enhancement, MOBILE_UI.md §1.5). */
.ft-legdot { display: inline-block; width: 8px; height: 8px; border-radius: 4px; margin-right: 4px; }
.ft-row--stack { flex-direction: column; align-items: stretch; gap: 6px; padding-top: 10px; padding-bottom: 10px; }
.ft-timeline { background: var(--ft-fill); border-top: 1px solid var(--ft-line-soft); padding: 4px 14px; }
.ft-timeline__item { display: flex; flex-direction: column; padding: 6px 0; border-top: 1px solid var(--ft-line-soft); }
.ft-timeline__item:first-child { border-top: 0; }

/* Formular-Seiten: Platz fuer die fixe Aktionsleiste (mobil) */
.ft-has-bar { padding-bottom: calc(var(--ft-actionbar-h) + 24px); }
.ft-formcard { background: #fff; border: 1px solid var(--ft-line); border-radius: var(--ft-r-lg); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.ft-formcard > .ft-label { margin: 0; }
.ft-field label.ft-flabel { display: block; font-size: 13px; font-weight: 600; color: #3D4048; margin-bottom: 6px; }
.ft-app .ft-field .form-control, .ft-app .ft-field .form-select { min-height: 48px; border-radius: var(--ft-r); border-color: var(--ft-control); font-size: 16px; }
.ft-app .ft-field textarea.form-control { min-height: 84px; }
.ft-errors, .ft-errors ul { color: var(--ft-fehlt); font-size: 13px; margin: 4px 0 0; padding-left: 0; list-style: none; }
.ft-errors:empty { display: none; }
.ft-switchrow { display: flex; align-items: center; justify-content: space-between; min-height: 48px; gap: 12px; }
.ft-switchrow label { font-weight: 500; margin: 0; flex: 1 1 auto; }
/* Schalter 52x32 wie im Mockup, Input bleibt das Django-Widget (checkbox) */
.ft-switchrow input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 52px; height: 32px; border-radius: 16px; background: var(--ft-control); position: relative; flex: 0 0 auto; margin: 0; cursor: pointer; transition: background .15s; }
.ft-switchrow input[type=checkbox]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 13px; background: #fff; transition: left .15s; }
.ft-switchrow input[type=checkbox]:checked { background: var(--ft-anw); }
.ft-switchrow input[type=checkbox]:checked::after { left: 23px; }
.ft-switchrow input[type=checkbox]:focus-visible { outline: 2px solid var(--ft-ink); outline-offset: 2px; }
/* WHY readonly nur optisch daempfen: das Widget bleibt NICHT disabled (disabled wird nicht gesendet -> Django liest False ->
   changed_data enthaelt das Feld -> View lehnt Speichern ab). Die eigentliche Sperre ist die Serverpruefung in manage_teilnehmer. */
.ft-switchrow input[readonly] { opacity: .6; pointer-events: none; }
.ft-switchrow:has(input[readonly]) label { opacity: .6; }
/* Chip-Checkboxen/-Radios (btn-check + label.ft-chip) */
.ft-chipgrid { display: flex; flex-wrap: wrap; gap: 8px; }
.ft-chipgrid .ft-chip { height: 40px; cursor: pointer; margin: 0; }
.ft-chipgrid--2 { display: grid; grid-template-columns: 1fr 1fr; }
.ft-chipgrid--2 .ft-chip { justify-content: center; }
.btn-check:focus-visible + .ft-chip { outline: 2px solid var(--ft-brand); outline-offset: 2px; }
/* Stepper (ui.js data-ft-step) */
.ft-stepper { display: flex; align-items: stretch; gap: 8px; }
.ft-stepper .form-control { text-align: center; font-family: var(--ft-mono); }
.ft-stepper button { width: 48px; flex: 0 0 auto; border: 1px solid var(--ft-control); background: #fff; border-radius: var(--ft-r); font-size: 22px; line-height: 1; }
.ft-stepper input[type=number] { -moz-appearance: textfield; }
.ft-danger-link { display: block; text-align: center; color: var(--ft-brand); font-weight: 600; padding: 14px; text-decoration: none; }
.ft-search { width: 100%; }
/* Desktop: Aktionsleiste liegt im Fluss (kein Tab-Leisten-Bezug), Formulare bleiben schmal */
@media (min-width: 992px) {
  .ft-has-bar { padding-bottom: 24px; }
  .ft-actionbar--inline { position: static; border: 0; background: transparent; padding: 0; justify-content: flex-end; }
  .ft-actionbar--inline .ft-btn:not(.ft-btn--icon) { flex-grow: 0; min-width: 160px; }
  .ft-fab { bottom: 24px; }
}

/* Login (§5.10): dunkle obere Haelfte, helles Formular. Kein .ft-has-tabbar (nicht angemeldet). */
.ft-login { min-height: calc(100vh - var(--ft-topbar-h)); display: flex; flex-direction: column; background: var(--ft-ink); color: #fff; margin: 0 calc(-1 * var(--ft-pad)); }
.ft-login__brand { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 40px 24px; }
.ft-login__brand b { font-size: 34px; font-weight: 700; letter-spacing: -.01em; }
.ft-login__brand span { color: var(--ft-muted-on-dark); }
.ft-login__form { background: var(--ft-ground); color: var(--ft-ink); border-radius: 24px 24px 0 0; padding: 24px 16px 28px; display: flex; flex-direction: column; gap: 14px; }
.ft-login__form .form-control { height: 52px; border-radius: var(--ft-r); font-size: 16px; }
.ft-login__submit { height: 56px; border-radius: 14px; border: 0; background: var(--ft-brand); color: #fff; font-weight: 600; font-size: 16px; }
@media (min-width: 992px) {
  .ft-login { max-width: 440px; margin: 48px auto; min-height: 0; border-radius: 24px; overflow: hidden; }
}
/* WHY eigene Klasse statt d-flex: Bootstraps d-flex hat !important und haette das hidden-Attribut (Tabs der Auswertung) ausgehebelt. */
.ft-stack { display: flex; flex-direction: column; gap: 8px; }
.ft-stack[hidden] { display: none; }
/* WHY: Django-Textarea hat rows=10 -> Beschreibung (3 Zeilen laut §5.8) per CSS statt am Form-Widget (Formular-Klassen bleiben unveraendert). */
.ft-app .ft-field textarea.form-control { height: 96px; min-height: 96px; }