/* ── Inter Font — SELF-HOSTED (DSGVO, PIN-58-Paket B3) ──────────────────────
   Vorher: @import von fonts.googleapis.com = IP-Übermittlung an Google bei jedem
   Seitenaufruf (Abmahnrisiko LG München 2022). Jetzt: Variable Font (wght 400–700)
   aus /static/fonts/, ein File je Subset. Lizenz: OFL (static/fonts/OFL-LICENSE).
   ✅ PIN-290: Auch die öffentlichen Marketing-/Status-/Tools-Seiten sind jetzt
   self-hosted (inline @font-face, dieselben /static/fonts/-Dateien) — kein direkter
   Google-Fonts-Abruf mehr auf öffentlichen Seiten. (Dort wght 100–900 deklariert,
   da einige Hero-H1 echtes 800 nutzen; hier bleibt 400–700, App nutzt kein 800-Hero.) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fonts/inter-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fonts/inter-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Variablen ─────────────────────────────── */
:root {
  --bg:               #0a0a0a;
  --surface:          #161616;
  --surface-2:        #1e1e1e;
  --surface-3:        #262626;
  --border:           #2a2a2a;
  --border-2:         #3a3a3a;
  --text:             #f0f0f0;
  --text-2:           #a0a0a0;
  --text-muted:       #606060;
  --green:            #2fd18a;
  /* PIN-458: Textgrün. Im Dunkelmodus identisch mit --green, im Hellmodus eine
     dunklere Stufe (siehe body.light). BEWUSST ein Literal und NICHT
     `var(--green)`: eine var()-Kette auf :root wird DORT aufgelöst und vererbt
     danach nur noch das Ergebnis — body.light überschriebe --green, nicht die
     Kette. Genau daran ist --accent schon einmal gescheitert (PIN-458-Befund). */
  --green-text:       #2fd18a;
  --green-dim:        rgba(47,209,138,.1);
  /* Paket 2 Craft: --accent war NIE definiert, wurde aber an 4 Stellen mit
     widersprüchlichen Fallbacks benutzt (#2fd18a vs. #0b7a3c). Alias auf
     --green → folgt automatisch allen Modi (light/CVD/HC via --green-Kaskade). */
  --accent:           var(--green);
  --red:              #e0655b;
  --red-dim:          rgba(224,101,91,.1);
  --yellow:           #e3a445;
  --yellow-dim:       rgba(227,164,69,.1);
  --blue:             #5ea6da;
  --blue-dim:         rgba(94,166,218,.1);
  /* PIN-198 (A2): semantische Status-Ebene (Endpunkt up/down/degraded). Zeigt per
     Default auf die Marken-Vars → Standard-Look byte-identisch. NUR die Farbenblind-
     und Hoher-Kontrast-Modi überschreiben DIESE Familie; Marke/Buttons/Focus/Stern
     (die --green/--red/--yellow direkt nutzen) bleiben unberührt. */
  /* PIN-458: LITERAL, nicht var(--green). `var()` wird hier auf :root aufgeloest
     und vererbt danach nur noch das Ergebnis — body.light ueberschrieb --green,
     nicht --st-up. Folge (im Browser gemessen): jeder "up"-Text stand im
     Hellmodus mit Dunkelmodus-Gruen auf hellem Papier, 1,75:1. */
  --st-up:            #2fd18a;
  --st-up-dim:        var(--green-dim);
  --st-up-glow:       rgba(47,209,138,.45);
  --st-down:          var(--red);
  --st-down-dim:      var(--red-dim);
  --st-down-glow:     rgba(224,101,91,.5);
  --st-degraded:      var(--yellow);
  --st-degraded-dim:  var(--yellow-dim);
  --st-degraded-glow: rgba(227,164,69,.45);
  /* PIN-198 Nachbesserung: RGB-Kanäle (Space-Syntax für rgb(R G B / a)) für die
     DEKORATIVE Karten-Tönung + den farbigen Glow — damit die GANZE Endpunkt-Status-
     Karte (nicht nur Punkt/Badge/Rand) der CVD-/HC-Palette folgt (kein Grün-Rest).
     Default = exakt die bisherigen Literale → Standard-Look byte-identisch. :root ist
     der Dark-Kontext, body.light setzt die Hell-Kanäle, CVD/HC überschreiben beide. */
  --st-up-rgb:        47 209 138;   /* Paket 2 Craft: Redesign-Grün (war Tailwind-Alt 34 197 94 — Drift zu redesign.css:44) */
  --st-down-rgb:      239 68 68;
  --st-degraded-rgb:  245 158 11;
  /* Solide Akzentlinie oben (::before) — bewusst themen-invariant wie bisher, daher
     eigene Vars (nicht --st-up/-down, die sind hell/dunkel verschieden). */
  --st-up-line:       #3ee0a0;
  --st-down-line:     #e0655b;
  --st-degraded-line: #e3a445;
  --radius:           8px;
  --radius-lg:        12px;
  --shadow:           0 1px 3px rgba(0,0,0,.6), 0 4px 16px rgba(0,0,0,.3);
  --shadow-card:      0 1px 3px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.03);
  --shadow-card-hover:0 8px 28px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.06);
  --shadow-panel:     -16px 0 48px rgba(0,0,0,.6);
}

/* ── Light Mode ────────────────────────────── */
body.light {
  --bg:               #f6f8fa;
  --surface:          #ffffff;
  --surface-2:        #f1f5f9;
  --surface-3:        #e2e8f0;
  --border:           #e2e8f0;
  --border-2:         #cbd5e1;
  --text:             #0f172a;
  --text-2:           #475569;
  --text-muted:       #94a3b8;
  --green:            #16a34a;
  --green-text:       #0a6b42;   /* PIN-458: 4,95:1 auf --bg, 6,22:1 auf --surface */
  --st-up:            #0a6b42;   /* PIN-458: stand hell auf 1,75:1 (siehe :root) */
  --green-dim:        rgba(22,163,74,.08);
  --red:              #dc2626;
  --red-dim:          rgba(220,38,38,.08);
  --yellow:           #d97706;
  --yellow-dim:       rgba(217,119,6,.08);
  --blue:             #2563eb;
  --blue-dim:         rgba(37,99,235,.08);
  /* Hell-Kanäle der Karten-Tönung (Light-Mode-Literale des Status-Karten-Blocks). */
  --st-up-rgb:        22 163 74;
  --st-down-rgb:      220 38 38;
  --st-degraded-rgb:  217 119 6;
  --shadow:           0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.05);
  --shadow-card:      0 1px 4px rgba(0,0,0,.07), 0 0 0 1px rgba(0,0,0,.04);
  --shadow-card-hover:0 6px 20px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.06);
  --shadow-panel:     -8px 0 24px rgba(0,0,0,.08);
}
body.light {
  background: linear-gradient(180deg, rgba(22,163,74,.06) 0%, transparent 300px), #f6f8fa;
}

/* ═══ PIN-198 (A2): Hoher-Kontrast-Theme + Farbenblind-Modi ═══════════════════
   Reihenfolge kritisch: erst body.contrast, DANN die CVD-Modi — bei Kombination
   HC+Farbenblind gewinnt so die CVD-Status-Palette (gleiche Spezifität → Quelltext-
   Reihenfolge). CVD-Werte sind LITERAL-Hex nach dem Single-Hex-Prinzip (erfüllen
   ≥3:1 gegen hellen UND dunklen Grund) → EIN Block je Modus deckt Hell+Dunkel ab
   und schlägt die :root-var(--green)-Indirektion. Überschreiben NUR die --st-*-
   Familie (+ bei HC die Grund-Vars); Marke/Buttons/Focus bleiben unberührt. */

/* Hoher Kontrast: dunkelbasiert (behält .dark → alle Komponenten-Styles bleiben),
   reiner Schwarz-Grund, Text/Rahmen maximal, Status-Marker weit über 3:1. Behält
   bewusst Grün/Gelb/Rot (Hoher Kontrast ≠ Farbenblind-Modus). */
body.contrast {
  --bg:               #000000;
  --surface:          #0a0a0a;
  --surface-2:        #161616;
  --surface-3:        #222222;
  --border:           #8a8a8a;
  --border-2:         #d4d4d4;
  --text:             #ffffff;
  --text-2:           #e6e6e6;
  --text-muted:       #b4b4b4;
  --st-up:            #00E676;  --st-up-dim:       rgba(0,230,118,.18);  --st-up-glow:       rgba(0,230,118,.6);
  --st-down:          #FF5252;  --st-down-dim:     rgba(255,82,82,.18);  --st-down-glow:     rgba(255,82,82,.6);
  --st-degraded:      #FFD400;  --st-degraded-dim: rgba(255,212,0,.18);  --st-degraded-glow: rgba(255,212,0,.6);
  --st-up-rgb: 0 230 118;  --st-down-rgb: 255 82 82;  --st-degraded-rgb: 255 212 0;
  --st-up-line: #00E676;   --st-down-line: #FF5252;   --st-degraded-line: #FFD400;
}

/* Rot-Grün-Modi (Protanopie/Deuteranopie): Rot-Grün-Kanal verloren → up=Blau,
   down=Rot (bleiben trennbar), degraded=tiefes Orange. Zusätzlich A1 Form+Label. */
body.cvd-protan {
  --st-up:            #0072B2;  --st-up-dim:       rgba(0,114,178,.13);  --st-up-glow:       rgba(0,114,178,.5);
  --st-down:          #D02F2F;  --st-down-dim:     rgba(208,47,47,.13);  --st-down-glow:     rgba(208,47,47,.55);
  --st-degraded:      #C77700;  --st-degraded-dim: rgba(199,119,0,.13);  --st-degraded-glow: rgba(199,119,0,.5);
  --st-up-rgb: 0 114 178;  --st-down-rgb: 208 47 47;  --st-degraded-rgb: 199 119 0;
  --st-up-line: #0072B2;   --st-down-line: #D02F2F;   --st-degraded-line: #C77700;
}
body.cvd-deutan {
  --st-up:            #1A6FB0;  --st-up-dim:       rgba(26,111,176,.13); --st-up-glow:       rgba(26,111,176,.5);
  --st-down:          #CC3311;  --st-down-dim:     rgba(204,51,17,.13);  --st-down-glow:     rgba(204,51,17,.55);
  --st-degraded:      #C77700;  --st-degraded-dim: rgba(199,119,0,.13);  --st-degraded-glow: rgba(199,119,0,.5);
  --st-up-rgb: 26 111 176;  --st-down-rgb: 204 51 17;  --st-degraded-rgb: 199 119 0;
  --st-up-line: #1A6FB0;    --st-down-line: #CC3311;   --st-degraded-line: #C77700;
}
/* Tritanopie (Blau-Gelb-Kanal verloren): Rot-Grün intakt → up=Grün, down=Rot
   behalten; Blau/Gelb gemieden, degraded=tiefes Orange. */
body.cvd-tritan {
  --st-up:            #0F7A3D;  --st-up-dim:       rgba(15,122,61,.13);  --st-up-glow:       rgba(15,122,61,.5);
  --st-down:          #C42020;  --st-down-dim:     rgba(196,32,32,.13);  --st-down-glow:     rgba(196,32,32,.55);
  --st-degraded:      #B85C00;  --st-degraded-dim: rgba(184,92,0,.13);   --st-degraded-glow: rgba(184,92,0,.5);
  --st-up-rgb: 15 122 61;  --st-down-rgb: 196 32 32;  --st-degraded-rgb: 184 92 0;
  --st-up-line: #0F7A3D;   --st-down-line: #C42020;   --st-degraded-line: #B85C00;
}

body.light header {
  background: rgba(255,255,255,.95);
  border-bottom-color: #e2e8f0;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.04);
}
body.light .panel { background: #ffffff; }
body.light .panel-header { background: #ffffff; }
body.light .stat { background: #ffffff; }
body.light .modal-box { background: #ffffff; }
body.light label input, body.light label select { background: #f8fafc; color: #0f172a; }
body.light .card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  border-radius: 10px;
}
body.light .card.is-down { background: linear-gradient(135deg, rgba(220,38,38,.05) 0%, #ffffff 55%); }
body.light .card.is-slow { background: linear-gradient(135deg, rgba(217,119,6,.04) 0%, #ffffff 55%); }
body.light .card.is-up   { background: linear-gradient(180deg, rgba(22,163,74,.03) 0%, #ffffff 40%); }
body.light .card:hover { box-shadow: var(--shadow-card-hover); }
body.light .sp-card,
body.light .hb-card {
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 55%);
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  border-radius: 10px;
}
body.dark .card {
  background: #1a1a1a;
  border: none;
  border-top: 1px solid rgba(47,209,138,0.12);
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
body.dark .sp-card,
body.dark .hb-card {
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 55%);
}

/* ── Reset & Base ──────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background:
    radial-gradient(ellipse 80% 35% at 50% 0%, rgba(47,209,138,.05) 0%, transparent 60%),
    #0a0a0a;
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--text-muted); text-decoration: none; transition: color .15s; }
a:hover { color: var(--text); }

/* ── Header ────────────────────────────────── */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  gap: 16px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  background: rgba(10,10,10,.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 5;
  box-shadow: 0 1px 0 rgba(47,209,138,.04), 0 4px 16px rgba(0,0,0,.3);
}

/* ── Nav 3-Spalten ─────────────────────────── */
.nav-left  { display: flex; align-items: center; }
.nav-center { display: flex; align-items: center; gap: 2px; margin: 0 16px; }
.nav-right  { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.logo-wrap {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}
.logo-icon  { width: 35px; height: 35px; flex-shrink: 0; }
.logo-text  { font-size: 21px; font-weight: 700; letter-spacing: -.2px; color: var(--text); white-space: nowrap; }

.nav-link {
  font-size: 13px; font-weight: 500;
  color: var(--text-muted);
  padding: 5px 10px; border-radius: 6px;
  text-decoration: none;
  transition: color .15s, background .15s;
  white-space: nowrap;
}
.nav-link:hover    { color: var(--text); background: var(--surface-2); }
.nav-link.is-active{ color: var(--text); background: var(--surface-2); }

/* ── Tier Chip ─────────────────────────────── */
.tier-chip {
  font-size: 11px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-muted);
  white-space: nowrap;
}
.tier-chip.tier-starter { background: rgba(94,166,218,.1); color: #60a5fa; border-color: rgba(94,166,218,.25); }
.tier-chip.tier-pro     { background: rgba(168,85,247,.1); color: #c084fc; border-color: rgba(168,85,247,.25); }
.tier-chip.tier-business{ background: rgba(227,164,69,.1); color: #fbbf24; border-color: rgba(227,164,69,.25); }

.badge {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1px;
}
.badge-up      { background: var(--st-up-dim); color: var(--st-up); box-shadow: 0 0 0 1px rgba(47,209,138,.2); }
.badge-down    { background: var(--st-down-dim);   color: var(--st-down);   box-shadow: 0 0 0 1px rgba(224,101,91,.2); }
.badge-neutral { background: var(--surface-2); color: var(--text-muted); }

.last-updated { font-size: 11px; color: var(--text-muted); white-space: nowrap; }

/* ── Buttons ───────────────────────────────── */
button { cursor: pointer; border: none; font-family: inherit; font-size: 13px; transition: background .15s, color .15s, box-shadow .15s, transform .1s; }
button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
a:focus-visible      { outline: 2px solid var(--green); outline-offset: 2px; }

.btn-primary {
  background: var(--green);
  color: #000;
  padding: 7px 14px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -.1px;
}
.btn-primary:hover { background: #28b978; }
.btn-primary:active  { transform: scale(.97); }
.btn-primary:disabled { opacity: .35; cursor: not-allowed; }
.btn-sm { padding: 6px 14px; font-size: 12px; }

.btn-secondary {
  background: var(--surface-2);
  color: var(--text-2);
  padding: 7px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  font-weight: 500;
}
.btn-secondary:hover  { background: var(--surface-3); border-color: var(--border-2); color: var(--text); }
.btn-secondary:active { transform: scale(.97); }

.btn-danger {
  background: var(--red-dim);
  color: var(--red);
  padding: 8px 16px;
  border-radius: var(--radius);
  font-weight: 500;
  width: 100%;
  border: 1px solid rgba(224,101,91,.2);
}
.btn-danger:hover { background: rgba(224,101,91,.18); }

.btn-icon {
  background: transparent;
  color: var(--text-muted);
  font-size: 16px;
  padding: 5px 8px;
  border-radius: var(--radius);
}
.btn-icon:hover  { background: var(--surface-2); color: var(--text); }
.btn-icon:active { transform: scale(.9); }

/* ── Metric Cards ──────────────────────────── */
.metrics-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 8px;
}
.metric-card {
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
body.dark .metric-card {
  border: none;
  border-top: 1px solid rgba(47,209,138,0.12);
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
body.light .metric-card {
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.metric-value {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.5px;
  line-height: 1;
  color: var(--text);
}
.metric-label { font-size: 11px; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: .4px; }
#metric-up   .metric-value { color: var(--st-up); }
#metric-down .metric-value { color: var(--st-down); }

.metrics-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

/* ── PIN-146: Dashboard anpassen (Segmente aus-/einblenden + anordnen) ── */
.dash-cust-trigger {
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  font: inherit; font-size: 12px; padding: 3px 8px; border-radius: 6px; white-space: nowrap;
}
.dash-cust-trigger:hover { color: var(--text-2); background: var(--surface-2); }
.dash-cust {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 16px; margin: -8px 0 20px auto; max-width: 460px;
}
.dash-cust.hidden { display: none; }
.dash-cust-head { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 14px; }
.dash-cust-x { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 15px; line-height: 1; }
.dash-cust-x:hover { color: var(--text-2); }
.dash-cust-sub { font-size: 12px; color: var(--text-muted); margin: 6px 0 10px; line-height: 1.5; }
.dash-cust-list { list-style: none; margin: 0; padding: 0; }
.dash-cust-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); }
.dash-cust-item:first-child { border-top: none; }
.dash-cust-toggle { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13.5px; }
.dash-cust-toggle input { cursor: pointer; }
.dash-cust-move { display: inline-flex; gap: 4px; flex-shrink: 0; }
.dash-cust-move button {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2);
  cursor: pointer; border-radius: 6px; width: 26px; height: 26px; font-size: 11px; line-height: 1;
}
.dash-cust-move button:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }
.dash-cust-move button:disabled { opacity: .35; cursor: default; }
.dash-cust-foot { margin-top: 10px; text-align: right; }

/* Ausgeblendetes Segment → dezenter, klickbarer Hinweis an seiner Stelle. */
.dash-seg-hint { display: none; }
.dash-seg.seg-collapsed > .dash-seg-body { display: none; }
.dash-seg.seg-collapsed > .dash-seg-hint {
  display: flex; align-items: center; gap: 8px; width: 100%;
  margin: 6px 0 18px; padding: 9px 14px; cursor: pointer; text-align: left;
  background: var(--surface); border: 1px dashed var(--border-2); border-radius: 8px;
  color: var(--text-muted); font: inherit; font-size: 12.5px;
}
.dash-seg.seg-collapsed > .dash-seg-hint:hover { border-color: var(--text-muted); color: var(--text-2); }
.dash-seg-hint-lbl { font-weight: 600; }
.dash-seg-hint-cta { margin-left: auto; color: var(--green-text); font-weight: 600; }

/* ── Skeleton Loading ──────────────────────── */
@keyframes skeleton-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.skeleton-block {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius);
  display: block;
}
.skeleton-metric {
  height: 32px;
  width: 60%;
  margin-bottom: 6px;
}
.skeleton-section {
  height: 16px;
  width: 35%;
  margin: 24px 0 16px;
}

/* ── Section Header ────────────────────────── */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0 16px;
  margin-top: 32px;
  position: relative;
}
.section-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-2), transparent);
}
.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}
.section-hint { font-size: 12px; color: var(--text-muted); font-weight: 400; }

/* ── Heartbeat Pulse Animation ─────────────── */
@keyframes heartbeat-pulse {
  0%, 100% { transform: scale(1); opacity: .7; }
  50%      { transform: scale(1.25); opacity: 1; }
}
.heartbeat-icon {
  display: inline-block;
  animation: heartbeat-pulse 2s ease-in-out infinite;
  transform-origin: center;
}
.hb-card[data-status="up"] .heartbeat-icon {
  animation-duration: 1s;
  filter: drop-shadow(0 0 6px rgba(47,209,138,.4));
}

/* ── Heartbeat Empty State ─────────────────── */
.hb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 24px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.7;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}
.hb-empty-icon {
  font-size: 32px;
  margin-bottom: 12px;
  opacity: .5;
}
.hb-empty-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 6px;
}

/* ── Status Page Section ───────────────────── */
.sp-card {
  cursor: default;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.sp-card:hover { transform: none; box-shadow: var(--shadow-card); }
body.dark .sp-card {
  border: none;
  border-top: 1px solid rgba(47,209,138,0.12);
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
body.light .sp-card {
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.sp-state { display: flex; flex-direction: column; gap: 16px; }
.sp-desc { font-size: 13px; color: var(--text-2); line-height: 1.6; margin: 0; }
.sp-url-row { display: flex; flex-direction: column; gap: 8px; }
.sp-url-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.sp-url-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sp-url {
  font-size: 13px;
  color: var(--green-text);
  text-decoration: none;
  word-break: break-all;
  font-family: 'SF Mono', 'Fira Code', monospace;
}
.sp-url:hover { text-decoration: underline; }
.sp-disable-btn { margin-top: 8px; width: fit-content; }

/* ── Main & Card-Grid ──────────────────────── */
main {
  padding: 32px 32px 48px;
  max-width: 1200px;
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(255,255,255,.012) 0%, transparent 120px);
}

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

.card {
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s, transform .12s;
  position: relative;
  box-shadow: var(--shadow-card);
}
.card:hover {
  border-color: var(--border-2);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}
.card.is-up {
  border-left: 3px solid var(--st-up);
  background: linear-gradient(180deg, rgba(47,209,138,.04) 0%, var(--surface) 45%);
}
.card.is-down {
  border-left: 3px solid var(--st-down);
  background: linear-gradient(135deg, rgba(224,101,91,.09) 0%, var(--surface) 55%);
  box-shadow: var(--shadow-card), inset 0 0 0 1px rgba(224,101,91,.07);
}
.card.is-slow {
  border-left: 3px solid var(--st-degraded);
  background: linear-gradient(135deg, rgba(227,164,69,.07) 0%, var(--surface) 55%);
}
.card.unchecked {
  border-left: 3px solid var(--text-muted);
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
}

/* ── Status Dot ────────────────────────────── */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot-up      { background: var(--st-up);  box-shadow: 0 0 0 3px var(--st-up-dim),  0 0 7px var(--st-up-glow); }
.dot-down    {
  background: var(--st-down);
  box-shadow: 0 0 0 3px var(--st-down-dim), 0 0 9px var(--st-down-glow);
  animation: pulse-red 1.8s ease-in-out infinite;
}
.dot-slow    { background: var(--st-degraded); box-shadow: 0 0 0 3px var(--st-degraded-dim), 0 0 7px var(--st-degraded-glow); }
.dot-unknown { background: var(--text-muted); }

@keyframes pulse-red {
  0%, 100% { box-shadow: 0 0 0 3px var(--st-down-dim); }
  50%       { box-shadow: 0 0 0 6px rgba(224,101,91,.05); }
}

.card-name {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -.1px;
  flex: 1;              /* Name nimmt die ganze Breite ein (Ellipsis statt Überlappung) */
  min-width: 0;
}

.card-url {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 10px;
  font-family: 'Fira Code', 'Consolas', monospace;
}

/* ── Card Sparkline ────────────────────────── */
.card-sparkline {
  height: 28px;
  margin-bottom: 10px;
  overflow: hidden;
}
.card-sparkline svg { display: block; }
.card-sparkline .no-data { font-size: 11px; color: var(--text-muted); line-height: 28px; }

/* ── Card Meta ─────────────────────────────── */
.card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-muted);
}

.card-meta-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Uptime Badge ──────────────────────────── */
.uptime-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 999px;
  letter-spacing: .1px;
}
.uptime-good { background: var(--st-up-dim); color: var(--st-up); }
.uptime-warn { background: var(--st-degraded-dim); color: var(--st-degraded); }
.uptime-bad  { background: var(--st-down-dim); color: var(--st-down); }

/* ── Card Action Buttons ───────────────────── */
.card-actions {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

/* Eigene Zeile unter dem Namen — Name bleibt immer voll lesbar */
.card-actions-row {
  margin-left: 0;
  justify-content: flex-end;
  margin-top: -4px;
  margin-bottom: 6px;
}

.btn-card-action {
  background: transparent;
  color: var(--text-muted);
  border: none;
  padding: 6px 9px;
  border-radius: 6px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background .1s, color .1s;
  flex-shrink: 0;
}
.btn-card-action:hover { background: var(--surface-2); color: var(--text); }
.btn-card-action.paused { color: var(--yellow); }
/* Favorit-Stern: gefüllt in der Akzentfarbe, dezent */
/* Favorit-Stern: oben rechts in der Karte, auf Höhe des Namens — klar erkennbar */
.card-fav {
  flex-shrink: 0;
  margin-left: auto;          /* schiebt den Stern an den rechten Rand des card-header */
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0 0 0 6px;
  color: var(--text-muted);   /* ☆ Umriss dezent, wenn kein Favorit */
  transition: color .15s ease, transform .15s ease;
}
.card-fav:hover { color: var(--yellow); transform: scale(1.15); }
.card-fav.is-favorite { color: var(--yellow); }   /* ★ gold = Favorit */
#cards.select-mode .card .card-fav { pointer-events: none; opacity: .3; }

/* "Jetzt prüfen"-Button (⚡) */
.btn-ping-now:hover { color: var(--yellow); }
.btn-ping-now:disabled { cursor: default; opacity: .6; }
.btn-ping-now.pinging { animation: ping-pulse .7s ease-in-out infinite; }
@keyframes ping-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .4; transform: scale(.85); }
}

.card-status-label { font-weight: 500; }
.label-up   { color: var(--st-up); }
.label-down { color: var(--st-down); }
.label-slow { color: var(--st-degraded); }
.label-maintenance { color: var(--blue); }

/* ── Toast ─────────────────────────────────── */
#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-3);
  color: var(--text);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 13px;
  z-index: 100;
  opacity: 0;
  transition: opacity .2s;
  border: 1px solid var(--border-2);
  pointer-events: none;
  white-space: nowrap;
}

