/* BBL GIS Immobilienportfolio - Shared Components */
/* Requires tokens.css. Identical in prototype-simple and prototype-tabs (see docs/DESIGN-REVIEW.md);
   change both copies together. App-specific layout and components live in app.css. */

/* ===== HEADER ===== */
#header {
  background: var(--white);
  display: flex;
  flex-direction: column;
  z-index: var(--z-header);
}

/* Three columns: logo | search + view toggle | actions. The side columns share the free space equally, so
   the search is centred; each is never narrower than its content and the centre shrinks first, so nothing
   overlaps. Below 1720px the actions and the view toggle are icon-only (see the responsive rules). */
.header-main {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-5);
  height: var(--header-main-height);
  border-bottom: var(--border-strong);
  box-shadow: var(--shadow-md);
  z-index: 1; /* Shadow appears above a second header row */
}

#logo-area {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  cursor: pointer;
  flex: 1 1 0;
  min-width: max-content;
}

#logo-title {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--grey-700);
  white-space: nowrap;
}

#logo-title strong {
  font-weight: var(--font-semibold);
  color: var(--grey-900);
}

/* One-line title for compact layouts (shown from the tablet breakpoint down) */
.logo-title-short {
  display: none;
  white-space: nowrap;
  color: var(--grey-700);
}

.logo-title-short strong {
  font-weight: var(--font-semibold);
  color: var(--grey-900);
}

/* Search and view toggle in the centre column; below 1366px the column takes the space between logo and actions */
#search-area {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
  flex: 0 1 760px; /* 550px search + view toggle; a fixed basis, since the input has no width of its own */
  min-width: 0;
}

/* ===== SEARCH ===== */
#search-wrapper {
  position: relative;
  width: 100%;
  max-width: 550px;
  z-index: var(--z-drawer);
}

#search-container {
  display: flex;
  align-items: center;
  border: var(--border-strong);
  border-radius: var(--radius-sm);
  width: 100%;
  overflow: hidden;
  background: var(--white);
  height: var(--control-height);
}

#search-icon-btn {
  background: var(--grey-100);
  border: none;
  border-right: var(--border-strong);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

#search-icon-btn:hover {
  background: var(--grey-200);
}

#search-icon-btn .material-symbols-outlined {
  font-size: var(--icon-lg);
  color: var(--grey-600);
}

#search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  outline: none;
}

/* Hide browser's default clear button on search inputs */
#search-input::-webkit-search-cancel-button,
#search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

#search-input::-ms-clear {
  display: none;
}

#search-input::placeholder {
  color: var(--grey-500);
}

#search-clear-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0 var(--space-3);
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--grey-500);
  height: 100%;
}

#search-clear-btn:hover {
  color: var(--grey-900);
  background: var(--grey-100);
}

#search-clear-btn .material-symbols-outlined {
  font-size: var(--icon-md);
}

#search-clear-btn.visible {
  display: flex;
}

/* Spinner (search field, inline in buttons via .inline-spinner) */
.spinner {
  width: var(--icon-md);
  height: var(--icon-md);
  border: 2px solid var(--grey-100);
  border-top: 2px solid var(--grey-600);
  border-radius: var(--radius-full);
  animation: spin 1s linear infinite;
  will-change: transform;
  margin-right: var(--space-3);
  display: none;
}

#search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--white);
  border: var(--border-strong);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: var(--shadow-lg);
  max-height: 500px;
  overflow-y: auto;
  display: none;
}

#search-results.active {
  display: block;
}

/* Section header: title left, source right ("swisstopo", "Geokatalog") */
.search-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  background: var(--accent-panel);
  color: var(--white);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.search-section-source {
  font-weight: var(--font-normal);
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.85;
}

/* Result row: icon · title (+ subtitle) · meta or action on the right */
.search-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  border-bottom: var(--border-subtle);
  transition: background var(--transition-fast);
}

.search-item:hover,
.search-item:focus-visible {
  background: var(--grey-100);
}

.search-item:last-child {
  border-bottom: none;
}

.search-item--empty {
  cursor: default;
}

.search-item-icon {
  font-size: var(--icon-lg);
  color: var(--grey-500);
  flex-shrink: 0;
}

.search-item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
}

.search-item-title {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--grey-900);
}

.search-item-title b {
  color: var(--primary-red);
  font-weight: var(--font-semibold);
}

.search-item-subtitle {
  font-size: var(--text-xs);
  color: var(--grey-600);
}

.search-item-meta {
  flex-shrink: 0;
  font-size: var(--text-xs);
  color: var(--grey-500);
  text-align: right;
  white-space: nowrap;
}

.search-item-meta .material-symbols-outlined {
  font-size: var(--icon-sm);
  vertical-align: -3px;
  margin-right: 2px;
}

.search-item-action {
  flex-shrink: 0;
  padding: var(--space-1) var(--space-3);
  border: var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--grey-900);
  white-space: nowrap;
}

.search-item:hover .search-item-action {
  border-color: var(--grey-500);
}

/* Info button at the far right of a Karten row: opens the layer info modal, does not add the layer */
/* Search history rows */
.search-history-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.search-history-icon {
  font-size: var(--icon-md);
  color: var(--grey-400);
  flex-shrink: 0;
}

.search-history-item .search-item-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Warning row (external search failed) */
.search-item-warning {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--status-warning-text);
  background: var(--status-warning-bg);
  cursor: default;
}

.search-item-warning .material-symbols-outlined {
  font-size: var(--icon-md);
}

/* Scope menu inside the search box ("Alle ▾" → checkboxes) */
.search-scope {
  height: 100%;
  flex-shrink: 0;
}

.search-scope-btn {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  height: 100%;
  border: none;
  border-left: var(--border-strong);
  padding: 0 var(--space-2) 0 var(--space-3);
  background: var(--grey-50);
  font-size: var(--text-sm);
  color: var(--grey-700);
  cursor: pointer;
  white-space: nowrap;
}

.search-scope-btn:hover,
.search-scope-btn:focus-visible,
.search-scope-btn[aria-expanded="true"] {
  background: var(--grey-100);
}

.search-scope-btn.active {
  color: var(--grey-900);
  font-weight: var(--font-medium);
}

.search-scope-btn .material-symbols-outlined {
  font-size: var(--icon-md);
  color: var(--grey-500);
}

.search-scope-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 10;
  min-width: 160px;
  margin-top: var(--space-0-5);
  padding: var(--space-1) 0;
  background: var(--white);
  border: var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}

.search-scope-menu[hidden] {
  display: none;
}

.search-scope-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--grey-900);
  cursor: pointer;
}

.search-scope-option:hover {
  background: var(--grey-100);
}

.search-scope-option input {
  margin: 0;
}

/* ===== VIEW TOGGLE ===== */
.view-toggle {
  display: flex;
  border: var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  height: var(--control-height);
}

.view-toggle-btn {
  background: var(--white);
  border: none;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border-right: var(--border-strong);
  transition: background var(--transition-normal), padding var(--transition-normal);
}

.view-toggle-btn:last-child {
  border-right: none;
}

.view-toggle-btn:hover {
  background: var(--grey-100);
}

.view-toggle-btn.active {
  background: var(--accent-panel);
}

.view-toggle-btn .material-symbols-outlined {
  font-size: var(--icon-lg);
  color: var(--grey-600);
}

.view-toggle-btn.active .material-symbols-outlined {
  color: var(--white);
}

.view-toggle-btn .view-label {
  display: none;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--grey-900);
}

.view-toggle-btn.active .view-label {
  display: inline;
  color: var(--white);
}

/* ===== HEADER ACTIONS ===== */
#header-right {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3); /* same gap at every width */
  flex: 1 1 0;
  min-width: max-content;
  justify-content: flex-end;
}

.header-btn {
  position: relative;
  background: var(--white);
  border: var(--border-strong);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--grey-900);
  display: flex;
  align-items: center;
  height: var(--control-height);
  gap: var(--space-2);
  transition: background var(--transition-normal);
}

/* Standorte and Filter are icon-only circles at every width; the title and aria-label carry the name.
   A class, not the ids, so the tablet and touch rules (44px targets) still size them. */
.header-btn--icon {
  padding: 0;
  width: var(--control-height);
  justify-content: center;
}

.header-btn:hover {
  background: var(--grey-100);
}

.header-btn .material-symbols-outlined {
  font-size: var(--icon-md);
}

/* Filters active: the pill keeps its default look, only the red count badge appears (see
   updateFilterButtonState); a dark fill would clash with the panel-open state of the neighbouring toggles */

/* Drawer open: panel-grey pill */
.header-btn.panel-open {
  background: var(--accent-panel);
  border-color: var(--accent-panel);
  color: var(--white);
}

.header-btn.panel-open .material-symbols-outlined {
  color: var(--white);
}

/* Active-filter badge on the corner of the icon-only Filter button */
.filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--control-2xs);
  height: var(--control-2xs);
  background: var(--primary-red);
  color: var(--white);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  position: absolute;
  top: -4px;
  right: -4px;
}

/* ===== LANGUAGE SELECTOR ===== */
#lang-selector {
  position: relative;
}

.lang-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--space-1);
  background: var(--white);
  border: var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 100;
  overflow: hidden;
  min-width: 48px;
}

.lang-dropdown.open {
  display: flex;
  flex-direction: column;
}

.lang-option {
  padding: var(--space-2) var(--space-4);
  border: none;
  background: transparent;
  font-size: var(--text-sm);
  font-weight: var(--font-normal);
  color: var(--grey-700);
  cursor: pointer;
  text-align: center;
}

.lang-option:hover {
  background: var(--grey-100);
}

.lang-option.active {
  color: var(--primary-red);
}

/* Login (mock: authentication is not part of the prototypes) */
#login-btn {

  background: var(--white);
  border: var(--border-strong);
  width: var(--control-height);
  height: var(--control-height);
  border-radius: var(--radius-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

#login-btn:hover {
  background: var(--grey-100);
}

#login-btn .material-symbols-outlined {
  font-size: var(--icon-lg);
  color: var(--grey-600);
}

/* Phones only: opens the tools panel as a slide-in menu */
.hamburger-btn {
  display: none;
}

/* ===== MAIN CONTENT ===== */
#main {
  flex: 1;
  position: relative;
  display: flex;
  overflow: hidden;
}

/* A vertical split: the active view (map or gallery) above the table dock (.table-split with the
   toggle and the resize handle, then #table-panel). The dock is hidden in the detail and API views. */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* ===== MAP VIEW =====
   Everything that floats over the map (tools menu, object card, basemap switcher, measure display,
   context menu, print preview) is a child of #map, positioned by it and clipped by it (MapLibre sets
   overflow: hidden), so an open or resized table can never cover it. MapLibre's own resize observer
   follows the map's changing height; the table's sizes are CSS (.table-panel). */
#map-view {
  flex: 1;
  position: relative;
  display: none;
  flex-direction: column;
  overflow: hidden;
}

#map-view.active {
  display: flex;
}

#map {
  flex: 1;
  min-height: 0;
  position: relative;
}

/* Map actions are centred inside the map, so docked drawers cannot cover them. */
.map-top-controls {
  position: absolute;
  top: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  width: max-content;
  max-width: calc(100% - 152px); /* touch controls + their margins on either side */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  pointer-events: none;
}

