/* =============================================================================
 * ff-design/components.css — Komponenten-Klassen (Wordmark, Statusleiste,
 * Countdown-Ring)
 * -----------------------------------------------------------------------------
 * Handgeschriebene Komponenten-CSS-Klassen, die in Templates direkt verwendet
 * werden. Nutzt die v3-Aliase aus tokens.css (--accent, --bg-elevated,
 * --border etc.), damit die Doku-Referenz 05-design-tokens.md eins-zu-eins
 * auf den Code passt.
 *
 * Tailwind-Utility-Kombinationen fuer ff-numpad-taste, ff-kachel, ff-tab
 * bleiben in src/main/frontend/css/input.css (Tailwind-@layer-Komponenten);
 * hier sind nur die handgeschriebenen Komponenten.
 * ===========================================================================*/

/* ---------------------------------------------------------------------------
 * Globaler Link-Reset (P8) — Browser-Default-Unterstrich raus. Klickbarkeit
 * zeigen wir ueber Background-Hover oder Chevrons (vgl. P9). Wer wirklich
 * einen Textlink will, nimmt die Klasse .ff-textlink.
 * ------------------------------------------------------------------------- */
a {
  color: inherit;
  text-decoration: none;
}
.ff-textlink {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 120ms;
}
.ff-textlink:hover {
  border-bottom-color: var(--accent);
}

/* ---------------------------------------------------------------------------
 * Wordmark — "FF · KASSE" als pure Typo-Identitaet.
 * Spec 05-design-tokens.md Abschnitt "Wordmark": Geist Sans Bold + Geist Mono
 * Uppercase mit Glut-Akzentpunkt. Drei Groessen, plus Hero-Stack-Variante.
 * Aktuelle Implementierung als Thymeleaf-Fragment (templates/fragments/
 * wordmark.html); diese Klassen liefern die zugrundeliegenden Styles.
 * ------------------------------------------------------------------------- */
.ff-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  font-family: var(--ff-font-sans);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.ff-wordmark__dot {
  color: var(--accent);
}
.ff-wordmark__name {
  font-family: var(--ff-font-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ff-wordmark--sm { font-size: var(--text-sm);  gap: 0.25rem; }
.ff-wordmark--md { font-size: var(--text-lg);  gap: 0.375rem; }
.ff-wordmark--lg { font-size: var(--text-2xl); gap: 0.5rem; }

/* Hero-Variante: vertikal gestapelt. Untertitel kommt separat im Template. */
.ff-wordmark-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.ff-wordmark-stack__ff {
  font-family: var(--ff-font-sans);
  font-size: 3rem;          /* 48px */
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text-primary);
}
.ff-wordmark-stack__dot {
  color: var(--accent);
  font-size: 1.5rem;        /* 24px */
  line-height: 1;
}
.ff-wordmark-stack__name {
  font-family: var(--ff-font-mono);
  font-size: 1.25rem;       /* 20px */
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
}

/* ---------------------------------------------------------------------------
 * Status-Leiste — schmale Mono-Zeile statt fetter App-Bar.
 * Spec: 32px Mobile / 28px Desktop, Mono, --text-xs, bg-elevated,
 * 1px untere Border, Punkt-Trenner mit Glut-Akzent.
 *
 * Markup (in fragments/header.html):
 *   <div class="ff-statusbar">
 *     <span>FF Fischeln</span>
 *     <span class="ff-statusbar__sep">·</span>
 *     <span>Kasse</span>
 *     ...
 *   </div>
 * ------------------------------------------------------------------------- */
.ff-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  height: 2rem;                /* 32px Mobile */
  padding: 0 1rem;
  background-color: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  font-family: var(--ff-font-mono);
  font-feature-settings: var(--ff-numeric-feature-settings);
  font-size: var(--text-xs);
  color: var(--text-muted);
  position: sticky;
  top: 0;
  z-index: var(--ff-z-sticky);
}
@media (min-width: 768px) {
  .ff-statusbar {
    height: 1.75rem;           /* 28px Desktop */
    padding: 0 1.5rem;
  }
}

/* Inner-Layout: linke Gruppe (App-Identitaet + Kontext), rechte Gruppe
 * (User + Logout). Beide truncaten bei knappem Platz. */
