/* Natural High · Das Untermenü in „Mein Bereich"
   ---------------------------------------------------------------------------
   „Mein Bereich" ist nicht mehr eine Seite, sondern ein Ort mit zwei Räumen:
   die nächste Session, und das Training. Chris am 21.08.: „Training aus dem
   Menü oben rausnehmen, das ist ja eigentlich ein Unterbereich von Mein
   Bereich. Und dass wir in meinem Bereich jetzt ein neues Menü haben."

   Es steht auf BEIDEN Seiten und ist auf beiden dieselbe Datei. Zwei Fassungen
   desselben Menüs würden auseinanderlaufen, und die zweite wäre die, die
   irgendwann nicht mehr stimmt.

   Kein Kasten, keine Kacheln: zwei Wörter nebeneinander, das aktuelle hell mit
   einer feinen Linie darunter. Wie die Wege oben, nur eine Ebene tiefer.     */

.bereich-menue{
  display:flex; justify-content:center; gap:2rem;
  margin:0 auto clamp(2rem,6vh,3rem);
  padding:0;
}
.bereich-menue a{
  position:relative;
  padding:.5rem .1rem;
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:#5b6670; text-decoration:none;
  transition:color .45s ease;
}
.bereich-menue a::after{
  content:''; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--fg);
  transform:scaleX(0); transform-origin:center;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.bereich-menue a:hover{color:var(--fg-dim)}
.bereich-menue a[aria-current="page"]{color:var(--fg)}
.bereich-menue a[aria-current="page"]::after{transform:scaleX(1)}

/* Ein kleines Zeichen am Training, solange dort nichts läuft. */
.bereich-menue .bald-punkt{
  display:inline-block; width:.3rem; height:.3rem;
  margin-left:.45rem; vertical-align:.18em;
  border-radius:50%; background:#3f4750;
}

@media (max-width: 420px){
  .bereich-menue{gap:1.5rem}
  .bereich-menue a{font-size:.7rem; letter-spacing:.12em}
}

@media (prefers-reduced-motion: reduce){
  .bereich-menue a::after{transition:none}
}

/* ---- Zeichen über dem Wort ----
   Chris am 21.08.: "die Icons darüber, damit's aussieht wie eine App."

   Also eine Leiste wie unten in einer App: Zeichen oben, Wort darunter,
   beides in einer Spalte. Das Wort bleibt - zwei Zeichen allein müsste man
   erst lernen, zwei Wörter versteht man sofort. Das Zeichen macht daraus
   einen Ort statt eines Links.

   Beide Zeichen sind aus DEMSELBEN Alphabet gebaut: dünne Kreise, offen,
   nichts darin - die Sprache des Rings, der überall auf der Seite atmet.
   Zwei überschneidende Kreise für Session (zur selben Zeit), zwei
   ineinander für Atem (ein und aus). */
.bereich-menue a{
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  padding:.5rem .9rem;
}
.bereich-zeichen{
  display:block; width:26px; height:26px;
  fill:none; stroke:currentColor; stroke-width:1.1;
  overflow:visible;
  opacity:.85;
  transition:opacity .45s ease, transform .5s cubic-bezier(.22,.61,.36,1);
}
.bereich-menue a:hover .bereich-zeichen{ opacity:1 }
/* Der Ort, an dem man steht, atmet mit - derselbe Takt wie das Zeichen
   oben auf der Seite. Ganz leise, damit es nicht zieht. */
.bereich-menue a[aria-current="page"] .bereich-zeichen{
  opacity:1;
  animation:bereich-atem 11.5s cubic-bezier(.37,0,.63,1) infinite;
}
@keyframes bereich-atem{
  0%   {transform:scale(.94)}
  45.2%{transform:scale(1)}     /* 5,2 s ein */
  100% {transform:scale(.94)}   /* 6,3 s aus */
}
/* Der Strich sass unter dem Text, als er das ganze Feld war. Jetzt gehoert
   er unter die SPALTE - sonst haengt er am unteren Rand des Zeichens. */
.bereich-menue a::after{ bottom:-.15rem }

