/* ==========================================================================
   Die Betreiberoberfläche der Telefonanlage.

   Dieselbe Gestaltungssprache wie das Dashboard (Look B, dashboard/DESIGN.md),
   aber eigenständig: Die Anlage läuft auf einem eigenen Server und darf vom
   Dashboard keine Datei brauchen. Deshalb stehen die Werte hier noch einmal –
   eine Abschrift der Tokens, keine neue Palette.

   Die drei Familien gelten auch hier: Zinnober ist die Marke (nur das Zeichen
   in der Leiste), Blaugrau berichtet (Säulen, Anteile), Leuchtblau wird
   angefasst (Knöpfe, der aktive Weg). Zustände tragen Grün, Orange und Rot aus
   der Palette, nie die Marke.
   ========================================================================== */

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/jakarta-var-latin.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/plex-var-latin.woff2') format('woff2');
}

:root {
    --akzent: #f03c1e;
    --grund: #eef2f7;
    --flaeche: #ffffff;
    --zeile: #f4f7fa;
    --tinte: #1a2430;
    --leise: #66748a;
    --blass: #828f9f;
    --titel: #33586e;
    --linie: #dde4ec;
    --traeger: #4b6c8b;
    --traeger-dunkel: #3d5b78;
    --traeger-hell: #eaf0f6;
    --leucht: #00a2ef;
    --leucht-dunkel: #0384c3;
    --leucht-tief: #026ca0;
    --blau-hell: #e2f1fb;
    --ruhe: #e3eaf1;
    --gruen: #1e7e34;
    --gruen-signal: #16c34a;
    --gruen-hell: #e6f4ea;
    --orange: #b3620a;
    --orange-hell: #fdf1e3;
    --rot: #b3261e;
    --rot-signal: #e5342a;
    --rot-hell: #fdeeeb;
    --sh-1: 0 1px 2px rgba(24, 44, 66, .05), 0 1px 3px rgba(24, 44, 66, .06);
    --sh-2: 0 2px 4px rgba(24, 44, 66, .06), 0 8px 20px rgba(24, 44, 66, .08);
    --schein: 0 4px 12px rgba(0, 162, 239, .28);
    --aus: cubic-bezier(0.23, 1, 0.32, 1);
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --grund: #12171e;
        --flaeche: #1c222c;
        --zeile: #232b37;
        --tinte: #e8edf3;
        --leise: #9aa8b9;
        --blass: #7d8a9b;
        --titel: #b9d3e4;
        --linie: #2d3744;
        --traeger: #7d97b3;
        --traeger-dunkel: #a9bfd6;
        --traeger-hell: #243242;
        --leucht-tief: #6cc9f7;
        --blau-hell: #17384d;
        --ruhe: #2a3340;
        --gruen: #5fd17a;
        --gruen-hell: #173321;
        --orange: #f0b25e;
        --orange-hell: #3a2a12;
        --rot: #ff9077;
        --rot-hell: #3d1d19;
        --sh-1: 0 1px 2px rgba(0, 0, 0, .3);
        --sh-2: 0 8px 20px rgba(0, 0, 0, .35);
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--grund);
    color: var(--tinte);
    font: 400 0.9375rem/1.5 'Plus Jakarta Sans', 'IBM Plex Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--leucht-tief); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; text-wrap: balance; }
p { margin: 0 0 0.75rem; }
.leise { color: var(--leise); }
p.leise { font-size: 0.8rem; }
.zahl { font-family: 'IBM Plex Sans', sans-serif; font-variant-numeric: tabular-nums; }
.rechts { text-align: right; }
:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0, 162, 239, 0.25); border-radius: 6px; }

/* ---------- Rahmen: Leiste links, Spur rechts ---------- */

