*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#F6F4EF;--surface:#FFFFFF;--text:#111111;--text-sub:#555555;
  --text-dim:#888888;--border:#E8E6E2;--nav-bg:rgba(246,244,239,.94);--nav-border:#E6E1D6;
  --chip-active:var(--brand-green);
  --brand-green:#35760F;--brand-green-vivid:#3CA80F;--brand-blue:#0B57A5;--primary:var(--brand-green);--primary-ink:#FFFFFF;--brand-title:#2F3B24;--brand-me:#8A9A73;
  --shadow-sm:0 1px 3px rgba(0,0,0,.08);--shadow-md:0 4px 20px rgba(0,0,0,.10);
  --radius:12px;--card-w:300px;
}
@media(prefers-color-scheme:dark){:root{
  --bg:#0F0F0F;--surface:#1A1A1A;--text:#F0EFEC;--text-sub:#AAAAAA;
  --text-dim:#666666;--border:#2A2A2A;--nav-bg:rgba(22,21,19,.96);--nav-border:#2C2A26;--chip-active:var(--brand-green);
  --brand-green:#35760F;--brand-green-vivid:#3CA80F;--brand-blue:#0B57A5;--primary:var(--brand-green);--primary-ink:#12160D;--brand-title:#EDEFE8;--brand-me:#9DB187;
  --shadow-sm:0 1px 3px rgba(0,0,0,.3);--shadow-md:0 4px 20px rgba(0,0,0,.4);
}}
:root[data-theme="dark"]{--bg:#0F0F0F;--surface:#1A1A1A;--text:#F0EFEC;--text-sub:#AAAAAA;--text-dim:#666666;--border:#2A2A2A;--nav-bg:rgba(22,21,19,.96);--nav-border:#2C2A26;--chip-active:var(--brand-green);--brand-green:#35760F;--brand-green-vivid:#3CA80F;--brand-blue:#0B57A5;--primary:var(--brand-green);--primary-ink:#12160D;--brand-title:#EDEFE8;--brand-me:#9DB187;--shadow-sm:0 1px 3px rgba(0,0,0,.3);--shadow-md:0 4px 20px rgba(0,0,0,.4)}
:root[data-theme="light"]{--bg:#F6F4EF;--surface:#FFFFFF;--text:#111111;--text-sub:#555555;--text-dim:#888888;--border:#E8E6E2;--nav-bg:rgba(246,244,239,.94);--nav-border:#E6E1D6;--chip-active:var(--brand-green);--brand-green:#35760F;--brand-green-vivid:#3CA80F;--brand-blue:#0B57A5;--primary:var(--brand-green);--primary-ink:#FFFFFF;--brand-title:#2F3B24;--brand-me:#8A9A73;--shadow-sm:0 1px 3px rgba(0,0,0,.08);--shadow-md:0 4px 20px rgba(0,0,0,.10)}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--text);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
nav{position:sticky;top:0;z-index:30;background:var(--nav-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--nav-border)}
/* Kopfzeile: Logo + Wortmarke links, Suchleiste rechts */
.nav-top{max-width:1180px;margin:0 auto;padding:9px 22px 0;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:12px;cursor:pointer;background:none;border:0;padding:0;text-align:left;-webkit-tap-highlight-color:transparent}
.brand-emblem{flex:0 0 auto;height:60px;width:auto;object-fit:contain;display:block}
.brand-text{display:flex;align-items:center;min-width:0}
.brand-title{font-size:clamp(21px,2.9vw,31px);font-weight:600;line-height:1.02;letter-spacing:-.015em;color:var(--text);text-wrap:balance;white-space:nowrap}
.brand-hop{color:var(--brand-green)}
.brand-name{font-weight:800;letter-spacing:-.02em}
.brand-region{font-weight:500;font-size:.72em;color:var(--text-sub);letter-spacing:0;margin-left:.12em}
.brand-sub{font-size:clamp(12.5px,1.5vw,15.5px);font-weight:600;color:var(--text-sub);letter-spacing:.004em}
.nav-search{flex:0 1 300px;min-width:170px}
.nav-filters{max-width:1180px;margin:0 auto;padding:12px 22px 11px;display:flex;flex-direction:column;gap:8px}
@media(max-width:760px){
  .nav-top{padding:9px 16px 0;gap:11px}
  .nav-search{flex:1 1 100%;margin-left:0;min-width:0}
  .brand-emblem{height:50px}
  .brand-title{white-space:normal}
  .nav-filters{padding:10px 16px}
}
/* Suchleiste */
.filter-search{display:flex;align-items:center;gap:7px;border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:0 15px;height:40px;width:100%;max-width:none;box-shadow:var(--shadow-sm)}
.filter-search:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(53,118,15,.14)}
.fs-ic{font-size:13px;line-height:1;flex:0 0 auto;opacity:.75;pointer-events:none}
.fs-input{flex:1;min-width:0;border:none;background:none;color:var(--text);font-size:14px;outline:none;-webkit-appearance:none;appearance:none}
.fs-input::placeholder{color:var(--text-dim)}
.fs-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.fs-clear{flex:0 0 auto;border:none;background:none;color:var(--text-dim);cursor:pointer;font-size:15px;line-height:1;padding:0 2px}
.fs-clear:hover{color:var(--text)}
/* Zeile 2: Schnellfilter + „Datum" + „Orte" + „Zurücksetzen" – gemeinsame Grundlinie, gleiche Höhen */
.filter-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.filter-ctrl{display:inline-flex;align-items:center;gap:6px}
.filter-ctrl.on{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}
.fmenu{position:relative;display:inline-flex}
.fpop{position:absolute;top:calc(100% + 6px);left:0;z-index:40;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-md);padding:10px;min-width:210px;display:flex;flex-direction:column;gap:8px}
.fpop[hidden]{display:none}
.fpop-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;color:var(--text-sub)}
.fpop-row input{border:1px solid var(--border);border-radius:8px;padding:5px 8px;font:inherit;font-size:13px;color:var(--text);background:var(--bg);color-scheme:light dark}
.fpop-clear{border:none;background:none;color:var(--text-dim);font-size:12.5px;cursor:pointer;text-align:left;padding:2px 0}
.fpop-clear:hover{color:var(--text)}
.orte-pop{min-width:190px;max-height:300px;overflow:auto}
.orte-list{display:flex;flex-direction:column;gap:1px;margin-bottom:6px}
.orte-opt{display:flex;align-items:center;gap:8px;font-size:13px;padding:4px 6px;cursor:pointer;border-radius:6px;color:var(--text)}
.orte-opt:hover{background:var(--border)}
.orte-opt input{accent-color:var(--primary)}
/* „In meiner Nähe" (Radiusfilter) */
.orte-near{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--text);padding:2px 6px;cursor:pointer}
.orte-near input{accent-color:var(--primary)}
.near-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-sub);padding:4px 6px;flex-wrap:wrap}
.near-row select{border:1px solid var(--border);border-radius:7px;padding:3px 6px;font:inherit;font-size:12px;color:var(--text);background:var(--bg);color-scheme:light dark}
.near-msg{font-size:12px;color:#b42318;background:rgba(180,35,24,.08);border-radius:7px;padding:6px 8px;margin:2px 6px;line-height:1.4}
.near-msg[hidden]{display:none}
.orte-sep{height:1px;background:var(--border);margin:6px 2px}
/* „Kriterien"-Bereich: Mehrfachauswahl aller Event-Tags */
.criteria-pop{min-width:250px;max-width:300px}
.criteria-grid{display:flex;flex-direction:column;gap:2px;max-height:52vh;overflow:auto;margin-bottom:8px}
.crit-opt{display:flex;align-items:center;gap:9px;font-size:13px;padding:6px 8px;cursor:pointer;border-radius:8px;color:var(--text);border:1px solid transparent}
.crit-opt:hover{background:var(--bg)}
.crit-opt input{accent-color:var(--primary);width:16px;height:16px;flex:0 0 auto;cursor:pointer}
.crit-opt:has(input:checked){background:rgba(53,118,15,.13);border-color:var(--primary);font-weight:600}
.criteria-actions{display:flex;gap:8px;border-top:1px solid var(--border);padding-top:9px}
.crit-reset{flex:0 0 auto;background:none;border:1px solid var(--border);border-radius:999px;padding:7px 14px;font-size:13px;color:var(--text-sub);cursor:pointer}
.crit-reset:hover{color:var(--text);border-color:var(--text)}
.crit-apply{flex:1 1 auto;background:var(--primary);color:var(--primary-ink);border:1px solid var(--primary);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer}
.crit-apply:hover{filter:brightness(.96)}
.filter-spacer{flex:1 1 auto}
.reset-btn{display:none;align-items:center;min-height:34px;font-size:12.5px;color:var(--text-dim);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:6px 14px;cursor:pointer}
.reset-btn.visible{display:inline-flex}
.reset-btn:hover{color:var(--text);border-color:var(--text)}
@media(max-width:640px){
  .filter-search{max-width:none}
  /* KEIN -webkit-overflow-scrolling:touch: seit iOS 13 wirkungslos (Momentum-Scrolling ist
     Standard), erzeugt aber eine eigene Compositing-Ebene mit veraltetem Hit-Testing – auf echten
     iPhones wurde dadurch der erste Tap auf einen Chip nach dem seitlichen Scrollen verschluckt
     ("Popup öffnet gar nicht"). touch-action:manipulation entfernt zusätzlich die Doppeltipp-
     Verzögerung, sodass Taps sofort ankommen. */
  .filter-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .filter-row .chip,.filter-row .filter-ctrl{touch-action:manipulation}
  .filter-row::-webkit-scrollbar{display:none}
  .filter-spacer{display:none}
  /* MOBIL-FIX Filter-Popups (Datum/Orte/Kriterien): .filter-row ist hier ein horizontaler
     Scroll-Container – overflow-x:auto erzwingt overflow-y:auto und schnitt die absolut
     positionierten .fpop-Popups ab; sie waren sichtbar „offen", aber nicht antippbar (Taps
     landeten auf dem Inhalt darunter). Die Popups werden daher an .nav-filters verankert:
     ihr Containing Block liegt AUSSERHALB des Scroll-Containers, wodurch sie der Klippung
     entkommen. Die Zeile behält ihr horizontales Scrollen, Desktop bleibt unverändert. */
  .nav-filters{position:relative}
  .fmenu{position:static}
  .fpop{left:16px;right:16px;min-width:0;width:auto;max-height:70vh;overflow:auto}
}
/* Keine-Treffer-Meldung */
.no-results{text-align:center;color:var(--text-dim);font-size:15px;padding:40px 16px}
/* Datumsfilter – nach konkretem Tag filtern */
/* Datumsfilter: natives <input type=date> transparent im Hintergrund, sichtbares Label davor
   (zeigt „Datum auswählen" bzw. das gewählte Datum) – kein technisches TT.MM.JJJJ, mobil nativer Picker */
.date-filter{position:relative;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:5px 12px;font-size:13px;color:var(--text);cursor:pointer;flex-shrink:0}
.date-filter:focus-within{border-color:var(--primary)}
.date-filter-ic{font-size:13px;line-height:1;position:relative;z-index:0;pointer-events:none}
.date-filter-label{position:relative;z-index:0;pointer-events:none;color:var(--text);white-space:nowrap}
.date-filter input[type=date]{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer;z-index:1;color-scheme:light dark;-webkit-appearance:none;appearance:none}
.date-filter input[type=date]:focus{outline:none}
.date-filter-clear{position:relative;z-index:2;border:none;background:none;color:var(--text-dim);cursor:pointer;font-size:14px;line-height:1;padding:0 2px}
.date-filter-clear:hover{color:#b42318}
.filter-bar::-webkit-scrollbar{display:none}
.filter-sep{flex-shrink:0;width:1px;height:20px;background:var(--nav-border);margin:0 3px}
.chip-city{font-size:12px;padding:3px 11px}
.chip{display:inline-flex;align-items:center;gap:5px;min-height:34px;padding:6px 14px;border-radius:999px;font-size:13px;font-weight:500;white-space:nowrap;cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--text-sub);transition:all .15s;flex-shrink:0}
.chip:hover{border-color:var(--primary);color:var(--primary)}
.chip.active{background:var(--primary);color:var(--primary-ink);border-color:var(--primary);font-weight:600}
.chip svg{width:13px;height:13px;flex-shrink:0;opacity:.65;transition:opacity .15s}
.chip:hover svg,.chip.active svg{opacity:1}
.nav-theme{height:34px;width:34px;display:inline-flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:0;font-size:15px;color:var(--text-dim);cursor:pointer;flex-shrink:0}
.masthead-gap{height:14px}
.page-intro{max-width:1180px;margin:0 auto;padding:10px 22px 6px}
.page-intro-inner{border-left:3px solid var(--brand-green);padding-left:16px;max-width:750px}
.page-h1{font-size:clamp(26px,3.6vw,32px);font-weight:800;letter-spacing:-.015em;color:var(--text);margin:0 0 6px;line-height:1.12;text-wrap:balance}
.page-intro-text{font-size:17.5px;line-height:1.6;color:var(--text-sub);margin:0}
/* Startseiten-Hero (nur page-intro--home; Stadtseiten-Intros mit grüner Linie bleiben unverändert):
   KEIN Rahmen, KEINE grüne Fläche – der Bereich nutzt die normale Seiten-Hintergrundfarbe und verschmilzt
   mit dem Hintergrund. Ohne früheren grünen Balken. Text links, Ansichtsumschalter rechts;
   auf schmalen Screens rutscht der Umschalter unter den Text. */
.page-intro--home{padding-top:12px;padding-bottom:8px}
.page-intro--home .page-intro-inner{
  border:0;background:transparent;max-width:none;padding:0;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.page-intro--home .page-intro-hero-text{flex:1 1 340px;min-width:0;max-width:760px}
.page-intro--home .page-h1{font-size:clamp(21px,2.7vw,27px);font-weight:600;letter-spacing:-.01em;margin:0 0 8px}
.page-intro--home .page-intro-text{max-width:640px;color:var(--text-sub);line-height:1.6;font-size:16.5px;margin:0;text-wrap:pretty}
.page-intro--home .page-intro-actions{flex:0 0 auto}
@media(max-width:640px){
  .page-intro--home .page-intro-inner{align-items:flex-start;gap:14px}
  .page-intro--home .page-intro-hero-text{flex:1 1 100%}
  .page-intro--home .page-intro-actions{flex:1 1 100%}   /* Umschalter unter den Text */
}
.masthead{max-width:1180px;margin:0 auto;padding:22px 22px 6px}
.mh-claim{font-size:clamp(16px,2vw,21px);font-weight:600;color:var(--brand-title);letter-spacing:-.004em;line-height:1.25;text-wrap:balance}
.mh-claim::after{content:"";display:block;width:38px;height:3px;border-radius:2px;background:var(--primary);margin-top:11px}
@media(max-width:760px){.masthead{padding:16px 16px 4px}}
.mh-info{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-dim);margin-top:2px}
.mh-info.info-below{margin:0 0 16px}
.mh-info .mh-sep{opacity:.6}
.mh-dot{width:7px;height:7px;border-radius:50%;background:var(--chip-active);box-shadow:0 0 0 3px rgba(53,118,15,.16);flex-shrink:0}
:root[data-theme="dark"] .mh-dot{box-shadow:0 0 0 3px rgba(53,118,15,.22)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .mh-dot{box-shadow:0 0 0 3px rgba(53,118,15,.22)}}
@media(max-width:640px){.masthead{padding:14px 18px 12px;gap:13px}.mh-logo{height:58px}}
main{max-width:1180px;margin:0 auto;padding:16px 22px 80px}
.event-count{font-size:13px;color:var(--text-dim);margin-bottom:28px}
.event-count strong{color:var(--text);font-weight:600}
.date-section{margin-bottom:40px}
.date-label{font-size:13px;font-weight:700;color:var(--text-dim);letter-spacing:.06em;text-transform:uppercase;margin-bottom:18px}
.date-label strong{color:var(--text);font-size:15px}
/* Monatsgruppierung: eine linksbündige <h2> je Monat, mehr Abstand oben als unten */
.month-section{margin-bottom:10px}
.month-label{font-size:20px;font-weight:800;color:var(--text);text-align:left;letter-spacing:-.01em;
  margin:44px 0 16px;padding-bottom:8px;border-bottom:1px solid var(--border);position:relative}
.month-label::after{content:"";position:absolute;left:0;bottom:-1px;width:44px;height:3px;border-radius:2px;background:var(--chip-active)}
.month-section:first-child .month-label{margin-top:6px}
/* Alle Karten in Highlight-Größe: feste Breite var(--card-w), nicht gestreckt */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,var(--card-w));justify-content:start;gap:18px}
.slider-outer{position:relative;margin:0 -4px}
.slider-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px 4px 12px;cursor:grab}
.slider-track:active{cursor:grabbing}
.slider-track::-webkit-scrollbar{display:none}
.slider-track .event-card{flex:0 0 var(--card-w);scroll-snap-align:start}
@media(max-width:640px){:root{--card-w:84vw}.card-grid{grid-template-columns:1fr}}
.slider-btn{position:absolute;top:64px;z-index:5;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--border);background:var(--surface);box-shadow:0 2px 12px rgba(0,0,0,.15);cursor:pointer;font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;color:var(--text);transition:background .15s,color .15s;padding:0}
.slider-btn:hover{background:var(--text);color:var(--bg)}
.slider-btn[disabled]{opacity:.2;cursor:default;pointer-events:none}
.slider-btn.prev{left:0px}
.slider-btn.next{right:0px}
.event-card{background:var(--surface);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease;display:flex;flex-direction:column}
.event-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.card-visual{height:168px;position:relative;overflow:hidden}
.card-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .45s ease}
.event-card:hover .card-img{transform:scale(1.06)}
/* Feiner, dezenter Rahmen um das Kachelbild – folgt den abgerundeten oberen Ecken, skaliert nicht mit dem Bild */
.card-visual::after{content:"";position:absolute;inset:0;border:1px solid #E5E7EB;border-radius:var(--radius) var(--radius) 0 0;pointer-events:none;z-index:2}
/* Kalender-Datums-Badge (Highlights) – grüner Kopfbalken wie im Draft */
/* Kompaktes, ruhiges Datums-Badge oben rechts: weißer Grund, dezente Kontur, grüne Akzentfarbe. */
.card-datebadge{position:absolute;top:10px;right:10px;z-index:3;background:#fff;border:1px solid rgba(0,0,0,.10);border-top:2px solid var(--chip-active);border-radius:9px;min-width:40px;max-width:96px;text-align:center;line-height:1;box-shadow:0 2px 8px rgba(0,0,0,.14);padding:5px 8px}
.db-day{display:block;font-size:19px;font-weight:800;color:#1d1d1d}
.db-mon{display:block;font-size:9px;font-weight:800;letter-spacing:.08em;color:var(--chip-active);margin-top:2px}
.db-multi{padding:6px 9px}
.db-text{display:block;font-size:11px;font-weight:700;letter-spacing:.02em;color:#1d1d1d;line-height:1.28}
/* Badge: bei Highlights immer, bei regulären Karten nur in Monats-Sektionen */
.card-datebadge{display:block}   /* Datums-Badge auf JEDER Eventkarte sichtbar (Monatsansicht) */
.card-new-badge{position:absolute;top:12px;right:12px;z-index:3;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--surface);color:var(--text);padding:3px 8px;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.16)}
.card-soldout{position:absolute;top:12px;left:12px;z-index:4;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:#b42318;color:#fff;padding:4px 9px;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.2)}
/* ── Merkliste / Favoriten ─────────────────────────────── */
/* Karten-Herz: dezent & klein, unten links neben dem Ort (im Footer) */
.fav-btn{flex:0 0 auto;width:30px;height:30px;border:none;background:none;color:var(--text-dim);font-size:18px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;transition:transform .12s,color .12s;-webkit-tap-highlight-color:transparent}
.fav-btn:hover{color:#c0355a;transform:scale(1.14)}
.card-footer .fav-btn{margin-left:auto}
.fav-btn[aria-pressed="true"]{color:#c0355a}
.fav-btn:focus-visible{outline:2px solid #c0355a;outline-offset:2px;border-radius:6px}
.fav-btn[aria-pressed="true"] .fav-heart::before{content:"♥"}
.fav-btn .fav-heart::before{content:"♡"}
.fav-btn .fav-heart{font-size:0}
.fav-btn .fav-heart::before{font-size:18px}
.fav-btn-detail .fav-heart::before{font-size:24px}
.fav-btn.fav-anim{animation:favpop .32s ease}
@keyframes favpop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.dp-title-row{display:flex;align-items:flex-start;gap:14px;justify-content:space-between}
.fav-btn-detail{position:static;flex:0 0 auto;width:48px;height:48px;background:var(--surface);border:1px solid var(--border);box-shadow:none}
.fav-btn-detail:hover{background:var(--surface)}
.nav-fav{flex-shrink:0;height:34px;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:999px;padding:0 14px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent}
@media(max-width:560px){.nav-fav{padding:6px 11px}}
.nav-fav:hover{border-color:#c0355a;color:#c0355a}
.nav-fav-heart{color:#c0355a;font-size:15px;line-height:1}
.nav-fav.has-favs{border-color:#c0355a}
.fav-overlay{position:fixed;inset:0;z-index:1200;background:rgba(20,24,30,.46);display:none;opacity:0;transition:opacity .2s}
.fav-overlay.open{display:block;opacity:1}
.fav-drawer{position:absolute;top:0;right:0;height:100%;width:min(420px,92vw);background:var(--bg);box-shadow:-8px 0 30px rgba(0,0,0,.22);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .24s ease}
.fav-overlay.open .fav-drawer{transform:translateX(0)}
.fav-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--border)}
.fav-drawer-head h2{margin:0;font-size:18px;color:var(--text)}
.fav-close{border:none;background:none;font-size:20px;cursor:pointer;color:var(--muted);width:36px;height:36px;border-radius:8px}
.fav-close:hover{background:var(--surface)}
/* Teilen-Funktion der Merkliste */
.fav-head-actions{display:flex;align-items:center;gap:8px}
.fav-share-btn{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 13px;border:1px solid var(--primary);background:var(--primary);color:var(--primary-ink);border-radius:999px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fav-share-btn:hover{filter:brightness(.96)}
.fav-share-panel{padding:12px 16px;border-bottom:1px solid var(--border);background:var(--surface)}
.fav-share-panel[hidden]{display:none}
.fav-share-hint{font-size:12px;color:var(--text-sub);line-height:1.4;margin:0 0 9px}
.fav-share-row{display:flex;gap:8px}
.fav-share-url{flex:1;min-width:0;border:1px solid var(--border);border-radius:8px;padding:8px 10px;font:inherit;font-size:12.5px;color:var(--text);background:var(--bg)}
.fav-share-copy{flex:0 0 auto;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:8px;padding:8px 12px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.fav-share-copy:hover{border-color:var(--primary);color:var(--primary)}
/* Geteilte Merkliste – Empfängeransicht (ohne Login) */
.share-overlay{position:fixed;inset:0;z-index:1300;background:rgba(20,24,30,.5);display:none;opacity:0;transition:opacity .2s;overflow-y:auto;padding:24px 14px}
.share-overlay.open{display:block;opacity:1}
.share-modal{max-width:560px;margin:0 auto;background:var(--bg);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.3);display:flex;flex-direction:column;overflow:hidden}
.share-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border)}
.share-head h2{margin:0;font-size:18px;color:var(--text)}
.share-list{padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.share-item{display:flex;gap:12px;align-items:stretch;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface);text-decoration:none;color:inherit;transition:box-shadow .15s}
.share-item:hover{box-shadow:var(--shadow-md)}
.share-item.expired{opacity:.72}
.share-thumb{flex:0 0 clamp(88px,26vw,120px);align-self:stretch;object-fit:cover;background:var(--border)}
.share-info{flex:1;min-width:0;padding:11px 12px;display:flex;flex-direction:column;gap:4px;justify-content:center}
.share-title{margin:0;font-size:15px;font-weight:600;color:var(--text);line-height:1.28}
.share-meta{font-size:12.5px;color:var(--text-sub);display:flex;gap:6px;align-items:flex-start;min-width:0}
.share-meta>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.share-expired{align-self:flex-start;margin-top:2px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;background:rgba(180,35,24,.1);color:#b42318;padding:2px 8px;border-radius:5px}
.share-foot{padding:12px 16px 16px;border-top:1px solid var(--border)}
.share-own{width:100%;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:10px;padding:11px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.share-own:hover{border-color:var(--primary);color:var(--primary)}
.share-empty{padding:30px 16px;text-align:center;color:var(--text-dim);font-size:14px}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(10px);z-index:1400;background:var(--text);color:var(--bg);font-size:13.5px;font-weight:600;padding:10px 18px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.25);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast[hidden]{display:none}
.fav-list{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.fav-empty{color:var(--muted);text-align:center;padding:40px 16px;font-size:14px;line-height:1.6}
.fav-item{border:1px solid var(--border);border-radius:14px;padding:13px 14px;background:var(--surface)}
.fav-item.past{opacity:.66}
.fav-item-title{font-weight:700;font-size:15px;color:var(--text);margin:0 0 5px;line-height:1.3}
.fav-item-meta{font-size:12.5px;color:var(--muted);margin:2px 0;display:flex;gap:6px;align-items:flex-start}
.fav-past-badge{display:inline-block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;background:var(--border);color:var(--muted);padding:2px 7px;border-radius:5px;margin-bottom:6px}
.fav-item-actions{display:flex;gap:8px;margin-top:10px}
.fav-item-actions button{flex:1;border-radius:9px;padding:8px 10px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid var(--border)}
.fav-act-detail{background:var(--text);color:var(--bg);border-color:var(--text)}
.fav-act-remove{background:none;color:#b42318;border-color:var(--border)}
.fav-act-remove:hover{border-color:#b42318}
.fav-section-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:6px 2px 0}
.card-body{padding:14px 16px 15px;flex:1;display:flex;flex-direction:column}
.card-content{flex:1;display:flex;flex-direction:column;gap:5px}
.card-cat{font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--chip-active)}
.card-date{font-size:12px;font-weight:500;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em}
.card-listdate{display:none}   /* Klartext-Datum nur in der Listenansicht (Kachel zeigt Datums-Badge) */
.card-when{display:flex;flex-direction:column;gap:1px;min-width:0}
.card-when:not(:has(.card-time)){display:none}   /* Kachel ohne Uhrzeit: kein leerer Wrapper (Datum steckt im Badge) */
.card-time{font-size:12px;font-weight:600;color:var(--text-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-title{display:block;width:100%;text-align:left;background:none;border:0;padding:0;cursor:pointer;font-family:inherit;font-size:15px;font-weight:600;color:var(--text);line-height:1.28;text-wrap:balance;margin-top:1px;text-decoration:none}
.card-title:hover{text-decoration:none;opacity:.7}
.card-title:focus-visible{outline:2px solid var(--chip-active);outline-offset:3px;border-radius:4px}
.card-pills{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.card-pill{font-size:10px;font-weight:700;letter-spacing:.03em;padding:2px 8px;border-radius:10px;white-space:nowrap}
/* Einheitliche 5-Tag-Anzeige – kompakt & dezent (Kachel + Detailseite) */
.card-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.tag-pill{font-size:10.5px;font-weight:600;letter-spacing:.02em;padding:2px 9px;border-radius:999px;background:var(--border);color:var(--text-sub);white-space:nowrap}
.dp-tags{margin:2px 0 22px}.dp-tags .tag-pill{font-size:12px;padding:3px 11px}
.card-footer{flex-shrink:0;padding-top:12px;display:flex;align-items:flex-start;gap:7px}
.card-location{display:flex;align-items:flex-start;gap:5px;font-size:12.5px;color:var(--text-dim);font-weight:500;line-height:1.35;padding-top:6px}
.card-location .loc-pin{flex-shrink:0;color:var(--chip-active);opacity:.9;margin-top:2px}
.card-location span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.event-card{cursor:pointer}
.event-card:focus-visible{outline:2px solid var(--chip-active);outline-offset:2px}
/* ── Ansicht-Umschalter (Kacheln / Liste) – nur EINMAL oberhalb aller Ergebnisse ── */
.view-bar{max-width:1180px;margin:0 auto 6px;padding:0 22px;display:flex;justify-content:flex-end}
.view-toggle{display:inline-flex;flex:0 0 auto;border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:2px;gap:2px}
.vt-btn{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:var(--text-sub);font:inherit;font-size:12.5px;font-weight:600;padding:5px 12px;border-radius:999px;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.vt-btn>span[aria-hidden]{font-size:13px;line-height:1}
.vt-btn.active{background:var(--primary);color:var(--primary-ink)}
.vt-btn:not(.active):hover{color:var(--primary)}
@media(max-width:520px){.vt-label{display:none}.vt-btn{padding:6px 10px}}
/* ── Listenansicht: kompakte, flache Zeile je Event – Bild links, dann Titel · Ort · Tags in EINER Zeile ── */
#events-container.list-view .card-grid{display:flex;flex-direction:column;gap:8px}
.nt-scroll.list-view{display:flex;flex-direction:column;gap:8px;grid-auto-flow:row;overflow:visible;padding:2px}
.nt-scroll.list-view~.hl-edge{display:none}
.list-view .event-card{flex-direction:row;align-items:stretch;width:auto;min-height:clamp(56px,9vw,66px)}
/* Reihenfolge in der Zeile: Bild → Titel → Datum (Text) → Ort → Tags → Merken. KEIN Datums-Badge. */
.list-view .card-visual{flex:0 0 clamp(66px,13vw,92px);height:auto;overflow:hidden}
.list-view .card-visual::after{border-radius:var(--radius) 0 0 var(--radius)}
.list-view .card-datebadge,.list-view .card-soldout,.list-view .card-new-badge{display:none}
.list-view .card-img{border-radius:0}
.list-view .card-body{display:grid;align-items:center;column-gap:14px;row-gap:2px;padding:5px 14px;min-width:0;flex:1;
  grid-template-columns:minmax(0,1.6fr) minmax(0,.9fr) minmax(0,1fr) minmax(0,1.3fr) auto;grid-template-areas:"title date ort tags fav"}
.list-view .card-content{display:contents}
.list-view .card-footer{display:contents}
.list-view .card-title{grid-area:title;margin:0;min-width:0;font-size:14px;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-view .card-when{display:flex;grid-area:date;justify-content:center;gap:0;min-width:0}
.list-view .card-listdate{display:block;min-width:0;font-size:12px;font-weight:600;color:var(--text-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-view .card-time{font-size:11px;font-weight:500;color:var(--text-dim)}
.list-view .card-location{grid-area:ort;align-items:center;padding-top:0;min-width:0;font-size:12px;overflow:hidden}
.list-view .card-location .loc-pin{margin-top:0}
.list-view .card-location span{display:block;flex:1;min-width:0;-webkit-line-clamp:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-view .card-tags{grid-area:tags;margin-top:0;min-width:0;flex-wrap:nowrap;overflow:hidden}
.list-view .fav-btn{grid-area:fav;margin-left:auto}
@media(max-width:620px){
  .list-view .card-body{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title fav" "date date" "ort ort" "tags tags";column-gap:10px;row-gap:3px;padding:6px 10px}
}
/* Detail-Seite (Vollbild) */
.detail-page{position:fixed;inset:0;z-index:100;background:var(--bg);overflow-y:auto;transform:translateX(100%);transition:transform .28s cubic-bezier(.32,.72,0,1);will-change:transform}
.detail-page.open{transform:translateX(0)}
.dp-hero{position:relative;height:min(52vw,420px);overflow:hidden;flex-shrink:0}
.dp-hero-blur{position:absolute;inset:-24px;background-size:cover;background-position:center;filter:blur(22px) brightness(.9) saturate(1.2);z-index:0}
.dp-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;display:block;z-index:1}
/* Bild NICHT künstlich abdunkeln – nur ein dezenter Verlauf oben für Zurück-Button/Badge */
.dp-hero-grad{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,.32) 0%,rgba(0,0,0,.10) 14%,rgba(0,0,0,0) 30%)}
.dp-hero-bg{position:absolute;inset:0}
.dp-back{position:absolute;top:16px;left:16px;z-index:5;display:inline-flex;align-items:center;gap:7px;background:rgba(0,0,0,.38);backdrop-filter:blur(8px);border:none;border-radius:20px;padding:7px 14px;font-size:13px;font-weight:600;color:#fff;cursor:pointer;transition:background .15s}
.dp-back:hover{background:rgba(0,0,0,.6)}
.dp-cat-badge{position:absolute;bottom:20px;left:20px;z-index:5;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:rgba(0,0,0,.42);backdrop-filter:blur(6px);color:rgba(255,255,255,.95);padding:4px 10px;border-radius:6px}
/* Buchungsstatus „Ausgebucht" – Hero-Badge (oben links), Sammelhinweis und Markierung je Termin */
.dp-soldout-badge{position:absolute;top:16px;left:16px;z-index:5;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:#b42318;color:#fff;padding:5px 11px;border-radius:6px;box-shadow:0 2px 10px rgba(0,0,0,.28)}
.dp-soldout-note{margin:14px 0;padding:10px 14px;background:rgba(180,35,24,.08);border:1px solid rgba(180,35,24,.28);border-radius:10px;color:#b42318;font-weight:600;font-size:14px}
.dp-soldout{color:#b42318;font-weight:700}
.dp-content{max-width:680px;margin:0 auto;padding:44px 28px 80px}
.dp-title{font-size:clamp(26px,4.8vw,42px);font-weight:800;line-height:1.1;color:var(--text);margin-bottom:20px;text-wrap:balance;letter-spacing:-.025em}
.dp-meta{margin-bottom:26px;display:flex;flex-direction:column;gap:9px}
.dp-meta-date{font-size:17px;font-weight:600;color:var(--text);letter-spacing:-.01em;display:flex;align-items:baseline;gap:9px}
.dp-meta-loc{font-size:15px;color:var(--text-sub);font-weight:500;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.dp-ic{flex-shrink:0;font-size:15px;line-height:1;position:relative;top:1px}
.dp-dates{display:inline-flex;flex-direction:column;gap:4px}
.dp-meta-date{align-items:flex-start}
.dp-loc-street{flex-basis:100%;padding-left:24px;font-size:13px;color:var(--text-dim);font-weight:400}
/* Optionale Zusatzinfos (nur vorhandene) */
.dp-info{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0 0 30px}
.dp-info-item{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:9px 14px;font-size:14px;font-weight:500;color:var(--text)}
.dp-info-ic{font-size:15px;line-height:1}
.dp-info-soldout{color:#b42318;font-weight:600}
.dp-info-avail{color:#1a7f37;font-weight:600}
.dp-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:36px}
.dp-tag{font-size:12px;font-weight:600;padding:4px 12px;border-radius:12px}
.dp-divider{display:none}
.dp-desc-label{display:none}
.dp-desc{font-size:17px;color:var(--text-sub);line-height:1.8;white-space:pre-line;margin-bottom:32px}
.dp-source-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--text);text-decoration:none;border:2px solid var(--border);border-radius:10px;padding:10px 20px;transition:all .15s;margin-top:8px}
.dp-source-link:hover{background:var(--text);color:var(--bg);border-color:var(--text)}
.dp-source-note{margin-top:8px;font-size:12.5px;color:var(--text-dim);font-style:italic}
.dp-source-btns{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px}
.dp-source-btns .dp-source-link{margin-top:0}
.dp-disclaimer{margin-top:26px;padding-top:16px;border-top:1px solid var(--border);font-size:11.5px;line-height:1.55;color:var(--text-dim)}
.highlights{max-width:1180px;margin:14px auto 0;padding:0 22px}
.hl-head{margin-bottom:12px}
.hl-h2{font-size:clamp(17px,2.3vw,21px);font-weight:700;letter-spacing:-.01em;display:inline-block}
.newtoday .hl-head{display:flex;align-items:center;gap:12px}
.newtoday .hl-h2{display:inline-flex;align-items:center;gap:9px}
.nt-dot{width:9px;height:9px;border-radius:50%;background:#1E8C5A;box-shadow:0 0 0 4px rgba(30,140,90,.16);flex:0 0 auto}
.nt-count{font-size:12px;font-weight:700;color:#1E8C5A;background:rgba(30,140,90,.12);border-radius:999px;padding:3px 10px}
.hl-sub{font-size:13.5px;color:var(--text-dim);margin-top:3px}
.hl-slider{position:relative}
.hl-scroll{display:grid;grid-auto-flow:column;grid-auto-columns:var(--card-w);gap:18px;overflow-x:auto;padding:6px 4px 10px;scroll-snap-type:x mandatory;scroll-padding-left:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hl-scroll::-webkit-scrollbar{display:none}
.hl-scroll .hl-card{scroll-snap-align:start;margin:0;width:auto}
.hl-edge{position:absolute;top:6px;right:0;bottom:10px;width:60px;pointer-events:none;z-index:4;background:linear-gradient(to right,transparent,var(--bg) 82%);opacity:1;transition:opacity .2s}
/* „Neu im Familienhopper": auf Desktop genau 3 vollständige Karten (kein angeschnittener 4.) */
@media(min-width:860px){
  .nt-scroll{grid-auto-flow:row;grid-template-columns:repeat(3,var(--card-w));justify-content:start;grid-auto-columns:unset;overflow:visible}
  .newtoday .hl-edge{display:none}
}
.nt-scroll.nt-collapsed .event-card:nth-child(n+4){display:none}   /* eingeklappt: nur die ersten 3 neuen Events */
.nt-scroll.nt-collapsed~.hl-edge{display:none}
.nt-more{text-align:center;margin-top:2px}
.dp-disclaimer{font-size:12px;color:var(--text-dim);margin-top:24px;line-height:1.6;padding-top:16px;border-top:1px solid var(--border)}
/* Quick actions */
.quick-actions{display:flex;gap:8px;flex-wrap:wrap;padding:16px 22px;max-width:1180px;margin:0 auto;border-bottom:1px solid var(--border)}
.qa-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:20px;font-size:13px;font-weight:600;border:1.5px solid var(--border);background:var(--surface);color:var(--text-sub);cursor:pointer;white-space:nowrap;transition:all .15s}
.qa-btn:hover{background:var(--text);color:var(--bg);border-color:var(--text)}
/* Count bar */
.count-bar{display:flex;justify-content:flex-end;margin:0}
.count-bar .reset-btn{font-size:12px;color:var(--text-dim);background:none;border:1.5px solid var(--border);border-radius:8px;padding:4px 10px;cursor:pointer;display:none;transition:all .15s}
.count-bar .reset-btn:hover{color:var(--text);border-color:var(--text)}
.count-bar .reset-btn.visible{display:inline-block;margin-bottom:18px}
footer{border-top:1px solid var(--border);padding:28px 22px;text-align:center;font-size:12px;color:var(--text-dim);line-height:2;max-width:1180px;margin:0 auto}
footer a{color:var(--primary);text-decoration:underline;font-weight:600}
footer .ft-brand{color:var(--text);font-weight:700;font-size:13px}
footer .ft-note{color:var(--text-dim)}
.event-card[data-hidden="true"]{display:none}
.event-card[data-cap="true"]{display:none}
.month-section[data-hidden="true"],.date-section[data-hidden="true"]{display:none}
#pager{max-width:1180px;margin:4px auto 10px;padding:0 22px;text-align:center}
#result-count{font-size:12.5px;color:var(--text-sub);margin:0 0 12px}
.load-more{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--primary);color:var(--primary-ink);border:1px solid var(--primary);border-radius:999px;padding:6px 16px;font:inherit;font-size:13px;font-weight:600;line-height:1.2;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.load-more:hover{filter:brightness(1.06)}
/* ── Statische Event-Detailseite (eigenständige Seite, nutzt dieselbe app.css) ── */
.ed-topbar{position:sticky;top:0;z-index:10;background:var(--nav-bg);border-bottom:1px solid var(--nav-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ed-topbar-inner{max-width:680px;margin:0 auto;padding:12px 20px}
.ed-back{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--text);text-decoration:none}
.ed-back:hover{text-decoration:underline}
.ed-page .dp-hero{border-radius:0}
.ed-desc{white-space:normal}
.ed-desc p{margin:0 0 12px}
.ed-desc p:last-child{margin-bottom:0}
.dp-datelist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.dp-datelist li{padding-left:24px}
.ed-back-bottom{margin-top:30px;display:inline-flex}
.dp-timehint{font-size:13px;color:var(--text-sub);background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 14px;margin:0 0 16px}
:root{
  --illo-Familie:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 160'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23C84B2A'/><stop offset='1' stop-color='%23E8712A'/></linearGradient></defs><rect width='300' height='160' fill='url(%23g)'/><circle cx='234' cy='38' r='26' fill='rgba(255,255,255,.12)'/><path d='M0 130 Q75 104 152 118 Q225 132 300 108 L300 160 L0 160Z' fill='rgba(255,255,255,.10)'/><circle cx='122' cy='62' r='12' fill='rgba(255,255,255,.88)'/><path d='M109 76 L109 110 Q109 114 113 114 L131 114 Q135 114 135 110 L135 76Z' fill='rgba(255,255,255,.88)'/><circle cx='156' cy='66' r='11' fill='rgba(255,255,255,.88)'/><path d='M144 78 L144 110 Q144 114 148 114 L164 114 Q168 114 168 110 L168 78Z' fill='rgba(255,255,255,.88)'/><circle cx='174' cy='79' r='8' fill='rgba(255,255,255,.88)'/><path d='M165 88 L165 112 Q165 116 169 116 L179 116 Q183 116 183 112 L183 88Z' fill='rgba(255,255,255,.88)'/></svg>");
  --illo-Musik:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 160'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%235B2D9E'/><stop offset='1' stop-color='%239B5DE5'/></linearGradient></defs><rect width='300' height='160' fill='url(%23g)'/><line x1='40' y1='60' x2='260' y2='60' stroke='rgba(255,255,255,.18)' stroke-width='1.5'/><line x1='40' y1='74' x2='260' y2='74' stroke='rgba(255,255,255,.18)' stroke-width='1.5'/><line x1='40' y1='88' x2='260' y2='88' stroke='rgba(255,255,255,.18)' stroke-width='1.5'/><line x1='40' y1='102' x2='260' y2='102' stroke='rgba(255,255,255,.18)' stroke-width='1.5'/><line x1='40' y1='116' x2='260' y2='116' stroke='rgba(255,255,255,.18)' stroke-width='1.5'/><circle cx='92' cy='118' r='11' fill='rgba(255,255,255,.88)'/><line x1='103' y1='115' x2='103' y2='58' stroke='rgba(255,255,255,.88)' stroke-width='3'/><circle cx='152' cy='104' r='11' fill='rgba(255,255,255,.72)'/><line x1='163' y1='101' x2='163' y2='44' stroke='rgba(255,255,255,.72)' stroke-width='3'/><circle cx='212' cy='90' r='11' fill='rgba(255,255,255,.88)'/><line x1='223' y1='87' x2='223' y2='30' stroke='rgba(255,255,255,.88)' stroke-width='3'/></svg>");
  --illo-Theater:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 160'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%238C1A30'/><stop offset='1' stop-color='%23C94060'/></linearGradient></defs><rect width='300' height='160' fill='url(%23g)'/><ellipse cx='118' cy='76' rx='42' ry='36' fill='none' stroke='rgba(255,255,255,.78)' stroke-width='2.5'/><circle cx='105' cy='70' r='4.5' fill='rgba(255,255,255,.78)'/><circle cx='131' cy='70' r='4.5' fill='rgba(255,255,255,.78)'/><path d='M104 86 Q118 98 132 86' fill='none' stroke='rgba(255,255,255,.78)' stroke-width='2.5' stroke-linecap='round'/><ellipse cx='182' cy='88' rx='42' ry='36' fill='none' stroke='rgba(255,255,255,.50)' stroke-width='2.5'/><circle cx='169' cy='82' r='4.5' fill='rgba(255,255,255,.50)'/><circle cx='195' cy='82' r='4.5' fill='rgba(255,255,255,.50)'/><path d='M168 98 Q182 86 196 98' fill='none' stroke='rgba(255,255,255,.50)' stroke-width='2.5' stroke-linecap='round'/></svg>");
  --illo-Outdoor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 160'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%231A6E3C'/><stop offset='1' stop-color='%233DB870'/></linearGradient></defs><rect width='300' height='160' fill='url(%23g)'/><circle cx='62' cy='36' r='24' fill='rgba(255,255,255,.18)'/><path d='M-20 160 L90 42 L200 160Z' fill='rgba(255,255,255,.10)'/><path d='M80 160 L200 25 L320 160Z' fill='rgba(255,255,255,.16)'/><path d='M170 160 L248 62 L326 160Z' fill='rgba(255,255,255,.10)'/><rect x='0' y='142' width='300' height='18' fill='rgba(255,255,255,.12)'/><polygon points='56,124 66,88 76,124' fill='rgba(255,255,255,.70)'/><polygon points='50,130 66,100 82,130' fill='rgba(255,255,255,.70)'/><rect x='63' y='130' width='6' height='14' fill='rgba(255,255,255,.70)'/></svg>");
  --illo-Museum:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 160'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%238C5A00'/><stop offset='1' stop-color='%23D4932A'/></linearGradient></defs><rect width='300' height='160' fill='url(%23g)'/><polygon points='65,52 150,12 235,52' fill='rgba(255,255,255,.78)'/><rect x='78' y='52' width='13' height='76' fill='rgba(255,255,255,.78)'/><rect x='112' y='52' width='13' height='76' fill='rgba(255,255,255,.78)'/><rect x='146' y='52' width='13' height='76' fill='rgba(255,255,255,.78)'/><rect x='180' y='52' width='13' height='76' fill='rgba(255,255,255,.78)'/><rect x='209' y='52' width='13' height='76' fill='rgba(255,255,255,.78)'/><rect x='62' y='126' width='176' height='12' fill='rgba(255,255,255,.78)'/><rect x='52' y='136' width='196' height='10' fill='rgba(255,255,255,.58)'/></svg>");
  --illo-Party:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 160'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23A01878'/><stop offset='1' stop-color='%23E040B0'/></linearGradient></defs><rect width='300' height='160' fill='url(%23g)'/><circle cx='96' cy='52' r='28' fill='rgba(255,255,255,.72)'/><path d='M96 80 Q93 94 90 108' fill='none' stroke='rgba(255,255,255,.72)' stroke-width='1.8'/><circle cx='152' cy='41' r='30' fill='rgba(255,255,255,.52)'/><path d='M152 71 Q149 85 146 102' fill='none' stroke='rgba(255,255,255,.52)' stroke-width='1.8'/><circle cx='208' cy='56' r='26' fill='rgba(255,255,255,.68)'/><path d='M208 82 Q205 96 202 110' fill='none' stroke='rgba(255,255,255,.68)' stroke-width='1.8'/><circle cx='48' cy='104' r='3.5' fill='rgba(255,255,255,.65)'/><circle cx='76' cy='132' r='3' fill='rgba(255,255,255,.55)'/><circle cx='178' cy='118' r='3.5' fill='rgba(255,255,255,.60)'/><circle cx='242' cy='96' r='3' fill='rgba(255,255,255,.55)'/><circle cx='262' cy='128' r='3.5' fill='rgba(255,255,255,.65)'/><rect x='128' y='118' width='6' height='6' transform='rotate(30 131 121)' fill='rgba(255,255,255,.60)'/><rect x='222' y='108' width='6' height='6' transform='rotate(-20 225 111)' fill='rgba(255,255,255,.55)'/></svg>");
  --illo-Markt:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 160'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23006868'/><stop offset='1' stop-color='%2300B4B4'/></linearGradient></defs><rect width='300' height='160' fill='url(%23g)'/><rect x='0' y='134' width='300' height='26' fill='rgba(255,255,255,.10)'/><path d='M14 74 L80 52 L146 74Z' fill='rgba(255,255,255,.76)'/><rect x='14' y='74' width='132' height='62' fill='rgba(255,255,255,.18)'/><line x1='80' y1='52' x2='80' y2='136' stroke='rgba(255,255,255,.40)' stroke-width='2'/><path d='M154 74 L220 52 L286 74Z' fill='rgba(255,255,255,.70)'/><rect x='154' y='74' width='132' height='62' fill='rgba(255,255,255,.15)'/><line x1='220' y1='52' x2='220' y2='136' stroke='rgba(255,255,255,.35)' stroke-width='2'/><circle cx='48' cy='96' r='5.5' fill='rgba(255,255,255,.58)'/><circle cx='80' cy='99' r='4.5' fill='rgba(255,255,255,.52)'/><circle cx='112' cy='96' r='5.5' fill='rgba(255,255,255,.58)'/><circle cx='188' cy='96' r='5.5' fill='rgba(255,255,255,.52)'/><circle cx='220' cy='99' r='4.5' fill='rgba(255,255,255,.48)'/><circle cx='252' cy='96' r='5.5' fill='rgba(255,255,255,.52)'/></svg>");
  --illo-Vortrag:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 160'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%231E3A5A'/><stop offset='1' stop-color='%233A6898'/></linearGradient></defs><rect width='300' height='160' fill='url(%23g)'/><rect x='0' y='134' width='300' height='26' fill='rgba(255,255,255,.10)'/><polygon points='116,62 184,62 194,134 106,134' fill='rgba(255,255,255,.68)'/><rect x='114' y='57' width='72' height='7' fill='rgba(255,255,255,.78)'/><circle cx='150' cy='42' r='11' fill='rgba(255,255,255,.88)'/><path d='M138 55 Q138 64 150 64 Q162 64 162 55Z' fill='rgba(255,255,255,.88)'/><circle cx='44' cy='115' r='7' fill='rgba(255,255,255,.42)'/><circle cx='68' cy='115' r='7' fill='rgba(255,255,255,.38)'/><circle cx='92' cy='115' r='7' fill='rgba(255,255,255,.42)'/><circle cx='208' cy='115' r='7' fill='rgba(255,255,255,.38)'/><circle cx='232' cy='115' r='7' fill='rgba(255,255,255,.42)'/><circle cx='256' cy='115' r='7' fill='rgba(255,255,255,.38)'/></svg>");
  --illo-Treffen:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 160'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%236A4232'/><stop offset='1' stop-color='%23A8704A'/></linearGradient></defs><rect width='300' height='160' fill='url(%23g)'/><ellipse cx='150' cy='96' rx='58' ry='32' fill='rgba(255,255,255,.55)'/><ellipse cx='150' cy='96' rx='44' ry='22' fill='rgba(255,255,255,.20)'/><circle cx='150' cy='52' r='11' fill='rgba(255,255,255,.88)'/><circle cx='150' cy='144' r='11' fill='rgba(255,255,255,.88)'/><circle cx='82' cy='96' r='11' fill='rgba(255,255,255,.88)'/><circle cx='218' cy='96' r='11' fill='rgba(255,255,255,.88)'/><circle cx='101' cy='62' r='9' fill='rgba(255,255,255,.70)'/><circle cx='199' cy='62' r='9' fill='rgba(255,255,255,.70)'/><circle cx='140' cy='94' r='4' fill='rgba(255,255,255,.55)'/><circle cx='162' cy='99' r='4' fill='rgba(255,255,255,.55)'/></svg>");
  --illo-Sonstiges:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 160'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%233A3A3A'/><stop offset='1' stop-color='%236A6A6A'/></linearGradient></defs><rect width='300' height='160' fill='url(%23g)'/><circle cx='50' cy='40' r='4' fill='rgba(255,255,255,.22)'/><circle cx='110' cy='40' r='4' fill='rgba(255,255,255,.15)'/><circle cx='170' cy='40' r='4' fill='rgba(255,255,255,.22)'/><circle cx='230' cy='40' r='4' fill='rgba(255,255,255,.15)'/><circle cx='50' cy='80' r='4' fill='rgba(255,255,255,.15)'/><circle cx='110' cy='80' r='4' fill='rgba(255,255,255,.22)'/><circle cx='170' cy='80' r='4' fill='rgba(255,255,255,.15)'/><circle cx='230' cy='80' r='4' fill='rgba(255,255,255,.22)'/><circle cx='50' cy='120' r='4' fill='rgba(255,255,255,.22)'/><circle cx='110' cy='120' r='4' fill='rgba(255,255,255,.15)'/><circle cx='170' cy='120' r='4' fill='rgba(255,255,255,.22)'/><circle cx='230' cy='120' r='4' fill='rgba(255,255,255,.15)'/></svg>");
}
.event-card[data-cat="Familie"] .card-visual,#dp-hero[data-cat="Familie"]{background-image:var(--illo-Familie);background-size:cover;background-position:center}
.event-card[data-cat="Musik"] .card-visual,#dp-hero[data-cat="Musik"]{background-image:var(--illo-Musik);background-size:cover;background-position:center}
.event-card[data-cat="Theater"] .card-visual,#dp-hero[data-cat="Theater"]{background-image:var(--illo-Theater);background-size:cover;background-position:center}
.event-card[data-cat="Outdoor"] .card-visual,#dp-hero[data-cat="Outdoor"]{background-image:var(--illo-Outdoor);background-size:cover;background-position:center}
.event-card[data-cat="Museum"] .card-visual,#dp-hero[data-cat="Museum"]{background-image:var(--illo-Museum);background-size:cover;background-position:center}
.event-card[data-cat="Party"] .card-visual,#dp-hero[data-cat="Party"]{background-image:var(--illo-Party);background-size:cover;background-position:center}
.event-card[data-cat="Markt"] .card-visual,#dp-hero[data-cat="Markt"]{background-image:var(--illo-Markt);background-size:cover;background-position:center}
.event-card[data-cat="Vortrag"] .card-visual,#dp-hero[data-cat="Vortrag"]{background-image:var(--illo-Vortrag);background-size:cover;background-position:center}
.event-card[data-cat="Treffen"] .card-visual,#dp-hero[data-cat="Treffen"]{background-image:var(--illo-Treffen);background-size:cover;background-position:center}
.event-card[data-cat="Sonstiges"] .card-visual,#dp-hero[data-cat="Sonstiges"]{background-image:var(--illo-Sonstiges);background-size:cover;background-position:center}

/* ── Stadtseiten (statische Landingpages) ── */
.city-meta{font-size:14px;color:var(--text-sub);margin:10px 0 0;font-weight:500}
.city-meta .city-dot{opacity:.5;margin:0 8px}
.city-empty{max-width:750px;margin:8px auto 0;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px 24px;color:var(--text-sub);line-height:1.6}
.city-empty a{color:var(--primary);font-weight:600}
.city-nav{max-width:1180px;margin:26px auto 0;padding:22px 22px 0;border-top:1px solid var(--border)}
.city-nav h2{font-size:16px;font-weight:800;color:var(--text);margin:0 0 12px}
.city-nav-links{display:flex;flex-wrap:wrap;gap:9px}
.city-nav-links a{display:inline-block;padding:7px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--border);color:var(--text);text-decoration:none;font-size:14px;font-weight:600;transition:border-color .15s,color .15s}
.city-nav-links a:hover{border-color:var(--primary);color:var(--primary)}
.city-nav-links a.city-nav-all{background:var(--primary);color:#fff;border-color:var(--primary)}
.city-events{max-width:1180px;margin:0 auto;padding:6px 22px 0}