/* ============================================================================
   CALLASSIST — DREI DESIGN-HAeUTE
   Die Wahl liegt am Benutzer (users.ui_skin) und folgt ihm auf jedes Geraet.

     klassik  Bleibt EXAKT wie bisher. Scroll-Seite, flache Karten.
              Wer nichts aendern will, aendert nichts. Keine einzige Regel hier
              greift ohne die Klasse .skin-modern / .skin-glass.
     modern   Das neue Design: ein Schritt, eine Ansicht — kein Scrollen mehr.
              Flach, klar, viel Luft. Das war das eigentliche Problem, nicht die Optik.
     glass    Dieselbe neue Struktur + Liquid Glass (iOS 27).

   Modern und Glass TEILEN SICH DIE STRUKTUR. Nur das Material unterscheidet sie.
   Drei getrennte Oberflaechen zu pflegen waere der Fehler, den man in einem
   halben Jahr bereut.
   ============================================================================ */

/* ============================================================================
   1 · GRUNDGERUEST (gilt auch in Klassik — dort stapeln die Panels wie bisher)
   ============================================================================ */
.dflow { display: flex; flex-direction: column; gap: 1rem; }
.dflow-track { display: flex; flex-direction: column; gap: 1rem; }
.dflow-panel { display: flex; flex-direction: column; gap: 1rem; }

/* In Klassik unsichtbar — die alte Hero-Leiste bleibt dort das Mass der Dinge. */
.dflow-bar, .dflow-names, .dflow-nav { display: none; }

/* Die Karten bringen eigene Abstaende mit. Im Fluss uebernimmt das der gap,
   sonst summieren sich beide und alles wird wieder gequetscht. */
.dflow-panel > .card { margin-bottom: 0; }

/* ============================================================================
   2 · DIE NEUE STRUKTUR (modern + glass)
   Ein Schritt, eine Ansicht. Horizontal. Kein Scrollen.
   ============================================================================ */
#page-dialer.skin-modern #dialer-step-indicator,
#page-dialer.skin-glass  #dialer-step-indicator { display: none !important; }

#page-dialer.skin-modern .dflow-bar,
#page-dialer.skin-glass  .dflow-bar {
  display: flex; gap: 5px; margin-bottom: 2px;
}
.dflow-bar i {
  flex: 1; height: 4px; border-radius: 999px;
  background: var(--border2);
  transition: background .4s cubic-bezier(.32,.72,0,1);
}
.dflow-bar i.done { background: color-mix(in srgb, var(--accent) 50%, transparent); }
.dflow-bar i.now  { background: var(--accent); }

#page-dialer.skin-modern .dflow-names,
#page-dialer.skin-glass  .dflow-names {
  display: flex; gap: 5px; margin-bottom: 6px;
}
.dflow-names span {
  flex: 1; font-size: 11.5px; font-weight: 650; color: var(--text3);
  transition: color .3s;
}
.dflow-names span.now { color: var(--text); }

#page-dialer.skin-modern .dflow-viewport,
#page-dialer.skin-glass  .dflow-viewport { overflow: hidden; }

#page-dialer.skin-modern .dflow-track,
#page-dialer.skin-glass  .dflow-track {
  flex-direction: row;
  gap: 0;
  transition: transform .55s cubic-bezier(.32,.72,0,1);
  will-change: transform;
  align-items: flex-start;
}
#page-dialer.skin-modern .dflow-panel,
#page-dialer.skin-glass  .dflow-panel {
  flex: 0 0 100%;
  min-width: 100%;
  padding: 2px;                 /* damit Schatten nicht am Rand abgeschnitten werden */
}

/* Navigation der Bahn */
#page-dialer.skin-modern .dflow-nav,
#page-dialer.skin-glass  .dflow-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.dflow-back, .dflow-next {
  appearance: none; cursor: pointer; font: inherit;
  font-size: 14px; font-weight: 650;
  padding: 11px 22px; border-radius: 999px;
  min-height: 44px;                                  /* Touch-Ziel */
  transition: transform .15s cubic-bezier(.32,.72,0,1), box-shadow .2s, color .2s, border-color .2s;
}
.dflow-back {
  background: transparent; color: var(--text2);
  border: 1px solid var(--border2);
}
.dflow-back:hover:not(:disabled) { color: var(--text); border-color: var(--text3); }
.dflow-next {
  background: var(--accent); color: #fff; border: 0;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 36%, transparent);
}
.dflow-next:hover:not(:disabled) { transform: translateY(-1px); }
.dflow-back:disabled, .dflow-next:disabled { opacity: .34; cursor: not-allowed; transform: none; }
.dflow-back:focus-visible, .dflow-next:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ============================================================================
   3 · HAUT "MODERN" — DUNKEL, SATT, ENERGETISCH.
   Bewusst eine EIGENE Welt, nicht Liquid Glass mit anderem Anstrich. Drei Designs
   muessen sich auf den ersten Blick unterscheiden, sonst sind es zwei.

   WARUM DUNKEL? Die Flammen sind ein Tagesziel mit Streak — genau dafuer hat Apple
   die Fitness-Sprache erfunden: schwarzer Grund, satte Farben, grosse Zahlen. Sie
   passt nicht zufaellig zum Wählaro, sie ist DIESELBE IDEE. Und nach acht Stunden
   Kaltakquise dankt das Auge fuer den ruhigen Grund.

   Die Haut greift AUCH im hellen App-Modus — wie die Fitness-App, die immer schwarz
   ist. Das ist Absicht, kein Fehler.
   ============================================================================ */
#page-dialer.skin-modern {
  --bg:      #0a0b10;
  --bg2:     #15161d;
  --bg3:     #1e1f28;
  --bg4:     #262731;
  --border:  rgba(255,255,255,0.07);
  --border2: rgba(255,255,255,0.13);
  --text:    #ffffff;
  --text2:   #9b9ca7;
  --text3:   #6a6b78;
  --accent:  #ff6b35;                 /* die Flamme ist hier der Akzent, nicht das Blau */
  --accent2: #f43f5e;
  --accent-light: rgba(255,107,53,.12);
  --radius:  22px;
  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.45), 0 20px 48px rgba(0,0,0,.5);

  position: relative;
  isolation: isolate;
  color: var(--text);
}

/* Der Grund: tiefes Schwarz mit einem Glutschimmer. Ruhig, aber nicht tot. */
#page-dialer.skin-modern::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46rem 30rem at 10% -8%,  rgba(255,107,53,.16), transparent 58%),
    radial-gradient(42rem 28rem at 92%  4%,  rgba(244,63,94,.12), transparent 60%),
    #07080d;
}

/* Karten: fast randlos, der Kontrast macht die Kante */
#page-dialer.skin-modern .card {
  background: var(--bg2);
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow);
  transition: box-shadow .25s, transform .2s cubic-bezier(.32,.72,0,1), border-color .2s;
}
#page-dialer.skin-modern .card:hover { border-color: var(--border2) !important; }

/* Grosse Typografie — im Dunkeln darf sie mehr Raum nehmen */
#page-dialer.skin-modern .dflow-head h2 {
  font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: var(--text);
}
#page-dialer.skin-modern .dflow-head p { color: var(--text2); }

/* Der Weiter-Knopf traegt hier die Glut, nicht das Blau */
#page-dialer.skin-modern .dflow-next {
  background: linear-gradient(118deg, #ff6b35, #f43f5e);
  box-shadow: 0 10px 28px rgba(244,63,94,.38);
}
#page-dialer.skin-modern .dflow-back { border-color: var(--border2); }
#page-dialer.skin-modern .dflow-bar i.now  { background: #ff6b35; }
#page-dialer.skin-modern .dflow-bar i.done { background: rgba(255,107,53,.5); }
/* Konfiguration + Spielregeln in ALLEN Skins 1:1 wie Klassik: exakt dieselben Werte wie die Basis
   (.dialer-rules-btn), plus weisser Grund darunter, damit der Pill auf JEDEM Skin identisch rendert. */
#page-dialer.skin-modern .dialer-rules-btn,
#page-dialer.skin-glass  .dialer-rules-btn,
body.dark #page-dialer.skin-modern .dialer-rules-btn,
body.dark #page-dialer.skin-glass  .dialer-rules-btn {
  background: linear-gradient(135deg, rgba(255,107,53,.10), rgba(245,158,11,.06)), #ffffff !important;
  border: 1.5px solid rgba(255,107,53,.35) !important;
  color: #c2410c !important;
}

/* Ablage-Flaeche: im Dunkeln braucht sie eine sichtbare Kante */
#page-dialer.skin-modern #dialer-dropzone,
#page-dialer.skin-modern #dialer-leitfaden-dropzone {
  border-color: rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.03) !important;
}
#page-dialer.skin-modern #dialer-dropzone:hover { border-color: #ff6b35 !important; }

/* Der Spielregeln-Knopf und der Umschalter im Dunkeln */
#page-dialer.skin-modern .dialer-rules-btn {
  color: #ffb08a; border-color: rgba(255,107,53,.4);
  background: rgba(255,107,53,.10);
}
#page-dialer.skin-modern .skin-switch { background: var(--bg3); border-color: var(--border); }
#page-dialer.skin-modern .skin-switch::before { background: var(--bg2); box-shadow: none; }
#page-dialer.skin-modern .skin-switch button[aria-pressed="true"] { color: var(--text); }

/* Die Topbar-Ueberschrift muss im Dunkeln mitziehen */
#page-dialer.skin-modern .topbar h2,
#page-dialer.skin-modern .topbar p { color: var(--text); }
#page-dialer.skin-modern .topbar p { color: var(--text3); }

/* ============================================================================
   4 · HAUT "LIQUID GLASS" — dasselbe Geruest, anderes Material.
   DER FEHLER, DEN FAST ALLE NACHBAUTEN MACHEN: Unschaerfe ueber einen grauen
   Hintergrund legen. Glas braucht etwas zum BRECHEN — sonst ist es nur milchig.
   Deshalb der lebendige Grund weiter unten. Ohne ihn ist der Effekt tot.
   ============================================================================ */
#page-dialer.skin-glass {
  --bg2:     rgba(255, 255, 255, 0.66);
  --bg3:     rgba(255, 255, 255, 0.48);
  --bg4:     rgba(255, 255, 255, 0.38);
  --border:  rgba(255, 255, 255, 0.74);
  --border2: rgba(255, 255, 255, 0.55);

  /* Auf dem lebendigen Grund muss der Text noch sitzen -> etwas kraeftiger */
  --text:  #101226;
  --text2: #4e5680;
  --text3: #7d86a8;

  --radius: 22px;
  /* Glas lebt von der Lichtkante, nicht vom Schlagschatten. Weniger ist hier mehr. */
  --shadow:    inset 0 1px 0 rgba(255,255,255,.9), 0 6px 20px rgba(28,38,88,.07);
  --shadow-lg: inset 0 1px 0 rgba(255,255,255,.9), 0 16px 44px rgba(28,38,88,.11);

  position: relative;
  isolation: isolate;
}

/* --- DER LEBENDIGE GRUND --- */
#page-dialer.skin-glass::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  /* ZURUECKGENOMMEN: das Blau war zu dominant — der Grund wirkte lila statt gliesernd.
     Glas soll BRECHEN, nicht FAERBEN. Ein Hauch Waerme, ein Hauch Kuehle, sonst weiss.
     Man soll den Schimmer spueren, ohne ihn zu benennen. */
  background:
    radial-gradient(46rem 30rem at  6% -12%, rgba(255,138,90,.16), transparent 56%),
    radial-gradient(42rem 28rem at 94%   0%, rgba(120,145,235,.13), transparent 58%),
    radial-gradient(38rem 26rem at 62% 110%, rgba(245,180,90,.10), transparent 56%),
    #f5f7fc;
}

/* --- Das Material: Unschaerfe + Lichtkante + EIN Glanzstreifen --- */
#page-dialer.skin-glass .card {
  backdrop-filter: blur(26px) saturate(190%);
  -webkit-backdrop-filter: blur(26px) saturate(190%);
  position: relative;
  overflow: hidden;
}
#page-dialer.skin-glass .card::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(148deg, rgba(255,255,255,.6), transparent 42%);
}
#page-dialer.skin-glass .card > * { position: relative; z-index: 1; }

/* Der Spielregeln-Knopf bekommt KEIN Glas und KEINEN eigenen Schatten:
   oben rechts stapelten sich sonst Umschalter, Knopf-Schatten und Karten-Schatten
   zu einem dunklen Klumpen. Kleine Bedienelemente brauchen kein Material — sie
   sollen sich einordnen, nicht schweben. */
#page-dialer.skin-glass .dialer-rules-btn,
#page-dialer.skin-modern .dialer-rules-btn { box-shadow: none; }
#page-dialer.skin-glass .dialer-rules-btn:hover,
#page-dialer.skin-modern .dialer-rules-btn:hover {
  box-shadow: 0 2px 8px rgba(255,107,53,.14);
}
#page-dialer.skin-glass .skin-switch,
#page-dialer.skin-modern .skin-switch { box-shadow: none; }
#page-dialer.skin-glass .skin-switch button[aria-pressed="true"],
#page-dialer.skin-modern .skin-switch button[aria-pressed="true"] {
  box-shadow: 0 1px 2px rgba(20,30,80,.08);
}

/* Dunkelmodus: nicht invertieren — dunkles Glas braucht WENIGER Deckkraft. */
body.dark #page-dialer.skin-glass {
  --bg2:     rgba(255, 255, 255, 0.07);
  --bg3:     rgba(255, 255, 255, 0.05);
  --bg4:     rgba(255, 255, 255, 0.04);
  --border:  rgba(255, 255, 255, 0.16);
  --border2: rgba(255, 255, 255, 0.10);
  --text:  #f2f5ff;
  --text2: #a8b0d4;
  --text3: #737ca6;
  --shadow:    inset 0 1px 0 rgba(255,255,255,.10), 0 10px 30px rgba(0,0,0,.35);
  --shadow-lg: inset 0 1px 0 rgba(255,255,255,.12), 0 24px 64px rgba(0,0,0,.5);
}
body.dark #page-dialer.skin-glass::before {
  background:
    radial-gradient(46rem 30rem at  6% -12%, rgba(255,107,53,.16), transparent 56%),
    radial-gradient(42rem 28rem at 94%   0%, rgba(110,90,220,.16), transparent 58%),
    radial-gradient(38rem 26rem at 62% 110%, rgba(244,63,94,.10), transparent 56%),
    #0b0d15;
}
body.dark #page-dialer.skin-glass .card::before {
  background: linear-gradient(148deg, rgba(255,255,255,.14), transparent 42%);
}

/* ============================================================================
   5 · DER UMSCHALTER
   ============================================================================ */