/* ── Empty State ───────────────────────────── */
.empty-state {
  text-align: center;
  color: var(--text-muted);
  padding: 80px 20px;
  font-size: 14px;
  line-height: 1.8;
}
.empty-discover { margin: 18px 0 6px; }

/* ── Auto-Discovery (PIN-113): Domain → Kandidaten-Checkliste ── */
.disc-input-row { display: flex; gap: 8px; align-items: center; }
.disc-input-row .search-input { flex: 1; }
.disc-results-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
/* Der Zähler erbt sonst `.modal-hint { margin-bottom:16px; font-size:13px }` und sitzt
   dadurch 8px zu hoch und eine Stufe zu groß (Mockup: 12px, an der Grundlinie des
   Knopfes daneben). */
.disc-results-head #disc-count { font-size: 12px; margin: 0; line-height: 1.4; }
.disc-selall { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.disc-list { max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
/* PIN-91 Politur: EINZEILIGE Kandidaten-Zeile — Checkbox · Name · URL (füllt die
   Mitte, keine Leere) · Status-Badges rechts. Alles nebeneinander, nichts gestapelt.
   PIN-448: feste Zeilenhöhe 43 statt Innenabstand, damit zehn Kandidaten ohne Scrollen
   ins Bild passen. Die Typ-Emojis 🏠 🔁 📄 sind ersatzlos entfallen (Dario 25.07.),
   der Name daneben trägt die Information schon. */
.disc-item {
  /* flex-direction + margin-bottom EXPLIZIT (wie .imp-rel-row): die globale Regel
     `label { flex-direction: column; margin-bottom: 14px }` (style.css:1169) würde die
     als <label> gebauten Zeilen sonst vertikal stapeln (bekannter PingMon-Fallstrick). */
  display: flex; flex-direction: row; align-items: center; gap: 12px; margin-bottom: 0;
  height: 43px; flex: 0 0 auto;
  padding: 0 13px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); cursor: pointer; transition: border-color .12s, background .12s;
}
.disc-item:hover { border-color: var(--accent, #2fd18a); background: rgba(47,209,138,.04); }
/* Angehakt: grüner Rahmen und sehr dezente Fläche (Mockup .row.sel). Kein Leuchten.
   🚨 :not(.disc-dup) ist PFLICHT. Bereits überwachte Zeilen tragen seit PIN-448 einen
   gesetzten, gesperrten Haken und wären sonst ebenfalls grün, also optisch nicht von einer
   gerade getroffenen Auswahl zu unterscheiden. Grün bedeutet „du hast das eben angehakt",
   nicht „läuft schon". Ohne den Ausschluss gewinnt diese Regel auch noch, weil :has() die
   Spezifität seines Arguments erbt: (0,3,0) gegen (0,2,0) von .disc-item.disc-dup. */
.disc-item:not(.disc-dup):has(.disc-cb:checked) {
  border-color: rgba(47,209,138,.48); background: rgba(47,209,138,.055);
}
/* PIN-446: die Discover-Checkbox trägt zusätzlich .imp-rel-cb und teilt sich damit das
   Custom-Aussehen der Import-Vorschau (eine Quelle, kein Duplikat). Größe/Rahmen/Häkchen
   kommen aus `input.imp-rel-cb`; hier bleibt nur das Flex-Verhalten. */
.disc-item .disc-cb { flex: 0 0 auto; cursor: pointer; }
.disc-name { flex: 0 0 auto; max-width: 38%; font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.disc-url { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.disc-badges { flex: 0 0 auto; display: flex; gap: 6px; }
/* Der Relevanz-Chip steht in der Discover-Zeile direkt neben den Abzeichen und muss
   dieselbe Form haben. Als Pille (999px) neben eckigen Abzeichen (5px) wirkte er wie ein
   Fremdkörper. Gilt nur hier, die Import-Vorschau behält ihre Pillenform. */
.disc-item .imp-chip { border-radius: 5px; padding: 2px 8px; }
.disc-item .disc-badges + .imp-chip { margin-left: -6px; }
/* PIN-448: Abzeichen sind Information, kein Zustandsurteil. Deshalb einheitlich neutral
   mit dünnem Rahmen statt farbiger Fläche. HTTP 307 ist keine Warnung und HTTP 200 kein
   Erfolg, beides ist schlicht der Code, den die Seite geliefert hat. */
.disc-badge {
  font-size: 10.5px; font-weight: 500; padding: 2px 6px; border-radius: 5px;
  background: transparent; border: 1px solid var(--border-2); color: var(--text-2);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.disc-badge-ok, .disc-badge-warn { background: transparent; color: var(--text-2); }
/* --text-2, nicht --text-muted: das Abzeichen sitzt auf der abgesenkten Fläche und käme
   damit nur auf 4,1:1, bei 10,5px Schrift zu wenig. Mit --text-2 sind es 5,9:1. */
.disc-badge-dup { background: transparent; border-color: var(--border); color: var(--text-2); }
/* PIN-448: Bereits überwachte Zeilen setzen sich über die FLÄCHE ab, nicht über Transparenz.
   Vorher war es nur opacity:.55. Auf dunklem Grund ist das zu wenig, eine gedimmte Zeile
   sah einer normalen, nicht angehakten Zeile mit grauem „Mittel"-Chip zu ähnlich (Dario,
   25.07.). Jetzt liegt die Zeile sichtbar TIEFER als die anderen (Flächenton var(--bg)
   statt var(--surface), in beiden Modi eine Stufe dunkler) und trägt einen gesetzten, aber
   gesperrten Haken. Der Haken ist das eigentliche Signal: „läuft schon", nicht „auswählbar".
   Deshalb bewusst KEIN Grün, sonst sähe er nach frisch getroffener Auswahl aus. */
.disc-item.disc-dup {
  cursor: default; background: var(--bg); border-color: var(--border);
}
.disc-item.disc-dup:hover { border-color: var(--border); background: var(--bg); }
/* Gedämpft, aber NICHT unter die Lesbarkeitsschwelle. --text-muted läge auf der
   abgesenkten Fläche nur bei 4,0:1 (dunkel) bzw. 4,1:1 (hell), weil die Fläche selbst
   schon dunkler ist als eine normale Zeile. --text-2 kommt auf 7,6:1 bzw. 5,9:1.
   Zurückgenommen wirkt die Zeile trotzdem, über Fläche, Schriftschnitt und Größe. */
.disc-item.disc-dup .disc-name { color: var(--text-2); font-weight: 500; }
.disc-item.disc-dup .disc-url { color: var(--text-2); }
.disc-item.disc-dup input.disc-cb:checked {
  background: var(--surface-2); border-color: var(--border-2);
}
.disc-item.disc-dup input.disc-cb:checked::after { border-color: var(--text-muted); }
/* PIN-452: Unterzeile unter der Leitvariante. Sie gehört zur Zeile darüber, deshalb
   dicht darunter und um die Breite der Checkbox eingerückt. Kein eigener Rahmen und
   keine eigene Fläche — sie ist eine Fußnote, keine zweite Zeile.
   `flex: 0 0 auto` explizit: .disc-list ist eine Flex-Spalte, ohne das würde die
   Unterzeile bei knapper Höhe gestaucht und der Text abgeschnitten. */
.disc-langvar {
  display: flex; align-items: baseline; gap: 8px; flex: 0 0 auto;
  margin: -3px 0 1px 34px; min-width: 0;
  font-size: 11.5px; line-height: 1.45; color: var(--text-2);
}
.disc-langvar-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.disc-langvar-sep { flex: 0 0 auto; color: var(--text-muted); }
/* Sprachkennung hinter dem Namen einer aufgeklappten Variante: „Preise (en)".
   Zurückgenommen, sie ergänzt den Namen und ersetzt ihn nicht. */
.disc-lang-tag { font-weight: 500; color: var(--text-2); }
/* Der Schalter ist ein <button>, damit er per Tastatur erreichbar ist, sieht aber wie
   ein Link aus. Ohne Unterstreichung (Dario 25.07.).
   🚨 var(--green), NICHT var(--accent). `--accent: var(--green)` steht nur auf :root
   (style.css:42) — CSS löst ein var() in einer Custom-Property-Deklaration auf dem
   DEKLARIERENDEN Element auf und vererbt danach nur noch das fertige Literal. `body.light`
   überschreibt --green, aber nicht --accent, also bliebe hier das dunkle Mintgrün stehen:
   im Browser gemessen #2fd18a auf #f8f9f5, macht 1,87:1 bei 11,5px. Der Schalter ist der
   EINZIGE Weg zu den eingeklappten Varianten, er darf nicht verschwinden. */
.disc-langvar-toggle {
  flex: 0 0 auto; background: none; border: 0; padding: 0;
  font: inherit; font-size: 11.5px; color: var(--green, #2ea866);
  cursor: pointer; white-space: nowrap;
  /* Unterstrichen wie .btn-link (style.css:3842), die Hausregel für Links. Nicht
     Geschmack, sondern Auffindbarkeit: --green kommt im Hellmodus auf der Ebenenfläche
     nur auf 2,6:1 (gemessen), und dieser Schalter ist der EINZIGE Weg zu den
     eingeklappten Sprachvarianten. Über die Farbe allein wäre er dort nicht als
     Bedienelement zu erkennen. Die schwache Grünstufe im Hellmodus ist ein
     produktweites Thema und hat ein eigenes Ticket. */
  text-decoration: underline; text-underline-offset: 2px;
}
.disc-langvar-toggle:hover { opacity: .85; }
.disc-langvar-toggle:focus-visible { outline: 2px solid var(--green, #2ea866); outline-offset: 2px; border-radius: 3px; }
/* Aufgeklappte Sprachvarianten liegen sichtbar unter ihrer Leitvariante: gleiche
   Einrückung wie die Unterzeile, damit die Zugehörigkeit ohne Linie klar ist. */
.disc-item.disc-var { margin-left: 34px; }
@media (max-width: 560px) {
  .disc-name { max-width: 50%; }
  .disc-langvar { margin-left: 20px; }
  .disc-item.disc-var { margin-left: 20px; }
}

/* ── PIN-448: die Bausteine der zweispaltigen Ebene ─────────────────────────────
   Nur Aussehen. Das Raster und die Scroll-Kette stehen in redesign.css Sektion 20c. */
.disc-head { margin-bottom: 20px; }
.disc-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0; margin-bottom: 11px;
  color: var(--text-muted); font: inherit; font-size: 12.5px; cursor: pointer;
}
.disc-back::before { content: "\2190"; font-size: 14px; line-height: 1; }
.disc-back:hover { color: var(--text-2); }
/* Kompound-Selektor PFLICHT: `.modal-box h2 { font-size:15px; margin-bottom:20px }`
   (style.css:1287) steht später und gewänne bei gleicher Spezifität. Mockup: 20px, und
   der Abstand zur Erklärzeile sind 7px, nicht 20px. */
.modal-box-disc .disc-head h2 { font-size: 20px; margin: 0 0 7px; letter-spacing: -.02em; }
.disc-head .modal-hint { font-size: 12px; margin: 0; }
/* Einrichtpanel links. Die Trennlinien laufen über die volle Panelbreite. */
.disc-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px;
}
.disc-panel-div { height: 1px; background: var(--border); margin: 16px -16px; }
.disc-field { display: flex; flex-direction: column; gap: 7px; }
/* EXPLIZIT: die globale `label { display:flex; flex-direction:column; margin-bottom:14px }`
   würde sonst durchschlagen (bekannter PingMon-Fallstrick, siehe .disc-client-row). */
.disc-field-label {
  display: block; margin-bottom: 0;
  font-size: 11.5px; font-weight: 600; color: var(--text-2); letter-spacing: .02em;
}
.disc-panel .disc-input-row { display: flex; gap: 10px; }
.disc-panel .disc-input-row .search-input { flex: 1 1 auto; min-width: 0; }
.disc-hints.hidden { display: none; }
/* Panel „Kunde anlegen", öffnet rechts über der Liste. Rahmen einen Ton deutlicher als
   die Listenzeilen, weil es der aktive Vorgang ist. */
/* Kompound-Selektor PFLICHT: `.ql-add { display:flex }` steht weiter unten (style.css:3397)
   und würde bei gleicher Spezifität gewinnen. `.ql-add.hidden { display:none }` steht noch
   danach und behält damit korrekt Vorrang, wenn das Panel zu ist. */
.ql-add.disc-nc {
  display: block; flex: 0 0 auto; margin-bottom: 16px;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: 12px; padding: 15px 16px 14px;
}
.disc-nc-h {
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 12px;
}
.disc-nc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* Auf Telefonen sind zwei Felder nebeneinander je unter 150px breit. Dann untereinander. */
@media (max-width: 560px) {
  .disc-nc-grid { grid-template-columns: 1fr; gap: 12px; }
  .disc-nc-foot { flex-direction: column; align-items: stretch; gap: 12px; }
}
.disc-nc .ql-add-label, .disc-nc .ql-add-url { width: auto; flex: none; min-width: 0; }
.disc-nc-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 13px;
}
.disc-nc-hint { font-size: 11.5px; color: var(--text-2); line-height: 1.5; margin: 0; max-width: 520px; }
.disc-nc-btns { display: flex; gap: 9px; flex: 0 0 auto; }

/* ── PIN-454: was der Import zusätzlich zu den geteilten Bausteinen braucht ──────
   Der Import benutzt .disc-head, .disc-panel, .disc-panel-div, .disc-field und
   .disc-field-label unverändert mit. Hier stehen nur die vier Stellen, an denen
   sein Inhalt sich von Finden unterscheidet. */
/* Kompound-Selektor PFLICHT, gleiche Begründung wie bei .modal-box-disc: die spätere
   Regel `.modal-box h2 { font-size:15px; margin-bottom:20px }` gewänne sonst. */
.modal-box-import .disc-head h2 { font-size: 20px; margin: 0 0 7px; letter-spacing: -.02em; }
/* Der Datei-Wähler stand bisher IN einem <label> und bezog seine Form aus der Regel
   `label input`. Seit er in .disc-field sitzt, braucht er sie explizit. box-sizing und
   max-width sind Pflicht: der vom Browser gerenderte „Durchsuchen"-Knopf plus Dateiname
   läuft in einer 336px-Spalte sonst waagerecht über den Rand hinaus. */
.disc-panel #import-file {
  width: 100%; max-width: 100%; box-sizing: border-box;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 11px; font-size: 13px; color: var(--text); cursor: pointer;
}
.disc-panel #import-file::file-selector-button {
  margin-right: 10px; padding: 4px 10px; border-radius: 6px;
  border: 1px solid var(--border-2); background: var(--surface-3);
  color: var(--text-2); font: inherit; font-size: 12px; cursor: pointer;
}
/* „Neuer Kunde" im Import: in der schmalen linken Spalte stehen die zwei Felder
   untereinander statt nebeneinander. Bei Finden löst das .disc-nc, das aber rechts
   über der Liste liegt — dort ist beim Import ohne Vorschau gar keine Spalte.
   🚨 Muss VOR `.ql-add.hidden` stehen: gleiche Spezifität (0,2,0), sonst gewönne
   diese Regel und das Panel ließe sich nicht mehr schließen. */
.ql-add.imp-nc { flex-wrap: wrap; margin-top: 8px; }
.imp-nc .ql-add-label, .imp-nc .ql-add-url { width: 100%; flex: 1 1 100%; min-width: 0; }
/* Still gestellter Hauptknopf in der Fußleiste, wie bei Finden: erkennbar ein Knopf,
   sichtbar nicht drückbar. `opacity:.35` allein lässt das Grün durch und sieht nach
   „lädt gerade" aus. */
.modal-box-import .form-actions .btn-primary:disabled {
  opacity: 1; background: var(--surface-3); border-color: var(--border-2);
  color: var(--text-muted); box-shadow: none; cursor: not-allowed;
}
/* Schmaler Balken im einzigen Scrollbereich (wie .disc-scroll). */
.imp-rel-list::-webkit-scrollbar { width: 8px; }
.imp-rel-list::-webkit-scrollbar-track { background: transparent; }
.imp-rel-list::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 99px; }
/* Endmarke: erklärt den Leerraum unter der Liste, statt ihn bloß zu lassen. */
.disc-list-end { font-size: 11px; color: var(--text-muted); padding: 12px 2px 2px; margin: 0; }
.disc-list-end.hidden { display: none; }
/* Stille Notiz in der Fußleiste: der Zähler im Listenkopf verschwindet beim Scrollen. */
/* Still gestellt statt nur blass: der Hauptknopf soll erkennbar ein Knopf bleiben, aber
   sichtbar nicht drückbar. `opacity:.35` allein (style.css:309) lässt das Grün durch und
   sieht nach „lädt gerade" aus. Werte nach Vorgabe: Fläche, gedämpfter Text, betonter
   Rahmen, jeweils über die Tokens. */
.modal-box-disc .form-actions .btn-primary:disabled {
  opacity: 1; background: var(--surface-3); border-color: var(--border-2);
  color: var(--text-muted); box-shadow: none; cursor: not-allowed;
}
.disc-foot-note { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.disc-foot-note.hidden { display: none; }
/* Nullzustand rechts, wo sonst die Liste steht. */
.disc-zero {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 11px; text-align: center; padding-bottom: 40px;
}
.disc-zero.hidden { display: none; }
.disc-zero h3 { font-size: 16px; font-weight: 600; margin: 0; color: var(--text); }
.disc-zero p { font-size: 12.5px; color: var(--text-2); line-height: 1.6; margin: 0; max-width: 430px; }
/* Schmaler Balken statt des kaum greifbaren Standardbalkens (Mockup: 4px). */
.disc-scroll::-webkit-scrollbar { width: 8px; }
.disc-scroll::-webkit-scrollbar-track { background: transparent; }
.disc-scroll::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 99px; }

/* ── PIN-440 Phase 2: Import-Relevanz-Vorschau (V1 „Ruhige Liste") ──────────────
   Zeile: Custom-Checkbox links, Name, URL (füllt die Mitte), Stufe als Chip rechts.
   Die Stufe nutzt bewusst eine eigene RUHIGE Skala (Blau kräftig -> Grau), NICHT die
   Ampel/Grün-Töne, denn Relevanz ist kein Gesundheitssignal. */
/* Wie beim Discover-Fenster (.modal-box-disc): die Vorschau ist eine LISTE mit vier
   Spalten und braucht Breite. Der Kompound-Selektor (Spezifität 0,2,0) MUSS das später
   stehende `.modal-box { max-width: 400px }` schlagen, sonst bliebe das Fenster schmal. */
.modal-box.modal-box-import { max-width: 720px; }

.imp-rel { margin-top: 14px; }
.imp-rel-title { font-size: 15px; font-weight: 650; color: var(--text); margin: 2px 0 2px; }
.imp-rel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 10px 0 6px; flex-wrap: wrap; }
.imp-rel-controls { display: flex; gap: 16px; }
/* Nie mitten im Label umbrechen (schmales Fenster/Mobil) — lieber wandert der Zähler um. */
.imp-rel-controls .btn-link { white-space: nowrap; }
.imp-rel-count { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.imp-rel-list { max-height: 42vh; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; }
.imp-rel-row {
  /* flex-direction + margin-bottom EXPLIZIT: die globale Regel `label { display:flex;
     flex-direction:column; margin-bottom:14px }` (style.css:1150) würde sonst die als
     <label> gebauten Zeilen vertikal stapeln (bekannter PingMon-Fallstrick). */
  display: flex; flex-direction: row; align-items: center; gap: 12px; margin-bottom: 0;
  padding: 10px 13px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); cursor: pointer; transition: border-color .12s, background .12s;
}
.imp-rel-row:hover { border-color: var(--accent, #2fd18a); background: rgba(47,209,138,.04); }
/* Kopfzeile: gleiche Spaltenbreiten wie die Datenzeilen, aber ohne Kasten. */
.imp-rel-header { border: none; background: transparent; padding: 0 13px; cursor: default; }
.imp-rel-header:hover { border: none; background: transparent; }
.imp-rel-header .imp-rel-nm,
.imp-rel-header .imp-rel-url,
.imp-rel-header .imp-rel-chip-h {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted);
}
.imp-rel-header .imp-rel-chip-h { flex: 0 0 auto; }
/* Feste Spaltenbreite (nicht max-width), damit Kopfzeile und Datenzeilen sauber fluchten. */
.imp-rel-nm { flex: 0 0 32%; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-rel-url { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { .imp-rel-nm { flex-basis: 44%; } }

/* Custom-Checkbox (appearance:none, damit sie in beiden Themes gleich sitzt). */
.imp-rel-cb { flex: 0 0 auto; width: 20px; height: 20px; }
input.imp-rel-cb {
  appearance: none; -webkit-appearance: none; border-radius: 6px;
  border: 1.5px solid var(--text-muted); background: transparent; cursor: pointer;
  position: relative; transition: background .12s ease, border-color .12s ease;
  /* padding EXPLIZIT 0: die globale Regel `label input { padding: 8px 11px }`
     (style.css:1165) würde sonst in die 20px-Box hineinwirken. */
  padding: 0;
}
input.imp-rel-cb:checked { background: var(--accent, #2fd18a); border-color: var(--accent, #2fd18a); }
input.imp-rel-cb:checked::after {
  content: ""; position: absolute; left: 6px; top: 2.5px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg);
}
input.imp-rel-cb:focus-visible { outline: 2px solid var(--accent, #2fd18a); outline-offset: 2px; }

/* Relevanz-Chip: eigene ruhige Skala, bewusst NICHT die Ampel (Relevanz != Gesundheit). */
/* Variante B („Ruhig", von Dario gewählt 24.07.): KEIN gefüllter Chip. Die Auswahl
   (grünes Häkchen) ist die Handlung und bleibt das lauteste Element, die Relevanz ist
   nur Information und tritt einen Schritt zurück. „Hoch" trägt allein die blaue Kontur. */
.imp-chip {
  flex: 0 0 auto; font-size: 11px; font-weight: 600; letter-spacing: .03em;
  padding: 2px 9px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent;
}
/* Blau bewusst dunkler als im Entwurf: 11px-Text braucht auf weißer Zeile ≥ 4.5:1
   (#5b8def kam nur auf 3.2, dieser Ton auf 4.9). Dunkelmodus liegt bei 8.7. */
.imp-chip.high { color: #2f6fd0; background: transparent; border-color: #2f6fd0; font-weight: 650; }
.imp-chip.medium { color: var(--text-2); background: transparent; border-color: var(--border-2); }
.imp-chip.low { color: var(--text-muted); background: transparent; border-color: var(--border); }
/* PIN-448: im Dunkelmodus auf den Mockup-Ton #5ea6da. Gerechnet auf der Zeilenfläche
   (--surface #141a17): 6,8:1, also klar über der Schwelle. Hell bleibt #2f6fd0, denn
   #5ea6da käme auf Weiß nur auf 2,6:1. Gilt auch für die Import-Vorschau, die sich die
   Klasse teilt, sonst stünden zwei Blautöne nebeneinander. */
body.dark .imp-chip.high { color: #5ea6da; background: transparent; border-color: #5ea6da; }

/* PIN-91: Kunde-Zuordnung der Übernahme + sichtbares Standard-Prüfset / MX-Hinweis */
.disc-client-row {
  /* PIN-444: flex-direction EXPLIZIT row — sonst greift die globale
     `label { flex-direction: column }`-Regel und die Box („Diesem Kunden zuordnen")
     stapelt + zentriert statt linksbündig zu stehen. Gilt für Import- UND Finden-Modal. */
  display: flex; flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 8px; font-size: 13px; color: var(--text-2);
}
.disc-client-row select {
  flex: 1 1 auto; min-width: 160px;
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); font-size: 13px;
}
.disc-checkset { margin: 0 0 9px; font-size: 11.5px; color: var(--text-2); line-height: 1.5; }
/* MX-Hinweis: KEIN Rahmen, nur eine grüne Kante links. Sonst steht im Panel Kasten in
   Kasten in Kasten (Spezifikation Punkt 2). Text auf --text-2 statt --text-muted, weil
   gedämpftes Grau auf der Panelfläche nur rund 2,9:1 erreicht. */
.disc-mail {
  margin: 0; padding: 8px 10px; border: 0; border-left: 2px solid var(--green);
  border-radius: 0 6px 6px 0; background: rgba(47,209,138,.05);
  color: var(--text-2); font-size: 11.5px; line-height: 1.5;
}
/* PIN-91 Politur: breiteres Discover-Fenster (weg vom Smartphone-Look) + Toggle-Kopf.
   Kompound-Selektor `.modal-box.modal-box-disc` (Spezifität 0,2,0) MUSS das spätere
   `.modal-box { max-width: 400px }` schlagen — sonst bliebe das Fenster schmal. */
.modal-box.modal-box-disc { max-width: 760px; }
.modal-box.modal-box-disc .disc-list { max-height: 54vh; }
.disc-results-head #disc-toggle-all { flex: 0 0 auto; }
/* PIN-91 Politur: Website-Live-Status (erreichbar?) + zusammengehörige Checkbox-Hinweise */
.site-status { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 600; }
.site-status-checking { color: var(--text-muted); }
.site-status-ok { color: #16a34a; }
.site-status-bad { color: #d97706; }
.cust-check { margin: 10px 0; }
.cust-check-hint { display: block; margin-top: 3px; padding-left: 26px; color: var(--text-muted); }

/* ── Visuelles Feedback: frisch angelegtes Element leuchtet kurz grün auf ── */
@keyframes pmFlash {
  0%   { box-shadow: 0 0 0 0 rgba(47,209,138,.55); }
  60%  { box-shadow: 0 0 0 10px rgba(47,209,138,.12); }
  100% { box-shadow: 0 0 0 16px rgba(47,209,138,0); }
}
.pm-flash {
  animation: pmFlash 1.6s ease-out 1;
  border-color: var(--green) !important;
}
/* Sanfter Bereichs-Highlight (z.B. Alarm-Sektion nach einem Sprung dorthin) */
@keyframes pmHighlight {
  0%, 100% { background: transparent; }
  25%      { background: var(--green-dim); }
}
.pm-highlight {
  animation: pmHighlight 2.4s ease-in-out 1;
  border-radius: 12px;
}

/* ── Kontextuelle Hilfe: dezentes ⓘ am Feld, Erklärung klappt inline darunter auf ── */
label { position: relative; }
.info-i {
  position: absolute; top: 0; right: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; padding: 0;
  border: 1px solid var(--border-2, var(--border)); border-radius: 50%;
  background: var(--surface-2); color: var(--text-muted);
  font-size: 11px; font-weight: 700; font-style: italic;
  font-family: Georgia, "Times New Roman", serif; line-height: 1; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.info-i:hover { color: var(--green-text); border-color: var(--green); }
.field-help {
  flex-basis: 100%;
  margin-top: 2px;
  font-size: 12px; line-height: 1.45; color: var(--text-2); font-weight: 400;
  letter-spacing: 0;
  padding: 9px 11px; border-left: 2px solid var(--green);
  background: var(--green-dim); border-radius: 0 6px 6px 0;
}
.label-check { flex-wrap: wrap; }

/* ── Limit-Hinweis ─────────────────────────── */
.limit-hint {
  padding: 8px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}
.limit-hint-link {
  color: var(--green-text);
  text-decoration: none;
  font-weight: 500;
}
.limit-hint-link:hover { text-decoration: underline; }

/* ── Detail Panel ──────────────────────────── */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(2px);
  z-index: 10;
}

/* Zentriertes Modal statt Seiten-Drawer — die Tages-Balken brauchen Breite,
   und ein echtes Fenster passt zur restlichen Modal-UI (.modal-box-Optik
   kommt aus dem Rebrand-Block weiter unten) */
.panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(780px, calc(100vw - 32px));
  max-height: min(88vh, 860px);
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 60px);
  border-radius: 16px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  animation: panel-in .18s ease-out;
}
@keyframes panel-in {
  from { opacity: 0; transform: translate(-50%, -49%) scale(.97); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .panel { animation: none; } }

.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
  border-radius: 16px 16px 0 0;  /* deckt die runden Modal-Ecken beim Scrollen ab */
}

.panel-header > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.panel-header h2 {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -.2px;
}

.detail-url {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Fira Code', 'Consolas', monospace;
}
.detail-url:hover { color: var(--blue); }

.panel-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border-bottom: 1px solid var(--border);
}

.stat {
  background: var(--surface);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .6px; font-weight: 500; }
.stat-value { font-size: 14px; font-weight: 600; }

.panel-section { padding: 20px; border-bottom: 1px solid var(--border); }
.panel-section h3 { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .6px; font-weight: 600; margin-bottom: 14px; }

.panel-footer {
  padding: 16px 20px;
  margin-top: auto;
  display: flex;
  gap: 10px;
}

/* ── Funktions-Wächter (Detail-Panel) ─────────
   Stille Defekte (noindex, robots.txt, Mixed Content, Mail-DNS …) als klare,
   nach Schweregrad sortierte Liste. Geteilt von echtem Dashboard + Demo. */
.fn-intro { font-size: 12.5px; color: var(--text-2); margin: -4px 0 12px; line-height: 1.5; }
.fn-list { display: flex; flex-direction: column; gap: 8px; }
.fn-finding {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 13px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--border);
}
.fn-finding.fn-hoch    { border-left-color: var(--red); }
.fn-finding.fn-mittel  { border-left-color: var(--yellow); }
.fn-finding.fn-niedrig { border-left-color: var(--text-muted); }
.fn-sev-badge {
  flex-shrink: 0; margin-top: 1px;
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  padding: 3px 8px; border-radius: 999px; line-height: 1.5;
}
.fn-sev-hoch    { color: #fff; background: var(--red); }
.fn-sev-mittel  { color: #2a1d00; background: var(--yellow); }
.fn-sev-niedrig { color: var(--text); background: var(--surface-2); border: 1px solid var(--border); }
.fn-finding-text { font-size: 13px; color: var(--text); line-height: 1.5; }

/* ── Sparkline ─────────────────────────────── */
#detail-sparkline { height: 48px; }
#detail-sparkline svg { display: block; }
.no-data { color: var(--text-muted); font-size: 12px; }

/* ── Check-Tabelle ─────────────────────────── */
#detail-table-wrap { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  text-align: left;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}
td { padding: 7px 8px; border-bottom: 1px solid rgba(255,255,255,.025); color: var(--text-2); }
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(255,255,255,.025); }

.td-up   { color: var(--st-up); font-weight: 500; }
.td-down { color: var(--st-down);   font-weight: 500; }

/* ── Modal ─────────────────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(4px);
  z-index: 30;
  padding: 20px;
}
/* Hintergrund-Scroll sperren, solange ein Modal offen ist → nur das Modal (und die
   Live-Vorschau) scrollen, nie mehr das Dashboard dahinter (Dario-Feedback). */
body.modal-open { overflow: hidden; }

.modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  width: 100%;
  max-width: 400px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--shadow);
}

.modal-box::-webkit-scrollbar { width: 4px; }
.modal-box::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.modal-box h2 { font-size: 15px; font-weight: 600; margin-bottom: 20px; letter-spacing: -.2px; }

label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 14px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: .1px;
}

label input, label select {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  padding: 8px 11px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
label input:focus, label select:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-dim);
}
label select option { background: var(--surface-2); }

.form-error {
  background: var(--red-dim);
  border: 1px solid rgba(224,101,91,.25);
  color: var(--red);
  padding: 8px 12px;
  border-radius: var(--radius);
  font-size: 13px;
  margin-bottom: 12px;
}

.form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }

/* ── Utilities ─────────────────────────────── */
.hidden { display: none !important; }

/* ── Advanced Form Options ──────────────────── */
.advanced-opts { margin-bottom: 14px; }
.advanced-opts summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--text-muted);
  padding: 6px 0;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}
.advanced-opts summary::before {
  content: '▶';
  font-size: 9px;
  transition: transform .15s;
  color: var(--text-muted);
}
.advanced-opts[open] summary::before { transform: rotate(90deg); }
.advanced-content { padding: 10px 0 0; display: flex; flex-direction: column; }
.label-check {
  flex-direction: row !important;
  align-items: center;
  gap: 8px !important;
  margin-bottom: 14px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-2);
}
.label-check input { width: auto; }

