/* =====================================================================
   Steven Warenwirtschaft – CRM
   Design-System v2 · App-Shell (Sidebar) · warm-neutral + Gold
   Schrift: Inter
   ===================================================================== */

:root {
    /* Flächen (warm-neutral, gestaffelt für echte Tiefe) */
    --bg:        #181818;
    --surface:   #1f1f1f;
    --surface-2: #262626;
    --surface-3: #2e2e2e;
    --sidebar:   #161616;

    /* Linien */
    --line:      rgba(255,255,255,.08);
    --line-2:    rgba(255,255,255,.05);

    /* Marke */
    --gold:      #c9a24d;
    --gold-2:    #dbb86a;
    --gold-soft: rgba(201,162,77,.14);
    --gold-line: rgba(201,162,77,.35);

    /* Text */
    --text:      #ededee;
    --muted:     #a6a7aa;
    --dim:       #76777b;

    /* Status */
    --green:     #4ccb7e;
    --green-soft:rgba(76,203,126,.14);
    --red:       #e2675c;
    --red-soft:  rgba(226,103,92,.14);
    --blue:      #5b8def;
    --blue-soft: rgba(91,141,239,.14);
    --brown:     #b5835a;
    --brown-soft:rgba(181,131,90,.16);
    --amber:     #e0a13d;
    --amber-soft:rgba(224,161,61,.14);
    --purple:    #a98bdd;
    --purple-soft:rgba(169,139,221,.15);

    --radius:    10px;
    --radius-sm: 7px;
    --shadow:    0 8px 30px rgba(0,0,0,.45);
    --shadow-sm: 0 2px 10px rgba(0,0,0,.3);
    --sidebar-w: 246px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
a { color: var(--gold); text-decoration: none; }
h1,h2,h3,h4 { font-weight: 600; letter-spacing: -.01em; }

/* SVG-Icons */
.ico { display: inline-block; vertical-align: -.18em; flex-shrink: 0; }
.gold-ico { color: var(--gold); }
.avatar-lg { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--gold); font-weight: 700; font-size: 1.1rem; flex-shrink: 0; overflow: hidden; }
.avatar-lg img { width: 100%; height: 100%; object-fit: cover; }

/* =====================================================================
   APP-SHELL – Topbar-Navigation
   ===================================================================== */
.topbar {
    position: sticky; top: 0; z-index: 70;
    display: flex; align-items: center; gap: 1.3em;
    height: 72px; padding: 0 1.8em;
    background: var(--sidebar);
    border-bottom: 1px solid var(--line);
}

/* Marke (Logo) */
.brand { display: flex; align-items: center; flex-shrink: 0; margin-left: 1em; }
.brand-logo { height: 34px; width: auto; display: block; }

/* Zurück zur Übersicht: leise Zeile über dem Seitentitel (nur Unterseiten) */
.page-back {
    display: inline-flex; align-items: center; gap: .4em;
    margin: 0 0 .85em; white-space: nowrap;
    color: var(--dim); font-size: .84rem; font-weight: 500;
    transition: color .15s;
}
.page-back:hover { color: var(--gold-2); }
.page-back .ico { flex-shrink: 0; transition: transform .16s ease; }
.page-back:hover .ico { transform: translateX(-3px); }

/* Zwei-Strich-Burger – schwebt oben rechts, immer über dem Menü (auch bei offenem Menü klickbar) */
.menu-toggle {
    position: fixed; top: 13px; right: 1.8em; z-index: 70;
    width: 46px; height: 46px; padding: 0;
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
    background: none; border: 0; border-radius: 10px; cursor: pointer;
    transition: background .15s;
}
.menu-toggle:hover { background: rgba(255,255,255,.06); }
.menu-toggle span {
    display: block; width: 26px; height: 2px; border-radius: 2px; background: var(--text);
    transition: transform .34s cubic-bezier(.7,0,.3,1), background .2s;
}
.menu-toggle:hover span { background: var(--gold-2); }
/* geöffnet: die zwei Striche kreuzen sich zum X */
body.mega-open .menu-toggle span:first-child { transform: translateY(4.5px) rotate(45deg); }
body.mega-open .menu-toggle span:last-child  { transform: translateY(-4.5px) rotate(-45deg); }

/* =====================================================================
   VOLLBILD-MENÜ – graues Panel, fährt von oben herunter
   Links: Text-Navigation · Rechts: großes Bild „Firmenvorstellung"
   ===================================================================== */
.mega {
    position: fixed; inset: 0; z-index: 65;
    display: flex; flex-direction: row; align-items: stretch; gap: 2.5em;
    padding: 6.5em 3em 3em;                     /* oben Platz fürs Logo/den Header */
    background: var(--sidebar);                 /* gleiches Grau wie der Header */
    transform: translateY(-100%);               /* startet oberhalb des Viewports */
    visibility: hidden;
    transition: transform .5s cubic-bezier(.7,0,.2,1), visibility 0s linear .5s;
}
body.mega-open { overflow: hidden; }
body.mega-open .mega {
    transform: translateY(0px);                 /* fährt von oben herunter über die ganze Seite */
    visibility: visible;
    transition: transform .5s cubic-bezier(.7,0,.2,1), visibility 0s;
}
/* Header/Logo bleiben sichtbar (Topbar z-index 70 > Menü 65) – beim Öffnen nur die Trennlinie ausblenden */
body.mega-open .topbar { border-bottom-color: transparent; }

/* Linke Spalte: Navigation + Einstellungen */
.mega-left { flex: 1 1 44%; min-width: 0; display: flex; flex-direction: column; align-items: stretch; }

/* Navigations-Links – groß, elegant, mit dezenten Trennstrichen dazwischen.
   Beim Öffnen wischen sie gestaffelt von oben nach unten ein. */
.mega-nav { display: flex; flex-direction: column; margin-top: 9vh; }

.mega-link {
    display: block; padding: .5em 0; text-align: right;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(2.2rem, 5.4vw, 3.8rem); font-weight: 600; line-height: 1.16;
    color: var(--text);
    opacity: 0; transform: translateY(-22px);   /* Startpunkt: etwas höher, unsichtbar */
    transition: opacity .45s ease, transform .5s cubic-bezier(.2,.7,.2,1), color .2s ease;
}
.mega-link:not(:last-child) { border-bottom: 1px solid var(--line); }  /* dezenter Strich zwischen den Einträgen */
body.mega-open .mega-link { opacity: 1; transform: translateY(0); }
body.mega-open .mega-link:nth-child(1) { transition-delay: .16s, .16s, 0s; }
body.mega-open .mega-link:nth-child(2) { transition-delay: .26s, .26s, 0s; }
body.mega-open .mega-link:nth-child(3) { transition-delay: .36s, .36s, 0s; }
.mega-link:hover, .mega-link:focus-visible { color: var(--gold-2); }
.mega-link:focus-visible { outline: 2px solid var(--gold-line); outline-offset: 6px; }
.mega-link.is-active { color: var(--gold); }

/* Unten links: Einstellungen + Abmelden (wischen gemeinsam ein) */
.mega-bottom {
    margin-top: auto; margin-bottom: 4vh;
    display: flex; flex-direction: column; align-items: flex-start; gap: .9em;
    opacity: 0; transform: translateY(-22px);
    transition: opacity .45s ease, transform .5s cubic-bezier(.2,.7,.2,1);
}
body.mega-open .mega-bottom { opacity: 1; transform: translateY(0); transition-delay: .46s; }
.mega-settings { display: inline-flex; align-items: center; gap: .5em; font-size: 1.05rem; font-weight: 500; color: var(--muted); transition: color .2s ease; }
.mega-settings:hover, .mega-settings:focus-visible { color: var(--gold-2); }
.mega-settings.is-active { color: var(--gold); }
.mega-logout { display: inline-flex; align-items: center; gap: .5em; font-size: 1.05rem; font-weight: 500; color: var(--red); transition: color .15s ease; }
.mega-logout:hover, .mega-logout:focus-visible { color: #ef8177; }
.mega-logout .ico { flex-shrink: 0; }
.mega-logout:hover .ico, .mega-logout:focus-visible .ico { animation: logout-nudge .5s ease; }
/* Goldenes Zahnrad – dreht sich beim Hover einmal */
.mega-settings .ico { color: var(--gold); flex-shrink: 0; transform-origin: 50% 50%; }
.mega-settings:hover .ico, .mega-settings:focus-visible .ico { animation: gear-spin .6s ease; }
@keyframes gear-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes logout-nudge { 0% { transform: translateX(0); } 45% { transform: translateX(5px); } 100% { transform: translateX(0); } }

/* Rechte Seite: Galerie aus 3 Bildern – Firmenvorstellung + gestapelt Team/Verträge */
.mega-gallery { flex: 1 1 56%; min-width: 0; display: flex; gap: 1em; }
.mega-gallery > .mega-tile { flex: 1 1 50%; }                 /* Firmenvorstellung */
.mega-stack { flex: 1 1 50%; min-width: 0; display: flex; flex-direction: column; gap: 1em; }
.mega-stack > .mega-tile { flex: 1 1 50%; }                   /* Team + Verträge, je halbe Höhe */

.mega-tile {
    position: relative; overflow: hidden; min-height: 0;
    display: flex; align-items: flex-end;   /* Titel unten links */
    border-radius: 16px; border: 1px solid var(--line); color: #fff;
    opacity: 0; transition: opacity .5s ease, border-color .25s ease;
}
body.mega-open .mega-gallery > .mega-tile          { opacity: 1; transition-delay: .30s, 0s; }
body.mega-open .mega-stack  > .mega-tile:nth-child(1) { opacity: 1; transition-delay: .38s, 0s; }
body.mega-open .mega-stack  > .mega-tile:nth-child(2) { opacity: 1; transition-delay: .46s, 0s; }
.mega-tile-img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.mega-tile-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,10,10,0) 40%, rgba(8,8,8,.55) 70%, rgba(6,6,6,.9) 100%); }
.mega-tile-title { position: relative; z-index: 2; padding: .8em 1em; font-family: "Playfair Display", Georgia, serif; font-weight: 600; font-size: clamp(1.25rem, 1.9vw, 1.8rem); text-shadow: 0 2px 16px rgba(0,0,0,.55); }
.mega-tile-lg .mega-tile-title { font-size: clamp(1.5rem, 2.4vw, 2.3rem); }
.mega-tile:hover { border-color: var(--gold-line); }
.mega-tile:hover .mega-tile-img { transform: scale(1.05); }
.mega-tile:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }

.content { position: relative; padding: 1.9em 1.8em 4em; max-width: 1360px; margin: 0 auto; width: 100%; }

/* =====================================================================
   SEITENKOPF
   ===================================================================== */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1em 1.5em; margin-bottom: 1.6em; flex-wrap: wrap; }
.page-head > div:first-child { min-width: 0; }
.page-title { font-family: "Playfair Display", Georgia, serif; font-size: clamp(2rem, 3.4vw, 2.6rem); font-weight: 600; line-height: 1.12; margin: 0 0 .1em; }
.page-sub { color: var(--dim); margin: 0; font-size: .92rem; }
.page-head .page-sub { display: none; }   /* Untertitel auf den Unterseiten ausgeblendet */

/* =====================================================================
   KENNZAHLEN
   ===================================================================== */
