/* Mobile field interface. Every rule is scoped to the explicit mobile mode so
   the desktop presentation remains governed by styles.css. */
.rl-mobile-app,
.mobile-return-button,
.mobile-record-nav,
.mobile-section-toggle {
  display: none;
}

html.rl-mobile-mode {
  background: var(--mist);
  color-scheme: light;
}

html.rl-mobile-mode body {
  min-width: 0;
  overflow-x: hidden;
  background: var(--mist);
}

/* Lesbar in der Sonne: In der mobilen Oberflaeche und ihren Formular-
   Dialogen ist der Fliesstext 16px, jede Sekundaerzeile und jeder
   Kartenknopf 14px (vorher 14 und 12). Pipeline, Auswertung und Kohorten
   behalten ihre dichten Tabellen. */
html.rl-mobile-mode .rl-mobile-app,
html.rl-mobile-mode .action-dialog,
html.rl-mobile-mode .toast {
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
}

/* Umrandete Bedienelemente auf weissem Grund hatten 1,4:1 Kontrast und
   lasen sich in der Sonne wie blosser Text. Ihr Rand bekommt mindestens 3:1;
   Karten und Trennlinien bleiben leise. Gesetzt wird nur die Variable am
   Element selbst, Zustandsfarben (gewaehlt, aktiv) gewinnen weiter. */
html.rl-mobile-mode :is(
  .mobile-segments, .mobile-icon-button, .mobile-load-more, .mobile-search, .mobile-customer-region,
  .mobile-day-tabs button, .mobile-route-actions a, .mobile-route-actions button, .mobile-route-more-maps a,
  .mobile-more-footer button, .mobile-filter-dialog fieldset label span,
  .mobile-field select, .mobile-record-nav button, .mobile-section-toggle,
  .dialog-close, .button--secondary, .choice-fieldset label, input, select, textarea
) {
  --border: var(--border-control);
}

/* iOS Safari does not reliably prevent the page behind a native <dialog>
   from moving. JavaScript fixes the body at its current scroll position while
   a mobile sheet is open; the sheet remains the only vertical scroll surface. */
html.rl-mobile-scroll-locked,
html.rl-mobile-scroll-locked body {
  overflow: hidden;
  overscroll-behavior: none;
}

html.rl-mobile-mode .app-header,
html.rl-mobile-mode body > main {
  display: none;
}

html.rl-mobile-mode .rl-mobile-app {
  display: block;
  min-height: 100vh;
  min-height: 100dvh;
}

html.rl-mobile-mode .rl-mobile-app[hidden],
html.rl-mobile-mode .rl-mobile-app [hidden] {
  display: none !important;
}

/* :where() haelt die Spezifitaet bei einem Element. Als ".rl-mobile-app
   button" schlug dieser Reset jede Einzelklasse wie .mobile-primary-button,
   und deren Schriftgewicht fiel auf 400. */
:where(.rl-mobile-app) button,
:where(.rl-mobile-app) input,
:where(.rl-mobile-app) select,
:where(.rl-mobile-app) a {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

.rl-mobile-app button,
.rl-mobile-app a {
  touch-action: manipulation;
}

.rl-mobile-app svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mobile-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 70;
  min-height: calc(56px + env(safe-area-inset-top));
  padding: max(8px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 8px max(14px, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 6px 20px rgba(20, 30, 40, .18);
}

.mobile-header > img {
  flex: 0 0 auto;
}

.mobile-header__title {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.mobile-header__title strong {
  overflow: hidden;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-header__title span {
  overflow: hidden;
  color: rgba(255, 255, 255, .62);
  font-size: var(--text-sm);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-data-state {
  min-height: 44px;
  margin-left: auto;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: none;
  color: rgba(255,255,255,.76);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.mobile-data-state:active { transform: scale(.97); }

.mobile-data-state i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber-on-ink);
}

.mobile-data-state.is-live i { background: var(--green); }
.mobile-data-state.is-error i { background: var(--red-on-ink); }

.mobile-icon-button {
  position: relative;
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}
/* Handlungsbedarf/Nachfassen/Übergaben/Alle stehen nur im Filter-Blatt, nicht
   im Streifen darüber - ohne den Punkt sah man ihre Auswahl nur an der
   Überschrift, die man erst nach dem Scrollen wieder sieht. */
.mobile-icon-button.has-active-filter::after {
  content: ""; position: absolute; top: 4px; right: 4px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--red); border: 2px solid var(--paper);
}

.mobile-toolbar .mobile-icon-button { border-radius: 12px; }

.mobile-header .mobile-icon-button {
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: var(--paper);
}

.mobile-content {
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(68px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) calc(86px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}

.mobile-page {
  width: min(100%, 620px);
  margin: 0 auto;
}

.mobile-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px 44px;
  gap: 7px;
  align-items: center;
  margin: 0 0 12px;
}

.mobile-segments {
  min-width: 0;
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  /* 3px innen: Die 44px-Treffer der 38px-Segmente bleiben ganz. */
  padding: 3px;
  border: 1px solid var(--border-control);
  border-radius: 12px;
  background: var(--paper);
  /* Der Streifen laeuft ueber den rechten Rand hinaus und wurde bisher
     mitten im Wort abgeschnitten ("Gep…"). Das las sich als Defekt, nicht
     als Hinweis, dass es weitergeht. Der Verlauf sagt: hier laesst sich
     schieben. */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  scroll-snap-type: x proximity;
}
.mobile-segments button { scroll-snap-align: start; }
/* Ist alles sichtbar, gibt es nichts auszublenden. */
@supports (animation-timeline: scroll(x)) {
  .mobile-segments:not(:hover) { mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%); }
}

.mobile-segments::-webkit-scrollbar,
.mobile-day-tabs::-webkit-scrollbar,
.mobile-record-nav::-webkit-scrollbar {
  display: none;
}

.mobile-segments button {
  position: relative;
  min-width: max-content;
  min-height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-70);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.mobile-segments button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.mobile-segments span { margin-left: 3px; opacity: .8; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mobile-segments button::after { content: ""; position: absolute; inset: -3px 0; }
.mobile-segments .mobile-segment-badge {
  min-width: 20px;
  height: 16px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--red-action);
  color: var(--paper);
  font-size: 11px;
  font-weight: 800;
  opacity: 1;
}

.mobile-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 4px 10px;
}
.mobile-section-head h1 { font-size: 20px; letter-spacing: -.015em; }
.mobile-section-head p { margin: 0; font-size: 14px; white-space: nowrap; }

.mobile-section-head h1,
.mobile-route-head h1 {
  margin: 0;
  font-size: var(--text-xl);
  line-height: 1.15;
  letter-spacing: -.025em;
}

.mobile-section-head p,
.mobile-route-head p {
  margin: 3px 0 0;
  color: var(--ink-50);
  font-size: var(--text-sm);
}

.mobile-list {
  display: grid;
  gap: 12px;
}

/* Beide Listen kappten bisher stumm bei 20/60 Eintraegen ohne diesen Knopf -
   ein Teil der Region war nur ueber die Suche erreichbar. */
.mobile-load-more {
  min-height: 48px; padding: 0 16px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--paper); color: var(--ink); font-size: var(--text-sm); font-weight: 700;
  cursor: pointer;
}
.mobile-load-more:active { transform: scale(.98); }

