/* =========================================================================
 * MapKit – map.css
 * -------------------------------------------------------------------------
 * Alles unter .mk-app gescoped und mit mk- präfixt, damit nichts mit dem
 * WordPress-Theme kollidiert.
 *
 * BRANDING ANPASSEN: nur die Tokens im :root-Block ändern.
 *
 * SCHRIFTEN: Diese Version lädt bewusst KEINE externen Webfonts.
 * Verwendet werden Systemschriften; wenn das Theme eigene Schriften über
 * die CSS-Variablen --wp--preset--font-family--* bereitstellt, werden diese
 * bevorzugt. Damit entsteht durch die Karte keine Verbindung zu Google.
 * ========================================================================= */

:root {
  /* Farben – Alpenrose & Tiefgrün */
  --mk-paper:       #FBF8F5;
  --mk-card:        #FFFFFF;
  --mk-ink:         #23302B;   /* tiefes Tannengrün statt Schwarz */
  --mk-ink-soft:    #5C6B63;
  --mk-line:        #E6DED7;
  --mk-sage:        #EEF1EC;
  --mk-accent:      #A2566E;   /* Alpenrose – der einzige Akzent */
  --mk-accent-soft: #F4E7EB;
  --mk-accent-ink:  #7C3E54;

  /* Radien */
  --mk-r-sm: 10px;
  --mk-r-md: 16px;
  --mk-r-lg: 24px;

  /* Schatten – dezent, nie hart */
  --mk-shadow-sm: 0 1px 2px rgba(35, 48, 43, .05);
  --mk-shadow-md: 0 8px 24px -12px rgba(35, 48, 43, .22);
  --mk-shadow-lg: 0 24px 48px -20px rgba(35, 48, 43, .28);

  /* Typografie.
     Reihenfolge: Theme-Schrift (falls vorhanden) -> System-Serif/Sans.
     Die Designrichtung bleibt: Serif für Überschriften, Sans für UI. */
  --mk-font-display: var(--wp--preset--font-family--heading,
                     var(--wp--preset--font-family--serif,
                     ui-serif, Georgia, Cambria, 'Times New Roman', serif));
  --mk-font-body: var(--wp--preset--font-family--body,
                  var(--wp--preset--font-family--system-font,
                  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                  'Helvetica Neue', Arial, sans-serif));

  /* Vertikaler Rhythmus im Filterpanel.
     Zwei Werte im Verhältnis 2:1 tragen das gesamte Panel – Sonderfälle
     für einzelne Gruppen sind dadurch nicht nötig. */
  --mk-space-group: .9rem;   /* Trennlinie ↔ Überschrift, Chips ↔ Trennlinie */
  --mk-space-label: .45rem;  /* Überschrift ↔ Optionen */

  /* Maße */
  --mk-map-h: 720px;
  --mk-sidebar: 296px;
}

