/* ============================================================================
   Fokus Gestaltungssystem  -  DIE EINE Quelle fuer das Aussehen der ganzen App.

   Regeln (aus der Recherche):
   - Dunkel, aber kein Schwarz. Tiefe entsteht ueber HELLERE Flaechen, nicht Schatten.
   - Semantische Token statt Hex im Code. Abstaende auf 4-px-Raster. EINE Schrift.
   - Der Akzent (Teal) ist NICHT die Statusfarbe (Ampel gruen/gelb/rot getrennt).

   Benutzung: <link rel="stylesheet" href="/static/fokus.css"> ganz oben einbinden,
   dann NUR noch fk-Klassen und die --fk-Token verwenden. Keine eigenen Paletten je Seite.
   ============================================================================ */

:root{
  color-scheme: dark;

  /* ---- Flaechen (heller = weiter oben) ---- */
  --fk-bg:        #0e141d;   /* App-Grund, am dunkelsten */
  --fk-surface:   #161e29;   /* Karte / Panel */
  --fk-surface-2: #1d2733;   /* Zeile, Eingabe, erhoehte Flaeche */
  --fk-surface-3: #26313f;   /* aktiv / Overlay-Inhalt */
  --fk-line:      #2b3644;
  --fk-line-2:    #3a4859;

  /* ---- Text ---- */
  --fk-text:   #e7edf5;
  --fk-text-2: #aeb9c8;      /* zweitrangig */
  --fk-muted:  #93a1b4;      /* Labels, leise Hinweise (5,7:1 - #7e8b9c lag unter der Schwelle) */

  /* ---- Akzent (Fokus-Teal), getrennt von Status ---- */
  --fk-accent:      #14b8cc;
  --fk-accent-2:    #5cd8e6;  /* heller, fuer Akzenttext auf dunkel */
  --fk-accent-weak: rgba(20,184,204,.16);
  --fk-on-accent:   #04212a;

  /* ---- Status / Ampel ---- */
  --fk-ok:#33c08a;      --fk-ok-weak:rgba(51,192,138,.16);
  --fk-warn:#e0a92e;    --fk-warn-weak:rgba(224,169,46,.16);
  --fk-danger:#ef5a5a;  --fk-danger-weak:rgba(239,90,90,.16);
  --fk-info:#4aa3ff;    --fk-info-weak:rgba(74,163,255,.16);
  --fk-halt:#f6cf7a;    --fk-aufenthalt:#f6a23a;   /* Halt-/Aufenthalt-Pins auf Karte und in Listen (07.09.) */

  /* ---- Tracker-Zustaende (nutzen die Statusfarben) ---- */
  --fk-online:var(--fk-ok);
  --fk-standby:var(--fk-warn);
  --fk-aus:var(--fk-muted);
  --fk-hoch:var(--fk-accent);

  /* ---- Abstaende (4-px-Raster) ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:28px; --sp-8:32px;

  /* ---- Radius ---- */
  --fk-r-1:8px; --fk-r-2:12px; --fk-r-3:16px; --fk-pill:999px;

  /* ---- Typografie (eine Schrift, feste Leiter; keine Google-Fonts wegen DSGVO) ---- */
  --fk-font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --fk-mono: ui-monospace,"SF Mono","Cascadia Code",Consolas,"Roboto Mono",monospace;
  --fk-fs-xs:11px; --fk-fs-sm:12.5px; --fk-fs-md:14px; --fk-fs-lg:16px; --fk-fs-xl:19px; --fk-fs-2xl:24px;

  /* ---- Steuerhoehe + Schatten (Schatten nur fuer echte Overlays) ---- */
  --fk-h:34px;

  /* ---- Bruecke: alte, je Seite erfundene Variablennamen auf das System legen,
          damit bestehende Seiten das CI uebernehmen, sobald ihr eigener :root-Block
          entfaellt (dann erben sie von hier). ---- */
  --bg:var(--fk-bg); --panel:var(--fk-surface); --panel2:var(--fk-surface-2);
  --panel3:var(--fk-surface-3); --linie:var(--fk-line); --line:var(--fk-line);
  --text:var(--fk-text); --grau:var(--fk-muted); --muted:var(--fk-muted); --card:var(--fk-surface);
  --akzent:var(--fk-accent); --accent:var(--fk-accent); --accent-ink:var(--fk-accent-2);
  --gruen:var(--fk-ok); --rot:var(--fk-danger); --gelb:var(--fk-warn); --lila:var(--fk-accent);
  --ok:var(--fk-ok); --fail:var(--fk-danger); --rein:var(--fk-ok); --raus:var(--fk-info); --warn:var(--fk-warn);
}