.ff-statusbar__left,
.ff-statusbar__right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.ff-statusbar__left  > *,
.ff-statusbar__right > * {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Punkt-Trenner in Lava-Akzent — Marvin-Wunsch 25.05. abends: setzt einen
 * klaren Markenanker in die Statusleiste, ohne die Schrift selbst zu
 * faerben. */
.ff-statusbar__sep {
  color: var(--accent);
}

/* Action-Buttons in der Status-Leiste — generischer Name, deckt Logout-
 * Button und Theme-Toggle gleichermassen ab (beide sollen unscheinbar
 * sein und nur bei Hover Aufmerksamkeit ziehen). */
.ff-statusbar__action {
  display: inline-flex;
  align-items: center;
  height: 1.5rem;
  padding: 0 0.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font: inherit;
  text-decoration: none;
  border-radius: var(--ff-radius-md);
  transition: color var(--ff-anim-duration-quick) var(--ff-anim-easing),
              background-color var(--ff-anim-duration-quick) var(--ff-anim-easing);
}
.ff-statusbar__action:hover {
  color: var(--text-primary);
  background-color: var(--bg-hover);
}
.ff-statusbar__action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Status-Leiste fuer den Admin-Bereich: gleicher Stil, aber als visueller
 * Hinweis (App-Name "Admin") + bewusst keine farbliche Differenzierung —
 * Trennung passiert ueber den Text, nicht Farbe (Werkzeug-Aesthetik). */

/* ---------------------------------------------------------------------------
 * Countdown-Ring — fuer Login-Sperre und vergleichbare Zeit-Visualisierung.
 * SVG steht im Template, JS aktualisiert stroke-dashoffset pro Frame; diese
 * Klassen positionieren und stylen die Schichten.
 * ------------------------------------------------------------------------- */
.ff-countdown-ring {
  position: relative;
  width: 96px;
  height: 96px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ff-countdown-ring-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Smooth-Update: stroke-dashoffset wird im JS pro Frame gesetzt; kleine
   * Glaettungs-Transition fuer den Fall, dass der RAF-Update aussetzt. */
  transition: stroke-dashoffset 60ms linear;
}
.ff-countdown-ring-bg {
  stroke: var(--border);
}
.ff-countdown-ring-fg {
  stroke: var(--accent);
  transition: stroke-dashoffset 60ms linear;
}
.ff-countdown-ring [data-countdown-label] {
  position: relative;
  z-index: 1;
  font-size: 1.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: var(--ff-numeric-feature-settings);
}

/* ---------------------------------------------------------------------------
 * App-Layout mit Sidebar — Design-Reset 24.05.2026.
 * Desktop (>= 1024px): Sidebar links, Hauptinhalt rechts (grid).
 * Mobile/Tablet (< 1024px): Sidebar als Drawer hinter Hamburger-Toggle.
 *
 * Markup:
 *   <body>
 *     <div class="ff-app" x-data="{ menuOffen: false }">
 *       <button class="ff-app__menu-toggle" @click="menuOffen = !menuOffen">…</button>
 *       <div th:replace="~{fragments/sidebar :: sidebar(person, aktiv)}"></div>
 *       <main class="ff-app__main">…</main>
 *     </div>
 *   </body>
 * ------------------------------------------------------------------------- */
.ff-app {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
}
@media (min-width: 1024px) {
  .ff-app {
    grid-template-columns: 220px 1fr;
  }
}

.ff-app__main {
  padding: 24px 24px 64px;
  min-width: 0;
}
@media (min-width: 768px) {
  .ff-app__main {
    padding: 32px 40px 64px;
  }
}

/* Hamburger-Toggle — nur auf Mobile sichtbar */
.ff-app__menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 12px;
  border: 1px solid var(--border);
  border-radius: var(--ff-radius-md);
  background: var(--bg-elevated);
  color: var(--text-primary);
  cursor: pointer;
}
@media (min-width: 1024px) {
  .ff-app__menu-toggle { display: none; }
}

/* ---------------------------------------------------------------------------
 * Sidebar — Navigations-Spalte fuer Admin-Bereich.
 * 220px breit, sticky, Logout/Theme im Footer.
 * ------------------------------------------------------------------------- */
.ff-sidebar {
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 16px 0;
  position: sticky;
  top: 0;
  height: 100vh;
  min-width: 0;
}

/* Auf Mobile: als Drawer ueber Inhalt */
@media (max-width: 1023.98px) {
  .ff-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    height: 100vh;
    z-index: var(--ff-z-modal);
    transform: translateX(-100%);
    transition: transform 220ms var(--ff-anim-easing);
    box-shadow: var(--ff-shadow-lg);
  }
  .ff-sidebar.is-open {
    transform: translateX(0);
  }
}

/* Brand-Block: Logo links + "FF Fischeln" (Sans) + "ADMIN" (Mono Caps, klein). */
.ff-sidebar__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px 16px;
}
.ff-sidebar__brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ff-sidebar__brand-name {
  font-family: var(--ff-font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.ff-sidebar__brand-context {
  font-family: var(--ff-font-mono);
  font-feature-settings: var(--ff-numeric-feature-settings);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* User-Block mit Avatar, Name, Stammnummer + Rolle. */
.ff-sidebar__user-block {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px 14px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.ff-sidebar__avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--ff-radius-md);
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-font-mono);
  font-feature-settings: var(--ff-numeric-feature-settings);
  font-size: 12px;
  font-weight: 500;
  flex-shrink: 0;
}
.ff-sidebar__user-meta {
  flex: 1;
  min-width: 0;
}
.ff-sidebar__user-name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ff-sidebar__user-ids {
  font-family: var(--ff-font-mono);
  font-feature-settings: var(--ff-numeric-feature-settings);
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 4px;
}
.ff-sidebar__user-sep {
  color: color-mix(in oklab, var(--text-muted) 60%, transparent);
}

.ff-sidebar__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 10px 8px;
  overflow-y: auto;
}

