/* ===========================================================================
   ONLINE-PREDIGT · SCHICHT 4/4 — SEITE: GEMEINDEN (Verzeichnis und Detail)
   =========================================================================== */

@layer seite {

  .gem__pfad { color: var(--text-3); font-size: var(--txt-etikett); padding-block-start: var(--raum-6); }
  .gem__pfad a { color: inherit; }

  .gem__kopf { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-4); padding-block: var(--raum-4) var(--raum-5); }
  .gem__unter { color: var(--text-2); font-size: var(--txt-gross); max-inline-size: min(58ch, 100%); }

  .gem__werkzeug {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--raum-3);
    padding-block: var(--raum-5) var(--raum-4);
    border-block-end: var(--linie-breit) solid var(--linie);
  }
  .gem__werkzeug form { flex: 1 1 18rem; max-inline-size: min(26rem, 100%); }
  .gem__anzahl { color: var(--text-2); font-size: var(--txt-klein); margin-inline-start: auto; }
  .gem__anzahl strong { color: var(--text); }

  /* --- Karte ------------------------------------------------------------- */
  .karte-flaeche {
    position: relative;
    block-size: 26rem;
    margin-block: var(--raum-5) var(--raum-3);
    border: var(--linie-breit) solid var(--linie);
    border-radius: var(--radius-m);
    background: var(--flaeche-3);
    overflow: hidden;
    z-index: 0;
  }
  .karte-flaeche__platz {
    display: grid; grid-template-columns: minmax(0, 1fr);
    place-items: center;
    block-size: 100%;
    padding: var(--raum-5);
    color: var(--text-3);
    font-size: var(--txt-klein);
    text-align: center;
  }

  /* --- Landesgruppe ------------------------------------------------------ */
  .land { margin-block-start: var(--raum-7); }
  .land__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--raum-3);
    margin-block-end: var(--raum-3);
  }
  .land__kopf h2 { font-size: var(--txt-t4); letter-spacing: -0.01em; }
  .land__zahl { color: var(--text-3); font-family: var(--schrift-mono); font-size: var(--txt-etikett); }

  .gemliste { border-block-start: var(--linie-breit) solid var(--linie); }

  /* Zwei getrennte Ziele in einer Zeile — keine verschachtelten Links */
  .gemzeile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--raum-3);
    border-block-end: var(--linie-breit) solid var(--linie);
  }
  .gemzeile__haupt {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--raum-3) var(--raum-4);
    min-block-size: var(--tastfeld);
    padding: var(--raum-3);
    margin-inline-start: calc(var(--raum-3) * -1);
    border-radius: var(--radius-s);
    color: var(--text);
    text-decoration: none;
  }
  .gemzeile__haupt:hover { background: var(--flaeche-3); color: var(--text); }
  .gemzeile__haupt:hover .gemzeile__name { text-decoration: underline; }
  /* display: block ist zwingend — als <span> wären beide inline und würden
     margin-block-start ignorieren, Name und Ort landeten auf einer Zeile. */
  .gemzeile__name { display: block; font-size: var(--txt-klein); font-weight: var(--gewicht-fett); line-height: var(--zeile-titel); }
  .gemzeile__ort { display: block; color: var(--text-3); font-size: var(--txt-etikett); margin-block-start: var(--raum-1); }
  .gemzeile__zahl { color: var(--text-3); font-family: var(--schrift-mono); font-size: var(--txt-etikett); white-space: nowrap; }
  .gemzeile__web {
    display: inline-flex;
    align-items: center;
    gap: var(--raum-2);
    min-block-size: var(--tastfeld);
    padding-inline: var(--raum-3);
    border-radius: var(--radius-voll);
    color: var(--marke);
    font-size: var(--txt-etikett);
    font-weight: var(--gewicht-halb);
    text-decoration: none;
    white-space: nowrap;
  }
  .gemzeile__web:hover { background: var(--flaeche-3); color: var(--marke); text-decoration: underline; }
  .gemzeile__web svg { inline-size: 0.95rem; block-size: 0.95rem; fill: none; stroke: currentColor; stroke-width: 1.8; }

  /* --- Gemeinde eintragen ------------------------------------------------ */
  .eintragen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-4); margin-block-start: var(--raum-8); }
  .eintragen__text { color: var(--text-2); font-size: var(--txt-klein); max-inline-size: min(54ch, 100%); }
  .eintragen__paar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-4); }
  .eintragen__feld { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-2); }
  .eintragen__feld label { font-size: var(--txt-klein); font-weight: var(--gewicht-halb); }
  .eintragen textarea { min-block-size: 6rem; resize: vertical; }
  .eintragen__hinweis { color: var(--text-3); font-size: var(--txt-etikett); }
  .eintragen__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-3); }

  /* =====================================================================
     DETAILSEITE
     ===================================================================== */

  .gemeinde__kopf { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-3); padding-block: var(--raum-4) var(--raum-5); }
  .gemeinde__titel { max-inline-size: 30ch; }
  .gemeinde__zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-2) var(--raum-4); color: var(--text-2); font-size: var(--txt-klein); }
  .gemeinde__aktionen { display: flex; flex-wrap: wrap; gap: var(--raum-2); margin-block-start: var(--raum-2); }

  .gemeinde__spalten {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 20rem);
    gap: var(--raum-7);
    align-items: start;
    padding-block-end: var(--raum-6);
  }
  .gemeinde__karte { block-size: 18rem; margin-block: 0 var(--raum-3); }

  @media (max-width: 60rem) {
    .gemeinde__spalten { grid-template-columns: 1fr; gap: var(--raum-6); }
  }

  @media (max-width: 34rem) {
    .karte-flaeche { block-size: 20rem; }
    .gemzeile { grid-template-columns: 1fr; }
    /* Auch innen stapeln: sonst nimmt die Beitragszahl dem Namen die Breite. */
    .gemzeile__haupt { grid-template-columns: minmax(0, 1fr); row-gap: var(--raum-1); }
    .gemzeile__web { justify-self: start; margin-inline-start: calc(var(--raum-3) * -1); }
    .eintragen__paar { grid-template-columns: 1fr; }
  }
}