/* Heute-Karte (Runde 2, V2-Heute-Liste): eine Zeile oben sagt, was der
   Kunde ist (Churn-Risiko rot gefuellt, geplant blau, sonst grau mit Punkt),
   dann Name, Ort, Signal, Beleg, unten Navi und Anrufen als Symbol und die
   Hauptaktion rechts: "Besuch planen" rot (die zentrale Aktion, Entscheidung
   PO 02.10.), "Termin" blau, am Besuchstag "Meeting" ruhig. */
.mobile-account-card {
  overflow: hidden;
  border: 1px solid var(--border-card);
  border-radius: 14px;
  background: var(--paper);
}
/* 1,5px rot (Rot auf Nebel 4,66:1). */
.mobile-account-card.is-risk { border: 1.5px solid var(--red-action); }

.mobile-card-open {
  width: 100%;
  min-height: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.mobile-card-kind {
  min-height: 32px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-70);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.mobile-card-kind b { font-weight: 800; }
.mobile-card-kind i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--border-control); }
.mobile-card-kind svg { width: 15px; height: 15px; flex: none; stroke-width: 2.2; }
.mobile-card-kind em {
  margin-left: auto;
  padding-left: 8px;
  overflow: hidden;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}
.mobile-account-card.is-risk .mobile-card-kind { background: var(--red-action); color: var(--paper); }
.mobile-account-card.is-risk .mobile-card-kind svg { stroke-width: 2.4; }
.mobile-account-card.is-plan .mobile-card-kind { background: var(--blue-soft); color: var(--blue); }
.mobile-card-body { display: grid; gap: 1px; padding: 0 14px 10px; }
.mobile-account-card:is(.is-risk, .is-plan) .mobile-card-body { padding-top: 10px; }
.mobile-card-name {
  min-width: 0;
  overflow: hidden;
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -.01em;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mobile-account-card.is-compact .mobile-card-open { min-height: 0; }

.mobile-card-location,
.mobile-card-evidence {
  overflow: hidden;
  color: var(--ink-50);
  font-size: 14px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mobile-card-evidence { color: var(--ink-70); }
.mobile-card-signal {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}
.mobile-account-card.is-risk .mobile-card-signal { color: var(--red-deep); }

/* Symbole 40px (Treffer 44), die Hauptaktion rechts, mindestens 148px breit.
   3px Luft unten und an den Seiten, damit die Karte (overflow: hidden) die
   Trefferflaeche nicht beschneidet. */
.mobile-card-actions {
  padding: 0 14px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mobile-card-icon {
  position: relative;
  width: 40px;
  height: 40px;
  flex: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-control);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
}
.mobile-card-icon::after { content: ""; position: absolute; inset: -3px; }
.mobile-card-icon svg { width: 18px; height: 18px; stroke-width: 2; }
.mobile-card-icon.is-off { border-color: var(--border); background: var(--mist); color: var(--ink-off); cursor: not-allowed; }
.mobile-card-action {
  position: relative;
  min-width: 148px;
  min-height: 40px;
  margin-left: auto;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-control);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.mobile-card-action::after { content: ""; position: absolute; inset: -3px 0; }
.mobile-card-action.is-plan { border-color: var(--red-action); background: var(--red-action); color: var(--paper); }
/* Geplant: blau (Blau auf Hellblau 6,20:1). */
.mobile-card-action.is-termin { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); }
.mobile-card-actions :is(a, button):active { transform: scale(.98); }
.mobile-card-actions button:disabled { cursor: not-allowed; opacity: .5; transform: none; }
.mobile-card-icon.is-off:active { transform: none; }

.mobile-next-stop {
  width: 100%;
  min-height: 64px;
  margin: 0 0 12px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--blue-edge);
  border-radius: 14px;
  background: var(--blue-soft);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.mobile-next-stop:active { transform: scale(.99); }
.mobile-next-stop__icon {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--paper);
  color: var(--blue);
}
.mobile-next-stop__text { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.mobile-next-stop__text small { display: flex; align-items: center; gap: 6px; overflow: hidden; color: var(--ink-70); font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.mobile-next-stop__text .mobile-next-stop__kicker { color: var(--blue); font-weight: 700; }
.mobile-next-stop__text strong { overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.mobile-next-stop > svg { flex: none; color: var(--blue); }
/* Kleine rote Fahne: Als Naechstes und Route, wenn der Kunde rot ist. */
.mobile-risk-flag {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--red-action);
  color: var(--paper);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: 2px;
}
.mobile-route-customer .mobile-risk-flag { margin-left: 8px; }

/* Eben bearbeitet: wer nach einer Aktion aus der Liste faellt, steht hier. */
.mobile-touched {
  margin: 0 0 4px;
  padding: 12px 16px 4px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--paper);
}
.mobile-touched h2 { margin: 0; color: var(--ink-50); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.mobile-touched button {
  width: 100%;
  min-height: 52px;
  padding: 8px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  border-top: 1px solid var(--border-soft);
  background: none;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.mobile-touched h2 + button { border-top: 0; }
.mobile-touched button > span { min-width: 0; display: flex; flex-direction: column; }
.mobile-touched strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.mobile-touched small { color: var(--green); font-size: 13px; font-weight: 700; }
.mobile-touched svg { flex: none; color: var(--ink-50); }

.mobile-handover-card {
  padding: 14px;
  display: grid;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--paper);
}
.mobile-handover-card strong { font-size: var(--text-base); }
.mobile-handover-card span,
.mobile-handover-card small { color: var(--ink-50); font-size: var(--text-sm); }
.mobile-handover-card p { margin: 5px 0 0; font-size: var(--text-base); }

.mobile-customer-tools {
  display: grid;
  gap: 9px;
}

.mobile-search {
  min-height: 48px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--paper);
}

.mobile-search svg { flex: 0 0 auto; color: var(--ink-50); }
.mobile-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: var(--text-lg);
}
.mobile-result-count { margin: 10px 2px; color: var(--ink-50); font-size: var(--text-sm); }

