/* LOOKING? Barcelona – Aufbau und Farben nach dem Konzept aus Claude Design, aber durchgehend eckig. */
:root {
  --page: #ecebe8;
  --bg: #ffffff;
  --fg: #141414;
  --mid: #3d3b39;
  --dim: #6b6966;
  --faint: #9a9794;
  --line: #eeece9;
  --soft: #f3f2ef;
  --soft2: #f7f6f4;
  --hover: #faf9f7;
  --border: #e3e1dd;
  --accent: #d1366f;
  --accent-tint: #fbe3ec;
  --accent-text: #a3214f;
  --schrift: "Archivo", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #0a0a0a; --bg: #141414; --fg: #f3f2ef; --mid: #d6d2cc; --dim: #a29e99; --faint: #77736f;
    --line: #2a2826; --soft: #24221f; --soft2: #1d1c1a; --hover: #1d1c1a; --border: #3a3734;
    --accent: #e0588c; --accent-tint: #3b1d29; --accent-text: #f4a9c5; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --page: #0a0a0a; --bg: #141414; --fg: #f3f2ef; --mid: #d6d2cc; --dim: #a29e99; --faint: #77736f;
  --line: #2a2826; --soft: #24221f; --soft2: #1d1c1a; --hover: #1d1c1a; --border: #3a3734;
  --accent: #e0588c; --accent-tint: #3b1d29; --accent-text: #f4a9c5; color-scheme: dark;
}

