/* ==========================================================
   Do-matik – neue Startseite (Entwurf index-entwurf.html)
   Lernen zuerst; die Spielwelt als ein Kreislauf (roter Faden). Spielanteil ca. 30–40 %.
   ========================================================== */

/* ---------- Hero „Mach Wissen sichtbar.“ (Redesign 2026-10) ----------
   Ebenen (images/startseite/): Himmel (deckend) → Wissenswelt mit Glow (transparent, dominant, rechts der Mitte) →
   Partikel → Vordergrund-Felsen. Links ein Schleier für lesbaren Text. Der Begleiter steht auf der Steinplattform
   im Vordergrund und zeigt auf die Welt. Bleibt in beiden Modi dunkel (.thema-dunkel-Werte über den Bildern). */
.welt-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(560px, 78vh, 760px); display: grid; align-items: center;
  padding-block: clamp(2rem, 5vw, 4rem) clamp(5.5rem, 9vw, 7.5rem);
  color: #f1f5ff; background: #0a1030;
}
.welt-hero__buehne { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.welt-hero__ebene { position: absolute; max-width: none; width: 100%; height: 100%; object-fit: cover; }
.welt-hero__himmel { object-position: 50% 40%; }
/* Hauptwelt: dominant, rechts der Mitte; schwebt langsam */
.welt-hero__welt { left: 18%; top: -2%; width: 92%; height: 100%; object-fit: contain; object-position: 50% 45%;
  filter: drop-shadow(0 30px 50px rgb(10 10 50 / 0.35)); animation: welt-schweben 14s ease-in-out infinite; }
.welt-hero__partikel { opacity: 0.75; mix-blend-mode: screen; animation: partikel-ziehen 22s ease-in-out infinite alternate; }
.welt-hero__felsen { object-position: 50% 100%; top: auto; bottom: -2%; height: 62%; }
.welt-hero__schleier { position: absolute; inset: 0;
  background: linear-gradient(90deg, rgb(6 10 32 / 0.86) 0%, rgb(6 10 32 / 0.62) 28%, rgb(6 10 32 / 0.08) 52%, transparent 70%),
              linear-gradient(0deg, var(--color-bg) 0%, transparent 18%); }
@keyframes welt-schweben { 50% { transform: translateY(-1.2%); } }
@keyframes partikel-ziehen { to { transform: translateX(-2%) translateY(-1.5%); } }
@media (prefers-reduced-motion: reduce) { .welt-hero__welt, .welt-hero__partikel { animation: none; } }

.welt-hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 1.5rem; align-items: end; max-width: var(--maxw-weit); }
.welt-hero .hero__text { align-self: center; max-width: 34rem; text-shadow: 0 2px 18px rgb(0 0 20 / 0.55); }
.welt-hero .eyebrow { color: #7fe3ff; }
.welt-hero__titel { font-size: clamp(3rem, 7.2vw, 6rem); font-weight: 850; line-height: 0.98; letter-spacing: -0.045em; margin: 0 0 1.1rem; color: #fff; }
.welt-hero .hero__accent { color: #3ad7ff; text-shadow: 0 0 26px rgb(58 215 255 / 0.55); }
.welt-hero .hero__lead { color: #d4def5; font-size: clamp(1.05rem, 1.5vw, 1.22rem); max-width: 30rem; }
.welt-hero .hero__cta { margin-top: 1.5rem; }
.welt-hero .hero__cta .btn--cyan { color: #f1f5ff; }
.hero__weiter-info { flex-basis: 100%; margin: 0.15rem 0 0; font-size: 0.9rem; color: #c9d5f0; }
/* Design-Pass 2: eine dominante Hauptaktion, Nebenwege nur als Textlinks */
.hero__haupt { flex-direction: column; gap: 0.1rem; padding: 0.85em 2em; font-size: 1.15rem; }
.hero__haupt small { font-size: 0.8rem; font-weight: 650; opacity: 0.78; }
.hero__nebenwege { flex-basis: 100%; margin: 0.5rem 0 0; font-size: 0.88rem; color: #aebbdb; }
.hero__nebenwege a { color: #cfe9ff; text-decoration: underline; text-decoration-color: rgb(58 215 255 / 0.45); text-underline-offset: 3px; }
.hero__nebenwege a:hover { color: #fff; text-decoration-color: var(--color-cyan); }
.hero__begleiter.ohne-blase .hero__bubble { display: none; }
.welt-hero .start-fakten { color: #c3cfea; }
.welt-hero .start-fakten strong { color: #fff; }
.welt-hero .hero__timer { margin-top: 1.4rem; opacity: 0.82; transform-origin: 0 0; scale: 0.88; }   /* Nebeninfo: ruhiger als die Hauptaktion */
.welt-hero .hero__timer:hover { opacity: 1; }
.welt-hero .start-fakten { font-size: 0.85rem; opacity: 0.85; }
.welt-hero .ferien-timer { background: rgb(6 10 32 / 0.74); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #f1f5ff; text-shadow: none; }

/* Begleiter im Vordergrund: auf der Plattform, links von der Welt (zeigt hinein) */
.hero__begleiter { position: relative; display: grid; justify-items: center; align-self: end; width: min(100%, 430px); justify-self: start; margin-left: -16%; margin-bottom: -3.5rem; }
.hero__plattform { grid-area: 1 / 1; align-self: end; width: 92%; margin-bottom: -8%; filter: drop-shadow(0 18px 24px rgb(0 0 20 / 0.5)); }
.hero__begleiter .hero__figur { grid-area: 1 / 1; position: relative; z-index: 1; width: 86%; height: auto; margin-bottom: 18%; object-fit: contain;
  filter: drop-shadow(0 14px 22px rgb(0 0 30 / 0.5)) drop-shadow(0 0 14px rgb(58 215 255 / 0.18)); }
.hero__begleiter .hero__bubble { position: absolute; top: 2%; right: -12%; left: auto; z-index: 3; max-width: 15rem; text-align: center; font-size: 0.92rem; font-weight: 700; color: var(--color-text); }
/* Sprechblase leicht durchscheinend (Figur bleibt präsent, Text gut lesbar) */
.hero__begleiter .hero__bubble, .hero__begleiter .hero__bubble::after {
  background: color-mix(in srgb, var(--color-surface) 82%, transparent); border-color: var(--panel-border);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hero__begleiter .hero__bubble::after { clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.hero__hinweis, .hero__karte {
  position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); z-index: 3;
  border: 1px solid var(--panel-border); border-radius: var(--radius-md); background: color-mix(in srgb, #0a1233 78%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: var(--shadow-card); color: #f1f5ff; text-decoration: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.hero__hinweis { padding: 0.45rem 0.95rem; font-weight: 700; font-size: 0.92rem; white-space: nowrap; }
.hero__hinweis:hover, .hero__karte:hover { color: #fff; border-color: var(--color-cyan); box-shadow: var(--glow-cyan-soft); transform: translateX(-50%) translateY(-2px); }
.hero__karte { display: grid; gap: 0.3rem; padding: 0.55rem 0.9rem; width: min(84%, 290px); }
.hero__karte[hidden], .hero__hinweis[hidden] { display: none; }
.hero__karte-kopf { display: flex; align-items: center; gap: 0.4rem; }
.hero__karte-kopf .lv-badge { margin-left: auto; }
.hero__karte .progress { height: 6px; }
.hero__karte small { color: #b9c6e4; font-size: 0.8rem; }
/* kleine Bewegung passend zur Pose – nur beim Laden, reduzierte Bewegung respektiert */
.hero__begleiter[data-pose="jubel"] .hero__figur, .hero__begleiter[data-pose="kampf"] .hero__figur { animation: hero-hopser 400ms ease-out 1; }
@keyframes hero-hopser { 40% { transform: translateY(-5%); } }
@media (prefers-reduced-motion: reduce) { .hero__begleiter .hero__figur { animation: none; } }

/* ---------- Ton „erwachsen“ (Nutzer-Vorgabe 2026-10-08, alle Klassen) ----------
   Weltbild gedämpft (--welt-filter), keine Partikel/Schweben, kleinere zweizeilige Headline, Begleiter als Karte (Deck-Bühne). */
.welt-hero__ebene { filter: var(--welt-filter); }
.welt-hero__welt { animation: none; filter: var(--welt-filter) drop-shadow(0 30px 50px rgb(10 10 50 / 0.35)); }
.welt-hero__partikel { display: none; }
.welt-hero__schleier { background:
  linear-gradient(90deg, rgb(5 8 24 / 0.92) 0%, rgb(5 8 24 / 0.72) 30%, rgb(5 8 24 / 0.2) 58%, rgb(5 8 24 / 0.1) 100%),
  radial-gradient(120% 90% at 60% 40%, transparent 50%, rgb(5 8 24 / 0.6) 100%),
  linear-gradient(0deg, var(--color-bg) 0%, transparent 18%); }
.welt-hero__titel { font-size: clamp(2.4rem, 5.2vw, 4.2rem); font-weight: 760; line-height: 1.04; letter-spacing: -0.035em; }
.welt-hero .hero__accent { text-shadow: 0 0 18px rgb(58 215 255 / 0.35); }
.welt-hero .hero__lead { max-width: 33rem; }

.hero-deck { position: relative; justify-self: center; align-self: center; width: min(100%, 520px); aspect-ratio: 1 / 1; margin-bottom: 1.5rem; }
.hero-deck__karte {
  position: absolute; inset: 0 19% 0 19%; display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.14); background: linear-gradient(165deg, #18234a 0%, #0b1130 70%);
  box-shadow: 0 24px 50px rgb(0 0 20 / 0.55), inset 0 1px 0 rgb(255 255 255 / 0.08);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.hero-deck__karte > img { flex: 1; width: 100%; height: 100%; object-fit: contain; padding: 14% 8% 8%; filter: drop-shadow(0 10px 16px rgb(0 0 20 / 0.5)); }
.hero-deck__karte--hinten2 { transform: translate(-38%, 5%) rotate(-11deg) scale(0.88); opacity: 0.7; }
.hero-deck__karte--hinten1 { transform: translate(38%, 3%) rotate(9deg) scale(0.92); opacity: 0.85; }
.hero-deck__karte.ist-zu > img { filter: grayscale(1) brightness(0.35); }
.hero-deck__karte.ist-zu::after { content: attr(data-ab); position: absolute; left: 0; right: 0; bottom: 8%; text-align: center;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: #c7d2ee; }
/* Vordere Karte: Goldrahmen wie eine besondere Sammelkarte, Form als römische Zahl */
.hero-deck__karte--vorn { z-index: 2; color: #f1f5ff; text-decoration: none; padding: 2px;
  background: linear-gradient(150deg, #fff3c4, #d29a12 30%, #fff9e3 50%, #a46d08 72%, #ffd968); }
.hero-deck__karte--vorn > * { position: relative; }
.hero-deck__karte--vorn::before { content: ""; position: absolute; inset: 2px; border-radius: calc(var(--radius-lg) - 2px);
  background: radial-gradient(80% 60% at 50% 45%, #22337a 0%, #101a45 55%, #080d26 100%); }
.hero-deck__karte--vorn:hover { color: #fff; transform: translateY(-4px) rotate(-1deg); box-shadow: 0 30px 60px rgb(0 0 20 / 0.6), 0 0 28px rgb(255 203 71 / 0.25); }
.hero-deck__kopf { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.9rem 0; }
.hero-deck__kopf strong { display: block; font-size: 1.05rem; line-height: 1.15; }
.hero-deck__kopf small { display: block; font-size: 0.74rem; color: #c3cdea; }
.hero-deck__form { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; flex: none;
  font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 0.95rem; color: #2a1a00; background: var(--gold-verlauf); }
.hero-deck__bild { flex: 1; display: grid; place-items: center; min-height: 0; padding: 0.4rem 0.6rem; position: relative; }
.hero-deck__bild img { width: 100%; height: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 12px 18px rgb(0 0 20 / 0.55)); }
.hero-deck__fuss { display: block; margin: 0 0.9rem 0.8rem; padding-top: 0.55rem; border-top: 1px solid rgb(255 255 255 / 0.12);
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: #c3cdea; }
.hero-deck__fuss[hidden] { display: none; }
.hero-deck__fuss--stand { display: grid; gap: 0.3rem; text-transform: none; letter-spacing: 0.02em; }
.hero-deck__lv { font-weight: 700; color: var(--color-cyan); font-size: 0.78rem; }
.hero-deck__fuss--stand .progress { height: 5px; }
.hero-deck__fuss--stand small { font-size: 0.72rem; color: #c3cdea; }
.hero-deck.ist-levelup .hero-deck__karte--vorn { box-shadow: 0 24px 50px rgb(0 0 20 / 0.55), 0 0 34px rgb(255 203 71 / 0.45); }
@media (max-width: 860px) {
  .hero-deck { width: min(70%, 300px); margin: 0 auto 1rem; }
}

/* „Dein nächster Schritt“ als große Karten unter dem Hero – ragen in die Welt hinein (js/start-leiste.js, 2–4 Einträge) */
.welt-kacheln { position: relative; z-index: 2; margin-top: -4.2rem; max-width: var(--maxw-weit); }
.welt-kacheln__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 1rem; }
.welt-kacheln__liste > li { display: grid; }
.welt-kachel {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.9rem; padding: 0.9rem 1rem 0.9rem 0.8rem;
  text-decoration: none; color: var(--text); background: color-mix(in srgb, var(--color-surface) 84%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.welt-kachel img { width: 4.2rem; height: 4.2rem; object-fit: contain; filter: drop-shadow(0 4px 10px rgb(0 0 0 / 0.35)); transition: transform var(--transition-normal); }
.welt-kachel strong { display: block; font-size: 1.08rem; line-height: 1.25; }
.welt-kachel small { display: block; color: var(--text-muted); font-size: 0.88rem; }
.welt-kachel__pfeil { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; font-weight: 800;
  color: var(--k, var(--color-cyan)); border: 1.5px solid color-mix(in srgb, var(--k, var(--color-cyan)) 65%, transparent); }
.welt-kachel:hover, .welt-kachel:focus-visible { color: var(--text); transform: translateY(-3px); border-color: color-mix(in srgb, var(--k, var(--color-cyan)) 60%, transparent);
  box-shadow: var(--shadow-lift), 0 0 22px color-mix(in srgb, var(--k, var(--color-cyan)) 22%, transparent); }
.welt-kachel:hover img { transform: scale(1.06); }
.welt-kachel:hover .welt-kachel__pfeil { background: color-mix(in srgb, var(--k, var(--color-cyan)) 18%, transparent); }

@media (max-width: 860px) {
  .welt-hero { min-height: 0; padding-bottom: 5rem; }
  .welt-hero__inner { grid-template-columns: 1fr; }
  .welt-hero__welt { left: 0; width: 100%; top: auto; bottom: 18%; height: 60%; opacity: 0.85; }
  .welt-hero__schleier { background: linear-gradient(180deg, rgb(6 10 32 / 0.82) 0%, rgb(6 10 32 / 0.55) 45%, rgb(6 10 32 / 0.15) 70%, var(--color-bg) 100%); }
  .hero__begleiter { justify-self: center; margin: 0 0 -3rem; width: min(78%, 330px); }
  .hero__begleiter .hero__bubble { display: none; }
  .hero__hinweis { font-size: 0.82rem; }
}
@media (max-width: 860px) {
  .hero__begleiter { margin-bottom: 0; }
  .welt-kacheln { margin-top: -2rem; }
}
@media (max-width: 520px) {
  .welt-kacheln__liste { gap: 0.6rem; }
  .welt-kachel { gap: 0.7rem; padding: 0.7rem 0.8rem; }
  .welt-kachel img { width: 3rem; height: 3rem; }
  .welt-kachel strong { font-size: 0.98rem; }
  .welt-kachel small { font-size: 0.8rem; }
}

/* Fakten im Hero (für Eltern und Lehrkräfte) */
.start-fakten { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; list-style: none; padding: 0; margin: 1.1rem 0 0; color: var(--text-muted); font-size: 0.95rem; }
.start-fakten strong { color: var(--text); font-size: 1.15rem; margin-right: 0.25rem; }

/* Kompakter Rhythmus: etwas kleinere Abschnittsabstände als auf den übrigen Seiten (ohne gequetscht zu wirken) */
#inhalt > .section:not(.section--tight) { padding-block: clamp(2.5rem, 5vw, 4rem); }
#inhalt > .welt-kacheln { margin-bottom: 0.5rem; }
#inhalt .section-head { margin-bottom: 1.75rem; }
/* Jahrgangsstufen direkt unter der Leiste: kein doppelter Abschnittsabstand (sonst ~150 px Lücke) */
#inhalt > #stufen { padding-top: clamp(1.5rem, 3vw, 2.5rem); }

/* Persönliche Leiste: der nächste Schritt */
.start-leiste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.8rem; }
.start-leiste__eintrag a {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.8rem; height: 100%;
  padding: 0.85rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface);
  color: var(--text); text-decoration: none; box-shadow: var(--shadow-card);
  transition: border-color var(--transition-fast, 150ms), transform var(--transition-fast, 150ms);
}
.start-leiste__eintrag a:hover, .start-leiste__eintrag a:focus-visible { border-color: var(--leiste-farbe, var(--primary)); transform: translateY(-2px); color: var(--text); }
.start-leiste__eintrag--lernen { --leiste-farbe: var(--color-cyan); }
.start-leiste__eintrag--lernen a { border-left: 4px solid var(--color-cyan); }
.start-leiste__eintrag--begleiter { --leiste-farbe: var(--color-gold-bright); }
.start-leiste__eintrag--wdh { --leiste-farbe: var(--color-success); }
.start-leiste__eintrag--boss { --leiste-farbe: var(--color-pink); }
.start-leiste__icon { display: grid; }
.start-leiste__icon .icon { width: 2.1rem; height: 2.1rem; }
.start-leiste__eintrag strong { display: block; font-size: 0.98rem; line-height: 1.3; }
.start-leiste__eintrag small { display: block; color: var(--text-muted); font-size: 0.84rem; line-height: 1.35; }
.start-leiste__pfeil { color: var(--text-muted); }

/* Didaktik: vier Schritte als Prozess – Icon + „Schritt n“, Pfeil zum nächsten Schritt (nur bei 4 Spalten) */
.steps--4 { grid-template-columns: repeat(4, 1fr); }
.steps--prozess .step { padding: 1.3rem 1.3rem 1.2rem; }
.step__kopf { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.8rem; }
.steps--prozess .step__nr {
  position: static; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-cyan);
}
.steps--prozess .step h3 { margin: 0 0 0.4rem; }
.steps--prozess .step p { margin: 0; }
@media (min-width: 981px) {
  .steps--prozess .step:not(:last-child)::after {
    content: ""; position: absolute; top: 2.3rem; right: -1.35rem; width: 1.2rem; height: 0.9rem; z-index: 1;
    background: color-mix(in srgb, var(--color-cyan) 70%, var(--border));
    clip-path: polygon(0 40%, 60% 40%, 60% 0, 100% 50%, 60% 100%, 60% 60%, 0 60%);
  }
}

/* Kreislauf der Spielwelt */
.kreis-bereich { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 2.5rem; align-items: center; }
.kreis-text h2 { margin-top: 0.2rem; }
.kreis-grundsatz { padding: 0.8rem 1rem; border-left: 4px solid var(--color-success); border-radius: var(--radius-sm); background: var(--surface); font-size: 0.95rem; }
.kreis { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1; justify-self: center; }
.kreis__ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.kreis__ring path { fill: none; stroke: color-mix(in srgb, var(--color-cyan) 55%, var(--border)); stroke-width: 0.8; stroke-dasharray: 2 1.6; }
.kreis__ring marker path { fill: color-mix(in srgb, var(--color-cyan) 70%, var(--border)); stroke: none; }
.kreis__mitte { position: absolute; left: 50%; top: 50%; width: 42%; aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; }
.kreis__mitte img { width: 92%; height: auto; }
.kreis__stationen { list-style: none; margin: 0; padding: 0; }
.kreis__stationen li { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); z-index: 1; }
.kreis__stationen a {
  display: grid; justify-items: center; gap: 0.1rem; width: 9.2rem; padding: 0.55rem 0.5rem; text-align: center;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-card);
  color: var(--text); text-decoration: none; transition: border-color var(--transition-fast, 150ms), box-shadow var(--transition-fast, 150ms);
}
.kreis__stationen a:hover, .kreis__stationen a:focus-visible { border-color: var(--color-cyan); box-shadow: var(--shadow-lift); color: var(--text); }
.kreis__stationen .icon { width: 2rem; height: 2rem; margin-bottom: 0.1rem; }
.kreis__stationen strong { font-size: 0.95rem; line-height: 1.2; }
.kreis__stationen small { font-size: 0.82rem; line-height: 1.3; color: var(--text-muted); }   /* ≥ 13 px: auf dunklem Grund lesbar */

/* Design-Pass 2: Kreislauf als kleine Reise – Begleiter auf Plattform im Lichtschein, Stationen als schwebende Inseln,
   verbunden durch den Licht-Orbit (images/startseite/orbit-ring.webp). Logik und Links unverändert. */
.kreis { isolation: isolate; }
.kreis__orbit { position: absolute; inset: 6% 2%; width: 96%; height: 88%; object-fit: contain; opacity: 0.55; z-index: -1; pointer-events: none;
  animation: kreis-orbit 60s linear infinite; }
@keyframes kreis-orbit { to { rotate: 360deg; } }
.kreis__ring path { stroke: color-mix(in srgb, var(--color-gold-bright) 55%, var(--color-cyan)); stroke-width: 0.6; opacity: 0.6; }
.kreis__ring marker path { fill: var(--color-gold-bright); }
.kreis__mitte { display: grid; place-items: end center; }
.kreis__mitte img { grid-area: 1 / 1; }
.kreis__mitte .kreis__glow { width: 130%; max-width: none; align-self: center; opacity: 0.45; mix-blend-mode: screen; }
.kreis__mitte .kreis__plattform { width: 90%; margin-bottom: -6%; filter: drop-shadow(0 12px 16px rgb(0 0 20 / 0.5)); }
.kreis__mitte .kreis__tier { width: 82%; margin-bottom: 16%; filter: drop-shadow(0 10px 16px rgb(0 0 30 / 0.5)); }
/* Redesign 2.0: Mitte nur das Tier auf einem dezenten Lichtschein (keine Plattform), Stationen mit Icons */
.kreis__mitte--ruhig { place-items: center; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--primary) 16%, transparent), transparent); }
.kreis__mitte--ruhig .kreis__tier { margin: 0; width: 78%; }
:root .kreis__icon { width: 3.2rem; height: 3.2rem; margin: -1.8rem 0 0.25rem; }
.kreis__stationen a { padding-top: 0.2rem; background: color-mix(in srgb, var(--color-surface) 82%, transparent); }
.kreis__insel { width: 5.6rem; height: 4.4rem; max-width: none; object-fit: contain; margin: -2.2rem 0 0.1rem; filter: drop-shadow(0 6px 10px rgb(0 0 20 / 0.45)); transition: transform var(--transition-normal); }
.kreis__stationen a:hover .kreis__insel { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .kreis__orbit { animation: none; } }
@media (max-width: 640px) {
  .kreis__orbit { display: none; }
  .kreis__insel { grid-row: span 2; margin: 0; width: 3.4rem; height: 3rem; }
}

/* Für Eltern & Lehrkräfte */
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.info-karte { padding: 1.3rem 1.4rem; }
.info-karte h3 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.info-karte p { margin: 0; }

@media (max-width: 980px) {
  .steps--4 { grid-template-columns: repeat(2, 1fr); }
  .kreis-bereich { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; }
}
/* Handy: Kreis wird zur Liste, das Tier bleibt klein darüber */
@media (max-width: 640px) {
  .steps--4 { grid-template-columns: 1fr; }
  .kreis { aspect-ratio: auto; max-width: none; }
  .kreis__ring { display: none; }
  .kreis__mitte { position: static; transform: none; width: 140px; margin: 0 auto 0.8rem; }
  .kreis__stationen { display: grid; gap: 0.5rem; counter-reset: station; }
  .kreis__stationen li { position: static; transform: none; }
  .kreis__stationen a { width: auto; grid-template-columns: auto 1fr; justify-items: start; text-align: left; column-gap: 0.7rem; }
  .kreis__stationen .icon { grid-row: span 2; align-self: center; margin: 0; }
}

/* Hero-Begleiter: sichtbare Ausrüstung (js/hero-begleiter.js, Bausteine aus style.css .beg-buehne) */
.hero__begleiter > .beg-buehne__zeichen { top: 10%; bottom: auto; right: 4%; font-size: 1.1rem; }
.hero__begleiter > .beg-buehne__aura { inset: 8% 14%; }
.hero__titel { display: block; font-size: 0.75rem; font-weight: 700; color: var(--color-gold); }