/* Ergänzungen zu Tailwind – helles Compiaz-Branding */
:root {
    --compiaz-blue: #00a6fb;
    --compiaz-navy: #003554;
}

/*
 * iOS Safe Area – Dynamic Island / Notch / Home-Indicator
 *
 * viewport-fit=cover ist gesetzt, damit der Hintergrund bis zum Bildschirmrand geht.
 * Damit Header-Inhalt NICHT hinter Dynamic Island verborgen bleibt, muss der
 * Header oben den Safe-Area-Abstand erhalten. Das Hintergrundbild füllt trotzdem
 * komplett (nur der Innenabstand wird angepasst).
 */
/*
 * Nur CRM-Site-Header (Navigation), NICHT Inhalts-Kacheln (.wiki-hero, .time-review-hero, …).
 * Die alte Regel «.crm-admin header» hat padding-top in Panel-Kacheln auf 0 gesetzt.
 */
.crm-admin > div.min-h-screen > header.sticky,
.crm-admin > div.min-h-screen > header.relative {
    padding-top: env(safe-area-inset-top, 0px);
}

/* Unterer Safe-Area-Abstand für Admin (Home-Indicator) */
.crm-admin main,
.crm-admin > div > main {
    padding-bottom: max(2rem, calc(env(safe-area-inset-bottom, 0px) + 0.5rem));
}

/* Fernwartungs-Dock am unteren Rand: bereits mit env() gebaut – hier nochmal sicherstellen */
#crm-rs-dock-wrap {
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
}

/*
 * iOS-App (WKWebView): Scrollbalken ausblenden — Scrollen bleibt per Wischen möglich.
 */
html:has(body.crm-admin),
html:has(body.portal-page),
body.crm-admin,
body.portal-page {
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: pan-x pan-y;
}
body.crm-admin *,
body.portal-page * {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
html:has(body.crm-admin)::-webkit-scrollbar,
html:has(body.portal-page)::-webkit-scrollbar,
body.crm-admin::-webkit-scrollbar,
body.portal-page::-webkit-scrollbar,
body.crm-admin *::-webkit-scrollbar,
body.portal-page *::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    background: transparent;
}

/*
 * Mobile App (WKWebView): kein horizontales Verschieben der ganzen Seite.
 * Innere Bereiche (z. B. Tagesleiste) dürfen lokal scrollen — mit overscroll-behavior contain.
 */
@media (max-width: 1023px) {
    html:has(body.crm-admin),
    html:has(body.portal-page),
    body.crm-admin,
    body.portal-page {
        overflow-x: clip;
        max-width: 100%;
        overscroll-behavior-x: none;
    }

    body.crm-admin > div.min-h-screen,
    body.crm-admin .crm-admin-main,
    body.crm-admin .crm-admin-page,
    body.portal-page .portal-page-wrap {
        overflow-x: clip;
        max-width: 100%;
        min-width: 0;
    }
}

::selection {
    background-color: rgba(0, 166, 251, 0.25);
}

/*
 * iOS (Safari / WKWebView): Fokus in Eingabefeldern mit font-size < 16px löst automatisches „Reinzoomen“ aus.
 * Mindest 16px auf Touch-Viewports — Login, Kundenportal und Admin mobil bleiben stabil.
 */
@media (max-width: 1023px) {
    textarea,
    select,
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]) {
        font-size: 16px !important;
    }
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--compiaz-blue);
    outline-offset: 2px;
}

/* ── Admin: Profil-Dropdown (Layout, hell) ─ */
#profile-menu.crm-profile-menu {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    background: #fff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}

/* SVG-Grösse: Tailwind-CDN / Preflight kann app.css überschreiben – ID erhöht Spezifität */
#profile-menu.crm-profile-menu svg {
    width: 1rem !important;
    height: 1rem !important;
    max-width: 1rem !important;
    max-height: 1rem !important;
    flex-shrink: 0 !important;
    display: block;
}

.crm-profile-menu__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid #f1f5f9;
    background: #f8fafc;
}

.crm-profile-menu__name {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crm-profile-menu__email {
    margin: 0;
    font-size: 12px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crm-profile-menu__links,
.crm-profile-menu__foot {
    padding: 6px 0;
}

.crm-profile-menu__foot {
    border-top: 1px solid #f1f5f9;
}

.crm-profile-menu__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    font-size: 14px;
    color: #334155;
    text-decoration: none;
    transition: background 0.15s ease;
}

.crm-profile-menu__link:hover {
    background: #f8fafc;
}

.crm-profile-menu__link--danger {
    font-weight: 600;
    color: #dc2626;
}

.crm-profile-menu__link--danger:hover {
    background: #fef2f2;
}

.crm-profile-menu__link-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #94a3b8;
}

.crm-profile-menu__link--danger .crm-profile-menu__link-icon {
    color: inherit;
}

/* ─────────────────────────────────────────
   Kunden-Portal: Shared Dark-UI Komponenten
   ───────────────────────────────────────── */

/* Glassmorphism-Karte (dunkel) */
.portal-card {
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    color: #fff;
    text-decoration: none;
    display: block;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    overflow: hidden;
}
.portal-card-inner { padding: 18px 18px 16px; }

/* Status Badges */
.portal-badge {
    display: inline-flex; align-items: center; gap: 6px;
    border-radius: 9999px; padding: 4px 10px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.01em;
}
.portal-badge-dot {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.portal-badge-open    { background: rgba(59,130,246,0.18); color: #93c5fd; }
.portal-badge-progress{ background: rgba(245,158,11,0.18); color: #fcd34d; }
.portal-badge-resolved{ background: rgba(16,185,129,0.18); color: #6ee7b7; }
.portal-badge-closed  { background: rgba(148,163,184,0.12); color: #94a3b8; }
.portal-badge-void    { background: rgba(239,68,68,0.15); color: #fca5a5; }
.portal-badge-paid    { background: rgba(52,211,153,0.15); color: #6ee7b7; }

.portal-dot-open     { background: #60a5fa; }
.portal-dot-progress { background: #fbbf24; }
.portal-dot-resolved { background: #34d399; }
.portal-dot-closed   { background: #64748b; }
.portal-dot-void     { background: #f87171; }

/* Bestellungen (Hardware) — Status wie Service, eigene Farben */
.portal-badge-order-not_ordered  { background: rgba(139, 92, 246, 0.18); color: #c4b5fd; }
.portal-badge-order-ordered      { background: rgba(59, 130, 246, 0.18); color: #93c5fd; }
.portal-badge-order-arrived      { background: rgba(16, 185, 129, 0.18); color: #6ee7b7; }
.portal-badge-order-pickup_ready { background: rgba(245, 158, 11, 0.20); color: #fcd34d; }
.portal-badge-order-completed    { background: rgba(148, 163, 184, 0.14); color: #cbd5e1; }
.portal-badge-order-cancelled    { background: rgba(239, 68, 68, 0.16); color: #fca5a5; }
.portal-dot-order-not_ordered    { background: #a78bfa; }
.portal-dot-order-ordered        { background: #60a5fa; }
.portal-dot-order-arrived        { background: #34d399; }
.portal-dot-order-pickup_ready   { background: #fbbf24; }
.portal-dot-order-completed      { background: #94a3b8; }
.portal-dot-order-cancelled      { background: #f87171; }

/* Section title */
.portal-section-title {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.14em;
    color: rgba(255,255,255,0.40);
    padding: 0 20px 10px;
}

/* Icon circle in card */
.portal-icon-circle {
    width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}

/* List item arrow */
.portal-arrow {
    flex-shrink: 0; opacity: 0.3;
}

/* ── Bestellungen: Karten (Wallet / iOS-inspiriert, CI-Leuchten) ── */
.portal-order-card {
    --order-accent: #00a6fb;
    --order-accent2: #0582ca;
    --order-glow: rgba(0, 166, 251, 0.42);
    --order-glow-soft: rgba(0, 166, 251, 0.14);
    border-radius: 22px;
    border-color: rgba(255, 255, 255, 0.11);
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.04) 45%, rgba(0, 0, 0, 0.12) 100%);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06) inset,
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 20px 50px rgba(0, 0, 0, 0.35),
        0 0 60px var(--order-glow-soft);
}
.portal-order-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, var(--order-accent), var(--order-accent2));
    box-shadow: 0 0 18px var(--order-glow);
}
.portal-order-card__sheen {
    pointer-events: none;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        125deg,
        rgba(255, 255, 255, 0.14) 0%,
        rgba(255, 255, 255, 0) 42%,
        rgba(255, 255, 255, 0) 58%,
        rgba(0, 166, 251, 0.06) 100%
    );
    opacity: 0.85;
}
.portal-order-card .portal-order-card__inner {
    position: relative;
    z-index: 1;
    padding: 17px 18px 16px 22px;
}
.portal-order-card--not_ordered {
    --order-accent: #a78bfa;
    --order-accent2: #7c3aed;
    --order-glow: rgba(167, 139, 250, 0.5);
    --order-glow-soft: rgba(124, 58, 237, 0.2);
}
.portal-order-card--ordered,
.portal-order-card--open {
    --order-accent: #38bdf8;
    --order-accent2: #0284c7;
    --order-glow: rgba(56, 189, 248, 0.45);
    --order-glow-soft: rgba(2, 132, 199, 0.18);
}
.portal-order-card--arrived,
.portal-order-card--resolved {
    --order-accent: #34d399;
    --order-accent2: #059669;
    --order-glow: rgba(52, 211, 153, 0.45);
    --order-glow-soft: rgba(16, 185, 129, 0.16);
}
.portal-order-card--pickup_ready,
.portal-order-card--in_progress {
    --order-accent: #fbbf24;
    --order-accent2: #f59e0b;
    --order-glow: rgba(251, 191, 36, 0.55);
    --order-glow-soft: rgba(245, 158, 11, 0.22);
}
.portal-order-card--completed,
.portal-order-card--closed {
    --order-accent: #38e0ff;
    --order-accent2: #00a6fb;
    --order-glow: rgba(0, 166, 251, 0.55);
    --order-glow-soft: rgba(0, 166, 251, 0.22);
}
.portal-order-card--cancelled {
    --order-accent: #fb7185;
    --order-accent2: #ef4444;
    --order-glow: rgba(248, 113, 113, 0.45);
    --order-glow-soft: rgba(239, 68, 68, 0.18);
}
.portal-order-card:active {
    /* Kein Drück-Effekt — siehe body.portal-page :active-Regeln */
}

.portal-order-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.portal-order-card__ref {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.38);
    padding: 5px 9px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.portal-order-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 9999px;
    padding: 6px 12px 6px 10px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.25;
    max-width: 100%;
    border: 1px solid transparent;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    box-shadow:
        0 0 22px var(--order-glow),
        0 0 48px var(--order-glow-soft),
        0 1px 0 rgba(255, 255, 255, 0.2) inset;
}
.portal-order-status__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 10px currentColor;
}
.portal-order-status--not_ordered {
    color: #ede9fe;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.45), rgba(91, 33, 182, 0.35));
    border-color: rgba(196, 181, 253, 0.55);
}
.portal-order-status--not_ordered .portal-order-status__dot {
    background: #c4b5fd;
    color: #c4b5fd;
}
.portal-order-status--ordered,
.portal-order-status--open {
    color: #e0f2fe;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.5), rgba(3, 105, 161, 0.35));
    border-color: rgba(125, 211, 252, 0.55);
}
.portal-order-status--ordered .portal-order-status__dot,
.portal-order-status--open .portal-order-status__dot {
    background: #7dd3fc;
    color: #7dd3fc;
}
.portal-order-status--arrived,
.portal-order-status--resolved {
    color: #ecfdf5;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.5), rgba(5, 122, 85, 0.38));
    border-color: rgba(110, 231, 183, 0.55);
}
.portal-order-status--arrived .portal-order-status__dot,
.portal-order-status--resolved .portal-order-status__dot {
    background: #6ee7b7;
    color: #6ee7b7;
}
.portal-order-status--pickup_ready,
.portal-order-status--in_progress {
    color: #fffbeb;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.55), rgba(180, 83, 9, 0.42));
    border-color: rgba(253, 224, 71, 0.65);
}
.portal-order-status--pickup_ready .portal-order-status__dot,
.portal-order-status--in_progress .portal-order-status__dot {
    background: #fde047;
    color: #fde047;
}
.portal-order-status--completed,
.portal-order-status--closed {
    color: #f0f9ff;
    background: linear-gradient(135deg, rgba(0, 166, 251, 0.55), rgba(5, 82, 130, 0.45));
    border-color: rgba(56, 224, 255, 0.55);
}
.portal-order-status--completed .portal-order-status__dot,
.portal-order-status--closed .portal-order-status__dot {
    background: #38e0ff;
    color: #38e0ff;
}
.portal-order-status--cancelled {
    color: #fef2f2;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.55), rgba(127, 29, 29, 0.45));
    border-color: rgba(252, 165, 165, 0.55);
}
.portal-order-status--cancelled .portal-order-status__dot {
    background: #fecaca;
    color: #fecaca;
}

/* Ticket-Titel (gleiche Karten-Hierarchie wie Betrag bei Bestellungen) */
.portal-order-card__title {
    margin: 0 0 8px;
    font-size: 21px;
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1.22;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.portal-order-card__title--muted {
    text-decoration: line-through;
    opacity: 0.55;
}

.portal-order-card__amount {
    margin: 0 0 6px;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: #fff;
}
.portal-order-card__cur {
    margin-left: 4px;
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.42);
    vertical-align: 0.12em;
}
.portal-order-card__meta {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.48);
    line-height: 1.45;
}
.portal-order-card__preview {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.72);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.portal-order-card__footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.portal-order-card__updated {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.34);
}
.portal-order-card__cta {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    color: #00a6fb;
    letter-spacing: 0.01em;
}
.portal-order-card__cta-icon {
    width: 16px;
    height: 16px;
    opacity: 0.95;
}

/* ── Ticket-Detail (Kundenportal, gleiche CI wie Listen-Karten) ── */
.portal-ticket-detail-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #00a6fb;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.portal-ticket-detail-back:hover {
    color: #38bdf8;
}

.portal-ticket-detail-prio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 12px;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid transparent;
}
.portal-ticket-detail-prio--inline {
    margin-top: 0;
}
.portal-ticket-detail-prio--urgent {
    color: #fecaca;
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(248, 113, 113, 0.45);
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.2);
}
.portal-ticket-detail-prio--normal {
    color: #fef9c3;
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(251, 191, 36, 0.42);
    box-shadow: 0 0 14px rgba(251, 191, 36, 0.1);
}

/* Ticket-Detail Hero: luftigeres Layout (Status + Prio eine Zeile, mehr Abstand nach unten) */
.portal-order-card.portal-ticket-hero-card .portal-order-card__inner.portal-ticket-hero {
    padding: 20px 20px 22px 22px;
}
.portal-ticket-hero__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin-bottom: 20px;
}
.portal-ticket-hero .portal-order-card__title {
    margin-top: 0;
    margin-bottom: 14px;
}
.portal-ticket-hero .portal-order-card__meta {
    margin-top: 0;
    margin-bottom: 16px;
    line-height: 1.55;
}
.portal-ticket-detail-chiprow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.portal-ticket-hero .portal-ticket-detail-chiprow {
    margin-top: 0;
    margin-bottom: 20px;
}
.portal-ticket-detail-chip {
    font-size: 11px;
    font-weight: 700;
    color: #7dd3fc;
    background: rgba(0, 166, 251, 0.12);
    border: 1px solid rgba(0, 166, 251, 0.28);
    border-radius: 9999px;
    padding: 4px 11px;
}
.portal-ticket-hero .portal-ticket-detail-chip {
    padding: 6px 13px;
}

.portal-ticket-detail-callout {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
}
.portal-ticket-hero .portal-ticket-detail-callout {
    margin-top: 0;
    padding: 16px 17px;
}
.portal-ticket-detail-callout--problem {
    border-color: rgba(251, 191, 36, 0.35);
    background: linear-gradient(145deg, rgba(245, 158, 11, 0.12), rgba(0, 0, 0, 0.18));
    box-shadow: 0 0 28px rgba(251, 191, 36, 0.08);
}
.portal-ticket-detail-callout__label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fbbf24;
    margin: 0 0 8px;
}
.portal-ticket-detail-callout__body {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
    margin: 0;
    white-space: pre-wrap;
}

.portal-ticket-detail-panel {
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    overflow: hidden;
    margin-bottom: 14px;
}
.portal-ticket-detail-panel__head {
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
}
.portal-ticket-detail-panel__body {
    padding: 4px 0;
}

.portal-ticket-detail-kv {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.portal-ticket-detail-kv:last-child {
    border-bottom: none;
}
.portal-ticket-detail-kv__k {
    flex-shrink: 0;
    width: 38%;
    max-width: 140px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
    line-height: 1.35;
    padding-top: 2px;
}
.portal-ticket-detail-kv__v {
    flex: 1;
    text-align: right;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    line-height: 1.45;
    word-break: break-word;
}
.portal-ticket-detail-kv__v--mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.82);
}

.portal-ticket-onsite-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.portal-ticket-onsite-icon {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.portal-ticket-onsite-title {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 3px;
}
.portal-ticket-onsite-sub {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    margin: 0;
    letter-spacing: -0.02em;
}

.portal-ticket-detail-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 18px 14px;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
}
.portal-ticket-detail-alert--ok {
    background: rgba(52, 211, 153, 0.1);
    border: 1px solid rgba(52, 211, 153, 0.28);
    color: #6ee7b7;
}
.portal-ticket-detail-alert--err {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.28);
    color: #fca5a5;
}

.portal-ticket-detail-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0 18px 18px;
}
@media (max-width: 380px) {
    .portal-ticket-detail-grid2 {
        grid-template-columns: 1fr;
    }
}
.portal-ticket-detail-tile {
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.16);
}
.portal-ticket-detail-tile__label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 6px;
}
.portal-ticket-detail-tile__val {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.35;
}
.portal-ticket-detail-tile__sub {
    font-size: 13px;
    font-weight: 600;
    margin: 4px 0 0;
}

.portal-ticket-defect-card,
.portal-ticket-intake-card {
    margin: 0 18px 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.portal-ticket-defect-card {
    background: rgba(239, 68, 68, 0.07);
    border-color: rgba(248, 113, 113, 0.25);
}
.portal-ticket-intake-card {
    background: rgba(139, 92, 246, 0.08);
    border-color: rgba(167, 139, 250, 0.22);
}

.portal-ticket-msg-card__head {
    padding: 16px 18px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.portal-ticket-msg-card__title {
    font-size: 17px;
    font-weight: 900;
    color: #fff;
    margin: 0 0 4px;
    letter-spacing: -0.02em;
}
.portal-ticket-msg-card__sub {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.38);
    margin: 0;
    line-height: 1.45;
}

.portal-ticket-chat-log {
    min-height: 72px;
    max-height: 420px;
    overflow-y: auto;
    padding: 14px 16px 8px;
    -webkit-overflow-scrolling: touch;
}

.portal-ticket-chat-foot {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding: 14px 16px 16px;
}
.portal-ticket-chat-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.45;
    color: rgba(56, 224, 255, 0.88);
    background: rgba(0, 166, 251, 0.08);
    border: 1px solid rgba(0, 166, 251, 0.2);
}
.portal-ticket-chat-form {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}
.portal-ticket-chat-input {
    flex: 1;
    min-height: 46px;
    resize: none;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    color: #fff;
    padding: 12px 14px;
    font-size: 15px;
    outline: none;
    font-family: inherit;
}
.portal-ticket-chat-input:focus {
    border-color: rgba(0, 166, 251, 0.55);
    background: rgba(255, 255, 255, 0.09);
}
.portal-ticket-chat-send {
    flex-shrink: 0;
    background: linear-gradient(135deg, #0582ca, #00a6fb);
    border: none;
    border-radius: 14px;
    padding: 12px 16px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    -webkit-tap-highlight-color: transparent;
}
.portal-ticket-chat-send:disabled {
    opacity: 0.55;
    cursor: default;
}

.portal-ticket-closed-box {
    margin: 0 18px 18px;
    padding: 18px;
    border-radius: 16px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.18);
}

.portal-ticket-dialog {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: none;
    align-items: center;
    justify-content: center;
    padding: max(16px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.portal-ticket-dialog.is-open {
    display: flex;
}
.portal-ticket-dialog__panel {
    width: 100%;
    max-width: 380px;
    background: linear-gradient(165deg, #0a1f2e 0%, #051923 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 22px;
    padding: 26px 22px 22px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55), 0 0 48px rgba(0, 166, 251, 0.08);
}

/* ─────────────────────────────────────────
   Kunden-Portal: Desktop Layout mit Sidebar
   ───────────────────────────────────────── */

/* ── Rechnungen: Zusammenfassung, Mehrfach-Aktionen (Listen-Karten) ── */
.portal-inv-sum-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}
.portal-inv-sum-tile {
    flex: 1;
    min-width: 88px;
    border-radius: 14px;
    padding: 12px 14px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.06);
}
.portal-inv-sum-tile--amber {
    border-color: rgba(245, 158, 11, 0.28);
    background: rgba(245, 158, 11, 0.12);
}
.portal-inv-sum-tile--muted {
    border-color: rgba(148, 163, 184, 0.15);
    background: rgba(148, 163, 184, 0.08);
}
.portal-inv-sum-tile__val {
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
    margin: 0;
    color: #fff;
}
.portal-inv-sum-tile--amber .portal-inv-sum-tile__val {
    color: #fbbf24;
}
.portal-inv-sum-tile--muted .portal-inv-sum-tile__val {
    color: rgba(255, 255, 255, 0.45);
}
.portal-inv-sum-tile__lbl {
    font-size: 10px;
    font-weight: 600;
    margin: 5px 0 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.38);
}
.portal-inv-sum-tile--amber .portal-inv-sum-tile__lbl {
    color: rgba(251, 191, 36, 0.62);
}
.portal-inv-sum-tile--muted .portal-inv-sum-tile__lbl {
    color: rgba(255, 255, 255, 0.3);
}

.portal-inv-notes {
    margin: 0 0 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.portal-inv-notes__row {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.45;
    margin: 0;
    color: rgba(255, 255, 255, 0.48);
}
.portal-inv-notes__row--paid {
    color: rgba(52, 211, 153, 0.88);
}
.portal-inv-notes__row--void {
    color: rgba(248, 113, 113, 0.88);
}

.portal-inv-actions--flush {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
.portal-inv-pay-methods {
    margin-top: 14px;
}
.portal-inv-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.portal-inv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    padding: 11px 16px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    flex: 1;
    min-width: 132px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    box-sizing: border-box;
}
.portal-inv-btn--auto {
    flex: 0 1 auto;
    min-width: 0;
}
.portal-inv-btn--primary {
    background: linear-gradient(135deg, #0582ca, #00a6fb);
    color: #fff;
}
.portal-inv-btn--success {
    background: linear-gradient(135deg, #059669, #10b981);
    color: #fff;
}
.portal-inv-btn--ghost {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.78);
    font-weight: 600;
}
.portal-inv-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.portal-inv-hint {
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(52, 211, 153, 0.22);
    background: rgba(52, 211, 153, 0.08);
    color: rgba(52, 211, 153, 0.9);
    font-weight: 600;
}
.portal-inv-muted-note {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.38);
    margin: 0;
    text-align: center;
    line-height: 1.45;
}
.portal-inv-warn-inline {
    font-size: 12px;
    line-height: 1.45;
    margin: 0;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(245, 158, 11, 0.28);
    background: rgba(245, 158, 11, 0.1);
    color: rgba(253, 224, 71, 0.95);
    font-weight: 600;
}

.portal-sale-void-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 12px;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.28);
    color: #fca5a5;
}

/* ── Fernwartung: Schritt-Assistent (Kundenportal) ── */
.portal-fw-wrap {
    max-width: 28rem;
    margin: 0 auto;
    padding: 0 1.25rem calc(env(safe-area-inset-bottom, 0px) + 5.5rem);
}
/* Alte Mini-Leiste (Fallback) */
.portal-fw-track {
    display: flex;
    gap: 6px;
    margin-bottom: 1rem;
}
.portal-fw-track__tick {
    flex: 1;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    transition: background 0.25s ease, box-shadow 0.25s ease;
}
.portal-fw-track__tick--on {
    background: linear-gradient(90deg, #0582ca, #00a6fb);
    box-shadow: 0 0 14px rgba(0, 166, 251, 0.42);
}

/* Wizard-Karte: extra Leuchten + kräftigere Kante (klar vom Alt-Layout unterscheidbar) */
.portal-fw-wiz-shell.portal-card.portal-order-card {
    border-radius: 26px;
    border-color: rgba(56, 189, 248, 0.26);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.07) inset,
        0 1px 0 rgba(255, 255, 255, 0.09) inset,
        0 26px 70px rgba(0, 0, 0, 0.45),
        0 0 90px rgba(56, 189, 248, 0.16);
}
.portal-fw-wiz-shell.portal-order-card::before {
    width: 5px;
    box-shadow: 0 0 26px rgba(56, 189, 248, 0.55);
}
.portal-fw-wiz-shell .portal-order-card__inner {
    padding-top: 22px;
    min-width: 0;
    overflow-x: clip;
}
.portal-fw-kicker {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(125, 211, 252, 0.62);
    margin: 0 0 12px;
}
.portal-fw-seg {
    display: grid;
    width: 100%;
    gap: 5px;
    margin: 0 0 8px;
    padding: 7px;
    border-radius: 18px;
    background: rgba(0, 0, 0, 0.38);
    border: 1px solid rgba(255, 255, 255, 0.11);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.portal-fw-seg__cell {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.portal-fw-seg__cell--current .portal-fw-seg__lbl {
    color: rgba(186, 230, 253, 0.95);
}
.portal-fw-seg__num {
    width: 100%;
    max-width: 46px;
    height: 40px;
    margin: 0 auto;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.32);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.18s ease, box-shadow 0.22s ease, border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.portal-fw-seg__num.is-done {
    color: #7dd3fc;
    background: rgba(14, 165, 233, 0.14);
    border-color: rgba(56, 189, 248, 0.38);
}
.portal-fw-seg__num.is-on {
    color: #fff;
    background: linear-gradient(145deg, #0582ca, #00a6fb);
    border-color: rgba(56, 224, 255, 0.55);
    box-shadow:
        0 0 28px rgba(0, 166, 251, 0.48),
        0 0 64px rgba(0, 166, 251, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transform: scale(1.05);
}
.portal-fw-seg__lbl {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
    line-height: 1.15;
    text-align: center;
    max-width: 100%;
    padding: 0 1px;
    word-break: break-word;
}
.portal-fw-step-caption {
    margin: 0 0 22px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.48);
    text-align: center;
}

.portal-fw-step {
    display: none;
    animation: portalFwFade 0.38s ease;
}
.portal-fw-step.portal-fw-step--active {
    display: block;
}
@keyframes portalFwFade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.portal-fw-h1 {
    margin: 0 0 12px;
    font-size: clamp(1.35rem, 4.6vw, 1.55rem);
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 1.18;
    color: #fff;
}
.portal-fw-lead {
    margin: 0 0 1.1rem;
    font-size: 0.95rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.76);
}
.portal-fw-lead strong {
    color: #e0f2fe;
    font-weight: 700;
}
.portal-fw-choice {
    display: block;
    width: 100%;
    text-align: left;
    cursor: pointer;
    border-radius: 1.05rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    padding: 1rem 1.1rem;
    margin-bottom: 0.65rem;
    color: #fff;
    font-size: 0.92rem;
    line-height: 1.45;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}
.portal-fw-choice.portal-fw-choice--selected {
    border-color: rgba(0, 166, 251, 0.55);
    background: rgba(0, 166, 251, 0.12);
    box-shadow:
        0 0 0 1px rgba(0, 166, 251, 0.12) inset,
        0 0 28px rgba(0, 166, 251, 0.12);
}
.portal-fw-choice strong {
    display: block;
    font-size: 0.98rem;
    margin-bottom: 0.25rem;
    color: #e0f2fe;
}
.portal-fw-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 0.35rem;
}
.portal-fw-input {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border-radius: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(0, 0, 0, 0.28);
    color: #fff;
    font-size: 0.95rem;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    outline: none;
    font-family: inherit;
}
/* Native date/time controls haben teils eine Mindestbreite — sonst Overflow im mobilen Portal */
input.portal-fw-input[type="date"],
input.portal-fw-input[type="time"] {
    min-width: 0;
    max-width: 100%;
    display: block;
}
.portal-fw-input:focus {
    border-color: rgba(0, 166, 251, 0.65);
    box-shadow: 0 0 0 3px rgba(0, 166, 251, 0.15);
}
.portal-fw-hint {
    font-size: 0.78rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.48);
    margin: -0.35rem 0 1rem;
}
.portal-fw-actions {
    display: flex;
    gap: 0.65rem;
    margin-top: 1.35rem;
}
.portal-fw-err {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.35);
    color: #fecaca;
    border-radius: 0.85rem;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    margin-bottom: 1rem;
    line-height: 1.45;
}
.portal-fw-site {
    font-weight: 800;
    color: #7dd3fc;
}

/* Live-Seite: Timer-Karte im Portal-CI */
.portal-fw-live-hero {
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.04) 50%, rgba(0, 0, 0, 0.14) 100%);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06) inset,
        0 20px 50px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    margin-bottom: 14px;
}
.portal-fw-live-hero__timer {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: clamp(2.25rem, 9vw, 3rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    color: #fff;
    line-height: 1.1;
}
.portal-fw-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 9999px;
    padding: 7px 14px 7px 12px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(0, 0, 0, 0.2);
    color: rgba(255, 255, 255, 0.75);
}
.portal-fw-live-badge--on {
    border-color: rgba(248, 113, 113, 0.45);
    background: rgba(239, 68, 68, 0.14);
    color: #fecaca;
    box-shadow: 0 0 28px rgba(239, 68, 68, 0.18);
}
.portal-fw-live-badge__dot {
    position: relative;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ef4444;
    flex-shrink: 0;
}
.portal-fw-live-badge--on .portal-fw-live-badge__dot::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: rgba(248, 113, 113, 0.45);
    animation: portalFwLivePing 1.4s ease-out infinite;
}
@keyframes portalFwLivePing {
    0% {
        transform: scale(0.65);
        opacity: 0.9;
    }
    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

/*
 * Kundenportal / iOS WKWebView: schnelle, zuverlässige Touches (kein 300ms-Delay).
 */
body.portal-page a,
body.portal-page button,
body.portal-page [role="button"],
body.portal-page .cp-tile,
body.portal-page label[for] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
body.portal-page nav[aria-label="Hauptnavigation"] a {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

/* Mobile Bottom-Navigation: schwebende Pill + farbige Linien-Icons */
.portal-nav-bar-wrap {
    padding-top: 1.25rem;
    padding-bottom: max(0.55rem, calc(0.35rem + env(safe-area-inset-bottom, 0px)));
    max-width: 24rem;
    margin-left: auto;
    margin-right: auto;
}
.portal-nav-bar {
    margin: 0 auto;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(12, 24, 40, 0.5);
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.42),
        0 2px 8px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
}
.portal-nav-bar-btn {
    position: relative;
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 2.5rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.18s ease, opacity 0.18s ease;
    --nav-icon-color: rgba(255, 255, 255, 0.42);
    --nav-icon-glow: transparent;
}
.portal-nav-bar-btn--home { --nav-icon-color: #38bdf8; --nav-icon-glow: rgba(56, 189, 248, 0.55); }
.portal-nav-bar-btn--service { --nav-icon-color: #34d399; --nav-icon-glow: rgba(52, 211, 153, 0.55); }
.portal-nav-bar-btn--membership { --nav-icon-color: #fb7185; --nav-icon-glow: rgba(251, 113, 133, 0.55); }
.portal-nav-bar-btn--shop { --nav-icon-color: #c084fc; --nav-icon-glow: rgba(192, 132, 252, 0.55); }
.portal-nav-bar-btn--link {
    text-decoration: none;
    color: inherit;
}
.portal-nav-bar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    color: var(--nav-icon-color);
    transition: color 0.22s ease, filter 0.22s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.portal-nav-bar-icon svg {
    display: block;
    width: 1.625rem;
    height: 1.625rem;
}
.portal-nav-bar-btn:not(.is-active) .portal-nav-bar-icon {
    color: rgba(255, 255, 255, 0.38);
    filter: none;
}
.portal-nav-bar-btn.is-active .portal-nav-bar-icon {
    color: var(--nav-icon-color);
    filter:
        drop-shadow(0 0 3px var(--nav-icon-glow))
        drop-shadow(0 0 10px var(--nav-icon-glow))
        drop-shadow(0 0 18px var(--nav-icon-glow));
    transform: scale(1.06);
}
.portal-nav-bar-badge {
    position: absolute;
    top: -0.45rem;
    right: -0.15rem;
    z-index: 2;
    min-width: 0.95rem;
    height: 0.95rem;
    padding: 0 0.22rem;
    border-radius: 999px;
    background: #fbbf24;
    color: #1c1400;
    font-size: 0.55rem;
    font-weight: 800;
    line-height: 0.95rem;
    text-align: center;
    box-shadow: 0 0 0 2px rgba(12, 24, 40, 0.95);
}
.portal-nav-profile-btn {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 2.5rem;
    padding: 0;
    border: 0;
    background: transparent;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.portal-nav-profile-btn.is-active .portal-nav-profile-photo,
.portal-nav-profile-btn.is-active .portal-nav-profile-initial {
    border-color: rgba(56, 189, 248, 0.85);
    box-shadow:
        0 0 0 1px rgba(56, 189, 248, 0.35),
        0 0 12px rgba(56, 189, 248, 0.45);
}
.portal-nav-profile-photo,
.portal-nav-profile-initial {
    display: block;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    box-sizing: border-box;
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
}
.portal-nav-profile-photo {
    object-fit: cover;
}
.portal-nav-profile-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0ea5e9 0%, #1d4ed8 100%);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}

.portal-nav-sheet {
    position: fixed;
    inset: 0;
    z-index: 220;
    pointer-events: none;
}
.portal-nav-sheet[aria-hidden="true"] {
    pointer-events: none !important;
}
.portal-nav-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 12, 20, 0.62);
    opacity: 0;
    transition: opacity 0.32s ease;
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
}
.portal-nav-sheet-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: min(82vh, 36rem);
    display: flex;
    flex-direction: column;
    overflow: visible;
    border-radius: 1.85rem 1.85rem 0 0;
    background: linear-gradient(180deg, #132436 0%, #0a1520 55%, #071018 100%);
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-bottom: 0;
    box-shadow: 0 -24px 64px rgba(0, 0, 0, 0.52);
    transform: translateY(105%);
    transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
    padding-top: 2.35rem;
    padding-bottom: max(1.15rem, env(safe-area-inset-bottom, 0px));
}
.portal-nav-sheet.is-open {
    pointer-events: auto;
}
.portal-nav-sheet.is-open .portal-nav-sheet-backdrop {
    opacity: 1;
}
.portal-nav-sheet.is-open .portal-nav-sheet-panel {
    transform: translateY(0);
}
html.portal-nav-sheet-open,
body.portal-nav-sheet-open {
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: none;
}
body.portal-nav-sheet-open {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
}
.portal-nav-sheet-grab-wrap {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    padding: 0.5rem 0 0.15rem;
}
.portal-nav-sheet-grab {
    width: 2.75rem;
    height: 0.3rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
}
.portal-nav-sheet-hero {
    position: absolute;
    top: -1.85rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    pointer-events: none;
}
.portal-nav-sheet-hero-ring {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.35rem;
    height: 4.35rem;
    border-radius: 999px;
    background: linear-gradient(145deg, #1a3048 0%, #0c1828 100%);
    border: 2px solid rgba(255, 255, 255, 0.14);
    box-shadow:
        0 10px 36px rgba(0, 0, 0, 0.45),
        0 0 28px var(--nav-icon-glow, rgba(56, 189, 248, 0.35));
}
.portal-nav-sheet-hero-ring .portal-nav-bar-icon {
    color: var(--nav-icon-color);
    filter:
        drop-shadow(0 0 4px var(--nav-icon-glow))
        drop-shadow(0 0 12px var(--nav-icon-glow))
        drop-shadow(0 0 22px var(--nav-icon-glow));
    transform: scale(1.08);
}
.portal-nav-sheet-hero-ring .portal-nav-bar-icon svg {
    width: 1.9rem;
    height: 1.9rem;
}
.portal-nav-sheet-head {
    flex-shrink: 0;
    padding: 0.65rem 1.5rem 1.15rem;
    text-align: center;
}
.portal-nav-sheet-kicker {
    margin: 0;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
}
.portal-nav-sheet-title {
    margin: 0.35rem 0 0;
    font-size: 1.42rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: #fff;
    line-height: 1.2;
}
.portal-nav-sheet-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding: 0 1rem 0.65rem;
}
.portal-nav-sheet-row {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 0.95rem;
    margin-bottom: 0.5rem;
    border-radius: 1.05rem;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-decoration: none;
    color: #fff;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.portal-nav-sheet-row-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: var(--nav-icon-color);
}
.portal-nav-sheet-row-icon-svg {
    width: 1.45rem !important;
    height: 1.45rem !important;
    color: var(--nav-icon-color) !important;
    stroke: currentColor !important;
}
.portal-nav-sheet-row-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.portal-nav-sheet-row-label {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.portal-nav-sheet-row-hint {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.52);
    line-height: 1.3;
}
.portal-nav-sheet-row-badge {
    flex-shrink: 0;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: #fbbf24;
    color: #1c1400;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.35rem;
    text-align: center;
}
.portal-nav-sheet-row-chevron {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.35);
}

/* Push-Glocke auf Home (scrollt mit Begrüßung, oben rechts) */
.portal-push-bell-slot {
    position: absolute;
    top: 0.75rem;
    right: max(1rem, env(safe-area-inset-right, 0px) + 0.75rem);
    left: auto;
    z-index: 10;
    line-height: 0;
}
@media (min-width: 900px) {
    .portal-push-bell-slot {
        display: none;
    }
}
.portal-push-bell-btn {
    pointer-events: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--nav-icon-color, #fbbf24);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.portal-push-bell-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.45rem;
    height: 1.45rem;
    color: var(--nav-icon-color, #fbbf24);
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.45));
}
.portal-push-bell-icon svg {
    width: 100%;
    height: 100%;
}
.portal-push-bell-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.28rem;
    border-radius: 999px;
    background: #f59e0b;
    color: #1c1400;
    font-size: 0.625rem;
    font-weight: 800;
    line-height: 1.125rem;
    text-align: center;
    box-shadow: 0 0 0 2px #051923;
}
.portal-push-bell-badge--hidden {
    display: none;
}
.portal-push-inbox-hero-ring {
    --nav-icon-color: #fbbf24;
    --nav-icon-glow: rgba(251, 191, 36, 0.5);
}
.portal-push-inbox-row {
    width: 100%;
    text-align: left;
    border: none;
    font: inherit;
    cursor: pointer;
}
.portal-push-inbox-empty {
    padding: 1.25rem 1.35rem 1.75rem;
    text-align: center;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.45);
}

