/* ============================================================
   MHL R220
   SCHLESWIG-HOLSTEIN – ROTATING HERO TEXT
   ============================================================ */

body.scene-sh .sh-hero-rotating-title {
    position: relative;
    min-height: 2.1em;
    transition: opacity .35s ease, transform .35s ease;
    will-change: opacity, transform;
}

body.scene-sh .sh-hero-rotating-title.is-changing {
    opacity: 0;
    transform: translateY(8px);
}

@media (prefers-reduced-motion: reduce) {
    body.scene-sh .sh-hero-rotating-title {
        transition: none;
    }

    body.scene-sh .sh-hero-rotating-title.is-changing {
        transform: none;
    }
}

/* R220 – HERO-BILD PROFESSIONELL EINPASSEN */
body.scene-sh .editorial-lead > img {
    width: calc(100% - 28px) !important;
    height: calc(100% - 28px) !important;
    min-height: 0 !important;
    margin: 14px !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    object-fit: cover !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.24) !important;
}

/* R220 – HERO ROTATING TEXT – GRÖSSERE DARSTELLUNG */

body.scene-sh .sh-hero-rotating-title {
    font-size: clamp(2.4rem, 3.4vw, 4.2rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.035em !important;
    max-width: 900px !important;
    min-height: 2.2em;
    display: flex;
    align-items: center;
}


/* R220 – HERO TYPOGRAFIE FINAL */

body.scene-sh .sh-hero-rotating-title {
    font-size: clamp(2rem, 2.7vw, 3.25rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.032em !important;
    max-width: 850px !important;
}

body.scene-sh .sh-hero-rotating-copy {
    transition:
        opacity .45s ease,
        transform .45s ease;
}

body.scene-sh .sh-hero-rotating-copy.is-changing {
    opacity: 0;
    transform: translateY(6px);
}


/* ============================================================
   R220 – HERO ROTATING COPY – TYPOGRAPHY
   ============================================================ */

body.scene-sh .editorial-lead .sh-hero-rotating-copy {
    margin: 0 0 20px !important;
    color: rgba(235, 247, 250, .86) !important;
    font-size: 1.08rem !important;
    line-height: 1.72 !important;
    letter-spacing: .005em;
}

body.scene-sh .editorial-lead .sh-hero-rotating-copy:last-child {
    margin-bottom: 0 !important;
}

body.scene-sh .editorial-lead .sh-hero-rotating-copy.is-changing {
    opacity: 0;
    transform: translateY(6px);
}

body.scene-sh .editorial-lead .sh-hero-rotating-copy {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity .45s ease,
        transform .45s ease;
}


/* ============================================================
   R220 – NÄCHSTE IMPRESSION
   unten rechts innerhalb der Hero-Karte
   ============================================================ */

body.scene-sh .editorial-lead {
    position: relative !important;
}

body.scene-sh .sh-hero-rotation-counter {
    position: absolute !important;

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

    margin: 0 !important;

    z-index: 20;

    padding: 7px 13px 7px 7px;

    border-radius: 999px;

    background: rgba(3, 30, 43, .72);

    border: 1px solid rgba(120, 210, 230, .24);

    box-shadow:
        0 8px 24px rgba(0, 12, 20, .28),
        inset 0 1px 0 rgba(255,255,255,.05);

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

body.scene-sh .sh-hero-rotation-counter__text span {
    font-size: .60rem;
    letter-spacing: .13em;
}

body.scene-sh .sh-hero-rotation-counter__text strong {
    font-size: .72rem;
}


/* ============================================================
   R220 COUNTER – CLEAN CIRCULAR COUNTDOWN
   ============================================================ */

body.scene-sh .sh-hero-rotation-counter {
    position: absolute !important;
    right: 30px !important;
    bottom: 26px !important;

    width: 64px !important;
    height: 64px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    z-index: 20 !important;
}

body.scene-sh .sh-hero-rotation-counter__ring {
    position: relative;

    width: 64px;
    height: 64px;

    display: flex;
    align-items: center;
    justify-content: center;
}

body.scene-sh .sh-hero-rotation-counter__ring svg {
    position: absolute;
    inset: 0;

    width: 64px;
    height: 64px;

    transform: rotate(-90deg);
}

body.scene-sh .sh-hero-rotation-counter__track,
body.scene-sh .sh-hero-rotation-counter__progress {
    fill: none;

    stroke-width: 2.5;
}

body.scene-sh .sh-hero-rotation-counter__track {
    stroke: rgba(74, 184, 214, .18);
}

body.scene-sh .sh-hero-rotation-counter__progress {
    stroke: #52d7f5;

    stroke-linecap: round;

    stroke-dasharray: 113.1;
    stroke-dashoffset: 113.1;

    transition: stroke-dashoffset 1s linear;

    filter: drop-shadow(0 0 4px rgba(82, 215, 245, .35));
}

body.scene-sh .sh-hero-rotation-counter__ring span {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border-radius: 50%;

    background: rgba(3, 34, 48, .82);

    color: #f5fbfd;

    font-size: 1rem;
    font-weight: 800;
    line-height: 1;

    font-variant-numeric: tabular-nums;

    text-align: center;
}

body.scene-sh .sh-hero-rotation-counter__text {
    display: none !important;
}


/* ============================================================
   R220 – FINAL HERO COUNTDOWN
   Nur Kreis + Zahl
   ============================================================ */

/* Hero als Bezugspunkt für den Counter */
body.scene-sh .editorial-lead {
    position: relative !important;
}

/* Alten Counter vollständig zurücksetzen */
body.scene-sh .sh-hero-rotation-counter {
    position: absolute !important;

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

    width: 72px !important;
    height: 72px !important;

    display: block !important;

    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    z-index: 50 !important;
}

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

    width: 72px !important;
    height: 72px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;
}

/* SVG */
body.scene-sh .sh-hero-rotation-counter__ring svg {
    position: absolute !important;

    inset: 0 !important;

    width: 72px !important;
    height: 72px !important;

    display: block !important;

    transform: rotate(-90deg) !important;
}

/* Hintergrund-Kreis */
body.scene-sh .sh-hero-rotation-counter__track {
    fill: none !important;

    stroke: rgba(82, 215, 245, .18) !important;

    stroke-width: 2.5 !important;
}

/* Fortschritts-Kreis */
body.scene-sh .sh-hero-rotation-counter__progress {
    fill: none !important;

    stroke: #52d7f5 !important;

    stroke-width: 2.8 !important;

    stroke-linecap: round !important;

    stroke-dasharray: 113.1 !important;

    stroke-dashoffset: calc(
        113.1 - (113.1 * var(--sh-progress, 0) / 100)
    ) !important;

    transition: stroke-dashoffset 1s linear !important;

    filter:
        drop-shadow(0 0 4px rgba(82, 215, 245, .35))
        !important;
}

/* Die Zahl */
body.scene-sh .sh-hero-rotation-counter__ring > span,
body.scene-sh #sh-hero-rotation-seconds {
    position: relative !important;

    z-index: 5 !important;

    width: 48px !important;
    height: 48px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    margin: 0 !important;

    border-radius: 50% !important;

    background: rgba(3, 34, 48, .90) !important;

    color: #f5fbfd !important;

    font-size: 1.05rem !important;
    font-weight: 800 !important;

    line-height: 1 !important;

    font-variant-numeric: tabular-nums !important;

    text-align: center !important;

    box-shadow: none !important;
}

/* Alten Text komplett entfernen */
body.scene-sh .sh-hero-rotation-counter__text {
    display: none !important;

    width: 0 !important;
    height: 0 !important;

    overflow: hidden !important;
}

/* Kein Capsule-Rahmen */
body.scene-sh .sh-hero-rotation-counter::before,
body.scene-sh .sh-hero-rotation-counter::after,
body.scene-sh .sh-hero-rotation-counter__ring::before,
body.scene-sh .sh-hero-rotation-counter__ring::after {
    display: none !important;
    content: none !important;
}

/* ============================================================
   R220 FINAL – CLEAN CIRCULAR COUNTDOWN
   Keine Capsule / keine zweite Umrandung
   ============================================================ */

body.scene-sh .sh-hero-rotation-counter {
    position: absolute !important;
    right: 34px !important;
    bottom: 28px !important;

    width: 82px !important;
    height: 82px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 50% !important;

    box-shadow: none !important;
}

/* Alte Capsule-Inhalte vollständig entfernen */
body.scene-sh .sh-hero-rotation-counter__text {
    display: none !important;
}

body.scene-sh .sh-hero-rotation-counter::before,
body.scene-sh .sh-hero-rotation-counter::after,
body.scene-sh .sh-hero-rotation-counter__ring::before,
body.scene-sh .sh-hero-rotation-counter__ring::after {
    display: none !important;
    content: none !important;
}

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

    width: 76px !important;
    height: 76px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 50% !important;

    box-shadow: none !important;
}

