/* =====================================================================
   Shell-Komponenten: Raum, Kopf, Dock, Ebenen, Karussell, Schichten,
   plus Neu-Einkleidung der Alt-Komponenten (Knöpfe, Popover, Modale …).
   Lädt nach style.css + tokens.css.
   ===================================================================== */

body {
    font-family: var(--b);
    -webkit-font-smoothing: antialiased;
    background: var(--page-bg-color);
}

/* ---------- Raum: Hintergrund mit Blur, Schleier und Tiefen-Zoom ---------- */
.page-bg {
    inset: -40px;
    filter: var(--raum-filter);
    transform: scale(1);
    transition: transform var(--t-ebene) var(--ease), filter .6s var(--ease);
}
.page-bg-overlay { background: var(--raum-schleier); }
html:not([data-ebene="start"]):not([data-ebene="apps"]) .page-bg { transform: scale(1.08); filter: var(--raum-filter) blur(4px); }
html[data-ebene="start"] .page-bg { transform: scale(1.04); filter: var(--raum-filter) blur(2px); }

.glas {
    background: var(--glas);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
    box-shadow: var(--kante), var(--schatten);
}

/* Die große Glaskarte entfällt: Inhalte schweben direkt im Raum */
.app, .app.glass-shell {
    max-width: none;
    margin: 0;
    min-height: 100vh;
    border: 0;
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    overflow: visible;
}
.glass-shell::before { display: none; }

/* ---------- Kopf: links Logo/Zurück, Mitte Titel, rechts runde Knöpfe ---------- */
.kopf {
    position: fixed;
    inset: 0 0 auto 0;
    height: 96px;
    z-index: 40;
    display: grid;
    grid-template-columns: minmax(160px, 1fr) auto minmax(160px, 1fr);
    align-items: center;
    padding: 0 32px;
    pointer-events: none;
}
.kopf > * { pointer-events: auto; }
.kopf::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, var(--page-bg-color) 0%, transparent 100%);
    opacity: 0;
    transition: opacity var(--t-mittel);
}
html.gescrollt .kopf::before { opacity: .55; }
.kopf-links { display: flex; align-items: center; gap: 12px; }
.kopf-logo { height: 40px; width: 40px; object-fit: contain; cursor: pointer; }
.kopf-zurueck { display: none; }
html:not([data-ebene="apps"]) .kopf-zurueck { display: inline-flex; }
html:not([data-ebene="apps"]) .kopf-logo { display: none; }
.kopf-titel { text-align: center; min-width: 0; }
.kopf-titel h1 {
    margin: 0;
    font-family: var(--h);
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -.02em;
    color: var(--tx);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kopf-titel p { margin: 3px 0 0; font-size: 13.5px; color: var(--mu); }
.kopf-rechts { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }

.rund {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--tx);
    border: 0;
    padding: 0;
    cursor: pointer;
    font: inherit;
    transition: transform var(--t-schnell) var(--ease), background var(--t-schnell);
}
.rund svg { width: 18px; height: 18px; }
.rund:hover { transform: translateY(-1px); }

/* Zurück-Pille mit Label */
.zurueck-pille {
    height: 40px;
    padding: 0 16px 0 10px;
    border-radius: var(--r-pille);
    align-items: center;
    gap: 6px;
    border: 0;
    color: var(--tx);
    font: 600 13.5px/1 var(--b);
    cursor: pointer;
}
.zurueck-pille svg { width: 18px; height: 18px; }

/* Alte Topbar-Knöpfe im neuen Kopf */
.kopf-rechts .theme-toggle,
.kopf-rechts .notif-bell,
.kopf-rechts .user-switcher-trigger {
    position: relative;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--tx);
    background: var(--glas);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
    box-shadow: var(--kante), var(--schatten);
    cursor: pointer;
    top: auto;
    right: auto;
    transition: transform var(--t-schnell) var(--ease);
}
.kopf-rechts .theme-toggle:hover,
.kopf-rechts .notif-bell:hover,
.kopf-rechts .user-switcher-trigger:hover { transform: translateY(-1px); }
.kopf-rechts .theme-toggle svg,
.kopf-rechts .notif-bell svg { width: 18px; height: 18px; }
.kopf-rechts .user-switcher { margin: 0; padding: 0; background: none; border: 0; }
.kopf-rechts .user-avatar {
    width: 44px;
    height: 44px;
    font-size: 13px;
    font-weight: 600;
    background: var(--marke-verlauf);
    color: var(--marke-ink);
    box-shadow: none;
    border: 0;
}
.kopf-rechts .notif-count {
    position: absolute;
    top: -2px;
    right: -2px;
    margin: 0;
    background: var(--marke-verlauf);
    color: var(--marke-ink);
}

/* ---------- Dock: Räume direkt wechseln (nur in Räumen sichtbar) ---------- */
.dock {
    position: fixed;
    left: 50%;
    bottom: 18px;
    z-index: 40;
    transform: translate(-50%, 0);
    display: flex;
    gap: 4px;
    padding: 6px;
    border-radius: var(--r-pille);
    transition: transform var(--t-schicht) var(--ease), opacity var(--t-mittel);
}
.dock .nav-item {
    flex-direction: row;
    min-width: 0;
    height: 44px;
    padding: 0 14px 0 6px;
    gap: 8px;
    border: 0;
    border-radius: var(--r-pille);
    color: var(--mu);
    font: 500 13px/1 var(--b);
    background: none;
}
.dock .nav-item:hover { color: var(--tx); background: rgba(255, 255, 255, .06); }
:root[data-theme="light"] .dock .nav-item:hover { background: rgba(255, 255, 255, .5); }
/* Aktiv: Glas statt farbigem Kasten (Sara-Vorgabe: kein blauer Aktiv-Hintergrund) */
.dock .nav-item.active {
    color: var(--tx);
    font-weight: 600;
    background: var(--glas2);
    box-shadow: var(--kante);
}
.dock .nav-icon {
    width: 32px;
    height: 32px;
    background: none;
    border: 0;
}
.dock .nav-icon svg { width: 17px; height: 17px; }
.dock .nav-item.active .nav-icon {
    background: none;
    box-shadow: none;
}
.dock .nav-item.active .nav-icon svg { color: var(--tx); }
.dock .nav-label { max-width: none; white-space: nowrap; }
.dock .nav-count {
    position: static;
    margin-left: -2px;
    background: var(--marke-verlauf);
    color: var(--marke-ink);
    box-shadow: none;
}

/* ---------- Hauptbereich + Ebenen-Übergang ---------- */
.main {
    max-width: 1380px;
    margin: 0 auto;
    padding: 110px 32px 60px;
}

/* Raum-Titel steht im Kopf → Seitenkopf zeigt nur noch Aktionen */
.tab-panel > .page-head .page-title,
.tab-panel > .page-head .page-sub,
.tab-panel > .page-head > div > .page-title,
.tab-panel > .page-head > div > .page-sub { display: none; }
.tab-panel > .page-head:not(.page-head-row) { display: none; }
.tab-panel > .page-head-row { justify-content: flex-end; margin-bottom: 12px; }

.tab-panel.rein-tiefer { animation: ebeneTiefer var(--t-ebene) var(--ease) both; }
.tab-panel.rein-hoeher { animation: ebeneHoeher var(--t-ebene) var(--ease) both; }
@keyframes ebeneTiefer {
    from { opacity: 0; transform: scale(.94); filter: blur(6px); }
    to { opacity: 1; transform: none; filter: none; }
}
@keyframes ebeneHoeher {
    from { opacity: 0; transform: scale(1.06); filter: blur(6px); }
    to { opacity: 1; transform: none; filter: none; }
}

/* ---------- Start: Karussell ---------- */
#tab-apps.active,
#tab-start.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: calc(100vh - 150px);
    justify-content: center;
}
.karussell {
    position: relative;
    width: 100%;
    height: 440px;
    margin-top: 4px;
}
.slot {
    position: absolute;
    left: 50%;
    top: 0;
    width: 300px;
    height: 420px;
    margin-left: -150px;
    cursor: pointer;
    transition: transform .55s var(--ease), opacity .4s, filter .4s;
    filter: drop-shadow(0 26px 28px rgba(5, 10, 20, .30));
}
.slot[data-pos="0"] { transform: translateX(0) scale(1); z-index: 5; }
.slot[data-pos="-1"] { transform: translateX(-262px) scale(.8); z-index: 4; filter: brightness(.86) drop-shadow(0 26px 28px rgba(5, 10, 20, .3)); }
.slot[data-pos="1"] { transform: translateX(262px) scale(.8); z-index: 4; filter: brightness(.86) drop-shadow(0 26px 28px rgba(5, 10, 20, .3)); }
.slot[data-pos="-2"] { transform: translateX(-458px) scale(.64); z-index: 3; opacity: .92; filter: brightness(.74) drop-shadow(0 26px 28px rgba(5, 10, 20, .3)); }
.slot[data-pos="2"] { transform: translateX(458px) scale(.64); z-index: 3; opacity: .92; filter: brightness(.74) drop-shadow(0 26px 28px rgba(5, 10, 20, .3)); }
.slot[data-pos="fern-links"] { transform: translateX(-560px) scale(.5); opacity: 0; pointer-events: none; }
.slot[data-pos="fern-rechts"] { transform: translateX(560px) scale(.5); opacity: 0; pointer-events: none; }
.slot[data-pos="-1"]:hover { transform: translateX(-262px) scale(.84); filter: brightness(.95) drop-shadow(0 26px 28px rgba(5, 10, 20, .3)); }
.slot[data-pos="1"]:hover { transform: translateX(262px) scale(.84); filter: brightness(.95) drop-shadow(0 26px 28px rgba(5, 10, 20, .3)); }
.slot[data-pos="-2"]:hover { transform: translateX(-458px) scale(.68); filter: brightness(.85) drop-shadow(0 26px 28px rgba(5, 10, 20, .3)); }
.slot[data-pos="2"]:hover { transform: translateX(458px) scale(.68); filter: brightness(.85) drop-shadow(0 26px 28px rgba(5, 10, 20, .3)); }
.slot[data-pos="0"]:hover .karte { transform: translateY(-4px); }

