/* ==========================================================================
   Soziale Profile — Kopfleiste, Menue, Fusszeile
   --------------------------------------------------------------------------
   Markup kommt aus cex_social_inject() in cex-automation.php. Kopfleiste und
   Fusszeile stehen im Inhalt der 39 Seiten und nicht in einer Theme-Datei;
   der Block wird deshalb beim Ausliefern eingesetzt.

   Die Datei liegt im Plugin und nicht im Theme, weil nicht jede Seite
   dieselben Theme-Stylesheets laedt — aus dem Plugin geladen ist sie
   garantiert ueberall da. Aus demselben Grund traegt jede Marken-Variable
   einen festen Ersatzwert: faellt cx-design-system.css auf einer Seite aus,
   bleiben die Farben trotzdem richtig.

   Hausregel: keine runden Ecken. Die Kacheln sind quadratisch, der Akzent
   erscheint nur beim Darueberfahren — dieselbe Bewegung wie beim CTA in der
   Kopfleiste, damit die Leiste eine Handlung behaelt und nicht fuenf.

   17.09.2026: Der Geltungsbereich war auf .cex-migrated-page beschraenkt. Die
   erste Seite auf template-cex-blocks.php traegt aber .cex-blocks-page — dort
   griff keine einzige Regel, und die vier SVG ohne Breitenangabe liefen auf
   volle Spaltenbreite auf (im Render belegt: ein Symbol pro Bildschirm). :is()
   statt :where(), damit die Gewichtung bleibt, wie sie war.
   ========================================================================== */

:is(.cex-migrated-page, .cex-blocks-page) .cx-social {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
:is(.cex-migrated-page, .cex-blocks-page) .cx-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 0;
  text-decoration: none;
  transition: background-color 280ms cubic-bezier(0.85, 0, 0, 1),
              border-color 280ms cubic-bezier(0.85, 0, 0, 1),
              color 280ms cubic-bezier(0.85, 0, 0, 1);
}
:is(.cex-migrated-page, .cex-blocks-page) .cx-social__icon {
  display: block;
  width: 17px;
  height: 17px;
}
:is(.cex-migrated-page, .cex-blocks-page) .cx-social__link:focus-visible {
  outline: 2px solid var(--cx-yellow, #FF7A00);
  outline-offset: 2px;
}
:is(.cex-migrated-page, .cex-blocks-page) .cx-social__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cx-yellow, #FF7A00);
}

/* ---- Kopfleiste (heller Grund, ab 1200px sichtbar) ----------------------- */
:is(.cex-migrated-page, .cex-blocks-page) .cx-social--top {
  display: none;                 /* darunter uebernimmt das Menue */
  gap: 0;
  margin-right: 2px;
  padding-right: 6px;
  border-right: 1px solid var(--line, rgba(30, 35, 39, .12));
}
/* 28px, nicht 34px: die Kopfleiste hat eine feste Breite. Bei 34px blieben der
   Menuereihe nur 192px statt der noetigen 218px, und "Ueber uns" brach auf drei
   Zeilen um. 28px geben 26px frei -- genau die fehlende Strecke. Gemessen bei
   1200/1280/1366/1440/1600px am 23.08.2026. */
