/* ============================================================
   DIENSTE/STYLE.CSS - Seitenspezifische Styles
   Relations-Auswahl (.og-relation) und Chips: assets/components.css
   ============================================================ */

/* Ebene als kleine Plakette: Region = Gold, Ort = Anthrazit */
.dn-ebene {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
  white-space: nowrap;
}
.dn-ebene-region { background: var(--pal-gold-hell); color: var(--pal-anthrazit-nacht); }
.dn-ebene-ort { background: color-mix(in srgb, var(--ink) 12%, transparent); color: var(--ink); }

.dn-rolle { display: block; font-size: 11px; color: var(--ink-soft); margin-top: 2px; }
.dn-hinweis { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-soft); }
.dn-beschreibung { white-space: pre-line; }
.dn-leer { color: var(--danger); font-weight: 600; }

/* ---------- Dienste in anderen Bereichen (assets/dienst-info.js) ---------- */
.dienst-info { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 6px 0 0; font-size: 13px; color: var(--ink-soft); }
.dienst-info > i { font-size: 16px; color: var(--accent-dark); }
.dienst-info a { color: var(--ink); text-decoration: none; }
.dienst-info a:hover { color: var(--accent-dark); }
.dienst-info b { font-weight: 700; }
.dienst-info-trenner { color: var(--line-strong, var(--ink-soft)); }
.dn-verknuepft { margin: 0; padding-left: 18px; }
.dn-verknuepft li { margin: 2px 0; }
.dn-glocke { font-size: 16px; vertical-align: -3px; color: var(--accent-dark); }