/* Navigations-Link: Icon | Label | optionaler Indikator. Aktiver Eintrag
 * bekommt 2px-Accent-Balken am linken Rand (via .ff-sidebar__active-bar). */
.ff-sidebar__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 10px 7px 12px;
  border-radius: var(--ff-radius-md);
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  transition: background-color 120ms var(--ff-anim-easing),
              color 120ms var(--ff-anim-easing);
}
.ff-sidebar__link:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.ff-sidebar__link.is-active {
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  color: var(--accent);
}
.ff-sidebar__active-bar {
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
  opacity: 0;
}
.ff-sidebar__link.is-active .ff-sidebar__active-bar {
  opacity: 1;
}
.ff-sidebar__icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}
.ff-sidebar__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ff-sidebar__badge {
  font-family: var(--ff-font-mono);
  font-feature-settings: var(--ff-numeric-feature-settings);
  font-size: 10px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--state-warn);
  color: var(--bg-base);
  line-height: 1.4;
}
.ff-sidebar__badge.is-err {
  background: var(--state-err);
}
.ff-sidebar__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--state-warn);
  flex-shrink: 0;
}

/* Foot: Abmelden links (flex-1), Theme-Toggle als kleines Icon rechts. */
.ff-sidebar__foot {
  padding: 10px 14px 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-top: 1px solid var(--border);
}
.ff-sidebar__foot-form {
  flex: 1;
  min-width: 0;
}
.ff-sidebar__foot-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--ff-radius-md);
  background: transparent;
  border: none;
  cursor: pointer;
  width: 100%;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-family: inherit;
  text-align: left;
}
.ff-sidebar__foot-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Theme-Toggle als Icon-Button rechts in der Sidebar-Foot */
.ff-sidebar__theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--ff-radius-md);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  flex-shrink: 0;
}
.ff-sidebar__theme-btn:hover {
  background: var(--bg-hover);
  color: var(--accent);
}
.ff-sidebar__theme-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* System-Status-Lampe unten in der Sidebar: gruener Puls + Mono-Zeile.
 * Funkgeraet-/Einsatzleitstand-Anmutung — Wiedererkennungs-Element der
 * FF-Apps. Pulst sanft, damit man weiss: System lebt. */
.ff-sidebar__system {
  padding: 6px 14px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-top: 1px solid var(--border);
}
.ff-sidebar__system-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--state-ok);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--state-ok) 18%, transparent);
  animation: ff-system-pulse 2.4s ease-in-out infinite;
}
.ff-sidebar__system-text {
  font-family: var(--ff-font-mono);
  font-feature-settings: var(--ff-numeric-feature-settings);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.08em;
}
@keyframes ff-system-pulse {
  0%, 100% { box-shadow: 0 0 0 2px color-mix(in oklab, var(--state-ok) 18%, transparent); }
  50%      { box-shadow: 0 0 0 3px color-mix(in oklab, var(--state-ok) 28%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .ff-sidebar__system-dot { animation: none; }
}

/* Backdrop fuer Mobile-Drawer */
.ff-sidebar-backdrop {
  display: none;
}
@media (max-width: 1023.98px) {
  .ff-sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: var(--ff-bg-overlay);
    z-index: calc(var(--ff-z-modal) - 1);
  }
}

/* ---------------------------------------------------------------------------
 * ff-dot — Status-Mikro-Element (macOS-Lichter-Aesthetik).
 * 8px Punkt links neben Navigations- oder Listen-Items. Vier Zustaende:
 * neutral (transparent), accent (Glut), ok (gruen), warn (gelb), err (rot).
 * ------------------------------------------------------------------------- */
.ff-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: transparent;
  flex-shrink: 0;
  display: inline-block;
}
.ff-dot--accent { background: var(--accent); }
.ff-dot--ok     { background: var(--state-ok); }
.ff-dot--warn   { background: var(--state-warn); }
.ff-dot--err    { background: var(--state-err); }

/* ---------------------------------------------------------------------------
 * ff-stat-list — Kennzahl-Liste fuer Uebersicht-Dashboard.
 * macOS-Settings-Aesthetik: Dot links, Label, Werte rechts, 1px-Trenner.
 * Statt drei Kachel-Karten kommt eine Liste mit klaren Zeilen.
 * ------------------------------------------------------------------------- */
