/* ============================================================
   FACELIFT – das produktive Design der Seite (gewählt am 06.08.2026).
   Geladen, wenn params.facelift = true in hugo.toml steht; die
   Bedingung dafür steht in layouts/_default/baseof.html. Das frühere
   Prototypen-Overlay hugo.facelift.toml gibt es nicht mehr.
   Lädt nach custom.css und verfeinert gezielt:
   Typografie, Header, Buttons, Karten, Tabellen, Footer.
   ============================================================ */

:root {
  --fl-green: #1a4731;
  --fl-green-dark: #123522;
  --fl-lime: #a3e635;
  --fl-ink: #1f2c24;
  --fl-bg: #fafcfa;
  --fl-line: rgba(26, 71, 49, 0.12);
  --fl-radius: 18px;
  --fl-shadow-sm: 0 1px 3px rgba(20, 48, 31, 0.08);
  --fl-shadow-lg: 0 18px 44px rgba(20, 48, 31, 0.16);
}

/* ── Basis ─────────────────────────────────────────────── */
body {
  background: var(--fl-bg);
  color: var(--fl-ink);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--fl-lime); color: var(--fl-green-dark); }

h1, h2, h3, h4, h5 {
  letter-spacing: -0.02em;
  color: var(--fl-green-dark);
}
/* Dunkles Gegenstueck. custom.css faerbt im Dark Mode nur .intro h1 und
   .content h2 um - Ueberschriften ausserhalb dieser beiden Behaelter
   blieben auf dem dunklen Vereinsgruen stehen und standen bei 1,2:1 auf
   dem dunklen Grund. Betroffen war zum Beispiel die Kontaktseite, deren
   h2 direkt in der Spalte liegen und nicht in .content.

   Bewusst hier und nicht weiter unten: die Hero-Sektionen weiter unten
   setzen ihre Ueberschriften auf Weiss und haben dieselbe Spezifitaet -
   sie muessen gewinnen, also muss diese Regel vorher stehen. */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: #7dd9a5;
}

/* Ausnahme: die Saisonbilanz steht auf dunkelgruenem Grund und hatte
   schon weisse Ueberschriften. custom.css setzt das mit derselben
   Spezifitaet, laedt aber frueher - ohne diese Zeile wuerde die Regel
   oben sie ueberstimmen. */
[data-theme="dark"] .saison-widget h2 { color: #fff; }

a { transition: color 0.15s ease; }

#scroll-progress {
  background: linear-gradient(90deg, var(--fl-green), var(--fl-lime));
  height: 3px;
}

/* ── Header: Glas-Effekt ───────────────────────────────── */
.header {
  background: rgba(250, 252, 250, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--fl-line);
  box-shadow: none;
}
.main-menu ul li a {
  font-weight: 600;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 0.95rem;
  white-space: nowrap;   /* verhindert Umbruch in Menüpunkten ("Über uns") */
  transition: background 0.15s ease, color 0.15s ease;
}
.main-menu ul li a:hover {
  background: rgba(26, 71, 49, 0.08);
  text-decoration: none;
}
/* Aktiver Menüpunkt: heller grüner Pill mit dunkelgrünem Text.
   !important nötig, weil custom.css die Farbe ebenfalls mit
   !important setzt (facelift.css lädt später und gewinnt so). */
.main-menu ul li.active > a {
  background: rgba(26, 71, 49, 0.12);
  color: var(--fl-green-dark) !important;
}
/* Unterstrich aus custom.css entfernen – der Pill ersetzt ihn */
.main-menu ul li.active > a::after { display: none; }

/* ── Buttons ───────────────────────────────────────────── */
/* Das Theme zentriert die Beschriftung ueber height:40px + line-height:40px.
   Die Polsterung hier kommt bei border-box innen obendrauf: vom 40px hohen
   Kasten bleiben nach 2x13px Polsterung 14px Inhalt, die 40px hohe Zeile
   ragt darueber hinaus nach unten - die Schrift sass in JEDEM Button am
   unteren Rand. Deshalb Hoehe und Zeilenhoehe zuruecknehmen und stattdessen
   per Flexbox zentrieren. */
