:root {
    color-scheme: light;
    --hintergrund: #f3f6fb;
    --flaeche: #ffffff;
    --flaeche-2: #f8faff;
    --text: #172033;
    --leise: #687386;
    --linie: #dce3ef;
    --primaer: #315efb;
    --primaer-dunkel: #2148d5;
    --nav: #10182b;
    --nav-text: #d8e0ef;
    --schatten: 0 16px 44px rgba(28, 43, 76, .08);
    --radius: 18px;
    --radius-klein: 12px;
    --gruen: #12845c;
    --rot: #c43d4d;
    --orange: #b76513;
    --violett: #7450c8;
    --tuerkis: #087f8c;
    --gelb: #936600;
}

html[data-theme="dunkel"] {
    color-scheme: dark;
    --hintergrund: #0d1321;
    --flaeche: #151d2d;
    --flaeche-2: #1b2537;
    --text: #f2f5fa;
    --leise: #a8b3c5;
    --linie: #2d394e;
    --primaer: #6d8cff;
    --primaer-dunkel: #89a2ff;
    --nav: #090e19;
    --nav-text: #dce4f2;
    --schatten: 0 18px 50px rgba(0, 0, 0, .24);
}

* { box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body { margin: 0; background: var(--hintergrund); color: var(--text); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.5; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--primaer); text-decoration: none; }
a:hover { text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { color: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: .25rem; font-size: clamp(1.65rem, 3vw, 2.25rem); line-height: 1.12; letter-spacing: -.035em; }
h2 { margin-bottom: 1rem; font-size: 1.15rem; letter-spacing: -.018em; }
h3 { font-size: 1rem; }
code { padding: .15em .4em; border: 1px solid var(--linie); border-radius: 6px; background: var(--flaeche-2); font-size: .9em; }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; display: flex; width: 244px; flex-direction: column; padding: 24px 16px; background: var(--nav); color: var(--nav-text); }
.marke, .auth-marke { display: flex; align-items: center; gap: 12px; color: inherit; }
.marke { padding: 2px 8px 30px; }
.marke:hover { color: white; }
.marke-symbol { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 12px; background: linear-gradient(145deg, #6f91ff, #315efb); color: #fff; font-weight: 800; box-shadow: 0 10px 22px rgba(49, 94, 251, .3); }
.marke strong, .auth-marke strong { display: block; letter-spacing: .12em; }
.marke small, .auth-marke small { display: block; color: #93a2ba; font-size: .74rem; letter-spacing: .05em; }
.seiten-nav { display: grid; gap: 5px; }
.seiten-nav a { display: flex; min-height: 44px; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 11px; color: #aebbd0; font-size: .92rem; font-weight: 600; transition: .16s ease; }
.seiten-nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.seiten-nav a.aktiv { background: rgba(109,140,255,.17); color: #fff; box-shadow: inset 3px 0 #6d8cff; }
.sidebar-unten { display: grid; gap: 8px; margin-top: auto; padding: 18px 8px 0; border-top: 1px solid rgba(255,255,255,.1); font-size: .82rem; }
.sidebar-unten strong { display: block; color: white; }
.sidebar-unten a { color: #96a5bc; }
.profil-kurzlink { display: grid; grid-template-columns: 35px minmax(0, 1fr); align-items: center; gap: 10px; padding: 5px; border-radius: 11px; }
.profil-kurzlink:hover { background: rgba(255,255,255,.06); color: #fff; }
.profil-kurzlink small { display: block; margin-top: 2px; color: #96a5bc; }
.abmelden-link { margin-left: 50px; }
.avatar { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 50%; background: #293750; color: #fff; font-weight: 700; object-fit: cover; }

.hauptinhalt { min-height: 100vh; margin-left: 244px; }
.topbar { display: flex; min-height: 108px; align-items: center; justify-content: space-between; gap: 20px; padding: 24px clamp(24px, 4vw, 56px) 18px; }
.topbar h1 { margin: 0; }
.topbar-aktionen, .aktionsleiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.global-search { width: min(240px, 22vw); }
.global-search input { min-height: 42px; }
.seiteninhalt { padding: 0 clamp(24px, 4vw, 56px) 64px; }
.eyebrow { margin-bottom: 6px; color: var(--leise); font-size: .76rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.text-leise { color: var(--leise); }
.klein { font-size: .82rem; }
.nowrap { white-space: nowrap; }
.rechts { text-align: right; }

.button, .icon-button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 11px; cursor: pointer; font-weight: 700; transition: transform .14s ease, background .14s ease, border-color .14s ease; }
.button { padding: 9px 15px; }
.button:hover, .icon-button:hover { transform: translateY(-1px); }
.button-primaer { background: var(--primaer); color: #fff; box-shadow: 0 8px 20px rgba(49, 94, 251, .18); }
.button-primaer:hover { background: var(--primaer-dunkel); color: #fff; }
.button-sekundaer { border-color: var(--linie); background: var(--flaeche); color: var(--text); }
.button-sekundaer:hover { border-color: var(--primaer); color: var(--primaer); }
.button-gefahr { border-color: rgba(196,61,77,.22); background: rgba(196,61,77,.09); color: var(--rot); }
.button-klein { min-height: 35px; padding: 6px 11px; font-size: .84rem; }
.button-gross { min-height: 50px; }
.icon-button { width: 42px; padding: 0; border-color: var(--linie); background: var(--flaeche); }
.icon { flex: 0 0 auto; }
.link-pfeil { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; }

.karte { border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); box-shadow: var(--schatten); }
.karte-inhalt { padding: 22px; }
.karten-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px 0; }
.karten-kopf h2 { margin: 0; }
.karten-kopf + .karte-inhalt { padding-top: 16px; }
.raster { display: grid; gap: 18px; }
.raster-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dashboard-raster { grid-template-columns: minmax(0, 1.55fr) minmax(280px, .85fr); align-items: start; }
.stat-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 20px; }
.stat-karte { position: relative; min-height: 140px; overflow: hidden; padding: 20px; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); box-shadow: var(--schatten); }
.stat-karte::after { position: absolute; right: -18px; bottom: -34px; width: 90px; height: 90px; border-radius: 50%; background: var(--akzent, rgba(49,94,251,.08)); content: ""; }
.stat-label { display: block; color: var(--leise); font-size: .82rem; font-weight: 650; }
.stat-wert { display: block; margin-top: 12px; font-size: clamp(1.7rem, 3vw, 2.25rem); line-height: 1; letter-spacing: -.05em; }
.stat-hinweis { display: block; margin-top: 10px; color: var(--leise); font-size: .78rem; }
.stat-karte.hervorgehoben { background: linear-gradient(145deg, #315efb, #2449c9); color: white; border-color: transparent; }
.stat-karte.hervorgehoben .stat-label, .stat-karte.hervorgehoben .stat-hinweis { color: #dce5ff; }

.liste { display: grid; gap: 0; }
.listen-zeile { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--linie); color: var(--text); }
.listen-zeile:last-child { border-bottom: 0; }
.listen-zeile > div:first-child { min-width: 0; }
.listen-zeile strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.listen-zeile small { color: var(--leise); }
.punkt { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: var(--primaer); }
.listen-mit-punkt .listen-zeile { justify-content: flex-start; }
.listen-mit-punkt .listen-zeile > :last-child { margin-left: auto; }
.leer { padding: 34px 18px; text-align: center; color: var(--leise); }
.leer .icon { margin: 0 auto 12px; }

.badge { display: inline-flex; min-height: 26px; align-items: center; padding: 3px 9px; border-radius: 99px; font-size: .72rem; font-weight: 800; letter-spacing: .015em; white-space: nowrap; }
.badge-neutral, .badge-grau { background: rgba(100,116,139,.13); color: #596579; }
.badge-blau { background: rgba(49,94,251,.12); color: #3157cf; }
.badge-gruen { background: rgba(18,132,92,.12); color: var(--gruen); }
.badge-rot { background: rgba(196,61,77,.12); color: var(--rot); }
.badge-orange { background: rgba(183,101,19,.13); color: var(--orange); }
.badge-gelb { background: rgba(190,137,0,.14); color: var(--gelb); }
.badge-violett { background: rgba(116,80,200,.13); color: var(--violett); }
.badge-tuerkis { background: rgba(8,127,140,.12); color: var(--tuerkis); }
.kontakt-icons { display: flex; align-items: center; gap: 7px; color: var(--leise); font-size: .9rem; }

.tabellen-rahmen { overflow: hidden; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); box-shadow: var(--schatten); }
.tabelle { width: 100%; border-collapse: collapse; }
.tabelle th { padding: 12px 16px; background: var(--flaeche-2); color: var(--leise); font-size: .73rem; font-weight: 800; letter-spacing: .05em; text-align: left; text-transform: uppercase; }
.tabelle td { padding: 15px 16px; border-top: 1px solid var(--linie); vertical-align: middle; }
.tabelle tbody tr:hover { background: var(--flaeche-2); }
.tabelle .hauptwert { color: var(--text); font-weight: 750; }
.tabelle small { display: block; color: var(--leise); }
.mobile-karten { display: none; }

.filterleiste { display: grid; grid-template-columns: minmax(220px, 2fr) repeat(5, minmax(120px, 1fr)) auto; gap: 10px; margin-bottom: 18px; }
.suchfeld { position: relative; }
.suchfeld .icon { position: absolute; top: 12px; left: 13px; color: var(--leise); }
.suchfeld input { padding-left: 42px; }
input, textarea, select { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 10px; outline: 0; background: var(--flaeche); color: var(--text); }
textarea { min-height: 120px; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--primaer); box-shadow: 0 0 0 3px rgba(49,94,251,.12); }
label { display: grid; gap: 6px; color: var(--text); font-size: .86rem; font-weight: 700; }
label small { color: var(--leise); font-weight: 450; }
.formular-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.formular-raster .volle-breite { grid-column: 1 / -1; }
.formular-stapel { display: grid; gap: 17px; }
.formular-abschnitt { padding: 22px; }
.formular-abschnitt + .formular-abschnitt { border-top: 1px solid var(--linie); }
.formular-aktionen { display: flex; justify-content: flex-end; gap: 10px; padding: 20px 22px; border-top: 1px solid var(--linie); background: var(--flaeche-2); }
.checkbox { display: flex; min-height: 44px; align-items: center; gap: 10px; font-weight: 600; }
.checkbox input { width: 19px; min-height: 19px; accent-color: var(--primaer); }
.checkbox-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 14px; }
.feld-fehler { color: var(--rot); font-size: .82rem; }

.hinweis { position: relative; margin: 0 clamp(24px, 4vw, 56px) 16px; padding: 13px 42px 13px 15px; border: 1px solid var(--linie); border-radius: 11px; background: var(--flaeche); }
.seiteninhalt > .hinweis { margin-inline: 0; }
.hinweis button { position: absolute; top: 7px; right: 8px; border: 0; background: transparent; font-size: 1.35rem; cursor: pointer; }
.hinweis-erfolg { border-color: rgba(18,132,92,.3); background: rgba(18,132,92,.09); color: var(--gruen); }
.hinweis-fehler { border-color: rgba(196,61,77,.3); background: rgba(196,61,77,.08); color: var(--rot); }
.hinweis-info { border-color: rgba(49,94,251,.28); background: rgba(49,94,251,.08); color: var(--text); }
.hinweis-warnung { border-color: rgba(183,101,19,.3); background: rgba(183,101,19,.09); color: var(--orange); }

.detail-kopf { position: relative; overflow: hidden; margin-bottom: 18px; padding: 26px; background: linear-gradient(135deg, var(--flaeche) 20%, var(--flaeche-2)); }
.detail-kopf::after { position: absolute; top: -90px; right: -40px; width: 240px; height: 240px; border: 42px solid rgba(49,94,251,.06); border-radius: 50%; content: ""; }
.detail-zeile { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; }
.detail-kopf h2 { margin: 8px 0 5px; font-size: clamp(1.45rem, 3vw, 2rem); }
.detail-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--leise); }
.schnellaktionen { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.tabs { display: flex; gap: 4px; overflow-x: auto; margin-bottom: 16px; padding: 5px; border: 1px solid var(--linie); border-radius: 13px; background: var(--flaeche); scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a, .tabs button { min-height: 39px; padding: 8px 13px; border: 0; border-radius: 9px; background: transparent; color: var(--leise); cursor: pointer; font-size: .83rem; font-weight: 750; white-space: nowrap; }
.tabs .aktiv, .tabs [aria-selected="true"] { background: var(--text); color: var(--flaeche); }
.info-liste { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 0 18px; }
.info-liste dt, .info-liste dd { margin: 0; padding: 11px 0; border-bottom: 1px solid var(--linie); }
.info-liste dt { color: var(--leise); font-size: .82rem; }
.info-liste dd { overflow-wrap: anywhere; font-weight: 600; }
.timeline { position: relative; display: grid; gap: 0; padding-left: 24px; }
.timeline::before { position: absolute; top: 7px; bottom: 7px; left: 6px; width: 1px; background: var(--linie); content: ""; }
.timeline-eintrag { position: relative; padding: 0 0 22px; }
.timeline-eintrag::before { position: absolute; top: 5px; left: -23px; width: 11px; height: 11px; border: 3px solid var(--flaeche); border-radius: 50%; background: var(--primaer); box-shadow: 0 0 0 1px var(--linie); content: ""; }
.timeline-eintrag p { margin: 0; }
.timeline-eintrag time { color: var(--leise); font-size: .78rem; }

.kanban { display: grid; grid-auto-columns: minmax(270px, 300px); grid-auto-flow: column; gap: 14px; overflow-x: auto; padding-bottom: 15px; scroll-snap-type: x proximity; }
.kanban-spalte { min-height: 360px; padding: 12px; border: 1px solid var(--linie); border-radius: 16px; background: var(--flaeche-2); scroll-snap-align: start; }
.kanban-kopf { display: flex; align-items: center; justify-content: space-between; padding: 4px 3px 13px; }
.kanban-kopf h2 { margin: 0; font-size: .88rem; }
.kanban-zaehler { display: grid; min-width: 26px; height: 26px; place-items: center; border-radius: 99px; background: var(--flaeche); color: var(--leise); font-size: .74rem; font-weight: 800; }
.kanban-liste { min-height: 295px; }
.kanban-karte { margin-bottom: 9px; padding: 14px; border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche); box-shadow: 0 5px 16px rgba(28,43,76,.05); cursor: grab; }
.kanban-karte:active { cursor: grabbing; }
.kanban-karte.dragging { opacity: .45; }
.kanban-spalte.drag-over { border-color: var(--primaer); background: rgba(49,94,251,.06); }
.kanban-karte strong { display: block; color: var(--text); }
.kanban-karte small { color: var(--leise); }
.kanban-karte select { display: none; margin-top: 10px; }

.finder-einstieg { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr); gap: 28px; align-items: center; margin-bottom: 18px; padding: 25px; background: linear-gradient(135deg, var(--flaeche) 30%, rgba(49,94,251,.055)); }
.finder-einstieg h2 { margin-bottom: 8px; font-size: clamp(1.25rem, 2.5vw, 1.7rem); }
.finder-einstieg p:last-child { max-width: 760px; margin-bottom: 0; }
.finder-vorteile { display: grid; gap: 9px; }
.finder-vorteile span { display: flex; min-height: 42px; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--linie); border-radius: 11px; background: color-mix(in srgb, var(--flaeche) 86%, transparent); font-size: .82rem; font-weight: 700; }
.finder-vorteile .icon { color: var(--primaer); }
.finder-suchformular { display: grid; grid-template-columns: minmax(210px,1.35fr) minmax(180px,1fr) 120px minmax(250px,1.25fr) auto; gap: 14px; align-items: end; margin-bottom: 24px; padding: 20px; }
.finder-filter { min-height: 68px; padding: 11px 13px; }
.finder-ergebnis-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 3px 0 15px; }
.finder-ergebnis-kopf h2, .finder-ergebnis-kopf p { margin-bottom: 0; }
.finder-kennzahlen { display: flex; gap: 10px; }
.finder-kennzahlen span { min-width: 118px; padding: 10px 14px; border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche); color: var(--leise); font-size: .76rem; }
.finder-kennzahlen strong { display: block; color: var(--text); font-size: 1.25rem; line-height: 1.1; }
.finder-trefferliste { display: grid; gap: 10px; }
.finder-treffer { display: grid; grid-template-columns: 46px minmax(0,1fr); overflow: hidden; box-shadow: 0 8px 28px rgba(28,43,76,.055); }
.finder-treffer.ist-vorhanden { background: var(--flaeche-2); opacity: .78; }
.finder-auswahl { display: grid; place-items: center; border-right: 1px solid var(--linie); background: var(--flaeche-2); cursor: pointer; }
.finder-auswahl input { width: 20px; min-height: 20px; accent-color: var(--primaer); }
.finder-auswahl input:disabled { cursor: not-allowed; }
.finder-treffer-inhalt { padding: 16px 18px; }
.finder-treffer-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.finder-treffer-kopf h3, .finder-treffer-kopf p { margin: 0; }
.finder-treffer-kopf h3 { font-size: 1.02rem; }
.finder-treffer-kopf p { margin-top: 2px; color: var(--leise); font-size: .8rem; }
.finder-daten { display: grid; grid-template-columns: 1.2fr .8fr 1fr .8fr; gap: 8px 14px; margin-top: 13px; color: var(--leise); font-size: .79rem; }
.finder-daten span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finder-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 11px; }
.finder-links a { display: inline-flex; align-items: center; gap: 4px; font-size: .77rem; font-weight: 700; }
.finder-importleiste { position: sticky; bottom: 16px; z-index: 12; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 16px; padding: 15px 17px; border: 1px solid rgba(49,94,251,.22); border-radius: 15px; background: color-mix(in srgb, var(--flaeche) 94%, transparent); box-shadow: 0 18px 50px rgba(28,43,76,.16); backdrop-filter: blur(16px); }
.finder-importleiste strong, .finder-importleiste small { display: block; }
.finder-importleiste small { margin-top: 2px; color: var(--leise); }
.finder-quelle { margin: 20px 3px 0; }

.postfach-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; }
.postfach-kennzahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.postfach-kennzahl { position: relative; overflow: hidden; padding: 15px 17px; border: 1px solid var(--linie); border-radius: 14px; background: var(--flaeche); color: var(--text); box-shadow: 0 8px 24px rgba(28,43,76,.05); }
.postfach-kennzahl::after { position: absolute; right: -17px; bottom: -28px; width: 72px; height: 72px; border-radius: 50%; background: rgba(49,94,251,.08); content: ""; }
.postfach-kennzahl.erfolgreich::after { background: rgba(18,132,92,.1); }
.postfach-kennzahl.wartet::after { background: rgba(183,101,19,.1); }
.postfach-kennzahl span, .postfach-kennzahl small { display: block; color: var(--leise); }
.postfach-kennzahl span { font-size: .76rem; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.postfach-kennzahl strong { display: block; margin: 4px 0 1px; font-size: 1.55rem; line-height: 1.1; }
.postfach-kennzahl small { font-size: .75rem; }
.postfach-nav { align-self: start; padding: 10px; }
.postfach-nav a { display: flex; min-height: 42px; align-items: center; justify-content: space-between; padding: 9px 11px; border-radius: 9px; color: var(--leise); font-weight: 650; }
.postfach-nav a.aktiv { background: var(--flaeche-2); color: var(--text); }
.mail-zeile { display: grid; grid-template-columns: minmax(130px,.65fr) minmax(240px,1.5fr) 105px; gap: 15px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--linie); color: var(--text); }
.mail-zeile:last-child { border-bottom: 0; }
.mail-zeile.ungelesen { background: rgba(49,94,251,.045); }
.mail-zeile.ungelesen strong { font-weight: 850; }
.mail-betreff { min-width: 0; }
.mail-betreff strong, .mail-betreff span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-betreff span { color: var(--leise); font-size: .82rem; }
.mail-meta { color: var(--leise); font-size: .78rem; text-align: right; }
.mail-status { display: flex; justify-content: flex-end; margin-top: 6px; }
.mail-status .badge { font-size: .64rem; }
.mail-inhalt { max-width: 850px; white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; }
.mail-tracking-detail { display: grid; grid-template-columns: minmax(170px,.7fr) minmax(240px,1.3fr); gap: 18px; align-items: center; margin-top: 18px; padding: 15px 17px; border: 1px solid var(--linie); border-radius: 13px; background: var(--flaeche-2); }
.mail-tracking-detail .eyebrow { display: block; margin-bottom: 7px; }
.mail-tracking-detail strong, .mail-tracking-detail small { display: block; }
.mail-tracking-detail small { margin-top: 3px; color: var(--leise); }
.tracking-option { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 11px; align-items: start; padding: 14px 15px; border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche-2); cursor: pointer; }
.tracking-option input { width: 19px; min-height: 19px; margin-top: 2px; accent-color: var(--primaer); }
.tracking-option strong, .tracking-option small { display: block; }
.tracking-option small { margin-top: 3px; line-height: 1.45; }
.firma-mail-kennzahlen { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-bottom: 16px; }
.firma-mail-kennzahlen > div { padding: 14px 16px; border: 1px solid var(--linie); border-radius: 13px; background: var(--flaeche); box-shadow: 0 8px 24px rgba(28,43,76,.04); }
.firma-mail-kennzahlen span { display: block; color: var(--leise); font-size: .76rem; }
.firma-mail-kennzahlen strong { display: block; margin-top: 3px; font-size: 1.35rem; }
.mail-zeilen-status { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.anhaenge { display: flex; flex-wrap: wrap; gap: 8px; }
.anhang { display: inline-flex; min-height: 38px; align-items: center; gap: 6px; padding: 7px 11px; border: 1px solid var(--linie); border-radius: 9px; background: var(--flaeche-2); }

.fortschritt { height: 7px; overflow: hidden; border-radius: 99px; background: var(--linie); }
.fortschritt span { display: block; height: 100%; border-radius: inherit; background: var(--primaer); }
.trenner { height: 1px; margin: 18px 0; background: var(--linie); }
.profil-raster { display: grid; grid-template-columns: minmax(240px, .7fr) minmax(320px, 1.3fr); gap: 18px; align-items: start; }
.profil-vorschau .karte-inhalt { text-align: center; }
.profil-vorschau h3 { margin: 16px 0 4px; }
.profil-vorschau p { margin: 0; }
.profilbild-gross { display: grid; width: 150px; height: 150px; margin: 4px auto 0; place-items: center; border: 4px solid var(--flaeche); border-radius: 50%; background: var(--flaeche-2); box-shadow: 0 0 0 1px var(--linie), 0 16px 35px rgba(28,43,76,.15); object-fit: cover; }
.profilbild-platzhalter { background: linear-gradient(145deg, #315efb, #2449c9); color: #fff; font-size: 3.25rem; font-weight: 800; }
.mobile-nav, .mobile-mehr { display: none; }

.auth-seite { display: grid; min-height: 100vh; place-items: center; padding: 24px; background: radial-gradient(circle at 18% 10%, rgba(49,94,251,.17), transparent 32%), var(--hintergrund); }
.auth-karte { display: grid; width: min(100%, 450px); gap: 26px; padding: clamp(25px, 5vw, 40px); border: 1px solid var(--linie); border-radius: 24px; background: var(--flaeche); box-shadow: 0 30px 80px rgba(28,43,76,.15); }
.auth-breit { width: min(100%, 600px); }
.auth-marke { color: var(--text); }
.auth-karte h1 { font-size: clamp(1.8rem, 6vw, 2.5rem); }
.auth-karte .hinweis { margin: 0; }

dialog { width: min(92vw, 620px); padding: 0; border: 1px solid var(--linie); border-radius: 18px; background: var(--flaeche); color: var(--text); box-shadow: 0 30px 90px rgba(0,0,0,.25); }
dialog::backdrop { background: rgba(8,13,24,.58); backdrop-filter: blur(3px); }
.dialog-inhalt { padding: 22px; }
.dialog-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.dialog-kopf h2 { margin: 0; }
.dialog-kopf button { border: 0; background: transparent; font-size: 1.5rem; cursor: pointer; }

@media (max-width: 1180px) {
    .stat-raster { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .dashboard-raster { grid-template-columns: 1fr; }
    .filterleiste { grid-template-columns: 2fr 1fr 1fr; }
    .filterleiste > :nth-child(4), .filterleiste > :last-child { grid-column: auto; }
    .postfach-kennzahlen { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .finder-suchformular { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .finder-suchformular .button { min-height: 68px; }
    .finder-daten { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 820px) {
    body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
    .sidebar { display: none; }
    .hauptinhalt { margin-left: 0; }
    .topbar { min-height: 92px; padding: 18px 18px 14px; }
    .topbar .button span.ausblenden-mobil { display: none; }
    .global-search { display: none; }
    .seiteninhalt { padding: 0 16px 28px; }
    .hinweis { margin-inline: 16px; }
    .raster-2, .raster-3 { grid-template-columns: 1fr; }
    .mobile-nav { position: fixed; inset: auto 0 0 0; z-index: 50; display: grid; grid-template-columns: repeat(5, 1fr); padding: 7px 6px calc(7px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linie); background: color-mix(in srgb, var(--flaeche) 94%, transparent); backdrop-filter: blur(18px); }
    .mobile-nav a, .mobile-nav button { display: grid; min-height: 48px; place-items: center; align-content: center; gap: 2px; padding: 3px; border: 0; background: transparent; color: var(--leise); font-size: .66rem; font-weight: 700; }
    .mobile-nav .icon { width: 21px; height: 21px; }
    .mobile-mehr { position: fixed; inset: auto 10px calc(69px + env(safe-area-inset-bottom)) 10px; z-index: 60; max-height: 70vh; overflow-y: auto; padding: 12px; border: 1px solid var(--linie); border-radius: 18px; background: var(--flaeche); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
    .mobile-mehr:not([hidden]) { display: grid; }
    .mobile-mehr-kopf { display: flex; align-items: center; justify-content: space-between; padding: 8px 9px; }
    .mobile-mehr-kopf button { border: 0; background: transparent; font-size: 1.5rem; }
    .mobile-mehr a { display: flex; min-height: 48px; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; color: var(--text); font-weight: 700; }
    .desktop-tabelle { display: none; }
    .mobile-karten { display: grid; gap: 10px; }
    .mobile-karte { padding: 16px; }
    .mobile-karte-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
    .mobile-karte h3 { margin: 0 0 4px; }
    .mobile-karte-fuss { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linie); }
    .postfach-layout { grid-template-columns: 1fr; }
    .profil-raster { grid-template-columns: 1fr; }
    .postfach-nav { display: flex; overflow-x: auto; padding: 5px; }
    .postfach-nav a { flex: 0 0 auto; }
    .mail-zeile { grid-template-columns: minmax(0,1fr) auto; gap: 5px 12px; padding: 15px; }
    .mail-zeile > :first-child { grid-column: 1; }
    .mail-betreff { grid-column: 1 / -1; }
    .mail-meta { grid-column: 2; grid-row: 1; }
    .mail-status { display: none; }
    .mail-tracking-detail { grid-template-columns: 1fr; gap: 10px; }
    .kanban-karte select { display: block; }
    .finder-einstieg { grid-template-columns: 1fr; gap: 18px; padding: 20px; }
    .finder-suchformular { grid-template-columns: 1fr; }
    .finder-suchformular .button { min-height: 50px; }
    .finder-ergebnis-kopf { align-items: flex-start; }
    .finder-importleiste { bottom: 82px; }
}

@media (max-width: 580px) {
    h1 { font-size: 1.55rem; }
    .topbar { align-items: flex-start; }
    .topbar-aktionen .button:not(.mobil-wichtig) { display: none; }
    .stat-raster { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
    .stat-karte { min-height: 118px; padding: 16px; }
    .stat-wert { font-size: 1.75rem; }
    .stat-hinweis { font-size: .72rem; }
    .karte-inhalt, .formular-abschnitt { padding: 17px; }
    .karten-kopf { padding: 17px 17px 0; }
    .formular-raster, .checkbox-raster { grid-template-columns: 1fr; }
    .postfach-kennzahlen { gap: 9px; }
    .postfach-kennzahl { padding: 13px; }
    .firma-mail-kennzahlen { grid-template-columns: 1fr; gap: 8px; }
    .mail-zeilen-status { max-width: 150px; }
    .formular-aktionen { position: sticky; bottom: 68px; z-index: 8; padding: 12px 16px; }
    .formular-aktionen .button { flex: 1; }
    .filterleiste { grid-template-columns: 1fr 1fr; }
    .filterleiste .suchfeld { grid-column: 1 / -1; }
    .filterleiste .button { grid-column: 1 / -1; }
    .detail-kopf { padding: 19px; }
    .detail-zeile { display: block; }
    .detail-zeile .rechts { margin-top: 12px; text-align: left; }
    .schnellaktionen { display: grid; grid-template-columns: 1fr 1fr; }
    .info-liste { grid-template-columns: 1fr; }
    .info-liste dt { padding-bottom: 0; border: 0; }
    .info-liste dd { padding-top: 3px; }
    .aktionsleiste { justify-content: stretch; }
    .aktionsleiste .button { flex: 1; }
    .finder-ergebnis-kopf { display: block; }
    .finder-kennzahlen { margin-top: 12px; }
    .finder-kennzahlen span { min-width: 0; flex: 1; }
    .finder-treffer { grid-template-columns: 40px minmax(0,1fr); }
    .finder-treffer-inhalt { padding: 14px; }
    .finder-treffer-kopf { display: block; }
    .finder-treffer-kopf .badge { margin-top: 9px; }
    .finder-daten { grid-template-columns: 1fr; }
    .finder-importleiste { display: grid; }
    .finder-importleiste .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}