/* Startseite des Bildungsauftritts. Darstellung ohne Sachdaten.
   Baut auf stil.css auf und verwendet dessen Farbvariablen — hell und dunkel.
   Bewegung nur, wenn das Gerät sie nicht abbestellt hat (prefers-reduced-motion). */

/* Bänder über die volle Breite, ohne waagrechtes Scrollen */
.st-band{position:relative;background:var(--flaeche);
  box-shadow:0 0 0 100vmax var(--flaeche);clip-path:inset(0 -100vmax);
  padding:2.6rem 0;margin:2.4rem 0}

/* --- Einstieg ---------------------------------------------------------- */
.st-held{display:grid;gap:2rem;align-items:center;padding:2.2rem 0 1rem}
@media (min-width:52rem){.st-held{grid-template-columns:1.25fr .9fr;padding:3.6rem 0 2rem}}
.st-kicker{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--mono);
  font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--weich);margin:0 0 1rem}
.st-puls{width:.55rem;height:.55rem;border-radius:50%;background:var(--akzent);
  box-shadow:0 0 0 0 var(--akzent)}
.st-held h1{font-size:clamp(2.2rem,6.2vw,3.8rem);line-height:1.06;letter-spacing:-.015em;
  max-width:14ch;margin:0 0 1.1rem}
.st-lead{font-size:clamp(1.05rem,1.8vw,1.22rem);color:var(--weich);max-width:52ch;margin:0 0 1.6rem}
.st-knoepfe{display:flex;flex-wrap:wrap;gap:.7rem;margin:0}
.st-knoepfe .knopf{display:inline-block}
.st-knopf-leise{background:transparent!important;color:var(--tinte)!important;
  border:1px solid var(--linie)!important}

.st-held-bild{display:flex;justify-content:center}
.st-schichten{width:min(100%,24rem);height:auto;overflow:visible}
.st-ebene{fill:var(--akzent);opacity:.9}
.st-ebene.e2{opacity:.76}.st-ebene.e3{opacity:.62}.st-ebene.e4{opacity:.48}.st-ebene.e5{opacity:.34}
.st-pfeil{fill:none;stroke:var(--akzent);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.st-punkt{fill:var(--tinte);opacity:.55}

/* --- Kennzahlen --------------------------------------------------------- */
.st-band-titel{font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--weich);margin:0 0 1.2rem}
.st-zahlenreihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));
  gap:1.6rem;list-style:none;margin:0;padding:0}
.st-zahl{display:block;font-size:clamp(2.4rem,5vw,3.2rem);font-weight:700;line-height:1;
  color:var(--akzent);font-variant-numeric:tabular-nums}
.st-zahl-text{display:block;margin-top:.45rem;color:var(--weich);font-size:.95rem;max-width:22ch}

/* --- Abschnitte --------------------------------------------------------- */
.st-abschnitt{padding:1.2rem 0}
.st-abschnitt h2,.st-band h2{font-size:clamp(1.5rem,3.4vw,2.1rem);letter-spacing:-.01em;margin:1.4rem 0 .6rem}
.st-abschnitt-lead{color:var(--weich);max-width:60ch;margin:0 0 1.6rem}

/* --- Zielgruppen: Reiter ------------------------------------------------ */
.st-reiter{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.4rem}
.st-reiter a,.st-reiter button{font:inherit;font-size:.92rem;cursor:pointer;text-decoration:none;
  padding:.55rem 1rem;border-radius:999px;border:1px solid var(--linie);
  background:var(--flaeche);color:var(--tinte);transition:background .2s,color .2s,border-color .2s}
.st-reiter [aria-selected=true]{background:var(--akzent);border-color:var(--akzent);color:var(--papier)}
.st-reiter a:hover,.st-reiter button:hover{border-color:var(--akzent)}
.st-feld{border:1px solid var(--linie);border-left:4px solid var(--akzent);border-radius:6px;
  background:var(--flaeche);padding:1.5rem 1.6rem;margin:0 0 1rem}
.st-feld h3{font-size:1.25rem;margin:0 0 .4rem}
.st-feld .st-satz{font-size:1.08rem;margin:0 0 1rem}
.st-feld ul{margin:0 0 1.2rem;padding-left:1.2rem}
.st-feld li{margin:.25rem 0}
.st-weiter{font-weight:600;text-decoration:none;border-bottom:2px solid var(--akzent)}
.st-weiter::after{content:"\2192";display:inline-block;margin-left:.35em;transition:transform .2s}
.st-weiter:hover::after{transform:translateX(4px)}
html.js .st-feld[hidden]{display:none}
html.js .st-feld.st-neu{animation:st-auf .35s ease-out both}

/* --- Ablauf ------------------------------------------------------------- */
.st-ablauf{list-style:none;margin:0;padding:0;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));counter-reset:schritt}
.st-ablauf li{position:relative;padding:1.4rem 1.2rem 1.2rem;border-top:3px solid var(--linie);
  counter-increment:schritt;max-width:none}
.st-ablauf li::before{content:counter(schritt,decimal-leading-zero);display:block;
  font-family:var(--mono);font-size:.8rem;color:var(--akzent);margin-bottom:.5rem}
.st-ablauf li::after{content:"";position:absolute;left:0;top:-3px;height:3px;width:0;
  background:var(--akzent);transition:width .9s ease-out}
