.font-sans-project {
    font-family: "Exo 2",ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

p { font-size: 1.25rem; }

.text-comment {color:#900;}
.notshow {display:none;}

header {border-bottom: 1px solid #f3f3f3;}
/* Navigation item + hover + scrolling */
.navigation a {
    text-decoration: none;
    color: #222;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.5rem 1rem;
    transition: color 0.3s, background-color 0.3s;
}

.navigation a:hover {
    color: rgba(178,29,5);
    background-color: transparent;
    border: 1px solid rgba(235,120,5);

    /* transition: color 0.3s, background-color 0.3s; */
}

/* CSS-Klasse für den aktiven Zustand */
.navigation a.active {
    background-color: rgba(178,29,5);
    color: #fff;
    border: 1px solid rgba(235,120,5);
}
footer {	margin-bottom: -30px; }

footer .navigation a {
	text-decoration: none;
	color: #fff;
	background-color: transparent;
	border: 1px solid transparent;
	padding: 0.5rem 1rem;
	transition: color 0.3s, background-color 0.3s;
}

section {
    scroll-margin-top: 200px;

    /* Höhe der Navigation plus etwas Puffer */
}

/* END - Navigation item + hover + scrolling */
.thumbnail-wrapper {
    position: relative;

    /* Wichtig für die korrekte Positionierung des Overlays */
    display: inline-block;

    /* Sorgt dafür, dass der Wrapper nur so breit wie das Bild ist */
}

.thumbnail-wrapper img {
    display: block;

    /* Entfernt zusätzlichen Leerraum unter dem Bild */
    max-width: 100%;

    /* Stellt sicher, dass das Bild responsiv ist */
    height: auto;
}

.thumbnail-wrapper .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);

    /* Schwarzer Layer mit 50% Transparenz */
    opacity: 0;

    /* Standardmäßig unsichtbar */
    transition: opacity 0.3s ease;

    /* Sanfter Übergang für das Ein- und Ausblenden */
    pointer-events: none;

    /* Ermöglicht Klicks auf das darunterliegende Bild */
}

.thumbnail-wrapper .zoom-icon {
    position: absolute;
    bottom: 10px;
    right: 10px;
    opacity: 1;

    /* Bleibt immer sichtbar */
    pointer-events: none;
    z-index: 2;

    /* Anpassungen für das CSS-Pluszeichen */
    width: 40px;

    /* Breite des Icons */
    height: 40px;

    /* Höhe des Icons */
    /* background-color: rgba(0, 0, 0, 0.3);  Hintergrund wie zuvor */
    /* border-radius: 50%; Runde Form */
    display: flex;

    /* Für die Zentrierung der Striche */
    justify-content: center;

    /* Horizontale Zentrierung */
    align-items: center;

    /* Vertikale Zentrierung */
}

/* Die eigentlichen Striche des Pluszeichens */
.thumbnail-wrapper .zoom-icon::before,
.thumbnail-wrapper .zoom-icon::after {
    content: '';

    /* Wichtig für Pseudo-Elemente */
    position: absolute;
    background-color: white;

    /* Farbe der Striche */
}

/* Horizontaler Strich */
.thumbnail-wrapper .zoom-icon::before {
    width: 30px;

    /* Breite des horizontalen Strichs (kann angepasst werden) */
    height: 1px;

    /* Stärke des Strichs */
}

/* Vertikaler Strich */
.thumbnail-wrapper .zoom-icon::after {
    width: 1px;

    /* Stärke des Strichs */
    height: 30px;

    /* Höhe des vertikalen Strichs (kann angepasst werden) */
}

.thumbnail-wrapper:hover .overlay {
    opacity: 1;

    /* Overlay wird beim Hover sichtbar */
}

/* imageModal - Zusätzliche CSS für die Navigationspfeile und den Schließen-Button */
.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    cursor: pointer;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: white;
    z-index: 20;
}

.arrow-left {
    left: 20px;
}

.arrow-right {
    right: 20px;
}

/* Angepasste Positionierung des Close Buttons */
/* NEUE CSS-Regeln für den Close Button */
.close-button {
    position: fixed;

    /* WICHTIG: fixed statt absolute */
    top: 60px;

    /* Fester Abstand von oben */
    right: 30px;

    /* Fester Abstand von rechts */
    width: 40px;
    height: 40px;
    cursor: pointer;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: white;
    z-index: 60;

    /* Höherer z-index, um sicherzustellen, dass er über allem liegt */
    transition: background-color 0.2s ease;
}

.close-button:hover {
    background-color: rgba(255, 255, 255, 0.5);
}