/* ==========================================================================
   DAS TELEFON IM DASHBOARD (03.10.2026)

   Zwei Orte, eine Karte. Die VERBINDUNG lebt im Gesprächsfenster
   (telefon_apparat.php, .apf) – es überlebt jeden Seitenwechsel. In jeder
   SEITE steht dazu der Lichtkasten (.ap-box, includes/telefon_apparat.php):
   Klingelt es, legt er sich über die Seite; im Gespräch steht er klein am
   Rand (.ist-klein) und lässt sich aufziehen.

   Beide tragen dieselbe Karte: Bühnenfarbe, das Motiv aus Higgsfield
   (assets/bilder/telefon/gespraech-*, Job 9c85ab83-2592-4663-8de6-5bdf27ebc500:
   Bänder formen einen Hörer mit drei Schallbögen), der Name oben, die
   Knöpfe unten auf dem Spiegelboden. Zustände tragen Grün und Rot, nie die
   Hausfarbe (DESIGN.md).
   ========================================================================== */
.ap-box {
    --ap-gut: #1f9d55; --ap-schlecht: #d64545;
    position: fixed; inset: 0; z-index: 1080;
    display: flex; align-items: center; justify-content: center;
    padding: var(--sp-5);
    background: rgba(13, 26, 36, .46);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    animation: ap-schleier .2s ease-out both;
}
.ap-box[hidden], .ap-box [hidden] { display: none !important; }
@keyframes ap-schleier { from { opacity: 0; } to { opacity: 1; } }
.ap-karte {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; align-items: center;
    width: 360px; max-width: 100%; min-height: 536px; padding: 56px var(--sp-5) var(--sp-6, 32px);
    border-radius: 26px;
    background: #03060d;
    box-shadow: 0 30px 80px rgba(5, 12, 18, .55), inset 0 0 0 1px rgba(255, 255, 255, .08);
    color: #fff; text-align: center;
    animation: ap-auf .28s var(--ease-out, ease-out) both;
}
@keyframes ap-auf { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
/* Das Motiv füllt die Karte, unten verankert: oben bleibt es dunkel für den
   Namen, in der Mitte steht der Hörer aus Bändern, die Knöpfe liegen auf dem
   Spiegelboden. */
.ap-ruf-bild, .apf-bild {
    position: absolute; inset: 0; z-index: 0;
    background-image: image-set(
        url("../../bilder/telefon/gespraech-344.webp") 1x,
        url("../../bilder/telefon/gespraech-688.webp") 2x);
    background-repeat: no-repeat; background-size: cover; background-position: 50% 100%;
    pointer-events: none;
}
/* Ein dunkler Saum oben und unten hält Schrift und Knöpfe lesbar. */
.ap-ruf-bild::after, .apf-bild::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(3, 6, 13, .78) 0%, rgba(3, 6, 13, 0) 34%, rgba(3, 6, 13, 0) 62%, rgba(3, 6, 13, .62) 100%);
}
.ap-lage { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); width: 100%; }
/* Die Knöpfe sinken an den Fuß der Karte – der Hörer in der Mitte bleibt frei. */
.ap-lage .ap-ruf-knoepfe { margin-top: auto; padding-top: var(--sp-5); }
.ap-lage .ap-tasten { margin-top: auto; }
.ap-lage .ap-tasten + .ap-ruf-knoepfe { margin-top: var(--sp-4); padding-top: 0; }
.ap-lage .ap-tasten[hidden] + .ap-ruf-knoepfe { margin-top: auto; padding-top: var(--sp-5); }
.ap-lage p { margin: 0; }
.ap-ruf-klein { font-size: var(--fs-4); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.ap-ruf-wer { font-size: 1.9rem; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; text-wrap: balance; }
.ap-ruf-uhr { font-size: 1.15rem; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .78); }
.ap-ruf-knoepfe { display: flex; align-items: center; justify-content: center; gap: var(--sp-5); margin-top: var(--sp-5); }
.ap-rund { display: grid; place-items: center; width: 56px; height: 56px; border: 0; border-radius: 50%; color: #fff; cursor: pointer; transition: transform .12s ease, filter .12s ease; }
.ap-rund.ist-gross { width: 68px; height: 68px; }
.ap-rund:hover { filter: brightness(1.1); transform: scale(1.05); }
.ap-rund.ist-gut { background: var(--ap-gut); animation: ap-ruft 1.6s ease-out infinite; }
.ap-rund.ist-schlecht { background: var(--ap-schlecht); box-shadow: 0 10px 26px color-mix(in srgb, var(--ap-schlecht) 40%, transparent); }
@keyframes ap-ruft {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ap-gut) 60%, transparent); }
    100% { box-shadow: 0 0 0 22px transparent; }
}
.ap-rund svg { width: 26px; height: 26px; }
/* Glas auf der Bühne: Stumm, Tasten, Verkleinern. Gedrückt wird die Fläche hell. */
.ap-glas, .ap-klein-knopf {
    border: 0; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
    transition: background .12s ease;
}
.ap-glas { min-width: 76px; padding: 10px 14px; border-radius: 999px; font-size: var(--fs-5); font-weight: 600; }
.ap-glas:hover, .ap-klein-knopf:hover { background: rgba(255, 255, 255, .22); }
.ap-glas[aria-pressed="true"] { background: #fff; color: var(--stage-ink, #10202c); }
.ap-klein-knopf { position: absolute; top: 14px; right: 14px; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; }
.ap-klein-knopf svg { width: 18px; height: 18px; }
.ap-tasten { display: grid; grid-template-columns: repeat(3, 58px); gap: var(--sp-2); margin-top: var(--sp-2); }
.ap-tasten button { height: 46px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); color: #fff; font-size: 1.1rem; font-weight: 600; cursor: pointer; }
.ap-tasten button:hover { background: rgba(255, 255, 255, .22); }
.ap-meldung { position: relative; z-index: 1; margin: var(--sp-4) 0 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-ctl); background: rgba(255, 255, 255, .1); box-shadow: inset 3px 0 0 var(--ap-schlecht); font-size: var(--fs-5); text-align: left; }