.map-reset-filters {
  max-width: 100%;
  min-height: 44px;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  white-space: normal;
  pointer-events: auto;
}

.map-reset-filters[hidden] { display: none; }
.map-reset-filters .material-symbols-outlined { flex: none; }
.map-reset-filters .map-reset-label-short { display: none; }

/* The centred reset action pushes the tools menu or the object card down only when the two would
   overlap on a narrow map (panel-layout.js measures them and sets the classes); wide maps keep
   the panels at the top. */
@media (min-width: 768px) and (min-height: 501px), (min-width: 768px) and (pointer: fine) {
  #map-view.reset-over-menu #accordion-wrapper {
    top: 64px;
  }
  #map-view.reset-over-card #info-panel {
    --info-panel-top: calc(64px + var(--space-3));
  }
}

@media (max-width: 767px), (max-height: 500px) and (pointer: coarse) {
  .map-reset-filters { padding-inline: var(--space-3); }
  .map-reset-filters .map-reset-label-full { display: none; }
  .map-reset-filters .map-reset-label-short { display: inline; }
}

/* Loading stays below the reset action instead of overlapping it. */
.map-busy {
  display: none;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: var(--veil-light);
  border: var(--border-strong);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  font-size: var(--text-xs);
  color: var(--grey-700);
  pointer-events: none;
}

.map-busy.show {
  display: flex;
}

.map-busy .spinner {
  width: var(--icon-xs);
  height: var(--icon-xs);
  margin-right: 0;
}

/* Inline spinner (buttons, loading rows): currentColor so it works on any background */
.spinner.inline-spinner {
  display: inline-block;
  vertical-align: middle;
  margin-right: var(--space-2);
  flex-shrink: 0;
  border-color: var(--spinner-track);
  border-top-color: currentColor;
}

/* ===== MAPLIBRE CONTROLS ===== */
.maplibregl-ctrl-top-right {
  top: var(--space-3);
  right: var(--space-3);
}

/* All navigation buttons, including mini-map controls, use one size token.
   Change the token for phones/touch instead of competing with custom-button specificity. */
.maplibregl-ctrl-group button {
  width: var(--map-control-size);
  height: var(--map-control-size);
}

@media (max-width: 767px), (pointer: coarse) {
  .maplibregl-ctrl-group {
    --map-control-size: var(--touch-target-min);
  }
}

/* Attribution toggle (ⓘ): a 24px round target whatever enlarges the summary element (browser or touch
   rules); the glyph is centred by assets/icons/material-symbols-outlined.css. Collapsed, the control is
   exactly that circle (MapLibre's content-box padding would make it 28px tall). */
.maplibregl-ctrl-attrib .maplibregl-ctrl-attrib-button {
  width: 24px;
  height: 24px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
}

.maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show) {
  width: 24px;
  min-height: 24px;
  padding: 0;
}

/* MapLibre supplies the group background, border, radius and interaction states. */
.maplibregl-ctrl-group .map-home-btn,
.maplibregl-ctrl-group .map-3d-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.map-home-btn .material-symbols-outlined {
  font-size: var(--icon-lg);
  line-height: 1;
  color: var(--grey-600);
}

.map-3d-btn {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  line-height: 1;
  color: var(--grey-600);
}

.map-3d-btn.active {
  color: var(--primary-red);
}

.map-location-pin {
  font-size: var(--icon-2xl);
  color: var(--primary-red);
  text-shadow: 0 1px 2px var(--white);
}

/* MapLibre popup overrides */
.maplibregl-popup-content {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.maplibregl-popup-close-button {
  font-size: var(--icon-md);
  padding: var(--space-1) var(--space-2);
  color: var(--grey-500);
}

.maplibregl-popup-close-button:hover {
  background: var(--grey-100);
  color: var(--grey-700);
}

/* Floating map widgets keep the app font even when they sit inside the MapLibre container
   (.maplibregl-map sets 12px Helvetica) */
.style-switcher,
.measure-distance-display,
.map-busy,
.map-context-menu,
.print-preview-label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/* ===== STYLE SWITCHER (in #map-view, bottom-right) ===== */
.style-switcher {
  position: absolute;
  bottom: 40px;
  right: 20px;
  z-index: var(--z-panel);
  display: none;
  transition: right var(--transition-slow);
}

.style-switcher.visible {
  display: block;
}

.style-switcher-btn {
  background: var(--white);
  border: 2px solid var(--grey-300);
  border-radius: var(--radius-sm);
  padding: var(--space-1);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  box-shadow: var(--shadow-md);
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.style-switcher-btn:hover {
  border-color: var(--grey-500);
  box-shadow: var(--shadow-lg);
}

.style-switcher-btn.active {
  border-color: var(--primary-red);
  background: var(--grey-100);
}

.style-switcher-btn img {
  width: 80px;
  height: 60px;
  aspect-ratio: 4/3;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.style-switcher-btn span {
  font-size: var(--text-xs);
  color: var(--grey-600);
  font-weight: var(--font-medium);
}

.style-switcher-panel {
  position: absolute;
  bottom: 0;
  right: 100%;
  margin-right: var(--space-3);
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xl);
  padding: var(--space-2);
  display: flex;
  gap: var(--space-2);
  opacity: 0;
  visibility: hidden;
  transform: translateX(10px);
  transition: opacity var(--transition-slow), transform var(--transition-slow), visibility var(--transition-slow);
}

.style-switcher-panel.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.style-option {
  background: var(--white);
  border: 2px solid var(--grey-300);
  border-radius: var(--radius-sm);
  padding: var(--space-1);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  transition: border-color var(--transition-normal), transform var(--transition-fast);
}

@media (hover: hover) {
  .style-option:hover {
    border-color: var(--grey-500);
    transform: translateY(-2px);
  }
}

.style-option.active {
  border-color: var(--primary-red);
  border-width: 3px;
  padding: 3px;
}

.style-option img {
  width: 70px;
  height: 50px;
  aspect-ratio: 7/5;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.style-option span {
  font-size: var(--text-xs);
  color: var(--grey-600);
  font-weight: var(--font-medium);
  white-space: nowrap;
}

.style-option.active span {
  color: var(--primary-red);
  font-weight: var(--font-semibold);
}

/* ===== TOOLS PANEL (accordion + "Menü" toggle) ===== */
/* Desktop/tablet: floating panel at the top left of the map with the toggle attached below it.
   Phones: the panel slides in from the right as the hamburger menu (see the mobile breakpoint). */
#accordion-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--z-panel);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--tools-panel-width); /* the "Menü" toggle stays centred when the panel is collapsed */
  margin: var(--space-3);
  max-height: calc(100% - 60px);
  pointer-events: none;
}

#accordion-wrapper > * {
  pointer-events: auto;
}

#accordion-panel {
  width: var(--tools-panel-width);
  background: var(--accent-panel);
  color: var(--white);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  box-shadow: var(--shadow-md);
}

#accordion-panel.collapsed {
  display: none;
}

.accordion-item {
  border-bottom: 1px solid var(--on-dark-divider);
}

/* No divider under the last item: the phone-menu extras that follow it are also divs, so
   :last-of-type would leave a line under the open content */
.accordion-item:not(:has(~ .accordion-item)) {
  border-bottom: none;
}

.accordion-header {
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  color: inherit;
  font-family: inherit;
  padding: var(--space-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  transition: background var(--transition-normal);
}

.accordion-header:hover {
  background: var(--on-dark-rest);
}

.accordion-header.active {
  background: var(--grey-100);
  color: var(--grey-900);
}

.accordion-arrow {
  transition: transform var(--transition-slow);
  display: flex;
  align-items: center;
}

.accordion-arrow .material-symbols-outlined {
  font-size: var(--icon-md);
}

.accordion-header.active .accordion-arrow {
  transform: rotate(90deg);
}

.accordion-header.active .accordion-arrow .material-symbols-outlined {
  color: var(--grey-900);
}

.accordion-content {
  display: none;
  padding: var(--space-3) var(--space-4);
  background: var(--white);
  font-size: var(--text-sm);
  color: var(--grey-900);
}

.accordion-content.show {
  display: block;
}

#menu-toggle {
  background: var(--grey-900);
  color: var(--white);
  padding: var(--space-2) var(--space-5) var(--space-2) var(--space-3);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-md);
}

#menu-toggle:hover {
  background: var(--grey-700);
}

#menu-toggle .material-symbols-outlined {
  font-size: var(--icon-md);
}

/* Phone menu chrome inside the panel (header with title and close button, footer links); hidden on desktop */
.mobile-menu-header,
.mobile-menu-extras,
.mobile-tree-accordion,
.mobile-menu-backdrop {
  display: none;
}

.mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  z-index: calc(var(--z-menu) - 1);
}

.mobile-menu-backdrop.active {
  display: block;
}

.mobile-menu-title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--grey-900);
}

.mobile-menu-close {
  width: var(--touch-target-min);
  height: var(--touch-target-min);
}

.mobile-menu-divider {
  height: 1px;
  background: var(--grey-200);
  margin: var(--space-3) 0;
}

/* Menu entries inside the phone menu (Standorte, share) */
.mobile-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: none;
  border-bottom: var(--border-default);
  background: var(--white);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--grey-800);
  cursor: pointer;
  text-align: left;
}

.mobile-menu-item:hover {
  background: var(--grey-50);
}

.mobile-menu-item .material-symbols-outlined {
  color: var(--grey-500);
  font-size: var(--icon-md);
}

/* Language pills inside the phone menu (the header selector is hidden on phones) */
.mobile-menu-lang {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
}

.mobile-menu-lang > .material-symbols-outlined {
  color: var(--grey-500);
}

.mobile-lang-pills {
  display: flex;
  gap: var(--space-1);
}

.mobile-lang-pill {
  padding: var(--space-2) var(--space-3);
  border: var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--grey-600);
  cursor: pointer;
  min-width: 36px;
  text-align: center;
}

.mobile-lang-pill.active {
  background: var(--grey-900);
  color: var(--white);
  border-color: var(--grey-900);
}

/* Footer links inside the phone menu (the footer is hidden on phones) */
.mobile-menu-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-2) var(--space-4);
}

.mobile-menu-links a {
  font-size: var(--text-xs);
  color: var(--interactive-blue);
  text-decoration: none;
}

.mobile-menu-links a:hover {
  text-decoration: underline;
}

/* ===== PANEL FORMS (print, measure, export) ===== */
.print-form {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-3);
  align-items: center;
  padding: var(--space-3);
}

.print-form-row {
  display: contents;
}

.print-form-row label {
  font-size: var(--text-sm);
  color: var(--grey-700);
  white-space: nowrap;
}

.print-select {
  width: 100%;
  min-width: 0;
}

.print-checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--grey-700);
  cursor: pointer;
  grid-column: 1 / -1;
}

/* Full-width action button of a panel (PDF erstellen, Distanz messen, Exportieren) */
.panel-btn {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--white);
  background: var(--grey-900);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.panel-btn:hover {
  background: var(--grey-700);
}

.panel-btn:active {
  background: var(--grey-900);
}

.panel-btn:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

.panel-btn .material-symbols-outlined {
  font-size: var(--icon-md);
}

