/* Chat Tower Companion -- pages/legal.css
 * P6-Kette Glied 7/8 (web-242). Anders als die uebrigen 13 pages/*.css-
 * Dateien KEINE reine Verschiebung aus dem vormaligen web/public/style.css
 * (die Legal-Seiten liefen nie darueber) -- extrahiert aus den inline
 * <style>-Bloecken der jetzt geloeschten statischen datenschutz.html/
 * konto-loeschen.html. Grund fuer die Extraktion: CSP-Konvention dieses
 * Codebase -- kein inline <style> in Route-Kontext (s. Kopfkommentar
 * views/techtree.js) -- die zwei Seiten sind seit web-242 SSR-Views.
 * Scope: /datenschutz + /konto-loeschen + (seit web-270) /kuendigen. Keine
 * Kaskaden-Abhaengigkeit zu anderen pages/*.css-Dateien (alle Selektoren
 * sind unter .legal-page bzw. .legal-datenschutz/.legal-konto-loeschen/
 * .legal-kuendigen genestet, keine geteilten bare Selektoren gefunden).
 *
 * Die beiden Original-<style>-Bloecke waren NICHT byte-identisch (die
 * .legal-page-Basis + .legal-back-link-Familie schon, aber datenschutz.html
 * hatte zusaetzlich eine `code`-Groessenregel + die Tabellen-/Scroll-Regeln,
 * konto-loeschen.html zusaetzlich die .legal-steps-Familie). Damit das
 * Zusammenlegen in EINE Datei keinen der beiden Seiten unbeabsichtigt
 * mitveraendert, tragen die zwei SSR-Views je eine zusaetzliche
 * Seiten-Klasse (.legal-datenschutz / .legal-konto-loeschen) -- die EINE
 * echte Leck-Gefahr (`.legal-page code`, ein bare Tag-Selektor, den beide
 * Seiten potenziell treffen) ist deshalb unten auf .legal-datenschutz
 * gescoped (nur dort historisch vorhanden). Alle uebrigen Regeln bleiben
 * bewusst auf der geteilten .legal-page-Basis, weil sie in beiden
 * Original-Bloecken zeichengleich waren. */


/* ===== Legal-Page-Basis (geteilt, beide Seiten identisch) ===== */

.legal-page { max-width: 760px; margin: 0 auto; padding: 1em 0 4em; line-height: 1.65; }
.legal-page h1 { font-size: 1.8em; color: var(--cyan); margin: 0 0 0.5em; text-shadow: 0 0 12px rgba(56,225,255,0.4); }
.legal-page h2 { font-size: 1.1em; color: var(--magenta); margin: 2em 0 0.5em; letter-spacing: 0.02em; }
.legal-page p { margin: 0.6em 0; }
.legal-page ul { padding-left: 1.3em; margin: 0.4em 0 1em; }
.legal-page li { margin: 0.25em 0; }
.legal-page .legal-lead { color: var(--text); font-size: 1.02em; margin-bottom: 1.5em; }
.legal-page .legal-meta { color: var(--muted); font-size: 0.85em; margin-top: 3em; padding-top: 1em; border-top: 1px solid var(--line); }
.legal-page .legal-note { background: rgba(56,225,255,0.05); border-left: 2px solid var(--cyan); padding: 0.6em 1em; margin: 1em 0; color: var(--text); font-size: 0.95em; }
/* ui-401: lange URL-/Mail-Links (rahft.com/talents/…#imprint = ~309px am
   Stueck) duerfen ueberall brechen — Desktop unveraendert. Muster: ui-397
   DL-4 (.glossar-content code). */
.legal-page a { overflow-wrap: anywhere; }


/* ===== code-Groesse -- NUR datenschutz.html hatte diese Regel historisch
   (konto-loeschen.html nicht) — auf .legal-datenschutz gescoped, damit das
   gemeinsame legal.css konto-loeschen.html's <code>-Element (Schritt 1,
   "chat-tower.fiftyshadesofgames.de") nicht unbeabsichtigt mitveraendert. ===== */

.legal-datenschutz code { font-size: 0.88em; }