.kpi-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 1em; margin-bottom: 1.6em; }
.kpi {
    background: linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 135%);
    border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.4em 1.55em;
    display: flex; align-items: center; gap: 1.05em;
    position: relative; overflow: hidden;
}
/* Goldener Strich – durchgehend über die volle Breite JEDER Kachel (blendet nicht mehr aus) */
.kpi::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-2)); }
.kpi .kpi-ic {
    width: 48px; height: 48px; flex-shrink: 0;
    display: grid; place-items: center; border-radius: 11px;
    background: var(--gold-soft); color: var(--gold);
}
.kpi .kpi-ic.blue  { background: var(--blue-soft);  color: var(--blue); }
.kpi .kpi-ic.green { background: var(--green-soft); color: var(--green); }
.kpi .kpi-ic.red   { background: var(--red-soft);   color: var(--red); }
.kpi .kpi-val { font-size: 1.95rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi .kpi-lbl { font-size: .84rem; color: var(--dim); margin-top: .4em; }

.kpi { transition: border-color .14s, transform .14s, box-shadow .14s; }
a.kpi:hover { border-color: var(--gold-line); transform: translateY(-2px); box-shadow: var(--shadow-sm); color: var(--text); }

/* veraltete .stat-Klassen weiter unterstützt */
.stat-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 1em; margin-bottom: 1.6em; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.05em 1.2em; }
.stat .stat-val { font-size: 1.5rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.stat .stat-lbl { color: var(--dim); font-size: .8rem; margin-top: .3em; }

/* =====================================================================
   DASHBOARD – Premium
   ===================================================================== */
.dash-hero {
    display: flex; align-items: center; justify-content: space-between; gap: 1.5em; flex-wrap: wrap;
    padding: 1.7em 2em; margin-bottom: 1.5em; position: relative; overflow: hidden;
    background:
        radial-gradient(130% 200% at 100% 0%, rgba(201,162,77,.20) 0%, transparent 52%),
        linear-gradient(120deg, #1b1b1b 0%, var(--surface) 62%, var(--surface-2) 100%);
    border: 1px solid var(--gold-line); border-radius: 18px;
    box-shadow: 0 14px 44px rgba(0,0,0,.4);
}
.dash-hero::after { content: ''; position: absolute; right: -70px; top: -70px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(201,162,77,.14), transparent 70%); pointer-events: none; }
.dh-left { display: flex; align-items: center; gap: 1.1em; z-index: 1; }
.dh-mark { width: 56px; height: 56px; border: 1px solid var(--gold-line); border-radius: 14px; display: grid; place-items: center; background: var(--gold-soft); flex-shrink: 0; }
.dh-mark img { height: 30px; width: auto; }
.dash-hero h1 { font-size: 1.75rem; margin: 0; }
.dash-hero p { color: var(--dim); margin: .3em 0 0; font-size: .92rem; }
.dh-volume { text-align: right; z-index: 1; }
.dh-vlbl { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--gold); }
.dh-vval { display: block; font-size: 2.3rem; font-weight: 800; color: var(--gold); line-height: 1; margin-top: .3em; font-variant-numeric: tabular-nums; }
.dh-vval small { font-size: .42em; font-weight: 600; color: var(--dim); margin-left: .5em; letter-spacing: .03em; text-transform: uppercase; }

.kpi-row.premium .kpi { padding: 1.5em 1.6em; background: linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 130%); position: relative; overflow: hidden; }
.kpi-row.premium .kpi::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--gold), transparent); opacity: .55; }
.kpi-row.premium .kpi .kpi-val { font-size: 2.05rem; }
.kpi.highlight { background: linear-gradient(160deg, rgba(201,162,77,.18), rgba(201,162,77,.04)) !important; border-color: var(--gold-line); }
.kpi.highlight::before { opacity: 1 !important; }
.kpi.highlight .kpi-val { color: var(--gold); }

.dash-charts { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.3em; margin-top: 1.5em; align-items: stretch; }

.funnel { display: flex; flex-direction: column; gap: .8em; padding-top: .4em; }
.funnel-row { display: flex; align-items: center; gap: .9em; }
.funnel-row .f-label { width: 86px; flex-shrink: 0; font-size: .85rem; color: var(--muted); font-weight: 500; }
.funnel-row .f-track { flex: 1; height: 28px; background: var(--surface-2); border-radius: 8px; overflow: hidden; }
.funnel-row .f-fill { height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--gold-2), var(--gold)); transition: width .9s cubic-bezier(.22,.61,.36,1); }
.funnel-row .f-fill.won { background: linear-gradient(90deg, #6fbf86, var(--green)); }
.funnel-row .f-count { width: 30px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

.donut-wrap { display: flex; align-items: center; gap: 1.5em; flex-wrap: wrap; padding-top: .5em; }
.donut { flex-shrink: 0; }
.donut circle[stroke-dasharray] { transition: stroke-dasharray 1s ease; }
.donut-num { fill: var(--text); font-size: 26px; font-weight: 800; }
.donut-cap { fill: var(--dim); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.donut-legend { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: .55em; }
.dl-row { display: flex; align-items: center; gap: .6em; font-size: .87rem; }
.dl-dot { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.dl-name { flex: 1; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-c { font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .dash-charts { grid-template-columns: 1fr; } }

/* Premium-Banner (z.B. Gesamt-Provision) */
.prov-banner {
    background:
        radial-gradient(120% 220% at 100% 0%, rgba(201,162,77,.16) 0%, transparent 55%),
        linear-gradient(120deg, var(--surface) 0%, var(--surface-2) 100%) !important;
    border-color: var(--gold-line) !important;
}

/* =====================================================================
   KARTEN
   ===================================================================== */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3em 1.4em; }
.card + .card { margin-top: 1.3em; }
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1em; }
.card h3 { margin: 0; font-size: 1rem; display: inline-flex; align-items: center; gap: .5em; }
.card h3 .ico { color: var(--gold); }
.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3em; align-items: stretch; }

/* =====================================================================
   DASHBOARD – Begrüßungs-Banner
   ===================================================================== */
.hero {
    display: flex; align-items: center; justify-content: space-between; gap: 1.5em; flex-wrap: wrap;
    padding: 1.5em 1.7em; margin-bottom: 1.6em;
    background:
        radial-gradient(120% 160% at 100% 0%, rgba(201,162,77,.14) 0%, transparent 45%),
        linear-gradient(120deg, var(--surface) 0%, var(--surface-2) 100%);
    border: 1px solid var(--line); border-radius: 16px;
    position: relative; overflow: hidden;
}
.hero::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--gold), var(--gold-2)); }
.hero .greet { display: flex; align-items: center; gap: .7em; }
.hero .greet .wv-ic { color: var(--gold); display: inline-flex; }
.hero h1 { font-size: 1.55rem; margin: 0; }
.hero .greet-sub { color: var(--dim); margin: .3em 0 0; font-size: .92rem; }
.hero-sum { display: flex; gap: 1.8em; }
.hero-sum .hs { text-align: center; }
.hero-sum .hs .n { display: block; font-size: 1.6rem; font-weight: 700; color: var(--gold); line-height: 1; font-variant-numeric: tabular-nums; }
.hero-sum .hs .l { font-size: .74rem; color: var(--dim); margin-top: .4em; display: block; }
@media (max-width: 620px) { .hero-sum { width: 100%; justify-content: space-between; } }

/* =====================================================================
   CUSTOM FILE-UPLOAD
   ===================================================================== */
.file-input { display: inline-flex; align-items: center; gap: .8em; cursor: pointer; max-width: 100%; }
.file-input input[type=file] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.file-input .file-btn {
    display: inline-flex; align-items: center; gap: .5em; flex-shrink: 0;
    padding: .58em .95em; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface-2); color: var(--text); font-size: .86rem; font-weight: 500; transition: .12s;
}
.file-input:hover .file-btn { border-color: var(--gold-line); background: var(--surface-3); }
.file-input .file-btn .ico { color: var(--muted); }
.file-input .file-name { color: var(--dim); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-input .file-name.has { color: var(--text); }
.file-input input[type=file]:focus-visible + .file-btn { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }

/* =====================================================================
   DASHBOARD – Schnellzugriff
   ===================================================================== */
.quick-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .9em; }
.quick {
    display: flex; align-items: center; gap: .85em;
    padding: 1em 1.1em;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    color: var(--text); transition: border-color .14s, transform .14s, background .14s;
}
.quick:hover { border-color: var(--gold-line); background: var(--surface-2); color: var(--text); transform: translateY(-2px); }
.quick .q-ic { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; background: var(--gold-soft); color: var(--gold); flex-shrink: 0; }
.quick .q-t { font-weight: 600; font-size: .92rem; }
.quick .q-d { font-size: .78rem; color: var(--dim); }
.quick .q-go { margin-left: auto; color: var(--dim); }

/* Mini-Listen im Dashboard */
.mini { display: flex; align-items: center; gap: .8em; padding: .7em 0; border-bottom: 1px solid var(--line-2); }
.mini:last-child { border-bottom: 0; }
.mini .m-main { min-width: 0; }
.mini .m-main .m-t { font-size: .9rem; font-weight: 500; }
.mini .m-main .m-s { font-size: .78rem; color: var(--dim); }
.mini .m-right { margin-left: auto; text-align: right; font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Kacheln (Firmenvorstellung) */
.tile-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.1em; }
.tile {
    display: flex; flex-direction: column; gap: .7em;
    padding: 1.5em 1.4em;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    color: var(--text); cursor: pointer; transition: border-color .14s, transform .14s, background .14s;
}
.tile:hover { border-color: var(--gold-line); background: var(--surface-2); transform: translateY(-2px); color: var(--text); }
.tile-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; background: var(--gold-soft); color: var(--gold); }
.tile h3 { margin: 0; font-size: 1.02rem; }
.tile p { margin: 0; color: var(--dim); font-size: .85rem; }

/* =====================================================================
   TOOLBAR / FILTER / SUCHE
   ===================================================================== */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6em; margin-bottom: 1.2em; }