@media (prefers-reduced-motion: reduce){
  .bereich-menue a[aria-current="page"] .bereich-zeichen{ animation:none }
}
@media (max-width: 420px){
  .bereich-zeichen{ width:23px; height:23px }
  .bereich-menue a{ gap:.42rem }
}

/* ═══ Der Kopf rastet kurz ein ═══════════════════════════════════════════
   Chris am 21.08.: "der obere Bereich mit der Atemanimation und dem
   Schriftzug sollte auch Abstand zum Menü haben. Und wenn man runterscrollt,
   dann rastet es so ein wie auf der Landingpage – aber nur minimal, damit es
   weiterhin den Flow hat."

   Derselbe Aufbau wie .einstieg / .einstieg-warte auf der Startseite: Ein
   Block klebt oben fest, ein leeres Stück darunter bestimmt, WIE LANGE.
   Ohne dieses Stück klebte der Kopf bis zum Seitenende – ein sticky-Element
   hält so lange, wie sein Elternteil reicht.

   Auf der Startseite ist die Strecke lang: Dort ist der Einstieg eine Wand,
   und das Zeichen soll sie tragen. Hier sind es ein paar Dutzend Pixel –
   gerade genug, dass man das Einrasten spürt, und zu wenig, um zu warten. */
.bereich-kopf{ width:100% }
.bereich-kopf-fest{
  position:sticky;
  /* Chris am 21.08.: "da aber bitte bisschen Abstand drüber – vielleicht
     zehn Pixel mehr, zwanzig, dreißig sogar. Dass es da schon einrastet,
     mit Abstand darüber."

     Vorher 16-32 px. Jetzt 46-62 px: Der Kopf rastet ein, bevor er die
     obere Kante berührt - er sitzt dort, statt daran zu kleben. */
  top:clamp(2.9rem, 6.5vh, 3.9rem);
  z-index:2;
  text-align:center;
}
.bereich-kopf-warte{ height:clamp(26px, 6vh, 58px) }

/* ⚠️ DER ABSTAND MUSS IM FESTEN TEIL STEHEN, nicht in der Warte.
   Chris am 21.08., zum zweiten Mal: "immer noch keinen Abstand hingemacht -
   über 'Schön, dass du da bist.'"

   Beim ersten Mal habe ich den EINRAST-PUNKT verschoben (top). Falsche
   Stelle. Der Abstand, den er meint, liegt zwischen Wortmarke und Satz -
   und der schrumpft beim Scrollen weg, weil die Warte-Strecke genau das
   ist: der Weg, den der Inhalt nach oben macht, während der Kopf steht.

   Gemessen: in Ruhe 110 px, eingerastet nur noch 56. Sichtbar ist also
   nicht der Ruhewert, sondern das, was NACH dem Einrasten übrig bleibt -
   und das steht allein im festen Teil.

   ── UND DANN NOCH EINMAL FALSCH ──
   Zweiter Versuch: margin-bottom an der Wortmarke. Gemessen: in Ruhe 126 px,
   nach 120 px Scrollen nur noch 74. Auch weggefressen.

   Der Grund: Ein Rand des letzten Kindes faellt AUS dem Elternteil heraus
   (margin collapsing) - er landet damit zwischen dem festen Teil und der
   Warte, also genau in der Strecke, die beim Scrollen verschwindet.
   Gemessen an der Hoehe: der feste Teil ist 144 px hoch, ohne die 92.

   ⭐ DIE STELLE, DIE BLEIBT, IST DIE ÜBERSCHRIFT SELBST. Sie steht NACH
   dem Kopf und wandert mit ihm - was zwischen ihr und dem Ende des Kopfes
   liegt, kann kein Scrollen kuerzen. Alles davor kann es. */
.bereich-kopf-fest .marke{ margin-bottom:0 !important }
/* ⚠️ ~ und nicht +. Zwischen Kopf und Ueberschrift steht die Leiste; ein
   `+` verlangt DIREKTE Nachbarschaft und traf deshalb nichts. Gemessen:
   54 px in Ruhe, 0 nach dem Scrollen - also gar keine Regel. */
.bereich-kopf ~ h1{ margin-top:clamp(2.6rem, 7vh, 4.4rem) !important }

