/* Floating chrome + push-in side sheets (no menubar). */

:root {
  --sheet-gutter: 12px;
  --sheet-gap: 8px;
  --sheet-span: min(var(--sheet-width), 88vw);
  --sheet-shift: calc(var(--sheet-gutter) + var(--sheet-span) + var(--sheet-gap));
  --chat-sheet-span: min(360px, calc(100vw - 24px));
  --chat-sheet-shift: calc(var(--sheet-gutter) + var(--chat-sheet-span) + var(--sheet-gap));
}

.app-shell {
  position: relative;
  display: flex;
  height: var(--app-height, 100%);
  width: 100%;
  overflow: hidden;
}

.app-sheet {
  --sheet-gutter: 12px;
  --sheet-gap: 8px;
  --sheet-span: min(var(--sheet-width), 88vw);
  box-sizing: border-box;
  position: absolute;
  /* Below the hamburger chrome (12 + 44 + 12). */
  top: 68px;
  left: var(--sheet-gutter);
  bottom: 12px;
  width: var(--sheet-span);
  min-width: var(--sheet-span);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  background: var(--chrome-bg);
  backdrop-filter: var(--chrome-blur);
  -webkit-backdrop-filter: var(--chrome-blur);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
  z-index: 25;
  pointer-events: none;
  transform: translateX(calc(-100% - 24px));
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.app-sheet--help,
#help-sheet {
  left: auto;
  right: var(--sheet-gutter);
  transform: translateX(calc(100% + 24px));
}

body.sheet-open .app-sheet:not(.app-sheet--help) {
  transform: none;
  pointer-events: auto;
}

body.help-open .app-sheet--help,
body.help-open #help-sheet {
  transform: none;
  pointer-events: auto;
}

.sheet-panel {
  display: none;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  background: transparent;
}

body.sheet-projects .sheet-panel[data-sheet="projects"],
body.help-open .sheet-panel[data-sheet="help"],
.app-sheet--help .sheet-panel[data-sheet="help"],
body.sheet-export .sheet-panel[data-sheet="export"] {
  display: flex;
}

.app-sheet.sheet-instant {
  transition: none !important;
}

.sheet-help-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: auto 8px 10px auto;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.sheet-help-open .material-symbols-outlined {
  font-size: 22px;
}

.sheet-help-open:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 8px 4px 14px;
  flex-shrink: 0;
}

.sheet-title {
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.sheet-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 11px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.sheet-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

.sheet-nav {
  display: flex;
  gap: 4px;
  margin: 4px 12px 10px;
  padding: 4px;
  flex-shrink: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
}

.sheet-nav-btn {
  flex: 1;
  border: none;
  border-radius: 9px;
  padding: 8px 10px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.sheet-nav-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}

.sheet-nav-btn.active {
  color: #fff;
  background: var(--primary);
}

.sheet-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

.sheet-body::-webkit-scrollbar {
  width: 8px;
}

.sheet-body::-webkit-scrollbar-track {
  background: transparent;
}

.sheet-body::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.sheet-body::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.34);
}

.app-shell > .workspace {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
}

.chrome-float {
  position: absolute;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 16px;
  background: var(--chrome-bg);
  backdrop-filter: var(--chrome-blur);
  -webkit-backdrop-filter: var(--chrome-blur);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
  pointer-events: auto;
}

.chrome-float--start {
  top: 12px;
  left: 12px;
  width: min(var(--sheet-width), 88vw);
  min-width: min(var(--sheet-width), 88vw);
  max-width: min(var(--sheet-width), 88vw);
  padding-right: 10px;
}

/* Navigation Führungshinweis under Menü (mobile) */
.chrome-nav-hint {
  display: none;
  position: absolute;
  top: 68px;
  left: 12px;
  z-index: 29;
  margin: 0;
  padding: 4px 10px;
  max-width: min(280px, calc(100vw - 24px));
  border-radius: 10px;
  background: var(--chrome-bg);
  backdrop-filter: var(--chrome-blur);
  -webkit-backdrop-filter: var(--chrome-blur);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 500;
  pointer-events: none;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .chrome-nav-hint:not(.hidden) {
    display: block;
  }
}

@media (min-width: 1101px) {
  .chrome-nav-hint {
    display: none !important;
  }
}


.chrome-help {
  position: absolute;
  top: 18px;
  right: 12px;
  z-index: 31;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  background: var(--chrome-bg);
  backdrop-filter: var(--chrome-blur);
  -webkit-backdrop-filter: var(--chrome-blur);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
  color: var(--text-muted);
  cursor: pointer;
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), color 0.12s, background 0.12s;
}

.chrome-help .material-symbols-outlined {
  font-size: 18px;
}