.chips { display: flex; flex-wrap: wrap; gap: .4em; }
.chip {
    padding: .42em .85em; border: 1px solid var(--line); border-radius: 8px;
    background: var(--surface); color: var(--muted); font-size: .83rem; cursor: pointer;
    transition: .12s; font-weight: 500;
}
.chip:hover { border-color: var(--gold-line); color: var(--text); }
.chip.active { background: var(--gold); border-color: var(--gold); color: #1a1a1a; font-weight: 600; }
.search {
    margin-left: auto; display: flex; align-items: center; gap: .5em;
    padding: .5em .85em; background: var(--surface); border: 1px solid var(--line);
    border-radius: 8px; min-width: 230px;
}
.search input { border: 0; background: transparent; color: var(--text); outline: none; width: 100%; font-size: .9rem; }
.search .ico { color: var(--dim); }
/* Filter-Toolbar: Suche links, Filter-Dropdowns rechts */
.toolbar-filter .search { margin-left: 0; flex: 1 1 240px; }
.toolbar-filter .filters { display: flex; gap: .5em; margin-left: auto; flex-wrap: wrap; }
.toolbar-filter .filters .cselect { width: auto; min-width: 155px; }

/* =====================================================================
   TABELLEN
   ===================================================================== */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table.data { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.data th, table.data td { padding: .72em .95em; text-align: left; white-space: nowrap; }
table.data thead th {
    position: sticky; top: 0;
    background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
    color: var(--muted);
    font-weight: 600; text-transform: uppercase; font-size: .68rem; letter-spacing: .06em;
    border-bottom: 1px solid var(--gold-line);
}
table.data tbody td { font-variant-numeric: tabular-nums; }
table.data tbody tr { border-bottom: 1px solid var(--line-2); }
table.data tbody tr:last-child { border-bottom: 0; }
table.data tbody tr:hover { background: rgba(255,255,255,.025); }
table.data tbody tr:hover .actions { opacity: 1; }

/* Status-Badges */
.badge { display: inline-flex; align-items: center; gap: .4em; padding: .22em .6em; border-radius: 6px; font-size: .74rem; font-weight: 600; }
.badge.neu, .badge.in_bearbeitung { background: var(--blue-soft);  color: var(--blue); }
.badge.erreicht, .badge.aktiv      { background: var(--green-soft); color: var(--green); }
.badge.nicht_erreicht, .badge.abgelaufen, .badge.gekuendigt { background: var(--red-soft); color: var(--red); }
.badge.kein_interesse { background: rgba(160,160,160,.14); color: var(--dim); }
.badge.termin { background: var(--gold-soft); color: var(--gold); }
/* Lifecycle-Status (eine Liste) */
.badge.s-lead, .badge.s-analyse { background: var(--blue-soft); color: var(--blue); }
.badge.s-beratung { background: var(--gold-soft); color: var(--gold); }
.badge.s-service { background: rgba(224,161,61,.14); color: var(--amber); }
.badge.s-gewonnen { background: var(--green-soft); color: var(--green); }
.badge.s-verloren { background: var(--red-soft); color: var(--red); }
.badge.s-team_intern, .badge.s-zukunft, .badge.s-nicht_kontaktieren { background: rgba(160,160,160,.14); color: var(--dim); }
.alarm { color: var(--red); display: inline-flex; align-items: center; gap: .3em; font-size: .78rem; font-weight: 600; }

/* Aktions-Icons (erscheinen beim Hover) */
.actions { display: inline-flex; gap: .3em; opacity: .35; transition: opacity .12s; }
.icon-btn {
    width: 30px; height: 30px; display: grid; place-items: center;
    border: 1px solid var(--line); border-radius: 7px;
    background: var(--surface-2); color: var(--muted); cursor: pointer; transition: .12s;
}
.icon-btn:hover { border-color: var(--gold-line); color: var(--gold); background: var(--surface-3); }
/* Aktions-Icons mit eigener Farbe je Funktion */
.icon-btn.act-view { color: var(--blue); }
.icon-btn.act-view:hover { color: var(--blue); border-color: var(--blue); background: var(--blue-soft); }
.icon-btn.act-move { color: var(--green); }
.icon-btn.act-move:hover { color: var(--green); border-color: var(--green); background: var(--green-soft); }
.icon-btn.act-edit { color: var(--brown); }
.icon-btn.act-edit:hover { color: var(--brown); border-color: var(--brown); background: var(--brown-soft); }
.icon-btn.danger { color: var(--red); }
.icon-btn.danger:hover { border-color: var(--red); color: var(--red); background: var(--red-soft); }

/* Dringlichkeit */
.urgency { display: inline-flex; align-items: center; gap: .4em; font-weight: 600; }
.u-red { color: var(--red); } .u-orange { color: var(--amber); } .u-yellow { color: var(--gold); }

/* =====================================================================
   BUTTONS
   ===================================================================== */
.btn {
    display: inline-flex; align-items: center; gap: .5em;
    padding: .56em 1.05em; border: 1px solid var(--line); border-radius: 8px;
    background: var(--surface-2); color: var(--text);
    font-size: .88rem; font-weight: 500; font-family: inherit; cursor: pointer; transition: .12s;
}
.btn:hover { border-color: var(--gold-line); background: var(--surface-3); }
.btn .ico { color: var(--muted); }
.btn.primary { background: var(--gold); border-color: var(--gold); color: #181818; font-weight: 600; }
.btn.primary .ico { color: #181818; }
.btn.primary:hover { background: var(--gold-2); border-color: var(--gold-2); }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.sm { padding: .42em .8em; font-size: .82rem; }
.btn.danger { color: var(--red); }
.btn.danger:hover { border-color: var(--red); background: var(--red-soft); }

/* =====================================================================
   FORMULARE
   ===================================================================== */
label.field { display: block; margin-bottom: .95em; }
label.field > span { display: block; margin-bottom: .35em; color: var(--muted); font-size: .82rem; font-weight: 500; }
.input, input[type=text], input[type=email], input[type=password],
input[type=date], input[type=time], input[type=number], select, textarea {
    width: 100%; padding: .62em .8em;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
    color: var(--text); font-size: .92rem; font-family: inherit; outline: none; transition: .12s;
}
.input:focus, input:focus, select:focus, textarea:focus {
    border-color: var(--gold-line); box-shadow: 0 0 0 3px var(--gold-soft);
}
select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%2376777b' stroke-width='2' viewBox='0 0 24 24'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right .7em center; padding-right: 2em; }

/* =====================================================================
   CUSTOM-DROPDOWN (ersetzt native <select>)
   ===================================================================== */
.cselect { position: relative; width: 100%; }
.cs-native { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cs-trigger {
    display: flex; align-items: center; justify-content: space-between; gap: .6em;
    width: 100%; padding: .62em .8em;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
    color: var(--text); font-size: .92rem; cursor: pointer; user-select: none; outline: none; transition: .12s;
}
.cs-trigger:hover { border-color: var(--gold-line); }
.cselect.open .cs-trigger, .cs-trigger:focus-visible { border-color: var(--gold-line); box-shadow: 0 0 0 3px var(--gold-soft); }
.cs-trigger .cs-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-trigger .cs-label.placeholder { color: var(--dim); }
.cs-trigger .cs-arrow { color: var(--dim); flex-shrink: 0; transition: transform .15s; }
.cselect.open .cs-trigger .cs-arrow { transform: rotate(180deg); }
.cs-panel {
    position: absolute; left: 0; right: 0; top: calc(100% + 5px); z-index: 130;
    background: var(--surface-3); border: 1px solid var(--gold-line); border-radius: 10px;
    box-shadow: var(--shadow); padding: .35em; max-height: 250px; overflow-y: auto; display: none;
}
/* Schlanke, dezente Scrollleiste im Dropdown */
.cs-panel { scrollbar-width: thin; scrollbar-color: var(--gold-line) transparent; }
.cs-panel::-webkit-scrollbar { width: 9px; }
.cs-panel::-webkit-scrollbar-track { background: transparent; }
.cs-panel::-webkit-scrollbar-thumb { background: var(--gold-line); border-radius: 9px; border: 3px solid transparent; background-clip: padding-box; }
.cs-panel::-webkit-scrollbar-thumb:hover { background: var(--gold); background-clip: padding-box; }
.cselect.up .cs-panel { top: auto; bottom: calc(100% + 5px); }
.cselect.open .cs-panel { display: block; animation: cs-in .13s ease; }
@keyframes cs-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.cs-opt { padding: .5em .7em; border-radius: 7px; font-size: .9rem; color: var(--text); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-opt:hover { background: var(--surface-2); }
.cs-opt.sel { background: var(--gold-soft); color: var(--gold); font-weight: 600; }
.cs-opt.placeholder { color: var(--dim); }
/* Suchfeld im Dropdown (bei data-search oder vielen Optionen) */
.cs-search { position: sticky; top: -.35em; z-index: 1; margin: -.35em -.35em .3em; padding: .5em; background: var(--surface-3); border-bottom: 1px solid var(--line); }
.cs-search-input { width: 100%; padding: .5em .65em; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); color: var(--text); font-size: .88rem; }
.cs-search-input:focus { border-color: var(--gold-line); outline: none; }
.cs-noresult { padding: .6em .7em; color: var(--dim); font-size: .85rem; }
/* Auswahlfeld mit „erstellen“ (data-create) */
.cs-hint { padding: .35em .7em .2em; color: var(--dim); font-size: .74rem; font-weight: 600; letter-spacing: .02em; }
.cs-create {
    display: flex; align-items: center; gap: .5em; margin-top: .25em;
    padding: .55em .7em; border-top: 1px solid var(--line);
    border-radius: 7px; font-size: .88rem; color: var(--gold); cursor: pointer;
}
.cs-create:hover { background: var(--gold-soft); }
.cs-create-plus { font-weight: 700; }
.cs-create-txt { font-weight: 600; }

/* =====================================================================
   Buchhaltung
   ===================================================================== */

/* Jahres-Auswahl etwas größer als die übrigen Chips */
.chips-year .chip { padding: .55em 1.15em; font-size: .96rem; border-radius: 9px; }

/* Ausgaben-Kachel ist anklickbar (öffnet die Auswertung) */
.kpi-link {
    font: inherit; color: inherit;   /* sonst nimmt der Button die Browser-Standardfarbe */
    text-align: left; cursor: pointer;
    display: flex; align-items: center; gap: .9em;
}
.kpi-link:hover { border-color: var(--gold-line); transform: translateY(-2px); box-shadow: var(--shadow-sm); }

/* Hinweis auf die Aufbewahrungsfrist */
.lock-note {
    display: inline-flex; align-items: center; gap: .4em;
    color: var(--dim); font-size: .76rem; font-weight: 500;
}
.icon-btn.is-locked { opacity: .3; cursor: not-allowed; }
.icon-btn.is-locked:hover { border-color: var(--line); color: var(--muted); background: transparent; }

/* Beträge */
.ta-r { text-align: right; }
.amount { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.amount.pos { color: var(--green); }
.amount.neg { color: var(--red); }

/* Art des Eintrags */
.badge.art-ein { background: var(--green-soft); color: var(--green); }
.badge.art-aus { background: var(--red-soft);   color: var(--red); }

/* Kategorie-Pillen */
.kat {
    display: inline-block; max-width: 100%; padding: .2em .6em; border-radius: 6px;
    font-size: .78rem; font-weight: 500; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; vertical-align: middle;
}
.kat-red    { background: var(--red-soft);    color: var(--red); }
.kat-purple { background: var(--purple-soft); color: var(--purple); }
.kat-orange { background: var(--amber-soft);  color: var(--amber); }
.kat-blue   { background: var(--blue-soft);   color: var(--blue); }
.kat-green  { background: var(--green-soft);  color: var(--green); }
.kat-gold   { background: var(--gold-soft);   color: var(--gold); }

/* Ausgabe/Einnahme umschalten (im Fenster „Neuer Eintrag“) */
.seg {
    display: grid; grid-template-columns: 1fr 1fr; gap: .4em;
    padding: .35em; margin-bottom: 1.2em;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.seg-btn {
    display: flex; align-items: center; justify-content: center; gap: .5em;
    padding: .65em .8em; border: 1px solid transparent; border-radius: var(--radius-sm);
    background: transparent; color: var(--muted); font: inherit; font-size: .9rem; font-weight: 500;
    cursor: pointer; transition: .13s;
}
.seg-btn:hover { color: var(--text); background: var(--surface-3); }
.seg-btn.active { background: var(--gold); border-color: var(--gold); color: #1a1a1a; font-weight: 600; }

/* Auswertung nach Kategorie */
.break-total {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: .7em .9em; margin-bottom: 1.1em;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.break-total span { color: var(--dim); font-size: .84rem; }
.break-total strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; color: var(--gold); }
.break-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1em; }
.break-head { display: flex; align-items: center; gap: .8em; margin-bottom: .4em; }
.break-num { margin-left: auto; text-align: right; white-space: nowrap; }
.break-num strong { font-variant-numeric: tabular-nums; font-size: .95rem; }
.break-pct { display: block; color: var(--dim); font-size: .74rem; margin-top: .1em; }
.break-bar { height: 7px; background: var(--surface-3); border-radius: 5px; overflow: hidden; }
.break-bar span { display: block; height: 100%; border-radius: 5px; min-width: 3px; }
.break-meta { color: var(--dim); font-size: .74rem; margin-top: .35em; }
.bar-red    { background: var(--red); }
.bar-purple { background: var(--purple); }
.bar-orange { background: var(--amber); }
.bar-blue   { background: var(--blue); }
.bar-green  { background: var(--green); }
.bar-gold   { background: var(--gold); }
textarea { resize: vertical; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.1em; }

/* =====================================================================
   KALENDER – Monatsansicht
   ===================================================================== */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .9em; }
.cal-nav { display: flex; align-items: center; gap: .5em; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 1.1em; margin-bottom: 1em; font-size: .78rem; color: var(--dim); }
.cal-legend span { display: inline-flex; align-items: center; gap: .4em; }
.cal-legend .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cal-wd { background: var(--surface-2); color: var(--dim); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding: .55em .6em; text-align: left; }
.cal-cell { background: var(--surface); min-height: 96px; padding: .4em .45em; display: flex; flex-direction: column; gap: .2em; }
.cal-cell.empty { background: var(--bg); }
.cal-cell.today { background: var(--gold-soft); }
.cal-day { font-size: .8rem; font-weight: 600; color: var(--muted); margin-bottom: .15em; }
.cal-cell.today .cal-day { color: var(--gold); }
.cal-ev { font-size: .72rem; padding: .15em .4em; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 2px solid currentColor; }
.cal-ev.ev-termin   { background: var(--gold-soft);  color: var(--gold); }
.cal-ev.ev-bday     { background: var(--blue-soft);  color: var(--blue); }
.cal-ev.ev-rem      { background: rgba(224,161,61,.14); color: var(--amber); }
.cal-ev.ev-contract { background: var(--red-soft);   color: var(--red); }
.dot.ev-termin { background: var(--gold); } .dot.ev-bday { background: var(--blue); }
.dot.ev-rem { background: var(--amber); } .dot.ev-contract { background: var(--red); }
@media (max-width: 700px) {
    .cal-cell { min-height: 64px; }
    .cal-ev { font-size: .64rem; }
}

/* =====================================================================
   PIPELINE
   ===================================================================== */
.pipeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .9em; margin-bottom: 1.6em; }
.pipe-col { background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 140%); border: 1px solid var(--line); border-radius: 13px; padding: 1em; min-height: 130px; }
.pipe-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .85em; }
.pipe-name { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.pipe-count { min-width: 22px; height: 22px; padding: 0 .45em; border-radius: 999px; background: var(--gold-soft); color: var(--gold); font-size: .72rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.pipe-card { background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 8px; padding: .55em .7em; margin-bottom: .5em; font-size: .85rem; transition: transform .12s, border-color .12s; cursor: grab; }
.pipe-card:hover { border-color: var(--gold-line); transform: translateX(2px); }
.pipe-card:active { cursor: grabbing; }
.pipe-card.dragging { opacity: .4; }
.pipe-cards { min-height: 44px; max-height: 320px; overflow-y: auto; margin: -2px; padding: 2px; }
.pipe-col.drop-hover { border-color: var(--gold); background: var(--gold-soft); }
.pipe-col.drop-hover .pipe-cards { outline: 2px dashed var(--gold-line); outline-offset: 2px; border-radius: 8px; }
.pipe-empty { color: var(--dim); font-size: .8rem; }
.pipe-empty[hidden] { display: none; }
.board-hint { font-size: .82rem; margin: -.9em 0 1.5em; opacity: .8; }
.kpi-toggle-bar { margin-bottom: 1.3em; }

/* Geburtstags-Widget (Dashboard) */
.bday-list { display: flex; flex-direction: column; gap: .5em; }
.bday-item { display: flex; align-items: center; gap: .9em; padding: .55em .7em; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.bday-item.sent { opacity: .6; }
.bd-when { min-width: 64px; text-align: center; font-size: .74rem; font-weight: 700; color: var(--gold); background: var(--gold-soft); border-radius: 999px; padding: .32em .5em; }
.bd-when.today { color: #fff; background: var(--gold); }
.bd-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.bd-name { font-weight: 600; font-size: .92rem; }
.bd-sub { font-size: .78rem; color: var(--muted); }
.bd-noemail { font-size: .78rem; color: var(--dim); }
.bd-sent { font-size: .84rem; color: var(--green); font-weight: 600; }
.bd-actions { display: flex; gap: .4em; flex-shrink: 0; }
.btn.wa-btn { color: #fff; background: #25d366; border-color: #25d366; }
.btn.wa-btn:hover { background: #1da851; border-color: #1da851; }

/* Übersicht: Chart-Hintergrund (Kurve + Kerzen, wie im Hero von stevendonke.at) */
.hero-chart { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }   /* über die komplette Seite */
.hero-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-chart svg * { vector-effect: non-scaling-stroke; }   /* Strichstärke trotz Verzerrung konstant */
.chart-line { opacity: 0; animation: fade-chart-line 1.1s ease-out forwards; }   /* immer volle Länge, nur einblenden */
@keyframes fade-chart-line { to { opacity: .25; } }
.chart-candles { opacity: 0; animation: fade-chart-candles 1.3s ease-out .5s forwards; }
@keyframes fade-chart-candles { to { opacity: .25; } }

/* Übersicht: Kachel-Launcher (füllt die Seite) – liegt über dem Chart */
.launcher { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 1.2em; min-height: calc(100vh - 162px); }
/* Abmelden – kleiner Button unten links, schwebt (verändert die Kacheln nicht) */
.logout-btn {
    position: fixed; left: 1.9em; bottom: 1.6em; z-index: 30;
    display: inline-flex; align-items: center; gap: .5em;
    padding: .55em 1em; border-radius: 9px;
    border: 1px solid rgba(226,103,92,.32); background: var(--red-soft); color: var(--red);
    font-size: .85rem; font-weight: 500;
    transition: background .15s, border-color .15s;
}
.logout-btn:hover { background: rgba(226,103,92,.2); border-color: rgba(226,103,92,.55); }
.logout-btn .ico { flex-shrink: 0; }
.logout-btn:hover .ico { animation: logout-nudge .5s ease; }
.launch-tile {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 1em; padding: 1.8em;
    border-radius: 18px; background: linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 130%);
    border: 1px solid var(--line); color: var(--text); text-decoration: none;
    transition: transform .16s, border-color .16s, box-shadow .16s;
}
/* Kacheln mit Hintergrundbild */
.lt-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.lt-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(150deg, rgba(10,10,10,.8) 0%, rgba(10,10,10,.52) 100%); }
.launch-tile.has-img .lt-ic, .launch-tile.has-img .lt-body, .launch-tile.has-img .lt-arrow { position: relative; z-index: 2; }
.launch-tile.has-img .lt-t { color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.launch-tile.has-img .lt-s { color: rgba(255,255,255,.82); }
.launch-tile.has-img .lt-arrow { color: rgba(255,255,255,.7); }
.launch-tile.has-img:hover .lt-bg { transform: scale(1.05); }
.launch-tile:hover { border-color: var(--gold-line); }
.launch-tile .lt-ic { color: var(--gold); flex-shrink: 0; display: inline-flex; }
.launch-tile .lt-body { display: flex; flex-direction: column; gap: .2em; flex: 1; min-width: 0; }
.launch-tile .lt-t { font-size: 1.35rem; font-weight: 700; }
.launch-tile .lt-s { color: var(--muted); font-size: .92rem; }
.launch-tile .lt-arrow { color: var(--dim); flex-shrink: 0; display: inline-flex; transition: transform .16s, color .16s; }
.launch-tile:hover .lt-arrow { color: var(--gold); transform: translateX(7px); }
.launch-tile.has-img:hover .lt-arrow { color: var(--gold-2); transform: translateX(7px); }

@media (max-width: 900px) {
    .launcher { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; min-height: 0; }
}
@media (max-width: 560px) {
    .launcher { grid-template-columns: 1fr; }
}

/* =====================================================================
   TEAM / STAMMBAUM
   ===================================================================== */
.ladder { display: flex; align-items: center; gap: .4em; flex-wrap: wrap; }
.ladder-step { display: flex; align-items: center; gap: .5em; padding: .4em .75em; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); }
.ls-idx { width: 20px; height: 20px; border-radius: 50%; background: var(--gold-soft); color: var(--gold); font-size: .72rem; font-weight: 700; display: grid; place-items: center; }
.ls-name { font-size: .82rem; }
.ladder-arrow { color: var(--dim); }

.orgchart { overflow-x: auto; padding: .5em 0 1em; }
.orgchart ul { position: relative; display: flex; justify-content: center; padding-top: 22px; }
.orgchart > ul { padding-top: 0; }
.orgchart li { position: relative; list-style: none; padding: 22px 10px 0; text-align: center; }
/* Verbindungslinien */
.orgchart li::before, .orgchart li::after {
    content: ''; position: absolute; top: 0; right: 50%;
    width: 50%; height: 22px; border-top: 2px solid var(--line);
}
.orgchart li::after { right: auto; left: 50%; border-left: 2px solid var(--line); }
.orgchart li:only-child::before, .orgchart li:only-child::after { display: none; }
.orgchart li:only-child { padding-top: 0; }
.orgchart li:first-child::before, .orgchart li:last-child::after { border: 0 none; }
.orgchart li:last-child::before { border-right: 2px solid var(--line); border-radius: 0 6px 0 0; }
.orgchart li:first-child::after { border-radius: 6px 0 0 0; }
.orgchart ul ul::before {
    content: ''; position: absolute; top: 0; left: 50%;
    width: 0; height: 22px; border-left: 2px solid var(--line);
}

.org-node {
    display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
    min-width: 132px; max-width: 190px; padding: .8em .9em;
    border: 1px solid var(--line); border-radius: 13px;
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 130%);
    cursor: pointer; transition: transform .14s, border-color .14s, box-shadow .14s;
}
.org-node:hover { border-color: var(--gold-line); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.28); }
.on-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--gold-soft); color: var(--gold); display: grid; place-items: center; font-weight: 700; font-size: .88rem; margin-bottom: .15em; }
.on-name { font-weight: 600; font-size: .9rem; line-height: 1.15; }
.on-level { font-size: .7rem; color: var(--gold); background: var(--gold-soft); padding: .12em .6em; border-radius: 999px; }
.on-role { font-size: .74rem; color: var(--muted); }
.on-since { font-size: .7rem; color: var(--dim); }

/* =====================================================================
   LOGIN
   ===================================================================== */
.login-wrap { position: relative; min-height: 100vh; display: grid; place-items: center; padding: 2em; overflow: hidden; }
.login-bg {
    position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(135deg, rgba(18,18,18,.82) 0%, rgba(18,18,18,.92) 55%, rgba(24,22,18,.96) 100%),
                url('../img/login-bg.png') center/cover no-repeat;
}
.login-card {
    position: relative; z-index: 1;
    width: 100%; max-width: 400px;
    background: rgba(31,31,31,.92); backdrop-filter: blur(6px);
    border: 1px solid var(--line); border-radius: 18px;
    padding: 2.6em 2.2em; box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.login-logo { display: flex; justify-content: center; margin-bottom: 1.7em; }
.login-logo img { height: 54px; width: auto; }
.login-card h2 { text-align: center; margin: 0 0 .3em; font-size: 1.3rem; }
.login-card .hint { text-align: center; color: var(--dim); font-size: .86rem; margin: 0 0 1.6em; }
.field .req { color: var(--red); font-style: normal; }
.login-help { text-align: center; color: var(--dim); font-size: .8rem; margin: 1.3em 0 0; }
.field-msg { color: var(--red); font-size: .78rem; margin-top: .35em; }
input.invalid, .input.invalid { border-color: var(--red) !important; box-shadow: 0 0 0 3px var(--red-soft); }
.alert { display: flex; align-items: center; gap: .55em; padding: .7em .9em; border-radius: 9px; font-size: .86rem; margin-bottom: 1.1em; }
.alert .ico { flex-shrink: 0; }
.alert.error { background: var(--red-soft); color: var(--red); border: 1px solid rgba(226,103,92,.3); }
.alert.ok { background: var(--green-soft); color: var(--green); border: 1px solid rgba(76,203,126,.3); }
.code-input { letter-spacing: .35em; text-align: center; font-size: 1.3rem; font-variant-numeric: tabular-nums; }

/* „Diesem Gerät vertrauen" – Login-Schritt 2 und Account */
.trust-check {
    display: flex; align-items: flex-start; gap: .6em; cursor: pointer;
    margin: 1.1em 0 .4em; padding: .75em .85em;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
    color: var(--text); font-size: .84rem; line-height: 1.45;
    transition: border-color .15s, background .15s;
}
.trust-check:hover { border-color: var(--gold-line); background: var(--surface-3); }
.trust-check input { width: auto; margin: .15em 0 0; accent-color: var(--gold); flex-shrink: 0; }
.trust-check strong { color: var(--gold-2); font-weight: 600; }
.trust-hint { color: var(--dim); font-size: .76rem; margin: 0 0 1.1em; padding-left: .1em; }

/* Liste der gemerkten Geräte (Account) */
.device-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5em; }
.device-row {
    display: flex; align-items: center; gap: .8em;
    padding: .7em .85em; background: var(--surface-2);
    border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.device-info { min-width: 0; flex: 1; }
.device-name { font-size: .88rem; font-weight: 500; display: flex; align-items: center; gap: .5em; flex-wrap: wrap; }
.device-here {
    font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    color: var(--gold-2); background: var(--gold-soft);
    border: 1px solid var(--gold-line); border-radius: 20px; padding: .1em .55em;
}
.device-meta { color: var(--dim); font-size: .76rem; margin-top: .25em; }
.device-act { flex-shrink: 0; }
.device-act .btn { padding: .4em .55em; color: var(--muted); }
.device-act .btn:hover { color: var(--red); background: var(--red-soft); }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 2.7em; }
.pw-toggle {
    position: absolute; right: .45em; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 1.9em; height: 1.9em; padding: 0; margin: 0;
    background: none; border: none; border-radius: 6px;
    color: var(--dim); cursor: pointer; transition: color .12s, background .12s;
}
.pw-toggle:hover { color: var(--text); background: var(--surface-2); }
.pw-toggle:focus-visible { outline: 2px solid var(--gold, #c9a24b); outline-offset: 1px; }

/* Account: Abmelden inline (rot, wie der schwebende Button) + Icon-Nudge */
.logout-inline {
    display: inline-flex; align-items: center; gap: .5em;
    padding: .55em 1em; border-radius: 9px;
    border: 1px solid rgba(226,103,92,.32); background: var(--red-soft); color: var(--red);
    font-size: .85rem; font-weight: 500;
    transition: background .15s, border-color .15s;
}
.logout-inline:hover { background: rgba(226,103,92,.2); border-color: rgba(226,103,92,.55); }
.logout-inline .ico { flex-shrink: 0; color: var(--red); }
.logout-inline:hover .ico { animation: logout-nudge .5s ease; }

/* Account: 2FA-Status-Badge */
.badge-on  { background: var(--green-soft); color: var(--green); }
.badge-off { background: rgba(160,160,160,.14); color: var(--dim); }

/* Account: Bestätigungs-Karte für E-Mail-Code */
.confirm-card { border-color: var(--gold-line); }
.confirm-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1em; }
.confirm-actions { display: flex; gap: .6em; }

/* Account: 2FA-Einrichtung (QR + manueller Schlüssel) */
.totp-setup { display: flex; gap: 1.4em; flex-wrap: wrap; align-items: flex-start; }
.totp-qr {
    flex-shrink: 0; width: 180px; height: 180px; padding: 10px;
    background: #fff; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
}
.totp-qr svg { width: 100%; height: 100%; display: block; }
.totp-manual { flex: 1 1 220px; min-width: 220px; }
.totp-key {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 1rem; letter-spacing: .12em; word-break: break-all;
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: 8px; padding: .6em .8em; color: var(--text);
}

/* =====================================================================
   EMPTY STATE
   ===================================================================== */
.empty { text-align: center; padding: 2.6em 1em; color: var(--dim); }
/* Symbol steht ÜBER dem Text – inline-flex ließ es in derselben Zeile kleben. */
.empty .empty-icon { color: var(--surface-3); margin-bottom: .5em; display: flex; justify-content: center; }
.empty .empty-icon .ico { color: var(--dim); opacity: .5; }

/* =====================================================================
   MODAL / DRAWER
   ===================================================================== */
.modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.62); display: none; align-items: center; justify-content: center; padding: 1.5em; }
.modal-overlay.open { display: flex; animation: fade .15s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal { width: 100%; max-width: 500px; max-height: 90vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 1.6em; }
.modal.wide { max-width: 700px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1em; }
.modal-head h3 { margin: 0; font-size: 1.1rem; }
.modal-close { background: none; border: 0; color: var(--dim); cursor: pointer; display: grid; place-items: center; padding: .25em; border-radius: 6px; }
.modal-close:hover { color: var(--text); background: var(--surface-2); }
.modal-actions { display: flex; gap: .6em; justify-content: flex-end; margin-top: 1.3em; }

.action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; margin: 1em 0; }
.action-grid .btn { justify-content: center; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { padding: .55em 0 .55em 1.1em; border-left: 2px solid var(--line); position: relative; font-size: .85rem; }
.timeline li::before { content: ''; position: absolute; left: -5px; top: .85em; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.timeline .t-time { color: var(--dim); font-size: .76rem; }
/* Aufgeklappter Verlauf: scrollt in sich, statt das Fenster länger zu machen. */
.timeline.scroll { max-height: 15em; overflow-y: auto; padding-right: .5em; }
#c-log-more { margin-top: .6em; }

.sub-form { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 1em; margin-top: 1em; }
.sub-form h4 { margin: 0 0 .7em; font-size: .9rem; }

.toast { position: fixed; bottom: 1.5em; left: 50%; transform: translateX(-50%); background: var(--surface-3); border: 1px solid var(--gold-line); color: var(--text); padding: .7em 1.2em; border-radius: 10px; box-shadow: var(--shadow); z-index: 200; opacity: 0; transition: opacity .22s, transform .22s; pointer-events: none; font-size: .88rem; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }
.toast.err { border-color: var(--red); }

/* =====================================================================
   VERTRÄGE – Karriere & Provision (OVB-Karriereplan)
   ===================================================================== */
.career-wrap { margin-bottom: 1.3em; }
.career-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; }
.career-cards .card { margin: 0; }
.career-stage-name { font-family: "Playfair Display", Georgia, serif; font-size: 1.65rem; font-weight: 600; color: var(--gold-2); line-height: 1.12; margin: .15em 0 .1em; }
.career-stage-rate { font-size: 1.15rem; font-weight: 700; }
.career-stage-rate span { color: var(--dim); font-weight: 500; font-size: .82rem; }
.career-prov-val { font-size: 2rem; font-weight: 800; color: var(--gold); line-height: 1.1; margin: .12em 0; }
.career-sub { color: var(--dim); font-size: .8rem; }
.career-sub strong { color: var(--text); }
.career-eeh { font-size: 1.7rem; font-weight: 800; line-height: 1.1; margin-top: .1em; }
.cp-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1em; }
.cp-next { text-align: right; font-size: .72rem; color: var(--dim); line-height: 1.35; }
.cp-next strong { color: var(--gold-2); font-size: .95rem; }
.cp-bar { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; margin: .75em 0 .5em; }
.cp-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-2)); border-radius: 999px; transition: width .5s ease; }
.career-override { font-size: .82rem; color: var(--dim); display: inline-flex; align-items: center; gap: .5em; margin: 0; }
.career-override select { font-size: .85rem; padding: .35em .5em; border-radius: 8px; }
.career-table td .career-grp { color: var(--dim); font-size: .74rem; margin-left: .3em; }
.career-table tr.is-current { background: var(--gold-soft); }
.career-table tr.is-current td { color: var(--gold-2); }
.badge.s-current { background: var(--gold); color: #191919; }
.badge.s-ok { background: var(--green-soft); color: var(--green); display: inline-flex; align-items: center; gap: .3em; }
.badge.s-open { background: var(--surface-3); color: var(--dim); }
/* Verträge-Seite etwas breiter + Tabellen brechen um statt seitlich zu scrollen */
.page-vertraege .content { max-width: 1600px; }
.page-vertraege table.data th, .page-vertraege table.data td { white-space: normal; padding-left: .7em; padding-right: .7em; }

/* Status direkt in der Liste wechseln (Chip + kleines Pop-up) */
button.badge { border: 0; font: inherit; cursor: pointer; }
.status-pick { gap: .3em; padding-right: .4em; }
.status-pick .ico { opacity: .55; margin-left: -.1em; }
.status-pick:hover { filter: brightness(1.2); }
.status-pick:hover .ico { opacity: 1; }

.status-pop { position: absolute; z-index: 150; min-width: 215px; padding: .45em; background: var(--surface-2);
    border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); animation: fade .12s ease; }
