/* =====================================================================
   Design «Kraftvoll» - der Sportverein
   ---------------------------------------------------------------------
   Die ganze Seite steht auf der dunklen Vereinsfarbe, nicht nur der
   Hero. Titel in einer schmalen Versalschrift, Karten mit Akzentkante,
   Kennzahlen als breites Band. Das ist das lauteste der fuenf Designs
   und gedacht fuer Vereine, die Wettkampf nach aussen tragen.

   Weil die Flaechen paarweise definiert sind, dreht sich mit dem Grund
   automatisch jede Schrift darauf mit - Karten, Tabellen, Formulare,
   Fuss. Genau daran ist die erste Fassung gescheitert
   (tests/flaechen_test.php).

   Schrift: Anton fuer Titel, Barlow fuer den Text.
   ===================================================================== */

@font-face { font-family: "Anton"; src: url("../../fonts/anton-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../../fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../../fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

[data-thema="kraftvoll"] {
  --thema-name: "Kraftvoll";
  --tcz-font-head: "Anton", "Oswald", Impact, sans-serif;
  --tcz-font-body: "Barlow", system-ui, sans-serif;

  --tcz-radius-sm: 0; --tcz-radius-md: 2px; --tcz-radius-lg: 2px; --tcz-radius-pill: 2px;
  --tcz-shadow-card: none; --tcz-shadow-soft: none; --tcz-shadow-btn: none;

  --tcz-size-3xl: 4.5rem;
  --tcz-size-2xl: 3rem;
  --tcz-size-xl: 2rem;
  --tcz-lh-tight: 0.98;
  --tcz-section-y: 84px;

  /* Die Seite selbst wird dunkel - alles Weitere folgt paarweise. */
  --flaeche-seite:   var(--tcz-navy-dark);
  --auf-seite:       var(--tcz-on-dark);
  --titel-seite:     var(--tcz-white);
  --auf-seite-leise: var(--tcz-on-dark-muted);
  --linie-seite:     var(--tcz-on-dark-line);
  --akzent-seite:    var(--tcz-lime-on-dark);
  --link-seite:      var(--tcz-lime-on-dark);

  --flaeche-karte:   var(--tcz-navy);
  --auf-karte:       var(--tcz-on-dark);
  --titel-karte:     var(--tcz-white);
  --auf-karte-leise: var(--tcz-on-dark-muted);
  --linie-karte:     var(--tcz-on-dark-line);
  --akzent-karte:    var(--tcz-lime-on-dark);
  --link-karte:      var(--tcz-lime-on-dark);

  --flaeche-ruhig:   var(--tcz-navy);
  --auf-ruhig:       var(--tcz-on-dark);
  --titel-ruhig:     var(--tcz-white);
  --auf-ruhig-leise: var(--tcz-on-dark-muted);
  --linie-ruhig:     var(--tcz-on-dark-line);
  --akzent-ruhig:    var(--tcz-lime-on-dark);
  --link-ruhig:      var(--tcz-lime-on-dark);

  --flaeche-stark:   var(--tcz-navy-dark);
  --auf-stark:       var(--tcz-on-dark);
  --titel-stark:     var(--tcz-white);
  --auf-stark-leise: var(--tcz-on-dark-muted);
  --linie-stark:     var(--tcz-on-dark-line);
  --akzent-stark:    var(--tcz-lime-on-dark);
  --link-stark:      var(--tcz-lime-on-dark);

  --flaeche-kopf:    var(--tcz-navy-dark);
  --auf-kopf:        var(--tcz-white);
  --titel-kopf:      var(--tcz-white);
  --auf-kopf-leise:  var(--tcz-on-dark-muted);
  --linie-kopf:      var(--tcz-on-dark-line);
  --akzent-kopf:     var(--tcz-lime-on-dark);
  --link-kopf:       var(--tcz-white);

  --flaeche-hero:
    radial-gradient(1100px 520px at 70% -10%, rgba(var(--tcz-lime-rgb), .20), transparent 60%),
    linear-gradient(160deg, var(--tcz-navy), var(--tcz-navy-dark) 70%);
  --auf-hero:        var(--tcz-on-dark);
  --titel-hero:      var(--tcz-white);
  --auf-hero-leise:  var(--tcz-on-dark-muted);
  --linie-hero:      var(--tcz-on-dark-line);
  --akzent-hero:     var(--tcz-lime-on-dark);
  --link-hero:       var(--tcz-lime-on-dark);
}

[data-thema="kraftvoll"] h1,
[data-thema="kraftvoll"] h2,
[data-thema="kraftvoll"] h3 {
  text-transform: uppercase;
  letter-spacing: .01em;
  font-weight: 400;
}

/* --- Kopf: dunkel, Versalien, Akzentkante --------------------------- */
[data-thema="kraftvoll"] .header { border-bottom: 2px solid var(--akzent-hier); backdrop-filter: none; }
[data-thema="kraftvoll"] .nav a {
  border-radius: 0;
  text-transform: uppercase;
  font-size: var(--tcz-size-xs);
  font-weight: 600;
  letter-spacing: .08em;
}
[data-thema="kraftvoll"] .nav a:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
[data-thema="kraftvoll"] .nav a.is-active { color: var(--akzent-hier); background: none; }
[data-thema="kraftvoll"] .logo__text { text-transform: uppercase; letter-spacing: .04em; }

/* --- Hero: hoch, riesiger Titel, Kennzahlen als Band ----------------- */
[data-thema="kraftvoll"] .hero { padding-block: calc(var(--tcz-section-y) + var(--tcz-space-8)) 0; }
[data-thema="kraftvoll"] .hero__inner { max-width: 900px; }
[data-thema="kraftvoll"] .hero h1 { text-wrap: balance; }
[data-thema="kraftvoll"] .hero__meta {
  gap: 0;
  margin-top: var(--tcz-space-8);
  margin-inline: calc(var(--tcz-space-5) * -1);
  padding: 0;
  border-top: 2px solid var(--akzent-hier);
  border-bottom: 0;
}
[data-thema="kraftvoll"] .hero__meta div { padding: var(--tcz-space-5); }

@media (min-width: 760px) {
  [data-thema="kraftvoll"] .hero__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
  [data-thema="kraftvoll"] .hero__meta div { border-right: 1px solid var(--linie-hier); }
}
[data-thema="kraftvoll"] .hero__meta dt { letter-spacing: .14em; }
[data-thema="kraftvoll"] .hero__meta dd { font-size: var(--tcz-size-xl); }

/* --- Abschnitte: Titel mit Akzentbalken davor ------------------------ */
[data-thema="kraftvoll"] .section__head h2 {
  border-left: 6px solid var(--akzent-hier);
  padding-left: var(--tcz-space-4);
}
[data-thema="kraftvoll"] .eyebrow {
  background: var(--akzent-hier);
  color: var(--tcz-on-lime-dark);
  border-radius: 0;
  padding: var(--tcz-space-1) var(--tcz-space-3);
  font-weight: 600;
}

/* --- Karten: Akzentkante links, Versaltitel -------------------------- */
[data-thema="kraftvoll"] .card {
  border: 0;
  border-left: 4px solid var(--akzent-hier);
}
[data-thema="kraftvoll"] .card:hover { background: color-mix(in srgb, var(--akzent-hier) 10%, var(--flaeche-karte)); }
[data-thema="kraftvoll"] .card__body h3 { font-size: var(--tcz-size-lg); }

/* --- Tabellen: dunkel mit Zebra -------------------------------------- */
[data-thema="kraftvoll"] .table__wrap { padding: 0; border: 1px solid var(--linie-hier); }
[data-thema="kraftvoll"] .table th { border-bottom: 2px solid var(--akzent-hier); letter-spacing: .1em; }
[data-thema="kraftvoll"] .table tbody tr:nth-child(odd) { background: color-mix(in srgb, currentColor 5%, transparent); }
[data-thema="kraftvoll"] .table td { border-bottom: 0; }
[data-thema="kraftvoll"] .table .amount { font-family: var(--tcz-font-head); letter-spacing: .02em; }

[data-thema="kraftvoll"] .btn {
  border-radius: 0;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .08em;
}
[data-thema="kraftvoll"] .btn--primary { box-shadow: none; }

[data-thema="kraftvoll"] .footer { border-top: 2px solid var(--akzent-hier); }

/* --- Titelbereich als Plakat ------------------------------------------
   Der Hero fuellt fast den ganzen ersten Bildschirm, der Titel sitzt
   unten - wie ein Plakat am Clubhaus. Das Kennzahlenband schliesst
   buendig ab und traegt die Farbe als Kante.                            */
@media (min-width: 900px) {
  [data-thema="kraftvoll"] .hero {
    min-height: 82vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  [data-thema="kraftvoll"] .hero h1 { font-size: clamp(3.5rem, 6.5vw, 6rem); }
}