:root {
  --bg: #f4f7f6;
  --panel: #ffffff;
  --panel-soft: #f8fbfa;
  --text: #13201d;
  --muted: #66736f;
  --border: #d9e3df;
  --teal: #0f6d63;
  --teal-dark: #0a5049;
  --amber: #b87512;
  --green: #16834a;
  --red: #b33b36;
  --shadow: 0 18px 45px rgba(23, 45, 40, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input,
select {
  font: inherit;
}

.app-shell {
  width: min(1480px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 24px 0;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.topbar h1 {
  margin: 0;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.03;
  letter-spacing: 0;
}

.topbar p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 15px;
  overflow-wrap: anywhere;
}

.topbar-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.address-search-control {
  display: grid;
  gap: 4px;
  min-width: 260px;
}

.address-search-control span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.address-search-control select {
  min-height: 44px;
}

/* v186: "In Google suchen" sitzt auf einer Stufe mit den Nachbar-Buttons
   (.primary-btn/.ghost-btn haben min-height 44px) und ruettelt am Zeilenrhythmus
   nicht (label selbst oben, Span bleibt kompakt). */
.address-search-control {
  align-self: start;
}
.address-search-control input,
.address-search-control select {
  height: 44px;
  min-height: 44px;
}

/* v186: Home-View fuehlt sich an wie eine eigene App-Seite — der uebergeordnete
   Body scrollt nicht mehr (max. 100dvh), zu langes Inhaltscrollen uebernimmt
   .home-active-tours-list intern. Mobile (<=839px) ohne Header-Versatz,
   Desktop mit 58px fuer die uebrigens sichtbare Kopfzeile (Briefpunkt 4:
   beide Breitenklaessen). */
body.mobile-view-home #mainContent.workspace {
  max-height: 100dvh;
  overflow: hidden;
}
@media (min-width: 840px) {
  body.mobile-view-home #mainContent.workspace {
    max-height: calc(100dvh - 58px);
  }
}
body.mobile-view-home #homePanel {
  height: 100%;
  overflow-y: auto;
  min-height: 0;
  padding-bottom: 28px;
}
body.mobile-view-home .home-active-tours-list {
  overflow-y: auto;
  min-height: 0;
}

/* v193: Mobile Home (<=839px) — definite Height-Kette nachreichen, damit das
   v186-Panel-Design (height:100% + internes Scrolling in #homePanel) wirkt:
   v186 gab dem Workspace nur max-height:100dvh (max-height ist kein definitiver
   Wert), dadurch loeste sich height:100% des Panels nicht auf, es wuchs auf die
   volle Inhaltshoehe und wurde vom Workspace geklippt — untere Tour-Karten
   waren per Scroll nie erreichbar. Hier wird die Kette definitiv: body 100dvh
   -> app-shell (Flex-Spalte) fuehlt sich an -> Workspace erhaelt den Rest nach
   dem Header. #homePanel bleibt unveraendert und scrollt intern; das Dokument
   selbst ueberlaeuft nicht (kein zweiter Scrollbalken), Header oben + Fix-Tab-
   Bar unten bleiben unverrueckt. Desktop >=840px (media max-width:839px) NICHT betreffen. */
@media (max-width: 839px) {
  body.mobile-view-home {
    height: 100dvh;
  }
  body.mobile-view-home .app-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  body.mobile-view-home #mainContent.workspace {
    flex: 1 1 0;
    min-height: 0;
  }
  /* CDP-Befund: Wirklicher Clip war das Panel-Kind .rd-dashboard-grid (overflow:hidden,
     redesign.css Basis). Flex-Items schrumpfen per Default (flex-shrink:1), dadurch
     klemmte das Grid auf den Restplatz und versteckte die Karten selbst; #homePanel
     hatte deshalb nie scrollH > clientH und konnte nie scrollen.
     Fix (eine Regel): Panel-Kinder behaelten ihre natuerliche Hoehe — dafuer genuegt
     flex-shrink:0 (flex-basis:auto ist Default, Grow war 0). #homePanel wird einziger
     Scroll-Container (v186-Intention); .home-active-tours-list wachst mit und zeigt
     keinen eigenen (doppelten) Scrollbalken, das Dokument ebenfalls nicht. */
  body.mobile-view-home #homePanel > * {
    flex-shrink: 0;
  }
}

/* v186: Lieferhinweis-Flaeche ohne Fokus-Effect — stattdessen eine leichte,
   permanente Schatten-Optik (Briefpunkt 6). */
textarea.delivery-note-input,
textarea.delivery-note-input:focus,
textarea.delivery-note-input:focus-visible,
label:has(> .delivery-note-input:focus) {
  outline: none;
  box-shadow: 0 2px 6px rgba(15, 40, 35, .15);
}
.delivery-note-editor textarea:focus {
  border-color: var(--border);
  box-shadow: 0 2px 6px rgba(15, 40, 35, .15);
}

/* v186: Zusatzbetrag-Feld liegt jetzt in .stop-actions (neben priority-select)
   statt in der delivery-note-editor — kompaktere Breite, aber gleiche Hoehe.
   Hoehe wird im Dateiband v176+ gepinnt (da, wo es gegen redesign.css Z122
   gewinnt: min-height 46px, global). */
.stop-actions .amount-input {
  width: 7em;
  flex-shrink: 1;
  border-radius: 7px;
}

.tour-courier-control {
  display: grid;
  gap: 4px;
  min-width: 190px;
}

.tour-courier-control span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.tour-courier-control select {
  min-height: 44px;
}

.export-tools {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  min-width: 240px;
}

.export-tools > button {
  width: 100%;
}

.street-learning-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 12;
  display: grid;
  grid-template-columns: minmax(260px, 1.1fr) minmax(240px, 0.9fr) auto;
  gap: 10px;
  align-items: end;
  width: min(820px, calc(100vw - 32px));
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
  animation: street-panel-slide 140ms ease-out;
}

.street-learning-panel[hidden] {
  display: none;
}

.street-learning-panel label {
  min-width: 0;
}

.street-learning-panel select,
.street-learning-panel input {
  width: 100%;
}

.correction-address-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.street-learning-panel button {
  white-space: nowrap;
}

.correction-maps-btn {
  min-height: 42px;
  padding-inline: 14px;
}

.correction-option-unclear {
  background: #f8e7e5;
  color: var(--red);
  font-weight: 900;
}

.ok-chip {
  background: #e4f5e9;
  color: var(--green);
}

.correction-card.is-clear .panel-header {
  margin-bottom: 0;
}

.correction-card.is-clear {
  align-self: start;
}

.import-side {
  grid-template-rows: auto auto 1fr auto;
}

.import-check-card {
  height: 100%;
}

#streetCorrectionSelect.has-unclear-selection {
  border-color: var(--red);
  color: var(--red);
  box-shadow: 0 0 0 3px rgba(180, 48, 36, 0.14);
}

@keyframes street-panel-slide {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mobile-tabs {
  display: none;
}

.workspace {
  display: grid;
  grid-template-columns: 350px minmax(420px, 1fr) 390px;
  gap: 16px;
  align-items: start;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 18px;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.panel-header > * {
  min-width: 0;
}

.panel-header h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
}

.running-header-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.65rem;
}

.reopen-tour-modal-content {
  max-width: 34rem;
}

.reopen-tour-modal-content #reopenTourConfirmBtn {
  background: var(--brand);
  color: #fff;
}

.stops-panel .panel-header {
  align-items: stretch;
  flex-direction: column;
}

.stops-panel .stops-tools {
  display: flex;
  align-items: end;
  justify-content: flex-start;
  gap: 10px;
}

.muted,
.save-state {
  color: var(--muted);
  font-size: 13px;
}

.file-drop {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 12px 0;
  border: 1px solid var(--teal);
  border-radius: 7px;
  background: var(--teal);
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  font-weight: 800;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}

.step-action {
  position: relative;
  justify-content: center;
  padding-left: 56px;
  padding-right: 56px;
}

.step-action::before {
  content: attr(data-step);
  display: inline-grid;
  place-items: center;
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.file-drop:hover {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
}

.file-drop.is-processing {
  cursor: wait;
  opacity: 0.82;
}

.file-drop.is-processing::after {
  content: "";
  position: absolute;
  right: 18px;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.42);
  border-top-color: #fff;
  border-radius: 999px;
  animation: spin 800ms linear infinite;
}

.file-drop span {
  color: inherit;
  font-weight: inherit;
}

.file-drop input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.last-import.is-processing span {
  background: var(--amber);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.planner-action-stack {
  display: grid;
  gap: 8px;
  margin: -2px 0 14px;
}

.planner-action-stack .primary-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-color: transparent;
  color: #fff;
}

.planner-action-stack .action-optimize {
  background: #238a67;
}

.planner-action-stack .action-optimize:hover {
  background: #1b7558;
}

.planner-action-stack .action-print {
  background: #13785f;
}

.planner-action-stack .action-print:hover {
  background: #0f654f;
}

.planner-action-stack .action-release {
  background: #075f50;
}

.planner-action-stack .action-release:hover {
  background: #044d42;
}

.planner-action-stack .primary-btn:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.field-stack {
  display: grid;
  gap: 12px;
}

.field-group {
  display: grid;
  gap: 6px;
}

.start-point-tools,
.inline-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.start-point-tools {
  grid-template-columns: 1fr;
}

.start-point-combo {
  position: relative;
  display: block;
  width: 100%;
}

.start-point-menu-btn {
  width: 100%;
  min-height: 44px;
  padding: 0 46px 0 11px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.start-point-menu-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-65%) rotate(45deg);
}

.start-point-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(42, 22, 34, 0.14);
}

.start-point-menu[hidden] {
  display: none !important;
}

.start-point-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 42px;
  padding: 8px 2px 8px 14px;
  color: var(--text);
  cursor: pointer;
}

.start-point-option:hover,
.start-point-option[aria-selected="true"] {
  background: var(--panel-soft);
}

.start-point-option span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.start-point-delete {
  display: grid;
  place-items: center;
  min-width: 82px;
  height: 32px;
  margin-right: 8px;
  border: 1px solid rgba(181, 36, 48, 0.3);
  border-radius: 6px;
  background: #fff;
  color: var(--red);
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.start-point-delete:hover {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}

.start-point-select-wrap select {
  width: 100%;
  padding-right: 50px;
}

.start-point-remove-btn {
  position: absolute;
  top: 50%;
  right: 2px;
  display: grid;
  place-items: center;
  width: 42px;
  height: calc(100% - 4px);
  border: 0;
  border-left: 1px solid rgba(181, 36, 48, 0.22);
  border-radius: 0 8px 8px 0;
  background: transparent;
  color: var(--red);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  transform: translateY(-50%);
  cursor: pointer;
}

.start-point-remove-btn:disabled {
  color: rgba(181, 36, 48, 0.35);
  cursor: not-allowed;
}

.inline-field input {
  width: 100%;
}

.icon-btn {
  width: 42px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
}

.optimization-status-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-soft);
}

.optimization-status-card h3 {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.25;
}

.optimization-status {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  font-size: 13px;
}

.optimization-status .status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(179, 59, 54, 0.12);
}

.optimization-status.available {
  color: var(--green);
}

.optimization-status.available .status-dot {
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(22, 131, 74, 0.12);
}

.optimization-status.unavailable {
  color: var(--red);
}

.optimization-status-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

label {
  display: grid;
  gap: 6px;
  color: #40504b;
  font-size: 13px;
  font-weight: 700;
}

input,
select,
textarea,
.start-point-menu-btn {
  min-width: 0;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
  color: var(--text);
  padding: 0 11px;
  outline: none;
}

input:focus,
select:focus,
textarea:focus,
.start-point-menu-btn:focus-visible {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(15, 109, 99, 0.14);
}

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0 14px;
}

.primary-btn,
.ghost-btn {
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 0 14px;
  font-weight: 800;
  cursor: pointer;
  /* Product decision: buttons keep a stable appearance on hover by default. */
}

.primary-btn {
  background: var(--teal);
  color: #fff;
}

.ghost-btn {
  background: #fff;
  border-color: var(--border);
  color: var(--text);
}

.ghost-btn.danger {
  color: var(--red);
}

#optimizeBtn,
#printRouteBtn {
  box-shadow: 0 10px 20px -10px rgba(94, 12, 56, 0.45);
}

.wide {
  width: 100%;
}

.tour-start-btn {
  margin-top: 10px;
}

.notice {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.notice.compact {
  margin-top: 8px;
}

.route-feedback {
  margin: 8px 0 10px;
}

.notification-chip {
  display: inline-flex;
  margin: 4px 4px 0 0;
  padding: 3px 7px;
  border-radius: 99px;
  background: #f1eae6;
  color: var(--ink-soft);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.notification-chip.sent { background: var(--green-tint); color: var(--green); }
.notification-chip.failed { background: #fbe9e7; color: var(--danger); }

.route-metrics {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.route-metrics .after-card {
  background: var(--green-tint);
  color: var(--green);
}

.route-metrics .after-card strong,
.route-metrics .after-card span {
  color: inherit;
}

.route-metrics div {
  display: grid;
  gap: 3px;
  min-height: 82px;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-soft);
}

.route-metrics strong {
  color: #40504b;
  font-size: 12px;
}

.route-metrics span {
  color: var(--text);
  font-size: 20px;
  font-weight: 900;
}

.route-metrics small {
  color: var(--muted);
  font-size: 13px;
}

.stops-panel {
  min-height: 680px;
}

.stops-list {
  display: grid;
  gap: 8px;
  max-height: calc(100vh - 180px);
  overflow: auto;
  padding-right: 4px;
}

.stops-list.empty {
  min-height: 280px;
  place-items: center;
}

.empty-state {
  display: grid;
  gap: 6px;
  color: var(--muted);
  text-align: center;
  padding: 22px;
}

.empty-state strong {
  color: var(--text);
}

.stop-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}

/* Steuerleiste eines Stops: die drei Controls (Prioritaet, Lieferhinweis,
   Loeschen) teilen sich eine flex-Zeile. Breiten- und Wrap-Policy zentral am
   Dateiende ("v172 responsive stop actions") — dort gewinnt sie die Kaskade. */
.stop-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.stop-index {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #e7f1ef;
  color: var(--teal-dark);
  font-weight: 900;
  font-size: 13px;
}

.stop-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.stop-main strong,
.stop-address,
.stop-meta {
  overflow-wrap: anywhere;
}

.stop-main strong {
  font-size: 14px;
}

.contact-editor-open {
  justify-self: start;
  margin-top: 3px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--brand);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.contact-editor-open:hover {
  color: var(--brand-deep);
}

.contact-editor-open:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 3px;
}

.stop-address {
  color: #40504b;
  font-size: 13px;
}

.stop-meta {
  color: var(--muted);
  font-size: 12px;
}

.stop-note-meta {
  color: #6d2d06;
  font-weight: 900;
}

.amount-editor-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.amount-input {
  width: 7em;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.amount-label-input {
  min-width: 0;
}

.stop-amount-meta {
  color: var(--green);
  font-weight: 900;
}

.extra-amount-view {
  margin: 6px 0 0;
  font-weight: 600;
  color: var(--green);
}

.delivery-note-toggle {
  min-height: 42px;
}

.stop-remove-btn {
  display: grid;
  place-items: center;
  width: 36px;
  min-height: 36px;
  margin-left: 25px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fce7e4;
  color: var(--danger);
  cursor: pointer;
}

.stop-remove-btn:hover {
  background: var(--danger);
  color: #fff;
}

.stop-remove-btn:focus-visible {
  outline: 2px solid var(--danger);
  outline-offset: 3px;
}

.delivery-note-toggle.has-note {
  border-color: rgba(184, 117, 18, 0.78);
  background: #ffe2a8;
  color: #5b2600;
  font-weight: 900;
  box-shadow: 0 0 0 3px rgba(184, 117, 18, 0.12);
}

.delivery-note-toggle.active {
  border-color: var(--teal);
}

.delivery-note-editor {
  grid-column: 2 / -1;
  display: grid;
  overflow: hidden;
  animation: delivery-note-slide 160ms ease-out;
}

.delivery-note-editor[hidden] {
  display: none;
}

.delivery-note-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 7px 0 8px;
}

.delivery-note-quick {
  border: 1px solid rgba(15, 109, 99, 0.22);
  border-radius: 999px;
  background: #eef8f3;
  color: var(--green);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  min-height: 32px;
  padding: 6px 12px;
}

.delivery-note-quick:hover,
.delivery-note-quick:focus-visible {
  background: #dff4e7;
  border-color: rgba(15, 109, 99, 0.45);
  outline: none;
}

.delivery-note-editor textarea {
  width: 100%;
  min-height: 76px;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 10px 11px;
  color: var(--text);
  font: inherit;
}

.delivery-note-editor textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(15, 109, 99, 0.14);
  outline: none;
}

@keyframes delivery-note-slide {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.priority-high {
  border-left: 4px solid var(--amber);
}

.status-delivered .stop-index {
  background: #dff4e7;
  color: var(--green);
}

.status-missed .stop-index,
.status-declined .stop-index {
  background: #f8e7e5;
  color: var(--red);
}

.status-unclear_address {
  border-color: #e0a52b;
  background: #fff9eb;
}

.status-unclear_address .stop-index {
  background: #ffe6a7;
  color: #7a4b00;
}

.status-unclear_address .stop-meta {
  color: #7a4b00;
  font-weight: 800;
}

.current-stop {
  min-height: 380px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(180deg, #f9fcfb, #fff);
  padding: 18px;
}

.delivery-card {
  display: grid;
  gap: 14px;
}

.delivery-receipt-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2px;
}

.delivery-receipt-btn {
  min-height: 42px;
  border-color: var(--line);
  color: var(--brand);
  font-weight: 800;
}

.delivery-receipt-status {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.receipt-capture-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
}

.receipt-capture-modal[hidden] { display: none; }

.courier-legal-notice-dialog {
  width: min(520px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 22px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 24px 70px rgba(58, 34, 49, 0.32);
}

.courier-legal-notice-dialog::backdrop {
  background: rgba(58, 34, 49, 0.56);
  backdrop-filter: blur(4px);
}

.courier-legal-notice-content { display: grid; gap: 14px; padding: 28px; }
.courier-legal-notice-content h2 { margin: 0; color: var(--ink); font-size: 25px; line-height: 1.2; }
.courier-legal-notice-content p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.courier-legal-notice-status { min-height: 20px; font-size: 13px !important; }
.courier-legal-notice-content .primary-btn { width: 100%; }

.receipt-capture-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: rgba(58, 34, 49, 0.5);
  backdrop-filter: blur(3px);
}

.receipt-capture-panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  width: min(620px, calc(100vw - 40px));
  max-height: calc(100dvh - 40px);
  overflow: auto;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(58, 34, 49, 0.32);
}

.receipt-capture-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.receipt-capture-header h2 {
  margin: 4px 0 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 25px;
}

.receipt-capture-guidance,
.receipt-capture-existing,
.receipt-capture-notice { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.receipt-capture-existing { color: var(--brand); font-weight: 800; }
.receipt-signature-label { color: var(--ink); font-size: 13px; font-weight: 800; }

#receiptSignatureCanvas {
  display: block;
  width: 100%;
  height: 180px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  touch-action: none;
  cursor: crosshair;
}

.receipt-capture-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.receipt-photo-pick { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.receipt-photo-preview { display: block; width: auto; max-width: 100%; max-height: 190px; border-radius: 12px; object-fit: contain; background: #f8f5f6; }
.receipt-photo-preview[hidden] { display: none; }
.receipt-capture-notice { min-height: 20px; color: var(--danger); }
.receipt-capture-save { min-height: 48px; }
body.receipt-dialog-open { overflow: hidden; }

.delivery-position {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--teal-dark);
  font-size: 13px;
  font-weight: 900;
}

.priority-badge {
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  line-height: 1;
  text-transform: uppercase;
}

.priority-badge.high {
  background: #ffe2a8;
  color: #7c3500;
}

.delivery-card h3 {
  margin: 0;
  font-size: 25px;
  line-height: 1.08;
}

.delivery-card address {
  color: #40504b;
  font-size: 16px;
  font-style: normal;
  line-height: 1.45;
}

.delivery-note-view {
  margin: -2px 0 4px;
  padding: 10px 12px;
  border: 1px solid rgba(184, 117, 18, 0.28);
  border-radius: 7px;
  background: #fff8e8;
  color: #5f3d08;
  font-size: 14px;
  line-height: 1.4;
}

.delivery-actions {
  display: grid;
  gap: 9px;
}

.map-actions {
  display: grid;
  gap: 8px;
}

.status-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.status-actions .status-btn.delivered-status-btn {
  grid-column: 1 / -1;
  min-height: 62px;
  background: var(--green);
  color: #fff;
}

.status-actions .status-btn.delivered-status-btn:hover,
.status-actions .status-btn.delivered-status-btn:focus-visible {
  background: #155f34;
  color: #fff;
}

.status-actions .status-btn {
  min-height: 58px;
  white-space: normal;
}

.courier-status-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: 8px;
}

.courier-status-grid .status-choice {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 800;
}

.courier-status-grid select {
  min-height: 58px;
  width: 100%;
  padding: 10px 34px 10px 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background-color: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
}

.courier-status-grid .status-btn {
  min-height: 58px;
}

.courier-status-grid .delivered-status-btn {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}

.courier-status-grid .delivered-status-btn:hover,
.courier-status-grid .delivered-status-btn:focus-visible {
  border-color: #155f34;
  background: #155f34;
  color: #fff;
}

.missed-status-btn {
  border-color: #d8c4b8;
  background: #fffaf7;
}

.status-other-field {
  display: grid;
  gap: 6px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.status-other-field[hidden] {
  display: none;
}

.status-other-input {
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  font: inherit;
}

.status-other-input:focus,
.courier-status-grid select:focus {
  outline: 2px solid color-mix(in srgb, var(--brand) 30%, transparent);
  outline-offset: 1px;
  border-color: var(--brand);
}

.courier-status-grid select.input-error,
.status-other-input.input-error {
  border-color: #bd423d;
  background-color: #fff7f5;
  box-shadow: 0 0 0 2px rgba(189, 66, 61, 0.14);
}

.courier-status-grid select.input-error:focus,
.status-other-input.input-error:focus {
  outline-color: rgba(189, 66, 61, 0.38);
  border-color: #a9322e;
}

.current-nav-link {
  display: grid;
  place-items: center;
  min-height: 54px;
  text-align: center;
  text-decoration: none;
}

.status-comment-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(184, 117, 18, 0.24);
  border-radius: 14px;
  background: #fff8ed;
}

.status-comment-panel[hidden] {
  display: none;
}

.status-comment-panel label {
  display: grid;
  gap: 6px;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

.status-comment-panel small {
  color: var(--muted);
  font-weight: 700;
}

.status-comment-input {
  width: 100%;
  min-height: 66px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  font: inherit;
}

.status-comment-input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(15, 109, 99, 0.14);
  outline: none;
}

.status-comment-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.status-comment-quick {
  border: 1px solid rgba(15, 109, 99, 0.26);
  border-radius: 999px;
  background: #eef8f3;
  color: #07584f;
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.status-comment-count {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.status-btn[data-status="delivered"] {
  border-color: rgba(22, 131, 74, 0.25);
  color: var(--green);
}

.status-btn[data-status="missed"],
.status-btn[data-status="declined"],
.status-btn[data-status="open"] {
  border-color: rgba(179, 59, 54, 0.22);
  color: var(--red);
}

.summary-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 14px;
}

.summary-strip div {
  display: grid;
  gap: 3px;
  place-items: center;
  min-height: 76px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-soft);
}

.summary-strip span {
  font-size: 26px;
  font-weight: 900;
}

.summary-strip small {
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.history-panel {
  grid-column: 1 / -1;
}

.history-summary {
  margin: 0 0 14px;
}

.history-search {
  display: grid;
  gap: 6px;
  margin: 0 0 14px;
}

.history-search span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.history-search input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  font: inherit;
  background: #fff;
}

.history-search input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(15, 109, 99, 0.14);
  outline: none;
}

body.role-courier .address-search-control,
body.role-courier .tour-courier-control,
body.role-courier .export-tools,
body.role-courier .planner-panel,
body.role-courier .stops-panel {
  display: none;
}

body.role-dispatch #startTourBtn,
body.role-dispatch .courier-panel {
  display: none;
}

body.role-courier .courier-panel {
  grid-column: 1 / 2;
}

body.role-courier .history-panel {
  grid-column: 2 / -1;
}

.history-list {
  display: grid;
  gap: 10px;
}

.history-list.empty {
  min-height: 160px;
  place-items: center;
}

.history-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.history-item summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px 14px;
  cursor: pointer;
  font-weight: 800;
}

.history-result {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-align: right;
}

.history-summary-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
  gap: 28px;
}

button.ghost-btn.history-delete-btn {
  min-height: auto;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--brand);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.history-detail {
  display: grid;
  gap: 12px;
  padding: 0 14px 14px;
}