.chrome-help:hover {
  color: var(--text);
  background: rgba(40, 40, 46, 0.82);
}

/* Chat lives in chrome-brand-actions (next to runtime); Mobile/Tablet only. */
.chrome-chat-btn {
  position: relative;
  top: auto;
  right: auto;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  border-radius: 11px;
  border: none;
  background: transparent;
  box-shadow: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
}

.chrome-chat-btn.hidden {
  display: none !important;
}

.chrome-chat-btn .material-symbols-outlined {
  font-size: 20px;
}

.chrome-chat-btn:hover:not(:disabled) {
  color: var(--text);
  background: rgba(40, 40, 46, 0.82);
}

.chrome-chat-btn.active {
  background: var(--primary);
  color: #fff;
}

/* Inside red Einsatz float: inherit header-icon contrast; active = pressed. */
body.einsatz-active .chrome-chat-btn {
  background: transparent;
  color: #fff;
}
body.einsatz-active .chrome-chat-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
body.einsatz-active .chrome-chat-btn.active {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.chrome-chat-badge {
  position: absolute;
  top: -5px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e53935;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 750;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  z-index: 2;
}

.chrome-chat-badge.hidden {
  display: none !important;
}

.chrome-chat-badge--toolbar {
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  font-size: 0.62rem;
  padding: 0 4px;
}

.chrome-chat-badge--overflow {
  position: static;
  margin-left: auto;
  top: auto;
  right: auto;
  box-shadow: none;
}


/* Host red unread badge on desktop toolbar / overflow chat controls. */
#einsatz-chat-btn {
  position: relative;
}

body:has(#header-avatar:not(.hidden)) .chrome-help {
  right: 64px;
}

/* Desktop (≥721): chat lives in canvas toolbar; hide chrome slot. */
@media (min-width: 1101px) {
  .chrome-chat-btn {
    display: none !important;
  }
}



.chrome-brand {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 0 8px 0 4px;
}

.chrome-brand-main {
  min-width: 0;
  flex: 1 1 auto;
}

.chrome-brand-actions {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-left: auto;
}

.chrome-brand .header-project-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  max-width: none;
  min-width: 0;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.15;
  cursor: pointer;
}

.chrome-brand .header-title-primary {
  display: block;
  max-width: 100%;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chrome-brand .header-title-secondary {
  display: block;
  max-width: 100%;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chrome-brand .header-title-secondary:empty {
  display: none;
}

body.einsatz-active .chrome-brand .header-title-secondary {
  color: rgba(255, 255, 255, 0.82);
}

.header-context-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.header-context-close:hover {
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text);
}
.header-context-close .material-symbols-outlined {
  font-size: 18px;
}
.header-context-close.hidden { display: none !important; }

.header-einsatz-runtime {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.2rem;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  white-space: nowrap;
}
.header-einsatz-runtime.hidden { display: none !important; }

/* Clear red Einsatz chrome on the floating header */
body.einsatz-active .chrome-float--start {
  background: rgba(176, 32, 32, 0.94);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 8px 28px rgba(120, 16, 16, 0.35);
}
body.einsatz-active .chrome-float--start .header-icon-btn,
body.einsatz-active .chrome-float--start .header-project-name,
body.einsatz-active .chrome-float--start .header-context-close {
  color: #fff;
}
body.einsatz-active .chrome-float--start .header-project-name {
  color: #fff;
}
body.einsatz-active .chrome-float--start .header-icon-btn:hover:not(:disabled),
body.einsatz-active .chrome-float--start .header-context-close:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.sheet-context {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 0 12px;
  margin: 0 0 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}
.sheet-context.hidden { display: none !important; }
.sheet-context-label {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sheet-context-close {
  align-self: flex-start;
}

.chrome-avatar {
  position: absolute;
  top: 13px;
  right: 12px;
  z-index: 31;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  --avatar-tint: transparent;
  background: color-mix(in srgb, var(--chrome-bg) 30%, var(--avatar-tint) 70%);
  backdrop-filter: var(--chrome-blur);
  -webkit-backdrop-filter: var(--chrome-blur);
  box-shadow: none;
  color: var(--text);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), filter 0.12s;
}

.chrome-avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: transparent;
  line-height: 1;
  user-select: none;
}

.chrome-avatar:hover {
  filter: brightness(1.08);
}

.chrome-avatar[aria-expanded="true"] {
  filter: brightness(1.1);
}

html.account-open,
html.account-open body {
  overflow: hidden;
  overscroll-behavior: none;
}

.account-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 16px;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  background: rgba(0, 0, 0, 0.48);
}

.account-overlay.hidden {
  display: none;
}

