* { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #1f2937; }

    /* ── Login-Screen ─────────────────────────────────── */
    #login-screen { min-height: 100vh; }
    .login-brand { text-align: center; margin-bottom: 2rem; }
    .login-brand .logo {
      width: 64px; height: 64px;
      background: #2563eb;
      border-radius: 18px;
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 1rem;
      box-shadow: 0 8px 32px rgba(37,99,235,.4);
    }
    .login-brand .logo span { color: #fff; font-size: 1.25rem; font-weight: 700; }
    .login-brand h1 { color: #fff; font-size: 1.5rem; font-weight: 700; }
    .login-brand p  { color: #93c5fd; font-size: .875rem; margin-top: .25rem; }

    .login-box {
      background: #fff;
      border-radius: 1.25rem;
      box-shadow: 0 24px 64px rgba(0,0,0,.35);
      padding: 2rem;
      width: 100%;
      max-width: 360px;
      margin: 0 1rem;
    }

    /* Dev-Shortcut */
    .dev-bar {
      background: #fffbeb;
      border: 1.5px dashed #f59e0b;
      border-radius: .75rem;
      padding: .75rem;
      margin-bottom: 1.5rem;
    }
    .dev-bar .dev-label {
      color: #b45309;
      font-size: .7rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .05em;
      margin-bottom: .5rem;
    }
    .dev-buttons { display: flex; gap: .5rem; }
    .dev-btn {
      flex: 1;
      padding: .375rem .75rem;
      border-radius: .5rem;
      font-size: .75rem;
      font-weight: 600;
      cursor: pointer;
      border: 1.5px solid;
      transition: all .15s;
    }
    .dev-btn.kunde        { color: #2563eb; border-color: #93c5fd; background: #fff; }
    .dev-btn.kunde.active { color: #fff;    border-color: #2563eb; background: #2563eb; }
    .dev-btn.admin        { color: #7c3aed; border-color: #c4b5fd; background: #fff; }
    .dev-btn.admin.active { color: #fff;    border-color: #7c3aed; background: #7c3aed; }

    /* Kunden-Picker Dropdown */
    .dev-kunde-wrap { position: relative; flex: 1; }
    .kunden-picker {
      display: none;
      position: absolute;
      top: calc(100% + 6px);
      left: 0; right: 0;
      background: #fff;
      border: 1.5px solid #bfdbfe;
      border-radius: .6rem;
      box-shadow: 0 8px 24px rgba(37,99,235,.15);
      z-index: 999;
      overflow: hidden;
      animation: kp-pop .16s cubic-bezier(.34,1.56,.64,1);
    }
    .kunden-picker.open { display: block; }
    @keyframes kp-pop {
      from { transform: scale(.95) translateY(-4px); opacity: 0; }
      to   { transform: scale(1)   translateY(0);    opacity: 1; }
    }
    .kp-head {
      font-size: .65rem; font-weight: 700; color: #93c5fd;
      text-transform: uppercase; letter-spacing: .07em;
      padding: .5rem .75rem .35rem;
      border-bottom: 1px solid #eff6ff;
    }
    .kp-item {
      display: flex; align-items: center; gap: .55rem;
      padding: .55rem .75rem; cursor: pointer;
      transition: background .12s;
    }
    .kp-item:hover { background: #eff6ff; }
    .kp-avatar {
      width: 26px; height: 26px; border-radius: 50%;
      background: linear-gradient(135deg, #2563eb, #7c3aed);
      display: flex; align-items: center; justify-content: center;
      font-size: .6rem; font-weight: 700; color: #fff; flex-shrink: 0;
    }
    .kp-info { display: flex; flex-direction: column; min-width: 0; }
    .kp-name  { font-size: .75rem; font-weight: 600; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .kp-email { font-size: .65rem; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .kp-empty { font-size: .75rem; color: #9ca3af; padding: .65rem .75rem; text-align: center; }


    /* ── Registrierungs-Panel ─────────────────────────────── */
    .auth-panel {
      display: none;
      opacity: 0;
      transform: translateY(8px);
      transition: opacity .22s ease, transform .22s ease;
    }
    .auth-panel.active {
      display: block;
      opacity: 1;
      transform: translateY(0);
    }
    .login-panel.active { display: block; }
    .login-panel { display: block; }

    .reg-title { font-size: 1.1rem; font-weight: 700; color: #111; margin-bottom: .15rem; }
    .reg-sub   { color: #6b7280; font-size: .8rem; margin-bottom: 1.25rem; }

    .reg-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0 .75rem;
    }
    .reg-grid .field { margin-bottom: .75rem; }
    .reg-grid .field.full { grid-column: 1 / -1; }
    .field { margin-bottom: .75rem; }
    .field label { display: block; font-size: .78rem; font-weight: 600; color: #374151; margin-bottom: .3rem; }
    .field input, .field select {
      width: 100%; box-sizing: border-box;
      border: 1.5px solid #e5e7eb; border-radius: .5rem;
      padding: .55rem .85rem; font-size: .82rem; outline: none;
      transition: border-color .15s; background: #fff; color: #111;
    }
    .field input:focus, .field select:focus { border-color: #2563eb; }
    .field input.err { border-color: #ef4444; }
    .field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; padding-right: 2rem; }

    .pw-wrap { position: relative; }
    .pw-wrap input { padding-right: 2.5rem; }
    .pw-toggle {
      position: absolute; right: .75rem; top: 50%; transform: translateY(-50%);
      background: none; border: none; cursor: pointer; color: #9ca3af;
      font-size: .75rem; padding: 0; line-height: 1;
    }

    .pw-strength {
      height: 3px; border-radius: 2px; margin-top: .35rem;
      background: #e5e7eb; overflow: hidden;
    }
    .pw-strength-bar {
      height: 100%; width: 0; border-radius: 2px;
      transition: width .3s, background .3s;
    }

    .auth-switch {
      text-align: center; margin-top: 1rem;
      font-size: .78rem; color: #6b7280;
    }
    .auth-switch a {
      color: #2563eb; font-weight: 600; cursor: pointer;
      text-decoration: none;
    }
    .auth-switch a:hover { text-decoration: underline; }

    .reg-consent {
      display: flex; align-items: flex-start; gap: .55rem;
      margin: .25rem 0 1rem; font-size: .8rem; color: #4b5563; line-height: 1.45; cursor: pointer;
    }
    .reg-consent input { width: 16px; height: 16px; margin-top: .1rem; flex-shrink: 0; cursor: pointer; accent-color: #2563eb; }
    .reg-consent a { color: #2563eb; text-decoration: none; }
    .reg-consent a:hover { text-decoration: underline; }

    .reg-success {
      text-align: center; padding: 1rem 0 .5rem;
    }
    .reg-success .check {
      width: 52px; height: 52px; border-radius: 50%;
      background: #f0fdf4; margin: 0 auto .75rem;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.4rem;
    }
    .reg-success h3 { color: #111; font-size: 1rem; margin-bottom: .35rem; }
    .reg-success p  { color: #6b7280; font-size: .8rem; line-height: 1.5; }

    .login-box {
      transition: max-height .3s ease;
      max-width: 400px;
    }

    .login-box h2 { font-size: 1.25rem; font-weight: 600; color: #111; }
    .login-box .sub { color: #6b7280; font-size: .875rem; margin: .25rem 0 1.5rem; }

    .field { margin-bottom: 1rem; }
    .field label { display: block; font-size: .875rem; font-weight: 500; color: #374151; margin-bottom: .375rem; }
    .field input {
      width: 100%;
      border: 1.5px solid #e5e7eb;
      border-radius: .5rem;
      padding: .625rem 1rem;
      font-size: .875rem;
      outline: none;
      transition: border-color .15s;
    }
    .field input:focus { border-color: #2563eb; }

    .error-msg {
      background: #fef2f2;
      color: #dc2626;
      border-radius: .5rem;
      padding: .5rem .75rem;
      font-size: .8rem;
      margin-bottom: 1rem;
      display: none;
    }

    .login-btn {
      width: 100%;
      background: #2563eb;
      color: #fff;
      font-weight: 600;
      font-size: .875rem;
      padding: .75rem;
      border: none;
      border-radius: .625rem;
      cursor: pointer;
      transition: background .15s;
    }
    .login-btn:hover    { background: #1d4ed8; }
    .login-btn:disabled { background: #93c5fd; cursor: not-allowed; }

    .login-footer { color: #60a5fa; font-size: .75rem; text-align: center; margin-top: 2rem; }

    /* ══════════════════════════════════════════════════════
       DARK MODE (invertierender Theme-Layer + Media-Rückinvertierung)
       ══════════════════════════════════════════════════════ */
    /* WICHTIG: Hintergrund hell wählen – der Invert-Filter macht ihn dunkel (sonst heller „Rand" unter dem Inhalt) */
    html.gs-dark { color-scheme: dark; background: #10151f; }
    html.gs-dark body { min-height: 100vh; }
    /* Medien & farbtragende Elemente zurück-invertieren, damit sie natürlich aussehen */
    /* Medien brauchen keine Sonderbehandlung mehr – echtes Dunkeldesign */
    .gs-theme-btn { background: none; border: none; cursor: pointer; font-size: 1.05rem; line-height: 1;
      color: #6b7280; padding: .35rem .45rem; border-radius: .5rem;
      display: inline-flex; align-items: center; justify-content: center;
      transition: background .15s, color .15s; }
    .gs-theme-btn:hover { background: rgba(120,120,120,.15); color: #2563eb; }
    /* Symbol-Button (z. B. Direktnachrichten). Bewusst NICHT .gs-theme-btn,
       sonst ueberschreibt der Theme-Umschalter sein Symbol. */
    .gs-icon-btn { background: none; border: none; cursor: pointer; color: #6b7280;
      padding: .35rem .45rem; border-radius: .5rem; transition: background .15s, color .15s;
      display: inline-flex; align-items: center; justify-content: center; }
    .gs-icon-btn:hover { background: rgba(120,120,120,.15); color: #2563eb; }
    .gs-theme-btn svg, .gs-icon-btn svg { width: 18px; height: 18px; display: block; }

    /* ── Cookie-Consent-Banner (DSGVO / § 25 TDDDG) ─────────── */
    .gs-cookie { display: none; position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 2000;
      background: #0f172a; color: #e2e8f0; border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.32);
      padding: 1rem 1.2rem; gap: 1rem; align-items: center; flex-wrap: wrap; max-width: 980px; margin: 0 auto; }
    .gs-cookie.show { display: flex; }
    .gs-cookie-text { flex: 1; min-width: 240px; font-size: .85rem; line-height: 1.55; }
    .gs-cookie-text a { color: #93c5fd; }
    .gs-cookie-actions { display: flex; gap: .6rem; }
    .gs-cookie-btn { border: none; cursor: pointer; font-size: .83rem; font-weight: 700; padding: .55rem 1.1rem;
      border-radius: 9px; background: #2563eb; color: #fff; white-space: nowrap; }
    .gs-cookie-btn:hover { background: #1d4ed8; }
    .gs-cookie-btn.ghost { background: transparent; color: #cbd5e1; border: 1px solid #334155; }
    .gs-cookie-btn.ghost:hover { background: rgba(255,255,255,.06); }
    @media (max-width: 560px) { .gs-cookie-actions { width: 100%; } .gs-cookie-btn { flex: 1; } }

    /* ── Onboarding / Erste Schritte ─────────────────────────── */
    .ob-card { background: linear-gradient(135deg,#eff6ff,#faf5ff); border: 1px solid #dbeafe;
      border-radius: 16px; padding: 1.2rem 1.4rem; margin-bottom: 1.75rem; }
    .ob-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
    .ob-title { font-size: 1.05rem; font-weight: 800; color: #0f172a; }
    .ob-sub { font-size: .82rem; color: #64748b; margin-top: .1rem; }
    .ob-dismiss { background: none; border: none; color: #94a3b8; cursor: pointer; font-size: .78rem; font-weight: 600; }
    .ob-dismiss:hover { color: #475569; }
    .ob-progress { height: 8px; background: #e0e7ff; border-radius: 99px; overflow: hidden; margin: .8rem 0 1rem; }
    .ob-progress-fill { height: 100%; background: linear-gradient(90deg,#2563eb,#7c3aed); border-radius: 99px; transition: width .3s; }
    .ob-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
    @media (max-width: 640px) { .ob-steps { grid-template-columns: 1fr; } }
    .ob-step { display: flex; align-items: center; gap: .7rem; background: #fff; border: 1px solid #e5e9f0;
      border-radius: 11px; padding: .7rem .85rem; cursor: pointer; transition: box-shadow .12s, transform .12s; }
    .ob-step:hover { box-shadow: 0 4px 14px rgba(37,99,235,.12); transform: translateY(-1px); }
    .ob-step.done { opacity: .7; }
    .ob-check { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #cbd5e1; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center; font-size: .8rem; color: #fff; }
    .ob-step.done .ob-check { background: #16a34a; border-color: #16a34a; }
    .ob-step-text { font-size: .86rem; font-weight: 600; color: #1e293b; }
    .ob-step.done .ob-step-text { text-decoration: line-through; color: #64748b; }
    .ob-done-banner { font-size: .9rem; font-weight: 700; color: #15803d; }

    /* ── Barrierefreiheit (a11y) ─────────────────────────────── */
    :focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; border-radius: 4px; }
    .gs-skip { position: absolute; left: -9999px; top: 0; z-index: 5000; background: #2563eb; color: #fff;
      padding: .55rem 1rem; border-radius: 0 0 8px 0; font-weight: 700; font-size: .85rem; }
    .gs-skip:focus { left: 0; }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    }

    /* ── Referenzen / Showcase ───────────────────────────────── */
    .sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8rem; }
    .sc-item { border: 1px solid #e5e9f0; border-radius: 12px; padding: .9rem 1rem; background: #fff; }
    .sc-item-name { font-weight: 700; color: #0f172a; font-size: .9rem; }
    .sc-item-meta { font-size: .72rem; color: #94a3b8; margin: .15rem 0 .5rem; word-break: break-all; }
    .sc-badge { font-size: .7rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; }
    .sc-badge.live { background: #dcfce7; color: #15803d; }
    .sc-badge.draft { background: #fef3c7; color: #b45309; }
    .sc-view { display: block; width: 100%; margin-top: .7rem; background: #eff6ff; color: #2563eb;
      border: 1px solid #bfdbfe; border-radius: 8px; padding: .45rem; font-size: .8rem; font-weight: 600; cursor: pointer; }
    .sc-view:hover { background: #dbeafe; }

    /* ── Direktnachrichten (1:1) ─────────────────────────────── */
    .dm-side { background: #0f172a; color: #cbd5e1; display: flex; flex-direction: column; }
    .dm-side-head { padding: .9rem 1rem; font-weight: 800; color: #fff; border-bottom: 1px solid rgba(255,255,255,.08); font-size: .9rem; }
    .dm-member { display: flex; align-items: center; gap: .55rem; width: 100%; background: none; border: none;
      color: #cbd5e1; cursor: pointer; text-align: left; padding: .55rem .8rem; font-size: .85rem; }
    .dm-member:hover { background: rgba(255,255,255,.06); }
    .dm-member.active { background: #2563eb; color: #fff; }
    .dm-av { width: 28px; height: 28px; border-radius: 8px; background: #2563eb; color: #fff; flex-shrink: 0;
      display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 800; }
    .dm-member.active .dm-av { background: #1e3a8a; }
    .dm-main { display: flex; flex-direction: column; min-width: 0; }
    .dm-head { display: flex; align-items: center; justify-content: space-between; padding: .8rem 1rem;
      border-bottom: 1px solid #eef2f6; font-weight: 700; color: #0f172a; }
    .dm-messages { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .6rem; min-height: 0; }
    .dm-msg { max-width: 78%; }
    .dm-msg.mine { align-self: flex-end; text-align: right; }
    .dm-bubble { display: inline-block; background: #f1f5f9; color: #1e293b; padding: .5rem .7rem; border-radius: 12px; font-size: .86rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
    .dm-msg.mine .dm-bubble { background: #2563eb; color: #fff; }
    .dm-time { font-size: .66rem; color: #94a3b8; margin-top: .2rem; }
    .dm-input-bar { border-top: 1px solid #eef2f6; padding: .7rem; display: flex; gap: .5rem; align-items: flex-end; }

    /* ══════════════════════════════════════════════════════
       RESPONSIVE / MOBILE (additiv – Portal & Admin auf kleinen Screens)
       ══════════════════════════════════════════════════════ */
    @media (max-width: 860px) {
      .topbar { flex-wrap: wrap; height: auto; padding: .6rem 1rem; gap: .5rem; }
      .topbar .right { flex-wrap: wrap; gap: .5rem 0.6rem; justify-content: flex-end; }
      .admin-main { padding: 1.25rem 1rem; }
      .kunde-main { padding: 1.5rem 1rem; }
      .dashboard-grid { grid-template-columns: 1fr; }
      .stats-grid { grid-template-columns: 1fr 1fr; }
      .kd-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
      .kd-tab { white-space: nowrap; }
      .an-toolbar { flex-direction: column; align-items: stretch; }
      .an-controls { justify-content: space-between; }
    }
    @media (max-width: 560px) {
      .stats-grid { grid-template-columns: 1fr; }
      .gsearch-input { width: 120px; }
      .user-email { display: none; }               /* Platz sparen im Header */
      /* Breite Tabellen horizontal scrollbar machen statt zu quetschen */
      .cst-card, #ai-list, #ao-list, #lt-content, #ver-list { overflow-x: auto; }
      .cst-table, .ai-table, .an-table { min-width: 520px; }
      /* Modals & Board kompakter */
      .cst-modal, .legal-modal { padding: 1.1rem; }
      .tk-modal-body { grid-template-columns: 1fr; }
      .tk-board { grid-template-columns: 1fr; }
      .da-metrics { grid-template-columns: 1fr 1fr !important; }
      .da-vitals { grid-template-columns: 1fr 1fr; }
    }

    /* ── Shared Top-Bar ──────────────────────────────────── */
    #website, #admin-view { display: none; }

    .topbar {
      background: #fff;
      border-bottom: 1px solid #e5e7eb;
      padding: .75rem 2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky; top: 0; z-index: 10;
    }
    .topbar-left { display: flex; align-items: center; gap: .75rem; }
    .topbar-logo {
      width: 32px; height: 32px; background: #2563eb;
      border-radius: 8px; display: flex; align-items: center; justify-content: center;
    }
    .topbar-logo span { color: #fff; font-size: .7rem; font-weight: 700; }
    .topbar h1 { font-size: 1rem; font-weight: 700; color: #111; }
    .topbar .role-badge {
      font-size: .65rem; font-weight: 700; padding: .2rem .5rem;
      border-radius: 999px; text-transform: uppercase; letter-spacing: .05em;
    }
    .role-badge.admin { background: #f3e8ff; color: #7c3aed; }
    .role-badge.mitarbeiter { background: #ccfbf1; color: #0f766e; }
    .role-badge.kunde { background: #dbeafe; color: #1d4ed8; }
    /* Rollenbasierte Sichtbarkeit: Admin-only-Aktionen für Mitarbeiter ausblenden */
    body.role-mitarbeiter [data-admin-only] { display: none !important; }
    .dev-btn.mitarbeiter        { color: #0d9488; border-color: #5eead4; background: #fff; }
    .dev-btn.mitarbeiter.active { color: #fff;    border-color: #0d9488; background: #0d9488; }

    /* ── Rechtsdokument-Viewer ────────────────────────────── */
    .legal-overlay { display: none; position: fixed; inset: 0; z-index: 3000;
      background: rgba(15,23,42,.6); backdrop-filter: blur(2px);
      align-items: center; justify-content: center; padding: 1.5rem; }
    .legal-modal { background: #fff; border-radius: 16px; width: 100%; max-width: 760px; max-height: 88vh;
      display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.3); }
    .legal-head { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.3rem;
      border-bottom: 1px solid #eef2f6; flex-shrink: 0; }
    .legal-head h3 { flex: 1; margin: 0; font-size: 1.05rem; font-weight: 800; color: #0f172a; }
    .legal-back { background: #f1f5f9; border: none; color: #475569; font-size: .8rem; font-weight: 600;
      padding: .4rem .75rem; border-radius: 8px; cursor: pointer; }
    .legal-back:hover { background: #e2e8f0; color: #0f172a; }
    .legal-close { background: #f1f5f9; border: none; color: #475569; width: 30px; height: 30px;
      border-radius: 8px; cursor: pointer; font-size: 15px; }
    .legal-close:hover { background: #e2e8f0; color: #0f172a; }
    .legal-body { overflow-y: auto; padding: 1.4rem 1.6rem 2rem; color: #334155; font-size: .9rem; line-height: 1.65; }
    .legal-body h4 { font-size: 1rem; font-weight: 800; color: #0f172a; margin: 1.5rem 0 .5rem; }
    .legal-body h5 { font-size: .9rem; font-weight: 700; color: #1e293b; margin: 1.1rem 0 .35rem; }
    .legal-body p { margin: 0 0 .7rem; }
    .legal-body ul { margin: 0 0 .8rem; padding-left: 1.2rem; }
    .legal-body li { margin-bottom: .3rem; }
    .legal-body strong { color: #0f172a; }
    .legal-body .legal-meta { font-size: .8rem; color: #94a3b8; margin-bottom: 1rem; }
    .legal-disclaimer { background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
      border-radius: 10px; padding: .8rem 1rem; font-size: .8rem; line-height: 1.55; margin-bottom: 1.4rem; }
    .legal-body table.legal-tbl { width: 100%; border-collapse: collapse; font-size: .82rem; margin: .3rem 0 1rem; }
    .legal-body table.legal-tbl th, .legal-body table.legal-tbl td {
      border: 1px solid #e5e9f0; padding: .45rem .6rem; text-align: left; vertical-align: top; }
    .legal-body table.legal-tbl th { background: #f8fafc; font-weight: 700; color: #334155; }
    .topbar .right { display: flex; align-items: center; gap: 1rem; }
    .topbar .user-email { font-size: .8rem; color: #6b7280; }
    .logout-btn {
      font-size: .8rem; color: #6b7280; background: none;
      border: 1px solid #e5e7eb; border-radius: .5rem;
      padding: .375rem .75rem; cursor: pointer; transition: all .15s;
    }
    .logout-btn:hover { color: #111; border-color: #d1d5db; }

    /* ══════════════════════════════════════════════════════════
       EINSTELLUNGS-MODAL — Kunden-Bereich
       ══════════════════════════════════════════════════════════ */

    /* Zahnrad-Button */
    .ks-gear-btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 36px; height: 36px;
      background: transparent; border: 1.5px solid #d1d5db; border-radius: 50%;
      color: #6b7280; cursor: pointer;
      transition: background .15s, color .15s, border-color .15s;
    }
    .ks-gear-btn:hover { background: #f3f4f6; color: #111827; border-color: #9ca3af; }
    .ks-gear-btn svg { transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
    .ks-gear-btn:hover svg { transform: rotate(45deg); }

    /* Overlay — position:fixed verhindert jedes "Bleed" in den Seitenfluss */
    .ks-overlay {
      position: fixed !important; inset: 0; z-index: 9500;
      background: rgba(0,0,0,.48); backdrop-filter: blur(3px);
      display: flex; align-items: center; justify-content: center;
    }
    .ks-overlay[style*="display: none"],
    .ks-overlay[style*="display:none"] { display: none !important; }

    /* Modal-Container */
    .ks-modal {
      background: #fff; border-radius: 18px;
      width: min(680px, 96vw); max-height: 88vh;
      display: flex; flex-direction: column;
      box-shadow: 0 24px 80px rgba(0,0,0,.22);
      animation: ksSlideUp .2s cubic-bezier(.34,1.2,.64,1);
      overflow: hidden;
    }
    @keyframes ksSlideUp { from { transform:translateY(20px);opacity:0 } to { transform:translateY(0);opacity:1 } }

    /* Header */
    .ks-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 1.25rem 1.5rem; border-bottom: 1px solid #f1f5f9; flex-shrink: 0;
    }
    .ks-header-left { display: flex; align-items: center; gap: .65rem; }
    .ks-header-left svg { color: #2563eb; }
    .ks-header h2 { font-size: 1.05rem; font-weight: 700; margin: 0; color: #111827; }
    .ks-close {
      background: none; border: none; font-size: 1.1rem; color: #9ca3af;
      cursor: pointer; line-height: 1; padding: .3rem .45rem; border-radius: 6px;
      transition: background .12s, color .12s;
    }
    .ks-close:hover { background: #f3f4f6; color: #374151; }

    /* Tab-Leiste */
    .ks-tabs {
      display: flex; padding: 0 1rem;
      border-bottom: 1px solid #e5e7eb; background: #fafafa;
      flex-shrink: 0; overflow-x: auto;
    }
    .ks-tab {
      display: inline-flex; align-items: center; gap: .4rem;
      padding: .85rem 1rem; font-size: .8rem; font-weight: 600;
      color: #6b7280; background: none; border: none;
      border-bottom: 2.5px solid transparent; cursor: pointer;
      white-space: nowrap; transition: color .15s, border-color .15s;
    }
    .ks-tab:hover { color: #374151; }
    .ks-tab.active { color: #2563eb; border-bottom-color: #2563eb; }

    /* Panes */
    .ks-pane { display: none; padding: 1.5rem; overflow-y: auto; flex: 1; min-height: 0; }
    .ks-pane.active { display: block; }

    /* Sections */
    .ks-section-title {
      font-size: .7rem; font-weight: 700; letter-spacing: .08em;
      text-transform: uppercase; color: #9ca3af; margin-bottom: 1rem;
    }

    /* Formular-Felder */
    .ks-field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
    .ks-field label { font-size: .82rem; font-weight: 600; color: #374151; }
    .ks-field input {
      padding: .6rem .8rem; border: 1.5px solid #d1d5db; border-radius: 10px;
      font-size: .875rem; color: #111827; background: #fff; outline: none;
      transition: border-color .15s, box-shadow .15s;
    }
    .ks-field input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
    .ks-hint { font-size: .75rem; color: #9ca3af; }
    .ks-form-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
    @media (max-width: 480px) { .ks-form-row.two { grid-template-columns: 1fr; } }

    /* Aktions-Leiste */
    .ks-actions {
      display: flex; align-items: center; justify-content: flex-end;
      gap: .75rem; margin-top: 1.5rem; padding-top: 1rem;
      border-top: 1px solid #f1f5f9;
    }
    .ks-btn-primary {
      padding: .6rem 1.4rem; background: linear-gradient(135deg,#2563eb,#1d4ed8);
      color: #fff; border: none; border-radius: 10px; font-size: .875rem;
      font-weight: 600; cursor: pointer;
      box-shadow: 0 2px 8px rgba(37,99,235,.28); transition: transform .12s, box-shadow .12s;
    }
    .ks-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(37,99,235,.38); }
    .ks-btn-danger {
      padding: .55rem 1.2rem; background: #fff; color: #dc2626;
      border: 1.5px solid #fca5a5; border-radius: 10px; font-size: .82rem;
      font-weight: 600; cursor: pointer; transition: background .12s, border-color .12s;
    }
    .ks-btn-danger:hover { background: #fef2f2; border-color: #f87171; }
    .ks-btn-secondary {
      padding: .55rem 1.2rem; background: #f1f5f9; color: #334155;
      border: 1px solid #e2e8f0; border-radius: 10px; font-size: .82rem;
      font-weight: 600; cursor: pointer; transition: background .12s;
    }
    .ks-btn-secondary:hover { background: #e6ebf2; }
    .ks-login-history { display: flex; flex-direction: column; gap: .1rem; }
    .ks-login-row { display: flex; align-items: center; gap: .55rem; font-size: .8rem; color: #475569;
      padding: .4rem 0; border-bottom: 1px solid #f5f7fa; }
    .ks-login-row:last-child { border-bottom: none; }
    .ks-login-row .ks-login-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; flex-shrink: 0; }
    .ks-login-row.old .ks-login-dot { background: #cbd5e1; }
    .ks-login-when { margin-left: auto; color: #94a3b8; font-size: .74rem; white-space: nowrap; }
    .ks-save-msg { font-size: .82rem; font-weight: 600; color: #059669; opacity: 0; transition: opacity .3s; }
    .ks-save-msg.show { opacity: 1; }
    .ks-save-msg.error { color: #dc2626; }

    /* Passwort */
    .ks-pw-wrap { position: relative; }
    .ks-pw-wrap input { width: 100%; box-sizing: border-box; padding-right: 2.6rem; }
    .ks-pw-toggle {
      position: absolute; right: .65rem; top: 50%; transform: translateY(-50%);
      background: none; border: none; color: #9ca3af; cursor: pointer;
      display: flex; align-items: center; transition: color .12s;
    }
    .ks-pw-toggle:hover { color: #374151; }
    .ks-pw-strength { display: flex; align-items: center; gap: .6rem; margin-top: .4rem; }
    .ks-pw-bar { flex: 1; height: 5px; background: #e5e7eb; border-radius: 3px; overflow: hidden; }
    .ks-pw-bar div { height: 100%; border-radius: 3px; transition: width .3s, background .3s; }
    #ks-pw-label { font-size: .75rem; font-weight: 600; min-width: 56px; text-align: right; }

    /* Divider + Info */
    .ks-divider { height: 1px; background: #f1f5f9; margin: 1.5rem 0; }
    .ks-info-row { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: #6b7280; margin-bottom: .75rem; }
    .ks-info-row strong { color: #374151; }

    /* Toggles */
    .ks-toggle-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: .85rem 0; border-bottom: 1px solid #f1f5f9;
    }
    .ks-toggle-row:last-of-type { border-bottom: none; }
    .ks-toggle-info { display: flex; flex-direction: column; gap: .15rem; padding-right: 1rem; }
    .ks-toggle-label { font-size: .875rem; font-weight: 600; color: #111827; }
    .ks-toggle-sub   { font-size: .78rem; color: #9ca3af; }
    .ks-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
    .ks-switch input { opacity: 0; width: 0; height: 0; }
    .ks-slider { position: absolute; inset: 0; background: #d1d5db; border-radius: 24px; cursor: pointer; transition: background .2s; }
    .ks-slider:before {
      content: ''; position: absolute;
      width: 18px; height: 18px; left: 3px; bottom: 3px;
      background: #fff; border-radius: 50%;
      transition: transform .2s; box-shadow: 0 1px 4px rgba(0,0,0,.18);
    }
    .ks-switch input:checked + .ks-slider { background: #2563eb; }
    .ks-switch input:checked + .ks-slider:before { transform: translateX(18px); }

    /* Rechtliches */
    .ks-legal-link {
      display: flex; align-items: center; gap: .9rem;
      padding: 1rem; border: 1.5px solid #e5e7eb; border-radius: 12px;
      text-decoration: none; color: #374151; margin-bottom: .65rem;
      transition: border-color .15s, background .15s; cursor: pointer;
    }
    .ks-legal-link:hover { border-color: #2563eb; background: #eff6ff; }
    .ks-legal-link > svg:first-child { color: #2563eb; flex-shrink: 0; }
    .ks-legal-info { display: flex; flex-direction: column; flex: 1; gap: .1rem; }
    .ks-legal-title { font-size: .875rem; font-weight: 600; color: #111827; }
    .ks-legal-sub   { font-size: .75rem; color: #9ca3af; }
    .ks-legal-arrow { color: #d1d5db; flex-shrink: 0; }
    .ks-legal-link:hover .ks-legal-arrow { color: #2563eb; }
    .ks-legal-version { display: flex; justify-content: space-between; margin-top: 1.5rem; font-size: .72rem; color: #d1d5db; }

    /* ── Kunden-Switcher ─────────────────────────────────── */
    .switcher-wrap { position: relative; }
    .switcher-btn {
      display: flex; align-items: center; gap: .45rem;
      font-size: .8rem; font-weight: 600; color: #374151;
      background: #f8fafc; border: 1.5px solid #e5e7eb;
      border-radius: .55rem; padding: .38rem .85rem;
      cursor: pointer; transition: all .15s;
    }
    .switcher-btn:hover { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
    .switcher-btn .sw-dot {
      width: 8px; height: 8px; border-radius: 50%; background: #22c55e;
      box-shadow: 0 0 0 2px rgba(34,197,94,.2); flex-shrink: 0;
    }
    .switcher-btn .sw-arrow { font-size: .6rem; color: #9ca3af; transition: transform .2s; }
    .switcher-btn.open .sw-arrow { transform: rotate(180deg); }

    /* Das Panel */
    .switcher-panel {
      display: none; position: absolute; top: calc(100% + 8px); right: 0;
      width: 280px; background: #fff;
      border: 1.5px solid #e5e7eb; border-radius: 1rem;
      box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
      z-index: 50; overflow: hidden;
      animation: sw-pop .18s cubic-bezier(.34,1.56,.64,1);
    }
    .switcher-panel.open { display: block; }
    @keyframes sw-pop {
      from { transform: scale(.95) translateY(-4px); opacity: 0; }
      to   { transform: scale(1)   translateY(0);    opacity: 1; }
    }
    .sw-panel-head {
      padding: .85rem 1rem .6rem;
      border-bottom: 1px solid #f1f5f9;
      display: flex; align-items: center; justify-content: space-between;
    }
    .sw-panel-head span { font-size: .72rem; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: .06em; }
    .sw-panel-head small { font-size: .7rem; color: #cbd5e1; }
    .sw-list { max-height: 280px; overflow-y: auto; padding: .4rem; }
    .sw-item {
      display: flex; align-items: center; gap: .75rem;
      padding: .65rem .75rem; border-radius: .65rem; cursor: pointer;
      transition: background .12s; border: 1.5px solid transparent;
    }
    .sw-item:hover { background: #f0f9ff; border-color: #bae6fd; }
    .sw-avatar {
      width: 36px; height: 36px; border-radius: 10px;
      background: linear-gradient(135deg, #2563eb, #7c3aed);
      display: flex; align-items: center; justify-content: center;
      font-size: .8rem; font-weight: 800; color: #fff; flex-shrink: 0;
      text-transform: uppercase;
    }
    .sw-info { flex: 1; min-width: 0; }
    .sw-name  { font-size: .83rem; font-weight: 700; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sw-email { font-size: .72rem; color: #9ca3af; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sw-arrow-icon { font-size: .75rem; color: #cbd5e1; }
    .sw-empty {
      padding: 1.5rem 1rem; text-align: center;
      font-size: .8rem; color: #9ca3af;
    }
    .sw-panel-foot {
      padding: .6rem; border-top: 1px solid #f1f5f9;
    }
    .sw-back-btn {
      width: 100%; padding: .55rem; border-radius: .6rem;
      background: #f8fafc; border: 1.5px solid #e5e7eb;
      font-size: .78rem; font-weight: 600; color: #6b7280;
      cursor: pointer; transition: all .15s;
    }
    .sw-back-btn:hover { background: #fee2e2; border-color: #fca5a5; color: #dc2626; }
    /* Indikator wenn man als Kunde schaut */
    .sw-impersonate-bar {
      display: none; background: #1e40af; color: #bfdbfe;
      font-size: .75rem; font-weight: 600; padding: .4rem 2rem;
      text-align: center; gap: 1rem; align-items: center; justify-content: center;
    }
    .sw-impersonate-bar.show { display: flex; }
    .sw-impersonate-bar button {
      background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3);
      color: #fff; font-size: .72rem; font-weight: 700; border-radius: .4rem;
      padding: .2rem .65rem; cursor: pointer; transition: background .15s;
    }
    .sw-impersonate-bar button:hover { background: rgba(255,255,255,.28); }

    /* ══════════════════════════════════════════════════════════════
       ADMIN DASHBOARD – REDESIGN
       ══════════════════════════════════════════════════════════════ */

    /* Body-Hintergrund: minimal getöntes Slate-Grau */
    body { background: #f1f5f9; }

    /* ── Page-Wrapper ─────────────────────────────────────────────── */
    .admin-main {
      max-width: 1200px;
      margin: 0 auto;
      padding: 1.75rem 1.5rem 3rem;
    }

    /* ── Page-Header ──────────────────────────────────────────────── */
    .admin-page-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 1.75rem;
      flex-wrap: wrap;
      gap: .75rem;
    }
    .admin-page-header h2 {
      font-size: 1.55rem;
      font-weight: 800;
      color: #0f172a;
      letter-spacing: -.02em;
      line-height: 1.2;
    }
    .admin-page-header .sub {
      color: #94a3b8;
      font-size: .82rem;
      margin-top: .2rem;
      font-weight: 400;
    }
    .admin-page-header .header-date {
      font-size: .78rem;
      color: #94a3b8;
      background: #fff;
      border: 1px solid #e2e8f0;
      padding: .35rem .75rem;
      border-radius: 99px;
      white-space: nowrap;
    }

    /* ── Quick-Stats-Zeile ────────────────────────────────────────── */
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: .85rem;
      margin-bottom: 1rem;
    }
    @media (max-width: 900px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 500px) { .stats-grid { grid-template-columns: 1fr; } }

    .stat-card {
      background: #fff;
      border: 1px solid #e8edf5;
      border-radius: 1rem;
      padding: 1rem 1.25rem;
      display: flex;
      align-items: center;
      gap: .85rem;
      box-shadow: 0 1px 4px rgba(15,23,42,.04);
      transition: box-shadow .2s;
      cursor: default;
    }
    .stat-card:hover { box-shadow: 0 4px 16px rgba(15,23,42,.07); }
    .stat-icon {
      width: 38px; height: 38px; flex-shrink: 0;
      border-radius: .6rem;
      display: flex; align-items: center; justify-content: center;
      font-size: 1rem;
    }
    .stat-icon.blue   { background: #eff6ff; }
    .stat-icon.green  { background: #f0fdf4; }
    .stat-icon.violet { background: #f5f3ff; }
    .stat-icon.amber  { background: #fffbeb; }
    .stat-body { min-width: 0; }
    .stat-value {
      font-size: 1.45rem;
      font-weight: 800;
      color: #0f172a;
      line-height: 1;
      letter-spacing: -.03em;
    }
    .stat-label {
      font-size: .68rem;
      font-weight: 500;
      color: #94a3b8;
      text-transform: uppercase;
      letter-spacing: .05em;
      margin-top: .22rem;
    }

    /* ── Haupt-Grid (2 Spalten) ───────────────────────────────────── */
    .dashboard-grid {
      display: grid;
      grid-template-columns: 1fr 380px;
      gap: .85rem;
      align-items: start;
    }
    @media (max-width: 1024px) { .dashboard-grid { grid-template-columns: 1fr; } }

    .dashboard-col { display: flex; flex-direction: column; gap: .85rem; }

    /* ── Universelle Card ─────────────────────────────────────────── */
    /* ── Unified Card System ──────────────────────────────────────── */
    .card {
      background: #fff;
      border: 1px solid #e8edf5;
      border-radius: 1rem;
      padding: 1.35rem 1.5rem;
      box-shadow: 0 1px 4px rgba(15,23,42,.04);
      transition: box-shadow .2s;
    }
    .card:hover { box-shadow: 0 4px 16px rgba(15,23,42,.07); }

    /* Card-Header */
    .card-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: 1.1rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid #f1f5f9;
    }
    .card-title-group { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
    .card h3 {
      font-size: .9rem;
      font-weight: 700;
      color: #0f172a;
      letter-spacing: -.01em;
      display: flex;
      align-items: center;
      gap: .45rem;
      margin: 0;
    }
    .card h3 .card-icon {
      width: 24px; height: 24px;
      border-radius: .45rem;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: .78rem;
      flex-shrink: 0;
    }
    .card h3 .card-icon.blue   { background: #eff6ff; }
    .card h3 .card-icon.green  { background: #f0fdf4; }
    .card h3 .card-icon.violet { background: #f5f3ff; }
    .card h3 .card-icon.amber  { background: #fffbeb; }
    .card-subtitle {
      font-size: .71rem;
      color: #94a3b8;
      font-weight: 400;
      margin-top: .1rem;
    }

    /* ── Buttons (verbessert) ─────────────────────────────────────── */
    .btn-primary {
      background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
      color: #fff; font-weight: 600; font-size: .83rem;
      padding: .65rem 1.25rem; border: none; border-radius: .75rem;
      cursor: pointer; transition: all .18s; letter-spacing: .01em;
      box-shadow: 0 2px 8px rgba(37,99,235,.3);
      display: inline-flex; align-items: center; gap: .4rem;
    }
    .btn-primary:hover {
      background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
      box-shadow: 0 4px 14px rgba(37,99,235,.4);
      transform: translateY(-1px);
    }
    .btn-primary:active  { transform: translateY(0); }
    .btn-primary:disabled { background: #93c5fd; box-shadow: none; cursor: not-allowed; transform: none; }
    .btn-primary.full { width: 100%; justify-content: center; }

    .btn-secondary {
      background: #fff; color: #374151; border: 1px solid #e8edf5;
      font-weight: 600; font-size: .78rem; padding: .45rem .9rem;
      border-radius: .6rem; cursor: pointer; transition: all .15s;
      display: inline-flex; align-items: center; gap: .35rem;
      white-space: nowrap; flex-shrink: 0;
    }
    .btn-secondary:hover {
      border-color: #2563eb; color: #2563eb; background: #eff6ff;
    }

    /* ── Empty States ─────────────────────────────────────────────── */
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 2.5rem 1rem;
      text-align: center;
      gap: .65rem;
    }
    .empty-state-icon {
      width: 52px; height: 52px;
      background: #f1f5f9;
      border-radius: 1rem;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.4rem;
      margin-bottom: .25rem;
    }
    .empty-state h4 {
      font-size: .875rem; font-weight: 600; color: #374151;
    }
    .empty-state p {
      font-size: .78rem; color: #94a3b8; max-width: 220px; line-height: 1.5;
    }

    /* ── Kunden-Liste (verbessert) ────────────────────────────────── */
    .c-row {
      display: flex; align-items: center; gap: .75rem;
      padding: .7rem .5rem;
      border-radius: .65rem;
      transition: background .15s;
      cursor: default;
    }
    .c-row:hover { background: #f8fafc; }
    .c-row + .c-row { border-top: 1px solid #f1f5f9; }

    .c-avatar {
      width: 34px; height: 34px; flex-shrink: 0;
      border-radius: 99px;
      background: linear-gradient(135deg, #2563eb, #7c3aed);
      color: #fff; font-size: .72rem; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
      text-transform: uppercase; letter-spacing: .03em;
    }
    .c-info { flex: 1; min-width: 0; }
    .c-name {
      font-size: .875rem; font-weight: 600; color: #0f172a;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .c-email {
      font-size: .72rem; color: #94a3b8; margin-top: .05rem;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .c-actions { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; }
    .c-action-link {
      font-size: .72rem; font-weight: 600; color: #94a3b8;
      cursor: pointer; padding: .25rem .5rem; border-radius: .4rem;
      transition: all .12s; border: none; background: none;
      text-decoration: none;
    }
    .c-action-link:hover { color: #ef4444; background: #fef2f2; }
    .c-action-link.restore:hover { color: #2563eb; background: #eff6ff; }

    /* ── Website-Zeilen (verbessert) ──────────────────────────────── */
    .ws-row {
      display: flex; justify-content: space-between; align-items: center;
      padding: .75rem .5rem;
      border-radius: .65rem;
      transition: background .15s;
    }
    .ws-row:hover { background: #f8fafc; }
    .ws-row + .ws-row { border-top: 1px solid #f1f5f9; }
    .ws-row .ws-name { font-weight: 600; font-size: .875rem; color: #0f172a; }
    .ws-row .ws-meta { font-size: .72rem; color: #94a3b8; margin-top: .1rem; }
    .ws-row a {
      font-size: .75rem; font-weight: 600; color: #2563eb;
      text-decoration: none; padding: .25rem .5rem; border-radius: .4rem;
      transition: background .12s;
    }
    .ws-row a:hover { background: #eff6ff; }

    /* ── Inbox-Liste (verbessert) ─────────────────────────────────── */
    .inbox-item {
      padding: .85rem .5rem;
      border-radius: .65rem;
      transition: background .15s;
    }
    .inbox-item:hover { background: #f8fafc; }
    .inbox-item + .inbox-item { border-top: 1px solid #f1f5f9; }
    .inbox-empty {
      color: #94a3b8; font-size: .82rem;
      text-align: center; padding: 1.5rem 0;
    }

    /* Drop-Zone (verbessert) */
    .drop-zone {
      border: 2px dashed #cbd5e1; border-radius: 1rem;
      padding: 2.5rem 1.5rem; text-align: center; cursor: pointer;
      transition: all .18s; background: #f8fafc;
      position: relative;
    }
    .drop-zone:hover, .drop-zone.drag-over {
      border-color: #2563eb; background: #eff6ff;
    }
    .drop-zone.has-file { border-color: #16a34a; background: #f0fdf4; border-style: solid; }
    .drop-zone .drop-icon { font-size: 2rem; margin-bottom: .6rem; }
    .drop-zone p { color: #64748b; font-size: .85rem; }
    .drop-zone p strong { color: #1e293b; }

    /* ── Separatoren & Section-Labels ────────────────────────────── */
    .section-divider {
      display: flex; align-items: center; gap: .5rem;
      margin: 1rem 0 .75rem;
    }
    .section-divider span {
      font-size: .68rem; font-weight: 700; color: #94a3b8;
      text-transform: uppercase; letter-spacing: .08em;
      white-space: nowrap;
    }
    .section-divider::before, .section-divider::after {
      content: ''; flex: 1; height: 1px; background: #f1f5f9;
    }

    /* Count-Badge auf Card-Titeln */
    .count-badge {
      font-size: .68rem; font-weight: 700;
      background: #f1f5f9; color: #64748b;
      border: 1px solid #e2e8f0;
      border-radius: 99px; padding: .1rem .45rem;
      transition: background .15s, color .15s;
    }
    .count-badge.has-items { background: #eff6ff; color: #2563eb; border-color: #bfdbfe; }

    /* Drag & Drop Zone */
    .drop-zone {
      border: 2px dashed #d1d5db; border-radius: 1rem;
      padding: 3rem 2rem; text-align: center; cursor: pointer;
      transition: all .15s; background: #f9fafb;
    }
    .drop-zone:hover, .drop-zone.drag-over {
      border-color: #2563eb; background: #eff6ff;
    }
    .drop-zone.has-file { border-color: #16a34a; background: #f0fdf4; }
    .drop-zone .drop-icon { font-size: 2.5rem; margin-bottom: .75rem; }
    .drop-zone p { color: #6b7280; font-size: .9rem; }
    .drop-zone p strong { color: #374151; }

    /* Parsed-Blocks-Preview */
    .blocks-preview {
      margin-top: 1rem; padding: .75rem 1rem;
      background: #eff6ff; border: 1px solid #bfdbfe; border-radius: .75rem;
      font-size: .8rem; color: #1d4ed8;
    }
    .blocks-preview .tag {
      display: inline-block; background: #fff; border: 1px solid #bfdbfe;
      border-radius: 999px; padding: .2rem .6rem; margin: .2rem; font-size: .75rem;
    }
    .warn-box {
      margin-top: .75rem; padding: .6rem 1rem;
      background: #fffbeb; border: 1px solid #fcd34d; border-radius: .75rem;
      font-size: .8rem; color: #92400e;
    }

    /* Form-Felder */
    .form-row { margin-bottom: 1rem; }
    .form-row label { display: block; font-size: .85rem; font-weight: 500; color: #374151; margin-bottom: .4rem; }
    .form-row input, .form-row select {
      width: 100%; border: 1.5px solid #e5e7eb; border-radius: .6rem;
      padding: .6rem .9rem; font-size: .875rem; outline: none;
      transition: border-color .15s; background: #fff;
    }
    .form-row input:focus, .form-row select:focus { border-color: #2563eb; }

    .btn-primary {
      width: 100%; background: #2563eb; color: #fff; font-weight: 600;
      font-size: .875rem; padding: .75rem; border: none; border-radius: .75rem;
      cursor: pointer; transition: background .15s; margin-top: .5rem;
    }
    .btn-primary:hover    { background: #1d4ed8; }
    .btn-primary:disabled { background: #93c5fd; cursor: not-allowed; }

    .success-msg { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; border-radius: .6rem; padding: .6rem .9rem; font-size: .85rem; margin-top: .75rem; }
    .error-box   { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; border-radius: .6rem; padding: .6rem .9rem; font-size: .85rem; margin-top: .75rem; }

    /* Websites-Liste */
    .ws-row { display: flex; justify-content: space-between; align-items: center; padding: .85rem 0; border-bottom: 1px solid #f3f4f6; }
    .ws-row:last-child { border: none; }
    .ws-row .ws-name { font-weight: 600; font-size: .9rem; color: #111; }
    .ws-row .ws-meta { font-size: .75rem; color: #9ca3af; }
    .ws-row a { font-size: .8rem; color: #2563eb; text-decoration: none; margin-left: .75rem; }
    .ws-row a:hover { text-decoration: underline; }
    /* ── Archivierte Website-Zeile ──────────────────────────────── */
    .ws-row.ws-archived .ws-name { color: #9ca3af; font-weight: 500; }
    .ws-row.ws-archived .ws-meta { color: #d1d5db; }
    .ws-row.ws-archived a        { color: #9ca3af; }
    .ws-archived-badge {
      font-size: .65rem; font-weight: 600; color: #6b7280;
      background: #f3f4f6; border: 1px solid #e5e7eb;
      border-radius: 99px; padding: .1rem .45rem; margin-left: .45rem;
    }
    /* ── Website-Archiv-Accordion ───────────────────────────────── */
    .ws-arc-accordion { border-top: 1px solid #f3f4f6; margin-top: .25rem; }
    .ws-arc-header {
      display: flex; align-items: center; gap: .45rem;
      padding: .6rem 0; cursor: pointer; user-select: none;
      transition: color .12s;
    }
    .ws-arc-header:hover .ws-arc-label { color: #6b7280; }
    .ws-arc-label {
      flex: 1; font-size: .72rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: .065em; color: #9ca3af;
    }
    .ws-arc-pill {
      font-size: .65rem; font-weight: 700; color: #9ca3af;
      background: #f3f4f6; border: 1px solid #e5e7eb;
      border-radius: 99px; padding: .1rem .48rem;
    }
    .ws-arc-chevron {
      font-size: .68rem; color: #c4c9d4;
      transition: transform .22s cubic-bezier(.4,0,.2,1);
    }
    .ws-arc-accordion.open .ws-arc-chevron { transform: rotate(180deg); }
    .ws-arc-body {
      max-height: 0; overflow: hidden;
      transition: max-height .28s cubic-bezier(.4,0,.2,1);
    }
    .ws-arc-accordion.open .ws-arc-body { max-height: 800px; }

    /* Kunden-Liste im Admin */
    .customer-row { display: flex; justify-content: space-between; align-items: center; padding: .75rem 0; border-bottom: 1px solid #f3f4f6; }
    .customer-row:last-child { border: none; }
    .customer-row .c-name { font-weight: 600; font-size: .875rem; color: #111; }
    .customer-row .c-email { font-size: .75rem; color: #6b7280; }
    .customer-row .c-del { font-size: .75rem; color: #ef4444; cursor: pointer; border: none; background: none; }
    .customer-row .c-del:hover { text-decoration: underline; }

    /* ── Kundenliste: Suchleiste ────────────────────────────────────── */

    /* ── Website-Status-Badge ────────────────────────────────────────── */
    .ws-badge { display: inline-flex; align-items: center; gap: .25rem; font-size: .68rem; font-weight: 600; padding: .12rem .45rem; border-radius: 999px; margin-top: .25rem; line-height: 1; }
    .ws-badge.active { background: #dcfce7; color: #16a34a; }
    .ws-badge.none   { background: #f3f4f6; color: #9ca3af; }
    .ws-badge-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
    .ws-badge.active .ws-badge-dot { background: #16a34a; }
    .ws-badge.none   .ws-badge-dot { background: #d1d5db; }
    /* Chat-Sidebar: kleiner Indikator-Punkt */
    .ac-ws-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-left: .3rem; vertical-align: middle; flex-shrink: 0; }
    .ac-ws-dot.active { background: #22c55e; }
    .ac-ws-dot.none   { background: #d1d5db; }

    /* ── Upload-Card: kompakt ───────────────────────────────────── */
    #upload-card .drop-zone--compact { padding: 1rem .75rem; min-height: 72px; }
    #upload-card .drop-zone--compact .drop-icon { font-size: 1.1rem; margin-bottom: .25rem; }
    #upload-card .drop-zone--compact p { font-size: .8rem; margin: 0; }
    #upload-card-body { transition: max-height .25s ease, opacity .25s ease; }
    #upload-card-body.collapsed { max-height: 0; overflow: hidden; opacity: 0; }

    /* ── Kunden-Tag-Chips in der Kundenliste ─────────────────────── */
    .c-tag-row {
      display: flex; flex-wrap: wrap; gap: .25rem;
      margin-top: .3rem;
    }
    .c-tag-chip {
      display: inline-flex; align-items: center;
      padding: .13rem .48rem;
      border-radius: 99px;
      font-size: .67rem; font-weight: 600;
      border: 1.5px solid transparent;
      white-space: nowrap;
      /* Responsive: chips brechen sanft um, Layout bricht nicht */
      max-width: 100%;
      overflow: hidden; text-overflow: ellipsis;
    }

    /* ── Chat-Header: neue zweizeilige Struktur ──────────────────── */
    .ac-pane-header {
      padding: .6rem 1rem !important;
    }
    .ac-header-top {
      display: flex; align-items: center; gap: .5rem;
    }
    .ac-header-email {
      font-weight: 600; font-size: .9rem; color: #1e293b;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      flex: 1; min-width: 0;
    }

    /* Tag-Pill-Button in der Header-Zeile */
    .ac-tag-trigger {
      display: inline-flex; align-items: center; gap: .3rem;
      padding: .2rem .55rem;
      border-radius: 99px;
      background: #f1f5f9; border: 1.5px solid #e2e8f0;
      font-size: .7rem; font-weight: 600; color: #475569;
      cursor: pointer;
      transition: background .15s, border-color .15s;
      flex-shrink: 0; white-space: nowrap;
      position: relative;    /* Anker für das Popover */
    }
    .ac-tag-trigger:hover { background: #e2e8f0; border-color: #cbd5e1; }
    .ac-tag-trigger.has-tags { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
    .ac-tag-trigger svg { flex-shrink: 0; }

    /* Popover mit allen Tags */
    .ac-tag-popover {
      position: absolute;
      top: calc(100% + 6px); right: 0;
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      box-shadow: 0 8px 24px rgba(0,0,0,.12);
      padding: .7rem .8rem;
      min-width: 160px; max-width: 220px;
      z-index: 200;
      display: flex; flex-direction: column; gap: .35rem;
      opacity: 0; pointer-events: none;
      transform: translateY(-4px);
      transition: opacity .18s, transform .18s;
    }
    .ac-tag-popover.open {
      opacity: 1; pointer-events: all;
      transform: translateY(0);
    }
    .ac-tag-popover-label {
      font-size: .67rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .06em; color: #94a3b8; margin-bottom: .1rem;
    }
    .ac-tag-popover-pills {
      display: flex; flex-wrap: wrap; gap: .28rem;
    }
    .ac-tag-popover-empty {
      font-size: .75rem; color: #94a3b8; font-style: italic;
    }
    /* Archivierte Kunden */
    .customer-row.archived .c-name  { color: #9ca3af; }
    .customer-row.archived .c-email { color: #c4c9d2; }
    .c-archived-badge {
      font-size: .65rem; font-weight: 600; color: #6b7280;
      background: #f3f4f6; border: 1px solid #e5e7eb;
      border-radius: 99px; padding: .1rem .5rem; margin-left: .45rem;
      vertical-align: middle;
    }
    .c-restore {
      font-size: .75rem; color: #2563eb; cursor: pointer;
      border: none; background: none; margin-left: .5rem;
    }
    .c-restore:hover { text-decoration: underline; }
    .c-hard-del {
      font-size: .72rem; color: #dc2626; cursor: pointer;
      border: 1px solid #fca5a5; background: #fff1f2;
      border-radius: 4px; padding: 2px 7px;
      transition: background .15s;
    }
    .c-hard-del:hover { background: #fee2e2; }

    /* Anklickbarer Kundenname → öffnet Profil-Modal */
    .c-name-link {
      cursor: pointer;
      display: inline-flex; align-items: center; gap: .3rem;
      transition: color .15s;
    }
    .c-name-link:hover { color: #2563eb; }
    .c-name-link:hover .c-name-icon { opacity: 1; }
    .c-name-icon {
      opacity: 0;
      transition: opacity .15s;
      flex-shrink: 0;
      color: #2563eb;
    }


    /* ── Mülleimer-Icon in Archiv-Listen ──────────────────────────── */
    .hd-trash-btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 28px; height: 28px;
      border: none; background: transparent;
      border-radius: 6px;
      cursor: pointer;
      color: #9ca3af;          /* grau im Ruhezustand */
      transition: color .18s, background .18s;
      flex-shrink: 0;
    }
    .hd-trash-btn:hover {
      color: #dc2626;           /* rot beim Hover */
      background: #fff1f2;
    }
    .hd-trash-btn svg { pointer-events: none; }

    /* Fade-out beim Löschen */
    @keyframes hd-fadeout {
      0%   { opacity: 1; transform: scaleY(1); max-height: 80px; }
      60%  { opacity: 0; transform: scaleY(.7); }
      100% { opacity: 0; transform: scaleY(0); max-height: 0; padding: 0; margin: 0; }
    }
    .hd-removing {
      animation: hd-fadeout .38s ease forwards;
      overflow: hidden;
      pointer-events: none;
    }

    /* ── Danger-Confirmation-Modal ─────────────────────────────────── */
    #hd-modal-backdrop {
      position: fixed; inset: 0;
      background: rgba(15,15,15,.45);
      backdrop-filter: blur(3px);
      display: flex; align-items: center; justify-content: center;
      z-index: 9999;
      opacity: 0; pointer-events: none;
      transition: opacity .2s;
    }
    #hd-modal-backdrop.show {
      opacity: 1; pointer-events: all;
    }
    #hd-modal {
      background: #fff;
      border-radius: 14px;
      box-shadow: 0 20px 60px rgba(0,0,0,.22), 0 4px 16px rgba(220,38,38,.12);
      width: 440px; max-width: calc(100vw - 32px);
      padding: 32px 28px 24px;
      transform: translateY(12px) scale(.97);
      transition: transform .22s cubic-bezier(.34,1.5,.64,1);
      display: flex; flex-direction: column; gap: 0;
    }
    #hd-modal-backdrop.show #hd-modal {
      transform: translateY(0) scale(1);
    }
    /* Roter Warn-Streifen oben */
    #hd-modal::before {
      content: '';
      display: block;
      height: 4px;
      background: linear-gradient(90deg, #ef4444, #dc2626);
      border-radius: 99px;
      margin-bottom: 24px;
    }
    #hd-modal-icon {
      width: 48px; height: 48px;
      background: #fff1f2;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 16px;
      color: #dc2626;
    }
    #hd-modal-title {
      font-size: 1.05rem; font-weight: 700; color: #111827;
      margin: 0 0 8px;
    }
    #hd-modal-body {
      font-size: .88rem; color: #4b5563; line-height: 1.55;
      margin: 0 0 6px;
    }
    #hd-modal-subject {
      font-size: .85rem; color: #1d4ed8;
      background: #eff6ff; border-radius: 6px;
      padding: 7px 11px; margin: 10px 0 20px;
      font-weight: 500; word-break: break-all;
    }
    #hd-modal-warn {
      font-size: .78rem; color: #b91c1c;
      background: #fff1f2; border-radius: 6px; padding: 7px 11px;
      margin-bottom: 24px; font-weight: 500;
      display: flex; align-items: flex-start; gap: 6px;
    }
    #hd-modal-warn svg { flex-shrink: 0; margin-top: 1px; }
    .hd-modal-actions {
      display: flex; justify-content: flex-end; gap: 10px;
    }
    #hd-modal-cancel {
      padding: 9px 18px; border-radius: 8px;
      border: 1px solid #d1d5db; background: #f9fafb;
      font-size: .88rem; font-weight: 500; cursor: pointer; color: #374151;
      transition: background .15s;
    }
    #hd-modal-cancel:hover { background: #f3f4f6; }
    #hd-modal-confirm {
      padding: 9px 20px; border-radius: 8px;
      border: none; background: #dc2626;
      font-size: .88rem; font-weight: 600; cursor: pointer; color: #fff;
      transition: background .15s, transform .1s;
      display: flex; align-items: center; gap: 6px;
    }
    #hd-modal-confirm:hover  { background: #b91c1c; }
    #hd-modal-confirm:active { transform: scale(.97); }
    #hd-modal-confirm.loading {
      opacity: .7; pointer-events: none;
    }
    #hd-modal-confirm.loading::after {
      content: '';
      width: 14px; height: 14px;
      border: 2px solid rgba(255,255,255,.4);
      border-top-color: #fff;
      border-radius: 50%;
      animation: spin .6s linear infinite;
      display: inline-block;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* Archiv-Accordion im Kundenliste-Bereich */
    .c-archive-divider {
      display: flex; align-items: center; gap: .5rem;
      padding: .6rem 0 .35rem; cursor: pointer; user-select: none;
    }
    .c-archive-divider span {
      font-size: .72rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .06em; color: #9ca3af;
    }
    .c-archive-divider .c-arc-count {
      background: #f3f4f6; color: #6b7280;
      font-size: .68rem; font-weight: 600;
      border-radius: 99px; padding: .1rem .5rem;
    }
    .c-archive-divider .c-arc-chevron {
      margin-left: auto; font-size: .7rem; color: #9ca3af;
      transition: transform .2s;
    }
    .c-archive-divider.open .c-arc-chevron { transform: rotate(180deg); }
    #c-archive-list { display: none; }
    #c-archive-list.open { display: block; }
    .btn-secondary {
      background: #fff; color: #374151; font-weight: 600; font-size: .8rem;
      padding: .5rem 1rem; border: 1.5px solid #e5e7eb; border-radius: .6rem;
      cursor: pointer; transition: all .15s;
    }
    .btn-secondary:hover { border-color: #2563eb; color: #2563eb; }
    .add-customer-form { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #f3f4f6; display: none; }

    /* ── Neukunden PDF-Dropzone ─────────────────────────────── */
    .nc-pdf-drop {
      border: 1.5px dashed #c7d2e0; border-radius: .65rem;
      padding: 1rem 1.1rem; display: flex; align-items: center; gap: .75rem;
      cursor: pointer; transition: border-color .18s, background .18s;
      background: #f8fafc; color: #64748b; font-size: .83rem;
      position: relative; user-select: none;
    }
    .nc-pdf-drop:hover, .nc-pdf-drop.drag-over {
      border-color: #2563eb; background: #eff6ff; color: #1d4ed8;
    }
    .nc-pdf-drop svg { flex-shrink: 0; opacity: .5; }
    .nc-pdf-drop input[type=file] {
      position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
    }
    .nc-pdf-drop.loading {
      pointer-events: none; border-style: solid; border-color: #bfdbfe;
      background: #eff6ff; color: #3b82f6;
    }
    .nc-pdf-drop.done {
      pointer-events: none; border-style: solid; border-color: #86efac;
      background: #f0fdf4; color: #15803d;
    }
    .nc-pdf-spinner {
      display: none; width: 15px; height: 15px; flex-shrink: 0;
      border: 2px solid #bfdbfe; border-top-color: #2563eb;
      border-radius: 50%; animation: nc-spin .7s linear infinite;
    }
    .nc-pdf-drop.loading .nc-pdf-spinner { display: block; }
    .nc-pdf-drop.loading .nc-pdf-icon   { display: none; }
    @keyframes nc-spin { to { transform: rotate(360deg); } }

    /* Manuelle Felder unterhalb der Dropzone */
    .nc-fields {
      margin-top: .75rem; display: flex; gap: .75rem; flex-wrap: wrap;
    }
    .nc-fields-hint {
      font-size: .72rem; color: #94a3b8; margin: .35rem 0 .6rem;
      display: flex; align-items: center; gap: .35rem;
    }

    /* Grüner Flash wenn KI Felder befüllt */
    @keyframes field-flash-anim {
      0%   { background: #dcfce7; box-shadow: 0 0 0 2px #86efac; }
      70%  { background: #dcfce7; box-shadow: 0 0 0 2px #86efac; }
      100% { background: ''; box-shadow: none; }
    }
    .field-flash { animation: field-flash-anim .9s ease forwards; border-radius: .4rem; }

    /* Toast-Slide-in */
    @keyframes nc-toast-in {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ── Posteingang (Inbox) ─────────────────────────────── */
    .inbox-empty {
      text-align: center; padding: 2rem 1rem;
      color: #9ca3af; font-size: .875rem;
    }
    .inbox-item {
      display: flex; align-items: flex-start; gap: 1rem;
      padding: 1rem 0; border-bottom: 1px solid #f3f4f6;
    }
    .inbox-item:last-child { border: none; }
    .inbox-icon {
      width: 40px; height: 40px; border-radius: 10px;
      background: #eff6ff; border: 1px solid #dbeafe; color: #2563eb;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; font-size: 1.1rem;
    }
    .inbox-info { flex: 1; min-width: 0; }
    .inbox-name {
      font-weight: 700; font-size: .9rem; color: #111;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .inbox-meta { font-size: .75rem; color: #9ca3af; margin-top: .15rem; }
    .inbox-notes {
      font-size: .78rem; color: #6b7280; margin-top: .3rem;
      background: #f8fafc; border-radius: .45rem; padding: .35rem .6rem;
      border-left: 2px solid #bfdbfe;
    }
    .inbox-assign-btn {
      flex-shrink: 0; background: #2563eb; color: #fff;
      border: none; border-radius: .6rem; padding: .45rem 1rem;
      font-size: .8rem; font-weight: 600; cursor: pointer;
      transition: background .15s; white-space: nowrap;
    }
    .inbox-assign-btn:hover { background: #1d4ed8; }

    /* ── Zuweisungs-Modal ─────────────────────────────────── */
    #assign-modal-overlay {
      display: none; position: fixed; inset: 0;
      background: rgba(15,23,42,.5); backdrop-filter: blur(3px);
      z-index: 1200; align-items: center; justify-content: center; padding: 1rem;
    }
    #assign-modal-overlay.open { display: flex; }
    #assign-modal {
      background: #fff; border-radius: 1.25rem; width: 100%; max-width: 460px;
      box-shadow: 0 24px 60px rgba(15,23,42,.2); overflow: hidden;
    }
    .am-header {
      background: linear-gradient(135deg, #1e40af, #2563eb);
      padding: 1.25rem 1.5rem;
      display: flex; align-items: center; justify-content: space-between;
    }
    .am-header h4 { color: #fff; font-size: 1rem; font-weight: 700; margin: 0; }
    .am-close {
      background: rgba(255,255,255,.15); border: none; color: #fff;
      width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
      font-size: .95rem; display: flex; align-items: center; justify-content: center;
    }
    .am-close:hover { background: rgba(255,255,255,.3); }
    .am-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
    .am-project-info {
      background: #f8fafc; border: 1px solid #e2e8f0; border-radius: .75rem;
      padding: .85rem 1rem;
    }
    .am-project-info .am-label { font-size: .7rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .2rem; }
    .am-project-info .am-value { font-size: .9rem; font-weight: 600; color: #1e293b; }
    .am-divider { font-size: .75rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .06em; }
    .am-footer { display: flex; gap: .75rem; padding: 0 1.5rem 1.5rem; }
    .am-cancel {
      flex: 1; background: #f8fafc; color: #6b7280; border: 1.5px solid #e5e7eb;
      border-radius: .75rem; padding: .7rem; font-size: .875rem; font-weight: 600;
      cursor: pointer; transition: all .15s;
    }
    .am-cancel:hover { border-color: #d1d5db; color: #374151; }
    .am-confirm {
      flex: 2; background: #2563eb; color: #fff; border: none;
      border-radius: .75rem; padding: .7rem; font-size: .875rem; font-weight: 700;
      cursor: pointer; transition: background .15s;
    }
    .am-confirm:hover { background: #1d4ed8; }

    /* ══════════════════════════════════════════════════════
       TEAM-CHAT · FIXIERTE RECHTE SIDEBAR (kompaktes Vertical-Design)
       ══════════════════════════════════════════════════════ */
    /* Einklappbares Offcanvas-Panel (gleitet von rechts ein) */
    .chat-sidebar {
      position: fixed; top: 0; right: 0; height: 100vh; width: 300px;
      background: #fff; border-left: 1px solid #e5e9f0;
      box-shadow: -5px 0 15px rgba(0,0,0,0.1);
      display: flex; flex-direction: column; z-index: 1000;
      transform: translateX(100%);
      will-change: transform;
      /* weich abbremsende Kurve statt ease-in-out: wirkt weniger abrupt */
      transition: transform .34s cubic-bezier(.22,.8,.28,1),
                  box-shadow .34s ease;
    }
    .chat-sidebar.chat-open {
      transform: translateX(0);
      box-shadow: -18px 0 42px rgba(15,23,42,.18);
    }
    @media (max-width: 400px) { .chat-sidebar { width: 92vw; } }

    /* Abdunkelnder Hintergrund: blendet mit ein und schliesst per Klick */
    .tc-backdrop {
      position: fixed; inset: 0; z-index: 999;
      background: rgba(15,23,42,.26);
      opacity: 0; pointer-events: none;
      transition: opacity .3s ease;
    }
    .tc-backdrop.show { opacity: 1; pointer-events: auto; }

    /* Inhalte kommen leicht versetzt nach, statt schlagartig dazustehen */
    .chat-sidebar.chat-open .tc-chatlist > * { animation: tcRowIn .34s ease both; }
    .chat-sidebar.chat-open .tc-chatlist > *:nth-child(2) { animation-delay: .04s; }
    .chat-sidebar.chat-open .tc-chatlist > *:nth-child(3) { animation-delay: .08s; }
    .chat-sidebar.chat-open .tc-chatlist > *:nth-child(4) { animation-delay: .12s; }
    .chat-sidebar.chat-open .tc-chatlist > *:nth-child(n+5) { animation-delay: .16s; }
    @keyframes tcRowIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

    /* Bewusste Ausnahme von der globalen "Animationen aus"-Regel:
       ein Panel, das ohne Uebergang erscheint, wirkt wie ein Fehler.
       Deshalb hier eine verkuerzte, ruhige Variante statt gar keiner. */
    @media (prefers-reduced-motion: reduce) {
      .chat-sidebar { transition-duration: .22s !important; }
      .tc-backdrop  { transition-duration: .22s !important; }
      .chat-sidebar.chat-open .tc-chatlist > * { animation: none !important; }
    }

    /* Toggle-Button im Dashboard-Header */
    .tc-toggle-btn {
      background: rgba(37,99,235,.1); color: #2563eb; border: 1px solid rgba(37,99,235,.22);
      cursor: pointer; font-size: .82rem; font-weight: 600; padding: .42rem .8rem; border-radius: .5rem;
      transition: all .15s; white-space: nowrap; display: inline-flex; align-items: center; gap: .35rem;
    }
    .tc-toggle-btn:hover { background: rgba(37,99,235,.17); }
    .tc-toggle-btn.active { background: #2563eb; color: #fff; border-color: #2563eb; }

    /* ── Globale Suche (Admin-Header) ─────────────────────── */
    .gsearch-wrap { position: relative; display: flex; align-items: center; }
    .gsearch-icon { position: absolute; left: .55rem; width: 15px; height: 15px; fill: none;
      stroke: #94a3b8; stroke-width: 2; stroke-linecap: round; pointer-events: none; }
    .gsearch-input { width: 240px; max-width: 42vw; padding: .45rem .7rem .45rem 2rem;
      border: 1px solid #e2e8f0; border-radius: 9px; font-size: .82rem; background: #f8fafc; color: #1e293b;
      transition: border-color .15s, box-shadow .15s; }
    .gsearch-input:focus { outline: none; border-color: #2563eb; background: #fff; box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
    @media (max-width: 820px) { .gsearch-input { width: 150px; } }
    .gsearch-results { display: none; position: absolute; top: calc(100% + 6px); right: 0; width: 340px; max-width: 80vw;
      max-height: 420px; overflow-y: auto; background: #fff; border: 1px solid #e5e9f0; border-radius: 12px;
      box-shadow: 0 12px 32px rgba(15,23,42,.16); z-index: 500; padding: .4rem; }
    .gsearch-results.open { display: block; }
    .gsearch-group { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8;
      font-weight: 700; padding: .55rem .6rem .25rem; }
    .gsearch-item { display: flex; gap: .55rem; align-items: center; padding: .45rem .6rem; border-radius: 8px; cursor: pointer; }
    .gsearch-item:hover { background: #f1f5f9; }
    .gsearch-item .gs-ico { font-size: .95rem; flex-shrink: 0; }
    .gsearch-item .gs-main { font-size: .83rem; color: #1e293b; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .gsearch-item .gs-sub { font-size: .72rem; color: #94a3b8; margin-left: auto; white-space: nowrap; flex-shrink: 0; }
    .gsearch-empty { padding: .9rem .6rem; font-size: .8rem; color: #94a3b8; text-align: center; }

    /* Schließen-Icon im Chat-Kopf */
    .cs-close { background: #f1f5f9; border: none; color: #475569; width: 26px; height: 26px;
      border-radius: 7px; cursor: pointer; font-size: 13px; flex-shrink: 0;
      display: inline-flex; align-items: center; justify-content: center; }
    .cs-close:hover { background: #e2e8f0; color: #0f172a; }

    /* Kopf: Marke + Kanal-Pills */
    .cs-head { flex-shrink: 0; border-bottom: 1px solid #eef2f6; padding: .8rem .9rem .55rem; background: #fff; }
    .cs-topline { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
    .cs-brand { font-size: .95rem; font-weight: 800; color: #0f172a; display: flex; align-items: center; gap: .45rem; }
    .cs-brand .cs-live { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.15); flex-shrink: 0; }
    .cs-me { display: flex; align-items: center; gap: .4rem; font-size: .72rem; color: #94a3b8; max-width: 120px; }
    .cs-me .tc-me-av { width: 24px; height: 24px; border-radius: 7px; background: #2563eb; color: #fff;
      display: inline-flex; align-items: center; justify-content: center; font-size: .66rem; font-weight: 800; flex-shrink: 0; }
    .cs-me-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* Kanal-Pills (horizontal scrollbar) */
    .cs-pills { display: flex; gap: .35rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: thin; }
    .cs-pills::-webkit-scrollbar { height: 5px; }
    .cs-pills::-webkit-scrollbar-thumb { background: #d6dde6; border-radius: 3px; }
    .cs-pills .tc-channel { width: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: .2rem;
      background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; border-radius: 999px;
      padding: .32rem .7rem; font-size: .78rem; font-weight: 600; white-space: nowrap; cursor: pointer; transition: all .12s; }
    .cs-pills .tc-channel .tc-hash { color: #94a3b8; font-weight: 700; }
    .cs-pills .tc-channel:hover { background: #e6ebf2; color: #0f172a; }
    .cs-pills .tc-channel.active { background: #2563eb; color: #fff; border-color: #2563eb; }
    .cs-pills .tc-channel.active .tc-hash { color: #cfe0ff; }

    /* Kanal-Kontextzeile */
    .cs-context { margin-top: .5rem; font-size: .72rem; color: #94a3b8; display: flex; gap: .45rem; align-items: baseline; }
    .cs-context strong { color: #334155; font-size: .8rem; font-weight: 700; white-space: nowrap; }

    /* Verlauf (Mitte, scrollbar) */
    .tc-messages { flex: 1 1 auto; overflow-y: auto; padding: 1rem .9rem; display: flex; flex-direction: column; gap: 1.05rem; min-height: 0; }
    .tc-empty { margin: auto; color: #94a3b8; font-size: .84rem; text-align: center; line-height: 1.5; }

    /* Nachricht (kompakt) */
    .tc-msg { display: flex; gap: .6rem; align-items: flex-start; }
    .tc-avatar { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; color: #fff;
      display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 800; }
    .tc-msg-body { min-width: 0; flex: 1; }
    .tc-msg-head { display: flex; align-items: baseline; gap: .4rem; margin-bottom: .12rem; flex-wrap: wrap; }
    .tc-msg-name { font-size: 13px; font-weight: 700; color: #0f172a; }
    .tc-msg-time { font-size: 11px; color: #94a3b8; }
    .tc-msg-text { font-size: 13px; color: #1e293b; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
    /* @-Erwähnungen + Ticket-Chips + Mention-Hervorhebung */
    .tc-mention { color: #2563eb; font-weight: 600; }
    .tc-mention.mine { background: #fef9c3; color: #854d0e; border-radius: 4px; padding: 0 3px; }
    .tc-msg.mentions-me { background: #fffbeb; border-radius: 8px; padding: .45rem; margin: -.45rem; }
    .tc-ticket-chip { display: inline-flex; align-items: center; gap: .25rem; background: #eff6ff; color: #2563eb;
      border: 1px solid #bfdbfe; border-radius: 999px; padding: .02rem .5rem; font-size: .78rem; font-weight: 600; cursor: pointer; }
    .tc-ticket-chip:hover { background: #dbeafe; }
    .tc-toggle-btn { position: relative; }
    .tc-badge { display: none; align-items: center; justify-content: center; min-width: 16px; height: 16px;
      padding: 0 4px; background: #ef4444; color: #fff; font-size: .64rem; font-weight: 800; border-radius: 999px; margin-left: .2rem; }
    .tc-msg.own .tc-msg-name::after { content: ' · Du'; color: #2563eb; font-weight: 600; font-size: .7rem; }

    /* Eingabeleiste (unten fixiert im Container) */
    .tc-input-bar { flex-shrink: 0; border-top: 1px solid #eef2f6; padding: .7rem .8rem;
      display: flex; gap: .5rem; align-items: flex-end; background: #fff; }
    .tc-input { flex: 1; resize: none; border: 1px solid #d6dde6; border-radius: 10px; padding: .55rem .7rem;
      font-size: .85rem; font-family: inherit; max-height: 120px; min-height: 40px; line-height: 1.4; }
    .tc-input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
    .tc-send { flex-shrink: 0; background: linear-gradient(135deg,#2563eb,#1d4ed8); color: #fff; border: none;
      border-radius: 10px; padding: 0 .9rem; height: 40px; font-size: .82rem; font-weight: 700; cursor: pointer;
      display: inline-flex; align-items: center; gap: .35rem; transition: all .15s; }
    .tc-send:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(37,99,235,.4); }
    .tc-send:active { transform: scale(.97); }
    .tc-send svg { width: 15px; height: 15px; fill: currentColor; }

    /* Responsive: Send-Label auf sehr schmalen Screens ausblenden */
    @media (max-width: 400px) { .tc-send .tc-send-label { display: none; } .tc-send { padding: 0 .7rem; } }

    /* ══════════════════════════════════════════════════════
       KUNDEN-SUPPORT (Ticket-Ansicht im Kundenportal)
       ══════════════════════════════════════════════════════ */
    .cst-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
      flex-wrap: wrap; margin-bottom: 1.25rem; }
    .cst-head h3 { font-size: 1.15rem; font-weight: 700; color: #0f172a; margin: 0; }
    .cst-head .cst-sub { font-size: .82rem; color: #6b7280; margin-top: .15rem; }
    .cst-new-btn { display: inline-flex; align-items: center; gap: .45rem; background: linear-gradient(135deg,#2563eb,#1d4ed8);
      color: #fff; border: none; cursor: pointer; font-size: .85rem; font-weight: 700; padding: .6rem 1.1rem;
      border-radius: 10px; box-shadow: 0 2px 8px rgba(37,99,235,.35); transition: all .15s; white-space: nowrap; }
    .cst-new-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(37,99,235,.45); }
    .cst-new-btn:active { transform: scale(.97); }

    .cst-card { background: #fff; border: 1px solid #e9edf2; border-radius: 14px; padding: 1.15rem 1.25rem;
      box-shadow: 0 1px 2px rgba(16,24,40,.04); }
    .cst-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
    .cst-table th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em;
      color: #94a3b8; font-weight: 700; padding: 0 .5rem .6rem; border-bottom: 1px solid #eef2f6; }
    .cst-table td { padding: .75rem .5rem; border-bottom: 1px solid #f3f5f8; color: #334155; vertical-align: middle; }
    .cst-table tr:last-child td { border-bottom: none; }
    .cst-table td.subj { font-weight: 600; color: #1e293b; }
    .cst-cat-chip { display: inline-block; font-size: .72rem; color: #475569; background: #f1f5f9;
      border-radius: 999px; padding: .12rem .55rem; }
    .cst-badge { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 700;
      padding: .2rem .6rem; border-radius: 999px; white-space: nowrap; }
    .cst-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
    .cst-badge.todo        { background: #eff6ff; color: #2563eb; }
    .cst-badge.in-progress { background: #fef3c7; color: #b45309; }
    .cst-badge.done        { background: #dcfce7; color: #15803d; }
    .cst-empty { text-align: center; color: #94a3b8; font-size: .86rem; padding: 2.5rem 1rem; }
    .cst-empty svg { width: 40px; height: 40px; stroke: #cbd5e1; fill: none; stroke-width: 1.5;
      stroke-linecap: round; stroke-linejoin: round; margin-bottom: .6rem; }

    /* Kunden-Ticket-Modal */
    .cst-modal-backdrop { display: none; position: fixed; inset: 0; z-index: 1100;
      background: rgba(15,23,42,.55); backdrop-filter: blur(2px); align-items: center; justify-content: center; padding: 1.5rem; }
    .cst-modal-backdrop.open { display: flex; }
    .cst-modal { background: #fff; border-radius: 16px; width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto;
      box-shadow: 0 24px 60px rgba(0,0,0,.3); animation: tk-pop .22s cubic-bezier(.34,1.56,.64,1); position: relative; padding: 1.6rem 1.7rem; }
    .cst-modal h3 { font-size: 1.2rem; font-weight: 800; color: #0f172a; margin: 0 0 .3rem; }
    .cst-modal .cst-modal-sub { font-size: .82rem; color: #6b7280; margin-bottom: 1.2rem; }
    .cst-modal-close { position: absolute; top: 14px; right: 15px; border: none; background: #f1f5f9; color: #475569;
      width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 15px; }
    .cst-modal-close:hover { background: #e2e8f0; color: #0f172a; }
    .cst-field { margin-bottom: 1rem; }
    .cst-field label { display: block; font-size: .8rem; font-weight: 600; color: #374151; margin-bottom: .35rem; }
    .cst-field input, .cst-field select, .cst-field textarea { width: 100%; box-sizing: border-box;
      padding: .6rem .7rem; border: 1px solid #d6dde6; border-radius: 9px; font-size: .88rem; font-family: inherit; background: #fff; }
    .cst-field textarea { resize: vertical; min-height: 110px; }
    .cst-field input:focus, .cst-field select:focus, .cst-field textarea:focus {
      outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
    .cst-modal-err { color: #b91c1c; font-size: .8rem; margin-bottom: .8rem; display: none; }
    .cst-submit { width: 100%; background: linear-gradient(135deg,#2563eb,#1d4ed8); color: #fff; border: none;
      border-radius: 10px; padding: .75rem; font-size: .9rem; font-weight: 700; cursor: pointer; transition: all .15s; }
    .cst-submit:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(37,99,235,.4); }
    /* Profil: Änderung-beantragen-Zeile */
    .ks-request-row { display: flex; align-items: center; gap: .6rem; margin-top: .4rem; }
    .ks-request-btn { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; font-size: .78rem;
      font-weight: 600; padding: .4rem .75rem; border-radius: 8px; cursor: pointer; white-space: nowrap; transition: all .15s; }
    .ks-request-btn:hover { background: #dbeafe; }

    /* ══════════════════════════════════════════════════════
       SUPPORT-TICKETS / KANBAN-BOARD
       ══════════════════════════════════════════════════════ */
    /* Neues-Ticket-Formular */
    .tk-new-form { background: #f8fafc; border: 1px solid #e5e9f0; border-radius: 12px;
      padding: 1rem; margin: .25rem 0 1rem; display: grid; gap: .6rem; }
    .tk-new-form .tk-row { display: flex; gap: .6rem; flex-wrap: wrap; }
    .tk-new-form label { font-size: .75rem; font-weight: 600; color: #475569; display: block; margin-bottom: .25rem; }
    .tk-new-form input, .tk-new-form select, .tk-new-form textarea {
      width: 100%; padding: .5rem .65rem; border: 1px solid #d6dde6; border-radius: 8px;
      font-size: .85rem; font-family: inherit; background: #fff; }
    .tk-new-form textarea { resize: vertical; min-height: 62px; }
    .tk-new-err { color: #b91c1c; font-size: .78rem; display: none; }

    /* Board */
    .tk-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: .25rem; }
    @media (max-width: 900px) { .tk-board { grid-template-columns: 1fr; } }
    /* Zuweisung / Auslastung */
    .tk-card-foot-right { display: inline-flex; align-items: center; gap: .35rem; }
    .tk-card-assignee { width: 22px; height: 22px; border-radius: 6px; background: #7c3aed; color: #fff;
      font-size: .66rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
    .tk-workload { display: flex; gap: .6rem; flex-wrap: wrap; margin: .3rem 0 1rem; }
    .tk-wl-item { display: flex; align-items: center; gap: .5rem; background: #f8fafc; border: 1px solid #eef2f6;
      border-radius: 10px; padding: .5rem .7rem; min-width: 175px; }
    .tk-wl-av { width: 30px; height: 30px; border-radius: 8px; background: #2563eb; color: #fff; flex-shrink: 0;
      display: inline-flex; align-items: center; justify-content: center; font-size: .74rem; font-weight: 800; }
    .tk-wl-name { font-size: .82rem; font-weight: 700; color: #0f172a; }
    .tk-wl-count { font-size: .7rem; font-weight: 600; color: #2563eb; background: #eff6ff; padding: .05rem .4rem; border-radius: 999px; margin-left: .25rem; }
    .tk-wl-skills { display: flex; flex-wrap: wrap; gap: .2rem; margin-top: .2rem; }
    .tk-skill { font-size: .64rem; color: #475569; background: #eef2f6; border-radius: 999px; padding: .04rem .4rem; }
    .tk-col { background: #f6f8fb; border: 1px solid #eaeef4; border-radius: 12px;
      display: flex; flex-direction: column; min-height: 140px; }
    .tk-col-head { display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem;
      font-size: .82rem; font-weight: 700; color: #334155; border-bottom: 1px solid #eaeef4; }
    .tk-col-head .tk-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
    .tk-col[data-status="todo"]        .tk-dot { background: #64748b; }
    .tk-col[data-status="in-progress"] .tk-dot { background: #f59e0b; }
    .tk-col[data-status="done"]        .tk-dot { background: #16a34a; }
    .tk-col-count { margin-left: auto; background: #e2e8f0; color: #475569; font-size: .7rem;
      font-weight: 700; padding: .05rem .45rem; border-radius: 999px; }
    .tk-col-body { padding: .7rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; transition: background .12s; }
    .tk-col-body.tk-drag-over { background: #e8effb; outline: 2px dashed #93b4f0; outline-offset: -6px; border-radius: 10px; }
    .tk-col-empty { font-size: .78rem; color: #94a3b8; text-align: center; padding: 1.2rem .5rem; }

    /* Karte */
    .tk-card { background: #fff; border: 1px solid #e6eaf0; border-radius: 10px; padding: .7rem .8rem;
      cursor: pointer; box-shadow: 0 1px 2px rgba(16,24,40,.05); transition: box-shadow .12s, transform .12s;
      border-left: 3px solid #cbd5e1; }
    .tk-card:hover { box-shadow: 0 4px 14px rgba(16,24,40,.1); transform: translateY(-1px); }
    .tk-card.dragging { opacity: 1; box-shadow: 0 10px 24px rgba(0,0,0,.35); transform: rotate(1.5deg) scale(1.02); }
    .tk-card[data-status="todo"]        { border-left-color: #64748b; }
    .tk-card[data-status="in-progress"] { border-left-color: #f59e0b; }
    .tk-card[data-status="done"]        { border-left-color: #16a34a; }
    .tk-card-title { font-size: .85rem; font-weight: 700; color: #1e293b; margin-bottom: .25rem; line-height: 1.3; }
    .tk-card-cust { font-size: .74rem; color: #64748b; display: flex; align-items: center; gap: .3rem; }
    .tk-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: .55rem; }
    .tk-card-date { font-size: .7rem; color: #94a3b8; }
    .tk-memo-badge { display: inline-flex; align-items: center; gap: .25rem; font-size: .7rem;
      font-weight: 600; color: #7c3aed; background: #f5f3ff; padding: .1rem .4rem; border-radius: 999px; }

    /* Ticket-Modal */
    .tk-modal-backdrop { display: none; position: fixed; inset: 0; z-index: 1000;
      background: rgba(15,23,42,.55); backdrop-filter: blur(2px);
      align-items: center; justify-content: center; padding: 1.5rem; }
    .tk-modal-backdrop.open { display: flex; }
    .tk-modal { background: #fff; border-radius: 16px; width: 100%; max-width: 860px; max-height: 88vh;
      display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.3);
      animation: tk-pop .22s cubic-bezier(.34,1.56,.64,1); position: relative; }
    @keyframes tk-pop { from { transform: scale(.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
    .tk-modal-close { position: absolute; top: 12px; right: 14px; z-index: 2; border: none; background: #f1f5f9;
      color: #475569; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 15px; }
    .tk-modal-close:hover { background: #e2e8f0; color: #0f172a; }
    .tk-modal-body { display: grid; grid-template-columns: 1fr 320px; flex: 1; min-height: 0; }
    @media (max-width: 720px) { .tk-modal-body { grid-template-columns: 1fr; } }
    .tk-modal-main { padding: 1.4rem 1.5rem; overflow-y: auto; }
    .tk-modal-side { background: #0f172a; color: #e2e8f0; padding: 1.2rem 1.25rem; display: flex;
      flex-direction: column; min-height: 0; }
    @media (max-width: 720px) { .tk-modal-side { max-height: 50vh; } }
    .tk-status-badge { display: inline-block; font-size: .72rem; font-weight: 700; padding: .2rem .6rem;
      border-radius: 999px; margin-bottom: .6rem; }
    .tk-status-badge.todo        { background: #f1f5f9; color: #475569; }
    .tk-status-badge.in-progress { background: #fef3c7; color: #b45309; }
    .tk-status-badge.done        { background: #dcfce7; color: #15803d; }
    .tk-modal-main h3 { font-size: 1.25rem; font-weight: 800; color: #0f172a; margin: 0 0 .5rem; }
    .tk-m-meta { font-size: .8rem; color: #64748b; margin-bottom: 1.1rem; }
    .tk-m-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8;
      font-weight: 700; margin: 1.1rem 0 .4rem; }
    .tk-m-status-select { padding: .5rem .65rem; border: 1px solid #d6dde6; border-radius: 8px;
      font-size: .85rem; font-family: inherit; background: #fff; min-width: 180px; }
    .tk-m-desc { font-size: .9rem; color: #334155; line-height: 1.6; white-space: pre-wrap;
      background: #f8fafc; border: 1px solid #eef2f6; border-radius: 10px; padding: .85rem; }
    .tk-side-head { font-size: .9rem; font-weight: 700; display: flex; align-items: center; gap: .4rem; }
    .tk-side-hint { font-size: .72rem; color: #94a3b8; margin: .35rem 0 .8rem; line-height: 1.45; }
    .tk-memos { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: .55rem; margin-bottom: .7rem; }
    .tk-memo { background: #1e293b; border: 1px solid #334155; border-radius: 9px; padding: .55rem .7rem; }
    .tk-memo-text { font-size: .82rem; color: #e2e8f0; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
    .tk-memo-time { font-size: .68rem; color: #64748b; margin-top: .3rem; }
    .tk-memos-empty { font-size: .8rem; color: #64748b; text-align: center; padding: 1.5rem .5rem; }
    .tk-memo-input { width: 100%; box-sizing: border-box; background: #1e293b; border: 1px solid #334155;
      color: #fff; border-radius: 9px; padding: .6rem .7rem; font-size: .83rem; font-family: inherit;
      resize: vertical; min-height: 60px; }
    .tk-memo-input::placeholder { color: #64748b; }
    .tk-memo-add { margin-top: .55rem; width: 100%; background: #7c3aed; color: #fff; border: none;
      border-radius: 9px; padding: .6rem; font-size: .83rem; font-weight: 700; cursor: pointer; transition: background .15s; }
    .tk-memo-add:hover { background: #6d28d9; }
    .tk-modal-foot { padding: .8rem 1.5rem; border-top: 1px solid #eef2f6; display: flex; justify-content: flex-end; }
    .tk-del { background: #fff; border: 1px solid #fecaca; color: #dc2626; font-size: .8rem; font-weight: 600;
      padding: .5rem .9rem; border-radius: 8px; cursor: pointer; transition: all .15s; }
    .tk-del:hover { background: #fef2f2; }
    .tk-share { background: #eff6ff; border: 1px solid #bfdbfe; color: #2563eb; font-size: .8rem; font-weight: 600;
      padding: .5rem .9rem; border-radius: 8px; cursor: pointer; transition: all .15s; }
    .tk-share:hover { background: #dbeafe; }

    /* ══════════════════════════════════════════════════════
       ENTERPRISE ANALYTICS MODUL
       ══════════════════════════════════════════════════════ */
    /* Tab-Navigation (Übersicht / Statistiken) */
    .kd-tabs { display: flex; gap: .35rem; margin: 0 0 1.75rem;
      border-bottom: 1px solid #e5e7eb; }
    .kd-tab {
      background: none; border: none; cursor: pointer;
      padding: .65rem 1.05rem; font-size: .9rem; font-weight: 600;
      color: #6b7280; border-bottom: 2px solid transparent;
      margin-bottom: -1px; transition: color .15s, border-color .15s; border-radius: 6px 6px 0 0;
    }
    .kd-tab:hover { color: #111827; background: #f9fafb; }
    .kd-tab.active { color: #2563eb; border-bottom-color: #2563eb; }

    /* Analytics-Toolbar */
    .an-toolbar {
      display: flex; align-items: center; justify-content: space-between;
      gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem;
    }
    .an-toolbar h3 { font-size: 1.15rem; font-weight: 700; color: #0f172a; margin: 0; }
    .an-toolbar .an-sub { font-size: .82rem; color: #6b7280; margin-top: .15rem; }
    .an-controls { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
    .an-pills { display: inline-flex; background: #f1f5f9; border: 1px solid #e2e8f0;
      border-radius: 10px; padding: 3px; gap: 2px; }
    .an-pill {
      border: none; background: none; cursor: pointer; font-size: .8rem; font-weight: 600;
      color: #64748b; padding: .4rem .8rem; border-radius: 7px; transition: all .15s; white-space: nowrap;
    }
    .an-pill:hover { color: #0f172a; }
    .an-pill.active { background: #fff; color: #2563eb; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
    .an-export {
      display: inline-flex; align-items: center; gap: .45rem;
      background: linear-gradient(135deg,#2563eb,#1d4ed8); color: #fff; border: none;
      cursor: pointer; font-size: .8rem; font-weight: 700; padding: .55rem 1rem;
      border-radius: 9px; box-shadow: 0 2px 8px rgba(37,99,235,.35); transition: all .15s; white-space: nowrap;
    }
    .an-export:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(37,99,235,.45); }
    .an-export:active { transform: scale(.97); }
    .an-export svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2;
      stroke-linecap: round; stroke-linejoin: round; }

    /* Grid */
    .an-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
    .an-kpi { grid-column: span 1; }
    .an-main { grid-column: span 4; }
    .an-third { grid-column: span 1; }
    .an-half  { grid-column: span 2; }
    @media (max-width: 1100px) {
      .an-grid { grid-template-columns: repeat(2, 1fr); }
      .an-kpi { grid-column: span 1; }
      .an-main { grid-column: span 2; }
      .an-third, .an-half { grid-column: span 2; }
    }
    @media (max-width: 640px) {
      .an-grid { grid-template-columns: 1fr; }
      .an-kpi, .an-main, .an-third, .an-half { grid-column: span 1; }
    }

    /* Card-Basis */
    .an-card {
      background: #fff; border: 1px solid #e9edf2; border-radius: 14px;
      padding: 1.15rem 1.25rem; box-shadow: 0 1px 2px rgba(16,24,40,.04);
      display: flex; flex-direction: column;
    }
    .an-card-title { font-size: .82rem; font-weight: 600; color: #64748b; margin: 0 0 .15rem; }

    /* KPI-Karten */
    .an-kpi .an-kpi-top { display: flex; align-items: center; justify-content: space-between; }
    .an-kpi-icon {
      width: 34px; height: 34px; border-radius: 9px; display: inline-flex;
      align-items: center; justify-content: center; flex-shrink: 0;
    }
    .an-kpi-icon svg { width: 18px; height: 18px; fill: none; stroke-width: 2;
      stroke-linecap: round; stroke-linejoin: round; }
    .an-kpi-value { font-size: 1.7rem; font-weight: 800; color: #0f172a; line-height: 1.1;
      margin: .55rem 0 .35rem; letter-spacing: -.5px; }
    .an-badge {
      display: inline-flex; align-items: center; gap: .25rem;
      font-size: .72rem; font-weight: 700; padding: .2rem .5rem; border-radius: 999px; white-space: nowrap;
    }
    .an-badge.up   { background: #dcfce7; color: #15803d; }
    .an-badge.down { background: #fee2e2; color: #b91c1c; }
    .an-badge svg { width: 11px; height: 11px; fill: currentColor; }
    .an-kpi-foot { font-size: .72rem; color: #94a3b8; margin-top: .5rem; }

    /* Chart-Karten */
    .an-chart-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: .5rem; }
    .an-chart-box { position: relative; flex: 1; width: 100%; }
    .an-main  .an-chart-box { height: 320px; }
    .an-third .an-chart-box { height: 230px; }
    .an-legend { display: flex; flex-direction: column; gap: .5rem; margin-top: .9rem; }
    .an-legend-row { display: flex; align-items: center; justify-content: space-between; font-size: .82rem; }
    .an-legend-left { display: flex; align-items: center; gap: .5rem; color: #334155; }
    .an-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
    .an-legend-val { font-weight: 700; color: #0f172a; }

    /* Top-Seiten-Tabelle */
    .an-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
    .an-table th {
      text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em;
      color: #94a3b8; font-weight: 700; padding: 0 0 .55rem; border-bottom: 1px solid #eef2f6;
    }
    .an-table th.num, .an-table td.num { text-align: right; }
    .an-table td { padding: .6rem 0; border-bottom: 1px solid #f3f5f8; color: #334155; }
    .an-table tr:last-child td { border-bottom: none; }
    .an-table td.url { font-weight: 600; color: #1e293b; }
    .an-table td .an-bar-cell { display: inline-block; height: 6px; border-radius: 3px;
      background: #2563eb; vertical-align: middle; }
    .an-table .an-mini { font-size: .72rem; color: #94a3b8; }

    /* ══════════════════════════════════════════════════════
       DETAILANALYSE (In-Depth Website-Insights, Kundenportal)
       ══════════════════════════════════════════════════════ */
    .da-section { margin-top: 1.8rem; }
    .da-head { margin-bottom: 1rem; }
    .da-head h3 { font-size: 1.05rem; font-weight: 800; color: #0f172a; margin: 0; }
    .da-head .da-sub { font-size: .8rem; color: #94a3b8; }
    .da-live { display: flex; align-items: baseline; gap: .5rem; margin: .4rem 0 0; }
    .da-live-dot { width: 9px; height: 9px; border-radius: 50%; background: #22c55e;
      box-shadow: 0 0 0 4px rgba(34,197,94,.15); align-self: center; flex-shrink: 0; }
    .da-live-num { font-size: 2rem; font-weight: 800; color: #0f172a; letter-spacing: -.5px; line-height: 1; }
    .da-live-lbl { font-size: .78rem; color: #64748b; }
    .da-spark { display: flex; align-items: flex-end; gap: 2px; height: 40px; margin-top: .7rem; }
    .da-spark span { flex: 1; background: #bfdbfe; border-radius: 2px; min-height: 3px; }
    .da-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .5rem; }
    .da-metric { background: #f8fafc; border: 1px solid #eef2f6; border-radius: 10px; padding: .55rem .65rem; }
    .da-metric span { display: block; font-size: 1.15rem; font-weight: 800; color: #0f172a; letter-spacing: -.3px; }
    .da-metric small { font-size: .68rem; color: #94a3b8; }
    .da-nr, .da-geo { display: flex; flex-direction: column; gap: .7rem; margin-top: .6rem; }
    .da-row { display: flex; align-items: center; justify-content: space-between; font-size: .82rem; color: #334155; margin-bottom: .3rem; }
    .da-row .da-val { font-weight: 700; color: #0f172a; }
    .da-track { height: 8px; background: #f1f5f9; border-radius: 99px; overflow: hidden; }
    .da-fill { height: 100%; border-radius: 99px; background: #2563eb; }
    .da-vitals { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .6rem; margin-top: .5rem; }
    .da-vital { background: #f8fafc; border: 1px solid #eef2f6; border-radius: 10px; padding: .6rem .4rem; text-align: center; }
    .da-vital .dv-val { font-size: 1.1rem; font-weight: 800; color: #0f172a; }
    .da-vital .dv-lbl { font-size: .64rem; color: #94a3b8; text-transform: uppercase; letter-spacing: .03em; margin-top: .15rem; }
    .da-vital.good .dv-val { color: #15803d; } .da-vital.warn .dv-val { color: #b45309; } .da-vital.bad .dv-val { color: #b91c1c; }
    .da-funnel { display: flex; flex-direction: column; gap: .55rem; margin-top: .5rem; }
    .da-funnel .df-row { display: flex; justify-content: space-between; font-size: .8rem; color: #334155; margin-bottom: .2rem; }
    .da-funnel .df-track { height: 26px; background: #f1f5f9; border-radius: 8px; overflow: hidden; }
    .da-funnel .df-fill { height: 100%; background: linear-gradient(90deg,#2563eb,#3b82f6); border-radius: 8px;
      display: flex; align-items: center; padding-left: .55rem; color: #fff; font-size: .74rem; font-weight: 700; min-width: 2.5rem; }
    .da-conv { margin-top: .6rem; font-size: .82rem; color: #334155; text-align: center; }
    .da-conv strong { color: #15803d; font-size: 1rem; }
    /* KI-Empfehlungen */
    .ai-src { font-size: .72rem; font-weight: 700; padding: .18rem .6rem; border-radius: 999px; }
    .ai-src.ai { background: #ede9fe; color: #6d28d9; }
    .ai-src.rule { background: #f1f5f9; color: #475569; }
    .ai-rec { border: 1px solid #eef2f6; border-radius: 12px; padding: .8rem .9rem; margin-bottom: .6rem; background: #fff; }
    .ai-rec-head { display: flex; align-items: center; gap: .55rem; }
    .ai-prio { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: .12rem .5rem; border-radius: 999px; }
    .ai-rec-title { font-size: .92rem; font-weight: 700; color: #0f172a; }
    .ai-rec-why { font-size: .84rem; color: #475569; margin-top: .35rem; line-height: 1.5; }
    .ai-rec-action { font-size: .84rem; color: #1e293b; font-weight: 600; margin-top: .35rem; }

    /* PDF-Button (sekundär) */
    .an-export.an-pdf { background: #fff; color: #b91c1c; border: 1px solid #fecaca; box-shadow: none; }
    .an-export.an-pdf:hover { background: #fef2f2; box-shadow: none; transform: translateY(-1px); }

    /* ══════════════════════════════════════════════════════
       RECHNUNGEN (Kundenportal)
       ══════════════════════════════════════════════════════ */
    .inv-badge { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 700;
      padding: .2rem .6rem; border-radius: 999px; white-space: nowrap; }
    .inv-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
    .inv-badge.bezahlt     { background: #dcfce7; color: #15803d; }
    .inv-badge.offen       { background: #eff6ff; color: #2563eb; }
    .inv-badge.ueberfaellig { background: #fee2e2; color: #b91c1c; }
    .inv-badge.angenommen  { background: #dcfce7; color: #15803d; }
    .inv-badge.abgelehnt   { background: #fee2e2; color: #b91c1c; }
    .inv-badge.abgelaufen  { background: #f1f5f9; color: #64748b; }
    .inv-pdf-btn { background: #f1f5f9; border: 1px solid #e2e8f0; color: #334155; font-size: .76rem; font-weight: 600;
      padding: .3rem .65rem; border-radius: 7px; cursor: pointer; transition: background .12s; }
    .inv-pdf-btn:hover { background: #e6ebf2; }
    .inv-summary { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1rem; font-size: .85rem; color: #475569; }
    .inv-summary strong { color: #0f172a; }
    /* Admin-Rechnungstabelle */
    .ai-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
    .ai-table th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8;
      font-weight: 700; padding: 0 .5rem .55rem; border-bottom: 1px solid #eef2f6; }
    .ai-table th.num, .ai-table td.num { text-align: right; }
    .ai-table td { padding: .6rem .5rem; border-bottom: 1px solid #f3f5f8; color: #334155; vertical-align: middle; }
    .ai-table tr:last-child td { border-bottom: none; }
    .ai-actions { display: inline-flex; gap: .35rem; }
    .ai-mini-btn { background: #f1f5f9; border: 1px solid #e2e8f0; color: #334155; font-size: .74rem; font-weight: 600;
      padding: .28rem .6rem; border-radius: 7px; cursor: pointer; }
    .ai-mini-btn:hover { background: #e6ebf2; }
    .ai-mini-btn.pay { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
    .ai-mini-btn.pay:hover { background: #d1fae5; }
    /* Rechnungs-Erstell-Modal: Positionszeilen */
    .inv-item-row { display: grid; grid-template-columns: 1fr 60px 70px 80px 26px; gap: .4rem; margin-bottom: .4rem; align-items: center; }
    .inv-item-row input { width: 100%; box-sizing: border-box; padding: .45rem .5rem; border: 1px solid #d6dde6; border-radius: 7px; font-size: .82rem; }
    .inv-item-del { background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; border-radius: 7px; cursor: pointer; height: 30px; }
    .inv-item-head { display: grid; grid-template-columns: 1fr 60px 70px 80px 26px; gap: .4rem; font-size: .68rem; color: #94a3b8; font-weight: 700; margin-bottom: .3rem; }
    .inv-total-row { text-align: right; font-size: .9rem; color: #334155; margin: .8rem 0; }
    .inv-total-row strong { color: #0f172a; font-size: 1.05rem; }

    /* ── Kunden-Dashboard ────────────────────────────────── */
    .kunde-main { max-width: 1400px; margin: 0 auto; padding: 2.5rem 2rem; }
    .kunde-main h2 { font-size: 1.4rem; font-weight: 700; color: #111; margin-bottom: .25rem; }
    .kunde-main .sub { color: #6b7280; font-size: .875rem; margin-bottom: 2rem; }

    /* Drei-Spalten-Layout im Kunden-Dashboard */
    .kunde-grid {
      display: grid;
      grid-template-columns: 300px 1fr 260px;
      gap: 1.5rem;
      align-items: stretch;   /* alle Karten gleich hoch */
    }
    @media (max-width: 1100px) { .kunde-grid { grid-template-columns: 280px 1fr; } }
    @media (max-width: 750px)  { .kunde-grid { grid-template-columns: 1fr; } }

    /* Donut-Karte */
    .donut-card {
      background: #fff; border: 1px solid #e5e7eb; border-radius: 1.25rem;
      padding: 1.5rem; box-shadow: 0 1px 4px rgba(0,0,0,.04);
      display: flex; flex-direction: column;
    }
    .donut-card .donut-title { font-size: .95rem; font-weight: 700; color: #111; margin-bottom: .25rem; }
    .donut-card .donut-sub   { font-size: .75rem; color: #9ca3af; margin-bottom: 1.25rem; }
    .donut-canvas-wrap { flex: 1; position: relative; min-height: 180px; }
    .donut-legend { margin-top: 1.25rem; display: flex; flex-direction: column; gap: .55rem; }
    .donut-legend-row { display: flex; align-items: center; justify-content: space-between; font-size: .82rem; }
    .donut-legend-row .leg-left { display: flex; align-items: center; gap: .45rem; color: #374151; }
    .donut-legend-row .leg-dot  { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
    .donut-legend-row .leg-pct  { font-weight: 700; color: #111; }

    /* Besucher-Karte — groß & dominant */
    .stats-card {
      background: #fff; border: 1px solid #e5e7eb; border-radius: 1.25rem;
      padding: 2rem; box-shadow: 0 1px 4px rgba(0,0,0,.04);
      display: flex; flex-direction: column;
    }
    .stats-card .stats-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: .5rem; }
    .stats-card .stats-title { font-size: 1.05rem; font-weight: 700; color: #111; }
    .stats-card .stats-total { text-align: right; }
    .stats-card .stats-total .big { font-size: 2.8rem; font-weight: 800; color: #2563eb; line-height: 1; }
    .stats-card .stats-total .label { font-size: .75rem; color: #9ca3af; margin-top: .2rem; }
    .stats-card .stats-period { font-size: .78rem; color: #6b7280; margin-bottom: .5rem; }
    .stats-card .trend {
      display: inline-flex; align-items: center; gap: .25rem;
      font-size: .78rem; font-weight: 600; padding: .25rem .65rem;
      border-radius: 999px; margin-bottom: 1.25rem;
    }
    .trend.up   { background: #f0fdf4; color: #16a34a; }
    .trend.down { background: #fef2f2; color: #dc2626; }
    .stats-chart-wrap { flex: 1; position: relative; min-height: 280px; }

    /* Chart-Modus Toggle */
    .chart-toggle-wrap {
      display: flex; gap: .25rem;
      background: #f1f5f9; border-radius: .5rem; padding: 3px;
      margin-bottom: .75rem;
    }
    .chart-toggle-btn {
      flex: 1; font-size: .72rem; font-weight: 600; color: #6b7280;
      background: transparent; border: none; border-radius: .35rem;
      padding: .3rem .6rem; cursor: pointer; transition: all .15s;
    }
    .chart-toggle-btn.active {
      background: #fff; color: #2563eb;
      box-shadow: 0 1px 4px rgba(0,0,0,.1);
    }

    /* Website-Karte für Kunden */
    .website-card {
      background: #fff; border: 1px solid #e5e7eb; border-radius: 1.25rem;
      padding: 1.75rem; box-shadow: 0 1px 4px rgba(0,0,0,.04);
      display: flex; flex-direction: column;
    }
    .website-card .wc-badge { font-size: .68rem; font-weight: 700; color: #2563eb; text-transform: uppercase; letter-spacing: .07em; margin-bottom: .6rem; }
    .website-card .wc-title { font-size: 1.15rem; font-weight: 700; color: #111; margin-bottom: .3rem; line-height: 1.3; }
    .website-card .wc-meta { font-size: .8rem; color: #9ca3af; margin-bottom: 1.25rem; }
    .website-card .wc-status { display: flex; align-items: center; gap: .4rem; margin-bottom: 1rem; }
    .website-card .wc-status .dot { width: 9px; height: 9px; border-radius: 50%; background: #16a34a; }
    .website-card .wc-status span { font-size: .82rem; color: #16a34a; font-weight: 500; }
    .website-card .wc-buttons { display: flex; flex-direction: column; gap: .6rem; }
    .btn-open {
      flex: 1; background: #2563eb; color: #fff; font-weight: 600; font-size: .875rem;
      padding: .6rem 1rem; border: none; border-radius: .75rem; cursor: pointer; transition: background .15s;
    }
    .btn-open:hover { background: #1d4ed8; }
    .btn-edit {
      background: #fff; color: #6b7280; font-size: .875rem; font-weight: 500;
      padding: .6rem 1rem; border: 1.5px solid #e5e7eb; border-radius: .75rem; cursor: pointer; transition: all .15s;
    }
    .btn-edit:hover { border-color: #2563eb; color: #2563eb; }

    /* ── Zweite Widget-Reihe (50/50) ───────────────────────── */
    .kunde-row2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.5rem;
      margin-top: 1.5rem;
      align-items: stretch;
    }
    @media (max-width: 700px) { .kunde-row2 { grid-template-columns: 1fr; } }

    /* Basis-Karte — identisch zu .stats-card / .donut-card */
    .info-card {
      background: #fff; border: 1px solid #e5e7eb; border-radius: 1.25rem;
      padding: 1.75rem; box-shadow: 0 1px 4px rgba(0,0,0,.04);
      display: flex; flex-direction: column;
    }
    .info-card-badge {
      font-size: .65rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .07em; margin-bottom: .35rem;
    }
    .info-card-title {
      font-size: .95rem; font-weight: 700; color: #111; margin-bottom: 1rem;
    }

    /* Bewertungs-Widget */
    .review-score {
      display: flex; align-items: center; gap: .75rem; margin-bottom: .9rem;
      padding-bottom: .9rem; border-bottom: 1px solid #f1f5f9;
    }
    .review-score .score-num {
      font-size: 2.2rem; font-weight: 800; color: #111; line-height: 1;
    }
    .review-score .score-right { display: flex; flex-direction: column; gap: .2rem; }
    .stars { color: #f59e0b; font-size: 1rem; letter-spacing: .05em; }
    .review-count { font-size: .75rem; color: #9ca3af; }
    .review-list { display: flex; flex-direction: column; gap: .75rem; flex: 1; margin-bottom: .25rem; }
    .review-item { background: #f9fafb; border-radius: .75rem; padding: .75rem 1rem; }
    .review-item .rev-head {
      display: flex; align-items: center; justify-content: space-between; margin-bottom: .3rem;
    }
    .review-item .rev-name { font-size: .82rem; font-weight: 700; color: #1f2937; }
    .review-item .rev-stars { color: #f59e0b; font-size: .78rem; }
    .review-item .rev-text { font-size: .8rem; color: #6b7280; line-height: 1.45; }
    .btn-copy-link {
      margin-top: 1rem; width: 100%;
      background: #fff; border: 1.5px solid #e5e7eb; border-radius: .75rem;
      color: #374151; font-size: .8rem; font-weight: 600; padding: .6rem 1rem;
      cursor: pointer; transition: all .15s; display: flex; align-items: center;
      justify-content: center; gap: .4rem;
    }
    .btn-copy-link:hover { border-color: #2563eb; color: #2563eb; background: #eff6ff; }
    .btn-copy-link.copied { border-color: #16a34a; color: #16a34a; background: #f0fdf4; }

    /* Status-Widget */
    .status-list { display: flex; flex-direction: column; gap: .6rem; flex: 1; }
    .status-row {
      display: flex; align-items: center; gap: .75rem;
      background: #f9fafb; border-radius: .75rem; padding: .7rem 1rem;
    }
    .status-dot {
      width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
      box-shadow: 0 0 0 3px rgba(22,163,74,.18);
    }
    .status-dot.green  { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.18); }
    .status-dot.blue   { background: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.18); }
    .status-dot.purple { background: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,.18); }
    .status-row-text { flex: 1; }
    .status-row-label { font-size: .82rem; font-weight: 600; color: #1f2937; }
    .status-row-sub   { font-size: .72rem; color: #9ca3af; margin-top: .1rem; }
    .status-row-badge {
      font-size: .68rem; font-weight: 700; padding: .2rem .55rem;
      border-radius: 999px; white-space: nowrap;
    }
    .badge-green  { background: #f0fdf4; color: #16a34a; }
    .badge-blue   { background: #eff6ff; color: #2563eb; }
    .badge-purple { background: #f5f3ff; color: #7c3aed; }

    /* Keine Aufträge */
    .no-orders { text-align: center; padding: 5rem 2rem; }
    .no-orders h3 { font-size: 1.25rem; font-weight: 700; color: #111; margin-bottom: .5rem; }
    .no-orders p { color: #6b7280; font-size: .9rem; max-width: 360px; margin: 0 auto 1.5rem; }
    .no-orders .contact { display: inline-flex; align-items: center; gap: .5rem; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: .75rem; padding: .6rem 1.2rem; color: #2563eb; font-size: .875rem; text-decoration: none; }
    /* Empty-State "Keine Website zugewiesen" */
    .ws-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; padding: 3rem 2rem; background: #f9fafb; border: 1.5px dashed #d1d5db; border-radius: 1rem; color: #6b7280; }
    .ws-empty-state svg { opacity: .35; }
    .ws-empty-state p { font-size: .875rem; margin: 0; }

    /* Website-Vorschau Overlay */
    #preview-overlay {
      display: none; position: fixed; inset: 0; background: rgba(0,0,0,.7);
      z-index: 100; align-items: center; justify-content: center;
    }
    #preview-overlay.open { display: flex; }
    .preview-modal { background: #fff; border-radius: 1rem; width: 90vw; max-width: 900px; height: 80vh; display: flex; flex-direction: column; overflow: hidden; transition: all .25s ease; }
    .preview-modal.fullscreen { position: fixed; inset: 0; width: 100vw; max-width: 100vw; height: 100vh; border-radius: 0; z-index: 200; }
    .preview-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid #e5e7eb; }
    .preview-modal-header h4 { font-weight: 700; font-size: .95rem; }
    .preview-modal-header .pm-actions { display: flex; align-items: center; gap: .5rem; }
    .preview-modal-header button { background: none; border: none; font-size: 1.1rem; cursor: pointer; color: #6b7280; padding: .3rem .5rem; border-radius: .375rem; transition: background .15s; }
    .preview-modal-header button:hover { background: #f3f4f6; color: #111; }
    .preview-modal iframe { flex: 1; border: none; }

    /* ══════════════════════════════════════════════════════
       INLINE-EDITOR – Workspace / Canvas Layout
    ══════════════════════════════════════════════════════ */
    #inline-editor {
      display: none; position: fixed; inset: 0; z-index: 200;
      flex-direction: column; background: #0a0f1e;
    }
    #inline-editor.open { display: flex; }

    /* ── Top-Bar ─────────────────────────────────────────── */
    #ie-toolbar {
      height: 52px; background: #0d1424;
      border-bottom: 1px solid rgba(255,255,255,.07);
      display: flex; align-items: center; gap: .75rem; padding: 0 1rem;
      flex-shrink: 0; z-index: 10;
    }
    .ie-back {
      background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
      color: #94a3b8; cursor: pointer; padding: .4rem .85rem; border-radius: .5rem;
      font-size: .78rem; font-weight: 600; transition: all .15s; white-space: nowrap;
    }
    .ie-back:hover { background: rgba(255,255,255,.13); color: #e2e8f0; }
    .ie-divider { width: 1px; height: 20px; background: rgba(255,255,255,.1); flex-shrink: 0; }
    .ie-site-name { color: #cbd5e1; font-size: .85rem; font-weight: 600;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
    .ie-spacer { flex: 1; }
    #ie-mode-label {
      font-size: .75rem; color: #64748b; transition: color .2s;
    }
    #ie-mode-label.active { color: #60a5fa; }
    #ie-status { font-size: .8rem; color: #4ade80; font-weight: 600; white-space: nowrap; }
    .ie-save {
      background: linear-gradient(135deg, #2563eb, #1d4ed8);
      color: #fff; border: none; font-weight: 700; font-size: .82rem;
      padding: .45rem 1.2rem; border-radius: .55rem; cursor: pointer;
      transition: all .15s; box-shadow: 0 2px 8px rgba(37,99,235,.4);
      white-space: nowrap;
    }
    .ie-save:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(37,99,235,.5); }
    .ie-save:active { transform: scale(.97); }
    .ie-hist {
      background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
      color: #94a3b8; cursor: pointer; width: 34px; height: 34px; border-radius: .5rem;
      display: inline-flex; align-items: center; justify-content: center;
      transition: all .15s; padding: 0;
    }
    .ie-hist svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2;
      stroke-linecap: round; stroke-linejoin: round; }
    .ie-hist:hover:not(:disabled) { background: rgba(255,255,255,.13); color: #e2e8f0; }
    .ie-hist:active:not(:disabled) { transform: scale(.94); }
    .ie-hist:disabled { opacity: .35; cursor: default; }

    /* ── Workspace (Sidebar + Canvas) ───────────────────── */
    #ie-workspace {
      flex: 1; display: flex; overflow: hidden;
    }

    /* ── Linke Sidebar ───────────────────────────────────── */
    #ie-sidebar {
      width: 68px; background: #0d1424;
      border-right: 1px solid rgba(255,255,255,.07);
      display: flex; flex-direction: column; align-items: center;
      padding: 14px 0; gap: 6px; flex-shrink: 0;
    }
    .ie-tool-group { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; }
    .ie-tool-sep {
      width: 36px; height: 1px; background: rgba(255,255,255,.08);
      margin: 6px 0;
    }
    .ie-tool {
      width: 48px; height: 48px; border-radius: 10px; border: 1.5px solid transparent;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 3px; cursor: pointer; color: #475569; font-size: .6rem; font-weight: 700;
      letter-spacing: .03em; text-transform: uppercase; transition: all .18s;
      background: transparent; user-select: none;
    }
    .ie-tool svg { width: 20px; height: 20px; stroke: currentColor; fill: none;
      stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .ie-tool:hover { background: rgba(255,255,255,.07); color: #94a3b8; }
    .ie-tool.active {
      background: rgba(37,99,235,.25); color: #60a5fa;
      border-color: rgba(37,99,235,.6);
      box-shadow: 0 0 12px rgba(37,99,235,.3);
    }

    /* ── Canvas-Bereich ──────────────────────────────────── */
    #ie-canvas-bg {
      flex: 1; background: #111827;
      background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
      background-size: 24px 24px;
      display: flex; align-items: flex-start; justify-content: center;
      overflow: auto; padding: 28px 28px 0;
    }
    #ie-canvas {
      width: 100%; max-width: 1280px;
      border-radius: 14px; overflow: hidden;
      box-shadow:
        0 0 0 1px rgba(255,255,255,.08),
        0 8px 32px rgba(0,0,0,.6),
        0 32px 80px rgba(0,0,0,.4);
      background: #fff;
      flex-shrink: 0;
    }
    #ie-frame {
      /* 36px der entfernten Browserleiste stehen der Vorschau jetzt zusaetzlich zur Verfuegung */
      width: 100%; height: calc(100vh - 52px - 56px);
      min-height: 500px; border: none; display: block;
    }

    /* ── Canvas-Footer (Zoom-Info) ───────────────────────── */
    #ie-canvas-footer {
      flex-shrink: 0; height: 28px; background: #0d1424;
      border-top: 1px solid rgba(255,255,255,.06);
      display: flex; align-items: center; padding: 0 16px;
      font-size: .68rem; color: #334155; gap: 1rem;
    }
    #ie-canvas-footer span { color: #475569; }

    /* ══════════════════════════════════════════════════════════
       EDITOR – STYLE-PANEL (rechte Sidebar)
    ══════════════════════════════════════════════════════════ */
    #ie-style-panel {
      width: 272px; flex-shrink: 0;
      background: #0d1424;
      border-left: 1px solid rgba(255,255,255,.07);
      display: none; flex-direction: column;
      overflow-y: auto; overflow-x: hidden;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }
    #ie-style-panel.open { display: flex; }

    .isp-header {
      padding: 13px 14px 10px;
      border-bottom: 1px solid rgba(255,255,255,.06);
      display: flex; align-items: center; justify-content: space-between;
      flex-shrink: 0;
    }
    .isp-header-title {
      font-size: .68rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .07em; color: #475569;
    }
    #isp-tool-name { color: #60a5fa; }
    .isp-close-btn {
      background: none; border: none; color: #475569; cursor: pointer;
      font-size: 14px; line-height: 1; padding: 2px 4px; border-radius: 4px;
    }
    .isp-close-btn:hover { color: #94a3b8; }

    /* Placeholder (kein Element gewählt) */
    .isp-placeholder {
      flex: 1; display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 10px; padding: 32px 16px; text-align: center;
    }
    .isp-placeholder svg { opacity: .25; }
    .isp-placeholder p { color: #475569; font-size: .75rem; line-height: 1.6; margin: 0; }

    /* Tool-Sections */
    .isp-section { padding: 14px 14px 18px; display: none; flex-direction: column; gap: 14px; }
    .isp-section.active { display: flex; }

    .isp-label {
      font-size: .65rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .07em; color: #475569; margin-bottom: 4px;
    }

    /* ── Farbe ───────────────────────────────────────────── */
    .isp-target-row { display: flex; gap: 5px; }
    .isp-target-btn {
      flex: 1; padding: 6px 4px; font-size: .7rem; font-weight: 700;
      border: 1.5px solid rgba(255,255,255,.1); border-radius: 7px;
      background: transparent; color: #64748b; cursor: pointer; transition: all .15s;
    }
    .isp-target-btn.active {
      background: rgba(37,99,235,.18); color: #60a5fa;
      border-color: rgba(37,99,235,.5);
    }
    .isp-palette-grid {
      display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px;
    }
    .isp-swatch {
      width: 100%; aspect-ratio: 1; border-radius: 4px; cursor: pointer;
      border: 2px solid transparent; transition: transform .12s, border-color .12s;
      display: block;
    }
    .isp-swatch:hover { transform: scale(1.2); }
    .isp-swatch.sel { border-color: #60a5fa; box-shadow: 0 0 0 1px #60a5fa; }
    .isp-color-row {
      display: flex; align-items: center; gap: 8px; margin-top: 2px;
    }
    .isp-color-native {
      width: 32px; height: 26px; border: none; border-radius: 5px;
      cursor: pointer; padding: 2px; background: rgba(255,255,255,.08); flex-shrink: 0;
    }
    .isp-color-hex {
      flex: 1; background: rgba(255,255,255,.06); color: #94a3b8;
      border: 1.5px solid rgba(255,255,255,.1); border-radius: 6px;
      padding: 4px 8px; font-size: .72rem; font-family: monospace; outline: none;
    }
    .isp-color-hex:focus { border-color: rgba(37,99,235,.6); }

    /* ── Typografie ──────────────────────────────────────── */
    .isp-select {
      width: 100%; background: rgba(255,255,255,.06); color: #94a3b8;
      border: 1.5px solid rgba(255,255,255,.1); border-radius: 7px;
      padding: 7px 10px; font-size: .78rem; cursor: pointer;
      appearance: none; -webkit-appearance: none; outline: none; box-sizing: border-box;
    }
    .isp-select:focus { border-color: rgba(37,99,235,.6); }
    .isp-select option { background: #1e293b; color: #e2e8f0; }

    .isp-size-row { display: flex; align-items: center; gap: 8px; }
    .isp-range { flex: 1; accent-color: #2563eb; cursor: pointer; }
    .isp-number {
      width: 50px; background: rgba(255,255,255,.06); color: #94a3b8;
      border: 1.5px solid rgba(255,255,255,.1); border-radius: 7px;
      padding: 5px 6px; font-size: .78rem; text-align: center; outline: none;
      box-sizing: border-box;
    }
    .isp-number:focus { border-color: rgba(37,99,235,.6); }

    .isp-btn-row { display: flex; gap: 5px; }
    .isp-icon-btn {
      flex: 1; height: 32px; border: 1.5px solid rgba(255,255,255,.1);
      border-radius: 7px; background: transparent; color: #64748b;
      cursor: pointer; font-size: .8rem; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
      transition: all .15s; user-select: none;
    }
    .isp-icon-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none;
      stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .isp-icon-btn:hover { background: rgba(255,255,255,.07); color: #94a3b8; }
    .isp-icon-btn.active {
      background: rgba(37,99,235,.18); color: #60a5fa;
      border-color: rgba(37,99,235,.5);
    }

    /* ── Layout ──────────────────────────────────────────── */
    .isp-spacing-group { display: flex; flex-direction: column; gap: 5px; }
    .isp-spacing-top { display: flex; align-items: center; justify-content: space-between; }
    .isp-spacing-val {
      font-size: .7rem; color: #60a5fa; font-weight: 700; min-width: 32px; text-align: right;
    }

    /* ── Effekte ─────────────────────────────────────────── */
    .isp-shadow-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 8px 10px; background: rgba(255,255,255,.04);
      border-radius: 8px; border: 1.5px solid rgba(255,255,255,.07);
    }
    .isp-shadow-lbl { font-size: .78rem; color: #64748b; }
    .isp-toggle {
      width: 38px; height: 20px; border-radius: 10px;
      background: rgba(255,255,255,.1); position: relative;
      cursor: pointer; transition: background .2s; border: none; padding: 0; flex-shrink: 0;
    }
    .isp-toggle.on { background: #2563eb; }
    .isp-toggle::after {
      content: ''; position: absolute;
      width: 14px; height: 14px; border-radius: 50%;
      background: #fff; top: 3px; left: 3px; transition: left .2s;
    }
    .isp-toggle.on::after { left: 21px; }

    .isp-apply-btn {
      width: 100%; padding: 9px; font-size: .78rem; font-weight: 700;
      background: linear-gradient(135deg,#2563eb,#1d4ed8);
      color: #fff; border: none; border-radius: 8px; cursor: pointer;
      transition: transform .15s, box-shadow .15s; margin-top: 2px;
    }
    .isp-apply-btn:hover {
      transform: translateY(-1px); box-shadow: 0 4px 14px rgba(37,99,235,.4);
    }

    /* Palette-Gruppenüberschriften */
    .isp-pal-group { display: flex; flex-direction: column; gap: 5px; }
    .isp-pal-lbl { font-size: .62rem; color: #334155; text-transform: uppercase; letter-spacing: .05em; }

    /* ── Kunden-Website (klassisch, falls Supabase aktiv) ── */
    .hero {
      background: linear-gradient(135deg, #eef2ff, #f8faff);
      text-align: center; padding: 5rem 2rem;
    }
    .hero h2 { font-size: 2.5rem; font-weight: 800; color: #111; margin-bottom: 1rem; }
    .hero p  { color: #6b7280; font-size: 1.1rem; max-width: 500px; margin: 0 auto; }
    .hero img {
      max-width: 700px; width: 100%; border-radius: 1rem;
      box-shadow: 0 10px 40px rgba(0,0,0,.1); margin-top: 2rem; display: none;
    }
    .about { max-width: 700px; margin: 4rem auto; padding: 0 2rem; }
    .about h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; }
    .about p  { color: #6b7280; line-height: 1.8; }
    footer { text-align: center; padding: 2rem; color: #9ca3af; font-size: .85rem; border-top: 1px solid #f3f4f6; }
    footer a { color: #2563eb; text-decoration: none; }

    /* ── Chat FAB (Kunde) ─────────────────────────────────────── */
    #chat-fab {
      position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 900;
      width: 56px; height: 56px; border-radius: 50%;
      background: #2563eb; border: none; cursor: pointer;
      display: none; align-items: center; justify-content: center;
      box-shadow: 0 4px 16px rgba(37,99,235,.45);
      transition: transform .18s, background .18s;
    }
    #chat-fab:hover { background: #1d4ed8; transform: translateY(-2px); }
    #chat-fab:active { transform: scale(.94); }
    #chat-fab svg { width: 26px; height: 26px; fill: #fff; }
    #chat-fab-badge {
      position: absolute; top: -4px; right: -4px;
      background: #ef4444; color: #fff; font-size: .65rem;
      font-weight: 700; border-radius: 99px; min-width: 18px; height: 18px;
      display: none; align-items: center; justify-content: center; padding: 0 4px;
    }
    /* ── Chat-Fenster (Kunde) ─────────────────────────────────── */
    #chat-window {
      position: fixed; bottom: 5.5rem; right: 1.5rem; z-index: 899;
      width: 340px; height: 460px; display: none; flex-direction: column;
      background: #fff; border-radius: 1.25rem;
      box-shadow: 0 8px 40px rgba(0,0,0,.18); overflow: hidden;
    }
    #chat-window.open { display: flex; }
    .cw-header {
      background: #2563eb; color: #fff; padding: .85rem 1rem;
      display: flex; align-items: center; gap: .65rem; flex-shrink: 0;
    }
    .cw-avatar {
      width: 34px; height: 34px; border-radius: 50%;
      background: rgba(255,255,255,.25);
      display: flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: .9rem;
    }
    .cw-title { font-weight: 600; font-size: .95rem; flex: 1; }
    .cw-close {
      background: none; border: none; color: #fff; cursor: pointer;
      font-size: 1.15rem; line-height: 1; padding: 2px 4px; border-radius: 4px;
      opacity: .8;
    }
    .cw-close:hover { opacity: 1; background: rgba(255,255,255,.15); }
    #cw-messages {
      flex: 1; overflow-y: auto; padding: .75rem 1rem; display: flex;
      flex-direction: column; gap: .45rem;
    }
    .cw-empty { color: #94a3b8; font-size: .85rem; text-align: center; margin: auto; }
    .chat-row { display: flex; flex-direction: column; max-width: 80%; }
    .chat-row.own { align-self: flex-end; align-items: flex-end; }
    .chat-row.them { align-self: flex-start; align-items: flex-start; }
    .chat-bubble {
      padding: .5rem .8rem; border-radius: 1rem; font-size: .875rem;
      line-height: 1.45; word-break: break-word;
    }
    .chat-row.own  .chat-bubble { background: #2563eb; color: #fff; border-bottom-right-radius: .25rem; }
    .chat-row.them .chat-bubble { background: #f1f5f9; color: #1e293b; border-bottom-left-radius: .25rem; }
    .chat-time { font-size: .7rem; color: #94a3b8; margin-top: 2px; }
    #cw-new-badge {
      display: none; position: absolute; bottom: 68px; left: 50%; transform: translateX(-50%);
      background: #2563eb; color: #fff; border-radius: 99px;
      padding: .25rem .85rem; font-size: .78rem; cursor: pointer; white-space: nowrap;
      box-shadow: 0 2px 8px rgba(37,99,235,.35);
    }
    .cw-input-row {
      display: flex; gap: .5rem; padding: .65rem .75rem;
      border-top: 1px solid #e2e8f0; flex-shrink: 0;
    }
    .cw-input-row textarea {
      flex: 1; border: 1px solid #e2e8f0; border-radius: .65rem;
      padding: .45rem .7rem; font-size: .875rem; resize: none; height: 38px;
      font-family: inherit; outline: none; line-height: 1.4;
    }
    .cw-input-row textarea:focus { border-color: #2563eb; }
    .cw-send {
      background: #2563eb; border: none; border-radius: .65rem;
      color: #fff; padding: 0 .85rem; cursor: pointer; font-size: .9rem;
      transition: background .15s;
    }
    .cw-send:hover:not(:disabled) { background: #1d4ed8; }
    .cw-send:disabled { opacity: .45; cursor: default; }
    /* ── Admin Chat-Panel ─────────────────────────────────────── */
    .ac-wrap {
      display: flex; gap: 0; border: 1px solid #e2e8f0; border-radius: .75rem;
      overflow: hidden; height: 500px;
    }
    .ac-sidebar {
      width: 220px; flex-shrink: 0; border-right: 1px solid #e2e8f0;
      display: flex; flex-direction: column;
    }
    .ac-search { padding: .6rem; border-bottom: 1px solid #e2e8f0; }
    .ac-search input {
      width: 100%; border: 1px solid #e2e8f0; border-radius: .5rem;
      padding: .4rem .65rem; font-size: .82rem; outline: none; font-family: inherit;
      box-sizing: border-box;
    }
    .ac-search input:focus { border-color: #2563eb; }
    .ac-list { flex: 1; overflow-y: auto; }
    .ac-row {
      display: flex; align-items: center; gap: .6rem; padding: .65rem .75rem;
      cursor: pointer; border-bottom: 1px solid #f1f5f9; transition: background .12s;
    }
    .ac-row:hover { background: #f8fafc; }
    .ac-row.active { background: #eff6ff; }
    .ac-av {
      width: 34px; height: 34px; border-radius: 50%; background: #dbeafe;
      color: #2563eb; font-weight: 700; font-size: .85rem; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .ac-info { flex: 1; min-width: 0; }
    .ac-name { font-size: .82rem; font-weight: 600; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ac-email { font-size: .72rem; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ac-badge {
      background: #2563eb; color: #fff; border-radius: 99px;
      font-size: .65rem; font-weight: 700; min-width: 17px; height: 17px;
      display: none; align-items: center; justify-content: center; padding: 0 4px;
    }

    /* ── Dismiss-Button (X) in aktiven Chat-Zeilen ──────────────── */
    .ac-dismiss {
      display: flex; align-items: center; justify-content: center;
      width: 22px; height: 22px; flex-shrink: 0;
      border: none; background: transparent; border-radius: 50%;
      cursor: pointer; color: #cbd5e1;
      font-size: .8rem; line-height: 1;
      opacity: 0;                         /* standardmäßig unsichtbar */
      transition: opacity .15s, color .15s, background .15s;
      margin-left: auto;
    }
    .ac-row:hover .ac-dismiss  { opacity: 1; }            /* bei Hover einblenden */
    .ac-dismiss:hover          { color: #ef4444; background: #fff1f2; }
    .ac-row.active .ac-dismiss { opacity: .4; }           /* leicht sichtbar wenn aktiv */
    .ac-row.active:hover .ac-dismiss { opacity: 1; }

    /* ── Archivierte Kontakt-Zeile ───────────────────────────────── */
    .ac-row.ac-archived { opacity: 1; }   /* Opacity über Kinder steuern */
    .ac-row.ac-archived .ac-av {
      background: #e2e8f0; color: #94a3b8;   /* Grau statt Blau */
    }
    .ac-row.ac-archived .ac-name {
      color: #94a3b8; font-weight: 500;
    }
    .ac-row.ac-archived .ac-email { color: #c0c9d4; }
    .ac-row.ac-archived:hover { background: #f8fafc; }
    .ac-row.ac-archived.active { background: #f1f5f9; }

    /* Kleines "Archiviert"-Tag in der Zeile */
    .ac-arc-tag {
      font-size: .6rem; font-weight: 600; color: #94a3b8;
      background: #f1f5f9; border: 1px solid #e2e8f0;
      border-radius: 99px; padding: .05rem .42rem;
      margin-left: .35rem; vertical-align: middle; white-space: nowrap;
    }

    /* ── Archiv-Accordion in der Sidebar ────────────────────────── */
    .ac-arc-accordion {
      flex-shrink: 0; border-top: 1px solid #f1f5f9;
    }
    .ac-arc-header {
      display: flex; align-items: center; gap: .45rem;
      padding: .55rem .75rem; cursor: pointer;
      user-select: none; transition: background .12s;
    }
    .ac-arc-header:hover { background: #f8fafc; }
    .ac-arc-label {
      flex: 1; font-size: .7rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: .065em; color: #94a3b8;
    }
    .ac-arc-pill {
      font-size: .64rem; font-weight: 700; color: #94a3b8;
      background: #f1f5f9; border: 1px solid #e2e8f0;
      border-radius: 99px; padding: .1rem .48rem;
    }
    .ac-arc-chevron {
      color: #c0c9d4; font-size: .68rem;
      transition: transform .22s cubic-bezier(.4,0,.2,1);
    }
    .ac-arc-accordion.open .ac-arc-chevron { transform: rotate(180deg); }
    .ac-arc-body {
      max-height: 0; overflow: hidden;
      transition: max-height .28s cubic-bezier(.4,0,.2,1);
    }
    .ac-arc-accordion.open .ac-arc-body { max-height: 600px; }

    /* ── Read-Only-Banner (erscheint wenn archivierter Kunde gewählt) */
    #ac-readonly-banner {
      display: none; align-items: center; gap: .5rem;
      padding: .55rem .85rem; background: #f8fafc;
      border-top: 1px solid #e2e8f0; flex-shrink: 0;
    }
    #ac-readonly-banner.show { display: flex; }
    #ac-readonly-banner svg { flex-shrink: 0; color: #94a3b8; }
    #ac-readonly-banner span {
      font-size: .78rem; color: #64748b; line-height: 1.4;
    }
    /* Input-Zeile im Read-Only-Zustand */
    .ac-input-row.readonly textarea {
      background: #f8fafc; color: #94a3b8; cursor: not-allowed;
    }
    .ac-input-row.readonly .ac-attach-btn { opacity: .35; pointer-events: none; }
    .ac-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
    .ac-ph { display: flex; align-items: center; justify-content: center; height: 100%; color: #94a3b8; font-size: .9rem; }
    .ac-pane { display: flex; flex-direction: column; height: 100%; }
    .ac-pane-header {
      padding: .75rem 1rem; border-bottom: 1px solid #e2e8f0;
      font-weight: 600; font-size: .9rem; color: #1e293b; flex-shrink: 0;
    }
    /* ── Tab-Leiste im Chat-Hauptbereich ────────────────────────── */
    .ac-tabs {
      display: flex; flex-shrink: 0;
      border-bottom: 1px solid #e2e8f0;
      background: #f8fafc;
    }
    .ac-tab {
      flex: 1; padding: .55rem .5rem;
      font-size: .8rem; font-weight: 600; color: #64748b;
      background: none; border: none; border-bottom: 2px solid transparent;
      cursor: pointer; transition: color .15s, border-color .15s;
    }
    .ac-tab.active { color: #2563eb; border-bottom-color: #2563eb; background: #fff; }
    .ac-tab:hover:not(.active) { color: #334155; background: #f1f5f9; }

    /* ── Notizen-Panel ───────────────────────────────────────────── */
    #ac-notes-panel {
      display: none; flex: 1; flex-direction: column;
      padding: .75rem 1rem; gap: .6rem; overflow-y: auto;
    }
    #ac-notes-panel.visible { display: flex; }
    #ac-notes-label {
      font-size: .78rem; font-weight: 600; color: #64748b;
      text-transform: uppercase; letter-spacing: .04em;
    }
    #ac-notes-textarea {
      flex: 1; min-height: 140px; resize: none;
      border: 1px solid #e2e8f0; border-radius: .65rem;
      padding: .6rem .75rem; font-size: .875rem;
      font-family: inherit; line-height: 1.5; outline: none;
      color: #1e293b; background: #fff;
      transition: border-color .15s;
    }
    #ac-notes-textarea:focus { border-color: #2563eb; }
    #ac-notes-footer {
      display: flex; align-items: center; gap: .6rem; flex-shrink: 0;
    }
    #ac-notes-save {
      padding: .45rem 1.1rem; background: #2563eb; color: #fff;
      border: none; border-radius: .6rem; font-size: .82rem; font-weight: 600;
      cursor: pointer; transition: background .15s;
    }
    #ac-notes-save:hover { background: #1d4ed8; }
    #ac-notes-save:disabled { background: #93c5fd; cursor: default; }
    #ac-notes-status {
      font-size: .78rem; color: #64748b; flex: 1;
    }
    #ac-notes-ts {
      font-size: .72rem; color: #94a3b8;
    }

    #ac-messages {
      flex: 1; overflow-y: auto; padding: .75rem 1rem;
      display: flex; flex-direction: column; gap: .45rem;
    }
    .ac-input-row {
      display: flex; gap: .5rem; padding: .65rem .75rem;
      border-top: 1px solid #e2e8f0; flex-shrink: 0;
    }
    .ac-input-row textarea {
      flex: 1; border: 1px solid #e2e8f0; border-radius: .65rem;
      padding: .45rem .7rem; font-size: .875rem; resize: none; height: 38px;
      font-family: inherit; outline: none; line-height: 1.4;
    }
    .ac-input-row textarea:focus { border-color: #2563eb; }
    .ac-send {
      background: #2563eb; border: none; border-radius: .65rem;
      color: #fff; padding: 0 .85rem; cursor: pointer; font-size: .9rem;
      transition: background .15s;
    }
    .ac-send:hover:not(:disabled) { background: #1d4ed8; }
    .ac-send:disabled { opacity: .45; cursor: default; }
    .ac-total {
      background: #f1f5f9; color: #64748b; font-size: .75rem; font-weight: 600;
      border-radius: 99px; padding: .15rem .6rem;
    }

    /* ── Admin Chat Bell (Topbar) ─────────────────────────────── */
    #admin-chat-fab {
      position: relative;
      width: 36px; height: 36px; border-radius: .6rem;
      background: rgba(124,58,237,.12); border: none; cursor: pointer;
      display: none; align-items: center; justify-content: center;
      transition: background .15s;
      flex-shrink: 0;
    }
    #admin-chat-fab:hover  { background: rgba(124,58,237,.22); }
    #admin-chat-fab:active { transform: scale(.94); }
    #admin-chat-fab svg { width: 20px; height: 20px; }
    /* Badge: exakt unten-links am Glockensymbol */
    #admin-chat-fab-badge {
      position: absolute;
      bottom: 2px;
      left: 2px;
      background: #ef4444; color: #fff;
      font-size: .6rem; font-weight: 700;
      border-radius: 99px; min-width: 16px; height: 16px;
      display: none; align-items: center; justify-content: center;
      padding: 0 3px;
      border: 1.5px solid #fff;
      pointer-events: none;
      transform-origin: bottom left;
    }
    /* Badge erscheint mit Pop-Effekt */
    #admin-chat-fab-badge.pop {
      animation: badge-pop .35s cubic-bezier(.34,1.56,.64,1);
    }
    @keyframes badge-pop {
      0%   { transform: scale(0); opacity: 0; }
      100% { transform: scale(1); opacity: 1; }
    }
    /* Glocke wackelt wenn neue Nachricht kommt */
    #admin-chat-fab.ring {
      animation: bell-ring .5s ease;
    }
    @keyframes bell-ring {
      0%,100% { transform: rotate(0deg); }
      20%     { transform: rotate(-18deg); }
      40%     { transform: rotate(18deg); }
      60%     { transform: rotate(-12deg); }
      80%     { transform: rotate(8deg); }
    }
    /* Test-Button im Drawer-Header */
    .acd-test-btn {
      background: rgba(255,255,255,.18);
      border: 1px solid rgba(255,255,255,.35);
      color: #fff; font-size: .72rem; font-weight: 600;
      border-radius: .5rem; padding: .28rem .65rem;
      cursor: pointer; white-space: nowrap;
      transition: background .15s;
      letter-spacing: .01em;
    }
    .acd-test-btn:hover { background: rgba(255,255,255,.28); }

    /* ── Admin Chat Drawer + Backdrop ─────────────────────────── */
    #admin-chat-backdrop {
      position: fixed; inset: 0; z-index: 940;
      background: rgba(15,23,42,.52);
      opacity: 0; visibility: hidden;
      transition: opacity .3s ease, visibility .3s ease;
    }
    #admin-chat-backdrop.open { opacity: 1; visibility: visible; }

    #admin-chat-drawer {
      position: fixed; top: 0; left: 0;
      width: 38vw; height: 100vh; z-index: 945;
      background: #fff;
      box-shadow: 8px 0 48px rgba(0,0,0,.22);
      display: flex; flex-direction: column;
      transform: translateX(-100%);
      transition: transform .32s cubic-bezier(.4,0,.2,1);
      overflow: hidden;
    }
    #admin-chat-drawer.open { transform: translateX(0); }

    /* Drawer-Header */
    .acd-header {
      background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
      color: #fff; padding: .9rem 1.25rem;
      display: flex; align-items: center; gap: .75rem; flex-shrink: 0;
    }
    .acd-header-icon {
      width: 36px; height: 36px; border-radius: 50%;
      background: rgba(255,255,255,.2);
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .acd-header-icon svg { width: 18px; height: 18px; fill: #fff; }
    .acd-header h2 { font-size: 1rem; font-weight: 700; flex: 1; margin: 0; letter-spacing: -.01em; }
    .acd-close {
      background: none; border: none; color: #fff; cursor: pointer;
      width: 34px; height: 34px; border-radius: .5rem;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.25rem; transition: background .15s; line-height: 1;
    }
    .acd-close:hover { background: rgba(255,255,255,.2); }
    .acd-total {
      background: rgba(255,255,255,.22); color: #fff; font-size: .74rem;
      font-weight: 600; border-radius: 99px; padding: .15rem .65rem; white-space: nowrap;
    }
    /* ac-wrap im Drawer: volle Höhe, keine Borders/Radius */
    #admin-chat-drawer .ac-wrap {
      flex: 1; height: 100%; border: none; border-radius: 0; overflow: hidden;
    }

    /* ── Drag-and-Drop Dropzone ────────────────────────────────── */
    /* Drawer ist Anker für das Overlay */
    #admin-chat-drawer { position: fixed; } /* bereits gesetzt, aber sicher */

    /* Vollflächiges Overlay über dem gesamten Drawer-Inhalt (unter Header) */
    #ac-drop-overlay {
      display: none;
      position: absolute;
      top: 60px; /* Header-Höhe überspringen */
      left: 0; right: 0; bottom: 0;
      z-index: 30;
      background: rgba(37,99,235,.07);
      border: 3px dashed #2563eb;
      border-radius: 0;
      flex-direction: column;
      align-items: center; justify-content: center;
      gap: .75rem;
      pointer-events: none;
      animation: drop-fade-in .18s ease;
    }
    #ac-drop-overlay.visible { display: flex; }
    @keyframes drop-fade-in {
      from { opacity: 0; transform: scale(.97); }
      to   { opacity: 1; transform: scale(1);   }
    }
    .ac-drop-icon {
      width: 52px; height: 52px; border-radius: 50%;
      background: #2563eb;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 4px 16px rgba(37,99,235,.35);
    }
    .ac-drop-icon svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .ac-drop-label { font-size: .9rem; font-weight: 600; color: #2563eb; }
    .ac-drop-sub   { font-size: .78rem; color: #64748b; }

    /* ── Kunden-Chat Drag-Overlay ───────────────────────────────── */
    /* #chat-window ist bereits position:fixed → dient als Containing Block für absolute Kinder */
    #cw-drop-overlay {
      display: none;
      position: absolute; inset: 0; z-index: 30;
      background: rgba(37,99,235,.07);
      border: 3px dashed #2563eb;
      border-radius: 1.25rem; /* passend zu #chat-window */
      flex-direction: column;
      align-items: center; justify-content: center;
      gap: .65rem;
      pointer-events: none;
      animation: drop-fade-in .18s ease;
    }
    #cw-drop-overlay.visible { display: flex; }

    /* Error-Toast im Kundenchat */
    #cw-drop-error {
      display: none;
      position: absolute; bottom: 4.5rem; left: 50%; transform: translateX(-50%);
      background: #1e293b; color: #fff;
      border-radius: .65rem; padding: .5rem .9rem;
      font-size: .78rem; font-weight: 500;
      white-space: nowrap; z-index: 40;
      box-shadow: 0 4px 16px rgba(0,0,0,.2);
      align-items: center; gap: .4rem;
      animation: toast-in .22s cubic-bezier(.34,1.56,.64,1);
    }
    #cw-drop-error.visible { display: flex; }
    #cw-drop-error svg { width: 14px; height: 14px; flex-shrink: 0; }

    /* ── Bild-Vorschau (Preview Strip über Eingabefeld) ─────────── */
    #ac-img-preview,
    #cw-img-preview {
      display: none;
      align-items: center; gap: .65rem;
      padding: .5rem .75rem;
      border-top: 1px solid #e2e8f0;
      background: #f8fafc;
      flex-shrink: 0;
      animation: preview-slide-up .2s ease;
    }
    #ac-img-preview.visible,
    #cw-img-preview.visible { display: flex; }
    @keyframes preview-slide-up {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0);   }
    }
    .ac-preview-thumb {
      width: 52px; height: 52px; border-radius: .5rem;
      object-fit: cover;
      border: 1.5px solid #e2e8f0;
      flex-shrink: 0;
      box-shadow: 0 2px 8px rgba(0,0,0,.1);
    }
    .ac-preview-info { flex: 1; min-width: 0; }
    .ac-preview-name {
      font-size: .78rem; font-weight: 600; color: #1e293b;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .ac-preview-size { font-size: .7rem; color: #94a3b8; margin-top: .1rem; }
    .ac-preview-del {
      width: 26px; height: 26px; border-radius: 50%;
      background: #fee2e2; border: none; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      font-size: .8rem; color: #dc2626;
      transition: background .15s;
      flex-shrink: 0;
    }
    .ac-preview-del:hover { background: #fca5a5; }

    /* ── Error-Toast ────────────────────────────────────────────── */
    #ac-drop-error {
      display: none;
      position: absolute; bottom: 5rem; left: 50%; transform: translateX(-50%);
      background: #1e293b; color: #fff;
      border-radius: .65rem; padding: .55rem 1rem;
      font-size: .8rem; font-weight: 500;
      white-space: nowrap; z-index: 30;
      box-shadow: 0 4px 16px rgba(0,0,0,.2);
      align-items: center; gap: .5rem;
      animation: toast-in .22s cubic-bezier(.34,1.56,.64,1);
    }
    #ac-drop-error.visible { display: flex; }
    #ac-drop-error svg { width: 15px; height: 15px; flex-shrink: 0; }
    @keyframes toast-in {
      from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.95); }
      to   { opacity: 1; transform: translateX(-50%) translateY(0)    scale(1);  }
    }

    /* Drag-Highlight: Eingabebereich leuchtet blau wenn Datei drüber */
    #admin-chat-drawer.dragging-over .ac-input-row {
      border-top-color: #2563eb;
      background: #eff6ff;
    }

    /* Datei-Anhang-Button im Input */
    .ac-attach-btn {
      width: 34px; height: 34px; border-radius: .5rem; flex-shrink: 0;
      background: none; border: 1.5px solid #e2e8f0; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      color: #94a3b8; transition: border-color .15s, color .15s, background .15s;
    }
    .ac-attach-btn:hover { border-color: #2563eb; color: #2563eb; background: #eff6ff; }
    .ac-attach-btn svg  { width: 16px; height: 16px; pointer-events: none; }
    /* Versteckte file-inputs */
    #ac-file-input, #cw-file-input { display: none; }

    /* ── Bild-Nachricht im Chatverlauf ──────────────────────────── */
    .chat-bubble-img {
      padding: .3rem !important;
      background: transparent !important;
      overflow: hidden;
    }
    /* Eigene Nachrichten: Bild hat blauen Rahmen-Akzent */
    .chat-row.own .chat-bubble-img { background: transparent !important; }

    .chat-img-wrap {
      position: relative;
      border-radius: .65rem;
      overflow: hidden;
      display: block;
      max-width: min(240px, 68%);
      background: #e2e8f0; /* Fallback während Laden */
      line-height: 0;
    }
    /* Eigene Msg: blauer Rand */
    .chat-row.own  .chat-img-wrap { border: 2px solid rgba(255,255,255,.35); }
    /* Fremde Msg: grauer Rand */
    .chat-row.them .chat-img-wrap { border: 2px solid #e2e8f0; }

    .chat-img {
      display: block;
      width: 100%; max-width: 240px; max-height: 180px;
      object-fit: cover;
      border-radius: .5rem;
      cursor: zoom-in;
      transition: filter .2s;
    }
    .chat-img:hover { filter: brightness(.92); }

    /* ── Loading-Skeleton (Shimmer) ─────────────────────────────── */
    .chat-img-skeleton {
      width: 180px; height: 120px;
      border-radius: .5rem;
      background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
      background-size: 200% 100%;
      animation: shimmer 1.4s infinite;
      display: flex; align-items: center; justify-content: center;
    }
    .chat-row.own .chat-img-skeleton {
      background: linear-gradient(90deg,rgba(255,255,255,.15) 25%,rgba(255,255,255,.3) 50%,rgba(255,255,255,.15) 75%);
      background-size: 200% 100%;
    }
    @keyframes shimmer {
      0%   { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }
    .chat-img-skeleton svg { opacity: .35; }

    /* Upload-Fortschrittsring im Skeleton */
    .chat-img-progress {
      position: absolute; top: 50%; left: 50%;
      transform: translate(-50%,-50%);
      width: 36px; height: 36px;
    }
    .chat-img-progress circle {
      fill: none; stroke-width: 3;
      stroke-linecap: round;
      transform-origin: 50% 50%;
      transform: rotate(-90deg);
      transition: stroke-dashoffset .3s ease;
    }
    .chat-img-progress .track   { stroke: rgba(255,255,255,.2); }
    .chat-img-progress .fill    { stroke: #fff; stroke-dasharray: 88; stroke-dashoffset: 88; }

    /* ── Error-Fallback ─────────────────────────────────────────── */
    .chat-img-error {
      width: 180px; height: 90px;
      border-radius: .5rem;
      background: #fee2e2;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: .3rem;
      color: #dc2626; font-size: .75rem; font-weight: 500;
    }
    .chat-img-error svg { width: 20px; height: 20px; opacity: .7; }

    /* ── Bild-Meta (Name + Größe, unter dem Bild) ───────────────── */
    .chat-img-meta {
      display: flex; align-items: center; gap: .4rem;
      padding: .3rem .5rem .1rem;
      font-size: .7rem; line-height: 1.3;
    }
    .chat-row.own  .chat-img-meta { color: rgba(255,255,255,.75); }
    .chat-row.them .chat-img-meta { color: #94a3b8; }
    .chat-img-meta-name {
      flex: 1; min-width: 0;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    /* ── Bildunterschrift (optionaler Begleittext) ──────────────── */
    .chat-img-caption {
      padding: .3rem .5rem .4rem;
      font-size: .85rem; line-height: 1.45;
      word-break: break-word;
    }
    .chat-row.own  .chat-img-caption { color: #fff; }
    .chat-row.them .chat-img-caption { color: #1e293b; }

    /* ── Lightbox ───────────────────────────────────────────────── */
    #ac-lightbox {
      position: fixed; inset: 0; z-index: 9999;
      background: rgba(0,0,0,0);
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      visibility: hidden;
      transition: background .22s ease, visibility .22s ease;
    }
    #ac-lightbox.open {
      background: rgba(0,0,0,.9);
      visibility: visible;
    }
    #ac-lightbox-img {
      max-width: min(90vw, 1200px); max-height: 80vh;
      border-radius: .75rem;
      box-shadow: 0 24px 80px rgba(0,0,0,.6);
      object-fit: contain;
      transform: scale(.9); opacity: 0;
      transition: transform .25s cubic-bezier(.34,1.2,.64,1), opacity .22s ease;
      cursor: zoom-out;
    }
    #ac-lightbox.open #ac-lightbox-img { transform: scale(1); opacity: 1; }
    #ac-lightbox-bar {
      display: flex; align-items: center; gap: 1rem;
      padding: .75rem 1.25rem;
      color: rgba(255,255,255,.75); font-size: .82rem;
      max-width: min(90vw, 1200px); width: 100%;
      opacity: 0; transition: opacity .3s ease .1s;
    }
    #ac-lightbox.open #ac-lightbox-bar { opacity: 1; }
    #ac-lightbox-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #ac-lightbox-close {
      background: rgba(255,255,255,.12); border: none; color: #fff;
      width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.1rem; transition: background .15s; flex-shrink: 0;
    }
    #ac-lightbox-close:hover { background: rgba(255,255,255,.25); }

    /* ── Realtime-Statusindikator ─────────────────────────────── */
    .rt-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: #86efac; flex-shrink: 0;
      transition: background .4s;
      box-shadow: 0 0 0 0 rgba(134,239,172,.6);
    }
    .rt-dot.connecting {
      background: #fbbf24;
      animation: pulse-yellow 1.2s infinite;
    }
    .rt-dot.offline {
      background: #f87171;
      animation: none;
    }
    .rt-dot.online { animation: pulse-green 2.5s infinite; }
    @keyframes pulse-green {
      0%,100% { box-shadow: 0 0 0 0 rgba(134,239,172,.5); }
      50%      { box-shadow: 0 0 0 5px rgba(134,239,172,0); }
    }
    @keyframes pulse-yellow {
      0%,100% { box-shadow: 0 0 0 0 rgba(251,191,36,.6); }
      50%      { box-shadow: 0 0 0 5px rgba(251,191,36,0); }
    }
    /* Reconnect-Banner über dem Input */
    .rt-banner {
      display: none; align-items: center; justify-content: center; gap: .4rem;
      padding: .35rem .75rem; font-size: .75rem; font-weight: 500;
      background: #fef3c7; color: #92400e; border-top: 1px solid #fde68a;
      flex-shrink: 0;
    }
    .rt-banner.show { display: flex; }
    .rt-banner.error { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
    /* Admin-Chat Statusleiste */
    .ac-status {
      display: flex; align-items: center; gap: .4rem;
      padding: .35rem .75rem; font-size: .72rem; color: #94a3b8;
      border-bottom: 1px solid #f1f5f9; flex-shrink: 0;
    }

    /* ── Kunden-Profil-Modal ──────────────────────────────────── */
    #customer-modal-overlay {
      position: fixed; inset: 0; z-index: 1100;
      background: rgba(15,23,42,.45);
      backdrop-filter: blur(3px);
      display: flex; align-items: center; justify-content: center;
      padding: 1rem;
      opacity: 0; visibility: hidden;
      transition: opacity .22s ease, visibility .22s ease;
    }
    #customer-modal-overlay.open {
      opacity: 1; visibility: visible;
    }
    #customer-modal {
      background: #fff; border-radius: 1.25rem;
      width: 100%; max-width: 520px;
      box-shadow: 0 24px 60px rgba(15,23,42,.18);
      transform: translateY(18px) scale(.97);
      transition: transform .25s cubic-bezier(.34,1.56,.64,1);
      overflow: hidden; max-height: 92vh; overflow-y: auto;
    }
    #customer-modal-overlay.open #customer-modal {
      transform: translateY(0) scale(1);
    }

    /* Modal-Header */
    .cm-header {
      background: linear-gradient(135deg, #1e40af 0%, #2563eb 60%, #3b82f6 100%);
      padding: 1.75rem 1.5rem 1.25rem;
      display: flex; align-items: flex-start; gap: 1.1rem; position: relative;
    }
    .cm-avatar {
      width: 64px; height: 64px; border-radius: 50%;
      background: rgba(255,255,255,.2); border: 3px solid rgba(255,255,255,.4);
      color: #fff; font-size: 1.5rem; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; letter-spacing: .5px;
    }
    .cm-header-info { flex: 1; min-width: 0; }
    .cm-name   { color: #fff; font-size: 1.15rem; font-weight: 700; margin: 0 0 .2rem; }
    .cm-email  { color: rgba(255,255,255,.75); font-size: .82rem; margin: 0 0 .55rem; }
    .cm-badges { display: flex; flex-wrap: wrap; gap: .35rem; }
    .cm-badge  {
      background: rgba(255,255,255,.18); color: #fff;
      font-size: .7rem; font-weight: 600; border-radius: 99px;
      padding: .2rem .65rem; border: 1px solid rgba(255,255,255,.28);
    }
    .cm-badge.green  { background: rgba(134,239,172,.25); border-color: rgba(134,239,172,.4); }
    .cm-badge.yellow { background: rgba(251,191,36,.25);  border-color: rgba(251,191,36,.4); }
    .cm-badge.red    { background: rgba(248,113,113,.25); border-color: rgba(248,113,113,.4); }
    .cm-close {
      position: absolute; top: 1rem; right: 1rem;
      width: 30px; height: 30px; border-radius: 50%;
      background: rgba(255,255,255,.15); border: none; cursor: pointer;
      color: #fff; font-size: 1rem; line-height: 1;
      display: flex; align-items: center; justify-content: center;
      transition: background .15s;
    }
    .cm-close:hover { background: rgba(255,255,255,.3); }

    /* Sektionen */
    .cm-body { padding: 1.25rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 1.1rem; }
    .cm-section {
      background: #f8fafc; border: 1px solid #e2e8f0;
      border-radius: .85rem; padding: 1rem 1.1rem;
    }
    .cm-section-title {
      font-size: .72rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .07em; color: #64748b; margin: 0 0 .75rem;
    }

    /* Sektion 1: Profil-Grid */
    .cm-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: .55rem .75rem;
    }
    .cm-field label {
      display: block; font-size: .7rem; font-weight: 600;
      color: #94a3b8; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .15rem;
    }
    .cm-field span {
      font-size: .875rem; font-weight: 500; color: #1e293b;
    }
    .cm-field.full { grid-column: 1 / -1; }

    /* Sektion 2: Quick Action */
    .cm-action-btn {
      width: 100%; padding: .85rem 1rem;
      background: linear-gradient(135deg, #2563eb, #1d4ed8);
      border: none; border-radius: .75rem; cursor: pointer; color: #fff;
      display: flex; align-items: center; justify-content: center; gap: .65rem;
      font-size: .925rem; font-weight: 600; font-family: inherit;
      box-shadow: 0 4px 14px rgba(37,99,235,.35);
      transition: transform .15s, box-shadow .15s;
    }
    .cm-action-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(37,99,235,.45);
    }
    .cm-action-btn:active { transform: scale(.97); }
    .cm-action-btn svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .cm-section.action-section { background: transparent; border: none; padding: 0; }

    /* ── Sektion: Interne Notizen ───────────────────────────────── */
    .cm-notes-section {
      background: #fffbeb;                        /* leicht warmgelb – hebt sich dezent ab */
      border: 1px solid #fde68a;
      border-radius: .85rem; padding: 1rem 1.1rem;
      display: flex; flex-direction: column; gap: .65rem;
    }
    .cm-notes-header {
      display: flex; align-items: center; gap: .5rem;
    }
    .cm-notes-icon {
      width: 22px; height: 22px; flex-shrink: 0;
      color: #d97706;
    }
    .cm-notes-title {
      font-size: .72rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .07em; color: #92400e; flex: 1; margin: 0;
    }
    .cm-notes-privacy {
      font-size: .67rem; font-weight: 500;
      background: rgba(217,119,6,.12); color: #b45309;
      border-radius: 99px; padding: .15rem .55rem;
      border: 1px solid rgba(217,119,6,.25);
    }
    #cm-notes-textarea {
      width: 100%; box-sizing: border-box;
      min-height: 110px; resize: vertical;
      border: 1.5px solid #fcd34d;
      border-radius: .65rem;
      padding: .65rem .8rem;
      font-size: .875rem; font-family: inherit; line-height: 1.55;
      color: #1c1917; background: #fff;
      outline: none;
      transition: border-color .18s, box-shadow .18s;
      placeholder-shown-animation: none;         /* nur zur Klarheit */
    }
    #cm-notes-textarea:focus {
      border-color: #2563eb;
      box-shadow: 0 0 0 3px rgba(37,99,235,.15);
    }
    .cm-notes-status-row {
      display: flex; align-items: center; gap: .5rem; min-height: 18px;
    }
    #cm-notes-fb {
      font-size: .78rem; font-weight: 500;
      color: #16a34a;                             /* Grün für "Gespeichert ✓" */
      opacity: 0;
      transition: opacity .3s ease;
    }
    #cm-notes-fb.show   { opacity: 1; }
    #cm-notes-fb.fade   { opacity: 0; }
    #cm-notes-fb.saving { color: #64748b; }       /* Grau für "Speichert…" */
    #cm-notes-fb.error  { color: #dc2626; }       /* Rot für Fehler */
    #cm-notes-ts-modal {
      font-size: .72rem; color: #a16207; margin-left: auto;
    }

    /* ── Kunden-Tags im Modal ──────────────────────────────────────────── */
    .cm-tags-section {
      display: flex; flex-direction: column; gap: .6rem;
    }
    .cm-tags-label {
      font-size: .72rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .07em; color: #374151;
      display: flex; align-items: center; gap: .4rem;
    }
    .cm-tags-label svg { color: #6366f1; flex-shrink: 0; }

    /* Aktive Pills (ausgewählte Tags) */
    .cm-tags-active {
      display: flex; flex-wrap: wrap; gap: .35rem;
      min-height: 28px;
    }
    .cm-tag-pill {
      display: inline-flex; align-items: center; gap: .28rem;
      padding: .22rem .62rem;
      border-radius: 99px;
      font-size: .75rem; font-weight: 600;
      cursor: default;
      border: 1.5px solid transparent;
      transition: filter .15s;
    }
    .cm-tag-pill:hover { filter: brightness(.93); }
    .cm-tag-pill .cm-tag-x {
      display: inline-flex; align-items: center; justify-content: center;
      width: 14px; height: 14px; border-radius: 50%;
      border: none; background: rgba(0,0,0,.12);
      cursor: pointer; font-size: .65rem; line-height: 1;
      transition: background .15s;
    }
    .cm-tag-pill .cm-tag-x:hover { background: rgba(0,0,0,.25); }

    /* Dropdown zum Hinzufügen */
    .cm-tags-add-row {
      display: flex; align-items: center; gap: .45rem;
    }
    #cm-tags-select {
      flex: 1;
      font-size: .8rem; font-family: inherit;
      border: 1.5px solid #e5e7eb; border-radius: .55rem;
      padding: .38rem .6rem; color: #374151; background: #fff;
      outline: none; cursor: pointer;
      transition: border-color .18s, box-shadow .18s;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239ca3af'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right .6rem center;
      padding-right: 1.8rem;
    }
    #cm-tags-select:focus {
      border-color: #6366f1;
      box-shadow: 0 0 0 3px rgba(99,102,241,.15);
    }
    #cm-tags-add-btn {
      padding: .38rem .8rem; border-radius: .55rem;
      border: 1.5px solid #6366f1; background: #6366f1;
      color: #fff; font-size: .78rem; font-weight: 600;
      cursor: pointer; white-space: nowrap;
      transition: background .15s, transform .1s;
    }
    #cm-tags-add-btn:hover  { background: #4f46e5; border-color: #4f46e5; }
    #cm-tags-add-btn:active { transform: scale(.96); }

    /* Sektion 3: Website-Kennzahlen */
    .cm-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .55rem; }
    .cm-stat {
      background: #fff; border: 1px solid #e2e8f0; border-radius: .65rem;
      padding: .7rem .85rem;
    }
    .cm-stat-label { font-size: .68rem; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .25rem; }
    .cm-stat-value { font-size: .9rem; font-weight: 700; color: #1e293b; display: flex; align-items: center; gap: .35rem; }
    .cm-stat-value .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .cm-stat-value .dot.green  { background: #22c55e; }
    .cm-stat-value .dot.yellow { background: #eab308; }
    .cm-stat-value .dot.red    { background: #ef4444; }
    .cm-perf {
      background: #fff; border: 1px solid #e2e8f0; border-radius: .65rem;
      padding: .7rem .85rem; grid-column: 1 / -1;
    }
    .cm-perf-bar-bg {
      background: #e2e8f0; border-radius: 99px; height: 8px; margin-top: .45rem; overflow: hidden;
    }
    .cm-perf-bar {
      height: 100%; border-radius: 99px;
      transition: width .6s ease;
    }

    /* ── Accordion (Website-Kennzahlen) ──────────────────────── */
    .cm-accordion { display: flex; flex-direction: column; gap: .4rem; }
    .cm-acc-item {
      border: 1px solid #e2e8f0; border-radius: .65rem; overflow: hidden;
    }
    .cm-acc-trigger {
      width: 100%; background: #fff; border: none; cursor: pointer;
      padding: .65rem .85rem; font-family: inherit; font-size: .82rem;
      font-weight: 600; color: #1e293b;
      display: flex; align-items: center; justify-content: space-between;
      transition: background .12s;
    }
    .cm-acc-trigger:hover { background: #f8fafc; }
    .cm-acc-trigger .acc-left  { display: flex; align-items: center; gap: .55rem; }
    .cm-acc-trigger .acc-icon  { font-size: .95rem; }
    .cm-acc-trigger .acc-badge {
      font-size: .68rem; font-weight: 700; border-radius: 99px;
      padding: .15rem .55rem; background: #f1f5f9; color: #64748b;
    }
    .cm-acc-trigger .acc-badge.green  { background: #dcfce7; color: #15803d; }
    .cm-acc-trigger .acc-badge.yellow { background: #fef9c3; color: #854d0e; }
    .cm-acc-trigger .acc-badge.red    { background: #fee2e2; color: #991b1b; }
    .cm-acc-chevron {
      font-size: .7rem; color: #94a3b8;
      transition: transform .2s ease;
    }
    .cm-acc-item.open .cm-acc-chevron { transform: rotate(180deg); }
    .cm-acc-body {
      max-height: 0; overflow: hidden;
      transition: max-height .25s ease, padding .25s ease;
      background: #f8fafc;
    }
    .cm-acc-item.open .cm-acc-body { max-height: 400px; }
    .cm-acc-table {
      width: 100%; border-collapse: collapse; font-size: .8rem;
    }
    .cm-acc-table tr + tr td { border-top: 1px solid #e2e8f0; }
    .cm-acc-table td { padding: .45rem .85rem; }
    .cm-acc-table td:first-child { color: #64748b; font-weight: 500; width: 45%; }
    .cm-acc-table td:last-child  { color: #1e293b; font-weight: 600; text-align: right; }
    /* Performance-Balken im Accordion */
    .cm-mini-bar-bg {
      background: #e2e8f0; border-radius: 99px; height: 5px;
      margin-top: .3rem; overflow: hidden; width: 100%;
    }
    .cm-mini-bar { height: 100%; border-radius: 99px; transition: width .5s ease; }