/* =========================================================
   ROW 1 HERO – BASIS
========================================================= */

.oct-home-hero-v20 {
    position: relative !important;
    min-height: auto !important;
    height: auto !important;
    padding-top: clamp(125px, 9vh, 155px) !important;
    padding-bottom: clamp(70px, 7vh, 110px) !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
    color: #f5f7fa !important;
    font-family: 'Roboto', Arial, sans-serif !important;
    background: #000000 !important;
}

@media (min-width:1800px) and (min-height:950px) {
    .oct-home-hero-v20 {
        min-height: 100vh !important;
        padding-top: clamp(125px, 9vh, 170px) !important;
        padding-bottom: clamp(90px, 8vh, 135px) !important;
    }
}

@media (min-width:2200px) and (min-height:1200px) {
    .oct-home-hero-v20 {
        min-height: 100vh !important;
        padding-top: clamp(140px, 9vh, 180px) !important;
        padding-bottom: clamp(105px, 8vh, 150px) !important;
    }
}

@media (max-width:1700px), (max-height:940px) {
    .oct-home-hero-v20 {
        min-height: auto !important;
        padding-top: 135px !important;
        padding-bottom: 80px !important;
    }
}

.oct-home-hero-v20::before,
.oct-home-hero-v20::after {
    display: none !important;
    content: none !important;
}


/* =========================================================
   HINTERGRUND
========================================================= */

.oct-home-hero-v20-bg {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background: url('../img/hero-sl2.jpg') center center / cover no-repeat !important;
    transform-origin: center 46% !important;
    animation: octHeroKenBurnsZoom 26s ease-out forwards !important;
    will-change: transform !important;
    filter: contrast(1.06) saturate(1.05) brightness(0.97) !important;
}


/* =========================================================
   OVERLAY – HELLERER STAND
========================================================= */

.oct-home-hero-v20-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,0.30) 0%,
            rgba(0,0,0,0.15) 25%,
            rgba(0,0,0,0.06) 48%,
            rgba(0,0,0,0.26) 77%,
            rgba(0,0,0,0.50) 100%
        ),
        linear-gradient(
            to bottom,
            rgba(0,0,0,0.32) 0%,
            rgba(0,0,0,0.05) 34%,
            rgba(0,0,0,0.14) 66%,
            rgba(0,0,0,0.58) 100%
        ) !important;
}


/* =========================================================
   ATMOSPHÄRE
========================================================= */

.oct-home-hero-v20-sun {
    position: absolute !important;
    left: 39% !important;
    top: 6% !important;
    width: 42vw !important;
    height: 30vw !important;
    z-index: 3 !important;
    pointer-events: none !important;
    background:
        radial-gradient(
            circle,
            rgba(255,226,0,0.15) 0%,
            rgba(255,148,34,0.10) 30%,
            rgba(255,226,0,0.035) 54%,
            transparent 74%
        ) !important;
    filter: blur(26px) !important;
    opacity: 0.78 !important;
    animation: octHomeSunBreathV20 8.5s ease-in-out infinite alternate;
}

@keyframes octHomeSunBreathV20 {
    0% {
        opacity: 0.60;
        transform: scale(0.96);
    }

    100% {
        opacity: 0.84;
        transform: scale(1.05);
    }
}

.oct-home-hero-v20-water {
    position: absolute !important;
    right: 6% !important;
    bottom: 7% !important;
    width: 48vw !important;
    height: 22vw !important;
    z-index: 3 !important;
    pointer-events: none !important;
    background:
        radial-gradient(
            ellipse,
            rgba(255,226,0,0.09) 0%,
            rgba(255,140,34,0.05) 34%,
            transparent 72%
        ) !important;
    filter: blur(30px) !important;
    opacity: 0.58 !important;
}


/* =========================================================
   HUD RINGS / TECH-KREISE
========================================================= */

.oct-home-hero-v20-rings {
    position: absolute !important;
    inset: 0 !important;
    z-index: 4 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

.oct-home-hero-v20-ring {
    position: absolute !important;
    display: block !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    opacity: 0.34 !important;
}

.oct-home-hero-v20-ring.r1 {
    right: -135px !important;
    top: 18% !important;
    width: 410px !important;
    height: 410px !important;
    border: 1px solid rgba(255,226,0,0.18) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.035),
        0 0 36px rgba(255,226,0,0.045) !important;
    animation: octHomeRingFloatV20 9s ease-in-out infinite alternate;
}

.oct-home-hero-v20-ring.r1::before {
    content: "" !important;
    position: absolute !important;
    inset: 34px !important;
    border-radius: 50% !important;
    border: 1px dashed rgba(255,255,255,0.10) !important;
}

.oct-home-hero-v20-ring.r1::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: -8px !important;
    width: 72px !important;
    height: 16px !important;
    transform: translateX(-50%) !important;
    border-top: 2px solid rgba(255,226,0,0.30) !important;
    border-radius: 50% !important;
}

.oct-home-hero-v20-ring.r2 {
    left: -160px !important;
    bottom: 8% !important;
    width: 360px !important;
    height: 360px !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,226,0,0.055),
        0 0 34px rgba(255,226,0,0.035) !important;
    opacity: 0.26 !important;
    animation: octHomeRingFloatV20 11s ease-in-out infinite alternate-reverse;
}

.oct-home-hero-v20-ring.r2::before {
    content: "" !important;
    position: absolute !important;
    inset: 42px !important;
    border-radius: 50% !important;
    border: 1px dashed rgba(255,226,0,0.12) !important;
}

@keyframes octHomeRingFloatV20 {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.22;
    }

    100% {
        transform: translateY(-14px) rotate(8deg);
        opacity: 0.38;
    }
}


/* =========================================================
   EXTRA TECH STRIPES / GELBE STREIFEN HINTER DEM PANEL
========================================================= */

.oct-home-hero-v20-energy {
    position: absolute !important;
    right: -8vw !important;
    top: 50% !important;
    width: 72vw !important;
    height: 620px !important;
    transform: translateY(-50%) !important;
    z-index: 6 !important;
    pointer-events: none !important;
    overflow: visible !important;
    opacity: 0.82 !important;
}

.oct-home-hero-v20-energy-line {
    position: absolute !important;
    display: block !important;
    height: 2px !important;
    border-radius: 40px !important;
    transform: rotate(-20deg) !important;
    opacity: 0.36 !important;
    animation: octHomeEnergyMoveV20 6.8s ease-in-out infinite alternate;
}

.oct-home-hero-v20-energy-line.e1 {
    right: -50px !important;
    top: 78px !important;
    width: 780px !important;
    background: linear-gradient(90deg, transparent, rgba(255,226,0,0.38), rgba(255,255,255,0.14), transparent) !important;
    filter: drop-shadow(0 0 13px rgba(255,226,0,0.10)) !important;
    animation-delay: 0.1s !important;
}

.oct-home-hero-v20-energy-line.e2 {
    right: 120px !important;
    top: 150px !important;
    width: 560px !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.17), transparent) !important;
    animation-delay: 0.8s !important;
}

.oct-home-hero-v20-energy-line.e3 {
    right: -130px !important;
    top: 255px !important;
    width: 910px !important;
    background: linear-gradient(90deg, transparent, rgba(255,226,0,0.32), rgba(255,255,255,0.13), transparent) !important;
    filter: drop-shadow(0 0 13px rgba(255,226,0,0.10)) !important;
    animation-delay: 1.5s !important;
}

.oct-home-hero-v20-energy-line.e4 {
    right: 180px !important;
    top: 345px !important;
    width: 520px !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent) !important;
    animation-delay: 2.1s !important;
}

.oct-home-hero-v20-energy-line.e5 {
    right: -70px !important;
    top: 455px !important;
    width: 710px !important;
    background: linear-gradient(90deg, transparent, rgba(255,226,0,0.24), transparent) !important;
    animation-delay: 3s !important;
}

.oct-home-hero-v20-energy-line.e6 {
    right: 360px !important;
    top: 40px !important;
    width: 360px !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(255,226,0,0.20), transparent) !important;
    animation-delay: 3.7s !important;
}

.oct-home-hero-v20-energy-line.e7 {
    right: 380px !important;
    top: 540px !important;
    width: 470px !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), rgba(255,226,0,0.18), transparent) !important;
    animation-delay: 4.4s !important;
}

@keyframes octHomeEnergyMoveV20 {
    0% {
        opacity: 0.14;
        margin-right: -18px;
        filter: brightness(0.92);
    }

    100% {
        opacity: 0.66;
        margin-right: 28px;
        filter: brightness(1.16);
    }
}


