/* components.css — Molekuele
 * v0.14.0 — 2026-05-28 — Phase 19a+ legal-shell volle Container-Breite + Inhalt-Begrenzung 760px + Top-Margin
 * v0.13.0 — 2026-05-28 — Phase 19a+ .prose Lesetypo + .legal-shell (Karten-Container für System-Seiten)
 * v0.12.0 — 2026-05-26 — Phase 15.E+F DNA-Streifen, Skalierer, Block-Architektur mit Hinweis-Pillen
 * v0.11.0 — 2026-05-26 — Phase 15.D Aufraeumen (Sterne raus, Karten weiß, Foot mit Rating-Fliesstext)
 * v0.10.0 — 2026-05-26 — Phase 15.C.2 Portal-Pivot (Action-Grid, BestOf-Featured, Smart-Tip, Section-Head-Icon, prose-2col)
 * v0.9.0 — 2026-05-26 — Phase 15.C.1 Region-Hero mit Bild + Attribution-Pill
 * v0.8.0 — 2026-05-26 — Phase 15.B Region-Polish (Topic-Tiles, kompakte Wetter, Sterne zurück in Cards)
 * v0.7.0 — 2026-05-26 — Phase 15.A Region-Page (Hero, Intro, Audit-Sections, Persona-Chips, Premium-Badge)
 * v0.6.0 — 2026-05-26 — Phase 14.G Google-Review-Card (klickbar, external link)
 * v0.5.0 — 2026-05-26 — Phase 14.E Card-Polish (Pattern-Pool + komplette bg-cat-Liste)
 * v0.4.0 — 2026-05-26 — Wizard / Forecast / Lazy-Skeleton / Drawer-Nav
 * v0.3.0 — 2026-05-26 — Standort-Profil (Quickfacts, Öffnungszeiten-Card, Nearby-Cards, Sources, Social)
 * v0.2.0 — 2026-05-25 — Wizard (Eintrag-Anlage Phase 4.x) + Premium-Lock + Visibility-Form
 * Hier KEINE Hex-Werte. Importiert: tokens.css + main.css.
 */

/* ─── NavBar ───────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  height: var(--nav-h);
  display: flex; align-items: center;
}
.nav__inner {
  width: 100%; max-width: var(--container-max); margin-inline: auto;
  padding-inline: var(--sp-6);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6);
}
.nav__logo img { height: 44px; width: auto; object-fit: contain; }
.nav__links { display: flex; gap: 2px; align-items: center; }
.nav__link {
  padding: 7px var(--sp-4); border-radius: var(--r-sm);
  font-size: var(--fs-body); font-weight: 500; color: var(--c-muted);
  transition: color var(--tr-fast), background var(--tr-fast);
}
.nav__link:hover, .nav__link.is-active { color: var(--c-navy); background: var(--c-lime-light); }
.nav__cta-group { display: flex; gap: var(--sp-2); align-items: center; }
.nav__icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-md); color: var(--c-muted); transition: background var(--tr-fast), color var(--tr-fast); }
.nav__icon-btn:hover { background: var(--c-lime-light); color: var(--c-navy); }

/* Hamburger (Mobile) */
.nav__hamburger { display: none; width: 40px; height: 40px; background: none; border: none; cursor: pointer; padding: 8px; flex-direction: column; justify-content: space-between; }
.nav__hamburger span { display: block; height: 2px; background: var(--c-navy); border-radius: var(--r-pill); transition: transform var(--tr-base), opacity var(--tr-base); }
.nav__hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__hamburger.is-open span:nth-child(2) { opacity: 0; }
.nav__hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Phase 19c/2026-05-31 v14: Mobile-Layout neu.
 * Reihenfolge (von rechts nach links): Hamburger - Avatar (klein) - Suche-Lupe.
 * Admin-Pill / Konto-Button (.nav__desktop-only) Mobile aus.
 */
@media (max-width: 768px) {
  .nav__links { display: none; }
  /* Suche-Lupe Mobile sichtbar (vorher hidden) */
  .nav__icon-btn { display: inline-flex; }
  .nav__hamburger { display: flex; }
  /* Phase 19c/2026-05-31 v16: CTA-Group rechts an Hamburger ranschieben.
   * Vorher justify-content:space-between verteilte CTA mittig. */
  .nav__inner { padding-inline: var(--sp-4); gap: var(--sp-2); }
  .nav__cta-group { margin-left: auto; gap: var(--sp-1); }
  /* Admin/Konto-Pill nur Desktop */
  .nav__desktop-only { display: none; }
  /* Avatar Mobile auf Icon-Größe, Pill-Border weg */
  .nav__avatar {
    width: 36px; height: 36px;
    padding: 0; border-radius: 50%;
    border: none; background: var(--c-navy);
    color: var(--c-white);
    justify-content: center;
  }
  .nav__avatar:hover { background: var(--c-navy-dark); }
  .nav__avatar-initial { width: 100%; height: 100%; background: none;
                          font-size: var(--fs-body-s); color: var(--c-white); }
  .nav__avatar-name { display: none; }
  /* Gast-Avatar (User nicht eingeloggt) als Icon-Btn ohne Hintergrund */
  .nav__avatar--guest { background: none; color: var(--c-muted);
                         border-radius: var(--r-md); }
}
/* Desktop: Gast-Lupe-Icon kompakt versteckt (wir haben den vollen "Konto"-Pill) */
@media (min-width: 769px) {
  .nav__avatar--guest { display: none; }
}

/* Mobile-Drawer (Slide-In von rechts) */
.nav-drawer-backdrop { position: fixed; inset: 0; background: var(--c-overlay-backdrop); z-index: calc(var(--z-overlay) - 1); animation: fade-in var(--tr-base); }
.nav-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 86%; max-width: 320px; background: var(--c-surface); z-index: var(--z-overlay); display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--tr-base); box-shadow: var(--sh-lg); overflow-y: auto; }
.nav-drawer:not([hidden]) { transform: translateX(0); }
.nav-drawer__head { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--c-border); }
.nav-drawer__head strong { color: var(--c-navy); font-size: var(--fs-h4); }
.nav-drawer__links { display: flex; flex-direction: column; padding: var(--sp-3) 0; }
.nav-drawer__link { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5); color: var(--c-text); font-weight: 600; font-size: var(--fs-body); transition: background var(--tr-fast), color var(--tr-fast); }
.nav-drawer__link:hover, .nav-drawer__link.is-active { background: var(--c-lime-light); color: var(--c-navy); }
.nav-drawer__divider { height: 1px; background: var(--c-border); margin: var(--sp-3) var(--sp-5); }
.nav-drawer__link--cta { margin: var(--sp-3) var(--sp-5); padding: var(--sp-3) var(--sp-4); background: var(--c-lime); color: var(--c-navy); border-radius: var(--r-md); font-weight: 800; justify-content: center; }
.nav-drawer__link--cta:hover { background: var(--c-lime-dark); color: var(--c-surface); }
@keyframes fade-in { from { opacity: 0 } to { opacity: 1 } }

/* ─── Hero ─────────────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden;
  background: var(--c-hero-bg);
  background-image:
    radial-gradient(circle at 15% 20%, var(--c-overlay-white-04) 0, transparent 40%),
    radial-gradient(circle at 85% 80%, var(--c-overlay-lime-06) 0, transparent 50%);
  color: var(--c-white);
  padding-block: var(--sp-11) var(--sp-10);
  text-align: center;
  /* Phase 19c/2026-05-31: visueller Cut nach unten, damit der
     darunter folgende Wetter-Balken (insb. rainy) sich klar abhebt. */
  border-bottom: 3px solid var(--c-lime);
}
.hero__pill {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 6px var(--sp-4); border-radius: var(--r-pill);
  background: var(--c-overlay-lime-18); color: var(--c-lime-light);
  font-size: var(--fs-body-s); font-weight: 700; letter-spacing: var(--ls-tag);
  text-transform: uppercase; border: 1px solid var(--c-overlay-lime-35);
  margin-bottom: var(--sp-6);
}
.hero__pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-lime); display: inline-block; }
.hero__title { font-size: var(--fs-display); font-weight: 900; letter-spacing: var(--ls-tight); color: var(--c-white); max-width: 18ch; margin-inline: auto; }
.hero__title .accent { color: var(--c-lime); display: block; }
.hero__sub { margin-top: var(--sp-5); font-size: var(--fs-body-l); color: var(--c-overlay-white-78); max-width: 56ch; margin-inline: auto; line-height: var(--lh-loose); }
.hero__search { margin-top: var(--sp-8); display: flex; justify-content: center; }
.hero__poptags { margin-top: var(--sp-5); display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; align-items: center; }
.hero__poptags-label { font-size: var(--fs-body-s); color: var(--c-overlay-white-55); margin-right: var(--sp-1); }
.hero__poptag {
  padding: 5px var(--sp-3); border-radius: var(--r-pill);
  background: var(--c-overlay-white-10); color: var(--c-overlay-white-85);
  font-size: var(--fs-body-s); border: 1px solid var(--c-overlay-white-18);
  transition: background var(--tr-fast);
}
.hero__poptag:hover { background: var(--c-overlay-white-18); color: var(--c-white); }

@media (max-width: 768px) {
  .hero { padding-block: var(--sp-9) var(--sp-8); }
  .hero__title { font-size: 2.25rem; }
  .hero__sub { font-size: var(--fs-body); }
}

/* ─── Search Bar (Hero) ────────────────────────────────────────── */
.search {
  display: flex; align-items: stretch;
  background: var(--c-surface); border-radius: var(--r-2xl);
  box-shadow: var(--sh-lg);
  overflow: hidden;
  max-width: 780px; width: 100%;
}
.search__field { flex: 2.2; position: relative; display: flex; align-items: center; min-width: 0; }
.search__field--where { flex: 1.6; }
.search__field input {
  border: none; outline: none; background: transparent; width: 100%;
  padding: 18px var(--sp-4) 18px 48px;
  font-size: var(--fs-body); color: var(--c-text);
}
.search__field--where input { padding-right: 44px; }
.search__divider { width: 1px; background: var(--c-border); margin-block: var(--sp-3); flex-shrink: 0; }
.search__icon { position: absolute; left: 18px; color: var(--c-lime-dark); display: inline-flex; }
.search__icon--muted { color: var(--c-muted); }
.search__locate { position: absolute; right: var(--sp-2); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--r-sm); color: var(--c-light); transition: color var(--tr-fast); }
.search__locate:hover { color: var(--c-lime-dark); }
.search__radius { display: flex; align-items: center; padding-inline: var(--sp-3); flex-shrink: 0; }
.search__radius select { border: none; background: transparent; color: var(--c-text); font-size: var(--fs-body); cursor: pointer; padding-block: 4px; }
.search__submit {
  background: var(--c-lime); color: var(--c-navy);
  padding: 0 var(--sp-7); font-size: var(--fs-body); font-weight: 800;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-width: 120px; flex-shrink: 0;
  transition: background var(--tr-fast);
}
.search__submit:hover { background: var(--c-lime-dark); color: var(--c-white); }

/* Compact Variante */
.search--compact { box-shadow: 0 0 0 1px var(--c-border), var(--sh-md); border-radius: var(--r-lg); }
.search--compact .search__field input { padding: 11px var(--sp-3) 11px 36px; font-size: var(--fs-body-s); }
.search--compact .search__icon { left: 13px; }
.search--compact .search__submit { padding: 0 var(--sp-5); font-size: var(--fs-body-s); }
.search--compact .search__divider { margin-block: var(--sp-2); }

@media (max-width: 768px) {
  .search { flex-direction: column; border-radius: var(--r-xl); }
  .search__divider { width: auto; height: 1px; margin-block: 0; margin-inline: var(--sp-4); }
  .search__field input { padding-block: 14px; }
  .search__radius { padding: 0 var(--sp-4) var(--sp-2); }
  .search__submit { padding: var(--sp-3) var(--sp-4); justify-content: center; }
}

/* ─── Weather Banner ───────────────────────────────────────────── */
.weather-banner {
  padding: var(--sp-3) var(--sp-6);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  flex-wrap: wrap;
}
.weather-banner__inner {
  width: 100%; max-width: var(--container-max); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
}
.weather-banner__msg { display: flex; align-items: center; gap: var(--sp-3); }
.weather-banner__icon { display: inline-flex; }
.weather-banner__label { font-size: var(--fs-body); font-weight: 700; }
.weather-banner__sub { font-size: var(--fs-body-s); opacity: 0.85; }
.weather-banner--sunny  { background: var(--g-weather-sunny);  color: var(--c-weather-sunny-text); }
.weather-banner--cloudy { background: var(--g-weather-cloudy); color: var(--c-white); }
.weather-banner--rainy  { background: var(--g-weather-rainy);  color: var(--c-white); }
.weather-banner--snowy  { background: var(--g-weather-snowy);  color: var(--c-navy); }
.weather-banner--storm  { background: var(--g-weather-storm);  color: var(--c-white); }
.weather-banner__cta {
  padding: 6px var(--sp-4); border-radius: var(--r-pill);
  font-size: var(--fs-body-s); font-weight: 700;
  background: var(--c-overlay-dark-12); border: 1px solid var(--c-overlay-dark-18); color: inherit;
  transition: background var(--tr-fast);
}
.weather-banner--cloudy .weather-banner__cta,
.weather-banner--rainy  .weather-banner__cta,
.weather-banner--storm  .weather-banner__cta { background: var(--c-overlay-white-25); border-color: var(--c-overlay-white-40); color: var(--c-white); }
.weather-banner--snowy .weather-banner__cta { background: var(--c-overlay-dark-12); border-color: var(--c-overlay-dark-18); color: var(--c-navy); }
.weather-banner__cta:hover { filter: brightness(1.1); }

/* ─── Season Banner ────────────────────────────────────────────── */
.season-banner {
  padding: var(--sp-3) var(--sp-6);
  color: var(--c-white);
}
.season-banner__inner {
  width: 100%; max-width: var(--container-max); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
}
.season-banner__label { font-size: var(--fs-body); font-weight: 700; }
.season-banner__sub { font-size: var(--fs-body-s); opacity: 0.9; }
.season-banner__items { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.season-banner__item {
  padding: 6px var(--sp-4); border-radius: var(--r-pill);
  background: var(--c-overlay-white-18); color: var(--c-white);
  font-size: var(--fs-body-s); font-weight: 600;
  border: 1px solid var(--c-overlay-white-30);
  transition: background var(--tr-fast);
}
.season-banner__item:hover { background: var(--c-overlay-white-32); }
.season-banner--frühling { background: var(--g-season-spring); }
.season-banner--sommer    { background: var(--g-season-summer); }
.season-banner--herbst    { background: var(--g-season-autumn); }
.season-banner--winter    { background: var(--g-season-winter); }

/* ─── Section ──────────────────────────────────────────────────── */
.section-head { margin-bottom: var(--sp-6); }
.section-head__title { font-size: var(--fs-h2); font-weight: 800; color: var(--c-text); }
.section-head__sub   { color: var(--c-muted); margin-top: var(--sp-1); }

/* ─── Category Tile ────────────────────────────────────────────── */
.cat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-3); }
@media (max-width: 1024px) { .cat-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px)  { .cat-grid { grid-template-columns: repeat(2, 1fr); } }

.cat-tile {
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-2xl);
  padding: var(--sp-5) var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3);
  text-align: left; cursor: pointer; color: inherit;
  transition: transform var(--tr-base), box-shadow var(--tr-base), border-color var(--tr-base);
  box-shadow: var(--sh-md);
}
.cat-tile:hover { transform: translateY(-3px); border-color: var(--c-navy); box-shadow: var(--sh-tile-hover); }
.cat-tile.is-active { border-color: var(--c-navy); border-width: 2px; }
.cat-tile.is-active .cat-tile__label { color: var(--c-navy); }
.cat-tile__icon {
  width: 44px; height: 44px; border-radius: var(--r-lg);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-white); flex-shrink: 0;
}
.cat-tile__label { font-size: var(--fs-body); font-weight: 700; color: var(--c-text); margin-bottom: 3px; }
.cat-tile__count { font-size: var(--fs-body-s); color: var(--c-muted); }

/* ─── Destination Card ─────────────────────────────────────────── */
/* Phase 21/2026-06-01: Masonry via CSS Multi-Column.
   Cards behalten ihre natuerliche Hoehe (mit/ohne Bild), Nachbar-Cards werden
   NICHT vertikal gestreckt. Native Browser-Unterstuetzung breit, kein JS. */
/* Phase 25/2026-06-02 v2: column-count zurueck (Masonry). Die
   richtige Lesereihenfolge stellt app.js per masonryReorder() her,
   indem Cards column-major umsortiert werden. */
.dest-grid { column-count: 3; column-gap: var(--sp-4); }
.dest-grid > * { break-inside: avoid; -webkit-column-break-inside: avoid;
                 margin-bottom: var(--sp-4); display: inline-block; width: 100%; }
@media (max-width: 1024px) { .dest-grid { column-count: 2; } }
@media (max-width: 640px)  { .dest-grid { column-count: 1; } }

.dest-card {
  display: flex; flex-direction: column;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-3xl);
  overflow: hidden; cursor: pointer; color: inherit;
  transition: transform var(--tr-base), box-shadow var(--tr-base);
  box-shadow: var(--sh-md);
}
.dest-card:hover { transform: translateY(-4px); box-shadow: var(--sh-card-hover); }
.dest-card__badge-l { display: flex; gap: 4px; flex-wrap: wrap; }
.dest-card__foot { justify-content: space-between; align-items: center; }
.dest-card__rating { font-size: var(--fs-body-s); color: var(--c-muted);
  display: inline-flex; align-items: center; gap: 6px; }
.dest-card__rating-src { font-size: 11px; }
/* Phase 25/2026-06-02: Favoriten-Meta in der Card (Hinzugefuegt am ...) */
.dest-card__meta {
  padding: 0 var(--sp-4) var(--sp-3) var(--sp-4);
  margin-top: -2px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-body-s); color: var(--c-muted);
}
.dest-card__photo { position: relative; aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.dest-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dest-card__photo::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(45deg, var(--c-overlay-white-03) 0, var(--c-overlay-white-03) 1px, transparent 0, transparent 50%); background-size: 8px 8px; pointer-events: none; }
.dest-card__photo-label { font-family: var(--font-mono); font-size: var(--fs-tag); color: var(--c-overlay-white-40); letter-spacing: var(--ls-tag); text-transform: uppercase; z-index: 1; }
.dest-card__badge-l { position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: 2; }
.dest-card__badge-r { position: absolute; top: var(--sp-3); right: var(--sp-3); z-index: 2; }
.dest-card__fav {
  position: absolute; bottom: var(--sp-3); right: var(--sp-3); z-index: 2;
  width: 32px; height: 32px; border-radius: var(--r-full);
  background: var(--c-overlay-white-85); color: var(--c-muted);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--tr-fast), color var(--tr-fast);
}
.dest-card__fav:hover, .dest-card__fav.is-saved { background: var(--c-lime); color: var(--c-white); }
/* Phase 25/2026-06-02: Inline-Variante fuer Karten ohne Foto (im Head). */
.dest-card__fav--inline { position: static; flex-shrink: 0;
  width: 28px; height: 28px; background: var(--c-bg-soft); }
.dest-card__body { padding: var(--sp-4); flex: 1; display: flex; flex-direction: column; gap: var(--sp-2); }
.dest-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-2); }
.dest-card__cat  { font-size: var(--fs-tag); font-weight: 700; letter-spacing: var(--ls-tag); text-transform: uppercase; color: var(--c-lime-dark); }
.dest-card__title { font-size: var(--fs-body); font-weight: 700; color: var(--c-text); line-height: var(--lh-snug); }
.dest-card__tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-1); }
.dest-card__foot { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--c-border); display: flex; justify-content: flex-end; }
.dest-card__more { font-size: var(--fs-body-s); font-weight: 600; color: var(--c-light); display: inline-flex; align-items: center; gap: 3px; transition: color var(--tr-fast); }
.dest-card:hover .dest-card__more { color: var(--c-navy); }

