@font-face {
  font-family: 'Plagiant20';
  src: url('/css/fonts/Plagiant20-Book.woff2') format('woff2'),
       url('/css/fonts/Plagiant20-Book.woff')  format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS
   Alles Styling wird hier gesteuert. Werte unten ändern → wirkt global.
   Hinweis: Die Kartenfarben (Land, Wasser, Labels) liegen in js/app.js
   unter `mapSettings`, da Mapbox sie per JS-Config erhält.
   ════════════════════════════════════════════════════════════════════════ */
:root {

  /* ── Blau-Palette (Basis: #3ca0ff) ──────────────────────────────────── */
  --black:  #080808;
  --blue-50:  #edf6ff;
  --blue-100: #d0e9ff;
  --blue-200: rgb(166, 212, 255);
  --blue-300: #6eb8ff;
  --blue-400: #3ca0ff;
  --blue-500: #1585e8;
  --blue-600: #0d65ba;
  --blue-700: #0a4e8f;
  --blue-800: #073566;
  --blue-900: #041e3a;

  /* ── Akzentfarbe (steuert Marker, aktive Tags, Gruppentitel, …) ─────── */
  --accent:              var(--blue-400);   /* knalliges Blau                */
  --accent-dark:         var(--blue-500);   /* aktiver Marker                */
  --accent-deep:         var(--blue-700);      /* Dunkelblau: Labels, Links     */

  /* ── Flächen / Hintergründe ─────────────────────────────────────────── */
  --bg-page:             var(--blue-50);
  --bg-panel:            rgba(237, 246, 255, 0.94);
  --bg-popup:            rgba(237, 246, 255, 0.97);
  --bg-ctrl:             rgba(237, 246, 255, 0.92);
  --bg-map:              #11161f;
  --bg-img-placeholder:  var(--blue-100);
  --bg-tag:              rgba(60, 161, 255, 0.2);
  --bg-tag-hover:        rgba(60, 161, 255, 0.3);
  --bg-active:           rgba(60, 160, 255, 0.08);
  --bg-expanded:         var(--bg-tag);

  /* ── Text ───────────────────────────────────────────────────────────── */
  --text-default:        var(--black);           /* Schwarz                       */
  --text-muted:          var(--black);         /* Grau (inaktive Tabs etc.)     */
  --text-on-accent:      #ffffff;           /* Text auf Akzentflächen        */

  /* ── Linien ─────────────────────────────────────────────────────────── */
  --line-light:          var(--bg-tag); /* Sidebar, Tabs        */
  --line-dark:           var(--bg-tag);      /* Listeneinträge      */

  /* ── Typografie ─────────────────────────────────────────────────────── */
  --font-ui:             'Plagiant20', 'Helvetica Neue', Arial, sans-serif;
  --fs-h1:               20px;   /* Sidebar-Titel                            */
  --fs-name:             20px;   /* Eintrags- und Gruppentitel               */
  --fs-body:             14px;   /* Werte, Links, Popup-Titel                */
  --fs-meta:             12px;   /* Vorschauzeile, Tabs                      */
  --fs-label:            12px;     /* Sektions-Labels                          */
  --fw-regular:          normal;
  --fw-medium:           normal;
  --lh-tight:            1.2;
  --lh-snug:             1.2;
  --lh-normal:           1.5;

  /* ── Abstände ───────────────────────────────────────────────────────── */
  --pad-inline:          16px;   /* horizontale Grundeinrückung Liste/Header */
  --pad-row-y:           13px;   /* Header vertikal                          */
  --pad-panel:           20px;   /* Sidebar-Header                           */
  --gap-block:           10px;   /* Abstand Detailblöcke                     */
  --gap-tags:            6px;    /* Abstand zwischen Tags                    */
  --gap-inline:          0px;    /* Label ↔ Wert                             */

  /* ── Radien ─────────────────────────────────────────────────────────── */
  --radius-tag:          20px;
  --radius-popup:        2px;
  --radius-ctrl:         2px;

  /* ── Layout-Maße ────────────────────────────────────────────────────── */
  --sidebar-width:       450px;
  --map-height-mobile:   50vh;
  --ctrl-btn-size:       38px;

  /* ── Marker ─────────────────────────────────────────────────────────── */
  --marker-size:          18px;
  --marker-border:        2px solid var(--blue-50);
  --marker-scale-active:  1.55;
  --marker-shadow:        0 0 0 1px rgba(7, 53, 102, 0.16), 0 4px 14px rgba(21, 133, 232, 0.30);
  --marker-shadow-active: 0 0 0 3px rgba(60, 160, 255, 0.30), 0 6px 20px rgba(21, 133, 232, 0.45);

  /* ── Effekte ────────────────────────────────────────────────────────── */
  --blur-panel:          blur(12px);

  /* ── Übergänge ──────────────────────────────────────────────────────── */
  --dur-fast:            0.15s;
  --dur-base:            0.2s;
  --dur-chevron:         0.35s;
  --dur-accordion:       0.38s;
  --ease:                ease;
  --ease-out:            ease-out;
  --ease-accordion:      cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-ui);
  background: var(--bg-page);
  color: var(--text-default);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Layout ── */
.layout {
  display: grid;
  grid-template-columns: 1fr var(--sidebar-width);
  height: 100vh;
}

#map {
  width: 100%;
  height: 100%;
  background: var(--bg-map);
}