.rahmen {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    min-height: 100vh;
}
.leiste {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100vh;
    padding: 1rem 0.75rem;
    background: var(--flaeche);
    border-right: 1px solid var(--linie);
}
.marke {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.25rem 0.5rem 1.1rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}
/* Das Zeichen: ein Ring in der Hausfarbe – die eine Stelle, an der sie steht. */
.marke span {
    width: 18px;
    height: 18px;
    border: 4px solid var(--akzent);
    border-radius: 50%;
}
.leiste > a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 34px;
    padding: 0 0.75rem;
    border-radius: 8px;
    color: var(--tinte);
    font-size: 0.85rem;
    font-weight: 500;
    transition: background-color 120ms var(--aus);
}
.leiste > a:hover { background: var(--zeile); text-decoration: none; }
.leiste > a.ist-aktiv {
    background: var(--blau-hell);
    color: var(--leucht-tief);
    font-weight: 600;
}
.leiste > a.ist-aktiv::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 999px;
    background: var(--leucht);
}
.leiste-fuss {
    margin-top: auto;
    display: grid;
    gap: 0.75rem;
    padding: 0.75rem 0.5rem 0;
    border-top: 1px solid var(--linie);
    font-size: 0.8rem;
    color: var(--leise);
}
.leiste-fuss form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.leiste-fuss form a { font-weight: 500; }
.leiste-fuss form a[aria-current] { color: var(--tinte); font-weight: 600; }
.dienst { display: flex; align-items: center; gap: 0.5rem; }
code { font: 500 0.8rem 'IBM Plex Sans', monospace; overflow-wrap: anywhere; }
.dienst i,
.punkt {
    display: inline-block;
    flex: none;
    width: 8px;
    height: 8px;
    margin-right: 0.45rem;
    border-radius: 50%;
    background: var(--blass);
}
.dienst i { margin-right: 0; background: var(--orange); }
.dienst.ist-an i,
.punkt.ist-an {
    background: var(--gruen-signal);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gruen-signal) 22%, transparent);
}

.spur {
    max-width: 1320px;
    padding: 1.5rem 1.75rem 3rem;
}
.seitenkopf { margin-bottom: 1.25rem; }
.seitenkopf h1 { font-size: 1.3rem; color: var(--titel); }
.seitenkopf small { margin-left: 0.4rem; font-size: 0.8rem; font-weight: 400; letter-spacing: 0; color: var(--leise); }
.zurueck { margin: -0.5rem 0 1rem; font-size: 0.8rem; }

/* ---------- Karte ---------- */

.karte {
    margin-bottom: 1.25rem;
    padding: 1.1rem 1.25rem 1.25rem;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: 12px;
    box-shadow: var(--sh-1);
}
.karte h2 {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
    font-size: 0.9375rem;
    color: var(--titel);
}
.karte h3 { margin: 1rem 0 0.4rem; font-size: 0.8rem; color: var(--leise); }
.karte h2 .mehr,
.karte h2 .stand,
.legende { font-size: 0.75rem; font-weight: 500; letter-spacing: 0; color: var(--leise); }
.karte h2 .mehr { color: var(--leucht-tief); }
.karte > :last-child { margin-bottom: 0; }

.zweispalter {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
    gap: 1.25rem;
    align-items: start;
}
.zweispalter.ist-gleich { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- Kennzahlen ---------- */

.kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.kachel {
    display: grid;
    gap: 0.15rem;
    padding: 0.85rem 1rem 0.9rem;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: 12px;
    box-shadow: var(--sh-1);
    color: inherit;
    transition: box-shadow 180ms var(--aus), transform 180ms var(--aus);
}
/* Die Link-Kachel ist ein Weg: Sie hebt sich unter dem Zeiger. Eine Zahl ohne Verweis nicht. */
a.kachel:hover { text-decoration: none; box-shadow: var(--sh-2); transform: translateY(-1px); }
.kachel span {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--leise);
}
.kachel b {
    font: 600 1.6rem/1.15 'IBM Plex Sans', sans-serif;
    font-variant-numeric: tabular-nums;
    color: var(--traeger-dunkel);
}
.kachel small { font-size: 0.75rem; color: var(--leise); }

/* ---------- Tabelle ---------- */

.tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.tabelle th {
    padding: 0 0.6rem 0.5rem;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--leise);
    white-space: nowrap;
}
.tabelle th.rechts { text-align: right; }
.tabelle td { padding: 0.5rem 0.6rem; vertical-align: middle; white-space: nowrap; }
.tabelle td:first-child { white-space: normal; }
.tabelle tbody tr { transition: background-color 120ms var(--aus); }
.tabelle tbody tr:hover { background: var(--zeile); }
.tabelle tbody td:first-child { border-radius: 9px 0 0 9px; }
.tabelle tbody td:last-child { border-radius: 0 9px 9px 0; }
.tabelle td small { margin-left: 0.4rem; font-size: 0.7rem; color: var(--blass); }
.tabelle tfoot td {
    padding-top: 0.7rem;
    border-top: 1px solid var(--linie);
    font-weight: 600;
}
.tabelle tr.ist-aus td { color: var(--blass); }
.zeilenlink { font-weight: 600; color: var(--tinte); }

/* Was aus einem Gespräch wurde – ein Wort, leise getönt. */
.marke-e {
    display: inline-block;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: var(--zeile);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--leise);
    white-space: nowrap;
}
.marke-e.ist-angenommen { background: var(--gruen-hell); color: var(--gruen); }
.marke-e.ist-verpasst,
.marke-e.ist-besetzt { background: var(--rot-hell); color: var(--rot); }
.marke-e.ist-mailbox { background: var(--orange-hell); color: var(--orange); }
.marke-e.ist-assistent { background: var(--traeger-hell); color: var(--traeger-dunkel); }

/* ---------- Formulare ---------- */

label {
    display: grid;
    gap: 0.25rem;
    margin-bottom: 0.8rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--leise);
}
input, select, textarea {
    width: 100%;
    min-height: 34px;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--linie);
    border-radius: 8px;
    background: var(--flaeche);
    color: var(--tinte);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 400;
    transition: border-color 120ms var(--aus), box-shadow 120ms var(--aus);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--leucht);
    box-shadow: 0 0 0 3px rgba(0, 162, 239, 0.25);
}
textarea { resize: vertical; }
.feldreihe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0 0.75rem;
}
.mit-einheit { position: relative; display: block; }
.mit-einheit input { padding-right: 2rem; font-family: 'IBM Plex Sans', sans-serif; }
.mit-einheit i {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    font-style: normal;
    font-weight: 400;
    color: var(--blass);
}
.filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.filter label { margin: 0; min-width: 150px; }
.zeilenform {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 0.5rem;
}
.zeilenform input, .zeilenform select { min-height: 28px; padding-block: 0.15rem; }

/* ---------- Knöpfe: ein gefüllter je Fläche, alle anderen leise ---------- */

.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 0.9rem;
    border: 0;
    border-radius: 8px;
    background: var(--ruhe);
    color: var(--tinte);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 120ms var(--aus), color 120ms var(--aus), transform 160ms var(--aus), box-shadow 180ms var(--aus);
}
.knopf:hover { background: var(--blau-hell); color: var(--leucht-tief); text-decoration: none; }
.knopf:active { transform: scale(0.97); }
.knopf.ist-haupt {
    background: linear-gradient(170deg, var(--leucht), var(--leucht-dunkel));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
    color: #fff;
}
.knopf.ist-haupt:hover {
    background: linear-gradient(170deg, var(--leucht-dunkel), #026ca0);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), var(--schein);
    color: #fff;
    transform: translateY(-1px);
}
.knopf.ist-haupt:active { transform: scale(0.97); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28); }
.knopf.ist-leise { background: transparent; color: var(--leise); }
.knopf.ist-klein { min-height: 28px; padding: 0 0.6rem; font-size: 0.8rem; }
.knopf.ist-gefahr { background: transparent; color: var(--rot); }
.knopf.ist-gefahr:hover { background: var(--rot-hell); color: var(--rot); }

/* ---------- Meldung: Fläche und Balken, kein Rahmen ---------- */

.meldung {
    position: relative;
    margin-bottom: 1.25rem;
    padding: 0.7rem 1rem 0.7rem 1.25rem;
    border-radius: 9px;
    background: var(--gruen-hell);
    font-size: 0.85rem;
}
.meldung::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 999px;
    background: var(--gruen);
}
.meldung.ist-fehler { background: var(--rot-hell); }
.meldung.ist-fehler::before { background: var(--rot); }
.schluessel {
    display: block;
    margin: 0.5rem 0;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    background: var(--flaeche);
    font: 500 0.85rem 'IBM Plex Sans', monospace;
    user-select: all;
    overflow-wrap: anywhere;
}

