/* ════════════════════════════════════════════════════════════════════════
   LENKLY — ZENTRALE DESIGN-TOKENS ("Geführter Weg")
   Diese Datei wird von allen Seiten geladen (Startseite, App, Login).
   Farben, Schriften und Basis-Stile NUR hier ändern.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* Hintergrund */
  --bg: #FAF8F3;          /* warmes Papierweiß */
  --bg-alt: #F2EFE7;      /* weiches Sand – für Abschnitts-Bänder */
  --white: #FFFEFB;       /* warmes Off-White für Karten/Header */

  /* Text */
  --text: #1A2238;        /* tiefes Tinten-Navy */
  --text-muted: #6E6657;  /* warmes Taupe-Grau */

  /* Rahmen & Schatten */
  --border: #E7E2D7;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(26,34,56,0.07), 0 1px 2px rgba(26,34,56,0.05);
  --shadow-lg: 0 10px 28px rgba(26,34,56,0.09);

  /* Primärfarbe (Marke, Buttons, Aktionen) */
  --accent: #127D72;      /* tiefes Petrol/Teal */
  --accent-hover: #0E645C;
  --accent-bg: #E9F3F1;

  /* Highlight-Akzent (sparsam: aktiver Schritt, Hervorhebungen) */
  --highlight: #E08A3C;   /* warmes Bernstein */
  --highlight-bg: #FBF0E2;

  /* Status */
  --success: #2F855A;
  --success-bg: #F0FFF4;
  --success-border: #C6F6D5;
  --error: #C0533E;

  /* Schrift */
  --font-heading: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
}

* , *::before, *::after { box-sizing: border-box; }

body { font-family: var(--font-body); }
h1, h2, h3, h4,
.brand, .auth-logo, .logo-text {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ── Scroll-reveal (geteilt von allen Seiten) ─────────────────────────── */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Routen-Hintergrundmotiv (sehr dezent, 4–7% Deckkraft) ────────────── */
.route-bg {
  position: relative;
  isolation: isolate;
}
.route-bg::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='220' viewBox='0 0 480 220'%3E%3Cpath d='M0 180 C 80 60, 160 220, 240 100 S 400 40, 480 120' fill='none' stroke='%231A2238' stroke-width='1.4' stroke-dasharray='1 9' stroke-linecap='round'/%3E%3Ccircle cx='80' cy='118' r='3' fill='%23127D72'/%3E%3Ccircle cx='240' cy='100' r='3' fill='%23E08A3C'/%3E%3Ccircle cx='400' cy='42' r='3' fill='%23127D72'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 480px 220px;
  opacity: 0.05;
}
.route-bg > * { position: relative; z-index: 1; }

/* ── Logo lockup (icon mark + wordmark), shared across pages ──────────── */
.logo-lockup { display: flex; align-items: center; gap: 8px; }
.logo-lockup img { height: 26px; width: auto; display: block; }
.logo-text { font-size: 1.15rem; color: var(--text); }
.logo-text .lt-accent { color: var(--accent); }