/* leads.messenger.studio — Stylesheet

   **Die Abschnitte bis „Eigene Bausteine" sind wörtlich aus
   rcs-hikel-app/public/styles.css übernommen** (Stand 13.09.2026), damit
   beide Anwendungen gleich aussehen: dieselben Optimizely-Axiom-Token,
   dieselbe Seitenleiste, Karten, DataTable, Badges, Dialog und Toasts.
   Wer dort etwas ändert, zieht es hier nach. Darunter stehen nur Bausteine,
   die es in rcs nicht gibt — ausschließlich aus denselben Token gebaut. */

:root {
  /* Optimizely Axiom Design System, Tokens ueber den MCP-Server
     @optiaxiom/mcp 3.0.8 abgerufen (20.08.2026). Der vollstaendige Satz liegt
     in docs/axiom-tokens.json -- die Namen unten sind die dortigen Token-Namen,
     damit nachvollziehbar bleibt, woher jeder Wert stammt.

     Die Akzentfarbe ist ein kraeftiges Limettengruen und traegt IMMER dunklen
     Text (fg.default darauf: 12,9:1). Weisser Text auf dieser Flaeche waere
     unlesbar -- das ist der Grund, warum unten ueberall --text als Schriftfarbe
     auf --accent-bg steht.

     Alle Paarungen sind nachgerechnet und erreichen mindestens 4,5:1; einzige
     Ausnahme ist fg.disabled, was bei deaktivierten Elementen so gewollt und
     von WCAG ausgenommen ist. */

  --bg: #F9FCF8;              /* bg.page */
  --panel: #FFFFFF;           /* bg.default */
  --panel-2: #EFF5EB;         /* bg.secondary */
  --line: #D8E4CB;            /* border.default */
  --line-soft: #E4F0DA;       /* border.secondary */

  --text: #202320;            /* fg.default */
  --muted: #484E46;           /* fg.secondary */
  --muted-2: #616755;         /* fg.tertiary */
  --disabled: #A1AC8D;        /* fg.disabled */

  --accent: #226B1E;          /* fg.link.default -- Akzent als SCHRIFT */
  --accent-bg: #ABFF44;       /* bg.accent -- Akzent als FLAECHE, dunkler Text */
  /* Die Schrift AUF der Akzentflaeche. In Axiom ist das --text, weil das
     Limettengruen hell ist. Als eigenes Token, damit White Labeling es
     umstellen kann: eine dunkle Markenfarbe -- Magenta, Marineblau -- braucht
     helle Schrift, und ohne diese Trennung waere jeder Knopf unlesbar.
     Der Standardwert aendert an Axiom nichts. */
  --accent-fg: var(--text);
  --accent-bg-hover: #99F141; /* bg.accent.hovered */
  --accent-subtle: #EEFFD9;   /* bg.accent.subtle */
  --pill: #D8E4CB;            /* bg.pill.default */

  --success-text: #226B1E;    /* fg.success.strong */
  /* Badge-Intents nach Axiom: subtile Flaeche plus passender Rand. */
  --bg-success-subtle: #EEFFD9;   /* bg.success.subtle */
  --border-success: #5F9B85;      /* border.success */
  --bg-warning-subtle: #FEF1C6;   /* bg.warning.subtle */
  --border-warning: #F79008;      /* border.warning */
  --bg-error-subtle: #FFDFE8;     /* bg.error.subtle */
  --bg-neutral: #F5F6F7;          /* bg.message.neutral */
  --warn-text: #B54707;       /* fg.warning.strong */
  --danger: #8F4764;          /* fg.error */
  --danger-border: #A95A77;   /* border.error */
  --info: #036988;            /* fg.information.strong */
  --focus: #197A94;           /* border.focus */

  /* Breite des Telefons. Die Vorschau-Box darunter nimmt dieselbe -- als
     zwei getrennte Zahlen liefen sie frueher oder spaeter auseinander. */
  --telefon-breite: 340px;

  /* Abstand zwischen Bloecken einer Seite -- senkrecht zwischen Karten und
     waagrecht zwischen Kacheln. **Ein Wert fuer alles**: gemessen standen auf
     denselben Seiten 0, 12, 14, 16, 20 und 32 px nebeneinander, weil jeder
     Baustein seinen eigenen Rand mitbrachte. 16 px ist Axioms size.2xs. */
  --abstand-block: 16px;
  /* Abstand innerhalb einer Karte: Ueberschrift, Hinweis, Inhalt. Eine Stufe
     kleiner als zwischen den Bloecken -- was zusammengehoert, steht enger. */
  --abstand-innen: 12px;

  /* borderRadius */
  --radius-sm: 6px;
  --radius: 8px;              /* md */
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* boxShadow */
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  /* fontFamily. Die Grotesk B und Roboto Variable sind lizenzpflichtig und
     werden hier nicht nachgeladen -- die CSP verbietet externe Quellen. Der
     Stack steht trotzdem vollstaendig da: auf Rechnern, wo die Schriften
     installiert sind, greifen sie; sonst faellt es sauber auf system-ui. */
  --font-sans: "Die Grotesk B", "DI Grotesk B", "Roboto Variable", system-ui, sans-serif;
  --font-mono: "Roboto Mono Variable", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  font-synthesis: none;
}