/* ── Maintenance ───────────────────────────── */
.dot-maintenance { background: var(--blue); box-shadow: 0 0 0 3px var(--blue-dim), 0 0 7px rgba(94,166,218,.4); }
.card.is-maintenance {
  border-left: 3px solid var(--blue);
  background: linear-gradient(135deg, rgba(94,166,218,.07) 0%, var(--surface) 55%);
}
.label-maintenance { color: var(--blue); }

.btn-maintenance {
  background: var(--blue-dim);
  color: var(--blue);
  padding: 8px 16px;
  border-radius: var(--radius);
  font-weight: 500;
  flex: 1;
  border: 1px solid rgba(94,166,218,.2);
}
.btn-maintenance:hover { background: rgba(94,166,218,.16); }

/* ── Gesperrte Endpunkte (Tier-Limit nach Downgrade) ── */
.card.is-locked {
  opacity: .55;
  filter: grayscale(.6);
  border-left: 3px solid var(--text-muted);
}
.card.is-locked .card-sparkline { opacity: .4; }
.dot-locked   { background: var(--text-muted); }
.label-locked { color: var(--text-muted); }

/* ── Suche (Endpunkte + Heartbeats) ────────── */
.search-input {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  width: 240px;
  max-width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.search-input::placeholder { color: var(--text-muted); }
.search-input:focus {
  outline: none;
  border-color: #2fd18a;
  box-shadow: 0 0 0 3px rgba(47,209,138,.18);
}
.search-empty { font-size: 12.5px; color: var(--text-muted); margin-right: auto; }

/* Heartbeat-Suche: per Lupe auf-/zuklappbar */
.section-actions { display: flex; align-items: center; gap: 8px; }
.hb-search {
  width: 0;
  padding-left: 0;
  padding-right: 0;
  border-width: 0;
  opacity: 0;
  transition: width .2s ease, opacity .2s ease, padding .2s ease;
}
.hb-search.open {
  width: 200px;
  padding-left: 12px;
  padding-right: 12px;
  border-width: 1px;
  opacity: 1;
}

/* ── Aufklapp-Button (Liste > 20 Karten) ───── */
.card-filtered { display: none !important; }
.show-all-row { display: flex; justify-content: center; margin: 14px 0 4px; }
.btn-show-all {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.btn-show-all:hover { color: var(--text); border-color: var(--border-2); }

/* ── Auswahl-Modus (Mehrfach-Löschen) ─────── */
.select-toolbar { display: flex; gap: 8px; margin-bottom: 12px; justify-content: flex-end; align-items: center; }
.select-toolbar .search-input { margin-right: auto; }
#cards.select-mode .card { cursor: pointer; }
#cards.select-mode .card .card-actions { pointer-events: none; opacity: .3; }
.card.is-selected {
  outline: 2px solid var(--red);
  outline-offset: -2px;
  background: var(--red-dim);
}
.btn-danger {
  background: var(--red-dim);
  color: var(--red);
  border: 1px solid rgba(224,101,91,.3);
}
.btn-danger:hover:not(:disabled) { background: rgba(224,101,91,.18); }
.btn-danger:disabled { opacity: .5; cursor: not-allowed; }

/* ── Heartbeat Section (legacy alias) ──────── */
.hb-section-header { display: flex; align-items: center; justify-content: space-between; padding: 24px 0 12px; margin-top: 24px; }
.hb-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}
.hb-icon { font-size: 15px; }
.hb-section-hint {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
}
.btn-sm { padding: 7px 14px; font-size: 13px; }

/* ── Heartbeat Detail Modal ─────────────────── */
.modal-box-hb { max-width: 480px; }
.modal-hb-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.hb-detail-title { display: flex; align-items: center; gap: 8px; }
.hb-url-box {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}
.hb-url-label { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; font-weight: 500; text-transform: uppercase; letter-spacing: .4px; }
.hb-url-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.hb-url-code {
  font-family: 'Fira Code', 'Consolas', monospace;
  font-size: 12px;
  color: var(--text);
  word-break: break-all;
  flex: 1;
}
.hb-url-example {
  font-family: 'Fira Code', 'Consolas', monospace;
  font-size: 11px;
  color: var(--text-muted);
  white-space: pre;
  overflow-x: auto;
  line-height: 1.7;
  margin-top: 4px;
}
.modal-hint { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; line-height: 1.6; }

/* ── Status Page Widget (Dashboard-intern) ──── */
.w-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.w-badge {
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.w-icon { font-size: 18px; }
.w-summary {
  font-size: 12px;
  color: var(--text-muted);
}
.w-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-muted);
  margin: 16px 0 8px;
  font-weight: 500;
}