.account-menu {
  position: relative;
  top: auto;
  right: auto;
  z-index: 1;
  width: min(380px, 100%);
  max-height: 100%;
  min-height: 0;
  flex: 0 1 auto;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--chrome-bg);
  backdrop-filter: var(--chrome-blur);
  -webkit-backdrop-filter: var(--chrome-blur);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  color: var(--text);
}

.account-menu.hidden {
  display: none;
}

.account-menu-title {
  margin: 0 0 4px;
  font-size: 0.92rem;
  font-weight: 650;
}

.account-menu-email {
  margin: 0 0 12px;
  font-size: 0.78rem;
  color: var(--text-muted);
  word-break: break-all;
}

.account-menu-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.account-menu-field label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}

.account-menu-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.22);
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
}

.account-menu-field input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.28);
}

.account-menu-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.account-menu-error {
  margin: 0 0 8px;
  min-height: 1.1em;
  font-size: 0.75rem;
  color: #f0a0a0;
}

.account-menu-error:empty {
  display: none;
}


.account-menu-logout {
  width: 100%;
  margin-top: 10px;
}

/* —— Offlinekarte (Konto-Einstellungen + Absteck) —— */
.offlinekarte-settings {
  margin: 14px 0 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.offlinekarte-settings-title {
  margin: 0 0 6px;
  font-size: 0.82rem;
  font-weight: 650;
}
.offlinekarte-settings-status {
  margin: 0 0 10px;
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.35;
}
.offlinekarte-settings-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.offlinekarte-settings-actions .btn {
  width: 100%;
  justify-content: center;
}

.offlinekarte-absteck {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}
.offlinekarte-absteck-bar {
  pointer-events: auto;
  position: absolute;
  left: 50%;
  top: max(12px, env(safe-area-inset-top, 0px));
  transform: translateX(-50%);
  width: min(560px, calc(100% - 24px));
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: var(--chrome-bg);
  backdrop-filter: var(--chrome-blur);
  -webkit-backdrop-filter: var(--chrome-blur);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
  color: var(--text);
}
.offlinekarte-absteck-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.offlinekarte-absteck-copy strong {
  font-size: 0.9rem;
  color: var(--text);
}
.offlinekarte-absteck-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.offlinekarte-absteck-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.offlinekarte-absteck-line {
  stroke: #C9A84C;
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.offlinekarte-absteck-fill {
  fill: rgba(201, 168, 76, 0.18);
  stroke: #C9A84C;
  stroke-width: 2;
}
.offlinekarte-absteck-vertex {
  fill: #C9A84C;
  stroke: #1a1408;
  stroke-width: 1.5;
}

.offlinekarte-progress {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
}
.offlinekarte-progress.open { display: flex; }
.offlinekarte-progress-panel {
  width: min(360px, calc(100% - 32px));
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--chrome-bg);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.offlinekarte-progress-msg {
  margin: 0 0 12px;
  font-size: 0.88rem;
}
.offlinekarte-progress-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.offlinekarte-progress-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: #C9A84C;
  transition: width 0.2s ease;
}
.offlinekarte-progress-fill.indeterminate {
  width: 40% !important;
  animation: offlinekarte-indeterminate 1.1s ease-in-out infinite;
}
@keyframes offlinekarte-indeterminate {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(280%); }
}


.chrome-float .header-icon-btn,
.chrome-float .btn.btn-soft {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--text-muted);
}

.chrome-float .btn.btn-soft span:not(.material-symbols-outlined) {
  display: none;
}

.chrome-float .header-icon-btn:hover:not(:disabled),
.chrome-float .btn.btn-soft:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

.chrome-float .header-icon-btn.active,
.chrome-float .btn.btn-soft.active {
  background: var(--primary);
  color: #fff;
}



.auth-banner {
  top: 12px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: min(420px, calc(100% - 24px));
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-sm);
  z-index: 90;
}

@media (min-width: 1101px) {
  /* Single map: right-edge chrome yields to Help. Avatar/? stay put. */
  body.help-open:not(.split-active) .map-controls--pane,
  body.help-open:not(.split-active) .style-fan {
    transform: translateX(calc(-1 * var(--sheet-shift)));
  }

  /* Split: Help covers the mirror pane only. Primary chrome sits at the
     left / divider (screen center) and must not shift. */
  body.split-active.help-open .split-pane--mirror .map-controls--pane,
  body.split-active.help-open .split-pane--mirror .style-fan {
    transform: translateX(calc(-1 * var(--sheet-shift)));
  }

  /* Chat slide-in (desktop): same push pattern as Hilfe. Chat rule follows so
     it overrides help-open when both are active (chat panel is wider). */
  body.chat-open:not(.split-active) .map-controls--pane,
  body.chat-open:not(.split-active) .style-fan {
    transform: translateX(calc(-1 * var(--chat-sheet-shift)));
  }
  body.split-active.chat-open .split-pane--mirror .map-controls--pane,
  body.split-active.chat-open .split-pane--mirror .style-fan {
    transform: translateX(calc(-1 * var(--chat-sheet-shift)));
  }
}

