/* =====================================================================
   Schützenverein-Template — Design Tokens
   Zentrale Stelle für Farben, Typografie, Abstände.
   Für die Vollversion 1:1 übernehmbar.
   Farbwerte sind Entwurf und final gegen das Vereinswappen zu prüfen.
   ===================================================================== */

/* ---- Schriften (lokal, offline) ---- */
@font-face {
  font-family: "Libre Franklin";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/libre-franklin-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Libre Franklin";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("../assets/fonts/libre-franklin-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Libre Franklin";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("../assets/fonts/libre-franklin-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Libre Franklin";
  font-style: normal; font-weight: 800; font-display: swap;
  src: url("../assets/fonts/libre-franklin-latin-800-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/source-serif-4-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/source-serif-4-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("../assets/fonts/source-serif-4-latin-600-normal.woff2") format("woff2");
}

:root {
  /* =========================================================
     THEME / BRANDING — hier anpassen
     Standard: klassisches Schützen-Grün mit Gold-Akzent.
     Für ein eigenes Vereins-Design nur diese Werte ändern.
     ========================================================= */
  --green-900: #123D22;   /* dunkelste Fläche: Hero/Footer   */
  --green-800: #1A5233;
  --green-700: #1F6B3D;   /* Primärfarbe / Marke             */
  --green-600: #2E8450;
  --brass:     #C89B3C;   /* Akzent (Gold/Messing)           */
  --brass-600: #A67F27;   /* Akzent dunkler (Hover)          */
  --brass-100: #EFE3C4;   /* Akzent hell (Badges/Flächen)    */

  --paper:   #F4F2EA;     /* Seitengrund                     */
  --paper-2: #FBFAF4;     /* Karten                          */
  --line:    #E3DFD1;     /* Trennlinien auf Papier          */
  --line-dk: rgba(255,255,255,.14); /* Trennlinien auf Grün */

  --ink:    #16201A;      /* Fließtext */
  --ink-2:  #3A463D;
  --muted:  #667065;      /* sekundär */
  --on-dark:      #F1EFE6;
  --on-dark-mut:  #B7C4B7;

  /* ---- Typografie ---- */
  --font-display: "Libre Franklin", "Segoe UI", system-ui, sans-serif;
  --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;

  --step--1: clamp(.82rem, .8rem + .1vw, .9rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.12rem + .4vw, 1.42rem);
  --step-2:  clamp(1.5rem, 1.35rem + .75vw, 2rem);
  --step-3:  clamp(2rem, 1.7rem + 1.5vw, 3rem);
  --step-4:  clamp(2.7rem, 2.1rem + 3vw, 4.6rem);

  /* ---- Layout ---- */
  --wrap: 1160px;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --radius: 4px;
  --radius-lg: 10px;
  --shadow: 0 1px 2px rgba(16,50,32,.06), 0 8px 24px rgba(16,50,32,.07);
  --shadow-lg: 0 18px 50px rgba(16,50,32,.16);
  --ring: 0 0 0 3px var(--brass);

  /* =========================================================
     BYTEKONFORM — Demo-Balken (Anbieter-Branding)
     Nur für den Hinweisbalken über der Website.
     Beim Verkauf/Livegang: Balken in js/site.js entfernen.
     ========================================================= */
  --byk-bg: #000826;
  --byk-bg-alt: #050f34;
  --byk-surface: #0b1640;
  --byk-line: rgba(255,255,255,.10);
  --byk-ink: #f3f5fa;
  --byk-muted: #97a1c4;
  --byk-muted-dim: #5c6690;
  --byk-holo-1: #ff6ec7;
  --byk-holo-2: #7c6ff5;
  --byk-holo-3: #38bdf8;
  --byk-holo-4: #34eab0;
  --byk-holo-gradient: linear-gradient(120deg, var(--byk-holo-1), var(--byk-holo-2), var(--byk-holo-3), var(--byk-holo-4));
}