/* Sofort-Feedback beim Seitenwechsel (Portal) */
.portal-nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.portal-nav-overlay.is-active {
    opacity: 1;
}
.portal-nav-overlay-bar-wrap {
    position: absolute;
    top: env(safe-area-inset-top, 0px);
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}
.portal-nav-overlay-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #00a6fb, #38bdf8);
    box-shadow: 0 0 12px rgba(0, 166, 251, 0.55);
    transition: width 0.35s ease;
}

body.portal-page .cp-tile:active {
    opacity: 1;
    transform: none;
}

/* App: keine Klick-/Drück-Animation (Kacheln, Links, Buttons) */
body.portal-page a,
body.portal-page button,
body.portal-page [role="button"],
body.portal-page .cp-tile,
body.portal-page .cp-stat,
body.portal-page .slide-glass--tap,
body.portal-page .cp-news-card,
body.portal-page .portal-card,
body.portal-page .portal-order-card,
body.portal-page .portal-fw-choice,
body.portal-page .portal-nav-sheet-row,
body.portal-page .portal-push-bell-btn,
body.portal-page .portal-nav-profile-btn,
body.portal-page .k-acc-btn,
body.portal-page .svc-kind-tile,
body.portal-page .svc-opt__face {
    transition: none !important;
    -webkit-tap-highlight-color: transparent !important;
}
body.portal-page a:active,
body.portal-page button:active,
body.portal-page [role="button"]:active,
body.portal-page .cp-tile:active,
body.portal-page .cp-stat:active,
body.portal-page .slide-glass--tap:active,
body.portal-page .cp-news-card:active,
body.portal-page .portal-card:active,
body.portal-page .portal-order-card:active,
body.portal-page .portal-fw-choice:active,
body.portal-page .portal-nav-sheet-row:active,
body.portal-page .portal-push-bell-btn:active,
body.portal-page .portal-nav-profile-btn:active,
body.portal-page nav[aria-label="Hauptnavigation"] a:active,
body.portal-page nav[aria-label="Hauptnavigation"] .portal-nav-bar-btn:active,
body.portal-page .portal-news-fav-btn:active,
body.portal-page .k-acc-btn:active,
body.portal-page .svc-kind-tile:active,
body.portal-page .svc-opt:active .svc-opt__face,
body.portal-page .svc-opt__face:active {
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
}

/* Desktop: Body erhält Links-Padding für Sidebar */
@media (min-width: 900px) {
  body.portal-page { padding-left: 260px; }
  /* Sidebar wird eingeblendet */
  .portal-desktop-sidebar { display: flex !important; }
  /* Kein alter Desktop-Pill-Nav mehr */
  .portal-nav-desktop-pill { display: none !important; }
  /* Content-Wrapper wird auf Desktop breiter und linksausgerichtet */
  .portal-page-wrap {
    max-width: 860px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100%;
  }
  /* Sidebar-Nav-Links: Hover */
  .portal-sb-link:hover {
    background: rgba(255,255,255,0.07) !important;
    color: rgba(255,255,255,0.85) !important;
  }
  /* Mobile Logo-Header auf Desktop ausblenden (Sidebar hat Logo) */
  body.portal-page .portal-mobile-hdr { display: none !important; }
  /* Mobiler Spacer für Bottom-Nav auf Desktop nicht nötig */
  body.portal-page .portal-mobile-spacer { display: none !important; }
}

/* Geschlossene globale Overlays dürfen niemals Klicks abfangen */
#crm-dialog[aria-hidden="true"],
#crm-copy-sheet[aria-hidden="true"],
#portal-nav-sheet[aria-hidden="true"],
#portal-news-sheet[aria-hidden="true"],
#portal-push-inbox-sheet[aria-hidden="true"] {
    pointer-events: none !important;
}

.time-sheet-backdrop.hidden,
.time-settings-sheet.hidden {
    display: none !important;
    pointer-events: none !important;
}
#crm-dash-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

#crm-dash-grid .crm-dash-grid-slot {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
    align-self: stretch;
    overflow: hidden;
    position: relative;
    outline: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
}

#crm-dash-grid .crm-dash-grid-slot.crm-dash-chosen,
#crm-dash-grid .crm-dash-grid-slot.crm-dash-drag,
#crm-dash-grid .crm-dash-grid-slot.crm-dash-ghost {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

#crm-dash-grid .crm-dash-grid-slot:focus-visible {
    outline: 2px solid rgba(0, 166, 251, 0.55);
    outline-offset: 3px;
}

#crm-dash-grid .crm-dash-grid-slot > .crm-dash-widget {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

#crm-dash-grid .crm-dash-widget-toolbar {
    position: relative;
    z-index: 2;
}

#crm-dash-grid .crm-dash-tile-link {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
    touch-action: manipulation;
}

#crm-dash-grid .crm-dash-tile-body {
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
}

#crm-dash-search-grid .crm-dash-tile-link,
.admin-dash-tile.crm-dash-tile-link {
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
    touch-action: manipulation;
}

.crm-dash-drag-handle {
    touch-action: none;
}

.crm-dash-ghost {
    opacity: 0.48 !important;
}

.crm-dash-chosen {
    z-index: 5;
}

.crm-dash-chosen .crm-dash-drag-handle {
    cursor: grabbing;
}

.crm-dash-drag {
    opacity: 0.92;
}

#crm-dash-grid .crm-dash-widget--hidden {
    display: none !important;
}

#crm-dash-grid .crm-dash-grid-slot.crm-dash-widget--hidden {
    display: none !important;
}

/* Untertitel in kompakten Modul-Kacheln (falls Tailwind line-clamp fehlt) */
#crm-dash-grid .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   Admin CRM — Dark Chrome (Portal-Ästhetik, Compiaz CI)
   Nur Darstellung; Logik unverändert. Web: luftiger (lg:), Mobile: kompakt.
   ═══════════════════════════════════════════════════════════════ */
body.crm-admin--dark {
    color-scheme: dark;
}

body.crm-admin--dark .crm-admin-logo {
    filter: brightness(1.06) contrast(1.04);
}

#profile-menu.crm-profile-menu.crm-profile-menu--dark {
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: rgba(15, 23, 42, 0.98) !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55) !important;
}

#profile-menu.crm-profile-menu--dark .crm-profile-menu__head {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
    background: rgba(2, 6, 23, 0.55) !important;
}

#profile-menu.crm-profile-menu--dark .crm-profile-menu__foot {
    border-top-color: rgba(255, 255, 255, 0.1) !important;
}

.crm-profile-menu--dark .crm-profile-menu__name {
    color: #f8fafc !important;
}
.crm-profile-menu--dark .crm-profile-menu__email {
    color: #94a3b8 !important;
}
.crm-profile-menu--dark .crm-profile-menu__link {
    color: #e2e8f0 !important;
}
.crm-profile-menu--dark .crm-profile-menu__link:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}
.crm-profile-menu--dark .crm-profile-menu__link svg {
    color: #94a3b8 !important;
}

/* Unterseiten & Dashboard-Inhalt: typische helle Tailwind-Klassen weich abdunkeln */
body.crm-admin--dark .crm-admin-main .text-slate-900,
body.crm-admin--dark .crm-admin-main .text-slate-950 {
    color: #f8fafc !important;
}
body.crm-admin--dark .crm-admin-main .text-slate-800 {
    color: #f1f5f9 !important;
}
body.crm-admin--dark .crm-admin-main .text-slate-700 {
    color: #e2e8f0 !important;
}
body.crm-admin--dark .crm-admin-main .text-slate-600 {
    color: #cbd5e1 !important;
}
body.crm-admin--dark .crm-admin-main .text-slate-500 {
    color: #94a3b8 !important;
}
body.crm-admin--dark .crm-admin-main .text-slate-400 {
    color: #94a3b8 !important;
}

body.crm-admin--dark .crm-admin-main .bg-white,
body.crm-admin--dark .crm-admin-main [class*='bg-white/'] {
    background-color: rgba(15, 23, 42, 0.82) !important;
}

body.crm-admin--dark .crm-admin-main .bg-slate-50,
body.crm-admin--dark .crm-admin-main .bg-slate-100 {
    background-color: rgba(30, 41, 59, 0.55) !important;
}

body.crm-admin--dark .crm-admin-main .border-slate-100,
body.crm-admin--dark .crm-admin-main .border-slate-200,
body.crm-admin--dark .crm-admin-main .border-slate-200\/90,
body.crm-admin--dark .crm-admin-main .border-slate-300 {
    border-color: rgba(148, 163, 184, 0.22) !important;
}

body.crm-admin--dark .crm-admin-main .ring-slate-100,
body.crm-admin--dark .crm-admin-main .ring-slate-200 {
    --tw-ring-color: rgba(148, 163, 184, 0.18) !important;
}

body.crm-admin--dark .crm-admin-main .shadow-sm,
body.crm-admin--dark .crm-admin-main .shadow-md,
body.crm-admin--dark .crm-admin-main .shadow-lg,
body.crm-admin--dark .crm-admin-main .shadow-xl {
    --tw-shadow: 0 8px 30px -10px rgba(0, 0, 0, 0.45) !important;
}

body.crm-admin--dark .crm-admin-main .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgba(148, 163, 184, 0.15) !important;
}

/* Formularfelder im Admin-Hauptbereich */
body.crm-admin--dark .crm-admin-main input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not([type='hidden']):not([type='button']):not([type='submit']):not([type='reset']):not([type='image']),
body.crm-admin--dark .crm-admin-main select,
body.crm-admin--dark .crm-admin-main textarea {
    border-color: rgba(148, 163, 184, 0.25) !important;
    background-color: rgba(15, 23, 42, 0.65) !important;
    color: #f1f5f9 !important;
}

body.crm-admin--dark .crm-admin-main input::placeholder,
body.crm-admin--dark .crm-admin-main textarea::placeholder {
    color: #64748b !important;
}

body.crm-admin--dark .crm-admin-main input:focus,
body.crm-admin--dark .crm-admin-main select:focus,
body.crm-admin--dark .crm-admin-main textarea:focus {
    background-color: rgba(15, 23, 42, 0.9) !important;
}

body.crm-admin--dark .crm-admin-main .focus\:bg-white:focus {
    background-color: rgba(15, 23, 42, 0.92) !important;
}

body.crm-admin--dark .crm-admin-main .text-compiaz-navy {
    color: #bae6fd !important;
}

/* Tabellenkopf o.ä. */
body.crm-admin--dark .crm-admin-main thead {
    background-color: rgba(15, 23, 42, 0.9) !important;
}

/* Großbildschirm: Seitentitel etwas „editorial“ (Abstand kommt aus Tailwind lg:) */
@media (min-width: 1024px) {
    body.crm-admin--dark .crm-admin-main .crm-admin-page-title {
        letter-spacing: -0.02em;
    }
}

/* Unterseiten-Inhalt: einheitlicher vertikaler Rhythmus, Web etwas luftiger */
body.crm-admin--dark .crm-admin-page {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
@media (min-width: 1024px) {
    body.crm-admin--dark .crm-admin-page {
        gap: 1.75rem;
    }
}

/* ── Globale Overlays (liegen ausserhalb .crm-admin-main, nutzen body-Klasse) ─ */
body.crm-admin--dark #crm-copy-sheet-box,
body.crm-admin--dark #crm-dialog-box {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: linear-gradient(165deg, rgba(30, 41, 59, 0.98) 0%, rgba(15, 23, 42, 0.99) 100%) !important;
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.55) !important;
}

body.crm-admin--dark #crm-copy-sheet-box .bg-slate-200,
body.crm-admin--dark #crm-dialog-box .bg-slate-200 {
    background-color: rgba(148, 163, 184, 0.35) !important;
}

body.crm-admin--dark #crm-copy-sheet-box h3,
body.crm-admin--dark #crm-dialog-box #crm-dialog-title {
    color: #f8fafc !important;
}

body.crm-admin--dark #crm-copy-sheet-box p,
body.crm-admin--dark #crm-dialog-box #crm-dialog-msg {
    color: #94a3b8 !important;
}

body.crm-admin--dark #crm-copy-sheet-input {
    border-color: rgba(148, 163, 184, 0.28) !important;
    background-color: rgba(15, 23, 42, 0.75) !important;
    color: #e2e8f0 !important;
}

body.crm-admin--dark #crm-copy-sheet-close,
body.crm-admin--dark #crm-dialog-cancel {
    border-color: rgba(148, 163, 184, 0.25) !important;
    color: #cbd5e1 !important;
}

body.crm-admin--dark #crm-copy-sheet-close:hover,
body.crm-admin--dark #crm-dialog-cancel:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

body.crm-admin--dark #crm-dialog-box .border-t.border-slate-100,
body.crm-admin--dark #crm-dialog-box .border-b.border-slate-100 {
    border-color: rgba(148, 163, 184, 0.18) !important;
}

body.crm-admin--dark #crm-dialog-ok:hover,
body.crm-admin--dark #crm-dialog-cancel:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

body.crm-admin--dark #crm-dialog-ok.text-sky-600 {
    color: #38bdf8 !important;
}

body.crm-admin--dark #crm-dialog-ok.text-red-500 {
    color: #f87171 !important;
}

/* Links & Primärfarben im Admin-Dunkel */
body.crm-admin--dark .crm-admin-main a.text-sky-600,
body.crm-admin--dark .crm-admin-main .text-sky-600:not([class*='bg-sky']) {
    color: #38bdf8 !important;
}
body.crm-admin--dark .crm-admin-main a.text-sky-700 {
    color: #7dd3fc !important;
}
body.crm-admin--dark .crm-admin-main .text-sky-800,
body.crm-admin--dark .crm-admin-main .text-sky-900 {
    color: #bae6fd !important;
}

body.crm-admin--dark .crm-admin-main .text-blue-800,
body.crm-admin--dark .crm-admin-main .text-blue-900 {
    color: #93c5fd !important;
}
body.crm-admin--dark .crm-admin-main .text-blue-700 {
    color: #93c5fd !important;
}

body.crm-admin--dark .crm-admin-main .text-indigo-800,
body.crm-admin--dark .crm-admin-main .text-indigo-900 {
    color: #a5b4fc !important;
}

body.crm-admin--dark .crm-admin-main .text-emerald-800,
body.crm-admin--dark .crm-admin-main .text-emerald-900,
body.crm-admin--dark .crm-admin-main .text-emerald-950 {
    color: #a7f3d0 !important;
}

body.crm-admin--dark .crm-admin-main .text-amber-800,
body.crm-admin--dark .crm-admin-main .text-amber-900,
body.crm-admin--dark .crm-admin-main .text-amber-950 {
    color: #fde68a !important;
}

body.crm-admin--dark .crm-admin-main .text-rose-800,
body.crm-admin--dark .crm-admin-main .text-rose-900,
body.crm-admin--dark .crm-admin-main .text-rose-950 {
    color: #fecdd3 !important;
}

body.crm-admin--dark .crm-admin-main .text-red-800 {
    color: #fecaca !important;
}

/* Status-Hintergründe (Karten/Alerts) — dunkler, Farbe lesbar */
body.crm-admin--dark .crm-admin-main .bg-emerald-50,
body.crm-admin--dark .crm-admin-main .bg-emerald-50\/90 {
    background-color: rgba(6, 78, 59, 0.42) !important;
}
body.crm-admin--dark .crm-admin-main .border-emerald-100,
body.crm-admin--dark .crm-admin-main .border-emerald-200,
body.crm-admin--dark .crm-admin-main .border-emerald-300 {
    border-color: rgba(52, 211, 153, 0.35) !important;
}

body.crm-admin--dark .crm-admin-main .bg-amber-50,
body.crm-admin--dark .crm-admin-main .bg-amber-50\/90 {
    background-color: rgba(120, 53, 15, 0.38) !important;
}
body.crm-admin--dark .crm-admin-main .border-amber-200,
body.crm-admin--dark .crm-admin-main .border-amber-300,
body.crm-admin--dark .crm-admin-main .border-amber-400 {
    border-color: rgba(251, 191, 36, 0.4) !important;
}

body.crm-admin--dark .crm-admin-main .bg-rose-50 {
    background-color: rgba(136, 19, 55, 0.38) !important;
}
body.crm-admin--dark .crm-admin-main .border-rose-200,
body.crm-admin--dark .crm-admin-main .border-rose-400 {
    border-color: rgba(251, 113, 133, 0.45) !important;
}

body.crm-admin--dark .crm-admin-main .bg-red-50 {
    background-color: rgba(127, 29, 29, 0.38) !important;
}
body.crm-admin--dark .crm-admin-main .border-red-200 {
    border-color: rgba(248, 113, 113, 0.4) !important;
}

body.crm-admin--dark .crm-admin-main .bg-sky-50,
body.crm-admin--dark .crm-admin-main .from-sky-50 {
    background-color: rgba(12, 74, 110, 0.35) !important;
}

body.crm-admin--dark .crm-admin-main .border-sky-100,
body.crm-admin--dark .crm-admin-main .border-sky-200 {
    border-color: rgba(56, 189, 248, 0.35) !important;
}

body.crm-admin--dark .crm-admin-main .bg-blue-50,
body.crm-admin--dark .crm-admin-main .bg-blue-100 {
    background-color: rgba(30, 58, 138, 0.35) !important;
}
body.crm-admin--dark .crm-admin-main .border-blue-200 {
    border-color: rgba(96, 165, 250, 0.35) !important;
}

body.crm-admin--dark .crm-admin-main .bg-indigo-50 {
    background-color: rgba(49, 46, 129, 0.38) !important;
}
body.crm-admin--dark .crm-admin-main .border-indigo-100,
body.crm-admin--dark .crm-admin-main .border-indigo-300 {
    border-color: rgba(129, 140, 248, 0.4) !important;
}

body.crm-admin--dark .crm-admin-main .bg-violet-50,
body.crm-admin--dark .crm-admin-main .bg-violet-100\/90 {
    background-color: rgba(76, 29, 149, 0.32) !important;
}
body.crm-admin--dark .crm-admin-main .border-violet-100 {
    border-color: rgba(167, 139, 250, 0.35) !important;
}

body.crm-admin--dark .crm-admin-main .bg-teal-50\/40,
body.crm-admin--dark .crm-admin-main .hover\:bg-teal-50\/40:hover {
    background-color: rgba(17, 94, 89, 0.35) !important;
}
body.crm-admin--dark .crm-admin-main .border-teal-200,
body.crm-admin--dark .crm-admin-main .border-teal-400 {
    border-color: rgba(45, 212, 191, 0.4) !important;
}

body.crm-admin--dark .crm-admin-main .bg-orange-50 {
    background-color: rgba(124, 45, 18, 0.35) !important;
}

body.crm-admin--dark .crm-admin-main .from-amber-50 {
    --tw-gradient-from: rgba(120, 53, 15, 0.45) !important;
}

body.crm-admin--dark .crm-admin-main .to-orange-50 {
    --tw-gradient-to: rgba(124, 45, 18, 0.35) !important;
}

body.crm-admin--dark .crm-admin-main .shadow-amber-100\/50,
body.crm-admin--dark .crm-admin-main .shadow-amber-200\/40 {
    --tw-shadow-color: rgba(251, 191, 36, 0.12) !important;
}

body.crm-admin--dark .crm-admin-main .ring-amber-300\/60,
body.crm-admin--dark .crm-admin-main .ring-amber-400 {
    --tw-ring-color: rgba(251, 191, 36, 0.35) !important;
}

body.crm-admin--dark .crm-admin-main .hover\:bg-slate-50:hover,
body.crm-admin--dark .crm-admin-main .hover\:bg-slate-100:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

body.crm-admin--dark .crm-admin-main .hover\:bg-sky-50:hover {
    background-color: rgba(14, 165, 233, 0.12) !important;
}

body.crm-admin--dark .crm-admin-main .hover\:bg-emerald-50:hover {
    background-color: rgba(16, 185, 129, 0.14) !important;
}

body.crm-admin--dark .crm-admin-main .hover\:bg-indigo-50:hover {
    background-color: rgba(99, 102, 241, 0.14) !important;
}

body.crm-admin--dark .crm-admin-main .active\:bg-slate-100:active {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

body.crm-admin--dark .crm-admin-main .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
body.crm-admin--dark .crm-admin-main .divide-y.divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgba(148, 163, 184, 0.12) !important;
}

/* Tabellenzeilen */
body.crm-admin--dark .crm-admin-main tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.02);
}

body.crm-admin--dark .crm-admin-main tbody tr:hover {
    background-color: rgba(0, 166, 251, 0.06) !important;
}

/* Schatten heller Karten → dezenter auf Dunkel */
body.crm-admin--dark .crm-admin-main .shadow-slate-200\/40,
body.crm-admin--dark .crm-admin-main .shadow-slate-300\/20,
body.crm-admin--dark .crm-admin-main .shadow-slate-900\/15 {
    --tw-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.5) !important;
}

body.crm-admin--dark .crm-admin-main .ring-slate-100 {
    --tw-ring-color: rgba(148, 163, 184, 0.12) !important;
}

/* Karten-Umriss etwas sichtbarer */
body.crm-admin--dark .crm-admin-main .rounded-3xl.border.border-slate-200\/90 {
    border-color: rgba(148, 163, 184, 0.22) !important;
}

/* Dashboard: Kalender-Panel */
body.crm-admin--dark .crm-admin-main .crm-dash-panel,
body.crm-admin--dark .crm-admin-main .crm-dash-calendar__body {
    background-color: rgba(15, 23, 42, 0.75) !important;
    color: #e2e8f0 !important;
}

body.crm-admin--dark .crm-admin-main .crm-dash-calendar__head {
    border-color: rgba(148, 163, 184, 0.15) !important;
    background: linear-gradient(135deg, rgba(0, 53, 84, 0.35) 0%, rgba(15, 23, 42, 0.5) 100%) !important;
}

body.crm-admin--dark .crm-admin-main .crm-dash-calendar__head h2 {
    color: #f1f5f9 !important;
}

body.crm-admin--dark .crm-admin-main .crm-dash-calendar__hint {
    color: #94a3b8 !important;
}

body.crm-admin--dark .crm-admin-main [data-widget-id="panel-calendar"] {
    border-color: rgba(148, 163, 184, 0.22) !important;
    background: rgba(15, 23, 42, 0.55) !important;
}

body.crm-admin--dark .crm-admin-main .crm-cal-frame {
    border-color: rgba(148, 163, 184, 0.2) !important;
    background: #0b1220 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/*
 * Google Calendar Embed: kein offizieller Dark-Mode-Parameter.
 * CSS-Filter invertiert die helle Google-Oberfläche für Admin-Dark-Mode.
 */
body.crm-admin--dark .crm-admin-main .crm-cal-iframe {
    filter: invert(0.91) hue-rotate(180deg) saturate(0.82) contrast(0.96) brightness(0.97);
    -webkit-filter: invert(0.91) hue-rotate(180deg) saturate(0.82) contrast(0.96) brightness(0.97);
}

body.crm-admin--dark .crm-admin-main .crm-dash-manage-panel {
    background-color: rgba(15, 23, 42, 0.98) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55) !important;
}

body.crm-admin--dark .crm-dash-manage-panel {
    background-color: rgba(15, 23, 42, 0.98) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
}

body.crm-admin--dark .crm-dash-manage-panel .text-slate-900,
body.crm-admin--dark .crm-dash-manage-panel h2 {
    color: #f8fafc !important;
}

body.crm-admin--dark .crm-dash-manage-panel .text-slate-500 {
    color: #94a3b8 !important;
}

body.crm-admin--dark .crm-dash-manage-head,
body.crm-admin--dark .crm-dash-manage-foot {
    border-color: rgba(148, 163, 184, 0.15) !important;
}

body.crm-admin--dark .crm-dash-manage-handle {
    background-color: rgba(148, 163, 184, 0.45) !important;
}