/* ── Monitor List ── */
.w-monitors {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

/* Kunden-Gruppen im „System Status"-Widget (PIN-167) — einklappbar, nur privat im Dashboard */
.w-groups { display: flex; flex-direction: column; gap: 8px; }
.w-group { border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.w-group-head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 12px; background: none; border: 0; border-radius: 10px;
  cursor: pointer; font: inherit; color: var(--text); text-align: left;
}
.w-group-head:hover { background: var(--surface-3); }
.w-group-name { font-weight: 600; font-size: 13.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-group-summary { margin-left: auto; font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.w-group-caret { font-size: 11px; color: var(--text-muted); width: 12px; text-align: center; flex-shrink: 0; }
.w-group-body { padding: 0 10px 10px; }
.w-group-body.hidden { display: none; }
.w-group-hint { margin: 2px 2px 0; font-size: 11.5px; color: var(--text-muted); }
.w-monitor {
  background: var(--surface);
  padding: 10px 14px;
}
.w-monitor-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.w-monitor-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.w-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.w-dot-up      { background: var(--st-up); box-shadow: 0 0 4px var(--st-up); }
.w-dot-down    { background: var(--st-down); box-shadow: 0 0 4px var(--st-down); }
.w-dot-unknown { background: var(--text-muted); }
.w-monitor-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.w-monitor-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.w-uptime {
  font-size: 12px;
  font-weight: 600;
  color: var(--st-up);
  font-variant-numeric: tabular-nums;
}
.w-label {
  font-size: 11px;
  font-weight: 500;
  padding: 1px 7px;
  border-radius: 999px;
}
.w-lbl-up      { background: rgb(var(--st-up-rgb) / .12); color: var(--st-up); }
.w-lbl-down    { background: rgb(var(--st-down-rgb) / .12); color: var(--st-down); }
.w-lbl-unknown { background: var(--surface-2); color: var(--text-muted); }

/* ── 30-Day History (compact für Widget) ── */
.w-history-bar {
  display: flex;
  gap: 1px;
  align-items: flex-end;
}
.w-day {
  flex: 1;
  height: 16px;
  border-radius: 2px;
  cursor: default;
}
.w-day-up      { background: var(--st-up); opacity: .65; }
.w-day-up:hover { opacity: 1; }
.w-day-partial  { background: var(--st-degraded); opacity: .65; }
.w-day-partial:hover { opacity: 1; }
.w-day-down    { background: var(--st-down); opacity: .65; }
.w-day-down:hover { opacity: 1; }
.w-day-empty   { background: var(--border); }

/* ── Incidents ── */
.w-incidents {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.w-incident {
  background: var(--surface);
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.w-incident-title {
  font-size: 12px;
  font-weight: 600;
}
.w-incident-meta {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.w-no-incidents {
  font-size: 12px;
  color: var(--st-up);
  padding: 8px 0;
}

/* ── Footer (URL + Buttons) ── */
.w-footer {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.w-url-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.w-url {
  font-family: 'Fira Code', 'Consolas', monospace;
  font-size: 11px;
  color: var(--text-muted);
  word-break: break-all;
  min-width: 0;
}
.w-url:hover { color: var(--green-text); }
/* Embed-Snippet-Zeile im Status-Widget-Footer (PIN-272) — eigene volle Zeile */
.w-embed-row { display: flex; align-items: center; gap: 6px; flex-basis: 100%; min-width: 0; }
.w-embed-lbl { font-size: 11px; color: var(--text-muted); font-weight: 600; white-space: nowrap; }
.w-embed-input { font-size: 10px; padding: 4px 8px; }
/* PIN-271: Kunden-Chip in der Wartungsliste — dezent, flach */
.maint-client-chip { color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; font-size: 11px; white-space: nowrap; }
/* PIN-273: Telemetrie-Schalter für Nicht-Business gesperrt (Dario 10.07.) */
.pm-switch-locked { opacity: .5; cursor: not-allowed; }
.pm-switch-locked .pm-switch-lbl::before { content: "🔒 "; }
#cust-telemetry-hint.is-locked::after { content: " → Upgrade in den Einstellungen."; color: var(--accent, #0b7a3c); }
/* ── Helper: kleine Aktions-Buttons (Status-Widget-Footer, Incident-Modal) ──
   Marken-Stil statt nackter blauer Links: Pill mit Surface + Border,
   grüner Hover. Gilt auch für <a>-Elemente (Öffnen →). */
.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  cursor: pointer;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1;
  text-decoration: none;
  transition: color .15s, border-color .15s, background .15s;
}
.btn-text:hover {
  color: var(--green-text);
  border-color: rgba(47,209,138, .45);
  background: var(--green-dim);
}
/* Deaktivieren = destruktiv: gedämpft, Hover rot (nach .btn-text, damit es gewinnt) */
.btn-text.w-disable { color: var(--text-muted); }
.btn-text.w-disable:hover {
  color: var(--red);
  border-color: rgba(224,101,91, .4);
  background: var(--red-dim);
}
.btn-xs { font-size: 11px; }

/* ── Branding: Grünes MON ──────────────────── */
.mon-accent { color: var(--green-text); }

/* ── Status Page Header ─────────────────────── */
.hb-section-header.sp-header { margin-top: 0; }

/* ── Responsive ────────────────────────────── */
@media (max-width: 640px) {
  .nav-center { display: none; }
}
@media (max-width: 480px) {
  header { padding: 12px 16px; }
  main { padding: 16px; }
  .metrics-row { grid-template-columns: 1fr 1fr; }
  .metrics-row .metric-card:last-child { grid-column: 1 / -1; }
  .panel { width: calc(100vw - 16px); max-height: 92vh; }
  .panel-stats { grid-template-columns: 1fr 1fr; }
}

/* ── Settings Page ─────────────────────────── */
.settings-layout {
  display: flex;
  gap: 32px;
  max-width: 960px;
  margin: 32px auto;
  padding: 0 24px;
}

.settings-nav {
  flex-shrink: 0;
  width: 180px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background .15s, color .15s;
}
.settings-nav-item:hover {
  background: var(--surface);
  color: var(--text);
}
.settings-nav-item.active {
  background: rgba(94,166,218,.1);
  color: var(--blue);
  font-weight: 600;
}
.nav-icon { font-size: 16px; line-height: 1; }

.settings-content {
  flex: 1;
  min-width: 0;
}

.settings-tab {
  display: block;
}
.settings-tab.hidden {
  display: none;
}

.settings-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 16px;
}
.settings-section .section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px;
  text-transform: none;
  letter-spacing: 0;
}
.section-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 14px;
  line-height: 1.6;
}
.settings-section label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.settings-section label:last-of-type { margin-bottom: 0; }
.settings-section label input,
.settings-section label select {
  display: block;
  width: 100%;
  margin-top: 6px;
}
.settings-section-danger {
  border-color: rgba(224,101,91,.2);
}
.section-title-danger { color: var(--red) !important; }

.form-error {
  font-size: 13px;
  color: var(--red);
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(224,101,91,.08);
  border-radius: 6px;
}
.form-success {
  font-size: 13px;
  color: var(--green-text);
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(47,209,138,.08);
  border-radius: 6px;
}
.form-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.form-actions .btn-primary,
.form-actions .btn-secondary { width: auto; }

.copy-field {
  display: flex;
  gap: 6px;
  align-items: center;
}
.copy-field input {
  flex: 1;
  font-family: 'Fira Code', 'Consolas', monospace;
  font-size: 12px;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  cursor: default;
  outline: none;
}
.copy-hint {
  font-size: 11px;
  color: var(--green-text);
  margin-top: 4px;
}

.input-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 6px;
}
.input-row input { flex: 1; margin-top: 0; }
.test-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.test-btn:hover { background: var(--border); }

.quiet-hours {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}
.quiet-hours label {
  flex: 1;
  margin-bottom: 0;
}
.alert-feedback {
  font-size: 12px;
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 5px;
}
.link-blue { color: var(--blue); }
.link-blue:hover { text-decoration: underline; }

/* ── Alarm-Kanäle (Status-Liste) ── */
.ch-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 10px;
  background: var(--surface-2);
}
.ch-row.is-active  { border-left: 3px solid var(--green); }
.ch-row.is-muted   { border-left: 3px solid var(--text-muted); opacity: .8; }
.ch-row.is-empty   { border-left: 3px solid var(--border-2); }
.ch-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.ch-name { font-weight: 600; font-size: 14px; }
.ch-value {
  font-size: 12px; color: var(--text-muted);
  font-family: 'Fira Code', 'Consolas', monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ch-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.ch-badge-active { background: var(--green-dim); color: var(--green-text); }
.ch-badge-muted  { background: var(--surface-3); color: var(--text-muted); }
.ch-badge-off    { background: transparent; color: var(--text-muted); font-weight: 500; }
.ch-acts { display: flex; gap: 6px; align-items: center; }
.ch-btn {
  background: var(--surface-3); border: 1px solid var(--border);
  color: var(--text); padding: 6px 12px; border-radius: 6px;
  font-size: 12px; cursor: pointer; white-space: nowrap;
}
.ch-btn:hover:not(:disabled) { background: var(--border); }
.ch-btn:disabled { opacity: .5; cursor: default; }
.ch-btn-del { color: var(--red); padding: 6px 10px; }
.ch-btn-del:hover { background: var(--red-dim); }
.ch-btn-add { color: var(--green-text); }
.ch-edit { grid-column: 1 / -1; margin-top: 4px; }
/* Kanal-Eingabefelder (Nummer, Code, Webhook-URLs …): bisher ungestylter
   Browser-Default (weiße Box) — jetzt Haus-Look wie .search-input (PIN-124-
   Feedback 12.07.). Gilt für ALLE Kanäle im Alarm-Tab. */
.ch-input {
  flex: 1;
  min-width: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.ch-input::placeholder { color: var(--text-muted); }
.ch-input:focus {
  outline: none;
  border-color: #2fd18a;
  box-shadow: 0 0 0 3px rgba(47,209,138,.18);
}
.prof-input { flex: 1; min-width: 0; }
.prof-pending {
  grid-column: 1 / -1; margin-top: 8px; font-size: 12.5px;
  color: var(--text-muted); display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.ch-help { font-size: 12px; color: var(--text-muted); margin: 0 0 8px; }
.ch-fb { grid-column: 1 / -1; font-size: 12px; padding: 4px 0 0; }
.feedback-ok  { color: var(--green-text); }
.feedback-err { color: var(--red); }
@media (max-width: 640px) {
  .ch-row { grid-template-columns: 1fr; }
  .ch-acts { justify-content: flex-start; }
}

/* ── Billing / Pricing Cards ── */
.billing-current-plan {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 0;
}
.billing-tier-badge {
  font-size: 13px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(94,166,218,.12);
  color: var(--blue);
}
.billing-limits {
  font-size: 13px;
  color: var(--text-muted);
}

.billing-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.billing-plan-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  transition: border-color .15s;
}
.billing-plan-card:hover { border-color: var(--text-muted); }
.billing-plan-featured {
  border-color: var(--blue);
  background: linear-gradient(135deg, rgba(94,166,218,.03), var(--surface));
}
.billing-plan-featured:hover { border-color: var(--blue); }

.plan-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  white-space: nowrap;
}

.plan-header {
  text-align: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.plan-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.plan-price {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
}
.plan-price span {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
}

.plan-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.plan-features li {
  font-size: 13px;
  color: var(--text);
  padding-left: 18px;
  position: relative;
}
.plan-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--green-text);
  font-weight: 700;
}

.plan-btn {
  width: 100%;
  padding: 9px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  margin-top: auto;
}
.btn-checkout {
  background: var(--blue);
  color: #fff;
}
.btn-checkout:hover { opacity: .9; }
.plan-btn[disabled] { opacity: .4; cursor: default; }

/* ── Settings Responsive ── */
@media (max-width: 768px) {
  .settings-layout { flex-direction: column; gap: 12px; margin: 16px auto; }
  .settings-nav { width: 100%; flex-direction: row; }
  .settings-nav-item { flex: 1; justify-content: center; font-size: 13px; padding: 8px 10px; }
  .billing-plans { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .settings-section { padding: 14px 16px; }
  .quiet-hours { flex-direction: column; gap: 8px; }
  .input-row { flex-direction: column; }
  .test-btn { width: 100%; }
}

/* ── Badge Modal ─────────────────────────────── */
.modal-badge-box { max-width: 520px; }
.badge-modal-hint { font-size: 12px; color: var(--text-muted); margin-bottom: 20px; line-height: 1.5; }
.badge-preview-section { margin-bottom: 18px; }
.badge-preview-label { font-size: 11px; color: var(--text-muted); font-weight: 600; letter-spacing: .3px; text-transform: uppercase; display: block; margin-bottom: 8px; }
.badge-preview-frame { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 8px; min-height: 48px; display: flex; align-items: center; }
.badge-preview-frame img { display: block; }
.badge-copy-row { display: flex; gap: 8px; }
.badge-code-input { flex: 1; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); border-radius: var(--radius); padding: 7px 10px; font-size: 11px; font-family: monospace; outline: none; min-width: 0; }
.btn-copy-badge { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); padding: 7px 14px; font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background .15s; }
.btn-copy-badge:hover { background: var(--border); }

