@font-face { font-family: "Barlow SC"; font-weight: 500; font-display: swap; src: url("vendor/fonts/barlow-semi-condensed-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow SC"; font-weight: 600; font-display: swap; src: url("vendor/fonts/barlow-semi-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow SC"; font-weight: 700; font-display: swap; src: url("vendor/fonts/barlow-semi-condensed-latin-700-normal.woff2") format("woff2"); }

/* Ein Erscheinungsbild für alle Seiten (Startseite, alle Karten, Ortsseiten, Rechtstexte):
   "Parkschild weich" – Marineblau mit Himmelblau, immer dunkel. Die Kartenpunkte behalten ihre eigenen Farben
   (grün kostenlos, orange kostenpflichtig, grau unbekannt, lila Kunden), weil sie Bedeutung tragen. */
:root {
  --head: #0b2340;          /* Kopfleisten */
  --red: #62b0f5;           /* Hauptaktion (Name historisch): Knöpfe, Hervorhebungen */
  --red-deep: #86c3f8;
  --on-red: #0b2340;
  --accent: #86c3f8;        /* Links, Linien, Fokus */
  --pin-ring: #0b2340;
  --ink: #eef4fb;
  --ink-soft: #a9c1df;
  --paper: #0f2747;         /* Panels und Karten */
  --mist: #102a4c;          /* Seitengrund */
  --line: #224a78;
  --free: #0e9f6e;
  --paid: #e0661b;
  --unknown: #8c96a5;
  --customers: #7b5ec6;
  --spark: #ffc94d;         /* dritte Farbe, sparsam: "Du bist hier", Auswahl, Fokus, Hover-Hinweise */
  --ease: cubic-bezier(.22, .8, .24, 1);       /* weich auslaufend */
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --spring: cubic-bezier(.34, 1.45, .6, 1);    /* kleiner Überschwinger für Antippen und Auftauchen */
  --tiles: invert(1) hue-rotate(180deg) saturate(.25) brightness(.85) contrast(.9);
  --lift: 0 1px 0 rgba(0, 0, 0, .35), 0 8px 22px rgba(0, 0, 0, .45);
  --r: 6px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font: 500 16px/1.35 "Barlow SC", system-ui, sans-serif; color: var(--ink); background: var(--mist); }
#map { position: fixed; inset: 0; background: var(--mist); }
/* Normalerweise färbt basemap.js die Kacheln einmal beim Laden ein; nur ältere Browser bekommen den CSS-Filter. */
.css-tile-filter .leaflet-tile-pane { filter: var(--tiles); }
.leaflet-container { font: inherit; }
:focus-visible { outline: 3px solid var(--spark); outline-offset: 2px; }

/* ---------- Panel: Kopf mit Marke, darunter Suche und Filter ---------- */
.panel {
  position: fixed; z-index: 1000; top: 16px; left: 16px; width: 296px;
  background: var(--paper); border-radius: var(--r); box-shadow: var(--lift); overflow: hidden;
}
.brand {
  display: flex; align-items: center; gap: 12px;
  background: var(--head); color: #ffffff; padding: 14px 16px 14px 14px;
}
.brand .logo { flex: none; width: 46px; height: 46px; display: block; border-radius: 8px; }
.brand h1 { margin: 0; font-size: 30px; font-weight: 700; line-height: .95; letter-spacing: -.01em; }
.brand h1.is-long { font-size: 23px; line-height: 1; }   /* "Mecklenburg-Vorpommern" passt sonst nicht ins Panel */
.brand p { margin: 3px 0 0; font-size: 15px; opacity: .92; }

.filters { display: grid; margin: 0; padding: 6px 0; border: 0; }
.chip {
  display: flex; align-items: center; gap: 12px; width: 100%;
  font: inherit; font-size: 16px; color: var(--ink); text-align: left;
  background: none; border: 0; border-left: 4px solid var(--c);
  padding: 9px 16px 9px 12px; cursor: pointer;
}
.chip + .chip { border-top: 1px solid var(--line); }
.chip .swatch { width: 12px; height: 12px; border-radius: 50%; background: var(--c); flex: none; }
.chip .short { display: none; }
.chip .count { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.chip:hover { background: var(--mist); }
.chip[aria-pressed="false"] { border-left-color: var(--line); color: var(--ink-soft); }
.chip[aria-pressed="false"] .swatch { background: none; box-shadow: inset 0 0 0 2px var(--line); }
.chip[aria-pressed="false"] .label { text-decoration: line-through; text-decoration-thickness: 1px; }

.meta { font-size: 13px; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 8px 16px 12px; border-top: 1px solid var(--line); }
.meta a { color: inherit; }
.notice { margin: 0 16px 12px; padding: 10px 12px; border-radius: var(--r); background: var(--mist); font-size: 15px; display: none; }

/* ---------- Kartensteuerung ---------- */
.leaflet-bar { border: 0 !important; box-shadow: var(--lift) !important; border-radius: var(--r) !important; overflow: hidden; }
.leaflet-bar a, .leaflet-bar button {
  width: 40px !important; height: 40px !important; line-height: 40px !important;
  background: var(--paper) !important; color: var(--ink) !important; border-color: var(--line) !important;
}
.leaflet-bar a.leaflet-disabled { color: var(--line) !important; }
.locate { display: grid; place-items: center; border: 0; cursor: pointer; padding: 0; }
.locate svg { width: 20px; height: 20px; }
.locate[data-state="busy"] svg { opacity: .4; }
.leaflet-control-attribution { background: color-mix(in srgb, var(--paper) 85%, transparent) !important; color: var(--ink-soft) !important; font-size: 11px; }
.leaflet-control-attribution a { color: inherit !important; }

/* ---------- Detailkarte ---------- */
.sheet {
  position: fixed; z-index: 1001; right: 16px; top: 16px; width: 320px;
  max-height: calc(100vh - 150px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--paper); color: var(--ink); border-radius: var(--r); box-shadow: var(--lift);
  padding: 16px;
}
.sheet[hidden] { display: none; }
.sheet-close {
  position: absolute; z-index: 2; top: 8px; right: 8px; width: 34px; height: 34px;
  border: 0; border-radius: var(--r); background: var(--paper); box-shadow: var(--lift);
  color: var(--ink); font: inherit; font-size: 22px; line-height: 1; cursor: pointer;
}
.sheet-close:hover { background: var(--mist); }

/* Farbbalken oben zeigt den Gebührenstatus */
.pop { border-top: 5px solid var(--c); margin: -16px -16px 0; padding: 14px 16px 0; }
.pop .photo { position: relative; margin: -14px -16px 14px; }
.pop .photo img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--mist); }
.pop .photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 10px 6px;
  font-size: 12px; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .65));
}
.pop .photo figcaption a { color: #fff; }
.pop .status { font-weight: 600; font-size: 14px; color: var(--ink); }
.pop h2 { margin: 2px 0 0; padding-right: 30px; font-size: 22px; font-weight: 700; line-height: 1.12; }
.pop .where { margin: 3px 0 0; font-weight: 600; }
.pop .kind { margin: 1px 0 0; color: var(--ink-soft); }
.pop .prices { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--line); }
.pop .prices li { padding: 7px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.pop .prices li:first-child { font-weight: 700; font-size: 18px; }
.pop .note { margin: 8px 0 0; font-size: 14px; color: var(--ink-soft); }
.pop dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; margin: 12px 0 0; font-size: 15px; }
.pop dt { color: var(--ink-soft); }
.pop dd { margin: 0; }
.pop .src { margin: 10px 0 0; font-size: 13px; color: var(--ink-soft); }
.pop .src a { color: inherit; }
.pop .actions {
  position: sticky; bottom: -16px; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin: 14px -16px -16px; padding: 10px 16px 16px; background: var(--paper);
}
.pop .actions a {
  display: block; text-align: center; text-decoration: none; font-weight: 600; white-space: nowrap;
  padding: 10px 8px; border-radius: var(--r); border: 1px solid var(--line); color: var(--ink);
}
.pop .actions a:hover { border-color: var(--ink-soft); }
.pop .actions a.primary { background: var(--red); border-color: var(--red); color: var(--on-red); }
.pop .actions a.primary:hover { background: var(--red-deep); border-color: var(--red-deep); }

