/* O.CT V8 Verado */

:root {
  --oct-yellow: #FFE200;
  --oct-text: #f5f7fa;
}

body.page-verado {
  position: relative;
  isolation: isolate;
  color: var(--oct-text);
  background-color: #0a0e14;
}

body.page-verado main {
  position: relative;
  z-index: 1;
  padding: 0;
  isolation: isolate;
  overflow-x: clip;
  background-color: #060a10;
}

body.page-verado main::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1800' height='900' viewBox='0 0 1800 900'%3E%3Cg fill='none'%3E%3Cpath d='M-80 130 C170 54 320 214 570 126 C820 38 1010 170 1245 90 C1480 10 1600 90 1880 34' stroke='%236a7d8c' stroke-opacity='.22' stroke-width='1.25'/%3E%3Cpath d='M-90 160 C170 82 325 242 575 154 C825 66 1015 198 1250 118 C1485 38 1605 118 1885 62' stroke='%236a7d8c' stroke-opacity='.16' stroke-width='1'/%3E%3Cpath d='M-90 190 C170 112 325 272 575 184 C825 96 1015 228 1250 148 C1485 68 1605 148 1885 92' stroke='%236a7d8c' stroke-opacity='.11' stroke-width='1'/%3E%3Cpath d='M-110 770 C155 680 340 850 610 754 C880 658 1030 810 1305 700 C1580 590 1650 730 1910 650' stroke='%236a7d8c' stroke-opacity='.20' stroke-width='1.25'/%3E%3Cpath d='M-110 812 C155 722 340 892 610 796 C880 700 1030 852 1305 742 C1580 632 1650 772 1910 692' stroke='%236a7d8c' stroke-opacity='.13' stroke-width='1'/%3E%3Cpath d='M-130 604 C170 548 372 640 662 590 C952 540 1120 640 1398 568 C1676 496 1735 556 1915 514' stroke='%23FFE200' stroke-opacity='.18' stroke-width='1.3'/%3E%3Cpath d='M-120 104 C170 70 392 132 662 96 C932 60 1120 142 1398 88 C1676 34 1760 84 1925 50' stroke='%23FFE200' stroke-opacity='.14' stroke-width='1.1'/%3E%3C/g%3E%3C/svg%3E") center center / cover no-repeat,
    radial-gradient(circle at 68% 46%, rgba(255, 226, 0, 0.035) 0%, transparent 42%),
    radial-gradient(circle at 16% 22%, rgba(110, 130, 148, 0.08) 0%, transparent 34%),
    linear-gradient(180deg, #050810 0%, #070d14 48%, #050810 100%);
}

body.page-verado main::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  z-index: 0;
  pointer-events: none;
  opacity: 0.34;
  background:
    radial-gradient(circle at 78% 42%, rgba(255, 226, 0, 0.05) 0 118px, transparent 119px),
    radial-gradient(circle at 78% 42%, transparent 0 182px, rgba(110, 130, 148, 0.08) 183px 184px, transparent 185px),
    radial-gradient(circle at 78% 42%, transparent 0 248px, rgba(110, 130, 148, 0.05) 249px 250px, transparent 251px),
    conic-gradient(from 35deg at 78% 42%, transparent 0deg, transparent 24deg, rgba(255, 226, 0, 0.07) 35deg, transparent 48deg, transparent 112deg, rgba(110, 130, 148, 0.08) 124deg, transparent 138deg, transparent 220deg, rgba(255, 226, 0, 0.05) 236deg, transparent 252deg, transparent 360deg),
    url("../img/bl2.png") calc(100% - 11vw) 36% / min(300px, 22vw) no-repeat;
  filter: grayscale(0.15) brightness(0.52);
}

body.page-verado .oct-footer-bg {
  position: relative;
  z-index: 3;
}

body.page-verado .nav::before {
  background: linear-gradient(to bottom, rgba(0,0,0,.78) 0%, rgba(0,0,0,.42) 55%, transparent 100%);
}

body.page-verado main > .oct-verado-section,
body.page-verado main > section {
  position: relative;
  z-index: 1;
}

.oct-verado-section {
  padding-left: var(--edge);
  padding-right: var(--edge);
}

.oct-bso-full-row {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Joystick — sichtbar halten (schwarzer PNG-Hintergrund + Grid-Fix) */
.oct-smartcraft-inner-v3 {
  grid-template-rows: auto auto !important;
  align-items: start !important;
}

.oct-joystick-visual-v3 {
  display: block !important;
  width: min(100%, 340px) !important;
  min-height: 280px !important;
  margin: 0 auto 28px !important;
  padding: 8px 0 4px !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 6 !important;
  background:
    radial-gradient(ellipse at center, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 42%, transparent 72%) !important;
}

.oct-joystick-visual-v3 img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 240px !important;
  max-height: 360px !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  position: relative !important;
  z-index: 2 !important;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.55)) !important;
}

.oct-joystick-card-v3 {
  min-height: 480px !important;
}