/* Print progress bar */
.print-progress {
  grid-column: 1 / -1;
  margin-top: var(--space-2);
}

.print-progress-bar {
  width: 100%;
  height: var(--space-1-5);
  background: var(--grey-200);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.print-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--interactive-blue);
  border-radius: var(--radius-sm);
  transition: width var(--transition-slow);
}

.print-progress-text {
  font-size: var(--text-xs);
  color: var(--grey-600);
  margin-top: var(--space-1);
}

/* ===== PRINT CROP PREVIEW ===== */
.print-preview-overlay {
  position: absolute;
  inset: 0;
  z-index: var(--z-map-overlay);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.print-preview-overlay.active {
  opacity: 1;
}

.print-preview-overlay svg {
  width: 100%;
  height: 100%;
}

.print-preview-crop {
  position: absolute;
  border: 2px dashed var(--primary-red);
  box-shadow: 0 0 0 2px var(--on-dark-muted);
  pointer-events: none;
}

/* Scale badge above the crop (top set by print.js; inside the map when the crop overflows it) */
.print-preview-label {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary-red);
  color: var(--white);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}

/* ===== GEOKATALOG TREE ===== */
#geokatalog-accordion {
  position: relative;
}

/* "Thema wechseln": shown at the right of the Geokatalog header, but a sibling of the header
   button (a button cannot contain a button); opens the topic modal */
.geokatalog-theme-switch {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 1;
  padding: var(--space-1) var(--space-2);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-normal);
  color: var(--on-dark-text);
  cursor: pointer;
  white-space: nowrap;
}

.geokatalog-theme-switch:hover,
.geokatalog-theme-switch:focus-visible {
  background: var(--on-dark-hover);
  color: var(--white);
}

#geokatalog-accordion.expanded .geokatalog-theme-switch {
  color: var(--grey-600);
}

#geokatalog-accordion.expanded .geokatalog-theme-switch:hover,
#geokatalog-accordion.expanded .geokatalog-theme-switch:focus-visible {
  background: var(--grey-200);
  color: var(--grey-900);
}

.geokatalog-content {
  padding: 0 !important;
}

/* Full height when Geokatalog is expanded */
#geokatalog-accordion.expanded {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#geokatalog-accordion.expanded .accordion-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#geokatalog-accordion.expanded .geokatalog-tree {
  flex: 1;
  max-height: none;
}

.geokatalog-tree {
  max-height: 450px;
  overflow-y: auto;
  padding: 0;
}

.geokatalog-tree::-webkit-scrollbar {
  width: 6px;
}

.geokatalog-tree::-webkit-scrollbar-track {
  background: var(--grey-100);
}

.geokatalog-tree::-webkit-scrollbar-thumb {
  background: var(--grey-300);
  border-radius: var(--radius-sm);
}

.catalog-item {
  user-select: none;
}

.catalog-node {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-3);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--grey-900);
  border-bottom: var(--border-strong);
}

.catalog-node:hover {
  background: var(--grey-100);
}

.catalog-node .node-arrow {
  width: var(--control-2xs);
  height: var(--control-2xs);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--space-2);
  color: var(--grey-500);
  position: relative;
}

.catalog-node .node-arrow::after {
  content: '';
  position: absolute;
  inset: -12px;
}

.catalog-node .node-arrow .material-symbols-outlined {
  font-size: var(--icon-sm);
  transition: transform var(--transition-fast);
}

.catalog-node.expanded .node-arrow .material-symbols-outlined {
  transform: rotate(90deg);
}

.catalog-node.leaf .node-arrow {
  display: none;
}

/* Leaf node with checkbox — accent-color inherited from tokens.css base rule */
.catalog-node .node-checkbox {
  margin: 0;
  margin-right: var(--space-3);
  flex-shrink: 0;
}

.catalog-node .node-label {
  flex: 1;
}

.catalog-node .node-info {
  width: var(--control-2xs);
  height: var(--control-2xs);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: var(--space-2);
  color: var(--grey-600);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
}

.catalog-node .node-info .material-symbols-outlined {
  font-size: var(--icon-md);
}

.catalog-node .node-info::after {
  content: '';
  position: absolute;
  inset: -12px;
}

.catalog-node .node-info:hover {
  color: var(--grey-900);
}

.catalog-children {
  display: none;
  margin-left: var(--space-5);
}

.catalog-item.expanded > .catalog-children {
  display: block;
}

.geokatalog-error {
  text-align: center;
  padding: var(--space-5);
  color: var(--primary-red);
  font-size: var(--text-xs);
}

.geokatalog-retry {
  margin-top: var(--space-3);
  padding: var(--space-1) var(--space-3);
  border: var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--grey-800);
  font-size: var(--text-xs);
  cursor: pointer;
}

.geokatalog-retry:hover {
  background: var(--grey-100);
  border-color: var(--grey-500);
}

/* ===== ACTIVE LAYERS ===== */
.layer-group {
  padding: 0;
}

.layer-group + .layer-group {
  margin-top: var(--space-2);
}

.layer-group-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--grey-500);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: var(--space-2) var(--space-3) var(--space-1);
}

.active-layers-list {
  padding: 0;
}

.active-layers-empty {
  text-align: center;
  padding: var(--space-4);
  color: var(--grey-500);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

.active-layer-item {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-3);
  border-bottom: var(--border-strong);
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--grey-900);
}

.active-layer-item:last-child {
  border-bottom: none;
}

.active-layer-item:hover {
  background: var(--grey-100);
}

.active-layer-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--control-2xs);
  height: var(--control-2xs);
  position: relative;
  border: none;
  background: var(--grey-600);
  cursor: pointer;
  border-radius: var(--radius-full);
  color: var(--white);
  flex-shrink: 0;
  padding: 0;
}

.active-layer-remove::after {
  content: '';
  position: absolute;
  inset: -12px;
}

.active-layer-remove:hover {
  background: var(--grey-700);
}

.active-layer-remove .material-symbols-outlined {
  font-size: var(--icon-xs);
  font-weight: var(--font-semibold);
}

/* accent-color inherited from tokens.css base rule */
.active-layer-checkbox {
  border: 2px solid var(--grey-500);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.active-layer-title {
  flex: 1;
  color: var(--grey-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
}

/* ===== IDENTIFY POPUP ===== */
.identify-popup {
  font-family: inherit;
}

.identify-popup-header {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--grey-900);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: var(--border-default);
}

.identify-popup-content {
  max-height: 200px;
  overflow-y: auto;
}

.identify-prop {
  font-size: var(--text-xs);
  padding: var(--space-1) 0;
  line-height: var(--leading-snug);
}

.identify-prop-key {
  color: var(--grey-500);
  font-weight: var(--font-medium);
}

.identify-prop-value {
  color: var(--grey-800);
}

/* ===== INFO PANEL ===== */
#info-panel {
  --info-panel-top: var(--space-3);
  position: absolute;
  top: var(--info-panel-top);
  right: 60px; /* clear of the map controls */
  width: 320px;
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  z-index: var(--z-panel);
  display: none;
  max-height: calc(100% - var(--info-panel-top) - var(--space-3)); /* of #map: never into the table */
  flex-direction: column;
  overflow: hidden;
}

#info-panel.show {
  display: flex;
}

/* Preview image: buildings only (#info-panel.has-preview, set by the selection code) */
#info-preview-image {
  display: none;
  height: 140px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--grey-100);
}

#info-panel.has-preview #info-preview-image {
  display: block;
}

#info-header {
  flex-shrink: 0;
  background: var(--grey-100);
  padding: var(--space-3) var(--space-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: var(--border-strong);
}

#info-header-title {
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
}

#info-header-actions {
  display: flex;
  gap: var(--space-2);
}

#info-body {
  padding: var(--space-4);
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.info-row {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
}

.info-label {
  color: var(--grey-600);
  width: 120px;
  max-width: 40%;
  min-width: 0;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.info-value {
  color: var(--grey-900);
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.info-footer {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-subtle);
  position: sticky;
  bottom: calc(-1 * var(--space-4));
  background: var(--white);
  padding-bottom: var(--space-4);
  margin-bottom: calc(-1 * var(--space-4));
}

.info-detail-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: var(--grey-900);
  color: var(--white);
  text-decoration: none;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  transition: background var(--transition-normal);
  cursor: pointer;
  border: none;
  width: 100%;
}

.info-detail-link:hover {
  background: var(--grey-700);
}

.info-detail-link .material-symbols-outlined {
  font-size: var(--icon-md);
}

/* Short screens retain all fields in the scrollable card; only the photo shrinks. */
@media (max-height: 800px) {
  #info-preview-image { height: 80px; }
  /* With the table open, reserve the remaining card height for fields and its action. */
  .main-content:has(#table-panel:not(.collapsed)) #info-panel.has-preview #info-preview-image { display: none; }
}

/* Grab handle of bottom sheets (36 × 4 px pill, phones only) */
.sheet-handle {
  display: none;
  width: 36px;
  height: var(--space-1);
  margin: var(--space-2) auto 0;
  border-radius: var(--radius-full);
  background: var(--grey-300);
  flex-shrink: 0;
}

/* ===== MAP CONTEXT MENU ===== */
.map-context-menu {
  position: absolute;
  background: var(--white);
  border: var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 200px;
  z-index: var(--z-popover);
  display: none;
  overflow: hidden;
}

.map-context-menu.show {
  display: block;
}

/* Edge detection classes for flipping menu position */
.map-context-menu.flip-horizontal {
  transform: translateX(-100%);
}

.map-context-menu.flip-vertical {
  transform: translateY(-100%);
}

.map-context-menu.flip-horizontal.flip-vertical {
  transform: translate(-100%, -100%);
}

.context-menu-coords.copied {
  background: var(--status-active-bg);
  color: var(--status-active-text);
}

.context-menu-item:last-child {
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* Measure mode active state */
.context-menu-item.measure-active {
  background: var(--status-planning-bg);
  color: var(--status-planning-text);
}

/* ===== MEASURE DISTANCE DISPLAY ===== */
.measure-distance-display {
  position: absolute;
  bottom: 56px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: none;
  flex-direction: column;
  width: 280px;
  z-index: var(--z-header);
  overflow: hidden;
}

.measure-distance-display.show {
  display: flex;
}

.measure-distance-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--grey-50);
  border-bottom: var(--border-default);
  font-weight: var(--font-medium);
  color: var(--grey-900);
}

.measure-distance-header .material-symbols-outlined {
  font-size: var(--icon-md);
  color: var(--grey-600);
}

.measure-distance-close {
  margin-left: auto;
}

.measure-distance-info {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  color: var(--grey-600);
  border-bottom: var(--border-subtle);
}

.measure-distance-result {
  padding: var(--space-3) var(--space-4);
}

.measure-result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-1) 0;
}

.measure-result-label {
  font-size: var(--text-sm);
  color: var(--grey-600);
}

.measure-result-value {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--grey-900);
}

/* Distance labels on map segments */
.measure-label {
  background: var(--white);
  border: var(--border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--grey-800);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
  pointer-events: none;
}

/* Measure marker styles */
.measure-marker {
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: var(--radius-full);
  background: var(--white);
  border: 2px solid var(--grey-900);
  cursor: pointer;
  transition: transform var(--transition-fast);
  position: relative;
}