.st-ablauf.sichtbar li::after{width:100%}
.st-ablauf.sichtbar li:nth-child(2)::after{transition-delay:.2s}
.st-ablauf.sichtbar li:nth-child(3)::after{transition-delay:.4s}
.st-ablauf.sichtbar li:nth-child(4)::after{transition-delay:.6s}
.st-ablauf h3{margin:0 0 .35rem}
.st-ablauf p{margin:0;color:var(--weich);font-size:.97rem}

/* --- Theorie, Praxis, Forschung ------------------------------------------ */
.st-drei{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.st-karte{display:flex;flex-direction:column;border:1px solid var(--linie);border-radius:8px;
  background:var(--flaeche);padding:1.5rem;text-decoration:none;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.st-karte:hover{transform:translateY(-4px);border-color:var(--akzent);
  box-shadow:0 10px 28px -18px rgba(0,0,0,.5)}
.st-karte h3{font-size:1.3rem;margin:0 0 .5rem}
.st-karte p{color:var(--weich);margin:0 0 1rem;flex:1}
.st-karte span{font-weight:600;border-bottom:2px solid var(--akzent);align-self:flex-start}

/* --- Richtung: Zeitleiste ------------------------------------------------ */
.st-zeitleiste{list-style:none;margin:0;padding:0;display:grid;gap:1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));position:relative;overflow:hidden}
.st-zeitleiste li{position:relative;padding-top:1.8rem;max-width:none}
.st-zeitleiste li::before{content:"";position:absolute;top:.35rem;left:0;right:-1.4rem;height:2px;
  background:var(--linie)}
.st-zeitleiste li:last-child::before{right:0}
.st-marke{position:absolute;top:0;left:0;width:.9rem;height:.9rem;border-radius:50%;
  background:var(--flaeche);border:2px solid var(--linie)}
.st-zeitleiste li.jetzt .st-marke{background:var(--akzent);border-color:var(--akzent)}
.st-stand{display:inline-block;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--weich);margin-bottom:.3rem}
.st-zeitleiste li.jetzt .st-stand{color:var(--akzent);font-weight:700}
.st-zeitleiste h3{margin:0 0 .3rem}
.st-zeitleiste p{margin:0;color:var(--weich);font-size:.96rem}

/* --- Haltung und Grundsätze ----------------------------------------------- */
.st-haltung{margin:0 0 1.8rem;padding:0 0 0 1.4rem;border-left:4px solid var(--akzent)}
.st-haltung p{font-size:clamp(1.15rem,2.2vw,1.4rem);line-height:1.5;max-width:44ch;margin:0}
.st-grundsaetze{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.st-grundsatz h3{font-size:1.05rem;margin:0 0 .3rem;color:var(--akzent)}
.st-grundsatz p{margin:0;color:var(--weich);font-size:.96rem}

.st-ehrlich h2{margin-top:0;font-size:1.2rem}
.st-ehrlich ul{margin:0;padding-left:1.2rem}

/* --- Schluss ------------------------------------------------------------- */
.st-schluss{text-align:left}
.st-schluss h2{margin-top:0}
.st-schluss p{max-width:58ch}
.st-fussnote{font-family:var(--mono);font-size:.78rem;color:var(--weich);margin-top:1.6rem}

/* --- Bewegung ------------------------------------------------------------- */
@keyframes st-auf{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes st-ebene{from{opacity:0;transform:translateY(-26px)}to{transform:none}}
@keyframes st-pfeil{from{stroke-dashoffset:120}to{stroke-dashoffset:0}}
@keyframes st-puls{0%{box-shadow:0 0 0 0 var(--akzent)}70%{box-shadow:0 0 0 .6rem transparent}
  100%{box-shadow:0 0 0 0 transparent}}
@keyframes st-weg1{0%{transform:translate(0,0)}100%{transform:translate(140px,-190px)}}
@keyframes st-weg2{0%{transform:translate(0,0)}100%{transform:translate(0,-190px)}}
@keyframes st-weg3{0%{transform:translate(0,0)}100%{transform:translate(-140px,-190px)}}

@media (prefers-reduced-motion:no-preference){
  /* Nur was beim Laden unter dem sichtbaren Bereich liegt, wartet auf das Einblenden.
     Ohne Skript bekommt nichts diese Klasse — dann ist alles sofort sichtbar. */
  .zeige{transition:opacity .7s ease,transform .7s ease}
  .zeige.wartet{opacity:0;transform:translateY(18px)}
  .st-held-text>*{animation:st-auf .8s ease-out both}
  .st-held-text>*:nth-child(2){animation-delay:.08s}
  .st-held-text>*:nth-child(3){animation-delay:.16s}
  .st-held-text>*:nth-child(4){animation-delay:.24s}
  .st-ebene{animation:st-ebene .6s cubic-bezier(.2,.8,.2,1) both}
  .st-ebene.e1{animation-delay:.2s}.st-ebene.e2{animation-delay:.35s}.st-ebene.e3{animation-delay:.5s}
  .st-ebene.e4{animation-delay:.65s}.st-ebene.e5{animation-delay:.8s}
  .st-pfeil{stroke-dasharray:120;animation:st-pfeil .9s ease-out 1.1s both}
  .st-puls{animation:st-puls 2.4s ease-out infinite}
  .st-punkt{transform-box:fill-box}
  .st-punkt.p1{animation:st-weg1 5s ease-in-out 1.8s infinite alternate}
  .st-punkt.p2{animation:st-weg2 4.2s ease-in-out 2.1s infinite alternate}
  .st-punkt.p3{animation:st-weg3 5.6s ease-in-out 2.4s infinite alternate}
}
@media (prefers-reduced-motion:reduce){
  .st-ablauf li::after{width:100%;transition:none}
}