/* ============================================================
   Karte — nur auf /karte/ geladen.

   Bewusst getrennt von style.css: die Kartenseite bringt mit MapLibre
   ohnehin rund 290 kB mit, und diese Regeln haben auf den Inhaltsseiten
   nichts zu suchen. Die Farben kommen aus denselben :root-Variablen wie
   der Rest der Website, damit die Karte nicht wie ein Fremdkoerper wirkt.
   ============================================================ */

/* Der Kartenbereich fuellt den Platz unter dem Kopf. 100dvh statt 100vh:
   auf dem Telefon zaehlt vh die eingeblendete Adressleiste mit, dadurch
   ragt die Karte unter den Bildschirmrand und die Bedienelemente unten
   sind nicht erreichbar. */
/* Der Abschnitt traegt nur wenig Abstand: die regulaeren 100 px von
   `section` wuerden die Karte auf der Startseite unter den ersten
   Bildschirm schieben. */
.karte-abschnitt{ padding:0 0 8px; }

.karte-huelle{
  position:relative;
  display:grid;
  grid-template-columns:340px 1fr;
  height:calc(100dvh - var(--kopf-hoehe, 72px));
  min-height:520px;
  /* Gerahmter Kasten statt randloser Flaeche: so endet die Karte an
     derselben Kante wie die Textspalte darunter. `overflow:hidden` haelt
     die Kartenflaeche in den abgerundeten Ecken. */
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
}

.karte-flaeche{ position:relative; width:100%; height:100%; background:var(--paper-2); }
.karte-flaeche:focus-visible{ outline:3px solid var(--blue); outline-offset:-3px; }

/* ---------------------------------------------------------- Filterspalte */
.karte-filter{
  overflow-y:auto;
  padding:20px;
  background:var(--paper);
  border-right:1px solid var(--line);
}
.karte-filter h2{ font-size:1.05rem; margin:0 0 4px; }
.karte-filter .zahl{ color:var(--text-2); font-size:.85rem; margin-bottom:18px; }

.filter-gruppe{ margin-bottom:22px; }
.filter-gruppe > h3{
  font-family:'Inter', sans-serif;
  font-size:.75rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-2);
  margin-bottom:10px;
}

.filter-liste{ list-style:none; display:flex; flex-direction:column; gap:2px; }

/* Das Kaestchen ist die eigentliche Bedienflaeche — deshalb ist das ganze
   Label klickbar und mindestens 40 px hoch. Ein 16-px-Kaestchen als einzige
   Trefferflaeche ist auf dem Telefon nicht bedienbar. */
.filter-liste label{
  display:flex; align-items:center; gap:10px;
  min-height:40px; padding:4px 8px;
  border-radius:8px; cursor:pointer;
  font-size:.94rem;
}
.filter-liste label:hover{ background:var(--paper-2); }
.filter-liste input{ width:18px; height:18px; accent-color:var(--blue); flex:none; }
.filter-liste .symbol{ font-size:1.1rem; line-height:1; flex:none; }
.filter-liste .name{ flex:1; }
.filter-liste .anzahl{ color:var(--text-2); font-size:.8rem; font-variant-numeric:tabular-nums; }

/* Die Farbe der Kartennadel taucht im Filter wieder auf — sonst muss der
   Besucher raten, welcher Punkt zu welchem Haken gehoert. */
.filter-liste .punkt{
  width:10px; height:10px; border-radius:50%; flex:none;
  border:1px solid rgba(0,0,0,.15);
}

.filter-knoepfe{ display:flex; gap:8px; margin-bottom:18px; }
.filter-knoepfe button{
  flex:1; padding:8px 10px; font:inherit; font-size:.85rem;
  background:var(--paper); color:var(--navy);
  border:1px solid var(--line); border-radius:8px; cursor:pointer;
}
.filter-knoepfe button:hover{ border-color:var(--blue); color:var(--blue); }

/* ---------------------------------------------------------- Detailfenster */
.karte-detail{
  position:absolute; z-index:3;
  left:16px; bottom:16px; width:min(360px, calc(100% - 32px));
  max-height:calc(100% - 32px); overflow-y:auto;
  background:var(--paper);
  border:1px solid var(--line); border-radius:12px;
  box-shadow:0 8px 28px rgba(0,28,69,.16);
  padding:18px 18px 16px;
}
.karte-detail[hidden]{ display:none; }
.karte-detail h2{ font-size:1.15rem; margin:0 6px 2px 0; }
/* Kompositum-Trennung: "Selbstbedienungsverkaufsstelle" passt sonst in
   keine 360-px-Spalte und schiebt das Fenster seitlich auf. */
.karte-detail h2, .karte-detail p, .karte-detail li{ hyphens:auto; overflow-wrap:break-word; }

.detail-schliessen{
  position:absolute; top:10px; right:10px;
  width:34px; height:34px; line-height:1;
  font-size:1.3rem; color:var(--text-2);
  background:none; border:0; border-radius:8px; cursor:pointer;
}
.detail-schliessen:hover{ background:var(--paper-2); color:var(--navy); }