/* ── Embed-Badge-Snippet: Varianten-Umschalter (PIN-272), flach/kein Glow ── */
.embed-variant-row { display: flex; gap: 16px; margin-bottom: 8px; font-size: 12px; color: var(--text-muted); }
.embed-variant-opt { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.embed-variant-opt input { margin: 0; accent-color: var(--accent, #0b7a3c); }

/* ── Trust-Badge: Domain-Binding-Whitelist (PIN-30) ── */
.badge-domains-hint { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin: 0 0 10px; }
.badge-domains-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.badge-domain-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 12px; color: var(--text); }
.badge-domain-rm { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; border-radius: 50%; }
.badge-domain-rm:hover { color: var(--red); }
.badge-domains-msg { display: block; font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.badge-domains-msg.feedback-err { color: var(--red); }
.badge-code-input:disabled { opacity: .5; cursor: not-allowed; }
.btn-copy-badge:disabled { opacity: .5; cursor: not-allowed; }

/* ── Trust Badges (Landing Page) ───────────── */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}
.trust-badge {
  background: #141414;
  border: 1px solid #1e1e1e;
  border-radius: 10px;
  padding: 20px 12px;
  text-align: center;
  transition: border-color 0.2s;
}
.trust-badge:hover { border-color: #2fd18a; }
.trust-badge .badge-icon { font-size: 24px; margin-bottom: 8px; }
.trust-badge .badge-title { font-size: 14px; font-weight: 600; color: #d4d4d4; margin-bottom: 4px; }
.trust-badge .badge-sub { font-size: 12px; color: #666; line-height: 1.4; }

/* ── Domain Expiry Badge ───────────────────── */
.card-domain-expiry {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 6px;
  font-weight: 500;
}
.expiry-ok       { color: var(--text-muted); background: transparent; }
.expiry-warn     { color: var(--st-degraded); background: var(--st-degraded-dim); }
.expiry-critical { color: var(--st-down);    background: var(--st-down-dim); }

/* Funktions-Wächter: dezenter Warn-Chip („still kaputt", trotz Status 200) */
.card-function-warn {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 6px;
  font-weight: 500;
  color: var(--yellow);
  background: var(--yellow-dim);
  cursor: help;
}

/* Multi-Region (PIN-122): „nur bei uns down — weltweit OK"-Chip auf der Karte.
   Grün statt Gelb: die Botschaft ist beruhigend (kein echter Ausfall). */
.card-mr-localonly {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 6px;
  font-weight: 500;
  color: var(--green-text);
  background: var(--green-dim);
  cursor: help;
}

/* Multi-Region (PIN-122): Upsell-Hinweis unter dem gesperrten Toggle —
   gleiche Blockform wie .field-help, aber neutral statt grün. */
.mr-lock {
  flex-basis: 100%;
  margin-top: 2px;
  font-size: 12px; line-height: 1.45; color: var(--text-muted); font-weight: 400;
  padding: 9px 11px; border-left: 2px solid var(--border);
  background: var(--surface-2); border-radius: 0 6px 6px 0;
}
.mr-toggle input:disabled + span { opacity: .55; }

/* ── Ablauf-Cockpit („Fällig demnächst") ───── */
.expiry-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}
.expiry-toggle input { cursor: pointer; }
.expiry-card { cursor: default; }
.expiry-card:hover { transform: none; }
/* Resttage-Pille: nutzt die vorhandenen Ampel-Klassen für die Farbe */
.expiry-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.expiry-date { font-size: 11px; color: var(--text-muted); }

/* ── Payment Banner Animation ──────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Feedback Widget ────────────────────────── */
.btn-feedback {
  position: fixed; bottom: 24px; right: 24px;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--green); color: #fff;
  border: none; font-size: 20px;
  cursor: pointer; z-index: 100;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  transition: transform .15s, box-shadow .15s;
}
.btn-feedback:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(0,0,0,.4); }

/* Stern-Auswahl im Bewertungs-Modal */
.rate-stars { display: flex; gap: 4px; font-size: 30px; line-height: 1; cursor: pointer; }
.rate-star { color: var(--border, #444); transition: color .1s, transform .1s; user-select: none; }
.rate-star:hover { transform: scale(1.1); }
.rate-star.on { color: #f5b301; }

.modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 24px 0;
}
.modal-header h2 { margin: 0; font-size: 18px; }
.modal-close {
  background: none; border: none; font-size: 24px;
  cursor: pointer; color: var(--text-muted); line-height: 1;
}
.modal-body { padding: 16px 24px; }
.form-group { margin-bottom: 14px; }
.form-group label {
  display: block; font-size: 13px; font-weight: 600;
  margin-bottom: 6px; color: var(--text-2);
}
.form-select, .form-textarea, .form-input {
  width: 100%; padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text); font-size: 14px; font-family: inherit;
}
.form-textarea { resize: vertical; min-height: 80px; }
.form-select:focus, .form-textarea:focus, .form-input:focus {
  outline: none; border-color: var(--green); box-shadow: 0 0 0 2px var(--green-dim);
}

/* ── PingMon Logo Animation ── */
.pm-logo{width:64px;height:64px;display:block}
.pm-logo .ring{stroke-dasharray:1;stroke-dashoffset:1}
.pm-logo .dot,.pm-logo .hi,.pm-logo .ping,.pm-logo .glow{transform-box:fill-box;transform-origin:center}
.pm-logo .ping,.pm-logo .glow{opacity:0}

.pm-play .glow{animation:pm-glow .6s ease-out both}
.pm-play .ring{animation:pm-draw .65s ease-out both}
.pm-play .dot,.pm-play .hi{animation:pm-dot .5s cubic-bezier(.2,1.5,.3,1) .42s both}
.pm-play .ping.p1{animation:pm-ping 2.2s ease-out .75s infinite}
.pm-play .ping.p2{animation:pm-ping 2.2s ease-out 1.85s infinite}
.pm-play.pm-paused .ping{animation:none;opacity:0}

@keyframes pm-draw{to{stroke-dashoffset:0}}
@keyframes pm-dot{0%{opacity:0;transform:scale(0)}60%{opacity:1;transform:scale(1.3)}100%{transform:scale(1)}}
@keyframes pm-ping{0%{opacity:.5;transform:scale(.45)}70%{opacity:0}100%{opacity:0;transform:scale(2.8)}}
@keyframes pm-glow{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.pm-logo *{animation:none!important}.pm-logo .ring{stroke-dashoffset:0}.pm-logo .glow,.pm-logo .dot,.pm-logo .hi{opacity:1;transform:none}}

/* Logo-Größen je Container (überschreibt die 64px-Basis per Spezifität) */
.logo-badge {
  display: inline-flex;
  align-items: center; justify-content: center;
  flex-shrink: 0;
}
.logo-badge .pm-logo { width: 40px; height: 40px; }
.logo-wrap .pm-logo{width:48px;height:48px;flex-shrink:0}
.auth-logo .pm-logo{width:24px;height:24px;flex-shrink:0}


/* ===== PINGMON COWORK REBRAND: App-Override (Dashboard/Settings/Login/Reset) ===== */
/* ============================================================================
   PingMon — App-Bereich Brand-Override  (Dashboard, Settings, Login, Status)
   CSS-ONLY, appearance-only. An `style.css` anhängen.
   ----------------------------------------------------------------------------
   THEME-MECHANIK DER APP (bestätigt):
     <body class="dark">  = Default (dunkel)
     <body class="light"> = hell (Toggle: body.classList.toggle('light'))
   -> Wir hängen NICHT an [data-theme] oder prefers-color-scheme.
   -> Wir nutzen EURE Variablen (var(--bg) / var(--surface) / var(--text) /
      var(--green) / var(--red) / var(--yellow)); dadurch laufen hell/dunkel
      automatisch mit. Nur die Glow-/Schatten-Layer sind theme-unabhängig.
   Kein Layout, kein Markup, kein JS. (Sollte ein Variablenname abweichen,
   nur den var()-Namen anpassen — die Fallback-Werte greifen sonst.)
   ============================================================================ */

:root{ --pm-g500:#2fd18a; --pm-g600:#16a34a; --pm-g400:#3ee0a0; --pm-red:#e0655b; --pm-yellow:#d97706; }

/* ---- Seiten-Hintergrund: Hybrid (Glow + ausgefadete Dots) über eurem --bg ---- */
body::before{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(1200px 480px at 50% -12%, rgba(47,209,138,.10), transparent 70%); }
body::after{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1.4px); background-size:22px 22px;
  -webkit-mask-image:radial-gradient(125% 75% at 50% -8%, #000, rgba(0,0,0,.5) 38%, transparent 78%);
          mask-image:radial-gradient(125% 75% at 50% -8%, #000, rgba(0,0,0,.5) 38%, transparent 78%); }
body.light::after{ background-image:radial-gradient(circle, rgba(20,40,28,.06) 1px, transparent 1.4px); }
nav, main, aside, footer, .settings-layout{ position:relative; z-index:1; }

/* ---- Endpunkt- & Heartbeat-Karten ---- */
.card, .hb-card{
  background:radial-gradient(120% 90% at 50% -20%, rgba(47,209,138,.10), transparent 60%), var(--surface, #161616);
  border:1px solid rgba(47,209,138,.16); border-radius:18px;
  box-shadow:0 16px 30px -18px rgba(47,209,138,.28), inset 0 1px 0 rgba(255,255,255,.05);
}
/* Zustände (eure echten Klassen) — Left-Border-Konvention beibehalten, Glow ergänzt */
.card.is-up,   .hb-card.is-up   { border-left:3px solid var(--green, #2fd18a); }
.card.is-down, .hb-card.is-down {
  border-left:3px solid var(--red, #e0655b); border-color:rgba(224,101,91,.22);
  background:radial-gradient(120% 90% at 50% -20%, rgba(224,101,91,.12), transparent 60%),
             linear-gradient(135deg, rgba(224,101,91,.10) 0%, var(--surface, #161616) 55%);
  box-shadow:0 16px 30px -18px rgba(224,101,91,.32), inset 0 1px 0 rgba(255,255,255,.05);
}
.card.is-slow, .hb-card.is-slow {
  border-left:3px solid var(--yellow, #d97706); border-color:rgba(217,119,6,.22);
  background:radial-gradient(120% 90% at 50% -20%, rgba(217,119,6,.12), transparent 60%),
             linear-gradient(135deg, rgba(217,119,6,.10) 0%, var(--surface, #161616) 55%);
}
.card.unchecked, .hb-card.unchecked{ border-left:3px solid #6b7280; }

/* ---- Metrik-Karten oben ---- */
.metric-card{
  background:radial-gradient(120% 90% at 50% -20%, rgba(47,209,138,.06), transparent 60%), var(--surface, #161616);
  border:1px solid rgba(255,255,255,.07); border-radius:16px;
  box-shadow:0 14px 28px -20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04);
}

/* ---- Status-Page-Box im Dashboard ---- */
.sp-card{
  background:radial-gradient(80% 130% at 12% -10%, rgba(47,209,138,.10), transparent 60%), var(--surface, #161616);
  border:1px solid rgba(47,209,138,.14); border-radius:20px;
  box-shadow:0 22px 44px -28px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05);
}

/* ---- Detail-Panel + Modals ---- */
.panel, .modal-box{
  background:var(--surface, #161616);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.04);
}

/* ---- Buttons ---- */
.btn-primary, .plan-btn, .btn-checkout.plan-btn{
  background-image:linear-gradient(180deg, var(--pm-g500), var(--pm-g600));
  border:1px solid var(--pm-g600); color:#06210f;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 14px 24px -12px rgba(47,209,138,.6);
}

/* ---- Settings: Billing-Karten + Nav ---- */
.billing-plan-card{
  background:var(--surface, #161616); border:1px solid rgba(255,255,255,.08); border-radius:16px;
  box-shadow:0 16px 30px -24px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.04);
}
.billing-plan-card.billing-plan-featured{
  background:radial-gradient(120% 85% at 50% -12%, rgba(47,209,138,.20), transparent 60%), var(--surface, #161616);
  border:2px solid var(--pm-g500);
  box-shadow:0 28px 52px -24px rgba(47,209,138,.6), inset 0 1px 0 rgba(255,255,255,.05);
}
.settings-nav-item.active{ color:var(--pm-g500); }

/* ---- Login-Box + Tabs ---- */
.auth-box{
  background:radial-gradient(120% 90% at 50% -20%, rgba(47,209,138,.10), transparent 60%), var(--surface, #161616);
  border:1px solid rgba(47,209,138,.14); border-radius:18px;
  box-shadow:0 30px 60px -28px rgba(47,209,138,.4), inset 0 1px 0 rgba(255,255,255,.05);
}
.tab.active{ color:var(--pm-g500); }

/* ---- Optionale Dynamik (css/pingmon-motion.css) + weicher Theme-Wechsel
        (css/pingmon-theme-transition.css) separat einbinden. ---- */

/* ===== PINGMON COWORK REBRAND: Weicher Theme-Wechsel (Option A, ohne JS) ===== */
body,
.card, .hb-card, .metric-card, .sp-card, .panel, .modal-box,
nav, aside, .settings-layout, .auth-box, input, select, textarea,
.btn-primary, .plan-btn, .billing-plan-card, .tab{
  transition: background-color .38s ease, color .38s ease,
              border-color .38s ease, box-shadow .38s ease;
}
@media (prefers-reduced-motion: reduce){
  body, .card, .hb-card, .metric-card, .sp-card, .panel, .modal-box,
  nav, aside, .settings-layout, .auth-box, input, select, textarea,
  .btn-primary, .plan-btn, .billing-plan-card, .tab{ transition:none; }
}

/* ===== PINGMON COWORK REBRAND: Mockup-Niveau Verstärkung (Teil 1) =====
   WICHTIG: theme-gescopet (body.dark/body.light), weil die Original-Regeln
   `body.dark .card` etc. (Spezifität 0,2,1) die schlichten Cowork-Selektoren
   sonst überschreiben — DAS war der Grund für "zu subtil". Additiv, kein Markup/JS. */

/* ---- Hintergrund: Hybrid-Glow oben kräftiger + Dots minimal präsenter ---- */
body::before{ background:radial-gradient(1200px 540px at 50% -12%, rgba(47,209,138,.14), transparent 70%); }
body.dark::after{ background-image:radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1.4px); }

/* ---- Endpunkt-/HB-Karten: Basis plastischer + Hover-Lift ---- */
body.dark .card, body.dark .hb-card{
  background:radial-gradient(130% 100% at 50% -25%, rgba(47,209,138,.06), transparent 60%), #161616;
  border:1px solid rgba(47,209,138,.10); border-top:1px solid rgba(47,209,138,.10); border-radius:16px;
  box-shadow:0 18px 34px -22px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
}
.card, .hb-card{ transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background-color .38s ease; }
.card:hover, .hb-card:hover{ transform:translateY(-3px); }

/* ONLINE — voller grüner Verlauf + Glow + Akzent (beide Themes) */
body.dark .card.is-up, body.dark .hb-card.is-up{
  border:1px solid rgb(var(--st-up-rgb) / .30); border-left:3px solid var(--st-up);
  background:radial-gradient(130% 100% at 50% -20%, rgb(var(--st-up-rgb) / .22), transparent 60%),
            linear-gradient(165deg, rgb(var(--st-up-rgb) / .06) 0%, #16191b 60%);
  box-shadow:0 20px 40px -18px rgb(var(--st-up-rgb) / .55), inset 0 1px 0 rgba(255,255,255,.06);
}
body.dark .card.is-up:hover, body.dark .hb-card.is-up:hover{ box-shadow:0 26px 48px -18px rgb(var(--st-up-rgb) / .72), inset 0 1px 0 rgba(255,255,255,.07); }
body.light .card.is-up, body.light .hb-card.is-up{
  border:1px solid rgb(var(--st-up-rgb) / .22); border-left:3px solid var(--st-up);
  background:radial-gradient(130% 100% at 50% -20%, rgb(var(--st-up-rgb) / .12), transparent 60%),
            linear-gradient(165deg, #f0fdf4 0%, #ffffff 60%);
  box-shadow:0 16px 30px -18px rgb(var(--st-up-rgb) / .35), inset 0 1px 0 rgba(255,255,255,.8);
}

/* OFFLINE — roter Verlauf + Glow */
body.dark .card.is-down, body.dark .hb-card.is-down{
  border:1px solid rgb(var(--st-down-rgb) / .34); border-left:3px solid var(--st-down);
  background:radial-gradient(130% 100% at 50% -20%, rgb(var(--st-down-rgb) / .22), transparent 60%),
            linear-gradient(165deg, rgb(var(--st-down-rgb) / .08) 0%, #1a1617 60%);
  box-shadow:0 20px 40px -18px rgb(var(--st-down-rgb) / .55), inset 0 1px 0 rgba(255,255,255,.06);
}
body.light .card.is-down, body.light .hb-card.is-down{
  border:1px solid rgb(var(--st-down-rgb) / .28); border-left:3px solid var(--st-down);
  background:radial-gradient(130% 100% at 50% -20%, rgb(var(--st-down-rgb) / .10), transparent 60%),
            linear-gradient(165deg, #fef2f2 0%, #ffffff 60%);
  box-shadow:0 16px 30px -18px rgb(var(--st-down-rgb) / .32), inset 0 1px 0 rgba(255,255,255,.8);
}

/* SLOW — amber Verlauf */
body.dark .card.is-slow, body.dark .hb-card.is-slow{
  border:1px solid rgb(var(--st-degraded-rgb) / .34); border-left:3px solid var(--st-degraded);
  background:radial-gradient(130% 100% at 50% -20%, rgb(var(--st-degraded-rgb) / .20), transparent 60%),
            linear-gradient(165deg, rgb(var(--st-degraded-rgb) / .08) 0%, #1a1714 60%);
  box-shadow:0 20px 40px -18px rgb(var(--st-degraded-rgb) / .45), inset 0 1px 0 rgba(255,255,255,.06);
}
body.light .card.is-slow, body.light .hb-card.is-slow{
  border:1px solid rgb(var(--st-degraded-rgb) / .26); border-left:3px solid var(--st-degraded);
  background:radial-gradient(130% 100% at 50% -20%, rgb(var(--st-degraded-rgb) / .10), transparent 60%),
            linear-gradient(165deg, #fffbeb 0%, #ffffff 60%);
  box-shadow:0 16px 30px -18px rgb(var(--st-degraded-rgb) / .3), inset 0 1px 0 rgba(255,255,255,.8);
}
body.dark .card.unchecked, body.dark .hb-card.unchecked{ border-left:3px solid #6b7280; }

/* Status-Punkt in den Karten: Glow-Ring */
.status-dot.dot-up{ box-shadow:0 0 0 4px var(--st-up-dim); }
.status-dot.dot-down{ box-shadow:0 0 0 4px var(--st-down-dim); }
.status-dot.dot-slow{ box-shadow:0 0 0 4px var(--st-degraded-dim); }

/* ---- Metrik-Karten: plastischer + grüner Top-Glow ---- */
body.dark .metric-card{
  background:radial-gradient(120% 100% at 50% -30%, rgba(47,209,138,.12), transparent 60%), #161616;
  border:1px solid rgba(47,209,138,.12); border-radius:16px;
  box-shadow:0 18px 36px -24px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05);
}
body.light .metric-card{
  background:radial-gradient(120% 100% at 50% -30%, rgba(47,209,138,.10), transparent 60%), #ffffff;
  border:1px solid rgba(47,209,138,.14); border-radius:16px;
  box-shadow:0 16px 30px -22px rgba(16,40,26,.22), inset 0 1px 0 rgba(255,255,255,.8);
}

/* ---- Status-Sektion: Spotlight stärker ---- */
body.dark .sp-card, body.dark #sp-box{
  background:radial-gradient(70% 130% at 10% -10%, rgba(47,209,138,.16), transparent 60%), linear-gradient(180deg,#16191b,#121517);
  border:1px solid rgba(47,209,138,.18); border-radius:20px;
  box-shadow:0 26px 50px -28px rgba(47,209,138,.4), inset 0 1px 0 rgba(255,255,255,.06);
}
body.light .sp-card, body.light #sp-box{
  background:radial-gradient(70% 130% at 10% -10%, rgba(47,209,138,.12), transparent 60%), #ffffff;
  border:1px solid rgba(47,209,138,.16); border-radius:20px;
  box-shadow:0 22px 44px -30px rgba(47,209,138,.3), inset 0 1px 0 rgba(255,255,255,.8);
}

/* ---- Primär-Buttons: kräftigerer Glow + Hover ---- */
.btn-primary, .plan-btn, .btn-checkout.plan-btn{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 16px 28px -12px rgba(47,209,138,.7);
}
.btn-primary:hover, .plan-btn:hover, .btn-checkout.plan-btn:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 20px 34px -12px rgba(47,209,138,.85);
}
/* Featured Billing-Karte: stärkerer Glow */
.billing-plan-card.billing-plan-featured{ box-shadow:0 30px 58px -22px rgba(47,209,138,.7), inset 0 1px 0 rgba(255,255,255,.06); }

/* ===== Motion (Teil 2) — nur Dashboard, sparsam. Grün dauerhaft / Rot endlich.
   Keyframes kommen aus pingmon-motion.css (global per <link>). Sheen läuft über
   die Klasse .pm-anim-sheen an #sp-box. Live/Alert hier per CSS, weil die Karten
   von JS erzeugt werden (kein Klassen-Eingriff möglich). ===== */
#cards > .card:first-child .status-dot.dot-up{ position:relative; }
#cards > .card:first-child .status-dot.dot-up::after{
  content:""; position:absolute; inset:-3px; border-radius:50%; pointer-events:none;
  border:2px solid rgb(var(--st-up-rgb) / .5); animation:pm-live 2.8s ease-out infinite;
}
.card.is-down, .hb-card.is-down{ animation:pm-alert 1s ease-out 3; }
@media (prefers-reduced-motion: reduce){
  #cards > .card:first-child .status-dot.dot-up::after{ animation:none; }
  .card.is-down, .hb-card.is-down{ animation:none; }
}

/* ===== PINGMON COWORK REBRAND: Mockup-Feinschliff — Karten-Akzentlinie + Spotlight =====
   Repliziert den Foundation-".pm-card"-Look direkt auf den ECHTEN Klassen
   (.card/.hb-card sind JS-generiert → keine Klassen-Ergänzung möglich; Foundation
   global laden würde den Dark-Hintergrund kippen). Reines CSS, kein Markup/JS. */

/* Dünne Akzentlinie oben (wie .pm-card::before im Mockup) */
.card.is-up::before,   .hb-card.is-up::before,
.card.is-down::before, .hb-card.is-down::before,
.card.is-slow::before, .hb-card.is-slow::before{
  content:""; position:absolute; left:16px; right:16px; top:0; height:2px;
  border-radius:0 0 4px 4px; pointer-events:none; opacity:.6;
}
.card.is-up::before,   .hb-card.is-up::before  { background:linear-gradient(90deg,transparent,var(--st-up-line),transparent); }
.card.is-down::before, .hb-card.is-down::before{ background:linear-gradient(90deg,transparent,var(--st-down-line),transparent); }
.card.is-slow::before, .hb-card.is-slow::before{ background:linear-gradient(90deg,transparent,var(--st-degraded-line),transparent); }

/* Metrik-Zahlen etwas präsenter */
.metric-value{ font-size:30px; }

/* Status-Sektion: Spotlight intensiver */
body.dark .sp-card, body.dark #sp-box{
  background:radial-gradient(80% 120% at 6% 30%, rgba(47,209,138,.13), transparent 65%), linear-gradient(180deg,#16191b,#111417);
  border:1px solid rgba(47,209,138,.22);
  box-shadow:0 28px 54px -26px rgba(47,209,138,.5), inset 0 1px 0 rgba(255,255,255,.06);
}
body.light .sp-card, body.light #sp-box{
  background:radial-gradient(72% 135% at 8% -12%, rgba(47,209,138,.16), transparent 58%), #ffffff;
  border:1px solid rgba(47,209,138,.20);
  box-shadow:0 24px 48px -28px rgba(47,209,138,.38), inset 0 1px 0 rgba(255,255,255,.8);
}

/* ===== PINGMON COWORK REBRAND: pm-card / pm-stat: echte Cowork-Hooks =====
   Getragen vom Token in app.js (Karten) + index.html (Metrik). Gleicher Look
   wie .card/.metric-card — die Cowork-Foundation greift jetzt über die
   offiziellen Klassennamen. Zustände (.is-up/.is-down/.is-slow) gewinnen per
   höherer Spezifität und liefern den Voll-Verlauf. Kein Markup-Risiko. */
.pm-card{ position:relative; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background-color .38s ease; }
.pm-card:hover{ transform:translateY(-3px); }
body.dark .pm-card{
  background:radial-gradient(130% 100% at 50% -25%, rgba(47,209,138,.06), transparent 60%), #161616;
  border:1px solid rgba(47,209,138,.10); border-radius:16px;
  box-shadow:0 18px 34px -22px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
}
body.light .pm-card{
  background:radial-gradient(130% 100% at 50% -25%, rgba(47,209,138,.06), transparent 60%), #ffffff;
  border:1px solid rgba(47,209,138,.12); border-radius:16px;
  box-shadow:0 16px 30px -22px rgba(16,40,26,.2), inset 0 1px 0 rgba(255,255,255,.8);
}
body.dark .pm-stat{
  background:radial-gradient(120% 100% at 50% -30%, rgba(47,209,138,.12), transparent 60%), #161616;
  border:1px solid rgba(47,209,138,.12); border-radius:16px;
  box-shadow:0 18px 36px -24px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05);
}
body.light .pm-stat{
  background:radial-gradient(120% 100% at 50% -30%, rgba(47,209,138,.10), transparent 60%), #ffffff;
  border:1px solid rgba(47,209,138,.14); border-radius:16px;
  box-shadow:0 16px 30px -22px rgba(16,40,26,.22), inset 0 1px 0 rgba(255,255,255,.8);
}

/* ===== PINGMON COWORK REBRAND: Cowork Card-Tokens (body.dark-gehookt) =====
   Foundation-Tokens als CSS-Variablen — bewusst unter :root (hell) und body.dark
   (dunkel), NICHT [data-theme="dark"], weil PingMon body.dark nutzt. Dadurch
   greifen die Glows im Dark Mode korrekt. */
:root{
  --card-bg:radial-gradient(120% 90% at 50% -20%, rgba(47,209,138,.10), transparent 60%), linear-gradient(165deg,#ffffff 0%,#fafcfb 100%);
  --card-border:rgba(20,40,28,.08);
  --card-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(16,32,22,.04), 0 14px 28px -18px rgba(16,40,26,.28);
  --card-online-bg:radial-gradient(120% 90% at 50% -20%, rgba(47,209,138,.18), transparent 60%), linear-gradient(165deg,#ffffff 0%,#f0fdf4 52%,#dcfce7 100%);
  --card-online-border:rgba(47,209,138,.22);
  --card-online-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 1px 2px rgba(16,32,22,.04), 0 16px 30px -16px rgba(47,209,138,.42);
  --card-error-bg:radial-gradient(120% 90% at 50% -20%, rgba(224,101,91,.18), transparent 60%), linear-gradient(165deg,#ffffff 0%,#fef2f2 52%,#fee2e2 100%);
  --card-error-border:rgba(224,101,91,.26);
  --card-error-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 1px 2px rgba(32,16,16,.04), 0 16px 30px -16px rgba(224,101,91,.44);
}
body.dark{
  --card-bg:radial-gradient(120% 90% at 50% -20%, rgba(74,222,128,.08), transparent 60%), linear-gradient(165deg,#15181a 0%,#121517 100%);
  --card-border:rgba(255,255,255,.08);
  --card-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.4), 0 18px 34px -20px rgba(0,0,0,.7);
  --card-online-bg:radial-gradient(120% 90% at 50% -20%, rgba(74,222,128,.18), transparent 60%), linear-gradient(165deg,#16191b 0%,#142019 100%);
  --card-online-border:rgba(91,201,140,.30);
  --card-online-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.4), 0 18px 34px -16px rgba(47,209,138,.6);
  --card-error-bg:radial-gradient(120% 90% at 50% -20%, rgba(244,108,103,.18), transparent 60%), linear-gradient(165deg,#1a1617 0%,#241416 100%);
  --card-error-border:rgba(224,101,91,.34);
  --card-error-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.4), 0 18px 34px -16px rgba(224,101,91,.6);
}

/* PIN-198 Nachbesserung: Metrik-Tiles (#metric-up/#metric-down) folgen der CVD-/HC-
   Palette statt fixem Grün/Rot. Muss NACH den body.dark --card-*-Defaults stehen, um
   sie zu schlagen (gleiche Spezifität → Quelltext-Reihenfolge). var(--surface) macht
   den Grund themen-tauglich, sodass EIN Wertsatz je Modus Hell+Dunkel abdeckt. Ohne
   aktiven Modus komplett unberührt → Standard-Look byte-identisch. */
body.contrast{
  --card-online-bg:radial-gradient(120% 90% at 50% -20%, rgba(0,230,118,.20), transparent 60%), var(--surface);
  --card-online-border:rgba(0,230,118,.34);
  --card-online-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.4), 0 16px 30px -16px rgba(0,230,118,.55);
  --card-error-bg:radial-gradient(120% 90% at 50% -20%, rgba(255,82,82,.20), transparent 60%), var(--surface);
  --card-error-border:rgba(255,82,82,.34);
  --card-error-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.4), 0 16px 30px -16px rgba(255,82,82,.55);
}
body.cvd-protan{
  --card-online-bg:radial-gradient(120% 90% at 50% -20%, rgba(0,114,178,.18), transparent 60%), var(--surface);
  --card-online-border:rgba(0,114,178,.30);
  --card-online-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.4), 0 16px 30px -16px rgba(0,114,178,.5);
  --card-error-bg:radial-gradient(120% 90% at 50% -20%, rgba(208,47,47,.18), transparent 60%), var(--surface);
  --card-error-border:rgba(208,47,47,.30);
  --card-error-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.4), 0 16px 30px -16px rgba(208,47,47,.5);
}
body.cvd-deutan{
  --card-online-bg:radial-gradient(120% 90% at 50% -20%, rgba(26,111,176,.18), transparent 60%), var(--surface);
  --card-online-border:rgba(26,111,176,.30);
  --card-online-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.4), 0 16px 30px -16px rgba(26,111,176,.5);
  --card-error-bg:radial-gradient(120% 90% at 50% -20%, rgba(204,51,17,.18), transparent 60%), var(--surface);
  --card-error-border:rgba(204,51,17,.30);
  --card-error-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.4), 0 16px 30px -16px rgba(204,51,17,.5);
}
body.cvd-tritan{
  --card-online-bg:radial-gradient(120% 90% at 50% -20%, rgba(15,122,61,.18), transparent 60%), var(--surface);
  --card-online-border:rgba(15,122,61,.30);
  --card-online-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.4), 0 16px 30px -16px rgba(15,122,61,.5);
  --card-error-bg:radial-gradient(120% 90% at 50% -20%, rgba(196,32,32,.18), transparent 60%), var(--surface);
  --card-error-border:rgba(196,32,32,.30);
  --card-error-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.4), 0 16px 30px -16px rgba(196,32,32,.5);
}

/* Metrik-Karten semantisch: Online=grün, Offline=rot, Antwortzeit=neutral.
   Per ID (Spezifität 1,0,0) gewinnen sie sicher; Variablen schalten Theme automatisch. */
#metric-up   { background-image:var(--card-online-bg); border:1px solid var(--card-online-border); box-shadow:var(--card-online-shadow); }
#metric-down { background-image:var(--card-error-bg);  border:1px solid var(--card-error-border);  box-shadow:var(--card-error-shadow); }
#metric-avg  { background-image:var(--card-bg);        border:1px solid var(--card-border);        box-shadow:var(--card-shadow); }

/* ===== PINGMON COWORK REBRAND: Status-Box Zustands-Glow =====
   #sp-box bekommt data-status (operational|degraded|down) vom JS (loadPublicStatus).
   operational/leer = grün (bestehende sp-card-Regel). Spezifität ID+Attr gewinnt
   über body.dark #sp-box. Dauer-Schimmer nur auf grün; Down endlich gepulst. */
body.dark #sp-box[data-status="degraded"]{
  background:radial-gradient(80% 120% at 6% 30%, rgba(217,119,6,.14), transparent 65%), linear-gradient(180deg,#1a1712,#13110d);
  border:1px solid rgba(217,119,6,.32);
  box-shadow:0 28px 54px -26px rgba(217,119,6,.5), inset 0 1px 0 rgba(255,255,255,.05);
}
body.light #sp-box[data-status="degraded"]{
  background:radial-gradient(72% 135% at 8% -12%, rgba(217,119,6,.16), transparent 58%), #fffbeb;
  border:1px solid rgba(217,119,6,.28);
  box-shadow:0 24px 48px -28px rgba(217,119,6,.4), inset 0 1px 0 rgba(255,255,255,.8);
}
body.dark #sp-box[data-status="down"]{
  background:radial-gradient(80% 120% at 6% 30%, rgba(224,101,91,.15), transparent 65%), linear-gradient(180deg,#1a1516,#130e0e);
  border:1px solid rgba(224,101,91,.36);
  box-shadow:0 28px 54px -26px rgba(224,101,91,.55), inset 0 1px 0 rgba(255,255,255,.05);
}
body.light #sp-box[data-status="down"]{
  background:radial-gradient(72% 135% at 8% -12%, rgba(224,101,91,.16), transparent 58%), #fef2f2;
  border:1px solid rgba(224,101,91,.30);
  box-shadow:0 24px 48px -28px rgba(224,101,91,.42), inset 0 1px 0 rgba(255,255,255,.8);
}
/* Dauer-Schimmer NUR auf grün: bei amber/rot den Sheen-Layer KOMPLETT ausblenden.
   (Nur animation:none würde den schrägen Streifen am Startpunkt left:-60% "parken"
   → statische weiße Kante oben links. Daher display:none.) */
#sp-box[data-status="degraded"]::after, #sp-box[data-status="down"]::after{ display:none; }
/* Down: einmaliger, endlicher Aufmerksamkeits-Puls (3x) — kein Dauerblinken */
#sp-box[data-status="down"]{ animation:pm-alert 1s ease-out 3; }
@media (prefers-reduced-motion: reduce){ #sp-box[data-status="down"]{ animation:none; } }

/* ===== PINGMON COWORK REBRAND: Header-Polish (Tiefe + Marke) =====
   Header wirkte v.a. im Light Mode nackt/steril. Subtiler grüner Hauch +
   Frost + Tiefe — kein Overload. Marken-Grün #2fd18a (konsistent zur Seite). */
/* Dunkler App-Header (Dashboard): grünen Glow sichtbarer */
header{
  border-bottom:1px solid rgba(47,209,138,.12);
  box-shadow:0 1px 0 rgba(47,209,138,.10), 0 4px 20px -2px rgba(0,0,0,.35);
}
/* Heller App-Header (Settings/Login/Light Mode): Frost + grüner Hauch statt Weiß */
body.light header{
  background:linear-gradient(180deg, rgba(255,255,255,.93), rgba(246,251,248,.85));
  border-bottom:1px solid rgba(47,209,138,.14);
  box-shadow:0 1px 0 rgba(47,209,138,.07), 0 8px 26px -18px rgba(16,40,26,.16);
  backdrop-filter:blur(16px) saturate(1.25);
  -webkit-backdrop-filter:blur(16px) saturate(1.25);
}

/* ===== PINGMON COWORK REBRAND: Header-Emoji-Buttons als Chips =====
   Emoji-Icons (Sprache/Theme/Logout) im Header in saubere Chip-Kästchen wie die
   Feature-Icons der Landing — etwas größer. Nur im <header>, nicht der Primär-
   Button (+Endpunkt) und nicht das Modal-✕ (das ist außerhalb des Headers). */
header .btn-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; padding:0;
  font-size:18px; color:var(--text);
  background:radial-gradient(120% 120% at 30% 15%, rgba(47,209,138,.16), transparent 70%),
            linear-gradient(180deg, var(--surface-2), var(--surface-3));
  border:1px solid rgba(47,209,138,.24); border-radius:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 2px 6px -2px rgba(0,0,0,.3);
}
header .btn-icon:hover{
  color:var(--text);
  border-color:rgba(47,209,138,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 4px 10px -3px rgba(47,209,138,.3);
}

/* ── Tages-Uptime-Balken (Detail-Panel, Kuma-Style) ── */
.daily-bars { display: flex; gap: 2px; align-items: flex-end; }
.daily-bar {
  flex: 1; height: 24px; min-width: 0; border-radius: 2px;
  position: relative; cursor: default;
}
@media (max-width: 480px) {
  .daily-bars { gap: 1px; }
  .daily-bar { height: 20px; border-radius: 1px; }
}
.daily-bar.day-up      { background: var(--st-up);  opacity: .75; }
.daily-bar.day-partial { background: var(--st-degraded); opacity: .75; }
.daily-bar.day-down    { background: var(--st-down);    opacity: .75; }
.daily-bar.day-empty   { background: var(--border); }
.daily-bar:hover { opacity: 1; }
.daily-bar:hover::after {
  content: attr(data-tip);
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  background: #000; color: #fff; padding: 4px 8px; border-radius: 5px;
  font-size: 11px; white-space: nowrap; pointer-events: none; z-index: 10;
}
.daily-bars-labels {
  display: flex; justify-content: space-between;
  margin-top: 6px; font-size: 11px; color: var(--text-muted);
}

/* ── Incident-Verwaltung (Status-Page v2) ── */
.modal-incident-box { max-width: 560px; }
.inc-empty { color: var(--text-muted); font-size: 13px; margin: 4px 0 16px; }
.inc-item {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 10px; background: var(--surface-2);
}
.inc-item.inc-resolved { opacity: .6; }
.inc-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inc-title { flex: 1; font-size: 13px; min-width: 120px; }
.inc-badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); }
.inc-date { font-size: 11px; color: var(--text-muted); }
.inc-del {
  background: none; border: 1px solid var(--border); color: var(--text-muted);
  border-radius: 6px; padding: 2px 8px; cursor: pointer; font-size: 12px;
}
.inc-del:hover { color: var(--red); border-color: var(--red); }
.inc-updates { margin-top: 8px; }
.inc-update { font-size: 12px; color: var(--text-2); margin: 4px 0; padding-left: 10px; border-left: 2px solid var(--border-2); }
.inc-utime { color: var(--text-muted); margin-right: 6px; }
.inc-ubadge { font-weight: 600; margin-right: 6px; }
.inc-update-form { display: flex; gap: 8px; margin-top: 10px; align-items: center; flex-wrap: wrap; }
.inc-update-form .form-select { width: auto; padding: 6px 10px; font-size: 12px; }
.inc-update-form .form-input { flex: 1; min-width: 140px; padding: 6px 10px; font-size: 12px; }
.inc-new-title { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .6px; margin: 18px 0 12px; font-weight: 600; }
.inc-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.inc-feedback { font-size: 12px; margin-bottom: 10px; }
.inc-feedback.feedback-ok { color: var(--green-text); }
.inc-feedback.feedback-err { color: var(--red); }

/* ── Cron-Hilfetext im Heartbeat-Formular ── */
.hb-cron-help { display: block; margin-top: 6px; font-size: 11px; color: var(--text-muted); line-height: 1.6; }
.hb-cron-help code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; color: var(--text-2); }

/* ── Cron-Segmente: 5 Mini-Felder, Leerzeichen setzt das UI ── */
.cron-segments { display: flex; gap: 6px; }
.cron-seg { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cron-seg input {
  width: 100%; text-align: center; padding: 8px 4px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-family: 'Fira Code', 'Consolas', monospace; font-size: 13px;
}
.cron-seg input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 2px var(--green-dim); }
.cron-seg small { text-align: center; font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }

/* ── Monitor-Typ-Chip (TCP/PING) auf den Karten ── */
.type-chip {
  display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: .5px;
  padding: 1px 6px; border-radius: 4px; background: var(--surface-3);
  color: var(--text-2); vertical-align: 1px;
}

/* ── Kunden-Gruppierung: Filter-Select + Karten-Chip ── */
.cust-filter { width: auto; min-width: 150px; cursor: pointer; }
.customer-chip {
  text-transform: none; letter-spacing: 0; font-weight: 600;
  background: rgba(47,209,138,.12); color: #2fd18a;
}
/* Bereichs-Chip (PIN-396): steht neben dem Kunden-Chip, aber bewusst neutral —
   der Kunde ist die Hauptzuordnung, der Bereich seine Unterebene. */
.bereich-chip {
  text-transform: none; letter-spacing: 0; font-weight: 600;
  background: rgba(148,163,184,.14); color: var(--text-2);
}

/* Dezentes „intern"-Badge (PIN-88): gedämpft, KEIN Status-Grün/Rot. */
.ep-badge-internal {
  display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase;
  padding: 1px 6px; border-radius: 4px;
  background: var(--surface-2); color: var(--text-2);
  border: 1px solid var(--border); vertical-align: 1px;
}

/* Gruppen-Kopfzeile in der Gesamtübersicht: volle Grid-Breite, dezente Trennlinie.
   Subtil halten — „leichte Linie", keine fette Sektion (Wunsch Dario). */
.client-group-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-2);
}
/* Erster Header oben: keine Linie/kein Abstand nach oben (sitzt direkt an der Toolbar). */
.client-group-header.is-first {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.client-group-header .cg-name {
  font-weight: 600;
  letter-spacing: .2px;
}
.client-group-header .cg-count { color: var(--text-muted); }

/* ── Trust-Badge: „Monitored by PingMon Germany" (Dashboard-Footer) ──
   Nutzt die Theme-Variablen → funktioniert in Dark UND Light automatisch. */
.dash-footer { display: flex; justify-content: center; padding: 26px 16px 34px; position: relative; z-index: 1; }
.pm-trustbadge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface);
  font-size: 13px; color: var(--text-2); text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
.pm-trustbadge:hover { border-color: var(--green); box-shadow: 0 2px 10px rgba(47,209,138,.12); }
.pm-tb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); flex: none; }
.pm-tb-loading .pm-tb-dot { animation: pmTbPulse 1.2s ease-in-out infinite; }
.pm-tb-operational .pm-tb-dot { background: #2fd18a; box-shadow: 0 0 0 3px rgba(47,209,138,.15); }
.pm-tb-degraded   .pm-tb-dot { background: #e3a445; box-shadow: 0 0 0 3px rgba(227,164,69,.15); }
.pm-tb-down       .pm-tb-dot { background: #e0655b; box-shadow: 0 0 0 3px rgba(224,101,91,.15); }
.pm-tb-text strong { color: var(--text); font-weight: 600; }
.pm-tb-uptime { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pm-tb-uptime:empty { display: none; }
@keyframes pmTbPulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* ── KI-Analyse (AI Alert Summarization) ───────────────── */
/* Detail-Panel: grün akzentuierter Befund-Block (Marken-Grün wie die Alarm-Mail),
   dark-mode-tauglich via translucentem BG + var(--text). */
.ai-section .ai-text {
  margin: 0;
  padding: 12px 14px;
  background: rgba(47,209,138, .10);
  border-left: 3px solid #2fd18a;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}
/* Karte: dezentes, pulsierendes 🤖-Symbol als Hinweis "KI-Analyse vorhanden,
   zum Ansehen Karte anklicken". Voller Text nur im Detail-Panel. */
.card-ai-icon {
  margin-left: auto;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  flex: none;
  animation: aiPulse 1.6s ease-in-out infinite;
}
@keyframes aiPulse {
  0%, 100% { opacity: .5;  transform: scale(1);    filter: drop-shadow(0 0 1px rgba(47,209,138, 0)); }
  50%      { opacity: 1;   transform: scale(1.18); filter: drop-shadow(0 0 6px rgba(47,209,138, .75)); }
}
@media (prefers-reduced-motion: reduce) {
  .card-ai-icon { animation: none; opacity: 1; }
}

/* ── Response-Anomalie (Predictive light) — der „Wow"-Insight-Block ──────────
   Eigene violette Farbwelt, bewusst abgesetzt vom Marken-Grün (up) und Rot (down):
   Violett = „schlau / Predictive". Der Block lebt durch einen sanft driftenden
   Lichtschimmer + ein schwebendes Icon → lädt zum Hinschauen & Klicken ein. */
.anomaly-section { border-bottom: 0; }
.anomaly-card {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  padding: 16px 16px 15px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(168,85,247,.16), transparent 55%),
    linear-gradient(160deg, rgba(99,102,241,.16) 0%, rgba(168,85,247,.11) 52%, rgba(15,15,20,.34) 100%);
  border: 1px solid rgba(168,85,247,.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 30px -14px rgba(168,85,247,.55);
  animation: anomalyRing 4.5s ease-in-out infinite;
}
@keyframes anomalyRing {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 30px -14px rgba(168,85,247,.45); border-color: rgba(168,85,247,.30); }
  50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 40px -12px rgba(168,85,247,.72); border-color: rgba(168,85,247,.58); }
}
/* driftender Lichtschimmer im Hintergrund */
.anomaly-glow {
  position: absolute;
  width: 220px; height: 220px;
  top: -92px; right: -64px;
  background: radial-gradient(circle, rgba(168,85,247,.55), transparent 64%);
  filter: blur(20px);
  pointer-events: none;
  opacity: .6;
  animation: anomalyDrift 9s ease-in-out infinite;
}
@keyframes anomalyDrift {
  0%, 100% { transform: translate(0, 0) scale(1);      opacity: .55; }
  50%      { transform: translate(-28px, 24px) scale(1.18); opacity: .85; }
}
/* Pro-Trial Angebot-Banner: pulsierender violetter Glow (gleiche Farbwelt wie
   die Anomalie-Erkennung), damit das Gratis-Angebot heraussticht. */
#trial-banner.trial-glow { animation: trialGlow 2.4s ease-in-out infinite; }
@keyframes trialGlow {
  0%,100% { box-shadow: 0 6px 22px -10px rgba(139,92,246,.6); }
  50%     { box-shadow: inset 0 0 26px -6px rgba(255,255,255,.22), 0 12px 34px -6px rgba(139,92,246,.95); }
}
@media (prefers-reduced-motion: reduce) { #trial-banner.trial-glow { animation: none; } }

.anomaly-head { position: relative; display: flex; align-items: flex-start; gap: 12px; }
.anomaly-icon {
  font-size: 26px; line-height: 1; flex: none;
  filter: drop-shadow(0 0 9px rgba(168,85,247,.9));
  animation: anomalyFloat 3.2s ease-in-out infinite;
}
@keyframes anomalyFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-3px) rotate(-5deg); }
}
.anomaly-head-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.anomaly-title {
  font-weight: 700; font-size: 15px; letter-spacing: -.01em; color: #f3e8ff;
}
.anomaly-sub { font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.anomaly-tag {
  flex: none; align-self: flex-start;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
  color: #e9d5ff;
  background: linear-gradient(135deg, rgba(168,85,247,.5), rgba(99,102,241,.5));
  border: 1px solid rgba(196,181,253,.42);
}
.anomaly-ai {
  position: relative;
  margin-top: 12px; padding: 11px 13px; border-radius: 10px;
  background: rgba(10,10,14,.5);
  border: 1px solid rgba(168,85,247,.22);
}
.anomaly-ai-label {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #c4b5fd; margin-bottom: 5px;
}
.anomaly-ai-text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text); }
/* Upgrade-Hook (Free/Starter): KI-Ursache ab Pro */
.anomaly-lock {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 12px; padding: 10px 13px; border-radius: 10px;
  background: rgba(10,10,14,.5);
  border: 1px dashed rgba(168,85,247,.42);
  text-decoration: none;
  transition: border-color .2s, background .2s, transform .12s;
}
.anomaly-lock:hover { border-color: rgba(196,181,253,.72); background: rgba(168,85,247,.12); transform: translateY(-1px); }
.anomaly-lock-text { font-size: 13px; color: #e9d5ff; }
.anomaly-lock-cta {
  flex: none; font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap;
  padding: 5px 11px; border-radius: 999px;
  background: linear-gradient(135deg, #a855f7, #6366f1);
  box-shadow: 0 4px 14px -4px rgba(168,85,247,.8);
}
/* dezentes violettes Karten-Signal im Grid — die auffällige Karte „atmet" */
.card-anomaly-icon {
  margin-left: auto; font-size: 15px; line-height: 1; cursor: pointer; flex: none;
  filter: drop-shadow(0 0 5px rgba(168,85,247,.85));
  animation: anomalyIconPulse 1.8s ease-in-out infinite;
}
@keyframes anomalyIconPulse {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.16); }
}
/* Anomalie-Karte = KOMPLETT violette Box: alle grünen „Online"-Signale werden
   violett (Hintergrund-Tint, linke Leiste, Akzentlinie, Status-Punkt, „Online"-
   Label, Uptime-Badge) → man sieht auf einen Blick an der ganzen Box „hier ist was". */
.pm-card.has-anomaly,
body.dark .pm-card.has-anomaly {
  border: 1px solid rgba(168,85,247,.5);
  border-left: 3px solid #a855f7;
  background:
    radial-gradient(130% 100% at 50% -20%, rgba(168,85,247,.24), transparent 60%),
    linear-gradient(165deg, rgba(168,85,247,.08) 0%, #17151c 60%);
  animation: anomalyCardBreathe 3.6s ease-in-out infinite;
}
.pm-card.has-anomaly::before {
  background: linear-gradient(90deg, transparent, #c084fc, transparent) !important;
  opacity: .75 !important;
}
.pm-card.has-anomaly .status-dot,
.pm-card.has-anomaly .status-dot.dot-up {
  background: #a855f7;
  box-shadow: 0 0 0 4px rgba(168,85,247,.18), 0 0 8px rgba(168,85,247,.6);
}
.pm-card.has-anomaly .card-status-label { color: #c4b5fd; }
.pm-card.has-anomaly .uptime-badge { background: rgba(168,85,247,.16); color: #c4b5fd; }
@keyframes anomalyCardBreathe {
  0%, 100% { box-shadow: 0 0 0 1px rgba(168,85,247,.28), 0 8px 24px -14px rgba(168,85,247,.45); }
  50%      { box-shadow: 0 0 0 1px rgba(168,85,247,.55), 0 10px 32px -10px rgba(168,85,247,.78); }
}
@media (prefers-reduced-motion: reduce) {
  .anomaly-card, .anomaly-glow, .anomaly-icon, .card-anomaly-icon, .pm-card.has-anomaly { animation: none; }
}

/* ===== KARTEN-STATUS-GLOW „mehr Wumms" (Dario 24.06.) ============================
   Problem: body.dark .pm-card (Spez. 0,2,1) gewann über .card.is-down/.is-slow
   (0,2,0) → in Dark Mode sahen ALLE Karten gleich grün-getönt aus, egal ob
   online/offline. Lösung: status-spezifische Regeln mit höherer Spezifität
   (body.<theme> .card.is-X:not(.has-anomaly) = 0,4,1), die jeder Karte ihre
   Statusfarbe geben — Tint + farbiger Glow rund um die ganze Box + dicker
   linker Akzentbalken. Offline = stärker + sanfter Puls (Problem sticht raus).
   :not(.has-anomaly) lässt die violetten Anomalie-Karten unangetastet.
   Reines CSS, kein Markup/JS. ============================================== */

/* ── DARK MODE ──────────────────────────────────────────── */
body.dark .card.is-up:not(.has-anomaly) {
  background: radial-gradient(130% 100% at 50% -25%, rgb(var(--st-up-rgb) / .16), transparent 60%), #14181a;
  border: 1px solid rgb(var(--st-up-rgb) / .32);
  border-left: 3px solid var(--st-up);
  box-shadow: 0 16px 30px -22px rgba(0,0,0,.6), 0 0 22px -8px rgb(var(--st-up-rgb) / .34), inset 0 1px 0 rgba(255,255,255,.05);
}
body.dark .card.is-slow:not(.has-anomaly) {
  background: radial-gradient(130% 100% at 50% -25%, rgb(var(--st-degraded-rgb) / .20), transparent 60%), #1a1611;
  border: 1px solid rgb(var(--st-degraded-rgb) / .42);
  border-left: 3px solid var(--st-degraded);
  box-shadow: 0 16px 30px -22px rgba(0,0,0,.6), 0 0 24px -7px rgb(var(--st-degraded-rgb) / .42), inset 0 1px 0 rgba(255,255,255,.05);
}
body.dark .card.is-down:not(.has-anomaly) {
  background: radial-gradient(130% 100% at 50% -25%, rgb(var(--st-down-rgb) / .24), transparent 58%), #1c1315;
  border: 1px solid rgb(var(--st-down-rgb) / .58);
  border-left: 3px solid var(--st-down);
  box-shadow: 0 16px 30px -20px rgba(0,0,0,.65), 0 0 26px -6px rgb(var(--st-down-rgb) / .5), inset 0 1px 0 rgba(255,255,255,.04);
  animation: cardDownGlow 2.6s ease-in-out infinite;
}

/* ── LIGHT MODE ─────────────────────────────────────────── */
body.light .card.is-up:not(.has-anomaly) {
  background: radial-gradient(130% 100% at 50% -25%, rgb(var(--st-up-rgb) / .12), transparent 62%), #ffffff;
  border: 1px solid rgb(var(--st-up-rgb) / .28);
  border-left: 3px solid var(--st-up);
  box-shadow: 0 14px 26px -22px rgba(16,40,26,.22), 0 0 20px -10px rgb(var(--st-up-rgb) / .30), inset 0 1px 0 rgba(255,255,255,.8);
}
body.light .card.is-slow:not(.has-anomaly) {
  background: radial-gradient(130% 100% at 50% -25%, rgb(var(--st-degraded-rgb) / .16), transparent 62%), #ffffff;
  border: 1px solid rgb(var(--st-degraded-rgb) / .38);
  border-left: 3px solid var(--st-degraded);
  box-shadow: 0 14px 26px -22px rgba(16,40,26,.22), 0 0 22px -9px rgb(var(--st-degraded-rgb) / .38), inset 0 1px 0 rgba(255,255,255,.8);
}
body.light .card.is-down:not(.has-anomaly) {
  background: radial-gradient(130% 100% at 50% -25%, rgb(var(--st-down-rgb) / .18), transparent 60%), #ffffff;
  border: 1px solid rgb(var(--st-down-rgb) / .50);
  border-left: 3px solid var(--st-down);
  box-shadow: 0 14px 26px -20px rgba(40,16,16,.24), 0 0 24px -8px rgb(var(--st-down-rgb) / .45), inset 0 1px 0 rgba(255,255,255,.8);
  animation: cardDownGlow 2.6s ease-in-out infinite;
}

/* Akzentlinie oben kräftiger, wenn Karte einen Status trägt */
.card.is-up::before, .card.is-down::before, .card.is-slow::before { opacity: .9; }

/* Offline-Karte: sanfter, langsamer Puls des roten Glows (zieht den Blick) */
@keyframes cardDownGlow {
  0%, 100% { box-shadow: 0 16px 30px -20px rgba(0,0,0,.65), 0 0 20px -9px rgba(224,101,91,.40), inset 0 1px 0 rgba(255,255,255,.04); }
  50%      { box-shadow: 0 16px 30px -20px rgba(0,0,0,.65), 0 0 34px -4px rgba(224,101,91,.62), inset 0 1px 0 rgba(255,255,255,.04); }
}

/* ── Werkzeug-Reihe (⚡ ⎘ ⏸ ✏ 👤 🛡️) erst beim Hover — aufgeräumter Standard ──
   opacity statt display/height → kein Layout-Sprung. Favorit-Stern bleibt sichtbar
   (sitzt im card-header). Tastatur-Fokus (focus-within) zeigt sie ebenfalls.
   Touch-Geräte ohne Hover bekommen sie dauerhaft. */
.card .card-actions-row { opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.card:hover .card-actions-row,
.card:focus-within .card-actions-row { opacity: 1; pointer-events: auto; }
@media (hover: none) {
  .card .card-actions-row { opacity: 1; pointer-events: auto; }
}

/* Hover hebt die Karte klarer an + verstärkt den Glow (gilt für alle Status) */
body.dark .card.is-up:not(.has-anomaly):hover   { box-shadow: 0 22px 38px -22px rgba(0,0,0,.7), 0 0 30px -6px rgb(var(--st-up-rgb) / .5),        inset 0 1px 0 rgba(255,255,255,.06); }
body.dark .card.is-slow:not(.has-anomaly):hover  { box-shadow: 0 22px 38px -22px rgba(0,0,0,.7), 0 0 32px -5px rgb(var(--st-degraded-rgb) / .55), inset 0 1px 0 rgba(255,255,255,.06); }
body.light .card.is-up:not(.has-anomaly):hover   { box-shadow: 0 20px 34px -22px rgba(16,40,26,.28), 0 0 28px -8px rgb(var(--st-up-rgb) / .42),      inset 0 1px 0 rgba(255,255,255,.85); }
body.light .card.is-slow:not(.has-anomaly):hover { box-shadow: 0 20px 34px -22px rgba(16,40,26,.28), 0 0 30px -7px rgb(var(--st-degraded-rgb) / .5), inset 0 1px 0 rgba(255,255,255,.85); }

@media (prefers-reduced-motion: reduce) {
  .card.is-down:not(.has-anomaly) { animation: none; }
}

/* ===== ABLAUF-COCKPIT-BOXEN: Dringlichkeit trägt die ganze Box (Dario 24.06.) =====
   Vorher: alle Cockpit-Boxen sahen gleich grün-getönt aus (body.dark .pm-card
   gewann), die Dringlichkeit steckte nur in der kleinen Pille → „nur Kästen".
   Jetzt trägt die ganze Box ihre Ampelfarbe — rot (bald/abgelaufen) sticht mit
   Puls heraus, gelb = Warnung, ruhig grün = ok, neutral = kein Datum. Gleiche
   Logik wie der Endpunkt-Glow. Box-Status-Klasse kommt aus app.js
   (expiryCardStateClass). ================================================= */

/* ── DARK MODE ── */
body.dark .expiry-card.exp-critical {
  background: radial-gradient(130% 100% at 50% -25%, rgb(var(--st-down-rgb) / .22), transparent 58%), #1c1315;
  border: 1px solid rgb(var(--st-down-rgb) / .55);
  border-left: 3px solid var(--st-down);
  box-shadow: 0 14px 28px -22px rgba(0,0,0,.6), 0 0 24px -7px rgb(var(--st-down-rgb) / .46), inset 0 1px 0 rgba(255,255,255,.04);
  animation: cardDownGlow 2.6s ease-in-out infinite;
}
body.dark .expiry-card.exp-warn {
  background: radial-gradient(130% 100% at 50% -25%, rgb(var(--st-degraded-rgb) / .18), transparent 60%), #1a1611;
  border: 1px solid rgb(var(--st-degraded-rgb) / .40);
  border-left: 3px solid var(--st-degraded);
  box-shadow: 0 14px 28px -22px rgba(0,0,0,.6), 0 0 22px -8px rgb(var(--st-degraded-rgb) / .38), inset 0 1px 0 rgba(255,255,255,.05);
}
body.dark .expiry-card.exp-ok {
  background: radial-gradient(130% 100% at 50% -25%, rgb(var(--st-up-rgb) / .13), transparent 62%), #14181a;
  border: 1px solid rgb(var(--st-up-rgb) / .26);
  border-left: 3px solid var(--st-up);
  box-shadow: 0 14px 28px -22px rgba(0,0,0,.6), 0 0 18px -9px rgb(var(--st-up-rgb) / .26), inset 0 1px 0 rgba(255,255,255,.05);
}
body.dark .expiry-card.exp-neutral {
  border-left: 3px solid var(--text-muted);
}

/* ── LIGHT MODE ── */
body.light .expiry-card.exp-critical {
  background: radial-gradient(130% 100% at 50% -25%, rgb(var(--st-down-rgb) / .18), transparent 60%), #ffffff;
  border: 1px solid rgb(var(--st-down-rgb) / .50);
  border-left: 3px solid var(--st-down);
  box-shadow: 0 12px 24px -22px rgba(40,16,16,.24), 0 0 22px -8px rgb(var(--st-down-rgb) / .42), inset 0 1px 0 rgba(255,255,255,.8);
  animation: cardDownGlow 2.6s ease-in-out infinite;
}
body.light .expiry-card.exp-warn {
  background: radial-gradient(130% 100% at 50% -25%, rgb(var(--st-degraded-rgb) / .15), transparent 62%), #ffffff;
  border: 1px solid rgb(var(--st-degraded-rgb) / .38);
  border-left: 3px solid var(--st-degraded);
  box-shadow: 0 12px 24px -22px rgba(16,40,26,.2), 0 0 22px -9px rgb(var(--st-degraded-rgb) / .36), inset 0 1px 0 rgba(255,255,255,.8);
}
body.light .expiry-card.exp-ok {
  background: radial-gradient(130% 100% at 50% -25%, rgb(var(--st-up-rgb) / .1), transparent 62%), #ffffff;
  border: 1px solid rgb(var(--st-up-rgb) / .24);
  border-left: 3px solid var(--st-up);
  box-shadow: 0 12px 24px -22px rgba(16,40,26,.2), 0 0 16px -10px rgb(var(--st-up-rgb) / .24), inset 0 1px 0 rgba(255,255,255,.8);
}
body.light .expiry-card.exp-neutral {
  border-left: 3px solid var(--text-muted);
}

/* Hover: sanftes Anheben + Glow verstärken (Cursor bleibt default — keine Detail-Ansicht) */
.expiry-card:hover { transform: translateY(-2px); }
body.dark .expiry-card.exp-critical:hover  { box-shadow: 0 20px 34px -22px rgba(0,0,0,.7), 0 0 32px -5px rgb(var(--st-down-rgb) / .6),  inset 0 1px 0 rgba(255,255,255,.06); }
body.dark .expiry-card.exp-warn:hover      { box-shadow: 0 20px 34px -22px rgba(0,0,0,.7), 0 0 30px -6px rgb(var(--st-degraded-rgb) / .5), inset 0 1px 0 rgba(255,255,255,.06); }
body.dark .expiry-card.exp-ok:hover        { box-shadow: 0 20px 34px -22px rgba(0,0,0,.7), 0 0 26px -7px rgb(var(--st-up-rgb) / .4),  inset 0 1px 0 rgba(255,255,255,.06); }
body.light .expiry-card.exp-critical:hover { box-shadow: 0 18px 30px -22px rgba(40,16,16,.3), 0 0 28px -7px rgb(var(--st-down-rgb) / .5),  inset 0 1px 0 rgba(255,255,255,.85); }
body.light .expiry-card.exp-warn:hover     { box-shadow: 0 18px 30px -22px rgba(16,40,26,.26), 0 0 28px -8px rgb(var(--st-degraded-rgb) / .45), inset 0 1px 0 rgba(255,255,255,.85); }
body.light .expiry-card.exp-ok:hover       { box-shadow: 0 18px 30px -22px rgba(16,40,26,.26), 0 0 22px -9px rgb(var(--st-up-rgb) / .34), inset 0 1px 0 rgba(255,255,255,.85); }

/* ✕ Löschen erscheint erst beim Hover (aufgeräumt; nur manuelle Termine haben es) */
.expiry-card .expiry-del { opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.expiry-card:hover .expiry-del,
.expiry-card:focus-within .expiry-del { opacity: 1; pointer-events: auto; }
@media (hover: none) { .expiry-card .expiry-del { opacity: 1; pointer-events: auto; } }

@media (prefers-reduced-motion: reduce) {
  .expiry-card.exp-critical { animation: none; }
}

/* ===== Kunden verwalten — Liste im Modal (24.06.) ===== */
.manage-cust-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px 0 16px;
  max-height: 52vh;
  overflow-y: auto;
}
.manage-cust-empty {
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  padding: 14px 0 22px;
}
.manage-cust-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}
.manage-cust-main { display: flex; align-items: center; gap: 10px; }
.manage-cust-row.is-archived { opacity: .5; }
.manage-cust-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.manage-cust-name {
  font-weight: 600;
  font-size: 14px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.manage-cust-count {
  font-size: 12px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.manage-cust-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
/* Beschriftete Aktions-Buttons (Icon + Text) — klar statt nacktem Emoji */
.mc-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; line-height: 1; padding: 7px 12px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text);
  cursor: pointer; text-decoration: none;
}
.mc-btn:hover { background: var(--surface-2); border-color: var(--text-muted); }
.mc-btn.mc-status { color: var(--green-text); border-color: rgba(47,209,138,.4); }
.mc-btn.mc-status:hover { background: rgba(47,209,138,.1); }
.mc-btn.mc-report { color: var(--blue); border-color: rgba(94,166,218,.4); }
.mc-btn.mc-report:hover { background: var(--blue-dim); }
.mc-btn.mc-del:hover { color: var(--red); border-color: var(--red); background: rgba(224,101,91,.1); }
.manage-cust-logo {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 6px;
  border: 1px solid var(--border); background-color: var(--surface-2);
  background-size: contain; background-position: center; background-repeat: no-repeat;
}

/* ── Statusseiten-Übersicht (PIN-167): Agentur öffnet/teilt je Kunde + Gesamt ── */
.cockpit-head-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sp-ov-overall {
  border-color: color-mix(in srgb, var(--blue) 32%, var(--border));
  background: color-mix(in srgb, var(--blue) 6%, var(--surface-2));
}
.sp-ov-icon { font-size: 17px; width: 22px; text-align: center; flex-shrink: 0; }
.sp-ov-url { font-size: 12px; color: var(--text-muted); word-break: break-all; }
.sp-ov-none { font-size: 12.5px; color: var(--text-muted); align-self: center; margin-right: auto; }

/* ── Kunden-Logo-Upload (PIN-82 White-Label-Branding) ───────────────── */
.logo-field { margin: 14px 0; }
.field-label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.logo-upload { display: flex; align-items: center; gap: 14px; }
.logo-preview {
  width: 56px; height: 56px; flex-shrink: 0; box-sizing: border-box; padding: 5px;
  border-radius: 10px; border: 1px solid var(--border);
  background-color: var(--surface-2);
  /* Innerhalb des Innenabstands anzeigen → randfüllende Favicons wirken nicht abgeschnitten */
  background-size: contain; background-origin: content-box;
  background-position: center; background-repeat: no-repeat;
}
.logo-preview.is-empty { position: relative; }
.logo-preview.is-empty::after {
  content: "🖼"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; opacity: .35;
}
.logo-upload-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.logo-pick { cursor: pointer; margin: 0; }
.logo-hint { display: block; margin-top: 6px; font-size: 12px; color: var(--text-muted); }
.form-section-label { font-size: 13px; font-weight: 600; margin: 18px 0 2px; }
.modal-hint-sm { font-size: 12px; margin-bottom: 10px; }

/* ── Kunden-Modal: breiter, strukturiert, mobil (PIN-82/85, Politur 28.06.) ── */
#modal-customer .modal-box { max-width: 620px; }
/* 2-Spalten-Raster → weniger „hochkantig"; volle Breite via .cg-full */
.cust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; align-items: start; }
.cust-grid > .cg-full { grid-column: 1 / -1; }
/* Klar abgesetzte Abschnitte */
.cust-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.cust-section-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 4px; letter-spacing: .1px; }
.cust-section-title small { font-weight: 400; color: var(--text-muted); }

/* Farb-/Glow-Feld: gewählte Farbe bleibt als Balken + Hex sichtbar */
.color-field { display: flex; align-items: center; gap: 10px; }
.color-field input[type="color"] {
  width: 46px; height: 34px; padding: 2px; flex-shrink: 0; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
}
.color-bar { flex: 1; height: 14px; border-radius: 7px; border: 1px solid var(--border); background: #2fd18a; }
.color-hex { font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; flex-shrink: 0; min-width: 64px; }

/* White-Label-Sektion als abgesetzte Karte */
.sp-section { border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); padding: 16px 18px; margin-top: 18px; }
.sp-toggle { flex-direction: row; align-items: center; gap: 10px; margin: 12px 0; font-size: 14px; color: var(--text); font-weight: 500; cursor: pointer; }
.sp-toggle input { width: auto; margin: 0; flex-shrink: 0; width: 16px; height: 16px; }
.sp-url-row { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 14px; }
/* Link klar hervorgehoben: grün getönt, fett, monospace, volle Breite */
.sp-url-row input {
  width: 100%; font-size: 13px; font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--green-text); background: rgba(47,209,138,.08); border-color: rgba(47,209,138,.45);
}
/* „Kopieren" + „Öffnen" nebeneinander statt untereinander */
.sp-url-actions { display: flex; gap: 8px; }
.sp-url-actions .btn-sm { white-space: nowrap; text-decoration: none; }
.manage-cust-actions .mc-status { text-decoration: none; }

@media (max-width: 560px) {
  #modal-customer .modal-box { padding: 22px 16px; }
  .cust-grid { grid-template-columns: 1fr; gap: 0; }
}

/* ═══ Kundenkartei — Detail-/Anlege-Fenster mit Reitern (PIN-158) ═══════════
   Ein Fenster für alles zu einem Kunden. Dunkel, on-brand; die Dossier-Kopf-
   zeile + Akzente werden in der Kundenfarbe (--client-accent) getönt. color-mix
   mit solidem Fallback davor (ältere Engines ignorieren die 2. Deklaration). */
#modal-customer .modal-box-kartei {
  max-width: 820px; padding: 0; overflow: hidden;
  display: flex; flex-direction: column; max-height: 88vh;
}
/* Dossier-Kopfzeile */
.cust-dossier { position: relative; padding: 22px 26px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.cust-dossier { background: var(--surface); }
.cust-dossier {
  background:
    radial-gradient(120% 150% at 0% 0%, color-mix(in srgb, var(--client-accent, var(--green)) 22%, transparent) 0%, transparent 62%),
    var(--surface);
}
.cust-dossier-close { position: absolute; top: 12px; right: 12px; }
.cust-dossier-id { display: flex; align-items: center; gap: 14px; }
.cust-dossier-avatar {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  /* Logo vollständig einpassen statt beschneiden (PIN-166) */
  background-size: contain; background-repeat: no-repeat; background-position: center;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 700; color: var(--text);
  background-color: var(--surface-3); border: 1px solid var(--border-2);
}
.cust-dossier-avatar {
  background-color: color-mix(in srgb, var(--client-accent, var(--green)) 20%, var(--surface-3));
  border-color: color-mix(in srgb, var(--client-accent, var(--green)) 45%, var(--border));
}
.cust-dossier-idtext { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cust-dossier-name {
  font-size: 19px; font-weight: 700; color: var(--text); margin: 0; letter-spacing: -.3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cust-dossier-pill { align-self: flex-start; font-size: 11.5px; font-weight: 700; padding: 2px 10px; border-radius: 999px; letter-spacing: .2px; }
.cust-dossier-pill[hidden] { display: none; }
/* „Statusseite öffnen" im Kunden-Kopf (nur bei aktiver White-Label-Seite) */
.cust-dossier-sp {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 600; text-decoration: none; color: var(--green-text);
  border: 1px solid rgba(47,209,138,.4); border-radius: 8px; padding: 4px 10px;
}
.cust-dossier-sp:hover { background: rgba(47,209,138,.1); }
.cust-dossier-sp.hidden { display: none; }
/* Editierbarer Statusseiten-Slug + Anzeigename (Branding-Tab, PIN-174) */
.sp-title-field { margin-top: 10px; }
.sp-slug-row { margin: 8px 0 2px; }
.sp-slug-lbl { display: block; font-size: 13px; font-weight: 500; margin-bottom: 5px; color: var(--text-2); }
.sp-slug-field { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sp-slug-prefix { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.sp-slug-field input { flex: 1 1 150px; min-width: 120px; }
.sp-slug-warn { color: var(--yellow); margin-top: 5px; }
.cust-dossier-pill.is-up { background: var(--st-up-dim); color: var(--st-up); }
.cust-dossier-pill.is-down { background: var(--st-down-dim); color: var(--st-down); }
.cust-dossier-pill.is-partial { background: var(--st-degraded-dim); color: var(--st-degraded); }
.cust-dossier-pill.is-unknown { background: var(--surface-3); color: var(--text-muted); }
.cust-dossier-stats { display: flex; gap: 22px; margin-top: 14px; flex-wrap: wrap; }
.cust-dossier-stats[hidden] { display: none; }
.cds-item { display: flex; flex-direction: column; gap: 1px; }
.cds-k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); }
.cds-v { font-size: 14px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.cds-v.expiry-critical { color: var(--st-down); }
.cds-v.expiry-warn { color: var(--st-degraded); }

/* Reiter-Leiste */
.cust-tabs { display: flex; gap: 2px; padding: 0 16px; border-bottom: 1px solid var(--border); background: var(--surface); overflow-x: auto; scrollbar-width: none; flex-shrink: 0; }
.cust-tabs::-webkit-scrollbar { display: none; }
.cust-tab { background: none; border: none; font: inherit; cursor: pointer; padding: 12px 14px; font-size: 13.5px; font-weight: 600; color: var(--text-muted); border-bottom: 2px solid transparent; white-space: nowrap; transition: color .15s, border-color .15s; }
.cust-tab:hover { color: var(--text); }
.cust-tab.active { color: var(--green-text); border-bottom-color: var(--green); }
.cust-tab[hidden] { display: none; }

/* Panels + scrollender Formular-Körper */
#form-customer { display: flex; flex-direction: column; min-height: 0; flex: 1; overflow: hidden; }
.cust-panel { display: none; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 22px 26px; }
.cust-panel.active { display: block; }
#modal-customer #customer-form-error { margin: 0 26px; flex-shrink: 0; }
#modal-customer .form-actions { padding: 14px 26px; border-top: 1px solid var(--border); margin: 0; background: var(--surface); flex-shrink: 0; }

/* Eigene Schalter statt nackter Checkboxen */
.pm-switch { display: flex; flex-direction: row; align-items: center; gap: 11px; margin: 12px 0; font-size: 14px; color: var(--text); font-weight: 500; cursor: pointer; }
.pm-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pm-switch-track { position: relative; flex-shrink: 0; width: 38px; height: 22px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--border-2); transition: background .18s, border-color .18s; }
.pm-switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-2); transition: transform .18s, background .18s; }
.pm-switch input:checked + .pm-switch-track { background: var(--green-dim); border-color: var(--green); }
.pm-switch input:checked + .pm-switch-track::after { transform: translateX(16px); background: var(--green); }
.pm-switch input:focus-visible + .pm-switch-track { box-shadow: 0 0 0 3px var(--green-dim); }
.pm-switch-lbl { line-height: 1.4; }

/* Notizen + Textareas im Panel */
.cust-panel textarea { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); padding: 10px 12px; font: inherit; font-size: 14px; width: 100%; outline: none; resize: vertical; transition: border-color .15s, box-shadow .15s; }
.cust-panel textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-dim); }
.cust-notes { min-height: 96px; line-height: 1.55; border-left: 3px solid var(--border-2); }
.cust-notes { border-left-color: color-mix(in srgb, var(--client-accent, var(--green)) 70%, var(--border)); }

/* Schnellzugriff-Links als Chips */
.ql-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.ql-chip { display: inline-flex; align-items: stretch; max-width: 100%; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; transition: border-color .15s, box-shadow .15s; }
.ql-chip:hover { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-dim); }
.ql-chip-link { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 7px 4px 7px 10px; text-decoration: none; color: var(--text); font-size: 13px; font-weight: 500; }
.ql-chip-ico { width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text); background: var(--surface-3); }
.ql-chip-ico { background: color-mix(in srgb, var(--client-accent, var(--green)) 22%, var(--surface-3)); }
.ql-chip-lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ql-chip-x { border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 9px; flex-shrink: 0; }
.ql-chip-x:hover { color: var(--red); }
.ql-add-btn { background: none; border: 1px dashed var(--border-2); color: var(--text-2); border-radius: 10px; padding: 7px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .15s, color .15s; }
.ql-add-btn:hover { border-color: var(--green); color: var(--green-text); }
.ql-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.ql-add.hidden, .ql-add-btn.hidden { display: none; }
.ql-add input { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); padding: 8px 11px; font: inherit; font-size: 14px; outline: none; }
.ql-add input:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-dim); }
.ql-add-label { width: 150px; }
.ql-add-url { flex: 1; min-width: 160px; }
.ql-error { color: var(--red); font-size: 12.5px; margin-top: 2px; }
.ql-error.hidden { display: none; }
/* Ausweg neben der Dubletten-Meldung (Cowork 25.07.): wählt den vorhandenen Kunden aus,
   statt einen zweiten anzulegen. Als <button> gebaut, damit er per Tastatur erreichbar
   ist; sieht aus wie ein Link. Akzentgrün, ohne Unterstreichung, gleiche Größe wie die
   Meldung daneben. */
