/* ==========================================================================
   TELEFON → ADMINISTRATION (telefon_anlage.php, 03.10.2026)

   Das Fenster dieses Kunden in die zentrale Telefonanlage. Die Seite baut aus
   dem, was das Haus schon hat – Seitenkopf, Segmentschalter, Kennzahlkacheln,
   Karten, die Knopffamilie. Eigen sind nur vier Dinge, alle mit `ta-`:

     .ta-liste / .ta-zeile   die Zeile für Nebenstellen, Regeln, Zeitfenster
                             und Gespräche – gebaut wie .ts-zeile der Anrufserie:
                             rahmenlos, 3px Fuge, konzentrischer Radius, der
                             Zustand als Balken links in den fünf Zeilenfarben
     .ta-wahl / .ta-tage     Radiokarten und Wochentags-Chips: Fläche erst
                             unter dem Zeiger, gewählt in --blau-hell
     .ta-woche               die Woche als Bahn: sieben Zeilen, 24 Stunden
     .ta-saeulen             Säulen je Tag und je Stunde

   WAS WELCHE FARBE TRÄGT: Die Fenster in der Wochenbahn und die Säulen
   BERICHTEN, also Blaugrau (--btn-blue). Leuchtblau ist die Linie „jetzt" in
   der Bahn (die eigene Position, wie auf der Tagesachse der Startseite) und
   alles Gewählte. „Der Assistent nimmt gerade ab" ist ein Zustand und trägt
   das Signalgrün wie der Hörer im Telefonfenster, nie die Hausfarbe.
   ========================================================================== */

.ta-seite .kpi-grid { margin-bottom: var(--sp-6); }
.ta-unterleiste { margin-bottom: var(--sp-5); }

/* ---------- Die Zeile ---------- */

.ta-liste {
    margin: 0;
    padding: 3px;
    list-style: none;
    border: 1px solid var(--brand-border);
    border-radius: var(--r-card);
    background: var(--brand-surface);
    box-shadow: var(--sh-1);
}
/* In einer Karte steht die Liste ohne eigenen Rahmen – die Karte trägt ihn schon. */
.ta-liste.ist-flach {
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
}
.ta-zeile {
    position: relative;
    display: grid;
    grid-template-columns: 4.2em minmax(0, 1fr) auto;
    gap: 0.25rem 0.9rem;
    align-items: center;
    margin: 3px 6px;
    padding: 8px 10px 9px 16px;
    border-radius: calc(var(--r-card) - 3px);
    font-size: var(--fs-6);
    transition: background-color var(--t-fast) var(--ease-out);
}
.ta-liste.ist-flach .ta-zeile { margin: 3px 0; }
.ta-zeile:hover { background: var(--brand-row); }
.ta-zeile::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 999px;
    background: var(--kante, transparent);
}
.ta-zeile.is-neu    { --kante: var(--zeile-neu); }
.ta-zeile.is-fehler { --kante: var(--zeile-fehler); }
.ta-zeile.is-offen  {
    --kante: var(--zeile-offen);
    background: color-mix(in srgb, var(--zeile-offen) var(--zeile-ton), var(--brand-surface));
}
/* Abgeschaltet: steht da, aber tritt zurück. */
.ta-zeile.ist-aus .ta-durchwahl,
.ta-zeile.ist-aus .ta-name { color: var(--brand-faint); }

.ta-durchwahl {
    font-family: 'IBM Plex Sans', sans-serif;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--btn-blue-dark);
}
.ta-name {
    min-width: 0;
    font-weight: 600;
    color: var(--brand-text);
}
.ta-name small {
    display: block;
    font-weight: 400;
    font-size: var(--fs-4);
    color: var(--brand-quiet);
}
.ta-griffe {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.ta-griffe form { margin: 0; }

/* ---------- Die Anrufliste: fünf Spalten, die Abschrift darunter ---------- */

.ta-anrufe .ta-zeile { grid-template-columns: 6.6em minmax(0, 1fr) 4em 8.5em; }
.ta-zeit {
    font-family: 'IBM Plex Sans', sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-5);
    color: var(--brand-quiet);
}
.ta-zeit b { font-weight: 600; color: var(--brand-text); }
.ta-richtung {
    display: inline-block;
    width: 1.2em;
    color: var(--brand-faint);
}
.ta-anrufe .ta-name small { padding-left: 1.2em; }
.ta-dauer {
    font-family: 'IBM Plex Sans', sans-serif;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--brand-quiet);
}
.ta-ergebnis { color: var(--brand-quiet); }
.ta-zeile.is-fehler .ta-ergebnis { color: var(--btn-red-text); font-weight: 600; }
.ta-abschrift {
    grid-column: 2 / -1;
    padding-left: 1.2em;
    font-size: var(--fs-5);
}
.ta-abschrift summary {
    cursor: pointer;
    color: var(--btn-leucht-tief);
    font-weight: 600;
}
.ta-abschrift p {
    margin: var(--sp-2) 0 var(--sp-1);
    max-width: 68ch;
    color: var(--brand-text);
    line-height: 1.5;
}