/* ===========================================================================
   BEWUSST AUSSERHALB DER SCHICHTEN
   leaflet.css ist fremdes, unbeschichtetes CSS und schlägt damit alles in
   @layer tokens/basis/komponenten/seite — unabhängig von Reihenfolge und
   Spezifität. Diese vier Regeln müssen deshalb hier stehen und nicht oben im
   @layer seite. Sie bringen die Kartenbedienelemente auf 44 px und binden sie
   an die Farbtokens.
   =========================================================================== */

.leaflet-touch .leaflet-bar a,
.leaflet-bar a {
  inline-size: var(--tastfeld);
  block-size: var(--tastfeld);
  line-height: var(--tastfeld);
  background: var(--flaeche-2);
  color: var(--text);
  border-block-end-color: var(--linie);
}

.leaflet-bar a:hover,
.leaflet-bar a:focus {
  background: var(--flaeche-3);
  color: var(--text);
}

.leaflet-touch .leaflet-bar {
  border: var(--linie-breit) solid var(--linie-stark);
  border-radius: var(--radius-s);
}

.leaflet-container .leaflet-control-attribution {
  background: color-mix(in oklab, var(--flaeche-2) 88%, transparent);
  color: var(--text-3);
  font-family: var(--schrift-text);
  font-size: var(--txt-etikett);
}
.leaflet-container .leaflet-control-attribution a { color: var(--marke); }

/* ── Bestands-Nachtrag E5 (destillationsbedingt): Widerrufs-Knopf der Karten-Erlaubnis
   (op-karte.js) + geladene Fläche ohne Schranken-Zentrierung. */
@layer seite {
  .karte-zuruecksetzen { padding-block-start: var(--raum-2); }
  .karte-flaeche--geladen { display: block; }
}