/* ---------- Listen ohne Aufwand ---------- */

.schlicht {
    margin: 0 0 0.75rem;
    padding: 0;
    list-style: none;
    font-size: 0.85rem;
}
.schlicht li { padding: 0.25rem 0; }
.schlicht b { display: inline-block; min-width: 4.5em; margin-right: 0.6rem; font-weight: 600; }
.schlicht b.zahl { color: var(--traeger-dunkel); }
.karte .schlicht li > b:first-child:not(.zahl) { min-width: 6em; }

.karte.ist-gefahr h2 { color: var(--leise); }
.gefahr-reihe {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
}
.gefahr-reihe form {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.8rem;
}
.gefahr-reihe input { width: 16em; }

/* ---------- Säulen und Anteile: beides berichtet, also Blaugrau ---------- */

.saeulen {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 160px;
    padding-bottom: 1.4rem;
}
.saeulen.ist-dicht { gap: 2px; }
.saeulen.ist-niedrig { height: 120px; }
.saeulen.ist-monate { height: 190px; gap: 10px; padding-top: 1.2rem; }
.saeule {
    position: relative;
    flex: 1 1 0;
    display: flex;
    align-items: flex-end;
    height: 100%;
    min-width: 0;
    border-radius: 4px 4px 0 0;
}
.saeule:hover { background: var(--zeile); }
.saeule > span {
    position: relative;
    display: block;
    width: 100%;
    min-height: 2px;
    border-radius: 3px 3px 0 0;
    background: var(--traeger);
    overflow: hidden;
}
.saeule > span > i {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: var(--rot-signal);
}
.saeule small {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    font: 400 0.65rem 'IBM Plex Sans', sans-serif;
    color: var(--leise);
    white-space: nowrap;
}
.saeulen.ist-monate .saeule { flex-direction: column; justify-content: flex-end; }
.saeulen.ist-monate .saeule small { text-align: center; }
.saeulen.ist-monate .saeule em {
    margin-bottom: 3px;
    text-align: center;
    font: 500 0.7rem 'IBM Plex Sans', sans-serif;
    color: var(--leise);
}
.saeulen.ist-monate .saeule.ist-gewaehlt > span { background: var(--traeger-dunkel); }
.saeulen.ist-monate .saeule.ist-gewaehlt small { font-weight: 600; color: var(--tinte); }
a.saeule:hover { text-decoration: none; }
.legende { display: inline-flex; align-items: center; gap: 0.4rem; }
.legende i { width: 10px; height: 10px; border-radius: 2px; background: var(--traeger); }
.legende i.ist-verpasst { margin-left: 0.5rem; background: var(--rot-signal); }

.anteile { margin: 0; padding: 0; list-style: none; font-size: 0.85rem; }
.anteile li {
    display: grid;
    grid-template-columns: 11em minmax(0, 1fr) 3em;
    align-items: center;
    gap: 0.75rem;
    padding: 0.35rem 0;
}
.anteile b { text-align: right; font-weight: 600; }
.anteil { height: 10px; border-radius: 999px; background: var(--ruhe); overflow: hidden; }
.anteil i { display: block; height: 100%; border-radius: 999px; background: var(--traeger); }
.anteil.ist-verpasst i { background: var(--rot-signal); }

/* ---------- Anmeldung ---------- */

body.anmeldung {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 1rem;
}
.anmelde-karte {
    width: min(360px, 100%);
    padding: 1.75rem 1.75rem 2rem;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: 12px;
    box-shadow: var(--sh-2);
}
.anmelde-karte .marke { margin: 0 0 1.5rem; }
.anmelde-karte h1 { font-size: 1.3rem; color: var(--titel); margin-bottom: 0.4rem; }
.anmelde-karte .knopf { width: 100%; margin-top: 0.5rem; min-height: 44px; }

@media (max-width: 900px) {
    .rahmen { grid-template-columns: 1fr; }
    .leiste {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--linie);
    }
    .marke { width: 100%; margin-bottom: 0.5rem; }
    .leiste-fuss { width: 100%; margin-top: 0.5rem; }
    .spur { padding: 1rem; }
    .zweispalter, .zweispalter.ist-gleich { grid-template-columns: 1fr; }
    .karte { overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* ---------- Der Telefondienst auf der Übersicht ---------- */

.dienst-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; font-size: 0.8rem; }
.hinweis {
    position: relative;
    padding: 0.5rem 0.9rem 0.5rem 1.2rem;
    border-radius: 9px;
    background: var(--orange-hell);
    font-size: 0.85rem;
}
.hinweis::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 999px;
    background: var(--orange);
}