/* SVG exakt über den Kreis legen */
body.scene-sh .sh-hero-rotation-counter__ring svg {
    position: absolute !important;

    inset: 0 !important;

    width: 76px !important;
    height: 76px !important;

    display: block !important;

    transform: rotate(-90deg) !important;

    overflow: visible !important;
}

/* Hintergrundbahn des Kreises */
body.scene-sh .sh-hero-rotation-counter__track {
    fill: none !important;

    stroke: rgba(74, 184, 214, .20) !important;
    stroke-width: 3 !important;
}

/* Animierter Fortschrittskreis */
body.scene-sh .sh-hero-rotation-counter__progress {
    fill: none !important;

    stroke: #4ad8f5 !important;
    stroke-width: 3.5 !important;

    stroke-linecap: round !important;

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

/* Zahl exakt mittig */
body.scene-sh .sh-hero-rotation-counter__ring > span {
    position: relative !important;
    z-index: 5 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 44px !important;
    height: 44px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #f5fbfd !important;

    font-size: 1.05rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 50% !important;

    box-shadow: none !important;
}

/* ============================================================
   R220 FINAL FIX – EIN EINZIGER COUNTDOWN-RING
   ============================================================ */

/* Counter selbst */
body.scene-sh #content .sh-hero-rotation-counter {
    position: absolute !important;
    right: 32px !important;
    bottom: 26px !important;

    width: 82px !important;
    height: 82px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    overflow: visible !important;
}