.measure-marker::after {
  content: '';
  position: absolute;
  inset: -17px;
}

.measure-marker:hover {
  transform: scale(1.3);
}

.measure-marker.dragging {
  cursor: grabbing;
}

/* ===== FILTER DRAWER ===== */
#filter-panel {
  container: filter-drawer / inline-size;
  position: relative;
  width: 0;
  min-width: 0;
  height: 100%;
  background: var(--white);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width var(--transition-slow), min-width var(--transition-slow);
  flex-shrink: 0;
}

/* Disable transitions during resize for smooth dragging */
#filter-panel.resizing {
  transition: none;
}

/* ===== SIDE PANEL RESIZE GRIP (tree panel, filter drawer) ===== */
/* A zero-width flex sibling on the panel's edge: the 8px hit area (::before) and the three-line glyph
   (::after) straddle the border line exactly — inside the panel they would be clipped by its overflow.
   Blue while hovered or dragged. z-index: above both neighbours, below the header (--z-panel). */
.panel-resize-handle {
  position: relative;
  width: 0;
  flex: none;
  align-self: stretch;
  z-index: var(--z-panel);
  touch-action: none; /* dragging must not scroll the page on touch screens */
}

.panel-resize-handle::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -4px;
  width: 8px;
  cursor: ew-resize;
  transition: background var(--transition-fast);
}

.panel-resize-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 5px;
  height: 18px;
  transform: translate(-50%, -50%);
  background: repeating-linear-gradient(90deg, var(--grey-500) 0 1px, transparent 1px 2px);
  pointer-events: none;
}

.panel-resize-handle:hover::before,
.panel-resize-handle.dragging::before {
  background: var(--interactive-blue);
}

.panel-resize-handle:hover::after,
.panel-resize-handle.dragging::after {
  background: repeating-linear-gradient(90deg, var(--white) 0 1px, transparent 1px 2px);
}

/* No grip while the panel is closed */
#tree-panel:not(.open) + .panel-resize-handle,
.panel-resize-handle:has(+ #filter-panel:not(.open)) {
  display: none;
}

#filter-panel.open {
  width: var(--drawer-width);
  min-width: var(--drawer-min-width);
  max-width: var(--drawer-max-width);
  border-left: var(--border-strong);
}

/* The drawer header is a .panel-header (tokens.css) */
.filter-panel-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* "Zurücksetzen" in the drawer header: a labelled tertiary button at the header's 32px height */
.filter-panel-reset {
  min-height: var(--control-sm);
  padding: var(--space-1) var(--space-2);
  gap: var(--space-1);
  white-space: nowrap;
}

.filter-panel-reset .material-symbols-outlined {
  font-size: var(--icon-lg);
}

/* One size for the same navigation/reset action in headers, panels and map. */
.material-symbols-outlined.action-icon {
  font-size: var(--icon-lg);
  flex: none;
}

/* Keep the title and both actions available in narrow/resized drawers.
   The visually hidden reset label still supplies its accessible name. */
@container filter-drawer (max-width: 380px) {
  .filter-panel-reset > [data-i18n] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.filter-panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

/* Filter sections (accordion inside drawer) */
.filter-section {
  border-bottom: var(--border-default);
}

.filter-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  background: var(--white);
  transition: background var(--transition-normal);
}

.filter-section-header:hover {
  background: var(--grey-50);
}

.filter-section-title {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--grey-900);
}

.filter-section-arrow {
  display: flex;
  align-items: center;
  transition: transform var(--transition-normal);
}

.filter-section-arrow .material-symbols-outlined {
  font-size: var(--icon-lg);
  color: var(--grey-600);
}

.filter-section.open .filter-section-arrow {
  transform: rotate(180deg);
}

.filter-section-content {
  display: none;
  padding: 0 var(--space-5) var(--space-4) var(--space-5);
}

.filter-section.open .filter-section-content {
  display: block;
}

.filter-option {
  display: flex;
  align-items: center;
  padding: var(--space-2) 0;
}

.filter-option input[type="checkbox"] {
  margin-right: var(--space-3);
}

.filter-option label {
  font-size: var(--text-sm);
  color: var(--grey-900);
  cursor: pointer;
  flex: 1;
}

/* Count of objects per filter option ("Verwaltungsgebäude 2") */
.filter-option-count {
  margin-left: var(--space-1);
  color: var(--grey-500);
  font-variant-numeric: tabular-nums;
}

/* Phones only: sticky footer with the live result count and reset (shown by the mobile breakpoint) */
.filter-panel-footer {
  display: none;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  border-top: var(--border-default);
  background: var(--white);
  flex-shrink: 0;
}

.filter-panel-footer .btn-primary {
  flex: 1;
  justify-content: center;
}

/* ===== LOCATION TREE (left panel) ===== */
#tree-panel {
  position: relative;
  width: 0;
  min-width: 0;
  height: 100%;
  background: var(--white);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width var(--transition-slow), min-width var(--transition-slow);
  flex-shrink: 0;
}

#tree-panel.open {
  width: var(--tree-panel-width);
  min-width: var(--tree-panel-width);
  border-right: var(--border-strong);
}

#tree-panel.resizing {
  transition: none;
}

.tree-panel-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2) var(--space-2) var(--space-4);
}

.tree,
.tree-children {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tree-children[hidden] {
  display: none;
}

.tree-node {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: var(--radius-sm);
}

.tree-node:hover {
  background: var(--grey-50);
}

/* Fold control outside the row: choosing a node and unfolding it are two intentions */
.tree-fold,
.tree-fold-slot {
  position: absolute;
  left: calc(var(--tree-ind) - var(--control-xs));
  top: 0;
  bottom: 0;
  width: var(--control-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--grey-500);
  cursor: pointer;
  border-radius: var(--radius-sm);
  z-index: 1;
}

.tree-fold:hover {
  background: var(--grey-200);
  color: var(--grey-900);
}

.tree-fold .material-symbols-outlined {
  font-size: var(--icon-md);
  transition: transform var(--transition-fast);
}

.tree-fold[aria-expanded="true"] .material-symbols-outlined {
  transform: rotate(90deg);
}

.tree-row {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 36px;
  padding: var(--space-1) var(--space-2) var(--space-1) var(--tree-ind);
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--grey-900);
  text-align: left;
  cursor: pointer;
}

.tree-icon {
  flex: none;
  font-size: var(--icon-md);
  color: var(--grey-500);
}

.tree-id {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--grey-600);
}

.tree-label {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tree-count {
  flex: none;
  margin-left: auto;
  padding-left: var(--space-2);
  font-size: var(--text-xs);
  color: var(--grey-500);
  font-variant-numeric: tabular-nums;
}

/* Selected branch: grey path with a left rule, bold active node (not colour only) */
.tree-node.is-path {
  background: var(--grey-50);
  box-shadow: inset var(--accent-bar) 0 0 var(--grey-300);
}

.tree-node.is-active {
  background: var(--grey-100);
  box-shadow: inset var(--accent-bar) 0 0 var(--grey-700);
}

.tree-node.is-active .tree-row {
  font-weight: var(--font-semibold);
}

.tree-node.is-active .tree-icon,
.tree-node.is-active .tree-count {
  color: var(--grey-800);
}

.tree-empty {
  padding: var(--space-4);
  font-size: var(--text-xs);
  color: var(--grey-500);
  text-align: center;
}

/* ===== LOADING ROW (inline "loading…" / error text with the small spinner: catalog, layer info, API docs) ===== */
.loading-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-8);
  text-align: center;
  color: var(--grey-500);
}

.loading-row--error {
  flex-direction: column;
  color: var(--status-error-text);
}

/* ===== TOOLBAR (tables) ===== */
.toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-bottom: var(--border-default);
  background: var(--white);
  flex-shrink: 0;
  min-height: 44px;
}

.toolbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.toolbar-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--white);
  border: var(--border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  min-width: 250px;
  min-height: var(--control-sm);
}

.toolbar-search .material-symbols-outlined {
  font-size: var(--icon-md);
  color: var(--grey-500);
}

.toolbar-search input {
  border: none;
  outline: none;
  font-size: var(--text-xs);
  width: 100%;
  min-width: 0;
  background: transparent;
}

.toolbar-search input::placeholder {
  color: var(--grey-500);
}

.toolbar-search-clear[hidden] {
  display: none;
}

.list-toolbar-search {
  min-width: 280px;
}

/* Filter pills in the toolbar */
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1-5);
  align-items: center;
}

.filter-pills:empty {
  display: none;
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  color: var(--grey-700);
  background: var(--grey-100);
  border: var(--border-strong);
  border-radius: var(--radius-full);
  white-space: nowrap;
  line-height: 1;
}

.filter-pill-label {
  color: var(--grey-600);
  margin-right: var(--space-1);
}

.filter-pill-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-sm);
  height: var(--icon-sm);
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  border-radius: var(--radius-full);
  color: var(--grey-400);
  font-family: 'Material Symbols Outlined';
  font-size: var(--icon-xs);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.filter-pill-remove:hover {
  color: var(--grey-900);
  background: var(--grey-200);
}

.filter-pills-reset {
  display: inline-flex;
  align-items: center;
  gap: var(--space-0-5);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  color: var(--primary-red);
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
}

.filter-pills-reset:hover {
  text-decoration: underline;
}

/* ===== DROPDOWNS ===== */
.dropdown-container {
  position: relative;
}

.dropdown-btn {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: var(--white);
  border: var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--grey-700);
  cursor: pointer;
  min-height: var(--control-sm);
  transition: background var(--transition-normal), border-color var(--transition-normal);
}

.dropdown-btn:hover {
  background: var(--grey-100);
  border-color: var(--grey-500);
}

.dropdown-btn .material-symbols-outlined {
  font-size: var(--icon-sm);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--space-1);
  background: var(--white);
  border: var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 200px;
  z-index: var(--z-popover);
  display: none;
}

.dropdown-menu.show {
  display: block;
}

.dropdown-menu-header {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--grey-500);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border-bottom: var(--border-subtle);
}

.dropdown-menu-header:not(:first-child) {
  border-top: var(--border-default);
  margin-top: var(--space-1);
}

.dropdown-menu-item,
.context-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--grey-700);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.dropdown-menu-item:hover,
.context-menu-item:hover {
  background: var(--grey-50);
}

.dropdown-menu-item .material-symbols-outlined {
  font-size: var(--icon-md);
  color: var(--grey-500);
}

.dropdown-menu-toggle-row {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
}

.dropdown-toggle-btn {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--grey-700);
  background: var(--grey-100);
  border: var(--border-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.dropdown-toggle-btn:hover {
  background: var(--grey-200);
  border-color: var(--grey-300);
}

/* Columns dropdown — wide, scrollable */
.columns-dropdown {
  min-width: 280px;
  max-width: 320px;
}

.columns-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-subtle);
}

.columns-search .material-symbols-outlined {
  font-size: var(--icon-sm);
  color: var(--grey-400);
}

.columns-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  font-size: var(--text-sm);
  background: transparent;
}

.columns-list {
  max-height: 400px;
  overflow-y: auto;
  padding: var(--space-1) 0;
}

.columns-group-label {
  padding: var(--space-2) var(--space-4) var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--grey-500);
}

.columns-list .dropdown-menu-item {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
}