/* ---- Grundlagen (nur wo ausdruecklich .fk-app gesetzt ist, um alte Seiten nicht zu stoeren) ---- */
/* Seiten MIT Scrollbalken waren schmaler als Seiten ohne - der Kopf sprang beim
   Wechseln. Der stabile Rinnenplatz haelt die Breite gleich (David 04.09.). */
html{scrollbar-gutter:stable}
.fk-app{background:var(--fk-bg);color:var(--fk-text);
  font:var(--fk-fs-md)/1.5 var(--fk-font);-webkit-font-smoothing:antialiased;margin:0}
.fk-app *{box-sizing:border-box}

/* ---- Typo-Bausteine ---- */
.fk-label{font-size:var(--fk-fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fk-muted)}
.fk-h{font-size:var(--fk-fs-lg);font-weight:700;letter-spacing:-.01em;margin:0}
.fk-sub{color:var(--fk-text-2);font-size:var(--fk-fs-sm)}
.fk-mono{font-family:var(--fk-mono);font-variant-numeric:tabular-nums}
.fk-muted{color:var(--fk-muted)}

/* ---- Karte / Abschnitt ---- */
.fk-card{background:var(--fk-surface);border:1px solid var(--fk-line);border-radius:var(--fk-r-2);
  padding:var(--sp-4)}
.fk-sec{padding:var(--sp-4) 0;border-top:1px solid var(--fk-line)}
.fk-sec:first-child{border-top:0;padding-top:0}
.fk-sec>.fk-label{display:block;margin-bottom:var(--sp-3)}

/* ---- Schluessel/Wert-Raster ---- */
.fk-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:var(--sp-2)}
.fk-kv .z{background:var(--fk-surface-2);border:1px solid var(--fk-line);border-radius:var(--fk-r-1);
  padding:var(--sp-3)}
.fk-kv .z .k{font-size:var(--fk-fs-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--fk-muted)}
.fk-kv .z .v{font-size:var(--fk-fs-lg);font-weight:700;margin-top:2px}
.fk-kv .z .v small{font-size:var(--fk-fs-sm);font-weight:500;color:var(--fk-muted)}

/* ---- Zeile (Label links, Steuerung rechts) ---- */
.fk-row{display:flex;align-items:center;gap:var(--sp-2);min-height:var(--fk-h);padding:var(--sp-1) 0}
.fk-row .bez{flex:1;min-width:120px;color:var(--fk-text)}

/* ---- Knoepfe: EIN Aussehen, drei Rollen, zwei Groessen ---- */
.fk-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  height:var(--fk-h);padding:0 var(--sp-3);border-radius:var(--fk-r-1);
  border:1px solid var(--fk-line-2);background:var(--fk-surface-2);color:var(--fk-text);
  font:600 var(--fk-fs-sm)/1 var(--fk-font);cursor:pointer;white-space:nowrap;margin:0;
  transition:border-color .12s,background .12s}
.fk-btn:hover{border-color:var(--fk-accent);color:var(--fk-text)}
.fk-btn:focus-visible{outline:2px solid var(--fk-accent);outline-offset:2px}
.fk-btn[disabled]{opacity:.45;cursor:not-allowed}
.fk-btn.primary{background:var(--fk-accent);border-color:var(--fk-accent);color:var(--fk-on-accent)}
.fk-btn.primary:hover{filter:brightness(1.08)}
.fk-btn.ghost{background:transparent;border-color:var(--fk-line-2)}
.fk-btn.danger{color:var(--fk-danger);border-color:var(--fk-danger)}
.fk-btn.danger:hover{background:var(--fk-danger-weak)}
.fk-btn.an{border-color:var(--fk-accent);color:var(--fk-accent-2);background:var(--fk-accent-weak)}
.fk-btn.sm{height:26px;padding:0 var(--sp-2);font-size:var(--fk-fs-xs)}
.fk-btn.block{width:100%}
.fk-btns{display:flex;flex-wrap:wrap;gap:var(--sp-2)}