/* ---------- Hover-Vorschau ---------- */
.leaflet-tooltip.pk-tip {
  background: var(--paper); color: var(--ink); border: 0; border-left: 4px solid var(--c);
  border-radius: var(--r); box-shadow: var(--lift); padding: 7px 12px 8px 10px;
  font: inherit; font-size: 14px; white-space: nowrap; pointer-events: none;
}
.leaflet-tooltip-top.pk-tip::before { border-top-color: var(--paper); }
.pk-tip div { display: grid; gap: 1px; }
.pk-tip strong { font-size: 15px; }
.pk-tip .tip-price { color: var(--ink); font-weight: 600; }
.pk-tip .tip-where { color: var(--ink-soft); }
.pk-tip .tip-hint { color: var(--ink-soft); font-size: 12px; margin-top: 3px; }


/* ---------- Zielsuche ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.search { position: relative; display: flex; margin: 12px 12px 4px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--red) 35%, transparent); }
.search input {
  flex: 1; min-width: 0; border: 0; background: none; color: var(--ink);
  font: inherit; font-size: 16px; padding: 10px 12px; outline: none;
}
.search input::placeholder { color: var(--ink-soft); }
.search input::-webkit-search-cancel-button { display: none; }
.search button { border: 0; background: none; color: var(--ink-soft); padding: 0 12px; cursor: pointer; display: grid; place-items: center; }
.search button:hover { color: var(--accent); }
.search.busy button { opacity: .4; }
#suggest {
  position: absolute; z-index: 5; left: -1px; right: -1px; top: calc(100% + 4px);
  list-style: none; margin: 0; padding: 4px 0; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--lift);
  max-height: 300px; overflow-y: auto;
}
#suggest .opt { display: grid; padding: 7px 12px; cursor: pointer; }
#suggest .opt { border-left: 3px solid transparent; transition: background-color .12s, border-color .12s; }
#suggest .opt.active, #suggest .opt:hover { background: var(--mist); border-left-color: var(--spark); }
#suggest .opt-label { font-weight: 600; }
#suggest .opt-sub { font-size: 13px; color: var(--ink-soft); }
#suggest .opt-address .opt-label { color: var(--accent); }

.results { margin: 6px 12px 8px; }
.results-head { display: flex; align-items: flex-start; gap: 8px; }
.results-head p { flex: 1; margin: 4px 0 6px; font-size: 14px; color: var(--ink-soft); }
.results-head button { border: 0; background: none; color: var(--ink-soft); font: inherit; font-size: 20px; line-height: 1; padding: 2px 4px; cursor: pointer; }
.panel { max-height: calc(100vh - 32px); overflow-y: auto; }
.results ol { list-style: none; margin: 0; padding: 0; max-height: 40vh; overflow-y: auto; }
.result {
  display: grid; width: 100%; text-align: left; cursor: pointer;
  font: inherit; color: var(--ink); background: none;
  border: 0; border-left: 4px solid var(--c); border-bottom: 1px solid var(--line);
  padding: 7px 4px 7px 10px;
}
.result:hover { background: var(--mist); }
.result .r-name { font-weight: 600; }
.result .r-price { font-size: 14px; color: var(--ink); font-weight: 600; }
.result .r-dist { font-size: 13px; color: var(--ink-soft); }

.dest-pin span {
  display: block; width: 26px; height: 26px; background: var(--spark);
  border: 3px solid var(--pin-ring); border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}

/* ---------- Parkscheibe ---------- */
.disc-box {
  display: grid; margin: 12px 0 0; padding: 8px 10px;
  border-left: 4px solid #62b0f5; background: color-mix(in srgb, #62b0f5 12%, var(--paper));
}
.disc-box strong { color: #86c3f8; }
.disc-box .disc-hint { font-size: 13px; color: var(--ink-soft); }
.pk-tip .tip-disc { color: #86c3f8; font-weight: 600; }
.disc-legend[hidden] { display: none; }
.disc-legend { display: inline-flex; align-items: center; gap: 5px; }
.disc-legend i { width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 3.5px solid var(--ink-soft); }

/* ---------- Handy ---------- */
@media (max-width: 640px) {
  .panel { top: 8px; left: 8px; right: 8px; width: auto; }
  .brand { padding: 10px 12px 10px 10px; gap: 10px; }
  .brand .logo { width: 38px; height: 38px; }
  .brand h1 { font-size: 25px; }
  .brand p { font-size: 14px; }
  .filters { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0; }
  .chip { min-width: 0; padding: 9px 8px 9px 8px; font-size: 15px; gap: 6px; }
  .chip + .chip { border-top: 0; }
  .chip .long { display: none; }
  .chip .short { display: inline; }
  .chip .count { margin-left: 2px; }
  .meta { padding: 7px 12px 9px; }
  .sheet { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-height: min(70vh, 580px); }
  .results.collapsed ol { display: none; }
  .results.collapsed .results-head p { cursor: pointer; text-decoration: underline; }
  .search { margin: 8px 8px 2px; }
  .results { margin: 4px 8px 6px; }
  .results ol { max-height: 30vh; }
  .pop .photo img { aspect-ratio: 16 / 8; }
}

/* ---------- Region (Thüringen): Landkreise, Orte, Ladeanzeige ---------- */
.d-label-wrap, .place-wrap { width: 0 !important; height: 0 !important; background: none; border: 0; }
.d-label {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: 0; cursor: pointer; white-space: nowrap;
  font: inherit; color: var(--ink); background: var(--paper); border: 0; border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35); padding: 4px 12px;
}
.d-label b { font-size: 15px; font-weight: 700; line-height: 1.1; }
.d-label .d-count { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; line-height: 1.1; }
.d-label:hover, .d-label:focus-visible { background: var(--red); color: var(--on-red); }
.d-label:hover .d-count, .d-label:focus-visible .d-count { color: var(--on-red); }

.place-bubble {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  display: block; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--ink);
}
.place-bubble .pb-dot {
  display: grid; place-items: center; border-radius: 50%; font-weight: 700; font-variant-numeric: tabular-nums;
  background:
    radial-gradient(circle closest-side, var(--paper) 72%, transparent 73%),
    conic-gradient(var(--free) 0 var(--a), var(--paid) var(--a) var(--b), var(--unknown) var(--b) var(--c, 100%), var(--customers) var(--c, 100%) 100%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
.place-bubble .pb-name {
  position: absolute; left: 50%; top: calc(100% + 1px); transform: translateX(-50%);
  max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; font-weight: 600; padding: 0 5px; border-radius: 4px;
  background: color-mix(in srgb, var(--paper) 85%, transparent);
}
.place-bubble:hover .pb-dot, .place-bubble:focus-visible .pb-dot { box-shadow: 0 0 0 3px var(--spark), 0 1px 4px rgba(0, 0, 0, .35); transform: scale(1.08); }

.zoomhint, .loading {
  position: fixed; z-index: 999; left: 50%; bottom: 24px; transform: translateX(-50%);
  margin: 0; padding: 7px 14px; border-radius: 999px; background: var(--paper); color: var(--ink);
  box-shadow: var(--lift); font-size: 14px; font-weight: 600; white-space: nowrap; pointer-events: none;
}
.zoomhint[hidden], .loading[hidden] { display: none; }
.loading { bottom: 64px; }
.loading::before {
  content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; vertical-align: -1px;
  border: 2px solid var(--accent); border-right-color: transparent; border-radius: 50%; animation: pk-spin .8s linear infinite;
}
@keyframes pk-spin { to { transform: rotate(360deg); } }

.districts { border-top: 1px solid var(--line); }
.districts summary {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px; cursor: pointer; font-weight: 600; list-style: none;
}
.districts summary::-webkit-details-marker { display: none; }
.districts summary::after { content: "▾"; margin-left: 4px; color: var(--ink-soft); transition: transform .15s; }
.districts[open] summary::after { transform: rotate(180deg); }
.districts .d-total { margin-left: auto; color: var(--ink-soft); font-weight: 500; font-variant-numeric: tabular-nums; }
.districts .whole {
  display: block; width: calc(100% - 32px); margin: 0 16px 6px; padding: 7px 10px; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--accent); background: none; border: 1px solid var(--line); border-radius: var(--r);
}
.districts .whole:hover { border-color: var(--accent); }
.districts h3 { margin: 8px 16px 2px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.districts ul { list-style: none; margin: 0 0 6px; padding: 0; }
.d-item {
  display: flex; width: 100%; gap: 8px; padding: 6px 16px; cursor: pointer; text-align: left;
  font: inherit; color: var(--ink); background: none; border: 0;
}
.d-item:hover { background: var(--mist); }
.d-item .d-n { margin-left: auto; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
#district-list { max-height: 42vh; overflow-y: auto; overscroll-behavior: contain; }

.d-label.d-hidden { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s var(--ease), visibility 0s .18s; }

@media (max-width: 640px) {
  .d-label { padding: 2px 8px; }
  .d-label b { font-size: 13px; }
  .d-label .d-count { font-size: 11px; }
  .chip { display: grid; grid-template-columns: auto 1fr; column-gap: 5px; row-gap: 0; align-items: center; padding: 7px 4px 7px 6px; }
  .chip .label { grid-column: 2; font-size: 14px; }
  .chip .count { grid-column: 2; margin-left: 0; font-size: 12px; line-height: 1.1; }
  .zoomhint { bottom: 16px; font-size: 13px; }
  .loading { bottom: 56px; }
  .districts summary { padding: 8px 12px; }
  #district-list { max-height: 34vh; }
}

/* ---------- Adblocker-Knöllchen ---------- */
.knoellchen {
  --paper-k: #fffbea; --ink-k: #262626; --line-k: #d8cfa8;
  position: fixed; z-index: 1003; left: 16px; bottom: 16px; width: 360px; max-width: calc(100vw - 32px);
  background: var(--paper-k); color: var(--ink-k); border-radius: 4px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .06), 0 14px 34px rgba(0, 0, 0, .28);
  padding: 0 16px 14px; font-size: 15px;
  transform: translateY(24px) rotate(-1.2deg); opacity: 0; transition: transform .25s ease-out, opacity .25s ease-out;
}
.knoellchen.pk-k-in { transform: none; opacity: 1; }   /* im Ruhezustand gerade: gedrehter Text wird unscharf */
.knoellchen.pk-k-out { transform: translateY(24px) rotate(-1.2deg); opacity: 0; }
/* Abrisskante oben wie bei einem Block */
.knoellchen::before {
  content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 6px;
  background: radial-gradient(circle at 6px 6px, transparent 4px, var(--paper-k) 4.5px) 0 0 / 12px 6px repeat-x;
}
.pk-k-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 0 -16px 10px; padding: 8px 16px 6px; background: var(--red); color: var(--on-red);
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 13px;
}
.pk-k-nr { letter-spacing: .04em; font-weight: 600; opacity: .9; }
.knoellchen h2 { margin: 0 0 8px; font-size: 21px; line-height: 1.15; }
.pk-k-facts { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0 0 10px; padding: 8px 0; border-top: 1px dashed var(--line-k); border-bottom: 1px dashed var(--line-k); font-size: 14px; }
.pk-k-facts dt { color: #6b6450; font-weight: 600; }
.pk-k-facts dd { margin: 0; }
.pk-k-text { margin: 0 0 12px; line-height: 1.4; }
.pk-k-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pk-k-actions button { font: inherit; font-weight: 600; padding: 8px 12px; border-radius: var(--r); cursor: pointer; }
.pk-k-primary { background: var(--red); color: var(--on-red); border: 1px solid var(--red); }
.pk-k-primary:hover { background: var(--red-deep); }
.pk-k-secondary { background: none; color: var(--ink-k); border: 1px solid var(--line-k); }
.pk-k-secondary:hover { border-color: #6b6450; }
@media (max-width: 640px) {
  .knoellchen { left: 8px; right: 8px; bottom: 8px; width: auto; max-width: none; font-size: 14px; max-height: 70vh; overflow-y: auto; transform: translateY(24px); }
  .knoellchen.pk-k-in { transform: none; }
  .knoellchen.pk-k-out { transform: translateY(24px); }
  .knoellchen h2 { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .knoellchen, .knoellchen.pk-k-in, .knoellchen.pk-k-out { transform: none; }
}
/* Auf den Karten: Knöllchen an der Stelle des Menüs, Menü solange weggeräumt */
.panel { transition: opacity .3s var(--ease), transform .35s var(--ease), visibility 0s; }
body.pk-ticket .panel { opacity: 0; transform: translateY(-14px); visibility: hidden; pointer-events: none;
  transition: opacity .2s var(--ease-in), transform .2s var(--ease-in), visibility 0s .2s; }
.knoellchen.pk-k-docked { top: 22px; bottom: auto; left: 18px; width: 372px; max-height: calc(100vh - 44px); overflow-y: auto;
  transform: translateY(-28px) rotate(-1.2deg); }
.knoellchen.pk-k-docked.pk-k-in { transform: none; }
.knoellchen.pk-k-docked.pk-k-out { transform: translateY(-28px) rotate(-1.2deg); opacity: 0; }
@media (max-width: 640px) {
  .knoellchen.pk-k-docked { top: 12px; left: 8px; right: 8px; width: auto; max-height: calc(100vh - 24px); transform: translateY(-28px); }
  .knoellchen.pk-k-docked.pk-k-in { transform: none; }
  .knoellchen.pk-k-docked.pk-k-out { transform: translateY(-28px); }
}

/* ---------- Über diese Karte (Panel) ---------- */
.about { border-top: 1px solid var(--line); font-size: 14px; }
.about summary { padding: 8px 16px; cursor: pointer; color: var(--ink-soft); font-weight: 600; }
.about p { margin: 0 16px 8px; color: var(--ink-soft); line-height: 1.4; }
.seo-nav { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0 16px 10px; }
.seo-nav a { color: var(--accent); }

/* ---------- Ortsseiten (SEO) ---------- */
.seo .crumbs { margin: -12px 0 12px; font-size: 14px; color: var(--ink-soft); }
.seo .crumbs a { color: inherit; }
.seo-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 16px; }
.seo-stats div { background: color-mix(in srgb, var(--line) 40%, var(--paper)); border-radius: var(--r); padding: 10px 12px; display: grid; }
.seo-stats b { font-size: 24px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.seo-stats span { font-size: 13px; color: var(--ink-soft); }
.seo .cta { display: inline-block; background: var(--red); color: var(--on-red) !important; text-decoration: none; font-weight: 600; padding: 10px 16px; border-radius: var(--r); }
.seo .cta:hover { background: var(--red-deep); }
.seo-table { overflow-x: auto; margin: 0 0 8px; }
.seo-table table { width: 100%; border-collapse: collapse; font-size: 16px; }
.seo-table th { text-align: left; font-size: 13px; color: var(--ink-soft); font-weight: 600; border-bottom: 2px solid var(--line); padding: 6px 8px 6px 0; }
.seo-table td { border-bottom: 1px solid var(--line); padding: 7px 8px 7px 0; vertical-align: top; }
.seo-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.seo .sub { display: block; font-size: 13px; color: var(--ink-soft); margin: 0; }
.seo .fee-free { color: var(--free); font-weight: 600; }
.seo .fee-paid { color: var(--paid); font-weight: 600; }
.seo .fee-unknown { color: var(--ink-soft); }
.seo-links { list-style: none; padding: 0; margin: 0 0 12px; columns: 2 220px; column-gap: 24px; }
.seo-links li { padding: 3px 0; break-inside: avoid; }
.seo-links span { color: var(--ink-soft); font-size: 14px; }
.seo-card { border-bottom: 1px solid var(--line); padding: 10px 0; }
.seo-card h3 { margin: 0; font-size: 19px; }
.seo-card ul { margin: 6px 0 4px; padding-left: 18px; }
.seo h3 { font-size: 18px; margin: 18px 0 4px; }
.portal-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0 8px; }
.portal-card { display: grid; gap: 4px; padding: 18px; border-radius: var(--r); background: var(--red); color: var(--on-red) !important; text-decoration: none; }
.portal-card b { font-size: 26px; line-height: 1.1; }
.portal-card:hover { background: var(--red-deep); }
@media (max-width: 640px) { .portal-cards { grid-template-columns: 1fr; } }
.seo .fee-customers { color: var(--customers); font-weight: 600; }
.seo-foot { text-align: center; color: var(--ink-soft); font-size: 14px; margin-top: 16px; }
.seo-foot a { color: inherit; }
@media (max-width: 640px) {
  .seo-stats { grid-template-columns: repeat(2, 1fr); }
  .legal article { padding: 20px 16px 14px; }
  .seo-table table { font-size: 15px; }
}

/* ---------- Rechtstexte ---------- */
body.legal { background: var(--mist); }
.legal main { max-width: 42rem; margin: 0 auto; padding: 0 16px 64px; }
.legal .back {
  display: flex; align-items: center; gap: 12px; margin: 0 0 24px; padding: 12px 16px;
  background: var(--head); color: #ffffff; text-decoration: none; font-weight: 600;
}
.legal .back img { width: 36px; height: 36px; border-radius: 6px; }
@media (min-width: 700px) { .legal .back { border-radius: 0 0 var(--r) var(--r); } }
.legal article { background: var(--paper); border-radius: var(--r); box-shadow: var(--lift); padding: 28px 28px 20px; }
.legal h1 { font-size: 36px; line-height: 1.1; margin: 0 0 20px; }
.legal h2 { font-size: 22px; margin: 28px 0 6px; }
.legal p, .legal li { font-size: 17px; line-height: 1.5; }
.legal p { margin: 0 0 12px; }
.legal address { font-style: normal; font-size: 17px; line-height: 1.5; margin-bottom: 12px; }
.legal article a { color: var(--accent); }
.legal .stand { color: var(--ink-soft); font-size: 15px; margin-top: 24px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- Startseite parkplatzkarte.de: Deutschlandkarte als Einstieg ---------- */
/* Parkschild, weich: Marineblau mit Himmelblau. Die Startseite hat bewusst nur dieses eine (dunkle) Design. */
body.pp {
  --ground: #102a4c; --land: #1b3d68; --border: #102a4c; --muted: #a9c1df; --rule: #1b3d68; --ink: #eef4fb;
  --have: #62b0f5; --have-hi: #86c3f8; --have-ink: #0b2340; --head: #0b2340; --link: #86c3f8; --field: #0b2340;
  background: var(--ground); color: var(--ink); margin: 0; min-height: 100%; color-scheme: dark;
}
.pp a:focus-visible { outline: 3px solid var(--spark); outline-offset: 3px; }
.pp-head { background: var(--head); color: #ffffff; }
/* Kopfleiste im selben Raster wie darunter Text | Karte: so steht der Zähler mittig über der Deutschlandkarte */
.pp-head-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px; align-items: center;
  max-width: 1180px; margin: 0 auto; padding: 12px 24px; }
.pp-brand {
  display: flex; align-items: center; gap: 12px; justify-self: start;
  color: inherit; text-decoration: none; font-weight: 700; font-size: 20px;
}

/* rechte Hälfte der Kopfleiste: Zähler mittig über der Karte, Zahnrad ganz rechts */
.pp-head-right { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-width: 0; }
.pp-head-right .pp-count { grid-column: 2; }
.pp-gear-slot { grid-column: 3; justify-self: end; position: relative; }
.pp-count-l .short { display: none; }
.pp-gear { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; border: 1px solid transparent;
  background: transparent; color: var(--muted); cursor: pointer; transition: color .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease); }
.pp-gear svg { transition: transform .5s var(--ease); }
.pp-gear:hover, .pp-gear[aria-expanded="true"] { color: #ffffff; background: rgba(98, 176, 245, .12); border-color: var(--rule); }
.pp-gear:hover svg, .pp-gear[aria-expanded="true"] svg { transform: rotate(60deg); }
.pp-gear:focus-visible { outline: 3px solid var(--spark); outline-offset: 2px; }
.pp-gear-panel { position: absolute; right: 0; top: calc(100% + 10px); z-index: 50; width: min(320px, calc(100vw - 32px));
  background: var(--head); border: 1px solid var(--rule); border-radius: 12px; padding: 14px 16px 6px;
  box-shadow: 0 18px 40px rgba(2, 10, 24, .55); animation: pk-gear-in .2s var(--ease); }
@keyframes pk-gear-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.pp-gear-panel::before { content: ""; position: absolute; top: -7px; right: 14px; width: 12px; height: 12px; background: var(--head);
  border-left: 1px solid var(--rule); border-top: 1px solid var(--rule); transform: rotate(45deg); }
.pp-gear-title { margin: 0 0 6px; font-weight: 700; font-size: 17px; color: #ffffff; }
.pp-gear-panel .display-options { padding: 4px 0 6px; border-top: 1px solid var(--rule); }
.pp-gear-panel .display-options label { color: var(--ink); font-size: 15px; }
.pp-gear-panel .display-options p { color: var(--muted); font-size: 13px; }
.pp-gear-panel .display-options input { appearance: none; -webkit-appearance: none; margin: 0; border: 2px solid var(--muted); border-radius: 5px;
  background: transparent; display: grid; place-content: center; cursor: pointer; transition: background-color .15s var(--ease), border-color .15s var(--ease); }
.pp-gear-panel .display-options input::after { content: ""; width: 10px; height: 6px; border: solid var(--have-ink); border-width: 0 0 2.5px 2.5px;
  transform: translateY(-2px) rotate(-45deg); opacity: 0; }
.pp-gear-panel .display-options input:checked { background: var(--have); border-color: var(--have); }
.pp-gear-panel .display-options input:checked::after { opacity: 1; }
.pp-gear-panel .display-options input:focus-visible { outline: 3px solid var(--spark); outline-offset: 2px; }
/* Zähler: Gesamtzahl aller Parkflächen, zählt weich hoch, wenn neue dazukommen */
.pp-count { display: flex; align-items: baseline; gap: 8px; margin: 0; position: relative;
  font-size: 15px; color: var(--muted); white-space: nowrap; }
.pp-count-n { font-size: 22px; font-weight: 700; color: #ffffff; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.pp-count-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--spark); align-self: center;
  box-shadow: 0 0 0 0 rgba(255, 201, 77, .55); animation: pk-live 2.4s var(--ease) infinite; }
@keyframes pk-live { 0% { box-shadow: 0 0 0 0 rgba(255, 201, 77, .55); } 70%, 100% { box-shadow: 0 0 0 8px rgba(255, 201, 77, 0); } }
.pp-count-up { position: absolute; left: 50%; top: 100%; transform: translate(-50%, -4px); font-size: 13px; font-weight: 700;
  color: var(--spark); opacity: 0; pointer-events: none; font-variant-numeric: tabular-nums; }
.pp-count-up.is-on { animation: pk-count-up 3.2s var(--ease) forwards; }
@keyframes pk-count-up { 0% { opacity: 0; transform: translate(-50%, 4px); } 15%, 75% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -6px); } }
.pp-count.is-ticking .pp-count-n { color: var(--spark); transition: color .3s var(--ease); }
.pp-count .pp-count-n { transition: color 1.2s var(--ease); }
.pp-brand img { border-radius: 8px; }
.pp-brand .tld { color: inherit; }
.pp main { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

.pp-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px; align-items: center; padding: 40px 0 28px; }
.pp-intro h1 { font-size: clamp(40px, 5.4vw, 68px); line-height: .95; letter-spacing: -.015em; margin: 0 0 18px; font-weight: 700; }
/* Suchbegriff für Google, klein über dem Satz: die Überschrift bleibt "Wo parken, und was kostet es?" */
.pp-kicker { display: block; font-size: 17px; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; color: var(--spark); margin-bottom: 12px; }
.pp-lead { font-size: 20px; line-height: 1.4; margin: 0 0 26px; max-width: 30em; color: var(--muted); }
.pp-small { font-size: 15px; color: var(--muted); margin: 18px 0 0; }

/* Suche: Ort, Bezirk oder Stadtteil -> passende Stelle der Landeskarte */
.pp-search { position: relative; display: flex; max-width: 460px; margin: 0 0 22px; }
.pp-search input {
  flex: 1; min-width: 0; font: inherit; font-size: 19px; color: var(--ink); background: var(--field);
  border: 2px solid var(--land); border-right: 0; border-radius: 6px 0 0 6px; padding: 12px 14px;
}
.pp-search input::placeholder { color: var(--muted); }
.pp-search input:focus { outline: none; border-color: var(--have); }
.pp-search button {
  flex: none; width: 56px; border: 0; border-radius: 0 6px 6px 0; background: var(--have); color: var(--have-ink); cursor: pointer;
}
.pp-search button:hover { background: var(--have-hi); }
#pp-suggest {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 4px 0; list-style: none;
  background: var(--field); border: 1px solid var(--land); border-radius: 6px; box-shadow: 0 12px 28px rgba(0, 0, 0, .35);
}
#pp-suggest[hidden] { display: none; }
.pp-opt { display: grid; gap: 1px; padding: 8px 14px; cursor: pointer; }
.pp-opt { border-left: 3px solid transparent; transition: background-color .12s, border-color .12s; }
.pp-opt:hover, .pp-opt.active { background: var(--land); border-left-color: var(--spark); }
.pp-opt-name { font-weight: 700; font-size: 17px; }
.pp-opt-sub { font-size: 14px; color: var(--muted); }
.pp-search-msg { position: absolute; top: calc(100% + 6px); left: 0; right: 0; margin: 0; font-size: 15px; color: var(--muted); }
.pp-search-msg[hidden] { display: none; }

/* Wegweiser: die Links zu den Karten haben die Form eines Schildes an der Straße */
.pp-signs { display: grid; gap: 10px; max-width: 420px; }
.pp-sign {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 16px;
  padding: 12px 44px 12px 18px; background: var(--have); color: var(--have-ink) !important; text-decoration: none;
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%);
  transition: transform .28s var(--spring), background-color .2s var(--ease), box-shadow .2s var(--ease);
  box-shadow: inset 0 0 0 var(--spark);
}
.pp-sign-name { font-size: 26px; font-weight: 700; line-height: 1.05; }
.pp-sign-sub { font-size: 15px; font-weight: 600; opacity: .85; text-align: right; }
.pp-sign:hover, .pp-sign.is-hot { transform: translateX(6px); background: var(--have-hi); box-shadow: inset 5px 0 0 var(--spark); }
.pp-sign:active { transform: translateX(6px) scale(.98); transition-duration: .08s; }
.pp-sign:focus-visible { outline: none; transform: translateX(6px); box-shadow: inset 5px 0 0 var(--spark); text-decoration: underline; }

/* Karte: Ländergrenzen sind schmale Lücken in Hintergrundfarbe, für alle Länder gleich und beim Darüberfahren unverändert */
.pp-map { margin: 0; }
.pp-svg { display: block; width: 100%; max-height: 78vh; height: auto; font-family: inherit; }
.pp-land path, path.pp-land { stroke: var(--border); stroke-width: 1.6; stroke-linejoin: round; }
path.pp-land.is-off { fill: var(--land); }
.pp-land.is-on path { fill: var(--have); cursor: pointer; transition: fill .2s var(--ease), stroke .2s var(--ease); }
.pp-land.is-on:hover path, .pp-land.is-on:focus-visible path, .pp-land.is-hot path { fill: var(--have-hi); }
/* Gelbe Umrandung liegt als eigene Ebene über allen Ländern, sonst überdecken die Nachbarn sie halb */
.pp-hot { fill: none; stroke: var(--spark); stroke-width: 3; stroke-linejoin: round; pointer-events: none; opacity: 0; transition: opacity .2s var(--ease); }
.pp-hot.is-hot { opacity: 1; }
.pp .pp-land:focus, .pp .pp-land:focus-visible { outline: none; }
.pp-land:focus-visible { outline: none; }
.pp-label { font-family: inherit; font-weight: 700; font-size: 18px; fill: var(--have-ink); pointer-events: none; }
.pp-label.is-out { fill: var(--ink); }
/* Stadtstaaten und Saarland: Namensschild neben der Karte, feiner Pfeil zum Land (hell über dem Meer, dunkel über Land) */
.pp-callout { cursor: pointer; }
.pp-callout:focus-visible { outline: none; }
.pp-lead { fill: none; stroke: var(--have); stroke-width: 1.5; stroke-linecap: round; }
.pp-lead.is-land { stroke: var(--have-ink); }
.pp-tip { fill: var(--have-ink); }
.pp-pill { fill: var(--have); transition: fill .2s var(--ease); }
.pp-label.is-pill { font-size: 16px; fill: var(--have-ink); }
.pp-callout:hover .pp-pill, .pp-callout.is-hot .pp-pill, .pp-callout:focus-visible .pp-pill { fill: var(--have-hi); }
.pp-callout.is-hot .pp-pill, .pp-callout:focus-visible .pp-pill { stroke: var(--spark); stroke-width: 2.5; }
.pp-land.is-small path { stroke-width: 2.6; }
.pp-map figcaption { display: flex; gap: 6px 24px; flex-wrap: wrap; align-items: center; justify-content: center; font-size: 15px; color: var(--muted); margin-top: 10px; }
.pp-key { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -2px; margin-right: 6px; }
.pp-key.is-on { background: var(--have); }
.pp-key.is-off { background: var(--land); }

.pp-more { padding: 32px 0 36px; border-top: 1px solid var(--rule); }
.pp-more h2 { font-size: 26px; margin: 0 0 12px; font-weight: 700; }
/* Städte als gleichmäßiges Raster: jede Zeile gleich hoch, Name, Bundesland, Anzahl */
.pp-rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0 32px; }
.pp-rows li { border-top: 1px solid var(--rule); }
.pp-row {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name n" "sub n"; align-items: center;
  padding: 12px 4px 12px 14px; border-left: 4px solid var(--have); margin: 10px 0;
  color: var(--ink) !important; text-decoration: none;
}
.pp-row-name { grid-area: name; font-size: 19px; font-weight: 700; line-height: 1.15; }
.pp-row-sub { grid-area: sub; font-size: 14px; color: var(--muted); }
.pp-row-n { grid-area: n; font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pp-row:hover .pp-row-name, .pp-row:focus-visible .pp-row-name { text-decoration: underline; text-underline-offset: 3px; }
.pp-hubs { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 16px 0 0; font-size: 16px; }
.pp-hubs a, .pp-foot a { color: var(--link); }
.pp-faqs { max-width: 46rem; }
.pp-faq { border-bottom: 1px solid var(--rule); padding: 12px 0; }
.pp-faq:first-of-type { border-top: 1px solid var(--rule); }
.pp-faq summary { font-weight: 700; font-size: 19px; cursor: pointer; }
.pp-faq p { margin: 8px 0 4px; line-height: 1.5; color: var(--muted); font-size: 17px; }
.pp-foot { max-width: 1180px; margin: 0 auto; padding: 0 24px 40px; font-size: 15px; color: var(--muted); display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.pp-foot p { margin: 0; }
.pp-foot nav { display: flex; gap: 18px; }

@media (max-width: 860px) {
  .pp-hero { grid-template-columns: 1fr; padding-top: 24px; gap: 8px; }
  .pp-head-in { grid-template-columns: auto auto; justify-content: space-between; gap: 16px; }
  .pp-head-right { display: flex; gap: 8px; justify-content: flex-end; }
  .pp-count-n { font-size: 19px; }
  .pp-map { max-width: 460px; margin: 20px auto 0; width: 100%; }
  .pp-intro h1 { font-size: 40px; }
  .pp-lead { font-size: 18px; }
  .pp-signs { max-width: none; }
}
@media (max-width: 480px) {
  .pp main, .pp-head-in, .pp-foot { padding-left: 16px; padding-right: 16px; }
  /* schmal: Zahl und Wort untereinander, damit beides neben das Logo passt */
  .pp-count { display: grid; grid-template-columns: auto auto; column-gap: 7px; row-gap: 0; align-items: center; }
  .pp-count-dot { grid-row: 1 / 3; }
  .pp-count-n { font-size: 18px; line-height: 1.1; }
  .pp-count-l { grid-column: 2; font-size: 12px; line-height: 1.1; }
  .pp-count-l .long { display: none; }
  .pp-count-l .short { display: inline; }
  .pp-gear { width: 38px; height: 38px; }
  .pp-sign { gap: 2px 10px; padding-right: 36px; padding-left: 14px; }
  .pp-sign-name { font-size: 22px; white-space: nowrap; }   /* lange Namen wie Baden-Württemberg bleiben einzeilig */
  .pp-sign-sub { font-size: 13px; white-space: nowrap; }
}
@media (max-width: 350px) {
  .pp-brand { font-size: 17px; gap: 8px; }
  .pp-brand .tld { display: none; }
  .pp-brand img { width: 34px; height: 34px; }
  .pp-head-in { gap: 10px; }
  .pp-count-n { font-size: 16px; }
  .pp-count-l { font-size: 11px; }
  .pp-sign-name { white-space: normal; }   /* sehr schmale Handys: dann lieber zweizeilig als seitlich scrollen */
}

/* ================================================================== Bewegung
   Leitlinie: Bewegung erklärt, woher etwas kommt und wohin es geht (Detailkarte schiebt sich vom Rand herein,
   Bezirke tauchen an ihrem Ort auf, die Karte gleitet zum Ziel). Kurz (120–450 ms), weich auslaufend, nie im Weg.
   Wer im System "Bewegung reduzieren" eingestellt hat, bekommt alles ohne Animation (Regel weiter oben). */
@keyframes pk-fade { from { opacity: 0; } }
@keyframes pk-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes pk-drop { from { opacity: 0; transform: translateY(-10px); } }
@keyframes pk-slide-in { from { opacity: 0; transform: translateX(-14px); } }
@keyframes pk-sheet-in { from { opacity: 0; transform: translateX(18px) scale(.985); } }
@keyframes pk-sheet-out { to { opacity: 0; transform: translateX(18px) scale(.985); } }
@keyframes pk-sheet-up { from { opacity: 0; transform: translateY(48px); } }
@keyframes pk-sheet-down { to { opacity: 0; transform: translateY(48px); } }
@keyframes pk-label-in { from { opacity: 0; transform: translate(-50%, -50%) translateY(6px) scale(.9); } }
@keyframes pk-bubble-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.55); } }
@keyframes pk-hint-swap { from { opacity: 0; transform: translateX(-50%) translateY(6px); } }
@keyframes pk-pin-drop { 0% { opacity: 0; transform: translateY(-26px) rotate(-45deg); } 60% { opacity: 1; } }
@keyframes pk-fill { from { fill: var(--land); } }

