/* ============================================================
   UpGrade — Marken-Vereinheitlichung (docs/WEBSITE_AUDIT_2026-07-22).
   Bringt die Rechtsseiten (style.css) und den Elternbereich
   (parent-dashboard.css) auf die Design-Sprache der Landingpage
   (landing.css): gemeinsame Tokens, neo-brutalistischer Header/Footer/
   Buttons/Cards und durchgehend helles Marken-Theme (kein Dark-Mode
   mehr). Wird IMMER NACH der jeweiligen Basis-CSS geladen, damit diese
   Regeln gewinnen. Die Landingpage selbst lädt dieses File NICHT (sie
   hat landing.css) und bleibt unverändert.
   ============================================================ */

:root {
  /* Kanonische Marken-Tokens (identisch zu landing.css) */
  --ink: #18213d; --ink-soft: #45506b; --paper: #fffdf8; --cream: #f7f1e7;
  --lilac: #7057df; --lilac-deep: #49329e; --mint: #bdebe2; --coral: #f47f5c;
  --coral-ink: #a44128; --sun: #ffcb4c; --brand-line: #d8d8e2;

  /* Legacy-Token-Namen (style.css) auf die Marke mappen */
  --primary: #7057df; --primary-dark: #49329e; --primary-shade: #49329e;
  --secondary: #bdebe2; --secondary-shade: #6fbfb2; --tertiary: #f47f5c;
  --bg: #f7f1e7; --surface: #fffdf8; --surface-variant: #f1edfb;
  --text: #18213d; --text-muted: #45506b; --border: #18213d; --focus: #49329e;
  --shadow: 0 12px 30px rgba(24,33,61,.10); --shadow-soft: 0 6px 18px rgba(24,33,61,.08);
  --font-head: "Poppins","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-body: "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  /* Legacy-Token-Namen (parent-dashboard.css) auf die Marke mappen */
  --muted: #45506b; --line: #d8d8e2;
}

/* Falls ein alter localStorage-Wert doch data-theme="dark" setzen würde:
   Marke bleibt hell (der Toggle wird auf den Rechtsseiten ohnehin entfernt). */
[data-theme="dark"] {
  --bg: #f7f1e7; --surface: #fffdf8; --surface-variant: #f1edfb;
  --text: #18213d; --text-muted: #45506b; --border: #18213d;
}

body { background: var(--cream); color: var(--ink); }

/* ---------- Header (legacy .site-header / .nav) ---------- */
.site-header { background: color-mix(in srgb, var(--paper) 92%, transparent); border-bottom: 1px solid var(--brand-line); backdrop-filter: blur(16px); }
.brand, .nav .brand { font-family: var(--font-head); font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.nav-links a { color: var(--ink-soft); font-weight: 700; }
.nav-links a:hover, .nav-links a:focus-visible { color: var(--lilac-deep); }
.nav-links .nav-parent-link { color: var(--lilac-deep); }
.nav-toggle { color: var(--ink); }

/* ---------- Buttons (neo-brutalistisch, wie Landing) ---------- */
.btn { border-radius: .65rem; font-family: var(--font-body); font-weight: 700; }
.btn-primary { background: var(--lilac); color: #fff; border: 2px solid var(--lilac); box-shadow: 4px 4px 0 var(--lilac-deep); }
.btn-primary:hover { background: var(--lilac-deep); color: #fff; transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--lilac-deep); }
.btn-outline { background: transparent; color: var(--ink); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--sun); }
.btn-outline:hover { background: var(--ink); color: #fff; }

/* ---------- Footer (dunkel, wie Landing-Footer) ---------- */
.site-footer { background: var(--ink); color: #fff; border-top: 0; padding: 2.4rem 0; }
.site-footer a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.site-footer a:hover { color: var(--sun); }

/* ---------- Rechts-Inhalt: Marken-Typo ---------- */
.legal h1, .legal h2, .legal h3 { font-family: var(--font-head); color: var(--ink); letter-spacing: -.02em; }
.legal a { color: var(--lilac-deep); }
.legal .placeholder { background: var(--sun); color: var(--ink); }

/* ============================================================
   Elternbereich (parent-dashboard.css) — nur sichtbare Marken-Angleichung.
   Layout des (hier nicht renderbaren) Dashboards bleibt unangetastet;
   geändert werden Hintergrund, Header, Login-Karte und Buttons.
   ============================================================ */
body[data-portal-page] { background: radial-gradient(circle at 6% 0%, var(--mint) 0, transparent 24rem), var(--cream); }
.portal-header { background: color-mix(in srgb, var(--paper) 92%, transparent); border-bottom: 1px solid var(--brand-line); }
.portal-brand { font-family: var(--font-head); color: var(--ink); }
.back-link { color: var(--lilac-deep); font-weight: 700; }
.eyebrow { color: var(--lilac-deep); }

.login-card { background: var(--paper); border: 2px solid var(--ink); border-radius: 1.1rem; box-shadow: 8px 8px 0 var(--lilac); }
.login-card input { border: 1.5px solid var(--ink); border-radius: .5rem; }
.login-card input:focus { outline: 3px solid var(--lilac-deep); outline-offset: 1px; border-color: var(--ink); }

.primary-button { background: var(--lilac); color: #fff; border: 2px solid var(--lilac); border-radius: .65rem; box-shadow: 4px 4px 0 var(--lilac-deep); }
.primary-button:hover { background: var(--lilac-deep); transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--lilac-deep); }
.outline-button, .icon-button { background: transparent; color: var(--ink); border: 2px solid var(--ink); border-radius: .65rem; box-shadow: 3px 3px 0 var(--sun); }
.outline-button:hover, .icon-button:hover { background: var(--ink); color: #fff; }

/* ---------- Consent-Status-Icons (Inline-SVG statt Emoji) ---------- */
.consent-icon { line-height: 0; }
.consent-icon svg { width: 56px; height: 56px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- 404-Seite ---------- */
.error-code { margin: .4rem 0 .2rem; font-family: var(--font-head); font-weight: 800; font-size: 3rem; letter-spacing: -.04em; color: var(--lilac); line-height: 1; }
.error-links { margin-top: 1.4rem; font-size: .85rem; color: var(--ink-soft); }
.error-links a { color: var(--lilac-deep); }