/* Lead-Vorqualifizierungsplattform — Design-Fundament
   Darkmode · Montserrat · Akzent als CSS-Variable (siehe docs/DESIGN.md) */

@font-face { font-family:'Montserrat'; font-weight:400; font-style:normal;
  src:url('../fonts/Montserrat-Regular.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Montserrat'; font-weight:500; font-style:normal;
  src:url('../fonts/Montserrat-Medium.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Montserrat'; font-weight:600; font-style:normal;
  src:url('../fonts/Montserrat-SemiBold.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Montserrat'; font-weight:700; font-style:normal;
  src:url('../fonts/Montserrat-Bold.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Montserrat'; font-weight:900; font-style:normal;   /* Heavy */
  src:url('../fonts/Montserrat-Black.ttf') format('truetype'); font-display:swap; }

:root {
  /* === Marken-Palette (verwendbare Farben) === */
  --c-red:    #E4003A;
  --c-purple: #8200AA;
  --c-violet: #7A54FF;
  --c-blue:   #3264FA;
  --c-cyan:   #33E3F7;

  /* === Akzent: einzige Stelle zum Ändern ===
     accent + accent-rgb immer gemeinsam setzen (rgb speist die Alpha-Varianten). */
  --accent:      var(--c-violet);
  --accent-rgb:  122, 84, 255;
  --accent-hover:#6A45EE;
  --accent-soft:    rgba(var(--accent-rgb), .14);   /* Fokus-Ring */
  --surface-accent: rgba(var(--accent-rgb), .08);   /* Cards & Felder: 8% Akzent, ohne Outline */
  --surface-accent-2: rgba(var(--accent-rgb), .04); /* tiefere/abgesetzte Flächen */

  --bg:       #0E0E12;
  --surface:  #16161D;   /* strukturell: Topbar */
  --border:   rgba(var(--accent-rgb), .15);   /* Trennlinien: 15% der Akzentfarbe */
  --text:     #FFFFFF;   /* kleine Texte & Body: weiß */
  --text-dim: #9A9AA8;   /* Subheads: grau */

  --ok:    #3FB950;
  --warn:  #E3B341;
  --error: #F85149;

  --radius: 12px;
  --font: 'Montserrat', system-ui, -apple-system, sans-serif;
  color-scheme: dark;   /* native Popups (Select-Optionen) dunkel rendern */
}

* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  background:var(--bg); color:var(--text);
  font-family:var(--font); font-weight:400; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* === Typografie-Regeln ===
   Riesige Buzzwords / sehr große Headlines: Montserrat Heavy (900)
   Headlines / große Überschriften: Bold (700), weiß
   Kleinere Subheads: SemiBold (600), grau
   Kleine Texte / Body: Regular (400), weiß */
.buzzword, .display {
  font-weight:900; color:var(--text); line-height:1.05;
  letter-spacing:-.01em; font-size:clamp(2.4rem, 6vw, 4.5rem); margin:0 0 .3em;
}
h1 { font-weight:700; color:var(--text); margin:0 0 .4em; }
h2, h3, .subhead { font-weight:600; color:var(--text-dim); margin:0 0 .4em; }
a { color:var(--accent); }

.card {
  background:var(--surface-accent); border:none;   /* 8% Akzent, ohne Outline */
  border-radius:var(--radius); padding:24px;
}
.card--deep { background:var(--surface-accent-2); }   /* abgesetzt/dunkler (4% Akzent) */

/* Status-Badges (pass/fail/unknown) — Farbe + Text, nie nur Farbe */
.badge { display:inline-block; padding:.2em .7em; border-radius:999px; font-weight:600; font-size:.85em; }
.badge--pass    { background:rgba(63,185,80,.16);  color:var(--ok); }
.badge--fail    { background:rgba(248,81,73,.16);  color:var(--error); }
.badge--unknown { background:rgba(227,179,65,.16); color:var(--warn); }
.badge--neutral { background:var(--surface-accent); color:var(--text-dim); }
.badge--always  { background:var(--surface-accent); color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }

/* Buttons */
.btn {
  font-family:var(--font); font-weight:600; font-size:.85rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  background:var(--accent); color:#fff; border:none;
  padding:1.3em 1.9em; border-radius:999px; cursor:pointer;   /* Pill, viel Padding (mehr oben/unten) */
  line-height:1; transition:background .15s ease;
}
.btn:hover { background:var(--accent-hover); }
.btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* Icon vor dem Label — einheitliche, ausgewogene Größe in allen Buttons */
.btn [class^="iconoir-"], .btn [class*=" iconoir-"] { font-size:1.05em; line-height:1; flex:0 0 auto; }

/* Form-Elemente — einheitlich, kein roher User-Agent-Look */
.input, input[type=text], input[type=email], input[type=password], select, textarea {
  font-family:var(--font); font-size:.95rem; color:var(--text);
  background:var(--surface-accent); border:none;   /* 8% Akzent, ohne Outline */
  border-radius:10px; padding:.65em .85em; width:100%;
}
.input::placeholder, input::placeholder, textarea::placeholder { color:var(--text-dim); }
.input:focus, input:focus, select:focus, textarea:focus {
  outline:none; box-shadow:0 0 0 2px var(--accent);   /* Fokus-Ring (Barrierefreiheit) */
}

/* Selects im Plattform-Look — kein User-Agent-Chevron */
select, select.input {
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-color:var(--surface-accent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239A9AA8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .9em center; background-size:1.05em;
  padding-right:2.6em; cursor:pointer;
}
select::-ms-expand { display:none; }
/* No-JS-Fallback: natives Options-Menü so dunkel wie möglich */
select option { background-color:#0E0E12; color:var(--text); }
select option:checked, select option:hover { background-color:var(--surface-accent); color:var(--text); }

/* === Custom-Select (ui.js) — voll dark, auch in Safari === */
.csel { position:relative; }
.csel-native { position:absolute; opacity:0; pointer-events:none; width:0; height:0; }  /* bleibt für Submit/No-JS */
.csel-btn {
  text-align:left; display:flex; align-items:center; justify-content:space-between; gap:.9em;
  width:100%; cursor:pointer; font-weight:400;
}
.csel-btn::after {
  content:''; flex:0 0 auto; width:1.05em; height:1.05em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239A9AA8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
  transition:transform .15s ease;
}
.csel.open .csel-btn::after { transform:rotate(180deg); }
.csel-list {
  position:absolute; z-index:60; left:0; top:calc(100% + 6px);
  min-width:100%; width:max-content; max-width:min(460px, 92vw);   /* so breit wie der längste Eintrag */
  background:#0E0E12; border:1px solid var(--border); border-radius:12px; padding:6px;
  max-height:300px; overflow:auto; display:none;
  box-shadow:0 14px 36px rgba(0,0,0,.55);
}
.csel.open .csel-list { display:block; }
.csel-opt {
  padding:.6em .8em; border-radius:8px; cursor:pointer; font-size:.95rem; color:var(--text);
  white-space:nowrap;                                              /* volle Lesbarkeit, kein Abschneiden */
}
.csel-opt:hover, .csel-opt[aria-selected="true"] { background:var(--surface-accent); }

/* ---- Layout / Control-Panel ---- */
/* Hinweise/Ergänzungen bewusst kleiner — erzeugt Hierarchie & Dynamik */
.muted { color:var(--text-dim); font-size:.72rem; line-height:1.5; }
small, .hint { font-size:.72rem; color:var(--text-dim); }

.topbar { background:var(--surface); border-bottom:1px solid var(--border); position:relative; }
.topbar-in { max-width:1240px; margin:0 auto; padding:22px 20px; display:flex; align-items:center; gap:20px; }
.brand { font-weight:700; color:var(--text); text-decoration:none;
  display:inline-flex; align-items:center; gap:.6em; text-transform:uppercase; }
.brand-logo { width:1.5em; height:1.5em; display:block; flex:0 0 auto; }
.nav { margin-left:auto; display:flex; align-items:center; gap:18px; }
.nav a { color:var(--text-dim); text-decoration:none; font-weight:500; display:inline-flex; align-items:center; gap:.4em; }
.nav a:hover { color:var(--text); }
/* eingeloggte E-Mail: klein, am rechten Seitenrand (außerhalb des Nav-Containers) */
.nav-user { position:absolute; right:18px; top:0; height:100%; display:flex; align-items:center;
  color:var(--text-dim); font-size:.7rem; pointer-events:none; }

/* Setup-Dropdown in der Nav */
.nav-group { position:relative; display:inline-flex; }
.nav-trigger { background:none; border:none; cursor:pointer; font-family:var(--font); font-size:1rem;
  font-weight:500; color:var(--text-dim); display:inline-flex; align-items:center; gap:.4em; padding:0; }
.nav-trigger:hover, .nav-group:focus-within .nav-trigger { color:var(--text); }
.nav-trigger::after { content:''; width:.85em; height:.85em; margin-left:.1em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239A9AA8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain; }
.nav-menu { position:absolute; top:calc(100% + 12px); right:0; min-width:200px;
  background:#0E0E12; border:1px solid var(--border); border-radius:12px; padding:6px; display:none;
  box-shadow:0 14px 36px rgba(0,0,0,.55); z-index:60; }
.nav-group:hover .nav-menu, .nav-group:focus-within .nav-menu { display:block; }
.nav-menu a { display:flex; align-items:center; gap:.55em; padding:.6em .75em; border-radius:8px;
  color:var(--text); text-decoration:none; font-size:.85rem; font-weight:500; }
.nav-menu a:hover { background:var(--surface-accent); color:var(--accent); }
/* Hover-Brücke, damit das Menü beim Rübergehen nicht zuklappt */
.nav-group::after { content:''; position:absolute; top:100%; left:0; right:0; height:12px; }
.nav-logout { color:var(--accent) !important; }

.container { max-width:1240px; margin:32px auto; padding:0 20px; }
.container h1 { margin-bottom:18px; }
.card + .card { margin-top:20px; }
.card h2 { font-size:1.1rem; margin-bottom:14px; }

/* Auth-Seiten */
.auth-wrap { max-width:420px; margin:10vh auto; padding:0 20px; }
.auth-card label { display:block; margin:14px 0 4px; font-weight:500; }
.auth-card .btn { width:100%; margin-top:18px; }

/* Tabelle */
.tbl { width:100%; border-collapse:collapse; }
.tbl th, .tbl td { text-align:left; padding:11px 10px; border-bottom:1px solid var(--border); vertical-align:middle; }
.tbl th { color:var(--text-dim); font-weight:600; font-size:.82em; text-transform:uppercase; letter-spacing:.03em; }
.row-actions { display:flex; gap:8px; justify-content:flex-end; }
.inline { display:inline; }

/* Formulare */
.form-inline { display:flex; gap:10px; flex-wrap:wrap; }
.form-inline .input { flex:1; min-width:240px; }
/* Abstände nach Zugehörigkeit:
   Label↔eigenes Feld eng · getrennte Felder mehr Luft · Aktion eng ans zugehörige Feld */
.stack label { display:block; font-weight:500; margin:0; max-width:520px; }
.stack label .input, .stack label select { margin-top:6px; }
.stack label + label { margin-top:26px; }   /* zwei getrennte Felder: deutlich Luft */
textarea.input { min-height:84px; resize:vertical; line-height:1.5; font-size:.9rem; }
.stack label.wide { max-width:none; }                       /* volle Breite (Prompts) */
textarea.prompt-area { font-size:.8rem; line-height:1.75; min-height:130px; }   /* kleiner + luftiger zum Lesen */
.rule-checks { display:flex; flex-direction:column; gap:12px; }
.rule-checks .cbx-row { display:flex; align-items:center; gap:10px; margin:0; max-width:none; cursor:pointer; font-weight:500; }
.actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.stack .actions { margin-top:12px; }          /* Button gehört zum Feld darüber → eng */
.subsection { margin-top:30px; padding-top:24px; border-top:1px solid var(--border); }

/* Leads-Ansichten */
.page-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
.page-head h1 { margin:0; }
.filter { min-width:240px; }
.btn--sm { padding:.55em 1em; font-size:.78rem; }
.nowrap { white-space:nowrap; }
.tbl tbody tr:hover { background:var(--surface-accent); }
/* kompakte Variante (Lead-Liste): kleinere Schrift, engere Zeilen */
.tbl--compact td { font-size:.76rem; padding:7px 10px; }
.tbl--compact th { font-size:.7rem; padding:8px 10px; }
.tbl--compact .badge { font-size:.7rem; }
.tbl--compact .btn--sm { padding:.4em .8em; font-size:.7rem; }
.tbl a { color:var(--text); text-decoration:none; border-bottom:1px solid var(--border); }
.tbl a:hover { color:var(--accent); border-color:var(--accent); }
.pager { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:16px; }

/* Eigene runde Checkbox (Akzent-Kreis + Iconoir-Check) */
.cbx { display:inline-flex; cursor:pointer; vertical-align:middle; }
.cbx input { position:absolute; opacity:0; width:0; height:0; }
.cbx-box { width:20px; height:20px; border-radius:50%; border:2px solid var(--accent);
  display:inline-flex; align-items:center; justify-content:center; transition:background .12s ease; }
.cbx-box [class^="iconoir-"] { font-size:12px; color:#fff; opacity:0; transition:opacity .12s ease; }
.cbx input:checked + .cbx-box { background:var(--accent); }
.cbx input:checked + .cbx-box [class^="iconoir-"] { opacity:1; }
.cbx input:focus-visible + .cbx-box { box-shadow:0 0 0 3px var(--accent-soft); }
.col-cbx { width:34px; }

/* Bulk-Aktionsleiste (erscheint bei Auswahl) */
.bulkbar { display:none; align-items:center; gap:16px; background:var(--surface-accent);
  border-radius:var(--radius); padding:12px 18px; margin-bottom:14px; }
.bulkbar.show { display:flex; }
.bulkbar .bulk-count { color:var(--accent); }

/* Lead-Detail */
.kv-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:14px 28px; }
.kv-k { font-size:.72rem; color:var(--text-dim); margin-bottom:3px; }
.kv-v { font-size:.95rem; }
.kv-v a { color:var(--accent); }

/* === Dashboard === */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:20px; margin-bottom:20px; }
.stat { padding:26px 26px 24px; }
.stat-num { font-weight:900; font-size:clamp(2.6rem, 5vw, 3.6rem); line-height:1; letter-spacing:-.02em; color:var(--text); }
.stat-label { margin-top:10px; font-size:.74rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; }

/* Cron/Worker als unterteilte Spalten */
.worker-cols { display:flex; flex-wrap:wrap; }
.wcol { flex:1 1 0; min-width:150px; padding:2px 24px; border-left:1px solid var(--border); }
.wcol:first-child { padding-left:0; border-left:none; }
.wcol-k { font-size:.72rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; margin-bottom:9px; }
.wcol-v { font-size:1.05rem; font-weight:600; color:var(--text); }
.wcol-v--num { font-weight:900; font-size:1.7rem; line-height:1; letter-spacing:-.01em; }
@media (max-width:640px) {
  .wcol { border-left:none; border-top:1px solid var(--border); padding:12px 0; }
  .wcol:first-child { border-top:none; padding-top:0; }
}

/* Einstiegs-Kacheln */
.tile-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.tile { display:flex; flex-direction:column; gap:8px; text-decoration:none; color:var(--text);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease; }
.tile:hover { transform:translateY(-2px); background:var(--surface-accent-2); box-shadow:inset 0 0 0 1px var(--accent); }
.tile-ic { font-size:1.7rem; color:var(--accent); line-height:1; }
.tile-t { font-weight:700; font-size:1.1rem; color:var(--text); }
.tile-d { font-size:.8rem; color:var(--text-dim); }
@media (max-width:720px) { .tile-grid { grid-template-columns:1fr; } }

/* Klickbare Tabellenzeile */
.tbl tbody tr.row-link { cursor:pointer; }
.payload { background:#0E0E12; border-radius:10px; padding:14px; overflow:auto; max-height:360px;
  font-size:.8rem; line-height:1.5; color:var(--text); white-space:pre; }

/* Flow-Diagramm (read-only) */
.fl-diagram { display:flex; flex-direction:column; gap:0; }
.fl-node { background:var(--surface-accent); border-radius:var(--radius); padding:12px 16px; position:relative; }
.fl-node--start { box-shadow:inset 0 0 0 1px var(--accent); }
.fl-node:not(:last-child) { margin-bottom:30px; }
.fl-node:not(:last-child)::after { content:''; position:absolute; left:50%; bottom:-22px; width:2px; height:16px; background:var(--border); }
.fl-node:not(:last-child)::before { content:''; position:absolute; left:calc(50% - 4px); bottom:-24px; width:10px; height:10px;
  border-right:2px solid var(--border); border-bottom:2px solid var(--border); transform:rotate(45deg); }
.fl-node-head { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.fl-node-label { font-weight:600; }
.fl-node-type { font-size:.72rem; color:var(--text-dim); }
.fl-edges { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.fl-edge { font-size:.72rem; font-weight:600; padding:.25em .7em; border-radius:999px; }
.fl-edge--pass    { background:rgba(63,185,80,.16);  color:var(--ok); }
.fl-edge--fail    { background:rgba(248,81,73,.16);  color:var(--error); }
.fl-edge--unknown { background:rgba(227,179,65,.16); color:var(--warn); }
.fl-edge--neutral { background:var(--surface-accent); color:var(--text-dim); box-shadow:inset 0 0 0 1px var(--border); }
.fl-edge--always  { background:var(--surface-accent); color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.fl-edge--term { border:1px dashed currentColor; background:transparent; }

/* Flow-Editor */
.fl-step { padding:16px 0; border-bottom:1px solid var(--border); }
.fl-step:last-of-type { border-bottom:none; }
.fl-editor { margin-top:26px; }                 /* Abstand zum Diagramm */
.fl-step { padding:16px 0; border-bottom:1px solid var(--border); background:transparent; }
.fl-step.dragging { opacity:.55; }
.fl-step-main { display:flex; align-items:center; gap:12px; }
.fl-step-label { max-width:340px; }
.fl-step-main > .btn--danger { margin-left:auto; }
/* Drag-Griff (Punkte-Raster) */
.fl-handle { flex:0 0 auto; width:14px; height:24px; cursor:grab; opacity:.55; color:var(--text-dim);
  background-image:radial-gradient(currentColor 1.3px, transparent 1.5px);
  background-size:6px 7px; background-position:center; }
.fl-handle:hover { opacity:.9; }
.fl-handle:active { cursor:grabbing; }
.fl-step-outcomes { display:flex; flex-direction:column; gap:10px; margin-top:14px; padding-left:30px; }
.fl-out { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.fl-out .badge { min-width:84px; text-align:center; }
.fl-out select { min-width:220px; }
.fl-out[data-key="always"] { margin-top:6px; padding-top:12px; border-top:1px dashed var(--border); }
.fl-out[data-key="always"] .badge { min-width:118px; }
.fl-node--orphan { outline:1px dashed var(--warn); opacity:.85; }
/* Seitenabzweigung (Detour, z. B. Selbstqualifizierung) — kehrt zum Hauptstrang zurück */
.fl-node--aside { margin-left:16%; border-left:3px solid var(--accent);
  background:rgba(var(--accent-rgb),.07); box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.35); }
.fl-diagram .fl-node--aside::after, .fl-diagram .fl-node--aside::before { display:none; }  /* keine zentrierte Spine-Pfeilspitze */
.fl-node--aside .fl-node-type { color:var(--accent); }
.fl-edge--back { background:transparent; color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); border:0; }

/* === Betriebsschalter (Prequalifier an/aus) === */
.pq-power { margin:0; display:flex; align-items:center; flex:0 0 auto; }
.pq-switch { display:inline-flex; align-items:center; gap:9px; background:none; border:0; padding:0; cursor:pointer; font:inherit; }
.pq-switch-track { width:42px; height:24px; border-radius:999px; position:relative; flex:0 0 auto; transition:background .15s ease; }
.pq-switch-knob { position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .15s ease; }
.pq-switch.is-on  .pq-switch-track { background:var(--ok); }
.pq-switch.is-off .pq-switch-track { background:var(--error); }
.pq-switch.is-on  .pq-switch-knob  { transform:translateX(18px); }
.pq-switch-label { font-size:.72rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--text-dim); }
.pq-switch.is-off .pq-switch-label { color:var(--error); }
.pq-switch:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:999px; }

/* „Aus"-Zustand: Inhalt abdunkeln, Header bleibt klar + bedienbar */
.topbar { z-index:60; }
.pq-off-overlay { position:fixed; inset:0; z-index:40; background:rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center; pointer-events:none; }
.pq-off-badge { font-weight:900; font-size:1.05rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.55em 1.6em; border-radius:999px; background:var(--error); color:#fff;
  box-shadow:0 8px 30px rgba(0,0,0,.45); }
.flash { position:relative; z-index:50; }   /* Hinweise bleiben auch im Aus-Zustand lesbar */

/* Manueller Override (Lead-Detail) */
.override-form label { display:block; font-weight:500; }
.override-form .input { margin-top:6px; width:100%; }
.override-form .override-row { display:flex; gap:18px; flex-wrap:wrap; margin-bottom:18px; }
.override-form .override-row label { flex:1 1 200px; margin:0; }
.override-form > label { margin-bottom:0; }
.override-form .actions { margin-top:18px; }

/* Timeline */
.timeline { list-style:none; margin:0; padding:0; }
.timeline li { position:relative; padding:0 0 16px 22px; }
.timeline li::before { content:''; position:absolute; left:4px; top:16px; bottom:-2px; width:2px; background:var(--border); }
.timeline li:last-child::before { display:none; }
.tl-dot { position:absolute; left:0; top:5px; width:10px; height:10px; border-radius:50%; background:var(--accent); }
.tl-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tl-time { margin-left:auto; }

/* Buttons-Varianten */
.btn--ghost  { background:var(--surface-accent); border:none; color:var(--text); }
.btn--ghost:hover  { background:var(--accent-soft); }
.btn--danger { background:transparent; border:1px solid var(--error); color:var(--error); }
.btn--danger:hover { background:rgba(248,81,73,.12); }

/* Flash */
.flash { padding:11px 14px; border-radius:10px; margin:0 0 16px; font-size:.92em; border:1px solid; }
.flash--ok    { color:var(--ok);    border-color:rgba(63,185,80,.4);  background:rgba(63,185,80,.10); }
.flash--warn  { color:var(--warn);  border-color:rgba(227,179,65,.4); background:rgba(227,179,65,.10); }
.flash--error { color:var(--error); border-color:rgba(248,81,73,.4);  background:rgba(248,81,73,.10); }

/* Setup-Link-Box */
.linkbox code { display:block; word-break:break-all; background:var(--surface-accent);
  border:none; border-radius:10px; padding:12px; color:var(--accent); font-size:.9em; }