/*
 * AnimeRadar V2.4.250 - Rechtsseiten im Redesign
 *
 * Betrifft die drei Seiten, die sich die Klassen .legal-title-row und
 * .legal-doc teilen: Datenschutz, Impressum und Nutzungsbedingungen. Credits
 * benutzt .legal-card und bleibt unberuehrt.
 *
 * WAS SICH AENDERT
 *
 * Nur Layout, Farbe und Typografie. Kein Rechtstext wurde angefasst, keine
 * Ueberschrift umbenannt, kein Abschnitt verschoben, hinzugefuegt oder
 * entfernt. Das Markup in index.html bleibt unveraendert - aus jedem
 * vorhandenen <section> wird hier eine eigene Karte.
 *
 * VORHER
 *
 *   Ein Block von 760 px, linksbuendig in einem rund 1200 px breiten
 *   Inhaltsbereich, die Abschnitte nur durch Trennlinien getrennt. Rechts
 *   blieb dauerhaft die halbe Seite leer.
 *
 * NACHHER
 *
 *   Eine zentrierte Spalte aus einzelnen Karten in der Bildsprache des
 *   Redesigns: dunkle Glasflaeche, feine Kante, derselbe Radius wie die
 *   Karten der Detailansicht. Die Fliesstextbreite bleibt begrenzt, damit
 *   lange Datenschutzabschnitte lesbar bleiben.
 *
 * FARBEN
 *
 * Markenakzent ueber --ar-accent* aus material-accent-theme-v2-4-246.css.
 * Flaechen und Kanten folgen den Werten, die V2.4.247 fuer Profil und
 * Detailansicht gesetzt hat, damit die Seiten zur selben Familie gehoeren.
 */

:root {
  --lg-max: 880px;
  /* Glasig, aber dunkel: bei .72 schlug der rote Seitenhintergrund so stark
     durch, dass die Karten roetlich statt schwarz-blaeulich wirkten. Mit .9
     bleibt ein feiner Durchscheiner, der Ton folgt aber den Karten der
     Detailansicht (#101419). */
  --lg-card-bg: rgba(14, 18, 24, .9);
  --lg-card-line: rgba(255, 255, 255, .075);
  --lg-radius: 12px;
  --lg-title: #ffffff;
  --lg-text: #b7bcc4;
  --lg-muted: #8c939d;
}

/* ========================================================================== */
/* 1. Seitenkopf                                                              */
/* ========================================================================== */
/* Die bestehende Titelzeile bleibt - Kicker, Ueberschrift, Unterzeile. Sie
   bekommt dieselbe Breite wie die Karten darunter, damit beides eine Spalte
   bildet statt zweier verschieden breiter Bloecke. */

html body :where(#view-privacy, #view-imprint, #view-terms) .legal-title-row {
  width: 100%;
  max-width: var(--lg-max);
  margin: 0 auto 22px !important;
  padding: 0;
}

html body :where(#view-privacy, #view-imprint, #view-terms) .legal-title-row .section-kicker {
  display: block;
  margin-bottom: 8px;
  color: var(--ar-accent-bright) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .085em !important;
  line-height: 14px !important;
  text-transform: uppercase !important;
}

html body :where(#view-privacy, #view-imprint, #view-terms) .legal-title-row .page-main-title {
  margin: 0 !important;
  color: var(--lg-title) !important;
  font-family: var(--font-display);
  font-size: 34px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  line-height: 1.12 !important;
}

html body :where(#view-privacy, #view-imprint, #view-terms) .legal-title-row > div > p {
  max-width: 62ch;
  margin: 10px 0 0 !important;
  color: var(--lg-muted) !important;
  font-size: 14.5px !important;
  line-height: 21px !important;
}

/* ========================================================================== */
/* 2. Die Spalte                                                              */
/* ========================================================================== */
/* .legal-doc war selbst die Karte. Jetzt ist es nur noch der Behaelter: keine
   Flaeche, keine Kante, kein Schatten - die tragen die Abschnitte. */