.ff-stat-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--border);
}
.ff-stat-list__item {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  text-decoration: none;
  transition: background-color 120ms var(--ff-anim-easing);
}
.ff-stat-list__item:hover {
  background: var(--bg-hover);
}
.ff-stat-list__body h3 {
  font-size: var(--text-base);
  font-weight: 600;
  margin: 0;
  color: var(--text-primary);
}
.ff-stat-list__body p {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 2px 0 0;
}
.ff-stat-list__value {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.ff-stat-list__value-num {
  font-family: var(--ff-font-mono);
  font-feature-settings: var(--ff-numeric-feature-settings);
  font-size: var(--text-display);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.ff-stat-list__value-num.is-negative {
  color: var(--state-err);
}
.ff-stat-list__unit {
  font-family: var(--ff-font-mono);
  font-feature-settings: var(--ff-numeric-feature-settings);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ---------------------------------------------------------------------------
 * ff-table — flache Tabellen, Sortierbar via x-data.
 * macOS-/Settings-Look: Header Sentence Case Sans, 1px-Trenner, hover.
 * ------------------------------------------------------------------------- */
.ff-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
  color: var(--text-primary);
}
.ff-table thead th {
  text-align: left;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-muted);
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  background: transparent;
}
.ff-table thead th.is-sortable {
  cursor: pointer;
  user-select: none;
}
.ff-table thead th.is-sortable:hover {
  color: var(--text-primary);
}
.ff-table thead th.is-sorted {
  color: var(--text-primary);
}
.ff-table thead th .ff-sort-caret {
  display: inline-block;
  margin-left: 4px;
  font-family: var(--ff-font-mono);
  font-size: var(--text-sm);
  color: var(--accent);
  width: 0.8em;
  text-align: center;
}
.ff-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.ff-table tbody tr {
  transition: background-color 120ms var(--ff-anim-easing);
}
.ff-table tbody tr:hover {
  background: var(--bg-hover);
}
.ff-table tbody tr.is-muted td {
  color: var(--text-muted);
}
.ff-table td.ff-table__num,
.ff-table th.ff-table__num {
  font-family: var(--ff-font-mono);
  font-feature-settings: var(--ff-numeric-feature-settings);
  text-align: right;
}
.ff-table .ff-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--bg-hover);
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.ff-table .ff-pill--warn { background: color-mix(in oklab, var(--state-warn) 18%, transparent); color: var(--state-warn); }
.ff-table .ff-pill--err  { background: color-mix(in oklab, var(--state-err)  18%, transparent); color: var(--state-err); }
.ff-table .ff-pill--ok   { background: color-mix(in oklab, var(--state-ok)   18%, transparent); color: var(--state-ok); }

/* ---------------------------------------------------------------------------
 * Page-Header — Seitentitel + Meta-Zeile, einheitlich auf allen Admin-Seiten.
 * ------------------------------------------------------------------------- */
.ff-page-header {
  margin-bottom: 22px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.ff-page-header__title {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ff-page-header__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-font-mono);
  font-feature-settings: var(--ff-numeric-feature-settings);
  font-size: 12px;
  color: var(--text-muted);
}

/* ---------------------------------------------------------------------------
 * Uebersicht-Kennzahlen — 4-Spalten-Listen-Layout pro Zeile.
 * Spalten: 28px-Dot | 1fr Label+Mikro | auto Wert | auto Action-Button.
 * Marvin-Mockup vom 24.05.2026, abgenickt. Statt 3 Kacheln nun 3 dichte
 * Zeilen mit klarem Aktions-Pfad rechts.
 * ------------------------------------------------------------------------- */
.ff-uebersicht-kennzahlen {
  border-top: 1px solid var(--border);
  margin-bottom: 28px;
}
.ff-uebersicht-row {
  display: grid;
  grid-template-columns: 28px 1fr auto auto auto;
  align-items: center;
  gap: 20px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--border);
  color: inherit;
}
.ff-uebersicht-row--klickbar {
  cursor: pointer;
  transition: background-color 120ms;
  border-radius: 6px;
  padding-left: 8px;
  padding-right: 8px;
  margin-left: -8px;
  margin-right: -8px;
}
.ff-uebersicht-row--klickbar:hover {
  background-color: var(--accent-soft);
}
.ff-uebersicht-row__chevron {
  color: var(--text-disabled);
  transition: color 120ms, transform 120ms;
}
.ff-uebersicht-row--klickbar:hover .ff-uebersicht-row__chevron {
  color: var(--accent);
  transform: translateX(2px);
}
.ff-uebersicht-row__dot-wrap {
  display: flex;
  justify-content: center;
}
.ff-uebersicht-row__dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--text-muted);
  display: inline-block;
}
.ff-uebersicht-row__dot.is-ok {
  background: var(--state-ok);
}
.ff-uebersicht-row__dot.is-warn {
  background: var(--state-warn);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--state-warn) 15%, transparent);
}
.ff-uebersicht-row__dot.is-err {
  background: var(--state-err);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--state-err) 15%, transparent);
}
.ff-uebersicht-row__dot.is-neutral {
  background: var(--border);
}
.ff-uebersicht-row__label {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.3;
}
.ff-uebersicht-row__sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  line-height: 1.4;
}
.ff-uebersicht-row__sep {
  color: color-mix(in oklab, var(--text-muted) 55%, transparent);
}
.ff-uebersicht-row__value {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.ff-uebersicht-row__num {
  font-family: var(--ff-font-mono);
  font-feature-settings: var(--ff-numeric-feature-settings);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.ff-uebersicht-row__num.is-negative {
  color: var(--state-err);
}
.ff-uebersicht-row__unit {
  font-family: var(--ff-font-mono);
  font-feature-settings: var(--ff-numeric-feature-settings);
  font-size: 11px;
  color: var(--text-muted);
}
.ff-uebersicht-row__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--ff-radius-md);
  color: var(--text-muted);
  font-size: 12px;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 120ms var(--ff-anim-easing),
              color 120ms var(--ff-anim-easing),
              background-color 120ms var(--ff-anim-easing);
}
.ff-uebersicht-row__action:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.ff-uebersicht-row__action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Schmalere Geraete: Action-Button rutscht in die untere Zeile, Value bleibt rechts. */
@media (max-width: 640px) {
  .ff-uebersicht-row {
    grid-template-columns: 28px 1fr auto;
    grid-template-areas:
      "dot body  value"
      ".   body  action";
    gap: 12px 16px;
  }
  .ff-uebersicht-row__dot-wrap { grid-area: dot; }
  .ff-uebersicht-row__body { grid-area: body; }
  .ff-uebersicht-row__value { grid-area: value; }
  .ff-uebersicht-row__action {
    grid-area: action;
    justify-self: end;
  }
  .ff-uebersicht-row__num { font-size: 22px; }
}

