/* ============================================================================
   BIZARRLADY STELLA — additions on top of the editorial design system.
   Nothing here introduces a new colour or a new token: every rule composes
   the existing --color-*, --space-*, --fs-* and --radius-* contracts from
   colors_and_type.css / styles.css. Loaded AFTER styles.css.
   ==========================================================================*/

/* Playlist groups (Vorlieben & Services) ---------------------------------- */
.spec-group + .spec-group { margin-top: var(--space-xl); }
.spec-group__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}
.spec-group__count {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.06em;
  color: var(--color-muted);
  margin-left: auto;
}

/* Tag cloud — the specialities list, restrained and scannable -------------- */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.tag-cloud .tag { padding: 8px 14px; font-size: 12px; color: var(--color-text); }
.tag-cloud .tag:hover { border-color: var(--color-text); }

/* A quiet note line used for discretion / framing copy --------------------- */
.notice {
  border: 1px solid var(--color-border);
  border-top: 2px solid var(--color-text);
  background: var(--color-surface-raised);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.notice__label {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.notice p { max-width: var(--measure); }

/* Availability rows on the schedule page ----------------------------------- */
.event__tag { margin-top: 8px; }
.event__side .meta + .tlink { display: inline-block; margin-top: 8px; }

/* Real gallery photography -------------------------------------------------
   Grid tiles are deliberate 4:5 crops (object-fit: cover); the lightbox shows
   the full, uncropped frame (object-fit: contain). No new tokens. */
.gallery-item { aspect-ratio: 4 / 5; }
.gallery-item__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--color-surface-raised);
  transition: filter var(--dur) var(--ease);
}
.gallery-item:hover .gallery-item__img { filter: brightness(0.94); }

.lightbox__img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(90vw, 1000px);
  max-height: 72vh;
  object-fit: contain;
  border: 1px solid color-mix(in oklch, var(--color-bg) 24%, transparent);
  background: color-mix(in oklch, var(--color-bg) 6%, transparent);
}

/* Home photography ---------------------------------------------------------
   Real client photos on the home hero and about section. Full, uncropped frame
   at the image's intrinsic ratio (the <img> width/height attributes prevent
   layout shift); a single hairline border frames them — no radius, no shadow.
   No new tokens. */
.home-media {
  border: 1px solid var(--color-border);
  background: var(--color-surface-raised);
  overflow: hidden;
}
.home-media img {
  display: block;
  width: 100%;
  height: auto;
}
/* Header safety on very small screens: the wordmark must never overflow ---- */
@media (max-width: 520px) {
  .brand__name { font-size: 18px; }
  .brand__tag { font-size: 9px; letter-spacing: 0.14em; }
}

/* Legal pages are German-only; the switch would produce a half-translated page. */
.legal-page .lang { display: none; }