/* ============================================================================
   LernhilfePlus — Design-Tokens & Basis-System (Cinematic Luxury · Schwarz+Gold)
   Single Source of Truth — Komponenten referenzieren NUR var(--…), REF-F/H
   ============================================================================ */

/* Fonts LOKAL (kein Google-Fonts-CDN) — vermeidet render-blocking externe Stylesheet-
   Ladezeit (Ursache für verzögerten First Paint / hängenden Preloader in dichten Netzen). */
@font-face{ font-family:"Fraunces"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/Fraunces-400.ttf") format("truetype"); }
@font-face{ font-family:"Fraunces"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/Fraunces-600.ttf") format("truetype"); }
@font-face{ font-family:"Fraunces"; font-style:normal; font-weight:900; font-display:swap; src:url("../fonts/Fraunces-900.ttf") format("truetype"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/Inter-400.ttf") format("truetype"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/Inter-600.ttf") format("truetype"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/Inter-700.ttf") format("truetype"); }

:root{
  /* Farben — Dark ist Default (Marken-DNA) */
  --color-bg:#0b0b0d;
  --color-surface:#16151a;
  --color-surface-2:#1e1c22;
  --color-fg:#f4f0e6;
  --color-muted:#a79d87;
  --color-gold:#c6a15b;
  --color-gold-bright:#e8c874;
  --color-gold-deep:#8b6f3e;
  --color-border:#2c2a28;
  --focus:var(--color-gold-bright);

  /* Spacing — eigene Namen (NICHT mit Tailwind kollidieren) */
  --space-xs:.5rem; --space-sm:1rem; --space-md:1.5rem; --space-lg:2.5rem; --space-xl:4rem; --space-2xl:6rem;
  --radius-sm:.375rem; --radius:.75rem; --radius-lg:1.25rem;
  --shadow-sm:0 1px 2px rgb(0 0 0/.3);
  --shadow:0 20px 60px rgb(0 0 0/.45);
  --shadow-gold:0 0 0 1px var(--color-gold), 0 8px 30px rgb(198 161 91/.25);

  /* Fluide Typo-Skala (kanonisch) */
  --text-eyebrow:.8rem;
  --text-body:1.0625rem;
  --text-lead:clamp(1.15rem,1.4vw,1.35rem);
  --text-h4:clamp(1.15rem,1.4vw,1.35rem);
  --text-h3:clamp(1.25rem,2.2vw,1.6rem);
  --text-h2:clamp(1.5rem,3.5vw,2.25rem);
  --text-h1:clamp(2rem,5vw,3.5rem);
  --text-hero:clamp(2.4rem,6vw,4.5rem);
  --lh-tight:1.08; --lh-snug:1.25; --lh-body:1.65;
  --tracking-tight:-.02em; --tracking-label:.14em;
  --dur:.4s; --ease-out:cubic-bezier(.16,1,.3,1);

  --wobble:1; --bgGlowY:88%; --bgGlowX:50%; --bgGlowA:.16; --bgHue:38;
}

[data-theme="light"]{
  --color-bg:#faf7ef;
  --color-surface:#ffffff;
  --color-surface-2:#f3ede0;
  --color-fg:#1a1712;
  --color-muted:#6b6357;
  --color-gold:#a9823f;
  --color-gold-bright:#c6a15b;
  --color-gold-deep:#7a5f30;
  --color-border:#e7e0d0;
  --shadow:0 20px 60px rgb(26 23 18/.12);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--color-bg); color:var(--color-fg);
  font-family:"Inter",system-ui,sans-serif; font-size:var(--text-body); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased; overflow-x:clip; transition:background .5s ease,color .5s ease;
}
h1,h2,h3,h4{ font-family:"Fraunces",serif; line-height:var(--lh-tight); letter-spacing:var(--tracking-tight); margin:0; font-weight:600; }
h1{ font-size:var(--text-h1); font-weight:900; }
h2{ font-size:var(--text-h2); font-weight:700; }
h3{ font-size:var(--text-h3); font-weight:600; }
h4{ font-size:var(--text-h4); font-weight:600; }
p{ margin:0; }
a{ color:inherit; }
img{ max-width:100%; height:auto; display:block; }
:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; }

.wrap{ max-width:1240px; margin-inline:auto; padding-inline:1.5rem; }
@media (min-width:768px){ .wrap{ padding-inline:2.5rem; } }

.eyebrow{
  display:inline-block; font-family:"Inter",sans-serif; font-size:var(--text-eyebrow); font-weight:600;
  letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--color-gold-bright); margin-bottom:.9rem;
}
.lead{ font-size:var(--text-lead); font-weight:500; color:var(--color-muted); max-width:42rem; }
.copy{ max-width:65ch; color:var(--color-muted); }

section{ padding:4rem 0; position:relative; }
@media (min-width:768px){ section{ padding:7rem 0; } }

.btn{
  display:inline-flex; align-items:center; gap:.6rem; padding:.9rem 1.7rem; border-radius:999px;
  font-family:"Inter",sans-serif; font-weight:600; font-size:.98rem; text-decoration:none; cursor:pointer;
  border:1px solid transparent; transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),background .3s,color .3s,border-color .3s;
  min-height:48px;
}
.btn-gold{ background:linear-gradient(135deg,var(--color-gold-bright),var(--color-gold)); color:#17140c; box-shadow:var(--shadow-gold); }
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 0 0 1px var(--color-gold-bright),0 14px 40px rgb(198 161 91/.35); }
.btn-ghost{ background:transparent; color:var(--color-fg); border-color:var(--color-border); }
.btn-ghost:hover{ border-color:var(--color-gold); color:var(--color-gold-bright); }