/* ===== Datentabelle (nur datenschutz.html — Abschnitt 2) =====
   ui-401 (Architektur-Lock: kein Umbruch, keine Verkleinerung, kein globales
   overflow-x:hidden): Scroll-Wrapper — die Tabelle ist mit ihren min-content-
   Zellen breiter als 320px-Viewports (Messbefund: right=364 @320), scrollt
   deshalb IN SICH (overflow-x am Wrapper) statt die Seite zu dehnen. Ab
   ~380px Viewport passt sie ohnehin → kein Scroll, Desktop unveraendert.
   Aussenabstand wandert von der Tabelle auf den Wrapper (sonst doppelt).
   Eigenstaendig ueber die .legal-table-scroll/.legal-data-Klassennamen
   gescoped (kein Konsument auf konto-loeschen.html — dort ohne Wirkung). */
.legal-page .legal-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0.5em 0 1em; }
.legal-page .legal-table-scroll > table.legal-data { margin: 0; }
.legal-page table.legal-data { width: 100%; border-collapse: collapse; margin: 0.5em 0 1em; font-size: 0.9em; }
.legal-page table.legal-data th,
.legal-page table.legal-data td { padding: 0.45em 0.7em; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
.legal-page table.legal-data th { color: var(--cyan); font-weight: 600; }
.legal-page table.legal-data code { background: rgba(56,225,255,0.06); }


/* ===== Schritte-Box (nur konto-loeschen.html) =====
   web-229: die einzige neue Komponente auf dieser Seite. Google-Kriterium 2
   verlangt die Löschschritte "gut sichtbar" — deshalb eine deutlich
   abgesetzte Box direkt unter der Einleitung, kein Absatz aus Fließtext.
   Nutzt dieselben Tokens (--panel/--line/--cyan) wie der Rest der
   Companion-App, keine neue Farbsprache. Eigenstaendig ueber die
   .legal-steps/.legal-step-block-Klassennamen gescoped (kein Konsument
   auf datenschutz.html). */
.legal-page .legal-steps { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--cyan); border-radius: 6px; padding: 0.2em 1.3em 1em; margin: 0 0 2em; }
.legal-page .legal-steps h2 { margin-top: 0.9em; }
.legal-page .legal-step-block { margin: 1em 0 1.6em; }
.legal-page .legal-step-block:last-child { margin-bottom: 0.4em; }
.legal-page .legal-step-block h3 { font-size: 1em; color: var(--cyan); margin: 0 0 0.4em; }
.legal-page .legal-step-block ol { padding-left: 1.4em; margin: 0.3em 0 0.6em; }
.legal-page .legal-step-block li { margin: 0.3em 0; }


/* ===== "Zurück ins Spiel" (geteilt, beide Seiten identisch) =====
   ui-411: ein eigener, erkennbarer Weg (Fifty-Entscheid: NICHT bloß ein
   weiterer Link in der bestehenden Kopfzeilen-Nav, die geht bei ≤600px
   ohnehin per display:none unter — s. CSS-Regel .site-nav in base.css;
   diese Seiten haben kein „⋯"-Popover-Ersatzmenü wie layout.js-Vollseiten
   generell, s. dort). Eigenständiger Button direkt über der Überschrift,
   fest verlinkt auf /viewer.html statt history.back() (Architektur-Lock:
   ein geteilter Link muss auch ohne Vorgeschichte landen). min-height 44px
   permanent (nicht nur im Touch-Breakpoint) — dieser Button ist der
   zentrale Rückweg, kein sekundärer Text-Link. */