.skin-switch {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.skin-switch button {
  appearance: none; border: 0; cursor: pointer;
  padding: 6px 14px; border-radius: 999px;
  font: inherit; font-size: 12.5px; font-weight: 650;
  color: var(--text3); background: transparent;
  transition: color .18s, background .18s, box-shadow .18s;
  min-height: 34px; white-space: nowrap;
}
.skin-switch button[aria-pressed="true"] {
  background: var(--bg2); color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,.10);
}
.skin-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .dflow-track, .dflow-bar i, .dflow-names span,
  .dflow-back, .dflow-next,
  #page-dialer.skin-modern .card,
  .skin-switch button { transition: none !important; }
}

/* Schmale Fenster: die Bahn bleibt, aber die Knoepfe brauchen Platz */
@media (max-width: 520px) {
  .dflow-names span { font-size: 10.5px; }
  .dflow-back, .dflow-next { padding: 11px 16px; font-size: 13px; }
}

/* ============================================================================
   6 · DAS NEUE DESIGN (modern + glass) — nicht nur umgefaerbt.
   Grosse Typografie, keine Nummern-Kaestchen, aufgeraeumte Kacheln.
   In Klassik greift davon NICHTS.
   ============================================================================ */

/* --- Die neuen Ueberschriften --- */
.dflow-head { display: none; }
#page-dialer.skin-modern .dflow-head,
#page-dialer.skin-glass  .dflow-head { display: block; margin-bottom: 4px; }
.dflow-head h2 {
  margin: 0 0 5px;
  font-size: 26px; font-weight: 760; letter-spacing: -.026em; line-height: 1.14;
  color: var(--text);
  text-wrap: balance;
}
.dflow-head p {
  margin: 0; font-size: 14px; color: var(--text2); max-width: 52ch; line-height: 1.5;
}

/* --- Die alten Nummern-Koepfe verschwinden (Klassik behaelt sie) --- */
#page-dialer.skin-modern .dflow-oldhead,
#page-dialer.skin-glass  .dflow-oldhead,
#page-dialer.skin-modern .dflow-oldhead-row > div:first-child,
#page-dialer.skin-glass  .dflow-oldhead-row > div:first-child { display: none !important; }
/* Die Vorschau-Zeile behaelt ihren Zaehler rechts — nur der Nummern-Block geht */
#page-dialer.skin-modern .dflow-oldhead-row,
#page-dialer.skin-glass  .dflow-oldhead-row {
  justify-content: flex-end !important; margin-bottom: 0 !important;
}

/* --- Karten werden luftiger und verlieren die harte Kante --- */
#page-dialer.skin-modern .card,
#page-dialer.skin-glass  .card {
  padding: 26px !important;
  border-width: 1px !important;
}

/* --- Die Ablage-Flaeche: gross, ruhig, einladend --- */
#page-dialer.skin-modern #dialer-dropzone,
#page-dialer.skin-glass  #dialer-dropzone,
#page-dialer.skin-modern #dialer-leitfaden-dropzone,
#page-dialer.skin-glass  #dialer-leitfaden-dropzone {
  border-width: 1.5px !important;
  border-radius: 18px !important;
  padding: 30px 20px !important;
  background: color-mix(in srgb, var(--bg3) 55%, transparent) !important;
  transition: border-color .2s, transform .2s cubic-bezier(.32,.72,0,1), background .2s;
}
#page-dialer.skin-modern #dialer-dropzone:hover,
#page-dialer.skin-glass  #dialer-dropzone:hover { transform: translateY(-2px); }

/* --- Spalten-Zuordnung: Zeilen statt Kaesten (wie im Entwurf) --- */
#page-dialer.skin-modern #dialer-mapping-grid,
#page-dialer.skin-glass  #dialer-mapping-grid {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}
#page-dialer.skin-modern #dialer-mapping-grid > *,
#page-dialer.skin-glass  #dialer-mapping-grid > * {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
#page-dialer.skin-modern #dialer-mapping-grid > *:last-child,
#page-dialer.skin-glass  #dialer-mapping-grid > *:last-child { border-bottom: 0; }

/* --- Vorschau-Tabelle: ohne Kaefig --- */
#page-dialer.skin-modern #dialer-preview-card > div:last-child,
#page-dialer.skin-glass  #dialer-preview-card > div:last-child {
  border: 0 !important; border-radius: 0 !important;
}
#page-dialer.skin-modern #dialer-preview-table th,
#page-dialer.skin-glass  #dialer-preview-table th {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text3);
}

/* --- Der Start-Knopf: mehr Glut, mehr Luft --- */
#page-dialer.skin-modern #dialer-start-btn:not(:disabled),
#page-dialer.skin-glass  #dialer-start-btn:not(:disabled) {
  border-radius: 18px !important;
  padding: 21px 24px !important;
  box-shadow: 0 12px 32px rgba(244,63,94,.34) !important;
  transition: transform .15s cubic-bezier(.32,.72,0,1), box-shadow .25s !important;
}
#page-dialer.skin-modern #dialer-start-btn:not(:disabled):hover,
#page-dialer.skin-glass  #dialer-start-btn:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 42px rgba(244,63,94,.46) !important;
}

/* ============================================================================
   7 · DER APPLE-UMSCHALTER: gleitender Indikator, klickbar UND wischbar.
   Der Indikator ist EIN Element, das sich verschiebt — nicht drei Hintergruende,
   die an- und ausgehen. Genau das macht die Apple-Anmutung aus.
   ============================================================================ */
.skin-switch {
  position: relative;
  --seg: 0;          /* welches Segment aktiv ist: 0 | 1 | 2 */
  --segs: 3;
  touch-action: pan-y;   /* horizontales Wischen gehoert uns */
  user-select: none;
}
/* Der Indikator wird AUSGEMESSEN, nicht gerechnet: "Klassik" und "Liquid Glass" sind
   verschieden breit — gleiche Drittel liessen die Schrift ueberlaufen. Er nimmt jetzt
   Position UND Breite des aktiven Knopfes an und verformt sich beim Ziehen mit.
   Das ist sogar naeher an Apple als die starre Loesung. */
.skin-switch::before {
  content: "";
  position: absolute;
  top: 3px; bottom: 3px; left: 0;
  width: var(--ind-w, 33%);
  transform: translateX(var(--ind-x, 3px));
  border-radius: 999px;
  background: var(--bg2);
  box-shadow: 0 1px 3px rgba(20,30,80,.12);
  transition: transform .38s cubic-bezier(.32,.72,0,1), width .38s cubic-bezier(.32,.72,0,1);
  z-index: 0;
}
.skin-switch button {
  position: relative; z-index: 1;
  background: transparent !important;
  box-shadow: none !important;
  white-space: nowrap;
}
.skin-switch.is-dragging::before { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .skin-switch::before { transition: none; }
}

/* Waehrend des Ziehens folgt der Indikator OHNE Uebergang — sonst haengt er
   dem Finger hinterher und das ganze Gefuehl ist dahin. Erst beim Loslassen
   rastet er mit der Kurve ein. */
.skin-switch.is-dragging { cursor: grabbing; }
.skin-switch.is-dragging::before { transition: none; }
.skin-switch { cursor: grab; }
.skin-switch button { cursor: inherit; }

/* Der Umschalter darf NIE scrollen — er ist ein Regler, keine Liste. */
.skin-switch { overflow: hidden; flex-wrap: nowrap; }

/* Und die Bahn scrollt auch nicht: sie wird geschoben, nicht gescrollt. */
#page-dialer.skin-modern .dflow-viewport,
#page-dialer.skin-glass  .dflow-viewport { overflow: hidden !important; overscroll-behavior: contain; }

/* ============================================================================
   8 · DER LAUFENDE DIALER (modern + glass)
   Hier sitzt der Vertriebler acht Stunden. Der Mensch am anderen Ende ist der
   Held — alles andere tritt zurueck.

   Heute ist der Flammen-Kasten fast so gross wie der Kontakt. Der Punktestand
   ist aber Motivation, nicht Arbeitsinhalt. Er wird zur Zeile, nicht zum Block.
   ============================================================================ */

/* Die Karte: mehr Luft, weichere Kante */
#page-dialer.skin-modern #dialer-callcard,
#page-dialer.skin-glass  #dialer-callcard {
  padding: 30px !important;
  border-radius: 26px !important;
  gap: 1.35rem !important;
}

/* Der Name wird gross — er ist der Grund, warum man hier ist */
#page-dialer.skin-modern #dialer-contact-name,
#page-dialer.skin-glass  #dialer-contact-name {
  font-size: 30px !important;
  font-weight: 800 !important;
  letter-spacing: -.03em;
  line-height: 1.08 !important;
}
#page-dialer.skin-modern #dialer-contact-company,
#page-dialer.skin-glass  #dialer-contact-company {
  font-size: 14.5px !important;
  margin-top: 4px !important;
}
#page-dialer.skin-modern #dialer-avatar,
#page-dialer.skin-glass  #dialer-avatar {
  width: 72px !important; height: 72px !important;
  border-radius: 22px !important;      /* Apple rundet Quadrate, es kreist nicht alles */
  font-size: 25px !important;
}

/* Die Flamme tritt zurueck: eine schlanke Zeile statt eines Blocks */
#page-dialer.skin-modern #dialer-heat-box,
#page-dialer.skin-glass  #dialer-heat-box {
  padding: 9px 14px !important;
  border-radius: 999px !important;
  gap: 10px !important;
  background: color-mix(in srgb, var(--accent) 10%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
#page-dialer.skin-modern #dialer-heat-flame,
#page-dialer.skin-glass  #dialer-heat-flame { font-size: 18px !important; }
#page-dialer.skin-modern #dialer-score-val,
#page-dialer.skin-glass  #dialer-score-val { font-size: 17px !important; }
#page-dialer.skin-modern #dialer-heat-box::after,
#page-dialer.skin-glass  #dialer-heat-box::after { display: none; }   /* der Hinweis-Text passt hier nicht mehr */

/* DIE NUMMER: das Groesste auf der Karte. Sie ist der Zweck des Ganzen. */
#page-dialer.skin-modern #dialer-contact-phone,
#page-dialer.skin-glass  #dialer-contact-phone {
  font-size: 30px !important;
  font-weight: 750 !important;
  letter-spacing: -.025em;
  padding: 20px 22px !important;
  border-radius: 20px !important;
  background: color-mix(in srgb, var(--accent) 8%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent) !important;
  transition: transform .2s cubic-bezier(.32,.72,0,1), border-color .2s;
}
#page-dialer.skin-modern #dialer-contact-phone:hover,
#page-dialer.skin-glass  #dialer-contact-phone:hover {
  transform: translateY(-2px);
  border-color: var(--accent) !important;
}

/* Die Ergebnis-Knoepfe: mehr Luft, weichere Form, klare Hierarchie */
#page-dialer.skin-modern .dialer-outcome-btn,
#page-dialer.skin-glass  .dialer-outcome-btn {
  border-radius: 16px !important;
  padding: 15px 14px !important;
  min-height: 52px;
  transition: transform .15s cubic-bezier(.32,.72,0,1), box-shadow .2s !important;
}
#page-dialer.skin-modern .dialer-outcome-btn:hover,
#page-dialer.skin-glass  .dialer-outcome-btn:hover { transform: translateY(-2px); }

/* Der Anruf-Knopf */
#page-dialer.skin-modern #dialer-call-btn,
#page-dialer.skin-glass  #dialer-call-btn {
  border-radius: 18px !important;
  padding: 19px !important;
  font-size: 17px !important;
  font-weight: 780 !important;
  box-shadow: 0 12px 32px color-mix(in srgb, var(--accent) 38%, transparent) !important;
  transition: transform .15s cubic-bezier(.32,.72,0,1), box-shadow .25s !important;
}
#page-dialer.skin-modern #dialer-call-btn:hover,
#page-dialer.skin-glass  #dialer-call-btn:hover { transform: translateY(-1px); }

/* Die Warteschlange links: ruhiger, weniger praesent */
#page-dialer.skin-modern #dialer-queue-list,
#page-dialer.skin-glass  #dialer-queue-list { padding: 4px; }

/* Notizfeld (textarea im Ergebnis-Abschnitt) */
#page-dialer.skin-modern #dialer-outcome-section textarea,
#page-dialer.skin-glass  #dialer-outcome-section textarea {
  border-radius: 14px !important;
  padding: 13px 16px !important;
}

/* ============================================================================
   GERÜST FÜR DIE ZWEI VERSCHIEDENEN MASKEN  (in Arbeit — Stand 14.07.)
   ----------------------------------------------------------------------------
   Die Anruf-Karte hatte NEUN lose Kinder. Für ein deterministisches Raster
   braucht sie DREI Blöcke: .dcard-main | #dialer-outcome-section | #dialer-next-btn.

   DIESE REGEL IST BEWUSST WIRKUNGSNEUTRAL: .dcard-main bekommt exakt das
   Flex-Verhalten, das die Karte vorher selbst hatte (Spalte, gap 1rem). Klassik,
   Modern und Glass sehen damit aus wie vorher — pixelweise gegengeprüft.

   Darauf kommt als Nächstes:
     Modern = Zwei-Spalten-COCKPIT (links entscheiden, rechts quittieren)
     Glass  = eine Spalte, geschichtete Glasplatten, Nummer als Held
   Erst dann sind es wirklich zwei Designs und nicht zwei Farben.
   ============================================================================ */
.dcard-main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

/* ============================================================================
   9 · ZWEI GETRENNTE STRUKTUREN  (15.07.2026)
   ----------------------------------------------------------------------------
   Bis hierher teilten Modern und Glass sich die Struktur — genau das war der
   Fehler ("nur umgefaerbt"). Ab hier sind es zwei Designs:

     MODERN  = COCKPIT. Feste Schritt-Leiste LINKS, Inhalt rechts, SOLIDE Flaechen.
               Dicht, werkzeughaft. Folgt jetzt Hell/Dunkel (vorher nur dunkel).
     GLASS   = BUEHNE. Duenne Fortschrittsleiste OBEN, EINE zentrierte Platte,
               frosted, luftig. Die Nummer ist der Held. Folgt Hell/Dunkel.

   Und der Rahmen steht: die SEITE scrollt nie mehr. Passt ein Schritt nicht,
   scrollt er INNEN — Kopf, Schrittleiste und "Weiter" bleiben immer sichtbar.
   Das war das eigentliche Problem (Liste-Schritt war 1959px hoch).

   Klassik bleibt voellig unberuehrt — keine Regel hier greift ohne die Klassen.
   Als Ueberschreibung ans Dateiende gestellt: nichts Altes wird geloescht,
   der Cascade erledigt den Rest.
   ============================================================================ */