/* ---------------------------------------------------------------------------
 * Uebersicht-Zweier-Karten — "Letzte Buchungen" + "Knappe Bestaende".
 * 1px-Border, 14px Padding, je 1fr im Zweispalter, stapelt auf Mobile.
 * ------------------------------------------------------------------------- */
.ff-uebersicht-zweier {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 720px) {
  .ff-uebersicht-zweier {
    grid-template-columns: 1fr;
  }
}
.ff-uebersicht-karte {
  border: 1px solid var(--border);
  border-radius: var(--ff-radius-lg);
  padding: 14px 16px;
  background: var(--bg-elevated);
}
.ff-uebersicht-karte__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.ff-uebersicht-karte__title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}
.ff-uebersicht-karte__link {
  font-size: 11px;
  color: var(--accent);
  text-decoration: none;
}
.ff-uebersicht-karte__link:hover {
  text-decoration: underline;
}
.ff-uebersicht-karte__body {
  font-size: 12px;
  color: var(--text-primary);
}
.ff-uebersicht-karte__leer,
.ff-uebersicht-karte__ok {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  flex-direction: column;
  gap: 6px;
  color: var(--text-muted);
  font-size: 12px;
}
.ff-uebersicht-karte__ok svg {
  color: var(--state-ok);
}

.ff-uebersicht-buchungen {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ff-uebersicht-buchungen__zeile,
.ff-uebersicht-buchungen__total {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
}
.ff-uebersicht-buchungen__total {
  padding-top: 10px;
  margin-top: 2px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
}
.ff-uebersicht-buchungen__zeit {
  font-family: var(--ff-font-mono);
  font-feature-settings: var(--ff-numeric-feature-settings);
  font-size: 11px;
  color: var(--text-muted);
}
.ff-uebersicht-buchungen__text {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ff-uebersicht-buchungen__summe {
  font-family: var(--ff-font-mono);
  font-feature-settings: var(--ff-numeric-feature-settings);
  font-size: 12px;
  color: var(--text-primary);
}
.ff-uebersicht-buchungen__summe.is-negativ {
  color: var(--state-err);
}
.ff-uebersicht-buchungen__summe.is-storniert {
  color: var(--text-muted);
  text-decoration: line-through;
}

.ff-uebersicht-bestaende {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ff-uebersicht-bestaende__zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}
.ff-uebersicht-bestaende__name {
  color: var(--text-primary);
}
.ff-uebersicht-bestaende__bestand {
  font-family: var(--ff-font-mono);
  font-feature-settings: var(--ff-numeric-feature-settings);
  font-size: 12px;
  color: var(--state-warn);
}
.ff-uebersicht-bestaende__bestand.is-kritisch {
  color: var(--state-err);
}

/* ---------------------------------------------------------------------------
 * Buttons — Reset (claude.ai-aehnlich: schmal, ruhig, klar primaer).
 * ------------------------------------------------------------------------- */
.ff-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--ff-radius-md);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: var(--text-base);
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 120ms var(--ff-anim-easing),
              border-color 120ms var(--ff-anim-easing);
}
.ff-btn:hover {
  background: var(--bg-hover);
}
.ff-btn--primary,
.ff-btn--accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text-on);
}
.ff-btn--primary:hover,
.ff-btn--accent:hover {
  background: var(--ff-accent-hover);
  border-color: var(--ff-accent-hover);
}
.ff-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
}
.ff-btn--ghost:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.ff-btn--sm {
  padding: 4px 10px;
  font-size: var(--text-sm);
}
.ff-btn:disabled,
.ff-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: auto;
}
.ff-btn:disabled:hover,
.ff-btn[disabled]:hover {
  background: transparent;
}

/* ---------------------------------------------------------------------------
 * Logo (P2) — vier Groessen. Default src ist /img/logo-light.png; im Dark-
 * Mode wird via content-Property auf /img/logo-dark.png gewechselt.
 * Funktioniert in Chromium, Firefox, Safari (Stand 2026).
 * ------------------------------------------------------------------------- */