/* ---- Eingaben ---- */
.fk-input,.fk-select{height:var(--fk-h);background:var(--fk-surface-2);color:var(--fk-text);
  border:1px solid var(--fk-line-2);border-radius:var(--fk-r-1);padding:0 var(--sp-3);
  font:var(--fk-fs-sm)/1 var(--fk-font);max-width:100%}
.fk-input:focus,.fk-select:focus{outline:2px solid var(--fk-accent);outline-offset:1px;
  border-color:var(--fk-accent)}
.fk-input.num{width:72px;text-align:right;font-family:var(--fk-mono)}

/* ---- Schalter ---- */
.fk-switch{width:38px;height:22px;border-radius:var(--fk-pill);background:var(--fk-line-2);
  border:0;position:relative;cursor:pointer;flex:none;transition:background .14s}
.fk-switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:#fff;transition:left .14s}
.fk-switch.an{background:var(--fk-accent)}
.fk-switch.an::after{left:18px}
.fk-switch.unklar{background:var(--fk-warn)}
.fk-switch[disabled]{opacity:.45;cursor:not-allowed}

/* ---- Pillen / Status ---- */
.fk-pill{display:inline-flex;align-items:center;gap:6px;font-size:var(--fk-fs-xs);font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:var(--fk-pill);
  background:var(--fk-surface-3);color:var(--fk-text-2)}
.fk-pill.ok{background:var(--fk-ok-weak);color:var(--fk-ok)}
.fk-pill.warn{background:var(--fk-warn-weak);color:var(--fk-warn)}
.fk-pill.danger{background:var(--fk-danger-weak);color:var(--fk-danger)}
.fk-pill.accent{background:var(--fk-accent-weak);color:var(--fk-accent-2)}
.fk-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--fk-muted)}
.fk-dot.ok{background:var(--fk-ok)} .fk-dot.warn{background:var(--fk-warn)}
.fk-dot.danger{background:var(--fk-danger)} .fk-dot.accent{background:var(--fk-accent)}

/* ---- Reiter ---- */
.fk-tabs{display:flex;gap:2px;border-bottom:1px solid var(--fk-line)}
.fk-tabs button{flex:1;background:none;border:0;border-bottom:2px solid transparent;
  color:var(--fk-muted);padding:var(--sp-3) var(--sp-2);font:600 var(--fk-fs-sm)/1 var(--fk-font);
  cursor:pointer}
.fk-tabs button:hover{color:var(--fk-text)}
.fk-tabs button.an{color:var(--fk-accent-2);border-bottom-color:var(--fk-accent)}

/* ---- Listenzeile (Trackerliste) ---- */
.fk-item{display:flex;align-items:center;gap:var(--sp-3);width:100%;text-align:left;
  background:var(--fk-surface);border:1px solid var(--fk-line);border-radius:var(--fk-r-1);
  padding:var(--sp-3);cursor:pointer;color:var(--fk-text);transition:border-color .12s}
.fk-item:hover{border-color:var(--fk-line-2)}
.fk-item.an{border-color:var(--fk-accent);background:var(--fk-accent-weak)}
.fk-item .name{font-weight:700}
.fk-item .meta{color:var(--fk-muted);font-size:var(--fk-fs-sm)}
.fk-item .rechts{margin-left:auto;text-align:right}

/* ---- Sanfte Bildlaufleiste ---- */
.fk-scroll{scrollbar-width:thin;scrollbar-color:var(--fk-line-2) transparent}
.fk-scroll::-webkit-scrollbar{width:9px;height:9px}
.fk-scroll::-webkit-scrollbar-thumb{background:var(--fk-line-2);border-radius:var(--fk-pill)}
.fk-scroll::-webkit-scrollbar-track{background:transparent}

/* ---- kleine Helfer ---- */
.fk-stack{display:flex;flex-direction:column;gap:var(--sp-3)}
.fk-flex{display:flex;align-items:center;gap:var(--sp-2)}
.fk-note{font-size:var(--fk-fs-sm);color:var(--fk-muted)}
.fk-note.ok{color:var(--fk-ok)} .fk-note.fail{color:var(--fk-danger)}