/* --- Grundgerüst ---------------------------------------------------------- */
.mk-app {
  font-family: var(--mk-font-body);
  color: var(--mk-ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.mk-app *,
.mk-app *::before,
.mk-app *::after { box-sizing: border-box; }

/* WICHTIG – nicht entfernen.
   Autoren-CSS schlägt das Browser-Standardverhalten von [hidden] immer,
   unabhängig von der Spezifität. Jede Regel wie `display: flex` an einem
   Element, das per hidden-Attribut versteckt wird, macht das Verstecken
   also wirkungslos. Genau daran lag der dauerhaft sichtbare Empty-State.
   Diese Regel stellt das erwartete Verhalten für den gesamten Baum her. */
.mk-app [hidden] { display: none !important; }

.mk-no-scroll { overflow: hidden; }

/* --- Meldung bei harten Fehlern ------------------------------------------ */
.mk-notice {
  background: var(--mk-accent-soft);
  border: 1px solid var(--mk-accent);
  border-radius: var(--mk-r-md);
  padding: 1.25rem 1.4rem;
  margin-bottom: 1.5rem;
}
.mk-notice__title {
  font-family: var(--mk-font-display);
  font-weight: 400;
  font-size: 1.25rem;
  margin: 0 0 .35rem;
  color: var(--mk-accent-ink);
}
.mk-notice p { margin: 0; color: var(--mk-ink); }

/* Wenn gar nichts geladen werden konnte: Karte und Liste ausblenden */
.mk-app--error .mk-layout,
.mk-app--error .mk-results { display: none; }

/* --- Layout: Filter + Karte ---------------------------------------------- */
.mk-layout {
  display: grid;
  gap: 1.5rem;
  /* Grid-Items können ihre Zeile nicht verlassen. Zusammen mit dem
     overflow:hidden am Panel startet der Ergebnisbereich dadurch immer
     unter dem höheren der beiden Elemente – ohne feste Abstände. */
  align-content: start;
}

@media (min-width: 1000px) {
  .mk-layout {
    grid-template-columns: var(--mk-sidebar) 1fr;
    align-items: start;
    gap: 1.25rem;
  }
}

@media (min-width: 1400px) {
  .mk-layout { gap: 1.5rem; }
}

/* --- Filter-Panel --------------------------------------------------------- */
.mk-panel {
  background: var(--mk-card);
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-r-lg);
  padding: 1.25rem 1.15rem;
  box-shadow: var(--mk-shadow-sm);
}

@media (min-width: 1000px) {
  /* Der Filter darf nie höher werden als die Karte – sonst entsteht unter
     der Karte die leere Fläche, die im Test aufgefallen ist. Wird der
     Inhalt länger, scrollt das Panel in sich selbst. */
  .mk-panel {
    display: flex;
    flex-direction: column;
    /* Begrenzt zugleich den Höhenbeitrag des Panels zur Grid-Zeile.
       Dadurch bestimmt immer die Karte die Höhe des Finder-Bereichs. */
    max-height: var(--mk-map-h);
    min-height: 0;
    /* Sicherheitsnetz: selbst wenn der Innenbereich wider Erwarten nicht
       scrollen sollte, kann kein Inhalt aus dem Panel heraus in den
       Ergebnisbereich ragen. */
    overflow: hidden;
    position: sticky;
    top: 1.5rem;
  }
  .mk-panel__scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Platz für den Fokusring der Chips am Rand */
    margin-right: -.35rem;
    padding-right: .35rem;

    /* Tastaturbedienung: ein per Tab angesprungener Chip wird immer
       oberhalb des Auslaufs eingescrollt und liegt nie darunter.
       Der Wert entspricht der Höhe des Auslaufs plus etwas Luft. */
    scroll-padding-block-end: 3rem;
  }

  /* Weicher Abschluss am unteren Rand des Scrollbereichs.
   *
   * Umgesetzt als sticky Pseudo-Element INNERHALB des Scrollcontainers:
   * Solange weiter unten Inhalt folgt, bleibt es am unteren Rand stehen und
   * legt sich über eine angeschnittene Chip-Zeile – die läuft dadurch weich
   * aus, statt wie eine Reihe halber Balken zu wirken, und das Auslaufen
   * signalisiert zugleich, dass dort noch etwas kommt.
   *
   * Ist der Bereich fertig gescrollt oder gar nicht scrollbar, liegt das
   * Element am Ende des Inhalts und verdeckt nur seinen eigenen Freiraum.
   * Es braucht deshalb keine Kenntnis über Anzahl, Höhe oder Reihenfolge
   * der Filtergruppen und funktioniert mit mehr wie mit weniger Filtern.
   *
   * pointer-events: none – Chips darunter bleiben mit Maus, Trackpad und
   * Touch normal bedienbar. */
  .mk-panel__scroll::after {
    content: '';
    display: block;
    position: sticky;
    bottom: 0;
    height: 2.25rem;
    /* spannt sich über die volle Breite inklusive Scrollleistenspalte */
    margin-right: -.35rem;
    background: linear-gradient(to bottom, transparent, var(--mk-card) 78%);
    pointer-events: none;
  }

  .mk-panel__foot {
    border-top: 1px solid var(--mk-line);
    padding-top: .75rem;
  }
}

.mk-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: var(--mk-space-group);
}

.mk-app .mk-panel__head h2,
.mk-app .mk-sheet__head h2 {
  font-family: var(--mk-font-display);
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.2;
  margin: 0;
}

