/* ============================================================
   Schützenclub Bründl — Design Tokens (Regeln: SCB Verein → Design-System)
   Verbindliche Corporate Identity (siehe Brand-Spec)
   ============================================================ */

:root {
  /* ---- Farbe ---- */
  --scb-red:        #C42119;   /* Primärrot, CTA, Notice, Akzente */
  --scb-red-dark:   #A01A14;   /* Hover / Active */
  --scb-red-bg:     rgba(196, 33, 25, 0.286); /* Untergrund-Tönung */
  --scb-text:       #353238;   /* Body-Text auf hell */
  --scb-text-soft:  #50575E;   /* Sekundär-Text */
  --scb-bg:         #FFFFFF;   /* Standard-Hintergrund */
  --scb-bg-soft:    #F6F6F6;   /* Sektion-Hintergrund */
  --scb-line:       #E2E4E7;   /* Trennlinien, Borders */
  --scb-dark:       #2A2A2E;   /* Dunkle Sektionen (Sponsoren/Footer) */
  --scb-dark-2:     #1F1F22;   /* Tiefere dunkle Fläche */
  --scb-on-dark:    #FFFFFF;   /* Text auf dunkel */
  --scb-on-dark-soft: #B4B4BA;

  /* ---- Typografie ---- */
  --scb-font-display: "Barlow Condensed", "Helvetica Neue", Arial, sans-serif;
  --scb-font-body:    "Barlow Semi Condensed", "Helvetica Neue", Arial, sans-serif;

  /* ---- Spacing-Skala (4px-Raster) ---- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-6: 24px;  --sp-8: 32px;  --sp-12: 48px; --sp-16: 64px;
  --sp-24: 96px; --sp-32: 128px;

  /* ---- Layout ---- */
  --scb-container: 1700px;
  --scb-pad-desktop: 24px;
  --scb-pad-mobile: 16px;
  --scb-section-y: clamp(40px, 6vw, 72px);

  /* ---- Radius (eckig) ---- */
  /* 0.11.8: einheitlich 0 px wie style.css (dort wirkte schon 0 px); Eingabefelder höchstens 2 px – Design-System. */
  --scb-radius: 0px;

  /* ---- Schatten (dezent) ---- */
  --scb-shadow-notice: 0 6px 20px rgba(0,0,0,0.18);
  --scb-shadow-card:   0 2px 14px rgba(53,50,56,0.10);
  --scb-shadow-box:    0 10px 40px rgba(0,0,0,0.22);

  /* ---- Focus-Ring (A11y) ---- */
  --scb-focus: 3px solid var(--scb-red);
}

/* ============================================================
   SEMANTISCHE THEME-TOKENS (Light = Standard)
   Seit 0.9.0 nur noch Light. Dark-Werte (OS-Einstellung bzw.
   [data-theme="dark"]) liegen in assets/dark.css (optional).
   ============================================================ */
:root,
[data-theme="light"] {
  --c-bg:          #FFFFFF;   /* Page-BG, reinweiß */
  --c-surface:     #FFFFFF;   /* Cards, Header — hebt sich per border ab */
  --c-surface-2:   #ECECEC;   /* Getönte Sektionen — deutlich grau (B-Bold-Spread) */
  --c-text:        #353238;
  --c-text-soft:   #50575E;
  --c-line:        #E2E4E7;
  --c-footer:      #1F1F22;   /* Footer bleibt dunkelgrau */
  --c-footer-2:    #2A2A2E;   /* Sponsoren-Streifen */
  --c-on-footer:   #FFFFFF;
  --c-on-footer-soft: #B4B4BA;
  --c-logo-invert: 0;         /* Logo schwarz auf hell */
  color-scheme: light;
}

/* Dark-Werte: seit 0.9.0 ausgelagert nach assets/dark.css – wird nur
   geladen, wenn SCB_THEME_DARK_MODE aktiv ist (Standard: aus = immer hell). */

/* ============================================================
   Basis-Typo (kann pro Komponente überschrieben werden)
   ============================================================ */
.scb {
  font-family: var(--scb-font-body);
  color: var(--c-text);
  background: var(--c-bg);
  font-size: 18px;
  line-height: 1.3;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .3s ease, color .3s ease;
}

.scb h1, .scb h2, .scb h3, .scb h4 {
  font-family: var(--scb-font-body);
  font-weight: 700;
  margin: 0;
  line-height: 1.1;
  color: var(--c-text);
}
.scb h1 { font-size: 42px; }
.scb h2 { font-size: 32px; letter-spacing: 2px; }
.scb h3 { font-size: 24px; }
.scb p  { margin: 0; }

/* Display (Barlow Condensed) */
.scb-display {
  font-family: var(--scb-font-display);
  font-weight: 700;
  line-height: 0.95;
}

@media (max-width: 576px) {
  .scb h1 { font-size: 32px; }
  .scb h2 { font-size: 24px; }
  .scb h3 { font-size: 20px; }
}

/* ============================================================
   Buttons — massiv, breit, eckig
   ============================================================ */
.scb-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--scb-font-body);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 16px 28px;
  border-radius: var(--scb-radius);
  border: 2px solid var(--scb-red);
  background: var(--scb-red);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
  line-height: 1;
  white-space: nowrap;
}
.scb-btn:hover { background: var(--scb-red-dark); border-color: var(--scb-red-dark); }
.scb-btn:active { transform: translateY(1px); }
.scb-btn:focus-visible { outline: var(--scb-focus); outline-offset: 3px; }

.scb-btn--outline {
  background: transparent;
  color: var(--scb-red);
}
.scb-btn--outline:hover { background: var(--scb-red); color: #fff; }

.scb-btn--ghost-light {
  background: transparent;
  border-color: #fff;
  color: #fff;
}
.scb-btn--ghost-light:hover { background: #fff; color: var(--scb-red); border-color:#fff; }

/* Link mit Chevron */
.scb-link {
  font-family: var(--scb-font-body);
  font-weight: 700;
  color: var(--scb-red);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 16px;
}
.scb-link:hover { color: var(--scb-red-dark); }

@keyframes scbspin { to { transform: rotate(360deg); } }