/* =========================================================
   VÖGEL – SMOOTHER MOTION
========================================================= */

.oct-home-birds-v20 {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 52% !important;
    z-index: 7 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

.oct-home-bird-track-v20 {
    position: absolute !important;
    left: 112vw;
    width: 54px !important;
    height: 28px !important;
    opacity: 0;
    pointer-events: none !important;
    will-change: left, opacity !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
}

.oct-home-bird-body-v20 {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 54px !important;
    height: 28px !important;
    pointer-events: none !important;
    will-change: transform !important;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: infinite !important;
    animation-direction: alternate !important;
}

.oct-home-bird-body-v20::before,
.oct-home-bird-body-v20::after {
    content: "" !important;
    position: absolute !important;
    top: 12px !important;
    width: 31px !important;
    height: 13px !important;
    border-top: 2px solid rgba(255,255,255,0.64) !important;
    border-radius: 50% !important;
    filter:
        drop-shadow(0 2px 4px rgba(0,0,0,0.42))
        drop-shadow(0 0 5px rgba(255,226,0,0.12)) !important;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: infinite !important;
    animation-direction: alternate !important;
}

.oct-home-bird-body-v20::before {
    left: 0 !important;
    transform-origin: 100% 55%;
    animation-name: octBirdWingLeftV20;
}

.oct-home-bird-body-v20::after {
    right: 0 !important;
    transform-origin: 0% 55%;
    animation-name: octBirdWingRightV20;
}

@keyframes octBirdWingLeftV20 {
    0% { transform: rotate(19deg) translateY(1px); }
    48% { transform: rotate(8deg) translateY(-1px); }
    100% { transform: rotate(-5deg) translateY(-2px); }
}

@keyframes octBirdWingRightV20 {
    0% { transform: rotate(-19deg) translateY(1px); }
    48% { transform: rotate(-8deg) translateY(-1px); }
    100% { transform: rotate(5deg) translateY(-2px); }
}

/* Vogel 1 */
.oct-home-bird-track-v20.b1 {
    top: 20% !important;
    animation-name: octBirdTrackV20A !important;
    animation-duration: 26s !important;
    animation-delay: 0s !important;
}

.oct-home-bird-track-v20.b1 .oct-home-bird-body-v20 {
    transform: scale(0.90) rotate(-5deg);
    animation-name: octBirdBodyV20A !important;
    animation-duration: 3.6s !important;
}

.oct-home-bird-track-v20.b1 .oct-home-bird-body-v20::before,
.oct-home-bird-track-v20.b1 .oct-home-bird-body-v20::after {
    animation-duration: 1.45s !important;
}

/* Vogel 2 */
.oct-home-bird-track-v20.b2 {
    top: 29% !important;
    width: 46px !important;
    animation-name: octBirdTrackV20B !important;
    animation-duration: 31s !important;
    animation-delay: 4s !important;
}

.oct-home-bird-track-v20.b2 .oct-home-bird-body-v20 {
    width: 46px !important;
    transform: scale(0.72) rotate(-2deg);
    animation-name: octBirdBodyV20B !important;
    animation-duration: 4.2s !important;
}

.oct-home-bird-track-v20.b2 .oct-home-bird-body-v20::before,
.oct-home-bird-track-v20.b2 .oct-home-bird-body-v20::after {
    animation-duration: 1.75s !important;
}

/* Vogel 3 */
.oct-home-bird-track-v20.b3 {
    top: 15% !important;
    width: 40px !important;
    animation-name: octBirdTrackV20C !important;
    animation-duration: 36s !important;
    animation-delay: 8s !important;
}

.oct-home-bird-track-v20.b3 .oct-home-bird-body-v20 {
    width: 40px !important;
    transform: scale(0.56) rotate(-6deg);
    animation-name: octBirdBodyV20C !important;
    animation-duration: 4.8s !important;
}

.oct-home-bird-track-v20.b3 .oct-home-bird-body-v20::before,
.oct-home-bird-track-v20.b3 .oct-home-bird-body-v20::after {
    animation-duration: 2.05s !important;
}

/* Vogel 4 */
.oct-home-bird-track-v20.b4 {
    top: 36% !important;
    width: 50px !important;
    animation-name: octBirdTrackV20D !important;
    animation-duration: 29s !important;
    animation-delay: 12s !important;
}

.oct-home-bird-track-v20.b4 .oct-home-bird-body-v20 {
    width: 50px !important;
    transform: scale(0.82) rotate(1deg);
    animation-name: octBirdBodyV20D !important;
    animation-duration: 3.9s !important;
}

.oct-home-bird-track-v20.b4 .oct-home-bird-body-v20::before,
.oct-home-bird-track-v20.b4 .oct-home-bird-body-v20::after {
    animation-duration: 1.55s !important;
}

/* Vogel 5 */
.oct-home-bird-track-v20.b5 {
    top: 25% !important;
    width: 36px !important;
    animation-name: octBirdTrackV20E !important;
    animation-duration: 40s !important;
    animation-delay: 16s !important;
}

.oct-home-bird-track-v20.b5 .oct-home-bird-body-v20 {
    width: 36px !important;
    transform: scale(0.50) rotate(-4deg);
    animation-name: octBirdBodyV20E !important;
    animation-duration: 5.2s !important;
}

.oct-home-bird-track-v20.b5 .oct-home-bird-body-v20::before,
.oct-home-bird-track-v20.b5 .oct-home-bird-body-v20::after {
    animation-duration: 2.25s !important;
}


/* Horizontale Flugbahnen */
@keyframes octBirdTrackV20A {
    0% { left: 108vw; opacity: 0; }
    8% { opacity: 0.64; }
    88% { opacity: 0.50; }
    96% { opacity: 0.14; }
    100% { left: -14vw; opacity: 0; }
}

@keyframes octBirdTrackV20B {
    0% { left: 112vw; opacity: 0; }
    10% { opacity: 0.54; }
    88% { opacity: 0.42; }
    100% { left: -14vw; opacity: 0; }
}

@keyframes octBirdTrackV20C {
    0% { left: 116vw; opacity: 0; }
    12% { opacity: 0.44; }
    88% { opacity: 0.34; }
    100% { left: -16vw; opacity: 0; }
}

@keyframes octBirdTrackV20D {
    0% { left: 110vw; opacity: 0; }
    9% { opacity: 0.58; }
    88% { opacity: 0.42; }
    100% { left: -15vw; opacity: 0; }
}

@keyframes octBirdTrackV20E {
    0% { left: 118vw; opacity: 0; }
    12% { opacity: 0.36; }
    88% { opacity: 0.26; }
    100% { left: -18vw; opacity: 0; }
}

/* Body-Bewegungen */
@keyframes octBirdBodyV20A {
    0% { transform: translateY(0) scale(0.90) rotate(-5deg); }
    100% { transform: translateY(-10px) scale(0.90) rotate(-4deg); }
}

@keyframes octBirdBodyV20B {
    0% { transform: translateY(4px) scale(0.72) rotate(-2deg); }
    100% { transform: translateY(-8px) scale(0.72) rotate(-3deg); }
}

@keyframes octBirdBodyV20C {
    0% { transform: translateY(-2px) scale(0.56) rotate(-6deg); }
    100% { transform: translateY(8px) scale(0.56) rotate(-5deg); }
}

@keyframes octBirdBodyV20D {
    0% { transform: translateY(6px) scale(0.82) rotate(1deg); }
    100% { transform: translateY(-7px) scale(0.82) rotate(0deg); }
}

@keyframes octBirdBodyV20E {
    0% { transform: translateY(-3px) scale(0.50) rotate(-4deg); }
    100% { transform: translateY(6px) scale(0.50) rotate(-5deg); }
}


/* =========================================================
   ALTE TECH-LINIEN / ECKEN
========================================================= */

.oct-home-hero-v20-tech-top {
    position: absolute !important;
    right: 4.4vw !important;
    top: 17vh !important;
    width: 460px !important;
    height: 150px !important;
    z-index: 4 !important;
    pointer-events: none !important;
    opacity: 0.30 !important;
    border-top: 1px solid rgba(255,226,0,0.20) !important;
    border-right: 1px solid rgba(255,226,0,0.12) !important;
}

.oct-home-hero-v20-tech-top::before {
    content: "" !important;
    position: absolute !important;
    right: 0 !important;
    top: 46px !important;
    width: 300px !important;
    height: 1px !important;
    background: linear-gradient(to left, rgba(255,226,0,0.28), transparent) !important;
}

.oct-home-hero-v20-tech-top::after {
    content: "" !important;
    position: absolute !important;
    right: 0 !important;
    top: 92px !important;
    width: 195px !important;
    height: 1px !important;
    background: linear-gradient(to left, rgba(255,255,255,0.14), transparent) !important;
}

.oct-home-hero-v20-tech-bottom {
    position: absolute !important;
    left: 6vw !important;
    bottom: 11vh !important;
    width: 340px !important;
    height: 130px !important;
    z-index: 4 !important;
    pointer-events: none !important;
    opacity: 0.24 !important;
    border-left: 1px solid rgba(255,226,0,0.14) !important;
    border-bottom: 1px solid rgba(255,226,0,0.18) !important;
}

.oct-home-hero-v20-tech-bottom::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 45px !important;
    width: 220px !important;
    height: 1px !important;
    background: linear-gradient(to right, rgba(255,226,0,0.24), transparent) !important;
}