* { box-sizing: border-box; }

/* [hidden] setzt nur display:none aus dem Browser-Stylesheet -- jede eigene
   display-Regel ueberstimmt das. .layout ist ein Grid, der Editor blieb
   dadurch beim Ansichtswechsel sichtbar. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  font-size: 14px;
  line-height: 20px;
  color: var(--text);
  min-height: 100vh;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.85);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(8px);
}
.brand { display: flex; align-items: center; gap: 12px; }
.logo {
  background: var(--accent-bg);
  color: var(--accent-fg);
  font-weight: 800;
  padding: 8px 10px;
  border-radius: var(--radius);
  letter-spacing: 1px;
}
/* Traegt die Marke ein Bild statt des Kurzzeichens, ist das Kaestchen nur
   noch Rahmen: keine Flaeche, kein Innenabstand -- ein Logo bringt seinen
   eigenen mit. */
.logo-mit-bild { background: none; padding: 0; }
.logo-bild { display: block; max-height: 32px; max-width: 120px; object-fit: contain; }
.topbar h1 { font-size: 17px; margin: 0; }
.sub { margin: 0; font-size: 12px; color: var(--muted); }
.send-status { font-size: 12px; color: var(--muted); }
.send-status.on { color: var(--success-text); }
.send-status.off { color: var(--muted); }
.send-status.warn { color: var(--warn-text); }
.send-status.expired { color: var(--danger); }

/* --- Grundgeruest: Seitenleiste links, Inhalt rechts ---------------------
   Aufbau nach dem Axiom-Sidebar-Muster (NavHeader / NavBody / NavFooter).
   Das Benutzerkonto sitzt unten, wie es NavAccountItem dort vorsieht. */

.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 232px;
  flex: none;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-right: 1px solid var(--line);
  position: sticky;
  top: 0;
  height: 100vh;
  transition: width .14s ease;
}
.sidebar.collapsed { width: 64px; }
/* Nichts darf seitlich herausragen: der Umschaltknopf lag eingeklappt
   ausserhalb der Leiste, unter der Topbar-Ueberschrift -- einklappen ging,
   aufklappen nicht mehr. */
.sidebar { overflow: hidden; }
.sidebar.collapsed .nav-header {
  flex-direction: column;
  gap: 8px;
  padding: 12px 8px;
}
.sidebar.collapsed .sidebar-toggle { margin-left: 0; }
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-header-text,
.sidebar.collapsed .nav-group-trigger,
.sidebar.collapsed .konto-text { display: none; }
.sidebar.collapsed .nav-item { justify-content: center; }