@media (max-width: 1700px), (max-height: 940px) {
  .oct-verado-hero-v9 {
    padding-top: clamp(155px, 11vh, 180px) !important;
  }
}

.oct-verado-section *,
.oct-verado-section *::before,
.oct-verado-section *::after {
  box-sizing: border-box;
}

/* Hero: yellow line under main title */
.oct-verado-hero-v9 .oct-title::after {
  content: "";
  display: block;
  width: 46px;
  height: 4px;
  margin: 18px 0 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 226, 0, 0.98), rgba(255, 226, 0, 0.84));
  box-shadow: 0 0 16px rgba(255, 226, 0, 0.14);
}

/* Keep hero lightning visible (RAW 0B disables globally) */
.oct-verado-hero-v9 .oct-hero-lightning-layer {
  display: block !important;
}

.oct-verado-hero-v9 .oct-hero-lightning-layer .oct-lightning {
  display: block !important;
}

/* =========================================================
   1) HERO: Foto-Hintergrund | Rest: dunkles Linien-Pattern (body)
========================================================= */

.oct-verado-hero-v9,
.oct-verado-hero-v10,
.oct-verado-hero-v11,
.oct-verado-hero-v12 {
    background-image: none !important;
    background-color: #050810 !important;
    background-attachment: scroll !important;
    background-blend-mode: normal !important;
}

.oct-verado-hero-v9 .oct-hero-kenburns-bg,
.oct-verado-hero-v10 .oct-hero-kenburns-bg,
.oct-verado-hero-v11 .oct-hero-kenburns-bg,
.oct-verado-hero-v12 .oct-hero-kenburns-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background-image: url("../img/bgver.jpg");
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: rgba(0, 0, 0, 0.42);
    background-blend-mode: multiply;
    transform: scale(1);
    transform-origin: center 42%;
    animation: octHeroKenBurnsZoom 26s ease-out forwards;
    will-change: transform;
}

.oct-verado-section:not(.oct-verado-hero-v9):not(.oct-verado-hero-v10):not(.oct-verado-hero-v11):not(.oct-verado-hero-v12):not(.oct-bso-full-row):not(.oct-highlights-v2),
.oct-highlights-v1,
.oct-highlights-v3,
.oct-tech-control-v1,
.oct-tech-control-v2,
.oct-tech-control-v3,
.oct-specs-v2 {
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
    background-blend-mode: normal !important;
    background-attachment: scroll !important;
}

/* =========================================================
   2) ALTE SECTION-GRADIENT-OVERLAYS DEAKTIVIEREN
   Nur große Section-Overlays entfernen.
   Karten, Boxen, Bilder, Effekte bleiben unberührt.
========================================================= */

.oct-verado-section::before,
.oct-verado-section::after,
.oct-verado-section.oct-hero::before,
.oct-verado-section.oct-hero::after,
.oct-verado-hero-v9::before,
.oct-verado-hero-v9::after,
.oct-verado-hero-v10::before,
.oct-verado-hero-v10::after,
.oct-verado-hero-v11::before,
.oct-verado-hero-v11::after,
.oct-verado-hero-v12::before,
.oct-verado-hero-v12::after {
    display:none !important;
    content:none !important;
    background:none !important;
}

/* =========================================================
   3) SP PAGE BUILDER BACKGROUNDS TRANSPARENT HALTEN
   Keine Layout-Breite anfassen, nur Hintergrundfarbe neutralisieren.
========================================================= */

.sppb-section,
.sppb-row-container,
.sppb-row,
.sppb-column,
.sppb-column-addons {
    background-color:transparent !important;
}

/* =========================================================
   4) ALTE BLITZ-/ATMOSPHERE-TESTS DEAKTIVIEREN
========================================================= */

.oct-hero-lightning-layer,
.oct-global-lightning-layer,
.oct-skyflash-layer,
.oct-skybolt-layer,
.oct-body-skybolt-layer,
.oct-atmo-layer,
.oct-row2-atmo,
.oct-row2-water,
.oct-row2-glow,
.oct-row2-particles {
    display:none !important;
}

/* =========================================================
   5) BODY-FIXED LIGHTNING STRIPES
========================================================= */

.oct-body-stripeflash-layer{
    position:fixed !important;
    left:0 !important;
    top:0 !important;
    width:100% !important;
    max-width:100% !important;
    height:44vh !important;
    z-index:80 !important;
    pointer-events:none !important;
    overflow:hidden !important;
    display:block !important;
    opacity:1 !important;
    mix-blend-mode:screen;
}

/* Nav bleibt über den Blitzen — Größe/Position via nav-lock.css */
header.nav {
  z-index: 10000 !important;
}

.oct-stripeflash{
    position:absolute !important;
    display:block !important;
    width:190px !important;
    height:58px !important;
    opacity:0;
    pointer-events:none !important;

    filter:
        drop-shadow(0 0 7px rgba(255,226,0,0.22))
        drop-shadow(0 0 15px rgba(255,255,255,0.12));
}