/* Alle alten Text-/Capsule-Elemente weg */
body.scene-sh #content .sh-hero-rotation-counter__text {
    display: none !important;
}

body.scene-sh #content .sh-hero-rotation-counter::before,
body.scene-sh #content .sh-hero-rotation-counter::after,
body.scene-sh #content .sh-hero-rotation-counter__ring::before,
body.scene-sh #content .sh-hero-rotation-counter__ring::after {
    content: none !important;
    display: none !important;
}

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

    width: 82px !important;
    height: 82px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;

    overflow: visible !important;
}

/* SVG */
body.scene-sh #content .sh-hero-rotation-counter__ring svg {
    position: absolute !important;

    left: 0 !important;
    top: 0 !important;

    width: 82px !important;
    height: 82px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    transform: rotate(-90deg) !important;

    overflow: visible !important;

    background: transparent !important;
}

/* WICHTIG:
   Der bisherige Hintergrundkreis wird komplett entfernt.
   Es bleibt nur der animierte Progress-Ring. */
body.scene-sh #content .sh-hero-rotation-counter__track {
    display: none !important;

    stroke: none !important;
    fill: none !important;
}

/* EINZIGER sichtbarer Kreis */
body.scene-sh #content .sh-hero-rotation-counter__progress {
    display: block !important;

    fill: none !important;

    stroke: #4ad8f5 !important;
    stroke-width: 3.5 !important;

    stroke-linecap: round !important;

    opacity: 1 !important;

    vector-effect: non-scaling-stroke !important;
}

/* Zahl */
body.scene-sh #content .sh-hero-rotation-counter__ring > span {
    position: relative !important;
    z-index: 10 !important;

    width: 44px !important;
    height: 44px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #f5fbfd !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 50% !important;

    box-shadow: none !important;

    font-size: 1.05rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

/* ============================================================
   R220 FINAL – TRANSPARENTER HERO COUNTDOWN
   Kein Kasten / keine zusätzliche Umrandung
   ============================================================ */

body.scene-sh .editorial-lead {
    position: relative !important;
}

/* Counter-Container */
body.scene-sh .sh-hero-rotation-counter {
    position: absolute !important;

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

    width: 82px !important;
    height: 82px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 50% !important;

    box-shadow: none !important;

    z-index: 20 !important;
}

/* Keine Texte neben dem Kreis */
body.scene-sh .sh-hero-rotation-counter__text {
    display: none !important;
}

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

    width: 78px !important;
    height: 78px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 50% !important;

    box-shadow: none !important;
}

/* SVG exakt auf den Kreis legen */
body.scene-sh .sh-hero-rotation-counter__ring svg {
    position: absolute !important;

    inset: 0 !important;

    width: 78px !important;
    height: 78px !important;

    display: block !important;

    transform: rotate(-90deg) !important;

    overflow: visible !important;

    background: transparent !important;
}

/* Hintergrundbahn */
body.scene-sh .sh-hero-rotation-counter__track {
    fill: none !important;

    stroke: rgba(74, 184, 214, .18) !important;
    stroke-width: 3 !important;
}

/* Fortschrittsring */
body.scene-sh .sh-hero-rotation-counter__progress {
    fill: none !important;

    stroke: #4ad8f5 !important;
    stroke-width: 3.5 !important;

    stroke-linecap: round !important;

    transition: stroke-dashoffset .85s linear !important;

    filter: drop-shadow(0 0 3px rgba(74,216,245,.30));
}

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

    z-index: 5 !important;

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

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #f5fbfd !important;

    font-size: 1.15rem !important;
    font-weight: 800 !important;

    line-height: 1 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;
}

/* Alles wirklich transparent halten */
body.scene-sh .sh-hero-rotation-counter::before,
body.scene-sh .sh-hero-rotation-counter::after,
body.scene-sh .sh-hero-rotation-counter__ring::before,
body.scene-sh .sh-hero-rotation-counter__ring::after {
    content: none !important;
    display: none !important;
}

/* ============================================================
   R220 FINAL FINAL
   COUNTER – NUR TRANSPARENTER ANIMIERTER KREIS
   ============================================================ */

/* Äußerer Counter komplett transparent */
html body.scene-sh .editorial-lead
.sh-hero-rotation-counter,
html body.scene-sh .editorial-lead
#sh-hero-rotation-counter {
    position: absolute !important;

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

    width: 82px !important;
    height: 82px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: transparent !important;
    background-color: transparent !important;

    border: 0 !important;
    border-radius: 50% !important;

    outline: 0 !important;

    box-shadow: none !important;

    overflow: visible !important;

    z-index: 50 !important;
}