/* ---------- Übersicht ---------- */

.ta-jetzt-stand {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
}
.ta-jetzt-stand.ist-klein {
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-5);
    font-weight: 500;
    color: var(--brand-quiet);
}
.ta-punkt {
    flex: none;
    width: 10px;
    height: 10px;
    margin-top: 0.4em;
    border-radius: 50%;
    background: var(--brand-border-strong, var(--brand-border));
}
.ta-jetzt-stand.ist-klein .ta-punkt { width: 8px; height: 8px; margin-top: 0; }
.ta-jetzt-stand.ist-an .ta-punkt {
    background: var(--btn-green-signal);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--btn-green-signal) 22%, transparent);
}
.ta-nummern {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ta-nummern li {
    display: flex;
    align-items: baseline;
    gap: var(--sp-4);
    padding: var(--sp-2) 0;
    font-size: var(--fs-6);
}
.ta-nummern b {
    flex: none;
    min-width: 9.5em;
    font-family: 'IBM Plex Sans', sans-serif;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.ta-nummern span { color: var(--brand-quiet); }
.ta-kurz {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-5);
    font-size: var(--fs-5);
    color: var(--brand-quiet);
}
.ta-kurz b {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 600;
    color: var(--btn-blue-dark);
}

/* ---------- Radiokarten: wann der Assistent abnimmt ---------- */

.ta-wahl {
    display: grid;
    gap: 3px;
}
.ta-wahl label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 var(--sp-4);
    padding: var(--sp-4) var(--sp-4);
    border-radius: calc(var(--r-card) - 3px);
    cursor: pointer;
    transition: background-color var(--t-fast) var(--ease-out);
}
.ta-wahl label:hover { background: var(--brand-row); }
.ta-wahl input {
    grid-row: 1 / 3;
    margin-top: 0.25em;
    accent-color: var(--btn-leucht-dark);
}
.ta-wahl b { font-weight: 600; }
.ta-wahl span {
    font-size: var(--fs-5);
    color: var(--brand-quiet);
}
.ta-wahl label:has(input:checked) { background: var(--blau-hell); }
.ta-wahl label:has(input:checked) b { color: var(--btn-leucht-tief); }
.ta-wahl label:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(0, 162, 239, 0.25); }

/* ---------- Die Woche als Bahn ---------- */

.ta-woche {
    display: grid;
    gap: 6px;
}
.ta-skala,
.ta-tag {
    display: grid;
    grid-template-columns: 2.2em minmax(0, 1fr);
    align-items: center;
    gap: var(--sp-3);
}
.ta-skala {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: var(--fs-3);
    color: var(--brand-quiet);
}
/* Die fünf Marken 0, 6, 12, 18, 24 stehen an ihren Stellen, die äußeren bündig. */
.ta-skala > div { position: relative; height: 1.1em; }
.ta-skala span { position: absolute; top: 0; transform: translateX(-50%); }
.ta-skala span:nth-child(1) { left: 0; transform: none; }
.ta-skala span:nth-child(2) { left: 25%; }
.ta-skala span:nth-child(3) { left: 50%; }
.ta-skala span:nth-child(4) { left: 75%; }
.ta-skala span:nth-child(5) { left: 100%; transform: translateX(-100%); }
.ta-tag b {
    font-size: var(--fs-5);
    font-weight: 500;
    color: var(--brand-quiet);
}
.ta-tag.ist-heute b { font-weight: 700; color: var(--brand-text); }
.ta-tagbahn {
    position: relative;
    height: 18px;
    border-radius: 5px;
    background:
        linear-gradient(to right, transparent calc(25% - 0.5px), var(--brand-surface) calc(25% - 0.5px), var(--brand-surface) calc(25% + 0.5px), transparent calc(25% + 0.5px)),
        linear-gradient(to right, transparent calc(50% - 0.5px), var(--brand-surface) calc(50% - 0.5px), var(--brand-surface) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
        linear-gradient(to right, transparent calc(75% - 0.5px), var(--brand-surface) calc(75% - 0.5px), var(--brand-surface) calc(75% + 0.5px), transparent calc(75% + 0.5px)),
        var(--seg-bahn);
    overflow: hidden;
}
.ta-tagbahn i {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--btn-blue);
}
.ta-tagbahn u {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    background: var(--btn-leucht);
    text-decoration: none;
}

/* ---------- Zeitfenster eintragen ---------- */

