.elementor-492 .elementor-element.elementor-element-6cbde4c{--display:grid;--e-con-grid-template-columns:repeat(10, 1fr);--e-con-grid-template-rows:repeat(4, 1fr);--gap:0px 0px;--row-gap:0px;--column-gap:0px;--grid-auto-flow:row;--align-items:stretch;}.elementor-492 .elementor-element.elementor-element-6cbde4c:not(.elementor-motion-effects-element-type-background), .elementor-492 .elementor-element.elementor-element-6cbde4c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-repeat:no-repeat;background-size:cover;}.elementor-492 .elementor-element.elementor-element-8878b90{--display:flex;}.elementor-492 .elementor-element.elementor-element-4b0f91a{--display:flex;}.elementor-492 .elementor-element.elementor-element-2ed1322{--display:flex;}.elementor-492 .elementor-element.elementor-element-89a94c4{--display:flex;}.elementor-492 .elementor-element.elementor-element-79e36bc{--display:flex;}.elementor-492 .elementor-element.elementor-element-6c39530{--display:flex;}.elementor-492 .elementor-element.elementor-element-cd13225{--display:flex;}.elementor-492 .elementor-element.elementor-element-48427bf{--display:flex;}.elementor-492 .elementor-element.elementor-element-b1d46b6{--display:flex;}.elementor-492 .elementor-element.elementor-element-c28cd75{--display:flex;}.elementor-492 .elementor-element.elementor-element-6c6ba95{--display:flex;}.elementor-492 .elementor-element.elementor-element-c542683{--display:flex;}.elementor-492 .elementor-element.elementor-element-35faae4{--display:flex;}.elementor-492 .elementor-element.elementor-element-5a6f6e5{--display:flex;}.elementor-492 .elementor-element.elementor-element-b777ef6{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-492 .elementor-element.elementor-element-b777ef6:not(.elementor-motion-effects-element-type-background), .elementor-492 .elementor-element.elementor-element-b777ef6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-4c2a736 );}.elementor-492 .elementor-element.elementor-element-d885ca1{--display:flex;}.elementor-492 .elementor-element.elementor-element-d4fb764{--display:flex;}.elementor-492 .elementor-element.elementor-element-7fd7d90{--display:flex;}.elementor-492 .elementor-element.elementor-element-4ee5b6b{--display:flex;}.elementor-492 .elementor-element.elementor-element-c7da72c{--display:flex;}.elementor-492 .elementor-element.elementor-element-2ef9d99{--display:flex;}.elementor-492 .elementor-element.elementor-element-75ee015{--display:flex;}.elementor-492 .elementor-element.elementor-element-5dc67c2{--display:flex;}.elementor-492 .elementor-element.elementor-element-453e03f{--display:flex;}.elementor-492 .elementor-element.elementor-element-d5c2c82{--display:flex;}.elementor-492 .elementor-element.elementor-element-c078e86{--display:flex;}.elementor-492 .elementor-element.elementor-element-69c1a82{--display:flex;}.elementor-492 .elementor-element.elementor-element-73986ca{--display:flex;}.elementor-492 .elementor-element.elementor-element-3fe3a3d{--display:flex;}.elementor-492 .elementor-element.elementor-element-01a342a{--display:flex;}@media(min-width:2400px){.elementor-492 .elementor-element.elementor-element-6cbde4c{--grid-auto-flow:row;}}@media(max-width:1366px){.elementor-492 .elementor-element.elementor-element-6cbde4c{--grid-auto-flow:row;}}@media(max-width:1200px){.elementor-492 .elementor-element.elementor-element-6cbde4c{--grid-auto-flow:row;}}@media(max-width:1024px){.elementor-492 .elementor-element.elementor-element-6cbde4c{--grid-auto-flow:row;}}@media(max-width:880px){.elementor-492 .elementor-element.elementor-element-6cbde4c{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-492 .elementor-element.elementor-element-6cbde4c{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}}/* Start custom CSS for container, class: .elementor-element-6cbde4c *//* ==========================================================================
   FLUID 10-SPALTEN GRID SYSTEM (DAS TEASER-MOSAIK)
   ========================================================================== */

/* ==========================================================================
   FLUID 10-SPALTEN GRID SYSTEM (FEINJUSTIERT)
   ========================================================================== */

.gsub-fluid-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr); /* Perfekte 10er-Teilung */
    
    /* 1. KLEINERE LÜCKEN: Halbiert von max 12px auf max 6px (fluid skalierend) */
    gap: clamp(2px, 0.2vw, 6px);          
    
    width: 100%;
    position: relative;
    background-color: var(--gsub-darker-blue); /* Hintergrundfarbe für die feinen Linien */
    
    /* 2. GEGEN DEN RAND UNTEN: Verhindert, dass Elementor das Grid künstlich streckt */
    align-content: start; 
    height: auto;
    padding: 0 !important;
    margin: 0 !important;
}