/* Kategorie-Gradient als Modifier-Klassen */
.bg-cat--ausflugsziele       { background: var(--g-cat-ausflug); }
.bg-cat--wandern-natur       { background: var(--g-cat-natur); }
.bg-cat--restaurants         { background: var(--g-cat-restaurant); }
.bg-cat--gastronomie         { background: var(--g-cat-restaurant); }
.bg-cat--hotels              { background: var(--g-cat-hotel); }
.bg-cat--cafés               { background: var(--g-cat-cafe); }
.bg-cat--kinder              { background: var(--g-cat-kinder); }
.bg-cat--indoor              { background: var(--g-cat-indoor); }
.bg-cat--sehenswuerdig       { background: var(--g-cat-sehenswuerdigkeit); }
.bg-cat--sehenswuerdigkeiten { background: var(--g-cat-sehenswuerdigkeit); }
.bg-cat--aktivitaeten        { background: var(--g-cat-ausflug); }
.bg-cat--dienstleister       { background: var(--g-cat-indoor); }
.bg-cat--einzelhandel        { background: var(--g-cat-cafe); }
.bg-cat--mobilitaet          { background: var(--g-cat-indoor); }
.bg-cat--wellness            { background: var(--g-cat-sehenswuerdigkeit); }
.bg-cat--gesundheit          { background: var(--g-cat-natur); }
.bg-cat--handwerk            { background: var(--g-cat-restaurant); }
.bg-cat--sonstiges           { background: var(--g-cat-indoor); }

/* Pattern-Pool für Foto-Platzhalter (Phase 14.E).
   4 Varianten, deterministisch via entry.id % 4 zugeordnet.
   Greift nur wenn kein image_url vorhanden (Inline-Style ueberschreibt). */
.dest-card__photo--pattern-0::after,
.dest-card__photo--pattern-1::after,
.dest-card__photo--pattern-2::after,
.dest-card__photo--pattern-3::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
}
.dest-card__photo--pattern-0::after {
  background-image: radial-gradient(var(--c-overlay-white-13) 1.6px, transparent 1.6px);
  background-size: 18px 18px;
}
.dest-card__photo--pattern-1::after {
  background-image: repeating-linear-gradient(45deg,
    var(--c-overlay-white-09) 0 2px, transparent 2px 22px);
}
.dest-card__photo--pattern-2::after {
  background-image:
    radial-gradient(circle at 25% 30%, var(--c-overlay-white-10) 0 18%, transparent 19%),
    radial-gradient(circle at 75% 70%, var(--c-overlay-white-10) 0 22%, transparent 23%),
    radial-gradient(circle at 50% 50%, var(--c-overlay-white-06) 0 12%, transparent 13%);
  background-size: 180px 180px;
}
.dest-card__photo--pattern-3::after {
  background-image:
    linear-gradient(var(--c-overlay-white-08) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-overlay-white-08) 1px, transparent 1px);
  background-size: 26px 26px;
}
.dest-card__photo[style] {
  /* Wenn image_url als Inline-BG gesetzt ist, Pattern unterdruecken. */
}
.dest-card__photo[style]::after { display: none; }
.dest-card__photo[style]::before { display: none; }

/* ─── Filter Chips ─────────────────────────────────────────────── */
.chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.chip {
  background: var(--c-surface); color: var(--c-text);
  border: 1px solid var(--c-border); border-radius: var(--r-pill);
  padding: 6px var(--sp-4); font-size: var(--fs-body-s); font-weight: 500;
  transition: all var(--tr-fast);
}
.chip:hover { border-color: var(--c-navy); }
.chip.is-active { background: var(--c-navy); color: var(--c-white); border-color: var(--c-navy); font-weight: 700; }

/* ─── Footer ───────────────────────────────────────────────────── */
.footer {
  background: var(--c-navy); color: var(--c-overlay-white-70);
  padding-block: var(--sp-10) var(--sp-6);
  margin-top: var(--sp-11);
}
.footer__inner { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--sp-7); }
@media (max-width: 768px) { .footer__inner { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }
.footer__brand img { height: 48px; background: var(--c-white); border-radius: var(--r-md); padding: 4px 8px; margin-bottom: var(--sp-3); }
.footer__claim { font-size: var(--fs-body-s); line-height: var(--lh-base); opacity: 0.7; }
.footer__col-title { color: var(--c-white); font-size: var(--fs-body); font-weight: 800; margin-bottom: var(--sp-3); }
.footer__col-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); }
.footer__col-list a { font-size: var(--fs-body-s); color: var(--c-overlay-white-65); transition: color var(--tr-fast); }
.footer__col-list a:hover { color: var(--c-lime); }
.footer__bottom { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--c-overlay-white-10); display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; font-size: var(--fs-body-s); opacity: 0.55; }

/* ─── NavBar: User-Avatar (Phase 3) ────────────────────────────── */
.nav__avatar { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 4px var(--sp-3) 4px 4px; border-radius: var(--r-pill); border: 1px solid var(--c-border); transition: background var(--tr-fast); text-decoration: none; color: inherit; }
.nav__avatar:hover { background: var(--c-lime-light); }
.nav__avatar-initial {
  width: 28px; height: 28px; border-radius: var(--r-full);
  background: var(--c-navy); color: var(--c-white);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: var(--fs-body-s);
}
.nav__avatar-name { font-size: var(--fs-body-s); font-weight: 600; color: var(--c-text); }
@media (max-width: 640px) { .nav__avatar-name { display: none; } }

/* ─── Auth-Shell ───────────────────────────────────────────────── */
.auth-shell {
  min-height: calc(100vh - var(--nav-h));
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-9) var(--sp-4);
  background: linear-gradient(180deg, var(--c-bg) 0%, color-mix(in oklch, var(--c-bg) 60%, var(--c-lime-light)) 100%);
}
.auth-card {
  width: 100%; max-width: 460px;
  background: var(--c-surface);
  border-radius: var(--r-3xl);
  box-shadow: var(--sh-lg);
  padding: var(--sp-8) var(--sp-7) var(--sp-7);
  display: flex; flex-direction: column; gap: var(--sp-5);
}
.auth-card__head { text-align: center; }
.auth-card__title { font-size: var(--fs-h2); font-weight: 800; color: var(--c-text); margin-bottom: var(--sp-2); }
.auth-card__sub { font-size: var(--fs-body); color: var(--c-muted); line-height: var(--lh-base); }
.auth-card__body { display: flex; flex-direction: column; gap: var(--sp-4); }
.auth-card__foot { text-align: center; font-size: var(--fs-body-s); color: var(--c-muted); padding-top: var(--sp-4); border-top: 1px solid var(--c-border); }
.auth-card__hero-icon {
  width: 80px; height: 80px; border-radius: var(--r-full);
  background: var(--c-lime-light); color: var(--c-lime-dark);
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0 auto;
}
.auth-card__hero-icon--error { background: var(--c-error-bg); color: var(--c-error); }

/* ─── Shell (Account + Admin 2-Spalten) ────────────────────────── */
.shell { padding-block: var(--sp-7) var(--sp-10); min-height: calc(100vh - var(--nav-h)); }
.shell__inner { display: grid; grid-template-columns: 240px 1fr; gap: var(--sp-7); align-items: start; }
@media (max-width: 900px) { .shell__inner { grid-template-columns: 1fr; } .shell__side { position: static; } }

/* Phase 21/2026-06-01: Mobile-Collapse fuer Konto-Sidebar.
   Desktop ≥901px: summary versteckt, Nav immer sichtbar (Details verhaelt
   sich wie normaler Container). Mobile <901px: <details> default zu,
   summary klickbar mit Chevron, Nav nur sichtbar wenn open. */
.shell__side-collapse > summary { list-style: none; cursor: pointer; }
.shell__side-collapse > summary::-webkit-details-marker { display: none; }
.shell__side-toggle { display: none; margin-left: auto; transition: transform var(--tr-fast); }
.shell__side-head__info { flex: 1; min-width: 0; }
@media (min-width: 901px) {
  /* Auf Desktop: Toggle versteckt, Nav immer offen, Cursor normal. */
  .shell__side-collapse > summary { cursor: default; }
  .shell__side-collapse > .shell__nav { display: flex !important; }
}
@media (max-width: 900px) {
  .shell__side-toggle { display: inline-flex; color: var(--c-muted); }
  .shell__side-collapse[open] .shell__side-toggle { transform: rotate(180deg); }
  .shell__side-collapse:not([open]) .shell__side-head {
    border-bottom: 0; margin-bottom: 0;
  }
}

.shell__side {
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-2xl);
  padding: var(--sp-5) var(--sp-3) var(--sp-3);
  position: sticky; top: calc(var(--nav-h) + var(--sp-4));
}
/* Phase 24/2026-06-01: Mobile-Override gegen die obige sticky-Default-Regel.
   Source-Order: muss NACH der Default-Definition stehen, sonst gewinnt
   die Default-Regel und die Sidebar klebt auch auf dem iPhone oben. */
@media (max-width: 900px) {
  .shell__side {
    position: static;
    top: auto;
    margin-bottom: var(--sp-4);
  }
}
.shell--admin .shell__side { background: var(--c-navy); border-color: var(--c-navy-dark); color: var(--c-overlay-white-78); }
.shell--admin .shell__nav-link { color: var(--c-overlay-white-65); }
.shell--admin .shell__nav-link:hover, .shell--admin .shell__nav-link.is-active { background: var(--c-overlay-lime-18); color: var(--c-lime); }
.shell--admin .shell__nav-sep { border-color: var(--c-overlay-white-10); }
.shell--admin .shell__side-head { border-bottom-color: var(--c-overlay-white-10); }

.shell__side-head { display: flex; gap: var(--sp-3); align-items: center; padding: 0 var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-border); margin-bottom: var(--sp-3); }
.shell__avatar {
  width: 40px; height: 40px; border-radius: var(--r-full);
  background: var(--c-navy); color: var(--c-white);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; flex-shrink: 0;
}
.shell__user-name { font-size: var(--fs-body); font-weight: 700; color: var(--c-text); line-height: 1.2; }
.shell__user-mail { font-size: var(--fs-tag); color: var(--c-muted); }

.shell__nav { display: flex; flex-direction: column; gap: 2px; }
.shell__nav form { display: flex; }
.shell__nav-link {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); border-radius: var(--r-md);
  font-size: var(--fs-body); font-weight: 500; color: var(--c-muted);
  text-align: left; width: 100%;
  transition: background var(--tr-fast), color var(--tr-fast);
  text-decoration: none; background: none; border: none; cursor: pointer; font-family: var(--font);
}
.shell__nav-link:hover { background: var(--c-lime-light); color: var(--c-navy); }
.shell__nav-link.is-active { background: var(--c-lime-light); color: var(--c-navy); font-weight: 700; }
.shell__nav-link--logout { color: var(--c-error); }
.shell__nav-link--admin { color: var(--c-navy); font-weight: 700; }
.shell__nav-sep { border: none; border-top: 1px solid var(--c-border); margin: var(--sp-2) 0; }

.shell__main { min-width: 0; }
.shell__head { margin-bottom: var(--sp-6); }
.shell__head .h2 { margin-bottom: var(--sp-1); }
/* Phase 29/2026-06-03: 2. Sektion im selben Page-Body mit Abstand zum vorigen Block. */
.shell__head--gap { margin-top: var(--sp-6); }
/* Flex-Variante mit Pill rechts (Stand/Aktualisiert-Anzeige etc.). */
.shell__head--row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.shell__head--row > .h3 { margin: 0; }

/* Phase 29/2026-06-03: Stat-Card Status-Modifier (universell, wiederverwendbar). */
.stat-card--progress { border-left: 4px solid var(--c-warning); }
.stat-card--ready    { border-left: 4px solid var(--c-lime-dark); }
.stat-card--review   { border-left: 4px solid var(--c-error); }
.stat-card--done     { border-left: 4px solid var(--c-navy); }
.stat-card--muted    { border-left: 4px solid var(--c-border); }
.stat-card--hero     { background: var(--c-lime-light); }
.stat-card--hero .stat-card__num   { font-size: 2.6rem; }
.stat-card--hero .stat-card__label { font-weight: 700; color: var(--c-navy); }

/* Phase 29/2026-06-03: Sub-Gruppen-Headlines im Worker-02-Block. */
.w02-group__title { font-size: var(--fs-body-s); font-weight: 700; color: var(--c-muted); margin: var(--sp-4) 0 var(--sp-2); text-transform: uppercase; letter-spacing: 0.06em; }

/* Phase 29/2026-06-03: Worker-02-Status-Aufklapper. */
.w02-breakdown { margin-top: var(--sp-4); }
.w02-breakdown__table { margin-top: var(--sp-2); width: 100%; }
.w02-breakdown__table code { font-size: 0.92em; color: var(--c-navy); }

/* Phase 32/2026-06-03: Scout-Performance-Tabelle (24 Spalten x N Hosts). */
.scout-table-wrap { overflow-x: auto; margin-top: var(--sp-3); }
.scout-table { min-width: 100%; }
.scout-table th, .scout-table td { padding: 4px 8px; white-space: nowrap; }
.scout-cell { display: inline-flex; gap: var(--sp-1); }

/* ─── Stats-Grid (Dashboard) ───────────────────────────────────── */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-3); }
.stat-card {
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl);
  padding: var(--sp-4) var(--sp-5);
  text-align: left; color: inherit; text-decoration: none;
  transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
  display: block;
}
a.stat-card:hover { border-color: var(--c-navy); box-shadow: var(--sh-md); }
.stat-card__num { font-size: 2rem; font-weight: 900; color: var(--c-navy); letter-spacing: var(--ls-tight); line-height: 1; }
.stat-card__label { font-size: var(--fs-body-s); color: var(--c-muted); margin-top: var(--sp-1); }

/* ─── Steps (2FA-Setup) ────────────────────────────────────────── */
.steps { list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: var(--sp-6); }
.steps > li { counter-increment: step; position: relative; padding-left: 44px; }
.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 32px; height: 32px; border-radius: var(--r-full);
  background: var(--c-lime); color: var(--c-navy);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: var(--fs-body);
}
.steps .h4 { margin-bottom: var(--sp-2); }

.qr-block { display: flex; gap: var(--sp-5); align-items: center; flex-wrap: wrap; }
.qr-block img { background: var(--c-white); padding: var(--sp-2); border-radius: var(--r-lg); border: 1px solid var(--c-border); }
.code-block { background: var(--c-bg); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); border: 1px solid var(--c-border); display: inline-block; font-size: var(--fs-body); letter-spacing: 1px; }

.code-list { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
.code-list li { background: var(--c-bg); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); text-align: center; font-size: var(--fs-body); letter-spacing: 2px; border: 1px dashed var(--c-border); }
@media (max-width: 480px) { .code-list { grid-template-columns: 1fr; } }

/* ─── Todo Liste ───────────────────────────────────────────────── */
.todo-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }
.todo-list li { padding-left: var(--sp-5); position: relative; color: var(--c-text); }
.todo-list li::before { content: "→"; position: absolute; left: 0; color: var(--c-lime-dark); font-weight: 800; }

/* ─── Filter-Bar (Admin) ───────────────────────────────────────── */
.filter-bar { display: flex; gap: var(--sp-4); align-items: flex-end; flex-wrap: wrap; }
.filter-bar > .field { flex: 1; min-width: 240px; }

/* ─── Pagination (Phase 21/2026-06-01: Style fuer Link/Info/Disabled) ── */
.pagination {
  display: flex; gap: var(--sp-2); align-items: center; justify-content: center;
  margin-top: var(--sp-6); flex-wrap: wrap;
}
.pagination__link {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-4);
  min-height: 44px;
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  background: var(--c-surface); color: var(--c-navy);
  font-weight: 600; font-size: var(--fs-body-s);
  text-decoration: none; line-height: 1.2;
  transition: background var(--tr-fast), border-color var(--tr-fast), color var(--tr-fast);
}
.pagination__link:hover {
  background: var(--c-lime-light); border-color: var(--c-lime);
  color: var(--c-navy);
}
.pagination__link.is-disabled {
  color: var(--c-muted); background: var(--c-bg);
  cursor: not-allowed; pointer-events: none; opacity: 0.55;
}
.pagination__info {
  padding: 0 var(--sp-3);
  color: var(--c-muted); font-size: var(--fs-body-s);
  white-space: nowrap;
}
@media (max-width: 480px) {
  .pagination__link span { display: none; }   /* Mobile: nur Pfeil-Icons */
  .pagination__link { padding: var(--sp-2) var(--sp-3); }
}

/* ─── Phase 4: Listings + Detail + Suche + Karte + Premium ─── */

/* Container-Varianten */
.container--narrow  { max-width: 760px; margin-inline: auto; padding-inline: var(--sp-6); padding-block: var(--sp-8); }
.container--listing { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--sp-6); padding-block: var(--sp-6); }

/* Page-Head (Listing-Header + andere) */
.page-head { margin-bottom: var(--sp-6); }
.page-head__title { font-size: var(--fs-h1); font-weight: 900; letter-spacing: var(--ls-tight); color: var(--c-text); margin-bottom: var(--sp-2); }
.page-head__sub { color: var(--c-muted); font-size: var(--fs-body); }
.page-head__search { margin: var(--sp-4) 0 var(--sp-6); max-width: 780px; }

/* Lead-Text */
.lead { font-size: var(--fs-body-l); color: var(--c-muted); line-height: var(--lh-loose); margin-bottom: var(--sp-6); }

/* Empty-State Variante (inline) */
.empty-state { text-align: center; padding: var(--sp-9) var(--sp-6); color: var(--c-muted); background: var(--c-surface); border: 1px dashed var(--c-border); border-radius: var(--r-2xl); margin-block: var(--sp-6); }
.empty-state a { color: var(--c-lime-dark); font-weight: 700; border-bottom: 1.5px solid var(--c-lime); }

/* Result-List (Suche) */
.result-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-4); }
.result-row { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5); display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); transition: border-color var(--tr-fast), box-shadow var(--tr-fast); }
.result-row:hover { border-color: var(--c-navy); box-shadow: var(--sh-md); }
.result-row__link { display: flex; flex-direction: column; gap: var(--sp-1); color: inherit; flex: 1; min-width: 0; }
.result-row__link strong { font-size: var(--fs-body); color: var(--c-text); font-weight: 700; }
.result-row__meta { font-size: var(--fs-body-s); color: var(--c-muted); }

/* Karte */
.map-page { padding: var(--sp-6) 0; min-height: calc(100vh - var(--nav-h) - 40px); }
.map-page__head { max-width: var(--container-max); margin: 0 auto var(--sp-5); padding-inline: var(--sp-6); }
.map-page__head h1 { font-size: var(--fs-h1); font-weight: 900; letter-spacing: var(--ls-tight); margin-bottom: var(--sp-2); }
.map-page__map { width: 100%; height: calc(100vh - 280px); min-height: 480px; border-block: 1px solid var(--c-border); }
.leaflet-container { font-family: var(--font); }
/* Leaflet-Default haben z-index 400+. Auf Mobile scrollt die Karte sonst
   über die Sticky-Nav. Container + alle internen Pane unter --z-sticky. */
.leaflet-container, .mini-map { z-index: 0; isolation: isolate; }
.leaflet-pane, .leaflet-top, .leaflet-bottom { z-index: 1; }
.leaflet-popup-pane { z-index: 2; }
.leaflet-popup-content strong { color: var(--c-navy); }
.leaflet-popup-content a { color: var(--c-lime-dark); font-weight: 700; }

