/* =============================================================
   VIA VIDAR – gemeinsame Stile
   Gültig für alle Seiten. Seitenspezifische Stile bleiben
   im jeweiligen <style>-Block der HTML-Datei.
   ============================================================= */

/* ---------- Design-Tokens ---------- */
:root{
  --paper:#FBF7F0; --surface:#F5EEE1; --surface-deep:#EEE4D2;
  --ink:#283139; --ink-soft:#4E5862;
  --gold:#C68A38; --gold-btn:#A06A1E; --gold-deep:#8E5E1E;
  --sage:#A6BC97; --sage-deep:#566E4C;
  --rose:#CC9079; --rose-deep:#9A532F;
  --line:#E2D7C4;

  --serif:"Spectral",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;

  --step--1:.875rem;
  --step-0:1.0625rem;
  --step-1:clamp(1.2rem,1.05rem + .6vw,1.45rem);
  --step-2:clamp(1.5rem,1.25rem + 1.2vw,2rem);
  --step-3:clamp(2rem,1.5rem + 2.4vw,3.1rem);
  --step-4:clamp(2.6rem,1.7rem + 4vw,4.5rem);

  --sp-1:.5rem; --sp-2:.75rem; --sp-3:1rem; --sp-4:1.5rem;
  --sp-5:2.25rem; --sp-6:3.25rem; --sp-7:clamp(4.5rem,3rem + 8vw,9rem);

  --wrap:68rem; --read:38rem;
  --radius:18px; --radius-s:12px;
  --ease:cubic-bezier(.22,1,.36,1);

  --z-thread:0; --z-base:1; --z-nav:50;
}

/* ---------- Reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- Body ---------- */
body{
  font-family:var(--sans);
  font-size:var(--step-0);
  line-height:1.7;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  position:relative;
}

/* weiche Farbfelder im Hintergrund */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(46rem 38rem at 82% -8%, color-mix(in oklab,var(--gold) 100%,transparent) 0%, transparent 60%),
    radial-gradient(40rem 34rem at -6% 14%, color-mix(in oklab,var(--sage) 100%,transparent) 0%, transparent 58%),
    radial-gradient(42rem 36rem at 108% 70%, color-mix(in oklab,var(--rose) 100%,transparent) 0%, transparent 60%),
    radial-gradient(38rem 32rem at -4% 96%, color-mix(in oklab,var(--gold) 100%,transparent) 0%, transparent 60%);
  opacity:.12;
}

/* ---------- Typografie ---------- */
h1,h2,h3,h4,blockquote{font-family:var(--serif);font-weight:400;line-height:1.14;color:var(--ink);text-wrap:balance;letter-spacing:-.018em}
p{text-wrap:pretty}
a{color:var(--gold-deep);text-underline-offset:.18em;text-decoration-thickness:1px}
img{max-width:100%;display:block}

:focus-visible{outline:2.5px solid var(--gold-deep);outline-offset:3px;border-radius:4px}