/* Grid-Spanning Hilfsklassen */
.cell-1-1 { grid-column: span 1; grid-row: span 1; }
.cell-2-1 { grid-column: span 2; grid-row: span 1; }
.cell-2-2 { grid-column: span 2; grid-row: span 2; }
.cell-4-1 { grid-column: span 4; grid-row: span 1; }

/* Die quadratischen Raster-Kacheln */
.grid-bg-effect {
    position: relative;
    overflow: hidden;
    aspect-ratio: 2/1; /* Bestimmt die proportionale Würfel-Form im 10er-Grid */
    border: none;      /* Keine Borders nötig dank nativem Grid-Gap */
}

/* Das Pseudo-Element für die "Farbfolie" */
.grid-bg-effect::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: multiply; /* Lässt das Hintergrundfoto brillant durchscheinen */
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* AUTOMATISCHER MOSAIK-MIX (Zufalls-Look über mathematische Schleife) */
.grid-bg-effect:nth-child(4n+4)::before { background-color: rgba(191, 18, 75, 0.5); }   /* Gsub Rot */
.grid-bg-effect:nth-child(4n+2)::before { background-color: rgba(58, 78, 93, 0.45); }  /* Gsub Blau */
.grid-bg-effect:nth-child(4n+3)::before { background-color: rgba(27, 42, 50, 0.55); }   /* Dunkelgrau */
.grid-bg-effect:nth-child(4n+1)::before { background-color: rgba(255, 255, 255, 0.11); } /* Fast Klar */

/* MANUELLE OVERRIDES (Falls an einer Stelle die Automatik ein Gesicht verdeckt) */
.grid-tile-red::before   { background-color: rgba(197, 31, 66, 0.4) !important; }
.grid-tile-blue::before  { background-color: rgba(58, 78, 93, 0.45) !important; }
.grid-tile-dark::before  { background-color: rgba(27, 42, 50, 0.6) !important; }
.grid-tile-clear::before { background-color: transparent !important; }

/* HOVER-LOGIK: Blendet NUR die Folie aus, Inhalt & Bild bleiben voll sichtbar */
.grid-bg-effect:hover::before {
    opacity: 0;
    transform: scale(1.03); /* Subtiler, edler Zoom-Effekt im Hintergrund */
}

/* ==========================================================================
   DIE WEISSE KACHEL (Z.B. FÜR DIE ZAHL "130")
   ========================================================================== */
.grid-solid-white {
    background-color: #ffffff !important;
    grid-column: span 2; /* Erstreckt sich über 2 Spalten */
    grid-row: span 2;    /* Erstreckt sich über 2 Zeilen */
    aspect-ratio: auto;  /* Hebt 2:1 auf, da 2x2 Felder im Grid wieder proportional passen */
    border: none;
}

.grid-solid-white::before {
    display: none !important; /* Blockiert jegliche Farbfolie auf diesem Element */
}

/* ==========================================================================
   TEXT-SCHUTZSCHICHT (GRID CONTENT LAYER)
   ========================================================================== */
.grid-content-layer {
    position: relative;
    z-index: 2; /* Schiebt Texte, Zahlen und Buttons IMMER über die Farbfolie */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: var(--gsub-space-sm);
}

/* Spezifisches Styling für die Inhalte der weißen "130"-Kachel */
.grid-solid-white .grid-content-layer {
    color: var(--gsub-text-dark);
}

.grid-solid-white h2 {
    font-size: clamp(3rem, 6vw + 1rem, 7.5rem) !important; /* Riesige, perfekt skalierende Zahl */
    font-weight: 600 !important;
    color: var(--gsub-darker-blue) !important;
    margin-bottom: var(--gsub-space-xs);
}

.grid-solid-white p {
    font-size: clamp(0.85rem, 0.2vw + 0.8rem, 1.1rem) !important;
    line-height: 1.4 !important;
    color: var(--gsub-dark-blue);
    margin-bottom: 0;
}/* End custom CSS */