/* Detail-Page */
.detail-page { display: grid; grid-template-columns: 1fr 360px; gap: var(--sp-7); padding-block: var(--sp-4) var(--sp-9); max-width: var(--container-max); margin-inline: auto; padding-inline: var(--sp-6); align-items: start; }
@media (max-width: 960px) {
  /* Mobile-Reorder: Bild -> Header -> Aktionen -> Quickfacts -> Kontakt
     -> Bewertung -> Öffnungszeiten -> Hauptcontent -> Karte -> Forecast.
     padding-inline auf der detail-page bleibt - Cards bekommen volle
     Container-Breite (sonst sind sie nur Content-breite). */
  .detail-page { display: flex; flex-direction: column; gap: var(--sp-5); align-items: stretch; padding-inline: var(--sp-4); }
  .detail-page > div, .detail-page > aside { display: contents; }
  .detail-page > div > *, .detail-page > aside > * { width: 100%; box-sizing: border-box; min-width: 0; }
  .detail-page__section { width: 100%; }
  /* Mobile-Reihenfolge v22 (2026-06-01, User-Brief):
     Hero -> Titel -> Aktionen -> Highlights -> Tipps -> Eigenschaften ->
     Text -> Kontakt -> Oeffnung -> Karte -> Bewertungs-Widget -> Wetter ->
     FAQ -> in der Naehe -> Anfahrt. Die Detail-Bewertungs-Sektion ist
     auf Mobile ausgeblendet (Widget reicht). */
  .detail-page__hero                                       { order: 1; }
  .detail-head                                             { order: 2; }
  .action-card                                             { order: 3; }
  .detail-page__section.detail-page__section--highlights   { order: 4; }
  .detail-page__section.detail-page__section--tipps        { order: 5; }
  .detail-page__section.detail-page__section--facets       { order: 6; }
  .detail-page__section.detail-page__section--description  { order: 7; }
  .quickfacts                                              { order: 8; }
  .contact-card                                            { order: 9; }
  .oh-card                                                 { order: 10; }
  .mini-map-card                                           { order: 11; }
  /* User-Korrektur 2026-06-01: unter der Karte zuerst die volle
     Bewertungs-Sektion (Google + eigene Reviews), DANN das
     "Jetzt bewerten"-Widget. */
  .detail-page__section.detail-page__section--reviews      { order: 12; }
  .rating-card                                             { order: 13; }
  .detail-page__section.detail-page__section--weather      { order: 14; }
  .detail-page__section.detail-page__section--faq          { order: 15; }
  .detail-page__section.detail-page__section--nearby       { order: 16; }
  .detail-page__section.detail-page__section--anfahrt      { order: 17; }
  .contact-form-card                                       { order: 18; }
  .detail-page__section                                    { order: 19; }
  .owner-hint             { order: 95; }
  /* Phase 27 v2/2026-06-02: Stats-Widget MUSS unten stehen — User-Brief.
     Vor allem darf es auf Mobile NICHT vor Hero/Titel rutschen. */
  .stats-card             { order: 96; }
  .sources-box            { order: 99; }
}
/* Phase 24/2026-06-01: Hero ohne fixe aspect-ratio — Bild zeigt sich
   in voller Hoehe (min 480px), Container wird ggf. hoeher.
   object-fit:contain laesst Hochformat-Fotos komplett sichtbar
   (Pillarbox links/rechts mit weichem BG). Querformat-Fotos fuellen
   voll. So bleibt das Hero immer praesent. */
/* Phase 24/2026-06-01 (final): Hero folgt der natuerlichen Bildhoehe.
   Kein min-height, kein aspect-ratio, kein Pillarbox-BG. Querformat-Bild
   ergibt niedrige Box, Hochformat-Bild ergibt hohe Box.
   max-height verhindert dass extreme Hochformate die ganze Seite fluten. */
.detail-page__hero {
  width: 100%;
  border-radius: var(--r-2xl);
  overflow: hidden;
  margin-bottom: var(--sp-5);
  position: relative;
}
.detail-page__hero img { width: 100%; height: auto; display: block; }
.detail-page__hero--placeholder::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(45deg, var(--c-overlay-white-03) 0, var(--c-overlay-white-03) 1px, transparent 0, transparent 50%); background-size: 8px 8px; pointer-events: none; }
.detail-page__hero--placeholder .dest-card__photo-label { font-family: var(--font-mono); font-size: var(--fs-tag); color: var(--c-overlay-white-55); letter-spacing: var(--ls-tag); text-transform: uppercase; position: relative; z-index: 1; }
.detail-head { margin-bottom: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.detail-page__title { font-size: var(--fs-h1); font-weight: 900; letter-spacing: var(--ls-tight); margin-top: var(--sp-2); }
.detail-page__meta { display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; color: var(--c-muted); margin-top: var(--sp-2); }
/* Mobile-Komprimierung: weniger Luft, kleinere Ueberschrift, Breadcrumb scrollt
   horizontal in eigener Zeile statt seite waagerecht zu sprengen. */
@media (max-width: 960px) {
  /* User-Brief 2026-06-03: Breadcrumb auf Mobile NICHT scrollen,
     optisch abschneiden mit Mask. Mehr Luft oben+unten. */
  .breadcrumb-wrap {
    overflow: hidden;
    padding-block: var(--sp-3);
    mask-image: linear-gradient(to right, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
  }
  .breadcrumb-wrap .breadcrumb { flex-wrap: nowrap; white-space: nowrap; font-size: var(--fs-tag); gap: var(--sp-1); }
  .detail-head { margin-bottom: var(--sp-3); gap: var(--sp-1); }
  .detail-page__title { font-size: var(--fs-h2); margin-top: 0; }
  .detail-page__meta { margin-top: var(--sp-1); gap: var(--sp-2); font-size: var(--fs-body-s); }
}
.detail-page__section { margin-bottom: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--c-border); }
/* Phase 24/2026-06-01: Beschreibung in eigener weisser Widget-Box —
   konsistent zu Kontakt/Lage/Bewertung. Kein Top-Border, kein Padding-Top. */
.detail-page__section--description {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-2xl);
  padding: var(--sp-5) var(--sp-6);
  border-top: 0;
  margin-bottom: var(--sp-5);
}
.detail-page__section--description h2 { margin-top: 0; }
.detail-page__section:first-of-type { padding-top: 0; border-top: none; }
.detail-page__section h2 { font-size: var(--fs-h3); font-weight: 700; margin-bottom: var(--sp-3); }

/* Phase 19c/2026-06-01 v19: Highlights + Tipps Desktop 2-spaltig nebeneinander.
   Mobile: Wrapper transparent (display:contents) -> innere Sections sind direkte
   Flex-Items von .detail-page und behalten ihre order-Werte (4/5). */
@media (min-width: 961px) {
  .detail-page__hl-tipps { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
  .detail-page__hl-tipps > .detail-page__section { margin-bottom: 0; }
  /* Border-Trenner zwischen den zwei Spalten weglassen, optisch leichter */
  .detail-page__hl-tipps > .detail-page__section { border-top: 1px solid var(--c-border); padding-top: var(--sp-5); }
}
@media (max-width: 960px) {
  .detail-page__hl-tipps { display: contents; }
}
/* Phase 19c/2026-06-01 v18: Sidebar scrollt normal mit (kein sticky mehr -
   User-Feedback: Sidebar darf nicht starr stehen).
   Reihenfolge: 1=Aktionen (oben), 2=Kontakt, 3=Mini-Karte, 4=Öffnungszeiten,
   5=Bewertung, 6=Inbound-Kontaktformular, 7=Owner-Hint. */
.detail-side { display: flex; flex-direction: column; gap: var(--sp-4); align-self: start; }
@media (min-width: 961px) {
  .detail-side .action-card       { order: 1; }
  .detail-side .contact-card      { order: 2; }
  .detail-side .mini-map-card     { order: 3; }
  /* Phase 27 v3/2026-06-02: Stats zwischen Lage und Bewertung — User-Brief. */
  .detail-side .stats-card        { order: 4; }
  .detail-side .oh-card           { order: 5; }
  .detail-side .rating-card       { order: 6; }
  .detail-side .contact-form-card { order: 7; }
  .detail-side .owner-hint        { order: 8; }
}

/* Action-Card auf Detailseite */
/* Aktion-Buttons: 3 Spalten x 2 Zeilen, KOMPAKTER (Phase 19c/2026-05-31 v9). */
.actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-1); }
.actions__btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: var(--sp-2) var(--sp-1); min-width: 0; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-md); cursor: pointer; transition: all var(--tr-fast); font-family: var(--font); font-size: 11px; font-weight: 600; color: var(--c-text); }
.actions__btn:hover { background: var(--c-lime-light); border-color: var(--c-lime); color: var(--c-lime-dark); }
.actions__btn.is-active { background: var(--c-lime-light); color: var(--c-lime-dark); border-color: var(--c-lime); }
.actions__btn span { line-height: 1.2; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.action-card__title { margin-bottom: var(--sp-3); }
.actions__btn--muted { color: var(--c-muted); }
.actions__btn--muted:hover { background: var(--c-error-bg); border-color: var(--c-error); color: var(--c-error); }

/* Share-Menu (klappt unter Aktionen auf) */
.share-menu { display: none; flex-direction: column; gap: 2px; margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--c-border); }
.share-menu.is-open { display: flex; }
.share-menu__item { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: none; border: none; cursor: pointer; font-family: var(--font); font-size: var(--fs-body-s); color: var(--c-text); text-align: left; text-decoration: none; transition: background var(--tr-fast); }
.share-menu__item:hover { background: var(--c-lime-light); color: var(--c-lime-dark); }

/* Inhaber-Hint (diskret, eine Zeile) */
.owner-hint { font-size: var(--fs-body-s); color: var(--c-muted); text-align: center; padding: var(--sp-2) var(--sp-3); }

/* ─── Modal (generisch — bestehende Klassen erweitert) ─── */
.modal-backdrop { position: fixed; inset: 0; background: var(--c-overlay-navy-55); z-index: var(--z-overlay); display: flex; align-items: center; justify-content: center; padding: var(--sp-4); }
.modal-backdrop[hidden] { display: none; }
.modal { background: var(--c-surface); border-radius: var(--r-2xl); box-shadow: var(--sh-lg); padding: var(--sp-7); max-width: 520px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; }
.modal h2 { font-size: var(--fs-h2); font-weight: 800; margin-bottom: var(--sp-3); color: var(--c-text); }
.modal__close { position: absolute; top: var(--sp-3); right: var(--sp-3); width: 36px; height: 36px; border-radius: var(--r-full); background: var(--c-bg); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--c-muted); transition: all var(--tr-fast); }
.modal__close:hover { background: var(--c-error-bg); color: var(--c-error); }
.modal__benefits { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-4) 0; }
.modal__benefits li { padding-left: var(--sp-5); position: relative; }
.modal__benefits li::before { content: "✓"; position: absolute; left: 0; color: var(--c-lime-dark); font-weight: 900; }
.modal__actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); justify-content: flex-end; flex-wrap: wrap; }

/* ─── Sterne-Eingabe (interaktiv mit Hover) ─── */
/* Radio-Buttons unsichtbar + Labels = Sterne. Reverse-Order via flex-direction:row-reverse für Sibling-Selector */
.star-input { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.star-input input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.star-input label { cursor: pointer; color: var(--c-border); transition: color var(--tr-fast); display: inline-flex; padding: 2px; }
.star-input label:hover, .star-input label:hover ~ label,
.star-input input[type="radio"]:checked ~ label { color: var(--c-yellow); }
.star-input input[type="radio"]:focus-visible + label { outline: 2px solid var(--c-lime-dark); outline-offset: 2px; border-radius: var(--r-sm); }

/* Display-Variante (auf Detailseite, klickbare Sterne, führt zu Modal-Open) */
.star-input--display { display: inline-flex; flex-direction: row-reverse; gap: 4px; cursor: pointer; padding: var(--sp-2) 0; }
.star-input--display span { color: var(--c-border); transition: color var(--tr-fast); padding: 2px; }
.star-input--display:hover span, .star-input--display:focus span { color: var(--c-yellow); }

/* Review-CTA-Card */
.review-cta { margin: var(--sp-4) 0; text-align: center; }
.review-cta .h4 { margin-bottom: var(--sp-2); }

/* Review-Summary */
.review-summary { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4); }

/* Google-Hint (Legacy — bleibt für Abwaertskompatibilitaet) */
.review-google-hint { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--c-border); font-style: italic; }

/* Review-Block-Titel (Sub-Heading innerhalb Bewertungen-Section) */
.review-block__title { margin-top: var(--sp-5); margin-bottom: var(--sp-3); color: var(--c-text); }
.review-block__title--google { padding-top: var(--sp-4); border-top: 1px solid var(--c-border); }

/* Google-Review-Card — klickbar, external link */
.review-google-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
  text-decoration: none; color: var(--c-text);
  transition: border-color var(--tr-fast), box-shadow var(--tr-fast), transform var(--tr-fast);
}
a.review-google-card:hover, a.review-google-card:focus-visible {
  border-color: var(--c-navy);
  box-shadow: var(--sh-tile-hover);
  transform: translateY(-1px);
}
a.review-google-card:focus-visible { outline: 2px solid var(--c-lime-dark); outline-offset: 2px; }
.review-google-card--static { cursor: default; }
.review-google-card__main { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.review-google-card__meta { font-size: var(--fs-body); color: var(--c-muted); }
.review-google-card__meta strong { color: var(--c-text); }
.review-google-card__cta {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-body-s); font-weight: 600; color: var(--c-navy);
}
a.review-google-card:hover .review-google-card__cta { color: var(--c-lime-dark); }

/* ─── Region-Page (Phase 15.A) ─────────────────────────────────── */
.region-page { padding-block: var(--sp-5); }
.region-hero {
  background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-navy-dark) 100%);
  color: var(--c-white);
  padding: var(--sp-7) var(--sp-6);
  border-radius: var(--r-2xl);
  margin-bottom: var(--sp-6);
  position: relative;
  overflow: hidden;
}
.region-hero--image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 320px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--sp-9) var(--sp-7) var(--sp-7);
}
.region-hero--image::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--c-overlay-navy-10) 0%,
              var(--c-overlay-navy-20) 45%, var(--c-overlay-navy-78) 100%);
  pointer-events: none;
}
.region-hero__overlay { position: relative; z-index: 1; }
.region-hero__title {
  font-size: var(--fs-h1); font-weight: 900; color: var(--c-white);
  margin-bottom: var(--sp-2); line-height: var(--lh-tight);
  text-shadow: 0 2px 8px var(--c-overlay-dark-25);
}
.region-hero__sub {
  color: var(--c-overlay-white-92); font-size: var(--fs-body-l);
  text-shadow: 0 1px 4px var(--c-overlay-dark-25);
}
.region-hero__attribution {
  position: absolute; bottom: var(--sp-2); right: var(--sp-3); z-index: 2;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--c-overlay-backdrop); backdrop-filter: blur(6px);
  font-size: 11px; color: var(--c-overlay-white-92);
  max-width: 60%; line-height: 1.3;
}
.region-hero__attribution a { color: var(--c-white); text-decoration: underline; }
.region-hero__attribution a:hover { color: var(--c-lime-light); }

.region-intro { margin-bottom: var(--sp-6); }
.region-intro .prose p { margin-bottom: var(--sp-3); line-height: var(--lh-loose); }
.region-intro .prose ul { margin: var(--sp-3) 0 var(--sp-3) var(--sp-5); }
.region-intro .prose li { margin-bottom: var(--sp-2); }
.region-intro__source { margin-top: var(--sp-4); color: var(--c-muted); }
.region-intro--stub { padding: var(--sp-4); background: var(--c-bg); border-radius: var(--r-lg); }

.region-section { margin-bottom: var(--sp-8); }
.region-section__title {
  font-size: var(--fs-h2); font-weight: 800; color: var(--c-text);
  margin-bottom: var(--sp-3);
}
.section-head--with-action {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4);
}

.region-section--stub .empty-state {
  padding: var(--sp-5); background: var(--c-bg);
  border: 1px dashed var(--c-border); border-radius: var(--r-lg);
}
.region-section--bestof { padding-top: var(--sp-3); }

.chips--persona { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chips--persona .chip {
  padding: var(--sp-2) var(--sp-4); background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--r-pill);
  font-size: var(--fs-body-s); font-weight: 600; color: var(--c-text);
  text-decoration: none; transition: all var(--tr-fast);
}
.chips--persona .chip:hover, .chips--persona .chip.is-active {
  background: var(--c-lime); color: var(--c-navy); border-color: var(--c-lime);
}

@media (max-width: 640px) {
  .region-hero { padding: var(--sp-5) var(--sp-4); }
  .region-hero--image { min-height: 220px; padding: var(--sp-7) var(--sp-4) var(--sp-5); }
  .region-hero__title { font-size: var(--fs-h2); }
  .region-hero__attribution { max-width: 80%; font-size: 10px; }
}

/* Topic-Tiles (Was-macht-die-Stadt-aus-Highlights) */
.topic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-3);
}
@media (max-width: 1024px) { .topic-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .topic-grid { grid-template-columns: 1fr; } }
.topic-tile {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
  transition: transform var(--tr-fast), box-shadow var(--tr-fast), border-color var(--tr-fast);
}
.topic-tile:hover { transform: translateY(-2px); box-shadow: var(--sh-tile-hover); border-color: var(--c-navy); }
.topic-tile__icon {
  width: 40px; height: 40px; border-radius: var(--r-lg);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-lime-light); color: var(--c-navy);
}
.topic-tile__title { font-size: var(--fs-h4); font-weight: 800; color: var(--c-text); }
.topic-tile__body { font-size: var(--fs-body-s); color: var(--c-muted); line-height: var(--lh-loose); }
.topic-tile__cta { margin-top: auto; font-size: var(--fs-body-s); font-weight: 600; color: var(--c-lime-dark); display: inline-flex; align-items: center; gap: var(--sp-1); }
.topic-tile:hover .topic-tile__cta { color: var(--c-navy); }
.topic-tile--linked { text-decoration: none; color: var(--c-text); cursor: pointer; }
.topic-tile--linked:hover { transform: translateY(-2px); border-color: var(--c-lime-dark); }

/* Kompakte dest-grid-Variante (4 Spalten Desktop für Region-Audit) */
.dest-grid--compact { grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
@media (max-width: 1200px) { .dest-grid--compact { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1024px) { .dest-grid--compact { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .dest-grid--compact { grid-template-columns: 1fr; } }

/* Auto-Fit-Variante — verhindert leere Spalten bei weniger Karten als Spalten.
   Genutzt in region-block: bei 2 oder 3 Karten kein "Geist-Slot" mehr. */
.dest-grid--auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-3); }

/* Wetter-Badge-Container auf Region-Page */
.region-weather-strip { padding: var(--sp-3) var(--sp-4); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); }

/* ─── Region-Page Portal-Module (Phase 15.C.2) ─────────────────── */

/* Section-Head Variante mit Icon-Box */
.section-head--with-icon { display: flex; align-items: flex-start; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.section-head--with-icon > div { flex: 1; min-width: 0; }
.section-head__icon {
  flex-shrink: 0;
  width: 48px; height: 48px; border-radius: var(--r-lg);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-lime-light); color: var(--c-navy);
  font-size: 20px; font-weight: 800;
}
.section-head__icon--sunny  { background: var(--g-weather-sunny); color: var(--c-text); }
.section-head__icon--rainy  { background: var(--g-weather-rainy); color: var(--c-white); }
.section-head__icon--cool   { background: var(--g-weather-cloudy); color: var(--c-white); }
.section-head__icon--accent { background: var(--c-lime); color: var(--c-navy); }
.section-head__icon--award  { background: var(--c-yellow); color: var(--c-text); }
.section-head__icon-emoji { font-size: 22px; }

/* Reisebericht 2-spaltig auf Desktop */
.prose--two-col { column-count: 2; column-gap: var(--sp-7); column-rule: 1px solid var(--c-border); }
.prose--two-col p { break-inside: avoid-column; margin-bottom: var(--sp-3); line-height: var(--lh-loose); }
.prose--two-col p:first-of-type::first-letter {
  float: left; font-size: 3.2em; line-height: 0.9; padding-right: 8px; padding-top: 4px;
  color: var(--c-navy); font-weight: 900;
}
@media (max-width: 768px) { .prose--two-col { column-count: 1; } }