/* Luft zwischen Kopf und Menü. */
.bereich-menue{ margin-top:clamp(1.6rem, 5vh, 2.6rem) }

@media (prefers-reduced-motion: reduce){
  .bereich-kopf-fest{ position:static }
  .bereich-kopf-warte{ display:none }
}

/* ═══ Auf dem Rechner steht das Menü links ═══════════════════════════════
   Chris am 21.08.: "lass uns dieses geile Menü, Session und Atem, wie bei
   der Atem-App machen – auf PC auf die linke Seite, mittig. Und auf mobil,
   wenn's eng ist, genauso wie es jetzt gerade ist."

   Genau das macht die Atem-App: unten eine Leiste, ab 900 px eine Spalte,
   die senkrecht in der Mitte steht (css/base.css, .nav im Breitbild).

   ⚠️ position:fixed und NICHT ein Eingriff ins Seitenraster. Der Inhalt
   steht in einer 640-px-Spalte in der Mitte; links davon sind auf einem
   1280er Schirm rund 300 px frei. Das Menü holt sich diesen Platz selbst,
   ohne dass main etwas davon wissen muss. Ein Umbau des Rasters hätte
   dieselbe Wirkung und eine ganze Seite als Nebenwirkung. */
@media (min-width: 900px){
  /* ⚠️ NICHT mit transform mittig setzen.
     top:50% + translateY(-50%) waere das Naheliegende - und es sitzt 60 px
     zu tief. Grund: Das Menue traegt .auf, und diese Animation endet auf
     `transform:none`. Eine laufende (auch eine beendete, mit fill:both)
     Animation schlaegt jede Transform-Regel aus dem Stylesheet. Gemessen:
     Mitte bei 510 statt 450.

     Also ueber die HOEHE mitteln, nicht ueber die Verschiebung - genau wie
     die Atem-App es macht (height:100dvh, justify-content:center). Das
     kommt der Animation nicht ins Gehege. */
  /* Fuenf Raeume statt zwei - die Abstaende werden enger, damit die Spalte
     auch auf einem 900er Schirm nicht ueber den Rand laeuft. */
  .bereich-menue{
    position:fixed;
    left:clamp(1.2rem, 3.5vw, 3rem);
    top:0; height:100dvh;
    z-index:4;
    margin:0;
    flex-direction:column;
    justify-content:center;
    gap:clamp(.9rem, 2.2vh, 1.5rem);
    /* Eine Spalte ueber die volle Hoehe faengt sonst jeden Klick daneben ab. */
    pointer-events:none;
  }
  .bereich-menue a{ pointer-events:auto }
  /* Der Strich gehört unter das Wort, nicht unter die Spalte. */
  .bereich-menue a{ padding:.5rem .6rem }
}

/* Fuenf statt zwei: Auf dem Handy muessen sie sich die Breite teilen. Enger
   und eine Spur kleiner - lieber alle fuenf lesbar als drei bequem und zwei
   abgeschnitten. */
@media (max-width: 899px){
  .bereich-menue{
    gap:clamp(.5rem, 3.2vw, 1.4rem);
    flex-wrap:nowrap;
  }
  .bereich-menue a{ padding:.5rem .1rem }
  .bereich-zeichen{ width:22px; height:22px }
  .bereich-menue a span{ font-size:.62rem; letter-spacing:.08em }
}
@media (max-width: 380px){
  .bereich-zeichen{ width:20px; height:20px }
  .bereich-menue a span{ font-size:.56rem; letter-spacing:.05em }
}

/* ---- Die Leiste gehört denen, die drin sind ----
   Auf Podcast und Blog steht sie im Markup, aber sie zeigt sich nur, wenn
   jemand angemeldet ist. Für alle anderen wären es fünf Türen, hinter denen
   eine Anmeldung steht – das ist kein Menü, das ist eine Absage in fünf
   Teilen.

   html.nh-raeume setzt menue.js. Es ist eine Vermutung aus dem Speicher,
   keine geprüfte Anmeldung – gut genug für Wege, zu wenig für Inhalte. */
html:not(.nh-raeume) .bereich-menue{ display:none !important }