/* Läden in der Nähe, seit 16.10.2026 (WP-8). Nur auf /laeden/ und den Stadtseiten geladen.
   Farben, Radien und Abstände aus den Tokens in tcgjournal.css; keine eigenen Farbwerte, damit
   bin/kontrast-pruefen.py und der dunkle Auftritt ohne Zusatz greifen. Telefon zuerst. */

.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Sprungleiste: Bundesländer und Städte mit eigener Seite */
.laeden-sprung { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 1.6rem; padding: 0; list-style: none; }
.laeden-sprung a {
  display: inline-flex; align-items: center; min-height: 44px; padding: .35rem .85rem; border-radius: 999px;
  border: 1px solid var(--linie-stark); background: var(--karte); color: var(--tinte); font-size: .9rem;
  text-decoration: none;
}
.laeden-sprung a:hover { border-color: var(--tinte-still); }

/* Kacheln der Städte mit eigener Seite */
.stadtkacheln { display: grid; gap: .8rem; grid-template-columns: minmax(0, 1fr); margin: 1rem 0 1.8rem; }
@media (min-width: 560px) { .stadtkacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stadtkachel {
  display: block; padding: 1rem 1.1rem; border: 1px solid var(--linie); border-radius: var(--radius-gross);
  background: var(--karte); color: var(--tinte); text-decoration: none;
}
.stadtkachel:hover { border-color: var(--linie-stark); }
.stadtkachel b { display: block; font-size: 1.05rem; }
.stadtkachel span { display: block; margin-top: .2rem; font-size: .9rem; color: var(--tinte-leise); }

/* Liste der Läden */
.laeden-liste { list-style: none; margin: .6rem 0 1.6rem; padding: 0; display: grid; gap: .8rem; }
.laden {
  padding: 1rem 1.1rem; border: 1px solid var(--linie); border-radius: var(--radius-gross); background: var(--karte);
  scroll-margin-top: 5rem;
}
.laden-play { border-color: var(--akzent-kante); border-left: 4px solid var(--akzent); }
.laden:target { border-color: var(--akzent); }
.laden-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; }
.laden-kopf h3, .laden-kopf h4 { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.laden-zeichen {
  display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border-radius: 999px;
  background: var(--akzent-grund); color: var(--akzent); font-size: .75rem; font-weight: 650;
}
.laden-zeichen .ikon { width: 14px; height: 14px; }
.laden-anschrift { margin: .45rem 0 0; color: var(--tinte-leise); font-size: .95rem; }
.laden-spiele { display: flex; flex-wrap: wrap; gap: .35rem; margin: .6rem 0 0; }
.laden-wege { display: flex; flex-wrap: wrap; gap: .2rem 1rem; margin: .5rem 0 0; font-size: .9rem; }
.laden-wege a { display: inline-flex; align-items: center; min-height: 44px; }

.stadt-titel { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; margin: 1.6rem 0 .3rem; }
.stadt-titel h3 { margin: 0; }
.stadt-titel span { color: var(--tinte-still); font-size: .9rem; }
.stadt-verweis { margin: .4rem 0 1.4rem; }

/* Karte nach Klick */
.ladenkarte { margin: 1.2rem 0 1.8rem; border: 1px solid var(--linie); border-radius: var(--radius-gross); overflow: hidden; background: var(--papier-tief); }
.ladenkarte-hinweis { padding: 1rem 1.1rem; }
.ladenkarte-hinweis p { margin: 0 0 .8rem; font-size: .95rem; color: var(--tinte-leise); }
.ladenkarte-hinweis .knopf { min-height: 44px; }
.ladenkarte-flaeche { position: relative; height: min(70vh, 460px); overflow: hidden; touch-action: none; cursor: grab; background: var(--papier-tiefer); }
.ladenkarte-flaeche:active { cursor: grabbing; }
.ladenkarte-ebene { position: absolute; left: 0; top: 0; will-change: transform; }
.ladenkarte-ebene img { position: absolute; width: 256px; height: 256px; max-width: none; user-select: none; -webkit-user-drag: none; }
.ladenkarte-punkt {
  position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: var(--tinte-leise); border: 2px solid var(--karte); box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.ladenkarte-punkt::after { content: ""; position: absolute; inset: -14px; }  /* Tippfläche 44 px */
.ladenkarte-punkt-play { background: var(--akzent); width: 18px; height: 18px; margin: -9px 0 0 -9px; }
.ladenkarte-knoepfe { position: absolute; right: .6rem; top: .6rem; display: grid; gap: .3rem; z-index: 2; }
.ladenkarte-knoepfe button {
  width: 44px; height: 44px; border-radius: var(--radius-klein); border: 1px solid var(--linie-stark);
  background: var(--karte); color: var(--tinte); font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.ladenkarte-quelle {
  position: absolute; right: 0; bottom: 0; z-index: 2; padding: .2rem .5rem; font-size: .75rem;
  background: var(--karte); color: var(--tinte-leise);
}
.ladenkarte-legende { display: flex; flex-wrap: wrap; gap: .4rem 1rem; padding: .6rem 1.1rem; font-size: .85rem; color: var(--tinte-leise); background: var(--karte); }
.ladenkarte-legende i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: .35rem; vertical-align: -1px; background: var(--tinte-leise); }
.ladenkarte-legende i.play { background: var(--akzent); }

/* Formular „Laden eintragen“ */
.laden-formular { display: grid; gap: 1rem; margin: 1.2rem 0 2rem; padding: 1.2rem; border: 1px solid var(--linie);
  border-radius: var(--radius-gross); background: var(--karte); }
.laden-formular .zeile { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .laden-formular .zeile-plz { grid-template-columns: 9rem minmax(0, 1fr); } }
.laden-formular .eingabe { min-height: 44px; }
.laden-formular textarea.eingabe { min-height: 7rem; resize: vertical; }
.laden-formular fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.laden-formular legend { padding: 0; }
.wahlfelder { display: flex; flex-wrap: wrap; gap: .4rem .5rem; margin-top: .3rem; }
.wahlfelder label {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .3rem .75rem; border-radius: 999px;
  border: 1px solid var(--linie-stark); background: var(--karte); font-size: .9rem; cursor: pointer;
}
.wahlfelder input { width: 18px; height: 18px; accent-color: var(--akzent); }
.feld-fehler { margin: .3rem 0 0; color: var(--rot); font-size: .85rem; }
.lockfeld { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.laden-meldung { padding: .9rem 1.1rem; border-radius: var(--radius); border: 1px solid var(--linie); background: var(--karte); }
.laden-meldung-ok { border-color: var(--akzent-kante); background: var(--akzent-grund); color: var(--tinte); }
.laden-meldung-warn { border-color: var(--warn); background: var(--warn-grund); color: var(--tinte); }

/* Innerhalb von .artikeltext: Listen ohne Einzug, Kacheln und Sprungleiste ohne Linkunterstreichung */
.artikeltext .laeden-liste, .artikeltext .laeden-sprung { padding-left: 0; }
.artikeltext .laeden-liste li { margin-bottom: 0; }
.artikeltext .stadt-titel h3 { margin-top: 0; }
.artikeltext .stadtkachel, .artikeltext .laeden-sprung a { text-decoration: none; color: var(--tinte); }
.artikeltext .stadtkachel b { color: var(--akzent); }
.artikeltext .ladenkarte-punkt { text-decoration: none; }