.history-open-tour-btn {
  justify-self: start;
  width: fit-content;
  max-width: 100%;
}

.history-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.history-stops {
  display: grid;
  gap: 7px;
}

.history-stop {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(200px, 1.5fr) minmax(130px, auto);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--border);
  border-left: 4px solid #9bb1aa;
  border-radius: 7px;
  background: var(--panel-soft);
}

.history-stop strong,
.history-stop span,
.history-stop em {
  overflow-wrap: anywhere;
}

.history-receipt-chip {
  justify-self: start;
  width: fit-content;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid var(--brand, #a20f61);
  border-radius: 999px;
  color: var(--brand, #a20f61);
  background: #fff;
  font: inherit;
  font-size: .86rem;
  font-weight: 700;
  cursor: pointer;
}
.history-receipt-chip:hover,
.history-receipt-chip:focus-visible { background: #fff1f7; outline: 2px solid color-mix(in srgb, var(--brand, #a20f61) 28%, transparent); }
.receipt-viewer-modal { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 22px; }
.receipt-viewer-modal[hidden] { display: none; }
.receipt-viewer-backdrop { position: absolute; inset: 0; border: 0; background: rgb(28 18 25 / 58%); }
.receipt-viewer-panel { position: relative; z-index: 1; width: min(700px, 100%); max-height: min(90vh, 900px); overflow-y: auto; padding: clamp(20px, 4vw, 34px); border-radius: 24px; background: #fff; box-shadow: 0 24px 80px rgb(32 12 25 / 25%); }
.receipt-viewer-panel h2 { margin: 5px 0 0; }
.receipt-viewer-notice { min-height: 1.4em; color: var(--muted, #817780); }
.receipt-viewer-media { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; }
.receipt-viewer-media figure { min-width: 0; margin: 0; padding: 12px; border: 1px solid #eadfe6; border-radius: 16px; background: #fff; }
.receipt-viewer-media img { display: block; width: 100%; max-height: 62vh; object-fit: contain; }
.receipt-viewer-media figcaption { padding-top: 9px; color: var(--muted, #817780); font-weight: 700; }
.courier-sync-pending { margin: 8px 0; padding: 9px 12px; border: 1px solid #edc48e; border-radius: 12px; color: #75410b; background: #fff7e9; font-size: .88rem; font-weight: 700; }

.history-stop span {
  color: #40504b;
  font-size: 13px;
}

.history-stop em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  text-align: right;
}

button.ghost-btn.history-stop-status-btn {
  justify-self: end;
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--berry);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

button.ghost-btn.history-stop-status-btn:hover,
button.ghost-btn.history-stop-status-btn:focus-visible {
  text-decoration: underline;
}

.history-stop.status-delivered {
  border-left-color: var(--green);
}

.history-stop.status-missed,
.history-stop.status-declined {
  border-left-color: var(--red);
}

@media (max-width: 1180px) {
  .admin-page-grid {
    grid-template-columns: 1fr 1fr;
  }

  .admin-settings-card {
    grid-column: 1 / -1;
  }

  .street-learning-panel {
    grid-template-columns: minmax(260px, 1fr) minmax(220px, 0.9fr) auto;
  }

  .workspace {
    grid-template-columns: 320px 1fr;
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    margin-inline: 12px;
    min-width: 0;
    box-sizing: border-box;
  }

  .workspace > .view-panel,
  .import-grid,
  .import-card,
  .import-side {
    min-width: 0;
    max-width: 100%;
  }

  .import-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
  }

  .courier-panel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .app-shell {
    width: 100%;
    /* v194: keine fixed-Tabbar mehr <=760px — bottom-Marge = einheitlich
       16px + Safe-Area (war 76px Tabbar-Reserve). */
    padding: 12px 10px calc(16px + env(safe-area-inset-bottom, 0px));
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
    max-width: calc(100vw - 20px);
  }

  .topbar p,
  .notice {
    max-width: 320px;
  }

  .topbar-actions,
  .topbar-actions button,
  .topbar-actions .address-search-control,
  .topbar-actions .export-tools {
    width: 100%;
  }

  .topbar-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .topbar-actions .save-state {
    grid-column: 1 / -1;
  }

  .export-tools {
    grid-column: 1 / -1;
  }

  .address-search-control {
    grid-column: 1 / -1;
  }

  .street-learning-panel {
    position: static;
    grid-template-columns: 1fr;
    width: 100%;
    max-width: none;
    margin-top: 0;
  }

  .street-learning-panel button {
    width: 100%;
  }

  .workspace {
    grid-template-columns: 1fr;
    max-width: calc(100vw - 20px);
  }

  .admin-panel {
    max-width: calc(100vw - 20px);
  }

  .admin-page-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-page-grid {
    grid-template-columns: 1fr;
  }

  .admin-settings-card {
    grid-column: auto;
  }

  .mobile-tabs {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--border);
    background: #fff;
    box-shadow: 0 -10px 24px rgba(23, 45, 40, 0.08);
  }

  body.role-courier .mobile-tabs {
    grid-template-columns: repeat(2, 1fr);
  }

  body.role-courier .mobile-tabs button[data-view="plan"],
  body.role-courier .mobile-tabs button[data-view="route"],
  body.role-courier .mobile-tabs button[data-view="running"] {
    display: none;
  }

  body.role-courier .mobile-tabs button[data-view="running"],
  body.role-courier .tour-station[data-view="running"] {
    display: none !important;
  }

  body.role-dispatch .mobile-tabs {
    grid-template-columns: repeat(3, 1fr);
  }

  body.role-dispatch .mobile-tabs button[data-view="delivery"] {
    display: none;
  }

  .mobile-tabs button {
    min-height: 58px;
    border: 0;
    border-top: 3px solid transparent;
    background: #fff;
    color: var(--muted);
    font-weight: 800;
  }

  .mobile-tabs button.active {
    border-top-color: var(--teal);
    color: var(--teal-dark);
  }

body.mobile-view-plan .stops-panel,
body.mobile-view-plan .courier-panel,
body.mobile-view-plan .history-panel,
body.mobile-view-plan .release-cta,
body.mobile-view-route .planner-panel,
  body.mobile-view-route .courier-panel,
  body.mobile-view-route .history-panel,
  body.mobile-view-delivery .planner-panel,
  body.mobile-view-delivery .stops-panel,
  body.mobile-view-delivery .history-panel,
  body.mobile-view-history .planner-panel,
  body.mobile-view-history .stops-panel,
  body.mobile-view-history .courier-panel {
    display: none;
  }

  body.role-courier.mobile-view-delivery .history-panel,
  body.role-courier.mobile-view-history .courier-panel {
    display: none;
  }

  body.role-courier.mobile-view-delivery .courier-panel,
  body.role-courier.mobile-view-history .history-panel {
    display: block;
  }

  body.role-dispatch.mobile-view-delivery .planner-panel {
    display: block;
  }

  .panel {
    margin: 3% 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    max-width: calc(100vw - 20px);
  }

  .panel-header {
    flex-wrap: wrap;
  }

  .save-state {
    display: none;
  }

  .file-drop input {
    font-size: 12px;
  }

  .settings-grid,
  .start-point-tools,
  .inline-field,
  .route-metrics {
    grid-template-columns: 1fr;
  }

  .summary-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .status-actions {
    grid-template-columns: 1fr 1fr;
  }

  .history-item summary,
  .history-meta,
  .history-stop {
    grid-template-columns: 1fr;
  }
  .receipt-viewer-modal { padding: 10px; align-items: end; }
  .receipt-viewer-panel { max-height: 88dvh; border-radius: 22px 22px 12px 12px; }

  .history-result,
  .history-stop em {
    text-align: left;
  }

  .stop-row {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  /* Mobile: Steuerleiste wandert unter den Stopp-Text. */
  .stop-actions,
  .delivery-note-editor {
    grid-column: 2;
  }

  .stop-actions {
    margin-top: 5px;
  }

  .stops-panel {
    min-height: auto;
  }

  .stops-list {
    max-height: none;
  }
}
/* Ohne gueltige Sitzung leitet app.js sofort auf die Landingpage um. Bis der
   Wechsel greift, bleibt die Oberflaeche verborgen — sonst blitzt sie auf. */
body.auth-pending .app-shell,
body.auth-required .app-shell,
body.auth-pending .support-widget,
body.auth-required .support-widget {
  display: none;
}

.support-widget {
  bottom: 18px;
  left: 18px;
  position: fixed;
  z-index: 70;
}

.support-help-btn {
  align-items: center;
  background: #e8751a;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(85, 34, 6, 0.22);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: 900;
  gap: 8px;
  height: 46px;
  min-height: 46px;
  padding: 0 17px 0 12px;
  width: auto;
  justify-content: center;
}

.support-help-btn > span:first-child {
  align-items: center;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  display: inline-flex;
  height: 26px;
  justify-content: center;
  width: 26px;
}

.support-panel {
  background: #fffaf5;
  border: 1px solid rgba(232, 117, 26, 0.28);
  border-radius: 8px;
  box-shadow: 0 18px 45px rgba(66, 39, 20, 0.22);
  margin-bottom: 10px;
  max-width: calc(100vw - 36px);
  padding: 16px;
  width: 360px;
}

.support-panel[hidden] {
  display: none;
}

.support-panel-header {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 12px;
}

.support-panel-header h2 {
  font-size: 18px;
  margin: 0;
}

.support-choice {
  border: 0;
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
}

.support-choice[hidden] {
  display: none;
}

.support-choice legend,
.support-message-label {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.support-choice label {
  align-items: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 7px;
  cursor: pointer;
  display: flex;
  gap: 8px;
  min-height: 36px;
  padding: 8px 10px;
}

.support-choice input[type="radio"] {
  box-shadow: none;
  min-height: auto;
  outline: none;
}

.support-choice input[type="radio"]:focus,
.support-choice input[type="radio"]:focus-visible {
  box-shadow: none;
  outline: none;
}

.support-other-input,
.support-message-label textarea {
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  font: inherit;
  padding: 10px 11px;
  width: 100%;
}

.support-other-input {
  display: none;
}

.support-choice.has-other .support-other-input {
  display: block;
}

.support-message-label {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
}

.support-message-label textarea {
  min-height: 108px;
  resize: vertical;
}

.support-submit-btn {
  width: 100%;
}

.support-notice {
  color: var(--muted);
  font-size: 12px;
  margin: 10px 0 0;
  min-height: 18px;
}









.print-route-sheet {
  display: none;
}

@media print {
  body {
    background: #fff;
  }

  .app-shell,
  .support-widget {
    display: none !important;
  }

  .print-route-sheet {
    display: block;
    padding: 0;
    color: #111;
    font: 8.5pt/1.2 Arial, sans-serif;
  }

  .print-route-sheet header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
    border-bottom: 1px solid #111;
    margin-bottom: 5px;
    padding-bottom: 3px;
  }

  .print-route-sheet h1 {
    font-size: 13pt;
  }

  .print-route-sheet h1,
  .print-route-sheet p {
    margin: 0;
  }

  .print-route-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-bottom: 5px;
  }

  .print-route-meta div {
    border: 1px solid #999;
    padding: 3px 5px;
  }

  .print-route-meta strong,
  .print-route-meta span {
    display: inline;
  }

  .print-route-map {
    margin: 0 0 5px;
    break-inside: avoid;
  }

  .print-route-map img {
    display: block;
    width: 100%;
    height: 112mm;
    object-fit: contain;
    background: #f5f7f6;
    border: 1px solid #999;
  }

  .print-route-map-fallback {
    display: grid;
    place-content: center;
    gap: 3mm;
    width: 100%;
    height: 32mm;
    box-sizing: border-box;
    padding: 8mm;
    border: 1px solid #999;
    background: #f5f7f6;
    color: #222;
    text-align: center;
  }

  .print-route-map-fallback strong {
    display: block;
    font-size: 11pt;
  }

  .print-route-map-fallback span {
    display: block;
    font-size: 8pt;
  }

  .print-route-map figcaption {
    margin-top: 1px;
    color: #333;
    font-size: 7pt;
  }

  .print-route-list {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .print-route-list li {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 6px;
    break-inside: avoid;
    border-bottom: 0.5px solid #bbb;
    padding: 3px 0;
  }

  .print-route-index {
    display: block;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    font-weight: 700;
    line-height: 1.2;
    text-align: right;
  }

  .print-route-list strong,
  .print-route-list p,
  .print-route-list small {
    display: block;
    margin: 0;
  }

  .print-route-list small {
    color: #333;
    margin-top: 1px;
    font-size: 7.5pt;
    font-weight: 800;
  }
}

@media screen {
  :root {
    --brand: #8a1253;
    --brand-deep: #5e0c38;
    --brand-tint: #f7ecf2;
    --green: #1e6234;
    --green-tint: #e9f3ec;
    --green-bright: #57c07d;
    --ink: #3a2231;
    --ink-soft: #6b5a64;
    --muted: #93867e;
    --bg: #faf6f3;
    --surface: #ffffff;
    --line: #efe8e4;
    --line-soft: #f7f2ee;
    --warn-text: #a3462c;
    --warn-bg: #fbe9e0;
    --danger: #a04545;
    --danger-bg: #f9e7e7;
    --notice-text: #6d5a2a;
    --notice-bg: #fdf6e8;
    --dark-panel: #3a2231;
    --shadow: 0 2px 10px rgba(60, 30, 50, 0.06);
    --shadow-strong: 0 6px 20px rgba(70, 15, 45, 0.14);
  }

  body {
    background: var(--bg);
    color: var(--ink);
    font-family: Manrope, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 600;
  }

  button,
  input,
  select,
  textarea {
    font-family: inherit;
  }

  .stop-row:hover {
    filter: brightness(0.94);
  }

  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  a:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
  }

  .app-shell {
    width: min(1180px, calc(100vw - 30px));
    margin: 0 auto;
    padding: 0 0 28px;
  }

  .app-header {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
    gap: 18px;
    align-items: center;
    min-height: 100px;
    margin: 0 calc(50% - 50vw) 24px;
    padding: 0 max(30px, calc((100vw - 1180px) / 2));
    border-bottom: 0;
    /* Markenverlauf, aber senkrecht: --brand unten, --brand-deep oben.
       So laeuft der Header nach unten hin heller aus, statt an der Kante
       gegen den Inhalt abzuschatten. */
    background: linear-gradient(to top, var(--brand) 0%, var(--brand-deep) 100%);
    box-shadow: 0 24px 50px -20px rgba(94, 12, 56, 0.5);
  }

  .brand-lockup {
    display: flex;
    align-items: center;
  }

.brand-lockup img {
    width: 40%;
    height: 40%;
  object-fit: contain;
  object-position: left center;
}

  .step-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
  }

  .step-flow i {
    width: 16px;
    height: 2px;
    border-radius: 99px;
    background: #e3d9d3;
  }

  .step-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    border: 0;
    border-radius: 99px;
    padding: 8px 14px;
    background: #f4ece7;
    color: #000;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.15s ease;
    /* Gleicher Schatten in allen drei Zustaenden: die Pillen heben sich vom
       beigen Header ab, ohne dass der Schatten selbst zum Statussignal wird —
       das tragen Farbe und Ziffernkreis. */
    box-shadow: 0 10px 20px -10px rgba(94, 12, 56, 0.45);
  }

  .step-pill span {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #e3d7cf;
    color: inherit;
    font-size: 11px;
    line-height: 1;
  }

  .step-pill.active {
    background: var(--brand);
    color: #fff;
  }

  .step-pill.active span {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
  }

  .step-pill.done {
    background: var(--green-tint);
    color: var(--green);
  }

  .step-pill.done span {
    background: var(--green);
    color: #fff;
  }

  .header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
  }

  .app-header .ghost-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .settings-btn {
    width: 66px;
    min-width: 66px;
    min-height: 66px;
    padding: 0;
    font-size: 42px;
    line-height: 1;
  }

  .admin-panel {
    display: none;
    width: min(1180px, 100%);
    margin: 0 auto;
  }

  body.mobile-view-admin .workspace {
    display: none;
  }

  body.mobile-view-admin .admin-panel {
    display: grid;
    gap: 18px;
  }

  .admin-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 4px 2px 2px;
  }

  .admin-kicker {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
  }

  .admin-page-head h2 {
    margin: 2px 0 0;
    color: var(--ink);
    font-size: 28px;
    line-height: 1.12;
  }

  .admin-page-head p {
    max-width: 560px;
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
  }

  .admin-page-status {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    max-width: 390px;
    padding-top: 2px;
  }

  .admin-page-status span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 11px;
    border-radius: 999px;
    background: var(--brand-tint);
    color: var(--brand);
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
  }

  .admin-page-status span:nth-child(2) {
    background: var(--green-tint);
    color: var(--green);
  }

  .admin-page-status span:nth-child(3) {
    background: var(--notice-bg);
    color: var(--notice-text);
  }

  .admin-page-status span[hidden] {
    display: none;
  }

  .admin-page-grid {
    display: grid;
    grid-template-columns: minmax(270px, 0.9fr) minmax(300px, 1fr) minmax(340px, 1.08fr);
    gap: 18px;
    align-items: start;
  }

  .admin-settings-card,
  .admin-settings-section {
    min-width: 0;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #fffdfb 100%);
  }

  .settings-content {
    display: grid;
    gap: 14px;
  }

  .settings-content label,
  .admin-settings-section label {
    display: grid;
    gap: 8px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
  }

  .admin-settings-section {
    display: grid;
    gap: 12px;
  }

  .admin-settings-section[hidden] {
    display: none;
  }

  .settings-subhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--line-soft);
  }

  .settings-subhead h3 {
    margin: 0;
    color: var(--ink);
    font-size: 16px;
  }

  .settings-subhead .ghost-btn {
    min-height: 36px;
    padding: 0 12px;
    font-size: 13px;
    box-shadow: none;
  }

  .admin-section-note {
    margin: -2px 0 2px;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.45;
  }

  .admin-action-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
  }

  .admin-action-row .ghost-btn {
    min-width: 112px;
  }

  .admin-user-list {
    display: grid;
    gap: 8px;
    max-height: 216px;
    overflow: auto;
    padding: 2px 2px 2px 0;
  }

  .admin-user-row {
    display: grid;
    gap: 3px;
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fdfaf8;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  }

  .admin-user-row:hover,
  .admin-user-row.active {
    border-color: #dcc9d4;
    background: #fff;
    box-shadow: var(--shadow);
  }

  .admin-user-row.active {
    border-color: var(--brand);
    background: var(--brand-tint);
  }

  .admin-user-row:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
  }

  .admin-user-row strong,
  .admin-user-row span,
  .admin-user-row small {
    overflow-wrap: anywhere;
  }

  .admin-user-row span,
  .admin-user-row small {
    color: var(--muted);
    font-size: 12px;
  }

  .admin-user-row strong {
    color: var(--ink);
    font-size: 13.5px;
    line-height: 1.2;
  }

  .admin-user-active {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 2px;
  }

  .admin-user-active input {
    min-height: auto;
    width: 18px;
    height: 18px;
    accent-color: var(--brand);
  }

  body:not(.role-admin) .admin-step-pill,
  body:not(.role-admin) .connector-history-admin,
  body:not(.role-admin) .mobile-tabs button[data-view="admin"],
  body.role-courier .settings-btn,
  body.role-courier .plan-btn {
    display: none;
  }

  .workspace {
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
  }

  .view-panel {
    min-width: 0;
  }

  body.mobile-view-plan .planner-panel,
  body.mobile-view-plan .stops-panel,
  body.mobile-view-plan .courier-panel,
  body.mobile-view-plan .history-panel,
  body.mobile-view-route .import-panel,
  body.mobile-view-route .courier-panel,
  body.mobile-view-route .history-panel,
  body.mobile-view-delivery .import-panel,
  body.mobile-view-delivery .planner-panel,
  body.mobile-view-delivery .stops-panel,
  body.mobile-view-delivery .history-panel,
  body.mobile-view-history .import-panel,
  body.mobile-view-history .planner-panel,
  body.mobile-view-history .stops-panel,
  body.mobile-view-history .courier-panel {
    display: none;
  }

  body.mobile-view-plan .import-panel,
  body.mobile-view-home-tour .import-panel,
  body.mobile-view-history .history-panel,
  body.mobile-view-delivery .courier-panel {
    grid-column: 1 / -1;
  }

  body.role-dispatch .step-pill[data-view="delivery"],
  body.role-admin .step-pill[data-view="delivery"],
  body.role-dispatch .connector-route-delivery,
  body.role-admin .connector-route-delivery {
    display: none;
  }

  body.mobile-view-route .planner-panel,
  body.mobile-view-route .stops-panel {
    display: block;
  }

  .panel {
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface);
    box-shadow: var(--shadow);
    padding: 24px;
  }

  .panel-header {
    margin-bottom: 16px;
  }

  .panel-header.compact {
    align-items: flex-start;
  }

  .panel-header h2,
  .panel-title-block h2,
  .import-check-card h2,
  .navigation-card h3,
  .history-panel h2 {
    margin: 0;
    color: var(--ink);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
  }

  .panel-title-block p,
  .panel-header p,
  .muted,
  .save-state,
  .notice {
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.45;
  }

  .panel-title-block p,
  .panel-header p {
    margin: 5px 0 0;
  }

  label {
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 800;
  }

  input,
  select,
  textarea,
  .start-point-menu-btn {
    min-height: 44px;
    border: 2px solid #efe4ea;
    border-radius: 14px;
    background: #fff;
    color: var(--ink);
    padding: 0 14px;
    font-size: 13px;
    font-weight: 700;
  }

  .start-point-menu-btn {
    padding-right: 46px;
  }

  textarea {
    padding: 12px 14px;
  }

  input:focus,
  select:focus,
  textarea:focus,
  .start-point-menu-btn:focus-visible {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(138, 18, 83, 0.12);
  }

  .primary-btn,
  .ghost-btn {
    min-height: 44px;
    border-radius: 14px;
    padding: 0 16px;
    font-size: 16px;
    font-weight: 800;
    transition: all 0.15s ease;
  }

  .primary-btn {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
    box-shadow: 0 4px 12px rgba(138, 18, 83, 0.28);
  }

  .ghost-btn {
    border: 2px solid #efe4ea;
    background: #fff;
    color: var(--brand);
  }

  .ghost-btn.danger {
    color: var(--danger);
  }

  .import-panel {
    grid-column: 1 / -1;
  }

  .import-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 20px;
  }

  .import-card {
    display: grid;
    gap: 18px;
    min-height: 620px;
  }

  .file-drop {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    min-height: 360px;
    margin: 0;
    border: 2px dashed #dcc9d4;
    border-radius: 18px;
    background: #fdfaf8;
    color: var(--ink);
    text-align: center;
  }

  .file-drop:hover {
    border-color: #dcc9d4;
    background: #fdfaf8;
    filter: none;
  }

  .file-drop:hover b {
    filter: none;
  }

  .file-drop::before {
    display: none;
  }

  .file-drop .upload-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: var(--brand-tint);
    color: var(--brand);
    font-size: 26px;
    font-weight: 800;
  }

  .file-drop strong {
    font-size: 15px;
    font-weight: 800;
  }

  .file-drop em {
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
  }

  .file-drop b {
    display: inline-grid;
    place-items: center;
    min-width: 150px;
    min-height: 44px;
    border-radius: 14px;
    background: var(--brand);
    color: #fff;
    box-shadow: 0 4px 12px rgba(138, 18, 83, 0.28);
  }

  .last-import {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
  }

  .last-import span {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--green);
  }

  .manual-tour-panel {
    display: grid;
    gap: 16px;
    padding: 16px;
    border: 1px solid #eadbe4;
    border-radius: 14px;
    background: #fff;
  }

  .manual-tour-panel[hidden] {
    display: none;
  }

  .manual-tour-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }

  .manual-tour-header h3 {
    margin: 0;
    color: var(--ink);
    font-size: 18px;
  }

  .manual-tour-header p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.4;
  }

  .manual-tour-meta,
  .manual-address-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .manual-name-field,
  .manual-note-field {
    grid-column: 1 / -1;
  }

  .manual-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 10px;
  }

  .manual-stops-list {
    display: grid;
    gap: 8px;
    max-height: 230px;
    overflow: auto;
    padding-right: 2px;
  }

  .manual-stops-list.empty {
    min-height: 52px;
    place-items: center;
    border: 1px dashed #dcc9d4;
    border-radius: 12px;
    color: var(--muted);
    font-size: 12.5px;
  }

  .manual-stop-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 38px;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid #f0e2e8;
    border-radius: 12px;
    background: #fdfaf8;
  }

  .manual-stop-row > span {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--brand-tint);
    color: var(--brand);
    font-size: 12px;
    font-weight: 800;
  }

  .manual-stop-row strong,
  .manual-stop-row small,
  .manual-stop-row em {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .manual-stop-row small {
    color: var(--muted);
    font-size: 12px;
  }

  .manual-stop-row em {
    color: var(--ink-soft);
    font-size: 11.5px;
    font-style: normal;
  }

  .import-side {
    display: grid;
    gap: 20px;
  }

  .warn-chip,
  .priority-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 99px;
    padding: 4px 9px;
    background: var(--warn-bg);
    color: var(--warn-text);
    font-size: 11px;
    font-weight: 800;
  }

  .correction-toggle {
    width: 100%;
    justify-content: center;
  }

  .street-learning-panel {
    position: static;
    display: grid;
    grid-template-columns: 1fr;
    width: auto;
    margin-top: 12px;
    padding: 14px;
    border: 1px solid #f3e2d8;
    border-radius: 14px;
    background: #fefaf7;
    box-shadow: none;
  }

  .street-learning-panel[hidden] {
    display: none;
  }

  .import-check-card ul {
    display: grid;
    gap: 12px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
  }

  .import-check-card li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink-soft);
    font-size: 12.5px;
  }

  .import-check-card li span {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    flex: 0 0 auto;
  }

  .import-check-card li.ok span {
    background: var(--green-tint);
    color: var(--green);
  }

  .import-check-card li.ok span::before {
    content: "\2713";
  }

  .import-check-card li.warn span {
    background: var(--warn-bg);
    color: var(--warn-text);
  }

  .import-check-card li.warn span::before {
    content: "!";
  }

  .dark-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 72px;
    border-radius: 18px;
    padding: 14px 20px;
    background: var(--dark-panel);
    color: #fff;
  }

  .dark-cta small {
    display: block;
    color: rgba(255, 255, 255, 0.76);
    font-size: 11.5px;
    font-weight: 600;
  }

  .dark-cta .primary-btn {
    border-color: #4ea56e;
    background: #4ea56e;
    box-shadow: none;
  }

  .dark-cta .reopen-tour-btn {
    min-height: 52px;
    border-color: rgba(255, 255, 255, 0.36);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    box-shadow: none;
  }

  .dark-cta .reopen-tour-btn:hover {
    border-color: rgba(255, 255, 255, 0.58);
    background: rgba(255, 255, 255, 0.14);
  }

  .planner-panel {
    display: grid;
    gap: 16px;
    min-height: auto;
  }

  .summary-heading h2 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(20px, 1.8vw, 26px);
    font-weight: 900;
    line-height: 1.1;
    white-space: nowrap;
  }

  .summary-heading {
    text-align: center;
  }

  .summary-heading .tour-summary-metrics {
    margin: 0 0 5px;
    color: var(--ink-soft);
    font-size: clamp(18px, 1.65vw, 24px);
    font-weight: 800;
    line-height: 1.2;
  }

  #tourDateLabel {
    display: inline-block;
    margin-bottom: 5px;
  }

  #tourSummaryTitle {
    margin-bottom: 5px;
  }

  .tour-summary > .planner-actions {
    margin-top: 27px;
  }

  .summary-heading .save-state {
    display: none;
  }

  .route-feedback {
    margin: 16px 0 0;
  }

  .route-metrics {
    gap: 10px;
  }

  .route-metrics div {
    min-height: 82px;
    border: 0;
    border-radius: 14px;
    padding: 14px;
  }

  .route-metrics strong {
    color: inherit;
    font-size: 12px;
    font-weight: 700;
  }

  .route-metrics span {
    color: inherit;
    font-size: 17px;
    font-weight: 800;
  }

  .route-metrics small {
    color: inherit;
    opacity: 0.75;
  }

  .field-stack {
    gap: 10px;
  }

  .settings-grid {
    grid-template-columns: 1fr;
    margin: 0;
  }

  .settings-grid select {
    width: 100%;
  }

  .optimization-status-card {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fdfaf8;
  }

  .optimization-status-card h3 {
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
  }

  .optimization-status.available .status-dot {
    background: var(--green);
  }

  .optimization-status.unavailable .status-dot {
    background: var(--danger);
  }

  .planner-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .planner-actions .planner-action-btn {
    width: 100%;
    min-height: 54px;
    padding: 10px 14px;
  }

  .step-action {
    padding-left: 16px;
    padding-right: 16px;
  }

  .planner-actions .step-action::before,
  .release-cta .step-action::before {
    display: none;
  }

  .navigation-card {
    display: grid;
    gap: 12px;
    border-radius: 18px;
    padding: 18px;
    background: #fff;
    box-shadow: var(--shadow);
  }

  .navigation-card div {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .navigation-card .ghost-btn {
    min-height: 38px;
    border: 0;
    background: #f6f1ee;
    color: var(--ink-soft);
    font-size: 12px;
  }

  .map-card {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 200px;
    margin: 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    background:
      repeating-linear-gradient(45deg, rgba(239, 232, 228, 0.72) 0 10px, rgba(250, 246, 243, 0.9) 10px 20px),
      #f7f2ee;
    color: var(--muted);
    font-size: 12px;
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
  }

  .map-card:hover {
    box-shadow: var(--shadow-strong);
    transform: translateY(-1px);
  }

  .map-card img {
    width: 100%;
    height: 100%;
    min-height: 200px;
    object-fit: cover;
    border-radius: 12px;
  }

  .map-card.has-map::after {
    content: "Karte vergrößern";
    position: absolute;
    right: 12px;
    bottom: 12px;
    border-radius: 99px;
    padding: 7px 11px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--brand);
    box-shadow: var(--shadow);
    font-size: 11px;
    font-weight: 800;
  }

  .map-card span {
    position: relative;
    z-index: 1;
    padding: 6px 12px;
    border-radius: 7px;
    background: #fff;
    box-shadow: var(--shadow);
  }

  .map-card.has-map span {
    display: none;
  }

  .map-modal {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: grid;
    place-items: center;
    padding: 28px;
  }

  .map-modal[hidden] {
    display: none;
  }

  .map-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(58, 34, 49, 0.48);
    backdrop-filter: blur(3px);
  }

  .map-modal-content {
    position: relative;
    z-index: 1;
    width: min(1120px, calc(100vw - 56px));
    margin: 0;
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(58, 34, 49, 0.32);
  }

  .map-modal-content img {
    display: block;
    width: 100%;
    max-height: min(72vh, 680px);
    object-fit: contain;
    background: #f7f2ee;
  }

  .map-modal-content img[hidden] {
    display: none;
  }

  .map-modal-content figcaption {
    padding: 12px 18px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
  }

  .map-modal-fallback {
    display: grid;
    justify-items: start;
    gap: 10px;
    min-height: 260px;
    padding: 56px 24px 24px;
    background: var(--line-soft);
  }

  .map-modal-fallback[hidden] {
    display: none;
  }

  .map-modal-fallback strong {
    color: var(--ink);
    font-size: 18px;
  }

  .map-modal-fallback p {
    margin: 0;
    color: var(--muted);
  }