/* ===== LIST TABLE ===== */
.list-table-container {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  background: var(--white);
}

.list-table-wrapper {
  overflow-x: auto;
  max-width: 100%;
  scrollbar-width: thin;
  scrollbar-color: var(--grey-300) transparent;
}

.list-table-wrapper::-webkit-scrollbar {
  height: 6px;
}

.list-table-wrapper::-webkit-scrollbar-track {
  background: transparent;
}

.list-table-wrapper::-webkit-scrollbar-thumb {
  background: var(--grey-300);
  border-radius: var(--radius-full);
}

.list-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: var(--grey-400);
}

.list-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.list-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--grey-100);
}

.list-table th {
  padding: var(--space-2) var(--space-4);
  text-align: left;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--grey-700);
  border-bottom: var(--border-strong);
  white-space: nowrap;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.list-table th:hover {
  color: var(--primary-red);
}

.list-table th .material-symbols-outlined {
  font-size: var(--icon-sm);
  color: var(--grey-500);
  vertical-align: middle;
  margin-left: var(--space-0-5);
}

/* Sorted column: table.js sets sort-asc / sort-desc (and aria-sort) on the header cell */
.list-table th.sort-asc,
.list-table th.sort-desc,
.list-table th.sort-asc .material-symbols-outlined,
.list-table th.sort-desc .material-symbols-outlined {
  color: var(--primary-red);
}

.list-table td {
  padding: var(--space-2) var(--space-4);
  border-bottom: var(--border-subtle);
  color: var(--grey-800);
  white-space: nowrap;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-table tbody tr {
  cursor: pointer;
}

.list-table tbody tr:hover td {
  background: var(--grey-50);
}

.list-table tbody tr.row-active td {
  background: var(--primary-red-tint);
}

.list-table tbody tr.row-active:hover td {
  background: var(--primary-red-tint-hover);
}

.table-empty-cell {
  text-align: center;
  padding: var(--space-6);
  color: var(--grey-500);
}

/* Reusable table component: widths come from semantic presets in data-table.js. */
.data-table {
  table-layout: fixed;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.data-table th,
.data-table td {
  box-sizing: border-box;
  padding: var(--space-2) var(--space-4);
  max-width: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  text-align: left;
}
.data-table th {
  background: var(--grey-100);
  border-bottom: var(--border-strong);
  color: var(--grey-700);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
}
.data-table td { border-bottom: var(--border-subtle); color: var(--grey-800); }
.data-table tbody tr:hover td { background: var(--grey-50); }
.data-table tbody tr.selected td { background: var(--status-planning-bg); }
.data-table .col-checkbox { text-align: center; padding-inline: var(--space-2); }
.data-table .col-checkbox input[type="checkbox"] { display: block; margin: 0 auto; }
.data-table .table-spacer { padding: 0; cursor: default; }
.data-table [data-width="number"],
.data-table [data-width="amount"],
.data-table [data-width="year"] { text-align: right; font-variant-numeric: tabular-nums; }
.data-table [data-width="date"],
.data-table [data-width="phone"] { font-variant-numeric: tabular-nums; }
.table-cell-content,
.table-column-label {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.table-sort-button {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}
.table-sort-button .sort-icon { flex: 0 0 auto; font-size: var(--icon-sm); color: var(--grey-500); }
.data-table [data-width="number"] .table-sort-button,
.data-table [data-width="amount"] .table-sort-button,
.data-table [data-width="year"] .table-sort-button { justify-content: flex-end; }
.data-table th.sort-asc, .data-table th.sort-desc,
.data-table th.sort-asc .sort-icon, .data-table th.sort-desc .sort-icon { color: var(--primary-red); }
.table-sort-button:focus-visible { outline: 2px solid var(--primary-red); outline-offset: 4px; }

/* .status-badge extends .badge (tokens.css) — colour variants only */
.status-badge.status-active {
  background: var(--status-active-bg);
  color: var(--status-active-text);
}

.status-badge.status-renovation {
  background: var(--status-renovation-bg);
  color: var(--status-renovation-text);
}

.status-badge.status-planning {
  background: var(--status-planning-bg);
  color: var(--status-planning-text);
}

.status-badge.status-inactive,
.status-badge.status-expired {
  background: var(--status-inactive-bg);
  color: var(--status-inactive-text);
}

.status-badge.status-terminated {
  background: var(--status-warning-bg);
  color: var(--status-warning-text);
}

/* ===== PAGINATION ===== */
.pagination-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-1) var(--space-4);
  border-top: var(--border-default);
  background: var(--white);
  font-size: var(--text-xs);
  color: var(--grey-600);
  flex-shrink: 0;
}

.pagination-rows {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.pagination-rows select {
  padding: var(--space-1) var(--space-1);
  border: var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: var(--text-xs);
  color: var(--grey-700);
  cursor: pointer;
}

.pagination-rows select:hover {
  border-color: var(--grey-500);
}

.pagination-info {
  flex: 1;
  font-weight: var(--font-medium);
}

.pagination-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.pagination-page-info {
  font-weight: var(--font-medium);
  white-space: nowrap;
  padding: 0 var(--space-2);
}

.pagination-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--control-sm);
  min-height: var(--control-sm);
  border: var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--grey-700);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.pagination-btn:hover:not(:disabled) {
  background: var(--grey-100);
  border-color: var(--grey-500);
}

.pagination-btn:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

.pagination-btn .material-symbols-outlined {
  font-size: var(--icon-md);
}

/* ===== TABLE PANEL (below the map, toggle inside #map) ===== */
.table-panel {
  height: clamp(280px, 40vh, 360px);
  max-height: min(75%, max(0px, calc(100% - 160px)));
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-top: var(--border-default);
  transition: height var(--transition-slow);
  position: relative;
  z-index: 7;
}

.table-panel.collapsed {
  height: 0;
  border-top: none;
}

.table-panel .list-table-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.table-panel .list-table-wrapper {
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
}

/* Table dock: the split bar between the active view and the table. Its height is the resize
   handle (hidden while the table is collapsed), the toggle floats above it over the view. */
.table-split {
  position: relative;
  flex-shrink: 0;
  z-index: 7;
}

#detail-view.active ~ .table-split,
#detail-view.active ~ .table-panel,
#api-docs-view.active ~ .table-split,
#api-docs-view.active ~ .table-panel {
  display: none;
}

/* Table toggle button */
.tbl-toggle {
  position: absolute;
  bottom: calc(100% + var(--space-3));
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--grey-900);
  border: none;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  font-family: var(--font-sans); /* sits inside the MapLibre container (Helvetica) */
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--white);
  transition: background var(--transition-normal), box-shadow var(--transition-normal);
}

.tbl-toggle:hover {
  background: var(--grey-700);
  box-shadow: var(--shadow-lg);
}

.tbl-toggle .material-symbols-outlined {
  font-size: var(--icon-md);
  transition: transform var(--transition-slow);
}

.tbl-toggle.collapsed .material-symbols-outlined {
  transform: rotate(180deg);
}

/* Resize handle between map and table */
.tbl-resize-handle {
  flex-shrink: 0;
  height: var(--space-1-5);
  cursor: ns-resize;
  background: var(--grey-200);
  position: relative;
  z-index: 10;
  transition: background var(--transition-normal);
  touch-action: none;
}

.tbl-resize-handle:hover,
.tbl-resize-handle:focus-visible,
.tbl-resize-handle.dragging {
  background: var(--accent-panel);
}

/* Table tabs (Gebäude / Grundstücke / Bodenabdeckung) */
.table-tabs {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}

.table-tab {
  padding: var(--space-1) var(--space-4);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--grey-500);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.table-tab:hover {
  color: var(--grey-700);
}

.table-tab.active {
  color: var(--primary-red);
  border-bottom-color: var(--primary-red);
}

.table-tab-content {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.table-tab-content.active {
  display: flex;
}

/* ===== GALLERY VIEW ===== */
#gallery-view {
  flex: 1;
  min-width: 0;
  min-height: 0; /* scrolls above the table dock */
  display: none;
  background: var(--grey-50);
  overflow-y: auto;
  padding: var(--space-6);
}

#gallery-view.active {
  display: block;
}

.gallery-result-count {
  font-size: var(--text-xs);
  color: var(--grey-500);
  padding: 0 var(--space-6) var(--space-2);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-6);
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.gallery-card {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
  cursor: pointer;
}

/* Lift only for devices that can hover; on touch the lifted state would stick after a tap */
@media (hover: hover) {
  .gallery-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
  }
}

.gallery-image {
  height: 180px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.gallery-image .material-symbols-outlined {
  font-size: var(--icon-hero);
  color: var(--grey-300);
}

.gallery-image-label {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background: var(--scrim);
  color: var(--white);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
}

.gallery-content {
  padding: var(--space-4);
}

.gallery-title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--grey-900);
  margin-bottom: var(--space-1);
  line-height: var(--leading-snug);
}

.gallery-subtitle {
  font-size: var(--text-sm);
  color: var(--grey-600);
  margin-bottom: var(--space-3);
}

.gallery-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.gallery-tag {
  background: var(--grey-100);
  color: var(--grey-600);
}

.gallery-pagination {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) 0;
  font-size: var(--text-sm);
  color: var(--grey-600);
}

/* ===== VIEW NAV (sticky bar above a page view: breadcrumb left, actions right) ===== */
/* The detail page and the API documentation of both prototypes share this bar. The inner row
   (.detail-header-inner) is as wide as the content below it (--view-nav-max-width per view). */
.view-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--white);
  border-bottom: var(--border-strong);
  padding: var(--space-3) var(--page-gutter);
}

.view-nav .detail-header-inner {
  max-width: var(--view-nav-max-width, var(--content-max-width));
  margin: 0 auto;
}

/* ===== API DOCS VIEW (Swagger UI host) ===== */
#api-docs-view {
  display: none;
  flex: 1;
}

#api-docs-view.active {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* Same gutter as the view nav, so the title lines up with the breadcrumb at every width */
.api-docs-content {
  max-width: calc(var(--content-max-width) + 2 * var(--page-gutter));
  width: 100%;
  margin: 0 auto;
  padding: var(--space-6) var(--page-gutter);
  box-sizing: border-box;
}


/* Swagger UI inside the app: no outer box, tighter spacing, app colours for links */
.swagger-ui-host .swagger-ui .information-container,
.swagger-ui-host .swagger-ui .scheme-container {
  padding: 0;
  margin: 0;
  background: transparent;
  box-shadow: none;
}

.swagger-ui-host .swagger-ui .info {
  margin: var(--space-4) 0;
}

.swagger-ui-host .swagger-ui .info .title small {
  vertical-align: middle;
}

/* The page header already links to swagger.json (translated); hide Swagger's own link */
.swagger-ui-host .swagger-ui .info hgroup.main > a {
  display: none;
}

.swagger-ui-host .swagger-ui .wrapper {
  padding: 0;
}

.swagger-ui-host .swagger-ui .opblock-tag {
  font-size: var(--text-lg);
}

.swagger-ui-host .swagger-ui a {
  color: var(--interactive-blue);
}

/* ===== DETAIL VIEW (shared parts) ===== */
#detail-view {
  flex: 1;
  min-width: 0;
  display: none;
  flex-direction: column;
  background: var(--grey-50);
  overflow: hidden;
}