.karte {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    text-align: left;
    color: var(--tx);
    font: inherit;
    cursor: pointer;
    background: var(--karte-fuell);
    transition: transform .35s var(--ease);
    clip-path: path('M26,0 L200,0 Q214,0 214,14 L214,20 Q214,34 228,34 L274,34 Q300,34 300,60 L300,394 Q300,420 274,420 L26,420 Q0,420 0,394 L0,26 Q0,0 26,0 Z');
}
/* Marken-Schimmer oben rechts + feine Lichtkante */
.karte::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 70% at 100% 0%, rgba(210, 190, 156, .30), transparent 60%),
        radial-gradient(90% 60% at 0% 100%, rgba(142, 197, 255, .10), transparent 60%);
    pointer-events: none;
}
.karte::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .10), transparent 30%);
    pointer-events: none;
}
.karte:focus-visible { outline: none; }
.slot[data-pos="0"] .karte:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.karte-icon {
    position: absolute;
    left: 22px;
    top: 22px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glas);
    box-shadow: var(--kante);
    z-index: 1;
}
.karte-icon svg { width: 20px; height: 20px; stroke-linecap: round; stroke-linejoin: round; }
.karte-zahl {
    position: absolute;
    left: 24px;
    right: 24px;
    top: 112px;
    display: flex;
    flex-direction: column;
    z-index: 1;
}
.karte-zahl b {
    font-family: var(--h);
    font-size: 72px;
    font-weight: 200;
    letter-spacing: -.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.karte-zahl small { font-size: 13px; color: var(--mu); margin-top: 6px; }
.karte .text {
    position: absolute;
    left: 24px;
    right: 22px;
    bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 1;
}
.karte .status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--mu);
}
.karte .status i { width: 6px; height: 6px; border-radius: 50%; background: var(--mu); display: inline-block; }
.karte .status.live i { background: var(--live); box-shadow: 0 0 0 3px rgba(142, 197, 255, .28); }
.karte .status.hot i { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); animation: punktPuls 2.4s ease-in-out infinite; }
@keyframes punktPuls { 50% { box-shadow: 0 0 0 6px transparent; } }
.karte .text > b {
    font-family: var(--h);
    font-size: 28px;
    font-weight: 500;
    letter-spacing: -.02em;
    line-height: 1.05;
}
.karte .text > em { font-style: normal; font-size: 13px; color: var(--mu); line-height: 1.4; }
.reiter {
    position: absolute;
    right: 0;
    top: 0;
    width: 86px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--h);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--tx);
    font-variant-numeric: tabular-nums;
}

.start-werte {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
    min-height: 36px;
}
.pille {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border-radius: var(--r-pille);
    font-size: 13px;
    color: var(--mu);
    white-space: nowrap;
    animation: reinUnten .45s var(--ease) both;
}
.pille b { font-family: var(--h); font-weight: 600; font-size: 14px; color: var(--tx); font-variant-numeric: tabular-nums; }
.pille i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; background: var(--mu); }
.pille.live i { background: var(--live); }
.pille.hot i { background: var(--accent); }
.start-aktionen {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}
@keyframes reinUnten { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.start-hinweis { margin-top: 22px; font-size: 12px; color: var(--fa); text-align: center; }
.start-hinweis kbd {
    font: 600 11px/1 var(--b);
    padding: 3px 6px;
    border-radius: 6px;
    background: var(--glas);
    box-shadow: var(--kante);
    color: var(--mu);
}

/* ---------- Knöpfe ---------- */
.knopf {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0 20px 0 16px;
    border-radius: var(--r-pille);
    border: 0;
    font: 600 14px/1 var(--b);
    color: var(--tx);
    cursor: pointer;
    transition: transform var(--t-schnell) var(--ease), box-shadow var(--t-schnell);
}
.knopf svg { width: 17px; height: 17px; }
.knopf:hover { transform: translateY(-1px); }
.knopf.haupt { background: var(--marke-verlauf); color: var(--marke-ink); box-shadow: var(--marke-schatten); }
.knopf.glas { padding: 0 20px; }
.knopf.gefahr { background: var(--danger); color: #fff; padding: 0 20px; }

.btn-primary, .new-project-btn {
    background: var(--marke-verlauf);
    color: var(--marke-ink);
    border-radius: var(--r-pille);
    font-weight: 600;
    box-shadow: var(--marke-schatten);
    transition: transform var(--t-schnell) var(--ease), box-shadow var(--t-schnell);
}
.btn-primary:hover, .new-project-btn:hover { box-shadow: var(--marke-schatten); }
.new-project-btn { height: 46px; padding: 0 22px; font-size: 14px; }
.btn-secondary {
    border: 0;
    border-radius: var(--r-pille);
    background: var(--glas);
    box-shadow: var(--kante);
}
.btn-secondary:hover { background: var(--glas2); }
.btn-ghost { border-radius: var(--r-pille); }

/* Segment-Umschalter (Ansichten) */
.trainer-view-toggle {
    padding: 4px;
    gap: 2px;
    border: 0;
    border-radius: var(--r-pille);
    background: var(--glas);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
    box-shadow: var(--kante);
}
.trainer-view-toggle .view-toggle {
    height: 34px;
    padding: 0 16px;
    border-radius: var(--r-pille);
    font-weight: 500;
}
.trainer-view-toggle .view-toggle.active {
    background: var(--glas2);
    color: var(--tx);
    box-shadow: var(--kante);
    font-weight: 600;
}

/* ---------- Schichten ---------- */
.schicht-dimmer {
    position: fixed;
    inset: 0;
    background: var(--dimmer);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-mittel);
}
.schicht-dimmer.an { opacity: 1; pointer-events: auto; }

.schicht {
    position: fixed;
    display: flex;
    flex-direction: column;
    color: var(--tx);
    background: var(--glas2);
    -webkit-backdrop-filter: blur(34px) saturate(170%);
    backdrop-filter: blur(34px) saturate(170%);
    box-shadow: var(--kante), var(--schatten-fenster);
    visibility: hidden;
    outline: none;
}
.schicht::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 50%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.schicht.fenster {
    left: 50%;
    top: 50%;
    width: min(1180px, calc(100vw - 48px));
    height: min(880px, calc(100vh - 64px));
    border-radius: var(--r-fenster);
    padding: 24px 30px 0;
    opacity: 0;
    transform: translate(-50%, -47%) scale(.96);
    transition: opacity var(--t-mittel), transform var(--t-schicht) var(--ease), filter var(--t-mittel), visibility 0s var(--t-schicht);
}
.schicht.fenster.offen {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%);
    transition: opacity var(--t-mittel), transform var(--t-schicht) var(--ease), filter var(--t-mittel), visibility 0s;
}
.schicht.fenster.klein { width: min(640px, calc(100vw - 48px)); height: auto; max-height: calc(100vh - 64px); padding-bottom: 24px; }
.schicht.sheet {
    left: max(24px, calc(50% - 560px));
    right: max(24px, calc(50% - 560px));
    bottom: 0;
    max-height: 84vh;
    border-radius: 30px 30px 0 0;
    padding: 12px 32px 26px;
    transform: translateY(105%);
    transition: transform var(--t-schicht) var(--ease), filter var(--t-mittel), visibility 0s var(--t-schicht);
}
.schicht.sheet.offen {
    transform: none;
    visibility: visible;
    transition: transform var(--t-schicht) var(--ease), filter var(--t-mittel), visibility 0s;
}
/* Darunterliegende Schicht tritt zurück */
.schicht.zurueck { filter: brightness(.55) blur(1px); }
:root[data-theme="light"] .schicht.zurueck { filter: brightness(.85) blur(1px); }

