/* ============================================================
   Natural High · Blog
   Gemeinsames Stylesheet für die Übersicht und alle Beiträge.
   Bewusst eine Datei: so kann eine Regel nicht auf einer Seite
   fehlen (das ist uns beim Ring schon einmal passiert).
   ============================================================ */

:root{
  --bg:#0b0d10;
  --bg-2:#12161b;
  --fg:#ece8e1;
  --fg-dim:#9aa1a9;
  --fg-still:#5b6670;
  --line:#252c34;
  --breite:min(92vw, 640px);
  --lese:min(92vw, 34rem);   /* Lesebreite – ca. 62 Zeichen */
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
/* Das Gleiten übernimmt Lenis (/lenis-start.js) – zwei Systeme gleichzeitig
   würden sich gegenseitig ausbremsen. */
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,system-ui,sans-serif;
  font-weight:300;
  line-height:1.55;
  letter-spacing:.01em;
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center;
  padding:max(6vh,2.5rem) 1.25rem;
  overflow-x:hidden;
}

/* ---- Das Zeichen ---- */
.zeichen-huelle{
  display:block;
  margin:clamp(2rem,9vh,4.5rem) auto clamp(1.4rem,4vh,2rem);
  width:clamp(74px,19vw,92px);
}
.zeichen{width:100%; aspect-ratio:1; display:block; animation:zeichen-atem 9.9s ease-in-out infinite}
.zeichen circle{fill:none; stroke-linecap:round}
.zeichen .ring{
  stroke:var(--fg); stroke-width:1.6; opacity:.72;
  animation:zeichen-strich 9.9s ease-in-out infinite;
}
@keyframes zeichen-strich{
  0%  {stroke-width:3.2; animation-timing-function:cubic-bezier(.42,0,.3,1)}
  43.43%{stroke-width:1.1; animation-timing-function:cubic-bezier(.5,0,.45,1)}
  100%{stroke-width:3.2}
}
@keyframes zeichen-atem{
  /* Das Zeichen verschwindet nie ganz - beim Ausatmen bleibt ein kleiner,
     ruhiger Kreis stehen. Er ist die Marke und muss immer da sein. */
  0%  {transform:scale(.42); opacity:.46; animation-timing-function:cubic-bezier(.42,0,.3,1)}
  43.43%{transform:scale(1.24); opacity:1; animation-timing-function:cubic-bezier(.5,0,.45,1)}
  100%{transform:scale(.42); opacity:.46}
}
.marke{
  font-size:clamp(.72rem,2.6vw,.82rem);
  letter-spacing:.42em; text-transform:uppercase;
  color:var(--fg-dim); margin:0 0 clamp(2rem,7vh,3.5rem);
  padding-left:.42em; text-align:center;
}
.marken-link{text-decoration:none; color:inherit; display:block}

/* ---- Einblenden ---- */
.auf{opacity:0; transform:translateY(14px); animation:auf 1.1s cubic-bezier(.22,.61,.36,1) forwards}
.d1{animation-delay:.05s} .d2{animation-delay:.16s} .d3{animation-delay:.28s} .d4{animation-delay:.4s}
@keyframes auf{to{opacity:1; transform:none}}

/* ---- Mini-Menü ---- */
.menue{
  position:fixed; top:0; right:0; left:0; z-index:5;
  padding:max(1rem,env(safe-area-inset-top)) max(1.1rem,env(safe-area-inset-right)) 2.6rem 1.4rem;
  display:flex; justify-content:flex-end; gap:1.1rem;
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  pointer-events:none;
  /* Beim Lesen läuft ständig Text unter dem Menü durch. Der Verlauf deckt
     deshalb länger und blendet erst danach aus – sonst liest man Menü und
     Satz übereinander. */
  background:linear-gradient(180deg, var(--bg) 0%, var(--bg) 58%, transparent 100%);
}
.menue a{
  pointer-events:auto;
  color:var(--fg-dim); text-decoration:none; padding:.2rem 0;
  border-bottom:1px solid transparent;
  transition:color .45s ease, border-color .45s ease;
}
.menue a:hover{color:var(--fg); border-bottom-color:var(--line)}
.menue a[aria-current]{color:var(--fg)}

