/* ==========================================================================
   einwilligung.css – Banner für den Recruiting-Pixel (Kerzmann-Redesign, 11.11.2026)
   Nur geladen, wenn ein Pixel eingerichtet ist. Markup: app/partials/consent.php,
   Logik: assets/js/consent.js. Farben aus marke.css. Dunkle Schrift auf Mint, weil
   Weiß auf Mint den Kontrast verfehlt. Ablehnen und Einverstanden gleich groß.
   ========================================================================== */

.consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 10000;
  background: var(--anthrazit, #3C3C3B);
  color: var(--weiss, #fff);
  border-top: 3px solid var(--mint, #9FC7AA);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .25);
}
.consent[hidden] { display: none; }
.consent__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
}
.consent__text { flex: 1 1 520px; }
.consent__title { margin: 0 0 6px; font-size: 1.15rem; font-weight: 700; line-height: 1.3; color: var(--weiss, #fff); }
.consent__text p { margin: 0; font-size: .9375rem; line-height: 1.55; color: #E6E6E6; }
.consent__text a { color: var(--mint, #9FC7AA); text-decoration: underline; }
.consent__actions { display: flex; gap: 12px; flex: 0 0 auto; }
.consent__knopf {
  min-width: 150px;
  min-height: 48px;
  padding: 10px 22px;
  border: 2px solid var(--mint, #9FC7AA);
  border-radius: var(--radius-knopf, 10px);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}
.consent__knopf--nein { background: transparent; color: var(--weiss, #fff); }
.consent__knopf--ja { background: var(--mint, #9FC7AA); color: var(--anthrazit-tief, #2B2B2A); }
.consent__knopf:hover { filter: brightness(1.08); }
.consent__knopf:focus-visible { outline: 3px solid var(--weiss, #fff); outline-offset: 2px; }

@media (max-width: 767px) {
  .consent__inner { padding: 12px 16px 14px; gap: 10px; }
  .consent__text { flex-basis: 100%; }
  /* Am Handy ohne sichtbare Überschrift: die erste Funnel-Frage bleibt bei 375 × 667 sichtbar.
     aria-labelledby liest den Titel trotzdem vor. */
  .consent__title { display: none; }
  .consent__text p { font-size: .8125rem; line-height: 1.45; }
  .consent__actions { width: 100%; }
  .consent__knopf { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 8px 12px; }
}