/* Seite: Entdecken (event_list_page.dart, club_list_page.dart).
   Ohne Kacheln: Bilder mit Radius 20 und 12 px Rand, feine Linie nur zwischen Events. */

@media (min-width: 768px) {
  .page--entdecken { padding-top: 16px; }
}

/* ---------- Kopf: Ortswahl + Umschalter ---------- */
.ent-header { padding-right: 12px; }
.ent-heading {
  font: inherit;
  min-width: 0;
}
.ent-place {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  min-height: 44px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.2px;
  color: var(--text);
}
.ent-place__text {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ent-place .ent-place__chevron { width: 24px; height: 24px; }

/* Filter-Pille über die volle Breite: oben 10, seitlich 16 */
.ent-filter { padding: 10px var(--gutter) 4px; }

/* ---------- Tagesüberschrift: 22 w900, Abstand .6, Akzent-Verlauf ---------- */
.ent-day + .ent-day { margin-top: 6px; }
.ent-day__title {
  padding: 14px 18px 12px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .6px;
  line-height: 1.15;
  text-transform: uppercase;
}
.ent-day__title .text-accent { display: inline-block; }

/* ---------- Event-Karte ---------- */
.ent-event { position: relative; }
.ent-day .ent-event:last-child { padding-bottom: 18px; }
.ent-card {
  display: block;
  margin: 0 12px;
  border-radius: var(--r-media);
}
.ent-card__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-media);
  background: var(--placeholder);
  /* Safari schneidet Kinder mit eigenem Layer sonst eckig */
  isolation: isolate;
}
.ent-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .3s ease;
}
.ent-card__img.is-loaded { opacity: 1; }
.ent-card__img.is-broken { display: none; }
.ent-card__ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.ent-card__ph .icon { width: 44px; height: 44px; }
.ent-card__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .10), rgba(0, 0, 0, .70));
  pointer-events: none;
}
.ent-card__pills {
  position: absolute;
  top: 12px;
  right: 12px;
  left: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}
.ent-card__pills .pill { max-width: 160px; }
.ent-card__text {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  min-width: 0;
}
.ent-card__host {
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  color: rgba(255, 255, 255, .82);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ent-card__title {
  margin-top: 2px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ent-card__sk {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-media);
}

/* Gäste-Zeile unter dem Bild: 5 graue Kreise (52), rechts „Wer ist dabei?“ */
.ent-guests {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 12px 14px 0;
}
.ent-faces {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
}
.ent-faces .ent-face {
  width: 52px;
  height: 52px;
  flex: none;
  border: 2px solid var(--bg);
  /* deckend, damit sich die Kreise beim Überlappen nicht aufhellen */
  background: linear-gradient(var(--skeleton), var(--skeleton)), var(--bg);
}
.ent-faces .ent-face + .ent-face { margin-left: -14px; }
.ent-guests__btn {
  flex: none;
  min-height: 44px;
  white-space: nowrap;
  padding: 0 2px;
  font-size: 13.5px;
  font-weight: 800;
  text-align: right;
}

/* Feine Linie zwischen Events (Divider: Höhe 26, Einzug 12) */
.ent-sep {
  height: 1px;
  margin: 13px 12px 12px;
  background: var(--line);
}

/* ---------- Clubs ---------- */
.ent-list--clubs { padding-top: 14px; }
.ent-club { position: relative; }
.ent-club + .ent-club { margin-top: 14px; }
.ent-club__link { display: block; }
.ent-club__media {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-media);
  background: var(--placeholder);
}
.ent-club__initial {
  font-size: clamp(64px, 18vw, 96px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -1px;
}
.ent-club__fav {
  position: absolute;
  top: 10px;
  right: 22px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .38);
  color: rgba(255, 255, 255, .70);
}
.ent-club__fav .icon { width: 28px; height: 28px; }
.ent-club__body {
  display: grid;
  gap: 5px;
  padding: 12px 14px 12px;
  min-width: 0;
}
.ent-club__name {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ent-club__line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 14px;
  color: var(--text-2);
}
.ent-club__line > span {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ent-club__line .ent-club__pin { width: 16px; height: 16px; opacity: .75; }
.ent-club__count {
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-2);
}

