/* Kapitel-Navigation der vitalkultur-Produktseiten (aus der Research-Seite gelöst, 29.10.2026 – Kernmechanik einmal,
   je Seite nur Markup). Erwartet die Seiten-Tokens (--stille, --line, --t…, --s…, --ease) und die Kopfleiste:
   <header class="nav" data-vkf-folgt><div class="wrap"><div class="crumb">…</div><nav class="kapitel">…</nav><div class="nav-r">…</div></div>
   <div class="kap-fort"></div></header><div class="kap-dimm"></div>  — Abschnitte tragen ihre id, Titel = .label/h1/h2. */
/* Navigation */
.nav { position: sticky; top: 0; z-index: 20; backdrop-filter: saturate(140%) blur(18px); -webkit-backdrop-filter: saturate(140%) blur(18px); background: rgba(2,2,2,0.72); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 55px; }
.crumb { display: flex; align-items: center; gap: var(--s13); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); }
.crumb img { height: 26px; width: auto; opacity: .85; }
.crumb .sep { color: var(--t4); }
.crumb b { color: var(--t); font-weight: 500; }
.nav-r { display: flex; align-items: center; gap: var(--s13); }
.lang { background: none; border: 1px solid var(--line2); color: var(--t3); font: inherit; font-size: 12px; letter-spacing: .1em; padding: 5px 13px; border-radius: 99px; cursor: pointer; }
.lang .on { color: var(--t); }
.pill { font-size: 13px; letter-spacing: .06em; padding: 7px 16px; border-radius: 99px; background: var(--stille); color: #021210; font-weight: 600; transition: background .255s var(--ease); }
.pill:hover { background: var(--glow); }

/* Kapitel-Navigation (29.10.2026, Jan: „Kunde will sich alles in Ruhe ansehen … edel, premium“) – Muster der
   Apple-Produktseiten: Mac = Kapitel in der Kopfleiste, das aktuelle hinterlegt; iPhone/iPad = das aktuelle Kapitel
   ersetzt nach dem Einstieg den Markennamen, ein Tipp öffnet die Liste. Feine Linie = wie weit man ist. */
.nav .wrap { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s21); }
.crumb { grid-area: 1 / 1; }
.kapitel { grid-area: 1 / 2; display: flex; justify-content: center; min-width: 0; }
.nav-r { grid-area: 1 / 3; }
.kap-liste { list-style: none; display: flex; gap: 2px; margin: 0; padding: 0; }
.kap-liste a { display: block; padding: 7px 9px; font-size: 13px; letter-spacing: .02em; color: var(--t3); border-radius: 99px; white-space: nowrap;
  transition: color .255s var(--ease), background .255s var(--ease); }
.kap-liste a:hover { color: var(--t); }
.kap-liste a[aria-current] { color: var(--t); background: rgba(235,230,220,.07); }
.kap-liste a:focus-visible, .kap-knopf:focus-visible { outline: 2px solid var(--stille); outline-offset: 2px; }
.kap-nr, .kap-was { display: none; }
.kap-knopf { display: none; }
.kap-fort { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none; transform-origin: 0 50%; transform: scaleX(var(--fort, 0));
  background: linear-gradient(90deg, rgba(62,207,178,.15), var(--stille)); }
