/*
 * AnimeRadar V2.4.252 - Cookie-Banner und Cookie-Einstellungen im Redesign
 *
 * WAS DIESE DATEI BETRIFFT
 *
 * Genau ein Element: #consentBanner mit .consent-copy und .consent-actions.
 * Es traegt beide Rollen, die im Auftrag getrennt genannt sind - beim ersten
 * Besuch erscheint es von selbst, und ueber "Cookie-Einstellungen" im Profil
 * sowie ueber den Fusszeilen-Verweis wird dasselbe Element erneut geoeffnet
 * (renderConsentBanner(true) in app-v2-4-153.js). Es gibt kein zweites,
 * getrenntes Einstellungsfenster; beide Wege sehen deshalb gleich aus.
 *
 * WAS SICH AENDERT
 *
 * Nur Flaeche, Groessen und Typografie. Kein Text wurde geaendert, keine
 * Schaltflaeche entfernt, keine Einwilligungslogik angefasst. Die Auswahl
 * bleibt "Nur notwendig" und "Statistik erlauben", der Verweis auf die
 * Datenschutzerklaerung bleibt stehen.
 *
 * VORHER (gemessen bei 1440 und bei 390 px)
 *
 *   Desktop: Flaeche in Rotbraun (#231216) mit warmer Kante, Ueberschrift
 *   14 px, Fliesstext 10 px auf zwei Zeilen beschnitten
 *   (-webkit-line-clamp: 2), Schaltflaechen mit 9 px Beschriftung in 32 px
 *   hohen Knoepfen. Der Einwilligungstext war damit praktisch nicht lesbar.
 *   Handy: Ueberschrift 16 px, Text 12 px auf drei Zeilen beschnitten,
 *   Schaltflaechen mit 8,5 px Beschriftung.
 *
 * NACHHER
 *
 *   Dieselbe dunkle Glasflaeche wie die Karten aus V2.4.247 und die
 *   Rechtsseiten aus V2.4.250: #0e1218 mit feiner heller Kante, 14 px Radius,
 *   weicher Schatten. Der Einwilligungstext steht vollstaendig da, ohne
 *   Beschneidung. Groessen folgen den uebrigen Karten.
 *
 * WARUM SO VIEL !important
 *
 * Die Geometrie und die kleinen Schriftgroessen stammen aus
 * material-reference-pages-v2-4-194.css und material-redesign-v2-4-194.css und
 * stehen dort selbst auf !important. Diese Datei laedt danach und muss die
 * Werte deshalb mit derselben Gewichtung zuruecknehmen.
 *
 * Die Position bleibt, wo sie war: auf dem Desktop im Inhaltsbereich rechts
 * neben der Seitenleiste, auf dem Handy ueber der Tableiste. Die dortigen
 * Abstaende sind mehrfach nachgezogen worden - unter anderem wegen
 * env(safe-area-inset-bottom) - und werden hier nicht neu erfunden.
 */

:root {
  --ck-bg: rgba(14, 18, 24, .94);
  --ck-line: rgba(255, 255, 255, .09);
  --ck-radius: 14px;
  --ck-title: #ffffff;
  --ck-text: #b7bcc4;
}

/* ========================================================================== */
/* 1. Flaeche                                                                 */
/* ========================================================================== */

html body .consent-banner {
  border: 1px solid var(--ck-line) !important;
  border-radius: var(--ck-radius) !important;
  /* Ohne Verlauf: der rote Seitenhintergrund hatte die Flaeche vorher
     eingefaerbt. Der Ton folgt jetzt den Karten der Detailansicht. */
  background: var(--ck-bg) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .55) !important;
  backdrop-filter: blur(16px);
  align-items: center;
}

html body .consent-copy strong {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--ck-title);
}

html body .consent-copy p {
  color: var(--ck-text);
  max-width: none;
}

/* Der Verweis auf die Datenschutzerklaerung ist ein Textlink, kein Knopf. Die
   gemeinsame Regel fuer .text-action und .consent-actions button hatte ihm
   eine Knopfhoehe gegeben. */
html body .consent-copy .text-action {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  text-align: left;
}

html body .consent-actions {
  justify-content: flex-end;
}

/* ========================================================================== */
/* 2. Desktop                                                                 */
/* ========================================================================== */
/* Dieselbe Schwelle wie in material-reference-pages-v2-4-194.css, damit die
   dortigen Werte Deklaration fuer Deklaration abgeloest werden. */

@media (min-width: 960px) {
  html:not(.native-app) body .consent-banner {
    right: auto !important;
    bottom: 24px !important;
    left: calc(var(--reference-sidebar-width) + max(24px, (100vw - var(--reference-sidebar-width) - 760px) / 2)) !important;
    width: min(760px, calc(100vw - var(--reference-sidebar-width) - 48px)) !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 20px !important;
    padding: 18px 20px !important;
  }

  html:not(.native-app) body .consent-copy strong {
    margin-bottom: 8px !important;
    font-size: 16px !important;
    line-height: 21px !important;
  }

  /* Die Beschneidung faellt weg. -webkit-box war die Voraussetzung dafuer;
     mit display:block greift -webkit-line-clamp nicht mehr. Der zweite Wert
     steht trotzdem da, damit die Absicht im Code sichtbar bleibt. */
  html:not(.native-app) body .consent-copy p {
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
    margin-bottom: 10px !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  html:not(.native-app) body .consent-copy .text-action {
    font-size: 12.5px !important;
  }

  html:not(.native-app) body .consent-actions button {
    min-height: 38px !important;
    padding-inline: 16px !important;
    font-size: 13px !important;
  }

  html:not(.native-app) body .consent-actions {
    max-width: none !important;
    gap: 10px !important;
  }
}

/* ========================================================================== */
/* 3. Handy                                                                   */
/* ========================================================================== */
/* Position und Sicherheitsabstand nach unten bleiben, wie sie in
   styles-v2-4-141.css und material-redesign-v2-4-194.css gesetzt sind. Hier
   aendern sich nur Innenabstand, Hoehe und Schriftgroessen. */

@media (max-width: 760px) {
  html body .consent-banner {
    max-height: min(58dvh, 400px) !important;
    padding: 16px !important;
    gap: 12px !important;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  html body .consent-copy strong {
    margin-bottom: 7px !important;
    font-size: 16px !important;
    line-height: 21px !important;
  }

  html body .consent-copy p {
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
    margin-bottom: 10px !important;
    font-size: 12.5px !important;
    line-height: 1.55 !important;
  }

  html body .consent-copy .text-action {
    font-size: 12.5px !important;
  }

  html body .consent-actions {
    gap: 8px !important;
  }

  html body .consent-actions button {
    min-height: 42px !important;
    font-size: 13.5px !important;
  }
}

/* Unter 380 px stehen die beiden Knoepfe nicht mehr nebeneinander, ohne dass
   die Beschriftung umbricht. */
@media (max-width: 379px) {
  html body .consent-actions {
    flex-direction: column;
    align-items: stretch;
  }

  html body .consent-actions button {
    width: 100%;
  }
}