/* =========================================================
   DIAGONALE STREIFEN BASIS
========================================================= */

.oct-home-hero-v20-beams {
    position: absolute !important;
    inset: 0 !important;
    z-index: 5 !important;
    pointer-events: none !important;
    overflow: visible !important;
    opacity: 0.72 !important;
}

.oct-home-hero-v20-beam {
    position: absolute !important;
    display: block !important;
    height: 2px !important;
    border-radius: 40px !important;
    transform: rotate(-20deg) !important;
    opacity: 0.30 !important;
    animation: octHomeHeroBeamMoveV20 7.4s ease-in-out infinite alternate;
}

.oct-home-hero-v20-beam.b1 {
    right: -120px !important;
    top: 31% !important;
    width: 720px !important;
    background: linear-gradient(90deg, transparent, rgba(255,226,0,0.30), rgba(255,255,255,0.11), transparent) !important;
    animation-delay: 0.1s;
}

.oct-home-hero-v20-beam.b2 {
    right: 120px !important;
    top: 41% !important;
    width: 520px !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent) !important;
    animation-delay: 0.9s;
}

.oct-home-hero-v20-beam.b3 {
    right: -80px !important;
    top: 54% !important;
    width: 820px !important;
    background: linear-gradient(90deg, transparent, rgba(255,226,0,0.25), rgba(255,255,255,0.12), transparent) !important;
    animation-delay: 1.7s;
}

.oct-home-hero-v20-beam.b4 {
    right: 210px !important;
    top: 67% !important;
    width: 510px !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent) !important;
    animation-delay: 2.5s;
}

.oct-home-hero-v20-beam.b5 {
    left: -220px !important;
    top: 28% !important;
    width: 760px !important;
    background: linear-gradient(90deg, transparent, rgba(255,226,0,0.20), rgba(255,255,255,0.09), transparent) !important;
    animation-delay: 1.1s;
}

.oct-home-hero-v20-beam.b6 {
    left: -160px !important;
    top: 61% !important;
    width: 640px !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.11), transparent) !important;
    animation-delay: 2.8s;
}

@keyframes octHomeHeroBeamMoveV20 {
    0% {
        opacity: 0.10;
        margin-right: -22px;
        margin-left: -8px;
        filter: brightness(0.90);
    }

    100% {
        opacity: 0.52;
        margin-right: 30px;
        margin-left: 14px;
        filter: brightness(1.12);
    }
}


/* =========================================================
   INNER / POSITION
========================================================= */

.oct-home-hero-v20 .oct-home-inner {
    max-width:1600px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative !important;
    z-index: 10 !important;
    transform: none !important;
}

.oct-home-hero-v20-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(500px, 600px) !important;
    gap: 42px !important;
    align-items: center !important;
}

.oct-home-hero-v20-spacer {
    min-height: 460px !important;
}


/* =========================================================
   PANEL
========================================================= */

.oct-home-hero-v20-panel {
    position: relative !important;
    justify-self: end !important;
    align-self: center !important;
    width: 100% !important;
    max-width: 600px !important;
    margin-right: -60px !important;
    padding: 46px 48px 44px 48px !important;

    background:
        linear-gradient(
            138deg,
            rgba(255,255,255,0.13) 0%,
            rgba(255,255,255,0.055) 20%,
            rgba(16,22,30,0.74) 52%,
            rgba(6,10,16,0.84) 100%
        ) !important;

    border: 1px solid rgba(220,226,235,0.28) !important;
    border-left: 3px solid #FFE200 !important;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.04),
        inset 0 22px 32px rgba(255,255,255,0.03),
        0 22px 48px rgba(0,0,0,0.38),
        0 0 0 1px rgba(255,226,0,0.03) !important;

    backdrop-filter: blur(13px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(13px) saturate(1.08) !important;
    overflow: visible !important;

    opacity: 0;
    transform: translateX(34px);
    filter: blur(8px);
    animation: octHomePanelRevealV20 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.22s forwards;
}

.oct-home-hero-v20-panel::before {
    content: "" !important;
    position: absolute !important;
    inset: -120px -150px -120px -170px !important;
    z-index: -3 !important;
    pointer-events: none !important;
    background:
        radial-gradient(
            ellipse at center,
            rgba(255,226,0,0.11) 0%,
            rgba(255,148,34,0.06) 30%,
            rgba(255,255,255,0.020) 48%,
            transparent 72%
        ) !important;
    filter: blur(34px) !important;
    opacity: 0.36 !important;
    transform: scale(1);
    transition: opacity 0.45s ease, transform 0.45s ease, filter 0.45s ease !important;
}

.oct-home-hero-v20-panel::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.055) 0%,
            rgba(255,255,255,0.018) 18%,
            rgba(255,255,255,0.00) 42%,
            rgba(255,255,255,0.00) 100%
        ) !important;
    opacity: 0.55 !important;
}

.oct-home-hero-v20-panel:hover {
    border-color: rgba(255,226,0,0.88) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.08),
        inset 0 22px 32px rgba(255,255,255,0.05),
        0 32px 82px rgba(0,0,0,0.54),
        0 0 34px rgba(255,226,0,0.18),
        0 0 120px rgba(255,226,0,0.07) !important;
}

.oct-home-hero-v20-panel:hover::before {
    opacity: 0.82 !important;
    transform: scale(1.12) !important;
    filter: blur(44px) !important;
}

@keyframes octHomePanelRevealV20 {
    0% {
        opacity: 0;
        transform: translateX(34px);
        filter: blur(8px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

.oct-home-hero-v20-panel-inner {
    position: relative !important;
    z-index: 8 !important;
}

.oct-home-hero-v20-panel-corner {
    position: absolute !important;
    right: 22px !important;
    top: 22px !important;
    width: 92px !important;
    height: 92px !important;
    z-index: 6 !important;
    pointer-events: none !important;
    opacity: 0.70 !important;
    border-top: 1px solid rgba(255,226,0,0.34) !important;
    border-right: 1px solid rgba(255,226,0,0.34) !important;
}

.oct-home-hero-v20-panel-line {
    position: absolute !important;
    z-index: 1 !important;
    pointer-events: none !important;
    height: 1px !important;
    opacity: 0.44 !important;
    background: linear-gradient(90deg, transparent, rgba(255,226,0,0.36), transparent) !important;
    animation: octHomePanelLinePulseV20 5.2s ease-in-out infinite alternate;
}

.oct-home-hero-v20-panel-line.l1 {
    width: 700px !important;
    right: -360px !important;
    top: -18px !important;
}

.oct-home-hero-v20-panel-line.l2 {
    width: 820px !important;
    right: -410px !important;
    bottom: -18px !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), rgba(255,226,0,0.28), transparent) !important;
    animation-delay: 1.4s;
}

.oct-home-hero-v20-panel-line.l3 {
    width: 480px !important;
    left: -300px !important;
    top: -42px !important;
    background: linear-gradient(90deg, transparent, rgba(255,226,0,0.18), rgba(255,255,255,0.08), transparent) !important;
    animation-delay: 2.2s;
    opacity: 0.24 !important;
}

@keyframes octHomePanelLinePulseV20 {
    0% {
        opacity: 0.14;
        transform: translateX(-12px);
    }

    100% {
        opacity: 0.62;
        transform: translateX(16px);
    }
}


/* =========================================================
   HOVER FX
========================================================= */

.oct-home-hero-v20-burst {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 760px !important;
    height: 760px !important;
    transform: translate(-50%, -50%) scale(0.78) !important;
    z-index: -2 !important;
    pointer-events: none !important;
    border-radius: 50% !important;
    opacity: 0 !important;
    background:
        conic-gradient(
            from 210deg,
            transparent 0deg,
            rgba(255,226,0,0.00) 18deg,
            rgba(255,226,0,0.26) 34deg,
            rgba(255,226,0,0.00) 54deg,
            transparent 84deg,
            rgba(255,255,255,0.00) 118deg,
            rgba(255,255,255,0.13) 138deg,
            rgba(255,255,255,0.00) 164deg,
            transparent 205deg,
            rgba(255,226,0,0.00) 242deg,
            rgba(255,226,0,0.22) 266deg,
            rgba(255,226,0,0.00) 288deg,
            transparent 360deg
        ) !important;
    -webkit-mask:
        radial-gradient(
            circle,
            transparent 0%,
            transparent 52%,
            #000 53%,
            #000 55.5%,
            transparent 57%
        ) !important;
    mask:
        radial-gradient(
            circle,
            transparent 0%,
            transparent 52%,
            #000 53%,
            #000 55.5%,
            transparent 57%
        ) !important;
    filter:
        drop-shadow(0 0 20px rgba(255,226,0,0.14))
        drop-shadow(0 0 46px rgba(255,226,0,0.06)) !important;
}

.oct-home-hero-v20-panel:hover .oct-home-hero-v20-burst {
    animation: octHomeBigBurstV20 1.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes octHomeBigBurstV20 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.58) rotate(-10deg);
    }

    16% { opacity: 1; }
    58% { opacity: 0.76; }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.22) rotate(18deg);
    }
}

