/*
 * Logo-Umlauf: kreisfoermiges Gegenstueck zum "logo-slider"-Laufband.
 * Technik: der Ring (.logo-orbit__ring) dreht sich kontinuierlich: jedes
 * Logo sitzt auf einem festen Winkel auf dem Ring (--angle, von render.php
 * gesetzt) und wandert so mit im Kreis. Im Logo selbst (.logo-orbit__logo)
 * laeuft GLEICHZEITIG eine exakt entgegengesetzte Drehung derselben Dauer
 * -- die beiden Drehungen heben sich optisch auf, das Logo bleibt aufrecht,
 * nur seine POSITION wandert. Eigenstaendiges CSS, laeuft auf jedem Design.
 */
.widget-logo-orbit {
    --lo-ease: cubic-bezier(0.23, 1, 0.32, 1);
    max-width: 44rem;
    margin: 0 auto;
    padding: var(--wl-section-spacing, 4rem) 1.5rem;
    text-align: center;
}

.logo-orbit__eyebrow {
    display: block;
    color: var(--color-primary, #C8102E);
    font-weight: 800;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin-bottom: 2rem;
}

.logo-orbit {
    position: relative;
    width: min(100%, 26rem);
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    --logo-orbit-radius: clamp(6.5rem, 30vw, 10.5rem);
}

.logo-orbit__center {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 8rem;
    height: 8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    animation: fvf-orbit-breathe 3.4s ease-in-out infinite;
}

/* Nutzerwunsch: "das logo soll die komplette mitte fuettern" + "ohne
   Rahmen" -- kein weisser Karten-Hintergrund/Schatten mehr, das Wappen
   schwebt direkt frei (es bringt selbst schon einen weichen transparenten
   Rand mit, siehe Bilder/Logo.png -- kein zusaetzlicher Rahmen noetig). */
.logo-orbit__center img { width: 100%; height: 100%; object-fit: contain; }

@keyframes fvf-orbit-breathe {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.05); }
}

.logo-orbit__ring {
    position: absolute;
    inset: 0;
    animation: fvf-orbit-cw var(--logo-orbit-duration, 40s) linear infinite;
}

.logo-orbit__ring--ccw { animation-name: fvf-orbit-ccw; }

/* .item dreht nur die lokale Achse auf den Zielwinkel (reiner Drehpunkt,
   keine eigene Groesse). .arm schiebt von dort aus radial nach aussen und
   dreht im selben Zug wieder um denselben Winkel zurueck -- deshalb steht
   das Logo im Ruhezustand aufrecht, UNABHAENGIG von seiner Position auf
   dem Kreis. Ohne diesen zweiten Schritt waeren die Logos bei 90°/180°/
   270° sichtbar quer/kopfueber verdreht (genau die eigene Winkellage,
   nicht die laufende Ring-Drehung, war die Ursache). */
.logo-orbit__item {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: rotate(var(--angle));
}

.logo-orbit__arm {
    position: absolute;
    top: 0;
    left: 0;
    width: 4.25rem;
    height: 4.25rem;
    margin: -2.125rem 0 0 -2.125rem;
    transform: translateX(var(--logo-orbit-radius)) rotate(calc(-1 * var(--angle)));
    transition: transform 200ms var(--lo-ease);
}

.logo-orbit__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.35);
    animation: fvf-orbit-ccw var(--logo-orbit-duration, 40s) linear infinite;
    transition: transform 200ms var(--lo-ease), box-shadow 200ms var(--lo-ease);
}

.logo-orbit__ring--ccw .logo-orbit__logo { animation-name: fvf-orbit-cw; }

.logo-orbit__logo img {
    max-width: 72%;
    max-height: 72%;
    object-fit: contain;
}

@keyframes fvf-orbit-cw { to { transform: rotate(360deg); } }
@keyframes fvf-orbit-ccw { to { transform: rotate(-360deg); } }

@media (hover: hover) and (pointer: fine) {
    /* Vergroesserung auf .logo-orbit__arm (nicht auf .logo-orbit__logo):
       dessen transform wird laufend von der Gegendrehung animiert -- eine
       zweite, statische transform-Angabe dort wuerde mit jedem Frame der
       Animation ueberschrieben und nie sichtbar. Der Arm selbst hat keine
       Animation, "scale" laesst sich seiner festen Verschiebung/Drehung
       einfach anhaengen. */
    .logo-orbit__item:hover .logo-orbit__arm {
        transform: translateX(var(--logo-orbit-radius)) rotate(calc(-1 * var(--angle))) scale(1.28);
    }
    .logo-orbit__item:hover .logo-orbit__logo {
        box-shadow: 0 16px 32px -14px rgba(0, 0, 0, 0.45);
    }
    /* Ganzer Umlauf pausiert bei Hover -- wer ein Logo anschauen oder
       anklicken will, soll es nicht erst "einfangen" muessen. */
    .logo-orbit:hover .logo-orbit__ring,
    .logo-orbit:hover .logo-orbit__logo {
        animation-play-state: paused;
    }
}

@media (prefers-reduced-motion: reduce) {
    .logo-orbit__ring,
    .logo-orbit__logo,
    .logo-orbit__center {
        animation: none !important;
    }
}

@media (max-width: 420px) {
    .logo-orbit { --logo-orbit-radius: clamp(5rem, 32vw, 7.5rem); }
    .logo-orbit__arm { width: 3.25rem; height: 3.25rem; margin: -1.625rem 0 0 -1.625rem; }
    .logo-orbit__center { width: 4.5rem; height: 4.5rem; }
}