/* Rentique Weiß — Einwilligungshinweis.
   Eigene Datei, damit Markup, Verhalten und Aussehen dieses Bausteins an einer
   Stelle liegen. Wird im Layout auf jeder Seite geladen.

   Diese Datei steht NACH /ds/bundle.css und korrigiert von dort genau eine
   Sache — die Lage. Das Design-System selbst bleibt unangetastet
   (ARCHITEKTUR.md §1). Aussehen, Farben und Abstände kommen weiter aus
   .rw-consent__panel / __title / __text / __actions.
   ———————————————————————————————————————————————————————————————————————— */

/* Feste Leiste am unteren Bildschirmrand, ÜBER der Seite (Wunsch Philipp,
   29.09.2026). Bis dahin stand der Hinweis oben im Dokumentfluss, weil eine feste
   Leiste auf schmalen Geräten Inhalt und Fokusring verdeckt. Beides fängt jetzt
   /js/basis.js ab: Solange der Hinweis steht, bekommt die Seite unten genau so
   viel Platz, wie er hoch ist (body padding-bottom), und der Browser scrollt
   fokussierte Elemente über ihn (scroll-padding-bottom). Nichts bleibt verdeckt.

   Farbe: bewusst ANDERS als alles andere – heller Kupferton mit kräftiger
   Kupferkante und kupfernem Knopf. Navy (Kopf, Fuß, Startbild) und Elfenbein
   (Seitengrund) gibt es überall; diese Fläche gibt es nur hier, damit der
   Hinweis sofort ins Auge fällt und weggeklickt wird. */
.rw-consent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 100;
  padding: 0 var(--wrap-pad) var(--space-3);
  pointer-events: none;           /* nur das Panel fängt Klicks, nicht der Rand */
}
.rw-consent__panel {
  pointer-events: auto;
  background: var(--copper-050);
  background-image: none;
  color: var(--text);
  border: var(--bw-hair) solid var(--copper);
  border-top: 4px solid var(--copper);
  box-shadow: var(--sh-panel);
  padding: var(--space-4) var(--space-5);
  animation: rw-consent-rein .35s var(--ease-out, ease-out) both;
}
.rw-consent__title { color: var(--navy-900); }
.rw-consent__text { color: var(--text-soft); }
.rw-consent__text a { color: var(--link); }
@keyframes rw-consent-rein { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rw-consent__panel { animation: none; } }

/* Platz für die Leiste, solange sie steht (Höhe setzt /js/basis.js). */
body.hat-hinweis { padding-bottom: var(--hinweis-h, 0px); }
html.hat-hinweis { scroll-padding-bottom: var(--hinweis-h, 0px); }

/* Die Überschrift ist bewusst ein <p> und kein <h2>: Der Hinweis steht im
   Quelltext vor der <h1> der Seite (früh in der Tabreihenfolge), und eine
   Überschrift oberhalb der Hauptüberschrift bricht die Gliederung. Damit sie trotzdem aussieht wie eine, bekommt sie hier, was das
   Design-System sonst über h1–h4 vergibt (bundle.css: h1,h2,h3,h4 und h4). */
.rw-consent__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  text-transform: uppercase;
  letter-spacing: var(--tr-caps);
  line-height: var(--lh-heading);
  text-wrap: balance;
}

/* Unter 560px steht der Knopf allein in seiner Zeile und nimmt sie ganz ein —
   das ist die sicherste Trefferfläche, die zu haben ist. Darüber schrumpft er
   auf seine natürliche Breite, ab 980px setzt ihn das Design-System ohnehin
   rechts neben den Text. */
.rw-consent__actions .rw-btn { width: 100%; }

@media (min-width: 560px) {
  .rw-consent__actions .rw-btn { width: auto; }
}

@media (min-width: 980px) {
  .rw-consent__actions { justify-content: flex-end; }
}