/* ==========================================================================
   Briefgeflüster — Consent-Banner
   --------------------------------------------------------------------------
   Komponenten-Styles für die Einwilligungsleiste. Bewusst nicht in
   colors_and_type.css: die Datei ist das Design-System (Tokens und
   Utilities), keine Komponentensammlung. Hier stehen ausschließlich
   Tokens von dort — kein eigener Farbwert, keine eigene Schrift.
   Markup und Logik: consent.js
   ========================================================================== */

.consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;                      /* über dem fixierten Footer der Startseite */
  background: var(--color-bg);       /* deckend — der Inhalt darf nicht durchscheinen */
  border-top: var(--border-rule);
  box-shadow: 0 -6px 18px rgba(28, 24, 20, 0.08);
  padding: var(--space-4) var(--space-5);
}

/* [hidden] allein reicht nicht: display:flex weiter unten würde es
   überschreiben, das Attribut hat keine höhere Spezifität. */
.consent-banner[hidden] { display: none !important; }

.consent-inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.consent-text {
  flex: 1;
  /* Die Startseite setzt text-align:center auf den body — ohne das hier
     stünde dieselbe Leiste je nach Seite anders. */
  text-align: left;
  font-family: var(--font-sans);
  font-size: var(--type-ui-sm);
  line-height: var(--leading-ui);
  color: var(--color-fg-muted);
  margin: 0;
}

.consent-text a {
  color: var(--color-fg);
  text-underline-offset: 3px;
}

.consent-text a:hover { color: var(--color-accent); }

.consent-actions {
  display: flex;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* Beide Schaltflächen teilen sich jede Maßangabe. Eine optisch
   untergeordnete Ablehnung macht die Einwilligung nach Auffassung der
   Aufsichtsbehörden unwirksam — der Unterschied darf nur die Farbe sein. */
.consent-btn {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--type-ui);
  letter-spacing: var(--track-button);
  line-height: 1;
  padding: 11px var(--space-5);
  min-width: 132px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-letter),
              color var(--dur-base) var(--ease-letter),
              border-color var(--dur-base) var(--ease-letter);
}

.consent-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.consent-accept {
  background: var(--bg-mitternacht);
  color: var(--color-on-accent);
}

.consent-accept:hover { background: #3A5E50; }

.consent-decline {
  background: transparent;
  color: var(--color-fg-muted);
  border-color: var(--color-line);
}

.consent-decline:hover {
  background: var(--bg-cream-deep);
  color: var(--color-fg);
}

/* Solange der Banner steht, bekommt die Seite unten Luft, damit kein
   Inhalt dahinter verschwindet. Der Wert kommt aus consent.js, weil die
   Höhe der Leiste vom Textumbruch abhängt.

   Der fixierte Footer der Startseite bleibt bewusst, wo er ist, und liegt
   dann hinter der deckenden Leiste: hebt man ihn stattdessen an, landet er
   auf dem Anmeldeformular. Die Leiste verlinkt die Datenschutzerklärung
   selbst, und nach der Entscheidung steht der Footer sofort wieder frei. */
body.consent-open { padding-bottom: var(--consent-height, 120px); }

@media (max-width: 560px) {
  .consent-inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
  }

  .consent-actions > .consent-btn { flex: 1; }

  .consent-btn { min-width: 0; }
}

/* Eine Einwilligungsleiste auf einem Ausdruck ist sinnlos. */
@media print {
  .consent-banner { display: none !important; }
  body.consent-open { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .consent-btn { transition: none; }
}