.ql-dup-use {
  background: none; border: 0; padding: 0;
  font: inherit; font-size: 12.5px; color: var(--green, #2ea866);
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.ql-dup-use:hover { text-decoration: underline; }
.ql-dup-use:focus-visible { outline: 2px solid var(--green, #2ea866); outline-offset: 2px; border-radius: 3px; }

/* Zuschaltbare Zusatzfelder + „+ Weitere Angabe" */
.cust-addon { margin-top: 16px; }
.cust-addon.hidden { display: none; }
.cust-addon-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 5px; }
.cust-addon-remove { color: var(--text-muted); }
.cust-addon-remove:hover { color: var(--red); }
.cust-addon-menu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--border); }
.cust-addon-menu.hidden { display: none; }
.cust-addon-menu-lbl { font-size: 12.5px; color: var(--text-muted); font-weight: 500; }
.addon-chip { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: border-color .15s, color .15s; }
.addon-chip:hover { border-color: var(--green); color: var(--green-text); }
.addon-chip.hidden { display: none; }

/* Tags */
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.tag-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 3px 10px; font-size: 12.5px; font-weight: 600; }
.tag-pill { background: color-mix(in srgb, var(--client-accent, var(--green)) 14%, var(--surface-2)); border-color: color-mix(in srgb, var(--client-accent, var(--green)) 35%, var(--border)); }
.tag-pill-x { border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: 13px; line-height: 1; padding: 0; }
.tag-pill-x:hover { color: var(--red); }
.tag-input { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); padding: 8px 11px; font: inherit; font-size: 14px; width: 100%; outline: none; }
.tag-input:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-dim); }

