/* Seitenaufbau nach dem Entwurf „Einzelseiten Ort & Event" (Fassung 2).
   Farben und Schriften kommen je Auftritt aus der Verwaltung (Farbschema,
   Schrift) und überschreiben die neutralen Vorgaben hier. */
:root {
  --c-primary-deep: #4c1d95; --c-primary: #6d28d9; --c-primary-light: #8b5cf6;
  --c-background: #ffffff; --c-card: #ffffff; --c-surface: #f4f3f7; --c-border: #e4e2ea; --c-muted: #b9b6c3;
  --c-text-secondary: #6b6975; --c-text: #1c1b22;
  --c-success: #3a9742; --c-warning: #d9a515; --c-error: #d01840;
  --font-body: system-ui, sans-serif; --font-heading: var(--font-body);
  /* Der Knopf-Verlauf bleibt dunkel genug für weiße Schrift. */
  --gradient-button: linear-gradient(135deg, color-mix(in oklab, var(--c-primary-deep) 90%, black) 0%, var(--c-primary-deep) 55%, color-mix(in oklab, var(--c-primary-deep) 72%, var(--c-primary)) 100%);
  --success-text: color-mix(in oklab, var(--c-success) 55%, black);
  --success-tint: color-mix(in srgb, var(--c-success) 15%, var(--c-background));
  --warning-text: color-mix(in oklab, var(--c-warning) 50%, black);
  --warning-tint: color-mix(in srgb, var(--c-warning) 20%, var(--c-background));
  --cat: var(--c-muted);
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-full: 999px;
  --page: 1040px;
  /* Schmale Überschriften über die Breitenachse der variablen Archivo */
  --font-stretch-display: 78%;
  --font-stretch-heading: 80%;
  /* Dunkle Abstufungen der Grundfarbe für das Band der Sonder-Lane */
  --surface-inverse: oklch(18% 0.016 38);
  --surface-inverse-raised: oklch(23% 0.016 38);
  --line-inverse: oklch(32% 0.018 38);
  --text-inverse-muted: oklch(84% 0.018 45);
  --text-subtle: color-mix(in oklab, var(--c-text-secondary) 55%, var(--c-text));
  --focus-ring: 3px solid color-mix(in srgb, var(--c-primary-deep) 45%, transparent);
  --accent-gradient: linear-gradient(90deg, oklch(48% 0.19 25), oklch(55% 0.17 42));
  /* Verlauf über Fotos, damit weiße Schrift lesbar bleibt */
  --photo-shade: linear-gradient(to top, oklch(14% 0.016 38 / .92) 0%, oklch(14% 0.016 38 / .62) 42%, oklch(14% 0.016 38 / 0) 72%);
  /* Für Karten im Format 4:5, deren Text bei langen Namen höher reicht (Kontrast mindestens 4,5:1) */
  --photo-shade-strong: linear-gradient(to top, oklch(14% 0.016 38 / .92) 0%, oklch(14% 0.016 38 / .7) 45%, oklch(14% 0.016 38 / .5) 80%, oklch(14% 0.016 38 / .2) 100%);
  /* Dezente Abdunklung vom unteren Rand (Variante C); lesbar wird der Text vor allem durch --text-shadow-photo */
  --photo-shade-soft: linear-gradient(to top, oklch(14% 0.016 38 / .75), oklch(14% 0.016 38 / .45) 30%, oklch(14% 0.016 38 / 0) 62%);
  --text-shadow-photo: 0 1px 3px rgb(0 0 0 / .6), 0 3px 18px rgb(0 0 0 / .45);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 16px/1.6 var(--font-body); color: var(--c-text); background: var(--c-background); }
a { color: var(--c-primary-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

/* Überschriften nach dem Layout-Update: Display und Abschnitt schmal, Fließtext und Beschriftungen normal breit */
.display-xl { font-size: 3.5rem; line-height: 1; font-weight: 800; font-stretch: var(--font-stretch-display); letter-spacing: -.01em; text-wrap: balance; }
.display-l { font-size: 3rem; line-height: 1; font-weight: 800; font-stretch: var(--font-stretch-display); letter-spacing: -.01em; text-wrap: balance; }
.heading-section { font-size: 1.625rem; line-height: 1.1; font-weight: 800; font-stretch: var(--font-stretch-heading); text-transform: none; letter-spacing: 0; color: var(--c-text); margin-bottom: 14px; }
.heading-day { font-size: 1.75rem; line-height: 1.1; font-weight: 800; font-stretch: var(--font-stretch-heading); }
/* Akzentstrich im Markenverlauf: reine Gestaltung, keine Bedeutung */
.accent-rule::before { content: ""; display: block; width: 28px; height: 4px; border-radius: 2px; background: var(--accent-gradient); margin-bottom: 12px; }
h1, h2, h3 { font-family: var(--font-heading); margin: 0; }
h1 { font-size: 2rem; font-weight: 800; line-height: 1.2; text-wrap: balance; }
h2 { font-size: 1.125rem; font-weight: 700; margin-bottom: 12px; }
h3 { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-secondary); margin-bottom: 10px; }
p { margin: 0 0 12px; }
img { max-width: 100%; height: auto; object-position: center center; } /* Bildausschnitt mittig; nur das Titelbild der Einzelseite lässt oben/unten wählen */
.icon { flex-shrink: 0; }
.meta { color: var(--c-text-secondary); font-size: .875rem; display: block; }

/* Kopfzeile */
.header-band { background: var(--c-card); border-bottom: 1px solid var(--c-border); }
.site-header { max-width: 1240px; margin: 0 auto; padding: 14px 32px; display: flex; align-items: center; gap: 28px; }
.brand { font-weight: 800; font-size: 1.25rem; color: var(--c-text); flex-shrink: 0; }
.brand img { height: 64px; width: auto; display: block; }
.main-nav { display: flex; gap: 22px; font-weight: 600; }
.main-nav a { color: var(--c-text); padding: 6px 2px; }
.main-nav a:hover, .main-nav a[aria-current] { color: var(--c-primary-deep); text-decoration: none; }
.search { flex: 1; max-width: 380px; display: flex; height: 44px; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface); overflow: hidden; }
.search select, .search input { border: 0; background: transparent; font: inherit; color: var(--c-text); min-width: 0; }
.search select { padding: 0 8px 0 12px; font-size: .875rem; font-weight: 600; border-right: 1px solid var(--c-border); }
.search input { flex: 1; padding: 0 12px; font-weight: 600; }
.search input::placeholder { color: var(--c-text-secondary); font-weight: 400; opacity: 1; }
.search button { width: 44px; border: 0; background: var(--c-primary-deep); color: #fff; display: grid; place-items: center; cursor: pointer; }
.langs { margin-left: auto; display: flex; gap: 4px; font-size: .875rem; font-weight: 600; }
.langs a { color: var(--c-text-secondary); padding: 6px 8px; }
.langs a[aria-current] { color: var(--c-primary-deep); }
/* Dunkle Kopfzeile (Farbe oder Verlauf aus dem Auftritt) mit heller Schrift */
.header-band.is-dark { border-bottom-color: transparent; }
.header-band.is-dark .brand, .header-band.is-dark .main-nav a, .header-band.is-dark .main-nav a:hover, .header-band.is-dark .main-nav a[aria-current], .header-band.is-dark .langs a[aria-current] { color: #fff; }
.header-band.is-dark .langs a { color: rgb(255 255 255 / .75); }
.header-band.is-dark .main-nav a[aria-current] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.header-band.is-dark .search { border-color: transparent; background: var(--c-card); }
.header-band.is-dark :focus-visible { outline-color: #fff; }

/* Stadtauswahl in der Kopfzeile (nur bei mehreren Städten) */
.site-header { position: relative; }
.city-menu { position: static; }
.city-chip { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: var(--r-full); border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text); font-weight: 700; cursor: pointer; list-style: none; white-space: nowrap; }
.city-chip::-webkit-details-marker { display: none; }
.city-chip .icon:last-child { transition: transform .15s; }
.city-menu[open] .city-chip .icon:last-child { transform: rotate(180deg); }
.city-chip:hover { border-color: var(--c-text-secondary); }
.header-band.is-dark .city-chip { border-color: rgb(255 255 255 / .35); background: rgb(255 255 255 / .14); color: #fff; }
.city-panel { position: absolute; z-index: 30; top: calc(100% + 6px); left: 32px; width: min(620px, calc(100vw - 32px)); padding: 20px 22px 16px; border-radius: var(--r-lg); border: 1px solid var(--c-border); background: var(--c-card); color: var(--c-text); box-shadow: 0 18px 48px rgb(28 20 18 / .18); }
.city-panel-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px 28px; }
.city-group h2 { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-secondary); margin: 0 0 6px; }
.city-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.city-group li a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 10px; margin: 0 -10px; border-radius: var(--r-sm); color: var(--c-text); font-weight: 700; }
.city-group li a:hover, .city-group li a[aria-current] { background: var(--c-surface); text-decoration: none; }
.city-count { font-size: .8125rem; font-weight: 500; color: var(--c-text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.city-small { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.city-small a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--r-full); border: 1px solid var(--c-border); color: var(--c-text); font-size: .875rem; font-weight: 600; }
.city-small a:hover, .city-small a[aria-current] { border-color: var(--c-text); text-decoration: none; }
.city-all { display: block; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--c-border); font-weight: 700; }