.oct-home-hero-v20-scan {
    position: absolute !important;
    left: -105% !important;
    top: -42% !important;
    width: 82% !important;
    height: 184% !important;
    z-index: 5 !important;
    pointer-events: none !important;
    background:
        linear-gradient(
            112deg,
            transparent 0%,
            rgba(255,255,255,0.00) 22%,
            rgba(255,255,255,0.20) 42%,
            rgba(255,226,0,0.15) 51%,
            rgba(255,255,255,0.11) 60%,
            rgba(255,255,255,0.00) 76%,
            transparent 100%
        ) !important;
    transform: rotate(6deg) !important;
    opacity: 0 !important;
}

.oct-home-hero-v20-panel:hover .oct-home-hero-v20-scan {
    animation: octHomePanelScanV20 1.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes octHomePanelScanV20 {
    0% { opacity: 0; left: -105%; }
    15% { opacity: 1; }
    100% { opacity: 0; left: 138%; }
}

.oct-home-hero-v20-pulse {
    position: absolute !important;
    inset: -1px !important;
    z-index: 4 !important;
    pointer-events: none !important;
    border: 1px solid rgba(255,226,0,0.00) !important;
    opacity: 0 !important;
}

.oct-home-hero-v20-panel:hover .oct-home-hero-v20-pulse {
    animation: octHomePulseFrameV20 1.45s ease-out forwards;
}

@keyframes octHomePulseFrameV20 {
    0% {
        opacity: 0;
        transform: scale(1);
        border-color: rgba(255,226,0,0.00);
    }

    20% {
        opacity: 0.88;
        border-color: rgba(255,226,0,0.68);
    }

    100% {
        opacity: 0;
        transform: scale(1.09);
        border-color: rgba(255,226,0,0.00);
    }
}


/* =========================================================
   TYPOGRAFIE
========================================================= */

.oct-home-hero-v20 .oct-home-kicker {
    display: block !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    letter-spacing: 1.8px !important;
    text-transform: uppercase !important;
    margin-bottom: 18px !important;
    color: rgba(255,255,255,0.94) !important;
    text-shadow: 0 5px 18px rgba(0,0,0,0.36) !important;
    opacity: 0;
    transform: translateX(-22px);
    animation: octHomeKickerRevealV20 1.0s cubic-bezier(0.16, 1, 0.3, 1) 0.36s forwards;
}

.oct-home-hero-v20 .oct-home-kicker::before {
    display: none !important;
    content: none !important;
}

.oct-home-hero-v20 .oct-home-title {
    font-size: 52px !important;
    font-weight: 800 !important;
    line-height: 1.06 !important;
    letter-spacing: -0.6px !important;
    text-transform: uppercase !important;
    margin: 0 0 24px 0 !important;
    color: #ffffff !important;
    text-shadow: 0 8px 26px rgba(0,0,0,0.36) !important;
    opacity: 0;
    filter: blur(8px);
    clip-path: inset(0 100% 0 0);
    animation: octHomeTitleRevealV20 1.25s cubic-bezier(0.16, 1, 0.3, 1) 0.58s forwards;
}

.oct-home-hero-v20 .oct-home-title .oct-home-yellow-text {
    color: #FFE200 !important;
}

.oct-home-hero-v20 .oct-home-lead {
    font-size: 20px !important;
    line-height: 1.68 !important;
    font-weight: 400 !important;
    max-width: 720px !important;
    color: rgba(255,255,255,0.90) !important;
    text-shadow: 0 4px 18px rgba(0,0,0,0.42) !important;
    opacity: 0;
    transform: translateY(18px);
    filter: blur(5px);
    animation: octHomeLeadRevealV20 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.92s forwards;
}

.oct-home-hero-v20 .oct-home-lead-neu,
.oct-home-hero-v20 .oct-home-lead-v8 {
    color: #FFE200 !important;
    font-weight: 400 !important;
}

@keyframes octHomeKickerRevealV20 {
    0% {
        opacity: 0;
        transform: translateX(-22px);
        filter: blur(5px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

@keyframes octHomeTitleRevealV20 {
    0% {
        opacity: 0;
        filter: blur(8px);
        clip-path: inset(0 100% 0 0);
        transform: translateY(8px);
    }

    55% {
        opacity: 1;
        filter: blur(2px);
    }

    100% {
        opacity: 1;
        filter: blur(0);
        clip-path: inset(0 0 0 0);
        transform: translateY(0);
    }
}

@keyframes octHomeLeadRevealV20 {
    0% {
        opacity: 0;
        transform: translateY(18px);
        filter: blur(5px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1400px) {
    .oct-home-hero-v20 {
        padding-top: 125px !important;
        padding-bottom: 70px !important;
    }

    .oct-home-hero-v20 .oct-home-inner {
        max-width:1600px !important;
    }

    .oct-home-hero-v20-layout {
        grid-template-columns: minmax(0, 1fr) minmax(450px, 540px) !important;
        gap: 34px !important;
    }

    .oct-home-hero-v20 .oct-home-title {
        font-size: 48px !important;
    }

    .oct-home-hero-v20 .oct-home-lead {
        font-size: 18px !important;
        max-width: 650px !important;
    }

    .oct-home-hero-v20-panel {
        max-width: 540px !important;
        padding: 42px 44px 40px 44px !important;
        margin-right: -30px !important;
    }

    .oct-home-hero-v20-energy {
        right: -18vw !important;
        opacity: 0.62 !important;
    }
}

@media (max-width: 1199px) {
    .oct-home-hero-v20 {
        min-height: auto !important;
        display: block !important;
        padding-top: 120px !important;
        padding-bottom: 56px !important;
    }

    .oct-home-hero-v20-layout {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .oct-home-hero-v20-spacer {
        display: none !important;
    }

    .oct-home-hero-v20-panel {
        width: 100% !important;
        max-width: 640px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        justify-self: center !important;
    }

    .oct-home-hero-v20-energy {
        right: -42vw !important;
        width: 130vw !important;
        opacity: 0.46 !important;
    }

    .oct-home-hero-v20-ring.r1 {
        right: -240px !important;
        opacity: 0.20 !important;
    }

    .oct-home-hero-v20-ring.r2 {
        left: -230px !important;
        opacity: 0.16 !important;
    }
}

@media (max-width: 767px) {
    .oct-home-hero-v20 {
        min-height: 100svh !important;
        min-height: 100dvh !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;
        padding-top: clamp(88px, 11svh, 108px) !important;
        padding-bottom: clamp(24px, 4svh, 36px) !important;
        box-sizing: border-box !important;
    }

    .oct-home-hero-v20 .oct-home-inner {
        flex: 1 1 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 0 !important;
    }

    .oct-home-hero-v20-layout {
        gap: 0 !important;
        padding-inline: 14px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .oct-home-hero-v20-panel {
        padding: 22px 18px !important;
        max-width: calc(100% - 8px) !important;
        width: calc(100% - 8px) !important;
        margin-top: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    .oct-home-hero-v20 .oct-home-kicker {
        font-size: 13px !important;
        letter-spacing: 1px !important;
        margin-bottom: 10px !important;
    }

    .oct-home-hero-v20 .oct-home-title {
        font-size: clamp(26px, 7.2vw, 32px) !important;
        line-height: 1.08 !important;
        margin-bottom: 12px !important;
    }

    .oct-home-hero-v20 .oct-home-lead {
        font-size: 15px !important;
        line-height: 1.55 !important;
        margin: 0 !important;
    }

    .oct-home-hero-v20-tech-top,
    .oct-home-hero-v20-tech-bottom,
    .oct-home-hero-v20-beams,
    .oct-home-hero-v20-energy,
    .oct-home-hero-v20-panel-line,
    .oct-home-hero-v20-burst {
        display: none !important;
    }

    .oct-home-birds-v20 {
        opacity: 0.40 !important;
    }

    .oct-home-hero-v20-rings {
        opacity: 0.4 !important;
    }
}

@media (max-width: 390px) {
    .oct-home-hero-v20 {
        padding-top: clamp(82px, 10svh, 96px) !important;
        padding-bottom: 20px !important;
    }

    .oct-home-hero-v20-layout {
        padding-inline: 12px !important;
    }

    .oct-home-hero-v20-panel {
        padding: 18px 14px !important;
        width: calc(100% - 4px) !important;
        max-width: calc(100% - 4px) !important;
    }

    .oct-home-hero-v20 .oct-home-title {
        font-size: 26px !important;
    }
}


/* =========================================================
   RAW 1A – HOVER FX IST AB V20 HIER INTEGRIERT
========================================================= */

/* =========================================================
   PANEL HOVER – PREMIUM BOOST
========================================================= */

.oct-home-hero-v20-panel{
    transition:
        transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.45s ease,
        box-shadow 0.45s ease,
        background 0.45s ease,
        filter 0.45s ease !important;
}

.oct-home-hero-v20-panel:hover{
    transform: translateX(-8px) translateY(-4px) !important;
    border-color: rgba(255,226,0,0.95) !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.18) 0%,
            rgba(255,255,255,0.078) 24%,
            rgba(10,14,20,0.76) 56%,
            rgba(255,226,0,0.030) 100%
        ),
        repeating-linear-gradient(
            115deg,
            rgba(255,255,255,0.046) 0px,
            rgba(255,255,255,0.046) 1px,
            rgba(255,255,255,0.000) 2px,
            rgba(255,255,255,0.000) 8px
        ) !important;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.11),
        inset 0 26px 38px rgba(255,255,255,0.06),
        0 38px 92px rgba(0,0,0,0.62),
        0 0 34px rgba(255,226,0,0.28),
        0 0 92px rgba(255,226,0,0.14),
        0 0 180px rgba(255,226,0,0.055) !important;
}


/* =========================================================
   HOVER-GLOW HINTER DEM PANEL
========================================================= */

.oct-home-hero-v20-panel:hover::before{
    opacity: 1 !important;
    transform: scale(1.25) !important;
    filter: blur(48px) !important;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255,226,0,0.26) 0%,
            rgba(255,168,42,0.15) 28%,
            rgba(255,255,255,0.045) 48%,
            transparent 74%
        ) !important;
}


/* =========================================================
   SCHIMMER ÜBER DAS PANEL
========================================================= */

.oct-home-hero-v20-panel:hover::after{
    animation: octHomePanelHoverSheenStrongV20 1.15s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes octHomePanelHoverSheenStrongV20{
    0%{
        left:-76%;
        opacity:0;
    }

    16%{
        opacity:0.92;
    }

    100%{
        left:132%;
        opacity:0;
    }
}


/* =========================================================
   GELBE LINIEN AM PANEL – BEI HOVER RAUSFEUERN
========================================================= */

.oct-home-hero-v20-panel:hover .oct-home-hero-v20-panel-line{
    opacity: 0.95 !important;
    filter:
        drop-shadow(0 0 10px rgba(255,226,0,0.26))
        drop-shadow(0 0 22px rgba(255,255,255,0.10)) !important;
}

.oct-home-hero-v20-panel:hover .oct-home-hero-v20-panel-line.l1{
    animation: octHomePanelLineBurstRightV20 1.25s ease-out forwards !important;
}

.oct-home-hero-v20-panel:hover .oct-home-hero-v20-panel-line.l2{
    animation: octHomePanelLineBurstRightV20 1.35s ease-out 0.08s forwards !important;
}

.oct-home-hero-v20-panel:hover .oct-home-hero-v20-panel-line.l3{
    animation: octHomePanelLineBurstLeftV20 1.35s ease-out 0.12s forwards !important;
}

@keyframes octHomePanelLineBurstRightV20{
    0%{
        opacity:0.20;
        transform:translateX(-40px) scaleX(0.68);
    }

    22%{
        opacity:1;
    }

    100%{
        opacity:0.72;
        transform:translateX(82px) scaleX(1.20);
    }
}

@keyframes octHomePanelLineBurstLeftV20{
    0%{
        opacity:0.18;
        transform:translateX(40px) scaleX(0.70);
    }

    22%{
        opacity:0.92;
    }

    100%{
        opacity:0.62;
        transform:translateX(-72px) scaleX(1.18);
    }
}


/* =========================================================
   SCAN – SICHTBARER, BREITER
========================================================= */

.oct-home-hero-v20-scan{
    width: 92% !important;
    height: 205% !important;
    top: -52% !important;

    background:
        linear-gradient(
            112deg,
            transparent 0%,
            rgba(255,255,255,0.00) 20%,
            rgba(255,255,255,0.32) 42%,
            rgba(255,226,0,0.26) 51%,
            rgba(255,255,255,0.18) 61%,
            rgba(255,255,255,0.00) 78%,
            transparent 100%
        ) !important;
}

.oct-home-hero-v20-panel:hover .oct-home-hero-v20-scan{
    animation: octHomePanelScanPremiumV20 1.15s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes octHomePanelScanPremiumV20{
    0%{
        opacity:0;
        left:-112%;
        filter:blur(1px);
    }

    12%{
        opacity:1;
    }

    58%{
        opacity:0.88;
    }

    100%{
        opacity:0;
        left:142%;
        filter:blur(0);
    }
}


/* =========================================================
   BIG ENERGY RING
========================================================= */

.oct-home-hero-v20-burst{
    width: 900px !important;
    height: 900px !important;

    background:
        conic-gradient(
            from 210deg,
            transparent 0deg,
            rgba(255,226,0,0.00) 16deg,
            rgba(255,226,0,0.48) 31deg,
            rgba(255,226,0,0.00) 50deg,
            transparent 82deg,
            rgba(255,255,255,0.00) 118deg,
            rgba(255,255,255,0.26) 137deg,
            rgba(255,255,255,0.00) 162deg,
            transparent 205deg,
            rgba(255,226,0,0.00) 240deg,
            rgba(255,226,0,0.40) 266deg,
            rgba(255,226,0,0.00) 290deg,
            transparent 360deg
        ) !important;

    filter:
        drop-shadow(0 0 28px rgba(255,226,0,0.26))
        drop-shadow(0 0 70px rgba(255,226,0,0.12)) !important;
}

.oct-home-hero-v20-panel:hover .oct-home-hero-v20-burst{
    animation: octHomeBigBurstPremiumV20 1.75s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes octHomeBigBurstPremiumV20{
    0%{
        opacity:0;
        transform:translate(-50%, -50%) scale(0.48) rotate(-16deg);
    }

    15%{
        opacity:1;
    }

    56%{
        opacity:0.95;
    }

    100%{
        opacity:0;
        transform:translate(-50%, -50%) scale(1.32) rotate(22deg);
    }
}


/* =========================================================
   RAHMEN-PULS
========================================================= */

.oct-home-hero-v20-panel:hover .oct-home-hero-v20-pulse{
    animation: octHomePulseFramePremiumV20 1.35s ease-out forwards !important;
}

@keyframes octHomePulseFramePremiumV20{
    0%{
        opacity:0;
        transform:scale(1);
        border-color:rgba(255,226,0,0.00);
        box-shadow:none;
    }

    18%{
        opacity:1;
        border-color:rgba(255,226,0,0.88);
        box-shadow:
            0 0 18px rgba(255,226,0,0.24),
            inset 0 0 18px rgba(255,226,0,0.10);
    }

    100%{
        opacity:0;
        transform:scale(1.115);
        border-color:rgba(255,226,0,0.00);
        box-shadow:
            0 0 48px rgba(255,226,0,0.00),
            inset 0 0 18px rgba(255,226,0,0.00);
    }
}


/* =========================================================
   TEXT REAGIERT LEICHT
========================================================= */

.oct-home-hero-v20-panel:hover .oct-home-kicker{
    color: rgba(255,255,255,0.98) !important;
    text-shadow:
        0 5px 18px rgba(0,0,0,0.40),
        0 0 18px rgba(255,226,0,0.10) !important;
}

.oct-home-hero-v20-panel:hover .oct-home-title{
    text-shadow:
        0 8px 26px rgba(0,0,0,0.42),
        0 0 24px rgba(255,255,255,0.06) !important;
}

.oct-home-hero-v20-panel:hover .oct-home-title .oct-home-yellow-text{
    text-shadow:
        0 0 18px rgba(255,226,0,0.30),
        0 0 42px rgba(255,226,0,0.12) !important;
}


/* =========================================================
   GANZER HERO REAGIERT AUF PANEL-HOVER
========================================================= */

.oct-home-hero-v20:has(.oct-home-hero-v20-panel:hover) .oct-home-hero-v20-energy{
    opacity: 1 !important;
}

.oct-home-hero-v20:has(.oct-home-hero-v20-panel:hover) .oct-home-hero-v20-energy-line{
    animation-duration: 2.8s !important;
    opacity: 0.72 !important;
}

.oct-home-hero-v20:has(.oct-home-hero-v20-panel:hover) .oct-home-hero-v20-ring.r1{
    opacity: 0.55 !important;
    transform: scale(1.05) rotate(8deg) !important;
    border-color: rgba(255,226,0,0.28) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.05),
        0 0 52px rgba(255,226,0,0.085) !important;
}

.oct-home-hero-v20:has(.oct-home-hero-v20-panel:hover) .oct-home-hero-v20-ring.r2{
    opacity: 0.36 !important;
    transform: scale(1.04) rotate(-6deg) !important;
}


/* =========================================================
   MOBILE – HOVER NICHT ÜBERTREIBEN
========================================================= */

@media (max-width: 767px){
    .oct-home-hero-v20-panel:hover{
        transform:none !important;
    }

    .oct-home-hero-v20-panel:hover .oct-home-hero-v20-scan,
    .oct-home-hero-v20-panel:hover .oct-home-hero-v20-burst,
    .oct-home-hero-v20-panel:hover .oct-home-hero-v20-pulse{
        animation:none !important;
        opacity:0 !important;
    }
}



/* =========================================================
   V20 – VIEWPORT-FIT / 1920er WINDOWS-KORREKTUR
   Ziel:
   - 2560px darf groß bleiben
   - 1920px wirkt nicht zu hoch/zu fett
   - Hero passt sich sauber an sichtbare Fensterhöhe an
   - rechter Textblock wird auf 1920 kleiner und kontrollierter
========================================================= */

@media (min-width:1200px){
    .oct-home-hero-v20{
        min-height:100svh !important;
        height:auto !important;
        padding-top:clamp(108px, 8svh, 150px) !important;
        padding-bottom:clamp(54px, 6svh, 104px) !important;
    }

    .oct-home-hero-v20 .oct-home-inner{
        max-width:min(1660px, calc(100vw - 120px)) !important;
    }
}

/* Klassische 1920er Desktop-/Windows-Ansicht */
@media (min-width:1500px) and (max-width:2199px){
    .oct-home-hero-v20{
        min-height:100svh !important;
        padding-top:clamp(104px, 7.2svh, 135px) !important;
        padding-bottom:clamp(50px, 5.4svh, 82px) !important;
    }

    .oct-home-hero-v20 .oct-home-inner{
        max-width:min(1500px, calc(100vw - 120px)) !important;
    }

    .oct-home-hero-v20-layout{
        grid-template-columns:minmax(0, 1fr) minmax(420px, 520px) !important;
        gap:36px !important;
    }

    .oct-home-hero-v20-spacer{
        min-height:min(46svh, 430px) !important;
    }

    .oct-home-hero-v20-panel{
        max-width:520px !important;
        margin-right:0 !important;
        padding:38px 40px 36px 40px !important;
    }

    .oct-home-hero-v20 .oct-home-kicker{
        font-size:21px !important;
        letter-spacing:1.65px !important;
        margin-bottom:14px !important;
    }

    .oct-home-hero-v20 .oct-home-title{
        font-size:46px !important;
        line-height:1.055 !important;
        margin-bottom:20px !important;
    }

    .oct-home-hero-v20 .oct-home-lead{
        font-size:18px !important;
        line-height:1.62 !important;
        max-width:620px !important;
    }

    .oct-home-hero-v20-energy{
        right:-14vw !important;
        height:540px !important;
        opacity:.70 !important;
    }

    .oct-home-hero-v20-ring.r1{
        width:360px !important;
        height:360px !important;
        right:-110px !important;
    }

    .oct-home-hero-v20-ring.r2{
        width:320px !important;
        height:320px !important;
    }
}

/* Wenn der Browser trotz 1920px Breite wenig sichtbare Höhe hat */
@media (min-width:1200px) and (max-height:940px){
    .oct-home-hero-v20{
        min-height:100svh !important;
        padding-top:112px !important;
        padding-bottom:54px !important;
    }

    .oct-home-hero-v20-layout{
        grid-template-columns:minmax(0, 1fr) minmax(400px, 500px) !important;
        gap:32px !important;
    }

    .oct-home-hero-v20-spacer{
        min-height:min(42svh, 390px) !important;
    }

    .oct-home-hero-v20-panel{
        max-width:500px !important;
        margin-right:0 !important;
        padding:34px 36px 32px 36px !important;
    }

    .oct-home-hero-v20 .oct-home-kicker{
        font-size:19px !important;
        margin-bottom:12px !important;
    }

    .oct-home-hero-v20 .oct-home-title{
        font-size:42px !important;
        line-height:1.05 !important;
        margin-bottom:18px !important;
    }

    .oct-home-hero-v20 .oct-home-lead{
        font-size:17px !important;
        line-height:1.56 !important;
    }

    .oct-home-hero-v20-energy{
        height:500px !important;
        opacity:.60 !important;
    }

    .oct-home-birds-v20{
        height:44% !important;
        opacity:.78 !important;
    }
}

/* 2560 / große Screens bleiben bewusst größer und hero-füllend */
@media (min-width:2200px){
    .oct-home-hero-v20{
        min-height:100svh !important;
        padding-top:clamp(140px, 9svh, 180px) !important;
        padding-bottom:clamp(96px, 7svh, 145px) !important;
    }

    .oct-home-hero-v20 .oct-home-inner{
        max-width:1600px !important;
    }

    .oct-home-hero-v20-panel{
        max-width:600px !important;
        margin-right:-60px !important;
        padding:46px 48px 44px 48px !important;
    }

    .oct-home-hero-v20 .oct-home-title{
        font-size:52px !important;
    }

    .oct-home-hero-v20 .oct-home-lead{
        font-size:20px !important;
    }
}

/* Tablet — gestapelt, aber noch nicht full-height wie Mobile */
@media (min-width: 768px) and (max-width:1199px){
    .oct-home-hero-v20{
        min-height:auto !important;
    }
}



/* =========================================================
   V20.1 – PANEL HOVER HITBOX FIX
   Problem:
   - In SP Page Builder / Browser-Layering reagiert der Hover optisch
     teils erst im rechten Panelbereich.
   Lösung:
   - Panel bekommt höhere eigene Ebene.
   - JS setzt zusätzlich .is-hovered, sobald die Maus geometrisch
     über dem Panelbereich liegt.
   - Alle Premium-Hover-Effekte reagieren auch auf .is-hovered.
========================================================= */

.oct-home-hero-v20-panel{
    z-index: 30 !important;
    pointer-events: auto !important;
    isolation: isolate !important;
}

/* sicherstellen, dass alle dekorativen Layer weiterhin keine Maus abfangen */
.oct-home-hero-v20-bg,
.oct-home-hero-v20-overlay,
.oct-home-hero-v20-sun,
.oct-home-hero-v20-water,
.oct-home-hero-v20-rings,
.oct-home-hero-v20-ring,
.oct-home-birds-v20,
.oct-home-bird-track-v20,
.oct-home-bird-body-v20,
.oct-home-hero-v20-tech-top,
.oct-home-hero-v20-tech-bottom,
.oct-home-hero-v20-beams,
.oct-home-hero-v20-beam,
.oct-home-hero-v20-energy,
.oct-home-hero-v20-energy-line,
.oct-home-hero-v20-panel-corner,
.oct-home-hero-v20-panel-line,
.oct-home-hero-v20-burst,
.oct-home-hero-v20-scan,
.oct-home-hero-v20-pulse{
    pointer-events:none !important;
}

/* Haupt-Hover auch über JS-Klasse */
.oct-home-hero-v20-panel.is-hovered{
    transform: translateX(-8px) translateY(-4px) !important;
    border-color: rgba(255,226,0,0.95) !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.18) 0%,
            rgba(255,255,255,0.078) 24%,
            rgba(10,14,20,0.76) 56%,
            rgba(255,226,0,0.030) 100%
        ),
        repeating-linear-gradient(
            115deg,
            rgba(255,255,255,0.046) 0px,
            rgba(255,255,255,0.046) 1px,
            rgba(255,255,255,0.000) 2px,
            rgba(255,255,255,0.000) 8px
        ) !important;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.11),
        inset 0 26px 38px rgba(255,255,255,0.06),
        0 38px 92px rgba(0,0,0,0.62),
        0 0 34px rgba(255,226,0,0.28),
        0 0 92px rgba(255,226,0,0.14),
        0 0 180px rgba(255,226,0,0.055) !important;
}

.oct-home-hero-v20-panel.is-hovered::before{
    opacity: 1 !important;
    transform: scale(1.25) !important;
    filter: blur(48px) !important;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255,226,0,0.26) 0%,
            rgba(255,168,42,0.15) 28%,
            rgba(255,255,255,0.045) 48%,
            transparent 74%
        ) !important;
}

.oct-home-hero-v20-panel.is-hovered::after{
    animation: octHomePanelHoverSheenStrongV20 1.15s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.oct-home-hero-v20-panel.is-hovered .oct-home-hero-v20-panel-line{
    opacity: 0.95 !important;
    filter:
        drop-shadow(0 0 10px rgba(255,226,0,0.26))
        drop-shadow(0 0 22px rgba(255,255,255,0.10)) !important;
}

.oct-home-hero-v20-panel.is-hovered .oct-home-hero-v20-panel-line.l1{
    animation: octHomePanelLineBurstRightV20 1.25s ease-out forwards !important;
}

.oct-home-hero-v20-panel.is-hovered .oct-home-hero-v20-panel-line.l2{
    animation: octHomePanelLineBurstRightV20 1.35s ease-out 0.08s forwards !important;
}

.oct-home-hero-v20-panel.is-hovered .oct-home-hero-v20-panel-line.l3{
    animation: octHomePanelLineBurstLeftV20 1.35s ease-out 0.12s forwards !important;
}

.oct-home-hero-v20-panel.is-hovered .oct-home-hero-v20-scan{
    animation: octHomePanelScanPremiumV20 1.15s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.oct-home-hero-v20-panel.is-hovered .oct-home-hero-v20-burst{
    animation: octHomeBigBurstPremiumV20 1.75s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.oct-home-hero-v20-panel.is-hovered .oct-home-hero-v20-pulse{
    animation: octHomePulseFramePremiumV20 1.35s ease-out forwards !important;
}

.oct-home-hero-v20-panel.is-hovered .oct-home-kicker{
    color: rgba(255,255,255,0.98) !important;
    text-shadow:
        0 5px 18px rgba(0,0,0,0.40),
        0 0 18px rgba(255,226,0,0.10) !important;
}

.oct-home-hero-v20-panel.is-hovered .oct-home-title{
    text-shadow:
        0 8px 26px rgba(0,0,0,0.42),
        0 0 24px rgba(255,255,255,0.06) !important;
}

.oct-home-hero-v20-panel.is-hovered .oct-home-title .oct-home-yellow-text{
    text-shadow:
        0 0 18px rgba(255,226,0,0.30),
        0 0 42px rgba(255,226,0,0.12) !important;
}

/* Hero-weite Reaktion auch ohne :has(), dadurch robuster */
.oct-home-hero-v20.is-panel-hovered .oct-home-hero-v20-energy{
    opacity: 1 !important;
}

.oct-home-hero-v20.is-panel-hovered .oct-home-hero-v20-energy-line{
    animation-duration: 2.8s !important;
    opacity: 0.72 !important;
}

.oct-home-hero-v20.is-panel-hovered .oct-home-hero-v20-ring.r1{
    opacity: 0.55 !important;
    transform: scale(1.05) rotate(8deg) !important;
    border-color: rgba(255,226,0,0.28) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.05),
        0 0 52px rgba(255,226,0,0.085) !important;
}

.oct-home-hero-v20.is-panel-hovered .oct-home-hero-v20-ring.r2{
    opacity: 0.36 !important;
    transform: scale(1.04) rotate(-6deg) !important;
}

@media (max-width: 767px){
    .oct-home-hero-v20-panel.is-hovered{
        transform:none !important;
    }

    .oct-home-hero-v20-panel.is-hovered .oct-home-hero-v20-scan,
    .oct-home-hero-v20-panel.is-hovered .oct-home-hero-v20-burst,
    .oct-home-hero-v20-panel.is-hovered .oct-home-hero-v20-pulse{
        animation:none !important;
        opacity:0 !important;
    }
}



/* =========================================================
   V20.2 – SOFTER HOVER / TITLE BLOCK FIX
   - Hover-Effekt bleibt, aber weniger gelber Schein
   - Panel wird beim Hover nicht mehr so hell
   - transparenter Block/Schimmer hinter der großen Schrift wird entfernt
========================================================= */

/* Panel-Hover etwas dunkler und ruhiger */
.oct-home-hero-v20-panel:hover,
.oct-home-hero-v20-panel.is-hovered{
    border-color: rgba(255,226,0,0.62) !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.105) 0%,
            rgba(255,255,255,0.045) 24%,
            rgba(10,14,20,0.80) 56%,
            rgba(5,8,13,0.88) 100%
        ),
        repeating-linear-gradient(
            115deg,
            rgba(255,255,255,0.026) 0px,
            rgba(255,255,255,0.026) 1px,
            rgba(255,255,255,0.000) 2px,
            rgba(255,255,255,0.000) 8px
        ) !important;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.070),
        inset 0 20px 26px rgba(255,255,255,0.028),
        0 30px 72px rgba(0,0,0,0.54),
        0 0 18px rgba(255,226,0,0.080),
        0 0 58px rgba(255,226,0,0.040) !important;
}

