/* =====================================================================
   Reitverein Bad Windsheim – Design-Tokens
   Farben stammen direkt aus dem Vereinslogo (Grün + Gold).
   Alle Werte hier zentral änderbar.
   ===================================================================== */

/* --- Schriften -------------------------------------------------------
   IBM Plex Serif: bitte die OFL-lizenzierten Schriftdateien nach
   /assets/fonts/ legen (siehe assets/fonts/README.txt). Solange keine
   Datei vorhanden ist, greift automatisch die Serif-Rückfallebene.
   „Playlist Script" (Canva) ist nicht als Webfont lizenziert und wird
   NICHT eingebunden; als dekorativer Platzhalter dient eine Script-
   Rückfallebene, nur für sehr kurze Akzente.
--------------------------------------------------------------------- */
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('IBM Plex Serif'),
       url('../fonts/IBMPlexSerif-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('IBM Plex Serif SemiBold'),
       url('../fonts/IBMPlexSerif-SemiBold.woff2') format('woff2');
}

:root {
  /* Markenfarben (aus Logo extrahiert) */
  --green-900: #12332e;
  --green-800: #1d4d48;   /* Logo-Hintergrund */
  --green-700: #266058;
  --green-600: #35766c;
  --gold:      #f2ce4b;   /* UI-Akzent (etwas kräftiger für Kontrast) */
  --gold-soft: #ffde59;   /* Logo-Gold, sparsam einsetzen */
  --gold-deep: #c99b1f;   /* goldener Text auf hellem Grund */

  /* Neutrale Töne */
  --cream:  #f7f4ec;
  --sand:   #ece5d6;
  --sand-2: #e0d8c6;
  --white:  #ffffff;
  --ink:    #21302c;
  --muted:  #5d6a64;

  /* Statusfarben (immer zusätzlich mit Text/Symbol kennzeichnen) */
  --ok:      #2f7d5b;
  --ok-bg:   #e3f1e9;
  --warn:    #b4651a;
  --warn-bg: #f7ead6;
  --danger:  #b23b34;
  --danger-bg:#f7e2e0;
  --info-bg: #e6eeed;

  /* Typografie */
  --font-serif: 'IBM Plex Serif', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --font-sans:  system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-script: 'Segoe Script', 'Brush Script MT', 'Comic Sans MS', cursive; /* Platzhalter */

  /* Maße */
  --radius:    10px;
  --radius-sm: 7px;
  --shadow:    0 1px 2px rgba(18,51,46,.06), 0 6px 20px rgba(18,51,46,.06);
  --shadow-sm: 0 1px 2px rgba(18,51,46,.08);
  --maxw:      1120px;
  --gap:       clamp(1rem, 2.5vw, 2rem);

  --header-h: 74px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  font-size: 17px;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--green-700); }
a:hover { color: var(--green-800); }

h1, h2, h3 { font-family: var(--font-serif); font-weight: 600; line-height: 1.15; color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}