/* Bürokratopia – Telefonzentrale (0.16.0). Präfix s-telefonzentrale-, nur Variablen aus app.css.
   Ausgelegt auf 340 px im Dialog: eine Sprechblase, darunter drei Knöpfe untereinander, jeder ≥ 56 px hoch. */
.s-telefonzentrale-start { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 18px 8px; border: 1px dashed var(--linie2); border-radius: var(--radius-k); background: var(--flaeche2); }
.s-telefonzentrale-start .knopf { min-width: 180px; }
.s-telefonzentrale-balken { height: 8px; margin: 2px 0 10px; border-radius: 99px; background: var(--flaeche3); overflow: hidden; }
.s-telefonzentrale-balken i { display: block; height: 100%; width: calc(var(--p, 1) * 100%); background: var(--akzent); border-radius: 99px; transition: width .1s linear; }
.s-telefonzentrale-balken.knapp i { background: var(--rot); }
.s-telefonzentrale-blase { position: relative; margin: 4px 0 14px; padding: 12px 14px 12px 16px; background: var(--flaeche); border: 1px solid var(--linie2); border-radius: 16px 16px 16px 4px; box-shadow: var(--schatten); }
.s-telefonzentrale-blase::before { content: ""; position: absolute; left: -1px; bottom: -9px; width: 14px; height: 14px; background: var(--flaeche); border-left: 1px solid var(--linie2); border-bottom: 1px solid var(--linie2); transform: skewX(35deg); border-radius: 0 0 0 4px; }
.s-telefonzentrale-blase.rein { animation: s-tz-rein .3s var(--kurve); }
@keyframes s-tz-rein { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
.s-telefonzentrale-wer { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--leise); font-size: .88rem; }
.s-telefonzentrale-wer strong { color: var(--text); }
.s-telefonzentrale-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--akzent-hell); color: var(--akzent-text); font-size: 1rem; flex: none; }
.s-telefonzentrale-text { margin: 0; font-size: 1.02rem; line-height: 1.5; }
.s-telefonzentrale-knoepfe { display: grid; gap: 10px; }
.s-telefonzentrale-knopf { min-height: 56px; padding: 10px 14px; font-size: 1rem; font-weight: 700; text-align: left; justify-content: flex-start; border-radius: 12px; line-height: 1.3; }
.s-telefonzentrale-knopf.k-durchstellen { background: var(--gruen-hell); color: var(--gruen-text); border-color: color-mix(in srgb, var(--gruen) 40%, transparent); }
.s-telefonzentrale-knopf.k-zurueckrufen { background: var(--rot-hell); color: var(--rot-dunkel); border-color: color-mix(in srgb, var(--rot) 40%, transparent); }
.s-telefonzentrale-knopf.k-mueller { background: var(--blau-hell); color: var(--blau); border-color: color-mix(in srgb, var(--blau) 40%, transparent); }
.s-telefonzentrale-knopf:hover:not([disabled]) { filter: brightness(.97); }
.s-telefonzentrale-ende { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius-k); background: var(--gruen-hell); color: var(--gruen-text); font-weight: 600; text-align: center; }
@media (prefers-reduced-motion: reduce) { .s-telefonzentrale-blase.rein { animation: none; } .s-telefonzentrale-balken i { transition: none; } }