/* --- DER FESTE RAHMEN (beide Haeute): kein Seiten-Scroll --- */
#page-dialer.skin-modern #dialer-setup,
#page-dialer.skin-glass  #dialer-setup {
  height: calc(100dvh - 48px);         /* dvh: iOS-Adressleiste einrechnen (100vh waere zu hoch) */
  display: flex; flex-direction: column; overflow: hidden;
}
#page-dialer.skin-modern .dflow,
#page-dialer.skin-glass  .dflow { flex: 1; min-height: 0; margin: 0 auto; }
#page-dialer.skin-modern .dflow-viewport,
#page-dialer.skin-glass  .dflow-viewport { flex: 1; min-height: 0; }
#page-dialer.skin-modern .dflow-track,
#page-dialer.skin-glass  .dflow-track { height: 100%; align-items: stretch; }
/* Ein Schritt fuellt die Hoehe und scrollt notfalls INNEN — nie die Seite */
#page-dialer.skin-modern .dflow-panel,
#page-dialer.skin-glass  .dflow-panel {
  height: 100%; overflow-y: auto; overflow-x: hidden;
  padding: 2px 6px 2px 2px; scrollbar-width: thin;
}

/* ===========================  MODERN = COCKPIT  =========================== */
#page-dialer.skin-modern .dflow {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "rail view" "rail nav";
  column-gap: 34px; row-gap: 16px;
  max-width: 1060px;
}
#page-dialer.skin-modern #dialer-step-indicator { display: none !important; }
#page-dialer.skin-modern .dflow-bar { display: none; }
#page-dialer.skin-modern .dflow-viewport { grid-area: view; }
#page-dialer.skin-modern .dflow-nav { grid-area: nav; }

/* Die linke Schritt-Leiste — aus .dflow-names, mit den richtigen Namen + Nummern */
#page-dialer.skin-modern .dflow-names {
  grid-area: rail; align-self: stretch; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
  counter-reset: dstep;
  border-right: 1px solid var(--border); padding-right: 16px;
}
#page-dialer.skin-modern .dflow-names span {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px;
  font-size: 14px; font-weight: 650; color: var(--text3);
  cursor: pointer; counter-increment: dstep; text-align: left;
  transition: background .18s, color .18s;
}
#page-dialer.skin-modern .dflow-names span::before {
  content: counter(dstep);
  width: 26px; height: 26px; flex: none; border-radius: 8px;
  display: grid; place-items: center; font-size: 12.5px; font-weight: 800;
  background: var(--bg3); color: var(--text3);
  transition: background .2s, color .2s;
}
#page-dialer.skin-modern .dflow-names span:hover { color: var(--text); background: var(--bg3); }
#page-dialer.skin-modern .dflow-names span.now { color: var(--text); background: var(--bg2); box-shadow: var(--shadow); }
#page-dialer.skin-modern .dflow-names span.now::before { background: var(--accent); color: #fff; }
#page-dialer.skin-modern .dflow-names span.done::before {
  content: "\2713";
  background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent);
}

/* Modern-Farben: LICHT (solide, flach, dicht) — folgt dem Hell/Dunkel-Schalter */
#page-dialer.skin-modern {
  --bg: #f3f4f8; --bg2: #ffffff; --bg3: #eef0f5; --bg4: #e4e7f0;
  --border: rgba(16,20,40,.09); --border2: rgba(16,20,40,.17);
  --text: #10132a; --text2: #474e6c; --text3: #838aa6;
  --accent: #f4511e; --accent2: #f43f5e; --accent-light: rgba(244,81,30,.10);
  --shadow:    0 1px 2px rgba(18,22,50,.05), 0 6px 16px rgba(18,22,50,.06);
  --shadow-lg: 0 2px 6px rgba(18,22,50,.07), 0 18px 40px rgba(18,22,50,.12);
}
#page-dialer.skin-modern::before {
  background:
    radial-gradient(48rem 30rem at 8% -10%, rgba(244,81,30,.06), transparent 60%),
    radial-gradient(42rem 28rem at 96% 2%,  rgba(244,63,94,.05), transparent 60%),
    #eef0f6;
}
/* Modern DUNKEL — das Cockpit, wie es war */
body.dark #page-dialer.skin-modern {
  --bg: #0a0b10; --bg2: #15161d; --bg3: #1e1f28; --bg4: #262731;
  --border: rgba(255,255,255,.07); --border2: rgba(255,255,255,.13);
  --text: #ffffff; --text2: #9b9ca7; --text3: #6a6b78;
  --accent: #ff6b35;
  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.45), 0 20px 48px rgba(0,0,0,.5);
}
body.dark #page-dialer.skin-modern::before {
  background:
    radial-gradient(46rem 30rem at 10% -8%, rgba(255,107,53,.16), transparent 58%),
    radial-gradient(42rem 28rem at 92% 4%,  rgba(244,63,94,.12), transparent 60%),
    #07080d;
}
/* Modern-Karten: SOLIDE, flach — ausdruecklich KEIN Glas */
#page-dialer.skin-modern .card {
  background: var(--bg2) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow);
  padding: 20px !important;
}
#page-dialer.skin-modern .card::before { display: none !important; }

/* ===========================  GLASS = BUEHNE  =========================== */
#page-dialer.skin-glass .dflow {
  display: flex; flex-direction: column; gap: 14px;
  width: 100%; max-width: 660px;
}
#page-dialer.skin-glass #dialer-step-indicator { display: none !important; }
#page-dialer.skin-glass .dflow-bar { display: flex; }
#page-dialer.skin-glass .dflow-names {
  display: flex; flex-direction: row; gap: 5px; margin: 0 0 2px;
}
#page-dialer.skin-glass .dflow-names span {
  flex: 1; font-size: 11.5px; font-weight: 650; color: var(--text3);
  padding: 0; cursor: pointer; text-align: left;
}
#page-dialer.skin-glass .dflow-names span.now { color: var(--text); }
#page-dialer.skin-glass .dflow-panel { padding: 2px 4px 2px 2px; }

/* Beide: der Kopf eines Schrittes bleibt oben ruhig stehen */
#page-dialer.skin-modern .dflow-head,
#page-dialer.skin-glass  .dflow-head { margin-bottom: 12px; }

/* --- Korrekturen 15.07. (nach erstem Augenschein) --- */

/* Die Rail-Punkte duerfen NICHT wachsen — die alte flex:1-Regel zog sie ueber
   die ganze Hoehe auseinander und blaehte den aktiven Kasten auf. */
#page-dialer.skin-modern .dflow-names span { flex: 0 0 auto; }

/* Der grosse Start-Knopf ist ein direktes Kind von .dflow. Im Cockpit-Grid bekommt
   er eine eigene Zeile unter der Schritt-Navigation (sonst landet er unter der Rail). */
#page-dialer.skin-modern .dflow {
  grid-template-areas: "rail view" "rail nav" "rail start";
  grid-template-rows: minmax(0, 1fr) auto auto;
  row-gap: 12px;
}
#page-dialer.skin-modern #dialer-start-btn {
  grid-area: start; width: 100%; margin: 0;
}
/* In der Buehne (Glass) steht er ohnehin unten in der Spalte — nur volle Breite geben */
#page-dialer.skin-glass #dialer-start-btn { width: 100%; margin: 0; }

/* ============================================================================
   10 · DIE ANRUF-MASKE — auch hier zwei Designs (15.07.)
   MODERN = Cockpit-Split: links ENTSCHEIDEN (Kontakt, Nummer, Anrufen),
            rechts QUITTIEREN (Ergebnis-Kacheln). Alles auf einen Blick, kein Scrollen.
   GLASS  = eine Spalte, geschichtete Platten, die Nummer ist der Held (bleibt wie Abschnitt 8).
   ============================================================================ */
#page-dialer.skin-modern #dialer-callcard {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, .94fr);
  grid-template-areas: "main outcome" "next outcome";
  grid-template-rows: 1fr auto;
  column-gap: 28px; row-gap: 16px;
  align-content: start;
  max-width: 900px !important;
}
#page-dialer.skin-modern .dcard-main            { grid-area: main; min-width: 0; }
#page-dialer.skin-modern #dialer-outcome-section { grid-area: outcome; align-self: start; }
#page-dialer.skin-modern #dialer-next-btn        { grid-area: next; }

/* Im Cockpit sind die Ergebnisse die halbe Arbeit — sie duerfen ruhig praesent sein,
   aber die Termin-Zeile bleibt der eine laute Knopf. */
#page-dialer.skin-modern #dialer-outcome-section {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 18px; padding: 16px !important;
}

/* GLASS: die Karte bleibt eine ruhige Spalte — aber breiter atmen als bisher */
#page-dialer.skin-glass #dialer-callcard { max-width: 640px !important; }

/* ============================================================================
   11 · NEUE RICHTUNG (15.07., nach deiner Wahl)
   MODERN = NOW PLAYING: ein Fokus-Objekt, riesige Nummer, alles andere tritt zurueck.
            Solide, zentriert. Ueberschreibt den Cockpit-Split aus Abschnitt 10.
   GLASS  = FREISTEHEND: keine Fassung. Die Karte loest sich auf, die Bloecke schweben
            einzeln als frosted Objekte auf dem lebendigen Grund.
   ============================================================================ */

/* ---------- MODERN = NOW PLAYING ---------- */
#page-dialer.skin-modern #dialer-callcard {
  display: flex !important; flex-direction: column;
  grid-template-columns: none !important; grid-template-areas: none !important;
  max-width: 600px !important; margin: 0 auto;
  gap: 18px !important;
}
#page-dialer.skin-modern .dcard-main { grid-area: auto; }
#page-dialer.skin-modern #dialer-outcome-section { grid-area: auto; }
#page-dialer.skin-modern #dialer-next-btn { grid-area: auto; }
/* Kopf zentriert — der Mensch, dann die Nummer */
#page-dialer.skin-modern .dcard-head { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
#page-dialer.skin-modern .dcard-head > div:last-child { position: absolute; top: 0; right: 0; }  /* 1/3 in die Ecke */
#page-dialer.skin-modern #dialer-contact-name { font-size: 27px !important; }
/* DIE NUMMER ist der Held: riesig, zentriert, ein solider Block */
#page-dialer.skin-modern .dcard-phone { justify-content: center !important; }
#page-dialer.skin-modern #dialer-contact-phone {
  font-size: 40px !important; text-align: center; width: 100%;
  padding: 22px 20px !important;
}
/* Anruf-Knopf gross, voll, zentral */
#page-dialer.skin-modern .dcard-call { width: 100%; }
#page-dialer.skin-modern #dialer-call-btn { width: 100%; }
/* Ergebnis tritt zurueck: schmaler, ruhiger Block unter dem Helden */
#page-dialer.skin-modern #dialer-outcome-section { max-width: 600px; }

/* ---------- GLASS = FREISTEHEND (keine Fassung) ---------- */
/* Die aeussere Karte loest sich auf — kein Rahmen, kein Glas, kein Schatten. */
#page-dialer.skin-glass #dialer-callcard {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  padding: 4px !important;
  max-width: 470px !important; margin: 0 auto;
  gap: 16px !important;
}
#page-dialer.skin-glass #dialer-callcard::before { display: none !important; }  /* kein Glasglanz auf der Huelle */
#page-dialer.skin-glass .dcard-main { gap: 16px !important; }
/* Der Name schwebt als reiner Text, keine Platte */
#page-dialer.skin-glass .dcard-head { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
#page-dialer.skin-glass .dcard-head > div:last-child { position: absolute; top: 0; right: 0; }
/* Jedes Objekt eine eigene schwebende frosted Platte */
#page-dialer.skin-glass .dcard-phone,
#page-dialer.skin-glass #dialer-heat-box,
#page-dialer.skin-glass #dialer-outcome-section .dialer-outcome-btn {
  background: rgba(255,255,255,.55) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,.7) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 24px rgba(28,38,88,.10) !important;
}
body.dark #page-dialer.skin-glass .dcard-phone,
body.dark #page-dialer.skin-glass #dialer-heat-box,
body.dark #page-dialer.skin-glass #dialer-outcome-section .dialer-outcome-btn {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 30px rgba(0,0,0,.35) !important;
}
/* Die Nummer schwebt, gross und zentriert */
#page-dialer.skin-glass .dcard-phone { justify-content: center !important; border-radius: 22px !important; }
#page-dialer.skin-glass #dialer-contact-phone {
  font-size: 38px !important; text-align: center; width: 100%;
  background: transparent !important; border: 0 !important; padding: 6px 0 !important;
}
#page-dialer.skin-glass #dialer-contact-phone:hover { transform: none !important; }
/* Anruf-Knopf schwebt als eigene Pille */
#page-dialer.skin-glass .dcard-call { width: 100%; }
#page-dialer.skin-glass #dialer-call-btn { width: 100%; }
/* Ergebnis-Abschnitt: kein Panel, die Kacheln schweben einzeln */
#page-dialer.skin-glass #dialer-outcome-section {
  background: transparent !important; border: 0 !important; padding: 0 !important;
}

/* Fokus-Feinschliff: die Nummer steht ALLEIN und zentriert, E-Mail+Lupe ruecken darunter */
#page-dialer.skin-modern .dcard-phone,
#page-dialer.skin-glass  .dcard-phone {
  flex-direction: column !important; gap: 10px !important; align-items: center !important;
}
#page-dialer.skin-modern .dcard-phone > div:last-child,
#page-dialer.skin-glass  .dcard-phone > div:last-child {
  justify-content: center; font-size: 12px;
}

/* ============================================================================
   12 · LIQUID GLASS — DER IMMERSIVE ANRUF (nach "Wählaro starten")
   Der Entwurf, den der Betreiber "total Liquid" nannte (Artefakt "Vier Apple-Wege",
   Variante Now Playing): freistehende frosted Objekte auf sattem Daemmerungs-Grund.
   Der Grund ist bewusst NICHT schwarz, sondern ein MITTLERES Twilight — heller als
   das Original (#2b1a4d), aber satt genug, dass das Glas das Licht BRICHT. Auf Weiss
   waere Liquid Glass nur milchig; erst Tiefe + Farbe machen es "liquid".
   Gilt NUR fuer die laufende Maske (#dialer-active) — der Setup bleibt hell/luftig.
   Eigene Atmosphaere, unabhaengig vom Hell/Dunkel-Schalter (wie Apple-Music-Vollbild).
   ============================================================================ */
#page-dialer.skin-glass #dialer-active {
  background:
    radial-gradient(60rem 42rem at 10% -12%, rgba(255,150,90,.26), transparent 60%),
    radial-gradient(54rem 40rem at 94% 4%,  rgba(130,120,255,.32), transparent 62%),
    radial-gradient(46rem 38rem at 58% 116%, rgba(255,110,150,.22), transparent 60%),
    linear-gradient(164deg, #453770 0%, #6f4487 46%, #a8556b 100%) !important;
  border-radius: 28px;
  padding: 22px 22px 26px;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

/* Warteschlange raus — Now Playing ist Fokus, der Kontakt fuellt den Raum */
#page-dialer.skin-glass #dialer-active .m-stack {
  grid-template-columns: 1fr !important; place-items: center;
}
#page-dialer.skin-glass #dialer-active .m-stack > .card:first-child { display: none !important; }