/* ---- Der Knopf ---- */
a.knopf{
  position:relative; isolation:isolate; overflow:hidden;
  display:block; width:100%; padding:1.05rem 1.2rem;
  background:var(--bg-2);
  color:color-mix(in srgb, #ffffff calc(var(--cta-text,0) * 100%), #5b6670);
  border:1px solid color-mix(in srgb, transparent calc(var(--cta-farbe,0) * 100%), var(--line));
  border-radius:14px;
  font:inherit; font-size:1rem; letter-spacing:.02em;
  font-weight:calc(300 + var(--cta-text,0) * 300);
  text-shadow:0 1px 12px rgba(10,4,24,calc(var(--cta-text,0) * .6));
  text-align:center; text-decoration:none; cursor:pointer;
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
a.knopf::before, a.knopf::after{
  content:''; position:absolute; inset:-60%; z-index:-1;
  filter:blur(22px);
  opacity:calc(var(--cta-farbe,0) * .95);
  transition:opacity .35s ease;
}
a.knopf::before{
  background:
    radial-gradient(38% 60% at 22% 40%, #b18cff 0%, transparent 62%),
    radial-gradient(34% 56% at 74% 62%, #ff8fc8 0%, transparent 62%);
  animation:lava-a 19s ease-in-out infinite;
}
a.knopf::after{
  background:
    radial-gradient(36% 58% at 64% 26%, #7fb6ff 0%, transparent 62%),
    radial-gradient(28% 46% at 34% 78%, #ffdf85 0%, transparent 60%);
  animation:lava-b 29s ease-in-out infinite;
}
@keyframes lava-a{
  0%,100%{transform:translate3d(-6%,-4%,0) scale(1)}
  33%    {transform:translate3d(8%,6%,0) scale(1.18)}
  66%    {transform:translate3d(4%,-7%,0) scale(.92)}
}
@keyframes lava-b{
  0%,100%{transform:translate3d(5%,5%,0) scale(1.08)}
  40%    {transform:translate3d(-8%,-3%,0) scale(.94)}
  75%    {transform:translate3d(-2%,8%,0) scale(1.2)}
}
/* Auf den Blog-Seiten leuchtet der Knopf, sobald er in Sicht kommt –
   scroll-gebunden, damit nichts nachzieht. */
@supports (animation-timeline: view()){
  a.knopf{
    animation:knopf-an linear both;
    animation-timeline:view();
    animation-range:entry 15% cover 45%;
  }
  @keyframes knopf-an{ to{ --cta-farbe:1; --cta-text:1 } }
  @property --cta-farbe{syntax:'<number>'; inherits:true; initial-value:0}
  @property --cta-text{syntax:'<number>'; inherits:true; initial-value:0}
}
@supports not (animation-timeline: view()){
  a.knopf{--cta-farbe:1; --cta-text:1}
}

/* ---- Fußzeile ---- */
footer{
  margin-top:clamp(2.5rem,8vh,4rem);
  font-size:.75rem; color:var(--fg-still); letter-spacing:.04em; text-align:center;
}
footer a{color:inherit; text-decoration:none; border-bottom:1px solid transparent; transition:border-color .4s ease}
footer a:hover{border-bottom-color:var(--line)}
.footer-links{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.3rem .8rem;
  margin-top:.7rem; font-size:.66rem; letter-spacing:.05em; color:#3f4750;
}
.footer-links span::before{content:'·'; margin-right:.9rem; color:var(--line)}
.footer-links span:first-child::before{content:none; margin:0}

/* ============================================================
   Übersicht
   ============================================================ */
main{position:relative; z-index:1; width:var(--breite)}
.kopf{text-align:center}
h1{
  font-size:clamp(1.8rem,6.5vw,2.6rem); font-weight:200;
  line-height:1.15; letter-spacing:-.02em; margin:0 0 .9rem;
}
.unter{
  font-size:clamp(.98rem,3.4vw,1.1rem); color:var(--fg-dim);
  max-width:34ch; margin:0 auto clamp(2.4rem,7vh,3.4rem); line-height:1.6;
}
.beitraege{display:flex; flex-direction:column; gap:.9rem}
.beitrag{
  display:block; text-decoration:none; color:inherit;
  border:1px solid var(--line); border-radius:16px;
  background:var(--bg-2); padding:1.2rem 1.3rem;
  transition:border-color .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
}
.beitrag:hover{border-color:#3a444f; transform:translateY(-2px)}
.beitrag-marke{
  display:flex; align-items:center; gap:.7rem;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-still);
  margin-bottom:.7rem;
}
.beitrag-marke .punkt{width:5px; height:5px; border-radius:50%; background:#6f7a86; flex:0 0 auto}
.beitrag h2{
  font-size:clamp(1.12rem,4.2vw,1.32rem); font-weight:300;
  line-height:1.3; letter-spacing:-.01em; margin:0 0 .55rem;
}
.beitrag p{margin:0; font-size:.92rem; line-height:1.65; color:var(--fg-dim)}
.beitrag-fuss{
  margin-top:.9rem; font-size:.75rem; color:var(--fg-still); letter-spacing:.04em;
  display:flex; align-items:center; gap:.6rem;
}
.beitrag-fuss .pfeil{margin-left:auto; transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.beitrag:hover .beitrag-fuss .pfeil{transform:translateX(4px)}

/* ============================================================
   Ein Beitrag
   ============================================================ */

/* Lesefortschritt – der dünne Strich ganz oben */
.fortschritt{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:6;
  background:transparent; pointer-events:none;
}
.fortschritt-strich{
  height:100%; width:0%;
  background:linear-gradient(90deg,#b18cff,#7fb6ff,#ffdf85);
  opacity:.85;
}

article{width:var(--lese); margin:0 auto}
.beitrag-kopf{text-align:center; margin-bottom:clamp(2.2rem,7vh,3.2rem)}
.kategorie{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--fg-still); margin-bottom:1.1rem;
}
.kategorie .punkt{width:5px; height:5px; border-radius:50%; background:#6f7a86}
article h1{margin-bottom:1rem}
.anriss{
  font-size:clamp(1rem,3.6vw,1.12rem); color:var(--fg-dim);
  line-height:1.65; margin:0 auto 1.6rem; max-width:32ch;
}
.beitrag-meta{
  font-size:.74rem; color:var(--fg-still); letter-spacing:.06em;
  display:flex; justify-content:center; gap:.7rem; flex-wrap:wrap;
}
.beitrag-meta .trenn{color:var(--line)}

/* Inhaltsverzeichnis */
.inhalt{
  border:1px solid var(--line); border-radius:16px; background:var(--bg-2);
  padding:1.1rem 1.3rem; margin:0 0 clamp(2.4rem,7vh,3.2rem);
}
.inhalt-titel{
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--fg-still); margin:0 0 .9rem;
}
.inhalt ol{list-style:none; margin:0; padding:0; counter-reset:i}
.inhalt li{counter-increment:i; margin:0 0 .5rem}
.inhalt li:last-child{margin-bottom:0}
.inhalt a{
  display:flex; gap:.8rem; align-items:baseline;
  color:var(--fg-dim); text-decoration:none; font-size:.92rem; line-height:1.5;
  transition:color .4s ease;
}
.inhalt a::before{
  content:counter(i,decimal-leading-zero);
  font-size:.7rem; letter-spacing:.1em; color:var(--fg-still);
  flex:0 0 auto; min-width:1.6rem;
}
.inhalt a:hover{color:var(--fg)}

/* Fließtext */
.text h2{
  font-size:clamp(1.28rem,4.8vw,1.6rem); font-weight:200;
  line-height:1.25; letter-spacing:-.01em;
  margin:clamp(2.6rem,8vh,3.4rem) 0 1rem;
  scroll-margin-top:5rem;
}
.text h3{
  font-size:clamp(1.02rem,3.7vw,1.14rem); font-weight:400;
  line-height:1.35; margin:2rem 0 .7rem; color:var(--fg);
}
.text p{margin:0 0 1.15rem; font-size:1rem; line-height:1.75; color:#cdd3da}
.text p:last-child{margin-bottom:0}
.text strong{font-weight:500; color:var(--fg)}
.text em{font-style:italic; color:var(--fg-dim)}
.text a{color:var(--fg); text-decoration:none; border-bottom:1px solid var(--line); transition:border-color .4s ease}
.text a:hover{border-bottom-color:var(--fg-dim)}
.text ul{margin:0 0 1.15rem; padding-left:1.1rem; color:#cdd3da}
.text li{margin:0 0 .55rem; line-height:1.7}
.text li::marker{color:var(--fg-still)}

/* Der eingerückte Satz, der stehen bleiben soll */
.merksatz{
  margin:clamp(2rem,6vh,2.6rem) 0;
  padding:0 0 0 1.2rem;
  border-left:1px solid #3a444f;
  font-size:clamp(1.05rem,4vw,1.22rem); font-weight:200; line-height:1.5;
  color:var(--fg); letter-spacing:-.005em;
}

/* Kasten mit einem Gedanken, der neben dem Text steht */
.kasten{
  border:1px solid var(--line); border-radius:16px; background:var(--bg-2);
  padding:1.1rem 1.3rem; margin:clamp(1.8rem,5vh,2.4rem) 0;
}
.kasten-titel{
  display:flex; align-items:center; gap:.6rem;
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--fg-still); margin:0 0 .7rem;
}
.kasten p{margin:0 0 .8rem; font-size:.94rem; line-height:1.7; color:#cdd3da}
.kasten p:last-child{margin-bottom:0}

/* Die Übung – nummerierte Schritte */
.schritte{margin:clamp(1.8rem,5vh,2.4rem) 0; display:flex; flex-direction:column; gap:.9rem}
.schritt{display:flex; gap:1rem; align-items:flex-start}
.schritt-nr{
  flex:0 0 auto; width:1.9rem; height:1.9rem; border-radius:50%;
  border:1px solid var(--line); display:grid; place-items:center;
  font-size:.74rem; color:var(--fg-dim);
}
.schritt-text{font-size:.94rem; line-height:1.7; color:#cdd3da; padding-top:.15rem}
.schritt-text b{font-weight:500; color:var(--fg)}

/* Die vier Phasen eines Atemzugs */
.takt{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(6rem,1fr)); gap:.7rem;
  margin:clamp(1.8rem,5vh,2.4rem) 0;
}
.takt-teil{
  border:1px solid var(--line); border-radius:14px; background:var(--bg-2);
  padding:.9rem .7rem; text-align:center;
}
.takt-name{font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-still)}
.takt-zahl{font-size:clamp(1.3rem,5vw,1.6rem); font-weight:200; margin:.3rem 0 .1rem}
.takt-einheit{font-size:.7rem; color:var(--fg-still); letter-spacing:.06em}

/* Hinweis, wo Vorsicht angebracht ist */
.hinweis{
  border:1px solid #3a3226; border-radius:16px;
  background:linear-gradient(180deg, rgba(255,223,133,.04), rgba(255,223,133,.015));
  padding:1.1rem 1.3rem; margin:clamp(1.8rem,5vh,2.4rem) 0;
}
.hinweis .kasten-titel{color:#a89268}
.hinweis p{margin:0; font-size:.9rem; line-height:1.7; color:#bdc3ca}

/* Der Abschluss unter dem Beitrag */
.schluss{
  width:var(--lese); margin:clamp(3rem,9vh,4.5rem) auto 0;
  padding-top:clamp(2.4rem,7vh,3.2rem);
  border-top:1px solid var(--line);
  text-align:center;
}
.schluss h2{font-size:clamp(1.3rem,5vw,1.7rem); font-weight:200; letter-spacing:-.01em; margin:0 0 .8rem}
.schluss p{color:var(--fg-dim); margin:0 0 1.6rem; font-size:.98rem; line-height:1.6}

/* Weiterlesen */
.weiter{width:var(--lese); margin:clamp(2.6rem,8vh,3.4rem) auto 0}
.weiter-titel{
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--fg-still); margin:0 0 1rem; text-align:center;
}
.weiter .beitraege{gap:.7rem}
.weiter .beitrag{padding:1rem 1.15rem}
.weiter .beitrag h2{font-size:1rem; margin-bottom:.35rem}
.weiter .beitrag p{font-size:.86rem}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .zeichen,.zeichen .ring,a.knopf::before,a.knopf::after{animation:none}
  .auf{animation-duration:.01ms; opacity:1; transform:none}
}