/* Lichtstreifen statt Zick-Zack-Blitz */
.oct-stripeflash:before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    width:100%;
    height:100%;
    transform:translateY(-50%);

    background:
        linear-gradient(
            112deg,
            transparent 0%,
            transparent 18%,
            rgba(255,255,255,0.64) 20%,
            rgba(255,255,255,0.00) 23%,
            transparent 100%
        ),
        linear-gradient(
            140deg,
            transparent 0%,
            transparent 40%,
            rgba(255,226,0,0.62) 43%,
            rgba(255,226,0,0.00) 47%,
            transparent 100%
        ),
        linear-gradient(
            108deg,
            transparent 0%,
            transparent 61%,
            rgba(255,255,255,0.38) 64%,
            rgba(255,255,255,0.00) 67%,
            transparent 100%
        );

    clip-path:polygon(
        0% 54%,
        22% 46%,
        36% 28%,
        47% 49%,
        71% 37%,
        56% 59%,
        100% 50%,
        62% 68%,
        49% 86%,
        41% 66%,
        18% 78%
    );
}

/* zusätzlicher kurzer weiß-gelber Kern */
.oct-stripeflash:after{
    content:"";
    position:absolute;
    left:20%;
    top:47%;
    width:58%;
    height:2px;
    transform:rotate(-13deg);
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255,255,255,0.00) 15%,
            rgba(255,255,255,0.72) 48%,
            rgba(255,226,0,0.34) 62%,
            rgba(255,255,255,0.00) 100%
        );
    filter:blur(.3px);
}

/* =========================================================
   6) POSITIONEN — RUHIG VERTEILT
========================================================= */

.oct-stripeflash.s1{
    left:12%;
    top:18%;
    transform:rotate(-7deg) scale(.78);
    animation:octStripeFlash 13.5s infinite;
    animation-delay:1.0s;
}

.oct-stripeflash.s2{
    left:33%;
    top:13%;
    transform:rotate(4deg) scale(.62);
    animation:octStripeFlash 15.0s infinite;
    animation-delay:3.8s;
}

.oct-stripeflash.s3{
    left:51%;
    top:21%;
    transform:rotate(-9deg) scale(.70);
    animation:octStripeFlash 16.2s infinite;
    animation-delay:6.2s;
}

.oct-stripeflash.s4{
    right:23%;
    top:30%;
    transform:rotate(8deg) scale(.54);
    animation:octStripeFlash 17.6s infinite;
    animation-delay:8.9s;
}

.oct-stripeflash.s5{
    right:12%;
    top:17%;
    transform:rotate(-12deg) scale(.64);
    animation:octStripeFlash 15.8s infinite;
    animation-delay:11.4s;
}

.oct-stripeflash.s6{
    left:63%;
    top:12%;
    transform:rotate(6deg) scale(.52);
    animation:octStripeFlash 18.5s infinite;
    animation-delay:13.7s;
}

/* =========================================================
   7) DOPPEL-AUFBLITZ-EFFEKT
========================================================= */

@keyframes octStripeFlash{
    0%   { opacity:0; }
    5.6% { opacity:0; }

    5.95%{ opacity:.58; }
    6.25%{ opacity:.10; }
    6.62%{ opacity:.46; }

    7.05%{ opacity:0; }
    100% { opacity:0; }
}

@media(max-width:991px){
    .oct-body-stripeflash-layer{
        display:none !important;
    }
}

/* =========================================================
   GLOBALER 10%-OVERLAY
   Gilt für alle O.CT Verado Sections außer der Bild-Row.
========================================================= */

.oct-verado-hero-v9::before,
.oct-verado-hero-v10::before,
.oct-verado-hero-v11::before,
.oct-verado-hero-v12::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.20) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

.oct-verado-section:not(.oct-bso-full-row):not(.oct-verado-hero-v9):not(.oct-verado-hero-v10):not(.oct-verado-hero-v11):not(.oct-verado-hero-v12)::before {
    display: none !important;
    content: none !important;
    background: none !important;
}

/* Inhalt sicher über dem Overlay halten */
.oct-verado-section:not(.oct-bso-full-row) .oct-verado-inner{
    position:relative !important;
    z-index:5 !important;
}

/* Row 4 / reine Bild-Row ausdrücklich ohne Overlay */
.oct-bso-full-row::before,
.oct-bso-full-row::after{
    display:none !important;
    content:none !important;
    background:none !important;
}

.oct-verado-hero-v9 {
    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;
}

/* Große Screens: echte Hero-Höhe */
@media (min-width:1800px) and (min-height:950px) {
    .oct-verado-hero-v9 {
        min-height: 100vh !important;
        padding-top: clamp(125px, 9vh, 170px) !important;
        padding-bottom: clamp(90px, 8vh, 135px) !important;
    }
}

