/* Mobile Lage chrome — compact (phone ≤720 + tablet ≤1100). Desktop ≥1101: see desktop-lage.css. */

@media (max-width: 1100px) {
  :root {
    --glass-bg: rgba(28, 28, 32, 0.78);
    --glass-blur: 20px;
    --glass-border: rgba(255, 255, 255, 0.10);
    --glass-shadow: 0 8px 28px rgba(0, 0, 0, 0.38);
    --radius-chrome: 18px;
    --radius-btn: 14px;
  }

  .chrome-hud-accent {
    display: none;
  }

  .chrome-float,
  .lage-status,
  .lage-dock,
  .map-side-chrome .map-control-btn,
  .map-side-chrome .style-fan-rail {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
  }

  .chrome-float--start {
    top: calc(8px + env(safe-area-inset-top, 0px));
    left: 16px;
    right: 16px;
    width: auto;
    min-width: 0;
    max-width: none;
    height: 56px;
    padding: 0 8px 0 12px;
    border-radius: var(--radius-chrome);
    gap: 8px;
    /* Keep the 1px line in the border box. A shadow ring is clipped, and
       backdrop-filter covers a border unless the fill stops at the padding. */
    background-clip: padding-box;
    -webkit-background-clip: padding-box;
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: var(--glass-shadow);
  }

  body.einsatz-active .chrome-float--start {
    background: var(--glass-bg);
    background-clip: padding-box;
    -webkit-background-clip: padding-box;
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: var(--glass-shadow);
  }

  /* Kind frame is the ::after only. A 1px element border would sit outside it
     (inset 0 is the padding edge) and show a second line or a gap. */
  body.accent-einsatz.einsatz-active .chrome-float--start,
  body.accent-einsatz:not(.einsatz-active) .chrome-float--start,
  body.accent-objekt .chrome-float--start,
  body.accent-uebung.einsatz-active .chrome-float--start,
  body.accent-uebung:not(.einsatz-active) .chrome-float--start {
    border-width: 0;
  }

  body.accent-einsatz.einsatz-active .chrome-float--start::after,
  body.accent-einsatz:not(.einsatz-active) .chrome-float--start::after,
  body.accent-objekt .chrome-float--start::after,
  body.accent-uebung.einsatz-active .chrome-float--start::after,
  body.accent-uebung:not(.einsatz-active) .chrome-float--start::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 3;
    border: 1px solid transparent;
    border-left-width: 3px;
  }

  body.accent-einsatz.einsatz-active .chrome-float--start::after {
    border-color: #e53935;
  }

  body.accent-einsatz:not(.einsatz-active) .chrome-float--start::after {
    border-color: #71717a;
  }

  body.accent-objekt .chrome-float--start::after {
    border-color: #1e88e5;
  }

  body.accent-uebung.einsatz-active .chrome-float--start::after {
    border-color: #fb8c00;
  }

  /* Abgeschlossene Übungen: gray (same as soft-closed Einsatz). */
  body.accent-uebung:not(.einsatz-active) .chrome-float--start::after {
    border-color: #71717a;
  }

  body.einsatz-active .chrome-float--start .header-project-name,
  body.einsatz-active .chrome-float--start .header-icon-btn,
  body.einsatz-active .chrome-float--start .header-context-close {
    color: #fafafa;
  }

  /* Mobile Lage chrome also applies to soft-closed Einsatz contexts. */
  body.lage-chrome #btn-project-menu,
  body.lage-chrome #header-context-close {
    display: none !important;
  }

  /* Mobile: never show top-right user/avatar — Konto only via Mehr. */
  #header-avatar,
  .chrome-avatar {
    display: none !important;
  }

  .header-title-primary {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.15;
    color: #fafafa;
  }

  .header-title-secondary {
    font-size: 12px;
    font-weight: 400;
    color: #a1a1aa;
  }

  .chrome-brand,
  #header-project-name,
  .header-title-primary,
  .header-title-secondary {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }

  .header-einsatz-runtime {
    min-width: 0;
    padding: 0;
    background: transparent;
    font-size: 16px;
    font-weight: 500;
    color: #fafafa;
  }

  body.accent-einsatz:not(.einsatz-active) .header-einsatz-runtime {
    display: none !important;
  }

  /* Chat sits in chrome-brand-actions next to runtime (not viewport-right). */
  .chrome-chat-btn,
  body.einsatz-active .chrome-chat-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 11px;
    background: transparent;
    border: none;
    box-shadow: none;
    color: #fafafa;
  }

  body.einsatz-active .chrome-chat-btn.active {
    background: rgba(255, 255, 255, 0.16);
    color: #fafafa;
  }

  .chrome-chat-badge {
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0;
    line-height: 16px;
    font-size: 10px;
    font-weight: 600;
    background: var(--primary);
  }

  /* Cluster: Stil, GPS, 2D/3D, Kompass */
  .map-side-chrome {
    top: calc(8px + env(safe-area-inset-top, 0px) + 56px + 12px);
    right: 12px;
    gap: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .map-side-chrome .style-fan {
    order: 0;
  }

  .map-side-chrome .wind-control--map {
    order: 1;
  }

  .map-side-chrome .map-controls--pane {
    order: 2;
  }

  .map-side-chrome #map-gps-btn { order: 1; }
  .map-side-chrome [data-pane-axonometry] { order: 2; }
  .map-side-chrome [data-pane-compass] { order: 3; }

  .map-side-chrome .map-controls--pane:not(.hidden),
  .map-side-chrome:has(.style-fan.open) .map-controls--pane:not(.hidden) {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
  }

  .map-side-chrome [data-pane-split],
  .map-side-chrome .map-pitch-control {
    display: none !important;
  }

  .map-side-chrome .map-layers-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    order: 0;
    position: relative;
  }

  .map-side-chrome [data-pane-layers] {
    display: flex !important;
    width: 40px;
    height: 40px;
    order: 0;
  }

  .map-side-chrome .style-fan {
    position: relative;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    order: 0;
  }

  .map-side-chrome .style-fan.open {
    position: relative;
    right: auto;
    bottom: auto;
    margin: 0;
  }

  .map-side-chrome .style-fan.open .style-fan-rail {
    position: absolute;
    right: 0;
    top: 0;
    flex-direction: row;
    z-index: 5;
  }

  body.lage-chrome .map-side-chrome .wind-control--map:not(.hidden) {
    display: flex !important;
    order: 1;
    position: static;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-btn);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    pointer-events: auto;
    color: #fff;
  }

  .map-side-chrome .wind-control--map [data-wind-arrow] {
    filter: none;
  }

  .map-side-chrome .wind-control--map [data-wind-arrow] path {
    fill: #fff;
    filter: none;
    stroke: none;
  }

  .map-side-chrome .wind-control--map [data-wind-speed] {
    color: #fff;
    text-shadow: none;
  }

  body.lage-chrome .map-side-chrome .wind-control--map [data-wind-arrow] {
    filter: none;
  }

  body.lage-chrome .map-side-chrome .wind-control--map [data-wind-arrow] path {
    fill: #fff !important;
    filter: none;
    stroke: none;
  }

  body.lage-chrome .map-side-chrome .wind-control--map [data-wind-speed] {
    color: #fff !important;
    text-shadow: none;
    font-size: 8px;
    font-weight: 700;
  }

  .map-side-chrome .map-control-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-btn);
    color: #fafafa;
    pointer-events: auto;
  }

  .map-side-chrome .map-control-btn .material-symbols-outlined {
    font-size: 22px !important;
  }

  .map-side-chrome .map-control-btn.map-gps-follow .material-symbols-outlined,
  body.gps-on .map-side-chrome #map-gps-btn .material-symbols-outlined {
    color: var(--nav-accent);
  }

  /* Text-only 2D/3D tile — cube icon removed (no icon-column layout). */
  .map-axonometry-btn {
    flex-direction: row;
    gap: 0;
  }

  .map-axonometry-cube {
    display: none !important;
  }

  .map-axonometry-btn .map-axonometry-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1;
  }

  .map-axonometry-btn.active {
    background: var(--surface-3);
  }

  .map-side-chrome .style-fan {
    order: 0;
  }

  .map-side-chrome .style-fan-rail {
    padding: 6px;
    border-radius: var(--radius-btn);
  }

  .map-side-chrome .style-fan-tile {
    --fan-size: 40px;
    border-radius: 14px;
  }

  .map-side-chrome .style-fan-rail {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
  }

  .map-side-chrome .style-fan:not(.open) .style-fan-tile.active {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-btn);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
  }

  /* Status + Dock */
  .lage-status,
  .lage-dock {
    display: flex;
    position: absolute;
    left: 16px;
    right: 16px;
    pointer-events: auto;
    border-radius: var(--radius-chrome);
  }

  .lage-status {
    z-index: 28;
  }

  .lage-dock {
    z-index: 320;
  }

  .lage-status.hidden,
  .lage-dock.hidden {
    display: none !important;
  }

  .lage-dock {
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    height: 64px;
    align-items: stretch;
    padding: 4px;
    gap: 0;
    touch-action: none;
  }

  .lage-status {
    bottom: calc(8px + env(safe-area-inset-bottom, 0px) + 64px + 8px);
    min-height: 0;
    height: auto;
    padding: 10px 12px;
    gap: 8px;
    flex-direction: column;
  }

  .lage-status-x {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #fafafa;
  }

  .lage-status-cols {
    display: flex;
    gap: 0;
    min-width: 0;
    max-width: 100%;
  }

  .lage-status-extra {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
  }

  .lage-status-extra.hidden {
    display: none !important;
  }

  .lage-status-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .lage-status-col + .lage-status-col {
    border-left: 1px solid rgba(255, 255, 255, 0.10);
    padding-left: 12px;
    margin-left: 12px;
  }

  .lage-status-head {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    border: none;
    background: transparent;
    color: #a1a1aa;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    padding: 0;
    text-align: left;
    cursor: pointer;
  }

  .lage-status-head-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .lage-status-head .material-symbols-outlined {
    flex-shrink: 0;
    font-size: 14px;
    color: #a1a1aa;
  }

  .lage-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--enroute, #d97706);
    flex-shrink: 0;
  }

  .lage-status-dot--scene {
    background: #e53935;
  }

  .lage-status-rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .lage-status-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    border: none;
    background: transparent;
    color: #fafafa;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 0;
    text-align: left;
    cursor: pointer;
  }

  .lage-status-row > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .lage-status-adf {
    flex: none;
    font-weight: 400;
    color: #a1a1aa;
  }

  .lage-status-more,
  .lage-status-empty {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 500;
    color: #a1a1aa;
  }

  .lage-dock-slot {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: none;
    border-radius: 14px;
    background: transparent;
    color: #d4d4d8;
    cursor: pointer;
    padding: 0;
  }

  .lage-dock-slot .material-symbols-outlined {
    font-size: 22px;
  }

  .lage-dock-label {
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
  }

  .lage-dock-slot.is-active {
    background: rgba(198, 40, 40, 0.16);
    color: #fafafa;
  }

  .lage-dock-fruw {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background:
      linear-gradient(90deg, #c62828 50%, #1565c0 50%) top / 100% 50% no-repeat,
      linear-gradient(90deg, #2e7d32 50%, #f9a825 50%) bottom / 100% 50% no-repeat;
  }

  .lage-dock-slot .lage-dock-symbol {
    width: 22px;
    height: 22px;
    object-fit: contain;
    display: block;
  }

  body.lage-chrome .canvas-toolbar-core,
  body.lage-chrome .canvas-toolbar-draw,
  body.lage-chrome .canvas-toolbar-overflow,
  body.idle-chrome .canvas-toolbar-core,
  body.idle-chrome .canvas-toolbar-draw,
  body.idle-chrome .canvas-toolbar-overflow,
  body.objekt-chrome .canvas-toolbar-core,
  body.objekt-chrome .canvas-toolbar-draw,
  body.objekt-chrome .canvas-toolbar-overflow {
    display: none !important;
  }

  body.lage-chrome .canvas-toolbar-dock,
  body.idle-chrome .canvas-toolbar-dock,
  body.objekt-chrome .canvas-toolbar-dock {
    bottom: calc(8px + env(safe-area-inset-bottom, 0px) + 64px + 8px);
    left: 16px;
    right: 16px;
  }

  body.lage-chrome:has(.lage-status:not(.hidden)) .canvas-toolbar-dock {
    bottom: calc(8px + env(safe-area-inset-bottom, 0px) + 64px + 8px + 96px);
  }

  body.lage-chrome .workspace,
  body.idle-chrome .workspace,
  body.objekt-chrome .workspace {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }

  .lage-dock-badge {
    position: absolute;
    top: 4px;
    right: calc(50% - 22px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
  }

  .lage-dock-slot {
    position: relative;
  }

  .lage-sheet {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  .lage-sheet.lage-sheet--more {
    z-index: 410;
  }

  .lage-sheet.hidden {
    display: none !important;
  }

  .lage-sheet-scrim {
    position: absolute;
    inset: 0;
    border: none;
    background: rgba(0, 0, 0, 0.45);
    padding: 0;
  }

  .lage-sheet-panel {
    position: relative;
    max-height: 72vh;
    display: flex;
    flex-direction: column;
    border-radius: 18px 18px 0 0;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    animation: lage-sheet-in 280ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  @keyframes lage-sheet-in {
    from { transform: translateY(12px); opacity: 0.6; }
    to { transform: none; opacity: 1; }
  }

  .lage-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 8px;
  }

  .lage-sheet-title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
  }

  .lage-sheet-x {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #fafafa;
  }

  .lage-sheet-body {
    overflow-y: auto;
    padding: 4px 8px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    scrollbar-gutter: auto;
  }

  .lage-sheet-sec {
    margin: 10px 0 4px;
    font-size: 12px;
    font-weight: 500;
    color: #a1a1aa;
  }

  .lage-sheet-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    border: none;
    border-radius: 12px;
    background: rgba(18, 18, 22, 0.72);
    color: #fafafa;
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    padding: 0 12px;
    text-align: left;
  }

  .lage-sheet-item .material-symbols-outlined {
    font-size: 22px;
    color: #fff;
  }

  .lage-sheet-empty {
    margin: 12px 0;
    color: #a1a1aa;
    font-size: 14px;
  }

  /* Shared Symbole / Ereignisse / Fahrzeuge tiles — slightly narrower 5-col row. */
  .lage-symbol-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    padding-inline: 10px;
    max-width: 100%;
    box-sizing: border-box;
  }

  .lage-symbol-cell {
    aspect-ratio: 1;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    padding: 4px;
  }

  .lage-symbol-cell img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .lage-sheet--popover {
    justify-content: flex-end;
    pointer-events: none;
  }

  .lage-sheet--popover .lage-sheet-scrim {
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.18);
  }

  .lage-sheet--popover .lage-sheet-panel {
    pointer-events: auto;
    margin: 0 4px calc(8px + env(safe-area-inset-bottom, 0px) + 64px + 8px);
    max-height: 40vh;
    border-radius: 18px;
    animation: lage-pop-in 160ms ease-out;
  }

  @keyframes lage-pop-in {
    from { transform: translateY(4px); opacity: 0; }
    to { transform: none; opacity: 1; }
  }

  body.lage-sheet-open .lage-status {
    opacity: 0.35;
    pointer-events: none;
  }

  body.idle-chrome #btn-project-menu,
  body.idle-chrome #header-context-close,
  body.objekt-chrome #btn-project-menu,
  body.objekt-chrome #header-context-close {
    display: none !important;
  }

  body.idle-chrome .chrome-hud-accent {
    display: none !important;
  }


  .lage-fleet-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .lage-fleet-main {
    border: none;
    background: transparent;
    color: #fafafa;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    padding: 0;
  }

  .lage-fleet-chips {
    display: flex;
    gap: 8px;
  }

  .lage-fleet-chip {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: transparent;
    color: #a1a1aa;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 10px;
  }

  .lage-fleet-chip.is-active {
    background: rgba(198, 40, 40, 0.16);
    color: #fafafa;
    border-color: transparent;
  }

  @media (prefers-reduced-motion: reduce) {
    .lage-sheet-panel,
    body.absprachepunkte-window-open .absprachepunkte-panel {
      animation: none;
    }
  }

  /* Lists — same glass as Lage */
  body.einsaetze-open .objekte-screen,
  body.objekte-open .objekte-screen,
  body.uebungen-open .objekte-screen {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  body.einsaetze-open .objekte-screen-panel,
  body.objekte-open .objekte-screen-panel,
  body.uebungen-open .objekte-screen-panel {
    border-radius: 0;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: none;
    box-shadow: none;
    animation: lage-detail-cover 360ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  body.einsaetze-open .workspace,
  body.objekte-open .workspace,
  body.uebungen-open .workspace,
  body.einsaetze-open .map-side-chrome,
  body.objekte-open .map-side-chrome,
  body.uebungen-open .map-side-chrome {
    visibility: hidden;
    pointer-events: none;
  }

  body.einsaetze-open .chrome-float--start,
  body.objekte-open .chrome-float--start,
  body.uebungen-open .chrome-float--start {
    left: 0;
    right: 0;
    top: 0;
    width: auto;
    max-width: none;
    border-radius: 0;
    height: calc(56px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    z-index: 360;
    animation: lage-hud-cover 360ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  body.einsaetze-open .lage-status,
  body.objekte-open .lage-status,
  body.uebungen-open .lage-status {
    display: none !important;
  }

  .einsaetze-new-btn,
  #btn-objekte-new,
  #btn-uebungen-new,
  #btn-einsaetze-new {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 420;
    width: 56px;
    height: 56px;
    min-width: 56px;
    padding: 0;
    border-radius: 50%;
    border: none;
    color: #fff;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
  }

  #btn-objekte-new .material-symbols-outlined,
  #btn-uebungen-new .material-symbols-outlined,
  #btn-einsaetze-new .material-symbols-outlined {
    font-size: 30px;
  }

  #btn-objekte-new,
  #btn-objekte-new:hover:not(:disabled) {
    background: #1e88e5;
  }

  #btn-uebungen-new,
  #btn-uebungen-new:hover:not(:disabled) {
    background: #fb8c00;
  }

  .einsaetze-new-btn-label {
    display: none;
  }

  .einsaetze-tabs {
    display: flex;
    gap: 18px;
    padding: 4px 16px 10px;
  }

  .objekte-screen.is-detail .einsaetze-tabs,
  .objekte-screen.is-create .einsaetze-tabs {
    display: none;
  }

  .einsaetze-tab {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    border-bottom: 2px solid transparent;
    outline: none;
    background: transparent;
    color: #a1a1aa;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    padding: 6px 0 8px;
    cursor: pointer;
    box-shadow: none;
  }

  .einsaetze-tab.is-active {
    color: #fafafa;
    border-bottom-color: #fafafa;
    box-shadow: none;
  }

  body.einsaetze-open .objekte-screen:not(.is-detail):not(.is-create) .objekte-screen-header {
    border-bottom: none;
  }

  #einsaetze-list .project-list-item,
  #einsaetze-list .project-list-item.is-active,
  #einsaetze-list .project-list-item.is-selected {
    border-left-width: 0;
    border-right-width: 0;
  }

  body.einsaetze-open .objekte-list-col,
  body.objekte-open .objekte-list-col,
  body.uebungen-open .objekte-list-col {
    padding-bottom: 0;
  }

  #einsaetze-list.project-list,
  #project-list.project-list,
  #uebungen-list.project-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 12px calc(16px + 56px + 16px + env(safe-area-inset-bottom, 0px));
    gap: 10px;
    display: flex;
    flex-direction: column;
  }

  #einsaetze-list .project-list-item,
  #project-list .project-list-item,
  #uebungen-list .project-list-item {
    flex: 0 0 auto;
  }

  #einsaetze-list .project-list-item,
  #project-list .project-list-item,
  #uebungen-list .project-list-item {
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
  }

  #einsaetze-list .project-list-open,
  #project-list .project-list-open,
  #uebungen-list .project-list-open {
    padding: 12px 14px 12px 16px;
  }

  #einsaetze-list .project-list-line1-main,
  #project-list .project-list-line1-main,
  #uebungen-list .project-list-line1-main {
    font-size: 16px;
    font-weight: 600;
  }

  #einsaetze-list .project-list-badge,
  #project-list .project-list-badge,
  #uebungen-list .project-list-badge {
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    background: var(--primary);
    color: #fff;
  }

  #einsaetze-list .project-list-badge.is-closed {
    background: var(--closed, #71717a);
  }

  /* Context toolbars keep function, glass look */
  body.lage-chrome .canvas-toolbar,
  body.idle-chrome .canvas-toolbar,
  body.objekt-chrome .canvas-toolbar {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: var(--radius-chrome);
  }

  body.lage-chrome .canvas-tb-btn,
  body.idle-chrome .canvas-tb-btn,
  body.objekt-chrome .canvas-tb-btn {
    border-radius: var(--radius-btn);
  }

  body.lage-chrome .map-side-chrome .wind-control--map [data-wind-arrow] {
    filter: none;
  }

  body.lage-chrome .map-side-chrome .wind-control--map [data-wind-arrow] path {
    fill: #fff !important;
    filter: none;
    stroke: none;
  }

  body.lage-chrome .map-side-chrome .wind-control--map [data-wind-speed] {
    color: #fff !important;
    text-shadow: none;
    font-size: 8px;
    font-weight: 600;
  }

  /* Detail forms */
  .objekte-detail-col .export-field,
  .objekte-detail-scroll .export-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .objekte-detail-col .export-field > span,
  .objekte-detail-scroll .export-field > span {
    font-size: 12px;
    font-weight: 500;
    color: #a1a1aa;
  }

  .objekte-detail-col input,
  .objekte-detail-col select,
  .objekte-detail-col textarea,
  .objekte-detail-scroll input,
  .objekte-detail-scroll select,
  .objekte-detail-scroll textarea,
  .objekte-screen .export-field select {
    min-height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background-color: rgba(255, 255, 255, 0.05);
    color: #fafafa;
    font: inherit;
    padding: 10px 12px;
  }

  .objekte-screen select,
  .objekte-screen .export-field select {
    width: 100%;
  }

  .objekte-detail-footer .btn,
  .objekte-contact-overlay-footer .btn {
    min-height: 44px;
    border-radius: 14px;
  }

  .objekte-contact-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
  }

  /* Chat as bottom glass sheet. Closed sits fully below the screen. */
  .einsatz-chat-panel {
    left: 0;
    right: 0;
    top: auto;
    width: auto;
    bottom: 0;
    height: min(78vh, calc(100dvh - env(safe-area-inset-top, 0px) - 64px));
    border-radius: 18px 18px 0 0;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    transform: translateY(calc(100% + 24px));
    pointer-events: none;
  }

  body.chat-open .einsatz-chat-panel:not(.hidden) {
    transform: none;
    pointer-events: auto;
  }

  body.chat-open .einsatz-chat-compose {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }

  body.chat-open .lage-dock {
    display: none !important;
  }

  /* Create Gebäude-Radius session: hide bottom dock; panel takes its place. */
  body.create-buildings-radius-active .lage-dock {
    display: none !important;
  }

  .einsatz-chat-input {
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.10);
    color: #fafafa;
  }

  /* Hilfe */
  .help-drawer,
  #help-sheet {
    z-index: 360;
  }

  .help-drawer-panel,
  .sheet-panel.help-drawer-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: 18px 18px 0 0;
  }

  body.help-open .objekte-screen,
  body.help-open #einsaetze-screen,
  body.help-open #objekte-screen,
  body.help-open #uebungen-screen {
    display: none !important;
  }

  /* Konto */
  .account-overlay {
    z-index: 420;
  }

  .account-menu {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: 18px;
  }

  .account-menu-field input {
    min-height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
  }

  /* Export */
  body.export-mode .lage-status {
    display: none !important;
  }

  body.export-mode .export-gallery,
  body.export-mode .export-gallery.sheet-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-color: var(--glass-border);
    box-shadow: var(--glass-shadow);
  }

  body.export-mode .export-work-mode-bar,
  body.export-mode .canvas-toolbar-export,
  body.export-mode .export-gallery-footer {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    border-radius: 14px;
  }

  body.export-mode .export-work-mode-btn.active {
    background: var(--primary);
  }

  body.lage-tool-open .lage-status,
  body.chat-open .lage-status {
    display: none !important;
  }

  body.lage-chrome .canvas-toolbar-dock,
  body.idle-chrome .canvas-toolbar-dock,
  body.objekt-chrome .canvas-toolbar-dock {
    background: transparent;
    border: none;
    box-shadow: none;
  }

  body.lage-chrome .canvas-toolbar,
  body.idle-chrome .canvas-toolbar,
  body.objekt-chrome .canvas-toolbar {
    width: max-content;
    max-width: calc(100% - 8px);
    margin: 0 auto;
  }

  @keyframes absprache-sheet-in {
    from { transform: translateY(100%); }
    to { transform: none; }
  }

  body.absprachepunkte-window-open .absprachepunkte-panel {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
    border-radius: 18px 18px 0 0;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    z-index: 400;
    animation: absprache-sheet-in 280ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  body.absprachepunkte-window-open .lage-dock {
    display: none !important;
  }

  body.absprachepunkte-window-open .absprachepunkte-body {
    flex: 0 0 auto;
    overflow: visible;
  }

  body.absprachepunkte-window-open .absprachepunkte-list {
    flex: 0 0 auto;
    overflow: visible;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }

  /* Compact Mehr sheet: white drag-handle at top (not the canvas … overflow). */
  .lage-sheet-handle {
    display: none;
  }

  .lage-sheet--more .lage-sheet-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 100%;
    min-height: 28px;
    padding: 12px 0 8px;
    cursor: grab;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: auto;
    position: relative;
    z-index: 2;
  }

  .lage-sheet--more .lage-sheet-handle:active {
    cursor: grabbing;
  }

  .lage-sheet-handle-bar {
    display: block;
    width: 44px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
    flex-shrink: 0;
  }

  .lage-sheet--more .lage-sheet-head,
  .lage-sheet--more .lage-sheet-x {
    display: none !important;
  }

  /* Fully open: hide dock. During dock-pull, .lage-dock--pull-sync keeps it for fade. */
  body.lage-sheet-open:has(#lage-sheet.lage-sheet--more) .lage-dock:not(.lage-dock--pull-sync) {
    display: none !important;
  }

  .lage-dock.lage-dock--pull-sync {
    display: flex !important;
    opacity: var(--lage-mehr-dock-opacity, 1);
    transform: translateY(var(--lage-mehr-dock-ty, 0px));
    pointer-events: none;
    transition: none;
  }

  .lage-sheet-panel.is-dragging {
    animation: none !important;
  }

  .lage-sheet--more .lage-sheet-panel {
    margin-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    max-height: min(85vh, calc(100dvh - env(safe-area-inset-top, 0px) - 8px));
    overflow: hidden;
    /* Tap-open: slide in from below (dock-pull drives transform itself). */
    animation: lage-mehr-sheet-in 320ms cubic-bezier(0.32, 0.72, 0, 1);
  }

  @keyframes lage-mehr-sheet-in {
    from { transform: translateY(100%); }
    to { transform: none; }
  }

  .lage-sheet--more .lage-sheet-body {
    flex: 1 1 auto;
    min-height: 0;
    padding-top: 8px;
    /* Avoid rubber-band fighting dismiss; pan-y kept so scroll-up from top works.
       Downward dismiss at scrollTop=0 is claimed via non-passive touchmove in JS. */
    overscroll-behavior-y: contain;
    touch-action: pan-y;
  }

  /* Foot sits outside the scroller — same dismiss surface as the handle. */
  .lage-sheet--more .lage-more-foot {
    touch-action: none;
  }

  .lage-sheet--more .lage-sheet-panel:has(.lage-more-foot) {
    padding-bottom: 0;
  }

  .lage-sheet--more .lage-sheet-body {
    padding-bottom: 8px;
  }

  .lage-more-foot {
    position: sticky;
    bottom: 0;
    flex-shrink: 0;
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    background: transparent;
  }

  .lage-more-tool {
    display: flex;
    align-items: center;
    border: none;
    background: rgba(18, 18, 22, 0.72);
    color: #fafafa;
    font: inherit;
    font-size: 15px;
    font-weight: 500;
  }

  .lage-more-tool .material-symbols-outlined {
    font-size: 22px;
    color: #fff;
  }

  body.lage-chrome .canvas-toolbar-dock .canvas-toolbar.canvas-toolbar--vehicle,
  body.lage-chrome .canvas-toolbar-dock .canvas-toolbar.canvas-toolbar--building,
  body.lage-chrome .canvas-toolbar-dock .canvas-toolbar.canvas-toolbar--buildings,
  body.objekt-chrome .canvas-toolbar-dock .canvas-toolbar.canvas-toolbar--vehicle,
  body.objekt-chrome .canvas-toolbar-dock .canvas-toolbar.canvas-toolbar--building,
  body.objekt-chrome .canvas-toolbar-dock .canvas-toolbar.canvas-toolbar--buildings {
    width: max-content;
    max-width: calc(100% - 8px);
    margin: 0 auto;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-chrome);
    box-shadow: var(--glass-shadow);
  }

  body.lage-chrome .canvas-toolbar--vehicle .canvas-toolbar-vehicle,
  body.lage-chrome .canvas-toolbar--building .canvas-toolbar-building,
  body.objekt-chrome .canvas-toolbar--vehicle .canvas-toolbar-vehicle,
  body.objekt-chrome .canvas-toolbar--building .canvas-toolbar-building {
    width: auto;
    max-width: 100%;
  }

  .lage-more-tools {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 4px;
    margin-bottom: 8px;
  }

  .lage-more-tool {
    min-height: 72px;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    border-radius: 16px;
  }

  .lage-more-foot .lage-sheet-item {
    flex: 1;
    justify-content: center;
    align-items: center;
    gap: 0;
    padding: 0;
    background: rgba(18, 18, 22, 0.72);
  }

  .lage-more-foot .lage-sheet-item > span:empty {
    display: none;
  }

  .lage-more-foot .lage-sheet-item .material-symbols-outlined {
    display: block;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
  }

  .einsatz-chat-panel {
    left: 0;
    right: 0;
    width: auto;
    bottom: 0;
    border-radius: 18px 18px 0 0;
  }

  body.einsaetze-open:has(#einsaetze-screen.is-detail) .workspace,
  body.einsaetze-open:has(#einsaetze-screen.is-create) .workspace,
  body.einsaetze-open:has(#einsaetze-screen.is-detail) .map-side-chrome,
  body.einsaetze-open:has(#einsaetze-screen.is-create) .map-side-chrome {
    visibility: hidden;
    pointer-events: none;
  }

  body.einsaetze-open:has(#einsaetze-screen.is-detail) .objekte-screen,
  body.einsaetze-open:has(#einsaetze-screen.is-create) .objekte-screen {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  body.einsaetze-open:has(#einsaetze-screen.is-detail) .objekte-screen-panel,
  body.einsaetze-open:has(#einsaetze-screen.is-create) .objekte-screen-panel {
    border-radius: 0;
    animation: lage-detail-cover 360ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  body.einsaetze-open:has(#einsaetze-screen.is-detail) .chrome-float--start,
  body.einsaetze-open:has(#einsaetze-screen.is-create) .chrome-float--start {
    left: 0;
    right: 0;
    top: 0;
    width: auto;
    max-width: none;
    border-radius: 0;
    height: calc(56px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    z-index: 360;
    animation: lage-hud-cover 360ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  @keyframes lage-detail-cover {
    from { transform: translateY(18px); opacity: 0.55; }
    to { transform: none; opacity: 1; }
  }

  @keyframes lage-hud-cover {
    from { transform: translateY(-12px); opacity: 0.6; }
    to { transform: none; opacity: 1; }
  }

  @media (prefers-reduced-motion: reduce) {
    .lage-dock,
    .lage-status,
    .chrome-float--start {
      transition: none;
    }
  }
}

@media (max-width: 1100px) {
  select.stichwort-native {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
  }

  .stichwort-dropdown {
    width: 100%;
  }

  .stichwort-dropdown-btn {
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background-color: rgba(255, 255, 255, 0.05);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23fafafa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    color: #fafafa;
    font: inherit;
    text-align: left;
    padding: 10px 36px 10px 12px;
  }

  .stichwort-dropdown-btn.is-placeholder {
    color: #a1a1aa;
  }

  .stichwort-dropdown-list {
    position: fixed;
    z-index: 520;
    overflow: auto;
    margin: 0;
    padding: 4px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: #1c1c20;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  }

  .stichwort-dropdown-list.hidden {
    display: none;
  }

  .stichwort-dropdown-opt {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #fafafa;
    font: inherit;
    font-size: 0.84rem;
    text-align: left;
    padding: 8px 12px;
  }

  .stichwort-dropdown-opt.is-selected {
    background: rgba(255, 255, 255, 0.08);
  }

  .project-meta-phone-row .stichwort-dropdown {
    flex: 0 0 auto;
    width: auto;
    min-width: 4.6rem;
    max-width: 5.5rem;
  }

  .project-meta-phone-row .stichwort-dropdown-btn {
    min-height: 44px;
    padding: 7px 22px 7px 6px;
    font-size: 0.8rem;
    background-position: right 4px center;
  }

  .canvas-toolbar-export .stichwort-dropdown,
  .schnellansicht-nav-row .stichwort-dropdown {
    width: auto;
    min-width: 5.5rem;
    max-width: 9.5rem;
  }

  .canvas-toolbar-export .stichwort-dropdown-btn,
  .schnellansicht-nav-row .stichwort-dropdown-btn {
    min-height: 40px;
    padding: 6px 28px 6px 8px;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 10px;
  }
}


/* Side-Panels + Desktop-IA toolbar are Desktop-only (Phase 2). */
@media (max-width: 1100px) {
  .lage-side-panel,
  .canvas-toolbar-lage-ia {
    display: none !important;
  }
}

@media (min-width: 1101px) {
  /* Phase 1 desktop: status + Aktiv/Abgeschlossen live in desktop-lage.css.
     Bottom-Dock and Compact-Sheets stay off. */
  .lage-dock,
  .lage-sheet,
  .map-axonometry-cube,
  .stichwort-dropdown {
    display: none !important;
  }
}