.ff-logo {
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}
.ff-logo--klein  { width: 40px;  height: 40px;  }
.ff-logo--mittel { width: 72px;  height: 72px;  }
.ff-logo--gross  { width: 140px; height: 140px; }
.ff-logo--riesig { width: 200px; height: 200px; }

:root.dark .ff-logo {
  content: url("/img/logo-dark.png");
}

/* ---------------------------------------------------------------------------
 * Admin-Login (P2/P3) — 2-Spalten-Layout (Form links, Hinweis-Box rechts).
 * Auf Mobile stacked.
 * ------------------------------------------------------------------------- */
.ff-admin-login {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 2.5rem);
}
.ff-admin-login__left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding: 48px 48px;
}
.ff-admin-login__aside {
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  padding: 32px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ff-admin-login__aside-tag {
  font-family: var(--ff-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--text-faint);
  margin-bottom: 4px;
}
.ff-admin-login__aside p { margin: 0; }
.ff-admin-login__aside strong { color: var(--text-primary); font-weight: 500; }

@media (min-width: 768px) {
  .ff-admin-login {
    flex-direction: row;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-top: 40px;
    margin-bottom: 40px;
    min-height: 480px;
    overflow: hidden;
  }
  .ff-admin-login__left {
    background: var(--bg-base);
  }
  .ff-admin-login__aside {
    width: 300px;
    flex-shrink: 0;
    border-top: none;
    border-left: 1px solid var(--border);
    padding: 32px;
  }
}

.ff-admin-login__brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ff-admin-login__kontext {
  font-family: var(--ff-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.ff-admin-login__titel {
  font-size: 22px;
  font-weight: 500;
  color: var(--text-primary);
  margin-top: 1px;
  line-height: 1.2;
}
.ff-admin-login__sub {
  font-size: 13px;
  color: var(--text-faint);
  margin-top: 2px;
}

/* ---------------------------------------------------------------------------
 * Login-Util: ff-invisible — visibility:hidden mit reservierter Hoehe.
 *
 * Hintergrund: Im Template wurde urspruenglich Tailwinds `invisible` ueber
 * `:class="{ 'invisible': ... }"` (Alpine) dynamisch gesetzt. Tailwinds
 * Content-Scanner findet die Klasse aber nicht in dieser Schreibweise und
 * purged sie aus der kompilierten app.css raus — Folge: Klasse wird zur
 * Laufzeit gesetzt, hat aber keinen CSS-Effekt, das Element bleibt sichtbar.
 * Eigene Klasse umgeht das Purge-Problem komplett.
 * ------------------------------------------------------------------------- */
.ff-invisible {
  visibility: hidden !important;
}

/* ---------------------------------------------------------------------------
 * Login-Layout (P2/P3) — adaptiv zwischen einspaltig und zweispaltig.
 *
 * Default: einspaltig zentriert (max-w-md). Greift auf Handy hoch, Tablet hoch,
 * normalen Desktop (16:9, ausreichend Hoehe).
 *
 * Umkipp-Bedingung: Hoehe knapp UND Breite ausreichend UND Landscape.
 * Trifft Tablet quer (1280x800 / 1024x768) und alte 1366x768-Notebooks —
 * also genau die Geraete, wo einspaltig zu Scrollen zwingt. 16:9-Desktops
 * (>=1080 Hoehe) bleiben einspaltig wie gewuenscht.
 * ------------------------------------------------------------------------- */
.ff-login-main {
  width: 100%;
  max-width: 28rem;
  flex-direction: column;
}
.ff-login-side {
  width: 100%;
}

@media (min-width: 1024px) and (max-height: 900px) and (orientation: landscape) {
  .ff-login-main {
    max-width: 64rem;
    flex-direction: row;
    align-items: center;
    gap: 4rem;
  }
  .ff-login-side {
    flex: 1;
    max-width: 26rem;
  }
}

/* ---------------------------------------------------------------------------
 * Buchen-Login Brand-Block (P2/P5) — Logo + "FF Fischeln" + Untertitel.
 * ------------------------------------------------------------------------- */
.ff-login__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.ff-login__brand-name {
  font-family: var(--ff-font-mono);
  font-feature-settings: var(--ff-numeric-feature-settings);
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.02em;
  line-height: 1.15;
  white-space: nowrap;
  text-align: center;
}
.ff-login__brand-sub {
  font-family: var(--ff-font-mono);
  font-feature-settings: var(--ff-numeric-feature-settings);
  font-size: 11px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 4px;
  text-align: center;
  white-space: nowrap;
}
.ff-login__admin-link {
  position: fixed;
  bottom: 16px;
  right: 16px;
  font-size: 11px;
  color: var(--text-faint);
  padding: 6px 10px;
  border-radius: 6px;
  transition: color 120ms, background 120ms;
}
.ff-login__admin-link:hover {
  color: var(--text-muted);
  background: var(--bg-hover);
}

/* ---------------------------------------------------------------------------
 * Buchen-Login Display (P5) — feste Box, beide Eingabemodi greifen auf
 * dieselbe Slot-Spur. Kein Layout-Sprung zwischen Stammnummer und PIN.
 * ------------------------------------------------------------------------- */
.ff-login__display {
  width: 100%;
  max-width: 28rem;
  height: 88px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  box-shadow: var(--shadow-1);
}
.ff-login__slots-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  font-family: var(--ff-font-mono);
  font-feature-settings: var(--ff-numeric-feature-settings);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1;
  animation: ff-login-slots-fade 220ms ease-out;
}
@keyframes ff-login-slots-fade {
  from { opacity: 0.2; transform: translateY(2px); }
  to   { opacity: 1;   transform: translateY(0); }
}
.ff-login__stammnr {
  color: var(--text-primary);
  text-align: center;
  letter-spacing: 0.12em;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
}
/* Vorher: Sans 15px Placeholder, der die Display-Box geschrumpft hat,
 * sobald getippt wurde sprang die Schrift auf Mono 30px. Marvin: "skaliert
 * nicht richtig". Fix: gleiche Schrift wie der gefuellte Zustand, nur
 * dezenter, damit die Box optisch ruhig bleibt. */
.ff-login__placeholder {
  font-family: var(--ff-font-mono);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--text-disabled);
}
.ff-login__pin-slots {
  display: inline-flex;
  gap: 14px;
  align-items: center;
}
.ff-login__slot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--text-disabled);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--bg-base);
  transition: background 120ms, border-color 120ms;
}
.ff-login__slot.is-filled {
  background: var(--text-primary);
  border-color: var(--text-primary);
}
.ff-login__sperre {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.ff-login__sperre > span:first-child {
  font-size: 13px;
  font-weight: 500;
  color: var(--state-err);
  letter-spacing: 0.02em;
}
.ff-login__sperre > span:last-child {
  font-family: var(--ff-font-mono);
  font-size: 22px;
  color: var(--text-primary);
}

/* ---------------------------------------------------------------------------
 * Bildschirmschoner (P4) — sitzt auf /buchen als Vollbild-Overlay.
 * Pulsierendes Logo in der Mitte, gedaempfter Lava-Wash im Hintergrund,
 * Status-Zeile unten in Mono.
 * ------------------------------------------------------------------------- */
.ff-screensaver {
  position: fixed;
  inset: 0;
  z-index: var(--ff-z-screensaver);
  background: #0A0B0D;
  background-image:
    radial-gradient(ellipse at center, rgba(217,72,46,0.10), transparent 55%),
    radial-gradient(ellipse at center, rgba(217,72,46,0.04), transparent 75%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 36px;
  cursor: pointer;
  animation: ff-screensaver-fade-in 600ms ease-out;
  /* Komplette Bildschirmschoner-Typografie Mono — Terminal-/Kiosk-Aesthetik.
     Title, sub und hint erben automatisch ueber den Container; die Status-
     leiste hat ihr Mono ohnehin lokal. Siehe Issue #99. */
  font-family: var(--ff-font-mono);
}
@keyframes ff-screensaver-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Schoner nur ab Tablet-Quer-Breite (>=1024 px). Unterhalb (Handy, kleiner
   Tablet) zwingend display:none, damit der Alpine x-show-Trigger keinen
   Vollbild-Overlay ueber ein winziges Display legt. JS in screensaver.js
   setzt zusaetzlich keinen Timer auf — doppelter Schutz. */
@media (max-width: 1023px) {
  .ff-screensaver { display: none !important; }
}

.ff-screensaver__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.ff-screensaver__logo-frame {
  width: 170px;
  height: 170px;
  border-radius: 30px;
  background: linear-gradient(155deg, #1A1C1F, #0F1114);
  border: 1px solid #2A2D33;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  animation: ff-glow-pulse 4s ease-in-out infinite;
}
.ff-screensaver__logo-frame::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 36px;
  background: radial-gradient(circle at center, rgba(217,72,46,0.22), transparent 70%);
  pointer-events: none;
  animation: ff-glow-ring 4s ease-in-out infinite;
}
@keyframes ff-glow-pulse {
  0%, 100% {
    box-shadow:
      0 0 30px rgba(217,72,46,0.10),
      0 0 60px rgba(217,72,46,0.04),
      inset 0 1px 0 rgba(255,255,255,0.04);
  }
  50% {
    box-shadow:
      0 0 50px rgba(217,72,46,0.30),
      0 0 100px rgba(217,72,46,0.12),
      inset 0 1px 0 rgba(255,255,255,0.07);
  }
}
@keyframes ff-glow-ring {
  0%, 100% { transform: scale(1);    opacity: 0.4;  }
  50%      { transform: scale(1.08); opacity: 0.75; }
}

.ff-screensaver__title {
  font-size: 48px;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--accent);
  text-align: center;
  line-height: 1.05;
}
.ff-screensaver__sub {
  font-size: 18px;
  font-weight: 300;
  color: var(--text-muted);
  margin-top: 10px;
  text-align: center;
  letter-spacing: 0.02em;
}

.ff-screensaver__hint {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(217,72,46,0.06);
  backdrop-filter: blur(4px);
  font-size: 13px;
  color: var(--text-muted);
}

.ff-screensaver__status {
  position: absolute;
  bottom: 36px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  font-family: var(--ff-font-mono);
  /* font-size 10px -> 20px: Leiste war auf Tab-S6 aus 1-2 m Entfernung
     kaum lesbar. Verdoppelt wie im Auftrag gewuenscht (Issue #101). gap,
     bottom-Abstand und Indikator-Punkte proportional mitgezogen. */
  font-size: 20px;
  color: var(--text-disabled);
  letter-spacing: 0.06em;
}
.ff-screensaver__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--state-ok);
  box-shadow: 0 0 8px rgba(121,178,90,0.5);
}
.ff-bullet {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-disabled);
}