/* Kopfzeile (Agent, Fortschritt, Beenden) hell auf dem Twilight */
#page-dialer.skin-glass #dialer-active,
#page-dialer.skin-glass #dialer-active * { border-color: rgba(255,255,255,.16); }
#page-dialer.skin-glass #dialer-active .topbar-left h2,
#page-dialer.skin-glass #dialer-active [id^="dialer-active"],
#page-dialer.skin-glass #dialer-active [id^="dialer-progress"],
#page-dialer.skin-glass #dialer-active [id^="dialer-mode"] { color: #fff !important; }

/* Die Karte: voellig rahmenlos, freistehend, zentriert */
#page-dialer.skin-glass #dialer-active #dialer-callcard {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  max-width: 480px !important; margin: 0 auto; padding: 6px !important; color: #fff;
}
#page-dialer.skin-glass #dialer-active #dialer-callcard::before { display: none !important; }

/* Name + Firma: weiss, gross */
#page-dialer.skin-glass #dialer-active #dialer-contact-name { color: #fff !important; }
#page-dialer.skin-glass #dialer-active #dialer-contact-company { color: rgba(255,255,255,.66) !important; }
#page-dialer.skin-glass #dialer-active .dcard-head > div:last-child { color: rgba(255,255,255,.6) !important; }

/* Avatar: frosted, schwebend */
#page-dialer.skin-glass #dialer-active #dialer-avatar {
  background: linear-gradient(140deg, rgba(255,255,255,.30), rgba(255,255,255,.08)) !important;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 18px 44px rgba(0,0,0,.32) !important;
}

/* Jedes Objekt eine eigene schwebende frosted Platte — auf Dunkel = wenig Deckkraft */
#page-dialer.skin-glass #dialer-active .dcard-phone,
#page-dialer.skin-glass #dialer-active #dialer-heat-box,
#page-dialer.skin-glass #dialer-active #dialer-outcome-section .dialer-outcome-btn,
#page-dialer.skin-glass #dialer-active #dialer-outcome-section textarea {
  background: rgba(255,255,255,.13) !important;
  backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.22) !important;
  color: #fff !important;
}
/* Die Nummer: weiss, riesig, schwebt */
#page-dialer.skin-glass #dialer-active #dialer-contact-phone {
  color: #fff !important; background: transparent !important; border: 0 !important;
}
#page-dialer.skin-glass #dialer-active .dcard-phone > div:last-child,
#page-dialer.skin-glass #dialer-active #dialer-contact-email { color: rgba(255,255,255,.6) !important; }
#page-dialer.skin-glass #dialer-active #dialer-heat-flame ~ *,
#page-dialer.skin-glass #dialer-active #dialer-score-val { color: #fff !important; }

/* Anruf-Knopf: die eine kraeftige Geste — Gruen = anrufen, glueht auf dem Twilight */
#page-dialer.skin-glass #dialer-active #dialer-call-btn {
  background: linear-gradient(135deg, #34d058, #22c55e) !important;
  color: #06240f !important; border: 0 !important;
  box-shadow: 0 14px 40px rgba(48,209,88,.42) !important;
}

/* Ergebnis-Kacheln schweben als frosted Pillen; "Termin" ist die eine satte Geste */
#page-dialer.skin-glass #dialer-active #dialer-outcome-section { background: transparent !important; border: 0 !important; padding: 0 !important; }
#page-dialer.skin-glass #dialer-active #dialer-outcome-section > div:first-child { color: rgba(255,255,255,.6) !important; }
#page-dialer.skin-glass #dialer-active .dialer-outcome-btn .oc-txt,
#page-dialer.skin-glass #dialer-active .dialer-outcome-btn .oc-val,
#page-dialer.skin-glass #dialer-active .dialer-outcome-btn .oc-sub { color: #fff !important; }
#page-dialer.skin-glass #dialer-active .dialer-outcome-btn.oc-gold {
  background: rgba(48,209,88,.9) !important; border-color: transparent !important;
}
#page-dialer.skin-glass #dialer-active .dialer-outcome-btn.oc-gold .oc-txt,
#page-dialer.skin-glass #dialer-active .dialer-outcome-btn.oc-gold .oc-val { color: #06240f !important; }

/* "Beenden" und Chips oben hell */
#page-dialer.skin-glass #dialer-active button[onclick*="dialerStop"] {
  color: #fff !important; border-color: rgba(255,255,255,.4) !important;
}

/* Fix: die immersive Karte oben ausrichten (nicht vertikal zentrieren) — sonst
   rutschen Avatar + Name unter die Kopfzeile. Und etwas Luft nach oben. */
#page-dialer.skin-glass #dialer-active .m-stack {
  place-items: start center !important;
  align-content: start;
  overflow-y: auto; padding-top: 6px;
}
#page-dialer.skin-glass #dialer-active #dialer-callcard { margin-top: 4px; }
/* Avatar + Name sichtbar gross auf dem Twilight */
#page-dialer.skin-glass #dialer-active .dcard-head { padding-top: 2px; }

/* ============================================================================
   13 · MODERN — DER LAUFENDE ANRUF ALS "NEU GEDACHT" (Betreiber-Wunsch)
   Helle, kompakte Karte; die naechsten Kontakte lugen rechts hervor wie ein
   KARTENSTAPEL. Bewusst das Gegenteil der immersiven Liquid-Welt: hier Fassung
   und Kontext (Stapel), dort Eintauchen (freistehend, Twilight). Zwei Welten.
   Ueberschreibt die Now-Playing-Zentrierung aus Abschnitt 11 fuer die Anruf-Maske.
   ============================================================================ */
#page-dialer.skin-modern #dialer-active .m-stack {
  grid-template-columns: 1fr !important; place-items: start center;
}
#page-dialer.skin-modern #dialer-active .m-stack > .card:first-child { display: none !important; }  /* Warteschlange raus */

#page-dialer.skin-modern #dialer-active #dialer-callcard {
  display: flex !important; flex-direction: column;
  max-width: 470px !important; margin: 16px auto 0;
  position: relative; overflow: visible !important;   /* damit der Stapel rausragt */
  gap: 15px !important;
}
/* DER KARTENSTAPEL — zwei Karten faechern nach rechts hinten auf */
#page-dialer.skin-modern #dialer-active #dialer-callcard::before,
#page-dialer.skin-modern #dialer-active #dialer-callcard::after {
  content: ""; display: block !important; position: absolute; z-index: -1;
  border-radius: 24px; background: var(--bg2); border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
#page-dialer.skin-modern #dialer-active #dialer-callcard::before {
  top: 15px; bottom: 15px; left: 18px; right: -15px;          /* ragt 15px nach rechts */
}
#page-dialer.skin-modern #dialer-active #dialer-callcard::after {
  top: 28px; bottom: 28px; left: 34px; right: -28px; opacity: .55;   /* dahinter, weiter */
}

/* Kopf zurueck in die REIHE (Section 11 hatte ihn zentriert) — kompakt, links */
#page-dialer.skin-modern #dialer-active .dcard-head {
  flex-direction: row !important; align-items: center; text-align: left !important; gap: 15px;
}
#page-dialer.skin-modern #dialer-active .dcard-head > div:last-child {
  position: static !important; margin-left: auto;
}
#page-dialer.skin-modern #dialer-active #dialer-contact-name { font-size: 22px !important; }
#page-dialer.skin-modern #dialer-active #dialer-avatar {
  width: 56px !important; height: 56px !important; font-size: 20px !important; border-radius: 16px !important;
}

/* Nummer zurueck in die Reihe, mittelgross (nicht riesig zentriert) */
#page-dialer.skin-modern #dialer-active .dcard-phone {
  flex-direction: row !important; align-items: center !important; justify-content: space-between !important;
  gap: 14px !important;
}
#page-dialer.skin-modern #dialer-active #dialer-contact-phone {
  font-size: 24px !important; text-align: left; width: auto; padding: 0 !important;
  background: transparent !important; border: 0 !important;
}
#page-dialer.skin-modern #dialer-active .dcard-phone {
  background: color-mix(in srgb, var(--accent) 8%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent) !important;
  border-radius: 16px !important; padding: 15px 18px !important;
}

/* ============================================================================
   14 · SETUP FUER BEIDE: HELL, RUHIG, ZENTRIERT  (Betreiber-Entscheidung 15.07.)
   Der Setup ist fuer Modern UND Glass die gleiche ruhige zentrierte Karte mit
   Schritten OBEN. Moderns Cockpit-Rail entfaellt hier — die Dramatik (Kartenstapel
   bzw. dunkles Twilight) kommt erst NACH "Wählaro starten". So wie im
   "Neu gedacht"-Entwurf: der Setup darf leicht sein, da ist Zeit fuer Ruhe.
   ============================================================================ */
#page-dialer.skin-modern .dflow {
  display: flex !important; flex-direction: column; gap: 14px;
  grid-template-columns: none !important; grid-template-areas: none !important;
  grid-template-rows: none !important;
  width: 100%; max-width: 660px; margin: 0 auto;
}
/* Schrittnamen zurueck nach OBEN, horizontal (wie Glass) — keine linke Leiste, keine Nummern */
#page-dialer.skin-modern .dflow-names {
  grid-area: auto !important; flex-direction: row !important;
  border-right: 0 !important; padding-right: 0 !important;
  gap: 5px; margin: 0 0 2px; counter-reset: none;
}
#page-dialer.skin-modern .dflow-names span {
  grid-area: auto !important; flex: 1 1 0 !important;
  padding: 0 !important; background: transparent !important; box-shadow: none !important;
  border-radius: 0; font-size: 11.5px; font-weight: 650; color: var(--text3);
}
#page-dialer.skin-modern .dflow-names span::before { display: none !important; }
#page-dialer.skin-modern .dflow-names span.now { color: var(--text); background: transparent !important; }
#page-dialer.skin-modern .dflow-names span.done::before { display: none !important; }
/* Duenne Fortschrittslinie oben zeigen (wie Glass) */
#page-dialer.skin-modern .dflow-bar { display: flex !important; }
/* Navigation + Start zurueck in den normalen Fluss (nicht mehr im Grid) */
#page-dialer.skin-modern .dflow-nav,
#page-dialer.skin-modern #dialer-start-btn { grid-area: auto !important; }

/* ============================================================================
   15 · ANRUF-FENSTER: Kopf bleibt fest, Karte scrollt INNEN (Fix Lupe-Bug)
   Ging die Nummer-Suche (Lupe) auf, wuchs die Karte ueber den Rand und
   "Naechster Kontakt" verschwand. Jetzt ist die Karte hoehenbegrenzt und
   scrollt notfalls in sich — Kopf (mit Beenden) und Rand bleiben immer da.
   ============================================================================ */
#page-dialer.skin-modern #dialer-active .m-stack,
#page-dialer.skin-glass  #dialer-active .m-stack {
  grid-template-rows: minmax(0, 1fr) !important; min-height: 0;
}
#page-dialer.skin-modern #dialer-active #dialer-callcard,
#page-dialer.skin-glass  #dialer-active #dialer-callcard {
  min-height: 0; max-height: 100%; overflow-y: auto !important; overflow-x: hidden !important;
}

/* Kartenstapel (Modern) NEU: gestaffelte Schatten statt ::before/::after —
   funktioniert MIT innerem Scroll (Pseudo-Elemente brauchten overflow:visible). */
#page-dialer.skin-modern #dialer-active #dialer-callcard::before,
#page-dialer.skin-modern #dialer-active #dialer-callcard::after { display: none !important; }
#page-dialer.skin-modern #dialer-active #dialer-callcard {
  box-shadow:
    var(--shadow),
    15px 5px 0 -5px var(--bg2), 15px 5px 0 -4px var(--border),
    30px 10px 0 -10px var(--bg2), 30px 10px 0 -9px var(--border) !important;
}

/* Die Suchbox (Lupe) etwas kompakter, damit die Karte seltener scrollen muss */
#page-dialer.skin-modern #dialer-active #dialer-find-box,
#page-dialer.skin-glass  #dialer-active #dialer-find-box { padding: 12px 14px !important; }
#page-dialer.skin-glass  #dialer-active #dialer-find-box {
  background: rgba(255,255,255,.12) !important; border-left-color: rgba(255,255,255,.4) !important;
}
#page-dialer.skin-glass #dialer-active #dialer-find-box * { color: #fff !important; }

/* ============================================================================
   16 · MODERN-ANRUF: raus aus dem Dauer-Orange -> moderne, ruhige Palette
   Der Betreiber: "alles zu sehr orange, auch die Nummer". Die FLAMME bleibt orange
   (sie ist die Waehrung), aber die Nummer wird Ink, der Anruf-Knopf indigo-violett
   (passt zum Avatar, klar verschieden von Liquids Gruen).
   ============================================================================ */
#page-dialer.skin-modern #dialer-active #dialer-contact-phone { color: var(--text) !important; }
#page-dialer.skin-modern #dialer-active .dcard-phone {
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
}
#page-dialer.skin-modern #dialer-active #dialer-call-btn {
  background: linear-gradient(135deg, #6366f1, #7c3aed) !important;
  box-shadow: 0 12px 30px rgba(99,102,241,.32) !important;
  color: #fff !important;
}
/* Nummer-Suche (Lupe) im Modern: violett statt grellem Purple-bg, ruhiger */
#page-dialer.skin-modern #dialer-active #dialer-find-box {
  background: color-mix(in srgb, #6366f1 8%, transparent) !important;
  border-left-color: #6366f1 !important;
}

/* Sprung zum naechsten Kontakt: klarer, moderner Knopf (indigo, voll) statt blass-orange */
#page-dialer.skin-modern #dialer-active #dialer-next-btn {
  background: linear-gradient(135deg, #6366f1, #7c3aed) !important;
  color: #fff !important; border: 0 !important;
  box-shadow: 0 10px 26px rgba(99,102,241,.30) !important;
  border-radius: 16px !important; font-weight: 750 !important;
}

/* ============================================================================
   17 · SETUP: nichts strandet, nichts wird abgeschnitten ("alles muss passen")
   (a) Inhalt + "Weiter" gruppieren nach OBEN — kein Leerraum-Loch mehr zwischen
       kurzem Inhalt und dem Knopf. Die Bahn schrumpft auf Inhaltshoehe (gedeckelt).
   (b) Zuordnen: ZWEI Spalten -> viele Felder passen ohne Scroll. Was doch laenger
       ist, scrollt sauber INNEN (mit Rand), statt abgeschnitten zu werden.
   ============================================================================ */
/* Deckel 2026-07-16 von 60vh/580 auf 74vh/720 korrigiert (Betreiber-Fund: "Zuordnen
   scrollt, das will ich da nicht"). Die 60vh waren GERATEN und zu klein: bei 1440x900
   gemessen -> Panel 152..692 (Deckel 540), die Zuordnen-Karte braucht 255..708. Sie wurde
   also um 16px BESCHNITTEN und bekam dafuer einen Scrollbalken - waehrend unter der
   Navigation (endet bei 750) noch 150px frei standen. Genau das, was die Ueberschrift
   dieses Abschnitts verhindern soll.
   74vh ist nicht das naechste Raten, sondern gerechnet: Panel-Oberkante 152 + Nav 44 +
   Abstaende + Polster 24 -> ~666px passen bei 900px Fensterhoehe = 74vh.
   Der Deckel BLEIBT (eine 20-spaltige Tabelle muss innen scrollen, sonst waechst die Seite
   ins Uferlose) - er greift jetzt nur noch, wenn wirklich kein Platz mehr ist.
   Handy bleibt unberuehrt: §21 setzt dort max-height:none. */