@media (max-width: 1100px) {
  :root { --sheet-width: min(300px, 86vw); }

  .app-sheet {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  .app-sheet--help,
  #help-sheet {
    left: var(--sheet-gutter);
    right: auto;
    transform: translateX(calc(-100% - 24px));
  }

  body.help-open .app-sheet--help,
  body.help-open #help-sheet {
    transform: none;
  }

  .chrome-float--start {
    width: min(var(--sheet-width), calc(100% - 24px));
    min-width: 0;
    max-width: calc(100% - 24px);
  }

  .chrome-help {
    display: none !important;
  }

  /* Mobile wind lives under style-fan via .wind-control--map (canvas.css).
     Do not park #chrome-wind-mobile between menubar and avatar. */
  .chrome-wind-mobile {
    display: none !important;
  }

}

/* Legacy mobile chrome wind slot — kept in DOM but never shown.
   Placement is .wind-control--map under the style-fan (Kartenauswahl). */
.chrome-wind-mobile {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .app-sheet,
  .chrome-help,
  .chrome-avatar,
  .map-controls--pane,
  .style-fan,
  .einsatz-chat-panel {
    transition: none;
  }
}

/* Objekte/Einsätze overlay: below menu+avatar; edges align with toolbar gutters. */
.objekte-screen {
  position: fixed;
  z-index: 280;
  top: calc(68px + var(--app-offset-top, 0px));
  left: 12px;
  right: 12px;
  bottom: calc(12px + var(--keyboard-inset, 0px));
  display: flex;
  pointer-events: none;
}

.objekte-screen.hidden {
  display: none !important;
}

body.objekte-open .objekte-screen {
  pointer-events: auto;
}

/* Hide map + layer chrome while Objekt/Einsatz/Übung selection is open. */
body.objekte-open .map-controls--pane,
body.objekte-open .style-fan,
body.objekte-open .map-side-chrome,
body.einsaetze-open .map-controls--pane,
body.einsaetze-open .style-fan,
body.einsaetze-open .map-side-chrome,
body.uebungen-open .map-controls--pane,
body.uebungen-open .style-fan,
body.uebungen-open .map-side-chrome {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Lists have no plan autosave affordance — hide cloud save icon/toast. */
body.objekte-open .save-status,
body.einsaetze-open .save-status,
body.uebungen-open .save-status {
  display: none !important;
}

/* Lock Canvas toolbar while Objekt/Einsatz/Übung selection dialog is open. */
body.objekte-open .canvas-toolbar-dock,
body.objekte-open .canvas-toolbar-dock *,
body.einsaetze-open .canvas-toolbar-dock,
body.einsaetze-open .canvas-toolbar-dock *,
body.uebungen-open .canvas-toolbar-dock,
body.uebungen-open .canvas-toolbar-dock * {
  pointer-events: none !important;
}
body.objekte-open .canvas-toolbar-dock,
body.einsaetze-open .canvas-toolbar-dock,
body.uebungen-open .canvas-toolbar-dock {
  opacity: 0.45;
}



.objekte-screen-panel {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  background: var(--chrome-bg);
  backdrop-filter: var(--chrome-blur);
  -webkit-backdrop-filter: var(--chrome-blur);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}

.objekte-screen-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 8px 14px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.objekte-screen-title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.objekte-screen-header .btn {
  flex-shrink: 0;
}

.objekte-screen.is-detail #btn-objekte-new,
.objekte-screen.is-detail #btn-einsaetze-new,
.objekte-screen.is-detail #btn-uebungen-new,
.objekte-screen.is-create #btn-objekte-new,
.objekte-screen.is-create #btn-einsaetze-new,
.objekte-screen.is-create #btn-uebungen-new {
  display: none !important;
}

.objekte-screen-back,
.objekte-screen-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: none;
  border-radius: 11px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.objekte-screen-back:hover,
.objekte-screen-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

.objekte-screen-main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: stretch;
}

.objekte-list-col {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 10px 14px 16px;
}

.objekte-screen.is-detail .objekte-list-col {
  flex: 0 0 300px;
  width: 300px;
  max-width: 48%;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.objekte-screen-loading {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-muted);
  font-size: 0.86rem;
}

.objekte-screen-loading.hidden {
  display: none !important;
}

