/* Selbst gehostet (SIL Open Font License 1.1), keine Verbindung zu Google. */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500 800;font-display:swap;src:url(fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500 800;font-display:swap;src:url(fonts/bricolage-grotesque-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/figtree-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/figtree-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Layout: "Tagesfahrplan" – ein grüner Radar-Kopf, darunter Termine wie eine Abfahrtstafel: Uhrzeit links, Titel, Ort, Art. */
:root{
  --paper:#f2f5ef; --surface:#ffffff; --ink:#123e30; --muted:#566a5e; --line:#d9e2d6;
  --leaf:#68bc78; --leaf-ink:#2f7a43; --mint:#dcefe0; --band:#123e30; --band-ink:#f2f5ef; --amber:#d9902a;
  --display:"Bricolage Grotesque",ui-rounded,"Segoe UI",system-ui,sans-serif;
  --body:Figtree,system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:14px; --max:1120px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0e1c16; --surface:#14261d; --ink:#e4efe6; --muted:#9bb2a3; --line:#25402f;
  --leaf:#7fcf8e; --leaf-ink:#8fd99d; --mint:#1c3628; --band:#0a2a1e; --band-ink:#e4efe6; --amber:#f0b45a; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0e1c16; --surface:#14261d; --ink:#e4efe6; --muted:#9bb2a3; --line:#25402f;
  --leaf:#7fcf8e; --leaf-ink:#8fd99d; --mint:#1c3628; --band:#0a2a1e; --band-ink:#e4efe6; --amber:#f0b45a; color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--body)}
a{color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;letter-spacing:-.02em}
.inner{max-width:var(--max);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media(min-width:720px){.inner{padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}}

.preview-band{background:var(--amber);color:#1d1503;font-size:13px;font-weight:600}
.preview-band .inner{padding-block:6px}

/* Kopf */
.site-head{position:relative;z-index:30;background:var(--band);color:var(--band-ink)}
.site-head .inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px}
.brand{display:block;line-height:0}
.logo{width:150px;height:auto;color:var(--band-ink)}
.logo .logo-e{fill:var(--leaf)}
.city-switch{position:relative}
.city-switch summary{list-style:none;cursor:pointer;font-weight:600;font-size:15px;padding:8px 14px;border:1px solid color-mix(in srgb,var(--band-ink) 35%,transparent);border-radius:99px}
.city-switch summary::-webkit-details-marker{display:none}
.city-switch summary::after{content:" ▾"}
.city-switch ul{position:absolute;right:0;top:calc(100% + 8px);z-index:20;margin:0;padding:8px;list-style:none;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 12px 32px rgb(0 0 0 / .18);min-width:200px;columns:2;column-gap:4px}
.city-switch li a{display:block;padding:7px 10px;border-radius:8px;text-decoration:none;font-weight:500;font-size:15px}
.city-switch li a:hover{background:var(--mint)}
.city-switch ul{max-height:70vh;overflow:auto}
.city-switch li.all{column-span:all;border-top:1px solid var(--line);margin-top:4px;padding-top:4px}
.city-switch li.all a{font-weight:600}

/* Startseite */
.hero{background:var(--band);color:var(--band-ink);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr;gap:24px;padding-block:28px 44px;align-items:center}
@media(min-width:820px){.hero-grid{grid-template-columns:1.4fr 1fr;padding-block:48px 72px}}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:700;color:var(--leaf);margin:0 0 14px}
.hero h1{font-size:clamp(44px,8vw,92px);line-height:.95;font-weight:800;letter-spacing:-.035em}
.hero .hl{color:var(--leaf);display:inline-block}
.lead{font-size:clamp(17px,2vw,20px);max-width:36em;margin:22px 0 0;opacity:.9}
.radar{position:relative;width:min(100%,340px);aspect-ratio:1;justify-self:center;border-radius:50%;
  background:repeating-radial-gradient(circle,transparent 0 23%,color-mix(in srgb,var(--leaf) 45%,transparent) 23% calc(23% + 2px)),color-mix(in srgb,var(--leaf) 10%,transparent);
  border:3px solid color-mix(in srgb,var(--band-ink) 85%,transparent)}
.radar .sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,color-mix(in srgb,var(--leaf) 55%,transparent),transparent 18%);animation:sweep 6s linear infinite}
.radar .pin{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--band-ink);box-shadow:0 0 0 6px color-mix(in srgb,var(--band-ink) 25%,transparent)}
.radar .blip{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--leaf);box-shadow:0 0 12px var(--leaf)}
.b1{left:28%;top:24%}.b2{left:70%;top:31%}.b3{left:62%;top:70%}.b4{left:22%;top:62%}.b5{left:44%;top:14%}.b6{left:80%;top:56%}.b7{left:36%;top:80%}
@keyframes sweep{to{transform:rotate(1turn)}}
@media(max-width:819px){.radar{width:180px;justify-self:start;order:-1}}