/* ============================================================================
   ERWEITERUNG: Bausteine fuer ALLE Bereiche (Tabellen, Formulare, Overlays,
   Rueckmeldungen, Zustaende, Karten-Steuerung, Diagramme).
   ============================================================================ */
:root{
  --fk-shadow-1:0 2px 8px rgba(0,0,0,.35);   /* leichte Erhebung (Popover) */
  --fk-shadow-2:0 24px 60px rgba(0,0,0,.55); /* echtes Overlay/Modal */
  --fk-chart-line:var(--fk-accent);
  --fk-chart-fill:var(--fk-accent-weak);
  --fk-chart-grid:var(--fk-line);
  --fk-chart-axis:var(--fk-muted);
  --fk-z-overlay:3000;
  --fk-focus:0 0 0 2px var(--fk-bg),0 0 0 4px var(--fk-accent);
}

/* ---- Link ---- */
.fk-link{color:var(--fk-accent-2);text-decoration:none;font-weight:600}
.fk-link:hover{text-decoration:underline}

/* ---- Tabellen (SIM-Uebersicht, Berichte, Geraete-Gesundheit, Nutzerliste) ---- */
.fk-tablewrap{overflow-x:auto;border:1px solid var(--fk-line);border-radius:var(--fk-r-2);
  background:var(--fk-surface)}
.fk-table{width:100%;border-collapse:collapse;font-size:var(--fk-fs-sm)}
.fk-table th,.fk-table td{text-align:left;padding:var(--sp-3);border-bottom:1px solid var(--fk-line);
  vertical-align:middle;white-space:nowrap}
.fk-table thead th{position:sticky;top:0;background:var(--fk-surface-2);color:var(--fk-muted);
  font-size:var(--fk-fs-xs);letter-spacing:.06em;text-transform:uppercase;font-weight:700;z-index:1}
.fk-table tbody tr:last-child td{border-bottom:0}
.fk-table tbody tr:hover td{background:var(--fk-surface-2)}
.fk-table td.num,.fk-table th.num{text-align:right;font-family:var(--fk-mono);
  font-variant-numeric:tabular-nums}
.fk-table .leise{color:var(--fk-muted)}

/* ---- Formularfeld (Label + Eingabe + Hinweis/Fehler), einheitlich fuer alle Formulare ---- */
.fk-field{display:flex;flex-direction:column;gap:var(--sp-1)}
.fk-field>label{font-size:var(--fk-fs-sm);color:var(--fk-text-2);font-weight:600}
.fk-field .fk-input,.fk-field .fk-select{height:var(--fk-h);width:100%}
.fk-field .hinweis{font-size:var(--fk-fs-xs);color:var(--fk-muted)}
.fk-field.fehler .fk-input,.fk-field.fehler .fk-select{border-color:var(--fk-danger)}
.fk-field.fehler .hinweis{color:var(--fk-danger)}

/* ---- Overlay / Modal (Steuerung, Dialoge Geraet/Zaun/Routen) ---- */
.fk-overlay{position:fixed;inset:0;z-index:var(--fk-z-overlay);background:rgba(6,10,16,.72);
  display:none;align-items:center;justify-content:center;padding:var(--sp-5)}
.fk-overlay.auf{display:flex}
.fk-modal{background:var(--fk-surface);border:1px solid var(--fk-line-2);border-radius:var(--fk-r-3);
  width:min(560px,100%);max-height:88vh;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:var(--fk-shadow-2)}
.fk-modal.breit{width:min(920px,100%);height:min(88vh,900px)}
.fk-modal>.kopf{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4);
  border-bottom:1px solid var(--fk-line)}
.fk-modal>.kopf .fk-h{flex:1}
.fk-modal>.rumpf{padding:var(--sp-4);overflow:auto;flex:1}
.fk-modal>.fuss{display:flex;justify-content:flex-end;gap:var(--sp-2);padding:var(--sp-4);
  border-top:1px solid var(--fk-line)}
@media (max-width:640px), (max-height:560px){ .fk-overlay{padding:0}
  .fk-modal,.fk-modal.breit{max-height:100%;height:100%;width:100%;border:0;border-radius:0} }

/* ---- Banner (dauerhafter Hinweis im Fluss, z.B. "Tracker verstummt") ---- */
.fk-banner{display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);
  border-radius:var(--fk-r-2);border:1px solid var(--fk-line);background:var(--fk-surface-2);
  font-size:var(--fk-fs-sm)}
