/* =============================================================================
   1. FC Victor's Bistro — Fundament (Tokens, Reset, Typo, Buttons, Motion)
   DSGVO: Schriften lokal (fonts.css), keine externen Ressourcen.
   Token-Set & Werte: website-recon/analysis/03-design-system.md (WCAG-geprüft)
   ============================================================================= */
@import url("/fonts/fonts.css");

:root{
  /* Backgrounds – dunkel */
  --vb-bg-dark:#161616; --vb-bg-black:#000; --vb-surface:#141414;
  --vb-surface-2:#0e0e0e; --vb-surface-input:#0a0a0a;
  --vb-overlay:rgba(0,0,0,.72); --vb-overlay-section:rgba(22,22,22,.5);
  /* Backgrounds – hell */
  --vb-bg-light:#fff; --vb-bg-light-alt:#f7f7f7;
  /* Akzent (Petrol) */
  --vb-accent:#0c8a96; --vb-accent-hover:#0aa1b0; --vb-accent-deep:#008390;
  --vb-accent-alt:#008e9c; --vb-accent-text:#16b4c4;
  /* Text */
  --vb-text:#000; --vb-text-on-dark:#fff; --vb-text-muted:#a4a4a4;
  --vb-text-muted-strong:#b5b8ba; --vb-text-subtle:#cfd2d4;
  --vb-text-hint:#9ea3a7; --vb-text-dark-2:#303030;
  /* Ränder */
  --vb-border:rgba(255,255,255,.08); --vb-border-strong:rgba(255,255,255,.15);
  --vb-border-light:rgba(0,0,0,.10);
  /* Schrift */
  --vb-font-display:"Archivo Black","Bebas Neue","Impact","Arial Narrow",sans-serif;
  --vb-font-body:"Montserrat","Inter","Helvetica Neue",Arial,sans-serif;
  /* Radius */
  --vb-radius-pill:999px; --vb-radius-lg:18px; --vb-radius-md:14px;
  --vb-radius-sm:10px; --vb-radius-xs:6px;
  /* Schatten */
  --vb-shadow-pill:0 4px 14px rgba(0,0,0,.25);
  --vb-shadow-pill-hover:0 6px 18px rgba(0,0,0,.32);
  --vb-shadow-modal:0 24px 60px rgba(0,0,0,.55);
  --vb-shadow-card:0 2px 8px rgba(0,0,0,.08);
  --vb-shadow-card-hover:0 12px 28px rgba(0,0,0,.16);
  /* Motion */
  --vb-ease-pop:cubic-bezier(.2,.9,.3,1.2); --vb-ease-std:ease;
  --vb-dur-fast:120ms; --vb-dur-base:150ms; --vb-dur-slow:180ms; --vb-dur-reveal:520ms;
  /* Layout */
  --vb-gutter:clamp(20px,5vw,24px);
  --vb-section-py:clamp(64px,9vw,112px);
  --vb-container:1160px; --vb-measure:68ch;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--vb-font-body); background:var(--vb-bg-dark); color:var(--vb-text-on-dark);
  line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
::selection{ background:var(--vb-accent); color:#fff; }
:focus-visible{ outline:2px solid var(--vb-accent-text); outline-offset:3px; border-radius:4px; }

/* ---------- Typografie ---------- */
h1,h2,h3{ font-family:var(--vb-font-display); font-weight:400; line-height:1.2; letter-spacing:.4px; }
h1{ font-size:clamp(2.25rem,4.5vw + 1rem,3.375rem); }         /* 36 → 54 */
h2{ font-size:clamp(1.75rem,2.5vw + .6rem,2.0625rem); }       /* 28 → 33 */
h3{ font-size:clamp(1.0625rem,1.5vw,1.1875rem); }             /* 17 → 19 */
.vb-h3-lg{ font-family:var(--vb-font-body); font-size:clamp(1.5rem,2.2vw + .4rem,1.875rem); line-height:1.25; }
p{ font-size:clamp(1rem,.4vw + .9rem,1.0625rem); }
.vb-overline{ font-family:var(--vb-font-body); font-size:.8125rem; font-weight:600;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--vb-accent-text); }

