.elementor-kit-15{--e-global-color-primary:#FDC609;--e-global-color-secondary:#9A9A99;--e-global-color-text:#4D4D4D;--e-global-color-accent:#FEE89D;--e-global-color-5dca370:#F5F5F5;--e-global-color-b80af8a:#FFF9E6;--e-global-color-9ddd58f:#D7D7D6;--e-global-color-9a0dfd7:#FED753;--e-global-color-e3b463c:#B8B8B8;--e-global-color-2804439:#FCE10A;--e-global-color-25a2d7b:#FCA70A;--e-global-color-dda050a:#F4D10A;--e-global-color-d18c3b4:#F7F7F4;--e-global-color-c04c3a1:#F8FAFC;--e-global-color-69b01ef:#F1F5F9;--e-global-color-81c77fc:#050505;--e-global-color-07dcd24:#9C9C9C;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-size:19px;--e-global-typography-primary-font-weight:300;--e-global-typography-secondary-font-family:"Open Sans";--e-global-typography-secondary-font-size:16px;--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Montserrat";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;background-color:var( --e-global-color-c04c3a1 );color:var( --e-global-color-81c77fc );font-family:"Roboto", Sans-serif;font-size:16px;font-weight:300;line-height:1.6em;}.elementor-kit-15 button,.elementor-kit-15 input[type="button"],.elementor-kit-15 input[type="submit"],.elementor-kit-15 .elementor-button{background-color:var( --e-global-color-primary );font-family:"Roboto", Sans-serif;font-size:13px;font-weight:600;line-height:1.5em;color:var( --e-global-color-text );box-shadow:0px 7px 19px 1px rgba(130.9, 130.9, 130.9, 0.23);border-style:none;border-radius:7px 7px 7px 7px;}.elementor-kit-15 button:hover,.elementor-kit-15 button:focus,.elementor-kit-15 input[type="button"]:hover,.elementor-kit-15 input[type="button"]:focus,.elementor-kit-15 input[type="submit"]:hover,.elementor-kit-15 input[type="submit"]:focus,.elementor-kit-15 .elementor-button:hover,.elementor-kit-15 .elementor-button:focus{background-color:var( --e-global-color-accent );color:var( --e-global-color-text );box-shadow:0px 9px 24px -10px rgba(0,0,0,0.5);}.elementor-kit-15 e-page-transition{background-color:#FFBC7D;}.elementor-kit-15 p{margin-block-end:1.6rem;}.elementor-kit-15 a{color:var( --e-global-color-text );font-size:13px;line-height:1.6em;}.elementor-kit-15 a:hover{color:var( --e-global-color-accent );}.elementor-kit-15 h1{color:var( --e-global-color-text );font-family:"Open Sans", Sans-serif;font-size:26px;font-weight:600;line-height:1.6em;}.elementor-kit-15 h2{color:var( --e-global-color-text );font-family:"Open Sans", Sans-serif;font-size:21px;font-weight:600;}.elementor-kit-15 h3{color:var( --e-global-color-text );font-family:"Open Sans", Sans-serif;font-size:18px;font-weight:600;line-height:1.5em;}.elementor-kit-15 h4{color:var( --e-global-color-text );font-family:"Open Sans", Sans-serif;font-size:17px;font-weight:600;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:100%;}.e-con{--container-max-width:100%;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:24px;}.elementor-element{--widgets-spacing:24px 24px;--widgets-spacing-row:24px;--widgets-spacing-column:24px;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}@media(max-width:1440px){.elementor-kit-15{font-size:15px;}.elementor-kit-15 h1{font-size:22px;line-height:1.6em;}.elementor-kit-15 h2{font-size:20px;}.elementor-kit-15 h3{font-size:18px;}.elementor-kit-15 button,.elementor-kit-15 input[type="button"],.elementor-kit-15 input[type="submit"],.elementor-kit-15 .elementor-button{font-size:13px;}}@media(max-width:1200px){.elementor-kit-15 h1{font-size:22px;line-height:1.5em;}.elementor-kit-15 h2{font-size:21px;line-height:1.6em;}.elementor-kit-15 button,.elementor-kit-15 input[type="button"],.elementor-kit-15 input[type="submit"],.elementor-kit-15 .elementor-button{font-size:13px;}}@media(max-width:1024px){.elementor-kit-15 h1{font-size:23px;line-height:1.6em;}.elementor-kit-15 h2{font-size:21px;line-height:1.6em;}.elementor-kit-15 h3{font-size:18px;line-height:1.5em;}.elementor-kit-15 h4{font-size:17px;}.elementor-kit-15 button,.elementor-kit-15 input[type="button"],.elementor-kit-15 input[type="submit"],.elementor-kit-15 .elementor-button{font-size:13px;line-height:1.5em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:100%;}.e-con{--container-max-width:100%;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}}@media(max-width:880px){.elementor-kit-15 h1{font-size:23px;line-height:1.6em;}.elementor-kit-15 h2{font-size:20px;line-height:1.5em;}.elementor-kit-15 button,.elementor-kit-15 input[type="button"],.elementor-kit-15 input[type="submit"],.elementor-kit-15 .elementor-button{font-size:12px;}}@media(max-width:767px){.elementor-kit-15{font-size:14px;line-height:1.7em;}.elementor-kit-15 a{font-size:14px;}.elementor-kit-15 h1{font-size:22px;line-height:1.5em;}.elementor-kit-15 h2{font-size:19px;line-height:1.5em;}.elementor-kit-15 h3{font-size:17px;line-height:1.6em;}.elementor-kit-15 h4{font-size:15px;}.elementor-kit-15 button,.elementor-kit-15 input[type="button"],.elementor-kit-15 input[type="submit"],.elementor-kit-15 .elementor-button{font-size:12px;line-height:1.4em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:100%;}.e-con{--container-max-width:100%;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}}@media(min-width:2400px){.elementor-kit-15{font-size:17px;line-height:1.6em;}.elementor-kit-15 a{font-size:15px;line-height:1.6em;}.elementor-kit-15 h1{font-size:26px;line-height:1.6em;}.elementor-kit-15 h2{font-size:22px;}.elementor-kit-15 h3{font-size:19px;}.elementor-kit-15 h4{font-size:16px;}.elementor-kit-15 button,.elementor-kit-15 input[type="button"],.elementor-kit-15 input[type="submit"],.elementor-kit-15 .elementor-button{font-size:14px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1920px;}.e-con{--container-max-width:1920px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}}:root { --brand-color-yellow:#FDC609; --text-brand:#4D4D4D; --secondary-brand:#9A9A99; --lightest-grey:#f5f5f5; --Slate-50:#F8FAFC; --Slate-100:#f1f5f9; }
/* Start custom CSS */.full-bleed{
  width: 100vw;
  max-width: none;
  position: relative;
  left: 50%;
  margin-left: -50vw;
}

/* Basis-Typografie für beide Klassen (Mobile First) */
.text-hell,
.text-dunkel {
    font-size: 1.2rem; /* Mobile */
    line-height: 1.6em;
}

/* Farben definieren */

/* Für hellen Hintergrund -> Dunkle Schrift */
.text-hell {
    color: #4d4d4d; /* Hier Wunschfarbe für dunklen Text eintragen */
}

/* Für dunklen Hintergrund -> Helle Schrift */
.text-dunkel {
    color: #f5f5f5; /* Hier Wunschfarbe für hellen Text eintragen */
}

/* Tablet (ab 768px) */
@media (min-width: 768px) {
    .text-hell,
    .text-dunkel {
        font-size: 1.2rem;
    }
}

/* Desktop (ab 1025px) */
@media (min-width: 1025px) {
    .text-hell,
    .text-dunkel {
        font-size: 1.4rem;
    }
}

/* Breitbild (ab 2400px - falls in Elementor aktiviert) */
@media (min-width: 2400px) {
    .text-hell,
    .text-dunkel {
        font-size: 2rem;
    }
}

/* -----------------------------------------------------------
   OPTION 1: "The Monitoring Grid" (Radar / Scan)
   Perfekt für: Hero Section oder Tech-Daten
   Wirkung: Präzise, überwachend, sicher.
   ----------------------------------------------------------- */
.ex-bg-grid {
    position: relative;
    width: 100%;
    overflow: hidden;
    z-index: 0;
}

/* Das statische Raster */
.ex-bg-grid::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 1;
}