/* Startseite mit Stadtauswahl, Übersichten von Land, Region und Stadt */
.recent-city { display: flex; align-items: center; gap: 12px; padding: 14px 18px; margin-bottom: 28px; border-radius: var(--r-md); background: var(--c-surface); color: var(--c-text); font-size: 1.125rem; }
.recent-city[hidden] { display: none; }
.recent-city:hover { text-decoration: none; background: color-mix(in srgb, var(--c-primary) 10%, var(--c-surface)); }
.recent-city-over { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-secondary); }
.recent-city strong { font-weight: 800; }
.city-choice { display: grid; gap: 24px; margin-top: 8px; }
.city-choice .lane-text p { margin: 2px 0 0; font-size: 1.125rem; line-height: 1.45; color: var(--text-subtle); max-width: 52ch; }
.city-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.city-tiles li { display: flex; }
.city-tile { position: relative; flex: 1; display: flex; align-items: flex-end; aspect-ratio: 4 / 5; max-width: 100%; border-radius: var(--r-lg); overflow: hidden; color: #fff; background: var(--surface-inverse); isolation: isolate; }
.city-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .4s ease; }
.city-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--photo-shade-strong); }
.city-tile.no-image { background: linear-gradient(155deg, color-mix(in oklab, var(--tile, var(--c-primary)) 80%, white) 0%, var(--tile, var(--c-primary)) 45%, color-mix(in oklab, var(--tile, var(--c-primary-deep)) 55%, black) 100%); }
.city-tile.no-image::before { background: linear-gradient(to top, oklch(14% 0.016 38 / .45), oklch(14% 0.016 38 / 0) 55%); }
.city-tile:hover { text-decoration: none; }
.city-tile:hover img { transform: scale(1.04); }
.city-tile-text { display: grid; gap: 4px; padding: 18px; text-shadow: var(--text-shadow-photo); }
.city-tile-over { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.city-tile strong { font-family: var(--font-heading); font-size: 2.25rem; line-height: 1; font-weight: 800; font-stretch: var(--font-stretch-display); text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
.city-tile strong.is-long { font-size: 1.5rem; }
.city-tile-meta { font-size: .9375rem; font-weight: 600; }
.city-more { display: grid; gap: 4px; }
.city-more .heading-section { margin-bottom: 6px; }
.area-head { display: grid; gap: 18px; margin-bottom: 8px; }
.area-head-image { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 6; max-height: 340px; background: var(--c-surface); }
.area-head-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.area-head-image .credit { position: absolute; left: 14px; bottom: 12px; padding: 4px 9px; border-radius: 6px; background: rgb(15 7 5 / .6); color: #fff; }
.area-head-text { display: grid; gap: 8px; }
.area-intro { font-size: 1.125rem; line-height: 1.5; color: var(--text-subtle); max-width: 60ch; margin: 0; }
.lane-row.lane-grid li:nth-child(n+5) { display: flex; }
@media (min-width: 760px) { .highlights.is-three .lane-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card-city { margin-left: auto; font-weight: 700; color: var(--c-text-secondary); }
.cat-line:has(.card-city) { display: flex; gap: 6px; align-items: center; }

/* Inhalt */
main { max-width: var(--page); margin: 0 auto; padding: 20px 24px 64px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: .875rem; font-weight: 500; margin-bottom: 16px; }
.crumbs a { color: var(--c-text-secondary); }
.crumbs span { color: var(--c-muted); }
.crumbs strong { font-weight: 500; }
.hero { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 6; max-height: 320px; width: 100%; background: var(--c-surface); margin-bottom: 16px; }
.hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero img.focus-top { object-position: center top; }
.hero img.focus-bottom { object-position: center bottom; }
.credit { font-size: .75rem; font-weight: 600; }
.hero .credit { position: absolute; left: 14px; bottom: 12px; max-width: calc(100% - 28px); padding: 4px 9px; border-radius: 6px; background: rgb(15 7 5 / .6); color: #fff; }
.credit a { color: inherit; text-decoration: underline; }
.pills, .chips, .filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--r-full); font-size: .875rem; font-weight: 700; line-height: 1.3; }
.pill-category { background: color-mix(in srgb, var(--cat) 16%, var(--c-background)); color: color-mix(in oklab, var(--cat) 48%, black); }
.pill-category .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cat); }
.pill-verified { background: var(--success-tint); color: var(--success-text); }
.pill-recommended { background: var(--c-text); color: var(--c-background); }
.pill-promo { border: 1px dashed var(--c-muted); color: var(--c-text-secondary); padding: 4px 10px; }
.pill-warning { background: var(--warning-tint); color: var(--warning-text); }
.pill-new { background: var(--gradient-button); color: #fff; }
.verdict { color: var(--c-text-secondary); margin: 6px 0 0; }
.quickinfo { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-weight: 500; }
.quickinfo li { display: flex; align-items: center; gap: 7px; }
.quickinfo .icon { color: var(--c-text-secondary); }
.is-open, .quickinfo .is-open .icon { color: var(--success-text); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; padding-bottom: 28px; border-bottom: 1px solid var(--c-border); }
.btn { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border-radius: var(--r-sm); font: 600 1rem var(--font-body); cursor: pointer; border: 1.5px solid transparent; }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--gradient-button); color: #fff; padding-inline: 20px; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:active { filter: brightness(.94); }
.btn-secondary { background: var(--c-card); border-color: var(--c-border); color: var(--c-text); }
.btn-secondary:hover { border-color: var(--c-primary); }
.btn-text { background: transparent; color: var(--c-text-secondary); padding-inline: 12px; }
.btn-text:hover { background: var(--c-surface); color: var(--c-text); }
.btn .icon { margin-right: 8px; flex: none; }
.notice { padding: 12px 16px; border-radius: var(--r-md); background: var(--warning-tint); color: var(--warning-text); font-weight: 600; }
.search-note { color: var(--c-text-secondary); }

.layout { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 32px; margin-top: 28px; align-items: start; }
.main-column > section { margin-bottom: 36px; }
.side-column { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.prose { max-width: 64ch; }
.prose p { line-height: 1.7; text-wrap: pretty; }
.chip { padding: 6px 12px; border-radius: var(--r-full); background: var(--c-surface); font-size: .875rem; font-weight: 600; color: var(--c-text); }
a.chip:hover { color: var(--c-primary-deep); text-decoration: none; }
/* Atmosphäre-Chips mit Link: heller Grund, feiner Rand, Chevron, damit sie als Link erkennbar sind */
.chip-link { display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px 5px 12px; background: var(--c-card); border: 1px solid var(--c-border); }
.chip-link .icon { color: var(--c-primary-deep); flex: none; }
.chip-link:hover { border-color: var(--c-primary); }
.chip.is-active { background: var(--c-text); color: var(--c-background); }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 12px; }
.section-head h2 { margin: 0; }

/* Community-Eindruck */
.votes { border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-card); }
.vote { display: flex; gap: 16px; align-items: center; padding: 14px 16px; }
.vote + .vote { border-top: 1px solid var(--c-border); }
.vote-main { flex: 1; min-width: 0; }
.vote-question { font-weight: 600; }
.vote-result { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.bar { flex: 1; height: 6px; border-radius: 3px; background: var(--c-surface); overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: 3px; background: var(--c-success); }
.vote-percent { font-size: .875rem; font-weight: 600; color: var(--success-text); white-space: nowrap; }
.vote-result .meta { font-size: .75rem; white-space: nowrap; }
.vote-mine { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: .875rem; font-weight: 600; color: var(--success-text); line-height: 1.3; }
.vote-buttons { display: flex; gap: 6px; }
.vote-buttons button { min-width: 60px; height: 44px; border-radius: var(--r-sm); border: 1.5px solid var(--c-border); background: var(--c-card); color: var(--c-text); font: 600 .875rem var(--font-body); cursor: pointer; }
.vote-buttons button:hover { border-color: var(--c-primary); }
.vote-buttons button[aria-pressed="true"] { border-color: var(--c-success); background: var(--success-tint); color: var(--success-text); }

/* Verknüpfte Karten und Reihen */
.linked-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.linked-list { display: grid; gap: 10px; }
.linked { display: flex; gap: 12px; align-items: center; color: var(--c-text); }
.linked-grid .linked { padding: 12px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-card); }
a.linked:hover { text-decoration: none; }
.linked-grid a.linked:hover { box-shadow: 0 4px 10px rgb(56 42 38 / .08); border-color: var(--c-muted); }
.linked-list a.linked:hover strong { color: var(--c-primary-deep); }
.linked-thumb { width: 52px; height: 52px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--cat) 16%, var(--c-background)); }
.linked-list .linked-thumb { width: 36px; height: 36px; border-radius: 8px; }
.linked-thumb.has-image { overflow: hidden; }
.linked-thumb.has-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.linked-grid .linked-thumb.has-image { width: 64px; height: 64px; }
.linked-list .linked-thumb.has-image { width: 56px; height: 56px; border-radius: 10px; }
.cat-icon { width: 55%; height: 55%; background: color-mix(in oklab, var(--cat) 48%, black); -webkit-mask: var(--cat-icon, none) center / contain no-repeat; mask: var(--cat-icon, none) center / contain no-repeat; }
.linked-text { display: grid; min-width: 0; line-height: 1.3; }
.linked-over { font-size: .75rem; font-weight: 700; color: color-mix(in oklab, var(--cat) 48%, black); }
.series { display: grid; gap: 8px; }
.series-row { display: flex; align-items: center; gap: 16px; padding: 10px 16px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-card); color: var(--c-text); }
.series-row:hover { text-decoration: none; border-color: var(--c-muted); }
.series-row.is-next { border-color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 8%, var(--c-background)); }
.series-row.is-cancelled .series-label { text-decoration: line-through; }
.series-date { display: grid; justify-items: center; min-width: 40px; line-height: 1.15; }
.series-date span { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-secondary); }
.series-date strong { font-size: 1.25rem; font-weight: 800; }
.series-label { flex: 1; min-width: 0; font-weight: 500; }
.series-flag { font-size: .75rem; font-weight: 700; color: var(--c-primary-deep); white-space: nowrap; }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.photos img { border-radius: var(--r-md); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.photos figure { margin: 0; }
.photos figcaption { color: var(--c-text-secondary); margin-top: 4px; }

/* Seitenleiste */
.box { border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-card); padding: 16px; }
.box p:last-child { margin-bottom: 0; }
.box-link { margin-top: 10px; font-weight: 600; }
.box-ad { border-style: dashed; display: grid; gap: 10px; justify-items: start; }
.box-note { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: var(--r-sm); background: var(--success-tint); font-size: .875rem; font-weight: 700; }
.box-note .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-success); }
.box-note.is-holiday { background: var(--warning-tint); color: var(--warning-text); }
.box-note + .box-note { margin-top: 6px; }
.rows { margin: 0; display: grid; gap: 6px; }
.rows > div { display: flex; justify-content: space-between; gap: 12px; }
.rows dt { color: var(--c-text-secondary); }
.rows dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.rows .is-today dt { color: var(--c-text); font-weight: 700; }
.stations { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: fit-content(45%) minmax(0, 1fr); gap: 8px 12px; font-size: .875rem; }
.stations li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: start; }
.stations li + li { border-top: 1px solid var(--c-border); padding-top: 8px; }
.stations .station-name { line-height: 1.375rem; font-weight: 600; }
.stations .lines { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.line-mark { display: block; width: 1.75rem; height: .875rem; background: currentColor; -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; }
.line-mark:not(:only-child) { width: auto; aspect-ratio: 1; margin-right: 2px; }
.line { display: inline-flex; align-items: center; justify-content: center; height: 1.375rem; min-width: 42px; border-radius: 4px; padding: 1px 6px; font-weight: 800; font-size: .75rem; }

/* Übersichten /orte/ und /termine/ nach Entwurf „Überblick Orte & Termine“.
   Status in denselben Farben wie auf den Einzelseiten (Herwig, 4.10.2026): geöffnet grün,
   vorübergehend geschlossen, Abgesagt und Änderung gelb. */
.list-head { display: grid; gap: 6px; margin-bottom: 20px; }
.list-head h1 { margin: 0; }
.list-intro { margin: 0; max-width: 62ch; color: var(--c-text-secondary); text-wrap: pretty; }
.cross-link { justify-self: start; font-weight: 600; }
.filter-label { font-size: .75rem; line-height: 40px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-secondary); }
.filter-grid { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px 16px; align-items: start; margin-top: 16px; }
.filter-grid .filters { margin: 0; }
/* Türen als waagrechter Streifen: höchstens vier sichtbar, weitere per Wischen, nie eine halbe Zeile (E3) */
.doors { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(calc((100% - 36px) / 4), 1fr); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 4px; }
.doors > .door { scroll-snap-align: start; }
.door { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--c-border); background: var(--c-card); color: var(--c-text); line-height: 1.35; }
.door strong { font-size: 1rem; }
.door-text { font-size: .875rem; color: var(--c-text-secondary); }
.door-over { display: flex; align-items: center; gap: 5px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-secondary); }
a.door:hover { text-decoration: none; border-color: var(--c-text); color: var(--c-text); }
.door-count { margin-top: auto; padding-top: 4px; font-size: .8125rem; font-weight: 600; color: var(--c-primary-deep); }
.guides-grid { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; scroll-snap-type: none; }
.door.is-active { border-color: var(--c-text); box-shadow: inset 0 0 0 1px var(--c-text); background: var(--c-surface); }
.door.is-active .door-over { color: var(--c-text); }
.filters .chip { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border: 1px solid var(--c-border); background: var(--c-card); font-size: 1rem; white-space: nowrap; }
.filters .chip:hover { border-color: var(--c-text); color: var(--c-text); }
.filters .chip.is-active { background: var(--c-text); border-color: var(--c-text); color: var(--c-background); }
.chip-cat { font-size: .875rem !important; padding: 0 14px 0 8px !important; gap: 7px !important; }
.filters .chip-cat:hover { border-color: color-mix(in oklab, var(--cat) 48%, black); }
.filters .chip-cat.is-active { background: color-mix(in srgb, var(--cat) 42%, var(--c-background)); border-color: color-mix(in oklab, var(--cat) 48%, black); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cat) 48%, black); color: color-mix(in oklab, var(--cat) 48%, black); font-weight: 700; }
.day-pick { display: flex; gap: 8px; margin: 0; flex: 0 0 auto; }
.day-pick .chip { position: relative; cursor: pointer; }
.day-pick-input { font: inherit; color: inherit; background: transparent; border: 0; }
.day-pick.is-enhanced .day-pick-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.day-pick.is-enhanced .day-pick-go { display: none; }
.day-pick .chip:has(.day-pick-input:focus-visible) { outline: var(--focus-ring); outline-offset: 2px; }
.chip-all.is-active { background: var(--c-surface) !important; color: var(--c-text) !important; }
.cat-marker { width: 22px; height: 22px; border-radius: 50%; background: var(--cat); display: grid; place-items: center; flex-shrink: 0; }
.cat-marker .cat-icon { width: 13px; height: 13px; background: #fff; }
.cat-marker-img { width: 22px; height: 22px; flex-shrink: 0; display: block; }
.cat-details { display: none; }
:focus-visible, .card:has(.card-title:focus-visible), .hero-card:has(.hero-title:focus-visible), .hero-side-card:has(.hero-side-title:focus-visible), .lane-card:has(.lane-card-title:focus-visible) { outline: var(--focus-ring); outline-offset: 2px; }
.hero-title:focus-visible, .hero-side-title:focus-visible, .lane-card-title:focus-visible { outline: none; }
.lane-special :focus-visible, .lane-special .lane-card:has(.lane-card-title:focus-visible) { outline-color: var(--text-inverse-muted); }

.result-bar { display: grid; gap: 10px; margin: 20px 0; padding-top: 16px; border-top: 1px solid var(--c-border); }
.result-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: .875rem; font-weight: 600; }
.result-count { font-size: 1rem; font-weight: 700; }
.active-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.active-filter { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 8px 4px 12px; border-radius: var(--r-full); background: var(--c-surface); color: var(--c-text); font-size: .875rem; font-weight: 600; }
.active-filter span { color: var(--c-text-secondary); font-weight: 500; }
.active-filter:hover { background: var(--c-border); text-decoration: none; color: var(--c-text); }

.cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 24px; }
.card { background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--r-md); position: relative; color: var(--c-text); }
.card p { margin: 0; }
.card-title { display: block; font-weight: 700; font-size: 1.125rem; line-height: 1.33; color: var(--c-text); overflow-wrap: anywhere; text-wrap: pretty; }
/* Die ganze Karte ist anklickbar, der Link bleibt am Titel. */
.card-title::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card:hover { border-color: var(--c-muted); box-shadow: 0 4px 10px rgb(56 42 38 / .08), 0 2px 4px rgb(56 42 38 / .05); }
.card-title:hover { text-decoration: none; color: var(--c-text); }
.card-title:focus-visible { outline: none; }
.card-verdict { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-wrap: pretty; }
.card-image { background: color-mix(in srgb, var(--cat) 18%, var(--c-surface)); overflow: hidden; }
.card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card .pill-category { align-self: flex-start; font-size: .875rem; padding: 3px 10px; }
.card-facts { display: grid; gap: 4px; margin-top: 2px; }
.status, .fact { display: flex; align-items: center; gap: 7px; font-size: .875rem; line-height: 1.43; }
.status { font-weight: 500; }
.status.is-open { font-weight: 600; color: var(--success-text); }
.status.is-closed { font-weight: 700; color: var(--warning-text); }
.status.is-unknown, .fact { color: var(--c-text-secondary); }
.badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--r-full); border: 1px solid transparent; font-size: .75rem; line-height: 1.33; font-weight: 700; }
.badge-verified { color: var(--c-text-secondary); padding-inline: 0; }
.badge-recommended { background: var(--c-text); border-color: var(--c-text); color: var(--c-background); }
.badge-promo { border-color: var(--c-muted); color: var(--c-text-secondary); }
.badge-new { background: var(--gradient-button); color: #fff; }
.badge-changed { background: var(--warning-tint); color: var(--warning-text); }
.badge-cancelled { background: var(--warning-tint); color: var(--warning-text); }
/* Veranstaltung (Festival, Pride-Woche, Format) als anklickbare Marke; liegt über dem Link der ganzen Karte */
.badge-series, .pill-series { position: relative; z-index: 1; background: color-mix(in srgb, var(--c-primary) 12%, var(--c-card)); color: var(--c-primary-deep); border: 1px solid color-mix(in srgb, var(--c-primary) 35%, transparent); text-decoration: none; }
.badge-series:hover, .pill-series:hover { border-color: var(--c-primary); }
.on-photo .badge-series, .lane-special .badge-series { background: var(--c-card); border-color: var(--c-card); }

.card-place { display: flex; flex-direction: column; overflow: hidden; }
.card-place .card-image { aspect-ratio: 3 / 2; }
.card-place .card-body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; }
.card-place .card-facts { margin-top: auto; padding-top: 4px; }
.card-place.is-paused .card-image img { filter: grayscale(.7); }

