/* ============================================================
   Zukunft Flutlicht Saar — Landing Page Styles
   saarcheck Design System · extended for landing page shell
   ============================================================ */

/* ----- Web fonts ----- */
@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@200;300;400;500;600;700&family=Oswald:wght@500;600;700&display=swap");

@font-face {
  font-family: "Manrope";
  src: url("./assets/Manrope-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* =============================================================
   saarcheck Design Tokens
   ============================================================= */

:root {
  /* Backgrounds */
  --bg-0: #141413;
  --bg-1: #1D1D1B;
  --bg-2: #232321;
  --bg-3: #2A2A28;
  --bg-4: #34342F;

  /* Foreground */
  --fg-1: #F5F5F2;
  --fg-2: #C7C7C2;
  --fg-3: #8C8C87;
  --fg-4: #5C5C58;
  --fg-5: #3A3A37;

  /* Inverted */
  --ink-1: #1D1D1B;
  --ink-2: #44443F;
  --ink-3: #6C6C66;
  --paper: #FFFFFF;
  --paper-2: #F5F5F2;
  --paper-3: #E8E8E3;

  /* Cyan */
  --cyan-50:  #E6FCFF;
  --cyan-100: #B3F4FE;
  --cyan-200: #80ECFD;
  --cyan-300: #4DE4FC;
  --cyan-400: #27E0FB;
  --cyan-500: #06B8D4;
  --cyan-600: #008BA3;
  --cyan-700: #005F70;
  --cyan-800: #003A45;
  --cyan-900: #001E26;
  --cyan-glow: rgba(39, 224, 251, 0.18);
  --cyan-glow-soft: rgba(39, 224, 251, 0.08);

  /* Semantic */
  --color-accent: var(--cyan-400);
  --color-accent-hover: var(--cyan-300);
  --color-accent-press: var(--cyan-500);
  --color-accent-ink: #001A20;
  --color-success: #4ADE80;
  --color-warning: #F5C451;
  --color-danger:  #FF6B6B;
  --color-info:    var(--cyan-400);

  /* Lines */
  --line-1: rgba(245, 245, 242, 0.06);
  --line-2: rgba(245, 245, 242, 0.10);
  --line-3: rgba(245, 245, 242, 0.18);
  --line-accent: rgba(39, 224, 251, 0.35);

  /* Type families */
  --font-display: "Raleway", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Type weights */
  --w-thin: 200;
  --w-light: 300;
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;

  /* Type scale */
  --t-display-xl: clamp(56px, 7.5vw, 112px);
  --t-display-l:  clamp(44px, 5.5vw, 80px);
  --t-display-m:  clamp(36px, 4vw, 56px);
  --t-h1: 44px;
  --t-h2: 32px;
  --t-h3: 24px;
  --t-h4: 19px;
  --t-h5: 16px;
  --t-body-l: 18px;
  --t-body:   16px;
  --t-body-s: 14px;
  --t-caption: 12px;
  --t-eyebrow: 11px;

  /* Tracking */
  --tr-display: -0.02em;
  --tr-tight:   -0.01em;
  --tr-normal:   0;
  --tr-eyebrow:  0.22em;
  --tr-mono:     0.04em;

  /* Leading */
  --lh-display: 0.98;
  --lh-tight: 1.12;
  --lh-snug:  1.3;
  --lh-body:  1.55;
  --lh-loose: 1.7;

  /* Spacing */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  56px;
  --s-10: 72px;
  --s-11: 96px;
  --s-12: 128px;
  --s-13: 160px;

  /* Radii */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-4: 12px;
  --r-5: 16px;
  --r-pill: 999px;

  /* Elevation */
  --shadow-1: 0 1px 0 rgba(0,0,0,0.4), 0 0 0 1px var(--line-2);
  --shadow-2: 0 6px 24px -8px rgba(0,0,0,0.55), 0 0 0 1px var(--line-2);
  --shadow-3: 0 18px 48px -16px rgba(0,0,0,0.7), 0 0 0 1px var(--line-2);
  --glow-accent: 0 0 0 1px var(--line-accent), 0 0 32px -8px var(--cyan-glow);
  --inset-line-top: inset 0 1px 0 rgba(255,255,255,0.04);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0.05, 0.3, 0.95);
  --ease-precise: cubic-bezier(0.32, 0.72, 0, 1);
  --t-fast: 120ms;
  --t-med: 220ms;
  --t-slow: 420ms;

  /* Layout */
  --container-max: 1280px;
  --container-pad: clamp(20px, 4vw, 64px);
  --grid-gutter: 24px;
  --grid-cols: 12;
}

/* Base */
html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: var(--w-regular);
  letter-spacing: var(--tr-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.display-xl, .display-l, .display-m {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  color: var(--fg-1);
  letter-spacing: var(--tr-display);
  line-height: var(--lh-tight);
  margin: 0;
}

.display-xl { font-size: var(--t-display-xl); line-height: var(--lh-display); font-weight: var(--w-light); }
.display-l  { font-size: var(--t-display-l);  line-height: var(--lh-display); font-weight: var(--w-light); }
.display-m  { font-size: var(--t-display-m);  line-height: var(--lh-tight);   font-weight: var(--w-regular); }

h1 { font-size: var(--t-h1); font-weight: var(--w-regular); }
h2 { font-size: var(--t-h2); font-weight: var(--w-medium); }
h3 { font-size: var(--t-h3); font-weight: var(--w-medium); letter-spacing: var(--tr-tight); }
h4 { font-size: var(--t-h4); font-weight: var(--w-semibold); letter-spacing: var(--tr-tight); }
h5 { font-size: var(--t-h5); font-weight: var(--w-semibold); }

p { margin: 0 0 var(--s-4); color: var(--fg-2); }
p.lead { font-size: var(--t-body-l); color: var(--fg-1); }

small, .caption { font-size: var(--t-caption); color: var(--fg-3); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-semibold);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--cyan-400);
}