#page-dialer.skin-modern .dflow-viewport,
#page-dialer.skin-glass  .dflow-viewport {
  flex: 0 1 auto !important; max-height: min(74vh, 720px);
}
#page-dialer.skin-modern .dflow-panel,
#page-dialer.skin-glass  .dflow-panel {
  height: auto !important; max-height: min(74vh, 720px);
  overflow-y: auto; overflow-x: hidden;
}

/* Zuordnen: zwei Spalten (auf schmalen Fenstern eine) */
#page-dialer.skin-modern #dialer-mapping-grid,
#page-dialer.skin-glass  #dialer-mapping-grid {
  display: grid !important; grid-template-columns: 1fr 1fr !important;
  gap: 2px 24px !important;
}
@media (max-width: 640px) {
  #page-dialer.skin-modern #dialer-mapping-grid,
  #page-dialer.skin-glass  #dialer-mapping-grid { grid-template-columns: 1fr !important; }
}
#page-dialer.skin-modern #dialer-mapping-grid > *,
#page-dialer.skin-glass  #dialer-mapping-grid > * {
  padding: 8px 0 !important; border-bottom: 1px solid var(--border) !important;
}

/* 17b · Zuordnen verdichten, damit ALLE Felder ohne Abschnitt passen */
#page-dialer.skin-modern .dflow-panel,
#page-dialer.skin-glass  .dflow-panel { max-height: min(66vh, 640px); }
#page-dialer.skin-modern #dialer-mapping-grid > div,
#page-dialer.skin-glass  #dialer-mapping-grid > div { padding: 4px 0 !important; }
#page-dialer.skin-modern #dialer-mapping-grid label,
#page-dialer.skin-glass  #dialer-mapping-grid label { margin-bottom: 2px !important; }
#page-dialer.skin-modern #dialer-mapping-grid select,
#page-dialer.skin-glass  #dialer-mapping-grid select { padding: 6px 12px !important; }
/* das Beispiel ("z. B. ...") ist der div direkt nach dem Dropdown -> kompakt */
#page-dialer.skin-modern #dialer-mapping-grid select + div,
#page-dialer.skin-glass  #dialer-mapping-grid select + div { margin-top: 2px !important; font-size: 10.5px !important; }

/* ============================================================================
   18 · LIQUID iOS 27 — klareres Glas, luminoeser Grund (Betreiber-Wunsch)
   Weg vom reinen Lila-Twilight: ein luminoeser, mehrfarbiger Wallpaper-Grund
   (Blau -> Violett -> warmes Rosé, mit einem Hauch Teal). Und das Glas wird
   KLARER/durchsichtiger + mehr Blur — iOS 27 laesst das Glas den Grund BRECHEN,
   statt ihn zu decken. Das ist der Kern des Liquid-Effekts.
   ============================================================================ */
#page-dialer.skin-glass #dialer-active {
  background:
    radial-gradient(74rem 54rem at 12% -8%,  rgba(96,156,255,.44), transparent 56%),
    radial-gradient(62rem 50rem at 90% 6%,   rgba(170,124,255,.40), transparent 58%),
    radial-gradient(54rem 46rem at 64% 116%, rgba(255,148,120,.30), transparent 58%),
    radial-gradient(42rem 38rem at 38% 66%,  rgba(84,224,214,.20), transparent 60%),
    linear-gradient(158deg, #3a4a8e 0%, #64539f 46%, #9c5f86 100%) !important;
}
/* Klareres Glas: weniger Deckkraft, mehr Blur -> der bunte Grund scheint durch */
#page-dialer.skin-glass #dialer-active .dcard-phone,
#page-dialer.skin-glass #dialer-active #dialer-heat-box,
#page-dialer.skin-glass #dialer-active #dialer-outcome-section .dialer-outcome-btn,
#page-dialer.skin-glass #dialer-active #dialer-outcome-section textarea,
#page-dialer.skin-glass #dialer-active #dialer-find-box {
  background: rgba(255,255,255,.10) !important;
  backdrop-filter: blur(30px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(200%) !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 12px 34px rgba(20,20,60,.24) !important;
}
/* Avatar bekommt auch die klarere Glas-Anmutung + eine feine Lichtkante */
#page-dialer.skin-glass #dialer-active #dialer-avatar {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 16px 40px rgba(0,0,0,.28) !important;
}

/* ============================================================================
   19 · LIQUID iOS 27 — RICHTIG klar (Nachbesserung: "viel glasiger, Farben wie iOS")
   Vorher: halbdeckende Lila-BLOECKE. iOS-27-Liquid-Glass ist fast durchsichtig — das
   bunte Wallpaper scheint DURCH, eine helle Lichtkante fasst die Platte ein, ein
   Specular-Streifen oben. Farbe kommt vom GRUND, nicht von der Platte.
   ============================================================================ */
/* Der Grund: lebendiges, mehrfarbiges Wallpaper (Blau · Teal · Violett · Pink · Warm) */
#page-dialer.skin-glass #dialer-active {
  background:
    radial-gradient(58rem 50rem at 16%  6%, rgba(72,132,255,.70), transparent 54%),
    radial-gradient(50rem 46rem at 84% 14%, rgba(150,110,255,.62), transparent 55%),
    radial-gradient(52rem 48rem at 78% 96%, rgba(255,104,168,.58), transparent 55%),
    radial-gradient(46rem 42rem at 20% 92%, rgba(255,158,86,.48), transparent 55%),
    radial-gradient(42rem 40rem at 48% 52%, rgba(64,224,214,.34), transparent 58%),
    linear-gradient(150deg, #4a63cf 0%, #7a54b6 48%, #b85f88 100%) !important;
}
/* Die Platten: FAST durchsichtig, starke Lichtkante, kraeftiger Blur -> echtes Glas */
#page-dialer.skin-glass #dialer-active .dcard-phone,
#page-dialer.skin-glass #dialer-active #dialer-heat-box,
#page-dialer.skin-glass #dialer-active #dialer-outcome-section .dialer-outcome-btn,
#page-dialer.skin-glass #dialer-active #dialer-outcome-section textarea,
#page-dialer.skin-glass #dialer-active #dialer-find-box {
  background: rgba(255,255,255,.055) !important;
  backdrop-filter: blur(34px) saturate(210%) brightness(1.06) !important;
  -webkit-backdrop-filter: blur(34px) saturate(210%) brightness(1.06) !important;
  border: 1px solid rgba(255,255,255,.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(255,255,255,.10),
    0 14px 40px rgba(20,20,60,.22) !important;
}
/* Specular-Streifen oben auf der grossen Nummern-Platte (der "Glas-Glanz") */
#page-dialer.skin-glass #dialer-active .dcard-phone { position: relative; overflow: hidden; }
#page-dialer.skin-glass #dialer-active .dcard-phone::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(155deg, rgba(255,255,255,.30), transparent 42%);
}
#page-dialer.skin-glass #dialer-active .dcard-phone > * { position: relative; z-index: 1; }
/* Weisse Schrift auf dem bunten, klaren Grund lesbar halten */
#page-dialer.skin-glass #dialer-active #dialer-contact-name,
#page-dialer.skin-glass #dialer-active #dialer-contact-phone { text-shadow: 0 1px 12px rgba(20,20,60,.35); }

/* ============================================================================
   20 · KEIN SCROLLEN. NIRGENDS.  (Betreiber-Regel, hart)
   Ein Scrollbalken im Wählaro ist un-Apple. Drei Aenderungen:
   (a) Die Nummer-Suche (Lupe) schwebt als OVERLAY ueber der Karte — sie waechst
       die Karte nicht mehr, also entsteht kein Scroll.
   (b) Die Karte scrollt NIE mehr in sich (das war die falsche Logik von vorhin).
   (c) Der Ergebnis-Block wird verdichtet, damit alles immer passt.
   ============================================================================ */
#page-dialer.skin-modern #dialer-active,
#page-dialer.skin-glass  #dialer-active { position: relative; overflow: hidden !important; }

/* (b) inneres Scrollen abschalten — Karte + Bahn duerfen NICHT scrollen */
#page-dialer.skin-modern #dialer-active #dialer-callcard,
#page-dialer.skin-glass  #dialer-active #dialer-callcard {
  overflow: visible !important; max-height: none !important;
}
#page-dialer.skin-modern #dialer-active .m-stack,
#page-dialer.skin-glass  #dialer-active .m-stack {
  overflow: visible !important; grid-template-rows: auto !important; align-content: start;
}

/* (a) Lupe = schwebendes Overlay, zentriert, mit sanftem Backdrop */
#page-dialer.skin-modern #dialer-active #dialer-find-box,
#page-dialer.skin-glass  #dialer-active #dialer-find-box {
  position: absolute !important; left: 50%; top: 50%;
  transform: translate(-50%, -50%); z-index: 60;
  width: min(460px, 90%); margin: 0 !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.45) !important;
}
#page-dialer.skin-modern #dialer-active #dialer-find-box::after,
#page-dialer.skin-glass  #dialer-active #dialer-find-box::after {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: rgba(12,14,34,.34);
}

/* (c) Ergebnis-Block verdichten, damit die Karte ohne Scroll passt */
#page-dialer.skin-modern #dialer-active #dialer-callcard,
#page-dialer.skin-glass  #dialer-active #dialer-callcard { gap: 12px !important; }
#page-dialer.skin-modern #dialer-active .dialer-outcome-btn,
#page-dialer.skin-glass  #dialer-active .dialer-outcome-btn {
  padding: 11px 13px !important; min-height: 46px !important;
}
#page-dialer.skin-modern #dialer-active #dialer-outcome-section textarea,
#page-dialer.skin-glass  #dialer-active #dialer-outcome-section textarea { padding: 10px 13px !important; }

/* Der weisse Rand auf den Ergebnis-Kacheln (Liquid) passte nicht -> viel dezenter,
   die farbigen Kacheln behalten ihre eigene Kante */
#page-dialer.skin-glass #dialer-active #dialer-outcome-section .dialer-outcome-btn {
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 8px 22px rgba(20,20,60,.14) !important;
}

/* ============================================================================
   21 · ALLES MUSS PASSEN — Karte wirklich verdichten (kein Scroll, kein Abschnitt)
   Die Karte war ~120-250px zu hoch. Der Ergebnis-Block + Held werden kompakter,
   Sekundaeres (3CX-Browser-Fallback, Dauer) tritt zurueck. Ziel: passt bei jeder
   vernuenftigen Fensterhoehe ohne Scrollbalken und ohne Abschnitt.
   ============================================================================ */
#page-dialer.skin-modern #dialer-active #dialer-callcard,
#page-dialer.skin-glass  #dialer-active #dialer-callcard { gap: 10px !important; }

/* Held kompakter */
#page-dialer.skin-modern #dialer-active #dialer-avatar,
#page-dialer.skin-glass  #dialer-active #dialer-avatar {
  width: 54px !important; height: 54px !important; font-size: 19px !important;
}
#page-dialer.skin-glass #dialer-active #dialer-contact-name { font-size: 23px !important; }
#page-dialer.skin-modern #dialer-active .dcard-head,
#page-dialer.skin-glass  #dialer-active .dcard-head { gap: 8px !important; }

/* Nummer-Platte flacher */
#page-dialer.skin-glass #dialer-active .dcard-phone { padding: 14px 18px !important; }
#page-dialer.skin-glass #dialer-active #dialer-contact-phone { font-size: 32px !important; }

/* Anruf-Knopf etwas flacher */
#page-dialer.skin-modern #dialer-active #dialer-call-btn,
#page-dialer.skin-glass  #dialer-active #dialer-call-btn { padding: 14px !important; }

/* Sekundaeres tritt zurueck: 3CX-Browser-Fallback klein, Dauer schlank */
#page-dialer.skin-modern #dialer-active #dialer-call-web-btn,
#page-dialer.skin-glass  #dialer-active #dialer-call-web-btn {
  padding: 6px 12px !important; font-size: 11.5px !important; opacity: .85;
}
#page-dialer.skin-modern #dialer-active #dialer-call-status,
#page-dialer.skin-glass  #dialer-active #dialer-call-status { font-size: 11px !important; min-height: 0 !important; }

/* Ergebnis-Block dichter: Ueberschrift + Abstaende kleiner, Notiz einzeilig */
#page-dialer.skin-modern #dialer-active #dialer-outcome-section > div:first-child,
#page-dialer.skin-glass  #dialer-active #dialer-outcome-section > div:first-child {
  margin-bottom: 6px !important; font-size: 10px !important;
}
#page-dialer.skin-modern #dialer-active .dialer-outcome-btn,
#page-dialer.skin-glass  #dialer-active .dialer-outcome-btn {
  padding: 9px 12px !important; min-height: 42px !important;
}
#page-dialer.skin-modern #dialer-active #dialer-outcome-section textarea,
#page-dialer.skin-glass  #dialer-active #dialer-outcome-section textarea {
  padding: 8px 12px !important; min-height: 38px !important; rows: 1;
}

/* 22 · Letzter Schliff "alles passt": Glass weniger Polster + kurze Fenster dichter */
#page-dialer.skin-glass #dialer-active { padding: 12px 18px 14px !important; }
#page-dialer.skin-glass #dialer-active .m-stack { padding-top: 0 !important; }

@media (max-height: 1000px) {
  #page-dialer.skin-modern #dialer-active #dialer-callcard,
  #page-dialer.skin-glass  #dialer-active #dialer-callcard { gap: 7px !important; }
  #page-dialer.skin-glass  #dialer-active #dialer-contact-phone { font-size: 27px !important; }
  #page-dialer.skin-glass  #dialer-active .dcard-phone { padding: 11px 16px !important; }
  #page-dialer.skin-modern #dialer-active .dialer-outcome-btn,
  #page-dialer.skin-glass  #dialer-active .dialer-outcome-btn { min-height: 38px !important; padding: 7px 11px !important; }
  #page-dialer.skin-modern #dialer-active #dialer-heat-box,
  #page-dialer.skin-glass  #dialer-active #dialer-heat-box { padding: 6px 12px !important; }
  #page-dialer.skin-modern #dialer-active #dialer-avatar,
  #page-dialer.skin-glass  #dialer-active #dialer-avatar { width: 48px !important; height: 48px !important; }
  #page-dialer.skin-modern #dialer-active #dialer-call-btn,
  #page-dialer.skin-glass  #dialer-active #dialer-call-btn { padding: 12px !important; }
}

