/* Tank-App Theme und UI-Farbsystem v2 */

.menu-design-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: .95rem;
}
.theme-options { border-top: 1px solid var(--line); }
.theme-option {
  min-height: 62px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 1.12rem;
  cursor: pointer;
}
.theme-option input { position: absolute; opacity: 0; pointer-events: none; }
.theme-check { color: var(--blue); opacity: 0; font-size: 1.25rem; font-weight: 800; }
.theme-option:has(input:checked) .theme-check { opacity: 1; }

/* Design-Sheet: großer Touch-Bereich am sichtbaren Griff für Wisch-zum-Schließen. */
.theme-sheet .sheet-panel { overscroll-behavior-y: contain; }
.theme-sheet .sheet-panel > .sheet-handle {
  position: relative;
  width: 160px;
  height: 30px;
  margin: -5px auto -2px;
  background: transparent;
  opacity: 1;
  touch-action: none !important;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.theme-sheet .sheet-panel > .sheet-handle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 12px;
  width: 110px;
  height: 5px;
  border-radius: 999px;
  background: #b4b4b8;
  opacity: .8;
  transform: translateX(-50%);
}
.theme-sheet .sheet-panel > .sheet-handle:active { cursor: grabbing; }
.theme-sheet .sheet-panel.sheet-dragging { overflow-y: hidden; }