/* Der Scanner-Balken */
.ex-bg-grid::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 100%;
    height: 200%;
    background: linear-gradient(
        to bottom,
        transparent 45%,
        rgba(253, 198, 9, 0.05) 50%, /* Ihr Goldton */
        transparent 55%
    );
    z-index: 2;
    animation: scanline 8s linear infinite;
    pointer-events: none;
}

@keyframes scanline {
    0% { transform: translateY(-30%); }
    100% { transform: translateY(30%); }
}


/* -----------------------------------------------------------
   OPTION 2: "Controlled Atmosphere" (Partikel / Staub)
   Perfekt für: Zündgefahrenbewertung, Prozess-Bereiche
   Wirkung: Schwebend, detailreich, atmosphärisch.
   ----------------------------------------------------------- */
.ex-bg-particles {
    position: relative;
    width: 100%;
    background: radial-gradient(circle at center, #1a1a1a 0%, #000000 100%);
    overflow: hidden;
}

.particle-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
}

/* Erzeugt viele kleine Punkte via box-shadow (Performance-Trick) */
.particle-layer::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    /* Koordinaten für "Staubkörner" */
    box-shadow: 
        10vw 10vh 0 0px rgba(253, 198, 9, 0.4),
        30vw 40vh 0 1px rgba(255, 255, 255, 0.1),
        50vw 20vh 0 0px rgba(253, 198, 9, 0.2),
        70vw 80vh 0 1px rgba(255, 255, 255, 0.1),
        90vw 10vh 0 0px rgba(253, 198, 9, 0.3),
        20vw 90vh 0 1px rgba(255, 255, 255, 0.1),
        40vw 50vh 0 0px rgba(253, 198, 9, 0.2),
        60vw 30vh 0 1px rgba(255, 255, 255, 0.1),
        80vw 60vh 0 0px rgba(253, 198, 9, 0.3);
    animation: floatingParticles 40s linear infinite;
}

