/* ==========================================================================
   Breathwork
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */

.bw-hero { padding-top: clamp(150px, 16vw, 220px); padding-bottom: 0; }
.bw-hero__raster {
  max-width: var(--breite-seite);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
/* Der Text endet nicht buendig mit dem Abschnitt, sondern haelt Abstand
   zum naechsten. Das Bild darf weiter am unteren Rand aufsitzen. */
.bw-hero__text {
  align-self: start;
  padding-bottom: clamp(56px, 6vw, 90px);
  animation: aufsteigen 1200ms var(--kurve) both;
}
.bw-hero__titel {
  margin: 0 0 clamp(28px, 3.4vw, 40px);
  font-size: clamp(34px, 5.2vw, 74px); line-height: 1.1; letter-spacing: -.015em;
  color: var(--creme);
}
.bw-hero__titel em { font-style: italic; color: var(--apricot); }
.bw-hero__eyebrow {
  margin-bottom: clamp(20px, 2.4vw, 28px);
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--apricot);
}
.bw-hero__lead {
  max-width: 56ch;
  font-size: clamp(16px, 1.25vw, 18px); line-height: 1.85;
  color: rgb(246 241 243 / .9);
}
.bw-hero__bild { position: relative; width: 92%; margin-left: auto; align-self: end; }
.bw-hero__bild img { width: 100%; height: auto; object-fit: contain; }

/* --- Vielleicht kennst du das Gefuehl ------------------------------------ */

.bw-gefuehl { padding-block: clamp(90px, 11vw, 140px) clamp(96px, 11vw, 150px); overflow: hidden; }
.bw-gefuehl__raster {
  max-width: 1220px; margin-inline: auto;
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
}
.bw-gefuehl__klebt { position: sticky; top: clamp(90px, 10vw, 140px); }
.bw-gefuehl__titel {
  margin: 0 0 clamp(28px, 3.4vw, 40px);
  font-size: clamp(30px, 4.4vw, 58px); line-height: 1.1; letter-spacing: -.01em;
}
.bw-gefuehl__text p {
  font-size: clamp(16px, 1.2vw, 18px); line-height: 1.9;
  color: rgb(44 66 103 / .92);
}
.bw-gefuehl__text p + p { margin-top: clamp(22px, 2.6vw, 32px); }
.bw-gefuehl__text strong { color: var(--taubenblau-text); }

/* Zwei kreisende Punkte auf Bahnen, dazu ein ruhender Kern */
.bahnen {
  position: relative;
  width: clamp(120px, 15vw, 180px); height: clamp(120px, 15vw, 180px);
  margin: clamp(20px, 3vw, 36px) 0 clamp(32px, 3.8vw, 44px);
}
.bahnen__aussen, .bahnen__innen, .bahnen__kern { position: absolute; border-radius: 50%; }
.bahnen__aussen { inset: 0; border: 1px solid rgb(44 66 103 / .3); animation: bahn-rechts 7s linear infinite; }
.bahnen__innen { inset: 18%; border: 1px solid rgb(44 66 103 / .4); animation: bahn-links 5.5s linear infinite; }
.bahnen__kern  { inset: 38%; background: rgb(44 66 103 / .75); }
.bahnen__punkt {
  position: absolute; top: -3px; left: 50%;
  transform: translateX(-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--navy);
}
@keyframes bahn-rechts { from { rotate: 0deg } to { rotate: 360deg } }
@keyframes bahn-links  { from { rotate: 0deg } to { rotate: -360deg } }

/* Kleine Pillen mit Stichworten */
.marken { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.marken li {
  width: fit-content;
  padding: 9px 16px;
  border: 1px solid rgb(44 66 103 / .28);
  border-radius: var(--pille);
  font-size: 13px; letter-spacing: .02em;
  color: var(--taubenblau-text);
}
.marken--reihe { flex-direction: row; flex-wrap: wrap; margin-bottom: clamp(32px, 4vw, 48px); }


.bw-gefuehl__ansatz {
  max-width: 820px;
  margin: clamp(140px, 7vw, 180px) auto 0;
}
.bw-gefuehl__ruf {
  margin: clamp(48px, 5.4vw, 72px) 0 clamp(24px, 3vw, 32px);
  font-family: var(--schrift-headline); font-style: italic;
  font-size: clamp(28px, 3vw, 42px); line-height: 1.25;
  text-align: center;
}
.bw-gefuehl__kasten {
  background: rgb(246 241 243 / .28);
  border: 1px solid rgb(44 66 103 / .18);
  padding: clamp(28px, 3.4vw, 42px);
}
.bw-gefuehl__kasten p { font-size: clamp(15px, 1.1vw, 17px); line-height: 1.8; color: rgb(44 66 103 / .92); }
.bw-gefuehl__kasten p + p { margin-top: clamp(18px, 2vw, 24px); }
.bw-gefuehl__knopf { text-align: center; margin-top: clamp(30px, 3.6vw, 44px); }

/* --- Was ist FBR --------------------------------------------------------- */

.bw-fbr { padding-block: clamp(90px, 11vw, 150px); }
.bw-fbr__raster {
  max-width: var(--breite-seite);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 4.4vw, 64px);
  align-items: start;
}