/* ---------- Layout-Helfer ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.25rem,5vw,3rem)}
.section{padding-block:var(--sp-7);position:relative;z-index:var(--z-base)}
.read{max-width:var(--read)}
.lede{font-size:var(--step-1);color:var(--ink-soft);line-height:1.6}
.s-kicker{display:block;font-family:var(--sans);font-size:var(--step--1);font-weight:600;letter-spacing:.01em;color:var(--sage-deep);margin-bottom:var(--sp-2)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;flex-shrink:0;white-space:nowrap;
  font-family:var(--sans);font-weight:600;font-size:var(--step-0);
  padding:.8em 1.45em;border-radius:999px;cursor:pointer;
  text-decoration:none;border:1.5px solid transparent;
  transition:transform .4s var(--ease),background-color .4s var(--ease),box-shadow .4s var(--ease),color .4s var(--ease)
}
.btn .arr{transition:transform .4s var(--ease)}
.btn:hover .arr{transform:translateX(.25em)}
.btn-primary{background:var(--gold-btn);color:var(--paper);box-shadow:0 8px 22px -12px color-mix(in oklab,var(--gold-deep) 80%,transparent)}
.btn-primary:hover{background:var(--gold-deep);transform:translateY(-2px)}
.btn-ghost{border-color:var(--gold);color:var(--gold-deep);background:transparent}
.btn-ghost:hover{background:color-mix(in oklab,var(--gold) 14%,transparent);transform:translateY(-2px)}

/* ---------- Lebensfaden (SVG-Thread) ---------- */
.thread-layer{position:absolute;inset:0;width:100%;height:100%;z-index:var(--z-thread);pointer-events:none;overflow:visible;opacity:.75}
.thread-layer path{fill:none;stroke:url(#threadGrad);stroke-width:1.8;stroke-linecap:round}
@media (max-width:640px){
  .thread-layer{opacity:.85}
  .thread-layer path{stroke-width:2.2}
}

/* ---------- Labyrinth-Motiv (Wasserzeichen, Flyer-Device) ---------- */
.laby{position:absolute;z-index:0;pointer-events:none;
  background:url("../labyrinth-front-glow.png") center/contain no-repeat;
  opacity:.5;
  -webkit-mask-image:radial-gradient(circle at center,#000 38%,transparent 72%);
  mask-image:radial-gradient(circle at center,#000 38%,transparent 72%)}
/* großes, angeschnittenes Labyrinth (Hero) */
.laby-hero{width:clamp(28rem,46vw,46rem);aspect-ratio:1;top:-14%;right:-14%}
/* zentriertes, sehr schwaches Wasserzeichen (Abschnittsbruch) */
.laby-center{width:clamp(20rem,40vw,34rem);aspect-ratio:1;top:50%;left:50%;
  transform:translate(-50%,-50%);opacity:.055}
@media (max-width:640px){
  .laby-hero{width:30rem;top:-6%;right:-28%}
  .laby-center{width:24rem}
}

/* ---------- Navigation ---------- */
.nav{
  position:sticky;top:0;z-index:var(--z-nav);
  border-bottom:1px solid transparent;transition:border-color .4s var(--ease)
}
/* Blur liegt auf einem Pseudo-Element, NICHT auf .nav selbst: backdrop-filter/filter
   erzeugt sonst einen eigenen containing block, wodurch position:fixed-Kinder
   (das mobile Menü) nicht mehr relativ zum Viewport, sondern zur Nav-Leiste
   positioniert würden – Ursache des "Menü öffnet nach oben/unsichtbar"-Bugs. */
.nav::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:color-mix(in oklab,var(--paper) 86%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)
}
.nav.scrolled{border-bottom-color:var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:.85rem}
/* Brand: echtes Labyrinth-Icon (Bild) + lebendiger, skalierbarer Text (kein Raster-Schriftzug,
   der bei kleiner Darstellung unlesbar würde). */
.brand{display:inline-flex;align-items:center;gap:.7rem;line-height:1.1;text-decoration:none;color:var(--ink);flex-shrink:0}
.brand .logo-icon{display:block;height:46px;width:46px;flex:none}
.brand .logo-text{display:flex;flex-direction:column;min-width:0}
.brand b{font-family:var(--serif);font-weight:500;font-size:1.3rem;letter-spacing:.14em;white-space:nowrap}
.brand .brand-tag{font-family:var(--sans);font-size:.74rem;letter-spacing:.03em;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){
  .brand .logo-icon{height:50px;width:50px}
  .brand b{font-size:1.34rem}
  .brand .brand-tag{display:none}
}
@media (max-width:360px){
  .brand b{font-size:1.12rem}
}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:color-mix(in oklab,var(--paper) 82%,transparent);padding-block:var(--sp-6)}
.footer a{color:color-mix(in oklab,var(--paper) 88%,transparent)}
.footer .inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-5)}
.footer .brand b{color:var(--paper)}
.footer .brand .brand-tag{color:color-mix(in oklab,var(--paper) 65%,transparent)}
.footer-links{display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center;font-size:var(--step--1)}
.footer-links a{text-decoration:none;opacity:.85}
.footer-links a:hover{opacity:1}
.footer-meta{width:100%;border-top:1px solid color-mix(in oklab,var(--paper) 18%,transparent);margin-top:var(--sp-4);padding-top:var(--sp-4);font-size:.8rem;color:color-mix(in oklab,var(--paper) 60%,transparent)}

/* ---------- Reveal-Animation ---------- */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal,.js .stagger > *{opacity:1!important;transform:none!important;transition:none!important}
  .btn,.offer,.nav-links{transition:none!important}
}

/* ---------- Barrierefreiheit ---------- */
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:#fff;padding:.6rem 1rem;border-radius:0 0 8px 0;z-index:100}
.skip:focus{left:0}