.fk-banner .fk-dot{margin-top:5px}
.fk-banner.info{border-color:color-mix(in srgb,var(--fk-info) 45%,transparent);background:var(--fk-info-weak)}
.fk-banner.warn{border-color:color-mix(in srgb,var(--fk-warn) 45%,transparent);background:var(--fk-warn-weak)}
.fk-banner.danger{border-color:color-mix(in srgb,var(--fk-danger) 45%,transparent);background:var(--fk-danger-weak)}

/* ---- Toast (kurze Rueckmeldung; Container fixiert unten rechts) ---- */
.fk-toasts{position:fixed;right:var(--sp-4);bottom:calc(var(--sp-4) + env(safe-area-inset-bottom,0px));z-index:calc(var(--fk-z-overlay) + 10);
  display:flex;flex-direction:column;gap:var(--sp-2);max-width:340px}
.fk-toast{background:var(--fk-surface-3);border:1px solid var(--fk-line-2);border-radius:var(--fk-r-1);
  padding:var(--sp-3) var(--sp-4);box-shadow:var(--fk-shadow-1);font-size:var(--fk-fs-sm);
  border-left:3px solid var(--fk-accent)}
.fk-toast.ok{border-left-color:var(--fk-ok)} .fk-toast.warn{border-left-color:var(--fk-warn)}
.fk-toast.danger{border-left-color:var(--fk-danger)}

/* ---- Badge (Zaehler, z.B. offene Alarme) ---- */
.fk-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;
  padding:0 5px;border-radius:var(--fk-pill);background:var(--fk-accent);color:var(--fk-on-accent);
  font-size:var(--fk-fs-xs);font-weight:700;font-variant-numeric:tabular-nums}