/* Validierte helle Basisdarstellung aus dem früheren UX-Layer. */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f4f7;
  --bg-elevated: #ffffff;
  --panel: #ffffff;
  --panel-2: #ececf1;
  --panel-3: #dedee5;
  --text: #111114;
  --muted: #68686f;
  --line: #d4d4da;
  --shadow: 0 12px 34px rgba(0,0,0,.16);
}
html[data-theme="light"] body,
html[data-theme="light"] .overlay-panel { background: var(--bg); color: var(--text); }
html[data-theme="light"] .sticky-top,
html[data-theme="light"] .results-heading.sticky-results-heading { background: rgba(244,244,247,.97); }
html[data-theme="light"] .round-control,
html[data-theme="light"] .search-field-button,
html[data-theme="light"] .search-input-wrap,
html[data-theme="light"] .settings-card,
html[data-theme="light"] .menu-row,
html[data-theme="light"] .station-row,
html[data-theme="light"] .empty-state {
  background: #fff;
  color: var(--text);
}
html[data-theme="light"] .search-composite {
  background: #fff;
  border-color: #d6d6dc;
}
html[data-theme="light"] .round-control,
html[data-theme="light"] .search-field-button,
html[data-theme="light"] .search-input-wrap { border-color: #d6d6dc; }
html[data-theme="light"] .search-input-wrap input { color: var(--text); }
html[data-theme="light"] .search-input-wrap input::placeholder { color: #898990; }
html[data-theme="light"] .segmented-control { background: #e1e1e7; }
html[data-theme="light"] .segmented-control button { color: #242428; }
html[data-theme="light"] .segmented-control button.active { color: #fff; }
html[data-theme="light"] .sheet-panel {
  background: #f8f8fb;
  color: var(--text);
  box-shadow: 0 -10px 30px rgba(0,0,0,.18);
}
html[data-theme="light"] .fuel-star-btn,
html[data-theme="light"] .fuel-default-btn,
html[data-theme="light"] .brand-choice,
html[data-theme="light"] .route-row-actions button,
html[data-theme="light"] .time-row input,
html[data-theme="light"] .back-button {
  background: #ececf1;
  color: var(--text);
  border-color: #d4d4da;
}
html[data-theme="light"] .brand-choice { background: #fff; }
html[data-theme="light"] .switch-ui { background: #c7c7cc; }
html[data-theme="light"] .range-labels,
html[data-theme="light"] .opening-time-row,
html[data-theme="light"] .menu-row.placeholder { color: #4f4f56; }
html[data-theme="light"] .bottom-nav.bottom-nav-edge,
html[data-theme="light"] .bottom-nav {
  background: rgba(245,245,248,.97);
  border-color: #c8c8ce;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
}
html[data-theme="light"] .nav-item { color: #2c2c31; }
html[data-theme="light"] .nav-item.active { background: #dedee5; color: #1494f3; }
html[data-theme="light"] .overlay { background: rgba(0,0,0,.32); }
html[data-theme="light"] #searchOverlay:not(.route-search-mode) { background: transparent; }
html[data-theme="light"] .detail-panel,
html[data-theme="light"] .info-panel { background: #f8f8fb; }
html[data-theme="light"] .detail-price-list,
html[data-theme="light"] .detail-fuel-row { background: #fff; }
html[data-theme="light"] .menu-list,
html[data-theme="light"] .route-row { border-color: #d4d4da; }

html[data-theme="light"] .alert-stepper {
  background: #ececf1 !important;
  border-color: #d4d4da !important;
  color: #111114 !important;
  box-shadow: none !important;
}
html[data-theme="light"] .alert-stepper button {
  background: transparent !important;
  color: #111114 !important;
  border-color: #c9c9cf !important;
}
html[data-theme="light"] .alert-stepper button:active { background: #dedee5 !important; }
html[data-theme="light"] .push-status-card .secondary-wide,
html[data-theme="light"] .push-status-card #requestNotificationButton,
html[data-theme="light"] .push-status-card #testNotificationButton {
  background: #ececf1 !important;
  color: #17171a !important;
  border: 1px solid #d4d4da !important;
  box-shadow: none !important;
  opacity: 1 !important;
}
html[data-theme="light"] .push-status-card button:disabled {
  background: #e4e4e9 !important;
  color: #4a4a50 !important;
  opacity: 1 !important;
}

html[data-theme="light"] .leaflet-bar a,
html[data-theme="light"] .leaflet-bar a:hover {
  background: rgba(255,255,255,.96) !important;
  color: #17171a !important;
  border-bottom-color: #d4d4da !important;
}
html[data-theme="light"] .map-action,
html[data-theme="light"] .search-area-button,
html[data-theme="light"] .recenter-button {
  background: rgba(255,255,255,.96) !important;
  color: #1494f3 !important;
  border: 1px solid #d4d4da !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.16) !important;
}
html[data-theme="light"] .map-action svg,
html[data-theme="light"] .recenter-button svg { stroke: #1494f3 !important; }
html[data-theme="light"] .leaflet-control-attribution {
  background: rgba(255,255,255,.86) !important;
  color: #34343a !important;
}
html[data-theme="light"] .leaflet-control-attribution a { color: #147fc4 !important; }
html[data-theme="light"] .brand-bulk-actions button {
  background: #fff !important;
  color: #147fc4 !important;
  border-color: #d4d4da !important;
}
html[data-theme="light"] .brand-bulk-actions button:active { background: #ececf1 !important; }

/* Verbindliches Marken-/Funktionsfarbsystem. */
:root {
  --brand-green: #24c268;
  --brand-light-green: #cdffcf;
  --brand-rose: #f2dadd;
  --brand-greige: #f2f0e5;
  --brand-anthracite: #212121;
  --brand-white: #ffffff;
  --brand-interactive: #8739f4;
  --brand-accent-yellow: #bdff00;
  --brand-digital-green: #33f373;
  --blue: #8739f4 !important;
  --blue-2: #6f27d8 !important;
  --green: #24c268 !important;
  --yellow: #bdff00 !important;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff !important;
  --bg-elevated: #ffffff !important;
  --panel: #f2f0e5 !important;
  --panel-2: #f2f0e5 !important;
  --panel-3: #f2dadd !important;
  --text: #212121 !important;
  --muted: #656565 !important;
  --line: #dedbd0 !important;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --text: #f7f7f8;
  --muted: #aaaab1;
}

a,
.text-button,
.link-button,
.sheet-header button,
.info-header button {
  color: var(--brand-interactive) !important;
}

.primary-wide,
.pill-select,
.segmented-control button.active,
.detail-route,
.results-sort-toggle button.active,
.theme-option.active,
.theme-option[aria-checked="true"] {
  background: var(--brand-interactive) !important;
  color: #fff !important;
}

.round-control:focus-visible,
.search-field-button:focus-visible,
.pill-select:focus-visible,
.menu-row:focus-visible,
.nav-item:focus-visible,
.detail-route:focus-visible,
.primary-wide:focus-visible,
.secondary-wide:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand-interactive) 55%, transparent);
  outline-offset: 2px;
}

#searchAreaButton,
#recenterButton,
#brandFilterButton,
#refreshButton,
#searchRefreshButton {
  color: var(--brand-interactive) !important;
}

.user-location-marker {
  background: var(--brand-digital-green) !important;
  box-shadow: 0 0 0 5px rgba(51,243,115,.24), 0 2px 10px rgba(0,0,0,.35) !important;
}

.station-map-marker.cheap {
  background: var(--brand-green) !important;
  color: var(--brand-green) !important;
}
.station-map-marker.mid {
  background: var(--brand-accent-yellow) !important;
  color: var(--brand-accent-yellow) !important;
}
.station-map-marker.mid > * { color: var(--brand-anthracite) !important; }

.heart-button.active,
.detail-fav.active,
.nav-item.active {
  color: var(--brand-interactive) !important;
}

.bottom-nav .nav-item.active::before {
  background: color-mix(in srgb, var(--brand-interactive) 14%, transparent) !important;
}

/* Im Dunkelmodus entspricht die aktive Navigation dem violetten Primärbutton. */
html[data-theme="dark"] .bottom-nav .nav-item.active {
  background: var(--brand-interactive) !important;
  border: 2px solid var(--brand-interactive) !important;
  box-sizing: border-box;
  box-shadow: none !important;
  color: var(--brand-white) !important;
}
html[data-theme="dark"] .bottom-nav .nav-item.active::before {
  background: transparent !important;
  border: 2px solid var(--brand-interactive) !important;
  box-sizing: border-box;
  box-shadow: none !important;
}

html[data-theme="light"] .settings-card,
html[data-theme="light"] .menu-list,
html[data-theme="light"] .route-row,
html[data-theme="light"] .empty-state {
  background: var(--brand-greige) !important;
}

html[data-theme="light"] .menu-row,
html[data-theme="light"] .station-row,
html[data-theme="light"] .round-control,
html[data-theme="light"] .search-field-button,
html[data-theme="light"] .secondary-wide,
html[data-theme="light"] .leaflet-control-zoom a,
html[data-theme="light"] #searchAreaButton,
html[data-theme="light"] #recenterButton {
  background: var(--brand-white) !important;
  color: var(--brand-anthracite) !important;
}

html[data-theme="light"] #searchAreaButton,
html[data-theme="light"] #recenterButton,
html[data-theme="light"] #brandFilterButton,
html[data-theme="light"] #refreshButton,
html[data-theme="light"] #searchRefreshButton {
  color: var(--brand-interactive) !important;
}

html[data-theme="light"] .menu-row,
html[data-theme="light"] .station-row {
  border-color: #dedbd0 !important;
}

/* Menübanner – endgültige Bilddarstellung, ohne JavaScript-Inline-Styles. */
.app-brand-banner {
  position: relative;
  margin: 0 16px 18px;
  overflow: hidden;
  color: var(--brand-anthracite);
}
.app-brand-banner.app-brand-banner-image-shell {
  display: block;
  grid-template-columns: none;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 20px;
  aspect-ratio: 3 / 1;
}
.app-brand-banner::after {
  content: "";
  position: absolute;
  right: -36px;
  top: -46px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 22px solid rgba(36,194,104,.18);
  pointer-events: none;
}
.app-brand-banner-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
#menuView .simple-header { padding-bottom: 14px; }
#menuView .menu-list { margin-top: 0; }

/* Gemeinsames Iconsystem. */
.ui-icon-solid {
  width: 24px !important;
  height: 24px !important;
  display: block !important;
  flex: 0 0 auto;
  fill: currentColor !important;
  stroke: none !important;
}
.ui-icon-solid path,
.ui-icon-solid circle,
.ui-icon-solid rect,
.ui-icon-solid polygon {
  fill: currentColor !important;
  stroke: none !important;
}
.round-control > .ui-icon-solid,
.map-action > .ui-icon-solid,
.gps-dot > .ui-icon-solid { width: 26px !important; height: 26px !important; }
.leaflet-control-zoom a > .ui-icon-solid { width: 20px !important; height: 20px !important; }
.heart-button > .ui-icon-solid,
.detail-fav > .ui-icon-solid { width: 25px !important; height: 25px !important; }
.bottom-nav .ui-icon-solid { width: 23px !important; height: 23px !important; }
.alert-stepper .ui-icon-solid,
.alert-remove .ui-icon-solid,
.route-row-actions .ui-icon-solid { width: 20px !important; height: 20px !important; }

.button-with-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.button-with-icon .ui-icon-solid { width: 20px !important; height: 20px !important; }

.menu-row-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.menu-row-main > .ui-icon-solid { width: 22px !important; height: 22px !important; color: var(--brand-anthracite); }
html[data-theme="dark"] .menu-row-main > .ui-icon-solid { color: var(--text); }
.menu-row-chevron .ui-icon-solid { width: 18px !important; height: 18px !important; color: var(--muted); }