/* Action-Grid: große Aktivitaets-Tiles je Cluster */
.action-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4);
}
@media (max-width: 1024px) { .action-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .action-grid { grid-template-columns: 1fr; } }
.action-tile {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-xl); box-shadow: var(--sh-md);
  color: var(--c-text); text-decoration: none;
  transition: transform var(--tr-fast), box-shadow var(--tr-fast), border-color var(--tr-fast);
  min-height: 96px;
}
.action-tile:hover { transform: translateY(-3px); box-shadow: var(--sh-tile-hover); border-color: var(--c-navy); }
.action-tile__icon {
  flex-shrink: 0;
  width: 56px; height: 56px; border-radius: var(--r-lg);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-navy); color: var(--c-white);
}
.action-tile--essen-trinken .action-tile__icon { background: var(--g-cat-restaurant); }
.action-tile--uebernachten  .action-tile__icon { background: var(--g-cat-hotel); }
.action-tile--ausflug       .action-tile__icon { background: var(--g-cat-ausflug); }
.action-tile--branchenbuch  .action-tile__icon { background: var(--g-cat-indoor); }
.action-tile__body { flex: 1; min-width: 0; }
.action-tile__title { font-size: var(--fs-h4); font-weight: 800; margin-bottom: 2px; }
.action-tile__meta  { font-size: var(--fs-body-s); color: var(--c-muted); }
.action-tile__cta   { flex-shrink: 0; color: var(--c-muted); transition: color var(--tr-fast), transform var(--tr-fast); }
.action-tile:hover .action-tile__cta { color: var(--c-lime-dark); transform: translateX(3px); }

/* Best-Of-Featured: 3 Karten mit Award-Header */
.bestof-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5);
}
@media (max-width: 1024px) { .bestof-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .bestof-grid { grid-template-columns: 1fr; } }
.bestof-card { position: relative; }
.bestof-card__award {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; margin-bottom: var(--sp-2);
  background: var(--c-yellow); color: var(--c-text);
  border-radius: var(--r-pill); font-size: var(--fs-body-s); font-weight: 800;
}
.bestof-card .dest-card { border: 2px solid var(--c-yellow); }

/* Wetter-Block Wrapper auf Region-Page */
.region-section--weather { padding: 0; }
.region-section--weather .weather-grid { margin-bottom: var(--sp-4); }

/* ─── Phase 15.E+F: DNA + Skalierer + Block-Architektur ──────── */

/* Hero kompakt — kleinere min-height für DNA-Page */
.region-hero--compact { min-height: 240px; padding: var(--sp-7) var(--sp-6) var(--sp-6); margin-bottom: var(--sp-3); }
@media (max-width: 640px) { .region-hero--compact { min-height: 180px; } }

/* DNA-Streifen unter dem Hero */
.dna-strip {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-5);
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}
.dna-strip__chars { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.dna-strip__meta  { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; font-size: var(--fs-body-s); color: var(--c-muted); }
.dna-strip__weather { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--c-bg); color: var(--c-text); }
.weather-tone--sunny { background: var(--g-weather-sunny); color: var(--c-text); }
.weather-tone--rainy { background: var(--g-weather-rainy); color: var(--c-white); }
.weather-tone--cool  { background: var(--g-weather-cloudy); color: var(--c-white); }

/* Charakter-Pills (Klassikerstadt etc.) */
.char-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: var(--r-pill);
  font-size: var(--fs-body-s); font-weight: 600;
  background: var(--c-bg); color: var(--c-text);
  border: 1px solid var(--c-border);
}
.char-pill--primary { background: var(--c-lime-light); color: var(--c-navy); border-color: var(--c-lime-dark); font-weight: 800; }

/* Wetter-Fold (details/summary) */
.weather-fold { margin-bottom: var(--sp-5); }
.weather-fold > summary { cursor: pointer; padding: var(--sp-2) var(--sp-3); color: var(--c-muted); font-size: var(--fs-body-s); list-style: revert; }
.weather-fold > summary:hover { color: var(--c-navy); }
.weather-fold[open] .weather-grid { margin-top: var(--sp-3); }

/* Skalierungs-Regler */
.region-scaler { margin-bottom: var(--sp-6); padding: var(--sp-4) var(--sp-5); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl); }
.region-scaler__row { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: flex-end; }
.region-scaler__field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 140px; }
.region-scaler__label { font-size: var(--fs-tag); font-weight: 700; letter-spacing: var(--ls-tag); text-transform: uppercase; color: var(--c-muted); }
.region-scaler__select { padding: 8px 10px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-bg); font-size: var(--fs-body); color: var(--c-text); }
.region-scaler__select:focus { outline: 2px solid var(--c-lime-dark); outline-offset: 1px; }
.region-scaler__submit { padding: 10px 18px; border: none; border-radius: var(--r-md); background: var(--c-lime); color: var(--c-navy); font-weight: 800; cursor: pointer; transition: background var(--tr-fast); }
.region-scaler__submit:hover { background: var(--c-lime-dark); color: var(--c-white); }
.region-scaler__reset { padding: 10px 14px; color: var(--c-muted); font-size: var(--fs-body-s); text-decoration: underline; }
.region-scaler__hint { margin-top: var(--sp-2); font-size: var(--fs-body-s); color: var(--c-muted); font-style: italic; }

/* Region-Block (12 Standard + DNA-Bloecke) */
.region-block {
  margin-bottom: var(--sp-7);
  padding: var(--sp-5) var(--sp-6);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
}
.region-block--dna { border-left: 4px solid var(--c-lime-dark); }
.region-block__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.region-block__title-line { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.region-block__title { font-size: var(--fs-h3); font-weight: 800; color: var(--c-text); }
.region-block__teaser { font-family: var(--font-serif, var(--font)); font-style: italic; color: var(--c-muted); margin-bottom: var(--sp-4); font-size: var(--fs-body); }
.region-block__more { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-body-s); font-weight: 600; color: var(--c-navy); text-decoration: none; }
.region-block__more:hover { color: var(--c-lime-dark); }
.region-block__empty { padding: var(--sp-3) var(--sp-4); background: var(--c-bg); border-radius: var(--r-lg); color: var(--c-muted); font-size: var(--fs-body-s); font-style: italic; }

/* Hinweis-Pillen pro Block */
.region-block__pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--r-pill); font-size: var(--fs-body-s); font-weight: 700; letter-spacing: 0.02em; }
.region-block__pill--filter  { background: var(--c-accent-purple-bg); color: var(--c-accent-purple-text); }
.region-block__pill--dna     { background: var(--c-lime-light); color: var(--c-lime-dark); }
.region-block__pill--weather { background: var(--c-info-bg); color: var(--c-info); }
.region-block__pill--premium { background: var(--c-yellow-light); color: var(--c-warning); }

@media (max-width: 640px) {
  .region-block { padding: var(--sp-4); }
  .region-scaler__row { flex-direction: column; align-items: stretch; }
}

/* Toast-Region */
.toast-region { position: fixed; bottom: var(--sp-5); right: var(--sp-5); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--sp-2); pointer-events: none; max-width: 360px; }
.toast-region > * { pointer-events: auto; }

/* Tag mit Icon — saubere Spacing-Loesung (Flex statt Inline-Whitespace) */
.tag--with-icon { display: inline-flex; align-items: center; gap: var(--sp-1); }
.tag__icon { display: inline-flex; }

/* Bewertungs-Card in Sidebar */
.rating-card { text-align: center; }
.rating-card__stars { display: inline-flex; gap: 2px; justify-content: center; margin-bottom: var(--sp-2); padding: var(--sp-2); }
.rating-card__star { color: var(--c-border); transition: color var(--tr-fast); display: inline-flex; }
.rating-card__star.is-filled { color: var(--c-yellow); }
.rating-card__stars--interactive { cursor: pointer; border-radius: var(--r-md); transition: background var(--tr-fast); }
.rating-card__stars--interactive:hover { background: var(--c-bg); }
.rating-card__stars--interactive:focus-visible { outline: 2px solid var(--c-lime-dark); outline-offset: 2px; }
.rating-card__meta { font-size: var(--fs-body-s); color: var(--c-text); margin: 0; }
.rating-card__meta strong { font-size: var(--fs-h3); color: var(--c-text); margin-right: var(--sp-1); }

/* Mini-Map in Sidebar */
.mini-map-card { padding: var(--sp-4); }
.mini-map-card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-3); }
.mini-map-card__head .h3 { margin: 0; }

/* Routenplanungs-Buttons unter Mini-Karte */
.map-routes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--c-border); }

/* Vollbild-Karten-Overlay */
.modal-backdrop.map-overlay { z-index: var(--z-modal); }
.map-overlay__shell { position: fixed; inset: var(--sp-4); background: var(--c-surface); border-radius: var(--r-xl); display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--sh-lg); max-width: 1200px; max-height: 900px; margin: auto; }
.map-overlay__head { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--c-border); background: var(--c-bg); }
.map-overlay__head strong { color: var(--c-navy); font-size: var(--fs-h3); }
.map-overlay__map { flex: 1 1 auto; width: 100%; min-height: 300px; }
.map-overlay__map.leaflet-container { z-index: 0; }
.map-overlay__foot { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--c-border); background: var(--c-bg); }
.map-overlay__foot .muted { margin-right: auto; }
@media (max-width: 640px) {
  .map-overlay__shell { inset: 0; border-radius: 0; max-width: none; max-height: none; }
}
.mini-map { width: 100%; height: 220px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--c-border); margin-bottom: var(--sp-2); }
.mini-map__credit { text-align: right; font-size: var(--fs-tag); margin: 0; }
.mini-map__pin { background: var(--c-navy); border: 2px solid var(--c-surface); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: var(--sh-pin); }
.mini-map__pin--main { background: var(--c-lime); }
.mini-map__pin--nearby { background: var(--c-navy); opacity: 0.7; }
.leaflet-popup-content { margin: var(--sp-3); font-family: var(--font); font-size: var(--fs-body-s); }
.leaflet-popup-content strong { color: var(--c-navy); display: block; margin-bottom: var(--sp-1); }
.leaflet-popup-content a { color: var(--c-lime-dark); font-weight: 700; }

/* Pending-Review-Variante */
.review--pending { background: var(--c-yellow-light); border-color: var(--c-yellow); }

/* Kontakt-Card */
.contact-rows { display: flex; flex-direction: column; gap: var(--sp-3); }
.contact-rows .info-row { font-size: var(--fs-body); color: var(--c-text); }
/* Phase 27 v3/2026-06-02: .link--muted ueberschrieb .info-row Schriftgroesse
   (Telefon/Geo wurden kleiner). Inherit erzwingen. */
.contact-rows .info-row .link--muted { font-size: inherit; color: inherit; }
.contact-rows .info-row .link--muted:hover { color: var(--c-navy); }
.contact-rows a { color: var(--c-lime-dark); font-weight: 600; }

/* Feature-/Premium-Liste (gleicher Stil, zwei Alias-Klassen) */
.feature-list, .premium-features { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); margin: var(--sp-4) 0; }
.feature-list li, .premium-features li { padding-left: var(--sp-7); position: relative; font-size: var(--fs-body); line-height: var(--lh-base); }
.feature-list li::before, .premium-features li::before { content: "✓"; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; background: var(--c-lime); color: var(--c-navy); border-radius: var(--r-full); display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: var(--fs-body-s); }
.price-tag { display: inline-flex; align-items: baseline; gap: var(--sp-2); background: var(--c-lime-light); color: var(--c-navy); padding: var(--sp-3) var(--sp-5); border-radius: var(--r-lg); }
.price-tag__num { font-size: 2.5rem; font-weight: 900; letter-spacing: var(--ls-tight); }
.price-tag__unit { font-size: var(--fs-body); color: var(--c-muted); }

/* Reviews-Sektion */
.reviews { display: flex; flex-direction: column; gap: var(--sp-4); }
.review { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-4); }
.review__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-2); }
.review__author { font-weight: 700; color: var(--c-text); }
.review__date { font-size: var(--fs-body-s); color: var(--c-muted); }
.review__body { color: var(--c-text); line-height: var(--lh-base); }
.review__reply { margin-top: var(--sp-3); padding: var(--sp-3); background: var(--c-bg); border-radius: var(--r-md); border-left: 3px solid var(--c-lime); }
.review__reply-author { font-size: var(--fs-body-s); font-weight: 700; color: var(--c-lime-dark); margin-bottom: var(--sp-1); }

/* ─── Wizard (Eintrag-Anlage) ─────────────────────────────────── */
.form-section-title { font-size: var(--fs-h4); font-weight: 700; color: var(--c-navy); margin: var(--sp-5) 0 var(--sp-3); }
.hr-divider { margin: var(--sp-6) 0; border: 0; border-top: 1px solid var(--c-border); }
.wizard-shell { max-width: 760px; margin-inline: auto; padding-block: var(--sp-7); }
.wizard-progress { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.wizard-progress__step { flex: 1; height: 6px; background: var(--c-border); border-radius: var(--r-pill); }
.wizard-progress__step.is-done { background: var(--c-lime); }
.wizard-progress__step.is-current { background: var(--c-lime-dark); }
.wizard-step { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-2xl); padding: var(--sp-7); box-shadow: var(--sh-md); }
.wizard-step__head { margin-bottom: var(--sp-5); }
.wizard-step__head h1 { font-size: var(--fs-h2); font-weight: 800; color: var(--c-navy); margin: 0 0 var(--sp-2); }
.wizard-step__head p { color: var(--c-muted); font-size: var(--fs-body); margin: 0; }
.wizard-nav { display: flex; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--c-border); }
.wizard-nav__right { display: flex; gap: var(--sp-3); margin-left: auto; }

.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--sp-3); }
.cat-grid__item { position: relative; }
.cat-grid__item input { position: absolute; opacity: 0; pointer-events: none; }
.cat-grid__item label.cat-tile { cursor: pointer; border: 2px solid var(--c-border); transition: border-color var(--tr-fast), box-shadow var(--tr-fast); }
.cat-grid__item input:checked + label.cat-tile { border-color: var(--c-lime-dark); box-shadow: var(--sh-tile-hover); }
.cat-grid__item input:focus-visible + label.cat-tile { outline: 2px solid var(--c-lime-dark); outline-offset: 2px; }

.dedup-list { display: flex; flex-direction: column; gap: var(--sp-3); margin: var(--sp-4) 0; }
.dedup-list__item { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-lg); }
.dedup-list__item-body strong { display: block; color: var(--c-navy); }
.dedup-list__item-body small { color: var(--c-muted); font-size: var(--fs-body-s); }
.dedup-list__item-actions { display: flex; gap: var(--sp-2); }

.field--premium-lock { opacity: 0.85; }
.field--premium-lock .field__label { display: flex; justify-content: space-between; align-items: center; }
.field__premium-badge { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 2px var(--sp-2); border-radius: var(--r-pill); background: var(--c-yellow-light); color: var(--c-navy); font-size: var(--fs-body-s); font-weight: 700; text-transform: none; letter-spacing: 0; }
.input--locked { display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: var(--sp-3) var(--sp-4); background: var(--c-bg); border: 1px dashed var(--c-light); color: var(--c-muted); cursor: pointer; text-align: left; }
.input--locked:hover { background: var(--c-yellow-light); color: var(--c-navy); border-style: solid; }

.preview-card { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: var(--sp-5); margin: var(--sp-4) 0; }
.preview-card h2 { font-size: var(--fs-h3); color: var(--c-navy); margin: 0 0 var(--sp-2); }
.preview-card__meta { color: var(--c-muted); font-size: var(--fs-body-s); margin-bottom: var(--sp-3); }
.preview-card__row { display: flex; gap: var(--sp-3); padding-block: var(--sp-2); border-top: 1px solid var(--c-border); }
.preview-card__row dt { font-weight: 700; color: var(--c-muted); min-width: 140px; }
.preview-card__row dd { margin: 0; color: var(--c-text); }

.score-badge { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-pill); font-weight: 700; font-size: var(--fs-body-s); }
.score-badge--ok { background: var(--c-success-bg); color: var(--c-success); }
.score-badge--pending { background: var(--c-warning-bg); color: var(--c-warning); }
.score-badge--reject { background: var(--c-error-bg); color: var(--c-error); }

.tag-pick { display: flex; flex-wrap: wrap; gap: var(--sp-2); position: relative; }
.tag-pick__item { position: relative; }
.tag-pick label { cursor: pointer; padding: 6px var(--sp-3); border-radius: var(--r-pill); background: var(--c-bg); border: 1px solid var(--c-border); font-size: var(--fs-body-s); display: inline-block; }
.tag-pick input { position: absolute; opacity: 0; pointer-events: none; }
.tag-pick input:checked + label { background: var(--c-lime-light); border-color: var(--c-lime-dark); color: var(--c-lime-dark); font-weight: 700; }

/* Eintrag-Anlage-Danke + Score-Anzeige */
.anlage-result { text-align: center; padding: var(--sp-7); }
.anlage-result h1 { font-size: var(--fs-h1); color: var(--c-navy); margin-bottom: var(--sp-3); }
.anlage-result__icon { width: 80px; height: 80px; border-radius: var(--r-full); display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--sp-5); }
.anlage-result__icon--ok { background: var(--c-success-bg); color: var(--c-success); }
.anlage-result__icon--pending { background: var(--c-warning-bg); color: var(--c-warning); }
.anlage-result__icon--reject { background: var(--c-error-bg); color: var(--c-error); }

/* Owner-Visibility-Form */
.visibility-form .checkbox { margin-block: var(--sp-4); }
.visibility-form__hint { color: var(--c-muted); font-size: var(--fs-body-s); margin-top: var(--sp-2); }

/* Inbound-Kontaktformular auf Detailseite */
.contact-form-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-5); margin-top: var(--sp-4); }
.contact-form-card h3 { color: var(--c-navy); margin: 0 0 var(--sp-3); font-size: var(--fs-h4); }
.contact-form-card__note { color: var(--c-muted); font-size: var(--fs-body-s); margin-top: var(--sp-2); }

/* ─── Photo-Gallery + Credit (CC-Lizenz-Pflicht) ─────────────── */
.gallery { position: relative; }
.gallery__main { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 16/9; background: var(--c-bg); }
.gallery__main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery__credit { position: absolute; right: var(--sp-3); bottom: var(--sp-3); background: var(--c-overlay-text-78); color: var(--c-surface); padding: 4px var(--sp-3); border-radius: var(--r-sm); font-size: var(--fs-body-s); line-height: 1.3; max-width: 80%; }
.gallery__credit a { color: var(--c-lime-light); text-decoration: underline; }
/* Phase 19c/2026-05-31: auto-fit + max 110px + justify-start.
   Vorher: auto-fill erzeugte leere Phantom-Spalten -> sah abgeschnitten aus. */
.gallery__thumbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 110px)); justify-content: start; gap: var(--sp-2); margin-top: var(--sp-2); }
.gallery__thumb { display: block; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 1; background: var(--c-bg); }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--tr-base); }
.gallery__thumb:hover img { transform: scale(1.06); }
.gallery__thumb { transition: outline var(--tr-fast), transform var(--tr-fast); cursor: pointer; }
/* Phase 26 v5/2026-06-02: aktive Thumbs via Inset-Shadow statt outline.
   outline ragte AUSSERHALB der Box und wurde von Container-Padding /
   overflow am linken und unteren Rand abgeschnitten. */
.gallery__thumb.is-active { box-shadow: inset 0 0 0 3px var(--c-lime); }
.gallery__thumb.is-active img { transform: none; }
.gallery__placeholder { aspect-ratio: 16/9; border-radius: var(--r-xl); display: flex; align-items: center; justify-content: center; color: var(--c-surface); font-weight: 700; }

/* ─── Standort-Profil v0.3 (Phase 5) ──────────────────────────── */

/* Schnell-Fakten-Strip */
.quickfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-3); margin: var(--sp-4) 0; padding: var(--sp-4); background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-lg); }
.quickfact { display: flex; align-items: center; gap: var(--sp-3); }
.quickfact__icon { flex: 0 0 32px; height: 32px; border-radius: var(--r-md); background: var(--c-lime-light); color: var(--c-navy); display: inline-flex; align-items: center; justify-content: center; }
.quickfact__body { display: flex; flex-direction: column; line-height: 1.3; }
.quickfact__label { font-size: var(--fs-body-s); color: var(--c-muted); }
.quickfact__value { font-weight: 700; color: var(--c-text); font-size: var(--fs-body); }