/* ── Map controls ── */
#map .mapboxgl-ctrl-group {
  border-radius: var(--radius-ctrl);
  overflow: hidden;
  box-shadow: none;
  border: none;
  background: var(--bg-ctrl);
}

#map .mapboxgl-ctrl button {
  width: var(--ctrl-btn-size);
  height: var(--ctrl-btn-size);
}

/* ── Popup ── */
.mapboxgl-popup-content {
  font-family: var(--font-ui);
  color: var(--text-default);
  background: var(--bg-popup);
  border: none;
  border-radius: var(--radius-popup);
  box-shadow: none;
  padding: 10px 32px;
  -webkit-font-smoothing: antialiased;
}

.mapboxgl-popup-anchor-top    .mapboxgl-popup-tip { border-bottom-color: var(--bg-popup); }
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip { border-top-color:    var(--bg-popup); }
.mapboxgl-popup-anchor-left   .mapboxgl-popup-tip { border-right-color:  var(--bg-popup); }
.mapboxgl-popup-anchor-right  .mapboxgl-popup-tip { border-left-color:   var(--bg-popup); }
.mapboxgl-popup-anchor-top-left     .mapboxgl-popup-tip { border-bottom-color: var(--bg-popup); }
.mapboxgl-popup-anchor-top-right    .mapboxgl-popup-tip { border-bottom-color: var(--bg-popup); }
.mapboxgl-popup-anchor-bottom-left  .mapboxgl-popup-tip { border-top-color:    var(--bg-popup); }
.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip { border-top-color:    var(--bg-popup); }

.mapboxgl-popup-content h3 {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  text-align: center;
}

.mapboxgl-popup-close-button {
  width: 28px;
  height: 28px;
  top: 6px;
  right: 6px;
  border-radius: 4px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}

.mapboxgl-popup-close-button::before,
.mapboxgl-popup-close-button::after {
  content: '';
  position: absolute;
  width: 11px;
  height: 1px;
  background: currentColor;
  border-radius: 1px;
}

.mapboxgl-popup-close-button::before { transform: rotate(45deg); }
.mapboxgl-popup-close-button::after  { transform: rotate(-45deg); }

.mapboxgl-popup-close-button:hover  { color: var(--accent); }
.mapboxgl-popup-close-button:focus  { outline: none; }

/* ── Sidebar ── */
.sidebar {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-panel);
  -webkit-backdrop-filter: var(--blur-panel);
  backdrop-filter: var(--blur-panel);
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  padding: var(--pad-panel) var(--pad-panel) 0;
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-panel);
  -webkit-backdrop-filter: var(--blur-panel);
  backdrop-filter: var(--blur-panel);
}

.sidebar h1 {
  margin: 0 0 14px;
  font-size: var(--fs-h1);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: 0;
}

/* ── Sort tags ── */
.sort-tabs {
  display: flex;
  gap: var(--gap-tags);
  margin: 0 0 16px;
}

.sort-tab {
  padding: 6px 14px;
  border: none;
  border-radius: var(--radius-tag);
  background: var(--bg-tag);
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: var(--fs-meta);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  text-align: center;
  white-space: nowrap;
}