/* Ring ebenfalls komplett transparent */
html body.scene-sh .sh-hero-rotation-counter
.sh-hero-rotation-counter__ring {
    position: relative !important;

    width: 78px !important;
    height: 78px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: transparent !important;
    background-color: transparent !important;

    border: 0 !important;
    border-radius: 50% !important;

    outline: 0 !important;

    box-shadow: none !important;

    overflow: visible !important;
}

/* SVG */
html body.scene-sh
.sh-hero-rotation-counter__ring > svg {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 78px !important;
    height: 78px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    background: transparent !important;

    border: 0 !important;

    transform: rotate(-90deg) !important;

    overflow: visible !important;

    pointer-events: none !important;
}

/* Hintergrundkreis */
html body.scene-sh
.sh-hero-rotation-counter__track {
    fill: none !important;

    stroke: rgba(74,184,214,.18) !important;

    stroke-width: 3 !important;

    opacity: 1 !important;
}

/* Animierter Kreis */
html body.scene-sh
.sh-hero-rotation-counter__progress {
    fill: none !important;

    stroke: #4ad8f5 !important;

    stroke-width: 3.5 !important;

    stroke-linecap: round !important;

    opacity: 1 !important;

    transition:
        stroke-dashoffset 1s linear !important;

    filter:
        drop-shadow(0 0 3px rgba(74,216,245,.35)) !important;
}

