/* ==========================================================================
   4. FOTO-MODUL (MIT SCHWEBENDEM TEXT & SPERR-LOGIK)
   ========================================================================== */

#foto-modul {
    /* clear: both; <-- ENTFERNT, da es Flexbox-Layouts zerstört */
    display: block;
    margin-top: 2rem;
    width: 18rem;       /* Begrenzt das gesamte Modul exakt auf Spaltenbreite */
    text-align: left;
}

#foto-toggle-link {
    display: inline-block;
    margin-bottom: 0.8rem;
    cursor: pointer;
    text-decoration: none;
}

#foto-toggle-link .icon-quadrat {
    position: relative; /* Wichtig für absoluten Info-Text */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #000000;
    color: #ffffff;
    border-radius: 4px;
    transition: background 0.3s ease;
}

#foto-toggle-link:hover .icon-quadrat {
    background: #222222;
}

#foto-toggle-link svg {
    width: 18px;
    height: 18px;
}

/* Der schwebende Info-Text rechts neben dem Auge */
#foto-toggle-link .icon-quadrat::after {
    content: "Fotos des Autors ansehen";
    position: absolute;
    left: 42px;               /* 32px Quadrat + 10px Abstand */
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    font-size: 0.9rem;
    font-family: sans-serif;
    letter-spacing: 0.5px;
    color: #333;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
}

/* Einblenden NUR, wenn das Foto versteckt ist UND nicht per JS gesperrt ist UND gehoverkt wird */
#foto-toggle-link.foto-versteckt .icon-quadrat:not(.sperre):hover::after {
    opacity: 1;
    visibility: visible;
}

/* LOGIK FÜR DIE AUGEN-ICONS */
#foto-toggle-link .icon-eye { display: none; }
#foto-toggle-link .icon-eye-slash { display: inline-block; }

#foto-toggle-link.foto-versteckt .icon-eye { display: inline-block; }
#foto-toggle-link.foto-versteckt .icon-eye-slash { display: none; }




/* Foto-Wrapper-Animation & Slideshow-Basis */
/**************************************************/
#foto-wrapper {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.6s ease-in-out, opacity 0.4s ease-in-out;

    /* Zwingend erforderlich, damit absolut positionierte Kinder darin bleiben */
    position: relative; 
    width: 100%;
}
#foto-wrapper.sichtbar {
    max-height: 35rem;
    opacity: 1;
}

/* Styling für ALLE Slideshow-Bilder */
.hochformat-foto {
    width: 100%;
    height: auto;
    display: block;

    /* Legt alle Bilder unsichtbar exakt übereinander */
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    z-index: 1;
}

/* Das aktuell aktive Bild bricht aus der absoluten Positionierung aus */
.hochformat-foto.active {
    position: relative; /* Gibt dem Container seine natürliche Höhe zurück */
    opacity: 1;
    z-index: 2;
}

  /* Foto-Wrapper-Animation & Slideshow-Basis */
	   #foto-wrapper {
	       max-height: 0;
	       opacity: 0;
	       overflow: hidden;
	       transition: max-height 0.6s ease-in-out, opacity 0.4s ease-in-out;
 
	       /* Zwingend erforderlich, damit absolut positionierte Kinder darin bleiben */
	       position: relative; 
	       width: 100%;
	   }

	   #foto-wrapper.sichtbar {
	       max-height: 35rem;
	       opacity: 1;
	   }

	   /* Styling für ALLE Slideshow-Bilder */
	   .hochformat-foto {
	       width: 100%;
	       height: auto;
	       display: block;
 
	       /* Legt alle Bilder unsichtbar exakt übereinander */
	       position: absolute;
	       top: 0;
	       left: 0;
	       opacity: 0;
	       transition: opacity 0.8s ease-in-out;
	       z-index: 1;
	   }

	   /* Das aktuell aktive Bild bricht aus der absoluten Positionierung aus */
	   .hochformat-foto.active {
	       position: relative; /* Gibt dem Container seine natürliche Höhe zurück */
	       opacity: 1;
	       z-index: 2;
	   }
	   /* Der Container, der das Bild enthält */
	   .fotobox-container {
	       position: relative;
	       display: inline-block;
	       overflow: hidden;
	       border-radius: 8px; /* Optionale Abrundung der Bildschirmecken */
	       box-shadow: 
	           0 0 0 1px #c4c4c4, /* Innerer Monitorrahmen */
	           0 1px 2px rgba(0, 0, 0, 0.5); /* Äußerer Schatten für Tiefe */
	   }

	   /* Das Glassy-Overlay (Der Monitor-Bildschirm) */
	   .fotobox-container::after {
	       content: "";
	       position: absolute;
	       top: 0;
	       left: 0;
	       width: 100%;
	       height: 100%;
	       z-index: 5;
	       pointer-events: none; /* Klicks gehen normal durch auf das Bild */
    
	       /* 1. Frosted-Glass-Effekt (Mattes Glas) */
	       backdrop-filter: blur(1px) contrast(95%) brightness(105%);
	       -webkit-backdrop-filter: blur(1px) contrast(95%) brightness(105%);
    
	       /* 2. Diagonale Licht-Reflektion und Röhren-Vignette */
	       background: linear-gradient(
	           135deg, 
	           rgba(255, 255, 255, 0.15) 0%, 
	           rgba(255, 255, 255, 0.05) 25%, 
	           rgba(255, 255, 255, 0) 50%, 
	           rgba(0, 0, 0, 0.15) 100%
	       );
    
	       /* 3. Subtiler, innerer Schatten (Rahmen-Spiegelung) */
	       box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.2);
	   }

	   /* Optional: Scanlines für den echten Retro-Röhrenmonitor-Look */
	   .fotobox-container::before {
	       content: "";
	       position: absolute;
	       top: 0;
	       left: 0;
	       width: 100%;
	       height: 100%;
	       z-index: 4;
	       pointer-events: none;
	       opacity: 0.08; /* Sehr subtil einstellen */
	       background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), 
	                   linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
	       background-size: 100% 4px, 6px 100%;
	   }