/* 22b · kurze Fenster: die letzten Pixel (Notiz + Abstaende) */
@media (max-height: 1000px) {
  #page-dialer.skin-modern #dialer-active #dialer-callcard,
  #page-dialer.skin-glass  #dialer-active #dialer-callcard { gap: 6px !important; }
  #page-dialer.skin-modern #dialer-active #dialer-outcome-section textarea,
  #page-dialer.skin-glass  #dialer-active #dialer-outcome-section textarea { min-height: 30px !important; }
  #page-dialer.skin-glass  #dialer-active #dialer-contact-name { font-size: 21px !important; }
  #page-dialer.skin-modern #dialer-active #dialer-outcome-section,
  #page-dialer.skin-glass  #dialer-active #dialer-outcome-section { --oc-gap: 6px; }
}

/* ============================================================================
   23 · DREI BETREIBER-WUENSCHE (15.07. abend)
   ----------------------------------------------------------------------------
   (1) LIQUID: Ergebnis-Kacheln = FARBIGE GLAS-TROPFEN. Bisher fast unsichtbares
       Weissglas — jetzt traegt jede Kachel ihre Semantik-Farbe als TRANSLUZENTES
       Glas (Farbe + Blur + Lichtkante), der bunte Grund scheint durch. "Termin"
       (Gold) ist die kraeftigste; Gold bekommt dunkle Schrift (weiss auf Gelb
       waere unlesbar), alles andere weiss mit dezentem Schatten.
   (2) DIE LUPE: KEIN zentriertes Overlay, KEIN Backdrop mehr. Sie wird ein
       POPOVER, das direkt unter der Nummern-Platte aufklappt (Anker setzt
       dialerShowFindBox in dialer.js: top = Unterkante der Platte). Absolut
       positioniert -> die Karte waechst nicht, nichts scrollt.
   (3) RUND AUF RUND: konzentrische Radien. Modern-Karte r=30 bei 20px Polster
       -> alles Innenliegende r=10 (30-20), Knoepfe als Pillen (immer konzentrisch-
       sicher). Glass: freistehende Platten in EINER Radius-Familie (20/16/14).
   Klassik: keine Regel hier greift ohne .skin-modern/.skin-glass.
   ============================================================================ */

/* ---------- (2) LUPE ALS POPOVER — beide Haeute ---------- */
#page-dialer.skin-modern #dialer-active .dcard-main,
#page-dialer.skin-glass  #dialer-active .dcard-main { position: relative; }

#page-dialer.skin-modern #dialer-active #dialer-find-box,
#page-dialer.skin-glass  #dialer-active #dialer-find-box {
  position: absolute !important;
  left: 0; right: 0; top: 0;              /* top ueberschreibt dialer.js beim Oeffnen (Anker unter der Nummer) */
  transform: none;                        /* kein translate(-50%,-50%) mehr */
  width: auto;
  margin: 0 !important;
  z-index: 70;
  transform-origin: 50% 0;
  animation: dfind-pop .32s cubic-bezier(.32,.72,0,1);
}
/* Der dunkle Backdrop ist weg — ein Popover braucht keine Verdunkelung */
#page-dialer.skin-modern #dialer-active #dialer-find-box::after,
#page-dialer.skin-glass  #dialer-active #dialer-find-box::after { display: none !important; }

@keyframes dfind-pop {
  from { opacity: 0; transform: translateY(-8px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #page-dialer.skin-modern #dialer-active #dialer-find-box,
  #page-dialer.skin-glass  #dialer-active #dialer-find-box { animation: none; }
}

/* Lupe in LIQUID: klares Glas-Popover mit tiefem, weichem Schatten.
   Etwas dichter als die Platten — unter ihm liegen bunte Kacheln, und die
   duerfen die Eingabe nicht ueberstrahlen. */
#page-dialer.skin-glass #dialer-active #dialer-find-box {
  background: rgba(255,255,255,.26) !important;
  backdrop-filter: blur(40px) saturate(200%) brightness(1.08) !important;
  -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(1.08) !important;
  border: 1px solid rgba(255,255,255,.40) !important;
  border-radius: 20px !important;
  padding: 14px 16px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 24px 60px rgba(20,20,60,.42) !important;
}
#page-dialer.skin-glass #dialer-active #dialer-find-links a {
  background: rgba(255,255,255,.18) !important;
  border: 1px solid rgba(255,255,255,.36) !important;
  color: #fff !important;
}
#page-dialer.skin-glass #dialer-active #dialer-find-links a:hover { background: rgba(255,255,255,.30) !important; }
#page-dialer.skin-glass #dialer-active #dialer-fix-phone {
  background: rgba(255,255,255,.22) !important;
  border: 1px solid rgba(255,255,255,.36) !important;
  border-radius: 10px !important;
  color: #fff !important;
}
#page-dialer.skin-glass #dialer-active #dialer-fix-phone::placeholder { color: rgba(255,255,255,.55); }
#page-dialer.skin-glass #dialer-active #dialer-find-box button[onclick*="dialerFixNumber"] {
  background: linear-gradient(135deg, #4aa3ff, #0a84ff) !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 18px rgba(10,132,255,.35);
}
#page-dialer.skin-glass #dialer-active #dialer-find-box > div:last-child { opacity: .66; }

/* Lupe in MODERN: saubere helle Karte (folgt Hell/Dunkel), kein Violett-Kasten */
#page-dialer.skin-modern #dialer-active #dialer-find-box {
  background: var(--bg2) !important;
  border: 1px solid var(--border2) !important;
  border-radius: 10px !important;          /* konzentrisch: Karte 30 - Polster 20 */
  padding: 14px 16px !important;
  box-shadow: 0 2px 8px rgba(18,22,50,.08), 0 18px 48px rgba(18,22,50,.22) !important;
}
#page-dialer.skin-modern #dialer-active #dialer-find-links a {
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  color: var(--text2) !important;
  padding: 6px 10px !important;      /* alle vier Quellen in EINER Zeile */
  font-size: 12px !important;
}
#page-dialer.skin-modern #dialer-active #dialer-find-links a:hover { color: var(--text) !important; border-color: var(--border2) !important; }
#page-dialer.skin-modern #dialer-active #dialer-fix-phone { border-radius: 8px !important; }
#page-dialer.skin-modern #dialer-active #dialer-find-box button[onclick*="dialerFixNumber"] {
  background: linear-gradient(135deg, #6366f1, #7c3aed) !important;   /* wie der Anruf-Knopf */
  border-radius: 8px !important;
}

/* ---------- (1) LIQUID: FARBIGE GLAS-TROPFEN ---------- */
/* Gemeinsames Material: Farbe ALS Glas — halbtransparent, Blur, Lichtkante oben */
#page-dialer.skin-glass #dialer-active #dialer-outcome-section .dialer-outcome-btn {
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.34) !important;
  backdrop-filter: blur(26px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(190%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.50),
    inset 0 -1px 0 rgba(255,255,255,.08),
    0 10px 26px rgba(20,20,60,.22) !important;
}
#page-dialer.skin-glass #dialer-active #dialer-outcome-section .dialer-outcome-btn:hover { filter: brightness(1.1); }
#page-dialer.skin-glass #dialer-active .dialer-outcome-btn .oc-txt,
#page-dialer.skin-glass #dialer-active .dialer-outcome-btn .oc-sub { text-shadow: 0 1px 8px rgba(15,15,50,.35); }
/* Flammen-Wert als kleine Glas-Pille — lesbar statt halb verschwunden */
#page-dialer.skin-glass #dialer-active .dialer-outcome-btn .oc-val {
  background: rgba(255,255,255,.20);
  padding: 3px 9px; border-radius: 999px;
  opacity: 1 !important; font-size: 11px !important;
}

/* Jede Kachel ihre Semantik-Farbe (iOS-Systemfarben, transluzent).
   Der Grund ist violett-rosa — zu duenne Farbe wird darauf zu Matsch. Die Tropfen
   brauchen Dichte (~55%), damit die Farbe SPRICHT und trotzdem Grund durchscheint. */
#page-dialer.skin-glass #dialer-active #dialer-outcome-section .dialer-outcome-btn.oc-win {
  background: rgba(40,195,80,.58) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.50), 0 10px 26px rgba(48,209,88,.30) !important;
}
#page-dialer.skin-glass #dialer-active #dialer-outcome-section .dialer-outcome-btn.oc-done {
  background: rgba(255,255,255,.20) !important;
}
#page-dialer.skin-glass #dialer-active #dialer-outcome-section .dialer-outcome-btn.oc-calm {
  background: rgba(76,102,160,.55) !important;
}
#page-dialer.skin-glass #dialer-active #dialer-outcome-section .dialer-outcome-btn.oc-open {
  background: rgba(30,160,225,.58) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.50), 0 10px 26px rgba(50,173,230,.30) !important;
}
#page-dialer.skin-glass #dialer-active #dialer-outcome-section .dialer-outcome-btn.oc-data {
  background: rgba(185,75,240,.55) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.50), 0 10px 26px rgba(191,90,242,.30) !important;
}
#page-dialer.skin-glass #dialer-active #dialer-outcome-section .dialer-outcome-btn.oc-skip {
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.18) !important;
  box-shadow: none !important;
  /* wenig Saettigung: der Ausweich-Knopf darf das grelle Pink des Grunds
     nicht aufsaugen — er soll der leiseste sein */
  backdrop-filter: blur(20px) saturate(110%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(110%) !important;
}
/* Die Notiz-Textarea leuchtete ueber der rosa Ecke magenta — mehr Weiss,
   weniger Saettigung: ruhiges Milchglas statt Neonschild */
#page-dialer.skin-glass #dialer-active #dialer-outcome-section textarea {
  background: rgba(255,255,255,.14) !important;
  backdrop-filter: blur(24px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(125%) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 8px 20px rgba(20,20,60,.14) !important;
}
#page-dialer.skin-glass #dialer-active #dialer-outcome-section textarea::placeholder { color: rgba(255,255,255,.55); }

/* GOLD = Termin: die kraeftigste, ein warmer Glas-Tropfen. Dunkle Schrift —
   weiss auf Gelb waere unlesbar; genau so macht es iOS bei gelben Flaechen. */
#page-dialer.skin-glass #dialer-active #dialer-outcome-section .dialer-outcome-btn.oc-gold {
  background: linear-gradient(135deg, rgba(255,214,10,.94), rgba(255,159,10,.86)) !important;
  border: 1px solid rgba(255,240,180,.70) !important;
  border-radius: 18px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    0 12px 34px rgba(255,170,30,.45) !important;
}
#page-dialer.skin-glass #dialer-active .dialer-outcome-btn.oc-gold .oc-txt,
#page-dialer.skin-glass #dialer-active .dialer-outcome-btn.oc-gold .oc-sub,
#page-dialer.skin-glass #dialer-active .dialer-outcome-btn.oc-gold .oc-val {
  color: #4a3200 !important; text-shadow: none;
}
#page-dialer.skin-glass #dialer-active .dialer-outcome-btn.oc-gold .oc-val { background: rgba(74,50,0,.14); }

/* ---------- (3) RUND AUF RUND + FEINSCHLIFF ---------- */

/* GLASS: eine Radius-Familie fuer die freistehenden Platten */
#page-dialer.skin-glass #dialer-active .dcard-phone { border-radius: 20px !important; }
#page-dialer.skin-glass #dialer-active #dialer-avatar { border-radius: 18px !important; }
#page-dialer.skin-glass #dialer-active #dialer-outcome-section textarea { border-radius: 14px !important; }
/* Knoepfe als Pillen — Pillen sind immer konzentrisch-sicher */
#page-dialer.skin-glass #dialer-active #dialer-call-btn { border-radius: 999px !important; }
#page-dialer.skin-glass #dialer-active #dialer-next-btn {
  border-radius: 999px !important;
  background: rgba(255,255,255,.92) !important;
  color: #241a55 !important;
  border: 0 !important;
  box-shadow: inset 0 1px 0 #fff, 0 14px 34px rgba(20,20,60,.35) !important;
  font-weight: 750 !important;
}
/* Die Notiz aus der Liste ("Interesse an Paket A"): bisher eine SOLIDE Creme-
   Flaeche — der einzige Fremdkoerper auf der Buehne. Jetzt warmes Bernstein-Glas. */
#page-dialer.skin-glass #dialer-active #dialer-contact-note-wrap {
  background: rgba(255,190,80,.20) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,220,150,.38) !important;
  border-left: 3px solid rgba(255,200,90,.85) !important;
  border-radius: 14px !important;
  color: rgba(255,255,255,.92) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 22px rgba(20,20,60,.16);
}

/* 23b · KURZE FENSTER: die neuen Teile (Flammen-Pillen, Popover) duerfen die
   "alles passt"-Regel nicht brechen. Der groesste Hebel ist der 16px-Blockabstand
   in .dcard-main — bei wenig Hoehe reicht die Haelfte. Nur <=1000px Fensterhoehe. */
@media (max-height: 1000px) {
  #page-dialer.skin-modern #dialer-active .dcard-main,
  #page-dialer.skin-glass  #dialer-active .dcard-main { gap: 8px !important; }
  #page-dialer.skin-glass  #dialer-active .dcard-phone { padding: 9px 14px !important; }
  #page-dialer.skin-glass  #dialer-active #dialer-contact-phone { font-size: 24px !important; }
  #page-dialer.skin-modern #dialer-active .dialer-outcome-btn .oc-val,
  #page-dialer.skin-glass  #dialer-active .dialer-outcome-btn .oc-val { padding: 1px 7px; font-size: 10px !important; }
  #page-dialer.skin-modern #dialer-active #dialer-contact-note-wrap,
  #page-dialer.skin-glass  #dialer-active #dialer-contact-note-wrap { padding: 6px 12px !important; font-size: 11px !important; }
  #page-dialer.skin-modern #dialer-active #dialer-call-btn,
  #page-dialer.skin-glass  #dialer-active #dialer-call-btn { padding: 10px !important; font-size: 15px !important; }
  #page-dialer.skin-modern #dialer-active .dcard-call,
  #page-dialer.skin-glass  #dialer-active .dcard-call { padding: 2px 0 !important; gap: 4px !important; }
  #page-dialer.skin-modern #dialer-active #dialer-next-btn,
  #page-dialer.skin-glass  #dialer-active #dialer-next-btn { padding: 10px !important; font-size: 14px !important; }
  #page-dialer.skin-modern #dialer-active #dialer-outcome-section textarea,
  #page-dialer.skin-glass  #dialer-active #dialer-outcome-section textarea { min-height: 26px !important; }
  /* konzentrisch bleiben: weniger Polster (16) -> kleinere Karten-Rundung (26 = 16+10) */
  #page-dialer.skin-modern #dialer-active #dialer-callcard { padding: 16px !important; border-radius: 26px !important; }
  #page-dialer.skin-glass  #dialer-active { padding: 8px 14px 8px !important; }
  #page-dialer.skin-glass  #dialer-active > div:first-child { padding: 0.4rem 0 0.6rem !important; }
  #page-dialer.skin-glass  #dialer-active #dialer-callcard { margin-top: 0 !important; }
  #page-dialer.skin-glass  #dialer-active #dialer-avatar { width: 44px !important; height: 44px !important; font-size: 17px !important; }
  #page-dialer.skin-glass  #dialer-active #dialer-contact-company { font-size: 12.5px !important; margin-top: 2px !important; }
  #page-dialer.skin-glass  #dialer-active #dialer-heat-box { padding: 4px 10px !important; }
  #page-dialer.skin-glass  #dialer-active #dialer-outcome-section > div:first-child { margin-bottom: 4px !important; }
}