@keyframes floatingParticles {
    0% { transform: translateY(0) rotate(0deg); opacity: 0.5; }
    50% { opacity: 1; }
    100% { transform: translateY(-100px) rotate(20deg); opacity: 0.5; }
}


/* -----------------------------------------------------------
   OPTION 3: "Hazard Shield" (Dark Warning Stripes)
   Perfekt für: Footer oder CTA Sektionen
   Wirkung: Stark, industriell, undurchdringlich.
   ----------------------------------------------------------- */
.ex-bg-hazard {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.ex-bg-hazard::before {
    content: '';
    position: absolute;
    inset: -50%; /* Größer als Container für Rotation */
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(255, 255, 255, 0.02) 0px,
        rgba(255, 255, 255, 0.02) 50px,
        transparent 50px,
        transparent 100px
    );
    opacity: 0.5;
    animation: slideStripes 60s linear infinite;
}

/* Ein Vignette-Overlay für mehr Tiefe */
.ex-bg-hazard::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, transparent 30%, #000000 100%);
    pointer-events: none;
}

@keyframes slideStripes {
    0% { transform: translateY(0); }
    100% { transform: translateY(100px); }
}

/* Hilfsklassen für Text (nur zur Demo) */
.demo-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-family: sans-serif;
    font-size: 24px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 4px;
    z-index: 10;
    text-align: center;
}

/* --- 2. Der Tank (Füllstand) --- */
.process-tank {
    position: absolute;
    bottom: 20%;
    left: 10%;
    width: 80px;
    height: 120px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    backdrop-filter: blur(5px);
}

.tank-level {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60%; /* Füllstand */
    background: rgba(253, 198, 9, 0.1);
    border-top: 2px solid #FDC609;
    box-shadow: 0 0 20px rgba(253, 198, 9, 0.2);
    animation: tankFill 8s ease-in-out infinite alternate;
}

@keyframes tankFill {
    0% { height: 40%; }
    100% { height: 75%; }
}


