/* ============================================================
   TFCZ · SEITENGERÜST — Kopf, Schriftgrössen und Abstände.
   EINE Quelle für alle Seiten.

   Befund vor der Umstellung (im Browser gemessen, 14.07.2026):
     H1 in SECHS Grössen (60/72/80/82/86/88px), der Abstand vom Titel zur
     Menüleiste in sechs Werten (89–230px), das Sektions-Padding in fünf
     (32/52/60/84/94px). Und die Home hatte gar kein <h1>.
     Darum fühlte sich jede Unterseite anders an.

   REGEL (Vasco 14.07.2026):
     · NUR die Home hat einen Hero mit Vollbild.
     · ALLE Unterseiten haben denselben Text-Hero: gleicher Abstand zur
       Menüleiste, gleiche H1-Grösse, gleicher Lead, gleiches Spacing.

   Einbinden — NACH dem seiten-eigenen <style>, damit dieser Layer die alten
   Einzelwerte überschreibt:
       <link rel="stylesheet" href="system/page.css">

   Die Werte stehen als Tokens in system/tokens.css und gelten überall.
   ============================================================ */

/* ---------- 1 · Seitenkopf ---------- */

/* Unterseiten: Text-Hero — kein Bild, immer derselbe Abstand zur Menüleiste */
body:not(.home) .hero {
  position: relative;
  min-height: 0 !important;            /* die Foto-Hero-Höhen sind damit weg */
  height: auto !important;
  display: block !important;
  padding: var(--hero-pad-y) 0 var(--hero-pad-b) !important;
  overflow: visible;
}

/* Vollbild nur auf der Home: auf Unterseiten fliegt das Hero-Bild raus */
body:not(.home) .hero-bg,
body:not(.home) .hero-ov,
body:not(.home) .hero-img {
  display: none !important;
}

/* H1: eine Grösse für alle Unterseiten, eine für die Home */
body:not(.home) .hero h1,
body:not(.home) .hero .hl {
  font-size: var(--h1-sub) !important;
  line-height: 1.04;
  margin: 0 0 var(--sp-3) !important;
}
body.home .hero h1,
body.home .hc-hl {
  font-size: var(--h1) !important;
  line-height: 1.02;
}

/* Der Inhalts-Container IM Hero bringt kein eigenes Padding mit
   (Training/Firmenevents hatten dort 60px extra — daher der grössere Abstand) */