.map-modal-content > button {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
    min-height: 38px;
  background: rgba(255, 255, 255, 0.96);
}

.route-add-stop-modal-content {
  width: min(660px, calc(100vw - 56px));
  max-height: calc(100vh - 56px);
  padding: 28px;
  overflow: auto;
}

.route-add-stop-modal-content header {
  padding-right: 108px;
}

.route-add-stop-modal-content h2 {
  margin: 0;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.2;
}

.route-add-stop-modal-content header p {
  margin: 8px 0 20px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.route-add-stop-modal-content .manual-address-form {
  margin-top: 0;
}

.route-add-stop-modal-content .manual-actions {
  grid-template-columns: 1fr;
  margin-top: 16px;
}

.route-add-stop-modal-content .manual-actions .primary-btn {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  text-align: center;
}

.route-add-stop-modal-content .route-add-stop-submit {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}

.route-add-stop-modal-content .route-add-stop-submit:hover {
  border-color: #4ea56e;
  background: #4ea56e;
  filter: none;
}

.route-add-stop-modal.is-correction .route-add-stop-entry,
.route-add-stop-modal.is-correction #routeAddStopModalClose {
  display: none;
}

.route-add-stop-correction {
  display: grid;
  gap: 16px;
}

.route-add-stop-correction[hidden] {
  display: none;
}

.route-add-stop-correction-notice {
  margin: 0;
  color: var(--red);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
}

.route-add-stop-correction label {
  display: grid;
  gap: 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.route-add-stop-correction input[readonly] {
  background: #f6f1ee;
  color: var(--ink-soft);
}

.route-add-stop-correction-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.route-add-stop-correction-actions > button {
  position: static;
  width: 100%;
  min-height: 52px;
}

.route-add-stop-correction-maps {
  grid-column: 1 / -1;
}

/* Design-deck fidelity layer. ponytail: keep the proven legacy rules below this
   small override layer instead of rewriting working interaction styles. */
@media screen {
  .app-header {
    min-height: 64px;
    padding: 8px 24px;
  }

  .brand-lockup {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 230px;
  }

  .brand-lockup img {
    width: auto;
    height: 44px;
  }

  .brand-lockup > span {
    width: 1px;
    height: 28px;
    background: #e9e0da;
  }

  .brand-lockup strong {
    color: var(--ink);
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
  }

  .header-actions {
    gap: 10px;
  }

  #currentUser {
    display: none;
  }

  .settings-btn {
    width: auto;
    min-width: 0;
    padding-inline: 16px;
  }

  .workspace,
  .admin-panel {
    width: min(1180px, 100%);
    margin-inline: auto;
  }

  .workspace {
    padding: 11px 24px 36px;
  }

  .panel {
    border-color: transparent;
  }

  .import-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, 1fr);
    gap: 20px;
  }

  .correction-card,
  .import-check-card,
  .history-panel,
  .planner-panel,
  .stops-panel {
    box-shadow: var(--shadow);
  }

  /* Die Import-Karte ist die Buehne von Schritt 1 und stand mit demselben
     6-%-Schatten da wie die Beikarten. --shadow-strong ist der Token, den die
     Karten tragen, die sich vom Untergrund abheben sollen. */
  .import-card {
    box-shadow: var(--shadow-strong);
  }

  .file-drop {
    min-height: 300px;
  }

  .import-side {
    grid-template-rows: auto auto 1fr auto;
  }

  .dark-cta {
    min-height: 64px;
  }

  body.mobile-view-route .workspace {
    grid-template-columns: 400px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
  }

  .planner-panel {
    gap: 14px;
    padding: 18px 20px;
  }

  .planner-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
  }

  .planner-actions .planner-action-btn {
    width: auto;
    min-width: 0;
  }

  .route-metrics {
    grid-template-columns: 1fr 1fr;
  }

  .route-metrics > div {
    min-height: 72px;
    padding: 12px;
    border-radius: 14px;
  }

  .route-metrics .before-card {
    background: #f9f1f5;
    color: #69344f;
  }

  .route-metrics .after-card {
    background: var(--green-tint);
    color: var(--green);
  }

  .field-stack {
    gap: 10px;
  }

  .map-card {
    min-height: 210px;
  }

  .stops-panel {
    min-height: 640px;
    padding: 18px 20px;
  }

  .stops-list {
    gap: 10px;
  }

  .stop-row {
    min-height: 66px;
    padding: 12px 16px;
    border-radius: 16px;
  }

  .history-panel {
    padding: 22px 24px;
  }

  .history-search {
    margin-top: 12px;
  }

  .history-summary {
    margin-top: 10px;
  }

  .history-list {
    overflow: hidden;
    margin-top: 14px;
    border: 1px solid var(--line-soft);
    border-radius: 18px;
    background: #fff;
  }

  .history-item {
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    border-radius: 0;
    box-shadow: none;
  }

  .history-item:last-child {
    border-bottom: 0;
  }

  .history-item > summary {
    display: grid;
    grid-template-columns: minmax(200px, 1.35fr) minmax(320px, 1fr);
    align-items: center;
    gap: 18px;
    min-height: 72px;
    padding: 12px 16px;
  }

  .history-title {
    display: grid;
    gap: 3px;
  }

  .history-title strong {
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 800;
  }

  .history-title small {
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 500;
  }

  .history-result {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
  }

  .history-result-chip {
    padding: 5px 8px;
    border-radius: 99px;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1.15;
  }

  .history-result-chip.delivered {
    background: var(--green-tint);
    color: var(--green);
  }

  .history-result-chip.missed {
    background: var(--warn-bg);
    color: var(--warn-text);
  }

  .history-result-chip.declined {
    background: var(--danger-bg);
    color: var(--danger);
  }

  .history-result-chip.open {
    background: #f4ece7;
    color: var(--muted);
  }

  .history-result b {
    margin-left: auto;
    color: var(--brand);
    font-size: 12px;
    white-space: nowrap;
  }

  .admin-panel {
    padding: 22px 24px 36px;
  }

  .admin-page-head {
    display: none;
  }

  .admin-page-grid {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
    min-height: calc(100vh - 122px);
  }

  .admin-section-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0;
  }

  .admin-section-nav > .admin-kicker {
    margin: 0 14px 16px;
    color: #b49cac;
  }

  .admin-section-nav > button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--ink-soft);
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    text-align: left;
  }

  .admin-section-nav > button:hover {
    background: #fdfaf8;
  }

  .admin-section-nav > button.active {
    background: #fff;
    color: var(--brand);
    font-weight: 800;
    box-shadow: var(--shadow);
  }

  .admin-section-nav > button small {
    min-width: 28px;
    padding: 4px 8px;
    border-radius: 99px;
    background: #f1eae6;
    color: var(--muted);
    text-align: center;
  }

  .admin-section-nav > button.active small {
    background: var(--brand-tint);
    color: var(--brand);
  }

  .admin-goal-card {
    display: grid;
    gap: 5px;
    margin-top: auto;
    padding: 16px 14px;
    border-radius: 16px;
    background: var(--green-tint);
    color: var(--green);
  }

  .admin-goal-card small {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .admin-goal-card strong {
    color: #28563a;
    font-size: 14px;
  }

  .optimization-settings-content {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
    align-items: start;
    gap: 24px;
  }

  .optimization-options {
    display: grid;
    gap: 14px;
  }

  .admin-settings-card .admin-goal-card {
    min-height: 88px;
    margin: 0;
    align-content: center;
  }

  .admin-detail-shell {
    min-width: 0;
  }

  .admin-detail-shell > [data-admin-panel] {
    display: none;
  }

  .admin-detail-shell > [data-admin-panel].active {
    display: grid;
  }

  .admin-settings-card {
    align-content: start;
    min-height: 420px;
    padding: 24px 28px;
  }

  .admin-settings-section {
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 0;
    min-height: calc(100vh - 122px);
    padding: 0;
    overflow: hidden;
  }

  .admin-list-pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 22px 24px 18px;
    border-right: 1px solid var(--line);
  }

  .compact-btn {
    min-height: 36px;
    padding: 0 14px;
    border-radius: 99px;
    font-size: 12px;
  }

  /* Die Apotheken-Auswahl traegt jetzt .admin-user-list/.admin-user-row und
     damit dieselbe Darstellung wie die Benutzerliste. */

  .admin-pane-hint {
    margin: auto 0 0;
    color: var(--muted);
    font-size: 11.5px;
  }

.admin-form-pane {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 28px 32px;
}

  .admin-form-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
  }

  .admin-form-heading h3,
  .admin-form-heading p {
    margin: 0;
  }

  .admin-form-heading h3 {
    color: var(--ink);
    font-size: 18px;
  }

  .admin-form-heading p {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
  }

  .admin-avatar {
    display: grid;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-weight: 800;
  }

  .admin-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .admin-form-wide {
    grid-column: 1 / -1;
  }

.admin-form-pane label {
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 800;
  }

  .admin-user-active {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
  }

  .admin-user-active input {
    width: 38px;
    height: 22px;
    accent-color: var(--green);
  }

  .admin-form-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: auto;
    padding-top: 28px;
  }

  .admin-form-actions small {
    margin-left: auto;
    color: var(--muted);
  }

  .admin-user-list {
    display: grid;
    gap: 8px;
    max-height: none;
    overflow: visible;
  }

  .admin-user-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border: 2px solid transparent;
    border-radius: 14px;
    background: #fff;
    text-align: left;
  }

  .admin-user-row > b {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 50%;
    background: #f1eae6;
    color: var(--muted);
    font-style: normal;
  }

  .admin-user-row > span {
    display: grid;
    gap: 3px;
    min-width: 0;
  }

  .admin-user-row > span strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .admin-user-row > span small {
    overflow: hidden;
    color: var(--muted);
    font-size: 10.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .admin-user-row > em {
    padding: 4px 8px;
    border-radius: 99px;
    background: #f1eae6;
    color: var(--muted);
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
  }

  .admin-user-row > em.active {
    background: var(--green-tint);
    color: var(--green);
  }

  .admin-user-row.active {
    border-color: var(--brand);
    background: #fdf8fb;
  }

  .admin-user-row.active > b {
    background: var(--brand);
    color: #fff;
  }

  .courier-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .courier-title-row > span {
    padding: 5px 10px;
    border-radius: 99px;
    background: #ffffff22;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
  }

  .status-actions.secondary .ghost-btn {
    background: #f6f1ee;
    border-color: #f6f1ee;
  }

  .declined-status-btn {
    color: var(--danger);
  }

  .delivery-actions > .reset-last-btn {
    min-height: 30px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
  }

  @media (max-width: 900px) {
    .brand-lockup {
      min-width: 0;
    }

    .brand-lockup strong,
    .brand-lockup > span {
      display: none;
    }

    .admin-page-grid {
      grid-template-columns: 1fr;
      min-height: 0;
    }

    .admin-section-nav {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      padding: 0;
    }

    .admin-section-nav > .admin-kicker,
    .admin-section-nav .admin-goal-card {
      display: none;
    }

    .optimization-settings-content {
      grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
    }

    .admin-section-nav > button {
      justify-content: center;
    }

    .admin-settings-section {
      grid-template-columns: 1fr;
      min-height: 0;
    }

    .admin-list-pane {
      border-right: 0;
      border-bottom: 1px solid var(--line);
    }

    .admin-form-actions {
      margin-top: 0;
    }
  }

@media (max-width: 760px) {
    .admin-form-pane {
      width: 100%;
      padding: 20px 16px;
    }

    .optimization-settings-content {
      grid-template-columns: 1fr;
    }

    .history-item > summary {
      grid-template-columns: 1fr;
      gap: 8px;
    }

    .history-result {
      justify-content: flex-start;
      flex-wrap: wrap;
    }

    .history-result b {
      margin-left: 0;
    }

    .admin-section-nav {
      display: flex;
      flex-direction: row;
      overflow-x: auto;
    }

    .admin-section-nav > button {
      flex: 0 0 auto;
      width: auto;
    }

    .admin-form-grid {
      grid-template-columns: 1fr;
    }

    .admin-form-wide {
      grid-column: auto;
    }
  }

  @media (max-width: 480px) {
    body.role-courier .app-shell {
      /* v194: 72px-Tabbar-Reserve entfaellt (Leiste <=760 weg), Safe-Area bleibt. */
      padding: 0 0 calc(16px + env(safe-area-inset-bottom, 0px));
    }

    body.role-courier .courier-panel {
      max-width: none;
      border-radius: 0;
    }

    body.role-courier .courier-hero {
      border-radius: 0;
      padding: 14px 14px 20px;
    }

    body.role-courier .current-stop,
    body.role-courier .after-list {
      margin-inline: 10px;
    }

    .delivery-position {
      text-transform: uppercase;
      letter-spacing: .06em;
    }

    .mobile-tabs span {
      display: none;
    }

    .mobile-tabs button {
      min-height: 52px;
      padding: 0 12px;
    }
  }
}

.address-error-modal-content {
  width: min(620px, calc(100vw - 56px));
  max-height: calc(100vh - 56px);
  padding: 28px;
  overflow: auto;
}

.address-error-modal-content header {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.address-error-modal-content h2 {
  margin: 0;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.2;
}

.address-error-modal-content header p,
.address-error-help {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.address-error-icon {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: #fff0ec;
  color: var(--red);
  font-size: 22px;
  font-weight: 900;
}

.address-error-list {
  display: grid;
  gap: 10px;
  margin: 22px 0 16px;
  padding: 0;
  list-style: none;
}

.address-error-list li {
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  border: 1px solid #edc7bd;
  border-radius: 14px;
  background: #fff9f7;
}

.address-error-list strong,
.address-error-list span,
.address-error-list p {
  overflow-wrap: anywhere;
}

.address-error-list span {
  color: var(--ink);
  font-size: 14px;
}

.address-error-list p {
  margin: 2px 0 0;
  color: #8a382a;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.45;
}

.address-error-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 22px;
}

.address-error-actions > button {
  position: static;
  min-height: 50px;
}

.planning-stop-removal-modal-content {
  width: min(520px, calc(100vw - 56px));
}

.planning-stop-removal-stop {
  display: grid;
  gap: 4px;
  margin-top: 20px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--line-soft);
}

.planning-stop-removal-stop strong {
  color: var(--ink);
  font-size: 15px;
}

.planning-stop-removal-stop span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

#planningStopRemovalConfirmBtn {
  border-color: var(--danger);
  background: var(--danger);
  color: #fff;
}

.notification-settings-pane,
.email-server-pane {
  max-width: 700px;
}

.email-server-pane > .ghost-btn {
  align-self: flex-start;
  margin-top: 10px;
}

.contact-editor-modal-content {
  max-width: 720px;
}

.contact-editor-stops {
  display: grid;
  gap: 12px;
  max-height: 52vh;
  overflow: auto;
}

.contact-editor-stop {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fdfaf8;
}

.contact-editor-stop > strong,
.contact-editor-stop > small,
.contact-editor-stop > button {
  grid-column: 1 / -1;
  justify-self: start;
  width: fit-content;
}

.contact-editor-stop label {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.contact-editor-stop .contact-consent {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 620px) {
  .contact-editor-stop { grid-template-columns: 1fr; }
}

#adminTourConfirmBtn.danger {
  border-color: var(--danger);
  background: var(--danger);
  color: #fff;
  box-shadow: 0 4px 12px rgba(176, 65, 48, 0.28);
}

#adminTourConfirmBtn.danger:hover {
  background: #913226;
}

.nav-modal-content header {
  display: grid;
  gap: 4px;
  padding: 18px 18px 12px;
}

.nav-modal-content header strong {
  padding-right: 120px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
}