/* Karte: Panel und Bedienelemente beim Laden */
.panel { animation: pk-drop .45s var(--ease) backwards; }
.leaflet-control-container .leaflet-bar { animation: pk-fade .4s .2s var(--ease) backwards; }

/* Knöpfe: kurzes, spürbares Antippen */
.chip, .d-item, .result, .districts .whole, .pop .actions a, .seo .cta, .portal-card, .sheet-close, .search button, .pp-search button {
  transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), transform .2s var(--spring);
}
.d-item:active, .result:active, .districts .whole:active, .pop .actions a:active, .seo .cta:active, .portal-card:active,
.sheet-close:active, .search button:active, .pp-search button:active { transform: scale(.97); transition-duration: .08s; }
.chip .swatch { transition: background-color .2s var(--ease), box-shadow .2s var(--ease), transform .3s var(--spring); }
.chip:active .swatch { transform: scale(.7); }
.chip .label { transition: color .2s var(--ease); }

/* Detailkarte: schiebt sich herein, beim Wechsel blendet nur der Inhalt über */
.sheet:not([hidden]) { animation: pk-sheet-in .3s var(--ease) backwards; }
.sheet.is-closing { animation: pk-sheet-out .17s var(--ease-in) forwards; pointer-events: none; }
.pop { animation: pk-fade .22s var(--ease) backwards; }
.pop .photo img { animation: pk-fade .35s var(--ease) backwards; }
@media (max-width: 640px) {
  .sheet:not([hidden]) { animation-name: pk-sheet-up; animation-duration: .34s; }
  .sheet.is-closing { animation-name: pk-sheet-down; }
}