.mobile-customer-region {
  min-height: 48px;
  padding: 0 11px 0 13px;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink-50);
  font-size: var(--text-sm);
  font-weight: 700;
}

.mobile-customer-region select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 28px 0 8px;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  font-size: var(--text-lg);
  font-weight: 600;
  text-align: right;
}

.mobile-day-tabs {
  margin: 0 -12px 14px;
  padding: 0 12px 2px;
  display: flex;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
}
.mobile-day-tabs button {
  min-width: max-content;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-50);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 700;
}
.mobile-day-tabs button[aria-selected="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.mobile-route-head { margin-bottom: 11px; display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.mobile-route-head > a {
  min-height: 44px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border-control);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 720;
  text-decoration: none;
}
.mobile-route-head svg { width: 18px; height: 18px; }
/* Mehr als neun Zwischenstopps brauchen einen zweiten Google-Maps-Link fuer
   denselben Tag - selten genug, dass ein schmales Zeilenpaar reicht. */
.mobile-route-more-maps { display: flex; flex-wrap: wrap; gap: 8px; margin: -3px 0 11px; }
.mobile-route-more-maps a {
  min-height: 44px; padding: 0 12px; display: inline-flex; align-items: center;
  border: 1px solid var(--border); border-radius: 999px; color: var(--blue);
  font-size: var(--text-xs); font-weight: 700; text-decoration: none;
}
.mobile-route-list { margin: 0; padding: 0; display: grid; gap: 9px; list-style: none; }
.mobile-route-list li {
  display: grid;
  grid-template-columns: 32px minmax(0,1fr);
  gap: 7px 10px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--paper);
}
.mobile-route-number { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: var(--text-sm); font-weight: 780; }
.mobile-route-customer { min-height: 54px; padding: 0; display: grid; gap: 2px; border: 0; background: transparent; color: var(--ink); cursor: pointer; text-align: left; }
.mobile-route-customer strong { font-size: var(--text-base); }
.mobile-route-time {
  display: inline-flex; margin-left: 8px; padding: 1px 7px; border-radius: 999px;
  background: var(--blue-soft); color: var(--blue); font-size: var(--text-xs);
  font-weight: 750; font-variant-numeric: tabular-nums; vertical-align: 1px;
}
.mobile-route-customer span,
.mobile-route-customer small { color: var(--ink-50); font-size: var(--text-sm); }
.mobile-route-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.mobile-route-actions a,
.mobile-route-actions button {
  min-height: 44px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
}
.mobile-route-actions button:not(.is-quiet) { border-color: var(--border-control); }
.mobile-route-actions .is-quiet { margin-left: auto; color: var(--ink-50); }

.mobile-more-account {
  margin-bottom: 12px;
  padding: 16px;
  display: grid;
  gap: 3px;
  border-radius: 14px;
  background: var(--ink);
  color: var(--paper);
}
.mobile-more-account > strong { font-size: var(--text-lg); }
.mobile-more-account > span { color: rgba(255,255,255,.62); font-size: var(--text-sm); }
/* .mobile-field steht spaeter in der Datei und gewann: grauer Text auf dunklem
   Grund und 16px Einzug, den der Name darueber nicht hat. */
.mobile-more-account .mobile-more-region { margin: 14px 0 0; color: rgba(255,255,255,.72); }
.mobile-more-account .mobile-more-region select { border-color: rgba(255,255,255,.16); background: var(--paper); color: var(--ink); }
.mobile-more-list { overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--paper); }
.mobile-more-list > button {
  width: 100%;
  min-height: 64px;
  padding: 10px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.mobile-more-list > button:last-child { border-bottom: 0; }
.mobile-more-list > button span { display: grid; gap: 2px; }
.mobile-more-list strong { font-size: var(--text-base); }
.mobile-more-list small { color: var(--ink-50); font-size: var(--text-sm); }
.mobile-more-list svg { color: var(--ink-50); }
.mobile-more-footer { margin: 13px 0; display: flex; gap: 8px; }
.mobile-more-footer button {
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 700;
}

.mobile-nav {
  position: fixed;
  inset: auto 0 0;
  z-index: 70;
  min-height: calc(68px + env(safe-area-inset-bottom));
  padding: 5px max(7px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-left));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border);
  background: var(--paper);
  box-shadow: 0 -8px 22px rgba(20,30,40,.07);
}
.mobile-nav button {
  position: relative;
  min-width: 0;
  min-height: 54px;
  padding: 4px 2px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-50);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
}
.mobile-nav button[aria-current="page"] { color: var(--ink); background: var(--mist); }
.mobile-nav button[aria-current="page"] svg { stroke-width: 2.2; }
.mobile-nav b {
  position: absolute;
  top: 3px;
  left: calc(50% + 8px);
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border: 2px solid var(--paper);
  border-radius: 999px;
  /* Runde 2: Stopps sind geplante Besuche, blau; Rot heisst Risiko. */
  background: var(--blue);
  color: var(--paper);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.mobile-empty,
.mobile-loading {
  min-height: 210px;
  padding: 28px 20px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  border: 1px dashed var(--border);
  border-radius: 14px;
  background: var(--paper);
  text-align: center;
}
.mobile-empty strong { font-size: var(--text-lg); }
.mobile-empty p,
.mobile-loading p { max-width: 300px; margin: 0; color: var(--ink-50); font-size: var(--text-base); line-height: 1.45; }
.mobile-empty > svg { width: 28px; height: 28px; color: var(--ink-50); }
.mobile-empty button { min-height: 44px; margin-top: 5px; padding: 0 15px; border: 0; border-radius: 10px; background: var(--ink); color: var(--paper); font-weight: 720; }
.mobile-loading i { width: 22px; height: 22px; border: 2px solid var(--border); border-top-color: var(--red-action); border-radius: 50%; animation: mobile-spin .8s linear infinite; }
@keyframes mobile-spin { to { transform: rotate(360deg); } }

.mobile-filter-dialog {
  width: min(100%, 620px);
  max-width: none;
  max-height: min(88vh, 760px);
  max-height: min(88dvh, 760px);
  margin: auto auto 0;
  padding: 0;
  overflow-y: auto;
  border: 0;
  border-radius: 20px 20px 0 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 -18px 50px rgba(20,30,40,.2);
}
.mobile-filter-dialog::backdrop { background: rgba(20,30,40,.48); }
.mobile-filter-dialog[open] { animation: mobile-sheet-in 180ms cubic-bezier(.2,.8,.2,1); }
@keyframes mobile-sheet-in { from { transform: translateY(18px); opacity: .72; } }
/* styles.css zentriert jeden offenen Dialog (dialog[open] { margin: auto })
   und schlug damit das `margin: auto auto 0` oben: Das Blatt schwebte gut
   50px ueber dem unteren Rand, darunter schien die Tableiste durch. */
html.rl-mobile-mode .mobile-filter-dialog[open] {
  margin: auto auto 0;
  max-height: min(88dvh, 760px);
}
.mobile-dialog-head {
  padding: 12px 16px 11px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border-soft);
}
.mobile-dialog-head p { margin: 0 0 3px; color: var(--ink-50); font-size: var(--text-sm); }
.mobile-dialog-head h2 { margin: 0; font-size: var(--text-xl); line-height: 1.15; letter-spacing: -.025em; }
.mobile-primary-button { width: 100%; min-height: 44px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--ink); color: var(--paper); cursor: pointer; font-size: 15px; font-weight: 700; }
.mobile-primary-button:active { transform: scale(.98); }
/* Ohne diese Regel sah ein deaktivierter Knopf genauso aus wie ein aktiver -
   im Feld, mit Handschuhen, war der einzige Hinweis der Fingerdruck ohne
   Reaktion. */