.objekte-list-col .project-list {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

.objekte-list-empty {
  padding: 18px 8px;
  color: var(--text-muted);
  font-size: 0.84rem;
  text-align: center;
}

.objekte-detail-col {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding: 12px 16px 16px;
}

.objekte-detail-col.hidden {
  display: none !important;
}

/* Desktop: scroll wrapper is transparent to flex layout */
.objekte-detail-scroll {
  display: contents;
}

.objekte-detail-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  flex-shrink: 0;
}

.objekte-detail-footer .btn {
  flex: 0 1 auto;
}

/* Contact cards (Objekte detail) */
.objekte-contact-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}

.objekte-contact-card-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.objekte-contact-card-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.objekte-contact-card-role {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.objekte-contact-card-phones {
  font-size: 0.78rem;
  color: var(--text);
  margin-top: 2px;
  word-break: break-word;
}

.objekte-contact-card-actions {
  display: inline-flex;
  gap: 2px;
  flex-shrink: 0;
}

.objekte-contact-card-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.objekte-contact-card-actions button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

.objekte-contact-card-actions button.objekte-contact-card-delete:hover {
  color: var(--danger, #f87171);
  background: rgba(248, 113, 113, 0.12);
}

.objekte-contacts-empty {
  padding: 8px 2px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Contact edit/new page over the Objekt screen */
.objekte-contact-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  background: #16161a;
  border-radius: inherit;
  padding: 0;
}

.objekte-contact-overlay.hidden {
  display: none !important;
}

.objekte-contact-overlay-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.objekte-contact-overlay-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 10px 12px 8px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.objekte-contact-overlay-title {
  margin: 0;
  flex: 1 1 auto;
  font-size: 1rem;
  font-weight: 600;
}

.objekte-contact-overlay-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 14px;
}

.objekte-contact-overlay-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
}

@media (max-width: 1100px) {
  .objekte-screen {
    top: calc(62px + var(--app-offset-top, 0px));
    left: 8px;
    right: 8px;
    bottom: calc(8px + var(--keyboard-inset, 0px));
  }

  .objekte-screen-panel {
    border-radius: 14px;
  }

  /* Mobile: detail/create = full panel (list hidden). */
  .objekte-screen.is-detail .objekte-list-col,
  .objekte-screen.is-create .objekte-list-col {
    display: none !important;
  }

  .objekte-screen.is-detail .objekte-detail-col,
  .objekte-screen.is-create .objekte-detail-col {
    padding-bottom: 0;
    /* Flex column: scroll area + footer below (no sticky overlay) */
    overflow: hidden;
  }

  .objekte-screen.is-detail .objekte-detail-scroll,
  .objekte-screen.is-create .objekte-detail-scroll {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .objekte-screen.is-detail .objekte-detail-footer,
  .objekte-screen.is-create .objekte-detail-footer {
    position: static;
    flex-shrink: 0;
    margin-top: 0;
    padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
    /* No --surface bar: divider only; panel/chrome shows through (#61) */
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .objekte-contact-overlay {
    border-radius: inherit;
  }
}

@media (prefers-reduced-motion: reduce) {
  .objekte-screen-panel {
    transition: none;
  }
}


.objekte-docs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  flex: 1 1 auto;
}

.objekte-docs-split {
  display: flex;
  align-items: stretch;
  gap: 10px;
  min-height: 180px;
  flex: 1 1 auto;
}

.objekte-docs-list-pane {
  flex: 1 1 50%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.objekte-docs-preview-pane {
  flex: 1 1 50%;
  min-width: 0;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

.objekte-docs-preview-pane.is-empty {
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.objekte-docs-preview-pane img,
.objekte-docs-preview-pane iframe {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
  background: #111;
}

@media (max-width: 1100px) {
  /* Mobile detail = one scroll page: contacts/docs grow with content (no nested scroll). */
  .objekte-docs {
    flex: 0 0 auto;
    min-height: auto;
  }
  .objekte-docs-split {
    flex-direction: column;
    flex: 0 0 auto;
    min-height: 0;
  }
  .objekte-docs-list-pane {
    overflow: visible;
    min-height: auto;
  }
  .objekte-docs-list,
  .project-meta-contacts-list {
    overflow: visible;
    max-height: none;
  }
  .objekte-docs-preview-pane {
    display: none !important;
  }
}

.objekte-docs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
}

.objekte-docs-head .btn {
  padding: 5px 8px;
  font-size: 0.75rem;
}

.objekte-docs-hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.objekte-docs-hint.is-error {
  color: var(--danger);
}

.objekte-docs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.objekte-docs-empty {
  padding: 10px 4px;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.objekte-docs-item {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  cursor: pointer;
}

.objekte-docs-item.is-preview-active {
  border-color: rgba(110, 168, 254, 0.65);
  box-shadow: 0 0 0 1px rgba(110, 168, 254, 0.35);
  background: rgba(110, 168, 254, 0.08);
}

.objekte-docs-thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: var(--surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--text-muted);
  border: none;
  padding: 0;
  cursor: pointer;
}

.objekte-docs-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.objekte-docs-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.objekte-docs-name {
  font-size: 0.84rem;
  font-weight: 550;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.objekte-docs-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.objekte-docs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
}

.objekte-docs-actions .btn {
  padding: 5px 8px;
  font-size: 0.72rem;
}

.objekte-docs-eye-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 4px 6px;
}

.objekte-docs-eye-btn .material-symbols-outlined {
  font-size: 1.1rem;
  line-height: 1;
}

.objekte-docs-lightbox {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  background: rgba(8, 8, 10, 0.92);
  padding: 12px;
}

.objekte-docs-lightbox.hidden {
  display: none !important;
}

.objekte-docs-lightbox-close {
  align-self: flex-end;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  cursor: pointer;
}

.objekte-docs-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.16);
}