.mk-count {
  font-size: .875rem;
  color: var(--mk-accent-ink);
  background: var(--mk-accent-soft);
  padding: .2rem .6rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* Der Suchbereich ist strukturell anders (Eingabefeld statt Chips), folgt
   aber demselben Rhythmus: Abstand nach unten wie bei jeder Gruppe, danach
   setzt die Trennlinie der ersten Filtergruppe an. */
.mk-field { margin: 0 0 var(--mk-space-group); }

.mk-field__label,
.mk-group__title {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  color: var(--mk-ink);
  margin-bottom: var(--mk-space-label);
  padding: 0;
}

.mk-search {
  width: 100%;
  font: inherit;
  font-size: .95rem;
  color: var(--mk-ink);
  background: var(--mk-sage);
  border: 1px solid transparent;
  border-radius: var(--mk-r-sm);
  padding: .55rem .75rem;
}
.mk-search::placeholder { color: var(--mk-ink-soft); }
.mk-search:focus-visible {
  outline: 2px solid var(--mk-accent);
  outline-offset: 2px;
  background: var(--mk-card);
  border-color: var(--mk-line);
}

/* Jede Filtergruppe folgt demselben Aufbau:
   Trennlinie – space-group – Überschrift – space-label – Chips – space-group
   Das gilt für <fieldset> und <details> gleichermassen. */
.mk-group {
  border: 0;
  border-top: 1px solid var(--mk-line);
  margin: 0;
  padding: var(--mk-space-group) 0;
}

/* Nur wenn eine Gruppe ganz oben im Panel steht (Suchfeld abgeschaltet),
   entfällt die Trennlinie.

   Bewusst :first-child statt :first-of-type: :first-of-type zählt je
   Elementtyp. Da das Panel <fieldset> und <details> mischt, galt die Regel
   bisher zusätzlich für die erste einklappbare Gruppe – „Camping / Van"
   verlor dadurch Trennlinie und oberen Abstand. Aus demselben Grund traf
   :last-of-type sowohl „Magic Pass" als auch „Kanton" und gab beiden einen
   kleineren unteren Abstand. Genau daraus entstand der ungleiche Rhythmus. */
.mk-group:first-child { border-top: 0; padding-top: 0; }

/* Einklappbare Gruppen: dieselben Abstände, nur verteilt auf summary und
   panel, weil der eingeklappte Zustand kein panel rendert. */
.mk-group--collapsible { padding: 0; }
.mk-group__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: var(--mk-space-group) 0 var(--mk-space-label);
  cursor: pointer;
  list-style: none;
}
/* Zugeklappt übernimmt die summary den unteren Gruppenabstand komplett. */
.mk-group--collapsible:not([open]) > .mk-group__summary {
  padding-bottom: var(--mk-space-group);
}
.mk-group__summary::-webkit-details-marker { display: none; }
.mk-group__summary:hover .mk-group__title { color: var(--mk-accent-ink); }
.mk-group__summary:focus-visible {
  outline: 2px solid var(--mk-accent);
  outline-offset: 2px;
  border-radius: 6px;
}
.mk-group__summary .mk-group__title { margin: 0; }

.mk-group__chevron {
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--mk-ink-soft);
  border-bottom: 1.5px solid var(--mk-ink-soft);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
  flex: none;
}
.mk-group--collapsible[open] > .mk-group__summary .mk-group__chevron {
  transform: rotate(225deg) translate(-2px, -2px);
}
.mk-group__panel { padding-bottom: var(--mk-space-group); }

.mk-group__hint {
  font-size: .8rem;
  color: var(--mk-ink-soft);
  margin: 0 0 var(--mk-space-label);
}

.mk-options { display: flex; flex-wrap: wrap; gap: .35rem; }

/* Chips: echte Checkbox, visuell versteckt – das Label ist die Fläche */
.mk-chip { position: relative; }

.mk-chip input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  margin: 0;
}

