/* =========================================================
   leano – Rechtsseiten (Impressum, AGB, Datenschutz, Widerruf)
   Gleiches Layout für alle: Titel links (x=100), Inhalt eingerückt
   (x=300, Breite 880). 1:1 aus Figma (Impressum-Frame 295:389).
   Header + Footer kommen aus js/layout.js.
   ========================================================= */

/* max-width 1280 (= Figma-Rahmenbreite) + margin auto -> der gesamte Rechtsseiten-Block
   sitzt auf großen Bildschirmen mittig statt links (box-sizing:border-box, Rand inklusive). */
.legal-main { padding: 180px 100px 300px; max-width: 1280px; margin-inline: auto; }   /* Titel bei y=180; unten 300px zur Fußzeile */

.legal-title {
  margin: 0;
  font-family: var(--font-heading), "Assistant", sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 32px;
  color: #6F6F6F;                              /* Figma: Darker Grey */
}

/* Inhalt eingerückt (Figma: x=300 = 200px rechts vom Titel), max. 880px breit */
.legal-body { margin: 55px 0 0 200px; max-width: 880px; }

/* Varianten-Umschalter (z.B. AGB Privat/Firmen; später Datenschutz mit mehreren Varianten):
   Pille oben mittig auf der Seite (zwischen Menü und Titel), unabhängig von der
   eingerückten Textspalte. Aktive Variante = aktuell angezeigte Seite. Eine schwarze
   "Füllung" (.legal-variant-switch-fill, per JS erzeugt) gleitet beim Wechsel zur neuen
   Option (1s); danach übernimmt die bestehende weiße Seiten-Überblendung (lang-leaving/
   lang-arriving, siehe Sprachwechsel) den eigentlichen Seitenwechsel (nochmal 1s). */
.legal-main { position: relative; }
.legal-variant-switch {
  position: absolute;
  top: 120px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  border-radius: 20px;
  overflow: hidden;
  /* KEIN separater Rand: der graue Hintergrund IST der Rahmen. Die weiße Innenfläche
     (.legal-variant-switch-track, per JS) lässt ringsum 1px Grau stehen. Dadurch liegt
     die graue Füllung grau-auf-grau am Rahmen -> keine sichtbare Naht an den Rundungen.
     Ohne JS decken weiße Buttons den grauen Grund ab (siehe unten). */
  background: var(--dark-grey);
}
/* Ebenen übereinander (untere zuerst):
   0) weiße Innenfläche (Track), 1px eingerückt -> lässt den grauen Rahmen ringsum stehen
   1) gleitende Füllung (Rahmen-Grau) -> fließt beim Wechsel rüber
   2) Text (transparenter Hintergrund)
   Hover erzeugt KEINEN Hintergrund mehr, nur einen Unterstrich (siehe unten). */
.legal-variant-switch-track {
  position: absolute;
  inset: 1px;                         /* 1px Grau ringsum sichtbar lassen = der Rahmen */
  background: var(--white);
  border-radius: 19px;
  z-index: 0;
  pointer-events: none;
}
.legal-variant-switch-fill {
  position: absolute;
  top: -1px; bottom: -1px; left: 0; width: 0;
  background: var(--dark-grey);   /* gleiche Farbe wie der Rand der Pille (#999) */
  transition: left 1000ms ease, width 1000ms ease;
  overflow: hidden;               /* schneidet den weißen Text-Overlay auf das Grau-Fenster zu */
  pointer-events: none;           /* Klicks gehen an die Buttons darunter durch */
  z-index: 2;
}
/* Weiße Text-Kopie INNERHALB der Füllung: liegt deckungsgleich über dem schwarzen Text,
   wird aber durch overflow:hidden der Füllung nur im grauen Fenster sichtbar. Der
   Gegen-Versatz (left = -Füllung.left, per JS) hält den weißen Text ortsfest, während
   das graue Fenster darüber wandert -> die Buchstaben werden Kante für Kante aufgedeckt. */