.status-pop[hidden] { display: none; }
.status-pop-head { padding: .35em .55em .5em; font-size: .7rem; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--dim); }
.status-opt { display: flex; align-items: center; justify-content: space-between; gap: .9em; width: 100%;
    padding: .3em .5em; background: none; border: 0; border-radius: 8px; cursor: pointer; }
.status-opt:hover { background: var(--surface-3); }
.status-opt .badge { pointer-events: none; }
.status-opt-check { display: none; color: var(--gold); }
.status-opt.is-current .status-opt-check { display: inline-flex; }

/* Gestaffelte Provision: Kurzübersicht in der Kachel + Erklärung über der Tabelle */
.career-staffel { display: flex; flex-wrap: wrap; gap: .35em; margin-top: .7em; }
.staffel-teil { display: inline-flex; align-items: baseline; gap: .3em; padding: .18em .5em; border-radius: 6px;
    background: var(--surface-2); border: 1px solid var(--line); font-size: .72rem; font-weight: 600; color: var(--muted); }
.staffel-teil em { font-style: normal; font-weight: 500; color: var(--dim); }
.career-table tfoot td { border-top: 1px solid var(--gold-line); font-size: .88rem; color: var(--muted); }
.career-table tfoot strong { color: var(--text); }
/* Beträge nie umbrechen, sonst rutscht das €-Zeichen in die nächste Zeile.
   Die Regel muss `.page-vertraege table.data td { white-space: normal }` schlagen. */