.ta-tage {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}
.ta-tage input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.ta-tage span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 34px;
    padding: 0 var(--sp-3);
    border-radius: var(--r-ctl);
    background: var(--btn-gray-bg-hover, var(--brand-row));
    font-size: var(--fs-6);
    font-weight: 600;
    color: var(--brand-quiet);
    cursor: pointer;
    transition: background-color var(--t-fast) var(--ease-out), transform 160ms var(--ease-out);
}
.ta-tage label:hover span { background: var(--blau-hell); color: var(--btn-leucht-tief); }
.ta-tage label:active span { transform: scale(0.97); }
.ta-tage input:checked + span {
    background: var(--blau-hell);
    color: var(--btn-leucht-tief);
    box-shadow: inset 0 0 0 1.5px var(--btn-leucht);
}
.ta-tage input:focus-visible + span { box-shadow: 0 0 0 3px rgba(0, 162, 239, 0.25); }
.ta-zeitfelder {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--sp-4);
}
.ta-zeitfelder label {
    display: grid;
    gap: var(--sp-1);
    font-size: var(--fs-5);
    font-weight: 500;
    color: var(--brand-quiet);
}
.ta-zeitfelder input { width: 8.2em; }

/* ---------- Säulen ---------- */

.ta-saeulen {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 170px;
    padding-bottom: 1.4rem;
}
.ta-saeulen.ist-dicht { gap: 2px; }
.ta-saeulen.ist-stunden { height: 130px; }
.ta-saeule {
    position: relative;
    flex: 1 1 0;
    display: flex;
    align-items: flex-end;
    height: 100%;
    min-width: 0;
    border-radius: 4px 4px 0 0;
}
.ta-saeule:hover { background: var(--brand-row); }
.ta-saeule > span {
    position: relative;
    display: block;
    width: 100%;
    min-height: 2px;
    border-radius: 3px 3px 0 0;
    background: var(--btn-blue);
    overflow: hidden;
}
/* Der verpasste Anteil sitzt oben in der Säule. */
.ta-saeule > span > i {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: var(--btn-red-signal, var(--btn-red-text));
}
.ta-saeule small {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: var(--fs-2);
    color: var(--brand-quiet);
    white-space: nowrap;
}
.ta-legende {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-4);
    font-weight: 400;
    color: var(--brand-quiet);
}
.ta-legende i {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--btn-blue);
}
.ta-legende i.ist-verpasst {
    margin-left: var(--sp-3);
    background: var(--btn-red-signal, var(--btn-red-text));
}

@media (max-width: 700px) {
    .ta-anrufe .ta-zeile { grid-template-columns: 5.6em minmax(0, 1fr) 3.4em; }
    .ta-ergebnis { grid-column: 2 / -1; font-size: var(--fs-4); }
    .ta-zeile { grid-template-columns: 3.4em minmax(0, 1fr); }
    .ta-griffe { grid-column: 2 / -1; }
}

/* ---------- Zugangsdaten fürs Telefon: zugeklappt an der Nebenstelle ---------- */

/* Der QR-Code für Groundwire: dunkle Punkte auf weißem Grund, auch im dunklen
   Farbschema – eine Kamera liest nichts anderes. */
.ta-gw { display: flex; align-items: center; gap: var(--sp-4); margin: var(--sp-3) 0 var(--sp-1); }
.ta-gw-bild { flex: none; width: 168px; padding: 6px; border-radius: 12px; background: #fff; color: #000; }
.ta-gw-bild svg { display: block; width: 100%; height: auto; }
.ta-gw p { margin: 0; max-width: 34ch; line-height: 1.45; color: var(--brand-quiet); }
.ta-gw p strong { color: var(--brand-text); font-weight: 600; }

.ta-zugang {
    margin-top: var(--sp-1);
    font-size: var(--fs-4);
    font-weight: 400;
}
.ta-zugang summary {
    cursor: pointer;
    color: var(--btn-leucht-tief);
    font-weight: 500;
}
.ta-zugang dl {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px var(--sp-4);
    margin: var(--sp-2) 0 var(--sp-1);
}
.ta-zugang dt { font-weight: 400; color: var(--brand-quiet); }
.ta-zugang dd {
    margin: 0;
    font-family: 'IBM Plex Sans', monospace;
    color: var(--brand-text);
    user-select: all;
    overflow-wrap: anywhere;
}

/* ---------- Die Bühne der Administration (03.10.2026) ---------- */

/* Dieselbe Bühne wie bei Assistent und Chatbot (.mp-buehne, 16-hotel.css);
   hier nur, was die vierte Kachel braucht: ein Wort statt einer Zahl, davor
   der Punkt, der grün steht, wenn der Assistent gerade abnimmt. */
.ta-buehne { margin-bottom: var(--sp-5); }
.ta-buehne a.mp-kachel { color: inherit; text-decoration: none; }
.ta-wer {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    font-size: var(--fs-9) !important;
}
.ta-wer .ta-punkt { margin-top: 0; }
.ta-zeile .ta-name small svg { width: 12px; height: 12px; vertical-align: -1px; }
/* Der Punkt in der Bühne steht für sich (kein .ta-jetzt-stand darum) und trägt seinen Zustand selbst. */
.ta-punkt.ist-an {
    background: var(--btn-green-signal);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--btn-green-signal) 22%, transparent);
}