/* ============================================================================
   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: var(--accent-ink); 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; }

/* ── ERSTBESUCH (02.10.2026, Vorschlagsliste Bedienung Punkt 6) ──────────────────────────────
   Ohne hochgeladene Liste fuehrte „Weiter" in zwei leere Schritte, und „Zurück" stand im ersten
   Schritt als Knopf da, der nichts tat (dialer.js, dialerBahnHinweis). Die Leiste zeigt jetzt:
   · „Zurück" nur, wenn es ein Zurueck gibt ([hidden]); „Weiter" bleibt dabei rechts (margin-left).
   · „Weiter" ohne Ziel: flach, ohne Schatten, mit lesbarer Schrift (dflow-aus) — NICHT die
     34 % Deckkraft von :disabled: darin war das Wort selbst kaum zu lesen (gemessen im Bild,
     Glass hell: 1,7:1), und der Satz daneben bezieht sich ja auf diesen Knopf.
   · der Satz, was fehlt (.dflow-fehlt): links vom Knopf, also am Ort. Welche Fassung zu sehen
     ist, sagt data-fall (dialer.js); gibt es eine Liste mit „Weitermachen" im Bild, erklaert
     die zweite Fassung beide Knoepfe. Das liest :has() aus der Listen-Karte, ohne sie
     anzufassen; ein Browser ohne :has() zeigt die erste Fassung — die stimmt auch dann.
   Gehalten von intern/werkzeuge/lokal/pruef-erstbesuch.js. */
.dflow-nav [hidden] { display: none !important; }
.dflow-next { margin-left: auto; flex: none; }
.dflow-back { flex: none; }
.dflow-fehlt {
  flex: 1 1 auto; min-width: 0; margin: 0;
  font-size: 13px; line-height: 1.35; font-weight: 600; color: var(--text2); text-align: left;
}
.dflow-fehlt span { display: none; }
/* Der Satz, was zum Weitergehen fehlt, steht direkt links an „Weiter" (rechtsbuendig) — am PC lagen sonst
   400 px zwischen Satz und Knopf. Der Satz im letzten Schritt gehoert zu „Zurück" und bleibt links. */
.dflow-fehlt[data-fall="liste"] { text-align: right; }
.dflow-fehlt[data-fall="liste"] span[data-fall="liste"],
.dflow-fehlt[data-fall="start"] span[data-fall="start"] { display: inline; }
#dialer-setup:has(#dialer-lists-box > .ml-zeile:not(.ml-platz) .ml-weiter) .dflow-fehlt[data-fall="liste"] span[data-fall="liste"] { display: none; }
#dialer-setup:has(#dialer-lists-box > .ml-zeile:not(.ml-platz) .ml-weiter) .dflow-fehlt[data-fall="liste"] span[data-fall="listen"] { display: inline; }
/* … und im letzten Schritt ebenso (07.10.2026): mit einer gespeicherten Liste nennt der Satz „Weitermachen". */
#dialer-setup:has(#dialer-lists-box > .ml-zeile:not(.ml-platz) .ml-weiter) .dflow-fehlt[data-fall="start"] span[data-fall="start"] { display: none; }
#dialer-setup:has(#dialer-lists-box > .ml-zeile:not(.ml-platz) .ml-weiter) .dflow-fehlt[data-fall="start"] span[data-fall="start-listen"] { display: inline; }
#page-dialer.skin-modern .dflow-next.dflow-aus,
#page-dialer.skin-glass  .dflow-next.dflow-aus {
  background: rgba(20, 30, 80, .07); color: var(--text2);
  box-shadow: none; cursor: default; transform: none;
}
body.dark #page-dialer.skin-modern .dflow-next.dflow-aus,
body.dark #page-dialer.skin-glass  .dflow-next.dflow-aus { background: rgba(255, 255, 255, .10); }
/* Die Schritt-Namen: waehlbar ist nur, was Inhalt hat. Der Rest zeigt keine Hand und ist blasser. */
#page-dialer.skin-modern .dflow-names span.dflow-aus,
#page-dialer.skin-glass  .dflow-names span.dflow-aus { cursor: default; opacity: .6; }
/* … und ohne den Hover-Grund, den die Leiste in Modern jedem Namen gibt (sonst saehe er beim Darueberfahren
   doch wieder waehlbar aus) */
#page-dialer.skin-modern .dflow-names span.dflow-aus:hover { background: transparent; color: var(--text3); }
.dflow-names span:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
/* Die Ablage, wenn jemand ohne Liste weiter wollte (dialerBahnZurAblage): ein Rahmen in der
   Akzentfarbe, der einmal ausschwingt. Der Rahmen selbst steht ohne Bewegung da — auch wenn
   das System Bewegung abbestellt hat. */
#dialer-dropzone.dflow-zeig { outline: 3px solid var(--accent); outline-offset: 3px; }
@keyframes dflow-zeig {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent); }
  100% { box-shadow: 0 0 0 16px color-mix(in srgb, var(--accent) 0%, transparent); }
}
@media (prefers-reduced-motion: no-preference) {
  #dialer-dropzone.dflow-zeig { animation: dflow-zeig .8s ease-out 2; }
}

/* ============================================================================
   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 Rufon, 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:     #151a1d;
  --bg3:     #1e2428;
  --bg4:     #262c31;
  --border:  rgba(255,255,255,0.07);
  --border2: rgba(255,255,255,0.13);
  --text:    #ffffff;
  --text2:   #9b9ca7;
  --text3:   #6a6b78;
  /* Bis zum 02.08.2026 stand hier #ff6b35 mit der Begruendung "die Flamme ist hier der
     Akzent". Die Flammen bleiben — Hitzebalken, Fortschritt, Flammen-Pop tragen sie
     weiter, sie sind ein echtes Rufon-Merkmal. Der AKZENT ist etwas anderes: er faerbt
     Navigation und Hauptknoepfe, und dort ist Orange die Farbe des Altprodukts.
     Elf Zeilen tiefer stand fuer denselben Skin im Hellmodus laengst das Marken-Gold. */
  --accent:  #C8A44D;  --accent-ink: #051C2C;
  --accent2: #f43f5e;
  --accent-light: rgba(217,179,91,.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(217,179,91,.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 liest jetzt den Akzent, statt seine eigene Farbe mitzubringen.
   Vorher: linear-gradient(118deg, #ff6b35, #f43f5e) — fest verdrahtet, und damit blieb er
   orange, obwohl am selben Element --accent laengst auf Gold stand. Genau deshalb meldete
   pruef-marke.js "kein Orange mehr": der Pruefer sah nur die Spielregeln-Pille an, und die
   liest die Variable. Ein Element, das seine Farbe selbst mitbringt, faellt durch jede
   Pruefung, die ueber Merkmale geht. */
#page-dialer.skin-modern .dflow-next {
  background: linear-gradient(118deg, var(--accent), #b8913c);
  color: var(--accent-ink);
  box-shadow: 0 10px 28px rgba(200,164,77,.38);
}
#page-dialer.skin-modern .dflow-back { border-color: var(--border2); }
/* Die Schritt-Leiste ebenfalls ueber den Akzent — sie zeigt an, wo man im Ablauf steht,
   das ist Navigation und keine Flamme. */
#page-dialer.skin-modern .dflow-bar i.now  { background: var(--accent); }
#page-dialer.skin-modern .dflow-bar i.done { background: rgba(217,179,91,.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(217,179,91,.10), rgba(245,158,11,.06)), #ffffff !important;
  border: 1.5px solid rgba(217,179,91,.35) !important;
  /* Gold statt Fire-Dialer-Orange (Betreiber-Entscheid 02.08.2026). Begruendung fuer den
     dunkleren Ton statt #C8A44D steht bei derselben Regel in pages/dialer.html: auf dem
     fast weissen Pill kaeme das reine Marken-Gold auf 2.37:1 und waere nicht lesbar. */
  color: #8A6D1F !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(217,179,91,.4);
  background: rgba(217,179,91,.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:  #101c26;
  --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(224,193,121,.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(217,179,91,.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: #cbd0e2;
  --text3: #a5b2cf;
  --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(217,179,91,.16), transparent 56%),
    radial-gradient(42rem 28rem at 94%   0%, rgba(90,157,220,.16), transparent 58%),
    radial-gradient(38rem 26rem at 62% 110%, rgba(244,63,94,.10), transparent 56%),
    #0a2038;   /* Grund: McKinsey-Blau statt Fast-Schwarz */
}
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. */
/* Zeiger wie an jedem anderen Knopf der App — keine Greif-Hand (Betreiber 17.10.2026: „alles einheitlich"). */
.skin-switch.is-dragging::before { transition: none; }
.skin-switch { cursor: pointer; }
.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 - 44px);         /* dvh: iOS-Adressleiste einrechnen (100vh waere zu hoch) */
  display: flex; flex-direction: column; overflow: hidden;
  /* Luft fuer den Rand, damit der Rahmen nicht beschneidet, was ueber einen Knopf hinausragt:
     der orange "neu"-Punkt an Spielregeln (3 px + 2 px Ring) und sein Puls (7 px) lagen genau
     auf der rechten Kante und waren halb abgeschnitten (gemessen 16.09.2026, alle
     Desktop-Fenster). Oben 4 px Polster bei 4 px weniger Abstand, rechts 8 px: der Inhalt
     beginnt dort, wo er begann, und endet unten, wo er endete (Hoehe 48 -> 44). */
  margin-top: -4px; padding: 4px 8px 0 0;
}
#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: #101f2a; --text2: #474e6c; --text3: #838aa6;
  /* --accent war hier #f4511e — das Fire-Dialer-Orange des Altprodukts. Elf Zeilen
     weiter unten steht fuer denselben Skin `body.dark … --accent: #C8A44D;` mit dem
     Kommentar "Marken-Gold statt Fire-Dialer-Orange": die Korrektur wurde gemacht, aber
     nur fuer den Dunkelmodus. Der Hellmodus ist die STANDARD-Anzeige — dort faerbte das
     Orange die Flammenleiste, die Nummernplatte, den Schein unter dem Anruf-Knopf, die
     aktive Schritt-Kachel und die Nummernkreise 1/2/3.
     Gefunden am 01.08.2026. Ein Kunde, der Rufon und das Altprodukt nebeneinander
     sieht, haette dieselbe App erkannt. (--accent2 bleibt wie im Dunkelmodus unberuehrt;
     ob der Farbton dort noch passt, ist eine eigene Frage.) */
  /* --accent-ink MUSS mit. Die beiden gehoeren im ganzen Projekt zusammen (styles.css:981
     schaltet mit dem Gold immer auch die Schrift auf Navy). Beim Umstellen auf Gold habe
     ich nur den Akzent gesetzt — die Vorgabe --accent-ink: #ffffff aus styles.css blieb
     stehen, und damit stand WEISSE Schrift auf Gold: 2.37:1 auf dem grossen
     "Weiter"-Knopf (.dflow-next) und auf der Nummer des aktuellen Schritts.
     Dieselbe 2.37, die ich zwei Stunden vorher fuer die Spielregeln-Pille gemessen und
     als zu blass verworfen hatte — beim globalen Merkmal habe ich denselben Schritt nicht
     gemacht. Orange war vorher 3.47:1; ich habe die Lesbarkeit also VERSCHLECHTERT,
     waehrend ich die Marke verbesserte. */
  --accent: #C8A44D; --accent-ink: #051C2C; --accent2: #f43f5e; --accent-light: rgba(210,166,64,.10);
  --shadow:    0 1px 2px rgba(18,35,50,.05), 0 6px 16px rgba(18,35,50,.06);
  --shadow-lg: 0 2px 6px rgba(18,35,50,.07), 0 18px 40px rgba(18,35,50,.12);
}
#page-dialer.skin-modern::before {
  background:
    radial-gradient(48rem 30rem at 8% -10%, rgba(210,166,64,.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: #0a2038; --bg2: #12293f; --bg3: #17324a; --bg4: #21405c;
  --border: rgba(255,255,255,.07); --border2: rgba(255,255,255,.13);
  --text: #ffffff; --text2: #cbd0e2; --text3: #a5b2cf;
  --accent: #C8A44D;   /* Marken-Gold statt Fire-Dialer-Orange */
  --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(217,179,91,.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.
   `margin-top` gemessen ergaenzt (23.07.): zwischen den Schritt-Namen
   (Liste / Zuordnen / Pruefen / Leitfaden) und der Ueberschrift standen am PC 18 px,
   auf dem Handy nur 4 px — die Ueberschrift klebte an der Navigation, beides las sich
   als ein Block. Die Schritt-Namen sind aber Navigation, die Ueberschrift der Anfang
   des Inhalts; dazwischen gehoert eine Zaesur.
   Auf dem Handy bewusst etwas weniger: dort ist die Hoehe knapp, und die erste Karte
   soll noch ins Bild passen. */
#page-dialer.skin-modern .dflow-head,
#page-dialer.skin-glass  .dflow-head { margin-top: 26px; margin-bottom: 12px; }
@media (max-width: 520px) {
  #page-dialer.skin-modern .dflow-head,
  #page-dialer.skin-glass  .dflow-head { margin-top: 20px; }
}

/* --- 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 "Rufon 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 (#1a374d), 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(224,193,121,.26), transparent 60%),
    radial-gradient(54rem 40rem at 94% 4%,  rgba(120,190,255,.32), transparent 62%),
    radial-gradient(46rem 38rem at 58% 116%, rgba(255,110,150,.22), transparent 60%),
    linear-gradient(164deg, #375770 0%, #446a87 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 "Rufon 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;
}
/* Schrift Navy statt Weiss (02.10.2026): Weiss auf dem Gold-Verlauf waren 1,9:1, gemalt gemessen
   (pruef-lesbar.js) — Navy darauf 7–9:1. Gold traegt nur dunkle Schrift (#8a6d22-Regel der Werbeseite). */
#page-dialer.skin-modern #dialer-active #dialer-call-btn {
  background: linear-gradient(135deg,#C8A44D,#E4C878) !important;
  box-shadow: 0 12px 30px rgba(200,164,77,.32) !important;
  color: #051C2C !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, #C8A44D 8%, transparent) !important;
  border-left-color: #C8A44D !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,#C8A44D,#E4C878) !important;
  color: #051C2C !important; border: 0 !important;   /* Navy statt Weiss, siehe Anruf-Knopf (02.10.2026) */
  box-shadow: 0 10px 26px rgba(200,164,77,.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(124,192,255,.40), transparent 58%),
    radial-gradient(54rem 46rem at 64% 116%, rgba(229,204,146,.30), transparent 58%),
    radial-gradient(42rem 38rem at 38% 66%,  rgba(84,224,214,.20), transparent 60%),
    linear-gradient(158deg, #3a4a8e 0%, #537e9f 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,41,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(110,185,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(223,191,118,.48), transparent 55%),
    radial-gradient(42rem 40rem at 48% 52%, rgba(64,224,214,.34), transparent 58%),
    linear-gradient(150deg, #4a63cf 0%, #548cb6 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,41,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,41,60,.35); }

/* ============================================================================
   20 · KEIN SCROLLEN. NIRGENDS.  (Betreiber-Regel, hart)
   Ein Scrollbalken im Rufon 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,23,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,41,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; }
/* In Liquid Glass traegt diese Zeile Saetze, die man lesen MUSS („Nicht gewählt: die Sperrliste war nicht
   erreichbar", „Diese Nummer wurde inzwischen gesperrt") — in --text2 und 11 px stand sie auf der hellen Platte
   der Sitzung mit 1,3 bis 2,5:1 (im Bild gemessen 02.10.2026, hell und dunkel: die Platte bleibt hell). Feste
   dunkle Schrift, 12 px. */
/* Feste dunkle Schrift allein reichte am PC nicht (3,84:1 — die Platte ist dort mittelgrau): die Zeile bekommt,
   wenn sie etwas sagt, eine helle Unterlage. Danach im Bild nachgemessen. */
#page-dialer.skin-glass #dialer-active #dialer-call-status:not(:empty) { color: #051C2C !important; font-size: 12px !important; display: inline-block; align-self: center; background: rgba(255, 255, 255, .82); border-radius: 10px; padding: 3px 10px; }

/* 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,41,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,35,50,.08), 0 18px 48px rgba(18,35,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,#C8A44D,#E4C878) !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,41,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,33,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(75,160,240,.55) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.50), 0 10px 26px rgba(90,169,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,41,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: #1a3b55 !important;
  border: 0 !important;
  box-shadow: inset 0 1px 0 #fff, 0 14px 34px rgba(20,41,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,41,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; }
/* Rot #e5484d stand auf dem Champagner bei 2,8:1 (02.10.2026, pruef-lesbar.js) — ein dunkleres Rot
   derselben Familie: 5,4:1. */
#page-dialer.skin-glass #dialer-active button[onclick*="dialerStop"] {
  color: #a51d24 !important; border-color: rgba(165,29,36,.45) !important;
}
/* Der "Rufon"-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(40,81,120,.12) !important;
}
#page-dialer.skin-glass #dialer-active #dialer-score-val,
#page-dialer.skin-glass #dialer-active #dialer-heat-flame ~ * { color: #17203a !important; }
/* #5c6488 lag bei 1600×920 auf dem satteren Champagner bei 4,3:1 (02.10.2026) — eine Stufe dunkler. */
#page-dialer.skin-glass #dialer-active #dialer-heat-streak,
#page-dialer.skin-glass #dialer-active #dialer-score-hint { color: #434a6b !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(40,81,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;
}
/* #5c6488 lag bei 4,3–4,5:1 (02.10.2026) — eine Stufe dunkler. */
#page-dialer.skin-glass #dialer-active .dcard-phone > div:last-child,
#page-dialer.skin-glass #dialer-active #dialer-contact-email { color: #434a6b !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: #352f22 !important;   /* war #4d4838: 4,1–4,4:1 auf dem grauen Teil (02.10.2026) */
  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. */
/* „Ergebnis des Anrufs": #6c6d76 waren 1,8–3,6:1 (02.10.2026). Steht lose auf dem Grund, am Handy auf
   dessen grauem Teil — die dunkelste Tinte, wie die Ueberschrift „Leitfaden" (Abschnitt 26 (2)). */
#page-dialer.skin-glass #dialer-active #dialer-outcome-section > div:first-child { color: #0b0e1a !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(40,81,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,33,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;
}
/* „Kein Interesse": ein eigener, warmer und gedaempfter Ton statt klarem Glas .18 (05.10.2026, Gegenpruefung) —
   klares Glas zeigte nur den Grund, und wo der Grund grau ist (Handy 360×740), lag die Kachel im Bild neben
   „Überspringen" bei ΔE2000 5,4. Mit eigener Toenung haengt sie nicht mehr davon ab, wo sie liegt. */
#page-dialer.skin-glass #dialer-active #dialer-outcome-section .dialer-outcome-btn.oc-done {
  background: linear-gradient(rgba(224,140,120,.38), rgba(224,140,120,.38)), rgba(255,255,255,.5) !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;
}
/* .4 -> .55 (05.10.2026, Gegenpruefung): am Handy liegt „Überspringen" auf dem Schiefer und war im Bild
   „Nummer falsch" zu nah (ΔE2000 9,2). Milchiger heisst hier auch: noch leiser — der Ausweg. */
#page-dialer.skin-glass #dialer-active #dialer-outcome-section .dialer-outcome-btn.oc-skip {
  background: rgba(255,255,255,.55) !important;
  border-color: rgba(255,255,255,.6) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6) !important;
}
/* #6a7292 waren 2,1–3,1:1 (02.10.2026; #343a56 reichte bei 360×740 mit 4,47:1 knapp nicht).
   „Ausweg, nicht Ergebnis" sagt schon der gestrichelte Rand. */
#page-dialer.skin-glass #dialer-active .dialer-outcome-btn.oc-skip .oc-txt { color: #1f2438 !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 ---
   Deckkraft .24 -> .62 (02.10.2026): auf dem grauen Teil des Grunds stand der Platzhalter bei
   1,5–2,4:1, das Feld sah nicht wie ein Feld aus. .62 ist die Fuellung der hellen Platten (--bg2). */
#page-dialer.skin-glass #dialer-active #dialer-outcome-section textarea {
  background: rgba(255,255,255,.62) !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(40,81,120,.1) !important;
}
/* #4a5272 -> #414a69 (13.10.2026): WebKit malt den Grund unter dem Feld am Handy dunkler als Chromium
   (#c3c5cc), der Platzhalter stand dort bei 4,43:1; jetzt gerechnet 5,0:1 (pruef-farben-app.js, Teil B). */