/* ── Header ─────────────────────────────────────────────────────────────── */
.site-header{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:100;
  color:#f4f0e6; background:transparent; transition:background .4s ease,box-shadow .4s ease,border-color .4s ease;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:color-mix(in oklch, var(--color-bg) 88%, transparent); backdrop-filter:blur(14px);
  border-bottom-color:var(--color-border); color:var(--color-fg);
}
.site-header__inner{ display:flex; align-items:center; justify-content:space-between; padding-block:1.1rem; }
.site-header .logo{ display:flex; align-items:center; gap:.6rem; font-family:"Fraunces",serif; font-weight:700; font-size:1.15rem; text-decoration:none; color:inherit; }
.site-header .logo svg{ width:32px; height:32px; flex:none; }
.site-nav{ display:none; align-items:center; gap:2rem; }
@media (min-width:900px){ .site-nav{ display:flex; } }
.site-nav a{ text-decoration:none; font-size:.95rem; font-weight:500; color:inherit; opacity:.88; position:relative; padding-block:.3rem; }
.site-nav a:hover{ opacity:1; color:var(--color-gold-bright); }
.site-nav a.is-active{ color:var(--color-gold-bright); opacity:1; }
.header-actions{ display:flex; align-items:center; gap:.9rem; }
.theme-toggle{
  width:42px; height:42px; border-radius:50%; border:1px solid currentColor; opacity:.75;
  background:transparent; color:inherit; display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:opacity .3s,border-color .3s;
}
.theme-toggle:hover{ opacity:1; border-color:var(--color-gold); }
.theme-toggle svg{ width:18px; height:18px; }
.burger{ display:flex; width:44px; height:44px; border:none; background:transparent; color:inherit; cursor:pointer; align-items:center; justify-content:center; }
@media (min-width:900px){ .burger{ display:none; } }
.burger span{ display:block; width:22px; height:2px; background:currentColor; position:relative; transition:background .2s; }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:22px; height:2px; background:currentColor; transition:transform .3s var(--ease-out); }
.burger span::before{ top:-7px; } .burger span::after{ top:7px; }
.burger[aria-expanded="true"] span{ background:transparent; }
.burger[aria-expanded="true"] span::before{ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span::after{ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:99; background:var(--color-bg); color:var(--color-fg);
  display:flex; flex-direction:column; justify-content:center; gap:1.6rem; padding:2rem;
  transform:translateY(-100%); transition:transform .5s var(--ease-out); overflow-y:auto;
}
.mobile-menu.is-open{ transform:translateY(0); }
.mobile-menu a{ font-family:"Fraunces",serif; font-size:2rem; text-decoration:none; color:inherit; }
.mobile-menu a:hover{ color:var(--color-gold-bright); }

/* ── Hintergrund-Szene (fixed, scroll-gekoppelt) ───────────────────────── */
.bg-scene{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(46% 40% at var(--bgGlowX) var(--bgGlowY), hsl(var(--bgHue) 62% 58% / var(--bgGlowA)), transparent 70%),
    radial-gradient(70% 60% at 12% 8%, hsl(calc(var(--bgHue) + 10) 40% 20% / .35), transparent 70%);
}
[data-theme="light"] .bg-scene{
  background:
    radial-gradient(46% 40% at var(--bgGlowX) var(--bgGlowY), hsl(var(--bgHue) 70% 62% / calc(var(--bgGlowA) * .6)), transparent 70%),
    radial-gradient(70% 60% at 12% 8%, hsl(calc(var(--bgHue) + 10) 60% 88% / .5), transparent 70%);
}
canvas.bg-dust{ position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; mix-blend-mode:screen; opacity:.55; }
[data-theme="light"] canvas.bg-dust{ opacity:.3; }

/* ── Der Goldene Leitfaden (Signatur-SVG, fixed, full-page scrub) ───────── */
.leitfaden{ display:none; position:fixed; inset-block:0; left:0; z-index:5; pointer-events:none; width:90px; height:100vh; }
@media (min-width:768px){ .leitfaden{ display:block; } }
.leitfaden path{ fill:none; stroke:var(--color-gold); stroke-width:1.6; opacity:.55; }

/* ── Karten / Boxen (REF-H) ─────────────────────────────────────────────── */
.card{
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius);
  padding:1.8rem; display:flex; flex-direction:column; height:100%; transition:transform .5s var(--ease-out),border-color .4s;
}
.card:hover{ border-color:var(--color-gold); }
.card-photo{ position:relative; border-radius:var(--radius-sm); overflow:hidden; aspect-ratio:4/3; margin-bottom:1.2rem; background:var(--color-surface-2); }
.card-photo img{ width:100%; height:100%; object-fit:cover; }