/* --- 3. Das Gebläse / Pumpe (Rotation) --- */
.process-fan {
    position: absolute;
    top: 25%;
    right: 20%;
    width: 80px;
    height: 80px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fan-blades {
    width: 60%;
    height: 60%;
    border-top: 4px solid #FDC609;
    border-bottom: 4px solid #FDC609;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-radius: 50%;
    animation: spin 3s linear infinite;
}

@keyframes spin { 100% { transform: rotate(360deg); } }


/* --- 4. Daten-Labels (SCADA UI) --- */
.label {
    position: absolute;
    font-size: 10px;
    color: #666;
    letter-spacing: 1px;
}
.label-tank { bottom: 15%; left: 10%; }
.label-flow { top: 46%; left: 30%; color: #FDC609; }
.label-fan { top: 20%; right: 20%; }



/* ============================================================
   OPTION B (CORRECTED): "The Ex-Zone Map" 
   Hexagon-Update: Grade Kante oben/unten (Flat-Topped)
   ============================================================ */
.ex-symbol-wrapper {
    position: relative;
    width: 100%;
    height: 500px;
    /* Feines Hintergrund-Gitter */
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 40px 40px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Das Hexagon (Flat Topped: Waagerechte oben/unten) */
.ex-hexagon {
    position: relative;
    width: 230px;  /* Etwas breiter für die Proportion */
    height: 210px;
    background: rgba(253, 198, 9, 0.05);
    /* Die neuen Koordinaten für flache Oberseite */
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

/* Goldener Rand für Hexagon */
.ex-hexagon::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #4d4d4d;
    /* Exakt derselbe Clip-Path für den Rand */
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    z-index: -1;
    opacity: 0.3;
}

/* Innerer Rand (optional für mehr Tiefe) */
.ex-hexagon::after {
    content: '';
    position: absolute;
    inset: 4px; /* Dicke des Randes */
    background: #050505; /* Schneidet die Mitte aus */
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    z-index: -1;
}

.ex-text {
    font-family: 'Times New Roman', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 56px; /* Größerer Text */
    color: #FDC609;
    text-shadow: 0 0 20px rgba(253, 198, 9, 0.6);
    margin-top: -5px; /* Optische Korrektur */
}

/* Die Zonen-Ringe (Pulsierend) */
.zone-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    transform: scale(0);
    animation: zonePulse 6s ease-out infinite;
}

.zone-0 { width: 180px; height: 180px; border-color: rgba(253, 198, 9, 0.6); animation-delay: 0s; }
.zone-1 { width: 340px; height: 340px; border-color: rgba(253, 198, 9, 0.3); animation-delay: 0.5s; }
.zone-2 { width: 500px; height: 500px; border-color: rgba(253, 198, 9, 0.1); animation-delay: 1s; }

@keyframes zonePulse {
    0% { transform: scale(0.8); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: scale(1.1); opacity: 0; }
}

/* Partikel-Blocker Animation */
.spark-blocker {
    position: absolute;
    top: 50%; left: 50%;
    width: 100%; height: 100%;
    pointer-events: none;
    animation: rotateBlocker 20s linear infinite;
}

.spark-blocker::after {
    content: '';
    position: absolute;
    top: -120px; left: 0;
    width: 3px; height: 3px;
    background: #fff;
    box-shadow: 0 0 10px #fff;
    opacity: 0;
    animation: sparkDie 3s infinite;
}

@keyframes sparkDie {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(50px); }
}
@keyframes rotateBlocker { 100% { transform: rotate(360deg); } }

/* ============================================================
   3. EX-SYMBOL (Light)
   ============================================================ */
.ex-hexagon-light {
    position: relative;
    width: 130px; height: 110px;
    background: rgba(253, 198, 9, 0.1);
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    display: flex; align-items: center; justify-content: center;
    z-index: 10;h
}
.ex-hexagon-light::before {
    content: ''; position: absolute; inset: 0;
    background: #FDC609;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    z-index: -1; opacity: 1; /* Volle Deckkraft für Rand */
}
.ex-hexagon-light::after {
    content: ''; position: absolute; inset: 3px;
    background: #FFFFFF; /* Weiße Mitte */
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    z-index: -1;
}
.ex-text-light {
    font-family: 'Times New Roman', serif;
    font-weight: bold; font-style: italic; font-size: 56px;
    color: #d97706; /* Dunkleres Gold/Orange für Kontrast */
    margin-top: -5px;
}
.zone-ring-light {
    position: absolute;
    border-radius: 50%;
    border: 1px dashed #cbd5e1; /* Helles Grau */
    transform: scale(0);
    animation: zonePulse 6s ease-out infinite;
}
.zone-0-l { width: 180px; height: 180px; border-color: #FDC609; }

/* -----------------------------------------------------------
   OPTION 6 (FIXED): "Visible Gas Stream" (Lüftung/Strömung)
   Update: Deutlich heller, kräftiger, mit Gold-Akzent.
   Wirkung: Sichtbarmachung von Strömungen.
   ----------------------------------------------------------- */
.ex-bg-gas-bold {
    position: relative;
    width: 100%;
    background-color: #050505;
    overflow: hidden;
}

/* Ebene 1: Basis-Nebel (Weiß/Grau) */
.ex-bg-gas-bold::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%; /* Start weit links für Endlos-Loop */
    width: 300%;
    height: 100%;
    background: radial-gradient(
        ellipse at 50% 50%, 
        rgba(255, 255, 255, 0.15) 0%, 
        rgba(255, 255, 255, 0.05) 40%, 
        transparent 70%
    );
    filter: blur(40px); /* Weicher Gas-Look */
    animation: gasFlowRight 20s linear infinite;
    transform: scaleY(0.6); /* Flach gedrückt */
}

/* Ebene 2: Gefahren-Indikator (Gold/Gelb) */
.ex-bg-gas-bold::after {
    content: '';
    position: absolute;
    bottom: -20%; /* Kommt von unten */
    left: -50%;
    width: 250%;
    height: 80%;
    background: radial-gradient(
        ellipse at 50% 50%, 
        rgba(253, 198, 9, 0.2) 0%, /* Kräftiges Gold */
        rgba(253, 198, 9, 0.05) 40%, 
        transparent 70%
    );
    filter: blur(60px);
    mix-blend-mode: screen; /* Leuchtet auf dem Untergrund */
    animation: gasFlowLeft 25s linear infinite;
    transform: scaleY(0.5);
}

@keyframes gasFlowRight {
    0% { transform: translateX(0) scaleY(0.6); }
    100% { transform: translateX(33%) scaleY(0.6); }
}

@keyframes gasFlowLeft {
    0% { transform: translateX(0) scaleY(0.5); }
    100% { transform: translateX(-33%) scaleY(0.5); }
}


/* -----------------------------------------------------------
   OPTION 7 (NEW): "Combustible Dust" (Explosiver Staub)
   Perfekt für: VDI 2263, Schüttgut-Anlagen
   Wirkung: Turbulent, dicht, gefährlich.
   ----------------------------------------------------------- */
.ex-bg-dust {
    position: relative;
    width: 100%;
    background: linear-gradient(to bottom, #080808, #000000);
    overflow: hidden;
}

/* ============================================================
   OPTION 4: "Micro-Particle Dust" (MAX VISIBILITY Version)
   Update: Partikel auf 3px vergrößert, Deckkraft auf 90%.
   ============================================================ */
.ex-bg-dust {
    position: relative;
    width: 100%;
    background: linear-gradient(to bottom, #111111, #000000); /* Hellerer Start für Kontrast */
    overflow: hidden;
}

/* Stärkeres Licht von oben für Kontrast */
.ex-bg-dust::before {
    content: '';
    position: absolute;
    top: -20%;
    left: 20%;
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, rgba(255,255,255,0.15), transparent 70%);
    filter: blur(40px);
    z-index: 1;
}

.dust-container {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* Staubkörner (3px + Glow) */
.dust-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(255,255,255,0.3); /* Selbstleuchtender Kern */
    border-radius: 50%;
    /* Harte, helle Schatten */
    box-shadow: 
        5vw 5vh 1px 1px rgba(255,255,255,0.9),
        15vw 25vh 1px 1px rgba(253,198,9,0.9),
        25vw 10vh 1px 1px rgba(255,255,255,0.8),
        35vw 45vh 1px 1px rgba(255,255,255,0.9),
        45vw 85vh 1px 1px rgba(253,198,9,0.8),
        55vw 15vh 1px 1px rgba(255,255,255,0.9),
        65vw 55vh 1px 1px rgba(255,255,255,0.8),
        75vw 35vh 1px 1px rgba(253,198,9,0.9),
        85vw 75vh 1px 1px rgba(255,255,255,0.9),
        95vw 20vh 1px 1px rgba(255,255,255,0.8),
        10vw 90vh 1px 1px rgba(255,255,255,0.9),
        30vw 60vh 1px 1px rgba(253,198,9,0.8),
        50vw 40vh 1px 1px rgba(255,255,255,0.9),
        70vw 95vh 1px 1px rgba(255,255,255,0.8),
        90vw 50vh 1px 1px rgba(253,198,9,0.9);
    opacity: 0;
    animation: dustSwirl 12s linear infinite;
}

.dust-particle:nth-child(1) { animation-delay: 0s; animation-duration: 14s; transform-origin: 40% 40%; }
.dust-particle:nth-child(2) { animation-delay: -4s; animation-duration: 18s; transform-origin: 60% 60%; left: 10%; }
.dust-particle:nth-child(3) { animation-delay: -8s; animation-duration: 12s; transform-origin: 30% 70%; left: -10%; }
.dust-particle:nth-child(4) { animation-delay: -2s; animation-duration: 20s; transform-origin: 70% 30%; left: 20%; opacity: 0.7; }

@keyframes dustSwirl {
    0% { opacity: 0; transform: translateY(50px) rotate(0deg) scale(0.8); }
    10% { opacity: 1; } /* Sofort volle Sichtbarkeit */
    90% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-50px) rotate(30deg) scale(1.5); }
}