.legal-variant-switch-fill-text {
  position: absolute;
  top: 1px; left: 0; height: 100%;   /* top:1px gleicht das top:-1px der Füllung aus */
  display: flex;
  pointer-events: none;
  white-space: nowrap;
  transition: left 1000ms ease;
}
.legal-variant-switch-fill-text span {
  position: relative;
  top: 1px;
  padding: 8px 28px;
  font: 400 14px/18px var(--font-body);
  color: var(--white);
  white-space: nowrap;
  text-align: center;     /* Label mittig im (per JS auf den längsten Text vereinheitlichten) Segment */
  box-sizing: border-box;
}
@media (prefers-reduced-motion: reduce) {
  .legal-variant-switch-fill,
  .legal-variant-switch-fill-text { transition: none; }
}
.legal-variant-switch a {
  position: relative;
  z-index: 1;                      /* UNTER der Füllung: schwarzer Text, den das Grau überdeckt */
  top: 1px;                        /* Text 1px tiefer -> optisch mittig (wie im Kopf-Menü) */
  padding: 8px 28px;               /* 28px statt 18px = je 10px mehr Platz links/rechts -> Pille breiter */
  /* Schrift exakt wie das Kopf-Menü (Details/Preise/Kontakt): Arial-Familie, 12px, Schnitt 400, #333. */
  font: 400 14px/18px var(--font-body);
  color: var(--black);
  /* Unterstrich immer vorhanden, aber transparent -> faded beim Hover sanft ein
     (genau wie die Menüpunkte Details/Preise/Kontakt). Kein Hintergrund beim Hover. */
  text-decoration: underline;
  text-decoration-color: transparent;
  white-space: nowrap;
  text-align: center;              /* Label mittig -> in allen (gleich breiten) Segmenten zentriert */
  box-sizing: border-box;
  background: var(--white);                  /* Standard = weiß (deckt ohne JS den grauen Grund ab) */
  transition: text-decoration-color 150ms ease;
}
/* Hover (nur der nicht-aktive Button): Unterstrich faded ein, sonst nichts. */
.legal-variant-switch a:not(.is-active):hover { text-decoration-color: currentColor; }
/* Ohne JS (Fallback): weiße Buttons, aktiver Button in Rahmen-Grau mit weißer Schrift. */
.legal-variant-switch a.is-active { background: var(--dark-grey); color: var(--white); }
/* Mit JS (has-fill): Buttons transparent; Text IMMER schwarz -> das Weiß kommt allein
   vom Overlay in der Füllung, das entlang der grauen Kante aufdeckt. */
.legal-variant-switch.has-fill a { background: transparent; color: var(--black); }

/* Abstand Titel/Umschalter: Menü->Pille (60px) muss genauso groß sein wie Pille->Titel;
   Titel liegt sonst bei padding-top:180px, hier +34px extra, damit auch 60px entstehen. */
.has-variant-switch .legal-title { margin-top: 34px; }

.legal-intro { margin: 0; font: 400 14px/27px "Arial", sans-serif; color: var(--black); }

/* --- Impressum-Stil: Überschrift steht direkt über dem Inhalt (bei x=300) --- */
.legal-block { margin-top: 45px; }
.legal-block:first-of-type { margin-top: 54px; }   /* Abstand Einleitung -> erster Abschnitt */
.legal-block h2 { margin: 0; font: 700 15px/24px "Arial", sans-serif; color: var(--black); }
.legal-block p  { margin: 0; font: 400 14px/27px "Arial", sans-serif; color: var(--black); }

/* --- AGB/Datenschutz/Widerruf-Stil (Figma): Einleitungstext ohne Überschrift ganz oben (x=300);
   dann je Abschnitt: Überschrift auf EIGENER Zeile links (x=100), darunter der Text eingerückt (x=300).
   Figma-Abstände: Überschrift->Text = 30px, Text->nächste Überschrift = 60px. --- */
.legal-lead { margin: 55px 0 0 200px; max-width: 880px; font: 400 14px/27px "Arial", sans-serif; color: var(--black); }   /* Einleitung bei x=300 */
/* margin-Werte kleiner als die Figma-Sollmaße, weil die Zeilenhöhe oben/unten Luft zugibt;
   Ziel sind die SICHTBAREN Kanten-Abstände 30px (Überschrift->Text) und 60px (Text->nächste Überschrift). */
.legal-section { margin-top: 44px; }                  /* -> sichtbar 60px Text bis nächste Überschrift */
.legal-section:first-of-type { margin-top: 54px; }    /* Einleitung -> erste Überschrift: sichtbar 70px, wie beim Impressum */
.legal-section > h2 { margin: 0; font: 700 15px/24px "Arial", sans-serif; color: var(--black); }   /* Überschrift bei x=100 */
.legal-section > .legal-text { margin: 17px 0 0 200px; max-width: 880px; }   /* Text bei x=300, sichtbar 30px unter der Überschrift */
.legal-section .legal-text p { margin: 0; font: 400 14px/27px "Arial", sans-serif; color: var(--black); }
.legal-section .legal-text p + p { margin-top: 10px; }   /* mehrere Absätze im selben Abschnitt */
.legal-section .legal-text a { color: inherit; }

/* Listen innerhalb eines Abschnitts (z.B. Datenschutz: Aufzählungen von Maßnahmen/Rechten;
   Verkaufsbedingungen Firmen: nummerierte Absätze mit verschachtelten Unterpunkten) */