.grid-cards{ display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media (min-width:640px){ .grid-cards{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .grid-cards{ grid-template-columns:repeat(3,1fr); } }
.grid-cards.cols-2{ }
@media (min-width:1024px){ .grid-cards.cols-2{ grid-template-columns:repeat(2,1fr); } }

/* ── Bild-Reveal „löst sich auf" (REF-C) ─────────────────────────────────── */
[data-img-resolve]{
  clip-path:inset(10% round 1.2rem); transform:scale(1.06); opacity:.4; filter:saturate(.6);
  transition:clip-path 1.1s cubic-bezier(.22,.61,.21,1),transform 1.2s cubic-bezier(.22,.61,.21,1),opacity .9s,filter 1s;
}
[data-img-resolve].in{ clip-path:inset(0 round 1.2rem); transform:scale(1); opacity:1; filter:saturate(1); }

/* ── Text-Split-Vorbereitung ─────────────────────────────────────────────── */
[data-split]{ overflow:hidden; display:block; }
[data-split] .word{ display:inline-block; white-space:nowrap; }
[data-split] .char{ display:inline-block; will-change:transform; }

[data-tilt]{ transform-style:preserve-3d; }

/* ── Footer ───────────────────────────────────────────────────────────── */
.site-footer{ background:var(--color-surface); border-top:1px solid var(--color-border); padding-block:4rem 2rem; position:relative; z-index:1; }
.footer-top{ display:grid; grid-template-columns:1fr; gap:2.5rem; margin-bottom:2.5rem; }
@media (min-width:800px){ .footer-top{ grid-template-columns:1.2fr 1fr 1fr; } }
.footer-top h4{ font-size:.85rem; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--color-gold-bright); font-family:"Inter",sans-serif; font-weight:600; margin-bottom:1rem; }
.footer-top ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.65rem; }
.footer-top a{ text-decoration:none; color:var(--color-muted); }
.footer-top a:hover{ color:var(--color-gold-bright); }
.footer-bottom{ display:flex; flex-direction:column; gap:1.2rem; align-items:flex-start; padding-top:1.6rem; border-top:1px solid var(--color-border); padding-bottom:15px; }
@media (min-width:700px){ .footer-bottom{ flex-direction:row; align-items:center; justify-content:space-between; } }
.footer-legal{ display:flex; gap:1.4rem; flex-wrap:wrap; font-size:.88rem; }
.footer-legal a{ text-decoration:none; color:var(--color-muted); }
.footer-legal a:hover{ color:var(--color-gold-bright); }
.footer-demo{ font-size:.78rem; color:var(--color-muted); opacity:.7; max-width:60ch; }

/* ── Preloader ────────────────────────────────────────────────────────── */
#preloader{ position:fixed; inset:0; z-index:9999; background:var(--color-bg); display:flex; align-items:center; justify-content:center; }
#preloader svg{ width:64px; height:64px; }
#preloader path{ fill:none; stroke:var(--color-gold); stroke-width:6; stroke-linecap:round; }
/* CSS-only Notbremse — unabhängig von JS-Timing (blockierender Font-/Tailwind-Load kann Skripte
   verzögern): der Preloader wird spätestens nach 2.4s per reinem CSS ausgeblendet, egal was JS tut. */
@keyframes preloaderAutohide{ to{ opacity:0; visibility:hidden; pointer-events:none; } }
#preloader{ animation: preloaderAutohide 0s linear 2.4s forwards; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto!important; }
  .marquee,[data-parallax],[data-depth]{ animation:none!important; }
  .bg-loop,.aurora,[data-ambient]{ animation-duration:90s!important; }
}