/* ============================================================
   UI-Bausteine (View\Ui) — gemeinsames Vokabular für Profil, Team, Magazin, Regioinfo, Objektseite.
   Doku: docs/PATTERNS.md › „UI-Bausteine". Seitenspezifische Dateien setzen hier NICHTS neu,
   höchstens Abstände im eigenen Kontext.
   ============================================================ */

/* --- „Mehr"-Aufforderung: Pill-Knopf mit Pfeil (Ui::more) --- */
.more {
  margin: var(--space-3) 0 0;
}
/* --- Zeilen mit Icon (Ui::icon_lines) --- */
.icon-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.icon-lines li {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  overflow-wrap: anywhere;
}
.icon-lines svg {
  flex: none;
  align-self: center;
  color: var(--color-icon);
}
/* Zentriert (Kasten, Karte, Kopf am Handy): Icon fließt mit dem umbrechenden Text statt verloren am Rand zu stehen */
.icon-lines.center li { display: block; text-align: center; }
.icon-lines.center svg { display: inline-block; vertical-align: -0.15em; margin-inline-end: var(--space-2); }
/* Nur am Handy zentriert (Kopf, der ab Tablet linksbündig wird) */
@media (max-width: 47.99rem) {
  .icon-lines.center-sm li { display: block; text-align: center; }
  .icon-lines.center-sm svg { display: inline-block; vertical-align: -0.15em; margin-inline-end: var(--space-2); }
}

/* --- Bewertung (Ui::rating): Sterne · Schnitt · Anzahl auf einer Grundlinie --- */
.rating {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  margin: 0;
  line-height: 1.2;
}
.rating .avg { font-weight: 600; }

/* --- Sterne (Ui::stars) — Vorbild Google-Bewertungen: grau, beim Hineinscrollen gestaffelt golden.
   `.in-view` setzt assets/js/global/review-stars.js; ohne JS färbt der <noscript>-Block in FrontendView. --- */
.stars { display: inline-flex; gap: 0.05em; line-height: 1; white-space: nowrap; }
.stars .star { display: inline-block; color: var(--color-border-dark); transition: color 400ms ease; }
.stars.in-view .star.full { color: var(--color-star); }
.stars.in-view .star.half {
  background: linear-gradient(90deg, var(--color-star) 50%, var(--color-border-dark) 50%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stars.in-view .star:nth-child(2) { transition-delay: 100ms; }
.stars.in-view .star:nth-child(3) { transition-delay: 200ms; }
.stars.in-view .star:nth-child(4) { transition-delay: 300ms; }
.stars.in-view .star:nth-child(5) { transition-delay: 400ms; }
.rating a, .rating .count { color: var(--color-text-muted); }

/* --- Schlagworte (Ui::tags): Liste globaler .pill (02-base.css) --- */
.tags { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }

/* --- Social-Links als runde Knöpfe (Ui::social) — Modifier zu .social (components/social.css) --- */
/* grid-area zurücksetzen: .social trägt global `grid-area: social` (Footer-Raster) — in einem anderen Grid (Profilkopf)
   erzeugte das eine zusätzliche benannte Spalte und zerlegte den Kopf in zwei Spalten (gemessen 29.09.2026). */
.social.round { grid-area: auto; gap: var(--space-2); padding: 0; margin: var(--space-3) 0 0; }
.social.round a {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 0.0625rem solid var(--color-border);   /* sichtbar auf weißen Karten UND grauen Flächen */
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
  transition: background var(--transition), color var(--transition);
}
.social.round a:hover { background: var(--color-primary); color: var(--color-text-inverse); transform: none; }

/* --- Karte (.card) — Fläche + Hover wie die Referenz components/property-card.css (Hover-System, PATTERNS.md).
   Anatomie: [.cover > img] · .body > [.meta | .eyebrow] · h2/h3 · .teaser · … · .more
   `.center` = zentrierte Variante ohne .body (Team-Karte: rundes Foto, Name, Rolle …). --- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--color-bg);
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-0.125rem); }
.card .cover { display: block; overflow: hidden; }
.card .cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition); }
.card:hover .cover img { transform: scale(1.03); }
.card .body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); flex: 1; }
.card h2, .card h3 { margin: 0; font-size: var(--text-lg); line-height: 1.3; }
.card h2 a, .card h3 a { color: inherit; text-decoration: none; }
.card h2 a:hover, .card h3 a:hover { text-decoration: underline; }
.card .teaser { color: var(--color-text-muted); }
.card .teaser p { margin: 0; }
.card .teaser p + p { margin-block-start: var(--space-2); }
.card.center { align-items: center; gap: var(--space-2); padding: var(--space-6) var(--space-4) var(--space-4); text-align: center; }

/* In Karten: an den Fuß schieben (Karte = Flex-Spalte) */
.card .more,
.magazine-card .more,
.team-card .more {
  margin-block-start: auto;
  padding-block-start: var(--space-3);
}

/* --- Bürozeiten (Ui::hours / Ui::open_status, Wochenplan 29.09.2026) ---
   Status: grüner Punkt „Jetzt erreichbar", sonst grauer Punkt „Wieder erreichbar Mo 9:00". Pulsieren nur, wenn
   der Nutzer Bewegung zulässt. Plan: je Zeile Tage + Zeiten, Zeiten tabellarisch (gleich breite Ziffern). */
.open-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.open-status .dot {
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--color-text-muted);
  opacity: 0.6;
}
.open-status.is-open .dot { background: var(--color-success); opacity: 1; }
.open-status.is-open strong { color: var(--color-success); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .open-status.is-open .dot { animation: open-pulse 2s ease-out infinite; }
}
@keyframes open-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-success) 50%, transparent); }
  100% { box-shadow: 0 0 0 0.5rem transparent; }
}
.hours-plan {
  list-style: none;
  margin: 0;
  padding: 0;
  font-variant-numeric: lining-nums tabular-nums;   /* Werte ersetzen sich — lining aus body sonst weg */
}
.hours-plan li { margin: 0; }
.hours-plan .days { font-weight: 600; margin-inline-end: var(--space-1); }
.hours .open-status + .hours-plan { margin-top: var(--space-2); }
.hours-note { margin: var(--space-1) 0 0; }