/* ============================================================
   enhance.css — Verfeinerungs-Ebene (lädt NACH premium.css)
   Ziel: lebendiger & weniger generisch, ohne den Premium-Look
   zu verlieren. Rein additiv, keine Overrides der Basis.
   Alles bewegte respektiert prefers-reduced-motion.
   ============================================================ */

/* ---- 1) Kennzahlen: ruhige, monospaced Ziffern für sauberes
        Count-up (kein Breiten-Springen) ------------------------ */
.stats-row .stat .n{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---- 2) Disziplin-Karten: Kanji-Wasserzeichen + mehr Leben ---- */
.disc-grid .disc{overflow:hidden}
.disc-grid .disc::before{
  content:"";
  position:absolute;
  right:-.14em; bottom:-.30em;
  font-family:"Hiragino Sans","Yu Gothic","Noto Sans CJK JP","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic","Microsoft YaHei",var(--serif),sans-serif;
  font-weight:700;
  font-size:12.5rem;
  line-height:.8;
  color:var(--ac,var(--gold));
  opacity:.045;
  pointer-events:none;
  z-index:0;
  transform:translate(0,0) rotate(0deg);
  transition:opacity .55s var(--ease), transform .6s var(--ease);
  will-change:transform,opacity;
}
.disc-grid .disc.judo::before{content:"柔"}
.disc-grid .disc.tkd::before{content:"跆"}
.disc-grid .disc.kumdo::before{content:"劍"}
.disc-grid .disc.kungfu::before{content:"拳"}
.disc-grid .disc:hover::before,
.disc-grid .disc:focus-visible::before{
  opacity:.11;
  transform:translate(-6px,-8px) rotate(-2deg);
}
/* Inhalte über dem Wasserzeichen halten */
.disc-grid .disc > *{position:relative;z-index:1}
/* Icon reagiert lebendig, ohne die Karte anzuheben (Grid ist geclippt) */
.disc-grid .disc .ic{transition:background .4s var(--ease), transform .45s var(--ease)}
.disc-grid .disc:hover .ic{transform:translateY(-3px) scale(1.06)}

/* ---- 3) Hero-Bild: Tiefe durch sanften Parallax/Tilt (via JS) --
   (Film-Grain nicht nötig – premium.css legt bereits einen
    globalen Grain über body::after.) */
.hero-visual{perspective:1100px}
.frame{
  transform-style:preserve-3d;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.hero-visual.tilting .frame{transition:transform .08s linear} /* flüssig beim Zeigen */
.frame .hero-img{transition:transform .5s var(--ease); will-change:transform}

/* ---- 4) Primär-Buttons: edler Licht-Sheen beim Hover ---------- */
.btn-primary{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::after{
  content:"";
  position:absolute; top:0; bottom:0; left:0;
  width:45%;
  z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
  transform:translateX(-180%) skewX(-16deg);
  transition:transform .7s var(--ease);
  pointer-events:none;
}
.btn-primary:hover::after,
.btn-primary:focus-visible::after{transform:translateX(320%) skewX(-16deg)}

/* ---- Reduced-Motion: keine Bewegung, nur statische Endzustände - */
@media (prefers-reduced-motion:reduce){
  .disc-grid .disc::before,
  .disc-grid .disc .ic,
  .frame,
  .frame .hero-img,
  .btn-primary::after{transition:none}
  .btn-primary::after{display:none}
}

/* ---- Touch/Coarse-Pointer: kein Tilt-Flackern -------------------*/
@media (hover:none){
  .frame{transform:none !important}
  .frame .hero-img{transform:none !important}
}

/* ============================================================
   5) Mehr Farbe – sanfte, „atmende" Wash-Layer gegen die
      Creme-Tristesse. Fade-Effekt über langsame Opacity.

      WICHTIG – Farb-Regel:
      • Allgemeines Design trägt AUSSCHLIESSLICH die Vereinsfarben
        Rot (--red) + Gold (--gold), passend zum Logo.
      • Die Disziplin-Farben (Blau/Grün/Orange) bleiben allein den
        einzelnen Sportarten vorbehalten (Karten-Akzente, Kanji) –
        niemals im allgemeinen Layout.
   ============================================================ */
@keyframes huebreathe{0%,100%{opacity:.5}50%{opacity:1}}

/* Marken-Streifen: feiner Rot→Gold-Verlauf an der Kopfkante ----- */
.nav::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:2;
  background:linear-gradient(90deg,var(--red),var(--red-deep) 34%,var(--gold));
  pointer-events:none;
}

/* Disziplinen: warmer Rot→Gold-Schein (Vereinsfarben) ----------- */
.section#disziplinen{position:relative;isolation:isolate}
.section#disziplinen > .wrap{position:relative;z-index:1}
.section#disziplinen::before{
  content:"";position:absolute;inset:-4% 0;z-index:0;pointer-events:none;
  background:
    radial-gradient(46% 58% at 8% 20%, color-mix(in srgb,var(--red) 14%,transparent), transparent 66%),
    radial-gradient(50% 62% at 95% 88%, color-mix(in srgb,var(--gold) 14%,transparent), transparent 66%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent);
  animation:huebreathe 16s ease-in-out infinite;
}

