:root {
  --bg: #f4f6fb;
  --bg2: #ffffff;
  --bg3: #f0f3fa;
  --bg4: #e8edf8;
  --border: rgba(99,120,200,0.1);
  --border2: rgba(99,120,200,0.22);
  --text: #141830;
  --text2: #5a6490;
  --text3: #9ba4c8;
  --accent: #4263eb;
  --accent2: #3451c7;
  --accent-light: #eef1fd;
  --green: #0ea579;
  --green-bg: #e8f8f3;
  --green-text: #0a7a59;
  --red: #e53e5e;
  --red-bg: #fdeef2;
  --amber: #d97706;
  --amber-bg: #fef3e2;
  --purple: #7c3aed;
  --purple-bg: #f3effe;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 2px 12px rgba(66,99,235,0.07), 0 1px 3px rgba(0,0,0,0.05);
  --shadow-lg: 0 8px 30px rgba(66,99,235,0.12), 0 2px 8px rgba(0,0,0,0.06);
  /* Motion-Tokens (Design-Standard, siehe intern/docs/design-motion.md) */
  --dur-fast: 140ms;
  --dur: 200ms;
  --dur-slow: 300ms;
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-in: cubic-bezier(.4,0,1,1);
}

/* DARK MODE */
body.dark {
  --bg: #0f1117;
  --bg2: #1a1d2e;
  --bg3: #1e2235;
  --bg4: #252840;
  --border: rgba(99,120,200,0.15);
  --border2: rgba(99,120,200,0.25);
  --text: #e8eaf6;
  --text2: #8892c8;
  --text3: #4a5490;
  --accent: #5b7fff;
  --accent2: #4263eb;
  --accent-light: #1a2040;
  --green: #0ea579;
  --green-bg: #0a2a20;
  --green-text: #0ea579;
  --red: #ff5577;
  --red-bg: #2a0a14;
  --amber: #f59e0b;
  --amber-bg: #2a1a00;
  --purple: #a78bfa;
  --purple-bg: #1e1030;
  --shadow: 0 2px 12px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.2);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.3);
}

/* DARK MODE TOGGLE */
.theme-toggle { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--radius-sm); border: 1.5px solid var(--border2); background: var(--bg2); cursor: pointer; font-size: 13px; font-weight: 500; font-family: inherit; color: var(--text2); transition: all 0.15s; box-shadow: var(--shadow); }
.theme-toggle:hover { background: var(--bg3); color: var(--text); }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 12px; }
body { font-family: 'Outfit', -apple-system, "Segoe UI", Roboto, system-ui, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; min-height: -webkit-fill-available; }
/* Die SEITE scrollt nie. Gescrollt wird ausschliesslich im Inhaltsbereich (.main) und
   auch dort nur, wenn wirklich mehr Inhalt da ist. Vorher schob jede Seite die ganze
   Flaeche und es erschien rechts eine Leiste, selbst wenn alles gepasst haette. */
html, body { height: 100%; }
body { overflow: hidden; }
html { height: -webkit-fill-available; }

/* LOGIN */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #eef1fd 0%, #f4f6fb 50%, #f0effe 100%); }
.login-card { max-height: calc(100dvh - 40px); overflow-y: auto; background: var(--bg2); border-radius: 24px; box-shadow: var(--shadow-lg); padding: 2.5rem; width: 100%; max-width: 420px; border: 1.5px solid var(--border); position: relative; z-index: 1; }
/* Login-Wow: driftende Aurora-Blobs + Partikel-Canvas (self-hosted, CSP/DSGVO-safe, hell+dunkel) */
/* Bildschirmfeste Ebene statt normalem Block: so verlaengert die Anmeldung das Dokument
   NIE und es kann dort gar keine Seiten-Rollleiste entstehen (Betreiber: "man soll rechts
   nichts vom Scrollen sehen"). Nebenwirkung geloest: eine auftauchende Rollleiste hatte die
   zentrierte Karte seitlich verschoben — genau das war der Wackler beim Splash-Uebergang.
   Ist das Fenster zu niedrig, scrollt die KARTE in sich (siehe .login-card), nicht die Seite. */
.login-wrap { position: fixed; inset: 0; overflow: hidden; }
#auth-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.login-wrap::before, .login-wrap::after { content: ""; position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0; }
/* Blau oben rechts von .34 auf .16 zurueckgenommen (Betreiber 2026-07-16: "oben rechts ist
   mir zu viel blau"). Der Fleck war mit 620px + .34 kraeftiger als sein violettes Gegenstueck
   unten links (.30 bei 540px) und zog das Auge von der Anmelde-Karte weg. Die Tiefe bleibt,
   die Lautstaerke geht - der Held ist die Karte, nicht der Hintergrund. */