.nav-modal-content header span {
  color: var(--muted);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.nav-map-frame {
  display: grid;
  min-height: min(62vh, 620px);
  background: #f7f2ee;
}

.nav-map-frame img,
.nav-map-placeholder {
  grid-area: 1 / 1;
}

.nav-map-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nav-map-placeholder {
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

.nav-modal-content footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 18px 16px;
}

.nav-modal-content footer .ghost-btn {
  position: static;
  text-decoration: none;
}

.stops-panel {
  min-height: 640px;
  padding-bottom: 116px;
}

  .stops-tools {
    display: flex;
    align-items: end;
    justify-content: flex-end;
    gap: 10px;
  }

  .address-search-control {
    min-width: 220px;
  }

  .address-search-control span {
    color: var(--ink-soft);
  }

  .stops-list {
    gap: 10px;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .stop-row {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 12px;
    border: 0;
    border-left: 4px solid transparent;
    border-radius: 16px;
    padding: 13px 14px;
    background: #fff;
    box-shadow: var(--shadow);
  }

  .stop-actions {
    justify-content: flex-end;
  }

  .stop-row.priority-high {
    border-left-color: var(--brand);
  }

  .stop-index {
    width: 30px;
    height: 30px;
    background: #f3efec;
    color: var(--muted);
    font-size: 12px;
  }

  .priority-high .stop-index {
    background: var(--brand-tint);
    color: var(--brand);
  }

  .status-delivered .stop-index {
    background: var(--green-tint);
    color: var(--green);
  }

  .stop-main strong {
    color: var(--ink);
    font-size: 14.5px;
    font-weight: 800;
  }

  .stop-address,
  .stop-meta {
    color: var(--muted);
    font-size: 12.5px;
  }

  .priority-select {
    min-height: 36px;
    border: 0;
    border-radius: 99px;
    background: #f3ede9;
    color: var(--ink-soft);
    padding: 0 10px;
    font-size: 11px;
    text-align: center;
    text-align-last: center;
  }

  .delivery-note-toggle {
    min-height: 36px;
    border: 0;
    border-radius: 99px;
    background: #f6f1ee;
    color: var(--ink-soft);
    font-size: 11px;
    min-inline-size: 36px;
    padding-inline: 12px;
  }

  .stop-actions .priority-select {
    min-block-size: 36px;
    padding: 0 10px;
  }

  .stop-actions .delivery-note-toggle {
    min-block-size: 36px;
  }

  .stop-remove-btn {
    min-height: 36px;
  }

  .priority-select {
    text-align: center;
    text-align-last: center;
  }

  .delivery-note-toggle.has-note {
    background: #f1bf62;
    color: #4f2100;
    font-weight: 900;
  }

  .delivery-note-toggle.active {
    background: var(--brand-tint);
    color: var(--brand);
  }

  .delivery-note-editor {
    grid-column: 2 / -1;
  }

  .release-cta {
    position: fixed;
    right: 50px;
    width: max-content;
    max-width: calc(100vw - 80px);
    bottom: 18px;
    z-index: 18;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 60px;
    margin-top: 0;
    box-shadow: 0 14px 34px rgba(58, 34, 49, 0.18);
  }

  .release-cta[hidden] {
    display: none;
  }

  .release-cta.is-released {
    width: max-content;
    min-height: 0;
    padding: 0;
    gap: 0;
    background: transparent;
    box-shadow: none;
  }

  .release-cta.is-released > span {
    display: none;
  }

  .release-cta.is-released .reopen-tour-btn {
    min-height: 44px;
    padding: 0 16px;
    border-color: var(--dark-panel);
    background: var(--dark-panel);
  }

  .tour-start-btn {
    display: none;
  }

  .courier-panel {
    overflow: hidden;
    border-radius: 20px;
    background: var(--bg);
  }

  .courier-hero {
    display: grid;
    gap: 14px;
    padding: 22px 16px 28px;
    border-radius: 20px 20px 0 0;
    background: linear-gradient(160deg, var(--brand-deep), var(--brand));
    color: #fff;
  }

  .courier-hero h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
  }

  .courier-hero span {
    display: inline-flex;
    margin-top: 2px;
    border-radius: 99px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 11px;
  }

  .courier-progress strong {
    display: block;
    font-size: 28px;
    font-weight: 800;
  }

  .courier-progress p {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 11px;
  }

  .progress-bar {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
  }

  .progress-bar i {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: var(--green-bright);
    transition: width 0.2s ease;
  }

  .current-stop {
    min-height: 0;
    margin: 50px 10px 14px;
    border: 0;
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--shadow-strong);
    padding: 18px 14px;
  }

  .after-list {
    display: grid;
    gap: 8px;
    padding: 0 10px 14px;
  }

  .after-list[hidden] {
    display: none;
  }

  .after-list h3 {
    margin: 0 0 2px;
    color: #000;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .after-stop {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 56px;
    border-radius: 14px;
    padding: 10px;
    background: #fff;
    box-shadow: var(--shadow);
  }

  .after-stop > span {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--brand-tint);
    color: var(--brand);
    font-size: 12px;
    font-weight: 800;
  }

  .after-stop strong,
  .after-stop small {
    display: block;
    overflow-wrap: anywhere;
  }

  .after-stop strong {
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 800;
  }

  .after-stop small {
    color: var(--muted);
    font-size: 11.5px;
  }

  .after-stop.status-delivered {
    opacity: 0.6;
  }

  .after-stop.status-delivered strong {
    text-decoration: line-through;
  }

  .after-stop.status-delivered > span {
    background: var(--green-tint);
    color: var(--green);
  }

  .delivery-card {
    gap: 12px;
  }

  .delivery-position {
    color: var(--brand);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .delivery-card h3 {
    color: var(--ink);
    font-size: 20px;
    font-weight: 800;
  }

  .delivery-card address {
    color: var(--muted);
    font-size: 16px;
  }

  .delivery-note-view {
    border: 0;
    border-radius: 12px;
    background: var(--notice-bg);
    color: var(--notice-text);
    font-size: 12.5px;
  }

  .map-actions {
    grid-template-columns: 1fr 1fr;
  }

  .map-actions .nav-link {
    grid-column: 1 / -1;
  }

  .status-actions {
    grid-template-columns: 1fr 1fr;
  }

  .status-actions .status-btn {
    min-height: 46px;
  }

  .status-actions .delivered-status-btn {
    min-height: 58px;
  }

  .status-btn[data-status="delivered"] {
    border-color: var(--green);
    background: var(--green);
    color: #fff;
  }

  .status-btn[data-status="missed"] {
    color: var(--ink-soft);
  }

  .status-btn[data-status="declined"],
  .status-btn[data-status="open"] {
    color: var(--danger);
  }

  .history-panel {
    grid-column: 1 / -1;
  }

  .history-head {
    align-items: start;
  }

  .history-head h2 {
    font-size: 20px;
  }

  .history-summary {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 0 0 18px;
  }

  .history-summary div {
    align-items: start;
    justify-items: start;
    min-height: 96px;
    border: 0;
    border-radius: 18px;
    padding: 18px 20px;
    background: #fff;
    box-shadow: var(--shadow);
  }

  .history-summary small {
    color: #000;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .history-summary span {
    color: var(--ink);
    font-size: 26px;
    font-weight: 800;
  }

  .history-summary div:nth-child(2) span {
    color: var(--green);
  }

  .history-summary div:nth-child(3) span {
    color: var(--warn-text);
  }

  .history-list {
    gap: 0;
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--shadow);
  }

  .history-list.empty {
    min-height: 220px;
  }

  .history-item {
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    border-radius: 0;
    box-shadow: none;
  }

  .history-item summary {
    grid-template-columns: 1.4fr 1fr 110px;
    min-height: 64px;
    padding: 14px 20px;
  }

  .history-result {
    color: var(--brand);
    font-size: 12px;
  }

  .history-detail {
    padding: 0 20px 18px;
  }

  .history-stop {
    border-color: var(--line);
    border-radius: 12px;
    background: #fdfaf8;
  }












  .password-field {
    position: relative;
    display: block;
  }

  .password-field input {
    width: 100%;
    padding-right: 86px;
  }

  .password-field button {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    min-height: auto;
    border: 0;
    background: transparent;
    color: var(--brand);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
  }


  .mobile-tabs {
    display: none;
  }

  body.role-courier .step-flow .step-pill[data-view="plan"],
  body.role-courier .step-flow .step-pill[data-view="route"],
  body.role-courier .step-flow i:nth-of-type(1),
  body.role-courier .step-flow i:nth-of-type(2) {
    display: none;
  }

  body.role-courier .header-actions {
    display: flex;
  }

  @media (max-width: 1120px) {
    .admin-page-grid {
      grid-template-columns: minmax(260px, 0.9fr) minmax(360px, 1.1fr);
    }

    .admin-settings-card {
      grid-column: 1 / -1;
    }
  }

  @media (max-width: 900px) {
    .app-shell {
      width: 100%;
      padding: 0 10px 78px;
    }

    body.role-courier .app-shell {
      width: 100%;
      max-width: 560px;
      margin-inline: auto;
      padding-top: max(8px, env(safe-area-inset-top));
      padding-left: max(10px, env(safe-area-inset-left));
      padding-right: max(10px, env(safe-area-inset-right));
    }

    body.role-courier .workspace {
      justify-items: center;
    }

    body.role-courier .courier-panel,
    body.role-courier .history-panel {
      width: 100%;
      max-width: 540px;
      margin-inline: auto;
    }

    .app-header {
      grid-template-columns: 1fr auto;
      min-height: 74px;
      margin-bottom: 14px;
      padding: 0 12px;
    }

    .brand-lockup {
      display: flex;
    }

    .brand-lockup img {
      width: 40%;
      height: 40%;
    }

    .step-flow {
      display: none;
    }

    .header-actions {
      gap: 8px;
    }

    .settings-btn {
      width: 56px;
      min-width: 56px;
      min-height: 56px;
      font-size: 36px;
    }

    .header-actions .save-state {
      display: none;
    }

    body.mobile-view-admin .admin-panel {
      gap: 14px;
      padding-bottom: 78px;
    }

    .admin-page-head {
      align-items: flex-start;
      flex-direction: column;
      gap: 6px;
      padding-inline: 2px;
    }

    .admin-page-status {
      justify-content: flex-start;
      max-width: none;
    }

    .admin-page-head h2 {
      font-size: 24px;
    }

    .admin-page-grid {
      grid-template-columns: 1fr;
      gap: 12px;
    }

    .admin-user-list {
      max-height: none;
    }

    .admin-action-row {
      grid-template-columns: 1fr;
    }

    .workspace,
    .import-grid {
      grid-template-columns: 1fr;
    }

    .import-card {
      min-height: auto;
    }

    .file-drop {
      min-height: 260px;
    }

    .manual-tour-header,
    .manual-actions {
      grid-template-columns: 1fr;
      flex-direction: column;
      align-items: stretch;
    }

    .manual-tour-meta,
    .manual-address-form {
      grid-template-columns: 1fr;
    }

    body.mobile-view-route .planner-panel,
    body.mobile-view-route .stops-panel {
      display: grid;
      grid-column: 1 / -1;
    }

    .planner-panel {
      order: 1;
    }

    .stops-panel {
      order: 2;
      padding-bottom: 126px;
    }

    .panel {
      border-radius: 18px;
      padding: 18px;
    }

    .panel-header {
      align-items: flex-start;
      flex-direction: column;
    }

    .stops-tools,
    .planner-actions,
    .dark-cta:not(.release-cta) {
      width: 100%;
      flex-direction: column;
      align-items: stretch;
    }

    .release-cta {
      right: 10px;
      width: min(520px, calc(100vw - 20px));
      bottom: 82px;
      gap: 10px;
    }

    .release-cta .reopen-tour-btn,
    .release-cta .release-tour-btn {
      width: 100%;
    }

    .release-cta.is-released,
    .release-cta.is-released .reopen-tour-btn {
      width: max-content;
    }

    .address-search-control,
    .tour-courier-control {
      min-width: 0;
      width: 100%;
    }

    .stop-row {
      grid-template-columns: 34px minmax(0, 1fr);
    }

    .stop-actions,
    .delivery-note-editor {
      grid-column: 2;
    }

    .history-summary {
      grid-template-columns: 1fr 1fr;
    }

    .mobile-tabs {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 20;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      border-top: 1px solid var(--line);
      background: #fff;
      padding: 8px 8px 10px;
    }

    .mobile-tabs button {
      display: grid;
      place-items: center;
      gap: 4px;
      min-height: 52px;
      border: 0;
      border-radius: 14px;
      background: transparent;
      color: #c8b6ab;
      font-size: 10px;
      font-weight: 800;
    }

    .mobile-tabs span {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border-radius: 12px;
      background: #f6f1ee;
      color: inherit;
      font-size: 14px;
    }

    .mobile-tabs button.active {
      color: var(--brand);
    }

    .mobile-tabs button.active span {
      background: var(--brand);
      color: #fff;
    }

    body.role-courier .mobile-tabs {
      left: 0;
      right: 0;
      width: 100%;
      grid-template-columns: repeat(2, minmax(92px, 118px));
      justify-content: center;
      gap: 6px;
      transform: none;
    }

    body.role-courier .mobile-tabs button[data-view="plan"],
    body.role-courier .mobile-tabs button[data-view="route"] {
      display: none;
    }

    body.role-courier .support-widget {
      bottom: 76px;
      left: 12px;
    }

    .nav-modal {
      padding: 10px;
    }

    .nav-modal-content {
      width: calc(100vw - 20px);
      border-radius: 18px;
    }

    .route-add-stop-modal {
      padding: 10px;
    }

    .route-add-stop-modal-content {
      width: calc(100vw - 20px);
      max-height: calc(100vh - 20px);
      padding: 22px 18px;
      border-radius: 18px;
    }

    .route-add-stop-modal-content h2 {
      font-size: 20px;
    }

    .nav-map-frame {
      min-height: 58vh;
    }

    .nav-modal-content footer {
      justify-content: stretch;
    }

    .nav-modal-content footer .ghost-btn {
      flex: 1;
    }
  }

  @media (max-width: 480px) {
    /* Der Header war hier komplett ausgeblendet — damit gab es auf dem Handy
       keinen Weg, sich abzumelden, und keine Anzeige, wer angemeldet ist.
       Statt ihn zu verstecken, schrumpft er auf eine schmale Leiste: Logo und
       Titel fallen weg, Nutzer und Aktionen bleiben. */
    .app-header {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      min-height: 0;
      margin: 0 calc(50% - 50vw) 10px;
      padding: 6px max(10px, env(safe-area-inset-left)) 6px max(10px, env(safe-area-inset-right));
      box-shadow: 0 10px 24px -18px rgba(94, 12, 56, 0.5);
    }

    /* Das Markenzeichen traegt global height: 100px und ist hier leer —
       es wuerde die Leiste allein durch seine Hoehe aufblasen. */
    .app-header .brand-lockup {
      display: none;
    }

    .app-header .header-actions {
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
    }

    /* Weiter oben per #currentUser { display: none } ausgeblendet. Auf dem
       Handy ist es die einzige Stelle, an der steht, wer angemeldet ist —
       und man sollte wissen, wen man da abmeldet. */
    .app-header #currentUser {
      display: inline-block;
      max-width: 42vw;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 12px;
    }

    .app-shell {
      padding-top: 0;
    }

    body.role-courier .app-shell {
      padding-top: max(8px, env(safe-area-inset-top));
      padding-left: max(10px, env(safe-area-inset-left));
      padding-right: max(10px, env(safe-area-inset-right));
    }

    body.role-courier .courier-panel {
      border-radius: 18px;
    }

    body.role-courier .courier-hero {
      border-radius: 18px 18px 0 0;
    }



  }
}

@media screen and (max-width: 480px) {
  body.role-courier .app-shell {
    width: 100%;
    max-width: none;
    /* v194: keine Tabbar <=760px mehr — die 72px-Reserve ist weg. */
    padding: 0 0 calc(16px + env(safe-area-inset-bottom, 0px));
  }

  body.role-courier .workspace {
    width: 100%;
    max-width: none;
    padding: 0;
  }

  body.role-courier .courier-panel {
    width: 100%;
    max-width: none;
    border-radius: 0;
  }

  body.role-courier .courier-hero {
    width: 100%;
    padding: 14px 14px 20px;
    border-radius: 0;
  }

  .courier-progress {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    align-items: end;
  }

  .courier-progress-copy {
    display: flex;
    align-items: baseline;
    gap: 5px;
  }

  .courier-progress-copy strong {
    color: #fff;
    font-size: 34px;
    line-height: 1;
  }

  .courier-progress-copy span {
    color: #fff;
    font-size: 10px;
    font-weight: 700;
  }

  .courier-progress > p {
    display: flex;
    gap: 5px;
    align-items: baseline;
    justify-content: flex-end;
    margin: 0;
    font-size: 9px;
  }

  .courier-progress .progress-bar {
    grid-column: 1 / -1;
    width: 100%;
  }

  #declinedCount[hidden] {
    display: none !important;
  }

  body.role-courier .current-stop,
  body.role-courier .after-list {
    width: auto;
    margin-inline: 10px;
  }

  body.role-courier .current-stop {
    margin-top: -8px;
  }

  body.role-courier .delivery-card {
    width: 100%;
  }

  body.role-courier .status-actions,
  body.role-courier .status-actions.secondary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  body.role-courier .delivery-actions .delivered-status-btn {
    grid-column: auto;
  }

  body.role-courier .mobile-tabs {
    grid-template-columns: repeat(2, minmax(96px, 128px));
  }

  body.role-courier .mobile-tabs button[data-view="delivery"],
  body.role-courier .mobile-tabs button[data-view="history"] {
    display: grid;
  }

  body.role-courier .mobile-tabs button[data-view="plan"],
  body.role-courier .mobile-tabs button[data-view="route"],
  body.role-courier .mobile-tabs button[data-view="admin"] {
    display: none;
  }

  body.role-admin .mobile-tabs button[data-view="delivery"],
  body.role-dispatch .mobile-tabs button[data-view="delivery"] {
    display: none;
  }

  .mobile-tabs span.material-symbols-outlined {
    display: grid;
    font-family: "Material Symbols Outlined";
    font-size: 18px;
  }

  body.role-courier .support-widget {
    right: 12px;
    bottom: 82px;
    left: auto;
  }

  body.role-courier .support-help-btn {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    overflow: hidden;
    font-size: 0;
  }

  body.role-courier .support-help-btn span {
    display: grid;
    font-size: 20px;
  }
}

@media screen {
  .app-header {
    width: 100%;
    margin: 0;
  }

  body.authenticated .support-widget {
    right: 18px;
    bottom: 18px;
    left: auto;
  }

  body.authenticated .support-help-btn {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    overflow: hidden;
    font-size: 0;
  }

  body.authenticated .support-help-btn span {
    display: grid;
    font-size: 20px;
  }

  .settings-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .settings-btn .material-symbols-outlined {
    font-family: "Material Symbols Outlined";
    font-size: 18px;
  }

  .admin-user-active input {
    position: relative;
    width: 38px;
    height: 22px;
    margin: 0;
    appearance: none;
    border: 0;
    border-radius: 99px;
    background: #d9d0cb;
  }

  .admin-user-active input::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    content: "";
    transition: transform .15s ease;
  }

  .admin-user-active input:checked {
    background: var(--green);
  }

  .admin-user-active input:checked::after {
    transform: translateX(16px);
  }
}

@media screen and (min-width: 901px) {
  .app-shell,
  .workspace,
  .admin-panel {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }

  .workspace {
    width: calc(100% - 40px);
    margin-inline: 20px;
    padding-inline: 0;
  }

  .app-header {
    min-height: 90px;
  }

  .brand-lockup {
    height: 74px;
  }

  .brand-lockup img {
    height: 100%;
    max-height: 100%;
    object-fit: contain;
  }
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
select:focus,
textarea:focus {
  border-color: #efe4ea;
  outline: none;
  box-shadow: none;
}

/* Mobile operation: keep role-specific controls and fixed utility actions unambiguous. */
@media screen and (max-width: 900px) {
  body:not(.role-courier) .workspace {
    width: calc(100% - 40px);
    max-width: none;
    margin-inline: 20px;
    padding-inline: 0;
  }

  body:not(.role-courier) .mobile-tabs button[data-view="delivery"] {
    display: none;
  }
}

.mobile-tabs button[data-view="delivery"] {
  display: none;
}

body.role-courier .mobile-tabs button[data-view="delivery"] {
  display: grid;
}

/* Die PWA-Historie des Boten ist eine reine Tourenliste. Auswertungen und
   Dispo-Werkzeuge bleiben den Admin-/Dispo-Rollen vorbehalten. */
body.role-courier .history-filters,
body.role-courier .history-summary,
body.role-courier .history-head #exportBtn {
  display: none !important;
}

/* The confirmed street state uses the same compact chip geometry as the unclear state. */
.ok-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 99px;
  padding: 4px 9px;
  background: #e4f5e9;
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
}

/* Restore the established help treatment and anchor it to the lower-left viewport edge. */
body.authenticated .support-widget {
  right: auto;
  bottom: max(15px, env(safe-area-inset-bottom));
  left: max(15px, env(safe-area-inset-left));
}

body.authenticated .support-help-btn {
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 46px;
  padding: 0 17px 0 12px;
  overflow: visible;
  font-size: inherit;
}

body.authenticated .support-help-btn span {
  display: inline-flex;
  font-size: inherit;
}

@media (hover: hover) {
  .support-help-btn:hover {
    background: #c95f10;
  }
}

.support-help-btn:focus-visible {
  outline: 3px solid rgba(232, 117, 26, 0.35);
  outline-offset: 3px;
}

.brand-lockup {
  height: 100px;
}

/* Mobil sitzt Hilfe in der Navbar; Desktop bleibt die etablierte Pille im Viewport. */
@media screen and (max-width: 900px) {
  .app-header {
    position: relative;
  }

  .app-header .support-widget.in-navbar {
    position: absolute;
    top: 50%;
    left: 0;
    right: auto;
    transform: translateY(-50%);
    z-index: 1;
    display: block;
    margin: 0;
  }

  .app-header .support-help-btn {
    width: 26px;
    min-width: 26px;
    height: 26px;
    min-height: 26px;
    padding: 0;
    font-size: 0;
  }

  .app-header .support-help-label {
    display: none;
  }

  .app-header .support-help-btn > span:first-child {
    display: inline-flex;
    width: 26px;
    height: 26px;
    font-size: 16px;
  }

  .app-header .support-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    margin: 0;
  }
}

.brand-lockup strong {
  padding-left: 20px;
}

.import-grid {
  margin-inline: 0;
}

/* Route planning uses one decisive action per row. */
.planner-panel .planner-actions {
  grid-template-columns: 1fr;
  gap: 20px;
}

.planner-panel .planner-actions .planner-action-btn {
  width: 100%;
}

.planner-panel .route-metrics {
  grid-template-columns: 1fr;
}

.planner-panel .route-metrics .after-card {
  place-content: center;
  justify-items: center;
  text-align: center;
}

#optimizationErrorReportBtn,
#optimizationErrorReportBtn:hover {
  border-color: var(--brand);
  background: #fff;
  color: var(--brand);
  box-shadow: none;
  filter: none;
  transform: none;
}

@media screen and (min-width: 901px) {
  body.mobile-view-plan .workspace,
  body.mobile-view-route .workspace,
  body.mobile-view-history .workspace,
  body.mobile-view-running .workspace {
    width: 84%;
    margin-inline: auto;
  }

  .import-grid {
    width: 100%;
    margin-inline: 0;
  }

  .admin-detail-shell > .admin-settings-card.active {
    width: 100%;
  }

  .stops-panel .stops-tools {
    gap: 0;
  }

  .stops-panel .tour-courier-control {
    margin-right: 70px;
  }

  .stops-panel .address-search-control {
    margin-right: 120px;
  }

  .stops-panel #clearBtn {
    margin-right: 20px;
    width: fit-content;
    max-width: 100%;
  }
}

