/* ============================================================
   MHL R221
   HERO ROTATION COUNTER – CLEAN MARITIME FIX
   ============================================================ */

/* Hero als Positionierungsrahmen */
body.scene-sh .editorial-lead {
    position: relative !important;
}

/* Counter aus dem Grid herausnehmen */
body.scene-sh .editorial-lead .sh-hero-rotation-counter {
    position: absolute !important;

    right: 28px !important;
    bottom: 24px !important;

    width: auto !important;
    height: auto !important;

    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 9px 13px 9px 9px !important;

    display: flex !important;
    align-items: center !important;
    gap: 10px !important;

    box-sizing: border-box !important;

    border-radius: 999px !important;

    background:
        rgba(3, 35, 49, .78) !important;

    border:
        1px solid rgba(74, 184, 214, .32) !important;

    box-shadow:
        0 8px 22px rgba(0, 18, 28, .22) !important;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    z-index: 20 !important;

    pointer-events: none;
}

/* Ring */
body.scene-sh .sh-hero-rotation-counter__ring {
    position: relative !important;

    width: 42px !important;
    height: 42px !important;

    flex: 0 0 42px !important;

    display: grid !important;
    place-items: center !important;
}

/* SVG niemals schwarz füllen */
body.scene-sh .sh-hero-rotation-counter__ring svg {
    display: block !important;

    width: 42px !important;
    height: 42px !important;

    overflow: visible !important;
}

/* WICHTIG: SVG-Kreise transparent */
body.scene-sh .sh-hero-rotation-counter__ring circle {
    fill: none !important;
}

/* Ring-Hintergrund */
body.scene-sh .sh-hero-rotation-counter__track {
    stroke:
        rgba(106, 207, 231, .18) !important;

    stroke-width: 2 !important;
}

/* Fortschrittsring */
body.scene-sh .sh-hero-rotation-counter__progress {
    stroke:
        #67d5ed !important;

    stroke-width: 2.5 !important;

    stroke-linecap: round !important;

    transform:
        rotate(-90deg) !important;

    transform-origin:
        22px 22px !important;

    transition:
        stroke-dashoffset .35s linear !important;
}

/* Sekunden-Zahl */
body.scene-sh #sh-hero-rotation-seconds {
    position: absolute !important;

    inset: 0 !important;

    display: grid !important;
    place-items: center !important;

    color: #eafaff !important;

    font-size: .72rem !important;
    font-weight: 800 !important;

    line-height: 1 !important;
}

/* Text */
body.scene-sh .sh-hero-rotation-counter__text {
    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    gap: 2px !important;

    white-space: nowrap !important;

    padding: 0 !important;
}

/* "NÄCHSTE IMPRESSION" */
body.scene-sh .sh-hero-rotation-counter__text span {
    color:
        rgba(146, 221, 237, .72) !important;

    font-size: .55rem !important;

    font-weight: 800 !important;

    letter-spacing: .13em !important;

    line-height: 1.1 !important;
}

/* "in 15 Sekunden" */
body.scene-sh .sh-hero-rotation-counter__text strong {
    color:
        #f1fbfd !important;

    font-size: .68rem !important;

    font-weight: 600 !important;

    line-height: 1.2 !important;
}

body.scene-sh .sh-hero-rotation-counter__text strong b {
    color:
        #67d5ed !important;

    font-weight: 800 !important;
}

/* Mobile */