.mobile-primary-button:disabled { cursor: not-allowed; opacity: .5; transform: none; }

.mobile-filter-dialog form { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
.mobile-filter-dialog fieldset { margin: 14px 16px 0; padding: 0; border: 0; }
.mobile-filter-dialog legend,
.mobile-field { color: var(--ink-50); font-size: var(--text-sm); font-weight: 720; }
.mobile-filter-dialog fieldset > div { margin-top: 7px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.mobile-filter-dialog fieldset label input { position: absolute; opacity: 0; pointer-events: none; }
.mobile-filter-dialog fieldset label span { min-height: 46px; padding: 0 11px; display: flex; align-items: center; justify-content: space-between; gap: 6px; border: 1px solid var(--border); border-radius: 10px; color: var(--ink); font-size: var(--text-base); cursor: pointer; }
.mobile-filter-dialog fieldset input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.mobile-filter-dialog fieldset input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.mobile-field { margin: 13px 16px 0; display: grid; gap: 5px; }
.mobile-field select { width: 100%; min-height: 48px; padding: 0 36px 0 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--paper); color: var(--ink); font-size: var(--text-lg); }
.mobile-field select:disabled { opacity: .55; }
.mobile-filter-dialog .mobile-primary-button { width: calc(100% - 32px); margin: 16px 16px 0; }

html.rl-mobile-mode .toast { z-index: 120; bottom: calc(78px + env(safe-area-inset-bottom)); }
/* Ueber einer offenen Kundenkarte kommt die Meldung als Popover in die
   oberste Ebene (mobile.js). Die Browser-Vorgaben fuer Popover (mittig,
   Rahmen) gelten hier nicht. */
html.rl-mobile-mode .toast[popover] {
  inset: auto 12px calc(78px + env(safe-area-inset-bottom)) 12px;
  width: auto;
  height: auto;
  margin: 0;
  border: 0;
  overflow: visible;
}

/* Wie .toast: .mobile-nav (z-index 70) liegt sonst darueber, und beide fixen
   Karten hocken unter ihrer eigenen bottom-Position - ohne diese Regel ist
   das Faehnchen tippbar-tot und die Erinnerung teilweise abgeschnitten.
   Ausserdem: bei <=700px setzt styles.css .birthday-flag auf position:static,
   was im mobilen App-Grundgeruest gaenzlich unsichtbar landet - hier wird
   position wieder erzwungen. */
html.rl-mobile-mode .birthday-flag {
  position: fixed;
  z-index: 90;
  bottom: calc(78px + env(safe-area-inset-bottom));
}
html.rl-mobile-mode .birthday-nudge {
  z-index: 91;
  bottom: calc(116px + env(safe-area-inset-bottom));
}

html.rl-mobile-mode .mobile-record-nav,
html.rl-mobile-mode .mobile-section-toggle { display: flex; }
html.rl-mobile-mode .mobile-record-nav {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 0 -16px 12px;
  padding: 8px 16px;
  gap: 6px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border-soft);
  background: var(--paper);
  scrollbar-width: none;
}
html.rl-mobile-mode .mobile-record-nav button {
  min-width: max-content;
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 700;
  scroll-snap-align: start;
}
/* DS-9i: Der Bereich im Blick ist ausgewählt, wie die Reiter der Kundenseite.
   Die Leiste rollt seitlich und rastet an den Reitern ein; app.js
   (syncRecordNav) holt den gewählten ganz ins Bild, auch "Notizen" am
   rechten Rand. */
html.rl-mobile-mode .mobile-record-nav {
  scroll-snap-type: x proximity;
  scroll-padding-inline: 16px;
}
html.rl-mobile-mode .mobile-record-nav button[aria-current="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
html.rl-mobile-mode .mobile-section-toggle {
  min-width: 72px;
  min-height: 44px;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink-70);
  font-size: var(--text-sm);
  font-weight: 700;
}
html.rl-mobile-mode [data-mobile-record-section].is-mobile-collapsed > :not(.profile-section__head):not(.activity-workspace__head) { display: none !important; }
html.rl-mobile-mode .customer-dialog__actions {
  position: sticky;
  bottom: 0;
  z-index: 4;
  margin: 16px -16px -16px;
  padding: 9px 16px max(9px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--paper);
}
html.rl-mobile-mode .customer-dialog__actions .button { min-height: 48px; }

/* Existing dialogs keep their handlers and forms; mobile changes only their
   geometry and reachable controls. */