/* Öffnungszeiten-Card */
.oh-card__head { margin-bottom: var(--sp-3); }
.oh-status { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-pill); font-weight: 700; font-size: var(--fs-body-s); margin-bottom: var(--sp-3); }
.oh-status__dot { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--c-light); }
.oh-status--open { background: var(--c-success-bg); color: var(--c-success); }
.oh-status--open .oh-status__dot { background: var(--c-success); }
.oh-status--closes_soon { background: var(--c-warning-bg); color: var(--c-warning); }
.oh-status--closes_soon .oh-status__dot { background: var(--c-warning); }
.oh-status--open_soon { background: var(--c-info-bg); color: var(--c-info); }
.oh-status--open_soon .oh-status__dot { background: var(--c-info); }
.oh-status--closed { background: var(--c-error-bg); color: var(--c-error); }
.oh-status--closed .oh-status__dot { background: var(--c-error); }
.oh-card__season { color: var(--c-muted); font-size: var(--fs-body-s); margin: var(--sp-2) 0; display: flex; align-items: center; gap: var(--sp-2); }
.oh-table { width: 100%; border-collapse: collapse; margin-top: var(--sp-2); font-size: var(--fs-body-s); }
.oh-table th { text-align: left; font-weight: 500; color: var(--c-muted); padding: 4px 0; }
.oh-table td { padding: 4px 0; color: var(--c-text); text-align: right; }
.oh-table tr.is-today th, .oh-table tr.is-today td { font-weight: 700; color: var(--c-navy); }
.oh-table tr.is-closed td { color: var(--c-muted); }
.oh-table__note { color: var(--c-light); font-size: 0.8em; }

/* Tipps + Highlights zweispaltig */
.tips-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); margin-top: var(--sp-3); }
@media (min-width: 768px) { .tips-grid--two { grid-template-columns: 1fr 1fr; } }
.tips-grid__title { font-size: var(--fs-h4); font-weight: 700; color: var(--c-navy); margin: 0 0 var(--sp-2); display: flex; align-items: center; gap: var(--sp-2); }

/* 7-Tages-Forecast (unten) */
.forecast { margin-top: var(--sp-3); }
.forecast__title { font-size: var(--fs-h4); font-weight: 700; color: var(--c-navy); margin: 0 0 var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); }
.forecast__days { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: var(--sp-2); }
@media (max-width: 768px) { .forecast__days { grid-template-columns: repeat(4, 1fr); } .forecast__days > :nth-child(n+8) { display: none; } }
.forecast__day { padding: var(--sp-3); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); text-align: center; display: flex; flex-direction: column; gap: var(--sp-1); align-items: center; }
.forecast__day--today { border-color: var(--c-lime-dark); background: var(--c-lime-light); }
.forecast__label { font-weight: 700; color: var(--c-navy); }
.forecast__icon { color: var(--c-navy); margin: var(--sp-1) 0; }
.forecast__temp { font-size: var(--fs-body); }
.forecast__temp strong { color: var(--c-text); font-weight: 800; }
.forecast__rain { font-size: var(--fs-body-s); color: var(--c-info); }
.forecast__credit { margin-top: var(--sp-3); font-size: 10px; }

/* Pollen-Forecast-Tabelle */
.pollen-forecast { margin-top: var(--sp-5); padding: var(--sp-4); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); }
.pollen-forecast__table { width: 100%; border-collapse: collapse; font-size: var(--fs-body-s); }
.pollen-forecast__table th, .pollen-forecast__table td { padding: var(--sp-2) var(--sp-3); text-align: left; border-bottom: 1px solid var(--c-border); }
.pollen-forecast__table thead th { color: var(--c-muted); font-weight: 600; }
.pollen-forecast__table tbody th { color: var(--c-text); font-weight: 700; }

/* Kompakt-Wetter+Pollen-Badge (Sidebar oben) */
.weather-badge { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px dashed var(--c-border); display: flex; flex-direction: column; gap: var(--sp-2); }
.weather-badge__row { display: flex; align-items: center; gap: var(--sp-3); }
.weather-badge__icon { color: var(--c-navy); flex: 0 0 26px; }
.weather-badge__main { display: flex; align-items: baseline; gap: var(--sp-2); }
.weather-badge__main strong { font-size: var(--fs-h3); font-weight: 800; color: var(--c-navy); }
.weather-badge__meta { font-size: var(--fs-body-s); }
.weather-badge__pollen { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.pollen-pill { display: inline-flex; align-items: center; padding: 2px var(--sp-2); border-radius: var(--r-pill); font-size: var(--fs-body-s); font-weight: 700; }
.pollen-pill--low  { background: var(--c-success-bg); color: var(--c-success); }
.pollen-pill--mid  { background: var(--c-warning-bg); color: var(--c-warning); }
.pollen-pill--high { background: var(--c-error-bg); color: var(--c-error); }

/* Wetter Lazy-Load Skeleton (12.C) */
.weather-skeleton { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); margin-top: var(--sp-3); }
@media (min-width: 768px) { .weather-skeleton { grid-template-columns: 1.2fr 1fr; } }
.weather-skeleton__box { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: var(--sp-5); min-height: 160px; position: relative; overflow: hidden; }
.weather-skeleton__box::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, var(--c-bg) 50%, transparent 100%); transform: translateX(-100%); animation: lb-shimmer 1.4s linear infinite; }
.weather-skeleton__label { display: flex; align-items: center; gap: var(--sp-2); color: var(--c-muted); font-size: var(--fs-body-s); position: relative; z-index: 1; }
.weather-skeleton__dot { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--c-lime); animation: lb-pulse 1.2s ease-in-out infinite; }
.forecast-wrap { margin-top: var(--sp-5); }
@keyframes lb-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes lb-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* Wetter + Pollen */
.weather-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); margin-top: var(--sp-3); }
@media (min-width: 768px) { .weather-grid { grid-template-columns: 1.2fr 1fr; } }
.weather-box { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: var(--sp-5); }
.weather-box--rainy { background: linear-gradient(135deg, var(--c-info-bg), var(--c-surface)); }
.weather-box--sunny { background: linear-gradient(135deg, var(--c-yellow-light), var(--c-surface)); }
.weather-box--cool  { background: linear-gradient(135deg, var(--c-info-bg), var(--c-surface)); }
.weather-box__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.weather-box__icon { color: var(--c-navy); flex: 0 0 32px; }
.weather-box__main { flex: 1; }
.weather-box__temp { font-size: var(--fs-h2); font-weight: 800; color: var(--c-navy); line-height: 1; }
.weather-box__label { color: var(--c-muted); font-size: var(--fs-body-s); margin-top: 4px; }
.weather-box__meta { display: flex; flex-direction: column; gap: 2px; text-align: right; color: var(--c-muted); font-size: var(--fs-body-s); }
.weather-box__rec { padding: var(--sp-3) 0; border-top: 1px solid var(--c-border); margin-top: var(--sp-2); }
.weather-box__rec a { margin-left: var(--sp-2); }
.weather-box__credit { margin-top: var(--sp-2); font-size: 10px; }

.pollen-box { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: var(--sp-5); }
.pollen-box__title { font-size: var(--fs-h4); font-weight: 700; color: var(--c-navy); margin: 0 0 var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); }
.pollen-box__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.pollen-item { display: grid; grid-template-columns: 1fr auto auto; gap: var(--sp-3); align-items: center; padding: 6px var(--sp-3); border-radius: var(--r-md); }
.pollen-item__allergen { font-weight: 700; color: var(--c-text); }
.pollen-item__today { font-weight: 700; }
.pollen-item--low  { background: var(--c-success-bg); }
.pollen-item--low  .pollen-item__today { color: var(--c-success); }
.pollen-item--mid  { background: var(--c-warning-bg); }
.pollen-item--mid  .pollen-item__today { color: var(--c-warning); }
.pollen-item--high { background: var(--c-error-bg); }
.pollen-item--high .pollen-item__today { color: var(--c-error); }
.pollen-box__credit { margin-top: var(--sp-3); font-size: 10px; }

/* Nearby-Gruppen + Cards */
.nearby-group { margin-top: var(--sp-5); }
.nearby-group__title { font-size: var(--fs-h4); font-weight: 700; color: var(--c-navy); margin: 0 0 var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); }
.nearby-card--parking { background: var(--c-bg); border-style: dashed; }
.nearby-card--parking:hover { border-color: var(--c-lime-dark); background: var(--c-surface); }

/* Parken-Finden Layout */
.parken-finden-layout { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 900px) { .parken-finden-layout { grid-template-columns: 1.2fr 1fr; } }
.mini-map--large { height: 420px; }

/* Nearby-Cards */
.nearby-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-3); margin-top: var(--sp-3); }
.nearby-card { display: block; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4); text-decoration: none; transition: border-color var(--tr-fast), box-shadow var(--tr-fast); }
.nearby-card:hover { border-color: var(--c-lime-dark); box-shadow: var(--sh-md); }
.nearby-card__head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); }
.nearby-card__head strong { color: var(--c-navy); font-size: var(--fs-body); }
.nearby-card__meta { display: flex; align-items: center; gap: var(--sp-2); color: var(--c-muted); font-size: var(--fs-body-s); margin-top: var(--sp-1); flex-wrap: wrap; }
.nearby-card__meta .dot { width: 3px; height: 3px; border-radius: var(--r-full); background: var(--c-light); display: inline-block; }
.badge--xs { font-size: 9px; padding: 2px 6px; }

/* Externe-Quellen-Box */
.sources-box { margin-top: var(--sp-5); padding: var(--sp-4); background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-lg); }
.sources-box__title { font-size: var(--fs-body); color: var(--c-muted); margin: 0 0 var(--sp-2); display: flex; align-items: center; gap: var(--sp-2); font-weight: 600; }
.sources-box__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.sources-box__link { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 4px var(--sp-2); border-radius: var(--r-sm); background: var(--c-surface); border: 1px solid var(--c-border); color: var(--c-lime-dark); text-decoration: none; font-size: var(--fs-body-s); }
.sources-box__link:hover { background: var(--c-lime-light); }

/* Social-Row */
.social-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.social-row__item { display: inline-flex; align-items: center; gap: 6px; padding: 6px var(--sp-3); border-radius: var(--r-pill); background: var(--c-bg); border: 1px solid var(--c-border); color: var(--c-navy); text-decoration: none; font-size: var(--fs-body-s); }
.social-row__item:hover { background: var(--c-lime-light); }

/* Verifiziert-Badge */
.badge--verified { background: var(--c-lime-light); color: var(--c-navy); }
.badge--verified::before { content: ""; display: inline-block; width: 12px; height: 12px; background-color: var(--c-lime-dark); -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/><polyline points='9 12 11 14 15 10'/></svg>") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/><polyline points='9 12 11 14 15 10'/></svg>") center/contain no-repeat; vertical-align: -2px; margin-right: 4px; }


/* ─── Lesetypografie .prose (v0.13.0) ──────────────────────────────
 * Standalone-Klasse für Fliesstext-Bereiche (Legal-Seiten, Region-Intro,
 * Detail-Beschreibung). Vertikaler Rhythmus + ruhige Listen + klare H2/H3.
 */
.prose { font-size: var(--fs-body); line-height: 1.65; color: var(--c-text); }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose h2 {
  font-size: var(--fs-h3); font-weight: 800; color: var(--c-navy);
  margin: var(--sp-7) 0 var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--c-border);
}
.prose h3 {
  font-size: var(--fs-h4); font-weight: 700; color: var(--c-navy);
  margin: var(--sp-5) 0 var(--sp-2);
}
.prose p { margin: 0 0 var(--sp-3); }
.prose ul, .prose ol { margin: var(--sp-2) 0 var(--sp-4); padding-left: var(--sp-6); }
.prose li { margin-bottom: var(--sp-2); line-height: 1.6; }
.prose li > p { margin: 0; }
.prose a { color: var(--c-lime-dark); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--c-navy); }
.prose strong { color: var(--c-navy); font-weight: 700; }
.prose hr { border: 0; border-top: 1px solid var(--c-border); margin: var(--sp-6) 0; }

/* ─── Legal-Shell: zentrierter Lese-Container für System-Seiten ───
 * Karten-Layout (weiß auf BG), max-width für optimale Zeilenlaenge,
 * dezenter Schatten. Wird mit container--listing kombiniert.
 */
/* Karte nutzt volle Container-Breite (1200px), Inhalt drinnen ist auf 760px
 * zentriert begrenzt - bestes Verhaeltnis aus Karten-Look und Lesefluss.
 * Top-Margin: Abstand zur Navigation. */
.legal-shell {
  margin-top: var(--sp-6);
  background: var(--c-surface);
  border-radius: var(--r-2xl);
  padding: var(--sp-8) var(--sp-6);
  box-shadow: var(--sh-md);
}
.legal-shell > .page-head,
.legal-shell > article,
.legal-shell > section,
.legal-shell > .alert,
.legal-shell > .form-stack,
.legal-shell > form {
  max-width: 760px;
  margin-inline: auto;
}
.legal-shell .page-head { margin-bottom: var(--sp-6); padding-bottom: var(--sp-4); border-bottom: 2px solid var(--c-lime-light); }
.legal-shell .page-head__title { color: var(--c-navy); }
.legal-shell .page-head__sub { color: var(--c-muted); margin-top: var(--sp-2); }
@media (max-width: 768px) {
  .legal-shell { padding: var(--sp-5) var(--sp-4); border-radius: var(--r-lg); margin-top: var(--sp-4); }
}

/* ─── cat-grid Toggle (Phase 19c/2026-05-30) ─────────────────────
 * Bei vielen Sub-Kategorien zeigen wir initial nur Top-N, Rest per
 * Toggle aufklappbar. cat-tile bleibt unveraendert wiederverwendet.
 */
.cat-grid__item { display: contents; }
/* hidden-Attribut muss display:contents schlagen — sonst zeigt der Browser
   die Tile trotz hidden. attribute-Selector + later-definition gewinnt. */
.cat-grid__item[hidden] { display: none !important; }
.cat-grid.is-expanded .cat-grid__item--overflow-d,
.cat-grid.is-expanded .cat-grid__item--overflow-m {
  display: contents !important;
}
.cat-grid__toggle {
  margin: var(--sp-4) auto 0;
  display: block;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-5);
  font: inherit; font-weight: 600;
  color: var(--c-navy);
  cursor: pointer;
  transition: background var(--tr-fast), border-color var(--tr-fast);
}
.cat-grid__toggle:hover { background: var(--c-lime-light); border-color: var(--c-lime); }
.cat-grid__toggle:focus-visible { outline: 2px solid var(--c-lime-dark); outline-offset: 2px; }
@media (max-width: 640px) {
  .cat-grid__item--overflow-m[hidden] { display: none; }
}

/* ─── Form-Honeypot (Phase 19c/2026-05-30) ───────────────────────
 * Sichtbar für Bots (im DOM), unsichtbar für User. display:none reicht
 * — Apple/iCloud-Autofill kann ein Feld nicht autovervollstaendigen das
 * komplett aus dem Layout raus ist. Plus aria-hidden + tabindex=-1.
 */
.form-honeypot { display: none !important; visibility: hidden; height: 0; overflow: hidden; }

/* ─── Input-Group mit Praefix + Live-Status (Phase 21/2026-06-01) ──
 * Visueller Aufbau:  [https://] [eingabefeld           ] [✓/✗]
 * Praefix sitzt links als nicht-editierbares Label (Pseudo-Inset),
 * Status-Pin sitzt rechts und wird vom JS dnsCheck() gesetzt.
 * Reuse: .input, .field__label, .field__hint (keine Token-Erfindung).
 */
.input-group { display: flex; align-items: stretch; position: relative;
               border: 1px solid var(--c-border); border-radius: var(--r-md);
               background: var(--c-surface); overflow: hidden;
               transition: border-color var(--tr-fast), box-shadow var(--tr-fast); }
.input-group:focus-within { border-color: var(--c-lime-dark);
                            box-shadow: var(--sh-focus); }
.input-group.is-ok      { border-color: var(--c-lime); }
.input-group.is-error   { border-color: var(--c-error); background: var(--c-error-bg); }
.input-group__prefix {
  display: inline-flex; align-items: center;
  padding: 0 var(--sp-3);
  background: var(--c-bg); border-right: 1px solid var(--c-border);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--fs-body-s); color: var(--c-muted);
  white-space: nowrap; user-select: none;
}
.input-group .input {
  border: 0 !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important;
  flex: 1; min-width: 0;
}
.input-group__status {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; padding: 0 var(--sp-2);
  color: var(--c-muted); font-size: var(--fs-body-s);
  border-left: 1px solid var(--c-border-soft, var(--c-border));
}
.input-group__status[data-state="ok"]    { color: var(--c-lime-dark); }
.input-group__status[data-state="error"] { color: var(--c-error); }
.input-group__status[data-state="loading"] { color: var(--c-muted); }
.input-group__status:empty { display: none; }

/* ─── FAQ-Liste auf Detail-Seite (Phase 19c/2026-05-30) ──────────
 * Worker fuellt entry.faq (jsonb). Native <details>-Accordion für
 * Accessibility ohne JS. Schliesst optisch an .detail-page__section an.
 */
.faq-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.faq-item {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
}
.faq-item[open] { background: var(--c-surface); border-color: var(--c-lime); }
.faq-item__q {
  font-weight: 600; color: var(--c-navy); cursor: pointer;
  list-style: none; padding-right: var(--sp-5); position: relative;
  font-size: var(--fs-body);
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::after {
  content: "+"; position: absolute; right: 0; top: 50%;
  transform: translateY(-50%); font-size: 1.4em; font-weight: 400;
  color: var(--c-muted);
  transition: transform var(--tr-fast);
}
.faq-item[open] .faq-item__q::after { content: "−"; }
.faq-item__q:focus-visible { outline: 2px solid var(--c-lime-dark); outline-offset: 2px; border-radius: var(--r-sm); }
.faq-item__a { margin-top: var(--sp-3); line-height: var(--lh-loose); color: var(--c-text); }
.faq-item__src { margin-top: var(--sp-2); font-style: italic; }

/* ─── Geo-Banner (Phase 19c/2026-05-31) ──────────────────────────
 * Server-side Hinweis dass lb_geo-Cookie gesetzt ist + Reset-Link.
 * Sitzt zwischen Header und Content, unaufdringlich.
 */
.geo-banner {
  background: var(--c-lime-light);
  border-bottom: 1px solid var(--c-border);
  padding: var(--sp-2) 0;
  font-size: var(--fs-body-s);
  color: var(--c-text);
}
.geo-banner__inner {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
}
.geo-banner__icon { font-size: 1.1em; }
.geo-banner__label { flex: 1; min-width: 200px; }
.geo-banner__label strong { color: var(--c-navy); }

/* ─── Locate-Bar (Phase 19c/2026-05-31) ──────────────────────────
 * Prominenter GPS-Button über dem Suchformular. Ersetzt den winzigen
 * Icon-Button im Wohin-Feld. Sichtbar auf Hero + Compact-Search.
 */
.locate-bar {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin: 0 0 var(--sp-2);
}
.locate-bar__btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-surface);
  border: 1px solid var(--c-lime);
  border-radius: var(--r-pill);
  color: var(--c-navy);
  font: inherit; font-size: var(--fs-body-s); font-weight: 600;
  cursor: pointer;
  transition: background var(--tr-fast), border-color var(--tr-fast), color var(--tr-fast);
}
.locate-bar__btn:hover {
  background: var(--c-lime-light);
  border-color: var(--c-lime-dark);
}
.locate-bar__btn:focus-visible {
  outline: 2px solid var(--c-lime-dark);
  outline-offset: 2px;
}
.locate-bar__btn.is-loading { opacity: 0.7; cursor: progress; }
.locate-bar__btn--active {
  background: var(--c-lime-light);
  border-color: var(--c-lime-dark);
}
.locate-bar__btn--active strong { color: var(--c-navy); }
.locate-bar__reset {
  color: var(--c-muted);
  font-size: var(--fs-body-s);
  text-decoration: underline;
}
.locate-bar__reset:hover { color: var(--c-navy); }
@media (max-width: 480px) {
  .locate-bar__btn { width: 100%; justify-content: center; }
  .locate-bar__reset { width: 100%; text-align: center; }
}

