/* Effektgruppe: layout/expand; Reihenfolge in inc/assets.php. */
/* Row Layout Expand */
@media (min-width: 1025px) {
/* --- BASIS REGELN --- */
.kb-hover-flex-expand > .kt-row-column-wrap {
    display: flex !important;
    flex-wrap: wrap; 
    gap: 0;
  }
  
  .kb-hover-flex-expand > .kt-row-column-wrap > .wp-block-kadence-column {
    flex: 1 1 0;
    transition: flex-grow 0.3s ease, transform 0.3s ease;
    will-change: flex-grow;
    z-index: 0;
  }
  
  /* --- DYNAMISCHE GRÖSSEN-VARIANTEN --- */
  
  /* Variante 1: .size-s (Dezente Vergrößerung) */
  .kb-hover-flex-expand.size-s > .kt-row-column-wrap > .wp-block-kadence-column:hover,
  .kb-hover-flex-expand.size-s > .kt-row-column-wrap > .wp-block-kadence-column.is-active {
    flex-grow: 1.5 !important;
    z-index: 2;
  }
  
  /* Variante 2: .size-m (Mittlere Vergrößerung - dein aktueller Standard) */
  .kb-hover-flex-expand.size-m > .kt-row-column-wrap > .wp-block-kadence-column:hover,
  .kb-hover-flex-expand.size-m > .kt-row-column-wrap > .wp-block-kadence-column.is-active {
    flex-grow: 2 !important;
    z-index: 2;
  }
  
  /* Variante 3: .size-xl (Starke Vergrößerung für Fokus-Content) */
  .kb-hover-flex-expand.size-xl > .kt-row-column-wrap > .wp-block-kadence-column:hover,
  .kb-hover-flex-expand.size-xl > .kt-row-column-wrap > .wp-block-kadence-column.is-active {
    flex-grow: 3.5 !important;
    z-index: 2;
  }
}

.text-visibility-icon-box {
    /* 1. LAYOUT-RESERVIERUNG (Im Ruhezustand 0) */
    position: relative;
    display: block;
    height: 0;
    margin-bottom: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    
    /* Transition für alle Layout-Werte */
    transition: 
        height 0.4s ease,
        margin 0.4s ease,
        opacity 0.4s ease,
        visibility 0.6s ease !important;
}

.text-visibility-icon-box.is-active {
    opacity: 1 !important;
    visibility: visible !important;
    
    /* 2. LAYOUT-ENTFALTUNG */
    /* Hier musst du die ungefähre Höhe deines Icons/Box angeben */
    height: 100px; 
    margin-bottom: 15px; /* Abstand zum Text darunter */
    
    /* Der Delay für den geschmeidigen Start */
    transition-delay: 0.01s !important;
}

/* Text, der sichtbar wird */
.text-visible {
    position: absolute;
     padding-top: 20px;
    padding-left: 5px;
     padding-right: 5px;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
  }
  
  @media (max-width: 1025px) {
      .text-visible {
          /* Setzt die Position auf relative, damit das Element im normalen Flow liegt */
          /* Absolute Positionierung wird entfernt */
          position: relative; 
          opacity: 1; 
      
          /* Transition auf sehr schnell setzen oder ganz entfernen, da es immer aktiv ist */
          transition: none; 
          pointer-events: auto;
      }
  }

   .text-visible.is-active {
    opacity: 1;
    transition: opacity 1s ease;
    pointer-events: auto;
  }
  
  .background-glow-up .kt-inside-inner-col::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      
      /* Standard: Dunkles Overlay (40% Schwarz) */
      background-color: rgba(0, 0, 0, 0.2); 
      
      transition: background-color 0.4s ease;
      z-index: 2; 
  }
  
  .background-glow-up.is-active .kt-inside-inner-col::after {
      /* Overlay wird transparent und das Bild wird heller */
      background-color: rgba(0, 0, 0, 0); 
  }

  /* Alle direkten Kinder (Texte, Buttons etc.) nach vorne holen */
  .background-darken-down .kt-inside-inner-col > * {
      position: relative;
      z-index: 3; /* Höher als das Overlay */
  }
  
  /* Basis-Zustand: Abdunklung nach unten */
  .background-darken-down .kt-inside-inner-col::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      
      /* Verlauf: Oben transparent, ab 30% beginnt die Verdunklung, unten 60% Schwarz */    
      transition: background-color 0.4s ease;
      z-index: 2; 
      pointer-events: none;
  }
  
  /* Hover-Zustand: Die Verdunklung verschwindet sanft */
  .background-darken-down.is-active .kt-inside-inner-col::after{
      background: linear-gradient(to bottom, 
      rgba(0, 0, 0, 0) 0%, 
      rgba(0, 0, 0, 0.6) 100%); 
  
  }
  
  /* Wenn das übergeordnete Element gehoved wird, wird der Text sichtbar */
  .card-visible-header {
    position: absolute;
    bottom: -15px; /* fixer Abstand vom Kartenboden, passe nach Wunsch an */
    opacity: 1;
    transform: translateY(0);
    transition: transform 0.5s ease;
    hyphens: auto;
    min-height: 40px !important; 
    /* Damit der Text bei Bedarf getrennt wird */
  }
  
  .card-visible {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.2s ease, transform 0.5s ease;
    hyphens: auto;
    min-height: 60px !important; 
    /* Textumbruch mit Silbentrennung */
    position: relative; /* falls noch nicht gesetzt */
  }
  
  /* Hover auf Eltern-Element (z.B. .zoom-background) */
  .card-visible-header.is-active {
    transform: translateY(-70px); /* Fährt 100px nach oben */
  }
  
  .card-visible.is-active {
    opacity: 1;
    transform: translateY(-20px); /* Fahrt ebenfalls nach oben, hier 50px als Beispiel */
  }