/* ----- Verkleinert: eine schmale Karte am Rand, die Seite ist frei ----- */
.ap-box.ist-klein { inset: auto var(--sp-5) auto auto; top: var(--sp-5); padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; animation: none; }
.ap-box.ist-klein .ap-karte { width: 300px; min-height: 0; padding: var(--sp-4); border-radius: 18px; cursor: pointer; background: linear-gradient(135deg, #0b1a2c 0%, #03060d 100%); }
.ap-box.ist-klein .ap-ruf-knoepfe { padding-top: 0; }
.ap-box.ist-klein .ap-lage { flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2) var(--sp-3); text-align: left; }
.ap-box.ist-klein .ap-ruf-klein, .ap-box.ist-klein .ap-tasten, .ap-box.ist-klein .ap-glas, .ap-box.ist-klein .ap-klein-knopf, .ap-box.ist-klein .ap-ruf-bild { display: none; }
.ap-box.ist-klein .ap-ruf-uhr { align-self: center; }
.ap-box.ist-klein .ap-ruf-wer { flex: 1 1 100%; font-size: 1.05rem; }
.ap-box.ist-klein .ap-ruf-knoepfe { margin: 0; }
.ap-box.ist-klein .ap-rund.ist-gross { width: 40px; height: 40px; }
.ap-box.ist-klein .ap-rund svg { width: 18px; height: 18px; }

/* ----- Der Zustand im Telefon-Fenster: ein Punkt und ein Satz unter dem Hörer ----- */
.ap-zeile { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); margin: 0; font-size: var(--fs-4); color: var(--brand-quiet); }
.ap-punkt { --ap-gut: #1f9d55; --ap-schlecht: #d64545; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--brand-quiet); }
.ap-punkt.ist-an { background: var(--ap-gut); animation: ap-puls 2s ease-out infinite; }
.ap-punkt.ist-aus { background: var(--ap-schlecht); }
@keyframes ap-puls {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ap-gut) 55%, transparent); }
    100% { box-shadow: 0 0 0 8px transparent; }
}
/* ----- Das Telefon ist aus: ein Knopf am Rand schaltet es ein ----- */
.ap-aus { position: fixed; left: 50%; bottom: var(--sp-4); z-index: 1040; transform: translateX(-50%); display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--stage-ink, #10202c) 90%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(5, 12, 18, .3); }
.ap-aus[hidden] { display: none; }
.ap-aus button { display: inline-flex; align-items: center; gap: var(--sp-2); border: 0; border-radius: 999px; background: none; color: #fff; font-size: var(--fs-5); font-weight: 600; cursor: pointer; }
.ap-aus-knopf { padding: 8px 14px; }
.ap-aus-weg { padding: 8px; opacity: .6; }
.ap-aus button:hover { background: rgba(255, 255, 255, .14); opacity: 1; }
.ap-aus svg { width: 16px; height: 16px; }
/* „… – die Telefon-App wählt" nach der Übergabe (04.10.2026): derselbe Streifen, mit Satz davor. */
.ap-uebergabe { gap: var(--sp-2); padding-left: var(--sp-4); color: #fff; font-size: var(--fs-5); }
.ap-uebergabe .ap-aus-knopf { background: rgba(255, 255, 255, .14); }

/* ----- Das Gesprächsfenster: die Karte ist das ganze Fenster ----- */
.apf-seite { margin: 0; background: #03060d; }
.apf { --ap-gut: #1f9d55; --ap-schlecht: #d64545; position: relative; display: flex; flex-direction: column; align-items: center; min-height: 100vh; padding: var(--sp-4) var(--sp-5) var(--sp-6, 32px); overflow: hidden; color: #fff; text-align: center; }
.apf [hidden] { display: none !important; }
.apf-kopf { position: relative; z-index: 1; align-self: stretch; display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-6, 32px); font-size: var(--fs-4); color: rgba(255, 255, 255, .66); text-align: left; }
.apf-kopf strong { color: #fff; font-weight: 600; margin-right: 4px; }
.apf .ap-meldung { margin-top: var(--sp-3); }

/* ----- Das Telefon als eigene App (04.10.2026) -----
   Der Fuß der Karte steht nur in Ruhe: Im Browserfenster bietet er das
   Installieren an, in der App sagt er einmal, wie sie mit dem Rechner startet.
   Klingelt es oder läuft ein Gespräch, gehört der Platz den Knöpfen. */
.apf-fuss { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); width: 100%; margin-top: var(--sp-4); }
.apf[data-lage="klingelt"] .apf-fuss, .apf[data-lage="gespraech"] .apf-fuss { display: none; }
.apf-installieren { display: inline-flex; align-items: center; gap: var(--sp-2); }
.apf-installieren svg { width: 16px; height: 16px; }
.apf-hinweis { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-4); border-radius: 18px; background: rgba(8, 16, 30, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); font-size: var(--fs-5); line-height: 1.45; text-align: left; }
.apf-hinweis p { margin: 0; color: rgba(255, 255, 255, .8); }
.apf-hinweis strong { color: #fff; font-weight: 600; }
.apf-hinweis .ap-glas { align-self: flex-end; margin-top: var(--sp-2); }
.apf-leise { border: 0; background: none; padding: 4px 8px; border-radius: 999px; color: rgba(255, 255, 255, .62); font-size: var(--fs-4); cursor: pointer; }
.apf-leise:hover { background: rgba(255, 255, 255, .1); color: #fff; }
a.ap-glas { display: inline-block; text-decoration: none; }
.apf-adresse { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); align-self: stretch; }
.apf-adresse code { align-self: stretch; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .08); color: #fff; font-size: var(--fs-4); overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.apf-adresse .ap-glas { align-self: flex-start; margin-top: 0; }
.apf [data-ap-anmelden] .ap-ruf-uhr, .apf [data-ap-bild="doppelt"] .ap-ruf-uhr, .apf [data-ap-bild="ruhe"] .ap-ruf-uhr, .apf [data-ap-bild="aus"] .ap-ruf-uhr { max-width: 30ch; font-size: 1rem; line-height: 1.45; text-wrap: balance; }
.apf [data-ap-anmelden] .ap-ruf-knoepfe { gap: var(--sp-3); }
/* Die Karte ist genau so hoch wie das Fenster – mit dem Innenabstand obendrauf
   rutschten die Knöpfe unter den Rand, und das Fenster rollte. In einem
   breiten Reiter („App herunterladen") bleibt sie schmal und steht mittig. */
.apf { box-sizing: border-box; max-width: 460px; margin: 0 auto; }
/* ----- Kopf-Knopf und Einstellungsblatt (04.10.2026) -----
   Der Knopf rechts im Kopf ist Glas wie Stumm und Tasten. Das Blatt legt sich
   über die ganze Karte: drei Auswahlfelder für Mikrofon, Kopfhörer und
   Klingel – in der App darunter Autostart und Abmelden. */
.apf-kopf-knopf { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); color: #fff; cursor: pointer; transition: background .12s ease; }
.apf-kopf-knopf:hover, .apf-kopf-knopf[aria-expanded="true"] { background: rgba(255, 255, 255, .24); }
.apf-kopf-knopf svg { width: 17px; height: 17px; }
/* ----- Die Kopfzeile in der obersten Reihe (04.10.2026, Marc) -----
   Links der Zustand – in der App ein Knopf, der das Blatt mit Autostart und
   Abmelden öffnet. Rechts drei kleine runde Knöpfe: Mikrofon, Kopfhörer,
   Klingel. Jeder klappt unter sich die Liste seiner Geräte auf. */
.apf-kopf { z-index: 5; }
.apf-status { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; margin: 0 auto 0 0; padding: 4px 8px 4px 0; border: 0; border-radius: 999px; background: none; color: inherit; font: inherit; text-align: left; }
button.apf-status { cursor: pointer; padding-left: 8px; margin-left: -8px; }
button.apf-status:hover, button.apf-status[aria-expanded="true"] { background: rgba(255, 255, 255, .1); }
.apf-ton { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.apf-ton .apf-kopf-knopf { width: 32px; height: 32px; }
.apf-ton .apf-kopf-knopf svg { width: 16px; height: 16px; }
.apf-ton .apf-kopf-knopf.ist-offen { background: #fff; color: var(--stage-ink, #10202c); box-shadow: none; }
.apf-ton-liste { position: absolute; z-index: 9; top: calc(100% - 2px); right: var(--sp-3); width: min(290px, calc(100% - 24px)); max-height: 270px; overflow-y: auto; padding: 6px; border-radius: 16px; background: rgba(8, 16, 30, .97); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 18px 44px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .14); color: #fff; text-align: left; animation: ap-schleier .12s ease-out both; }
.apf-ton-liste[hidden] { display: none; }
.apf-ton-kopf { padding: 8px 10px 6px; font-size: var(--fs-3); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.apf-ton-liste button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: none; color: #fff; font: inherit; font-size: var(--fs-5); line-height: 1.3; text-align: left; cursor: pointer; }
.apf-ton-liste button:hover, .apf-ton-liste button:focus-visible { background: rgba(255, 255, 255, .12); outline: none; }
.apf-ton-liste button .haken { flex: none; width: 16px; color: #7ee2a8; font-weight: 700; }
.apf-ton-liste button span:last-child { min-width: 0; overflow-wrap: anywhere; }
.apf-ton-hinweis { margin: 4px 10px 8px; font-size: var(--fs-3); line-height: 1.4; color: rgba(255, 255, 255, .55); }

.apf-blatt { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5) var(--sp-5); overflow-y: auto; background: rgba(3, 6, 13, .93); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); color: #fff; text-align: left; animation: ap-schleier .16s ease-out both; }
.apf-blatt-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); }
.apf-blatt-kopf h2 { margin: 0; font-size: 1.25rem; font-weight: 600; }
.apf-feld { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: var(--fs-4); color: rgba(255, 255, 255, .68); }
.apf-feld select { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; padding: 0 38px 0 14px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); color: #fff; font: inherit; font-size: 1rem; text-overflow: ellipsis; cursor: pointer; }
.apf-feld select:hover { background-color: rgba(255, 255, 255, .16); }
.apf-feld select:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 2px; }
.apf-feld select option { color: #10202c; background: #fff; }
.apf-blatt-klein { margin: 0; font-size: var(--fs-4); line-height: 1.45; color: rgba(255, 255, 255, .6); }
.apf-blatt-knoepfe { display: flex; gap: var(--sp-3); }
.apf-schritt { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-2) 0 0; font-size: 1rem; }
.apf-schritt strong { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .14); font-size: var(--fs-4); }
.ap-glas.ist-hell { background: #fff; color: var(--stage-ink, #10202c); }
.ap-glas.ist-hell:hover { background: #e9eef4; }
.apf-blatt .apf-adresse code + code { letter-spacing: .04em; }
/* Der Schalter „Mit dem Rechner starten" im Programm. */
.apf-schalter { display: flex; align-items: center; gap: var(--sp-3); margin: 0; font-size: 1rem; cursor: pointer; }
.apf-schalter[hidden] { display: none; }
.apf-schalter input { -webkit-appearance: none; appearance: none; flex: none; position: relative; width: 44px; height: 26px; margin: 0; border-radius: 999px; background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); cursor: pointer; transition: background .15s ease; }
.apf-schalter input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s ease; }
.apf-schalter input:checked { background: var(--ap-gut, #1f9d55); }
.apf-schalter input:checked::after { transform: translateX(18px); }
.apf-schalter input:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 2px; }
/* Das Blatt allein im kleinen Fenster („App herunterladen"): deckend, damit von der Karte dahinter nichts durchscheint. */
.apf-blatt.ist-allein { background: radial-gradient(120% 80% at 50% 100%, #0b2a52 0%, #03060d 62%); animation: none; }
.apf-fuss.ist-im-blatt { margin-top: auto; padding-top: var(--sp-4); align-items: stretch; }
.apf-fuss.ist-im-blatt .apf-leise { align-self: center; }

/* ----- Das ganze Telefon in der App (04.10.2026) -----
   In Ruhe ist die App der Wählblock des Dashboards (.tw-*, dasselbe Markup) –
   aber in der Optik der App: dunkel, Glas statt weißer Karte. Das Markup
   bleibt, nur die Farben des Hauses werden in diesem Kasten umgestellt
   (--brand-*); so folgt jede Fläche des Wählblocks von selbst.

   VERDICHTET (Marc, abends): Die Bühne des Dashboard-Fensters („Telefon /
   Anrufen" mit dem Hörer) fällt hier weg – die App IST das Telefon, der Titel
   sagte es zum zweiten Mal. Ihr Knopf „Aufträge" rückt in die Kopfzeile neben
   die Einstellungen. Tasten und Abstände sind eine Nummer kleiner.

   DIE AUFTRÄGE stehen RECHTS DANEBEN: Das Fenster wird breiter
   (assets/js/telefon-apparat.js), die Schublade fährt wie im Dashboard heraus.
   Lässt sich das Fenster nicht verbreitern, legt sie sich über den Wählblock. */
.apf.ist-voll { max-width: none; }
.apf.ist-voll[data-lage="ruhe"] { padding: 0; align-items: stretch; text-align: left; }
/* DAS TELEFON STEHT LINKS, 360 PUNKTE BREIT (Marc, abends): Das Fenster hat
   eine feste Größe (assets/js/telefon-apparat.js). Telefon und Kopfzeile
   stehen am linken Rand; rechts daneben fährt die Schublade auf. Das
   Telefon bleibt dabei, wo es ist. */
.apf.ist-voll[data-lage="ruhe"] .apf-kopf { margin: 0; padding: 10px var(--sp-4) 4px; width: 360px; box-sizing: border-box; }
.apf.ist-voll[data-lage="ruhe"] .apf-bild { opacity: .16; }
.apf.ist-voll .apf-waehler { flex: 1; display: flex; align-items: stretch; gap: 0; min-height: 0; }
.apf.ist-voll .tw-overlay { position: static; inset: auto; z-index: auto; display: flex; align-items: stretch; flex: 1; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible; animation: none; }
.apf.ist-voll .tw-satz {
    --brand-surface: #0b1626;
    --brand-text: #fff;
    --brand-quiet: rgba(255, 255, 255, .62);
    --brand-row: rgba(255, 255, 255, .09);
    --brand-border: rgba(255, 255, 255, .14);
    --btn-kante: rgba(255, 255, 255, .16);
    --btn-leucht-tief: #9ccbff;
    --blau-hell: rgba(120, 175, 255, .2);
    flex: 1; display: flex; justify-content: flex-start; margin: 0; max-width: none; animation: none; color: #fff; text-align: left;
}
.apf.ist-voll .tw-dialog { position: relative; flex: 0 0 360px; width: 360px; max-width: 100%; max-height: none; display: flex; flex-direction: column; overflow: visible; background: transparent; border-radius: 0; box-shadow: none; }
/* Die Bühne und ihr Knopf „Aufträge" entfallen – an ihrer Stelle steht das Fähnchen. */
.apf.ist-voll .tw-kopf { display: none; }
/* Der Inhalt als ein Block, senkrecht mittig; der Hörer rückt dicht unter die Tasten. */
.apf.ist-voll .tw-body { flex: 1; justify-content: center; align-items: center; gap: 0.5rem; padding: 0.2rem 1.1rem 1.1rem; user-select: none; -webkit-user-select: none; }
.apf.ist-voll .tw-body > * { width: 100%; box-sizing: border-box; }
.apf.ist-voll .tw-body > .tw-wege { width: auto; }
.apf.ist-voll .tw-body > .tw-tasten { width: auto; }
.apf.ist-voll .tw-body > .tw-hoerer-zeile { width: auto; margin-top: 0.15rem; padding-top: 0; }
.apf.ist-voll .tw-tasten { justify-content: center; }
/* Eine Nummer kleiner. */
.apf.ist-voll .tw-suche input { height: 36px; }
.apf.ist-voll .tw-nummer { height: 2.2rem; font-size: 1.5rem; color: #fff; background: transparent; }
/* Die Spalten so breit wie die Tasten: In den 68-Pixel-Spalten des Dashboards saßen die Tasten links, der Block stand dadurch außermittig. */
.apf.ist-voll .tw-tasten { grid-template-columns: repeat(3, 48px); justify-items: center; gap: 5px 16px; }
.apf.ist-voll .tw-nummer { box-sizing: border-box; width: 100%; max-width: 100%; text-align: center; }
.apf.ist-voll .tw-taste { width: 48px; height: 48px; color: #fff; }
.apf.ist-voll .tw-taste-ziffer { font-size: 1.25rem; }
.apf.ist-voll .tw-hoerer { width: 54px; height: 54px; }
.apf.ist-voll .tw-hoerer svg { width: 24px; height: 24px; }
/* Der Umschalter „Selbst / Assistent": kleiner, kein hoher Balken mehr. */
.apf.ist-voll .tw-wege { height: 26px; padding: 2px; }
.apf.ist-voll .tw-wege button { height: 22px; padding: 0 0.7rem; font-size: var(--fs-3); }
/* Was im Dashboard helle Fläche ist, wird hier Glas. */
.apf.ist-voll .tw-suche input, .apf.ist-voll .form-control { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); color: #fff; }
.apf.ist-voll .tw-suche input::placeholder, .apf.ist-voll .form-control::placeholder, .apf.ist-voll .tw-nummer::placeholder { color: rgba(255, 255, 255, .42); }
.apf.ist-voll .tw-suche svg { color: rgba(255, 255, 255, .55); }
.apf.ist-voll .cal-seg { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.apf.ist-voll .cal-seg button { color: rgba(255, 255, 255, .7); }
.apf.ist-voll .cal-seg button.active { background: #fff; color: var(--stage-ink, #10202c); }
.apf.ist-voll .tw-stand, .apf.ist-voll .tw-auftrag-wahl { background: rgba(255, 255, 255, .08); color: #fff; }
.apf.ist-voll .btn-outline-secondary { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #fff; }
.apf.ist-voll .btn-outline-secondary:hover { background: rgba(255, 255, 255, .18); }
.apf.ist-voll .btn-link { color: #9ccbff; }
.apf.ist-voll .cal-iconbtn { color: rgba(255, 255, 255, .75); }
.apf.ist-voll .cal-iconbtn:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* Die Schublade rechts daneben: ein Feld derselben Höhe, durch eine feine Linie getrennt. */
/* Sie beginnt ganz oben im Fenster, auf Höhe der Kopfzeile – die Kopfzeile selbst bleibt über dem Wählblock. */
.apf.ist-voll .tw-lade { margin-top: -48px; }
.apf.ist-voll .tw-satz.ist-offen .tw-lade { width: 320px; }
.apf.ist-voll .tw-lade-innen { width: 320px; max-height: none; box-sizing: border-box; border-radius: 0; border-left: 1px solid rgba(255, 255, 255, .12); background: rgba(11, 22, 38, .82); box-shadow: none; }
.apf.ist-voll .tw-lade-eintrag:hover { background: rgba(255, 255, 255, .07); }
/* Zu schmal für beides nebeneinander: Die Schublade legt sich über den Wählblock. */
@media (max-width: 599px) {
    .apf.ist-voll .tw-lade { position: absolute; inset: 0; z-index: 4; margin-top: 0; opacity: 1; transform: none; transition: none; display: none; }
    .apf.ist-voll .tw-satz.ist-offen .tw-lade { display: flex; width: 100%; }
    .apf.ist-voll .tw-lade-innen { width: 100%; border-left: 0; background: #0b1626; }
}

/* ==========================================================================
   DAS BLAU DES HAUSES (04.10.2026, Marc)

   Was in der App bisher WEISS war – der gewählte Weg („Selbst / Assistent"),
   der offene Ton-Knopf, „Stumm" und „Tasten" im
   Gespräch, „Mit der Telefon-App verbinden" – trägt jetzt dasselbe Blau wie
   jeder Hauptknopf im Dashboard (.btn-primary in 01-basis.css): Verlauf von
   --btn-leucht nach --btn-leucht-dark, weiße Schrift, eine Lichtkante oben.
   Unter dem Zeiger wird der Verlauf eine Stufe tiefer. Grün und Rot bleiben
   den Zuständen (Annehmen, Auflegen) – sie hängen nie an der Hausfarbe.
   ========================================================================== */
.ap-glas[aria-pressed="true"],
.ap-glas.ist-hell,
.apf-ton .apf-kopf-knopf.ist-offen,
.apf.ist-voll .cal-seg button.active {
    background-color: var(--btn-leucht-dark);
    background-image: linear-gradient(170deg, var(--btn-leucht), var(--btn-leucht-dark));
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), 0 1px 2px rgba(0, 0, 0, .28);
}
.ap-glas[aria-pressed="true"]:hover,
.ap-glas.ist-hell:hover,
.apf-ton .apf-kopf-knopf.ist-offen:hover,
.apf.ist-voll .cal-seg button.active:hover {
    background-color: var(--btn-leucht-dark);
    background-image: linear-gradient(170deg, var(--btn-leucht-dark), var(--btn-leucht-tief));
    color: #fff;
}
/* Der Haken in den Geräte-Listen: im Leuchtblau statt im Grün – es ist eine Wahl, kein Zustand. */
.apf-ton-liste button .haken { color: var(--btn-leucht); }

/* In der App ist die Karte das Fenster: nichts rollt, nichts lässt sich markieren. */
.apf.ist-app { user-select: none; -webkit-user-select: none; }

@media (prefers-reduced-motion: reduce) {
    .ap-box, .ap-karte, .ap-rund.ist-gut, .ap-punkt.ist-an { animation: none; }
}

/* ----- Das Telefon-Fenster der Seite, kompakter (03.10.2026) -----
   Auf einem Notebook stand es mit Bühne, Suche, Nummer, zwölf Tasten, Hörer
   und Zustandszeile bis an den unteren Rand. Die Bühne wird flacher, Tasten
   und Hörer eine Nummer kleiner, die Abstände enger – rund 150 Pixel weniger,
   ohne dass etwas wegfällt. Steht hier, hinter 04-arbeitsflaechen.css, damit
   die Maße dort als Ausgangswert lesbar bleiben. */
.tw-overlay { padding-top: 2vh; padding-bottom: 2vh; }
.tw-kopf { min-height: 108px; padding-top: 0.7rem; padding-bottom: 0.75rem; }
.tw-kopf-bild { width: 116px; bottom: -18px; }
.tw-kopf-titel { font-size: 1.35rem; }
.tw-body { gap: 0.55rem; padding: 0.75rem 1.15rem 0.9rem; }
.tw-nummer { height: 2.6rem; font-size: 1.7rem; }
.tw-tasten { gap: 6px 18px; }
.tw-taste { width: 52px; height: 52px; }
.tw-taste-ziffer { font-size: 1.35rem; }
.tw-taste small { margin-top: 1px; }
.tw-hoerer { width: 58px; height: 58px; }
.tw-hoerer svg { width: 26px; height: 26px; }
.tw-hoerer-zeile { gap: 0.25rem; margin-top: 0; }
/* Die Worte der Bühne beginnen oben statt unten – sonst hält der Platz über
   ihnen die Bühne hoch. */
.tw-kopf-wort { margin-top: 0; padding-top: 0; align-self: flex-start; }
.tw-kopf-unter { margin-top: 0.2rem; }
.tw-stand { padding: 0.5rem 0.75rem; }

/* ==========================================================================
   KÖPFE SCHRUMPFEN NICHT (03.10.2026)

   Marc im Telefonbereich: „manchmal rückt oben beim Namen die Zeile ein und
   man kann sie nicht mehr lesen." Die Kopfkarte eines Anrufs steht in einer
   Spalte mit fester Höhe (.ml-read-pane, flex-direction: column). Ein
   Flex-Kind darf schrumpfen – normalerweise nur bis zur Höhe seines Inhalts.
   Trägt es aber `overflow: hidden` (der Kopf des Anrufs tut das seit der
   Telefonschnur), gilt diese Untergrenze nicht mehr: Wird der Inhalt darunter
   lang – eine Abschrift, ein Auftrag –, drückt er den Kopf zusammen, und die
   zweite Zeile verschwindet. „Manchmal", weil es von der Länge darunter abhängt.

   Dasselbe Muster überall, wo ein Kopf oder eine Bühne mit abgeschnittenem
   Überlauf in einer Spalte steht: das Telefon-Fenster (dort fehlte bei wenig
   Platz der Titel „Anrufen"), die Bühnen der Fenster und Einrichtungsseiten.
   Geprüft wurden alle Regeln mit `overflow: hidden` in Köpfen, Bühnen und
   Leisten; diese hier konnten schrumpfen. Rollen darf in der Leseansicht nur
   ihr Inhalt (.ml-read-inhalt).
   ========================================================================== */
.ml-read-pane > .ml-read-head,
.tw-kopf,
.fw-buehne,
.zs-buehne,
.bt-vs-buehne,
.ex-titelbild,
.ei-buehne,
.um-kpi-leiste { flex-shrink: 0; }