/* Zahl */
html body.scene-sh
.sh-hero-rotation-counter__ring > span {
    position: relative !important;

    z-index: 10 !important;

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

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #f5fbfd !important;

    background: transparent !important;
    background-color: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    outline: 0 !important;

    box-shadow: none !important;

    font-size: 1.1rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

/* Alter Text vollständig entfernen */
html body.scene-sh
.sh-hero-rotation-counter__text {
    display: none !important;

    width: 0 !important;
    height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}

/* Sämtliche alten Pseudo-Elemente entfernen */
html body.scene-sh
.sh-hero-rotation-counter::before,
html body.scene-sh
.sh-hero-rotation-counter::after,
html body.scene-sh
.sh-hero-rotation-counter__ring::before,
html body.scene-sh
.sh-hero-rotation-counter__ring::after {
    content: none !important;
    display: none !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Auch mögliche Wrapper transparent */
html body.scene-sh
.sh-hero-rotation-counter *,
html body.scene-sh
.sh-hero-rotation-counter *::before,
html body.scene-sh
.sh-hero-rotation-counter *::after {
    background-color: transparent !important;
}

/* ============================================================
   R220 FINAL COUNTDOWN COLORS
   15–6 Sekunden  = CYAN
   5–1 Sekunden    = MAGENTA
   ============================================================ */

html body.scene-sh
.sh-hero-rotation-counter__progress {
    stroke: #4ad8f5 !important;

    transition:
        stroke-dashoffset 1s linear,
        stroke .25s ease,
        filter .25s ease !important;

    filter:
        drop-shadow(0 0 3px rgba(74,216,245,.38)) !important;
}

/* Letzte 5 Sekunden */
html body.scene-sh
.sh-hero-rotation-counter__progress.is-final-countdown {
    stroke: #ff28d7 !important;

    filter:
        drop-shadow(0 0 5px rgba(255,40,215,.60)) !important;
}

/* Die letzten 5 Sekunden bekommen zusätzlich
   eine dezente pulsierende Leuchtwirkung */
@keyframes sh-final-countdown-glow {

    0% {
        filter:
            drop-shadow(0 0 3px rgba(255,40,215,.40));
    }

    50% {
        filter:
            drop-shadow(0 0 8px rgba(255,40,215,.85));
    }

    100% {
        filter:
            drop-shadow(0 0 3px rgba(255,40,215,.40));
    }
}

html body.scene-sh
.sh-hero-rotation-counter__progress.is-final-countdown {
    animation:
        sh-final-countdown-glow 1s ease-in-out infinite !important;
}

/* Zahl in den letzten 5 Sekunden ebenfalls leicht magenta */
html body.scene-sh
.sh-hero-rotation-counter__ring > span {
    transition:
        color .25s ease,
        transform .25s ease !important;
}

html body.scene-sh
.sh-hero-rotation-counter__ring > span.is-final-countdown {
    color: #ff72e6 !important;

    transform: scale(1.08) !important;
}

@media (prefers-reduced-motion: reduce) {

    html body.scene-sh
    .sh-hero-rotation-counter__progress.is-final-countdown {
        animation: none !important;
    }

    html body.scene-sh
    .sh-hero-rotation-counter__progress {
        transition: stroke .25s ease !important;
    }
}


/* ============================================================
   R220 – FINAL ANIMATED COUNTDOWN
   ============================================================ */

html body.scene-sh
.sh-hero-rotation-counter__ring > svg {
    position: absolute !important;
    inset: 0 !important;

    width: 78px !important;
    height: 78px !important;

    display: block !important;

    background: transparent !important;
    border: 0 !important;

    transform: rotate(-90deg) !important;

    overflow: visible !important;

    pointer-events: none !important;
}

html body.scene-sh
.sh-hero-rotation-counter__progress {
    fill: none !important;

    stroke: #4ad8f5 !important;

    stroke-width: 3.5 !important;

    stroke-linecap: round !important;

    transition:
        stroke-dashoffset 1s linear,
        stroke .25s ease,
        filter .25s ease !important;

    opacity: 1 !important;
}

html body.scene-sh
.sh-hero-rotation-counter__progress.is-final-countdown {
    animation: sh-countdown-pulse 1s ease-in-out infinite !important;
}

@keyframes sh-countdown-pulse {
    0% {
        opacity: .72;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: .72;
    }
}

html body.scene-sh
.sh-hero-rotation-counter__ring > span {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    transition:
        color .25s ease,
        transform .25s ease !important;
}

@media (prefers-reduced-motion: reduce) {

    html body.scene-sh
    .sh-hero-rotation-counter__progress {
        transition: none !important;
        animation: none !important;
    }
}


/* R220 FINAL – SVG PROGRESS FORCE */

html body.scene-sh
#sh-hero-rotation-counter
.sh-hero-rotation-counter__ring {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html body.scene-sh
#sh-hero-rotation-counter
.sh-hero-rotation-counter__ring svg {
    display: block !important;

    position: absolute !important;

    inset: 0 !important;

    width: 78px !important;
    height: 78px !important;

    background: transparent !important;

    border: 0 !important;

    overflow: visible !important;

    transform: rotate(-90deg) !important;
}

html body.scene-sh
#sh-hero-rotation-counter
.sh-hero-rotation-counter__track {
    fill: none !important;
    stroke: rgba(74,184,214,.18) !important;
    stroke-width: 3 !important;
}

html body.scene-sh
#sh-hero-rotation-counter
.sh-hero-rotation-counter__progress {
    fill: none !important;
    stroke: #4ad8f5 !important;

    stroke-width: 3.5 !important;

    stroke-linecap: round !important;

    opacity: 1 !important;

    visibility: visible !important;

    display: block !important;
}


/* ============================================================
   R220 FINAL – OUTER EDGE COUNTDOWN
   Ring liegt exakt am äußeren Rand
   ============================================================ */

html body.scene-sh
#sh-hero-rotation-counter {
    width: 82px !important;
    height: 82px !important;

    background: transparent !important;
    background-color: transparent !important;

    border: 0 !important;
    box-shadow: none !important;

    overflow: visible !important;
}

html body.scene-sh
#sh-hero-rotation-counter
.sh-hero-rotation-counter__ring {
    width: 82px !important;
    height: 82px !important;

    background: transparent !important;
    background-color: transparent !important;

    border: 0 !important;
    box-shadow: none !important;

    border-radius: 50% !important;

    overflow: visible !important;
}

html body.scene-sh
#sh-hero-rotation-counter
.sh-hero-rotation-counter__ring svg {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 82px !important;
    height: 82px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;

    transform: rotate(-90deg) !important;

    overflow: visible !important;
}

html body.scene-sh
#sh-hero-rotation-counter
.sh-hero-rotation-counter__track {
    fill: none !important;

    stroke: rgba(74,184,214,.18) !important;

    stroke-width: 3 !important;
}

html body.scene-sh
#sh-hero-rotation-counter
.sh-hero-rotation-counter__progress {
    fill: none !important;

    stroke: #4ad8f5 !important;

    stroke-width: 3.5 !important;

    stroke-linecap: round !important;

    visibility: visible !important;

    opacity: 1 !important;
}

/* Kein dunkler Kreis hinter dem Ring */
html body.scene-sh
#sh-hero-rotation-counter::before,
html body.scene-sh
#sh-hero-rotation-counter::after,
html body.scene-sh
#sh-hero-rotation-counter
.sh-hero-rotation-counter__ring::before,
html body.scene-sh
#sh-hero-rotation-counter
.sh-hero-rotation-counter__ring::after {
    display: none !important;
    content: none !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}


/* ============================================================
   R220 FINAL – COUNTER RING OUTER EDGE
   82px SVG / Mittelpunkt 41 / Radius 38
   ============================================================ */

html body.scene-sh
#sh-hero-rotation-counter
.sh-hero-rotation-counter__ring {
    position: relative !important;

    width: 82px !important;
    height: 82px !important;

    min-width: 82px !important;
    min-height: 82px !important;

    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    overflow: visible !important;
}

html body.scene-sh
#sh-hero-rotation-counter
.sh-hero-rotation-counter__ring svg {
    position: absolute !important;

    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    left: 0 !important;

    width: 82px !important;
    height: 82px !important;

    min-width: 82px !important;
    min-height: 82px !important;

    padding: 0 !important;
    margin: 0 !important;

    display: block !important;

    background: transparent !important;
    border: 0 !important;

    overflow: visible !important;

    transform: rotate(-90deg) !important;
    transform-origin: 41px 41px !important;
}

html body.scene-sh
#sh-hero-rotation-counter
.sh-hero-rotation-counter__track {
    fill: none !important;

    cx: 41 !important;
    cy: 41 !important;
    r: 38 !important;

    stroke: rgba(74,184,214,.18) !important;
    stroke-width: 3 !important;
}

html body.scene-sh
#sh-hero-rotation-counter
.sh-hero-rotation-counter__progress {
    fill: none !important;

    cx: 41 !important;
    cy: 41 !important;
    r: 38 !important;

    stroke: #4ad8f5 !important;
    stroke-width: 3.5 !important;
    stroke-linecap: round !important;

    visibility: visible !important;
    opacity: 1 !important;

    display: block !important;
}


/* ============================================================
   R220 FINAL – RING EXAKT UM DIE ZAHL
   ============================================================ */

/* Counter selbst */
html body.scene-sh
#sh-hero-rotation-counter {
    width: 82px !important;
    height: 82px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    overflow: visible !important;
}

/* Ring-Wrapper ist das einzige Bezugssystem */
html body.scene-sh
#sh-hero-rotation-counter
.sh-hero-rotation-counter__ring {
    position: relative !important;

    width: 82px !important;
    height: 82px !important;

    flex: 0 0 82px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    overflow: visible !important;
}

/*
 * WICHTIG:
 * SVG NICHT mehr absolute positionieren.
 * Dadurch bleibt es exakt im Zentrum des Ring-Wrappers.
 */
html body.scene-sh
#sh-hero-rotation-counter
.sh-hero-rotation-counter__ring > svg {
    position: relative !important;

    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    display: block !important;

    width: 82px !important;
    height: 82px !important;

    min-width: 82px !important;
    min-height: 82px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    overflow: visible !important;

    transform: rotate(-90deg) !important;
    transform-origin: center center !important;

    flex: 0 0 82px !important;
}

/* Hintergrundbahn */
html body.scene-sh
#sh-hero-rotation-counter
.sh-hero-rotation-counter__track {
    fill: none !important;

    stroke: rgba(74,184,214,.18) !important;

    stroke-width: 3 !important;

    cx: 41 !important;
    cy: 41 !important;
    r: 38 !important;
}

/* Animierter Außenring */
html body.scene-sh
#sh-hero-rotation-counter
.sh-hero-rotation-counter__progress {
    fill: none !important;

    stroke: #4ad8f5 !important;

    stroke-width: 3.5 !important;

    stroke-linecap: round !important;

    cx: 41 !important;
    cy: 41 !important;
    r: 38 !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/*
 * Zahl exakt über dem SVG zentrieren.
 */
html body.scene-sh
#sh-hero-rotation-counter
.sh-hero-rotation-counter__ring > span {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    z-index: 10 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    color: #f5fbfd !important;

    font-size: 1.1rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

/* Kein alter Hintergrund */
html body.scene-sh
#sh-hero-rotation-counter,
html body.scene-sh
#sh-hero-rotation-counter *,
html body.scene-sh
#sh-hero-rotation-counter::before,
html body.scene-sh
#sh-hero-rotation-counter::after,
html body.scene-sh
#sh-hero-rotation-counter
.sh-hero-rotation-counter__ring::before,
html body.scene-sh
#sh-hero-rotation-counter
.sh-hero-rotation-counter__ring::after {
    box-shadow: none !important;
}


/* ============================================================
   R220 FINAL – CSS RING
   Kein SVG mehr für die sichtbare Animation.
   Ring und Zahl haben garantiert denselben Mittelpunkt.
   ============================================================ */

html body.scene-sh
#sh-hero-rotation-counter
.sh-hero-rotation-counter__ring {

    position: relative !important;

    width: 82px !important;
    height: 82px !important;

    min-width: 82px !important;
    min-height: 82px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;
    box-shadow: none !important;

    overflow: visible !important;

    --countdown-progress: 100%;
    --countdown-color: #4ad8f5;
}

/*
 * SVG vollständig deaktivieren.
 * Der CSS-Ring übernimmt ab jetzt die komplette Darstellung.
 */
html body.scene-sh
#sh-hero-rotation-counter
.sh-hero-rotation-counter__ring > svg {

    display: none !important;
}

/*
 * Äußerer Fortschrittsring.
 *
 * Der Mittelpunkt ist exakt der Mittelpunkt des 82px-Containers.
 */
html body.scene-sh
#sh-hero-rotation-counter
.sh-hero-rotation-counter__ring::before {

    content: "" !important;

    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 82px !important;
    height: 82px !important;

    box-sizing: border-box !important;

    border-radius: 50% !important;

    background:
        conic-gradient(
            from -90deg,
            var(--countdown-color)
                var(--countdown-progress),
            rgba(74,184,214,.16)
                var(--countdown-progress)
        ) !important;

    /*
     * Loch in der Mitte:
     * dadurch entsteht ein sauberer Ring.
     */
    -webkit-mask:
        radial-gradient(
            farthest-side,
            transparent calc(100% - 4px),
            #000 calc(100% - 3.5px)
        ) !important;

    mask:
        radial-gradient(
            farthest-side,
            transparent calc(100% - 4px),
            #000 calc(100% - 3.5px)
        ) !important;

    border: 0 !important;

    box-shadow:
        0 0 5px
        color-mix(
            in srgb,
            var(--countdown-color) 35%,
            transparent
        ) !important;

    transition:
        background .25s ease,
        box-shadow .25s ease !important;

    z-index: 1 !important;
}

/*
 * Zahl exakt in die Mitte.
 */
html body.scene-sh
#sh-hero-rotation-counter
.sh-hero-rotation-counter__ring > span {

    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 82px !important;
    height: 82px !important;

    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;
    box-shadow: none !important;

    color: #f5fbfd !important;

    font-size: 1.1rem !important;
    font-weight: 800 !important;

    line-height: 1 !important;

    z-index: 5 !important;

    transition:
        color .25s ease,
        transform .25s ease !important;
}

/*
 * Letzte 5 Sekunden:
 * Magenta + leichtes Pulsieren.
 */
html body.scene-sh
#sh-hero-rotation-counter
.sh-hero-rotation-counter__ring.is-final-countdown::before {

    animation:
        sh-css-ring-final-pulse 1s ease-in-out infinite !important;
}

@keyframes sh-css-ring-final-pulse {

    0% {
        opacity: .78;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.025);
    }

    100% {
        opacity: .78;
        transform: scale(1);
    }
}

/*
 * Keine alten SVG-/Pseudo-Elemente.
 */
html body.scene-sh
#sh-hero-rotation-counter
.sh-hero-rotation-counter__ring::after {

    content: none !important;
    display: none !important;
}

/*
 * Counter selbst vollständig transparent.
 */
html body.scene-sh
#sh-hero-rotation-counter {

    background: transparent !important;
    background-color: transparent !important;

    border: 0 !important;
    box-shadow: none !important;

    outline: 0 !important;
}

/* ============================================================
   R220 FINAL15
   COUNTER KOMPLETT NEU
   ============================================================ */

/*
 * Der Counter selbst ist das Koordinatensystem.
 */
html body.scene-sh
#sh-hero-rotation-counter {

    position: absolute !important;

    width: 82px !important;
    height: 82px !important;

    min-width: 82px !important;
    min-height: 82px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    background: transparent !important;
    background-color: transparent !important;

    border: 0 !important;
    border-radius: 50% !important;

    box-shadow: none !important;

    overflow: visible !important;

    --countdown-progress: 100%;
    --countdown-color: #4ad8f5;
}