.nav-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
}
.nav-header-text { display: flex; flex-direction: column; min-width: 0; }
.nav-header-text strong { font-size: 14px; }
.nav-header-text small { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-toggle {
  margin-left: auto;
  width: 22px; height: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  cursor: pointer;
  position: relative;
  flex: none;
}
.sidebar-toggle::before {
  content: "";
  position: absolute; inset: 4px auto 4px 6px;
  width: 2px;
  background: var(--muted);
}

.nav-body { flex: 1; overflow-y: auto; padding: 10px 8px; }
.nav-group-trigger {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  padding: 8px 10px 4px;
}
.nav-list, .nav-group-content { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.nav-item:hover { background: var(--panel-2); }
.nav-item.active { background: var(--accent-subtle); font-weight: 600; }
/* Icon links; es traegt die Markierung mit, damit der aktive Eintrag auch bei
   eingeklappter Leiste erkennbar bleibt. */
.nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  flex: none;
  color: var(--muted);
}
.nav-item.active .nav-icon { color: var(--accent); }
.nav-item:hover .nav-icon { color: var(--text); }
.nav-separator { border: none; border-top: 1px solid var(--line); margin: 10px 4px; }

.nav-footer { border-top: 1px solid var(--line); padding: 8px; position: relative; }
.nav-account-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.nav-account-item:hover { background: var(--panel-2); }
.konto-text { display: flex; flex-direction: column; min-width: 0; }
.konto-text strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.konto-text small { font-size: 11px; color: var(--muted); }
.avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--accent-bg);
  color: var(--accent-fg);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  flex: none;
}
.avatar.klein { width: 26px; height: 26px; font-size: 11px; }
.konto-menu {
  position: absolute;
  bottom: 100%; left: 8px; right: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 4px;
  z-index: 20;
}
.konto-menu-item {
  display: block; width: 100%;
  padding: 8px 10px;
  border: none; border-radius: var(--radius-sm);
  background: transparent; color: var(--text);
  font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.konto-menu-item:hover { background: var(--panel-2); }

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.views { padding: 18px 22px 60px; }

.topbar-actions { display: flex; align-items: center; gap: 12px; }


/* --- Verwaltungslisten --- */
.admin-liste { display: flex; flex-direction: column; gap: 8px; }
.admin-zeile {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  padding: 10px 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.admin-zeile.inaktiv { opacity: .55; }
.admin-kopf { display: flex; align-items: center; gap: 10px; min-width: 0; }
.admin-text { display: flex; flex-direction: column; min-width: 0; }
.admin-text strong { font-size: 13px; }
.admin-text small { font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
.admin-aktionen { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-aktionen .btn-ghost.danger { color: var(--danger); border-color: var(--danger-border); }
.admin-form {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 12px;
}
.admin-form h3 { margin: 0 0 12px; font-size: 13px; }

/* --- Anmeldeseite --- */
.auth-body { display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-karte {
  width: 100%; max-width: 380px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 24px;
}
.auth-marke { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.auth-marke h1 { font-size: 18px; margin: 0; }
.auth-knopf { width: 100%; margin-top: 6px; }
.auth-fehler { color: var(--danger); font-size: 13px; min-height: 18px; display: none; margin-bottom: 4px; }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.card h2 { font-size: 14px; margin: 0 0 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }

/* --- Ein- und ausklappbare Kacheln --- */
.klapp-kopf {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.klapp-kopf h2 { flex: 1; }
.klapp-kopf:hover h2 { color: var(--text); }
.klapp-pfeil {
  display: flex;
  color: var(--muted);
  transition: transform .14s ease;
  flex: none;
}
/* Zugeklappt zeigt der Pfeil nach rechts. */
.card.zu .klapp-pfeil { transform: rotate(-90deg); }
.card.zu .card-body { display: none; }
.card.zu { margin-bottom: 10px; }
.klapp-zaehler {
  background: var(--pill);
  color: var(--text);
  border-radius: var(--radius-full);
  padding: 1px 8px;
  font-size: 10px;
  font-weight: 600;
  flex: none;
}
/* Ohne Ereignisse bliebe sonst eine leere Pille stehen. */
.klapp-zaehler:empty { display: none; }
/* Der Zaehler sagt, was im zugeklappten Block steckt. Offen sieht man es
   ohnehin -- dann waere er nur Doppelung. */
.card:not(.zu) .klapp-zaehler { display: none; }
.card-head-zweit { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.card-head h2 { margin: 0; }
.hint { font-size: 12px; color: var(--muted); margin: 4px 0 12px; }

label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .grid2 { grid-template-columns: 1fr; } }

/* Eingabefelder nach Axiom `InputRoot`: die Flaeche ist bg.default, NICHT
   bg.secondary. Bis zum 04.09.2026 stand hier --panel-2; das war ein
   gueltiges Token an der falschen Stelle -- im kompilierten InputRoot.css von
   @optiaxiom/react steht `background-color: var(--ax-colors-bg-default)`.
   Nachgezogen, damit rcs und lesedauer gleich UND richtig sind. */
input, textarea, select {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: var(--radius);
  padding: 9px 11px;
  font-size: 14px;
  font-family: inherit;
  width: 100%;
  /* size.lg = 2.5rem. 35px entsprach keinem Axiom-Token. */
  min-height: 40px;
}
/* Fokusring in border.focus -- deutlich sichtbar gegen Limette und Weiss. */
input:focus, textarea:focus, select:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent; }
textarea { resize: vertical; min-height: 76px; }
.counter { font-size: 11px; color: var(--muted); text-align: right; }
.counter.over { color: var(--danger); }

.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tab {
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
}
.tab.active { background: var(--accent-bg); color: var(--accent-fg); border-color: var(--accent-bg); font-weight: 600; }

.btn, .btn-ghost, .btn-primary, .otab {
  cursor: pointer;
  font-family: inherit;
  border-radius: var(--radius);
  /* fontSize.md wie im Nachbarprojekt. Axiom schreibt am ButtonRoot keine
     Schriftgroesse fest -- das hier ist Angleichung, kein Regelverstoss. */
  font-size: 14px;
}
.btn { background: var(--panel-2); border: 1px solid var(--line); color: var(--text); padding: 9px 14px; min-height: 40px; }
.btn:hover { border-color: var(--accent); color: var(--accent); }
/* bg.accent traegt dunklen Text -- weiss waere darauf unlesbar (1,2:1). */
.btn-primary { background: var(--accent-bg); border: 1px solid var(--accent-bg); color: var(--accent-fg); padding: 9px 16px; min-height: 40px; }
.btn-primary:hover:not(:disabled) { background: var(--accent-bg-hover); border-color: var(--accent-bg-hover); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.btn-ghost { background: transparent; border: 1px dashed var(--line); color: var(--muted); padding: 6px 10px; }
.btn-ghost:hover { color: var(--accent); border-color: var(--accent); }
.del { background: transparent; border: none; color: var(--danger); cursor: pointer; font-size: 18px; line-height: 1; }

/* --- Vorlagen ------------------------------------------------------------
   Uebersicht als Raster nach dem Axiom-Muster: Grid mit gleich breiten
   Spalten, darin Karten mit Preview, Kopf und Fuss. */

.uebersicht-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.uebersicht-titel { margin: 0 0 2px; font-size: 18px; }
.uebersicht-kopf .hint { margin: 0; }

.tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

/* --- Karte nach der Axiom-Anatomie ---------------------------------------
   Card > CardPreview (mit Addon-Ecken) > CardHeader (Titel als CardLink,
   Aktionen als addonAfter) > CardFooter (Nebeninformation).
   Der Footer traegt bewusst KEINE Aktionen -- die stehen im Header. */
.ax-card {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .14s ease, border-color .14s ease;
}
.ax-card:hover { box-shadow: var(--shadow-md); border-color: var(--accent); }
.ax-card:focus-within { border-color: var(--focus); }

/* Das Beschneiden sitzt hier, nicht an der Karte: mit `overflow: hidden` auf
   der Karte wuerde das Aktionsmenue im Header abgeschnitten. */
.ax-card-preview {
  position: relative;
  height: 132px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ax-card-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.ax-card-auszug {
  margin: 0;
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ax-card-auszug.leer { font-style: italic; opacity: .7; }

/* addonTopLeft und Geschwister aus der Anatomie. */
.ax-card-addon {
  position: absolute;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  padding: 2px 9px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text);
}
.ax-card-addon.oben-links { top: 8px; left: 8px; }
.ax-card-addon.oben-rechts { top: 8px; right: 8px; }
/* Der Kanal steht mit Zeichen und Namen da -- Farbe allein ist keine Auskunft
   fuer den, der sie nicht unterscheiden kann. */
.ax-card-addon.oben-rechts { display: inline-flex; align-items: center; gap: 4px; }

/* --- Rundnachricht: was der Versand bedeutet, vor dem Klick -------------- */
.rund-vorschau {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  font-size: 12px;
  color: var(--muted);
}
.rund-vorschau p { margin: 0 0 4px; }
.rund-vorschau p:last-child { margin-bottom: 0; }
.rund-warnung { color: var(--danger); font-weight: 600; }

.ax-card-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 12px 8px;
  flex: 1;
}
.ax-card-header-text { min-width: 0; flex: 1; }
.ax-card-header h3 { margin: 0; font-size: 14px; font-weight: 600; }
/* CardLink: der Titel macht die Karte anklickbar. */
.ax-card-link {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.ax-card-link:hover { color: var(--accent); text-decoration: underline; }
.ax-card-desc { margin: 3px 0 0; font-size: 11px; color: var(--muted); }

.ax-card-footer {
  padding: 8px 12px 10px;
  border-top: 1px solid var(--line);
  border-radius: 0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px);
  font-size: 11px;
  color: var(--muted);
  display: flex;
  gap: 10px;
}

/* --- Aktionsmenü (addonAfter) --- */
.ax-menue { position: relative; flex: none; }
.ax-menue-knopf {
  border: 1px solid transparent;
  background: none;
  color: var(--muted);
  border-radius: var(--radius-sm);
  padding: 0 7px;
  font-size: 16px;
  line-height: 22px;
  cursor: pointer;
}
.ax-menue-knopf:hover { border-color: var(--line); background: var(--panel-2); color: var(--text); }
.ax-menue-liste {
  position: absolute;
  right: 0;
  top: 26px;
  z-index: 30;
  min-width: 160px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 4px;
  display: flex;
  flex-direction: column;
}
.ax-menue-liste[hidden] { display: none; }
.ax-menue-eintrag {
  border: none;
  background: none;
  text-align: left;
  font: inherit;
  font-size: 13px;
  padding: 6px 9px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text);
}
.ax-menue-eintrag:hover { background: var(--accent-subtle); }
.ax-menue-eintrag.danger { color: var(--danger); }

/* --- DataTable -----------------------------------------------------------
   Anatomie: DataTable > DataTableBody (Zeilen, Zellen, DataTableAction) >
   DataTableFooter. Kopfzeile klebt, Zeilen gleich hoch, Aktionen erscheinen
   beim Ueberfahren. */
.ax-table {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
}
/* Nicht die Tabelle beschneiden -- sonst faellt das Aktionsmenue der letzten
   Zeile heraus. Die Rundung tragen Kopf und letzte Zeile selbst. */
.ax-table-head { border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0; }
.ax-tr:last-child { border-radius: 0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px); }
.ax-table-head,
.ax-tr {
  display: grid;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
}
.ax-table-head {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 38px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
}
.ax-th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--muted);
}
.ax-tr {
  min-height: 46px;
  border-bottom: 1px solid var(--line);
}
.ax-tr:last-child { border-bottom: none; }
.ax-tr:hover { background: var(--panel-2); }
.ax-tr.gedimmt { opacity: .55; }
.ax-td { font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.ax-td-stark { font-weight: 600; }
/* Axiom schreibt `end`, nicht `right` -- und laesst im DataTable-Beispiel
   selbst die Betragsspalte am Anfang stehen. `end` geht ausserdem mit der
   Schreibrichtung mit. Nachgezogen am 04.09.2026, wie Feld und Knopf. */
.ax-th.rechts, .ax-td.rechts { text-align: end; }

/* DataTableAction: in jeder Zeile ein Menue, immer sichtbar. Es war frueher
   bis zum Ueberfahren unsichtbar -- bei einer Knopfreihe eine gute Idee, bei
   einem einzelnen Punkte-Knopf aber nur eine versteckte Funktion. Ruhig
   bleibt die Tabelle jetzt durch die gedaempfte Farbe. */
.ax-actions {
  display: flex;
  /* Axioms Props kennen start | end | center | stretch -- kein flex-end. */
  justify-content: end;
}
.ax-actions .ax-menue-knopf { color: var(--muted); }
.ax-tr:hover .ax-actions .ax-menue-knopf,
.ax-actions .ax-menue-knopf:hover,
.ax-actions .ax-menue-knopf[aria-expanded="true"] { color: var(--text); }

.ax-table-leer { padding: 20px 14px; font-size: 13px; color: var(--muted); text-align: center; }
.ax-table-foot {
  padding: 8px 14px;
  border-top: 1px solid var(--line);
  background: var(--panel-2);
  font-size: 11px;
  color: var(--muted);
}

/* Badge nach Axiom: Variante `subtle`, Intents neutral/information/
   success/warning/danger. Ohne Intent ist es neutral. */
.ax-marke {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  padding: 1px 9px;
  font-size: 11px;
  background: var(--bg-neutral);
  color: var(--text);
}
.ax-marke.success { background: var(--bg-success-subtle); border-color: var(--border-success); color: var(--success-text); }
.ax-marke.warning { background: var(--bg-warning-subtle); border-color: var(--border-warning); color: var(--warn-text); }
.ax-marke.danger  { background: var(--bg-error-subtle); border-color: var(--danger-border); color: var(--danger); }
.ax-marke.information { background: #E2F5F5; border-color: var(--info); color: var(--info); }

/* Auf schmalen Schirmen wird die Tabelle waagerecht scrollbar, statt die
   Spalten zu zerquetschen. */
@media (max-width: 720px) {
  .ax-table { overflow-x: auto; }
  .ax-table-head, .ax-tr { min-width: 640px; }
  .ax-actions { opacity: 1; }
}

.tpl-leer {
  grid-column: 1 / -1;
  padding: 40px 20px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
}
.tpl-leer p { margin: 0 0 6px; font-size: 14px; }
.tpl-leer .hint { margin: 0; }

/* Hinweis neben dem Speichern-Knopf: welche Vorlage gerade offen ist. */
.vorlage-hinweis {
  font-size: 11px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.vorlage-hinweis.aktiv { color: var(--text); font-weight: 600; }
.actions .btn:disabled { opacity: .5; cursor: not-allowed; }
.tpl-status { font-size: 12px; min-height: 16px; color: var(--muted); }
.tpl-status.ok { color: var(--success-text); }
.tpl-status.err { color: var(--danger); }


/* --- Topbar: Vorlagenkontext und Speichern --- */
.topbar-editor { display: flex; align-items: center; gap: 10px; }
/* In der Topbar darf die Statuszeile keinen Platz reservieren, sonst
   springt die Zeile, sobald eine Meldung kommt und wieder geht. */
.topbar-actions .tpl-status { min-height: 0; }

/* --- Dialog --- */
.modal {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  color: var(--text);
  padding: 0;
  width: min(420px, calc(100vw - 32px));
  box-shadow: var(--shadow-lg);
}
.modal::backdrop { background: rgba(15, 23, 42, .38); }
.modal-inhalt { padding: 20px; }
.modal-inhalt h2 { margin: 0 0 4px; font-size: 15px; }
.modal-inhalt .hint { margin-top: 0; }
.modal-aktionen { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }


/* Zahl am Navigationspunkt. */
.nav-badge {
  margin-left: auto;
  background: var(--accent-bg);
  color: var(--accent-fg);
  border-radius: var(--radius-full);
  padding: 0 6px;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
}
.sidebar.collapsed .nav-badge { display: none; }

/* --- Anmeldeseite: Erfolgsmeldung und Nebenwege --- */
.auth-erfolg {
  display: none;
  margin: 8px 0 0;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  background: var(--accent-subtle);
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
}
.auth-fuss { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; }
.auth-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 12px;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
}
.auth-link:hover { color: var(--text); }

.hint.warnung { color: var(--warn-text); }


/* Ankreuzfeld in den Verwaltungsformularen. */
label.kasten { flex-direction: row; align-items: center; gap: 8px; }
label.kasten input { width: auto; margin: 0; }

/* Der API-Call braucht mehr Breite als ein Formulardialog. */
.modal.modal-breit { width: min(680px, calc(100vw - 32px)); }
.modal-breit .output { max-height: 260px; margin: 10px 0; }

/* --- Dashboard ----------------------------------------------------------- */
.dashboard { padding: 18px 22px 60px; max-width: 1200px; display: flex; flex-direction: column; gap: var(--abstand-block); }

/* Seiten aus Bloecken -- Kopf, Kacheln, Karten -- stapeln mit genau einem
   Abstand. **Der Abstand gehoert dem Stapel, nicht den Bloecken.** Solange
   jede Karte ihren eigenen Rand unten mitbrachte, klebten Kacheln ohne Rand
   an der naechsten Karte, und in einem Raster addierten sich Rand und Luecke
   zu 32 px. */
.stapel { display: flex; flex-direction: column; gap: var(--abstand-block); }
.stapel > *, .dashboard > * { margin-top: 0; margin-bottom: 0; }

/* Dasselbe eine Ebene tiefer: in den Karten dieser Seiten traegt der Stapel
   den Abstand, nicht die Raender. Ein `.hint` bringt 4 px oben und 12 px
   unten mit -- in normalem Fluss fallen die mit der Ueberschrift zusammen,
   in einem Flex-Container addieren sie sich. Gemessen stand der Leertext
   „Gerade wartet kein Gespraech" deshalb 21 px unter dem Hinweis und 31 px
   ueber dem Kartenrand. */
.stapel .card, .dashboard .card { display: flex; flex-direction: column; gap: var(--abstand-innen); padding: var(--abstand-block); }
.stapel .card > *, .dashboard .card > * { margin-top: 0; margin-bottom: 0; }
.stat-balken > .hint { margin: 0; }

/* Betriebsbereitschaft ganz oben: was den Versand verhindert, sieht man zuerst. */
.dash-betrieb { display: flex; flex-direction: column; gap: var(--abstand-block); }
.dash-ok {
  padding: 10px 14px;
  border: 1px solid var(--border-success);
  background: var(--bg-success-subtle);
  color: var(--success-text);
  border-radius: var(--radius);
  font-size: 13px;
}
.dash-warnung {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  border: 1px solid var(--line);
  background: var(--bg-neutral);
}
.dash-warnung.fehler { border-color: var(--danger-border); background: var(--bg-error-subtle); color: var(--danger); }
.dash-warnung.warnung { border-color: var(--border-warning); background: var(--bg-warning-subtle); color: var(--warn-text); }
.dash-warnung .btn-ghost { flex: none; }

/* --- KPI-Kacheln --- */
.dash-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--abstand-block); }
.dash-kachel {
  display: flex;
  flex-direction: column;
  /* Mit der knapperen Zeilenhoehe sind 2 px sichtbar nur noch 1 px zwischen
     Titel und Zahl -- 4 px halten die drei Zeilen lesbar zusammen. */
  gap: 4px;
  /* Derselbe Innenabstand wie die Karten daneben -- vorher 14 gegen 16. */
  padding: var(--abstand-block);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
/* Kleine Schrift mit der normalen Zeilenhoehe traegt oben und unten je rund
   4 px unsichtbare Luft -- bei gleichem Innenabstand wirkte die Kachel
   sichtbar lockerer gepolstert (19/20 px) als die Karte daneben (17/16). */
.dash-kachel-titel { font-size: 11px; line-height: 1.2; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.dash-kachel-wert { font-size: 26px; line-height: 1.15; font-weight: 700; }
.dash-kachel-unten { font-size: 11px; line-height: 1.2; color: var(--muted); }
.dash-trend { font-size: 11px; font-weight: 600; }
.dash-trend.hoch { color: var(--success-text); }
.dash-trend.runter { color: var(--warn-text); }


/* --- Toast ---------------------------------------------------------------
   Kurzmeldungen nach den Vorgaben des Axiom Design System (ToastProvider /
   toaster.create), hier ohne React nachgebaut. Die Intents heissen wie dort:
   neutral (Standard), information, success, warning, danger -- und die
   Farben kommen aus denselben Tokens wie die Badges.

   Unten rechts, weil die Hauptarbeit oben und links liegt: eine Meldung soll
   nichts verdecken, was man gerade bearbeitet. */
.toast-behaelter {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Der Behaelter selbst faengt keine Klicks -- sonst laege ein unsichtbares
     Feld ueber dem, was darunter steht. Die Toasts selbst schon. */
  pointer-events: none;
  max-width: min(420px, calc(100vw - 32px));
}
.toast {
  pointer-events: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md, 0 6px 24px rgba(0, 0, 0, .14));
  font-size: 13px;
  animation: toast-rein .18s ease-out;
}
/* Ohne Zeichen rutscht der Text in die erste Spalte. */
.toast:not(:has(.toast-zeichen)) { grid-template-columns: minmax(0, 1fr) auto auto; }
@keyframes toast-rein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.toast-geht { opacity: 0; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease; }
@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
  .toast-geht { transition: none; }
}

.toast-zeichen { display: inline-flex; }
.toast-text { overflow-wrap: anywhere; }
.toast-neutral { border-left-color: var(--line); }
.toast-information { border-left-color: var(--info); background: var(--bg-neutral); }
.toast-information .toast-zeichen { color: var(--info); }
.toast-success { border-left-color: var(--border-success); background: var(--bg-success-subtle); }
.toast-success .toast-zeichen { color: var(--success-text); }
.toast-warning { border-left-color: var(--border-warning); background: var(--bg-warning-subtle); }
.toast-warning .toast-zeichen { color: var(--warn-text); }
.toast-danger { border-left-color: var(--danger-border); background: var(--bg-error-subtle); }
.toast-danger .toast-zeichen { color: var(--danger); }

.toast-aktion {
  border: none;
  background: none;
  font: inherit;
  font-weight: 600;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  padding: 2px 4px;
}
.toast-zu {
  border: none;
  background: none;
  font: inherit;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
  padding: 2px 4px;
}
.toast-zu:hover { color: var(--text); }

/* --- Verlauf und neueste Konversationen --- */
.dash-unten { display: grid; grid-template-columns: minmax(320px, 1.6fr) minmax(260px, 1fr); gap: var(--abstand-block); align-items: stretch; }
/* Im Raster traegt die Luecke den Abstand; der Rand der Karte kaeme dazu.
   **Beide Karten einer Reihe gleich hoch** -- sonst stuende unter der
   kuerzeren eine Luecke, die groesser aussieht als jeder andere Abstand. */
.dash-unten > .card { margin-bottom: 0; }
@media (max-width: 900px) { .dash-unten { grid-template-columns: 1fr; } }

.dash-verlauf { display: flex; align-items: flex-end; gap: 4px; height: 120px; }
.dash-tag { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; }
.dash-saeulen { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
/* Eine Säule mit dem Wert 0 bleibt als Strich sichtbar -- sonst sähe ein
   stiller Tag wie fehlende Daten aus. */
.dash-saeule { width: 7px; min-height: 2px; border-radius: 2px 2px 0 0; }
.dash-saeule.gesendet { background: var(--accent-bg); }
.dash-saeule.empfangen { background: var(--info); }
.dash-tag-label { font-size: 9px; color: var(--muted); }

.dash-neueste { display: flex; flex-direction: column; gap: 2px; }
.dash-konv {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  font: inherit;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.dash-konv:hover { background: var(--panel-2); }
.dash-konv-nr { font-size: 12px; font-weight: 600; flex: none; }
.dash-konv-txt { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }


/* ==========================================================================
   Eigene Bausteine
   Nur was es in rcs nicht gibt. Keine eigenen Farbwerte: jede Farbe kommt aus
   den Token oben.
   ========================================================================== */

/* Jede Ansicht nennt ihre Breite -- ein Eingabefeld ueber 1100 px liest
   niemand. Der Abstand gehoert dem Stapel, nicht den Bloecken (wie .stapel). */
.view { display: flex; flex-direction: column; gap: var(--abstand-block); }
.view > * { margin-top: 0; margin-bottom: 0; }
.view.breit { max-width: 1240px; }
.view.schmal { max-width: 860px; }
.view .card { display: flex; flex-direction: column; gap: var(--abstand-innen); padding: var(--abstand-block); }
.view .card > * { margin-top: 0; margin-bottom: 0; }

.reihe { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.reihe.zwischen { justify-content: space-between; }
.reihe label { margin: 0; }
.btn.klein, .btn-primary.klein { min-height: 32px; padding: 5px 10px; font-size: 13px; }
.btn:disabled, .btn-ghost:disabled { opacity: .5; cursor: not-allowed; }
.btn:disabled:hover { border-color: var(--line); color: var(--text); }
.danger-text { color: var(--danger); }
a.btn, a.btn-primary { display: inline-flex; align-items: center; text-decoration: none; }
.topbar-actions select { min-width: 220px; }

/* --- Filterleiste der Lead-Suche --- */
.filter-leiste {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  align-items: end;
}
.filter-leiste label { margin: 0; font-size: 12px; }
.filter-leiste label.kasten { align-self: center; font-size: 13px; }
.such-zusammenfassung { font-size: 12px; color: var(--muted); }

/* --- Lead in einer Tabellenzeile: Foto, Name, Position --- */
.lead-zelle { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lead-zelle-text { display: flex; flex-direction: column; min-width: 0; }
.lead-zelle-text strong { font-size: 13px; }
.lead-zelle-text small { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foto {
  width: 32px; height: 32px; border-radius: 50%;
  object-fit: cover; flex: none;
  background: var(--panel-2); border: 1px solid var(--line);
}
.foto.gross { width: 72px; height: 72px; font-size: 22px; }
span.foto { display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--muted); }
.ax-tr.klickbar { cursor: pointer; }
.marken { display: flex; flex-wrap: wrap; gap: 4px; }

.blaettern { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* --- Gesamtansicht eines Leads --- */
.lead-kopf { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.lead-kopf-text { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 4px; }
.lead-kopf-text h2 { margin: 0; font-size: 20px; text-transform: none; letter-spacing: 0; color: var(--text); }
.lead-kopf-text p { margin: 0; color: var(--muted); }
.lead-links { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; }
.lead-links a { color: var(--accent); }
.lead-aktionen { display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: 220px; }
.reserviert-band {
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  border: 1px solid var(--line);
  background: var(--bg-neutral);
}
.reserviert-band.meine { border-color: var(--border-success); background: var(--bg-success-subtle); color: var(--success-text); }
.reserviert-band.andere { border-color: var(--border-warning); background: var(--bg-warning-subtle); color: var(--warn-text); }
.email-zeile { display: grid; grid-template-columns: minmax(0, 448px) auto; gap: 8px; align-items: end; }
.email-zeile + .hint { margin: -4px 0 0; }
.views a { color: var(--accent); }
.email-zeile label { margin: 0; }

.verlauf { display: flex; flex-direction: column; }
.verlauf-eintrag { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.verlauf-eintrag:last-child { border-bottom: none; }
.verlauf-zeit { font-size: 11px; color: var(--muted); }
.verlauf-kopf { font-size: 13px; }
.verlauf-text { margin: 4px 0 0; font-size: 12px; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 160px; overflow: auto; }
.leer { font-size: 13px; color: var(--muted); }

/* --- Anschreiben: der grosse Dialog --- */
.modal.modal-gross { width: min(920px, calc(100vw - 32px)); }
.modal-gross .modal-inhalt { display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - 64px); overflow: auto; }
.modal-gross .modal-inhalt > * { margin: 0; }
.modal-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.schreiben-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.schreiben-raster label, .modal-gross label { margin: 0; }
@media (max-width: 700px) { .schreiben-raster { grid-template-columns: 1fr; } }
.modal-gross textarea { min-height: 220px; line-height: 1.45; }
.modal-gross textarea.kurz { min-height: 120px; }
.ki-leiste {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2);
}
.ki-leiste label { margin: 0; }
.modal-fuss { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.modal-fuss .reihe { justify-content: flex-end; }

/* --- Vorlagen --- */
.chip-reihe { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  border-radius: var(--radius-full); padding: 2px 10px; font: inherit; font-size: 12px; cursor: pointer;
  font-family: var(--font-mono);
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.vorschau-text {
  margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel-2); font: inherit; font-size: 13px; line-height: 1.45;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.vorlage-raster { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--abstand-block); align-items: start; }
@media (max-width: 960px) { .vorlage-raster { grid-template-columns: 1fr; } }
.ax-card-preview.text { align-items: flex-start; justify-content: flex-start; }

/* Speichern-Leiste des Vorlagen-Editors: klebt unter der Topbar. */
.speicher-leiste {
  position: sticky; top: 64px; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 8px 0; background: var(--bg); border-bottom: 1px solid var(--line-soft);
}

/* --- Import --- */
.import-ergebnis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.btn-ghost.danger { color: var(--danger); }

/* --- Passwort kurz einblenden -------------------------------------------- */

/* Der Knopf liegt IM Feld, nicht daneben: daneben rutscht er im schmalen
   Fenster in die naechste Zeile und steht dann unter etwas, zu dem er nicht
   mehr sichtbar gehoert. */
.pw-huelle { position: relative; display: block; width: 100%; }
.pw-huelle input { width: 100%; padding-right: 40px; }
.pw-auge {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.pw-auge:hover { color: var(--text); background: var(--panel-2); }
.pw-auge:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
/* Im Formular sitzt das Feld unter seiner Beschriftung -- die Huelle darf den
   Abstand darunter nicht schlucken. */
label > .pw-huelle { margin: 0; }

.btn-ghost.danger { color: var(--danger); border-color: var(--danger-border); }

/* Der Klartext eines neuen API-Schluessels: einmal sichtbar, gut markierbar. */
.schluessel-klartext {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-neutral);
  font-size: 13px;
  word-break: break-all;
  user-select: all;
}