.block{padding-block:40px 8px}
.block-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin-bottom:16px}
.block-head h2{font-size:clamp(26px,3.4vw,34px);font-weight:700}
.block-head p{margin:0;color:var(--muted);font-size:15px}
.city-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.city-card{display:flex;flex-direction:column;gap:6px;height:100%;padding:18px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);text-decoration:none;transition:border-color .15s,transform .15s}
.city-card:hover{border-color:var(--leaf);transform:translateY(-2px)}
.city-name{font-family:var(--display);font-size:26px;font-weight:700;letter-spacing:-.02em}
.city-nums{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:15px;color:var(--muted)}
.city-nums b{color:var(--ink);font-variant-numeric:tabular-nums;font-size:17px}
.city-cats{font-size:13px;color:var(--muted)}
.app-teaser{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-block:40px;padding-block:28px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.app-teaser p{margin:6px 0 0;color:var(--muted);max-width:34em}

/* Stadtseite */
.city-hero{background:var(--band);color:var(--band-ink)}
.city-hero .inner{padding-block:22px 0}
.crumbs{margin:0 0 10px;font-size:14px;opacity:.8}
.crumbs a{text-decoration:none;border-bottom:1px solid currentColor}
.city-hero h1{font-size:clamp(34px,6vw,64px);line-height:1;font-weight:800;letter-spacing:-.03em}
.views{display:flex;gap:4px;margin-top:22px;overflow-x:auto;scrollbar-width:none}
.views a{flex:none;padding:10px 16px 12px;border-radius:12px 12px 0 0;text-decoration:none;font-weight:600;font-size:15px;color:var(--band-ink);opacity:.85}
.views a[aria-current]{background:var(--paper);color:var(--ink);opacity:1}
.views .n,.chip .n{font-variant-numeric:tabular-nums;font-weight:500;opacity:.65;margin-left:2px}
.list-layout{padding-block:20px 40px}
.cat-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.chip{font:600 14px/1 var(--body);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:9px 13px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.day{margin-top:12px}
.day-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;display:flex;align-items:baseline;justify-content:space-between;gap:12px;background:var(--paper);padding:14px 0 10px;border-bottom:2px solid var(--ink);font-size:clamp(20px,2.6vw,26px);font-weight:700}
.day-head small{font:500 14px var(--body);color:var(--muted);letter-spacing:0}
.running .day-head{border-bottom-color:var(--leaf)}
@media(max-width:560px){.running .day-head small{display:none}}
.ev-list{list-style:none;margin:0;padding:0}
[hidden]{display:none!important}
.ev{display:grid;grid-template-columns:4.6em minmax(0,1fr) auto;gap:4px 16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
.ev-time{font-family:var(--display);font-weight:700;font-size:20px;font-variant-numeric:tabular-nums;line-height:1.2;display:flex;flex-direction:column}
.ev-time .none{font:600 12px/1.25 var(--body);color:var(--muted);padding-top:4px;hyphens:manual}
.ev-day{font:600 13px var(--body);color:var(--muted)}
.ev-title{font-weight:650;font-size:18px;line-height:1.3;text-decoration:none;overflow-wrap:anywhere}
a.ev-title:hover{text-decoration:underline;text-decoration-color:var(--leaf);text-decoration-thickness:2px;text-underline-offset:3px}
.ext{color:var(--muted);font-size:.85em}
.ev-meta{margin:3px 0 0;color:var(--muted);font-size:15px;display:flex;flex-wrap:wrap;gap:0 14px}
.tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--leaf-ink);background:var(--mint);padding:4px 9px;border-radius:6px;white-space:nowrap}
@media(max-width:560px){.ev{grid-template-columns:3.6em minmax(0,1fr)}.ev .tag{grid-column:2;justify-self:start}.ev-time{font-size:17px}.ev-title{font-size:17px}}
.empty{padding:32px 0}.empty p{color:var(--muted)}
.filter-empty{color:var(--muted);padding:20px 0}
.cat-index{margin-top:40px;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:15px}
.cat-index h2{width:100%;font-size:20px}