/*
 * ALLE alten Ring-Elemente aus der Darstellung entfernen.
 */
html body.scene-sh
#sh-hero-rotation-counter
.sh-hero-rotation-counter__ring {

    position: static !important;

    width: 0 !important;
    height: 0 !important;

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

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    overflow: visible !important;
}

html body.scene-sh
#sh-hero-rotation-counter
.sh-hero-rotation-counter__ring > svg {

    display: none !important;
}

/*
 * ============================================================
 * DER NEUE RING
 * ============================================================
 *
 * Der Ring sitzt direkt auf #sh-hero-rotation-counter.
 *
 * Deshalb:
 * Mittelpunkt = exakt Counter-Mittelpunkt
 * Zahl = exakt Counter-Mittelpunkt
 */
html body.scene-sh
#sh-hero-rotation-counter::before {

    content: "" !important;

    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 82px !important;
    height: 82px !important;

    box-sizing: border-box !important;

    border-radius: 50% !important;

    background:
        conic-gradient(
            from -90deg,
            var(--countdown-color)
                0%,
            var(--countdown-color)
                var(--countdown-progress),
            rgba(74,184,214,.16)
                var(--countdown-progress),
            rgba(74,184,214,.16)
                100%
        ) !important;

    /*
     * Loch in der Mitte.
     */
    -webkit-mask:
        radial-gradient(
            circle,
            transparent 0,
            transparent 34px,
            #000 35px,
            #000 100%
        ) !important;

    mask:
        radial-gradient(
            circle,
            transparent 0,
            transparent 34px,
            #000 35px,
            #000 100%
        ) !important;

    border: 0 !important;

    box-shadow:
        0 0 7px
        rgba(74,216,245,.28) !important;

    pointer-events: none !important;

    z-index: 20 !important;

    transition:
        background .20s linear,
        box-shadow .20s ease !important;
}

