/* =====================================================================
   Design «Weich» - einladend
   ---------------------------------------------------------------------
   Nichts stoesst an: Der Grund ist getoent, jede Flaeche schwebt als
   runder Block darauf, die Kopfzeile liegt als Pille ueber der Seite.
   Viel Luft, grosse Zeilenabstaende, keine harten Kanten.

   Gedacht fuer Vereine, bei denen Zugehoerigkeit vor Wettkampf kommt -
   Breitensport, Familien, Junioren.

   Schrift: Quicksand fuer Titel (runde Endungen), Nunito Sans fuer den
   Text.
   ===================================================================== */

@font-face { font-family: "Quicksand"; src: url("../../fonts/quicksand-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("../../fonts/nunitosans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("../../fonts/nunitosans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

[data-thema="weich"] {
  --thema-name: "Weich";
  --tcz-font-head: "Quicksand", system-ui, sans-serif;
  --tcz-font-body: "Nunito Sans", system-ui, sans-serif;

  --tcz-radius-sm:   18px;
  --tcz-radius-md:   28px;
  --tcz-radius-lg:   40px;
  --tcz-radius-pill: 999px;

  --tcz-size-3xl: 3.2rem;
  --tcz-lh-tight: 1.12;
  --tcz-lh-base:  1.75;
  --tcz-section-y: 80px;
  --tcz-container: 1160px;

  /* Getoenter Grund, weisse Bloecke darauf. */
  --flaeche-seite:   var(--tcz-light);
  --auf-seite:       var(--tcz-text);
  --titel-seite:     var(--tcz-navy);
  --auf-seite-leise: var(--tcz-muted);
  --linie-seite:     var(--tcz-border);
  --akzent-seite:    var(--tcz-lime-text);
  --link-seite:      var(--tcz-navy);

  --flaeche-ruhig:   var(--tcz-accent-tint);
  --auf-ruhig:       var(--tcz-text);
  --titel-ruhig:     var(--tcz-navy);
  --auf-ruhig-leise: var(--tcz-muted);
  --linie-ruhig:     transparent;
  --akzent-ruhig:    var(--tcz-lime-text);
  --link-ruhig:      var(--tcz-navy);

  --flaeche-karte:   var(--tcz-white);
  --auf-karte:       var(--tcz-text);
  --titel-karte:     var(--tcz-navy);
  --auf-karte-leise: var(--tcz-muted);
  --linie-karte:     transparent;
  --akzent-karte:    var(--tcz-lime-text);
  --link-karte:      var(--tcz-navy);

  --flaeche-kopf:    var(--tcz-white);
  --auf-kopf:        var(--tcz-text);
  --titel-kopf:      var(--tcz-navy);
  --auf-kopf-leise:  var(--tcz-muted);
  --linie-kopf:      transparent;
  --akzent-kopf:     var(--tcz-lime-text);
  --link-kopf:       var(--tcz-navy);
}

[data-thema="weich"] h1,
[data-thema="weich"] h2,
[data-thema="weich"] h3 { font-weight: 700; letter-spacing: -0.02em; }

/* --- Kopf: schwebende Pille statt Leiste ----------------------------- */
[data-thema="weich"] .header {
  background: none;
  border-bottom: 0;
  backdrop-filter: none;
  padding-top: var(--tcz-space-4);
}
[data-thema="weich"] .header__inner {
  background: var(--flaeche-kopf);
  color: var(--auf-kopf);
  border-radius: var(--tcz-radius-pill);
  box-shadow: var(--tcz-shadow-card);
  padding-inline: var(--tcz-space-5);
  min-height: 68px;
}
[data-thema="weich"] .nav a { border-radius: var(--tcz-radius-pill); }
[data-thema="weich"] .nav a:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
[data-thema="weich"] .nav a.is-active { background: color-mix(in srgb, var(--akzent-hier) 18%, transparent); color: var(--akzent-hier); }

/* --- Hero: runder Block, der auf dem Grund liegt --------------------- */
[data-thema="weich"] .hero {
  margin: var(--tcz-space-4) var(--tcz-space-5) 0;
  border-radius: var(--tcz-radius-lg);
  overflow: hidden;
}
[data-thema="weich"] .hero__inner { max-width: 820px; }
[data-thema="weich"] .hero h1 { letter-spacing: -0.03em; }
[data-thema="weich"] .hero__meta { border-top: 1px solid var(--linie-hier); gap: var(--tcz-space-7); }

/* --- Abschnitte: getoente Bloecke mit Abstand vom Rand --------------- */
[data-thema="weich"] .section--alt,
[data-thema="weich"] .section--navy,
[data-thema="weich"] .meisterjahr {
  border-radius: var(--tcz-radius-lg);
  margin-inline: var(--tcz-space-5);
}
[data-thema="weich"] .section__head { max-width: 760px; }
[data-thema="weich"] .eyebrow { border-radius: var(--tcz-radius-pill); padding: var(--tcz-space-2) var(--tcz-space-4); }

/* --- Karten: gross, rund, ohne Rahmen -------------------------------- */
[data-thema="weich"] .cards { gap: var(--tcz-space-6); }
[data-thema="weich"] .card { box-shadow: var(--tcz-shadow-card); }
[data-thema="weich"] .card:hover { transform: translateY(-4px); transition: transform .2s ease; }
[data-thema="weich"] .card__body { padding: var(--tcz-space-6); }
[data-thema="weich"] .card__media { border-radius: var(--tcz-radius-md) var(--tcz-radius-md) 0 0; }

/* --- Tabellen: gerundeter Block, Zeilen ohne Gitter ------------------ */
[data-thema="weich"] .table__wrap {
  border: 0;
  border-radius: var(--tcz-radius-md);
  box-shadow: var(--tcz-shadow-soft);
  padding: var(--tcz-space-3);
}
[data-thema="weich"] .table th { border-bottom: 0; }
[data-thema="weich"] .table td { border-bottom: 0; }
[data-thema="weich"] .table tbody tr:nth-child(odd) { background: color-mix(in srgb, currentColor 4%, transparent); }
[data-thema="weich"] .table tbody td:first-child { border-radius: var(--tcz-radius-sm) 0 0 var(--tcz-radius-sm); }
[data-thema="weich"] .table tbody td:last-child { border-radius: 0 var(--tcz-radius-sm) var(--tcz-radius-sm) 0; }

[data-thema="weich"] .btn { border-radius: var(--tcz-radius-pill); font-weight: 700; }
[data-thema="weich"] .btn--primary { background: linear-gradient(135deg, var(--tcz-lime), var(--tcz-lime-dark)); }

[data-thema="weich"] .footer {
  border-radius: var(--tcz-radius-lg) var(--tcz-radius-lg) 0 0;
  margin-inline: var(--tcz-space-5);
}

/* --- Titelbereich auf der Mittelachse ---------------------------------
   «Weich» setzt den Hero mittig in seinen runden Block: Der Text sitzt
   in der Mitte, die Knoepfe darunter, die Kennzahlen als Reihe. Das
   wirkt wie eine Einladung, nicht wie eine Ansage.                      */
[data-thema="weich"] .hero__inner { margin-inline: auto; text-align: center; }
[data-thema="weich"] .hero .row { justify-content: center; }
[data-thema="weich"] .hero__meta { justify-content: center; text-align: center; }
[data-thema="weich"] .hero__meta div { min-width: 140px; }

/* Abschnittskoepfe mittig - die ganze Seite folgt derselben Achse. */
[data-thema="weich"] .section__head { margin-inline: auto; text-align: center; }
[data-thema="weich"] .section__head .eyebrow { display: inline-block; }