/* ---------- Layout-Helfer ---------- */
.vb-section{ padding:var(--vb-section-py) var(--vb-gutter); }
.vb-section--dark{ background:var(--vb-bg-dark); color:var(--vb-text-on-dark); }
.vb-section--black{ background:var(--vb-bg-black); color:var(--vb-text-on-dark); }
.vb-section--light{ background:var(--vb-bg-light); color:var(--vb-text); }
.vb-section--light .vb-lead,.vb-section--light p{ color:var(--vb-text-dark-2); }
.vb-container{ max-width:var(--vb-container); margin-inline:auto; width:100%; }
.vb-measure{ max-width:var(--vb-measure); }
.vb-center{ text-align:center; }
.vb-lead{ color:var(--vb-text-muted); }
.vb-section--dark p,.vb-section--black p,.vb-section--dark .vb-lead{ color:var(--vb-text-muted); }

/* ---------- Primär-Button / Pill (kanonisch aus dem Kalender-Widget) ---------- */
.vb-pill-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  padding:18px 28px; background:var(--vb-accent); color:#fff; border:none;
  border-radius:var(--vb-radius-pill); font-family:var(--vb-font-display);
  font-size:clamp(14px,2vw,18px); font-weight:400; letter-spacing:1.5px;
  text-transform:uppercase; text-decoration:none; cursor:pointer;
  box-shadow:var(--vb-shadow-pill);
  transition:background var(--vb-dur-base) var(--vb-ease-std),
             transform var(--vb-dur-fast) var(--vb-ease-std),
             box-shadow var(--vb-dur-base) var(--vb-ease-std);
  -webkit-tap-highlight-color:transparent;
}
.vb-pill-btn:hover,.vb-pill-btn:focus-visible{ background:var(--vb-accent-hover); box-shadow:var(--vb-shadow-pill-hover); outline:none; }
.vb-pill-btn:active{ transform:translateY(1px); }
.vb-pill-btn:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.vb-pill-btn--ghost{ background:transparent; color:var(--vb-accent-text); border:1.5px solid currentColor; box-shadow:none; }
.vb-pill-btn--ghost:hover,.vb-pill-btn--ghost:focus-visible{ background:var(--vb-accent); color:#fff; border-color:var(--vb-accent); }
.vb-pill-btn--on-light{ background:var(--vb-accent-deep); }
.vb-pill-btn--on-light:hover,.vb-pill-btn--on-light:focus-visible{ background:var(--vb-accent); }

/* ---------- Scroll-Reveal (Modernisierung §2.1) ----------
   WICHTIG: Verstecken NUR wenn JS aktiv ist (html.vb-js). Ohne JS bzw. wenn
   das Reveal-Skript nicht läuft, bleibt jeder Inhalt sichtbar. */
.vb-js .vb-reveal{ opacity:0; transform:translateY(16px); transition:opacity var(--vb-dur-reveal) var(--vb-ease-std), transform var(--vb-dur-reveal) var(--vb-ease-pop); }
.vb-js .vb-reveal.is-in{ opacity:1; transform:none; }
.vb-reveal[data-delay="1"]{ transition-delay:.08s; }
.vb-reveal[data-delay="2"]{ transition-delay:.16s; }
.vb-reveal[data-delay="3"]{ transition-delay:.24s; }

/* ---------- Scroll-Line-Art (additive Ebene, per JS gebaut) ---------- */
#vb-line-layer{ position:absolute; top:0; left:0; width:100%; height:100%; z-index:3; pointer-events:none; overflow:visible; }
#vb-line-svg{ position:absolute; top:0; left:0; }
.vb-core{ fill:none; stroke:url(#vbFlow); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.vb-glow2{ fill:none; stroke:var(--vb-accent-deep); stroke-width:7; opacity:.20; stroke-linecap:round; stroke-linejoin:round; }
.vb-glow3{ fill:none; stroke:var(--vb-accent-deep); stroke-width:13; opacity:.09; stroke-linecap:round; stroke-linejoin:round; }
.vb-tail{ fill:none; stroke:#bff4fb; stroke-width:3.5; stroke-linecap:round; }
#vb-line-head{ will-change:transform; }
.vb-line-icon{ position:absolute; overflow:visible; }
.vb-line-icon path,.vb-line-icon circle{ fill:none; stroke:var(--vb-accent-text); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition:none !important; animation:none !important; }
  .vb-js .vb-reveal{ opacity:1; transform:none; }
  #vb-line-layer{ display:none; }
}