/* =========================================================
   hero-orbit.css – „23 Module. Ein Login.“ im Hero der Startseite.

   Die Modul-Symbole fliegen beim Laden auf eine Umlaufbahn um
   das SchulServ-Zeichen, der grüne Haken setzt sich, danach
   kreisen die Symbole langsam weiter. Reines CSS, kein Script.

   Skalierung: .ho ist ein CSS-Container, alle Maße hängen in em
   an dessen Breite – das Motiv passt sich jeder Spalte an.
   ========================================================= */

.ho {
    container-type: inline-size;
    width: 100%;
    max-width: 460px;
    justify-self: center;
    --ho-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ho-green: #16a34a;
}
.ho-in {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; gap: 0.3em;
    font-size: clamp(12px, 5.2cqw, 24px);
    line-height: 1.35;
}

/* ---------- Umlaufbahn ---------- */
.ho-orbit { position: relative; width: 17em; height: 17em; flex-shrink: 0; }
.ho-ring {
    position: absolute; inset: 1.4em; border-radius: 50%;
    border: 1.5px dashed var(--accent-tint);
}
.ho-spin { position: absolute; inset: 0; animation: hoSpin 24s linear infinite; }
@keyframes hoSpin { to { transform: rotate(360deg); } }

.ho-orb {
    position: absolute; left: 50%; top: 50%;
    width: 2.5em; height: 2.5em; margin: -1.25em 0 0 -1.25em;
    border-radius: 50%; display: grid; place-items: center;
    font-size: 0.9em; color: #fff;
    background: var(--c, var(--accent-deep));
    box-shadow: 0 0.5em 1em -0.5em rgba(13,42,56,0.5);
    transform: rotate(var(--a)) translateY(-7.15em) rotate(calc(var(--a) * -1));
    animation: hoOrbIn 900ms var(--ho-ease) var(--d) both;
}
.ho-orb > i { display: block; animation: hoCounter 24s linear infinite; }
@keyframes hoCounter { to { transform: rotate(-360deg); } }
@keyframes hoOrbIn {
    from { opacity: 0; transform: rotate(calc(var(--a) - 40deg)) translateY(-11em) rotate(calc((var(--a) - 40deg) * -1)) scale(0.6); }
    to   { opacity: 1; transform: rotate(var(--a)) translateY(-7.15em) rotate(calc(var(--a) * -1)); }
}

.ho-core {
    position: absolute; left: 50%; top: 50%;
    width: 6.2em; height: 6.2em; margin: -3.1em 0 0 -3.1em;
    border-radius: 1.8em; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deeper) 100%);
    box-shadow: 0 1.4em 2.6em -1.1em var(--accent-deeper), 0 0 0 0.6em rgba(6,182,212,0.1);
    color: #fff;
    animation: hoCore 700ms var(--ho-ease) 0.15s both;
}
.ho-core > i { font-size: 2.2em; }
@keyframes hoCore { from { opacity: 0; transform: scale(0.5) rotate(-12deg); } to { opacity: 1; transform: none; } }
.ho-check {
    position: absolute; right: -0.55em; bottom: -0.55em;
    width: 2.3em; height: 2.3em; border-radius: 50%;
    display: grid; place-items: center; font-size: 0.85em;
    background: var(--ho-green); color: #fff; border: 0.22em solid #fff;
    animation: hoBadge 520ms var(--ho-ease) 1.25s both;
}
@keyframes hoBadge { 0% { opacity: 0; transform: scale(0.3); } 60% { opacity: 1; transform: scale(1.18); } 100% { opacity: 1; transform: none; } }

/* ---------- Text ---------- */
.ho-txt { animation: hoUp 620ms var(--ho-ease) 900ms both; }
@keyframes hoUp { from { opacity: 0; transform: translateY(0.8em); } to { opacity: 1; transform: none; } }
.ho-txt b { display: block; font-size: 1.55em; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; color: var(--ink); }
.ho-txt b span {
    background: linear-gradient(120deg, var(--accent) 0%, var(--accent-deeper) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ho-txt small { display: block; font-size: 0.8em; color: var(--ink-muted); margin-top: 0.25em; font-weight: 600; }

/* Bewegung reduzieren: alles steht sofort, nichts kreist */
@media (prefers-reduced-motion: reduce) {
    .ho-spin, .ho-orb > i { animation: none !important; }
}

@media (max-width: 980px) {
    .ho { max-width: 380px; }
}