.legal-page .legal-back-link {
  display: inline-flex; align-items: center; gap: 0.4em;
  min-height: 44px; padding: 0.4em 0.9em; margin-bottom: 1.2em;
  border: 1px solid var(--cyan); border-radius: 6px;
  color: var(--cyan); font-weight: 600; font-size: 0.92em;
  text-decoration: none; transition: background 0.15s, color 0.15s;
}
.legal-page .legal-back-link:hover { background: rgba(56,225,255,0.12); color: #fff; }


/* ===== Kündigungsformular (nur /kuendigen, web-270) =====
   Eigenständig über .legal-kuendigen gescoped (kein Konsument auf
   datenschutz.html/konto-loeschen.html). Input-Optik: Muster
   pages/profile.css .pu-limit-form input[type="number"] (44px Touch-Ziel,
   ui-394-Lock). Button-Optik: Muster pages/entry.css .choice .btn-primary
   (Primary-CTA-Farbsprache dieses Codebase — cyan-Hintergrund, kein neues
   Farb-Token). */
.legal-page .legal-kuendigen-form {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  max-width: 420px;
  margin: 1.2em 0;
}
.legal-page .legal-kuendigen-form label { font-weight: 600; color: var(--text); font-size: 0.92em; }
.legal-page .legal-kuendigen-form input[type="text"] {
  min-height: 44px;
  background: var(--bg);
  border: 1px solid var(--line-2);
  color: var(--text);
  border-radius: 8px;
  padding: 0.5em 0.8em;
  font-size: 0.95em;
  font-family: inherit;
}
.legal-page .legal-kuendigen-form button {
  align-self: flex-start;
  min-height: 44px;
  background: var(--cyan);
  color: var(--bg);
  border: none;
  border-radius: 8px;
  padding: 0.5em 1.4em;
  font: inherit;
  font-weight: 700;
  font-size: 0.9em;
  cursor: pointer;
  box-shadow: 0 0 22px rgba(56, 225, 255, .25);
}
.legal-page .legal-kuendigen-form button:hover { transform: translateY(-1px); box-shadow: 0 0 30px rgba(56, 225, 255, .45); }

/* ===== Refund-/Dispute-Sperre (web-309, /konto/ausgleich) =====
   Eigenstaendig ueber .konto-ausgleich gescoped (Muster .legal-kuendigen-form
   oben) — Prototyp `.claude/sprint/prototypes/web-309.html` 1:1 uebernommen
   (Klassennamen `ka-*` bewusst NICHT im Namensraum-Register registriert, s.
   web/spec/frontend.md "§ CSS-Namensräume": jeder Selektor hier ist ein
   2-Compound-Selektor unter dem .konto-ausgleich-Vorfahren — strukturell
   bereits scoped, unabhaengig vom Praefix, s. css-selector-inventory.mjs
   classifySelector() "Klassifikations-Grenze"). */
.konto-ausgleich .ka-list { list-style: none; margin: 1.2em 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.konto-ausgleich .ka-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border: 1px solid var(--line-2); border-radius: 12px;
  background: var(--bg-2); padding: 12px 14px; }
.konto-ausgleich .ka-main { flex: 1 1 260px; min-width: 0; }
.konto-ausgleich .ka-label { font-weight: 700; color: var(--text); }
.konto-ausgleich .ka-sub { color: var(--text-dim); font-size: var(--fs-small); margin-top: .15em; }
.konto-ausgleich .ka-badge { display: inline-block; font-size: var(--fs-caption); font-weight: 800; border-radius: 999px; padding: .2em .6em; margin-left: .5em; vertical-align: middle;
  color: var(--text); background: rgba(255,255,255,.08); border: 1px solid var(--line-2); }
.konto-ausgleich .ka-badge--dispute { color: #201502; background: linear-gradient(135deg, var(--gold), #ffcf7d); border-color: transparent; }
.konto-ausgleich .ka-badge--settled { color: #06110a; background: var(--green); border-color: transparent; }
.konto-ausgleich .ka-amount { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.konto-ausgleich .ka-row .btn-buy { min-height: 40px; white-space: nowrap; }
.konto-ausgleich .ka-consent { margin-top: 14px; }
.konto-ausgleich .ka-box { border-radius: 12px; padding: 14px 16px; margin-top: 16px; line-height: 1.5; }
.konto-ausgleich .ka-box--locked { border: 1px solid rgba(240,179,80,.55); background: rgba(240,179,80,.08); }
.konto-ausgleich .ka-box--locked b { color: var(--gold); }
.konto-ausgleich .ka-box--done { border: 1px solid rgba(94,255,138,.5); background: rgba(94,255,138,.08); display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.konto-ausgleich .ka-box--done .ka-check { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 22px;
  color: #06110a; background: linear-gradient(135deg, var(--green), #b9ffcc); flex-shrink: 0; }
.konto-ausgleich .ka-box--done b { color: var(--green); }
.konto-ausgleich .ka-go { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.2em; border-radius: 9px; border: 1px solid var(--cyan); color: var(--cyan);
  font-weight: 700; text-decoration: none; font-size: var(--fs-small); margin-left: auto; }
.konto-ausgleich .ka-why { color: var(--muted); font-size: var(--fs-caption); margin-top: 18px; line-height: 1.6; }
.konto-ausgleich .ka-row--settled { opacity: .6; }
@media (max-width: 600px) {
  .konto-ausgleich .ka-row { flex-direction: column; align-items: stretch; }
  .konto-ausgleich .ka-main { flex: 0 0 auto; }
  .konto-ausgleich .ka-row .btn-buy, .konto-ausgleich .ka-go { width: 100%; justify-content: center; margin-left: 0; }
  .konto-ausgleich .ka-amount { text-align: right; }
}