#page-dialer.skin-glass #dialer-active #dialer-outcome-section textarea::placeholder { color: #414a69 !important; }

/* --- NAECHSTER-KONTAKT: Gold-Pille (weisse Pille verschwaende auf Frost) ---
   Schrift Navy statt Weiss (02.10.2026): Weiss auf diesem Gold sind 1,9:1 — gemalt gemessen,
   pruef-lesbar.js. Navy darauf 7–9:1, wie „Weitermachen" auf der Startseite. */
#page-dialer.skin-glass #dialer-active #dialer-next-btn {
  background: linear-gradient(135deg,#C8A44D,#E4C878) !important;
  color: #051C2C !important;
  box-shadow: 0 12px 30px rgba(200,164,77,.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,41,60,.30) !important;
}
#page-dialer.skin-glass #dialer-active #dialer-find-box,
#page-dialer.skin-glass #dialer-active #dialer-find-box * { color: #14212b !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,33,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,33,45,.12) !important;
  color: #14212b !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: #14212b !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: Rufon-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;
    margin-top: 0; padding: 0;          /* das Polster oben gilt nur fuer den beschneidenden Rahmen */
  }
  #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; }
  /* Zurueck/Weiter laufen auf dem Handy MIT — direkt ueber der festen Leiste.
     ─────────────────────────────────────────────────────────────────────────
     Vorher standen sie fest im Fluss ganz unten. Auf dem iPhone hiess das: erst
     durch die ganze Seite scrollen, und am Ende sass "Weiter" trotzdem knapp
     ueber der Leiste — der Betreiber nannte es "zu tief".
     Einfach mehr Polster nach unten waere die falsche Antwort gewesen: dann
     verdeckt der Knopf beim Scrollen die Ablageflaeche fuer die Liste. Genau
     darauf hat der Betreiber hingewiesen.
     `sticky` loest beides: der Knopf ist immer erreichbar, behaelt aber seinen
     Platz im Fluss — es entsteht kein Element, das sich ueber den Inhalt legt
     und dort etwas dauerhaft verdeckt. Der Verlauf nach oben sorgt dafuer, dass
     durchscrollender Text nicht mit der Beschriftung verschwimmt.
     Der Abstand nach unten ist die Hoehe der Leiste (.mtab: 59 px) plus der
     Bereich, den iOS unten freihaelt. */
  #page-dialer.skin-modern .dflow-nav,
  #page-dialer.skin-glass  .dflow-nav {
    position: fixed !important;
    left: 0; right: 0;
    bottom: calc(59px + env(safe-area-inset-bottom));
    z-index: 60;
    margin: 0 !important;
    padding: 10px 16px 12px;
    background: var(--bg);
    border-top: 1px solid var(--border);
  }
  /* Die Leiste malt den GRUND, den der Kunde sieht — nicht --bg. In Modern+dunkel ist
     --bg (#0a2038, "das Cockpit, wie es war") nicht die Farbe unter dem Inhalt: die kommt
     vom fixen ::before (#07080d). Mit var(--bg) lagen am Handy drei Dunkeltoene
     uebereinander — Grund #07080d, Leiste #0a2038, Tabs #101f2a — die "sichtbare Naht
     ueber 126 px" des Betreibers (gemessen 09.09.2026 bei 390x844: 718 bis 844 px).
     Der Wert steht hier bewusst als Zahl: es ist derselbe wie im ::before oben, und wer
     einen aendert, muss beide aendern — pruef-handy-leiste.js misst das im Bild. */
  #page-dialer.skin-modern .dflow-nav { background: #eef0f6; }   /* hell: Grund des ::before, nicht --bg (#f3f4f8) */
  body.dark #page-dialer.skin-modern .dflow-nav { background: #07080d; }
  /* Der Platz dafuer wird RESERVIERT — das ist der ganze Unterschied.
     Ein `sticky`-Versuch davor sah im Bild so aus: die Leiste schwebte mitten im
     Inhalt und lag genau auf der Ablageflaeche fuer die Liste. Und eine feste
     Leiste OHNE dieses Polster ist derselbe Fehler, nur weiter unten — deshalb
     stand hier vorher `position: static`.
     Mit reserviertem Platz kann nichts dahinter verschwinden: der Inhalt endet
     immer oberhalb der Leiste. */
  #page-dialer .dflow { padding-bottom: 74px; }
  #page-dialer.skin-modern #dialer-start-btn,
  #page-dialer.skin-glass  #dialer-start-btn { position: static !important; width: 100% !important; margin-top: 12px !important; }
  /* Erstbesuch (02.10.2026): der Satz, was fehlt, hat in der festen Leiste hoechstens zwei
     Zeilen — die Leiste bleibt so hoch wie der Knopf (44 px) und verdeckt nicht mehr als vorher. */
  .dflow-fehlt { font-size: 12.5px; line-height: 1.3; }
  /* Letzter Schritt MIT Kontakten: „Rufon starten" steht in der festen Leiste neben „Zurück" —
     dort, wo in den Schritten davor „Weiter" stand. Im Fluss lag er unter dem Leitfaden-Kasten
     und damit, sobald es Vorlagen gibt, unter dem Fenster. Ohne Kontakte (kein .kontakte-da)
     bleibt er im Fluss und die Leiste sagt, was fehlt.
     Die Leiste ist 10 px oben / 12 px unten gepolstert und 44 px hoch; „Zurück" bekommt hier
     eine feste Breite, damit der Start-Knopf weiss, wo er anfaengt. */
  #page-dialer.dflow-laststep #dialer-setup.kontakte-da .dflow-back { width: 84px; padding-left: 0; padding-right: 0; text-align: center; }
  #page-dialer.skin-modern.dflow-laststep #dialer-setup.kontakte-da #dialer-start-btn,
  #page-dialer.skin-glass.dflow-laststep  #dialer-setup.kontakte-da #dialer-start-btn {
    position: fixed !important; z-index: 61;
    left: 110px; right: 16px; bottom: calc(71px + env(safe-area-inset-bottom));
    width: auto !important; height: 44px; min-height: 44px; margin: 0 !important;
    padding: 0 14px !important; border-radius: 999px !important; font-size: 15px !important;
    white-space: nowrap;
  }
  /* Wer ohne Liste „Weiter" drueckt, wird zur Ablage gerollt (dialerBahnZurAblage). Unten liegen
     die feste Leiste (66 px) und die Tabs (59 px und der Bereich, den iOS freihaelt): so viel
     Abstand haelt das Hinrollen ein, sonst laege die Ablage genau darunter. */
  #page-dialer.skin-modern #dialer-dropzone,
  #page-dialer.skin-glass  #dialer-dropzone { scroll-margin-bottom: calc(137px + env(safe-area-inset-bottom)); scroll-margin-top: 12px; }
}
/* Handy QUER (z. B. 844×390; 07.10.2026, Gegenpruefung Erstbesuch): die Regeln oben gelten ueber
   (max-height: 560px) auch, wenn das Fenster breiter als 768 px ist — dann steht die Seitenleiste (240 px) da und
   es gibt keine Tab-Leiste. Die feste Leiste lag mit left: 0 unter der Seitenleiste („Zurück" ganz verdeckt),
   der Startknopf ragte mit left: 110px darunter, und beide hielten 59 px Abstand fuer Tabs, die es dort nicht gibt. */