.fk-badge.danger{background:var(--fk-danger);color:#fff} .fk-badge.leise{background:var(--fk-line-2);color:var(--fk-text)}

/* ---- Segmentschalter (Auswahl mit genau EINER aktiven Option) ---- */
.fk-seg{display:inline-flex;background:var(--fk-surface-2);border:1px solid var(--fk-line-2);
  border-radius:var(--fk-r-1);padding:2px;gap:2px}
.fk-seg button{border:0;background:transparent;color:var(--fk-text-2);height:28px;padding:0 var(--sp-3);
  border-radius:6px;font:600 var(--fk-fs-sm)/1 var(--fk-font);cursor:pointer}
.fk-seg button.an{background:var(--fk-accent);color:var(--fk-on-accent)}

/* ---- Karten-Steuerelemente (Zoom, Ebene, Zentrieren, Zeitraffer) ---- */
.fk-mapctl{display:inline-flex;align-items:center;justify-content:center;width:var(--fk-h);height:var(--fk-h);
  border-radius:var(--fk-r-1);border:1px solid var(--fk-line-2);background:var(--fk-surface);
  color:var(--fk-text);cursor:pointer;box-shadow:var(--fk-shadow-1)}
.fk-mapctl:hover{border-color:var(--fk-accent);color:var(--fk-accent-2)}
.fk-mapctl.an{background:var(--fk-accent);border-color:var(--fk-accent);color:var(--fk-on-accent)}
.fk-mapbar{display:inline-flex;gap:var(--sp-2);padding:var(--sp-2);background:var(--fk-surface);
  border:1px solid var(--fk-line);border-radius:var(--fk-r-2);box-shadow:var(--fk-shadow-1)}

/* ---- Leerzustand / Ladezustand ---- */
.fk-empty{text-align:center;color:var(--fk-muted);padding:var(--sp-6) var(--sp-4);font-size:var(--fk-fs-sm)}
.fk-empty .titel{color:var(--fk-text-2);font-weight:700;margin-bottom:var(--sp-1)}
.fk-skeleton{background:linear-gradient(90deg,var(--fk-surface-2) 25%,var(--fk-surface-3) 37%,var(--fk-surface-2) 63%);
  background-size:400% 100%;border-radius:var(--fk-r-1);animation:fk-schimmer 1.2s ease-in-out infinite;height:14px}
@keyframes fk-schimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* ---- Sichtbarer Tastaturfokus fuer ALLE fk-Bedienelemente ---- */
.fk-item:focus-visible,.fk-switch:focus-visible,.fk-seg button:focus-visible,
.fk-mapctl:focus-visible,.fk-tabs button:focus-visible,.fk-link:focus-visible{
  outline:2px solid var(--fk-accent);outline-offset:2px}

/* ---- Bewegung reduzieren, wenn das System es wuenscht ---- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}


/* ================= Bewegungssystem (EIN Satz Tokens, 04.09.2026) =================
   Regeln: Zustandswechsel 150ms, Raumwechsel (Panel/Overlay) 240ms, immer die
   weiche Kurve. Neue Animationen NUR ueber diese Tokens. */
:root{
  --anim-fix:150ms;                       /* Hover, Farben, kleine Zustaende */
  --anim:240ms;                           /* Panels, Overlays, Aufklappen */
  --anim-kurve:cubic-bezier(.33,1,.36,1)  /* weich auslaufend */
}
.knopf,.fk-btn,.tknopf,.schalter,.fkfrage-k,.pp-eckknopf{
  transition:color var(--anim-fix),border-color var(--anim-fix),
             background var(--anim-fix),opacity var(--anim-fix)}
@keyframes fkAuf{from{opacity:0;transform:translateY(8px) scale(.985)}
                 to{opacity:1;transform:none}}
.fk-overlay.auf .fk-modal{animation:fkAuf var(--anim) var(--anim-kurve)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}


/* ---- Menue-Popover (mobil): kompakt am Knopf, KEINE Vollbild-Schublade.
   Eine Vollbild-Flaeche fuer vier Links war zu wuchtig (David 04.09.); das Popover
   sitzt wie das Glocken-Popup unter dem Kopf und laesst die Karte sichtbar. ---- */
.fk-menue{position:fixed;inset:0;z-index:var(--fk-z-overlay);display:none}
.fk-menue.auf{display:block}
.fk-menue>.grund{position:absolute;inset:0;background:transparent}
.fk-menue>.blatt{position:absolute;top:50px;right:8px;width:min(212px,calc(100vw - 16px));
  background:var(--fk-surface);border:1px solid var(--fk-line-2);border-radius:var(--fk-r-2);
  box-shadow:var(--fk-shadow-2);display:flex;flex-direction:column;padding:var(--sp-1);
  transform-origin:top right;animation:fkMenueAuf var(--anim-fix) var(--anim-kurve)}
@keyframes fkMenueAuf{from{opacity:0;transform:scale(.96) translateY(-4px)}to{opacity:1;transform:none}}
.fk-menue .fk-item{min-height:40px;padding:0 var(--sp-3);border-radius:var(--fk-r-1);
  font-size:var(--fk-fs-md);font-weight:600;text-decoration:none;color:var(--fk-text);
  border:0;background:none;gap:var(--sp-2)}
.fk-menue .fk-item:hover,.fk-menue .fk-item:focus-visible{background:var(--fk-surface-2)}
.fk-menue .fk-item.an{color:var(--fk-accent-2);background:var(--fk-accent-weak)}
.fk-menue .fk-item.gefahr{color:var(--fk-danger)}
.fk-menue .trenner{height:1px;background:var(--fk-line);margin:var(--sp-1) var(--sp-2)}
.fk-menue .kopfzeile{color:var(--fk-muted);font-size:var(--fk-fs-xs);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:var(--sp-2) var(--sp-3) var(--sp-1)}

/* ---- Kompaktes Frage-Modal (fkFragen) ---- */
.fk-modal.frage{width:min(420px,100%);height:auto}
.fk-modal.frage>.rumpf{padding-top:var(--sp-2)}
/* Handy: die Frage bleibt ein kleiner Kasten, kein Vollbild (steht bewusst NACH dem
   640er-Block weiter oben, der .fk-modal auf 100% zieht, und gewinnt dadurch) */
@media (max-width:640px){
  .fk-modal.frage{width:calc(100% - 32px);height:auto;border:1px solid var(--fk-line-2);border-radius:var(--fk-r-3)}
}

/* ---- Touch: Trefferflaechen mindestens 40px, auch fuer die kleinen Knoepfe ---- */
@media (pointer:coarse){
  .fk-btn{min-height:40px}
  .fk-btn.sm,.fk-seg button{min-height:40px}
}