.mk-chip label {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  font-size: .82rem;
  line-height: 1.2;
  color: var(--mk-ink);
  background: var(--mk-sage);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: .34rem .68rem;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.mk-chip__icon { display: inline-flex; color: var(--mk-ink-soft); }

.mk-chip label:hover { background: #E4E9E3; }

.mk-chip input:checked + label {
  background: var(--mk-accent);
  border-color: var(--mk-accent);
  color: #fff;
}
.mk-chip input:checked + label .mk-chip__icon { color: rgba(255,255,255,.85); }

.mk-chip input:focus-visible + label {
  outline: 2px solid var(--mk-accent);
  outline-offset: 2px;
}

/* --- Buttons -------------------------------------------------------------- */
.mk-app .mk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1;
  border: 1px solid var(--mk-line);
  border-radius: 999px;
  background: var(--mk-card);
  color: var(--mk-ink);
  padding: .62rem 1.05rem;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.mk-app .mk-btn:hover { border-color: var(--mk-ink-soft); }
.mk-app .mk-btn:focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 2px; }
.mk-app .mk-btn[disabled] { opacity: .45; cursor: default; }
.mk-app .mk-btn[disabled]:hover { border-color: var(--mk-line); }

.mk-app .mk-btn--primary {
  background: var(--mk-accent);
  border-color: var(--mk-accent);
  color: #fff;
}
.mk-app .mk-btn--primary:hover {
  background: var(--mk-accent-ink);
  border-color: var(--mk-accent-ink);
}

.mk-app .mk-btn--block { width: 100%; }

.mk-panel__foot { margin-top: .75rem; }

/* --- Karte ---------------------------------------------------------------- */
.mk-mapwrap {
  position: relative;
  border-radius: var(--mk-r-lg);
  overflow: hidden;
  border: 1px solid var(--mk-line);
  box-shadow: var(--mk-shadow-md);
  background: var(--mk-sage);
}

.mk-map {
  height: var(--mk-map-h);
  min-height: 420px;
  width: 100%;
  background: var(--mk-sage);
}

@media (max-width: 999px) {
  .mk-map { height: 68vh; min-height: 400px; }
}

/* Leaflet ans Design anpassen */
.mk-app .leaflet-container {
  font-family: var(--mk-font-body);
  background: var(--mk-sage);
}
.mk-app .leaflet-control-zoom a {
  border-radius: 10px !important;
  border: 1px solid var(--mk-line);
  color: var(--mk-ink);
  background: var(--mk-card);
  box-shadow: var(--mk-shadow-sm);
  width: 34px; height: 34px; line-height: 32px;
  margin-bottom: 4px;
}
.mk-app .leaflet-control-zoom a:hover { background: var(--mk-sage); }
.mk-app .leaflet-control-attribution {
  background: rgba(255,255,255,.85);
  font-size: 10px;
  border-radius: 8px 0 0 0;
  color: var(--mk-ink-soft);
}
.mk-app .leaflet-control-attribution a { color: var(--mk-accent-ink); }

/* Marker */
.mk-pin { background: none; border: 0; }
.mk-pin svg {
  filter: drop-shadow(0 4px 6px rgba(35,48,43,.25));
  transition: transform .15s ease;
}
.mk-pin:hover svg,
.mk-pin:focus svg { transform: translateY(-3px) scale(1.06); }
.mk-app .leaflet-marker-icon:focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 3px; }

/* Hover-Tooltip der Marker.
   Bewusst keine Leaflet-Sprechblase: Pfeil und Standardrahmen entfallen,
   es bleibt eine kleine, ruhige Karte in den Tokens des Projekts. */
.mk-app .mk-tooltip {
  background: var(--mk-card);
  color: var(--mk-ink);
  font-family: var(--mk-font-body);
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-r-sm);
  box-shadow: var(--mk-shadow-md);
  padding: .38rem .6rem;
  white-space: nowrap;
  pointer-events: none;
}
/* Pfeilspitze der Standard-Sprechblase entfernen */
.mk-app .mk-tooltip::before { display: none; }

.mk-tooltip__title {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.25;
}
.mk-tooltip__meta {
  display: block;
  font-size: .72rem;
  line-height: 1.3;
  color: var(--mk-ink-soft);
  margin-top: .1rem;
}