/* Keep the established pre-redesign comparison layout on compact planning screens. */
@media screen and (max-width: 760px) {
  .tour-summary > .planner-actions {
    margin-top: 21px;
  }

  body.mobile-view-route .route-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ═══════════════════ Import-Redesign (Landing-Designsprache) ═══════════════════ */
@media screen {
  /* Kicker + Serif-Titel wie auf der Landing-Page */
  .import-kicker {
    display: inline-block;
    margin-bottom: 6px;
    color: var(--brand);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .import-panel .panel-title-block h2 {
    font-family: "Instrument Serif", Georgia, serif;
    font-size: clamp(26px, 2.6vw, 34px);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.08;
  }

  .import-panel .panel-title-block p {
    max-width: 52ch;
    font-size: 13px;
  }

  /* Sanfter Einstieg beim Anzeigen der Ansicht */
  @keyframes importRise {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
  }

  .import-grid > .import-card,
  .import-side > * {
    animation: importRise 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .import-side > *:nth-child(1) { animation-delay: 0.08s; }
  .import-side > *:nth-child(2) { animation-delay: 0.16s; }
  .import-side > *:nth-child(3) { animation-delay: 0.24s; }

  /* Dropzone als Buehne */
  .file-drop {
    position: relative;
    overflow: hidden;
    gap: 10px;
    min-height: 380px;
    border: 2px dashed rgba(138, 18, 83, 0.30);
    border-radius: 22px;
    background:
      radial-gradient(60% 50% at 50% 0%, rgba(138, 18, 83, 0.05), transparent 70%),
      #fdfaf8;
    cursor: pointer;
    transition:
      border-color 0.25s ease,
      background-color 0.25s ease,
      transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 0.3s ease;
  }

  .file-drop::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.4;
    background-image: radial-gradient(rgba(58, 34, 49, 0.12) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(70% 60% at 50% 35%, #000 20%, transparent 100%);
    mask-image: radial-gradient(70% 60% at 50% 35%, #000 20%, transparent 100%);
  }

  .file-drop:hover,
  .file-drop.is-dragover {
    border-color: var(--brand);
    background-color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 24px 50px -22px rgba(94, 12, 56, 0.35);
    filter: none;
  }

  .file-drop.is-dragover {
    border-style: solid;
    background-color: var(--brand-tint);
  }

  .file-drop:focus-within {
    outline: 3px solid rgba(138, 18, 83, 0.25);
    outline-offset: 3px;
  }

  .file-drop .upload-icon {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: var(--brand-tint);
    color: var(--brand);
    box-shadow: inset 0 0 0 1px rgba(138, 18, 83, 0.12);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s;
    animation: uploadFloat 3s ease-in-out infinite;
  }

  @keyframes uploadFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }

  .file-drop:hover .upload-icon,
  .file-drop.is-dragover .upload-icon {
    background: var(--brand);
    color: #fff;
    transform: scale(1.08);
    animation-play-state: paused;
  }

  .file-drop strong {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.01em;
  }

  .file-drop em {
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
  }

  .file-drop b {
    display: inline-grid;
    place-items: center;
    min-width: 170px;
    min-height: 48px;
    padding: 0 26px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 14px 30px -10px rgba(94, 12, 56, 0.45);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s;
  }

  .file-drop:hover b {
    transform: translateY(-2px);
    box-shadow: 0 20px 40px -12px rgba(94, 12, 56, 0.55);
    filter: none;
  }

  .file-hint {
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 600;
  }

  .file-drop.is-processing {
    border-color: var(--brand);
    border-style: solid;
  }

  .file-drop.is-processing::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(138, 18, 83, 0.10) 50%, transparent 70%);
    -webkit-mask-image: none;
    mask-image: none;
    opacity: 1;
    animation: importShimmer 1.3s linear infinite;
  }

  @keyframes importShimmer {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
  }

  /* Status als Chip mit Puls-Punkt */
  .import-panel .last-import {
    width: fit-content;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--green-tint);
    color: var(--green);
    font-size: 12px;
    font-weight: 700;
  }

  .import-panel .last-import span {
    width: 7px;
    height: 7px;
    background: var(--green-bright);
    box-shadow: 0 0 0 0 rgba(87, 192, 125, 0.55);
    animation: importPulse 2.2s infinite;
  }

  @keyframes importPulse {
    0% { box-shadow: 0 0 0 0 rgba(87, 192, 125, 0.55); }
    70% { box-shadow: 0 0 0 8px rgba(87, 192, 125, 0); }
    100% { box-shadow: 0 0 0 0 rgba(87, 192, 125, 0); }
  }

  .import-panel .last-import.is-processing {
    background: var(--notice-bg);
    color: var(--notice-text);
  }

  .import-panel .last-import.is-processing span {
    background: var(--amber);
    box-shadow: none;
    animation: none;
  }

  .manual-target-card {
    gap: 12px;
  }

  .manual-target-card .panel-header {
    margin-bottom: 0;
  }

  .manual-target-card .panel-header h2 {
    color: var(--brand);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }

  .manual-target-card .panel-header p {
    margin: 5px 0 0;
    font-size: 12px;
  }

  .manual-target-card .primary-btn {
    width: 100%;
    min-height: 48px;
    border-radius: 14px;
  }

  /* Seitenkarten: Ueberschriften als Kicker */
  .import-check-card h2,
  .correction-card .panel-header h2 {
    color: var(--brand);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }

  .import-check-card li {
    gap: 12px;
    font-size: 13px;
  }

  .import-check-card li b {
    color: var(--ink);
    font-weight: 700;
  }

  .import-check-card li.warn b {
    color: var(--warn-text);
  }

  .import-check-card li span {
    width: 24px;
    height: 24px;
  }

  .import-side .warn-chip {
    padding: 5px 12px;
  }

  /* Adresskorrektur-Formular: Fokusringe wie auf der Landing */
  .street-learning-panel input,
  .street-learning-panel select {
    border: 1.5px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    transition: border-color 0.2s, box-shadow 0.2s;
  }

  .street-learning-panel input:focus,
  .street-learning-panel select:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgba(138, 18, 83, 0.12);
  }

  .street-learning-panel button {
    min-height: 44px;
    border-radius: 999px;
    font-weight: 800;
  }

  .street-learning-panel .primary-btn {
    border: 1.5px solid var(--brand);
    background: var(--brand);
    color: #fff;
    box-shadow: 0 4px 12px rgba(138, 18, 83, 0.22);
  }

  .street-learning-panel .primary-btn:hover {
    border-color: var(--brand-deep);
    background: var(--brand-deep);
  }

  .street-learning-panel .ghost-btn {
    border: 1.5px solid var(--line);
    background: var(--surface);
    color: var(--brand);
  }

  .street-learning-panel .ghost-btn:hover {
    border-color: var(--brand);
    background: var(--brand-tint);
    color: var(--brand);
  }

  /* CTA-Karte im Beeren-Verlauf der Landing */
  .import-cta {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    padding: 22px 24px;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
    box-shadow: 0 24px 50px -20px rgba(94, 12, 56, 0.5);
  }

  .import-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.3;
    background-image: radial-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(80% 90% at 50% 0%, #000, transparent 85%);
    mask-image: radial-gradient(80% 90% at 50% 0%, #000, transparent 85%);
  }

  .import-cta strong {
    position: relative;
    font-family: "Instrument Serif", Georgia, serif;
    font-size: clamp(18px, 1.8vw, 22px);
    font-weight: 600;
    letter-spacing: 0;
  }

  .import-cta .primary-btn {
    position: relative;
    border-color: #fff;
    border-radius: 999px;
    background: #fff;
    color: var(--brand);
    font-weight: 800;
    box-shadow: 0 12px 26px -10px rgba(0, 0, 0, 0.35);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s;
  }

  .import-cta .primary-btn:hover {
    background: #fff;
    color: var(--brand-deep);
    transform: translateY(-2px);
    box-shadow: 0 18px 36px -12px rgba(0, 0, 0, 0.45);
    filter: none;
  }

  @media (max-width: 900px) {
    .import-card {
      min-height: 0;
    }

    .file-drop {
      min-height: 280px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .import-grid > .import-card,
    .import-side > *,
    .file-drop .upload-icon,
    .import-panel .last-import span {
      animation: none;
    }

    .file-drop,
    .file-drop b,
    .manual-target-card .primary-btn,
    .import-cta .primary-btn {
      transition: none;
    }
  }
}

/* Horizontales Wegscrollen unterbinden: body ist bereits overflow-x: hidden,
   der eigentliche Scroll-Container ist aber html. */
@media screen {
  html {
    overflow-x: hidden;
  }
}

/* App-Header auf Tablet-Breiten: Logo-Spalte nicht mehr aus der intrinsischen
   Bildbreite ableiten (width: 40% in content-sized Grid-Track blaehte die
   Spalte auf und erzeugte horizontales Scrollen, vorbestehend). */
@media screen and (max-width: 900px) and (min-width: 761px) {
  .app-header {
    grid-template-columns: auto 1fr;
  }

  .brand-lockup {
    min-width: 0;
  }

  .brand-lockup img {
    width: auto;
    height: 44px;
  }

  .header-actions {
    justify-self: end;
  }
}

/* Die Ergebnis-Karte ist heute die einzige Metrik-Karte — volle Breite auch mobil. */
@media screen and (max-width: 760px) {
  body.mobile-view-route .route-metrics {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════ Optimieren-View v2 — Anordnung, Semantik, Zustaende ═══════════════
   Prinzipien: Reihenfolge folgt dem Arbeitsfluss (Route einstellen → Optimieren →
   Ergebnis → Karte). Beere = Marke + Hauptaktion. Tinte + Gruen = Ergebnis/Erfolg
   (wie die Vorher/Nachher-Sektion der Landing). Serif nur fuer Headline und die
   grosse Ergebniszahl. Amber = Warnung. */
@media screen {
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .planner-panel {
    display: grid;
    gap: 20px;
  }

  /* ── Kopf: Kicker, Serif-Titel, ruhige Meta-Zeile ── */
  .planner-kicker {
    display: inline-block;
    margin-bottom: 4px;
    color: var(--brand);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .planner-panel .summary-heading h2 {
    font-family: "Instrument Serif", Georgia, serif;
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.08;
    white-space: normal;
  }

  .planner-panel .tour-summary-metrics {
    margin-top: 4px;
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 600;
  }

  /* ── Zonen mit Haarlinien statt schwebender Karten ── */
  .planner-zone {
    padding-top: 18px;
    border-top: 1px solid var(--line);
  }

  .group-label {
    display: block;
    margin-bottom: 10px;
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  /* ── Formularfelder: ruhig, klare Fokusringe ── */
  .planner-panel .field-stack input,
  .planner-panel .field-stack select,
  .planner-panel .start-point-menu-btn {
    border: 1.5px solid var(--line);
    border-radius: 12px;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
  }

  .planner-panel .field-stack input:focus,
  .planner-panel .field-stack select:focus,
  .planner-panel .start-point-menu-btn:focus-visible {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgba(138, 18, 83, 0.12);
  }

  /* ── Die eine grosse Aktion ── */
  .planner-panel .action-optimize {
    min-height: 56px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.01em;
    box-shadow: 0 14px 30px -10px rgba(94, 12, 56, 0.45);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s;
  }

  .planner-panel .action-optimize:hover {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
    transform: translateY(-2px);
    box-shadow: 0 20px 40px -12px rgba(94, 12, 56, 0.55);
    filter: none;
  }

  /* Deaktiviert sieht auch so aus: flach, neutral, mit Erklaerung darunter */
  .planner-panel .action-optimize:disabled {
    background: var(--line-soft, #f7f2ee);
    color: var(--muted);
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
  }

  .optimize-hint {
    display: none;
    margin: 0;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--notice-bg);
    color: var(--notice-text);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.45;
    text-align: center;
  }

  .planner-panel:has(#optimizeBtn:disabled) .optimize-hint {
    display: block;
  }

  /* ── Ergebnis: direkt unter dem Button, Ursache → Wirkung ── */
  .route-feedback {
    margin-top: -6px;
  }

  /* Optimiert = gruene Erfolgskarte */
  .planner-panel .route-metrics .after-card {
    position: relative;
    display: grid;
    gap: 2px;
    justify-items: start;
    text-align: left;
    border: 1.5px solid rgba(30, 98, 52, 0.35);
    border-radius: 18px;
    padding: 18px 20px;
    background: var(--green-tint);
    color: var(--ink);
  }

  .planner-panel .route-metrics .after-card strong {
    color: var(--green);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }

  .planner-panel .route-metrics .after-card span {
    font-family: "Instrument Serif", Georgia, serif;
    font-size: 34px;
    font-weight: 600;
    line-height: 1.05;
    color: var(--ink);
  }

  .planner-panel .route-metrics .after-card small {
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 600;
  }

  #routeSavings {
    display: inline-block;
    margin-top: 10px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(30, 98, 52, 0.12);
    color: var(--green);
    font-size: 12.5px;
    font-weight: 700;
    font-style: normal;
    line-height: 1.35;
  }

  #routeSavings[hidden] {
    display: none;
  }

  /* Noch nicht optimiert: Karte ausblenden — der Hinweis lebt jetzt in der
     Freigabe-Karte der Lieferziele. Die gruene Karte erscheint erst mit Ergebnis. */
  .planner-panel .route-metrics .after-card:has(> #afterDuration:empty) {
    display: none;
  }

  /* ── Karte: klickbar, hebt sich ── */
  .map-card {
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s, border-color 0.3s;
  }

  .map-card:hover,
  .map-card:focus-visible {
    border-color: rgba(138, 18, 83, 0.35);
    transform: translateY(-3px);
    box-shadow: 0 24px 50px -22px rgba(94, 12, 56, 0.35);
    outline: none;
  }

  .map-card span {
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 600;
  }

  /* Drucken: Werkzeug bei seinem Objekt (unter der Karte), kein Konkurrenz-CTA */
  .planner-panel .action-print {
    width: 100%;
    min-height: 46px;
    margin-top: 25px;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    font-weight: 700;
    transition: border-color 0.25s, color 0.25s, background 0.25s;
  }

  .planner-panel .action-print:hover {
    border-color: var(--brand);
    color: var(--brand);
    background: #fff;
  }

  /* ── ORS-Status: Fusszeile statt Karte — Info, kein Inhalt ── */
  .optimization-status-card {
    margin: 0;
    padding: 14px 2px 0;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .optimization-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .optimization-status .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    flex: 0 0 auto;
  }

  .optimization-status strong {
    font-size: 12.5px;
    font-weight: 700;
  }

  .optimization-status.available strong {
    color: var(--green);
  }

  .optimization-status.available .status-dot {
    background: var(--green-bright);
    box-shadow: 0 0 0 0 rgba(87, 192, 125, 0.55);
    animation: importPulse 2.2s infinite;
  }

  .optimization-status.unavailable strong {
    color: var(--warn-text);
  }

  .optimization-status.unavailable .status-dot {
    background: var(--amber, #b87512);
    animation: none;
  }

  /* ═══ Lieferziele-Panel ═══ */
  .stops-panel .panel-header h2 {
    font-family: "Instrument Serif", Georgia, serif;
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 600;
    letter-spacing: -0.01em;
  }

  #stopCount {
    display: inline-block;
    margin-top: 4px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--green-tint);
    color: var(--green);
    font-size: 11.5px;
    font-weight: 800;
  }

  .stops-panel .stops-tools select {
    border: 1.5px solid var(--line);
    border-radius: 12px;
    transition: border-color 0.2s, box-shadow 0.2s;
  }

  .stops-panel .stops-tools select:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgba(138, 18, 83, 0.12);
  }

  /* Ziel einfuegen: Sekundaeraktion — Beeren-Outline, kein zweiter Primary */
  .stops-panel .action-add-stop {
    border: 1.5px solid rgba(138, 18, 83, 0.35);
    border-radius: 999px;
    background: #fff;
    color: var(--brand);
    font-weight: 800;
    box-shadow: none;
    transition: background 0.25s, border-color 0.25s, transform 0.25s;
  }

  .stops-panel .action-add-stop:hover {
    background: var(--brand-tint);
    border-color: var(--brand);
    transform: translateY(-1px);
    filter: none;
  }

  .stops-panel #clearBtn {
    border-radius: 999px;
    font-weight: 700;
    white-space: nowrap;
  }

  .stops-panel .action-add-stop,
  .stops-panel #clearBtn {
    white-space: nowrap;
  }

  /* Freigabe: Tinte + Gruen = los. Nie verwechselbar mit dem Beeren-Optimieren. */
  .release-cta {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    background: var(--dark-panel);
    box-shadow: 0 24px 50px -20px rgba(58, 34, 49, 0.5);
  }

  .release-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.22;
    background-image: radial-gradient(rgba(255, 255, 255, 0.45) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(80% 90% at 50% 0%, #000, transparent 85%);
    mask-image: radial-gradient(80% 90% at 50% 0%, #000, transparent 85%);
  }

  .release-cta > span,
  .release-cta button {
    position: relative;
  }

  .release-cta strong {
    font-family: "Instrument Serif", Georgia, serif;
    font-size: clamp(17px, 1.6vw, 20px);
    font-weight: 600;
  }

  .release-cta small {
    color: rgba(255, 255, 255, 0.75);
  }

  .release-cta .release-tour-btn {
    border: 0;
    border-radius: 999px;
    background: var(--green-bright);
    color: #10281a;
    font-weight: 800;
    box-shadow: 0 12px 26px -10px rgba(0, 0, 0, 0.4);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s, background 0.25s;
  }

  .release-cta .release-tour-btn:hover {
    background: #6dcb8f;
    transform: translateY(-2px);
    box-shadow: 0 18px 36px -12px rgba(0, 0, 0, 0.5);
    filter: none;
  }

  .release-cta .reopen-tour-btn {
    border-radius: 999px;
  }

  /* Solange nicht optimiert, ist der Karten-Button ein Optimieren-Ausloeser —
     Optik und Position exakt wie der Import-Button ("Weiter zur Planung"). */
  .release-cta .release-tour-btn[data-action="optimize"] {
    border-color: #fff;
    background: #fff;
    color: var(--brand);
    box-shadow: 0 12px 26px -10px rgba(0, 0, 0, 0.35);
  }

  .release-cta .release-tour-btn[data-action="optimize"]:hover {
    background: #fff;
    color: var(--brand-deep);
    box-shadow: 0 18px 36px -12px rgba(0, 0, 0, 0.45);
  }

  .release-cta .release-tour-btn[data-action="optimize"]:disabled {
    background: #fff;
    color: var(--brand);
    opacity: 0.55;
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
  }

  .release-cta .release-tour-btn[data-action="release"]:disabled {
    background: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.55);
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
  }

  /* ── Gestaffelter Einstieg ── */
  .planner-panel > *,
  .stops-panel > * {
    animation: importRise 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .planner-panel > *:nth-child(2),
  .stops-panel > *:nth-child(2) { animation-delay: 0.07s; }

  .planner-panel > *:nth-child(3),
  .stops-panel > *:nth-child(3) { animation-delay: 0.14s; }

  .planner-panel > *:nth-child(4) { animation-delay: 0.21s; }
  .planner-panel > *:nth-child(5) { animation-delay: 0.28s; }
  .planner-panel > *:nth-child(6) { animation-delay: 0.35s; }

  @media (max-width: 760px) {
    .planner-panel .action-optimize {
      min-height: 52px;
    }

    .planner-panel .route-metrics .after-card span {
      font-size: 30px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .planner-panel > *,
    .stops-panel > *,
    .optimization-status.available .status-dot {
      animation: none;
    }

    .planner-panel .action-optimize,
    .map-card,
    .release-cta .release-tour-btn {
      transition: none;
    }
  }
}

/* ═══ Freigabe-Karte im Optimieren-Zustand = Zwilling der Import-Karte ═══
   Solange die Tour nicht optimiert ist, ist diese Karte derselbe "weiter"-
   Schritt wie "Weiter zur Planung" im Import: Beeren-Verlauf, Text links,
   weisser Pill-Button rechts. Erst wenn optimiert wurde, wird daraus die
   dunkle Freigabe-Karte mit gruenem Button (der eigentliche Abschluss). */
@media screen {
  .release-cta:has(.release-tour-btn[data-action="optimize"]) {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
    box-shadow: 0 24px 50px -20px rgba(94, 12, 56, 0.5);
  }

  /* Button exakt wie der Import-Button: weisser Pill, Beeren-Text, rechts */
  .release-cta .release-tour-btn[data-action="optimize"] {
    min-height: 48px;
    padding: 0 26px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: var(--brand);
    font-weight: 800;
    box-shadow: 0 12px 26px -10px rgba(0, 0, 0, 0.35);
  }

  .release-cta .release-tour-btn[data-action="optimize"]:hover:not(:disabled) {
    background: #fff;
    color: var(--brand-deep);
    transform: translateY(-2px);
    box-shadow: 0 18px 36px -12px rgba(0, 0, 0, 0.45);
  }

  /* Deaktiviert: gleiche weisse Pille, nur der Text tritt zurueck —
     kein ausgegrauter Fremdkoerper. */
  .release-cta .release-tour-btn[data-action="optimize"]:disabled {
    background: #fff;
    color: rgba(138, 18, 83, 0.45);
    opacity: 1;
    transform: none;
    box-shadow: none;
    cursor: not-allowed;
  }
}

/* Eine Zeile statt Button unter dem Text (bisher width:100%). Erst ab 561px —
   auf dem Telefon bliebe fuer den Text sonst nur eine 74px-Spalte uebrig. */
@media screen and (min-width: 561px) {
  .release-cta {
    flex-wrap: nowrap;
    gap: 16px;
    justify-content: space-between;
    padding: 16px 20px;
  }

  .release-cta .release-tour-btn,
  .release-cta .reopen-tour-btn {
    width: auto;
    flex: 0 0 auto;
  }
}

@media screen and (max-width: 900px) {
  /* "Liste Leeren" und "Ziel einfuegen" nebeneinander auf einer Zeile. */
  .stops-panel .stops-tools {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 10px;
    width: 100%;
  }

  .stops-panel .stops-tools > label {
    grid-column: 1 / -1;
  }

  .stops-panel #routeNotice {
    grid-column: 1 / -1;
    margin: 0;
    max-width: none;
  }
}

/* Ab 901px schoben feste margin-right-Werte (70+120+20px) "Liste Leeren" und
   "Ziel einfuegen" aus dem Panel heraus. Stattdessen: Buttons per auto-Rand
   nach rechts, Zeile darf umbrechen statt zu ueberlaufen. */
@media screen and (min-width: 901px) {
  .stops-panel .stops-tools {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, auto);
    place-items: center;
    gap: 12px;
    width: 100%;
  }

  .stops-panel .stops-tools > * {
    width: 100%;
    margin: 0;
  }

  .stops-panel .stops-tools select {
    width: 100%;
    min-width: 0;
  }

  .stops-panel .tour-courier-control {
    grid-column: 1;
    grid-row: 1;
  }

  .stops-panel .address-search-control {
    grid-column: 2;
    grid-row: 1;
  }

  .stops-panel #clearBtn {
    grid-column: 3;
    grid-row: 1;
    width: fit-content;
    min-width: 0;
    max-width: 100%;
    justify-self: center;
    align-self: end;
    white-space: normal;
    line-height: 1.2;
    box-shadow: none;
  }

  .stops-panel .action-add-stop {
    grid-column: 1;
    grid-row: 2;
  }

  .stops-panel #routeNotice {
    grid-column: 2 / 4;
    grid-row: 2;
    display: grid;
    place-items: center;
    min-height: 44px;
    align-self: center;
    max-width: none;
    text-align: center;
  }
}

/* ═══ Freigabe-/Optimieren-Karte als schwebender Sticky-Button unten rechts ═══
   Das Redesign hatte die urspruenglich fixierte Leiste versehentlich auf
   position: relative gesetzt und damit in den Textfluss zurueckgeholt.
   Wieder fixiert — mit Randabstand, und oberhalb der Tab-Leiste (72px),
   sobald diese ab 900px eingeblendet wird. */
@media screen {
  .release-cta {
    position: fixed !important;
    top: auto !important;
    left: auto !important;
    right: 24px !important;
    bottom: 24px !important;
    width: max-content;
    max-width: min(580px, calc(100vw - 48px));
    margin: 0;
    z-index: 30;
  }
}

@media screen and (max-width: 900px) {
  .release-cta {
    left: 12px !important;
    right: 12px !important;
    /* v194: <=760px (Tabbar weg) regelt der Dateiende-Block; 761-900 bleibt 72px. */
    bottom: 72px !important;
    width: auto;
    max-width: none;
    min-height: 56px;
    padding: 8px 10px;
    gap: 8px;
  }

  .release-cta > span {
    min-width: 0;
  }

  .release-cta small {
    display: none;
  }

  .release-cta strong {
    font-size: 15px;
    line-height: 1.15;
  }

  .release-cta .release-tour-btn,
  .release-cta .reopen-tour-btn {
    min-height: 44px;
    padding: 0 14px;
    font-size: 14px;
    white-space: nowrap;
  }
}

/* Der ORS-Status sitzt jetzt zwischen "Tour optimieren" und "Tour drucken"
   statt als Fusszeile: keine Trennlinie mehr, zentriert wie der uebrige
   Spalteninhalt. */
@media screen {
  .planner-panel .optimization-status-card {
    padding: 0;
    border-top: 0;
  }

  .planner-panel .optimization-status {
    justify-content: center;
  }
}

/* ═══ Schrittleiste als eigene Reihe zwischen Header und Inhalt ═══
   Aus dem Header herausgeloest, damit die 1-2-3-Mechanik als eigenes Band
   ueber dem Arbeitsbereich steht — in jeder View sichtbar.
   Nur ab 901px: darunter uebernimmt weiterhin die untere Tab-Leiste, sonst
   staenden zwei Navigationen gleichzeitig auf dem Schirm. */
@media screen and (min-width: 901px) {
  .app-header {
    grid-template-columns: 1fr auto;
    margin-bottom: 0;
  }

  .step-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0;
    padding: 14px 24px 5px;
  }

  .step-flow i {
    width: 30px;
  }
}

/* ═══ Gewichtung umgekehrt: Schrittleiste vor Header ═══
   Der Header traegt nur Identitaet (Logo, Konto, Verwaltung) — die Schrittleiste
   traegt die eigentliche Mechanik der App. Bisher war es andersherum gewichtet:
   90px Header ueber einer 34px-Pillenreihe. Der Header schrumpft auf reine
   Kennzeichnung, die Schrittleiste bekommt Groesse und Luft. */
@media screen and (min-width: 901px) {
  .app-header {
    min-height: 62px;
  }

  .brand-lockup {
    height: 42px;
  }

  .brand-lockup strong {
    font-size: 15px;
  }

  /* Der 66px-Zahnrad-Button war das hoechste Element im Header und haette die
     neue Hoehe sonst wieder aufgedrueckt. */
  .app-header .settings-btn {
    width: auto;
    min-width: 0;
    min-height: 38px;
    padding: 0 14px;
    font-size: 14px;
  }

  .app-header .settings-btn .material-symbols-outlined {
    font-size: 19px;
  }

  .app-header .ghost-btn {
    min-height: 38px;
    font-size: 14px;
  }

  .step-flow {
    gap: 16px;
    padding: 18px 24px 5px;
  }

  .step-flow .step-pill {
    min-height: 50px;
    gap: 11px;
    padding: 0 24px 0 16px;
    font-size: 16px;
    letter-spacing: -0.01em;
  }

  /* Die noch nicht erreichten Schritte standen auf #a2938b/#f4ece7 — 2,3:1.
     Genau die muss man aber lesen koennen, um die Mechanik zu verstehen;
     groessere Schrift ohne Kontrast waere nur groesser, nicht wichtiger.
     --ink-soft bringt 5,5:1 (Ziffernkreis 4,6:1), ohne die Hierarchie
     gegenueber der aktiven Beeren-Pille aufzugeben. */
  .step-flow .step-pill:not(.active):not(.done) {
    color: var(--ink-soft);
  }

  .step-flow .step-pill span {
    width: 28px;
    height: 28px;
    font-size: 14px;
    font-weight: 800;
  }

  /* Verbinder waechst mit: bei groesseren Pillen wuerde ein 30px-Strich
     wie ein Rest aussehen statt wie ein Weg zwischen zwei Schritten. */
  .step-flow i {
    width: 52px;
    height: 3px;
  }
}