/* Keine Rundungen, nirgends – auch nicht bei Leaflet oder Instagram. */
*, *::before, *::after { box-sizing: border-box; border-radius: 0 !important; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--fg); font: 400 16px/1.45 var(--schrift); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
a:hover { color: var(--accent); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Die App-Spalte: auf dem Handy volle Breite, am Desktop eine Spalte in der Mitte */
.app { max-width: 560px; min-height: 100vh; margin: 0 auto; background: var(--bg); position: relative; }
@media (min-width: 600px) {
  .app { margin: 24px auto; min-height: calc(100vh - 48px); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 32px rgba(0,0,0,.06); }
}

/* Kopf und Tabs */
.kopf { padding: 16px 20px 4px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.marke { text-decoration: none; display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; }
.kopf-schalter { display: flex; align-items: center; gap: 8px; flex: none; }
/* Kopf rechts wie in den Wireframes: „ES · ☼“ – aktuelle Sprache als Menü, dann das Farbschema. */
.sprachwahl { position: relative; }
.sprach-knopf { display: flex; align-items: center; gap: 3px; height: 32px; padding: 0 4px; border: none; background: none; color: var(--fg); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.sprach-knopf span { font-size: 10px; color: var(--dim); }
.sprach-menue { position: absolute; right: 0; top: 36px; z-index: 1300; display: flex; flex-direction: column; min-width: 160px; background: var(--bg); border: 1px solid var(--border); box-shadow: 0 6px 20px rgba(0,0,0,.15); }
.sprach-menue[hidden] { display: none; }
.sprach-menue a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; font-size: 15px; color: var(--fg); text-decoration: none; }
.sprach-menue a b { width: 22px; font-size: 12px; color: var(--dim); }
.sprach-menue a:hover { background: var(--hover); }
.sprach-menue a.an { background: var(--fg); color: var(--bg); }
.sprach-menue a.an b { color: var(--bg); }
.kopf-punkt { color: var(--dim); }
.thema-knopf { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; background: none; color: var(--fg); cursor: pointer; }
.thema-knopf svg { width: 16px; height: 16px; display: none; }
.thema-knopf[data-zustand="auto"] .i-auto, .thema-knopf[data-zustand="light"] .i-light, .thema-knopf[data-zustand="dark"] .i-dark { display: block; }
@media (max-width: 380px) { .stadt { display: none; } }
.logo { font-size: 24px; font-weight: 800; font-stretch: 70%; }
.stadt { font-size: 15px; color: var(--dim); }
/* Die Tab-Leiste bleibt beim Scrollen oben stehen; das Logo darüber scrollt weg. */
.tabs { position: sticky; top: 0; z-index: 1100; background: var(--bg); display: flex; gap: 22px; padding: 0 20px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { flex: none; padding: 14px 0 12px; font-size: 15px; color: var(--dim); text-decoration: none; border-bottom: 2px solid transparent; }
.tabs a.an { color: var(--fg); font-weight: 700; border-bottom-color: var(--accent); }

/* Typo-Bausteine */
.titel { padding: 22px 20px 0; font-size: 28px; font-weight: 800; font-stretch: 75%; letter-spacing: -.01em; margin: 0; line-height: 1.1; }
.titel-zeile { padding: 22px 20px 0; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.titel-zeile .titel { padding: 0; }
.titel-zeile .zahl { font-size: 14px; color: var(--dim); }
.unter { font-size: 15px; color: var(--dim); padding: 4px 20px 0; margin: 0; }
.label { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.label-zeile { padding: 24px 20px 10px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.label-zeile .zahl { font-size: 13px; color: var(--dim); }
.dim { color: var(--dim); }
.mid { color: var(--mid); }

/* Knöpfe, Chips, Segmente */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 16px; border: none; background: var(--fg); color: var(--bg); font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; }
.knopf:hover { color: var(--bg); opacity: .9; }
.knopf.hell { background: var(--bg); color: var(--fg); border: 1px solid var(--border); }
.knopf.hell:hover { color: var(--fg); background: var(--hover); }
.knopf.gross { height: 52px; font-size: 16px; font-weight: 700; padding: 0 20px; }
.knopf.voll { width: 100%; }
.knopf.akzent { background: var(--accent); color: #fff; }
.chip { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; font-size: 14px; background: var(--bg); color: var(--fg); border: 1px solid var(--border); cursor: pointer; text-decoration: none; }
.chip.an, .chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.etikett { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; font-size: 14px; background: var(--soft); }
.pille { align-self: flex-start; display: inline-flex; padding: 6px 12px; font-size: 14px; font-weight: 600; background: var(--soft); color: var(--dim); }
.pille.offen { background: var(--accent-tint); color: var(--accent-text); }
.pille.warnung { background: var(--fg); color: var(--bg); }
.segment { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 4px; background: var(--soft); }
.segment button, .segment label { display: flex; align-items: center; justify-content: center; height: 40px; border: none; background: transparent; font-size: 14px; font-weight: 600; color: var(--mid); cursor: pointer; }
.segment input { position: absolute; opacity: 0; pointer-events: none; }
.segment.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Liste | Karte auf „Sitios“ und „Esta noche“ */
.ansicht-umschalter { margin: 14px 20px 6px; }
/* Kompakt in der Filterzeile von „Esta noche“: direkt neben dem Filter-Knopf, gleiche Höhe */
.ansicht-umschalter.kompakt { margin: 0; flex: none; padding: 3px; }
.ansicht-umschalter.kompakt button { height: 34px; padding: 0 14px; }
.filterzeile .zusammen { flex: 1 1 auto; }
.filterzeile .knopf { flex: none; white-space: nowrap; }
/* Nur für Screenreader sichtbar */
.nur-leser { position: absolute !important; width: 1px; height: 1px; padding: 0 !important; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tag-titel.nur-leser + .filterzeile { padding-top: 16px; }
.segment label:has(input:checked), .segment button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }

/* Sticker (quadratische Hintergründe) */
/* Die Sticker haben schwarze Linien: ihr Kästchen bleibt deshalb auch im Dark Mode hell. */
.sticker { flex: none; display: inline-flex; align-items: center; justify-content: center; background: transparent; }
/* Die Sticker sind farbig mit schwarzer Kontur und funktionieren so im hellen und dunklen Modus. */
.sticker img { object-fit: contain; display: block; }
.st-32 { width: 32px; height: 32px; } .st-32 img { width: 28px; height: 28px; }
.st-36 { width: 36px; height: 36px; } .st-36 img { width: 32px; height: 32px; }
.st-48 { width: 48px; height: 48px; } .st-48 img { width: 42px; height: 42px; }
.st-56 { width: 56px; height: 56px; } .st-56 img { width: 48px; height: 48px; }
.st-60 { width: 60px; height: 60px; } .st-60 img { width: 52px; height: 52px; }
.sticker.an { background: #fbe3ec; box-shadow: 0 0 0 2px var(--accent); }
.leute { display: flex; gap: 12px; flex-wrap: wrap; }
.person { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 60px; }
.person span { font-size: 12px; text-align: center; line-height: 1.2; color: var(--mid); }
.person.gross { width: 68px; gap: 6px; } .person.gross span { font-size: 13px; color: var(--fg); }
.leute-klein { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
/* Die Menge: zehn Köpfe, leicht überlappend und versetzt wie in einer Schlange vor dem Club */
.menge { display: flex; padding: 6px 0 4px 18px; }
.kopf-in-menge { width: 52px; height: 52px; margin-left: -18px; flex: none; }
.kopf-in-menge:nth-child(even) { transform: translateY(6px); }
.kopf-in-menge img { width: 100%; height: 100%; display: block; }
.menge-satz { font-size: 15px; font-weight: 600; }
.menge.klein .kopf-in-menge { width: 44px; height: 44px; margin-left: -15px; }
.menge.klein { padding-left: 15px; }
/* Esta noche: Köpfe der gefilterten Gruppen bekommen einen pinken Strich darunter */
.kopf-in-menge { position: relative; }
.kopf-in-menge.an::after { content: ""; position: absolute; left: 25%; right: 25%; bottom: -5px; height: 3px; background: var(--accent); }
.leute-klein .text { font-size: 13px; color: var(--dim); margin-left: 4px; }

/* Locales ↔ Turistas */
.mix { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; font-size: 13px; color: var(--dim); }
.mix .bahn { position: relative; height: 6px; background: var(--line); }
.mix .punkt { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; background: var(--fg); border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--fg); }
.mix-worte { font-size: 14px; color: var(--mid); }

/* Tage */
/* Tagesleiste: sechs Wochen zum Wischen; ein Punkt markiert Abende mit Partys, über dem 1. steht der Monat. */
.tage { display: flex; gap: 4px; padding: 16px 14px 12px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.tage::-webkit-scrollbar { display: none; }
.tage a, .tage button { position: relative; flex: 0 0 calc((100% - 24px) / 7); min-width: 40px; height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0; border: none; background: none; color: inherit; font: inherit; text-decoration: none; cursor: pointer; scroll-snap-align: center; }
.tage i { position: absolute; top: -13px; left: 2px; font-style: normal; font-size: 10px; font-weight: 700; color: var(--accent); }
.tage .hat-party::after { content: ""; position: absolute; bottom: 4px; width: 4px; height: 4px; background: var(--accent); }
.tage .vorbei { display: none; }
.tage span { font-size: 12px; text-transform: capitalize; } .tage b { font-size: 16px; font-weight: 700; }
.tage .an, .tage [aria-pressed="true"] { background: var(--fg); color: var(--bg); }
/* Fiestas: Leiste klebt unter den Tabs und springt zu den Tagen; Tage ohne Party sind blass. */
.party-tage { position: sticky; top: 48px; z-index: 1050; background: var(--bg); border-bottom: 1px solid var(--line); }
.party-tage .leer { color: var(--faint); cursor: default; }
.tag-titel { padding: 10px 20px 14px; font-size: 28px; font-weight: 800; font-stretch: 75%; letter-spacing: -.01em; margin: 0; }
.filterzeile { padding: 0 20px 6px; display: flex; align-items: center; gap: 12px; }
.filterzeile .knopf + .ansicht-umschalter { margin-left: -4px; }
.filterzeile .zusammen { font-size: 14px; color: var(--mid); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Karten und Listenzeilen */
.karte { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
a.karte:hover, a.zeile:hover { background: var(--hover); color: inherit; }
.karte-kopf { display: flex; justify-content: space-between; gap: 12px; }
.karte-kopf .name { font-size: 19px; font-weight: 700; letter-spacing: -.01em; display: block; }
.karte-kopf .art { font-size: 14px; color: var(--dim); display: block; margin-top: 3px; }
.zeiten { text-align: right; white-space: nowrap; }
.zeiten b { display: block; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.zeiten span { font-size: 13px; color: var(--dim); }
.fakten { display: grid; grid-template-columns: 82px 1fr; gap: 8px; font-size: 14px; line-height: 1.4; margin: 0; }
.fakten dt { color: var(--dim); } .fakten dd { margin: 0; }
.zeile { display: grid; grid-template-columns: 48px 1fr auto; column-gap: 14px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
.zeile-bild { width: 48px; height: 48px; object-fit: cover; background: var(--soft); }
.zeile .name { font-size: 16px; font-weight: 700; display: block; }
.zeile .klein { font-size: 13px; color: var(--dim); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zeile .status { text-align: right; white-space: nowrap; display: flex; flex-direction: column; gap: 2px; }
.zeile .status b { font-size: 13px; font-weight: 600; } .zeile .status span { font-size: 12px; color: var(--dim); }
.zeile .status.zu b { color: var(--faint); }
.party { display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; padding: 16px 20px; border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
a.party:hover { background: var(--hover); color: inherit; }
.party .zeit { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; padding-top: 2px; }
.party .text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.party .t { font-size: 17px; font-weight: 700; }
.party .s { font-size: 14px; color: var(--mid); }
.party .m { font-size: 14px; color: var(--dim); }
.party .leute-klein { margin-top: 6px; }
/* Partyzeilen: Publikum in Worten statt kleiner Sticker, die man in der Größe kaum erkennt */
.publikum-worte { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; font-size: 14px; }
.publikum-worte .wer { color: var(--fg); font-weight: 600; }
.publikum-worte .vibe { color: var(--dim); }
.leer-box { margin: 0 20px 24px; padding: 20px; background: var(--soft2); display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.leer-box span { font-size: 15px; color: var(--mid); }
.abstand { height: 24px; }

/* Bottom-Sheet für Filter */
.sheet-hinter { position: fixed; inset: 0; background: rgba(20,20,20,.4); z-index: 1200; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1001; max-width: 560px; margin: 0 auto; max-height: 90vh; overflow-y: auto; background: var(--bg); padding: 10px 20px 20px; z-index: 1201; display: flex; flex-direction: column; gap: 18px; }
.sheet .griff { width: 40px; height: 4px; background: var(--border); align-self: center; }
.sheet .kopfzeile { display: flex; justify-content: space-between; align-items: baseline; }
.sheet .kopfzeile b { font-size: 20px; }
.sheet .loeschen { border: none; background: none; font-size: 14px; color: var(--dim); text-decoration: underline; padding: 0; cursor: pointer; }
.sheet .gruppe { display: flex; flex-direction: column; gap: 8px; }
.sheet .gruppe > span { font-size: 13px; font-weight: 700; color: var(--dim); }
.sticker-raster { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 10px; column-gap: 6px; }
.sticker-knopf { border: none; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.sticker-knopf span:last-child { font-size: 12px; }
.sticker-knopf[aria-pressed="true"] span:last-child { font-weight: 700; }
.sticker-knopf[aria-pressed="true"] .sticker { background: #fbe3ec; box-shadow: 0 0 0 2px var(--accent); }
.sticker-reihe { display: flex; gap: 8px; overflow-x: auto; margin: 0 -20px; padding: 2px 20px 4px; scrollbar-width: none; }
.sticker-reihe .sticker-knopf { flex: none; width: 56px; }
.sticker-reihe .sticker-knopf span:last-child { font-size: 11px; white-space: nowrap; }

/* Sitios: Suche */
.suche { height: 46px; border: none; background: var(--soft); padding: 0 18px; font: inherit; font-size: 15px; color: var(--fg); outline: none; width: 100%; }
.suche-block { padding: 14px 20px 0; display: flex; flex-direction: column; gap: 14px; }

/* Detailseiten */
.foto-kopf { position: relative; height: 240px; background: var(--soft); }
.foto-kopf img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zurueck { position: absolute; top: 16px; left: 16px; display: inline-flex; align-items: center; height: 40px; padding: 0 16px 0 12px; background: var(--bg); color: var(--fg); font-size: 14px; font-weight: 600; text-decoration: none; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.zurueck.ohne-bild { position: static; margin: 16px 16px 0; box-shadow: none; border: 1px solid var(--border); }
.d-kopf { padding: 20px 20px 8px; display: flex; flex-direction: column; gap: 6px; }
.d-name { font-size: 30px; font-weight: 800; font-stretch: 80%; letter-spacing: -.01em; line-height: 1.1; margin: 0; }
.d-art { font-size: 15px; color: var(--dim); }
.abschnitt { padding: 20px; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--line); }
.d-kopf + .abschnitt { margin-top: 12px; }
.text { font-size: 15px; line-height: 1.5; color: var(--mid); margin: 0; }
.text-klein { font-size: 13px; line-height: 1.45; color: var(--dim); margin: 0; }
.ideal { display: grid; grid-template-columns: 1fr auto; row-gap: 8px; font-size: 15px; }
.ideal b { font-weight: 600; }
.woche { display: flex; flex-direction: column; }
.woche div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 15px; font-variant-numeric: tabular-nums; }
.woche div.zu { color: var(--faint); }
.woche div.heute { font-weight: 700; }
.woche .was { color: var(--dim); font-size: 13px; font-weight: 400; display: block; }
.d-fuss { position: sticky; bottom: 0; padding: 12px 20px 20px; border-top: 1px solid var(--line); background: var(--bg); display: flex; gap: 10px; z-index: 5; }
.d-fuss .knopf { flex: 1; }
.lineup div { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--soft); }
.lineup b { font-size: 17px; }
.lineup span { font-size: 13px; color: var(--dim); }
.naehe a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--soft); text-decoration: none; }
.naehe b { display: block; font-size: 16px; } .naehe small { font-size: 13px; color: var(--dim); }
.pfeil { font-size: 20px; color: var(--faint); }
.links-zeile { display: flex; flex-wrap: wrap; gap: 8px; }

/* Fotos */
.fotos { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 0 20px; }
.foto { flex: 0 0 80%; margin: 0; scroll-snap-align: start; }
.foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.foto figcaption { margin-top: 4px; font-size: 12px; color: var(--dim); }
.foto.flyer { flex-basis: 62%; }
.foto.flyer img { aspect-ratio: 4 / 5; }
.foto.flyer figcaption b { color: var(--fg); }
.flyer-gross { margin: 8px 20px 0; }
.flyer-gross img { display: block; width: 100%; max-height: 560px; object-fit: contain; background: var(--soft); }
.flyer-gross figcaption { margin-top: 4px; font-size: 12px; color: var(--dim); }

/* Instagram */
/* Instagram: eigene Vorschaubilder, der Post selbst lädt erst im Blatt */
.insta-reihe { display: flex; gap: 8px; overflow-x: auto; margin: 0 -20px; padding: 0 20px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.insta-reihe::-webkit-scrollbar { display: none; }
.insta-kachel { position: relative; flex: 0 0 46%; aspect-ratio: 4 / 5; padding: 0; border: none; background: var(--soft); cursor: pointer; scroll-snap-align: start; overflow: hidden; }
.insta-kachel img { display: block; width: 100%; height: 100%; object-fit: cover; }
.insta-kachel .ohne-cover { display: flex; height: 100%; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--dim); }
.play { position: absolute; left: 10px; bottom: 10px; width: 34px; height: 34px; background: rgba(20,20,20,.72); }
.play::after { content: ""; position: absolute; left: 13px; top: 10px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #fff; }
.foto-kopf.reel { height: 340px; }
.reel-start { display: block; width: 100%; height: 100%; padding: 0; border: none; background: none; cursor: pointer; }
.foto-kopf.reel .play { left: 16px; bottom: 16px; width: 48px; height: 48px; }
.foto-kopf.reel .play::after { left: 18px; top: 14px; border-width: 10px 0 10px 15px; }
.foto-kopf .quelle-hinweis { position: absolute; right: 12px; bottom: 12px; padding: 4px 8px; background: rgba(20,20,20,.72); color: #fff; font-size: 12px; font-weight: 600; }
.insta-sheet { gap: 14px; }
.insta-ziel { min-height: 200px; }
/* Esta noche: Reihe „Neu diese Woche“ und Bild auf den Karten */
.neu-reihe { padding: 0 20px 18px; }
.neu-reihe .label-zeile { padding: 4px 0 10px; }
.neu-kachel { flex: 0 0 31%; display: flex; flex-direction: column; gap: 6px; padding: 0; border: none; background: none; color: inherit; text-align: left; text-decoration: none; cursor: pointer; scroll-snap-align: start; font: inherit; }
.neu-kachel .bild { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; padding: 0; border: none; background: var(--soft); overflow: hidden; cursor: pointer; }
.neu-kachel img { display: block; width: 100%; height: 100%; object-fit: cover; }
.neu-kachel .play { left: 6px; bottom: 6px; width: 28px; height: 28px; }
.neu-kachel .play::after { left: 10px; top: 7px; }
.neu-kachel .marke { position: absolute; left: 6px; bottom: 6px; padding: 3px 6px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; }
.neu-kachel .name { color: inherit; text-decoration: none; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.karte-bild { flex: none; width: 56px; height: 56px; object-fit: cover; background: var(--soft); }
.karte-kopf .karte-titel { flex: 1; min-width: 0; }
.party.mit-bild { grid-template-columns: 52px minmax(0, 1fr) 84px; }
/* Partyzeile: Titel und Preis in einer Zeile, darunter Ort · Barrio, dann kleine Sticker und Vibe; rechts der Flyer. */
.party .titelzeile { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; min-width: 0; }
.party .titelzeile .t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.party .preis { flex: none; max-width: 45%; padding-top: 2px; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.party .preis.leise { color: var(--dim); }
.party .m { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.party .zeile3 { display: flex; align-items: center; gap: 4px; margin-top: 6px; min-width: 0; }
.party .zeile3 .vibe { margin-left: 6px; font-size: 14px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.party.mit-bild.reihe { grid-template-columns: minmax(0, 1fr) 84px; }
.party-bild.leer { display: block; aspect-ratio: auto; background: none; }
.party-bild { width: 84px; aspect-ratio: 3 / 4; object-fit: cover; background: var(--soft); }
.insta-ziel .instagram-media { margin: 0 !important; min-width: 0 !important; width: 100% !important; }

/* Karte */
.karte-gross { position: relative; height: calc(100vh - 110px); min-height: 520px; border-top: 1px solid var(--line); }
@media (min-width: 600px) { .karte-gross { height: 742px; } }
#karte, .karte-flaeche { position: absolute; inset: 0; }
.ansicht-karte { margin-top: 8px; }
/* Auf der Karte dieselbe Tagesleiste wie bei „Esta noche“, als schwebende Leiste über der Karte */
.karte-tage { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 500; padding: 16px 6px 6px; background: var(--bg); box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.karte-tage button { flex-basis: calc((100% - 24px) / 7); }
.karte-hinweis { position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%); z-index: 500; padding: 10px 16px; background: var(--fg); color: var(--bg); font-size: 14px; white-space: nowrap; pointer-events: none; }
.karte-auswahl { position: absolute; left: 12px; right: 12px; bottom: 28px; z-index: 500; background: var(--bg); padding: 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 4px 20px rgba(0,0,0,.16); }
.karte-auswahl .oben { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.karte-auswahl .oben b { display: block; font-size: 18px; }
.karte-auswahl .oben span { font-size: 14px; color: var(--dim); }
.karte-auswahl .pille { flex: none; font-size: 13px; padding: 5px 10px; color: var(--fg); }
.karte-auswahl .pille.party { background: var(--accent-tint); color: var(--accent-text); }
.karte-klein { height: 140px; overflow: hidden; background: var(--soft); }
.leaflet-container { font: inherit; background: var(--soft); }
.leaflet-control-attribution { font-size: 10px; background: rgba(255,255,255,.85) !important; color: #6b6966; }
.leaflet-control-attribution a { color: #141414; }
.leaflet-bar { border: 1px solid var(--border) !important; box-shadow: none !important; }
.leaflet-bar a { background: var(--bg); color: var(--fg); }
.pin { position: absolute; width: max-content; transform: translate(-50%, calc(-100% - 6px)); white-space: nowrap; padding: 6px 10px; font-size: 12px; font-weight: 700; background: var(--bg); color: var(--fg); box-shadow: 0 0 0 1px var(--line), 0 2px 6px rgba(0,0,0,.12); cursor: pointer; }
.pin::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; margin-left: -4px; background: inherit; transform: rotate(45deg); box-shadow: 1px 1px 0 0 rgba(20,20,20,.12); }
/* .party gilt auch für die Party-Karten in der Liste; hier deren Raster, Abstand und Linie zurücksetzen. */
.pin.party { display: block; padding: 6px 10px; border-top: 0; background: var(--accent); color: #fff; }
.pin.sel { background: var(--fg); color: var(--bg); z-index: 10; transform: translate(-50%, calc(-100% - 6px)) scale(1.08); }
.pin-punkt { width: 14px; height: 14px; background: var(--fg); border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--fg); }

/* Guía */
.sos { margin: 18px 20px 0; padding: 18px; background: #141414; color: #fff; display: flex; flex-direction: column; gap: 12px; }
.sos b { font-size: 19px; display: block; }
.sos p { margin: 4px 0 0; font-size: 14px; color: #cfcac4; line-height: 1.4; }
.sos .knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sos .knopf { height: 44px; font-size: 15px; }
.sos .knopf.akzent { background: #d1366f; color: #fff; }
.sos .knopf.rahmen { background: transparent; color: #fff; border: 1px solid #5a5856; }
.g-eintrag { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
a.g-eintrag:hover { background: var(--hover); color: inherit; }
.g-eintrag b { font-size: 16px; display: block; }
.g-eintrag small { font-size: 13px; color: var(--dim); line-height: 1.35; }
.schritte { padding: 20px 20px 0; display: flex; flex-direction: column; gap: 14px; }
.schritt { display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; align-items: start; }
.schritt .n { width: 32px; height: 32px; background: var(--fg); color: var(--bg); font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.schritt b { display: block; font-size: 16px; padding-top: 5px; }
.schritt span { font-size: 14px; color: var(--mid); line-height: 1.45; }
.g-fakten { margin: 24px 20px 28px; display: grid; grid-template-columns: 86px 1fr; row-gap: 12px; column-gap: 10px; font-size: 15px; line-height: 1.4; border-top: 1px solid var(--line); padding-top: 18px; }
.g-fakten dt { color: var(--dim); } .g-fakten dd { margin: 0; }
.zeitleiste { padding: 0 20px 28px; display: flex; flex-direction: column; }
.zeitleiste > div { display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; }
.zeitleiste .jahr { font-size: 18px; font-weight: 800; font-stretch: 75%; padding-top: 1px; }
.zeitleiste .eintrag { border-left: 2px solid var(--line); padding: 0 0 18px 14px; display: flex; flex-direction: column; gap: 3px; }
.zeitleiste .eintrag b { font-size: 15px; line-height: 1.3; }
.zeitleiste .eintrag span { font-size: 14px; color: var(--mid); line-height: 1.45; }
.quelle { font-size: 12px; color: var(--faint); }

.weg { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Handoff „Restructure“: klebender Kopf (Tage/Segmente + Filterzeile + Lista|Mapa), Zeilen, Karten */
.kopf-klebend { position: sticky; top: 48px; z-index: 1050; background: var(--bg); border-bottom: 1px solid var(--line); }
.kopf-klebend .tage { padding-bottom: 6px; }
.kopf-klebend .filterzeile { padding: 8px 20px 10px; }
.filter-knoepfe { display: flex; gap: 6px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.filter-knoepfe::-webkit-scrollbar { display: none; }
.filter-knopf { flex: none; height: 36px; padding: 0 12px; border: 1px solid var(--border); background: var(--bg); color: var(--fg); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.filter-knopf.aktiv { background: var(--fg); color: var(--bg); border-color: var(--fg); }

.ortzeile { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; padding: 14px 20px; border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
a.ortzeile:hover { background: var(--hover); }
.oz-bild { width: 56px; height: 56px; object-fit: cover; background: var(--soft); }
.oz-bild.leer { background: none; }
.oz-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.oz-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.oz-kopf b { font-size: 17px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oz-status { flex: none; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; padding-top: 2px; }
.oz-status.leise { font-weight: 400; color: var(--dim); }
.oz-meta { font-size: 14px; color: var(--dim); }
.oz-publikum { display: flex; align-items: center; gap: 2px; margin-top: 4px; min-width: 0; }
.oz-kopfbild { position: relative; width: 30px; height: 30px; flex: none; }
.oz-kopfbild img { width: 100%; height: 100%; display: block; }
.oz-kopfbild.an::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: -3px; height: 3px; background: var(--accent); }
.oz-worte { margin-left: 8px; font-size: 14px; font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oz-gute { font-size: 13px; color: var(--dim); }

.fiesta-karten { display: flex; gap: 10px; overflow-x: auto; padding: 0 20px 6px; scroll-snap-type: x proximity; scrollbar-width: none; }
.fiesta-karten::-webkit-scrollbar { display: none; }
.fiesta-karte { flex: 0 0 78%; display: flex; gap: 12px; padding: 10px; border: 1px solid var(--border); text-decoration: none; color: inherit; scroll-snap-align: start; }
.fiesta-karte img { flex: none; width: 64px; height: 80px; object-fit: cover; background: var(--soft); }
.fk-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fk-zeit { font-size: 15px; font-variant-numeric: tabular-nums; }
.fk-titel { font-size: 15px; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fk-ort { font-size: 13px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

details.ohne-zeiten > summary { cursor: pointer; list-style: none; border-top: 1px solid var(--line); }
details.ohne-zeiten > summary::-webkit-details-marker { display: none; }
details.ohne-zeiten[open] .pfeil { transform: rotate(180deg); }
.abschnitt-liste[hidden] { display: none; }
.kopf-klebend .suche-block { padding: 12px 20px 0; }
.verb-reihe { display: flex; gap: 6px; padding: 10px 20px 0; overflow-x: auto; scrollbar-width: none; }
.verb-reihe::-webkit-scrollbar { display: none; }
.verb-reihe .chip { flex: none; white-space: nowrap; }
.verb-reihe .chip span { margin-left: 5px; color: var(--dim); font-weight: 400; }
.verb-reihe .chip[aria-pressed="true"] span { color: inherit; }
.verb-luecke { flex: 0 0 4px; }
.fiesta-ansichten { margin: 12px 20px 0; }
.party .zeit small { display: block; font-size: 13px; font-weight: 400; color: var(--dim); }
a.serie-zeile:hover { background: var(--hover); }

.d-gute { font-size: 14px; color: var(--dim); }
.foto-hinweis { margin: 10px 20px 0; padding: 14px 16px; background: var(--soft); font-size: 14px; color: var(--dim); }
details.warum > summary { display: flex; justify-content: space-between; align-items: baseline; cursor: pointer; list-style: none; }
details.warum > summary::-webkit-details-marker { display: none; }
details.warum[open] .pfeil { transform: rotate(180deg); }
.quellen { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; }
.quellen a { color: var(--fg); }

/* Kartengruppen (Markercluster): eckig, schwarz mit weißer Zahl; pink, wenn eine Party dabei ist. Kein Rund. */
.pin-gruppe { position: absolute; transform: translate(-50%, -50%); min-width: 34px; height: 34px; padding: 0 8px; display: flex; align-items: center; justify-content: center; background: var(--fg); color: var(--bg); font-size: 14px; font-weight: 800; box-shadow: 0 0 0 2px var(--bg), 0 2px 6px rgba(0,0,0,.25); cursor: pointer; }
.pin-gruppe.party { background: var(--accent); color: #fff; }
.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow { transition: transform .3s ease-out, opacity .3s ease-in; }