/* Tätigkeits-Log / Wartungsnachweis (PIN-162) */
.cust-log-list { display: flex; flex-direction: column; margin: 6px 0 10px; }
.cust-log-item { display: flex; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); }
.cust-log-item:first-child { border-top: none; }
.cust-log-date { font-size: 12px; color: var(--text-muted); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cust-log-text { color: var(--text); flex: 1; word-break: break-word; }
.cust-log-x { border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: 13px; line-height: 1; padding: 0; }
.cust-log-x:hover { color: var(--red); }
.cust-log-add .cust-log-date-input { width: 150px; }
.cust-log-add .cust-log-time-input { width: 110px; }
.cust-log-add .cust-log-hours-input { width: 90px; }
.cust-log-add .cust-log-cat-input { width: 130px; }
.cust-log-add .cust-log-text-input { flex: 1; min-width: 160px; }
/* Dauer-Chip in der Log-Zeile (Stundensatz-Abrechnung) */
.cust-log-hours { font-size: 12px; color: var(--text-muted); white-space: nowrap; margin-left: 2px; }
/* Kategorie-Chip je Eintrag */
.cust-log-cat { font-size: 11px; font-weight: 600; white-space: nowrap; padding: 1px 7px; border-radius: 999px;
  color: color-mix(in srgb, var(--client-accent, var(--green)) 80%, var(--text)); margin-left: 2px;
  background: color-mix(in srgb, var(--client-accent, var(--green)) 16%, transparent); }
/* Übersichts-Toolbar + Kategorie-Filter über der Liste */
.cust-log-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.cust-log-summary { font-size: 12px; color: var(--text-muted); }
.cust-log-filter { font-size: 12px; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); }
/* Einklappbare Monatsgruppen */
.cust-log-month { border-top: 1px solid var(--border); }
.cust-log-month:first-of-type { border-top: none; }
.cust-log-month-head { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none;
  cursor: pointer; padding: 9px 2px; color: var(--text); font-size: 13px; text-align: left; }