:is(.cex-migrated-page, .cex-blocks-page) .cx-social--top .cx-social__link {
  width: 28px;
  height: 28px;
  color: var(--cx-charcoal-3, #596066);
}
/* Zweite Sicherung: die Menuepunkte duerfen nie mitten im Wort umbrechen,
   egal was spaeter noch in die Leiste kommt. */
:is(.cex-migrated-page, .cex-blocks-page) .nav__primary a {
  white-space: nowrap;
}
:is(.cex-migrated-page, .cex-blocks-page) .cx-social--top .cx-social__link:hover,
:is(.cex-migrated-page, .cex-blocks-page) .cx-social--top .cx-social__link:focus-visible {
  background: var(--cx-yellow, #FF7A00);
  color: var(--cx-charcoal, #1E2327);
}
@media (min-width: 1200px) {
  :is(.cex-migrated-page, .cex-blocks-page) .cx-social--top { display: flex; }
}

/* ---- Menue (unten im Ausklappmenue angeheftet) ---------------------------
   Der Block ist letztes Kind des scrollenden <aside>. bottom:0 haelt ihn beim
   Blaettern am unteren Rand, sonst laege er rund 450 px unter der Bildkante --
   auf dem Telefon war er dadurch praktisch unauffindbar. Gemessen 23.08.2026. */
:is(.cex-migrated-page, .cex-blocks-page) .cx-social-block {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 28px 14px;
  background: var(--cx-charcoal, #1E2327);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
:is(.cex-migrated-page, .cex-blocks-page) .cx-social-block .cx-social__label { margin: 0; }
:is(.cex-migrated-page, .cex-blocks-page) .cx-social--drawer {
  gap: 8px;
  flex-wrap: wrap;
}
:is(.cex-migrated-page, .cex-blocks-page) .cx-social--drawer .cx-social__link {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
}
:is(.cex-migrated-page, .cex-blocks-page) .cx-social--drawer .cx-social__link:hover,
:is(.cex-migrated-page, .cex-blocks-page) .cx-social--drawer .cx-social__link:focus-visible {
  background: var(--cx-yellow, #FF7A00);
  border-color: var(--cx-yellow, #FF7A00);
  color: var(--cx-charcoal, #1E2327);
}

/* ---- Einwilligungsblatt und Menue schliessen sich aus ---------------------
   Beim allerersten Besuch liegt das Einwilligungsblatt (#privacy-consent, fest
   verankert, z-index 200) ueber dem unteren Rand des Ausklappmenues und
   verdeckt genau die Symbolleiste. Solange das Menue offen ist, wird das Blatt
   ausgeblendet; es kommt unveraendert zurueck, sobald das Menue zugeht -- die
   Einwilligung bleibt also jederzeit beantwortbar. Der Nachbar-Wahlschalter
   greift, weil #privacy-consent im Dokument nach dem Menue steht (Reihenfolge
   im body: header, scrim, aside, main, footer, section#privacy-consent).
   Am echten 375-px-Fenster gemessen 23.08.2026. */
:is(.cex-migrated-page, .cex-blocks-page) #cxServicesDrawer.is-open ~ #privacy-consent {
  display: none;
}

/* ---- Fusszeile (eigene Reihe ueber der Copyright-Zeile) ------------------ */
:is(.cex-migrated-page, .cex-blocks-page) .cx-social-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
:is(.cex-migrated-page, .cex-blocks-page) .cx-social-row + .footer__bottom { margin-top: 20px; }
:is(.cex-migrated-page, .cex-blocks-page) .cx-social--footer {
  gap: 8px;
  flex-wrap: wrap;
}
:is(.cex-migrated-page, .cex-blocks-page) .cx-social--footer .cx-social__link {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.82);
}
:is(.cex-migrated-page, .cex-blocks-page) .cx-social--footer .cx-social__link:hover,
:is(.cex-migrated-page, .cex-blocks-page) .cx-social--footer .cx-social__link:focus-visible {
  background: var(--cx-yellow, #FF7A00);
  border-color: var(--cx-yellow, #FF7A00);
  color: var(--cx-charcoal, #1E2327);
}

/* ---- Mobil --------------------------------------------------------------- */
@media (max-width: 620px) {
  :is(.cex-migrated-page, .cex-blocks-page) .cx-social-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  /* 375px: vier 44er-Flaechen plus Beschriftung passen nicht nebeneinander. */
  :is(.cex-migrated-page, .cex-blocks-page) .cx-social-block {
    padding: 10px 20px 12px;
    gap: 10px;
  }
  :is(.cex-migrated-page, .cex-blocks-page) .cx-social-block .cx-social__label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  :is(.cex-migrated-page, .cex-blocks-page) .cx-social__link { transition-duration: 0.01ms !important; }
}