/* =====================================================================
   Design «Ruhig» - Schweizer Raster
   ---------------------------------------------------------------------
   Kein Schatten, keine Rundung, kein Verlauf. Stattdessen Linien,
   Raster und viel Weissraum. Der Hero ist hell statt farbig: Die Farbe
   des Vereins traegt hier die Details, nicht die Flaeche.

   Kopfzeile zweizeilig: oben der Verein, darunter die Navigation auf
   einer eigenen Linie - so wie eine Zeitung ihren Kopf setzt.
   Abschnitte sind nummeriert (01, 02, 03), gezaehlt von der Seite.

   Schrift: IBM Plex Sans, durchgehend. Eine Familie, drei Schnitte -
   das ist die ganze Typografie.
   ===================================================================== */

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

[data-thema="ruhig"] {
  --thema-name: "Ruhig";
  --tcz-font-head: "Plex Sans", system-ui, sans-serif;
  --tcz-font-body: "Plex Sans", system-ui, sans-serif;

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

  --tcz-size-3xl: 3.75rem;
  --tcz-size-2xl: 2.25rem;
  --tcz-lh-tight: 1.05;
  --tcz-lh-base: 1.65;
  --tcz-section-y: 96px;
  --tcz-container: 1240px;

  /* Heller Hero: Flaeche und Schrift darauf als Paar. */
  --flaeche-hero:    var(--flaeche-seite);
  --auf-hero:        var(--auf-seite);
  --titel-hero:      var(--tcz-navy);
  --auf-hero-leise:  var(--auf-seite-leise);
  --linie-hero:      var(--linie-seite);
  --akzent-hero:     var(--tcz-lime-text);
  --link-hero:       var(--tcz-navy);

  /* Karten ohne eigene Flaeche - sie stehen im Raster, nicht darauf. */
  --flaeche-karte:   var(--flaeche-seite);
  --auf-karte:       var(--auf-seite);
  --titel-karte:     var(--tcz-navy);
  --auf-karte-leise: var(--auf-seite-leise);
  --linie-karte:     var(--linie-seite);
  --akzent-karte:    var(--tcz-lime-text);
  --link-karte:      var(--tcz-navy);

  /* Fuss hell statt dunkel: Die Seite endet, sie schliesst nicht ab. */
  --flaeche-fuss:    var(--flaeche-ruhig);
  --auf-fuss:        var(--auf-seite);
  --titel-fuss:      var(--tcz-navy);
  --auf-fuss-leise:  var(--auf-seite-leise);
  --linie-fuss:      var(--linie-seite);
  --akzent-fuss:     var(--tcz-lime-text);
  --link-fuss:       var(--tcz-navy);
}

[data-thema="ruhig"] h1,
[data-thema="ruhig"] h2,
[data-thema="ruhig"] h3 { font-weight: 600; letter-spacing: -0.025em; }

/* --- Kopf: zwei Zeilen, ganze Breite, harte Linien ------------------- */
[data-thema="ruhig"] .header { backdrop-filter: none; border-bottom: 1px solid var(--linie-kopf); }
[data-thema="ruhig"] .header__inner {
  flex-wrap: wrap;
  align-items: stretch;
  min-height: 0;
  gap: 0;
  padding-block: 0;
}
[data-thema="ruhig"] .logo {
  flex: 1 1 100%;
  order: 1;
  padding-block: var(--tcz-space-5);
  border-bottom: 1px solid var(--linie-kopf);
}
[data-thema="ruhig"] .nav {
  order: 3;
  flex: 1 1 auto;
  gap: 0;
  padding-block: 0;
}
[data-thema="ruhig"] .suche { order: 4; align-self: center; }
[data-thema="ruhig"] .nav__toggle { order: 2; }
[data-thema="ruhig"] .nav a {
  border-radius: 0;
  padding: var(--tcz-space-4) var(--tcz-space-4);
  border-bottom: 2px solid transparent;
  font-size: var(--tcz-size-sm);
  letter-spacing: .01em;
}
[data-thema="ruhig"] .nav a:hover { background: none; border-bottom-color: var(--linie-hier); }
[data-thema="ruhig"] .nav a.is-active { background: none; border-bottom-color: var(--akzent-hier); color: var(--auf-kopf); }
[data-thema="ruhig"] .nav .btn--primary { margin-left: var(--tcz-space-4); align-self: center; }

/* --- Hero: hell, mit Linie oben und Kennzahlen im Raster ------------- */
[data-thema="ruhig"] .hero {
  border-top: 3px solid var(--akzent-hier);
  padding-block: var(--tcz-space-8) var(--tcz-space-8);
}
[data-thema="ruhig"] .hero__inner { max-width: 900px; }
[data-thema="ruhig"] .hero h1 { letter-spacing: -0.04em; }
[data-thema="ruhig"] .hero__meta {
  gap: 0;
  border-top: 1px solid var(--linie-hier);
  border-bottom: 1px solid var(--linie-hier);
  padding: 0;
  margin-top: var(--tcz-space-8);
}
[data-thema="ruhig"] .hero__meta div {
  padding: var(--tcz-space-5) var(--tcz-space-5) var(--tcz-space-5) 0;
}

/* Erst ab Tablet als Raster mit Trennstrichen: Auf dem Handy standen
   «Aktivmitglieder» und «Interclub-Teams» sonst uebereinander. */