.cust-log-month-head:hover { color: color-mix(in srgb, var(--client-accent, var(--green)) 75%, var(--text)); }
.cust-log-caret { width: 12px; color: var(--text-muted); }
.cust-log-month-name { font-weight: 600; }
.cust-log-month-sum { margin-left: auto; font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.cust-log-month-body { padding-left: 20px; }

/* Abrechnungs-Export (PIN-161): Zeitraum-Wähler + CSV-Download-Zeile in der Kartei */
.cust-export { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.cust-export-lbl { font-size: 12px; color: var(--text-muted); margin-right: 2px; }
.cust-export-period, .cust-export-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#customer-export-period { font-size: 12px; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); }
.cust-export-custom { display: inline-flex; align-items: center; gap: 6px; }
.cust-export-custom input[type=date] { font-size: 12px; padding: 3px 6px; }
/* Monats-Sammel-Export über der Verwalten-Liste */
.manage-export { margin: 4px 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }

/* Übersicht-Panel */
.cust-ov-hero { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); margin-bottom: 16px; }
.cust-ov-hero-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; background: var(--text-muted); }
.cust-ov-hero.is-up .cust-ov-hero-dot { background: var(--st-up); }
.cust-ov-hero.is-down .cust-ov-hero-dot { background: var(--st-down); }
.cust-ov-hero.is-partial .cust-ov-hero-dot { background: var(--st-degraded); }
.cust-ov-hero-txt { font-size: 15px; font-weight: 700; color: var(--text); }
.cust-ov-hero-sub { font-size: 12.5px; color: var(--text-muted); font-weight: 500; margin-left: auto; }
.cust-ov-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.cust-ov-tile { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; text-align: center; }
.cust-ov-tile-k { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px; }
.cust-ov-tile-v { font-size: 20px; font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums; color: var(--text); }
.cust-ov-tile-v.uptime-good { color: var(--st-up); }
.cust-ov-tile-v.uptime-warn { color: var(--st-degraded); }
.cust-ov-tile-v.uptime-bad { color: var(--st-down); }
.cust-ov-tile-v.uptime-none { color: var(--text-muted); }
.cust-ov-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 2px; border-top: 1px solid var(--border); font-size: 13px; }
.cust-ov-row-k { color: var(--text-muted); }
.cust-ov-row-v { color: var(--text-2); text-align: right; font-weight: 600; word-break: break-word; }
.cust-ov-row-v.expiry-critical { color: var(--st-down); }
.cust-ov-row-v.expiry-warn { color: var(--st-degraded); }
.cust-ov-row-v.expiry-ok { color: var(--st-up); }
.cust-ov-empty { text-align: center; color: var(--text-muted); font-size: 13.5px; padding: 26px 12px; }

/* Endpunkte-Panel */
.cust-ep-row { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-top: 1px solid var(--border); font-size: 13px; }
.cust-ep-row:first-child { border-top: none; }
.cust-ep-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--text-muted); }
.cust-ep-dot.is-up { background: var(--st-up); }
.cust-ep-dot.is-down { background: var(--st-down); }
.cust-ep-name { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.cust-ep-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; color: var(--text-muted); font-size: 12px; }
.cust-ep-meta .expiry-critical { color: var(--st-down); }
.cust-ep-meta .expiry-warn { color: var(--st-degraded); }
.cust-ep-show { margin-top: 14px; }
.cust-ep-empty { text-align: center; color: var(--text-muted); font-size: 13.5px; padding: 26px 12px; }

/* Bereiche je Kunde (PIN-396) — Verwaltung im Endpunkte-Reiter der Kartei */
.cust-ber-block { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.cust-ber-title { font-size: 12px; font-weight: 700; letter-spacing: .04em;
                  text-transform: uppercase; color: var(--text-muted); margin: 0 0 8px; }
.cust-ber-row { display: flex; align-items: center; gap: 10px; padding: 7px 2px; font-size: 13px; }
.cust-ber-name { flex: 1; min-width: 0; font-weight: 600; color: var(--text);
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cust-ber-act { display: flex; gap: 12px; flex-shrink: 0; }
.cust-ber-act .btn-danger-link { color: var(--st-down); }
.cust-ber-add { display: flex; gap: 8px; margin-top: 10px; }
.cust-ber-add input { flex: 1; min-width: 0; }
/* Zwischenüberschrift in der Endpunktliste der Kartei */
.cust-ber-head { margin: 16px 0 2px; font-size: 12px; font-weight: 700;
                 letter-spacing: .03em; color: var(--text-muted); }
.cust-ber-head + .cust-ep-row { border-top: none; }

@media (max-width: 620px) {
  #modal-customer .modal-box-kartei { max-height: 92vh; }
  .cust-panel { padding: 18px 16px; }
  .cust-dossier { padding: 18px 16px 14px; }
  .cust-tabs { padding: 0 8px; }
  .cust-ov-tiles { grid-template-columns: 1fr 1fr; }
}

/* ── Kunden-Cockpit (Agentur-Sicht, PIN-83) ──────────────────────────────
   Aggregat-Status pro Kunde oben im Dashboard. Karten nutzen die bestehenden
   .card.is-up/.is-down/.is-slow/.unchecked-Glows (nicht neu erfinden). */
.client-cockpit { margin: 8px 0 26px; }
.client-cockpit.hidden { display: none; }
.cockpit-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.cockpit-title { font-size: 17px; font-weight: 700; color: var(--text); margin: 0; }
.cockpit-tiles { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.cockpit-tile {
  display: inline-flex; align-items: baseline; gap: 7px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 14px; cursor: pointer; font: inherit;
  color: var(--text-2); transition: border-color .15s, background .15s, color .15s;
}
.cockpit-tile:hover { border-color: var(--text-muted); color: var(--text); }
.cockpit-tile .ct-num { font-size: 15px; font-weight: 700; color: var(--text); }
.cockpit-tile .ct-lbl { font-size: 12.5px; font-weight: 500; }
#cockpit-tile-down.is-active {
  border-color: rgb(var(--st-down-rgb) / .55); background: rgb(var(--st-down-rgb) / .12); color: var(--st-down);
}
#cockpit-tile-down.is-active .ct-num { color: var(--st-down); }
#cockpit-tile-expiring.is-active {
  border-color: rgb(var(--st-degraded-rgb) / .55); background: rgb(var(--st-degraded-rgb) / .12); color: var(--st-degraded);
}
#cockpit-tile-expiring.is-active .ct-num { color: var(--st-degraded); }

.cockpit-attn {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--text-2); cursor: pointer; user-select: none;
}
.cockpit-attn input { width: 15px; height: 15px; margin: 0; flex-shrink: 0; cursor: pointer; }

.cockpit-card { cursor: pointer; }
.cockpit-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.cockpit-card .cockpit-dot,
.cockpit-card .cockpit-logo { width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0; }
/* Kunden-Logo vollständig zeigen statt beschneiden (PIN-166): contain + kein Kacheln.
   Dezenter Rahmen wie bei den anderen Logo-Kacheln, damit transparente/breite Logos
   nicht in die Karte „auslaufen" (box-sizing:border-box ist global → bleibt 18×18). */
.cockpit-card .cockpit-logo {
  background-size: contain; background-repeat: no-repeat; background-position: center;
  background-color: var(--surface-2); border: 1px solid var(--border);
}
.cockpit-name {
  font-size: 14px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cockpit-statusline {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; font-size: 12.5px; margin-bottom: 10px;
}
.cockpit-st-label { font-weight: 600; color: var(--text-2); }
.cockpit-counts { color: var(--text-muted); }
.cockpit-down-n { color: var(--st-down); font-weight: 700; }

.cockpit-uptime {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 12px; padding: 8px 0; border-top: 1px solid var(--border);
}
.cockpit-uptime-lbl { color: var(--text-muted); }
.cu-col { display: inline-flex; align-items: baseline; gap: 4px; }
.cu-col .cu-k { color: var(--text-muted); font-size: 11px; }
.cockpit-uptime .uptime-good,
.cockpit-uptime .uptime-warn,
.cockpit-uptime .uptime-bad { background: transparent; padding: 0; font-weight: 700; }
.cockpit-uptime .uptime-none { color: var(--text-muted); }

.cockpit-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; font-size: 12px; padding-top: 8px; border-top: 1px solid var(--border);
}
.cockpit-row-lbl { color: var(--text-muted); flex-shrink: 0; }
.cockpit-row-val { color: var(--text-2); text-align: right; word-break: break-word; }
.cockpit-exp.expiry-critical .cockpit-row-val { color: var(--st-down); font-weight: 600; }
.cockpit-exp.expiry-warn .cockpit-row-val { color: var(--st-degraded); font-weight: 600; }
.cockpit-exp.expiry-ok .cockpit-row-val { color: var(--st-up); }
/* Funktions-Wächter im Cockpit (PIN-87): kompakter Chip + ausklappbare Detail-Liste */
.cockpit-fn-chip {
  border: none; cursor: pointer; font: inherit;
  font-size: 11.5px; font-weight: 700; line-height: 1.5;
  padding: 2px 9px; border-radius: 999px; flex-shrink: 0;
}
.cockpit-fn-detail { margin-top: 8px; }
.cockpit-fn-detail.hidden { display: none; }

.cockpit-allok { text-align: center; color: var(--text-muted); font-size: 13.5px; padding: 22px 12px; }
.cockpit-allok.hidden { display: none; }

/* ── Import-Paste + Export + Migrations-CTA (PIN-109) ──────────────────── */
.import-or { text-align: center; color: var(--text-muted); font-size: 12px; margin: 12px 0 6px; }
.import-paste {
  width: 100%; min-height: 96px; resize: vertical; box-sizing: border-box;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-elev, rgba(255,255,255,.02)); color: var(--text, #fff);
}
.btn-link {
  background: none; border: none; padding: 0; cursor: pointer; font-family: inherit;
  color: var(--green-text); font-size: 13.5px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
}
.btn-link:hover { opacity: .85; }
.empty-migrate { margin-top: 10px; }

/* Canvas hinter <body> einfärben → kein heller Streifen beim Overscroll am unteren
   Seitenrand (das Theme liegt auf <body>, <html> blieb sonst auf Browser-Weiß).
   Default = Dark (Dashboard); bei hellen Seiten via :has() auf den Light-Ton. */
html { background: #0a0a0a; }
html:has(body.light) { background: #f6f8fa; }

/* ── PIN-116: Drag-and-Drop der Endpunkt-Karten ─────────────────────────── */
.card[draggable="true"] { cursor: grab; }
.card.dragging { opacity: .45; cursor: grabbing; }

/* Gruppierte Ansicht: jede Kunden-Gruppe ist ein eigener Block mit eigenem Karten-Grid
   → die GANZE Fläche (Header + Karten + Lücken) ist EIN großes Drop-Feld. */
#cards.is-grouped { display: block; }
.client-group { border-radius: 12px; padding: 0 4px 6px; transition: background .15s ease, outline-color .15s ease; }
.client-group > .cg-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(264px, 1fr));
  gap: 16px;
}
.client-group.card-filtered { display: none; }

/* Zuordnungs-Drop-Ziele: ganze Gruppe (großes Feld), Cockpit-Kachel, sonst einzelne Karte */
.client-group.drag-over {
  outline: 2px dashed var(--green);
  outline-offset: 4px;
  background: var(--green-dim);
}
.cockpit-card.drag-over,
.card.drag-over {
  outline: 2px dashed var(--green);
  outline-offset: 2px;
  background: var(--green-dim);
  border-radius: 8px;
}
/* Tausch-Ziel im manuellen Modus: Zielkarte hervorheben (Plätze tauschen beim Ablegen) */
.card.swap-target { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 8px; }
/* „Snap": dezentes Einrasten nach einer Zuordnung (kein Opacity-Blitzen → cleaner) */
@keyframes pmSnap {
  0%   { transform: scale(.94); }
  55%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}
.card.pm-snap { animation: pmSnap .26s ease-out 1; }

/* ── PIN-117: Status-Page-Builder (Komponenten-Reihenfolge per Drag) ────── */
.sp-order { margin-top: 14px; }
.sp-order-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sp-order-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-2); cursor: grab; user-select: none;
}
.sp-order-item.dragging { opacity: .45; cursor: grabbing; }
.sp-order-item .sp-order-grip { color: var(--text-muted); letter-spacing: -2px; }
.sp-order-item .sp-order-name { font-weight: 600; font-size: 14px; }


/* ═══ PIN-188 Statuspage-Studio ══════════════════════════════════════════ */
#modal-customer .modal-box-kartei.is-studio { max-width: min(1120px, 94vw); }

.studio-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,44%); gap: 22px; align-items: start; }
.studio-grid.studio-create { grid-template-columns: 1fr; }
.studio-create .studio-edit-only { display: none !important; }
.studio-controls { min-width: 0; display: flex; flex-direction: column; gap: 12px; }

/* Kontroll-Gruppen (native <details>) */
.studio-group { border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); overflow: hidden; }
.studio-group > summary { list-style: none; cursor: pointer; padding: 12px 14px; font-size: 13.5px; font-weight: 600;
  color: var(--text); display: flex; align-items: center; gap: 8px; user-select: none; }
.studio-group > summary::-webkit-details-marker { display: none; }
.studio-group > summary::after { content: "⌄"; margin-left: auto; color: var(--text-muted); transition: transform .18s; }
.studio-group[open] > summary::after { transform: rotate(180deg); }
.studio-group[open] > summary { border-bottom: 1px solid var(--border); }
.studio-group > summary:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
/* Aktive Gruppe hervorheben: was man gerade bearbeitet, ist sofort erkennbar (Studio-UX). */
.studio-group:focus-within { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.studio-group:focus-within > summary { color: var(--green-text); }
.studio-group-body { padding: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; align-items: start; }
.studio-group-body > .cg-full, .studio-group-body > .field-label, .studio-group-body > .seg,
.studio-group-body > .studio-field, .studio-group-body > .studio-optcolors { grid-column: 1 / -1; }
.studio-hook { opacity: .82; }
.studio-soon { margin-left: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
  color: var(--text-muted); background: var(--surface-3); border-radius: 999px; padding: 1px 8px; }
.field-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.field-label-mt { margin-top: 6px; }

/* Segmented Control */
.seg { display: inline-flex; background: var(--surface-3); border: 1px solid var(--border-2); border-radius: 10px; padding: 3px; gap: 2px; }
.seg.seg-wrap { display: flex; flex-wrap: wrap; }
.seg-btn { flex: 1 1 auto; border: none; background: none; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--text-muted); padding: 6px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.seg-btn:hover { color: var(--text); }
.seg-btn.active { background: var(--green-dim); color: var(--green-text); }
.seg-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }

/* Optionale Farben mit Auto-Schalter */
.studio-optcolors { display: flex; flex-direction: column; gap: 10px; }
.studio-color-row { display: flex; align-items: center; gap: 10px; }
.studio-color-row .scr-lbl { flex: 1 1 auto; font-size: 13px; color: var(--text-2); }
.studio-color-row .scr-auto { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-muted); cursor: pointer; }
.studio-color-row input[type="color"] { width: 34px; height: 26px; border: 1px solid var(--border-2); border-radius: 7px; background: none; cursor: pointer; padding: 0; }
.studio-color-row input[type="color"]:disabled { opacity: .4; cursor: not-allowed; }

/* Favicon-/OG-Vorschau */
.logo-preview-sm   { width: 36px; height: 36px; }
.logo-preview-wide { width: 120px; height: 63px; border-radius: 8px; }

/* Rechte Spalte: sticky Vorschau in Browser-Chrome — bleibt beim Scrollen der Regler
   IMMER im Blick (Studio-UX: man tippt links und sieht rechts sofort das Ergebnis). */
.studio-preview { position: sticky; top: 8px; align-self: start; max-height: calc(100vh - 24px); }
.sp-chrome { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface-3);
  border: 1px solid var(--border); border-bottom: none; border-radius: 12px 12px 0 0; }
.sp-chrome-dots { display: inline-flex; gap: 5px; }
.sp-chrome-dots i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: var(--border-2); }
.sp-chrome-dots i:nth-child(1){background:#ff5f57} .sp-chrome-dots i:nth-child(2){background:#febc2e} .sp-chrome-dots i:nth-child(3){background:#28c840}
.sp-chrome-url { flex: 1; font-size: 11.5px; color: var(--text-muted); font-family: ui-monospace, Menlo, monospace;
  background: var(--surface); border-radius: 6px; padding: 3px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-frame { border: 1px solid var(--border-2); border-radius: 0 0 14px 14px; overflow: hidden; background: var(--surface-3); height: min(72vh, 640px); }
.studio-iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
/* Kurzer Puls, sobald die Vorschau eine Änderung übernimmt → sichtbares „hat reagiert". */
@keyframes studioPulse { from { box-shadow: 0 0 0 3px rgba(47,209,138,.55); } to { box-shadow: 0 0 0 3px rgba(47,209,138,0); } }
.studio-frame.is-updated { animation: studioPulse .6s ease-out; }
.sp-chrome-live { margin-left: 8px; display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px;
  font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--green-text); }
.sp-chrome-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 6px var(--green); animation: liveBlink 1.6s ease-in-out infinite; }
@keyframes liveBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.studio-preview-toggle { display: none; }   /* nur mobil */

@media (max-width: 900px) {
  #modal-customer .modal-box-kartei.is-studio { max-width: 94vw; }
  .studio-grid { grid-template-columns: 1fr; gap: 14px; }
  .studio-preview-toggle { display: block; width: 100%; margin-top: 8px; }
  .studio-preview { display: none; position: static; }
  .studio-open .studio-preview { display: block; }
  .studio-open .studio-frame { height: 60vh; }
}
@media (max-width: 560px) { .studio-group-body { grid-template-columns: 1fr; } }

/* Ausfall-Kommunikation pro Kunde (PIN-179 / T8) */
.cust-inccomm-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.cust-inccomm-count { font-size: 12.5px; color: var(--text-muted); }

/* Vorlagen-Galerie (PIN-189 / T5) */
.tpl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; --tpl-accent: #2fd18a; }
.tpl-card { display: flex; flex-direction: column; gap: 6px; padding: 6px; border: 1.5px solid var(--border);
  border-radius: 11px; background: var(--surface-2); cursor: pointer; text-align: center; transition: border-color .12s, transform .12s; }
.tpl-card:hover { border-color: var(--border-2); transform: translateY(-1px); }
.tpl-card.tpl-active { border-color: var(--tpl-accent); box-shadow: 0 0 0 1px var(--tpl-accent); }
.tpl-thumb { position: relative; display: block; height: 58px; border-radius: 7px; overflow: hidden;
  padding: 6px; box-sizing: border-box; }
.tpl-thumb-head { display: flex; align-items: center; height: 12px; border-radius: 3px; margin-bottom: 6px; padding: 0 4px; }
.tpl-thumb-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--tpl-accent); display: inline-block; }
.tpl-thumb-line { display: block; height: 5px; border-radius: 3px; margin: 4px 0; width: 80%; opacity: .9; }
.tpl-thumb-line--sm { width: 55%; opacity: .7; }
.tpl-thumb-pill { position: absolute; right: 6px; bottom: 6px; width: 22px; height: 8px; border-radius: 999px;
  border: 1px solid var(--tpl-accent); }
/* Thumbnail deutet den Hintergrund-Stil an (PIN-210): Akzent-Wash je bg_style. */
.tpl-thumb[data-bgstyle="gradient"]::after,
.tpl-thumb[data-bgstyle="radial"]::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.tpl-thumb[data-bgstyle="gradient"]::after { background: linear-gradient(180deg, var(--tpl-accent), transparent 62%); opacity: .20; }
.tpl-thumb[data-bgstyle="radial"]::after { background: radial-gradient(60% 55% at 50% -5%, var(--tpl-accent), transparent 70%); opacity: .28; }
.tpl-name { font-size: 11.5px; font-weight: 600; color: var(--text-2); }
.tpl-card.tpl-active .tpl-name { color: var(--tpl-accent); }
@media (max-width: 560px) { .tpl-grid { grid-template-columns: repeat(2, 1fr); } }

/* ═════ REPORT-KAPITEL-BAUKASTEN (PIN-376; seit PIN-406 im eigenen Dialog
   #modal-repsec, aufgerufen aus der Karte „White-Label-Report") ═══════════ */
.repsec-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 14px; margin-top: 10px;
}
/* flex-direction + margin-bottom MÜSSEN hier stehen: die globale Regel
   `label { display:flex; flex-direction:column; margin-bottom:14px }` (Z.1176)
   greift sonst durch und stellt den Haken ÜBER den Text, mit 14px Luft je
   Zeile. Das war seit PIN-376 so (im alten Editor-Ort genauso), fiel dort nur
   niemandem auf. Gefunden per Sichtprüfung 19.07. */
.repsec-item {
  display: flex; flex-direction: row; align-items: center; gap: 7px;
  font-size: .8rem; cursor: pointer; padding: 2px 0; margin-bottom: 0;
}
.repsec-item input[type="checkbox"] { margin: 0; flex: none; }
.repsec-previewhint { margin-top: 14px; }
@media (max-width: 560px) {
  /* Einspaltig, aber mit gedeckelter Höhe: 14 Kapitel untereinander machen den
     Dialog sonst ~717px hoch, die Fußzeile rutscht damit unter die fixierten
     Overlays (Feedback-Blasen z-index 100, ⌘K-Hinweis z-index 50 — beide liegen
     über JEDEM Dialog, der nur z-index 30 hat). Gedeckelt endet die Fußzeile
     wieder oberhalb davon, wie beim Bestands-Dialog. Gemessen 19.07. */
  .repsec-grid { grid-template-columns: 1fr; max-height: 28vh; overflow-y: auto; }
}

/* ═════ REDUCED MOTION — GLOBALES BLANKET (Paket 2 Craft) ═════════════════
   Ersetzt NICHT die punktuellen Guards weiter oben (die korrigieren teils
   End-Zustände, z. B. pm-logo Z. 2183) — es dichtet alles Übrige ab, inkl.
   Inline-Styles (FLIP/Glide/Toast), weil !important im Stylesheet Inline-
   Styles schlägt. 0.01ms statt none: animationend/transitionend feuern
   weiter. Gilt auf ALLEN Seiten, die style.css laden (Dashboard, Settings,
   Agentur-Demo, Login, Invite, Reset). ::view-transition-*-Pseudos erfasst
   der *-Selektor NICHT → eigener Guard in redesign.css Sektion 21. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* ── Startzustand (PIN-349) ─────────────────────────────────────────────
   Eine ruhige Begrüßungskarte statt Checkliste + Muster-Kacheln. Bewusst
   flach: kein Fortschrittsbalken, keine Animation, keine Emojis an den
   Bedienelementen. Bleibt im Container-Fluss über dem Karten-Grid. */
.start-state {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 14px);
  padding: 22px 24px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-card, 0 1px 3px rgba(0,0,0,.3));
}
.start-state.hidden { display: none; }
.st-title { font-size: 19px; font-weight: 700; margin: 0 0 4px; color: var(--text); }
.st-sub   { font-size: 14px; color: var(--text-2); margin: 0; line-height: 1.55; }
.st-sub:empty { display: none; }
.st-dismiss {
  position: absolute; top: 14px; right: 14px;
  background: none; border: none; color: var(--text-muted);
  font-size: 12px; cursor: pointer; padding: 4px 8px; border-radius: 6px;
  font-family: inherit;
}
.st-dismiss:hover { color: var(--text); background: var(--surface-2); }
/* Eigene Klasse + explizites flex-direction:row — die globale label-Regel
   (style.css „label { display:flex; flex-direction:column }") greift hier zwar
   nicht (kein <label>), die Richtung steht trotzdem bewusst da. */
.st-actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.st-actions:empty { display: none; }
.st-actions .hidden { display: none; }
.st-actions button { width: auto; padding: 9px 18px; }
@media (max-width: 600px) {
  .st-actions { flex-direction: column; align-items: stretch; }
}