/* Bezirke und Orte tauchen an ihrer Stelle auf (Bezirke leicht versetzt, größte zuerst) */
.d-label { transition: opacity .18s var(--ease), background-color .15s var(--ease), color .15s var(--ease); }
.place-bubble { animation: pk-bubble-in .32s var(--spring) backwards; }
.leaflet-pane.is-flying { opacity: 0; visibility: hidden; transition: opacity .12s var(--ease), visibility 0s .12s; }
.leaflet-pk-places-pane { transition: opacity .2s var(--ease); }
.place-bubble .pb-dot { transition: transform .25s var(--spring), box-shadow .15s var(--ease); }

/* Hinweise und Listen */
.zoomhint.pk-swap { animation: pk-hint-swap .3s var(--ease); }
.loading:not([hidden]) { animation: pk-fade .2s .3s var(--ease) backwards; } /* nur zeigen, wenn es wirklich dauert */
#suggest:not([hidden]), #pp-suggest:not([hidden]) { animation: pk-drop .16s var(--ease) backwards; transform-origin: top; }
.results:not([hidden]) { animation: pk-fade .2s var(--ease) backwards; }
.results li { animation: pk-rise .3s var(--ease) backwards; }
.results li:nth-child(2) { animation-delay: 40ms; }
.results li:nth-child(3) { animation-delay: 80ms; }
.results li:nth-child(4) { animation-delay: 120ms; }
.results li:nth-child(5) { animation-delay: 160ms; }
.dest-pin span { animation: pk-pin-drop .5s var(--spring) backwards; }