.button, .button-primary, button.button {
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 13px 28px;
  height: auto;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: var(--fl-shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.button:hover, .button-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(20, 48, 31, 0.22);
}

/* ── Intro / Hero ──────────────────────────────────────── */
.intro { padding-top: 3.5rem; }
.intro h1 {
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  line-height: 1.05;
}
.intro p { font-size: 1.08rem; color: #3d4a41; }

.intro-image-figure img,
.intro-image {
  border-radius: 24px;
  box-shadow: var(--fl-shadow-lg);
}

/* ── News-Karten ───────────────────────────────────────── */
.news-card {
  border-radius: var(--fl-radius);
  border: 1px solid var(--fl-line);
  box-shadow: var(--fl-shadow-sm);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.news-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--fl-shadow-lg);
}
.news-card-date {
  color: var(--fl-green);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
}
.year-tab {
  border-radius: 999px;
  border: 1px solid var(--fl-line);
  padding: 6px 16px;
  font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease;
}
.year-tab:hover { background: rgba(26, 71, 49, 0.08); text-decoration: none; }
.year-tab.active { background: var(--fl-green); color: #fff; border-color: var(--fl-green); }

/* ── Tabellen ──────────────────────────────────────────── */
.ewige-tabelle-scroll {
  border-radius: var(--fl-radius);
  border: 1px solid var(--fl-line);
  box-shadow: var(--fl-shadow-sm);
  background: #fff;
}
.ewige-tabelle thead th {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  /* Der Kopf ist dunkelgruen (custom.css) - Grau stand dort bei 1,9:1 */
  color: #fff;
}
.ewige-tabelle tbody tr { transition: background 0.12s ease; }
.ewige-tabelle tbody tr:hover { background: rgba(26, 71, 49, 0.05); }
.row-sek {
  background: rgba(163, 230, 53, 0.14) !important;
  box-shadow: inset 3px 0 0 var(--fl-green);
}
.sek-filter-btn {
  border-radius: 999px;
  font-weight: 700;
  transition: background 0.15s ease, color 0.15s ease;
}

/* Podium-Karten */
.podium-card {
  border-radius: var(--fl-radius);
  border: 1px solid var(--fl-line);
  box-shadow: var(--fl-shadow-sm);
  transition: transform 0.15s ease;
}
.podium-card:hover { transform: translateY(-3px); }

/* ── Countdown-Widget ──────────────────────────────────── */
.countdown-widget { border-radius: 0; }
.countdown-box {
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.countdown-timer { font-variant-numeric: tabular-nums; }

/* ── Inhaltsbilder & Galerie ───────────────────────────── */
.content img { border-radius: 14px; }
.galerie-grid a {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--fl-shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.galerie-grid a:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: var(--fl-shadow-lg);
}

/* ── Strips / Sektionen ────────────────────────────────── */
.strip-grey {
  background: linear-gradient(180deg, #f2f7f2 0%, #eaf3ec 100%);
}

/* ── Footer ────────────────────────────────────────────── */
.footer {
  background: linear-gradient(160deg, var(--fl-green-dark) 0%, var(--fl-green) 100%);
  color: rgba(255, 255, 255, 0.85);
}
.footer a { color: #fff; }
.footer h3, .footer h4 { color: #fff; }
.sub-footer {
  background: var(--fl-green-dark);
  color: rgba(255, 255, 255, 0.6);
}
.sub-footer a { color: rgba(255, 255, 255, 0.85); }

/* ── Dunkle Hero-Banner: Textkontrast sicherstellen ─────
   Die Sektions-Layouts (Klassiker, Chronik, Lieder, Statistiken,
   Suche, Über-uns) rendern {{ .Content }} in dunkelgrüne Banner.
   Das Theme färbt <p> aber grau ($grey) – auf Grün unlesbar. */
.klassiker-hero p, .klassiker-hero .lede p,
.chronik-hero p,
.lieder-hero p, .lieder-hero-text p,
.stats-hero p,
.suche-hero p,
.ueber-hero p {
  color: rgba(255, 255, 255, 0.92);
}
.klassiker-hero h1, .chronik-hero h1, .lieder-hero h1,
.stats-hero h1, .suche-hero h1, .ueber-hero h1 {
  color: #fff;
}
.klassiker-hero a, .chronik-hero a, .lieder-hero a,
.stats-hero a, .suche-hero a, .ueber-hero a {
  color: #d9f99d;
}

/* ── Fokus & Feinschliff ───────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--fl-green);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Dark Mode ─────────────────────────────────────────────
   facelift.css laedt NACH custom.css und ueberschreibt sonst
   dessen [data-theme="dark"]-Regeln. Alles, was hier oben eine
   helle Farbe hart setzt, braucht darum ein dunkles Gegenstueck. */

/* Aktiver Menuepunkt: gleiche Spezifitaet wie custom.css (0,2,3),
   facelift gewinnt per Quellreihenfolge -> dunkelgruener Text
   landete auf dem dunklen Header. Hier zurueckdrehen. */
[data-theme="dark"] .main-menu ul li.active > a {
  background: rgba(255, 255, 255, 0.10);
  color: #dde8e2 !important;
}
[data-theme="dark"] .main-menu ul li a:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Tabellen-Container: oben steht background:#fff. Die ungeraden
   Zeilen haben keinen eigenen Hintergrund und lagen damit als
   heller Text auf Weiss. */
[data-theme="dark"] .ewige-tabelle-scroll {
  background: #161616;
  border-color: #2a2a2a;
}
[data-theme="dark"] .ewige-tabelle thead th {
  color: #9bb0a3;
}

/* Der Akzentbalken der SEK-Zeilen ist dunkelgruen auf dunkelgruen -
   im Dark Mode auf Lime wechseln, sonst sieht man ihn nicht. */
[data-theme="dark"] .row-sek {
  box-shadow: inset 3px 0 0 var(--fl-lime);
}