/* ═══ Heller Header (Landingpage-Farbe): Vordergrund zurueckziehen ═══
   Der Header trug einen Beeren-Verlauf und dafuer weissen Vordergrund. Jetzt
   liegt er auf --bg wie die Kopfzeile der Landingpage — weiss auf #faf6f3
   waere unlesbar, also zurueck auf die Textfarben der Palette. */
@media screen {
  .brand-lockup strong {
    color: var(--ink);
  }

  .brand-lockup > span {
    background: #e9e0da;
  }

  /* --muted kaeme auf #faf6f3 nur auf 3,3:1 — schlechter als das Weiss auf
     Beere vorher. --ink-soft haelt den sekundaeren Rang und schafft AA. */
  .app-header .save-state {
    color: var(--ink-soft);
  }

  /* Das Logo-PNG hat einen deckend weissen Hintergrund (kein Alpha). Auf dem
     hellen Header faellt das nicht mehr auf; die Rundung bleibt, damit die
     Kante zum Beige nicht hart schneidet. */
  .brand-lockup img {
    border-radius: 8px;
  }
}

/* "Adresse korrigieren" stand weiss auf weiss und war damit unsichtbar:
   .map-modal-content button (fuer den Schliessen-Knopf oben rechts gedacht)
   ueberschreibt den Beeren-Hintergrund von .primary-btn mit rgba(255,255,255,.96).
   .address-error-actions > button hebt davon nur position auf, nicht die Farbe. */
#addressErrorCorrectBtn {
  color: #fff;
}

/* Stopp ist zustellbar, sitzt aber auf der Basis-Hausnummer: kurzer Hinweis in
   Bernstein - Warnfarbe waere zu laut, die Adresse ist ja aufgeloest. */
@media screen {
  .stop-approx-meta {
    color: var(--amber);
    font-style: normal;
    font-weight: 800;
  }
}

/* ═══ Verbinder bekommen eine Richtung ═══
   Ein Strich zwischen zwei Pillen trennt genauso gut, wie er verbindet — die
   Reihenfolge 1-2-3 stand allein in den Ziffern. Die Spitze am rechten Ende
   macht aus dem Trennstrich einen Weg. Zusaetzlich faerbt sich der Verbinder
   hinter einem erledigten Schritt gruen ein, damit der zurueckgelegte Teil
   sichtbar bleibt (dieselbe Logik wie .step-pill.done). */
@media screen {
  .step-flow i {
    position: relative;
    overflow: visible;
  }

  .step-flow i::after {
    content: "";
    position: absolute;
    right: -1px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    border-radius: 1px;
    transform: translateY(-50%) rotate(45deg);
  }

  /* Der Strich zeichnet sich ueber background, die Spitze ueber currentColor —
     beide muessen aus derselben Quelle kommen, sonst driften sie auseinander. */
  .step-flow i {
    color: #e3d9d3;
  }

  .step-flow .step-pill.done + i {
    background: var(--green);
    color: var(--green);
    opacity: 0.55;
  }
}

@media screen and (min-width: 901px) {
  /* Groessere Verbinder (52x3) tragen auch eine groessere Spitze. */
  .step-flow i::after {
    width: 8px;
    height: 8px;
    border-top-width: 3px;
    border-right-width: 3px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .step-flow i::after {
    transition: border-color 0.15s ease;
  }
}

/* ============================================================
   BOTENANSICHT v2 — Ein Stopp. Ein Blick. Eine Geste.
   Nutzt die Tokens des @media-screen-Blocks (Beeren-Palette).
   ============================================================ */

@media screen {
  :root {
    /* Ein kuehles Akzentpaar fuer die Kuehlkette — sonst ist die Palette warm. */
    --cool-text: #2f5d7c;
    --cool-bg: #e8eff4;
    /* Lesbarkeitskorrektur: --muted (#93867e) erreicht auf Weiss nur 3,53:1. */
    --muted-aa: #766960;
  }

  /* ---------- Perlenkette im Hero ---------- */

  .courier-hero .done-rail {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    min-height: 18px;
    overflow-x: auto;
    scrollbar-width: none;
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
  }

  .courier-hero .done-rail::-webkit-scrollbar { display: none; }

  .courier-hero .done-rail .bead {
    flex: none;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--green-bright);
    color: #10331d;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55);
  }

  .courier-hero .done-rail .bead.miss { background: #e59b93; color: #4a1512; }

  .courier-hero .done-rail .bead.now {
    width: 9px;
    height: 9px;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3);
  }

  .courier-hero .done-rail .rest {
    flex: none;
    margin-left: 3px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
  }

  /* ---------- Karte des aktuellen Stopps ---------- */

  .courier-panel .delivery-position {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--brand);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .courier-panel .delivery-card address {
    display: block;
    margin: 12px 0 0;
    color: var(--ink);
    font-size: clamp(26px, 7.8vw, 32px);
    font-style: normal;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.08;
  }

  .courier-panel .delivery-card address .zusatz {
    display: block;
    margin-top: 6px;
    color: var(--muted-aa);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
  }

  .courier-panel .delivery-card h3 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 12px 0 0;
    color: var(--ink-soft);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.01em;
  }

  .courier-panel .delivery-card h3 .material-symbols-outlined {
    color: var(--muted-aa);
    font-size: 18px;
  }

  /* Strukturierte Hinweise: was vor dem Klingeln feststehen muss */
  .courier-panel .stop-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
  }

  .courier-panel .stop-flag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 99px;
    padding: 8px 11px 8px 9px;
    background: var(--line-soft);
    color: var(--ink-soft);
    font-size: 12.5px;
    font-weight: 800;
  }

  .courier-panel .stop-flag .material-symbols-outlined { font-size: 16px; }
  .courier-panel .stop-flag.pay  { background: var(--warn-bg);    color: var(--warn-text); }
  .courier-panel .stop-flag.cold { background: var(--cool-bg);    color: var(--cool-text); }
  .courier-panel .stop-flag.rx   { background: var(--brand-tint); color: var(--brand); }

  .courier-panel .delivery-note-view {
    margin: 14px 0 0;
    border: 0;
    border-left: 3px solid #d9b96a;
    border-radius: 14px;
    padding: 11px 13px;
    background: var(--notice-bg);
    color: var(--notice-text);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.45;
  }

  /* ---------- Warteschlange ---------- */

  .courier-panel .after-stop { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .courier-panel .after-stop > span:first-child { font-variant-numeric: tabular-nums; }

  .courier-panel .after-stop.high > span:first-child {
    background: var(--warn-bg);
    color: var(--warn-text);
  }

  .courier-panel .after-stop strong { font-size: 13px; }
  .courier-panel .after-stop small  { color: var(--muted-aa); }

  .courier-panel .after-stop .eta {
    color: var(--muted-aa);
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }

  /* ---------- Abschluss ---------- */

  .courier-panel .tour-finale {
    padding: 26px 14px 18px;
    text-align: center;
  }

  .courier-panel .tour-finale .seal {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    margin: 0 auto 20px;
    border-radius: 999px;
    background: var(--green-tint);
    color: var(--green);
    box-shadow: 0 10px 26px -10px rgba(30, 98, 52, 0.5);
  }

  .courier-panel .tour-finale .seal .material-symbols-outlined { font-size: 44px; }

  .courier-panel .tour-finale h3 {
    margin: 0;
    color: var(--ink);
    font-family: "Instrument Serif", Georgia, serif;
    font-size: clamp(28px, 7vw, 34px);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.08;
  }

  .courier-panel .tour-finale p {
    margin: 10px 0 0;
    color: var(--ink-soft);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
  }

  .courier-panel .tour-finale .summary-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 22px;
  }

  .courier-panel .tour-finale .summary-strip div {
    border: 0;
    border-radius: 14px;
    padding: 14px 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
  }

  .courier-panel .tour-finale .summary-strip span {
    display: block;
    font-size: 24px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
  }

  .courier-panel .tour-finale .summary-strip small {
    display: block;
    margin-top: 3px;
    color: var(--muted-aa);
    font-size: 10.5px;
    font-weight: 800;
  }

  .courier-panel .tour-finale .summary-strip .ok span  { color: var(--green); }
  .courier-panel .tour-finale .summary-strip .bad span { color: var(--danger); }

  .courier-panel .tour-finale .reset-last-btn {
    width: 100%;
    margin-top: 16px;
  }

  /* ============================================================
     DOCK — im Daumenbereich, ueber den Reitern
     ============================================================ */

  .courier-dock {
    position: fixed;
    left: 0;
    right: 0;
    /* Die Reiterleiste ist fixiert und liegt hoeher (z-index 20) — das Dock
       muss darueber sitzen, sonst verdeckt sie die Sekundaerzeile. */
    bottom: var(--courier-tabs-h, 68px);
    z-index: 19;
    display: grid;
    gap: 10px;
    border-top: 1px solid var(--line);
    background: var(--surface);
    padding: 12px 14px 14px;
    box-shadow: 0 -6px 20px -12px rgba(70, 15, 45, 0.3);
  }

  .courier-dock[hidden] { display: none; }

  .method-seg {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    border-radius: 99px;
    padding: 4px;
    background: var(--line-soft);
  }

  .method-seg .pill {
    position: absolute;
    z-index: 0;
    top: 4px;
    bottom: 4px;
    left: 4px;
    border-radius: 99px;
    background: var(--surface);
    box-shadow: 0 1px 4px rgba(70, 15, 45, 0.14);
    pointer-events: none;
  }

  .method-seg button {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    border: 0;
    border-radius: 99px;
    background: none;
    color: var(--muted-aa);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.01em;
    transition: color 0.18s ease;
  }

  .method-seg button .material-symbols-outlined { font-size: 17px; }
  .method-seg button[aria-pressed="true"] { color: var(--brand); }

  /* Die Primaeraktion ist eine Geste, kein Knopf: in der Jackentasche
     unausloesbar und mit Handschuh sicherer zu treffen. */
  .swipe-confirm {
    position: relative;
    height: 64px;
    overflow: hidden;
    border-radius: 16px;
    background: linear-gradient(160deg, var(--brand-deep), var(--brand));
    box-shadow: 0 4px 12px rgba(138, 18, 83, 0.28);
    touch-action: pan-y;
    user-select: none;
  }

  .swipe-confirm .fill {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, #14512a, var(--green));
    opacity: 0;
    pointer-events: none;
  }

  .swipe-confirm .cap {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding-left: 46px;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.01em;
    pointer-events: none;
  }

  .swipe-confirm .glint {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, 0.34) 50%, transparent 62%);
    transform: translateX(-100%);
    pointer-events: none;
  }

  .swipe-confirm .knob {
    position: absolute;
    z-index: 2;
    top: 6px;
    left: 6px;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 13px;
    background: #fff;
    color: var(--brand);
    box-shadow: 0 3px 10px rgba(70, 15, 45, 0.32);
    will-change: transform;
  }

  .swipe-confirm .knob .material-symbols-outlined { font-size: 26px; }
  .swipe-confirm.done .knob { color: var(--green); }

  .courier-dock .status-actions.secondary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .courier-dock .status-actions.secondary .ghost-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 50px;
    border-color: #f6f1ee;
    background: #f6f1ee;
    font-size: 14.5px;
  }

  .courier-dock .status-actions.secondary .ghost-btn .material-symbols-outlined { font-size: 19px; }
  .courier-dock .status-actions.secondary .nav-btn { color: var(--brand); }
  .courier-dock .status-actions.secondary .missed-status-btn { color: var(--danger); }

  /* ============================================================
     BOTTOM SHEET — der Ausnahmepfad, bewusst zwei Schritte
     ============================================================ */

  .reason-scrim {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(58, 34, 49, 0.48);
    opacity: 0;
  }

  .reason-scrim[hidden],
  .reason-sheet[hidden],
  .undo-toast[hidden] { display: none; }

  .reason-sheet {
    position: fixed;
    z-index: 41;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 24px 24px 0 0;
    background: var(--surface);
    padding: 10px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
    box-shadow: 0 -16px 44px -16px rgba(70, 15, 45, 0.45);
  }

  .reason-sheet .grab {
    width: 40px;
    height: 4px;
    margin: 0 auto 14px;
    border-radius: 99px;
    background: var(--line);
  }

  .reason-sheet h2 {
    margin: 0 0 4px;
    font-family: "Instrument Serif", Georgia, serif;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.1;
  }

  .reason-sheet > p {
    margin: 0 0 14px;
    color: var(--muted-aa);
    font-size: 13px;
    font-weight: 700;
  }

  .reason-list { display: grid; gap: 8px; }

  .reason-list .reason {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0 14px;
    background: var(--surface);
    box-shadow: var(--shadow);
    text-align: left;
    transition: transform 0.15s ease;
  }

  .reason-list .reason:active { transform: scale(0.98); }

  .reason-list .reason .ic {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--line-soft);
    color: var(--ink-soft);
    font-size: 20px;
  }

  .reason-list .reason[data-sev="hard"] .ic {
    background: var(--danger-bg);
    color: var(--danger);
  }

  .reason-list .reason strong {
    display: block;
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: -0.01em;
  }

  .reason-list .reason small {
    display: block;
    margin-top: 1px;
    color: var(--muted-aa);
    font-size: 12px;
    font-weight: 700;
  }

  .reason-sheet .status-other-field { display: block; margin-top: 10px; }
  .reason-sheet .status-other-field[hidden] { display: none; }

  .reason-sheet .status-other-field input {
    width: 100%;
    min-height: 52px;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0 14px;
    background: var(--bg);
    font-size: 15px;
    font-weight: 700;
  }

  .reason-sheet .status-other-field input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(138, 18, 83, 0.12);
    outline: none;
  }

  .reason-sheet .close {
    width: 100%;
    min-height: 48px;
    margin-top: 10px;
    border: 0;
    border-radius: 14px;
    background: none;
    color: var(--muted-aa);
    font-size: 14px;
    font-weight: 800;
  }

  /* ============================================================
     RUECKNAHME-HINWEIS
     ============================================================ */

  .undo-toast {
    position: fixed;
    z-index: 42;
    left: 12px;
    right: 12px;
    bottom: calc(var(--courier-tabs-h, 68px) + var(--courier-dock-h, 210px) + 12px);
    display: flex;
    align-items: center;
    gap: 11px;
    border-radius: 16px;
    padding: 11px 11px 11px 15px;
    background: var(--ink);
    color: #f7f1f4;
    box-shadow: 0 14px 36px -12px rgba(58, 34, 49, 0.6);
  }

  .undo-toast .msg {
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.35;
  }

  .undo-toast .msg em {
    display: block;
    margin-top: 1px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
  }

  .undo-toast .undo {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    min-height: 42px;
    overflow: hidden;
    border: 0;
    border-radius: 12px;
    padding: 0 15px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
  }

  .undo-toast .undo .bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.16);
    transform-origin: left center;
  }

  .undo-toast .undo span { position: relative; }

  .courier-pulse {
    position: fixed;
    z-index: 43;
    width: 20px;
    height: 20px;
    border: 2px solid var(--green-bright);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
  }

  /* ---------- Sehr schmale Geraete ---------- */
  @media (max-width: 359px) {
    .method-seg button .material-symbols-outlined { display: none; }
    .method-seg button { font-size: 12.5px; }
    .courier-dock .status-actions.secondary .ghost-btn { font-size: 13px; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .swipe-confirm .glint { display: none; }
}

@media screen {
  /* Der letzte Stopp der Warteschlange darf nicht unter dem Dock verschwinden. */
  body.mobile-view-delivery .courier-panel {
    padding-bottom: calc(var(--courier-dock-h, 210px) + 18px);
  }
}

@media screen {
  /* Der Datums-Chip ist inline-flex: ohne gap klebt "Tour vom" am Datum. */
  .courier-title-row > span {
    gap: 4px;
  }

  /* Bestand: #a2938b erreicht auf --bg nur 2,76:1. */
  .courier-panel .after-list h3 {
    color: var(--muted-aa);
  }
}

@media screen {
  /* tabular-nums gibt dem Dezimalkomma eine volle Ziffernbreite ("3, 1").
     Die drei Kacheln sind ohnehin unterschiedlich breit — Tabellenziffern
     bringen hier nichts. */
  .courier-panel .tour-finale .summary-strip span {
    font-variant-numeric: normal;
  }
}

@media screen {
  /* Bestand: .courier-hero span setzt display: inline-flex und ueberstimmt
     damit das hidden-Attribut — #declinedCount erschien als "0"-Chip. */
  .courier-hero [hidden] {
    display: none;
  }
}

@media screen {
  /* Der Wischbalken ist per Leertaste bedienbar — dann muss er den Fokus zeigen. */
  .swipe-confirm:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 3px;
  }
}

@media screen {
  /* Der Header traegt jetzt einen dunklen Bordeaux-Verlauf. Seine Inhalte
     waren auf den hellen --bg gefaerbt (--ink auf Bordeaux: 1,09:1). */
  .app-header .brand-lockup strong {
    color: #fff;
  }

  .app-header .save-state,
  .app-header #currentUser {
    color: rgba(255, 255, 255, 0.88);
  }

  .app-header .brand-lockup > span {
    background: rgba(255, 255, 255, 0.3);
  }
}

@media screen {
  /* Notfallmeldung im Dock, wenn die Animationsbibliothek fehlt. */
  .dock-broken {
    margin: 0;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--danger-bg);
    color: var(--ink);
    font-weight: 700;
    text-align: center;
  }
}

@media screen {
  /* Suche und Botenfilter stehen nebeneinander, sobald Platz da ist. */
  .history-filters {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: end;
    margin: 0 0 14px;
  }

  .history-filters .history-search {
    margin: 0;
  }

  .history-courier {
    display: grid;
    gap: 6px;
  }

  .history-courier span {
    color: var(--muted-aa);
    font-size: 12px;
    font-weight: 800;
  }

  .history-courier select {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 12px;
    font: inherit;
    background: var(--surface);
    color: var(--ink);
  }

  .history-courier select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(138, 18, 83, 0.14);
    outline: none;
  }

  /* Der Bote sieht ohnehin nur eigene Touren — ein Botenfilter waere sinnlos. */
  body.role-courier .history-courier {
    display: none;
  }

  @media (min-width: 720px) {
    .history-filters {
      grid-template-columns: 1fr 240px;
    }
  }
}

@media screen {
  /* Ab Tablet steht Symbol neben Beschriftung — ohne Abstand liest sich die
     Ligatur mit dem Text zusammen ("logoutAbmelden"). */
  .logout-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
}

@media screen and (max-width: 480px) {
  /* Kopfleiste fuer das Handy. Steht bewusst am Dateiende: weiter oben wurde
     sie von spaeteren Regeln ueberschrieben (Rand fiel auf 0, Hoehe auf 100px).

     Volle Breite ueber Viewport-Einheiten statt negativer Raender in
     Elternbreite — die Huelle bekommt je nach Rolle und Geraet ein
     Seitenpolster (env(safe-area-inset-*)), das die Leiste sonst einrueckt. */
  .app-header {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-height: 58px;
    padding:
      max(8px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right))
      8px max(14px, env(safe-area-inset-left));
    box-shadow: 0 10px 24px -18px rgba(94, 12, 56, 0.5);
  }

  .app-header .brand-lockup {
    display: none;
  }

  .app-header #currentUser {
    display: inline-block;
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
  }

  /* Verwaltung und Abmelden werden zu quadratischen Symbolknoepfen.
     Die Beschriftung steckt in aria-label und title, geht also nicht
     verloren — nur der Platz, den sie auf 375px gekostet hat. */
  /* gap: 0 muss sein: die 6px aus der Tablet-Regel bleiben im Grid als
     Zeilenabstand stehen und schieben das Symbol nach oben aus der Mitte. */
  .app-header .plan-btn,
  .app-header .tourlog-btn,
  .app-header .settings-btn,
  .app-header .logout-btn {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    gap: 0;
    border-radius: 12px;
  }

  /* Nur font-size: 0 wuerde die Beschriftung als zweite, flache Rasterzeile
     stehen lassen — das Symbol saesse weiterhin darueber statt mittig.
     Der Knopfname steckt in aria-label und title. */
  .app-header .plan-btn .btn-label,
  .app-header .tourlog-btn .btn-label,
  .app-header .settings-btn .btn-label,
  .app-header .logout-btn .btn-label {
    display: none;
  }

  .app-header .plan-btn .material-symbols-outlined,
  .app-header .tourlog-btn .material-symbols-outlined,
  .app-header .settings-btn .material-symbols-outlined,
  .app-header .logout-btn .material-symbols-outlined {
    margin: 0;
    font-size: 22px;
  }
}

/* ═══ Desktop-Kopfleiste wie die Landingpage ═══
   landing.html: header.nav liegt auf --bg und schliesst im gescrollten
   Zustand nur mit einer Haarlinie ab (0 1px 0 rgba(60,30,50,.07)), Logotext
   in --brand, Navigation in --ink-soft. Der Seitenhintergrund ist ohnehin
   schon --bg — es fehlte nur der Beerenverlauf im Header. Die weissen
   Vordergruende aus der Bordeaux-Schicht muessen hier zurueckgedreht werden,
   sonst steht Weiss auf Beige. */
@media screen and (min-width: 901px) {
  .app-header {
    background: transparent;
    box-shadow: none;
  }

  .app-header .brand-lockup strong {
    color: var(--brand);
  }

  .app-header .save-state,
  .app-header #currentUser {
    color: var(--ink-soft);
  }

  .app-header .brand-lockup > span {
    background: var(--line);
  }
}

/* ═══ Kopfleiste und Tourbox ohne Farbkante ═══
   Der Header lief unten in --brand aus, die Tourbox begann oben in
   --brand-deep — heller trifft dunkel, dazu 10px Beige und ein Schlagschatten
   dazwischen. Header endet jetzt in derselben Farbe, mit der die Box beginnt,
   und die Box verlaeuft senkrecht statt schraeg, damit die Naht auch am
   rechten Rand aufgeht. */
@media screen and (max-width: 480px) {
  body.role-courier .app-header {
    margin-bottom: 0;
    background: var(--brand-deep);
    box-shadow: none;
  }

  body.role-courier .courier-hero {
    background: linear-gradient(to bottom, var(--brand-deep), var(--brand));
  }
}

/* ═══ Mobile Fussleiste: Hilfe, Lieferung, Historie in gleichen Dritteln ═══
   Der Hilfe-Knopf schwebte als fixiertes Element unten links ueber der
   Reiterleiste und verdeckte "Lieferung". Statt ihn im DOM in die Leiste zu
   verschieben, bekommt die Leiste ein drittes, leeres Feld ganz links - genau
   dort sitzt der Knopf jetzt, mittig im eigenen Drittel und auf Leistenhoehe. */
@media screen and (max-width: 900px) {
  /* Polster und Spalte hier festgeschrieben, weil der Hilfe-Knopf als
     fixiertes Element dieselbe Rasterbreite nachrechnen muss. */
  body.role-courier .mobile-tabs {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 8px 8px 10px;
  }

  body.role-courier .mobile-tabs button[data-view="delivery"] {
    grid-column: 2;
  }

  body.role-courier .mobile-tabs button[data-view="history"] {
    grid-column: 3;
  }

  /* 28px = 2x8px Polster + 2x6px Spaltenabstand der Leiste. Damit liegt der
     Knopf exakt auf der Mitte der ersten Rasterspalte. */
  body.role-courier.authenticated .support-widget {
    left: 8px;
    right: auto;
    bottom: 6px;
    display: flex;
    justify-content: center;
    width: calc((100% - 28px) / 3);
  }

  /* Das Hilfe-Panel darf nicht auf ein Drittel schrumpfen: es haengt jetzt
     absolut ueber dem Knopf statt im Fluss der schmalen Spalte. */
  body.role-courier .support-panel {
    position: absolute;
    bottom: 100%;
    left: max(12px, env(safe-area-inset-left));
    width: min(360px, calc(100vw - 24px));
    max-width: none;
  }
}

/* Testzugang: schmaler Hinweis zwischen Kopf und Schrittleiste. Kein Modal -
   der Satz muss waehrend der ganzen Testtour lesbar bleiben. */
.demo-banner {
  margin: 0 clamp(16px, 4vw, 40px) 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--brand-tint);
  border: 1px solid var(--line);
  color: var(--brand);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.45;
}

.demo-banner[hidden] { display: none; }

/* ═══ Kopfzone und Tourfortschritt (Designstand 6a) ═══
   Die dreiteilige Pillenreihe ist einer Fortschrittskarte gewichen: Import,
   Optimierung, Tour laeuft. Historie ist kein Schritt mehr, sondern ein
   Nachschlagewerk — sie steht als "Tour-Log" neben "Verwaltung" in der
   Kopfzeile. Unter 901px bleibt es bei der unteren Reiterleiste, zwei
   Navigationen gleichzeitig waren schon vorher zu viel. */
