:root {
  --bg: #f6f4ef;
  --bg-soft: #fbfaf7;
  --surface: rgba(255, 255, 255, 0.78);
  --surface-strong: rgba(255, 255, 255, 0.92);
  --text: #1f2430;
  --muted: #667085;
  --line: rgba(99, 115, 129, 0.14);
  --shadow: 0 20px 50px rgba(31, 36, 48, 0.10);
  --shadow-soft: 0 10px 26px rgba(31, 36, 48, 0.07);

  --brand-dark: #1f2f45;
  --brand-mid: #5a7895;
  --brand-soft: #dbe7f2;

  --mood-feierabend: #deb8b4;
  --mood-party: #cdbdee;
  --mood-chill: #b4d9d0;
  --mood-essen: #e8c99a;
  --mood-arbeiten: #bccfde;

  --tag-location-bg: #dde9f4;
  --tag-location-text: #35536b;

  --tag-time-bg: #e8e3f1;
  --tag-time-text: #5a4f73;

  --tag-source-bg: #eee6db;
  --tag-source-text: #6b5a46;

  --tag-alt-bg: #f3e2dc;
  --tag-alt-text: #7a5449;

  --tag-live-bg: #dceee7;
  --tag-live-text: #43685b;

  --tag-fit-bg: #dfe9f2;
  --tag-fit-text: #294760;

  --loader-accent: #d6dee6;
  --loader-accent-rgb: 214, 222, 230;

  --now-accent: #f0d28a;
  --now-accent-rgb: 240, 210, 138;
  --now-deep: #7a5a1a;
  --loader-deep: #16324c;

  --radius-xl: 30px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-pill: 999px;

  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  font-family: Inter, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(220, 211, 242, 0.32) 0%, rgba(220, 211, 242, 0) 28%),
    radial-gradient(circle at top right, rgba(207, 231, 225, 0.28) 0%, rgba(207, 231, 225, 0) 24%),
    linear-gradient(180deg, #f7f3ec 0%, #f6f4ef 42%, #fbfaf7 100%);
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

img,
svg {
  max-width: 100%;
  display: block;
}

.app-shell {
  width: 100%;
  max-width: 100%;
  padding: 0 0 calc(20px + var(--safe-bottom));
}

.app-header--compact {
  display: flex;
  justify-content: center;
  padding: 24px 18px 10px;
}

.brand-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.brand-subline {
  margin: 0;
  max-width: 280px;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(31, 47, 69, 0.72);
}

.citymood-logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  background:
    linear-gradient(135deg, rgba(31, 47, 69, 0.96) 0%, rgba(90, 120, 149, 0.94) 100%);
  color: #fff;
  box-shadow:
    0 14px 28px rgba(31, 47, 69, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.citymood-logo__icon {
  position: relative;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
}

.citymood-logo__ring {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(255, 255, 255, 0.88);
  border-radius: 50%;
}

.citymood-logo__dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background: #ffffff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.12);
}

.citymood-logo__pulse {
  position: absolute;
  top: 2px;
  right: -1px;
  width: 13px;
  height: 13px;
  border-top: 2px solid rgba(255, 255, 255, 0.88);
  border-right: 2px solid rgba(255, 255, 255, 0.88);
  border-radius: 0 100% 0 0;
  transform: rotate(12deg);
  opacity: 0.95;
}

.citymood-logo__wordmark {
  display: inline-flex;
  align-items: baseline;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  white-space: nowrap;
}

.citymood-logo__city,
.citymood-logo__mood {
  font-size: 15px;
  color: #ffffff;
}

.citymood-logo__mood {
  opacity: 0.78;
}

.app-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 14px 0;
}

.card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 88px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.50) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
}

.card__head {
  padding: 22px 20px 0;
}

.card__head--compact h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.card__head--compact p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

.card__eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-bottom: 10px;
  padding: 0 11px;
  border-radius: var(--radius-pill);
  background: rgba(219, 231, 242, 0.72);
  color: var(--brand-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.card--moods {
  background:
    radial-gradient(circle at top right, rgba(232, 207, 207, 0.24) 0%, rgba(232, 207, 207, 0) 32%),
    radial-gradient(circle at left center, rgba(220, 211, 242, 0.22) 0%, rgba(220, 211, 242, 0) 28%),
    linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.78) 100%);
  padding-bottom: 18px;
}

.mood-context {
  padding: 14px 20px 0;
}

.mood-location {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 13px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(90, 120, 149, 0.16);
  box-shadow: var(--shadow-soft);
  color: var(--brand-dark);
  font-size: 13px;
  font-weight: 700;
}

.mood-location__icon {
  font-size: 13px;
  opacity: 0.85;
}

.mood-location--hint {
  border: 1.5px dashed rgba(var(--now-accent-rgb), 0.72);
  background: rgba(var(--now-accent-rgb), 0.18);
  color: var(--now-deep);
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    transform 0.15s ease;
}

.mood-location--hint:hover,
.mood-location--hint:active {
  background: rgba(var(--now-accent-rgb), 0.28);
  transform: scale(0.98);
}

.mood-location--hint .mood-location__icon::after {
  content: " ↗";
  font-size: 11px;
  opacity: 0.72;
}

.mood-status {
  margin-top: 10px;
  padding-left: 2px;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(31, 47, 69, 0.64);
}

.mood-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 18px 20px 0;
}

.mood-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(180, 190, 200, 0.24);
  color: #2a3440;
  font-size: 14px;
  font-weight: 700;
  box-shadow:
    0 8px 16px rgba(31, 36, 48, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease,
    border-color 0.18s ease;
}

.mood-chip[data-mood="feierabend"] {
  background: rgba(232, 207, 207, 0.72);
}

.mood-chip[data-mood="party"] {
  background: rgba(220, 211, 242, 0.72);
}

.mood-chip[data-mood="chill"] {
  background: rgba(207, 231, 225, 0.72);
}

.mood-chip[data-mood="essen"] {
  background: rgba(241, 224, 200, 0.76);
}

.mood-chip[data-mood="arbeiten"] {
  background: rgba(214, 222, 230, 0.78);
}

.mood-chip:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.mood-chip:active {
  transform: scale(0.985);
}

.mood-chip.is-active {
  border-color: rgba(0, 0, 0, 0.04);
}

.mood-chip[data-mood="feierabend"].is-active {
  box-shadow: 0 10px 20px rgba(232, 207, 207, 0.42);
}

.mood-chip[data-mood="party"].is-active {
  box-shadow: 0 10px 20px rgba(220, 211, 242, 0.42);
}

.mood-chip[data-mood="chill"].is-active {
  box-shadow: 0 10px 20px rgba(207, 231, 225, 0.42);
}

.mood-chip[data-mood="essen"].is-active {
  box-shadow: 0 10px 20px rgba(241, 224, 200, 0.42);
}

.mood-chip[data-mood="arbeiten"].is-active {
  box-shadow: 0 10px 20px rgba(214, 222, 230, 0.42);
}

.mood-chip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  font-size: 13px;
  line-height: 1;
  color: rgba(31, 47, 69, 0.82);
}