/* MODERN: Karte r=30 bei 20px Polster -> innen exakt r=10 (konzentrisch) */
#page-dialer.skin-modern #dialer-active #dialer-callcard {
  border-radius: 30px !important;
  padding: 20px !important;
}
#page-dialer.skin-modern #dialer-active .dcard-phone,
#page-dialer.skin-modern #dialer-active #dialer-contact-note-wrap,
#page-dialer.skin-modern #dialer-active #dialer-outcome-section textarea { border-radius: 10px !important; }
#page-dialer.skin-modern #dialer-active #dialer-avatar { border-radius: 12px !important; }
/* Der Ergebnis-Kasten-im-Kasten faellt weg: Rund-in-rund-in-rund geht nie
   konzentrisch auf. Die Kacheln liegen jetzt direkt auf der Karte (r=10). */
#page-dialer.skin-modern #dialer-active #dialer-outcome-section {
  background: transparent !important; border: 0 !important;
  padding: 0 !important; border-radius: 0 !important;
}
#page-dialer.skin-modern #dialer-active #dialer-outcome-section .dialer-outcome-btn {
  border-radius: 10px !important;
}
/* Knoepfe als Pillen (wie die "Weiter"-Pillen im Setup) */
#page-dialer.skin-modern #dialer-active #dialer-call-btn,
#page-dialer.skin-modern #dialer-active #dialer-next-btn { border-radius: 999px !important; }

/* ============================================================================
   24 · LIQUID GLASS iOS 27 = DURCH KLARES GLAS auf einen FLIESSENDEN Grund
   ----------------------------------------------------------------------------
   Der Kern von iOS-27-Liquid-Glass: man schaut DURCH durchsichtiges Glas auf einen
   schoenen, farbigen, luminoesen Grund dahinter (Brechung/Refraktion). Also braucht
   es BEIDES: (1) einen gorgeous, fliessenden, mehrfarbig-irideszenten HELLEN Grund
   (kein flaches Lila, kein Weiss) UND (2) wirklich transparente Platten, durch die
   der bunte Grund KLAR durchscheint (Blur + starke Lichtkante = echtes Glas).

   Weil der Grund hell-luminoes ist -> DUNKLER Ink-Text (mit zartem Licht-Halo, wo
   noetig). Die farbigen Glas-Tropfen-Knoepfe BLEIBEN — auf den bunten Grund so
   abgestimmt, dass sie knallen und lesbar sind.

   Gilt NUR skin-glass, NUR #dialer-active. Modern + Klassik: keine Regel hier greift
   ohne .skin-glass. Als letzter Abschnitt -> der Cascade kippt die alten Annahmen
   (dunkler Twilight-Grund + weisse Schrift, §12/15/18/19/20/23).
   ============================================================================ */

/* --- (1) DER FLIESSENDE SEIDEN-GRUND (iOS-26/27-Wallpaper, Betreiber-Vorlage) ---
   Gefaltete Seide / fluessiges Satin: warmes CHAMPAGNER/GOLD oben -> Sand/Taupe ->
   kuehles Greige -> kuehles SCHIEFER-GRAU unten (Hauch kuehler Lavendel/Blau). Edel,
   neutral, sophisticated. AUSDRUECKLICH kein Weinrot/Lila/Magenta/Pink.
   Technik: ein warm->kuehl Basis-Verlauf + geschichtete, weiche, diagonale Licht-
   Streifen und Falten-Schatten (die Seiden-Schwuenge) + grosse Tiefe-Blobs. */
#page-dialer.skin-glass #dialer-active {
  position: relative !important;
  overflow: hidden !important;
  padding: 18px 26px 22px !important;
  color: #23252e !important;
  /* Inline-SVG (weich geblurrte, fliessende Seiden-Baender = gefaltete Satin-Falten)
     ueber einem Champagner->Schiefer-Fallback. CSP: rein inline, keine externe Datei. */
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'1200'%20height%3D'900'%20viewBox%3D'0%200%201200%20900'%20preserveAspectRatio%3D'xMidYMid%20slice'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'b'%20x1%3D'0'%20y1%3D'0'%20x2%3D'0.12'%20y2%3D'1'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%23f6ead0'%2F%3E%3Cstop%20offset%3D'0.18'%20stop-color%3D'%23eed9ac'%2F%3E%3Cstop%20offset%3D'0.38'%20stop-color%3D'%23dbcaa2'%2F%3E%3Cstop%20offset%3D'0.56'%20stop-color%3D'%23bcb4a3'%2F%3E%3Cstop%20offset%3D'0.74'%20stop-color%3D'%2395959c'%2F%3E%3Cstop%20offset%3D'0.9'%20stop-color%3D'%237c7f8c'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%236b7280'%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D'w'%20cx%3D'0.5'%20cy%3D'0.5'%20r%3D'0.5'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%23fff7de'%20stop-opacity%3D'0.95'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%23fff7de'%20stop-opacity%3D'0'%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D'm'%20cx%3D'0.5'%20cy%3D'0.5'%20r%3D'0.5'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%23e7d1a4'%20stop-opacity%3D'0.8'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%23e7d1a4'%20stop-opacity%3D'0'%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D'c'%20cx%3D'0.5'%20cy%3D'0.5'%20r%3D'0.5'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%235b6176'%20stop-opacity%3D'0.85'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%235b6176'%20stop-opacity%3D'0'%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D'l'%20cx%3D'0.5'%20cy%3D'0.5'%20r%3D'0.5'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%237b7f9a'%20stop-opacity%3D'0.5'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%237b7f9a'%20stop-opacity%3D'0'%2F%3E%3C%2FradialGradient%3E%3Cfilter%20id%3D's'%20x%3D'-25%25'%20y%3D'-25%25'%20width%3D'150%25'%20height%3D'150%25'%3E%3CfeGaussianBlur%20stdDeviation%3D'48'%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20width%3D'1200'%20height%3D'900'%20fill%3D'url(%23b)'%2F%3E%3Cg%20filter%3D'url(%23s)'%3E%3Cellipse%20cx%3D'300'%20cy%3D'105'%20rx%3D'660'%20ry%3D'118'%20fill%3D'url(%23w)'%20transform%3D'rotate(-16%20300%20105)'%2F%3E%3Cellipse%20cx%3D'150'%20cy%3D'300'%20rx%3D'400'%20ry%3D'70'%20fill%3D'url(%23m)'%20transform%3D'rotate(-23%20150%20300)'%20opacity%3D'0.75'%2F%3E%3Cellipse%20cx%3D'1010'%20cy%3D'230'%20rx%3D'560'%20ry%3D'92'%20fill%3D'url(%23w)'%20transform%3D'rotate(-11%201010%20230)'%20opacity%3D'0.7'%2F%3E%3Cellipse%20cx%3D'640'%20cy%3D'360'%20rx%3D'560'%20ry%3D'74'%20fill%3D'url(%23m)'%20transform%3D'rotate(-19%20640%20360)'%20opacity%3D'0.75'%2F%3E%3Cellipse%20cx%3D'840'%20cy%3D'470'%20rx%3D'520'%20ry%3D'78'%20fill%3D'url(%23w)'%20transform%3D'rotate(-25%20840%20470)'%20opacity%3D'0.45'%2F%3E%3Cellipse%20cx%3D'340'%20cy%3D'520'%20rx%3D'680'%20ry%3D'124'%20fill%3D'url(%23c)'%20transform%3D'rotate(-15%20340%20520)'%2F%3E%3Cellipse%20cx%3D'950'%20cy%3D'650'%20rx%3D'480'%20ry%3D'82'%20fill%3D'url(%23l)'%20transform%3D'rotate(-14%20950%20650)'%2F%3E%3Cellipse%20cx%3D'230'%20cy%3D'700'%20rx%3D'420'%20ry%3D'78'%20fill%3D'url(%23l)'%20transform%3D'rotate(-12%20230%20700)'%20opacity%3D'0.7'%2F%3E%3Cellipse%20cx%3D'560'%20cy%3D'780'%20rx%3D'760'%20ry%3D'166'%20fill%3D'url(%23c)'%20transform%3D'rotate(-8%20560%20780)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / cover no-repeat,
    linear-gradient(179deg,
      #f4e7c6 0%, #ecd8ae 18%, #dbc9a3 36%, #bcb4a2 55%, #97969b 74%, #7a7d8a 88%, #6c7280 100%) !important;
}
/* Zweite Seiden-Lage: zusaetzliche Schwuenge in Soft-Light fuer Luminanz + Tiefe */
#page-dialer.skin-glass #dialer-active::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(114deg, transparent 22%, rgba(255,255,255,.30) 33%, transparent 43%),
    linear-gradient(134deg, transparent 60%, rgba(58,64,84,.24) 73%, transparent 86%),
    radial-gradient(48rem 22rem at 60% 44%, rgba(255,246,224,.32), transparent 64%);
  mix-blend-mode: soft-light;
}
#page-dialer.skin-glass #dialer-active > * { position: relative; z-index: 1; }

/* Der Inhalt zentriert sich vertikal, klappt bei knapper Hoehe aber sicher nach
   oben (safe center = kein Abschneiden) */
#page-dialer.skin-glass #dialer-active .m-stack {
  align-content: safe center !important;
}

/* --- KOPFZEILE: dunkle Schrift statt weiss (§12 kippen) --- */
#page-dialer.skin-glass #dialer-active #dialer-active-agent,
#page-dialer.skin-glass #dialer-active [id^="dialer-progress"],
#page-dialer.skin-glass #dialer-active [id^="dialer-mode"] { color: #3a4260 !important; }
#page-dialer.skin-glass #dialer-active button[onclick*="dialerStop"] {
  color: #e5484d !important; border-color: rgba(229,72,77,.5) !important;
}
/* Der "Wählaro"-Titel nutzt inline var(--text) -> in body.dark waere er hell
   auf dem hellen Champagner. Der Seiden-Grund ist IMMER hell -> Titel immer dunkel. */
#page-dialer.skin-glass #dialer-active > div:first-child > div:first-child { color: #23252e !important; }

/* --- KONTAKT: Name/Firma/Index in Ink, mit zartem Licht-Halo (hebt sie vom
   bunten Grund ab, ohne die Lesbarkeit zu opfern) --- */
#page-dialer.skin-glass #dialer-active #dialer-contact-name {
  color: #141a30 !important; text-shadow: 0 1px 10px rgba(255,255,255,.55) !important;
}
#page-dialer.skin-glass #dialer-active #dialer-contact-company {
  color: #414a6c !important; text-shadow: 0 1px 6px rgba(255,255,255,.5) !important;
}
#page-dialer.skin-glass #dialer-active .dcard-head > div:last-child {
  color: #5a6180 !important; background: rgba(255,255,255,.5) !important;
}

/* --- AVATAR: edles Graphit (kein Lila — passt zum neutralen Grund) --- */
#page-dialer.skin-glass #dialer-active #dialer-avatar {
  background: linear-gradient(140deg, #4a5060, #2f3440) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.5) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 12px 26px rgba(40,44,60,.32) !important;
}

/* --- FLAMMEN-LEISTE: KLARES Glas (Grund scheint durch), dunkler Text --- */
#page-dialer.skin-glass #dialer-active #dialer-heat-box {
  background: rgba(255,255,255,.14) !important;
  backdrop-filter: blur(18px) saturate(190%) brightness(1.06) !important;
  -webkit-backdrop-filter: blur(18px) saturate(190%) brightness(1.06) !important;
  border: 1px solid rgba(255,255,255,.62) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 8px 22px rgba(60,40,120,.12) !important;
}
#page-dialer.skin-glass #dialer-active #dialer-score-val,
#page-dialer.skin-glass #dialer-active #dialer-heat-flame ~ * { color: #17203a !important; }
#page-dialer.skin-glass #dialer-active #dialer-heat-streak,
#page-dialer.skin-glass #dialer-active #dialer-score-hint { color: #5c6488 !important; }

/* --- NUMMERN-PLATTE: WIRKLICH durchsichtiges Glas — der bunte Grund scheint klar
   durch (Refraktion). brightness hebt nur die Schrift-Zone, Glas bleibt see-through. */
#page-dialer.skin-glass #dialer-active .dcard-phone {
  background: rgba(255,255,255,.14) !important;
  backdrop-filter: blur(18px) saturate(190%) brightness(1.06) !important;
  -webkit-backdrop-filter: blur(18px) saturate(190%) brightness(1.06) !important;
  border: 1px solid rgba(255,255,255,.68) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(255,255,255,.3),
    0 14px 34px rgba(60,40,120,.16) !important;
}
#page-dialer.skin-glass #dialer-active #dialer-contact-phone {
  color: #141a30 !important; text-shadow: 0 1px 10px rgba(255,255,255,.55) !important;
}
#page-dialer.skin-glass #dialer-active .dcard-phone > div:last-child,
#page-dialer.skin-glass #dialer-active #dialer-contact-email { color: #5c6488 !important; }
/* Der Specular-Streifen (Glas-Glanz) oben auf der Platte — kraeftiger, echtes Licht */
#page-dialer.skin-glass #dialer-active .dcard-phone::after {
  background: linear-gradient(150deg, rgba(255,255,255,.7), rgba(255,255,255,.05) 44%) !important;
}

/* --- NOTIZ AUS DER LISTE: neutrales Glas mit zartem Gold-Akzent (kein Bernstein-
   Klecks auf dem champagnerfarbenen Grund), dunkler Text --- */
#page-dialer.skin-glass #dialer-active #dialer-contact-note-wrap {
  background: rgba(255,255,255,.2) !important;
  backdrop-filter: blur(18px) saturate(160%) brightness(1.06) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) brightness(1.06) !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  border-left: 3px solid rgba(196,158,86,.85) !important;
  color: #4d4838 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 8px 20px rgba(60,50,30,.08) !important;
}

/* --- ERGEBNIS-KACHELN: farbige Glas-Tropfen fuer HELLEN Grund --------------
   Auf dem hellen Frost brauchen die Tropfen getoente Fuellung + DUNKLE Schrift
   (wie iOS-Light-Control: farbige Glasflaeche, dunkle Glyphe). Sichtbar + lesbar. */
#page-dialer.skin-glass #dialer-active #dialer-outcome-section > div:first-child { color: #6c6d76 !important; }