/* Verein/„Über den Verein": warmer Rot-Gold-Schein (Vereinsfarbe).
   WICHTIG: Ober- & Unterkante laufen in var(--bg) aus → kein „Block",
   sondern ein weicher, nahtloser Farbschleier. */
.section.proof{position:relative;isolation:isolate;
  background:linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb,var(--red) 3%,var(--bg)) 30%,
    color-mix(in srgb,var(--gold) 3.2%,var(--bg)) 72%,
    transparent 100%)}
.section.proof > .wrap{position:relative;z-index:1}
.section.proof::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(46% 60% at 8% 16%, color-mix(in srgb,var(--red) 13%,transparent), transparent 60%),
    radial-gradient(42% 58% at 92% 88%, color-mix(in srgb,var(--gold) 14%,transparent), transparent 60%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
  animation:huebreathe 19s ease-in-out infinite;animation-delay:-6s;
}

/* Aktuelles: leiser Vereinsrot-Schein hinter dem News-Slider ----- */
.section#news{position:relative;isolation:isolate}
.section#news > .wrap{position:relative;z-index:1}
.section#news::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(40% 60% at 92% 20%, color-mix(in srgb,var(--red) 11%,transparent), transparent 62%),
    radial-gradient(38% 58% at 4% 88%, color-mix(in srgb,var(--gold) 10%,transparent), transparent 62%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent);
  animation:huebreathe 22s ease-in-out infinite;animation-delay:-11s;
}

/* Siebengebirge-Kulisse: farbige, geschichtete Bergkette mit weichen
   Übergängen – kein „abgehackter Kasten" mehr. Warmer Rot→Gold-Himmel,
   dessen Ober- & Unterkante in var(--bg) ausläuft (unsichtbare Nähte). */