.page-vertraege table.career-table td:nth-child(2),
.page-vertraege table.career-table td:nth-last-child(2),
.page-vertraege table.career-table tfoot td { white-space: nowrap; }
.career-table td { vertical-align: top; }
.career-table .career-grp { display: inline-block; margin-left: 0; }
.krit-agenten { display: inline-flex; align-items: baseline; gap: .35em; color: var(--gold-2); font-weight: 600; font-size: .82rem; }
.krit-agenten .ico { align-self: center; }

/* Großes Pop-up mit den Verträgen hinter einem Hinweis */
.modal.xl { max-width: 1040px; }
.modal.xl .table-wrap { max-height: 60vh; overflow-y: auto; }
.liste-table th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); }
.liste-table td { white-space: nowrap; }
.modal-actions a.btn { text-decoration: none; }

/* Termin-Dialog aus der Vertragsliste */
.termin-intro { margin: 0 0 1em; font-size: .9rem; line-height: 1.55; color: var(--muted); }
.termin-intro strong { color: var(--text); }
.termin-schon { margin-bottom: 1.1em; padding: .7em .9em; border-radius: 10px; font-size: .84rem; line-height: 1.5;
    background: var(--green-soft); border: 1px solid rgba(76,203,126,.3); color: var(--green); }
.termin-schon[hidden] { display: none; }
.termin-schon strong { color: var(--text); }
.field.check-row { display: flex; flex-direction: row; align-items: center; gap: .6em; }
.field.check-row input { width: auto; }
.field.check-row span { margin: 0; }