.mood-chip__label {
  line-height: 1;
  white-space: nowrap;
}

.day-switch {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  margin: 18px 20px 0;
  padding: 5px;
  border-radius: var(--radius-pill);
  background: rgba(190, 208, 224, 0.88);
  border: 1px solid rgba(90, 120, 149, 0.24);
}

.day-switch__btn {
  min-height: 40px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: rgba(31, 47, 69, 0.62);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.day-switch__btn.is-active {
  background: #ffffff;
  color: var(--brand-dark);
  box-shadow: 0 4px 12px rgba(31, 36, 48, 0.14);
}

.day-switch__btn--now.is-active {
  background: rgba(var(--now-accent-rgb), 0.82);
  color: var(--now-deep);
  box-shadow:
    0 6px 14px rgba(var(--now-accent-rgb), 0.28),
    0 0 0 0 rgba(var(--now-accent-rgb), 0.40);
  animation: nowButtonPulse 2.4s ease-in-out infinite;
}

@keyframes nowButtonPulse {
  0%, 100% {
    box-shadow:
      0 6px 14px rgba(var(--now-accent-rgb), 0.28),
      0 0 0 0 rgba(var(--now-accent-rgb), 0.38);
  }
  50% {
    box-shadow:
      0 6px 18px rgba(var(--now-accent-rgb), 0.36),
      0 0 0 5px rgba(var(--now-accent-rgb), 0.08);
  }
}
.card--results {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.80) 100%);
  padding-bottom: 18px;
}

.results-list {
  display: flex;
  flex-direction: column;
  gap: 0px;
  padding: 16px 20px 0;
}

.card-reveal {
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition:
    opacity 0.42s ease,
    transform 0.42s ease;
}

.card-reveal.is-visible,
.card-reveal.is-visible-delayed {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.card-reveal.is-visible-delayed {
  transition-delay: 0.08s;
}

.mood-scan {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

.mood-scan.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.mood-scan__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(24, 33, 43, 0.30);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.mood-scan__card {
  position: relative;
  width: min(100%, 360px);
  border-radius: 32px;
  padding: 28px 24px 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(245,249,253,0.98) 100%);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow:
    0 24px 60px rgba(16, 26, 38, 0.20),
    0 0 0 1px rgba(var(--loader-accent-rgb), 0.10),
    inset 0 1px 0 rgba(255,255,255,0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
}

.mood-scan__card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 96px;
  background: linear-gradient(
    180deg,
    rgba(var(--loader-accent-rgb), 0.28) 0%,
    rgba(var(--loader-accent-rgb), 0.10) 45%,
    rgba(255,255,255,0) 100%
  );
  pointer-events: none;
}

.mood-scan__radar {
  position: relative;
  width: 96px;
  height: 96px;
  margin-bottom: 18px;
}

.mood-scan__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--loader-accent-rgb), 0.42);
  animation: moodScanPulse 2.1s infinite ease-out;
}

.mood-scan__ring--2 {
  animation-delay: 0.4s;
}

.mood-scan__ring--3 {
  animation-delay: 0.8s;
}

.mood-scan__dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--loader-deep) 0%, var(--loader-accent) 100%);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 8px rgba(var(--loader-accent-rgb), 0.18);
}

.mood-scan__content {
  width: 100%;
}

.mood-scan__eyebrow {
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(31, 47, 69, 0.68);
  text-transform: uppercase;
}

.mood-scan__mood {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: rgba(var(--loader-accent-rgb), 0.38);
  color: var(--loader-deep);
  box-shadow: 0 2px 8px rgba(var(--loader-accent-rgb), 0.24);
}