.login-wrap::before { width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; top: -14%; right: -8%; background: radial-gradient(circle, rgba(66,99,235,.16), transparent 68%); animation: authAurora1 24s ease-in-out infinite alternate; }
.login-wrap::after { width: 42vw; height: 42vw; max-width: 540px; max-height: 540px; bottom: -16%; left: -8%; background: radial-gradient(circle, rgba(139,92,246,.30), transparent 68%); animation: authAurora2 30s ease-in-out infinite alternate; }
@keyframes authAurora1 { from { transform: translate(0,0) scale(1); } to { transform: translate(-40px,50px) scale(1.15); } }
@keyframes authAurora2 { from { transform: translate(0,0) scale(1); } to { transform: translate(50px,-40px) scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .login-wrap::before, .login-wrap::after { animation: none; } }
.login-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 2rem; justify-content: center; }
.login-logo .icon { width: 52px; height: 52px; background: linear-gradient(135deg, #4263eb, #7c3aed); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 24px; box-shadow: 0 4px 14px rgba(66,99,235,0.3); }
.login-logo div h1 { font-size: 20px; font-weight: 700; }
.login-logo div p { font-size: 12px; color: var(--text3); }
.login-title { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.login-sub { font-size: 14px; color: var(--text2); margin-bottom: 1.5rem; }
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-size: 13px; font-weight: 500; color: var(--text2); margin-bottom: 6px; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 11px 14px; border: 1.5px solid var(--border2); border-radius: var(--radius-sm); font-size: 16px; font-family: inherit; background: var(--bg); color: var(--text); outline: none; transition: border-color 0.15s; box-sizing: border-box; }
.form-group textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--accent); background: var(--bg2); }
.btn-login { width: 100%; padding: 12px; background: linear-gradient(135deg, #4263eb, #7c3aed); color: #fff; border: none; border-radius: var(--radius-sm); font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer; margin-top: 0.5rem; box-shadow: 0 4px 14px rgba(66,99,235,0.3); transition: all 0.2s; }
.btn-login:hover { box-shadow: 0 6px 18px rgba(66,99,235,0.22); }
.login-error { background: var(--red-bg); color: var(--red); border: 1.5px solid rgba(229,62,94,0.2); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px; margin-top: 1rem; display: none; }

/* APP */
.app-wrap { display: none; }

/* SIDEBAR — always dark (HubSpot / Pipedrive style) */
.sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 240px; background: #1a1535; border-right: none; display: flex; flex-direction: column; padding: 1.5rem 1rem; z-index: 100; box-shadow: 3px 0 24px rgba(0,0,0,0.22); }
body.dark .sidebar { background: #0f0b1e; }
.sidebar-logo { display: flex; align-items: center; gap: 12px; padding: 0.5rem 0.75rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.07); margin-bottom: 1.5rem; }
.logo-icon { width: 42px; height: 42px; background: linear-gradient(135deg, #4263eb, #7c3aed); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 4px 16px rgba(124,58,237,0.5); }
.logo-text h1 { font-size: 16px; font-weight: 700; color: #fff; }
.logo-text p { font-size: 11px; color: rgba(255,255,255,0.42); }
.nav-section { font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.28); text-transform: uppercase; letter-spacing: 1.2px; padding: 0 0.75rem; margin-bottom: 6px; margin-top: 4px; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.62); cursor: pointer; transition: all 0.15s; margin-bottom: 2px; border: none; background: none; width: 100%; text-align: left; font-family: inherit; }
/* Hover NUR fuer Maus-Geraete: auf Touch (Handy/Tablet) wuerde iOS den ersten Tap als "Hover"
   werten (Highlight) und erst der zweite loest den Klick aus -> alles muss mit EINEM Tap gehen. */
@media (hover: hover) { .nav-item:hover { background: rgba(255,255,255,0.08); color: #fff; } }
.nav-item.active { background: rgba(124,58,237,0.28); color: #c4b5fd; font-weight: 600; }
.nav-item.active .nav-icon { filter: none; }
.nav-item.nav-locked { opacity: 0.38; }
@media (hover: hover) { .nav-item.nav-locked:hover { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.55); } }
.nav-lock-badge { margin-left: auto; font-size: 11px; flex-shrink: 0; }
.nav-icon { font-size: 17px; width: 22px; text-align: center; }
/* Unterpunkt (z.B. Wettbewerb unter Wählaro): eingerueckt + kleiner, mit zarter Fuehrungslinie */
.nav-sub { padding-left: 30px; font-size: 13px; margin-left: 8px; border-left: 1px solid rgba(255,255,255,0.10); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.nav-sub .nav-icon { font-size: 14px; width: 18px; }
/* Verwaltung am Sidebar-Ende verankern (Tagesarbeit oben, Admin unten), klar abgesetzt */
.nav-verwaltung { margin-top: auto; border-top: 1px solid var(--border); padding-top: 8px; }
.sidebar-bottom { margin-top: auto; border-top: 1px solid rgba(255,255,255,0.07); padding-top: 1rem; }
/* Kleine/niedrige Notebook-Screens: Sidebar IMMER scrollbar -> unterer Nav-Teil (Verwaltung + User/Logout)
   wird nie mehr abgeschnitten (Bug: Nav unsichtbar, User musste rauszoomen). */
.sidebar { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; }
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 3px; }
@media (max-height: 760px) {
  .sidebar { padding-top: 1rem; }
  .sidebar-logo { padding-bottom: 1rem; margin-bottom: 1rem; }
  .nav-item { padding: 8px 14px; margin-bottom: 1px; }
  .nav-section { margin-top: 2px; margin-bottom: 4px; }
  .nav-verwaltung { padding-top: 6px; }
  .sidebar-bottom { padding-top: 0.6rem; }
}
.user-pill { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); background: rgba(255,255,255,0.07); margin-bottom: 8px; }
.user-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #4263eb, #7c3aed); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; }
.user-info { flex: 1; min-width: 0; }
.user-name { font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: 10px; color: rgba(255,255,255,0.42); }
.btn-logout { width: 100%; padding: 8px; border-radius: var(--radius-sm); background: none; border: 1.5px solid rgba(255,255,255,0.12); font-size: 12px; font-weight: 500; font-family: inherit; color: rgba(255,255,255,0.52); cursor: pointer; transition: all 0.15s; }
@media (hover: hover) { .btn-logout:hover { background: rgba(229,62,94,0.18); color: #fca5a5; border-color: rgba(229,62,94,0.3); } }

.main { margin-left: 240px; padding: 2rem 3rem; height: 100dvh; overflow-y: auto; display: flex; flex-direction: column; }
/* Anti-Flacker: aktive Seite füllt die Höhe, Footer bleibt unten angepinnt.
   Ohne das rutscht der Footer beim Seitenaufbau erst hoch und springt nach dem
   Daten-Laden wieder runter (= sichtbares "Zucken", per Layout-Shift-API gemessen). */
.page.active { flex: 1 0 auto; }
footer { margin-top: auto; }
.topbar { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.5rem; gap: 1rem; }
.topbar-left h2 { font-size: 28px; font-weight: 700; color: var(--text); letter-spacing: -0.5px; }
.topbar-left p { font-size: 14px; color: var(--text2); margin-top: 3px; }
.topbar-right { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.search-wrap { display: flex; align-items: center; gap: 8px; background: var(--bg2); border: 1.5px solid var(--border2); border-radius: var(--radius-sm); padding: 8px 14px; box-shadow: var(--shadow); transition: border-color 0.15s; }
.search-wrap:focus-within { border-color: var(--accent); }
.search-wrap input { background: none; border: none; outline: none; font-size: 16px; font-family: inherit; color: var(--text); width: 200px; }
.search-wrap input::placeholder { color: var(--text3); }
.btn { display: flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; font-family: inherit; cursor: pointer; border: none; transition: all 0.15s; }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 4px 12px rgba(66,99,235,0.3); }
.btn-primary:hover { background: var(--accent2); }
/* Sekundaer-Button (dezent, fuer Nebenaktionen wie "Rundgang starten") — war nie definiert -> Browser-Default */
.btn-secondary { background: var(--bg3); color: var(--text); border: 1px solid var(--border2); box-shadow: var(--shadow); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
.btn-ghost { background: var(--bg2); color: var(--text2); border: 1.5px solid var(--border2); box-shadow: var(--shadow); }
.btn-ghost:hover { background: var(--bg3); color: var(--text); }
.btn-danger { background: var(--red-bg); color: var(--red); border: 1.5px solid rgba(229,62,94,0.2); }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-block { width: 100%; }
.btn-danger-ghost { background: var(--bg2); color: var(--red); border: 1.5px solid rgba(229,62,94,0.3); box-shadow: var(--shadow); }
.btn-danger-ghost:hover { background: var(--red-bg); color: var(--red); }


/* METRICS */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
/* Feste Spaltenzahlen gegen "Waisen-Karte": 7 Karten -> 7 bzw. 4+3; 5 Karten -> 5 bzw. 3+2 (nie eine allein) */
@media (min-width: 1200px) { .metrics-7 { grid-template-columns: repeat(7, 1fr); } .metrics-5 { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 860px) and (max-width: 1199px) { .metrics-7 { grid-template-columns: repeat(4, 1fr); } .metrics-5 { grid-template-columns: repeat(3, 1fr); } }
.metric-card { background: var(--bg2); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 1.25rem 1.5rem; box-shadow: var(--shadow); transition: border-color 0.2s ease, box-shadow 0.2s ease; position: relative; overflow: hidden; }
.metric-card:hover { box-shadow: var(--shadow-lg); border-color: var(--border2); }
.metric-card .accent-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 16px 16px 0 0; }
.blue .accent-bar { background: linear-gradient(90deg,#4263eb,#7c3aed); }
.green .accent-bar { background: linear-gradient(90deg,#0ea579,#06b6d4); }
.amber .accent-bar { background: linear-gradient(90deg,#d97706,#f59e0b); }
.purple .accent-bar { background: linear-gradient(90deg,#7c3aed,#ec4899); }
.teal .accent-bar { background: linear-gradient(90deg,#06b6d4,#4263eb); }
.red2 .accent-bar { background: linear-gradient(90deg,#e53e5e,#f59e0b); }
.metric-icon-wrap { width: 34px; height: 34px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 17px; margin-bottom: 10px; }
.blue .metric-icon-wrap { background: var(--accent-light); }
.green .metric-icon-wrap { background: var(--green-bg); }
.amber .metric-icon-wrap { background: var(--amber-bg); }
.purple .metric-icon-wrap { background: var(--purple-bg); }
.teal .metric-icon-wrap { background: #e0f7fa; }
.red2 .metric-icon-wrap { background: var(--red-bg); }
.metric-label { font-size: 13px; color: var(--text3); font-weight: 500; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.metric-value { font-size: 32px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -1px; }

/* GRID LAYOUTS */
.grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; margin-bottom: 1.25rem; }

/* CARDS */
.card { background: var(--bg2); border: 1.5px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 1.25rem; }
.card-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); background: var(--bg3); }
.card-header h3 { font-size: 16px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; }
.card-body { padding: 1.25rem 1.5rem; }
.chart-wrap { position: relative; height: 180px; }
.chart-wrap-lg { position: relative; height: 220px; }
.chart-empty { display: none; align-items: center; justify-content: center; height: 100%; min-height: 140px; color: var(--text3); font-size: 13px; font-weight: 500; text-align: center; padding: 1rem; }
.count-chip { font-size: 12px; padding: 3px 10px; background: var(--accent-light); color: var(--accent); border-radius: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Alle Plätze belegt — der Chip sagt es, bevor jemand vergeblich auf "Anlegen" klickt. */
.count-chip.voll { background: var(--amber-bg); color: var(--amber); }

/* CALL ITEMS */
.call-item { padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); transition: background 0.15s ease; }
@keyframes fadeUp { from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);} }
.call-item:hover { background: var(--bg3); }
.call-item:last-child { border-bottom: none; }
.call-row3 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.call-transcript-preview { font-size: 12px; color: var(--text3); margin-bottom: 6px; font-style: italic; line-height: 1.5; border-left: 2px solid var(--border2); padding-left: 8px; }
.badge { font-size: 13px; padding: 4px 11px; border-radius: 20px; font-weight: 600; }
.badge-in { background: var(--green-bg); color: var(--green-text); }
.badge-out { background: var(--accent-light); color: var(--accent); }
.badge-missed { background: var(--red-bg); color: var(--red); }
.badge-voicemail { background: var(--purple-bg); color: var(--purple); }
.call-name { font-size: 16px; font-weight: 600; color: var(--text); flex: 1; }
.call-dur { font-size: 11px; padding: 2px 8px; background: var(--bg4); border-radius: 20px; color: var(--text2); font-weight: 500; }
.sentiment { font-size: 11px; padding: 3px 9px; border-radius: 20px; font-weight: 600; }
.action-btn { font-size: 11px; padding: 3px 9px; border-radius: 20px; cursor: pointer; font-family: inherit; font-weight: 500; border: 1.5px solid; transition: all 0.15s; }
.btn-audio { background: var(--amber-bg); color: var(--amber); border-color: rgba(217,119,6,0.2); }
.btn-transcript { background: var(--bg3); color: var(--text2); border-color: var(--border2); }
.btn-transcript:hover { background: var(--bg4); }
.transcript-box { display: none; margin-top: 10px; background: var(--bg3); border: 1.5px solid var(--border2); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 12px; color: var(--text2); line-height: 1.8; max-height: 180px; overflow-y: auto; font-variant-numeric: tabular-nums; }
.audio-player { display: none; margin-top: 8px; }
.audio-player audio { width: 100%; border-radius: var(--radius-sm); }

/* FILTER */
.filter-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.filter-chip { padding: 7px 16px; border-radius: 20px; font-size: 14px; font-weight: 500; font-family: inherit; cursor: pointer; border: 1.5px solid var(--border2); background: var(--bg2); color: var(--text2); transition: all 0.15s; box-shadow: var(--shadow); }
.filter-chip.active { background: var(--accent-light); color: var(--accent); border-color: rgba(66,99,235,0.25); }
.sort-select { padding: 5px 13px; border-radius: 20px; font-size: 12px; font-family: inherit; font-weight: 500; border: 1.5px solid var(--border2); background: var(--bg2); color: var(--text2); outline: none; cursor: pointer; }

/* ============================================================
   MODERNES PERSONEN-DROPDOWN (.psel) — kein natives 90er-Aussehen
   eigener Chevron-Pfeil, Rundung, Fokus-Ring; light + dark
   ============================================================ */
.psel {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  font-size: 13px; font-weight: 500; font-family: inherit;
  padding: 7px 32px 7px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--border2);
  background-color: var(--bg2);
  color: var(--text);
  min-width: 168px; max-width: 200px;
  cursor: pointer; outline: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ba4c8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.psel:hover { background-color: var(--bg3); }
.psel:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }
.psel option { color: var(--text); background: var(--bg2); font-weight: 500; }

/* ============================================================
   EIGENES DROPDOWN (.dd) — komplett gestaltbar (auch im offenen Zustand)
   Menü ist position:fixed -> wird nicht von overflow:hidden abgeschnitten
   ============================================================ */
.dd { position: relative; display: inline-block; }
.dd-toggle { display: flex; align-items: center; gap: 8px; min-width: 168px; max-width: 210px; padding: 7px 12px; border-radius: 10px; border: 1.5px solid var(--border2); background: var(--bg2); color: var(--text); font-size: 13px; font-weight: 500; font-family: inherit; cursor: pointer; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; }
.dd-toggle:hover { background: var(--bg3); }
.dd.open .dd-toggle { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }
.dd-label { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-arrow { width: 14px; height: 14px; flex-shrink: 0; color: var(--text3); transition: transform 0.18s ease; }
.dd.open .dd-arrow { transform: rotate(180deg); }
.dd-menu { position: fixed; display: none; width: max-content; min-width: 168px; max-width: 260px; max-height: 264px; overflow-y: auto; background: var(--bg2); border: 1.5px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; z-index: 9500; animation: ddIn 0.15s ease; }
.dd.open .dd-menu { display: block; }
@keyframes ddIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.dd-option { padding: 8px 12px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--text); cursor: pointer; white-space: nowrap; transition: background-color 0.12s ease; }
.dd-option:hover { background: var(--bg3); }
.dd-option.sel { background: var(--accent-light); color: var(--accent); font-weight: 600; }
.dd-search { position: sticky; top: 0; background: var(--bg2); padding: 0 0 6px; margin-bottom: 2px; }
.dd-search-input { width: 100%; padding: 8px 11px; border: 1.5px solid var(--border2); border-radius: 8px; font-size: 13px; font-family: inherit; background: var(--bg); color: var(--text); outline: none; transition: border-color 0.15s ease; }
.dd-search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }
.dd-empty { padding: 12px; text-align: center; font-size: 12px; color: var(--text3); }

/* USER TABLE */
.user-table { width: 100%; border-collapse: collapse; }
.user-table th { padding: 10px 16px; text-align: left; font-size: 11px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px; background: var(--bg3); border-bottom: 1px solid var(--border); }
.user-table td { padding: 12px 16px; font-size: 13px; color: var(--text); border-bottom: 1px solid var(--border); }
.user-table tr:last-child td { border-bottom: none; }
.user-table tr:hover td { background: var(--bg3); }
.role-badge { font-size: 11px; padding: 3px 9px; border-radius: 20px; font-weight: 600; }
.role-user { background: var(--accent-light); color: var(--accent); }

/* MODAL */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.25); backdrop-filter: blur(4px); z-index: 1000; display: none; align-items: center; justify-content: center; }
.modal-overlay.open { display: flex; }
.modal { background: var(--bg2); border-radius: 20px; padding: 2rem; width: 100%; max-width: 440px; max-height: 92vh; overflow-y: auto; box-shadow: var(--shadow-lg); border: 1.5px solid var(--border); animation: modalIn 0.2s ease; }
@keyframes modalIn { from{opacity:0;transform:scale(0.96);}to{opacity:1;transform:scale(1);} }
.modal h3 { font-size: 18px; font-weight: 700; margin-bottom: 1.5rem; color: var(--text); }
.modal-actions { display: flex; gap: 10px; margin-top: 1.5rem; justify-content: flex-end; }

/* Schwebender Toast — kein Layout-Shift (verhindert das ruckartige Springen) */
#status-box { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 9999; pointer-events: none; }
@media (max-width: 768px) { #status-box { bottom: calc(80px + env(safe-area-inset-bottom)); width: max-content; max-width: 90vw; } }
@keyframes statusIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.status-bar { padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; margin: 0; font-weight: 500; border: 1.5px solid; display: none; box-shadow: var(--shadow-lg); pointer-events: auto; animation: statusIn 0.2s ease; white-space: nowrap; }
.status-bar.ok { background: var(--green-bg); color: var(--green-text); border-color: rgba(14,165,121,0.2); display: flex; align-items: center; gap: 8px; }
.status-bar.err { background: var(--red-bg); color: var(--red); border-color: rgba(229,62,94,0.2); display: flex; align-items: center; gap: 8px; }
.status-bar.info { background: var(--accent-light); color: var(--accent); border-color: rgba(66,99,235,0.2); display: flex; align-items: center; gap: 8px; }
.empty { text-align: center; padding: 2.5rem; color: var(--text3); font-size: 14px; }
.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:3rem 1.5rem; text-align:center; animation:esFade .25s ease; }
.empty-state .es-icon { font-size:40px; line-height:1; opacity:.9; margin-bottom:4px; }
.empty-state .es-title { font-size:15px; font-weight:700; color:var(--text); }
.empty-state .es-hint { font-size:13px; color:var(--text3); max-width:360px; line-height:1.5; }
.empty-state .es-action { margin-top:10px; }
@keyframes esFade { from{opacity:0;transform:translateY(4px);} to{opacity:1;transform:none;} }
/* Tastatur-Fokus sichtbar (a11y) — erscheint nur bei Tastatur-Navigation,nicht bei Maus-Klick */
button:focus-visible,a:focus-visible,.btn:focus-visible,[role="button"]:focus-visible,[tabindex]:focus-visible{
  outline: 2px solid var(--accent); outline-offset: 2px;
}
/* Bewegung reduzieren: respektiert OS-Einstellung (a11y) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
.spinner { width: 22px; height: 22px; border: 2px solid var(--border2); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto 10px; }
@keyframes spin { to{transform:rotate(360deg);} }
.page { display: none; }
.page.active { display: block; animation: pageIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Neue-Anrufe-Toast: schwebt oben mittig, schiebt NICHTS im Layout (kein Ruckeln) */
.nc-banner {
  position: fixed; top: 18px; left: 50%;
  transform: translateX(-50%) translateY(-16px);
  z-index: 9000; display: none; align-items: center; gap: 10px;
  background: var(--accent); color: #fff;
  padding: 9px 18px; border-radius: 999px; font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow-lg); cursor: pointer; opacity: 0;
  transition: opacity .3s ease, transform .35s cubic-bezier(0.4, 0, 0.2, 1);
}
.nc-banner.nc-show { opacity: 1; transform: translateX(-50%) translateY(0); }
footer { text-align: center; font-size: 11px; color: var(--text3); padding: 1.5rem 0 0.5rem; }

/* MOBILE */
@media (max-width: 768px) {
  /* Sidebar wird zum Bottom-Sheet: per "Mehr" hochgeschoben, sonst versteckt.
     So bleibt die komplette Rollen-/Plan-Logik erhalten (alle Nav-Punkte im Sheet). */
  .sidebar { width: 100%; max-width: 100%; height: auto; max-height: 82vh; position: fixed;
    left: 0; right: 0; bottom: 0; top: auto; flex-direction: column;
    overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
    padding: 0.75rem 0.9rem calc(0.9rem + 66px + env(safe-area-inset-bottom));
    border-right: none; border-top: 1px solid var(--border); border-radius: 22px 22px 0 0;
    z-index: 300;   /* Hintergrund bleibt der dunkle Sidebar-Look (#1a1535) -> weisse Schrift sichtbar */
    transform: translateY(106%); transition: transform .3s cubic-bezier(.32,.72,0,1);
    box-shadow: 0 -14px 44px rgba(0,0,0,.28); }
  .app-wrap.nav-open .sidebar { transform: translateY(0); }
  .sidebar-logo { display: flex; }        /* im Sheet sichtbar */
  .nav-section { display: block; }
  .sidebar-bottom { display: block; }
  .main { margin-left: 0; padding: 1rem; padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .topbar { flex-wrap: wrap; gap: 8px; }
  .topbar-left h2 { font-size: 18px; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-equal { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .metric-value { font-size: 22px; }
  .cx-user-grid { grid-template-columns: 1fr; }
  .topbar-right { width: 100%; justify-content: flex-end; }
  .topbar-right .search-wrap { flex: 1 1 auto; }
  .search-wrap input { width: 100%; }
  .filter-row { gap: 4px; }
  .filter-chip { padding: 4px 10px; }
  /* CTI-Popup ueber der unteren Nav-Leiste, volle Breite */
  .cti-popup { left: 10px; right: 10px; width: auto; bottom: calc(74px + env(safe-area-inset-bottom)); }
  /* Toast nicht hinter Nav-Leiste */
  .notif-toast { bottom: calc(74px + env(safe-area-inset-bottom)); right: 10px; left: 10px; max-width: none; }
  /* Inline-Grids auf Mobil entstapeln (schlagen inline styles via !important) */
  .metrics { grid-template-columns: repeat(3,1fr) !important; }
  #cx-stats-row { grid-template-columns: repeat(3,1fr) !important; }
  #dialer-step-indicator, #dialer-mapping-grid { grid-template-columns: 1fr !important; }
  .m-stack { grid-template-columns: 1fr !important; }
  /* Breite Benutzer-Tabelle auf Mobil als Karten stapeln (statt Seitwaerts-Scroll) */
  .user-table, .user-table tbody, .user-table tr { display: block; }
  .user-table thead { display: none; }
  .user-table tr { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 4px 14px; margin-bottom: 12px; }
  .user-table tr:hover td { background: transparent; }
  .user-table td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); white-space: normal; text-align: right; }
  .user-table tr td:last-child { border-bottom: none; }
  .user-table td::before { content: attr(data-label); font-weight: 600; color: var(--text3); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; text-align: left; flex-shrink: 0; }
  .user-table td[colspan] { justify-content: center; text-align: center; }
  .user-table td[colspan]::before { content: none; }
}

/* 3CX NUTZER SEITE */
.cx-user-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1rem; }
.cx-user-card { background: var(--bg2); border: 1.5px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem 1.5rem; transition: border-color 0.2s ease, box-shadow 0.2s ease; position: relative; overflow: hidden; }
.cx-user-card:hover { box-shadow: var(--shadow-lg); border-color: var(--border2); }
.cx-user-card-top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 1rem; }
.cx-avatar { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, #4263eb, #7c3aed); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: #fff; flex-shrink: 0; }
.cx-user-info { flex: 1; min-width: 0; }
.cx-user-name { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-user-email { font-size: 12px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.cx-role-badge { font-size: 10px; padding: 2px 8px; border-radius: 20px; font-weight: 600; margin-top: 4px; display: inline-block; }
.cx-role-owner { background: var(--purple-bg); color: var(--purple); }
.cx-role-manager { background: var(--amber-bg); color: var(--amber); }
.cx-role-user { background: var(--accent-light); color: var(--accent); }
.cx-ext-badge { display: flex; align-items: center; gap: 6px; background: var(--bg3); border-radius: var(--radius-sm); padding: 6px 10px; margin-bottom: 10px; }
.cx-ext-num { font-size: 18px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -0.5px; }
.cx-ext-label { font-size: 10px; color: var(--text3); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
.cx-status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; margin-left: auto; }
.cx-status-online { background: var(--green); box-shadow: 0 0 0 3px rgba(14,165,121,0.18); }
.cx-status-away { background: var(--amber); box-shadow: 0 0 0 3px rgba(245,158,11,0.2); }
.cx-status-dnd { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.2); }
.cx-status-offline { background: #cbd5e1; }
.cx-field { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.cx-field-label { font-size: 10px; color: var(--text3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; width: 65px; flex-shrink: 0; padding-top: 1px; }
.cx-field-val { font-size: 12px; color: var(--text2); flex: 1; line-height: 1.5; }
.cx-phone-row { display: flex; align-items: center; gap: 8px; background: var(--bg3); border-radius: 8px; padding: 7px 10px; margin-top: 8px; }
.cx-phone-icon { font-size: 16px; }
.cx-phone-info { flex: 1; min-width: 0; }
.cx-phone-model { font-size: 12px; font-weight: 600; color: var(--text); }
.cx-no-phone { display: flex; align-items: center; gap: 6px; background: var(--bg3); border-radius: 8px; padding: 7px 10px; margin-top: 8px; font-size: 12px; color: var(--text3); }
.cx-stats-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 1rem; }
.cx-stat { background: var(--bg2); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; text-align: center; }
/* .cx-filter-chip nutzt jetzt den Standard .filter-chip (cx-filter-chip bleibt nur JS-Haken) */

/* KI-ZENTRALE */
.task-card { background: var(--bg2); border: 1.5px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem 1.5rem; margin-bottom: 0.75rem; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.task-card:hover { box-shadow: var(--shadow-lg); border-color: var(--border2); }
.task-card.erledigt { opacity: 0.55; }
.task-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
.task-caller { display: flex; align-items: center; gap: 10px; }
.task-avatar { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #4263eb, #7c3aed); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: #fff; flex-shrink: 0; }
.task-caller-info { flex: 1; }
.task-caller-name { font-size: 15px; font-weight: 700; color: var(--text); }
.task-caller-number { font-size: 12px; color: var(--text3); font-variant-numeric: tabular-nums; margin-top: 2px; }
.task-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.task-time { font-size: 11px; color: var(--text3); }
.task-summary { font-size: 13px; color: var(--text2); line-height: 1.6; margin-bottom: 1rem; padding: 10px 14px; background: var(--bg3); border-radius: var(--radius-sm); border-left: 3px solid var(--accent); }
.task-footer { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.task-assign-wrap { display: flex; align-items: center; gap: 6px; flex: 1; }
.task-assign-label { font-size: 12px; color: var(--text3); white-space: nowrap; }
.task-status-badge { font-size: 11px; padding: 4px 10px; border-radius: 20px; font-weight: 600; cursor: pointer; border: none; font-family: inherit; transition: all 0.15s; }
.status-offen { background: var(--amber-bg); color: var(--amber); }
.status-bearbeitung { background: var(--accent-light); color: var(--accent); }
.status-erledigt { background: var(--green-bg); color: var(--green-text); }
.task-check-btn { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--border2); background: var(--bg2); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; flex-shrink: 0; }
.task-check-btn:hover { border-color: var(--green); background: var(--green-bg); }
.task-check-btn.done { border-color: var(--green); background: var(--green-bg); }
.notif-toast { position: fixed; bottom: 24px; right: 24px; background: var(--bg2); border: 1.5px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 1rem 1.25rem; max-width: 320px; z-index: 9999; display: none; animation: slideUp 0.3s ease; }
@keyframes slideUp { from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);} }
.notif-toast.show { display: flex; gap: 12px; align-items: flex-start; }
.notif-toast-icon { font-size: 22px; flex-shrink: 0; }
.notif-toast-body { flex: 1; }
.notif-toast-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.notif-toast-text { font-size: 12px; color: var(--text2); }
.notif-toast-close { font-size: 16px; color: var(--text3); cursor: pointer; flex-shrink: 0; line-height: 1; padding: 2px; }
.notif-toast-close:hover { color: var(--text); }

/* REGELN */
.rule-card { transition: background 0.15s, opacity 0.15s; }
.drag-handle:hover { color: var(--accent) !important; }

/* UHRZEIT WIDGET */
.clock-widget { background: linear-gradient(135deg, #4263eb 0%, #7c3aed 100%); border-radius: var(--radius); padding: 1.5rem 2rem; box-shadow: 0 8px 32px rgba(66,99,235,0.25); color: #fff; display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; position: relative; overflow: hidden; }
.clock-widget::before { content:''; position:absolute; right:-30px; top:-30px; width:120px; height:120px; background: rgba(255,255,255,0.06); border-radius:50%; }
.clock-widget::after { content:''; position:absolute; right:30px; bottom:-40px; width:80px; height:80px; background: rgba(255,255,255,0.04); border-radius:50%; }
.clock-time { font-size: 52px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -2px; line-height: 1; }
.clock-time .clock-seconds { font-size: 28px; color: rgba(255,255,255,0.6); vertical-align: super; margin-left: 4px; }
.clock-date-wrap { text-align: right; }
.clock-date { font-size: 16px; font-weight: 600; opacity: 0.9; }
.clock-weekday { font-size: 12px; opacity: 0.65; margin-top: 4px; text-transform: uppercase; letter-spacing: 1px; }
.clock-greeting { font-size: 13px; opacity: 0.75; margin-top: 8px; }

/* MOBILE IMPROVEMENTS */
@media (max-width: 768px) {
  /* Clock */
  .clock-widget { padding: 0.85rem 1rem; }
  .clock-time { font-size: 34px; }
  .clock-time .clock-seconds { font-size: 18px; }
  .clock-date { font-size: 12px; }

  /* Metrics: 3 columns, compact */
  .metrics { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .metric-card { padding: 0.7rem 0.5rem; }
  .metric-icon-wrap { font-size: 18px; margin-bottom: 3px; }
  .metric-value { font-size: 20px; }
  .metric-label { font-size: 9px; }

  /* Filter chips: horizontal scroll */
  .filter-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: none; gap: 5px; }
  .filter-row::-webkit-scrollbar { display: none; }
  .filter-chip, .ki-filter { white-space: nowrap; flex-shrink: 0; font-size: 11px; padding: 4px 10px; }

  /* Topbar */
  .topbar { margin-bottom: 0.75rem; flex-wrap: wrap; gap: 6px; }
  .topbar-left h2 { font-size: 16px; }
  .topbar-right { gap: 5px; flex-wrap: wrap; }
  .topbar-right .btn, .theme-toggle, .notif-btn { padding: 6px 8px; font-size: 11px; }

  /* Call item — stack vertically on mobile */
  .call-item { padding: 0.75rem; }
  .call-item > div:first-child { flex-direction: column !important; gap: 8px !important; }
  .call-item > div:first-child > div:last-child {
    text-align: left !important;
    align-items: flex-start !important;
    min-width: unset !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .call-item > div:first-child > div:last-child select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: unset !important;
  }
  .call-row3 { flex-wrap: wrap; gap: 5px; }
  .call-transcript-preview, .call-row2 { word-break: break-word; overflow-wrap: break-word; }

  /* Task cards */
  .task-card { padding: 0.85rem; }
  .task-summary { font-size: 12px; }
  .task-footer { flex-wrap: wrap; gap: 6px; }

  /* Grid */
  .grid-2, .grid-equal { grid-template-columns: 1fr; }

  /* Search: mobil volle Breite (Platzhalter passt rein) */
  .topbar-right .search-wrap { flex: 1 1 auto; }
  .search-wrap input { width: 100%; }
}

@media (min-width: 769px) and (max-width: 1100px) {
  /* iPad: Anruf-Karte stapelt Aktionen unter den Content */
  .call-item > div:first-child { flex-wrap: wrap !important; }
  .call-item > div:first-child > div:first-child { flex: 1 1 100% !important; min-width: 0 !important; }
  .call-item > div:first-child > div:last-child {
    flex: 1 1 100% !important;
    min-width: unset !important;
    text-align: left !important;
    align-items: flex-start !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 8px !important;
  }
  .call-item > div:first-child > div:last-child select {
    flex: 1 1 160px !important;
    max-width: 220px !important;
  }
}

@media (max-width: 480px) {
  /* Very small phones */
  .metrics { grid-template-columns: repeat(2, 1fr) !important; gap: 5px; }
  #cx-stats-row { grid-template-columns: repeat(2, 1fr) !important; }
  .metric-value { font-size: 18px; }
  .clock-time { font-size: 28px; }
}

/* ============================================================
   RUHIGES, ELEGANTES BILD
   Einheitliche, sanfte Übergänge auf interaktiven Elementen +
   Respekt vor "weniger Bewegung" (Barrierefreiheit / ruhigeres Gefühl)
   ============================================================ */
.btn, .filter-chip, .nav-item, .action-btn, .theme-toggle, .card,
.task-card, .metric-card, .cx-user-card, .cx-filter-chip, .sort-select,
.user-table tr, .search-wrap, input, select, button, a {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   KALENDER — Microsoft-365/Outlook-Optik (FullCalendar 6 Theming)
   ============================================================ */
.fc {
  --fc-border-color: var(--border);
  --fc-today-bg-color: rgba(66,99,235,0.06);
  --fc-neutral-bg-color: var(--bg3);
  --fc-page-bg-color: var(--bg2);
  --fc-event-border-color: transparent;
  font-family: inherit;
}
/* Mobil: KW-Nummer ausblenden (ueberlappte sonst die Tageszahl, schwer lesbar/tippbar) */
@media (max-width: 768px) { .fc .fc-daygrid-week-number { display: none; } }
/* Toolbar */
.fc .fc-toolbar.fc-header-toolbar { margin-bottom: 1rem; gap: 8px; flex-wrap: wrap; }
.fc .fc-toolbar-title { font-size: 19px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.fc .fc-button {
  background: var(--bg3); border: 1.5px solid var(--border2); color: var(--text2);
  border-radius: 9px; font-weight: 600; font-size: 13px; padding: 7px 13px;
  text-transform: none; box-shadow: none; transition: all .15s; font-family: inherit;
}
.fc .fc-button:hover { background: var(--bg4); color: var(--text); }
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
  background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(66,99,235,0.25);
}
.fc .fc-button:focus { box-shadow: none; }
.fc .fc-button-group { gap: 4px; }
.fc .fc-today-button:disabled { opacity: .5; }
/* Spaltenköpfe (Wochentage) */
.fc .fc-col-header-cell-cushion {
  color: var(--text3); font-weight: 700; font-size: 11px; text-transform: uppercase;
  letter-spacing: .4px; padding: 10px 4px; text-decoration: none;
}
/* Tageszahlen */
.fc .fc-daygrid-day-number { color: var(--text2); font-size: 13px; font-weight: 500; padding: 6px 8px; text-decoration: none; }
.fc .fc-daygrid-day.fc-day-today { background: var(--fc-today-bg-color); }
.fc .fc-day-today .fc-daygrid-day-number {
  background: var(--accent); color: #fff; border-radius: 50%; width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center; margin: 3px;
}
/* Events als saubere Pillen */
.fc .fc-event { border: none; border-radius: 7px; padding: 1px 2px; font-size: 12px; font-weight: 500; cursor: pointer; }
.fc .fc-daygrid-event { padding: 2px 7px; margin: 1px 3px; }
.fc .fc-event-title, .fc .fc-event-time { font-weight: 500; }
.fc .fc-daygrid-event:hover { filter: brightness(1.06); }
.fc .fc-h-event .fc-event-main { color: #fff; }
/* Zeit-Achse (Woche/Tag) */
.fc .fc-timegrid-slot-label-cushion, .fc .fc-list-day-text { color: var(--text3); font-size: 12px; }
.fc .fc-scrollgrid { border-radius: 12px; overflow: hidden; }
.fc .fc-highlight { background: rgba(66,99,235,0.10); }
/* "+ mehr" Link */
.fc .fc-daygrid-more-link { color: var(--accent); font-weight: 600; font-size: 11px; }

/* M365-Feinschliff Monats-/Wochenansicht */
.fc .fc-col-header { background: var(--bg3); }
.fc .fc-col-header-cell { border-bottom: 1.5px solid var(--border); }
.fc .fc-daygrid-day.fc-day-sat, .fc .fc-daygrid-day.fc-day-sun { background: rgba(99,120,200,0.035); }
.fc .fc-daygrid-day { transition: background .12s; }
.fc .fc-daygrid-day:hover { background: rgba(66,99,235,0.05); }
.fc .fc-daygrid-day.fc-day-today:hover { background: rgba(66,99,235,0.10); }
.fc .fc-daygrid-day-frame { min-height: 96px; }
.fc .fc-day-other { background: var(--bg3); }
.fc .fc-day-other .fc-daygrid-day-number { opacity: .4; }
.fc .fc-daygrid-week-number { color: var(--text3); font-size: 10px; font-weight: 700; background: transparent; padding: 4px 6px; }
/* Events als solide Pillen mit weißer Schrift */
.fc .fc-daygrid-block-event, .fc .fc-timegrid-event { box-shadow: none; }
.fc .fc-daygrid-block-event .fc-event-title, .fc .fc-daygrid-block-event .fc-event-time { color: #fff; }
.fc .fc-event:hover { filter: brightness(1.07); }
.fc .fc-scrollgrid { box-shadow: var(--shadow); }

/* M365-Feinschliff Wochen-/Tagesansicht (timeGrid) */
.fc .fc-timegrid-col.fc-day-today { background: rgba(66,99,235,0.05); }
.fc .fc-timegrid-now-indicator-line { border-color: #ef4444; border-width: 2px; }
.fc .fc-timegrid-now-indicator-arrow { border-color: #ef4444; color: #ef4444; }
.fc .fc-timegrid-slot { height: 2.4em; }
.fc .fc-timegrid-slot-label-cushion, .fc .fc-timegrid-axis-cushion { color: var(--text3); font-size: 11px; font-weight: 600; }
.fc .fc-timegrid-axis, .fc .fc-timegrid-slot-minor { border-color: var(--border); }
.fc .fc-timegrid-event { border-radius: 7px; padding: 2px 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.fc .fc-timegrid-event .fc-event-title { font-weight: 600; }
/* Listenansicht moderner */
.fc .fc-list { border-radius: 12px; overflow: hidden; }
.fc .fc-list-day-cushion { background: var(--bg3); }
.fc .fc-list-event:hover td { background: rgba(66,99,235,0.05); }
.fc .fc-list-event-time { color: var(--text3); }

/* #3 Politur: Aufgabe "Erledigen" — smoother Erfolgs-Flash + Rausgleiten */
.task-card.task-completing {
  animation: task-done 0.36s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  pointer-events: none;
  overflow: hidden;
}
@keyframes task-done {
  0%   { opacity: 1; transform: translateX(0) scale(1); box-shadow: 0 0 0 0 rgba(34,197,94,0); }
  25%  { box-shadow: 0 0 0 2px rgba(34,197,94,0.55); background: rgba(34,197,94,0.12); }
  100% { opacity: 0; transform: translateX(36px) scale(0.97); }
}

/* Mein Tag — Tages-Cockpit */
.meintag-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; align-items: start; }

/* ============================================================
   FEEDBACK & IDEEN — 💡-Button (FAB) + Einmal-Hinweis (Coachmark)
   ============================================================ */
#feedback-fab { position:fixed; right:22px; bottom:22px; width:52px; height:52px; border-radius:50%; border:none; background:var(--accent); color:#fff; font-size:22px; cursor:pointer; z-index:850; box-shadow:0 6px 20px rgba(66,99,235,0.35); display:flex; align-items:center; justify-content:center; transition:transform .18s ease, box-shadow .18s ease; touch-action:none; -webkit-user-select:none; user-select:none; }
#feedback-fab:hover { transform:translateY(-2px) scale(1.05); box-shadow:0 10px 26px rgba(66,99,235,0.45); }
#feedback-fab.fb-pulse { animation:fbPulse 2.6s ease-out infinite; }
@keyframes fbPulse {
  0%   { box-shadow:0 6px 20px rgba(66,99,235,0.35), 0 0 0 0 rgba(66,99,235,0.35); }
  60%  { box-shadow:0 6px 20px rgba(66,99,235,0.35), 0 0 0 14px rgba(66,99,235,0); }
  100% { box-shadow:0 6px 20px rgba(66,99,235,0.35), 0 0 0 0 rgba(66,99,235,0); }
}
.fb-intro-backdrop { position:fixed; inset:0; background:rgba(15,23,42,0.38); z-index:860; }
.fb-intro-card { position:fixed; right:22px; bottom:90px; width:min(280px, calc(100vw - 44px)); background:var(--bg2, #fff); color:var(--text); border:1px solid var(--border); border-radius:14px; padding:16px; z-index:861; box-shadow:0 18px 50px rgba(15,23,42,0.28); animation:fbIntroIn .35s cubic-bezier(.2,.8,.3,1); }
.fb-intro-arrow { position:absolute; right:24px; bottom:-8px; width:14px; height:14px; background:inherit; border-right:1px solid var(--border); border-bottom:1px solid var(--border); transform:rotate(45deg); }
.fb-intro-title { font-weight:700; font-size:14px; margin-bottom:6px; }
.fb-intro-text { font-size:13px; color:var(--text2); line-height:1.5; margin-bottom:12px; }
.fb-intro-btn { border:none; background:var(--accent); color:#fff; font-family:inherit; font-size:13px; font-weight:600; padding:7px 16px; border-radius:8px; cursor:pointer; }
@keyframes fbIntroIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.fb-cats { display:flex; gap:8px; margin-bottom:12px; }
.fb-cat { flex:1; padding:8px 6px; border-radius:10px; border:1.5px solid var(--border); background:var(--bg3); color:var(--text2); font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; transition:all .15s ease; }
.fb-cat.active { border-color:var(--accent); background:var(--accent-light); color:var(--accent); }
#fb-text { border:1px solid var(--border); border-radius:10px; background:var(--bg3); color:var(--text); font-family:inherit; font-size:14px; padding:10px 12px; resize:vertical; }
#fb-text:focus { outline:2px solid var(--accent); outline-offset:0; border-color:transparent; }
@media (max-width:768px) {
  /* +safe-area: sonst ueberlappt die Lampe auf Notch-iPhones die Tab-Leiste (die selbst um den
     Home-Indikator waechst). So bleibt sie immer sauber ueber den Tabs. */
  #feedback-fab { right:14px; bottom:calc(76px + env(safe-area-inset-bottom)); }
  .fb-intro-card { right:14px; bottom:calc(140px + env(safe-area-inset-bottom)); }
  /* Update-Banner mobil: ueber die Tab-Leiste heben + kompakt (war zu wuchtig auf dem iPhone) */
  #iq-update-banner { bottom: calc(80px + env(safe-area-inset-bottom)) !important; padding:8px 10px 8px 13px !important; gap:9px !important; border-radius:12px !important; }
  #iq-update-banner .iqub-title { font-size:12.5px !important; }
  #iq-update-banner .iqub-sub { display:none !important; }   /* Untertitel weg — der "Neu laden"-Knopf sagt's schon */
  #iq-update-banner #iq-update-reload { padding:7px 12px !important; font-size:12px !important; }
}
@media (prefers-reduced-motion:reduce) { #feedback-fab.fb-pulse, .fb-intro-card { animation:none; } }
/* Spotlight: solange der Einmal-Hinweis offen ist, liegt der FAB ÜBER dem Backdrop (klickbar + hell) */
#feedback-fab.fb-intro-hero { z-index: 862; }

/* ============================================================
   SKELETON-KARTEN (Shimmer) — reservieren die Listenhöhe beim Laden,
   damit nichts "poppt"/zuckt, wenn die echten Daten eintreffen.
   ============================================================ */
.skel-card { height: 92px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg2); margin-bottom: 0.75rem; padding: 16px; display: flex; gap: 14px; align-items: center; }
.skel-el { border-radius: 8px; background: linear-gradient(90deg, var(--bg3) 25%, var(--border) 50%, var(--bg3) 75%); background-size: 200% 100%; animation: skelShimmer 1.4s ease-in-out infinite; }
.skel-av { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
@keyframes skelShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel-el { animation: none; } }

/* ============================================================
   RECHTS-FUSS — Impressum/Datenschutz/AGB
   §5 DDG verlangt "leicht erkennbar, unmittelbar erreichbar, staendig verfuegbar".
   Darum unter jeder Login-Karte UND in der Seitenleiste der App.
   ============================================================ */
.legal-foot {
  display: flex; justify-content: center; gap: 14px;
  margin-top: 18px; font-size: 12px;
}
.legal-foot a {
  color: var(--text3); text-decoration: none;
  transition: color .15s;
}
.legal-foot a:hover { color: var(--accent); text-decoration: underline; }
.legal-foot-app {
  margin-top: 10px; gap: 10px; font-size: 11px;
  opacity: .55; transition: opacity .15s;
}
.legal-foot-app:hover { opacity: 1; }
.legal-foot-app a { color: rgba(255,255,255,0.55); }
.legal-foot-app a:hover { color: #fff; }

/* ============================================================
   WILLKOMMENS-TOUR (tour.js)
   Der Spotlight ist ein einziger, riesiger box-shadow um ein leeres Kästchen —
   damit braucht es kein Canvas, kein SVG und keine vier Overlay-Streifen.
   ============================================================ */
#tour-overlay {
  position: fixed; inset: 0; z-index: 9000;
  opacity: 0; transition: opacity .22s ease;
}
#tour-overlay.an { opacity: 1; }

#tour-hole {
  position: fixed; border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(9, 12, 20, 0.74);
  transition: left .28s cubic-bezier(.4,0,.2,1), top .28s cubic-bezier(.4,0,.2,1),
              width .28s cubic-bezier(.4,0,.2,1), height .28s cubic-bezier(.4,0,.2,1), opacity .2s;
  pointer-events: none;
}
/* Anfangs-/Schlusskarte: kein Loch, aber der Schleier muss bleiben */
#tour-hole[style*="opacity: 0"] { box-shadow: 0 0 0 9999px rgba(9, 12, 20, 0.74); opacity: 1 !important; width: 0; height: 0; }

.tour-ziel {
  position: relative; z-index: 9001;
  box-shadow: 0 0 0 2px var(--accent), 0 0 22px rgba(66, 99, 235, 0.55) !important;
  border-radius: 10px;
}

#tour-card {
  position: fixed; z-index: 9002;
  width: min(360px, calc(100vw - 32px));
  background: var(--bg2); color: var(--text);
  border: 1px solid var(--border); border-radius: 16px;
  padding: 20px 20px 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  transition: left .28s cubic-bezier(.4,0,.2,1), top .28s cubic-bezier(.4,0,.2,1);
}
.tour-h { font-size: 17px; font-weight: 700; margin-bottom: 8px; text-wrap: balance; }
.tour-t { font-size: 13.5px; line-height: 1.6; color: var(--text2); }
.tour-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 18px;
}
.tour-dots { display: flex; gap: 5px; }
.tour-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--border); transition: background .2s, width .2s;
}
.tour-dot.an { background: var(--accent); width: 16px; border-radius: 3px; }
.tour-btns { display: flex; align-items: center; gap: 8px; }
.tour-btns button {
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  border-radius: 9px; padding: 7px 13px; cursor: pointer;
  border: 1px solid transparent; transition: all .15s;
}
.tour-skip { background: none; color: var(--text3); }
.tour-skip:hover { color: var(--text); }
.tour-back { background: none; border-color: var(--border); color: var(--text2); }
.tour-back:hover { background: var(--bg3); }
.tour-next { background: var(--accent); color: #fff; }
.tour-next:hover { filter: brightness(1.08); }

@media (prefers-reduced-motion: reduce) {
  #tour-overlay, #tour-hole, #tour-card { transition: none; }
}
@media (max-width: 700px) {
  #tour-card { left: 12px !important; right: 12px; width: auto;
               top: auto !important; bottom: 16px; transform: none !important; }
}

/* ============================================================================
   MOBILE SHELL — 5 Prioritäts-Tabs + "Mehr"-Sheet (statt überladener Leiste)
   Desktop/Tablet ab 769px: unsichtbar (Sidebar links regiert).
   Handy ≤768px: feste Bottom-Tabs; "Mehr" schiebt die Sidebar als Sheet hoch.
   ============================================================================ */
.mtab { display: none; }
.nav-scrim { display: none; }

@media (max-width: 768px) {
  .mtab {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 250;
    background: var(--bg2); border-top: 1px solid var(--border);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
    justify-content: space-around; align-items: stretch;
    box-shadow: 0 -2px 14px rgba(0,0,0,.06);
  }
  body.dark .mtab { background: #14102a; }
  .mtab-btn {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
    border: 0; background: none; font-family: inherit; font-size: 10px; font-weight: 600;
    color: var(--text3); padding: 6px 2px; min-height: 50px; cursor: pointer; border-radius: 12px;
    transition: color .15s, background .15s;
  }
  .mtab-btn.active { color: var(--accent); }
  .mtab-btn.active .mtab-i { transform: translateY(-1px); }
  .mtab-i { font-size: 21px; line-height: 1; transition: transform .15s; }

  .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 290;
    background: rgba(10,12,25,.42); opacity: 0; pointer-events: none;
    -webkit-backdrop-filter: blur(2px);
    transition: opacity .3s ease; backdrop-filter: blur(2px);
  }
  .app-wrap.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar, .nav-scrim { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CALLASSIST — die Marke ist orange, nicht blau
   ---------------------------------------------------------------------------
   Wählaro und IQ4Hub sind zwei Produkte auf einer Codebasis (siehe index.html:
   der Hostname setzt html.call). Ein blauer "Anmelden"-Knopf unter einem orangen
   Logo verraet, dass es dieselbe App ist — genau das soll es nicht.
   Warum so viele Zeilen fuer eine Farbe: --accent ist eine Variable (eine Zeile), aber
   Knopf-Verlauf, Schatten, Hintergrund und die zwei Lichtflecken sind fest verdrahtetes
   Blau. Die kann man nur einzeln umhaengen.
   `html.call body.dark` MUSS mit: body.dark setzt --accent selbst und hat dieselbe
   Spezifitaet wie html.call -> ohne diese Zeile waere Wählaro im Dunkeln wieder blau.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Insurelution Wählaro — Navy #051C2C + Gold #C8A44D (McKinsey). --accent = Navy
   (Nav/Links/Text, hoher Kontrast), Buttons = Gold-Flaeche + Navy-Text (Marken-CTA).
   Status-Farben (rot/gruen) bleiben unveraendert. */
html.call           { --accent: #051C2C; --accent2: #0a3352; --accent-light: #eef2f6; }
html.call body.dark { --accent: #C8A44D; --accent2: #E4C878; --accent-light: #13212c; }

html.call .login-wrap { background: linear-gradient(135deg, #eef1f5 0%, #f7f8fb 50%, #e9edf2 100%); }
html.call .login-wrap::before { background: radial-gradient(circle, rgba(200,164,77,.16), transparent 68%); }
html.call .login-wrap::after  { background: radial-gradient(circle, rgba(5,28,44,.12), transparent 68%); }
/* Login-Knopf in McKinsey-Blau (Betreiber-Wunsch), nicht Gold. */
html.call .btn-login          { background: linear-gradient(135deg, #0e3a63, #082740); color: #fff; box-shadow: 0 4px 14px rgba(5,28,44,.35); }
html.call .btn-login:hover    { background: linear-gradient(135deg, #124a7e, #0a3352); box-shadow: 0 6px 18px rgba(5,28,44,.3); }
html.call .btn-primary        { background: #C8A44D; color: #051C2C; box-shadow: 0 4px 12px rgba(200,164,77,.3); }
html.call .btn-primary:hover  { background: #E4C878; }
/* Logo-Kachel enthaelt jetzt das Wählaro-Icon (img, randlose Squircle-SVG) -> Hintergrund weg,
   weicher Navy-Schatten. border-radius exakt auf die Squircle-Ecke (24.5%) -> KEIN heller Rand. */
html.call .login-logo .icon   { background: transparent; box-shadow: 0 4px 14px rgba(5,28,44,.22); border-radius: 24.5%; }
html.call .logo-icon          { background: transparent; box-shadow: 0 4px 16px rgba(5,28,44,.28); }

/* Unter-Navigation der zusammengelegten Seite "Einstellungen" (Persönlich | Firma) */
.mk-subnav { display:flex; gap:8px; margin:0 0 20px; flex-wrap:wrap; }
.mk-subnav-btn { appearance:none; border:1px solid var(--border2); background:var(--bg2); color:var(--text2);
  font:inherit; font-size:14px; font-weight:600; padding:9px 18px; border-radius:999px; cursor:pointer;
  transition:background .15s, color .15s, border-color .15s; }
.mk-subnav-btn:hover { background:var(--bg3); color:var(--text); }
.mk-subnav-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }

/* ============================================================
   ROLLLEISTEN — schlanke, schwebende Pille (macOS-Stil) statt der klobigen
   System-Leiste. Sie erscheint NUR, wenn der Inhalt wirklich laenger ist.
   Der 3px-Rand in Verbindung mit background-clip:content-box macht den Balken
   schmal und laesst ihn schweben; die Spur bleibt unsichtbar.
   Firefox kann kein ::-webkit-scrollbar -> scrollbar-width/-color deckt ihn ab.
   ============================================================ */
.main, .modal, .dd-menu, .transcript-box {
  scrollbar-width: thin;
  scrollbar-color: rgba(120,120,140,.38) transparent;
}
.main::-webkit-scrollbar, .modal::-webkit-scrollbar, .dd-menu::-webkit-scrollbar,
.transcript-box::-webkit-scrollbar { width: 11px; height: 11px; }
.main::-webkit-scrollbar-track, .modal::-webkit-scrollbar-track, .dd-menu::-webkit-scrollbar-track,
.transcript-box::-webkit-scrollbar-track { background: transparent; }
.main::-webkit-scrollbar-thumb, .modal::-webkit-scrollbar-thumb, .dd-menu::-webkit-scrollbar-thumb,
.transcript-box::-webkit-scrollbar-thumb {
  background: rgba(120,120,140,.38);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}
.main::-webkit-scrollbar-thumb:hover, .modal::-webkit-scrollbar-thumb:hover,
.dd-menu::-webkit-scrollbar-thumb:hover, .transcript-box::-webkit-scrollbar-thumb:hover {
  background: rgba(120,120,140,.62);
  background-clip: content-box;
}
body.dark .main, body.dark .modal, body.dark .dd-menu, body.dark .transcript-box {
  scrollbar-color: rgba(210,210,235,.30) transparent;
}
body.dark .main::-webkit-scrollbar-thumb, body.dark .modal::-webkit-scrollbar-thumb,
body.dark .dd-menu::-webkit-scrollbar-thumb, body.dark .transcript-box::-webkit-scrollbar-thumb {
  background: rgba(210,210,235,.30);
  background-clip: content-box;
}

/* ── "Konfiguration" im Dialer pulsiert dezent ──────────────────────────────────
   Betreiber-Wunsch 20.07.: der Knopf soll auffallen, ohne zu drängeln. Deshalb ein
   ruhiger Schein am Rand statt Groessenaenderung — Letzteres laesst die Kopfzeile
   zappeln und wirkt nach Fehler, nicht nach Hinweis.
   Wer weniger Bewegung eingestellt hat, bekommt sie nicht (Barrierefreiheit). */
@keyframes cfgPuls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200,164,77,0.00); }
  50%      { box-shadow: 0 0 0 4px rgba(200,164,77,0.22); }
}
#dialer-config-btn { animation: cfgPuls 3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { #dialer-config-btn { animation: none; } }

/* ── Markenzeichen des Dialers: goldenes Telefon (nur Wählaro) ───────────────
   Bewusst ein eigenes SVG statt ☎️: Emoji sehen auf iPhone, Android und Windows
   verschieden aus — ausgerechnet das Markenzeichen soll ueberall gleich aussehen.
   Groesse haengt an der Schrift (1em), damit es in der Navigation, in der Ueberschrift
   und im Startknopf jeweils von selbst passt. */
.marke-tel {
  width: 1em; height: 1em;
  vertical-align: -0.14em;
  fill: currentColor;
  flex: 0 0 auto;
}
/* Gold — im hellen Modus ist --accent das Navy, deshalb hier ausdruecklich die
   Gold-Marke; auf dunklem Grund ist --accent bereits Gold. */
html.call .marke-tel            { color: #C8A44D; }
html.call body.dark .marke-tel  { color: var(--accent); }
/* In der Seitenleiste sitzt das Zeichen in einem Icon-Feld fester Breite — mittig
   ausrichten, sonst haengt es am Text. */
.nav-icon.dyn-dc-icon, .mtab-i.dyn-dc-icon {
  display: inline-flex; align-items: center; justify-content: center;
}