/* Gelber Hover-Schein hinter dem Panel deutlich reduzieren */
.oct-home-hero-v20-panel:hover::before,
.oct-home-hero-v20-panel.is-hovered::before{
    opacity: 0.42 !important;
    transform: scale(1.08) !important;
    filter: blur(42px) !important;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255,226,0,0.105) 0%,
            rgba(255,168,42,0.060) 28%,
            rgba(255,255,255,0.022) 48%,
            transparent 74%
        ) !important;
}

/* Grund-Overlay im Panel schwächer, damit es nicht als Block hinter Text wirkt */
.oct-home-hero-v20-panel::after{
    opacity: 0.22 !important;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.028) 0%,
            rgba(255,255,255,0.010) 18%,
            rgba(255,255,255,0.00) 42%,
            rgba(255,255,255,0.00) 100%
        ) !important;
}

/* Schimmer/Scan beim Hover viel dezenter */
.oct-home-hero-v20-scan{
    background:
        linear-gradient(
            112deg,
            transparent 0%,
            rgba(255,255,255,0.00) 24%,
            rgba(255,255,255,0.145) 44%,
            rgba(255,226,0,0.080) 51%,
            rgba(255,255,255,0.075) 60%,
            rgba(255,255,255,0.00) 76%,
            transparent 100%
        ) !important;
}

