/* =========================================================
   SECTION 3A – ISOLATED RESET
========================================================= */
.oct-section-3a-ideal-v5,
.oct-section-3a-ideal-v5 * {
    box-sizing: border-box !important;
}

.oct-section-3a-ideal-v5 {
    --oct-yellow: #FFE200;
    --oct-ink: #07111b;
    --oct-muted: #374452;
    --oct-line: rgba(7, 17, 27, 0.14);
    --oct-soft: rgba(7, 17, 27, 0.055);

    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    width: 100% !important;
    min-height: 100vh !important;
    padding: clamp(56px, 7vh, 88px) 20px clamp(48px, 6vh, 76px) 20px !important;
    font-family: 'Roboto', Arial, sans-serif !important;
    color: var(--oct-ink) !important;

    background:
        radial-gradient(circle at 51% 46%, rgba(255, 226, 0, 0.10) 0%, rgba(255, 226, 0, 0.035) 25%, transparent 53%),
        radial-gradient(circle at 18% 66%, rgba(7, 17, 27, 0.035) 0%, transparent 36%),
        linear-gradient(180deg, #ffffff 0%, #fbfcfc 48%, #ffffff 100%) !important;
}

/* graues Wellennetz, bewusst ohne gelbe Linien quer über Motor/Text */
.oct-section-3a-ideal-v5::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    opacity: 0.56 !important;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1800' height='850' viewBox='0 0 1800 850'%3E%3Cg fill='none' stroke='%23cfd6dd' stroke-width='1' opacity='.45'%3E%3Cpath d='M-80 102 C 220 20 420 190 710 112 S 1180 70 1510 116 S 1810 74 1940 42'/%3E%3Cpath d='M-80 126 C 220 44 420 214 710 136 S 1180 94 1510 140 S 1810 98 1940 66' opacity='.55'/%3E%3Cpath d='M-80 720 C 240 620 470 818 740 724 S 1160 640 1460 720 S 1760 760 1940 650'/%3E%3Cpath d='M-80 744 C 240 644 470 842 740 748 S 1160 664 1460 744 S 1760 784 1940 674' opacity='.55'/%3E%3Cpath d='M-40 415 C 240 320 520 500 790 406 S 1170 330 1485 404 S 1760 470 1900 386' opacity='.36'/%3E%3C/g%3E%3Cg fill='%23aeb8c2' opacity='.48'%3E%3Ccircle cx='118' cy='770' r='2'/%3E%3Ccircle cx='134' cy='770' r='2'/%3E%3Ccircle cx='150' cy='770' r='2'/%3E%3Ccircle cx='166' cy='770' r='2'/%3E%3Ccircle cx='1680' cy='72' r='2'/%3E%3Ccircle cx='1696' cy='72' r='2'/%3E%3Ccircle cx='1712' cy='72' r='2'/%3E%3Ccircle cx='1728' cy='72' r='2'/%3E%3C/g%3E%3C/svg%3E") !important;
    background-size: cover !important;
    background-position: center center !important;
}

.oct-section-3a-ideal-v5::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 720px !important;
    height: 720px !important;
    transform: translate(-50%, -50%) !important;
    z-index: 0 !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    background:
        radial-gradient(circle, rgba(7,17,27,0.070) 0%, rgba(7,17,27,0.035) 38%, transparent 68%) !important;
    filter: blur(10px) !important;
    opacity: 0.65 !important;
}

/* =========================================================
   LAYOUT
========================================================= */
.oct-section-3a-ideal-v5 .oct3a-wrap {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width:1600px !important;
    min-height: calc(100vh - 150px) !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(330px, 0.86fr) minmax(440px, 1.08fr) minmax(350px, 0.78fr) !important;
    gap: clamp(24px, 2.2vw, 44px) !important;
    align-items: center !important;
}

/* =========================================================
   LEFT COPY
========================================================= */
.oct-section-3a-ideal-v5 .oct3a-copy {
    position: relative !important;
    z-index: 6 !important;
    max-width: 560px !important;
}

.oct-section-3a-ideal-v5 .oct3a-kicker {
    margin: 0 0 22px 0 !important;
    color: var(--oct-ink) !important;
    font-size: 28px !important;
    line-height: 1.12 !important;
    font-weight: 900 !important;
    letter-spacing: 1.8px !important;
    text-transform: uppercase !important;
}

.oct-section-3a-ideal-v5 .oct3a-kicker span {
    display: block !important;
    color: var(--oct-ink) !important;
}

.oct-section-3a-ideal-v5 .oct3a-title {
    margin: 0 !important;
    color: var(--oct-ink) !important;
    font-size: 46px !important;
    line-height: 1.04 !important;
    font-weight: 900 !important;
    letter-spacing: -0.9px !important;
    text-transform: uppercase !important;
}

.oct-section-3a-ideal-v5 .oct3a-line,
.oct-section-3a-ideal-v5 .oct3a-side-line {
    display: block !important;
    width: 70px !important;
    height: 4px !important;
    margin: 25px 0 27px 0 !important;
    background: var(--oct-yellow) !important;
    box-shadow: none !important;
}

.oct-section-3a-ideal-v5 .oct3a-lead {
    margin: 0 !important;
    max-width: 560px !important;
    color: var(--oct-muted) !important;
    font-size: 18px !important;
    line-height: 1.66 !important;
    font-weight: 400 !important;
}

/* mini facts — text only */
.oct-section-3a-ideal-v5 .oct3a-facts {
    margin-top: 42px !important;
    padding-top: 24px !important;
    border-top: 1px solid rgba(7,17,27,0.14) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    max-width: 560px !important;
    column-gap: 0 !important;
}

.oct-section-3a-ideal-v5 .oct3a-fact {
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 0 22px 0 0 !important;
    border-right: 1px solid rgba(7,17,27,0.14) !important;
    text-align: left !important;
}

.oct-section-3a-ideal-v5 .oct3a-fact:last-child {
    border-right: 0 !important;
    padding: 0 0 0 22px !important;
}

.oct-section-3a-ideal-v5 .oct3a-fact svg,
.oct-section-3a-ideal-v5 .oct3a-fact .oct3a-icon-img {
    display: none !important;
}

.oct-section-3a-ideal-v5 .oct3a-fact strong {
    display: block !important;
    color: var(--oct-ink) !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
}

.oct-section-3a-ideal-v5 .oct3a-fact small {
    display: block !important;
    color: var(--oct-muted) !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
    max-width: 28ch !important;
}

.oct-section-3a-ideal-v5 .oct3a-fact--wide strong {
    font-size: 15px !important;
    line-height: 1.2 !important;
    max-width: none !important;
}

.oct-section-3a-ideal-v5 .oct3a-fact svg {
    width: 34px !important;
    height: 34px !important;
    display: block !important;
}