/* Hinweis am Ende der Club-Liste */
.ent-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 18px 24px 8px;
  text-align: center;
}
.ent-hint__text {
  max-width: 320px;
  font-size: 14px;
  color: var(--text-2);
}

/* ---------- Fehler ---------- */
.ent-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 44px 24px 24px;
  text-align: center;
}
.ent-error__text {
  max-width: 320px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-2);
}

/* Platzhalter-Karten beim Laden */
.ent-event--sk .ent-club__body { gap: 10px; padding-top: 14px; }
.ent-list--clubs .ent-event--sk + .ent-event--sk { margin-top: 14px; }

/* Hell-Modus: Herz auf dem hellen Platzhalter gut erkennbar halten. */
:root[data-theme="light"] .ent-club__fav { background: rgba(0, 0, 0, .55); color: #fff; }

/* =====================================================================
   Gäste: Events nur nach Stadt (entdecken.js → renderPublic, guestCityPicker).
   Die Stadtsuche steckt auch im Fenster der Gast-Karte (karte.js).
   ===================================================================== */

/* Zeile unter dem Kopf: „Events in <Stadt> und Umgebung“ links, „Stadt ändern“ rechts */
.ent-cityhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 0 var(--gutter);
}
.ent-cityhead__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.ent-cityhead__change {
  flex: none;
  min-height: 44px;
  padding: 0 2px;
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
}

/* Auswahl ohne Stadt: Frage, Suchfeld, Treffer, Anmelden */
.ent-choose {
  display: grid;
  gap: 14px;
  padding: 18px var(--gutter) 28px;
}
.ent-choose__title {
  font-size: 22px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -.2px;
}
.ent-choose__text {
  max-width: 440px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--text-2);
}
.ent-choose__notice {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
.ent-choose__again { margin: 0 calc(-1 * var(--gutter)); }
.ent-choose__login {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.ent-choose__login-text {
  min-width: 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--text-2);
}
.ent-choose__login .btn { flex: none; }
.ent-choose__note {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-3);
}

/* Stadtsuche (Feld, Hinweise, Trefferliste als Zeilen über die volle Breite) */
.ent-city {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.ent-city__lead {
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-2);
}
.ent-city__field:focus-within {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.ent-city__msg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-2);
}
.ent-city__msg:empty { display: none; }
.ent-city__retry {
  min-height: 40px;
  font-size: 13.5px;
  font-weight: 800;
}
.ent-city__list {
  display: grid;
  margin: 0 calc(-1 * var(--gutter));
}
.ent-city__list:empty { display: none; }
.ent-city__quick {
  display: grid;
  gap: 2px;
}
.ent-city__label {
  padding-top: 6px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text-2);
}
.ent-city__item .row__title,
.ent-city__item .row__sub,
.ent-choose__again .row__title,
.ent-choose__again .row__sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ent-city__item:focus-visible,
.ent-choose__again:focus-visible {
  outline-offset: -2px;
  border-radius: 12px;
}

/* Im Fenster („Stadt ändern“, Karte) */
.ent-city-sheet { padding: 14px var(--gutter) 20px; }

/* Rechte Spalte (shell.js) für Gäste: Hinweis ohne Stadt und lange Stadtnamen.
   Steht hier, weil app.css nicht zum Gast-Umbau der Events gehört; greift nur über
   diese eigenen Klassen. */
.rail__heading--city > span {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rail__heading--city a {
  flex: none;
  margin-left: 10px;
}
.rail__note {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-2);
}

/* =====================================================================
   Angemeldet (entdecken.js → renderSignedIn)
   ===================================================================== */

/* Hinweis „Wähle einen Ort …“ – schlichte Zeile ohne Kasten */
.ent-locate {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 2 * var(--gutter));
  margin: 2px var(--gutter) 0;
  padding: 8px 0;
  text-align: left;
  color: var(--text-2);
}
.ent-locate .ent-locate__icon { width: 22px; height: 22px; flex: none; }
.ent-locate__text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  line-height: 1.4;
}
.ent-locate .ent-locate__go { flex: none; }
@media (hover: hover) and (pointer: fine) {
  .ent-locate:hover .ent-locate__text { color: var(--text); }
}