.griff {
    display: block;
    width: 44px;
    height: 5px;
    border-radius: 5px;
    background: var(--mu);
    opacity: .4;
    margin: 0 auto 14px;
    cursor: grab;
    touch-action: none;
}
.schicht-kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex: none;
}
.schicht-titel { min-width: 0; }
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--mu);
}
.schicht-titel h3 {
    margin: 6px 0 0;
    font-family: var(--h);
    font-size: 28px;
    font-weight: 400;
    letter-spacing: -.02em;
    line-height: 1.15;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.schicht-titel p { margin: 4px 0 0; font-size: 13.5px; color: var(--mu); }
.schicht-kopf-rechts { display: flex; align-items: center; gap: 10px; flex: none; }
.schicht-kopf .rund { background: var(--glas); box-shadow: var(--kante); }
.schicht-inhalt {
    flex: 1;
    min-height: 0;
    overflow: auto;
    margin: 14px -30px 0;
    padding: 0 30px 28px;
    scrollbar-width: thin;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 14px);
    mask-image: linear-gradient(180deg, transparent, #000 14px);
}
.schicht.sheet .schicht-inhalt { margin: 14px -32px 0; padding: 0 32px 4px; }

/* Bestätigen */
.best {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dimmer);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility 0s .3s;
}
.best.offen { opacity: 1; visibility: visible; transition: opacity .3s, visibility 0s; }
.best-box {
    width: min(520px, calc(100vw - 32px));
    border-radius: 32px;
    padding: 26px 28px 22px;
    color: var(--tx);
    background: var(--glas2);
    -webkit-backdrop-filter: blur(34px) saturate(170%);
    backdrop-filter: blur(34px) saturate(170%);
    box-shadow: var(--kante), var(--schatten-fenster);
    transform: translateY(16px) scale(.97);
    transition: transform .45s var(--ease);
}
.best.offen .best-box { transform: none; }
.best-box h3 { margin: 6px 0 0; font-family: var(--h); font-size: 23px; font-weight: 500; letter-spacing: -.01em; }
.best-box p { margin: 8px 0 0; font-size: 13.5px; color: var(--mu); line-height: 1.55; white-space: pre-line; }
.best-fuss { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.best-fuss .knopf { height: 44px; }

/* ---------- Projekt als Fenster ---------- */
.projekt-fenster .schicht-inhalt > .projekt-details { display: block; margin: 0; padding: 0; border: 0; }
.projekt-fenster .status-trigger { font-size: 12px; }
.projekt-fenster-aktionen { display: flex; gap: 8px; }
.projekt-fenster-aktionen .projekt-card-aktionen { opacity: 1; }

/* Reiter im Projekt als Segment-Control */
.detail-tabs {
    display: inline-flex;
    gap: 2px;
    padding: 4px;
    margin: 4px 0 18px;
    border: 0;
    border-radius: var(--r-pille);
    background: var(--glas);
    box-shadow: var(--kante);
    max-width: 100%;
    position: sticky;
    top: 0;
    z-index: 3;
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
}
.detail-tab {
    height: 34px;
    padding: 0 16px;
    margin: 0;
    border: 0;
    border-radius: var(--r-pille);
    font-weight: 500;
    font-size: 13.5px;
}
.detail-tab.active {
    color: var(--tx);
    background: var(--glas2);
    box-shadow: var(--kante);
    font-weight: 600;
}
.detail-tab-panel.active { animation: reinRechts .45s var(--ease) both; }
@keyframes reinRechts { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }

/* Projektkarten: ganze Karte ist der Klick ins Fenster */
.projekt-card { cursor: pointer; transition: transform var(--t-schnell) var(--ease), background var(--t-schnell); }
.projekt-card:hover { transform: translateY(-2px); }
.projekt-card .chevron { display: none; }

/* ---------- Alt-Komponenten neu eingekleidet ---------- */
.modal-backdrop {
    background: var(--dimmer);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: fadeIn .3s ease;
}
.modal {
    position: relative;   /* Anker für .modal-close */
    color: var(--tx);
    background: var(--glas2);
    -webkit-backdrop-filter: blur(34px) saturate(170%);
    backdrop-filter: blur(34px) saturate(170%);
    border: 0;
    border-radius: 32px;
    box-shadow: var(--kante), var(--schatten-fenster);
    padding: 26px 28px;
    animation: modalRein .45s var(--ease) both;
    transition: filter var(--t-mittel);
}
.modal-backdrop.zurueck .modal { filter: brightness(.6) blur(1px); }
@keyframes modalRein { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
.modal-title, .modal h2 { font-family: var(--h); font-weight: 500; letter-spacing: -.02em; }
.modal-close { border: 0; background: var(--glas); box-shadow: var(--kante); width: 36px; height: 36px; }

.popover {
    background: var(--glas-fest);
    border: 0;
    border-radius: 18px;
    box-shadow: var(--kante), var(--schatten-fenster);
    animation: popRein .25s var(--ease) both;
}
@keyframes popRein { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }

.toast {
    background: var(--glas-fest);
    border: 0;
    border-radius: var(--r-pille);
    padding: 12px 20px;
    box-shadow: var(--kante), var(--schatten);
    animation: reinUnten .35s var(--ease) both;
}
.toast.success { box-shadow: var(--kante), inset 3px 0 0 var(--success), var(--schatten); }
.toast.error { box-shadow: var(--kante), inset 3px 0 0 var(--danger), var(--schatten); }

input, select, textarea { font-family: inherit; }

/* ---------- Raum „Heute" (bisherige Startseite) ---------- */
#tab-heute .start-frost { display: none; }
#tab-heute .start-content { padding: 0; }
#tab-heute #start-greeting,
#tab-heute #start-subline { display: none; }
#tab-heute .start-hero { padding: 0 0 18px; }
#tab-heute .start-customize-btn { position: static; }

/* ---------- Schmale Fenster ---------- */
@media (max-width: 900px) {
    .kopf { padding: 0 16px; grid-template-columns: auto 1fr auto; gap: 10px; }
    .kopf-titel h1 { font-size: 20px; }
    .kopf-titel p { display: none; }
    .main { padding: 96px 16px 110px; }
    .dock { max-width: calc(100vw - 24px); overflow-x: auto; scrollbar-width: none; }
    .dock .nav-label { display: none; }
    .dock .nav-item { padding: 0 8px; }
    .slot[data-pos="-2"], .slot[data-pos="2"] { opacity: 0; pointer-events: none; }
    .slot[data-pos="-1"] { transform: translateX(-200px) scale(.72); }
    .slot[data-pos="1"] { transform: translateX(200px) scale(.72); }
    .schicht.fenster { width: calc(100vw - 16px); height: calc(100vh - 24px); border-radius: 26px; padding: 18px 18px 0; }
    .schicht-inhalt { margin: 12px -18px 0; padding: 0 18px 22px; }
}

/* ---------- Feinschliff ---------- */
.projekt-fenster-titel { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.knopf:focus-visible, .rund:focus-visible, .zurueck-pille:focus-visible,
.dock .nav-item:focus-visible, .detail-tab:focus-visible, .view-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* ---------- Start-Dashboard (Muster Risoniq „Telefonie“) ---------- */
#tab-start.active { display: block; min-height: 0; }
.dash > * { animation: reinUnten .5s var(--ease) both; }
.dash > *:nth-child(2) { animation-delay: .06s; }
.dash > *:nth-child(n+3) { animation-delay: .12s; }
.kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    padding: 4px 6px 0;
}
.kpi { padding: 10px 14px 12px; margin: -10px -14px -12px; border-radius: 20px; transition: background var(--t-schnell); }
.kpi.klick { cursor: pointer; }
.kpi.klick:hover { background: rgba(255, 255, 255, .06); }
:root[data-theme="light"] .kpi.klick:hover { background: rgba(255, 255, 255, .45); }
.kpi.klick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kpi small { display: block; font-size: 12.5px; color: var(--mu); margin-bottom: 6px; }
.kpi b {
    display: block;
    font-family: var(--h);
    font-size: 48px;
    font-weight: 300;
    letter-spacing: -.03em;
    line-height: 1;
    color: var(--tx);
    font-variant-numeric: tabular-nums;
}
.kpi b span { font-size: 22px; color: var(--mu); margin-left: 2px; letter-spacing: 0; }
.kpi em { display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-size: 12px; color: var(--mu); margin-top: 9px; }
.kpi em i { width: 6px; height: 6px; border-radius: 50%; background: var(--mu); flex: none; }
.kpi em i.heiss { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.kpi em i.ok { background: var(--success); }
.kpi.klick em::after { content: "›"; margin-left: 3px; font-size: 15px; line-height: 1; opacity: .85; }

.pnls {
    display: grid;
    grid-template-columns: 1.55fr 1fr 1.2fr;
    gap: 16px;
    margin-top: 28px;
}
.pnl {
    position: relative;
    min-width: 0;
    min-height: 196px;
    display: flex;
    flex-direction: column;
    padding: 18px 22px;
    border-radius: 30px;
    background: rgba(10, 16, 26, .52);
    -webkit-backdrop-filter: blur(36px) saturate(120%);
    backdrop-filter: blur(36px) saturate(120%);
    box-shadow: 0 30px 60px -40px rgba(0, 8, 20, .55);
}
:root[data-theme="light"] .pnl {
    background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .3));
    box-shadow: 0 30px 60px -40px rgba(13, 44, 71, .35);
}
.pnl::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 60%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.pnl h4 { display: flex; justify-content: space-between; align-items: center; margin: 0; font-size: 13px; font-weight: 500; color: var(--mu); }
.pnl h4 b { font-weight: 600; color: var(--tx); font-variant-numeric: tabular-nums; }
.pnl svg.ch { flex: 1; width: 100%; height: 140px; margin-top: 8px; overflow: visible; color: var(--accent); }
.ch-raster { stroke: var(--trenn); stroke-dasharray: 3 5; }
.ch-linie { fill: none; stroke: var(--tx); stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ch-punkt { fill: var(--tx); }
.ch-punkt.jetzt { fill: var(--page-bg-color); stroke: var(--tx); stroke-width: 2; }
.ch-label { font: 500 11px var(--b); fill: var(--mu); }
.phasen-balken { display: flex; flex-direction: column; gap: 11px; margin-top: 16px; }
.pb-zeile { display: grid; grid-template-columns: 112px 1fr 28px; align-items: center; gap: 12px; font-size: 13px; color: var(--tx); }
.pb-zeile b { text-align: right; font-variant-numeric: tabular-nums; }
.pb-spur { height: 6px; border-radius: 6px; background: rgba(127, 127, 127, .18); overflow: hidden; }
.pb-spur i { display: block; height: 100%; border-radius: 6px; background: var(--marke-verlauf); transition: width .9s var(--ease); }

.akten-kopf { display: flex; justify-content: space-between; align-items: baseline; margin: 30px 6px 14px; }
.akten-kopf b { font-family: var(--h); font-size: 16px; font-weight: 600; color: var(--tx); }
.akten-kopf span { font-size: 12.5px; color: var(--mu); }
.akten { display: flex; flex-wrap: wrap; gap: 16px; padding: 4px 0 26px; }
.akte {
    position: relative;
    width: 176px;
    height: 176px;
    flex: none;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    font: inherit;
    cursor: pointer;
    filter: drop-shadow(0 18px 20px rgba(4, 14, 26, .3));
    transition: transform .3s var(--ease);
}
.akte:hover { transform: translateY(-5px); }
.akte:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 20px; }
.akte .ak {
    position: absolute;
    inset: 0;
    clip-path: path('M18,0 L110,0 Q120,0 120,10 L120,14 Q120,24 130,24 L158,24 Q176,24 176,42 L176,158 Q176,176 158,176 L18,176 Q0,176 0,158 L0,18 Q0,0 18,0 Z');
    background:
        radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--q) 70%, transparent), transparent 70%),
        linear-gradient(160deg, color-mix(in srgb, var(--q) 55%, #1b2230), #121722);
}
.akte .ak::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 14, 26, 0) 30%, rgba(4, 14, 26, .78)); }
.ak-logo { position: absolute; left: 14px; top: 14px; width: 34px; height: 34px; border-radius: 50%; object-fit: contain; background: rgba(255, 255, 255, .9); padding: 5px; z-index: 1; }
.akte .al {
    position: absolute;
    right: 0;
    top: 0;
    width: 56px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--tx);
    font-variant-numeric: tabular-nums;
}
.akte .al i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); animation: punktPuls 2.4s ease-in-out infinite; }
.akte .at { position: absolute; left: 14px; right: 12px; bottom: 13px; z-index: 1; display: flex; flex-direction: column; gap: 3px; color: #fff; }
.akte .at small { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; opacity: .85; }
.akte .at b { font-family: var(--h); font-size: 15.5px; font-weight: 500; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.akte .fort { height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .25); margin-top: 5px; overflow: hidden; }
.akte .fort i { display: block; height: 100%; background: var(--marke-verlauf); }
.akte.heiss { animation: aktePuls 2.6s ease-in-out infinite; }
@keyframes aktePuls {
    0%, 100% { filter: drop-shadow(0 18px 20px rgba(4, 14, 26, .3)); }
    50% { filter: drop-shadow(0 0 14px rgba(210, 190, 156, .55)) drop-shadow(0 18px 20px rgba(4, 14, 26, .3)); }
}
.akte.neu .ak { background: var(--glas2); }
.akte.neu .ak::after { display: none; }
.akte.neu .at { color: var(--tx); }
.akte.neu .plus { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; border: 1.5px dashed currentColor; color: var(--mu); display: flex; align-items: center; justify-content: center; z-index: 1; }
.akte.neu .plus svg { width: 20px; height: 20px; }

/* Listen-Fenster hinter den Zahlen */
.schicht.listen-fenster { width: min(860px, calc(100vw - 48px)); height: min(640px, calc(100vh - 64px)); }
.zeilen { display: flex; flex-direction: column; }
.zeile {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    padding: 11px 4px;
    border: 0;
    border-bottom: 1px solid var(--trenn);
    background: none;
    color: var(--tx);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background var(--t-schnell);
}
.zeile:last-child { border-bottom: 0; }
.zeile:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 12px; }
.zeile:hover { background: rgba(255, 255, 255, .04); }
.zeile .ini {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 600 12px var(--h);
    color: var(--tx);
    background: color-mix(in srgb, var(--q) 30%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--q) 50%, transparent);
}
.zeile .n { min-width: 0; }
.zeile .n b { display: block; font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zeile .n span { display: block; font-size: 12.5px; color: var(--mu); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zeile .d { font: 500 13.5px var(--h); color: var(--mu); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zeile .d.heiss { color: var(--accent); }
.zeile .akt { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: var(--r-pille); font-size: 13px; font-weight: 600; background: var(--glas); box-shadow: var(--kante); }
.pleer { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 60px 0; color: var(--mu); font-size: 14px; }
.pleer b { font-family: var(--h); font-size: 19px; font-weight: 500; color: var(--tx); }

@media (max-width: 1100px) {
    .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 26px; }
    .pnls { grid-template-columns: 1fr 1fr; }
    .pnls > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kpi b { font-size: 38px; }
    .pnls { grid-template-columns: 1fr; }
}

/* ---------- Gedanke des Tages ---------- */
.tagesblase {
    display: flex;
    align-items: baseline;
    gap: 14px;
    width: fit-content;
    max-width: 100%;
    margin: -6px auto 30px;
    padding: 11px 22px;
    border-radius: 22px;
    background: var(--glas2);
}
.tagesblase small { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--mu); white-space: nowrap; }
.tagesblase span { font-size: 14.5px; color: var(--tx); font-style: italic; }

/* ---------- Trainer frei (Säulen je Werktag) ---------- */
.pnl-klick { border: 0; font: inherit; text-align: left; color: inherit; cursor: pointer; transition: transform var(--t-schnell) var(--ease); }
.pnl-klick:hover { transform: translateY(-2px); }
.frei-saeulen { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 12px; align-items: end; }
.fs { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.fs b { font: 300 22px/1 var(--h); color: var(--tx); font-variant-numeric: tabular-nums; }
.fs.leer b { color: var(--accent); }
.fs-spur { flex: 1; width: 14px; min-height: 70px; border-radius: 8px; background: rgba(127, 127, 127, .18); display: flex; align-items: flex-end; overflow: hidden; }
.fs-spur i { display: block; width: 100%; border-radius: 8px; background: var(--marke-verlauf); transition: height .9s var(--ease); }
.fs small { font-size: 11.5px; color: var(--mu); }

/* ---------- Einstellungs-Sheet ---------- */
.kopf-rechts #einstellungen-btn { width: 44px; height: 44px; }
.kopf-rechts #einstellungen-btn:hover svg { transform: rotate(40deg); }
.kopf-rechts #einstellungen-btn svg { transition: transform .5s var(--ease); }
.schicht.einst-sheet { max-height: 88vh; }
.konto {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-radius: 22px;
    background: var(--glas);
    box-shadow: var(--kante);
}
.konto-ini {
    width: 52px; height: 52px; border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    font: 600 16px var(--h); color: var(--marke-ink); background: var(--marke-verlauf);
}
.konto-text { flex: 1; min-width: 0; }
.konto-text b { display: block; font-size: 16px; font-weight: 600; }
.konto-text span { display: block; font-size: 13px; color: var(--mu); margin-top: 2px; }
.konto-akt { display: flex; gap: 8px; flex-wrap: wrap; }
.konto-akt .knopf { height: 38px; padding: 0 16px; font-size: 13px; }
.kgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; margin-top: 14px; }
.kachel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-height: 116px;
    padding: 16px 16px 14px;
    border: 0;
    border-radius: 20px;
    background: var(--glas);
    box-shadow: var(--kante);
    color: var(--tx);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform var(--t-schnell) var(--ease), background var(--t-schnell);
}
.kachel:hover { transform: translateY(-3px); background: var(--glas2); }
.kachel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kk-icon { color: var(--accent); margin-bottom: 10px; }
.kk-icon svg { width: 22px; height: 22px; display: block; }
.kachel b { font-size: 14.5px; font-weight: 600; line-height: 1.25; }
.kachel span:not(.kk-icon) { font-size: 12.5px; color: var(--mu); }
.einst-fuss { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 18px; font-size: 12.5px; color: var(--fa); }
.einst { padding-top: 8px; }
.mehr-knopf { height: 40px; padding: 0 16px; font-size: 13px; gap: 6px; }

