@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');

:root{
  --start: 50vh;                 /* Y-Position des Highlight-Bandes (vh/px/lh) */
  --space: 10vh;               /* Abstand bis White-Section (wirksam für Margin unter .jh-header) */
  --hue: 280;           
  --accent: hsl(var(--hue) 100% 50%);
  --inactive: rgba(255,255,255,.35);

  /* wird vom JS gesetzt */
  --start-top: calc(var(--start) - 0.5lh);
  --right-left: 0px;
  --right-width: 420px;
  --intro-offset: 40vh; /* wie stark der Block nach oben „gezogen“ wird */
}

*,*::before,*::after{ box-sizing: border-box; }

/* Host */
.jh-prog{
  color-scheme: light dark;
  position: relative;
}

/* einziges ::before: Deko-Grid */
.jh-prog::before{
  --size: 45px; 
  --line: color-mix(in hsl, canvasText, transparent 80%);
  content: "";
  position: fixed; inset: 0;
  background:
    linear-gradient(90deg, var(--line) 1px, transparent 1px var(--size)) calc(var(--size)*0.36) 50% / var(--size) var(--size),
    linear-gradient(var(--line) 1px, transparent 1px var(--size)) 0% calc(var(--size)*0.32) / var(--size) var(--size);
  mask: linear-gradient(-20deg, transparent 50%, white);
  pointer-events: none;
  z-index: -1;
}

/* SR-only */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Sticky Header – fix 50px */
.jh-header{
  font-size: 50px !important;
  line-height: 1.2;
  position: sticky;
  top: calc((var(--count) - 1) * -1lh);
  display: flex;
  align-items: start;
  width: 100%;
  margin-bottom: var(--space);
  z-index: 1;
}
.jh-header h1, .jh-header ul, .jh-header li{
  font-size: inherit !important; line-height: inherit;
}

/* Grid (zentriert, 1600 px) */
.jh-inner{
  width: 1600px; max-width: 1600px; margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 40px;
  align-items: start;
  justify-content: center;
  padding-inline: 0;
  padding-top: calc(var(--start) - 0.5lh - var(--intro-offset)) !important;
}

/* Linke Seite: intern 2 Spalten (H1 | Hauptliste) */
.jh-left{
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
  align-items: start;
  justify-self: end;
  min-width: 0;
}

.jh-header h1{
  position: sticky;
  top: var(--start-top);
  margin: 0;
  height: fit-content;
  font-weight: 600;
  color: white;
}

/* Hauptliste links */
.jh-header .jh-mainlist{
  list-style: none;
  margin: 0;
  padding: 0;
  font-weight: 600;
  white-space: nowrap;
}

/* ▓▓ Animierter Farbwechsel für die linken <li> ▓▓
   - 2 Layer: oben Rainbow (animiert), darunter Grau
   - beide Layer sind auf Text geclippt
   - Standard: Rainbow 0% Breite => nur Grau sichtbar
*/
.jh-header .jh-mainlist li:not(:last-child){
  margin-bottom: 70px;
}

.jh-header .jh-mainlist li{
  color: transparent;
  -webkit-text-fill-color: transparent;

  background-image:
    linear-gradient(90deg,
      rgba(0,157,224,1) 0%,
      rgba(159,81,155,1) 20%,
      rgba(218,20,132,1) 40%,
      rgba(248,174,72,1) 60%,
      rgba(250,234,0,1) 80%,
      rgba(13,161,58,1) 100%
    ),
    linear-gradient(var(--inactive), var(--inactive));

  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, 0 0;
  background-size: 0% 100%, 100% 100%;     /* Rainbow fährt ein */
  -webkit-background-clip: text;
  background-clip: text, text;

  transition: background-size 1.5s cubic-bezier(.2,.6,.2,1), 
              font-weight .2s ease-out, 
              opacity .2s ease-out;
}

/* Aktiv: Rainbow vollflächig sichtbar + etwas fetter */
.jh-header .jh-mainlist li.is-active{
  background-size: 100% 100%, 100% 100%;
}

/* Rechte Spalte – bleibt im Grid, Inhalt wird FIX gepinnt */
.jh-right{
  position: relative;
  top: auto;
  align-self: start;
  justify-self: start;
  width: 420px;
  min-width: 420px;
  color: #fff;
  overflow: visible;
  z-index: 2;
}
.jh-right-pin{
  position: fixed;
  top: var(--start-top);
  left: var(--right-left);
  width: var(--right-width);
  will-change: transform;
  z-index: 2;
}
.jh-right[data-visible="0"] .jh-right-pin{
  visibility: hidden; opacity: 0; pointer-events: none;
}

