/* =====================================================================
   JANDECK-GRUPPE — Familien-Layer (auf allen drei Marken identisch)
   Wird NACH der jeweiligen Marken-CSS geladen.
   Unifizierendes Element: die dunkle "Gruppen-Leiste" (Roofline) oben –
   auf hellen wie dunklen Seiten gleich, plus farbige Marken-Punkte.
   Marken-Akzent je Seite über --fam-accent (Fallback = Orange).
   ===================================================================== */
:root {
  --fam-orange: #E8801A;  /* Gruppen-/Bestandswärme-Orange (Referenz) */
  --fam-red:    #C1322B;  /* Kernbohrungen */
  --fam-green:  #7CB342;  /* Bestandswärme Effizienz-Grün */
  --fam-amber:  #F2A63C;  /* Gruppe/Amber-Highlight */
  --fam-accent: var(--fam-orange);
}

/* ---- Gruppen-Leiste (immer dunkel = konstantes Familiensignal) ---- */
/* Fest oben (self-contained), damit sie unabhängig von der Ladereihenfolge
   der Marken-CSS immer als feste Roofline sitzt; der Header rückt via
   .site-header{top:42px} darunter. */
.group-bar {
  background: #0B0E13;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  font-family: "Sora", "Segoe UI", system-ui, sans-serif;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 120;
}
.group-bar__inner {
  width: min(1280px, 92vw);
  margin-inline: auto;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.group-bar__label {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8b93a1;
  white-space: nowrap;
}
.group-bar__label svg { width: 15px; height: 15px; color: var(--fam-accent); flex: none; }
.group-bar__switch { display: flex; align-items: center; gap: 0.15rem; }
.group-bar__switch a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.76rem;
  font-weight: 500;
  color: #b9c0cc;
  text-decoration: none;
  padding: 0.34em 0.72em;
  border-radius: 999px;
  transition: color 0.25s ease, background 0.25s ease;
  white-space: nowrap;
}
.group-bar__switch a:hover { color: #fff; background: rgba(255,255,255,0.07); }
.group-bar__switch a[aria-current="page"] { color: #fff; background: rgba(255,255,255,0.05); }
.group-bar__switch .dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
}
.group-bar__switch .dot--group { background: var(--fam-amber); box-shadow: 0 0 8px var(--fam-amber); }
.group-bar__switch .dot--drill { background: var(--fam-red);   box-shadow: 0 0 8px var(--fam-red); }
.group-bar__switch .dot--heat  { background: var(--fam-orange);box-shadow: 0 0 8px var(--fam-orange); }

@media (max-width: 720px) {
  .group-bar__label span { display: none; }
  .group-bar__switch a span.lbl { display: none; }   /* nur Punkte auf sehr kleinen Screens */
  .group-bar__inner { justify-content: center; gap: 0.5rem; }
}
@media (max-width: 460px) {
  .group-bar__label { display: none; }
}

/* ---- Familien-Zeile für den Footer (Cross-Links) ---- */
.fam-crosslinks {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem;
  font-family: "Sora", "Segoe UI", system-ui, sans-serif;
  font-size: 0.82rem;
}
.fam-crosslinks .fam-lead { color: inherit; opacity: 0.6; letter-spacing: 0.04em; }
.fam-crosslinks a {
  display: inline-flex; align-items: center; gap: 0.45em;
  text-decoration: none; color: inherit; font-weight: 500;
  opacity: 0.85; transition: opacity 0.25s ease;
}
.fam-crosslinks a:hover { opacity: 1; }
.fam-crosslinks .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.fam-crosslinks .dot--group { background: var(--fam-amber); }
.fam-crosslinks .dot--drill { background: var(--fam-red); }
.fam-crosslinks .dot--heat  { background: var(--fam-orange); }