/* ============================================================================
 NOA · Account-Dashboard (body.page-account)
 Aus assets/css/style.css ausgelagert (Perf): wird NUR auf den betreffenden
 Seiten via body_class geladen (partials/head.php $pageCssModules), nicht mehr
 render-blockend site-weit. Nutzt die globalen :root-Variablen aus style.css
 (die zuerst lädt). @media-Blöcke sind co-located → Ladereihenfolge unkritisch.
 ============================================================================ */

/* =============================================================================
 31. ACCOUNT-DASHBOARD · ROLLEN-BADGES & ADMIN-TOOLS
 -----------------------------------------------------------------------------
 Klare visuelle Trennung der beiden Kontotypen im Mein-Konto-Dashboard:
 - .status-badge.role-admin → Admin (orange, prominent)
 - .status-badge.role-user → Privatkunde (neutral)
 Plus: .acc-admin-tools (Sektion über den Stats, nur für Admins sichtbar).
 ============================================================================= */


/* 31.1 Rollen-Badges ------------------------------------------------------- */
.status-badge.role-admin {
 background: linear-gradient(135deg, var(--orange-deep) 0%, #8c4e00 100%);
 color: white;
 border: none;
 box-shadow: 0 6px 14px rgba(245,163,59,0.32);
}
.status-badge.role-admin .dot {
 background: white;
 box-shadow: 0 0 0 2px rgba(255,255,255,0.4);
}
.status-badge.role-user {
 background: var(--bg-soft);
 color: var(--muted);
 border: 1px solid rgba(16,63,124,0.12);
}
.status-badge.role-user .dot {
 background: var(--muted);
}


/* 31.2 Admin-Tools-Panel -------------------------------------------------- */
.acc-admin-tools {
 margin-bottom: 28px;
 padding: 28px 30px;
 border-radius: 22px;
 background:
 radial-gradient(circle at 100% 0%, rgba(245,163,59,0.14), transparent 50%),
 linear-gradient(160deg, #ffffff 0%, var(--bg-soft) 100%);
 border: 1px solid rgba(245,163,59,0.32);
 box-shadow: 0 10px 28px rgba(18,63,124,0.06);
}

.acc-admin-tools-head {
 margin-bottom: 22px;
 padding-bottom: 18px;
 border-bottom: 1px dashed rgba(245,163,59,0.32);
}
.acc-admin-tools-title {
 display: flex;
 align-items: flex-start;
 gap: 14px;
}
.acc-admin-tools-title > .material-symbols-outlined {
 flex-shrink: 0;
 width: 44px; height: 44px;
 border-radius: 12px;
 background: var(--orange-deep);
 color: white;
 display: grid;
 place-items: center;
 font-size: 24px !important;
 box-shadow: 0 6px 14px rgba(245,163,59,0.32);
}
.acc-admin-tools-title > div {
 display: flex;
 flex-direction: column;
 gap: 3px;
}
.acc-admin-tools-title strong {
 font-size: 1.05rem;
 font-weight: 900;
 color: var(--text-strong);
 letter-spacing: -0.01em;
}
.acc-admin-tools-title span {
 font-size: 0.92rem;
 color: var(--muted);
 line-height: 1.45;
}

.acc-admin-tools-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 14px;
}

.acc-admin-card {
 display: flex;
 align-items: center;
 gap: 14px;
 padding: 18px 20px;
 background: white;
 border: 1px solid rgba(0,174,184,0.18);
 border-radius: 16px;
 color: inherit;
 transition: transform .15s, box-shadow .2s, border-color .2s;
}
.acc-admin-card:hover {
 transform: translateY(-2px);
 border-color: var(--turquoise);
 box-shadow: 0 14px 28px rgba(18,63,124,0.10);
}
.acc-admin-card-icon {
 flex-shrink: 0;
 width: 44px; height: 44px;
 border-radius: 12px;
 background: linear-gradient(135deg, rgba(0,169,180,0.15), rgba(0,169,180,0.06));
 display: grid;
 place-items: center;
 color: var(--turquoise-deep);
}
.acc-admin-card-icon .material-symbols-outlined { font-size: 22px; }
.acc-admin-card-body {
 display: flex;
 flex-direction: column;
 gap: 2px;
 min-width: 0;
 flex-grow: 1;
}
.acc-admin-card-body strong {
 font-size: 0.96rem;
 font-weight: 900;
 color: var(--text-strong);
 letter-spacing: -0.01em;
}
.acc-admin-card-body span {
 font-size: 0.82rem;
 color: var(--muted);
 line-height: 1.4;
}
.acc-admin-card-arrow {
 flex-shrink: 0;
 font-size: 20px !important;
 color: var(--turquoise);
 transition: transform .15s;
}
.acc-admin-card:hover .acc-admin-card-arrow {
 transform: translateX(4px);
}


/* 31.3 Responsive ---------------------------------------------------------- */
@media (max-width: 980px) {
 .acc-admin-tools-grid {
 grid-template-columns: repeat(2, 1fr);
 }
}
@media (max-width: 720px) {
 .acc-admin-tools {
 padding: 22px 20px;
 border-radius: 18px;
 }
 .acc-admin-tools-grid {
 grid-template-columns: 1fr;
 }
 .acc-admin-card { padding: 16px 18px; }
}

/* =============================================================================
 31.4 CRM-DASHBOARD · Zentrale Admin-Übersicht im Account-Bereich
 -----------------------------------------------------------------------------
 Erscheint im Admin-Account (account.html) oberhalb der normalen Tabs.
 Kombination aus Header, KPIs, Quick-Actions und letzten Aktivitäten.
 ============================================================================= */

.acc-crm {
 background: linear-gradient(160deg, #ffffff 0%, var(--bg-soft) 100%);
 border: 1.5px solid rgba(0,174,184,0.22);
 box-shadow: 0 24px 60px rgba(16,63,124,0.10);
 padding: 32px 30px;
 border-radius: 24px;
 position: relative;
 overflow: hidden;
}
.acc-crm::before {
 content: "";
 position: absolute;
 top: -120px; right: -120px;
 width: 320px; height: 320px;
 border-radius: 50%;
 background: radial-gradient(circle, rgba(0,174,184,0.10), transparent 70%);
 pointer-events: none;
}

/* --- 1. Header ----------------------------------------------------------- */
.acc-crm-head {
 display: flex;
 justify-content: space-between;
 align-items: flex-start;
 gap: 22px;
 flex-wrap: wrap;
 margin-bottom: 28px;
 position: relative;
 z-index: 1;
}
.acc-crm-head-title {
 display: flex;
 gap: 18px;
 align-items: flex-start;
 flex: 1 1 320px;
 min-width: 0;
}
.acc-crm-head-icon {
 width: 56px;
 height: 56px;
 border-radius: 16px;
 background: linear-gradient(135deg, var(--turquoise-deep), var(--turquoise-dark));
 color: white;
 display: grid;
 place-items: center;
 flex-shrink: 0;
 box-shadow: 0 12px 28px rgba(0,174,184,0.32);
}
.acc-crm-head-icon .material-symbols-outlined { font-size: 28px; }
.acc-crm-eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 color: var(--turquoise-deep);
 font-size: 0.78rem;
 font-weight: 900;
 text-transform: uppercase;
 letter-spacing: 0.12em;
 margin-bottom: 6px;
}
.acc-crm-live {
 width: 8px; height: 8px;
 border-radius: 50%;
 background: var(--turquoise);
 box-shadow: 0 0 0 0 rgba(0,174,184,0.55);
 animation: acc-crm-pulse 1.8s ease-in-out infinite;
}
@keyframes acc-crm-pulse {
 0% { box-shadow: 0 0 0 0 rgba(0,174,184,0.55); }
 70% { box-shadow: 0 0 0 10px rgba(0,174,184,0); }
 100% { box-shadow: 0 0 0 0 rgba(0,174,184,0); }
}
.acc-crm-head-title h2 {
 font-size: clamp(1.4rem, 2.6vw, 1.9rem);
 color: var(--text-strong);
 letter-spacing: -0.02em;
 margin-bottom: 6px;
 line-height: 1.15;
}
.acc-crm-head-title p {
 color: var(--muted);
 font-size: 0.95rem;
 max-width: 540px;
}
.acc-crm-head-actions {
 display: flex;
 gap: 10px;
 flex-wrap: wrap;
}
.acc-crm-head-actions .btn-sm {
 padding: 10px 18px;
 font-size: 0.78rem;
 min-height: 42px;
}
.acc-crm-head-actions .material-symbols-outlined { font-size: 18px; }

/* --- 2. KPIs ------------------------------------------------------------- */
.acc-crm-stats {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 16px;
 margin-bottom: 28px;
 position: relative;
 z-index: 1;
}
.acc-crm-stat {
 background: white;
 border: 1px solid rgba(0,174,184,0.16);
 border-radius: 16px;
 padding: 18px;
 display: flex;
 gap: 14px;
 align-items: center;
 box-shadow: 0 8px 22px rgba(16,63,124,0.06);
 transition: transform .2s ease, box-shadow .2s ease;
}
.acc-crm-stat:hover {
 transform: translateY(-2px);
 box-shadow: 0 14px 30px rgba(16,63,124,0.10);
}
.acc-crm-stat-icon {
 width: 48px;
 height: 48px;
 border-radius: 14px;
 display: grid;
 place-items: center;
 flex-shrink: 0;
}
.acc-crm-stat-icon .material-symbols-outlined { font-size: 24px; }
.acc-crm-stat-icon.icon-blue { background: rgba(16,63,124,0.10); color: var(--text); }
.acc-crm-stat-icon.icon-turquoise { background: rgba(0,174,184,0.14); color: var(--turquoise-deep); }
.acc-crm-stat-icon.icon-orange { background: rgba(245,163,59,0.16); color: #b46f10; }
.acc-crm-stat-icon.icon-deep { background: rgba(10,44,90,0.10); color: var(--text-strong); }
.acc-crm-stat-body { min-width: 0; }
.acc-crm-stat-label {
 display: block;
 font-size: 0.74rem;
 font-weight: 900;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: var(--muted);
 margin-bottom: 4px;
}
.acc-crm-stat-value {
 display: block;
 font-size: 1.55rem;
 font-weight: 900;
 letter-spacing: -0.02em;
 color: var(--text-strong);
 line-height: 1;
}
.acc-crm-stat-meta {
 display: block;
 color: var(--muted);
 font-size: 0.78rem;
 margin-top: 5px;
 font-weight: 600;
}

/* --- Section-Titel innerhalb des CRM ------------------------------------- */
.acc-crm-section-title {
 font-size: 0.78rem;
 font-weight: 900;
 text-transform: uppercase;
 letter-spacing: 0.10em;
 color: var(--turquoise-deep);
 margin-bottom: 14px;
}

/* --- 3. Quick-Actions ---------------------------------------------------- */
.acc-crm-quick {
 margin-bottom: 28px;
 position: relative;
 z-index: 1;
}
.acc-crm-quick-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 12px;
}
.acc-crm-quick-card {
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 14px 16px;
 background: white;
 border: 1px solid rgba(0,174,184,0.18);
 border-radius: 14px;
 transition: all .2s ease;
 cursor: pointer;
 color: var(--text-strong);
}
.acc-crm-quick-card:hover {
 border-color: var(--turquoise);
 background: linear-gradient(135deg, white, var(--bg-soft));
 transform: translateY(-2px);
 box-shadow: 0 12px 26px rgba(16,63,124,0.08);
}
.acc-crm-quick-icon {
 width: 38px; height: 38px;
 border-radius: 10px;
 background: rgba(0,174,184,0.12);
 color: var(--turquoise-deep);
 display: grid; place-items: center;
 flex-shrink: 0;
}
.acc-crm-quick-icon .material-symbols-outlined { font-size: 20px; }
.acc-crm-quick-card strong {
 display: block;
 font-size: 0.92rem;
 letter-spacing: -0.01em;
 color: var(--text-strong);
}
.acc-crm-quick-card span {
 display: block;
 color: var(--muted);
 font-size: 0.78rem;
 font-weight: 600;
}

/* --- 4. Letzte Aktivitäten ---------------------------------------------- */
.acc-crm-recent {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 18px;
 margin-bottom: 28px;
 position: relative;
 z-index: 1;
}
.acc-crm-recent-col {
 background: white;
 border: 1px solid rgba(0,174,184,0.16);
 border-radius: 16px;
 padding: 20px;
}
.acc-crm-recent-head {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 14px;
 gap: 8px;
}
.acc-crm-recent-head .acc-crm-section-title { margin: 0; }
.acc-crm-recent-link {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 color: var(--turquoise-deep);
 font-weight: 800;
 font-size: 0.82rem;
 transition: color .15s ease;
}
.acc-crm-recent-link:hover { color: var(--text-strong); }
.acc-crm-recent-link .material-symbols-outlined { font-size: 16px; }
.acc-crm-recent-list {
 display: grid;
 gap: 8px;
}
.acc-crm-recent-item {
 display: grid;
 grid-template-columns: 36px 1fr auto;
 align-items: center;
 gap: 12px;
 padding: 10px 12px;
 background: var(--bg-soft);
 border-radius: 12px;
 transition: background .15s ease;
}
.acc-crm-recent-item:hover { background: rgba(0,174,184,0.08); }
.acc-crm-recent-avatar {
 width: 36px; height: 36px;
 border-radius: 50%;
 background: var(--turquoise-deep);
 color: white;
 display: grid;
 place-items: center;
 font-size: 0.8rem;
 font-weight: 900;
 letter-spacing: 0.02em;
}
.acc-crm-recent-info { min-width: 0; }
.acc-crm-recent-info strong {
 display: block;
 font-size: 0.92rem;
 color: var(--text-strong);
 letter-spacing: -0.01em;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
.acc-crm-recent-info span {
 display: block;
 color: var(--muted);
 font-size: 0.78rem;
 font-weight: 600;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
.acc-crm-recent-meta {
 text-align: right;
 font-size: 0.78rem;
 font-weight: 800;
 color: var(--text-strong);
}
.acc-crm-recent-meta small {
 display: block;
 font-weight: 600;
 color: var(--muted);
 font-size: 0.7rem;
 margin-top: 2px;
}
.acc-crm-recent-empty {
 background: var(--bg-soft);
 border-radius: 12px;
 padding: 16px;
 color: var(--muted);
 font-size: 0.88rem;
 text-align: center;
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1100px) {
 .acc-crm-stats { grid-template-columns: repeat(2, 1fr); }
 .acc-crm-quick-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
 .acc-crm {
 padding: 24px 18px;
 border-radius: 18px;
 }
 .acc-crm-head { gap: 14px; }
 .acc-crm-head-title { flex-direction: column; gap: 14px; }
 .acc-crm-head-icon { width: 46px; height: 46px; }
 .acc-crm-head-actions .btn-sm { flex: 1 1 auto; }
 .acc-crm-stats { grid-template-columns: 1fr; }
 .acc-crm-quick-grid { grid-template-columns: 1fr; }
 .acc-crm-recent { grid-template-columns: 1fr; }
}


/* =============================================================================
 32. ADMIN-VERWALTUNG (CRM) · Admin-Liste, Promote, Create
 -----------------------------------------------------------------------------
 Wird ausschließlich im CRM-Dashboard (admin.html) verwendet.
 32.1 Sektion-Header
 32.2 3-Spalten-Card-Grid
 32.3 Admin-Liste (mit Demote-Button & Lock-Hinweisen)
 32.4 Formulare (Promote + Create-Admin)
 32.5 Responsive
 ============================================================================= */


/* 32.1 Sektion-Head ------------------------------------------------------- */
.admin-roles-section {
 margin: 30px 0 36px;
 padding: 28px 30px;
 border-radius: 22px;
 background:
 radial-gradient(circle at 100% 0%, rgba(245,163,59,0.10), transparent 50%),
 linear-gradient(160deg, #ffffff 0%, var(--bg-soft) 100%);
 border: 1px solid rgba(245,163,59,0.28);
}
.admin-roles-head {
 margin-bottom: 22px;
 padding-bottom: 18px;
 border-bottom: 1px dashed rgba(245,163,59,0.32);
}
.admin-roles-head h2 {
 display: flex;
 align-items: center;
 gap: 10px;
 color: var(--text-strong);
 font-size: 1.25rem;
 letter-spacing: -0.02em;
 font-weight: 900;
 margin: 0 0 6px;
}
.admin-roles-head h2 .material-symbols-outlined {
 color: var(--orange);
 font-size: 24px;
}
.admin-roles-head p {
 color: var(--muted);
 font-size: 0.92rem;
 margin: 0;
}


/* 32.2 Card-Grid ---------------------------------------------------------- */
.admin-roles-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 18px;
}
.admin-roles-card {
 background: white;
 border-radius: 16px;
 border: 1px solid rgba(0,174,184,0.18);
 padding: 22px 24px;
 box-shadow: 0 6px 16px rgba(18,63,124,0.05);
}
.admin-roles-card-wide {
 grid-column: 1 / -1;
}
.admin-roles-card h3 {
 display: flex;
 align-items: center;
 gap: 8px;
 font-size: 1rem;
 font-weight: 900;
 color: var(--text-strong);
 margin: 0 0 16px;
 letter-spacing: -0.01em;
}
.admin-roles-card h3 .material-symbols-outlined {
 font-size: 20px;
 color: var(--turquoise-deep);
}


/* 32.3 Admin-Liste -------------------------------------------------------- */
.admin-list {
 list-style: none;
 padding: 0;
 margin: 0;
 display: flex;
 flex-direction: column;
 gap: 10px;
}
.admin-list-empty {
 padding: 16px;
 color: var(--muted);
 background: var(--bg-soft);
 border-radius: 12px;
 text-align: center;
 font-style: italic;
}
.admin-list-item {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 14px;
 padding: 12px 14px;
 background: var(--bg-soft);
 border: 1px solid rgba(0,174,184,0.16);
 border-radius: 12px;
 transition: border-color .15s, background .15s;
}
.admin-list-item:hover {
 border-color: var(--turquoise);
 background: white;
}
.admin-list-item.is-self {
 background: linear-gradient(135deg, rgba(0,169,180,0.06), rgba(0,169,180,0.02));
 border-color: rgba(0,169,180,0.35);
}
.admin-list-meta {
 display: flex;
 flex-direction: column;
 gap: 2px;
 min-width: 0;
 flex: 1 1 auto;
}
.admin-list-meta strong {
 font-size: 0.95rem;
 font-weight: 900;
 color: var(--text-strong);
 letter-spacing: -0.01em;
 display: inline-flex;
 align-items: center;
 gap: 8px;
}
.admin-list-meta span:not(.admin-list-self-tag):not(.admin-list-pill) {
 font-size: 0.82rem;
 color: var(--muted);
}
.admin-list-self-tag {
 display: inline-block;
 font-size: 0.7rem;
 font-weight: 800;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 padding: 2px 8px;
 border-radius: 999px;
 background: var(--turquoise-deep);
 color: white;
}
.admin-list-pill {
 display: inline-block;
 width: max-content;
 margin-top: 4px;
 margin-right: 6px;
 font-size: 0.7rem;
 font-weight: 800;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 padding: 3px 9px;
 border-radius: 999px;
 background: rgba(245,163,59,0.18);
 color: #a35200;
}
.admin-list-pill.apf-pill-ok {
 background: rgba(0,169,180,0.16);
 color: var(--turquoise-deep);
}
.admin-list-pill.apf-pill-warn {
 background: rgba(245,163,59,0.18);
 color: #a35200;
}
.admin-list-pill.apf-pill-muted {
 background: rgba(90,122,172,0.14);
 color: var(--muted);
}
.admin-list-tags {
 display: flex;
 flex-wrap: wrap;
 gap: 4px 0;
 margin-top: 6px;
}
.admin-list-actions-stack {
 display: flex;
 flex-direction: column;
 gap: 4px;
 align-items: flex-end;
}
.admin-list-actions-stack .btn-link,
.admin-list-actions-stack .btn-orange {
 font-size: 0.82rem;
 padding: 6px 10px;
 white-space: nowrap;
}
.admin-list-actions { flex-shrink: 0; }
.admin-list-actions .adm-demote {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 text-decoration: none;
 font-size: 0.85rem;
 color: #8a2a32;
}
.admin-list-actions .adm-demote:hover { color: #c1424c; }
.admin-list-actions .adm-demote .material-symbols-outlined { font-size: 16px; }
.admin-list-locked {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 font-size: 0.78rem;
 color: var(--muted);
 font-style: italic;
}
.admin-list-locked .material-symbols-outlined { font-size: 14px; }


/* 32.4 Formulare ---------------------------------------------------------- */
.admin-roles-form .apf-field { margin-bottom: 16px; }
.admin-roles-form button[type="submit"] {
 width: 100%;
 justify-content: center;
}
.admin-roles-form-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 14px 16px;
}
.admin-roles-form-grid .apf-field { margin-bottom: 0; }
.admin-roles-form-grid .apf-field-full {
 grid-column: 1 / -1;
}


/* 32.5 Responsive --------------------------------------------------------- */
@media (max-width: 980px) {
 .admin-roles-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
 .admin-roles-section { padding: 22px 18px; border-radius: 18px; }
 .admin-roles-card { padding: 18px; }
 .admin-roles-form-grid { grid-template-columns: 1fr; }
 .admin-list-item {
 flex-direction: column;
 align-items: flex-start;
 gap: 8px;
 }
 .admin-list-actions { align-self: stretch; }
 .admin-list-actions .adm-demote { width: 100%; justify-content: center; }
}


/* =============================================================================
 33. ACCOUNT-DOWNLOADS · Materialien / Karten-Grid
 -----------------------------------------------------------------------------
 Wird im Account-Bereich unter dem Tab „Downloads" gerendert.
 Karten werden zur Laufzeit aus assets/js/account-downloads.js
 (Array `DOWNLOADS`) erzeugt. Diese Sektion enthält nur die
 visuelle Schicht — Logik & Daten liegen separat.

 33.1 Panel-Header-Hint
 33.2 Info-Notice-Variante (Downloads-Block)
 33.3 Grid + Karte (Body, Icon, Tags, Meta, Button)
 33.4 Hover- & Fokus-Zustand
 33.5 Responsive (≤980 / ≤720 / ≤520)
 ============================================================================= */


/* 33.1 Panel-Hint --------------------------------------------------------- */
.acc-panel-hint {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 6px 12px;
 border-radius: 999px;
 background: rgba(0,174,184,0.10);
 color: var(--turquoise-deep);
 font-size: 0.78rem;
 font-weight: 800;
 letter-spacing: 0.02em;
}


/* 33.2 Info-Notice-Variante ---------------------------------------------- */
.info-notice-downloads {
 background:
 radial-gradient(circle at 100% 0%, rgba(0,174,184,0.10), transparent 55%),
 linear-gradient(160deg, #ffffff 0%, var(--bg-soft) 100%);
 border: 1px solid rgba(0,174,184,0.22);
}
.info-notice-downloads .info-notice-icon {
 background: linear-gradient(135deg, rgba(0,169,180,0.18), rgba(0,169,180,0.06));
 color: var(--turquoise-deep);
}


/* 33.3 Grid + Karten ------------------------------------------------------ */
.dl-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
 gap: 18px;
 margin-top: 22px;
}

.dl-card {
 position: relative;
 display: flex;
 flex-direction: column;
 gap: 14px;
 padding: 22px 22px 20px;
 background: white;
 border: 1px solid rgba(0,174,184,0.18);
 border-radius: 18px;
 box-shadow: 0 6px 16px rgba(18,63,124,0.04);
 transition: transform .18s ease, box-shadow .22s ease, border-color .2s ease;
 overflow: hidden;
}
.dl-card::before {
 content: "";
 position: absolute;
 inset: 0;
 pointer-events: none;
 background: radial-gradient(circle at 100% 0%, rgba(0,174,184,0.10), transparent 55%);
 opacity: 0;
 transition: opacity .25s ease;
}

/* Icon-Tile */
.dl-card-icon {
 width: 52px;
 height: 52px;
 border-radius: 14px;
 background: linear-gradient(135deg, rgba(0,169,180,0.16), rgba(0,169,180,0.05));
 display: grid;
 place-items: center;
 color: var(--turquoise-deep);
 flex-shrink: 0;
 transition: transform .25s ease, background .25s ease;
}
.dl-card-icon .material-symbols-outlined { font-size: 28px; }

/* Body */
.dl-card-body {
 display: flex;
 flex-direction: column;
 gap: 8px;
 flex-grow: 1;
 min-width: 0;
}
.dl-card-tags {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 6px;
}
.dl-card-type {
 display: inline-block;
 padding: 4px 10px;
 border-radius: 999px;
 background: var(--turquoise-deep);
 color: white;
 font-size: 0.7rem;
 font-weight: 900;
 letter-spacing: 0.05em;
}
.dl-card-cat {
 display: inline-block;
 padding: 4px 10px;
 border-radius: 999px;
 background: rgba(90,122,172,0.12);
 color: var(--muted);
 font-size: 0.7rem;
 font-weight: 800;
 letter-spacing: 0.03em;
}
.dl-card-title {
 font-size: 1.05rem;
 font-weight: 900;
 color: var(--text-strong);
 letter-spacing: -0.01em;
 margin: 0;
 line-height: 1.25;
}
.dl-card-desc {
 font-size: 0.88rem;
 color: var(--muted);
 line-height: 1.5;
 margin: 0;
}

/* Meta-Zeile (Dateigröße etc.) */
.dl-card-meta {
 display: flex;
 flex-wrap: wrap;
 gap: 14px;
 font-size: 0.78rem;
 color: var(--muted);
 font-weight: 700;
 min-height: 18px;
}
.dl-meta-item {
 display: inline-flex;
 align-items: center;
 gap: 5px;
}
.dl-meta-item .material-symbols-outlined { font-size: 16px; }

/* Action / Button */
.dl-card-action {
 margin-top: 4px;
}
.dl-card-btn {
 width: 100%;
 justify-content: center;
 gap: 8px;
}
.dl-card-btn .material-symbols-outlined { font-size: 18px; }


/* 33.4 Hover + Fokus ------------------------------------------------------ */
.dl-card:hover {
 transform: translateY(-3px);
 border-color: var(--turquoise);
 box-shadow: 0 18px 38px rgba(18,63,124,0.10);
}
.dl-card:hover::before { opacity: 1; }
.dl-card:hover .dl-card-icon {
 transform: scale(1.05) rotate(-2deg);
 background: linear-gradient(135deg, rgba(0,169,180,0.28), rgba(0,169,180,0.10));
}
.dl-card-btn:focus-visible {
 outline: 3px solid rgba(0,174,184,0.45);
 outline-offset: 2px;
}


/* 33.5 Responsive --------------------------------------------------------- */
@media (max-width: 980px) {
 .dl-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}
@media (max-width: 720px) {
 .dl-grid { grid-template-columns: 1fr; gap: 14px; }
 .dl-card { padding: 18px 18px 16px; border-radius: 16px; }
 .dl-card-title { font-size: 1rem; }
 .dl-card-desc { font-size: 0.85rem; }
}
@media (max-width: 520px) {
 .acc-panel-hint { display: none; }
}



/* =============================================================================
 35. ACCOUNT-MANAGEMENT (Admin-Tab auf account.html)
 -----------------------------------------------------------------------------
 Eingebettete Verwaltungs-Tabelle für alle Konten. Verfeinert das
 bestehende Admin-Tabellen-Vokabular für den Tab-Kontext.

 Bestandteile
 35.1 Stats-Cards
 35.2 Toolbar (Suche, Filter, Aktionen)
 35.3 Neu-Account-Karte (mit Pseudo-2FA-Hint)
 35.4 Tabelle + Aktions-Icons
 35.5 Detail-/Edit-Slot
 35.6 Forgot-/Reset-Auth-Panels
 35.7 Sunset-Page (admin.html-Redirect)
 35.8 Responsive
 ============================================================================= */


/* 35.1 Stats-Cards -------------------------------------------------------- */
.acc-mgr-stats {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 14px;
 margin-bottom: 22px;
}
.acc-mgr-stat {
 display: flex;
 align-items: center;
 gap: 14px;
 padding: 16px 18px;
 background: white;
 border: 1px solid rgba(0,174,184,0.18);
 border-radius: 16px;
 box-shadow: 0 6px 14px rgba(18,63,124,0.05);
}
.acc-mgr-stat-icon {
 flex-shrink: 0;
 width: 44px; height: 44px;
 border-radius: 12px;
 display: grid;
 place-items: center;
}
.acc-mgr-stat-icon .material-symbols-outlined { font-size: 22px; }
.acc-mgr-stat-icon.icon-blue { background: rgba(16,63,124,0.10); color: var(--text); }
.acc-mgr-stat-icon.icon-deep { background: rgba(10,44,90,0.10); color: var(--text-strong); }
.acc-mgr-stat-icon.icon-turquoise { background: rgba(0,174,184,0.14); color: var(--turquoise-deep); }
.acc-mgr-stat-icon.icon-orange { background: rgba(245,163,59,0.16); color: #b46f10; }
.acc-mgr-stat-label {
 display: block;
 font-size: 0.78rem;
 color: var(--muted);
 text-transform: uppercase;
 letter-spacing: 0.04em;
 font-weight: 800;
}
.acc-mgr-stat-value {
 font-size: 1.6rem;
 font-weight: 900;
 color: var(--text-strong);
 letter-spacing: -0.01em;
 line-height: 1.1;
 display: block;
 margin: 2px 0;
}
.acc-mgr-stat-meta {
 display: block;
 font-size: 0.78rem;
 color: var(--muted);
}


/* 35.2 Toolbar ------------------------------------------------------------ */
.acc-mgr-toolbar {
 display: grid;
 grid-template-columns: minmax(260px, 1fr) auto auto auto;
 gap: 12px;
 align-items: center;
 margin-bottom: 18px;
}
.acc-mgr-search {
 position: relative;
 display: flex;
 align-items: center;
}
.acc-mgr-search .material-symbols-outlined {
 position: absolute;
 left: 14px;
 color: var(--muted);
 font-size: 20px;
 pointer-events: none;
}
.acc-mgr-search input {
 width: 100%;
 padding: 12px 14px 12px 42px;
 border-radius: 12px;
 border: 1px solid rgba(0,174,184,0.22);
 background: white;
 font-size: 0.95rem;
 font-family: inherit;
}
.acc-mgr-search input:focus {
 outline: none;
 border-color: var(--turquoise);
 box-shadow: 0 0 0 3px rgba(0,174,184,0.18);
}
.acc-mgr-filter {
 display: flex;
 align-items: center;
 gap: 8px;
}
.acc-mgr-filter label {
 font-size: 0.82rem;
 color: var(--muted);
 font-weight: 700;
}
.acc-mgr-filter select {
 padding: 10px 12px;
 border-radius: 10px;
 border: 1px solid rgba(0,174,184,0.22);
 background: white;
 font-family: inherit;
 font-size: 0.9rem;
}
.acc-mgr-toolbar-actions {
 display: flex;
 gap: 8px;
}


/* 35.3 Neu-Account-Karte -------------------------------------------------- */
.acc-mgr-create-card {
 margin-bottom: 22px;
 padding: 22px 24px;
 background: linear-gradient(160deg, #ffffff 0%, var(--bg-soft) 100%);
 border: 1px solid rgba(245,163,59,0.28);
 border-radius: 18px;
 box-shadow: 0 10px 24px rgba(18,63,124,0.06);
}
.acc-mgr-create-head {
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-bottom: 8px;
}
.acc-mgr-create-head h4 {
 display: flex;
 align-items: center;
 gap: 8px;
 font-size: 1.05rem;
 font-weight: 900;
 color: var(--text-strong);
 margin: 0;
}
.acc-mgr-create-head h4 .material-symbols-outlined {
 color: var(--orange);
 font-size: 22px;
}
.acc-mgr-create-sub {
 color: var(--muted);
 font-size: 0.9rem;
 margin: 0 0 16px;
}
.acc-mgr-create-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 14px 16px;
}
.acc-mgr-create-grid .apf-field { margin-bottom: 0; }
.acc-mgr-create-grid .apf-field-full {
 grid-column: 1 / -1;
}


/* 35.4 Tabelle ------------------------------------------------------------ */
.acc-mgr-table-wrap {
 border-radius: 16px;
 background: white;
 border: 1px solid rgba(0,174,184,0.18);
 overflow: hidden;
 box-shadow: 0 8px 24px rgba(18,63,124,0.05);
}
.acc-mgr-table {
 width: 100%;
 border-collapse: collapse;
 background: white;
}
.acc-mgr-table thead th {
 text-align: left;
 font-size: 0.78rem;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 color: var(--muted);
 font-weight: 800;
 padding: 14px 16px;
 background: var(--bg-soft);
 border-bottom: 1px solid rgba(0,174,184,0.14);
 white-space: nowrap;
}
.acc-mgr-table thead th.num { text-align: right; }
.acc-mgr-table thead th.acc-mgr-actions-col { text-align: right; }
.acc-mgr-table tbody td {
 padding: 14px 16px;
 border-bottom: 1px solid rgba(0,174,184,0.10);
 font-size: 0.92rem;
 color: var(--text-strong);
 vertical-align: middle;
}
.acc-mgr-table tbody tr:last-child td { border-bottom: 0; }
.acc-mgr-table tbody tr:hover { background: var(--bg-soft); }
.acc-mgr-table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }

.acc-mgr-pill {
 display: inline-block;
 font-size: 0.72rem;
 font-weight: 800;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 padding: 4px 10px;
 border-radius: 999px;
 background: rgba(90,122,172,0.14);
 color: var(--muted);
}
.acc-mgr-pill.ok { background: rgba(0,174,184,0.14); color: var(--turquoise-deep); }
.acc-mgr-pill.warn { background: rgba(245,163,59,0.18); color: #a35200; }
.acc-mgr-pill.err { background: rgba(220,38,38,0.12); color: #b91c1c; }

.acc-mgr-actions {
 display: flex;
 gap: 4px;
 justify-content: flex-end;
}
.acc-mgr-actions .btn-icon {
 display: inline-grid;
 place-items: center;
 width: 34px; height: 34px;
 background: transparent;
 border: 1px solid rgba(0,174,184,0.22);
 border-radius: 10px;
 cursor: pointer;
 color: var(--text);
 transition: border-color .15s, background .15s, color .15s;
}
.acc-mgr-actions .btn-icon:hover {
 border-color: var(--turquoise);
 background: var(--bg-soft);
 color: var(--turquoise-deep);
}
.acc-mgr-actions .btn-icon.danger { color: #b91c1c; border-color: rgba(220,38,38,0.32); }
.acc-mgr-actions .btn-icon.danger:hover {
 background: rgba(220,38,38,0.08);
 color: #b91c1c;
}
.acc-mgr-actions .btn-icon .material-symbols-outlined { font-size: 18px; }

.acc-mgr-empty {
 padding: 28px 24px;
 text-align: center;
 color: var(--muted);
}
.acc-mgr-empty strong { color: var(--text-strong); }


/* 35.5 Detail-/Edit-Slot -------------------------------------------------- */
.acc-mgr-detail {
 margin-top: 22px;
 padding: 22px 24px;
 background: white;
 border: 1px solid rgba(0,174,184,0.22);
 border-radius: 18px;
 box-shadow: 0 10px 24px rgba(18,63,124,0.06);
}
.acc-mgr-detail-head {
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-bottom: 10px;
}
.acc-mgr-detail-head h4 {
 display: flex;
 align-items: center;
 gap: 8px;
 margin: 0;
 font-size: 1.05rem;
 font-weight: 900;
 color: var(--text-strong);
}
.acc-mgr-detail-meta {
 margin: 0 0 14px;
 display: flex;
 gap: 8px;
 flex-wrap: wrap;
}


/* 35.6 Forgot-/Reset-Auth-Panels ----------------------------------------- */
.auth-panel-title {
 font-size: 1.15rem;
 font-weight: 900;
 color: var(--text-strong);
 margin: 0 0 6px;
 letter-spacing: -0.01em;
}
.auth-panel-sub {
 color: var(--muted);
 font-size: 0.92rem;
 margin: 0 0 18px;
}
.auth-row-meta {
 display: flex;
 justify-content: flex-end;
 margin: -4px 0 12px;
}

/* Auth-Header (statt Tab-Pills — Self-Signup deaktiviert) */
.auth-header {
 margin-bottom: 18px;
 text-align: center;
}
.auth-header-title {
 font-size: 1.25rem;
 font-weight: 900;
 color: var(--text-strong);
 letter-spacing: -0.02em;
 margin: 0 0 4px;
}
.auth-header-sub {
 color: var(--muted);
 font-size: 0.9rem;
 margin: 0;
}

/* „Kein Konto?"-Hinweis statt Self-Service-Signup-Link */
.auth-no-signup {
 display: flex;
 gap: 12px;
 align-items: flex-start;
 margin-top: 16px;
 padding: 14px 16px;
 border-radius: 14px;
 background: rgba(0,174,184,0.06);
 border: 1px solid rgba(0,174,184,0.18);
}
.auth-no-signup .material-symbols-outlined {
 color: var(--turquoise-deep);
 font-size: 22px;
 flex-shrink: 0;
 margin-top: 1px;
}
.auth-no-signup strong {
 display: block;
 color: var(--text-strong);
 font-size: 0.95rem;
 font-weight: 900;
 margin-bottom: 2px;
}
.auth-no-signup p {
 color: var(--muted);
 font-size: 0.85rem;
 line-height: 1.45;
 margin: 0;
}
.auth-no-signup a {
 color: var(--turquoise-deep);
 font-weight: 700;
 text-decoration: underline;
}
.auth-link-small {
 font-size: 0.84rem;
 font-weight: 700;
 color: var(--turquoise-deep);
 text-decoration: underline;
 cursor: pointer;
}
.auth-link-small:hover { color: var(--text-strong); }
.auth-helper-muted {
 font-size: 0.78rem;
 color: var(--muted);
 margin-top: 6px;
}
.form-inline-success {
 margin: 10px 0;
 padding: 10px 12px;
 border-radius: 10px;
 background: rgba(0,174,184,0.10);
 color: var(--turquoise-deep);
 border: 1px solid rgba(0,174,184,0.22);
 font-size: 0.9rem;
 font-weight: 700;
}
.forgot-demo-link {
 margin: 10px 0;
 padding: 12px 14px;
 border-radius: 10px;
 background: rgba(245,163,59,0.12);
 border: 1px dashed rgba(245,163,59,0.38);
 font-size: 0.85rem;
 color: #6c3a00;
}
.forgot-demo-link strong { display: block; margin-bottom: 4px; color: #6c3a00; }
.forgot-demo-link a { word-break: break-all; }


/* 35.7 Sunset-Page (admin.html) ------------------------------------------ */
.admin-sunset {
 min-height: 100vh;
 display: grid;
 place-items: center;
 padding: 40px 20px;
 background: linear-gradient(160deg, var(--bg-soft) 0%, white 100%);
}
.admin-sunset-card {
 max-width: 560px;
 margin: 0 auto;
 padding: 36px 32px;
 background: white;
 border-radius: 24px;
 box-shadow: 0 24px 60px rgba(16,63,124,0.10);
 border: 1px solid rgba(0,174,184,0.22);
 text-align: center;
}
.admin-sunset-icon {
 display: inline-grid;
 place-items: center;
 width: 64px; height: 64px;
 border-radius: 20px;
 background: linear-gradient(135deg, var(--orange-deep) 0%, #8c4e00 100%);
 color: white;
 font-size: 32px !important;
 margin-bottom: 16px;
 box-shadow: 0 10px 24px rgba(245,163,59,0.32);
}
.admin-sunset-card h1 {
 font-size: 1.5rem;
 color: var(--text-strong);
 margin: 0 0 10px;
 letter-spacing: -0.02em;
}
.admin-sunset-card p {
 color: var(--muted);
 font-size: 1rem;
 line-height: 1.5;
 margin: 0 0 20px;
}
.admin-sunset-actions {
 display: flex;
 justify-content: center;
 gap: 10px;
 flex-wrap: wrap;
 margin-bottom: 18px;
}
.admin-sunset-note {
 font-size: 0.82rem;
 color: var(--muted);
}
.admin-sunset-note code {
 background: var(--bg-soft);
 padding: 2px 6px;
 border-radius: 6px;
 font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
 font-size: 0.82rem;
}


/* 35.8 Responsive --------------------------------------------------------- */
@media (max-width: 1080px) {
 .acc-mgr-stats { grid-template-columns: repeat(2, 1fr); }
 .acc-mgr-toolbar {
 grid-template-columns: 1fr 1fr;
 }
 .acc-mgr-toolbar-actions {
 grid-column: 1 / -1;
 justify-content: flex-end;
 }
}
@media (max-width: 760px) {
 .acc-mgr-stats { grid-template-columns: 1fr 1fr; }
 .acc-mgr-create-grid { grid-template-columns: 1fr; }
 .acc-mgr-toolbar { grid-template-columns: 1fr; }
 .acc-mgr-filter { width: 100%; }
 .acc-mgr-filter select { flex: 1; }
 .acc-mgr-table thead { display: none; }
 .acc-mgr-table, .acc-mgr-table tbody, .acc-mgr-table tr, .acc-mgr-table td {
 display: block;
 width: 100%;
 }
 .acc-mgr-table tr {
 padding: 14px 16px;
 border-bottom: 1px solid rgba(0,174,184,0.18);
 }
 .acc-mgr-table tbody td {
 padding: 4px 0;
 border: 0;
 }
 .acc-mgr-actions { justify-content: flex-start; margin-top: 8px; }
}
@media (max-width: 520px) {
 .acc-mgr-stats { grid-template-columns: 1fr; }
}



/* =============================================================================
 ADMIN-VIEWS in Account-Tabs (Bestellungen, Adressen, Downloads, Newsletter)
 -----------------------------------------------------------------------------
 Wird durch assets/js/account-admin-views.js aktiviert. body.is-admin-mode
 blendet die user-Sicht aus, die admin-Sicht ein.
 ============================================================================= */

/* Rolle-Sichten: standardmäßig zeigen wir Nutzer-Sicht, Admin/Partner-Sicht ist hidden.
 role-view-partner hinzugefuegt — analog zu role-view-admin. */
.role-view-admin[hidden],
.role-view-partner[hidden] { display: none !important; }
body.is-admin-mode .role-view-user,
body.is-partner-mode .role-view-user { display: none; }
body.is-admin-mode .role-view-admin[hidden] { display: block !important; }
body.is-partner-mode .role-view-partner[hidden] { display: block !important; }
/* Wenn Admin-Mode aktiv ist, ueberschreibt das die Partner-Sicht (Admin sieht alles). */
body.is-admin-mode .role-view-partner { display: none; }

.role-badge-partner {
 background: linear-gradient(135deg, #00aeb8, #006670) !important;
}

.admin-pagination {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 16px;
 margin-top: 16px;
}
.admin-pagination-info {
 color: var(--muted);
 font-size: 0.85rem;
}

/* ─────────────────────────────────────────────────────────────────────────
 Partner-Referrals
 ───────────────────────────────────────────────────────────────────────── */
.partner-referral-create {
 border: 1px solid rgba(0,174,184,0.18);
 border-radius: 14px;
 padding: 18px 22px;
 background: var(--bg-soft, #f7fafd);
 margin-bottom: 28px;
}
.partner-referral-create h4 {
 margin: 0 0 12px;
 color: var(--text);
 font-size: 1.05rem;
}
.partner-referral-list h4 {
 margin: 0 0 12px;
 color: var(--text);
 font-size: 1.05rem;
}
.pr-code {
 display: inline-block;
 background: #fff;
 border: 1px solid rgba(0,174,184,0.18);
 padding: 2px 8px;
 border-radius: 6px;
 font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
 font-size: 0.85rem;
 color: var(--turquoise-deep);
}
.pr-link {
 display: inline-block;
 margin-top: 4px;
 font-size: 0.78rem;
 color: var(--muted);
 text-decoration: underline;
 word-break: break-all;
}

.info-notice-partner-referrals,
.info-notice-partner-orders,
.info-notice-admin-settings {
 display: flex;
 gap: 14px;
 background: rgba(0,174,184,0.06);
 border: 1px solid rgba(0,174,184,0.18);
 border-radius: 12px;
 padding: 14px 18px;
 margin-bottom: 22px;
}
.info-notice-partner-referrals .info-notice-icon,
.info-notice-partner-orders .info-notice-icon,
.info-notice-admin-settings .info-notice-icon {
 flex-shrink: 0;
 width: 40px;
 height: 40px;
 border-radius: 10px;
 background: var(--turquoise-deep);
 color: #fff;
 display: grid;
 place-items: center;
}
.info-notice-partner-referrals .info-notice-text strong,
.info-notice-partner-orders .info-notice-text strong,
.info-notice-admin-settings .info-notice-text strong {
 display: block;
 color: var(--text-strong);
 margin-bottom: 4px;
}
.info-notice-partner-referrals .info-notice-text p,
.info-notice-partner-orders .info-notice-text p,
.info-notice-admin-settings .info-notice-text p {
 margin: 4px 0 0;
 color: var(--muted);
 font-size: 0.88rem;
 line-height: 1.5;
}

.admin-settings-categories {
 display: flex;
 flex-direction: column;
 gap: 24px;
}
.admin-settings-category {
 border: 1px solid rgba(0,174,184,0.18);
 border-radius: 14px;
 padding: 18px 22px;
 background: #fff;
}
.admin-settings-category h4 {
 margin: 0 0 12px;
 font-size: 1.05rem;
 color: var(--text);
 text-transform: capitalize;
}
.admin-settings-row {
 display: grid;
 grid-template-columns: 1fr minmax(220px, 320px) auto;
 gap: 12px 18px;
 align-items: center;
 padding: 10px 0;
 border-top: 1px solid rgba(0,174,184,0.08);
}
.admin-settings-row:first-of-type { border-top: 0; }
.admin-settings-row label { font-weight: 700; color: var(--text); }
.admin-settings-row small { display:block; color: var(--muted); font-weight: 400; margin-top: 2px; }
.admin-settings-row input,
.admin-settings-row select {
 width: 100%;
 padding: 8px 12px;
 border: 1px solid rgba(0,174,184,0.25);
 border-radius: 8px;
 font-size: 0.92rem;
}
.admin-settings-row .admin-settings-save {
 white-space: nowrap;
}
@media (max-width: 720px) {
 .admin-settings-row {
 grid-template-columns: 1fr;
 gap: 8px;
 }
}

.role-badge {
 display: inline-block;
 background: linear-gradient(135deg, #103f7c, #0a2540);
 color: white;
 font-size: 0.62rem;
 font-weight: 800;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 padding: 3px 10px;
 border-radius: 999px;
 margin-left: 10px;
 vertical-align: middle;
}

.admin-view-actions {
 display: flex;
 gap: 10px;
 flex-wrap: wrap;
 margin-top: 8px;
}
.admin-search {
 min-width: 240px;
 padding: 8px 12px;
 border: 1px solid rgba(0,0,0,0.12);
 border-radius: 8px;
 font-size: 0.9rem;
}
.admin-filter {
 padding: 8px 12px;
 border: 1px solid rgba(0,0,0,0.12);
 border-radius: 8px;
 font-size: 0.9rem;
 background: white;
}

/* Tabelle */
.admin-table-wrap {
 background: white;
 border: 1px solid rgba(0,0,0,0.08);
 border-radius: 12px;
 overflow: auto;
 margin-top: 16px;
}
.admin-table {
 width: 100%;
 border-collapse: collapse;
 font-size: 0.88rem;
}
.admin-table thead th {
 background: var(--bg-soft);
 color: var(--text-strong);
 font-weight: 800;
 text-align: left;
 padding: 12px 14px;
 border-bottom: 1px solid rgba(0,0,0,0.08);
 white-space: nowrap;
}
.admin-table tbody td {
 padding: 12px 14px;
 border-bottom: 1px solid rgba(0,0,0,0.05);
 vertical-align: top;
}
.admin-table tbody tr:hover { background: var(--bg-soft); }
.admin-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.admin-table .admin-mail { font-family: ui-monospace, monospace; font-size: 0.85em; color: var(--muted); }
.admin-table .admin-actions-cell { white-space: nowrap; }
.admin-table .btn-link {
 background: none;
 border: 0;
 color: var(--turquoise-deep);
 font-weight: 700;
 cursor: pointer;
 padding: 2px 4px;
 font-size: 0.85rem;
}
.admin-table .btn-link:hover { text-decoration: underline; }

.admin-pill {
 display: inline-block;
 padding: 2px 10px;
 border-radius: 999px;
 font-size: 0.72rem;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.04em;
 background: var(--bg-soft);
 color: var(--text);
}
.admin-pill-paid, .admin-pill-active, .admin-pill-delivered,
.admin-pill-nl-active { background: #e6f7ee; color: #0a6b3a; }
.admin-pill-pending, .admin-pill-open,
.admin-pill-nl-pending { background: #fff4d6; color: #7a4a00; }
.admin-pill-shipped { background: #e0f0ff; color: #1c4e8a; }
.admin-pill-cancelled, .admin-pill-refunded, .admin-pill-inactive,
.admin-pill-nl-unsubscribed { background: #f1f1f3; color: #555; }
.admin-pill-failed, .admin-pill-nl-bounced { background: #fde4e4; color: #8b1a1a; }

.admin-empty, .admin-loading {
 padding: 30px 20px;
 text-align: center;
 color: var(--muted);
}

/* ── Upload-Form ───────────────────────────────────────────────────────── */
.admin-upload-card {
 background: white;
 border: 1px solid rgba(0,174,184,0.2);
 border-radius: 14px;
 padding: 22px 24px;
 margin: 16px 0 24px;
 box-shadow: 0 4px 14px rgba(16, 63, 124, 0.04);
}
.admin-upload-head h4 {
 display: flex;
 align-items: center;
 gap: 8px;
 margin: 0 0 4px;
 color: var(--text-strong);
 font-size: 1.05rem;
}
.admin-upload-sub {
 color: var(--muted);
 font-size: 0.85rem;
 margin: 0 0 16px;
}
.admin-upload-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 14px;
}
.admin-upload-grid .apf-field-full { grid-column: 1 / -1; }
.admin-upload-grid label {
 display: block;
 font-weight: 700;
 color: var(--text-strong);
 margin-bottom: 6px;
 font-size: 0.85rem;
}
.admin-upload-grid input[type="text"],
.admin-upload-grid input[type="file"],
.admin-upload-grid textarea,
.admin-upload-grid select {
 width: 100%;
 padding: 9px 12px;
 border: 1px solid rgba(0,0,0,0.15);
 border-radius: 8px;
 font-size: 0.9rem;
 font-family: inherit;
 background: white;
}
.admin-upload-grid input[type="file"] { padding: 6px 8px; }
.admin-upload-grid textarea { resize: vertical; min-height: 60px; }
.admin-upload-grid .apf-required { color: var(--orange); }
.apf-feedback { padding: 10px 14px; border-radius: 8px; font-size: 0.9rem; margin-top: 8px; }
.apf-feedback.apf-error { background: #fde4e4; color: #8b1a1a; }
.apf-feedback.apf-success { background: #e6f7ee; color: #0a6b3a; }

/* ── Newsletter-Stats ──────────────────────────────────────────────────── */
.admin-nl-stats {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
 gap: 12px;
 margin: 16px 0 8px;
}
.admin-nl-stat {
 background: white;
 border: 1px solid rgba(0,0,0,0.08);
 border-radius: 12px;
 padding: 14px 16px;
}
.admin-nl-stat-label {
 display: block;
 font-size: 0.72rem;
 font-weight: 800;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: var(--muted);
}
.admin-nl-stat-value {
 display: block;
 font-size: 1.8rem;
 color: var(--text-strong);
 margin: 2px 0;
}
.admin-nl-stat-meta {
 display: block;
 font-size: 0.78rem;
 color: var(--muted);
}
.admin-nl-stat-active { border-left: 4px solid #0a6b3a; }
.admin-nl-stat-pending { border-left: 4px solid #b3650a; }
.admin-nl-stat-unsubscribed { border-left: 4px solid #555; }
.admin-nl-stat-bounced { border-left: 4px solid #8b1a1a; }

/* Mobile */
@media (max-width: 720px) {
 .admin-upload-grid { grid-template-columns: 1fr; }
 .admin-table { font-size: 0.82rem; }
 .admin-table thead th, .admin-table tbody td { padding: 8px 10px; }
}

/* ─── DEV-MODE-Banner─────────────────────────────────────────── */
/* Skip-Link: standardmäßig aus dem Fluss genommen + unsichtbar, nur bei
   Tastatur-Fokus sichtbar. Ohne diese Regel lag er sichtbar im Fluss und schob
   (zusammen mit dem Dev-Banner) den Hero nach unten -> Geister-Abstand. */
.skip-link {
 position: absolute;
 left: -9999px;
 top: 0;
 z-index: 999;
 background: var(--turquoise, #00a9b4);
 color: #fff;
 padding: 10px 16px;
 border-radius: 0 0 10px 0;
 font-weight: 700;
 text-decoration: none;
}
.skip-link:focus { left: 0; }

/* Dev-Mode-Banner: FIX am unteren Rand statt im Fluss oben. Im Fluss schob es den
   Hero nach unten UND wurde von der fixen Topbar verdeckt -> unsichtbarer großer
   Abstand unter dem Header. (Nur Dev-Mode; in Produktion ohnehin nicht vorhanden.) */
.noa-devmode-banner {
 position: fixed;
 bottom: 0;
 left: 0;
 right: 0;
 z-index: 300;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 0.5rem;
 width: 100%;
 padding: 0.5rem 1rem;
 background: #fff7e0;
 color: #6b4f00;
 border-top: 1px solid #f1d77d;
 font-size: 0.875rem;
 font-weight: 500;
 text-align: center;
 z-index: 9999;
}
.noa-devmode-banner .material-symbols-outlined {
 font-size: 1.1em;
}
@media (max-width: 480px) {
 .noa-devmode-banner {
 font-size: 0.75rem;
 padding: 0.4rem 0.5rem;
 }
}

/* ─── DEV-MODE-Login-Hint─────────────────────────────────────── */
.apf-hint-dev {
 display: flex;
 align-items: center;
 gap: 0.35rem;
 margin: 0.5rem 0 1rem;
 padding: 0.5rem 0.75rem;
 background: #fff7e0;
 color: #6b4f00;
 border: 1px solid #f1d77d;
 border-radius: 6px;
 font-size: 0.85rem;
}
.apf-hint-dev .material-symbols-outlined { font-size: 1.05em; }

/* ─── Admin DataTable─────────────────────────────────────────── */
.admin-dt { margin: 0 0 2rem; }
.admin-dt-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.admin-dt-title { font-size: 1.5rem; margin: 0 0 0.25rem; }
.admin-dt-subtitle { color: var(--noa-muted, #6c7281); margin: 0; font-size: 0.9rem; }
.admin-dt-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.admin-dt-action { display: inline-flex; align-items: center; gap: 0.3rem; }

.admin-dt-filters { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: flex-end; padding: 0.75rem 1rem; background: #f7f8fa; border-radius: 8px; margin-bottom: 1rem; }
.admin-dt-filter { display: flex; flex-direction: column; gap: 0.25rem; }
.admin-dt-filter-label { font-size: 0.8rem; color: #555; font-weight: 500; }
.admin-dt-filter input, .admin-dt-filter select { padding: 0.6rem 0.75rem; border: 1px solid #d3d6dd; border-radius: 6px; font-size: 0.95rem; min-width: 8rem; min-height: 44px; line-height: 1.3; }
.admin-dt-filter-submit { white-space: nowrap; }

.admin-dt-table-wrap { overflow-x: auto; border: 1px solid #e5e7eb; border-radius: 8px; }
.admin-dt-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.admin-dt-th { text-align: left; padding: 0.6rem 0.75rem; background: #fafbfc; font-weight: 600; border-bottom: 1px solid #e5e7eb; }
.admin-dt-row td { padding: 0.6rem 0.75rem; border-top: 1px solid #f0f1f3; vertical-align: middle; }
.admin-dt-row:hover td { background: #fafbfc; }

.admin-dt-empty { text-align: center; padding: 2.5rem 1rem; color: #6c7281; background: #fafbfc; border: 1px dashed #d3d6dd; border-radius: 8px; }
.admin-dt-empty .material-symbols-outlined { font-size: 2.5rem; opacity: 0.5; display: block; margin: 0 auto 0.5rem; }
.admin-dt-empty .admin-dt-empty-title { font-weight: 700; color: var(--text-strong); margin: 0 0 4px; font-size: 1rem; }
.admin-dt-empty .admin-dt-empty-cta { margin-top: 14px; display: inline-flex; }

/* =============================================================================
 EMPTY STATE — einheitliches Muster fuer leere Listen im /konto-Bereich
 -----------------------------------------------------------------------------
 Verwendung:
   <div class="empty-state">
     <div class="empty-state-icon"><span class="material-symbols-outlined">x</span></div>
     <h3 class="empty-state-title">Titel</h3>
     <p class="empty-state-text">Hinweis</p>
     <a class="btn btn-primary" href="...">Call-to-Action</a>
   </div>
 ============================================================================= */
.empty-state {
 text-align: center;
 padding: 32px 20px;
 background: var(--bg-soft);
 border: 1px dashed rgba(0,174,184,0.32);
 border-radius: 14px;
 margin: 0 0 20px;
}
.empty-state-icon {
 display: inline-grid;
 place-items: center;
 width: 56px; height: 56px;
 border-radius: 50%;
 background: rgba(0,174,184,0.12);
 color: var(--turquoise-dark);
 margin-bottom: 14px;
}
.empty-state-icon .material-symbols-outlined { font-size: 30px; }
.empty-state-title {
 color: var(--text-strong);
 font-size: 1.08rem;
 font-weight: 700;
 margin: 0 0 8px;
}
.empty-state-text {
 color: var(--muted);
 font-size: 0.94rem;
 margin: 0 0 16px;
 max-width: 540px;
 margin-left: auto;
 margin-right: auto;
}
.empty-state .btn {
 display: inline-flex;
 align-items: center;
 gap: 6px;
}
@media (max-width: 540px) {
 .empty-state { padding: 24px 14px; }
 .empty-state-title { font-size: 1rem; }
}

.admin-dt-pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; gap: 0.5rem; flex-wrap: wrap; }
.admin-dt-pagination a { display: inline-flex; align-items: center; gap: 0.25rem; text-decoration: none; color: var(--noa-primary, #0a2540); padding: 0.4rem 0.8rem; border: 1px solid #d3d6dd; border-radius: 6px; }
.admin-dt-pagination a.is-disabled { color: #c0c4cc; pointer-events: none; opacity: 0.5; }
.admin-dt-page-info { font-size: 0.85rem; color: #6c7281; }

@media (max-width: 640px) {
 .admin-dt-head { flex-direction: column; align-items: flex-start; }
 .admin-dt-filters { flex-direction: column; align-items: stretch; }
 .admin-dt-filter { width: 100%; }
 .admin-dt-filter input, .admin-dt-filter select { width: 100%; }
}

/* ─── Admin Status Badges─────────────────────────────────────── */
.admin-status { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.78rem; font-weight: 500; }
.admin-status-pending { background: #fff7e0; color: #6b4f00; }
.admin-status-paid { background: #e0f2ff; color: #003a6b; }
.admin-status-shipped { background: #ddebff; color: #002a55; }
.admin-status-delivered { background: #e0fae6; color: #1e5727; }
.admin-status-cancelled { background: #fde0e0; color: #6b0e0e; }
.admin-status-confirmed { background: #e0fae6; color: #1e5727; }
.admin-status-unsubscribed { background: #f0f1f3; color: #6c7281; }

/* ─── Account Tabs: is-active state for <a> spec-tab links ─────────────── */
/* Bundle B chose to reuse existing .acc-tabs styling (); the
 .acc-tabs-nav class from Bundle A's plan ended up unused. Keeping just
 the .is-active rule because the new <a class="acc-tab"> spec-tab links
 rely on it for the active-underline (the legacy buttons used .active). */
.acc-tab.is-active { color: var(--noa-primary, #0a2540); border-bottom-color: var(--noa-primary, #0a2540); font-weight: 600; }

/* ─── Order-Summary: Mobile-Toggle entfernt (Betreiber-Wunsch 2026-07-23) —
   die Bestellübersicht ist auf allen Viewports direkt sichtbar. ─── */
.checkout-summary-body { display: block; }

/* ─── Fieldset reset for checkout address group (A11y) ──────────── */
.checkout-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.checkout-fieldset-legend {
 font-size: 0.9rem;
 color: var(--muted, #6b7280);
 font-weight: 700;
 letter-spacing: 0.02em;
 margin-bottom: 8px;
 padding: 0;
}

/* ============================================================================
   Account · Zahlungsdaten (Security-Tab)
   ----------------------------------------------------------------------------
   Liste der gespeicherten Methoden + Modal-Flow für Add/Re-Auth/Delete.
   ============================================================================ */
.pm-list { margin: 1rem 0; display: flex; flex-direction: column; gap: 0.5rem; }
.pm-list-loading { color: #6b7280; font-size: 0.9rem; padding: 0.5rem 0; }
.pm-list-empty {
 padding: 1.25rem;
 background: #f9fafb;
 border: 1px dashed #e5e7eb;
 border-radius: 8px;
 color: #6b7280;
 font-size: 0.9rem;
 text-align: center;
}
.pm-card {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 1rem;
 padding: 0.85rem 1rem;
 background: #fff;
 border: 1px solid #e5e7eb;
 border-radius: 10px;
 transition: border-color 0.15s ease;
}
.pm-card.is-default { border-color: #00aeb8; box-shadow: 0 0 0 1px rgba(0,174,184,0.12); }
.pm-card-info { display: flex; align-items: center; gap: 0.85rem; min-width: 0; flex: 1; }
.pm-card-icon {
 width: 38px; height: 38px;
 border-radius: 8px;
 background: #eef6f7;
 color: #008189;
 display: inline-grid; place-items: center;
 flex-shrink: 0;
}
.pm-card-icon .material-symbols-outlined { font-size: 22px; }
.pm-card-text { min-width: 0; }
.pm-card-label { font-weight: 600; color: #1a1a1a; }
.pm-card-meta {
 display: flex; flex-wrap: wrap; gap: 0.5rem;
 font-size: 0.8125rem; color: #6b7280;
 margin-top: 0.15rem;
}
.pm-card-meta-default {
 background: #d6f4f6; color: #065054;
 padding: 0.1rem 0.5rem; border-radius: 4px; font-weight: 600;
}
.pm-card-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }
.pm-card-btn {
 background: transparent; border: 1px solid #e5e7eb; border-radius: 6px;
 padding: 0.4rem 0.6rem; font-size: 0.85rem; cursor: pointer;
 color: #4b5563; display: inline-flex; align-items: center; gap: 0.3rem;
 min-height: 36px;
}
.pm-card-btn:hover { background: #f9fafb; color: #1a1a1a; }
.pm-card-btn-danger { color: #b91c1c; border-color: #fecaca; }
.pm-card-btn-danger:hover { background: #fee2e2; color: #7f1d1d; }
.pm-card-btn .material-symbols-outlined { font-size: 16px; }
.pm-actions { margin-top: 0.5rem; }

/* Modal */
.pm-modal {
 position: fixed; inset: 0;
 z-index: 200;
 display: flex; align-items: center; justify-content: center;
 padding: 1rem;
}
.pm-modal[hidden] { display: none; }
.pm-modal-backdrop {
 position: absolute; inset: 0;
 background: rgba(10, 37, 64, 0.55);
 backdrop-filter: blur(2px);
}
.pm-modal-card {
 position: relative;
 background: #fff;
 border-radius: 12px;
 padding: 1.75rem 1.75rem 1.5rem;
 max-width: 460px;
 width: 100%;
 box-shadow: 0 20px 60px rgba(10, 37, 64, 0.25);
 max-height: 90vh;
 overflow-y: auto;
}
.pm-modal-card h3 { font-size: 1.125rem; font-weight: 600; margin: 0 0 0.5rem; color: #0a2540; }
.pm-modal-sub { color: #6b7280; font-size: 0.875rem; margin: 0 0 1rem; line-height: 1.5; }
.pm-modal-close {
 position: absolute; top: 0.6rem; right: 0.85rem;
 background: transparent; border: 0;
 font-size: 1.5rem; line-height: 1;
 color: #6b7280; cursor: pointer;
 padding: 0.25rem 0.5rem;
}
.pm-modal-close:hover { color: #0a2540; }
.pm-modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }
.pm-modal-actions .btn { min-width: 110px; }
.pm-step[hidden] { display: none; }

@media (max-width: 540px) {
 .pm-card { flex-direction: column; align-items: stretch; }
 .pm-card-actions { justify-content: flex-end; }
 .pm-modal-card { padding: 1.25rem; }
 .pm-modal-actions { flex-direction: column-reverse; }
 .pm-modal-actions .btn { width: 100%; }
}

/* Passwort-Policy Live-Liste (Phase 1 Bugfix-Sprint) */
.pw-policy-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  display: grid;
  gap: 0.25rem;
  font-size: 0.875rem;
}
.pw-rule {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* mehr Luft zwischen Kreis und Kriterium (2026-07-23) */
  color: var(--text-muted, #6b7280);
  transition: color 0.15s ease;
}
.pw-rule-icon {
  font-size: 18px;
  line-height: 1;
}
.pw-rule-pending .pw-rule-icon { color: #cbd5e1; }
.pw-rule-ok                    { color: var(--success, #16a34a); }
.pw-rule-ok .pw-rule-icon      { color: var(--success, #16a34a); }




/* ===== DARK MODE · account.css (auto-generated aus CSS-Audit, gezielte Flächen/Text-Korrekturen) ===== */
[data-theme="dark"] .acc-admin-tools{background:radial-gradient(circle at 100% 0%,rgba(245,163,59,.14),transparent 50%),linear-gradient(160deg,var(--surface) 0%,var(--bg-soft) 100%);}
[data-theme="dark"] .acc-admin-card{background:var(--surface);}
[data-theme="dark"] .acc-crm{background:linear-gradient(160deg,var(--surface) 0%,var(--bg-soft) 100%);}
[data-theme="dark"] .acc-crm-stat{background:var(--surface);}
[data-theme="dark"] .acc-crm-quick-card{background:var(--surface);}
[data-theme="dark"] .acc-crm-quick-card:hover{background:linear-gradient(135deg,var(--surface),var(--bg-soft));}
[data-theme="dark"] .acc-crm-recent-col{background:var(--surface);}
[data-theme="dark"] .admin-roles-section{background:radial-gradient(circle at 100% 0%,rgba(245,163,59,.10),transparent 50%),linear-gradient(160deg,var(--surface) 0%,var(--bg-soft) 100%);}
[data-theme="dark"] .admin-roles-card{background:var(--surface);}
[data-theme="dark"] .admin-list-item:hover{background:var(--surface);}
[data-theme="dark"] .acc-mgr-stat{background:var(--surface);}
[data-theme="dark"] .acc-mgr-search input{background:var(--surface-2);color:var(--text);}
[data-theme="dark"] .acc-mgr-filter select{background:var(--surface-2);color:var(--text);}
[data-theme="dark"] .acc-mgr-create-card{background:linear-gradient(160deg,var(--surface) 0%,var(--bg-soft) 100%);}
[data-theme="dark"] .acc-mgr-table-wrap{background:var(--surface);}
[data-theme="dark"] .acc-mgr-table{background:var(--surface);}
[data-theme="dark"] .acc-mgr-detail{background:var(--surface);}
[data-theme="dark"] .admin-sunset{background:linear-gradient(160deg,var(--bg-soft) 0%,var(--surface) 100%);}
[data-theme="dark"] .admin-sunset-card{background:var(--surface);}
[data-theme="dark"] .pr-code{background:var(--surface-2);border-color:var(--border);}
[data-theme="dark"] .admin-settings-category{background:var(--surface);}
[data-theme="dark"] .admin-filter{background:var(--surface-2);color:var(--text);border-color:var(--border);}
[data-theme="dark"] .admin-table-wrap{background:var(--surface);border-color:var(--border);}
[data-theme="dark"] .admin-upload-card{background:var(--surface);}
[data-theme="dark"] .admin-upload-grid input[type="text"],[data-theme="dark"] .admin-upload-grid input[type="file"],[data-theme="dark"] .admin-upload-grid textarea,[data-theme="dark"] .admin-upload-grid select{background:var(--surface-2);color:var(--text);border-color:var(--border);}
[data-theme="dark"] .admin-nl-stat{background:var(--surface);border-color:var(--border);}
[data-theme="dark"] .admin-dt-filters{background:var(--surface-2);}
[data-theme="dark"] .admin-dt-th{background:var(--surface-2);border-bottom-color:var(--border);}
[data-theme="dark"] .pm-list-empty{background:var(--surface-2);border-color:var(--border);color:var(--muted);}
[data-theme="dark"] .pm-card{background:var(--surface);border-color:var(--border);}
[data-theme="dark"] .pm-card-label{color:var(--text-strong);}
[data-theme="dark"] .pm-modal-card{background:var(--surface);} [data-theme="dark"] .pm-modal-card h3{color:var(--text-strong);}

/* Nachtrag Dark: admin-Datentabellen-Leerzustand (vom Audit übersehen, #fafbfc-Box). */
[data-theme="dark"] .admin-dt-empty { background: var(--surface-2); border-color: var(--border); color: var(--muted); }

/* Nachtrag Dark (Kontrast-Audit): hart codierte Grau-/Rot-Texte der Zahlungsmethoden
   aufhellen (#6b7280/#4b5563/#b91c1c waren auf Dunkel zu schwach). */
[data-theme="dark"] .pm-list-loading,
[data-theme="dark"] .pm-card-meta,
[data-theme="dark"] .pm-card-btn { color: var(--muted); }
[data-theme="dark"] .pm-card-btn-danger { color: var(--danger-text, #f0a3a8); }

/* Nachtrag Dark (Kontrast-Audit 2026-07-16): --turquoise-deep ist im Dark-Theme
   HELL (#22c1cd) — Füllungen mit weißer Schrift auf dunkle Töne pinnen. */
[data-theme="dark"] .acc-crm-head-icon { background: linear-gradient(135deg, #007f8a, #006d76); }
[data-theme="dark"] .acc-crm-recent-avatar { background: #007f8a; }
[data-theme="dark"] .admin-list-self-tag { background: #007f8a; }
[data-theme="dark"] .dl-card-type { background: #007f8a; }