@media (min-width: 769px) and (max-height: 560px) {
  #page-dialer.skin-modern .dflow-nav,
  #page-dialer.skin-glass  .dflow-nav { left: 240px; bottom: 0; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  #page-dialer.skin-modern.dflow-laststep #dialer-setup.kontakte-da #dialer-start-btn,
  #page-dialer.skin-glass.dflow-laststep  #dialer-setup.kontakte-da #dialer-start-btn { left: calc(240px + 110px); bottom: calc(12px + env(safe-area-inset-bottom)); }
}
/* Der Fuss mit dem Datum lag UEBER der Leiste „Zurück / Weiter" (gemessen 02.10.2026, Handy, Modern und
   Glass): er steht mit z-index 1 ueber dem ganzen #page-dialer (styles.css, sonst waere er in Glass
   unsichtbar), und die feste Leiste liegt innerhalb davon — sie kann nie ueber ihn kommen. Bei kurzen
   Schritten (ohne Liste, „Prüfen") sitzt der Fuss genau in der Leiste: das Datum stand zwischen „Zurück"
   und „Weiter", und ein Fingertipp auf die obere Haelfte von „Weiter" traf den Fuss statt den Knopf
   (elementFromPoint = footer; bei 360×740 in Glass blieb der Schritt „Prüfen" dadurch stehen). Bei langen
   Schritten rollt er beim Scrollen durch die Leiste und liegt dann ebenso darueber.
   Ein Abstand nach unten hilft nur am Seitenende, nicht beim Rollen. Darum tritt der Fuss zurueck, solange
   die Einrichtung (und damit die feste Leiste) zu sehen ist — wie beim Buchungsblatt (buchung.css). Das
   Datum fehlt dort; es hat am Handy zwischen Leiste und Tabs keine Aufgabe. Nur am Handy hochkant (≤ 768 px). */
@media (max-width: 768px) {
  .main:has(> #page-dialer.active.skin-modern > #dialer-setup:not([style*="display: none"])) > footer,
  .main:has(> #page-dialer.active.skin-glass > #dialer-setup:not([style*="display: none"])) > footer { visibility: hidden; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   ANRUF-MASKE auf grossen Bildschirmen: mehr Praesenz  (22.07.2026)

   Betreiber am Bild: "Das kann ruhig noch etwas weiter runter. Das muss nicht so
   klein sein." Gemessen bei 1440x900: Karte 438 px, darunter 302 px ungenutzt.

   WICHTIG — was hier NICHT gemacht wird: die Karte bekommt KEINE Hoehe und keinen
   Rahmen. Genau das wurde am 16.07. zweimal gebaut und zweimal verworfen, weil es
   den Inhalt abgeschnitten hat (Kopf nur ein Streifen, "Sitzung beenden" aus dem
   Bild). Der Kommentar in pages/dialer.html sagt es klar: die Frage ist nie "wie
   gross ist der Bildschirm", sondern "passt der Inhalt rein" — und das kann kein
   Breakpoint wissen.

   Deshalb waechst hier nur der INHALT: groessere Nummer, groessere Ergebnis-Knoepfe,
   mehr Luft. Der Inhalt fliesst weiter, die Seite scrollt bei Bedarf — abschneiden
   kann dadurch nichts. Und es hilft genau dort, wo der Platz da ist.
   Erst ab 1200px Breite UND 800px Hoehe: darunter ist der Platz knapp, dort waere
   groesser schlechter.
   ══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1200px) and (min-height: 800px) {
  /* Alle drei Designs. Vorher standen hier drei Selektoren, und der dritte
     (.skin-klassik) traf nie: dialerApplySkin() setzt nur skin-modern/skin-glass,
     Klassik ist deren Abwesenheit. Klassik ging damit als einziges Design leer aus.
     Ein designfreier Selektor kann diesen Fehler nicht wiederholen. */
  #page-dialer #dialer-active #dialer-callcard {
    max-width: 1320px !important;
    padding: 26px !important;
    column-gap: 32px !important;
    row-gap: 22px !important;
  }
  #page-dialer #dialer-active .dcard-main { gap: 22px !important; }

  /* Die Nummer ist das, worauf der Blick zuerst faellt — sie darf gross sein. */
  #page-dialer #dialer-active #dialer-contact-phone { font-size: 34px !important; }
  #page-dialer #dialer-active .dcard-phone { padding: 20px 26px !important; }

  /* Ergebnis-Knoepfe: groessere Ziele, ruhigere Abstaende. Der Vertriebler trifft
     sie waehrend er spricht — jeder Millimeter hilft. */
  #page-dialer #dialer-active .dialer-outcome-btn {
    min-height: 58px !important;
    padding: 14px 18px !important;
    font-size: 15px !important;
  }
  #page-dialer #dialer-active #dialer-outcome-section textarea {
    min-height: 76px !important; font-size: 14px !important;
  }
  /* Der Anruf-Knopf ebenfalls — er ist der meistgedrueckte im ganzen Produkt. */
  #page-dialer #dialer-active #dialer-call-btn,
  #page-dialer #dialer-active #dialer-hangup-btn {
    padding: 18px 30px !important; font-size: 17px !important;
  }
}

/* Der Anruf-Knopf im Klassik-Design: GRUEN statt Marken-Navy (27.07.2026).
   In Rufon ist --accent das Navy #051C2C. Auf dem hellen Kartenruecken liest es sich
   als Schwarz — der meistgedrueckte Knopf der Anwendung sah aus wie "aus" oder "gesperrt".
   Gruen heisst ueberall "los"; die Marke traegt hier ohnehin schon Kopfzeile und Navigation.
   !important ist noetig, weil der Knopf seine Farbe als Inline-Stil traegt (background:
   var(--accent)) und eine Datei-Regel sonst nie gewinnt. Der Schatten muss mitwandern,
   sonst leuchtet unter dem gruenen Knopf weiter ein blauer Schein.

   ACHTUNG beim Selektor: eine Klasse "skin-klassik" gibt es NICHT. dialerApplySkin()
   setzt nur skin-modern bzw. skin-glass — Klassik ist deren Abwesenheit. Regeln der Form
   "#page-dialer.skin-klassik ..." greifen deshalb nie; davon stehen weiter unten noch
   welche, die seit jeher wirkungslos sind. Hier also :not() statt einer Klasse. */
/* Das Anruf-Gruen des Projekts #14804F mit weisser Schrift (02.10.2026, Paket Lesbarkeit samt Nachtrag W13
   der Durchsicht „apple-rest-app"): vorher #16a34a, die Schrift kam aus --accent-ink — hell Weiss 3,3:1
   (gemalt gemessen), dunkel Navy 5,3:1, mit dem Zeiger darueber Navy auf #15803d 3,5:1. Jetzt in beiden
   Modi Weiss, wie der Anruf-Knopf der Werbeseite (.pb-anruf): 4,96:1, beim Darueberfahren dunkler #116b42
   6,6:1. Abgeschaltet ist der Knopf grau (Abschnitt 26 (6)). */
#page-dialer:not(.skin-modern):not(.skin-glass) #dialer-call-btn {
  background: #14804F !important;
  color: #ffffff !important;
  box-shadow: 0 6px 24px rgba(20, 128, 79, .38) !important;
}
#page-dialer:not(.skin-modern):not(.skin-glass) #dialer-call-btn:hover {
  background: #116b42 !important;
}

/* Fingerziele im Dialer-Kopf (22.07.2026).
   Die allgemeine Regel in styles.css erreicht diese beiden nicht: die Design-Umschalter
   und der Konfigurations-Knopf tragen eigene Regeln mit hoeherer Trennschaerfe.
   Gemessen 34 px, noetig 44. */