html.rl-mobile-mode .week-dialog,
html.rl-mobile-mode .route-dialog,
html.rl-mobile-mode .briefing-dialog,
html.rl-mobile-mode .customer-dialog {
  width: 100vw;
  max-width: none;
  max-height: 100vh;
  max-height: 100dvh;
  margin: 0;
  border-radius: 0;
}
html.rl-mobile-mode .customer-dialog {
  height: 100vh;
  height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
html.rl-mobile-mode .week-dialog,
html.rl-mobile-mode .briefing-dialog,
html.rl-mobile-mode .route-dialog { padding: 16px; }
html.rl-mobile-mode .week-body { max-height: calc(100dvh - 205px); }
html.rl-mobile-mode .briefing-body { max-height: calc(100dvh - 95px); }
html.rl-mobile-mode .route-dialog { overflow-y: auto; }
html.rl-mobile-mode .action-dialog input,
html.rl-mobile-mode .action-dialog select,
html.rl-mobile-mode .action-dialog textarea,
html.rl-mobile-mode .week-dialog select,
html.rl-mobile-mode .week-dialog input { font-size: var(--text-lg); }
/* Und alle uebrigen Eingaben dazu. `button, input, select, textarea { font:
   inherit }` haengt sie an die Basisgroesse; faellt die unter 16px, zoomt
   iOS beim Antippen in die Seite hinein und der Nutzer muss zurueckwischen.
   Diese Regel ist der Boden, nicht die Gestaltung. */
html.rl-mobile-mode input,
html.rl-mobile-mode select,
html.rl-mobile-mode textarea { font-size: max(16px, var(--text-base)); }
html.rl-mobile-mode .action-dialog button,
html.rl-mobile-mode .week-dialog button,
html.rl-mobile-mode .route-dialog button,
html.rl-mobile-mode .briefing-dialog button { min-height: 44px; }
/* Die Kundenakte hat noch Desktop-Masse: 42px-Knoepfe, 34px-Haekchen fuer
   Werbung und Stimmung. Am Telefon 44px, und die ganze Pille ist das Ziel. */
html.rl-mobile-mode .customer-dialog .button,
html.rl-mobile-mode .customer-dialog .dialog-close,
html.rl-mobile-mode .customer-dialog .hubspot-link { min-height: 44px; }
html.rl-mobile-mode .choice-fieldset label { min-height: 44px; padding: 0 14px; }
html.rl-mobile-mode .choice-fieldset input { width: 20px; height: 20px; }

/* Ein Ausgang je Dialog. "Abbrechen" neben "Schließen" las sich in "Termin
   ändern" wie "Termin abbrechen" und schloss stumm zwei Ebenen. Oben bleibt
   "Schließen", unten nur das Speichern. Abmelden hat oben keinen Ausgang und
   behaelt sein Abbrechen. */
html.rl-mobile-mode .action-dialog:not(.signout-dialog) .dialog-actions .button--secondary[value="cancel"],
html.rl-mobile-mode .customer-dialog__actions .button--secondary[value="cancel"] { display: none; }
html.rl-mobile-mode .action-dialog:not(.signout-dialog) .dialog-actions .button--primary,
html.rl-mobile-mode .customer-dialog__actions .button--primary { flex: 1 1 auto; }

/* Fokus ist kein Fehler: Der rote Rand beim Antippen sah im Planer wie eine
   Fehlermeldung aus, bevor ueberhaupt etwas eingegeben war. */
html.rl-mobile-mode .action-dialog :is(input, select, textarea):focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(20, 30, 40, .12);
}
html.rl-mobile-mode .action-dialog :is(input, select, textarea):focus-visible { outline: none; }
html.rl-mobile-mode .week-stop-drop { width: 44px; min-width: 44px; height: 44px; }
html.rl-mobile-mode .week-capacity input[type="range"] { min-height: 44px; }

/* Secondary desktop views remain reachable inside the mobile shell. */
html.rl-mobile-mode.rl-mobile-legacy .rl-mobile-app { min-height: 0; height: 0; }
html.rl-mobile-mode.rl-mobile-legacy .mobile-content { display: none; }
html.rl-mobile-mode.rl-mobile-legacy body > main {
  display: block;
  padding-top: calc(68px + env(safe-area-inset-top));
  padding-bottom: calc(86px + env(safe-area-inset-bottom));
}
html.rl-mobile-mode.rl-mobile-legacy .workspace-head__actions { display: none; }

.mobile-return-button {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 100;
  min-height: 46px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 10px 24px rgba(20,30,40,.2);
  font: 700 13px var(--font, sans-serif);
}
html.rl-mobile-capable.rl-force-desktop .mobile-return-button:not([hidden]) { display: block; }

@media (max-height: 500px) {
  html.rl-mobile-mode .mobile-header {
    min-height: calc(48px + env(safe-area-inset-top));
    padding-top: max(4px, env(safe-area-inset-top));
    padding-bottom: 4px;
  }
  html.rl-mobile-mode .mobile-header > img { width: 24px; }
  html.rl-mobile-mode .mobile-content { padding-top: calc(57px + env(safe-area-inset-top)); }
  html.rl-mobile-mode .mobile-nav { min-height: calc(58px + env(safe-area-inset-bottom)); padding-top: 2px; }
  html.rl-mobile-mode .mobile-nav button { min-height: 48px; }
  html.rl-mobile-mode.rl-mobile-legacy body > main { padding-top: calc(57px + env(safe-area-inset-top)); }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-filter-dialog[open] { animation: none; }
  .mobile-loading i { animation-duration: 1.6s; }
}


/* Drei Filter nebeneinander, ohne Schieben: Name oben, Zahl darunter. Die
   Spalten richten sich nach dem Namen: "Regelbesuche" braucht in 14px mehr
   Platz als "Geplant", gleich breite Spalten schnitten es ab. */
.mobile-segments { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); overflow: hidden; -webkit-mask-image: none; mask-image: none; }
/* Wie im Entwurf: 3px Luft um den gewaehlten Filter. Die Spalten bleiben
   nach dem Namen bemessen (Filter und Suche stehen daneben). */
