/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 23 2024 | 10:19:03 */
/* General styles for the body :before pseudo-element */
body:before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover; /* Adjust as needed */
    background-repeat: no-repeat;
/*    background-position: center;*/
    opacity: 0;
    animation: fadeIn 1s forwards;
    z-index: -1; /* Ensure it is behind all other content */
	
	background-image: url('/wp-content/uploads/2024/10/PORTRAIT_Startseite-DSCF5200.jpg'); /* Fallback default background */
    background-size: cover; /* Ensures the image covers the entire area */
    background-position: bottom left; /* Unterer Teil des Bildes bleibt immer sichtbar */
	
    background-repeat: no-repeat;


/*    transform: translateX(-10%); /* Verschiebung des Bildes nach links um 10% */*/
}

@media (orientation: portrait) and (max-aspect-ratio: 21/9) {
	body:before {
		background-image: url('/wp-content/uploads/2024/10/CROPPED_Startseite-DSCF5200-1.jpg');
		background-position: center;
	}
}

@media not(max-aspect-ratio: 21/9) {
	body:before {
		background-image: url('/wp-content/uploads/2024/10/PORTRAIT_Startseite-DSCF5200-1.jpg');
		background-position: bottom;
		background-size: 100vw;
	}
}


* For aspect ratios similar to 2.67 (i.e., wide screens that might crop important parts) */
@media (max-aspect-ratio: 2.6/1) {
    body:before {
        background-position: left calc(100% - 30%); /* Shifts the image up by 10%, simulating a crop */

    }
}

/* Keyframes for fade-in animation */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Fade-out class */
body.fade-out:before {
    animation: fadeOut 1s forwards;
}

/* Keyframes for fade-out animation */
@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Background images for specific pages */
body.page-id-60:before {
    background-image: url('/wp-content/uploads/2024/10/Komposition-DSCF5239.jpg');
			width: 100vw; /* Fill the viewport width with the background */
		    height: 100vh; /* Fill the viewport height with the background */
	    background-position: top right; /* Standard: Bild ist oben rechts positioniert */
}

body.page-id-58:before {
    background-image: url('/wp-content/uploads/2024/10/Unter-Lehre-Methodik-DSCF5390.jpg');
	    height: 100vh; /* Fill the viewport height with the background */
			width: 100vw; /* Fill the viewport width with the background */
	    background-position: top right; /* Standard: Bild ist oben rechts positioniert */



}

body.page-id-2:before {
    background-image: url('/wp-content/uploads/2024/10/About-DSCF5066.jpg');
	    height: 100vh; /* Fill the viewport height with the background */
			width: 100vw; /* Fill the viewport width with the background */
    background-size: cover; /* Bild füllt den gesamten Bereich */
    background-position: top right; /* Standard: Bild ist oben rechts positioniert */
    background-repeat: no-repeat;
    z-index: -1;
    opacity: 1;


}




body.page-id-24:before {
    background-image: url('/wp-content/uploads/2024/10/Termine-DSCF5358-1.jpg');
	    height: 100vh; /* Fill the viewport height with the background */
		width: 100vw; /* Fill the viewport width with the background */
	    background-position: top right; /* Standard: Bild ist oben rechts positioniert */



}
/*46*/
body.page-id-46:before {
    background-image: url('/wp-content/uploads/2024/10/Lehre-DSCF5262.jpg');
	    height: 100vh; /* Fill the viewport height with the background */
			width: 100vw; /* Fill the viewport width with the background */
	    background-position: top right; /* Standard: Bild ist oben rechts positioniert */



}
/*62 impressum*/
body.page-id-62:before {
    background-image: url('/wp-content/uploads/2024/10/Kontakt-DSCF4987.jpg');
	    height: 100vh; /* Fill the viewport height with the background */
			width: 100vw; /* Fill the viewport width with the background */
	    background-position: top right; /* Standard: Bild ist oben rechts positioniert */



}




/* Ab 660px: 10% des rechten Teils des Bildes abschneiden */
@media (max-width: 600px) {
	body.page-id-24:before {
   background-position: calc(100% - 25%) top; /* Verschiebt das Bild um 10% nach rechts, um den rechten Teil zu schneiden */
    }
	body.page-id-2:before {
   background-position: calc(100% - 10%) top; /* Verschiebt das Bild um 10% nach rechts, um den rechten Teil zu schneiden */
    }
		body.page-id-46:before {
   background-position: calc(100% - 20%) top; /* Verschiebt das Bild um 10% nach rechts, um den rechten Teil zu schneiden */
    }
		body.page-id-58:before {
   background-position: calc(100% - 30%) top; /* Verschiebt das Bild um 10% nach rechts, um den rechten Teil zu schneiden */
    }
}



/*46*/
body.page-id-home:before {
    background-image: url('/wp-content/uploads/2024/10/Lehre-DSCF5262.jpg');
	    height: 100vh; /* Fill the viewport height with the background */
			width: 100vw; /* Fill the viewport width with the background */
	    background-position: top right; /* Standard: Bild ist oben rechts positioniert */



}

/*46*/
/* General content block styling */
.entry-content {
    background-color: rgba(255, 255, 255, 0.8); /* 80% white, 20% transparency */
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    top: 66vh;
    z-index: 0;
    white-space: normal; /* Allows normal wrapping of text */
	 word-break: keep-all;
	white-space: normal; overflow-wrap: normal; hyphens: none;
}

/* Adjust position for smaller screens */
@media (max-height: 650px) {
    .entry-content {
        top: 40vh; /* Reduces the top offset on smaller screens */
    }
}

/* Adjust position for smaller screens */
@media (max-height: 550px) {
    .entry-content {
        top: 30vh; /* Reduces the top offset on smaller screens */
    }
}
/* Adjust position for smaller screens */
@media (max-height: 350px) {
    .entry-content {
        top: 5vh; /* Reduces the top offset on smaller screens */
    }
}

/* Change menu link color on hover to dark red */
.menu a:hover, 
.navbar a:hover, 
.main-navigation a:hover {
    color: #8B0000; /* Dark red color */
}
/* CSS for "Up" Button with Arrow */
#upButton {
    position: fixed;
    bottom: 20px; /* Distance from the bottom */
    right: 20px;  /* Distance from the right */
    display: none; /* Initially hidden */
    background-color: rgba(255, 255, 255, 0.6); /* Semi-transparent background */
    backdrop-filter: blur(10px); /* Blur effect */
    color: #333;
    border: none;
    padding: 15px 20px;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    z-index: 1000; /* Make sure it stays on top of other elements */
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow */
}

#upButton:hover {
    background-color: rgba(255, 255, 255, 0.8);
    transform: scale(1.1); /* Slightly enlarge on hover */
}

#upButton::before {
    content: "↑"; /* Up arrow symbol */
    font-weight: bold;
}

/* Make button visible when scrolled down */
body.scrolled #upButton {
    display: block;
}