.demo-text {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-family: sans-serif;
    font-size: 24px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 4px;
    z-index: 10;
    text-align: center;
}

/* Hilfsklassen für Text (nur zur Demo) */
.demo-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-family: sans-serif;
    font-size: 24px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 4px;
    z-index: 10;
    text-align: center;
}

/* ============================================================
   OPTION 1: "Active Sonar" (Sensorik & Überwachung)
   Wiederhergestellt: Pulsierende Ringe für Reichweiten-Visualisierung.
   ============================================================ */
.ex-bg-sonar {
    position: relative;
    width: 100%;
    background-color: #050505;
    overflow: hidden;
}

/* Pulsierender Ring 1 */
.ex-bg-sonar::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border: 1px solid rgba(253, 198, 9, 0.4);
    border-radius: 50%;
    animation: sonarPulse 4s infinite ease-out;
}

/* Pulsierender Ring 2 (versetzt) */
.ex-bg-sonar::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border: 1px solid rgba(253, 198, 9, 0.2);
    border-radius: 50%;
    animation: sonarPulse 4s infinite ease-out 2s; /* 2s Verzögerung */
}

@keyframes sonarPulse {
    0% { width: 0; height: 0; opacity: 1; }
    100% { width: 800px; height: 800px; opacity: 0; }
}