/* ─── Geo-Status Banner (Phase 19c/2026-05-31 v2) ───────────────
 * Ersetzt die alte Compact-Search auf Listings/Cluster/Detail.
 * Zeigt aktuellen Standort + Treffer + Action-Buttons.
 */
.geo-status {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--sh-sm);
}
.geo-status__main {
  display: flex; align-items: center; gap: var(--sp-2);
  flex: 1; min-width: 0;
}
.geo-status__icon { color: var(--c-lime-dark); display: inline-flex; }
.geo-status__text { font-size: var(--fs-body); color: var(--c-text); }
.geo-status__text strong { color: var(--c-navy); }
.geo-status__actions {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
}
@media (max-width: 640px) {
  .geo-status { flex-direction: column; align-items: stretch; }
  .geo-status__actions { width: 100%; justify-content: stretch; }
  .geo-status__actions > * { flex: 1; justify-content: center; }
}

/* ─── Geo-Chip (Hero, aktiv-State) ──────────────────────────────
 * Wenn Cookie da: schmaler Chip unter dem H1 statt grossem Suchformular.
 */
.geo-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--c-overlay-white-10);
  border: 1px solid var(--c-overlay-white-30);
  border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-4);
  color: var(--c-white);
  font-size: var(--fs-body);
}
.geo-chip__icon { color: var(--c-lime); display: inline-flex; }
.geo-chip__label strong { color: var(--c-white); font-weight: 700; }

.hero__geo {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-3); margin: var(--sp-5) 0;
}
.hero__geo-actions {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  justify-content: center;
}
/* Hero hat dunkelblauen BG -> ghost-btn waere unsichtbar (navy auf navy).
   Override für Hero-Kontext: helle Schrift + dezenter Hover-BG. */
.hero__geo-actions .btn--ghost {
  color: var(--c-overlay-white-78);
  border: 1px solid var(--c-overlay-white-30);
}
.hero__geo-actions .btn--ghost:hover {
  background: var(--c-overlay-white-10);
  color: var(--c-white);
  border-color: var(--c-overlay-white-55);
}

/* ─── Hero-Picker (Default-State, kein Cookie) ──────────────────
 * Großer GPS-Button + "oder"-Trenner + Stadt/PLZ-Form.
 */
.hero__picker {
  display: flex; flex-direction: column; align-items: stretch;
  gap: var(--sp-3); margin: var(--sp-5) auto;
  max-width: 520px;
}
.hero__picker-gps {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  background: var(--c-lime);
  border: none;
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  color: var(--c-navy);
  font: inherit; font-size: var(--fs-body-l); font-weight: 700;
  cursor: pointer;
  transition: background var(--tr-fast), transform var(--tr-fast);
  box-shadow: var(--sh-md);
}
.hero__picker-gps:hover { background: var(--c-lime-dark); color: var(--c-white); transform: translateY(-1px); }
.hero__picker-gps:focus-visible { outline: 3px solid var(--c-white); outline-offset: 2px; }
.hero__picker-gps.is-loading { opacity: 0.7; cursor: progress; }

.hero__picker-or {
  text-align: center;
  color: var(--c-overlay-white-78);
  font-size: var(--fs-body-s);
  position: relative;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.hero__picker-or::before,
.hero__picker-or::after {
  content: ""; display: inline-block; width: 40px; height: 1px;
  background: var(--c-overlay-white-30);
  vertical-align: middle; margin: 0 var(--sp-2);
}

.hero__picker-form {
  display: flex; align-items: center; gap: var(--sp-2);
  background: var(--c-surface);
  border-radius: var(--r-lg);
  padding: var(--sp-2);
  box-shadow: var(--sh-md);
}
.hero__picker-icon {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-muted); padding-left: var(--sp-2);
}
.hero__picker-form input {
  flex: 1; min-width: 0;
  border: none; outline: none; background: transparent;
  padding: var(--sp-2) var(--sp-2);
  font: inherit; font-size: var(--fs-body);
  color: var(--c-text);
}
.hero__picker-form input::placeholder { color: var(--c-muted); }

@media (max-width: 640px) {
  .hero__picker-gps { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-body); }
  .hero__picker-form { padding: var(--sp-1); }
  .hero__picker-form .btn { width: auto; padding-inline: var(--sp-3); }
}

/* ─── Geo-Chip als Button (Phase 19c/2026-05-31 v3) ─────────────
 * Im Hero (active state) und überall sonst clickbar -> oeffnet
 * Standort-Picker-Modal.
 */
.geo-chip--btn {
  border-style: dashed;
  cursor: pointer;
  font: inherit;
}
.geo-chip--btn:hover {
  background: var(--c-overlay-white-18);
  border-color: var(--c-lime);
}
.geo-chip__edit {
  margin-left: var(--sp-2);
  color: var(--c-overlay-white-78);
  font-weight: 400;
  border-left: 1px solid var(--c-overlay-white-30);
  padding-left: var(--sp-2);
}

.hero__picker-hint { text-align: center; color: var(--c-overlay-white-78); margin-top: var(--sp-2); }

/* Modal-Separator "oder" */
.modal-separator {
  display: flex; align-items: center; gap: var(--sp-3);
  text-align: center; color: var(--c-muted);
  font-size: var(--fs-body-s); text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: var(--sp-3) 0;
}
.modal-separator::before,
.modal-separator::after {
  content: ""; flex: 1; height: 1px; background: var(--c-border);
}

/* ─── Eintrag-Edit Tabs+Accordion (Phase 19c/2026-05-31 v4) ──────
 * Admin- + Owner-Edit für lb_place.entry.
 * Desktop (>=900px): linke Tab-Sidebar + Inhalt rechts, nur aktive Sektion sichtbar.
 * Mobile (<900px): Accordion - <details> wie .faq-item.
 */
.entry-edit-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--sp-5);
  margin-bottom: 120px; /* Platz für sticky Footer */
}

.entry-edit-tabs {
  display: flex; flex-direction: column; gap: var(--sp-1);
  position: sticky; top: var(--sp-4);
  align-self: start;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}
.entry-edit-tab {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  color: var(--c-text);
  font-size: var(--fs-body-s); font-weight: 600;
  transition: background var(--tr-fast), color var(--tr-fast);
  text-decoration: none;
}
.entry-edit-tab:hover { background: var(--c-bg); }
.entry-edit-tab.is-active {
  background: var(--c-navy); color: var(--c-white);
}
.entry-edit-tab__icon { display: inline-flex; }

.entry-edit-content {
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.entry-edit-section {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.entry-edit-section__head {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-bg);
  font-weight: 700; color: var(--c-navy);
  cursor: pointer; list-style: none;
}
.entry-edit-section__head::-webkit-details-marker { display: none; }
.entry-edit-section__body {
  padding: var(--sp-4);
  /* Phase 20/2026-06-01: gap sp-3 -> sp-4 fuer mehr Luft zwischen Form-Feldern. */
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.entry-edit-section .field { margin: 0; }

.entry-edit-footer {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  padding: var(--sp-3) var(--sp-5);
  display: flex; justify-content: space-between; align-items: center;
  z-index: var(--z-sticky, 50);
  box-shadow: 0 -4px 12px rgba(0,0,0,0.06);
}

/* Mono für JSON-Editoren */
.input.mono { font-family: ui-monospace, "SF Mono", Consolas, monospace;
              font-size: var(--fs-body-s); white-space: pre; overflow-x: auto; }

/* Desktop: nur aktive Sektion sichtbar */
@media (min-width: 900px) {
  .entry-edit-section { display: none; }
  .entry-edit-section.is-active { display: block; }
  .entry-edit-section__head { cursor: default; }
  .entry-edit-section__head::after { content: none; }
}

/* Mobile: Accordion + Sidebar collapsed */
@media (max-width: 899px) {
  .entry-edit-layout {
    grid-template-columns: 1fr;
    margin-bottom: 100px;
  }
  .entry-edit-tabs {
    position: static; flex-direction: row; flex-wrap: wrap;
    max-height: none; padding: var(--sp-2);
    background: var(--c-bg);
    border-radius: var(--r-lg);
  }
  .entry-edit-tab {
    flex: 1 1 auto; justify-content: center; font-size: 12px;
  }
  .entry-edit-section__head::after {
    content: "+"; margin-left: auto;
    font-size: 1.2em; color: var(--c-muted);
  }
  .entry-edit-section[open] .entry-edit-section__head::after { content: "−"; }
}

/* ─── Edit-Editoren (Phase 19c/2026-05-31 v5) ────────────────────
 * Hours-Editor, Social-Grid, Repeater, Tag-Input, Facets-Groups, Galerie-Edit.
 * Reuse: .field, .input, .btn, .tag-pick (Multi-Checkbox).
 */

/* Öffnungszeiten-Tabelle */
.hours-grid { display: flex; flex-direction: column; gap: var(--sp-2); }
.hours-row { display: grid;
             grid-template-columns: 110px 100px 1fr 1fr;
             gap: var(--sp-3); align-items: center;
             padding: var(--sp-2); background: var(--c-bg);
             border-radius: var(--r-md); }
.hours-row__day { font-weight: 600; color: var(--c-navy); }
.hours-row__closed { display: flex; align-items: center; gap: var(--sp-1);
                     font-size: var(--fs-body-s); color: var(--c-muted); }
.hours-row__slot { display: flex; align-items: center; gap: var(--sp-1); }
.input--time { padding: var(--sp-1) var(--sp-2); font-size: var(--fs-body-s);
               max-width: 110px; }
@media (max-width: 640px) {
  .hours-row { grid-template-columns: 1fr; }
  .hours-row__slot { width: 100%; }
}

/* Social-Editor */
.social-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
               gap: var(--sp-3); }

/* Repeater */
.repeater-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.repeater-row { display: flex; gap: var(--sp-2); align-items: stretch; }
.repeater-row > .input { flex: 1; }
.repeater-row--faq { align-items: flex-start; }
.repeater-row__qa { display: flex; flex-direction: column; gap: var(--sp-1); flex: 1; }
.repeater-add { align-self: flex-start; margin-top: var(--sp-1); }

/* Tag-Input */
.tag-input { display: flex; flex-direction: column; gap: var(--sp-2);
             padding: var(--sp-2); background: var(--c-surface);
             border: 1px solid var(--c-border); border-radius: var(--r-md); }
.tag-input__pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tag-input__pill { display: inline-flex; align-items: center; gap: var(--sp-1);
                   padding: 4px var(--sp-2); background: var(--c-lime-light);
                   border-radius: var(--r-pill); font-size: var(--fs-body-s);
                   color: var(--c-navy); font-weight: 600; }
.tag-input__remove { background: none; border: none; cursor: pointer;
                     font-size: 1.1em; line-height: 1; color: var(--c-muted);
                     padding: 0 2px; }
.tag-input__remove:hover { color: var(--c-error); }
.tag-input__field { border: none; outline: none; background: transparent;
                    padding: var(--sp-1) 0; }
/* Phase 24/2026-06-01: Wenn der Input zusaetzlich .input traegt
   (Standard-Variante), die Standard-Border/BG ueberschreiben — sonst
   entstehen Doppel-Rahmen + zweiter Fokusring innerhalb des Containers. */
.tag-input .input,
.tag-input .tag-input__field.input {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  min-height: auto;
  padding: var(--sp-1) var(--sp-2);
}
.tag-input:focus-within {
  border-color: var(--c-lime-dark);
  box-shadow: var(--sh-focus);
}

/* Facets-Groups (klappbare Sub-Sektionen mit Multi-Checkbox) */
.facets-groups { display: flex; flex-direction: column; gap: var(--sp-2); }
.facets-group { background: var(--c-bg); border: 1px solid var(--c-border);
                border-radius: var(--r-md); }
.facets-group__head { padding: var(--sp-2) var(--sp-3); cursor: pointer;
                      font-weight: 600; color: var(--c-navy); list-style: none;
                      display: flex; align-items: center; gap: var(--sp-2); }
.facets-group__head::-webkit-details-marker { display: none; }
.facets-group__head::after { content: "+"; margin-left: auto; color: var(--c-muted); }
.facets-group[open] > .facets-group__head::after { content: "−"; }
.facets-group__count { background: var(--c-lime); color: var(--c-navy);
                       border-radius: var(--r-pill); padding: 1px 8px;
                       font-size: 11px; font-weight: 700; }
.facets-group .tag-pick { padding: var(--sp-2) var(--sp-3) var(--sp-3); }

/* Galerie-Edit (Read-only Grid bis Phase B) */
.gal-edit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
                 gap: var(--sp-3); margin-top: var(--sp-3); }
.gal-edit-tile { background: var(--c-bg); border-radius: var(--r-md); overflow: hidden;
                 border: 1px solid var(--c-border); }
.gal-edit-tile img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.gal-edit-tile figcaption { padding: var(--sp-2); font-size: var(--fs-body-s); }

/* ─── Cat-Picker hierarchisch (Phase 19c/2026-05-31 v6) ──────────
 * 3-Ebenen-Dropdown + "+ hinzufuegen" + Pill-Liste für mehrere Auswahlen.
 */
.cat-picker { display: flex; flex-direction: column; gap: var(--sp-2);
              padding: var(--sp-3); background: var(--c-bg);
              border: 1px solid var(--c-border); border-radius: var(--r-md); }
.cat-picker__chain { display: flex; flex-direction: column; gap: var(--sp-2); }
.cat-picker__chain select { width: 100%; }
.cat-pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-1); }
.cat-pill { display: inline-flex; align-items: center; gap: var(--sp-2);
            padding: 6px var(--sp-3); background: var(--c-lime-light);
            border: 1px solid var(--c-lime-dark); border-radius: var(--r-pill);
            font-size: var(--fs-body-s); color: var(--c-navy); font-weight: 600; }
.cat-pill > .tag-input__remove { color: var(--c-navy); }

/* ─── Entry-Edit Sidebar-Actions (Phase 19c/2026-05-31 v6) ──────
 * Sticky Speichern/Pausieren/Löschen unter der Tab-Nav (Desktop).
 */
.entry-edit-actions { display: flex; flex-direction: column; gap: var(--sp-2);
                       margin-top: var(--sp-4); padding-top: var(--sp-4);
                       border-top: 1px solid var(--c-border);
                       /* Phase 21: shrinkbar damit lange Button-Labels
                          (z.B. "Veroeffentlichung einreichen") nicht die
                          Sidebar horizontal sprengen. */
                       min-width: 0; }

/* Danger-Button (rot für Löschen) */
.btn--danger { background: var(--c-error-bg); color: var(--c-error);
               border: 1px solid color-mix(in oklch, var(--c-error) 35%, transparent); }
.btn--danger:hover { background: var(--c-error); color: var(--c-white); }

/* Mobile: Sidebar-Actions wandern unter den Content */
@media (max-width: 899px) {
  .entry-edit-actions { margin-top: 0; padding-top: 0; border-top: none;
                        position: sticky; bottom: 0; padding: var(--sp-3);
                        background: var(--c-surface);
                        border-top: 1px solid var(--c-border);
                        box-shadow: 0 -4px 12px rgba(0,0,0,0.06); }
  .entry-edit-tabs { display: flex; flex-direction: column; }
}

/* ─── Feiertags-Hinweis im Öffnungszeiten-Widget (Phase 19c/v8) ──
 * Sub-Zeile direkt unter dem betroffenen Wochentag in .oh-table.
 * Reuse: Warning-Tokens, vorhandene .muted/.body-s.
 */
.oh-table__holiday-row td {
  background: var(--c-warning-bg);
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--fs-body-s);
  color: var(--c-text);
  border-top: 0;
  line-height: 1.35;
}
.oh-table__holiday-row th { background: var(--c-warning-bg); border-top: 0; }
.oh-table__holiday-badge {
  display: inline-block; padding: 1px 8px; border-radius: var(--r-pill);
  background: var(--c-warning); color: var(--c-white);
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; margin-right: var(--sp-1);
}

/* ─── Beschreibung kollabierbar (Phase 19c/2026-05-31 v9) ────────
 * Server rendert vollen HTML-Text - SEO/Google liest alles.
 * Mobile + Desktop: ~10 Zeilen sichtbar, Gradient-Fade unten,
 * "Weiterlesen"-Button klappt auf. Klasse .is-expanded zeigt voll.
 */
.prose--collapsible { position: relative; }
.prose--collapsible .prose__body {
  max-height: 16em;
  overflow: hidden;
  position: relative;
  transition: max-height 0.25s ease;
}
.prose--collapsible.is-expanded .prose__body { max-height: none; }
/* Phase 24/2026-06-01: Fade entfernt — der Text steht jetzt in einer
   eigenen weissen Widget-Box, der Weiterlesen-Button reicht als Signal. */