#detail-view.active {
  display: flex;
}

/* Page scroll mode: the detail page scrolls with the document, not inside #main */
body.detail-active {
  height: auto;
  min-height: 100vh;
  min-height: 100dvh; /* short tabs (few rows): #main still stretches and the footer stays at the bottom */
  overflow: auto;
  background: var(--grey-50);
}

body.detail-active #main,
body.detail-active .main-content {
  overflow: visible;
}

body.detail-active #detail-view {
  overflow: visible;
  padding-bottom: var(--space-8);
}

.detail-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--grey-600);
  min-width: 0;
}

.breadcrumb .material-symbols-outlined {
  font-size: var(--icon-md);
  color: var(--grey-500);
}

.breadcrumb a {
  color: var(--grey-700);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--grey-900);
  text-decoration: underline;
}

.breadcrumb span.current {
  color: var(--grey-900);
  font-weight: var(--font-medium);
}

.detail-header-actions {
  display: flex;
  gap: var(--space-4);
  flex-shrink: 0;
}

.btn-back {
  background: var(--white);
  color: var(--grey-900);
  border: var(--border-strong);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-sm);
  line-height: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.btn-back:hover {
  background: var(--grey-100);
  border-color: var(--grey-500);
}

.btn-back .material-symbols-outlined {
  font-size: var(--icon-sm);
}

/* Tab strip: scrolls horizontally whenever it is narrower than its tabs (phones, a docked panel beside
   the detail page); the active tab is scrolled into view by ui.js */
.detail-tabs {
  background: var(--white);
  border-bottom: var(--border-strong);
  padding: 0 var(--space-6);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

.detail-tabs::-webkit-scrollbar {
  display: none;
}

.detail-tabs-inner {
  max-width: var(--content-max-width);
  min-width: max-content;
  margin: 0 auto;
  display: flex;
  gap: 0;
}

.detail-tab {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-5);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--grey-500);
  cursor: pointer;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  white-space: nowrap;
  transition: color var(--transition-normal), border-color var(--transition-normal);
}

.detail-tab:hover {
  color: var(--grey-900);
}

.detail-tab.active {
  color: var(--primary-red);
  border-bottom-color: var(--primary-red);
  font-weight: var(--font-semibold);
}

.detail-tab.disabled {
  color: var(--grey-500);
  cursor: not-allowed;
}

/* Scroll fade hint at the right edge, toggled by ui.js when the strip overflows */
.detail-tabs.can-scroll-right {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}

.detail-content {
  overflow: visible;
  padding: var(--space-6) var(--page-gutter);
  transition: padding-right var(--transition-slow);
}

.tab-content {
  display: none;
  min-width: 0;
}

.tab-content.active {
  display: block;
}

/* ===== IMAGE CAROUSEL ===== */
.carousel {
  position: relative;
  height: 340px;
  background: var(--grey-100);
}

.carousel-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  cursor: zoom-in;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--veil-light);
  border: none;
  width: var(--control-height);
  height: var(--control-height);
  border-radius: var(--radius-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transition: background var(--transition-normal);
}

.carousel-btn:hover {
  background: var(--white);
}

.carousel-btn.prev {
  left: var(--space-4);
}

.carousel-btn.next {
  right: var(--space-4);
}

.carousel-btn .material-symbols-outlined {
  font-size: var(--icon-xl);
  color: var(--grey-900);
}

/* Dots stay 10 px but get a 34 px hit area */
.carousel-dots {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-6);
}

.carousel-dot {
  width: var(--dot-size);
  height: var(--dot-size);
  border: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  border-radius: var(--radius-full);
  background: var(--on-dark-muted);
  cursor: pointer;
  transition: background var(--transition-normal);
  position: relative;
}

.carousel-dot::after {
  content: '';
  position: absolute;
  inset: -12px;
}

.carousel-dot.active {
  background: var(--white);
}

/* ===== MINI MAP ===== */
.mini-map-wrapper {
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: var(--border-default);
}

.mini-map-container {
  height: 300px;
}

.mini-map {
  width: 100%;
  height: 100%;
}

.mini-map-header {
  padding: var(--space-2) var(--space-3);
  background: var(--grey-50);
  border-bottom: var(--border-default);
  font-size: var(--text-sm);
  color: var(--grey-700);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.mini-map-header::before {
  content: 'location_on';
  font-family: 'Material Symbols Outlined';
  font-size: var(--icon-sm);
  color: var(--grey-400);
}

/* ===== ADDRESS TABLE ===== */
/* The wrapper is a size container: below 640px of available width the table becomes stacked
   label/value rows (phones, and narrow columns next to the open drawer on desktop). */
.address-table-wrap {
  container-type: inline-size;
  width: 100%;
  margin-top: var(--space-2);
}

.address-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-xs);
}

.address-table th {
  background: var(--grey-50);
  padding: var(--space-1) var(--space-2);
  text-align: left;
  font-weight: var(--font-semibold);
  color: var(--grey-500);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-xs);
  border-bottom: var(--border-default);
}

.address-table td {
  padding: var(--space-2) var(--space-2);
  color: var(--grey-900);
  font-size: var(--text-sm);
}

.address-table tr:last-child td {
  border-bottom: none;
}

@container (max-width: 640px) {
  .address-table thead {
    display: none;
  }

  .address-table,
  .address-table tbody,
  .address-table tr {
    display: block;
  }

  .address-table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-4);
    padding: var(--space-2) 0;
    text-align: right;
    border-bottom: var(--border-subtle);
  }

  .address-table td::before {
    content: attr(data-label);
    flex-shrink: 0;
    color: var(--grey-600);
    text-align: left;
  }
}

/* ===== TOAST NOTIFICATIONS ===== */
.toast-container {
  position: fixed;
  bottom: max(var(--toast-bottom, calc(var(--footer-height) + var(--space-4))), calc(var(--space-4) + env(safe-area-inset-bottom, 0px)));
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast); /* above modals, drawers and the loading overlay */
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-3);
  max-width: 400px;
  width: calc(100% - 40px);
  pointer-events: none;
}

.toast-container .toast {
  pointer-events: auto;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border-left: var(--accent-bar) solid var(--grey-400);
  animation: slideIn 0.3s ease-out;
  transition: opacity var(--transition-slow), transform var(--transition-slow);
  will-change: transform, opacity;
}

.toast.hiding {
  opacity: 0;
  transform: translateY(20px);
}

.toast-error {
  border-left-color: var(--status-error);
}

.toast-error .toast-icon {
  color: var(--status-error);
}

.toast-warning {
  border-left-color: var(--status-warning);
}

.toast-warning .toast-icon {
  color: var(--status-warning);
}

.toast-success {
  border-left-color: var(--status-active);
}

.toast-success .toast-icon {
  color: var(--status-active);
}

.toast-info {
  border-left-color: var(--status-planning);
}

.toast-info .toast-icon {
  color: var(--status-planning);
}

.toast-icon {
  flex-shrink: 0;
}

.toast-icon .material-symbols-outlined {
  font-size: var(--icon-xl);
}

.toast-content {
  flex: 1;
  min-width: 0;
}

.toast-title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--grey-900);
  margin-bottom: var(--space-1);
}

.toast-message {
  font-size: var(--text-sm);
  color: var(--grey-600);
  line-height: var(--leading-snug);
}

.toast-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.toast-action-btn {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-normal);
}

.toast-action-btn.primary {
  background: var(--grey-900);
  color: var(--white);
  border: none;
}

.toast-action-btn.primary:hover {
  background: var(--grey-700);
}

.toast-action-btn.secondary {
  background: transparent;
  color: var(--grey-700);
  border: var(--border-strong);
}

.toast-action-btn.secondary:hover {
  background: var(--grey-100);
}

/* ===== LOADING OVERLAY ===== */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: var(--veil-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: var(--z-overlay);
  transition: opacity var(--transition-slow);
}

.loading-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.loading-overlay .loading-spinner {
  width: var(--control-lg);
  height: var(--control-lg);
  border-width: 4px;
}

.loading-overlay .loading-text {
  margin-top: var(--space-5);
  font-size: var(--text-base);
  color: var(--grey-700);
}

/* Boot watchdog failure state (see inline script in index.html) */
.loading-overlay.failed .loading-spinner {
  display: none;
}

.loading-overlay.failed .loading-text {
  text-align: center;
  color: var(--status-error-text);
}

.loading-overlay.failed .loading-text button {
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border: var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--grey-900);
  font-size: var(--text-sm);
  cursor: pointer;
}

/* ===== LAYER INFO MODAL ===== */
.layer-info-modal {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: var(--space-5);
}

.layer-info-modal.show {
  display: flex;
}

.layer-info-modal-content {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  max-width: 600px;
  max-height: 80vh;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.layer-info-modal-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: var(--grey-100);
  z-index: 1;
}

.layer-info-body {
  padding: var(--space-5);
  overflow-y: auto;
  flex: 1;
}

/* Swisstopo legend styles */
.layer-info-body .legend-container {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.layer-info-body .bod-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--grey-900);
  margin: 0 0 var(--space-3) 0;
}

.layer-info-body .legend-abstract {
  color: var(--grey-600);
  margin: 0 0 var(--space-5) 0;
  padding: var(--space-3);
  background: var(--grey-50);
  border-radius: var(--radius-md);
}

.layer-info-body .legend-footer {
  margin-top: var(--space-4);
}

.layer-info-body .legend-footer > span {
  font-weight: var(--font-semibold);
  color: var(--grey-900);
  display: block;
  margin-bottom: var(--space-2);
}

.layer-info-body .img-container {
  background: var(--grey-50);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

.layer-info-body .img-container img {
  max-width: 100%;
  height: auto;
}

.layer-info-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.layer-info-body table tr {
  border-bottom: var(--border-default);
}

.layer-info-body table tr:last-child {
  border-bottom: none;
}

.layer-info-body table td {
  padding: var(--space-2) var(--space-3);
  vertical-align: top;
}

.layer-info-body table td:first-child {
  font-weight: var(--font-medium);
  color: var(--grey-700);
  width: 40%;
  padding-left: 0;
}

.layer-info-body table td:last-child {
  color: var(--grey-600);
  padding-right: 0;
}

.layer-info-body table a {
  color: var(--interactive-blue);
  text-decoration: none;
}

.layer-info-body table a:hover {
  text-decoration: underline;
}

/* Internal layer legend */
.internal-legend {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  margin-bottom: var(--space-3);
}

.internal-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--grey-700);
}

/* Group headings of a long legend (land cover: the six main groups) */
.internal-legend-group {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--grey-600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.internal-legend-group:first-child {
  margin-top: 0;
}

.internal-legend-circle {
  width: var(--icon-sm);
  height: var(--icon-sm);
  border-radius: var(--radius-full);
  border: 2px solid var(--white);
  box-shadow: var(--ring-subtle);
  flex-shrink: 0;
}

.internal-legend-rect {
  width: var(--icon-lg);
  height: var(--icon-xs);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.placeholder-link {
  color: var(--grey-500);
  font-style: italic;
}

/* ===== THEMA WECHSELN (topic modal, see map.geo.admin.ch) ===== */
.topic-modal-content {
  max-width: 1040px;
  max-height: 90vh;
}

.topic-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
  border-bottom: var(--border-default);
}

.topic-modal-header h2 {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--grey-900);
}