/* ============================================================
   OPTION 2: "Engineering Blueprint" (Planung & Konstruktion)
   Wiederhergestellt: Raster mit blinkenden Messpunkten.
   ============================================================ */
.ex-bg-blueprint {
    position: relative;
    width: 100%;
    background-color: #0a0a0a;
    /* Feines Millimeterpapier-Raster */
    background-image: 
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 20px 20px;
    overflow: hidden;
}

/* Blinkende "Messpunkte" im Raster */
.ex-bg-blueprint::before {
    content: '+';
    position: absolute;
    top: 20%;
    left: 20%;
    color: rgba(253, 198, 9, 0.5);
    font-family: monospace;
    font-weight: bold;
    animation: blinkTech 3s infinite;
    /* Mehrere Schattenkopien für Verteilung */
    text-shadow: 
        30vw 10vh 0 rgba(253, 198, 9, 0.5),
        10vw 40vh 0 rgba(253, 198, 9, 0.5),
        50vw 50vh 0 rgba(253, 198, 9, 0.5),
        80vw 20vh 0 rgba(253, 198, 9, 0.5);
}

@keyframes blinkTech {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 1; }
}

/* -----------------------------------------------------------
   GRID BACKGROUND MIT FADE-EFFEKT (Light Mode)
   ----------------------------------------------------------- */