.hero > .wrap {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Kicker über dem Titel — EINE Signature.
   Vorher gab es drei Varianten (.kick = nackter Text, .est = Pill-Badge,
   .kicker = Goldstrich). Weil sie unterschiedlich hoch sind, startete die
   Headline auf jeder Seite woanders. Ab jetzt sehen alle drei gleich aus:
   goldener Strich 28x2px + Gold-Uppercase, gleiche Höhe, gleicher Abstand. */
/* Gilt im Seitenkopf UND über jeder Sektions-Überschrift (Regel: eine Kicker-Signature) */
/* .lbl ist NICHT dabei: der Barometer-Baustein nutzt .lbl fuer seine Balken-Beschriftung */
.hero .kicker, .hero .kick, .hero .est,
section .kicker, section .kick, section .est,
.sec .kicker, .sec .kick, .sec .est {
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: fit-content;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 20px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 var(--sp-2) !important;
}
.hero .kicker::before, .hero .kick::before, .hero .est::before,
section .kicker::before, section .kick::before, section .est::before,
.sec .kicker::before, .sec .kick::before, .sec .est::before {
  content: "";
  width: 28px;
  height: 2px;
  flex: none;
  background: var(--gold);
}

/* Lead-Text unter dem Titel — die Seiten nennen ihn .lead, .sub oder .intro */
.hero .lead,
.hero .sub,
.hero .intro,
.hero > .wrap > p {
  font-size: var(--lead) !important;
  line-height: 1.6;
  max-width: 68ch;
}

/* ---------- 2 · Sektions-Abstände ---------- */

/* Ein Rhythmus für alle Seiten (vorher 32–94px, je nach Seite) */
main > section,
main > .sec,
main > div > section,
body > section,
body > div > section,
body > div > div > section,
section.sec,
.sec {
  padding-top: var(--sec-pad) !important;
  padding-bottom: var(--sec-pad) !important;
}

/* Die erste Sektion nach dem Hero rückt nicht doppelt ab */
.hero + section,
.hero + .sec,
.hero + div > section:first-child {
  padding-top: var(--sec-pad-first) !important;
}

/* Anker landen unter der Sticky-Nav (On-Load-Hash, z. B. mitglied.html?paket=goenner#formular).
   Klick-Scrolls regelt scroll.js mit eigenem Offset; :target greift nur beim Direkt-Sprung per URL. */
:target {
  scroll-margin-top: calc(var(--tfcz-navh, 69px) + 14px);
}

/* ---------- Menüleiste: Logo überall EXAKT gleich gross (Single Source) ----------
   Bisher trieb es auseinander: die .top-Seiten hatten einen Mobile-Shrink, die
   .nav-Seiten (regeln/geschichte/über-uns) NICHT — dort blieb das Logo gross.
   Diese eine Regel (mit !important gegen die Seiten-Inline-CSS) macht Schluss:
   Desktop 38.8px · Mobile 35.2px — auf JEDER Seite, egal ob .nav oder .top. */
.nav .logo img, .top .logo img {
  height: 38.8px !important;
  width: auto !important;
  object-fit: contain !important;
}
@media (max-width: 640px) {
  .nav .logo img, .top .logo img { height: 35.2px !important; }
}

/* ---------- Menüleiste: eigene GPU-Ebene → kein „Zittern" beim Scrollen ----------
   Die Sticky-Leisten sind leicht durchscheinend (rgba < 1). OHNE eigene Ebene muss
   der Browser die Leiste bei JEDEM Scroll-Frame neu über den bewegten Inhalt
   dahinter zeichnen — sichtbar als Zittern/Flimmern, besonders wenn animierte
   Elemente (Galerie-Marquee, Parallax-Bild, Puls-Badges) hinter der Leiste
   durchlaufen. `translateZ(0)` hebt die Leiste auf eine eigene Compositor-Ebene:
   der Browser blendet sie nur noch auf der GPU darüber, ohne Neuzeichnen.
   Gilt für ALLE Sticky-Leisten (Single Source). Vasco, 27.07.2026. */
.nav, .top, .ej-top, .db-top {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ---------- Menüleisten-HÖHE: auf JEDER Seite exakt gleich (Single Source) ----------
   Gemessen bei 390px: Home 63.6px · ALLE Inhaltsseiten 70.9px — auf Desktop kippte
   es sogar um (Home 73.6, andere 70.9). Grund: zwei verschiedene Bau-Rezepte.
   Home steuert die Höhe über Padding + Ränder-als-Overlay; die Inhaltsseiten über
   echte 3px-Ränder + Innen-Padding (.nav bzw. .top .wrap). Padding pro Seite
   nachzurechnen ist genau die Endlosschleife, die uns immer wieder eingeholt hat.
   Lösung: EINE feste Höhe + vertikal zentrierter Inhalt → an jeder Breite identisch.
   (box-sizing ist projektweit border-box, die 3px-Ränder sind also eingerechnet.)
   Vasco, 27.07.2026. */
.nav, header.top {
  height: 72px !important;
  min-height: 72px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* .nav IST selbst die Flex-Zeile (Logo ist direktes Kind, links fixiert via margin-right:auto).
   Bei header.top liegt der Inhalt in einer eigenen .wrap-Spalte (max-width 1160, zentriert) —
   header.top darf daher NICHT selbst flex werden, sonst schrumpft die .wrap auf Inhaltsbreite
   und das Logo wandert je nach Textmenge nach innen. Stattdessen füllt die .wrap die Höhe
   und zentriert vertikal (sie ist bereits display:flex; align-items:center). */
.nav { display: flex !important; align-items: center !important; }
.top .wrap {
  height: 100% !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* Logo links fixiert → alles danach (Links, Burger) wird nach rechts geschoben.
   Auf .top-Seiten übernahm das früher der „Zurück"-Button (margin-left:auto);
   der ist jetzt entfernt, darum pinnt jetzt das Logo den rechten Block. */
.nav .logo, .top .logo { margin-right: auto !important; }
@media (max-width: 640px) {
  .nav, header.top { height: 64px !important; min-height: 64px !important; }
  /* Der Wallis/Hochdeutsch-Umschalter (nur über-uns) zeigt überall zwei kompakte
     Flaggen (.lf, Deutsch/Wallis - siehe tfcz-ueber-uns.html); Text-Labels + Knopf-
     Toggle sind dort seiten-eigen ausgeblendet. Diese Regel sichert das fürs Handy
     zusätzlich ab (Cache-sicher). (Der Umschalter im Inhalt von /regeln ist NICHT
     betroffen.) */
  .nav > .langsw .ll,
  .nav > .langsw .langtoggle { display: none !important; }
}

/* Sektions-Überschriften: eine Grösse */
main h2,
.sec h2,
h2.big,
.h2,
.hrow h2 {
  font-size: var(--h2) !important;
  line-height: 1.1;
}

/* ---------- 3 · Inhaltsbreite ---------- */
.wrap {
  max-width: var(--wrap) !important;
  padding-left: var(--wrap-pad) !important;
  padding-right: var(--wrap-pad) !important;
}