/* Effektgruppe: layout/fold-out; Reihenfolge in inc/assets.php. */

.fold-out-section {
    position: relative;
    /* Wir schalten den Standard-Hover für die Sektion quasi "blind" 
       und steuern ihn über ein Kind-Element oder Pseudo-Element */
    pointer-events: none; 
}

/* Der unsichtbare Sensor */
.fold-out-section::before {
    content: "";
    position: absolute;
    /* Zentrierung des Sensors */
    top: 50%;
    left: 50%;
    transform: translate(-80%, -80%);
    
    /* HIER DIE GRÖSSE DER HOVERZONE ANPASSEN */
    width: 200px; 
    height: 200px;
    
    /* Macht den Sensor wieder interaktiv */
    pointer-events: auto; 
    z-index: 10;
    
    /* Zum Testen kannst du background: rgba(255,0,0,0.2) nutzen */
    background: transparent; 
}

/* Die Spalte muss wieder auf Pointer-Events reagieren, damit Links darin klappen */
.fold-out-section .kt-inside-inner-col {
    pointer-events: auto;
    min-height: 300px;
    /* ... dein restlicher Code ... */
    transform: translate(calc(-100% + 150px), calc(100% - 150px));
    background-color: inherit;
    transition: transform 0.3s ease, background-color 0.3s ease;
    position: relative;
    z-index: 1;
}

/* --- DER TEXT --- */

.fold-out-text {

    opacity: 0; /* Standardmäßig unsichtbar */

    /* Letzte Definition gewinnt: 0.6s für weiches Einblenden */

    transition: opacity 0.6s ease;

}

/* --- NEUE HOVER-LOGIK --- */
/* Wir triggern den Effekt, wenn der SENSOR (::before) gehovered wird */
/* Da CSS kein "Hovering on before triggers sibling" direkt kann, 
   nutzen wir den Hover auf der Section, aber nur dort, wo der Sensor ist */

.fold-out-section:is(:hover, .hovered) .kt-inside-inner-col {
    transform: translate(0, 0);
    background-color: color-mix(in srgb, var(--global-palette1, #f59c00) 95%, transparent) !important;
}

.fold-out-section:is(:hover, .hovered) .fold-out-text {
    opacity: 1;
}