.objekte-docs-lightbox-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}

.objekte-docs-lightbox-body img,
.objekte-docs-lightbox-body iframe {
  max-width: 100%;
  max-height: 100%;
  border: 0;
  background: #111;
}

.objekte-docs-lightbox-body iframe {
  width: 100%;
  height: 100%;
}

.objekte-docs-lightbox-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--text);
  text-align: center;
}



/* ── Einsätze / Einsatzplan (Phase 1) ── */
body.einsaetze-open .objekte-screen#einsaetze-screen {
  pointer-events: auto;
}

body.uebungen-open .objekte-screen#uebungen-screen {
  pointer-events: auto;
}

.einsatzplan-banner {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(245, 197, 24, 0.95);
  color: #1a1a1a;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  pointer-events: auto;
}

.einsatzplan-banner.hidden {
  display: none !important;
}

.einsatzplan-banner-label {
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 0.95rem;
}

.einsatzplan-banner .btn {
  background: rgba(0, 0, 0, 0.12);
  color: #1a1a1a;
}

.einsatz-map-actions {
  position: absolute;
  top: 58px;
  left: 12px;
  z-index: 85;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  pointer-events: auto;
}

.einsatz-map-actions.hidden {
  display: none !important;
}

body.einsatz-active .einsatz-map-actions {
  top: 58px;
}

body.einsatzplan-readonly .workspace,
body.einsatzplan-readonly #workspace {
  box-shadow: inset 0 0 0 4px #F5C518;
}

body.einsatzplan-readonly .shape-toolbar,
body.einsatzplan-readonly .canvas-toolbar,
body.einsatzplan-readonly .toolbar-dock,
body.einsatzplan-readonly .layer-options,
body.einsatzplan-readonly .chrome-float--end,
body.einsatzplan-readonly #btn-project-menu {
  pointer-events: none !important;
  opacity: 0.45;
}

body.einsatzplan-readonly .einsatzplan-banner,
body.einsatzplan-readonly .einsatzplan-banner * {
  pointer-events: auto !important;
  opacity: 1 !important;
}


/* ── Einsätze Phase 2 — Zeitraffer ── */
.einsatz-timeline-banner {
  background: rgba(56, 120, 196, 0.95);
  color: #fff;
}

.einsatz-timeline-banner .btn {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.einsatz-timeline-banner-hint {
  font-size: 0.85rem;
  opacity: 0.92;
}

body.einsatz-timeline-replay .workspace,
body.einsatz-timeline-replay #workspace,
body.einsatz-zeitraffer-open .workspace,
body.einsatz-zeitraffer-open #workspace {
  box-shadow: inset 0 0 0 2px #3878c4;
}

body.einsatz-timeline-replay .shape-toolbar,
body.einsatz-timeline-replay .canvas-toolbar,
body.einsatz-timeline-replay .toolbar-dock,
body.einsatz-timeline-replay .layer-options,
body.einsatz-timeline-replay .chrome-float--end,
body.einsatz-timeline-replay #btn-project-menu {
  pointer-events: none !important;
  opacity: 0.45;
}

body.einsatz-timeline-replay .einsatz-timeline-banner,
body.einsatz-timeline-replay .einsatz-timeline-banner *,
body.einsatz-timeline-replay .einsatz-timeline-panel,
body.einsatz-timeline-replay .einsatz-timeline-panel *:not(.einsatz-timeline-tick--pending):not(.einsatz-timeline-item--pending),
body.einsatz-timeline-replay #canvas-toolbar-einsatz,
body.einsatz-timeline-replay #canvas-toolbar-einsatz *,
body.einsatz-timeline-replay #canvas-toolbar-overflow,
body.einsatz-timeline-replay #canvas-toolbar-overflow *,
body.einsatz-timeline-replay #canvas-overflow-einsatz-timeline,
body.einsatz-timeline-replay #canvas-overflow-einsatz-timeline-snapshot,
body.einsatz-timeline-replay #canvas-overflow-einsatz-close,
body.einsatz-timeline-replay #einsatz-timeline-panel-close,
body.einsatz-timeline-replay #header-context-close {
  pointer-events: auto !important;
  opacity: 1 !important;
}