.ridge-band{
  position:relative; margin-top:-1px; overflow:hidden;
  background:linear-gradient(180deg,
    var(--bg) 0%,
    color-mix(in srgb,var(--red) 4%,var(--bg)) 42%,
    color-mix(in srgb,var(--gold) 7%,var(--bg)) 72%,
    var(--bg) 100%);
}
.ridge-scene{position:relative}
.ridge-svg{display:block;width:100%;height:clamp(104px,13vw,158px)}
.ridge-svg .ridge-back{fill:url(#ridgeBack);opacity:.20}
.ridge-svg .ridge-front{fill:url(#ridgeFront);opacity:.5}
.ridge-svg .ridge-line{fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linejoin:round;opacity:.65}
/* Bergfüße sanft in die nächste Sektion „vernebeln" (weiche Unterkante) */
.ridge-scene::after{content:"";position:absolute;left:0;right:0;bottom:0;height:36px;
  background:linear-gradient(180deg,transparent,var(--bg));pointer-events:none}
.ridge-cap{padding-top:6px}

/* Sektions-Überschriften: feine Rot→Gold-Linie, die sich beim
   Einblenden aufzieht (Vereinsfarben, editorial-lebendig) ------- */
.section-head h2{position:relative;padding-bottom:.34em}
.section-head h2::after{
  content:"";position:absolute;left:0;bottom:0;height:3px;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--red),var(--gold));
  transition:width 1s var(--ease) .25s;
}
.section-head.in h2::after{width:64px}
@media (scripting: none){.section-head h2::after{width:64px}}

/* Reveal-Feinschliff: dezenter Blur-Fade beim Einblenden.
   Nur bei aktivem JS – sonst käme das .in nie und Inhalte
   blieben dauerhaft unscharf. */
@media (scripting: enabled){
  .reveal{filter:blur(6px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
  .reveal.in{filter:blur(0)}
}

@media (prefers-reduced-motion:reduce){
  .section#disziplinen::before,
  .section.proof::before,
  .section#news::before{animation:none;opacity:.85}
  .reveal{filter:none;transition:none}
}

/* ============================================================
   6) SPORTART-SEITEN: die kleinen „Überschriften" (Eyebrows)
      und Akzente tragen die SEITENFARBE (--ac), nicht konstant
      Rot. Judo bleibt rot (dessen --ac IST rot), TKD blau,
      Kumdo grün, Kung Fu orange.
   ============================================================ */
.disc .eyebrow{color:var(--ac)}
.disc .eyebrow::before{background:linear-gradient(90deg,var(--ac),var(--gold))}
/* aufziehende Linie unter Sektions-Überschriften in Seitenfarbe */
.disc .section-head h2::after{background:linear-gradient(90deg,var(--ac),var(--gold))}
/* Intro-Kacheln: Icon-Hintergrund + Hover in Seitenfarbe statt Rot */
.disc .itile .ic{background:var(--ac-soft,var(--red-soft))}
.disc .itile:hover{border-color:color-mix(in srgb,var(--ac) 30%,transparent)}

/* ============================================================
   7) AKKORDEON-FIX: Button-Text explizit einfärben.
      Ohne color erbt <button> die System-Farbe → auf iOS/Handy
      erscheint der Text BLAU (wie ein Link). Fix + etwas Leben.
   ============================================================ */
.acc-head,
.acc-head h3{color:var(--ink);-webkit-text-fill-color:var(--ink)}
.acc-head{transition:background .3s var(--ease)}
.acc:hover:not(.open){background:color-mix(in srgb,var(--red) 3%,var(--bg))}
.disc .acc:hover:not(.open){background:color-mix(in srgb,var(--ac) 4%,var(--bg))}
/* Aufzähl-Punkte in Seitenfarbe auf Sport-Seiten */
.disc .acc-inner li::before{background:var(--ac)}

/* ============================================================
   8) ALLGEMEINE SEITEN (verein, kontakt, partner, …): warmer
      Rot-Gold-Hauch hinter dem zentrierten Seiten-Hero, damit
      auch Unterseiten leben. Sport-Heroes (.disc-hero) sind
      ausgenommen – die haben bereits Glow + Kanji in Seitenfarbe.
   ============================================================ */
.page-hd:not(.disc-hero){position:relative;isolation:isolate}
.page-hd:not(.disc-hero) > .wrap{position:relative;z-index:1}
.page-hd:not(.disc-hero)::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(52% 82% at 50% -18%, color-mix(in srgb,var(--red) 12%,transparent), transparent 62%),
    radial-gradient(40% 70% at 90% 118%, color-mix(in srgb,var(--gold) 11%,transparent), transparent 62%);
  animation:huebreathe 20s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){
  .page-hd:not(.disc-hero)::before{animation:none;opacity:.85}
}

/* ============================================================
   9) ICONS: premium Strichgrafik-SVGs statt generischer Emojis.
      Farbe über currentColor → allgemein Vereinsrot, auf
      Sport-Seiten die Seitenfarbe (--ac).
   ============================================================ */
.i-svg{display:inline-block;width:1em;height:1em;vertical-align:-.15em;flex:none}

/* Display-Icons in runden/quadratischen Containern */
.ic .i-svg{width:26px;height:26px}
.itile .ic .i-svg,.sponsor-card .sic .i-svg{width:28px;height:28px}
.value .vi .i-svg{width:23px;height:23px}
.ds-sec-head .acc-ico .i-svg{width:22px;height:22px}

.ic,.value .vi,.sponsor-card .sic{color:var(--red)}
.disc .ic,.disc .value .vi{color:var(--ac)}
.ds-sec-head .acc-ico{color:var(--red)}

/* Inline-Icons (Pins, Warnungen, Badges) */
.loc-btn .pin .i-svg,.ses-foot .loc .i-svg,.ses-warn .i-svg{width:16px;height:16px;vertical-align:-.22em}
.tn .i-svg,.tn-meta .i-svg{width:15px;height:15px;vertical-align:-.15em;opacity:.8}
.tlead-badge .i-svg{width:13px;height:13px;vertical-align:-.12em;margin-right:.25em}

/* Erfolge-Medaille (Rang-Farbe) */
.erf-medal .i-svg{width:34px;height:34px}
.erf-medal{color:var(--gold)}
.erf-medal.m1{color:#C9A227}.erf-medal.m2{color:#9AA6AD}.erf-medal.m3{color:#B06A3B}

/* News-Cycler: kleine Inline-Icons im Titel/Text */
.news-slide .i-svg{width:1.05em;height:1.05em;vertical-align:-.18em;margin-right:.1em}

/* Schließungs-Banner: SVG-Icon statt Emoji */
.holiday-icon{display:inline-flex;color:var(--gold)}
.holiday-icon svg{width:20px;height:20px;display:block}
.cyc-medal{display:inline-flex;vertical-align:-.2em}
.cyc-medal .i-svg{width:1.15em;height:1.15em;margin-right:.05em}
.cyc-medal.m1{color:#E7C24A}.cyc-medal.m2{color:#C7CDD3}.cyc-medal.m3{color:#D08A56}.cyc-medal.mtn{color:var(--gold)}

/* ============================================================
   10) AUTOMATISCHER DARKMODE  (folgt der System-/Browser-
       Einstellung).  Edel & warm gehalten – dunkles Anthrazit
       mit Rot/Gold-Akzenten, keine generische Graustufe.
       Strategie: Design-Tokens umdefinieren (deckt das meiste
       ab) + gezielte Overrides für hartcodierte Hell-Farben und
       für Flächen, die var(--ink) als DUNKLEN Grund nutzen.
   ============================================================ */
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    /* Akzente etwas aufgehellt für Kontrast auf Dunkel */
    --red:#E64B3A; --red-deep:#C63A2B; --red-soft:rgba(230,75,58,.16);
    --tkd:#5FA2DE; --kumdo:#77B96F; --kungfu:#E88E4B;
    --gold:#CDB176;
    /* Text */
    --ink:#F4EEE4; --ink-2:#E3DBCE; --muted:#B2A796; --faint:#8A7F6E;
    /* Flächen: --bg = Seiten-Basis (sonst werden vollflächige Sektionen
       zu helleren „Blöcken"). Elevation kommt über --bg-2 & das Glas. */
    --bg:#141210; --bg-2:#211C15; --bg-3:#2A231C;
    --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.17);
    /* Schatten kräftiger, da auf Dunkel kaum sichtbar */
    --sh-1:0 1px 2px rgba(0,0,0,.45),0 10px 26px -16px rgba(0,0,0,.65);
    --sh-2:0 2px 10px -4px rgba(0,0,0,.55),0 34px 64px -34px rgba(0,0,0,.8);
    --sh-3:0 6px 16px -6px rgba(0,0,0,.6),0 60px 110px -50px rgba(0,0,0,.9);
  }

  /* Seiten-Basis + warmer Tiefen-Schein */
  body{background:var(--bg)}
  /* „Verein"-Sektion: keine Vollfläche/Rahmen im Dark → kein Block,
     nur der weiche radiale Schein (::before) bleibt. */
  .section.proof{background:transparent;border-block-color:transparent}
  body::before{background:
    radial-gradient(62% 52% at 50% -12%, rgba(230,75,58,.10), transparent 60%),
    radial-gradient(52% 42% at 100% 102%, rgba(205,177,118,.07), transparent 60%) !important}
  /* Sektions-Schleier auf fast-schwarzem Grund deutlich dämpfen, damit
     sie nicht als weiche „Kästen" hervortreten (nahtloser Verlauf). */
  .section#disziplinen::before,
  .section.proof::before,
  .section#news::before{opacity:.45}

  /* Dunkle „Feature"-Panels – nutzen sonst var(--ink) als Grund */
  .book,.cycler,.feat,.info-card.hl{background:#100D0A;border:1px solid var(--line)}
  footer{background:#100D0A}
  .nav-cta,.brand .mark{background:var(--bg-3);color:var(--ink)!important;border:1px solid var(--line-2)}
  .nav-cta:hover{background:var(--bg-2)}
  .fpill[aria-pressed="true"],
  .tfilters .fpill[aria-pressed="true"],
  .gfilters .fpill[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}

  /* Glas-Navigation, Dropdowns, Sticky-CTA dunkel */
  .nav.scrolled{background:rgba(20,17,13,.72)!important;border-color:var(--line)}
  .ndrop-menu{background:rgba(26,21,16,.92);border-color:var(--line)}
  .sticky-cta{background:rgba(20,17,13,.92);border-color:var(--line)}

  /* Akkordeons & Icon-Chips angehoben (nicht Teil des Glas-Sets) */
  .acc,.value .vi{background:var(--bg-2)}

  /* Formularfelder (regulär + Grav-.jform) */
  .form-card input,.form-card textarea,.form-card select,
  .jform input[type=text],.jform input[type=email],.jform input[type=tel],
  .jform select,.jform textarea,
  .tn-select,.gfilters .fpill,.tfilters .fpill{background:var(--bg-2)!important;border-color:var(--line-2);color:var(--ink)}

  /* Dunkle Kontakt-Karte bleibt dunkel (heller Verlauf via --ink neutralisieren) */
  .cs-card.cs-dark{background:linear-gradient(155deg,#12100C,#1C1710)!important;color:#fff}

  /* Disziplin-Soft-Tints (Chips/Icon-Flächen) auf Dunkel übersetzen */
  .disc-judo{--ac-soft:rgba(230,75,58,.16)}
  .disc-tkd{--ac-soft:rgba(95,162,222,.16)}
  .disc-kungfu{--ac-soft:rgba(232,142,75,.16)}
  .disc-kumdo{--ac-soft:rgba(119,185,111,.16)}
  .factchip{color:var(--red);background:var(--red-soft)}

  /* Datenschutz-Inhaltsverzeichnis (Karte + Rail) – helle #fff-Verläufe */
  .ds-toc,.ds-rail-card{
    background:linear-gradient(180deg,var(--bg-2),#100D0A);
    border-color:var(--line);
    box-shadow:0 24px 56px -38px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06);
  }
  .ds-sec{background:var(--bg-2)}

  /* Filter-Chips (Training/Galerie): inaktiv dunkel statt weiß,
     aktiv klar in Akzent-/Vereinsfarbe gefüllt */
  .filters .fpill{background:var(--bg-2);color:var(--ink-2);box-shadow:none}
  .filters .fpill:hover,.gfilters .fpill:hover,.tfilters .fpill:hover{background:var(--bg-3);color:var(--ink)}
  .tz .filters .fpill[aria-pressed="true"],
  .gz .gfilters .fpill[aria-pressed="true"],
  .filters .fpill[data-filter="all"][aria-pressed="true"]{background:var(--ac,var(--red));border-color:var(--ac,var(--red));color:#fff}

  /* Ghost-Button auf Sport-Heroes (nutzt sonst weißes Glas) */
  .disc-hero .btn-ghost{background:rgba(255,255,255,.06);color:var(--ink);border-color:var(--line-2)}
  .disc-hero .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:var(--ac,var(--red));color:var(--ac,var(--red))}

  /* Heller Bild-Rahmen abdunkeln (falls Bild transparent) */
  .frame.frame-light{background:var(--bg-2)}

  /* Hero-Bildrahmen-Rand dezenter */
  .frame::after{border-color:rgba(255,255,255,.06)}
}

/* Liquid-Glass für Dunkel: dasselbe Frosted-Konzept, aber dunkel statt
   weiß (premium.css setzt die Karten sonst auf rgba(255,255,255,.68)).
   Ab 601px – darunter setzt premium.css bereits solide var(--bg). */
@media (prefers-color-scheme: dark) and (min-width: 601px){
  .tn,.narticle,.form-card,.info-card:not(.hl),.tcard,.ses,.itile,.erf-card,
  .cs-card:not(.cs-dark),.age-card,.vcard,.dteaser-card,.path-step,.callout,
  .loc-btn,.location-card,.sponsor-card,.value,.vextra,.note-box{
    background:rgba(44,37,29,.55);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 14px 34px -26px rgba(0,0,0,.75);
  }
  .disc-grid .disc{background:rgba(40,33,26,.42)}
}

/* Mobile Navigation im Darkmode (eigener Media-Kontext) */
@media (prefers-color-scheme: dark) and (max-width: 920px){
  .nav{background:rgba(20,17,13,.9)}
  .ndrop-menu{background:var(--bg-2)}
}

/* ============================================================
   11) Korrekturen (Startseite-Feedback)
   ============================================================ */
/* Hero/Nav: keine Bewegungs-Animationen mehr – Bild-Wipe & driftende
   Glow-Orbs entfernt (wirkten unruhig; Maus-Tilt ist in enhance.js aus). */
.frame{animation:none !important}
.hero::before,.hero::after{animation:none !important}

/* Vorstand-Gedenkkarte: „(verstorben)" & „In Gedenken" standen in
   dunklem Grau auf der roten Lead-Karte → unlesbar. Jetzt hell/gold
   und gut lesbar (Karte ist in Light & Dark rot). */
.vcard.lead .vstatus{color:rgba(255,255,255,.85)}
.vcard.lead .vmemorial{color:color-mix(in srgb,var(--gold) 42%,#fff)}

@media (prefers-color-scheme: dark){
  /* Disziplin-Kacheln: Hover war hartcodiert fast weiß (#fbf7ef) →
     jetzt dezent in Seitenfarbe getönt, gut lesbar. */
  .disc-grid .disc.judo:hover,.disc-grid .disc.tkd:hover,
  .disc-grid .disc.kungfu:hover,.disc-grid .disc.kumdo:hover{
    background:color-mix(in srgb,var(--ac) 16%,var(--bg-2))}

  /* Karten-Modal klar erkennbar; „Route planen" (Ghost-Button) sichtbar. */
  .map-modal-box{background:var(--bg-2);border:1px solid var(--line)}
  .map-note{color:var(--ink-2)}
  .map-modal-box #routeBtn,.map-modal-box .btn-ghost{
    background:var(--bg-3);border-color:var(--line-2);color:var(--ink)}
  .map-modal-box #routeBtn:hover,.map-modal-box .btn-ghost:hover{
    background:var(--bg);border-color:var(--red);color:var(--red)}
}

/* Dark Mode + mobiles Menü: „Kontakt"-Button war heller Grund (var(--ink)
   ist im Dark hell) mit weißer Schrift → unlesbar. Klarer roter CTA statt
   dessen (Vereinsfarbe, hoher Kontrast). Höhere Spezifität als
   .nav-links .nav-cta in der 920px-Regel. */
@media (prefers-color-scheme:dark) and (max-width:920px){
  .nav-links a.nav-cta{
    background:var(--red)!important;color:#fff!important;
    border:0!important;box-shadow:0 12px 26px -16px rgba(0,0,0,.8)}
  .nav-links a.nav-cta:hover,
  .nav-links a.nav-cta:active{background:var(--red-deep,#A5160E)!important;color:#fff!important}
}

/* ============================================================
   INDIVIDUALITÄT & LEBEN – eigene, unverwechselbare Details
   (kein generisches Template mehr). Rein additiv.
   ============================================================ */

/* ---- (4) Disziplin-Signatur: Name im Originalscript + Bedeutung.
        Kalligrafie „malt" sich beim Einblenden wie ein Pinselstrich auf.
        Der Schriftzug trägt dezent die jeweilige Sportfarbe (--ac) –
        das ist der Einstieg zur Disziplin, kein allgemeines Layout. -- */
.disc-grid .disc .disc-sig{display:flex;align-items:baseline;gap:.62em;margin-top:11px;flex-wrap:wrap}
.disc-grid .disc .sig-cjk{
  font-family:"Hiragino Sans","Yu Gothic","Noto Sans CJK JP","Noto Sans KR","Apple SD Gothic Neo","Microsoft YaHei",var(--serif),sans-serif;
  font-size:1.06rem;font-weight:600;letter-spacing:.08em;line-height:1;
  color:color-mix(in srgb,var(--ac,var(--gold)) 74%,var(--ink));
}
.disc-grid .disc .sig-mean{
  font-family:var(--serif);font-style:italic;font-size:.92rem;color:var(--muted);
  position:relative;padding-left:.72em;
}
.disc-grid .disc .sig-mean::before{
  content:"";position:absolute;left:0;top:.16em;bottom:.16em;width:1px;
  background:color-mix(in srgb,var(--ac,var(--gold)) 55%,transparent);
}
@keyframes inkwipe{
  0%{clip-path:inset(0 100% 0 0);opacity:.15}
  100%{clip-path:inset(0 0 0 0);opacity:1}
}
.disc-grid .disc.in .sig-cjk{animation:inkwipe .9s var(--ease) .12s both}

/* ---- (5) Region & Herkunft: Standorte klarer als Identität ----- */
.ridge-cap b{color:color-mix(in srgb,var(--gold) 62%,var(--ink))}

/* ---- Reduced-Motion respektieren -------------------------------- */
@media (prefers-reduced-motion:reduce){
  .disc-grid .disc.in .sig-cjk{animation:none}
}