/* Cluster */
.mk-cluster {
  display: flex; align-items: center; justify-content: center;
  background: var(--mk-card);
  color: var(--mk-ink);
  border: 1.5px solid var(--mk-accent);
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
  box-shadow: var(--mk-shadow-md);
}
.mk-cluster--sm { width: 34px; height: 34px; }
.mk-cluster--md { width: 42px; height: 42px; }
.mk-cluster--lg { width: 50px; height: 50px; background: var(--mk-accent); color: #fff; }

/* --- Popup / Vorschaukarte ------------------------------------------------ */
.mk-app .mk-popup .leaflet-popup-content-wrapper {
  padding: 0;
  border-radius: var(--mk-r-md);
  box-shadow: var(--mk-shadow-lg);
  overflow: hidden;
  background: var(--mk-card);
}
.mk-app .mk-popup .leaflet-popup-content { margin: 0; width: 300px !important; }
.mk-app .mk-popup .leaflet-popup-tip { background: var(--mk-card); }
.mk-app .mk-popup .leaflet-popup-close-button {
  width: 30px; height: 30px;
  top: 8px; right: 8px;
  color: var(--mk-ink);
  background: rgba(255,255,255,.9);
  border-radius: 999px;
  font-size: 18px; line-height: 28px;
}
.mk-app .mk-popup .leaflet-popup-close-button:hover { background: #fff; color: var(--mk-accent); }

/* Begrenzt die Popup-Höhe Leaflet den Inhalt, setzt es die Klasse
   leaflet-popup-scrolled mit hellgrauen Trennlinien. Die passen nicht zum
   Design und werden entfernt – der Inhalt bleibt scrollbar. */
.mk-app .mk-popup .leaflet-popup-scrolled {
  border-top: 0;
  border-bottom: 0;
}

.mk-card__media { background: var(--mk-sage); }
.mk-card__img { display: block; width: 100%; height: 152px; object-fit: cover; }
.mk-card__img--empty {
  display: flex; align-items: center; justify-content: center;
  height: 96px;
  color: var(--mk-ink-soft);
}
.mk-card__img--empty svg { width: 28px; height: 28px; }

/* Mit Bild: Platzhalter und Foto liegen deckungsgleich übereinander.
   Fällt das Foto aus, erscheint der Platzhalter in genau derselben Höhe –
   die Karte springt nicht. */
.mk-card__media--photo { position: relative; height: 152px; }
.mk-card__media--photo .mk-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.mk-card__body { padding: 1rem 1.1rem 1.15rem; }

.mk-card__region {
  display: flex; align-items: center; gap: .3rem;
  font-size: .78rem;
  color: var(--mk-ink-soft);
  margin: 0 0 .25rem;
}

.mk-app .mk-card__title {
  font-family: var(--mk-font-display);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.15;
  margin: 0 0 .6rem;
  color: var(--mk-ink);
}

.mk-card__badges {
  display: flex; flex-wrap: wrap; gap: .3rem;
  list-style: none; margin: 0 0 .65rem; padding: 0;
}
.mk-card__badges li {
  font-size: .72rem;
  color: var(--mk-accent-ink);
  background: var(--mk-accent-soft);
  border-radius: 999px;
  padding: .16rem .5rem;
}

.mk-card__text { font-size: .875rem; color: var(--mk-ink-soft); margin: 0 0 .6rem; }
.mk-card__facts { font-size: .78rem; color: var(--mk-ink-soft); margin: 0 0 .85rem; }
.mk-card .mk-btn { width: 100%; }

/* --- Leerzustand ---------------------------------------------------------- */
.mk-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  text-align: center;
  padding: 2rem;
  background: rgba(251,248,245,.94);
  z-index: 500;
}
.mk-app .mk-empty h2 {
  font-family: var(--mk-font-display);
  font-weight: 400;
  font-size: 1.5rem;
  margin: 0;
}
.mk-empty p { color: var(--mk-ink-soft); margin: 0 0 1rem; max-width: 34ch; }

/* --- Trefferliste --------------------------------------------------------- */
.mk-results { margin-top: clamp(2.5rem, 5vw, 4rem); }
.mk-app .mk-results h2 {
  font-family: var(--mk-font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.5vw, 1.85rem);
  margin: 0 0 1.35rem;
}

/* Theme-Reset für die Trefferliste.
   WordPress-Themes rücken Listen im Inhaltsbereich fast immer ein, etwa mit
   `.entry-content ul { padding-inline-start: 1.5em }`. Solche Selektoren
   haben eine höhere Spezifität als `.mk-list` und schoben die Cards
   gegenüber der Karte nach rechts. Deshalb unter .mk-app gescoped und die
   Einrückung ausdrücklich auf null gesetzt – physisch wie logisch, damit
   auch Themes mit logischen Eigenschaften nichts überschreiben. */
.mk-app .mk-list {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-inline-start: 0;
  margin-inline-start: 0;
  display: grid;
  gap: 1.25rem;
}

/* Überschrift und Abschnitt auf derselben Achse wie die Karte halten */
.mk-app .mk-results,
.mk-app .mk-results > h2 {
  margin-left: 0;
  padding-left: 0;
  padding-inline-start: 0;
  margin-inline-start: 0;
}

/* Kein Listenpunkt und keine Einrückung an den Cards selbst */
.mk-app .mk-card2 {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
  margin-inline-start: 0;
  padding-inline-start: 0;
}
/* Mobile 1 · Tablet 2 · Desktop 3 */
/* Gleiche Spezifität wie die Basisregel oben, sonst würde diese gewinnen
   und der grössere Abstand auf Desktop verloren gehen. */
@media (min-width: 660px)  { .mk-app .mk-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .mk-app .mk-list { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }

/* --- Ergebnis-Card mit Bild --- */
.mk-card2 {
  display: flex;
  flex-direction: column;
  background: var(--mk-card);
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-r-lg);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.mk-card2:hover {
  border-color: #D8CEC6;
  box-shadow: var(--mk-shadow-md);
}
/* Fokus im Inneren hebt die ganze Card hervor */
.mk-card2:focus-within { box-shadow: var(--mk-shadow-md); }

.mk-card2__media {
  position: relative;
  background: var(--mk-sage);
  /* einheitliches Seitenverhältnis für alle Cards, mit Fallback */
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
@supports not (aspect-ratio: 16 / 10) {
  .mk-card2__media { height: 190px; }
}

/* Beide Ebenen füllen den Medienbereich vollständig aus. Der Platzhalter
   steht zuerst im Markup, das Foto liegt darüber – versteckt der
   Bild-Fallback das Foto, wird der Platzhalter ohne Umbruch sichtbar. */
.mk-card2__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Ohne Bild: ruhige Salbeifläche mit dezentem Symbol – kein kaputter
   Bildplatzhalter, gleiche Höhe wie bebilderte Cards. */
.mk-card2__img--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #EEF1EC 0%, #E3E8E2 100%);
  color: #A8B4AB;
}
.mk-card2__img--empty svg { width: 30px; height: 30px; }

.mk-card2__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.1rem 1.2rem 1.2rem;
}

.mk-app .mk-card2__title {
  font-family: var(--mk-font-display);
  font-weight: 500;
  font-size: 1.22rem;
  line-height: 1.2;
  margin: 0 0 .2rem;
  color: var(--mk-ink);
}

/* Titel ist zugleich der Button „auf der Karte zeigen" */
.mk-card2__go {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.mk-card2__go:hover { color: var(--mk-accent-ink); }
.mk-card2__go:focus-visible {
  outline: 2px solid var(--mk-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.mk-card2__region {
  font-size: .78rem;
  color: var(--mk-ink-soft);
  margin: 0 0 .7rem;
}

.mk-card2__badges {
  display: flex; flex-wrap: wrap; gap: .3rem;
  list-style: none; margin: 0 0 .7rem; padding: 0;
}
.mk-card2__badges li {
  font-size: .72rem;
  color: var(--mk-accent-ink);
  background: var(--mk-accent-soft);
  border-radius: 999px;
  padding: .17rem .55rem;
}

.mk-card2__text {
  font-size: .875rem;
  line-height: 1.55;
  color: var(--mk-ink-soft);
  margin: 0 0 1rem;
}

/* Camping-/Stellplatzinformation: bewusst als ruhige Zusatzzeile unter der
   Kurzbeschreibung, abgesetzt durch dieselbe Haarlinie wie im Filterpanel.
   Kleiner gesetzt als der Kartentext, damit die Card nicht überladen wirkt. */
.mk-card2__camping {
  margin: 0 0 1rem;
  padding-top: .7rem;
  border-top: 1px solid var(--mk-line);
}
.mk-card2__camping p { margin: 0 0 .15rem; }
.mk-card2__camping p:last-child { margin-bottom: 0; }
.mk-card2__camping-label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--mk-ink);
}
.mk-card2__camping-head { font-size: .8rem; color: var(--mk-ink-soft); }
.mk-card2__camping-list { font-size: .78rem; color: var(--mk-ink-soft); }

/* Link immer bündig am unteren Rand, damit die Cards ruhig wirken */
.mk-card2__link {
  margin-top: auto;
  align-self: flex-start;
  font-size: .82rem;
  font-weight: 600;
  color: var(--mk-accent-ink);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--mk-accent-soft);
}
.mk-card2__link:hover { border-bottom-color: var(--mk-accent); }
.mk-card2__link:focus-visible {
  outline: 2px solid var(--mk-accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.mk-list__item {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--mk-card);
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-r-md);
  padding: .7rem .95rem;
}

.mk-list__go {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  text-align: left;
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
}
.mk-list__go:focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 3px; border-radius: 4px; }
.mk-list__title { font-weight: 600; font-size: .95rem; }
.mk-list__go:hover .mk-list__title { color: var(--mk-accent-ink); }
.mk-list__meta { font-size: .78rem; color: var(--mk-ink-soft); }