.detail-marken{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 12px; }
.marke{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius:999px;
  font-size:.78rem; line-height:1.5;
  background:var(--paper-2); border:1px solid var(--line);
}
.marke-offen{ background:#E8F6ED; border-color:#BFE3CC; color:#1B6E3C; }
.marke-bio{ background:#F0F7E8; border-color:#D3E7BC; color:#456B1E; }

.detail-zeilen{ list-style:none; display:flex; flex-direction:column; gap:9px; font-size:.9rem; }
.detail-zeilen li{ display:flex; gap:9px; align-items:flex-start; }
.detail-zeilen .schild{ flex:none; width:18px; text-align:center; opacity:.65; }
.detail-zeilen a{ color:var(--blue); }

.detail-weg{
  display:inline-block; margin-top:14px;
  padding:9px 15px; border-radius:8px;
  background:var(--blue); color:#fff;
  font-size:.88rem; font-weight:600; text-decoration:none;
}
.detail-weg:hover{ filter:brightness(.93); }

.detail-quelle{
  margin-top:14px; padding-top:11px;
  border-top:1px solid var(--line);
  font-size:.74rem; color:var(--text-2);
}
.detail-quelle a{ color:var(--text-2); }

/* ---------------------------------------------------------- Meldungen */
.karte-meldung{
  position:absolute; z-index:4; top:12px; left:50%;
  transform:translateX(-50%);
  max-width:min(420px, calc(100% - 24px));
  padding:9px 15px; border-radius:999px;
  background:var(--navy); color:#fff;
  font-size:.84rem; text-align:center;
  box-shadow:0 4px 14px rgba(0,28,69,.25);
}
.karte-meldung[hidden]{ display:none; }

/* ---------------------------------------------------------- MapLibre */
.maplibregl-ctrl-attrib{ font-size:11px; }
.maplibregl-popup-content{ border-radius:10px; }

/* ---------------------------------------------------------- Telefon */
/* Unter 900 px liegt der Filter nicht mehr daneben, sondern als
   ausklappbares Blatt ueber der Karte: eine 340-px-Spalte neben einer
   Karte laesst auf einem Telefon von beidem zu wenig uebrig. */
@media (max-width:900px){
  .karte-huelle{ grid-template-columns:1fr; }
  .karte-filter{
    position:absolute; z-index:5; inset:auto 0 0 0;
    max-height:62%; border-right:0; border-top:1px solid var(--line);
    border-radius:14px 14px 0 0;
    box-shadow:0 -6px 24px rgba(0,28,69,.14);
    transform:translateY(calc(100% - 54px));
    transition:transform .22s ease;
  }
  .karte-filter.offen{ transform:translateY(0); }
  /* Der Griff sass mit negativen Seitenraendern breiter als die Leiste und
     ragte ueber deren abgerundete Ecke hinaus. Er hat gar keinen eigenen
     Hintergrund — die Ueberbreite hat also nichts gezeigt und nur gestoert.
     Der negative Rand bleibt oben, damit der Griff buendig am oberen Rand
     der Leiste sitzt. */
  .filter-griff{
    display:flex; align-items:center; justify-content:space-between;
    width:100%; height:46px; margin:-8px 0 10px;
    font:inherit; font-weight:600; color:var(--navy);
    background:none; border:0; cursor:pointer;
  }
  .karte-detail{ left:8px; right:8px; bottom:64px; width:auto; }
}
/* Auf grossen Schirmen ist der Filter immer offen; der Griff waere ein
   Knopf ohne Wirkung. */
@media (min-width:901px){ .filter-griff{ display:none; } }

@media (prefers-reduced-motion:reduce){
  .karte-filter{ transition:none; }
}

/* ---------------------------------------------------------- Startseite */
/* Auf der Startseite steht ueber der Karte die Ueberschrift und darunter der
   erklaerende Text. Volle Fensterhoehe waere hier falsch: dann sieht man beim
   Laden nur den oberen Rand der Karte und ahnt nicht, dass darunter noch
   etwas kommt. 68dvh laesst den Anfang des Textes sichtbar. */
.karte-huelle.karte-start{
  height:min(68dvh, 760px);
  min-height:440px;
}

/* ---------------------------------------------------------- Standortknopf */
/* "In meiner Naehe" ist die haeufigste Absicht auf dieser Seite und steht
   deshalb als beschrifteter Knopf ganz oben — nicht als Fadenkreuz-Symbol am
   Kartenrand, das nur findet, wer es schon kennt. */
.btn-nahe{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; min-height:46px; margin-bottom:12px;
  padding:10px 14px;
  font:inherit; font-size:.95rem; font-weight:600;
  color:#fff; background:var(--blue);
  border:0; border-radius:9px; cursor:pointer;
}
.btn-nahe:hover{ filter:brightness(.93); }
.btn-nahe:disabled{ opacity:.6; cursor:progress; }
.btn-nahe span[aria-hidden]{ font-size:1.05rem; line-height:1; }

/* Zweiter Knopf unter "In meiner Naehe": eine fehlende Verkaufsstelle von
   Ort aus melden. Bewusst schwaecher gesetzt als der Hauptknopf — gesucht
   wird oefter als gemeldet. */
.btn-hier{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; min-height:42px; margin-bottom:14px;
  padding:9px 14px;
  font:inherit; font-size:.9rem; font-weight:600;
  color:var(--blue); background:var(--paper);
  border:1px solid var(--blue); border-radius:9px; cursor:pointer;
}
.btn-hier:hover{ background:var(--paper-2); }
.btn-hier:disabled{ opacity:.6; cursor:progress; }