code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: var(--tr-mono);
  color: var(--fg-2);
}

a {
  color: var(--cyan-400);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
a:hover { border-bottom-color: var(--cyan-400); }

hr {
  border: 0;
  height: 1px;
  background: var(--line-2);
  margin: var(--s-7) 0;
}

::selection { background: var(--cyan-400); color: var(--color-accent-ink); }

/* =============================================================
   Landing Page Shell
   ============================================================= */

/* Density */
:root[data-density="compact"]{
  --section-pad-y: clamp(48px, 6vw, 80px);
  --block-gap: 24px;
  --card-pad: 20px;
}
:root[data-density="airy"]{
  --section-pad-y: clamp(96px, 12vw, 160px);
  --block-gap: 48px;
  --card-pad: 32px;
}
:root{
  --section-pad-y: clamp(72px, 8vw, 112px);
  --block-gap: 32px;
  --card-pad: 24px;
}

/* Accent overrides */
:root[data-accent="cyan"]{
  --accent-1: #27E0FB;
  --accent-2: #06B8D4;
  --accent-glow: rgba(39,224,251,.18);
  --accent-ink: #001A20;
  --accent-grad: linear-gradient(135deg, #27E0FB 0%, #06B8D4 100%);
}
:root[data-accent="teal"]{
  --accent-1: #27E0FB;
  --accent-2: #008F94;
  --accent-glow: rgba(0,180,180,.22);
  --accent-ink: #001A20;
  --accent-grad: linear-gradient(135deg, #5CF3FF 0%, #0CC3C7 45%, #007C8A 100%);
}
:root[data-accent="sfv"]{
  --accent-1: #2C57B5;
  --accent-2: #1B3A8C;
  --accent-glow: rgba(44,87,181,.28);
  --accent-ink: #F5F5F2;
  --accent-grad: linear-gradient(135deg, #4A7AD9 0%, #2C57B5 50%, #1B3A8C 100%);
}
:root{
  --accent-1: #27E0FB;
  --accent-2: #06B8D4;
  --accent-glow: rgba(39,224,251,.18);
  --accent-ink: #001A20;
  --accent-grad: linear-gradient(135deg, #27E0FB 0%, #06B8D4 100%);
}

/* Page reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body{ background: var(--bg-1); color: var(--fg-1); overflow-x: hidden; }
img{ display:block; max-width:100%; }
button{ font: inherit; cursor: pointer; }

/* Container */
.container{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  width: 100%;
}

/* Section */
section.sec{
  padding: var(--section-pad-y) 0;
  position: relative;
}

/* Eyebrow */
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-semibold);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--accent-1);
  margin: 0;
}
.eyebrow::before{
  content:"";
  width: 24px; height: 1px;
  background: var(--accent-1);
  display:inline-block;
}
.eyebrow.no-rule::before{ display:none; }

/* Display headings */
.h-display{
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(44px, 6vw, 96px);
  line-height: .98;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--fg-1);
  text-wrap: balance;
}
.h-display .em{ color: var(--accent-1); font-weight: 400; }
.h-section{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--fg-1);
  text-wrap: balance;
}
.h-section .em{ color: var(--accent-1); font-weight: 500; }
.h-card{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--fg-1);
}

