/* ─── TOKENS ──────────────────────────────────────────────────
   EINZIGE QUELLE der Design-Werte. Jeder Konsument bindet DIESE Datei
   ein — nie Werte kopieren:

     style.css          → Website (Layout/Komponenten bauen darauf auf)
     kurzprofil-view.html / profile-view.html → PDF-Viewer (gated)
     profil-de.html / profil-en.html → A4-Druckvorlagen der Profil-PDFs
     og-card.html       → Social-Share-Card 1200×630
     Claude Design      → tokens/colors.css (Upload, siehe CLAUDE.md)

   Bewusst eine eigene Datei statt Tokens in style.css: Die Druck- und
   Kartenvorlagen brauchen die Werte, aber NICHT Reset und Layout der
   Website — die würden ihr A4- bzw. 1200×630-Layout zerstören.

   Kontrastregel (WCAG AA): Die hellen Marken-Töne erreichen auf hellem
   Grund nur 1,9–2,8:1. Deshalb:
     Text / Rahmen / Füllungen / Fokusringe  →  --accent-ink(-2)
     Auren, Verläufe, leuchtende Flächen,
     alles über Fotos                        →  --accent-rest/-hover
   Im Dark-Theme mappen die Ink-Töne zurück auf die hellen Originale.
   ───────────────────────────────────────────────────────────── */
:root {
  --c-dark:    #2D3E4F;
  --c-blue:    #77C0F1;
  --c-salmon:  #ff6a68;

  /* Interaktion (Link-/Hover-Konzept): Lachs ruht, Blau reagiert */
  --accent-rest:  var(--c-salmon);
  --accent-hover: var(--c-blue);
  /* Lesbare Akzent-Töne für TEXT/Rahmen/CTA-Füllung (helle Töne sind auf hellem Grund < AA) */
  --accent-ink:   #B93E3A;   /* dunkleres Lachs — 5,18:1 auf --bg, 4,78:1 auf --bg-alt, weiß auf Füllung 5,51:1.
                                Bis 10/2026 #C2433F: auf --bg-alt nur 4,38:1, also unter AA — betraf jeden
                                Kicker, Chip und die Telefonnummer in den grauen Abschnitten. */
  --accent-ink-2: #1F6FB0;   /* dunkleres Blau — Text/Rahmen ≥4,5:1 */
  /* Textfarbe AUF gefüllten Akzentflächen (CTA, Skip-Link). Im Dark bewusst
     dunkel: dort ist die Füllung der helle Lachston, auf dem Weiß nur 2,79:1
     erreicht — im Hover (blaue Füllung) sogar 1,98:1. */
  --on-accent:    #fff;
  /* Aktiver Nav-Punkt. Eigener Ton, weil der Header transluzent ist und einen
     13%-Tint trägt: --accent-ink käme dort nur auf 4,0:1. */
  --nav-active:   #B23B37;   /* 4,71:1 auf dem Header, auch an den Tint-Rändern */

  /* Motion — eine Takt-/Easing-Skala für alle Transitions/Animationen.
     Showcase-Timings (Hero-Einblendung, Aura, Bounce) bleiben bewusst eigen. */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);  /* Standard: Reveals, Crossfade, Bewegung */
  --ease-in:   cubic-bezier(0.4, 0, 1, 1);       /* Verlassen/Ausblenden (beschleunigt) */
  --ease-loop: ease-in-out;                       /* ambiente Endlos-Loops (Aura, Bounce) */
  --dur-fast:  0.2s;                              /* Mikro: Hover, Farbe, Rahmen */
  --dur-mid:   0.35s;                             /* Crossfade, Wisch, Standard-Transition */
  --dur-slow:  0.6s;                              /* Reveals, Header-Einblendung */

  /* Hero-Aura — Light-Mode in den dunkleren Ink-Tönen (--accent-ink /
     --accent-ink-2), seit 10/2026. Vorher die hellen Markentöne mit .42/.40:
     pastellig, und das Hellblau verschwamm mit dem hellblauen Hemd im Porträt. */
  --aura-1: rgba(185, 62, 58, 0.50);
  --aura-2: rgba(31, 111, 176, 0.50);

  /* Schein hinter dem freigestellten Hero-Porträt. Hebt den Kopf vom Grund ab,
     laeuft nach aussen in nichts aus — deshalb eine Farbe, kein Verlauf: den
     baut style.css. Abgeleitet aus --c-blue wie die Aura, damit keine neue
     Farbfamilie dazukommt. Begruendung in DESIGN.md § 2. */
  --portrait-glow: rgba(119, 192, 241, 0.30);

  /* Töne auf Navy-Grund (--c-dark). Theme-unabhängig: Navy bleibt Navy,
     egal welches Theme die Seite fährt. Gebraucht von der PDF-Sidebar
     und der Viewer-Leiste — beide standen vorher als kopierte Hex-Werte
     in den Vorlagen. Kontraste auf #2D3E4F nachgerechnet. */
  --navy-text:   #e7edf3;   /* Fließtext auf Navy — 9,3:1 */
  --navy-mute:   #aebccb;   /* gedämpft auf Navy — 5,7:1 */
  --navy-accent: #ff8a86;   /* Lachs-Label auf Navy — 4,8:1 (hellere Aufhellung, da --accent-ink auf Navy zu dunkel wäre) */

  /* Flaeche fuer einen Abschnitt mit Gewicht (Haltung). Hell: Navy, also ein
     dunkles Band. Dunkel: der tiefste Ton der Seite — Navy laege dort nur
     1,22:1 ueber den Nachbarflaechen und fiele kaum auf. Die --navy-*-Toene
     funktionieren auf beiden Werten. */
  --band:        var(--c-dark);

  /* light mode */
  --bg:        #F8F8F6;
  --bg-alt:    #EFEFED;
  --text:      #1A1A1A;
  /* Gegen BEIDE Sektions-Hintergruende geprueft: 5,22:1 auf --bg, 4,82:1 auf
     --bg-alt. Der Vorgaenger #6B7280 erreichte nur 4,55 bzw. 4,20 — auf den
     vier .alt-Sektionen (Leistung, Erfahrung, Referenzen, Kontakt) also unter
     AA. Ein Wert, der nur knapp besteht, besteht auf der abgesetzten Flaeche
     nicht mehr. */
  --text-mute: #616974;
  --border:    #E0E0DC;
  --nav-bg:    rgba(248, 248, 246, 0.6);
  --bg-input:  #fff;
}