/* Ergebnis des Kalender-Verbindungstests (Account-Seite) */
.gcal-result { margin-top: 1em; padding: .7em .9em; border-radius: 10px; font-size: .86rem; line-height: 1.5; }
.gcal-result[hidden] { display: none; }
.gcal-result.ok  { background: var(--green-soft); border: 1px solid rgba(76,203,126,.3); color: var(--green); }
.gcal-result.err { background: var(--red-soft);   border: 1px solid rgba(226,103,92,.3);  color: var(--red); }

/* Kunden: sichtbar machen, dass schon ein Termin steht */
.termin-chip { display: inline-flex; align-items: center; gap: .35em; padding: .2em .55em; border-radius: 999px;
    font-size: .74rem; font-weight: 600; background: var(--green-soft); color: var(--green); white-space: nowrap; }
.termin-datum { display: block; margin-bottom: .25em; }

/* Trefferanzeige neben der Suche */
.such-info { font-size: .84rem; color: var(--dim); }
.such-info strong { color: var(--text); }

/* Aktiver Filter im Kopf der Vertragsliste */
.info-chip.is-on { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold-line); }
.filter-info { display: flex; align-items: center; gap: .6em; }

/* Restlaufzeit neben dem Enddatum + Wiedervorlage-Schalter in den Aktionen */
.data .urgency { margin-left: .45em; font-size: .76rem; white-space: nowrap; }
.icon-btn.is-done { color: var(--green); border-color: rgba(76,203,126,.35); background: var(--green-soft); }
.icon-btn.is-done:hover { color: var(--green); border-color: var(--green); }

/* Zurückgerechnete Einheiten in der Einheiten-Spalte */
.eh-storno { margin-left: .3em; font-size: .75rem; font-weight: 600; color: var(--red); }

/* Kündigungs-Dialog: Vorschlag, wie viele Einheiten entfernt werden */
.storno-intro { margin: 0 0 1em; font-size: .9rem; line-height: 1.55; color: var(--muted); }
.storno-intro strong { color: var(--text); }
.storno-hint { margin-bottom: 1.1em; padding: .8em .9em; border-radius: 10px;
    background: var(--gold-soft); border: 1px solid var(--gold-line); }
.storno-hint-lbl { font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.storno-hint-val { margin: .15em 0 .3em; font-size: 1.2rem; font-weight: 700; color: var(--gold-2); }
.storno-hint-why { font-size: .82rem; line-height: 1.5; color: var(--muted); }
.storno-quick { display: flex; flex-wrap: wrap; gap: .5em; margin-top: .7em; }
.storno-result { margin-top: 1em; font-size: .88rem; color: var(--dim); }
.storno-result strong { color: var(--text); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1080px) {
    .kpi-row, .stat-row { grid-template-columns: 1fr 1fr; }
    .quick-grid, .tile-grid { grid-template-columns: 1fr 1fr; }
    .cols-2, .pipeline { grid-template-columns: 1fr; }
    .pipeline { grid-template-columns: 1fr 1fr; }
    .career-cards { grid-template-columns: 1fr; }
    .kpi-row.kpi-5 { grid-template-columns: repeat(3, 1fr); }
}
/* Vollbild-Menü: unter ~820px alles untereinander (Links, dann die Bilder gestapelt) */
@media (max-width: 820px) {
    .mega { flex-direction: column; align-items: stretch; gap: 1.2em; overflow-y: auto; }
    .mega-left { flex: 0 0 auto; }
    .mega-nav { margin-top: 4vh; }
    .mega-settings { margin: 1.2em 0 0; }
    .mega-gallery { flex: 0 0 auto; flex-direction: column; }
    .mega-stack { flex-direction: column; }
    .mega-gallery > .mega-tile, .mega-stack > .mega-tile { flex: 0 0 auto; min-height: 26vh; }
}
@media (max-width: 560px) {
    .kpi-row, .stat-row, .quick-grid, .tile-grid, .pipeline { grid-template-columns: 1fr; }
    .grid-2 { grid-template-columns: 1fr; }
    .content { padding: 1.3em 1.1em 3em; }
    .mega { padding: 5.5em 1.4em 1.8em; }
    .mega-gallery > .mega-tile, .mega-stack > .mega-tile { min-height: 30vh; }
}

/* Reduzierte Bewegung: Menü sofort statt gleitend/wischend */
@media (prefers-reduced-motion: reduce) {
    .mega, .mega-link, .mega-bottom, .mega-tile, .menu-toggle span {
        transition-duration: .01ms !important; transition-delay: 0ms !important;
    }
    .chart-line { animation: none !important; opacity: .25; }
    .chart-candles { animation: none !important; opacity: .25; }
}

/* =====================================================================
   VERTRÄGE – Kopfbereich: Handlungsbedarf + zwei Diagramme
   Diagrammfarben sind eigene Stufen (nicht die Status-Chips der Liste):
   auf dunklem Grund geprüft auf Helligkeitsband, Buntheit, Farbsehschwäche
   und Kontrast. Jede Farbe steht zusätzlich beschriftet in der Legende.
   ===================================================================== */
:root {
    --c-aktiv:    #3f9e63;   /* Bestand: aktiv        */
    --c-arbeit:   #4c88d3;   /* Bestand: in Arbeit    */
    --c-beendet:  #6f7074;   /* Bestand: beendet (bewusst zurückgenommen) */
    --c-kritisch: #b8483c;   /* Ablauf: in 30 Tagen   */
    --c-spaeter:  #c9a24d;   /* Ablauf: danach (Markengold) */
}

.cockpit { display: grid; gap: 1.1em; margin-bottom: 1.6em; }

/* ---- Handlungsbedarf ---- */
.akt-card { position: relative; overflow: hidden; }
.akt-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold); }
.akt-card.has-alert::before { background: var(--red); }
.akt-note { font-size: .78rem; color: var(--dim); }

.akt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: .7em; }
.akt-tile {
    display: flex; align-items: center; gap: .85em;
    padding: .85em 1em; border-radius: var(--radius-sm);
    background: var(--surface-2); border: 1px solid var(--line);
    color: var(--text); transition: border-color .14s, transform .14s, background .14s;
}
a.akt-tile:hover { border-color: var(--gold-line); background: var(--surface-3); transform: translateY(-2px); color: var(--text); }
.akt-tile.is-on { border-color: var(--gold-line); background: var(--gold-soft); }
.akt-ic { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto;
    border-radius: 10px; background: var(--surface-3); color: var(--muted); }
.akt-tile.ton-rot  .akt-ic { background: var(--red-soft);  color: var(--red); }
.akt-tile.ton-gold .akt-ic { background: var(--gold-soft); color: var(--gold); }
.akt-body { flex: 1 1 auto; min-width: 0; }
.akt-zahl { display: block; font-size: 1.75rem; font-weight: 700; line-height: 1.05; }
.akt-tile.ton-rot .akt-zahl { color: var(--red); }
.akt-lbl { display: block; margin-top: .15em; font-size: .8rem; color: var(--dim); line-height: 1.35; }
.akt-go { flex: 0 0 auto; color: var(--dim); opacity: 0; transition: opacity .14s, transform .14s; }
a.akt-tile:hover .akt-go { opacity: 1; transform: translateX(2px); }
.akt-leer { display: flex; align-items: center; gap: .6em; padding: .9em 1em; border-radius: var(--radius-sm);
    background: var(--green-soft); color: var(--green); font-size: .9rem; }

/* ---- Diagramme ---- */
.chart-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1em; align-items: stretch; }
/* Ohne das erbt die zweite Karte den Abstand von `.card + .card` und beginnt tiefer. */
.chart-row .card + .card { margin-top: 0; }
.chart-card { display: flex; flex-direction: column; }
.chart-card .card-head { margin-bottom: 1.2em; }
.chart-card > .legende-quer { margin-top: auto; }
/* Schlusszeile ohne folgenden Block sinkt an den Kartenboden. */
.chart-card > .chart-fuss:last-child { margin-top: auto; }
.chart-summe { font-size: .8rem; color: var(--dim); }
.chart-summe strong { color: var(--text); font-size: 1.05rem; font-weight: 700; }
.chart-leer { padding: 1.4em 0; color: var(--dim); font-size: .86rem; }

/* Gestapelter Balken: 2px Lücke zwischen den Flächen statt Rahmen */
.stackbar { display: flex; gap: 2px; height: 20px; margin-bottom: 1.3em; }
.stackbar .seg { border-radius: 3px; min-width: 3px; transition: filter .14s; }
.stackbar .seg:first-child { border-radius: 8px 3px 3px 8px; }
.stackbar .seg:last-child  { border-radius: 3px 8px 8px 3px; }
.stackbar .seg:hover { filter: brightness(1.18); }

.s-aktiv    { background: var(--c-aktiv); }
.s-arbeit   { background: var(--c-arbeit); }
.s-beendet  { background: var(--c-beendet); }
.s-kritisch { background: var(--c-kritisch); }
.s-spaeter  { background: var(--c-spaeter); }

.chart-legende { list-style: none; margin: 0; padding: 0; display: grid; gap: .6em; }
.chart-legende li { display: flex; align-items: center; gap: .6em; font-size: .88rem; }
.chart-legende .dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.chart-legende .lg-txt { color: var(--muted); }
.chart-legende .lg-num { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.chart-legende .lg-pct { width: 3.6em; text-align: right; color: var(--dim); font-size: .78rem; font-variant-numeric: tabular-nums; }
.legende-quer { grid-auto-flow: column; justify-content: start; gap: 1.2em; margin-top: 1em; }
.legende-quer .lg-txt { font-size: .78rem; }
.legende-quer .lg-num { margin-left: .15em; font-size: .82rem; }
.chart-fuss { margin-top: 1em; padding-top: .8em; border-top: 1px solid var(--line-2); font-size: .78rem; color: var(--dim); }
.chart-fuss strong { color: var(--muted); font-variant-numeric: tabular-nums; }

/* Zweiter Block in der Bestandskachel: Eigen und Fremd */
.chart-block { margin-top: auto; padding-top: 1.4em; }
.chart-block-titel { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--dim); margin-bottom: .7em; }
.stackbar.sb-klein { height: 10px; margin-bottom: 0; }
.s-eigen { background: var(--c-spaeter); }
.s-fremd { background: var(--c-beendet); }

/* Säulen: Ablauf je Monat */
.saeulen { display: grid; grid-template-columns: repeat(6, 1fr); gap: .6em; align-items: stretch;
    flex: 1 1 auto; min-height: 190px; }