.topic-modal .layer-info-modal-close {
  position: static;
  flex-shrink: 0;
}

.topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-4);
  padding: var(--space-5);
  overflow-y: auto;
  flex: 1;
}

.topic-grid .loading-row,
.topic-grid .geokatalog-error {
  grid-column: 1 / -1;
}

.topic-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-2);
  border: var(--border-default);
  border-radius: var(--radius-md);
  background: var(--grey-50);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--grey-900);
  cursor: pointer;
  transition: background var(--transition-normal), border-color var(--transition-normal);
}

.topic-card:hover,
.topic-card:focus-visible {
  background: var(--white);
  border-color: var(--grey-500);
}

.topic-card.active {
  background: var(--primary-red);
  border-color: var(--primary-red);
  color: var(--white);
}

.topic-card-name {
  text-align: center;
  font-weight: var(--font-medium);
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}

/* Topic images: sprite from geoadmin/web-mapviewer (107×57 tiles on a 110×60 grid) */
.topic-sprite {
  width: 107px;
  height: 57px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: url('../assets/topics.png') no-repeat 0 0;
}
.topic-sprite-blw { background-position: 0 0; }
.topic-sprite-kgs { background-position: 0 -60px; }
.topic-sprite-sachplan { background-position: 0 -120px; }
.topic-sprite-vu { background-position: 0 -180px; }
.topic-sprite-ech { background-position: 0 -240px; }
.topic-sprite-schneesport { background-position: 0 -300px; }
.topic-sprite-emapis { background-position: 0 -360px; }
.topic-sprite-notruf { background-position: 0 -420px; }
.topic-sprite-are { background-position: -110px 0; }
.topic-sprite-funksender { background-position: -110px -60px; }
.topic-sprite-geol { background-position: -110px -120px; }
.topic-sprite-aviation { background-position: -110px -180px; }
.topic-sprite-verteidigung { background-position: -110px -240px; }
.topic-sprite-energie { background-position: -110px -300px; }
.topic-sprite-geodesy { background-position: -110px -360px; }
.topic-sprite-schule { background-position: -110px -420px; }
.topic-sprite-bafu { background-position: -220px 0; }
.topic-sprite-nga { background-position: -220px -60px; }
.topic-sprite-luftbilder { background-position: -220px -120px; }
.topic-sprite-gewiss { background-position: -220px -180px; }
.topic-sprite-dev { background-position: -220px -240px; }
.topic-sprite-cadastre { background-position: -220px -300px; }
.topic-sprite-meteoschweiz { background-position: -220px -360px; }
.topic-sprite-isos { background-position: -220px -420px; }
.topic-sprite-swisstopo { background-position: -330px 0; }
.topic-sprite-ivs { background-position: -330px -60px; }
.topic-sprite-wildruhezonen { background-position: -330px -120px; }
.topic-sprite-inspire { background-position: -330px -180px; }
.topic-sprite-georessourcen { background-position: -330px -240px; }
.topic-sprite-astra { background-position: -330px -300px; }
.topic-sprite-bfs { background-position: -330px -360px; }
.topic-sprite-bav { background-position: -330px -420px; }

/* ===== PROTOTYPE BANNER ===== */
.prototype-banner {
  position: relative;
  z-index: var(--z-popover);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--primary-red-dark);
  color: var(--white);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  text-align: center;
}

.prototype-banner strong {
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-right: var(--space-1);
}

.prototype-banner-text-short {
  display: none;
}

/* ===== FOOTER ===== */
#footer {
  background: var(--grey-100);
  border-top: var(--border-strong);
  padding: var(--space-1) var(--space-4);
  font-size: var(--text-xs);
  color: var(--grey-600);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

#coordinates {
  font-family: var(--font-mono);
}

#footer-links a {
  color: var(--interactive-blue);
  text-decoration: none;
  margin-left: var(--space-4);
}

#footer-links a:hover {
  text-decoration: underline;
}

/* ===== RESPONSIVE DESIGN ===== */
/* Breakpoints (docs/DESIGNGUIDE.md → Responsive Design):
     Laptop   max-width: 1599px   72px header, fluid search (Standorte and Filter are icon-only at every width)
     Narrow desktop max-width: 1199px   icon-only view toggle
     Tablet   max-width: 1024px   one-line logo, tools panel starts collapsed
     Mobile   max-width: 767px  OR  (max-height: 500px and pointer: coarse)   ← phones in landscape
     Small    max-width: 479px
     Touch    (pointer: coarse), independent of width: 44px targets, 20px checkboxes
   js/utils.js mirrors the mobile and landscape queries (isMobileLayout(), isLandscapePhone()). Change both places together. */

/* --- Narrow desktop: progressively simplify controls below the laptop tier --- */
@media screen and (max-width: 1199px) {
  .view-toggle-btn {
    padding: var(--space-2);
    min-width: 40px;
    justify-content: center;
  }

  .view-toggle-btn .view-label {
    display: none !important;
  }
}

/* --- Laptop --- */
@media screen and (max-width: 1599px) {
  :root {
    --page-gutter: var(--space-5);
    --header-main-height: 72px;
  }

  .header-main {
    gap: var(--space-3);
    padding-inline: var(--space-4);
  }

  /* The centre column takes what is left between the logo and the actions */
  #logo-area,
  #header-right {
    flex: 0 0 auto;
  }

  #search-area {
    flex: 1;
    gap: var(--space-2);
  }

  #search-wrapper {
    max-width: 550px;
    min-width: 200px;
  }

  #header-right { gap: var(--space-2); }
  .header-btn { padding-inline: var(--space-3); }
}

/* --- Short viewports --- */
@media screen and (max-height: 700px) {
  .carousel {
    height: 240px;
  }
}

/* --- Tablet --- */
@media screen and (max-width: 1024px) {
  :root {
    --header-main-height: 70px;
    --header-detail-height: 100px;
    --footer-height: 30px;
  }

  .header-main {
    padding: 0 var(--space-4);
    height: var(--header-main-height);
    gap: var(--space-3);
  }

  /* One-line logo, so search, view toggle and actions fit on 768px */
  #logo-area {
    flex-shrink: 0;
    min-width: 0;
    align-items: center;
  }

  #logo-title > strong,
  #logo-title > .logo-subtitle {
    display: none;
  }

  #logo-title .logo-title-short {
    display: inline;
  }

  #search-area {
    padding: 0 var(--space-3);
    gap: var(--space-3);
    min-width: 0;
  }

  #search-wrapper {
    max-width: 400px;
    min-width: 0;
  }

  /* The input may shrink to ~190px on a portrait tablet; the dropdown keeps a readable width */
  #search-results {
    left: 0;
    right: auto;
    width: clamp(360px, 60vw, 600px);
  }

  #header-right {
    flex-shrink: 0;
  }

  /* Icon-only header buttons incl. the language code; the aria-label carries the name */
  .header-btn span:not(.material-symbols-outlined) {
    display: none;
  }

  .header-btn,
  #login-btn {
    padding: 0;
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    justify-content: center;
  }

  :root {
    --side-panel-default-width: 300px; /* each panel's dragged width (inline on <html>) still wins */
  }

  :root {
    --page-gutter: var(--space-4);
  }

  /* Clear of the 44px map controls (touch) */
  #info-panel {
    width: 300px;
    right: 68px;
  }

  .toolbar {
    flex-wrap: wrap;
  }

  .toolbar-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .toolbar-search,
  .list-toolbar-search {
    min-width: auto;
  }

  #gallery-view {
    padding: var(--space-4);
  }

  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--space-4);
  }
}

/* --- Touch devices, independent of width: 44px targets (WCAG 2.5.8), 20px checkboxes --- */
@media (pointer: coarse) {
  .filter-panel-reset {
    min-height: var(--touch-target-min);
  }

  .icon-btn,
  .pagination-btn {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
  }

  .btn-primary,
  .btn-secondary,
  .btn-tertiary {
    min-height: var(--touch-target-min);
  }

  .carousel-btn {
    width: var(--touch-target-min);
    height: var(--touch-target-min);
  }

  .mobile-lang-pill {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
  }

  .mobile-menu-item {
    min-height: var(--touch-target-min);
  }

  .tbl-toggle,
  .table-tab,
  .btn-back,
  .dropdown-btn,
  .dropdown-toggle-btn,
  .geokatalog-retry,
  .custom-select,
  .catalog-node,
  .active-layer-item,
  .search-item,
  .dropdown-menu-item,
  .context-menu-item,
  .accordion-header,
  .filter-section-header,
  .print-checkbox-label,
  .info-detail-link,
  .toolbar-search,
  .detail-tab,
  #menu-toggle,
  .style-switcher-btn {
    min-height: var(--touch-target-min);
  }

  .tree-row {
    min-height: var(--touch-target-min);
  }

  .tree-fold,
  .tree-fold-slot {
    width: var(--control-sm);
    left: calc(var(--tree-ind) - var(--control-sm));
  }

  /* Filter rows: the label carries the hit area so the whole row toggles the box */
  .filter-option {
    min-height: var(--touch-target-min);
    padding: 0;
  }

  .filter-option label {
    padding: var(--space-3) 0;
  }

  input[type="checkbox"] {
    width: 20px;
    height: 20px;
  }

  .header-btn,
  #login-btn,
  .view-toggle,
  #search-container {
    height: var(--touch-target-min);
  }

  .view-toggle-btn {
    min-width: var(--touch-target-min);
  }

  .pagination-rows select {
    min-height: var(--control-height);
  }

  /* Keep panel headers compact although their buttons grew to 44px */
  .panel-header,
  #info-header {
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
    padding-right: var(--space-2);
  }

  /* Resize handles need a wider grab zone */
  .panel-resize-handle::before {
    left: -6px;
    width: 12px;
  }

  .tbl-resize-handle {
    height: 12px;
  }
}