.day { display: grid; gap: 10px; margin-bottom: 28px; }
.day-head { position: sticky; top: 0; z-index: 2; background: var(--c-background); margin: 0; padding: 10px 0 8px; border-bottom: 2px solid var(--c-text); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; text-transform: none; letter-spacing: 0; color: var(--c-text); }
.day-rel { font-size: .875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-primary-deep); }
.day-name { font-size: 1.75rem; line-height: 1.1; }
.day-count { margin-left: auto; font-size: .875rem; font-weight: 600; color: var(--c-text-secondary); }
.event-rows { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.card-event { display: grid; grid-template-columns: 76px minmax(0, 1fr) 112px; gap: 18px; align-items: start; padding: 14px 16px; }
.card-event .card-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.card-event .card-image { width: 100%; aspect-ratio: 1; border-radius: var(--r-sm); }
.card-event .card-verdict { -webkit-line-clamp: 1; }
.card-where { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .875rem; color: var(--c-text-secondary); }
.card-time { display: grid; align-content: start; line-height: 1.25; }
.card-time strong { font-size: 1.375rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.card-time span { font-size: .75rem; font-weight: 700; color: var(--c-text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.notice-line { display: flex; align-items: center; gap: 6px; font-size: .875rem; font-weight: 700; color: var(--warning-text); }
.fee { font-weight: 600; color: var(--c-text); margin-right: 4px; }
.card-event.is-cancelled { background: var(--c-surface); }
.card-event.is-cancelled .card-title, .card-event.is-cancelled .card-time strong { text-decoration: line-through; color: var(--c-text-secondary); }
.card-event.is-cancelled .fee { color: var(--c-text-secondary); }
.card-event.is-cancelled .card-image img { filter: grayscale(1) opacity(.55); }

/* Werbeplatz: Hinweis „Anzeige“ oben, Werbemittel (300 × 250) waagrecht und senkrecht in der Mitte.
   Seitlich wenig Abstand, damit 300 px auch in eine schmale Karte passen. */
.ad-slot { border: 1.5px dashed var(--c-muted); border-radius: var(--r-md); padding: 14px 4px; display: grid; grid-template-rows: auto 1fr; gap: 10px; min-height: 300px; height: 100%; }
.ad-slot > div { place-self: center; max-width: 100%; }
.ad-slot-row, .ad-slot-side { min-height: 0; height: auto; }
.ad-slot-row { width: fit-content; max-width: 100%; margin: 8px auto 0; padding-inline: 10px; }
.pill-ad { justify-self: start; margin-left: 10px; padding: 2px 8px; border: 1px dashed var(--c-muted); color: var(--c-text-secondary); font-size: .75rem; }
.ad-slot-row .pill-ad { margin-left: 0; }
.empty { border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-card); padding: 28px; display: grid; gap: 10px; justify-items: start; max-width: 640px; }
.empty h2 { font-size: 1.875rem; line-height: 1.05; font-weight: 800; font-stretch: var(--font-stretch-heading); margin: 0; text-wrap: balance; text-transform: none; letter-spacing: 0; color: var(--c-text); }
.empty p { margin: 0; color: var(--c-text-secondary); }
.empty-kicker { font-size: .875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-primary-deep) !important; }
.empty-links { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; font-weight: 600; }
.empty .btn { margin-top: 6px; }
main > section { margin-top: 32px; }
main > h1 { margin-bottom: 16px; }

/* Startseite nach Entwurf „Startseite“. Große Überschriften schmal (Archivo mit variabler Breite). */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.home-hero { margin-top: 8px; }
.home-hero ul { list-style: none; margin: 0; padding: 0; }
.hero-lead { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; }
.home-hero.is-lead .hero-row { display: none; }
.hero-lead:not(:has(.hero-side)) { grid-template-columns: minmax(0, 1fr); }
.hero-lead:not(:has(.hero-side)) .hero-card.is-big { min-height: 440px; }
.hero-card { position: relative; overflow: hidden; border-radius: 18px; aspect-ratio: 4 / 5; background: color-mix(in srgb, var(--cat) 30%, var(--c-text)); color: #fff; }
.hero-card.is-big { aspect-ratio: auto; min-height: 540px; border-radius: 20px; }
.hero-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--photo-shade-soft); } /* z-index: sonst liegt das Foto darüber */
.hero-card:hover { box-shadow: 0 12px 28px rgb(56 42 38 / .18); }
.hero-text { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.is-big .hero-text { padding: 32px; gap: 12px; }
/* Schatten nur auf freiem Text, nicht in Pillen und Knöpfen */
.hero-card :is(.hero-when, .hero-title, .hero-where > span:not(.pill), .hero-verdict) { text-shadow: var(--text-shadow-photo); }
.hero-when { margin: 0; font-size: .875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.is-big .hero-when { font-size: 1rem; }
.hero-title { color: #fff; font-stretch: var(--font-stretch-display); font-size: 2.5rem; line-height: 1; font-weight: 800; letter-spacing: -.01em; text-wrap: balance; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.is-big .hero-title { font-size: 3.5rem; line-height: .98; max-width: 16ch; }
.hero-title:hover { color: #fff; text-decoration: none; }
.hero-title::after, .hero-side-title::after, .lane-card-title::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.hero-where { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: .875rem; color: rgb(255 255 255 / .9); }
.hero-where .pill-category { background: var(--c-card); font-size: .875rem; padding: 3px 10px; }
.hero-where .pill-category .dot { display: inline-block; }
.hero-verdict { margin: 0; font-size: 1.125rem; line-height: 1.45; max-width: 44ch; }
.badges.on-photo { margin: 0; }
.on-photo .badge-verified { color: #fff; background: oklch(14% 0.016 38 / .55); padding-inline: 8px; }
.on-photo .badge-recommended { background: var(--c-card); color: var(--c-text); border-color: var(--c-card); }
.on-photo .badge-promo { color: #fff; background: oklch(14% 0.016 38 / .35); border-color: rgb(255 255 255 / .7); }
.hero-side { display: flex; flex-direction: column; gap: 14px; }
.hero-side li { flex: 1; display: flex; }
.hero-side-card { position: relative; flex: 1; display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 16px; padding: 10px; border: 1px solid var(--c-border); border-radius: 16px; background: var(--c-card); }
.hero-side-card:hover { border-color: var(--c-muted); box-shadow: 0 4px 10px rgb(56 42 38 / .08); }
.hero-side-card .card-image { min-height: 132px; border-radius: 10px; }
.hero-side-text { display: flex; flex-direction: column; gap: 6px; padding: 4px 6px 4px 0; min-width: 0; }
.hero-side-text p { margin: 0; }
.hero-side-title { color: var(--c-text); font-stretch: var(--font-stretch-heading); font-size: 1.5rem; line-height: 1.05; font-weight: 800; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.hero-side-title:hover { text-decoration: none; color: var(--c-text); }
.hero-side-text .badges { margin-top: auto; }
.cat-text { color: color-mix(in oklab, var(--cat) 48%, black); }
.hero-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.hero-row li:nth-child(n+4) { display: none; }
.hero-row:has(> li:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hero-row:has(> li:nth-child(2):last-child) .hero-card { aspect-ratio: 4 / 3; }
.list-hero { margin: 24px 0 8px; }
.list-hero ul { list-style: none; margin: 0; padding: 0; }
.list-hero .filter-label { margin: 0 0 4px; }
.list-hero .hero-card { aspect-ratio: 4 / 3; }
.list-hero .hero-title { font-size: 1.75rem; -webkit-line-clamp: 3; }

.home-doors { margin-top: 28px; }
.home-doors .door strong { font-size: 1.125rem; font-weight: 800; font-stretch: 85%; }

.lane { margin-top: 64px; }
.lane-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 24px; margin-bottom: 18px; }
.lane-text { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.lane-text p { margin: 2px 0 0; font-size: 1.125rem; line-height: 1.45; color: var(--text-subtle); max-width: 52ch; text-wrap: pretty; }
.lane-text h2 { margin: 0; font-stretch: var(--font-stretch-display); font-size: 3rem; line-height: 1; font-weight: 800; letter-spacing: -.005em; text-wrap: balance; text-transform: none; color: inherit; }
.lane-keyword { display: flex; align-items: center; gap: 10px; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-secondary); }
.lane-keyword::before { content: ""; width: 28px; height: 4px; border-radius: 2px; background: var(--accent-gradient); }
.lane-more { font-weight: 600; white-space: nowrap; }
.lane:not(.lane-special) .lane-head { position: relative; }
.lane:not(.lane-special) .lane-more { position: absolute; right: 0; bottom: 4px; }
.lane-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.lane-row li { display: flex; }
.lane-row li:nth-child(n+5) { display: none; }
.lane-card { position: relative; flex: 1; display: flex; flex-direction: column; border: 1px solid var(--c-border); border-radius: 14px; background: var(--c-card); overflow: hidden; }
.lane-card:hover { border-color: var(--c-muted); box-shadow: 0 4px 10px rgb(56 42 38 / .08), 0 2px 4px rgb(56 42 38 / .05); }
.lane-card .card-image { aspect-ratio: 4 / 3; }
.lane-card-body { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; }
.lane-card-body p { margin: 0; }
.cat-line { display: flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 700; color: color-mix(in oklab, var(--cat) 48%, black); }
.cat-line .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cat); }
.lane-card-title { color: var(--c-text); font-size: 1.125rem; line-height: 1.33; font-weight: 700; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.lane-card-title:hover { text-decoration: none; color: var(--c-text); }
.lane-card-meta { margin-top: auto; padding-top: 4px; display: grid; gap: 2px; font-size: .875rem; }
.lane-card.is-paused .card-image img { filter: grayscale(.7); }
.lane-card.is-cancelled .lane-card-title { text-decoration: line-through; color: var(--c-text-secondary); }
.lane-card.is-cancelled .card-image img { filter: grayscale(1) opacity(.55); }

.lane-special { margin-inline: calc(50% - 50vw); padding: 56px 0; background: var(--lane-bg, var(--surface-inverse)); color: #fff; }
.lane-special .lane-inner { max-width: var(--page); margin: 0 auto; padding: 0 24px; }
.lane-special .lane-head { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px 48px; align-items: center; margin-bottom: 24px; }
.lane-special .lane-head:not(:has(.lane-image)) { grid-template-columns: minmax(0, 1fr); }
.lane-special .lane-text h2 { font-size: 3.75rem; line-height: .95; font-stretch: 72%; }
.lane-special .lane-card .card-image { background: var(--line-inverse); }
.lane-special .lane-text p, .lane-special .lane-keyword { color: var(--text-inverse-muted); }
.lane-special .lane-more { align-self: flex-start; margin-top: 8px; padding: 11px 18px; border-radius: var(--r-sm); border: 1.5px solid #fff; color: #fff; }
.lane-special .lane-more:hover { background: #fff; color: var(--c-text); text-decoration: none; }
.lane-image { aspect-ratio: 3 / 2; border-radius: 14px; overflow: hidden; background: rgb(0 0 0 / .2); }
.lane-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lane-special .lane-card { background: var(--surface-inverse-raised); border-color: var(--line-inverse); color: #fff; }
.lane-special .lane-card:hover { border-color: var(--c-text-secondary); }
.lane-special .lane-card-title, .lane-special .lane-card-title:hover { color: #fff; }
.lane-special .cat-line { color: var(--cat); }
.lane-special .card-verdict, .lane-special .fact, .lane-special .status { color: var(--text-inverse-muted); }
.lane-special .badge-verified { color: var(--text-inverse-muted); }
.lane-special .badge-recommended { background: #fff; color: var(--c-text); border-color: #fff; }
.lane-special .badge-promo { color: #fff; border-color: rgb(255 255 255 / .7); }
.lane-special + .lane { margin-top: 64px; }

/* Gegend- und Guide-Seiten nach Entwurf „Themenseite“ (A-8, A-9) */
.theme-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; margin: 8px 0 8px; }
.theme-head.has-image { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.theme-text { display: flex; flex-direction: column; gap: 10px; }
.theme-kicker { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-secondary); }
.theme-kicker::before { content: ""; width: 28px; height: 4px; border-radius: 2px; background: var(--accent-gradient); margin-right: 4px; }
.theme-title { font-size: 4rem; line-height: .98; font-weight: 800; font-stretch: var(--font-stretch-display); letter-spacing: -.01em; text-wrap: balance; }
.theme-subtitle { margin: 0; font-size: 1.375rem; line-height: 1.3; font-weight: 600; color: var(--text-subtle); }
.theme-intro { max-width: 56ch; font-size: 1.125rem; line-height: 1.55; }
.theme-intro p { margin: 0 0 10px; }
.theme-facts { margin: 0; font-weight: 600; font-size: .875rem; }
.theme-image { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; background: var(--c-surface); }
.theme-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.theme-image .credit { position: absolute; left: 12px; bottom: 10px; max-width: calc(100% - 24px); padding: 4px 9px; border-radius: 6px; background: rgb(15 7 5 / .6); color: #fff; }
.theme-section { margin-top: 56px; }
.theme-section .heading-section { font-size: 2.25rem; line-height: 1.05; }
.theme-section .section-head { align-items: flex-end; }
.picks { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.pick { position: relative; display: grid; grid-template-columns: 64px 200px minmax(0, 1fr); gap: 24px; align-items: start; padding-bottom: 20px; border-bottom: 1px solid var(--c-border); }
.pick:last-child { border-bottom: 0; }
.pick-number { font-size: 4rem; line-height: .9; font-weight: 800; font-stretch: 72%; color: var(--c-text-secondary); }
.pick .card-image { aspect-ratio: 4 / 3; border-radius: var(--r-md); }
.pick-body { display: flex; flex-direction: column; gap: 6px; }
.pick-body p { margin: 0; }
.pick-body h3 { margin: 0; font-size: 1.875rem; line-height: 1.05; font-weight: 800; font-stretch: var(--font-stretch-heading); text-transform: none; letter-spacing: 0; color: var(--c-text); }
.pick-title { color: var(--c-text); }
.pick-title::after { content: ""; position: absolute; inset: 0; }
.pick:has(.pick-title:focus-visible) { outline: var(--focus-ring); outline-offset: 4px; border-radius: var(--r-md); }
.pick-title:focus-visible { outline: none; }
.pick-reason { font-size: 1.125rem; line-height: 1.5; }
.chip-count { color: var(--c-text-secondary); font-weight: 600; margin-left: 2px; }
.filters .chip.is-active .chip-count { color: inherit; }
.area-layout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 24px; align-items: start; margin-top: 16px; }
.area-layout .cards-places { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.area-map { position: sticky; top: 16px; }
.area-map .map { height: 600px; }
.notice-soft { margin-top: 16px; padding: 12px 16px; border-radius: var(--r-md); background: var(--c-surface); }
.area-info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px; }
.area-info .heading-section { font-size: 2.25rem; }
.theme-day .day-head { position: static; font-size: 1.5rem; }
.theme-day .day-name { font-size: 1.5rem; }
.theme-section .doors { margin-top: 4px; }

/* Karte (O-10): Kartendaten vom eigenen Server, MapLibre. Ohne JavaScript bleibt der Platzhalter. */
.map { position: relative; height: 380px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--c-border);
  background: oklch(94% .012 45) repeating-linear-gradient(45deg, oklch(96% .013 45) 0 14px, oklch(92% .014 45) 14px 28px); }
.map-lage { height: 170px; margin-bottom: 12px; }
.map-fallback { position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; padding: 16px; text-align: center; font-size: .875rem; font-weight: 600; }
.map-fallback p { margin: 0; color: var(--c-text-secondary); }
.map.is-ready .map-fallback { display: none; }
.map-details { margin: 0 0 16px; }
.map-details > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--c-border); border-radius: var(--r-full); background: var(--c-card); font-weight: 600; cursor: pointer; list-style: none; margin-bottom: 12px; }
.map-details > summary::-webkit-details-marker { display: none; }
.map-details > summary:hover { border-color: var(--c-text); }
.map-marker { width: 44px; height: 48px; padding: 4px 2px 4px; border: 0; background: none; cursor: pointer; display: grid; place-items: end center; transform-origin: 50% 100%; transition: transform .15s; }
.map-marker img { width: 40px; height: 40px; display: block; }
.map-marker .cat-marker { width: 32px; height: 32px; border: 3px solid #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .3); }
.map-marker[aria-expanded="true"] { transform: scale(1.3); filter: drop-shadow(0 4px 6px rgb(0 0 0 / .3)); z-index: 2; }
.map-marker:focus-visible, .map-group:focus-visible, .map-zoom button:focus-visible, .map-card button:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.map-group { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--c-card); background: var(--c-text); color: var(--c-background); font: 800 1rem var(--font-body); cursor: pointer; box-shadow: 0 2px 6px rgb(0 0 0 / .25); }
.map-group[aria-expanded="true"] { border-color: var(--c-primary-deep); }
.map-zoom { position: absolute; top: 10px; right: 10px; z-index: 3; display: grid; gap: 6px; }
.map-lage .map-zoom { top: 8px; right: 8px; gap: 4px; }
.map-lage .map-zoom button { width: 36px; height: 36px; }
.map-zoom button { width: 40px; height: 40px; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-card); color: var(--c-text); font: 700 1.25rem var(--font-body); cursor: pointer; }
.map-card { position: absolute; z-index: 4; width: 320px; max-width: calc(100% - 16px); background: var(--c-card); color: var(--c-text); border: 1px solid var(--c-border); border-radius: var(--r-md); box-shadow: 0 10px 28px rgb(56 42 38 / .2); padding: 12px; max-height: calc(100% - 16px); overflow-y: auto; }
.map-card-place { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; }
.map-card-place img { width: 92px; height: 92px; object-fit: cover; border-radius: var(--r-sm); background: var(--c-surface); }
.map-card p { margin: 0; }
.map-card-name { font-size: 1.125rem; line-height: 1.2; font-weight: 800; font-stretch: var(--font-stretch-heading); padding-right: 36px; }
.map-card-verdict { font-size: .875rem; color: var(--c-text-secondary); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.map-card .status { margin-top: 4px; }
.map-card a.map-card-link { display: inline-block; margin-top: 6px; font-weight: 600; font-size: .875rem; }
.map-card .map-close { position: absolute; top: 6px; right: 6px; width: 40px; height: 40px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--c-text); font-size: 1.25rem; cursor: pointer; }
.map-card .map-close:hover { background: var(--c-surface); }
.map-card ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.map-card ul button { width: 100%; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 8px; border: 1px solid transparent; border-radius: var(--r-sm); background: none; color: var(--c-text); font: 600 .9375rem var(--font-body); text-align: left; cursor: pointer; }
.map-card ul button:hover { border-color: var(--c-border); }
.map-card ul img { width: 28px; height: 28px; }
.map-card.is-sheet { left: 8px !important; right: 8px; bottom: 8px; top: auto !important; width: auto; max-width: none; }
.map .maplibregl-ctrl-attrib { font-size: .75rem; }

/* Fußzeile */
.site-footer { border-top: 1px solid var(--c-border); }
.site-footer > div { max-width: var(--page); margin: 0 auto; padding: 28px 24px; display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; font-size: .875rem; color: var(--c-text-secondary); }
.site-footer img { height: 34px; width: auto; }
.site-footer .copyright { margin-left: auto; }
.site-footer .link-button { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--c-text-secondary); cursor: pointer; }
.site-footer .link-button:hover { color: var(--c-primary-deep); }
.site-footer .footer-nav { flex: 0 1 auto; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; font-weight: 600; flex: 1; }
.site-footer nav a { color: var(--c-text-secondary); }
.site-footer nav a:hover, .site-footer nav a[aria-current] { color: var(--c-primary-deep); text-decoration: none; }
.text-page { max-width: 70ch; padding-top: 20px; }
.text-page h1 { margin-bottom: 20px; }
.text-page h2, .text-page h3 { text-transform: none; letter-spacing: 0; color: var(--c-text); margin: 28px 0 8px; }
.text-page h3 { font-size: 1rem; }
.text-page table { border-collapse: collapse; width: 100%; margin-bottom: 12px; }
.text-page th, .text-page td { border: 1px solid var(--c-border); padding: 6px 10px; text-align: left; vertical-align: top; }
.ad { margin: 16px auto; max-width: var(--page); padding: 0 24px; }
.ad-header .ad-unit { display: flex; justify-content: center; }

/* Werbeplatz am Desktop: Startseite als letzte Karte einer Lane, Terminliste in einer rechten Spalte,
   die beim Scrollen mitläuft. Am Handy bleibt der kompakte Kasten unter der Lane bzw. nach dem zweiten Tag. */
.lane-body.has-ad > .ad-slot-row { margin-top: 24px; }
.day-list > .ad-slot-row { margin: 0 auto 28px; }
@media (min-width: 1024px) {
  .lane-body.has-ad { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; }
  .lane-body.has-ad .lane-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lane-body.has-ad .lane-row li:nth-child(n+4) { display: none; }
  .lane-body.has-ad > .ad-slot-row { width: auto; margin: 0; height: 100%; padding-inline: 8px; }
  .day-list.has-ad { display: grid; grid-template-columns: minmax(0, 1fr) 320px; column-gap: 32px; align-items: start; }
  .day-list.has-ad > :not(.ad-slot) { grid-column: 1; }
  .day-list.has-ad > .ad-slot { grid-column: 2; grid-row: 1 / span 400; position: sticky; top: 24px; width: auto; margin: 6px 0 0; padding-inline: 8px; }
}
.lane-special .ad-slot { border-color: rgba(255, 255, 255, .5); }
.lane-special .pill-ad { color: inherit; border-color: rgba(255, 255, 255, .5); }

/* Handy */
.only-mobile { display: none; }
@media (max-width: 860px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  /* Orts- und Terminseite: was man unterwegs braucht (Öffnungszeiten, Lage, Kontakt, Eintritt) gleich nach
     der Beschreibung, dann Termine, Abstimmung und der Rest (UX-Prüfung D1). */
  .layout { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .layout > .main-column, .layout > .side-column { display: contents; }
  .main-column > *, .side-column > * { order: 4; }
  .main-column > .m-first { order: 1; }
  .side-column > .m-key { order: 2; }
  .main-column > .m-events { order: 3; }
  .side-column > * { margin-bottom: 16px; }
  .main-column > .m-events { margin-top: 20px; }
  .place-events > :nth-child(n+4) { display: none; }
  .only-mobile { display: block; }
  .list-hero { display: none; }
}
@media (max-width: 759px) {
  .site-header { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "brand langs" "nav search"; gap: 10px 8px; padding: 10px 16px 12px; }
  .site-header:has(.city-menu) { grid-template-columns: auto 1fr auto; grid-template-areas: "brand city langs" "nav search search"; }
  .city-menu { grid-area: city; justify-self: end; }
  .city-chip { height: 40px; padding: 0 12px; }
  .city-panel { left: 12px; right: 12px; width: auto; top: calc(100% - 4px); max-height: calc(100dvh - 120px); overflow-y: auto; }
  .city-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .city-tile { aspect-ratio: 1 / 1.1; }
  .city-tile-text { padding: 12px; }
  .city-tile strong { font-size: 1.625rem; }
  .city-tile-meta { font-size: .8125rem; }
  .area-head-image { aspect-ratio: 16 / 9; }
  .brand { grid-area: brand; }
  .brand img { height: 40px; }
  .langs { grid-area: langs; justify-self: end; font-size: .9375rem; gap: 0; }
  .langs a { min-width: 44px; height: 44px; display: grid; place-items: center; padding: 0; }
  .main-nav { grid-area: nav; gap: 0; padding: 3px; border-radius: 10px; background: var(--c-surface); font-size: .9375rem; font-weight: 700; }
  .main-nav a { height: 38px; padding: 0 14px; display: flex; align-items: center; border-radius: var(--r-sm); color: var(--c-text-secondary); }
  .main-nav a[aria-current] { background: var(--c-card); box-shadow: 0 1px 2px rgb(56 42 38 / .12); }
  .header-band.is-dark .main-nav { background: rgb(255 255 255 / .14); }
  .header-band.is-dark .main-nav a { color: rgb(255 255 255 / .8); }
  .header-band.is-dark .main-nav a[aria-current] { background: rgb(255 255 255 / .24); color: #fff; box-shadow: none; text-decoration: none; }
  .search { grid-area: search; max-width: none; border-radius: 10px; background: var(--c-card); }
  .search select { display: none; }
  main { padding: 16px 16px 48px; }
  h1 { font-size: 1.75rem; }
  .display-l { font-size: 2.25rem; }
  .hero { aspect-ratio: 16 / 7; }
  .vote { flex-direction: column; align-items: stretch; gap: 10px; }
  .section-head { display: block; }
  .site-footer > div { padding: 24px 16px; }
  .doors { display: flex; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 3px 16px 5px; gap: 8px; }
  .door { flex: 0 0 196px; padding: 10px 12px; gap: 2px; }
  .door-text { display: none; }
  .doors.guides-grid { display: grid; grid-template-columns: minmax(0, 1fr); overflow: visible; margin: 0; padding: 0; }
  .guides-grid .door { padding: 14px 16px; }
  .guides-grid .door-text { display: block; }
  .filter-grid { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 10px; }
  .filter-grid > .filter-label, .cat-row { display: none; }
  .quick-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px !important; padding: 3px 16px; width: calc(100% + 32px); }
  .filters .chip { height: 44px; flex: 0 0 auto; }
  .cat-details { display: block; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-card); }
  .cat-details.is-active { border-color: color-mix(in oklab, var(--cat) 48%, black); background: color-mix(in srgb, var(--cat) 18%, var(--c-background)); }
  .cat-details summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; cursor: pointer; font-weight: 600; list-style: none; }
  .cat-details summary::-webkit-details-marker { display: none; }
  .cat-details summary .filter-label { line-height: 1; }
  .cat-details .chevron { margin-left: auto; }
  .cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 4px 8px 10px; }
  .cat-option { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 10px; border-radius: var(--r-sm); border: 1px solid transparent; color: var(--c-text); font-size: .875rem; line-height: 1.3; font-weight: 600; }
  .cat-option.is-active { border-color: currentColor; font-weight: 700; }
  .cards { gap: 16px; }
  .card-event { grid-template-columns: 50px minmax(0, 1fr) 64px; gap: 10px; padding: 12px; }
  .card-event .card-verdict { -webkit-line-clamp: 2; }
  .card-time strong { font-size: 1.125rem; }

  .empty { padding: 20px; }
  .home-hero.is-lead .hero-lead { display: none; }
  .home-hero.is-lead .hero-row { display: flex; }
  .hero-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 6px; gap: 12px; }
  .hero-row li { flex: 0 0 84%; scroll-snap-align: start; }
  .hero-row li:only-child { flex-basis: 100%; }
  .hero-row li:nth-child(n+4) { display: block; }
  .hero-text { padding: 20px; }
  .hero-title { font-size: 2.25rem; }
  .display-xl, .is-big .hero-title { font-size: 2.5rem; }
  .heading-day, .day-name { font-size: 1.5rem; }
  .home-doors { margin-top: 20px; }
  .lane { margin-top: 40px; }
  .lane-text h2 { font-size: 2.25rem; }
  .lane:not(.lane-special) .lane-more { position: static; }
  .lane-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 6px; gap: 12px; }
  .lane-row li { flex: 0 0 236px; scroll-snap-align: start; }
  .lane-row li:nth-child(n+5) { display: flex; }
  .lane-special { padding: 32px 0 36px; margin-top: 40px; }
  .lane-special .lane-inner { padding: 0 16px; }
  .lane-special .lane-head { grid-template-columns: minmax(0, 1fr); }
  .lane-special .lane-image { order: -1; }
  .lane-special .lane-text h2 { font-size: 2.75rem; }
  .theme-head, .theme-head.has-image { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .theme-image { order: -1; aspect-ratio: 3 / 2; }
  .theme-title { font-size: 2.75rem; }
  .theme-subtitle { font-size: 1.125rem; }
  .theme-section { margin-top: 40px; }
  .theme-section .heading-section, .area-info .heading-section { font-size: 1.875rem; }
  .pick { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; }
  .pick .card-image { display: none; }
  .pick-number { font-size: 2.5rem; }
  .pick-body h3 { font-size: 1.5rem; }
  .area-layout { grid-template-columns: minmax(0, 1fr); }
  .area-map { position: static; order: -1; }
  .area-map .map { height: 340px; }
  .map { height: 340px; }
  .map-lage { height: 170px; }
  .area-info { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .theme-day .day-name { font-size: 1.375rem; }
  .card-event.is-extra { display: none; }
  .theme-section .doors { display: flex; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 3px 16px 5px; gap: 8px; }
  .theme-section .door { flex: 0 0 210px; }
}

/* Umschalter Liste/Karte und Kalenderstreifen in den Übersichten */
.view-switch { display: inline-flex; margin-left: auto; padding: 3px; border-radius: var(--r-full); background: var(--c-surface); }
.view-switch a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: var(--r-full); color: var(--c-text-secondary); font-weight: 700; }
.view-switch a:hover { color: var(--c-text); text-decoration: none; }
.view-switch a[aria-current] { background: var(--c-card); color: var(--c-text); box-shadow: 0 1px 2px rgb(56 42 38 / .12); }
.list-map .map { height: min(70vh, 640px); }
.list-map-note { margin: 10px 0 0; font-size: .875rem; color: var(--c-text-secondary); }
.map-card-events { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 4px; font-size: .8125rem; }
.map-card-events a { font-weight: 700; }
.map-card-more { color: var(--c-text-secondary); }
.day-strip { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.strip-day { flex: 0 0 auto; display: grid; justify-items: center; gap: 1px; min-width: 64px; padding: 6px 4px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-card); color: var(--c-text); line-height: 1.15; }
a.strip-day:hover { border-color: var(--c-text); text-decoration: none; }
.strip-day.is-active { background: var(--c-text); border-color: var(--c-text); color: var(--c-background); }
.strip-day.is-empty { color: var(--c-text-secondary); background: transparent; opacity: .6; }
.strip-weekday { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.strip-day.is-weekend .strip-weekday { color: var(--c-primary-deep); }
.strip-day.is-active .strip-weekday { color: inherit; }
.strip-date { font-size: 1.25rem; font-weight: 800; font-stretch: var(--font-stretch-heading); }
.strip-count { font-size: .6875rem; font-weight: 600; white-space: nowrap; color: var(--c-text-secondary); }
.strip-day.is-active .strip-count { color: inherit; }
@media (min-width: 760px) {
  /* Zwei Wochen als zwei Reihen zu je sieben Tagen */
  .day-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); overflow: visible; max-width: 640px; }
}
@media (max-width: 759px) {
  .day-strip { margin: 0 -16px; padding: 2px 16px; }
  .view-switch { margin-left: 0; }
}

/* „App installieren“ (Entwurf A: Leiste unten, Entwurf D: Anleitung fürs iPhone) */
.install-bar { position: fixed; z-index: 50; left: 12px; right: 12px; bottom: calc(16px + env(safe-area-inset-bottom)); max-width: 460px; margin: 0 auto; padding: 16px; border-radius: 18px; background: var(--c-text); color: #fff; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 12px 32px rgb(0 0 0 / .28); }
.install-bar[hidden], .install-sheet:not([open]) { display: none; }
.install-bar-text { display: flex; gap: 12px; align-items: flex-start; }
.install-bar img, .install-sheet img { width: 52px; height: 52px; border-radius: 12px; flex-shrink: 0; }
.install-bar p, .install-sheet-head p { margin: 0; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.install-bar strong { font-size: 1.0625rem; font-weight: 800; }
.install-bar span { font-size: .875rem; line-height: 1.4; color: rgb(255 255 255 / .82); }
.install-close { width: 44px; height: 44px; margin: -10px -10px 0 0; border: 0; background: none; color: rgb(255 255 255 / .82); display: grid; place-items: center; cursor: pointer; }
.install-bar-actions { display: flex; gap: 10px; }
.install-bar-actions .btn-primary { flex: 1; justify-content: center; }
.install-later { background: none; color: #fff; border-color: rgb(255 255 255 / .3); }
.install-bar :focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.install-sheet { position: fixed; inset: auto 0 0; width: 100%; max-width: 520px; margin: 0 auto; padding: 20px 20px calc(28px + env(safe-area-inset-bottom)); border: 0; border-radius: 22px 22px 0 0; background: var(--c-card); color: var(--c-text); flex-direction: column; gap: 18px; }
.install-sheet[open] { display: flex; }
.install-sheet::backdrop { background: rgb(0 0 0 / .45); }
.install-sheet-head { display: flex; gap: 14px; align-items: center; }
.install-sheet-head strong { font: 800 1.25rem/1.2 var(--font-heading); }
.install-sheet-head span { color: var(--c-text-secondary); font-size: .875rem; }
.install-steps[hidden] { display: none; }
.install-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.install-steps li { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border-radius: var(--r-md); background: var(--c-surface); }
.install-steps li > span:nth-child(2) { flex: 1; }
.install-step-number { width: 28px; height: 28px; border-radius: 50%; background: var(--c-text); color: var(--c-background); font-weight: 700; font-size: .875rem; display: grid; place-items: center; flex-shrink: 0; }
.install-step-icon { display: grid; }
.install-step-icon.is-share { color: #0a63d1; }
.install-sheet form { display: flex; }
.install-steps small { display: block; color: var(--c-text-secondary); font-size: .8125rem; }
/* Safari ab 26: Die Adressleiste schwebt unten über der Seite; Leiste und Anleitung bleiben darüber frei. */
.is-ios-floating-bar .install-bar { bottom: calc(84px + env(safe-area-inset-bottom)); }
.is-ios-floating-bar .install-sheet { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.site-footer [data-install-link] { display: inline-flex; gap: 6px; align-items: center; }
.site-footer [data-install-link][hidden] { display: none; }
.install-sheet-close { flex: 1; justify-content: center; min-height: 50px; background: var(--c-text); color: var(--c-background); }

/* Offline-Seite */
.offline-page { max-width: 560px; margin: 0 auto; padding: 48px 16px 64px; }
.offline-icon { color: var(--c-text-secondary); display: block; margin-bottom: 12px; }

/* Fehlerseite (404) */
.error-page { display: grid; gap: 16px; }
.error-page .display-l { margin: 0; }
.error-page > p { margin: 0; }
.error-code { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .1em; color: var(--c-text-secondary); }
.error-page .search { grid-area: auto; max-width: none; width: 100%; height: 50px; }
.error-page .actions { margin: 0; padding: 0; border: 0; }

/* Suche: Gruppen mit Trefferzahl */
.search-group { margin-top: 36px; display: grid; gap: 14px; }
.search-group .heading-section { margin: 0; }
.search-count { font-size: .55em; font-weight: 700; color: var(--c-text-secondary); vertical-align: middle; margin-left: 6px; }