/* ============================================================
       TC KILCHBERG — Startseite (Onepager)
       Farbwelt & Typografie gemäss design.md
       ============================================================ */
    :root {
      /* Farben */
      /* Übernommen von tckilchberg.ch: Schwarz, Weiss, Schiefergrau.
         Der Verein führt keine Akzentfarbe — Aktionen sind schwarz, wie die
         Balken auf der bestehenden Seite. Die Wärme kommt aus den Bildern. */
      --night:      #16181A;   /* Bühne / Dunkel — Schwarz wie die CI-Balken */
      --night-2:    #1E2124;   /* leicht erhöhte dunkle Fläche (Karten) */
      --night-3:    #2A2E32;   /* Karten-Hover / Linien auf Dunkel */
      --clay:       #16181A;   /* Aktionsfarbe = Schwarz, wie im CI */
      --clay-deep:  #000000;
      --cream:      #FFFFFF;   /* Hell / Text auf Dunkel — Weiss */
      --cream-2:    #F2F3F4;   /* leicht getönte helle Fläche */
      --neutral:    #3F444A;   /* Sekundärtext auf Hell — CI-Textfarbe */
      --muted-dark: #AEB4BA;   /* Sekundärtext auf Dunkel (AA) */
      --gold:       #3F444A;   /* Feine Labels auf HELL — CI-Grau */
      --gold-light: #C7CDD3;   /* dieselben Labels auf DUNKEL (Kontrast AA) */
      --line-dark:  rgba(255,255,255,0.16);
      --line-light: rgba(22,24,26,0.14);

      /* Typo */
      --font-display: "Bai Jamjuree", system-ui, sans-serif;
      --font-body:    "Bai Jamjuree", system-ui, -apple-system, sans-serif;

      /* Layout */
      --maxw: 1200px;
      --pad:  clamp(1.25rem, 5vw, 4rem);
      --section-y: clamp(5rem, 12vw, 11rem);
      --radius: 12px;
      --radius-lg: 22px;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
    @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
    /* Lenis übernimmt das Scrollen — natives Smooth-Scroll würde dagegenarbeiten */
    html.has-lenis { scroll-behavior: auto; }

    body {
      font-family: var(--font-body);
      background: var(--night);
      color: var(--cream);
      font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    img { max-width: 100%; display: block; }

    a { color: inherit; text-decoration: none; }

    ::selection { background: var(--clay); color: var(--cream); }

    :focus-visible {
      outline: 2px solid var(--clay);
      outline-offset: 3px;
      border-radius: 2px;
    }

    /* ---------- Typo-Utilities ---------- */
    .eyebrow {
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--gold);
      display: inline-flex;
      align-items: center;
      gap: 0.6em;
    }
    .eyebrow::before {
      content: "";
      width: 1.75rem; height: 1px;
      background: var(--gold);
      opacity: 0.7;
      display: inline-block;
    }
    .eyebrow--center::before { display: none; }

    h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; }

    .h-section {
      font-size: clamp(2rem, 1.4rem + 3.2vw, 3.75rem);
      line-height: 1.02;
      margin: 1rem 0 1.25rem;
    }
    .lead {
      font-size: clamp(1.05rem, 1rem + 0.5vw, 1.35rem);
      line-height: 1.6;
      max-width: 46ch;
    }

    /* ---------- Wrapper & Sektionen ---------- */
    .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }

    section { padding-block: var(--section-y); position: relative; }

    .sec-dark  { background: var(--night); color: var(--cream); }
    .sec-light { background: var(--cream); color: var(--night); }
    .sec-light .eyebrow { color: var(--clay); }
    .sec-light .eyebrow::before { background: var(--clay); }
    .sec-light .lead { color: var(--neutral); }

    /* ---------- Buttons ---------- */
    .btn {
      --btn-bg: var(--clay);
      --btn-fg: var(--cream);
      display: inline-flex;
      align-items: center;
      gap: 0.6em;
      font-family: var(--font-body);
      font-weight: 600;
      font-size: 0.98rem;
      letter-spacing: 0.01em;
      padding: 0.95em 1.7em;
      border-radius: 100px;
      border: 1px solid transparent;
      background: var(--btn-bg);
      color: var(--btn-fg);
      cursor: pointer;
      transition: transform .25s cubic-bezier(.2,.7,.3,1), background .25s, box-shadow .25s, color .25s, border-color .25s;
      will-change: transform;
      line-height: 1;
    }
    .btn:hover { background: var(--clay-deep); transform: translateY(-2px); box-shadow: 0 12px 28px -12px rgba(255,255,255,0.7); }
    .btn:active { transform: translateY(0); }
    .btn .btn__arrow { transition: transform .25s; }
    .btn:hover .btn__arrow { transform: translateX(4px); }

    .btn--ghost {
      background: transparent;
      color: var(--cream);
      border-color: rgba(255,255,255,0.4);
    }
    .btn--ghost:hover { background: rgba(255,255,255,0.08); border-color: var(--cream); box-shadow: none; color: var(--cream); }
    .sec-light .btn--ghost { color: var(--night); border-color: rgba(22,24,26,0.3); }
    .sec-light .btn--ghost:hover { background: rgba(22,24,26,0.05); border-color: var(--night); }

    /* Text-Link mit Terracotta-Unterstrich */
    .tlink {
      font-weight: 600;
      color: var(--clay);
      display: inline-flex;
      align-items: center;
      gap: 0.45em;
      border-bottom: 1px solid transparent;
      transition: border-color .2s, gap .2s;
    }
    .sec-dark .tlink { color: var(--gold); }
    .tlink:hover { border-color: currentColor; gap: 0.7em; }

    /* ============================================================
       HEADER
       ============================================================ */
    .site-header {
      position: fixed;
      inset: 0 0 auto 0;
      z-index: 100;
      transition: background .4s ease, backdrop-filter .4s ease, border-color .4s, padding .3s;
      border-bottom: 1px solid transparent;
    }
    .site-header.scrolled,
    /* Unterseiten haben keine Aufschlag-Bühne, über der der Header schweben
       könnte — dort trägt er von der ersten Zeile an seine eigene Fläche. */
    .site-header.is-solid {
      background: rgba(22,24,26,0.82);
      backdrop-filter: blur(14px) saturate(1.1);
      -webkit-backdrop-filter: blur(14px) saturate(1.1);
      border-bottom-color: var(--line-dark);
    }
    .nav a[aria-current="page"] { opacity: 1; color: var(--gold-light); }
    .header-inner {
      max-width: var(--maxw);
      margin-inline: auto;
      padding: clamp(0.9rem,2vw,1.35rem) var(--pad);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }
    .brand { display: flex; align-items: center; gap: 0.7rem; }
    .brand img {
      height: clamp(28px, 3vw, 38px);
      width: auto;
      /* Logo ist schwarz auf transparent → auf dunkler Bühne invertieren */
      filter: invert(1) brightness(1.35);
    }

    .nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
    .nav a { font-size: 0.9rem; font-weight: 500; color: var(--cream); opacity: 0.85; transition: opacity .2s, color .2s; }
    .nav a:hover { opacity: 1; color: var(--gold); }
    .nav__links { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.9rem); }

    .nav .btn { padding: 0.7em 1.25em; font-size: 0.88rem; }

    .nav-toggle { display: none; }

    @media (max-width: 900px) {
      .nav__links {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(100vw, 460px);
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 1.6rem;
        padding: 2rem var(--pad);
        /* Deckend und ohne backdrop-filter. Der Filter hat das Panel beim
           ersten Öffnen rund 200 ms lang blockiert: Gemessen auf
           iPhone-Emulation lag zwischen 86 ms und 284 ms nach dem Tippen
           kein einziges Einzelbild — danach sprang das Panel fast fertig
           herein. Safari muss dafür den gesamten Hintergrund aus Canvas
           und Hero neu rastern, und zwar genau in dem Moment, in dem die
           Animation anlaufen soll.
           Sichtbar gebracht hat er ohnehin nichts: Bei 97 % Deckung war
           vom Unschärfe-Effekt nichts zu sehen — nur die Hero-Schrift
           schimmerte durch die fehlenden 3 %. */
        background: var(--night);
        transform: translateX(100%);
        /* Eigene Compositor-Ebene, bevor animiert wird — sonst legt der
           Browser sie erst beim ersten Frame an. */
        will-change: transform;
        transition: transform .4s cubic-bezier(.2,.7,.3,1);
        border-left: 1px solid var(--line-dark);
      }
      .nav__links.open { transform: translateX(0); }
      .nav__links a { font-size: 1.15rem; opacity: 1; }
      .nav-toggle {
        display: inline-flex;
        flex-direction: column;
        gap: 5px;
        background: none;
        border: 0;
        cursor: pointer;
        padding: 8px;
        z-index: 120;
      }
      .nav-toggle span { width: 26px; height: 2px; background: var(--cream); transition: transform .3s, opacity .3s; display: block; }
      .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
      .nav-toggle.open span:nth-child(2) { opacity: 0; }
      .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    }

    /* ============================================================
       1 · HERO — "Das Filmplakat"
       ============================================================ */
    /* Warme Abendlicht-Gradierung + Lesbarkeits-Verlauf */

    .scrollcue {
      position: absolute;
      left: 50%; bottom: 1.4rem;
      transform: translateX(-50%);
      z-index: 3;
      display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
      color: var(--muted-dark);
      font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
    }
    .scrollcue__ball {
      width: 10px; height: 10px; border-radius: 50%;
      background: var(--clay);
      animation: cueBounce 1.8s cubic-bezier(.5,.05,.5,.95) infinite;
    }
    @keyframes cueBounce { 0%,100%{ transform: translateY(0); opacity:1;} 50%{ transform: translateY(10px); opacity:.5;} }
    @media (prefers-reduced-motion: reduce){ .scrollcue__ball{ animation: none; } }


    /* Weiche Karten mit feiner Kante. Beim Aufräumen ist aufgefallen,
       dass die frühere Fassung dieses Blocks auf Klassen zielte, die es
       gar nicht gibt (.card, .path, .termin, .preis) — sie hat deshalb
       nichts bewirkt ausser bei .stat. Jetzt auf die tatsächlichen
       Kartenklassen gesetzt. */
    .fcard, .pcard, .tcard, .stat { border-radius: var(--radius-lg); }
    .sec-dark .fcard, .sec-dark .pcard, .sec-dark .tcard {
      border: 1px solid rgba(255,255,255,0.09);
    }
    .sec-head { max-width: 62ch; }
    h2 { font-size: clamp(2.1rem, 1.1rem + 3.6vw, 4.2rem); line-height: 0.98; letter-spacing: -0.03em; }


    /* ============================================================
       2 · THE SERVE — gepinnte Scroll-Sequenz
       ============================================================ */
    /* Die Scroll-Distanz entsteht über GSAP (end:'+=220%'); die Sektion selbst ist 100vh hoch und wird gepinnt. */
    .serve { position: relative; height: 100vh; height: 100svh; background: var(--night); }
    /* Absolut positioniert mit inset:0 — füllt damit die PADDING-Box der
       Sektion. GSAP legt beim Pinnen ein vertikales Padding auf .serve;
       mit height:100% würde die Bühne dadurch geschrumpft (sichtbare Naht). */
    .serve__stage {
      position: absolute;
      inset: 0;
      width: 100%;
      overflow: hidden;
      display: flex; align-items: center; justify-content: center;
      /* Frame 1 als Poster hinter dem Canvas: der allererste Paint zeigt
         schon den Aufschlag, nicht eine schwarze Fläche. Der Canvas legt
         sich darüber, sobald er zeichnet. */
      background: var(--night) url('../serve/serve-0001.webp') 50% 42% / cover no-repeat;
    }
    #serveCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
    /* Intro liegt auf dem bildfüllenden Ball und blendet beim Scrollen aus */
    .serve__label {
      position: absolute; inset: auto 0 auto 0; top: 50%; transform: translateY(-50%);
      z-index: 3; text-align: center;
      display: flex; flex-direction: column; align-items: center;
      gap: clamp(0.7rem, 1.6vh, 1.1rem);
      padding-inline: clamp(1.2rem, 5vw, 3rem);
      transition: opacity .3s ease;
      /* Steht am Anfang direkt auf dem gelben Ball — Gold auf Gelb wäre
         unsichtbar, deshalb Crème mit kräftigem dunklem Hof. */
      color: var(--cream);
      text-shadow: 0 2px 18px rgba(22,24,26,0.95), 0 0 6px rgba(22,24,26,0.85),
                   0 0 2px rgba(22,24,26,0.9);
    }
    .serve__label .eyebrow { color: var(--cream); }

    .serve__h1 {
      font-family: var(--font-display); font-weight: 700;
      font-size: clamp(2.4rem, 1rem + 6.4vw, 5.6rem);
      line-height: 0.98; letter-spacing: -0.02em; color: var(--cream);
      margin: 0;
    }
    .serve__sub {
      max-width: 44ch; color: var(--cream); opacity: 0.92;
      margin: 0;
    }
    .serve__cta { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; margin-top: 0.4rem; }
    .serve__label .scrollcue { position: static; transform: none; margin-top: clamp(0.6rem, 2vh, 1.4rem); }
    @media (max-width: 700px) {
      .serve__sub { display: none; }
    }
    .serve__headline {
      position: absolute;
      left: 50%; bottom: clamp(3rem, 12vh, 8rem);
      transform: translateX(-50%);
      z-index: 3;
      width: min(92vw, 900px);
      text-align: center;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(1.8rem, 1rem + 4.5vw, 4rem);
      line-height: 1.04;
      color: var(--cream);
      display: flex; flex-wrap: wrap; gap: 0.28em; justify-content: center;
    }
    .serve__headline .w {
      opacity: 0;
      transform: translateY(0.5em);
      transition: opacity .35s ease, transform .35s ease;
      display: inline-block;
    }
    .serve__headline .w.on { opacity: 1; transform: translateY(0); }
    .serve__headline .w--accent { color: var(--gold); }

    /* Fortschritts-Schiene: zeigt, dass man sich in einer Sequenz bewegt */
    .serve__rail {
      position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
      background: rgba(255,255,255,0.10); z-index: 4;
    }
    .serve__rail i {
      display: block; height: 100%; width: 100%;
      background: var(--clay); transform: scaleX(0); transform-origin: left center;
    }

    /* Ladeanzeige der Foto-Framesequenz (nur sichtbar, wenn eine existiert) */
    .serve__boot {
      position: absolute; inset: 0; z-index: 5;
      display: none; flex-direction: column; align-items: center; justify-content: center;
      gap: 1.1rem; background: var(--night);
      opacity: 0; transition: opacity .4s ease;
      pointer-events: none;
    }
    .serve__boot.on { display: flex; opacity: 1; }
    .serve__boot-label {
      font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase;
      color: var(--gold);
    }
    .serve__boot-bar {
      display: block; width: min(18rem, 60vw); height: 1px;
      background: rgba(255,255,255,0.14);
    }
    .serve__boot-bar i {
      display: block; height: 100%; width: 100%;
      background: var(--clay); transform: scaleX(0); transform-origin: left center;
      transition: transform .15s linear;
    }
    .serve__boot-pct {
      font-size: 0.72rem; letter-spacing: 0.22em; color: var(--muted-dark);
      font-variant-numeric: tabular-nums;
    }

    /* Statischer Fallback (reduced-motion) */
    .serve.is-static { height: auto; }
    .serve.is-static .serve__stage { position: relative; inset: auto; height: 88vh; }
    .serve.is-static .serve__rail { display: none; }

    /* Berührungsgeräte: Schleife statt Scroll-Bindung, deshalb kein Pin und
       keine 220 %-Scrollstrecke — die Sektion ist eine ganz normale Bühne.
       Etwas flacher als am Schreibtisch: Die Sequenz ist im Querformat
       aufgenommen; in einem hohen Rahmen schneidet cover so stark zu, dass
       vom Aufschlag nur ein senkrechter Streifen übrig bliebe. */
    .serve.is-ambient { height: auto; }
    .serve.is-ambient .serve__stage {
      position: relative; inset: auto;
      height: min(76svh, 620px);
    }
    .serve.is-ambient .serve__rail { display: none; }
    /* Die Scroll-Headline "Seit 1972 …" gehört zur gescrubbten Fassung: Sie
       baut sich über die Scrollstrecke auf, während das Intro verblasst.
       In einer Endlosschleife gäbe es diese Dramaturgie nicht — der Hero
       wäre die meiste Zeit ohne Titel. Deshalb bleibt hier das Intro
       stehen und die Scroll-Headline entfällt. */
    .serve.is-ambient .serve__headline { display: none; }
    .serve.is-ambient .serve__label {
      position: relative; top: auto; transform: none;
      opacity: 1 !important;
    }

    /* ============================================================
       3 · STAT-LEISTE
       ============================================================ */
    .stats {
      background: var(--night);
      border-top: 1px solid var(--line-dark);
      padding-block: clamp(3.5rem, 8vw, 6rem);
    }
    .stats__grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: clamp(1.5rem, 3vw, 2.5rem);
      align-items: start;
    }
    .stat { position: relative; }
    .stat__num {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(2.6rem, 1.5rem + 5vw, 5rem);
      color: var(--gold);
      line-height: 1;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.02em;
    }
    .stat__label { color: var(--muted-dark); font-size: 0.92rem; margin-top: 0.5rem; letter-spacing: 0.02em; }
    /* Der davonfliegende Ball landet als Terracotta-Punkt über der ersten Zahl */
    .stat--landing .stat__dot {
      position: absolute;
      top: -0.9rem; left: 0.12em;
      width: 14px; height: 14px; border-radius: 50%;
      /* War auf --clay gesetzt. Seit der monochromen Palette ist das
         Schwarz auf Schwarz — sichtbar blieb nur der weisse Schein, was
         wie ein Fleck wirkte. Der Punkt steht für den landenden Ball und
         muss deshalb selbst hell sein. */
      background: var(--cream);
      opacity: 0;
      transform: translateY(-18px) scale(0.4);
      box-shadow: 0 0 16px 2px rgba(255,255,255,0.28);
    }
    .stat--landing.dropped .stat__dot {
      animation: ballDrop .7s cubic-bezier(.5,1.6,.5,1) forwards;
    }
    @keyframes ballDrop { 0%{opacity:0; transform: translateY(-40px) scale(.3);} 60%{opacity:1;} 100%{opacity:1; transform: translateY(0) scale(1);} }

    .badge-strip {
      margin-top: clamp(2.5rem, 5vw, 3.5rem);
      display: flex; justify-content: center;
    }
    .badge {
      display: inline-flex; align-items: center; gap: 0.7rem;
      padding: 0.7rem 1.4rem;
      border: 1px solid var(--line-dark);
      border-radius: 100px;
      color: var(--cream);
      font-size: 0.9rem;
      background: linear-gradient(180deg, rgba(255,255,255,0.08), transparent);
    }
    .badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cream); box-shadow: 0 0 0 4px rgba(255,255,255,0.16); flex: none; }

    @media (max-width: 720px) {
      .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.2rem; }
    }

    /* ============================================================
       Section-Header Baustein
       ============================================================ */
    .sec-head { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
    .sec-head .h-section { margin-bottom: 0.75rem; }




    /* ============================================================
       WORTWEISER AUFBAU DER SEKTIONS-ÜBERSCHRIFTEN
       Die Wörter bleiben als Text im DOM — nur in <span> gefasst.
       Vorlesesoftware und Suchmaschinen lesen den Satz unverändert,
       Markieren und Kopieren funktioniert weiterhin.
       ============================================================ */
    .wsplit { display: inline-block; overflow: hidden; vertical-align: top; }
    .wsplit > i {
      display: inline-block; font-style: inherit;
      transform: translateY(105%);
      transition: transform .85s cubic-bezier(.22,.85,.25,1);
    }
    .in .wsplit > i, .wsplit.in > i { transform: translateY(0); }

    @media (prefers-reduced-motion: reduce) {
      .wsplit > i { transform: none !important; transition: none !important; }
    }

    /* ============================================================
       CURSOR
       Ein einziger Ring mit mix-blend-mode: difference. Dadurch
       invertiert er sich gegen den Untergrund und bleibt sowohl auf
       den hellen als auch auf den dunklen Sektionen sichtbar, ohne
       dass irgendwo umgeschaltet werden muss.
       Nur für echte Zeigegeräte — auf Touch gibt es keinen Cursor,
       den man ersetzen könnte.
       ============================================================ */
    @media (hover: hover) and (pointer: fine) {
      .cur {
        position: fixed; top: 0; left: 0;
        width: 26px; height: 26px;
        margin: -13px 0 0 -13px;
        border: 1.5px solid #fff;
        border-radius: 50%;
        pointer-events: none;
        z-index: 9999;
        mix-blend-mode: difference;
        transition: width .28s cubic-bezier(.2,.7,.3,1),
                    height .28s cubic-bezier(.2,.7,.3,1),
                    margin .28s cubic-bezier(.2,.7,.3,1),
                    background-color .28s ease,
                    border-color .28s ease,
                    opacity .3s ease;
        opacity: 0;
        will-change: transform;
      }
      .cur.on { opacity: 1; }
      .cur.hidden { opacity: 0 !important; }
      /* Über Interaktivem: gefüllter Punkt statt Ring */
      .cur.hot {
        width: 40px; height: 40px; margin: -20px 0 0 -20px;
        background: #fff; border-color: transparent;
      }
      /* Über Text: zur schlanken Lesemarke */
      .cur.text {
        width: 3px; height: 30px; margin: -15px 0 0 -1.5px;
        border-radius: 2px; background: #fff; border-color: transparent;
      }
      html.has-cur, html.has-cur * { cursor: none !important; }
      html.has-cur input, html.has-cur textarea, html.has-cur select {
        cursor: auto !important;
      }
      /* Tastaturnutzer sollen den Fokus weiterhin sehen */
      html.has-cur :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
    }

    /* Magnetische Schaltflächen: ziehen sich dem Zeiger leicht entgegen */
    .btn { will-change: transform; }

    @media (prefers-reduced-motion: reduce) {
      .cur { display: none !important; }
      html.has-cur, html.has-cur * { cursor: auto !important; }
    }



    /* Menü offen: Hintergrund darf nicht mitscrollen. Ohne das fühlt sich
       das Menü kaputt an — die Seite bewegt sich hinter dem Panel weg. */
    /* Sperre ohne overflow:hidden. Das Umschalten von overflow auf einem
       22 000 px langen Dokument mit gepinnter Sektion kostet ein volles
       Relayout samt ScrollTrigger-Refresh — gemessen rund 200 ms, in denen
       kein einziges Einzelbild gezeichnet wurde. Genau in diesem Moment
       sollte das Menü hereinfahren, weshalb es zerrissen aussah und dann
       fertig dastand.
       touch-action ist keine Layout-Eigenschaft und löst kein Relayout aus;
       das Trägheits-Scrollen fängt zusätzlich Lenis ab, das beim Öffnen
       ohnehin angehalten wird. */
    html.nav-open, html.nav-open body { touch-action: none; overscroll-behavior: none; }
    /* Der CTA im Menü hatte dieselbe Farbe wie das Panel und war dadurch
       als Schaltfläche unsichtbar. Im Menü deshalb invertiert. */
    @media (max-width: 900px) {
      .nav__links .btn {
        background: var(--cream); color: var(--night);
        border-color: var(--cream);
        align-self: stretch; text-align: center; justify-content: center;
        margin-top: 0.6rem; padding: 0.95em 1.4em; font-size: 1rem;
      }
      .nav__links .btn:hover { background: var(--cream-2); color: var(--night); }
      .nav__links .btn__arrow { display: none; }
    }


    /* Strichsymbole: erben Farbe und Grösse vom Text, damit sie sich
       überall einfügen statt als Fremdkörper zu wirken. */
    .ico {
      width: 1.05em; height: 1.05em;
      flex: none; vertical-align: -0.16em;
      fill: none; stroke: currentColor;
      stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
      opacity: 0.75;
    }
    .ico--lg { width: 1.25em; height: 1.25em; opacity: 0.85; }
    a:hover > .ico { opacity: 1; }
    .contact-line { display: flex; align-items: flex-start; gap: 0.65em; margin: 0.35rem 0; }


    /* ============================================================
       TIPPZIELE AUF BERÜHRUNGSGERÄTEN
       Gemessen waren 30 Ziele unter 44 px Höhe — darunter die gesamte
       Hauptnavigation im Menü (31 px). Die Trefferfläche wird über
       Innenabstand vergrössert, das Schriftbild bleibt unverändert.
       ============================================================ */
    @media (pointer: coarse) {
      .nav__links a { padding-block: 0.62rem; }
      .nav__links { gap: 0.9rem; }
      .nav-toggle { width: 48px; height: 48px; padding: 8px; }
      .tlink, .tcard__tel, .footer-bottom a, address a, .hint a,
      .footer-bottom nav a, .rest__tel, .brand {
        min-height: 44px;
        padding-block: 0.5rem;
        display: inline-flex; align-items: center;
      }
      .fcard__tag, .courts__legend { min-height: 0; }
      /* Fusszeilen-Links brauchen zusätzlich seitlichen Griff */
      .footer-bottom nav a { padding-inline: 0.2rem; }
    }

    /* Die kleinsten Beschriftungen lagen bei 10,9 px. Für gesperrte
       Versalien ist das grenzwertig — eine halbe Stufe grösser. */
    @media (max-width: 700px) {
      .fcard__tag, .ph-media span, .scrollcue span { font-size: 0.72rem; }
    }



    /* ============================================================
       SIEBEN PLÄTZE — massstabsgetreue Glyphen
       ============================================================ */
    .courts { margin: clamp(2rem, 5vw, 3.4rem) 0 clamp(2.5rem, 6vw, 4rem); }
    .courts__row {
      list-style: none; margin: 0; padding: 0;
      display: grid; grid-template-columns: repeat(7, 1fr);
      gap: clamp(0.5rem, 1.4vw, 1.1rem);
      max-width: 830px;
    }
    .court { position: relative; }
    .cg { display: block; width: 100%; height: auto; overflow: visible; }
    .cg-out { stroke: currentColor; stroke-width: 28; fill: none; opacity: 0.9; }
    .cg-in  { stroke: currentColor; stroke-width: 20; fill: none; opacity: 0.55; }
    .cg-net { stroke: currentColor; stroke-width: 16; fill: none; opacity: 0.3; }
    .court { color: var(--neutral); transition: color .45s ease, transform .45s cubic-bezier(.2,.8,.3,1); }
    .court.see .cg-out { fill: currentColor; fill-opacity: 0.14; }
    .court.see .cg-out, .court.see .cg-in { opacity: 1; }
    .sec-dark .court { color: var(--muted-dark); }
    .sec-dark .court.see .cg-out { fill: currentColor; fill-opacity: 0.22; }
    /* Die Plätze richten sich beim Erscheinen nacheinander auf */
    .courts .court { opacity: 0; transform: translateY(14px); }
    .courts.in .court { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.3,1); }
    .courts.in .court:nth-child(1) { transition-delay: .00s }
    .courts.in .court:nth-child(2) { transition-delay: .07s }
    .courts.in .court:nth-child(3) { transition-delay: .14s }
    .courts.in .court:nth-child(4) { transition-delay: .21s }
    .courts.in .court:nth-child(5) { transition-delay: .28s }
    .courts.in .court:nth-child(6) { transition-delay: .35s }
    .courts.in .court:nth-child(7) { transition-delay: .46s }
    .court:hover { transform: translateY(-4px); }

    .courts__legend {
      display: flex; align-items: center; flex-wrap: wrap;
      gap: 0.5em 1.4em;
      margin: 1.1rem 0 0;
      font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--neutral);
    }
    .courts__key {
      width: 22px; height: 11px; border: 1.5px solid var(--neutral);
      border-radius: 2px; display: inline-block; margin-right: 0.5em;
      vertical-align: -1px;
    }
    .courts__key--see { background: currentColor; opacity: 0.22; border-color: currentColor; }
    .sr-only {
      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
    }
    @media (max-width: 640px) {
      .courts__row { grid-template-columns: repeat(4, 1fr); gap: 0.6rem; max-width: 340px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .courts .court { opacity: 1 !important; transform: none !important; }
    }

    /* ============================================================
       3b · ABDUNKLER HINTER DEM AUFSCHLAG-INTRO
       ============================================================ */
    /* Abdunkler hinter dem Intro. Gemessen lag der Kontrast von weisser
       Schrift gegen den hellen Ball bei 2,94:1 — unter den nötigen 3,0 für
       grosse Schrift. Ein Textschatten reicht gegen eine so grosse helle
       Fläche nicht; nötig ist eine flächige Abdunklung. Liegt über dem
       Canvas (z-index 2) und unter dem Text (z-index 3). */
    .serve__stage::before {
      content: "";
      position: absolute; inset: 0; z-index: 2;
      pointer-events: none;
      background:
        radial-gradient(58% 44% at 50% 50%, rgba(22,24,26,0.62) 0%,
                        rgba(22,24,26,0.38) 55%, rgba(22,24,26,0) 100%);
    }
    /* Im Reduced-Motion-Standbild sitzt der Text weiter oben */
    .serve.is-static .serve__stage::before {
      background: radial-gradient(70% 50% at 50% 42%, rgba(22,24,26,0.6) 0%,
                                  rgba(22,24,26,0) 100%);
    }

    /* ============================================================
       4 · DIE ANLAGE — Bildkarten mit Clip-Path-Reveal
       ============================================================ */
    .facility-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
    @media (min-width: 860px) { .facility-grid { grid-template-columns: repeat(3, 1fr); } }

    .fcard {
      display: flex; flex-direction: column;
      background: var(--night);
      color: var(--cream);
      border-radius: var(--radius-lg);
      overflow: hidden;
      border: 1px solid var(--line-light);
    }
    .fcard__media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--night-2); }
    .fcard__media img {
      width: 100%; height: 100%; object-fit: cover;
      clip-path: inset(0 0 100% 0);
      transition: clip-path 1.1s cubic-bezier(.7,0,.2,1), transform 1.2s ease;
      transform: scale(1.08);
    }
    .fcard.revealed .fcard__media img { clip-path: inset(0 0 0 0); transform: scale(1); }
    .fcard__tag {
      position: absolute; top: 0.9rem; left: 0.9rem;
      font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
      background: rgba(22,24,26,0.7); backdrop-filter: blur(6px);
      color: var(--cream); padding: 0.4rem 0.8rem; border-radius: 100px;
      z-index: 2;
    }
    .fcard__tag--soon { color: var(--gold); }
    .fcard__body { padding: 1.6rem 1.5rem 1.9rem; flex: 1; display: flex; flex-direction: column; }
    .fcard__body h3 { font-size: 1.4rem; margin-bottom: 0.7rem; }
    .fcard__body p { color: var(--muted-dark); font-size: 0.98rem; }

    /* Design-Placeholder für fehlendes Foto (Navillegut-Seeplatz) */
    .ph-media {
      width: 100%; height: 100%;
      display: flex; align-items: flex-end; padding: 1.2rem;
      background:
        radial-gradient(120% 80% at 50% 10%, rgba(255,255,255,0.18), transparent 55%),
        linear-gradient(190deg, #17322f 0%, #101614 60%);
      position: relative;
    }
    .ph-media::before {
      content: ""; position: absolute; inset: 0;
      background:
        repeating-linear-gradient(90deg, transparent 0 22px, rgba(255,255,255,0.04) 22px 23px);
      opacity: .6;
    }
    .ph-media::after {
      content: ""; position: absolute; left: 0; right: 0; top: 58%;
      height: 2px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    }
    .ph-media span { position: relative; z-index: 1; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }

    /* ============================================================
       5 · DREI PFADE — dunkle Karten
       ============================================================ */
    .paths-grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
    @media (min-width: 820px) { .paths-grid { grid-template-columns: repeat(3, 1fr); } }
    .pcard {
      padding: clamp(1.8rem, 3vw, 2.6rem);
      border: 1px solid var(--line-dark);
      border-radius: var(--radius-lg);
      background: linear-gradient(180deg, var(--night-2), var(--night));
      display: flex; flex-direction: column;
      transition: transform .35s cubic-bezier(.2,.7,.3,1), border-color .35s, background .35s;
    }
    .pcard:hover { transform: translateY(-6px); border-color: rgba(255,255,255,0.5); }
    .pcard__no { font-family: var(--font-display); color: var(--gold); font-size: 0.95rem; letter-spacing: 0.1em; margin-bottom: 1.1rem; }
    .pcard h3 { font-size: 1.55rem; margin-bottom: 0.8rem; }
    .pcard p { color: var(--muted-dark); flex: 1; margin-bottom: 1.6rem; font-size: 0.98rem; }

    /* ============================================================
       6 · JUNIOREN & CAMPS
       ============================================================ */
    .split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
    @media (min-width: 900px) { .split { grid-template-columns: 1.05fr 1fr; } .split--rev > .split__media { order: 2; } }
    .split__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 5/4; background: var(--cream-2); }
    .split__media img { width: 100%; height: 100%; object-fit: cover; }

    .camps { margin-top: 2rem; display: grid; gap: 0.6rem; }
    .camp {
      display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.2rem; align-items: baseline;
      padding: 1rem 0; border-top: 1px solid var(--line-light);
    }
    .camp:last-child { border-bottom: 1px solid var(--line-light); }
    .camp__date { font-family: var(--font-display); font-weight: 700; color: var(--clay); font-size: 1.05rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .camp__name { color: var(--night); font-weight: 500; }

    /* ============================================================
       7 · TRAINER-TEAM
       ============================================================ */
    .team-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.2rem); }
    @media (min-width: 820px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
    .tcard { border: 1px solid var(--line-dark); border-radius: var(--radius-lg); overflow: hidden; background: var(--night-2); }
    /* Einspaltig (Handy/Tablet) würde ein 1:1-Portrait über die ganze
       Breite laufen und den Viewport füllen — ein Gesicht in 700 px Höhe
       aus einer 390-px-Vorlage. Deshalb hier gedeckelt und breiter. */
    .tcard__media { aspect-ratio: 16/10; max-height: 340px; overflow: hidden; background: var(--night-3); position: relative; }
    @media (min-width: 820px) { .tcard__media { aspect-ratio: 1/1; max-height: none; } }
    .tcard__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; filter: grayscale(0.15) contrast(1.02); }
    .tcard__body { padding: 1.5rem 1.5rem 1.8rem; }
    .tcard__body h3 { font-size: 1.35rem; }
    .tcard__role { color: var(--gold); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; margin: 0.4rem 0 0.9rem; }
    .tcard__bio { color: var(--muted-dark); font-size: 0.95rem; }
    .tcard__tel { display: inline-flex; align-items: center; gap: 0.5em; margin-top: 1.1rem; color: var(--cream); font-size: 0.92rem; font-weight: 500; }
    .tcard__tel:hover { color: var(--gold); }

    /* Jiri Granat — ATP-Story hervorheben */
    .tcard--feature { position: relative; }
    .atp-badge {
      position: absolute; top: 1rem; right: 1rem; z-index: 2;
      text-align: right;
      background: rgba(22,24,26,0.55); backdrop-filter: blur(6px);
      border: 1px solid rgba(255,255,255,0.28);
      border-radius: 8px; padding: 0.5rem 0.8rem;
    }
    .atp-badge b { display: block; font-family: var(--font-display); color: var(--cream); font-size: 1.6rem; line-height: 1; }
    .atp-badge small { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream); opacity: 0.8; }

    /* ============================================================
       8 · RESTAURANT MATCHBALL
       ============================================================ */
    .rest { }
    .rest .split__media { aspect-ratio: 4/3; }
    .rest__hours { list-style: none; margin: 1.6rem 0; border-top: 1px solid var(--line-light); }
    .rest__hours li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line-light); font-size: 0.98rem; }
    .rest__hours li span:first-child { color: var(--night); font-weight: 500; }
    .rest__hours li span:last-child { color: var(--neutral); font-variant-numeric: tabular-nums; }
    .rest__resv { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; }
    .rest__tel { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: var(--clay); }

    /* Warmer Design-Placeholder für Restaurant-Foto */
    .ph-rest {
      width: 100%; height: 100%; position: relative;
      display: flex; align-items: flex-end; padding: 1.4rem;
      background:
        radial-gradient(90% 70% at 30% 20%, rgba(255,255,255,0.10), transparent 60%),
        linear-gradient(200deg, #3A3F44 0%, #23272B 45%, #16181A 100%);
    }
    .ph-rest span { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream); background: rgba(22,24,26,0.35); padding: 0.35rem 0.7rem; border-radius: 100px; }

    /* ============================================================
       9 · TERMINE 2026 — Timeline
       ============================================================ */
    .timeline { position: relative; margin-top: 1rem; }
    .tevent {
      display: grid; grid-template-columns: 7.5rem 1fr; gap: 1.2rem 1.8rem;
      padding: 1.5rem 0;
      border-top: 1px solid var(--line-dark);
      position: relative;
      transition: padding-left .3s;
    }
    .tevent:last-child { border-bottom: 1px solid var(--line-dark); }
    .tevent__date { font-family: var(--font-display); font-weight: 700; color: var(--gold); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
    .tevent__title { font-size: 1.15rem; font-family: var(--font-display); font-weight: 500; }
    .tevent__time { color: var(--muted-dark); font-size: 0.92rem; margin-top: 0.2rem; }
    .tevent::after {
      content: ""; position: absolute; left: -1.5rem; top: 2rem;
      width: 7px; height: 7px; border-radius: 50%; background: var(--clay);
      opacity: 0; transform: scale(0);
      transition: opacity .4s, transform .4s;
    }
    @media (min-width: 720px) {
      .tevent { padding-left: 0; }
      .tevent:hover::after { opacity: 1; transform: scale(1); }
    }
    @media (max-width: 560px) {
      .tevent { grid-template-columns: 1fr; gap: 0.3rem; }
    }

    /* ============================================================
       10 · MITGLIEDSCHAFT & WARTELISTE
       ============================================================ */
    .member-wrap { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
    @media (min-width: 900px) { .member-wrap { grid-template-columns: 1fr 1fr; } }
    .fees { border-top: 1px solid var(--line-light); }
    .fee { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line-light); }
    .fee span:first-child { color: var(--night); }
    .fee span:last-child { font-family: var(--font-display); font-weight: 500; color: var(--night); font-variant-numeric: tabular-nums; }
    .fee small { color: var(--neutral); font-weight: 400; }

    .wait-note {
      border: 1px solid var(--line-light);
      border-left: 3px solid var(--clay);
      border-radius: var(--radius);
      padding: 1.4rem 1.5rem;
      background: rgba(255,255,255,0.05);
      margin-top: 1.5rem;
      font-size: 0.95rem;
      color: var(--neutral);
    }

    /* ============================================================
       11 · SOCIAL PROOF
       ============================================================ */
    .proof { text-align: center; }
    .proof__big {
      font-family: var(--font-display); font-weight: 700;
      font-size: clamp(1.6rem, 1rem + 3.5vw, 3.2rem);
      line-height: 1.15; max-width: 20ch; margin: 0 auto 3rem;
    }
    .proof__big b { color: var(--gold); }
    .quotes { display: grid; gap: 1.5rem; text-align: left; }
    @media (min-width: 760px) { .quotes { grid-template-columns: 1fr 1fr; } }
    .quote {
      border: 1px dashed var(--line-dark);
      border-radius: var(--radius-lg);
      padding: 1.8rem;
      background: rgba(255,255,255,0.02);
    }
    .quote p { font-family: var(--font-display); font-size: 1.2rem; color: var(--cream); opacity: 0.55; font-style: italic; }
    .quote footer { margin-top: 1rem; color: var(--gold); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; }

    /* ============================================================
       12 · KONTAKT & FOOTER
       ============================================================ */
    .contact-wrap { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
    @media (min-width: 900px) { .contact-wrap { grid-template-columns: 0.9fr 1.1fr; } }

    .contact-info h3 { font-size: 1.6rem; margin-bottom: 1.2rem; }
    .contact-info address { font-style: normal; color: var(--muted-dark); line-height: 1.9; }
    .contact-info a:hover { color: var(--gold); }
    .contact-info .hint { margin-top: 1.4rem; font-size: 0.88rem; color: var(--muted-dark); border-left: 2px solid var(--gold); padding-left: 0.9rem; }

    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
    .field { display: flex; flex-direction: column; gap: 0.4rem; }
    .field--full { grid-column: 1 / -1; }
    .field label { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-dark); }
    .field input, .field textarea {
      font-family: var(--font-body); font-size: 1rem;
      background: var(--night-2); color: var(--cream);
      border: 1px solid var(--line-dark); border-radius: var(--radius);
      padding: 0.85rem 1rem; width: 100%;
      transition: border-color .2s, background .2s;
    }
    /* Fokus muss ohne Akzentfarbe auskommen: sichtbarer Rahmen plus Ring.
       Die frühere Regel färbte den Rahmen auf --clay — seit der CI-Umstellung
       ist das Schwarz und auf dunklem Grund unsichtbar. */
    .field input:focus, .field textarea:focus {
      outline: none;
      border-color: var(--cream);
      background: var(--night-3);
      box-shadow: 0 0 0 3px rgba(255,255,255,0.22);
    }
    .field input:focus-visible, .field textarea:focus-visible {
      outline: 2px solid var(--cream);
      outline-offset: 2px;
    }
    .field textarea { resize: vertical; min-height: 120px; }

    .site-footer { background: var(--night); border-top: 1px solid var(--line-dark); padding-block: clamp(3rem, 6vw, 5rem); }
    .sponsors { margin-bottom: 3.5rem; }
    .sponsors__label { text-align: center; color: var(--muted-dark); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 2rem; }
    /* Partnerleiste. Die Logos sind vorab zu einfarbigen Creme-Silhouetten
       auf transparentem Grund aufbereitet (tools/build-sponsoren.sh) und
       stehen deshalb direkt auf der dunklen Fläche — ohne die weissen
       Kacheln, die vorher wie aufgeklebt wirkten.
       Alle Dateien sind 440×160 mit einheitlichem Innenabstand: eine feste
       Höhe genügt, damit die Marken optisch gleich gross wirken, ohne dass
       jedes Logo einzeln nachjustiert werden muss. */
    /* Raster statt Umbruch: Bei zwölf Logos und freiem Flex-Wrap bleibt in
       der letzten Zeile ein Rest von zwei stehen. 3, 4 und 6 Spalten teilen
       zwölf glatt — damit ist jede Zeile voll. */
    .sponsors__grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      align-items: center; justify-items: center;
      gap: clamp(1.4rem, 3vw, 2.4rem) clamp(1rem, 2.5vw, 2rem);
    }
    @media (min-width: 620px) { .sponsors__grid { grid-template-columns: repeat(4, 1fr); } }
    @media (min-width: 980px) { .sponsors__grid { grid-template-columns: repeat(6, 1fr); } }
    .sponsors__grid .sponsor { display: inline-flex; align-items: center; }
    .sponsors__grid img {
      height: clamp(38px, 4.4vw, 52px); width: auto;
      opacity: 0.58;
      transition: opacity .3s ease, transform .3s ease;
    }
    .sponsors__grid .sponsor:hover img { opacity: 1; transform: scale(1.03); }

    /* Vollständige Seitenübersicht im Fuss — auf einer Mehrseiten-Site ist
       das der zweite Navigationsweg und für Suchmaschinen der erste. */
    .footer-sitemap {
      display: grid; gap: 0.75rem 2rem;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      padding-block: 2.5rem;
      border-top: 1px solid var(--line-dark);
      margin-top: 3rem;
    }
    @media (min-width: 620px) { .footer-sitemap { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    @media (min-width: 960px) { .footer-sitemap { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
    .footer-sitemap a {
      color: var(--muted-dark); font-size: 0.9rem;
      transition: color .2s;
    }
    .footer-sitemap a:hover { color: var(--cream); }

    .footer-bottom {
      display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between;
      padding-top: 2.5rem; border-top: 1px solid var(--line-dark);
      color: var(--muted-dark); font-size: 0.85rem;
    }
    .footer-bottom nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
    .footer-bottom a:hover { color: var(--gold); }
    .footer-brand { display: flex; align-items: center; gap: 0.7rem; }
    .footer-brand img { height: 30px; filter: invert(1) brightness(1.35); }

    /* ============================================================
       13 · KINO — vollflächige Bildsektionen
       Der Rhythmus der Seite: Information in der Spalte, dann ein Bild
       über die volle Breite, das nur eine Sache sagt. Das Bild steht
       fest, während die Sektion darüber wegscrollt (billiger Parallax
       ohne JS: position:sticky auf der Bildebene).
       ============================================================ */
    .cinema {
      position: relative;
      min-height: clamp(520px, 88vh, 900px);
      display: grid;
      /* align-items richtet den Inhalt IN der Zeile aus — die Zeile selbst
         sitzt sonst mittig im höheren Container. Dafür align-content. */
      align-items: end;
      align-content: end;
      /* Die generische Sektionsregel legt 12vw Innenabstand oben und unten
         an. Eine vollflächige Bildsektion braucht den nicht — er schöbe den
         Text von der Unterkante weg in die Mitte des Bildes. */
      padding-block: 0;
      overflow: hidden;
      background: var(--night);
      isolation: isolate;
    }
    .cinema--tall { min-height: clamp(620px, 100vh, 1040px); }
    .cinema__media {
      position: absolute; inset: 0; z-index: 0;
      line-height: 0;
    }
    .cinema__media img {
      width: 100%; height: 100%; object-fit: cover;
      object-position: var(--focus, 50% 50%);
      transform: scale(1.08);
      transition: transform 2.2s cubic-bezier(.2,.7,.25,1);
    }
    .cinema.in .cinema__media img { transform: scale(1); }
    /* Unten satt ins Dunkel, damit die Schrift ohne Kasten trägt. */
    .cinema__media::after {
      content: ""; position: absolute; inset: 0;
      background: linear-gradient(180deg,
                  rgba(22,24,26,0.55) 0%, rgba(22,24,26,0.12) 28%,
                  rgba(22,24,26,0.45) 62%, rgba(22,24,26,0.94) 100%);
    }
    .cinema__body {
      position: relative; z-index: 1;
      width: 100%; max-width: var(--maxw);
      margin-inline: auto;
      padding: var(--pad);
      padding-block-end: clamp(3rem, 7vw, 6rem);
      color: var(--cream);
    }
    .cinema__body .eyebrow { color: var(--gold-light); }
    .cinema__h {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: clamp(2rem, 1rem + 4.6vw, 4.4rem);
      line-height: 1.03;
      letter-spacing: -0.02em;
      margin: 0.7rem 0 0;
      max-width: 16ch;
      text-wrap: balance;
    }
    .cinema__p {
      margin-top: 1.2rem; max-width: 46ch;
      color: rgba(255,255,255,0.86);
      font-size: clamp(1rem, 0.95rem + 0.3vw, 1.18rem);
      line-height: 1.65;
    }
    .cinema__meta {
      margin-top: 1.6rem; display: flex; flex-wrap: wrap;
      gap: 0.5rem 1.6rem; align-items: center;
      font-size: 0.76rem; letter-spacing: 0.2em; text-transform: uppercase;
      color: rgba(255,255,255,0.62);
    }
    /* Zentrierte Variante für die reinen Stimmungsbilder */
    /* Seitenkopf der Unterseiten: etwas flacher als eine Kino-Sektion und
       oben so viel Luft, dass der fixierte Header nicht auf der Zeile liegt. */
    .cinema--page {
      min-height: clamp(440px, 66vh, 660px);
    }
    .cinema--page .cinema__body { padding-block-start: 8rem; }

    .cinema--center { align-items: center; align-content: center; text-align: center; }
    .cinema--center .cinema__body { padding-block-end: var(--pad); }
    .cinema--center .cinema__h { max-width: 20ch; margin-inline: auto; }
    .cinema--center .cinema__p { margin-inline: auto; }

    @media (prefers-reduced-motion: reduce) {
      .cinema__media img { transform: none !important; transition: none; }
    }

    /* ============================================================
       14 · MOSAIK — Bildraster mit Bildunterschriften
       Für die Detailebene: Ballwand, Spielplatz, Flutlicht, Winter.
       Einzeln wären das Schnappschüsse; im Raster ergeben sie das
       Bild einer Anlage, die das ganze Jahr benutzt wird.
       ============================================================ */
    .mosaic {
      display: grid; gap: clamp(0.6rem, 1.2vw, 1rem);
      grid-template-columns: repeat(2, 1fr);
      margin-top: clamp(2.5rem, 5vw, 4rem);
    }
    @media (min-width: 760px)  { .mosaic { grid-template-columns: repeat(4, 1fr); } }
    .mfig { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--night-2); }
    .mfig img {
      display: block; width: 100%; height: 100%; object-fit: cover;
      aspect-ratio: 4/3;
      transition: transform .9s cubic-bezier(.2,.7,.25,1), filter .6s ease;
    }
    .mfig:hover img { transform: scale(1.05); }
    .mfig figcaption {
      position: absolute; inset: auto 0 0 0;
      padding: 1.6rem 0.9rem 0.75rem;
      font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
      color: #fff;
      background: linear-gradient(180deg, rgba(22,24,26,0) 0%, rgba(22,24,26,0.82) 70%);
    }
    /* Zwei Kacheln dürfen gross sein — sonst wirkt das Raster wie eine Tabelle */
    @media (min-width: 760px) {
      .mfig--wide { grid-column: span 2; }
      .mfig--wide img { aspect-ratio: 8/3; }
      .mfig--tall { grid-row: span 2; }
      .mfig--tall img { aspect-ratio: 2/3; height: 100%; }
    }

    /* ============================================================
       15 · BILDSTREIFEN — horizontale Reihe, mobil wischbar
       ============================================================ */
    .strip {
      display: grid; grid-auto-flow: column;
      grid-auto-columns: minmax(240px, 1fr);
      gap: clamp(0.6rem, 1.2vw, 1rem);
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      padding-bottom: 0.5rem;
      margin-top: clamp(2rem, 4vw, 3rem);
      scrollbar-width: none;
    }
    .strip::-webkit-scrollbar { display: none; }
    .strip > * { scroll-snap-align: start; }
    /* Das Rohmaterial ist durchweg Querformat. Ein Hochformat-Zuschnitt
       sähe redaktioneller aus, schneidet aber Köpfe ab — deshalb 4:3 wie
       die Quellen, nur der Bildausschnitt sitzt etwas höher. */
    .strip img {
      display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover;
      object-position: 50% 38%;
      border-radius: var(--radius);
    }
    @media (min-width: 900px) {
      .strip { grid-auto-columns: 1fr; overflow: visible; }
    }

    /* ============================================================
       16 · PFAD-KARTEN mit Bild
       ============================================================ */
    .pcard__media {
      position: relative; margin: -1px -1px 1.6rem; overflow: hidden;
      border-radius: var(--radius) var(--radius) 0 0;
      aspect-ratio: 16/10; background: var(--night-3);
    }
    .pcard__media img {
      width: 100%; height: 100%; object-fit: cover;
      transition: transform 1s cubic-bezier(.2,.7,.25,1);
    }
    .pcard:hover .pcard__media img { transform: scale(1.05); }

    /* ============================================================
       17 · ARCHIV — Federer, ITF, Historie
       Dunkle Sektionen mit einem grossen und mehreren kleinen Bildern.
       ============================================================ */
    .archive { display: grid; gap: clamp(1.6rem, 3.4vw, 3rem); align-items: start; }
    @media (min-width: 900px) { .archive { grid-template-columns: 1.15fr 1fr; } }
    .archive--rev .archive__text { order: -1; }
    @media (min-width: 900px) { .archive--rev .archive__media { order: 2; } .archive--rev .archive__text { order: 1; } }

    .archive__media { display: grid; gap: clamp(0.5rem, 1vw, 0.8rem); grid-template-columns: repeat(2, 1fr); }
    .archive__media figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius); background: var(--night-2); }
    .archive__media img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1/1; }
    .archive__media .big { grid-column: span 2; }
    .archive__media .big img { aspect-ratio: 16/10; }
    .archive__media figcaption {
      position: absolute; inset: auto 0 0 0; padding: 1.4rem 0.75rem 0.6rem;
      font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
      color: rgba(255,255,255,0.9);
      background: linear-gradient(180deg, rgba(22,24,26,0) 0%, rgba(22,24,26,0.8) 72%);
    }

    /* Redaktionelle Notiz — was der Verein noch beisteuern muss.
       Gehört in den Entwurf, nicht in die fertige Seite. */
    .todo {
      margin-top: 1.6rem; padding: 0.85rem 1.1rem;
      border: 1px dashed var(--line-dark);
      border-radius: var(--radius);
      font-size: 0.82rem; line-height: 1.6;
      color: var(--muted-dark);
    }
    .sec-light .todo { border-color: var(--line-light); color: var(--neutral); }
    .todo b { color: inherit; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.72rem; }

    /* ============================================================
       18 · HISTORIE — damals gegen heute
       ============================================================ */
    .then-now { display: grid; gap: clamp(0.8rem, 2vw, 1.4rem); }
    @media (min-width: 760px) { .then-now { grid-template-columns: 1fr 1fr; } }
    .then-now figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius); }
    .then-now img { display: block; width: 100%; aspect-ratio: 3/2; object-fit: cover; }
    .then-now figcaption {
      position: absolute; top: 0.8rem; left: 0.8rem;
      font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.18em;
      padding: 0.35rem 0.7rem; border-radius: 999px;
      background: rgba(22,24,26,0.82); color: #fff;
    }
    .milestones {
      display: grid; gap: 0; margin-top: clamp(2.5rem, 5vw, 4rem);
      border-top: 1px solid var(--line-dark);
    }
    @media (min-width: 760px) { .milestones { grid-template-columns: repeat(4, 1fr); } }
    .ms { padding: 1.5rem 0; border-bottom: 1px solid var(--line-dark); }
    @media (min-width: 760px) {
      .ms { border-bottom: none; border-right: 1px solid var(--line-dark); padding: 1.8rem 1.4rem 1.8rem 0; }
      .ms:last-child { border-right: none; }
    }
    .ms__year {
      font-family: var(--font-display); font-weight: 600;
      font-size: clamp(1.6rem, 1rem + 2vw, 2.4rem);
      line-height: 1; color: var(--cream);
      font-variant-numeric: tabular-nums;
    }
    .ms__txt { margin-top: 0.6rem; color: var(--muted-dark); font-size: 0.94rem; line-height: 1.6; }

    /* ============================================================
       19 · VORSTAND
       Die Portraits sind nur 300 px breit — also klein einsetzen,
       nicht aufblasen. Als Reihe funktioniert das besser als Karten.
       ============================================================ */
    .board {
      display: grid; gap: clamp(1.2rem, 2.5vw, 2rem);
      grid-template-columns: repeat(2, 1fr);
      margin-top: clamp(2.5rem, 5vw, 3.5rem);
    }
    @media (min-width: 620px) { .board { grid-template-columns: repeat(4, 1fr); } }
    @media (min-width: 980px) { .board { grid-template-columns: repeat(7, 1fr); } }
    .bmem { text-align: center; }
    .bmem img {
      /* height:auto ist hier nicht kosmetisch: ohne sie gewinnt das
         height-Attribut aus dem HTML gegen aspect-ratio, und aus den
         Kreisen werden Ellipsen. */
      width: 100%; height: auto; max-width: 130px; aspect-ratio: 1/1; object-fit: cover;
      object-position: 50% 22%;
      border-radius: 50%; display: block; margin: 0 auto 0.9rem;
      /* Dauerhaft Graustufen, nicht nur bis zum Hover: Die sieben Vorlagen
         kommen aus sieben verschiedenen Situationen — Schneeberge, Hecke,
         Studio-Schwarzweiss, Gartenzaun. In Farbe nebeneinander ist das
         eine Sammlung, keine Reihe. Beim Darüberfahren wird nur aufgehellt. */
      filter: grayscale(1) contrast(1.04);
      transition: filter .4s ease;
    }
    .bmem:hover img { filter: grayscale(1) contrast(1.04) brightness(1.12); }
    .bmem__name { font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; }
    .bmem__role { margin-top: 0.25rem; font-size: 0.76rem; letter-spacing: 0.1em;
                  text-transform: uppercase; color: var(--muted-dark); }
    .sec-light .bmem__role { color: var(--neutral); }

    /* ============================================================
       19b · JUNIOREN — Intro und Camp-Karten
       Vorher lag hier ein 4:3-Bild in einer viel höheren Spalte, daneben
       die vier Camps als Tabelle mit Haarlinien. Das Bild schwamm in
       Leerraum, und die wichtigste Information der Seite für Eltern sah
       aus wie ein Kassenzettel.
       Jetzt: Das Bild füllt seine Spalte, und die Camps sind vier Karten
       mit eigenem Motiv auf dunkler Fläche — die Daten stehen damit im
       einzigen Block der Sektion, der ins Auge springt.
       ============================================================ */
    .jr { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
    @media (min-width: 900px) {
      .jr { grid-template-columns: 1fr 0.8fr; align-items: stretch; }
    }
    .jr__text { display: flex; flex-direction: column; justify-content: center; }
    .jr__media {
      position: relative; overflow: hidden;
      border-radius: var(--radius-lg);
      min-height: clamp(320px, 46vw, 520px);
      background: var(--night-2);
    }
    .jr__media img {
      position: absolute; inset: 0;
      width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%;
    }

    .jr-stats {
      display: flex; flex-wrap: wrap;
      gap: 1.4rem clamp(1.8rem, 4vw, 3.2rem);
      margin-top: clamp(1.8rem, 3vw, 2.6rem);
    }
    .jr-stat b {
      display: block; font-family: var(--font-display); font-weight: 600;
      font-size: clamp(1.7rem, 1.1rem + 2vw, 2.5rem); line-height: 1;
      font-variant-numeric: tabular-nums;
    }
    .jr-stat span {
      display: block; margin-top: 0.45rem;
      font-size: 0.74rem; letter-spacing: 0.15em; text-transform: uppercase;
      color: var(--neutral);
    }

    .camps-panel {
      margin-top: clamp(3rem, 6vw, 5rem);
      background: var(--night); color: var(--cream);
      border-radius: var(--radius-lg);
      padding: clamp(1.5rem, 3.5vw, 3rem);
    }
    .camps-panel__head {
      display: flex; flex-wrap: wrap; gap: 0.8rem 2rem;
      align-items: baseline; justify-content: space-between;
      margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
    }
    .camps-panel__head h3 {
      font-family: var(--font-display); font-weight: 600;
      font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem);
    }
    .camps-panel__note {
      font-size: 0.82rem; color: var(--muted-dark); letter-spacing: 0.02em;
    }
    .camps-grid { display: grid; gap: clamp(0.7rem, 1.5vw, 1.1rem); grid-template-columns: repeat(2, 1fr); }
    @media (min-width: 820px) { .camps-grid { grid-template-columns: repeat(4, 1fr); } }
    .ccard {
      background: var(--night-2);
      border: 1px solid var(--line-dark);
      border-radius: var(--radius);
      overflow: hidden; display: flex; flex-direction: column;
      transition: transform .4s cubic-bezier(.2,.7,.25,1), border-color .4s;
    }
    .ccard:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.34); }
    .ccard__media { aspect-ratio: 4/3; overflow: hidden; background: var(--night-3); }
    .ccard__media img {
      width: 100%; height: 100%; object-fit: cover;
      transition: transform .8s cubic-bezier(.2,.7,.25,1);
    }
    .ccard:hover .ccard__media img { transform: scale(1.06); }
    .ccard__body { padding: 0.95rem 1rem 1.2rem; }
    .ccard__saison {
      font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--muted-dark);
    }
    .ccard__datum {
      margin-top: 0.45rem; font-family: var(--font-display); font-weight: 600;
      font-size: 1.02rem; line-height: 1.25;
    }
    .ccard__name { margin-top: 0.25rem; font-size: 0.86rem; color: var(--muted-dark); }
    .camps-panel__fuss {
      margin-top: clamp(1.5rem, 3vw, 2.2rem);
      display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center;
    }
    .camps-panel__fuss .btn { background: var(--cream); color: var(--night); }
    .camps-panel__fuss .btn:hover { background: #fff; }

    /* ============================================================
       19c · WHATSAPP-KNOPF
       Fährt ein, sobald die Bühne durchgescrollt ist — oben würde er den
       Aufschlag stören. Bewusst in der Hausfarbe statt im WhatsApp-Grün:
       Die Seite führt genau eine Aktionsfarbe, und ein grüner Kreis wäre
       das einzige bunte Element auf allen fünfzehn Seiten. Erkennbar
       bleibt er über das Zeichen und die Beschriftung.
       ============================================================ */
    .wa {
      position: fixed; z-index: 90;
      right: clamp(1rem, 3vw, 2rem);
      bottom: clamp(1rem, 3vw, 2rem);
      display: flex; flex-direction: column; align-items: flex-end; gap: 0.7rem;
      transform: translateY(140%);
      opacity: 0;
      pointer-events: none;
      transition: transform .5s cubic-bezier(.2,.7,.25,1), opacity .35s ease;
    }
    .wa.on { transform: translateY(0); opacity: 1; pointer-events: auto; }
    /* Bei offenem Menü aus dem Weg */
    html.nav-open .wa { opacity: 0; pointer-events: none; transform: translateY(140%); }

    .wa__btn {
      appearance: none; border: 1px solid var(--line-dark); cursor: pointer;
      display: inline-flex; align-items: center; gap: 0.6rem;
      background: var(--night); color: var(--cream);
      font-family: var(--font-body); font-size: 0.92rem; font-weight: 500;
      padding: 0.85rem 1.25rem;
      border-radius: 999px;
      box-shadow: 0 10px 34px rgba(0,0,0,0.42);
      transition: transform .25s ease, background .25s ease;
    }
    .wa__btn:hover { transform: translateY(-2px); background: var(--night-2); }
    .wa__btn svg { width: 21px; height: 21px; fill: currentColor; flex: none; }
    @media (max-width: 520px) {
      /* Auf schmalen Geräten nur das Zeichen — der Text nähme die halbe Breite */
      .wa__btn { padding: 0.9rem; }
      .wa__btn .wa__text { display: none; }
    }

    .wa__karte {
      width: min(21rem, calc(100vw - 2rem));
      background: var(--cream); color: var(--night);
      border-radius: var(--radius);
      padding: 1.15rem 1.25rem 1.3rem;
      box-shadow: 0 18px 50px rgba(0,0,0,0.45);
      display: none;
    }
    .wa__karte.on { display: block; }
    .wa__karte h3 {
      font-family: var(--font-display); font-weight: 600; font-size: 1.02rem;
      display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    }
    .wa__zu {
      appearance: none; border: 0; background: none; cursor: pointer;
      font-size: 1.3rem; line-height: 1; color: var(--neutral); padding: 0 0.2rem;
    }
    .wa__karte p { margin-top: 0.55rem; font-size: 0.88rem; line-height: 1.65; color: var(--neutral); }
    .wa__kanaele { margin-top: 1rem; display: grid; gap: 0.5rem; }
    .wa__kanal {
      display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
      padding: 0.6rem 0.75rem;
      border: 1px solid var(--line-light); border-radius: 8px;
      font-size: 0.88rem; color: var(--night);
      transition: background .2s;
    }
    .wa__kanal:hover { background: var(--cream-2); }
    .wa__kanal span:last-child { color: var(--neutral); font-size: 0.8rem; white-space: nowrap; }

    @media (prefers-reduced-motion: reduce) {
      .wa { transition: opacity .2s ease; transform: none; }
      .wa.on { transform: none; }
      html.nav-open .wa { transform: none; }
    }

    /* ============================================================
       20 · GALERIE
       ============================================================ */
    .gal__titel {
      font-family: var(--font-display); font-weight: 600;
      font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.5rem);
      margin: clamp(2.5rem, 5vw, 4rem) 0 1.4rem;
    }
    .gal__titel:first-child { margin-top: 0; }
    .gallery {
      display: grid; gap: clamp(0.5rem, 1vw, 0.85rem);
      grid-template-columns: repeat(2, 1fr);
    }
    @media (min-width: 620px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
    @media (min-width: 980px) { .gallery { grid-template-columns: repeat(4, 1fr); } }
    .gfig {
      appearance: none; border: 0; padding: 0; margin: 0; cursor: pointer;
      background: var(--night-2); border-radius: var(--radius);
      overflow: hidden; display: block; line-height: 0;
    }
    .gfig img {
      width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover;
      transition: transform .7s cubic-bezier(.2,.7,.25,1), opacity .3s;
    }
    .gfig:hover img { transform: scale(1.06); }
    .gfig:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }

    /* Lightbox — bewusst schlicht: ein Bild, ein Schliessen, Pfeiltasten. */
    .lightbox {
      position: fixed; inset: 0; z-index: 200;
      display: none; place-items: center;
      background: rgba(10,11,12,0.94);
      padding: clamp(1rem, 4vw, 3rem);
    }
    .lightbox[open], .lightbox.on { display: grid; }
    .lightbox img {
      max-width: 100%; max-height: 84vh; width: auto; height: auto;
      border-radius: var(--radius); display: block;
    }
    .lightbox__cap {
      margin: 1rem auto 0; text-align: center; color: var(--muted-dark);
      font-size: 0.88rem; max-width: 60ch;
    }
    .lightbox__close, .lightbox__nav {
      position: absolute; appearance: none; border: 1px solid var(--line-dark);
      background: rgba(22,24,26,0.7); color: var(--cream);
      width: 46px; height: 46px; border-radius: 50%;
      font-size: 1.2rem; line-height: 1; cursor: pointer;
    }
    .lightbox__close { top: clamp(1rem,3vw,2rem); right: clamp(1rem,3vw,2rem); }
    .lightbox__nav--prev { left: clamp(0.5rem,2vw,2rem); top: 50%; transform: translateY(-50%); }
    .lightbox__nav--next { right: clamp(0.5rem,2vw,2rem); top: 50%; transform: translateY(-50%); }
    .lightbox__close:hover, .lightbox__nav:hover { background: var(--night-3); }

    /* ============================================================
       21 · SHOP
       ============================================================ */
    .shop-grid { display: grid; gap: clamp(1.2rem, 2.5vw, 2rem); grid-template-columns: repeat(2, 1fr); }
    @media (min-width: 760px) { .shop-grid { grid-template-columns: repeat(3, 1fr); } }
    @media (min-width: 1040px) { .shop-grid { grid-template-columns: repeat(5, 1fr); } }
    .scard { background: var(--night-2); border: 1px solid var(--line-dark); border-radius: var(--radius); overflow: hidden; }
    .scard__media { background: var(--cream); aspect-ratio: 1/1; display: grid; place-items: center; padding: 1rem; }
    .scard__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; }
    .scard__body { padding: 1rem 1.1rem 1.3rem; }
    .scard__body h3 { font-family: var(--font-display); font-size: 1rem; font-weight: 600; }
    .scard__meta { margin-top: 0.4rem; font-size: 0.78rem; line-height: 1.5; color: var(--muted-dark); }
    .scard__preis { margin-top: 0.7rem; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }

    /* ============================================================
       22 · KARTE & FLIESSTEXT (Rechtsseiten)
       ============================================================ */
    .karte { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-dark); line-height: 0; }
    .karte iframe { width: 100%; height: clamp(300px, 46vw, 520px); border: 0; display: block; filter: grayscale(1) invert(0.92) contrast(0.9); }

    .fliess { max-width: 68ch; }
    .fliess h3 {
      font-family: var(--font-display); font-weight: 600;
      font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
      margin: 2.2rem 0 0.6rem;
    }
    .fliess h3:first-child { margin-top: 0; }
    .fliess p { color: var(--neutral); line-height: 1.85; margin-bottom: 0.9rem; }
    .sec-dark .fliess p { color: var(--muted-dark); }

    /* ============================================================
       Reveal-on-scroll (generisch, IntersectionObserver)
       ============================================================ */
    .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1); }
    .reveal.in { opacity: 1; transform: none; }
    .reveal[data-delay="1"] { transition-delay: .1s; }
    .reveal[data-delay="2"] { transition-delay: .2s; }
    .reveal[data-delay="3"] { transition-delay: .3s; }

    @media (prefers-reduced-motion: reduce) {
      .reveal, .fcard__media img, .btn, .pcard { transition: none !important; }
      .reveal { opacity: 1; transform: none; }
      .fcard__media img { clip-path: none; transform: none; }
    }

    /* Skip-Link */
    .skip { position: absolute; left: -999px; top: 0; z-index: 200; background: var(--clay); color: var(--cream); padding: 0.8rem 1.2rem; border-radius: 0 0 8px 0; }
    .skip:focus { left: 0; }

    /* Feine Labels stehen teils auf hellen, teils auf dunklen Flächen.
       Ein Wert kann beides nicht bedienen — auf Dunkel die helle Variante. */
    .sec-dark .eyebrow, .serve .eyebrow,
    .sec-dark .tlink, .tcard__role, .pcard__no,
    .fcard__tag--soon, .ph-media span, .serve__boot-label,
    .stats .eyebrow, .stat__num, .tevent__date,
    .serve__headline .w--accent {
      color: var(--gold-light);
    }
    .sec-dark .eyebrow::before, .serve .eyebrow::before { background: var(--gold-light); }
    .nav a:hover { color: var(--cream); }
    .tcard__tel:hover { color: var(--gold-light); }


    /* Die rechte Hälfte der Terminliste stand leer. Der Monat als ruhiger
       Marker füllt sie mit Information statt Dekoration und macht die
       Jahresstruktur auf einen Blick lesbar. */
    .tevent { grid-template-columns: 7.5rem 1fr auto; align-items: center; }
    .tevent__month {
      font-family: var(--font-display);
      font-size: clamp(1.6rem, 1rem + 2.2vw, 3rem);
      font-weight: 700; line-height: 1;
      letter-spacing: -0.02em;
      color: var(--cream); opacity: 0.10;
      justify-self: end;
      transition: opacity .4s ease, transform .4s cubic-bezier(.2,.8,.3,1);
      user-select: none;
    }
    .tevent:hover .tevent__month { opacity: 0.28; transform: translateX(-4px); }
    .tevent { transition: padding-left .35s cubic-bezier(.2,.8,.3,1), background-color .35s ease; }
    .tevent:hover { padding-left: 0.9rem; background: rgba(255,255,255,0.025); }
    .tevent:hover .tevent__date { opacity: 1; }
    @media (max-width: 700px) {
      .tevent { grid-template-columns: 6.2rem 1fr; }
      /* "Doppel-Clubmeisterschaften" passt auf 320 px sonst nicht
         und schiebt das Dokument breiter als das Fenster. */
      .tevent__title, .tevent__time { overflow-wrap: anywhere; hyphens: auto; }
      .tevent__month { display: none; }
    }


    /* backdrop-filter erzeugt einen Containing Block für position:fixed.
       Sobald der Header beim Scrollen seinen Blur bekommt, wird das darin
       liegende Menü-Panel an der Header-Höhe abgeschnitten statt am
       Viewport — gemessen 77 statt 664 px. Während das Menü offen ist,
       wird der Blur deshalb abgeschaltet; sichtbar ist er ohnehin nicht,
       weil das Panel den Bildschirm füllt. */
    html.nav-open .site-header {
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }


    /* ============================================================
       MEHRSTUFIGE ANFRAGE
       ============================================================ */
    .wiz { position: relative; }
    .wiz__bar { height: 2px; background: rgba(255,255,255,0.14); border-radius: 2px; overflow: hidden; }
    .wiz__bar i {
      display: block; height: 100%; width: 25%;
      background: var(--cream);
      transition: width .55s cubic-bezier(.2,.8,.3,1);
    }
    .wiz__count {
      display: flex; align-items: baseline; gap: 0.7em;
      margin: 0.9rem 0 1.6rem;
      font-size: 0.76rem; letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--muted-dark);
      font-variant-numeric: tabular-nums;
    }
    .wiz__label { color: var(--cream); opacity: 0.9; letter-spacing: 0.1em; }

    .wiz__panel {
      border: 0; padding: 0; margin: 0;
      display: none;
    }
    .wiz__panel.is-on { display: block; animation: wizIn .5s cubic-bezier(.2,.8,.3,1) both; }
    @keyframes wizIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

    .wiz__q {
      font-family: var(--font-display); font-weight: 700;
      font-size: clamp(1.4rem, 1rem + 1.5vw, 2rem);
      line-height: 1.1; letter-spacing: -0.02em;
      color: var(--cream); padding: 0; margin-bottom: 1.4rem;
    }

    .opts { display: grid; gap: 0.7rem; }
    .opts--2 { grid-template-columns: repeat(2, 1fr); }
    @media (max-width: 640px) { .opts--2 { grid-template-columns: 1fr; } }

    .opt {
      position: relative; display: grid;
      grid-template-columns: auto 1fr; grid-template-rows: auto auto;
      gap: 0.15rem 0.9rem; align-items: start;
      padding: 1.05rem 1.15rem;
      border: 1px solid rgba(255,255,255,0.16);
      border-radius: var(--radius);
      cursor: pointer;
      transition: border-color .3s ease, background-color .3s ease, transform .3s cubic-bezier(.2,.8,.3,1);
    }
    .opt--wide { grid-column: 1 / -1; }
    .opt:hover { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.03); transform: translateY(-2px); }
    .opt input { position: absolute; opacity: 0; width: 0; height: 0; }
    .opt__ico {
      grid-row: 1 / 3; width: 26px; height: 26px; margin-top: 2px;
      fill: none; stroke: currentColor; stroke-width: 1.5;
      stroke-linecap: round; stroke-linejoin: round;
      color: var(--cream); opacity: 0.7; transition: opacity .3s ease, transform .3s ease;
    }
    .opt__t { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--cream); }
    .opt__s { font-size: 0.86rem; color: var(--muted-dark); line-height: 1.35; }
    /* Ausgewählt: heller Rahmen plus Haken statt Farbe — das CI führt keine */
    .opt:has(input:checked) {
      border-color: var(--cream); background: rgba(255,255,255,0.06);
    }
    .opt:has(input:checked) .opt__ico { opacity: 1; transform: scale(1.06); }
    .opt:has(input:checked)::after {
      content: ""; position: absolute; top: 0.85rem; right: 0.95rem;
      width: 9px; height: 9px; border-radius: 50%;
      background: var(--cream);
      animation: dotIn .3s cubic-bezier(.2,1.4,.4,1) both;
    }
    @keyframes dotIn { from { transform: scale(0); } to { transform: scale(1); } }
    .opt input:focus-visible ~ .opt__t { outline: 2px solid var(--cream); outline-offset: 4px; }

    .wiz__sum {
      display: flex; flex-wrap: wrap; gap: 0.45rem;
      margin-bottom: 1.5rem;
    }
    .wiz__chip {
      display: inline-flex; align-items: center; gap: 0.45em;
      padding: 0.35em 0.8em;
      border: 1px solid rgba(255,255,255,0.2); border-radius: 100px;
      font-size: 0.78rem; color: var(--muted-dark);
    }
    .wiz__chip svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }

    .wiz__nav { display: flex; gap: 0.7rem; align-items: center; margin-top: 1.8rem; flex-wrap: wrap; }
    .wiz__nav .ico { opacity: 1; }
    .wiz__err {
      margin: 1rem 0 0; padding: 0.7rem 0.95rem;
      border-left: 2px solid var(--cream);
      background: rgba(255,255,255,0.05);
      font-size: 0.88rem; color: var(--cream);
    }
    .wiz__note { margin: 0.9rem 0 0; font-size: 0.8rem; color: var(--muted-dark); }
    .opt-tag { font-size: 0.7rem; opacity: 0.6; letter-spacing: 0.06em; text-transform: none; }

    @media (prefers-reduced-motion: reduce) {
      .wiz__panel.is-on { animation: none; }
      .opt, .opt__ico, .wiz__bar i { transition: none; }
      .opt:has(input:checked)::after { animation: none; }
    }


    /* Das hidden-Attribut setzt display:none — eine spätere Regel mit
       display:inline-flex (etwa .btn) gewinnt dagegen. Deshalb ausdrücklich
       durchsetzen, sonst bleiben verborgene Schaltflächen sichtbar. */
    [hidden] { display: none !important; }