/* Aufklappen (Bezirksliste, Über diese Karte, Fragen) gleitet, wo der Browser das kann */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  details::details-content {
    block-size: 0; overflow: clip;
    transition: block-size .28s var(--ease), content-visibility .28s allow-discrete;
  }
  details[open]::details-content { block-size: auto; }
}
.pp-faq summary { list-style: none; display: flex; align-items: baseline; gap: 10px; }
.pp-faq summary::-webkit-details-marker { display: none; }
.pp-faq summary::before { content: "›"; display: inline-block; width: .6em; color: var(--spark); font-size: 22px; line-height: 1; transition: transform .25s var(--ease); }
.pp-faq[open] summary::before { transform: rotate(90deg); }

/* Startseite: Inhalt baut sich in Leserichtung auf, dann färben sich die Länder mit Karte ein */
.pp-intro > * { animation: pk-rise .55s var(--ease) backwards; }
.pp-intro > :nth-child(2) { animation-delay: 60ms; }
.pp-intro > :nth-child(3) { animation-delay: 120ms; }
.pp-intro > :nth-child(4) { animation-delay: 180ms; }
.pp-intro > :nth-child(5) { animation-delay: 240ms; }
.pp-signs .pp-sign { animation: pk-slide-in .45s var(--ease) backwards; }
.pp-signs .pp-sign:nth-child(1) { animation-delay: 220ms; }
.pp-signs .pp-sign:nth-child(2) { animation-delay: 290ms; }
.pp-signs .pp-sign:nth-child(3) { animation-delay: 360ms; }
.pp-signs .pp-sign:nth-child(n+4) { animation-delay: 430ms; }
.pp-map .pp-svg { animation: pk-fade .6s .05s var(--ease) backwards; }
.pp-land.is-on path { animation: pk-fill .7s .45s var(--ease) backwards; }
.pp-label, .pp-callout { animation: pk-fade .4s .8s var(--ease) backwards; }
.pp-callout .pp-label { animation: none; }
.pp-hubs a, .pp-foot a, .seo-nav a, .legal article a { transition: color .15s var(--ease); }
.pp-hubs a:hover, .pp-foot a:hover, .seo-nav a:hover, .legal article a:hover { color: var(--spark); }