.tour-progress,
.running-panel {
  display: none;
}

/* Die Disposition hat mit "Tour laeuft" einen vierten Reiter — bei drei
   Spalten waere er in eine zweite Zeile gerutscht und haette die Leiste
   verdoppelt. */
@media screen and (max-width: 900px) {
  body.role-dispatch .mobile-tabs {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media screen {
  body.mobile-view-running .import-panel,
  body.mobile-view-running .planner-panel,
  body.mobile-view-running .stops-panel,
  body.mobile-view-running .courier-panel,
  body.mobile-view-running .history-panel {
    display: none;
  }

  body.mobile-view-running .running-panel {
    display: block;
    grid-column: 1 / -1;
  }

  .running-summary {
    margin-bottom: 16px;
  }

  .running-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 18px;
  }

  .running-card {
    display: grid;
    align-content: start;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--line-soft);
    padding: 16px 18px;
  }

  .running-card p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
  }

  .running-card .ghost-btn { justify-self: start; }
  .running-message-history { display: grid; gap: 4px; }
  .push-message-status { display: block; color: var(--muted-aa); font-size: 12px; line-height: 1.35; }
  .push-message-status.sent { color: #18794e; }
  .push-message-status.failed { color: #a33b2c; }
  .push-message-preview { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--line-soft); }
.push-message-modal-content { max-width: 520px; }
.push-notification-modal-content { max-width: 520px; }
.push-notification-modal-content #pushNotificationModalBody { white-space: pre-wrap; }

  .running-kicker {
    color: var(--brand);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
  }

.running-position {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.running-position-details {
  min-width: 0;
  display: grid;
  gap: 3px;
}

  .running-position strong {
    font-size: 16px;
  }

  .running-position em {
    color: var(--muted-aa);
    font-size: 12.5px;
    font-style: normal;
    font-weight: 700;
  }

  .running-stops {
    display: grid;
    gap: 8px;
  }

  .running-stop {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 10px 14px;
  }

  .running-stop b {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--line-soft);
    font-size: 12px;
  }

  .running-stop span {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .running-stop small {
    color: var(--ink-soft);
    font-size: 12.5px;
    font-weight: 600;
  }

  .running-stop em {
    color: var(--muted-aa);
    font-size: 12.5px;
    font-style: normal;
    font-weight: 800;
  }

  .running-stop.status-delivered b {
    background: var(--green-tint);
    color: var(--green);
  }

  .running-stop.status-missed b,
  .running-stop.status-declined b {
    background: var(--warn-bg);
    color: var(--warn-text);
  }
}

.app-wordmark {
  display: none;
}

@media screen and (min-width: 901px) {
  /* Zwei Bereiche: Apothekenlogo, Aktionen. */
  .app-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    min-height: 84px;
  }

  .brand-lockup {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    height: auto;
  }

  .brand-lockup img {
    width: auto;
    height: 34px;
    max-height: 34px;
  }

  .app-header .plan-btn,
  .app-header .tourlog-btn,
  .app-header .settings-btn,
  .app-header .logout-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    min-width: 0;
    min-height: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 18px;
    background: var(--surface);
    color: var(--brand);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
  }

  .app-header .plan-btn:hover,
  .app-header .tourlog-btn:hover,
  .app-header .settings-btn:hover {
    border-color: var(--brand);
    background: var(--brand-tint);
  }

  .app-header .logout-btn {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
  }

  .app-header .logout-btn:hover {
    border-color: var(--brand-deep);
    background: var(--brand-deep);
  }

  .app-header .plan-btn .material-symbols-outlined,
  .app-header .tourlog-btn .material-symbols-outlined,
  .app-header .settings-btn .material-symbols-outlined,
  .app-header .logout-btn .material-symbols-outlined {
    font-size: 18px;
  }

  /* Umgekehrte Karte: der Beerenverlauf der Webseite traegt die Flaeche, der
     Vordergrund wird hell. Damit ist die Leiste das farbige Element der Seite
     und nicht mehr eine weisse Karte unter einem weissen Header. */
  /* Dieselbe Breite wie der Arbeitsbereich, damit Karte und Inhalt auf einer
     Kante stehen. Die Werte spiegeln die Regeln von .workspace: erst
     calc(100% - 40px), in den Ansichten dann 84% zentriert. */
  .tour-progress {
    display: block;
    width: calc(100% - 40px);
    margin: 9px 20px 0;
    border: 0;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
    box-shadow: var(--shadow-strong);
    /* 70px statt 26px seitlich: Beschriftung, Schiene und Stationen ruecken
       zusammen zur Mitte, die Karte behaelt ihre Breite. Ein Polster am
       Container statt Raender an jedem Kind - sonst muessten Kopfzeile,
       Schiene und Stationsreihe denselben Wert dreimal tragen. */
    padding: 14px 70px;
    color: #fff;
  }

  /* Die Verwaltung ist mitgenommen, obwohl dort kein Arbeitsbereich steht:
     sonst springt die Karte beim Oeffnen der Verwaltung auf die volle Breite. */
  body.mobile-view-plan .tour-progress,
  body.mobile-view-route .tour-progress,
  body.mobile-view-history .tour-progress,
  body.mobile-view-running .tour-progress {
    width: 84%;
    margin-inline: auto;
  }

  body.mobile-view-admin .tour-progress {
    display: none;
  }

  body.role-courier .tour-progress {
    display: none;
  }

  /* Kopfzeile und Schiene auf 80% der Kartenbreite - dieselbe Einrueckung
     fuer beide, damit sie optisch zusammengehoeren statt der Kopfzeile ueber
     der vollen Breite und nur der Schiene eingerueckt. */
  .tour-progress-head,
  .tour-progress-rail {
    width: 80%;
    margin-inline: auto;
  }

  .tour-progress-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
  }

  .tour-progress-kicker {
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
  }

  .tour-progress-hint {
    color: rgba(255, 255, 255, 0.72);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
  }

  .tour-progress-rail {
    position: relative;
    height: 63px;
  }

  .tour-progress-track,
  .tour-progress-fill {
    position: absolute;
    top: 18px;
    left: 0;
    height: 6px;
    border-radius: 3px;
  }

  .tour-progress-track {
    right: 0;
    background: rgba(255, 255, 255, 0.22);
  }

  .tour-progress-fill {
    width: 0;
    background: #fff;
    transition: width 0.4s ease;
  }

  /* Der Wagen faehrt dem Balken voraus und haelt 45px vor dem naechsten Punkt.
     Er sitzt ueber dem Strich, nicht auf dessen Spitze - die Linie laeuft
     durch und endet erst am Punkt. 44px Wagenbreite plus 45px Abstand. */
  .tour-progress-van {
    position: absolute;
    top: -2px;
    left: 0;
    z-index: 1;
    color: #fff;
    line-height: 0;
    transform: translateX(-89px);
    transition: left 0.4s ease;
  }

  /* Fenster und Radnaben nehmen die Kartenfarbe an - auf einem weissen Wagen
     waeren sie sonst unsichtbar. */
  .tour-progress-van .van-detail {
    fill: var(--brand-deep);
  }

  .tour-progress-stations {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
  }

  .tour-station {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Verkuerzt den Abstand zwischen den Stationen um rund 30% gegenueber
       reinem justify-content:space-between. Ueber clamp() statt eines festen
       Werts, weil die Luecke bei 901px schon auf wenige Pixel zusammenlaeuft -
       ein fester Wert haette dort zur Ueberlappung gefuehrt. Bei 1280px
       (Referenzbreite des Entwurfs) macht das rund 30% der urspruenglichen
       Luecke aus, oberhalb bleibt die Verkuerzung gedeckelt. */
    margin-inline: clamp(0px, 14vw - 128px, 48px);
    width: 200px;
    height: 63px;
    border: 0;
    border-radius: 14px;
    padding-top: 8px;
    background: transparent;
    cursor: pointer;
    transition: background 0.15s ease;
  }

  .tour-station:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  .tour-station:focus-visible {
    outline-color: #fff;
  }

  .tour-station-dot {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    background: var(--brand-deep);
    color: var(--brand-deep);
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
  }

  .tour-station.active .tour-station-dot,
  .tour-station.done .tour-station-dot {
    border-color: #fff;
  }

  .tour-station.done .tour-station-dot {
    border-color: var(--green);
    background: var(--green);
    color: var(--green);
  }

  .tour-station.done .tour-station-dot::after {
    content: "✓";
    color: #fff;
    font-weight: 900;
    line-height: 1;
  }

  /* Nicht dunkler als 0.72: darunter faellt 13px auf dem helleren Ende des
     Verlaufs (--brand) unter 4,5:1 und damit aus AA heraus. */
  .tour-station-label {
    margin-top: 5px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    font-weight: 800;
  }

  .tour-station.active .tour-station-label,
  .tour-station.done .tour-station-label {
    color: #fff;
  }

  .tour-station.active .tour-station-label {
    text-decoration: underline;
    text-decoration-color: #fff;
    text-underline-offset: 3px;
  }

  .tour-station-time {
    display: block;
    margin-top: 2px;
    min-height: 14px;
    color: rgba(255, 255, 255, 0.75);
    font-family: ui-monospace, Menlo, monospace;
    font-size: 10.5px;
    font-weight: 700;
  }

  /* Der Sprunghinweis erscheint auch bei Tastaturfokus — nicht nur beim
     Zeigen, sonst waere er fuer die Tastatur unsichtbar. */
  .tour-station::after {
    content: attr(data-tip);
    position: absolute;
    top: 66px;
    left: 50%;
    border-radius: 8px;
    padding: 6px 10px;
    background: #fff;
    color: var(--brand-deep);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%);
    transition: opacity 0.12s ease;
  }

  .tour-station:hover::after,
  .tour-station:focus-visible::after {
    opacity: 1;
  }
}

/* Tourfortschritt — abgestimmte Apotour-Routenansicht. */
@media screen and (min-width: 901px) {
  body.mobile-view-admin .admin-panel {
    width: 84%;
    margin-inline: auto;
  }

  .tour-progress { overflow: hidden; border-radius: 10px; padding-block: 11px 12px; }
  .tour-progress-head, .tour-progress-rail { width: 88%; }
  .tour-progress-head { margin-bottom: 0; }
  .tour-progress-kicker { font-size: 9.5px; letter-spacing: 1.1px; }
  .tour-progress-hint { font-size: 10px; }
  .tour-progress-rail { height: 73px; }
  .tour-progress-route { position: absolute; inset: 0; width: 100%; height: 60px; overflow: visible; }
  .tour-progress-route path { fill: none; stroke-linecap: round; stroke-width: 4; }
  .tour-progress-route .tour-progress-track,
  .tour-progress-route .tour-progress-fill {
    position: static;
    width: auto;
    height: auto;
    inset: auto;
    border-radius: 0;
    background: none;
  }
  .tour-progress-track { stroke: rgba(255, 255, 255, 0.2); }
  .tour-progress-fill {
    stroke: #fff;
    stroke-dasharray: 0 100;
    filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.35));
    transition: stroke-dasharray 0.7s cubic-bezier(0.22, 0.8, 0.22, 1);
  }
  .tour-progress-stations { inset: 0; top: 0; display: block; }
  .tour-station {
    position: absolute;
    top: 16px;
    width: 120px;
    height: auto;
    margin: 0;
    padding: 0 5px 4px;
    transform: translateX(-50%);
  }
  .tour-station:nth-child(1) { left: 6%; }
  .tour-station:nth-child(2) { left: 50%; }
  .tour-station:nth-child(3) { left: 94%; }
  .tour-station-dot {
    position: relative;
    width: 24px;
    height: 24px;
    border-width: 1.5px;
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.06);
  }
  .tour-station-dot::before {
    content: "";
    position: absolute;
    inset: -4px;
    border: 1px solid currentColor;
    border-radius: 50%;
    opacity: 0.35;
  }
  .tour-station-label { margin-top: 4px; font-size: 11px; text-decoration: none !important; }
  .tour-station-time { margin-top: 1px; min-height: 9px; font-size: 8.5px; }
  .tour-station::after { top: 43px; padding: 4px 6px; font-size: 9px; }
  .tour-progress-rail[data-step="0"] { --tour-van-left: 6%; }
  .tour-progress-rail[data-step="1"] { --tour-van-left: 50%; }
  .tour-progress-rail[data-step="2"] { --tour-van-left: 94%; }
  .tour-progress-van {
    top: 27.5px;
    left: var(--tour-van-left);
    width: 30px;
    color: #fff;
    transform: translate(-53px, -100%);
    filter: drop-shadow(0 4px 4px rgba(36, 0, 19, 0.3));
    transition: left 0.7s cubic-bezier(0.22, 0.8, 0.22, 1);
  }
  .tour-progress-van svg { width: 30px; height: auto; }
  .tour-progress-van svg > * {
    stroke: #171014;
    stroke-width: 1.1;
    stroke-linejoin: round;
    paint-order: stroke fill;
  }
}

/* Import: derselbe schwebende Sticky-CTA wie in der Optimieren-Ansicht. */
@media screen {
  .import-cta {
    position: fixed;
    top: auto;
    left: auto;
    right: 24px;
    bottom: 24px;
    width: max-content;
    max-width: min(580px, calc(100vw - 48px));
    min-height: 64px;
    margin: 0;
    z-index: 30;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
  }

  .import-cta .primary-btn {
    width: auto;
    min-height: 48px;
    flex: 0 0 auto;
    padding: 0 26px;
  }
}

@media screen and (max-width: 900px) {
  .import-cta {
    left: 12px;
    right: 12px;
    bottom: 72px;
    width: auto;
    max-width: none;
    min-height: 56px;
    padding: 8px 10px;
    gap: 8px;
  }

  .import-cta strong {
    min-width: 0;
    font-size: 13px;
    line-height: 1.2;
  }

  .import-cta .primary-btn {
    width: auto;
    min-height: 44px;
    padding: 0 14px;
    font-size: 14px;
  }
}

@media screen and (max-width: 420px) {
  .import-cta strong {
    max-width: 92px;
  }

  .import-cta .primary-btn {
    padding-inline: 10px;
    font-size: 13px;
  }
}

@media screen and (max-width: 560px) {
  .import-cta {
    flex-direction: row;
    align-items: center;
  }
}

/* Beide schwebenden Tour-Aktionen gehören nicht in den Import-Schritt.
   Dort bleibt ausschließlich die Import-Karte mit ihrem eigenen CTA sichtbar. */
body.mobile-view-plan .release-cta,
body.mobile-view-plan .release-cta {
  display: none !important;
}

