.bg-dots {
    background-image: radial-gradient(currentColor 1px, transparent 1px);
    background-size: 18px 18px;
    color: rgba(0,0,0,0.08);
  }

  .mask-fade {
    -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 70%, transparent 100%);
            mask-image: radial-gradient(70% 60% at 50% 40%, #000 70%, transparent 100%);
  }

  body { background-color: #fff; color: #222; }
  .text-neutral-900 { color: #111 !important; }
  .text-neutral-800 { color: #222 !important; }
  .text-neutral-700 { color: #333 !important; }

  /* Zarte Hintergrund-Aura um den Mittelpunkt – Lightmode */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
      radial-gradient(
        circle at 50% 55%,
        rgba(255, 245, 225, 0.85) 0%,   /* Zentrum */
        rgba(255, 245, 225, 0.35) 26%,
        rgba(255, 245, 225, 0.00) 55%
      );
    mix-blend-mode: soft-light;
  }

  /* 🌅 Aurora-Edge — sanfter Morgenschimmer über alle Links */
  a[href] {
    position: relative;
    overflow: hidden;
    transition: all 0.6s ease;
  }

  a[href]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      110deg,
      transparent 0%,
      rgba(255,255,255,0.05) 20%,
      rgba(255,255,255,0.15) 50%,
      transparent 80%
    );
    opacity: 0;
    transform: translateX(-50%);
    transition: opacity 1.2s ease, transform 1.2s ease;
  }

  a[href]:hover::before {
    opacity: 1;
    transform: translateX(50%);
  }

  :root{
    --gold: #b28b47;
    --gold-d: #d4b573; /* dark */
  }

  /* ---- running ember over nav bullets ---- */
  #navi nav a > span:first-child{
    /* Basis: bleibt dein grauer Punkt, aber animierbar */
    transition: background-color .4s ease, box-shadow .4s ease, transform .4s ease;
    animation: ember 5.2s ease-in-out infinite;                /* langsamer */
    animation-delay: calc(var(--i, 0) * 0.34s);
  }

  /* sanftes Aufglühen (Lightmode) */
  @keyframes ember{
    0%, 70%, 100% {
      transform: scale(1);
      box-shadow: none;
    }
    18% {
      transform: scale(1.12);
      background-color: var(--gold);
      box-shadow:
        0 0 0.22rem rgba(178,139,71,.55),
        0 0 0.55rem rgba(178,139,71,.30);
    }
  }

  /* kleine Flamme bei Hover/Keyboard-Fokus – kurz wärmer, nicht breit */
  #navi nav a:hover > span:first-child,
  #navi nav a:focus-visible > span:first-child{
    background-color: var(--gold);
    transform: scale(1.22);
    box-shadow:
      0 0 0.28rem rgba(178,139,71,.65),
      0 0 0.70rem rgba(178,139,71,.35);
    transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
  }

  /* Respektiere reduzierte Bewegung */
  @media (prefers-reduced-motion: reduce){
    #navi nav a > span:first-child{
      animation: none !important;
    }
  }

   /* sanftes Atmen */
  @keyframes haloPulse{
    0%, 100%{
      transform: scale(0.9);
      opacity: 0.65;
    }
    50%{
      transform: scale(1.15);
      opacity: 1;
    }
  }

 
  /* Zarter goldener Atem über der Intro-Schrift + sanftes Einblenden */
  .intro-gold {
    position: relative;
    display: inline-block;
    opacity: 0;
    /* Zwei Animationen:
       1) introFade – einmalig, holt den Text sanft rein
       2) goldBreath – startet leicht verzögert, läuft endlos */
    animation:
      introFade 1.1s ease-out forwards,
      goldBreath 9s ease-in-out 0.6s infinite;
  }