/* --- Mobile: phones in portrait (< 768px) and in landscape (short and touch) --- */
@media screen and (max-width: 767px), screen and (max-height: 500px) and (pointer: coarse) {
  /* Header: two 44px rows — title + actions, search + view toggle */
  .header-main {
    flex-wrap: wrap;
    height: auto;
    padding: var(--space-2) var(--space-4);
    gap: var(--space-2) var(--space-3);
  }

  #logo-area {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    min-height: var(--touch-target-min);
    align-items: center;
  }

  #logo-title {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #header-right {
    order: 2;
    flex: 0 0 auto;
    margin-left: auto;
  }

  #search-area {
    order: 3;
    flex: 0 0 100%; /* flex-basis, not width: the laptop rule's flex: 1 would keep it on row 1 */
    width: 100%;
    padding: 0;
    gap: var(--space-2);
    flex-wrap: nowrap;
  }

  #search-wrapper {
    max-width: 100%;
    flex: 1;
    min-width: 0;
  }

  #search-container {
    height: var(--touch-target-min);
  }

  /* Dropdown spans the header width, not just the ~200px input */
  #search-results {
    max-height: 60dvh;
    left: 0;
    right: auto;
    width: calc(100vw - 2 * var(--space-4));
    max-width: 600px;
  }

  /* No room for the scope button in the phone search field; results show every source */
  .search-scope {
    display: none;
  }

  /* Result meta wraps under the title */
  .search-item {
    flex-wrap: wrap;
  }

  .search-item-meta {
    flex-basis: 100%;
    padding-left: calc(var(--icon-lg) + var(--space-3));
    text-align: left;
    white-space: normal;
  }

  .view-toggle {
    flex-shrink: 0;
    height: var(--touch-target-min);
  }

  .view-toggle-btn {
    min-width: var(--touch-target-min);
  }

  /* Hamburger: opens the tools panel as a menu */
  .hamburger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    border: var(--border-strong);
    border-radius: var(--radius-full);
    background: var(--white);
    color: var(--grey-700);
    cursor: pointer;
    flex-shrink: 0;
  }

  .hamburger-btn .material-symbols-outlined {
    font-size: var(--icon-xl);
  }

  /* Form fields below 16px make iOS Safari zoom into the page on focus */
  #search-input,
  .toolbar-search input,
  .columns-search input,
  .custom-select,
  .pagination-rows select {
    font-size: var(--text-base);
  }

  /* One-line prototype notice */
  .prototype-banner {
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-3);
  }

  .prototype-banner-text-long {
    display: none;
  }

  .prototype-banner-text-short {
    display: inline;
  }

  /* Footer: the coordinates need a mouse, the map carries its own attribution */
  #footer {
    display: none;
  }

  /* Login has no function in the prototypes; the language lives in the phone menu (pills):
     the header row holds title, filter and menu */
  #login-area,
  #lang-selector {
    display: none;
  }

  /* Table panel and toggle — not usable on phones */
  .table-panel,
  .table-split,
  .tbl-toggle,
  .tbl-resize-handle {
    display: none !important;
  }

  /* Collapse map attribution by default — just the ⓘ toggle */
  .maplibregl-ctrl-attrib:not(.maplibregl-compact) {
    display: none;
  }

  /* Tools panel: slide-in menu from the right (the panel itself is the menu, so every tool stays available) */
  #accordion-wrapper {
    z-index: auto; /* no stacking context: the fixed panel stacks with the drawer and header */
  }

  #accordion-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: var(--tools-panel-width);
    max-width: 85vw;
    max-height: none;
    margin: 0;
    border-radius: 0;
    background: var(--white);
    color: var(--grey-900);
    box-shadow: var(--shadow-menu);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform var(--transition-slow), visibility 0s var(--transition-slow);
    visibility: hidden;
    z-index: var(--z-menu);
  }

  #accordion-panel.collapsed {
    display: flex; /* keep it in the DOM for the slide transition */
  }

  #accordion-panel:not(.collapsed) {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--transition-slow);
  }

  .mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 56px;
    padding: var(--space-1) var(--space-2) var(--space-1) var(--space-4);
    background: var(--white);
    border-bottom: var(--border-default);
    position: sticky;
    top: 0;
    z-index: 1;
    flex-shrink: 0;
  }

  .mobile-menu-extras {
    display: block;
  }

  /* Menu entries keep the panel-grey headers on the white menu */
  #accordion-panel .accordion-header {
    background: var(--accent-panel);
    color: var(--white);
  }

  #accordion-panel .accordion-header.active {
    background: var(--grey-100);
    color: var(--grey-900);
  }

  #accordion-panel .accordion-item {
    border-bottom-color: var(--white);
  }

  /* The floating "Menü" toggle is replaced by the hamburger button */
  #menu-toggle {
    display: none;
  }

  /* Location tree expands inside the phone menu; its desktop dock stays dormant. */
  #tree-panel-btn,
  #tree-panel {
    display: none;
  }

  .mobile-tree-accordion {
    display: block;
  }

  #mobile-tree-content {
    padding: 0;
  }

  #mobile-tree-content .tree-panel-content {
    overflow: visible; /* One scroll surface: the menu, including deep branches. */
    padding: var(--space-2) var(--space-1);
  }

  .panel-resize-handle {
    display: none !important;
  }

  .tree-panel-content {
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  }

  /* Filter drawer: full-screen sheet with the sticky footer */
  #filter-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none;
    z-index: var(--z-drawer);
    border-left: none;
  }

  #filter-panel:not(.open) {
    display: none;
  }

  .filter-panel-footer {
    display: flex;
  }

  /* Info panel: bottom sheet with handle, swipe-to-close (gestures.js), safe area */
  #info-panel {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-height: 50dvh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: var(--shadow-sheet);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: transform var(--transition-normal);
    z-index: var(--z-sheet);
  }

  #info-panel.sheet-dragging {
    transition: none;
  }

  #info-panel .sheet-handle {
    display: block;
  }

  #info-header {
    background: var(--white);
    border-bottom-color: var(--grey-200);
  }

  /* The sheet keeps to its 50dvh: no preview image on phones */
  #info-panel.has-preview #info-preview-image {
    display: none;
  }

  /* Basemap switcher: compact two-column panel, hidden while a sheet or the menu is open */
  .style-switcher {
    bottom: calc(44px + env(safe-area-inset-bottom, 0px));
    right: var(--space-3);
  }

  .style-switcher-btn img {
    width: 56px;
    height: 42px;
  }

  .style-switcher-panel {
    right: 0;
    bottom: 100%;
    margin: 0 0 var(--space-2) 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-height: calc(100dvh - 180px);
    overflow-y: auto;
  }

  .style-option img {
    width: 64px;
    height: 46px;
  }

  #map-view:has(#info-panel.show) .style-switcher,
  body:has(#accordion-panel:not(.collapsed)) .style-switcher {
    display: none;
  }

  .measure-distance-display {
    width: calc(100% - var(--space-6));
    max-width: 320px;
  }

  /* Tables: compact cells, secondary columns hidden, toolbar stacked */
  .toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
  }

  .toolbar-search {
    width: 100%;
    min-width: auto;
  }

  .toolbar-actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
  }

  .list-table {
    font-size: var(--text-xs);
  }

  .list-table th,
  .list-table td {
    padding: var(--space-3) var(--space-2);
  }


  .pagination-footer {
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-3) var(--space-4);
  }

  .pagination-rows,
  .pagination-info {
    white-space: nowrap;
  }

  .pagination-info {
    flex-basis: 100%;
  }

  .pagination-rows {
    order: -1;
  }

  /* Gallery: horizontal cards */
  #gallery-view {
    padding: var(--space-3);
  }

  .gallery-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .gallery-card {
    display: flex;
    flex-direction: row;
  }

  .gallery-image {
    width: 120px;
    height: auto;
    min-height: 120px;
    flex-shrink: 0;
  }

  .gallery-content {
    flex: 1;
    min-width: 0;
    padding: var(--space-3);
  }

  .gallery-title {
    font-size: var(--text-sm);
  }

  .gallery-subtitle {
    font-size: var(--text-xs);
    margin-bottom: var(--space-2);
  }

  .gallery-meta {
    margin-bottom: var(--space-2);
  }

  .gallery-tag {
    font-size: var(--text-xs);
    padding: 2px 6px;
  }

  /* Detail page: back button first and full width, breadcrumb below */
  body.detail-active #detail-view {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .detail-header-inner {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: var(--space-3);
  }

  .breadcrumb {
    font-size: var(--text-xs);
    flex-wrap: wrap;
    row-gap: var(--space-1);
  }

  .detail-header-actions {
    width: 100%;
    gap: var(--space-3);
  }

  .detail-header-actions .btn-back {
    order: -1;
  }

  .detail-header-actions > button {
    flex: 1;
    justify-content: center;
    min-height: var(--touch-target-min);
  }

  .detail-tabs {
    padding: 0;
  }

  .detail-tabs-inner {
    padding: 0 var(--space-2);
  }

  .detail-tab {
    min-height: var(--touch-target-min);
    padding: var(--space-3) var(--space-4);
    scroll-snap-align: start;
  }

  #detail-view {
    max-width: 100vw;
    overflow-x: hidden;
  }

  :root {
    --page-gutter: var(--space-3);
  }

  .detail-content {
    padding: var(--space-3) var(--page-gutter);
    overflow-x: hidden;
  }

  .carousel {
    height: 220px;
  }

  .mini-map-container {
    height: 220px;
  }

  /* Lightbox */





  /* Overlays: dynamic viewport units and safe area */
  .layer-info-modal {
    padding: var(--space-3);
  }

  .layer-info-modal-content {
    max-height: 90dvh;
  }

  .layer-info-body {
    padding: var(--space-4);
  }

  .toast-container {
    bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    width: calc(100% - 40px);
    max-width: none;
  }
}

/* --- Landscape phones: one header row, info panel docks to the right, two gallery columns --- */
@media screen and (max-height: 500px) and (pointer: coarse) and (min-width: 600px) {
  /* Keep the basemap switcher clear of the full-height navigation stack. */
  .style-switcher,
  .style-switcher-panel {
    left: var(--space-3);
    right: auto;
  }

  .style-switcher-panel { left: 0; }

  .header-main {
    flex-wrap: nowrap;
    padding: var(--space-1) var(--space-3);
    gap: var(--space-2);
  }

  #logo-area {
    order: 0;
    flex: 0 1 auto;
  }

  #search-area {
    order: 0;
    width: auto;
    flex: 1;
  }

  #header-right {
    order: 0;
    margin-left: 0;
  }

  #search-results {
    max-height: 75dvh;
    left: 0;
    right: 0;
    width: auto;
  }

  #info-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: auto;
    right: 0;
    width: min(360px, 55vw);
    max-height: none;
    border-radius: 0;
    box-shadow: var(--shadow-xl);
    padding-bottom: 0;
  }

  #info-panel .sheet-handle {
    display: none;
  }

  /* Enough width for breadcrumb and actions on one row */
  .detail-header-inner {
    flex-direction: row-reverse;
    align-items: center;
  }

  .detail-header-actions {
    width: auto;
    flex-shrink: 0;
  }

  .detail-header-actions > button {
    flex: 0 0 auto;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .carousel,
  .mini-map-container {
    height: 240px;
  }
}

/* --- Small phones --- */
@media screen and (max-width: 479px) {
  .gallery-image {
    width: 100px;
    min-height: 100px;
  }


  .pagination-rows {
    display: none;
  }

  .dropdown-menu {
    min-width: 0;
    max-width: calc(100vw - 32px);
  }

  .columns-dropdown {
    min-width: 0;
    width: calc(100vw - 32px);
    max-width: 320px;
  }
}

/* ===== PRINT ===== */
@media print {
  #header,
  #footer,
  #accordion-wrapper,
  #info-panel,
  .style-switcher,
  .btn-back,
  .toast-container,
  .loading-overlay,
  .map-context-menu,
  .measure-distance-display,
  .prototype-banner {
    display: none !important;
  }

  #main,
  #detail-view,
  .detail-content {
    height: auto;
    overflow: visible;
  }
}

/* Disabled portfolio filters stay visible in detail mode. */
.header-btn:disabled { opacity: var(--opacity-disabled); cursor: default; background: var(--white); }
.mini-map-header { text-decoration: none; overflow-wrap: anywhere; }
.mini-map-header a[href] { color: var(--interactive-blue); text-decoration: underline; text-underline-offset: 2px; }
.mini-map-header a:focus-visible { outline: 2px solid var(--interactive-blue); outline-offset: 2px; }