/* ---------- Projekt: „Jetzt dran“ ---------- */
.jetzt { display: flex; flex-direction: column; gap: 12px; }
.jetzt-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.jetzt-fortschritt { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }
.jetzt-fortschritt b { font: 300 34px/1 var(--h); letter-spacing: -.02em; color: var(--tx); font-variant-numeric: tabular-nums; }
.jetzt-fortschritt span { font-size: 13.5px; color: var(--mu); }
.jetzt-einst-knopf { height: 38px; padding: 0 16px; font-size: 13px; }
.jetzt-einst {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    padding: 14px 16px;
    border-radius: 18px;
    background: var(--glas);
    box-shadow: var(--kante);
}
.jetzt-einst[hidden] { display: none; }
.jetzt-einst label { display: flex; flex-direction: column; gap: 5px; min-width: 200px; flex: 1; }
.jetzt-einst label span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--mu); }
.jetzt-einst select { height: 38px; border-radius: 12px; border: 0; padding: 0 10px; background: var(--input-bg); color: var(--tx); box-shadow: var(--kante); font: 500 13.5px var(--b); }

.phasen-leiste { display: flex; gap: 4px; margin: 6px 0 4px; }
.pl-punkt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.pl-punkt i { height: 6px; border-radius: 6px; background: rgba(127, 127, 127, .2); }
.pl-punkt.erledigt i { background: var(--marke-verlauf); }
.pl-punkt.aktiv i { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); animation: punktPuls 2.4s ease-in-out infinite; }
.pl-punkt span { font-size: 11px; color: var(--mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-punkt.aktiv span { color: var(--tx); font-weight: 600; }

.jetzt-h { margin: 12px 2px 0; font: 600 13px var(--b); color: var(--mu); letter-spacing: .02em; }
.aktion-karte {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 18px;
    border-radius: 20px;
    background: var(--glas);
    box-shadow: var(--kante);
    transition: opacity .35s, transform .35s var(--ease);
}
.aktion-karte.ueber { box-shadow: var(--kante), inset 3px 0 0 var(--accent); }
.aktion-karte.weg { opacity: 0; transform: translateX(24px); }
.aktion-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.aktion-text b { font: 500 17px/1.25 var(--h); color: var(--tx); }
.aktion-meta { font-size: 12.5px; color: var(--mu); }
.aktion-meta.heiss { color: var(--accent); }
.aktion-hinweis { font-size: 13px; color: var(--tx); opacity: .8; margin-top: 3px; }
.aktion-auto { font-size: 11.5px; color: var(--fa); margin-top: 2px; }
.aktion-knoepfe { display: flex; gap: 8px; flex: none; }
.aktion-knoepfe .knopf { height: 40px; padding: 0 18px; font-size: 13.5px; }
.aktion-erledigt[disabled] { opacity: .5; cursor: default; }

.jetzt-zuletzt { margin-top: 4px; font-size: 13px; color: var(--mu); }
.jetzt-zuletzt summary { cursor: pointer; padding: 6px 2px; font-weight: 600; }
.jetzt-erledigt { display: flex; flex-direction: column; gap: 6px; padding: 6px 2px 2px; }
.jetzt-erledigt > div { display: flex; align-items: baseline; gap: 10px; color: var(--tx); }
.jetzt-erledigt .ok { color: var(--success); font-weight: 700; }
.jetzt-erledigt small { color: var(--fa); margin-left: auto; white-space: nowrap; }
.jetzt-gesamt { align-self: flex-start; height: 38px; padding: 0 16px; font-size: 13px; margin-top: 6px; }
@media (max-width: 700px) {
    .aktion-karte { flex-direction: column; align-items: stretch; }
}
.pl-punkt.aktiv i { background: linear-gradient(90deg, var(--accent) 0 45%, rgba(127, 127, 127, .2) 45%); box-shadow: none; animation: none; }

/* ---------- Stellantis-Listen: schlankes Formular ---------- */
.stx-section-collapsible.collapsed > :not(.stx-section-head) { display: none; }
.stx-fest { display: flex; flex-direction: column; gap: 6px; }
.stx-fest-wert { font-size: 13.5px; color: var(--tx); padding: 8px 0; }
.stx-grid-haupt { padding-top: 4px; }

/* ---------- Terminvorschläge ---------- */
.tv-block {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding: 16px 18px;
    margin-bottom: 16px;
    border-radius: 20px;
    background: var(--glas);
    box-shadow: var(--kante);
}
.tv-text { display: flex; flex-direction: column; gap: 3px; min-width: 240px; flex: 1; }
.tv-text b { font: 500 17px var(--h); color: var(--tx); }
.tv-text span { font-size: 13px; color: var(--mu); }
.tv-eingaben { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.tv-eingaben label { display: flex; flex-direction: column; gap: 4px; }
.tv-eingaben label span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--mu); }
.tv-eingaben input { height: 40px; border-radius: 12px; border: 0; padding: 0 12px; background: var(--input-bg); color: var(--tx); box-shadow: var(--kante); font: 500 13.5px var(--b); }
.tv-tage { width: 76px; }
.tv-ort { width: 230px; }
.tv-eingaben .knopf { height: 40px; }
.tv-zeile { grid-template-columns: 52px minmax(0, 1fr) 0 auto; cursor: default; }
.tv-zeile:hover { background: none; }
.tv-kal { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 48px; height: 52px; border-radius: 14px; background: var(--glas); box-shadow: var(--kante); }
.tv-kal b { font: 300 22px/1 var(--h); color: var(--tx); }
.tv-kal small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--mu); }
.tv-trainer { display: flex !important; flex-wrap: wrap; gap: 5px; margin-top: 6px !important; white-space: normal !important; }
.tv-trainer i { font-style: normal; font-size: 11.5px; padding: 2px 9px; border-radius: 999px; background: var(--glas); box-shadow: var(--kante); color: var(--mu); }
.tv-trainer i.ok { color: var(--tx); box-shadow: var(--kante), inset 0 0 0 1px var(--success); }
.tv-nehmen { height: 38px; padding: 0 16px; font-size: 13px; }
.detail-tabs { background: var(--glas-fest); }

/* ---------- Hilfe: „i“-Symbole (shell/hilfe.js) ---------- */
button.info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    vertical-align: 1px;
    font: italic 700 10px/1 Georgia, "Times New Roman", serif;
    letter-spacing: 0;
    text-transform: none;
    color: var(--mu);
    background: transparent;
    box-shadow: inset 0 0 0 1.2px currentColor;
    cursor: help;
    opacity: .75;
    flex: none;
    transition: opacity var(--t-schnell), color var(--t-schnell);
}
button.info:hover, button.info:focus-visible { opacity: 1; color: var(--accent); outline: none; }
.pnl h4 button.info { margin-right: auto; }
.hilfe-tip {
    position: fixed;
    z-index: 3000;
    max-width: 320px;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--tx);
    background: var(--glas-fest);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
    box-shadow: var(--kante), var(--schatten-fenster);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .18s, transform .25s var(--ease);
}
.hilfe-tip.an { opacity: 1; transform: none; }