.sort-tab.is-active {
  background: var(--accent);
  color: var(--black);
}

.sort-tab:not(.is-active):hover {
  background: var(--bg-tag-hover);
}

/* ── List ── */
.ort-liste {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
}

.ort-liste li {
  list-style: none;
  border-bottom: 1px solid var(--line-dark);
}

.ort-liste li:first-child {
  border-top: 1px solid var(--line-dark);
}

/* Gruppen-Zwischentitel (Datum / Sparte) */
.sparte-divider {
  padding: 8px var(--pad-inline);
  font-size: var(--fs-name);
  font-weight: var(--fw-medium);
  color: var(--accent);
  border-bottom: none;
  pointer-events: none;
}

.ort-liste li.sparte-divider:first-child {
  padding-top: 14px;
}

.ort-eintrag {
  border-radius: 0;
  overflow: hidden;
  transition: background var(--dur-fast) var(--ease);
}

.ort-liste li.is-active .ort-eintrag {
  background: var(--bg-active);
}

.ort-liste li.is-expanded .ort-eintrag {
  background: var(--bg-expanded);
}

/* ── Accordion header ── */
.ort-header {
  display: flex;
  align-items: center;
  gap: var(--gap-block);
  padding: var(--pad-row-y) var(--pad-inline);
  cursor: pointer;
  user-select: none;
}

.ort-header:hover { opacity: 0.85; }

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

.ort-name {
  font-weight: var(--fw-medium);
  margin: 0;
  font-size: var(--fs-name);
  line-height: var(--lh-snug);
  color: var(--text-default);
}

.ort-meta-line { margin: 0 0 3px; }

.ort-meta-hint {
  color: var(--text-default);
  font-size: var(--fs-meta);
  font-weight: var(--fw-regular);
}

/* ── Chevron ── */
.ort-chevron {
  flex-shrink: 0;
  width: var(--marker-size);
  height: var(--marker-size);
  color: var(--text-muted);
  transition: transform var(--dur-chevron) var(--ease-accordion), color var(--dur-base) var(--ease);
}

.ort-liste li.is-active  .ort-chevron { color: var(--accent); }
.ort-liste li.is-expanded .ort-chevron { transform: rotate(180deg); color: var(--accent-deep); }

/* ── Accordion body ── */
.ort-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-accordion) var(--ease-accordion);
}

.ort-liste li.is-expanded .ort-body { grid-template-rows: 1fr; }

.ort-body-inner { overflow: hidden; }

.ort-body-content {
  padding: 2px var(--pad-inline) var(--pad-inline);
  display: grid;
  gap: var(--gap-block);
}

/* ── Detail blocks ── */
.ort-bild {
  width: 100%;
  height: auto;
  display: block;
  background: var(--bg-img-placeholder);
}

.ort-block { display: grid; gap: var(--gap-inline); }

.ort-label {
  font-size: var(--fs-label);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  color: var(--accent-deep);
}

.ort-wert {
  color: var(--text-default);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
}

.ort-links { display: grid; gap: var(--gap-tags); }

.ort-link {
  color: var(--accent-deep);
  text-decoration: none;
  font-size: var(--fs-body);
  word-break: break-word;
}

.ort-link:hover { text-decoration: underline; }

/* ── Map marker ── */
/* Das Wurzel-Element wird von Mapbox per transform:translate positioniert.
   Es darf KEINE transform-Transition haben, sonst zieht der Marker beim
   Verschieben der Karte nach. Die Skalier-Animation läuft daher auf .dot. */
.custom-marker {
  width: var(--marker-size);
  height: var(--marker-size);
  cursor: pointer;
}

.custom-marker .dot {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--accent);
  border: var(--marker-border);
  box-shadow: var(--marker-shadow);
  transition: transform var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}

.custom-marker.is-active .dot {
  transform: scale(var(--marker-scale-active));
  background: var(--accent-dark);
  box-shadow: var(--marker-shadow-active);
}

@media (max-width: 900px) {
  :root {
    --fs-h1: var(--fs-name); 
  }
  .layout {
    grid-template-columns: 1fr;
    grid-template-rows: var(--map-height-mobile) 1fr;
  }
  .sidebar {
    border-left: 0;
    border-top: 1px solid var(--line-light);
  }
}