/* 2560x1440 und ähnliche große Screens */
@media (min-width:2200px) and (min-height:1200px) {
    .oct-verado-hero-v9 {
        min-height: 100vh !important;
        padding-top: clamp(140px, 9vh, 180px) !important;
        padding-bottom: clamp(105px, 8vh, 150px) !important;
    }
}

/* Kleinere Laptops / niedrigere Viewports: kein erzwungenes 100vh */
@media (max-width:1700px), (max-height:940px) {
    .oct-verado-hero-v9 {
        min-height: auto !important;
        padding-top: 135px !important;
        padding-bottom: 80px !important;
    }
}

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

.oct-verado-hero-v9 .oct-hero-grid {
    display: grid !important;
    grid-template-columns: minmax(430px, 0.92fr) minmax(640px, 1.08fr) !important;
    gap: 40px !important;
    align-items: center !important;
}

/* =========================================================
   MINI-BLITZE OBEN – werden durch RAW 0B global ersetzt/ausgeblendet
========================================================= */

.oct-hero-lightning-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.oct-lightning {
    position: absolute;
    display: block;
    width: 185px;
    height: 56px;
    opacity: 0;
    filter:
        drop-shadow(0 0 7px rgba(255,226,0,0.28))
        drop-shadow(0 0 16px rgba(255,255,255,0.13));
}

.oct-lightning::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, transparent 0 19%, rgba(255,255,255,0.62) 20% 22%, transparent 23% 100%),
        linear-gradient(145deg, transparent 0 41%, rgba(255,226,0,0.60) 42% 45%, transparent 46% 100%),
        linear-gradient(110deg, transparent 0 62%, rgba(255,255,255,0.34) 63% 65%, transparent 66% 100%);
    clip-path: polygon(
        0% 52%,
        25% 45%,
        38% 8%,
        48% 48%,
        73% 33%,
        55% 60%,
        100% 49%,
        59% 73%,
        49% 100%,
        39% 69%,
        17% 82%
    );
}

.oct-lightning.l1 { left: 12%; top: 17%; transform: rotate(-7deg) scale(0.82); animation: octTinyLightning 7.4s infinite; animation-delay: 0.7s; }
.oct-lightning.l2 { left: 31%; top: 13%; transform: rotate(4deg) scale(0.66); animation: octTinyLightning 8.2s infinite; animation-delay: 2.1s; }
.oct-lightning.l3 { left: 49%; top: 20%; transform: rotate(-9deg) scale(0.72); animation: octTinyLightning 8.8s infinite; animation-delay: 3.3s; }
.oct-lightning.l4 { right: 27%; top: 30%; transform: rotate(8deg) scale(0.58); animation: octTinyLightning 9.6s infinite; animation-delay: 4.6s; }
.oct-lightning.l5 { right: 14%; top: 17%; transform: rotate(-12deg) scale(0.70); animation: octTinyLightning 8.0s infinite; animation-delay: 5.4s; }
.oct-lightning.l6 { right: 7%; top: 29%; transform: rotate(10deg) scale(0.54); animation: octTinyLightning 10.2s infinite; animation-delay: 6.3s; }
.oct-lightning.l7 { left: 22%; top: 31%; transform: rotate(-5deg) scale(0.50); animation: octTinyLightning 9.0s infinite; animation-delay: 1.6s; }
.oct-lightning.l8 { left: 62%; top: 12%; transform: rotate(6deg) scale(0.58); animation: octTinyLightning 10.6s infinite; animation-delay: 7.1s; }
.oct-lightning.l9 { right: 39%; top: 22%; transform: rotate(-11deg) scale(0.48); animation: octTinyLightning 11.4s infinite; animation-delay: 8.0s; }
.oct-lightning.l10 { left: 6%; top: 27%; transform: rotate(7deg) scale(0.44); animation: octTinyLightning 12.2s infinite; animation-delay: 9.2s; }

@keyframes octTinyLightning {
    0%   { opacity: 0; }
    5%   { opacity: 0; }
    5.4% { opacity: 0.46; }
    5.8% { opacity: 0.08; }
    6.3% { opacity: 0.36; }
    7.0% { opacity: 0; }
    100% { opacity: 0; }
}

/* =========================================================
   LINKER TEXTBEREICH + INTRO-ANIMATION
========================================================= */

.oct-verado-hero-v9 .oct-hero-left {
    padding-left: 0 !important;
    position: relative !important;
    z-index: 5 !important;
}

.oct-verado-hero-v9 .oct-kicker {
    display: block !important;
    font-size: 24px !important;
    font-weight: 500 !important;
    letter-spacing: 1.8px !important;
    text-transform: uppercase !important;
    margin-bottom: 18px !important;
    color: #FFE200 !important;
    opacity: 0;
    transform: translateX(-22px);
    animation: octKickerReveal 1.0s cubic-bezier(0.16, 1, 0.3, 1) 0.18s forwards;
}

.oct-verado-hero-v9 .oct-kicker::before {
    display: none !important;
    content: none !important;
}

