/* ═══════════════════════════════════════════════════════════════════════════
   teil-zq — „Wissenswertes" als ein Ablauf statt vieler getrennter Kacheln
   ───────────────────────────────────────────────────────────────────────────
   Christopher, 04.10.2026 (Auftrag 10):

     „unter Wissenswertes, dass diese Kacheln, diese Textabschnitte so getrennt
      sind, schaut irgendwie komisch aus und es ist zu einfach, zu leer. Da muss
      mehr Dynamik rein, vielleicht noch mehr Icons und gegebenenfalls Bilder.
      Und ich denke dann alles in eine Kachel, den Text, aber so ein bisschen
      wie ein interaktiver Ablauf mit Pfeilen, mit Bewegung, mit Animation."

   ── Die Entscheidung, die dahinter steckt ─────────────────────────────────
   Gebaut ist das **nicht**, indem der Text neu sortiert oder gekürzt wird,
   sondern indem die vorhandenen Bänder zu Schritten eines Ablaufs werden. Das
   Skript findet sie, der Rest ist Anzeige. Damit gilt:

     · ohne JavaScript steht alles untereinander wie bisher — **kein Satz kann
       verloren gehen**, und genau das ist in diesem Theme die Hausregel
       („Eine Seite, die Text schluckt, ist kaputt");
     · wer die Seite durchsucht, findet jeden Satz, denn alle Schritte stehen
       im Dokument, nur einer ist sichtbar;
     · ein neuer Abschnitt in WordPress wird von selbst zum neuen Schritt.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Solange das Skript nicht übernommen hat, ändert sich nichts. */
.wissen-teil.wissen-bereit .sammel-band{
  display:none;
}
.wissen-teil.wissen-bereit .sammel-band.ist-da{
  display:grid;
  animation:wissen-ein .5s var(--weich) both;
}
@keyframes wissen-ein{
  from{ opacity:0; transform:translateY(16px) }
  to{ opacity:1; transform:none }
}
/* Rückwärts kommt der Schritt von oben — damit die Richtung spürbar ist. */
.wissen-teil.wissen-bereit.rueckwaerts .sammel-band.ist-da{
  animation-name:wissen-ein-rueck;
}
@keyframes wissen-ein-rueck{
  from{ opacity:0; transform:translateY(-16px) }
  to{ opacity:1; transform:none }
}

/* ── Die Leiste mit Pfeilen, Schrittzahl und Punkten ────────────────────── */
.wissen-leiste{
  display:flex; align-items:center; gap:clamp(.6rem,1.2vw,1rem);
  flex-wrap:wrap;
  margin:clamp(.9rem,1.6vw,1.4rem) 0 clamp(1rem,1.8vw,1.5rem);
  padding:clamp(.45rem,.8vw,.6rem) clamp(.6rem,1vw,.9rem);
  border-radius:var(--r-rund);
  background:var(--glas); border:1px solid var(--glas-rand);
  -webkit-backdrop-filter:blur(16px) saturate(1.5); backdrop-filter:blur(16px) saturate(1.5);
  box-shadow:0 8px 26px rgba(19,55,109,.08);
}
.wissen-pfeil{
  appearance:none; border:0; cursor:pointer;
  display:grid; place-items:center; flex:none;
  width:2.4em; height:2.4em; border-radius:50%;
  background:var(--blau); color:#fff; font-size:1rem; line-height:1;
  transition:background .3s var(--weich), transform .3s var(--weich), opacity .3s;
}
.wissen-pfeil:hover{ background:var(--blau-hell); transform:scale(1.07) }
.wissen-pfeil:focus-visible{ outline:2px solid var(--blau); outline-offset:3px }
.wissen-pfeil[disabled]{ opacity:.3; cursor:default; transform:none; background:var(--text-leise) }

.wissen-mitte{ display:flex; flex-direction:column; min-width:0; flex:1 1 auto; gap:.1em }
.wissen-zaehler{
  font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold-tief);
}
.wissen-titel{
  font-size:clamp(.92rem,1.1vw,1.06rem); font-weight:800; color:var(--blau);
  line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.wissen-punkte{ display:flex; gap:.4rem; flex:none }
.wissen-punkt{
  appearance:none; border:0; cursor:pointer; padding:0;
  width:9px; height:9px; border-radius:50%;
  background:var(--sand);
  transition:background .3s var(--weich), width .3s var(--weich);
}
.wissen-punkt[aria-current="true"]{ background:var(--gold); width:24px; border-radius:999px }
.wissen-punkt:focus-visible{ outline:2px solid var(--blau); outline-offset:2px }

/* Ein dünner Faden, der zeigt, wie weit man ist. */
.wissen-faden{
  position:relative; height:3px; border-radius:3px; background:var(--linie);
  margin:0 0 clamp(.8rem,1.4vw,1.2rem);
  overflow:hidden;
}
.wissen-faden::after{
  content:""; position:absolute; inset:0 auto 0 0;
  width:calc(var(--wissen-anteil, 0) * 100%);
  background:linear-gradient(90deg, var(--gold), var(--gold-tief));
  border-radius:3px;
  transition:width .45s var(--weich);
}

@media (max-width:620px){
  .wissen-titel{ white-space:normal }
  .wissen-leiste{ gap:.5rem }
}

/* ── Netze ──────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .wissen-teil.wissen-bereit .sammel-band.ist-da{ animation:none }
  .wissen-pfeil:hover{ transform:none }
  .wissen-faden::after{ transition:none }
}