.bg-grid-light {
    position: relative;
    width: 100%;
    background-color: #F8FAFC; /* Basis-Hintergrund */
    overflow: hidden !important; /* Wichtig für Clipping */
    
}

/* EBENE 1: Das Grid mit Verlauf */
.bg-grid-light::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0; /* Liegt im Hintergrund */
    
    /* Das technische Raster */
    background-image: 
        linear-gradient(rgba(15, 23, 42, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;

    /* DIE MAGIE: Radialer Verlauf (Spotlight) */
    /* Ersetzt den linearen Verlauf, um auch links/rechts auszublenden */
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
    
    pointer-events: none;
}

/* EBENE 2: Der Goldene Scanner (Scanline) */
.bg-grid-light::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    
    /* Goldener Scan-Verlauf */
    background: linear-gradient(
        to bottom,
        transparent 45%,
        rgba(253, 198, 9, 0.08) 50%, /* Gold mit geringer Deckkraft */
        transparent 55%
    );
    
    animation: scanline 8s linear infinite;
    pointer-events: none;
    z-index: -1; /* Liegt über dem Grid */
}

/* Animation Keyframes */
@keyframes scanline {
    0% { transform: translateY(-30%); }
    100% { transform: translateY(30%); }
}

h2, h3, p {
    hyphens:auto;
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('http://beta.bahrex.de/wp-content/uploads/2026/01/roboto-v50-latin-regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 200;
	font-display: auto;
	src: url('http://beta.bahrex.de/wp-content/uploads/2026/01/roboto-v50-latin-200.woff2') format('woff2');
}
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 300;
	font-display: auto;
	src: url('http://beta.bahrex.de/wp-content/uploads/2026/01/roboto-v50-latin-300.woff2') format('woff2');
}
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 500;
	font-display: auto;
	src: url('http://beta.bahrex.de/wp-content/uploads/2026/01/roboto-v50-latin-500.woff2') format('woff2');
}
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 900;
	font-display: auto;
	src: url('http://beta.bahrex.de/wp-content/uploads/2026/01/roboto-v50-latin-900.woff2') format('woff2');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('http://beta.bahrex.de/wp-content/uploads/2026/01/open-sans-v44-latin-regular.woff2') format('woff2'),
		url('http://beta.bahrex.de/wp-content/uploads/2026/01/OpenSans-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 300;
	font-display: auto;
	src: url('http://beta.bahrex.de/wp-content/uploads/2026/01/open-sans-v44-latin-300.woff2') format('woff2'),
		url('http://beta.bahrex.de/wp-content/uploads/2026/01/OpenSans-Light.ttf') format('truetype');
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 500;
	font-display: auto;
	src: url('http://beta.bahrex.de/wp-content/uploads/2026/01/open-sans-v44-latin-500.woff2') format('woff2'),
		url('http://beta.bahrex.de/wp-content/uploads/2026/01/OpenSans-Medium.ttf') format('truetype');
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 600;
	font-display: auto;
	src: url('http://beta.bahrex.de/wp-content/uploads/2026/01/open-sans-v44-latin-600.woff2') format('woff2'),
		url('http://beta.bahrex.de/wp-content/uploads/2026/01/OpenSans-SemiBold.ttf') format('truetype');
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 800;
	font-display: auto;
	src: url('http://beta.bahrex.de/wp-content/uploads/2026/01/open-sans-v44-latin-800.woff2') format('woff2'),
		url('http://beta.bahrex.de/wp-content/uploads/2026/01/OpenSans-Bold.ttf') format('truetype');
}
/* End Custom Fonts CSS */