/*
@charset "UTF-8";

/*
Weitere css Anweisungen
*/
.sticky {
	position: fixed !important;
	top: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	background: none;
	z-index: 1000;
}
.nav-bar {
	position: fixed;
	top: 0;
	display: block;
	width: 100%;
	height: 55px;
	margin: 0 auto;
	background-color: rgba(255, 255, 255, 0.0);
	transition: all 800ms;
	z-index: 101;
}
.wp-block-navigation ul li {
	margin-left: 10px;
	font-weight: 400;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
  	display: block;
	width: 60vw;
 	margin-bottom: 20px;
	background-color:rgba(0, 0, 255, 0.2)!important;
 	color:inherit!important;
 	border-bottom: 1px solid rgb(66, 0, 61);
}
/*
.wp-block-navigation__responsive-container-open svg {
	height: 30px;
	width: 35px;
	background-color: rgba(234, 234, 255, 0.5);
	border-radius: 5px;
}
	*/
/* --- Wichtig: Standard-SVGs ausblenden --- */

/* Selektor für das Öffnen- und das Schließen-Icon, wenn das Overlay nicht immer sichtbar ist */
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container:not(.always-shown) .wp-block-navigation__responsive-container-close svg {
    /* Blendet das Twenty Twenty-Five Standard-SVG-Icon aus */
    display: none!important; 
}


/* --- 📐 Deinen eigenen Burger-Icon einfügen (Öffnen) --- */

.wp-block-navigation__responsive-container-open {
    /* Definiere Größe und Position für dein Icon */
    width: 30px; /* Oder die gewünschte Breite */
    height: 30px; /* Oder die gewünschte Höhe */
	background-color: rgba(234, 234, 255, 0.5);
    
    /* Setze dein benutzerdefiniertes Bild/SVG als Hintergrund */
    background-image: url("../graphics/menu.svg"); /* ⬅️ WICHTIG: Pfad anpassen */
    background-size: contain; /* Bildgröße anpassen */
    background-repeat: no-repeat;
    background-position: center;
}


/* --- ❌ Dein eigenes Schließen-Icon einfügen (optional) --- */

.wp-block-navigation__responsive-container:not(.always-shown) .wp-block-navigation__responsive-container-close {
    /* Definiere Größe und Position für dein Icon */
    width: 30px; 
    height: 30px;
    
    /* Setze dein benutzerdefiniertes Bild/SVG als Hintergrund */
    background-image: url("../graphics/close.svg"); /* ⬅️ WICHTIG: Pfad anpassen */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
/* hk_script_navbarscroll.js BG white */
.nav-bar.scrolled {
	background-color: rgba(255, 255, 255, 0.9);
	-webkit-box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.5);
	box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.5);
	transition: all 800ms;
}
/* hk_script_navbarscroll-color.js link farben wechsel mit scrolled */
.nav-bar-color ul li a {
	color: rgb(255, 255, 255)!important;
}
.nav-bar-color ul li a:hover {
		color: blue!important;
		text-decoration: none!important;
}
.nav-bar-color.scrolled ul li a {
	color: rgba(0,0,0,1)!important;
}
.nav-bar-color.scrolled ul li a:hover {
		color: blue!important;
		text-decoration: none!important;
}
/*
 * Link styles aus style.css rewrite
 */
a {
	text-decoration: none!important;
	text-decoration-thickness: 0px !important;
	text-underline-offset: 0px;
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-offset: 0;
	outline-width: 0px;
	outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}

.p-left-right-10 {
	padding-left: 10px;
	padding-right: 10px;
}
.footer-block {
	-webkit-box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.5);
	box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.5);
}
.full-height {
	height: 100vh;
}
/* --------------------------------------
   Benutzerdefinierte Social Media Icons
   -------------------------------------- */
    /* Entfernt Standard-Listen-Markierungen und Polsterung */
    /* Aktiviert Flexbox für horizontale Anordnung */
    /* Zentriert die Icons horizontal */
.social-links-custom-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.social-links-custom-list li {
    margin: 0 0.3rem;
}
    /* Stellt sicher, dass der Linkblock das Icon korrekt umschließt */
.social-links-custom-list a {
    display: block;
    line-height: 0;
}
    /* Setzt die gewünschte Größe für Ihre Icons */
    /* Setzt die Icon-Farbe (passen Sie den Wert an Ihre Design-Palette an) */
    /* Fügt eine einfache Übergangsanimation für Hover-Effekte hinzu */
.social-links-custom-list svg {
    width: 30px;
    height: 30px;
    fill: #000000;
    transition: fill 0.2s ease-in-out;
}
.social-links-custom-list a:hover svg {
    fill: #0000ff;
}
    /* Bei eigenen SVGs mit Hover */
.my-hover {
    width: 80px;
	height: auto;
	background-color: #ff0000;
    mask-image: url("../graphics/close.svg"); /* ⬅️ WICHTIG: Pfad anpassen */
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}
.my-hover a {
	background-color: #ff00d4;
}
.my-hover a:hover {
	background-color: #00e1ff;
}
.my-hover svg {
	fill: #ff0000;
    transition: fill 0.2s ease-in-out;
}
.my-hover a:hover svg {
	fill:#0000ff; 
}
/* --------------------------------------
	Effekte
	-------------------------------------- */
.startbild {
	background-image: url("../assets/images/25-11-08_Folie_3000x2000.webp");
	background-size: auto auto;
	background-repeat: no-repeat;
	background-position: center;
	animation: landscape 40s linear infinite;
}
@keyframes landscape {
	0% { background-position: center top }
	25% { background-position: left center }
	50% { background-position: center center }
	75% { background-position: right center }
	100% { background-position: center top }
}
@keyframes landscape_s {
	0% { background-position: center top }
	25% { background-position: left center }
	50% { background-position: center center }
	75% { background-position: right bottom }
	100% { background-position: center top }
}
/* medium tablet */
@media screen and (max-width: 1024px) {
	.startbild {
		background-image: url("../assets/images/25-11-08_Folie_3000x2000.webp");
		background-size: auto auto;
		background-repeat: no-repeat;
		background-position: center;
		animation: landscape_s 40s linear infinite;
	}
}