@media (prefers-reduced-motion: reduce) {
  .ff-screensaver,
  .ff-screensaver__logo-frame,
  .ff-screensaver__logo-frame::before {
    animation: none;
  }
}

/* ---------------------------------------------------------------------------
 * Einstellungen-Seite (P7) — drei Bereiche, jede mit Kopf + Zeilen.
 * Zeilen sind macOS-Systemeinstellungen-Style: linkes Label, rechtes Control.
 * ------------------------------------------------------------------------- */
.ff-einstellungen-bereich {
  margin: 32px 0;
  padding-bottom: 8px;
}
.ff-einstellungen-bereich + .ff-einstellungen-bereich {
  border-top: 1px solid var(--border);
  padding-top: 24px;
}
.ff-einstellungen-bereich__head {
  margin-bottom: 16px;
}
.ff-einstellungen-bereich__head .ff-h2 {
  margin: 0;
}

.ff-einstellungen-zeile {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(200px, 280px);
  gap: 24px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
.ff-einstellungen-zeile:first-of-type {
  border-top: none;
}
.ff-einstellungen-zeile__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--text-base);
  color: var(--text-primary);
}
.ff-einstellungen-zeile__label .ff-meta {
  font-size: 12px;
}
.ff-einstellungen-zeile__control {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

/* Segmented Control (Hell / Dunkel / System bzw. S / M / L) */
.ff-segctl {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-elevated);
}
.ff-segctl > button {
  background: transparent;
  border: none;
  padding: 6px 14px;
  font-size: var(--text-sm);
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  border-right: 1px solid var(--border);
  transition: background 120ms, color 120ms;
}
.ff-segctl > button:last-child {
  border-right: none;
}
.ff-segctl > button:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.ff-segctl > button.is-active {
  background: var(--accent);
  color: var(--accent-text-on);
  border-right-color: var(--accent);
}