/* Das Bild bleibt unten stehen, waehrend die Karten daran vorbeiziehen. */
.bw-fbr__bild {
  align-self: stretch; min-width: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.bw-fbr__bild-klebt { position: sticky; bottom: 0; }
.bw-fbr__bild img {
  width: 100%; height: auto;
  /* Das echte Seitenverhaeltnis der Datei (875x1225). Stuende hier ein
     hoeherer Wert, liesse "contain" oben und unten einen Leerstreifen --
     unten waere dann eine Luecke zur Kante. object-position schiebt einen
     Rest, der bei begrenzter Hoehe entstehen kann, nach unten. */
  aspect-ratio: 875 / 1225; object-fit: contain; object-position: bottom;
  max-height: min(94vh, 940px);
}

.bw-fbr__spalte { min-width: 0; }

/* Die Ueberschrift bleibt oben stehen, die Karten schieben sich darunter
   durch. Der eigene Hintergrund ist noetig, damit nichts durchscheint. */
.bw-fbr__kopf {
  position: sticky; top: 0; z-index: 6;
  background: var(--taubenblau);
  padding: clamp(24px, 4vh, 52px) 0 clamp(24px, 2.8vw, 34px);
}
/* Der Entwurf hat .85. Auf Taubenblau ergibt das gemessen 4.34 und
   faellt fuer 11px-Text durch die Vorgabe von 4.5. .88 ist der naechste
   Wert, der sie schafft (4.52). */
.bw-fbr .eyebrow { color: rgb(246 241 243 / .88); }
.bw-fbr__titel {
  margin: 0;
  font-size: clamp(30px, 3.6vw, 50px); line-height: 1.14; letter-spacing: -.01em;
  color: var(--creme);
  text-wrap: balance;
}
.bw-fbr__titel em { font-style: italic; }

/* ---- Der Kartenstapel ----
   Jede Karte klebt ein Stueck tiefer als die vorige, so entsteht beim
   Scrollen ein Stapel. z-index steigt mit, sonst laege die erste oben. */
.bw-fbr__stapel {
  display: grid; grid-auto-rows: 1fr; gap: 32px;
  padding-bottom: clamp(40px, 6vw, 90px);
  width: 88%; min-width: min(100%, 420px); max-width: 620px;
}
.fbr-karte {
  position: sticky;
  border: 1.5px solid var(--navy-tief);
  border-radius: 16px;
  box-shadow: 8px 8px 0 rgb(24 36 55 / .3);
  padding: clamp(32px, 3.4vw, 44px);
  display: flex; align-items: center;
}
.fbr-karte:nth-child(1) { top: 244px; z-index: 1; }
.fbr-karte:nth-child(2) { top: 260px; z-index: 2; }
.fbr-karte:nth-child(3) { top: 276px; z-index: 3; }
.fbr-karte:nth-child(4) { top: 292px; z-index: 4; }
.fbr-karte:nth-child(5) { top: 308px; z-index: 5; }

.fbr-karte--navy    { background: var(--navy);            color: var(--apricot); }
.fbr-karte--apricot { background: var(--apricot);         color: var(--navy); }
.fbr-karte--tief    { background: var(--taubenblau-tief); color: var(--apricot-hell); }
.fbr-karte--liste   { flex-direction: column; justify-content: center; }

.fbr-karte p {
  margin: 0;
  font-size: clamp(16px, 1.2vw, 18px); line-height: 1.85;
}

.bw-fbr__zwischen {
  margin: 0 0 clamp(18px, 2vw, 24px);
  font-family: var(--schrift-headline); font-weight: 400;
  font-size: clamp(20px, 1.9vw, 27px); line-height: 1.2;
  color: var(--navy);
}
.bw-fbr__liste {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 12px;
  width: 100%;
}
.bw-fbr__liste li {
  display: grid; grid-template-columns: auto 1fr; gap: 14px;
  font-size: clamp(15px, 1.1vw, 17px); line-height: 1.6;
  color: var(--navy);
}
.bw-fbr__liste li::before {
  content: ""; display: block;
  width: 16px; height: 1px;
  background: rgb(44 66 103 / .7);
  margin-top: .85em;
}

.bw-fbr__schluss {
  max-width: 620px;
  margin: clamp(48px, 5.4vw, 68px) 0 0;
  font-size: clamp(16px, 1.2vw, 18px); line-height: 1.9;
  color: rgb(246 241 243 / .92);
  text-align: center;
}

/* --- Alarmbereitschaft --------------------------------------------------- */

.bw-alarm { padding-block: clamp(90px, 11vw, 150px); }
.bw-alarm__raster {
  max-width: 1220px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
}
/* Die Ueberschrift bleibt stehen, waehrend der Text daran vorbeilaeuft. */
.bw-alarm__klebt { position: sticky; top: clamp(90px, 10vw, 140px); align-self: start; }
.bw-alarm__titel {
  margin: 0 0 clamp(28px, 3.4vw, 40px);
  font-size: clamp(34px, 4.4vw, 58px); line-height: 1.1; letter-spacing: -.01em;
  text-wrap: balance;
}

/* Drei Kreise, die nacheinander nach aussen laufen, und ein Kern, der
   dazu pulst. Rein dekorativ. */
.bw-alarm__radar {
  position: relative;
  width: clamp(120px, 15vw, 180px); height: clamp(120px, 15vw, 180px);
  margin: clamp(20px, 3vw, 36px) 0 clamp(32px, 3.8vw, 44px);
}
.bw-alarm__radar span {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgb(44 66 103 / .4);
  animation: radar 3.4s var(--kurve) infinite;
}
.bw-alarm__radar span:nth-child(2) { animation-delay: 1.13s; }
.bw-alarm__radar span:nth-child(3) { animation-delay: 2.26s; }
.bw-alarm__radar i {
  position: absolute; inset: 38%; border-radius: 50%;
  background: rgb(44 66 103 / .75);
  animation: alarm-kern 1.15s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes radar { 0% { transform: scale(.35); opacity: 0 } 18% { opacity: .85 } 100% { transform: scale(1); opacity: 0 } }
@keyframes alarm-kern { 0%,100% { transform: scale(1); opacity: .9 } 50% { transform: scale(.82); opacity: .6 } }

.bw-alarm__text { max-width: 78ch; }
.bw-alarm__text p {
  font-size: clamp(16px, 1.2vw, 18px); line-height: 1.9;
  color: rgb(44 66 103 / .92);
}
.bw-alarm__text p + p { margin-top: clamp(22px, 2.6vw, 32px); }
.bw-alarm__text strong { font-weight: 700; color: var(--taubenblau-text); }

/* Der Merksatz ist im Entwurf kein Fliesstext, sondern gross und kursiv. */
.bw-alarm__merksatz {
  font-family: var(--schrift-headline); font-style: italic;
  font-size: clamp(24px, 2.4vw, 34px); line-height: 1.25;
  color: var(--navy);
  text-wrap: balance;
}
/* Muss die Regel fuer .bw-alarm__text p schlagen, sonst bleibt der
   Merksatz auf Fliesstextgroesse. */
.bw-alarm__text p.bw-alarm__merksatz {
  margin-top: clamp(34px, 4vw, 52px);
  font-size: clamp(24px, 2.4vw, 34px); line-height: 1.25;
  color: var(--navy);
}
.bw-alarm__text .bw-alarm__merksatz + p { margin-top: clamp(20px, 2.4vw, 28px); }

.bw-alarm__knopf { margin-top: clamp(34px, 4vw, 50px); }

/* --- Phasen einer Session ------------------------------------------------
   Die einzige Stelle im ganzen Projekt, an der Gold verwendet wird.
   Siehe Kommentar bei --gold in stil.css.
   -------------------------------------------------------------------------- */

.bw-phasen { position: relative; overflow: hidden; padding-block: clamp(90px, 10vw, 140px); }

/* Diaschau im Hintergrund, wie im Hero der Startseite, nur tiefer
   eingetaucht. Die Keyframes diaschau und kenburns stehen in stil.css,
   weil beide Seiten dieselben benutzen. */
.bw-phasen__bilder { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.bw-phasen__bild {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: diaschau 40s var(--kurve) var(--takt) infinite,
             kenburns 40s linear var(--takt) infinite;
}
.bw-phasen__ton {
  position: absolute; inset: 0;
  background: var(--navy); mix-blend-mode: color; opacity: .9;
}
.bw-phasen__verlauf {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgb(44 66 103 / .9) 0%, rgb(44 66 103 / .8) 45%, rgb(44 66 103 / .88) 100%);
}
.bw-phasen__tiefe {
  position: absolute; inset: 0;
  background: radial-gradient(110% 80% at 35% 45%,
    rgb(44 66 103 / .35) 0%, rgb(28 43 68 / .72) 100%);
}
.bw-phasen__inhalt { position: relative; z-index: 1; }

/* Im Entwurf stehen Auszeichnungszeile und Ueberschrift untereinander
   und beide links, nicht nebeneinander an den Raendern. */
.bw-phasen__kopf { margin-bottom: clamp(24px, 3vw, 36px); }
.bw-phasen__titel {
  margin: 0 0 clamp(18px, 2vw, 26px);
  max-width: 22ch;
  font-size: clamp(32px, 4vw, 58px); line-height: 1.1; letter-spacing: -.015em;
  color: var(--creme);
  text-wrap: balance;
}
/* Im Entwurf ist das eine kleine Auszeichnungszeile ueber der
   Ueberschrift, keine zweite Ueberschrift. Vorher stand hier 28px
   kursiv in Gold. */
.bw-phasen__schritt {
  margin: 0 0 20px;
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  /* Der Entwurf hat .55, das ergibt hier gemessen 4.2 und faellt fuer
     11px-Text durch. .62 schafft 4.5. */
  color: rgb(246 241 243 / .62);
}
.bw-phasen__einleitung {
  /* Der Entwurf traegt hier neben max-width:58ch eine feste Breite von
     598 Pixeln und setzt den Absatz damit auf vier Zeilen. Mit 58ch
     allein waeren es sechs. */
  max-width: 600px;
  margin-bottom: clamp(56px, 7vw, 104px);
  font-size: clamp(15px, 1.15vw, 18px); line-height: 1.85;
  color: rgb(246 241 243 / .78);
  text-wrap: pretty;
}

/* Links die Kurve mit den Reitern darunter, rechts die gewaehlte Phase
   hinter einer senkrechten Linie. */
.phasen {
  display: flex; flex-wrap: wrap;
  gap: clamp(32px, 4.5vw, 72px);
  align-items: center;
}
.phasen__kurve { flex: 1 1 460px; min-width: 0; }
.phasen__tafel {
  flex: 1 1 260px; min-width: 0;
  min-height: clamp(240px, 26vw, 320px);
  display: flex; flex-direction: column; justify-content: center;
  border-left: 1px solid rgb(246 241 243 / .18);
  padding-left: clamp(26px, 3.4vw, 48px);
}

/* --- Die Atemkurve ------------------------------------------------------- */

.welle {
  display: block;
  width: 100%; height: clamp(180px, 20vw, 280px);
  overflow: visible;
}
/* Jede der drei Bahnen atmet in ihrem eigenen Takt, versetzt gestartet.
   Das ergibt eine Bewegung, die nie ganz gleich aussieht. */
.welle__bahn { transform-box: fill-box; transform-origin: 50% 100%; }
.welle__bahn--1 { animation: welle-drift-1 6s var(--kurve) infinite; }
.welle__bahn--2 { animation: welle-drift-2 7.5s var(--kurve) -3s infinite; }
.welle__bahn--3 { animation: welle-drift-3 9s var(--kurve) -6s infinite; }

@keyframes welle-drift-1 {
  0%, 100% { transform: translateY(0) scaleY(1) }
  50%      { transform: translateY(-3.2px) scaleY(1.02) }
}
@keyframes welle-drift-2 {
  0%, 100% { transform: translateY(0) scaleY(1) }
  50%      { transform: translateY(2.6px) scaleY(.982) }
}
@keyframes welle-drift-3 {
  0%, 100% { transform: translateY(0) scaleY(1) }
  50%      { transform: translateY(-1.8px) scaleY(1.028) }
}

.welle__stueck {
  fill: none;
  stroke: rgb(221 175 110 / .55);
  stroke-width: 1.1;
  stroke-linecap: round;
  /* Sonst wuerde preserveAspectRatio="none" die Linien mitverzerren. */
  vector-effect: non-scaling-stroke;
  transition: stroke 600ms var(--kurve), stroke-width 600ms var(--kurve);
}
.welle__bahn--mitte .welle__stueck { stroke-width: 1.8; }

/* Erst mit JavaScript gibt es eine Auswahl. Dann tritt alles ausser dem
   gewaehlten Stueck zurueck. Ohne JavaScript bleibt die ganze Kurve
   gleichmaessig sichtbar. */
[data-phasen].bereit .welle__stueck { stroke: rgb(221 175 110 / .22); }
[data-phasen].bereit .welle__stueck.aktiv { stroke: var(--gold); stroke-width: 1.6; }
[data-phasen].bereit .welle__bahn--mitte .welle__stueck.aktiv { stroke-width: 2.6; }

/* --- Reiter unter der Kurve ---------------------------------------------- */

.phasen__leiste {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 14px;
  margin-top: clamp(16px, 1.8vw, 24px);
}
.phasen__reiter {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  min-width: 0; max-width: 100%; padding: 0;
  background: none; border: none; cursor: pointer;
  font-family: var(--schrift-text);
  font-size: clamp(9.5px, .75vw, 11px);
  letter-spacing: .05em; text-transform: uppercase;
  line-height: 1.3; text-align: center;
  /* Der Entwurf hat .45. Das ergibt auf Navy 3.0 und faellt fuer so
     kleinen Text durch. .68 schafft 4.5. */
  color: rgb(246 241 243 / .68);
  transition: color 600ms var(--kurve);
}
.phasen__balken {
  display: block; width: 100%; height: 2px;
  background: rgb(246 241 243 / .2);
  transition: background 600ms var(--kurve);
}
.phasen__reiter[aria-selected="true"] { color: var(--gold); }
.phasen__reiter[aria-selected="true"] .phasen__balken { background: var(--gold); }
.phasen__reiter:hover { color: var(--creme); }

/* --- Die gewaehlte Phase ------------------------------------------------- */

.phasen__nummer {
  margin-bottom: 16px;
  font-family: var(--schrift-headline);
  font-size: 15px; letter-spacing: .2em;
  /* Der Entwurf hat .75, das ergibt hier gemessen 4.32 und faellt fuer
     15px-Text durch. .86 schafft 4.5. */
  color: rgb(242 200 121 / .86);
}
.phasen__ueberschrift {
  margin-bottom: 20px;
  font-style: italic;
  font-size: clamp(30px, 3.2vw, 44px); line-height: 1.05;
  color: var(--gold);
}
.phasen__text {
  max-width: 34ch;
  font-size: clamp(15px, 1.15vw, 17px); line-height: 1.85;
  color: rgb(246 241 243 / .85);
  text-wrap: pretty;
}

/* Ohne JavaScript: Leiste weg, alle Phasen untereinander lesbar */
.phasen__leiste { display: none; }
.phasen__feld + .phasen__feld { margin-top: clamp(32px, 4vw, 48px); }

/* Mit JavaScript: Reiter zeigen, nur das gewaehlte Feld sichtbar */
[data-phasen].bereit .phasen__leiste { display: grid; }
[data-phasen].bereit .phasen__feld { display: none; margin-top: 0; }
[data-phasen].bereit .phasen__feld.aktiv { display: block; animation: feld-ein 500ms var(--kurve) both; }

@keyframes feld-ein { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }

/* Der Hinweis gilt dem Finger, nicht der Maus. Im Entwurf steht er nur
   auf dem Handy, ueber der Kurve. Das hidden im HTML nimmt JavaScript
   weg, sobald die Auswahl wirklich funktioniert. */
.phasen__hinweis {
  margin: 0 0 14px;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  text-align: center;
  color: rgb(246 241 243 / .62);
}
@media (min-width: 768px) { .phasen__hinweis { display: none; } }

/* --- Vier Ebenen --------------------------------------------------------- */

.bw-ebenen {
  position: relative; overflow: hidden;
  /* Der Entwurf laesst unten nur 16 bis 24 Pixel. Der letzte Listenpunkt
     stiess damit fast an den naechsten Abschnitt. Jetzt unten genauso
     viel Luft wie oben. */
  padding-block: clamp(90px, 11vw, 150px);
}
.bw-ebenen__kreis {
  position: absolute; top: -130px; right: -90px;
  width: 440px; height: 440px;
  border-radius: 50%;
  border: 1px solid rgb(44 66 103 / .16);
  pointer-events: none;
  animation: sanft-atmen 4.2s var(--kurve) infinite;
}
@keyframes sanft-atmen { 0%,100% { transform: scale(1); opacity: .45 } 50% { transform: scale(1.13); opacity: .8 } }

.bw-ebenen__inhalt { position: relative; max-width: 1200px; margin-inline: auto; }
.bw-ebenen__label { justify-content: center; color: rgb(44 66 103 / 0.88); }
.bw-ebenen__label::before { display: none; }
.bw-ebenen__titel {
  margin: 0 0 clamp(44px, 5vw, 64px);
  font-size: clamp(30px, 3.6vw, 50px); line-height: 1.14; letter-spacing: -.01em;
  text-align: center;
}

.ebenen__leiste {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(6px, 1.4vw, 20px);
  margin-bottom: clamp(40px, 4.6vw, 60px);
}
.ebenen__reiter {
  display: flex; align-items: baseline; gap: 10px;
  padding: 12px 22px;
  border: 1px solid rgb(44 66 103 / .28);
  border-radius: var(--pille);
  background: transparent; color: var(--navy);
  cursor: pointer;
  transition: background 300ms var(--kurve), color 300ms var(--kurve),
              border-color 300ms var(--kurve);
}
.ebenen__nummer { font-size: 11px; letter-spacing: .18em; opacity: .55; }
.ebenen__name { font-family: var(--schrift-headline); font-size: clamp(17px, 1.5vw, 21px); }
.ebenen__reiter:hover { opacity: .78; }
.ebenen__reiter[aria-selected="true"] {
  background: var(--navy); color: var(--apricot); border-color: var(--navy);
}

.ebenen__feld {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.ebenen__schrift {
  margin-bottom: 14px;
  font-family: var(--schrift-headline);
  font-size: clamp(30px, 3.4vw, 46px); line-height: 1.1; letter-spacing: -.01em;
}
/* Der Entwurf hat .72. Auf Apricot ergibt das 3.72 und faellt fuer
   15px-Text durch. .82 schafft 4.64. */
.ebenen__intro { max-width: 26ch; font-size: 15px; line-height: 1.7; font-style: italic; color: rgb(44 66 103 / .82); }
.ebenen__liste {
  margin: 0; padding: 0; list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(14px, 1.8vw, 22px) clamp(24px, 3vw, 44px);
  overflow-wrap: anywhere;
}
.ebenen__liste li {
  display: flex; gap: 12px; align-items: baseline;
  padding-bottom: 14px;
  border-bottom: 1px solid rgb(44 66 103 / .16);
  font-size: 15px; line-height: 1.55;
  color: rgb(44 66 103 / .88);
}
.ebenen__liste li::before {
  content: ""; flex: 0 0 auto;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--navy); opacity: .5;
  transform: translateY(-3px);
}

/* Ohne JavaScript alle vier Ebenen untereinander */
.ebenen__leiste { display: none; }
.ebenen__feld + .ebenen__feld { margin-top: clamp(40px, 5vw, 64px); }
[data-ebenen].bereit .ebenen__leiste { display: flex; }
[data-ebenen].bereit .ebenen__feld { display: none; margin-top: 0; }
[data-ebenen].bereit .ebenen__feld.aktiv { display: grid; animation: feld-ein 500ms var(--kurve) both; }

/* --- Antworten rund um Breathwork ---------------------------------------- */

.bw-fragen { padding-block: clamp(80px, 9vw, 130px) clamp(90px, 10vw, 140px); }
.bw-fragen__inhalt { max-width: 1120px; margin-inline: auto; }
.bw-fragen__kopf { margin-bottom: clamp(40px, 5vw, 64px); }
.bw-fragen__titel {
  max-width: 18ch;
  font-size: clamp(32px, 4vw, 52px); line-height: 1.08; letter-spacing: -.015em;
  color: var(--creme);
  text-wrap: balance;
}
.bw-fragen__knopf { margin-top: clamp(48px, 5.4vw, 70px); text-align: center; }
.bw-fragen__knopf .knopf { padding: 16px 40px; }

/*
 * Grundzustand, also ohne JavaScript: alles offen und lesbar. Der
 * Knopf ist dann ueberfluessig -- jede Frage steht ja als Ueberschrift
 * ueber ihrer Antwort -- und bleibt deshalb aus.
 */
.frage__reiter { display: none; }
.frage__feld {
  padding: clamp(20px, 2.4vw, 28px) 0 clamp(26px, 3vw, 38px);
  border-bottom: 1px solid rgb(246 241 243 / .16);
}
.frage__zahl { display: none; }
.frage__titel {
  margin-bottom: clamp(14px, 1.8vw, 20px);
  font-size: clamp(17px, 1.4vw, 20px); line-height: 1.4;
  color: var(--creme);
}

/*
 * Mit JavaScript auf dem Handy: eine Ziehharmonika. Im Entwurf ist
 * anfangs alles zugeklappt, es geht immer nur eine Antwort auf.
 * Ohne diese Form waere der Abschnitt auf dem Handy fast siebenmal so
 * hoch wie im Entwurf.
 */
.fragen.aufklapp .frage { border-bottom: 1px solid rgb(246 241 243 / .16); }
.fragen.aufklapp .frage__reiter {
  display: flex; gap: 14px; align-items: baseline;
  width: 100%; padding: 18px 2px;
  background: none; border: none;
  text-align: left; cursor: pointer;
  font-family: inherit;
}
.fragen.aufklapp .frage__nummer {
  flex: 0 0 auto;
  font-family: var(--schrift-headline);
  font-size: 12px; letter-spacing: .16em;
  color: rgb(246 241 243 / .62);
  transition: color 320ms var(--kurve);
}
.fragen.aufklapp .frage__text {
  font-size: 17px; line-height: 1.55;
  color: rgb(246 241 243 / .62);
  transition: color 320ms var(--kurve);
}
.fragen.aufklapp .frage__reiter[aria-expanded="true"] .frage__nummer { color: var(--apricot); }
.fragen.aufklapp .frage__reiter[aria-expanded="true"] .frage__text { color: var(--creme); }

/* Die Frage steht schon im Knopf, im Feld waere sie doppelt. */
.fragen.aufklapp .frage__feld {
  display: none;
  padding: 2px 2px 24px 34px;
  border-bottom: none;
}
.fragen.aufklapp .frage__feld.aktiv { display: block; }
.fragen.aufklapp .frage__titel { display: none; }

.frage__antwort { max-width: 76ch; }
.frage__antwort p {
  font-size: clamp(15px, 1.15vw, 17px); line-height: 1.85;
  color: rgb(246 241 243 / .8);
}
.frage__antwort p + p { margin-top: clamp(14px, 1.6vw, 20px); }
.frage__liste {
  margin: clamp(14px, 1.6vw, 20px) 0;
  padding: 0; list-style: none;
  columns: 280px; column-gap: 44px;
}
.frage__liste li {
  break-inside: avoid;
  display: flex; gap: 12px; align-items: baseline;
  margin-bottom: 9px;
  font-size: clamp(14px, 1.05vw, 16px); line-height: 1.7;
  /* Entwurf .72, traegt auf Navy 5.32 -- geht durch. */
  color: rgb(246 241 243 / .72);
  text-wrap: pretty;
}
.frage__liste li::before {
  content: "◦"; flex: 0 0 auto;
  font-size: 11px; line-height: 1.9;
  color: rgb(248 204 193 / .75);
}
.frage__zitat {
  margin: clamp(18px, 2vw, 26px) 0 0;
  max-width: 62ch;
  font-style: italic;
  font-size: clamp(15px, 1.15vw, 17px); line-height: 1.85;
  color: rgb(248 204 193 / .9);
}

/*
 * Mit JavaScript und ab 768 Pixel: links die Liste der Fragen, rechts
 * die ausgewaehlte Antwort -- so wie im Entwurf.
 */
@media (min-width: 768px) {
  /* Die Paare loesen sich in zwei Spalten auf: alle Knoepfe
     untereinander in die erste, alle Antworten uebereinander in die
     zweite. display:contents hebt dazu die Klammer um jedes Paar auf. */
  .fragen.bereit {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    column-gap: clamp(32px, 4.5vw, 64px);
    align-items: start;
  }
  .fragen.bereit .frage { display: contents; }
  .fragen.bereit .frage__reiter { grid-column: 1; }
  .fragen.bereit .frage__feld {
    grid-column: 2; grid-row: 1 / span 99;
    border-left: 1px solid rgb(248 204 193 / .35);
    padding-left: clamp(26px, 3.4vw, 44px);
    min-height: clamp(300px, 34vw, 420px);
  }

  .fragen.bereit .frage__reiter {
    display: flex; gap: 18px; align-items: baseline;
    width: 100%;
    padding: 18px 2px;
    background: none; border: none;
    border-bottom: 1px solid rgb(246 241 243 / .16);
    text-align: left; cursor: pointer;
    font-family: inherit;
    transition: border-color 320ms var(--kurve);
  }
  .fragen.bereit .frage__reiter[aria-selected="true"] { border-bottom-color: rgb(248 204 193 / .6); }
  .fragen.bereit .frage__nummer {
    font-family: var(--schrift-headline);
    font-size: 12px; letter-spacing: .16em;
    /* Entwurf .35 traegt auf Navy 2.4 und faellt durch, .62 sind 4.58. */
    color: rgb(246 241 243 / .62);
    transition: color 320ms var(--kurve);
  }
  .fragen.bereit .frage__text {
    font-size: clamp(15px, 1.15vw, 17px); line-height: 1.55;
    /* Entwurf .6 traegt 4.40 und faellt knapp durch. .62 sind 4.58. */
    color: rgb(246 241 243 / .62);
    transition: color 320ms var(--kurve);
  }
  .fragen.bereit .frage__reiter[aria-selected="true"] .frage__nummer { color: var(--apricot); }
  .fragen.bereit .frage__reiter[aria-selected="true"] .frage__text,
  .fragen.bereit .frage__reiter:hover .frage__text { color: var(--creme); }

  .fragen.bereit .frage__feld { display: none; border-bottom: none; }
  .fragen.bereit .frage__feld.aktiv { display: block; }
  .fragen.bereit .frage__titel { display: block; }
  .fragen.bereit .frage__zahl {
    display: block; margin-bottom: 18px;
    font-family: var(--schrift-headline);
    font-size: 15px; letter-spacing: .2em;
    color: rgb(248 204 193 / .8);
  }
  .fragen.bereit .frage__titel {
    margin-bottom: clamp(18px, 2.2vw, 26px);
    font-family: var(--schrift-headline); font-style: italic;
    font-size: clamp(24px, 2.4vw, 32px); line-height: 1.18;
    color: var(--apricot);
    text-wrap: pretty;
  }
}

/* ==========================================================================
   Schmalere Schirme
   ========================================================================== */

@media (max-width: 1023px) {
  .bw-hero__raster,
  .bw-gefuehl__raster,
  .bw-alarm__raster,
  .bw-fbr__raster { grid-template-columns: 1fr; }

  /* Die Ueberschrift klebt nur am Rechner. */
  .bw-alarm__klebt { position: relative; top: auto; }

  /* Untereinander sorgt schon der Rasterabstand fuer Luft. */
  .bw-hero__text { padding-bottom: 0; }
  .bw-hero__bild { width: min(70%, 320px); margin-inline: auto; }

  /* Klebende Spalten loesen, sonst blockieren sie den halben Schirm.
     relative statt static, damit absolut gesetzte Kinder ihren Bezug
     behalten -- siehe den Hinweis in startseite.css. */
  /* top muss mit zurueckgesetzt werden. Sonst wirkt der Wert aus der
     Klebe-Regel als Verschiebung nach unten und die Spalte rutscht in
     den Text darunter. Die Alarm-Spalte eine Regel weiter oben macht
     es richtig. */
  .bw-gefuehl__klebt { position: relative; top: auto; }
  .bw-fbr__bild-klebt { position: static; }
  .bw-fbr__bild {
    display: block;
    /* Im Entwurf nimmt das Foto hier 85 Prozent der Spalte ein, nicht
       70. Bei 390 Pixel sind das 298 statt 245. */
    width: 85%; max-width: 340px; margin-inline: auto;
  }

  /* Im Entwurf steht auf schmalen Schirmen erst die Ueberschrift, dann
     das Foto, dann der Kartenstapel und zuletzt der Schlusstext.
     Gebaut kam das Foto zuerst, weil es im Markup vor der Spalte steht
     -- am Rechner gehoert es ja nach links.

     display:contents loest die rechte Spalte auf, damit ihre Kinder
     neben dem Foto im selben Raster liegen und sich umsortieren
     lassen. */
  .bw-fbr__spalte { display: contents; }
  .bw-fbr__spalte > * { order: 4; }
  .bw-fbr__kopf { order: 1; }
  .bw-fbr__bild { order: 2; }
  .bw-fbr__stapel { order: 3; }

  /* Das Foto soll direkt auf der ersten Karte aufsitzen. Der negative
     Rand hebt genau den Rasterabstand wieder auf, der sonst zwischen
     beiden stuende. Im Entwurf steht dafuer margin-bottom:-45px. */
  .bw-fbr__bild { margin-bottom: calc(-1 * clamp(32px, 4.4vw, 64px)); }
  .bw-fbr__bild img { aspect-ratio: auto; max-height: none; }

  /* Der Kartenstapel klebt nur am Rechner. Auf dem Handy stuenden fuenf
     Karten uebereinander und wuerden den halben Schirm blockieren. */
  .bw-fbr__kopf { position: static; padding-top: clamp(28px, 5vw, 44px); }
  .bw-fbr__stapel { width: 100%; max-width: none; grid-auto-rows: auto; gap: 20px; }
  .fbr-karte { position: static; }
  .bw-fbr__schluss { max-width: none; }

  .bw-gefuehl__ansatz { margin-top: clamp(56px, 8vw, 90px); }

  /* Kurve und Tafel untereinander. Die Trennlinie wandert dabei von
     links nach oben. */
  .phasen__kurve, .phasen__tafel { flex: 1 1 100%; }

  /* Die Reiter sind hier nur noch zwei Zeilen hoch und damit zu klein
     zum Antippen. Der freie Platz waechst nach unten, Strich und
     Beschriftung bleiben, wo sie sind. */
  .phasen__reiter { min-height: 44px; }
  .phasen__tafel {
    min-height: 0;
    border-left: none; padding-left: 0;
    border-top: 1px solid rgb(246 241 243 / .18); padding-top: 30px;
  }

  .ebenen__feld { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  /* Die fuenf Reiter bleiben nebeneinander, wie im Entwurf. Der
     Entwurf laesst sie dafuer mitten im Wort umbrechen
     ("ENTSPANNU / NG"). Stattdessen skaliert die Schrift hier mit der
     Bildschirmbreite, so dass auch das laengste Wort in seine Spalte
     passt, und ein Umbruch ist ausgeschlossen. */
  .welle { height: 148px; }
  .phasen__leiste { column-gap: 5px; margin-top: 14px; }
  .phasen__reiter {
    /* Obergrenze 9.5px, damit es an der 768er Grenze keinen Sprung
       gibt -- dort uebernimmt die Grundregel mit demselben Wert. */
    font-size: clamp(7px, 2vw, 9.5px);
    letter-spacing: .02em; gap: 8px;
    white-space: nowrap;
  }
  .phasen__ueberschrift { font-size: 30px; margin-bottom: 14px; }

  .marken--reihe { flex-direction: column; }

  /* Nicht unter 17px, sonst zoomt iOS */
  .ebenen__liste li,
  .ebenen__intro,
  .phasen__text,
  .frage__antwort p,
  .frage__liste li { font-size: 17px; }

  /* Pill-Buttons ueber die volle Breite */
  .bw-gefuehl__knopf .knopf,
  .bw-alarm__knopf .knopf,
  .bw-fragen__knopf .knopf { display: block; width: 100%; }
  .ebenen__reiter { flex: 1 1 auto; justify-content: center; }
}