.oct-verado-hero-v9 .oct-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.42);
    opacity: 0;
    filter: blur(8px);
    clip-path: inset(0 100% 0 0);
    animation: octTitleReveal 1.25s cubic-bezier(0.16, 1, 0.3, 1) 0.42s forwards;
}

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

.oct-verado-hero-v9 .oct-btn-group {
    display: none !important;
}

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

@keyframes octTitleReveal {
    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 octLeadReveal {
    0% { opacity: 0; transform: translateY(18px); filter: blur(5px); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* =========================================================
   RECHTER BEREICH
========================================================= */

.oct-verado-hero-v9 .oct-hero-right {
    min-height: 620px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    position: relative !important;
    overflow: visible !important;
}

.oct-verado-hero-v9 .oct-hero-motor-wrap {
    position: relative !important;
    width: 570px !important;
    max-width: 570px !important;
    margin-left: -130px !important;
    margin-right: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    transform: translateY(8px);
    z-index: 3 !important;
    pointer-events: auto !important;
}

.oct-verado-hero-v9 .oct-hero-motor {
    max-height: 620px !important;
    width: auto !important;
    max-width: 100% !important;
    position: relative !important;
    z-index: 12 !important;
    pointer-events: auto !important;
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), filter 0.55s cubic-bezier(0.16, 1, 0.3, 1) !important;
    filter: drop-shadow(0 34px 58px rgba(0,0,0,0.58)) drop-shadow(0 0 24px rgba(255,255,255,0.04)) !important;
}

.oct-verado-hero-v9 .oct-hero-motor-wrap:hover .oct-hero-motor {
    transform: scale(1.045) translateY(-5px);
    filter: drop-shadow(0 44px 70px rgba(0,0,0,0.68)) drop-shadow(0 0 34px rgba(255,255,255,0.12)) drop-shadow(0 0 24px rgba(255,226,0,0.10)) !important;
}

.oct-verado-hero-v9 .oct-hero-techglow {
    position: absolute !important;
    inset: 4% -10% 4% -10% !important;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.105) 0%, rgba(255,255,255,0.045) 30%, rgba(255,255,255,0.00) 70%) !important;
    filter: blur(24px) !important;
    z-index: 1 !important;
    pointer-events: none !important;
    transition: opacity 0.55s ease, filter 0.55s ease, transform 0.55s ease;
}

.oct-verado-hero-v9 .oct-hero-motor-wrap:hover .oct-hero-techglow {
    opacity: 1.25;
    filter: blur(30px) !important;
    transform: scale(1.08);
}

/* =========================================================
   MOTOR-LICHT / ENERGY-SWEEP
========================================================= */

.oct-motor-sweep-layer {
    position: absolute;
    inset: -40px -70px;
    z-index: 4;
    pointer-events: none;
    overflow: visible;
    transition: opacity 0.55s ease, transform 0.55s ease, filter 0.55s ease;
}

.oct-verado-hero-v9 .oct-hero-motor-wrap:hover .oct-motor-sweep-layer {
    opacity: 1.25;
    transform: scale(1.04);
    filter: brightness(1.18);
}

.oct-motor-sweep-layer::before {
    content: "";
    position: absolute;
    left: -90px;
    top: 305px;
    width: 690px;
    height: 10px;
    transform: rotate(-23deg);
    background: linear-gradient(90deg, transparent 0%, rgba(255,226,0,0.00) 14%, rgba(255,226,0,0.42) 46%, rgba(255,255,255,0.36) 52%, rgba(255,226,0,0.26) 60%, transparent 100%);
    filter: blur(1.3px);
    box-shadow: 0 0 16px rgba(255,226,0,0.22), 0 0 34px rgba(255,226,0,0.08);
    opacity: 0.62;
    animation: octHeroSweepPulse 4.8s ease-in-out infinite;
}

.oct-motor-sweep-layer::after {
    content: "";
    position: absolute;
    left: 10px;
    top: 190px;
    width: 560px;
    height: 5px;
    transform: rotate(-23deg);
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.00) 16%, rgba(255,255,255,0.24) 48%, rgba(255,255,255,0.00) 100%);
    filter: blur(0.8px);
    box-shadow: 0 0 18px rgba(255,255,255,0.08);
    opacity: 0.58;
    animation: octHeroSweepPulse 6.2s ease-in-out infinite reverse;
}

@keyframes octHeroSweepPulse {
    0%, 100% { opacity: 0.30; transform: rotate(-23deg) translateX(-12px); }
    50% { opacity: 0.88; transform: rotate(-23deg) translateX(16px); }
}

.oct-energy-beam {
    position: absolute;
    display: block;
    height: 2px;
    border-radius: 30px;
    transform: rotate(-23deg);
    pointer-events: none;
    animation: octEnergyBeamMove 5.4s ease-in-out infinite alternate;
}