.oct-home-hero-v20-panel:hover .oct-home-hero-v20-scan,
.oct-home-hero-v20-panel.is-hovered .oct-home-hero-v20-scan{
    animation-duration: 1.05s !important;
}

/* großer Energy-Ring beim Hover weniger gelb/aggressiv */
.oct-home-hero-v20-burst{
    background:
        conic-gradient(
            from 210deg,
            transparent 0deg,
            rgba(255,226,0,0.00) 16deg,
            rgba(255,226,0,0.22) 31deg,
            rgba(255,226,0,0.00) 50deg,
            transparent 82deg,
            rgba(255,255,255,0.00) 118deg,
            rgba(255,255,255,0.14) 137deg,
            rgba(255,255,255,0.00) 162deg,
            transparent 205deg,
            rgba(255,226,0,0.00) 240deg,
            rgba(255,226,0,0.18) 266deg,
            rgba(255,226,0,0.00) 290deg,
            transparent 360deg
        ) !important;

    filter:
        drop-shadow(0 0 16px rgba(255,226,0,0.10))
        drop-shadow(0 0 38px rgba(255,226,0,0.045)) !important;
}

.oct-home-hero-v20-panel:hover .oct-home-hero-v20-burst,
.oct-home-hero-v20-panel.is-hovered .oct-home-hero-v20-burst{
    opacity: 0.62 !important;
}