.prose--collapsible:not(.is-expanded) .prose__body::after { content: none; }
.prose__more {
  display: inline-block; margin-top: var(--sp-2);
  background: none; border: none; padding: var(--sp-1) 0;
  color: var(--c-lime-dark); font: inherit; font-weight: 700;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.prose__more:hover { color: var(--c-navy); }
.prose__more:focus-visible { outline: 2px solid var(--c-lime-dark); outline-offset: 2px; border-radius: var(--r-sm); }

/* ─── Listings Filter-Bar (Phase 19c/2026-05-31 v10) ─────────────
 * Ersetzt den Sub-Kachel-Block auf /<kategorie> und /<kategorie>/<region>.
 * Reuse: .field, .input, .btn--primary. Mobile: stacked.
 */
.list-filters { display: flex; gap: var(--sp-2); flex-wrap: wrap;
                align-items: stretch; margin: var(--sp-4) 0 var(--sp-5);
                background: var(--c-surface);
                border: 1px solid var(--c-border);
                border-radius: var(--r-lg);
                padding: var(--sp-3); }
.list-filters__field { margin: 0; min-width: 160px; gap: 0; }
.list-filters__field--grow { flex: 1 1 240px; }
.list-filters__submit { align-self: stretch; }
/* Phase 19c/2026-05-31 v12: Mobile-Stack mit kleinerem Gap.
 * Field-Default-Gap (sp-2) + List-Filters-Gap (sp-2) ergaben doppelten
 * Abstand. Jetzt nur noch ein klar definierter Gap.
 */
@media (max-width: 640px) {
  .list-filters { flex-direction: column; align-items: stretch;
                   gap: var(--sp-2); padding: var(--sp-2); }
  .list-filters__field, .list-filters__field--grow { min-width: 0; gap: 0; }
}

/* ─── Listing-H1 mobile-kompakter (Phase 19c/2026-05-31 v13) ─────
 * Auf Mobile war "Ausflugsziele in der Nähe von Bad Wünnenberg"
 * 3 Zeilen wegen fs-h1. Hier eine Stufe kleiner, hyphenated.
 */
@media (max-width: 640px) {
  .page-head__title--listing {
    font-size: var(--fs-h2);
    line-height: 1.15;
    hyphens: auto;
  }
}

/* ─── Custom-Select-Dropdown im CI (Phase 19c/2026-05-31 v13) ─────
 * Native iOS-Wheel-Picker / Windows-OS-Dropdown wird unterdrueckt,
 * stattdessen JS-driven Custom-Dropdown im Landbummel-CI (lime Border,
 * navy Text). Original-<select> bleibt im DOM (Form-Submit, A11y).
 * Reuse: --c-lime, --c-navy, --c-border, --r-md, --sp-* Tokens.
 */
.cs { position: relative; display: block; width: 100%; }
.cs__trigger {
  width: 100%; min-height: 44px;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2);
  padding: 10px var(--sp-3); padding-right: 38px;
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  background: var(--c-surface); color: var(--c-text);
  font-size: var(--fs-body); font-family: var(--font); font-weight: 600;
  text-align: left; cursor: pointer;
  transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231B3F6B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center;
  background-size: 14px 14px;
}
.cs__trigger:hover { border-color: var(--c-lime-dark); }
.cs__trigger:focus-visible,
.cs.is-open .cs__trigger {
  border-color: var(--c-lime-dark);
  box-shadow: var(--sh-focus);
  outline: none;
}
.cs__menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 60vh; overflow-y: auto;
  background: var(--c-surface);
  border: 1px solid var(--c-lime-dark);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  z-index: var(--z-dropdown, 200);
  padding: var(--sp-1);
}
.cs:not(.is-open) .cs__menu { display: none; }
.cs__option {
  display: block; width: 100%;
  padding: 10px var(--sp-3);
  background: transparent; border: none;
  color: var(--c-text); font: inherit; text-align: left;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.cs__option:hover,
.cs__option.is-active { background: var(--c-lime-light); color: var(--c-navy); }
.cs__option[aria-selected="true"] {
  background: var(--c-lime); color: var(--c-navy); font-weight: 700;
}
/* Original-Select ist unsichtbar aber present (A11y + Form-Submit) */
.cs > select { position: absolute; opacity: 0; pointer-events: none;
                width: 100%; height: 100%; left: 0; top: 0; }

/* ─── Phase 25/2026-06-02: Spinner fuer Submit-Loading-States ───── */
.spinner {
  display: inline-block;
  width: 1em; height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: lb-spin 0.7s linear infinite;
  vertical-align: -0.15em;
}
.spinner--sm { width: 0.9em; height: 0.9em; border-width: 2px; }
@keyframes lb-spin { to { transform: rotate(360deg); } }
button[aria-busy="true"] { cursor: wait; opacity: 0.8; }

/* ─── Phase 25/2026-06-02: Favoriten-Karten — Kachel + Meta-Zeile ── */
.fav-card { display: flex; flex-direction: column; }
.fav-card__meta {
  margin-top: var(--sp-2);
  padding: 0 var(--sp-2);
  display: inline-flex; align-items: center; gap: var(--sp-1);
}

/* ─── Phase 26/2026-06-02: Foto-Editor (Cropper.js) im Upload-Modal ── */
.foto-editor { margin: var(--sp-3) 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.foto-editor__stage {
  width: 100%; max-height: 360px; background: var(--c-bg-soft, #f1f5f5);
  border: 1px solid var(--c-border, rgba(0,0,0,0.08)); border-radius: var(--r-md);
  overflow: hidden;
}
.foto-editor__stage img { display: block; max-width: 100%; }
.foto-editor__toolbar {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center;
}
.foto-editor__divider {
  width: 1px; align-self: stretch; background: var(--c-border, rgba(0,0,0,0.08));
}
.foto-editor__group-label {
  font-size: var(--fs-body-s); color: var(--c-muted);
  font-weight: 600; padding-right: var(--sp-2); align-self: center;
  width: 100%;
}
.foto-editor .foto-editor__toolbar + .foto-editor__toolbar { margin-top: var(--sp-2); }

/* Phase 26 v4/2026-06-02: Icon-Toolbar — kompakte Button-Gruppen mit Trennern. */
.foto-editor__toolbar {
  background: var(--c-bg-soft, #f1f5f5);
  border: 1px solid var(--c-border, rgba(0,0,0,0.08));
  border-radius: var(--r-md);
  padding: 6px 8px;
}
.foto-editor__group { display: inline-flex; gap: 4px; align-items: center; }
.foto-editor__sep {
  display: inline-block; width: 1px; height: 24px;
  background: var(--c-border, rgba(0,0,0,0.12));
  margin: 0 4px;
}

/* Phase 26 v3/2026-06-02: Modal-Actions in Split-Layout
   (Abbrechen links, Step-Buttons rechts gruppiert). */
.modal__actions--split { justify-content: space-between; align-items: center; }

/* hidden-Attribut bei den Wizard-Buttons strikt durchsetzen — defensive
   gegen Button-Defaults mit display:inline-flex !important. */
[data-photo-prev][hidden], [data-photo-next][hidden],
[data-photo-submit][hidden], [data-photo-step][hidden] { display: none !important; }

/* ─── Phase 27/2026-06-02: Daumen-Hoch im Foto-Hero + Stats-Widget ──── */
.gallery__like {
  /* Phase 27 v2/2026-06-02: NICHT rechts (da steht .gallery__credit),
     sondern links unten gleichgezogen — neben dem Credit. */
  position: absolute; bottom: var(--sp-3); left: var(--sp-3); z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--c-overlay-white-85, rgba(255,255,255,0.88));
  color: var(--c-muted, #444);
  border: 1px solid var(--c-border, rgba(0,0,0,0.08));
  font-size: var(--fs-body-s); font-weight: 600;
  cursor: pointer; transition: background var(--tr-fast), color var(--tr-fast);
}
.gallery__like:hover { background: #fff; color: var(--c-navy); }
.gallery__like[aria-pressed="true"] { background: var(--c-lime); color: var(--c-navy); border-color: var(--c-lime); }
.gallery__main { position: relative; }

.stats-card { text-align: left; }
.stats-card__list { list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: var(--sp-2); }
.stats-card__row { display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-body-s); color: var(--c-text); }
.stats-card__row strong { color: var(--c-navy); font-size: var(--fs-body); }

/* ─── Phase 28 v2/2026-06-02: Reisetagebuch — Echte Zeitleiste ─────── */
.diary-timeline {
  list-style: none; margin: 0; padding: 0; position: relative;
}
.diary-timeline::before {
  content: ""; position: absolute;
  left: 18px; top: 8px; bottom: 8px; width: 2px;
  background: var(--c-lime); border-radius: 1px;
}
.diary-tl-month { position: relative; padding-left: 56px; margin-bottom: var(--sp-6); }
.diary-tl-month__pin {
  position: absolute; left: 9px; top: 4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--c-lime);
  box-shadow: 0 0 0 4px var(--c-bg, #f3f7f4);
}
.diary-tl-month__head {
  margin: 0 0 var(--sp-3) 0; padding: 2px 0 var(--sp-2) 0;
  font-size: var(--fs-h3); font-weight: 700; color: var(--c-navy);
  border-bottom: 1px solid var(--c-border, rgba(0,0,0,0.08));
}
.diary-tl-list { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--sp-4); }
.diary-tl-entry { position: relative; }
.diary-tl-entry__dot {
  position: absolute; left: -45px; top: 22px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--c-surface, #fff);
  border: 3px solid var(--c-lime); z-index: 1;
}
.diary-tl-card,
.activity-card {
  display: grid; gap: var(--sp-3) var(--sp-4);
  grid-template-columns: 90px 1fr;
  grid-template-areas: "stamp body";
  align-items: start;
}
.diary-tl-card--with-photo,
.activity-card--with-photo {
  grid-template-columns: 90px 200px 1fr;
  grid-template-areas: "stamp photo body";
}
/* Phase 28 v5/2026-06-02: Eintrags-Variante ohne Datums-Stamp.
   Foto + Body (oder nur Body) — fuer "Meine Eintraege" etc. */
.activity-card--no-stamp {
  grid-template-columns: 1fr;
  grid-template-areas: "body";
}
.activity-card--no-stamp.activity-card--with-photo {
  grid-template-columns: 220px 1fr;
  grid-template-areas: "photo body";
}
@media (max-width: 720px) {
  .activity-card--no-stamp.activity-card--with-photo {
    grid-template-columns: 1fr;
    grid-template-areas: "photo" "body";
  }
}
@media (max-width: 720px) {
  .diary-tl-card,
  .diary-tl-card--with-photo,
  .activity-card,
  .activity-card--with-photo {
    grid-template-columns: 1fr;
    grid-template-areas: "stamp" "photo" "body";
  }
}
/* Photo-Slot in activity-card */
.activity-card__photo {
  grid-area: photo; display: block;
  aspect-ratio: 4/3; border-radius: var(--r-md);
  overflow: hidden; background: var(--c-bg-soft, #f1f5f5);
}
.activity-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.activity-card__photo-btn {
  display: block; width: 100%; height: 100%;
  padding: 0; border: 0; background: transparent;
  cursor: zoom-in;
}
.activity-card__photo-empty {
  height: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--c-muted); font-size: var(--fs-body-s); text-align: center;
  padding: var(--sp-2);
}
.diary-tl-card__stamp,
.activity-card__stamp {
  grid-area: stamp;
  display: flex; flex-direction: column; align-items: center;
  padding: var(--sp-2) var(--sp-1);
  background: var(--c-navy); color: #fff;
  border-radius: var(--r-md); min-width: 70px;
  text-align: center; line-height: 1.1;
}
.diary-tl-card__day,
.activity-card__day { font-size: 28px; font-weight: 800; }
.diary-tl-card__mon,
.activity-card__mon {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--c-lime); font-weight: 700;
}
.diary-tl-card__time,
.activity-card__time { font-size: 12px; opacity: 0.78; margin-top: 2px; }
.diary-tl-card__photo {
  grid-area: photo; display: block;
  aspect-ratio: 4/3; border-radius: var(--r-md);
  overflow: hidden; background: var(--c-bg-soft, #f1f5f5);
}
.diary-tl-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.diary-tl-card__body,
.activity-card__body { grid-area: body;
  display: flex; flex-direction: column; gap: var(--sp-1); }
.diary-tl-card__title,
.activity-card__title {
  margin: 0; font-size: var(--fs-h4);
  color: var(--c-navy); font-weight: 700; line-height: 1.25;
}
/* Title-Link: kein underline (Brand-Konvention), Hover dezent in Lime. */
.diary-tl-card__title a,
.activity-card__title a {
  color: inherit; text-decoration: none;
  transition: color var(--tr-fast);
}
.diary-tl-card__title a:hover,
.activity-card__title a:hover { color: var(--c-lime-dark, var(--c-lime)); }
.diary-tl-card__where,
.activity-card__where {
  display: inline-flex; align-items: center; gap: 4px; margin: 0;
}
.diary-tl-card__note,
.activity-card__note {
  margin: var(--sp-2) 0 0 0; padding: var(--sp-2) var(--sp-3);
  background: var(--c-bg-soft, #f1f5f5);
  border-left: 3px solid var(--c-lime); border-radius: var(--r-sm);
  font-style: italic; color: var(--c-text);
}
.diary-tl-card__actions,
.activity-card__actions { margin-top: var(--sp-3); }
/* Phase 28 v3/2026-06-02: gemeinsame List-Klasse fuer Konto-Listen
   (Bewertungen, Vorschlaege, …). Reisetagebuch nutzt eigene
   .diary-timeline weil dort die vertikale Achse drumherum laeuft. */
.activity-list { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--sp-4); }
/* Phase 28 v4/2026-06-02: Dezenter Loesch-Icon-Button oben rechts in
   der Card. Grau auf Weiss, im Hover Rot. */
.activity-card__close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--c-muted, #6b7280);
  border: 1px solid var(--c-border, rgba(0,0,0,0.10));
  cursor: pointer;
  transition: color var(--tr-fast), background var(--tr-fast),
              border-color var(--tr-fast);
}
.activity-card__close:hover {
  color: var(--c-error, #c53030);
  border-color: var(--c-error, #c53030);
  background: #fff;
}

/* ============================================================
   Phase 31 / Terminkalender — event-date Block
   Verwendet im Detail-Page und auf Termin-Cards (Listing).
   Anti-Drift §2.6: zentral angelegt, mehrfach verwendet.
   ============================================================ */
.event-date {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-navy); color: #fff;
  border-radius: var(--r-md);
  font-variant-numeric: tabular-nums;
}
.event-date--s { padding: var(--sp-2) var(--sp-3); gap: var(--sp-2); }
.event-date--l { padding: var(--sp-4) var(--sp-5); gap: var(--sp-4); }
.event-date__cell {
  display: flex; flex-direction: column; align-items: center; line-height: 1;
}
.event-date__day {
  font-size: 28px; font-weight: 700; letter-spacing: -0.02em;
}
.event-date--l .event-date__day { font-size: 36px; }
.event-date--s .event-date__day { font-size: 20px; }
.event-date__mon {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-top: 2px; opacity: 0.85;
}
.event-date__sep {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.7;
}
.event-date__time {
  display: flex; flex-direction: column; align-items: flex-start;
  font-size: 13px; line-height: 1.3;
}
.event-date__time-sep {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.7;
}
/* Card-Overlay-Variante (auf Bild oben links) */
.event-date--overlay {
  position: absolute; top: var(--sp-3); left: var(--sp-3);
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

/* Termin-Detail-Header: Datum links, Titel rechts */
.termin-head {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-4); margin: var(--sp-4) 0 var(--sp-3);
}
.termin-head__main { flex: 1 1 320px; min-width: 0; }
.termin-head__title { margin: 0 0 var(--sp-2); }
.termin-head__venue { color: var(--c-muted); font-size: 14px; }

/* Eintritt + Tickets Action-Row im Detail */
.termin-actions {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  align-items: center; margin: var(--sp-4) 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-bg-soft, #f5f7f7); border-radius: var(--r-md);
}
.termin-actions__price {
  font-weight: 600; color: var(--c-navy); font-size: 15px;
}

/* Image-Credit-Caption */
.event-image-credit {
  font-size: 11px; color: var(--c-muted);
  padding: var(--sp-1) var(--sp-2);
  font-style: italic;
}

/* ============================================================
   Phase 31 / Terminkalender — Detail-Sidebar + Hero
   Anti-Drift: nutzt Tokens (var(--sp-*), --c-*, --r-*) und
   reused den 2-Spalten-Grid von .detail-page.
   Mobile: stacked via existing detail-page-Mobile-Media-Query.
   ============================================================ */

/* Termin-Hero: gleicher Container wie detail-page__hero, aber mit
   prominentem Datums-Badge oben links und optional Abgesagt-Overlay. */
.termin-hero { position: relative; overflow: hidden; border-radius: var(--r-md); }
.termin-hero img { width: 100%; height: auto; display: block; }
.termin-hero__date {
  position: absolute; top: var(--sp-4); left: var(--sp-4);
  background: var(--c-white); color: var(--c-navy);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  display: flex; flex-direction: column; align-items: center;
  line-height: 1; box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  font-variant-numeric: tabular-nums;
}
.termin-hero__date-day { font-size: 36px; font-weight: 700; letter-spacing: -0.02em; }
.termin-hero__date-mon { font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px;
  color: var(--c-muted); }
.termin-hero__cancelled { position: absolute; top: var(--sp-4); right: var(--sp-4); }

/* Sidebar */
.termin-sidebar {
  display: flex; flex-direction: column; gap: var(--sp-4);
  position: sticky; top: var(--sp-5);
}
@media (max-width: 900px) {
  .termin-sidebar { position: static; }
}

/* Generische Info-Card (mehrfach in Sidebar) */
.info-card {
  background: var(--c-white);
  border: 1px solid var(--c-border, rgba(0,0,0,0.08));
  border-radius: var(--r-md);
  padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.info-card__head {
  margin: 0; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--c-muted);
  display: inline-flex; align-items: center; gap: var(--sp-2);
}
.info-card__row {
  display: flex; align-items: center; gap: var(--sp-2);
  color: var(--c-navy);
}
.info-card__price {
  font-size: 17px; font-weight: 700;
}
.info-card__addr {
  font-size: 14px; line-height: 1.5; color: var(--c-text, var(--c-navy));
}
.info-card__map { width: 100%; }
.info-card__when {
  display: flex; flex-direction: column; gap: var(--sp-1);
  font-size: 14px;
}
.info-card__when strong { font-size: 15px; color: var(--c-navy); }
.info-card__when span { color: var(--c-muted); }
.info-card__date { display: flex; justify-content: center; }
.info-card--date { background: var(--c-bg-soft, #f3f7f7); }

/* btn-Block + btn-SM (fehlten im Stack) */
.btn--block { display: flex; width: 100%; justify-content: center; }
.btn--sm    { font-size: 13px; padding: var(--sp-2) var(--sp-3); }

/* Image-Credit unter Hero */
.event-image-credit {
  font-size: 11px; color: var(--c-muted);
  padding: var(--sp-1) var(--sp-2) 0;
  font-style: italic;
}

/* Variante: detail-page--termin nutzt den 2-Spalten-Grid, aber Sidebar
   etwas schmaler (320 statt 360) damit das Bild rechts mehr Luft hat. */
@media (min-width: 901px) {
  .detail-page--termin { grid-template-columns: 1fr 340px; }
}

/* ============================================================
   Phase 31 / Termin-Portal & Termin-Card-Variante
   ============================================================ */

/* Termin-Card: nutzt .dest-card-Klassen und ergaenzt Datum-Overlay */
.dest-card--termin .dest-card__photo { position: relative; }
.dest-card--termin .termin-card__date {
  position: absolute; top: var(--sp-3); left: var(--sp-3);
  background: var(--c-white); color: var(--c-navy);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  display: flex; flex-direction: column; align-items: center;
  line-height: 1; box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  font-variant-numeric: tabular-nums; z-index: 2;
}
.dest-card--termin .termin-card__date-day { font-size: 22px; font-weight: 700; }
.dest-card--termin .termin-card__date-mon { font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; margin-top: 2px;
  color: var(--c-muted); }
.dest-card--termin .termin-card__when {
  font-size: 12px; color: var(--c-muted);
  margin-top: var(--sp-1);
}

/* Termin-Card ohne Bild: Datum links als grosses Element */
.termin-card--no-photo {
  display: grid; grid-template-columns: 80px 1fr; gap: var(--sp-4);
  background: var(--c-white);
  border: 1px solid var(--c-border, rgba(0,0,0,0.08));
  border-radius: var(--r-md);
  padding: var(--sp-4);
}
.termin-card--no-photo:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.termin-card--no-photo .termin-card__date {
  display: flex; flex-direction: column; align-items: center;
  background: var(--c-navy); color: #fff; border-radius: var(--r-sm);
  padding: var(--sp-2); line-height: 1;
}
.termin-card--no-photo .termin-card__date-day { font-size: 24px; font-weight: 700; }
.termin-card--no-photo .termin-card__date-mon { font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.08em; margin-top: 2px; opacity: 0.85; }

/* Portal-Hero (Termin-Startseite) */
.termin-portal-hero {
  background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-navy-dark, #0e2235) 100%);
  color: var(--c-white);
  padding: var(--sp-9) var(--sp-6) var(--sp-8);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-7);
}
.termin-portal-hero h1 {
  font-size: clamp(28px, 4vw, 42px); font-weight: 900;
  margin: 0 0 var(--sp-3); letter-spacing: -0.02em;
}
.termin-portal-hero p {
  font-size: 17px; opacity: 0.92; max-width: 640px; margin: 0 0 var(--sp-5);
}
.termin-portal-hero__filter {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
}
.termin-portal-hero__filter .chip {
  background: rgba(255,255,255,0.12); color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
}
.termin-portal-hero__filter .chip.is-active,
.termin-portal-hero__filter .chip:hover {
  background: var(--c-lime); color: var(--c-navy); border-color: var(--c-lime);
}

/* Big-City-Tile fuer Portal */
.city-grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.city-tile {
  position: relative; display: block;
  aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--r-md);
  background: var(--c-navy); color: #fff;
  text-decoration: none;
}
.city-tile img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.65;
  transition: opacity var(--tr-fast), transform var(--tr-fast);
}
.city-tile:hover img { opacity: 0.85; transform: scale(1.04); }
.city-tile__overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--sp-3) var(--sp-4);
  background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, transparent 100%);
}
.city-tile__name { display: block; font-size: 18px; font-weight: 700; }
.city-tile__count { display: block; font-size: 12px; opacity: 0.85; margin-top: 2px; }

/* Termin-Grid (responsive Card-Grid) */
.termin-grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.termin-list {
  display: flex; flex-direction: column; gap: var(--sp-3);
}

/* ============================================================
   Phase 31 v2 (2026-06-03) — Termin-Portal Polish
   - Hero kompakter
   - Theme-Tiles kompakt
   - Card: Bild fixe Aspect-Ratio 16:9, max-height 180px
   - Grid 3-spaltig auf Desktop, 2 auf Tablet, 1 auf Mobile
   - Vertikale Card-Hoehe genormt
   Anti-Drift §2.6: ergaenzt bestehende .dest-card-Klassen.
   ============================================================ */

