/* =============================================================================
   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 – freundliches Dunkelblau (statt Grau/Schwarz) */
  --vb-bg-dark:#1c2c48; --vb-bg-black:#152238; --vb-surface:#263a5e;
  --vb-surface-2:#1f3052; --vb-surface-input:#182740;
  --vb-overlay:rgba(10,20,38,.72); --vb-overlay-section:rgba(28,44,72,.5);
  /* Backgrounds – hell */
  --vb-bg-light:#fff; --vb-bg-light-alt:#f7f7f7;
  /* Akzent – freundliches Blau (statt Petrol) */
  --vb-accent:#2f80d6; --vb-accent-hover:#4a97e6; --vb-accent-deep:#2569b8;
  --vb-accent-alt:#3a86d9; --vb-accent-text:#74b6f5;
  /* Text */
  --vb-text:#000; --vb-text-on-dark:#fff; --vb-text-muted:#a9b6cd;
  --vb-text-muted-strong:#bcc7db; --vb-text-subtle:#d3dbe8;
  --vb-text-hint:#9aa6bd; --vb-text-dark-2:#303030;
  /* Ränder – leicht bläulich */
  --vb-border:rgba(148,178,220,.16); --vb-border-strong:rgba(148,178,220,.30);
  --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; }

/* ---------- 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; }
}