#page-dialer.skin-glass #dialer-active #dialer-outcome-section .dialer-outcome-btn {
  border: 1px solid rgba(255,255,255,.62) !important;
  backdrop-filter: blur(20px) saturate(210%) brightness(1.06) !important;
  -webkit-backdrop-filter: blur(20px) saturate(210%) brightness(1.06) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 8px 22px rgba(60,40,120,.14) !important;
}
/* Text durchgehend dunkler Ink (Gold behaelt sein Braun weiter unten) */
#page-dialer.skin-glass #dialer-active .dialer-outcome-btn .oc-txt,
#page-dialer.skin-glass #dialer-active .dialer-outcome-btn .oc-val,
#page-dialer.skin-glass #dialer-active .dialer-outcome-btn .oc-sub {
  color: #1c2338 !important; text-shadow: none !important;
}
#page-dialer.skin-glass #dialer-active .dialer-outcome-btn .oc-val {
  background: rgba(20,23,45,.08) !important;
}

/* Jede Kachel ihre Semantik-Farbe (iOS-Systemfarben, transluzent auf HELL) */
#page-dialer.skin-glass #dialer-active #dialer-outcome-section .dialer-outcome-btn.oc-win {
  background: rgba(48,200,96,.52) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 8px 22px rgba(48,200,96,.26) !important;
}
#page-dialer.skin-glass #dialer-active #dialer-outcome-section .dialer-outcome-btn.oc-done {
  background: rgba(255,255,255,.18) !important;
}
#page-dialer.skin-glass #dialer-active #dialer-outcome-section .dialer-outcome-btn.oc-calm {
  background: rgba(96,120,170,.36) !important;
}
#page-dialer.skin-glass #dialer-active #dialer-outcome-section .dialer-outcome-btn.oc-open {
  background: rgba(40,175,232,.48) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 8px 22px rgba(40,175,232,.26) !important;
}
#page-dialer.skin-glass #dialer-active #dialer-outcome-section .dialer-outcome-btn.oc-data {
  background: rgba(96,120,182,.44) !important;   /* gedecktes Indigo-Blau, kein Magenta */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 8px 22px rgba(96,120,182,.24) !important;
}
#page-dialer.skin-glass #dialer-active #dialer-outcome-section .dialer-outcome-btn.oc-skip {
  background: rgba(255,255,255,.4) !important;
  border-color: rgba(255,255,255,.6) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6) !important;
}
#page-dialer.skin-glass #dialer-active .dialer-outcome-btn.oc-skip .oc-txt { color: #6a7292 !important; }

/* GOLD = Termin bleibt der laute, warme Tropfen — dunkles Braun (weiss waere
   auf Gelb unlesbar). Auf Hell noch etwas satter, damit er heraussticht. */
#page-dialer.skin-glass #dialer-active #dialer-outcome-section .dialer-outcome-btn.oc-gold {
  background: linear-gradient(135deg, #ffd60a, #ff9f0a) !important;
  border: 1px solid rgba(255,255,255,.7) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 12px 30px rgba(255,168,20,.42) !important;
}
#page-dialer.skin-glass #dialer-active .dialer-outcome-btn.oc-gold .oc-txt,
#page-dialer.skin-glass #dialer-active .dialer-outcome-btn.oc-gold .oc-sub,
#page-dialer.skin-glass #dialer-active .dialer-outcome-btn.oc-gold .oc-val {
  color: #4a3200 !important;
}
#page-dialer.skin-glass #dialer-active .dialer-outcome-btn.oc-gold .oc-val { background: rgba(74,50,0,.16) !important; }

/* --- NOTIZFELD: helles Milchglas, dunkler Text --- */
#page-dialer.skin-glass #dialer-active #dialer-outcome-section textarea {
  background: rgba(255,255,255,.24) !important;
  backdrop-filter: blur(20px) saturate(170%) brightness(1.1) !important;
  -webkit-backdrop-filter: blur(20px) saturate(170%) brightness(1.1) !important;
  border: 1px solid rgba(255,255,255,.68) !important;
  color: #17203a !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 8px 20px rgba(60,40,120,.1) !important;
}
#page-dialer.skin-glass #dialer-active #dialer-outcome-section textarea::placeholder { color: #6c7594 !important; }

/* --- NAECHSTER-KONTAKT: klare indigo CTA (weisse Pille verschwaende auf Frost) --- */
#page-dialer.skin-glass #dialer-active #dialer-next-btn {
  background: linear-gradient(135deg, #6366f1, #7c3aed) !important;
  color: #fff !important;
  box-shadow: 0 12px 30px rgba(99,102,241,.34) !important;
}

/* --- LUPE-POPOVER: helles klares Glas, dunkler Text (§15/§23 kippen) --- */
#page-dialer.skin-glass #dialer-active #dialer-find-box {
  background: rgba(255,255,255,.62) !important;
  backdrop-filter: blur(44px) saturate(180%) brightness(1.04) !important;
  -webkit-backdrop-filter: blur(44px) saturate(180%) brightness(1.04) !important;
  border: 1px solid rgba(255,255,255,.8) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 24px 60px rgba(20,20,60,.30) !important;
}
#page-dialer.skin-glass #dialer-active #dialer-find-box,
#page-dialer.skin-glass #dialer-active #dialer-find-box * { color: #14172b !important; }
#page-dialer.skin-glass #dialer-active #dialer-find-query { color: #2f6bd8 !important; }
#page-dialer.skin-glass #dialer-active #dialer-find-box > div:last-child { color: #6a7292 !important; opacity: 1; }
#page-dialer.skin-glass #dialer-active #dialer-find-links a {
  background: rgba(255,255,255,.7) !important;
  border: 1px solid rgba(20,23,45,.10) !important;
  color: #3a4260 !important;
}
#page-dialer.skin-glass #dialer-active #dialer-find-links a:hover { background: #fff !important; }
#page-dialer.skin-glass #dialer-active #dialer-fix-phone {
  background: rgba(255,255,255,.8) !important;
  border: 1px solid rgba(20,23,45,.12) !important;
  color: #14172b !important;
}
#page-dialer.skin-glass #dialer-active #dialer-fix-phone::placeholder { color: #8890a8 !important; }
#page-dialer.skin-glass #dialer-active #dialer-find-box button[onclick*="dialerFixNumber"] {
  background: linear-gradient(135deg, #4aa3ff, #0a84ff) !important;
  color: #fff !important;
}

/* ============================================================================
   24 · LUPE-POPOVER (Liquid) — eleganter & dichter, kein Durchfaerben (15.07.)
   Das Popover war mit .62 zu durchlaessig und saturate(180%) VERSTAERKTE die
   gruen/cyan Kacheln darunter -> Farbstich, passte nicht zum Champagner-Grund.
   Jetzt: dichtes, warm-neutrales Milchglas, wenig Saettigung -> ruhig & edel.
   ============================================================================ */
#page-dialer.skin-glass #dialer-active #dialer-find-box {
  background: rgba(251,249,245,.90) !important;         /* warmes, dichtes Weiss */
  backdrop-filter: blur(30px) saturate(116%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(116%) !important;
  border: 1px solid rgba(255,255,255,.9) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 20px 54px rgba(60,50,40,.24) !important;
}
#page-dialer.skin-glass #dialer-active #dialer-find-links a {
  background: rgba(255,255,255,.74) !important;
  border: 1px solid rgba(70,60,45,.12) !important;
  color: #46403a !important;
}
#page-dialer.skin-glass #dialer-active #dialer-find-links a:hover { background: #fff !important; }
#page-dialer.skin-glass #dialer-active #dialer-fix-phone {
  background: rgba(255,255,255,.86) !important;
  border: 1px solid rgba(70,60,45,.14) !important;
  color: #14172b !important;
}
#page-dialer.skin-glass #dialer-active #dialer-fix-phone::placeholder { color: #9a8f80 !important; }

/* ============================================================================
   25 · LUPE OFFEN -> Hintergrund tritt zurueck (sauberer Uebergang, kein Seam)
   Beim Klick auf die Lupe schwebte das Popover unsauber ueber "Termin" & Co.
   Jetzt: alles unter/hinter dem Popover wird ruhig abgedunkelt + minimal unscharf,
   damit das Popover klar und allein im Fokus steht (wie ein iOS-Menue).
   Gilt in Modern UND Liquid; Kopf + Nummern-Platte bleiben als Kontext sichtbar.
   ============================================================================ */
#page-dialer.skin-modern #dialer-active.dialer-finding #dialer-heat-box,
#page-dialer.skin-glass  #dialer-active.dialer-finding #dialer-heat-box,
#page-dialer.skin-modern #dialer-active.dialer-finding .dcard-call,
#page-dialer.skin-glass  #dialer-active.dialer-finding .dcard-call,
#page-dialer.skin-modern #dialer-active.dialer-finding #dialer-contact-note-wrap,
#page-dialer.skin-glass  #dialer-active.dialer-finding #dialer-contact-note-wrap,
#page-dialer.skin-modern #dialer-active.dialer-finding #dialer-outcome-section,
#page-dialer.skin-glass  #dialer-active.dialer-finding #dialer-outcome-section,
#page-dialer.skin-modern #dialer-active.dialer-finding #dialer-next-btn,
#page-dialer.skin-glass  #dialer-active.dialer-finding #dialer-next-btn {
  opacity: .2 !important;
  filter: blur(1.5px);
  pointer-events: none;
  transition: opacity .22s ease, filter .22s ease;
}

/* ============================================================================
   21 · HANDY: Wählaro-SETUP ohne festen No-Scroll-Rahmen -> vertikaler Seiten-Scroll.
   Wurzel des Problems: der 100vh/dvh-Rahmen (overflow:hidden) + max-height + Flex quetschten
   bzw. BESCHNITTEN den Inhalt auf dem HANDY (Zuordnen/Pruefen/Leitfaden abgeschnitten,
   "Punkte eingeben"/Schnelltest unerreichbar). Betreiber: "scrollen ist ok wenn noetig".

   WICHTIG (Korrektur 2026-07-16, 2. Anlauf): Ausloeser EXAKT an der App-eigenen Mobil-Grenze
   (<=768px = wo die Sidebar zum Bottom-Sheet wird) statt an einer 4. willkuerlichen Schwelle.
   Vorher (<=1024/pointer:coarse) hat es das TABLET-Cockpit (das gut passt + intern scrollt)
   unnoetig ins Handy-Layout gezwungen -> genau die Verschlechterung. Tablet + Desktop behalten
   jetzt das Cockpit; nur das Handy (hochkant <=768 ODER quer, niedrige Hoehe <=560) fliesst.
   ============================================================================ */
@media (max-width: 768px), (max-height: 560px) {
  /* --- DIE WURZEL (gefunden 2026-07-16 per Messung am lebenden DOM) ---
     #dialer-setup ist display:flex, und .dflow + .dflow-viewport haben `flex:1; min-height:0`.
     `flex:1` heisst flex-basis:0% -> die Container bemessen sich NICHT an ihrem Inhalt,
     sondern kollabieren (gemessen: viewport 398px, .dflow 481px) waehrend der Inhalt
     10448px hoch war. Mit overflow:visible quillt er heraus und legt sich UEBER "Zurueck"
     und die Upload-Karte -> die vom Betreiber gemeldete "komplette Ueberlagerung".
     Frueher blieb das verborgen, weil overflow:hidden es einfach abgeschnitten hat.

     Fix: auf dem Handy die KOMPLETTE Cockpit-Mechanik abschalten (Flex-Kette, feste Hoehe,
     Grid, Karussell-Bahn, Innen-Scroll). Dann ist der Dialer eine ganz normale, fliessende
     Seite -- genau wie Hub/Anrufe/Kunden, die auf dem Handy nie Probleme machten.
     display:block auf #dialer-setup loest die Flex-Kette an der Wurzel auf; die flex:none-
     Resets sind Guertel-und-Hosentraeger, falls jemand die Kette wieder aufmacht. */
  /* ACHTUNG: HIER NIEMALS `display` setzen! #dialer-setup wird per Inline-Style vom JS
     ein-/ausgeblendet (beim Session-Start display:none). Ein `display:block !important`
     ueberschreibt das -> der Setup bleibt unter der laufenden Anruf-Maske stehen.
     Die Flex-Kette (die eigentliche Ursache) ist ohnehin schon entschaerft: .dflow
     bekommt unten `flex:none`, damit sich der Container an seinem INHALT bemisst
     statt per flex-basis:0 zu kollabieren. Dafuer muss #dialer-setup nicht block sein. */
  #page-dialer.skin-modern #dialer-setup,
  #page-dialer.skin-glass  #dialer-setup {
    height: auto !important; min-height: 0 !important; max-height: none !important;
    overflow: visible !important;
  }
  #page-dialer.skin-modern .dflow,
  #page-dialer.skin-glass  .dflow {
    display: block !important; flex: none !important;
    height: auto !important; min-height: 0 !important; max-height: none !important;
    max-width: none !important; overflow: visible !important;
  }
  #page-dialer.skin-modern .dflow-viewport,
  #page-dialer.skin-glass  .dflow-viewport {
    display: block !important; flex: none !important;
    height: auto !important; min-height: 0 !important; max-height: none !important;
    overflow: visible !important;
  }
  #page-dialer.skin-modern .dflow-track,
  #page-dialer.skin-glass  .dflow-track {
    display: block !important; flex: none !important;
    transform: none !important; transition: none !important;
    height: auto !important; min-height: 0 !important; max-height: none !important;
    overflow: visible !important;
  }
  /* nur der aktive Schritt sichtbar, natuerliche Hoehe, KEIN Innen-Scroll/Quetschen */
  #page-dialer.skin-modern .dflow-panel,
  #page-dialer.skin-glass  .dflow-panel { display: none !important; }
  #page-dialer.skin-modern .dflow-panel.dflow-active,
  #page-dialer.skin-glass  .dflow-panel.dflow-active {
    display: flex !important; flex: none !important;
    min-width: 0 !important; width: auto !important;
    height: auto !important; min-height: 0 !important; max-height: none !important;
    overflow: visible !important;
  }
  /* Modern: vertikale Rail -> horizontale Schritt-Leiste oben (Grid ist aufgeloest) */
  #page-dialer.skin-modern .dflow-names { flex-direction: row !important; border-right: 0 !important; padding-right: 0 !important; gap: 6px !important; overflow-x: auto; }
  #page-dialer.skin-modern .dflow-names span { flex: 1 1 0 !important; padding: 8px 6px !important; justify-content: center; }
  #page-dialer.skin-modern .dflow-names span::before { display: none !important; }
  /* Nav + Start-Button fliessen normal unter dem Inhalt (nichts positioniert -> nichts ueberlappt) */
  #page-dialer.skin-modern .dflow-nav,
  #page-dialer.skin-glass  .dflow-nav { position: static !important; margin-top: 14px !important; }
  #page-dialer.skin-modern #dialer-start-btn,
  #page-dialer.skin-glass  #dialer-start-btn { position: static !important; width: 100% !important; margin-top: 12px !important; }
}