/* ---------- Sparten: Agenturen, Praxen, Hotels ---------- */

/* Der Schalter über der Kundenliste – die Bahn des Segmentschalters, das
   Gewählte als heller Daumen, das Leuchtblau in der Schrift. */
.schalter {
    display: inline-flex;
    gap: 2px;
    margin-bottom: 1rem;
    padding: 3px;
    border-radius: 10px;
    background: var(--ruhe);
}
.schalter a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 30px;
    padding: 0 0.8rem;
    border-radius: 8px;
    color: var(--leise);
    font-size: 0.85rem;
    font-weight: 600;
}
.schalter a:hover { color: var(--tinte); text-decoration: none; }
.schalter a.ist-aktiv { background: var(--flaeche); color: var(--leucht-tief); box-shadow: var(--sh-1); }
.schalter b { font: 500 0.75rem 'IBM Plex Sans', sans-serif; color: var(--blass); }
.schalter a.ist-aktiv b { color: var(--leucht-tief); }

/* Jede Sparte trägt ein eigenes Zeichen vor der Überschrift: ein Ton aus dem
   Blaugrau der Berichte, in drei Stufen. Keine Zustandsfarbe und nicht die
   Marke – eine Sparte ist weder gut noch schlecht. */
.sparte h2 > span:first-child { display: inline-flex; align-items: center; gap: 0.55rem; }
.sparte-zeichen {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--traeger);
}
.sparte.ist-praxis .sparte-zeichen { border-radius: 50%; background: var(--traeger-dunkel); }
.sparte.ist-hotel .sparte-zeichen { transform: rotate(45deg); background: color-mix(in srgb, var(--traeger) 55%, var(--flaeche)); }

/* Die Tabellen der drei Sparten stehen untereinander – gleiche Spalten an
   gleicher Stelle, sonst springt das Auge von Karte zu Karte. Wird es eng,
   rollt die Karte, statt die letzte Spalte abzuschneiden. */
.sparte { overflow-x: auto; }
.sparte .tabelle { table-layout: fixed; min-width: 560px; }
.sparte .tabelle th:first-child { width: 36%; }
.sparte .tabelle th:nth-child(2),
.sparte .tabelle th:nth-child(3) { width: 14%; }
.sparte .tabelle th:nth-child(4) { width: 17%; }

.spur > .hinweis { margin-bottom: 1.25rem; }

/* ==========================================================================
   DIE OPTIK MIT BILDERN (03.10.2026)

   Dieselben drei Zutaten wie im Dashboard und im Versandabgleich:

   1. Die Orbit-Bänder als feste Ebene hinter allem (bilder/baender-*.webp,
      Kopie aus dashboard/assets/hintergrund).
   2. Karten und Kacheln als Glas nach dashboard/GLAS.md: Fläche zu 86 %,
      saturate(180%) blur(14px), mit Rückfall ohne Weichzeichner und für
      „weniger Transparenz".
   3. Je Seite eine Bühne mit einem eigenen Bild in der Bänder-Sprache
      (Higgsfield, gpt_image_2_5, 21:9, freigestellt): Bänder laufen durch
      einen Ring (Übersicht, Anmeldung), ein Band durch einen Ring (Leitung),
      drei Bänder werden zu drei Ringen (Kunden nach Sparten).

   Kein Bild trägt eine Bedeutung. Zustände bleiben bei Grün, Orange und Rot.
   ========================================================================== */

body:not(.anmeldung)::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: url('bilder/baender-hell.webp') center / cover no-repeat;
    opacity: .55;
    pointer-events: none;
}
@media (prefers-color-scheme: dark) {
    body:not(.anmeldung)::before { background-image: url('bilder/baender-dunkel.webp'); opacity: .5; }
}