/* verhindert initialen Pixel-Jump */
#heroText{
  will-change: opacity, transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}


  /* einmalige Einblendung */
  @keyframes introFade {
    0% {
      opacity: 0;
      transform: translateY(8px);
    }
    60% {
      opacity: 1;
      transform: translateY(0px);
    }
    100% {
      opacity: 1;
      transform: translateY(0px);
    }
  }

  /* Lightmode – sehr leise */
  @keyframes goldBreath {
    0%, 100% {
      text-shadow:
        0 0 0.8px rgba(178,139,71,0.18),
        0 0 2px rgba(178,139,71,0.10);
      opacity: 0.98;
    }
    40% {
      text-shadow:
        0 0 1.6px rgba(178,139,71,0.32),
        0 0 3.6px rgba(178,139,71,0.20);
      opacity: 1;
    }
    60% {
      text-shadow:
        0 0 1.9px rgba(178,139,71,0.40),
        0 0 4.4px rgba(178,139,71,0.24);
      opacity: 1;
    }
  }

  /* 🌙 Variante A – sanft lesbarer Dunkelmodus */
  @media (prefers-color-scheme: dark) {
    body { background-color: #0b0b0b; color: #eaeaea; }

    /* dunklere Dots & Maske */
    .bg-dots { color: rgba(255,255,255,0.07); }
    .mask-fade {
      -webkit-mask-image: radial-gradient(80% 70% at 50% 45%, #000 90%, transparent 100%);
              mask-image: radial-gradient(80% 70% at 50% 45%, #000 90%, transparent 100%);
    }

    /* Kästchen zarter, kein Taschenlampeneffekt */
    .fixed.inset-0.pointer-events-none > div {
      background-color: rgba(255,255,255,0.04) !important;
      box-shadow: 0 0 10px rgba(255,255,255,0.05);
    }

    .text-neutral-700, .text-neutral-800, .text-neutral-900 {
      color: #eaeaea !important;
    }
    .border-neutral-200, .border-neutral-300 {
      border-color: rgba(255,255,255,0.2) !important;
    }

    /* Link-Aurora in warmem Gold */
    a[href]::before {
      background: linear-gradient(
        110deg,
        transparent 0%,
        rgba(255,230,150,0.08) 25%,
        rgba(255,200,100,0.15) 50%,
        transparent 75%
      );
    }
    a[href]:hover::before {
      opacity: 0.8;
      transform: translateX(60%);
    }


    /* Dark-Variante Aura */
    body::before {
      background:
        radial-gradient(
          circle at 50% 55%,
          rgba(212, 181, 115, 0.55) 0%,
          rgba(212, 181, 115, 0.22) 30%,
          rgba(212, 181, 115, 0.00) 60%
        );
      mix-blend-mode: soft-light;
    }

    /* Ember im Darkmode etwas wärmer/breiter */
    @keyframes ember{
      0%, 70%, 100% { transform: scale(1); box-shadow: none; }
      18% {
        transform: scale(1.14);
        background-color: var(--gold-d);
        box-shadow:
          0 0 0.28rem rgba(212,181,115,.60),
          0 0 0.80rem rgba(212,181,115,.30);
      }
    }

    /* Dark: Flamme etwas heller */
    #navi nav a:hover > span:first-child,
    #navi nav a:focus-visible > span:first-child{
      background-color: var(--gold-d);
      box-shadow:
        0 0 0.34rem rgba(212,181,115,.70),
        0 0 0.90rem rgba(212,181,115,.38);
    }

    
    /* Darkmode – wärmerer goldBreath */
    @keyframes goldBreath {
      0%, 100% {
        text-shadow:
          0 0 1px rgba(212,181,115,0.25),
          0 0 2.5px rgba(212,181,115,0.15);
        opacity: 0.96;
      }
      50% {
        text-shadow:
          0 0 2px rgba(212,181,115,0.45),
          0 0 6px rgba(212,181,115,0.25);
        opacity: 1;
      }
    }
  }

/* ===================== */
/* Lese-Druckmodus (B)   */
/* ===================== */

@media print {

  /* Grundsetup: ruhiger, buchähnlicher Satz */
  @page {
    margin: 18mm 22mm 20mm 22mm;
  }

  *,
  *::before,
  *::after {
    box-shadow: none !important;
    text-shadow: none !important;
    animation: none !important;
    transition: none !important;
    background-image: none !important;
  }

  body {
    background: #ffffff !important;
    color: #111111 !important;
    font-family: "Georgia", "Times New Roman", serif;
    font-size: 12pt;
    line-height: 1.5;
  }

  /* Aura / Raster / Kästchen / Halo entfernen */
  body::before,
  .bg-dots,
  .mask-fade,
  .fixed,
  .pointer-events-none,
  #toggle {
    display: none !important;
  }

  /* Intro und Navi beide sichtbar, sequenziell statt Toggle */
  #radikal,
  #navi {
    display: block !important;
    min-height: auto !important;
    text-align: left;
    padding: 0;
    margin: 0 0 12mm 0;
  }

  /* Intro wie Gedichtseite */
  #radikal p {
    font-size: 18pt;
    line-height: 1.5;
    margin: 0 0 14mm 0;
  }

  /* Haupttitel & Einleitung im Navi */
  #navi h1 {
    font-size: 16pt;
    margin: 0 0 4mm 0;
  }

  #navi p {
    font-size: 12pt;
    margin: 0 0 5mm 0;
  }

  /* Zitatblock ruhiger, wie Buchsatz */
  #navi blockquote {
    font-size: 12pt;
    margin: 7mm 0;
    padding-left: 4mm;
    border-left: 2px solid #cccccc;
    font-style: italic;
  }

  /* Linkliste: wie Inhaltsverzeichnis */
  #navi nav {
    margin-top: 10mm;
  }

  #navi nav a {
    display: block;
    border: none !important;
    padding: 2mm 0;
    text-decoration: none;
    color: #111111;
  }

  /* Punkte & goldene Marker im Druck ausblenden */
  #navi nav a span {
    display: none !important;
  }

  /* Intro-Gold-Effekt nur als klarer Text */
  .intro-gold {
    text-shadow: none !important;
    opacity: 1 !important;
  }

  /* Footer als leise Buchfußzeile */
  footer {
    margin-top: 14mm;
    padding-top: 3mm;
    border-top: 1px solid #dddddd;
    font-size: 10pt;
    color: #666666;
  }

  /* Links dezent markieren, ohne URL-Anhang */
  a[href] {
    color: #111111;
    text-decoration: underline;
  }
}