/* ---------- Übersicht: Kachelreihe ---------- */
.ue-reihe { display: grid; grid-template-columns: 1fr 1.3fr 2.2fr; gap: 10px; }
.ue-kachel { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 12px 16px; border-radius: 18px; background: var(--glas); box-shadow: var(--kante); }
.ue-kachel small { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--mu); }
.ue-kachel b { font: 500 16px/1.25 var(--h); color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ue-kachel b.ue-leer { color: var(--fa); font-weight: 400; }
.ue-sub { font-size: 12.5px; color: var(--mu); }
.ue-sub.over, .ue-sub.soon { color: var(--accent); }
.ue-klick { cursor: pointer; transition: background var(--t-schnell); }
.ue-klick:hover { background: var(--glas2); }
.ue-eck { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 2px; }
.ue-eck span { font-size: 13px; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ue-eck i { font-style: normal; color: var(--mu); margin-right: 6px; }
@media (max-width: 800px) { .ue-reihe { grid-template-columns: 1fr; } }

/* ---------- Dashboard-Widgets ---------- */
.dash-kopf { position: relative; display: flex; justify-content: center; align-items: center; margin: -6px 0 26px; }
.dash-kopf .tagesblase { margin: 0; }
.dash-anpassen { position: absolute; right: 0; top: 50%; transform: translateY(-50%); height: 38px; padding: 0 16px; font-size: 13px; }
.dash-anpassen:hover { transform: translateY(-50%) translateY(-1px); }
.w-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; grid-auto-flow: row dense; align-items: start; }
.widget {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 18px 20px;
    border-radius: 28px;
    background: rgba(10, 16, 26, .52);
    -webkit-backdrop-filter: blur(36px) saturate(120%);
    backdrop-filter: blur(36px) saturate(120%);
    box-shadow: 0 30px 60px -40px rgba(0, 8, 20, .55);
    animation: reinUnten .5s var(--ease) both;
}
:root[data-theme="light"] .widget { background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .34)); box-shadow: 0 30px 60px -40px rgba(13, 44, 71, .35); }
.widget::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 60%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.widget > h4 { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--mu); display: flex; align-items: center; }
.w-voll { grid-column: span 12; }
.w-halb { grid-column: span 6; }
.w-drittel { grid-column: span 4; }
.widget.w-voll[data-widget="dringendste"], .widget.w-voll[data-widget="kennzahlen"] { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 4px 0; }
.widget.w-voll[data-widget="dringendste"]::before, .widget.w-voll[data-widget="kennzahlen"]::before { display: none; }
.widget[data-widget="dringendste"] > h4 { font: 600 16px var(--h); color: var(--tx); }
.widget[data-widget="kennzahlen"] > h4 { display: none; }
.widget svg.ch { width: 100%; height: 140px; overflow: visible; color: var(--accent); }

