/* Mitarbeiteroberfläche: ein nächster Schritt, vier Hauptwege und Details auf Wunsch. */
:root { --mobile-radius: 15px; --mobile-shadow: 0 2px 9px #173c2708; }
body { background: #f3f6f3; }
button, summary, input, select { min-height: 44px; }
button, summary, input, select, textarea { font-size: 1rem; }
input, select, textarea { max-width: 100%; min-width: 0; }
button, summary { line-height: 1.4; }

/* Name, Verbindung und Menü bleiben in einem flachen Kopf. */
.app-header {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) 44px;
  align-items: center; gap: 8px; min-height: 58px;
  padding-block: max(7px, env(safe-area-inset-top)) 7px;
  background: #214b40; box-shadow: none;
}
.app-header .app-brand { grid-column: 1; grid-row: 1; gap: 0; }
.app-header .app-brand img { width: 32px; height: 32px; flex-basis: 32px; border-radius: 10px; box-shadow: none; }
.app-header .app-brand > span {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.app-header .header-meta { grid-column: 2; grid-row: 1; display: grid; gap: 0; text-align: left; }
.app-header .header-meta strong { font-size: .875rem; line-height: 1.35; }
.app-header .network-state { font-size: .8125rem; line-height: 1.35; }
.app-header .portal-menu-toggle { grid-column: 3; grid-row: 1; width: 44px; height: 44px; padding: 10px; border-radius: 12px; }
.mobile-screen-bar { min-height: 48px; margin-top: 4px; gap: 8px; padding-block: 2px; }
.mobile-screen-heading { flex: 1 1 100px; min-width: 0; }
#mobile-screen-title { font-size: 1.2rem; line-height: 1.3; }
#mobile-screen-meta { margin: 2px 0 0; color: var(--muted); font-size: .8125rem; line-height: 1.4; }
#mobile-screen-meta:empty { display: none; }
.mobile-screen-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.mobile-screen-actions:empty { display: none; }
.mobile-screen-actions .icon-button { width: 44px; height: 44px; min-height: 44px; }
.screen { padding-top: 7px; }
/* Die ursprünglichen Überschriften bleiben als zugängliche Abschnittsbezeichnung erhalten. */
.screen > .mobile-simple-heading {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.bottom-nav {
  display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  min-height: calc(65px + env(safe-area-inset-bottom)); gap: 2px; padding-top: 3px;
}
.bottom-nav > button { min-height: 60px; gap: 3px; padding: 6px 3px; border-radius: 11px; font-size: .8125rem; }
.bottom-nav .nav-symbol { width: 22px; height: 22px; }
.bottom-nav .badge { top: 2px; right: 6px; left: auto; }
.bottom-nav > button.active { color: #214f40; background: #e3eee6; box-shadow: inset 0 3px #36755c; }

/* Drei sofort sichtbare Ziele; seltene Aufgaben bleiben in kurzen Rubriken. */
#portal-navigation { width: min(400px, 96vw); max-width: 96vw; padding: max(12px, env(safe-area-inset-top)) 12px max(18px, env(safe-area-inset-bottom)); border-radius: 0 18px 18px 0; background: #f5f8f5; }
#portal-navigation .dialog-header { flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-bottom: 10px; margin-bottom: 10px; }
#portal-navigation h2 { margin: 0; font-size: 1.25rem; }
#portal-navigation .dialog-header > .mobile-back-button { margin-left: auto; }
.portal-menu { gap: 8px; }
.mobile-menu-direct { border: 1px solid #ccd9cf; border-radius: 14px; background: #fff; }
.mobile-menu-links { gap: 2px; padding: 5px; }
.portal-menu button { min-height: 48px; padding: 10px; border-radius: 9px; font-size: 1rem; }
.portal-menu button .mobile-menu-label { font-size: 1rem; line-height: 1.4; }
.mobile-menu-group { border-radius: 13px; box-shadow: none; }
.mobile-menu-group > summary { min-height: 48px; padding: 11px 36px 11px 13px; border-radius: 12px; font-size: 1rem; background: var(--mobile-accent-soft); }
.mobile-menu-group[open] > summary { border-radius: 12px 12px 8px 8px; }
.mobile-menu-group .mobile-menu-links { padding: 5px; }
.mobile-menu-links button.active { border-left-width: 3px; padding-left: 8px; }

/* Auf Start steht nur eine Hauptaktion im Vordergrund. */
.portal-home-next { padding: 14px; margin-bottom: 10px; border-radius: 15px; background: #fff; box-shadow: var(--mobile-shadow); }
.portal-home-next::before { content: none; }
.portal-home-next h2 { font-size: 1.2rem; }
.portal-home-status { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.portal-home-next .mobile-home-primary { width: 100%; min-height: 48px; margin-top: 6px; padding: 11px 14px; border: 1px solid #246354; border-radius: 12px; color: #fff; background: #246354; font-size: 1.0625rem; font-weight: 700; }
.mobile-home-notice { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; width: 100%; min-height: 48px; margin: 0 0 10px; padding: 10px 13px; border: 1px solid #c4d6cd; border-radius: 13px; background: #fff; color: #254b3e; text-align: left; font-weight: 600; }
.mobile-home-optional-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 8px; margin-bottom: 10px; }
.mobile-home-optional-actions > button { width: 100%; min-height: 44px; text-align: left; }
.portal-home-fold, .mobile-fold, .mobile-tour-tools { margin-bottom: 10px; border-radius: 14px; box-shadow: none; }
.portal-home-fold > summary, .mobile-fold > summary, .mobile-tour-tools > summary { min-height: 48px; padding: 11px 36px 11px 13px; border-radius: 13px; font-size: 1rem; }
.portal-home-fold[open] > summary, .mobile-fold[open] > summary, .mobile-tour-tools[open] > summary { border-radius: 13px 13px 8px 8px; }
.portal-home-fold.has-attention { border-color: #c89b67; }
.portal-home-fold.has-attention > summary { background: #fff5e7; color: #765020; }
.mobile-fold-body { padding: 11px; }

/* Organisation verwendet dieselben ruhigen Auswahlzeilen wie das Mehr-Menü. */
#mobile-tour-tools > .mobile-organisation-menu { display: grid; gap: 8px; margin: 0; padding: 8px; }
.mobile-tools-count:empty { display: none; }
.mobile-organisation-menu > #support-hub { display: block; margin: 0; }
.mobile-organisation-group { min-width: 0; border: 1px solid #c3d5c9; border-radius: 13px; background: #fff; }
.mobile-organisation-group > summary,
#mobile-tour-tools .mobile-organisation-choice > summary {
  position: relative; display: flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 11px 36px 11px 13px; border: 0; border-radius: 12px;
  list-style: none; color: var(--mobile-accent); background: var(--mobile-accent-soft);
  font-size: 1rem; font-weight: 700; line-height: 1.4; cursor: pointer; overflow-wrap: anywhere;
}
.mobile-organisation-group > summary::-webkit-details-marker,
#mobile-tour-tools .mobile-organisation-choice > summary::-webkit-details-marker { display: none; }
.mobile-organisation-group > summary::before,
#mobile-tour-tools .mobile-organisation-choice > summary::before { content: none; }
.mobile-organisation-group > summary::after,
#mobile-tour-tools .mobile-organisation-choice > summary::after {
  content: ""; position: absolute; right: 15px; top: calc(50% - 5px); width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}
.mobile-organisation-group[open] > summary::after,
#mobile-tour-tools .mobile-organisation-choice[open] > summary::after { transform: translateY(4px) rotate(225deg); }
.mobile-organisation-group[open] > summary { border-radius: 12px 12px 8px 8px; }
.mobile-organisation-links { display: grid; gap: 2px; padding: 5px; }
#mobile-tour-tools .mobile-organisation-choice {
  min-width: 0; margin: 0; border: 0; border-bottom: 1px solid #e7eee7;
  border-radius: 0; background: #fff; box-shadow: none; overflow: visible;
}
#mobile-tour-tools .mobile-organisation-choice > summary { color: var(--ink); background: #fff; border-radius: 9px; }
.mobile-organisation-links > button {
  width: 100%; min-width: 0; min-height: 48px; padding: 11px 13px; border: 0;
  border-bottom: 1px solid #e7eee7; border-radius: 9px; box-shadow: none;
  text-align: left; font-size: 1rem; font-weight: 700; color: var(--ink); background: #fff;
}
.mobile-organisation-links > :last-child { border-bottom-color: transparent; }
.mobile-organisation-count {
  flex: 0 0 auto; margin-left: auto; padding: 2px 7px; border: 1px solid currentColor;
  border-radius: 16px; color: var(--mobile-accent); background: #fff; font-size: .75rem; font-weight: 700;
}
#organisation-vehicle > .vehicle-logbook { margin: 0; padding: 8px; }
#mobile-tour-tools .support-panel-body { padding: 8px; }
#mobile-tour-tools .support-tour > header,
#mobile-tour-tools .support-request > header,
#mobile-tour-tools .vehicle-card > header { flex-wrap: wrap; }
#mobile-tour-tools .support-stop,
#mobile-tour-tools .vehicle-entry { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
#mobile-tour-tools .support-tour > header > *,
#mobile-tour-tools .support-stop > *,
#mobile-tour-tools .vehicle-card > header > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .mobile-organisation-group { background: #fffffff0; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
}
@media (prefers-reduced-transparency: reduce) {
  .mobile-organisation-group { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (forced-colors: active) {
  .mobile-organisation-group, .mobile-organisation-group > summary,
  #mobile-tour-tools .mobile-organisation-choice > summary,
  .mobile-organisation-links > button, .mobile-organisation-count { color: CanvasText; background: Canvas; border-color: CanvasText; }
}

/* Kurze Hilfen, geführte Formulare und Kartenwahl. */
.mobile-context-help { grid-column: 1 / -1; min-width: 0; margin: 8px 0; border: 1px solid var(--line); border-radius: 10px; background: #f3f7f4; }
.mobile-context-help > summary { min-height: 44px; padding: 10px 12px; cursor: pointer; color: #285447; font-size: .875rem; }
.mobile-context-help > p { margin: 0; padding: 0 12px 12px; line-height: 1.5; font-size: .875rem; overflow-wrap: anywhere; }
.support-wizard-progress { margin: 0; color: var(--muted); font-size: .875rem; }
.support-wizard-step { display: grid; gap: 12px; min-width: 0; }
.support-wizard-step[hidden] { display: none; }
.support-wizard-step h3 { margin: 0; font-size: 1.125rem; }
.support-wizard-help { margin: 0; font-size: .875rem; color: var(--muted); line-height: 1.45; }
.support-wizard-review { margin: 0; min-width: 0; }
.support-wizard-review > div { padding: 8px 0; border-bottom: 1px solid var(--line); }
.support-wizard-review dt { font-size: .875rem; color: var(--muted); }
.support-wizard-review dd { margin: 3px 0 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.support-wizard-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.support-wizard-actions button { flex: 1 1 8rem; min-height: 44px; min-width: 0; white-space: normal; }
.patient-navigation-dialog { padding: 18px; max-height: calc(100dvh - 24px); overflow-y: auto; color: var(--ink); }
.patient-navigation-dialog .dialog-header { gap: 12px; }
.patient-navigation-dialog .dialog-header h2 { min-width: 0; overflow-wrap: anywhere; }
.patient-navigation-dialog p { overflow-wrap: anywhere; }
.patient-navigation-label { margin: 16px 0 4px; color: var(--muted); font-size: .85rem; }
.patient-navigation-address { margin: 0 0 12px; font-weight: 700; }
.patient-navigation-choices { display: grid; gap: 10px; margin: 16px 0; }
.patient-navigation-dialog button { min-height: 44px; white-space: normal; overflow-wrap: anywhere; }
.patient-navigation-help { margin: 12px 0; }
.patient-navigation-help > summary { min-height: 44px; cursor: pointer; overflow-wrap: anywhere; }
.patient-navigation-cancel { width: 100%; margin-top: 12px; }
.mobile-action-feedback { position: sticky; top: var(--mobile-feedback-top, 72px); z-index: 19; display: flex; align-items: center; gap: 8px; margin: 0 16px 8px; padding: 9px 12px; border: 1px solid #86aa98; border-radius: 12px; background: #edf6ef; color: #214e3c; }
.mobile-action-feedback[data-phase="pending"] { background: #f0f5f8; border-color: #98b0c0; color: #294d63; }
.mobile-action-feedback[data-phase="unconfirmed"], .mobile-action-feedback[data-phase="rejected"] { background: #fff5e7; border-color: #b89661; color: #62471f; }
.mobile-action-feedback p { flex: 1; min-width: 0; margin: 0; font-size: .875rem; line-height: 1.45; overflow-wrap: anywhere; }
.mobile-action-feedback button { flex: 0 0 44px; min-height: 44px; border: 0; background: transparent; color: inherit; font-size: 1.5rem; }
#action-dialog, #portal-editor { max-height: calc(100dvh - 24px); overflow-y: auto; }
#action-form, #portal-editor-form { min-width: 0; }
#action-form .dialog-header > div, #portal-editor-form .dialog-header > h2 { flex: 1; min-width: 0; }
#action-form .dialog-header .icon-button, #portal-editor-form .dialog-header .icon-button { flex: 0 0 44px; }
#action-form h2, #action-form h3, #action-form .eyebrow, #portal-editor-form h2 { overflow-wrap: anywhere; }
#dialog-body > *, .support-wizard-step > * { min-width: 0; max-width: 100%; }
#action-form .dialog-actions, #portal-editor-form .dialog-actions { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
#action-form .dialog-actions > *, #portal-editor-form .dialog-actions > * { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
#action-form[aria-busy="true"] #dialog-error { color: #294d63; }

/* Tour: nächste Versorgung vollständig, weitere und erledigte Einsätze aufklappbar. */
.simple-tour-progress { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 9px; font-size: .9375rem; line-height: 1.4; color: var(--muted); }
.simple-tour-progress strong { font-size: .9375rem; }
.simple-tour-progress span { font-size: .875rem; }
.summary-band:has(> .simple-tour-progress) { display: block; margin-bottom: 9px; }
.report-briefing, .report-briefing-list { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.report-briefing > *, .report-briefing > header > *, .report-briefing .report-card { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.report-briefing > header > span { flex: 0 1 auto; white-space: normal; }
.simple-tour-focus-label { margin: 0 0 7px; color: #245b47; font-size: .875rem; font-weight: 700; }
.simple-stop-fold, .simple-completed-stops, .simple-stop-more, .simple-patient-contact, .simple-form-extra {
  min-width: 0; margin-block: 8px; border: 1px solid #ccdcd1; border-radius: 13px; background: #fff;
}
.simple-stop-fold > summary, .simple-completed-stops > summary, .simple-stop-more > summary, .simple-patient-contact > summary, .simple-form-extra > summary {
  display: flex; align-items: center; gap: 8px; position: relative; list-style: none;
  min-height: 48px; padding: 11px 36px 11px 12px; border-radius: 12px;
  font-size: 1rem; font-weight: 650; color: #285447; background: #f2f7f3; cursor: pointer;
}
.simple-stop-fold > summary::-webkit-details-marker, .simple-completed-stops > summary::-webkit-details-marker,
.simple-stop-more > summary::-webkit-details-marker, .simple-patient-contact > summary::-webkit-details-marker,
.simple-form-extra > summary::-webkit-details-marker { display: none; }
.simple-stop-fold > summary::after, .simple-completed-stops > summary::after, .simple-stop-more > summary::after,
.simple-patient-contact > summary::after, .simple-form-extra > summary::after {
  content: ""; position: absolute; right: 15px; top: calc(50% - 5px); width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}
.simple-stop-fold[open] > summary::after, .simple-completed-stops[open] > summary::after, .simple-stop-more[open] > summary::after,
.simple-patient-contact[open] > summary::after, .simple-form-extra[open] > summary::after { transform: translateY(4px) rotate(225deg); }
.simple-stop-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; width: 100%; min-width: 0; }
.simple-stop-summary > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.simple-stop-summary small { color: var(--muted); font-size: .8125rem; font-weight: 500; }
.simple-stop-fold .stop-card { margin: 0; border: 0; box-shadow: none; }
.simple-completed-stops > :not(summary) { margin-inline: 8px; }
.simple-stop-primary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.simple-stop-primary > button { min-height: 48px; min-width: 0; }
.simple-stop-more > :not(summary), .simple-patient-contact > :not(summary), .simple-form-extra > :not(summary) { margin: 10px; }
.simple-stop-more .stop-actions { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
.simple-form-extra label { min-width: 0; }
.simple-patient-contact .patient-actions { flex-wrap: wrap; }

@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .app-header { background: #214b40f2; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
  #portal-navigation { background: #f5f8f5ed; -webkit-backdrop-filter: blur(22px) saturate(115%); backdrop-filter: blur(22px) saturate(115%); }
  .bottom-nav { background: #fbfdfaf2; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
}
@media (prefers-reduced-transparency: reduce) {
  .app-header { background: #214b40; }
  #portal-navigation, .bottom-nav { background: #f5f8f5; }
  .app-header, #portal-navigation, .bottom-nav { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) { #portal-navigation[open], .portal-home-next { animation: none; } }
@media (max-width: 359px) {
  .app-header { padding-inline: 10px; }
  .mobile-screen-bar { margin-inline: 10px; }
  .screen { padding-inline: 10px; }
  .simple-stop-primary { grid-template-columns: minmax(0, 1fr); }
}
@media (forced-colors: active) {
  .app-header, #portal-navigation, .bottom-nav, .portal-home-next, .mobile-menu-direct,
  .simple-stop-fold, .simple-completed-stops, .simple-stop-more, .simple-patient-contact, .simple-form-extra,
  .mobile-menu-group > summary, .simple-stop-fold > summary, .simple-completed-stops > summary,
  .simple-stop-more > summary, .simple-patient-contact > summary, .simple-form-extra > summary {
    color: CanvasText; background: Canvas; border-color: CanvasText; box-shadow: none;
  }
  .simple-tour-progress, .simple-tour-focus-label, #mobile-screen-meta { color: CanvasText; }
  .bottom-nav > button.active { color: HighlightText; background: Highlight; border: 2px solid Highlight; }
}