p.lead{
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.5;
  color: var(--fg-2);
  max-width: 56ch;
  margin: 0;
}

/* Hairline */
.hairline{ height:1px; background: var(--line-2); width:100%; }

/* Buttons */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--r-3);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0;
  border: 1px solid transparent;
  transition: transform var(--t-fast) var(--ease-precise),
              background var(--t-med) var(--ease-precise),
              border-color var(--t-med) var(--ease-precise),
              color var(--t-med) var(--ease-precise),
              box-shadow var(--t-med) var(--ease-precise);
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary{
  background: var(--accent-1);
  color: var(--accent-ink);
  box-shadow: 0 0 0 1px var(--accent-1), 0 0 32px -8px var(--accent-glow);
  position: relative;
  overflow: hidden;
}
.btn-primary:hover{
  background: var(--accent-2);
  box-shadow: 0 0 0 1px var(--accent-2), 0 0 48px -6px var(--accent-glow);
}
.btn-ghost{
  background: transparent;
  color: var(--fg-1);
  border-color: var(--line-3);
}
.btn-ghost:hover{
  background: var(--bg-2);
  border-color: var(--fg-3);
}
.btn-arrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-1);
  font-weight: 600;
  font-size: 14px;
  background: none;
  border: 0;
  padding: 0;
  transition: gap var(--t-med) var(--ease-precise);
}
.btn-arrow:hover{ gap: 12px; }

/* CTA ball-roll-in */
.btn-primary::before{
  content: "";
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #e0e0e0 55%, #888 100%);
  box-shadow: 0 1px 0 rgba(0,0,0,0.2);
  opacity: 0;
  transform: scale(0.3) rotate(0deg);
  transition: opacity 220ms var(--ease-precise),
              transform 480ms var(--ease-precise);
  flex-shrink: 0;
}
.btn-primary:hover::before{
  opacity: 1;
  transform: scale(1) rotate(720deg);
}

/* Card */
.card{
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-4);
  padding: var(--card-pad);
  transition: border-color var(--t-med) var(--ease-precise),
              background var(--t-med) var(--ease-precise),
              transform var(--t-med) var(--ease-precise);
}
.card:hover{
  border-color: var(--line-3);
  background: var(--bg-3);
}

/* Mono / data */
.mono{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--fg-3);
  text-transform: uppercase;
}

/* Pulse dot */
.live-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-1);
  box-shadow: 0 0 0 0 var(--accent-glow);
  animation: live-pulse 2s var(--ease-in-out) infinite;
  display: inline-block;
}
@keyframes live-pulse{
  0% { box-shadow: 0 0 0 0 var(--accent-glow); }
  70% { box-shadow: 0 0 0 12px rgba(39,224,251,0); }
  100% { box-shadow: 0 0 0 0 rgba(39,224,251,0); }
}

/* Schematic crosshair */
.crosshair{
  position: absolute;
  width: 12px; height: 12px;
  border: 1px solid var(--accent-1);
  opacity: .6;
  pointer-events: none;
}
.crosshair.tl{ top:-6px; left:-6px; border-right:0; border-bottom:0; }
.crosshair.tr{ top:-6px; right:-6px; border-left:0; border-bottom:0; }
.crosshair.bl{ bottom:-6px; left:-6px; border-right:0; border-top:0; }
.crosshair.br{ bottom:-6px; right:-6px; border-left:0; border-top:0; }