.mk-list__link {
  font-size: .8rem;
  font-weight: 600;
  color: var(--mk-accent-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--mk-accent-soft);
  white-space: nowrap;
}
.mk-list__link:hover { border-bottom-color: var(--mk-accent); }
.mk-list__link:focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 2px; }

/* --- Mobile: Bedienleiste + Bottom Sheet ---------------------------------- */
.mk-mobilebar { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.mk-mobilebar .mk-count { margin-left: auto; }

.mk-filter-badge {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: 20px; height: 20px;
  font-size: .72rem;
  border-radius: 999px;
  background: #fff;
  color: var(--mk-accent-ink);
  padding: 0 .3rem;
}

.mk-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(35,48,43,.4);
  z-index: 100000;
}

.mk-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 100001;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--mk-card);
  color: var(--mk-ink);
  font-family: var(--mk-font-body);
  border-radius: var(--mk-r-lg) var(--mk-r-lg) 0 0;
  box-shadow: var(--mk-shadow-lg);
  transform: translateY(101%);
  transition: transform .28s cubic-bezier(.32,.72,0,1);
  /* visibility:hidden nimmt den geschlossenen Dialog zusätzlich zu `inert`
     aus der Tabreihenfolge – auch in Browsern ohne inert-Unterstützung. */
  visibility: hidden;
}
.mk-sheet.is-open { transform: translateY(0); visibility: visible; }