/* Terminseite */
.event{background:var(--band);color:var(--band-ink);padding-block:22px 40px}
.event-grid{display:grid;gap:24px;margin-top:8px}
@media(min-width:860px){.event-grid{grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);align-items:start}}
.event h1{font-size:clamp(32px,5vw,56px);line-height:1.02;font-weight:800;margin:14px 0 0;overflow-wrap:anywhere}
.event-desc{font-size:18px;max-width:38em;margin:18px 0 0}
.event-hint{font-size:14px;opacity:.75;margin:14px 0 0}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.btn{display:inline-flex;align-items:center;font-weight:700;font-size:15px;text-decoration:none;padding:12px 18px;border-radius:99px;background:var(--leaf);color:#0b2419;border:2px solid var(--leaf)}
.btn.ghost{background:transparent;color:inherit;border-color:color-mix(in srgb,currentColor 40%,transparent)}
.app-teaser .btn{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.facts{background:var(--surface);color:var(--ink);border-radius:var(--r);padding:8px 20px 16px;display:flex;flex-direction:column}
.fact{display:grid;grid-template-columns:4.5em minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.fact:last-child{border-bottom:0}
.fact .k{font-size:12px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--muted);padding-top:3px}
.fact .v{font-weight:600}
.addr,.small{font-weight:400;color:var(--muted);font-size:15px}
.route{display:inline-block;margin:10px 0 4px;font-weight:600;font-size:15px;color:var(--leaf-ink)}

/* Fuß */
.site-foot{margin-top:48px;background:var(--band);color:var(--band-ink)}
.site-foot .inner{display:grid;gap:22px;padding-block:36px}
.logo.small{width:120px}
.foot-brand p{max-width:30em;opacity:.8;font-size:15px;margin:10px 0 0}
.foot-cities,.foot-legal{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:15px}
.foot-cities a,.foot-legal a{text-decoration:none;opacity:.9}
.foot-cities a:hover,.foot-legal a:hover{text-decoration:underline}
.foot-note{font-size:13px;opacity:.65;margin:0}
@media(prefers-reduced-motion:reduce){.radar .sweep{animation:none}.city-card{transition:none}}
.legal{max-width:46em;padding-block:28px 8px}
.legal h2{font-size:22px;margin:28px 0 8px}
.legal p{margin:0 0 12px}
.legal a{color:var(--leaf-ink)}
.tag.alert{background:var(--amber);color:#1d1503}
.notice{display:inline-block;margin:14px 0 0;padding:8px 12px;border-radius:8px;background:var(--amber);color:#1d1503;font-weight:700}

/* Suche */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.site-search{flex:1;max-width:340px;display:flex;align-items:center;margin-left:auto;border:1.5px solid color-mix(in srgb,var(--band-ink) 35%,transparent);border-radius:99px;padding:0 4px 0 14px}
.site-search input{flex:1;min-width:0;background:transparent;border:0;color:inherit;font:500 15px var(--body);padding:9px 0;outline:none}
.site-search input::placeholder{color:color-mix(in srgb,var(--band-ink) 65%,transparent)}
.site-search:focus-within{border-color:var(--leaf)}
.site-search button{background:transparent;border:0;color:inherit;padding:6px 8px;cursor:pointer;line-height:0}
.search-big{display:flex;gap:10px;flex-wrap:wrap;padding-block:6px 24px}
.search-big input{flex:1 1 240px;min-width:0;font:500 18px var(--body);padding:12px 18px;border-radius:99px;border:2px solid var(--leaf);background:var(--paper);color:var(--ink)}
.search-status{color:var(--muted);margin:18px 0}
.results-group h2{font-size:22px;margin:18px 0 4px}.results-group .n{color:var(--muted);font-weight:500}
.results-more{color:var(--muted);margin-top:14px}
@media(max-width:560px){.site-head .inner{flex-wrap:wrap}.site-search{order:3;flex-basis:100%;max-width:none;margin-left:0}}
/* Orte */
.ev.place{grid-template-columns:minmax(0,1fr) auto}
a.tag{text-decoration:none}
.places-more{color:var(--muted);padding:14px 0;border-bottom:1px solid var(--line)}
.places-note{color:var(--muted);font-size:14px;margin-top:28px}
@media(max-width:560px){.ev.place{grid-template-columns:minmax(0,1fr)}.ev.place .tag{grid-column:1}}

/* v8.7: Meine Städte */
.fav{margin:4px 0 14px;font:inherit;font-weight:600;font-size:14px;padding:6px 14px;border-radius:99px;cursor:pointer;background:transparent;color:var(--band-ink);border:1px solid color-mix(in srgb,var(--band-ink) 35%,transparent)}
.fav[aria-pressed="true"]{background:var(--leaf);border-color:var(--leaf);color:#0d2a1f}
.city-grid li{position:relative}
.fav.star{position:absolute;top:10px;right:10px;margin:0;width:40px;height:40px;padding:0;font-size:20px;line-height:1;color:var(--muted);border-color:var(--line);background:var(--surface)}
.fav.star[aria-pressed="true"]{color:#0d2a1f;background:var(--leaf);border-color:var(--leaf)}
.city-grid li.mine .city-card{border-color:var(--leaf)}
.city-grid li .city-name{padding-right:44px}
.city-switch li.mine a{font-weight:700}

/* v8.8: Städteauswahl für viele Städte */
.city-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:20;width:min(330px,calc(100vw - 32px));background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 12px 32px rgb(0 0 0 / .18);overflow:hidden}
.city-panel ul{position:static;border:0;box-shadow:none;border-radius:0;min-width:0;max-height:min(60vh,520px)}
/* v8.18.1: Auf schmalen Handys (oder mit vergrößerter Schrift) rutscht "Stadt wählen" unter das Logo nach links.
   Das rechtsbündige Menü lag dann zur Hälfte links außerhalb des Bildschirms und war nicht bedienbar.
   Unter 560px hängt das Menü deshalb an der ganzen Kopfzeile, direkt unter dem Knopf. */
@media(max-width:560px){.site-head .inner{position:relative}.city-switch{position:static}.city-panel{left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));top:auto;width:auto;margin-top:8px}}
.city-switch summary{touch-action:manipulation;-webkit-user-select:none;user-select:none}
.city-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 10px 6px;border-bottom:1px solid var(--line)}
.city-tools[hidden]{display:none}
.city-tools input{flex:1 1 150px;min-width:0;font:inherit;font-size:16px;padding:8px 12px;border:1px solid var(--line);border-radius:99px;background:var(--paper);color:var(--ink)}
.city-tools .near-status{flex-basis:100%;margin:0;font-size:13px;color:var(--muted)}
.city-tools .near-status:empty{display:none}
.city-switch ul.flat{columns:1}
.city-switch li a small{color:var(--muted);font-weight:400;font-size:13px}
.city-switch li.none{padding:7px 10px;color:var(--muted);font-size:15px}
.near-btn{font:inherit;font-weight:600;font-size:14px;padding:7px 14px;border-radius:99px;cursor:pointer;background:var(--mint);color:var(--ink);border:1px solid var(--line);white-space:nowrap}
.near{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 14px}
.near-status{margin:0;font-size:14px;color:var(--muted)}
.near-status:empty{display:none}
.near-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;flex-basis:100%}
.near-list:empty{display:none}
.near-list li{display:flex;gap:6px;align-items:baseline;padding:7px 12px;border:1px solid var(--line);border-radius:99px;background:var(--surface)}
.near-list a{font-weight:600;text-decoration:none}
.near-list small{color:var(--muted)}
.city-more-head{margin:26px 0 10px;font-size:18px}
.city-more{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.city-more li{position:relative}
.city-more .city-card{flex-direction:row;align-items:baseline;gap:8px;padding:8px 46px 8px 14px;border-radius:99px}
.city-more .city-name{font-size:16px;padding-right:0}
.city-more .city-nums span+span,.city-more .city-cats{display:none}
.city-more .city-nums{font-size:13px}
.city-more .city-nums b{font-size:13px}
.city-more .fav.star{top:50%;transform:translateY(-50%);right:6px;width:32px;height:32px;font-size:16px}
.city-all{margin:18px 0 0}
.city-find{margin:0 0 14px}
.city-find input{width:100%;max-width:420px;font:inherit;font-size:16px;padding:10px 14px;border:1px solid var(--line);border-radius:99px;background:var(--surface);color:var(--ink)}
.views.jump{flex-wrap:wrap}

/* v8.9: Partnerlinks */
.btn small.partner{font-weight:500;font-size:12px;opacity:.75;margin-left:6px}
.partner-note{margin:10px 0 0;font-size:13px;color:var(--muted)}
/* v8.11 Karten */
.ev-meta .karten{font-weight:700;color:var(--leaf-ink)}
.karten-lead{margin:0 0 16px;max-width:60ch}

/* v8.18: Städte nach Bundesland, darin Regionen; im Menü Bundesland-Überschriften */
.sub-head{font:600 15px var(--body);color:var(--muted);margin:20px 0 2px;letter-spacing:.02em}
.city-switch li.grp{column-span:all;break-after:avoid;font:600 12px var(--body);color:var(--muted);text-transform:uppercase;letter-spacing:.08em;padding:12px 12px 4px;pointer-events:none}
/* v8.18: Spaltensatz mit column-span:all in der scrollenden Liste verteilt Städte auf abgeschnittene Zusatzspalten.
   Gruppiert deshalb als Raster: zwei Spalten, Überschriften und "Alle Städte" über die ganze Breite. */
.city-switch ul.grouped{columns:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:4px;align-content:start}
.city-switch ul.grouped li.grp,.city-switch ul.grouped li.all{grid-column:1/-1}