/* ==========================================================================
   consent.css — Einwilligungs-Leiste (Plan MASTER-29, S21, §4.5).

   Eine Komponente für mehrere Trägerseiten: alle Werte mit Rückfall
   (R-GEST-066), damit sie auf Produktseite, Rechner, Präsentation, Hilfe und
   Impressum gleich aussieht, egal welches Stylesheet die Seite führt.
   Selektoren sind an `.consent` gebunden, damit Seitenregeln (h2, p, button)
   nicht hineinwirken und die Leiste nicht in die Seite.

   Werte aus gestaltung.md: Text s-01/s-02, Abstände a-1..a-4, Knöpfe
   r-pille mit 44 px Mindesthöhe (R-GEST-036), Fokusring R-GEST-063,
   Bewegung d-2 mit Ausschalter (R-GEST-070/071).
   ========================================================================== */

.consent {
  --cs-blau: var(--accent, #026CDF);
  --cs-blau-dunkel: #0147B1;
  --cs-text: var(--ink, #2b3033);
  --cs-nebentext: #61686c;
  --cs-linie: #dbe3ea;
  --cs-flaeche: #ffffff;
  --cs-schrift: 'Source Sans Pro', 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Über Kopfleisten (bis 120) und schwebenden Knöpfen (bis 1000), unter den
     Overlays der Seiten (1200) — ein geöffnetes Overlay bleibt oben. */
  z-index: 1100;
  box-sizing: border-box;
  background: var(--cs-flaeche);
  border-top: 1px solid var(--cs-linie);
  box-shadow: 0 6px 18px rgba(43, 48, 51, .08);   /* e-1 */
  color: var(--cs-text);
  font-family: var(--schrift, var(--cs-schrift));
  font-size: 0.875rem;                             /* s-01 */
  line-height: 1.5;
  text-align: left;
  animation: consent-ein 200ms ease-out;           /* d-2 */
}

.consent[hidden] { display: none; }

.consent *,
.consent *::before,
.consent *::after { box-sizing: border-box; }

.consent__innen {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1rem clamp(1rem, 3vw, 2rem);            /* a-3, Seitenrand R-GEST-032 */
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 0.75rem;                                    /* a-2 */
}

.consent .consent__inhalt { max-width: 72ch; }     /* R-GEST-015 */

.consent .consent__titel {
  font-weight: 700;                                /* Frage fett, im selben Absatz wie der Hinweis */
  color: var(--cs-text);
}

.consent .consent__text,
.consent .consent__stand {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--cs-text);
}

.consent .consent__stand { color: var(--cs-nebentext); }
.consent .consent__stand[hidden] { display: none; }

.consent .consent__verweis {
  color: var(--cs-blau);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 120ms ease;                    /* d-1 */
}
.consent .consent__verweis:hover { color: var(--cs-blau-dunkel); }

/* Zwei gleichwertige Knöpfe: gleiche Größe, gleiche Farbe, gleiche Gewichtung.
   Ablehnen ist so leicht wie Zustimmen (EDPB, DSK) — deshalb keine
   führend/zweitrangig-Unterscheidung, sondern zweimal die führende Form. */
.consent .consent__knoepfe {
  display: flex;
  gap: 0.5rem;                                     /* a-1 */
}

.consent .consent__knopf {
  flex: 1 1 0;
  min-height: 2.75rem;                             /* 44 px, R-GEST-036 */
  margin: 0;
  padding: 0.75rem 1.5rem;                         /* a-2 / a-4 */
  border: 0;
  border-radius: 999px;                            /* r-pille */
  background: var(--cs-blau);
  color: #ffffff;                                  /* 4,98 auf #026CDF */
  font-family: inherit;
  font-size: 1.0625rem;                            /* s-02 */
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(43, 48, 51, .08);   /* e-1 */
  transition: background-color 120ms ease;         /* d-1 */
}
.consent .consent__knopf:hover,
.consent .consent__knopf:active { background: var(--cs-blau-dunkel); }

.consent .consent__knopf:focus-visible,
.consent .consent__verweis:focus-visible {
  outline: 3px solid #026CDF;                      /* R-GEST-063 */
  outline-offset: 2px;
}

/* Telefon (unter b-s): Abstände und Knopf-Innenrand verdichtet, damit die Leiste die 15 % aus
   R-GEST-039 einhält. Knöpfe bleiben 44 px hoch (R-GEST-036). */
@media (max-width: 40rem) {
  .consent__innen {
    padding: 0.5rem 1rem;                          /* a-1 / a-3 */
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
    gap: 0.5rem;                                   /* a-1 */
  }
  .consent .consent__knopf { padding: 0.5rem 0.75rem; font-size: 1rem; }
}

/* Ab b-m: Text links, Knöpfe rechts in einer Zeile. */
@media (min-width: 56rem) {
  .consent__innen {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;                                   /* a-4 */
  }
  .consent .consent__knoepfe { flex: 0 0 auto; }
  .consent .consent__knopf { flex: 0 0 auto; min-width: 11rem; }
}

/* Die Leiste liegt über dem Seitenende; der Inhalt bekommt unten so viel Platz,
   wie sie hoch ist, damit nichts dauerhaft verdeckt bleibt (R-GEST-039).
   consent.js setzt --consent-hoehe und die Klasse. */
html.consent-offen body { padding-bottom: var(--consent-hoehe, 0px); }

/* Der Fußlink „Datenschutz-Einstellungen" ist ein Knopf (er öffnet etwas, er
   führt nirgendwohin), sieht aber aus wie die Verweise im Seitenfuß. */
[data-consent-oeffnen] {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;                             /* R-GEST-036 */
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
/* Die Seiten tragen den Knopf mit `hidden`; consent.js blendet ihn ein. Fehlt das Skript,
   bleibt im Fuß kein leerer Knopf zurück (S13). */
[data-consent-oeffnen][hidden] { display: none; }
[data-consent-oeffnen]:focus-visible {
  outline: 3px solid #026CDF;
  outline-offset: 2px;
}

@keyframes consent-ein {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .consent,
  .consent .consent__knopf,
  .consent .consent__verweis { animation: none; transition: none; }
}