.oct-energy-beam.b1 { left: 60px; top: 116px; width: 320px; background: linear-gradient(90deg, transparent, rgba(255,226,0,0.46), transparent); box-shadow: 0 0 16px rgba(255,226,0,0.18); animation-delay: 0.2s; }
.oct-energy-beam.b2 { left: 140px; top: 250px; width: 410px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent); box-shadow: 0 0 14px rgba(255,255,255,0.10); animation-delay: 1s; }
.oct-energy-beam.b3 { left: 30px; top: 400px; width: 360px; background: linear-gradient(90deg, transparent, rgba(255,226,0,0.34), transparent); box-shadow: 0 0 14px rgba(255,226,0,0.13); animation-delay: 1.8s; }
.oct-energy-beam.b4 { left: 250px; top: 62px; width: 180px; transform: rotate(-9deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent); animation-delay: 2.6s; }
.oct-energy-beam.b5 { left: 310px; top: 504px; width: 210px; transform: rotate(-16deg); background: linear-gradient(90deg, transparent, rgba(255,226,0,0.26), transparent); animation-delay: 3.4s; }

@keyframes octEnergyBeamMove {
    0% { opacity: 0.35; margin-left: -6px; }
    100% { opacity: 0.95; margin-left: 16px; }
}

/* =========================================================
   MOTOR-EFFEKT: FRAGMENTE, STREIFEN, ARCS
========================================================= */

.oct-motor-effect {
    position: absolute;
    width: 590px;
    height: 590px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -49%);
    z-index: 2;
    pointer-events: none;
    animation: octMotorEffectFloat 8s ease-in-out infinite alternate;
    transition: transform 0.55s ease, opacity 0.55s ease, filter 0.55s ease;
}

.oct-verado-hero-v9 .oct-hero-motor-wrap:hover .oct-motor-effect {
    filter: brightness(1.22);
    opacity: 1.12;
}

@keyframes octMotorEffectFloat {
    0% { transform: translate(-50%, -49%) rotate(-0.4deg); opacity: 0.92; }
    100% { transform: translate(-49%, -50%) rotate(0.7deg); opacity: 1; }
}

.oct-motor-effect::before {
    content: "";
    position: absolute;
    inset: 28px;
    border-radius: 50%;
    background: conic-gradient(from 210deg, transparent 0deg, transparent 14deg, rgba(255,226,0,0.00) 15deg, rgba(255,226,0,0.40) 27deg, rgba(255,226,0,0.00) 39deg, transparent 40deg, transparent 74deg, rgba(255,255,255,0.00) 75deg, rgba(255,255,255,0.20) 89deg, rgba(255,255,255,0.00) 102deg, transparent 103deg, transparent 132deg, rgba(255,226,0,0.00) 133deg, rgba(255,226,0,0.22) 151deg, rgba(255,226,0,0.00) 166deg, transparent 167deg, transparent 198deg, rgba(255,255,255,0.00) 199deg, rgba(255,255,255,0.17) 214deg, rgba(255,255,255,0.00) 229deg, transparent 230deg, transparent 266deg, rgba(255,226,0,0.00) 267deg, rgba(255,226,0,0.28) 292deg, rgba(255,226,0,0.00) 310deg, transparent 311deg, transparent 360deg);
    -webkit-mask: radial-gradient(circle, transparent 0%, transparent 58%, #000 59%, #000 60.5%, transparent 61.5%, transparent 100%);
    mask: radial-gradient(circle, transparent 0%, transparent 58%, #000 59%, #000 60.5%, transparent 61.5%, transparent 100%);
    filter: drop-shadow(0 0 10px rgba(255,226,0,0.08));
    opacity: 0.95;
    animation: octArcPulse 5.6s ease-in-out infinite;
}

.oct-motor-effect::after {
    content: "";
    position: absolute;
    inset: 74px;
    border-radius: 50%;
    background: conic-gradient(from 95deg, transparent 0deg, transparent 32deg, rgba(255,255,255,0.00) 33deg, rgba(255,255,255,0.20) 48deg, rgba(255,255,255,0.00) 61deg, transparent 62deg, transparent 118deg, rgba(255,226,0,0.00) 119deg, rgba(255,226,0,0.23) 139deg, rgba(255,226,0,0.00) 154deg, transparent 155deg, transparent 232deg, rgba(255,255,255,0.00) 233deg, rgba(255,255,255,0.16) 255deg, rgba(255,255,255,0.00) 270deg, transparent 271deg, transparent 360deg);
    -webkit-mask: radial-gradient(circle, transparent 0%, transparent 60%, #000 61%, #000 62.5%, transparent 63.5%, transparent 100%);
    mask: radial-gradient(circle, transparent 0%, transparent 60%, #000 61%, #000 62.5%, transparent 63.5%, transparent 100%);
    opacity: 0.78;
    animation: octArcPulse 7s ease-in-out infinite reverse;
}

@keyframes octArcPulse {
    0%, 100% { opacity: 0.58; filter: drop-shadow(0 0 7px rgba(255,226,0,0.04)); }
    50% { opacity: 1; filter: drop-shadow(0 0 14px rgba(255,226,0,0.16)); }
}

.oct-motor-line {
    position: absolute;
    height: 2px;
    border-radius: 20px;
    transform: rotate(-22deg);
    transform-origin: center;
    opacity: 0.9;
    animation: octLineDrift 6.2s ease-in-out infinite alternate;
}

@keyframes octLineDrift {
    0% { margin-left: -4px; opacity: 0.52; }
    100% { margin-left: 8px; opacity: 0.96; }
}

.oct-motor-line.line-1 { width: 270px; left: 120px; top: 80px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent); animation-delay: 0.2s; }
.oct-motor-line.line-2 { width: 360px; left: 50px; top: 132px; background: linear-gradient(90deg, transparent, rgba(255,226,0,0.40), transparent); animation-delay: 0.6s; }
.oct-motor-line.line-3 { width: 320px; left: 154px; top: 194px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.20), transparent); animation-delay: 1.1s; }
.oct-motor-line.line-4 { width: 420px; left: 32px; top: 262px; background: linear-gradient(90deg, transparent, rgba(255,226,0,0.46), transparent); animation-delay: 1.6s; }
.oct-motor-line.line-5 { width: 350px; left: 152px; top: 330px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.19), transparent); animation-delay: 2s; }
.oct-motor-line.line-6 { width: 280px; left: 66px; top: 402px; background: linear-gradient(90deg, transparent, rgba(255,226,0,0.32), transparent); animation-delay: 2.4s; }
.oct-motor-line.line-7 { width: 260px; left: 230px; top: 458px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16), transparent); animation-delay: 2.8s; }
.oct-motor-line.line-8 { width: 170px; left: 270px; top: 52px; transform: rotate(-8deg); background: linear-gradient(90deg, transparent, rgba(255,226,0,0.34), transparent); animation-delay: 3.2s; }
.oct-motor-line.line-9 { width: 190px; left: 205px; top: 106px; transform: rotate(-8deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent); animation-delay: 3.6s; }
.oct-motor-line.line-10 { width: 220px; left: 75px; top: 36px; transform: rotate(-17deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.13), transparent); animation-delay: 4s; }
.oct-motor-line.line-11 { width: 240px; right: 40px; top: 152px; transform: rotate(-18deg); background: linear-gradient(90deg, transparent, rgba(255,226,0,0.26), transparent); animation-delay: 4.4s; }
.oct-motor-line.line-12 { width: 180px; right: 68px; bottom: 130px; transform: rotate(-16deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent); animation-delay: 4.8s; }