/* Ortsseiten und Rechtstexte */
.legal article { animation: pk-rise .45s var(--ease) backwards; }

/* Bedienung: dieselbe Farbwelt, klare Zustände und ausreichend große Ziele. */
.skip-link { position: fixed; left: 12px; top: 8px; z-index: 2000; padding: 12px 16px; background: var(--paper); color: var(--ink); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
/* Zwei gleichwertige Knöpfe nebeneinander: Liste um die Kartenmitte, zurück zur Übersicht */
.map-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 12px 8px; font-size: 14px; }
.map-links button, .map-links a {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 6px 8px;
  font: inherit; font-weight: 600; line-height: 1.1; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer;
  color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .15s var(--ease), background-color .15s var(--ease), transform .2s var(--spring);
}
.map-links button:hover, .map-links a:hover { border-color: var(--accent); background: var(--mist); }
.map-links button:active, .map-links a:active { transform: scale(.97); transition-duration: .08s; }
.map-links svg { flex: none; width: 16px; height: 16px; color: var(--accent); }
.results-head h2 { flex: 1; margin: 4px 0 6px; font-size: 15px; font-weight: 600; color: var(--ink); }
.results-head button, .sheet-close { min-width: 44px; min-height: 44px; }
.pop h2 { padding-right: 40px; }
.pop h2:focus { outline-offset: 4px; }
.leaflet-bar a, .leaflet-bar button { width: 44px !important; height: 44px !important; line-height: 44px !important; }
.chip, .d-item, .search button { min-height: 44px; }
.chip:focus-visible, .d-item:focus-visible, .result:focus-visible { outline-offset: -3px; }
.pp-search-msg { position: static; flex-basis: 100%; padding: 8px 0 0; }
.pp-search { flex-wrap: wrap; }
.pp-search input { width: calc(100% - 56px); }
.pp-search button { min-height: 48px; }
.seo .fee-free, .seo .fee-paid, .seo .fee-customers { color: var(--ink); }
@media (max-width: 640px) {
  .panel { max-height: 55vh; max-height: 55dvh; }
  /* am Handy flacher, damit das Panel die Karte nicht zudeckt */
  .map-links { margin: 2px 8px 6px; gap: 6px; }
  .map-links button, .map-links a { min-height: 36px; padding: 4px 6px; }
  .sheet { max-height: 62vh; max-height: 62dvh; bottom: max(8px, env(safe-area-inset-bottom)); }
  .d-label { min-height: 32px; }
  .zoomhint { max-width: calc(100vw - 100px); text-align: center; white-space: normal; }
}
@media (max-width: 360px) {
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* v45: zugängliche Darstellung und Reflow, ohne die Parkschild-Farbwelt zu ersetzen. */
html { scroll-padding-top: 16px; }
input, button, select, textarea { font: inherit; }
[hidden] { display: none !important; }
.brand > div, .pp-intro, .pp-sign-name { min-width: 0; }
.brand h1, .legal h1, .pp-intro h1 { overflow-wrap: anywhere; }
.pop dl { grid-template-columns: minmax(0, auto) minmax(0, 1fr); }
.pop dd, .pop .src, .opt-label, .pp-opt-name { overflow-wrap: anywhere; }
.panel { max-height: calc(100dvh - 32px); overscroll-behavior: contain; scrollbar-gutter: stable; }
.panel:focus-within { scroll-behavior: auto; }
#suggest, #pp-suggest { max-height: min(330px, 42dvh); overflow-y: auto; overscroll-behavior: contain; }
.search input { font-size: max(16px, 1em); }
.search, .pp-search input, .map-links button, .map-links a, .result-more { border-color: #587da8; }
.map-links button, .map-links a { min-height: 44px; }
.opt, .pp-opt { min-height: 44px; }
.result-more { min-height: 44px; width: 100%; padding: 10px; font: inherit; color: var(--accent); border: 1px solid var(--line); background: var(--paper); cursor: pointer; }
.results-note { margin: 2px 0 8px; font-size: 13px; color: var(--ink-soft); }
.result .r-location { font-size: 13px; color: var(--ink-soft); }
.results-head h2 { min-width: 0; overflow-wrap: anywhere; }
.seo-table:focus-visible { outline-offset: 4px; }
.seo-table th, .seo-table td { overflow-wrap: anywhere; }
.seo-summary h2, .seo-summary p { margin: 8px 16px; font-size: 16px; }
.seo-summary a, .pp-more a { color: var(--accent); text-underline-offset: 3px; }
.region-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); list-style: none; padding: 0; gap: 4px 16px; }
.region-links a { display: block; min-height: 44px; padding: 8px 0; overflow-wrap: anywhere; }
.pp-more > p { line-height: 1.5; max-width: 46rem; }
.pp-search-msg { flex-basis: 100%; }
.pp-foot nav { flex-wrap: wrap; align-items: flex-start; }
.display-settings { font-size: 15px; color: var(--ink); max-width: 100%; }
.display-settings summary { cursor: pointer; min-height: 44px; padding: 10px 0; color: var(--accent); }
.display-options { padding: 8px 0; max-width: 360px; }
.display-options label { display: flex; gap: 10px; align-items: center; min-height: 44px; cursor: pointer; line-height: 1.4; }
.display-options input { width: 22px; height: 22px; flex: none; accent-color: var(--accent); }
.display-options p { font-size: 14px; line-height: 1.5; color: var(--ink-soft); margin: 8px 0; }
.support-link { font: inherit; background: none; color: var(--accent); border: 0; text-decoration: underline; padding: 10px 0; min-height: 44px; cursor: pointer; }
.knoellchen { max-height: calc(100dvh - 32px); overflow-y: auto; }
dialog.knoellchen { color: var(--ink); border: 1px solid var(--line); margin: auto; inset: 16px; }
dialog.knoellchen::backdrop { background: rgba(0, 0, 0, .65); }
:root[data-pk-contrast] { --paper: #061529; --mist: #071b31; --head: #020b17; --ink: #fff; --ink-soft: #d8e9ff; --line: #7996b8; --accent: #a8d7ff; }
[data-pk-contrast] body.pp { --ground: #071b31; --head: #020b17; --ink: #fff; --muted: #d8e9ff; --field: #061529; --land: #7996b8; --rule: #7996b8; --link: #a8d7ff; }
[data-pk-symbols] { --free: #56b4e9; --paid: #f0c95b; --unknown: #e0e0e0; --customers: #d490d4; }
[data-pk-symbols] .chip[data-fee="paid"] .swatch { border-radius: 0; }
[data-pk-symbols] .chip[data-fee="unknown"] .swatch { border-radius: 0; transform: rotate(45deg); }
[data-pk-symbols] .chip[data-fee="customers"] .swatch { border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
[data-pk-motion] .pp-count-dot { animation: none; }
[data-pk-motion] *, [data-pk-motion] *::before, [data-pk-motion] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
@media (max-width: 640px) {
  .panel { max-height: 52dvh; }
  .sheet { max-height: 44dvh; }
  .display-settings { flex-basis: 100%; }
}
@media (max-height: 500px) and (min-width: 641px) {
  .panel, .sheet { max-height: calc(100dvh - 32px); }
}
@media (forced-colors: active) {
  :root { --paper: Canvas; --mist: Canvas; --ink: CanvasText; --ink-soft: CanvasText; --line: ButtonText; --accent: LinkText; }
  .chip[aria-pressed="true"] { border: 2px solid Highlight; }
  .chip[aria-pressed="false"] { border: 2px dashed GrayText; }
  .result, .sheet, .panel { border: 1px solid CanvasText; }
  .pp-sign { clip-path: none; color: LinkText !important; border: 1px solid LinkText; }
  .pp-land.is-on path, .pp-pill { forced-color-adjust: none; fill: #62b0f5; }
  :focus-visible { outline: 3px solid Highlight !important; }
}