.w-liste { display: flex; flex-direction: column; }
.w-zeile { display: flex; align-items: center; gap: 12px; padding: 8px 2px; border-bottom: 1px solid var(--trenn); transition: opacity .3s, transform .3s var(--ease); }
.w-zeile:last-child { border-bottom: 0; }
.w-zeile.weg { opacity: 0; transform: translateX(20px); }
.w-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--q); flex: none; margin: 0 5px; }
.w-check { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: transparent; box-shadow: inset 0 0 0 1.6px var(--mu); transition: box-shadow var(--t-schnell), background var(--t-schnell); }
.w-check:hover { box-shadow: inset 0 0 0 1.6px var(--success); background: color-mix(in srgb, var(--success) 18%, transparent); }
.w-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 0; border: 0; background: none; color: var(--tx); font: inherit; text-align: left; cursor: pointer; }
.w-text b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-text span { font-size: 12px; color: var(--mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-text:hover b { color: var(--accent); }
.w-rechts { font: 500 12.5px var(--h); color: var(--mu); white-space: nowrap; font-variant-numeric: tabular-nums; }
.w-zeile.heiss .w-rechts { color: var(--accent); }
.w-leer { padding: 18px 2px; font-size: 13px; color: var(--fa); }
.w-mehr { align-self: flex-start; margin-top: 8px; padding: 0; border: 0; background: none; color: var(--accent); font: 600 12.5px var(--b); cursor: pointer; }
.w-klick { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; width: 100%; }

.w-tage { display: flex; flex-direction: column; gap: 8px; }
.w-tag { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; }
.w-datum { display: flex; flex-direction: column; align-items: center; padding: 4px 0; border-radius: 12px; background: var(--glas); box-shadow: var(--kante); }
.w-datum b { font: 300 18px/1 var(--h); color: var(--tx); }
.w-datum small { font-size: 10.5px; color: var(--mu); text-transform: uppercase; letter-spacing: .06em; }
.w-datum.heute { background: var(--marke-verlauf); }
.w-datum.heute b, .w-datum.heute small { color: var(--marke-ink); }
.w-tag-liste { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.w-eintrag { display: flex; align-items: baseline; gap: 8px; min-width: 0; padding: 3px 0; border: 0; background: none; font: inherit; color: var(--tx); text-align: left; cursor: pointer; }
.w-eintrag i { font-style: normal; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--mu); flex: none; width: 62px; }
.w-eintrag.heiss i { color: var(--accent); }
.w-eintrag b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-eintrag span { font-size: 12px; color: var(--mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Anpassen-Sheet */
.anp-liste { display: flex; flex-direction: column; gap: 8px; }
.anp-zeile { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; background: var(--glas); box-shadow: var(--kante); opacity: .7; transition: opacity var(--t-schnell); }
.anp-zeile.an { opacity: 1; }
.anp-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.anp-text b { font-size: 14px; color: var(--tx); }
.anp-text span { font-size: 12.5px; color: var(--mu); }
.anp-pfeile { display: flex; gap: 6px; }
.rund.mini { width: 32px; height: 32px; font-size: 14px; background: var(--glas); box-shadow: var(--kante); }
.rund.mini[disabled] { opacity: .3; cursor: default; transform: none; }
.anp-fuss { margin-top: 16px; display: flex; justify-content: flex-end; }
.umsch { position: relative; width: 46px; height: 28px; flex: none; border: 0; border-radius: 999px; padding: 0; cursor: pointer; background: rgba(127, 127, 127, .3); transition: background .25s var(--ease); }
.umsch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: transform .25s var(--ease); }
.umsch[aria-checked="true"] { background: var(--marke-verlauf); }
.umsch[aria-checked="true"]::after { transform: translateX(18px); }

@media (max-width: 1000px) { .w-halb, .w-drittel { grid-column: span 12; } .dash-anpassen { position: static; transform: none; margin-left: 12px; } .dash-kopf { flex-wrap: wrap; gap: 10px; } }

/* ---------- Kommunikation: Mitteilungstext ---------- */
.mt { display: flex; flex-direction: column; gap: 12px; }
.mt-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.mt-kopf h3 { margin: 0; font: 500 20px var(--h); color: var(--tx); display: flex; align-items: center; }
.mt-sub { font-size: 13px; color: var(--mu); }
.mt-knoepfe { display: flex; gap: 8px; }
.mt-knoepfe .knopf { height: 42px; font-size: 13.5px; padding: 0 18px; }
.mt-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 20px; }
.mt-quellen { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.mt-weg { font-size: 12px; color: var(--mu); }
.mt-quellen i { font-style: normal; font-size: 11.5px; padding: 2px 9px; border-radius: 999px; background: var(--glas); box-shadow: var(--kante); color: var(--mu); }
.mt-raster { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.mt-editor { display: flex; flex-direction: column; gap: 12px; }
.mt-zwei { display: grid; grid-template-columns: 1.6fr 1fr; gap: 10px; }
.mt-feld { display: flex; flex-direction: column; gap: 5px; }
.mt-feld > span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--mu); display: flex; align-items: center; }
.mt-feld input, .mt-feld select, .mt-feld textarea {
    border: 0; border-radius: 12px; padding: 10px 12px; background: var(--input-bg); color: var(--tx);
    box-shadow: var(--kante); font: 400 14px/1.5 var(--b); resize: vertical;
}
.mt-feld textarea { min-height: 110px; }
.mt-inhalte { display: flex; flex-direction: column; gap: 6px; }
.mt-inhalt { display: flex; align-items: center; gap: 8px; }
.mt-inhalt input { flex: 1; }
.mt-punkt { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.mt-plus { align-self: flex-start; height: 34px; padding: 0 14px; font-size: 12.5px; margin-top: 4px; }
.mt-blatt { position: sticky; top: 60px; padding: 18px 22px; border-radius: 20px; background: var(--glas); box-shadow: var(--kante); }
:root[data-theme="light"] .mt-blatt { background: rgba(255, 255, 255, .85); }
.mt-vorschau { margin-top: 8px; font: 400 13.5px/1.6 var(--b); color: var(--tx); }
.mt-vorschau p { margin: 0 0 10px; }
.mt-vorschau ul { margin: 0 0 12px; padding-left: 20px; }
.mt-vorschau .mt-fest { color: var(--fa); font-style: italic; font-size: 12.5px; }
.mt-vorschau .mt-fokus { margin-bottom: 4px; }
.mt-alt { margin-top: 22px; font-size: 13px; color: var(--mu); }
.mt-alt summary { cursor: pointer; padding: 6px 0; font-weight: 600; }
@media (max-width: 900px) { .mt-raster { grid-template-columns: 1fr; } .mt-blatt { position: static; } }

/* ---------- Ruhige Aktualisierungen ---------- */
.dash.still > *, .dash.still .widget { animation: none; }
.aktion-karte { overflow: hidden; transition: opacity .3s ease, transform .35s var(--ease), height .35s var(--ease) .15s,
    padding .35s var(--ease) .15s, margin .35s var(--ease) .15s; }
.aktion-karte.weg { opacity: 0; transform: translateX(24px); height: 0 !important; padding-top: 0; padding-bottom: 0; margin: 0; }
.w-zeile { overflow: hidden; }
.w-zeile.weg { opacity: 0; transform: translateX(20px); }

/* Kritische Projekte: warm abgesetzt */
.widget.w-kritisch { background: linear-gradient(160deg, rgba(150, 70, 40, .38), rgba(60, 22, 18, .52)); }
:root[data-theme="light"] .widget.w-kritisch { background: linear-gradient(160deg, rgba(255, 226, 210, .82), rgba(255, 240, 232, .6)); }
.widget.w-kritisch > h4 { color: #F2B79A; }
:root[data-theme="light"] .widget.w-kritisch > h4 { color: #A2482A; }
.widget.w-kritisch .w-punkt { background: #E8865F; box-shadow: 0 0 0 3px rgba(232, 134, 95, .25); }
.widget.w-kritisch .w-text span { color: color-mix(in srgb, #E8865F 70%, var(--tx)); white-space: normal; }

/* Säulen je Woche (Auslastung) */
.w-saeulen { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; align-items: end; height: 150px; }
.ws { display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; }
.ws b { font: 500 11.5px var(--h); color: var(--mu); font-variant-numeric: tabular-nums; }
.ws.mittel b { color: var(--tx); }
.ws.voll b { color: var(--accent); }
.ws-spur { flex: 1; width: 16px; border-radius: 8px; background: rgba(127, 127, 127, .18); display: flex; align-items: flex-end; overflow: hidden; }
.ws-spur i { display: block; width: 100%; border-radius: 8px; background: var(--marke-verlauf); transition: height .9s var(--ease); }
.ws.voll .ws-spur i { background: linear-gradient(180deg, #E8865F, #C9603A); }
.ws small { font-size: 10.5px; color: var(--mu); white-space: nowrap; }
.w-fuss { margin-top: 10px; font-size: 12.5px; color: var(--mu); }

/* ---------- Dokumente ---------- */
.dok { display: flex; flex-direction: column; gap: 16px; }
.dok-gruppe { padding: 14px 16px; border-radius: 20px; background: var(--glas); box-shadow: var(--kante); transition: box-shadow var(--t-schnell); }
.dok-gruppe.ueber { box-shadow: var(--kante), inset 0 0 0 2px var(--accent); }
.dok-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.dok-kopf h4 { margin: 0; font: 600 14px var(--h); color: var(--tx); display: flex; align-items: center; gap: 8px; }
.dok-kopf h4 b { font: 500 11.5px var(--b); color: var(--mu); padding: 1px 8px; border-radius: 999px; background: var(--glas2); }
.dok-liste { display: flex; flex-direction: column; }
.dok-zeile { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--trenn); }
.dok-zeile:last-child { border-bottom: 0; }
.dok-typ { width: 40px; height: 40px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; font: 700 10px var(--b); letter-spacing: .04em; color: #fff; background: #6b7280; }
.dok-typ.t-docx, .dok-typ.t-doc { background: #2b579a; }
.dok-typ.t-pptx, .dok-typ.t-ppt { background: #c4472b; }
.dok-typ.t-xlsx, .dok-typ.t-xls { background: #217346; }
.dok-typ.t-pdf { background: #b3261e; }
.dok-typ.t-eml, .dok-typ.t-msg { background: #8a744f; }
.dok-typ.t-txt, .dok-typ.t-md, .dok-typ.t-vtt { background: #55607a; }
.dok-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dok-text b { font-size: 13.5px; font-weight: 600; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dok-text span { font-size: 12px; color: var(--mu); }
.dok-knoepfe { display: flex; gap: 6px; flex: none; opacity: .75; transition: opacity var(--t-schnell); }
.dok-zeile:hover .dok-knoepfe { opacity: 1; }
.dok-k { height: 32px; padding: 0 12px; font-size: 12.5px; text-decoration: none; }
.projekt-fenster .schicht-titel p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 900px; }

/* ---------- Terminvorschläge als Kalender ---------- */
.tk { position: relative; padding: 14px 18px 18px; margin-bottom: 18px; border-radius: 22px; background: var(--glas); box-shadow: var(--kante); }
.tk-oben { display: flex; justify-content: flex-end; margin-bottom: 4px; }
.tk-manuell { border: 0; background: none; padding: 0; font: 600 12.5px var(--b); color: var(--accent); cursor: pointer; }
.tk-manuell:hover { text-decoration: underline; }
.tk-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.tk-kopf h4 { margin: 0; font: 500 17px var(--h); color: var(--tx); display: flex; align-items: center; }
.tk-sub { font-size: 12.5px; color: var(--mu); }
.tk-raster { display: grid; grid-template-columns: 52px repeat(5, minmax(0, 1fr)); gap: 6px; }
.tk-wt { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--mu); text-align: center; padding-bottom: 2px; }
.tk-kw { font-size: 11px; color: var(--fa); display: flex; align-items: center; font-variant-numeric: tabular-nums; }
.tk-tag {
    position: relative; height: 52px; border: 0; border-radius: 12px; cursor: pointer; padding: 6px 8px; text-align: left;
    color: var(--tx); font: inherit;
    background: color-mix(in srgb, var(--success) calc(var(--a, .1) * 100%), rgba(127, 127, 127, .07));
    transition: transform var(--t-schnell) var(--ease), box-shadow var(--t-schnell);
}
.tk-tag:hover { transform: translateY(-2px); box-shadow: var(--kante), 0 10px 20px -12px rgba(0, 0, 0, .5); }
.tk-tag.aus { background: transparent; box-shadow: inset 0 0 0 1px var(--trenn); color: var(--fa); cursor: default; }
.tk-tag.aus:hover { transform: none; box-shadow: inset 0 0 0 1px var(--trenn); }
.tk-tag.top { box-shadow: inset 0 0 0 2px var(--accent); }
.tk-tag.eigen { box-shadow: inset 0 0 0 2px var(--success); }
.tk-tag b { font: 500 15px/1 var(--h); }
.tk-monat { position: absolute; top: 7px; right: 8px; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--mu); }
.tk-frei { position: absolute; left: 8px; bottom: 6px; font: 600 11px var(--b); color: var(--mu); }
.tk-marke { position: absolute; right: 6px; bottom: 5px; font: 700 9.5px var(--b); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.tk-marke.eigen { color: var(--success); }
.tk-tip {
    position: fixed; z-index: 3000; max-width: 340px; padding: 12px 14px; border-radius: 14px; pointer-events: none;
    display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--tx);
    background: var(--glas-fest); box-shadow: var(--kante), var(--schatten-fenster);
    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .2s var(--ease);
}
.tk-tip.an { opacity: 1; transform: none; }
.tk-tip b { font: 600 13.5px var(--h); }
.tk-tip span { color: var(--mu); }
.tk-tip small { color: var(--fa); margin-top: 2px; }
.tk-namen { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.tk-namen i { font-style: normal; font-size: 11.5px; padding: 1px 8px; border-radius: 999px; background: var(--glas); color: var(--mu); }
.tk-namen i.ok { color: var(--tx); box-shadow: inset 0 0 0 1px var(--success); }

/* ---------- Kommunikation als Dokument ---------- */
.mt-leiste { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.mt-stand { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mt-stand b { font: 500 18px var(--h); color: var(--tx); display: flex; align-items: center; }
.mt-stand span { font-size: 12.5px; color: var(--mu); }
.mt-knoepfe { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mt-anlass { height: 40px; border: 0; border-radius: 999px; padding: 0 14px; background: var(--glas); color: var(--tx); box-shadow: var(--kante); font: 500 13px var(--b); }
.mt-hinweis:empty { display: none; }
.mt-warn { font-size: 13px; color: var(--accent); padding: 8px 12px; border-radius: 12px; background: var(--accent-soft); }
.mt-schreibt { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--tx); padding: 10px 14px; border-radius: 12px; background: var(--glas); box-shadow: var(--kante); }
.mt-puls { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex: none; animation: punktPuls 1.4s ease-in-out infinite; box-shadow: 0 0 0 4px var(--accent-soft); }
.mt-dok {
    max-width: 820px; margin: 4px auto 0; padding: 42px 54px 48px; border-radius: 8px;
    background: #fbfaf7; color: #1d1d1f; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .04);
    font: 400 14px/1.6 "Helvetica Neue", Arial, sans-serif;
}
.mt-dok .prozess-loading, .mt-dok .prozess-error { color: #555; }
.mt-p { margin: 0 0 11px; }
.mt-kopf { font-size: 11.5px; color: #8a8a8a; margin-bottom: 4px; }
.mt-betreff { font-weight: 700; font-size: 15px; margin: 18px 0 18px; cursor: pointer; border-radius: 6px; }
.mt-betreff:hover, .mt-zielgruppe:hover { background: rgba(167, 146, 115, .14); }
.mt-zielgruppe { cursor: pointer; border-radius: 6px; }
.mt-einleitung, .mt-liste li[contenteditable] { outline: none; border-radius: 6px; transition: background .15s, box-shadow .15s; }
.mt-einleitung:hover, .mt-liste li[contenteditable]:hover { background: rgba(167, 146, 115, .1); }
.mt-einleitung:focus, .mt-liste li[contenteditable]:focus { background: #fff; box-shadow: 0 0 0 2px #a79273; }
.mt-liste { margin: 0 0 14px; padding-left: 22px; }
.mt-liste li { margin-bottom: 4px; }
.mt-liste li[contenteditable]:empty::before { content: "Stichpunkt eingeben"; color: #aaa; }
.mt-plus-li { list-style: none; margin-left: -22px; }
.mt-plus-li button { border: 0; background: none; padding: 2px 0; color: #8a744f; font: 600 12.5px var(--b); cursor: pointer; }
.mt-ph { border: 0; padding: 0 6px; border-radius: 6px; background: #f3e6c9; color: #6e5521; font: inherit; font-weight: 600; cursor: pointer; box-shadow: inset 0 0 0 1px #d8bf86; }
.mt-ph:hover { background: #ecd7a8; }
.mt-pop { display: flex; flex-direction: column; gap: 8px; padding: 12px; min-width: 300px; }
.mt-pop small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--mu); }
.mt-pop-in { height: 38px; border: 0; border-radius: 10px; padding: 0 10px; background: var(--input-bg); color: var(--tx); box-shadow: var(--kante); font: 400 14px var(--b); }
.mt-pop .knopf { height: 36px; align-self: flex-end; font-size: 13px; padding: 0 14px; }
@media (max-width: 700px) { .mt-dok { padding: 24px 20px; } }
.mt-ph { display: inline; width: auto; }

/* ---------- Kalender (Kapazitäten, Projekte, ToDos): ruhiger, Kacheln statt Gitter ---------- */
.cal-header { gap: 10px; padding: 8px 10px; border: 0; border-radius: 999px; background: var(--glas); box-shadow: var(--kante); margin-bottom: 12px; }
.cal-header .cal-nav { gap: 6px; }
.cal-header .cal-nav button, .cal-header > button {
    height: 36px; min-width: 36px; padding: 0 14px; border: 0; border-radius: 999px;
    background: var(--glas2); box-shadow: var(--kante); color: var(--tx); font: 500 13px var(--b); cursor: pointer;
}
.cal-header .cal-period-label { font: 500 17px var(--h); letter-spacing: -.01em; }
.cal-header .cal-mode { padding: 4px; border-radius: 999px; background: var(--glas); box-shadow: var(--kante); }
.cal-header .cal-mode button { height: 30px; padding: 0 14px; border-radius: 999px; font: 500 13px var(--b); }
.cal-header .cal-mode button.active { background: var(--glas2); color: var(--tx); box-shadow: var(--kante); }
.cal-filter-bar { border: 0; border-radius: 18px; background: var(--glas); box-shadow: var(--kante); }

.cal-grid-wrap { border: 0; border-radius: 22px; background: var(--glas); box-shadow: var(--kante); padding: 12px; }
.cal-grid { gap: 3px; background: transparent; border: 0; border-radius: 0; overflow: visible; }
.cal-grid .cal-cell { background: rgba(127, 127, 127, .07); border-radius: 8px; min-height: 40px; }
.cal-grid .cal-header-cell { background: transparent; color: var(--mu); padding: 4px 0 6px; min-height: 0; }
.cal-grid .cal-header-cell.weekend { opacity: .5; }
.cal-grid .cal-header-cell.today { color: var(--accent); }
.cal-grid .cal-header-cell.today div:last-child { color: var(--accent) !important; }
.cal-grid .cal-name-cell { background: var(--glas2); border-radius: 10px; font-weight: 600; font-size: 12.5px; z-index: 2; }
.cal-grid .cal-header-cell.cal-name-cell { background: transparent; }
.cal-day-cell { transition: transform .15s var(--ease), box-shadow .15s; }
.cal-day-cell:hover { transform: translateY(-1px); box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .5); background: rgba(127, 127, 127, .14); }
.cal-day-cell.weekend { background: rgba(127, 127, 127, .03); }
.cal-day-cell.today { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-day-cell.verfuegbar { background: color-mix(in srgb, var(--success) 9%, rgba(127, 127, 127, .06)); }
.cal-day-cell.verfuegbar::after { width: 6px; height: 6px; top: 5px; right: 5px; box-shadow: none; }
.cal-day-cell.gebucht { box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset; }

/* Monat: kompakt, Farbe zeigt die Buchung, Text beim Überfahren (title/Hover-Karte) */
.cal-grid.cal-mode-month .cal-day-cell { min-height: 34px; padding: 0; }
.cal-grid.cal-mode-month .cal-day-cell .cal-note { display: none; }
.cal-grid.cal-mode-month .cal-name-cell { min-height: 34px; padding: 4px 10px; }

/* Woche: lesbarer Text, zweizeilig */
.cal-grid.cal-mode-week { gap: 5px; }
.cal-grid.cal-mode-week .cal-day-cell { min-height: 62px; padding: 8px 9px; border-radius: 12px; }
.cal-grid.cal-mode-week .cal-day-cell .cal-note {
    font-size: 12px; line-height: 1.3; font-weight: 500; white-space: normal; word-break: normal; overflow-wrap: break-word;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cal-grid.cal-mode-week .cal-name-cell { min-height: 62px; }
.cal-grid .cal-name-cell.cal-header-cell { min-height: 0 !important; }

/* Prüfen (Claude ist fertig) und Claude-Erstellung */
.pruef-knoepfe { display: flex; gap: 6px; flex-shrink: 0; }
.pruef-knoepfe .knopf, .aktion-knoepfe a.knopf { text-decoration: none; }
.w-zeile .pruef-knoepfe .knopf { padding: 4px 12px; min-height: 0; height: 28px; font-size: 12px; line-height: 20px; }
.w-zeile.mit-pruefen .w-text { min-width: 0; }
.aktion-karte.ki { opacity: .82; box-shadow: var(--kante), inset 3px 0 0 var(--mu); }
.aktion-karte.ki .eyebrow::after { content: " · Claude"; }

/* Projekt abschließen */
.aktion-karte.abschluss { box-shadow: var(--kante), inset 3px 0 0 var(--accent); }

/* Ansicht als (nur Entwicklungsphase) */
.w-zeile[hidden], .w-mehr[hidden] { display: none !important; }
.ansicht-als { position: fixed; left: 10px; top: 50%; transform: translateY(-50%); z-index: 900;
    display: flex; flex-direction: column; gap: 2px; padding: 8px 5px; border-radius: 16px;
    background: var(--glas); box-shadow: var(--kante), var(--schatten); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.ansicht-als > small { font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: var(--mu); text-align: center; padding: 0 2px 4px; }
.aa-person { display: flex; align-items: center; gap: 0; padding: 4px; border: 0; background: none; border-radius: 12px;
    cursor: pointer; color: var(--tx); font: inherit; text-align: left; transition: background .2s var(--ease); }
.aa-person:hover { background: var(--glas2); }
.aa-kreis { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
    font-size: 11px; font-weight: 600; box-shadow: var(--kante); }
.aa-person.an .aa-kreis { background: var(--accent); color: #fff; box-shadow: none; }
.aa-text { display: none; flex-direction: column; line-height: 1.2; padding: 0 8px; white-space: nowrap; }
.aa-text b { font-size: 12px; font-weight: 600; }
.aa-text i { font-size: 10px; font-style: normal; color: var(--mu); }
.ansicht-als:hover .aa-text { display: flex; }
html.ansicht-fremd .ansicht-als { box-shadow: var(--kante), var(--schatten), 0 0 0 2px var(--accent); }
@media (max-width: 700px) { .ansicht-als { display: none; } }

/* Prüfen-Fenster */
.pruef-fenster { width: min(1320px, 96vw); }
.pf-raster { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; height: min(76vh, 900px); }
.pf-ansicht { border-radius: 16px; overflow: hidden; background: var(--glas2); box-shadow: var(--kante); display: flex; min-height: 0; }
.pf-pdf { flex: 1; width: 100%; height: 100%; border: 0; background: #fff; }
.pf-hinweis { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--mu); text-align: center; padding: 24px; }
.pf-hinweis small { font-size: 12px; opacity: .8; }
.pf-hinweis.fehler { color: var(--tx); }
.pf-spinner { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--trenn); border-top-color: var(--accent); animation: pf-dreh 0.9s linear infinite; }
@keyframes pf-dreh { to { transform: rotate(360deg); } }
.pf-seite { display: flex; flex-direction: column; gap: 18px; overflow-y: auto; min-height: 0; padding-right: 2px; }
.pf-seite section { display: flex; flex-direction: column; gap: 8px; }
.pf-seite h4 { margin: 0; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mu); font-weight: 600; }
.pf-versionen { display: flex; flex-direction: column; gap: 4px; }
.pf-version { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; border: 0; border-radius: 10px;
    background: none; color: var(--tx); font: inherit; text-align: left; cursor: pointer; transition: background .2s var(--ease); }
.pf-version:hover { background: var(--glas2); }
.pf-version.an { background: var(--glas2); box-shadow: inset 3px 0 0 var(--accent); }
.pf-version b { font-size: 13px; }
.pf-version span { font-size: 11px; color: var(--mu); word-break: break-all; }
.pf-anmerkungen { width: 100%; resize: vertical; border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 13px;
    background: var(--glas2); color: var(--tx); border: 0; box-shadow: var(--kante); }
.pf-fuss { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.pf-fuss .knopf { text-decoration: none; }
.pf-fuss .knopf.haupt { flex: 1 0 100%; }
@media (max-width: 900px) { .pf-raster { grid-template-columns: 1fr; height: auto; } .pf-ansicht { height: 60vh; } }

/* App-Ebene: Kachel „App hinzufügen“ */
.slot.art-plus .karte { background: transparent; }
.slot.art-plus .karte::before { background: none; }
.slot.art-plus .karte::after { background: none; border: 2px dashed var(--trenn); border-radius: 26px; inset: 40px 6px 6px; }
.slot.art-plus .karte-icon { left: 50%; top: 46%; transform: translate(-50%, -50%); width: 64px; height: 64px; }
.slot.art-plus .text { text-align: center; }
.slot.art-leise .karte { opacity: .9; }
.app-hinweis p { margin: 0 0 12px; line-height: 1.55; color: var(--tx); }
.karte .status[hidden], .karte-zahl[hidden] { display: none; }

/* Kommunikation: offene Punkte und Anmerkungen */
.mt-klaeren { margin-top: 8px; padding: 10px 14px; border-radius: 12px; background: var(--glas2); box-shadow: var(--kante), inset 3px 0 0 var(--accent); font-size: 13px; }
.mt-klaeren ul { margin: 6px 0 0; padding-left: 18px; color: var(--tx); }
.mt-klaeren li { margin: 3px 0; }
.mt-anm { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.mt-anm h4 { margin: 0; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mu); font-weight: 600; }
.mt-anm-fuss { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mt-anm-regel { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tx); }
.mt-anm-regel select { font: inherit; font-size: 12px; border-radius: 8px; padding: 3px 6px; background: var(--glas2); color: var(--tx); border: 0; box-shadow: var(--kante); }
.mt-anm-alt { font-size: 13px; color: var(--mu); }
.mt-anm-alt p { margin: 6px 0; color: var(--tx); }
.mt-anm-ok { font-size: 13px; color: var(--tx); }
.pf-notiz { font-size: 12px; color: var(--mu); line-height: 1.5; }
.mt-sal-pop { min-width: 360px; }
.mt-sal { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; padding: 3px 0; }
.mt-sal select { font: inherit; font-size: 12px; border-radius: 8px; padding: 3px 6px; background: var(--glas2); color: var(--tx); border: 0; box-shadow: var(--kante); }

/* KI-Aufträge */
.ki-laeuft { display: inline-flex; align-items: center; gap: 8px; }
.ki-laeuft .pf-spinner { width: 14px; height: 14px; }
.pf-klaeren { padding: 10px 12px; border-radius: 12px; background: var(--glas2); box-shadow: var(--kante), inset 3px 0 0 var(--accent); font-size: 12.5px; }
.pf-klaeren ul { margin: 6px 0 0; padding-left: 16px; }
.pf-klaeren li { margin: 3px 0; }
.ki-kosten { display: flex; align-items: baseline; gap: 10px; }
.ki-kosten b { font-size: 28px; font-weight: 300; }
.ki-kosten span { color: var(--mu); font-size: 13px; }
.ki-balken { height: 6px; border-radius: 3px; background: var(--trenn); overflow: hidden; margin: 8px 0 4px; }
.ki-balken i { display: block; height: 100%; background: var(--accent); }
.ki-laeuft[hidden], .pf-notiz[hidden], .pf-klaeren[hidden] { display: none !important; }

/* Trainer-Anfrage zum Kopieren */
.anfrage-modal { max-width: 680px !important; width: min(680px, 94vw); }
.anf-zeile { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.anf-zeile > small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mu); font-weight: 600; }
.anf-wert { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--glas2); box-shadow: var(--kante); font-size: 13px; }
.anf-wert span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.anf-kopie { padding: 4px 12px; font-size: 12px; }
.anf-text { width: 100%; box-sizing: border-box; border: 0; border-radius: 12px; padding: 12px 14px; font: 13px/1.5 inherit; font-family: inherit;
    background: var(--glas2); color: var(--tx); box-shadow: var(--kante); resize: vertical; }
.anf-aktionen { display: flex; gap: 8px; flex-wrap: wrap; }
.anf-zusagen { display: flex; flex-direction: column; gap: 6px; }
.anf-zusage { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: 10px; background: var(--glas2); font-size: 13px; }
.anf-zusage .knopf { padding: 4px 12px; font-size: 12px; }

/* Projektkalender: Kundenplanung als eigene Ebene */
.pkal-plan-leiste { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 10px; font-size: 13px; }
.pkal-plan-leiste .knopf { margin-left: auto; padding: 5px 14px; font-size: 12px; }
.pkal-plan-schalter { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.pkal-entry.pkal-plan { background: var(--glas2) !important; color: var(--tx) !important; box-shadow: inset 3px 0 0 var(--plan-farbe, var(--mu)); cursor: default; font-weight: 400; }
.pkal-entry.pkal-plan.kunde-stellantis { --plan-farbe: #1f3b6e; }
.pkal-entry.pkal-plan.kunde-ford { --plan-farbe: #6fa6d6; }
.pkal-entry.pkal-plan.kunde-jlr { --plan-farbe: #5fae6c; }
.pkal-entry.pkal-plan.kunde-frankia { --plan-farbe: #d27070; }

/* Vorbehalt: angefragt, noch nicht bestätigt */
.cal-day-cell.vorbehalt { box-shadow: inset 0 0 0 1.5px var(--accent); background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(167,146,115,.14) 6px 8px); }
.cal-vorbehalt { font-size: 9.5px; line-height: 1.15; color: var(--accent); font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tk-namen i.vb { box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); }
.chip-vorbehalt { background: rgba(167,146,115,.16) !important; color: var(--accent) !important; }
.anf-zusage-knoepfe { display: inline-flex; gap: 6px; }
.knopf.leise { opacity: .8; }
.pkal-days > .pkal-day { min-width: 0; overflow: hidden; }
.pkal-entry { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cal-mode-month .cal-vorbehalt { display: none; }

/* Verfügbarkeit der Trainer */
.kapa-jahr-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.kapa-jahr { font: inherit; border-radius: 10px; padding: 6px 10px; background: var(--glas2); color: var(--tx); border: 0; box-shadow: var(--kante); }
.kapa-ergebnis { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 10px; background: var(--glas2); margin-top: 6px; font-size: 13px; }
.kapa-ergebnis.fehler { box-shadow: inset 3px 0 0 #c0392b; }
.kapa-ergebnis small { color: var(--mu); font-size: 11.5px; }

/* Academy-Kalender */
.ac-leiste { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 8px 0 10px; font-size: 12.5px; }
.ac-leiste small { margin-left: auto; }
.ac-legende { display: inline-flex; align-items: center; gap: 6px; }
.ac-legende::before { content: ""; width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.ac-legende.ac-projekt::before { background: #1f3b6e; }
.ac-legende.ac-excel::before { background: var(--glas2); box-shadow: inset 3px 0 0 var(--mu); }
.ac-legende.ac-block::before { background: rgba(167,146,115,.35); box-shadow: inset 0 0 0 1px var(--accent); }
.ac-cal .pkal-entry.ac-excel { background: var(--glas2) !important; color: var(--tx) !important; box-shadow: inset 3px 0 0 var(--mu); font-weight: 400; }
.ac-cal .pkal-entry.ac-block { background: rgba(167,146,115,.22) !important; color: var(--tx) !important; box-shadow: inset 0 0 0 1px var(--accent); }
.ac-cal .pkal-day.ac-frei { cursor: pointer; }
.ac-cal .pkal-day.ac-frei:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }
.ac-cal .pkal-day { min-height: 92px; }
.ac-stand { display: block; margin-top: 10px; }
.ac-dialog { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ac-dialog label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--mu); }
.ac-dialog label.breit { grid-column: 1 / -1; }
.ac-dialog input { font: inherit; font-size: 14px; padding: 8px 10px; border-radius: 10px; border: 0; background: var(--glas2); color: var(--tx); box-shadow: var(--kante); }
.ac-dialog-fuss { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.w-klickbar { cursor: pointer; }

/* Checkliste auf Aufgabenkarten */
.aktion-checkliste { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.ck-zeile { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tx); cursor: pointer; }
.ck-zeile input { accent-color: var(--accent); width: 15px; height: 15px; }
.ck-zeile.ck-nn span { text-decoration: line-through; color: var(--mu); }
.ck-nn-knopf { margin-left: auto; border: 0; background: none; color: var(--mu); font: inherit; font-size: 11.5px; cursor: pointer; text-decoration: underline; }

/* Benutzer anlegen: zwei Zeilen (Name · E-Mail / Rolle · Knopf), passt in die Fensterbreite */
.user-add-form { grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; }
.user-add-form input, .user-add-form select {
    min-width: 0; height: 40px; border: 0; border-radius: 12px; padding: 0 12px;
    background: var(--input-bg); color: var(--tx); box-shadow: var(--kante); font: 400 14px var(--b);
}
.user-add-form .btn-add { height: 40px; border-radius: 12px; font-size: 14px; }
.modal-benutzer { max-height: calc(100vh - 48px); }
.modal-benutzer .user-row { padding-top: 8px; padding-bottom: 8px; }
.tagfeld .tag-eigen { margin-top: 8px; max-width: 260px; height: 34px; border: 0; border-radius: 12px; background: var(--input-bg); box-shadow: var(--kante); }

/* ---------- Benutzerverwaltung (Liste links, Person rechts) ---------- */
.modal.modal-benutzer { width: min(1040px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 48px); display: flex; flex-direction: column; overflow: hidden; }
.bm-raum { display: grid; grid-template-columns: 290px 1fr; gap: 18px; min-height: 0; flex: 1; margin-top: 14px; }
.bm-liste { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; padding: 2px; }
.bm-neu { height: 42px; border: 0; border-radius: 14px; background: var(--glas); box-shadow: var(--kante); color: var(--tx); font: 600 13.5px var(--b); cursor: pointer; margin-bottom: 6px; }
.bm-neu.an { background: var(--marke-verlauf); color: var(--marke-ink); }
.bm-person { display: flex; align-items: center; gap: 12px; text-align: left; border: 0; border-radius: 14px; padding: 9px 12px; background: transparent; color: var(--tx); cursor: pointer; font: inherit; }
.bm-person:hover { background: var(--glas); }
.bm-person.an { background: var(--glas2); box-shadow: var(--kante); }
.bm-pt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bm-pt b { font: 600 14px var(--b); display: flex; align-items: center; gap: 6px; }
.bm-admin { font: 600 10.5px var(--b); font-style: normal; letter-spacing: .02em; padding: 2px 7px; border-radius: 999px; background: var(--marke-verlauf); color: var(--marke-ink); }
.bm-zugang { font: 500 12px var(--b); color: var(--mu); display: inline-flex; align-items: center; gap: 6px; }
.bm-zugang::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--fa); }
.bm-zugang.aktiv::before { background: #3FA96B; }
.bm-zugang.einmal::before { background: #D9A23B; }
.bm-zugang.offen::before { background: #C9534A; }
.bm-detail { overflow-y: auto; padding: 4px 6px 4px 18px; border-left: 1px solid var(--trenn); display: flex; flex-direction: column; gap: 14px; }
.bm-kopf { display: flex; align-items: center; gap: 14px; }
.user-avatar.gross { width: 46px; height: 46px; font-size: 15px; }
.bm-titel { margin: 0; font: 600 19px var(--h); }
.bm-unter { color: var(--mu); font-size: 13px; }
.bm-raster { display: grid; grid-template-columns: 1fr 1fr 200px; gap: 12px; }
.bm-feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bm-feld > label { font: 600 12px var(--b); color: var(--mu); display: flex; align-items: center; gap: 6px; }
.bm-feld input, .bm-feld select { height: 40px; border: 0; border-radius: 12px; padding: 0 12px; background: var(--input-bg); color: var(--tx); box-shadow: var(--kante); font: 400 14px var(--b); min-width: 0; }
.bm-zugangbox { border-radius: 18px; padding: 14px 16px; background: var(--glas); box-shadow: var(--kante); display: flex; flex-direction: column; gap: 8px; }
.bm-zugang-kopf { display: flex; align-items: center; gap: 12px; }
.bm-zugang-kopf .bm-zugang { font-size: 13.5px; font-weight: 600; color: var(--tx); }
.bm-zugang-kopf .knopf { margin-left: auto; height: 38px; }
.bm-zuletzt { color: var(--mu); font-size: 12.5px; }
.bm-hinweis { margin: 0; color: var(--mu); font-size: 13px; }
.bm-hinweis.stark { color: var(--tx); font-weight: 500; }
.bm-einladung { width: 100%; box-sizing: border-box; border: 0; border-radius: 12px; padding: 12px; background: var(--input-bg); color: var(--tx); box-shadow: var(--kante); font: 400 13px/1.5 var(--b); resize: vertical; }
.bm-admin-zeile { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; background: var(--glas); box-shadow: var(--kante); }
.bm-admin-zeile div { display: flex; flex-direction: column; gap: 2px; }
.bm-admin-zeile span { color: var(--mu); font-size: 12.5px; }
.bm-fehler { color: var(--danger); font-size: 13px; min-height: 0; }
.bm-fehler:empty { display: none; }
.bm-fuss { display: flex; align-items: center; gap: 10px; }
.bm-fuss .knopf { height: 40px; }
.bm-luecke { flex: 1; }
.bm-fuss:not(:has(.bm-luecke)) { justify-content: flex-end; }
.bm-entfernen { color: var(--danger); }
@media (max-width: 820px) {
    .bm-raum { grid-template-columns: 1fr; }
    .bm-detail { border-left: 0; padding-left: 0; }
    .bm-raster { grid-template-columns: 1fr; }
}

/* ---------- Admin: Datensicherung & Protokoll ---------- */
.ad-zeile { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 6px 0; border-top: 1px solid var(--trenn); font-size: 13px; }
.ad-link { color: var(--tx); font-weight: 600; text-decoration: none; }
.ad-link:hover { text-decoration: underline; }
.ad-kopf { display: flex; align-items: center; gap: 12px; }
.ad-filter { margin-left: auto; height: 34px; border: 0; border-radius: 10px; padding: 0 10px; background: var(--input-bg); color: var(--tx); box-shadow: var(--kante); font: 500 13px var(--b); }
.ad-protokoll { display: flex; flex-direction: column; max-height: 420px; overflow-y: auto; margin-top: 6px; }
.ad-eintrag { display: grid; grid-template-columns: 130px 110px 1fr 150px; gap: 12px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--trenn); font-size: 13px; }
.ad-zeit, .ad-wer { color: var(--mu); }
.ad-bereich { font-size: 11.5px; font-weight: 600; color: var(--mu); text-transform: uppercase; letter-spacing: .03em; }
.ad-text small { display: block; color: var(--mu); font-size: 12px; margin-top: 2px; word-break: break-word; }
.bm-person.aus { opacity: .55; }
.bm-zugang.deaktiviert::before { background: var(--fa); }
.bm-hinweis.klein { font-size: 12px; }
@media (max-width: 820px) { .ad-eintrag { grid-template-columns: 1fr; gap: 2px; } }