.mk-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem .85rem;
  border-bottom: 1px solid var(--mk-line);
}
.mk-sheet__close {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--mk-line);
  border-radius: 999px;
  background: var(--mk-card);
  color: var(--mk-ink);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.mk-sheet__close:focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 2px; }

.mk-sheet__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.25rem;
  -webkit-overflow-scrolling: touch;
}

.mk-sheet__foot {
  display: flex;
  gap: .6rem;
  padding: .9rem 1.25rem calc(.9rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--mk-line);
  background: var(--mk-card);
}
.mk-sheet__foot .mk-btn { flex: 1; }

/* Sichtbarkeit der beiden Filter-Varianten.
   Diese Hilfsklassen dürfen ausschliesslich VERSTECKEN und niemals einen
   display-Wert setzen. Ein `display: block` hier hätte dieselbe Spezifität
   wie das `display: flex` einer Komponente – und weil es später im
   Stylesheet steht, würde es gewinnen und das Layout der Komponente
   aushebeln. Genau daran lag der überlaufende Filterbereich. */
@media (max-width: 999px) {
  .mk-desktop-only { display: none !important; }
}

@media (min-width: 1000px) {
  .mk-mobile-only { display: none !important; }
}

/* --- Hilfsklassen --------------------------------------------------------- */
.mk-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .mk-app *, .mk-sheet { transition: none !important; animation: none !important; }
}

/* --- Nur für die Standalone-Demo unter /demo/ ----------------------------- */
.mk-demo { background: var(--mk-paper); margin: 0; }
.mk-demo .mk-shell { max-width: 1320px; margin: 0 auto; padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1rem, 4vw, 2.5rem) 4rem; }
.mk-demo .mk-intro { max-width: 62ch; margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.mk-demo .mk-intro__kicker { font-size: .9rem; color: var(--mk-accent-ink); margin: 0 0 .5rem; }
.mk-demo .mk-intro h1 {
  font-family: var(--mk-font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -.015em;
  margin: 0 0 .9rem;
}
.mk-demo .mk-intro p { font-size: clamp(1.02rem, 1.6vw, 1.15rem); color: var(--mk-ink-soft); margin: 0 0 .75rem; }