/* ═══════════════════════════════════════════════════════════════
   FAB – Floating Action Button with Radial Actions
   Panels: Feedback, Research, Tutorials
   ═══════════════════════════════════════════════════════════════ */

/* ── Container ── */
.fab-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 2147482400;
}
.fab-container.fab-hidden { display: none; }
.fab-container.fab-pos-bottom-right { right: 24px; bottom: 24px; left: auto; top: auto; }
.fab-container.fab-pos-bottom-left { left: 24px; bottom: 24px; right: auto; top: auto; }
.fab-container.fab-pos-top-right { right: 24px; top: 24px; left: auto; bottom: auto; }
.fab-container.fab-pos-top-left { left: 24px; top: 24px; right: auto; bottom: auto; }

#kiManagerEmbed[data-launcher-mode="fab"] .km-trigger {
  display: none !important;
}

/* ── Main Button ── */
.fab-main {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary, #6366f1), #818cf8);
  color: #fff;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.fab-main:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 28px rgba(99, 102, 241, 0.55);
}
.fab-main.open { transform: rotate(45deg); }
.fab-main.open:hover { transform: rotate(45deg) scale(1.08); }

/* ── Action Buttons (radial) ── */
.fab-actions {
  position: absolute;
  bottom: 62px;
  right: 0;
  z-index: 2147482420;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.fab-actions.open { pointer-events: auto; opacity: 1; }

/* ═══════════════════════════════════════
   STIL-SYMBOLE  (Owner-Auftrag 19.08.2026)
   ───────────────────────────────────────
   Der Trick ist vom Vorbild /opt/latest_runner/web/nx-icons.css uebernommen und
   ist der ganze Grund, warum ein Symbol dem Stil folgen KANN: das Icon ist kein
   Bild, sondern eine MASKE ueber einer Flaeche aus currentColor. Ein Emoji
   bringt seine Farben fest mit — eine Maske hat gar keine und erbt jede
   Textfarbe des Knopfes (Ruhe, Hover, aktiv, hell, dunkel).

   Die Maske selbst (--fab-icon) setzt static/js/icons.js je Stil als eingebettetes
   SVG. Die Vorgabe hier ist ein LEERES SVG: ein Symbol, das das Register nicht
   kennt, rendert damit unsichtbar statt als voller Farbblock — auch das ein
   Sicherheitsnetz des Vorbilds. Sichtbar wird an dieser Stelle stattdessen das
   aufgehobene Emoji, das fab.js in data-fab-icon-fallback stehen laesst.
   ═══════════════════════════════════════ */
.fab-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.fab-icon {
  --fab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3C/svg%3E");
  display: inline-block;
  width: var(--fab-icon-size, 1.35em);
  height: var(--fab-icon-size, 1.35em);
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--fab-icon) center/contain no-repeat;
          mask: var(--fab-icon) center/contain no-repeat;
}
/* Die Zeile im Einstellungsfenster traegt dieselbe Zeichnung, nur kleiner. */
.fab-settings-row-icon .fab-icon { --fab-icon-size: 1.05em; }
.fab-settings-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2em;
  margin-right: 6px;
  vertical-align: -0.15em;
}

.fab-action {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--bg-card, #14141f);
  color: var(--text-primary, #f1f5f9);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.15s;
  transform: scale(0) translateY(20px);
  opacity: 0;
  position: relative;
}
.fab-actions.open .fab-action { transform: scale(1) translateY(0); opacity: 1; }
.fab-actions.open .fab-action:nth-child(1) { transition-delay: 0.02s; }
.fab-actions.open .fab-action:nth-child(2) { transition-delay: 0.06s; }
.fab-actions.open .fab-action:nth-child(3) { transition-delay: 0.10s; }
.fab-actions.open .fab-action:nth-child(4) { transition-delay: 0.14s; }
.fab-actions.open .fab-action:nth-child(5) { transition-delay: 0.18s; }
.fab-actions.open .fab-action:nth-child(6) { transition-delay: 0.22s; }
.fab-actions.open .fab-action:nth-child(7) { transition-delay: 0.26s; }
.fab-actions.open .fab-action:nth-child(8) { transition-delay: 0.30s; }
.fab-action:hover { background: rgba(99, 102, 241, 0.15); transform: scale(1.12); }

/* ── Der Knopf zeigt, dass er wartet (Befund B21) ──
   Klickte ein Nutzer eine Fremd-Aktion und das Widget-Skript antwortete nicht, passierte
   5,8 s lang gar nichts — kein Ladezeiger, kein gesperrter Knopf, kein Text. aria-busy
   traegt dieselbe Aussage fuer den Screenreader; das hier ist die sichtbare Seite davon. */
.fab-action.is-loading { pointer-events: none; opacity: 0.65; }
.fab-action.is-loading::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--primary, #6366f1);
  animation: fabActionSpin 0.8s linear infinite;
}
@keyframes fabActionSpin { to { transform: rotate(360deg); } }

/* ── Hinweis-Zeile (Befunde B14 und B21) ──
   Sie sitzt IM Container, damit sie der eingestellten Position der Leiste folgt und nicht
   in einer Ecke klebt, in der die Leiste gar nicht steht. */