/* Rahmen-Puls weniger gelb */
@keyframes octHomePulseFramePremiumV20{
    0%{
        opacity:0;
        transform:scale(1);
        border-color:rgba(255,226,0,0.00);
        box-shadow:none;
    }

    18%{
        opacity:0.58;
        border-color:rgba(255,226,0,0.42);
        box-shadow:
            0 0 10px rgba(255,226,0,0.10),
            inset 0 0 10px rgba(255,226,0,0.045);
    }

    100%{
        opacity:0;
        transform:scale(1.075);
        border-color:rgba(255,226,0,0.00);
        box-shadow:
            0 0 28px rgba(255,226,0,0.00),
            inset 0 0 12px rgba(255,226,0,0.00);
    }
}

/* Linien am Panel beim Hover weniger Feuer */
.oct-home-hero-v20-panel:hover .oct-home-hero-v20-panel-line,
.oct-home-hero-v20-panel.is-hovered .oct-home-hero-v20-panel-line{
    opacity: 0.56 !important;
    filter:
        drop-shadow(0 0 6px rgba(255,226,0,0.10))
        drop-shadow(0 0 14px rgba(255,255,255,0.06)) !important;
}

/* Der sichtbare transparente Block hinter der großen Schrift: weg */
.oct-home-hero-v20 .oct-home-title,
.oct-home-hero-v20 .oct-home-title span,
.oct-home-hero-v20 .oct-home-yellow-text{
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-box-decoration-break: clone !important;
    box-decoration-break: clone !important;
}