/* Generische Form-Inputs auf der Settings-Seite */
.ff-input,
.ff-select {
  height: 36px;
  padding: 0 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--text-sm);
}
.ff-input--num {
  font-family: var(--ff-font-mono);
  font-feature-settings: var(--ff-numeric-feature-settings);
  text-align: right;
  width: 100px;
}
.ff-input:focus,
.ff-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.ff-input-suffix {
  font-family: var(--ff-font-mono);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .ff-einstellungen-zeile {
    grid-template-columns: 1fr;
  }
  .ff-einstellungen-zeile__control {
    justify-content: flex-start;
  }
}

/* ---------------------------------------------------------------------------
 * Tabellen-Action-Spalte (P10) — fixe Breite, 1fr 1fr Grid fuer gleich breite
 * Mini-Buttons. Klein, ghostig, on-hover Lava-Akzent.
 * ------------------------------------------------------------------------- */
.ff-table__action-col {
  width: 140px;
  min-width: 140px;
  text-align: right;
}
.ff-table__action-col:has(.ff-table__action-grid--3) {
  width: 200px;
  min-width: 200px;
}
.ff-table__action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.ff-table__action-grid--3 {
  grid-template-columns: 1fr 1fr 1fr;
}
.ff-table__action-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 4px 8px;
  border-radius: 5px;
  font-size: 11px;
  text-align: center;
  font-family: inherit;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.ff-table__action-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.ff-table__action-btn:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Inaktiv-Zeile (P10) — gedaempfte Optik + Mono-Badge */
.ff-table tbody tr.is-inaktiv {
  opacity: 0.55;
}
.ff-badge--mono {
  font-family: var(--ff-font-mono);
  font-feature-settings: var(--ff-numeric-feature-settings);
  font-size: 10px;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 6px;
  letter-spacing: 0.02em;
}

/* Doppelklick-Edit (P11) — Zeile zeigt Klickbarkeit, hover-Background */
.ff-table tbody tr.ff-table__row--dblclick {
  cursor: pointer;
}
.ff-table tbody tr.ff-table__row--dblclick:hover {
  background: var(--bg-hover);
}

/* Save-Knopf der Einstellungs-Seite: rechtsbuendig, kompakter Abstand.
 * Bewusst kein Vollbreiten-Block, kein Accent-Background — dezent. */
.ff-einstellungen-save {
  display: flex;
  justify-content: flex-end;
  padding-top: 16px;
  margin-top: 8px;
  border-top: 1px solid var(--border);
}