#canvas-tb-einsatz-timeline.active,
#canvas-overflow-einsatz-timeline.active {
  outline: 2px solid rgba(56, 120, 196, 0.85);
}

.einsatz-timeline-panel {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 88;
  max-height: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid #3878c4;
  background: rgba(18, 24, 32, 0.92);
  color: #f2f5f8;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(56, 120, 196, 0.35);
  pointer-events: auto;
}

/* Beam / scrubber strip only until «Liste» opens the selection list. */
.einsatz-timeline-panel:not(.einsatz-timeline-panel--list-open) {
  max-height: none;
}

.einsatz-timeline-panel--list-open {
  max-height: min(42vh, 320px);
}

#einsatz-timeline-list-btn.active {
  outline: 2px solid rgba(56, 120, 196, 0.85);
}

.einsatz-timeline-panel.hidden {
  display: none !important;
}

.einsatz-timeline-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.einsatz-timeline-close-btn {
  margin-left: auto;
  flex: 0 0 auto;
  min-width: 36px;
  padding-inline: 8px;
}

.einsatz-timeline-close-btn .material-symbols-outlined {
  font-size: 20px;
  line-height: 1;
}

.einsatz-timeline-meta {
  flex: 1;
  font-size: 0.85rem;
  opacity: 0.9;
}

.einsatz-timeline-scrubber {
  width: 100%;
  accent-color: #5aa0ff;
}

.einsatz-timeline-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  flex: 1 1 auto;
}

.einsatz-timeline-list.hidden {
  display: none !important;
}

.einsatz-timeline-empty {
  opacity: 0.75;
  font-size: 0.9rem;
  padding: 6px 2px;
}

.einsatz-timeline-item-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.einsatz-timeline-item.active .einsatz-timeline-item-btn,
.einsatz-timeline-item-btn:hover {
  background: rgba(90, 160, 255, 0.28);
}

.einsatz-timeline-title {
  font-weight: 700;
  white-space: nowrap;
}

.einsatz-timeline-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(120, 180, 255, 0.28);
  color: #d7e9ff;
  font-size: 0.82rem;
  font-weight: 600;
  max-width: min(100%, 420px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.einsatz-timeline-chip[hidden] {
  display: none !important;
}

.einsatz-timeline-list-btn .einsatz-timeline-list-arrow,
#einsatz-timeline-list-btn .einsatz-timeline-list-arrow {
  font-size: 18px;
  line-height: 1;
  vertical-align: middle;
  margin-left: 2px;
  transition: transform 0.15s ease;
}


.einsatz-timeline-axis {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 2px 4px;
}

.einsatz-timeline-ticks {
  position: relative;
  height: 12px;
  margin: 0 8px;
}

.einsatz-timeline-tick {
  position: absolute;
  top: 0;
  width: 0;
  height: 10px;
  border-left: 1.5px solid rgba(242, 245, 248, 0.55);
  transform: translateX(-50%);
}

.einsatz-timeline-tick--major {
  height: 12px;
  border-left-width: 2px;
  border-left-color: rgba(242, 245, 248, 0.9);
}

.einsatz-timeline-tick--pending {
  border-left-color: rgba(242, 245, 248, 0.2);
  opacity: 0.42;
}

.einsatz-timeline-item--pending {
  opacity: 0.45;
}

.einsatz-timeline-item--pending .einsatz-timeline-item-btn {
  color: rgba(242, 245, 248, 0.58);
}

.einsatz-timeline-axis .einsatz-timeline-scrubber {
  margin: 0 4px;
}

.einsatz-timeline-axis-labels {
  position: relative;
  height: 34px;
  margin: 0 8px 2px;
}

.einsatz-timeline-axis-label {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  text-align: center;
  font-size: 0.68rem;
  line-height: 1.15;
  color: rgba(242, 245, 248, 0.92);
  white-space: nowrap;
  pointer-events: none;
}

.einsatz-timeline-axis-label .etl-time {
  display: block;
  font-weight: 600;
}

.einsatz-timeline-axis-label .etl-dur {
  display: block;
  opacity: 0.8;
  font-variant-numeric: tabular-nums;
}

.einsatz-timeline-axis-label.is-current .etl-time {
  color: #9ec9ff;
}

.einsatz-timeline-dur-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(200, 210, 220, 0.22);
  color: #e8eef4;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.einsatz-timeline-item-btn {
  align-items: center;
}