[data-theme="dark"] {
  --bg:        #1C2530;
  --band:      #11171E;   /* 1,35:1 unter --bg-alt; --navy-text 15,3:1, --navy-mute 9,3:1, --navy-accent 7,9:1 */
  /* Dark: helle Marken-Töne sind auf dunklem Grund bereits AA → Ink = hell */
  --accent-ink:   var(--c-salmon);
  --accent-ink-2: var(--c-blue);
  /* Umgekehrt zum Light: Die Füllung ist hier hell, der Text darauf dunkel. */
  --on-accent:    #1A1A1A;   /* 6,23:1 auf Lachs, 8,78:1 auf der Hover-Füllung */
  --nav-active:   #ff8a86;   /* 4,92:1 auf dem Header; gleicher Wert wie --navy-accent */
  --aura-1: rgba(255, 106, 104, 0.22);
  --aura-2: rgba(119, 192, 241, 0.22);
  /* Im Dark der Marken-Navy: heller als der Grund (#1C2530), aber derselbe
     Farbton — das hebt den Kopf, ohne zu leuchten. */
  --portrait-glow: rgba(45, 62, 79, 0.95);
  --bg-alt:    #243040;
  --text:      #F0F0EE;
  --text-mute: #9CA3AF;
  --border:    #2D3E4F;
  --nav-bg:    rgba(28, 37, 48, 0.6);
  --bg-input:  var(--bg);
}