/* Pin erst ausblenden, wenn .jh-main >= 60vh sichtbar ist */
.jh-prog[data-main-cover="1"] .jh-right-pin{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Detail-Listen stacken */
.jh-details{ position: relative; min-height: 12rem; overflow: visible; }
.jh-detail{
  position: absolute; inset: 0 auto auto 0;
  margin: 0;
  padding-left: 1.2em;
  list-style: disc;
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
  font-size: 1rem;
}
.jh-detail.is-active{
  opacity: 1; pointer-events: auto; transform: translateY(0);
}
.jh-detail li{
  margin: .2rem 0 20px;
  line-height: 1.45;
  color: #fff !important;
  font-size: 1.4rem !important;
  display: block;
}

/* Responsive */
@media (max-width: 1700px){
  .jh-inner{ width: 100%; max-width: 100%; padding-inline: 20px; }
}
@media (max-width: 900px){
  .jh-inner{ grid-template-columns: 1fr; gap: 24px; }
  .jh-left{ grid-template-columns: 1fr; }
  .jh-right{
    position: relative;
    top: auto;
    margin-top: clamp(12px, 3vw, 24px);
    width: 100%;
    min-width: 0;
  }
  .jh-right-pin{ position: static; left: auto; width: 100%; }
  .jh-details{ min-height: 0; }
}

/* ================= WHITE SECTION – wächst wie Card ================= */
.jh-main{
  position: relative;
  width: 100vw;
  min-height: 100vh;
  display: grid;
  place-items: center;

  background: white;     /* Card */
  color: #fff;

  overflow: hidden;      /* SVG darf nicht herausglühen */
  border-radius: 64px;

  transform-origin: 50% 100%;
  transform: scale(.55); /* schmalerer Start */

  isolation: isolate;
  z-index: 0;

  /* Gate: erst sichtbar, wenn letzter Menüpunkt aktiv */
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}

/* Sobald „ready“ gelatched ist: sichtbar und ÜBER dem Header */
.jh-prog[data-hero-stage="ready"] .jh-main{
  opacity: 1;
  visibility: visible;
  z-index: 3;              /* über .jh-header (z-index:1) legen */
}
.jh-prog[data-hero-stage="ready"] .jh-right-pin{ z-index: 1; }

/* SVG-Hintergrund (kein Pseudo-Element) */
.jh-main-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  filter: saturate(110%) brightness(1.05);
}

/* CTA */
.jh-lead{
  margin: 0;
  font-weight: 700;
  white-space: nowrap;
  font-size: clamp(22px, 2.2vw + 0.5rem, 34px);
  text-align: center;
  color: black;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
}
/* CTA nur, wenn Band in der Section UND Section freigegeben */
.jh-prog[data-hero="active"][data-hero-stage="ready"] .jh-lead{
  position: fixed;
  top: 50%; left: 50%;
  translate: -50% -50%;
  opacity: 1; visibility: visible; pointer-events: auto;
}

/* Scroll-Grow auf .jh-main – startet erst, wenn freigegeben */
@supports (animation-timeline: view()) {
  .jh-prog[data-animate="true"][data-hero-stage="ready"] .jh-main{
    view-timeline: --section;
    animation: jh-main-grow both ease-out;
    animation-timeline: --section;
    animation-range: entry 25% entry 100%;
  }
  @keyframes jh-main-grow{
    to{ transform: scale(1); border-radius: 0; }
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce){
  .jh-main{ transform: none; }
  .jh-main-bg{ filter: saturate(95%) brightness(1); }
}

/* Button (unverändert) */
.one-glow-btn{
  --h: 56px; --px: 22px; --rad: 9999px; --border: 2px; --glow-blur: 16px;
  --bg: #0b0b11; --fg: #ffffff;
  --c1:#00aeef; --c2:#5a79c1; --c3:#ec008c; --c4:#fcce24; --c5:#2fb442;
  --ring: conic-gradient(from 0deg,var(--c1),var(--c2),var(--c3),var(--c4),var(--c5),var(--c1));
  position: relative; display: inline-grid; place-items: center;
  height: var(--h); padding-inline: var(--px); border-radius: var(--rad);
  text-decoration: none; color: var(--fg); isolation: isolate; cursor: pointer;
  background: var(--bg);
  box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.35);
  transition: transform .15s ease;
  margin-top: 3rem;
}
.one-glow-btn__inner{ position: relative; z-index: 2; font-weight: 700; letter-spacing: .015em; line-height: 1; white-space: nowrap; font-size: clamp(14px, 1.35vw, 16px); }
.one-glow-btn::before{ content:""; position:absolute; inset:0; border-radius: var(--rad); background: var(--ring); filter: blur(var(--glow-blur)) hue-rotate(0deg) saturate(1.05); opacity:.45; transform: scale(1.06); z-index:0; transition: opacity .35s ease; }
.one-glow-btn::after{ content:""; position:absolute; inset:0; padding: var(--border); border-radius: var(--rad); background: var(--ring); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; filter: hue-rotate(0deg) saturate(1.05); z-index:1; transition: opacity .35s ease; }
.one-glow-btn:hover,.one-glow-btn:focus-visible{ transform: translateY(-1px); }
.one-glow-btn:hover::before,.one-glow-btn:focus-visible::before,
.one-glow-btn:hover::after,.one-glow-btn:focus-visible::after{ animation: one-hue 2.8s linear infinite; opacity:.7; }
.one-glow-btn:active{ transform: translateY(0); }
@keyframes one-hue{ from{filter:blur(var(--glow-blur)) hue-rotate(0deg) saturate(1.05);} to{filter:blur(var(--glow-blur)) hue-rotate(360deg) saturate(1.05);} }
@media (prefers-reduced-motion: reduce){
  .one-glow-btn:hover::before,.one-glow-btn:hover::after,
  .one-glow-btn:focus-visible::before,.one-glow-btn:focus-visible::after{ animation: none; opacity:.6; filter: blur(var(--glow-blur)) hue-rotate(0deg) saturate(1.05); }
}
a.one-glow-btn:hover {
    color: white;
    text-decoration: none;
}