.saeule { display: grid; grid-template-rows: 1.4em 1fr 1.5em; justify-items: center; gap: .4em; height: 100%; }
.sa-wert { font-size: .92rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.saeule.is-leer .sa-wert::after { content: '0'; color: var(--dim); font-weight: 500; }
.sa-track { display: flex; align-items: flex-end; width: 100%; max-width: 62px; height: 100%;
    border-bottom: 1px solid var(--line); }
.sa-stack { display: flex; flex-direction: column; gap: 2px; width: 100%; min-height: 2px; border-radius: 4px 4px 0 0; overflow: hidden; }
.sa-seg { display: block; }
.sa-seg:first-child { border-radius: 4px 4px 0 0; }
.saeule:hover .sa-seg { filter: brightness(1.18); }
.sa-lbl { font-size: .8rem; color: var(--dim); }

/* Suchzeile: Treffer + Zurücksetzen, auch wenn gerade leer */
.such-block { display: inline-flex; align-items: center; gap: .6em; }
.such-block:empty { display: none; }
form.is-loading .search .ico { opacity: .4; }

@media (max-width: 1000px) {
    .chart-row { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .saeulen { gap: .3em; min-height: 130px; }
    .akt-zahl { font-size: 1.5rem; }
}

/* =====================================================================
   TERMIN-DIALOG mit Monatsansicht des eigenen Kalenders
   ===================================================================== */
.modal.termin-modal { max-width: 760px; padding: 1.8em; }

.terminkalender { margin: 0 0 1.3em; padding: 1em 1.1em 1.1em;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; }
.tk-laedt, .tk-leerzeile { padding: 1.2em 0; text-align: center; color: var(--dim); font-size: .85rem; }

.tk-kopf { display: flex; align-items: center; gap: .5em; margin-bottom: .9em; }
.tk-monat { font-weight: 600; font-size: .98rem; min-width: 9.5em; text-align: center; }
.tk-nav { width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer;
    background: var(--surface-3); border: 1px solid var(--line); border-radius: 8px;
    color: var(--muted); font-size: 1.1rem; line-height: 1; }
.tk-nav:hover { border-color: var(--gold-line); color: var(--gold-2); }
.tk-legende { margin-left: auto; display: inline-flex; align-items: center; gap: .4em; font-size: .74rem; color: var(--dim); }

.tk-gitter { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.tk-wt { text-align: center; font-size: .7rem; font-weight: 600; letter-spacing: .05em;
    text-transform: uppercase; color: var(--dim); padding-bottom: .3em; }
.tk-leer { min-height: 44px; }
.tk-tag { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 44px; padding: .3em 0; cursor: pointer;
    background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
    color: var(--text); font: inherit; font-size: .88rem;
    transition: border-color .12s, background .12s, transform .12s; }
.tk-tag:hover:not(:disabled) { border-color: var(--gold-line); transform: translateY(-1px); }
.tk-tag:disabled { cursor: default; opacity: .32; }
.tk-tag.ist-heute { border-color: var(--gold-line); }
.tk-tag.ist-heute .tk-nr { color: var(--gold-2); font-weight: 700; }
.tk-tag.ist-gewaehlt { background: var(--gold); border-color: var(--gold); color: #1a1a1a; font-weight: 700; }
.tk-tag.ist-gewaehlt .tk-nr { color: inherit; }
.tk-tag.ist-gewaehlt .tk-punkt { background: rgba(0,0,0,.55); }
.tk-nr { line-height: 1; font-variant-numeric: tabular-nums; }
.tk-marken { display: flex; align-items: center; gap: 2px; height: 6px; }
.tk-punkt { width: 5px; height: 5px; border-radius: 50%; background: var(--c-kritisch); display: inline-block; }
.tk-mehr { font-size: .6rem; color: var(--dim); line-height: 1; }
.tk-hinweis { margin-top: .7em; font-size: .76rem; color: var(--amber); }

.tk-tagesliste { margin-top: 1em; padding-top: .9em; border-top: 1px solid var(--line); }
.tk-tag-kopf { display: flex; align-items: baseline; gap: .6em; font-size: .9rem; font-weight: 600; margin-bottom: .6em; }
.tk-tag-zahl { font-size: .76rem; font-weight: 500; color: var(--c-kritisch); }
.tk-tag-frei { font-size: .76rem; font-weight: 500; color: var(--green); }
.tk-tag-termine { list-style: none; margin: 0 0 .8em; padding: 0; display: grid; gap: .3em; }
.tk-tag-termine li { display: flex; gap: .7em; font-size: .8rem; color: var(--muted);
    padding: .35em .6em; background: var(--surface); border-radius: 6px;
    border-left: 2px solid var(--c-kritisch); }
.tk-zeit { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--text); }
.tk-titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tk-slots { display: flex; flex-wrap: wrap; gap: 5px; }
.tk-slot { padding: .35em .6em; cursor: pointer; font: inherit; font-size: .78rem;
    background: var(--surface); border: 1px solid var(--line); border-radius: 7px;
    color: var(--muted); font-variant-numeric: tabular-nums;
    transition: border-color .12s, background .12s, color .12s; }
.tk-slot:hover { border-color: var(--gold-line); color: var(--text); }
.tk-slot.ist-belegt { color: var(--c-kritisch); border-color: rgba(184,72,60,.45); background: rgba(184,72,60,.1); }
.tk-slot.ist-vorbei { opacity: .35; }
.tk-slot.ist-gewaehlt { background: var(--gold); border-color: var(--gold); color: #1a1a1a; font-weight: 700; }

@media (max-width: 560px) {
    .modal.termin-modal { padding: 1.2em; }
    .terminkalender { padding: .8em; }
    .tk-tag { min-height: 38px; font-size: .8rem; }
    .tk-monat { min-width: 7.5em; font-size: .9rem; }
}

/* Datum, Von, Bis nebeneinander */
.grid-3 { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 0 1.1em; }

/* Dauer: Schnellwahl plus freie Eingabe */
.dauer-wahl { display: flex; flex-wrap: wrap; align-items: center; gap: .45em; margin: -.4em 0 1.1em; }
.dauer-lbl { font-size: .78rem; color: var(--dim); margin-right: .2em; }
.dauer-chip { padding: .34em .7em; cursor: pointer; font: inherit; font-size: .78rem;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; color: var(--muted);
    transition: border-color .12s, background .12s, color .12s; }
.dauer-chip:hover { border-color: var(--gold-line); color: var(--text); }
.dauer-chip.ist-gewaehlt { background: var(--gold); border-color: var(--gold); color: #1a1a1a; font-weight: 700; }
.dauer-frei { display: inline-flex; align-items: center; gap: .35em; margin-left: .3em; font-size: .78rem; color: var(--dim); }
.dauer-frei input { width: 4.6em; padding: .3em .45em; font-size: .8rem; border-radius: 7px;
    background: var(--surface-2); border: 1px solid var(--line); color: var(--text); }

/* Termine in der Tagesliste absagen oder verschieben */
.tk-tag-termine li.ist-eigen { border-left-color: var(--gold); }
.tk-aktionen { margin-left: auto; display: inline-flex; gap: .25em; flex: 0 0 auto; }
.tk-akt { width: 24px; height: 24px; display: grid; place-items: center; cursor: pointer;
    background: none; border: 1px solid transparent; border-radius: 6px;
    color: var(--dim); font-size: .82rem; line-height: 1; }
.tk-akt:hover { background: var(--surface-3); color: var(--text); border-color: var(--line); }
.tk-akt.tk-weg:hover { background: var(--red-soft); color: var(--red); border-color: rgba(226,103,92,.35); }
.tk-fremd { font-size: .68rem; color: var(--dim); border: 1px solid var(--line);
    border-radius: 999px; padding: .1em .5em; flex: 0 0 auto; align-self: center; }
.tk-akt .ico { display: block; }
.tk-verschieben { display: flex; flex-wrap: wrap; gap: .4em; align-items: center;
    background: var(--surface-2) !important; border-left: 2px solid var(--gold) !important; }
.tk-verschieben input { padding: .3em .45em; font-size: .78rem; border-radius: 7px;
    background: var(--surface); border: 1px solid var(--line); color: var(--text); }
.tk-slot-hilfe { margin-top: .6em; font-size: .72rem; color: var(--dim); }

/* Rückfrage-Pop-up (ersetzt window.confirm) */
.frage-modal { max-width: 420px; text-align: center; }
.frage-ic { width: 46px; height: 46px; margin: 0 auto .8em; display: grid; place-items: center;
    border-radius: 50%; font-size: 1.4rem; font-weight: 700; }
.frage-ic.ton-gefahr { background: var(--red-soft); color: var(--red); }
.frage-ic.ton-frage  { background: var(--gold-soft); color: var(--gold); }
.frage-titel { margin: 0 0 .5em; font-size: 1.1rem; }
.frage-text { margin: 0 0 1em; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.frage-hakenzeile { justify-content: center; margin-bottom: .3em; }
/* .field.check-row setzt display:flex und würde [hidden] sonst aushebeln. */
.frage-hakenzeile[hidden] { display: none; }
.frage-modal .modal-actions { justify-content: center; }

/* Knopf arbeitet gerade */
.btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-busy::after { content: ''; position: absolute; inset: 0; margin: auto; width: 15px; height: 15px;
    border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
    color: var(--text); animation: dreh .6s linear infinite; }
.btn.primary.is-busy::after { color: #1a1a1a; }
@keyframes dreh { to { transform: rotate(360deg); } }

/* Erfolgsmeldung mit gezeichnetem Haken */
.erfolg-blase { position: fixed; left: 50%; bottom: 2.2em; z-index: 200;
    display: flex; align-items: center; gap: .7em;
    padding: .8em 1.3em; border-radius: 999px;
    background: var(--surface-2); border: 1px solid var(--green-soft);
    box-shadow: var(--shadow); color: var(--text); font-size: .92rem;
    transform: translate(-50%, 14px); opacity: 0; transition: opacity .28s, transform .28s; }
.erfolg-blase.an { opacity: 1; transform: translate(-50%, 0); }
.erfolg-haken { width: 26px; height: 26px; flex: 0 0 auto; }
.erfolg-haken circle { fill: none; stroke: var(--green); stroke-width: 3; opacity: .35; }
.erfolg-haken path { fill: none; stroke: var(--green); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 40; stroke-dashoffset: 40; }
.erfolg-blase.an .erfolg-haken path { animation: haken .42s .1s ease forwards; }
@keyframes haken { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
    .btn.is-busy::after { animation-duration: 2s; }
    .erfolg-blase, .erfolg-blase .erfolg-haken path { transition: none; animation: none; stroke-dashoffset: 0; }
}
@media (max-width: 560px) {
    .grid-3 { grid-template-columns: 1fr; }
}

/* Liste der Termine, die sich mit dem geplanten überschneiden */
.konflikt-liste { list-style: none; margin: 0 0 .9em; padding: 0; display: grid; gap: .3em; text-align: left; }
.konflikt-liste li { padding: .4em .7em; border-radius: 7px; background: var(--surface-2);
    border-left: 2px solid var(--amber); font-size: .84rem; color: var(--text); }
.vorlauf-frei { border-left: 1px solid var(--line); padding-left: .8em; }

/* Klappkarte: Titel als Schalter mit drehendem Pfeil */
.klapp-titel { display: inline-flex; align-items: center; gap: .5em; padding: 0; margin: 0;
    background: none; border: 0; cursor: pointer; color: var(--text);
    font: inherit; font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
.klapp-titel:hover { color: var(--gold-2); }
.klapp-titel .ico { color: var(--gold); }
.klapp-pfeil { display: grid; place-items: center; color: var(--dim);
    transition: transform .18s ease; transform: rotate(-90deg); }
.klappkarte.ist-offen .klapp-pfeil { transform: rotate(0deg); }
.klappkarte:not(.ist-offen) .card-head { margin-bottom: 0; }
.klapp-inhalt[hidden] { display: none; }

/* Vertrag eines Mitarbeiters */
.ma-chip { display: inline-flex; align-items: center; gap: .35em; padding: .16em .55em;
    border-radius: 999px; background: var(--purple-soft); border: 1px solid rgba(169,139,221,.3);
    color: var(--purple); font-size: .76rem; white-space: nowrap; }
.feld-hinweis { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: .45em;
    margin: -.4em 0 .9em; font-size: .78rem; line-height: 1.45; color: var(--dim); }
.feld-hinweis .ico { flex: 0 0 auto; margin-top: .15em; color: var(--purple); }
.career-gruppe { display: flex; align-items: baseline; gap: .5em; margin-top: .7em; padding-top: .7em;
    border-top: 1px solid var(--line-2); font-size: .82rem; color: var(--dim); }
.career-gruppe span { display: inline-flex; align-items: center; gap: .3em; color: var(--purple); }
.career-gruppe strong { color: var(--text); font-variant-numeric: tabular-nums; }
.career-gruppe em { margin-left: auto; font-style: normal; font-size: .76rem; }

/* Kundenseite: Pipeline-Stufen als kleine Balken */
.s-kunde { background: var(--c-aktiv); }
.stufen-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .45em; }
.stufen-liste li { display: grid; grid-template-columns: 6.5em 1fr 2em; align-items: center; gap: .7em; font-size: .82rem; }
.st-name { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-bahn { height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.st-balken { display: block; height: 100%; border-radius: 4px; background: var(--gold); }
.st-zahl { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Pot. Kunden: Trichter mit einer Goldstufe je Phase (geprüfte Ordinalrampe) */
.trichter { list-style: none; margin: 0 0 .2em; padding: 0; display: grid; gap: .55em; }
.trichter li { display: grid; grid-template-columns: 7em 1fr 2.2em; align-items: center; gap: .8em; font-size: .86rem; }
.tr-name { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.tr-name:hover { color: var(--gold-2); }
.tr-bahn { height: 14px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.tr-balken { display: block; height: 100%; border-radius: 4px; min-width: 3px; }
.tr-balken.stufe-1 { background: #6b4f16; }
.tr-balken.stufe-2 { background: #8a6620; }
.tr-balken.stufe-3 { background: #a9802b; }
.tr-balken.stufe-4 { background: #c99a38; }
.tr-zahl { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.s-park { background: var(--c-spaeter); }
.herkunft-liste li { grid-template-columns: 8.5em 1fr 2em; }

/* Stammbaum: Umhängen per Drag and Drop */
.baum-hilfe { font-size: .78rem; color: var(--dim); }
.baum-spitze { display: flex; align-items: center; gap: .5em; margin-bottom: 1.2em; padding: .7em 1em;
    border: 1px dashed var(--line); border-radius: 10px; color: var(--dim); font-size: .8rem;
    transition: border-color .14s, background .14s, color .14s; }
.baum-spitze .ico { transform: rotate(-90deg); }
.org-node { cursor: pointer; transition: border-color .14s, box-shadow .14s, opacity .14s; }
.org-node.wird-gezogen { opacity: .4; }
.org-node.ist-ziel, .baum-spitze.ist-ziel {
    border-color: var(--gold); background: var(--gold-soft); color: var(--text);
    box-shadow: 0 0 0 2px var(--gold-soft); }

/* =====================================================================
   BUCHHALTUNG – Jahresergebnis und Verlauf
   Einnahmen und Ausgaben unterscheiden sich nicht nur über die Farbe:
   im Verlauf liegt Einnahme über und Ausgabe unter der Nulllinie. Diese
   Position trägt die Bedeutung auch bei Rot-Grün-Schwäche.
   ===================================================================== */
:root {
    --c-ein: #3f9e63;
    --c-aus: #b8483c;
}
.s-ein { background: var(--c-ein); }
.s-aus { background: var(--c-aus); }
.chart-summe.ist-plus strong  { color: var(--c-ein); }
.chart-summe.ist-minus strong { color: var(--c-aus); }

.geld-liste { list-style: none; margin: 0 0 .2em; padding: 0; display: grid; gap: .9em; }
.gl-kopf { display: flex; align-items: center; gap: .55em; font-size: .86rem; color: var(--muted); margin-bottom: .35em; }
.gl-kopf b { margin-left: auto; color: var(--text); font-variant-numeric: tabular-nums; }
.gl-bahn { display: block; height: 12px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.gl-balken { display: block; height: 100%; border-radius: 4px; min-width: 2px; }

/* Verlauf: Nulllinie in der Mitte, Einnahmen darüber, Ausgaben darunter */
.fluss { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; flex: 1 1 auto; min-height: 190px; }
.fl-monat { display: grid; grid-template-rows: 1fr 1px 1fr 1.4em; justify-items: center; gap: 0; }
.fl-oben, .fl-unten { display: flex; width: 100%; max-width: 26px; }
.fl-oben  { align-items: flex-end; }
.fl-unten { align-items: flex-start; }
.fl-null { width: 100%; background: var(--line); }
.fl-balken { display: block; width: 100%; min-height: 2px; }
.fl-oben  .fl-balken { border-radius: 3px 3px 0 0; }
.fl-unten .fl-balken { border-radius: 0 0 3px 3px; }
.fl-monat:hover .fl-balken { filter: brightness(1.18); }
.fl-lbl { align-self: center; font-size: .7rem; color: var(--dim); margin-top: .3em; }
.fl-monat.is-leer .fl-lbl { opacity: .5; }

.st-geld { text-align: right; white-space: nowrap; font-size: .8rem; }
.stufen-liste.herkunft-liste li:has(.st-geld) { grid-template-columns: 7em 1fr auto; }
.kat-mehr { margin-top: .8em; }

@media (max-width: 560px) {
    .fluss { min-height: 140px; gap: 2px; }
    .fl-lbl { font-size: .6rem; }
}

/* Profilbild im Stammbaum */
.on-avatar.has-bild { padding: 0; overflow: hidden; }
.on-avatar.has-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bild-feld[hidden] { display: none; }
.bild-zeile { display: flex; align-items: center; gap: 1em; margin-top: .4em; }
.bild-knoepfe { display: flex; gap: .5em; flex-wrap: wrap; }
.bild-knoepfe .btn { cursor: pointer; }
.bild-hinweis { margin: .5em 0 0; font-size: .76rem; color: var(--dim); }

/* =====================================================================
   ANMELDUNG: Haken auf dem Knopf, wenn es geklappt hat
   Der Ladekreis steckt schon in .btn.is-busy; hier folgt der Abschluss.
   ===================================================================== */
.btn.is-done { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-done::after {
    content: ''; position: absolute; inset: 0; margin: auto;
    width: 9px; height: 16px;
    border: solid currentColor; border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg) translate(-1px, -3px);
    color: var(--text);
    animation: hakenZeichnen .34s cubic-bezier(.2,.7,.3,1) forwards;
}
.btn.primary.is-done::after { color: #1a1a1a; }
@keyframes hakenZeichnen {
    0%   { width: 0;   height: 0;    opacity: 0; }
    35%  { width: 9px; height: 0;    opacity: 1; }
    100% { width: 9px; height: 16px; opacity: 1; }
}

/* =====================================================================
   BENUTZER & ROLLEN
   Eigene Maße: die Seite besteht fast nur aus Tabellen, die dürfen
   ruhig luftiger sein als die dichten Listen in Kunden und Verträgen.
   ===================================================================== */
#bnav { gap: .5em; padding: .45em; margin-bottom: 1.7em; }
#bnav .seg-btn { padding: .95em 1em; font-size: .97rem; }

.btab .card { padding: 1.6em 1.7em; }
.btab .card-head { margin-bottom: 1.2em; }
.btab .card-head h3 { font-size: 1.06rem; }
.btab table.data { font-size: .95rem; }
.btab table.data th { font-size: .82rem; letter-spacing: .04em; }
.btab table.data th,
.btab table.data td { padding: 1em 1.1em; }
.btab table.data td .badge { font-size: .76rem; }
.btab .btn.sm { font-size: .85rem; padding: .5em .9em; }

/* Rechte-Maske: die Gruppen als ruhige Blöcke, zwei Spalten wenn Platz ist */
#r-perms { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: .9em; }
#r-perms > .card { margin: 0; background: var(--surface-2); }
#r-perms .field.check-row { align-items: flex-start; }
#r-perms .field.check-row input { margin-top: .25em; }

/* =====================================================================
   PFLICHT-DIALOG (Startpasswort ersetzen)
   Liegt über der Kontoseite und lässt sich nicht wegklicken, solange
   das Passwort nicht gesetzt ist.
   ===================================================================== */
.pflicht-modal .modal { max-width: 460px; }
.pflicht-modal .modal-head h3 { font-size: 1.15rem; }
.pflicht-intro { margin: 0 0 1.4em; font-size: .9rem; line-height: 1.6; color: var(--muted); }
.pflicht-intro strong { color: var(--text); }
.pflicht-regel { margin: -.5em 0 1.2em; font-size: .8rem; color: var(--dim); }

/* =====================================================================
   WOCHENPLAN
   Ein Raster aus einer Stundenskala und einer Spalte je Tag. Die Einträge
   liegen absolut darin, Position und Höhe kommen als Prozent vom Server.
   ===================================================================== */
.wp-leiste {
    display: flex; align-items: center; gap: 1em 1.4em; flex-wrap: wrap;
    margin-bottom: 1.4em;
}
.wp-nav { display: flex; gap: .4em; }
.wp-legende { display: flex; gap: .9em; flex-wrap: wrap; margin-left: auto; }
.wp-chip { display: inline-flex; align-items: center; gap: .45em; font-size: .8rem; color: var(--muted); }
.wp-chip i { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }

.wp-karte { padding: 1.2em 1.3em 1.4em; }
.wp-raster {
    display: grid;
    grid-template-columns: 62px repeat(var(--wp-spalten), minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; background: var(--surface-2);
}

/* Kopfzeile über beiden Teilen gleich hoch halten */
.wp-kopf {
    height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .1em; background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.wp-tag-name  { font-size: .86rem; font-weight: 600; }
.wp-tag-datum { font-size: .74rem; color: var(--dim); }
.wp-tag.ist-heute .wp-kopf { background: var(--gold-soft); }
.wp-tag.ist-heute .wp-tag-name { color: var(--gold); }

.wp-skala .wp-stunden { position: relative; }
.wp-stunde {
    height: 54px; border-bottom: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    padding: 0 .5em;
}
.wp-stunde span { font-size: .74rem; color: var(--muted); }
.wp-stunde:last-child { border-bottom: 0; }

.wp-tag { border-left: 1px solid var(--line); min-width: 0; }
.wp-spalte { position: relative; }
.wp-spalte[onclick] { cursor: copy; }
.wp-zeile { height: 54px; border-bottom: 1px solid var(--line); }
.wp-zeile:last-child { border-bottom: 0; }

.wp-eintrag {
    position: absolute; left: 3px; right: 3px;
    border-radius: 7px; padding: .3em .5em; overflow: hidden;
    background: color-mix(in srgb, var(--f) 22%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--f) 55%, transparent);
    border-left: 3px solid var(--f);
    display: flex; flex-direction: column; gap: .05em;
    font-size: .78rem; line-height: 1.25;
}
.wp-eintrag.ist-meiner { cursor: pointer; }
.wp-eintrag.ist-meiner:hover { filter: brightness(1.15); }
.wp-eintrag.ist-belegt {
    background: repeating-linear-gradient(135deg,
        rgba(150,150,150,.16) 0 6px, rgba(150,150,150,.07) 6px 12px);
    color: var(--muted);
}
.wp-zeit  { font-size: .7rem; color: var(--dim); }
.wp-titel { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-ort   { font-size: .72rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Schmale Bildschirme: waagrecht scrollen statt alles zu quetschen */
@media (max-width: 900px) {
    .wp-karte { overflow-x: auto; }
    .wp-raster { min-width: 760px; }
    .wp-legende { margin-left: 0; }
}

/* =====================================================================
   TEAM: Wochenplan-Stand
   ===================================================================== */
.wp-stand { display: flex; flex-direction: column; gap: .55em; }
.wp-stand-zeile {
    display: flex; align-items: center; gap: .8em;
    padding: .6em .8em; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface-2);
}
.wp-stand-name { font-weight: 600; margin-right: auto; }
.on-avatar.sm { width: 30px; height: 30px; font-size: .72rem; }