/* Zentrale Startseite: Arbeitsbereiche bleiben als isolierte Views erhalten. */
.home-panel { display: none; }
body.role-courier .home-panel { display: none !important; }
body.mobile-view-home .home-panel { display: block; grid-column: 1 / -1; }
body.mobile-view-home .tour-progress { display: none; }
body.mobile-view-home .release-cta { display: none !important; }
body.mobile-view-home .workspace > .view-panel:not(.home-panel) { display: none !important; }
body.mobile-view-plan .workspace > .view-panel:not(.import-panel) { display: none !important; }
body.mobile-view-network .workspace > .view-panel:not(.network-panel) { display: none !important; }
body.mobile-view-network .network-panel { display: block; grid-column: 1 / -1; }
.network-panel { display: none; padding: 28px 32px 36px; }
.network-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.network-panel-head h2 { margin: 6px 0; font-size: 30px; }
.network-panel-head p { margin: 0; color: var(--muted); }
.network-workflow { display: flex; gap: 10px; flex-wrap: wrap; margin: 24px 0; }
.network-workflow span { padding: 9px 13px; border-radius: 999px; background: #edf5fd; color: #356b9c; font-size: 12px; font-weight: 700; }
.network-workflow .done { background: #dceafb; }
.network-tours-list { display: grid; gap: 10px; }
.network-tour-row { width: 100%; display: grid; grid-template-columns: 42px 1fr auto 24px; gap: 14px; align-items: center; padding: 16px; border: 1px solid #cfe0f2; border-radius: 16px; background: #f5faff; color: var(--ink); text-align: left; cursor: pointer; }
.network-tour-row .material-symbols-outlined { color: #356b9c; }
.network-tour-row strong, .network-tour-row small { display: block; }
.network-tour-row small { color: var(--muted); font-size: 12px; margin-top: 3px; }
.network-tour-row b { color: #23744d; font-size: 12px; }
.network-empty { padding: 28px; border: 1px dashed #cfe0f2; border-radius: 16px; color: var(--muted); }
.network-empty strong, .network-empty span { display: block; }
.network-static-row { cursor: default; }
.network-inbox .network-tour-row + .network-pending-row, .network-empty-note { margin-top: 10px; }
.network-empty-note { color: var(--muted); font-size: 13px; padding: 0 4px; }
@media (max-width: 620px) { .network-panel { padding: 22px 18px; } .network-panel-head { display: block; } .network-panel-head .primary-btn { width: 100%; margin-top: 16px; } .network-tour-row { grid-template-columns: 34px 1fr 20px; } .network-tour-row > span:nth-child(3) { display: none; } }

/* Verbundtour: Tourtyp wird sichtbar im Import-Schritt gewaehlt. */
.tour-scope-card { margin: 22px 0; padding: 18px; border: 1px solid #eadfe2; border-radius: 18px; background: #fffafc; }
.tour-scope-heading { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.tour-scope-heading h3 { margin: 0; font-size: 17px; }
.scope-badge { color: #8e0d52; background: #f8e6ef; border-radius: 999px; padding: 6px 10px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.tour-scope-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 15px; }
.scope-option { display: flex; gap: 10px; align-items: flex-start; padding: 13px; border: 1px solid #eadfe2; border-radius: 14px; background: #fff; cursor: pointer; }
.scope-option.active { border-color: #8e0d52; background: #fff1f7; box-shadow: 0 0 0 2px #f5d8e7; }
.scope-option[hidden] { display: none !important; }
.scope-option input { margin-top: 3px; accent-color: #8e0d52; }
.scope-option strong, .scope-option small, .pharmacy-check strong, .pharmacy-check small { display: block; }
.scope-option small, .pharmacy-check small, .scope-hint { color: #000; font-size: 12px; margin-top: 3px; }
.network-tour-options { margin-top: 16px; padding-top: 15px; border-top: 1px solid #eadfe2; }
.participating-pharmacies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pharmacy-check { display: flex; gap: 9px; padding: 10px; border: 1px solid #d8eadf; border-radius: 12px; background: #e8f5ee; cursor: pointer; }
.pharmacy-check input[type="checkbox"] { accent-color: #23744d; }
.home-secondary-actions { margin: 16px 0 4px; }
.home-secondary-action { width: 100%; min-height: 74px; display: flex; align-items: center; gap: 14px; padding: 20px; border: 1px solid #cfe0f2; border-radius: 18px; background: #edf5fd; color: var(--ink); text-align: left; cursor: pointer; box-shadow: 0 14px 26px rgba(74, 123, 169, .14); transition: transform .18s ease, box-shadow .18s ease; }
.home-secondary-action:hover { border-color: transparent; box-shadow: 0 16px 28px rgba(91, 26, 63, .14); transform: translateY(-3px); }
.home-secondary-action .material-symbols-outlined { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: #dceafb; color: #356b9c; font-size: 25px; }
.home-secondary-action strong, .home-secondary-action small { display: block; }
.home-secondary-action small { margin-top: 2px; color: var(--muted); font-size: 12px; }
.home-secondary-action > span:last-child { margin-left: auto; color: #356b9c; font-size: 23px; }
body.role-courier .home-secondary-actions { display: none; }
@media (max-width: 620px) { .tour-scope-options, .participating-pharmacies { grid-template-columns: 1fr; } .tour-scope-heading { display: block; } .scope-badge { display: inline-block; margin-top: 10px; } }
body.mobile-view-route .workspace > .view-panel:not(.planner-panel):not(.stops-panel) { display: none !important; }
body.mobile-view-running .workspace > .view-panel:not(.running-panel) { display: none !important; }
body.mobile-view-history .workspace > .view-panel:not(.history-panel) { display: none !important; }
body.mobile-view-admin .workspace > .view-panel:not(.admin-panel) { display: none !important; }
body.mobile-view-running .release-cta { display: none !important; }
body.mobile-view-admin .release-cta { display: none !important; }
body.mobile-view-history .tour-progress,
body.mobile-view-history .release-cta { display: none !important; }

.running-home-cta { display: none; }
.running-home-cta[hidden] { display: none !important; }
body.mobile-view-running .running-home-cta {
  position: fixed;
  right: 50px;
  bottom: 18px;
  z-index: 18;
  display: flex;
  align-items: center;
  gap: 34px;
  width: max-content;
  max-width: calc(100vw - 80px);
  padding: 14px 18px 14px 22px;
  border-radius: 22px;
  background: var(--dark-panel);
  color: #fff;
  box-shadow: 0 14px 34px rgba(58, 34, 49, .18);
}
.running-home-cta > span { display: grid; gap: 2px; }
.running-home-cta strong { font-family: "Instrument Serif", Georgia, serif; font-size: 19px; font-weight: 600; }
.running-home-cta small { color: rgba(255, 255, 255, .75); font-size: 12px; }
.running-home-cta button { min-height: 46px; padding: 0 24px; border: 0; border-radius: 999px; background: #fff; color: var(--brand); font-weight: 800; }
.running-home-cta button:hover { background: #fff; color: var(--brand-deep); }
.tour-station { cursor: default; }
.tour-station:hover { background: transparent; }
.tour-station::after { display: none !important; }
.running-header-actions { align-items: end; }
.running-tour-selector { display: grid; gap: 4px; min-width: 240px; margin-right: 50px; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.running-tour-selector select { min-height: 44px; padding: 0 34px 0 16px; border: 2px solid #efe4ea; border-radius: 14px; background: #fff; color: var(--brand); font: inherit; font-size: 16px; font-weight: 800; letter-spacing: 0; text-transform: none; box-shadow: 0 4px 12px rgba(138, 18, 83, .08); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.running-tour-selector select:hover { border-color: var(--brand); box-shadow: 0 8px 18px rgba(138, 18, 83, .12); }
.running-tour-selector select:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(138, 18, 83, .14); }

.home-panel {
  padding: clamp(22px, 4vw, 42px);
  background: linear-gradient(145deg, #fff 0%, #fbf5f7 100%);
}

.home-intro { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 24px; }
.home-kicker { color: var(--brand); font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.home-user-identity { letter-spacing: .04em; text-transform: none; }
.home-intro h1 { margin: 7px 0 4px; color: var(--ink); font-size: clamp(28px, 4vw, 44px); letter-spacing: -.04em; }
.home-intro p { margin: 0; color: var(--muted); }
.home-intro time { color: var(--brand); font-size: 12px; font-weight: 800; text-transform: capitalize; }
.home-tiles { display: grid; grid-template-columns: 1.25fr .875fr .875fr; gap: 14px; }
.home-tile { min-height: 190px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: #fff; color: var(--ink); text-align: left; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.home-tile:hover { transform: translateY(-3px); box-shadow: 0 16px 28px rgba(91, 26, 63, .14); }
.home-tile-primary { color: #fff; border-color: transparent; background: linear-gradient(145deg, var(--brand-deep), var(--brand)); box-shadow: 0 14px 26px rgba(138, 18, 83, .22); }
.home-tile-live { background: #eaf5ee; border-color: #cce7d3; }
.home-tile-log { background: #fff4e8; border-color: #f0dfca; }
.home-tile-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: #f4e8ed; color: var(--brand); }
.home-tile-primary .home-tile-icon { color: #fff; background: rgba(255,255,255,.18); }
.home-tile-live .home-tile-icon { color: #267449; background: #d2ebdd; }
.home-tile-log .home-tile-icon { color: #a96832; background: #f6e2c8; }
.home-tile > span:nth-child(2) { display: grid; gap: 5px; }
.home-tile strong { font-size: 20px; }
.home-tile small { max-width: 230px; color: inherit; opacity: .74; font-size: 12px; line-height: 1.4; }
.home-tile-arrow { align-self: end; font-size: 25px; line-height: 1; }
.home-status { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 13px 15px; border-radius: 12px; background: #fff; color: var(--muted); font-size: 12px; }
.home-status strong { color: #2d7c4e; }
.home-active-tours { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(111, 47, 82, .12); }
.home-active-tours-heading { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.home-active-tours-heading h2 { margin: 0; color: var(--ink); font-size: 19px; letter-spacing: -.02em; }
.home-active-tours-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.home-active-tours-list { display: grid; gap: 8px; margin-top: 12px; }
.home-active-tour { width: 100%; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto 18px; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #cce7d3; border-radius: 14px; background: #f5fbf7; color: var(--ink); text-align: left; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.home-active-tour:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(45, 124, 78, .12); }
.home-active-tour-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: #d2ebdd; color: #267449; }
.home-active-tour[data-tour-scope="network"] { border-color: #cfe0f2; background: #f5faff; }
.home-active-tour[data-tour-scope="network"] .home-active-tour-icon { background: #e1edf9; color: #356b9c; }
.home-active-tour-main, .home-active-tour-meta { display: grid; gap: 3px; min-width: 0; }
.home-active-tour-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-active-tour small { color: var(--muted); font-size: 11px; }
.home-active-tour-meta { justify-items: end; text-align: right; }
.home-active-tour-meta b { color: #267449; font-size: 11px; }
.home-active-tours-empty { margin: 12px 0 0; color: var(--muted); font-size: 12px; }

@media screen and (min-width: 901px) {
  body.mobile-view-home .workspace {
    min-height: calc(100vh - 170px);
    display: grid;
    align-items: center;
    box-sizing: border-box;
  }
  body.mobile-view-home .home-panel { width: 100%; margin-top: 0; margin-bottom: 0; }
}

@media screen and (min-width: 901px) and (max-width: 1180px) {
  .workspace {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    margin-inline: 12px;
    box-sizing: border-box;
    min-width: 0;
  }

  .workspace > .view-panel,
  .import-grid,
  .import-card,
  .import-side {
    min-width: 0;
    max-width: 100%;
  }

  .import-grid { grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); }
}

/* Kompakte Import-Buehne: auf Desktop-Hoehen bis 900px bleibt der gesamte
   erste Schritt im sichtbaren Arbeitsbereich. Mobile Geraete scrollen normal. */
@media screen and (min-width: 901px) and (max-height: 900px) {
  body.mobile-view-plan .workspace { align-items: start; }
  body.mobile-view-plan .import-card {
    min-height: 0;
    padding: 16px;
    gap: 10px;
  }
  body.mobile-view-plan .import-card .panel-title-block p { max-width: 620px; }
  body.mobile-view-plan .import-card .file-drop {
    min-height: clamp(190px, 27vh, 270px);
    margin: 8px 0;
  }
  body.mobile-view-plan .import-card .last-import { margin: 0; }
  body.mobile-view-plan .manual-target-card .primary-btn { min-height: 44px; }
  body.mobile-view-plan .import-side { gap: 12px; }
  body.mobile-view-plan .import-side > .panel { padding: 16px; }
  body.mobile-view-plan .import-side .import-check-card ul { gap: 8px; }
}

@media screen and (min-width: 901px) {
  /* Die Import-Buehne fuellt den verfuegbaren Main-Bereich; die Seitenkarten
     behalten dagegen ihre natuerliche Content-Hoehe. */
  body.mobile-view-plan .workspace {
    min-height: calc(100vh - 220px);
  }
  body.mobile-view-plan .import-panel,
  body.mobile-view-plan .import-grid,
  body.mobile-view-plan .import-card {
    min-height: 100%;
    box-sizing: border-box;
  }
  body.mobile-view-plan .import-side {
    align-content: start;
    grid-template-rows: max-content max-content max-content max-content;
  }
  body.mobile-view-plan .import-side .import-check-card {
    height: max-content;
    align-self: start;
  }
}

@media screen and (max-width: 700px) {
  .home-intro { display: block; }
  .home-intro time { display: block; margin-top: 8px; }
  .home-tiles { grid-template-columns: 1fr; }
  .home-tile { min-height: 132px; }
  .home-status { align-items: flex-start; flex-direction: column; gap: 4px; }
  .home-active-tour { grid-template-columns: 34px minmax(0, 1fr) 18px; gap: 9px; }
  .home-active-tour-meta { grid-column: 2 / 3; justify-items: start; text-align: left; }
  .home-active-tour .home-tile-arrow { grid-column: 3; grid-row: 1 / span 2; }
  body.mobile-view-running .running-home-cta { right: 10px; bottom: 82px; width: min(520px, calc(100vw - 20px)); max-width: none; justify-content: space-between; gap: 10px; }
  .running-home-cta button { min-height: 44px; padding: 0 16px; }
  .running-header-actions { align-items: stretch; flex-wrap: wrap; }
  .running-tour-selector { width: 100%; min-width: 0; margin-right: 0; }
}

@media screen and (min-width: 901px) {
  .running-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media screen and (max-width: 900px) {
  .support-help-btn {
    gap: 0;
    padding: 0;
    height: 26px;
    min-height: 26px;
    width: 26px;
  }

  .support-help-label {
    display: none;
  }

  .support-widget {
    top: calc(env(safe-area-inset-top) + 84px);
    right: 16px;
    bottom: auto;
    left: auto;
  }

  .support-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    margin: 0;
  }
}

/* Mandantenbranding: textbasierter Fallback auf kompakten Ansichten. */
.tenant-logo {
  display: none;
}

.tenant-brand-name {
  min-width: 0;
  overflow: hidden;
  color: var(--brand);
  font-size: 15px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tenant-branding-settings {
  grid-template-columns: minmax(0, 1fr);
}

.tenant-branding-settings .admin-form-pane > label,
.tenant-branding-settings .admin-form-pane > .tenant-logo-admin-preview,
.tenant-branding-settings .admin-form-pane > .admin-form-actions {
  margin-block: 10px;
}

/* Der Logo-Upload übernimmt die Sprache der CSV-Dropzone, bleibt in den
   Einstellungen aber bewusst kompakt. */
.tenant-logo-upload {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  min-height: 174px;
  padding: 18px;
  overflow: hidden;
  border: 2px dashed rgba(138, 18, 83, 0.30);
  border-radius: 18px;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(138, 18, 83, 0.05), transparent 70%),
    #fdfaf8;
  color: var(--ink);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.tenant-logo-upload::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image: radial-gradient(rgba(58, 34, 49, 0.12) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 35%, #000 20%, transparent 100%);
  mask-image: radial-gradient(70% 60% at 50% 35%, #000 20%, transparent 100%);
}

.tenant-logo-upload > * { position: relative; z-index: 1; }

.tenant-logo-upload .upload-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--brand-tint);
  color: var(--brand);
  box-shadow: inset 0 0 0 1px rgba(138, 18, 83, 0.12);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s;
}

.tenant-logo-upload strong { font-size: 15px; font-weight: 800; }
.tenant-logo-upload em { color: var(--muted); font-size: 12px; font-style: normal; }
.tenant-logo-upload b {
  display: inline-grid;
  place-items: center;
  min-height: 38px;
  padding: 0 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.tenant-logo-upload small { color: var(--muted); font-size: 11.5px; font-weight: 600; }
.tenant-logo-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.tenant-logo-upload:hover,
.tenant-logo-upload.is-dragover {
  border-color: var(--brand);
  background-color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -24px rgba(94, 12, 56, 0.40);
}

.tenant-logo-upload.is-dragover { border-style: solid; background-color: var(--brand-tint); }
.tenant-logo-upload:hover .upload-icon,
.tenant-logo-upload.is-dragover .upload-icon { background: var(--brand); color: #fff; transform: scale(1.06); }
.tenant-logo-upload:focus-within { outline: 3px solid rgba(138, 18, 83, 0.25); outline-offset: 3px; }

#adminTenantNameSaveBtn {
  width: max-content;
  align-self: flex-start;
}

.courier-location-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}

.courier-location-options legend {
  grid-column: 1 / -1;
  margin-bottom: 6px;
  color: var(--ink);
  font-weight: 800;
}

.courier-location-options label {
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.courier-location-options label span {
  display: grid;
  gap: 3px;
}

.courier-location-options small {
  color: var(--muted);
}

.courier-location-map-btn {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  justify-self: end;
  align-self: center;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 10px;
  font-size: 12px;
}

.push-settings-card {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 16px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.push-settings-card > div {
  display: grid;
  gap: 3px;
}

.push-settings-card small {
  color: var(--muted);
}

/* Einstellungs-Formularaktionen: kompakt und am Inhalt ausgerichtet.
   Große Tour- und Dialog-CTAs bleiben davon bewusst ausgenommen. */
.admin-settings-card .optimization-options > .primary-btn,
.admin-settings-section .admin-form-pane > .primary-btn,
.admin-settings-section .admin-form-actions > .primary-btn,
.admin-settings-section .admin-form-actions > .ghost-btn,
.admin-settings-section .email-server-pane > #emailServerTestBtn {
  width: max-content;
  max-width: 100%;
  height: 33px;
  min-height: 33px;
  align-self: flex-start;
}

.email-server-pane > .admin-form-actions {
  margin-top: 20px;
  margin-bottom: 70px;
  padding-top: 0;
}

@media screen and (min-width: 761px) {
  .admin-form-pane {
    width: 700px;
    max-width: none;
  }
}

@media screen and (max-width: 760px) {
  .running-position {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .courier-location-map-btn {
    justify-self: start;
  }

  .courier-location-options {
    grid-template-columns: 1fr;
  }

  .courier-location-options legend,
  .push-settings-card {
    grid-column: auto;
  }
}

.tenant-logo-admin-preview {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 96px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg);
}

.tenant-logo-admin-preview img {
  max-width: 240px;
  max-height: 72px;
  object-fit: contain;
  object-position: left center;
}

@media screen and (max-width: 900px) {
  .app-header .brand-lockup {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  .app-header .tenant-logo {
    display: none;
  }

  .app-header .tenant-brand-name {
    display: block;
  }

  .app-header #currentUser {
    display: none;
  }
}

@media screen and (min-width: 901px) {
  .app-header {
    grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
  }

  .brand-lockup {
    width: 220px;
    height: 60px;
    min-width: 220px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .tenant-logo {
    max-width: 200px;
    max-height: 56px;
    object-fit: contain;
    display: block;
    width: auto;
    height: auto;
    object-position: left center;
  }

  .brand-lockup .tenant-logo {
    width: auto;
    height: auto;
    max-height: 56px;
  }

  .tenant-brand-name {
    display: none;
  }

  .tenant-brand-name.desktop-fallback {
    display: block;
  }
}

/* Route Intelligence: the workspace sits inside a quiet, map-like field.
   The route layer is deliberately CSS-only so it stays fast, responsive and
   readable behind the operational panels. */
@media screen {
  body {
    position: relative;
    isolation: isolate;
    background-color: #f1f4f1;
    background-image:
      radial-gradient(ellipse at 14% 4%, rgba(138, 18, 83, 0.11), transparent 34%),
      radial-gradient(ellipse at 88% 78%, rgba(45, 138, 86, 0.10), transparent 38%),
      repeating-linear-gradient(26deg, transparent 0 88px, rgba(73, 123, 113, 0.055) 89px 90px, transparent 91px 178px),
      repeating-linear-gradient(116deg, transparent 0 116px, rgba(138, 18, 83, 0.035) 117px 118px, transparent 119px 236px);
    background-attachment: fixed;
  }

  body::before,
  body::after {
    content: "";
    position: fixed;
    pointer-events: none;
    z-index: 0;
  }

  body::before {
    width: min(1100px, 92vw);
    height: min(570px, 48vw);
    left: -14vw;
    bottom: -18vw;
    border: 2px solid rgba(138, 18, 83, 0.18);
    border-radius: 50%;
    transform: rotate(-13deg);
    box-shadow:
      0 0 0 28px rgba(138, 18, 83, 0.07),
      0 0 0 56px rgba(138, 18, 83, 0.04);
  }

  body::after {
    width: 220px;
    height: 220px;
    top: 110px;
    right: 4vw;
    opacity: 0.7;
    background-image: radial-gradient(rgba(58, 34, 49, 0.16) 1px, transparent 1px);
    background-size: 18px 18px;
    mask-image: radial-gradient(circle at center, #000 0 30%, transparent 74%);
    -webkit-mask-image: radial-gradient(circle at center, #000 0 30%, transparent 74%);
  }

  .app-shell {
    position: relative;
    z-index: 1;
  }

  .panel {
    background: rgba(255, 255, 255, 0.91);
    border-color: rgba(138, 18, 83, 0.10);
    box-shadow: 0 18px 42px rgba(58, 34, 49, 0.09);
  }

  .import-card {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 24px 54px rgba(94, 12, 56, 0.14);
  }

  @supports (backdrop-filter: blur(1px)) {
    .panel {
      backdrop-filter: blur(8px) saturate(112%);
      -webkit-backdrop-filter: blur(8px) saturate(112%);
    }
  }
}

@media screen and (max-width: 900px) {
  body::before {
    left: -44vw;
    bottom: -22vw;
  }

  body::after {
    top: 94px;
    right: -44px;
    opacity: 0.34;
  }
}

@media (prefers-reduced-motion: reduce) {
  body {
    background-attachment: scroll;
  }
}

/* Einheitliche native Auswahlfelder: Apotour-Chrome, aber die zugängliche
   Betriebssystem-Auswahlliste bleibt erhalten. */
select:not([multiple]) {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--brand) 50%),
    linear-gradient(135deg, var(--brand) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  box-shadow: 0 1px 2px rgba(58, 34, 49, 0.04);
}

select:not([multiple]):focus-visible {
  border-color: var(--brand);
  outline: none;
  box-shadow: 0 0 0 3px rgba(138, 18, 83, 0.14);
}

.priority-select {
  border-radius: 999px;
}

/* Die native Auswahl bleibt ohne JavaScript sichtbar. Erst die Erweiterung
   ersetzt sie durch den gestaltbaren Auslöser und die eigene Optionsliste. */
.combobox-enhanced {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.apotour-combobox {
  display: block;
  position: relative;
  min-inline-size: 0;
  inline-size: 100%;
}

.apotour-combobox-trigger {
  display: flex;
  align-items: center;
  inline-size: 100%;
  min-block-size: 44px;
  padding: 0 42px 0 14px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background:
    linear-gradient(45deg, transparent 50%, var(--brand) 50%) calc(100% - 18px) 50% / 6px 6px no-repeat,
    linear-gradient(135deg, var(--brand) 50%, transparent 50%) calc(100% - 13px) 50% / 6px 6px no-repeat,
    #fffaf8;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(58, 34, 49, 0.04);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.apotour-combobox-trigger:hover:not(:disabled),
.apotour-combobox-trigger[aria-expanded="true"] {
  border-color: var(--brand);
}

.apotour-combobox-trigger:focus-visible {
  border-color: var(--brand);
  outline: none;
  box-shadow: 0 0 0 3px rgba(138, 18, 83, 0.14);
}

.apotour-combobox-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.street-learning-panel .apotour-combobox-trigger {
  background-color: #fff;
}

.apotour-combobox.priority-select .apotour-combobox-trigger {
  min-block-size: 36px;
  justify-content: center;
  padding-inline: 10px 34px;
  border: 0;
  border-radius: 999px;
  background-color: #f3ede9;
  color: var(--ink-soft);
  font-size: 11px;
  text-align: center;
}

.apotour-combobox-listbox {
  position: fixed;
  z-index: 110;
  display: grid;
  box-sizing: border-box;
  gap: 2px;
  max-block-size: min(220px, calc(100vh - 16px));
  overflow-y: auto;
  padding: 4px;
  border: 1px solid rgba(138, 18, 83, 0.14);
  border-radius: 14px;
  background: #fffaf8;
  box-shadow: 0 10px 24px rgba(58, 34, 49, 0.1);
}

.apotour-combobox-listbox[hidden] {
  display: none;
}

.apotour-combobox-option {
  inline-size: 100%;
  min-block-size: 34px;
  padding: 6px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: inherit;
}

.apotour-combobox-option:hover:not(:disabled),
.apotour-combobox-option[data-active="true"] {
  background: color-mix(in srgb, var(--brand-tint) 68%, #fff);
  color: var(--brand);
}

.apotour-combobox-option[aria-selected="true"] {
  background: color-mix(in srgb, var(--brand-tint) 58%, #fff);
  color: var(--brand);
}

.apotour-combobox-option:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

/* Native toggles must not inherit the padded field frame from the shared
   input/select/textarea rule above. */
input[type="checkbox"],
input[type="radio"] {
  appearance: auto;
  -webkit-appearance: auto;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  accent-color: var(--brand);
  vertical-align: middle;
}

input[type="radio"] {
  border-radius: 50%;
}

input[type="checkbox"]:focus,
input[type="radio"]:focus {
  box-shadow: none;
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* The account-active control is intentionally a custom switch. */
.admin-user-active input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 38px;
  height: 22px;
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 99px;
  background: #d9d0cb;
}

@media (max-width: 640px) {
  .courier-legal-notice-content { gap: 12px; padding: 24px 20px; }
  .courier-legal-notice-content h2 { font-size: 22px; }
  .receipt-capture-modal { padding: 10px; align-items: end; }
  .receipt-capture-panel {
    width: 100%;
    max-height: calc(100dvh - 20px);
    gap: 12px;
    padding: 20px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
    border-radius: 20px 20px 14px 14px;
  }
  .receipt-capture-header h2 { font-size: 22px; }
  #receiptSignatureCanvas { height: 170px; }
  .receipt-capture-actions > button,
  .receipt-photo-pick { flex: 1 1 auto; }
}

/* ===== v172: responsive Stop-Aktionsleiste (gewinnt die Kaskade) =====
   Die drei Controls (Prioritaet, Lieferhinweis, Loeschen) liegen in einer
   wrap-faehigen Zeile. Kombobox-JS kopiert die Klassen auf Wrapper-Span UND
   natives Select — deshalb .stop-row-Präfix + Element-Anker statt bloßer
   Klassen, damit alte Media-Blöcke (<=620/760/900) keine Restbreiten mehr
   setzen. */
.stop-row .stop-actions {
  justify-content: flex-start;
}

.stop-row .stop-actions > .priority-select {
  flex: 0 1 auto;
  inline-size: auto;
  min-width: 104px;
  max-width: 150px;
  min-inline-size: 104px;
  max-inline-size: 150px;
}

.stop-row .stop-actions > .delivery-note-toggle {
  flex: 0 1 auto;
  margin-inline: auto;
  max-width: 100%;
  white-space: nowrap;
  text-align: center;
  text-align-last: center;
  padding-inline: 14px;
}

.stop-row .stop-actions > .stop-remove-btn {
  flex: 0 0 auto;
  margin-left: auto;
}

@media (max-width: 560px) {
  .stop-row .stop-actions > .delivery-note-toggle {
    flex-basis: 100%;
    order: 9;
    margin-inline: 0;
  }

  /* Loeschen sitzt rechts neben dem Select, Hinweis bekommt die volle Breite. */
  .stop-row .stop-actions > .stop-remove-btn {
    margin-left: auto;
  }
}

/* v173: Responsive Import-CTA ("Weiter zur Planung"). Auf schmalen Breiten bleibt
   die sticky CTA eine kompakte ZEILE (Status links, Button rechts) statt der 198px
   hohen Column mit 92px-wide Text-Spalte. Zieht mit .dark-cta.import-cta (0,3,0)
   gegen die hoehenspezifizierte column-Regel der <=900-Ansicht und gegen die
   !important-Overrides in redesign.css. */
@media screen and (max-width: 900px) {
  .dark-cta.import-cta {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-height: 56px !important;
    padding: 8px 12px !important;
  }

  .dark-cta.import-cta strong {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  .dark-cta.import-cta .primary-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-height: 44px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }
}

@media screen and (max-width: 420px) {
  .dark-cta.import-cta {
    gap: 8px;
    padding: 8px 10px;
  }

  .dark-cta.import-cta .primary-btn {
    padding: 0 12px;
    font-size: 12.5px;
  }
}

/* ===== v176: mobile Prio-Pill + Zahlen-Badge =====
   (1) Der "Schein-Schatten"/Ring am Prioritaet-Button kam von der globalen
       "Shared polish"-Regel in redesign.css:
       .apotour-combobox-trigger,.start-point-menu-btn { background-color:#fff!important;
       border:1px solid #000!important; ... }  — sie zwingt JEDEM Combobox-Trigger
       (inkl. dem kleinen Stop-Pill) weissen Grund + harten schwarzen 1px-Rand zu,
       waehrend das Prio-Pill bewusst eine flache, kantenlose Cremepille sein soll
       (styles.css .apotour-combobox.priority-select .apotour-combobox-trigger).
       Fix: im Stop-Kontext die Kante/Flaeche mit !important zuruecksetzen.
   (2) Zahlenindikator des Lieferstops (.stop-index): Bordeaux (var(--brand)) + weisse
       Ziffer, uebersteuert die Status-Farbwelten (bestimmt, verpasst, etc.), damit
       die fortlaufende Stopp-Nummer konsistent ausserordentlich lesbar bleibt. */

/* (2) zuerst – gilt ueber Viewports/Stati via !important */
.stop-row .stop-index {
  background: var(--brand) !important;
  color: #ffffff !important;
}

/* (1) gilt app-weit: das Stop-Pill ist designmaeßig flach/kantenlos —
     der schwarze 1px-Rand der "Shared polish"-Globalregel war ueberall ein Fehler. */
.stop-row .stop-actions .apotour-combobox.priority-select .apotour-combobox-trigger,
.stop-row .stop-actions > .priority-select {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background-color: #f3ede9 !important;
  border-radius: 999px !important;
  min-height: 36px !important;
  color: var(--ink-soft) !important;
  font-size: 11px !important;
}

/* v188: Zusatzbetrag-Feld exakt so hoch wie die Lieferhinweis-Pills (36px in beiden
   Viewports — verifiziert via getComputedStyle 27.10.: desktop .delivery-note-toggle
   = 36px, prio-Trigger global 36px !important v176). redesign.css Z122 zwingt jedem
   Input min-height:46px nach styles.css geladen — !important im Stop-Kontext reicht,
   analog v176-Block oben. Breite/Radius/Styling bleiben an der Ursprungsregel. */
.stop-row .stop-actions .amount-input {
  min-height: 36px !important;
}

/* v182 Heimtour: Draft-Ansicht (Standardziele + Suggestion-Banner) */
.heimtour-suggestion-box {
  display: flex; gap: 10px; align-items: center; margin: 12px 0; padding: 12px 14px;
  border: 1px solid #f0d3bf; border-radius: 14px; background: #fff8f1; color: #6b4a2f;
}
.heimtour-suggestion-box .material-symbols-outlined { font-size: 22px; }
.heimtour-suggestion-box > span:nth-child(2) { flex: 1; }

.home-standard-stops-section { margin: 12px 0; padding: 14px; }
.home-standard-stop-add-row { display: flex; gap: 8px; margin-bottom: 8px; }
.home-standard-stop-add-row .input { flex: 1; }
.home-standard-stops-list { display: grid; gap: 8px; }
.home-standard-stop-row {
  display: flex; gap: 10px; align-items: center; justify-content: space-between;
  padding: 10px 12px; border: 1px solid #eadfe2; border-radius: 12px; background: #fff;
}
.home-standard-stop-row small { display: block; }
.home-standard-stop-actions { display: flex; gap: 6px; }

/* Verbundchat v184: Chat-Panel im Netzwerk-View */
.network-chat { margin-top: 14px; }
.network-chat-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.network-chat-head h3 { margin: 0; font-size: 15px; }
.network-msgs { max-height: 240px; overflow-y: auto; border: 1px solid var(--line, #e5e7eb); border-radius: 8px; background: var(--bg-card, #fff); padding: 6px 8px; display: flex; flex-direction: column; gap: 8px; }
.network-msg { border-left: 3px solid transparent; padding: 2px 6px; }
.network-msg.own { background: #eef2ff; border-left-color: #4f46e5; border-radius: 0 6px 6px 0; }
.network-msg strong { display: block; font-size: 13px; }
.network-msg p { margin: 2px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.network-msg small { color: var(--muted, #6b7280); font-size: 11px; }
.network-chat-form { display: flex; gap: 6px; margin-top: 6px; }
.network-chat-form input { flex: 1; min-height: 38px; resize: none; }

/* ═══ v194: Mobile (<=760px) — fixed-Tab-Leiste entfernt, Content bis unten ═══
   .mobile-tabs wird <=760px ausgeblendet (display:none). Die Tabbar-Reserven
   (72/76/78px) entfallen: Content + schwebende CTAs sitzen auf einheitlich
   16px + env(safe-area-inset-bottom). 761-900px bleibt EXAKT wie v193 — deshalb
   hier nur max-width:760, nie global. display:none braucht !important gegen die
   SPAETERE <=900-Regel (gleiche Spezifitaet) und gegen redesign.css.
   Courier: --courier-tabs-h liefert per syncDockMetrics() Lauffzeit-Hoehe aus dem
   fixed-Position; ohne fixe Leiste 0px — Dock/Toast/Body bleiben damit korrekt,
   JS bleibt intakt (Header-Tabs Tablet/ Desktop). */
@media screen and (max-width: 760px) {
  .mobile-tabs {
    display: none !important;
  }
  body.role-courier .mobile-tabs {
    display: none !important;
  }
  /* Dateiende = spaeteste Deklaration: gewinnt gegen die <=900-Regel
     `0 10px 78px` (gleiche Spezifitaet) ohne !important. */
  .app-shell {
    padding: 12px 10px calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .import-cta {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .release-cta {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }
}