/* =====================================================================
   140 Jahre FFW Hammerbrücke – gemeinsame Grundlagen
   Farben aus dem Logo, Schrift Open Sans (selbst gehostet, SIL OFL)
   ===================================================================== */

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/open-sans-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/open-sans-latin-italic.woff2") format("woff2");
}

:root {
  --rot: #c91f21;
  --rot-dunkel: #a3171a;
  --rot-hell: #fbe9e9;
  --anthrazit: #343233;
  --text: #343233;
  --text-leise: #6a6365;
  --himmel: #a9d2f2;
  --himmel-hell: #dcedfa;
  --creme: #fbf3e4;
  --papier: #fffdf8;
  --linie: #e7ded1;
  --gruen: #2f7d4f;
  --gruen-hell: #e6f3eb;

  --schrift: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --radius: 14px;
  --radius-klein: 8px;
  --schatten: 0 1px 2px rgb(52 50 51 / 6%), 0 8px 28px rgb(52 50 51 / 10%);
  --rand: clamp(16px, 4vw, 32px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--rot); text-underline-offset: 0.18em; }
a:hover { color: var(--rot-dunkel); }

h1, h2, h3 { line-height: 1.15; margin: 0 0 0.5em; font-weight: 800; letter-spacing: -0.01em; }

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

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Das schräge rote Band (Flyer-Element) ---------- */
.band-wrap { overflow: hidden; padding: 2.2em 0; margin: -1.2em 0; }
.band {
  background: var(--rot);
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-4.5deg);
  width: 112%;
  margin-left: -6%;
  padding: 0.35em 6% 0.45em;
  line-height: 1.05;
  box-shadow: 0 6px 18px rgb(201 31 33 / 25%);
}
.band__klein { display: block; font-weight: 400; font-size: 0.62em; letter-spacing: 0.01em; }
.band__gross { display: block; font-weight: 800; letter-spacing: 0.01em; }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font: inherit; font-weight: 700;
  padding: 0.8em 1.4em;
  border-radius: 999px;
  border: 2px solid var(--rot);
  background: var(--rot);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.knopf:hover { background: var(--rot-dunkel); border-color: var(--rot-dunkel); color: #fff; }
.knopf:active { transform: translateY(1px); }
.knopf--hell { background: transparent; color: var(--rot); }
.knopf--hell:hover { background: var(--rot-hell); color: var(--rot-dunkel); }
.knopf--weiss { background: #fff; color: var(--rot); border-color: #fff; }
.knopf--weiss:hover { background: var(--rot-hell); color: var(--rot-dunkel); border-color: var(--rot-hell); }