/* NOTAM Map 1.1 application shell */

.auth-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  color: #eff5fa;
  background: #111b24;
}

.auth-card {
  display: grid;
  gap: 16px;
  width: min(100%, 420px);
  padding: 28px;
  border: 1px solid #40596b;
  border-radius: 10px;
  background: #1b2a36;
}

.auth-card h1, .auth-card p { margin: 0; }
.auth-card label { display: grid; gap: 7px; }
.auth-card input { padding: 10px; color: #eff5fa; background: #101d27;
  border: 1px solid #597083; border-radius: 5px; font: inherit; }
.auth-card button, .auth-session-bar button { padding: 9px 14px;
  color: #fff; background: #177f9e; border: 0; border-radius: 5px;
  font: inherit; cursor: pointer; }
.auth-card button:disabled { opacity: .6; cursor: wait; }
.auth-card .auth-error { color: #ffb1a6; }
.auth-session-bar { position: fixed; z-index: 2000; right: 10px;
  bottom: 38px; display: flex; align-items: center; gap: 8px;
  padding: 5px 7px; border-radius: 5px; color: #eff5fa;
  background: #15242eea; font-size: 12px; }

.briefing-confirm-form { display: grid; gap: 9px; margin-top: 16px;
  padding: 14px; border: 1px solid #4b6570; border-radius: 6px; }
.briefing-confirm-form p { margin: 0; line-height: 1.45; }
.briefing-confirm-form label { display: grid; gap: 6px; }
.briefing-confirm-form input { width: 112px; padding: 7px; border-radius: 4px;
  background: #111d26; color: #fff; border: 1px solid #668495; }

.account-backdrop { position: fixed; inset: 0; z-index: 4000;
  display: grid; place-items: center; padding: 16px; background: #050c12cc; }
.account-dashboard { width: min(900px, 100%); max-height: 90vh; overflow: auto;
  padding: 24px; color: #e9f3f9; border-radius: 10px;
  border: 1px solid #546a79; background: #1b2a36; }
.account-dashboard header, .account-list li { display: flex; align-items: center;
  justify-content: space-between; gap: 12px; }
.account-dashboard h2, .account-dashboard h3 { margin: 0 0 12px; }
.account-dashboard button { padding: 7px 10px; border: 0; border-radius: 5px;
  color: #fff; background: #177f9e; cursor: pointer; }
.account-list { list-style: none; padding: 0; margin: 12px 0 24px; }
.account-list li { padding: 10px 0; border-bottom: 1px solid #405262; }
.account-list li { flex-wrap: wrap; }
.account-list li label { display: grid; gap: 3px; }
.account-list li input { padding: 6px; color: #fff; background: #111d26;
  border: 1px solid #668495; }
.account-list small { display: block; color: #b6c5d0; }
.account-create { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; }
.account-create h3 { grid-column: 1 / -1; }
.account-create label { display: grid; gap: 4px; }
.account-create input, .account-create select { width: 100%; padding: 7px;
  color: #fff; background: #111d26; border: 1px solid #668495; }
@media (max-width: 620px) { .account-create { grid-template-columns: 1fr; } }

.app {
  grid-template-areas:
    "header"
    "navigation"
    "filters"
    "workspace"
    "footer";
  grid-template-rows:
    68px
    42px
    auto
    minmax(0, 1fr)
    34px;
}

.topbar {
  grid-area: header;
}

.main-mode-nav {
  grid-area: navigation;
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 0 18px;
  border-bottom: 1px solid #2b3540;
  background: #141c24;
}

.main-mode-nav button {
  position: relative;
  min-width: 126px;
  padding: 0 15px;
  border: 0;
  background: transparent;
  color: #8f9ca8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  cursor: pointer;
}

.main-mode-nav button::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 0;
  left: 12px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: transparent;
}

.main-mode-nav button:hover {
  color: #dce5eb;
  background: #19242d;
}

.main-mode-nav button.active {
  color: #f5f8fa;
}

.main-mode-nav button.active::after {
  background: #31b7c6;
}

.filter-controls {
  grid-area: filters;
}

.map-wrapper {
  grid-area: workspace;
  display: flex;
}

.map-stage {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.mode-panel {
  position: relative;
  z-index: 1200;
  flex: 0 0 var(--mode-panel-width, 720px);
  width: var(--mode-panel-width, 720px);
  max-width: calc(100vw - 320px);
  min-width: 0;
  padding: 22px 20px;
  border-right: 1px solid #33404b;
  background: #17212a;
  color: #e9eef2;
  box-shadow: 5px 0 18px rgba(0, 0, 0, 0.18);
}

.mode-panel-resize-handle {
  position: relative;
  z-index: 1210;
  flex: 0 0 10px;
  width: 10px;
  margin-left: -5px;
  cursor: col-resize;
  touch-action: none;
  user-select: none;
}

.mode-panel-resize-handle::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4px;
  width: 2px;
  background: #33404b;
  transition: background 0.12s, box-shadow 0.12s;
}

.mode-panel-resize-handle:hover::after,
.mode-panel-resize-handle:focus-visible::after {
  background: #31b7c6;
  box-shadow: 0 0 0 2px rgba(49, 183, 198, 0.18);
}

.mode-panel-resize-handle:focus-visible {
  outline: none;
}

.mode-panel-placeholder {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.mode-panel-kicker {
  color: #49bdc9;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mode-panel-placeholder strong {
  font-size: 19px;
  line-height: 1.25;
}

.mode-panel-placeholder p {
  max-width: 285px;
  margin: 0;
  color: #9eacb7;
  font-size: 12px;
  line-height: 1.55;
}

.app > footer {
  grid-area: footer;
}

@media (max-width: 760px) {
  .app {
    grid-template-rows:
      92px
      44px
      auto
      minmax(0, 1fr)
      34px;
  }

  .main-mode-nav {
    gap: 0;
    padding: 0 6px;
  }

  .main-mode-nav button {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 5px;
    font-size: 10px;
    letter-spacing: 0.045em;
  }

  .map-wrapper {
    flex-direction: column;
  }

  .map-stage {
    order: 1;
  }

  .mode-panel {
    order: 2;
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    min-height: 132px;
    padding: 14px 16px 16px;
    border-top: 1px solid #3a4853;
    border-right: 0;
    box-shadow: 0 -5px 18px rgba(0, 0, 0, 0.2);
  }

  .mode-panel-resize-handle {
    display: none;
  }

  .mode-panel-placeholder {
    gap: 5px;
  }

  .mode-panel-placeholder strong {
    font-size: 16px;
  }

  .mode-panel-placeholder p {
    max-width: none;
    font-size: 11px;
    line-height: 1.4;
  }
}


/* Flugplanung 1.1 */

.route-planner-panel {
  display: flex;
  flex-direction: column;
  gap: 15px;
  overflow-y: auto;
}

.route-panel-heading,
.route-panel-footer,
.route-calculation header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.route-panel-heading > div {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.route-panel-heading strong {
  font-size: 21px;
}

.route-direct-badge {
  padding: 5px 8px;
  border: 1px solid #3c5960;
  border-radius: 999px;
  color: #8fdce4;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.route-input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid #34434e;
  border-radius: 7px;
  background: #131c24;
}

.route-input-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #54cfdb;
  font-size: 10px;
  font-weight: 900;
}

.route-input-title button,
.route-via-list button {
  border: 0;
  background: transparent;
  color: #aab7bf;
  font-size: 18px;
  cursor: pointer;
}

.route-selected,
.route-via-list li {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  padding: 8px;
  border-radius: 5px;
  background: #202d37;
}

.route-selected {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.route-selected strong,
.route-via-list strong {
  color: #eef5f7;
  font-size: 11px;
}

.route-selected small,
.route-via-list small,
.route-calculation small {
  color: #84939e;
  font-size: 9px;
}

.route-search {
  display: flex;
  gap: 7px;
}

.route-search input {
  min-width: 0;
  flex: 1 1 auto;
  padding: 9px;
  border: 1px solid #43515d;
  border-radius: 5px;
  outline: none;
  background: #0e151b;
  color: #edf4f7;
}

.route-search input:focus {
  border-color: #35bac8;
}

.route-search button,
.route-panel-footer button {
  padding: 8px 10px;
  border: 1px solid #3a7680;
  border-radius: 5px;
  background: #1b6975;
  color: #f3fcfd;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.route-search button:disabled,
.route-panel-footer button:disabled {
  opacity: 0.4;
  cursor: default;
}

.route-via-list,
.route-calculation ol {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.route-via-number {
  display: flex;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #1a8794;
  font-size: 10px;
  font-weight: 900;
}

.route-via-list li > div {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 3px;
}

.route-via-list li {
  cursor: grab;
  transition: border-color 0.12s, opacity 0.12s, transform 0.12s;
}

.route-via-list li.dragging {
  opacity: 0.45;
  transform: scale(0.99);
}

.route-via-grip {
  flex: 0 0 auto;
  color: #6f808c;
  font-size: 13px;
  letter-spacing: -3px;
  cursor: grab;
}

.route-via-actions {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2px;
}

.route-via-actions button {
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 4px;
  color: #aab7bf;
  font-size: 13px;
}

.route-via-actions button:hover:not(:disabled) {
  background: #34434e;
  color: #fff;
}

.route-via-actions button:disabled {
  opacity: 0.25;
  cursor: default;
}

.route-message {
  padding: 8px 10px;
  border-left: 3px solid #31b7c6;
  background: rgba(49, 183, 198, 0.09);
  color: #a9cbd0;
  font-size: 10px;
}

.route-calculation {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.route-calculation header span {
  color: #63d4df;
  font-size: 11px;
  font-weight: 800;
}

.route-calculation li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  border: 1px solid #34434e;
  border-radius: 6px;
  background: #131c24;
}

.route-calculation li > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.route-calculation li > span {
  flex: 0 0 auto;
  color: #72dce5;
  font-size: 11px;
  font-weight: 800;
}

.route-leg-title {
  width: 100%;
}

.route-leg-values {
  display: grid !important;
  width: 100%;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px !important;
}

.route-leg-values > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  border-radius: 4px;
  background: #1b2832;
  color: #80deea;
  font-size: 10px;
  font-weight: 800;
}

.route-leg-values small,
.route-trip-summary small {
  color: #72838f;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
}

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

.route-trip-summary > span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px;
  border: 1px solid #315662;
  border-radius: 6px;
  background: #152932;
}

.route-trip-summary strong {
  color: #76e0ea;
  font-size: 14px;
}

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

.route-performance-settings label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: #7f909c;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.route-performance-settings label > div {
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid #43515d;
  border-radius: 5px;
  background: #0e151b;
}

.route-performance-settings input {
  min-width: 0;
  width: 100%;
  padding: 8px;
  border: 0;
  outline: none;
  background: transparent;
  color: #edf4f7;
  font-weight: 800;
}

.route-performance-settings label small {
  flex: 0 0 auto;
  padding-right: 8px;
  color: #6fcbd5;
  font-size: 9px;
  text-transform: none;
}

.route-flight-profile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  gap: 8px;
  padding: 10px;
  border: 1px solid #31515d;
  border-radius: 6px;
  background: #13232b;
}

.route-profile-heading {
  display: flex;
  grid-column: 1 / -1;
  flex-direction: column;
  gap: 3px;
}

.route-profile-heading > span,
.route-flight-profile label > span {
  color: #d9eef1;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.route-profile-heading small {
  color: #738a95;
  font-size: 8px;
}

.route-etd-input {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
}

.route-etd-input input,
.route-altitude-band input,
.route-altitude-band select {
  min-width: 0;
  padding: 8px;
  border: 1px solid #43515d;
  border-radius: 5px;
  outline: none;
  background: #0e151b;
  color: #edf4f7;
  font-weight: 800;
}

.route-now-button {
  align-self: end;
  min-height: 34px;
  border: 1px solid #3b7280;
  border-radius: 5px;
  background: #173943;
  color: #9de6ed;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

.route-altitude-band {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) 82px;
  align-items: end;
  gap: 6px;
}

.route-altitude-band label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
}

.route-altitude-band > span {
  padding-bottom: 9px;
  color: #718995;
  font-size: 9px;
}

.route-corridor-settings {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 94px 88px;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid #31515d;
  border-radius: 6px;
  background: #13232b;
}

.route-corridor-heading {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.route-corridor-heading > span {
  color: #d9eef1;
  font-size: 10px;
  font-weight: 800;
}

.route-corridor-heading small {
  overflow: hidden;
  color: #738a95;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-corridor-settings label {
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid #43515d;
  border-radius: 5px;
  background: #0e151b;
}

.route-corridor-settings input {
  min-width: 0;
  width: 100%;
  padding: 8px;
  border: 0;
  outline: none;
  background: transparent;
  color: #edf4f7;
  font-weight: 800;
}

.route-corridor-settings label span {
  padding-right: 8px;
  color: #6fcbd5;
  font-size: 9px;
  font-weight: 800;
}

.route-corridor-settings button {
  align-self: stretch;
  padding: 7px 8px;
  border: 1px solid #40515d;
  border-radius: 5px;
  background: #17232c;
  color: #8797a2;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

.route-corridor-settings button.active {
  border-color: #317a91;
  background: #153a48;
  color: #91dceb;
}

.route-center-button {
  padding: 7px 9px;
  border: 1px solid #3b7280;
  border-radius: 5px;
  background: #173943;
  color: #9de6ed;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

.route-center-button:disabled {
  opacity: 0.35;
  cursor: default;
}

.route-panel-footer {
  color: #8999a5;
  font-size: 10px;
}

.route-note {
  margin: -4px 0 0;
  color: #71818d;
  font-size: 9px;
  line-height: 1.4;
}

.leaflet-tooltip.planned-route-tooltip {
  padding: 4px 7px;
  border: 1px solid #3f929b;
  background: rgba(14, 28, 34, 0.94);
  color: #e9fbfd;
  font-size: 9px;
  font-weight: 800;
}

.route-leg-hit {
  cursor: grab;
}

.route-leg-hit:active {
  cursor: grabbing;
}


/* Routenbriefing 1.1 */

.route-briefing-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}

.briefing-panel-heading,
.briefing-route-notams > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.briefing-panel-heading > div,
.briefing-route-notams > header > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
}

.briefing-panel-heading strong {
  font-size: 21px;
}

.briefing-draft-badge {
  padding: 5px 8px;
  border: 1px solid #6b6442;
  border-radius: 999px;
  background: #302d1e;
  color: #e4d98d;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.briefing-draft-badge.fixed {
  border-color: #357966;
  background: #17352d;
  color: #83e2c2;
}

.briefing-snapshot-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 11px;
  border: 1px solid #315662;
  border-radius: 7px;
  background: #13252e;
}

.briefing-snapshot-controls label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
}

.briefing-snapshot-controls label > span,
.briefing-snapshot-meta small,
.briefing-snapshot-meta span small {
  color: #8398a3;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.briefing-snapshot-controls input {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid #435965;
  border-radius: 5px;
  outline: none;
  background: #0d171d;
  color: #edf7f9;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.briefing-snapshot-controls input:focus {
  border-color: #48bdc9;
}

.briefing-snapshot-controls button,
.briefing-snapshot-meta button {
  align-self: end;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid #3d7a83;
  border-radius: 5px;
  background: #1d5962;
  color: #eaf9fb;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.briefing-snapshot-controls button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.briefing-snapshot-controls .briefing-pdf-error {
  grid-column: 1 / -1;
}

.briefing-snapshot-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 11px;
  border: 1px solid #357966;
  border-radius: 7px;
  background: #142c27;
}

.briefing-snapshot-meta > div {
  display: grid;
  grid-template-columns: 1fr 1.5fr 0.7fr;
  gap: 7px;
}

.briefing-snapshot-meta span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.briefing-snapshot-meta span strong {
  color: #dff8ef;
  font-size: 13px;
}

.briefing-snapshot-meta > small {
  text-transform: none;
}

.briefing-snapshot-meta button {
  align-self: flex-start;
  min-height: 34px;
  background: #1a443a;
}

.briefing-snapshot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.briefing-snapshot-actions button:first-child {
  border-color: #3d8791;
  background: #1c6069;
}

.briefing-snapshot-actions button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.briefing-pdf-error {
  padding: 8px 9px;
  border: 1px solid #934a4a;
  border-radius: 5px;
  background: #3a2022;
  color: #ffc4c4;
  font-size: 11px;
  line-height: 1.4;
}

.briefing-route-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border: 1px solid #315662;
  border-radius: 7px;
  background: #152932;
}

.briefing-route-summary > strong {
  color: #eef8fa;
  font-size: 12px;
  line-height: 1.35;
}

.briefing-route-summary > small,
.briefing-route-notams header small {
  color: #82959f;
  font-size: 9px;
}

.briefing-route-summary > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 4px;
}

.briefing-route-summary > div > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px;
  border-radius: 5px;
  background: #1b3641;
  color: #7de0e9;
  font-size: 11px;
  font-weight: 800;
}

.briefing-route-summary > div small {
  color: #78909b;
  font-size: 8px;
  text-transform: uppercase;
}

.briefing-route-summary > .briefing-plan-profile {
  grid-template-columns: 1fr 1.25fr;
}

.briefing-route-weather {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 11px;
  border: 1px solid #315662;
  border-radius: 7px;
  background: #12232b;
}

.briefing-route-weather > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.briefing-route-weather > header > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.briefing-route-weather > header strong {
  color: #eef8fa;
  font-size: 14px;
}

.briefing-route-weather > header small {
  color: #82959f;
  font-size: 10px;
}

.briefing-route-weather.draft p {
  margin: 0;
  color: #91a4ad;
  font-size: 11px;
  line-height: 1.45;
}

.briefing-weather-status {
  padding: 8px 9px;
  border-left: 3px solid #4aaeb9;
  background: rgba(74, 174, 185, 0.1);
  color: #b9dce0;
  font-size: 11px;
  line-height: 1.45;
}

.briefing-route-weather.partial .briefing-weather-status,
.briefing-route-weather.unavailable .briefing-weather-status {
  border-left-color: #d0a93d;
  background: rgba(208, 169, 61, 0.09);
  color: #d8ca91;
}

.briefing-weather-notice {
  margin-top: 6px;
  padding: 6px 9px;
  border-left: 3px solid #6d8796;
  color: #b6c5d0;
  font-size: 11px;
  line-height: 1.45;
}

.briefing-weather-raw {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.briefing-weather-raw section {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.briefing-weather-raw h4 {
  margin: 0;
  color: #b8cbd2;
  font-size: 11px;
  text-transform: uppercase;
}

.briefing-weather-raw pre {
  margin: 0;
  padding: 8px;
  border: 1px solid #2b3c45;
  border-radius: 4px;
  background: #0b1318;
  color: #cbd7dc;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 10px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.briefing-relevance-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.briefing-relevance-summary > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
  padding: 8px;
  border: 1px solid #354651;
  border-radius: 5px;
  background: #131c24;
}

.briefing-relevance-summary small {
  color: #748894;
  font-size: 8px;
  line-height: 1.25;
}

.briefing-relevance-summary strong {
  color: #dcebef;
  font-size: 13px;
}

.briefing-scope-note {
  padding: 9px 10px;
  border-left: 3px solid #d0a93d;
  background: rgba(208, 169, 61, 0.09);
  color: #b9b28b;
  font-size: 9px;
  line-height: 1.45;
}

.briefing-route-notams {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.briefing-route-notams > header strong {
  font-size: 12px;
}

.briefing-route-notams > header > span {
  display: flex;
  min-width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #1d6975;
  color: #f2fdff;
  font-size: 10px;
  font-weight: 900;
}

.briefing-route-notams ol {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.briefing-notam-card {
  overflow: hidden;
  border: 1px solid #354651;
  border-radius: 6px;
  background: #131c24;
}

.briefing-notam-card summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) auto;
  align-items: center;
  gap: 8px;
  padding: 10px;
  cursor: pointer;
  list-style: none;
}

.briefing-notam-card summary::-webkit-details-marker {
  display: none;
}

.briefing-notam-card summary::after {
  content: '›';
  color: #6e8792;
  font-size: 18px;
  line-height: 1;
  transition: transform 0.15s;
}

.briefing-notam-card[open] summary::after {
  transform: rotate(90deg);
}

.briefing-notam-title {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.briefing-notam-title strong {
  color: #eef5f7;
  font-size: 11px;
}

.briefing-notam-title small {
  overflow: hidden;
  color: #83949f;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.briefing-notam-leg {
  max-width: 160px;
  padding: 4px 6px;
  border-radius: 4px;
  background: #193743;
  color: #77d6df;
  font-size: 8px;
  font-weight: 800;
  line-height: 1.3;
  text-align: right;
}

.briefing-notam-content {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 0 10px 11px;
  border-top: 1px solid #2d3d47;
}

.briefing-notam-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-top: 9px;
}

.briefing-notam-badges span {
  padding: 3px 5px;
  border-radius: 3px;
  background: #263640;
  color: #9db0ba;
  font-size: 8px;
  font-weight: 700;
}

.briefing-notam-badges .briefing-relevance-badge.relevant {
  background: rgba(54, 142, 101, 0.22);
  color: #8ee0b6;
}

.briefing-notam-badges .briefing-relevance-badge.outside {
  background: rgba(87, 105, 116, 0.24);
  color: #a9b8c0;
}

.briefing-notam-badges .briefing-relevance-badge.manual {
  background: rgba(208, 169, 61, 0.15);
  color: #dfce83;
}

.briefing-notam-content dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 8px;
  margin: 0;
}

.briefing-notam-content dl > div {
  min-width: 0;
}

.briefing-notam-content dt {
  color: #70828e;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.briefing-notam-content dd {
  margin: 2px 0 0;
  color: #c8d2d8;
  font-size: 9px;
  line-height: 1.35;
}

.briefing-notam-warning {
  padding: 6px 8px;
  border-left: 2px solid #d0a93d;
  background: rgba(208, 169, 61, 0.08);
  color: #c8bd82;
  font-size: 8px;
}

.briefing-notam-text {
  padding: 8px;
  border-radius: 4px;
  background: #0d151b;
  color: #cbd5da;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 9px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.briefing-empty {
  margin: 0;
  padding: 12px;
  border: 1px dashed #40515c;
  border-radius: 6px;
  color: #8c9ca6;
  font-size: 10px;
  line-height: 1.4;
}

.briefing-unmappable-warning {
  padding: 10px;
  border: 1px solid #614a42;
  border-radius: 6px;
  background: rgba(110, 61, 45, 0.13);
}

.briefing-unmappable-warning strong {
  color: #e3b7a8;
  font-size: 10px;
}

.briefing-unmappable-warning p {
  margin: 5px 0 0;
  color: #a78f88;
  font-size: 9px;
  line-height: 1.4;
}


/* Größere Planungsspalte und besser lesbare Typografie. */

.route-planner-panel .mode-panel-kicker,
.route-briefing-panel .mode-panel-kicker {
  font-size: 12px;
}

.route-panel-heading strong,
.briefing-panel-heading strong {
  font-size: 23px;
}

.route-calculation header strong {
  font-size: 18px;
}

.route-leg-title > strong {
  font-size: 15px;
}

.route-input-title,
.route-via-number,
.route-search button,
.route-panel-footer,
.route-panel-footer button,
.route-message,
.route-leg-values > span,
.route-corridor-heading > span {
  font-size: 12px;
}

.route-selected strong,
.route-via-list strong,
.route-calculation header span,
.route-calculation li > span,
.route-performance-settings label,
.route-performance-settings label small,
.route-profile-heading > span,
.route-flight-profile label > span,
.route-now-button,
.route-altitude-band > span,
.route-corridor-settings label span,
.route-corridor-settings button,
.route-center-button,
.route-note {
  font-size: 11px;
}

.route-direct-badge {
  font-size: 11px;
}

.route-selected small,
.route-via-list small,
.route-calculation small,
.route-profile-heading small,
.route-corridor-heading small {
  font-size: 11px;
}

.route-leg-values small,
.route-trip-summary small {
  font-size: 10px;
}

.route-trip-summary strong {
  font-size: 16px;
}

.route-search input,
.route-performance-settings input,
.route-etd-input input,
.route-altitude-band input,
.route-altitude-band select,
.route-corridor-settings input {
  font-size: 12px;
}

.briefing-draft-badge,
.briefing-route-summary > small,
.briefing-route-notams header small,
.briefing-notam-title small,
.briefing-notam-content dd,
.briefing-notam-text,
.briefing-unmappable-warning p {
  font-size: 11px;
}

.briefing-route-summary > strong,
.briefing-route-notams > header strong,
.briefing-empty,
.briefing-unmappable-warning strong {
  font-size: 14px;
}

.briefing-route-summary > div > span,
.briefing-notam-title strong {
  font-size: 13px;
}

.briefing-route-summary > div small,
.briefing-relevance-summary small,
.briefing-notam-leg,
.briefing-notam-badges span,
.briefing-notam-content dt,
.briefing-notam-warning {
  font-size: 10px;
}

.briefing-relevance-summary strong {
  font-size: 15px;
}

.briefing-scope-note {
  font-size: 11px;
}

.briefing-route-notams > header > span {
  font-size: 12px;
}

.landing-sites-toggle {
  position: absolute;
  z-index: 1050;
  top: 14px;
  left: 304px;
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 7px;
  background: rgba(17, 24, 32, 0.92);
  color: #edf2f6;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(4px);
}

.landing-sites-toggle:hover,
.landing-sites-toggle.active {
  border-color: #9a81ef;
  background: rgba(38, 30, 61, 0.97);
}

.landing-sites-toggle-icon {
  display: inline-flex;
  width: 25px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: #dcd4fa;
  color: #342660;
  font-size: 9px;
  font-weight: 900;
}

.landing-sites-panel {
  position: absolute;
  z-index: 1060;
  top: 56px;
  left: 304px;
  display: flex;
  width: 245px;
  flex-direction: column;
  gap: 8px;
  padding: 10px 11px;
  border: 1px solid #4d5660;
  border-radius: 7px;
  background: rgba(17, 24, 32, 0.96);
  color: #e8edf1;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
}

.landing-sites-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.landing-sites-panel header button {
  border: 0;
  background: transparent;
  color: #aab5bd;
  font-size: 18px;
  cursor: pointer;
}

.landing-sites-panel label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 7px;
  border-radius: 5px;
  background: #1d2932;
  cursor: pointer;
}

.landing-sites-panel input {
  accent-color: #7c5ce6;
}

.landing-sites-panel i {
  width: 10px;
  height: 10px;
  border: 1px solid #101820;
  border-radius: 50%;
}

.landing-sites-panel span {
  font-size: 11px;
  font-weight: 800;
}

.landing-sites-panel small {
  color: #8f9ba5;
  font-size: 9px;
}

.landing-sites-panel p {
  margin: 0;
  color: #ffb7b7;
  font-size: 9px;
}

.landing-site-popup header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.landing-site-popup h3 {
  margin: 9px 0 4px;
}

.landing-site-popup p {
  margin: 0 0 7px;
}

.route-insert-chooser {
  position: absolute;
  z-index: 1300;
  top: 62px;
  left: 50%;
  width: min(410px, calc(100% - 24px));
  max-height: calc(100% - 80px);
  padding: 12px;
  overflow-y: auto;
  border: 1px solid #526471;
  border-radius: 9px;
  background: rgba(15, 23, 30, 0.98);
  color: #eef4f7;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
  transform: translateX(-50%);
}

.route-insert-chooser header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.route-insert-chooser header > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.route-insert-chooser header span,
.route-insert-chooser small {
  color: #82929e;
  font-size: 9px;
}

.route-insert-chooser header button {
  border: 0;
  background: transparent;
  color: #b7c2ca;
  font-size: 20px;
  cursor: pointer;
}

.route-insert-chooser > p {
  color: #9cadb8;
  font-size: 10px;
}

.route-insert-error {
  color: #ffb5b5 !important;
}

.route-insert-candidates {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 8px;
}

.route-insert-candidates button,
.route-coordinate-choice {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid #384a56;
  border-radius: 6px;
  background: #1b2832;
  color: #edf4f7;
  text-align: left;
  cursor: pointer;
}

.route-insert-candidates button:hover,
.route-coordinate-choice:hover {
  border-color: #4299d4;
  background: #203746;
}

.route-coordinate-choice {
  border-color: #3b7280;
  background: #16313a;
}

@media (max-width: 760px) {
  .route-planner-panel {
    max-height: 44vh;
    gap: 11px;
  }

  .route-briefing-panel {
    max-height: 44vh;
    gap: 11px;
  }

  .briefing-snapshot-controls {
    grid-template-columns: 1fr;
  }

  .briefing-snapshot-controls button {
    justify-self: stretch;
  }

  .briefing-snapshot-meta > div {
    grid-template-columns: 1fr;
  }

  .landing-sites-toggle {
    top: 10px;
    left: 228px;
    min-height: 32px;
    padding: 6px 8px;
  }

  .landing-sites-toggle > span:nth-child(2) {
    display: none;
  }

  .landing-sites-panel {
    top: 50px;
    right: 8px;
    left: 8px;
    width: auto;
  }

  .route-leg-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .route-corridor-settings {
    grid-template-columns: minmax(0, 1fr) 82px 78px;
  }
}

/* Kompakte Filterleiste: Zeitraum, Suche und Höhe in einer Zeile */
.filterbar {
  min-height: 46px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.categorybar {
  min-height: 44px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.filterbar-altitude {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
  padding-left: 14px;
  border-left: 1px solid #2b3540;
}

.filterbar-altitude .filter-label {
  min-width: 0;
  cursor: help;
}

.filterbar-altitude .altitude-input-group input {
  width: 72px;
}

/* Sitzung in der Kopfzeile statt schwebend über der Karte */
.topbar .auth-session-bar {
  position: static;
  z-index: auto;
  padding: 0 0 0 12px;
  border-left: 1px solid #2b3540;
  border-radius: 0;
  background: transparent;
  white-space: nowrap;
}

.topbar .auth-session-bar span {
  color: #b7c0c8;
}

.filterbar .filter-reset-all-button {
  margin-left: auto;
}

.filterbar .filter-count + .filter-reset-all-button {
  margin-left: 8px;
}

.categorybar .filter-collapse-button {
  margin-left: auto;
}

.topbar .topbar-actions {
  gap: 10px;
}

@media (max-width: 1700px) {
  .topbar .auth-session-name {
    display: none;
  }
}

@media (max-width: 1500px) {
  .topbar .area-location-field input {
    width: 112px;
    font-size: 14px;
  }

  .topbar .status {
    min-width: 170px;
  }
}

@media (max-width: 1400px) {
  .filterbar .notam-search {
    flex-basis: 170px;
    min-width: 150px;
  }

  .filterbar-altitude .altitude-input-group input {
    width: 62px;
  }
}

/* Umkreisbriefing in der Kopfzeile als eigene, beschriftete Gruppe */
.topbar .area-tools {
  padding: 3px 4px 3px 10px;
  border: 1px solid #2f3d49;
  border-radius: 8px;
  background: #151f28;
}

.topbar .area-tools-label {
  max-width: 76px;
  margin-right: 4px;
  color: #8795a2;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  hyphens: manual;
}

/* Kartenebenen und "Nicht kartierbar" als einheitliche Leiste oben rechts */
.map-layer-toolbar {
  position: absolute;
  z-index: 1050;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 80px);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.map-layer-toolbar > .weather-toggle,
.map-layer-toolbar > .ctr-toggle,
.map-layer-toolbar > .landing-sites-toggle,
.map-layer-toolbar > .saved-waypoints-toggle,
.map-layer-toolbar > .unmappable-toggle {
  position: static;
  min-height: 34px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 700;
}

.map-layer-toolbar > .unmappable-toggle {
  gap: 8px;
  margin-left: 6px;
}

.map-layer-toolbar > .unmappable-toggle strong {
  min-width: 22px;
  height: 20px;
}

.map-stage .landing-sites-panel {
  top: 58px;
  right: 14px;
  left: auto;
}

.map-stage .ctr-legend {
  top: auto;
  right: auto;
  bottom: 44px;
  left: 14px;
}

.map-stage .weather-panel {
  top: 58px;
  right: 14px;
  bottom: auto;
  left: auto;
  max-height: calc(100% - 72px);
}

@media (max-width: 900px) {
  .map-layer-toolbar {
    top: 10px;
    right: 10px;
  }

  .map-layer-toolbar > .weather-toggle > span:nth-child(2),
  .map-layer-toolbar > .ctr-toggle > span:nth-child(2),
  .map-layer-toolbar > .landing-sites-toggle > span:nth-child(2),
  .map-layer-toolbar > .saved-waypoints-toggle > span:nth-child(2) {
    display: none;
  }

  .map-stage .ctr-legend {
    right: 8px;
    bottom: 40px;
    left: 8px;
    width: auto;
  }

  .map-stage .landing-sites-panel,
  .map-stage .weather-panel {
    top: 52px;
    right: 8px;
    left: 8px;
    width: auto;
  }
}

/* Flugplanung: Gliederung Route / Flug / Flight Log */
.route-planner-panel {
  gap: 12px;
}

.route-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px 12px;
  border: 1px solid #34434e;
  border-radius: 7px;
  background: #131c24;
}

.route-section-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 2px;
}

.route-section-title > span {
  color: #54cfdb;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.route-section-title small {
  color: #738a95;
  font-size: 10px;
}

.route-point-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 4px 6px 4px 8px;
  border-radius: 5px;
  background: #1a2630;
}

.route-point-row > .route-search {
  grid-column: 2 / -1;
}

.route-point-role {
  color: #8fa3ae;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.route-point-text,
.route-via-list li > div {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 8px;
}

.route-point-text strong,
.route-via-list li > div strong {
  flex: 0 0 auto;
  color: #eef5f7;
  font-size: 13px;
}

.route-point-text small,
.route-via-list li > div small {
  overflow: hidden;
  color: #8a9aa5;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-point-clear {
  border: 0;
  background: transparent;
  color: #aab7bf;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.route-section .route-search input {
  padding: 7px 9px;
}

.route-via-list {
  gap: 4px;
}

.route-via-list li {
  min-height: 38px;
  padding: 4px 6px 4px 8px;
  background: #1a2630;
}

.route-via-list li > div {
  flex: 1;
  flex-direction: row;
}

.route-flight-row {
  display: grid;
  align-items: center;
  gap: 6px;
}

.route-field-label {
  color: #8fa3ae;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.route-flight-etd {
  grid-template-columns: 70px minmax(0, 1fr) 70px;
}

.route-flight-altitude {
  grid-template-columns: 70px minmax(0, 1fr) auto minmax(0, 1fr) 86px;
}

.route-flight-etd input,
.route-flight-altitude input,
.route-flight-altitude select {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid #43515d;
  border-radius: 5px;
  outline: none;
  background: #0e151b;
  color: #edf4f7;
  font-weight: 800;
}

.route-flight-etd .route-now-button {
  align-self: stretch;
  min-height: 0;
}

.route-field-separator {
  color: #718995;
  font-size: 11px;
}

.route-flight-values {
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  margin-top: 2px;
}

.route-unit-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  overflow: hidden;
  border: 1px solid #43515d;
  border-radius: 5px;
  background: #0e151b;
}

.route-unit-field > span {
  padding: 0 4px 0 8px;
  color: #8fa3ae;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.route-unit-field input {
  min-width: 0;
  width: 100%;
  padding: 7px 4px;
  border: 0;
  outline: none;
  background: transparent;
  color: #edf4f7;
  font-weight: 800;
  text-align: right;
}

.route-unit-field small {
  padding-right: 8px;
  color: #6fcbd5;
  font-size: 10px;
}

.route-corridor-toggle {
  align-self: stretch;
  padding: 0 10px;
  border: 1px solid #3b5866;
  border-radius: 5px;
  background: #18242d;
  color: #9fb0ba;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.route-corridor-toggle.active {
  border-color: #3a7680;
  background: #1b6975;
  color: #f3fcfd;
}

.route-dim-note {
  margin: 2px 0 0;
  color: #738a95;
  font-size: 10px;
}

.route-calculation {
  gap: 4px;
}

.route-log-scroll {
  overflow-x: auto;
}

.route-log-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.route-log-table th,
.route-log-table td {
  padding: 6px 6px;
  text-align: right;
  white-space: nowrap;
}

.route-log-table th:nth-child(-n + 2),
.route-log-table td:nth-child(-n + 2) {
  text-align: left;
}

.route-log-table thead th {
  border-bottom: 1px solid #34434e;
  color: #8fa3ae;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.route-log-table tbody td {
  border-bottom: 1px solid #22303a;
  color: #e6eef2;
  font-size: 13px;
}

.route-log-table tbody td:nth-child(-n + 2) {
  font-weight: 800;
}

.route-log-table tfoot th,
.route-log-table tfoot td {
  padding-top: 8px;
  color: #f3fcfd;
  font-size: 13px;
  font-weight: 900;
}

.route-log-table tfoot th {
  color: #8fa3ae;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
}

.route-log-table tfoot small {
  display: block;
  color: #6fcbd5;
  font-size: 9px;
  font-weight: 800;
}

/* Routenlabels über den NOTAM-Symbolen, nur Code */
.leaflet-tooltip.planned-route-tooltip {
  font-size: 11px;
  letter-spacing: 0.03em;
}

.route-planner-panel {
  container-type: inline-size;
}

@container (max-width: 640px) {
  .route-flight-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .route-log-table th,
  .route-log-table td {
    padding: 5px 3px;
  }

  .route-log-table tbody td,
  .route-log-table tfoot td {
    font-size: 12px;
  }
}

/* Werte in den Flug-Feldern etwas kleiner und weniger fett */
.route-flight-section input,
.route-flight-section select {
  font-size: 12px;
  font-weight: 700;
}

/* Rechtsklick-Menü auf der Karte: Koordinaten und Wegpunkt (dunkel wie die Panels) */
.map-context-popup .leaflet-popup-content-wrapper,
.map-context-popup .leaflet-popup-tip {
  border: 1px solid #526471;
  background: rgba(15, 23, 30, 0.98);
  color: #eef4f7;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
}

.map-context-popup .leaflet-popup-content-wrapper {
  border-radius: 9px;
}

.map-context-popup .leaflet-popup-tip {
  border: 0;
  box-shadow: none;
}

.map-context-popup .leaflet-popup-content {
  margin: 11px 12px;
}

.map-context-popup a.leaflet-popup-close-button {
  color: #b7c2ca;
}

.map-context-popup a.leaflet-popup-close-button:hover {
  color: #ffffff;
}

.map-context-menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #eef4f7;
  font-size: 12px;
}

.map-context-coordinates {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 14px;
}

.map-context-coordinates strong {
  color: #eef5f7;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.map-context-coordinates span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #8a9aa5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.map-context-coordinates button {
  padding: 2px 8px;
  border: 1px solid #526170;
  border-radius: 5px;
  background: #263440;
  color: #d5dee4;
  font-family: inherit;
  font-size: 10px;
  cursor: pointer;
}

.map-context-coordinates button:hover {
  border-color: #6f8593;
  color: #ffffff;
}

.map-context-name {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 8px;
}

.map-context-name > span {
  padding-top: 7px;
  color: #82929e;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.waypoint-name-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.waypoint-name-field input {
  width: 9ch;
  padding: 5px 8px;
  border: 1px solid #526170;
  border-radius: 5px;
  outline: none;
  background: #17222c;
  color: #eef5f7;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.waypoint-name-field input:focus {
  border-color: #168cff;
}

.waypoint-name-field input[aria-invalid='true'] {
  border-color: #e0605a;
}

.waypoint-name-field small {
  font-size: 10px;
  line-height: 1.3;
}

.waypoint-name-error {
  color: #ffb5b5;
}

.waypoint-name-warning {
  color: #f3c96b;
}

.map-context-actions {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.map-context-actions button {
  padding: 7px 10px;
  border: 1px solid #526170;
  border-radius: 6px;
  background: #1a2630;
  color: #eef5f7;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.map-context-actions button {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 10px;
}

.map-context-actions button strong {
  color: #8fc7ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.map-context-actions button small {
  grid-column: 1 / -1;
  color: #8a9aa5;
  font-size: 10px;
  font-weight: 600;
}

.map-context-actions button:hover:not(:disabled) {
  border-color: #168cff;
  background: #1d3346;
}

.map-context-actions button:disabled {
  opacity: 0.45;
  cursor: default;
}

.map-context-note {
  margin: 0;
  color: #9cadb8;
  font-size: 11px;
}

/* Umbenennen von Koordinatenpunkten in der Routenliste */
.route-point-name-button,
.route-via-list .route-point-name-button {
  flex: 0 0 auto;
  padding: 0 0 1px;
  border: 0;
  border-bottom: 1px dashed #6f8593;
  background: transparent;
  color: #eef5f7;
  font-size: 13px;
  font-weight: 700;
  cursor: text;
}

.route-point-name-button:hover {
  border-bottom-color: #168cff;
}

.route-point-name-edit .waypoint-name-field input {
  font-size: 12px;
}

/* Eigene Wegpunkte: Schalter, Kartenebene und Verwaltung im Rechtsklick-Menü */
.saved-waypoints-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 7px;
  background: rgba(17, 24, 32, 0.92);
  color: #edf2f6;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  backdrop-filter: blur(4px);
}

.saved-waypoints-toggle:hover,
.saved-waypoints-toggle.active {
  border-color: #b58cff;
  background: rgba(40, 28, 64, 0.97);
}

.saved-waypoints-toggle strong {
  display: inline-flex;
  min-width: 22px;
  height: 20px;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 11px;
}

.saved-waypoints-toggle:not(.active) .saved-waypoint-badge {
  opacity: 0.55;
}

.saved-waypoint-badge {
  display: inline-flex;
  width: 25px;
  height: 20px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: #c9a8ff;
  color: #1c1433;
  font-size: 9px;
  font-weight: 900;
}

.leaflet-tooltip.saved-waypoint-tooltip {
  padding: 1px 5px;
  border: 1px solid #6b55a8;
  border-radius: 4px;
  background: rgba(28, 20, 51, 0.92);
  color: #efe6ff;
  box-shadow: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
}

.leaflet-tooltip.saved-waypoint-tooltip::before {
  display: none;
}

.map-context-saved {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 14px;
}

.map-context-saved strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  letter-spacing: 0.04em;
}

.map-context-saved small {
  overflow: hidden;
  color: #b9a6e6;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-context-save {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 9px;
  border-top: 1px solid #2c3a45;
}

.waypoint-remark-field input {
  width: 100%;
  letter-spacing: 0.02em;
}

.map-context-save > button,
.map-context-manage button {
  padding: 6px 10px;
  border: 1px solid #6b55a8;
  border-radius: 6px;
  background: #241b3a;
  color: #efe6ff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.map-context-save > button:hover:not(:disabled),
.map-context-manage button:hover:not(:disabled) {
  border-color: #b58cff;
  background: #2f2350;
}

.map-context-save > button:disabled,
.map-context-manage button:disabled {
  opacity: 0.45;
  cursor: default;
}

.map-context-manage {
  display: flex;
  gap: 6px;
}

.map-context-manage button {
  flex: 1;
}

.map-context-manage button.danger {
  border-color: #8a3b3b;
  background: #3a1d1f;
  color: #ffd0d0;
}

.map-context-manage button.danger:hover:not(:disabled) {
  border-color: #e0605a;
  background: #4a2225;
}

.map-context-hint {
  color: #82929e;
  font-size: 10px;
  line-height: 1.3;
}

/* Panel „Meine Wegpunkte“ hinter dem Schalter Wegpunkte */
.saved-waypoints-panel {
  position: absolute;
  z-index: 1060;
  top: 58px;
  right: 14px;
  display: flex;
  width: 300px;
  max-height: calc(100% - 72px);
  flex-direction: column;
  gap: 8px;
  padding: 10px 11px;
  border: 1px solid #4d5660;
  border-radius: 7px;
  background: rgba(17, 24, 32, 0.96);
  color: #e8edf1;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
}

.saved-waypoints-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.saved-waypoints-panel header strong span {
  margin-left: 4px;
  color: #b9a6e6;
  font-size: 11px;
}

.saved-waypoints-panel header button {
  border: 0;
  background: transparent;
  color: #aab5bd;
  font-size: 18px;
  cursor: pointer;
}

.saved-waypoints-visible {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 7px;
  border-radius: 5px;
  background: #1d2932;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.saved-waypoints-visible input {
  accent-color: #9a7ce6;
}

.saved-waypoints-filter {
  padding: 6px 8px;
  border: 1px solid #526170;
  border-radius: 5px;
  outline: none;
  background: #17222c;
  color: #eef5f7;
  font-size: 12px;
}

.saved-waypoints-filter:focus {
  border-color: #168cff;
}

.saved-waypoints-list {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.saved-waypoint-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 6px;
  padding: 5px 6px 5px 8px;
  border-radius: 5px;
  background: #1d2932;
}

.saved-waypoint-row > .waypoint-name-error {
  grid-column: 1 / -1;
}

.saved-waypoint-main {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 1px 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.saved-waypoint-main strong {
  color: #efe6ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
}

.saved-waypoint-main span {
  overflow: hidden;
  color: #b9a6e6;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saved-waypoint-main small {
  grid-column: 1 / -1;
  color: #82929e;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
}

.saved-waypoint-main:hover strong {
  color: #ffffff;
  text-decoration: underline;
}

.saved-waypoint-actions {
  display: flex;
  gap: 4px;
}

.saved-waypoint-actions button {
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border: 1px solid #526170;
  border-radius: 5px;
  background: #263440;
  color: #d5dee4;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.saved-waypoint-actions button:hover:not(:disabled) {
  border-color: #b58cff;
  color: #ffffff;
}

.saved-waypoint-actions button:disabled {
  opacity: 0.45;
  cursor: default;
}

.saved-waypoint-actions button.danger {
  border-color: #8a3b3b;
  background: #3a1d1f;
  color: #ffd0d0;
}

.saved-waypoint-row.editing {
  grid-template-columns: 1fr;
}

.saved-waypoint-edit {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 6px;
}

.saved-waypoints-empty {
  margin: 0;
  color: #9cadb8;
  font-size: 11px;
  line-height: 1.4;
}

.saved-waypoints-panel > small {
  color: #8f9ba5;
  font-size: 10px;
  line-height: 1.35;
}

@media (max-width: 900px) {
  .map-stage .saved-waypoints-panel {
    top: 52px;
    right: 8px;
    left: 8px;
    width: auto;
  }
}

/* Wegpunkt-Ordner und ICAO-Stern */
.leaflet-marker-icon.saved-waypoint-icon {
  border: 0;
  background: transparent;
}

.saved-waypoint-icon svg {
  display: block;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
}

.waypoint-star {
  flex: 0 0 auto;
}

.leaflet-tooltip.saved-waypoint-tooltip {
  margin-left: 0;
}

.map-context-saved em {
  margin-left: auto;
  color: #82929e;
  font-size: 10px;
  font-style: normal;
  white-space: nowrap;
}

.waypoint-folder-select {
  width: 100%;
  padding: 5px 7px;
  border: 1px solid #526170;
  border-radius: 5px;
  outline: none;
  background: #17222c;
  color: #eef5f7;
  font-size: 12px;
}

.waypoint-folder-select:focus {
  border-color: #168cff;
}

.saved-waypoints-tools {
  display: flex;
  gap: 6px;
}

.saved-waypoints-tools .saved-waypoints-filter {
  min-width: 0;
  flex: 1;
}

.saved-waypoints-tools button {
  padding: 0 9px;
  border: 1px solid #6b55a8;
  border-radius: 5px;
  background: #241b3a;
  color: #efe6ff;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.saved-waypoints-tools button:disabled {
  opacity: 0.45;
  cursor: default;
}

.saved-waypoint-folders {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.saved-waypoint-folders .saved-waypoints-list {
  overflow: visible;
  padding-left: 10px;
}

.saved-waypoint-folder {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.saved-waypoint-folder-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 5px;
  background: #24323d;
}

.saved-waypoint-folder-head input {
  accent-color: #9a7ce6;
}

.saved-waypoint-folder-title {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #eef5f7;
  text-align: left;
  cursor: pointer;
}

.saved-waypoint-folder-title strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saved-waypoint-folder-title small {
  color: #8f9ba5;
  font-size: 11px;
}

.folder-caret {
  width: 10px;
  color: #8f9ba5;
  font-size: 10px;
}

.saved-waypoint-folder-delete {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 7px 8px;
  border: 1px solid #5a2f31;
  border-radius: 5px;
  background: #241719;
}

.saved-waypoint-folder-delete p {
  margin: 0;
  color: #f1d6d6;
  font-size: 11px;
  line-height: 1.4;
}

.saved-waypoint-folder-delete .saved-waypoint-actions {
  flex-wrap: wrap;
}

.saved-waypoint-folder-delete .saved-waypoint-actions button,
.waypoint-folder-form .saved-waypoint-actions button,
.saved-waypoint-row.editing .saved-waypoint-actions button {
  flex: 1;
}

.link-button {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
  color: #9cadb8;
  font-size: 11px;
  text-decoration: underline;
  cursor: pointer;
}

.waypoint-folder-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 7px 8px;
  border: 1px solid #3a4652;
  border-radius: 5px;
  background: #1d2932;
}

.waypoint-folder-form > input {
  padding: 5px 8px;
  border: 1px solid #526170;
  border-radius: 5px;
  outline: none;
  background: #17222c;
  color: #eef5f7;
  font-size: 12px;
}

.waypoint-folder-form > input:focus {
  border-color: #168cff;
}

.folder-color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.folder-color-picker button {
  display: inline-flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 5px;
  background: #17222c;
  cursor: pointer;
}

.folder-color-picker button.selected {
  border-color: #eef5f7;
  background: #2b3a46;
}

.saved-waypoint-edit {
  grid-template-columns: auto minmax(0, 1fr);
}

.saved-waypoint-edit .waypoint-folder-select {
  grid-column: 1 / -1;
}

.folder-empty {
  padding-left: 12px;
  font-size: 10px;
}

/* Ordnerbaum im Panel: Ordnersymbol, eingerückte Wegpunkte an einer Linie */
.saved-waypoint-folder-head {
  padding: 6px 7px;
  border: 1px solid #34434f;
  background: #24323d;
}

.saved-waypoint-folder.unfiled .saved-waypoint-folder-head {
  border-style: dashed;
  background: #1c2730;
}

.saved-waypoint-folder-title {
  gap: 7px;
}

.saved-waypoint-folder-title strong {
  font-size: 13px;
  letter-spacing: 0.02em;
}

.saved-waypoint-folder.unfiled .saved-waypoint-folder-title strong {
  color: #b7c2ca;
  font-style: italic;
  font-weight: 700;
}

.saved-waypoint-folder-title small {
  padding: 0 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
}

.folder-caret {
  width: 12px;
  font-size: 12px;
}

.folder-icon {
  flex: 0 0 auto;
}

.saved-waypoint-folders .saved-waypoints-list {
  position: relative;
  gap: 3px;
  margin-left: 14px;
  padding-left: 12px;
  border-left: 2px solid var(--folder-color, #526170);
}

.saved-waypoint-folder.unfiled .saved-waypoints-list {
  border-left-style: dashed;
}

.saved-waypoint-folders .saved-waypoint-row {
  position: relative;
}

/* Abzweig der Baumlinie zu jedem Wegpunkt */
.saved-waypoint-folders .saved-waypoint-row::before {
  position: absolute;
  top: 50%;
  left: -12px;
  width: 10px;
  border-top: 2px solid var(--folder-color, #526170);
  content: '';
}

.saved-waypoint-main {
  grid-template-columns: auto auto minmax(0, 1fr);
}

.saved-waypoint-main .waypoint-star {
  grid-row: 1 / span 2;
  align-self: center;
}

.saved-waypoint-main small {
  grid-column: 2 / -1;
}

.folder-empty {
  margin-left: 14px;
  padding: 3px 0 3px 12px;
  border-left: 2px dashed var(--folder-color, #526170);
}

/* Kartenart: Luftfahrtkarte / Gelände (Esri + BfN-Schutzgebiete) */
.map-mode-control {
  position: absolute;
  z-index: 1040;
  right: 14px;
  bottom: 28px;
  display: flex;
  width: 236px;
  max-height: calc(100% - 90px);
  overflow-y: auto;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  background: rgba(17, 24, 32, 0.92);
  color: #edf2f6;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
}

.map-mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 2px;
  border-radius: 6px;
  background: #0d141a;
}

.map-mode-switch button {
  padding: 5px 6px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #aab7bf;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.map-mode-switch button.active {
  background: #1f6f8b;
  color: #ffffff;
}

.map-mode-options {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.map-mode-options-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px;
  border: 0;
  background: transparent;
  color: #eef5f7;
  font-size: 11px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.map-mode-options-toggle small {
  margin-left: auto;
  padding: 0 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #aab7bf;
}

.map-mode-options label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 5px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.map-mode-options label:hover {
  background: rgba(255, 255, 255, 0.05);
}

.map-mode-options label input[type='checkbox'] {
  accent-color: #1f9bc0;
}

.map-mode-options label i {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 2px;
  opacity: 0.85;
}

.map-mode-options .map-mode-opacity {
  justify-content: space-between;
  color: #aab7bf;
}

.map-mode-opacity input {
  width: 110px;
  accent-color: #1f9bc0;
}

.map-mode-note {
  padding: 2px 5px 0;
  color: #82929e;
  font-size: 9.5px;
  line-height: 1.35;
}

.protected-area-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #eef4f7;
  font-size: 12px;
}

.protected-area-info header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding-right: 14px;
}

.protected-area-info header span {
  color: #8a9aa5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
}

.protected-area-info ul {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.protected-area-info li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.protected-area-info li i {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  margin-top: 3px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 2px;
}

.protected-area-info li div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

.protected-area-info li small {
  color: #8a9aa5;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.protected-area-info li strong {
  font-size: 13px;
}

.protected-area-info li span {
  color: #aab7bf;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
}

.protected-area-info a {
  color: #8fc7ff;
}

.protected-area-info footer {
  padding-top: 6px;
  border-top: 1px solid #2c3a45;
  color: #82929e;
  font-size: 10px;
}

@media (max-width: 900px) {
  .map-mode-control {
    right: 8px;
    bottom: 26px;
    width: 200px;
  }
}

/* Gelände-Modus: Lufträume, Flugplätze, Gruppen im Bedienfeld */
.map-mode-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  padding: 2px 5px;
  color: #82929e;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.map-mode-group-title small {
  padding: 0 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  letter-spacing: 0;
}

.map-mode-options label small {
  color: #82929e;
  font-size: 9.5px;
  font-weight: 600;
}

.map-mode-status {
  padding: 0 5px;
  color: #f3c96b;
  font-size: 10px;
}

.airspace-swatch {
  display: inline-block;
  width: 14px;
  height: 10px;
  flex: 0 0 auto;
  border: 2px dashed currentColor;
  border-radius: 2px;
  background: transparent !important;
}

.airspace-swatch.edr {
  border-style: solid;
  background: rgba(214, 40, 40, 0.35) !important;
}

.protected-area-info li .airspace-swatch {
  width: 14px;
  height: 10px;
  margin-top: 4px;
}

.airfield-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border: 2px solid #1d3557;
  border-radius: 50%;
  background: #ffffff !important;
}

.leaflet-marker-icon.terrain-airfield-icon {
  border: 0;
  background: transparent;
}

.leaflet-marker-icon.terrain-airspace-label {
  width: auto !important;
  height: auto !important;
  border: 0;
  background: transparent;
}

.terrain-airspace-label div {
  transform: translate(-50%, -50%);
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--c);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.terrain-airspace-label small {
  display: block;
  font-size: 10px;
  font-weight: 700;
}

.protected-area-info h4 {
  margin: 0;
  color: #82929e;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.protected-area-info section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* NOTAMs ausblenden: Filter bleiben erhalten, Kategorien wirken abgeblendet */
.notams-hidden-toggle {
  margin-left: auto;
  padding: 5px 10px;
  border: 1px solid #526170;
  border-radius: 6px;
  background: #1b2630;
  color: #d5dee4;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.notams-hidden-toggle:hover {
  border-color: #8a9aa5;
}

.notams-hidden-toggle.active,
.categorybar .notams-hidden-toggle.active,
.collapsed-filter-actions .notams-hidden-toggle.active {
  border-color: #e0a64b;
  background: #3a2c12;
  color: #ffd99a;
}

.categorybar .notams-hidden-toggle + .filter-collapse-button {
  margin-left: 8px;
}

.categorybar.notams-hidden > button:not(.notams-hidden-toggle):not(.filter-collapse-button) {
  opacity: 0.4;
}

/* Bullseye */
.leaflet-marker-icon.bullseye-label {
  width: auto !important;
  height: auto !important;
  border: 0;
  background: transparent;
}

.bullseye-label span {
  display: inline-block;
  transform: translate(-50%, -50%);
  padding: 1px 4px;
  border: 1px solid #ffd400;
  border-radius: 3px;
  background: #15191d;
  color: #ffd400;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.bullseye-control {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bullseye-row .route-search {
  display: flex;
  min-width: 0;
  flex: 1;
  gap: 6px;
}

.bullseye-row .route-search input {
  min-width: 0;
  flex: 1;
}

.bullseye-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  background: #1a2630;
}

.bullseye-name {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: baseline;
  gap: 6px;
}

.bullseye-name > span {
  color: #ffd400;
  font-size: 14px;
}

.bullseye-name strong {
  overflow: hidden;
  color: #eef5f7;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bullseye-name small {
  color: #8a9aa5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
}

.bullseye-rings input {
  width: 3.5em;
}

.bullseye-error {
  color: #ffb5b5;
  font-size: 11px;
}

.map-context-bullseye {
  padding: 6px 10px;
  border: 1px solid #7a6a1d;
  border-radius: 6px;
  background: #2a2610;
  color: #ffe98a;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.map-context-bullseye:hover {
  border-color: #ffd400;
}

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

.bullseye-row .route-search input {
  padding: 7px 8px;
  border: 1px solid #43515d;
  border-radius: 5px;
  outline: none;
  background: #0e151b;
  color: #edf4f7;
  font-size: 12px;
}

/* Wegpunkt-Austausch: Export/Import im Panel und Import-Dialog */
.saved-waypoints-exchange {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.saved-waypoints-exchange button {
  padding: 5px 8px;
  border: 1px solid #526170;
  border-radius: 5px;
  background: #1d2932;
  color: #d5dee4;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.saved-waypoints-exchange button:hover:not(:disabled) {
  border-color: #b58cff;
  color: #ffffff;
}

.saved-waypoints-exchange button:disabled {
  opacity: 0.45;
  cursor: default;
}

.saved-waypoints-message {
  color: #9fe0b0;
  font-size: 11px;
}

.waypoint-exchange-form > strong {
  font-size: 12px;
}

.waypoint-format-choice,
.waypoint-export-folders {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.waypoint-format-choice label,
.waypoint-export-folders label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.waypoint-format-choice small,
.waypoint-export-folders small {
  margin-left: 4px;
  color: #82929e;
  font-size: 10px;
  font-weight: 600;
}

.waypoint-export-folders label small {
  margin-left: auto;
}

.waypoint-import-backdrop {
  position: fixed;
  z-index: 3000;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(5, 9, 12, 0.6);
}

.waypoint-import-dialog {
  display: flex;
  width: min(920px, 100%);
  max-height: calc(100vh - 32px);
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid #526471;
  border-radius: 10px;
  background: #111a21;
  color: #eef4f7;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}

.waypoint-import-dialog > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.waypoint-import-dialog > header div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.waypoint-import-dialog > header small {
  color: #8a9aa5;
  font-size: 11px;
}

.waypoint-import-dialog > header button {
  border: 0;
  background: transparent;
  color: #aab5bd;
  font-size: 22px;
  cursor: pointer;
}

.waypoint-import-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.import-status {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 9px;
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
}

.import-status.new { background: #1f4d2e; color: #b9f0c8; }
.import-status.identical { background: #2a3540; color: #c3cfd6; }
.import-status.conflict { background: #5a3a10; color: #ffd99a; }
.import-status.nearby { background: #3f3420; color: #f3d9a0; }
.import-status.invalid { background: #5a1d22; color: #ffc4c4; }

.waypoint-import-problems {
  margin: 0;
  padding-left: 18px;
  color: #f3c96b;
  font-size: 11px;
}

.waypoint-import-folders {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 10px;
  border-radius: 6px;
  background: #18232c;
}

.waypoint-import-folders h4 {
  margin: 0;
  color: #82929e;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.waypoint-import-folders label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 260px);
  align-items: center;
  gap: 10px;
  font-size: 12px;
}

.waypoint-import-folders label small {
  margin-left: 8px;
  color: #82929e;
}

.waypoint-import-dialog select {
  padding: 4px 6px;
  border: 1px solid #526170;
  border-radius: 5px;
  background: #17222c;
  color: #eef5f7;
  font-size: 12px;
}

.waypoint-import-table {
  min-height: 0;
  flex: 1;
  overflow: auto;
  border: 1px solid #2c3a45;
  border-radius: 6px;
}

.waypoint-import-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.waypoint-import-table th {
  position: sticky;
  top: 0;
  padding: 6px 8px;
  background: #1b2731;
  color: #8fa3ae;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
}

.waypoint-import-table td {
  padding: 6px 8px;
  border-top: 1px solid #22303a;
  vertical-align: top;
}

.waypoint-import-table td small {
  display: block;
  margin-top: 3px;
  color: #8a9aa5;
  font-size: 10px;
}

.waypoint-import-table td.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  white-space: nowrap;
}

.waypoint-import-table tr.skipped td {
  opacity: 0.5;
}

.waypoint-import-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid #8a3b3b;
  border-radius: 6px;
  background: #2a1517;
  color: #ffc4c4;
  font-size: 12px;
}

.waypoint-import-error button {
  padding: 4px 10px;
  border: 1px solid #c06060;
  border-radius: 5px;
  background: transparent;
  color: #ffd0d0;
  font-weight: 700;
  cursor: pointer;
}

.waypoint-import-dialog > footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #aab7bf;
  font-size: 12px;
}

.waypoint-import-dialog .saved-waypoint-actions button {
  min-width: 110px;
  height: 32px;
}

.waypoint-import-dialog .saved-waypoint-actions button.primary {
  border-color: #1f9bc0;
  background: #1f6f8b;
  color: #ffffff;
}

/* Lineal im Gelände-Modus */
.ruler-control {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 6px;
  padding: 2px 2px 4px;
  border-bottom: 1px solid #2c3a45;
}

.ruler-control small {
  grid-column: 1 / -1;
  color: #82929e;
  font-size: 9.5px;
  line-height: 1.3;
}

.ruler-toggle {
  padding: 5px 8px;
  border: 1px solid #7a6a1d;
  border-radius: 5px;
  background: #2a2610;
  color: #ffe98a;
  font-size: 11px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.ruler-toggle.active {
  border-color: #ffd400;
  background: #4a3f0c;
  color: #fff3b0;
}

.ruler-clear {
  width: 26px;
  height: 26px;
  border: 1px solid #526170;
  border-radius: 5px;
  background: #1d2932;
  color: #d5dee4;
  font-size: 14px;
  cursor: pointer;
}

.leaflet-container.ruler-tool-active,
.leaflet-container.ruler-tool-active .leaflet-interactive {
  cursor: crosshair;
}

.leaflet-marker-icon.ruler-label {
  width: auto !important;
  height: auto !important;
  border: 0;
  background: transparent;
  pointer-events: none;
}

.ruler-label span {
  display: inline-block;
  transform: translate(-50%, -140%);
  padding: 2px 6px;
  border: 1px solid #ffd400;
  border-radius: 4px;
  background: #15191d;
  color: #ffe36b;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.ruler-label.total span {
  transform: translate(10px, -50%);
  background: #ffd400;
  color: #15191d;
}

.leaflet-marker-icon.ruler-point {
  border: 0;
  background: transparent;
}

.ruler-point span {
  display: block;
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border: 2px solid #15191d;
  border-radius: 50%;
  background: #ffd400;
  cursor: move;
}

/* Gemeinsame Wegpunkte: Reiter, Hinweise, Rechte */
.saved-waypoints-tabs {
  display: flex;
  gap: 4px;
}

.saved-waypoints-panel header .saved-waypoints-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid #3a4853;
  border-radius: 6px;
  background: #18222b;
  color: #aab5bd;
  font-size: 12px;
  font-weight: 700;
}

.saved-waypoints-panel header .saved-waypoints-tabs button.active {
  border-color: #b98cff;
  background: #2a2140;
  color: #f2ecff;
}

.saved-waypoints-tabs button span {
  color: #b9a6e6;
  font-size: 11px;
}

.saved-waypoints-scope-note {
  color: #8fa0ad;
  font-size: 11px;
  line-height: 1.35;
}

.map-context-shared {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #d7e2ec;
  font-size: 12px;
}

.waypoint-notices,
.shared-route-notice {
  position: absolute;
  z-index: 1300;
  top: 62px;
  left: 50%;
  width: min(430px, calc(100% - 24px));
  padding: 12px 14px;
  border: 1px solid #ffd23f;
  border-radius: 9px;
  background: rgba(16, 23, 30, 0.97);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  color: #e6edf3;
  font-size: 13px;
  transform: translateX(-50%);
}

.shared-route-notice {
  top: auto;
  bottom: 40px;
}

.waypoint-notices ul,
.shared-route-notice ul {
  margin: 8px 0 10px;
  padding-left: 18px;
}

.waypoint-notices li,
.shared-route-notice li {
  margin: 3px 0;
}

.shared-route-notice > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.waypoint-notices button,
.shared-route-notice button {
  padding: 6px 12px;
  border: 1px solid #526471;
  border-radius: 6px;
  background: #1d2a35;
  color: #e6edf3;
  font-weight: 700;
  cursor: pointer;
}

.waypoint-notices button:hover,
.shared-route-notice button:hover {
  border-color: #ffd23f;
}

.account-right {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #b9c6d0;
  font-size: 12px;
}

/* Verwaltung: Reiter, Benutzertabelle, Formulare, Protokoll */
.account-dashboard { width: min(1040px, 100%); }
.account-dashboard button.secondary { background: #2a3d4b; border: 1px solid #4d6576; }
.account-dashboard button.danger { background: #8e2f2f; }
.account-dashboard button:disabled { opacity: 0.55; cursor: default; }
.admin-tabs { display: flex; gap: 6px; margin: 4px 0 16px; border-bottom: 1px solid #405262; }
.account-dashboard .admin-tabs button { padding: 9px 16px; border-radius: 6px 6px 0 0;
  background: transparent; color: #b6c5d0; font-weight: 700; border-bottom: 3px solid transparent; }
.account-dashboard .admin-tabs button.active { color: #fff; border-bottom-color: #2bb3d6;
  background: #223544; }
.admin-tabs button span { margin-left: 6px; padding: 1px 6px; border-radius: 9px;
  background: #34495a; font-size: 11px; }
.admin-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.admin-toolbar > span { color: #b6c5d0; font-size: 13px; }
.admin-toolbar > button:last-child { margin-left: auto; }
.admin-toolbar select { padding: 6px; color: #fff; background: #111d26; border: 1px solid #668495;
  border-radius: 4px; }
.admin-check { display: flex; align-items: center; gap: 6px; }
.admin-row-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th { padding: 8px; text-align: left; color: #9fb3c2; font-size: 11px;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid #546a79; }
.admin-table td { padding: 8px; vertical-align: top; border-bottom: 1px solid #344756; }
.admin-table td small { display: block; color: #9fb3c2; font-size: 12px; }
.admin-table tr.inactive td { color: #8496a3; }
.admin-table tr.warning td { background: #3a2a1d; }
.admin-table .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.admin-audit .admin-details { color: #c9d6df; word-break: break-word; }
.admin-badge { display: inline-block; padding: 2px 8px; border-radius: 9px; font-size: 12px;
  font-weight: 700; background: #2a3d4b; }
.admin-badge.role-admin { background: #5b3f8f; }
.admin-create { margin-bottom: 16px; padding: 14px; border: 1px solid #546a79; border-radius: 8px;
  background: #16232d; }
.admin-user-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.admin-user-form label { display: grid; gap: 4px; font-size: 13px; }
.admin-user-form small { color: #9fb3c2; font-size: 11px; }
.admin-user-form input, .admin-user-form select, .admin-inline input { width: 100%; padding: 7px;
  color: #fff; background: #111d26; border: 1px solid #668495; border-radius: 4px; }
.admin-form-actions, .admin-form-error, .admin-form-message { grid-column: 1 / -1; }
.admin-form-actions { display: flex; gap: 8px; }
.admin-form-message { color: #8fe0a3; }
.admin-subdialog-backdrop { position: fixed; inset: 0; z-index: 4100; display: grid;
  place-items: center; padding: 16px; background: #050c12aa; }
.admin-subdialog { width: min(620px, 100%); max-height: 90vh; overflow: auto; padding: 20px;
  border: 1px solid #668495; border-radius: 10px; background: #1b2a36; }
.admin-subdialog header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.admin-subdialog h3 { margin: 0; }
.admin-subdialog header small { color: #9fb3c2; }
.admin-subdialog h4 { margin: 18px 0 8px; color: #9fb3c2; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.04em; }
.admin-inline { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-inline input { flex: 1 1 220px; width: auto; }
@media (max-width: 620px) { .admin-user-form { grid-template-columns: 1fr; } }
.account-dashboard .admin-form-error { margin: 0; font-size: 13px; }
.admin-user-form label { align-content: start; }
.admin-delete-note { margin: 10px 0 0; color: #f0c37a; font-size: 13px; }
.own-account input[readonly] { color: #b6c5d0; background: #16232d; }
.own-account-note { grid-column: 1 / -1; color: #9fb3c2; }
.own-account-sections h3 { margin: 22px 0 10px; padding-top: 14px; border-top: 1px solid #405262;
  font-size: 15px; }
.own-account-settings p { margin: 0 0 10px; color: #b6c5d0; font-size: 13px; line-height: 1.45; }
.map-mode-status.protected-outage { display: block; margin: 4px 0 6px; padding: 5px 7px;
  border: 1px solid #ffb020; border-radius: 5px; background: rgba(255, 176, 32, 0.12);
  color: #ffd27a; line-height: 1.35; }

/* Kraftstoffrechnung */
.route-fuel-settings .route-aircraft-field select { min-width: 92px; padding: 5px 6px; color: #fff;
  background: #111d26; border: 1px solid #4d6576; border-radius: 4px; }
.fuel-log .fuel-hint, .route-briefing-panel .fuel-hint { margin: 6px 0 0; color: #9fb3c2; font-size: 11px; line-height: 1.4; }
.fuel-warnings { margin: 0 0 8px; padding: 0; list-style: none; display: grid; gap: 4px; }
.fuel-warnings li { padding: 5px 8px; border-radius: 5px; font-size: 12px; font-weight: 700; line-height: 1.35; }
.fuel-warnings li.fuel-warning { border: 1px solid #ffb020; background: rgba(255, 176, 32, 0.14); color: #ffd27a; }
.fuel-warnings li.fuel-danger { border: 1px solid #ff5a5a; background: rgba(255, 90, 90, 0.16); color: #ffb3b3; }
.fuel-log-table .fuel-input { width: 58px; padding: 2px 4px; color: #fff; background: #111d26;
  border: 1px solid #4d6576; border-radius: 3px; font: inherit; }
.fuel-log-table tr.fuel-sub td { color: #b6c5d0; font-style: italic; }
.fuel-log-table tr.fuel-start td { color: #b6c5d0; }
.fuel-log-table tr.fuel-warning td { background: rgba(255, 176, 32, 0.12); }
.fuel-log-table tr.fuel-danger td { background: rgba(255, 90, 90, 0.16); }
.aircraft-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 620px) { .aircraft-form { grid-template-columns: 1fr; } }
.route-log-table .flight-log-add, .route-log-table .flight-log-remove { width: 22px; height: 22px; padding: 0;
  border: 1px solid #4d6576; border-radius: 4px; background: #16232d; color: #cfe0ea; font-weight: 700;
  line-height: 18px; cursor: pointer; }
.route-log-table .flight-log-add.active, .route-log-table .flight-log-add:hover { border-color: #2bb3d6; color: #fff; }
.route-log-table .flight-log-remove { color: #ff9b9b; }
.route-log-table tr.flight-log-sub td { color: #b6c5d0; font-style: italic; }
.route-log-table tr.flight-log-editor td { background: #16232d; }
.route-log-table tr.flight-log-editor td > * { margin-right: 12px; }
.route-log-table tr.flight-log-editor label { display: inline-flex; align-items: center; gap: 5px; }
.route-log-table tr.flight-log-editor input { width: 64px; padding: 3px 5px; color: #fff; background: #111d26;
  border: 1px solid #4d6576; border-radius: 3px; font: inherit; }
.route-log-table tr.flight-log-editor button { padding: 3px 9px; border: 1px solid #4d6576; border-radius: 4px;
  background: #1d2a35; color: #e6edf3; cursor: pointer; }
.route-log-table tr.fuel-warning td { background: rgba(255, 176, 32, 0.12); }
.route-log-table tr.fuel-danger td { background: rgba(255, 90, 90, 0.16); }
.route-log-table tr.fuel-start td { color: #e6edf3; font-weight: 800; }
.route-calculation .fuel-hint { margin: 6px 0 0; color: #9fb3c2; font-size: 11px; line-height: 1.4; }
.route-calculation .fuel-warnings { margin: 0 0 8px; }
.route-log-table.with-fuel th, .route-log-table.with-fuel td { padding: 5px 3px; font-size: 12px; }
.route-log-table tr.flight-log-sub td:first-child,
.route-log-table tr.fuel-start td:first-child,
.route-log-table tr.flight-log-editor td { white-space: normal; text-align: left; }
/* Hold/Refuel-Zeilen: gleiche Schrift und Ausrichtung wie Leg-Zeilen */
.route-log-table tr.flight-log-sub td { font-style: normal; font-weight: 400; cursor: pointer; }
.route-log-table tr.flight-log-sub:hover td { background: rgba(43, 179, 214, 0.08); }
.route-log-table tr.flight-log-sub.fuel-danger:hover td { background: rgba(255, 90, 90, 0.22); }
/* Zahlen in Hold/Refuel-Zeilen rechtsbündig wie in den Leg-Zeilen
   (die Regel für FROM/TO trifft dort sonst die ETE-Spalte) */
.route-log-table tr.flight-log-sub td:nth-child(n + 2) { text-align: right; }
/* TOTAL-Zeile: Zahlen rechtsbündig unter ihren Spalten */
.route-log-table tfoot td:nth-child(n) { text-align: right; }

/* Kraftstoff-Marker auf der Routenlinie */
.leaflet-tooltip.route-fuel-label {
  padding: 2px 6px;
  border: 1px solid #07131d;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.leaflet-tooltip.route-fuel-label::before {
  display: none;
}

.leaflet-tooltip.route-fuel-label-reserve {
  background: #ffd400;
  color: #07131d;
}

.leaflet-tooltip.route-fuel-label-empty {
  background: #ff3b3b;
  color: #ffffff;
}

.route-fuel-popup .leaflet-popup-content {
  max-width: 260px;
  font-size: 12px;
}

/* Routenbriefing: dokumentierte Flugwetterprüfung */
.briefing-weather-review-summary { display: block; margin-top: 4px; color: #8fd3a8; }
.briefing-weather-review-summary.missing { color: #ffb3b3; font-weight: 700; }

/* ED-R 150 (NLFS): Abschnitte im NOTAM-Popup */
.popup-nlfs { margin: 6px 0; font-size: 11px; }
.popup-nlfs table { border-collapse: collapse; width: 100%; }
.popup-nlfs th, .popup-nlfs td { padding: 2px 6px 2px 0; text-align: left; white-space: nowrap; }
.popup-nlfs th { font-weight: 800; }

/* Verwaltung: MIL AIP */
.mil-aip-admin .admin-create p { margin: 4px 0; line-height: 1.45; }
.mil-aip-admin .mil-aip-changes { margin: 4px 0 8px; padding-left: 18px; font-size: 12px; }
.mil-aip-admin .mil-aip-ctr { margin: 4px 0 8px; font-size: 12px; }
.mil-aip-admin .mil-aip-ctr summary { cursor: pointer; }
.mil-aip-admin .mil-aip-ctr ul { margin: 4px 0; padding-left: 18px; columns: 2; }
.mil-aip-admin .mil-aip-note { color: #ffd27a; font-size: 12px; }
.mil-aip-admin .mil-aip-upload { display: grid; gap: 8px; justify-items: start; }
.mil-aip-admin .mil-aip-upload small { color: #9fb3c2; }
.mil-aip-admin .mil-aip-staged.ready { border-color: #2bb3d6; }
.mil-aip-admin .mil-aip-staged.failed { border-color: #ff5a5a; }

/* ED-R 150 (NLFS): Knotennamen auf der Karte (Text mittig auf der Koordinate) */
.nlfs-node-icon { pointer-events: none; }
.nlfs-node { position: absolute; transform: translate(-50%, -50%); color: #4f5a63;
  font: 800 15px/1 system-ui, sans-serif; letter-spacing: 0.02em; white-space: nowrap;
  text-shadow: 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff, 0 0 6px #fff; }
.nlfs-node:not(.active) { opacity: 0.5; }
.nlfs-node.active { color: #b00000; }
.nlfs-toggle .nlfs-toggle-icon { font-size: 9px; letter-spacing: 0; }
.nlfs-unavailable { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
  background: #d8a300; color: #1b1300; font-weight: 900; font-size: 11px; }

/* Verwaltung: Upload (MIL AIP, Luftfahrtkarte) */
.admin-uploads { display: grid; gap: 22px; }
.admin-uploads .admin-upload-title { margin: 0 0 4px; font-size: 16px; }
.admin-uploads .ofm-admin { border-top: 1px solid #405262; padding-top: 16px; }
.ofm-admin .ofm-expired { border-color: #d69b24; }
.ofm-admin .ofm-expired-label { color: #ffd27a; }

/* Gespeicherte Routen */
.route-panel-footer-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.route-panel-footer .route-loaded-name { color: #9fd3e0; font-size: inherit; }
.route-save-dialog, .route-library-dialog { width: min(560px, 100%); }
.route-save-name { display: grid; gap: 4px; font-size: 12px; color: #aab7bf; }
.route-save-name input, .route-library-search, .route-library-rename input {
  padding: 8px 10px; border: 1px solid #405262; border-radius: 6px;
  background: #0b1217; color: #eef4f7; font-size: 14px;
}
.route-save-hint { margin: 0; color: #ffd27a; font-size: 12px; }
.route-library-empty { margin: 4px 0; color: #8a9aa5; font-size: 12px; }
.route-library-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: grid; gap: 6px; }
.route-library-list li {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border: 1px solid #2c3b46; border-radius: 7px; background: #16222b;
}
.route-library-list li.loaded { border-color: #1f9bc0; }
.route-library-main {
  flex: 1; min-width: 0; display: grid; gap: 1px; text-align: left; padding: 2px;
  border: 0; background: transparent; color: #eef4f7; cursor: pointer;
}
.route-library-main strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.route-library-main span { color: #aab7bf; font-size: 11.5px; }
.route-library-main small { color: #73838e; font-size: 10.5px; }
.route-library-actions, .route-library-rename { display: flex; gap: 5px; }
.route-library-rename { flex: 1; }
.route-library-rename input { flex: 1; min-width: 0; font-size: 13px; padding: 5px 8px; }
.route-library-actions button, .route-library-rename button {
  padding: 5px 8px; border: 1px solid #405262; border-radius: 5px;
  background: #1c2a33; color: #dce6ec; font-size: 11px; cursor: pointer;
}
.route-library-actions button.primary { border-color: #1f9bc0; background: #1f6f8b; color: #fff; }
.route-library-actions button.danger { border-color: #7a3a3a; color: #ffb3b3; }
@media (max-width: 560px) {
  .route-library-list li { flex-wrap: wrap; }
  .route-library-actions { width: 100%; justify-content: flex-end; }
}

/* ===== Touch-Geräte (Tablet, z. B. iPad mini) =====
   Alles hier gilt nur bei Fingerbedienung bis Tabletbreite.
   Am Desktop mit Maus bleibt das Layout unverändert. */
.topbar-menu { display: contents; }
.topbar-menu-toggle { display: none; }

@media (pointer: coarse) and (max-width: 1366px) {
  /* Kopfzeile: Umkreis, PIBs, Verwaltung und Abmelden im Menü */
  .app { grid-template-rows: auto 44px auto minmax(0, 1fr) 34px; }
  .topbar { position: relative; height: auto; min-height: 68px; padding-top: 8px; padding-bottom: 8px; }
  .topbar .topbar-actions { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; min-width: 0; }
  .topbar .topbar-actions .status { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-menu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; width: 44px; height: 44px; margin-left: auto;
    border: 1px solid #3a4b57; border-radius: 8px; background: #1c2a33;
    color: #eef4f7; font-size: 20px; cursor: pointer;
  }
  .topbar-menu { display: none; }
  .topbar-menu.open {
    position: absolute; z-index: 1900; top: calc(100% + 4px); right: 8px;
    display: flex; flex-direction: column; align-items: stretch; gap: 10px;
    width: min(360px, calc(100vw - 16px)); padding: 12px;
    border: 1px solid #3a4b57; border-radius: 10px; background: #111a21;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
  }
  .topbar-menu.open > * { margin: 0; }
  .topbar-menu.open .area-tools { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; box-sizing: border-box; }
  .topbar-menu.open .area-tools > * { flex: 1 1 auto; min-width: 0; }
  .topbar-menu.open .area-tools .area-tools-label { flex-basis: 100%; }
  .topbar-menu.open .area-tools input { min-height: 40px; }
  .topbar-menu.open .auth-session-bar { flex-wrap: wrap; gap: 8px; }
  .mil-aip-expired-warning { white-space: normal; flex-wrap: wrap; }

  /* Ebenen-Knöpfe: nur Kürzel, große Tippflächen, umbrechen statt abschneiden */
  .map-layer-toolbar { flex-wrap: wrap; justify-content: flex-end; max-width: calc(100% - 70px); gap: 6px; }
  .map-layer-toolbar > button > span:nth-child(2) { display: none; }
  .map-layer-toolbar > button { min-height: 44px; min-width: 44px; }

  /* Filterleiste: umbrechen, Kategorien seitlich wischbar */
  .filterbar { flex-wrap: wrap; row-gap: 8px; }
  .filter-controls .category-filters,
  .filter-controls .category-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }

  /* Planungspanel nie breiter als der Bildschirm */
  .mode-panel { box-sizing: border-box; max-width: 100vw; }
  .mode-panel * { min-width: 0; }
  .route-flight-row, .route-section .route-search, .route-panel-footer, .route-panel-heading { flex-wrap: wrap; }

  /* Tippziele */
  .main-mode-nav button { min-height: 44px; }
  .mode-panel button, .mode-panel input, .mode-panel select { min-height: 40px; }
  .leaflet-touch .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; }

  html, body { overflow-x: hidden; }
}

/* ===== Touch: Flugplan-Leiste (nur PlanningPanel im Touch-Layout) ===== */
.map-wrapper:has(.touch-plan) { flex-direction: column; }
.map-wrapper:has(.touch-plan) .mode-panel-resize-handle { display: none; }
.mode-panel.touch-plan {
  order: 0; flex: 0 0 auto; width: 100%; max-width: none; box-sizing: border-box;
  padding: 8px 10px 6px; border-right: 0; border-bottom: 1px solid #33404b;
  display: flex; flex-direction: column; gap: 6px; overflow: visible; z-index: 1300;
}
.map-wrapper:has(.touch-plan) .map-stage { order: 1; }
.touch-plan-bar { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: stretch; }
.touch-plan.collapsed .touch-plan-bar { grid-template-columns: 1fr; }
.touch-plan-tiles, .touch-plan-actions { display: grid; gap: 6px; }
.touch-plan-tiles button, .touch-plan-actions button {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  min-width: 112px; min-height: 42px; padding: 3px 10px; border: 1px solid #33424d; border-radius: 7px;
  background: #1c2832; color: #eef4f7; font-size: 14px; font-weight: 700; text-align: left; cursor: pointer;
}
.touch-plan-tiles button small, .touch-plan-actions button small, .touch-plan-summary small {
  color: #8fa0ab; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.touch-plan-tiles button.active, .touch-plan-actions button.active { border-color: #31b7c6; }
.touch-plan-route {
  display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; padding: 6px;
  min-height: 44px; border: 1px solid #33424d; border-radius: 7px; background: #111a21;
}
.touch-route-chip {
  min-height: 38px; padding: 4px 12px; border: 1px solid #3b6f8f; border-radius: 19px;
  background: #1f4f6e; color: #fff; font-size: 15px; font-weight: 800; cursor: pointer;
}
.touch-route-chip.dep, .touch-route-chip.dest { background: #1f6f8b; border-color: #35a6c4; }
.touch-route-chip.active { outline: 2px solid #ffd27a; }
.touch-route-add { flex: 1 1 110px; display: flex; }
.touch-route-add input {
  flex: 1; min-width: 0; min-height: 38px; padding: 4px 10px; border: 1px dashed #44606f; border-radius: 19px;
  background: transparent; color: #eef4f7; font-size: 15px; text-transform: uppercase;
}
.touch-plan-summary { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 2px 4px; }
.touch-plan-summary span { display: flex; flex-direction: column; color: #eef4f7; font-size: 16px; font-weight: 800; }
.touch-plan-tabs { display: flex; gap: 6px; padding-right: 52px; }
.touch-plan-tabs button {
  flex: 1; min-height: 40px; border: 1px solid #33424d; border-radius: 7px; background: #16222b;
  color: #dce6ec; font-size: 14px; font-weight: 700; cursor: pointer;
}
.touch-plan-tabs button.active { background: #1f6f8b; border-color: #31b7c6; color: #fff; }
.touch-plan-tabs button:disabled { opacity: 0.4; }
.touch-plan-collapse {
  position: absolute; right: 10px; bottom: 6px; width: 44px; height: 40px;
  border: 1px solid #33424d; border-radius: 7px; background: #16222b; color: #dce6ec; font-size: 16px;
}
.touch-plan.collapsed .touch-plan-collapse { bottom: auto; top: 8px; }
.touch-plan.collapsed .touch-plan-route { margin-right: 52px; }
.touch-plan-popover {
  position: absolute; z-index: 1400; top: calc(100% + 4px); left: 10px; right: 10px;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 12px;
  border: 1px solid #3a4b57; border-radius: 10px; background: #111a21; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
}
.touch-plan-popover label { display: grid; gap: 4px; color: #aab7bf; font-size: 12px; }
.touch-plan-popover input, .touch-plan-popover select {
  min-height: 42px; padding: 6px 10px; border: 1px solid #405262; border-radius: 6px;
  background: #0b1217; color: #eef4f7; font-size: 16px;
}
.touch-plan-popover button {
  min-height: 42px; padding: 6px 14px; border: 1px solid #405262; border-radius: 6px;
  background: #1c2a33; color: #eef4f7; font-size: 14px; font-weight: 700;
}
.touch-plan-popover button.active { border-color: #31b7c6; background: #1f6f8b; }
.touch-plan-popover button.danger { border-color: #7a3a3a; color: #ffb3b3; }
.touch-plan-popover .touch-popover-close { margin-left: auto; border-color: #1f9bc0; background: #1f6f8b; }
.touch-popover-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.touch-chip-menu strong { flex-basis: 100%; color: #eef4f7; font-size: 14px; }
.touch-plan-message { margin: 0; }
.touch-plan-sheet {
  position: fixed; z-index: 1500; left: 0; right: 0; bottom: 34px; top: 42vh;
  display: flex; flex-direction: column; border-top: 1px solid #3a4b57; border-radius: 14px 14px 0 0;
  background: #17212a; box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.5);
}
@media (orientation: landscape) {
  .touch-plan-sheet {
    left: auto; width: min(520px, 48vw);
    border-top: 0; border-left: 1px solid #3a4b57; border-radius: 14px 0 0 0;
  }
}
.touch-plan-sheet-head {
  display: flex; align-items: center; justify-content: space-between; padding: 10px 14px;
  border-bottom: 1px solid #2c3b46; color: #eef4f7; font-size: 15px;
}
.touch-plan-sheet-head button {
  width: 44px; height: 40px; border: 1px solid #33424d; border-radius: 7px; background: #1c2832; color: #eef4f7; font-size: 16px;
}
.touch-plan-sheet-body { flex: 1; overflow-y: auto; padding: 10px 12px 18px; -webkit-overflow-scrolling: touch; }
.touch-plan-sheet-body .route-section { margin: 0; }

/* ===== Touch: kompakt (Runde 2) ===== */
.touch-plan-params { display: flex; flex-wrap: wrap; gap: 6px; }
.touch-plan-params button {
  display: inline-flex; align-items: baseline; gap: 6px; min-height: 34px; padding: 4px 10px;
  border: 1px solid #33424d; border-radius: 17px; background: #1c2832; color: #eef4f7;
  font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.touch-plan-params button small { color: #8fa0ab; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.touch-plan-params button.active { border-color: #31b7c6; }
.touch-plan-route { min-height: 34px; padding: 4px; gap: 5px; }
.touch-route-chip { min-height: 32px; padding: 2px 11px; border-radius: 16px; font-size: 14px; }
.touch-route-add input { min-height: 32px; border-radius: 16px; font-size: 14px; }
.touch-plan-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.touch-plan-summary { gap: 2px 14px; padding: 0 2px; }
.touch-plan-summary span { flex-direction: row; align-items: baseline; gap: 4px; font-size: 14px; }
.touch-plan-summary small { font-size: 9.5px; }
.touch-plan-tabs { padding-right: 0; gap: 5px; margin-left: auto; }
.touch-plan-tabs button { flex: 0 0 auto; min-height: 34px; padding: 0 12px; font-size: 13px; }
.touch-plan-collapse, .touch-plan.collapsed .touch-plan-collapse {
  position: static; width: 40px; height: 34px; font-size: 14px;
}
.touch-plan.collapsed .touch-plan-route { margin-right: 0; }
.mode-panel.touch-plan { gap: 5px; padding: 6px 8px 5px; }

@media (pointer: coarse) and (max-width: 1366px) {
  /* Kopfzeile einzeilig */
  .app { grid-template-rows: auto 34px auto minmax(0, 1fr) 30px; }
  .topbar { min-height: 0; padding-top: 5px; padding-bottom: 5px; flex-wrap: nowrap; align-items: center; gap: 10px; }
  .topbar h1 { font-size: 17px; line-height: 1.1; margin: 0; white-space: nowrap; }
  .topbar .subtitle { display: none; }
  .topbar .topbar-actions { flex-wrap: nowrap; align-items: center; gap: 8px; }
  .topbar .topbar-actions .status { max-width: 34vw; font-size: 11px; }
  .mil-aip-expired-warning { white-space: nowrap; flex-wrap: nowrap; padding: 3px 7px; }
  .mil-aip-expired-warning span:last-child { display: none; }
  .topbar-menu-toggle { width: 40px; height: 36px; font-size: 18px; }
  .topbar-menu.open { top: calc(100% + 2px); }

  /* Reiter */
  .main-mode-nav button { min-height: 34px; font-size: 10.5px; }

  /* Filterleiste */
  .filterbar button, .filterbar input, .filterbar select { min-height: 32px; }
  .filter-controls button { min-height: 32px; }
  .filter-controls .time-filter-button, .filter-controls .category-button { padding-top: 3px; padding-bottom: 3px; }

  /* Ebenen-Knöpfe und Zoom */
  .map-layer-toolbar > button { min-height: 36px; min-width: 40px; }
  .leaflet-touch .leaflet-bar a { width: 36px; height: 36px; line-height: 36px; }
  .mode-panel button, .mode-panel input, .mode-panel select { min-height: 34px; }
}

@media (pointer: coarse) and (max-width: 1366px) {
  /* Hochkant: Kopfzeile bleibt einzeilig (überschreibt die Stapelung schmaler Fenster) */
  .topbar .topbar-actions { flex-direction: row; align-items: center; }
  .topbar .topbar-actions .status { order: 2; }
  .topbar .topbar-actions .mil-aip-expired-warning { order: 1; }
  .topbar-menu-toggle { order: 3; margin-left: 0; }
  /* Parameter in einer Zeile, seitlich wischbar */
  .touch-plan-params { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .touch-plan-params::-webkit-scrollbar { display: none; }
  .touch-plan-params button { flex: 0 0 auto; }
  /* Zusammenfassung und Knöpfe in einer Zeile */
  .touch-plan-footer { flex-wrap: nowrap; }
  .touch-plan-summary { flex-wrap: nowrap; overflow-x: auto; min-width: 0; scrollbar-width: none; }
  .touch-plan-summary span { flex: 0 0 auto; white-space: nowrap; }
  .touch-plan-tabs button { padding: 0 9px; font-size: 12.5px; }
}

/* ===== Touch: Runde 3 ===== */
.layers-toggle { display: none; }
.topbar-menu-note { display: none; }

@media (pointer: coarse) and (max-width: 1366px) {
  /* 1. Einheitliche Höhe 34 px: Parameter, Route, Knöpfe */
  .touch-plan-route { padding: 0; border: 0; background: transparent; min-height: 0; }
  .touch-route-chip, .touch-route-add input, .touch-plan-params button, .touch-plan-tabs button, .touch-plan-collapse {
    height: 34px; min-height: 34px; box-sizing: border-box; font-size: 13px;
  }
  .touch-route-chip { padding: 0 12px; border-radius: 17px; }
  .touch-route-add input { border-radius: 17px; }
  /* 2. Ergebniswerte 85 % */
  .touch-plan-summary span { font-size: 12px; }
  .touch-plan-summary small { font-size: 9px; }
  .touch-fuel-arrival.warning { color: #ffd27a; }
  .touch-fuel-arrival.danger { color: #ff7b7b; }
  /* 3. Blattkopf so hoch wie ein Eingabefeld */
  .touch-plan-sheet-head { padding: 4px 8px 4px 14px; font-size: 14px; }
  .touch-plan-sheet-head button { width: 34px; height: 34px; min-height: 34px; font-size: 14px; }
  /* 4. Zoom kleiner */
  .leaflet-touch .leaflet-bar a { width: 30px; height: 30px; line-height: 30px; font-size: 18px; }
  /* 5. Ebenen hinter einem Knopf */
  .map-layer-toolbar { flex-direction: column; align-items: flex-end; flex-wrap: nowrap; }
  .layers-toggle {
    display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
    border: 1px solid #3a4b57; border-radius: 8px; background: #17212a; color: #eef4f7;
    font-size: 13px; font-weight: 800; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  }
  .map-layer-toolbar > button:not(.layers-toggle):not(.unmappable-toggle) { display: none; }
  .map-layer-toolbar.layers-open > button:not(.layers-toggle) {
    display: flex; width: 210px; min-height: 36px; justify-content: flex-start; gap: 8px;
  }
  .map-layer-toolbar.layers-open > button > span:nth-child(2) { display: inline; }
  .map-layer-toolbar > .unmappable-toggle { order: 9; min-height: 30px; padding: 2px 8px; font-size: 11px; }
  .map-stage:not(.layers-open) .map-mode-control { display: none; }
  /* 6. Fußzeile weg, Hinweis im Menü und bei der Kartenquelle */
  .app { grid-template-rows: auto 34px auto minmax(0, 1fr) 0; }
  .app > footer { display: none; }
  .topbar-menu.open .topbar-menu-note { display: block; margin: 2px 0 0; color: #8fa0ab; font-size: 11px; }
  .leaflet-control-attribution::before { content: "Not for operational use · "; color: #b00000; font-weight: 700; }
}
@media (pointer: coarse) and (max-width: 1366px) {
  .touch-plan-sheet { bottom: 0; }
}

/* ===== Touch: Runde 4 ===== */
@media (pointer: coarse) and (max-width: 1366px) {
  /* 1. Routen-Menü schlank, Tipp daneben schließt */
  .touch-plan-backdrop { position: fixed; inset: 0; z-index: 1350; background: transparent; }
  .touch-plan-popover.touch-routes-menu {
    top: auto; left: auto; right: 8px; padding: 5px; gap: 5px; flex-wrap: nowrap;
    border-radius: 8px; transform: translateY(-2px);
  }
  .touch-routes-menu button { height: 34px; min-height: 34px; padding: 0 12px; font-size: 13px; }
  /* 3. Routenzeile abgesetzt */
  .touch-plan-route {
    padding: 4px; border: 1px solid #2f4452; border-radius: 21px; background: #0b1318;
  }
  .touch-route-add input { border-color: transparent; background: transparent; }
  /* 4. Text in allen Touch-Knöpfen mittig */
  .touch-plan-params button, .touch-plan-tabs button, .touch-plan-collapse, .touch-route-chip,
  .touch-routes-menu button, .layers-toggle, .topbar-menu-toggle, .touch-plan-sheet-head button,
  .map-layer-toolbar > button {
    display: inline-flex; align-items: center; justify-content: center; line-height: 1;
  }
  .touch-plan-params button { gap: 6px; }
  .touch-plan-params button small { line-height: 1; }
  .map-layer-toolbar.layers-open > button:not(.layers-toggle) { justify-content: flex-start; }
  /* 5. „Nicht kartierbar“ nur im Kartenmodus */
  .map-wrapper:has(.mode-panel) .unmappable-toggle { display: none; }
  /* 6. Feld nach Antippen eines Abzeichens hervorheben */
  .touch-field-highlight { outline: 2px solid #ffd27a; outline-offset: 2px; transition: outline-color 0.3s; }
}
@media (pointer: coarse) and (max-width: 1366px) {
  .touch-plan-popover.touch-routes-menu { top: 46px; transform: none; }
  .touch-field-highlight, .route-unit-field input.touch-field-highlight, .route-unit-field select.touch-field-highlight {
    outline: 2px solid #ffd27a !important; outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(255, 210, 122, 0.35) !important;
  }
}

/* ===== Touch: Runde 5 – Routenzeile und Verschieben ===== */
@media (pointer: coarse) and (max-width: 1366px) {
  .touch-plan-route { min-height: 51px; padding: 0 8px; align-items: center; align-content: center; box-sizing: border-box; }
  .touch-route-chip {
    position: relative; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
    transition: transform 0.12s, box-shadow 0.12s, opacity 0.12s;
  }
  .touch-route-chip.is-dragged { transform: scale(1.08); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5); opacity: 0.85; z-index: 2; }
  .touch-plan-route.dragging .touch-route-chip:not(.is-dragged) { opacity: 0.75; }
  .touch-route-chip.drop-before::before, .touch-plan-route.drop-end .touch-route-add::before {
    content: ""; position: absolute; top: 3px; bottom: 3px; left: -5px; width: 3px; border-radius: 2px; background: #ffd27a;
  }
  .touch-route-add { position: relative; }
  .touch-route-chip.insert-after { box-shadow: 0 0 0 2px #ffd27a; }
}
@media (pointer: coarse) and (max-width: 1366px) {
  .touch-plan-route.dragging .touch-route-chip { transition: transform 0.15s ease; opacity: 1; }
  .touch-plan-route.dragging .touch-route-chip.is-dragged { transition: none; z-index: 3; opacity: 0.92; }
  .touch-route-chip.is-dragged { transform: none; }
}

/* ===== Routenpunkt-Menü in der Karte (Desktop und Touch) ===== */
.route-point-map-menu { display: grid; gap: 4px; min-width: 190px; font-size: 12px; }
.route-point-map-menu header { display: flex; align-items: baseline; gap: 8px; padding-right: 14px; }
.route-point-map-menu header small { color: #8fa2ae; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; }
.route-point-map-menu header strong { color: #eef5f7; font-size: 13px; }
.route-point-map-detail { color: #aab7bf; font-size: 11px; }
.route-point-map-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.route-point-map-actions button {
  min-height: 28px; padding: 0 10px; border: 1px solid #526471; border-radius: 6px;
  background: #1a2730; color: #eef4f7; font-size: 12px; font-weight: 700; cursor: pointer;
}
.route-point-map-actions button:hover { border-color: #168cff; }
.route-point-map-actions button.danger { border-color: #7a3a3a; color: #ffb3b3; }

/* Touch: Route im Blatt „Flug bearbeiten“ speichern */
.touch-route-save {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 10px;
  border: 1px solid #2f4452; border-radius: 8px; background: #111c23;
}
.touch-route-save label { display: flex; flex: 1 1 200px; align-items: center; gap: 8px; min-width: 0; }
.touch-route-save label span {
  color: #8fa2ae; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.touch-route-save input {
  flex: 1; min-width: 0; height: 34px; padding: 0 10px; border: 1px solid #405563; border-radius: 6px;
  background: #0b1318; color: #eef4f7; font-size: 14px; font-weight: 700;
}
.touch-route-save button {
  height: 34px; padding: 0 14px; border: 1px solid #31b7c6; border-radius: 6px;
  background: #1f6f8b; color: #eef4f7; font-size: 13px; font-weight: 700; cursor: pointer;
}
.touch-route-save button:disabled { border-color: #405563; background: #1a2730; color: #7f909b; cursor: default; }
.touch-route-save .auth-error { flex-basis: 100%; margin: 0; }
/* ROUTEN-Menü: Knöpfe in einer Reihe, Speichern-Feld darunter */
.touch-routes-actions { display: flex; gap: 5px; flex-wrap: nowrap; }
.touch-routes-actions button.active { border-color: #31b7c6; background: #1f6f8b; color: #fff; }
.touch-plan-popover.touch-routes-menu.with-save { flex-direction: column; align-items: stretch; width: min(460px, calc(100vw - 24px)); }
.touch-routes-menu .touch-route-save { margin: 0; }
.touch-routes-menu .touch-route-save input { font-size: 16px; }

@media (pointer: coarse) and (max-width: 1366px) {
  /* Langes Drücken auf der Routenlinie: kein Text-/Bildmenü von iOS */
  .leaflet-container { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  .leaflet-container input { -webkit-user-select: text; user-select: text; }
  .route-point-map-actions button { min-height: 34px; font-size: 13px; }
  .touch-chip-menu .route-point-name-button { flex-basis: 100%; text-align: left; font-size: 14px; }
  .touch-chip-menu .route-point-name-edit { flex-basis: 100%; }
}

/* Menüs in der Karte: Abschnitte „Route“ und „Wegpunkt“ */
.map-context-section { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid #2c3a45; }
.map-context-section h4 {
  margin: 0; color: #8fa2ae; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.map-context-section .map-context-save { padding-top: 0; border-top: 0; }
.map-context-expand {
  padding: 6px 10px; border: 1px solid #6b55a8; border-radius: 6px; background: #241b3a;
  color: #efe6ff; font-size: 12px; font-weight: 700; text-align: left; cursor: pointer;
}
.map-context-expand:hover { border-color: #9b84e0; }
.route-point-map-menu .map-context-coordinates { margin-bottom: 2px; }
.route-point-map-menu .route-point-map-actions { margin-top: 0; }
.route-point-map-menu { gap: 6px; }
@media (pointer: coarse) and (max-width: 1366px) {
  .map-context-expand { min-height: 34px; font-size: 13px; }
}

/* ===== Reiter KARTE: Filterleiste im Stil der Flugplanung, Kartenknöpfe ===== */
.filter-controls .filterbar,
.filter-controls .categorybar {
  min-height: 0; gap: 6px; padding: 6px 12px; row-gap: 6px; background: #151e26;
}
.filter-controls .categorybar { padding-top: 0; border-bottom: 1px solid #2b3540; }
.filter-controls .filterbar { border-bottom: 0; }
.filter-controls .filter-label {
  min-width: 0; margin-right: 2px; color: #8fa0ab; font-size: 10px; letter-spacing: 0.06em;
}
.filter-controls .filterbar button,
.filter-controls .categorybar button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; min-height: 34px; box-sizing: border-box; padding: 0 12px;
  border: 1px solid #33424d; border-radius: 6px; background: #1c2832; color: #eef4f7;
  font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap;
}
.filter-controls .filterbar button.active,
.filter-controls .categorybar button.active { border-color: #31b7c6; background: #1f3a46; color: #fff; }
.filter-controls .categorybar button:not(.active) { opacity: 0.55; }
.filter-controls .category-count {
  margin-left: 0; padding: 1px 6px; border-radius: 9px; background: rgba(255, 255, 255, 0.1);
  color: #aab7bf; font-size: 10.5px; font-weight: 700;
}
.filter-controls .notam-search { flex: 0 1 260px; min-width: 170px; margin-left: 4px; }
.filter-controls .notam-search input {
  height: 34px; box-sizing: border-box; padding: 0 30px 0 14px; border: 1px solid #33424d;
  border-radius: 6px; background: #0b1318; font-size: 13px;
}
.filter-controls .notam-search .search-clear-button {
  height: 26px; min-height: 26px; padding: 0 8px; border: 0; background: transparent;
}
.filter-controls .filterbar-altitude { gap: 6px; margin-left: 4px; padding-left: 10px; }
.filter-controls .altitude-input-group { gap: 6px; font-size: 12px; }
.filter-controls .altitude-input-group label { gap: 5px; }
.filter-controls .altitude-input-group input {
  width: 74px; height: 34px; box-sizing: border-box; padding: 0 10px; border: 1px solid #33424d;
  border-radius: 6px; background: #0b1318; font-size: 13px; font-weight: 700; text-align: right;
}
.filter-controls .filterbar .altitude-reset-button { padding: 0 10px; font-size: 12px; }
.filter-controls .filterbar .altitude-reset-button:disabled { opacity: 0.45; cursor: default; }
.filter-controls .filter-count { margin-left: auto; color: #8fa0ab; font-size: 11.5px; }

/* Kartenknöpfe unten rechts: Filter, NOTAMs, Zurücksetzen */
.map-filter-tools {
  position: absolute; z-index: 1045; right: 260px; bottom: 28px;
  display: flex; flex-direction: column; gap: 6px;
}
.map-tool-button {
  position: relative; display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 8px; background: rgba(17, 24, 32, 0.92);
  color: #eef4f7; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.map-tool-button:hover:not(:disabled) { border-color: #31b7c6; }
.map-tool-button.active { border-color: #31b7c6; background: #1f6f8b; }
.map-tool-button:disabled { opacity: 0.4; cursor: default; }
.map-tool-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.map-tool-button svg .map-tool-cross { stroke: #ff8a8a; stroke-width: 2.2; stroke-linecap: round; }
.map-tool-dot {
  position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%;
  background: #ffd27a; box-shadow: 0 0 0 2px rgba(17, 24, 32, 0.92);
}
.map-tool-notam-shape {
  display: grid; place-items: center; width: 17px; height: 17px; border: 2px solid #f8fafb; border-radius: 3px;
  background: #d7191c; color: #fff; font-size: 10px; font-weight: 900; line-height: 1;
}
.map-tool-notams.off .map-tool-notam-shape { opacity: 0.55; }
.map-tool-notams.off::after {
  content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2.5px; border-radius: 2px;
  background: #ff6b6b; transform: rotate(-45deg); box-shadow: 0 0 0 1.5px rgba(17, 24, 32, 0.92);
}
.map-search-indicator {
  position: absolute; z-index: 1045; top: 12px; left: 56px; display: inline-flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 12px; border: 1px solid #31b7c6; border-radius: 6px; background: rgba(17, 24, 32, 0.92);
  color: #eef4f7; font-size: 12px; font-weight: 700; cursor: pointer;
}
@media (pointer: coarse) and (max-width: 1366px) {
  .map-filter-tools { right: 8px; bottom: 26px; }
  .map-stage.layers-open .map-filter-tools { display: none; }
  .filter-controls .filterbar-altitude { margin-left: 0; padding-left: 0; border-left: 0; }
}

/* Filterleiste: Beschriftungen links in einer Spalte, Inhalt rechts bündig */
#notam-filter-controls {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 12px; row-gap: 6px;
  padding: 7px 12px; border-bottom: 1px solid #2b3540; background: #151e26;
}
.filter-controls .filterbar,
.filter-controls .categorybar,
.filter-controls .filterbar-altitude { display: contents; }
.filter-controls .filter-label { align-self: start; margin: 0; line-height: 34px; }
.filter-row-items { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.filter-controls .notam-search { margin-left: 0; }
.filter-controls .category-count { border-radius: 4px; }
.filter-controls .altitude-description-error { flex-basis: 100%; }
.filter-controls .categorybar.notams-hidden .filter-row-items { opacity: 0.6; }

/* Flugplanung: Abzeichen und Knöpfe eckig, Routen-Chips bleiben rund */
.touch-plan-params button,
.touch-plan-tabs button,
.touch-plan-collapse,
.touch-plan-popover button { border-radius: 6px; }
.touch-plan-route { border-radius: 8px; }

/* Filterleiste: grau statt grün; Kategorien in gleich breiten Spalten; Suche rechtsbündig */
.filter-controls .filterbar button,
.filter-controls .categorybar button {
  border-color: transparent; background: #1c2630; color: #aab7bf; font-weight: 500;
}
.filter-controls .filterbar button.active,
.filter-controls .categorybar button.active {
  border-color: #7a8895; background: #3b4753; color: #fff; font-weight: 700;
}
.filter-controls .filterbar button:hover:not(:disabled),
.filter-controls .categorybar button:hover { border-color: #61707e; color: #fff; }
.filter-controls .categorybar .filter-row-items {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--category-column, 150px), 1fr)); gap: 6px;
}
.filter-controls .categorybar .filter-row-items button { justify-content: space-between; min-width: 0; padding: 0 10px; }
.filter-controls .category-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-controls .category-placeholder { grid-column: 1 / -1; }
.filter-controls .notam-search { order: 2; margin-left: auto; }
.filter-controls .notam-search-count { order: 3; }
.filter-controls .filter-count { order: 4; margin-left: 4px; }
@media (pointer: coarse) and (max-width: 1366px) {
  .filter-controls .categorybar .filter-row-items button { gap: 4px; padding: 0 6px; font-size: 12px; }
  .filter-controls .categorybar .category-count { padding: 1px 4px; font-size: 10px; }
}
@media (pointer: coarse) and (max-width: 1366px) {
  #notam-filter-controls { padding: 7px 10px; column-gap: 8px; }
  .filter-controls .categorybar .filter-row-items { gap: 5px; }
}

/* CTR-Legende nie über die ganze Breite: rechts bleibt Platz für die Filterknöpfe */
@media (max-width: 900px) {
  .map-stage .ctr-legend { right: auto; left: 8px; width: min(285px, calc(100% - 64px)); box-sizing: border-box; }
  .map-filter-tools { right: 216px; bottom: 26px; }
}
@media (pointer: coarse) and (max-width: 1366px) {
  .map-filter-tools { right: 8px; }
}

/* Login: Angemeldet bleiben */
.auth-card label.auth-remember { display: flex; align-items: center; gap: 8px; color: #b7c0c8; font-size: 13px; cursor: pointer; }
.auth-card label.auth-remember input { width: 18px; height: 18px; margin: 0; }

/* ===== Moving Map ===== */
.map-tool-gps svg circle { fill: none; }
.map-tool-gps svg .map-tool-gps-dot { fill: currentColor; stroke: none; }
.map-tool-gps.on { border-color: #31b7c6; color: #7fe3ef; }
.gps-own-icon { background: transparent; border: 0; }
.gps-own-aircraft { width: 40px; height: 40px; transform-origin: 50% 50%; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); }
.gps-own-aircraft path { fill: #d633ff; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.gps-own-dot {
  display: block; width: 16px; height: 16px; margin: 12px; border: 3px solid #fff; border-radius: 50%;
  background: #d633ff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.gps-data-bar {
  position: absolute; z-index: 1046; left: 14px; bottom: 52px;
  display: flex; align-items: center; gap: 14px; max-width: calc(100% - 320px); padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 8px; background: rgba(17, 24, 32, 0.92);
  color: #eef4f7; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); pointer-events: none;
}
.gps-data-bar span { display: inline-flex; align-items: baseline; gap: 5px; }
.gps-data-bar small { color: #8fa0ab; font-size: 10px; letter-spacing: 0.06em; }
.gps-data-bar em { color: #8fa0ab; font-size: 9.5px; font-style: normal; font-weight: 700; }
.gps-data-bar .gps-data-next { color: #e9b6ff; }
.gps-data-bar.stale span:not(.gps-data-error) { opacity: 0.45; }
.gps-data-error { color: #ffb3b3; font-size: 12.5px; }
@media (pointer: coarse) and (max-width: 1366px) {
  .gps-data-bar { left: 8px; bottom: 48px; font-size: 13px; gap: 12px; max-width: calc(100% - 66px); }
}
@media (max-width: 900px) {
  .gps-data-bar { max-width: calc(100% - 276px); flex-wrap: wrap; white-space: normal; row-gap: 2px; }
}
@media (pointer: coarse) and (max-width: 1366px) {
  .gps-data-bar { max-width: calc(100% - 66px); }
}
.gps-data-bar { flex-wrap: wrap; row-gap: 2px; white-space: normal; }
.gps-data-bar span { white-space: nowrap; }

/* ===== KARTE und FLUGPLANUNG zusammengelegt (Reiter MAP) ===== */
.route-panel-heading-actions { display: flex; align-items: center; gap: 6px; }
.route-panel-collapse { min-width: 34px; padding: 0 10px; font-size: 16px; line-height: 1; }
.plan-expand-handle {
  position: absolute; z-index: 1046; top: 12px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 330px); height: 34px; padding: 0 14px;
  overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 8px; background: rgba(17, 24, 32, 0.92);
  color: #eef4f7; font-size: 13px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.plan-expand-handle:hover { border-color: #31b7c6; }
.plan-expand-handle span { color: #7fe3ef; font-size: 11px; }
@media (pointer: coarse) and (max-width: 1366px) {
  /* Filterleiste legt sich über Planung und Karte, statt sie nach unten zu schieben */
  .filter-controls {
    grid-area: workspace; align-self: start; position: relative; z-index: 1300;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  }
  .plan-expand-handle { max-width: calc(100% - 200px); }
  /* "Nicht kartierbar" gehört jetzt wieder zur Karte */
  .map-wrapper:has(.mode-panel) .unmappable-toggle { display: inline-flex; }
}
/* Griff neben dem Zoom (oben links), nie unter der Ebenen-Leiste; Suchhinweis darunter */
.plan-expand-handle { left: 56px; transform: none; max-width: min(420px, calc(100% - 120px)); }
.map-stage:has(.plan-expand-handle) .map-search-indicator { top: 54px; }
@media (pointer: coarse) and (max-width: 1366px) {
  .plan-expand-handle { left: 50px; max-width: calc(100% - 190px); }
}
@media (pointer: coarse) and (max-width: 1366px) {
  .filter-controls { z-index: 1320; }
}

/* ===== Kartenaufteilung: links Ansicht (Ebenen, Zoom), rechts Werkzeuge (Route, Position, Filter) ===== */
/* Routen-Griff oben rechts, Pfeil rechts */
.plan-expand-handle { left: auto; right: 14px; max-width: min(420px, calc(100% - 120px)); }
/* Ebenen-Leiste und ihre Fenster oben links */
.map-layer-toolbar { left: 14px; right: auto; justify-content: flex-start; max-width: calc(100% - 330px); }
.map-stage .landing-sites-panel,
.map-stage .weather-panel,
.map-stage .saved-waypoints-panel { left: 14px; right: auto; }
.map-layer-toolbar > .unmappable-toggle { margin-left: 0; }
/* Suchhinweis oben rechts unter dem Routen-Griff */
.map-search-indicator { left: auto; right: 14px; top: 12px; }
.map-stage:has(.plan-expand-handle) .map-search-indicator { top: 54px; }
/* Zoom unten links über dem Maßstab; CTR-Legende und GPS-Zeile daneben */
.map-stage .ctr-legend { left: 56px; bottom: 28px; }
.gps-data-bar { left: 56px; bottom: 28px; max-width: calc(100% - 380px); }
.map-stage:has(.gps-data-bar) .ctr-legend { bottom: 92px; }
/* Hinweis "Filter zurückgesetzt" neben den Werkzeugen */
.map-tool-notice {
  position: absolute; z-index: 1047; right: 60px; bottom: 74px; padding: 6px 12px;
  border: 1px solid #31b7c6; border-radius: 8px; background: rgba(17, 24, 32, 0.95);
  color: #eef4f7; font-size: 13px; font-weight: 700; pointer-events: none;
}
.map-filter-tools ~ .map-tool-notice { right: 270px; }
/* Filterknopf: Ring füllt sich in 2 s */
.map-tool-hold-ring { position: absolute; inset: -1px; width: 34px; height: 34px; pointer-events: none; }
.map-tool-button .map-tool-hold-ring rect {
  fill: none; stroke: #ffd27a; stroke-width: 3; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0;
}
.map-tool-filter.holding .map-tool-hold-ring rect { opacity: 1; animation: map-tool-hold 2s linear forwards; }
@keyframes map-tool-hold { to { stroke-dashoffset: 0; } }
.map-tool-filter { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* "Alle zurücksetzen" in der Filterleiste (Zeile HÖHE, rechts) */
.filter-controls .filter-row-items .filter-reset-all-link {
  margin-left: auto; height: 34px; padding: 0 10px; border: 0; background: transparent;
  color: #8fd7e1; font-size: 12.5px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
}
.filter-controls .filter-row-items .filter-reset-all-link:disabled { color: #5f6f7a; text-decoration: none; cursor: default; }

@media (max-width: 900px) {
  .map-stage .landing-sites-panel,
  .map-stage .weather-panel,
  .map-stage .saved-waypoints-panel { left: 8px; right: 8px; }
  .map-stage .ctr-legend { left: 52px; bottom: 26px; width: min(285px, calc(100% - 110px)); }
  .gps-data-bar { left: 52px; bottom: 26px; max-width: calc(100% - 290px); }
  .map-tool-notice { right: 226px; }
}
@media (pointer: coarse) and (max-width: 1366px) {
  .plan-expand-handle { right: 8px; top: 8px; max-width: calc(100% - 170px); }
  .map-layer-toolbar { left: 8px; top: 8px; right: auto; align-items: flex-start; max-width: calc(100% - 16px); }
  /* Ebenen so hoch wie der Routen-Griff */
  .layers-toggle { height: 34px; }
  .map-search-indicator { right: 8px; top: 50px; }
  .map-stage .ctr-legend { left: 50px; bottom: 26px; width: min(285px, calc(100% - 104px)); }
  .gps-data-bar { left: 50px; bottom: 26px; max-width: calc(100% - 104px); }
  .map-stage:has(.gps-data-bar) .ctr-legend { bottom: 90px; }
  .map-tool-notice, .map-filter-tools ~ .map-tool-notice { right: 52px; bottom: 70px; }
  .map-stage.layers-open .map-mode-control { left: auto; right: 8px; }
}
@media (pointer: coarse) and (max-width: 1366px) {
  .layers-toggle { box-sizing: border-box; height: 34px; min-height: 34px; }
}
@media (pointer: coarse) and (max-width: 1366px) {
  .map-layer-toolbar > button.layers-toggle { min-height: 34px; height: 34px; box-sizing: border-box; }
}

/* ===== Ebenen: Reihenfolge, 30 px, gleiche Breite; Routenbalken 30 px ===== */
.map-layer-toolbar > .layers-toggle { order: 0; }
.map-layer-toolbar > .weather-toggle { order: 1; }
.map-layer-toolbar > .saved-waypoints-toggle { order: 2; }
.map-layer-toolbar > .landing-sites-toggle { order: 3; }
.map-layer-toolbar > .ctr-toggle:not(.nlfs-toggle) { order: 4; }
.map-layer-toolbar > .nlfs-toggle { order: 5; }
.map-layer-toolbar > .unmappable-toggle { order: 6; }
.plan-expand-handle { height: 30px; box-sizing: border-box; }

/* Desktop: eine Reihe gleich breiter Knöpfe (so breit wie der breiteste) */
.map-layer-toolbar {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: stretch; gap: 6px;
}
.map-layer-toolbar > button:not(.layers-toggle) {
  height: 30px; min-height: 30px; box-sizing: border-box; padding-top: 0; padding-bottom: 0;
  justify-content: flex-start; white-space: nowrap; margin: 0;
}
.map-layer-toolbar > .unmappable-toggle { justify-content: space-between; }

@media (pointer: coarse) and (max-width: 1366px) {
  /* Tablet: Liste untereinander, alle so breit wie der längste Eintrag */
  .map-layer-toolbar {
    display: inline-grid; grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: max-content;
    justify-items: stretch; align-items: stretch; gap: 5px;
  }
  .map-layer-toolbar > button.layers-toggle { justify-self: start; height: 30px; min-height: 30px; }
  .map-layer-toolbar.layers-open > button:not(.layers-toggle) {
    display: flex; width: auto; height: 30px; min-height: 30px; padding: 0 10px; font-size: 12.5px; gap: 8px;
  }
  /* "Nicht kartierbar" nur in der aufgeklappten Liste */
  .map-wrapper:has(.mode-panel) .map-layer-toolbar:not(.layers-open) > .unmappable-toggle,
  .map-layer-toolbar:not(.layers-open) > .unmappable-toggle { display: none; }
  .map-layer-toolbar.layers-open > .unmappable-toggle { font-size: 12.5px; }
  .plan-expand-handle { height: 30px; font-size: 12.5px; }
}
/* Zahlen und Hinweise in den Ebenen-Knöpfen rechtsbündig */
.map-layer-toolbar > button:not(.layers-toggle) > strong,
.map-layer-toolbar > button:not(.layers-toggle) > .nlfs-warning,
.map-layer-toolbar > button:not(.layers-toggle) > span:last-child:not(:first-child):not(:nth-child(2)) { margin-left: auto; }
.map-stage .map-layer-toolbar > button.saved-waypoints-toggle > strong,
.map-stage .map-layer-toolbar > button.unmappable-toggle > strong { margin-left: auto; }

/* Kopfzeile darf die Seite nicht verbreitern (zwei Warnhinweise auf dem iPad hochkant) */
.app { grid-template-columns: minmax(0, 1fr); }
.topbar { min-width: 0; }
.topbar-actions { min-width: 0; }
.topbar .mil-aip-expired-warning { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Verwaltung: Reiter umbrechen statt die Seite zu verbreitern */
.admin-tabs { flex-wrap: wrap; }
/* Debug-Schalter */
.admin-debug-switch { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid #405262; border-radius: 8px; cursor: pointer; }
.admin-debug-switch input { appearance: auto; -webkit-appearance: checkbox; width: 22px; height: 22px; margin: 2px 0 0; flex: 0 0 auto; accent-color: #2bb3d6; }
.admin-debug-switch span { display: grid; gap: 4px; }
.admin-debug-switch small { color: #b6c5d0; font-size: 13px; line-height: 1.4; }

/* ===== Übernahmen aus dem neuen Layout ins bisherige ===== */
/* Kartenknöpfe als ein Block mit Trennlinien */
.map-filter-tools {
  gap: 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 8px;
  background: rgba(17, 24, 32, 0.92); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.map-filter-tools .map-tool-button {
  border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); border-radius: 0; background: transparent; box-shadow: none;
}
.map-filter-tools .map-tool-button:last-child { border-bottom: 0; }
.map-filter-tools .map-tool-button.active { background: #1f6f8b; }
.map-filter-tools .map-tool-button.on { background: rgba(31, 111, 139, 0.35); }
.map-filter-tools .map-tool-hold-ring { inset: 0; }
/* Zoom dunkel wie die übrigen Kartenknöpfe */
.leaflet-bar { border: 1px solid rgba(255, 255, 255, 0.24) !important; border-radius: 8px !important; overflow: hidden; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important; }
.leaflet-bar a, .leaflet-bar a:hover { background: rgba(17, 24, 32, 0.92); color: #eef4f7; border-bottom-color: rgba(255, 255, 255, 0.14); }
.leaflet-bar a:hover { background: #1f2c36; }
.leaflet-bar a.leaflet-disabled { background: rgba(17, 24, 32, 0.92); color: #5f6f7a; }
/* Abzeichen MUSTER … ROUTEN: gleich breit über die Breite des Routenfelds */
.touch-plan-params { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; overflow: visible; }
.touch-plan-params button { min-width: 0; justify-content: flex-start; }
.touch-param-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Ebenen enger */
.map-layer-toolbar { gap: 4px; }
@media (pointer: coarse) and (max-width: 1366px) {
  .map-layer-toolbar { gap: 3px; }
  .touch-plan-params { display: grid; overflow: visible; }
  .touch-plan-params button { flex: initial; padding: 0 8px; gap: 5px; }
}
/* Routen-Chips in Petrol; Zwischenpunkte etwas gedeckter */
.touch-route-chip { background: #14505a; border-color: #2a8a97; }
.touch-route-chip.dep, .touch-route-chip.dest { background: #12808d; border-color: #2fc4d4; }

/* Hochkant: Beschriftung über dem Wert, damit die gleich breiten Felder reichen */
@media (pointer: coarse) and (max-width: 1366px) and (orientation: portrait) {
  .touch-plan-params button {
    flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
    height: 40px; min-height: 40px; padding: 0 8px;
  }
  .touch-plan-params button small { font-size: 9px; line-height: 1; }
  .touch-param-value { font-size: 13px; line-height: 1.1; max-width: 100%; }
}

/* ===== Verkehr (ADS-B) ===== */
.map-layer-toolbar > .traffic-toggle { order: 6; }
.map-layer-toolbar > .unmappable-toggle { order: 7; }
.traffic-toggle .traffic-toggle-icon { background: #ffb020; color: #1a1300; font-size: 9px; letter-spacing: 0.02em; }
.traffic-toggle strong {
  margin-left: auto; min-width: 20px; padding: 0 5px; border-radius: 9px; background: rgba(255, 255, 255, 0.12);
  font-size: 11px; text-align: center;
}
.traffic-icon { background: transparent; border: 0; }
.traffic-marker { position: relative; width: var(--traffic-size, 28px); height: var(--traffic-size, 28px); color: #ffb020; }
.traffic-marker.close { color: #ff4d4d; }
.traffic-marker svg { width: 100%; height: 100%; transform-origin: 50% 50%; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.7)); }
.traffic-marker svg path, .traffic-marker svg circle, .traffic-marker svg rect { fill: currentColor; stroke: #1a1300; stroke-width: 1.2; stroke-linejoin: round; }
.traffic-marker svg .line { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; opacity: 0.9; }
.traffic-marker svg .line.thick { stroke-width: 3; }
.traffic-marker.helicopter svg circle.line { stroke-dasharray: 3 2.4; stroke-width: 1.2; }
.traffic-marker.stale { opacity: 0.4; }
.traffic-marker.ground { color: #d9c08a; }
.traffic-marker.ground .traffic-label i { color: #e8e1cf; }
.traffic-label {
  position: absolute; left: calc(100% + 1px); top: calc(50% - 15px); display: grid; padding: 1px 5px; border-radius: 4px;
  background: rgba(17, 24, 32, 0.85); color: #fff; font-size: 10.5px; line-height: 1.25; white-space: nowrap;
}
.traffic-label b { font-weight: 800; }
.traffic-label i { font-style: normal; color: #ffd27a; }
.traffic-marker.close .traffic-label i { color: #ff9a9a; }
.traffic-panel {
  position: absolute; z-index: 1041; top: 58px; left: 14px; width: 285px; box-sizing: border-box; padding: 10px 11px;
  border: 1px solid #4d5660; border-radius: 7px; background: rgba(17, 24, 32, 0.94); color: #e8edf1;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); display: grid; gap: 8px; font-size: 12px;
}
.traffic-panel small { color: #95a0aa; font-size: 10.5px; line-height: 1.35; }
.traffic-error { margin: 0; color: #ffb3b3; }
.traffic-note { margin: 0; color: #ffd27a; }
.traffic-info { margin: 0; color: #b7c2ca; }
.traffic-filter { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; color: #b7c2ca; }
.traffic-filter button {
  height: 26px; padding: 0 8px; border: 1px solid #405563; border-radius: 5px; background: #1c2832; color: #eef4f7; font-weight: 700; cursor: pointer;
}
.traffic-filter button.active { border-color: #31b7c6; background: #1f6f8b; }
.traffic-own { display: grid; gap: 4px; color: #b7c2ca; }
.traffic-own input { height: 28px; padding: 0 8px; border: 1px solid #405563; border-radius: 5px; background: #0b1318; color: #eef4f7; text-transform: lowercase; }
@media (pointer: coarse) and (max-width: 1366px) {
  .traffic-panel { top: 50px; left: 8px; width: min(285px, calc(100% - 66px)); }
  .map-stage.layers-open .traffic-panel { display: none; }
  .traffic-filter button { height: 30px; min-width: 46px; padding: 0 6px; }
  .traffic-panel { width: min(300px, calc(100% - 66px)); }
  .traffic-own input { height: 32px; font-size: 14px; }
}
@media (max-width: 900px) {
  .traffic-panel { left: 8px; }
}

/* ===== Debug-Darstellung "graphit" (Verwaltung → Debug): Raster-Layout im Graphit-Look =====
   Greift nur bei <html data-ui-theme="graphit">; ohne Schalter bleibt alles wie bisher.
   Schrift Inter (SIL OFL 1.1, Lizenz: assets/fonts/OFL-Inter.txt), selbst gehostet. */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonts/inter-latin-var.woff2') format('woff2');
}
html[data-ui-theme="graphit"] { --bg0: #0f1720; --bg1: #142029; --cell: #1a2834; --line: #2b3a48; --txt: #e9eef2; --dim: #8b9cab; --acc: #3fd0e0; }
html[data-ui-theme="graphit"] body,
html[data-ui-theme="graphit"] .app { background: var(--bg0) !important; font-family: 'Inter', 'DejaVu Sans', sans-serif !important; }
html[data-ui-theme="graphit"] .app * { font-family: inherit; }
html[data-ui-theme="graphit"] .topbar { background: var(--bg0) !important; border-bottom: 1px solid var(--line) !important; }
html[data-ui-theme="graphit"] .topbar h1 { font-weight: 800 !important; letter-spacing: 0.1em !important; font-size: 16px !important; }
html[data-ui-theme="graphit"] .main-mode-nav { background: var(--bg1) !important; border-bottom: 1px solid var(--line) !important; display: grid !important; grid-template-columns: 1fr 1fr; }
html[data-ui-theme="graphit"] .main-mode-nav button { border-right: 1px solid var(--line) !important; color: var(--dim) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.18em !important; }
html[data-ui-theme="graphit"] .main-mode-nav button.active { background: var(--cell) !important; color: var(--txt) !important; box-shadow: inset 0 -2px 0 var(--acc); }
html[data-ui-theme="graphit"] .main-mode-nav button.active::after,
html[data-ui-theme="graphit"] .main-mode-nav button.active::before { display: none !important; }
html[data-ui-theme="graphit"] .mode-panel.touch-plan { background: var(--bg1) !important; border-bottom: 1px solid var(--line) !important; padding: 0 !important; gap: 0 !important; }
html[data-ui-theme="graphit"] .touch-plan-params { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 !important; border-bottom: 1px solid var(--line); }
html[data-ui-theme="graphit"] .touch-plan-params button { border: 0 !important; border-right: 1px solid var(--line) !important; border-radius: 0 !important; background: transparent !important;
  flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; height: 46px !important; padding: 0 10px !important; gap: 2px !important; color: var(--txt) !important; font-size: 13.5px !important; overflow: hidden; }
html[data-ui-theme="graphit"] .touch-plan-params button small { color: var(--dim) !important; font-size: 9.5px !important; letter-spacing: 0.14em !important; }
html[data-ui-theme="graphit"] .touch-plan-route { border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; background: var(--bg0) !important; padding: 6px 10px !important; }
/* Chips wie im klassischen Layout: Petrol gefüllt, VIA dunkler. */
html[data-ui-theme="graphit"] .touch-route-chip { border-radius: 17px !important; background: #14505a !important; border: 1px solid #2a8a97 !important; color: #fff !important; font-weight: 700 !important; }
html[data-ui-theme="graphit"] .touch-route-chip.dep,
html[data-ui-theme="graphit"] .touch-route-chip.dest { background: #12808d !important; border-color: #2fc4d4 !important; }
html[data-ui-theme="graphit"] .touch-plan-footer { padding: 0 !important; gap: 0 !important; }
html[data-ui-theme="graphit"] .touch-plan-summary { display: grid !important; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); flex: 1; gap: 0 !important; padding: 0 !important; }
html[data-ui-theme="graphit"] .touch-plan-summary span { flex-direction: column !important; align-items: flex-start !important; gap: 1px !important; padding: 6px 10px !important; border-right: 1px solid var(--line); font-size: 14px !important; color: var(--txt) !important; }
html[data-ui-theme="graphit"] .touch-plan-summary small { color: var(--dim) !important; letter-spacing: 0.14em !important; font-size: 9px !important; }
html[data-ui-theme="graphit"] .touch-plan-tabs { gap: 0 !important; }
html[data-ui-theme="graphit"] .touch-plan-tabs button,
html[data-ui-theme="graphit"] .touch-plan-collapse { height: 46px !important; min-height: 46px !important; border: 0 !important; border-left: 1px solid var(--line) !important; border-radius: 0 !important; background: transparent !important; color: var(--txt) !important; padding: 0 14px !important; }
html[data-ui-theme="graphit"] .map-filter-tools { gap: 0 !important; background: var(--bg1); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }
html[data-ui-theme="graphit"] .map-tool-button { border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--txt) !important; }
html[data-ui-theme="graphit"] .map-tool-button:last-child { border-bottom: 0 !important; }
html[data-ui-theme="graphit"] .map-tool-button.active { color: var(--acc) !important; background: var(--cell) !important; }
html[data-ui-theme="graphit"] .layers-toggle,
html[data-ui-theme="graphit"] .plan-expand-handle,
html[data-ui-theme="graphit"] .gps-data-bar,
html[data-ui-theme="graphit"] .leaflet-bar a { background: var(--bg1) !important; border: 1px solid var(--line) !important; border-radius: 6px !important; color: var(--txt) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important; }
html[data-ui-theme="graphit"] .leaflet-bar { border: 0 !important; }
html[data-ui-theme="graphit"] .gps-data-bar { padding: 0 !important; gap: 0 !important; }
html[data-ui-theme="graphit"] .gps-data-bar span { padding: 6px 12px; border-right: 1px solid var(--line); }
html[data-ui-theme="graphit"] .gps-data-bar span:last-child { border-right: 0; }
html[data-ui-theme="graphit"] .gps-data-bar small { color: var(--dim) !important; }
html[data-ui-theme="graphit"] .gps-data-bar .gps-data-next { color: var(--acc) !important; }
html[data-ui-theme="graphit"] .planned-route-tooltip { background: var(--bg1) !important; color: var(--txt) !important; border: 1px solid var(--line) !important; border-radius: 4px !important; }
html[data-ui-theme="graphit"] .topbar h1 { letter-spacing: 0.14em !important; }
html[data-ui-theme="graphit"] .topbar h1::first-letter { color: var(--acc); }
html[data-ui-theme="graphit"] .touch-plan-params button,
html[data-ui-theme="graphit"] .touch-plan-summary span,
html[data-ui-theme="graphit"] .touch-route-chip,
html[data-ui-theme="graphit"] .gps-data-bar,
html[data-ui-theme="graphit"] .plan-expand-handle,
html[data-ui-theme="graphit"] .planned-route-tooltip { font-family: 'Inter', sans-serif !important; }
html[data-ui-theme="graphit"] .touch-plan-params button small,
html[data-ui-theme="graphit"] .touch-plan-summary small,
html[data-ui-theme="graphit"] .gps-data-bar small { font-family: 'Inter', sans-serif !important; }
html[data-ui-theme="graphit"] .touch-plan-tabs button,
html[data-ui-theme="graphit"] .touch-plan-collapse { font-family: 'Inter', sans-serif !important; font-weight: 600 !important; }
html[data-ui-theme="graphit"] .map-filter-tools,
html[data-ui-theme="graphit"] .layers-toggle,
html[data-ui-theme="graphit"] .plan-expand-handle,
html[data-ui-theme="graphit"] .gps-data-bar,
html[data-ui-theme="graphit"] .leaflet-bar a { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important; border-radius: 4px !important; }
html[data-ui-theme="graphit"] .map-filter-tools { border-radius: 4px !important; }
/* Route, Wegpunkte und Korridor: Farben kommen aus App.jsx (ROUTE_COLOR), keine Überschreibung hier.
   Ein erzwungener Rand auf den Korridorflächen machte die inneren Leg-Umrisse sichtbar. */
html[data-ui-theme="graphit"] .gps-own-aircraft path { fill: #111 !important; stroke: #fff !important; }
html[data-ui-theme="graphit"] #notam-filter-controls { background: var(--bg1) !important; border-bottom: 1px solid var(--line) !important; }
html[data-ui-theme="graphit"] .filter-controls .filterbar button,
html[data-ui-theme="graphit"] .filter-controls .categorybar button { background: var(--cell) !important; border: 1px solid var(--line) !important; border-radius: 4px !important; color: var(--dim) !important; }
html[data-ui-theme="graphit"] .filter-controls .filterbar button.active,
html[data-ui-theme="graphit"] .filter-controls .categorybar button.active { color: var(--txt) !important; border-color: var(--acc) !important; }
html[data-ui-theme="graphit"] .filter-controls .category-count { font-family: 'Inter', sans-serif !important; }
html[data-ui-theme="graphit"] .filter-controls .notam-search input,
html[data-ui-theme="graphit"] .filter-controls .altitude-input-group input { background: var(--bg0) !important; border: 1px solid var(--line) !important; border-radius: 4px !important; font-family: 'Inter', sans-serif !important; }
html[data-ui-theme="graphit"] .route-planner-panel { background: var(--bg1) !important; border-right: 1px solid var(--line) !important; }
html[data-ui-theme="graphit"] .route-planner-panel .mode-panel-kicker { color: var(--acc) !important; letter-spacing: 0.18em !important; }
html[data-ui-theme="graphit"] .route-planner-panel .route-section { background: var(--bg0) !important; border: 1px solid var(--line) !important; border-radius: 4px !important; }
html[data-ui-theme="graphit"] .route-planner-panel .route-section-title span { color: var(--acc) !important; letter-spacing: 0.16em !important; }
html[data-ui-theme="graphit"] .route-planner-panel .route-point-row { background: var(--cell) !important; border: 1px solid var(--line) !important; border-radius: 3px !important; }
html[data-ui-theme="graphit"] .route-planner-panel input,
html[data-ui-theme="graphit"] .route-planner-panel select { background: var(--bg0) !important; border: 1px solid var(--line) !important; border-radius: 3px !important; color: var(--txt) !important; font-family: 'Inter', sans-serif !important; }
html[data-ui-theme="graphit"] .route-planner-panel .route-unit-field { background: var(--bg0) !important; border: 1px solid var(--line) !important; border-radius: 3px !important; }
html[data-ui-theme="graphit"] .route-planner-panel .route-unit-field input { border: 0 !important; }
html[data-ui-theme="graphit"] .route-planner-panel button { border-radius: 3px !important; }
html[data-ui-theme="graphit"] .route-planner-panel .route-center-button,
html[data-ui-theme="graphit"] .route-planner-panel .route-now-button,
html[data-ui-theme="graphit"] .route-planner-panel .route-search button,
html[data-ui-theme="graphit"] .route-planner-panel .route-corridor-map-button {
  background: transparent !important; border: 1px solid var(--acc) !important; color: var(--acc) !important; }
html[data-ui-theme="graphit"] .route-planner-panel table,
html[data-ui-theme="graphit"] .route-planner-panel td,
html[data-ui-theme="graphit"] .route-planner-panel th { font-family: 'Inter', sans-serif !important; }
html[data-ui-theme="graphit"] .route-planner-panel th { color: var(--dim) !important; font-family: 'Inter', sans-serif !important; letter-spacing: 0.12em !important; }
html[data-ui-theme="graphit"] .route-planner-panel .route-message { background: var(--cell) !important; border-left: 2px solid var(--acc) !important; }
html[data-ui-theme="graphit"] .map-layer-toolbar:not(.layers-open) > button:not(.layers-toggle) { background: var(--bg1) !important; border: 1px solid var(--line) !important; border-radius: 4px !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important; color: var(--txt) !important; }
html[data-ui-theme="graphit"] .map-layer-toolbar:not(.layers-open) > button.active { box-shadow: inset 0 -2px 0 var(--acc), 0 1px 3px rgba(0, 0, 0, 0.35) !important; }
html[data-ui-theme="graphit"] .map-mode-control { background: var(--bg1) !important; border: 1px solid var(--line) !important; border-radius: 4px !important; }
html[data-ui-theme="graphit"] .topbar .auth-session-bar button,
html[data-ui-theme="graphit"] .topbar button { border-radius: 4px !important; }
html[data-ui-theme="graphit"] .app,
html[data-ui-theme="graphit"] .app * { font-variant-numeric: tabular-nums; }
html[data-ui-theme="graphit"] .touch-route-chip { font-weight: 700 !important; }

/* Ebenen getrennt wie bisher, nur enger untereinander */
html[data-ui-theme="graphit"] .map-layer-toolbar { gap: 4px !important; }
@media (pointer: coarse) and (max-width: 1366px) {
  html[data-ui-theme="graphit"] .map-layer-toolbar { gap: 3px !important; }
}
html[data-ui-theme="graphit"] .map-layer-toolbar > button:not(.layers-toggle) { background: var(--bg1) !important; border: 1px solid var(--line) !important; border-radius: 4px !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important; color: var(--txt) !important; }
html[data-ui-theme="graphit"] .map-layer-toolbar > button.active:not(.layers-toggle) { box-shadow: inset 3px 0 0 var(--acc), 0 1px 3px rgba(0, 0, 0, 0.35) !important; }

/* ETD-Abzeichen: ETD liegt mehr als 30 min zurück */
.touch-plan-params button.etd-past .touch-param-value,
html[data-ui-theme="graphit"] .touch-plan-params button.etd-past .touch-param-value { color: #ffb020 !important; }
.touch-plan-params button.etd-past,
html[data-ui-theme="graphit"] .touch-plan-params button.etd-past { box-shadow: inset 0 -2px 0 #ffb020; }

/* ===== Einheitliche Ebenen-Kürzel, NOTAM-Filter ohne Rand, Zoom/Maßstab unten ===== */
/* 1. Ebenen-Kürzel: aus = Blaugrau, an = Petrol (beide Layouts) */
.map-layer-toolbar .weather-toggle-icon,
.map-layer-toolbar .ctr-toggle-icon,
.map-layer-toolbar .landing-sites-toggle-icon,
.map-layer-toolbar .saved-waypoint-badge {
  width: 30px !important; height: 20px; border: 0 !important; border-radius: 4px !important;
  background: #2b3a48 !important; color: #9fb0bd !important; opacity: 1 !important; box-shadow: none !important;
  font-size: 9px !important; font-weight: 800 !important; letter-spacing: 0.03em !important;
}
.map-layer-toolbar > button.active .weather-toggle-icon,
.map-layer-toolbar > button.active .ctr-toggle-icon,
.map-layer-toolbar > button.active .landing-sites-toggle-icon,
.map-layer-toolbar > button.active .saved-waypoint-badge { background: #12808d !important; color: #fff !important; }
html:not([data-ui-theme="graphit"]) .map-layer-toolbar > button.active:not(.layers-toggle),
html:not([data-ui-theme="graphit"]) .map-layer-toolbar > button:not(.layers-toggle):hover {
  border-color: rgba(47, 196, 212, 0.55); background: rgba(17, 24, 32, 0.92);
}

/* 3. NOTAM-Filter: keine Umrandung, aktiv Petrol gefüllt (beide Layouts) */
html .filter-controls .filterbar .filter-row-items > button:not(.altitude-reset-button):not(.search-clear-button):not(.filter-reset-all-link),
html .filter-controls .categorybar button,
html[data-ui-theme] .filter-controls .filterbar .filter-row-items > button:not(.altitude-reset-button):not(.search-clear-button):not(.filter-reset-all-link),
html[data-ui-theme] .filter-controls .categorybar button {
  border: 0 !important; border-radius: 6px !important; background: #1f2c38 !important; color: #8fa0ab !important;
  font-weight: 600 !important; opacity: 1 !important; box-shadow: none !important;
}
html .filter-controls .filterbar .filter-row-items > button.active:not(.altitude-reset-button):not(.search-clear-button):not(.filter-reset-all-link),
html .filter-controls .categorybar button.active,
html[data-ui-theme] .filter-controls .filterbar .filter-row-items > button.active:not(.altitude-reset-button):not(.search-clear-button):not(.filter-reset-all-link),
html[data-ui-theme] .filter-controls .categorybar button.active { background: #12808d !important; color: #fff !important; font-weight: 800 !important; }
html .filter-controls .categorybar button .category-count,
html[data-ui-theme] .filter-controls .categorybar button .category-count { background: rgba(255, 255, 255, 0.08) !important; color: #8fa0ab !important; }
html .filter-controls .categorybar button.active .category-count,
html[data-ui-theme] .filter-controls .categorybar button.active .category-count { background: rgba(255, 255, 255, 0.85) !important; color: #0d4a52 !important; }
/* Zurücksetzen-Knöpfe ebenfalls ohne Rand */
html .filter-controls .altitude-reset-button,
html[data-ui-theme] .filter-controls .filterbar .altitude-reset-button { border: 0 !important; background: #1f2c38 !important; box-shadow: none !important; }
html .filter-controls .filter-reset-all-link,
html[data-ui-theme] .filter-controls .filterbar .filter-reset-all-link { border: 0 !important; background: transparent !important; box-shadow: none !important; }

/* 6. Zoom unten bündig mit dem Werkzeugblock rechts, Maßstab rechts daneben */
.map-stage .leaflet-bottom.leaflet-left {
  left: 8px; bottom: 28px; display: flex; flex-direction: row; align-items: flex-end; gap: 10px;
}
.map-stage .leaflet-bottom.leaflet-left > .leaflet-control { float: none; clear: none; margin: 0; }
.map-stage .leaflet-bottom.leaflet-left > .leaflet-control-zoom { order: 0; }
.map-stage .leaflet-bottom.leaflet-left > .nautical-scale-control { order: 1; margin-bottom: 2px; }
@media (pointer: coarse) and (max-width: 1366px), (max-width: 900px) {
  .map-stage .leaflet-bottom.leaflet-left { bottom: 26px; }
}
/* Mit GPS-Datenleiste (sitzt rechts neben dem Zoom) steht der Maßstab über dem Zoom */
.map-stage:has(.gps-data-bar) .leaflet-bottom.leaflet-left { flex-direction: column-reverse; align-items: flex-start; gap: 8px; }

/* Hinweis für Admins: automatisch erzeugte Luftfahrtkarte wartet auf „Übernehmen“ */
.mil-aip-expired-warning.ofm-pending-notice {
  color: #c9f1f5;
  background: #0f3d45;
  border-color: #12808d;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
}
.mil-aip-expired-warning.ofm-pending-notice strong { color: #ffffff; }
.mil-aip-expired-warning.ofm-pending-notice span:last-child { color: #a9dde3; }

/* ===== Layout: Reiter bündig, Ebenen-Leiste rechts, Planung links ===== */
/* 1. MAP | BRIEFING je halbe Breite, Unterstrich über den ganzen Reiter */
.main-mode-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; }
.main-mode-nav button { min-width: 0; padding: 0 8px; }
.main-mode-nav button + button { border-left: 1px solid #2b3540; }
.main-mode-nav button::after { left: 0; right: 0; border-radius: 0; }
@media (pointer: coarse) and (max-width: 1366px), (max-width: 900px) {
  .main-mode-nav { padding: 0; gap: 0; }
}

/* 2. Ebenen als senkrechte Leiste am rechten Rand (Desktop und Tablet):
      schmal nur Kürzel, mit dem Pfeil oben aufgeklappt mit Namen und Zahlen */
html body .map-stage .map-layer-toolbar {
  display: flex !important; flex-direction: column; align-items: stretch; flex-wrap: nowrap;
  top: 12px; right: 14px; left: auto; bottom: auto; width: 44px; max-width: none; gap: 0 !important;
  overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 8px;
  background: rgba(17, 24, 32, 0.92); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
html body .map-stage .map-layer-toolbar.layers-open { width: 172px; }
html body .map-stage .map-layer-toolbar > button {
  display: flex !important; align-items: center; justify-content: center; gap: 8px; width: 100%;
  height: 34px; min-height: 34px; min-width: 0; margin: 0; padding: 0 6px; box-sizing: border-box;
  border: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important; color: #dce5eb !important;
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
html body .map-stage .map-layer-toolbar > button:last-child { border-bottom: 0 !important; }
html body .map-stage .map-layer-toolbar > button:not(.layers-toggle):hover { background: #1f2c36 !important; }
html body .map-stage .map-layer-toolbar > button.active:not(.layers-toggle) { background: rgba(31, 111, 139, 0.35) !important; }
html body .map-stage .map-layer-toolbar > button.layers-toggle {
  order: 0; height: 24px; min-height: 24px; color: #8fa0ab !important; font-size: 13px; font-weight: 800;
}
/* schmal: nur das Kürzel; Namen, Zahlen und Punkte erst aufgeklappt */
html body .map-stage .map-layer-toolbar:not(.layers-open) > button > :not(:first-child):not(.nlfs-unavailable) { display: none !important; }
html body .map-stage .map-layer-toolbar.layers-open > button:not(.layers-toggle) { justify-content: flex-start; padding: 0 8px; }
html body .map-stage .map-layer-toolbar.layers-open > button:not(.layers-toggle) > span:nth-child(2) { display: inline !important; }
html body .map-stage .map-layer-toolbar.layers-open > button.layers-toggle { justify-content: flex-start; padding: 0 10px; gap: 10px; }
html body .map-stage .map-layer-toolbar.layers-open > button.layers-toggle > span:nth-child(2) { display: inline !important; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
html body .map-stage .map-layer-toolbar > button .weather-active-dot { display: none !important; }
html body .map-stage .map-layer-toolbar:not(.layers-open) > button > .nlfs-unavailable {
  position: absolute; right: 2px; top: 2px; transform: scale(0.8);
}
html body .map-stage .map-layer-toolbar > button { position: relative; inset: auto; transform: none; }
html body .map-stage .map-layer-toolbar > .weather-toggle { order: 1; }
html body .map-stage .map-layer-toolbar > .saved-waypoints-toggle { order: 2; }
html body .map-stage .map-layer-toolbar > .landing-sites-toggle { order: 3; }
html body .map-stage .map-layer-toolbar > .ctr-toggle:not(.nlfs-toggle):not(.traffic-toggle) { order: 4; }
html body .map-stage .map-layer-toolbar > .traffic-toggle { order: 5; }
html body .map-stage .map-layer-toolbar > .nlfs-toggle { order: 6; }

/* Fenster der Ebenen links neben der Leiste */
.map-stage .weather-panel,
.map-stage .landing-sites-panel,
.map-stage .saved-waypoints-panel,
.map-stage .traffic-panel { top: 12px !important; left: auto !important; right: 66px !important; }
.map-stage.layers-open .weather-panel,
.map-stage.layers-open .landing-sites-panel,
.map-stage.layers-open .saved-waypoints-panel,
.map-stage.layers-open .traffic-panel { right: 194px !important; }

/* Planung (Griff) und Suchhinweis oben links: das Planungsmenü öffnet links */
.map-stage .plan-expand-handle { left: 14px !important; right: auto !important; }
.map-stage .map-search-indicator { left: 14px; right: auto; top: 12px; }
.map-stage:has(.plan-expand-handle) .map-search-indicator { top: 50px; }

@media (pointer: coarse) and (max-width: 1366px), (max-width: 900px) {
  html body .map-stage .map-layer-toolbar { top: 8px; right: 8px; width: 48px; }
  html body .map-stage .map-layer-toolbar.layers-open { width: 176px; }
  html body .map-stage .map-layer-toolbar > button { height: 40px; min-height: 40px; }
  html body .map-stage .map-layer-toolbar > button.layers-toggle { height: 28px; min-height: 28px; }
  .map-stage .weather-panel,
  .map-stage .landing-sites-panel,
  .map-stage .saved-waypoints-panel,
  .map-stage .traffic-panel { top: 8px !important; right: 64px !important; left: 8px !important; width: auto !important; max-width: 340px; margin-left: auto; }
  .map-stage.layers-open .weather-panel,
  .map-stage.layers-open .landing-sites-panel,
  .map-stage.layers-open .saved-waypoints-panel,
  .map-stage.layers-open .traffic-panel { right: 192px !important; }
  .map-stage .plan-expand-handle { left: 8px !important; }
  .map-stage .map-search-indicator { left: 8px; top: 8px; }
}

/* 3. „Nicht kartierbar“ als Chip in der Statuszeile */
.unmappable-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 6px 0 9px; flex: 0 0 auto;
  border: 1px solid #3a4b57; border-radius: 13px; background: #17212a; color: #b7c2ca;
  font: inherit; font-size: 11px; font-weight: 700; white-space: nowrap; cursor: pointer;
}
.unmappable-chip strong {
  min-width: 18px; padding: 1px 5px; border-radius: 9px; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 11px; text-align: center;
}
.unmappable-chip:hover, .unmappable-chip.open { border-color: #31b7c6; color: #eef4f7; }

/* Tablet: ohne Route statt leerer Routenzeile ein Knopf in der Ergebniszeile */
.touch-route-start {
  height: 34px; padding: 0 14px; border: 1px dashed #2f8a97; border-radius: 17px; background: transparent;
  color: #8fd7e1; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer;
}
@media (pointer: coarse) and (max-width: 1366px) {
  .topbar .topbar-actions .unmappable-chip { order: 2; }
}

/* ===== Kartenart als Knopf im Werkzeugblock (Desktop und Tablet) ===== */
.map-stage .map-filter-tools { right: 14px; bottom: 28px; }
.map-tool-mode-badge {
  display: grid; place-items: center; width: 30px; height: 20px; border-radius: 4px;
  background: #2b3a48; color: #c9d4dc; font-size: 9px; font-weight: 800; letter-spacing: 0.03em;
}
.map-filter-tools .map-tool-button.map-tool-mapmode.active { background: transparent; }
.map-tool-mapmode.active .map-tool-mode-badge { background: #12808d; color: #fff; }
.map-tool-ruler span { font-size: 16px; line-height: 1; }
/* Gelände-Optionen links neben dem Block, nur im Geländemodus */
.map-stage .map-mode-control { right: 58px; bottom: 28px; }
.map-mode-control .ruler-control { display: flex; align-items: center; gap: 8px; }
.map-filter-tools ~ .map-tool-notice { right: 58px; bottom: 28px; }
.map-mode-control .ruler-control small { flex: 1 1 auto; }
@media (pointer: coarse) and (max-width: 1366px), (max-width: 900px) {
  .map-stage .map-filter-tools { right: 8px; bottom: 26px; }
  .map-stage .map-mode-control,
  .map-stage.layers-open .map-mode-control { right: 60px; bottom: 26px; left: auto; }
  .map-stage:not(.layers-open) .map-mode-control { display: flex; }
  .map-tool-notice, .map-filter-tools ~ .map-tool-notice { right: 60px; bottom: 26px; }
  .map-stage.layers-open .map-filter-tools { display: flex; }
  .map-filter-tools .map-tool-button { width: 44px; height: 44px; }
}

/* Satellit: Häkchen für das OFM-Luftfahrt-Overlay */
.map-mode-options .ofm-overlay-swatch {
  display: inline-grid; place-items: center; width: 26px; height: 14px; border-radius: 3px;
  background: #12808d; color: #fff; font-size: 8px; font-style: normal; font-weight: 800; letter-spacing: 0.03em;
}

/* ===== Graphit: BRIEFING-Reiter und Dialoge (Verwaltung, Flugwetterprüfung, Routen) im Raster-Look =====
   Greift nur bei <html data-ui-theme="graphit">; das bisherige Layout bleibt unverändert. */
html[data-ui-theme="graphit"] { --warn: #ffb020; --btn: #12808d; --btnline: #2fc4d4; }
/* ---------- BRIEFING-Panel ---------- */
html[data-ui-theme="graphit"] .route-briefing-panel { background: var(--bg1) !important; border-right: 1px solid var(--line) !important; font-family: 'Inter', sans-serif !important; }
html[data-ui-theme="graphit"] .route-briefing-panel .mode-panel-kicker { color: var(--acc) !important; letter-spacing: 0.18em !important; }
html[data-ui-theme="graphit"] .route-briefing-panel h2 { color: var(--txt) !important; }
html[data-ui-theme="graphit"] .briefing-panel-heading > span:last-child,
html[data-ui-theme="graphit"] .briefing-panel-heading .briefing-status { border-radius: 3px !important; background: transparent !important; border: 1px solid var(--warn) !important; color: var(--warn) !important; letter-spacing: 0.14em !important; font-size: 10px !important; }
html[data-ui-theme="graphit"] .briefing-snapshot-controls,
html[data-ui-theme="graphit"] .briefing-snapshot-meta,
html[data-ui-theme="graphit"] .briefing-route-summary,
html[data-ui-theme="graphit"] .briefing-route-weather,
html[data-ui-theme="graphit"] .briefing-unmappable-warning { background: var(--bg0) !important; border: 1px solid var(--line) !important; border-radius: 4px !important; box-shadow: none !important; }
html[data-ui-theme="graphit"] .briefing-snapshot-controls label > span { color: var(--acc) !important; letter-spacing: 0.16em !important; font-size: 10px !important; }
html[data-ui-theme="graphit"] .briefing-snapshot-controls input { background: var(--bg1) !important; border: 1px solid var(--line) !important; border-radius: 3px !important; color: var(--txt) !important; font-family: 'Inter', sans-serif !important; letter-spacing: 0.06em; }
html[data-ui-theme="graphit"] .route-briefing-panel button { border-radius: 3px !important; font-family: 'Inter', sans-serif !important; }
html[data-ui-theme="graphit"] .briefing-snapshot-controls button { background: var(--btn) !important; border: 1px solid var(--btnline) !important; color: #fff !important; }
/* Kopf der Routenübersicht wie Abschnittstitel */
html[data-ui-theme="graphit"] .briefing-route-summary > strong { color: var(--txt) !important; font-size: 17px !important; letter-spacing: 0.04em; }
html[data-ui-theme="graphit"] .briefing-route-summary > small { color: var(--dim) !important; letter-spacing: 0.06em; }
/* Werte als Raster: Zellen mit Trennlinien statt Kacheln */
html[data-ui-theme="graphit"] .briefing-route-summary > div:not(.briefing-plan-profile),
html[data-ui-theme="graphit"] .briefing-plan-profile,
html[data-ui-theme="graphit"] .briefing-relevance-summary { gap: 0 !important; border: 1px solid var(--line) !important; border-radius: 3px !important; overflow: hidden; background: var(--bg1) !important; }
html[data-ui-theme="graphit"] .briefing-route-summary > div:not(.briefing-plan-profile) > span,
html[data-ui-theme="graphit"] .briefing-plan-profile > span,
html[data-ui-theme="graphit"] .briefing-relevance-summary > span { background: transparent !important; border: 0 !important; border-right: 1px solid var(--line) !important; border-radius: 0 !important; color: var(--txt) !important; font-size: 16px !important; font-weight: 600 !important; padding: 7px 11px !important; }
html[data-ui-theme="graphit"] .briefing-route-summary > div > span:last-child,
html[data-ui-theme="graphit"] .briefing-plan-profile > span:last-child,
html[data-ui-theme="graphit"] .briefing-relevance-summary > span:last-child { border-right: 0 !important; }
html[data-ui-theme="graphit"] .briefing-route-summary > div small,
html[data-ui-theme="graphit"] .briefing-relevance-summary small { color: var(--dim) !important; letter-spacing: 0.14em !important; font-size: 9.5px !important; text-transform: uppercase; font-weight: 600 !important; }
html[data-ui-theme="graphit"] .briefing-relevance-summary strong { color: var(--txt) !important; font-size: 18px !important; }
html[data-ui-theme="graphit"] .briefing-relevance-summary > span:last-child strong { color: var(--warn) !important; }
/* Werte der Routenübersicht türkis wie bisher im Briefing */
html[data-ui-theme="graphit"] .briefing-route-summary > div:not(.briefing-plan-profile) > span,
html[data-ui-theme="graphit"] .briefing-plan-profile > span { color: var(--acc) !important; }
html[data-ui-theme="graphit"] .route-briefing-panel .fuel-hint { color: var(--dim) !important; }
/* Wetter, Hinweise */
html[data-ui-theme="graphit"] .briefing-route-weather h3,
html[data-ui-theme="graphit"] .briefing-route-weather strong:first-child { color: var(--txt) !important; letter-spacing: 0 !important; text-transform: none !important; font-size: 15px !important; }
html[data-ui-theme="graphit"] .briefing-route-weather,
html[data-ui-theme="graphit"] .briefing-route-weather p,
html[data-ui-theme="graphit"] .briefing-route-weather small { color: var(--dim) !important; }
html[data-ui-theme="graphit"] .briefing-scope-note { background: var(--cell) !important; border: 0 !important; border-left: 2px solid var(--acc) !important; border-radius: 0 !important; color: var(--dim) !important; }
html[data-ui-theme="graphit"] .briefing-unmappable-warning { border-left: 2px solid var(--warn) !important; }
/* NOTAM-Liste */
html[data-ui-theme="graphit"] .briefing-route-notams > header strong { color: var(--txt) !important; letter-spacing: 0 !important; text-transform: none !important; font-size: 15px !important; }
html[data-ui-theme="graphit"] .briefing-route-notams > header small { color: var(--dim) !important; }
html[data-ui-theme="graphit"] .briefing-route-notams > header > span { background: transparent !important; border: 1px solid var(--line) !important; border-radius: 3px !important; color: var(--txt) !important; min-width: 30px; }
html[data-ui-theme="graphit"] .briefing-route-notams ol { gap: 0 !important; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
html[data-ui-theme="graphit"] .briefing-route-notams li { margin: 0 !important; }
html[data-ui-theme="graphit"] .briefing-notam-card { background: var(--bg0) !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important; }
html[data-ui-theme="graphit"] .route-briefing-panel li:last-child .briefing-notam-card { border-bottom: 0 !important; }
html[data-ui-theme="graphit"] .briefing-notam-card[open] { background: var(--cell) !important; box-shadow: inset 3px 0 0 var(--acc) !important; }
html[data-ui-theme="graphit"] .briefing-notam-title { color: var(--txt) !important; }
html[data-ui-theme="graphit"] .briefing-notam-leg { color: var(--dim) !important; letter-spacing: 0.08em; }
html[data-ui-theme="graphit"] .briefing-notam-badges span { border-radius: 3px !important; }
html[data-ui-theme="graphit"] .briefing-notam-text { background: var(--bg0) !important; border: 1px solid var(--line) !important; border-radius: 3px !important; color: var(--txt) !important; }
html[data-ui-theme="graphit"] .briefing-empty { border: 1px dashed var(--line) !important; border-radius: 4px !important; color: var(--dim) !important; font-size: 13px !important; }

/* ---------- Dialoge allgemein ---------- */
html[data-ui-theme="graphit"] .account-backdrop,
html[data-ui-theme="graphit"] .weather-review-overlay,
html[data-ui-theme="graphit"] .waypoint-import-backdrop { background: rgba(8, 13, 18, 0.78) !important; backdrop-filter: blur(3px); }
html[data-ui-theme="graphit"] .account-dashboard,
html[data-ui-theme="graphit"] .weather-review-dialog { background: var(--bg1) !important; border: 1px solid var(--line) !important; border-radius: 6px !important; color: var(--txt) !important; font-family: 'Inter', sans-serif !important; font-size: 13px !important; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55) !important; }
html[data-ui-theme="graphit"] .account-dashboard * { font-family: 'Inter', sans-serif; }
/* Verwaltung: Kopfzeile als Leiste, Reiter wie MAP/BRIEFING */
html[data-ui-theme="graphit"] .account-dashboard { padding: 0 !important; }
html[data-ui-theme="graphit"] .account-dashboard > header { position: sticky; top: 0; z-index: 2; background: var(--bg0); border-bottom: 1px solid var(--line); padding: 10px 14px 10px 18px; }
html[data-ui-theme="graphit"] .account-dashboard > header h2 { margin: 0 !important; font-size: 13px !important; font-weight: 800 !important; letter-spacing: 0.18em !important; text-transform: uppercase; }
html[data-ui-theme="graphit"] .account-dashboard > header h2::first-letter { color: var(--acc); }
html[data-ui-theme="graphit"] .account-dashboard > header button { background: transparent !important; border: 1px solid var(--line) !important; color: var(--txt) !important; font-size: 12px !important; }
html[data-ui-theme="graphit"] .account-dashboard > :not(header):not(.admin-tabs) { margin-left: 18px; margin-right: 18px; }
html[data-ui-theme="graphit"] .account-dashboard > :last-child { margin-bottom: 18px; }
html[data-ui-theme="graphit"] .admin-tabs { position: sticky; top: 49px; z-index: 2; display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0 !important; margin: 0 0 16px !important; background: var(--bg1); border-bottom: 1px solid var(--line) !important; }
html[data-ui-theme="graphit"] .account-dashboard .admin-tabs button { background: transparent !important; border: 0 !important; border-right: 1px solid var(--line) !important; border-radius: 0 !important; color: var(--dim) !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: 0.16em !important; text-transform: uppercase; padding: 12px 6px !important; box-shadow: none !important; }
html[data-ui-theme="graphit"] .account-dashboard .admin-tabs button:last-child { border-right: 0 !important; }
html[data-ui-theme="graphit"] .account-dashboard .admin-tabs button.active { background: var(--cell) !important; color: var(--txt) !important; box-shadow: inset 0 -2px 0 var(--acc) !important; }
html[data-ui-theme="graphit"] .account-dashboard .admin-tabs button span { background: var(--bg0) !important; border: 1px solid var(--line); border-radius: 3px !important; color: var(--txt) !important; letter-spacing: 0; }
/* Knöpfe */
html[data-ui-theme="graphit"] .account-dashboard button,
html[data-ui-theme="graphit"] .weather-review-actions button { border-radius: 3px !important; font-size: 12px !important; font-weight: 600 !important; background: var(--btn) !important; border: 1px solid var(--btnline) !important; color: #fff !important; padding: 6px 12px !important; }
html[data-ui-theme="graphit"] .account-dashboard button.secondary,
html[data-ui-theme="graphit"] .admin-row-actions button,
html[data-ui-theme="graphit"] .admin-table button,
html[data-ui-theme="graphit"] .weather-review-cancel { background: var(--cell) !important; border-color: var(--line) !important; color: var(--txt) !important; }
html[data-ui-theme="graphit"] .account-dashboard button.danger { background: transparent !important; border-color: #b84848 !important; color: #ff8f8f !important; }
html[data-ui-theme="graphit"] .account-dashboard input[type=file]::file-selector-button { background: var(--cell); color: var(--txt); border: 1px solid var(--line); border-radius: 3px; padding: 5px 10px; margin-right: 10px; font-family: 'Inter', sans-serif; }
html[data-ui-theme="graphit"] .account-dashboard input[type=file] { color: var(--dim); font-size: 12px; }
html[data-ui-theme="graphit"] .account-dashboard input:not([type=checkbox]):not([type=file]),
html[data-ui-theme="graphit"] .account-dashboard select { background: var(--bg0) !important; border: 1px solid var(--line) !important; border-radius: 3px !important; color: var(--txt) !important; }
/* Tabellen */
html[data-ui-theme="graphit"] .admin-table { font-size: 13px !important; border: 1px solid var(--line); }
html[data-ui-theme="graphit"] .admin-table th { background: var(--bg0); color: var(--dim) !important; font-size: 9.5px !important; letter-spacing: 0.14em !important; border-bottom: 1px solid var(--line) !important; }
html[data-ui-theme="graphit"] .admin-table td { border-bottom: 1px solid var(--line) !important; }
html[data-ui-theme="graphit"] .admin-table tbody tr:hover td { background: var(--cell); }
html[data-ui-theme="graphit"] .admin-table .mono { font-family: 'Inter', sans-serif !important; color: var(--dim); }
html[data-ui-theme="graphit"] .admin-badge { border-radius: 3px !important; }
html[data-ui-theme="graphit"] .admin-toolbar { color: var(--dim); }
/* Upload-Karten: Raster-Kästen mit Abschnittstitel */
html[data-ui-theme="graphit"] .admin-uploads .admin-upload-title { color: var(--acc) !important; font-size: 11px !important; letter-spacing: 0.16em !important; text-transform: uppercase; }
html[data-ui-theme="graphit"] .admin-uploads > section > p,
html[data-ui-theme="graphit"] .admin-uploads p small { color: var(--dim) !important; font-size: 12px; }
html[data-ui-theme="graphit"] .admin-uploads .ofm-admin { border-top: 1px solid var(--line) !important; }
html[data-ui-theme="graphit"] .account-dashboard .admin-create { background: var(--bg0) !important; border: 1px solid var(--line) !important; border-radius: 4px !important; padding: 12px 14px !important; font-size: 13px !important; }
html[data-ui-theme="graphit"] .account-dashboard .admin-create h3,
html[data-ui-theme="graphit"] .account-dashboard .admin-create h4 { font-size: 10.5px !important; color: var(--dim) !important; letter-spacing: 0.16em !important; text-transform: uppercase; margin-bottom: 8px !important; }
html[data-ui-theme="graphit"] .ofm-admin .ofm-expired { border-color: var(--line) !important; box-shadow: inset 3px 0 0 var(--warn); }
html[data-ui-theme="graphit"] .ofm-admin .ofm-expired-label,
html[data-ui-theme="graphit"] .mil-aip-admin .mil-aip-note { color: var(--warn) !important; }
html[data-ui-theme="graphit"] .account-list li { border-bottom: 1px solid var(--line) !important; }
html[data-ui-theme="graphit"] .account-list small { color: var(--dim) !important; }
/* Flugwetterprüfung */
html[data-ui-theme="graphit"] .weather-review-header,
html[data-ui-theme="graphit"] .weather-review-actions { background: var(--bg0) !important; border-color: var(--line) !important; }
html[data-ui-theme="graphit"] .weather-review-header strong { font-size: 13px !important; letter-spacing: 0.18em !important; }
html[data-ui-theme="graphit"] .weather-review-header strong::first-letter { color: var(--acc); }
html[data-ui-theme="graphit"] .weather-review-header span,
html[data-ui-theme="graphit"] .weather-review-intro { color: var(--dim) !important; font-size: 11.5px !important; }
html[data-ui-theme="graphit"] .weather-review-close { background: transparent !important; border: 1px solid var(--line) !important; border-radius: 3px !important; }
html[data-ui-theme="graphit"] .weather-review-section h3 { color: var(--acc) !important; font-size: 10.5px !important; letter-spacing: 0.16em !important; text-transform: uppercase; }
html[data-ui-theme="graphit"] .weather-review-grid { gap: 0 !important; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
html[data-ui-theme="graphit"] .weather-review-item { background: var(--bg0) !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-right: 1px solid var(--line) !important; border-radius: 0 !important; }
html[data-ui-theme="graphit"] .weather-review-item:has(input:checked) { background: var(--cell) !important; box-shadow: inset 3px 0 0 var(--acc); }
html[data-ui-theme="graphit"] .weather-review-item input { accent-color: var(--acc) !important; }
html[data-ui-theme="graphit"] .weather-review-item strong { font-size: 12.5px !important; }
html[data-ui-theme="graphit"] .weather-review-item small { color: var(--dim) !important; font-size: 10.5px !important; }
html[data-ui-theme="graphit"] .weather-review-actions button { font-size: 12px !important; min-height: 36px; }
/* Routen-Dialoge */
/* Routen- und Wegpunkt-Dialoge behalten ihr eigenes Layout; nur Fläche und Linien im Graphit-Ton */
html[data-ui-theme="graphit"] .waypoint-import-dialog { background: var(--bg1) !important; border: 1px solid var(--line) !important; border-radius: 6px !important; }
html[data-ui-theme="graphit"] .waypoint-import-dialog input,
html[data-ui-theme="graphit"] .waypoint-import-dialog select { background: var(--bg0) !important; border: 1px solid var(--line) !important; border-radius: 3px !important; color: var(--txt) !important; }

html[data-ui-theme="graphit"] .account-dashboard .admin-tabs button span { background: var(--bg0) !important; border: 1px solid var(--line) !important; padding: 0 5px !important; font-size: 10px !important; }
html[data-ui-theme="graphit"] .briefing-route-summary > small { text-transform: none; }
html[data-ui-theme="graphit"] .route-briefing-panel > * { flex-shrink: 0 !important; }
html[data-ui-theme="graphit"] .briefing-route-notams ol { overflow: visible !important; }
html[data-ui-theme="graphit"] .weather-review-actions .weather-review-cancel { background: var(--cell) !important; border-color: var(--line) !important; color: var(--txt) !important; }
html[data-ui-theme="graphit"] .weather-review-actions button:disabled { opacity: 0.45; }
html[data-ui-theme="graphit"] .weather-review-all { border: 1px solid var(--line) !important; border-radius: 4px !important; }
/* Unterdialoge der Verwaltung (Benutzer verwalten, Muster bearbeiten) */
html[data-ui-theme="graphit"] .admin-subdialog-backdrop { background: rgba(8, 13, 18, 0.78) !important; }
html[data-ui-theme="graphit"] .admin-subdialog { background: var(--bg1) !important; border: 1px solid var(--line) !important; border-radius: 6px !important; color: var(--txt) !important; font-family: 'Inter', sans-serif !important; font-size: 13px !important; }
html[data-ui-theme="graphit"] .admin-subdialog h3 { font-size: 13px !important; letter-spacing: 0.14em !important; text-transform: uppercase; }
html[data-ui-theme="graphit"] .admin-subdialog h4,
html[data-ui-theme="graphit"] .admin-subdialog header small { color: var(--dim) !important; letter-spacing: 0.14em !important; }
html[data-ui-theme="graphit"] .admin-subdialog button { border-radius: 3px !important; font-size: 12px !important; font-weight: 600 !important; background: var(--btn) !important; border: 1px solid var(--btnline) !important; color: #fff !important; }
html[data-ui-theme="graphit"] .admin-subdialog button.secondary { background: var(--cell) !important; border-color: var(--line) !important; color: var(--txt) !important; }
html[data-ui-theme="graphit"] .admin-subdialog button.danger { background: transparent !important; border-color: #b84848 !important; color: #ff8f8f !important; }
html[data-ui-theme="graphit"] .admin-subdialog input:not([type=checkbox]),
html[data-ui-theme="graphit"] .admin-subdialog select { background: var(--bg0) !important; border: 1px solid var(--line) !important; border-radius: 3px !important; color: var(--txt) !important; }

/* ===== Radarleiste unten auf der Karte: sichtbar, solange „Niederschlagsradar“ an ist =====
   Schlank: ▶ · Uhrzeit · Zeitleiste · NOW; so hoch wie die Werkzeugknöpfe und unten bündig
   mit dem Werkzeugblock. Vorhersage gelb, nicht aktuell rot; Hinweise über der Leiste. */
.weather-frame-kind.stale { color: #ffd9d9; background: #6b2a2a; border-color: #b84848; }
.radar-film-bar {
  --radar-bar-h: 36px;
  position: absolute; z-index: 1100; left: 50%; bottom: 28px; transform: translateX(-50%);
  width: min(440px, calc(100% - 300px)); min-width: 280px; height: var(--radar-bar-h);
  color: #eef3f6; background: rgba(15, 23, 32, 0.72); border: 0; border-radius: 6px;
}
.radar-film-controls { display: flex; align-items: center; gap: 8px; height: 100%; padding-right: 3px; }
.radar-film-bar button {
  flex: 0 0 auto; height: calc(var(--radar-bar-h) - 6px); padding: 0 10px; border: 0; border-radius: 4px; cursor: pointer;
  color: #fff; background: rgba(255, 255, 255, 0.12); font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
}
.radar-film-bar .radar-film-play {
  width: var(--radar-bar-h); height: var(--radar-bar-h); padding: 0; border-radius: 6px 0 0 6px; background: #12808d; font-size: 12px;
}
.radar-film-bar button:disabled { opacity: 0.45; cursor: default; }
.radar-film-time { flex: 0 0 auto; min-width: 42px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.radar-film-time small { font-size: 10px; font-weight: 700; }
.radar-film-bar.forecast .radar-film-time { color: #ffc94d; }
.radar-film-bar.stale .radar-film-time { color: #ff7b7b; }
.radar-film-track { display: flex; flex-direction: column; justify-content: center; flex: 1 1 auto; min-width: 60px; }
.radar-film-track input[type=range] { width: 100%; height: 14px; margin: 0; accent-color: #3fd0e0; }
.radar-film-scale { display: flex; justify-content: space-between; color: #a9b6c0; font-size: 8.5px; line-height: 1; }
.radar-film-bar > .radar-film-note {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 4px); margin: 0; padding: 3px 6px;
  border-radius: 4px; color: #c7d0d7; background: rgba(15, 23, 32, 0.72); font-size: 11px; line-height: 1.3;
}
.radar-film-bar > .radar-film-note ~ .radar-film-note { display: none; }
.radar-film-note.warning { color: #ffd27a; }
.radar-film-note.error { color: #ff9a9a; }
.weather-timeline.weather-opacity-only .weather-opacity-row { margin-top: 0; }
@media (pointer: coarse) and (max-width: 1366px), (max-width: 900px) {
  .radar-film-bar { --radar-bar-h: 46px; bottom: 26px; width: min(440px, calc(100% - 240px)); min-width: 0; }
  .radar-film-time { font-size: 15px; }
}
html[data-ui-theme="graphit"] .radar-film-bar { font-family: 'Inter', sans-serif; }

/* Landestellen: Kreis mit Kürzel (§6 grün, PIS gelb, SLS rot) wie die OFM-Helipads */
.landing-site-icon { background: none; border: 0; }
.landing-site-badge {
  display: grid; place-items: center; box-sizing: border-box; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(13, 19, 25, 0.75);
  color: #fff; font-family: 'Inter', 'DejaVu Sans', sans-serif; font-weight: 800; line-height: 1;
  letter-spacing: -0.02em; text-shadow: 0 0 2px rgba(0, 0, 0, 0.55); cursor: pointer;
}
.landing-site-badge span { display: block; transform: translateY(0.5px); }

/* Graphit: Landestellen-Fenster im Raster-Look (Häkchen türkis statt lila) */
html[data-ui-theme="graphit"] .landing-sites-panel { background: var(--bg1); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); font-family: 'Inter', sans-serif; }
html[data-ui-theme="graphit"] .landing-sites-panel header strong { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
html[data-ui-theme="graphit"] .landing-sites-panel header strong::first-letter { color: var(--acc); }
html[data-ui-theme="graphit"] .landing-sites-panel header button { color: var(--dim); }
html[data-ui-theme="graphit"] .landing-sites-panel label { background: var(--bg0); border: 1px solid var(--line); border-radius: 3px; }
html[data-ui-theme="graphit"] .landing-sites-panel label:has(input:checked) { background: var(--cell); box-shadow: inset 3px 0 0 var(--acc); }
html[data-ui-theme="graphit"] .landing-sites-panel input { accent-color: var(--acc); }
html[data-ui-theme="graphit"] .landing-sites-panel i { width: 12px; height: 12px; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(13, 19, 25, 0.75); }
html[data-ui-theme="graphit"] .landing-sites-panel small { color: var(--dim); }

/* Graphit: Wegpunkte-Fenster, Kartenbeschriftung und Kontextmenü ohne Lila (Ordnerfarben bleiben) */
html[data-ui-theme="graphit"] .saved-waypoints-panel { background: var(--bg1); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); font-family: 'Inter', sans-serif; }
html[data-ui-theme="graphit"] .saved-waypoints-panel header strong { letter-spacing: 0.04em; }
html[data-ui-theme="graphit"] .saved-waypoints-panel header strong span,
html[data-ui-theme="graphit"] .saved-waypoints-tabs button span,
html[data-ui-theme="graphit"] .saved-waypoint-main span,
html[data-ui-theme="graphit"] .map-context-saved small { color: var(--dim); }
html[data-ui-theme="graphit"] .saved-waypoints-tabs button { border-color: var(--line); border-radius: 3px; background: var(--bg0); color: var(--dim); }
html[data-ui-theme="graphit"] .saved-waypoints-panel header .saved-waypoints-tabs button.active { border-color: var(--line); background: var(--cell); color: var(--txt); box-shadow: inset 0 -2px 0 var(--acc); }
html[data-ui-theme="graphit"] .saved-waypoints-visible input,
html[data-ui-theme="graphit"] .saved-waypoint-folder-head input { accent-color: var(--acc); }
html[data-ui-theme="graphit"] .saved-waypoints-tools button,
html[data-ui-theme="graphit"] .map-context-manage button,
html[data-ui-theme="graphit"] .map-context-expand { border: 1px solid var(--line); border-radius: 3px; background: var(--cell); color: var(--txt); }
html[data-ui-theme="graphit"] .saved-waypoints-tools button:hover:not(:disabled),
html[data-ui-theme="graphit"] .map-context-manage button:hover:not(:disabled),
html[data-ui-theme="graphit"] .saved-waypoint-actions button:hover:not(:disabled),
html[data-ui-theme="graphit"] .saved-waypoints-exchange button:hover:not(:disabled) { border-color: var(--acc); }
html[data-ui-theme="graphit"] .saved-waypoint-main strong { color: var(--txt); }
html[data-ui-theme="graphit"] .saved-waypoints-filter,
html[data-ui-theme="graphit"] .saved-waypoints-visible { background: var(--bg0); border-radius: 3px; }
html[data-ui-theme="graphit"] .saved-waypoints-toggle.active { border-color: var(--line); background: var(--cell); }
html[data-ui-theme="graphit"] .leaflet-tooltip.saved-waypoint-tooltip { border-color: var(--line); background: rgba(20, 32, 41, 0.92); color: var(--txt); font-family: 'Inter', sans-serif; }
html[data-ui-theme="graphit"] .saved-waypoint-badge { background: var(--acc); }
html[data-ui-theme="graphit"] .saved-waypoint-folder.unfiled .saved-waypoints-list,
html[data-ui-theme="graphit"] .saved-waypoints-panel > .saved-waypoints-list { border-left-color: var(--dim); }

/* Griff zum Verbreitern des Planungsbereichs nicht über offenen Dialogen zeigen */
body:has(.waypoint-import-backdrop) .mode-panel-resize-handle,
body:has(.account-backdrop) .mode-panel-resize-handle,
body:has(.weather-review-overlay) .mode-panel-resize-handle { visibility: hidden; }

/* Briefing: Hinweis auf nicht aufgeführte Flugplatz-NOTAMs anderer Plätze */
.briefing-excluded-note { margin: 8px 0 0; color: #8f9ba5; font-size: 11px; line-height: 1.4; }

/* Mein Konto → Karte offline */
.offline-map-panel { margin-top: 18px; padding-top: 14px; border-top: 1px solid #405262; }
.offline-map-panel .offline-map-note { color: #b6c5d0; font-size: 13px; line-height: 1.45; }
.offline-map-status { display: grid; gap: 4px; margin: 10px 0; font-size: 13px; }
.offline-map-status div { display: grid; grid-template-columns: 140px 1fr; gap: 8px; }
.offline-map-status dt { color: #9fb3c2; }
.offline-map-status dd { margin: 0; }
.offline-map-warning { color: #ffd27a; font-weight: 700; }
.offline-map-progress { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-size: 13px; }
.offline-map-progress progress { flex: 1; height: 10px; }
html[data-ui-theme="graphit"] .offline-map-panel { border-top-color: var(--line); }
html[data-ui-theme="graphit"] .offline-map-panel h3 { font-size: 10.5px !important; color: var(--acc) !important; letter-spacing: 0.16em; text-transform: uppercase; }
html[data-ui-theme="graphit"] .offline-map-panel .offline-map-note,
html[data-ui-theme="graphit"] .offline-map-status dt { color: var(--dim); }
html[data-ui-theme="graphit"] .offline-map-progress progress { accent-color: var(--acc); }