.karte,
.kachel,
.leiste {
    background: color-mix(in srgb, var(--flaeche) 86%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
}
.karte, .kachel { border-color: color-mix(in srgb, var(--linie) 60%, transparent); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .karte, .kachel, .leiste { background: color-mix(in srgb, var(--flaeche) 95%, transparent); }
}
@media (prefers-reduced-transparency: reduce) {
    .karte, .kachel, .leiste { background: var(--flaeche); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- Zeichen in der Leiste ---------- */

.leiste > a { gap: 0.6rem; }
.leiste > a svg { flex: none; color: var(--leise); transition: color 120ms var(--aus); }
.leiste > a.ist-aktiv svg { color: var(--leucht-tief); }

/* ---------- Die Bühne ---------- */

.buehne {
    position: relative;
    display: grid;
    align-content: end;
    gap: 1rem;
    min-height: 196px;
    margin-bottom: 1.25rem;
    padding: 1.25rem 1.4rem 1.3rem;
    border-radius: 14px;
    /* Hell: eine Karte mit einem Hauch Blau, der nach rechts zunimmt – dort liegt das Bild. */
    background: linear-gradient(105deg, var(--flaeche) 0%, var(--flaeche) 42%, var(--blau-hell) 100%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--linie) 70%, transparent), var(--sh-1);
    overflow: hidden;
    isolation: isolate;
}
.buehne-bild {
    position: absolute;
    z-index: -1;
    top: 50%;
    right: -2%;
    width: min(64%, 760px);
    height: auto;
    transform: translateY(-50%);
    /* Nach links ausgeblendet, damit Satz und Kacheln auf ruhigem Grund stehen. */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 38%);
    mask-image: linear-gradient(to right, transparent 0%, #000 38%);
    pointer-events: none;
}
.buehne.ist-vermittlung .buehne-bild { width: min(74%, 860px); right: -4%; }
.buehne.ist-sparten .buehne-bild { width: min(58%, 700px); }
.buehne-satz {
    max-width: 30ch;
    margin: 0 0 auto;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.25;
    color: var(--titel);
    text-wrap: balance;
}
.buehne-kacheln {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

/* Die Glaskachel: schwebt über Bild und Verlauf. Ein Verweis hebt sich unter
   dem Zeiger (der Hub der Link-Kachel), eine bloße Zahl nicht. */
.glas {
    display: grid;
    gap: 0.1rem;
    min-width: 132px;
    padding: 0.65rem 0.9rem 0.7rem;
    border-radius: 11px;
    background: color-mix(in srgb, var(--flaeche) 74%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 0 0 1px color-mix(in srgb, var(--linie) 55%, transparent), var(--sh-1);
    color: inherit;
    transition: box-shadow 180ms var(--aus), transform 180ms var(--aus), background-color 180ms var(--aus);
}
a.glas:hover { text-decoration: none; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 0 0 1px color-mix(in srgb, var(--linie) 55%, transparent), var(--sh-2); }
a.glas:active { transform: scale(0.98); }
.glas span {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--leise);
}
.glas b {
    font: 600 1.45rem/1.15 'IBM Plex Sans', sans-serif;
    font-variant-numeric: tabular-nums;
    color: var(--traeger-dunkel);
}
.glas small { font-size: 0.72rem; color: var(--leise); }
/* Gewählt (die Sparte, die gerade allein gezeigt wird): die Tönung des Gewählten, Schrift in Leuchtblau. */
.glas.ist-aktiv { background: color-mix(in srgb, var(--blau-hell) 88%, transparent); box-shadow: inset 0 0 0 1.5px var(--leucht), var(--sh-1); }
.glas.ist-aktiv span, .glas.ist-aktiv b { color: var(--leucht-tief); }

@media (prefers-color-scheme: dark) {
    .buehne { background: linear-gradient(105deg, #121a24 0%, #142633 55%, #17384d 100%); }
    .glas { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px color-mix(in srgb, var(--linie) 70%, transparent), var(--sh-1); }
    a.glas:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px color-mix(in srgb, var(--linie) 70%, transparent), var(--sh-2); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glas { background: color-mix(in srgb, var(--flaeche) 92%, transparent); }
}
@media (prefers-reduced-transparency: reduce) {
    .glas { background: var(--flaeche); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- Die Anmeldung: links die Bühne, rechts das Formular ---------- */

body.anmeldung {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(340px, 1fr);
    place-items: stretch;
    padding: 0;
    background: var(--flaeche);
}
.anmelde-buehne {
    position: relative;
    display: grid;
    align-content: end;
    padding: 3rem;
    /* Die Bühnenfarbe des Hauses – in beiden Fassungen dunkel, wie die Anmeldung des Dashboards. */
    background: linear-gradient(160deg, #0d1a24 0%, #142633 60%, #17384d 100%);
    overflow: hidden;
    isolation: isolate;
}
.anmelde-buehne img {
    position: absolute;
    z-index: -1;
    top: 46%;
    left: 50%;
    width: 118%;
    max-width: none;
    height: auto;
    transform: translate(-50%, -50%);
}
/* Ein Schleier von unten, dort steht der Satz. */
.anmelde-buehne::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 55% 0 0;
    background: linear-gradient(to bottom, transparent, rgba(13, 26, 36, .82));
}
.anmelde-buehne p {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: #fff;
    text-shadow: 0 1px 12px rgba(13, 26, 36, .5);
}
body.anmeldung .anmelde-karte {
    align-self: center;
    justify-self: center;
    border: 0;
    box-shadow: none;
    background: transparent;
}

@media (max-width: 900px) {
    body.anmeldung { grid-template-columns: 1fr; grid-template-rows: 34vh auto; }
    .anmelde-buehne { padding: 1.5rem; }
    .anmelde-buehne p { font-size: 1.2rem; }
    .buehne { min-height: 0; }
    .buehne-bild { width: 120%; right: -30%; opacity: .5; }
    .glas { min-width: calc(50% - 0.3rem); }
    .leiste > a svg { display: none; }
}

/* Nachgemessen am 03.10.2026: „Nebenstellen" stieß an „Assistent", „nach Zeitplan" an die Spalte daneben. */
.sparte .tabelle { min-width: 640px; }
.sparte .tabelle th:first-child { width: 32%; }
.sparte .tabelle th:nth-child(2) { width: 12%; }
.sparte .tabelle th:nth-child(3) { width: 17%; }
.sparte .tabelle th:nth-child(4) { width: 19%; }
.sparte .tabelle td:nth-child(4) { padding-left: 1.1rem; }
.sparte .tabelle th:nth-child(4) { padding-left: 1.1rem; }
.buehne.ist-vermittlung .buehne-bild { top: 42%; }

/* ---------- Der neue Look überall (03.10.2026) ---------- */

/* Jede Seite trägt oben ihre Bühne. Der Filter darunter ist eine Glasleiste,
   keine lose Reihe von Feldern – er gehört sichtbar zur Seite, nicht zum Grund. */
.filter {
    padding: 0.75rem 0.9rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--flaeche) 86%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--linie) 60%, transparent), var(--sh-1);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .filter { background: color-mix(in srgb, var(--flaeche) 95%, transparent); }
}
@media (prefers-reduced-transparency: reduce) {
    .filter { background: var(--flaeche); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.filter .knopf.ist-leise { margin-left: auto; }

/* Meldungen und Hinweise liegen auf den Bändern: deckend genug, um gelesen zu werden. */
.meldung, .hinweis { box-shadow: var(--sh-1); }
.spur > .meldung, .spur > .hinweis { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

/* Die Bilder je Seite liegen verschieden – manche füllen die Höhe, manche sind ein schmales Band. */
.buehne.ist-statistik .buehne-bild { width: min(60%, 720px); top: 44%; }
.buehne.ist-umsatz .buehne-bild { width: min(56%, 680px); top: 46%; }
.buehne.ist-verbindungen .buehne-bild { width: min(58%, 700px); }
.buehne.ist-nummern .buehne-bild,
.buehne.ist-kunde .buehne-bild,
.buehne.ist-zugang .buehne-bild { width: min(62%, 740px); }

/* Eine Kachel mit einem Wort statt einer Zahl („angemeldet", ein Benutzername) braucht eine kleinere Schrift. */
.glas b { overflow-wrap: anywhere; }
.buehne.ist-leitung .glas b,
.buehne.ist-zugang .glas b,
.buehne.ist-nummern .glas:last-child b { font-size: 1.15rem; line-height: 1.3; }

.zurueck { margin: -0.4rem 0 0.8rem; }

/* Schmal (nachgemessen bei 390px): Die Spur war breiter als der Schirm, weil
   eine Rasterspalte „1fr" nie schmaler wird als ihr breitester Inhalt. */
.spur { min-width: 0; }
@media (max-width: 900px) {
    .rahmen { grid-template-columns: minmax(0, 1fr); }
    .leiste { flex-wrap: nowrap; overflow-x: auto; align-items: center; row-gap: 0; }
    .leiste .marke { width: auto; flex: none; margin: 0 0.75rem 0 0.25rem; }
    .leiste > a { flex: none; }
    .leiste-fuss { width: auto; flex: none; margin: 0 0 0 0.75rem; padding: 0 0 0 0.75rem; border-top: 0; border-left: 1px solid var(--linie); grid-auto-flow: column; align-items: center; }
    .dienst { white-space: nowrap; }
    .buehne-kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .glas { min-width: 0; }
    .glas b { font-size: 1.2rem; }
    .filter label { min-width: 0; flex: 1 1 140px; }
    .filter .knopf.ist-leise { margin-left: 0; }
}

/* ---------- Der Punkt, der sagt, ob etwas in Betrieb ist ---------- */

/* Grün und pulsierend: in Betrieb (wie die Server im Dashboard, die auf dem
   Stand sind). Rot: sollte in Betrieb sein, ist es aber nicht. Grau: frei
   oder nicht zu erfahren. Orange, pulsierend: meldet sich gerade an. Alles
   Zustände – nie die Hausfarbe. Der Ring läuft aus und kommt wieder; wer
   Bewegung abgestellt hat, sieht den Punkt ruhig. */
.puls {
    position: relative;
    display: inline-block;
    flex: none;
    width: 9px;
    height: 9px;
    margin-right: 0.55rem;
    border-radius: 50%;
    background: var(--blass);
    vertical-align: 0.05em;
}
.puls.ist-an { background: var(--gruen-signal); }
.puls.ist-rot { background: var(--rot-signal); }
.puls.ist-wartend { background: #e8a33d; }
.puls.ist-an::after,
.puls.ist-wartend::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: inherit;
    animation: puls-ring 2.4s cubic-bezier(0.23, 1, 0.32, 1) infinite;
}
@keyframes puls-ring {
    0% { transform: scale(1); opacity: .55; }
    70%, 100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .puls::after { animation: none; display: none; }
    .puls.ist-an { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gruen-signal) 25%, transparent); }
}

/* ---------- Rufnummern: Vorwahl leiser, Rufnummer kräftig ---------- */

.rufnummer {
    font-family: 'IBM Plex Sans', sans-serif;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}
.rufnummer i {
    margin-right: 0.4em;
    font-style: normal;
    font-weight: 500;
    color: var(--leise);
}
.tabelle.ist-nummern td:first-child { white-space: nowrap; font-size: 0.9375rem; }
.zeilenform.ist-drei { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.2fr) auto; }
.legende-punkte {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.4rem;
    margin: 0.9rem 0 0;
    padding-top: 0.8rem;
    border-top: 1px solid var(--linie);
    font-size: 0.75rem;
    color: var(--leise);
}
label.haken { display: flex; align-items: center; gap: 0.5rem; }
label.haken input { width: auto; min-height: 0; accent-color: var(--leucht-dunkel); }
/* In den Listen der Gespräche steht die Nummer leiser als in der Rufnummernliste – dort ist sie eine von vielen Spalten. */
.tabelle:not(.ist-nummern) .rufnummer { font-weight: 500; }
.schlicht .rufnummer { margin-right: 0.6rem; color: var(--traeger-dunkel); font-weight: 600; }

/* Die Rufnummernliste braucht Platz: Nummer, Bezeichnung, Leitung, Kunde in einer Zeile. */
.zweispalter.ist-liste { grid-template-columns: minmax(0, 2.6fr) minmax(250px, 1fr); }
.tabelle.ist-nummern th:first-child { width: 11.5em; }
@media (max-width: 1200px) { .zweispalter.ist-liste { grid-template-columns: 1fr; } }