.mobile-segments { gap: 3px; padding: 3px; }
@supports (animation-timeline: scroll(x)) {
  .mobile-segments:not(:hover) { -webkit-mask-image: none; mask-image: none; }
}
.mobile-segments button { min-width: 0; padding: 4px 3px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1.15; }
.mobile-segments .mobile-segment-label { max-width: 100%; overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.mobile-segments span { margin-left: 0; }

/* Der Datenstand ist selbst 44px hoch; ein unsichtbarer Rand um eine 32px-
   Pille wurde im Test als zu klein gemessen und war es fuer den Daumen auch. */
.mobile-data-state { position: relative; padding: 0 12px; }

.mobile-route-time.is-open { background: var(--mist-2); color: var(--ink-50); }
/* Die Uhrzeit ist ein Span in der Zeile: ohne diese Regel erbte sie das Grau
   der Ortszeile statt des Geplant-Blaus. */
.mobile-route-customer .mobile-route-time:not(.is-open) { color: var(--blue); }

/* Aufklapp-Knopf in der Kundenakte: Pfeil statt wechselndem Wort. */
html.rl-mobile-mode .mobile-section-toggle { width: 44px; min-width: 44px; padding: 0; }
.mobile-section-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); transition: transform 160ms ease; }
.mobile-section-toggle[aria-expanded="true"] svg { transform: rotate(-90deg); }

/* Dialoge bleiben mit offener Tastatur bedienbar: Hoehe aus dem sichtbaren
   Bereich, Aktionen kleben unten im Dialog. */
html.rl-mobile-mode .action-dialog { max-height: calc(var(--rl-visual-height, 100dvh) - 24px); overflow-y: auto; overscroll-behavior: contain; }
/* Ein langer Dialog begann 12px unter der Oberkante, also unter Uhr und
   Akku; "Schließen" lag unter dem Akkusymbol. Zentriert wird jetzt im
   sicheren Bereich zwischen Statusleiste und Home-Balken. */