/* sanfte Scroll-Einblendung für Klärungsabschnitt */
.fade-soft {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1.4s ease, transform 1.4s ease;
}

.fade-soft.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Reading Flow Rhythm ===== */

/* vertikale Ruheachsen */
.section-flow {
  padding-top: clamp(4rem, 8vh, 7rem);
  padding-bottom: clamp(4rem, 8vh, 7rem);
}

/* dezenter Mittelachsen-Fokus */
.section-narrow {
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

/* sanfter Abschnittsübergang */
.section-divider {
  position: relative;
  margin: clamp(3rem, 6vh, 5rem) auto;
  width: 90px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(160,160,160,0.35),
    transparent
  );
}

/* ===== Typographic Quieting ===== */

/* ruhiger Lesesatz für längere Textabschnitte */
.reading-text {
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.75;
  letter-spacing: 0.01em;
}

/* Zitate optisch leicht aus der Mitte lösen (ruhiger Blickfluss) */
.reading-quote {
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  line-height: 1.7;
}

/* sehr leichte optische Zentrierkorrektur für große Introtexte */
.optical-center {
  transform: translateY(-0.02em);
}

.scroll-cue{
  margin-top: 3.5rem;
  width: 42px;
  height: 1px;
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(160,160,160,0.35),
    transparent
  );
  opacity: .5;
  animation: cueBreath 3.8s ease-in-out infinite;
}

@keyframes cueBreath{
  0%,100%{opacity:.35; transform:scaleX(.85);}
  50%{opacity:.75; transform:scaleX(1);}
}

#radikal{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

#radikal p{
  max-width: 30rem;
  margin:0 auto;
  text-align:center;
}

/* ----- deep reading gravity ----- */

.gravity-zone {
  transition: transform 1.6s ease, opacity 1.6s ease;
}

header.jts-header{
  transition: opacity 1.6s ease, backdrop-filter 1.6s ease;
}

.header-soft header.jts-header{
  opacity:0.78;
  backdrop-filter:saturate(150%) blur(6px);
}

.gravity-active .gravity-zone {
  transform: translateY(-3px);
  opacity: 1;
}

/* --- Mobile Hero Typografie --- */

@media (max-width: 520px){

  #heroText{
    font-size: clamp(1.55rem, 5.2vw, 1.95rem);
    line-height: 1.38;
    max-width: 22rem;
    letter-spacing: 0.01em;
  }

}

#heroText br:first-of-type{
  line-height: 1.6;
}

/* --- reading center gravity --- */

body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(
      ellipse at 50% 58%,
      rgba(0,0,0,0.035) 0%,
      rgba(0,0,0,0.02) 22%,
      rgba(0,0,0,0.0) 60%
    );
  opacity:0;
  transition: opacity 1.8s ease;
}

/* aktiviert, wenn Leser in den Textbereich kommt */
.gravity-active body::after{
  opacity:1;
}

/* --- stillness lock --- */

body.scroll-settled{
  scroll-behavior: auto;
}

.scroll-settled .gravity-zone{
  transition: transform 1.2s ease;
}

/* --- quiet return --- */

.return-soft #radikal{
  opacity: 1;
  transform: translateY(0);
  transition: opacity .9s ease, transform .9s ease;
}

.return-soft #navi{
  opacity: .85;
  transition: opacity 1.4s ease;
}

/* --- micro contrast breathing --- */

body{
  animation: contrastBreath 28s ease-in-out infinite;
}

@keyframes contrastBreath{
  0%,100%{
    filter: contrast(100%) brightness(100%);
  }
  50%{
    filter: contrast(101.6%) brightness(100.3%);
  }
}