.fab-hinweis {
  position: absolute;
  bottom: 64px;
  right: 0;
  width: max-content;
  max-width: 320px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--bg-card, #14141f);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  color: var(--text-primary, #f1f5f9);
  font-size: 13px;
  line-height: 1.45;
  z-index: 2147482430;
}
.fab-hinweis[hidden] { display: none; }
.fab-hinweis-link { color: var(--primary, #6366f1); font-weight: 600; text-decoration: underline; }
.fab-container.fab-pos-bottom-left .fab-hinweis,
.fab-container.fab-pos-top-left .fab-hinweis { right: auto; left: 0; }
.fab-container.fab-pos-top-left .fab-hinweis,
.fab-container.fab-pos-top-right .fab-hinweis { bottom: auto; top: 64px; }
.fab-action-external {
  font-size: 1rem;
  font-weight: 800;
}
.fab-action-privacy_chat {
  background: linear-gradient(135deg, #0f766e, #10b981);
  border-color: rgba(52, 211, 153, 0.55);
  color: #ecfdf5;
}
.fab-action-privacy_chat:hover {
  background: linear-gradient(135deg, #0d9488, #34d399);
}
.fab-action-helpdesk {
  background: linear-gradient(135deg, #0369a1, #0ea5e9);
  border-color: rgba(56, 189, 248, 0.55);
  color: #f0f9ff;
}
.fab-action-helpdesk:hover {
  background: linear-gradient(135deg, #0284c7, #38bdf8);
}
.fab-action-dilara {
  background: linear-gradient(135deg, #39d5bd, #7dd3fc);
  border-color: rgba(125, 211, 252, 0.55);
  color: #06211e;
  font-weight: 900;
}
.fab-action-dilara:hover {
  background: linear-gradient(135deg, #45e5cc, #93c5fd);
}
.fab-action-coin {
  background: linear-gradient(135deg, #b45309, #f59e0b);
  border-color: rgba(245, 158, 11, 0.55);
  color: #fff9db;
}
.fab-action-coin:hover {
  background: linear-gradient(135deg, #92400e, #d97706);
}
.fab-action[hidden] {
  display: none !important;
}

.fab-container.fab-pos-bottom-left .fab-actions,
.fab-container.fab-pos-top-left .fab-actions {
  left: 0;
  right: auto;
}

.fab-container.fab-pos-top-right .fab-actions,
.fab-container.fab-pos-top-left .fab-actions {
  top: 62px;
  bottom: auto;
}

/* ── Tooltip ── */
.fab-action::before {
  content: attr(data-tooltip);
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-card, #14141f);
  color: var(--text-primary, #f1f5f9);
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
/* U23: die Beschriftung erschien NUR unter der Maus. Wer mit der Tastatur bedient,
   sah acht runde Knoepfe mit Symbolen und keinen Text — die aria-label sind gesetzt,
   aber ein sehender Tastatur-Nutzer hoert sie nicht. :focus-visible zeigt sie genau
   dann, wenn der Browser selbst einen Fokusring zeigen wuerde. */
.fab-action:hover::before,
.fab-action:focus-visible::before { opacity: 1; }
/* Und der Fokus muss ueberhaupt sichtbar sein: der Ring darf nicht unter dem
   naechsten Knopf verschwinden, deshalb hebt sich der fokussierte Knopf heraus. */
.fab-action:focus-visible {
  outline: 3px solid var(--accent, #818cf8);
  outline-offset: 2px;
  z-index: 1;
}
.fab-container.fab-pos-bottom-left .fab-action::before,
.fab-container.fab-pos-top-left .fab-action::before {
  left: calc(100% + 10px);
  right: auto;
}

/* ── Backdrop ── */
.fab-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2147482390;
}
.fab-backdrop.open { display: block; }

/* ═══════════════════════════════════════
   SHARED PANEL STYLES (Feedback & Research)
   ═══════════════════════════════════════ */
.fab-panel {
  display: none;
  position: absolute;
  bottom: 64px;
  right: 0;
  width: 340px;
  background: var(--bg-card, #14141f);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
  z-index: 2147482410;
  animation: fabPanelIn 0.25s ease;
}
.fab-panel.open { display: block; }
.fab-container.fab-pos-bottom-left .fab-panel,
.fab-container.fab-pos-top-left .fab-panel {
  left: 0;
  right: auto;
}
.fab-container.fab-pos-top-right .fab-panel,
.fab-container.fab-pos-top-left .fab-panel {
  top: 64px;
  bottom: auto;
}
@keyframes fabPanelIn {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.fab-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.fab-panel-title {
  font-weight: 600;
  color: var(--text-primary, #fff);
  font-size: 0.95rem;
}
.fab-panel-close {
  background: none;
  border: none;
  /* U24: war rgba(255,255,255,0.4) = 3,83:1 auf #14141f — unter AA (4,5:1).
     0.55 ergibt gemessen 6,13:1. Das × ist auf jedem Fenster der einzige
     SICHTBARE Ausweg; wer es nicht findet, sitzt im Vollbild fest. */
  color: rgba(255, 255, 255, 0.55);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.fab-panel-close:hover { color: var(--text-primary, #fff); }
.fab-panel-body { padding: 16px 18px 18px; }

/* Shared inputs */
.fab-input-text {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--text-primary, #fff);
  font-size: 0.88rem;
  font-family: inherit;
  margin-bottom: 10px;
}
.fab-input-text:focus { outline: none; border-color: var(--primary, #6366f1); }
.fab-input-textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 80px;
  resize: vertical;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text-primary, #fff);
  font-size: 0.88rem;
  font-family: inherit;
}
.fab-input-textarea:focus { outline: none; border-color: var(--primary, #6366f1); }
.fab-btn-primary {
  width: 100%;
  margin-top: 10px;
  padding: 10px 0;
  background: linear-gradient(135deg, var(--primary, #6366f1), #818cf8);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}
.fab-btn-primary:hover { opacity: 0.9; }
.fab-btn-primary:disabled { opacity: 0.5; cursor: default; }
.fab-success-msg {
  display: none;
  text-align: center;
  color: #34d399;
  font-size: 0.9rem;
  padding: 14px 0;
}
/* Befund B06: bis zum 18.08.2026 war NUR der Erfolg gestaltet. Ein Fehlschlag beim
   Absenden war vollstaendig unsichtbar — der Knopf sprang zurueck und sonst nichts.
   Die Farbe kommt nicht allein: das Warnzeichen steht im Text (⚠️), damit die Aussage
   auch ohne Farbwahrnehmung ankommt (WCAG 1.4.1 "Use of Color"). Kontrast gegen den
   dunklen Panel-Grund gemessen: #fca5a5 auf #14141f = 9,62:1, also weit ueber AA
   (4,5:1) — und auf einer Hoehe mit der Erfolgsmeldung (#34d399, 9,5:1). */
.fab-error-msg {
  display: none;
  text-align: center;
  color: #fca5a5;
  font-size: 0.9rem;
  line-height: 1.4;
  padding: 12px 10px;
  margin-top: 10px;
  border: 1px solid rgba(248, 113, 113, 0.38);
  border-radius: 8px;
  background: rgba(248, 113, 113, 0.10);
}

/* ═══════════════════════════════════════
   FEEDBACK PANEL
   ═══════════════════════════════════════ */
.fab-fb-stars {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.fab-fb-star {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  opacity: 0.3;
  transition: opacity 0.15s, transform 0.15s;
  padding: 0;
}
.fab-fb-star:hover { transform: scale(1.15); }
.fab-fb-star.active { opacity: 1; }

/* ═══════════════════════════════════════
   RESEARCH PANEL
   ═══════════════════════════════════════ */
.fab-rs-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.fab-rs-cat {
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary, #94a3b8);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.fab-rs-cat:hover { border-color: var(--primary, #6366f1); color: var(--primary, #6366f1); }
.fab-rs-cat.active {
  background: var(--primary, #6366f1);
  border-color: var(--primary, #6366f1);
  color: #fff;
}

/* ═══════════════════════════════════════
   STYLE PRESET DRAWER
   ═══════════════════════════════════════ */
.fab-style-panel {
  position: fixed;
  top: 84px;
  right: auto;
  bottom: 24px;
  left: 24px;
  width: min(430px, calc(100vw - 48px));
  max-height: calc(100vh - 108px);
  overflow: hidden;
}
.fab-style-panel.open {
  display: flex;
  flex-direction: column;
}
.fab-style-header {
  align-items: flex-start;
}
.fab-style-header > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.fab-style-subtitle {
  color: var(--text-secondary, #94a3b8);
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fab-style-body {
  min-height: 0;
  overflow: auto;
}
/* MAKE-OVER 19.08.2026 (Owner: "diese style popup … ist stylisch noch mega kake, da muss
   ein komplett make over"). Vorher: eine EINSPALTIGE Liste 82px hoher Karten. Mit den 24
   Designs der Paket-theme.js sind das ~2 200px Rollweg, um das letzte Design zu sehen —
   der Umschalter darunter war praktisch unerreichbar. Jetzt zwei Spalten mit kompakteren
   Karten: dieselbe Auswahl auf gut einem Drittel der Hoehe. */
.fab-style-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
/* Der Leerzustand — der Wirt bringt keine Vorlagen mit. Bewusst KEIN Fehler-Rot:
   "hier gibt es nichts zu waehlen" ist eine Auskunft, keine Stoerung. */
.fab-style-empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 26px 16px;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  text-align: center;
}
.fab-style-empty-icon {
  font-size: 1.7rem;
  line-height: 1;
  opacity: 0.85;
}
.fab-style-empty-title {
  margin: 0;
  color: var(--text-primary, #f1f5f9);
  font-size: 0.88rem;
  font-weight: 700;
}
.fab-style-empty-text {
  margin: 0;
  max-width: 34ch;
  color: var(--text-secondary, #94a3b8);
  font-size: 0.78rem;
  line-height: 1.45;
}
.fab-setting-group {
  display: grid;
  gap: 9px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.fab-setting-title {
  color: var(--text-primary, #f1f5f9);
  font-size: 0.8rem;
  font-weight: 800;
}
.fab-segmented,
.fab-position-grid {
  display: grid;
  gap: 6px;
}
.fab-segmented {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.fab-position-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.fab-segment-btn,
.fab-position-btn {
  min-width: 0;
  min-height: 34px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary, #94a3b8);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.fab-segment-btn:hover,
.fab-position-btn:hover,
.fab-segment-btn.is-active,
.fab-position-btn.is-active {
  border-color: color-mix(in srgb, var(--primary, #6366f1) 56%, transparent);
  background: color-mix(in srgb, var(--primary, #6366f1) 18%, transparent);
  color: var(--text-primary, #f1f5f9);
}
/* ── Die zweite Achse: Dunkel/Hell, direkt unter den Designs ──
   Bewusst dieselbe Optik wie .fab-segment-btn (Position/Segment-Schalter weiter oben),
   damit im Popup EIN Umschalter-Idiom gilt und nicht zwei. Die Zeile klebt unten, weil
   die Design-Liste darueber scrollt — sonst muesste man 24 Designs durchscrollen, um den
   Modus zu wechseln. */
.fab-style-mode {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--bg-card, #14141f);
}
.fab-style-mode-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary, #94a3b8);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
}
.fab-style-mode-btn:hover,
.fab-style-mode-btn:focus-visible,
.fab-style-mode-btn.is-active {
  border-color: color-mix(in srgb, var(--primary, #6366f1) 56%, transparent);
  background: color-mix(in srgb, var(--primary, #6366f1) 18%, transparent);
  color: var(--text-primary, #f1f5f9);
}
/* Die Karte steht jetzt HOCHKANT: Vorschau oben, Text darunter. Das ist der Grund, warum
   zwei Spalten passen — nebeneinander waeren 74px Vorschau + Text pro Zeile zu breit. */
.fab-style-option {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 9px;
  width: 100%;
  padding: 9px;
  border: 1px solid var(--option-border, rgba(255,255,255,0.1));
  border-radius: 13px;
  color: var(--option-text, var(--text-primary, #f1f5f9));
  /* ZWEI Schichten, nicht eine. Sieben der 24 Designs fuehren eine DURCHSICHTIGE Flaeche
     (next-edition-2: rgba(20,26,40,0.62), glass-future, aurora-console …). Einschichtig
     lag deren Karte direkt auf dem Panelgrund — im hellen Modus schien Weiss durch, die
     dunkle Karte wurde blassgrau und ihr heller Text darauf unlesbar (im Browser-Schuss
     vom 19.08.2026 gemessen: "Next Edition 2.0" hellgrau auf hellgrau). Der undurchsichtige
     Grundton des Designs liegt deshalb DARUNTER: die Karte zeigt dann in beiden Modi
     dieselben Farben — naemlich die des Designs, das sie ankuendigt. */
  background:
    linear-gradient(var(--option-surface, var(--bg-card, #14141f)),
                    var(--option-surface, var(--bg-card, #14141f))),
    var(--option-bg, var(--bg-card, #14141f));
  box-shadow: 0 10px 28px color-mix(in srgb, var(--option-text, #000) 10%, transparent);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color 0.15s, outline-color 0.15s, transform 0.15s;
}
.fab-style-option:hover,
.fab-style-option:focus-visible,
.fab-style-option.is-active {
  outline: 3px solid color-mix(in srgb, var(--option-accent, var(--primary, #6366f1)) 38%, transparent);
  outline-offset: 2px;
  transform: translateY(-1px);
}
.fab-style-option.is-active {
  border-color: var(--option-accent, var(--primary, #6366f1));
}
/* Die Vorschau ist eine MINIATUR DER SEITE, nicht mehr ein Farbverlauf: Grundflaeche,
   Akzentbalken (Kopfzeile), eine Karte darauf, zwei Textzeilen im Textton. Alles aus den
   Tokens DIESES Designs — man sieht also, was man bekommt, bevor man klickt. */
.fab-style-preview {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 66px;
  padding: 8px;
  border: 1px solid var(--option-border, rgba(255,255,255,0.1));
  border-radius: 10px;
  background: linear-gradient(160deg,
    var(--option-bg, #0a0a12) 0%,
    var(--option-bg-2, var(--option-bg, #0a0a12)) 100%);
}
.fab-style-preview-bar {
  display: block;
  width: 46%;
  height: 6px;
  margin-bottom: 8px;
  border-radius: 999px;
  /* Der zweite Ton kommt aus dem Akzent selbst — kein zusaetzliches Vorlage-Merkmal,
     das ein vertragstreuer Wirt gar nicht liefern muesste (siehe fab.js, createStyleOption). */
  background: linear-gradient(90deg,
    var(--option-accent, #6366f1),
    color-mix(in srgb, var(--option-accent, #6366f1) 55%, var(--option-text, #f1f5f9)));
}
.fab-style-preview-card {
  display: block;
  padding: 7px 8px;
  border: 1px solid var(--option-border, rgba(255,255,255,0.12));
  border-radius: 7px;
  background: var(--option-surface-2, var(--option-surface, #1f2937));
}
.fab-style-preview-line {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: var(--option-text, #f1f5f9);
  opacity: 0.72;
}
.fab-style-preview-line + .fab-style-preview-line {
  margin-top: 5px;
}
.fab-style-preview-line.is-short {
  width: 58%;
  background: var(--option-muted, #94a3b8);
  opacity: 0.85;
}
/* Der aktive Stil traegt ein HAEKCHEN, nicht nur einen farbigen Rand — sonst waere die
   Auswahl allein ueber Farbe erkennbar (WCAG 1.4.1 "Use of Color"). */
.fab-style-check {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--option-accent, var(--primary, #6366f1));
  color: var(--option-bg, #0a0a12);
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1;
}
.fab-style-copy {
  display: block;
  min-width: 0;
  align-self: start;
}
.fab-style-copy strong,
.fab-style-copy span {
  display: block;
}
.fab-style-copy strong {
  font-size: 0.86rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Die Unterzeile der 24 Designs ist bis zu 60 Zeichen lang ("monochrom hologlass, ruhig,
   edel, premium-zukunft"). Zwei Zeilen, dann abgeschnitten — sonst waeren die Karten in
   der Rasterzeile unterschiedlich hoch und das Raster franst aus. */
.fab-style-copy span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin-top: 4px;
  color: var(--option-muted, var(--text-secondary, #94a3b8));
  font-size: 0.72rem;
  line-height: 1.35;
}

/* ═══════════════════════════════════════════════════════════════
   TUTORIAL OVERLAY – Full-screen immersive panel
   ═══════════════════════════════════════════════════════════════ */
/* BEFUND B15: hier stand `z-index: 99999` — vier Groessenordnungen UNTER der Leiste
   (.fab-container: 2147482400). Das Vollbild-Tutorialfenster verdeckt die ganze Seite,
   lag aber unter dem schwebenden Knopf: ein Klick darauf oeffnete das Aktionsmenue
   ueber dem Tutorial. Der Wert liegt jetzt ueber dem Container UND ueber allem, was
   darin steckt (Aktionen 2147482420, Hinweis 2147482430). */
.fab-tut-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2147482450;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: fabTutFadeIn 0.3s ease;
}
.fab-tut-overlay.open { display: flex; align-items: center; justify-content: center; }
@keyframes fabTutFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.fab-tut-container {
  width: 92vw;
  max-width: 1100px;
  height: 88vh;
  max-height: 800px;
  background: var(--bg-card, #111118);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: fabTutSlideUp 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes fabTutSlideUp {
  from { opacity: 0; transform: translateY(30px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Header ── */
.fab-tut-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.fab-tut-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fab-tut-logo { font-size: 1.4rem; }
.fab-tut-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary, #fff);
  margin: 0;
  white-space: nowrap;
}
.fab-tut-search-wrap {
  flex: 1;
  max-width: 400px;
  position: relative;
}
.fab-tut-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85rem;
  opacity: 0.5;
  pointer-events: none;
}
.fab-tut-search {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px 9px 36px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: var(--text-primary, #fff);
  font-size: 0.88rem;
  font-family: inherit;
  transition: border-color 0.15s;
}
.fab-tut-search:focus {
  outline: none;
  border-color: var(--primary, #6366f1);
}
.fab-tut-close {
  background: none;
  border: none;
  /* U24: war 0.35 = 3,21:1 auf #14141f. 0.55 ergibt 6,13:1. */
  color: rgba(255, 255, 255, 0.55);
  font-size: 1.6rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.15s;
  margin-left: auto;
}
.fab-tut-close:hover { color: #fff; }

/* ── Category pills ── */
.fab-tut-cats {
  display: flex;
  gap: 8px;
  padding: 14px 24px;
  overflow-x: auto;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.fab-tut-cats::-webkit-scrollbar { height: 0; }
.fab-tut-cat {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  color: var(--text-secondary, #94a3b8);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}
.fab-tut-cat:hover { border-color: var(--primary, #6366f1); color: var(--primary-light, #818cf8); }
.fab-tut-cat.active {
  background: var(--primary, #6366f1);
  border-color: var(--primary, #6366f1);
  color: #fff;
}
.fab-tut-cat-count {
  font-size: 0.72rem;
  opacity: 0.65;
}

/* ── Grid wrap ── */
.fab-tut-grid-wrap {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}
.fab-tut-grid {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* ── Tutorial section (modular layout: primary first, then more) ── */
.fab-tut-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
}
.fab-tut-section-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary, #f1f5f9);
  letter-spacing: 0.2px;
}
.fab-tut-section-count {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary, #94a3b8);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  padding: 1px 9px;
}
.fab-tut-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}

/* ── Tutorial card ── */
.fab-tut-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.fab-tut-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  border-color: var(--primary, #6366f1);
}
.fab-tut-thumb-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0a0a12;
}
.fab-tut-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}
.fab-tut-card:hover .fab-tut-thumb { transform: scale(1.05); }
.fab-tut-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.fab-tut-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  max-width: calc(100% - 16px);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #fff;
  background: rgba(0, 0, 0, 0.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 1;
}
.fab-tut-badge-hub { background: rgba(99, 102, 241, 0.85); }
.fab-tut-badge-app { background: rgba(16, 185, 129, 0.82); }
.fab-tut-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  font-size: 2.5rem;
  opacity: 0;
  transition: opacity 0.2s;
}
.fab-tut-card:hover .fab-tut-play-overlay { opacity: 1; }
.fab-tut-card-body { padding: 12px 14px; }
.fab-tut-card-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary, #f1f5f9);
  margin: 0 0 6px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fab-tut-card-cat {
  font-size: 0.72rem;
  color: var(--primary-light, #818cf8);
  font-weight: 500;
}

/* ── Empty state ── */
.fab-tut-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--text-secondary, #94a3b8);
}
.fab-tut-empty-icon { font-size: 3rem; margin-bottom: 12px; }
.fab-tut-empty p { margin: 0; font-size: 0.95rem; }

/* ── Loading state ── */
.fab-tut-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--text-secondary, #94a3b8);
}
.fab-tut-loading p { margin: 14px 0 0; font-size: 0.95rem; }
.fab-tut-spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.12);
  border-top-color: var(--primary, #6366f1);
  animation: fabTutSpin 0.8s linear infinite;
}
@keyframes fabTutSpin { to { transform: rotate(360deg); } }

/* ── Error state ── */
.fab-tut-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--text-secondary, #94a3b8);
  text-align: center;
}
.fab-tut-error-icon { font-size: 3rem; margin-bottom: 12px; }
.fab-tut-error p { margin: 0 0 16px; font-size: 0.95rem; }
.fab-tut-retry {
  padding: 9px 20px;
  border-radius: 10px;
  border: 1px solid var(--primary, #6366f1);
  background: var(--primary, #6366f1);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s, transform 0.15s;
}
.fab-tut-retry:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* ── Player view ── */
.fab-tut-player {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

/* ── Footer: 'view all tutorials' portal link ── */
.fab-tut-footer {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  padding: 14px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.fab-tut-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  border-radius: 10px;
  background: var(--primary, #6366f1);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s, transform 0.15s;
}
.fab-tut-all-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
[data-theme="light"] .fab-tut-footer { border-top-color: rgba(0, 0, 0, 0.06); }
.fab-tut-back {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary, #94a3b8);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s;
  margin-bottom: 18px;
}
.fab-tut-back:hover { border-color: var(--primary, #6366f1); color: var(--primary-light, #818cf8); }
.fab-tut-video-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  margin-bottom: 18px;
}
.fab-tut-video-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
}
.fab-tut-video-info { max-width: 760px; }
.fab-tut-video-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary, #fff);
  margin: 0 0 8px;
}
.fab-tut-video-meta {
  font-size: 0.82rem;
  color: var(--text-secondary, #94a3b8);
  margin-bottom: 12px;
}
.fab-tut-video-desc {
  font-size: 0.9rem;
  color: var(--text-secondary, #94a3b8);
  line-height: 1.6;
  margin: 0;
}

/* ── Video CTAs (YouTube + App Hub) ── */
.fab-tut-video-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.fab-tut-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}
.fab-tut-cta-yt {
  background: #ff0000;
}
.fab-tut-cta-yt:hover {
  background: #cc0000;
  transform: translateY(-1px);
}
.fab-tut-cta-hub {
  background: linear-gradient(135deg, var(--primary, #6366f1), var(--accent, #22d3ee));
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.25);
}
.fab-tut-cta-hub:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.35);
}

/* ═══════════════════════════════════════
   LIGHT THEME OVERRIDES
   ═══════════════════════════════════════ */
[data-theme="light"] .fab-action {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  color: #1e1e2e;
}
[data-theme="light"] .fab-action:hover { background: rgba(99, 102, 241, 0.08); }
[data-theme="light"] .fab-action::before {
  background: #fff;
  color: #1e1e2e;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .fab-panel {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .fab-panel-header { border-bottom-color: rgba(0, 0, 0, 0.06); }
[data-theme="light"] .fab-panel-title { color: #1e1e2e; }
/* U24, der schwerste Fall: im Hell-Modus stand das × als Hellgrau auf Weiss —
   gemessen 2,43:1, unter AA (4,5:1) UND unter der 3:1-Regel fuer Bedienelemente.
   0.55 ergibt 4,74:1. */
[data-theme="light"] .fab-panel-close { color: rgba(0, 0, 0, 0.55); }
[data-theme="light"] .fab-panel-close:hover { color: #1e1e2e; }
[data-theme="light"] .fab-input-text,
[data-theme="light"] .fab-input-textarea {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
  color: #1e1e2e;
}
[data-theme="light"] .fab-rs-cat {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: #64748b;
}
[data-theme="light"] .fab-rs-cat:hover { border-color: var(--primary, #6366f1); color: var(--primary, #6366f1); }
[data-theme="light"] .fab-rs-cat.active { background: var(--primary, #6366f1); border-color: var(--primary, #6366f1); color: #fff; }
[data-theme="light"] .fab-style-subtitle { color: #64748b; }
/* Der Leerzustand im hellen Modus: die dunklen Vorgaben (weisser Strichrand auf weissem
   Grund, #f1f5f9-Ueberschrift) waeren dort unsichtbar. Gemessene Kontraste auf dem hellen
   Panelgrund #ffffff: Ueberschrift #1e293b = 14,7:1, Text #64748b = 4,76:1 — beide ueber
   AA (4,5:1). Der gestrichelte Rand traegt keine Information, er rahmt nur. */
[data-theme="light"] .fab-style-empty {
  border-color: rgba(0, 0, 0, 0.16);
  background: rgba(0, 0, 0, 0.02);
}
[data-theme="light"] .fab-style-empty-title { color: #1e293b; }
[data-theme="light"] .fab-style-empty-text { color: #64748b; }
[data-theme="light"] .fab-style-mode {
  border-top-color: rgba(0, 0, 0, 0.1);
  background: var(--bg-card, #ffffff);
}
[data-theme="light"] .fab-style-mode-btn {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
  color: #64748b;
}
[data-theme="light"] .fab-style-mode-btn:hover,
[data-theme="light"] .fab-style-mode-btn:focus-visible,
[data-theme="light"] .fab-style-mode-btn.is-active {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.35);
  color: #1e293b;
}
[data-theme="light"] .fab-setting-group { border-bottom-color: rgba(0, 0, 0, 0.08); }
[data-theme="light"] .fab-setting-title { color: #1e293b; }
[data-theme="light"] .fab-segment-btn,
[data-theme="light"] .fab-position-btn {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
  color: #64748b;
}
[data-theme="light"] .fab-segment-btn:hover,
[data-theme="light"] .fab-position-btn:hover,
[data-theme="light"] .fab-segment-btn.is-active,
[data-theme="light"] .fab-position-btn.is-active {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.35);
  color: #4338ca;
}

/* Light – tutorials overlay */
[data-theme="light"] .fab-tut-overlay {
  background: rgba(255, 255, 255, 0.8);
}
[data-theme="light"] .fab-tut-container {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .fab-tut-header { border-bottom-color: rgba(0, 0, 0, 0.06); }
[data-theme="light"] .fab-tut-title { color: #1e1e2e; }
[data-theme="light"] .fab-tut-close { color: rgba(0, 0, 0, 0.55); }   /* U24: 2,43 -> 4,74:1 */
[data-theme="light"] .fab-tut-close:hover { color: #1e1e2e; }
[data-theme="light"] .fab-tut-search {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: #1e1e2e;
}
[data-theme="light"] .fab-tut-cats { border-bottom-color: rgba(0, 0, 0, 0.04); }
[data-theme="light"] .fab-tut-cat {
  border-color: rgba(0, 0, 0, 0.1);
  color: #64748b;
}
[data-theme="light"] .fab-tut-cat:hover { border-color: var(--primary, #6366f1); color: var(--primary, #6366f1); }
[data-theme="light"] .fab-tut-cat.active { background: var(--primary, #6366f1); border-color: var(--primary, #6366f1); color: #fff; }
[data-theme="light"] .fab-tut-card {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .fab-tut-card:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
  border-color: var(--primary, #6366f1);
}
[data-theme="light"] .fab-tut-card-title { color: #1e1e2e; }
[data-theme="light"] .fab-tut-section-title { color: #1e1e2e; }
[data-theme="light"] .fab-tut-section-count { color: #64748b; background: rgba(0, 0, 0, 0.05); }
[data-theme="light"] .fab-tut-back {
  border-color: rgba(0, 0, 0, 0.1);
  color: #64748b;
}
[data-theme="light"] .fab-tut-back:hover { border-color: var(--primary, #6366f1); color: var(--primary, #6366f1); }
[data-theme="light"] .fab-tut-video-title { color: #1e1e2e; }
[data-theme="light"] .fab-tut-thumb-wrap { background: #eee; }

/* ═══════════════════════════════════════
   USER MENU TOGGLE
   ═══════════════════════════════════════ */
.fab-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.15s;
  font-size: 0.88rem;
  color: var(--text-secondary, #94a3b8);
  gap: 8px;
}
.fab-toggle-row:hover { background: rgba(99, 102, 241, 0.06); }
.fab-toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fab-toggle-switch {
  position: relative;
  width: 36px;
  height: 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  transition: background 0.2s;
  flex-shrink: 0;
}
.fab-toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transition: transform 0.2s, background 0.2s;
}
.fab-toggle-switch.on { background: var(--primary, #6366f1); }
.fab-toggle-switch.on::after { transform: translateX(16px); background: #fff; }
[data-theme="light"] .fab-toggle-switch { background: rgba(0, 0, 0, 0.1); }
[data-theme="light"] .fab-toggle-switch::after { background: rgba(0, 0, 0, 0.3); }
[data-theme="light"] .fab-toggle-switch.on { background: var(--primary, #6366f1); }
[data-theme="light"] .fab-toggle-switch.on::after { background: #fff; }

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */
@media (max-width: 640px) {
  .fab-panel { width: calc(100vw - 48px); right: -12px; }
  .fab-container.fab-pos-bottom-left .fab-panel,
  .fab-container.fab-pos-top-left .fab-panel { left: -12px; right: auto; }
  .fab-container.fab-pos-top-right .fab-panel,
  .fab-container.fab-pos-top-left .fab-panel { top: 64px; bottom: auto; }
  .fab-style-panel { top: auto; left: 12px; right: 12px; bottom: 148px; width: auto; max-height: min(70vh, 620px); }
  .fab-container.fab-pos-top-right .fab-style-panel,
  .fab-container.fab-pos-top-left .fab-style-panel { top: 148px; bottom: auto; }
  /* Auf schmalen Geraeten bleibt das Raster zweispaltig — die Karten sind hochkant und
     brauchen keine Breite mehr; eine Spalte waere hier der Rollweg von vorher. */
  .fab-style-options { gap: 8px; }
  .fab-style-option { padding: 8px; }
  .fab-style-preview { min-height: 54px; }
  .fab-tut-container { width: 97vw; height: 94vh; border-radius: 14px; }
  .fab-tut-header { padding: 14px 16px; gap: 10px; }
  .fab-tut-cats { padding: 10px 16px; }
  .fab-tut-grid-wrap { padding: 14px 16px; }
  .fab-tut-player { padding: 14px 16px; }
  .fab-tut-grid { gap: 22px; }
  .fab-tut-section-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
}

/* ═══════════════════════════════════════
   NPS PANEL
   ═══════════════════════════════════════ */
.fab-nps-panel { width: 320px; }
.fab-nps-scale {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 6px;
}
.fab-nps-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.1s;
  padding: 0;
  line-height: 26px;
  text-align: center;
}
.fab-nps-btn:hover { background: rgba(99,102,241,0.25); color: #fff; transform: scale(1.1); }
.fab-nps-btn.selected { background: rgba(99,102,241,0.2); color: #a5b4fc; }
.fab-nps-btn.active { background: #6366f1; color: #fff; border-color: #6366f1; transform: scale(1.15); }
.fab-nps-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  /* U24: war 0.35 = 3,21:1. 0.55 ergibt 6,13:1. */
  color: rgba(255,255,255,0.55);
  margin-bottom: 12px;
}
.fab-nps-actions { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.fab-nps-skip {
  background: none;
  border: none;
  /* U24: war 0.35 = 3,21:1. 0.55 ergibt 6,13:1. */
  color: rgba(255,255,255,0.55);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.15s;
}
.fab-nps-skip:hover { color: rgba(255,255,255,0.6); }
[data-theme="light"] .fab-nps-btn {
  border-color: rgba(0,0,0,0.1);
  background: rgba(0,0,0,0.04);
  color: rgba(0,0,0,0.65);
}
[data-theme="light"] .fab-nps-btn:hover { background: rgba(99,102,241,0.12); color: #4f46e5; }
[data-theme="light"] .fab-nps-btn.active { background: #6366f1; color: #fff; }
[data-theme="light"] .fab-nps-labels { color: rgba(0,0,0,0.55); }    /* U24: 2,43 -> 4,74:1 */
[data-theme="light"] .fab-nps-skip { color: rgba(0,0,0,0.55); }      /* U24: 2,43 -> 4,74:1 */

/* ── Mobile: lift FAB above the fixed bottom tab bar (≈ 64 px) ── */
@media (max-width: 768px) {
  .fab-container {
    bottom: 80px;
  }
  .fab-container.fab-pos-bottom-right,
  .fab-container.fab-pos-bottom-left {
    bottom: 80px;
  }
  .fab-container.fab-pos-top-right,
  .fab-container.fab-pos-top-left {
    top: 80px;
    bottom: auto;
  }
}

/* ═══════════════════════════════════════
   SETTINGS PANEL
   ═══════════════════════════════════════ */
.fab-settings-panel {
  position: fixed;
  bottom: 90px;
  right: 24px;
  left: auto;
  width: min(360px, calc(100vw - 48px));
  max-height: calc(100vh - 130px);
  overflow: hidden;
}
.fab-settings-panel.open {
  display: flex;
  flex-direction: column;
}
.fab-container.fab-pos-bottom-left .fab-settings-panel,
.fab-container.fab-pos-top-left .fab-settings-panel {
  right: auto;
  left: 24px;
}
.fab-container.fab-pos-top-right .fab-settings-panel,
.fab-container.fab-pos-top-left .fab-settings-panel {
  top: 90px;
  bottom: auto;
}
.fab-settings-body {
  min-height: 0;
  overflow-y: auto;
}

/* ── Toggle switch (iOS-style) ── */
.fab-setting-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 26px;
  padding: 3px;
  border: none;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.14);
  cursor: pointer;
  transition: background 0.22s ease;
  outline-offset: 3px;
}
.fab-setting-switch::after {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
  transition: transform 0.22s ease;
}
.fab-setting-switch[aria-pressed="true"] {
  background: var(--primary, #6366f1);
}
.fab-setting-switch[aria-pressed="true"]::after {
  transform: translateX(18px);
}

/* ── Settings row (label + toggle) ── */
.fab-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
}
.fab-settings-row-label {
  color: var(--text-secondary, #94a3b8);
  font-size: 0.83rem;
  flex: 1;
  min-width: 0;
}

/* ── Settings action button ── */
.fab-action-settings {
  background: linear-gradient(135deg, #374151, #1e293b);
  color: #d1d5db;
  border-color: rgba(255, 255, 255, 0.08);
}
.fab-action-settings:hover {
  background: linear-gradient(135deg, #4b5563, #374151);
  color: #f9fafb;
}

/* ── Light theme ── */
[data-theme="light"] .fab-settings-panel {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.09);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.13);
}
[data-theme="light"] .fab-settings-row-label { color: #64748b; }
[data-theme="light"] .fab-setting-switch { background: rgba(0, 0, 0, 0.14); }
[data-theme="light"] .fab-setting-switch[aria-pressed="true"] { background: var(--primary, #6366f1); }
[data-theme="light"] .fab-action-settings {
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  color: #374151;
}

/* ── Mobile responsive ── */
@media (max-width: 500px) {
  .fab-settings-panel { left: 12px; right: 12px; width: auto; bottom: 148px; }
  .fab-container.fab-pos-top-right .fab-settings-panel,
  .fab-container.fab-pos-top-left .fab-settings-panel { top: 148px; bottom: auto; }
}

/* ── KI-Connect-Knopf (Vision §2) ──────────────────────────────────────────────
 * Der Knopf soll "mit dem Stil, den er dort hat" ueberall verfuegbar sein. Bis zum
 * 17.08.2026 trug JEDER Wirt seine eigenen ~10 Zeilen dafuer (analytics, helpdesk,
 * crafthoster_hub) — dieselbe Doppelung wie bei der Logik, nur in CSS. Ab hier liegt
 * der Grundstil EINMAL im Buendel: ein Wirt, der die Leiste einbindet, braucht nur
 * noch Markup.
 *
 * BEWUSST OHNE !important: die drei Bestandsprojekte haben eigene, staerkere Regeln
 * (helpdesk mit !important). Ihr Aussehen bleibt damit unveraendert — dieser Block
 * greift nur dort, wo bisher gar nichts stand.
 */
.ha-ki-connect-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 34px; padding: 4px 10px;
  border: 1px solid rgba(57, 213, 189, .42); border-radius: 10px;
  background: linear-gradient(135deg, rgba(57, 213, 189, .14), rgba(99, 102, 241, .13));
  font: inherit; font-weight: 700; font-size: .8rem; line-height: 1.2;
  color: inherit; cursor: pointer; white-space: nowrap;
  transition: border-color .15s ease, transform .15s ease;
}
.ha-ki-connect-btn:hover { border-color: rgba(57, 213, 189, .78); transform: translateY(-1px); }
.ha-ki-connect-btn:focus-visible { outline: 2px solid rgba(57, 213, 189, .9); outline-offset: 2px; }
.ha-ki-connect-btn.is-connected { border-color: rgba(52, 211, 153, .9); }
.ha-ki-connect-dot {
  width: 8px; height: 8px; border-radius: 999px; flex: 0 0 auto;
  background: #64748b; box-shadow: 0 0 0 4px rgba(100, 116, 139, .14);
}
.ha-ki-connect-btn.is-connected .ha-ki-connect-dot {
  background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, .16), 0 0 18px rgba(52, 211, 153, .55);
}
.ha-ki-connect-label { font-weight: 850; letter-spacing: 0; }
.ha-ki-connect-state {
  font-size: .66rem; font-weight: 900; text-transform: uppercase; letter-spacing: .02em;
  padding: 2px 7px; border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, .08); background: rgba(255, 255, 255, .42); opacity: .85;
}