.legal-section .legal-text ul { margin: 10px 0 0; padding-left: 18px; list-style: disc; font: 400 14px/27px "Arial", sans-serif; color: var(--black); }
.legal-section .legal-text ol { margin: 10px 0 0; padding-left: 20px; list-style: decimal; font: 400 14px/27px "Arial", sans-serif; color: var(--black); }
.legal-section .legal-text ul + p, .legal-section .legal-text p + ul,
.legal-section .legal-text ol + p, .legal-section .legal-text p + ol { margin-top: 10px; }
.legal-section .legal-text li + li { margin-top: 4px; }
.legal-section .legal-text li > ul { margin-top: 6px; }   /* Unterpunkte innerhalb einer nummerierten Zeile */

/* Tabellen innerhalb eines Abschnitts (z.B. Datenschutz: Cookie-/Tool-Übersicht).
   Desktop: passt exakt in die 880px-Textspalte (table-layout:fixed verteilt die
   Breite gleichmäßig) -> kein seitliches Scrollen/Abschneiden auf Desktop nötig,
   dafür großzügiger Innenabstand statt gequetschter Zellen.
   Mobil (siehe Media Query unten): Tabelle wird zu gestapelten Karten je Zeile,
   mit der Spaltenüberschrift als Label vor jedem Wert. */
.legal-table-wrap { overflow-x: auto; margin-top: 15px; }
.legal-section .legal-text .legal-table-wrap + p,
.legal-section .legal-text .legal-table-wrap + ul { margin-top: 15px; }   /* Abstand NACH der Tabelle (sonst "angeklatscht"); höhere Spezifität als ".legal-text p { margin:0 }" */
.legal-text table { border-collapse: collapse; width: 100%; table-layout: fixed; font: 400 14px/23px "Arial", sans-serif; color: var(--black); }
.legal-text th, .legal-text td {
  border: 1px solid var(--light-grey); padding: 14px 18px; text-align: left; vertical-align: top;
  overflow-wrap: break-word;
  hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto;   /* echte Silbentrennung statt Umbruch mitten im Wort */
}
.legal-text th { font-weight: 700; background: var(--bg-grey); }

/* Variante (Impressum): Überschriften bündig mit dem Text nach rechts (x=300),
   Höhen-Abstände 30/60/70 bleiben unverändert. */
.legal-flush .legal-section > h2 { margin-left: 200px; }

/* =========================================================
   MOBIL – Einrückung auflösen, volle Breite
   ========================================================= */
@media (max-width: 820px) {
  .legal-main { padding: 135px 20px 140px; }
  .legal-body { margin: 30px 0 0; max-width: 100%; }
  /* Einrückung auflösen -> volle Breite unter der Überschrift */
  .legal-lead { margin: 24px 0 0; max-width: 100%; }
  /* Pille 60px unter dem Header (Header-Unterkante ~85px) und Titel 62px unter der Pille,
     genau wie auf dem Desktop. main-padding-top bleibt 135px (für die Seiten OHNE Pille),
     daher die Abstände hier über pill-top + Titel-margin. */
  .legal-variant-switch { top: 125px; }   /* 20px höher als der Desktop-Bezug -> mobil sitzt es besser */
  .has-variant-switch .legal-title { margin-top: 104px; }
  .legal-section { margin-top: 40px; }
  .legal-section > .legal-text { margin-left: 0; max-width: 100%; }
  .legal-flush .legal-section > h2 { margin-left: 0; }
}

/* Schmale Handys: Die Pille passt bei 14px nicht auf den Bildschirm. Statt den
   Innenabstand zusammenzuquetschen (sah gedrängt aus) wird die Schrift hier auf 12px
   gesetzt – dadurch bleibt genug Polsterung und die Beschriftungen stehen luftig.
   WICHTIG: Buttons und weiße Text-Kopie der Füllung müssen identisch bleiben,
   sonst verrutscht die gleitende Füllung. Desktop bleibt unverändert. */
@media (max-width: 430px) {
  .legal-variant-switch a,
  .legal-variant-switch-fill-text span {
    padding: 8px 18px;
    font-size: 12px;
  }
}

/* Tabelle -> gestapelte Karten: EIGENER, früherer Umbruchpunkt (1050px) als der Rest
   der Seite (820px), weil eine 6-spaltige Tabelle schon bei mittleren Breiten gequetscht
   aussieht, lange bevor der übrige Seiteninhalt umbrechen müsste. Jede Zeile wird ein
   Block, jede Zelle zeigt ihre Spaltenüberschrift als Label davor (aus data-label). */
@media (max-width: 1050px) {
  .legal-table-wrap { overflow-x: visible; }
  .legal-text table, .legal-text thead, .legal-text tbody, .legal-text tr, .legal-text td {
    display: block; width: 100%;
  }
  .legal-text thead { display: none; }
  .legal-text tr { border: 1px solid var(--light-grey); border-radius: 8px; margin-bottom: 12px; padding: 4px 14px; }
  .legal-text td { border: none; padding: 10px 0; }
  .legal-text tr td:not(:last-child) { border-bottom: 1px solid var(--light-grey); }
  .legal-text td::before { content: attr(data-label); display: block; font-weight: 700; margin-bottom: 4px; }
}