/*
 * Neues Design – Gruppe „locations“: Locations-Liste mit Bars-Bereich, Location-Seite (+ Archiv),
 * Veranstalter-Seite, In deiner Nähe, Favoriten. Nur Klassen mit Präfix locations-, dazu
 * kleine Ergänzungen zu vorhandenen neu.css-Bausteinen (bar-row, week, mapgate) im Seitenkontext.
 */

/* ─── Locations-Liste ─────────────────────────────────────── */
.locations-oben { padding-top: 32px; }
.locations-hinweis { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; background: var(--surface); border-left: 8px solid var(--gold); padding: 20px 24px; }
.locations-hinweis-titel { margin: 0 0 6px; font: 30px/1.05 var(--display); text-transform: uppercase; }
.locations-hinweis p { margin: 0; color: var(--soft); max-width: 60ch; }

.locations-stand { margin: 14px 0 0; color: var(--soft); font: 700 13px var(--body); letter-spacing: .12em; text-transform: uppercase; }
.locations-stand b { color: var(--green); }

.locations-filter { border: 0; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
.locations-filter legend { float: left; margin-right: 6px; padding: 0; }
.locations-filter .filterchip { position: relative; }

.locations-barliste .bar-row:hover { background: var(--surface-2); }
.locations-barliste .bar-row:hover .bn { text-decoration: underline; }
.locations-barliste .bar-row .bs { align-items: center; }
.locations-barliste .bar-row .pill { align-self: center; }
/* Filter ohne JavaScript: Auswahl über die Radio-Knöpfe, Zeilen über den Status der Pill */
.locations-bars:has(#lf-jetzt:checked) .bar-row:not(:has([data-status="open"])) { display: none; }
.locations-bars:has(#lf-heute:checked) .bar-row:not(:has([data-heute="1"])) { display: none; }
.locations-leer { display: none; color: var(--soft); margin: 14px 0 0; }
.locations-bars:has(#lf-jetzt:checked):not(:has(.bar-row [data-status="open"])) .locations-leer,
.locations-bars:has(#lf-heute:checked):not(:has(.bar-row [data-heute="1"])) .locations-leer { display: block; }

.locations-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; margin-top: 24px; }
.locations-karte { display: flex; flex-direction: column; background: var(--surface); min-width: 0; }
.locations-karte-bild { position: relative; display: block; aspect-ratio: 346 / 130; background: var(--surface-2); overflow: hidden; }
.locations-karte-bild img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.locations-karte-bild:hover img { transform: scale(1.04); }
.locations-karte-bild .pill { position: absolute; top: 10px; right: 10px; }
.locations-karte.is-zu img { opacity: .5; filter: grayscale(100%); }
.locations-karte-text { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; flex: 1; }
.locations-karte-name { font: 24px/1.05 var(--display); text-transform: uppercase; overflow-wrap: anywhere; }
.locations-karte-name small { font: 700 12px var(--body); letter-spacing: .1em; color: var(--muted); }
.locations-karte-text p { margin: 0; color: var(--soft); font-size: 14px; line-height: 1.55; flex: 1; overflow-wrap: anywhere; }
.locations-karte-text .linkbtn { align-self: flex-start; }

/* ─── Location-Seite / Archiv / Veranstalter ──────────────── */
.locations-detail { padding-top: 0; }
.locations-spalte { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.locations-about h2 { overflow-wrap: anywhere; }
.locations-adresse { margin: 0 0 18px; font: 600 16px/1.5 var(--body); color: var(--soft); }
.locations-seotext { color: #fff; font-size: 17px; line-height: 1.75; max-width: 68ch; overflow-wrap: anywhere; }
.locations-seotext h2, .locations-seotext h3, .locations-seotext h4 { font: 800 21px/1.3 var(--body); margin: 22px 0 8px; text-transform: none; }
.locations-seotext a { color: var(--accent); text-decoration: underline; }
.locations-seotext p { font-size: inherit; }
.locations-links { margin: 0 0 18px; }
.locations-bild { display: block; width: 100%; height: auto; background: var(--surface-2); }
.locations-zu { display: block; }
.locations-zu b { font: 26px/1 var(--display); text-transform: uppercase; }
.locations-anfahrt .chips .btn { flex: 1 1 200px; letter-spacing: .1em; padding-inline: 12px; }
.locations-anfahrt .btn .fas { display: none; }
.locations-karte-ort { display: none; height: 260px; }
.locations-zeiten-titel { margin: 0; }
.locations-zeiten-status { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pill--gross { font-size: 13px; padding: 8px 12px; }
.locations-woche th { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; font-weight: 600; }
.locations-woche tr.now th { background: var(--surface-2); font-weight: 800; box-shadow: inset 6px 0 0 var(--accent); }
.locations-woche tr.now td:first-child { box-shadow: none; }

.locations-kopf { display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin-bottom: 24px; }
.locations-kopf h5 { margin: 0; }
.locations-kopf h2 { font-size: clamp(48px, 7vw, 84px); margin-top: 12px; }
.locations-kopf h4 { margin: 10px 0 0; font: 700 15px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.locations-tage { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px 28px; align-items: start; }
.locations-tag-titel { margin: 0 0 12px; font: 32px/1 var(--display); text-transform: uppercase; }
.locations-tage .quiet--klein p, .locations-liste .quiet--klein p { margin: 0; }
.locations-archivlink { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; background: var(--surface); border-left: 6px solid var(--accent); padding: 22px 24px; }
.locations-archivlink h3 { margin: 0 0 6px; font: 34px/1 var(--display); text-transform: uppercase; }
.locations-archivlink p { margin: 0; color: var(--soft); max-width: 60ch; }
.locations-pager { margin: 0 0 18px; }
.locations-pager + .two, .two + .locations-pager { margin-top: 18px; }
.locations-pager .dots { background: none; min-width: 0; padding: 0 4px; }
.locations-pager a:hover { background: var(--surface-2); }

/* ─── In deiner Nähe ──────────────────────────────────────── */
.locations-naehe-intro p { color: var(--soft); max-width: 70ch; }
.locations-suche { background: var(--surface); padding: 22px; display: grid; gap: 18px; max-width: 900px; margin-top: 18px; }
.locations-suche[hidden], .locations-suche [hidden] { display: none !important; }
.locations-suchzeile { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.locations-suchzeile > * { min-width: 0; }
.locations-feld { display: grid; gap: 6px; flex: 1 1 220px; }
.locations-feld > span, .locations-feld > label { font: 700 12px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.locations-feld input[type=range] { width: 100%; accent-color: var(--accent); }
.locations-feld output { color: #fff; font-size: 15px; }
.locations-suche select.field { color-scheme: dark; }
.locations-meldung { margin: 0; color: var(--soft); }
.locations-meldung.is-fehler { color: var(--gold); }
.locations-treffer { margin: 26px 0 12px; color: var(--soft); font-size: 16px; }
.locations-treffer strong { color: #fff; }
#nearbyMapWrapper { margin-top: 18px; }
.locations-karte-naehe { display: none; height: 420px; }

/* ─── Favoriten ───────────────────────────────────────────── */
.locations-fav-intro p { color: var(--soft); max-width: 75ch; }
.locations-fav-status { color: var(--soft); }
.locations-fav-status p { margin: 0 0 6px; }
.locations-weg { transition: opacity .3s; opacity: 0; }
.locations-vergangen { margin-top: 28px; }
.locations-vorschlaege { margin-top: 48px; }
.locations-vorschlaege p { color: var(--soft); max-width: 70ch; }
.locations-mitte { display: flex; justify-content: center; margin-top: 22px; }

@media (max-width: 640px) {
  .locations-hinweis { padding: 18px; }
  .locations-hinweis .btn { white-space: normal; text-align: center; }
  .locations-archivlink .btn { white-space: normal; text-align: center; }
  .locations-suche { padding: 16px; }
  .locations-tag-titel { font-size: 28px; }
}
.locations-pager span.on { background: var(--accent); }
.locations-kopf h4.locations-kopf-titel { font: 400 clamp(40px, 6vw, 72px)/.95 var(--display); letter-spacing: .01em; color: #fff; margin-top: 12px; }
.locations-karte-ort.is-an, .locations-karte-naehe.is-an { display: block; }
/* neu.css hat eine allgemeine Klasse .open (Kasten mit Goldrand) – für Status-Pill und Bar-Zeile zurücksetzen */
.pill.open { padding: 5px 9px; border-left: 0; background: var(--green); }
.pill.open.pill--gross, .pill--gross { padding: 8px 12px; }
.bar-row.open { background: var(--panel); padding: 14px 16px; border-left: 6px solid var(--green); }
.locations-barliste .bar-row.open:hover { background: var(--surface-2); }
.about-text p.locations-adresse, .about-text p.locations-seotext { white-space: normal; }
.locations-anfahrt .btn.btn-outline-primary { color: #fff !important; }
.locations-bild { max-height: 400px; object-fit: contain; }