body.crm-admin--dark .crm-dash-manage-item {
    background-color: rgba(30, 41, 59, 0.55) !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
}

body.crm-admin--dark .crm-dash-manage-label {
    color: #f1f5f9 !important;
}

body.crm-admin--dark .crm-dash-manage-item--on {
    background-color: rgba(0, 166, 251, 0.12) !important;
    border-color: rgba(0, 166, 251, 0.35) !important;
}

body.crm-admin--dark .crm-dash-manage-item--on .crm-dash-manage-label {
    color: #e0f2fe !important;
}

body.crm-admin--dark .crm-dash-manage-foot #crm-dash-manage-close {
    background-color: rgba(30, 41, 59, 0.65) !important;
    border-color: rgba(148, 163, 184, 0.25) !important;
    color: #e2e8f0 !important;
}

body.crm-admin--dark .crm-dash-manage-foot #crm-dash-manage-close:hover {
    background-color: rgba(51, 65, 85, 0.75) !important;
}

body.crm-admin--dark .crm-dash-visibility-cb {
    border-color: rgba(148, 163, 184, 0.45) !important;
    background-color: rgba(15, 23, 42, 0.85) !important;
}

/* Module-Modal — Mobile Bottom-Sheet */
@media (max-width: 639px) {
    .crm-dash-manage-list {
        -webkit-overflow-scrolling: touch;
        max-height: calc(92dvh - 9.5rem);
    }

    .crm-dash-manage-item {
        min-height: 44px;
    }
}

.crm-dash-manage-item--on {
    border-color: rgba(0, 166, 251, 0.35);
    background-color: rgba(0, 166, 251, 0.06);
}

.crm-dash-manage-item--on .crm-dash-manage-label {
    color: #003554;
    font-weight: 600;
}

/* Halbtransparente Slate-Flächen (Formulare) */
body.crm-admin--dark .crm-admin-main .bg-slate-50\/50 {
    background-color: rgba(30, 41, 59, 0.45) !important;
}

/* Modal-Overlays im Seiteninhalt (Tailwind hell) */
body.crm-admin--dark .crm-admin-main .bg-white\/92,
body.crm-admin--dark .crm-admin-main .bg-white\/90,
body.crm-admin--dark .crm-admin-main .bg-white\/95,
body.crm-admin--dark .crm-admin-main .bg-white\/80 {
    background-color: rgba(15, 23, 42, 0.88) !important;
}

/* Rechnungskarten-Grid: Zahlungs-Pille auf dunklem Grund immer lesbar */
body.crm-admin--dark .crm-admin-inv-grid .crm-admin-inv-disp {
    border-color: rgba(148, 163, 184, 0.35) !important;
    background-color: rgba(2, 6, 23, 0.78) !important;
    color: #f8fafc !important;
    font-weight: 700;
}

/* Push-Benachrichtigungen — Dark Mode (keine hellen Gradient-Reste) */
body.crm-admin--dark .crm-admin-main .push-page .push-hints-card,
body.crm-admin--dark .crm-admin-main .push-page .push-preview-inner {
    background-color: rgba(15, 23, 42, 0.82) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
}

body.crm-admin--dark .crm-admin-main .push-page .push-hints-card .text-slate-600,
body.crm-admin--dark .crm-admin-main .push-page .push-preview-inner .text-slate-600 {
    color: #cbd5e1 !important;
}

body.crm-admin--dark .crm-admin-main .push-page .push-customer-panel {
    background-color: rgba(0, 166, 251, 0.1) !important;
    border-color: rgba(0, 166, 251, 0.35) !important;
}

body.crm-admin--dark .crm-admin-main .push-page .push-admin-panel {
    background-color: rgba(139, 92, 246, 0.12) !important;
    border-color: rgba(139, 92, 246, 0.35) !important;
}

body.crm-admin--dark .crm-admin-main .push-page .push-apns-warn {
    background-color: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
    color: #fde68a !important;
}

body.crm-admin--dark .crm-admin-main .push-page .push-apns-warn .text-amber-900\/90,
body.crm-admin--dark .crm-admin-main .push-page .push-apns-warn p {
    color: #fde68a !important;
}

body.crm-admin--dark .crm-admin-main .push-page .push-audience-card {
    background-color: rgba(30, 41, 59, 0.45) !important;
}

body.crm-admin--dark .crm-admin-main .push-page .push-audience-card:has(:checked) {
    background-color: rgba(0, 166, 251, 0.12) !important;
}

body.crm-admin--dark .crm-admin-main .push-page .push-audience-card:has(input[value="admin_all"]:checked),
body.crm-admin--dark .crm-admin-main .push-page .push-audience-card:has(input[value="admin_one"]:checked) {
    background-color: rgba(139, 92, 246, 0.12) !important;
}

body.crm-admin--dark .crm-admin-main .push-page .push-audience-card:hover {
    background-color: rgba(30, 41, 59, 0.65) !important;
}

body.crm-admin--dark .crm-admin-main .push-page .push-icon-btn {
    background-color: rgba(30, 41, 59, 0.55) !important;
    border-color: rgba(148, 163, 184, 0.25) !important;
}

body.crm-admin--dark .crm-admin-main .push-page .push-icon-btn:hover {
    background-color: rgba(0, 166, 251, 0.15) !important;
    border-color: rgba(0, 166, 251, 0.45) !important;
}

body.crm-admin--dark .crm-admin-main .push-page #push-customer-list {
    background-color: rgba(15, 23, 42, 0.98) !important;
    border-color: rgba(148, 163, 184, 0.25) !important;
}

body.crm-admin--dark .crm-admin-main .push-page #push-customer-list li[role="option"]:hover,
body.crm-admin--dark .crm-admin-main .push-page #push-customer-list li[role="option"].bg-compiaz\/15 {
    background-color: rgba(0, 166, 251, 0.15) !important;
}

body.crm-admin--dark .crm-admin-main .push-page .push-emoji-panel {
    background-color: rgba(30, 41, 59, 0.45) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
}

body.crm-admin--dark .crm-admin-main .push-page .push-emoji-grid {
    background-color: rgba(15, 23, 42, 0.75) !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
}

body.crm-admin--dark .crm-admin-main .push-page .push-emoji-cat {
    background-color: rgba(15, 23, 42, 0.65) !important;
    border-color: rgba(148, 163, 184, 0.25) !important;
    color: #cbd5e1 !important;
}

body.crm-admin--dark .crm-admin-main .push-page .push-emoji-cat.border-compiaz {
    background-color: rgba(0, 166, 251, 0.15) !important;
    border-color: rgba(0, 166, 251, 0.45) !important;
    color: #7dd3fc !important;
}

body.crm-admin--dark .crm-admin-main .push-page #push-emoji-target {
    background-color: rgba(0, 166, 251, 0.15) !important;
    color: #7dd3fc !important;
}

/* Push — Link-Ziel Seite/Blog (Light + Dark) */
.push-page .push-link-dest {
    border-color: rgba(148, 163, 184, 0.22);
    background: rgba(248, 250, 252, 0.88);
}

.push-page .push-dest-btn {
    border-radius: 0.75rem;
    border: 2px solid rgba(148, 163, 184, 0.24);
    background: rgba(255, 255, 255, 0.95);
    padding: 0.625rem 0.5rem;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.push-page .push-dest-btn.is-active[data-dest="none"] {
    border-color: rgba(100, 116, 139, 0.45);
    background: rgba(241, 245, 249, 0.95);
    color: #334155;
}

.push-page .push-dest-btn.is-active[data-dest="page"] {
    border-color: rgba(0, 166, 251, 0.55);
    background: rgba(0, 166, 251, 0.1);
    color: #0369a1;
    box-shadow: 0 0 0 1px rgba(0, 166, 251, 0.12);
}

.push-page .push-dest-btn.is-active[data-dest="blog"] {
    border-color: rgba(245, 158, 11, 0.55);
    background: rgba(245, 158, 11, 0.1);
    color: #b45309;
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.12);
}

.push-page .push-link-panel--page {
    border-color: rgba(0, 166, 251, 0.28);
    background: rgba(0, 166, 251, 0.05);
}

.push-page .push-link-panel--blog {
    border-color: rgba(245, 158, 11, 0.32);
    background: rgba(245, 158, 11, 0.06);
}

.push-page .push-link-panel__label {
    color: #0c4a6e;
}

.push-page .push-link-panel__label--blog {
    color: #92400e;
}

.push-page .push-link-count {
    background: rgba(0, 166, 251, 0.12);
    color: #0284c7;
}

.push-page .push-link-count--blog {
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
}

.push-page .push-link-preview-badge {
    background: rgba(0, 166, 251, 0.12);
    color: #0284c7;
}

.push-page .push-link-search {
    border-color: rgba(148, 163, 184, 0.28);
    background: rgba(255, 255, 255, 0.96);
    color: #0f172a;
}

.push-page .push-link-search::placeholder {
    color: #94a3b8;
}

.push-page .push-link-search:focus {
    border-color: rgba(0, 166, 251, 0.55);
    box-shadow: 0 0 0 3px rgba(0, 166, 251, 0.14);
}

.push-page .push-link-search--blog:focus {
    border-color: rgba(245, 158, 11, 0.55);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.14);
}

.push-page .push-link-search-icon {
    color: rgba(0, 166, 251, 0.65);
}

.push-page .push-link-search-icon--blog {
    color: rgba(217, 119, 6, 0.75);
}

.push-page .push-link-clear {
    background: rgba(241, 245, 249, 0.95);
    color: #64748b;
}

.push-page .push-link-clear:hover {
    background: rgba(226, 232, 240, 0.95);
}

.push-page .push-link-list {
    border-color: rgba(148, 163, 184, 0.25);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}

.push-page .push-link-option {
    border-color: rgba(241, 245, 249, 0.9);
}

.push-page .push-link-option__title {
    color: #0f172a;
}

.push-page .push-link-option__hint {
    color: #64748b;
}

.push-page .push-link-option--page:hover,
.push-page .push-link-option--page:focus {
    background: rgba(0, 166, 251, 0.08);
}

.push-page .push-link-option--blog:hover,
.push-page .push-link-option--blog:focus {
    background: rgba(245, 158, 11, 0.08);
}

.push-page .push-link-hint {
    color: #64748b;
}

.push-page .push-link-hint--blog {
    color: #b45309;
}

.push-page .push-link-custom {
    border-color: rgba(148, 163, 184, 0.22);
    background: rgba(255, 255, 255, 0.55);
    color: #64748b;
}

body.crm-admin--dark .crm-admin-main .push-page .push-link-dest {
    background-color: rgba(30, 41, 59, 0.45) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
}

body.crm-admin--dark .crm-admin-main .push-page .push-link-dest__title,
body.crm-admin--dark .crm-admin-main .push-page .push-link-dest__sub {
    color: #94a3b8 !important;
}

body.crm-admin--dark .crm-admin-main .push-page .push-dest-btn {
    background-color: rgba(15, 23, 42, 0.65) !important;
    border-color: rgba(148, 163, 184, 0.25) !important;
    color: #cbd5e1 !important;
}

body.crm-admin--dark .crm-admin-main .push-page .push-dest-btn.is-active[data-dest="none"] {
    background-color: rgba(51, 65, 85, 0.55) !important;
    border-color: rgba(148, 163, 184, 0.4) !important;
    color: #f1f5f9 !important;
}

body.crm-admin--dark .crm-admin-main .push-page .push-dest-btn.is-active[data-dest="page"] {
    background-color: rgba(0, 166, 251, 0.15) !important;
    border-color: rgba(0, 166, 251, 0.5) !important;
    color: #7dd3fc !important;
    box-shadow: 0 0 0 1px rgba(0, 166, 251, 0.2) !important;
}

body.crm-admin--dark .crm-admin-main .push-page .push-dest-btn.is-active[data-dest="blog"] {
    background-color: rgba(245, 158, 11, 0.14) !important;
    border-color: rgba(245, 158, 11, 0.48) !important;
    color: #fcd34d !important;
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.18) !important;
}

body.crm-admin--dark .crm-admin-main .push-page .push-link-panel--page {
    background-color: rgba(0, 166, 251, 0.1) !important;
    border-color: rgba(0, 166, 251, 0.35) !important;
}

body.crm-admin--dark .crm-admin-main .push-page .push-link-panel--blog {
    background-color: rgba(245, 158, 11, 0.1) !important;
    border-color: rgba(245, 158, 11, 0.32) !important;
}

body.crm-admin--dark .crm-admin-main .push-page .push-link-panel__label {
    color: #7dd3fc !important;
}

body.crm-admin--dark .crm-admin-main .push-page .push-link-panel__label--blog {
    color: #fcd34d !important;
}

body.crm-admin--dark .crm-admin-main .push-page .push-link-count {
    background-color: rgba(0, 166, 251, 0.15) !important;
    color: #7dd3fc !important;
}

body.crm-admin--dark .crm-admin-main .push-page .push-link-count--blog {
    background-color: rgba(245, 158, 11, 0.18) !important;
    color: #fcd34d !important;
}

body.crm-admin--dark .crm-admin-main .push-page .push-link-preview-badge {
    background-color: rgba(0, 166, 251, 0.15) !important;
    color: #7dd3fc !important;
}

body.crm-admin--dark .crm-admin-main .push-page .push-link-search {
    background-color: rgba(2, 6, 23, 0.55) !important;
    border-color: rgba(148, 163, 184, 0.28) !important;
    color: #f8fafc !important;
}

body.crm-admin--dark .crm-admin-main .push-page .push-link-search::placeholder {
    color: #64748b !important;
}

body.crm-admin--dark .crm-admin-main .push-page .push-link-search:focus {
    border-color: rgba(0, 166, 251, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(0, 166, 251, 0.18) !important;
}

body.crm-admin--dark .crm-admin-main .push-page .push-link-search--blog:focus {
    border-color: rgba(245, 158, 11, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.16) !important;
}

body.crm-admin--dark .crm-admin-main .push-page .push-link-search-icon {
    color: rgba(125, 211, 252, 0.85) !important;
}

body.crm-admin--dark .crm-admin-main .push-page .push-link-search-icon--blog {
    color: rgba(252, 211, 77, 0.85) !important;
}

body.crm-admin--dark .crm-admin-main .push-page .push-link-clear {
    background-color: rgba(51, 65, 85, 0.65) !important;
    color: #cbd5e1 !important;
}

body.crm-admin--dark .crm-admin-main .push-page .push-link-clear:hover {
    background-color: rgba(71, 85, 105, 0.75) !important;
}

body.crm-admin--dark .crm-admin-main .push-page .push-link-list,
body.crm-admin--dark .crm-admin-main .push-page #push-page-list,
body.crm-admin--dark .crm-admin-main .push-page #push-blog-list {
    background-color: rgba(15, 23, 42, 0.98) !important;
    border-color: rgba(148, 163, 184, 0.25) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
}

body.crm-admin--dark .crm-admin-main .push-page .push-link-option__title {
    color: #f1f5f9 !important;
}

body.crm-admin--dark .crm-admin-main .push-page .push-link-option__hint {
    color: #94a3b8 !important;
}

body.crm-admin--dark .crm-admin-main .push-page .push-link-option {
    border-color: rgba(148, 163, 184, 0.12) !important;
}

body.crm-admin--dark .crm-admin-main .push-page .push-link-option--page:hover {
    background-color: rgba(0, 166, 251, 0.15) !important;
}

body.crm-admin--dark .crm-admin-main .push-page .push-link-option--blog:hover {
    background-color: rgba(245, 158, 11, 0.14) !important;
}

body.crm-admin--dark .crm-admin-main .push-page .push-link-hint,
body.crm-admin--dark .crm-admin-main .push-page .push-link-hint--blog {
    color: #94a3b8 !important;
}

body.crm-admin--dark .crm-admin-main .push-page .push-link-custom {
    background-color: rgba(15, 23, 42, 0.45) !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
    color: #94a3b8 !important;
}

.push-emoji-grid {
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 639px) {
    .push-emoji-grid {
        max-height: 40vh;
    }

    .push-icon-btn {
        height: 2.75rem;
        width: 2.75rem;
        font-size: 1.35rem;
    }
}

/* Push-Benachrichtigungen — Mobile App / schmale Viewports (Web unverändert ab lg) */
@media (max-width: 1023px) {
    .push-page {
        min-width: 0;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 3.5rem);
    }

    .push-page.space-y-6 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 1rem;
    }

    .push-page .push-stat-grid {
        gap: 0.625rem;
    }

    .push-page .push-stat-card {
        padding: 0.75rem;
        gap: 0.625rem;
    }

    .push-page .push-stat-card .text-2xl {
        font-size: 1.375rem;
        line-height: 1.75rem;
    }

    .push-page .push-stat-card .h-10 {
        height: 2.25rem;
        width: 2.25rem;
    }

    .push-page .push-stat-card .h-10 svg {
        height: 1.125rem;
        width: 1.125rem;
    }

    .push-page .push-layout {
        gap: 1rem;
    }

    .push-page .push-form {
        padding: 1rem !important;
    }

    .push-page .push-form > .flex.items-center.gap-3.border-b {
        gap: 0.75rem;
        padding-bottom: 0.875rem;
    }

    .push-page .push-emoji-panel,
    .push-page .push-link-dest {
        padding: 0.875rem !important;
    }

    .push-page .push-link-dest__head {
        flex-direction: column;
        align-items: stretch;
    }

    .push-page .push-link-preview-badge {
        max-width: 100%;
        align-self: flex-start;
    }

    .push-page .push-dest-btn {
        min-height: 44px;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        font-size: 12px;
    }

    .push-page #push-emoji-cats {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.25rem;
        margin-left: -0.25rem;
        margin-right: -0.25rem;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    .push-page .push-emoji-cat {
        flex-shrink: 0;
    }

    .push-page .push-link-list,
    .push-page #push-page-list,
    .push-page #push-blog-list,
    .push-page #push-customer-list {
        max-height: min(46vh, 18rem);
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .push-page #push-customer-list li[role="option"] {
        min-height: 44px;
    }

    .push-page .push-link-option {
        min-height: 44px;
    }

    .push-page .push-audience-card {
        min-height: 44px;
    }

    .push-page .push-form button[type="submit"] {
        min-height: 48px;
        font-size: 1rem;
    }

    .push-page .push-sidebar {
        gap: 0.75rem !important;
    }

    .push-page details > summary {
        min-height: 44px;
        align-items: center;
    }

    .push-page .push-history-scroll {
        overflow-x: visible;
    }

    .push-page .push-history-table {
        display: block;
        min-width: 0;
    }

    .push-page .push-history-table thead {
        display: none;
    }

    .push-page .push-history-table tbody {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        padding: 0.75rem 1rem 1.25rem;
    }

    .push-page .push-history-table tbody tr.push-history-row {
        display: block;
        border-radius: 1rem;
        border: 1px solid rgba(148, 163, 184, 0.22);
        background: rgba(30, 41, 59, 0.45);
        overflow: hidden;
    }

    .push-page .push-history-table tbody tr.push-history-row:hover {
        background: rgba(30, 41, 59, 0.58);
    }

    .push-page .push-history-table td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.55rem 1rem;
        border: none;
        max-width: none;
        white-space: normal;
        text-align: right;
    }

    .push-page .push-history-table td::before {
        content: attr(data-label);
        flex-shrink: 0;
        font-size: 0.625rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #64748b;
        padding-top: 0.12rem;
        min-width: 4.75rem;
        text-align: left;
    }

    .push-page .push-history-table td[data-label="Titel"] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.35rem;
        padding-top: 0.85rem;
        padding-bottom: 0.65rem;
        border-bottom: 1px solid rgba(148, 163, 184, 0.12);
        font-weight: 700;
        font-size: 0.9375rem;
        text-align: left;
    }

    .push-page .push-history-table td[data-label="Titel"]::before {
        padding-top: 0;
    }

    .push-page .push-history-table td[data-label="OK"],
    .push-page .push-history-table td[data-label="Fehler"] {
        align-items: center;
    }

    .push-page .push-history-table .push-history-empty {
        display: block;
        text-align: center;
        padding: 2rem 1rem !important;
    }

    .push-page .push-history-table .push-history-empty::before {
        display: none;
    }
}

@media (max-width: 380px) {
    .push-page .push-stat-grid {
        grid-template-columns: 1fr;
    }

    .push-page .push-dest-btn {
        font-size: 11px;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }
}

/* Portal-Statistik (Admin, nur Super-Admin) */
.portal-stats-page {
    min-width: 0;
}

.portal-stats-kpi {
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(255, 255, 255, 0.95);
    padding: 1rem;
}