/*
 * Zahl:
 * direkt auf dem Counter,
 * exakt Mittelpunkt.
 */
html body.scene-sh
#sh-hero-rotation-counter
> .sh-hero-rotation-counter__ring > span,
html body.scene-sh
#sh-hero-rotation-counter
> span {

    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 82px !important;
    height: 82px !important;

    box-sizing: border-box !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 50% !important;

    box-shadow: none !important;

    color: #f5fbfd !important;

    font-size: 1.1rem !important;
    font-weight: 800 !important;

    line-height: 1 !important;

    z-index: 30 !important;

    pointer-events: none !important;
}

/*
 * Letzte fünf Sekunden:
 * Magenta + sanftes Pulsieren.
 */
html body.scene-sh
#sh-hero-rotation-counter.is-final-countdown::before {

    animation:
        sh-r220-final-pulse 1s ease-in-out infinite !important;
}

@keyframes sh-r220-final-pulse {

    0% {
        filter:
            drop-shadow(
                0 0 3px
                rgba(255,40,215,.45)
            );
    }

    50% {
        filter:
            drop-shadow(
                0 0 10px
                rgba(255,40,215,.90)
            );
    }

    100% {
        filter:
            drop-shadow(
                0 0 3px
                rgba(255,40,215,.45)
            );
    }
}