html.rl-mobile-mode .action-dialog[open] {
  inset: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  max-height: calc(var(--rl-visual-height, 100dvh) - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
html.rl-mobile-mode .action-dialog .dialog-actions { position: sticky; bottom: 0; z-index: 2; margin: 16px -20px -20px; padding: 10px 20px max(10px, env(safe-area-inset-bottom)); border-top: 1px solid var(--border-soft); background: var(--paper); }
/* Titel und "Schließen" scrollten mit, sobald der Inhalt laenger wurde
   (Entwurfskasten im Ergebnis). Der Kopf bleibt oben stehen, wie die
   Speichern-Leiste unten. */
html.rl-mobile-mode .action-dialog .dialog-head { position: sticky; top: 0; z-index: 3; margin: -20px -20px 18px; padding: 20px 20px 12px; border-bottom: 1px solid var(--border-soft); background: var(--paper); }
html.rl-mobile-mode.rl-keyboard-open .action-dialog { margin-top: calc(var(--rl-visual-top, 0px) + 12px); margin-bottom: auto; }
html.rl-mobile-mode .visit-when { grid-template-columns: 1fr 1fr; }
html.rl-mobile-mode .visit-when label:first-child { grid-column: 1 / -1; }

@media (prefers-reduced-motion: reduce) {
  .mobile-section-toggle svg { transition: none; }
}

/* Vollbild-Dialoge liegen bei viewport-fit=cover ab y=0, also unter Uhr und
   Akku. Titel und Schließen begannen deshalb in der Statusleiste. */
html.rl-mobile-mode .week-dialog,
html.rl-mobile-mode .briefing-dialog,
html.rl-mobile-mode .route-dialog {
  padding-top: max(16px, env(safe-area-inset-top));
  padding-right: max(16px, env(safe-area-inset-right));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  padding-left: max(16px, env(safe-area-inset-left));
}
html.rl-mobile-mode .week-body { max-height: calc(100dvh - 205px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
/* Kopf fest, Inhalt scrollt. Der Rand liegt im scrollenden Teil statt davor:
   Sonst schnitt dessen Kante den roten Schatten des Speichern-Buttons zu
   einem blassroten Rechteck ab. */
html.rl-mobile-mode .briefing-dialog[open]:has(> .briefing-body) {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  overflow: hidden;
}
html.rl-mobile-mode .briefing-dialog:has(> .briefing-body) > .dialog-head {
  flex: none;
  margin-bottom: 12px;
  padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
}
html.rl-mobile-mode .briefing-dialog > .briefing-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

/* iOS gibt Datums- und Zeitfeldern eine eigene Mindestbreite und zentriert
   den Wert. Das Datum ragte deshalb über den Dialogrand, die Uhrzeit schob
   sich über die Dauer. */
html.rl-mobile-mode input[type="date"],
html.rl-mobile-mode input[type="time"],
html.rl-mobile-mode input[type="datetime-local"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  text-align: left;
}
html.rl-mobile-mode input[type="date"]::-webkit-date-and-time-value,
html.rl-mobile-mode input[type="time"]::-webkit-date-and-time-value,
html.rl-mobile-mode input[type="datetime-local"]::-webkit-date-and-time-value {
  min-height: 1.5em;
  margin: 0;
  text-align: left;
}
html.rl-mobile-mode .acquisition-composer { grid-template-columns: minmax(0, 1fr); }
html.rl-mobile-mode .acquisition-composer label { min-width: 0; }
/* Die Aktionszeile der Übernahme-Akte: Links waren 42px hoch, unter dem
   Mindestmaß für einen Daumen. Wie die Aktionsleiste der vollen Akte. */
html.rl-mobile-mode .acquisition-actions .button { min-height: 48px; }

/* Die volle Kundenakte begann ebenfalls unter Uhr und Akku, und ihre
   angeheftete Reiterleiste blieb beim Scrollen dort kleben. Die Akte beginnt
   jetzt unterhalb der Statusleiste; darüber liegt der abgedunkelte Hintergrund. */
html.rl-mobile-mode .customer-dialog {
  margin-top: env(safe-area-inset-top);
  height: calc(100dvh - env(safe-area-inset-top));
  max-height: calc(100dvh - env(safe-area-inset-top));
}
/* Kopf und Reiterleiste klebten beide oben; die Reiter lagen über Name und
   Schließen, sichtbar blieb nur ein Streifen Erklärtext. Auf dem Telefon
   scrollt der Kopf weg, die Reiter bleiben; Abbrechen steht unten fest. */
html.rl-mobile-mode .customer-dialog__head { position: static; }

/* --- P2-A: Kohorten-Zeile nach dem Entwurf (Kohorten.dc.html) -------------
   Der Hoerer steht links vor dem Namen, umrandet wie jeder Knopf; Name und
   KE darunter. Beide Ziele bleiben mindestens 44px hoch, die Zahlen der
   Tabelle sind unberuehrt. */
html.rl-mobile-mode .station-name { justify-content: flex-start; gap: 8px; }
html.rl-mobile-mode .station-call {
  order: -1;
  width: 44px;
  height: 44px;
  margin: 0;
  border: 1px solid var(--border-control);
  border-radius: 12px;
  background: var(--paper);
}
html.rl-mobile-mode .station-name__text { position: relative; min-width: 0; }
html.rl-mobile-mode .station-name__text .station-customer {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  /* Zwei Zeilen statt "LX Import G…": Der Name ist das, was man sucht. */
  white-space: normal;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
html.rl-mobile-mode .station-table-wrap { overscroll-behavior: contain; }
/* Der ganze Block aus Name und KE ist die Tippflaeche (mindestens 44px). */
html.rl-mobile-mode .station-name__text .station-customer::after { content: ""; position: absolute; inset: -8px 0; min-height: 44px; }
/* Ohne Nummer bleibt der Platz des Hoerers frei, die Namen stehen in einer Flucht. */
html.rl-mobile-mode .station-name:not(:has(.station-call)) { padding-left: 52px; }

/* --- Die alten Dialoge sprechen die Sprache des Dokumentieren-Blatts ------
   Zurueckstellen, Churn-Risiko, Lost, die Rueckfrage "Termin absagen?",
   Woche/Tag planen und das Briefing kamen vom Desktop: Pillen-Knoepfe mit
   rotem Schein, ein Text-"Schließen", 18px-Felder, Chips mit 1,5:1-Rand.
   Neben dem Blatt (Claude Design: Knoepfe 12px rund, runder Schliessen-
   Knopf, 16px-Felder, 3:1-Raender) sahen sie aus wie ein anderes Produkt.
   Nur Geometrie und Farbe; Formulare und Handler bleiben, wie sie sind. */
html.rl-mobile-mode :is(.action-dialog, .rl-ask, .week-dialog, .briefing-dialog, .customer-dialog) .button {
  border-radius: 12px;
  box-shadow: none;
}
html.rl-mobile-mode :is(.action-dialog, .rl-ask, .week-dialog, .briefing-dialog) .button { min-height: 44px; }
html.rl-mobile-mode .button--primary { border-color: var(--ink); background: var(--ink); color: var(--paper); box-shadow: none; }
html.rl-mobile-mode .button--primary:hover { background: var(--ink); }
html.rl-mobile-mode .button--danger { border-color: var(--red-line); background: var(--paper); color: var(--red-deep); }
html.rl-mobile-mode .button--danger:hover { background: var(--paper); }
/* Lost ist zerstoerend: rot umrandet, nie gefuellt (PM-2, Entscheidung 1). */
html.rl-mobile-mode #lost-form .button--primary { border-color: var(--red-line); background: var(--paper); color: var(--red-deep); }

/* Schliessen wie im Blatt: 44px rund auf Nebel, ein X statt des Worts. Der
   Name ("Schließen", aria-label) bleibt fuer VoiceOver erhalten. */
html.rl-mobile-mode .dialog-close {
  flex: none;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: var(--mist);
  color: var(--ink);
  font-size: 0;
}
html.rl-mobile-mode .dialog-close::before {
  content: "";
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}
html.rl-mobile-mode .dialog-head { align-items: center; }
/* Der Kopf der Kundenakte ist fuenf Zeilen hoch: X oben, neben dem Namen. */
html.rl-mobile-mode .customer-dialog__head .dialog-close { align-self: flex-start; }

/* Felder wie im Blatt: 16px (iOS zoomt erst darunter), 12px rund, 48px hoch. */
html.rl-mobile-mode :is(.action-dialog, .week-dialog) :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: 48px;
  border-radius: 12px;
  font-size: 16px;
}
html.rl-mobile-mode .action-dialog textarea { min-height: 96px; }
html.rl-mobile-mode .snooze-until { border-radius: 12px; }

/* Schnellwahl "2 Wochen ... 3 Monate" wie die Pillen im Blatt. */
html.rl-mobile-mode .snooze-quick { gap: 8px; }
html.rl-mobile-mode .snooze-quick button {
  min-height: 44px;
  padding: 0 14px;
  border-color: var(--border-control);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}

/* Der Dialog liegt schon zwischen Statusleiste und Home-Balken (inset oben);
   die Fusszeile rechnete die 34px ein zweites Mal ein. */
html.rl-mobile-mode .action-dialog[open] .dialog-actions { padding-bottom: 16px; }

/* Links sind blau wie "Ganzer Verlauf" und "Anrufe zeigen"; Rot bleibt
   der Hauptaktion und dem Zerstoerenden vorbehalten. */
html.rl-mobile-mode :is(.action-dialog, .week-dialog, .briefing-dialog) .text-button:not(.text-button--danger) { color: var(--blue); }

/* Rueckfrage "Termin absagen?": 20px Rand und 18px Rundung wie im Entwurf;
   die uebrigen mittigen Dialoge runden genauso. */
html.rl-mobile-mode .rl-ask { width: min(440px, calc(100vw - 40px)); border-radius: 18px; }
html.rl-mobile-mode .action-dialog { border-radius: 18px; }
html.rl-mobile-mode .rl-ask p { font-size: 15px; }

/* Woche und Tag planen: ganze Hoehe, Inhalt scrollt dazwischen. Vorher
   endete der Dialog 38px ueber dem Rand, darunter schien die Tableiste
   abgedunkelt durch. Start, Ende und "Kunde hinzufuegen" waren 32px hoch. */
html.rl-mobile-mode .week-dialog[open] {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}
html.rl-mobile-mode .week-dialog > :is(.dialog-head, .dialog-actions) { flex: none; }
html.rl-mobile-mode .week-dialog > .week-body { flex: 1 1 auto; min-height: 0; max-height: none; }

/* Ein Fokusring fuer die ganze App: 3px Blau (5,8:1 auf Weiss), wie auf der
   Kundenseite. Vorher Rot mit 30 % Deckkraft (1,5:1) auf Heute und in den
   Dialogen und Blassblau im Blatt. Auf dem dunklen Kopf weiss. */
html.rl-mobile-mode :is(button, a, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}
html.rl-mobile-mode .mobile-header :is(button, a):focus-visible { outline-color: var(--paper); }

/* Ein Kartenrand (--border-card, wie Kundenseite und Entwurf) statt dreier:
   Route und Mehr hatten --border, Heute --border-soft. Risiko-Karten
   behalten ihren roten Rand. Bedienelemente einheitlich 12px rund (vorher
   10/11/14). */
html.rl-mobile-mode :is(.mobile-account-card:not(.is-urgent), .mobile-touched, .mobile-handover-card, .mobile-route-list li, .mobile-more-list) {
  border-color: var(--border-card);
}
html.rl-mobile-mode :is(
  .mobile-route-head > a, .mobile-route-actions a, .mobile-route-actions button, .mobile-more-footer button,
  .mobile-empty button, .mobile-field select, .mobile-filter-dialog fieldset label span, .mobile-primary-button,
  .mobile-search, .mobile-customer-region, .mobile-load-more
) {
  border-radius: 12px;
}

/* "läuft" unter dem laufenden Monat war 10px, unter der 12px-Untergrenze. */
html.rl-mobile-mode .station-table th.is-running small { font-size: 12px; }

/* Das Filter-Blatt schliesst wie das Dokumentieren-Blatt: rund auf Nebel,
   ohne Rand. Die Legende "Arbeitsstatus" stand 2px eingerueckt neben
   "Expansion Region". */
html.rl-mobile-mode .mobile-dialog-head .mobile-icon-button { border: 0; background: var(--mist); }
html.rl-mobile-mode .mobile-filter-dialog legend { padding: 0; }
/* Kopf mit 16px Rand wie Entwurf und Kundenseite (vorher 14, neben dem 4er-
   Raster); die Tableiste rundet wie jedes Bedienelement mit 12px. */
html.rl-mobile-mode .mobile-header {
  padding-right: max(16px, env(safe-area-inset-right));
  padding-left: max(16px, env(safe-area-inset-left));
}
html.rl-mobile-mode .mobile-nav button { border-radius: 12px; }

/* Der Datenstand des Desktops (unten in body) lag am Telefon unter der
   Tableiste: unsichtbar, aber jede kurze Seite liess sich 44px ins Leere
   schieben. Am Telefon steht der Stand oben rechts im Kopf. */
html.rl-mobile-mode .data-status { display: none; }

/* Auswertung (Kohorten, Pipeline) am Telefon: Umschalter wie die Segmente
   auf Heute (12px-Rahmen, 9px innen, 44px hoch, 3:1-Rand) statt 42px-Pillen,
   Datumsfelder wie jedes Feld (12px rund, 48px, normales Gewicht) statt
   fetter Pillen. */
html.rl-mobile-mode .chart-switch { gap: 3px; border-color: var(--border-control); border-radius: 12px; }
html.rl-mobile-mode .chart-switch button { min-height: 44px; border-radius: 9px; color: var(--ink-70); font-size: 13px; font-weight: 700; }
html.rl-mobile-mode .chart-switch button.is-active { color: var(--paper); }
html.rl-mobile-mode .workspace-filter :is(select, input) {
  min-height: 48px;
  border-color: var(--border-control);
  border-radius: 12px;
  font-weight: 500;
}

/* --- FIX-B (DS-7, T-8): Umsatz und Kohorten am Telefon --------------------
   Nach Kohorten.dc.html: Titel, eine Zeile für Prüfstelle und Zeitraum, der
   Kennzahl-Umschalter, dann gleich die Tabelle. Die Monatszeile bleibt beim
   Scrollen oben stehen (die Tabelle scrollt in sich), die Namensspalte ist
   140px breit (Hörer 44px, Name 13px, KE darunter), die neuesten fünf Monate
   stehen beim Öffnen im Bild, ältere liegen links. Jede Zelle ist selbst
   die Tippfläche (mindestens 44 x 44). Werte und Farben bleiben, wie sie sind;
   der Desktop ist unberührt. */
html.rl-mobile-mode.rl-mobile-legacy[data-rl-view="auswertung"] #page-title { display: none; }
html.rl-mobile-mode .station-section {
  margin-top: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
html.rl-mobile-mode .station-section > .section-heading { display: none; }
html.rl-mobile-mode .station-filter-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  margin: 0 0 10px;
  padding: 6px 14px;
  border: 1px solid var(--border-control);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
html.rl-mobile-mode .station-filter-toggle__text { display: flex; flex-direction: column; min-width: 0; }
html.rl-mobile-mode .station-filter-toggle small { color: var(--ink-50); font-size: 12px; font-weight: 700; }
html.rl-mobile-mode .station-filter-toggle strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
html.rl-mobile-mode .station-filter-toggle__action { flex: 0 0 auto; color: var(--blue); font-size: 14px; font-weight: 700; }
html.rl-mobile-mode .station-section:not(.is-filter-open) .station-controls > :not(.station-metric-filter) { display: none !important; }
html.rl-mobile-mode .station-controls { margin: 0 0 10px; }
html.rl-mobile-mode .station-metric-filter > span { display: none; }

html.rl-mobile-mode .station-table-wrap {
  max-height: calc(100dvh - 136px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow: auto;
  border-color: var(--border-card);
  background: var(--paper);
}
html.rl-mobile-mode .station-table { width: max-content; min-width: 100%; }
html.rl-mobile-mode .station-table thead th { z-index: 3; padding: 8px 6px; text-align: center; }
html.rl-mobile-mode .station-table thead th:first-child { z-index: 4; text-align: left; }
html.rl-mobile-mode .station-table.is-one-year .station-year { display: none; }
html.rl-mobile-mode .station-table thead th.is-running { color: var(--blue); }
/* 140 + 5 x 44 passt in 390 px (Entwurf 150 mit 40px-Hörer; der Hörer
   bleibt hier 44px, die Spalte gibt dafür 10px ab). */
html.rl-mobile-mode .station-table :is(thead th:first-child, tbody th, tfoot th) {
  box-sizing: border-box;
  width: 140px;
  min-width: 140px;
  max-width: 140px;
  padding: 6px 6px;
}
html.rl-mobile-mode .station-table .station-name { gap: 6px; }
html.rl-mobile-mode .station-table .station-name:not(:has(.station-call)) { padding-left: 50px; }
html.rl-mobile-mode .station-table td { min-width: 44px; padding: 0; text-align: center; }
html.rl-mobile-mode .station-table .station-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 0 8px;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}
html.rl-mobile-mode .station-table .station-cell::after { content: none; }
html.rl-mobile-mode .station-table td.station-total { padding: 0 10px; }
html.rl-mobile-mode .station-table tfoot td { padding: 13px 10px; }