.portal-stats-kpi__label {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.portal-stats-kpi__value {
    margin-top: 0.35rem;
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: #003554;
}

.portal-stats-kpi__hint {
    margin-top: 0.25rem;
    font-size: 0.6875rem;
    color: #94a3b8;
}

.portal-stats-kpi--amber { border-color: rgba(245, 158, 11, 0.35); background: linear-gradient(160deg, rgba(255, 251, 235, 0.9), rgba(255, 255, 255, 0.95)); }
.portal-stats-kpi--sky { border-color: rgba(0, 166, 251, 0.35); background: linear-gradient(160deg, rgba(224, 242, 254, 0.5), rgba(255, 255, 255, 0.95)); }
.portal-stats-kpi--teal { border-color: rgba(20, 184, 166, 0.35); background: linear-gradient(160deg, rgba(204, 251, 241, 0.35), rgba(255, 255, 255, 0.95)); }
.portal-stats-kpi--emerald { border-color: rgba(16, 185, 129, 0.35); background: linear-gradient(160deg, rgba(209, 250, 229, 0.45), rgba(255, 255, 255, 0.95)); }

.portal-stats-card {
    min-width: 0;
}

.portal-stats-funnel-step {
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(248, 250, 252, 0.9);
    padding: 1rem;
}

.portal-stats-funnel-step__num {
    margin-top: 0.5rem;
    font-size: 1.625rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #0f172a;
}

.portal-stats-funnel-step__sub {
    margin-top: 0.15rem;
    font-size: 0.6875rem;
    color: #64748b;
}

.portal-stats-funnel-step--amber { border-color: rgba(245, 158, 11, 0.3); }
.portal-stats-funnel-step--sky { border-color: rgba(0, 166, 251, 0.3); }
.portal-stats-funnel-step--violet { border-color: rgba(139, 92, 246, 0.3); }
.portal-stats-funnel-step--emerald { border-color: rgba(16, 185, 129, 0.3); }

.portal-stats-rate-pill {
    display: inline-flex;
    min-width: 3.25rem;
    justify-content: center;
    border-radius: 9999px;
    padding: 0.2rem 0.55rem;
    font-size: 0.6875rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.portal-stats-rate-pill.is-good { background: rgba(16, 185, 129, 0.15); color: #059669; }
.portal-stats-rate-pill.is-mid { background: rgba(0, 166, 251, 0.15); color: #0284c7; }
.portal-stats-rate-pill.is-low { background: rgba(148, 163, 184, 0.2); color: #64748b; }

body.crm-admin--dark .crm-admin-main .portal-stats-page .portal-stats-kpi,
body.crm-admin--dark .crm-admin-main .portal-stats-page .portal-stats-card,
body.crm-admin--dark .crm-admin-main .portal-stats-page .portal-stats-hint {
    background-color: rgba(15, 23, 42, 0.82) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
}

body.crm-admin--dark .crm-admin-main .portal-stats-page .portal-stats-kpi__value,
body.crm-admin--dark .crm-admin-main .portal-stats-page .portal-stats-card h2 {
    color: #f8fafc !important;
}

body.crm-admin--dark .crm-admin-main .portal-stats-page .portal-stats-kpi__label,
body.crm-admin--dark .crm-admin-main .portal-stats-page .portal-stats-kpi__hint,
body.crm-admin--dark .crm-admin-main .portal-stats-page .text-slate-500,
body.crm-admin--dark .crm-admin-main .portal-stats-page .text-slate-600 {
    color: #94a3b8 !important;
}

body.crm-admin--dark .crm-admin-main .portal-stats-page .portal-stats-kpi--amber {
    background: linear-gradient(160deg, rgba(120, 53, 15, 0.35), rgba(15, 23, 42, 0.88)) !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
}

body.crm-admin--dark .crm-admin-main .portal-stats-page .portal-stats-kpi--sky {
    background: linear-gradient(160deg, rgba(0, 53, 84, 0.55), rgba(15, 23, 42, 0.88)) !important;
    border-color: rgba(0, 166, 251, 0.35) !important;
}

body.crm-admin--dark .crm-admin-main .portal-stats-page .portal-stats-kpi--teal {
    background: linear-gradient(160deg, rgba(4, 47, 46, 0.45), rgba(15, 23, 42, 0.88)) !important;
    border-color: rgba(45, 212, 191, 0.3) !important;
}

body.crm-admin--dark .crm-admin-main .portal-stats-page .portal-stats-kpi--emerald {
    background: linear-gradient(160deg, rgba(6, 78, 59, 0.4), rgba(15, 23, 42, 0.88)) !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
}

body.crm-admin--dark .crm-admin-main .portal-stats-page .portal-stats-funnel-step {
    background-color: rgba(30, 41, 59, 0.55) !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
}

body.crm-admin--dark .crm-admin-main .portal-stats-page .portal-stats-funnel-step__num {
    color: #f1f5f9 !important;
}

body.crm-admin--dark .crm-admin-main .portal-stats-page .portal-stats-conv-item {
    background-color: rgba(30, 41, 59, 0.45) !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
}

body.crm-admin--dark .crm-admin-main .portal-stats-page .portal-stats-push-table thead {
    background-color: rgba(15, 23, 42, 0.9) !important;
}

body.crm-admin--dark .crm-admin-main .portal-stats-page .portal-stats-push-row:hover {
    background-color: rgba(30, 41, 59, 0.45) !important;
}

body.crm-admin--dark .crm-admin-main .portal-stats-page .portal-stats-rate-pill.is-good {
    background-color: rgba(16, 185, 129, 0.18) !important;
    color: #6ee7b7 !important;
}

body.crm-admin--dark .crm-admin-main .portal-stats-page .portal-stats-rate-pill.is-mid {
    background-color: rgba(0, 166, 251, 0.18) !important;
    color: #7dd3fc !important;
}

@media (max-width: 1023px) {
    .portal-stats-page.space-y-6 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 1rem;
    }

    .portal-stats-page {
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 3.5rem);
    }

    .portal-stats-kpi__value {
        font-size: 1.5rem;
    }

    .portal-stats-push-scroll {
        overflow-x: visible;
    }

    .portal-stats-push-table thead {
        display: none;
    }

    .portal-stats-push-table tbody {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        padding: 0.75rem 1rem 1.25rem;
    }

    .portal-stats-push-table tbody tr.portal-stats-push-row {
        display: block;
        border-radius: 1rem;
        border: 1px solid rgba(148, 163, 184, 0.22);
        background: rgba(30, 41, 59, 0.45);
        overflow: hidden;
    }

    .portal-stats-push-table td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.55rem 1rem;
        border: none;
        max-width: none;
        white-space: normal;
        text-align: right;
    }

    .portal-stats-push-table td::before {
        content: attr(data-label);
        flex-shrink: 0;
        font-size: 0.625rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #64748b;
        min-width: 4.5rem;
        text-align: left;
    }

    .portal-stats-push-table td[data-label="Titel"] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.35rem;
        padding-top: 0.85rem;
        border-bottom: 1px solid rgba(148, 163, 184, 0.12);
        font-weight: 700;
        text-align: left;
    }

    .portal-stats-push-table td[data-label="Titel"]::before {
        padding-top: 0;
    }

    .portal-stats-push-table .portal-stats-push-empty {
        display: block;
        text-align: center;
        padding: 2rem 1rem !important;
    }

    .portal-stats-push-table .portal-stats-push-empty::before {
        display: none;
    }
}

@media (max-width: 380px) {
    .portal-stats-kpi-grid {
        grid-template-columns: 1fr;
    }
}

/* Einstellungen & Profil — Dark Mode */
body.crm-admin--dark .crm-admin-main .settings-page .settings-card,
body.crm-admin--dark .crm-admin-main .settings-page .settings-care-card,
body.crm-admin--dark .crm-admin-main .profile-page .profile-card {
    background-color: rgba(15, 23, 42, 0.82) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
}

body.crm-admin--dark .crm-admin-main .settings-page .settings-care-card {
    border-color: rgba(139, 92, 246, 0.35) !important;
    background-color: rgba(15, 23, 42, 0.88) !important;
}

body.crm-admin--dark .crm-admin-main .settings-page .settings-care-card .text-slate-600,
body.crm-admin--dark .crm-admin-main .settings-page .settings-care-card .text-slate-700,
body.crm-admin--dark .crm-admin-main .settings-page .settings-card .text-slate-700,
body.crm-admin--dark .crm-admin-main .profile-page .profile-card .text-slate-700 {
    color: #e2e8f0 !important;
}

body.crm-admin--dark .crm-admin-main .settings-page .settings-code,
body.crm-admin--dark .crm-admin-main .profile-page .settings-code {
    background-color: rgba(30, 41, 59, 0.75) !important;
    color: #bae6fd !important;
}

body.crm-admin--dark .crm-admin-main .settings-page .settings-smtp-ok {
    background-color: rgba(16, 185, 129, 0.12) !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
}

body.crm-admin--dark .crm-admin-main .settings-page .settings-smtp-warn {
    background-color: rgba(249, 115, 22, 0.12) !important;
    border-color: rgba(249, 115, 22, 0.35) !important;
}

body.crm-admin--dark .crm-admin-main .settings-page .settings-smtp-ok .text-emerald-800,
body.crm-admin--dark .crm-admin-main .settings-page .settings-smtp-ok .text-emerald-700 {
    color: #6ee7b7 !important;
}

body.crm-admin--dark .crm-admin-main .settings-page .settings-smtp-warn .text-orange-800,
body.crm-admin--dark .crm-admin-main .settings-page .settings-smtp-warn .text-orange-700 {
    color: #fdba74 !important;
}

body.crm-admin--dark .crm-admin-main .settings-page .settings-flash-ok,
body.crm-admin--dark .crm-admin-main .profile-page .profile-flash-ok {
    background-color: rgba(16, 185, 129, 0.12) !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
    color: #6ee7b7 !important;
}

body.crm-admin--dark .crm-admin-main .settings-page .settings-flash-err,
body.crm-admin--dark .crm-admin-main .profile-page .profile-flash-err {
    background-color: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
    color: #fca5a5 !important;
}

body.crm-admin--dark .crm-admin-main .profile-page .profile-warn-box {
    background-color: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
    color: #fde68a !important;
}

body.crm-admin--dark .crm-admin-main .profile-page .profile-warn-box .text-amber-900\/90 {
    color: #fde68a !important;
}

body.crm-admin--dark .crm-admin-main .profile-page .profile-btn-secondary:hover {
    background-color: rgba(0, 166, 251, 0.1) !important;
}

body.crm-admin--dark .crm-admin-main .settings-page .border-slate-100,
body.crm-admin--dark .crm-admin-main .profile-page .border-slate-100 {
    border-color: rgba(148, 163, 184, 0.15) !important;
}

/* ── Admin Aufgaben Kalender (todos.php) — Dark, modern ── */
.todos-cal {
    --cal-accent: #00a6fb;
    --cal-panel: rgba(15, 23, 42, 0.96);
}

body.crm-admin--dark .crm-admin-page:has(.todos-cal) .crm-admin-page-title {
    display: none;
}

/* Einheitliche Shell — Mobile & Desktop */
.todos-page.todos-cal {
    padding-top: 0.75rem;
}

.todos-cal-shell {
    overflow: hidden;
    border-radius: 1.75rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(165deg, rgba(15, 23, 42, 0.98) 0%, rgba(3, 7, 18, 0.99) 100%);
    box-shadow: 0 24px 64px -24px rgba(0, 0, 0, 0.55);
}

.todos-cal-shell-head {
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    background: linear-gradient(135deg, rgba(0, 53, 84, 0.45) 0%, rgba(15, 23, 42, 0.2) 100%);
}

.todos-cal-shell-head-inset {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    box-sizing: border-box;
    width: 100%;
    padding: 3.25rem 1.75rem 2.25rem;
}

.todos-cal-shell-head-main {
    min-width: 0;
}

.todos-cal-body {
    display: flex;
    flex-direction: column;
}

.todos-cal-sidebar {
    padding: 2rem 1.5rem 1.5rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.todos-cal-main {
    padding: 2rem 1.5rem 5rem;
}

/* Legacy aliases — Sidebar statt separater Hero-Karte */
.todos-cal-hero-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.todos-cal-kicker {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(125, 211, 252, 0.85);
    line-height: 1.5;
}

.todos-cal-title {
    margin-top: 0.625rem;
    font-size: 1.75rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: #fff;
    line-height: 1.15;
}

.todos-cal-sub {
    margin-top: 0.625rem;
    font-size: 0.875rem;
    color: #94a3b8;
    line-height: 1.45;
}

.todos-cal-hero-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.todos-cal-icon-btn {
    display: flex;
    height: 2.5rem;
    width: 2.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.875rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    font-size: 1.25rem;
    color: #e2e8f0;
    transition: background 0.15s, border-color 0.15s;
}

.todos-cal-icon-btn:hover {
    border-color: rgba(0, 166, 251, 0.45);
    background: rgba(0, 166, 251, 0.14);
}

.todos-cal-today-btn {
    border-radius: 0.875rem;
    border: 1px solid rgba(0, 166, 251, 0.4);
    background: rgba(0, 166, 251, 0.14);
    padding: 0.5rem 0.875rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #7dd3fc;
}

.todos-cal-view-tabs {
    display: flex;
    margin-top: 0.25rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(2, 6, 23, 0.45);
    padding: 0.25rem;
}

.todos-cal-view-tab {
    flex: 1;
    border-radius: 0.75rem;
    padding: 0.625rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.todos-cal-view-tab.is-active {
    background: linear-gradient(135deg, #00a6fb, #0582ca);
    color: #fff;
    box-shadow: 0 4px 16px rgba(0, 166, 251, 0.35);
}

.todos-cal-daystrip {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.todos-cal-daystrip::-webkit-scrollbar {
    height: 4px;
}

.todos-cal-daystrip::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.35);
    border-radius: 9999px;
}

.todos-cal-day {
    position: relative;
    flex: 0 0 auto;
    min-width: 4.25rem;
    scroll-snap-align: center;
    border-radius: 1.125rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    padding: 0.75rem 0.5rem 0.875rem;
    text-align: center;
    transition: transform 0.12s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.todos-cal-day:hover {
    border-color: rgba(0, 166, 251, 0.35);
    background: rgba(0, 166, 251, 0.08);
}

.todos-cal-day.is-active {
    border-color: transparent;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    transform: translateY(-2px);
}

.todos-cal-day.is-active .todos-cal-day-wd,
.todos-cal-day.is-active .todos-cal-day-num {
    color: #0f172a;
}

.todos-cal-day.is-today:not(.is-active) {
    border-color: rgba(0, 166, 251, 0.45);
}

.todos-cal-day-wd {
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

.todos-cal-day-num {
    display: block;
    margin-top: 0.15rem;
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1;
    color: #f1f5f9;
}

.todos-cal-day-dot {
    position: absolute;
    bottom: 0.45rem;
    left: 50%;
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 9999px;
    background: #00a6fb;
    transform: translateX(-50%);
}

.todos-cal-day.is-active .todos-cal-day-dot {
    background: #0582ca;
}

.todos-cal-month {
    position: relative;
    z-index: 1;
    margin-top: 1rem;
    border-radius: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(2, 6, 23, 0.35);
    padding: 0.75rem;
}

.todos-cal-month-head,
.todos-cal-month-body {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.35rem;
}

.todos-cal-month-wd {
    padding: 0.25rem 0;
    text-align: center;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}

.todos-cal-month-cell {
    position: relative;
    aspect-ratio: 1;
    border-radius: 0.875rem;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.03);
    transition: background 0.15s, border-color 0.15s;
}

.todos-cal-month-cell.is-empty {
    background: transparent;
    pointer-events: none;
}

.todos-cal-month-cell:not(.is-empty):hover {
    border-color: rgba(0, 166, 251, 0.35);
    background: rgba(0, 166, 251, 0.1);
}

.todos-cal-month-cell.is-active {
    border-color: transparent;
    background: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.todos-cal-month-cell.is-active .todos-cal-month-num {
    color: #0f172a;
}

.todos-cal-month-cell.is-today:not(.is-active) {
    border-color: rgba(0, 166, 251, 0.45);
}

.todos-cal-month-num {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    color: #e2e8f0;
}

.todos-cal-month-dots {
    position: absolute;
    bottom: 0.3rem;
    left: 50%;
    width: 1rem;
    height: 0.2rem;
    border-radius: 9999px;
    background: #00a6fb;
    transform: translateX(-50%);
    font-size: 0;
    overflow: hidden;
}

.todos-cal-stats {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
    margin-top: 1rem;
}

@media (min-width: 640px) {
    .todos-cal-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.todos-cal-stat {
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.05);
    padding: 0.75rem 0.875rem;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.12s;
}

.todos-cal-stat:hover {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
}

.todos-cal-stat.is-active {
    border-color: rgba(0, 166, 251, 0.55);
    background: rgba(0, 166, 251, 0.12);
    box-shadow: 0 0 0 1px rgba(0, 166, 251, 0.25);
}

.todos-cal-stat:active {
    transform: scale(0.98);
}

.todos-cal-stat-num {
    display: block;
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
}

.todos-cal-stat-label {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #94a3b8;
}

.todos-cal-stat--open .todos-cal-stat-num { color: #7dd3fc; }
.todos-cal-stat--done .todos-cal-stat-num { color: #6ee7b7; }
.todos-cal-stat--high .todos-cal-stat-num { color: #fda4af; }
.todos-cal-stat--mine .todos-cal-stat-num { color: #c4b5fd; }

.todos-cal-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-top: 0.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.todos-cal-panel-kicker {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #64748b;
    line-height: 1.5;
}

.todos-cal-panel-title {
    margin-top: 0.5rem;
    font-size: 1.25rem;
    font-weight: 800;
    color: #f1f5f9;
}

.todos-cal-panel-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.todos-cal-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(30, 41, 59, 0.55);
    padding: 0.45rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #cbd5e1;
}

.todos-cal-fab {
    position: fixed;
    z-index: 700000;
    right: max(1.25rem, env(safe-area-inset-right, 0px) + 1rem);
    bottom: max(1.5rem, env(safe-area-inset-bottom, 0px) + 1rem);
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    height: 3.25rem;
    padding: 0.35rem 1.15rem 0.35rem 0.35rem;
    border-radius: 9999px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-size: 0.8125rem;
    font-weight: 700;
    color: #f1f5f9;
    letter-spacing: 0.01em;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(0, 166, 251, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s;
}

.todos-cal-fab__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background: linear-gradient(145deg, #00a6fb 0%, #0582ca 100%);
    color: #fff;
    box-shadow: 0 4px 16px rgba(0, 166, 251, 0.4);
}

.todos-cal-fab__label {
    padding-right: 0.15rem;
    white-space: nowrap;
}

.todos-cal-fab:hover {
    border-color: rgba(0, 166, 251, 0.45);
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(0, 166, 251, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
}

.todos-cal-fab:active {
    transform: translateY(0) scale(0.98);
}

@media (max-width: 1023px) {
    .todos-cal-fab {
        bottom: max(5.25rem, env(safe-area-inset-bottom, 0px) + 4rem);
        height: 3.5rem;
        width: 3.5rem;
        padding: 0;
        justify-content: center;
        border-radius: 9999px;
    }

    .todos-cal-fab__label {
        display: none;
    }

    .todos-cal-fab__icon {
        width: 3.5rem;
        height: 3.5rem;
    }
}

.todos-cal-agenda {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.todos-agenda-section-title {
    margin-bottom: 0.625rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #64748b;
}

.todos-agenda-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.todos-agenda-item {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: 1.125rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(30, 41, 59, 0.45);
    padding: 0.875rem 1rem;
    border-left-width: 4px;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.todos-agenda-row {
    display: flex;
    gap: 0.875rem;
    align-items: flex-start;
}

.todos-agenda-quick {
    display: none;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    margin-left: auto;
    padding-top: 0.1rem;
}

.todos-agenda-quick-field {
    margin: 0;
}

.todos-cal-compose-btn {
    display: none;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.5rem;
    border-radius: 0.75rem;
    border: none;
    padding: 0.45rem 1rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #00a6fb 0%, #0582ca 100%);
    box-shadow: 0 4px 16px rgba(0, 166, 251, 0.28);
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.12s ease;
}

.todos-cal-compose-btn:hover {
    opacity: 0.95;
}

.todos-cal-compose-btn:active {
    transform: scale(0.98);
}

.todos-agenda-item:hover {
    background: rgba(30, 41, 59, 0.72);
}

.todos-agenda-item.is-done {
    opacity: 0.72;
}

.todos-agenda-item--indigo { border-left-color: #6366f1; }
.todos-agenda-item--sky { border-left-color: #0ea5e9; }
.todos-agenda-item--emerald { border-left-color: #10b981; }
.todos-agenda-item--rose { border-left-color: #f43f5e; }
.todos-agenda-item--violet { border-left-color: #8b5cf6; }
.todos-agenda-item--teal { border-left-color: #14b8a6; }
.todos-agenda-item--blue { border-left-color: #3b82f6; }
.todos-agenda-item--cyan { border-left-color: #06b6d4; }
.todos-agenda-item--purple { border-left-color: #a855f7; }
.todos-agenda-item--slate { border-left-color: #64748b; }

.todos-agenda-check {
    flex-shrink: 0;
    padding-top: 0.15rem;
    cursor: pointer;
}

.todos-agenda-check .todo-check-input {
    height: 1.25rem;
    width: 1.25rem;
    border-radius: 0.375rem;
    border-color: rgba(148, 163, 184, 0.45);
    background: rgba(15, 23, 42, 0.8);
    color: var(--cal-accent);
}

.todos-agenda-body {
    min-width: 0;
    flex: 1;
    cursor: pointer;
}

.todos-agenda-body:focus-visible {
    outline: 2px solid rgba(0, 166, 251, 0.55);
    outline-offset: 2px;
    border-radius: 0.75rem;
}

.todos-agenda-top {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.todos-agenda-title {
    flex: 1;
    min-width: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #f1f5f9;
}

.todos-agenda-item.is-done .todos-agenda-title {
    text-decoration: line-through;
    color: #94a3b8;
}

.todos-agenda-notes {
    margin-top: 0.35rem;
    white-space: pre-wrap;
    font-size: 0.8125rem;
    color: #cbd5e1;
}

.todos-agenda-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

.todos-agenda-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.625rem;
    font-size: 0.6875rem;
    color: #94a3b8;
}

.todos-agenda-item.is-expanded {
    border-color: rgba(0, 166, 251, 0.35);
    background: rgba(15, 23, 42, 0.92);
}

.todos-agenda-chevron {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 0.2rem;
}

.todos-agenda-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.35rem;
}

.todos-agenda-notes--preview {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.todos-agenda-hint {
    margin-left: auto;
    font-size: 0.625rem;
    color: #64748b;
    font-style: italic;
}

.todos-agenda-detail {
    margin-top: 0.875rem;
    padding-top: 0.875rem;
    border-top: 1px solid rgba(148, 163, 184, 0.15);
}

.todos-agenda-kv {
    display: grid;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
}

.todos-agenda-kv div {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: 0.5rem;
}

.todos-agenda-kv dt {
    margin: 0;
    color: #64748b;
    font-weight: 600;
}

.todos-agenda-kv dd {
    margin: 0;
    color: #cbd5e1;
}

.todos-agenda-notes-full {
    white-space: pre-wrap;
    font-size: 0.8125rem;
    color: #e2e8f0;
    line-height: 1.5;
    margin-bottom: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.75rem;
    background: rgba(30, 41, 59, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.12);
}

.todos-agenda-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-end;
}

.todos-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.625rem;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(30, 41, 59, 0.85);
    font-size: 0.75rem;
    font-weight: 700;
    color: #e2e8f0;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.todos-action-btn:hover {
    border-color: rgba(0, 166, 251, 0.45);
    background: rgba(30, 41, 59, 1);
}

.todos-action-btn--primary {
    border-color: rgba(16, 185, 129, 0.45);
    background: rgba(6, 78, 59, 0.45);
    color: #6ee7b7;
}

.todos-action-btn--primary:hover {
    background: rgba(6, 78, 59, 0.65);
}

.todos-action-btn--danger {
    border-color: rgba(244, 63, 94, 0.35);
    color: #fda4af;
}

.todos-action-btn.is-active {
    border-color: rgba(244, 63, 94, 0.55);
    background: rgba(127, 29, 29, 0.35);
    color: #fecdd3;
}

.todos-action-btn--icon {
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: 0.35rem;
    font-size: 0.9375rem;
    line-height: 1;
}

.todos-action-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.625rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.todos-page .todos-field--xs {
    min-height: 2.25rem;
    min-width: 8.5rem;
    width: auto;
    font-size: 0.75rem;
    padding: 0.35rem 0.5rem;
}

.todos-page .todo-badge--done {
    border-color: rgba(16, 185, 129, 0.35);
    background: rgba(6, 78, 59, 0.35);
    color: #6ee7b7;
}

.todos-page .todos-card {
    border-radius: 1.5rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.82);
    box-shadow: 0 12px 40px -16px rgba(0, 0, 0, 0.45);
}

.todos-page .todos-section-title,
.todos-page .todos-period-label {
    color: #f1f5f9;
}

.todos-page .todos-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #94a3b8;
}

.todos-page .todos-field {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    min-height: 2.75rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(30, 41, 59, 0.85);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #f1f5f9;
    color-scheme: dark;
}

.todos-page .todos-field option {
    background: #0f172a;
    color: #f1f5f9;
}

.todos-page .todos-field::placeholder {
    color: #64748b;
}

.todos-page .todos-field:focus {
    outline: none;
    border-color: rgba(0, 166, 251, 0.55);
    box-shadow: 0 0 0 3px rgba(0, 166, 251, 0.18);
}

.todos-page .todos-field--lg {
    min-height: 3rem;
    border-radius: 1rem;
    padding: 0.75rem 1rem;
    font-size: 1rem;
}

.todos-page .todos-field--sm {
    min-height: 2.5rem;
    width: auto;
    min-width: 9rem;
    font-size: 0.8125rem;
}

.todos-page .todos-field--area {
    min-height: auto;
    resize: vertical;
    font-weight: 500;
}

.todos-page .todos-remind-block {
    margin-top: 0.25rem;
    border-radius: 1rem;
    border: 1px solid rgba(0, 166, 251, 0.22);
    background: linear-gradient(145deg, rgba(0, 166, 251, 0.1) 0%, rgba(15, 23, 42, 0.55) 55%, rgba(15, 23, 42, 0.75) 100%);
    padding: 0.875rem 1rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 24px rgba(0, 53, 84, 0.18);
}

.todos-page .todos-remind-head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.todos-page .todos-remind-icon {
    display: flex;
    height: 2.25rem;
    width: 2.25rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, rgba(0, 166, 251, 0.35), rgba(5, 130, 202, 0.25));
    font-size: 1.125rem;
    box-shadow: 0 4px 14px rgba(0, 166, 251, 0.2);
}

.todos-page .todos-remind-hint {
    margin-top: 0.2rem;
    font-size: 0.6875rem;
    line-height: 1.45;
    color: #94a3b8;
}

.todos-page .todos-remind-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    max-width: 100%;
}

.todos-page .todos-remind-input {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    color-scheme: dark;
}

.todos-page .todos-field[type="date"],
.todos-page .todos-field[type="datetime-local"],
.todos-page .todos-field[type="time"] {
    display: block;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.todos-page .todos-field[type="datetime-local"]::-webkit-date-and-time-value {
    text-align: left;
}

.todos-page .todos-remind-clear {
    flex-shrink: 0;
    border-radius: 0.65rem;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(30, 41, 59, 0.65);
    padding: 0.45rem 0.75rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #cbd5e1;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.todos-page .todos-remind-clear:hover {
    border-color: rgba(244, 63, 94, 0.35);
    background: rgba(244, 63, 94, 0.12);
    color: #fda4af;
}

.todos-page .todos-filter-pill {
    border-radius: 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(30, 41, 59, 0.55);
    color: #cbd5e1;
}

.todos-page .todos-nav-btn {
    display: flex;
    height: 2.75rem;
    width: 2.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(30, 41, 59, 0.85);
    font-size: 1.125rem;
    color: #e2e8f0;
    transition: border-color 0.15s, background 0.15s;
}

.todos-page .todos-nav-btn:hover {
    border-color: rgba(0, 166, 251, 0.45);
    background: rgba(0, 166, 251, 0.12);
}

.todos-page .todos-nav-today {
    border-radius: 0.75rem;
    border: 1px solid rgba(0, 166, 251, 0.35);
    background: rgba(0, 166, 251, 0.12);
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #7dd3fc;
}

.todos-page .todos-nav-today:hover {
    background: rgba(0, 166, 251, 0.2);
}

.todos-page .todos-view-tab {
    color: #94a3b8;
}

.todos-page .todos-view-tab.is-active {
    background: linear-gradient(135deg, #00a6fb, #0582ca);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 166, 251, 0.35);
}

.todos-page .todos-stat-chip {
    border-radius: 9999px;
    padding: 0.25rem 0.75rem;
    font-weight: 700;
}

.todos-page .todos-stat-chip--open {
    background: rgba(14, 165, 233, 0.18);
    color: #7dd3fc;
}

.todos-page .todos-stat-chip--done {
    background: rgba(16, 185, 129, 0.18);
    color: #6ee7b7;
}

.todos-page .todos-stat-chip--high {
    background: rgba(244, 63, 94, 0.18);
    color: #fda4af;
}

.todos-page .todos-btn-primary {
    border-radius: 1rem;
    background: linear-gradient(135deg, #00a6fb, #0582ca);
    padding: 0.875rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 166, 251, 0.28);
    transition: transform 0.12s, box-shadow 0.15s;
}

.todos-page .todos-btn-primary:hover {
    box-shadow: 0 12px 28px rgba(0, 166, 251, 0.38);
}

.todos-page .todos-btn-primary:active {
    transform: scale(0.99);
}

.todos-page .todos-btn-danger {
    border-radius: 0.75rem;
    border: 1px solid rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.12);
    padding: 0.625rem 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fca5a5;
}

.todos-page .todos-suggestions {
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.98);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.todos-page .todos-suggestions li {
    cursor: pointer;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    color: #e2e8f0;
}

.todos-page .todos-suggestions li:hover {
    background: rgba(0, 166, 251, 0.12);
}

.todos-page .todos-link-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 0.5rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-decoration: none;
}

.todos-page .todos-link-chip--violet { background: rgba(139, 92, 246, 0.22); color: #c4b5fd; }
.todos-page .todos-link-chip--sky { background: rgba(14, 165, 233, 0.22); color: #7dd3fc; }
.todos-page .todos-link-chip--teal { background: rgba(20, 184, 166, 0.22); color: #5eead4; }
.todos-page .todos-link-chip--indigo { background: rgba(99, 102, 241, 0.22); color: #a5b4fc; }
.todos-page .todos-link-chip--blue { background: rgba(59, 130, 246, 0.22); color: #93c5fd; }
.todos-page .todos-link-chip--cyan { background: rgba(6, 182, 212, 0.22); color: #67e8f9; }
.todos-page .todos-link-chip--emerald { background: rgba(16, 185, 129, 0.22); color: #6ee7b7; }
.todos-page .todos-link-chip--purple { background: rgba(168, 85, 247, 0.22); color: #d8b4fe; }
.todos-page .todos-link-chip--slate { background: rgba(100, 116, 139, 0.22); color: #cbd5e1; }

.todos-page .todo-card {
    border-radius: 1.25rem;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.82);
    padding: 1rem 1.1rem;
    box-shadow: 0 8px 30px -14px rgba(0, 0, 0, 0.4);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.todos-page .todo-card:hover {
    border-color: rgba(0, 166, 251, 0.35);
    box-shadow: 0 12px 36px -14px rgba(0, 166, 251, 0.15);
}

.todos-page .todo-card--high {
    border-left: 4px solid #f43f5e;
}

.todos-page .todo-card--done {
    opacity: 0.78;
    background: rgba(16, 185, 129, 0.08);
}

.todos-page .todo-card-title {
    color: #f1f5f9;
}

.todos-page .todo-card--done .todo-card-title {
    text-decoration: line-through;
    color: #94a3b8;
}

.todos-page .todo-card-meta {
    color: #94a3b8;
}

.todos-page .todo-card-notes {
    color: #cbd5e1;
}

.todos-page .todo-badge {
    border-radius: 0.375rem;
    background: rgba(51, 65, 85, 0.65);
    padding: 0.125rem 0.5rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #cbd5e1;
}

.todos-page .todo-badge--high {
    background: rgba(244, 63, 94, 0.2);
    color: #fda4af;
}

.todos-page .todo-badge--date {
    background: rgba(0, 166, 251, 0.18);
    color: #7dd3fc;
}

.todos-page .todo-badge--remind {
    background: rgba(0, 166, 251, 0.16);
    color: #bae6fd;
    text-transform: none;
    letter-spacing: 0;
}

.todos-page .todo-badge--remind.is-past {
    background: rgba(100, 116, 139, 0.25);
    color: #94a3b8;
}

.todos-page .todos-agenda-remind-dd.is-past {
    color: #94a3b8;
}

.todos-page .todo-assignee {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 9999px;
    background: rgba(51, 65, 85, 0.65);
    padding: 0.125rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #e2e8f0;
}

.todos-page .todo-edit-btn {
    margin-left: auto;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #38bdf8;
}

.todos-page .todo-edit-btn:hover {
    text-decoration: underline;
}

.todos-page .todos-empty {
    border-radius: 1.5rem;
    border: 1px dashed rgba(148, 163, 184, 0.28);
    background: rgba(15, 23, 42, 0.55);
    padding: 4rem 1.5rem;
    text-align: center;
    color: #94a3b8;
}

.todos-page .todos-empty-title {
    font-weight: 700;
    color: #e2e8f0;
}

.todos-page .todos-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(30, 41, 59, 0.85);
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #e2e8f0;
}

.todos-page .todos-chip button {
    margin-left: 0.25rem;
    color: #94a3b8;
}

.todos-page .todos-chip button:hover {
    color: #f87171;
}

.todos-page .todos-edit-backdrop {
    background: rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(4px);
}

.todos-page .todos-edit-sheet {
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    box-sizing: border-box;
}

.todos-page .todos-edit-sheet form {
    overflow-x: clip;
    max-width: 100%;
    min-width: 0;
}

.todos-page .todos-form-grid {
    min-width: 0;
    max-width: 100%;
}

.todos-page .todos-form-grid > label,
.todos-page .todos-form-grid > .block {
    min-width: 0;
    max-width: 100%;
}

.todos-page .todos-remind-block,
.todos-page .todos-link-picker {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.todos-page .todos-loading,
.todos-page .todos-error {
    border-radius: 1.5rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.82);
    padding: 3rem 1.5rem;
    text-align: center;
    font-size: 0.875rem;
    color: #94a3b8;
}

.todos-page .todos-error {
    border-color: rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.1);
    color: #fca5a5;
}

/* Mobile: Aufgaben-Inhalt bleibt im Viewport — kein seitliches Verschieben */
@media (max-width: 1023px) {
    .todos-page.todos-cal {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: clip;
    }

    .todos-cal-shell,
    .todos-cal-body,
    .todos-cal-sidebar,
    .todos-cal-main,
    .todos-cal-agenda,
    .todos-agenda-list {
        max-width: 100%;
        min-width: 0;
    }

    .todos-cal-shell-head-inset {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .todos-cal-sidebar,
    .todos-cal-main {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .todos-cal-title,
    .todos-cal-panel-title {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .todos-cal-daystrip {
        max-width: 100%;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }

    .todos-cal-panel-head,
    .todos-cal-panel-tools {
        width: 100%;
        min-width: 0;
    }

    .todos-cal-panel-tools {
        flex-direction: column;
        align-items: stretch;
    }

    .todos-cal-panel-tools .todos-field--sm,
    .todos-page .todos-field--xs {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .todos-cal-filter {
        width: 100%;
        max-width: 100%;
    }

    .todos-agenda-item,
    .todos-agenda-row,
    .todos-agenda-body,
    .todos-agenda-detail,
    .todos-agenda-kv {
        min-width: 0;
        max-width: 100%;
    }

    .todos-agenda-item {
        overflow: hidden;
    }

    .todos-agenda-title,
    .todos-agenda-notes,
    .todos-agenda-notes-full,
    .todos-page .todo-assignee {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .todos-agenda-hint {
        margin-left: 0;
        flex: 1 1 100%;
    }

    .todos-page .todos-link-chip {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .todos-agenda-actions {
        width: 100%;
    }

    .todos-action-field,
    .todos-action-field .todos-field--xs {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .todos-page .todos-edit-sheet,
    .todos-page .todos-card {
        max-width: 100%;
        width: 100%;
        left: 0 !important;
        right: 0 !important;
        box-sizing: border-box;
        overflow-x: clip;
    }

    .todos-page .todos-edit-sheet form,
    .todos-page .todos-form-grid,
    .todos-page .todos-remind-block,
    .todos-page .todos-link-picker {
        overflow-x: clip;
    }

    .todos-page .todos-form-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .todos-page .todos-form-grid > * {
        grid-column: 1 / -1 !important;
    }

    .todos-page .todos-remind-row {
        flex-direction: column;
        align-items: stretch;
    }

    .todos-page .todos-remind-input {
        flex: none;
        width: 100%;
        max-width: 100%;
    }

    .todos-page .todos-remind-clear {
        width: 100%;
        text-align: center;
    }

    .todos-page .todos-field[type="date"],
    .todos-page .todos-field[type="datetime-local"] {
        width: 100%;
        max-width: 100%;
        font-size: 16px !important;
    }

    body.todos-sheet-open {
        overflow: hidden !important;
        overflow-x: clip !important;
        max-width: 100%;
    }
}

/* Desktop: integrierte Sidebar + Hauptbereich in einer Shell */
@media (min-width: 1024px) {
    .todos-page.todos-cal {
        width: 100%;
        max-width: none;
    }

    .todos-cal-shell-head-inset {
        padding: 1.75rem 2.25rem 1.5rem;
    }

    .todos-cal-title {
        font-size: 1.625rem;
        margin-top: 0.5rem;
    }

    .todos-cal-sub {
        margin-top: 0.45rem;
        font-size: 0.8125rem;
    }

    .todos-cal-hero-actions {
        align-items: center;
        flex-shrink: 0;
    }

    .todos-cal-compose-btn {
        display: inline-flex;
    }

    .todos-cal-fab {
        right: 2rem;
        bottom: 2rem;
        height: 3.5rem;
        padding: 0.4rem 1.35rem 0.4rem 0.4rem;
    }

    .todos-cal-body {
        display: grid;
        grid-template-columns: minmax(260px, 18rem) minmax(0, 1fr);
        align-items: stretch;
        min-height: calc(100vh - 9rem);
    }

    .todos-cal-sidebar {
        padding: 1.5rem 1.35rem 1.75rem;
        border-bottom: none;
        border-right: 1px solid rgba(148, 163, 184, 0.12);
        background: rgba(0, 0, 0, 0.12);
    }

    .todos-cal-main {
        display: flex;
        flex-direction: column;
        min-width: 0;
        padding: 1.75rem 2rem 3rem;
    }

    .todos-cal-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
        margin-top: 1.25rem;
    }

    .todos-cal-stat {
        padding: 0.85rem 0.95rem;
    }

    .todos-cal-panel-head {
        margin-bottom: 1.75rem;
        padding-top: 0;
        padding-bottom: 1.25rem;
        border-bottom: 1px solid rgba(148, 163, 184, 0.12);
        gap: 1.25rem;
    }

    .todos-cal-panel-title {
        font-size: 1.375rem;
        margin-top: 0.35rem;
    }

    .todos-cal-panel-tools {
        margin-left: auto;
        gap: 0.65rem;
    }

    .todos-cal-agenda {
        flex: 1;
        gap: 2rem;
    }

    .todos-agenda-list {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .todos-agenda-section-title {
        margin-bottom: 0.85rem;
        font-size: 0.75rem;
    }

    .todos-agenda-item {
        padding: 1.15rem 1.35rem;
        border-radius: 1.25rem;
    }

    .todos-agenda-item:hover {
        border-color: rgba(148, 163, 184, 0.28);
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    }

    .todos-agenda-item.is-desktop.is-expanded {
        border-color: rgba(0, 166, 251, 0.22);
        background: rgba(15, 23, 42, 0.72);
    }

    .todos-agenda-row {
        gap: 1rem;
        align-items: flex-start;
    }

    .todos-agenda-quick {
        display: flex;
    }

    .todos-agenda-body {
        cursor: default;
        flex: 1;
        min-width: 0;
    }

    .todos-agenda-title {
        font-size: 1rem;
        line-height: 1.4;
    }

    .todos-agenda-meta {
        margin-top: 0.75rem;
        font-size: 0.75rem;
    }

    .todos-agenda-detail {
        margin-top: 1rem;
        padding-top: 1rem;
    }

    .todos-agenda-item.is-desktop .todos-agenda-meta .todo-assignee {
        display: none;
    }

    .todos-agenda-item.is-desktop .todos-agenda-actions {
        display: none;
    }

    .todos-agenda-kv {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem 1.25rem;
    }

    .todos-agenda-notes-full {
        margin-top: 0.5rem;
    }

    .todos-page .todos-empty {
        min-height: 18rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 5rem 2rem;
    }
}

@media (min-width: 1280px) {
    .todos-cal-body {
        grid-template-columns: minmax(280px, 20rem) minmax(0, 1fr);
    }

    .todos-cal-main {
        padding: 2rem 2.5rem 3rem;
    }

    .todos-agenda-list {
        gap: 1.1rem;
    }
}

@media (min-width: 1536px) {
    .todos-cal-body {
        grid-template-columns: minmax(300px, 22rem) minmax(0, 1fr);
    }
}

/* ── Verkaufsrechnung & Rechnungsdetail — Dark Mode ── */
body.crm-admin--dark .crm-admin-page:has(.crm-inv-page) .crm-admin-page-title {
    display: none;
}

body.crm-admin--dark .crm-admin-main .crm-inv-page .si-payment-summary {
    border-color: rgba(16, 185, 129, 0.28) !important;
    background: rgba(6, 78, 59, 0.28) !important;
    box-shadow: inset 0 1px 0 rgba(16, 185, 129, 0.08);
}

body.crm-admin--dark .crm-admin-main .crm-inv-page .si-discount-panel {
    border-color: rgba(14, 165, 233, 0.28) !important;
    background: rgba(8, 47, 73, 0.45) !important;
    box-shadow: inset 0 1px 0 rgba(14, 165, 233, 0.08);
    --tw-ring-color: rgba(14, 165, 233, 0.12) !important;
}

body.crm-admin--dark .crm-admin-main .crm-inv-page .si-installment-panel,
body.crm-admin--dark .crm-admin-main .crm-inv-page .si-installment-info {
    border-color: rgba(139, 92, 246, 0.28) !important;
    background: rgba(46, 16, 101, 0.38) !important;
    box-shadow: inset 0 1px 0 rgba(139, 92, 246, 0.08);
    --tw-ring-color: rgba(139, 92, 246, 0.12) !important;
}

body.crm-admin--dark .crm-admin-main .crm-inv-page .si-installment-scheduled {
    border-color: rgba(245, 158, 11, 0.28) !important;
    background: rgba(69, 26, 3, 0.38) !important;
    box-shadow: inset 0 1px 0 rgba(245, 158, 11, 0.08);
    --tw-ring-color: rgba(245, 158, 11, 0.12) !important;
}

body.crm-admin--dark .crm-admin-main .crm-inv-page .si-discount-panel .text-sky-300 {
    color: #7dd3fc !important;
}

body.crm-admin--dark .crm-admin-main .crm-inv-page .si-installment-panel .text-violet-200,
body.crm-admin--dark .crm-admin-main .crm-inv-page .si-installment-info .text-violet-200 {
    color: #ddd6fe !important;
}

body.crm-admin--dark .crm-admin-main .crm-inv-page .si-main-card {
    border-color: rgba(148, 163, 184, 0.22) !important;
    background: rgba(15, 23, 42, 0.88) !important;
    box-shadow: 0 16px 48px -20px rgba(0, 0, 0, 0.55) !important;
    --tw-ring-color: rgba(148, 163, 184, 0.12) !important;
}

body.crm-admin--dark .crm-admin-main .crm-inv-page .bg-white:not([class*='from-emerald-6']):not([class*='to-teal-6']) {
    background-color: rgba(15, 23, 42, 0.82) !important;
}

/* Helle Gradient-Karten → dunkle Flächen (Buttons mit -600 behalten Verlauf) */
body.crm-admin--dark .crm-admin-main .crm-inv-page [class*='from-slate-50'],
body.crm-admin--dark .crm-admin-main .crm-inv-page [class*='from-amber-50'],
body.crm-admin--dark .crm-admin-main .crm-inv-page [class*='from-emerald-50'],
body.crm-admin--dark .crm-admin-main .crm-inv-page [class*='from-teal-50'],
body.crm-admin--dark .crm-admin-main .crm-inv-page [class*='from-indigo-50'],
body.crm-admin--dark .crm-admin-main .crm-inv-page [class*='from-yellow-50'],
body.crm-admin--dark .crm-admin-main .crm-inv-page [class*='to-yellow-50'],
body.crm-admin--dark .crm-admin-main .crm-inv-page [class*='to-orange-50'],
body.crm-admin--dark .crm-admin-main .crm-inv-page [class*='to-sky-50'],
body.crm-admin--dark .crm-admin-main .crm-inv-page [class*='to-teal-50'],
body.crm-admin--dark .crm-admin-main .crm-inv-page [class*='to-emerald-50'],
body.crm-admin--dark .crm-admin-main .crm-inv-page [class*='to-violet-50'],
body.crm-admin--dark .crm-admin-main .crm-inv-page [class*='via-white'] {
    background-image: none !important;
}

body.crm-admin--dark .crm-admin-main .crm-inv-page [class*='from-slate-50'] {
    background-color: rgba(15, 23, 42, 0.72) !important;
}

body.crm-admin--dark .crm-admin-main .crm-inv-page [class*='from-amber-50'],
body.crm-admin--dark .crm-admin-main .crm-inv-page [class*='to-yellow-50'],
body.crm-admin--dark .crm-admin-main .crm-inv-page [class*='to-orange-50'] {
    background-color: rgba(120, 53, 15, 0.32) !important;
}

body.crm-admin--dark .crm-admin-main .crm-inv-page [class*='from-emerald-50'],
body.crm-admin--dark .crm-admin-main .crm-inv-page [class*='to-teal-50'],
body.crm-admin--dark .crm-admin-main .crm-inv-page [class*='to-emerald-50'] {
    background-color: rgba(6, 78, 59, 0.32) !important;
}

body.crm-admin--dark .crm-admin-main .crm-inv-page [class*='from-teal-50'] {
    background-color: rgba(17, 94, 89, 0.32) !important;
}

body.crm-admin--dark .crm-admin-main .crm-inv-page [class*='from-indigo-50'],
body.crm-admin--dark .crm-admin-main .crm-inv-page [class*='to-violet-50'] {
    background-color: rgba(49, 46, 129, 0.32) !important;
}

body.crm-admin--dark .crm-admin-main .crm-inv-page .bg-amber-50\/70,
body.crm-admin--dark .crm-admin-main .crm-inv-page .bg-amber-50\/80,
body.crm-admin--dark .crm-admin-main .crm-inv-page .bg-amber-50\/90 {
    background-color: rgba(120, 53, 15, 0.32) !important;
}

body.crm-admin--dark .crm-admin-main .crm-inv-page .bg-amber-100,
body.crm-admin--dark .crm-admin-main .crm-inv-page .bg-amber-100\/60 {
    background-color: rgba(120, 53, 15, 0.42) !important;
}

body.crm-admin--dark .crm-admin-main .crm-inv-page .bg-teal-50,
body.crm-admin--dark .crm-admin-main .crm-inv-page .bg-teal-50\/95 {
    background-color: rgba(17, 94, 89, 0.32) !important;
}

body.crm-admin--dark .crm-admin-main .crm-inv-page .bg-slate-50,
body.crm-admin--dark .crm-admin-main .crm-inv-page .bg-slate-50\/50,
body.crm-admin--dark .crm-admin-main .crm-inv-page .bg-slate-50\/60 {
    background-color: rgba(30, 41, 59, 0.45) !important;
}

body.crm-admin--dark .crm-admin-main .crm-inv-page .bg-white\/80,
body.crm-admin--dark .crm-admin-main .crm-inv-page .bg-white\/90 {
    background-color: rgba(30, 41, 59, 0.55) !important;
}

body.crm-admin--dark .crm-admin-main .crm-inv-page .bg-slate-100,
body.crm-admin--dark .crm-admin-main .crm-inv-page .bg-slate-100\/90 {
    background-color: rgba(30, 41, 59, 0.72) !important;
}

body.crm-admin--dark .crm-admin-main .crm-inv-page .text-teal-950,
body.crm-admin--dark .crm-admin-main .crm-inv-page .text-teal-900,
body.crm-admin--dark .crm-admin-main .crm-inv-page .text-teal-900\/90 {
    color: #99f6e4 !important;
}

body.crm-admin--dark .crm-admin-main .crm-inv-page .text-teal-800 {
    color: #5eead4 !important;
}

body.crm-admin--dark .crm-admin-main .crm-inv-page .text-indigo-950,
body.crm-admin--dark .crm-admin-main .crm-inv-page .text-indigo-950\/70,
body.crm-admin--dark .crm-admin-main .crm-inv-page .text-indigo-950\/80,
body.crm-admin--dark .crm-admin-main .crm-inv-page .text-indigo-950\/85 {
    color: #c7d2fe !important;
}

body.crm-admin--dark .crm-admin-main .crm-inv-page .text-emerald-950,
body.crm-admin--dark .crm-admin-main .crm-inv-page .text-emerald-950\/75,
body.crm-admin--dark .crm-admin-main .crm-inv-page .text-emerald-950\/80,
body.crm-admin--dark .crm-admin-main .crm-inv-page .text-emerald-950\/90 {
    color: #a7f3d0 !important;
}

body.crm-admin--dark .crm-admin-main .crm-inv-page .text-amber-950,
body.crm-admin--dark .crm-admin-main .crm-inv-page .text-amber-950\/70,
body.crm-admin--dark .crm-admin-main .crm-inv-page .text-amber-950\/75,
body.crm-admin--dark .crm-admin-main .crm-inv-page .text-amber-950\/80,
body.crm-admin--dark .crm-admin-main .crm-inv-page .text-amber-900\/85 {
    color: #fde68a !important;
}

body.crm-admin--dark .crm-admin-main .crm-inv-page .text-slate-900,
body.crm-admin--dark .crm-admin-main .crm-inv-page .text-slate-800,
body.crm-admin--dark .crm-admin-main .crm-inv-page .text-slate-700 {
    color: #e2e8f0 !important;
}

body.crm-admin--dark .crm-admin-main .crm-inv-page .text-slate-800 strong,
body.crm-admin--dark .crm-admin-main .crm-inv-page strong.text-slate-800,
body.crm-admin--dark .crm-admin-main .crm-inv-page strong.text-slate-900 {
    color: #f1f5f9 !important;
}

body.crm-admin--dark .crm-admin-main .crm-inv-page .border-slate-100,
body.crm-admin--dark .crm-admin-main .crm-inv-page .border-slate-200,
body.crm-admin--dark .crm-admin-main .crm-inv-page .border-slate-200\/90,
body.crm-admin--dark .crm-admin-main .crm-inv-page .border-slate-300,
body.crm-admin--dark .crm-admin-main .crm-inv-page .divide-slate-100,
body.crm-admin--dark .crm-admin-main .crm-inv-page .divide-slate-200,
body.crm-admin--dark .crm-admin-main .crm-inv-page .border-indigo-100,
body.crm-admin--dark .crm-admin-main .crm-inv-page .border-indigo-100\/80,
body.crm-admin--dark .crm-admin-main .crm-inv-page .border-emerald-100,
body.crm-admin--dark .crm-admin-main .crm-inv-page .border-emerald-100\/80,
body.crm-admin--dark .crm-admin-main .crm-inv-page .border-emerald-100\/90,
body.crm-admin--dark .crm-admin-main .crm-inv-page .border-amber-100,
body.crm-admin--dark .crm-admin-main .crm-inv-page .border-amber-100\/80,
body.crm-admin--dark .crm-admin-main .crm-inv-page .border-amber-100\/90,
body.crm-admin--dark .crm-admin-main .crm-inv-page .border-teal-100,
body.crm-admin--dark .crm-admin-main .crm-inv-page .border-teal-100\/80 {
    border-color: rgba(148, 163, 184, 0.18) !important;
}

body.crm-admin--dark .crm-admin-main .crm-inv-page .hover\:bg-slate-50\/80:hover,
body.crm-admin--dark .crm-admin-main .crm-inv-page .hover\:bg-slate-50:hover {
    background-color: rgba(0, 166, 251, 0.08) !important;
}

body.crm-admin--dark .crm-admin-main .crm-inv-page .hover\:bg-amber-50:hover,
body.crm-admin--dark .crm-admin-main .crm-inv-page .hover\:bg-amber-100:hover,
body.crm-admin--dark .crm-admin-main .crm-inv-page .hover\:bg-amber-200:hover {
    background-color: rgba(251, 191, 36, 0.16) !important;
}

body.crm-admin--dark .crm-admin-main .crm-inv-page .hover\:bg-indigo-50\/80:hover {
    background-color: rgba(99, 102, 241, 0.16) !important;
}

body.crm-admin--dark .crm-admin-main .crm-inv-page .hover\:bg-teal-100:hover {
    background-color: rgba(45, 212, 191, 0.16) !important;
}

body.crm-admin--dark .crm-admin-main .crm-inv-page .hover\:bg-emerald-100\/90:hover {
    background-color: rgba(16, 185, 129, 0.18) !important;
}

body.crm-admin--dark .crm-admin-main .crm-inv-page .hover\:bg-red-100:hover {
    background-color: rgba(239, 68, 68, 0.16) !important;
}

body.crm-admin--dark .crm-admin-main .crm-inv-page .hover\:bg-sky-50\/60:hover {
    background-color: rgba(14, 165, 233, 0.12) !important;
}

body.crm-admin--dark .crm-admin-main .crm-inv-page table thead {
    background-color: rgba(30, 41, 59, 0.85) !important;
}

body.crm-admin--dark .crm-admin-main .crm-inv-page .si-notes {
    border-color: rgba(251, 191, 36, 0.28) !important;
    background: rgba(120, 53, 15, 0.28) !important;
    background-image: none !important;
    box-shadow: inset 0 1px 0 rgba(251, 191, 36, 0.08) !important;
    --tw-ring-color: rgba(251, 191, 36, 0.2) !important;
}

body.crm-admin--dark .crm-admin-main .crm-inv-page .si-notes-item {
    border-color: rgba(251, 191, 36, 0.22) !important;
    background-color: rgba(15, 23, 42, 0.65) !important;
}

body.crm-admin--dark .crm-admin-main .crm-inv-page .si-notes-input {
    border-color: rgba(251, 191, 36, 0.28) !important;
    background-color: rgba(15, 23, 42, 0.75) !important;
    color: #f1f5f9 !important;
}

body.crm-admin--dark .crm-admin-main .crm-inv-page .si-notes-input::placeholder {
    color: #64748b !important;
}

body.crm-admin--dark .crm-admin-main .crm-inv-page .si-notes-input:focus {
    border-color: rgba(251, 191, 36, 0.5) !important;
    --tw-ring-color: rgba(251, 191, 36, 0.2) !important;
}

body.crm-admin--dark .crm-admin-main .crm-inv-page .si-notes .text-slate-800 {
    color: #e2e8f0 !important;
}

body.crm-admin--dark .crm-admin-main .crm-inv-page .rounded-full.bg-slate-100 {
    background-color: rgba(51, 65, 85, 0.65) !important;
    color: #e2e8f0 !important;
}

body.crm-admin--dark .crm-admin-main .crm-inv-page .text-red-900 {
    color: #fecaca !important;
}

body.crm-admin--dark .crm-admin-main .crm-inv-page .shadow-inner {
    --tw-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

/* Verkaufsrechnung / Offerte: Positionszeilen im Karten-Raster halten */
.sales-pos-lines {
    max-width: 100%;
}

.sales-pos-lines .sales-line,
.sales-pos-lines .quote-line,
.sales-pos-lines .sales-pos-head {
    max-width: 100%;
}

.sales-pos-lines .sales-line > *,
.sales-pos-lines .quote-line > *,
.sales-pos-lines .sales-pos-head > * {
    min-width: 0;
}

.sales-pos-lines .sales-line input,
.sales-pos-lines .sales-line select,
.sales-pos-lines .quote-line input,
.sales-pos-lines .quote-line select {
    max-width: 100%;
}

/* ── Admin: Neues Ticket (ticket_new.php) ─────────────────────────────── */
.ticket-new-page {
    max-width: 52rem;
}

.ticket-new-page .tn-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 640px) {
    .ticket-new-page .tn-form {
        gap: 1.25rem;
    }
}

.ticket-new-page .tn-section {
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(15, 23, 42, 0.72);
    padding: 1.15rem 1.2rem;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

@media (min-width: 640px) {
    .ticket-new-page .tn-section {
        padding: 1.35rem 1.5rem;
    }
}

.ticket-new-page .tn-section__head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #f1f5f9;
}

.ticket-new-page .tn-section__icon {
    display: flex;
    height: 2rem;
    width: 2rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.65rem;
    background: rgba(0, 166, 251, 0.15);
    font-size: 0.9rem;
}

.ticket-new-page .tn-section__lead {
    margin-bottom: 1rem;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: #94a3b8;
}

.ticket-new-page .tn-section__lead strong {
    color: #cbd5e1;
    font-weight: 600;
}

.ticket-new-page .tn-grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 900px) {
    .ticket-new-page .tn-grid-top {
        grid-template-columns: 1.15fr 0.85fr;
        align-items: stretch;
    }

    .ticket-new-page .tn-grid-top > .tn-section {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .ticket-new-page .tn-grid-top > .tn-section .tn-type-grid,
    .ticket-new-page .tn-grid-top > .tn-section--priority .tn-priority-row {
        flex: 1;
    }
}

/* Ticket-Typ: gleich hohe Kacheln */
.ticket-new-page .tn-type-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
    align-items: stretch;
}

@media (min-width: 520px) {
    .ticket-new-page .tn-type-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.ticket-new-page .ticket-type-card {
    display: flex;
    min-width: 0;
    margin: 0;
    cursor: pointer;
}

.ticket-new-page .ticket-type-card .tn-choice__inner {
    flex: 1;
    width: 100%;
    min-height: 6.25rem;
    align-items: flex-start;
}

.ticket-new-page .tn-choice__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    justify-content: flex-start;
}

.ticket-new-page .tn-choice__inner.is-active-repair .tn-choice__badge {
    background: rgba(0, 166, 251, 0.22);
    box-shadow: 0 0 0 1px rgba(0, 166, 251, 0.35);
}

.ticket-new-page .tn-choice__inner.is-active-onsite .tn-choice__badge {
    background: rgba(52, 211, 153, 0.2);
    box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.35);
}

.ticket-new-page .tn-choice__inner.is-inactive .tn-choice__badge {
    background: rgba(255, 255, 255, 0.06);
}

.ticket-new-page .ticket-type-card:hover .tn-choice__inner.is-inactive {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(2, 6, 23, 0.55);
}

/* Priorität: volle Breite, einheitliche Buttons */
.ticket-new-page .tn-section--priority .tn-section__head {
    margin-bottom: 0.85rem;
}

.ticket-new-page .tn-section--priority .tn-priority-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
}

.ticket-new-page .tn-priority-label {
    display: block;
    cursor: pointer;
}

.ticket-new-page .tn-priority-label .tn-priority {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3rem;
    box-sizing: border-box;
}

.ticket-new-page .tn-priority-dot {
    flex-shrink: 0;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.9;
}

.ticket-new-page .tn-priority-sub {
    font-weight: 500;
    opacity: 0.8;
}

.ticket-new-page .tn-priority--urgent {
    color: #fca5a5;
    border-color: rgba(248, 113, 113, 0.45) !important;
}

.ticket-new-page .tn-priority--urgent.active-urgent {
    color: #fff !important;
}

.ticket-new-page .tn-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #cbd5e1;
}

.ticket-new-page .tn-label span.tn-muted,
.ticket-new-page .tn-muted {
    font-weight: 400;
    color: #64748b;
}

.ticket-new-page #onsite-addr-suggestions {
    background: rgba(15, 23, 42, 0.98);
    border-color: rgba(255, 255, 255, 0.12);
}

.ticket-new-page .tn-input,
.ticket-new-page .tn-select,
.ticket-new-page .tn-textarea {
    margin-top: 0.45rem;
    width: 100%;
    border-radius: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(2, 6, 23, 0.55);
    color: #f1f5f9;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ticket-new-page .tn-input,
.ticket-new-page .tn-select {
    min-height: 3rem;
    padding: 0.65rem 1rem;
}

.ticket-new-page .tn-textarea {
    padding: 0.75rem 1rem;
    line-height: 1.5;
    resize: vertical;
}

.ticket-new-page .tn-input::placeholder,
.ticket-new-page .tn-textarea::placeholder {
    color: #64748b;
}

.ticket-new-page .tn-input:focus,
.ticket-new-page .tn-select:focus,
.ticket-new-page .tn-textarea:focus {
    border-color: rgba(0, 166, 251, 0.55);
    box-shadow: 0 0 0 3px rgba(0, 166, 251, 0.18);
}

.ticket-new-page .tn-hint {
    margin-top: 0.35rem;
    font-size: 0.75rem;
    color: #64748b;
}

.ticket-new-page .tn-choice__inner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border-radius: 0.85rem;
    border: 2px solid rgba(255, 255, 255, 0.1);
    background: rgba(2, 6, 23, 0.45);
    padding: 1rem;
    box-sizing: border-box;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.ticket-new-page .tn-choice__inner.is-active-repair {
    border-color: #00a6fb;
    background: rgba(0, 166, 251, 0.12);
    box-shadow: 0 0 0 1px rgba(0, 166, 251, 0.25), 0 8px 20px rgba(0, 166, 251, 0.12);
}

.ticket-new-page .tn-choice__inner.is-active-onsite {
    border-color: #34d399;
    background: rgba(52, 211, 153, 0.1);
    box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.22), 0 8px 20px rgba(52, 211, 153, 0.1);
}

.ticket-new-page .tn-choice__inner.is-inactive {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(2, 6, 23, 0.35);
}

.ticket-new-page .tn-choice__title {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    color: #f1f5f9;
}

.ticket-new-page .tn-choice__desc {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.75rem;
    line-height: 1.5;
    color: #94a3b8;
    min-height: 2.25rem;
}

.ticket-new-page .tn-choice__badge {
    display: flex;
    height: 2.25rem;
    width: 2.25rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.65rem;
    font-size: 1.05rem;
}

.ticket-new-page .tn-priority-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.ticket-new-page .tn-priority {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.85rem;
    border: 2px solid rgba(255, 255, 255, 0.12);
    padding: 0.65rem 1.1rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ticket-new-page .tn-section--contact {
    border-color: rgba(45, 212, 191, 0.28);
    background: rgba(15, 23, 42, 0.82);
}

.ticket-new-page .tn-section--contact .tn-section__icon {
    background: rgba(20, 184, 166, 0.2);
}

.ticket-new-page .tn-contact-box {
    display: flex;
    cursor: pointer;
    align-items: flex-start;
    gap: 0.85rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(45, 212, 191, 0.25);
    background: rgba(2, 6, 23, 0.45);
    padding: 0.9rem 1rem;
    transition: border-color 0.15s ease;
}

.ticket-new-page .tn-contact-box:hover {
    border-color: rgba(45, 212, 191, 0.45);
}

.ticket-new-page .tn-contact-box strong {
    color: #5eead4;
}

.ticket-new-page .tn-section--onsite {
    border-color: rgba(52, 211, 153, 0.28);
}

.ticket-new-page .tn-section--onsite .tn-section__icon {
    background: rgba(16, 185, 129, 0.25);
    color: #fff;
}

.ticket-new-page .tn-section--defects {
    border-color: rgba(251, 113, 133, 0.28);
}

.ticket-new-page .tn-section--defects .tn-section__icon {
    background: rgba(244, 63, 94, 0.2);
}

.ticket-new-page .tn-rack-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
}

@media (min-width: 640px) {
    .ticket-new-page .tn-rack-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.ticket-new-page .tn-rack-opt {
    display: flex;
    cursor: pointer;
    align-items: flex-start;
    gap: 0.65rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(2, 6, 23, 0.4);
    padding: 0.75rem 0.85rem;
    transition: border-color 0.15s ease;
}

.ticket-new-page .tn-rack-opt:hover {
    border-color: rgba(0, 166, 251, 0.35);
}

.ticket-new-page .tn-rack-opt:has(input:checked) {
    border-color: rgba(0, 166, 251, 0.5);
    background: rgba(0, 166, 251, 0.1);
}

.ticket-new-page .tn-rack-opt--violet:has(input:checked) {
    border-color: rgba(167, 139, 250, 0.5);
    background: rgba(139, 92, 246, 0.12);
}

.ticket-new-page .tn-customer-pill {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(56, 189, 248, 0.35);
    background: rgba(0, 166, 251, 0.08);
    padding: 0.85rem 1rem;
}

.ticket-new-page .tn-customer-pill .font-semibold,
.ticket-new-page .tn-customer-pill #selectedName {
    color: #f1f5f9;
}

.ticket-new-page .tn-customer-pill .text-slate-500,
.ticket-new-page .tn-customer-pill #selectedEmail {
    color: #94a3b8;
}

.ticket-new-page .tn-customer-pill a {
    color: #7dd3fc;
    font-size: 0.8125rem;
    font-weight: 600;
}

.ticket-new-page .tn-customer-pill a:hover {
    color: #38bdf8;
}

.ticket-new-page .tn-customer-avatar {
    display: flex;
    height: 2.5rem;
    width: 2.5rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.65rem;
    background: linear-gradient(135deg, #0ea5e9, #1d4ed8);
    font-size: 0.875rem;
    font-weight: 700;
    color: #fff;
}

.ticket-new-page .tn-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 50;
    margin-top: 0.25rem;
    max-height: 16rem;
    overflow: auto;
    border-radius: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(15, 23, 42, 0.98);
    padding: 0.25rem 0;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.ticket-new-page .tn-dropdown__item {
    display: flex;
    cursor: pointer;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    transition: background 0.12s ease;
}

.ticket-new-page .tn-dropdown__item:hover,
.ticket-new-page .tn-dropdown__item:focus {
    background: rgba(0, 166, 251, 0.12);
    outline: none;
}

.ticket-new-page .tn-dropzone {
    display: flex;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0.85rem;
    border: 2px dashed rgba(255, 255, 255, 0.15);
    background: rgba(2, 6, 23, 0.35);
    padding: 1.5rem 1rem;
    font-size: 0.875rem;
    color: #94a3b8;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.ticket-new-page .tn-dropzone.is-dragover {
    border-color: #00a6fb;
    background: rgba(0, 166, 251, 0.08);
}

.ticket-new-page .tn-defect-row {
    border-radius: 0.85rem;
    border: 1px solid rgba(251, 113, 133, 0.2);
    background: rgba(2, 6, 23, 0.4);
    padding: 0.85rem 1rem;
}

.ticket-new-page .tn-section--vault {
    border-color: rgba(255, 255, 255, 0.08);
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9));
}

.ticket-new-page .tn-vault-pick {
    display: flex;
    cursor: pointer;
    align-items: flex-start;
    gap: 0.75rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(45, 212, 191, 0.25);
    background: rgba(2, 6, 23, 0.45);
    padding: 0.75rem 1rem;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.ticket-new-page .tn-vault-pick:hover {
    border-color: rgba(45, 212, 191, 0.45);
    background: rgba(20, 184, 166, 0.08);
}

.ticket-new-page .tn-vault-pick:has(input:checked) {
    border-color: rgba(45, 212, 191, 0.55);
    background: rgba(20, 184, 166, 0.12);
}

.ticket-new-page .tn-fields-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 640px) {
    .ticket-new-page .tn-fields-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ticket-new-page .tn-fields-grid .tn-span-2 {
        grid-column: 1 / -1;
    }
}

.ticket-new-page .tn-alert {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(248, 113, 113, 0.35);
    background: rgba(127, 29, 29, 0.35);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #fecaca;
}

.ticket-new-page .tn-submit {
    width: 100%;
    border-radius: 0.85rem;
    background: linear-gradient(135deg, #00a6fb, #0582ca);
    padding: 1rem 1.25rem;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 166, 251, 0.28);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.ticket-new-page .tn-submit:hover {
    box-shadow: 0 12px 28px rgba(0, 166, 251, 0.38);
}

.ticket-new-page .tn-submit:active {
    transform: scale(0.99);
}

/* Legacy-Klassen in ticket_new.php neutralisieren (Dark Mode) */
body.crm-admin--dark .ticket-new-page section.rounded-3xl {
    border-radius: 1rem !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    background: rgba(15, 23, 42, 0.72) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22) !important;
}

body.crm-admin--dark .ticket-new-page .bg-gradient-to-br {
    background: rgba(15, 23, 42, 0.82) !important;
    background-image: none !important;
}

body.crm-admin--dark .ticket-new-page h2.text-compiaz-navy,
body.crm-admin--dark .ticket-new-page .text-compiaz-navy {
    color: #f1f5f9 !important;
}

body.crm-admin--dark .ticket-new-page .text-slate-900,
body.crm-admin--dark .ticket-new-page .text-emerald-950,
body.crm-admin--dark .ticket-new-page .text-teal-950,
body.crm-admin--dark .ticket-new-page .text-rose-950,
body.crm-admin--dark .ticket-new-page .text-violet-950 {
    color: #f1f5f9 !important;
}

body.crm-admin--dark .ticket-new-page .text-slate-600,
body.crm-admin--dark .ticket-new-page .text-slate-500,
body.crm-admin--dark .ticket-new-page .text-slate-400,
body.crm-admin--dark .ticket-new-page .text-rose-900\/75,
body.crm-admin--dark .ticket-new-page .text-violet-900\/85 {
    color: #94a3b8 !important;
}

body.crm-admin--dark .ticket-new-page .bg-sky-50\/60,
body.crm-admin--dark .ticket-new-page .bg-slate-50\/60,
body.crm-admin--dark .ticket-new-page .bg-emerald-50\/60,
body.crm-admin--dark .ticket-new-page .bg-violet-50\/50,
body.crm-admin--dark .ticket-new-page .bg-white\/90,
body.crm-admin--dark .ticket-new-page label.bg-white\/90 {
    background: rgba(2, 6, 23, 0.45) !important;
}

body.crm-admin--dark .ticket-new-page .border-slate-200,
body.crm-admin--dark .ticket-new-page .border-teal-200,
body.crm-admin--dark .ticket-new-page .border-teal-200\/80,
body.crm-admin--dark .ticket-new-page .border-emerald-200,
body.crm-admin--dark .ticket-new-page .border-violet-200,
body.crm-admin--dark .ticket-new-page .border-rose-100 {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Ticket-Detail: Laden-Druck oben neben Status */
.crm-ticket-print-btn {
    text-decoration: none;
    white-space: nowrap;
}

.crm-ticket-print-btn:focus-visible {
    outline: 2px solid rgba(56, 189, 248, 0.65);
    outline-offset: 2px;
}

/* Ticket-Infokacheln (Gerät, Seriennummer, …) – Desktop: Text bleibt in der Kachel */
.crm-ticket-info-grid > .crm-ticket-info-tile {
    min-width: 0;
    overflow: hidden;
}

.crm-ticket-info-tile__value {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.crm-ticket-info-tile__value--mono {
    word-break: break-all;
}

.crm-ticket-info-tile__meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .crm-ticket-info-tile__value {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .crm-ticket-info-tile__value--mono {
        -webkit-line-clamp: 3;
    }
}

.crm-ticket-meta-tiles {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .crm-ticket-meta-tiles {
        flex-direction: row;
        align-items: stretch;
    }

    .crm-ticket-meta-tiles > .crm-ticket-meta-glass,
    .crm-ticket-meta-tiles > .crm-ticket-onsite-glass,
    .crm-ticket-meta-tiles > .crm-ticket-laden-glass {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
    }
}

.crm-ticket-meta-glass,
.crm-ticket-onsite-glass,
.crm-ticket-laden-glass {
    overflow: hidden;
    border-radius: 1rem;
    padding: 0.75rem 0.85rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.crm-ticket-meta-glass {
    border: 1px solid rgba(56, 189, 248, 0.28);
    background:
        linear-gradient(145deg, rgba(14, 165, 233, 0.16) 0%, rgba(30, 58, 138, 0.12) 42%, rgba(15, 23, 42, 0.55) 100%);
    box-shadow:
        0 10px 28px rgba(30, 58, 138, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.crm-ticket-meta-glass__icon {
    display: flex;
    height: 2rem;
    width: 2rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.65rem;
    background: rgba(14, 165, 233, 0.22);
    font-size: 0.95rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 0 0 1px rgba(56, 189, 248, 0.22);
}

.crm-ticket-meta-glass__kicker {
    margin: 0;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(186, 230, 253, 0.92);
    line-height: 1.35;
}

.crm-ticket-meta-glass__ref {
    margin: 0.35rem 0 0;
    font-size: 0.98rem;
    font-weight: 800;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    color: #f8fafc;
    line-height: 1.2;
}

.crm-ticket-meta-glass__sub {
    margin: 0.12rem 0 0;
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(186, 230, 253, 0.82);
    line-height: 1.35;
}

.crm-ticket-meta-glass__hint {
    color: rgba(148, 163, 184, 0.9);
    font-weight: 700;
}

.crm-ticket-meta-glass__slot {
    display: inline-flex;
    min-width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.65rem;
    background: rgba(15, 23, 42, 0.55);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.82rem;
    font-weight: 800;
    color: #f8fafc;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.crm-ticket-meta-glass__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.65rem;
}

.crm-ticket-meta-glass__pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.18rem 0.55rem;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.3;
}

.crm-ticket-meta-glass__pill--topic {
    background: rgba(14, 165, 233, 0.2);
    color: #e0f2fe;
    box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.25);
}

.crm-ticket-meta-glass__pill--normal {
    background: rgba(100, 116, 139, 0.28);
    color: #e2e8f0;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.25);
}

.crm-ticket-meta-glass__pill--urgent {
    background: rgba(239, 68, 68, 0.2);
    color: #fecaca;
    box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.3);
}

.crm-ticket-meta-glass__pill--sky {
    background: rgba(14, 165, 233, 0.16);
    color: #bae6fd;
    box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.22);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.crm-ticket-laden-glass {
    border: 1px solid rgba(56, 189, 248, 0.32);
    background:
        linear-gradient(145deg, rgba(37, 99, 235, 0.18) 0%, rgba(30, 64, 175, 0.12) 42%, rgba(15, 23, 42, 0.55) 100%);
    box-shadow:
        0 10px 28px rgba(30, 64, 175, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.crm-ticket-laden-glass__icon {
    display: flex;
    height: 2rem;
    width: 2rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.65rem;
    background: rgba(59, 130, 246, 0.22);
    font-size: 0.95rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 0 0 1px rgba(96, 165, 250, 0.22);
}

.crm-ticket-laden-glass__kicker {
    margin: 0;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(191, 219, 254, 0.92);
    line-height: 1.35;
}

.crm-ticket-laden-glass__date {
    margin: 0.35rem 0 0;
    font-size: 0.92rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #f8fafc;
    line-height: 1.2;
}

.crm-ticket-laden-glass__time {
    margin: 0.12rem 0 0;
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(191, 219, 254, 0.88);
    line-height: 1.3;
}

.crm-ticket-onsite-glass {
    border: 1px solid rgba(52, 211, 153, 0.28);
    background:
        linear-gradient(145deg, rgba(16, 185, 129, 0.18) 0%, rgba(6, 78, 59, 0.12) 42%, rgba(15, 23, 42, 0.55) 100%);
    box-shadow:
        0 10px 28px rgba(6, 78, 59, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.crm-ticket-onsite-glass.is-cancelled {
    border-color: rgba(248, 113, 113, 0.35);
    background:
        linear-gradient(145deg, rgba(239, 68, 68, 0.14) 0%, rgba(127, 29, 29, 0.12) 42%, rgba(15, 23, 42, 0.55) 100%);
    box-shadow: 0 10px 28px rgba(127, 29, 29, 0.18);
}

.crm-ticket-onsite-glass__icon {
    display: flex;
    height: 2rem;
    width: 2rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.65rem;
    background: rgba(16, 185, 129, 0.22);
    font-size: 0.95rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 0 0 1px rgba(52, 211, 153, 0.22);
}

.crm-ticket-onsite-glass.is-cancelled .crm-ticket-onsite-glass__icon {
    background: rgba(239, 68, 68, 0.2);
}

.crm-ticket-onsite-glass__kicker {
    margin: 0;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(167, 243, 208, 0.92);
    line-height: 1.35;
}

.crm-ticket-onsite-glass__date {
    margin: 0.35rem 0 0;
    font-size: 0.92rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #f8fafc;
    line-height: 1.2;
}

.crm-ticket-onsite-glass__time {
    margin: 0.12rem 0 0;
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(209, 250, 229, 0.88);
    line-height: 1.3;
}

.crm-ticket-onsite-glass__status {
    margin: 0.55rem 0 0;
    border-radius: 0.55rem;
    padding: 0.28rem 0.5rem;
    text-align: center;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.crm-ticket-onsite-glass__status.is-cancelled {
    background: rgba(239, 68, 68, 0.18);
    color: #fecaca;
}

.crm-ticket-onsite-glass__cancel {
    display: block;
    width: 100%;
    margin-top: 0.55rem;
    border: 1px solid rgba(239, 68, 68, 0.45);
    border-radius: 0.55rem;
    background: rgba(220, 38, 38, 0.92);
    padding: 0.35rem 0.5rem;
    font-size: 0.68rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.crm-ticket-onsite-glass__cancel:hover {
    background: rgba(239, 68, 68, 1);
    border-color: rgba(252, 165, 165, 0.55);
}

.crm-ticket-onsite-glass__cancel:focus-visible {
    outline: 2px solid rgba(248, 113, 113, 0.65);
    outline-offset: 2px;
}

/* ── Admin CI: Kundenanfragen (Dashboard, FW-Detail, Portal-Ticket) ───── */
.crm-ci-inbox {
    margin-bottom: 1.5rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(15, 23, 42, 0.72);
    padding: 1.15rem 1.25rem;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

.crm-ci-inbox--tickets {
    border-color: rgba(0, 166, 251, 0.32);
    background: linear-gradient(145deg, rgba(0, 53, 84, 0.42) 0%, rgba(15, 23, 42, 0.88) 55%);
}

.crm-ci-inbox--fernwartung {
    border-color: rgba(251, 146, 60, 0.32);
    background: linear-gradient(145deg, rgba(120, 53, 15, 0.35) 0%, rgba(15, 23, 42, 0.88) 55%);
}

.crm-ci-inbox--reminders {
    border-color: rgba(167, 139, 250, 0.28);
    background: linear-gradient(145deg, rgba(76, 29, 149, 0.28) 0%, rgba(15, 23, 42, 0.88) 55%);
}

.crm-ci-inbox--live {
    border-color: rgba(34, 211, 238, 0.35);
    background: linear-gradient(145deg, rgba(8, 51, 68, 0.45) 0%, rgba(15, 23, 42, 0.88) 55%);
}

.crm-ci-inbox__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.crm-ci-inbox__icon {
    font-size: 1.75rem;
    line-height: 1;
    flex-shrink: 0;
}

.crm-ci-inbox__titles {
    flex: 1;
    min-width: 0;
}

.crm-ci-inbox__eyebrow {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7dd3fc;
}

.crm-ci-inbox--fernwartung .crm-ci-inbox__eyebrow {
    color: #fdba74;
}

.crm-ci-inbox--reminders .crm-ci-inbox__eyebrow {
    color: #c4b5fd;
}

.crm-ci-inbox--live .crm-ci-inbox__eyebrow {
    color: #67e8f9;
}

.crm-ci-inbox__count {
    margin: 0.2rem 0 0;
    font-size: 1.125rem;
    font-weight: 800;
    color: #f8fafc;
    letter-spacing: -0.02em;
}

.crm-ci-inbox__lead {
    margin: 0.65rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: #94a3b8;
}

.crm-ci-inbox__list {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.crm-ci-inbox__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(2, 6, 23, 0.45);
    padding: 0.65rem 0.75rem;
}

.crm-ci-inbox__item-main {
    min-width: 0;
    flex: 1;
}

.crm-ci-inbox__item-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: #f1f5f9;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-ci-inbox__item-sub {
    margin: 0.15rem 0 0;
    font-size: 0.75rem;
    color: #94a3b8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-ci-inbox__meta {
    margin: 0.35rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.crm-ci-inbox__badge {
    display: inline-flex;
    align-items: center;
    border-radius: 0.375rem;
    padding: 0.12rem 0.45rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.crm-ci-inbox__badge--type {
    background: rgba(0, 166, 251, 0.18);
    color: #bae6fd;
}

.crm-ci-inbox__badge--state {
    background: rgba(148, 163, 184, 0.15);
    color: #e2e8f0;
}

.crm-ci-inbox__badge--muted {
    background: transparent;
    color: #64748b;
    padding-left: 0;
    font-weight: 600;
}

.crm-ci-inbox__btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, #00a6fb 0%, #003554 100%);
    box-shadow: 0 4px 14px rgba(0, 166, 251, 0.28);
    transition: opacity 0.15s ease, transform 0.1s ease;
}

.crm-ci-inbox__btn:hover {
    opacity: 0.95;
}

.crm-ci-inbox__btn:active {
    transform: scale(0.98);
}

/* Detailseite: FW-Anfrage / Portal-Fall */
.crm-ci-request-page {
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}

.crm-ci-request-page .crm-ci-panel {
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(15, 23, 42, 0.72);
    padding: 1.35rem 1.5rem;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

.crm-ci-request-page .crm-ci-panel--hero {
    border-color: rgba(251, 146, 60, 0.32);
    background: linear-gradient(145deg, rgba(120, 53, 15, 0.32) 0%, rgba(15, 23, 42, 0.9) 50%);
}

.crm-ci-request-page .crm-ci-panel--portal {
    border-color: rgba(0, 166, 251, 0.32);
    background: linear-gradient(145deg, rgba(0, 53, 84, 0.38) 0%, rgba(15, 23, 42, 0.9) 50%);
}

.crm-ci-request-page .crm-ci-panel__eyebrow {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fdba74;
}

.crm-ci-request-page .crm-ci-panel--portal .crm-ci-panel__eyebrow {
    color: #7dd3fc;
}

.crm-ci-request-page .crm-ci-panel__title {
    margin: 0.35rem 0 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: #f8fafc;
    letter-spacing: -0.02em;
}

.crm-ci-request-page .crm-ci-panel__sub {
    margin: 0.35rem 0 0;
    font-size: 0.8125rem;
    color: #94a3b8;
}

.crm-ci-request-page .crm-ci-card {
    margin-top: 1rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(2, 6, 23, 0.5);
    padding: 1rem 1.1rem;
}

.crm-ci-request-page .crm-ci-card__label {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.crm-ci-request-page .crm-ci-card__value {
    margin: 0.25rem 0 0;
    font-size: 1rem;
    font-weight: 700;
    color: #f1f5f9;
}

.crm-ci-request-page .crm-ci-card__value--mono {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 0.9375rem;
    word-break: break-all;
}

.crm-ci-request-page .crm-ci-card__value--muted {
    margin-top: 0.35rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #94a3b8;
}

.crm-ci-request-page .crm-ci-card__meta-id {
    margin: 0.5rem 0 0;
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
}

.crm-ci-request-page .crm-ci-card--nested {
    margin-top: 0;
    padding: 0.85rem 0.95rem;
}

.crm-ci-request-page .crm-ci-credentials {
    margin-top: 1rem;
    display: grid;
    gap: 0.65rem;
}

@media (min-width: 480px) {
    .crm-ci-request-page .crm-ci-credentials {
        grid-template-columns: 1fr 1fr;
    }
}

.crm-ci-request-page .crm-ci-note {
    margin-top: 1rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(2, 6, 23, 0.35);
    padding: 0.85rem 1rem;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: #cbd5e1;
}

.crm-ci-request-page .crm-ci-note strong {
    color: #f1f5f9;
}

.crm-ci-request-page .crm-ci-note--warn {
    border-color: rgba(251, 191, 36, 0.35);
    background: rgba(120, 53, 15, 0.25);
    color: #fde68a;
}

.crm-ci-request-page .crm-ci-note--ok {
    border-color: rgba(52, 211, 153, 0.35);
    background: rgba(6, 78, 59, 0.25);
    color: #a7f3d0;
}

.crm-ci-request-page .crm-ci-actions {
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.crm-ci-request-page .crm-ci-btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    border-radius: 0.85rem;
    padding: 0.85rem 1rem;
    font-size: 0.875rem;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(2, 6, 23, 0.55);
    color: #e2e8f0;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.crm-ci-request-page .crm-ci-btn:hover {
    background: rgba(30, 41, 59, 0.65);
    border-color: rgba(255, 255, 255, 0.18);
}

.crm-ci-request-page .crm-ci-btn--primary {
    border: none;
    color: #fff;
    background: linear-gradient(135deg, #00a6fb 0%, #003554 100%);
    box-shadow: 0 6px 20px rgba(0, 166, 251, 0.3);
}

.crm-ci-request-page .crm-ci-btn--primary:hover {
    opacity: 0.95;
    background: linear-gradient(135deg, #00a6fb 0%, #003554 100%);
}

.crm-ci-request-page .crm-ci-hint {
    margin: 0.5rem 0 0;
    text-align: center;
    font-size: 0.6875rem;
    color: #64748b;
}

.crm-ci-request-page .crm-ci-back {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.875rem;
}

.crm-ci-request-page .crm-ci-back a {
    font-weight: 600;
    color: #38bdf8;
    text-decoration: none;
}

.crm-ci-request-page .crm-ci-back a:hover {
    text-decoration: underline;
}

/* Formulare in Portal-/Anfrage-Panels (Dark Admin) */
body.crm-admin--dark .crm-ci-panel input[type="date"],
body.crm-admin--dark .crm-ci-panel input[type="time"],
body.crm-admin--dark .crm-ci-panel input[type="text"],
body.crm-admin--dark .crm-ci-panel textarea,
body.crm-admin--dark .crm-ci-panel select {
    border-color: rgba(148, 163, 184, 0.25) !important;
    background: rgba(2, 6, 23, 0.55) !important;
    color: #f1f5f9 !important;
}

body.crm-admin--dark .crm-ci-panel label {
    color: #94a3b8 !important;
}

body.crm-admin--dark .crm-ci-panel .text-slate-500 {
    color: #64748b !important;
}

/* ── Admin: Care-Abo-Verfolgung (customer_edit.php) ───────────────────── */
.crm-ci-care-section {
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
    border-radius: 1rem;
    border: 1px solid rgba(52, 211, 153, 0.28);
    background: linear-gradient(145deg, rgba(6, 78, 59, 0.22) 0%, rgba(15, 23, 42, 0.92) 55%);
    padding: 1.35rem 1.5rem;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

.crm-ci-care-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.crm-ci-care-section__icon {
    display: flex;
    height: 3rem;
    width: 3rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #059669 0%, #0d9488 100%);
    font-size: 1.25rem;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25);
}

.crm-ci-care-section__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: #f8fafc;
}

.crm-ci-care-section__lead {
    margin: 0.35rem 0 0;
    max-width: 42rem;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: #94a3b8;
}

.crm-ci-care-section__lead a {
    color: #34d399;
    font-weight: 600;
}

.crm-ci-care-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.crm-ci-care-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(2, 6, 23, 0.55);
    padding: 1rem 1.1rem;
}

.crm-ci-care-card--active {
    border-color: rgba(52, 211, 153, 0.32);
    box-shadow: inset 3px 0 0 rgba(52, 211, 153, 0.75);
}

.crm-ci-care-card--pending {
    border-color: rgba(251, 191, 36, 0.32);
    box-shadow: inset 3px 0 0 rgba(251, 191, 36, 0.75);
}

.crm-ci-care-card--cancelled {
    border-color: rgba(248, 113, 113, 0.28);
    box-shadow: inset 3px 0 0 rgba(248, 113, 113, 0.55);
    opacity: 0.92;
}

.crm-ci-care-card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.crm-ci-care-card__identity {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    flex: 1;
}

.crm-ci-care-card__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    flex-shrink: 0;
}

.crm-ci-care-card__name {
    font-size: 1rem;
    font-weight: 700;
    color: #f1f5f9;
    letter-spacing: -0.01em;
}

.crm-ci-care-card__code {
    border-radius: 9999px;
    padding: 0.15rem 0.55rem;
    font-family: ui-monospace, monospace;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #cbd5e1;
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.crm-ci-care-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.18rem 0.55rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.crm-ci-care-badge--active {
    background: rgba(52, 211, 153, 0.18);
    color: #6ee7b7;
    border: 1px solid rgba(52, 211, 153, 0.25);
}

.crm-ci-care-badge--pending {
    background: rgba(251, 191, 36, 0.16);
    color: #fde68a;
    border: 1px solid rgba(251, 191, 36, 0.28);
}

.crm-ci-care-badge--cancelled {
    background: rgba(248, 113, 113, 0.16);
    color: #fecaca;
    border: 1px solid rgba(248, 113, 113, 0.28);
}

.crm-ci-care-badge--expired {
    background: rgba(248, 113, 113, 0.12);
    color: #fca5a5;
    border: 1px solid rgba(248, 113, 113, 0.22);
}

.crm-ci-care-badge--stripe {
    background: rgba(167, 139, 250, 0.16);
    color: #ddd6fe;
    border: 1px solid rgba(167, 139, 250, 0.28);
}

.crm-ci-care-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(15, 23, 42, 0.45);
    padding: 0.55rem;
}

@media (min-width: 640px) {
    .crm-ci-care-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.crm-ci-care-stat {
    min-width: 0;
    border-radius: 0.55rem;
    padding: 0.45rem 0.55rem;
    background: rgba(2, 6, 23, 0.35);
}

.crm-ci-care-stat__label {
    display: block;
    margin: 0;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.crm-ci-care-stat__value {
    display: block;
    margin: 0.2rem 0 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #f1f5f9;
    line-height: 1.35;
}

.crm-ci-care-stat__value--muted {
    color: #94a3b8;
    font-weight: 500;
}

.crm-ci-care-panel {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(15, 23, 42, 0.38);
    overflow: hidden;
}

.crm-ci-care-row {
    display: grid;
    grid-template-columns: minmax(5.5rem, 7.5rem) minmax(0, 1fr);
    gap: 0.65rem;
    align-items: start;
    padding: 0.65rem 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #cbd5e1;
}

.crm-ci-care-row:first-child {
    border-top: none;
}

.crm-ci-care-row__label {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
    padding-top: 0.1rem;
}

.crm-ci-care-row__body {
    margin: 0;
    min-width: 0;
}

.crm-ci-care-row__body strong {
    color: #f1f5f9;
    font-weight: 600;
}

.crm-ci-care-row__body a {
    color: #34d399;
    font-weight: 600;
}

.crm-ci-care-row__sub {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: #94a3b8;
    line-height: 1.45;
}

.crm-ci-care-row__mono {
    font-family: ui-monospace, monospace;
    font-size: 0.6875rem;
    color: #64748b;
    word-break: break-all;
}

.crm-ci-care-row--accent-ok .crm-ci-care-row__label {
    color: #6ee7b7;
}

.crm-ci-care-row--accent-warn .crm-ci-care-row__label {
    color: #fde68a;
}

.crm-ci-care-row--accent-info .crm-ci-care-row__label {
    color: #7dd3fc;
}

.crm-ci-care-row--accent-muted .crm-ci-care-row__label {
    color: #94a3b8;
}

.crm-ci-care-row--empty {
    border-top-style: dashed;
    background: rgba(2, 6, 23, 0.22);
}

.crm-ci-care-inline-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.45rem;
}

.crm-ci-care-form-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.65rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.45);
    padding: 0.75rem 0.85rem;
}

.crm-ci-care-form-bar label span {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}

.crm-ci-care-form-bar input {
    min-height: 2.5rem;
    width: 100%;
    min-width: 10rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(2, 6, 23, 0.55);
    padding: 0.45rem 0.75rem;
    font-size: 0.8125rem;
    color: #f1f5f9;
}

.crm-ci-care-form-bar p {
    margin: 0;
    flex: 1;
    min-width: 10rem;
    font-size: 0.75rem;
    line-height: 1.45;
    color: #cbd5e1;
}

.crm-ci-care-card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding-top: 0.15rem;
}

.crm-ci-care-card__footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.crm-ci-care-link {
    border: none;
    background: transparent;
    padding: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: #34d399;
    cursor: pointer;
}

.crm-ci-care-link:hover {
    color: #6ee7b7;
    text-decoration: underline;
}

.crm-ci-care-notes-form {
    margin-top: 0.35rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(2, 6, 23, 0.45);
    padding: 0.85rem;
}

.crm-ci-care-notes-form label span {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.crm-ci-care-notes-form textarea {
    width: 100%;
    min-height: 5rem;
    resize: vertical;
    border-radius: 0.65rem;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(15, 23, 42, 0.85);
    padding: 0.55rem 0.75rem;
    font-size: 0.8125rem;
    color: #f1f5f9;
}

.crm-ci-care-notes-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.65rem;
}

.crm-ci-care-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.crm-ci-care-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    border-radius: 0.75rem;
    padding: 0.45rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(2, 6, 23, 0.55);
    color: #e2e8f0;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.crm-ci-care-btn:hover {
    background: rgba(30, 41, 59, 0.65);
    border-color: rgba(255, 255, 255, 0.18);
}

.crm-ci-care-btn--primary {
    border: none;
    color: #fff;
    background: linear-gradient(135deg, #059669 0%, #0d9488 100%);
}

.crm-ci-care-btn--danger {
    border-color: rgba(248, 113, 113, 0.35);
    background: rgba(127, 29, 29, 0.35);
    color: #fecaca;
}

.crm-ci-care-btn--danger:hover {
    background: rgba(153, 27, 27, 0.45);
}

.crm-ci-care-btn--ghost-danger {
    border: none;
    background: transparent;
    color: #f87171;
    min-height: auto;
    padding: 0.35rem 0.5rem;
}

.crm-ci-care-btn--ghost-danger:hover {
    background: rgba(127, 29, 29, 0.25);
}

.crm-ci-care-notes {
    margin-top: 0.5rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(2, 6, 23, 0.35);
    padding: 0.75rem;
}

.crm-ci-care-notes__label {
    margin: 0 0 0.35rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.crm-ci-care-notes__body {
    margin: 0;
    font-size: 0.8125rem;
    white-space: pre-wrap;
    color: #cbd5e1;
}

.crm-ci-care-add {
    margin-top: 1.25rem;
    border-radius: 0.85rem;
    border: 1px dashed rgba(148, 163, 184, 0.35);
    background: rgba(2, 6, 23, 0.35);
    padding: 1.15rem;
}

.crm-ci-care-add label span {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.crm-ci-care-add input,
.crm-ci-care-add select,
.crm-ci-care-add textarea {
    width: 100%;
    min-height: 2.75rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(15, 23, 42, 0.85);
    padding: 0.55rem 0.85rem;
    font-size: 0.875rem;
    color: #f1f5f9;
}

.crm-ci-care-add textarea {
    min-height: 4.5rem;
    resize: vertical;
}

.crm-ci-care-add .crm-ci-care-btn--submit {
    min-height: 2.75rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    font-weight: 700;
}

.crm-ci-request-page .crm-ci-divider {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Ticket-Detail: Portal-Termin (admin/ticket.php) */
.crm-ticket-portal__badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.crm-ticket-portal__badge--amber {
    background: rgba(245, 158, 11, 0.15);
    color: #fcd34d;
    box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.35);
}

.crm-ticket-portal__badge--sky {
    background: rgba(14, 165, 233, 0.15);
    color: #7dd3fc;
    box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.35);
}

.crm-ticket-portal__badge--violet {
    background: rgba(139, 92, 246, 0.15);
    color: #c4b5fd;
    box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.35);
}

.crm-ticket-portal__badge--slate {
    background: rgba(100, 116, 139, 0.2);
    color: #cbd5e1;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.25);
}

.crm-ticket-portal__btn {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3rem;
    border: none;
    border-radius: 1rem;
    padding: 0.85rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

@media (min-width: 640px) {
    .crm-ticket-portal__btn {
        width: auto;
        min-width: min(100%, 20rem);
    }
}

.crm-ticket-portal__btn:hover {
    opacity: 0.96;
}

.crm-ticket-portal__btn:active {
    transform: scale(0.99);
}

.crm-ticket-portal__btn--primary {
    background: linear-gradient(135deg, #00a6fb 0%, #003554 100%);
    box-shadow: 0 8px 24px rgba(0, 166, 251, 0.28);
}

.crm-ticket-portal__btn--success {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.28);
}

.crm-ticket-portal__hint {
    margin: 0.5rem 0 0;
    text-align: center;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #64748b;
}

@media (min-width: 640px) {
    .crm-ticket-portal__hint {
        text-align: left;
    }
}

.crm-ticket-portal__field-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.crm-ticket-portal__field {
    display: block;
    width: 100%;
    border-radius: 0.85rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(2, 6, 23, 0.72);
    padding: 0.65rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #f8fafc;
    color-scheme: dark;
}

.crm-ticket-portal__field:focus {
    outline: none;
    border-color: rgba(0, 166, 251, 0.55);
    box-shadow: 0 0 0 3px rgba(0, 166, 251, 0.15);
}

.crm-ticket-portal__slots {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 0.75rem;
}

.crm-ticket-portal__slot-row + .crm-ticket-portal__slot-row {
    padding-top: 0.25rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.05);
}

/* ── Admin: Neuer Kunde / Stammdaten-Formular (customer_edit.php) ─────── */
.crm-ce-stammdaten-form .crm-ce-form-grid {
    display: grid;
    gap: 1.1rem;
}

@media (min-width: 640px) {
    .crm-ce-stammdaten-form .crm-ce-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.crm-ce-field {
    display: block;
}

.crm-ce-field--wide {
    grid-column: 1 / -1;
}

.crm-ce-field__label {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #cbd5e1;
}

.crm-ce-input,
.crm-ce-stammdaten-form textarea.crm-ce-input {
    width: 100%;
    min-height: 3rem;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(15, 23, 42, 0.72);
    padding: 0.72rem 1rem;
    font-size: 1rem;
    color: #f8fafc;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.crm-ce-input::placeholder {
    color: #64748b;
}

.crm-ce-input:focus {
    border-color: rgba(0, 166, 251, 0.65);
    background: rgba(2, 6, 23, 0.85);
    outline: none;
    box-shadow: 0 0 0 4px rgba(0, 166, 251, 0.14);
}

.crm-ce-field__hint {
    margin-top: 0.35rem;
    font-size: 0.75rem;
    color: #94a3b8;
}

.crm-ce-field__hint--warn {
    color: #fcd34d;
}

.crm-ce-stammdaten-form .iti {
    width: 100%;
}

.crm-ce-stammdaten-form .iti__tel-input {
    min-height: 3rem;
    width: 100%;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(15, 23, 42, 0.72);
    padding: 0.72rem 1rem 0.72rem 6.25rem;
    font-size: 1rem;
    color: #f8fafc;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.crm-ce-stammdaten-form .iti__tel-input::placeholder {
    color: #64748b;
}

.crm-ce-stammdaten-form .iti__tel-input:focus {
    border-color: rgba(0, 166, 251, 0.65);
    background: rgba(2, 6, 23, 0.85);
    outline: none;
    box-shadow: 0 0 0 4px rgba(0, 166, 251, 0.14);
}

.crm-ce-stammdaten-form .iti__selected-country {
    border-radius: 1rem 0 0 1rem;
    padding: 0 0.75rem;
    border-right: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(2, 6, 23, 0.55);
}

.crm-ce-stammdaten-form .iti__selected-country:hover,
.crm-ce-stammdaten-form .iti__selected-country:focus {
    background: rgba(0, 166, 251, 0.1);
}

.crm-ce-stammdaten-form .iti--separate-dial-code .iti__selected-dial-code {
    font-size: 0.875rem;
    font-weight: 600;
    color: #94a3b8;
}

.crm-ce-stammdaten-form .iti__dropdown-content {
    border-radius: 0.85rem;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: #0f172a;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.crm-ce-stammdaten-form .iti__search-input {
    background: #020617;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    color: #f1f5f9;
    font-size: 0.875rem;
}

.crm-ce-stammdaten-form .iti__country {
    color: #e2e8f0;
}

.crm-ce-stammdaten-form .iti__country.iti__highlight {
    background: rgba(0, 166, 251, 0.15);
}

.crm-ce-stammdaten-form .iti__country-name,
.crm-ce-stammdaten-form .iti__dial-code {
    color: #cbd5e1;
}

.crm-ce-address-drop {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 50;
    margin-top: 0.35rem;
    max-height: 18rem;
    overflow: auto;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: #0f172a;
    padding: 0.25rem 0;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.crm-ce-address-drop li {
    display: flex;
    cursor: pointer;
    flex-direction: column;
    padding: 0.7rem 1rem;
    transition: background 0.12s ease;
}

.crm-ce-address-drop li:hover,
.crm-ce-address-drop li:focus {
    background: rgba(0, 166, 251, 0.12);
    outline: none;
}

.crm-ce-address-drop__line {
    font-size: 0.875rem;
    font-weight: 600;
    color: #f1f5f9;
}

.crm-ce-address-drop__meta {
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: #94a3b8;
}

.crm-ce-new-abo {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid rgba(52, 211, 153, 0.28);
    background: linear-gradient(145deg, rgba(6, 78, 59, 0.22) 0%, rgba(15, 23, 42, 0.92) 55%);
    padding: 1.35rem 1.5rem;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

@media (min-width: 1024px) {
    .crm-ce-new-abo {
        position: sticky;
        top: 6rem;
    }
}

.crm-ce-new-abo__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.crm-ce-new-abo__icon {
    display: flex;
    height: 3rem;
    width: 3rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #059669 0%, #0d9488 100%);
    font-size: 1.25rem;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25);
}

.crm-ce-new-abo__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: #f8fafc;
}

.crm-ce-new-abo__lead {
    margin: 0.35rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: #94a3b8;
}

.crm-ce-new-abo .crm-ce-input,
.crm-ce-new-abo select.crm-ce-input {
    min-height: 3.1rem;
    font-weight: 500;
}

.crm-ce-new-abo__panel {
    margin-top: 1rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(2, 6, 23, 0.45);
    padding: 1rem;
}

.crm-ce-new-abo__note {
    margin-top: 1rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(167, 139, 250, 0.25);
    background: rgba(76, 29, 149, 0.18);
    padding: 0.75rem 0.85rem;
    font-size: 0.75rem;
    line-height: 1.5;
    color: #ddd6fe;
}

.crm-ce-new-abo__note a {
    color: #34d399;
    font-weight: 600;
}

.crm-ce-new-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.crm-ce-btn {
    display: inline-flex;
    min-height: 3.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 700;
    transition: opacity 0.15s ease, transform 0.12s ease, background 0.15s ease;
}

.crm-ce-btn--primary {
    border: none;
    color: #fff;
    background: linear-gradient(135deg, #00a6fb 0%, #0582ca 100%);
    box-shadow: 0 8px 24px rgba(0, 166, 251, 0.28);
}

.crm-ce-btn--primary:hover {
    opacity: 0.95;
}

.crm-ce-btn--primary:active {
    transform: scale(0.99);
}

.crm-ce-btn--ghost {
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(15, 23, 42, 0.55);
    color: #e2e8f0;
    font-weight: 600;
    text-decoration: none;
}

.crm-ce-btn--ghost:hover {
    background: rgba(30, 41, 59, 0.65);
}

.crm-ce-stammdaten-form .crm-ce-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 1.15rem;
}

.crm-ce-stammdaten-form .crm-ce-btn--save {
    border: none;
    border-radius: 0.85rem;
    background: linear-gradient(135deg, #059669 0%, #0d9488 100%);
    padding: 0.65rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: #fff;
}

.crm-ce-stammdaten-form .crm-ce-btn--cancel {
    border-radius: 0.85rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(15, 23, 42, 0.55);
    padding: 0.65rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #e2e8f0;
}
/* ── Zeiterfassung: Stempeluhr FAB + Modal ─────────────────────── */
.crm-time-clock-fab {
    position: fixed;
    z-index: 9985;
    right: max(env(safe-area-inset-right, 0px) + 1rem, 1rem);
    bottom: max(env(safe-area-inset-bottom, 0px) + 1rem, 1.25rem);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border: none;
    border-radius: 9999px;
    background: linear-gradient(145deg, #003554 0%, #0582ca 55%, #00a6fb 100%);
    color: #fff;
    box-shadow: 0 8px 28px rgba(0, 166, 251, 0.35), 0 2px 8px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.crm-time-clock-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 166, 251, 0.45), 0 4px 12px rgba(0, 0, 0, 0.3);
}

.crm-time-clock-fab:active {
    transform: scale(0.96);
}

.crm-time-clock-fab.is-active {
    background: linear-gradient(145deg, #065f46 0%, #059669 50%, #34d399 100%);
    box-shadow: 0 8px 28px rgba(52, 211, 153, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);
}

.crm-time-clock-fab.is-paused {
    background: linear-gradient(145deg, #92400e 0%, #d97706 50%, #fbbf24 100%);
    box-shadow: 0 8px 28px rgba(251, 191, 36, 0.35), 0 2px 8px rgba(0, 0, 0, 0.25);
}

.crm-time-clock-fab__pulse {
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    border: 2px solid rgba(52, 211, 153, 0.6);
    opacity: 0;
    pointer-events: none;
}

.crm-time-clock-fab.is-active .crm-time-clock-fab__pulse {
    animation: crm-time-pulse 2s ease-out infinite;
}

@keyframes crm-time-pulse {
    0% { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(1.35); opacity: 0; }
}

body:has(#crm-rs-dock-wrap) .crm-time-clock-fab {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 5.5rem);
}

.crm-time-clock-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9995;
    background: rgba(2, 6, 23, 0);
    backdrop-filter: blur(0);
    transition: background 0.28s ease, backdrop-filter 0.28s ease;
}

/* app.css lädt nach tailwind.css — display:flex unten würde .hidden sonst aufheben */
.crm-time-clock-backdrop.hidden {
    display: none !important;
    pointer-events: none !important;
}

.crm-time-clock-backdrop:not(.is-open) {
    pointer-events: none;
}

.crm-time-clock-backdrop.is-open {
    pointer-events: auto;
    background: rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(6px);
}

.crm-time-clock-sheet {
    position: fixed;
    z-index: 9996;
    left: 50%;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: min(100%, 26rem);
    max-height: min(92vh, 100dvh);
    transform: translate(-50%, 100%);
    opacity: 0;
    overflow: hidden;
    border-radius: 1.75rem 1.75rem 0 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(3, 7, 18, 0.99) 100%);
    padding: 0;
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.55);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
    pointer-events: none;
}

.crm-time-clock-sheet.hidden {
    display: none !important;
    pointer-events: none !important;
}

.crm-time-clock-sheet.is-open {
    pointer-events: auto;
    transform: translate(-50%, 0);
    opacity: 1;
}

@media (min-width: 640px) {
    .crm-time-clock-sheet {
        bottom: auto;
        top: 50%;
        border-radius: 1.75rem;
        transform: translate(-50%, calc(-50% + 1.5rem));
    }
    .crm-time-clock-sheet.is-open {
        transform: translate(-50%, -50%);
    }
}

.crm-time-clock-sheet.is-dragging {
    transition: none !important;
}

.crm-time-clock-sheet.is-dragging .crm-time-clock-sheet__handle {
    cursor: grabbing;
}

.crm-time-clock-sheet__drag {
    flex-shrink: 0;
    padding: 0 1.25rem;
    touch-action: none;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
}

.crm-time-clock-sheet__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0 1.25rem calc(env(safe-area-inset-bottom, 0px) + 1.25rem);
}

.crm-time-clock-sheet__scroll::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.crm-time-clock-sheet__handle {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 1.75rem;
    padding: 0.55rem 0 0.85rem;
}

.crm-time-clock-sheet__handle span {
    display: block;
    width: 2.75rem;
    height: 0.3rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.55);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}

@media (min-width: 640px) {
    .crm-time-clock-sheet__handle { display: none; }
    .crm-time-clock-sheet__drag { cursor: default; touch-action: auto; }
}

.crm-time-clock-sheet__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}

.crm-time-clock-sheet__kicker {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #64748b;
}

.crm-time-clock-sheet__title {
    margin-top: 0.15rem;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #f8fafc;
}

.crm-time-clock-status {
    flex-shrink: 0;
    border-radius: 999px;
    padding: 0.3rem 0.65rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: rgba(100, 116, 139, 0.25);
    color: #cbd5e1;
}

.crm-time-clock-status--running {
    background: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
}

.crm-time-clock-status--paused {
    background: rgba(245, 158, 11, 0.2);
    color: #fcd34d;
}

.crm-time-clock-ring {
    position: relative;
    margin: 0.75rem auto 1.25rem;
    width: min(100%, 16rem);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 2px solid rgba(0, 166, 251, 0.25);
    background: radial-gradient(circle at 30% 25%, rgba(0, 166, 251, 0.12), transparent 55%),
                rgba(15, 23, 42, 0.65);
}

.crm-time-clock-ring__glow {
    position: absolute;
    inset: 12%;
    border-radius: inherit;
    background: radial-gradient(circle, rgba(0, 166, 251, 0.18) 0%, transparent 70%);
    animation: crm-time-glow 3s ease-in-out infinite;
}

@keyframes crm-time-glow {
    0%, 100% { opacity: 0.5; transform: scale(0.95); }
    50% { opacity: 1; transform: scale(1.05); }
}

.crm-time-clock-display {
    position: relative;
    z-index: 1;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: clamp(2rem, 8vw, 2.75rem);
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #e0f2fe;
    font-variant-numeric: tabular-nums;
}

.crm-time-clock-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
    margin-bottom: 1rem;
}

.crm-time-clock-stat {
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.55);
    padding: 0.75rem 0.85rem;
}

.crm-time-clock-stat-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #64748b;
}

.crm-time-clock-stat-val {
    display: block;
    margin-top: 0.25rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: #f1f5f9;
}

.crm-time-clock-stat-val.is-plus { color: #6ee7b7; }
.crm-time-clock-stat-val.is-minus { color: #fca5a5; }
.crm-time-clock-stat-val.is-ok { color: #86efac; }

.crm-time-clock-stat.is-under .crm-time-clock-stat-val,
.crm-time-clock-stat.is-plus .crm-time-clock-stat-val {
    display: inline-flex;
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    font-weight: 800;
}

.crm-time-clock-stat.is-plus .crm-time-clock-stat-val {
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.16);
}

.crm-time-clock-stat.is-under .crm-time-clock-stat-val {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.16);
}

.crm-time-clock-break {
    margin-bottom: 0.85rem;
}

.crm-time-clock-break-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #94a3b8;
}

.crm-time-clock-break-input {
    width: 100%;
    border-radius: 0.85rem;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(15, 23, 42, 0.8);
    padding: 0.6rem 0.75rem;
    font-size: 0.95rem;
    color: #f8fafc;
}

.crm-time-clock-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
}

.crm-time-clock-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.85rem;
    border: none;
    border-radius: 0.95rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease;
}

.crm-time-clock-btn:active { transform: scale(0.98); }
.crm-time-clock-btn.hidden { display: none; }

.crm-time-clock-btn--start {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, #059669, #10b981);
}

.crm-time-clock-btn--pause {
    background: linear-gradient(135deg, #d97706, #f59e0b);
}

.crm-time-clock-btn--resume {
    background: linear-gradient(135deg, #059669, #10b981);
}

.crm-time-clock-btn--stop {
    background: linear-gradient(135deg, #dc2626, #ef4444);
}

.crm-time-clock-report-link {
    display: block;
    margin-top: 1rem;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: #38bdf8;
    text-decoration: none;
}

.crm-time-clock-report-link:hover { color: #7dd3fc; }

/* ── Zeiterfassung: Auswertungsseite ───────────────────────────── */
.time-shell {
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.45);
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.time-shell-head {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(135deg, rgba(0, 53, 84, 0.55) 0%, rgba(15, 23, 42, 0.85) 100%);
}

.time-shell-head-inset {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.25rem 1rem;
}

.time-kicker {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #64748b;
}

.time-title {
    margin-top: 0.2rem;
    font-size: clamp(1.35rem, 4vw, 1.85rem);
    font-weight: 800;
    color: #f8fafc;
}

.time-sub {
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: #94a3b8;
}

.time-hero-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.time-icon-btn,
.time-today-btn {
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(15, 23, 42, 0.65);
    color: #e2e8f0;
    font-weight: 700;
    cursor: pointer;
}

.time-icon-btn {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1.25rem;
    line-height: 1;
}

.time-today-btn {
    padding: 0.45rem 0.85rem;
    font-size: 0.8rem;
}

.time-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

@media (min-width: 1024px) {
    .time-body {
        grid-template-columns: minmax(15rem, 18rem) 1fr;
    }
}

.time-sidebar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1rem;
}

@media (min-width: 1024px) {
    .time-sidebar {
        border-bottom: none;
        border-right: 1px solid rgba(255, 255, 255, 0.08);
    }
}

.time-view-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem;
    margin-bottom: 1rem;
}

.time-view-tab {
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.5);
    padding: 0.55rem 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #94a3b8;
    cursor: pointer;
}

.time-view-tab.is-active {
    border-color: rgba(0, 166, 251, 0.45);
    background: rgba(0, 166, 251, 0.15);
    color: #e0f2fe;
}

.time-balance-card {
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: radial-gradient(circle at top right, rgba(0, 166, 251, 0.12), transparent 55%),
                rgba(3, 7, 18, 0.75);
    padding: 1rem;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.time-balance-card.is-plus {
    border-color: rgba(52, 211, 153, 0.55);
    background: radial-gradient(circle at top right, rgba(16, 185, 129, 0.22), transparent 58%),
                rgba(6, 44, 35, 0.55);
    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.08), 0 12px 28px rgba(16, 185, 129, 0.08);
}

.time-balance-card.is-minus {
    border-color: rgba(248, 113, 113, 0.55);
    background: radial-gradient(circle at top right, rgba(239, 68, 68, 0.2), transparent 58%),
                rgba(55, 15, 20, 0.55);
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.08), 0 12px 28px rgba(239, 68, 68, 0.08);
}

.time-balance-card.is-ok {
    border-color: rgba(52, 211, 153, 0.35);
    background: radial-gradient(circle at top right, rgba(16, 185, 129, 0.1), transparent 58%),
                rgba(3, 7, 18, 0.75);
}

.time-balance-card.is-neutral {
    border-color: rgba(255, 255, 255, 0.1);
}

.time-balance-kicker {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #64748b;
}

.time-balance-value {
    margin-top: 0.35rem;
    font-size: 1.75rem;
    font-weight: 800;
    color: #f8fafc;
}

.time-balance-value.is-plus { color: #6ee7b7; }
.time-balance-value.is-minus { color: #fca5a5; }
.time-balance-value.is-neutral { color: #cbd5e1; }
.time-balance-value.is-ok { color: #86efac; }

.time-saldo-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    font-size: 0.85rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
    line-height: 1.35;
}

.time-balance-value.time-saldo-pill {
    display: inline-flex;
    margin-top: 0.35rem;
    font-size: 1.55rem;
    padding: 0.25rem 0.85rem;
}

.time-saldo-pill.is-plus {
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.18);
    border-color: rgba(52, 211, 153, 0.45);
}

.time-saldo-pill.is-minus {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.16);
    border-color: rgba(248, 113, 113, 0.45);
}

.time-saldo-pill.is-ok {
    color: #86efac;
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(52, 211, 153, 0.28);
}

.time-saldo-pill.is-neutral {
    color: #94a3b8;
    background: rgba(100, 116, 139, 0.18);
    border-color: rgba(148, 163, 184, 0.25);
}

.time-foot-pill {
    display: inline-flex;
    border-radius: 999px;
    padding: 0.12rem 0.45rem;
    font-size: 0.72rem;
    font-weight: 800;
}

.time-foot-pill.is-plus {
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.14);
}

.time-foot-pill.is-minus {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.14);
}

.time-status-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.55);
}

.time-status-hero.is-plus {
    border-color: rgba(52, 211, 153, 0.45);
    background: linear-gradient(135deg, rgba(6, 78, 59, 0.35), rgba(15, 23, 42, 0.65));
}

.time-status-hero.is-minus {
    border-color: rgba(248, 113, 113, 0.45);
    background: linear-gradient(135deg, rgba(127, 29, 29, 0.35), rgba(15, 23, 42, 0.65));
}

.time-status-hero.is-ok {
    border-color: rgba(52, 211, 153, 0.28);
}

.time-status-hero-kicker {
    margin: 0;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #64748b;
}

.time-status-hero-val {
    margin: 0.25rem 0 0;
    font-size: 1.35rem;
    font-weight: 800;
}

.time-status-hero-hint {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: #94a3b8;
    max-width: 18rem;
    text-align: right;
}

.time-status-hero.is-plus .time-status-hero-hint { color: #6ee7b7; }
.time-status-hero.is-minus .time-status-hero-hint { color: #fca5a5; }
.time-status-hero.is-ok .time-status-hero-hint { color: #86efac; }

.time-balance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
    margin-top: 0.85rem;
}

.time-balance-stat-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    color: #64748b;
}

.time-balance-stat-val {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #e2e8f0;
}

.time-admin-tools {
    margin-top: 1rem;
}

.time-settings-btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border-radius: 0.85rem;
    border: 1px dashed rgba(148, 163, 184, 0.35);
    background: rgba(15, 23, 42, 0.45);
    padding: 0.65rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #cbd5e1;
    cursor: pointer;
}

.time-main {
    padding: 1rem 1rem 1.25rem;
}

.time-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.time-panel-kicker {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #64748b;
}

.time-panel-title {
    margin-top: 0.15rem;
    font-size: 1.15rem;
    font-weight: 800;
    color: #f1f5f9;
}

.time-panel-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.time-field {
    width: 100%;
    border-radius: 0.85rem;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(15, 23, 42, 0.75);
    padding: 0.55rem 0.7rem;
    font-size: 0.875rem;
    color: #f8fafc;
}

.time-field--sm { width: auto; min-width: 9rem; }
.time-field--xs { width: 3.5rem; padding: 0.45rem 0.35rem; text-align: center; }

.time-open-clock-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: none;
    border-radius: 0.85rem;
    background: linear-gradient(135deg, #003554, #0582ca);
    padding: 0.55rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
}

.time-day-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.time-day-card {
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.55);
    overflow: hidden;
    border-left-width: 4px;
    border-left-color: rgba(148, 163, 184, 0.25);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.time-day-card.is-plus {
    border-color: rgba(52, 211, 153, 0.35);
    border-left-color: #34d399;
    background: linear-gradient(90deg, rgba(6, 78, 59, 0.22), rgba(15, 23, 42, 0.55));
}

.time-day-card.is-minus {
    border-color: rgba(248, 113, 113, 0.35);
    border-left-color: #f87171;
    background: linear-gradient(90deg, rgba(127, 29, 29, 0.22), rgba(15, 23, 42, 0.55));
}

.time-day-card.is-ok {
    border-left-color: #4ade80;
}

.time-day-card.is-neutral {
    border-left-color: rgba(148, 163, 184, 0.25);
}

.time-day-card.is-holiday {
    border-color: rgba(251, 191, 36, 0.25);
    background: linear-gradient(135deg, rgba(120, 53, 15, 0.15), rgba(15, 23, 42, 0.55));
}

.time-day-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.time-day-wd {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.time-day-date {
    font-size: 0.9rem;
    font-weight: 700;
    color: #f1f5f9;
}

.time-day-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    flex: 1;
}

.time-badge {
    border-radius: 999px;
    background: rgba(100, 116, 139, 0.25);
    padding: 0.15rem 0.5rem;
    font-size: 0.65rem;
    font-weight: 700;
    color: #cbd5e1;
}

.time-badge--holiday {
    background: rgba(245, 158, 11, 0.2);
    color: #fcd34d;
}

.time-badge--holiday-credit {
    background: rgba(52, 211, 153, 0.12);
    color: #6ee7b7;
}

.time-session-timeline.is-holiday-credit {
    border-color: rgba(251, 191, 36, 0.35);
    margin-bottom: 0.55rem;
}

.time-day-balance {
    margin-left: auto;
    font-size: 0.85rem;
    font-weight: 800;
}

.time-day-balance.is-plus { color: #6ee7b7; }
.time-day-balance.is-minus { color: #fca5a5; }
.time-day-balance.is-neutral { color: #94a3b8; }
.time-day-balance.is-ok { color: #86efac; }

.time-day-status {
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.time-day-status--plus {
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.16);
}

.time-day-status--minus {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.16);
}

.time-day-status--ok {
    color: #86efac;
    background: rgba(16, 185, 129, 0.1);
}

.time-day-sessions {
    padding: 0.5rem 0.9rem;
}

.time-session-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.35rem 0;
    font-size: 0.82rem;
}

.time-session-time { color: #94a3b8; }
.time-session-dur { font-weight: 700; color: #e2e8f0; font-variant-numeric: tabular-nums; }

.time-day-foot {
    padding: 0.55rem 0.9rem 0.7rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
}

.time-day-empty,
.time-empty {
    padding: 1rem;
    text-align: center;
    font-size: 0.85rem;
    color: #64748b;
}

.time-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 800000;
    background: rgba(2, 6, 23, 0.65);
    backdrop-filter: blur(4px);
}

.time-settings-sheet {
    position: fixed;
    z-index: 800001;
    inset: auto 0 0 0;
    max-height: 92vh;
    overflow-y: auto;
    border-radius: 1.5rem 1.5rem 0 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #0f172a;
    padding: 1rem 1.25rem calc(env(safe-area-inset-bottom, 0px) + 1.25rem);
}

@media (min-width: 640px) {
    .time-settings-sheet {
        inset: 50% auto auto 50%;
        width: min(100%, 32rem);
        transform: translate(-50%, -50%);
        border-radius: 1.5rem;
    }
}

.time-settings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.time-settings-head h3 {
    font-size: 1.1rem;
    font-weight: 800;
    color: #f8fafc;
}

.time-settings-body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.time-settings-section {
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(3, 7, 18, 0.55);
    padding: 1rem;
}

.time-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #94a3b8;
}

.time-settings-hint {
    margin: 0.5rem 0 0.85rem;
    font-size: 0.75rem;
    line-height: 1.45;
    color: #64748b;
}

.time-schedule-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.time-schedule-day {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #cbd5e1;
}

.time-sched-unit {
    font-size: 0.75rem;
    color: #64748b;
}

.time-schedule-total {
    margin: 0.85rem 0;
    font-size: 0.85rem;
    color: #94a3b8;
}

.time-btn-primary,
.time-btn-secondary {
    border: none;
    border-radius: 0.85rem;
    padding: 0.65rem 1rem;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}

.time-btn-primary {
    width: 100%;
    background: linear-gradient(135deg, #0582ca, #00a6fb);
    color: #fff;
}

.time-btn-secondary {
    background: rgba(100, 116, 139, 0.25);
    color: #e2e8f0;
}

.time-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.time-settings-row h4 {
    font-size: 0.95rem;
    font-weight: 800;
    color: #f1f5f9;
}

.time-holiday-add {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.45rem;
    margin-bottom: 0.75rem;
}

@media (min-width: 480px) {
    .time-holiday-add {
        grid-template-columns: 1fr 1fr auto;
    }
}

.time-holiday-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.time-holiday-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border-radius: 0.75rem;
    background: rgba(15, 23, 42, 0.65);
    padding: 0.55rem 0.65rem;
    font-size: 0.82rem;
    color: #cbd5e1;
}

.time-holiday-del {
    border: none;
    background: transparent;
    color: #f87171;
    font-size: 1.1rem;
    cursor: pointer;
}

.time-holiday-empty {
    font-size: 0.82rem;
    color: #64748b;
}

.time-balance-grid--plusminus {
    margin-top: 0.65rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(148, 163, 184, 0.15);
}

.time-balance-stat-val.is-plus { color: #6ee7b7; }
.time-balance-stat-val.is-minus { color: #fca5a5; }

.time-account-card {
    border-radius: 1rem;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.12);
    padding: 0.85rem 1rem 1rem;
    margin-top: 0.75rem;
}

.time-account-rows {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 0.35rem;
}

.time-account-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}

.time-account-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.time-account-label {
    font-size: 0.78rem;
    line-height: 1.25;
    color: #94a3b8;
}

.time-account-val {
    justify-self: end;
    font-size: 0.82rem;
    font-weight: 700;
    color: #f1f5f9;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
}

.time-account-val.time-saldo-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.5rem;
    padding: 0.18rem 0.55rem;
}

.time-account-deadline {
    margin: 0.65rem 0 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: #7dd3fc;
}

.time-deadline-row {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.5rem;
}

.time-day-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.time-day-foot .is-plus { color: #6ee7b7; }
.time-day-foot .is-minus { color: #fca5a5; }

.time-emp-page {
    max-width: 960px;
    margin: 0 auto;
    padding-bottom: 2rem;
}

.time-emp-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.time-emp-head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.time-emp-head-actions .time-btn-primary,
.time-emp-head-actions .time-btn-secondary {
    width: auto;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.time-emp-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.65rem;
    margin-bottom: 1rem;
}

.time-emp-stat {
    border-radius: 1rem;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.12);
    padding: 0.85rem 1rem;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.time-emp-stat.is-plus {
    border-color: rgba(52, 211, 153, 0.4);
    background: linear-gradient(135deg, rgba(6, 78, 59, 0.28), rgba(15, 23, 42, 0.72));
}

.time-emp-stat.is-minus {
    border-color: rgba(248, 113, 113, 0.4);
    background: linear-gradient(135deg, rgba(127, 29, 29, 0.28), rgba(15, 23, 42, 0.72));
}

.time-emp-stat.is-ok {
    border-color: rgba(52, 211, 153, 0.28);
}

.time-emp-stat-label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    margin-bottom: 0.35rem;
}

.time-emp-stat-val {
    font-size: 1.15rem;
    font-weight: 800;
    color: #f1f5f9;
}

.time-emp-stat.is-plus .time-emp-stat-val { color: #6ee7b7; }
.time-emp-stat.is-minus .time-emp-stat-val { color: #fca5a5; }

.time-emp-banner {
    border-radius: 0.85rem;
    background: rgba(14, 165, 233, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.25);
    color: #bae6fd;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.time-emp-section {
    margin-top: 1.5rem;
}

.time-emp-section-title {
    font-size: 1rem;
    font-weight: 800;
    color: #f1f5f9;
    margin: 0 0 0.75rem;
}

.time-emp-table-wrap {
    overflow-x: auto;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.12);
}

.time-emp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.time-emp-table th,
.time-emp-table td {
    padding: 0.65rem 0.85rem;
    text-align: left;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}

.time-emp-table th {
    background: rgba(15, 23, 42, 0.85);
    color: #94a3b8;
    font-weight: 700;
}

.time-emp-table td.is-plus { color: #6ee7b7; font-weight: 700; }
.time-emp-table td.is-minus { color: #fca5a5; font-weight: 700; }

.time-emp-table tr.is-plus td:last-child { background: rgba(16, 185, 129, 0.06); }
.time-emp-table tr.is-minus td:last-child { background: rgba(239, 68, 68, 0.06); }
.time-emp-table tr.is-ok td:last-child { background: rgba(16, 185, 129, 0.04); }

.time-schedule-grid--readonly .time-schedule-day strong {
    margin-left: auto;
    color: #7dd3fc;
}

.time-corrections-banner {
    display: block;
    margin-top: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(248, 113, 113, 0.45);
    background: linear-gradient(135deg, rgba(127, 29, 29, 0.35), rgba(15, 23, 42, 0.72));
    text-decoration: none;
    color: #fecaca;
}

.time-corrections-banner-kicker {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fca5a5;
}

.time-corrections-banner strong {
    display: block;
    margin-top: 0.2rem;
    font-size: 1rem;
    color: #fff;
}

.time-corrections-banner-link {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #fca5a5;
}

.time-corrections-link {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #7dd3fc;
    text-decoration: none;
}

.time-requests-card {
    margin-top: 0.75rem;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background: rgba(15, 23, 42, 0.55);
    padding: 0.85rem 1rem;
}

.time-requests-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.time-requests-badge {
    min-width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background: rgba(248, 113, 113, 0.25);
    color: #fecaca;
    font-size: 0.72rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.time-requests-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-top: 0.65rem;
    max-height: 16rem;
    overflow: auto;
}

.time-requests-empty {
    margin: 0;
    font-size: 0.78rem;
    color: #64748b;
}

.time-request-item {
    border-radius: 0.85rem;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background: rgba(2, 6, 23, 0.35);
    padding: 0.55rem 0.65rem;
}

.time-request-item.is-pending { border-color: rgba(251, 191, 36, 0.35); }
.time-request-item.is-plus { border-color: rgba(52, 211, 153, 0.35); }
.time-request-item.is-minus { border-color: rgba(248, 113, 113, 0.35); }

.time-request-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.time-request-item-action,
.time-request-item-detail,
.time-request-item-note {
    margin: 0.25rem 0 0;
    font-size: 0.72rem;
    color: #94a3b8;
}

.time-request-item-note { color: #fca5a5; }

.time-correction-btn {
    margin-left: auto;
    border: 0;
    border-radius: 999px;
    background: rgba(251, 191, 36, 0.16);
    color: #fcd34d;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 0.2rem 0.55rem;
    cursor: pointer;
}

.time-report-day-link {
    display: block;
    width: 100%;
    margin: 0.35rem 0 0.65rem;
    border: 1px dashed rgba(251, 191, 36, 0.35);
    border-radius: 0.65rem;
    background: rgba(251, 191, 36, 0.08);
    color: #fcd34d;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.45rem 0.65rem;
    cursor: pointer;
    text-align: center;
}

.time-month-signoff-banner {
    margin-top: 0.75rem;
    padding: 0.75rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(56, 189, 248, 0.25);
    background: rgba(14, 165, 233, 0.08);
}

.time-month-signoff-title {
    margin: 0.15rem 0 0.35rem;
    font-size: 1rem;
    font-weight: 800;
    color: #e2e8f0;
}

.time-month-signoff-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.55rem;
}

.time-month-signoff-actions .time-btn-primary,
.time-month-signoff-actions .time-btn-secondary {
    flex: 1 1 auto;
    text-align: center;
    justify-content: center;
}

body.crm-admin--dark .crm-admin-page:has(.time-month-review-page) .crm-admin-page-title {
    display: none;
}

.time-month-review-page {
    max-width: 920px;
    margin: 0 auto;
    padding: 0.5rem 0 2.5rem;
}

body.crm-admin--dark .time-review-hero {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.15rem;
    margin-bottom: 1.25rem;
    box-sizing: border-box;
    border-radius: 1.15rem;
    border: 1px solid rgba(56, 189, 248, 0.18);
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), rgba(15, 23, 42, 0.88));
}

.time-review-hero {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.15rem;
    margin-bottom: 1.25rem;
    box-sizing: border-box;
    border-radius: 1.15rem;
    border: 1px solid rgba(56, 189, 248, 0.18);
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), rgba(15, 23, 42, 0.88));
}

.time-review-hero-main .time-kicker {
    display: block;
    margin: 0 0 0.5rem;
    line-height: 1.5;
}

.time-review-hero-main {
    min-width: 0;
    flex: 1 1 16rem;
}

.time-review-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    align-self: flex-start;
}

.time-review-hero-actions .time-btn-primary,
.time-review-hero-actions .time-btn-secondary {
    width: auto;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.time-review-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 1rem;
}

@media (max-width: 860px) {
    .time-review-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .time-review-kpi-grid .time-review-kpi--saldo {
        grid-column: 1 / -1;
    }
}

.time-review-kpi {
    border-radius: 1rem;
    background: rgba(15, 23, 42, 0.78);
    border: 1px solid rgba(148, 163, 184, 0.12);
    padding: 0.85rem 0.95rem;
}

.time-review-kpi.is-plus {
    border-color: rgba(52, 211, 153, 0.28);
    background: linear-gradient(180deg, rgba(6, 78, 59, 0.22), rgba(15, 23, 42, 0.78));
}

.time-review-kpi.is-minus {
    border-color: rgba(248, 113, 113, 0.28);
    background: linear-gradient(180deg, rgba(127, 29, 29, 0.22), rgba(15, 23, 42, 0.78));
}

.time-review-kpi--saldo.is-minus {
    border-color: rgba(248, 113, 113, 0.42);
}

.time-review-kpi-label {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    margin-bottom: 0.35rem;
}

.time-review-kpi-val {
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
    color: #f8fafc;
    font-variant-numeric: tabular-nums;
}

.time-review-kpi.is-plus .time-review-kpi-val { color: #6ee7b7; }
.time-review-kpi.is-minus .time-review-kpi-val { color: #fca5a5; }

.time-review-panel {
    border-radius: 1rem;
    background: rgba(15, 23, 42, 0.78);
    border: 1px solid rgba(148, 163, 184, 0.12);
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
}

.time-review-panel-head {
    margin-bottom: 0.65rem;
}

.time-review-panel-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    color: #e2e8f0;
}

.time-review-panel-sub {
    margin: 0.2rem 0 0;
    font-size: 0.72rem;
    color: #64748b;
}

.time-kv-list {
    display: flex;
    flex-direction: column;
}

.time-kv-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}

.time-kv-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.time-kv-label {
    font-size: 0.82rem;
    color: #94a3b8;
    line-height: 1.3;
}

.time-kv-val {
    justify-self: end;
    font-size: 0.88rem;
    font-weight: 700;
    color: #f1f5f9;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
}

.time-kv-val.time-saldo-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5.5rem;
    padding: 0.22rem 0.65rem;
}

.time-review-collapse {
    border-radius: 1rem;
    background: rgba(15, 23, 42, 0.78);
    border: 1px solid rgba(148, 163, 184, 0.12);
    margin-bottom: 0.85rem;
    overflow: hidden;
}

.time-review-collapse-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.95rem 1.1rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.time-review-collapse-summary::-webkit-details-marker {
    display: none;
}

.time-review-collapse-summary::after {
    content: '▾';
    flex-shrink: 0;
    color: #64748b;
    font-size: 0.85rem;
    transition: transform 0.2s ease;
}

.time-review-collapse[open] .time-review-collapse-summary::after {
    transform: rotate(180deg);
}

.time-review-collapse-title {
    font-size: 0.92rem;
    font-weight: 800;
    color: #e2e8f0;
}

.time-review-collapse-meta {
    margin-left: auto;
    margin-right: 0.5rem;
    font-size: 0.72rem;
    color: #64748b;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.time-review-collapse-body {
    padding: 0 1.1rem 1.1rem;
    border-top: 1px solid rgba(148, 163, 184, 0.08);
}

.time-review-table-wrap {
    overflow-x: auto;
    border-radius: 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.1);
}

.time-review-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.time-review-table th,
.time-review-table td {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
    text-align: left;
    vertical-align: top;
}

.time-review-table th {
    background: rgba(2, 6, 23, 0.55);
    color: #64748b;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.time-review-table td.num,
.time-review-table th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.time-review-table tr.is-today td {
    background: rgba(56, 189, 248, 0.06);
}

.time-review-table tr.is-plus td.num:last-child { color: #6ee7b7; }
.time-review-table tr.is-minus td.num:last-child { color: #fca5a5; }

.time-review-day {
    white-space: nowrap;
}

.time-review-day .time-day-wd {
    display: inline-block;
    min-width: 1.4rem;
    margin-right: 0.35rem;
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 700;
}

.time-month-review-page .time-month-review-signed {
    margin: 0.45rem 0 0;
    font-size: 0.78rem;
    color: #6ee7b7;
    font-weight: 700;
}

.time-month-review-page .time-month-review-deadline {
    margin: 0.45rem 0 0;
    font-size: 0.78rem;
    color: #fcd34d;
    font-weight: 600;
}

.time-month-review-details {
    font-size: 0.72rem;
    color: #94a3b8;
    max-width: 18rem;
    line-height: 1.45;
}

.time-month-review-foot {
    margin-top: 1.25rem;
    padding: 1rem 1.1rem;
    border-radius: 1rem;
    border: 1px solid rgba(56, 189, 248, 0.2);
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.08), rgba(15, 23, 42, 0.82));
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
}

.time-month-review-foot .time-btn-primary {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.time-month-review-foot.is-locked {
    border-color: rgba(148, 163, 184, 0.25);
    background: linear-gradient(135deg, rgba(100, 116, 139, 0.1), rgba(15, 23, 42, 0.82));
}

.time-month-review-foot .time-btn-primary.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.time-review-panel--vacation {
    border-color: rgba(251, 191, 36, 0.28);
    background: linear-gradient(155deg, rgba(251, 191, 36, 0.08), rgba(15, 23, 42, 0.88));
}

.time-vacation-review-balance {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 1rem;
}

@media (max-width: 720px) {
    .time-vacation-review-balance {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.time-vacation-review-stat {
    padding: 0.75rem 0.85rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(251, 191, 36, 0.2);
    background: rgba(251, 191, 36, 0.06);
}

.time-vacation-review-stat span {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

.time-vacation-review-stat strong {
    display: block;
    margin-top: 0.25rem;
    font-size: 1.05rem;
    color: #fde68a;
}

.time-vacation-review-block {
    margin-top: 0.85rem;
}

.time-vacation-review-subtitle {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: #f8fafc;
}

.time-vacation-review-sum {
    margin: 0.35rem 0 0.5rem;
    font-size: 0.82rem;
    color: #fcd34d;
    font-weight: 600;
}

.time-vacation-review-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.time-vacation-review-item {
    padding: 0.65rem 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(2, 6, 23, 0.35);
    font-size: 0.82rem;
    color: #94a3b8;
}

.time-vacation-review-item strong {
    display: block;
    color: #f8fafc;
    font-weight: 700;
}

.time-vacation-review-item em {
    display: block;
    margin-top: 0.25rem;
    font-style: normal;
    color: #64748b;
}

.time-vacation-review-item.is-pending {
    border-color: rgba(251, 191, 36, 0.28);
    background: rgba(251, 191, 36, 0.06);
}

.time-vacation-review-year {
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.time-vacation-review-year summary {
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    color: #94a3b8;
}

.time-vacation-review-year .time-vacation-review-list {
    margin-top: 0.55rem;
}

.time-review-table tr.is-vacation td {
    background: rgba(251, 191, 36, 0.06);
}

.time-review-table tr.is-vacation-pending td {
    background: rgba(251, 191, 36, 0.03);
}

.time-month-review-page .time-badge--vacation {
    color: #fde68a;
    background: rgba(251, 191, 36, 0.14);
    border: 1px solid rgba(251, 191, 36, 0.28);
}

.time-month-review-page .time-badge--vacation-pending {
    color: #fcd34d;
    background: rgba(251, 191, 36, 0.08);
    border: 1px dashed rgba(251, 191, 36, 0.35);
}

.time-month-review-page .time-day-detail.is-vacation {
    border-color: rgba(251, 191, 36, 0.35);
}

.time-month-review-page .time-session-timeline.is-vacation-credit {
    border-color: rgba(251, 191, 36, 0.35);
    background: rgba(251, 191, 36, 0.06);
}

.time-request-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.45rem;
}

.time-signature-wrap {
    margin: 0.75rem 0 1rem;
}

.time-signature-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.time-signature-label {
    font-size: 0.72rem;
    color: #94a3b8;
    font-weight: 700;
}

.time-signature-canvas-wrap {
    overflow: hidden;
    border-radius: 0.75rem;
    border: 2px dashed rgba(148, 163, 184, 0.45);
    background: #fff;
}

.time-signature-canvas {
    display: block;
    width: 100%;
    touch-action: none;
}

.time-signature-hint {
    margin: 0.35rem 0 0;
    font-size: 0.68rem;
    color: #94a3b8;
}

.time-signature-hint.is-signed {
    color: #34d399;
}

.time-btn-secondary--sm {
    font-size: 0.68rem;
    padding: 0.25rem 0.55rem;
}

.time-correction-times {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.time-field--area {
    min-height: 5.5rem;
    resize: vertical;
}

.time-corr-page {
    max-width: 960px;
    margin: 0 auto;
    padding-bottom: 2rem;
}

.time-corr-pending-pill {
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    background: rgba(251, 191, 36, 0.16);
    color: #fcd34d;
    font-size: 0.78rem;
    font-weight: 800;
}

.time-corr-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 1rem;
}

.time-corr-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.time-corr-card {
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background: rgba(15, 23, 42, 0.72);
    padding: 0.9rem 1rem;
}

.time-corr-card.is-pending { border-color: rgba(251, 191, 36, 0.35); }
.time-corr-card.is-plus { border-color: rgba(52, 211, 153, 0.35); }
.time-corr-card.is-minus { border-color: rgba(248, 113, 113, 0.35); }

.time-corr-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.time-corr-card-date {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: #94a3b8;
    font-weight: 600;
}

.time-corr-card-action {
    margin: 0.45rem 0 0;
    font-size: 0.82rem;
    color: #cbd5e1;
    font-weight: 700;
}

.time-corr-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
    margin-top: 0.65rem;
}

.time-corr-compare-label {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    margin-bottom: 0.15rem;
}

.time-corr-issue,
.time-corr-review-note {
    margin: 0.65rem 0 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: #cbd5e1;
}

.time-corr-review-note { color: #94a3b8; }

.time-corr-actions,
.time-corr-review-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.85rem;
}

.time-btn-secondary--danger {
    border-color: rgba(248, 113, 113, 0.45);
    color: #fca5a5;
}

.saldo-pill.is-pending,
.time-saldo-pill.is-pending {
    color: #fcd34d;
    background: rgba(251, 191, 36, 0.16);
    border-color: rgba(251, 191, 36, 0.35);
}

body.crm-admin--dark .crm-admin-back-fab {
    bottom: max(env(safe-area-inset-bottom, 0px) + 1rem, 1.25rem);
}

body.crm-admin--dark:has(#crm-rs-dock-wrap) .crm-admin-back-fab {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 5.5rem);
}

/* ── Zeiterfassung: Kalender & Detailansichten ── */
.time-calc-note {
    margin: 0.35rem 0 0.75rem;
    font-size: 0.72rem;
    line-height: 1.45;
    color: #64748b;
}

.time-day-list--single,
.time-day-list--week,
.time-day-list--month,
.time-day-list--year {
    display: block;
}

.time-day-detail {
    border-radius: 1.15rem;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.78));
    padding: 1.15rem 1.25rem;
}

.time-day-detail.is-plus { border-color: rgba(52, 211, 153, 0.35); }
.time-day-detail.is-minus { border-color: rgba(248, 113, 113, 0.35); }
.time-day-detail.is-ok { border-color: rgba(52, 211, 153, 0.22); }
.time-day-detail.is-future { opacity: 0.72; }

.time-day-detail-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1rem;
}

.time-day-detail-date {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
}

.time-day-detail-date strong {
    font-size: 1.35rem;
    font-weight: 800;
    color: #f8fafc;
}

.time-day-detail-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 1rem;
}

.time-day-stat {
    border-radius: 0.85rem;
    background: rgba(2, 6, 23, 0.45);
    border: 1px solid rgba(148, 163, 184, 0.1);
    padding: 0.65rem 0.75rem;
}

.time-day-stat span {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    margin-bottom: 0.2rem;
}

.time-day-stat strong {
    font-size: 1.05rem;
    color: #e2e8f0;
    font-variant-numeric: tabular-nums;
}

.time-day-detail-title {
    margin: 0 0 0.65rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
}

.time-session-timeline {
    border-radius: 0.85rem;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background: rgba(2, 6, 23, 0.35);
    padding: 0.65rem 0.75rem;
    margin-bottom: 0.55rem;
}

.time-session-timeline.is-running { border-color: rgba(56, 189, 248, 0.35); }
.time-session-timeline.is-paused { border-color: rgba(251, 191, 36, 0.35); }
.time-session-timeline.is-done { border-color: rgba(148, 163, 184, 0.15); }

.time-session-timeline-head {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}

.time-session-status {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
}

.time-session-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.85rem;
}

.time-session-step {
    font-size: 0.78rem;
    color: #cbd5e1;
    font-variant-numeric: tabular-nums;
}

.time-session-step em {
    display: block;
    font-style: normal;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    margin-bottom: 0.1rem;
}

.time-session-step.is-live { color: #7dd3fc; }

.time-session-line {
    margin: 0.45rem 0 0;
    font-size: 0.72rem;
    color: #64748b;
}

.time-badge--today {
    background: rgba(56, 189, 248, 0.16);
    color: #7dd3fc;
}

.time-badge--future {
    background: rgba(100, 116, 139, 0.16);
    color: #94a3b8;
}

.time-saldo-pill.is-future {
    color: #64748b;
    background: rgba(100, 116, 139, 0.12);
    border-color: rgba(100, 116, 139, 0.2);
}

.time-week-wrap {
    overflow-x: auto;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.12);
}

.time-week-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.time-week-table th,
.time-week-table td {
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
    vertical-align: top;
}

.time-week-table th {
    background: rgba(15, 23, 42, 0.85);
    color: #94a3b8;
    font-weight: 700;
    text-align: left;
}

.time-week-table th:nth-child(n+3),
.time-week-table td:nth-child(n+3) {
    text-align: right;
    white-space: nowrap;
}

.time-week-row {
    cursor: pointer;
    transition: background 0.15s ease;
}

.time-week-row:hover { background: rgba(56, 189, 248, 0.06); }
.time-week-row.is-today { background: rgba(56, 189, 248, 0.08); }
.time-week-row.is-future { opacity: 0.55; cursor: default; }
.time-week-row.is-plus td { background: rgba(16, 185, 129, 0.04); }
.time-week-row.is-minus td { background: rgba(239, 68, 68, 0.04); }

.time-week-date strong {
    display: block;
    color: #f1f5f9;
    font-weight: 700;
}

.time-week-sessions {
    min-width: 12rem;
    max-width: 28rem;
}

.time-week-sess {
    display: block;
    font-size: 0.75rem;
    color: #94a3b8;
    line-height: 1.45;
}

.time-week-muted {
    font-size: 0.75rem;
    color: #475569;
}

.time-week-num {
    font-variant-numeric: tabular-nums;
    color: #e2e8f0;
    font-weight: 600;
}

.time-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.45rem;
}

.time-cal-head {
    text-align: center;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
    padding: 0.35rem 0;
}

.time-cal-cell {
    min-height: 6.5rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background: rgba(15, 23, 42, 0.55);
    padding: 0.45rem 0.5rem;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.time-cal-cell:hover:not(.is-empty):not(.is-future) {
    border-color: rgba(56, 189, 248, 0.35);
    transform: translateY(-1px);
}

.time-cal-cell.is-empty {
    background: transparent;
    border-color: transparent;
    cursor: default;
    min-height: 0;
}

.time-cal-cell.is-today {
    border-color: rgba(56, 189, 248, 0.45);
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.15);
}

.time-cal-cell.is-future {
    opacity: 0.45;
    cursor: default;
}

.time-cal-cell.is-plus { background: rgba(16, 185, 129, 0.08); }
.time-cal-cell.is-minus { background: rgba(239, 68, 68, 0.08); }
.time-cal-cell.is-holiday { border-color: rgba(251, 191, 36, 0.25); }

.time-cal-daynum {
    font-size: 0.95rem;
    font-weight: 800;
    color: #f1f5f9;
}

.time-cal-ist {
    font-size: 0.72rem;
    font-weight: 700;
    color: #cbd5e1;
    font-variant-numeric: tabular-nums;
}

.time-cal-muted {
    font-size: 0.72rem;
    color: #475569;
}

.time-cal-sess {
    font-size: 0.62rem;
    color: #64748b;
}

.time-cal-holiday {
    font-size: 0.62rem;
    color: #fcd34d;
    line-height: 1.3;
}

.time-year-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.65rem;
}

.time-year-card {
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background: rgba(15, 23, 42, 0.72);
    padding: 0.85rem 1rem;
}

.time-year-card.is-plus { border-color: rgba(52, 211, 153, 0.35); }
.time-year-card.is-minus { border-color: rgba(248, 113, 113, 0.35); }
.time-year-card.is-future { opacity: 0.55; }

.time-year-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.55rem;
}

.time-year-card-head strong {
    color: #f1f5f9;
    font-size: 0.95rem;
}

.time-year-card-stats {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.78rem;
    color: #94a3b8;
}

.time-year-card-stats strong {
    color: #e2e8f0;
}

.time-year-drill {
    margin-top: 0.55rem;
    border: 0;
    background: transparent;
    color: #7dd3fc;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
}

@media (max-width: 768px) {
    .time-day-detail-stats {
        grid-template-columns: 1fr;
    }

    .time-cal-grid {
        gap: 0.3rem;
    }

    .time-cal-cell {
        min-height: 5rem;
        padding: 0.35rem;
    }

    .time-cal-sess,
    .time-cal-holiday {
        display: none;
    }
}

/* Mitarbeiter-Rapport erweitert */
.time-emp-calc-note {
    margin: 0.25rem 0 0;
    font-size: 0.78rem;
    color: #64748b;
}

.time-emp-export {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.time-emp-export-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.time-emp-table tr.is-future td {
    color: #64748b;
    opacity: 0.65;
}

.time-emp-table tr.is-partial td:nth-child(3)::after {
    content: ' *';
    color: #64748b;
    font-size: 0.72rem;
}

.time-emp-ytd-banner {
    border-radius: 1rem;
    border: 1px solid rgba(56, 189, 248, 0.25);
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(15, 23, 42, 0.72));
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.time-emp-ytd-banner p {
    margin: 0;
    font-size: 0.82rem;
    color: #94a3b8;
}

.time-emp-ytd-banner strong {
    font-size: 1.2rem;
}

.time-emp-day-grid {
    display: grid;
    gap: 0.65rem;
}

@media (min-width: 900px) {
    .time-emp-page {
        max-width: 1100px;
    }
}

/* ── Team-Wiki (Dark CI) ───────────────────────────────────────── */
body.crm-admin--dark .crm-admin-page:has(.wiki-page) .crm-admin-page-title {
    display: none;
}

body.crm-admin--dark .crm-admin-page:has(.wiki-page) {
    padding-top: 1rem;
}

.wiki-page {
    max-width: 72rem;
    margin: 0 auto;
    padding-top: 2.75rem;
    padding-bottom: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

@media (min-width: 1024px) {
    body.crm-admin--dark .crm-admin-page:has(.wiki-page) {
        padding-top: 1.5rem;
    }

    .wiki-page {
        padding-top: 3rem;
    }
}

.wiki-flash {
    border-radius: 1rem;
    padding: 0.85rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.wiki-flash--ok {
    border: 1px solid rgba(52, 211, 153, 0.35);
    background: rgba(6, 78, 59, 0.35);
    color: #a7f3d0;
}

.wiki-flash--err {
    border: 1px solid rgba(248, 113, 113, 0.35);
    background: rgba(127, 29, 29, 0.35);
    color: #fecaca;
}

/*
 * CRM-Panel-Header (Wiki, Bearbeiten, Monatsreview, …):
 * Immer grosszügiges padding-top IN der Kachel — Text/Button nie am Rand kleben.
 */
header.wiki-hero,
header.time-review-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    box-sizing: border-box;
    padding: 3rem 1.5rem 1.4rem;
    border-radius: 1.35rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(135deg, rgba(0, 53, 84, 0.55) 0%, rgba(15, 23, 42, 0.88) 100%);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

@media (min-width: 1024px) {
    header.wiki-hero,
    header.time-review-hero {
        padding: 3.25rem 1.75rem 1.5rem;
    }
}

.wiki-hero-main {
    flex: 1;
    min-width: 0;
}

.wiki-hero-main .time-kicker,
.time-review-hero-main .time-kicker {
    display: block;
    margin: 0 0 0.5rem;
    line-height: 1.5;
}

.wiki-hero-main .time-title,
.time-review-hero-main .time-title {
    margin-top: 0;
}

.wiki-hero-btn {
    width: auto;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wiki-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.wiki-search-wrap {
    flex: 1;
    min-width: min(100%, 20rem);
}

.wiki-count {
    margin: 0;
    font-size: 0.8rem;
    color: #94a3b8;
}

.wiki-count span {
    font-weight: 700;
    color: #e2e8f0;
}

.wiki-cat-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.wiki-cat-chip {
    text-decoration: none;
}

.wiki-empty-msg,
.wiki-empty-state {
    border-radius: 1rem;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    background: rgba(15, 23, 42, 0.45);
    padding: 1.25rem;
    text-align: center;
}

.wiki-empty-title {
    margin: 0 0 0.35rem;
    font-size: 1.1rem;
    font-weight: 800;
    color: #f1f5f9;
}

.wiki-empty-btn {
    display: inline-flex;
    width: auto;
    margin-top: 0.85rem;
    text-decoration: none;
}

.wiki-grid {
    display: grid;
    gap: 1rem;
}

@media (min-width: 640px) {
    .wiki-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.wiki-card {
    position: relative;
    border-radius: 1.15rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.55);
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.wiki-card:hover {
    border-color: rgba(0, 166, 251, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 166, 251, 0.12);
}

.wiki-card-link {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 1.15rem 3rem 1.15rem 1.15rem;
    text-decoration: none;
    color: inherit;
}

.wiki-card-cat {
    display: inline-flex;
    width: fit-content;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(30, 41, 59, 0.75);
    padding: 0.2rem 0.55rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

.wiki-card-title {
    margin: 0.75rem 0 0;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.35;
    color: #f8fafc;
}

.wiki-card-link:hover .wiki-card-title {
    color: #7dd3fc;
}

.wiki-card-excerpt {
    margin: 0.55rem 0 0;
    flex: 1;
    font-size: 0.82rem;
    line-height: 1.55;
    color: #94a3b8;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wiki-card-open {
    margin-top: 0.85rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #38bdf8;
}

.wiki-card-edit {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(15, 23, 42, 0.85);
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.wiki-card-edit:hover {
    color: #e2e8f0;
    border-color: rgba(0, 166, 251, 0.45);
    background: rgba(0, 53, 84, 0.65);
}

.wiki-article-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.wiki-back-link {
    font-size: 0.85rem;
    font-weight: 700;
    color: #38bdf8;
    text-decoration: none;
}

.wiki-back-link:hover {
    color: #7dd3fc;
}

.wiki-edit-btn {
    width: auto;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wiki-article {
    position: relative;
    border-radius: 1.35rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.55);
    padding: 1.35rem 1.35rem 4.5rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.wiki-article-head {
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.wiki-article-title {
    margin: 0.75rem 0 0;
    font-size: clamp(1.45rem, 4vw, 2rem);
    font-weight: 800;
    line-height: 1.25;
    color: #f8fafc;
}

.wiki-article-body {
    margin-top: 1.25rem;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.92rem;
    line-height: 1.65;
    color: #cbd5e1;
}

.wiki-article-meta {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    max-width: calc(100% - 2rem);
    padding: 0.45rem 0.65rem 0.45rem 0.45rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(3, 7, 18, 0.82);
    backdrop-filter: blur(8px);
}

.wiki-article-meta-avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    object-fit: cover;
    flex-shrink: 0;
}

.wiki-article-meta-avatar--initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #003554, #0582ca);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
}

.wiki-article-meta-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.wiki-article-meta-label,
.wiki-article-meta-name {
    font-size: 0.68rem;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wiki-article-meta-label {
    color: #64748b;
}

.wiki-article-meta-name {
    font-weight: 700;
    color: #e2e8f0;
}

.wiki-edit-head {
    /* Erbt Abstände von .wiki-hero — nicht überschreiben */
    gap: 1rem;
}

.wiki-edit-head .wiki-hero-btn,
.wiki-edit-cancel-top {
    width: auto;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.wiki-edit-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.25rem;
    border-radius: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.55);
}

.wiki-edit-meta-row {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .wiki-edit-form {
        padding: 1.5rem 1.75rem;
    }

    .wiki-edit-meta-row {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        align-items: start;
    }
}

@media (min-width: 1024px) {
    .wiki-edit-form {
        padding: 1.75rem 2rem;
    }
}

.wiki-field {
    display: block;
}

.wiki-field--body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.wiki-field--body .wiki-textarea {
    flex: 1;
}

.wiki-textarea {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    min-height: 20rem;
    resize: vertical;
    line-height: 1.55;
}

@media (min-width: 768px) {
    .wiki-textarea {
        min-height: 28rem;
    }
}

@media (min-width: 1024px) {
    .wiki-textarea {
        min-height: min(65vh, 40rem);
    }
}

.wiki-edit-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.wiki-save-btn {
    width: auto;
    min-width: 9rem;
}

.wiki-edit-actions .time-btn-secondary {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wiki-delete-form {
    display: flex;
    justify-content: flex-end;
}

.wiki-delete-btn {
    border: 1px solid rgba(248, 113, 113, 0.35);
    border-radius: 0.85rem;
    background: rgba(127, 29, 29, 0.25);
    color: #fecaca;
    padding: 0.55rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

.wiki-delete-btn:hover {
    background: rgba(127, 29, 29, 0.45);
}

.wiki-edit-page,
.wiki-article-page {
    max-width: none;
    width: 100%;
}

.wiki-article-page .wiki-article {
    min-height: 12rem;
}

@media (min-width: 1280px) {
    .wiki-page {
        max-width: min(100%, 88rem);
    }
}

.time-my-corr-page {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: min(100%, 56rem);
}

.time-my-corr-head-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.time-my-corr-hint {
    margin: 0;
}

.time-my-corr-link {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    margin-top: 0.35rem;
}

.time-my-corr-meta {
    display: grid;
    gap: 0.45rem;
    margin: 0.75rem 0 0;
    padding: 0.85rem 1rem;
    border-radius: 0.85rem;
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(148, 163, 184, 0.12);
}

.time-my-corr-meta-row {
    display: grid;
    grid-template-columns: minmax(7rem, 34%) 1fr;
    gap: 0.65rem;
    align-items: baseline;
}

.time-my-corr-meta-row dt {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
}

.time-my-corr-meta-row dd {
    margin: 0;
    color: #e2e8f0;
    font-weight: 600;
}

/* ── IT-News (App-exklusiv) — eigener Slider unter Promo ── */
.cp-news-block {
    margin: 0.35rem 0 0.25rem;
    padding-bottom: 0.15rem;
}
.cp-news-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
}
.cp-news-slider::-webkit-scrollbar {
    display: none;
}
.cp-news-slide {
    flex: 0 0 calc(100% - 2rem);
    scroll-snap-align: center;
    margin-left: 0.75rem;
}
.cp-news-slide:last-child {
    margin-right: 0.75rem;
}
.cp-news-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: 1.5rem;
    border: 1px solid rgba(0, 166, 251, 0.22);
    background: linear-gradient(165deg, rgba(0, 53, 84, 0.55) 0%, rgba(5, 25, 35, 0.82) 55%, rgba(7, 16, 24, 0.92) 100%);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    overflow: hidden;
    text-align: left;
    color: #fff;
    padding: 0.72rem;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    box-shadow:
        0 16px 44px rgba(0, 0, 0, 0.32),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}
.cp-news-card-visual {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    overflow: hidden;
    border-radius: 1.05rem;
    background: linear-gradient(135deg, #0c2438 0%, #051923 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.cp-news-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.cp-news-card-visual-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 25, 35, 0) 55%, rgba(5, 25, 35, 0.45) 100%);
    pointer-events: none;
}
.cp-news-card-badge {
    position: absolute;
    top: 0.65rem;
    left: 0.65rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.68rem;
    border-radius: 999px;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #051923;
    background: rgba(125, 211, 252, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.35);
}
.cp-news-card-fav {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.42);
    border: 1px solid rgba(251, 191, 36, 0.45);
    color: #fbbf24;
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.25);
}
.cp-news-card-body {
    padding: 0.85rem 0.35rem 0.45rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
}
.cp-news-card-title {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.22;
}
.cp-news-card-excerpt {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.48;
    color: rgba(255, 255, 255, 0.62);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cp-news-card-cta {
    margin-top: 0.15rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #7dd3fc;
}
.cp-news-dots {
    display: flex;
    justify-content: center;
    gap: 0.38rem;
    margin-top: 0.75rem;
}
.cp-news-dot {
    width: 0.38rem;
    height: 0.38rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
    transition: all 0.28s ease;
}
.cp-news-dot.active {
    width: 1.25rem;
    background: #fbbf24;
}
.cp-news-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0 1.25rem;
}
.cp-news-list .cp-news-slide {
    flex: none;
    margin: 0;
    width: 100%;
}
.cp-news-empty {
    margin: 0.5rem 1.25rem 0;
    padding: 1.25rem 1rem;
    border-radius: 1.1rem;
    border: 1px dashed rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.03);
    text-align: center;
    font-size: 0.82rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.48);
}

/* Home-Sheets: geschlossen komplett ausblenden (Hero ragt sonst über die Bottom-Nav) */
.portal-news-sheet[aria-hidden="true"],
.portal-push-inbox-sheet[aria-hidden="true"] {
    display: none !important;
    pointer-events: none !important;
}
/* Etwas höher als Glocke (82vh/36rem), sonst gleiches Sheet-Design */
.portal-news-sheet .portal-nav-sheet-panel {
    max-height: min(88vh, 42rem);
}
.portal-news-sheet .portal-nav-sheet-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    pointer-events: none;
}
.portal-news-hero-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 4.35rem;
    pointer-events: auto;
    overscroll-behavior-x: contain;
    background: transparent;
    border: none;
    box-shadow: none;
}
.portal-news-hero-track::-webkit-scrollbar {
    display: none;
}
.portal-news-hero-slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    display: flex;
    justify-content: center;
    background: transparent;
    border: none;
    box-shadow: none;
}
/* Blog-Bild: nur Kreis — kein viereckiger Ring/Rahmen der Glocke */
.portal-news-sheet .portal-nav-sheet-hero-ring.portal-news-hero-ring {
    display: block;
    overflow: hidden;
    padding: 0;
    line-height: 0;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 50%;
    flex-shrink: 0;
}
.portal-news-sheet .portal-nav-sheet-hero-ring.portal-news-hero-ring .portal-news-hero-img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    -webkit-clip-path: circle(50% at 50% 50%);
    clip-path: circle(50% at 50% 50%);
    box-shadow:
        0 10px 36px rgba(0, 0, 0, 0.45),
        0 0 28px rgba(0, 166, 251, 0.28);
}
.portal-news-hero-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}
.portal-news-hero-dots {
    display: flex;
    gap: 0.35rem;
    pointer-events: auto;
}
.portal-news-hero-dot {
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
    transition: all 0.25s ease;
}
.portal-news-hero-dot.active {
    width: 1rem;
    background: #00a6fb;
}
.portal-news-sheet-head {
    padding-bottom: 0.65rem;
}
.portal-news-meta-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.45rem;
}
.portal-news-reading {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.42);
}
@keyframes portal-news-fav-pop {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(251, 191, 36, 0);
    }
    48% {
        transform: scale(1.16);
        box-shadow: 0 0 24px rgba(251, 191, 36, 0.72);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 16px rgba(251, 191, 36, 0.45);
    }
}
@keyframes portal-news-fav-out {
    0% {
        transform: scale(1);
        box-shadow: 0 0 16px rgba(251, 191, 36, 0.45);
        color: #fbbf24;
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(251, 191, 36, 0);
        color: rgba(255, 255, 255, 0.55);
    }
}
.portal-news-fav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    z-index: 8;
    flex-shrink: 0;
}
body.portal-page .portal-news-fav-btn {
    transition: color 0.28s ease, background 0.28s ease, border-color 0.28s ease, box-shadow 0.35s ease !important;
}
body.portal-page .portal-news-fav-btn.is-fav-pop,
body.portal-page .portal-news-fav-btn.is-fav-out {
    transition: none !important;
}
.portal-news-fav-btn.is-favorited {
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.55);
    background: rgba(251, 191, 36, 0.16);
    box-shadow: 0 0 16px rgba(251, 191, 36, 0.45);
}
.portal-news-fav-btn.is-fav-pop {
    animation: portal-news-fav-pop 0.42s cubic-bezier(0.34, 1.35, 0.64, 1) forwards;
}
.portal-news-fav-btn.is-fav-out {
    animation: portal-news-fav-out 0.34s ease forwards;
}
.portal-news-fav-btn.is-favorited .portal-news-fav-icon--filled {
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.75));
}
.portal-news-fav-btn .portal-news-fav-icon--filled {
    display: none;
}
.portal-news-fav-btn.is-favorited > svg:first-of-type {
    display: none;
}
.portal-news-fav-btn.is-favorited .portal-news-fav-icon--filled {
    display: flex;
}
.portal-news-fav-toast {
    position: fixed;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
    z-index: 12050;
    max-width: min(92vw, 22rem);
    padding: 0.65rem 1rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #f8fafc;
    font-size: 0.78rem;
    font-weight: 600;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, 8px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.portal-news-fav-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}
.portal-news-sheet-title {
    text-align: center;
    font-size: 1.22rem;
    line-height: 1.28;
    padding: 0 0.15rem;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}
.portal-news-sheet-scroll {
    padding-top: 0.15rem;
}
.portal-news-article {
    font-size: 0.92rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.82);
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.portal-news-article p,
.portal-news-article li,
.portal-news-article h3 {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.portal-news-article p {
    margin: 0 0 0.95rem;
}
.portal-news-lead {
    font-size: 0.96rem;
    line-height: 1.62;
    color: rgba(255, 255, 255, 0.88);
}
.portal-news-h3 {
    margin: 1.15rem 0 0.55rem;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
    line-height: 1.3;
}
.portal-news-callout {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    margin: 0.85rem 0 1rem;
    padding: 0.85rem 0.9rem;
    border-radius: 0.95rem;
    font-size: 0.86rem;
    line-height: 1.52;
    max-width: 100%;
    box-sizing: border-box;
}
.portal-news-callout-icon {
    flex: 0 0 auto;
    font-size: 1.05rem;
    line-height: 1.35;
    margin-top: 0.05rem;
}
.portal-news-callout-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.portal-news-callout--warn {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.28);
    color: rgba(255, 255, 255, 0.88);
}
.portal-news-callout--info {
    background: rgba(0, 166, 251, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.28);
    color: rgba(255, 255, 255, 0.88);
}
.portal-news-steps {
    margin: 0.5rem 0 1rem;
    padding-left: 1.15rem;
    padding-right: 0.15rem;
    color: rgba(255, 255, 255, 0.78);
    max-width: 100%;
    box-sizing: border-box;
}
.portal-news-steps li {
    margin-bottom: 0.45rem;
}
.portal-news-footer-note {
    margin-top: 1.1rem;
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.55);
}
.portal-news-link {
    color: #7dd3fc;
    font-weight: 700;
    text-decoration: none;
}
.portal-news-link:active {
    opacity: 0.85;
}