/* =============================================================================
   Der kleine Hinweis unten links — eigenes Blatt.

   WARUM NICHT IN v4.css: die Haelfte der Seiten (Impressum, Datenschutz,
   AGB, Widerruf, die restliche Auth-Strecke) laeuft noch auf `styles.css`.
   Der Hinweis steht aber ueberall, und er soll ueberall gleich aussehen.
   In beide Blaetter kopiert waere er zwei Wahrheiten, die auseinanderlaufen.

   Deshalb ohne Token-Abhaengigkeit: die Werte sind die von Porcelain, aber
   ausgeschrieben — dieses Blatt muss neben BEIDEN Stylesheets funktionieren.
   Wer die Porcelain-Tokens aendert, sollte hier nachziehen.
   ========================================================================== */

/* ---------- Der Hinweis unten links ---------------------------------------
   Klein und ruhig: er informiert, er verlangt nichts. Deshalb auch kein
   Vollbild-Vorhang und keine abgedunkelte Seite — beides waere die Geste
   einer Einwilligung, die hier gar nicht eingeholt wird (siehe
   js/cookie-notice.js).
   Unten LINKS, weil rechts unten auf Beruehrgeraeten der Daumen liegt und
   dort oft Chat- oder Zurueck-Knoepfe sitzen. */
.cnotice {
  position: fixed;
  left: clamp(0.7rem, 2vw, 1.4rem);
  bottom: clamp(0.7rem, 2vw, 1.4rem);
  z-index: 90;
  max-width: 21rem;
  display: grid;
  gap: 0.55rem;
  padding: 0.85rem 0.95rem;
  border-radius: 14px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F7F9FD 60%, #EDF1F9 100%);
  box-shadow: 0 18px 40px -18px rgba(20,40,90,.28), 0 2px 6px rgba(20,40,90,.06);
  /* Startzustand: knapp darunter und unsichtbar. */
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.26s cubic-bezier(.22,.61,.36,1), transform 0.26s cubic-bezier(.22,.61,.36,1);
}
.cnotice.is-in { opacity: 1; transform: none; }
.cnotice.is-gone { opacity: 0; transform: translateY(10px); }
.cnotice-t {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.55;
  color: #39415A;
}
.cnotice-t a { color: #2456E8; text-decoration: underline; text-underline-offset: 2px; }
/* Das volle Banner ist etwas breiter — es hat eine Ueberschrift und zwei
   Knoepfe statt einer Zeile. */
.cnotice-ask { max-width: 23.5rem; gap: 0.45rem; }
.cnotice-h {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 640;
  letter-spacing: -0.01em;
  color: #0D1220;
}
.cnotice-acts { display: flex; gap: 0.5rem; margin-top: 0.25rem; }
/* BEIDE KNOEPFE SIND GLEICH. Gleiche Breite, gleiche Farbe, gleiches
   Gewicht — ein hervorgehobenes „Accept" neben einem blassen „Reject"
   waere ein Dark Pattern, und eine so eingeholte Einwilligung ist nach
   Art. 4 Nr. 11 DSGVO nicht freiwillig und damit unwirksam. Wer hier
   etwas hervorheben will: nicht. */
.cnotice-b {
  flex: 1 1 0;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 560;
  padding: 0.42rem 0.5rem;
  border: none;
  border-radius: 999px;
  background: #0D1220;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.18s cubic-bezier(.22,.61,.36,1);
}
.cnotice-b:hover { background: #2456E8; }
.cnotice-b:focus-visible { outline: 2.5px solid #2456E8; outline-offset: 3px; }

.cnotice-x {
  justify-self: start;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 560;
  padding: 0.3rem 0.75rem;
  border: none;
  border-radius: 999px;
  background: #0D1220;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.18s cubic-bezier(.22,.61,.36,1);
}
.cnotice-x:hover { background: #2456E8; }
.cnotice-x:focus-visible { outline: 2.5px solid #2456E8; outline-offset: 3px; }
/* Wer Bewegung reduziert, bekommt es ohne Auffahren — aber sichtbar. */
@media (prefers-reduced-motion: reduce) {
  .cnotice { transition: none; transform: none; }
}
@media (max-width: 480px) {
  .cnotice { max-width: none; right: clamp(0.7rem, 2vw, 1.4rem); }
}