.oct-section-3a-ideal-v5 .oct3a-fact svg * {
    fill: none !important;
    stroke: var(--oct-ink) !important;
    stroke-width: 1.55 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.oct-section-3a-ideal-v5 .oct3a-fact strong {
    display: block !important;
    color: var(--oct-ink) !important;
    font-size: 14px !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
}

.oct-section-3a-ideal-v5 .oct3a-fact small {
    display: block !important;
    color: var(--oct-muted) !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
}

/* =========================================================
   CENTER MOTOR STAGE
========================================================= */
.oct-section-3a-ideal-v5 .oct3a-engine-stage {
    position: relative !important;
    z-index: 5 !important;
    min-height: min(650px, calc(100vh - 170px)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.oct-section-3a-ideal-v5 .oct3a-hud-ring {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: min(620px, 34vw, calc(100vh - 170px)) !important;
    height: min(620px, 34vw, calc(100vh - 170px)) !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    border: 1px solid rgba(255,226,0,0.42) !important;
    box-shadow:
        inset 0 0 0 70px rgba(7,17,27,0.012),
        0 0 52px rgba(255,226,0,0.055) !important;
}

.oct-section-3a-ideal-v5 .oct3a-hud-ring::before {
    content: "" !important;
    position: absolute !important;
    inset: 64px !important;
    border-radius: 50% !important;
    border: 1px dashed rgba(7,17,27,0.16) !important;
}

.oct-section-3a-ideal-v5 .oct3a-hud-ring::after {
    content: "" !important;
    position: absolute !important;
    inset: 26px !important;
    border-radius: 50% !important;
    background: conic-gradient(
        from 210deg,
        transparent 0deg,
        transparent 40deg,
        rgba(255,226,0,0.68) 51deg,
        transparent 63deg,
        transparent 206deg,
        rgba(255,226,0,0.45) 220deg,
        transparent 235deg,
        transparent 360deg
    ) !important;
    -webkit-mask: radial-gradient(circle, transparent 0%, transparent 83%, #000 84%, #000 86%, transparent 87%, transparent 100%) !important;
    mask: radial-gradient(circle, transparent 0%, transparent 83%, #000 84%, #000 86%, transparent 87%, transparent 100%) !important;
}

.oct-section-3a-ideal-v5 .oct3a-engine-shadow {
    position: absolute !important;
    left: 50% !important;
    bottom: 40px !important;
    width: 330px !important;
    height: 54px !important;
    transform: translateX(-50%) !important;
    border-radius: 50% !important;
    background: radial-gradient(ellipse, rgba(7,17,27,0.18) 0%, rgba(7,17,27,0.06) 42%, transparent 72%) !important;
    filter: blur(10px) !important;
    pointer-events: none !important;
}

.oct-section-3a-ideal-v5 .oct3a-engine {
    position: relative !important;
    z-index: 4 !important;
    width: 100% !important;
    height: min(650px, calc(100vh - 170px)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
}

.oct-section-3a-ideal-v5 .oct3a-engine img {
    display: block !important;
    width: auto !important;
    height: min(630px, calc(100vh - 190px)) !important;
    max-width: min(520px, 32vw) !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    filter: drop-shadow(0 35px 48px rgba(7,17,27,0.22)) !important;
    transform: translateZ(0) !important;
    transition: none !important;
    opacity: 1 !important;
}

/* Callouts – bewusst kurze Connector, keine langen Linien über Section */
.oct-section-3a-ideal-v5 .oct3a-callout {
    position: absolute !important;
    z-index: 8 !important;
    min-width: 142px !important;
    padding: 15px 18px 14px 18px !important;
    color: var(--oct-ink) !important;
    background: rgba(255,255,255,0.92) !important;
    border: 1px solid rgba(7,17,27,0.13) !important;
    border-right: 3px solid var(--oct-yellow) !important;
    border-radius: 12px !important;
    box-shadow: 0 18px 34px rgba(7,17,27,0.12) !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
}

.oct-section-3a-ideal-v5 .oct3a-callout small {
    display: block !important;
    margin-top: 5px !important;
    color: var(--oct-muted) !important;
    font-size: 12px !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
}

.oct-section-3a-ideal-v5 .oct3a-callout::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    height: 1px !important;
    width: 78px !important;
    background: rgba(255,226,0,0.95) !important;
}

.oct-section-3a-ideal-v5 .oct3a-callout::after {
    content: "" !important;
    position: absolute !important;
    top: calc(50% - 5px) !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: var(--oct-yellow) !important;
    box-shadow: 0 0 0 7px rgba(255,226,0,0.15) !important;
}

.oct-section-3a-ideal-v5 .oct3a-callout.c1 {
    left: 40px !important;
    top: 150px !important;
}

.oct-section-3a-ideal-v5 .oct3a-callout.c1::before {
    left: 100% !important;
}

.oct-section-3a-ideal-v5 .oct3a-callout.c1::after {
    left: calc(100% + 74px) !important;
}

.oct-section-3a-ideal-v5 .oct3a-callout.c2 {
    right: 8px !important;
    top: 242px !important;
}

.oct-section-3a-ideal-v5 .oct3a-callout.c2::before {
    right: 100% !important;
}

.oct-section-3a-ideal-v5 .oct3a-callout.c2::after {
    right: calc(100% + 74px) !important;
}

.oct-section-3a-ideal-v5 .oct3a-callout.c3 {
    left: 70px !important;
    bottom: 122px !important;
    min-width: 136px !important;
}

.oct-section-3a-ideal-v5 .oct3a-callout.c3::before {
    left: 100% !important;
}

.oct-section-3a-ideal-v5 .oct3a-callout.c3::after {
    left: calc(100% + 74px) !important;
}

.oct-section-3a-ideal-v5 .oct3a-dots {
    position: absolute !important;
    z-index: 8 !important;
    left: 50% !important;
    bottom: 10px !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
}

.oct-section-3a-ideal-v5 .oct3a-dots span {
    width: 8px !important;
    height: 8px !important;
    border-radius: 8px !important;
    background: rgba(7,17,27,0.18) !important;
}

.oct-section-3a-ideal-v5 .oct3a-dots span.active {
    width: 24px !important;
    background: var(--oct-yellow) !important;
}

/* =========================================================
   RIGHT SERVICE CARDS
========================================================= */
.oct-section-3a-ideal-v5 .oct3a-process {
    position: relative !important;
    z-index: 6 !important;
    width: 100% !important;
    max-width: 440px !important;
    justify-self: end !important;
}

.oct-section-3a-ideal-v5 .oct3a-process-head {
    margin-bottom: 32px !important;
}

.oct-section-3a-ideal-v5 .oct3a-process-kicker {
    margin: 0 0 11px 0 !important;
    color: var(--oct-ink) !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    letter-spacing: 1.25px !important;
    text-transform: uppercase !important;
}

.oct-section-3a-ideal-v5 .oct3a-process-title {
    margin: 0 !important;
    color: var(--oct-ink) !important;
    font-size: 28px !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
}

.oct-section-3a-ideal-v5 .oct3a-process-head .oct3a-side-line {
    margin-top: 20px !important;
    margin-bottom: 0 !important;
}

.oct-section-3a-ideal-v5 .oct3a-step-list {
    display: grid !important;
    gap: 18px !important;
}

.oct-section-3a-ideal-v5 .oct3a-step {
    position: relative !important;
    min-height: 116px !important;
    padding: 22px 24px 22px 118px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    overflow: hidden !important;
    color: var(--oct-ink) !important;
    background:
        radial-gradient(circle at 5% 50%, rgba(255,226,0,0.10) 0%, transparent 34%),
        rgba(255,255,255,0.84) !important;
    border: 1px solid rgba(7,17,27,0.20) !important;
    border-right: 2px solid var(--oct-yellow) !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 42px rgba(7,17,27,0.09) !important;
    transition: transform 0.32s ease, box-shadow 0.32s ease, border-color 0.32s ease !important;
}

.oct-section-3a-ideal-v5 .oct3a-step:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(7,17,27,0.32) !important;
    border-right-color: var(--oct-yellow) !important;
    box-shadow: 0 24px 52px rgba(7,17,27,0.13) !important;
}

.oct-section-3a-ideal-v5 .oct3a-step-icon {
    position: absolute !important;
    left: 22px !important;
    top: 50% !important;
    width: 70px !important;
    height: 64px !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,0.82) !important;
    border: 1px solid rgba(7,17,27,0.09) !important;
    box-shadow: inset 0 0 30px rgba(255,226,0,0.055) !important;
}

.oct-section-3a-ideal-v5 .oct3a-step-icon svg {
    width: 44px !important;
    height: 44px !important;
    display: block !important;
}

.oct-section-3a-ideal-v5 .oct3a-step-icon svg * {
    fill: none !important;
    stroke: var(--oct-ink) !important;
    stroke-width: 1.45 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.oct-section-3a-ideal-v5 .oct3a-step h3 {
    margin: 0 0 8px 0 !important;
    color: var(--oct-ink) !important;
    font-size: 22px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
}

.oct-section-3a-ideal-v5 .oct3a-step p {
    margin: 0 !important;
    color: var(--oct-muted) !important;
    font-size: 15px !important;
    line-height: 1.48 !important;
    font-weight: 400 !important;
}

/* =========================================================
   RESPONSIVE / SEITENGRÖSSE
========================================================= */

@media (min-width: 1600px) {
    .oct-section-3a-ideal-v5 .oct3a-wrap {
        max-width: 1640px !important;
        grid-template-columns: minmax(380px, 0.86fr) minmax(520px, 1.08fr) minmax(410px, 0.78fr) !important;
        gap: 52px !important;
    }

    .oct-section-3a-ideal-v5 .oct3a-title {
        font-size: 50px !important;
    }

    .oct-section-3a-ideal-v5 .oct3a-engine img {
        height: min(650px, calc(100vh - 190px)) !important;
        max-width: min(560px, 32vw) !important;
    }
}


@media (max-width: 1320px) {
    .oct-section-3a-ideal-v5 {
        padding-top: 58px !important;
        padding-bottom: 58px !important;
    }

    .oct-section-3a-ideal-v5 .oct3a-wrap {
        grid-template-columns: minmax(300px, 0.82fr) minmax(390px, 1fr) minmax(330px, 0.76fr) !important;
        gap: 26px !important;
    }

    .oct-section-3a-ideal-v5 .oct3a-title {
        font-size: 40px !important;
    }

    .oct-section-3a-ideal-v5 .oct3a-kicker {
        font-size: 24px !important;
    }

    .oct-section-3a-ideal-v5 .oct3a-hud-ring {
        width: min(560px, 38vw, calc(100vh - 160px)) !important;
        height: min(560px, 38vw, calc(100vh - 160px)) !important;
    }

    .oct-section-3a-ideal-v5 .oct3a-engine img {
        height: min(590px, calc(100vh - 180px)) !important;
        max-width: min(450px, 34vw) !important;
        max-height: none !important;
    }
}

@media (max-width: 1199px) {
    .oct-section-3a-ideal-v5 {
        padding: 76px 18px 82px 18px !important;
    }

    .oct-section-3a-ideal-v5 .oct3a-wrap {
        max-width: 900px !important;
        grid-template-columns: 1fr !important;
        gap: 48px !important;
    }

    .oct-section-3a-ideal-v5 .oct3a-copy,
    .oct-section-3a-ideal-v5 .oct3a-process {
        max-width: 760px !important;
        justify-self: start !important;
    }

    .oct-section-3a-ideal-v5 .oct3a-engine-stage {
        min-height: 600px !important;
        order: 2 !important;
    }

    .oct-section-3a-ideal-v5 .oct3a-process {
        order: 3 !important;
    }
}

@media (max-width: 767px) {
    .oct-section-3a-ideal-v5 {
        padding: 64px 16px 72px 16px !important;
    }

    .oct-section-3a-ideal-v5 .oct3a-kicker {
        font-size: 18px !important;
        letter-spacing: 1.25px !important;
    }

    .oct-section-3a-ideal-v5 .oct3a-title {
        font-size: 32px !important;
    }

    .oct-section-3a-ideal-v5 .oct3a-lead {
        font-size: 16px !important;
    }

    .oct-section-3a-ideal-v5 .oct3a-facts {
        grid-template-columns: 1fr !important;
        max-width: 420px !important;
        gap: 18px !important;
        border-top: 0 !important;
        padding-top: 0 !important;
    }

    .oct-section-3a-ideal-v5 .oct3a-fact,
    .oct-section-3a-ideal-v5 .oct3a-fact:last-child {
        border-right: 0 !important;
        border-bottom: 1px solid rgba(7,17,27,0.12) !important;
        padding: 0 0 18px 0 !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    .oct-section-3a-ideal-v5 .oct3a-engine-stage {
        min-height: 520px !important;
    }

    .oct-section-3a-ideal-v5 .oct3a-hud-ring {
        width: 430px !important;
        height: 430px !important;
    }

    .oct-section-3a-ideal-v5 .oct3a-engine {
        height: 520px !important;
    }

    .oct-section-3a-ideal-v5 .oct3a-engine img {
        height: 500px !important;
        max-width: 330px !important;
        max-height: none !important;
    }

    .oct-section-3a-ideal-v5 .oct3a-callout {
        transform: scale(0.82) !important;
        transform-origin: center !important;
    }

    .oct-section-3a-ideal-v5 .oct3a-callout.c1 {
        left: -4px !important;
        top: 110px !important;
    }

    .oct-section-3a-ideal-v5 .oct3a-callout.c2 {
        right: -10px !important;
        top: 210px !important;
    }

    .oct-section-3a-ideal-v5 .oct3a-callout.c3 {
        left: 12px !important;
        bottom: 110px !important;
    }

    .oct-section-3a-ideal-v5 .oct3a-callout::before,
    .oct-section-3a-ideal-v5 .oct3a-callout::after {
        display: none !important;
    }

    .oct-section-3a-ideal-v5 .oct3a-process-title {
        font-size: 24px !important;
    }

    .oct-section-3a-ideal-v5 .oct3a-step {
        padding: 18px 18px 18px 92px !important;
    }

    .oct-section-3a-ideal-v5 .oct3a-step-icon {
        left: 16px !important;
        width: 58px !important;
        height: 56px !important;
    }
}




/* =========================================================
   SECTION 3A V22 – CLEAN WHITE / WAVE BACKGROUND / REAL HUD RINGS
   - kein gelber Fleck hinter dem Motor
   - Wellenhintergrund wieder sichtbarer
   - mehrere rotierende Halbkreis-/HUD-Segmente hinter dem Motor
   - Servicekarten: normal schwarzer Rahmen, Hover wird goldgelb als Verlauf
   - Icons bleiben sichtbar, keine grauen Kartenflächen
========================================================= */

/* Weißer Premium-Hintergrund ohne gelben Fleck */
.oct-section-3a-ideal-v5{
    background:
        radial-gradient(circle at 50% 48%, rgba(7,17,27,0.050) 0%, rgba(7,17,27,0.020) 31%, transparent 58%),
        linear-gradient(180deg, #ffffff 0%, #fcfcfb 48%, #ffffff 100%) !important;
}

/* Sichtbare, ruhige Wellenlinien + dezente technische Punkte */
.oct-section-3a-ideal-v5::before{
    opacity:0.82 !important;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1900' height='900' viewBox='0 0 1900 900'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cg stroke='%23cfd6dd' stroke-width='1' opacity='.56'%3E%3Cpath d='M-120 106 C 160 42 350 158 610 112 S 1040 42 1320 100 S 1700 162 2020 74'/%3E%3Cpath d='M-120 132 C 160 68 350 184 610 138 S 1040 68 1320 126 S 1700 188 2020 100' opacity='.52'/%3E%3Cpath d='M-120 158 C 160 94 350 210 610 164 S 1040 94 1320 152 S 1700 214 2020 126' opacity='.38'/%3E%3Cpath d='M-130 392 C 125 318 365 470 628 402 S 1050 320 1338 400 S 1660 482 2010 378' opacity='.34'/%3E%3Cpath d='M-140 720 C 190 622 430 804 720 724 S 1160 642 1464 718 S 1760 782 2020 650'/%3E%3Cpath d='M-140 748 C 190 650 430 832 720 752 S 1160 670 1464 746 S 1760 810 2020 678' opacity='.54'/%3E%3Cpath d='M-140 776 C 190 678 430 860 720 780 S 1160 698 1464 774 S 1760 838 2020 706' opacity='.36'/%3E%3C/g%3E%3Cg stroke='%23e3b900' stroke-width='1.15' opacity='.24'%3E%3Cpath d='M-160 655 C 190 610 488 650 800 588 S 1325 500 2020 560'/%3E%3Cpath d='M-160 135 C 250 102 520 130 860 88 S 1410 34 2020 70' opacity='.55'/%3E%3C/g%3E%3Cg stroke='%23dfe5ea' stroke-width='.8' opacity='.40'%3E%3Cpath d='M-80 250 C 230 210 482 268 780 238 S 1320 180 1980 236'/%3E%3Cpath d='M-90 835 C 260 790 520 834 850 798 S 1380 748 2010 806'/%3E%3C/g%3E%3C/g%3E%3Cg fill='%23aeb8c2' opacity='.54'%3E%3Ccircle cx='112' cy='780' r='2.2'/%3E%3Ccircle cx='132' cy='780' r='2.2'/%3E%3Ccircle cx='152' cy='780' r='2.2'/%3E%3Ccircle cx='172' cy='780' r='2.2'/%3E%3Ccircle cx='1690' cy='84' r='2.2'/%3E%3Ccircle cx='1710' cy='84' r='2.2'/%3E%3Ccircle cx='1730' cy='84' r='2.2'/%3E%3Ccircle cx='1750' cy='84' r='2.2'/%3E%3C/g%3E%3C/svg%3E") !important;
    background-size: cover !important;
    background-position: center center !important;
}

/* kein gelber/schmutziger Glow hinter dem Motor */
.oct-section-3a-ideal-v5::after{
    width:720px !important;
    height:720px !important;
    background:
        radial-gradient(circle, rgba(7,17,27,0.045) 0%, rgba(7,17,27,0.022) 34%, transparent 66%) !important;
    filter:blur(16px) !important;
    opacity:.54 !important;
}

/* Motor-HUD: mehrere rotierende Halbkreise, sichtbar aber edel */
.oct-section-3a-ideal-v5 .oct3a-hud-ring{
    z-index:2 !important;
    border:0 !important;
    box-shadow:none !important;
    opacity:1 !important;
    background:
        radial-gradient(circle, transparent 0%, transparent 69%, rgba(7,17,27,.10) 69.5%, transparent 70.2%, transparent 100%),
        conic-gradient(from 216deg,
            transparent 0deg,
            transparent 18deg,
            rgba(120,132,144,.40) 21deg,
            rgba(120,132,144,.16) 48deg,
            transparent 56deg,
            transparent 132deg,
            rgba(255,226,0,.58) 138deg,
            rgba(255,226,0,.20) 162deg,
            transparent 170deg,
            transparent 238deg,
            rgba(7,17,27,.26) 244deg,
            rgba(7,17,27,.08) 265deg,
            transparent 274deg,
            transparent 360deg) !important;
    -webkit-mask:radial-gradient(circle, transparent 0%, transparent 70%, #000 70.6%, #000 73.2%, transparent 74%, transparent 100%) !important;
    mask:radial-gradient(circle, transparent 0%, transparent 70%, #000 70.6%, #000 73.2%, transparent 74%, transparent 100%) !important;
    animation:oct3aHudOuterRotateV22 54s linear infinite !important;
}

.oct-section-3a-ideal-v5 .oct3a-hud-ring::before{
    content:"" !important;
    position:absolute !important;
    inset:46px !important;
    border-radius:50% !important;
    border:0 !important;
    background:
        radial-gradient(circle, transparent 0%, transparent 77%, rgba(7,17,27,.11) 77.6%, transparent 78.4%, transparent 100%),
        conic-gradient(from 42deg,
            transparent 0deg,
            transparent 30deg,
            rgba(7,17,27,.18) 34deg,
            rgba(7,17,27,.06) 58deg,
            transparent 68deg,
            transparent 162deg,
            rgba(170,182,194,.32) 168deg,
            rgba(170,182,194,.10) 196deg,
            transparent 208deg,
            transparent 286deg,
            rgba(255,226,0,.36) 292deg,
            rgba(255,226,0,.12) 312deg,
            transparent 322deg,
            transparent 360deg) !important;
    -webkit-mask:radial-gradient(circle, transparent 0%, transparent 76%, #000 76.6%, #000 79.2%, transparent 80%, transparent 100%) !important;
    mask:radial-gradient(circle, transparent 0%, transparent 76%, #000 76.6%, #000 79.2%, transparent 80%, transparent 100%) !important;
    animation:oct3aHudInnerRotateV22 72s linear infinite reverse !important;
}

.oct-section-3a-ideal-v5 .oct3a-hud-ring::after{
    content:"" !important;
    position:absolute !important;
    inset:88px !important;
    border-radius:50% !important;
    background:
        repeating-conic-gradient(from 0deg,
            rgba(7,17,27,.20) 0deg,
            rgba(7,17,27,.20) 1.3deg,
            transparent 1.3deg,
            transparent 7.8deg),
        conic-gradient(from 140deg,
            transparent 0deg,
            transparent 54deg,
            rgba(255,226,0,.34) 62deg,
            transparent 74deg,
            transparent 232deg,
            rgba(150,160,170,.28) 240deg,
            transparent 254deg,
            transparent 360deg) !important;
    -webkit-mask:radial-gradient(circle, transparent 0%, transparent 82%, #000 82.8%, #000 84.2%, transparent 85%, transparent 100%) !important;
    mask:radial-gradient(circle, transparent 0%, transparent 82%, #000 82.8%, #000 84.2%, transparent 85%, transparent 100%) !important;
    opacity:.72 !important;
    animation:oct3aHudTickRotateV22 96s linear infinite !important;
}

@keyframes oct3aHudOuterRotateV22{
    from{ transform:translate(-50%, -50%) rotate(0deg); }
    to{ transform:translate(-50%, -50%) rotate(360deg); }
}

@keyframes oct3aHudInnerRotateV22{
    from{ transform:rotate(0deg); }
    to{ transform:rotate(360deg); }
}

@keyframes oct3aHudTickRotateV22{
    from{ transform:rotate(360deg); }
    to{ transform:rotate(0deg); }
}

/* Schatten neutral/silber, kein Gelb */
.oct-section-3a-ideal-v5 .oct3a-engine-shadow{
    background:radial-gradient(ellipse, rgba(7,17,27,.16) 0%, rgba(7,17,27,.055) 42%, transparent 72%) !important;
}

/* Mini-Facts: Icons dünn, sauber sichtbar */
.oct-section-3a-ideal-v5 .oct3a-fact{
    overflow:visible !important;
}
.oct-section-3a-ideal-v5 .oct3a-fact svg{
    width:34px !important;
    height:34px !important;
    overflow:visible !important;
}
.oct-section-3a-ideal-v5 .oct3a-fact svg *{
    stroke-width:1.35 !important;
}

/* Servicekarten: wieder kompakt, weiß, feines Muster */
.oct-section-3a-ideal-v5 .oct3a-step{
    min-height:116px !important;
    padding:22px 24px 22px 118px !important;
    border:1px solid rgba(7,17,27,.62) !important;
    border-radius:16px !important;
    background:
        repeating-linear-gradient(118deg, rgba(7,17,27,.018) 0px, rgba(7,17,27,.018) 1px, transparent 2px, transparent 13px),
        linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 58%, rgba(250,251,252,.94) 100%) !important;
    box-shadow:
        0 18px 42px rgba(7,17,27,.080),
        inset 0 0 0 1px rgba(255,255,255,.88) !important;
    transition:transform .32s ease, box-shadow .32s ease, border-color .32s ease !important;
}

/* dezenter Glanz innen, keine gelbe Fläche */
.oct-section-3a-ideal-v5 .oct3a-step::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;
    pointer-events:none !important;
    border-radius:inherit !important;
    background:
        radial-gradient(circle at 15% 50%, rgba(7,17,27,.030) 0%, transparent 34%),
        linear-gradient(115deg, transparent 0%, rgba(255,255,255,.52) 48%, transparent 76%) !important;
    opacity:.38 !important;
}

/* Gold-Rahmen legt sich beim Hover über den schwarzen Rahmen – nicht daneben */
.oct-section-3a-ideal-v5 .oct3a-step::after{
    content:"" !important;
    position:absolute !important;
    inset:-1px !important;
    z-index:4 !important;
    pointer-events:none !important;
    border-radius:17px !important;
    padding:2px !important;
    background:linear-gradient(135deg,
        #FFE200 0%,
        #fff2a0 18%,
        #d8a928 42%,
        #FFE200 64%,
        #fff7bf 78%,
        #b98b18 100%) !important;
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
    -webkit-mask-composite:xor !important;
    mask-composite:exclude !important;
    opacity:0 !important;
    transition:opacity .55s ease, filter .55s ease !important;
}

.oct-section-3a-ideal-v5 .oct3a-step:hover{
    transform:translateY(-3px) !important;
    border-color:rgba(255,226,0,.08) !important;
    box-shadow:
        0 24px 54px rgba(7,17,27,.13),
        0 0 22px rgba(255,226,0,.10),
        inset 0 0 0 1px rgba(255,255,255,.94) !important;
}

.oct-section-3a-ideal-v5 .oct3a-step:hover::after{
    opacity:1 !important;
    filter:drop-shadow(0 0 10px rgba(255,226,0,.22)) !important;
}

.oct-section-3a-ideal-v5 .oct3a-step-icon,
.oct-section-3a-ideal-v5 .oct3a-step h3,
.oct-section-3a-ideal-v5 .oct3a-step p{
    position:relative !important;
    z-index:2 !important;
}

.oct-section-3a-ideal-v5 .oct3a-step-icon{
    position:absolute !important;
    left:22px !important;
    top:50% !important;
    width:70px !important;
    height:64px !important;
    transform:translateY(-50%) !important;
    background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.93) 48%, rgba(247,249,250,.92) 100%) !important;
    border:1px solid rgba(7,17,27,.075) !important;
    box-shadow:
        0 10px 26px rgba(7,17,27,.055),
        inset 0 0 0 1px rgba(255,255,255,.96) !important;
}

.oct-section-3a-ideal-v5 .oct3a-step-icon::after{
    content:"" !important;
    position:absolute !important;
    inset:10px !important;
    border-radius:10px !important;
    border:1px solid rgba(7,17,27,.035) !important;
    pointer-events:none !important;
}

.oct-section-3a-ideal-v5 .oct3a-step-icon svg{
    width:40px !important;
    height:40px !important;
    overflow:visible !important;
}
.oct-section-3a-ideal-v5 .oct3a-step-icon svg *{
    stroke:var(--oct-ink) !important;
    stroke-width:1.18 !important;
}

/* Dots sauber unter Motor */
.oct-section-3a-ideal-v5 .oct3a-dots{
    bottom:18px !important;
}

@media (max-width:1320px){
    .oct-section-3a-ideal-v5 .oct3a-hud-ring{
        width:min(560px, 38vw, calc(100vh - 160px)) !important;
        height:min(560px, 38vw, calc(100vh - 160px)) !important;
    }
}

@media (max-width:767px){
    .oct-section-3a-ideal-v5 .oct3a-step{
        min-height:108px !important;
        padding:18px 18px 18px 92px !important;
    }
    .oct-section-3a-ideal-v5 .oct3a-step-icon{
        left:16px !important;
        width:58px !important;
        height:56px !important;
    }
    .oct-section-3a-ideal-v5 .oct3a-hud-ring{
        width:430px !important;
        height:430px !important;
    }
}


/* =========================================================
   V23 – FINAL OPTIK: Wellen-Hintergrund + rotierende HUD-Ringe
   Wichtig:
   - KEIN gelber Fleck hinter Motor
   - mehr sichtbare Grau/Silber-Wellen oben/unten
   - mehrere versetzte Halbringe drehen verschieden schnell
   - Servicekarten bleiben kompakt, weiß, mit Schwarz->Gold Hover-Rahmen
========================================================= */

.oct-section-3a-ideal-v5{
    background:
        radial-gradient(circle at 50% 50%, rgba(7,17,27,0.035) 0%, rgba(7,17,27,0.018) 30%, transparent 58%),
        linear-gradient(180deg, #ffffff 0%, #fbfcfc 46%, #ffffff 100%) !important;
}

/* hochwertiger Wellenhintergrund: graue/silberne Linien + ganz feine #FFE200-Spuren */
.oct-section-3a-ideal-v5::before{
    opacity:.88 !important;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1900' height='900' viewBox='0 0 1900 900'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cg stroke='%23c5ced6' stroke-width='1' opacity='.34'%3E%3Cpath d='M-80 82 C180 18 330 128 560 96 S940 28 1235 86 S1650 150 1980 40'/%3E%3Cpath d='M-80 104 C180 40 330 150 560 118 S940 50 1235 108 S1650 172 1980 62' opacity='.82'/%3E%3Cpath d='M-80 126 C180 62 330 172 560 140 S940 72 1235 130 S1650 194 1980 84' opacity='.58'/%3E%3Cpath d='M-80 148 C180 84 330 194 560 162 S940 94 1235 152 S1650 216 1980 106' opacity='.38'/%3E%3Cpath d='M-100 755 C150 675 325 795 555 752 S940 690 1215 748 S1600 835 1980 728'/%3E%3Cpath d='M-100 778 C150 698 325 818 555 775 S940 713 1215 771 S1600 858 1980 751' opacity='.82'/%3E%3Cpath d='M-100 801 C150 721 325 841 555 798 S940 736 1215 794 S1600 881 1980 774' opacity='.58'/%3E%3Cpath d='M-100 824 C150 744 325 864 555 821 S940 759 1215 817 S1600 904 1980 797' opacity='.38'/%3E%3Cpath d='M-80 440 C240 350 470 510 760 438 S1130 370 1430 430 S1710 500 1980 408' opacity='.22'/%3E%3C/g%3E%3Cg stroke='%23FFE200' stroke-width='1.25' opacity='.36'%3E%3Cpath d='M-90 128 C200 92 420 92 645 114 S1010 148 1260 102 S1610 34 1980 70'/%3E%3Cpath d='M-90 806 C230 828 405 710 650 744 S1050 850 1325 800 S1660 718 1980 786' opacity='.75'/%3E%3Cpath d='M-120 610 C280 570 570 640 870 600 S1420 540 1980 568' opacity='.42'/%3E%3C/g%3E%3Cg stroke='%2398a4ae' stroke-width='1' opacity='.22'%3E%3Cpath d='M1650 80 C1715 58 1780 76 1840 40'/%3E%3Cpath d='M80 800 C160 760 220 786 300 738'/%3E%3C/g%3E%3C/g%3E%3Cg fill='%23aeb8c2' opacity='.45'%3E%3Ccircle cx='100' cy='820' r='2'/%3E%3Ccircle cx='118' cy='820' r='2'/%3E%3Ccircle cx='136' cy='820' r='2'/%3E%3Ccircle cx='154' cy='820' r='2'/%3E%3Ccircle cx='1720' cy='74' r='2'/%3E%3Ccircle cx='1738' cy='74' r='2'/%3E%3Ccircle cx='1756' cy='74' r='2'/%3E%3Ccircle cx='1774' cy='74' r='2'/%3E%3C/g%3E%3C/svg%3E") !important;
    background-size: 100% 100% !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
}

/* neutraler Silber-Schatten statt gelbem Fleck */
.oct-section-3a-ideal-v5::after{
    width:760px !important;
    height:760px !important;
    background:radial-gradient(circle, rgba(7,17,27,0.050) 0%, rgba(7,17,27,0.022) 36%, transparent 68%) !important;
    filter:blur(18px) !important;
    opacity:.48 !important;
}

/* HUD-Ring-Container fix zentriert; Kinder rotieren, nicht das Layout */
.oct-section-3a-ideal-v5 .oct3a-hud-ring{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    width:min(680px, 40vw, calc(100vh - 120px)) !important;
    height:min(680px, 40vw, calc(100vh - 120px)) !important;
    transform:translate(-50%,-50%) !important;
    border-radius:50% !important;
    z-index:2 !important;
    pointer-events:none !important;
    border:0 !important;
    box-shadow:none !important;
    opacity:1 !important;
    overflow:visible !important;
    background:radial-gradient(circle, rgba(7,17,27,.035) 0%, rgba(7,17,27,.014) 38%, transparent 68%) !important;
}

.oct-section-3a-ideal-v5 .oct3a-hud-ring::before,
.oct-section-3a-ideal-v5 .oct3a-hud-ring::after{
    display:none !important;
    content:none !important;
}

.oct-section-3a-ideal-v5 .oct3a-orbit{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    display:block !important;
    border-radius:50% !important;
    pointer-events:none !important;
    transform:translate(-50%,-50%) rotate(0deg) !important;
    will-change:transform !important;
}

/* großer silberner Halbkreis */
.oct-section-3a-ideal-v5 .oct3a-orbit.o1{
    width:100% !important;
    height:100% !important;
    background:conic-gradient(from 205deg,
        transparent 0deg,
        transparent 18deg,
        rgba(145,154,162,.30) 34deg,
        rgba(206,214,221,.22) 76deg,
        transparent 118deg,
        transparent 178deg,
        rgba(7,17,27,.12) 214deg,
        transparent 246deg,
        transparent 360deg) !important;
    -webkit-mask:radial-gradient(circle, transparent 0%, transparent 86.8%, #000 87.2%, #000 87.8%, transparent 88.2%, transparent 100%) !important;
    mask:radial-gradient(circle, transparent 0%, transparent 86.8%, #000 87.2%, #000 87.8%, transparent 88.2%, transparent 100%) !important;
    animation:oct3aOrbitSpinSlow 74s linear infinite !important;
    opacity:.82 !important;
}

/* goldener sichtbarer Segmentring */
.oct-section-3a-ideal-v5 .oct3a-orbit.o2{
    width:91% !important;
    height:91% !important;
    background:conic-gradient(from 12deg,
        transparent 0deg,
        transparent 26deg,
        rgba(255,226,0,.82) 40deg,
        rgba(255,242,147,.54) 62deg,
        transparent 82deg,
        transparent 204deg,
        rgba(255,226,0,.46) 224deg,
        transparent 246deg,
        transparent 360deg) !important;
    -webkit-mask:radial-gradient(circle, transparent 0%, transparent 84.5%, #000 85%, #000 86.3%, transparent 86.8%, transparent 100%) !important;
    mask:radial-gradient(circle, transparent 0%, transparent 84.5%, #000 85%, #000 86.3%, transparent 86.8%, transparent 100%) !important;
    filter:drop-shadow(0 0 6px rgba(255,226,0,.10)) !important;
    animation:oct3aOrbitSpinGold 46s linear infinite reverse !important;
    opacity:.78 !important;
}

/* dünner innerer Silberring */
.oct-section-3a-ideal-v5 .oct3a-orbit.o3{
    width:78% !important;
    height:78% !important;
    border:1px dashed rgba(7,17,27,.20) !important;
    opacity:.72 !important;
    animation:oct3aOrbitSpinMedium 92s linear infinite !important;
}

/* gepunkteter Außenbogen */
.oct-section-3a-ideal-v5 .oct3a-orbit.o4{
    width:107% !important;
    height:107% !important;
    background:repeating-conic-gradient(from 120deg,
        rgba(120,130,139,.34) 0deg 1.2deg,
        transparent 1.2deg 4.6deg) !important;
    -webkit-mask:radial-gradient(circle, transparent 0%, transparent 88.5%, #000 89%, #000 90%, transparent 90.5%, transparent 100%) !important;
    mask:radial-gradient(circle, transparent 0%, transparent 88.5%, #000 89%, #000 90%, transparent 90.5%, transparent 100%) !important;
    opacity:.44 !important;
    animation:oct3aOrbitSpinDots 118s linear infinite reverse !important;
}

/* feiner innerer Goldbogen */
.oct-section-3a-ideal-v5 .oct3a-orbit.o5{
    width:66% !important;
    height:66% !important;
    background:conic-gradient(from 245deg,
        transparent 0deg,
        transparent 38deg,
        rgba(255,226,0,.36) 58deg,
        transparent 80deg,
        transparent 360deg) !important;
    -webkit-mask:radial-gradient(circle, transparent 0%, transparent 83%, #000 83.8%, #000 85%, transparent 85.6%, transparent 100%) !important;
    mask:radial-gradient(circle, transparent 0%, transparent 83%, #000 83.8%, #000 85%, transparent 85.6%, transparent 100%) !important;
    opacity:.66 !important;
    animation:oct3aOrbitSpinSmall 60s linear infinite !important;
}

@keyframes oct3aOrbitSpinSlow{ from{transform:translate(-50%,-50%) rotate(0deg);} to{transform:translate(-50%,-50%) rotate(360deg);} }
@keyframes oct3aOrbitSpinGold{ from{transform:translate(-50%,-50%) rotate(0deg);} to{transform:translate(-50%,-50%) rotate(360deg);} }
@keyframes oct3aOrbitSpinMedium{ from{transform:translate(-50%,-50%) rotate(0deg);} to{transform:translate(-50%,-50%) rotate(-360deg);} }
@keyframes oct3aOrbitSpinDots{ from{transform:translate(-50%,-50%) rotate(0deg);} to{transform:translate(-50%,-50%) rotate(360deg);} }
@keyframes oct3aOrbitSpinSmall{ from{transform:translate(-50%,-50%) rotate(0deg);} to{transform:translate(-50%,-50%) rotate(-360deg);} }

/* Dots wirklich unter dem Motorzentrum halten */
.oct-section-3a-ideal-v5 .oct3a-dots{
    bottom:clamp(18px, 3.2vh, 34px) !important;
    left:50% !important;
    transform:translateX(-50%) !important;
}

/* Service-Karten: kompakt/weiß, Rahmen ersetzt Schwarz sauber durch Gold beim Hover */
.oct-section-3a-ideal-v5 .oct3a-step{
    min-height:118px !important;
    padding:24px 26px 22px 116px !important;
    border:1px solid rgba(7,17,27,.34) !important;
    border-radius:14px !important;
    background:
        repeating-linear-gradient(118deg, rgba(7,17,27,.014) 0px, rgba(7,17,27,.014) 1px, transparent 2px, transparent 14px),
        linear-gradient(135deg, rgba(255,255,255,.985) 0%, rgba(255,255,255,.96) 60%, rgba(250,251,252,.94) 100%) !important;
    box-shadow:0 14px 34px rgba(7,17,27,.065), inset 0 0 0 1px rgba(255,255,255,.82) !important;
    transition:transform .34s ease, border-color .42s ease, box-shadow .42s ease !important;
}
.oct-section-3a-ideal-v5 .oct3a-step::after{
    inset:-1px !important;
    border-radius:15px !important;
    padding:1px !important;
    background:linear-gradient(135deg, #4a4f55 0%, #101820 34%, #b88a16 64%, #FFE200 100%) !important;
    opacity:0 !important;
    transition:opacity .58s ease, filter .58s ease !important;
}
.oct-section-3a-ideal-v5 .oct3a-step:hover{
    border-color:transparent !important;
    transform:translateY(-3px) !important;
    box-shadow:0 22px 48px rgba(7,17,27,.12), 0 0 18px rgba(255,226,0,.09), inset 0 0 0 1px rgba(255,255,255,.95) !important;
}
.oct-section-3a-ideal-v5 .oct3a-step:hover::after{
    opacity:1 !important;
    filter:drop-shadow(0 0 8px rgba(255,226,0,.18)) !important;
}
.oct-section-3a-ideal-v5 .oct3a-step-icon{
    width:68px !important;
    height:60px !important;
    left:22px !important;
    background:rgba(255,255,255,.94) !important;
}
.oct-section-3a-ideal-v5 .oct3a-step-icon svg{
    width:38px !important;
    height:38px !important;
}
.oct-section-3a-ideal-v5 .oct3a-step-icon svg *{
    stroke:var(--oct-ink) !important;
    stroke-width:1.28 !important;
    vector-effect:non-scaling-stroke !important;
}

@media (max-width:1320px){
    .oct-section-3a-ideal-v5 .oct3a-hud-ring{
        width:min(600px, 42vw, calc(100vh - 135px)) !important;
        height:min(600px, 42vw, calc(100vh - 135px)) !important;
    }
}
@media (max-width:1199px){
    .oct-section-3a-ideal-v5 .oct3a-hud-ring{
        width:min(560px, 78vw) !important;
        height:min(560px, 78vw) !important;
    }
}



/* =========================================================
   V24 – REFERENZ-LOOK WIE MOCKUP:
   - deutlichere Silber/Grau/#FFE200 Wellen oben/unten
   - keine gelben Flecken hinter dem Motor
   - mehrere sichtbare rotierende Ring-/Halbring-Ebenen hinter Motor
   - Layout / HTML bleibt unverändert
========================================================= */

.oct-section-3a-ideal-v5{
    background:
        radial-gradient(circle at 50% 52%, rgba(7,17,27,0.038) 0%, rgba(7,17,27,0.018) 31%, transparent 61%),
        linear-gradient(180deg,#ffffff 0%,#fbfcfd 48%,#ffffff 100%) !important;
}

/* mehr „Mockup“-Wellen: oben + unten deutlich sichtbarer, silber/grau mit feiner Goldlinie */
.oct-section-3a-ideal-v5::before{
    opacity:1 !important;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1900' height='900' viewBox='0 0 1900 900'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cg stroke='%23b9c4cc' stroke-width='1' opacity='.46'%3E%3Cpath d='M-80 78 C120 10 285 78 458 96 C660 118 820 32 1015 36 C1218 40 1375 142 1590 124 C1770 110 1860 18 1980 0'/%3E%3Cpath d='M-80 96 C120 28 285 96 458 114 C660 136 820 50 1015 54 C1218 58 1375 160 1590 142 C1770 128 1860 36 1980 18' opacity='.86'/%3E%3Cpath d='M-80 114 C120 46 285 114 458 132 C660 154 820 68 1015 72 C1218 76 1375 178 1590 160 C1770 146 1860 54 1980 36' opacity='.67'/%3E%3Cpath d='M-80 132 C120 64 285 132 458 150 C660 172 820 86 1015 90 C1218 94 1375 196 1590 178 C1770 164 1860 72 1980 54' opacity='.48'/%3E%3Cpath d='M-80 150 C120 82 285 150 458 168 C660 190 820 104 1015 108 C1218 112 1375 214 1590 196 C1770 182 1860 90 1980 72' opacity='.30'/%3E%3C/g%3E%3Cg stroke='%23d5dbe0' stroke-width='1' opacity='.52'%3E%3Cpath d='M-120 742 C100 692 270 780 455 792 C645 804 810 710 1005 720 C1215 730 1340 830 1540 812 C1720 796 1855 720 1980 696'/%3E%3Cpath d='M-120 764 C100 714 270 802 455 814 C645 826 810 732 1005 742 C1215 752 1340 852 1540 834 C1720 818 1855 742 1980 718' opacity='.84'/%3E%3Cpath d='M-120 786 C100 736 270 824 455 836 C645 848 810 754 1005 764 C1215 774 1340 874 1540 856 C1720 840 1855 764 1980 740' opacity='.62'/%3E%3Cpath d='M-120 808 C100 758 270 846 455 858 C645 870 810 776 1005 786 C1215 796 1340 896 1540 878 C1720 862 1855 786 1980 762' opacity='.42'/%3E%3Cpath d='M-120 830 C100 780 270 868 455 880 C645 892 810 798 1005 808 C1215 818 1340 918 1540 900 C1720 884 1855 808 1980 784' opacity='.25'/%3E%3C/g%3E%3Cg stroke='%23FFE200' stroke-width='1.3' opacity='.44'%3E%3Cpath d='M-120 111 C140 78 370 91 585 104 C850 122 1020 153 1265 99 C1518 44 1730 44 1980 78'/%3E%3Cpath d='M-120 803 C155 852 365 748 595 742 C868 735 1050 872 1318 818 C1585 764 1738 752 1980 802' opacity='.82'/%3E%3C/g%3E%3Cg stroke='%237f8b95' stroke-width='1' opacity='.18'%3E%3Cpath d='M-100 455 C180 380 390 470 630 455 C860 440 1040 350 1270 380 C1500 410 1710 510 1980 418'/%3E%3Cpath d='M-100 478 C180 403 390 493 630 478 C860 463 1040 373 1270 403 C1500 433 1710 533 1980 441' opacity='.72'/%3E%3C/g%3E%3C/g%3E%3Cg fill='%23aeb8c2' opacity='.48'%3E%3Ccircle cx='96' cy='818' r='2.1'/%3E%3Ccircle cx='116' cy='818' r='2.1'/%3E%3Ccircle cx='136' cy='818' r='2.1'/%3E%3Ccircle cx='156' cy='818' r='2.1'/%3E%3Ccircle cx='1718' cy='76' r='2.1'/%3E%3Ccircle cx='1738' cy='76' r='2.1'/%3E%3Ccircle cx='1758' cy='76' r='2.1'/%3E%3Ccircle cx='1778' cy='76' r='2.1'/%3E%3C/g%3E%3C/svg%3E") !important;
    background-size:100% 100% !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
}

/* nur neutraler Silberglow, kein gelber Fleck */
.oct-section-3a-ideal-v5::after{
    width:820px !important;
    height:820px !important;
    background:radial-gradient(circle, rgba(7,17,27,0.042) 0%, rgba(7,17,27,0.017) 38%, transparent 70%) !important;
    filter:blur(18px) !important;
    opacity:.50 !important;
}

/* Ringsystem sichtbar wie Mockup */
.oct-section-3a-ideal-v5 .oct3a-hud-ring{
    width:min(760px, 43vw, calc(100vh - 90px)) !important;
    height:min(760px, 43vw, calc(100vh - 90px)) !important;
    z-index:3 !important;
    background:transparent !important;
    overflow:visible !important;
    opacity:1 !important;
}

.oct-section-3a-ideal-v5 .oct3a-hud-ring::before,
.oct-section-3a-ideal-v5 .oct3a-hud-ring::after{
    display:block !important;
    content:"" !important;
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    border-radius:50% !important;
    pointer-events:none !important;
    transform:translate(-50%,-50%) rotate(0deg) !important;
    will-change:transform !important;
}

/* großer gestrichelter Außenring */
.oct-section-3a-ideal-v5 .oct3a-hud-ring::before{
    width:108% !important;
    height:108% !important;
    border:1px dashed rgba(128,139,149,.28) !important;
    opacity:.78 !important;
    animation:oct3aRefSpinA 185s linear infinite !important;
}

/* dünner grauer Segmentring */
.oct-section-3a-ideal-v5 .oct3a-hud-ring::after{
    width:101% !important;
    height:101% !important;
    background:conic-gradient(from 146deg,
        transparent 0deg,
        transparent 18deg,
        rgba(118,130,140,.40) 36deg,
        rgba(200,208,216,.30) 70deg,
        transparent 112deg,
        transparent 198deg,
        rgba(134,144,153,.24) 226deg,
        transparent 252deg,
        transparent 360deg) !important;
    -webkit-mask:radial-gradient(circle, transparent 0%, transparent 88.5%, #000 89%, #000 90%, transparent 90.6%, transparent 100%) !important;
    mask:radial-gradient(circle, transparent 0%, transparent 88.5%, #000 89%, #000 90%, transparent 90.6%, transparent 100%) !important;
    opacity:.82 !important;
    animation:oct3aRefSpinB 132s linear infinite reverse !important;
}

.oct-section-3a-ideal-v5 .oct3a-orbit{
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) rotate(0deg) !important;
    will-change:transform !important;
    opacity:1 !important;
}

.oct-section-3a-ideal-v5 .oct3a-orbit.o1{
    width:96% !important;
    height:96% !important;
    background:conic-gradient(from 22deg,
        transparent 0deg,
        transparent 16deg,
        rgba(255,226,0,.88) 31deg,
        rgba(255,240,128,.58) 55deg,
        transparent 76deg,
        transparent 190deg,
        rgba(146,156,166,.30) 218deg,
        transparent 252deg,
        transparent 360deg) !important;
    -webkit-mask:radial-gradient(circle, transparent 0%, transparent 87%, #000 87.5%, #000 89%, transparent 89.5%, transparent 100%) !important;
    mask:radial-gradient(circle, transparent 0%, transparent 87%, #000 87.5%, #000 89%, transparent 89.5%, transparent 100%) !important;
    animation:oct3aRefSpinC 72s linear infinite !important;
    filter:drop-shadow(0 0 6px rgba(255,226,0,.12)) !important;
}

.oct-section-3a-ideal-v5 .oct3a-orbit.o2{
    width:84% !important;
    height:84% !important;
    border:1px solid rgba(255,226,0,.36) !important;
    background:none !important;
    opacity:.78 !important;
    animation:oct3aRefSpinD 155s linear infinite reverse !important;
}

.oct-section-3a-ideal-v5 .oct3a-orbit.o3{
    width:74% !important;
    height:74% !important;
    border:1px dashed rgba(7,17,27,.18) !important;
    opacity:.75 !important;
    animation:oct3aRefSpinE 98s linear infinite !important;
}

.oct-section-3a-ideal-v5 .oct3a-orbit.o4{
    width:112% !important;
    height:112% !important;
    background:repeating-conic-gradient(from 122deg, rgba(130,140,150,.38) 0deg 1.25deg, transparent 1.25deg 4.7deg) !important;
    -webkit-mask:radial-gradient(circle, transparent 0%, transparent 89.2%, #000 89.8%, #000 90.7%, transparent 91.3%, transparent 100%) !important;
    mask:radial-gradient(circle, transparent 0%, transparent 89.2%, #000 89.8%, #000 90.7%, transparent 91.3%, transparent 100%) !important;
    opacity:.62 !important;
    animation:oct3aRefSpinF 122s linear infinite reverse !important;
}

.oct-section-3a-ideal-v5 .oct3a-orbit.o5{
    width:64% !important;
    height:64% !important;
    background:conic-gradient(from 238deg,
        transparent 0deg,
        transparent 34deg,
        rgba(255,226,0,.44) 54deg,
        transparent 78deg,
        transparent 172deg,
        rgba(160,170,180,.18) 202deg,
        transparent 232deg,
        transparent 360deg) !important;
    -webkit-mask:radial-gradient(circle, transparent 0%, transparent 83%, #000 83.8%, #000 85.2%, transparent 85.8%, transparent 100%) !important;
    mask:radial-gradient(circle, transparent 0%, transparent 83%, #000 83.8%, #000 85.2%, transparent 85.8%, transparent 100%) !important;
    opacity:.82 !important;
    animation:oct3aRefSpinG 58s linear infinite !important;
}

@keyframes oct3aRefSpinA{from{transform:translate(-50%,-50%) rotate(0deg);}to{transform:translate(-50%,-50%) rotate(360deg);}}
@keyframes oct3aRefSpinB{from{transform:translate(-50%,-50%) rotate(0deg);}to{transform:translate(-50%,-50%) rotate(360deg);}}
@keyframes oct3aRefSpinC{from{transform:translate(-50%,-50%) rotate(0deg);}to{transform:translate(-50%,-50%) rotate(360deg);}}
@keyframes oct3aRefSpinD{from{transform:translate(-50%,-50%) rotate(0deg);}to{transform:translate(-50%,-50%) rotate(360deg);}}
@keyframes oct3aRefSpinE{from{transform:translate(-50%,-50%) rotate(0deg);}to{transform:translate(-50%,-50%) rotate(-360deg);}}
@keyframes oct3aRefSpinF{from{transform:translate(-50%,-50%) rotate(0deg);}to{transform:translate(-50%,-50%) rotate(-360deg);}}
@keyframes oct3aRefSpinG{from{transform:translate(-50%,-50%) rotate(0deg);}to{transform:translate(-50%,-50%) rotate(360deg);}}

/* Motor bleibt davor, Ringe laufen dahinter */
.oct-section-3a-ideal-v5 .oct3a-engine{
    z-index:5 !important;
}
.oct-section-3a-ideal-v5 .oct3a-callout,
.oct-section-3a-ideal-v5 .oct3a-dots{
    z-index:9 !important;
}

/* rechte Karten wieder mehr wie Referenz: kompakter, weiß, dünner Rahmen, Goldkante fein */
.oct-section-3a-ideal-v5 .oct3a-step{
    min-height:112px !important;
    padding:22px 24px 20px 106px !important;
    border:1px solid rgba(7,17,27,.26) !important;
    border-radius:14px !important;
    background:linear-gradient(135deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.96) 58%, rgba(250,251,252,.94) 100%) !important;
    box-shadow:0 14px 34px rgba(7,17,27,.055), inset 0 0 0 1px rgba(255,255,255,.86) !important;
}
.oct-section-3a-ideal-v5 .oct3a-step::before{
    opacity:.24 !important;
}
.oct-section-3a-ideal-v5 .oct3a-step::after{
    opacity:1 !important;
    padding:1px !important;
    background:linear-gradient(135deg, rgba(7,17,27,.30) 0%, rgba(7,17,27,.18) 42%, rgba(255,226,0,.72) 100%) !important;
    transition:background .55s ease, filter .55s ease, opacity .55s ease !important;
}
.oct-section-3a-ideal-v5 .oct3a-step:hover::after{
    background:linear-gradient(135deg, rgba(30,34,38,.48) 0%, rgba(187,143,20,.78) 45%, #FFE200 100%) !important;
    filter:drop-shadow(0 0 8px rgba(255,226,0,.18)) !important;
}
.oct-section-3a-ideal-v5 .oct3a-step-icon{
    width:64px !important;
    height:58px !important;
    left:20px !important;
    background:rgba(255,255,255,.96) !important;
}
.oct-section-3a-ideal-v5 .oct3a-step-icon svg{
    width:34px !important;
    height:34px !important;
}

/* Dots optisch direkt unter dem Motor */
.oct-section-3a-ideal-v5 .oct3a-dots{
    bottom:clamp(18px, 3.1vh, 30px) !important;
}

@media(max-width:1199px){
    .oct-section-3a-ideal-v5 .oct3a-hud-ring{
        width:min(620px, 82vw) !important;
        height:min(620px, 82vw) !important;
    }
}

@media(max-width:767px){
    .oct-section-3a-ideal-v5::before{
        background-size:auto 100% !important;
        opacity:.72 !important;
    }
    .oct-section-3a-ideal-v5 .oct3a-hud-ring{
        width:min(390px, 92vw) !important;
        height:min(390px, 92vw) !important;
    }
}



/* =========================================================
   V25 REALFIX – SICHTBARE REFERENZ-RINGE + MEHR WELLEN
   Nur letzter Override: Layout bleibt stabil, Ringe liegen sichtbar um den Motor.
========================================================= */

.oct-section-3a-ideal-v5{
    background:
        radial-gradient(ellipse at 50% 51%, rgba(7,17,27,0.035) 0%, rgba(7,17,27,0.014) 34%, transparent 63%),
        linear-gradient(180deg,#ffffff 0%,#fbfcfd 48%,#ffffff 100%) !important;
}

/* Hintergrund wieder mehr wie Referenzbild: feine Wellen oben/unten in Silber + wenig Gold */
.oct-section-3a-ideal-v5::before{
    opacity:1 !important;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='900' viewBox='0 0 1920 900'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cg stroke='%23b9c4cc' stroke-width='1' opacity='.62'%3E%3Cpath d='M-120 44 C80 0 250 52 430 82 C650 120 790 16 1015 18 C1230 20 1380 118 1600 104 C1785 92 1868 18 2020 -12'/%3E%3Cpath d='M-120 64 C80 20 250 72 430 102 C650 140 790 36 1015 38 C1230 40 1380 138 1600 124 C1785 112 1868 38 2020 8' opacity='.88'/%3E%3Cpath d='M-120 84 C80 40 250 92 430 122 C650 160 790 56 1015 58 C1230 60 1380 158 1600 144 C1785 132 1868 58 2020 28' opacity='.70'/%3E%3Cpath d='M-120 104 C80 60 250 112 430 142 C650 180 790 76 1015 78 C1230 80 1380 178 1600 164 C1785 152 1868 78 2020 48' opacity='.50'/%3E%3Cpath d='M-120 124 C80 80 250 132 430 162 C650 200 790 96 1015 98 C1230 100 1380 198 1600 184 C1785 172 1868 98 2020 68' opacity='.32'/%3E%3C/g%3E%3Cg stroke='%23d5dce2' stroke-width='1' opacity='.66'%3E%3Cpath d='M-160 750 C80 690 250 780 455 798 C660 816 800 715 1015 720 C1240 725 1378 822 1580 808 C1760 795 1870 720 2020 690'/%3E%3Cpath d='M-160 772 C80 712 250 802 455 820 C660 838 800 737 1015 742 C1240 747 1378 844 1580 830 C1760 817 1870 742 2020 712' opacity='.86'/%3E%3Cpath d='M-160 794 C80 734 250 824 455 842 C660 860 800 759 1015 764 C1240 769 1378 866 1580 852 C1760 839 1870 764 2020 734' opacity='.64'/%3E%3Cpath d='M-160 816 C80 756 250 846 455 864 C660 882 800 781 1015 786 C1240 791 1378 888 1580 874 C1760 861 1870 786 2020 756' opacity='.42'/%3E%3Cpath d='M-160 838 C80 778 250 868 455 886 C660 904 800 803 1015 808 C1240 813 1378 910 1580 896 C1760 883 1870 808 2020 778' opacity='.25'/%3E%3C/g%3E%3Cg stroke='%23FFE200' stroke-width='1.22' opacity='.42'%3E%3Cpath d='M-120 94 C150 58 360 76 590 96 C855 120 1028 148 1270 98 C1535 44 1740 48 2020 74'/%3E%3Cpath d='M-120 806 C135 848 350 754 595 748 C875 740 1040 865 1320 812 C1588 760 1750 760 2020 802' opacity='.78'/%3E%3C/g%3E%3Cg stroke='%238b98a3' stroke-width='1' opacity='.22'%3E%3Cpath d='M-80 455 C200 372 395 468 635 455 C865 442 1040 354 1280 384 C1510 413 1718 508 2020 420'/%3E%3Cpath d='M-80 478 C200 395 395 491 635 478 C865 465 1040 377 1280 407 C1510 436 1718 531 2020 443' opacity='.70'/%3E%3C/g%3E%3C/g%3E%3Cg fill='%23aeb8c2' opacity='.48'%3E%3Ccircle cx='105' cy='824' r='2.1'/%3E%3Ccircle cx='125' cy='824' r='2.1'/%3E%3Ccircle cx='145' cy='824' r='2.1'/%3E%3Ccircle cx='165' cy='824' r='2.1'/%3E%3Ccircle cx='1720' cy='78' r='2.1'/%3E%3Ccircle cx='1740' cy='78' r='2.1'/%3E%3Ccircle cx='1760' cy='78' r='2.1'/%3E%3Ccircle cx='1780' cy='78' r='2.1'/%3E%3C/g%3E%3C/svg%3E") !important;
    background-size:100% 100% !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
}

.oct-section-3a-ideal-v5::after{
    background:radial-gradient(circle, rgba(7,17,27,0.030) 0%, rgba(7,17,27,0.012) 38%, transparent 70%) !important;
    opacity:.42 !important;
}

/* Ringe: sichtbar wie Referenz, echte Drehung, mehrere Ebenen */
.oct-section-3a-ideal-v5 .oct3a-engine-stage{
    position:relative !important;
    overflow:visible !important;
    isolation:isolate !important;
}

.oct-section-3a-ideal-v5 .oct3a-hud-ring{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    width:min(860px, 49vw, calc(100vh - 42px)) !important;
    height:min(860px, 49vw, calc(100vh - 42px)) !important;
    transform:translate(-50%,-50%) !important;
    z-index:6 !important;
    pointer-events:none !important;
    overflow:visible !important;
    opacity:1 !important;
    background:transparent !important;
    filter:none !important;
}

.oct-section-3a-ideal-v5 .oct3a-engine{
    position:relative !important;
    z-index:8 !important;
}

.oct-section-3a-ideal-v5 .oct3a-callout,
.oct-section-3a-ideal-v5 .oct3a-dots{
    z-index:12 !important;
}

.oct-section-3a-ideal-v5 .oct3a-hud-ring::before,
.oct-section-3a-ideal-v5 .oct3a-hud-ring::after,
.oct-section-3a-ideal-v5 .oct3a-orbit{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    border-radius:50% !important;
    pointer-events:none !important;
    transform:translate(-50%,-50%) rotate(0deg) !important;
    transform-origin:center center !important;
    will-change:transform !important;
    opacity:1 !important;
}

/* großer punktierter Silberring */
.oct-section-3a-ideal-v5 .oct3a-hud-ring::before{
    width:110% !important;
    height:110% !important;
    border:1px dashed rgba(125,138,150,.40) !important;
    opacity:.85 !important;
    animation:oct3aFinalRingSpin1 150s linear infinite !important;
}

/* äußerer grauer Segmentring */
.oct-section-3a-ideal-v5 .oct3a-hud-ring::after{
    width:104% !important;
    height:104% !important;
    background:conic-gradient(from 150deg,
        transparent 0deg,
        transparent 22deg,
        rgba(128,140,152,.46) 42deg,
        rgba(205,213,220,.32) 76deg,
        transparent 118deg,
        transparent 205deg,
        rgba(130,142,154,.26) 232deg,
        transparent 262deg,
        transparent 360deg) !important;
    -webkit-mask:radial-gradient(circle, transparent 0%, transparent 88.2%, #000 88.8%, #000 90.1%, transparent 90.8%, transparent 100%) !important;
    mask:radial-gradient(circle, transparent 0%, transparent 88.2%, #000 88.8%, #000 90.1%, transparent 90.8%, transparent 100%) !important;
    animation:oct3aFinalRingSpin2 112s linear infinite reverse !important;
}

/* dickerer goldener Halbbogen oben/links */
.oct-section-3a-ideal-v5 .oct3a-orbit.o1{
    width:96% !important;
    height:96% !important;
    background:conic-gradient(from 205deg,
        transparent 0deg,
        transparent 34deg,
        rgba(255,226,0,.95) 56deg,
        rgba(255,241,145,.58) 92deg,
        transparent 122deg,
        transparent 300deg,
        rgba(255,226,0,.40) 320deg,
        transparent 344deg,
        transparent 360deg) !important;
    -webkit-mask:radial-gradient(circle, transparent 0%, transparent 86.6%, #000 87.1%, #000 88.7%, transparent 89.4%, transparent 100%) !important;
    mask:radial-gradient(circle, transparent 0%, transparent 86.6%, #000 87.1%, #000 88.7%, transparent 89.4%, transparent 100%) !important;
    filter:drop-shadow(0 0 6px rgba(255,226,0,.14)) !important;
    animation:oct3aFinalRingSpin3 68s linear infinite !important;
}

/* kompletter feiner Goldring */
.oct-section-3a-ideal-v5 .oct3a-orbit.o2{
    width:84% !important;
    height:84% !important;
    border:1px solid rgba(255,226,0,.46) !important;
    background:none !important;
    opacity:.86 !important;
    animation:oct3aFinalRingSpin4 140s linear infinite reverse !important;
}

/* innerer gestrichelter dunkler Ring */
.oct-section-3a-ideal-v5 .oct3a-orbit.o3{
    width:72% !important;
    height:72% !important;
    border:1px dashed rgba(7,17,27,.24) !important;
    background:none !important;
    opacity:.78 !important;
    animation:oct3aFinalRingSpin5 96s linear infinite !important;
}

/* äußerer Tick-Ring */
.oct-section-3a-ideal-v5 .oct3a-orbit.o4{
    width:113% !important;
    height:113% !important;
    background:repeating-conic-gradient(from 124deg, rgba(126,138,150,.42) 0deg 1.35deg, transparent 1.35deg 5deg) !important;
    -webkit-mask:radial-gradient(circle, transparent 0%, transparent 89.1%, #000 89.7%, #000 90.6%, transparent 91.2%, transparent 100%) !important;
    mask:radial-gradient(circle, transparent 0%, transparent 89.1%, #000 89.7%, #000 90.6%, transparent 91.2%, transparent 100%) !important;
    opacity:.68 !important;
    animation:oct3aFinalRingSpin6 118s linear infinite reverse !important;
}

/* kleiner gold/silber Segmentring innen */
.oct-section-3a-ideal-v5 .oct3a-orbit.o5{
    width:62% !important;
    height:62% !important;
    background:conic-gradient(from 36deg,
        transparent 0deg,
        transparent 28deg,
        rgba(255,226,0,.50) 48deg,
        transparent 76deg,
        transparent 178deg,
        rgba(150,162,174,.25) 210deg,
        transparent 242deg,
        transparent 360deg) !important;
    -webkit-mask:radial-gradient(circle, transparent 0%, transparent 82.8%, #000 83.6%, #000 85.0%, transparent 85.7%, transparent 100%) !important;
    mask:radial-gradient(circle, transparent 0%, transparent 82.8%, #000 83.6%, #000 85.0%, transparent 85.7%, transparent 100%) !important;
    opacity:.84 !important;
    animation:oct3aFinalRingSpin7 54s linear infinite !important;
}

@keyframes oct3aFinalRingSpin1{from{transform:translate(-50%,-50%) rotate(0deg);}to{transform:translate(-50%,-50%) rotate(360deg);}}
@keyframes oct3aFinalRingSpin2{from{transform:translate(-50%,-50%) rotate(0deg);}to{transform:translate(-50%,-50%) rotate(360deg);}}
@keyframes oct3aFinalRingSpin3{from{transform:translate(-50%,-50%) rotate(0deg);}to{transform:translate(-50%,-50%) rotate(360deg);}}
@keyframes oct3aFinalRingSpin4{from{transform:translate(-50%,-50%) rotate(0deg);}to{transform:translate(-50%,-50%) rotate(360deg);}}
@keyframes oct3aFinalRingSpin5{from{transform:translate(-50%,-50%) rotate(0deg);}to{transform:translate(-50%,-50%) rotate(-360deg);}}
@keyframes oct3aFinalRingSpin6{from{transform:translate(-50%,-50%) rotate(0deg);}to{transform:translate(-50%,-50%) rotate(-360deg);}}
@keyframes oct3aFinalRingSpin7{from{transform:translate(-50%,-50%) rotate(0deg);}to{transform:translate(-50%,-50%) rotate(360deg);}}

/* Serviceboxen: wie Referenz, aber nicht riesig */
.oct-section-3a-ideal-v5 .oct3a-step{
    min-height:118px !important;
    padding:22px 26px 20px 112px !important;
    background:linear-gradient(135deg, rgba(255,255,255,.995) 0%, rgba(255,255,255,.965) 56%, rgba(250,251,252,.94) 100%) !important;
}

.oct-section-3a-ideal-v5 .oct3a-step::after{
    padding:1px !important;
    background:linear-gradient(135deg, rgba(7,17,27,.22) 0%, rgba(7,17,27,.16) 44%, rgba(255,226,0,.74) 100%) !important;
}

.oct-section-3a-ideal-v5 .oct3a-step:hover::after{
    background:linear-gradient(135deg, rgba(37,40,43,.36) 0%, rgba(176,136,20,.68) 44%, rgba(255,226,0,1) 100%) !important;
    filter:drop-shadow(0 0 8px rgba(255,226,0,.18)) !important;
}

.oct-section-3a-ideal-v5 .oct3a-step-icon svg path,
.oct-section-3a-ideal-v5 .oct3a-step-icon svg circle,
.oct-section-3a-ideal-v5 .oct3a-fact svg path,
.oct-section-3a-ideal-v5 .oct3a-fact svg circle{
    stroke-width:2.15 !important;
}

.oct-section-3a-ideal-v5 .oct3a-fact:nth-child(2) svg path,
.oct-section-3a-ideal-v5 .oct3a-step:nth-child(2) svg path{
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
}

@media(max-width:1199px){
    .oct-section-3a-ideal-v5 .oct3a-hud-ring{
        width:min(690px, 86vw) !important;
        height:min(690px, 86vw) !important;
    }
}

@media(max-width:767px){
    .oct-section-3a-ideal-v5 .oct3a-hud-ring{
        width:min(420px, 94vw) !important;
        height:min(420px, 94vw) !important;
    }
}


/* =========================================================
   SECTION 3A V27 – REAL VISIBLE MOTOR HUD RINGS
   Basis bleibt V25. Nur die Ringe hinter dem Motor werden
   robust sichtbar gemacht: keine Layout-Verschiebung, echte
   rotierende Halbkreise/Silber-Gold-Orbits.
========================================================= */

.oct-section-3a-ideal-v5 .oct3a-engine-stage{
    position:relative !important;
    isolation:isolate !important;
    overflow:visible !important;
}

.oct-section-3a-ideal-v5 .oct3a-hud-ring{
    display:block !important;
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    width:clamp(620px, 42vw, 820px) !important;
    height:clamp(620px, 42vw, 820px) !important;
    transform:translate(-50%, -50%) !important;
    transform-origin:center center !important;
    z-index:2 !important;
    pointer-events:none !important;
    border-radius:50% !important;
    overflow:visible !important;
    opacity:1 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    filter:none !important;
}

.oct-section-3a-ideal-v5 .oct3a-hud-ring::before,
.oct-section-3a-ideal-v5 .oct3a-hud-ring::after,
.oct-section-3a-ideal-v5 .oct3a-hud-ring .oct3a-orbit{
    content:"" !important;
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    display:block !important;
    border-radius:50% !important;
    pointer-events:none !important;
    transform:translate(-50%, -50%) rotate(0deg) !important;
    transform-origin:center center !important;
    will-change:transform !important;
    opacity:1 !important;
    background:transparent !important;
    box-sizing:border-box !important;
}

/* großer sehr feiner Silberring */
.oct-section-3a-ideal-v5 .oct3a-hud-ring::before{
    width:100% !important;
    height:100% !important;
    border:1px solid rgba(120,134,146,.28) !important;
    box-shadow:0 0 44px rgba(7,17,27,.025) !important;
    animation:oct3aRealRingA 155s linear infinite !important;
}

/* gestrichelter Technikring */
.oct-section-3a-ideal-v5 .oct3a-hud-ring::after{
    width:88% !important;
    height:88% !important;
    border:1px dashed rgba(105,120,134,.36) !important;
    animation:oct3aRealRingB 118s linear infinite reverse !important;
}

/* äußerer Gold-Halbring rechts/oben */
.oct-section-3a-ideal-v5 .oct3a-orbit.o1{
    width:96% !important;
    height:96% !important;
    border:2px solid transparent !important;
    border-top-color:rgba(255,226,0,.70) !important;
    border-right-color:rgba(255,226,0,.46) !important;
    filter:drop-shadow(0 0 6px rgba(255,226,0,.12)) !important;
    animation:oct3aRealRingC 72s linear infinite !important;
}

/* innerer Silber-Halbring links/unten */
.oct-section-3a-ideal-v5 .oct3a-orbit.o2{
    width:76% !important;
    height:76% !important;
    border:1px solid transparent !important;
    border-left-color:rgba(126,140,152,.34) !important;
    border-bottom-color:rgba(126,140,152,.26) !important;
    animation:oct3aRealRingD 96s linear infinite reverse !important;
}

/* kurzer Gold-Tick links unten */
.oct-section-3a-ideal-v5 .oct3a-orbit.o3{
    width:72% !important;
    height:72% !important;
    border:4px solid transparent !important;
    border-left-color:rgba(255,226,0,.48) !important;
    border-bottom-color:rgba(255,226,0,.18) !important;
    filter:drop-shadow(0 0 8px rgba(255,226,0,.12)) !important;
    animation:oct3aRealRingE 64s linear infinite !important;
}

/* punktierter Außenring wie im Referenzbild */
.oct-section-3a-ideal-v5 .oct3a-orbit.o4{
    width:108% !important;
    height:108% !important;
    background:repeating-conic-gradient(
        from 120deg,
        rgba(126,140,152,.48) 0deg 1.4deg,
        transparent 1.4deg 5.8deg
    ) !important;
    -webkit-mask:radial-gradient(circle, transparent 0%, transparent 90.2%, #000 90.8%, #000 91.6%, transparent 92.2%, transparent 100%) !important;
    mask:radial-gradient(circle, transparent 0%, transparent 90.2%, #000 90.8%, #000 91.6%, transparent 92.2%, transparent 100%) !important;
    opacity:.54 !important;
    animation:oct3aRealRingF 136s linear infinite reverse !important;
}

/* zweiter feiner Goldbogen, versetzt */
.oct-section-3a-ideal-v5 .oct3a-orbit.o5{
    width:84% !important;
    height:84% !important;
    border:1.5px solid transparent !important;
    border-top-color:rgba(255,226,0,.32) !important;
    border-left-color:rgba(255,226,0,.22) !important;
    animation:oct3aRealRingG 182s linear infinite !important;
}

.oct-section-3a-ideal-v5 .oct3a-engine-shadow{
    z-index:1 !important;
    background:radial-gradient(ellipse, rgba(7,17,27,.18) 0%, rgba(7,17,27,.055) 46%, transparent 74%) !important;
}

.oct-section-3a-ideal-v5 .oct3a-engine{
    position:relative !important;
    z-index:5 !important;
}

.oct-section-3a-ideal-v5 .oct3a-callout,
.oct-section-3a-ideal-v5 .oct3a-dots{
    z-index:8 !important;
}

@keyframes oct3aRealRingA{from{transform:translate(-50%,-50%) rotate(0deg);}to{transform:translate(-50%,-50%) rotate(360deg);}}
@keyframes oct3aRealRingB{from{transform:translate(-50%,-50%) rotate(0deg);}to{transform:translate(-50%,-50%) rotate(360deg);}}
@keyframes oct3aRealRingC{from{transform:translate(-50%,-50%) rotate(-18deg);}to{transform:translate(-50%,-50%) rotate(342deg);}}
@keyframes oct3aRealRingD{from{transform:translate(-50%,-50%) rotate(22deg);}to{transform:translate(-50%,-50%) rotate(-338deg);}}
@keyframes oct3aRealRingE{from{transform:translate(-50%,-50%) rotate(-38deg);}to{transform:translate(-50%,-50%) rotate(322deg);}}
@keyframes oct3aRealRingF{from{transform:translate(-50%,-50%) rotate(0deg);}to{transform:translate(-50%,-50%) rotate(-360deg);}}
@keyframes oct3aRealRingG{from{transform:translate(-50%,-50%) rotate(82deg);}to{transform:translate(-50%,-50%) rotate(442deg);}}

@media(max-width:1199px){
    .oct-section-3a-ideal-v5 .oct3a-hud-ring{
        width:min(660px, 88vw) !important;
        height:min(660px, 88vw) !important;
    }
}

@media(max-width:767px){
    .oct-section-3a-ideal-v5 .oct3a-hud-ring{
        width:min(430px, 96vw) !important;
        height:min(430px, 96vw) !important;
        opacity:.75 !important;
    }
}



/* =========================================================
   V28 REAL SVG RINGS – direkt hinter dem Motor sichtbar
   Grund: Die alten CSS-Conic-Ringe waren je nach Cache/Browser
   nicht sichtbar. Diese SVG-Ringe sind echte Elemente, liegen
   fix hinter dem Motor und rotieren unabhängig.
========================================================= */
.oct-section-3a-ideal-v5 .oct3a-engine-stage{
    overflow:visible !important;
    isolation:isolate !important;
}

.oct-section-3a-ideal-v5 .oct3a-real-rings{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    width:min(720px, 43vw, calc(100vh - 95px)) !important;
    height:min(720px, 43vw, calc(100vh - 95px)) !important;
    transform:translate(-50%, -50%) !important;
    z-index:2 !important;
    pointer-events:none !important;
    overflow:visible !important;
    opacity:1 !important;
}

.oct-section-3a-ideal-v5 .oct3a-hud-ring{
    z-index:1 !important;
    opacity:.42 !important;
    background:radial-gradient(circle, rgba(7,17,27,.045) 0%, rgba(7,17,27,.018) 39%, transparent 70%) !important;
}

.oct-section-3a-ideal-v5 .oct3a-engine{
    position:relative !important;
    z-index:5 !important;
}

.oct-section-3a-ideal-v5 .oct3a-callout,
.oct-section-3a-ideal-v5 .oct3a-dots{
    z-index:8 !important;
}

.oct-section-3a-ideal-v5 .oct3a-real-rings circle{
    fill:none !important;
    vector-effect:non-scaling-stroke !important;
    transform-box:fill-box !important;
    transform-origin:center center !important;
}

.oct-section-3a-ideal-v5 .oct3a-ring-soft{
    stroke:rgba(7,17,27,.16) !important;
    stroke-width:1.15 !important;
}

.oct-section-3a-ideal-v5 .oct3a-ring-soft.inner{
    stroke:rgba(7,17,27,.095) !important;
    stroke-width:1 !important;
}

.oct-section-3a-ideal-v5 .oct3a-ring-dashed{
    stroke:rgba(7,17,27,.20) !important;
    stroke-width:1.1 !important;
    stroke-dasharray:4 9 !important;
}

.oct-section-3a-ideal-v5 .oct3a-ring-dotted{
    stroke:rgba(116,128,140,.34) !important;
    stroke-width:2 !important;
    stroke-linecap:round !important;
    stroke-dasharray:1 12 !important;
}

.oct-section-3a-ideal-v5 .oct3a-ring-arc{
    stroke-linecap:round !important;
    filter:url(#oct3aRingGlow) !important;
}

.oct-section-3a-ideal-v5 .arc-gold-a{
    stroke:#FFE200 !important;
    stroke-width:2.2 !important;
    stroke-dasharray:150 1650 !important;
    stroke-dashoffset:170 !important;
}

.oct-section-3a-ideal-v5 .arc-gold-b{
    stroke:rgba(255,226,0,.86) !important;
    stroke-width:1.8 !important;
    stroke-dasharray:92 1900 !important;
    stroke-dashoffset:620 !important;
}

.oct-section-3a-ideal-v5 .arc-silver{
    stroke:rgba(145,154,162,.42) !important;
    stroke-width:1.5 !important;
    stroke-dasharray:210 1400 !important;
    stroke-dashoffset:920 !important;
}

.oct-section-3a-ideal-v5 .arc-inner{
    stroke:rgba(255,226,0,.55) !important;
    stroke-width:1.4 !important;
    stroke-dasharray:72 1100 !important;
    stroke-dashoffset:330 !important;
}

.oct-section-3a-ideal-v5 .oct3a-real-ring-spin{
    transform-box:fill-box !important;
    transform-origin:center center !important;
    will-change:transform !important;
}

.oct-section-3a-ideal-v5 .spin-a{ animation:oct3aSvgRingSpinA 70s linear infinite !important; }
.oct-section-3a-ideal-v5 .spin-b{ animation:oct3aSvgRingSpinB 96s linear infinite reverse !important; }
.oct-section-3a-ideal-v5 .spin-c{ animation:oct3aSvgRingSpinC 118s linear infinite !important; }
.oct-section-3a-ideal-v5 .spin-d{ animation:oct3aSvgRingSpinD 54s linear infinite reverse !important; }

@keyframes oct3aSvgRingSpinA{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
@keyframes oct3aSvgRingSpinB{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
@keyframes oct3aSvgRingSpinC{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
@keyframes oct3aSvgRingSpinD{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }

@media (max-width:1199px){
    .oct-section-3a-ideal-v5 .oct3a-real-rings{
        width:min(640px, 88vw) !important;
        height:min(640px, 88vw) !important;
    }
}

@media (max-width:767px){
    .oct-section-3a-ideal-v5 .oct3a-real-rings{
        width:min(460px, 104vw) !important;
        height:min(460px, 104vw) !important;
    }
}


/* =========================================================
   V29 RING CLEANUP – keine Punkte / keine gestrichelten Kreise
   - alle Hintergrundringe sind jetzt feine durchgehende Linien
   - Gold-/Silbersegmente bleiben, aber weicher und mit runden Enden
   - Rotation bleibt unverändert aktiv
========================================================= */
.oct-section-3a-ideal-v5 .oct3a-ring-dashed,
.oct-section-3a-ideal-v5 .oct3a-ring-dotted{
    stroke:rgba(7,17,27,.135) !important;
    stroke-width:1.05 !important;
    stroke-dasharray:none !important;
    stroke-linecap:round !important;
    opacity:.72 !important;
}

.oct-section-3a-ideal-v5 .oct3a-ring-dotted{
    stroke:rgba(125,138,150,.18) !important;
    stroke-width:1.1 !important;
    opacity:.58 !important;
}

.oct-section-3a-ideal-v5 .oct3a-ring-soft{
    stroke:rgba(7,17,27,.13) !important;
    stroke-width:1.05 !important;
    opacity:.66 !important;
}

.oct-section-3a-ideal-v5 .oct3a-ring-soft.inner{
    stroke:rgba(7,17,27,.085) !important;
    stroke-width:.95 !important;
    opacity:.55 !important;
}

.oct-section-3a-ideal-v5 .oct3a-ring-arc{
    stroke-linecap:round !important;
    opacity:.82 !important;
    filter:url(#oct3aRingGlow) !important;
}

.oct-section-3a-ideal-v5 .arc-gold-a{
    stroke:#FFE200 !important;
    stroke-width:2.05 !important;
    stroke-dasharray:128 1780 !important;
    stroke-dashoffset:135 !important;
    opacity:.88 !important;
}

.oct-section-3a-ideal-v5 .arc-gold-b{
    stroke:rgba(255,226,0,.72) !important;
    stroke-width:1.65 !important;
    stroke-dasharray:82 1980 !important;
    stroke-dashoffset:690 !important;
    opacity:.78 !important;
}

.oct-section-3a-ideal-v5 .arc-silver{
    stroke:rgba(120,133,145,.34) !important;
    stroke-width:1.35 !important;
    stroke-dasharray:170 1500 !important;
    stroke-dashoffset:940 !important;
    opacity:.60 !important;
}

.oct-section-3a-ideal-v5 .arc-inner{
    stroke:rgba(255,226,0,.48) !important;
    stroke-width:1.25 !important;
    stroke-dasharray:58 1120 !important;
    stroke-dashoffset:350 !important;
    opacity:.66 !important;
}



/* =========================================================
   V30 – ICONS + DOT POSITION CLEANUP
   - Dots weiter unter den Motor gesetzt
   - Transport: Boot auf Trailer, feiner gezeichnet
   - Montage/Einbau: zwei Werkzeuge statt undefinierbares Einzelwerkzeug
========================================================= */

.oct-section-3a-ideal-v5 .oct3a-dots{
    bottom:-26px !important;
    z-index:20 !important;
}

.oct-section-3a-ideal-v5 .oct3a-step-icon svg,
.oct-section-3a-ideal-v5 .oct3a-fact svg{
    overflow:visible !important;
}

.oct-section-3a-ideal-v5 .oct3a-step-icon svg *,
.oct-section-3a-ideal-v5 .oct3a-fact svg *{
    stroke-width:1.08 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
    vector-effect:non-scaling-stroke !important;
}

.oct-section-3a-ideal-v5 .oct3a-step-icon .oct3a-icon-boat-trailer,
.oct-section-3a-ideal-v5 .oct3a-step-icon .oct3a-icon-tools{
    width:42px !important;
    height:42px !important;
}

.oct-section-3a-ideal-v5 .oct3a-fact .oct3a-icon-tools{
    width:34px !important;
    height:34px !important;
}

@media (max-width:767px){
    .oct-section-3a-ideal-v5 .oct3a-dots{
        bottom:-18px !important;
    }
}


/* =========================================================
   V33 – PNG ICONS AUS /images/ EINBINDEN
   - Transport: /images/boot.png
   - Einbau & Montage: /images/werkzeug.png
========================================================= */
.oct-section-3a-ideal-v5 .oct3a-icon-img{
    display:block !important;
    width:42px !important;
    height:42px !important;
    object-fit:contain !important;
    object-position:center center !important;
    opacity:1 !important;
    filter:none !important;
}

.oct-section-3a-ideal-v5 .oct3a-fact .oct3a-icon-img{
    width:34px !important;
    height:34px !important;
    margin:0 auto !important;
}

.oct-section-3a-ideal-v5 .oct3a-step-icon .oct3a-icon-img{
    width:44px !important;
    height:44px !important;
}

.oct-section-3a-ideal-v5 .oct3a-step-icon .oct3a-icon-img.oct3a-icon-transport-img{
    width:48px !important;
    height:48px !important;
}

.oct-section-3a-ideal-v5 .oct3a-step-icon .oct3a-icon-img.oct3a-icon-tools-img{
    width:43px !important;
    height:43px !important;
}

@media (max-width:767px){
    .oct-section-3a-ideal-v5 .oct3a-step-icon .oct3a-icon-img{
        width:38px !important;
        height:38px !important;
    }
}


/* =========================================================
   V26 � 1920�1080 FULL VIEWPORT LOCK
   �Ideale L�sung f�r den Bodensee� = eine volle Bildschirmh�he.
========================================================= */
@media (min-width: 1280px) {
  html body .oct-section-3a-ideal-v5 {
    box-sizing: border-box !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    height: 100vh !important;
    height: 100dvh !important;
    display: flex !important;
    align-items: center !important;
  }

  html body .oct-section-3a-ideal-v5 .oct3a-wrap {
    width: 100% !important;
    min-height: 0 !important;
    align-items: center !important;
  }
}