@media (max-width: 768px), (pointer: coarse) {
  #page-dialer .dialer-rules-btn,
  #page-dialer .dialer-skin-switch button,
  #page-dialer .skin-switch button {
    min-height: 44px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   STARTSEITE OHNE SCROLLEN (01.10.2026) — Modern und Glass
   Betreiber, Fenster rund 1600×920: „das Datum unten ist angeschnitten".

   URSACHE (gemessen, alle PC-Fenster, auch OHNE jede Liste): der feste Rahmen aus
   Abschnitt 9 war `100dvh - 44px` hoch. Das fuellt .main (2 × 24 px Polster) bis auf
   den letzten Pixel — die Fusszeile mit dem Datum (39 px) steht aber DAHINTER. Die Seite
   war damit immer 39 px zu hoch: Datum bei 914–929 in einem 920er Fenster.
   Jetzt rechnet der Rahmen die Fusszeile mit ein.

   Was im Rahmen steht, muss dann auch hineinpassen — sonst schneidet er ab, statt zu
   scrollen (overflow: hidden). Das leistet die Bahn selbst, es braucht dafuer keine neue
   Zahl: .dflow-viewport darf schrumpfen (flex 0 1 auto, min-height 0), die Schritte
   strecken sich auf seine Hoehe und scrollen INNEN. Gemessen im letzten Schritt mit neun
   gespeicherten Leitfaeden bei 1600×920, 1440×900 und 1366×768: „Rufon starten" ganz im
   Fenster, nichts abgeschnitten (pruef-dialer-start.js, Teil S — samt Gegenprobe, die
   das Schrumpfen abschaltet).
   Das Handy bleibt unberuehrt: der Block von oben (max-width 768 / max-height 560)
   setzt dort alles mit !important auf fliessend.
   ══════════════════════════════════════════════════════════════════════════════ */
#page-dialer.skin-modern #dialer-setup,
#page-dialer.skin-glass  #dialer-setup { height: calc(100dvh - 83px); }
/* Die Zahl oben kennt nur Polster und Fusszeile. Steht UEBER der Seite noch etwas — der
   Testphasen-Streifen (46 px) oder eine Wartungsankuendigung (60 px) —, war die Seite um
   genau das wieder zu hoch (gemessen 01.10.2026: 966 px in einem 920er Fenster, das Datum
   ganz unter dem Rand). Deshalb nimmt sich der Rahmen, wo der Browser es kann, statt einer
   gerechneten Hoehe einfach den Platz, den .main uebrig laesst (.main ist eine Spalte fester
   Hoehe; die Seite darf darin schrumpfen, der Rahmen fuellt sie).
   NUR solange die Einrichtung zu sehen ist: Anruf-Maske und Auswertung fliessen frei und
   brauchen die Seite in voller Laenge — sie blenden #dialer-setup per Inline-Stil aus, und
   genau daran haengt die Bedingung (dialerReset setzt display wieder leer).
   Ohne :has() (Firefox vor 121) bleibt es bei der Zahl oben. Nicht am Handy (dort fliesst
   alles, siehe der Block mit max-width 768 / max-height 560). */
@media (min-width: 769px) and (min-height: 561px) {
  .main > #page-dialer.skin-modern.active:has(> #dialer-setup:not([style*="display: none"])),
  .main > #page-dialer.skin-glass.active:has(> #dialer-setup:not([style*="display: none"])) { flex: 1 1 0; min-height: 0; }
  .main > #page-dialer.skin-modern.active:has(> #dialer-setup:not([style*="display: none"])) > #dialer-setup,
  .main > #page-dialer.skin-glass.active:has(> #dialer-setup:not([style*="display: none"])) > #dialer-setup { height: calc(100% + 4px); }
  /* Die Wartungsankuendigung steht nicht UEBER der Seite, sondern als erstes Kind IN ihr (core.js wartungZeigen —
     damit sie mit dem Inhalt fluchtet). Die 100 % oben rechnen sie nicht ab: der Rahmen war um den Banner (46 px +
     14 px Abstand) zu hoch, die Leiste „Zurück / Weiter" rutschte in die Fusszeile, und das Datum stand mitten in
     ihr (gemessen 07.10.2026, 1366×768 und 1280×900: Datum bei y 723–738 in der Leiste 721–765; der Fuss fing dort
     bis zum 07.10. auch den Klick auf „Weiter" ab). Mit Banner teilt sich die Seite deshalb als Spalte auf: der Banner
     nimmt, was er braucht (auch zweizeilig), der Rahmen den Rest. Die 4 px Ueberstand von oben bleiben. */
  .main > #page-dialer.skin-modern.active:has(> .wartung-banner):has(> #dialer-setup:not([style*="display: none"])),
  .main > #page-dialer.skin-glass.active:has(> .wartung-banner):has(> #dialer-setup:not([style*="display: none"])) { display: flex; flex-direction: column; }
  .main > #page-dialer.skin-modern.active:has(> .wartung-banner):has(> #dialer-setup:not([style*="display: none"])) > .wartung-banner,
  .main > #page-dialer.skin-glass.active:has(> .wartung-banner):has(> #dialer-setup:not([style*="display: none"])) > .wartung-banner { flex: 0 0 auto; }
  .main > #page-dialer.skin-modern.active:has(> .wartung-banner):has(> #dialer-setup:not([style*="display: none"])) > #dialer-setup,
  .main > #page-dialer.skin-glass.active:has(> .wartung-banner):has(> #dialer-setup:not([style*="display: none"])) > #dialer-setup { flex: 1 1 0; min-height: 0; height: auto; margin-bottom: -4px; }
}

/* Der erste Schritt (Liste): die Karte „Meine Listen" knapper gepolstert (26 px rundum waren
   fuer eine Liste mit Zeilen zu viel), und der Satz unter der Ueberschrift auf EINER Zeile
   (die 52ch brachen ihn bei 660 px Breite fuer ein einziges Wort um). */
#page-dialer.skin-modern #dialer-lists-card,
#page-dialer.skin-glass  #dialer-lists-card { padding: 12px 20px !important; }
#page-dialer.skin-modern .dflow-panel[data-panel="liste"] .dflow-head p,
#page-dialer.skin-glass  .dflow-panel[data-panel="liste"] .dflow-head p { max-width: none; }
/* Sobald es Listen gibt (.ml-da), ist die Ablage die ZWEITE Wahl auf der Seite: 22 statt
   30 px Polster. Ohne Listen bleibt sie gross und einladend wie bisher. */
#page-dialer.skin-modern #dialer-setup.ml-da #dialer-dropzone,
#page-dialer.skin-glass  #dialer-setup.ml-da #dialer-dropzone { padding: 22px 20px !important; }
/* Glass: Knoepfe als Kapsel — wie „Weiter" in derselben Ansicht. Und „Alle Listen" braucht
   dort eine eigene Flaeche: --bg3 ist in Glass fast weiss auf fast weiss, der Knopf war im
   Bild nur als Text zu sehen (01.10.2026). Dieselbe Flaeche traegt die Marke „📭 leer" (15.10.2026). */
#page-dialer.skin-glass .ml-weiter,
#page-dialer.skin-glass .ml-alle { border-radius: 999px; }
#page-dialer.skin-glass .ml-alle,
#page-dialer.skin-glass .ml-marke.leer { background: rgba(20, 30, 80, .055); border-color: rgba(20, 30, 80, .13); }
body.dark #page-dialer.skin-glass .ml-alle,
body.dark #page-dialer.skin-glass .ml-marke.leer { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .18); }

/* PC, niedriges Fenster (unter 880 px Hoehe): der erste Schritt rueckt zusammen, damit drei
   Listen, „Alle Listen", der Kalender-Streifen und die Ablage ohne Innen-Scroll passen
   (gemessen bei 1366×768). Die Ueberschrift bleibt (an ihrem Platz, ob Listen da sind oder
   nicht — sonst spraenge sie, wenn die Listen eintreffen), ihr Erklaersatz weicht. Gibt es
   Listen (.ml-da), werden die Karten knapper und die Ablage verliert Polster und das
   grosse Symbol, nicht ihren Text. Ab 880 px gilt das volle Mass.
   min-height 561: darunter gilt der Handy-Block. */
@media (min-width: 769px) and (min-height: 561px) and (max-height: 879px) {
  #page-dialer.skin-modern .dflow-panel[data-panel="liste"] .dflow-head,
  #page-dialer.skin-glass  .dflow-panel[data-panel="liste"] .dflow-head { margin-top: 6px; margin-bottom: 2px; }
  #page-dialer.skin-modern .dflow-panel[data-panel="liste"] .dflow-head p,
  #page-dialer.skin-glass  .dflow-panel[data-panel="liste"] .dflow-head p { display: none; }
  /* 10 px (nicht 12/14): mit dem Testphasen-Streifen ueber der Seite fehlten bei 768 px Hoehe
     sonst 11–15 px, und der Schritt scrollte innen (gemessen 01.10.2026). */
  #page-dialer.skin-modern #dialer-setup.ml-da .dflow-panel[data-panel="liste"] > .card,
  #page-dialer.skin-glass  #dialer-setup.ml-da .dflow-panel[data-panel="liste"] > .card { padding: 10px 18px !important; }
  #page-dialer.skin-modern #dialer-setup.ml-da #dialer-dropzone,
  #page-dialer.skin-glass  #dialer-setup.ml-da #dialer-dropzone { padding: 10px 16px !important; }
  #page-dialer.skin-modern #dialer-setup.ml-da #dialer-dropzone > div:first-child,
  #page-dialer.skin-glass  #dialer-setup.ml-da #dialer-dropzone > div:first-child { display: none; }
}

/* Handy: „Weitermachen" UND „Liste hochladen" im ersten Bild (gemessen 390×844 und 360×740).
   Dort nimmt der Kopf (Titel, Design, Konfiguration, Schritte, Ueberschrift) schon 300 px.
   Sobald es Listen gibt (.ml-da, gesetzt von dialerListenMalen), weicht der Erklaersatz —
   die Karte darunter sagt dasselbe mit einem Knopf —, die Karten werden knapper, die Ablage
   verliert das grosse Symbol. Ohne Listen bleibt die Seite, wie sie war. */
@media (max-width: 768px) {
  #page-dialer.skin-modern #dialer-setup.ml-da .dflow-panel[data-panel="liste"] .dflow-head,
  #page-dialer.skin-glass  #dialer-setup.ml-da .dflow-panel[data-panel="liste"] .dflow-head { margin-top: 14px; margin-bottom: 4px; }
  #page-dialer.skin-modern #dialer-setup.ml-da .dflow-panel[data-panel="liste"] .dflow-head p,
  #page-dialer.skin-glass  #dialer-setup.ml-da .dflow-panel[data-panel="liste"] .dflow-head p { display: none; }
  #page-dialer.skin-modern #dialer-setup.ml-da .dflow-panel[data-panel="liste"] > .card,
  #page-dialer.skin-glass  #dialer-setup.ml-da .dflow-panel[data-panel="liste"] > .card { padding: 10px 14px !important; }
  #page-dialer.skin-modern #dialer-setup.ml-da #dialer-dropzone,
  #page-dialer.skin-glass  #dialer-setup.ml-da #dialer-dropzone { padding: 10px 12px !important; }
  #page-dialer.skin-modern #dialer-setup.ml-da #dialer-dropzone > div:first-child,
  #page-dialer.skin-glass  #dialer-setup.ml-da #dialer-dropzone > div:first-child { display: none; }
}

/* Handy, NIEDRIG (bis 800 px Hoehe), mit dem Testphasen-Streifen ueber der Seite (15.10.2026, Rest aus der
   Gegenpruefung vom 02.10.): der Streifen nimmt 46 px, und bei 360×740 mit Kalender-Streifen und Listen lag die
   Ablage „Liste hochladen" dann UNTER der festen Leiste (Zurueck/Weiter) bzw. in Klassik unter den Tabs —
   gemessen: Modern 47 px, Liquid Glass 23 px, Klassik 27 px; ohne Testphase fehlte 1 px zum Rand der Leiste.
   Hier ruecken deshalb NUR in diesem Fall die Abstaende zusammen: der Streifen selbst (4 statt 7 px Polster,
   8 statt 14 px darunter), der Kopf (6 statt 10,8 px), in Modern und Glass der Abstand der Bausteine im ersten
   Schritt (8 statt 12 px), die Ueberschrift (2 statt 14 px darueber), der Kalender-Streifen und die Karten (4 bzw.
   6 statt 10 px Polster oben und unten); in Klassik verliert die Ablage ihr grosses Symbol (wie in Modern und Glass
   am Handy und in Klassik am PC, sobald es Listen gibt — derselbe Ordner steht schon im Kopf von „Meine Listen").
   Kein Knopf wird kleiner: jedes Fingerziel bleibt 44 px. Ohne Testphase, ab 801 px Hoehe (390×844 passt) und
   ohne Listen bleibt die Seite, wie sie war. Ohne :has() (Firefox vor 121) gilt das bisherige Mass.
   Gehalten von intern/werkzeuge/lokal/pruef-streifen-handy.js (Gegenprobe am Stand davor). Die Wartungsankuendigung
   und Handys unter 740 px Hoehe regelt der Block direkt darunter. */
@media (max-width: 768px) and (max-height: 800px) {
  .main:has(> #page-dialer.active > #dialer-setup.ml-da:not([style*="display: none"])) > #testphase-streifen.testphase-streifen { padding-top: 4px; padding-bottom: 4px; margin-bottom: 8px; }
  .main:has(> #testphase-streifen.testphase-streifen) > #page-dialer #dialer-setup.ml-da > .topbar { margin-bottom: 6px !important; }
  .main:has(> #testphase-streifen.testphase-streifen) > #page-dialer.skin-modern #dialer-setup.ml-da .dflow-panel[data-panel="liste"],
  .main:has(> #testphase-streifen.testphase-streifen) > #page-dialer.skin-glass  #dialer-setup.ml-da .dflow-panel[data-panel="liste"] { gap: 8px; }
  .main:has(> #testphase-streifen.testphase-streifen) > #page-dialer.skin-modern #dialer-setup.ml-da .dflow-panel[data-panel="liste"] .dflow-head,
  .main:has(> #testphase-streifen.testphase-streifen) > #page-dialer.skin-glass  #dialer-setup.ml-da .dflow-panel[data-panel="liste"] .dflow-head { margin-top: 2px; }
  .main:has(> #testphase-streifen.testphase-streifen) > #page-dialer.skin-modern #dialer-setup.ml-da .dflow-panel[data-panel="liste"] > .kal-streifen,
  .main:has(> #testphase-streifen.testphase-streifen) > #page-dialer.skin-glass  #dialer-setup.ml-da .dflow-panel[data-panel="liste"] > .kal-streifen { padding-top: 4px; padding-bottom: 4px; }
  .main:has(> #testphase-streifen.testphase-streifen) > #page-dialer.skin-modern #dialer-setup.ml-da .dflow-panel[data-panel="liste"] > .card,
  .main:has(> #testphase-streifen.testphase-streifen) > #page-dialer.skin-glass  #dialer-setup.ml-da .dflow-panel[data-panel="liste"] > .card { padding-top: 6px !important; padding-bottom: 6px !important; }
  .main:has(> #testphase-streifen.testphase-streifen) > #page-dialer:not(.skin-modern):not(.skin-glass) #dialer-setup.ml-da #dialer-dropzone { padding: 10px 12px !important; }
  .main:has(> #testphase-streifen.testphase-streifen) > #page-dialer:not(.skin-modern):not(.skin-glass) #dialer-setup.ml-da #dialer-dropzone > div:first-child { display: none; }
  html.kal-er-da .main:has(> #page-dialer.active > #dialer-setup.ml-da:not([style*="display: none"])):has(> #testphase-streifen.testphase-streifen):not(:has(> #page-dialer.active > .wartung-banner)) > #page-dialer #dialer-setup > .topbar > .topbar-left { min-height: 34px; }
}

/* Handy: die ABLAGE bleibt im ersten Bild — auch mit Wartungsankuendigung und auf dem iPhone SE (15.10.2026,
   Befunde B1/B2 der Gegenpruefung vom selben Tag). Gemessen am Stand davor (pruef-streifen-handy.js, Teil A: vier
   Handys × drei Designs × 0/2/8 Listen × jede Verbindung aus Ankuendigung, Testphase und Kalender-Streifen): in 64 von
   288 Faellen lag die Ablage unter der festen Leiste „Zurück / Weiter" bzw. den Tabs —
     · 375×667 (iPhone SE): sobald der Kalender-Streifen ODER die Ankuendigung dasteht (auch beim zahlenden Kunden
       mit Rueckrufen und Listen, ganz ohne Testphase); in Klassik nur mit Listen, in Glass ohne Listen erst mit dem
       Kalender-Streifen oder Ankuendigung UND Testphase; bis zu 146 px zu tief (Modern, Listen, Ankuendigung + Kalender);
     · 360×740: mit Ankuendigung UND Kalender-Streifen (Glass ohne Listen: dazu die Testphase);
     · 390×844: nur Modern mit Listen, Ankuendigung, Testphase und Kalender (14 px).
   Die Bedingungen unten sind GENAU diese Faelle (an der Geometrie von Chromium und WebKit festgemacht; in Firefox
   rueckt 375×667 Glass ohne Listen mit Kalender zusammen, obwohl die Ablage dort schon frei lag) — wo die Ablage schon
   im Bild lag, bleibt jedes Pixel, wie es war (Teil AU der Probe). Nur im HOCHFORMAT: quer (667×375, 740×360) bleibt
   die Seite, wie sie war. Darin rueckt die Seite in zwei Stufen zusammen; kein Fingerziel wird kleiner als 44 px:
     Stufe 1  die Ankuendigung ohne Polster oben und unten (46 statt 58 px — das × behaelt 44 × 44), der Testphasen-
              Streifen wie im Block darueber, Kopf 6 px, Ueberschrift 2 px darueber, Bahn 8 px, Kalender-Streifen 2 px
              Polster (der Knopf „Zum Kalender" traegt 44), Karten 6 px; in Klassik verliert die Ablage ihr grosses
              Symbol und die Karten haben 8 px Polster. In Modern und Glass weicht die Schritt-Leiste „Liste ·
              Zuordnen · …", aber NUR solange der erste Schritt offen ist (nach dem Hochladen, in „Zuordnen", steht sie
              wieder da — Teil Z). Damit faellt am Startbild in diesen Lagen der Weg „Leitfaden ohne Liste" ueber die
              Leiste weg; „Weitermachen" laedt den Leitfaden der Liste weiter selbst (mit Testphase fehlten bei 360×740
              ohne diesen Schritt bis 29 px). Bei 390×844 reicht die Ankuendigung allein (mit dem Kopf).
     Stufe 2  (nur bis 700 px Hoehe) dazu: alle Abstaende noch 2 px knapper (Karten in Modern/Glass 4 px), mit
              Listen ist in Modern und Glass die Ueberschrift „Wen rufen wir an?" nur noch fuer Vorlesehilfen da (wie
              .kal-er-ansage, damit die Seite eine Ueberschrift behaelt), ohne Listen weicht nur ihr Erklaersatz; in
              Klassik mit Listen weichen die Koepfe „Meine Listen" und „Liste hochladen" (wie in Modern und Glass —
              die Ablage sagt selbst „CSV oder Excel hier ablegen" und heisst fuer Vorlesehilfen „Liste hochladen").
   Die Hoehen-Bloecke schliessen einander lueckenlos aus (Bereichs-Schreibweise; auch eine CSS-Hoehe wie 700,4 px
   faellt in genau einen), damit sich ihre Werte nicht ueberschreiben. Die Bereichs-Schreibweise kennt Safari erst ab
   16.4 — davor gelten nur die Bloecke bis 700 px und der aus 9279aa6, sonst das bisherige Mass. Ohne :has() (Firefox
   vor 121) bleibt es ganz beim bisherigen Mass.
   MINI-KNOPF DER ERINNERUNG (html.kal-er-da, kalender.css): er steht am Handy oben rechts, 2 px unter dem letzten
   Streifen, 44 px hoch. Mit den knapperen Abstaenden darunter ragte er 1–7 px in den Design-Umschalter (auch schon
   im Block aus 9279aa6). Solange er da ist, haelt der Titel „Rufon" deshalb so viel Hoehe, dass der Umschalter unter
   ihm beginnt (34 px bei 8 px Abstand, 36 px bei 6 px) — Teil E. Der Titel selbst bleibt aus demselben Grund stehen:
   ohne ihn stuende der Umschalter direkt unter dem Streifen.
   GRENZE (gemessen in der Gegenpruefung, nicht geloest): ein Kalender-Streifen, der bei 360 px umbricht („Heute: 12
   Rückrufe · 10 Termine", 75–91 px), laesst bei 360×740 die Ablage in 18 von 84 Faellen verdeckt (vorher ebenso);
   auf noch niedrigeren Handys (360×640, 320×568) liegt sie teils schon ohne jeden Streifen unter der Leiste — eine
   Grenze des Layouts, die dieser Block nicht loest.
   Die Bedingungen, kurz: S = Startseite sichtbar, M = Modern, L = Listen da (.ml-da), G = Glass ohne Listen,
   W = Ankuendigung in der Seite, K = Kalender-Streifen sichtbar, T = Testphasen-Streifen.
     bis 860 px:  M+L und W und T und K
     bis 800 px:  (M oder L) und W und K  ·  G und W und K und T
     bis 700 px:  (M oder L) und (W oder K)  ·  G und K  ·  G und W und T
   Gehalten von intern/werkzeuge/lokal/pruef-streifen-handy.js (A, AU, AG, Z, E; Chromium und WebKit). */
@media (max-width: 768px) and (orientation: portrait) and (800px < height <= 860px) {
  .main:has(> #page-dialer.active.skin-modern > #dialer-setup.ml-da:not([style*="display: none"])):has(> #testphase-streifen.testphase-streifen):has(> #page-dialer.active > .wartung-banner):has(> #page-dialer.active #kal-streifen:not([hidden])) > #page-dialer > .wartung-banner { padding-top: 0; padding-bottom: 0; margin-bottom: 8px; }
  .main:has(> #page-dialer.active.skin-modern > #dialer-setup.ml-da:not([style*="display: none"])):has(> #testphase-streifen.testphase-streifen):has(> #page-dialer.active > .wartung-banner):has(> #page-dialer.active #kal-streifen:not([hidden])) > #page-dialer #dialer-setup > .topbar { margin-bottom: 6px !important; }
  html.kal-er-da .main:has(> #page-dialer.active.skin-modern > #dialer-setup.ml-da:not([style*="display: none"])):has(> #testphase-streifen.testphase-streifen):has(> #page-dialer.active > .wartung-banner):has(> #page-dialer.active #kal-streifen:not([hidden])) > #page-dialer #dialer-setup > .topbar > .topbar-left { min-height: 34px; }
}
/* Stufe 1, bis 800 px Hoehe (360×740) */
@media (max-width: 768px) and (orientation: portrait) and (700px < height <= 800px) {
  :is(.main:has(> #page-dialer.active.skin-modern > #dialer-setup:not([style*="display: none"]), > #page-dialer.active > #dialer-setup.ml-da:not([style*="display: none"])):has(> #page-dialer.active > .wartung-banner):has(> #page-dialer.active #kal-streifen:not([hidden])),
      .main:has(> #page-dialer.active.skin-glass > #dialer-setup:not([style*="display: none"])):has(> #testphase-streifen.testphase-streifen):has(> #page-dialer.active > .wartung-banner):has(> #page-dialer.active #kal-streifen:not([hidden])))
    > #testphase-streifen.testphase-streifen { padding-top: 4px; padding-bottom: 4px; margin-bottom: 8px; }
  :is(.main:has(> #page-dialer.active.skin-modern > #dialer-setup:not([style*="display: none"]), > #page-dialer.active > #dialer-setup.ml-da:not([style*="display: none"])):has(> #page-dialer.active > .wartung-banner):has(> #page-dialer.active #kal-streifen:not([hidden])),
      .main:has(> #page-dialer.active.skin-glass > #dialer-setup:not([style*="display: none"])):has(> #testphase-streifen.testphase-streifen):has(> #page-dialer.active > .wartung-banner):has(> #page-dialer.active #kal-streifen:not([hidden])))
    > #page-dialer > .wartung-banner { padding-top: 0; padding-bottom: 0; margin-bottom: 8px; }
  :is(.main:has(> #page-dialer.active.skin-modern > #dialer-setup:not([style*="display: none"]), > #page-dialer.active > #dialer-setup.ml-da:not([style*="display: none"])):has(> #page-dialer.active > .wartung-banner):has(> #page-dialer.active #kal-streifen:not([hidden])),
      .main:has(> #page-dialer.active.skin-glass > #dialer-setup:not([style*="display: none"])):has(> #testphase-streifen.testphase-streifen):has(> #page-dialer.active > .wartung-banner):has(> #page-dialer.active #kal-streifen:not([hidden])))
    > #page-dialer #dialer-setup > .topbar { margin-bottom: 6px !important; }
  :is(.main:has(> #page-dialer.active.skin-modern > #dialer-setup:not([style*="display: none"]), > #page-dialer.active > #dialer-setup.ml-da:not([style*="display: none"])):has(> #page-dialer.active > .wartung-banner):has(> #page-dialer.active #kal-streifen:not([hidden])),
      .main:has(> #page-dialer.active.skin-glass > #dialer-setup:not([style*="display: none"])):has(> #testphase-streifen.testphase-streifen):has(> #page-dialer.active > .wartung-banner):has(> #page-dialer.active #kal-streifen:not([hidden])))
    > #page-dialer:is(.skin-modern, .skin-glass) .dflow-panel[data-panel="liste"] { gap: 8px; }
  :is(.main:has(> #page-dialer.active.skin-modern > #dialer-setup:not([style*="display: none"]), > #page-dialer.active > #dialer-setup.ml-da:not([style*="display: none"])):has(> #page-dialer.active > .wartung-banner):has(> #page-dialer.active #kal-streifen:not([hidden])),
      .main:has(> #page-dialer.active.skin-glass > #dialer-setup:not([style*="display: none"])):has(> #testphase-streifen.testphase-streifen):has(> #page-dialer.active > .wartung-banner):has(> #page-dialer.active #kal-streifen:not([hidden])))
    > #page-dialer:is(.skin-modern, .skin-glass) .dflow-panel[data-panel="liste"] .dflow-head { margin-top: 2px; margin-bottom: 2px; }
  :is(.main:has(> #page-dialer.active.skin-modern > #dialer-setup:not([style*="display: none"]), > #page-dialer.active > #dialer-setup.ml-da:not([style*="display: none"])):has(> #page-dialer.active > .wartung-banner):has(> #page-dialer.active #kal-streifen:not([hidden])),
      .main:has(> #page-dialer.active.skin-glass > #dialer-setup:not([style*="display: none"])):has(> #testphase-streifen.testphase-streifen):has(> #page-dialer.active > .wartung-banner):has(> #page-dialer.active #kal-streifen:not([hidden])))
    > #page-dialer .dflow-panel[data-panel="liste"] > .kal-streifen { padding-top: 2px; padding-bottom: 2px; }
  :is(.main:has(> #page-dialer.active.skin-modern > #dialer-setup:not([style*="display: none"]), > #page-dialer.active > #dialer-setup.ml-da:not([style*="display: none"])):has(> #page-dialer.active > .wartung-banner):has(> #page-dialer.active #kal-streifen:not([hidden])),
      .main:has(> #page-dialer.active.skin-glass > #dialer-setup:not([style*="display: none"])):has(> #testphase-streifen.testphase-streifen):has(> #page-dialer.active > .wartung-banner):has(> #page-dialer.active #kal-streifen:not([hidden])))
    > #page-dialer:is(.skin-modern, .skin-glass) .dflow-panel[data-panel="liste"] > .card { padding-top: 6px !important; padding-bottom: 6px !important; }
  :is(.main:has(> #page-dialer.active.skin-modern > #dialer-setup:not([style*="display: none"]), > #page-dialer.active > #dialer-setup.ml-da:not([style*="display: none"])):has(> #page-dialer.active > .wartung-banner):has(> #page-dialer.active #kal-streifen:not([hidden])),
      .main:has(> #page-dialer.active.skin-glass > #dialer-setup:not([style*="display: none"])):has(> #testphase-streifen.testphase-streifen):has(> #page-dialer.active > .wartung-banner):has(> #page-dialer.active #kal-streifen:not([hidden])))
    > #page-dialer:not(.skin-modern):not(.skin-glass) #dialer-setup.ml-da #dialer-dropzone { padding: 10px 12px !important; }
  :is(.main:has(> #page-dialer.active.skin-modern > #dialer-setup:not([style*="display: none"]), > #page-dialer.active > #dialer-setup.ml-da:not([style*="display: none"])):has(> #page-dialer.active > .wartung-banner):has(> #page-dialer.active #kal-streifen:not([hidden])),
      .main:has(> #page-dialer.active.skin-glass > #dialer-setup:not([style*="display: none"])):has(> #testphase-streifen.testphase-streifen):has(> #page-dialer.active > .wartung-banner):has(> #page-dialer.active #kal-streifen:not([hidden])))
    > #page-dialer:not(.skin-modern):not(.skin-glass) #dialer-setup.ml-da #dialer-dropzone > div:first-child { display: none; }
  /* dazu aus Stufe 2 die Schritt-Leiste (mit Testphase fehlten sonst bis 29 px) und in Klassik knappere Karten */
  :is(.main:has(> #page-dialer.active.skin-modern > #dialer-setup:not([style*="display: none"]), > #page-dialer.active > #dialer-setup.ml-da:not([style*="display: none"])):has(> #page-dialer.active > .wartung-banner):has(> #page-dialer.active #kal-streifen:not([hidden])),
      .main:has(> #page-dialer.active.skin-glass > #dialer-setup:not([style*="display: none"])):has(> #testphase-streifen.testphase-streifen):has(> #page-dialer.active > .wartung-banner):has(> #page-dialer.active #kal-streifen:not([hidden])))
    > #page-dialer:is(.skin-modern, .skin-glass) #dialer-setup:has(.dflow-panel[data-panel="liste"].dflow-active) :is(.dflow-bar, .dflow-names) { display: none !important; }
  :is(.main:has(> #page-dialer.active.skin-modern > #dialer-setup:not([style*="display: none"]), > #page-dialer.active > #dialer-setup.ml-da:not([style*="display: none"])):has(> #page-dialer.active > .wartung-banner):has(> #page-dialer.active #kal-streifen:not([hidden])),
      .main:has(> #page-dialer.active.skin-glass > #dialer-setup:not([style*="display: none"])):has(> #testphase-streifen.testphase-streifen):has(> #page-dialer.active > .wartung-banner):has(> #page-dialer.active #kal-streifen:not([hidden])))
    > #page-dialer:not(.skin-modern):not(.skin-glass) #dialer-setup.ml-da .dflow-panel[data-panel="liste"] > .card { padding-top: 8px !important; padding-bottom: 8px !important; }
  html.kal-er-da :is(.main:has(> #page-dialer.active.skin-modern > #dialer-setup:not([style*="display: none"]), > #page-dialer.active > #dialer-setup.ml-da:not([style*="display: none"])):has(> #page-dialer.active > .wartung-banner):has(> #page-dialer.active #kal-streifen:not([hidden])),
      .main:has(> #page-dialer.active.skin-glass > #dialer-setup:not([style*="display: none"])):has(> #testphase-streifen.testphase-streifen):has(> #page-dialer.active > .wartung-banner):has(> #page-dialer.active #kal-streifen:not([hidden])))
    > #page-dialer #dialer-setup > .topbar > .topbar-left { min-height: 34px; }
}

/* Stufe 1 und 2, bis 700 px Hoehe (375×667) */
@media (max-width: 768px) and (orientation: portrait) and (max-height: 700px) {
  :is(.main:has(> #page-dialer.active.skin-modern > #dialer-setup:not([style*="display: none"]), > #page-dialer.active > #dialer-setup.ml-da:not([style*="display: none"])):has(> #page-dialer.active > .wartung-banner, > #page-dialer.active #kal-streifen:not([hidden])),
      .main:has(> #page-dialer.active.skin-glass > #dialer-setup:not([style*="display: none"])):has(> #page-dialer.active #kal-streifen:not([hidden])),
      .main:has(> #page-dialer.active.skin-glass > #dialer-setup:not([style*="display: none"])):has(> #testphase-streifen.testphase-streifen):has(> #page-dialer.active > .wartung-banner))
    > #testphase-streifen.testphase-streifen { padding-top: 4px; padding-bottom: 4px; margin-bottom: 6px; }
  :is(.main:has(> #page-dialer.active.skin-modern > #dialer-setup:not([style*="display: none"]), > #page-dialer.active > #dialer-setup.ml-da:not([style*="display: none"])):has(> #page-dialer.active > .wartung-banner, > #page-dialer.active #kal-streifen:not([hidden])),
      .main:has(> #page-dialer.active.skin-glass > #dialer-setup:not([style*="display: none"])):has(> #page-dialer.active #kal-streifen:not([hidden])),
      .main:has(> #page-dialer.active.skin-glass > #dialer-setup:not([style*="display: none"])):has(> #testphase-streifen.testphase-streifen):has(> #page-dialer.active > .wartung-banner))
    > #page-dialer > .wartung-banner { padding-top: 0; padding-bottom: 0; margin-bottom: 6px; }
  :is(.main:has(> #page-dialer.active.skin-modern > #dialer-setup:not([style*="display: none"]), > #page-dialer.active > #dialer-setup.ml-da:not([style*="display: none"])):has(> #page-dialer.active > .wartung-banner, > #page-dialer.active #kal-streifen:not([hidden])),
      .main:has(> #page-dialer.active.skin-glass > #dialer-setup:not([style*="display: none"])):has(> #page-dialer.active #kal-streifen:not([hidden])),
      .main:has(> #page-dialer.active.skin-glass > #dialer-setup:not([style*="display: none"])):has(> #testphase-streifen.testphase-streifen):has(> #page-dialer.active > .wartung-banner))
    > #page-dialer #dialer-setup > .topbar { margin-bottom: 4px !important; }
  :is(.main:has(> #page-dialer.active.skin-modern > #dialer-setup:not([style*="display: none"]), > #page-dialer.active > #dialer-setup.ml-da:not([style*="display: none"])):has(> #page-dialer.active > .wartung-banner, > #page-dialer.active #kal-streifen:not([hidden])),
      .main:has(> #page-dialer.active.skin-glass > #dialer-setup:not([style*="display: none"])):has(> #page-dialer.active #kal-streifen:not([hidden])),
      .main:has(> #page-dialer.active.skin-glass > #dialer-setup:not([style*="display: none"])):has(> #testphase-streifen.testphase-streifen):has(> #page-dialer.active > .wartung-banner))
    > #page-dialer:is(.skin-modern, .skin-glass) .dflow-panel[data-panel="liste"] { gap: 6px; }
  :is(.main:has(> #page-dialer.active.skin-modern > #dialer-setup:not([style*="display: none"]), > #page-dialer.active > #dialer-setup.ml-da:not([style*="display: none"])):has(> #page-dialer.active > .wartung-banner, > #page-dialer.active #kal-streifen:not([hidden])),
      .main:has(> #page-dialer.active.skin-glass > #dialer-setup:not([style*="display: none"])):has(> #page-dialer.active #kal-streifen:not([hidden])),
      .main:has(> #page-dialer.active.skin-glass > #dialer-setup:not([style*="display: none"])):has(> #testphase-streifen.testphase-streifen):has(> #page-dialer.active > .wartung-banner))
    > #page-dialer:is(.skin-modern, .skin-glass) .dflow-panel[data-panel="liste"] .dflow-head { margin-top: 2px; margin-bottom: 2px; }
  :is(.main:has(> #page-dialer.active.skin-modern > #dialer-setup:not([style*="display: none"]), > #page-dialer.active > #dialer-setup.ml-da:not([style*="display: none"])):has(> #page-dialer.active > .wartung-banner, > #page-dialer.active #kal-streifen:not([hidden])),
      .main:has(> #page-dialer.active.skin-glass > #dialer-setup:not([style*="display: none"])):has(> #page-dialer.active #kal-streifen:not([hidden])),
      .main:has(> #page-dialer.active.skin-glass > #dialer-setup:not([style*="display: none"])):has(> #testphase-streifen.testphase-streifen):has(> #page-dialer.active > .wartung-banner))
    > #page-dialer .dflow-panel[data-panel="liste"] > .kal-streifen { padding-top: 2px; padding-bottom: 2px; }
  :is(.main:has(> #page-dialer.active.skin-modern > #dialer-setup:not([style*="display: none"]), > #page-dialer.active > #dialer-setup.ml-da:not([style*="display: none"])):has(> #page-dialer.active > .wartung-banner, > #page-dialer.active #kal-streifen:not([hidden])),
      .main:has(> #page-dialer.active.skin-glass > #dialer-setup:not([style*="display: none"])):has(> #page-dialer.active #kal-streifen:not([hidden])),
      .main:has(> #page-dialer.active.skin-glass > #dialer-setup:not([style*="display: none"])):has(> #testphase-streifen.testphase-streifen):has(> #page-dialer.active > .wartung-banner))
    > #page-dialer:is(.skin-modern, .skin-glass) .dflow-panel[data-panel="liste"] > .card { padding-top: 4px !important; padding-bottom: 4px !important; }
  :is(.main:has(> #page-dialer.active.skin-modern > #dialer-setup:not([style*="display: none"]), > #page-dialer.active > #dialer-setup.ml-da:not([style*="display: none"])):has(> #page-dialer.active > .wartung-banner, > #page-dialer.active #kal-streifen:not([hidden])),
      .main:has(> #page-dialer.active.skin-glass > #dialer-setup:not([style*="display: none"])):has(> #page-dialer.active #kal-streifen:not([hidden])),
      .main:has(> #page-dialer.active.skin-glass > #dialer-setup:not([style*="display: none"])):has(> #testphase-streifen.testphase-streifen):has(> #page-dialer.active > .wartung-banner))
    > #page-dialer:not(.skin-modern):not(.skin-glass) #dialer-setup.ml-da #dialer-dropzone { padding: 10px 12px !important; }
  :is(.main:has(> #page-dialer.active.skin-modern > #dialer-setup:not([style*="display: none"]), > #page-dialer.active > #dialer-setup.ml-da:not([style*="display: none"])):has(> #page-dialer.active > .wartung-banner, > #page-dialer.active #kal-streifen:not([hidden])),
      .main:has(> #page-dialer.active.skin-glass > #dialer-setup:not([style*="display: none"])):has(> #page-dialer.active #kal-streifen:not([hidden])),
      .main:has(> #page-dialer.active.skin-glass > #dialer-setup:not([style*="display: none"])):has(> #testphase-streifen.testphase-streifen):has(> #page-dialer.active > .wartung-banner))
    > #page-dialer:not(.skin-modern):not(.skin-glass) #dialer-setup.ml-da #dialer-dropzone > div:first-child { display: none; }
  :is(.main:has(> #page-dialer.active.skin-modern > #dialer-setup:not([style*="display: none"]), > #page-dialer.active > #dialer-setup.ml-da:not([style*="display: none"])):has(> #page-dialer.active > .wartung-banner, > #page-dialer.active #kal-streifen:not([hidden])),
      .main:has(> #page-dialer.active.skin-glass > #dialer-setup:not([style*="display: none"])):has(> #page-dialer.active #kal-streifen:not([hidden])),
      .main:has(> #page-dialer.active.skin-glass > #dialer-setup:not([style*="display: none"])):has(> #testphase-streifen.testphase-streifen):has(> #page-dialer.active > .wartung-banner))
    > #page-dialer:not(.skin-modern):not(.skin-glass) #dialer-setup.ml-da .dflow-panel[data-panel="liste"] > .card { padding-top: 8px !important; padding-bottom: 8px !important; }
  /* Stufe 2 */
  :is(.main:has(> #page-dialer.active.skin-modern > #dialer-setup:not([style*="display: none"]), > #page-dialer.active > #dialer-setup.ml-da:not([style*="display: none"])):has(> #page-dialer.active > .wartung-banner, > #page-dialer.active #kal-streifen:not([hidden])),
      .main:has(> #page-dialer.active.skin-glass > #dialer-setup:not([style*="display: none"])):has(> #page-dialer.active #kal-streifen:not([hidden])),
      .main:has(> #page-dialer.active.skin-glass > #dialer-setup:not([style*="display: none"])):has(> #testphase-streifen.testphase-streifen):has(> #page-dialer.active > .wartung-banner))
    > #page-dialer:is(.skin-modern, .skin-glass) #dialer-setup:has(.dflow-panel[data-panel="liste"].dflow-active) :is(.dflow-bar, .dflow-names) { display: none !important; }
  :is(.main:has(> #page-dialer.active.skin-modern > #dialer-setup:not([style*="display: none"]), > #page-dialer.active > #dialer-setup.ml-da:not([style*="display: none"])):has(> #page-dialer.active > .wartung-banner, > #page-dialer.active #kal-streifen:not([hidden])),
      .main:has(> #page-dialer.active.skin-glass > #dialer-setup:not([style*="display: none"])):has(> #page-dialer.active #kal-streifen:not([hidden])),
      .main:has(> #page-dialer.active.skin-glass > #dialer-setup:not([style*="display: none"])):has(> #testphase-streifen.testphase-streifen):has(> #page-dialer.active > .wartung-banner))
    > #page-dialer:is(.skin-modern, .skin-glass) #dialer-setup.ml-da .dflow-panel[data-panel="liste"] .dflow-head { position: absolute !important; width: 1px; height: 1px; margin: -1px !important; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  :is(.main:has(> #page-dialer.active.skin-modern > #dialer-setup:not([style*="display: none"]), > #page-dialer.active > #dialer-setup.ml-da:not([style*="display: none"])):has(> #page-dialer.active > .wartung-banner, > #page-dialer.active #kal-streifen:not([hidden])),
      .main:has(> #page-dialer.active.skin-glass > #dialer-setup:not([style*="display: none"])):has(> #page-dialer.active #kal-streifen:not([hidden])),
      .main:has(> #page-dialer.active.skin-glass > #dialer-setup:not([style*="display: none"])):has(> #testphase-streifen.testphase-streifen):has(> #page-dialer.active > .wartung-banner))
    > #page-dialer:is(.skin-modern, .skin-glass) .dflow-panel[data-panel="liste"] .dflow-head p { display: none; }
  :is(.main:has(> #page-dialer.active.skin-modern > #dialer-setup:not([style*="display: none"]), > #page-dialer.active > #dialer-setup.ml-da:not([style*="display: none"])):has(> #page-dialer.active > .wartung-banner, > #page-dialer.active #kal-streifen:not([hidden])),
      .main:has(> #page-dialer.active.skin-glass > #dialer-setup:not([style*="display: none"])):has(> #page-dialer.active #kal-streifen:not([hidden])),
      .main:has(> #page-dialer.active.skin-glass > #dialer-setup:not([style*="display: none"])):has(> #testphase-streifen.testphase-streifen):has(> #page-dialer.active > .wartung-banner))
    > #page-dialer:not(.skin-modern):not(.skin-glass) #dialer-setup.ml-da .dflow-panel[data-panel="liste"] :is(.dflow-oldhead, .dflow-oldhead-row) { display: none !important; }
  html.kal-er-da :is(.main:has(> #page-dialer.active.skin-modern > #dialer-setup:not([style*="display: none"]), > #page-dialer.active > #dialer-setup.ml-da:not([style*="display: none"])):has(> #page-dialer.active > .wartung-banner, > #page-dialer.active #kal-streifen:not([hidden])),
      .main:has(> #page-dialer.active.skin-glass > #dialer-setup:not([style*="display: none"])):has(> #page-dialer.active #kal-streifen:not([hidden])),
      .main:has(> #page-dialer.active.skin-glass > #dialer-setup:not([style*="display: none"])):has(> #testphase-streifen.testphase-streifen):has(> #page-dialer.active > .wartung-banner))
    > #page-dialer #dialer-setup > .topbar > .topbar-left { min-height: 36px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   26 · LESBARKEIT IN STARTSEITE UND SITZUNG (02.10.2026)
   Anlass: Durchsicht vom 01.10.2026 (Vorschlagsliste Punkte 1, 2, 10, 11; Apple-Abgleich V1–V4,
   Bedienung PC G3/T13). Gemessen wird im GEMALTEN Bild, je Design hell/dunkel, PC und Handy:
   intern/werkzeuge/lokal/pruef-lesbar.js — dort stehen die Messwerte vorher/nachher.
   Hier stehen nur Farben, Deckkraft und Variablen; nichts aendert, wo etwas steht.
   Verfahren: wo ein Inline-Stil eine Variable liest (style="color:var(--text3)"), wird die
   Variable am Element mit Kennung umgesetzt, nicht die Lage im Dokument angesprochen — so
   ueberlebt die Regel einen Umbau des Markups.
   ══════════════════════════════════════════════════════════════════════════════ */

/* (1) Liquid Glass + Dunkel: die Sitzung bekommt den HELLEN Variablensatz zurueck.
   Der Seiden-Grund der Sitzung ist in beiden Modi hell (Abschnitt 24, „eine eigene Atmosphaere").
   Die Elemente darin lasen aber die Dunkel-Variablen — helle Schrift auf hellem Grund: „Anruf-Weg"
   1,1:1, Leitfaden 1,0–2,1:1, der Titel des Buchungsfelds 1,08:1, der Namens-Chip dunkel auf
   dunkel 1,7:1 (gemessen 04.10.2026 am Stand bereit-0110).
   Entschieden nach Messung fuer den hellen Satz (Weg A aus V1) statt eines dunklen Seiden-Grunds
   (Weg B): die Sitzung sieht dann im Dunkelmodus genau so aus wie im Hellmodus, den der Betreiber
   abgenommen hat — und jede Lesbarkeits-Korrektur am hellen Stand gilt automatisch mit. Ein dunkler
   Grund waere ein neuer Entwurf samt aller Plattenfarben (Geschmack, Entscheidung des Betreibers).
   Die Werte sind die von :root + html.call (styles.css) und #page-dialer.skin-glass (Abschnitt 4,
   hell, samt Abschnitt 26 (3)/(4)) — wer dort einen Wert aendert, aendert ihn hier mit. */
body.dark #page-dialer.skin-glass #dialer-active {
  --bg: #f4f6fb;
  --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);
  --text: #101c26;
  --text2: #4e5680;
  --text3: #596285;
  --accent: #051C2C; --accent2: #0a3352; --accent-light: #eef2f6; --accent-ink: #ffffff;
  --green: #0ea579; --green-bg: #e8f8f3; --green-text: #0a7a59;
  --red: #e53e5e; --red-bg: #fdeef2;
  --amber: #d97706; --amber-bg: #fef3e2;
  --purple: #7a5f1c; --purple-bg: #eff8fe;
  /* 08.10.2026, Paket Farben: die Schrift-Fassungen der Farben und die Platzhalterfarbe gehoeren zum hellen Satz
     (styles.css :root) — sonst erbte die helle Sitzung hier die DUNKLEN Werte von body.dark. */
  --red-text: #b91c3c; --amber-text: #92400e; --purple-text: #7a5f1c; --platzhalter: #646c80;
  color-scheme: light;   /* die Sitzung ist eine helle Insel in der dunklen App: Felder und Waehler des Browsers hell */
  --kal-warn: #b45309;
  --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);
}
/* Was im Dunkelmodus fest verdrahtet statt ueber Variablen kam, auf den hellen Wert zurueck: der Glanz
   der Karte (Abschnitt 4). Die Platte von „Nie wieder anrufen" (Abschnitt 11: dunkel .08 statt .55)
   setzt (2) unten fuer beide Modi. */
body.dark #page-dialer.skin-glass #dialer-active .card::before {
  background: linear-gradient(148deg, rgba(255,255,255,.6), transparent 42%);
}

/* (2) Liquid Glass, beide Modi: Texte auf dem grauen Teil des Seiden-Grunds (V4).
   Der Grund laeuft von Champagner (#f4e7c6) nach Schiefer (#6c7280); auf dem unteren Teil erreicht
   selbst Schwarz nur 4,4:1. Lose Schrift dort braucht die dunkelste Tinte, Schrift auf Platten eine
   dichtere Platte. */
/* Leitfaden: Ueberschrift „Leitfaden" (--text3, 1,0–1,9:1) steht lose auf dem Grund — fast Schwarz
   (#0b0e1a: 5,5:1 auf dem mittleren Grau #89898e, 4,7:1 noch bei #7a7d8a); die Punkte (--text2,
   4,0–4,4:1) und der Zaehler liegen auf Platten. */
#page-dialer.skin-glass #dialer-active #dialer-checklist-panel { --text3: #0b0e1a; --text2: #262c45; }
/* „Zurueck" (--text2 auf der .66-Platte ueber Grau: 4,2–4,4:1). */
#page-dialer.skin-glass #dialer-active #dialer-back-btn { --text2: #23293f; }
/* Ergebnis-Kacheln am Handy liegen auf dem Schiefer: Tinte #1c2338 auf der blauen/grauen Kachel
   4,1:1, ihre Unterzeilen 2,6–3,5:1. Unter die Farbe kommt eine weisse Lage (Milchglas — Apples
   Richtung seit iOS 26.1); der Farbton bleibt, die Kachel wird heller. */
#page-dialer.skin-glass #dialer-active #dialer-outcome-section .dialer-outcome-btn.oc-open {
  background: linear-gradient(rgba(30,160,225,.42), rgba(30,160,225,.42)), rgba(255,255,255,.5) !important;
}
/* „Nummer falsch": Indigo kraeftiger (.34 -> .5) — mit .34 lag die Kachel im Bild fast grau neben
   „Überspringen" (Farbabstand ΔE2000 4,6 am PC, Gegenpruefung 05.10.2026). */
#page-dialer.skin-glass #dialer-active #dialer-outcome-section .dialer-outcome-btn.oc-data {
  background: linear-gradient(rgba(96,120,182,.5), rgba(96,120,182,.5)), rgba(255,255,255,.5) !important;
}
#page-dialer.skin-glass #dialer-active #dialer-outcome-section .dialer-outcome-btn.oc-win {
  background: linear-gradient(rgba(40,195,80,.46), rgba(40,195,80,.46)), rgba(255,255,255,.45) !important;
}
/* „Nie wieder anrufen" ist die EINE dunkle Kachel (05.10.2026, Gegenpruefung): Widerspruch nach § 7 UWG,
   die Nummer wird dauerhaft gesperrt — das darf nicht aussehen wie „Überspringen". Mit Schiefer .14 ueber
   Weiss .6 lagen beide im Bild bei ΔE2000 1,2 (praktisch gleich), vorher 8,6. Die Haltung der Klassik-Regel
   bleibt: „ernst, nicht laut. Dunkel statt rot" (pages/dialer.html) — rauchiges Schiefer-Glas, weisse Schrift. */
#page-dialer.skin-glass #dialer-active #dialer-outcome-section .dialer-outcome-btn.oc-stop {
  background: rgba(34, 40, 60, .8) !important;
  border-color: rgba(255, 255, 255, .35) !important;
}
#page-dialer.skin-glass #dialer-active .dialer-outcome-btn.oc-stop .oc-txt,
#page-dialer.skin-glass #dialer-active .dialer-outcome-btn.oc-stop .oc-sub,
#page-dialer.skin-glass #dialer-active .dialer-outcome-btn.oc-stop .oc-val { color: #ffffff !important; }
#page-dialer.skin-glass #dialer-active .dialer-outcome-btn.oc-stop .oc-val { background: rgba(255, 255, 255, .16) !important; }

/* (3) Alle drei Designs, hell: die gedaempfte Schrift --text3 im Dialer.
   #7c8496 (Klassik) 3,3–3,8:1, #838aa6 (Modern) 3,0–3,4:1, #7d86a8 (Glass) 3,3–3,5:1 — Schrittnamen,
   Umschalter, Fortschritt, Flammen-Zeile, Warteschlange, „Ergebnis des Anrufs", „Kein Interesse".
   Je Design eine Stufe dunkler, Farbton bleibt. Nur im Dialer: :root gilt fuer die ganze App, das ist
   ein eigener Schritt. :not(.dark), weil body.dark seine Werte auf body setzt und eine Regel am
   Seitenelement sie sonst ueberschriebe. */
body:not(.dark) #page-dialer                 { --text3: #5c6377; }
body:not(.dark) #page-dialer.skin-modern     { --text3: #5c6380; }
body:not(.dark) #page-dialer.skin-glass      { --text3: #596285; }
/* Platzhalter: das Browser-Grau #757575 hat auf #f4f6fb 4,3:1, im Dunkeln auf #0a2038 3,6:1. */
#page-dialer input::placeholder,
#page-dialer textarea::placeholder { color: var(--text3); opacity: 1; }

/* (4) Gold als SCHRIFT auf hellem Grund (2,2–2,4:1). Gold traegt Flaechen, Schrift darauf ist dunkel;
   als Schrift auf Hell nur ein dunkles Gold (#8a6d22-Regel der Werbeseite; #7a5f1c / #6b5318 haben auf
   den hellen Plaketten des Dialers 5–6:1, #8a6d22 dort nur 4,4–4,6). */
/* --purple ist hier Gold: „Hausverwaltung" (Branche), „Nummer falsch" samt Unterzeile, Firmensuche. */
body:not(.dark) #page-dialer { --purple: #7a5f1c; }
/* Modern hell: --accent IST Gold — als Schrift im Namens-Chip, in der Plakette „Immobilien", in den
   Verweisen des Buchungsfelds und im Kalender-Streifen. Knoepfe mit Gold-Flaeche behalten das Gold. */
body:not(.dark) #page-dialer.skin-modern #dialer-active-agent { color: #6b5318; }
body:not(.dark) #page-dialer.skin-modern #dialer-contact-tags,
body:not(.dark) #page-dialer.skin-modern #buchung-status,
body:not(.dark) #page-dialer.skin-modern #buchung-ics,
body:not(.dark) #page-dialer.skin-modern #kal-rueckweg { --accent: #6b5318; }
body:not(.dark) #page-dialer.skin-modern .kal-streifen { color: #6b5318; }
/* Klassik hell: „Spielregeln"/„Konfiguration" #8A6D1F auf der getoenten Pille 4,3:1 (in Modern und
   Glass liegt die Pille auf Weiss, dort 4,9:1). */
body:not(.dark) #page-dialer:not(.skin-modern):not(.skin-glass) .dialer-rules-btn { color: #6f561a; }
/* Bernstein als Schrift: „Einrichten" #d97706 auf #f0f3fa 2,9:1. */
body:not(.dark) #page-dialer #dialer-leitfaden-toggle-btn { --amber: #9a4508; }
/* Rot als Schrift: „Sitzung beenden" #e53e5e 3,4–3,8:1 (Klassik, Modern; Glass siehe Abschnitt 24). */
body:not(.dark) #page-dialer #dialer-active button[onclick="dialerStop()"] { --red: #b91c3c; }

/* (5) Ergebnis-Knoepfe, alle Designs (pages/dialer.html daempft per opacity — ein Kind kann nie
   kraeftiger sein, als seine Deckkraft erlaubt):
   Unterzeilen .72 -> 1 (1,7–4,4:1), Flammen-Werte .6/.8 -> 1 (2,4–2,8:1), „Termin vereinbart!"
   #7c4a03 auf dem Gelb-Orange 4,25:1 -> #5a3702 (die Farbe des Buchungs-Kopfs). */
#page-dialer .oc-sub { opacity: 1; }
#page-dialer .oc-val { opacity: 1; }
#page-dialer .oc-gold { color: #5a3702; }
/* Abgehakter Leitfaden-Punkt: Gruen mit opacity .75 (dialer.js) 3,2–3,4:1. Der Strich und der
   Haken sagen „erledigt"; die Schrift bleibt voll. */
#page-dialer #dialer-checklist-items > div > span { opacity: 1 !important; }

/* (6) Der Anruf-Knopf im Zustand „abgeschaltet" (Nummer inzwischen gesperrt): dialer.js setzt
   opacity .45 — die Beschriftung lag bei 1,2–2,3:1. WCAG nimmt abgeschaltete Knoepfe von der Regel
   aus, lesen muss man den Knopf trotzdem (der Satz darunter erklaert ihn). Eine hoehere Deckkraft
   hilft nicht: der halb durchsichtige Knopf mischt Schrift UND Flaeche mit dem Grund (.62 gemessen:
   2,1–3,5:1). Deshalb „aus" wie ueberall: graue Flaeche, gedaempfte Schrift, kein Schein — in jedem
   Design ueber die Variablen der Umgebung (in glass auch dunkel der helle Satz). Nur die Farbe; die
   Sperre selbst (disabled, aria-disabled, Mauszeiger) setzt weiter dialer.js. */
body #page-dialer #dialer-active #dialer-call-btn:disabled {
  opacity: 1 !important;
  background: var(--bg3) !important;
  color: var(--text2) !important;
  box-shadow: none !important;
}
/* --bg3 ist in glass durchscheinend (.48) — auf dem grauen Teil des Grunds zu duenn. */
body #page-dialer.skin-glass #dialer-active #dialer-call-btn:disabled { background: rgba(255,255,255,.72) !important; }

/* (7) Der zweite Anruf-Weg „Über Browser anrufen" (nur mit Telefonanlage, 05.10.2026, Gegenpruefung):
   Abschnitt 13 daempft ihn mit opacity .85 — in glass 3,99:1 (PC) bzw. 4,06–4,15:1 (Handy), im Bild
   gemessen; im Dunkelmodus waren es vor dem hellen Satz (1) 7,1:1, der Satz hat ihn also verschlechtert.
   Volle Deckkraft: 6,5:1 (PC und Handy, hell und dunkel). Ohne !important: ist der Kontakt gesperrt, setzt dialer.js inline .45 —
   das bleibt das Zeichen „zu". */
#page-dialer.skin-glass #dialer-active #dialer-call-web-btn { opacity: 1; }

/* (8) Der Hinweis unter dem Anruf-Knopf (#dialer-hangup-hinweis, nur mit Telefonanlage: „An deiner
   Nebenstelle ist gerade kein Gerät angemeldet." / „Über die Telefon-App läuft der Anruf …"), 05.10.2026,
   Gegenpruefung. Er liest --amber (inline), 11,5 px: in glass lag er im gruenen Schein des Anruf-Knopfs
   bei 1,0–1,2:1, in Modern hell 2,7:1, in Klassik hell 3,0:1. In glass bekommt er dieselbe helle Unterlage
   wie die Statuszeile darueber (#dialer-call-status, Abschnitt 22) und ein dunkles Bernstein; in Klassik und
   Modern hell nur das dunkle Bernstein. Dunkel bleibt #f59e0b (5,6–6,2:1, gemessen). */
#page-dialer.skin-glass #dialer-active #dialer-hangup-hinweis {
  --amber: #8a3f06;
  background: rgba(255, 255, 255, .82); border-radius: 10px; padding: 3px 10px;
}
body:not(.dark) #page-dialer #dialer-hangup-hinweis { --amber: #9a4508; }   /* glass oben ist staerker (drei Kennungen) */

/* (9) „Nie wieder anrufen" in Klassik und Modern (05.10.2026, Gegenpruefung): dort trug die Kachel dieselbe
   Flaeche wie „Kein Interesse" und „Überspringen" (--bg3, im Bild ΔE2000 0,0). Eine eigene, dunklere
   Schiefer-Flaeche — „Dunkel statt rot" wie in pages/dialer.html begruendet. Gerechnet ΔE2000 gegen jede
   andere Kachel >= 12 (hell) bzw. >= 10,8 (dunkel), Schrift --text darauf 10:1 bzw. 7–8:1; im Bild gemessen
   in pruef-lesbar.js. */
body:not(.dark) #page-dialer:not(.skin-glass) #dialer-outcome-section .oc-stop { background: #bcc5da; }
body.dark #page-dialer:not(.skin-glass) #dialer-outcome-section .oc-stop { background: #35507a; }

/* ══════════════════════════════════════════════════════════════════════════════
   27 · FARBEN DER GANZEN APP, Teil Dialer (08.10.2026, Paket Farben; Nachtrag vom 07.10.2026).
   Der allgemeine Teil steht in styles.css („FARBEN DER GANZEN APP"); hier nur, was an den Designs haengt.
   Gemessen im gemalten Bild: intern/werkzeuge/lokal/pruef-farben-app.js (Auswertung) und
   intern/werkzeuge/lokal/pruef-lesbar.js (Ergebnis-Kacheln).
   ══════════════════════════════════════════════════════════════════════════════ */

/* (1) Auswertung NACH der Sitzung (#dialer-done) in Modern hell: dort IST --accent Gold. Die Rufnummern der
   Tabelle (12 px) standen in #c8a44d auf Weiss bei 2,37:1, auf den grauen Zeilen bei 2,08:1; „PDF laden"
   ebenso. Wie in Abschnitt 26 (4): als Schrift das dunkle Gold, Flaechen und Raender bleiben. */
body:not(.dark) #page-dialer.skin-modern #dialer-results-tbody { --accent: #6b5318; }
body:not(.dark) #page-dialer.skin-modern #dialer-done button[onclick="dialerExportPDF()"] { color: #6b5318 !important; }
/* … und in Glass dunkel: die Tabelle liegt auf einer Glasplatte, die HELLER ist als jede Flaeche, gegen die
   --text3 dunkel gerechnet wurde (#2d496e–#334f73 statt --bg4 #21405c): Spaltenkoepfe 3,94–4,33:1, die
   Rufnummern in Gold 4,33–4,40:1. Eine Stufe heller, nur hier. */
body.dark #page-dialer.skin-glass #dialer-done { --text3: #c3cce4; }
body.dark #page-dialer.skin-glass #dialer-results-tbody { --accent: #E4C878; }
/* Die Zahl hinter „✓ Abgehakt" (12 px, fett) liest seit heute --green-text / --amber-text / --red-text (dialer.js).
   Im Dunkelmodus hat --green-text #0ea579 auf --bg2 4,72:1 und auf der Glasplatte 4,07:1 — eine Stufe heller,
   nur in der Auswertung (gemessen: 3/3 gruen, 2/3 Bernstein, 0/3 rot in allen drei Designs, hell und dunkel). */
body.dark #page-dialer #dialer-done { --green-text: #34d399; }

/* (2) ERGEBNIS-KACHELN IN KLASSIK UND MODERN: sieben Bedeutungen, sieben Flaechen (Nachtrag vom 07.10.2026).
   Vorher trugen „Kein Interesse" und „Überspringen" DIESELBE Flaeche (--bg3, im Bild ΔE2000 0,1 — nur der
   gestrichelte Rand unterschied sie), Rückruf/Später lagen bei 3,1 (#e8f8f3 gegen #ecfeff), Nummer
   falsch/Überspringen bei 3,0; im Dunkelmodus Kein Interesse/Später 4,9, Kein Interesse/Nummer falsch 6,3.
   Ziel wie in Glass (Abschnitt 26): jedes Paar >= 10 — ohne die Pastell-Anmutung zu verlassen.
   Die Farbfamilien sind die von Glass, damit eine Bedeutung in allen drei Designs dieselbe Farbe hat:
     Rückruf Gruen · Kein Interesse ein warmer, gedaempfter Ton (kein Rot: „kein Vorwurf") · Später Himmelblau ·
     Nummer falsch Indigo-Violett · Nie wieder Schiefer (26 (9), bleibt) · Überspringen OHNE Farbe — die Flaeche
     der Karte, nur der gestrichelte Rand („Ausweg, nicht Ergebnis") · Termin der goldene Verlauf (bleibt).
   Gerechnet (CIEDE2000): hell kleinstes Paar 11,2 (Später/Nie wieder), dunkel 12,3 (Nummer falsch/Überspringen);
   im Bild gemessen in pruef-lesbar.js, das seit heute auch hier JEDES Paar fordert.
   Die Schrift ist je Kachel die dunkle (hell) bzw. helle (dunkel) Fassung ihres Tons: 5,4–6,6:1 hell,
   5,4–7,6:1 dunkel (gerechnet); Unterzeile und Flammen-Wert erben sie. */
body:not(.dark) #page-dialer:not(.skin-glass) #dialer-outcome-section .oc-win  { background: #c9efd9; color: #08684c; }
body:not(.dark) #page-dialer:not(.skin-glass) #dialer-outcome-section .oc-done { background: #f7dfd6; color: #4f566b; }
body:not(.dark) #page-dialer:not(.skin-glass) #dialer-outcome-section .oc-open { background: #cdeafc; color: #0b5f77; }
body:not(.dark) #page-dialer:not(.skin-glass) #dialer-outcome-section .oc-data { background: #e6d9f8; color: #4c3d91; }
body.dark #page-dialer:not(.skin-glass) #dialer-outcome-section .oc-win  { background: #0f4a35; color: #7ee0b8; }
/* dunkel ein Rosenholz-Ton (Farbwinkel 330°), kein Rotbraun: intern/werkzeuge/pruef-marke-flaeche.js meldet jede
   Flaeche mit Farbwinkel unter 38° und Saettigung ueber 0,2 als Orange des Altprodukts — #4a3230 waere so eine. */
body.dark #page-dialer:not(.skin-glass) #dialer-outcome-section .oc-done { background: #4d3340; color: #edccd8; }
body.dark #page-dialer:not(.skin-glass) #dialer-outcome-section .oc-open { background: #0b5868; color: #a5ecf7; }
body.dark #page-dialer:not(.skin-glass) #dialer-outcome-section .oc-data { background: #3a2f6b; color: #d0c4ff; }
/* „Überspringen" hat keine eigene Flaeche mehr (damit jedes Kachel-Paar unterscheidbar ist) — dann muss der RAND den
   Knopf tragen: mit dem blassen Rand von vorher waren es im Bild 1,3–1,5:1 (Gegenpruefung 08.10.2026). --text3 ist im
   Hellen 5,7:1 auf Weiss und im Dunklen hell auf dunkel; fuer Bedienelemente verlangt WCAG 1.4.11 mindestens 3:1. */
#page-dialer:not(.skin-glass) #dialer-outcome-section .oc-skip { background: var(--bg2); border-color: var(--text3); }
#page-dialer:not(.skin-glass) #dialer-outcome-section .oc-skip:hover { background: var(--bg3); border-color: var(--text2); }

/* (3) Glass, Handy: die E-Mail-Zeile unter der Rufnummer liegt auf dem grauen Teil der Nummern-Platte. #434a6b
   (Abschnitt 22) hat dort in WebKit — also auf jedem iPhone — 4,28:1 (12 px; Chromium malt den Verlauf an der
   Stelle eine Spur heller und kam ueber 4,5). #353b58: gerechnet 5,4:1 auf #bbb6ad. */
#page-dialer.skin-glass #dialer-active #dialer-contact-email { color: #353b58 !important; }

/* ── HANDY-FEINSCHLIFF (08.10.2026, Welle 2) — eigener Block am Ende; Begruendung am gleichnamigen Block in
   styles.css (Block 3: keine Schrift unter 12 px am Handy). Die Sitzung in Modern und Glass setzt weiter oben
   einige Groessen mit !important und drei Kennungen (10–11,5 px: Flammen am Ergebnis-Knopf, die Ueberschrift
   „Ergebnis des Anrufs", die Notiz zum Kontakt, der Status unter dem Anruf-Knopf, der zweite Anruf-Weg, der
   Hinweis unter den Spalten der Zuordnung) — die allgemeine Regel in styles.css kommt dagegen nicht an.
   Hier dieselben Selektoren, am Handy auf 12 px; die Ueberschrift dazu in normaler Schreibweise. */
@media (max-width: 768px) {
  #page-dialer.skin-modern #dialer-active .dialer-outcome-btn .oc-val,
  #page-dialer.skin-glass  #dialer-active .dialer-outcome-btn .oc-val,
  #page-dialer.skin-modern #dialer-active #dialer-contact-note-wrap,
  #page-dialer.skin-glass  #dialer-active #dialer-contact-note-wrap,
  #page-dialer.skin-modern #dialer-active #dialer-call-status,
  #page-dialer.skin-glass  #dialer-active #dialer-call-status,
  #page-dialer.skin-modern #dialer-active #dialer-call-web-btn,
  #page-dialer.skin-glass  #dialer-active #dialer-call-web-btn,
  #page-dialer.skin-modern #dialer-active #dialer-outcome-section > div:first-child,
  #page-dialer.skin-glass  #dialer-active #dialer-outcome-section > div:first-child,
  #page-dialer.skin-modern #dialer-mapping-grid select + div,
  #page-dialer.skin-glass  #dialer-mapping-grid select + div { font-size: 12px !important; }
  #page-dialer.skin-modern #dialer-active #dialer-outcome-section > div:first-child,
  #page-dialer.skin-glass  #dialer-active #dialer-outcome-section > div:first-child { text-transform: none !important; letter-spacing: normal !important; }
}

/* HANDY-FEINSCHLIFF, Block 4 (08.10.2026) — Bedienungshilfen des Systems im Glas-Design; Begruendung in styles.css.
   (a) „Transparenz reduzieren" (und „Kontrast erhöhen" — Safari kennt nur das): die durchscheinenden Flaechen
       werden DECKEND. Glas belegt --bg2/--bg3/--bg4 durchscheinend (hell .66/.48/.38, dunkel .07/.05/.04); hier
       stehen die deckenden Gegenstuecke: hell die Werte der Sitzung (pages/dialer.html), dunkel dieselben
       Toene auf dem Grund #0a2038 ausgerechnet. Die Sitzung traegt in Glas auch im Dunkeln den hellen Satz
       (Abschnitt 26 (1)) — deshalb steht ihre Zeile NACH der dunklen. Die feste Leiste der Sitzung (.92 mit
       Unschaerfe) wird weiss: ohne Unschaerfe schien der Text dahinter durch (Nachtrag vom 07.10.). */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  #page-dialer.skin-glass { --bg2: #ffffff; --bg3: #f1f3f8; --bg4: #e8edf8; }
  body.dark #page-dialer.skin-glass { --bg2: #1b3046; --bg3: #162b42; --bg4: #142940; }
  body.dark #page-dialer.skin-glass #dialer-active { --bg2: #ffffff; --bg3: #f1f3f8; --bg4: #e8edf8; }
  /* !important und doppelte Kennungen: die Regel der Leiste steht im Stilblock von pages/dialer.html, der NACH
     dieser Datei gilt (gleich schwer, spaeter — gemessen: ohne beides blieb die Leiste bei .92 mit Unschaerfe). */
  #page-dialer#page-dialer.skin-glass #dialer-active #sitzung-leiste { background: #ffffff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  /* Elf Flaechen der Sitzung setzen ihre Unschaerfe mit drei Kennungen und !important (Flammen-Platte, Nummern-
     Platte, Notiz zum Kontakt, die sieben Ergebnis-Knoepfe) — die allgemeine Regel in styles.css (*) verliert
     dagegen (gemessen: 12 → 11). Ihre Toenung bleibt: sie liegt auf der Platte der Sitzung, nicht auf Inhalt. */
  #page-dialer#page-dialer#page-dialer.skin-glass #dialer-active#dialer-active *,
  #page-dialer#page-dialer#page-dialer.skin-glass #dialer-active#dialer-active *::before,
  #page-dialer#page-dialer#page-dialer.skin-glass #dialer-active#dialer-active *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
/* (b) „Bewegung reduzieren" auch in der Sitzung von Modern und Glas. Die allgemeine Regel (styles.css: * mit
       transition-duration 0.01ms) verlor dort gegen Uebergaenge, die mit drei Kennungen und !important gesetzt
       sind: 8 (Modern) bzw. 7 (Glas) Knoepfe behielten 0,2–0,25 s (#dialer-call-btn, .dialer-outcome-btn;
       gemessen 04.10., W10). Die doppelten Kennungen heben diese Regel ueber jede der Sitzung (5 Kennungen). */
@media (prefers-reduced-motion: reduce) {
  #page-dialer#page-dialer#page-dialer #dialer-active#dialer-active *,
  #page-dialer#page-dialer#page-dialer #dialer-active#dialer-active *::before,
  #page-dialer#page-dialer#page-dialer #dialer-active#dialer-active *::after {
    transition-duration: 0.01ms !important; transition-delay: 0s !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
  }
}
/* (c) „Kontrast erhöhen": zwei Texte der Glas-Sitzung wurden mit der Einstellung SCHLECHTER statt besser
       (Gegenpruefung 08.10.2026, Chromium, Handy 390×844, hell und dunkel, im gemalten Bild): ohne Unschaerfe steht
       der graue Teil des Grunds unter ihnen, ihre Farbe blieb. Der Platzhalter „Notiz zum Gespräch…" fiel von 4,48
       auf 4,01:1, die E-Mail des Kontakts (12 px, feste Farbe #434a6b aus dieser Datei) von 4,63 auf 4,11:1.
       NUR unter dieser Einstellung tragen beide jetzt die Schriftfarbe der Sitzung — der Platzhalter eine Spur
       leichter, damit er nicht wie getippter Text aussieht. Kennt ein Browser color-mix nicht, gilt die Zeile davor.
       Ohne die Einstellung bleibt alles, wie es ist (die Farben dort gehoeren dem Paket „farben-app"). */
@media (prefers-contrast: more) {
  #page-dialer#page-dialer.skin-glass #dialer-active #dialer-contact-email { color: var(--text) !important; opacity: 1 !important; }
  #page-dialer#page-dialer.skin-glass #dialer-active#dialer-active #dialer-note::placeholder {
    color: var(--text) !important; color: color-mix(in srgb, var(--text) 82%, transparent) !important; opacity: 1 !important;
  }
}