.einsatz-timeline-item-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.einsatz-timeline-item-sub {
  font-size: 0.78rem;
  opacity: 0.75;
}

.einsatz-timeline-item-rev {
  opacity: 0.75;
  font-size: 0.8rem;
}

/* Zeitraffer an (panel open, live): symbol picker off; thin blue frame via body.einsatz-zeitraffer-open */
body.einsatz-zeitraffer-open:not(.einsatz-timeline-replay) #canvas-toolbar-symbols,
body.einsatz-zeitraffer-open:not(.einsatz-timeline-replay) .canvas-toolbar-symbols,
body.einsatz-zeitraffer-open:not(.einsatz-timeline-replay) .canvas-symbol-popover,
body.einsatz-zeitraffer-open:not(.einsatz-timeline-replay) .canvas-symbol-type-popover,
body.einsatz-zeitraffer-open:not(.einsatz-timeline-replay) .canvas-tb-btn.canvas-tb-symbol,
body.einsatz-zeitraffer-open:not(.einsatz-timeline-replay) .canvas-tool-pick-symbol {
  pointer-events: none !important;
  opacity: 0.4;
}

body.einsatz-zeitraffer-open .einsatz-timeline-panel,
body.einsatz-zeitraffer-open .einsatz-timeline-panel *:not(.einsatz-timeline-tick--pending):not(.einsatz-timeline-item--pending),
body.einsatz-zeitraffer-open #canvas-tb-einsatz-timeline,
body.einsatz-zeitraffer-open #einsatz-map-actions,
body.einsatz-zeitraffer-open #einsatz-map-actions * {
  pointer-events: auto !important;
  opacity: 1 !important;
}

/* Desktop: lift Kartenauswahl + wind above Zeitraffer. Mirror chrome unchanged. */
@media (min-width: 1101px) {
  body.einsatz-zeitraffer-open .split-pane--primary .style-fan {
    bottom: calc(16px + var(--einsatz-timeline-height, 0px));
  }
  body.einsatz-zeitraffer-open .split-pane--primary .wind-control--map {
    bottom: calc(16px + 52px + 12px + 8px + var(--einsatz-timeline-height, 0px));
  }
}


/* Einsätze/Übungen: create hides list (detail keeps split on desktop). */
.objekte-screen#einsaetze-screen.is-create .objekte-list-col,
.objekte-screen#uebungen-screen.is-create .objekte-list-col {
  display: none !important;
}

.objekte-screen#einsaetze-screen input[readonly] {
  opacity: 0.85;
  cursor: default;
  background: rgba(255, 255, 255, 0.04);
}


/* Einsatz detail field rebuild */
.einsatz-detail-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: end;
}

.einsatz-detail-datetime {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.einsatz-detail-divider {
  height: 1px;
  margin: 4px 0 2px;
  background: rgba(255, 255, 255, 0.1);
  border: 0;
}

.einsatz-melder-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 1100px) {
  .einsatz-detail-top,
  .einsatz-melder-row {
    grid-template-columns: 1fr;
  }
}

/* Einsatz map marker popup / mobile toolbar */
.einsatz-poi-overlay {
  position: absolute;
  z-index: 55;
  min-width: 200px;
  max-width: min(320px, calc(100vw - 24px));
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--chrome-bg);
  backdrop-filter: var(--chrome-blur);
  -webkit-backdrop-filter: var(--chrome-blur);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
  color: var(--text);
  pointer-events: auto;
}

.einsatz-poi-overlay.hidden { display: none !important; }

.wasser-poi-overlay-oos {
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

.wasser-poi-overlay-oos.is-oos {
  background: #FFF3E0;
  border-color: #FF9800;
  color: #E65100;
}

.einsatz-poi-overlay-title {
  margin: 0 0 2px;
  padding-right: 28px;
  font-size: 0.88rem;
  font-weight: 650;
}

.einsatz-poi-overlay-addr,
.einsatz-poi-overlay-zeit {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.einsatz-poi-overlay-zeit { margin-top: 4px; }

.einsatz-poi-overlay-x {
  position: absolute;
  top: 4px;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.einsatz-poi-overlay-x:hover,
.einsatz-poi-overlay-x:focus-visible {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}

.einsatz-poi-overlay-x .material-symbols-outlined {
  font-size: 18px;
  line-height: 1;
}

.einsatz-poi-overlay-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.einsatz-poi-overlay-actions .btn {
  padding: 5px 8px;
  font-size: 0.74rem;
}

@media (max-width: 1100px) {
  .einsatz-poi-overlay {
    left: 50% !important;
    right: auto !important;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    top: auto !important;
    transform: translateX(-50%);
    width: min(360px, calc(100vw - 20px));
  }
}