@media (min-width: 760px) {
  [data-thema="ruhig"] .hero__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
  [data-thema="ruhig"] .hero__meta div { border-right: 1px solid var(--linie-hier); }
  [data-thema="ruhig"] .hero__meta div:last-child { border-right: 0; }
}
[data-thema="ruhig"] .hero__meta dd { font-size: var(--tcz-size-lg); font-weight: 600; color: var(--titel-hier); }

/* Mit Titelbild kippt der helle Hero: site.css legt einen dunklen
   Verlauf ueber das Foto, damit die Schrift traegt. Also dreht auch
   das Paar - Flaeche dunkel, Schrift hell. */
[data-thema="ruhig"] .hero--bild {
  --auf-hero:       var(--tcz-on-dark);
  --titel-hero:     var(--tcz-white);
  --auf-hero-leise: var(--tcz-on-dark);
  --linie-hero:     var(--tcz-on-dark-line);
  --akzent-hero:    var(--tcz-lime-on-dark);
  --link-hero:      var(--tcz-lime-on-dark);
  border-top-color: var(--tcz-lime);
}

/* Der Verlauf aus site.css deckt von links nach rechts ab - gedacht
   fuer einen Textblock links. «Ruhig» stellt den Titel links und den
   Satz rechts, also muss der Verlauf ueber die ganze Breite tragen. */
[data-thema="ruhig"] .hero--bild::after {
  background: linear-gradient(
    180deg,
    rgba(var(--tcz-navy-dark-rgb), .74) 0%,
    rgba(var(--tcz-navy-dark-rgb), .86) 100%
  );
}

/* --- Abschnitte: nummeriert, wie Kapitel ----------------------------- */
[data-thema="ruhig"] main { counter-reset: abschnitt; }
[data-thema="ruhig"] .section { counter-increment: abschnitt; }
[data-thema="ruhig"] .section__head {
  max-width: none;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--tcz-space-5);
  border-top: 1px solid var(--linie-hier);
  padding-top: var(--tcz-space-5);
}
[data-thema="ruhig"] .section__head::before {
  content: "0" counter(abschnitt);
  font-size: var(--tcz-size-sm);
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--akzent-hier);
  padding-top: var(--tcz-space-2);
}
[data-thema="ruhig"] .section__head > * { grid-column: 2; }
[data-thema="ruhig"] .section__head p { max-width: 62ch; }

[data-thema="ruhig"] .eyebrow {
  background: none;
  padding: 0;
  border-radius: 0;
  border-left: 3px solid var(--akzent-hier);
  padding-left: var(--tcz-space-3);
}

/* --- Karten: Listen, keine Kacheln ----------------------------------- */
[data-thema="ruhig"] .cards { gap: 0; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
[data-thema="ruhig"] .card {
  border: 0;
  border-top: 2px solid var(--linie-hier);
  padding-top: var(--tcz-space-4);
  margin-right: var(--tcz-space-6);
}
[data-thema="ruhig"] .card:hover { border-top-color: var(--akzent-hier); }
[data-thema="ruhig"] .card__body { padding-inline: 0; }
[data-thema="ruhig"] .card__media { margin-bottom: var(--tcz-space-4); }

/* --- Tabellen: Raster mit Zebra -------------------------------------- */
[data-thema="ruhig"] .table__wrap { border: 1px solid var(--linie-hier); padding: 0; }
[data-thema="ruhig"] .table th {
  border-bottom: 1px solid var(--linie-hier);
  padding-block: var(--tcz-space-4);
}
[data-thema="ruhig"] .table tbody tr:nth-child(even) { background: color-mix(in srgb, currentColor 4%, transparent); }
[data-thema="ruhig"] .table td { border-bottom: 0; }

[data-thema="ruhig"] .btn { border-radius: 0; font-weight: 600; letter-spacing: .01em; }
[data-thema="ruhig"] .btn--primary { box-shadow: none; }

/* --- Fuss: hell, schmal, mit Linie ----------------------------------- */
[data-thema="ruhig"] .footer { border-top: 1px solid var(--linie-hier); padding-block: var(--tcz-space-7) var(--tcz-space-5); }
[data-thema="ruhig"] .footer h4 { letter-spacing: .08em; }

/* --- Titelbereich im Zweispalter -------------------------------------
   Der Titel steht links und gross, der erklaerende Satz rechts auf der
   Grundlinie daneben - wie der Aufmacher einer Zeitungsseite. Damit
   unterscheidet sich «Ruhig» nicht nur in der Farbe vom Rest, sondern
   im Aufbau.                                                           */
@media (min-width: 900px) {
  [data-thema="ruhig"] .hero__inner {
    max-width: none;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    column-gap: var(--tcz-space-8);
    align-items: end;
  }
  [data-thema="ruhig"] .hero .eyebrow  { grid-column: 1 / -1; }
  [data-thema="ruhig"] .hero h1        { grid-column: 1; margin-bottom: 0; }
  [data-thema="ruhig"] .hero p         { grid-column: 2; margin-bottom: 0; padding-bottom: .35em; }
  [data-thema="ruhig"] .hero .row      { grid-column: 2; margin-top: var(--tcz-space-5); }
  [data-thema="ruhig"] .hero__meta     { grid-column: 1 / -1; }
}