.mood-scan__title {
  margin: 0;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.mood-scan__text {
  margin: 10px 0 0;
  min-height: 42px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

.mood-scan__steps {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.mood-scan__step {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(var(--loader-accent-rgb), 0.28);
  transition: transform 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}

.mood-scan__step.is-active {
  background: var(--loader-accent);
  transform: scale(1.15);
  box-shadow: 0 0 0 4px rgba(var(--loader-accent-rgb), 0.12);
}

.mood-scan--feierabend {
  --loader-accent: #e8cfcf;
  --loader-accent-rgb: 232, 207, 207;
}

.mood-scan--party {
  --loader-accent: #dcd3f2;
  --loader-accent-rgb: 220, 211, 242;
}

.mood-scan--chill {
  --loader-accent: #cfe7e1;
  --loader-accent-rgb: 207, 231, 225;
}

.mood-scan--essen {
  --loader-accent: #f1e0c8;
  --loader-accent-rgb: 241, 224, 200;
}

.mood-scan--arbeiten {
  --loader-accent: #d6dee6;
  --loader-accent-rgb: 214, 222, 230;
}

.city-pulse {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.city-pulse.is-hidden {
  opacity: 0;
}

.city-pulse.is-active {
  opacity: 1;
}

.city-pulse__ring {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 2px solid rgba(90, 120, 149, 0.28);
  animation: cityPulseExpand 0.6s ease-out forwards;
}

.city-pulse__ring--2 {
  animation-delay: 0.08s;
}

.city-pulse__core {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #16324c 0%, #9fb7cd 100%);
  box-shadow: 0 0 0 10px rgba(159, 183, 205, 0.12);
  animation: cityPulseCore 0.4s ease-out forwards;
}

@keyframes moodScanPulse {
  0% {
    transform: scale(0.72);
    opacity: 0.75;
  }
  70% {
    transform: scale(1.08);
    opacity: 0.12;
  }
  100% {
    transform: scale(1.12);
    opacity: 0;
  }
}

@keyframes cityPulseExpand {
  0% {
    transform: scale(0.4);
    opacity: 0.6;
  }
  70% {
    transform: scale(2.4);
    opacity: 0.15;
  }
  100% {
    transform: scale(2.8);
    opacity: 0;
  }
}

@keyframes cityPulseCore {
  0% {
    transform: scale(0.7);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

@media (min-width: 640px) {
  .app-header--compact {
    padding-top: 28px;
  }

  .brand-subline {
    max-width: 360px;
    font-size: 15px;
  }

  .citymood-logo__city,
  .citymood-logo__mood {
    font-size: 16px;
  }

  .app-main {
    max-width: 760px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (min-width: 960px) {
  .app-shell {
    max-width: 920px;
    margin: 0 auto;
    padding-bottom: 36px;
  }

  .app-main {
    gap: 18px;
  }

  .card__head--compact h2 {
    font-size: 26px;
  }

}

/* =============================================================
   HERO – Stadtplan-Header
   ============================================================= */

.app-hero {
  position: relative;
  height: 275px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px 18px 22px;
  overflow: hidden;
  background: #0d1b2a;
}

.app-hero__map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.82;
}

.app-hero__veil {
  position: absolute;
  inset: 0;
  background: rgba(8, 16, 28, 0.32);
  pointer-events: none;
}

.app-hero__top,
.app-hero__bottom {
  position: relative;
  z-index: 2;
}

.app-hero h1 {
  margin: 0 0 12px;
  font-size: 25px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: #ffffff;
}

/* Logo im Hero: glassmorphic auf dunklem Hintergrund */
.app-hero .citymood-logo {
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Standort-Badge im Hero */
.app-hero .mood-location {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.app-hero .mood-location__icon {
  color: rgba(255, 255, 255, 0.72);
}

.app-hero .mood-location--hint {
  background: rgba(var(--now-accent-rgb), 0.18);
  border-color: rgba(var(--now-accent-rgb), 0.60);
  color: var(--now-accent);
}

/* mood-context ohne Location-Badge */
.mood-context--slim {
  padding: 14px 20px 0;
}

/* =============================================================
   GO-BUTTON
   ============================================================= */

.go-btn-wrap {
  padding: 14px 20px 4px;
}

.go-btn {
  width: 100%;
  min-height: 52px;
  padding: 0 48px 0 20px;
  border-radius: var(--radius-pill);
  border: 1.5px solid rgba(0, 0, 0, 0.07);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #2a3440;
  cursor: pointer;
  position: relative;
  background: transparent;
  text-align: left;
  transition:
    transform 0.16s ease,
    box-shadow 0.20s ease,
    background 0.18s ease,
    color 0.18s ease;
}

.go-btn::after {
  content: "→";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.65;
  font-size: 17px;
  line-height: 1;
}

.go-btn--inactive {
  background: rgba(200, 212, 224, 0.38);
  color: rgba(31, 47, 69, 0.32);
  border-color: transparent;
  cursor: default;
}

.go-btn--inactive::after {
  display: none;
}

.go-btn:not(.go-btn--inactive):hover {
  transform: translateY(-1px);
}

.go-btn:not(.go-btn--inactive):active {
  transform: scale(0.985);
}

.go-btn--feierabend {
  background: var(--mood-feierabend);
  border-color: #c49290;
  box-shadow: 0 8px 22px rgba(222, 184, 180, 0.60);
}

.go-btn--party {
  background: var(--mood-party);
  border-color: #a88edc;
  box-shadow: 0 8px 22px rgba(205, 189, 238, 0.60);
}

.go-btn--chill {
  background: var(--mood-chill);
  border-color: #7abfb0;
  box-shadow: 0 8px 22px rgba(180, 217, 208, 0.60);
}

.go-btn--essen {
  background: var(--mood-essen);
  border-color: #d4a050;
  box-shadow: 0 8px 22px rgba(232, 201, 154, 0.60);
}

.go-btn--arbeiten {
  background: var(--mood-arbeiten);
  border-color: #8aaacf;
  box-shadow: 0 8px 22px rgba(188, 207, 222, 0.60);
}

@media (min-width: 640px) {
  .app-hero {
    height: 300px;
    padding: 26px 24px 26px;
  }

  .app-hero h1 {
    font-size: 28px;
  }
}

/* Logo im Hero: nur Wordmark, kein Icon */
.citymood-logo--text-only {
  gap: 0;
}

.citymood-logo--text-only .citymood-logo__wordmark {
  font-size: 15px;
  letter-spacing: 0.12em;
}

/* =============================================================
   MAP DOT – animierter Karten-Punkt
   ============================================================= */

.map-dot {
  position: absolute;
  z-index: 4;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  /* Smooth-Bewegung über die Karte */
  transition:
    left   0.9s cubic-bezier(0.4, 0, 0.2, 1),
    top    0.9s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.4s ease;
}

.map-dot.is-visible {
  opacity: 1;
}

.map-dot__core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.20);
}

.map-dot__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0;
  animation: mapDotPulse 2s ease-out infinite;
}

.map-dot__ring--2 {
  animation-delay: 0.7s;
}

@keyframes mapDotPulse {
  0%   { transform: scale(0.8); opacity: 0.75; }
  100% { transform: scale(3.2); opacity: 0;    }
}

/* Mood-Farben */
.map-dot--feierabend { color: #e8cfcf; }
.map-dot--party      { color: #dcd3f2; }
.map-dot--chill      { color: #cfe7e1; }
.map-dot--essen      { color: #f1e0c8; }
.map-dot--arbeiten   { color: #d6dee6; }

/* =============================================================
   HERO – v2: Top-Bar mit Logo + Location (kein H1 mehr)
   ============================================================= */

.app-hero {
  height: 200px;
  justify-content: flex-start;
}

.app-hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Alte Bottom-Sektion deaktivieren */
.app-hero__bottom {
  display: none;
}

/* =============================================================
   GREETING
   ============================================================= */

.mood-greeting {
  padding: 18px 20px 12px;
}

.mood-greeting__time {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(31, 47, 69, 0.42);
  margin: 0 0 5px;
}

.mood-greeting__q {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--text, #1f2f45);
}

/* =============================================================
   MOOD CHIPS – Karten-Variante mit Icons & Taglines
   ============================================================= */

.mood-chip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 20px;
  margin-bottom: 14px;
}

.mood-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 14px 12px;
  min-height: auto;
  border-radius: 18px;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  cursor: pointer;
  text-align: left;
  box-shadow: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mood-chip:hover {
  transform: translateY(-1px);
  filter: none;
}

.mood-chip:active {
  transform: scale(0.97);
}

.mood-chip.is-active {
  box-shadow: none;
  outline: 2.5px solid rgba(0, 0, 0, 0.18);
  outline-offset: 1px;
  border-color: transparent;
}

.mood-chip--wide {
  grid-column: span 2;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}

.mood-chip__icon-img {
  font-size: 22px;
  display: block;
  margin-bottom: 7px;
  line-height: 1;
}

.mood-chip--wide .mood-chip__icon-img {
  margin-bottom: 0;
  flex-shrink: 0;
}

.mood-chip__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mood-chip__label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 3px;
  white-space: normal;
}

.mood-chip--wide .mood-chip__label {
  margin-bottom: 0;
}

.mood-chip__tagline {
  display: block;
  font-size: 11px;
  line-height: 1.35;
  font-weight: 500;
}

/* Feierabend */
.mood-chip[data-mood="feierabend"] { background: #eedad7; border: 1.5px solid #c49290; }
.mood-chip[data-mood="feierabend"] .mood-chip__icon-img { color: #8f3f3f; }
.mood-chip[data-mood="feierabend"] .mood-chip__label   { color: #6e2c2c; }
.mood-chip[data-mood="feierabend"] .mood-chip__tagline { color: #a06060; }

/* Party */
.mood-chip[data-mood="party"] { background: #e6dcfc; border: 1.5px solid #a88edc; }
.mood-chip[data-mood="party"] .mood-chip__icon-img { color: #5a36b0; }
.mood-chip[data-mood="party"] .mood-chip__label   { color: #422890; }
.mood-chip[data-mood="party"] .mood-chip__tagline { color: #7856c0; }

/* Chill */
.mood-chip[data-mood="chill"] { background: #d4ece5; border: 1.5px solid #7abfb0; }
.mood-chip[data-mood="chill"] .mood-chip__icon-img { color: #1f7260; }
.mood-chip[data-mood="chill"] .mood-chip__label   { color: #165448; }
.mood-chip[data-mood="chill"] .mood-chip__tagline { color: #3e8878; }

/* Essen */
.mood-chip[data-mood="essen"] { background: #fae9cc; border: 1.5px solid #d4a050; }
.mood-chip[data-mood="essen"] .mood-chip__icon-img { color: #8c5210; }
.mood-chip[data-mood="essen"] .mood-chip__label   { color: #6a3c08; }
.mood-chip[data-mood="essen"] .mood-chip__tagline { color: #a87030; }

/* Arbeiten */
.mood-chip[data-mood="arbeiten"] { background: #dce7f2; border: 1.5px solid #8aaacf; }
.mood-chip[data-mood="arbeiten"] .mood-chip__icon-img { color: #1e4878; }
.mood-chip[data-mood="arbeiten"] .mood-chip__label   { color: #163660; }
.mood-chip[data-mood="arbeiten"] .mood-chip__tagline { color: #3e6898; }

/* Status-Text (nur sichtbar wenn JS Inhalt setzt) */
.mood-status {
  font-size: 12px;
  color: rgba(31, 47, 69, 0.55);
  padding: 0 20px 8px;
  margin: 0;
}

/* =============================================================
   GREETING v2 – wärmer, persönlicher, integriert
   ============================================================= */

.mood-greeting {
  padding: 16px 20px 8px;
}

.mood-greeting__time {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(31, 47, 69, 0.60);
  margin: 0 0 2px;
}

.mood-greeting__q {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text, #1f2f45);
}

/* =============================================================
   GREETING als Kachel im Chip-Grid (span 2)
   ============================================================= */

.mood-greeting {
  grid-column: span 2;
  padding: 14px 16px;
  background: rgba(31, 47, 69, 0.04);
  border-radius: 18px;
  border: 0.5px solid rgba(31, 47, 69, 0.08);
  margin: 0;
}

.mood-greeting__time {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(31, 47, 69, 0.55);
  margin: 0 0 2px;
}

.mood-greeting__q {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text, #1f2f45);
}

/* =============================================================
   LOGO v2 — Teal Puls, Glassmorphism im Hero
   ============================================================= */

.app-hero .citymood-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px 7px 9px;
  background: rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 50px;
  box-shadow: none;
  text-decoration: none;
}

.citymood-logo__icon {
  display: block;
  flex-shrink: 0;
}

.citymood-logo__wordmark {
  line-height: 1;
  white-space: nowrap;
}

.citymood-logo__city {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.13em;
  color: rgba(255, 255, 255, 0.83);
}

.citymood-logo__mood {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #00D2AF;
}

/* Location-Dot im Hero ebenfalls Teal */
.app-hero .mood-location__icon {
  color: #00D2AF;
}

/* =============================================================
   CITY GHOST PULSES — Stadt lebt
   ============================================================= */

.city-ghost {
  position: absolute;
  width: 4px;
  height: 4px;
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.8s ease;
}

.city-ghost__core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
}

.city-ghost__ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  animation: ghostPulse 4.2s ease-out infinite;
}

@keyframes ghostPulse {
  0%   { transform: scale(0.2); opacity: 0.6; }
  60%  { opacity: 0.25; }
  100% { transform: scale(1);   opacity: 0; }
}

/* Fade-out wenn Mood gewählt */
.app-hero.has-mood .city-ghost {
  opacity: 0;
}

/* ── Animated SVG city map ──────────────────────────────────────────────── */
/* Override old img-based styles so inline SVG fills the hero correctly     */
.app-hero__map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.82;
    object-fit: unset;          /* was for <img>, not needed for inline SVG */
    transition: opacity 0.9s ease;
}

/* When a mood is selected: dim the city map, let the mood dot take focus */
.app-hero.has-mood .app-hero__map {
    opacity: 0.22;
}

/* Logo-Hero SVG in der Pill skaliert */
.citymood-logo svg {
  display: block;
  height: 44px;
  width: auto;
}

/* Logo ohne Innenabstand — SVG füllt die Pill */
.app-hero .citymood-logo {
  padding: 0;
}

/* Location-Pill: absolut unten rechts im Hero */
.app-hero__bottom {
  display: flex;
  position: absolute;
  bottom: 22px;
  right: 24px;
  z-index: 2;
}

.app-hero .mood-location {
  font-size: 8px;
  min-height: 22px;
  padding: 0 9px;
  gap: 5px;
}

.app-hero .mood-location__icon {
  font-size: 8px;
}

/* =============================================================
   MOOD-BÜHNEN — Vertikaler Snap-Scroll Mood-Selector
   ============================================================= */

.card--moods {
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  overflow: visible;
}

.card--moods::before {
  display: none;
}

.mood-stage-wrap {
  position: relative;
  height: 460px;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

/* ── Slider-Indikator ──────────────────────────────────────── */
.mood-slider {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 28px;
  display: flex;
  flex-direction: column;
  padding: 32px 0;
  z-index: 10;
  cursor: pointer;
}

.mood-slider__seg {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}

.mood-slider__seg::before {
  content: '';
  display: block;
  width: 2px;
  height: 100%;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 2px;
  transition: width 0.3s ease, background 0.3s ease;
}

.mood-slider__seg.is-active::before {
  width: 4px;
}

.mood-slider__seg.is-active[data-mood="feierabend"]::before { background: #d07070; }
.mood-slider__seg.is-active[data-mood="party"]::before      { background: #9070e0; }
.mood-slider__seg.is-active[data-mood="chill"]::before      { background: #40a880; }
.mood-slider__seg.is-active[data-mood="essen"]::before      { background: #d09030; }
.mood-slider__seg.is-active[data-mood="arbeiten"]::before   { background: #4890d8; }

.mood-slider__seg::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease;
}

.mood-slider__seg.is-active::after {
  width: 9px;
  height: 9px;
}

.mood-slider__seg.is-active[data-mood="feierabend"]::after { background: #d07070; box-shadow: 0 0 0 3px rgba(208,112,112,0.28); }
.mood-slider__seg.is-active[data-mood="party"]::after      { background: #9070e0; box-shadow: 0 0 0 3px rgba(144,112,224,0.28); }
.mood-slider__seg.is-active[data-mood="chill"]::after      { background: #40a880; box-shadow: 0 0 0 3px rgba(64,168,128,0.28); }
.mood-slider__seg.is-active[data-mood="essen"]::after      { background: #d09030; box-shadow: 0 0 0 3px rgba(208,144,48,0.28); }
.mood-slider__seg.is-active[data-mood="arbeiten"]::after   { background: #4890d8; box-shadow: 0 0 0 3px rgba(72,144,216,0.28); }

/* ── Scroll-Container ─────────────────────────────────────── */
.mood-stages {
  position: absolute;
  inset: 0;
  left: 28px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.mood-stages::-webkit-scrollbar {
  display: none;
}

/* ── Einzelne Bühne ───────────────────────────────────────── */
.mood-stage {
  height: 100%;
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
}

.mood-stage--feierabend { background: #1e0a0a; --stage-bg: #1e0a0a; --stage-accent: #d07070; }
.mood-stage--party      { background: #100820; --stage-bg: #100820; --stage-accent: #9070e0; }
.mood-stage--chill      { background: #071812; --stage-bg: #071812; --stage-accent: #40a880; }
.mood-stage--essen      { background: #180e00; --stage-bg: #180e00; --stage-accent: #d09030; }
.mood-stage--arbeiten   { background: #060e1c; --stage-bg: #060e1c; --stage-accent: #4890d8; }
/* ── Subtile Foto-Hintergründe ────────────────────────────── */
.mood-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  opacity: 0.40;
  pointer-events: none;
}

.mood-stage--feierabend::before { background-image: url('https://images.unsplash.com/photo-1758882207168-f1649fc7c0c6?fm=jpg&q=60&w=800&auto=format&fit=crop&ixlib=rb-4.1.0'); }
.mood-stage--party::before      { background-image: url('https://images.unsplash.com/photo-1763630054758-637ff31b4a4d?fm=jpg&q=60&w=800&auto=format&fit=crop&ixlib=rb-4.1.0'); }
.mood-stage--chill::before      { background-image: url('https://images.unsplash.com/photo-1755003842792-9d2b7ad08862?fm=jpg&q=60&w=800&auto=format&fit=crop&ixlib=rb-4.1.0'); }
.mood-stage--essen::before      { background-image: url('https://images.unsplash.com/photo-1646473315764-c6cd47fe74c3?fm=jpg&q=60&w=800&auto=format&fit=crop&ixlib=rb-4.1.0'); }
.mood-stage--arbeiten::before   { background-image: url('https://images.unsplash.com/photo-1545184180-25d471fe75eb?fm=jpg&q=60&w=800&auto=format&fit=crop&ixlib=rb-4.1.0'); }

/* Atmosphärische Hintergrundform (simuliertes Coverbild) */
.mood-stage__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  clip-path: ellipse(92% 58% at 65% 22%);
  opacity: 0.55;
  transition: opacity 0.6s ease;
}

.mood-stage--feierabend .mood-stage__bg { background: #6b2020; }
.mood-stage--party .mood-stage__bg      { background: #3a1880; }
.mood-stage--chill .mood-stage__bg      { background: #0e4030; }
.mood-stage--essen .mood-stage__bg      { background: #5a3000; }
.mood-stage--arbeiten .mood-stage__bg   { background: #103060; }

/* Fade-Overlay unten */
.mood-stage::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 68%;
  background: linear-gradient(to top, var(--stage-bg) 50%, transparent);
  pointer-events: none;
  z-index: 1;
}

/* ── Stage-Inhalt ─────────────────────────────────────────── */
.mood-stage__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 20px 22px;
  z-index: 2;
}

.mood-stage__counter {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--stage-accent);
  margin-bottom: 6px;
  font-family: monospace;
}

.mood-stage__name {
  margin: 0 0 5px;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #ffffff;
}

.mood-stage__sub {
  margin: 0 0 20px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.4;
}

/* Day-Switch im dunklen Stage-Kontext */
.mood-stage .day-switch {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.14);
  margin: 0 0 12px;
}

.mood-stage .day-switch__btn {
  color: rgba(255, 255, 255, 0.45);
}

.mood-stage .day-switch__btn.is-active {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  box-shadow: none;
}

/* Go-Button im Stage */
.mood-stage .go-btn {
  width: 100%;
  color: #ffffff;
  border-color: transparent;
  font-size: 15px;
  font-weight: 700;
}

.mood-stage .go-btn--feierabend {
  background: #d07070;
  box-shadow: 0 8px 24px rgba(208,112,112,0.38);
}

.mood-stage .go-btn--party {
  background: #9070e0;
  box-shadow: 0 8px 24px rgba(144,112,224,0.38);
}

.mood-stage .go-btn--chill {
  background: #40a880;
  box-shadow: 0 8px 24px rgba(64,168,128,0.38);
}

.mood-stage .go-btn--essen {
  background: #d09030;
  box-shadow: 0 8px 24px rgba(208,144,48,0.38);
}

.mood-stage .go-btn--arbeiten {
  background: #4890d8;
  box-shadow: 0 8px 24px rgba(72,144,216,0.38);
}

/* ── Dot-Navigation unten ─────────────────────────────────── */
.mood-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 10;
}

.mood-dot {
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: width 0.3s ease, background 0.3s ease;
  width: 5px;
}

.mood-dot.is-active {
  width: 18px;
  background: #ffffff;
}

/* Go-Button im Stage: kein CSS-Pfeil (Text hat bereits →) */
.mood-stage .go-btn::after {
  display: none;
}

/* Mood-Bühnen: volle Breite, raus aus app-main Padding */
.card--moods {
  margin-left: -14px;
  margin-right: -14px;
}

.mood-stage-wrap {
  border-radius: 0;
}

@media (min-width: 640px) {
  .card--moods {
    margin-left: -20px;
    margin-right: -20px;
  }
}

/* Sascha-Korrekturen */
.app-main        { padding: 0 14px 0; }
.card--moods     { background: #181818; }
.card            { border-radius: 0; }
.app-hero__map   { border-bottom: 2px solid #fff; }

/* =============================================================
   APP-GREETING — Begrüßung zwischen Hero und Mood-Bühnen
   ============================================================= */
.app-greeting {
  padding: 20px 18px 14px;
  background: var(--bg, #f6f4ef);
}

.app-greeting__time {
  margin: 0 0 3px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(31, 47, 69, 0.55);
}

.app-greeting__q {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text, #1f2430);
}

/* app-greeting Update */
.app-greeting {
  padding: 20px 18px 14px;
  background: #000;
  border-radius: 30px;
  margin: 10px 20px;
}

.app-greeting__time {
  color: rgba(255, 255, 255, 0.55);
}

.app-greeting__q {
  color: #ffffff;
}

/* app-greeting Fine-Tuning */
.app-greeting {
  padding: 9px 18px 8px;
  background: #0d1b2a;
  border-radius: 14px;
  margin: 10px 20px;
}

/* card-reveal: kein Platz wenn nicht sichtbar */
.card-reveal {
  display: none;
  pointer-events: none;
}

.card-reveal.is-visible,
.card-reveal.is-visible-delayed {
  display: block;
  pointer-events: auto;
  animation: revealCard 0.42s ease forwards;
}

@keyframes revealCard {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =============================================================
   FUNKTIONALE STATES
   ============================================================= */

.card--moods.is-hidden { display: none; }

/* ─── Zurück-Button ───────────────────────────────────────── */
.back-to-moods {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 14px 12px;
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(90, 120, 149, 0.14);
  box-shadow: var(--shadow-soft);
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-dark);
  cursor: pointer;
  user-select: none;
  transition: background 0.18s ease, transform 0.15s ease;
}

.back-to-moods.is-hidden { display: none; }
.back-to-moods:hover  { background: rgba(255, 255, 255, 0.96); transform: translateY(-1px); }
.back-to-moods:active { transform: scale(0.98); }
.back-to-moods__icon  { font-size: 16px; opacity: 0.68; }

/* ─── Live Dot ────────────────────────────────────────────── */
.live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3fa87c;
  margin-right: 5px;
  vertical-align: middle;
  animation: livePulse 1.8s ease-in-out infinite;
}

@keyframes livePulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.78); }
}

/* ─── Skeleton Cards ──────────────────────────────────────── */
.result-card--skeleton { pointer-events: none; }

.skeleton-line {
  height: 14px;
  border-radius: 8px;
  background: linear-gradient(90deg, #e8edf2 25%, #f4f7fa 50%, #e8edf2 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  margin-bottom: 10px;
}

.skeleton-line--title  { height: 20px; width: 72%; }
.skeleton-line--badge  { height: 26px; width: 36%; margin-left: auto; margin-top: -30px; }
.skeleton-line--meta   { height: 24px; width: 55%; }
.skeleton-line--text   { width: 100%; }
.skeleton-line--short  { width: 65%; }

@keyframes shimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── Source Accent (linke Border je Quelle) ──────────────── */

/* =============================================================
   DECISION BOX — Mood-Hintergruende
   ============================================================= */

/* =============================================================
   ZONE BADGE COLORS — Leipzig-Stadtteile
   ============================================================= */

.result-meta__tag--location.zone--connewitz    { background: #c2e0d4; color: #175848; }
.result-meta__tag--location.zone--suedvorstadt { background: #ddd0f6; color: #4e2e98; }
.result-meta__tag--location.zone--plagwitz     { background: #f8cdb0; color: #8a3210; }
.result-meta__tag--location.zone--lindenau     { background: #f8dfa8; color: #7a4600; }
.result-meta__tag--location.zone--gohlis       { background: #bcdee4; color: #165260; }
.result-meta__tag--location.zone--schleussig   { background: #c4e6dc; color: #145040; }
.result-meta__tag--location.zone--reudnitz     { background: #ccd4f2; color: #1e3070; }
.result-meta__tag--location.zone--gruenau      { background: #c8dcca; color: #204824; }
.result-meta__tag--location.zone--leutzsch     { background: #f8d2ba; color: #883810; }
.result-meta__tag--location.zone--anger        { background: #f6cece; color: #882020; }
.result-meta__tag--location.zone--innenstadt   { background: #ccdcf4; color: #1a3868; }

/* ═══════════════════════════════════════════════════════════
   VARIANTE B — Ergebniskarten mit Atmosphären-Icon
   ═══════════════════════════════════════════════════════════ */

/* Basis-Layout: Icon-Spalte + Body */

/* Icon-Spalte */
.result-card__icon--skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}

/* Inhalts-Spalte */

/* ─── Atmosphären-Themes ──────────────────────────────── */

/* ─── Source-Tag + Zeit-Tag ───────────────────────────── */
.result-card--skeleton .result-card__body { padding: 12px 13px; gap: 7px; }

/* ─── Dark Mode ───────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
}

/* ─── Distanz-Tag + Ergebnisliste Gap ───────────────────── */
.results-list {
  gap: 0px;
}

/* ─── Venue-Karten: Warm-Weiß statt Traueroptik ────────── */
@media (prefers-color-scheme: dark) {
}

/* ─── Sascha-Anpassungen ────────────────────────────────── */
@media (prefers-color-scheme: dark) {
}

/* ─── Fix: Titel immer sichtbar, Body-Padding gesichert ─ */
@media (prefers-color-scheme: dark) {
}

/* ── OSM-Infos auf Ergebniskarten ───────────────────────────── */

@media (prefers-color-scheme: dark) {
}

/* ═══════════════════════════════════════════════════════════════
   CityMood Helfer — FAB + Bottom Sheet
   ═══════════════════════════════════════════════════════════════ */

/* ── Floating Action Button ───────────────────────────────────── */

.helper-fab {
  position: fixed;
  bottom: 24px;
  right: 20px;
  z-index: 200;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: #26215C;
  color: #CECBF6;
  font-size: 20px;
  display: none;               /* wird per JS eingeblendet sobald Ergebnisse da */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
}

.helper-fab:hover {
  transform: scale(1.08);
}

.helper-fab--open {
  background: #ffffff;
  color: #26215C;
}

@media (prefers-color-scheme: dark) {
  .helper-fab--open {
    background: #1a1a2e;
    color: #CECBF6;
  }
}

.helper-fab.is-visible {
  display: flex;
}

/* ── Backdrop ────────────────────────────────────────────────── */

.helper-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 198;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.helper-backdrop--visible {
  display: block;
  opacity: 1;
}

/* ── Bottom Sheet ─────────────────────────────────────────────── */

.helper-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 199;
  background: var(--card-bg, #ffffff);
  border-top: 0.5px solid rgba(0, 0, 0, 0.1);
  border-radius: 18px 18px 0 0;
  padding: 12px 20px 32px;
  transform: translateY(110%);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  max-height: 75vh;
  overflow-y: auto;
}

@media (prefers-color-scheme: dark) {
  .helper-panel {
    background: #1a1a2e;
    border-top-color: rgba(255,255,255,0.1);
  }
}

.helper-panel--open {
  transform: translateY(0);
}

/* Handle-Strich */
.helper-panel__handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: rgba(0,0,0,0.15);
  margin: 0 auto 14px;
}

@media (prefers-color-scheme: dark) {
  .helper-panel__handle {
    background: rgba(255,255,255,0.15);
  }
}

/* Kopfzeile */
.helper-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.helper-panel__title {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-primary, #111);
}

.helper-panel__count {
  font-size: 12px;
  color: var(--color-text-secondary, #666);
  transition: opacity 0.2s;
}

/* ── Filter-Sektionen ────────────────────────────────────────── */

.helper-section {
  margin-bottom: 16px;
}

.helper-section__label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-secondary, #888);
  margin-bottom: 8px;
}

.helper-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ── Chips ───────────────────────────────────────────────────── */

.helper-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 20px;
  border: 0.5px solid rgba(0,0,0,0.15);
  background: transparent;
  color: var(--color-text-secondary, #555);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.helper-chip .ti {
  font-size: 14px;
}

.helper-chip:hover {
  border-color: rgba(0,0,0,0.3);
  color: var(--color-text-primary, #111);
  background: rgba(0,0,0,0.04);
}

.helper-chip--active {
  background: #26215C;
  color: #CECBF6;
  border-color: #26215C;
}

.helper-chip--active:hover {
  background: #3C3489;
  border-color: #3C3489;
  color: #EEEDFE;
}

@media (prefers-color-scheme: dark) {
  .helper-chip {
    border-color: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.6);
  }
  .helper-chip:hover {
    border-color: rgba(255,255,255,0.35);
    color: rgba(255,255,255,0.9);
    background: rgba(255,255,255,0.06);
  }
}

/* ── Gedimmte Karten ────────────────────────────────────────── */

.result-card--dimmed.card-reveal.is-visible,
.result-card--dimmed.card-reveal.is-visible-delayed {
  animation: none;
  opacity: 0.2;
  transform: translateY(0);
  transition: opacity 0.25s ease;
}
.result-card--dimmed {
  opacity: 0.2;
  transition: opacity 0.25s ease;
}

/* ── Auf größeren Screens: Panel rechts statt unten ──────────── */

@media (min-width: 720px) {
  .helper-panel {
    left: auto;
    bottom: 80px;
    right: 20px;
    width: 280px;
    border-radius: 16px;
    border: 0.5px solid rgba(0,0,0,0.1);
    max-height: 80vh;
    transform: scale(0.95) translateY(8px);
    opacity: 0;
    transform-origin: bottom right;
    transition: transform 0.22s ease, opacity 0.22s ease;
  }

  .helper-panel--open {
    transform: scale(1) translateY(0);
    opacity: 1;
  }

  .helper-panel__handle {
    display: none;
  }

  .helper-backdrop {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Venue-Overlay mit Leaflet-Karte
   ═══════════════════════════════════════════════════════════════ */

.venue-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  align-items: flex-end;
  justify-content: center;
}
.venue-overlay.is-open { display: flex; }

.venue-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  animation: backdropIn 0.22s ease;
}
@keyframes backdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.venue-overlay__sheet {
  position: relative;
  width: 100%;
  max-width: 560px;
  background: #fff;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
  animation: sheetUp 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
@keyframes sheetUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.venue-overlay__close {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 10;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.25);
  color: #fff;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.venue-overlay__map {
  height: 200px;
  width: 100%;
  flex-shrink: 0;
  background: var(--bg, #f6f4ef);
}

.venue-overlay__nomap {
  height: 72px;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  color: var(--muted, #667085);
  font-size: 12px;
  background: var(--bg, #f6f4ef);
}
.venue-overlay__nomap .ti { font-size: 26px; opacity: 0.35; }
.venue-overlay__nomap.is-visible { display: flex; }

.venue-overlay__body {
  padding: 16px 18px 28px;
  overflow-y: auto;
}

/* Header mit Theme-Akzent */
.venue-overlay__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 12px;
  border-left: 4px solid var(--overlay-theme-color, #26215C);
  margin-bottom: 12px;
}

.venue-overlay__icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
}

.venue-overlay__name {
  font-size: 16px;
  font-weight: 500;
  color: var(--text, #1f2430);
  margin: 0 0 2px;
  line-height: 1.3;
}
.venue-overlay__zone {
  font-size: 12px;
  color: var(--muted, #667085);
  margin: 0;
}

/* Tags (Öffnungszeiten, Entfernung) */
.venue-overlay__tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.venue-overlay__tag {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--bg, #f6f4ef);
  color: var(--muted, #667085);
  border: 0.9px solid rgba(0, 0, 0, 0.34);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.venue-overlay__tag .ti {
  font-size: 12px;
  color: var(--overlay-theme-color, #26215C);
}

/* Detail-Zeilen */
.venue-overlay__rows {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 0.5px solid var(--line, rgba(99,115,129,0.14));
}
.venue-overlay__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--text, #1f2430);
  line-height: 1.4;
}
.venue-overlay__row .ti {
  font-size: 15px;
  color: var(--overlay-theme-color, #26215C);
  flex-shrink: 0;
  margin-top: 1px;
}

/* Buttons */
.venue-overlay__actions {
  display: flex;
  gap: 8px;
}
.venue-overlay__btn {
  flex: 1;
  padding: 10px 8px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text, #1f2430);
  border: 0.5px solid rgba(99,115,129,0.25);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  transition: background 0.15s, opacity 0.15s;
}
.venue-overlay__btn:hover { background: var(--bg, #f6f4ef); }

.venue-overlay__btn--primary {
  background: var(--overlay-theme-color, #26215C);
  color: #fff;
  border-color: transparent;
}
.venue-overlay__btn--primary:hover {
  opacity: 0.88;
  background: var(--overlay-theme-color, #26215C);
}
.venue-overlay__btn .ti { font-size: 15px; }

/* Desktop */
@media (min-width: 600px) {
  .venue-overlay { align-items: center; }
  .venue-overlay__sheet {
    border-radius: 20px;
    max-height: 85vh;
    animation: modalIn 0.22s ease;
  }
  @keyframes modalIn {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
  }
}

/* ══ Result-Karten (X3-Design) ══════════════════════════════════ */

.result-card {
  cursor: pointer;
  background: var(--bg-soft, #fbfaf7);
  border: 0.9px solid rgba(0, 0, 0, 0.34);
  border-top: 3px solid transparent;
  border-radius: 18px;
  overflow: hidden;
  margin-top: 10px;
  transition: border-color .15s, border-top-color .15s, opacity .25s ease;
}
.result-card:hover { border-color: rgba(0, 0, 0, 0.5); }

/* Header-Zeile */
.result-card__hd {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border-left: 4px solid #26215C;
  border-bottom: 0.5px solid var(--line, rgba(99,115,129,0.14));
}
.result-card--theme-nacht      .result-card__hd { border-left-color: #26215C; }
.result-card--theme-live       .result-card__hd { border-left-color: #185FA5; }
.result-card--theme-bier       .result-card__hd { border-left-color: #854F0B; }
.result-card--theme-fokus      .result-card__hd { border-left-color: #0F6E56; }
.result-card--theme-kultur     .result-card__hd { border-left-color: #534AB7; }
.result-card--theme-historisch .result-card__hd { border-left-color: #993C1D; }
.result-card--theme-default    .result-card__hd { border-left-color: #5F5E5A; }

.result-card--theme-nacht      { border-top-color: #26215C; }
.result-card--theme-live       { border-top-color: #185FA5; }
.result-card--theme-bier       { border-top-color: #854F0B; }
.result-card--theme-fokus      { border-top-color: #0F6E56; }
.result-card--theme-kultur     { border-top-color: #534AB7; }
.result-card--theme-historisch { border-top-color: #993C1D; }
.result-card--theme-default    { border-top-color: #5F5E5A; }

/* Icon */
.result-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: #EEEDFE;
  color: #3C3489;
}
.result-card--theme-live       .result-card__icon { background: #E6F1FB; color: #0C447C; }
.result-card--theme-bier       .result-card__icon { background: #FAEEDA; color: #633806; }
.result-card--theme-fokus      .result-card__icon { background: #E1F5EE; color: #085041; }
.result-card--theme-kultur     .result-card__icon { background: #EEEDFE; color: #534AB7; }
.result-card--theme-historisch .result-card__icon { background: #FAECE7; color: #712B13; }
.result-card--theme-default    .result-card__icon { background: #F1EFE8; color: #444441; }

/* Texte im Header */
.result-card__texts { flex: 1; min-width: 0; }
.result-card__super {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted, #667085);
  margin-bottom: 2px;
}
.result-card__title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Badge + Chevron rechts */
.result-card__right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.result-card__badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 99px;
  white-space: nowrap;
  border: 0.5px solid transparent;
}
.result-card__badge--top      { background: #E1F5EE; color: #085041; border-color: #5DCAA5; }
.result-card__badge--alt      { background: #FAECE7; color: #712B13; border-color: #F09595; }
.result-card__badge--live     { background: #E6F1FB; color: #0C447C; border-color: #85B7EB; display: flex; align-items: center; gap: 4px; }
.result-card__badge--default  { background: var(--bg, #f6f4ef); color: var(--muted, #667085); border-color: var(--line, rgba(99,115,129,0.14)); }

/* ── Gesponserte / Partner-Karte ─────────────────────────── */
.result-card--sponsored {
  background: #fffdf7;
  border-color: rgba(186, 117, 23, 0.45);
  border-top-color: #BA7517;
}
.result-card--sponsored:hover {
  border-color: rgba(186, 117, 23, 0.7);
}
.result-card--sponsored .result-card__hd {
  border-left-color: #BA7517;
}
.result-card--sponsored .result-card__icon {
  background: #FAEEDA;
  color: #633806;
}
.result-card--sponsored .result-card__tap {
  color: #854F0B;
}
.result-card__badge--partner {
  background: #FAEEDA;
  color: #633806;
  border-color: #EF9F27;
  display: flex;
  align-items: center;
  gap: 3px;
}

.result-card__chev {
  font-size: 20px;
  color: var(--muted, #667085);
  opacity: .3;
}

/* Body */
.result-card__body { padding: 11px 14px 0; }

/* Pills */
.result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}
.result-meta__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  border: 0.5px solid var(--line, rgba(99,115,129,0.14));
  background: var(--bg, #f6f4ef);
  color: var(--muted, #667085);
}
.result-meta__tag i { font-size: 11px; }
.result-meta__tag--location { background: #EEEDFE; color: #3C3489; border-color: #AFA9EC; }
.result-meta__tag--time     { background: #E1F5EE; color: #085041; border-color: #5DCAA5; }
.result-meta__tag--live     { background: #E6F1FB; color: #0C447C; border-color: #85B7EB; }

/* Zone-Farben für Location-Pill */
.result-meta__tag--location.zone--connewitz    { background: #c2e0d4; color: #175848; border-color: #5DCAA5; }
.result-meta__tag--location.zone--suedvorstadt { background: #ddd0f6; color: #4e2e98; border-color: #AFA9EC; }
.result-meta__tag--location.zone--plagwitz     { background: #f9e0cb; color: #7a3d12; border-color: #EF9F27; }
.result-meta__tag--location.zone--lindenau     { background: #cce5f7; color: #0c4a7c; border-color: #85B7EB; }
.result-meta__tag--location.zone--gohlis       { background: #d4edda; color: #1a5e30; border-color: #97C459; }
.result-meta__tag--location.zone--innenstadt   { background: #fde8e8; color: #7a1f1f; border-color: #F09595; }
.result-meta__tag--location.zone--other        { background: var(--bg, #f6f4ef); color: var(--muted, #667085); }

/* Description */
.result-description {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted, #667085);
}

/* Footer */
.result-card__ft {
  padding: 8px 14px;
  margin-top: 10px;
  border-top: 0.5px solid var(--line, rgba(99,115,129,0.14));
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.result-card__ft-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted, #667085);
}

.result-card__tap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 14px 10px;
  border-top: 0.5px solid var(--line, rgba(99,115,129,0.14));
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-secondary);
}
.result-card__tap .ti { font-size: 13px; }
.result-card__ft-row i { font-size: 12px; opacity: .5; }

/* Live-Dot */
.live-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #e53;
  flex-shrink: 0;
  animation: livepulse 1.6s ease-in-out infinite;
}
@keyframes livepulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.5; transform:scale(.75); }
}

/* Skeleton */
.result-card--skeleton { pointer-events: none; }

/* Gedimmt durch Helfer */
.result-card--dimmed { opacity: 0.2; }

/* Empty state */
.result-empty {
  padding: 16px;
  border-radius: 18px;
  border: 1px dashed var(--line, rgba(99,115,129,0.14));
  color: var(--muted, #667085);
  font-size: 14px;
  line-height: 1.62;
}

/* ═══════════════════════════════════════════════════════
   CTA-Card — Partner werden
   ═══════════════════════════════════════════════════════ */
.result-card--cta {
  background:  #1f2430;
  border:      1.5px solid #BA7517;
  border-left: 1.5px solid #BA7517;
  cursor:      default;
}
.result-card--cta:hover { box-shadow: none; transform: none; }

.result-card__icon--cta {
  background: rgba(186,117,23,.22);
  color:      #BA7517;
}

/* Logo mark */
.result-card__cta-logo {
  display:     flex;
  align-items: center;
  gap:         6px;
}
.result-card__cta-puls {
  display:       inline-block;
  width:         18px;
  height:        18px;
  border-radius: 50%;
  border:        1.5px solid rgba(186,117,23,.55);
  position:      relative;
  flex-shrink:   0;
}
.result-card__cta-puls::after {
  content:       '';
  position:      absolute;
  top:           50%;
  left:          50%;
  transform:     translate(-50%,-50%);
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    #BA7517;
}
.result-card__cta-wordmark {
  font-size:      13px;
  font-weight:    600;
  color:          #fff;
  letter-spacing: .5px;
}
.result-card__cta-wordmark em {
  font-style:  normal;
  color:       #BA7517;
  font-weight: 700;
}
.result-card__cta-partner {
  font-size:   11px;
  font-weight: 500;
  color:       rgba(255,255,255,.35);
}
.result-card__cta-tagline {
  font-size:   11px;
  color:       rgba(255,255,255,.30);
  margin-top:  2px;
}

.result-card__body--cta {
  padding-top: 0;
}
.result-card__cta-claim {
  font-size:   16px;
  font-weight: 700;
  color:       #fff;
  line-height: 1.3;
  margin-top:  10px;
}
.result-card__cta-sub {
  font-size:   12px;
  color:       rgba(255,255,255,.42);
  margin-top:  4px;
}

.result-card__cta-action {
  padding: 0 14px 14px;
}
.result-card__cta-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  background:      #BA7517;
  color:           #fff;
  font-size:       13px;
  font-weight:     500;
  padding:         8px 16px;
  border-radius:   20px;
  text-decoration: none;
  transition:      opacity 0.15s;
}
.result-card__cta-btn:hover { opacity: 0.88; }
.result-card__cta-btn .ti  { font-size: 13px; }

/* ═══════════════════════════════════════════════════════
   Footer
   ═══════════════════════════════════════════════════════ */
.city-footer {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  padding:         20px 16px 32px;
  font-size:       12px;
  color:           var(--color-text-tertiary, #888);
}

.city-footer a {
  color:           var(--color-text-tertiary, #888);
  text-decoration: none;
  transition:      color 0.15s;
}
.city-footer a:hover { color: var(--color-text-secondary, #555); }

.city-footer__partner {
  color:      #BA7517 !important;
  font-weight: 500;
}
.city-footer__partner:hover { opacity: 0.8; }

.city-footer__dot {
  opacity: 0.4;
  user-select: none;
}