/* Flutlicht lamp flicker */
@keyframes lamp-flicker {
  0%, 92%, 100% { opacity: 1; }
  93%   { opacity: 0.85; }
  94%   { opacity: 1; }
  96%   { opacity: 0.92; }
  97%   { opacity: 1; }
}

/* Trikot / Jersey number */
.trikot{
  font-family: "Oswald", "Raleway", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.85;
  font-variant-numeric: tabular-nums;
  color: var(--accent-1);
  -webkit-text-stroke: 1px var(--accent-1);
  text-stroke: 1px var(--accent-1);
}
.trikot-ghost{
  font-family: "Oswald", "Raleway", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.85;
  font-variant-numeric: tabular-nums;
  color: transparent;
  -webkit-text-stroke: 1px var(--fg-4);
  text-stroke: 1px var(--fg-4);
}

/* Reveal animation */
.reveal{ opacity: 0; transform: translateY(8px); transition: opacity .7s var(--ease-precise), transform .7s var(--ease-precise); }
.reveal.in{ opacity: 1; transform: translateY(0); }

/* Form controls */
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--fg-3);
  text-transform: uppercase;
  font-weight: 600;
}
.field input, .field select, .field textarea{
  font: inherit;
  font-family: var(--font-body);
  font-size: 15px;
  padding: 12px 14px;
  background: var(--bg-3);
  color: var(--fg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  transition: border-color var(--t-fast) var(--ease-precise), box-shadow var(--t-fast) var(--ease-precise);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline: none;
  border-color: var(--accent-1);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.field input::placeholder, .field textarea::placeholder{ color: var(--fg-4); }
.field textarea{ resize: vertical; min-height: 100px; line-height: 1.5; }

/* Scroll */
html{ scroll-behavior: smooth; }
:focus-visible{ outline: 2px solid var(--accent-1); outline-offset: 2px; }
::selection{ background: var(--accent-1); color: var(--accent-ink); }

/* =============================================================
   Mobile-First Responsive
   ============================================================= */

/* ---- Nav: hamburger shown only on mobile ---- */
.nav-hamburger{ display: none; }

@media (max-width: 767px){
  .nav-links{ display: none !important; }
  .nav-cta{ display: none !important; }
  .nav-vereinsabende{ display: none !important; }
  .nav-hamburger{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    background: none;
    border: 1px solid var(--line-2);
    border-radius: var(--r-3);
    cursor: pointer;
    color: var(--fg-1);
    flex-shrink: 0;
  }
  .nav-mobile-menu{
    position: fixed;
    top: 64px; left: 0; right: 0; bottom: 0;
    background: rgba(20,20,19,0.97);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    z-index: 48;
    display: flex;
    flex-direction: column;
    padding: 24px 24px 40px;
    transform: translateX(100%);
    transition: transform 260ms cubic-bezier(0.4,0,0.2,1);
    overflow-y: auto;
  }
  .nav-mobile-menu.open{
    transform: translateX(0);
  }
  .nav-mobile-link{
    display: block;
    padding: 18px 0;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 500;
    color: var(--fg-1);
    text-decoration: none;
    border-bottom: 1px solid var(--line-2);
    letter-spacing: -0.01em;
  }
  .nav-mobile-cta{
    margin-top: 28px;
    width: 100%;
    justify-content: center;
  }
}
@media (min-width: 768px){
  .nav-mobile-menu{ display: none !important; }
}

/* ---- Hero CTA buttons: full-width stack on mobile ---- */
@media (max-width: 640px){
  .hero-btns{
    flex-direction: column !important;
  }
  .hero-btns .btn{
    width: 100%;
    justify-content: center;
  }
}

/* ---- Type scale: tighter min on very small screens ---- */
@media (max-width: 480px){
  .h-display{
    font-size: clamp(28px, 8vw, 44px) !important;
  }
}

/* ---- Form grids: single column on mobile ---- */
@media (max-width: 600px){
  .form-row-2{
    grid-template-columns: 1fr !important;
  }
  .form-row-persons{
    grid-template-columns: 1fr !important;
  }
}

/* ---- Buttons: allow text wrap on very narrow screens ---- */
@media (max-width: 400px){
  .btn{
    white-space: normal;
  }
}