/*
 * Kein zweites Pseudo-Element.
 */
html body.scene-sh
#sh-hero-rotation-counter::after {

    content: none !important;
    display: none !important;
}

/*
 * Alte Text-/Counterelemente vollständig unsichtbar.
 */
html body.scene-sh
#sh-hero-rotation-counter
.sh-hero-rotation-counter__text {

    display: none !important;
}

/*
 * Reduced Motion.
 */
@media (prefers-reduced-motion: reduce) {

    html body.scene-sh
    #sh-hero-rotation-counter.is-final-countdown::before {

        animation: none !important;
    }
}

/* ============================================================
   R220 CLEAN COUNTER – FINAL
   ============================================================ */

html body.scene-sh #sh-hero-rotation-counter {
    position: absolute !important;

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

    width: 82px !important;
    height: 82px !important;

    min-width: 82px !important;
    min-height: 82px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    background: transparent !important;
    background-color: transparent !important;

    border: 0 !important;
    border-radius: 50% !important;

    box-shadow: none !important;

    overflow: visible !important;

    z-index: 50 !important;
}

/* Alle alten Counter-Inhalte */
html body.scene-sh
#sh-hero-rotation-counter
.sh-hero-rotation-counter__text,
html body.scene-sh
#sh-hero-rotation-counter
.sh-hero-rotation-counter__ring {
    display: none !important;
}

/* Unser eigener Counter */
html body.scene-sh
#sh-hero-rotation-counter
.r220-countdown {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 82px !important;
    height: 82px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 50% !important;

    box-shadow: none !important;

    overflow: visible !important;
}

/* SVG exakt mittig */
html body.scene-sh
#sh-hero-rotation-counter
.r220-countdown svg {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 82px !important;
    height: 82px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    background: transparent !important;

    border: 0 !important;

    transform: rotate(-90deg) !important;

    transform-origin: 41px 41px !important;

    overflow: visible !important;
}

/* Hintergrundbahn */
html body.scene-sh
#sh-hero-rotation-counter
.r220-countdown-track {
    fill: none !important;

    stroke: rgba(74,184,214,.16) !important;

    stroke-width: 3 !important;
}

/* Animierter Ring */
html body.scene-sh
#sh-hero-rotation-counter
.r220-countdown-progress {
    fill: none !important;

    stroke: #4ad8f5 !important;

    stroke-width: 3.5 !important;

    stroke-linecap: round !important;

    stroke-dasharray: 232.477856 !important;

    stroke-dashoffset: 0 !important;

    opacity: 1 !important;

    visibility: visible !important;

    transition:
        stroke-dashoffset 1s linear,
        stroke .25s ease !important;
}

/* Zahl */
html body.scene-sh
#sh-hero-rotation-counter
.r220-countdown-number {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 82px !important;
    height: 82px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 50% !important;

    box-shadow: none !important;

    color: #f5fbfd !important;

    font-size: 1.1rem !important;
    font-weight: 800 !important;

    line-height: 1 !important;

    z-index: 10 !important;
}

/* Letzte fünf Sekunden */
html body.scene-sh
#sh-hero-rotation-counter
.r220-countdown.r220-final-countdown
.r220-countdown-progress {
    stroke: #ff28d7 !important;
}

/* Magenta-Puls */
html body.scene-sh
#sh-hero-rotation-counter
.r220-countdown.r220-final-countdown
.r220-countdown-progress {
    animation: r220-magenta-ring 1s ease-in-out infinite !important;
}

@keyframes r220-magenta-ring {

    0% {
        filter:
            drop-shadow(
                0 0 2px
                rgba(255,40,215,.35)
            );
    }

    50% {
        filter:
            drop-shadow(
                0 0 8px
                rgba(255,40,215,.9)
            );
    }

    100% {
        filter:
            drop-shadow(
                0 0 2px
                rgba(255,40,215,.35)
            );
    }
}

/* Kein Hintergrundquadrat */
html body.scene-sh
#sh-hero-rotation-counter::before,
html body.scene-sh
#sh-hero-rotation-counter::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}