/* Hero kompakter */
.termin-portal-hero--compact { padding: var(--sp-6) var(--sp-6); margin-bottom: var(--sp-5); }
.termin-portal-hero--compact h1 { font-size: clamp(24px, 3vw, 32px); margin: 0 0 var(--sp-2); }
.termin-portal-hero__sub { font-size: 15px; opacity: 0.9; margin: 0 0 var(--sp-4); }
.termin-portal-hero__head { margin-bottom: var(--sp-3); }

/* Theme-Tiles — kompakt, 6 in einer Reihe Desktop */
.theme-tiles {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.theme-tile {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  text-decoration: none; color: var(--c-navy);
  transition: border-color var(--tr-fast), transform var(--tr-fast);
}
.theme-tile:hover { border-color: var(--c-lime); transform: translateY(-2px); }
.theme-tile.is-active { border-color: var(--c-navy); background: var(--c-bg-soft, #f3f7f7); }
.theme-tile__icon {
  flex: 0 0 36px; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-bg-soft, #f3f7f7);
  color: var(--c-navy); border-radius: var(--r-sm);
}
.theme-tile__body { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.theme-tile__label { font-weight: 600; font-size: 14px; }
.theme-tile__count { font-size: 11px; color: var(--c-muted); margin-top: 2px; }

/* Termin-Card-Variante: kompakter, fixe Hoehe, Bild 16:9 */
.termin-grid--compact {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-4);
}
.dest-card--termin {
  display: flex; flex-direction: column;
  min-height: 320px;
}
.dest-card__photo--termin {
  position: relative;
  aspect-ratio: 16 / 9;
  max-height: 180px; min-height: 130px;
  overflow: hidden;
}
.dest-card__photo--termin img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* Datum-Badge auf der Card kleiner und white-on-card */
.dest-card--termin .termin-card__date {
  position: absolute; top: var(--sp-2); left: var(--sp-2);
  background: var(--c-white); color: var(--c-navy);
  border-radius: var(--r-sm);
  padding: 4px 8px;
  display: inline-flex; flex-direction: column; align-items: center;
  line-height: 1; box-shadow: 0 2px 6px rgba(0,0,0,0.16);
  font-variant-numeric: tabular-nums; z-index: 2;
}
.dest-card--termin .termin-card__date-day { font-size: 18px; font-weight: 700; }
.dest-card--termin .termin-card__date-mon { font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px;
  color: var(--c-muted); }
/* Variante ohne Bild: Datum inline */
.termin-card__date--inline {
  position: static; box-shadow: none;
  background: var(--c-navy); color: var(--c-white) !important;
  padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2);
  align-self: flex-start;
}
.termin-card__date--inline .termin-card__date-day,
.termin-card__date--inline .termin-card__date-mon { color: var(--c-white); }
.termin-card--no-photo { display: none; } /* abgekuendigt — wir nutzen die normale Card */

/* Card-Body kompakt */
.dest-card--termin .dest-card__body { padding: var(--sp-3) var(--sp-4); flex: 1; }
.dest-card--termin .dest-card__title {
  font-size: 16px; line-height: 1.25; margin: var(--sp-1) 0 var(--sp-2);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.dest-card--termin .dest-card__cat {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--c-lime-dark);
}
.termin-card__meta {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: var(--sp-2); font-size: 12px; color: var(--c-muted);
}
.termin-card__meta span { display: inline-flex; align-items: center; gap: 6px; }

/* City-Grid kompakter (6 pro Reihe Desktop, kleinere Tiles) */
.city-grid--compact {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.city-grid--compact .city-tile { aspect-ratio: 4 / 3; }
.city-grid--compact .city-tile__overlay {
  padding: var(--sp-2) var(--sp-3);
  background: linear-gradient(0deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.32) 60%, transparent 100%);
}
.city-grid--compact .city-tile__name { font-size: 15px; }
.city-grid--compact .city-tile__count { font-size: 11px; }
.city-tile {
  background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-navy-dark, #0e2235) 100%);
}

/* Empty-State Info-Card */
.info-card--empty {
  text-align: center; padding: var(--sp-8) var(--sp-6);
}

/* Mobile: termin-grid 1-spaltig, theme-tiles 2-spaltig */
@media (max-width: 600px) {
  .termin-grid--compact { grid-template-columns: 1fr; }
  .theme-tiles { grid-template-columns: repeat(2, 1fr); }
  .city-grid--compact { grid-template-columns: repeat(2, 1fr); }
  .termin-portal-hero--compact h1 { font-size: 22px; }
}

/* ============================================================
   Phase 31.15 (2026-06-03) — Termin-Portal nach meinestadt-Pattern
   - Heller Hero mit Such-Bar (Was + Ort)
   - Genre-Liste: 2-spaltig Text-Links mit Pfeil
   - Featured-Grid: 3 grosse Cards
   - Genre-Grid: 4 Cards pro Sektion
   - Staedte-Liste: 3-spaltig Text-Links
   Anti-Drift: nutzt bestehende .section / .section-head / .btn /
   .dest-card / mol_termin_card.
   ============================================================ */

/* Hero: hell, prominent, kein dunkler Gradient */
.termin-hero {
  background: var(--c-bg-soft, #f3f7f7);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  margin-bottom: var(--sp-7);
  text-align: left;
}
.termin-hero__title {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  margin: 0 0 var(--sp-2);
  color: var(--c-navy);
}
.termin-hero__sub {
  margin: 0 0 var(--sp-5);
  color: var(--c-muted);
  font-size: 15px;
}

/* Such-Bar: 2 Felder + Button, horizontal auf Desktop */
.termin-search {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: var(--sp-2);
  background: var(--c-white);
  border-radius: var(--r-md);
  padding: var(--sp-2);
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.termin-search__field {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 0 var(--sp-3);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  min-height: 44px;
}
.termin-search__icon { color: var(--c-muted); flex-shrink: 0; }
.termin-search__field input {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: transparent;
  font-size: 15px; color: var(--c-navy);
}
.termin-search__field input::placeholder { color: var(--c-muted); }
.termin-search__btn { min-height: 44px; padding: 0 var(--sp-4); }

@media (max-width: 720px) {
  .termin-search { grid-template-columns: 1fr; }
}

/* Genre-Liste: 2 Spalten Text-Links mit Pfeil */
.genre-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--c-border);
}
.genre-list__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3);
  border-bottom: 1px solid var(--c-border);
  text-decoration: none; color: var(--c-navy);
  transition: background var(--tr-fast);
}
.genre-list__row:hover { background: var(--c-bg-soft, #f3f7f7); }
.genre-list__label { font-weight: 500; font-size: 15px; }
.genre-list__count { font-size: 13px; }
.genre-list__arrow { color: var(--c-muted); display: inline-flex; }
@media (max-width: 600px) { .genre-list { grid-template-columns: 1fr; } }

/* Featured-Grid: 3 grosse Cards */
.featured-grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(3, 1fr);
}
.featured-grid .dest-card--termin {
  background: var(--c-bg-soft, #f3f7f7);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.featured-grid .dest-card__photo--termin {
  aspect-ratio: 16 / 9; max-height: 200px;
}
@media (max-width: 900px) { .featured-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .featured-grid { grid-template-columns: 1fr; } }

/* Genre-Grid: 4 Cards pro Sektion (Desktop) */
.genre-grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(4, 1fr);
}
.genre-grid .dest-card--termin {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
  min-height: auto;
}
.genre-grid .dest-card__photo--termin {
  aspect-ratio: 4 / 3; max-height: 140px; min-height: 100px;
}
.genre-grid .dest-card__body { padding: var(--sp-3); }
.genre-grid .dest-card__title { font-size: 14px; -webkit-line-clamp: 2; }
.genre-grid .termin-card__meta { font-size: 11px; }
@media (max-width: 1024px) { .genre-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .genre-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .genre-grid { grid-template-columns: 1fr; } }

/* "Alle X" Button rechts vom Section-Head */
.section-head__more {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: 14px; color: var(--c-navy);
  text-decoration: none; font-weight: 500;
}
.section-head__more:hover { color: var(--c-lime-dark); }

/* Staedte-Liste: 3-spaltig Text-Links */
.city-link-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--c-border);
}
.city-link {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-3) var(--sp-3);
  border-bottom: 1px solid var(--c-border);
  text-decoration: none; color: var(--c-navy);
  font-size: 14px;
  transition: background var(--tr-fast);
}
.city-link:hover { background: var(--c-bg-soft, #f3f7f7); }
.city-link__arrow { color: var(--c-muted); display: inline-flex; }
@media (max-width: 720px) { .city-link-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .city-link-list { grid-template-columns: 1fr; } }

/* ============================================================
   Phase 31.15 — Listing-Layout (Sidebar + Reihen)
   Pattern aus meinestadt.de Genre-Detail.
   ============================================================ */

.termin-list-head { margin: var(--sp-5) 0 var(--sp-4); }
.termin-list-head h1 { margin: 0 0 var(--sp-2); font-size: clamp(22px, 3vw, 28px); }

/* 2-spaltig: Sidebar 240px + Liste */
.termin-listing {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--sp-5);
}
.termin-listing__side {
  position: sticky; top: var(--sp-5); align-self: start;
}
.termin-listing__main { min-width: 0; }
@media (max-width: 720px) {
  .termin-listing { grid-template-columns: 1fr; }
  .termin-listing__side { position: static; }
}

/* Filter-Form */
.filter-form {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
}
.filter-form__h {
  margin: 0 0 var(--sp-3); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-muted);
}
.filter-form__group { margin-bottom: var(--sp-3); }
.filter-form__label {
  display: block; font-size: 13px; color: var(--c-muted); margin-bottom: 4px;
}
.filter-form__reset {
  display: block; text-align: center; font-size: 13px;
  color: var(--c-muted); margin-top: var(--sp-2);
}

/* Termin-Rows */
.termin-rows {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--c-border);
}
.termin-rows > li { border-bottom: 1px solid var(--c-border); }

.termin-row {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-2);
  align-items: center;
}
.termin-row__photo {
  display: block; width: 100px; height: 70px;
  overflow: hidden; border-radius: var(--r-sm);
  background: var(--c-bg-soft, #f3f7f7);
  flex-shrink: 0;
}
.termin-row__photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.termin-row__photo-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-muted);
}
.termin-row__body { min-width: 0; }
.termin-row__title {
  margin: 0 0 4px; font-size: 15px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.termin-row__title a {
  color: var(--c-navy); text-decoration: none;
}
.termin-row__title a:hover { color: var(--c-lime-dark); text-decoration: underline; }
.termin-row__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  font-size: 13px; color: var(--c-muted);
}
.termin-row__meta span { display: inline-flex; align-items: center; gap: 4px; }
.termin-row__cta { flex-shrink: 0; }

@media (max-width: 600px) {
  .termin-row {
    grid-template-columns: 80px 1fr;
    grid-template-areas:
      "photo body"
      "cta cta";
  }
  .termin-row__photo { grid-area: photo; width: 80px; height: 60px; }
  .termin-row__body { grid-area: body; }
  .termin-row__cta { grid-area: cta; justify-self: stretch; }
  .termin-row__cta .btn { width: 100%; }
}

.pager { display: flex; justify-content: center; margin-top: var(--sp-5); }

.termin-search--inline { margin-top: var(--sp-3); }

/* ============================================================
   Phase 31.16 (2026-06-03) — Termin-Detail Polish
   Anti-Drift: nutzt --nav-h (tokens.css), --c-text, mini-map id,
   info-card-Klassen, btn--block.
   ============================================================ */

/* Sticky-Sidebar unter Navbar (vorher rutschte sie 20px zu hoch) */
.termin-sidebar {
  position: sticky;
  top: calc(var(--nav-h) + var(--sp-4));
  align-self: start;
}
@media (max-width: 900px) {
  .termin-sidebar { position: static; }
}

/* Event-Lead: dunkler als .lead (User-Feedback "grau ist nicht schoen") */
.event-lead {
  font-size: var(--fs-body-l);
  color: var(--c-text);
  line-height: var(--lh-loose);
  margin: 0 0 var(--sp-5);
}

/* Hero-Bild mit floating Datum-Overlay unten links */
.termin-hero-img { position: relative; overflow: hidden;
  border-radius: var(--r-md); }
.termin-hero-img img { width: 100%; height: auto; display: block; }
.termin-hero-img__date {
  position: absolute; top: var(--sp-3); left: var(--sp-3);
  background: var(--c-white); color: var(--c-navy);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
  display: inline-flex; flex-direction: column; align-items: center;
  line-height: 1; box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  font-variant-numeric: tabular-nums;
}
.termin-hero-img__day { font-size: 26px; font-weight: 700; }
.termin-hero-img__mon { font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px;
  color: var(--c-muted); }
.termin-hero-img__cancel { position: absolute; top: var(--sp-3); right: var(--sp-3); }

/* Organizer-Line ueber dem Title (kleines Label) */
.termin-organizer-line {
  text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 600; margin: 0 0 var(--sp-2);
}

/* Organizer-Box: Name + Branchenbuch-Link + Webseite-Btn */
.organizer-box {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4);
  justify-content: space-between;
}

/* Karten-Container fixe Hoehe + visible Leaflet */
.info-card__map {
  width: 100%; height: 220px;
  border-radius: var(--r-sm);
  background: var(--c-bg-soft, #eef1f1);
}
.info-card__route-row { gap: var(--sp-2); flex-wrap: wrap; }
.info-card__route-row .btn { flex: 1; }

/* Serie-Liste in Sidebar: Datum links, Stadt rechts */
.serie-list { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; }
.serie-list li { border-bottom: 1px solid var(--c-border); }
.serie-list li:last-child { border-bottom: 0; }
.serie-list a {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-2) 0;
  text-decoration: none; color: var(--c-navy);
  font-size: 13px;
}
.serie-list a:hover { color: var(--c-lime-dark); }
.serie-list__date { display: inline-flex; flex-direction: column; line-height: 1.2; }
.serie-list__city { font-size: 12px; }

/* Beschreibung-Section: NUR fuer Termine ohne Card-Wrapper. POI behaelt
   sein weisses Card-Layout (Anti-Drift §2.6, Phase 31.18 Hotfix 2026-06-03). */
.detail-page--termin .detail-page__section--description {
  background: transparent; border: 0; padding: 0;
}
.detail-page--termin .detail-page__section--description .prose {
  color: var(--c-text); line-height: var(--lh-loose);
}

/* info-card__share kleiner */
.info-card__share .btn { flex: 1; }

/* Veranstalter Webseite Button hellgruen */
.organizer-box .btn--ghost { background: var(--c-bg-soft, #f3f7f7); }

/* ============================================================
   Phase 31.19 (2026-06-03) — Termin-spezifische Mini-Cards
   Anti-Drift: nutzt .card.card--padded als Container, ergaenzt
   nur Inhalts-Layout. Sidebar = bestehende .detail-side.
   ============================================================ */

/* Datum-Card (Top der Sidebar) */
.termin-date-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.termin-date-card__main {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-4);
}
.termin-date-card__cell {
  display: flex; flex-direction: column; align-items: center; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.termin-date-card__day { font-size: 32px; font-weight: 800; color: var(--c-navy); }
.termin-date-card__mon { font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-muted);
  margin-top: 4px; }
.termin-date-card__sep {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--c-muted);
}
.termin-date-card__when {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 14px; text-align: center;
}
.termin-date-card__when strong { color: var(--c-navy); }

/* Eintritt + Tickets Card */
.termin-price-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.termin-price-card__price {
  margin: 0; font-size: 17px; font-weight: 700; color: var(--c-navy);
  display: inline-flex; align-items: center; gap: var(--sp-2);
}

/* Serie-Liste in Sidebar */
.termin-serie-card .h3 { margin-bottom: var(--sp-3); }
.termin-serie-list { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; }
.termin-serie-list li { border-bottom: 1px solid var(--c-border); }
.termin-serie-list li:last-child { border-bottom: 0; }
.termin-serie-list a {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-2) 0;
  text-decoration: none; color: var(--c-navy);
  font-size: 13px;
}
.termin-serie-list a:hover { color: var(--c-lime-dark); }
.termin-serie-list__date { display: inline-flex; flex-direction: column;
  line-height: 1.2; }
.termin-serie-list__city { font-size: 12px; }

/* Detail-Side reuse: Termine ergaenzen Order fuer die zusaetzlichen Cards */
@media (min-width: 961px) {
  .detail-page--termin .detail-side .termin-date-card  { order: 0; }
  .detail-page--termin .detail-side .action-card       { order: 1; }
  .detail-page--termin .detail-side .termin-price-card { order: 2; }
  .detail-page--termin .detail-side .contact-card      { order: 3; }
  .detail-page--termin .detail-side .mini-map-card     { order: 4; }
  .detail-page--termin .detail-side .termin-serie-card { order: 5; }
}

/* Phase 31.20: Original-Beschreibung aufklappbar */
.original-text {
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-bg-soft, #f3f7f7);
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
}
.original-text > summary {
  cursor: pointer; font-weight: 600; color: var(--c-navy);
  list-style: none;
}
.original-text > summary::before {
  content: '+'; display: inline-block; width: 1em; font-weight: 700;
  color: var(--c-lime-dark); margin-right: var(--sp-2);
}
.original-text[open] > summary::before { content: '–'; }
.prose--original { margin-top: var(--sp-3); color: var(--c-muted); }
.prose--original p { font-size: 14px; line-height: 1.6; }

/* ============================================================
   Phase 31.23 (2026-06-03) — Termin-Detail Mobile-Order + Polish
   Reuse: bestehende POI-Mobile-Order (Z. 695-721). Termin-spezifische
   Cards bekommen passende Order-Werte damit Reihenfolge stimmt.
   ============================================================ */
@media (max-width: 960px) {
  /* Reihenfolge wie POI, ergaenzt um Termin-spezifische Cards.
     Hero(1) → Header(2) → Datum(3) → Aktionen(4) → Lead+Beschreibung(7)
     → Facets(6) → Eintritt(8) → Kontakt(9) → Karte(11) → Serie(12)
     → Veranstalter(19) */
  .detail-page--termin .termin-date-card  { order: 3; }
  .detail-page--termin .action-card       { order: 4; }
  .detail-page--termin .termin-price-card { order: 8; }
  .detail-page--termin .termin-serie-card { order: 12; }
}

/* Veranstalter-Zeile in Brand-CI (keine Button-Wuestung) */
.organizer-line { margin: 0; font-size: var(--fs-body); color: var(--c-text); }
.organizer-line a { color: var(--c-lime-dark); font-weight: 600; }

/* Contact-URL/Website soll auf Mobile nicht ueberlaufen */
.contact-rows .info-row { min-width: 0; }
.contact-rows .info-row a,
.contact-rows .info-row span:not(.info-row__icon) {
  display: inline-block; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  vertical-align: bottom;
}

/* map-routes — auf Mobile 3 Buttons in 1 Zeile (kompakter) */
@media (max-width: 720px) {
  .map-routes { gap: var(--sp-1); }
  .map-routes .btn { padding: var(--sp-1) var(--sp-2); font-size: 12px; }
}

/* Portal-Filter-Chips: Mobile NICHT wrappen, abschneiden ohne Scrollbar */
@media (max-width: 600px) {
  .termin-portal-hero__filter {
    flex-wrap: nowrap;
    overflow: hidden;
    mask-image: linear-gradient(to right, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
  }
  .termin-portal-hero__filter .chip {
    flex-shrink: 0; white-space: nowrap;
  }
}

/* Breadcrumb mehr Luft nach unten zum Hero */
.breadcrumb-wrap { margin-bottom: var(--sp-3); }

/* Phase 31.23 Fix: Lead+Image-Credit muessen in der Mobile-Order
   eingereiht sein, sonst landen sie als display:contents-Wraisen
   vor dem Hero. */
@media (max-width: 960px) {
  .detail-page--termin .event-lead          { order: 7; }
  .detail-page--termin .event-image-credit  { order: 1; }
}