.oct-motor-backglow {
    position: absolute;
    width: 430px;
    height: 530px;
    left: 50%;
    top: 50%;
    transform: translate(-48%, -48%);
    z-index: 1;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.055) 28%, rgba(255,226,0,0.035) 48%, rgba(255,255,255,0.00) 72%);
    filter: blur(20px);
    opacity: 0.86;
    transition: opacity 0.55s ease, filter 0.55s ease, transform 0.55s ease;
}

.oct-verado-hero-v9 .oct-hero-motor-wrap:hover .oct-motor-backglow {
    opacity: 1.08;
    filter: blur(26px);
    transform: translate(-48%, -48%) scale(1.08);
}

/* =========================================================
   DATENFELDER RECHTS
========================================================= */

.oct-verado-hero-v9 .oct-hero-stats {
    position: absolute !important;
    right: -10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 240px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    z-index: 999 !important;
    pointer-events: auto !important;
}

.oct-verado-hero-v9 .oct-hero-stat {
    position: relative !important;
    min-height: 78px !important;
    width: 100% !important;
    padding: 15px 15px 15px 19px !important;
    gap: 13px !important;
    align-items: center !important;
    display: flex !important;
    overflow: hidden !important;
    pointer-events: auto !important;
    z-index: 1000 !important;
    cursor: default !important;
    transition: border-color 0.28s ease, background 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.155) 0%, rgba(255,255,255,0.070) 30%, rgba(8,12,18,0.76) 58%, rgba(255,255,255,0.040) 100%), repeating-linear-gradient(115deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, rgba(255,255,255,0.000) 2px, rgba(255,255,255,0.000) 7px) !important;
    border: 1px solid rgba(220,226,235,0.30) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.040), inset 0 18px 28px rgba(255,255,255,0.040), 0 14px 28px rgba(0,0,0,0.36) !important;
    backdrop-filter: blur(12px) saturate(1.05) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.05) !important;
}

.oct-verado-hero-v9 .oct-hero-stat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #FFE200;
    box-shadow: 0 0 10px rgba(255,226,0,0.18);
    z-index: 1;
    pointer-events: none !important;
}

.oct-verado-hero-v9 .oct-hero-stat::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.00) 34%, rgba(255,255,255,0.00) 100%);
    opacity: 0.55;
    z-index: 1;
}