/* Gäste unter der Event-Karte: echte Gesichter (52), Höhe fest */
.ent-guests--signed {
  justify-content: flex-start;
  min-height: 64px;
}
.ent-guests__space { display: block; height: 52px; }
.ent-guests__note {
  font-size: 13px;
  color: var(--text-2);
  opacity: .8;
}
.ent-guests__retry {
  min-height: 44px;
  font-size: 13.5px;
  font-weight: 800;
}

/* Hinweis über der Liste, wenn das Neuladen scheiterte */
.ent-errorbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px var(--gutter) 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-2);
}
.ent-errorbar__btn {
  flex: none;
  min-height: 40px;
  font-size: 13.5px;
  font-weight: 800;
}

/* ---------- Club-Karten ---------- */
.page--entdecken-in .ent-club + .ent-club { margin-top: 0; }
.ent-club__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ent-club__ph {
  display: grid;
  place-items: center;
  color: var(--text-3);
}
.ent-club__ph .icon { width: 40px; height: 40px; }
.ent-club__row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.ent-club__row .ent-club__name { flex: 1 1 auto; min-width: 0; }
.ent-open {
  flex: none;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.3;
  color: #fff;
  background: #E53935;
}
.ent-open.is-open { background: #43A047; }
.ent-club__desc {
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.ent-club__fav.is-on { color: inherit; }
.ent-club__fav .icon { width: 28px; height: 28px; }

/* ---------- Filter-Fenster (filter_ui.dart) ---------- */
.ent-fsheet {
  display: grid;
  gap: 14px;
  padding: 14px 16px 18px;
}
.ent-fsearch { position: relative; }
.ent-fsearch__clear {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  margin-right: -8px;
  color: var(--text-2);
}
.ent-fsearch__clear[hidden] { display: none; }
.ent-fsearch input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.ent-fgroups { display: grid; gap: 14px; }
.ent-fgroup { display: grid; gap: 7px; }
.ent-fgroup__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ent-fgroup__label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-2);
}
.ent-fgroup__hint { font-size: 12.5px; color: var(--text-3); }
.ent-fgroup.is-disabled .ent-radius__range,
.ent-fgroup.is-disabled .ent-radius__field { opacity: .5; }
.ent-fpills {
  display: flex;
  gap: 8px;
  min-width: 0;
}
.ent-fpills--wrap { flex-wrap: wrap; }
.ent-fpill { min-width: 0; }
.ent-fpill--fill {
  flex: 1 1 0;
  justify-content: center;
  padding: 0 6px;
}
.ent-fpill--fill > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ent-fsheet .chip:not(.is-active) { background: var(--quiet-fill); }

/* Radius: Zahlenfeld (Pille) + Schieber */
.ent-radius__field {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: var(--quiet-fill);
}
.ent-radius__num {
  width: 3.2em;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  outline: none;
  -moz-appearance: textfield;
  appearance: textfield;
}
.ent-radius__num::-webkit-outer-spin-button,
.ent-radius__num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ent-radius__unit {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-2);
}
.ent-radius__range {
  width: 100%;
  margin: 4px 0 0;
  accent-color: var(--accent-solid);
}
.ent-fsheet__foot {
  display: flex;
  gap: 10px;
}
.ent-fsheet__foot .btn { flex: 1 1 0; min-height: 46px; }

/* ---------- Suchort wählen ---------- */
.ent-loc {
  display: grid;
  gap: 14px;
  padding: 14px 16px 20px;
}
.ent-loc__lead { font-size: 14px; color: var(--text-2); }
.ent-loc__current {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ent-loc__now {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 800;
}
.ent-loc__now span {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ent-loc__now .icon { width: 20px; height: 20px; flex: none; }
.ent-loc__status {
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
}
.ent-loc__status:empty { display: none; }
.ent-loc__msg { font-size: 14px; color: var(--text-2); }
.ent-loc__retry { min-height: 40px; font-size: 13.5px; font-weight: 800; }
.ent-loc__spin {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--accent-solid);
  animation: ent-spin .8s linear infinite;
}
@keyframes ent-spin { to { transform: rotate(360deg); } }
.ent-loc__results { display: grid; margin: 0 -16px; }
.ent-loc__results.is-busy { opacity: .55; pointer-events: none; }
.ent-loc__item .row__sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ent-loc__note { font-size: 12px; line-height: 1.4; color: var(--text-3); }