.kap-dimm { display: none; }
section[id], #erleben { scroll-margin-top: 55px; }
@media (max-width: 1179px) {
  /* zwei Spalten, Marke/Kapitel darf schrumpfen – drei Spalten mit 21-px-Abständen machten die Seite bei 375 px 25 px zu breit */
  .nav .wrap { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s8); }
  .nav-r { grid-area: 1 / 2; }
  .crumb, .kapitel { min-width: 0; }
  .kapitel { grid-area: 1 / 1; justify-content: flex-start; pointer-events: none; }
  .crumb b { transition: opacity .3s var(--ease); }
  .kap-knopf { display: inline-flex; align-items: center; gap: 9px; margin-left: 39px; padding: 10px 6px 10px 0; background: none; border: 0; color: var(--t);
    font: inherit; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; opacity: 0; visibility: hidden;
    transition: opacity .3s var(--ease), visibility .3s; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
  .kap-knopf .kap-nr { display: inline; color: var(--stille); letter-spacing: .06em; }
  /* Nie in „EN“ und „Beta-Zugang“ laufen (30.10.2026, Jan: „in der Kopfleiste überlagern sich Texte“) */
  .kap-knopf { max-width: 100%; min-width: 0; } .kap-knopf .kap-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .kap-knopf svg { width: 12px; height: 12px; color: var(--t3); transition: transform .3s var(--ease); }
  .nav.weiter .crumb b { opacity: 0; }
  .nav.weiter .kap-knopf { opacity: 1; visibility: visible; }
  .nav.kap-offen .kap-knopf svg { transform: rotate(180deg); }
  /* Liste klappt unter der Kopfleiste auf (absolute: die Kopfleiste ist wegen backdrop-filter der Bezugsrahmen) */
  .kap-liste { position: absolute; left: 0; right: 0; top: 100%; display: grid; gap: 0; max-height: calc(100dvh - 56px); overflow-y: auto;
    padding: var(--s8) clamp(21px, 5vw, 55px) var(--s21); background: #050606;   /* deckend: ein Unschärfefilter IN der gefilterten Kopfleiste greift nicht, Text schien durch */
    border-bottom: 1px solid var(--line); opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: auto;
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; }
  .nav.kap-offen .kap-liste { opacity: 1; visibility: visible; transform: none; }
  .kap-liste li + li { border-top: 1px solid var(--line); }
  .kap-liste a { display: grid; grid-template-columns: 34px 1fr; column-gap: var(--s8); padding: 15px 0; border-radius: 0; white-space: normal; }
  .kap-liste a[aria-current] { background: none; }
  .kap-liste .kap-nr { display: block; grid-row: 1 / span 2; padding-top: 4px; font-size: 12px; letter-spacing: .06em; color: var(--t4); }
  .kap-liste .kap-titel { font-size: 19px; letter-spacing: -.005em; color: var(--t2); }
  .kap-liste .kap-was { display: block; margin-top: 3px; font-size: 13px; letter-spacing: .01em; color: var(--t3); }
  .kap-liste a[aria-current] .kap-nr { color: var(--stille); }
  .kap-liste a[aria-current] .kap-titel { color: var(--t); }
  .kap-dimm { display: block; position: fixed; inset: 0; z-index: 19; background: rgba(0,0,0,.5); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s; }
  .nav.kap-offen + .kap-dimm { opacity: 1; visibility: visible; }
}
@media (prefers-reduced-motion: reduce) { .kap-liste, .kap-knopf, .kap-dimm, .crumb b { transition: none; } }
/* Schmale iPhones: Marke als gestapeltes Lockup statt einer Zeile, die in den Sprachknopf lief (gemessen 360 px: −19 px) */
@media (max-width: 400px) { .crumb { gap: 10px; } .crumb b { font-size: 11px; line-height: 1.25; letter-spacing: .12em; } .crumb .zeile2 { display: block; } .kap-knopf { margin-left: 36px; font-size: 12px; letter-spacing: .07em; } }

/* Lange Kapitelnamen (Breathwork DE, 30.10.2026): Knopf schrumpft mit Auslassung statt in den Sprachknopf zu laufen */
@media (max-width: 1179px) { .kap-knopf { max-width: 100%; min-width: 0; white-space: nowrap; } .kap-knopf .kap-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; } }
/* Schmale Schirme: kompakte Kopfleiste (aus der Research-Seite, 30.10.2026) – Sprachschalter zeigt nur die andere Sprache */
@media (max-width: 560px) {
  .crumb { font-size: 11px; letter-spacing: .05em; gap: var(--s8); }
  .nav-r { gap: var(--s8); }
  .nav .pill { font-size: 12px; padding: 6px 12px; }
  .lang { font-size: 0; padding: 9px 12px; }
  .lang span { font-size: 12px; }
  .lang span.on, .lang span[aria-hidden] { display: none; }
}

/* Die Marke bleibt (31.10.2026, Jan: „das Branding ist komplett weg, wenn ich durchgehe … das darf man nicht vernachlässigen“).
   Nach dem Einstieg stehen Marke und Kapitel ÜBEREINANDER neben dem App-Symbol: oben CARLON Breathwork, darunter das Kapitel mit Pfeil. */
@media (max-width: 1179px) {
  .crumb b { transition: transform .3s var(--ease), font-size .3s var(--ease); }
  .kap-knopf { transition: opacity .3s var(--ease), visibility .3s; transform: translateY(9px); padding: 6px 6px 6px 0; font-size: 11px; letter-spacing: .1em; }
  .nav.weiter .crumb b { opacity: 1; transform: translateY(-9px); font-size: 11px; line-height: 1; letter-spacing: .14em; white-space: nowrap; }
  .nav.weiter .crumb .zeile2 { display: inline; }
}
@media (max-width: 400px) { .kap-knopf { font-size: 11px; letter-spacing: .07em; } }