.oct-verado-hero-v9 .oct-hero-stats .oct-hero-stat:hover,
.oct-verado-hero-v9 .oct-hero-stats .oct-hero-stat.oct-force-hover {
    transform: translateX(-5px) !important;
    border-color: rgba(255,226,0,0.82) !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.190) 0%, rgba(255,255,255,0.085) 30%, rgba(8,12,18,0.80) 58%, rgba(255,255,255,0.055) 100%), repeating-linear-gradient(115deg, rgba(255,255,255,0.045) 0px, rgba(255,255,255,0.045) 1px, rgba(255,255,255,0.000) 2px, rgba(255,255,255,0.000) 7px) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.065), inset 0 18px 28px rgba(255,255,255,0.050), 0 16px 34px rgba(0,0,0,0.46), 0 0 18px rgba(255,226,0,0.12) !important;
}

.oct-verado-hero-v9 .oct-hero-stats .oct-hero-stat:hover::before,
.oct-verado-hero-v9 .oct-hero-stats .oct-hero-stat.oct-force-hover::before {
    width: 3px;
    background: #FFE200;
}

.oct-verado-hero-v9 .oct-hero-stat-icon {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
    font-size: 20px !important;
    color: #FFE200 !important;
    position: relative !important;
    z-index: 3 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
}

.oct-verado-hero-v9 .oct-hero-stat h4 {
    margin: 0 0 4px 0 !important;
    font-size: 16px !important;
    line-height: 1.22 !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    position: relative !important;
    z-index: 3 !important;
    white-space: normal !important;
    pointer-events: none !important;
}

.oct-verado-hero-v9 .oct-hero-stat p {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.42 !important;
    font-weight: 400 !important;
    color: rgba(255,255,255,0.78) !important;
    position: relative !important;
    z-index: 3 !important;
    pointer-events: none !important;
}

/* =========================================================
   HERO OVERLAYS
   Deaktiviert.
   Background/Overlay kommt über RAW 0B / 0C.
========================================================= */

.oct-verado-hero-v9::before,
.oct-verado-hero-v9::after {
    display: none !important;
    content: none !important;
    background: none !important;
}

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

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

    .oct-verado-hero-v9 .oct-hero-grid {
        grid-template-columns: minmax(420px, 0.95fr) minmax(560px, 1.05fr) !important;
        gap: 32px !important;
    }

    .oct-verado-hero-v9 .oct-title {
        font-size: 48px !important;
    }

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

    .oct-verado-hero-v9 .oct-hero-motor-wrap {
        max-width: 520px !important;
        width: 520px !important;
        margin-left: -100px !important;
    }

    .oct-verado-hero-v9 .oct-hero-stats {
        width: 230px !important;
        right: -6px !important;
    }

    .oct-motor-effect {
        width: 545px;
        height: 545px;
    }
}

@media (max-width: 1199px) {
    .oct-verado-hero-v9 {
        min-height: auto !important;
        display: block !important;
        padding-top: 160px !important;
        padding-bottom: 70px !important;
    }

    .oct-verado-hero-v9 .oct-verado-inner {
        transform: none !important;
    }

    .oct-verado-hero-v9 .oct-hero-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .oct-verado-hero-v9 .oct-hero-right {
        min-height: auto !important;
        justify-content: center !important;
        display: block !important;
    }

    .oct-verado-hero-v9 .oct-hero-motor-wrap {
        width: 100% !important;
        max-width: 420px !important;
        margin: 20px auto 0 auto !important;
        transform: none !important;
    }

    .oct-verado-hero-v9 .oct-hero-motor {
        max-height: 460px !important;
        margin: 0 auto !important;
    }

    .oct-verado-hero-v9 .oct-hero-stats {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        margin-top: 28px !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        pointer-events: auto !important;
    }

    .oct-motor-effect,
    .oct-motor-sweep-layer {
        display: none !important;
    }

    .oct-hero-lightning-layer {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .oct-verado-hero-v9 {
        padding-top: 125px !important;
        padding-bottom: 55px !important;
    }

    .oct-verado-hero-v9 .oct-kicker {
        font-size: 16px !important;
        letter-spacing: 1.1px !important;
    }

    .oct-verado-hero-v9 .oct-title {
        font-size: 34px !important;
        line-height: 1.08 !important;
    }

    .oct-verado-hero-v9 .oct-lead {
        font-size: 16px !important;
        line-height: 1.65 !important;
    }

    .oct-verado-hero-v9 .oct-hero-motor-wrap {
        max-width: 330px !important;
    }

    .oct-verado-hero-v9 .oct-hero-motor {
        max-height: 360px !important;
    }

    .oct-verado-hero-v9 .oct-hero-stats {
        grid-template-columns: 1fr !important;
    }

    .oct-verado-hero-v9 .oct-hero-stat {
        min-height: 72px !important;
    }

    body.page-verado .oct-verado-section:not(.oct-bso-full-row) {
        padding-left: calc(var(--edge) + 5px);
        padding-right: calc(var(--edge) + 5px);
    }
}