html body :where(#view-privacy, #view-imprint, #view-terms) .legal-doc,
html body :where(#view-privacy, #view-imprint, #view-terms) .legal-doc.compact-doc {
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: var(--lg-max);
  margin-inline: auto;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  overflow: visible;
}

/* ========================================================================== */
/* 3. Abschnitt als Karte                                                     */
/* ========================================================================== */

html body :where(#view-privacy, #view-imprint, #view-terms) .legal-doc section {
  margin: 0 !important;
  padding: 20px 22px 22px !important;
  border: 1px solid var(--lg-card-line) !important;
  border-radius: var(--lg-radius) !important;
  background: var(--lg-card-bg) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

html body :where(#view-privacy, #view-imprint, #view-terms) .legal-doc section:last-child {
  border-bottom: 1px solid var(--lg-card-line) !important;
}

/* Ueberschrift mit einem feinen Akzentstrich davor - dieselbe Sprache wie die
   Abschnittsmarken der Detailansicht, nur ruhiger. */
html body :where(#view-privacy, #view-imprint, #view-terms) .legal-doc h2 {
  position: relative;
  margin: 0 0 12px !important;
  padding: 0 0 0 14px !important;
  color: var(--lg-title) !important;
  font-family: var(--font-display);
  /* 19 px ist die Ueberschriftenstufe, die V2.4.235 fuer die Rechtsseiten
     festgelegt hat; Credits (.legal-card) traegt dieselbe. Der Wert bleibt,
     damit die vier Seiten weiter zusammenpassen. */
  font-size: 19px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  line-height: 26px !important;
}

html body :where(#view-privacy, #view-imprint, #view-terms) .legal-doc h2::after {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  height: auto;
  border-radius: 999px;
  background: var(--ar-accent);
}

/* ========================================================================== */
/* 4. Fliesstext                                                              */
/* ========================================================================== */
/* 68 Zeichen je Zeile. Der Datenschutz hat zwoelf Abschnitte und
   siebenundzwanzig Absaetze - ohne Begrenzung waeren die Zeilen auf 2560 px
   unlesbar lang. */

html body :where(#view-privacy, #view-imprint, #view-terms) .legal-doc p {
  max-width: 68ch;
  margin: 0 !important;
  color: var(--lg-text) !important;
  font-size: 14.5px !important;
  line-height: 24px !important;
}

html body :where(#view-privacy, #view-imprint, #view-terms) .legal-doc p + p {
  margin-top: 12px !important;
}

html body :where(#view-privacy, #view-imprint, #view-terms) .legal-doc :where(ul, ol) {
  max-width: 68ch;
  margin: 12px 0 0 !important;
  padding-left: 20px;
  color: var(--lg-text) !important;
  font-size: 14.5px;
  line-height: 24px;
}

html body :where(#view-privacy, #view-imprint, #view-terms) .legal-doc li {
  margin-block: 6px;
}

html body :where(#view-privacy, #view-imprint, #view-terms) .legal-doc li::marker {
  color: var(--ar-accent-bright);
}

html body :where(#view-privacy, #view-imprint, #view-terms) .legal-doc strong {
  color: var(--lg-title) !important;
  font-weight: 650;
}

html body :where(#view-privacy, #view-imprint, #view-terms) .legal-doc a {
  color: var(--ar-accent-bright) !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--ar-accent-bright-rgb), .32);
  /* Lange Adressen brechen um, statt aus der Karte zu laufen. */
  overflow-wrap: anywhere;
}

html body :where(#view-privacy, #view-imprint, #view-terms) .legal-doc a:hover,
html body :where(#view-privacy, #view-imprint, #view-terms) .legal-doc a:focus-visible {
  color: #fff !important;
  border-bottom-color: var(--ar-accent-bright);
  text-decoration: none;
}

html body :where(#view-privacy, #view-imprint, #view-terms) .legal-doc code {
  padding: 1px 6px;
  border: 1px solid var(--lg-card-line) !important;
  border-radius: 5px;
  background: rgba(255, 255, 255, .04) !important;
  color: var(--lg-title) !important;
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

/* ========================================================================== */
/* 5. Mobil                                                                   */
/* ========================================================================== */

@media (max-width: 760px) {
  html body :where(#view-privacy, #view-imprint, #view-terms) .legal-title-row {
    margin-bottom: 16px !important;
  }

  html body :where(#view-privacy, #view-imprint, #view-terms) .legal-title-row .page-main-title {
    font-size: 26px !important;
  }

  html body :where(#view-privacy, #view-imprint, #view-terms) .legal-title-row > div > p {
    font-size: 13.5px !important;
    line-height: 20px !important;
  }

  html body :where(#view-privacy, #view-imprint, #view-terms) .legal-doc,
  html body :where(#view-privacy, #view-imprint, #view-terms) .legal-doc.compact-doc {
    gap: 10px;
  }

  html body :where(#view-privacy, #view-imprint, #view-terms) .legal-doc section {
    padding: 16px 15px 17px !important;
    border-radius: 11px !important;
  }

  html body :where(#view-privacy, #view-imprint, #view-terms) .legal-doc h2 {
    padding-left: 12px !important;
    font-size: 17px !important;
    line-height: 23px !important;
  }

  /* Mobil begrenzt die Kartenbreite den Text schon - die Zeichenbegrenzung
     wuerde hier nur zusaetzlich einengen. Die Schrift bleibt bei 14.5 px,
     damit nichts kleiner wird als auf dem Desktop. */
  html body :where(#view-privacy, #view-imprint, #view-terms) .legal-doc p,
  html body :where(#view-privacy, #view-imprint, #view-terms) .legal-doc :where(ul, ol) {
    max-width: none;
    line-height: 23px !important;
  }
}

@media (max-width: 380px) {
  html body :where(#view-privacy, #view-imprint, #view-terms) .legal-title-row .page-main-title {
    font-size: 23px !important;
  }

  html body :where(#view-privacy, #view-imprint, #view-terms) .legal-doc section {
    padding: 14px 13px 15px !important;
  }
}