/* Text liegt sicher über allen Schimmer-Layern */
.oct-home-hero-v20-panel-inner{
    z-index: 12 !important;
}

.oct-home-hero-v20 .oct-home-title{
    position: relative !important;
    z-index: 13 !important;
}

/* Text-Hover ruhiger */
.oct-home-hero-v20-panel:hover .oct-home-title,
.oct-home-hero-v20-panel.is-hovered .oct-home-title{
    text-shadow:
        0 8px 26px rgba(0,0,0,0.44),
        0 0 14px rgba(255,255,255,0.035) !important;
}

.oct-home-hero-v20-panel:hover .oct-home-title .oct-home-yellow-text,
.oct-home-hero-v20-panel.is-hovered .oct-home-title .oct-home-yellow-text{
    text-shadow:
        0 0 10px rgba(255,226,0,0.18),
        0 0 26px rgba(255,226,0,0.07) !important;
}

/* Hero-weite Hover-Reaktion ebenfalls weniger gelb */
.oct-home-hero-v20.is-panel-hovered .oct-home-hero-v20-energy{
    opacity: 0.74 !important;
}

.oct-home-hero-v20.is-panel-hovered .oct-home-hero-v20-energy-line{
    opacity: 0.44 !important;
}



/* =========================================================
   V20.3 – TITLE DARK BLOCK REMOVED
   Problem:
   - Hinter der zweiten Titelzeile war noch ein dunkler horizontaler Block sichtbar.
   Ursache:
   - Der Panel-Schimmer/Overlay lag optisch genau über dem Titelbereich.
   Lösung:
   - Panel-Overlay im Textbereich komplett neutralisiert.
   - Scan/Burst/Pulse bleiben erhalten, aber liegen sicher hinter dem Text.
   - Titel bekommt eigene saubere Ebene ohne Hintergrund/Blend/Filter-Reste.
========================================================= */

/* Das Panel-Overlay darf keinen dunklen/hellen Streifen über den Titel legen */
.oct-home-hero-v20-panel::after{
    display:none !important;
    content:none !important;
    opacity:0 !important;
    background:none !important;
}

/* Scan bleibt möglich, aber sicher hinter dem Text und dezenter */
.oct-home-hero-v20-scan{
    z-index:3 !important;
    opacity:0 !important;
    mix-blend-mode:screen !important;
}

/* Pulse/Ring ebenfalls hinter Inhalt */
.oct-home-hero-v20-burst,
.oct-home-hero-v20-pulse{
    z-index:2 !important;
}

/* Inhalt eindeutig über allen Effekt-Layern */
.oct-home-hero-v20-panel-inner{
    position:relative !important;
    z-index:20 !important;
    isolation:isolate !important;
}

/* Titel komplett sauber: kein Hintergrund, kein Filter-/Clip-Artefakt */
.oct-home-hero-v20 .oct-home-title{
    position:relative !important;
    z-index:22 !important;
    display:block !important;
    background:transparent !important;
    background-image:none !important;
    box-shadow:none !important;
    outline:0 !important;
    filter:none !important;
    mix-blend-mode:normal !important;
    clip-path:none !important;
    -webkit-clip-path:none !important;
}

/* Auch alle inneren Textteile ohne Background/Box-Artefakte */
.oct-home-hero-v20 .oct-home-title *,
.oct-home-hero-v20 .oct-home-title span,
.oct-home-hero-v20 .oct-home-title br{
    background:transparent !important;
    background-image:none !important;
    box-shadow:none !important;
    outline:0 !important;
    filter:none !important;
    mix-blend-mode:normal !important;
}

/* Titel-Animation ohne Clip-Path, damit kein horizontaler Block entstehen kann */
.oct-home-hero-v20 .oct-home-title{
    opacity:0;
    transform:translateY(8px);
    animation:octHomeTitleRevealV203Clean 1.05s cubic-bezier(0.16, 1, 0.3, 1) 0.58s forwards !important;
}

@keyframes octHomeTitleRevealV203Clean{
    0%{
        opacity:0;
        transform:translateY(8px);
    }

    100%{
        opacity:1;
        transform:translateY(0);
    }
}

/* Hover-Text ebenfalls ohne dunklen Balken */
.oct-home-hero-v20-panel:hover .oct-home-title,
.oct-home-hero-v20-panel.is-hovered .oct-home-title{
    background:transparent !important;
    background-image:none !important;
    box-shadow:none !important;
    filter:none !important;
    text-shadow:
        0 8px 26px rgba(0,0,0,0.44),
        0 0 14px rgba(255,255,255,0.035) !important;
}

/* Kicker/Lead sicher über Panel, aber ohne Artefakt */
.oct-home-hero-v20 .oct-home-kicker,
.oct-home-hero-v20 .oct-home-lead{
    position:relative !important;
    z-index:21 !important;
}

@keyframes octHeroKenBurnsZoom {
    from { transform: scale(1); }
    to { transform: scale(1.085); }
}

@media (prefers-reduced-motion: reduce) {
    .oct-home-hero-v20-bg {
        animation: none !important;
        transform: scale(1) !important;
    }
}


/* =========================================================
   Hero-Panel ~15% groesser
========================================================= */
html body .oct-home-hero-v20 .oct-home-hero-v20-panel {
  max-width: 690px !important;
  padding: 53px 55px 51px 55px !important;
}

html body .oct-home-hero-v20 .oct-home-kicker {
  font-size: 28px !important;
  margin-bottom: 20px !important;
}

html body .oct-home-hero-v20 .oct-home-title {
  font-size: 60px !important;
  margin-bottom: 28px !important;
}

html body .oct-home-hero-v20 .oct-home-lead {
  font-size: 23px !important;
  max-width: 780px !important;
}

@media (max-width: 1400px) {
  html body .oct-home-hero-v20 .oct-home-hero-v20-panel {
    max-width: 620px !important;
    padding: 48px 50px 46px 50px !important;
  }

  html body .oct-home-hero-v20 .oct-home-title {
    font-size: 55px !important;
  }

  html body .oct-home-hero-v20 .oct-home-lead {
    font-size: 21px !important;
  }
}

@media (min-width: 2200px) {
  html body .oct-home-hero-v20 .oct-home-hero-v20-panel {
    max-width: 690px !important;
    padding: 53px 55px 51px 55px !important;
  }

  html body .oct-home-hero-v20 .oct-home-title {
    font-size: 60px !important;
  }

  html body .oct-home-hero-v20 .oct-home-lead {
    font-size: 23px !important;
  }
}

@media (max-width: 1199px) {
  html body .oct-home-hero-v20 .oct-home-hero-v20-panel {
    max-width: 720px !important;
  }
}

@media (max-width: 767px) {
  html body .oct-home-hero-v20 .oct-home-hero-v20-panel {
    max-width: calc(100% - 8px) !important;
    padding: 24px 20px !important;
  }

  html body .oct-home-hero-v20 .oct-home-kicker {
    font-size: 14px !important;
  }

  html body .oct-home-hero-v20 .oct-home-title {
    font-size: clamp(28px, 7.8vw, 36px) !important;
  }

  html body .oct-home-hero-v20 .oct-home-lead {
    font-size: 16px !important;
  }
}