/*
Theme Name: CoStrtgn
Theme URI: https://costrategen.de
Author: Marcel Schroeder
Author URI: https://costrategen.de
Template: twentytwentyfive
Version: 2.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Description: CoStrtgn ist ein minimalistisches Theme auf Basis von Twenty Twenty-Five - dem orginalen Wordpress-Theme. Es wird empfohlen es zusammen mit dem CoS Plugin zu betreiben, da dieses die grundlegenden SSD-Funktionen gewährleistet und dabei höchste Geschwindigkeit bietet. CoStrtgn ist nur für die Besten der Besten. Nicht jeder kann dieses Theme benutzen, nur einem ausgewählten Kreis wird es gewährt. Ihr gehört dazu. Meinen Glückwunsch.
*/

/*************  Inhalt   *************/
/* Variablen                         */
/* Body                              */
/* Header                            */
/* Footer                            */
/* Buttons                           */
/* Textformatierung (global FontSize)*/
/* Navigation Overlay                */
/* Kontakt Form                      */
/* Suche                             */
/* Formattierung der Box             */
/* mobile Navbar im Footerbereich    */
/* Onepager                          */
/* Blog Übersicht                    */
/* Scroll to Top                     */



/**************     Variablen      **************/

:root {
	--spacing-20: 20px;
	--spacing-3: 4vh;
	--spacing-foot: 2rem;
	--spacing-body: 74px; /* entspricht der Höhe der BottomNavigation */
	--wp--preset--color--imprintlink: #bbb;
	--wp--preset--color--imprintlinkhover: var(--wp--preset--color--base);
	--button-padding-hoch: calc(0.5rem + 2px) ;
	--button-padding-breit: calc(1.3rem + 2px) ;
	--button-padding-schmal: calc(1.3rem + 2px) ;
	
	/* Onepager */
	--impressbg: 255, 255, 255;
  	--impressalpha: 0.2;
  	--grey: #666;
	 
}


/**************     Body      **************/

 :where(.wp-site-blocks) > *{
	margin-block-start: 0;
	margin-block-end: 0;
}

body p{
	text-align:justify;
	hyphens:auto;
}

body {
  font-display: swap; /* Hinzugefügte Zeile für die Schriftdarstellung */
}



div.wp-block-group.covertop {
    margin-top: -1.2rem;
}

/**************     Gestaltungselemente      **************/

.wp-block-separator{
border: none;
height: 1px;
}

.icon {
    margin: 0 10px 0 0;
}

.gold {
	color: rgb(212, 180, 75); /*if no support for background-clip*/
	background: radial-gradient(circle at right center, rgba(211, 169, 28, 1) 0%, rgba(235, 211, 132, 1) 56%, rgba(169, 142, 50, 1) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}


.wp-block-post-featured-image img, img {
	border-radius: 0;
}

* {
    outline-width: 0 !important;
    outline-style: none !important;
}

a:where(:not(.wp-element-button)) {
	font-weight: inherit !important;
}

:where(.wp-block-button__link),:root :where(.wp-block-search .wp-element-button,.wp-block-search .wp-block-button__link) {
	border-radius: var(--wp--custom--borderradius)
}

html {
	font-size:;
}

.justify-text {
    text-align: justify;
}


/* für extra lange Links, damit die Navigation nicht verrutscht */
.entry-content{
	overflow:hidden;
}


@media (max-width: 600px) {
    .colapsmobil {
        display: none !important;
    }
	
	/* Abstand um die Naviagation am unteren Ende auszugleichen und keinen Inhalt dahinter zu haben */
	.wp-site-blocks {
		padding-bottom: var(--spacing-body);
	}
	
	.mobilenopadding {
		padding:0 !important;
	}
}

@media (min-width: 601px) {
    .colapsbig {
        display: none !important;
    }
	
	.headernaviausgleich {
	padding-top: calc(var(--spacing-20) + var(--spacing-body));
	}
}


/**************     Header/Navigation      **************/

#header-desktop {
    box-shadow: var(--wp--preset--shadow--header);
    background-color: rgba(255, 255, 255, 0.7);
    /* -webkit-backdrop-filter: blur(40px);
	backdrop-filter: blur(40px); erzeugt Fehler in Chrome - daher ausgeblendet */
    top: 0;
    position: fixed;
    width: 100%;
    z-index: 999;
}


@media (max-width: 960px) {
	main {
		padding-top:0;
		margin-top:0 !important;
	}
}

/* Close Button in der richtigen Höhe */
.wp-block-navigation__responsive-container.is-menu-open {
	padding-top: 22px;
}

@media (max-width: 600px) {
	.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--spacing-20,2rem) var(--wp--style--root--padding-right,2rem);
	}
	
}

.wp-block-site-logo {
	cursor:pointer;
}

.wp-block-site-logo a:{
	box-shadow:none;
	transition: ease all 2s;
}


.wp-block-navigation__responsive-container-close svg, .wp-block-navigation__responsive-container-open svg{
	height: 34px;
	width: 34px;
}

/* Submenü */

#header-desktop .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
    border: none;
}

#header-desktop .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
	box-shadow: var(--wp--preset--shadow--header);
    left: -18px;
	padding: 0.5em 0;
}

#header-desktop :where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a:not(.wp-element-button)){
	padding: .2em 1em;
}


/* Pufferbereich für sanften Übergang */
.wp-block-navigation .has-child {
    padding-bottom: 14px; /* Erweiterter Bereich unter dem Hauptmenüpunkt */
	top: 7px;
}

#header-desktop .wp-block-navigation .wp-block-navigation-item__content {
    text-decoration: none; /* Standard-Unterstreichung entfernen */
    color: inherit; /* Startfarbe bleibt gleich */
    transition: color 0.3s ease; /* Nur Farbe ohne Verzögerung ändern */
    position: relative; /* Für die Linie unten */
}

#header-desktop .wp-block-navigation .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--accent-2); /* Ändert die Textfarbe */
}

#header-desktop .wp-block-navigation .wp-block-navigation-item__content::after {
    content: ""; /* Pseudo-Element für die Linie */
    position: absolute;
    left: 0;
    bottom: -2px; /* Linie direkt unter dem Text */
    width: 0; /* Linie startet unsichtbar */
    height: 2px; /* Dicke der Linie */
    background-color: var(--wp--preset--color--accent-2); /* Farbe der Linie */
    transition: width 0.3s ease 0.3s; /* Linie kommt nach der Farbe mit 0.3s Verzögerung */
}

#header-desktop .wp-block-navigation .wp-block-navigation-item__content:hover::after {
    width: 100%; /* Linie breitet sich über den gesamten Text aus */
}

/* .wp-block-navigation .wp-block-navigation-item__content:focus, .wp-block-navigation .wp-block-navigation-item__content:active {
    color: var(--wp--preset--color--accent-2) !important; 
    transition: color 0.3s ease;
} */

/**************     END Header/Navigation      **************/


/***********    Header und Footer für Mobil und Desktop unterschiedlich    ***********/


@media only screen and (min-width: 601px) {

#footer-desktop, #header-desktop {
	display:block;
}
#footer-mobile, #header-mobile-bottom  {
	display:none;
}

}


@media only screen and (max-width: 600px) {

/* .wp-block-group > div.wp-block-site-logo, */
#footer-desktop, #header-desktop {
	display:none;
}
	
	
#footer-mobile, #header-mobile-bottom {
	display:block;
}
}


/***********    mobiles Menü unterer Rand NEU    ***********/

/* Hintergrund und Positionierung des mobilen Menüs */
.mobilebottomnavbar {
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: center;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px 0;
    z-index: 999;
    box-sizing: border-box;
}

/* Hauptcontainer für Icon-Menü und Burger-Menü */
.mobilebottomnavbar > .wp-block-group {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    box-sizing: border-box;
}

/* Container für das Icon-Menü */
.mobile-bottom-navbar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 80%; /* Icons nehmen 80% des Containers ein */
}

  .mobile-bottom-navbar nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .mobile-bottom-navbar nav ul {
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
  }

  .mobilebottomnavbar nav ul li {
    flex-basis: 20%;  /* bei 4 Spalten - bei mehr Spalten entsprechend anpassen */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

/* wenn kein GAP dann kein Padding 
.mobilebottomnavbar nav ul{
	padding: 0 5px 0 10px;
}*/

.mobilebottomnavbar .is-layout-flex {
	gap: inherit;
}

/* Container für das Burger-Menü */
.mobile-bottom-menu {
    display: flex;
    align-items: center;
    justify-content: center;
}

nav.mobile-bottom-menu.wp-block-navigation{
	width: 20%; /* 20% für das Burger-Menü */
}

/* Styling für Icon und Text */
.mobile-bottom-navbar .wp-block-navigation-item,
.mobile-bottom-navbar .wp-block-navigation-item a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--wp--preset--color--contrast);
    text-align: center;
    cursor: pointer;
    transition: all 0.4s ease;
}

/* Icon-Styling */
.mobile-bottom-navbar .wp-block-navigation-item a:before {
    font-family: "FontAwesome";
    font-style: normal;
    font-weight: normal;
    font-size: 1.6rem;
    margin-bottom: 0px;
    display: block;
}

/* Text-Styling */
.mobile-bottom-navbar .wp-block-navigation-item__label {
    font-size: var(--wp--preset--font-size--x-small);
    line-height: 1.2;
    margin-top: 2px;
}

/* Icons für die spezifischen Klassen */
.mobile-bottom-navbar .icon-home a:before {
    content: "\f015";
}

.mobile-bottom-navbar .icon-whatsapp a:before {
    content: "\f232";
}

.mobile-bottom-navbar .icon-phone a:before {
    content: "\f095";
}

.mobile-bottom-navbar .icon-calendar a:before {
    content: "\f274";
}

/* Hover-Effekt */
.mobile-bottom-navbar .wp-block-navigation-item a:hover {
    opacity: 0.8;
}

/* Burger-Menü und "Menü"-Label */
.mobile-bottom-menu .wp-block-navigation__responsive-container-open {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: inherit;
    padding: 0;
	margin-top: 4px;
}

/* Text unter dem Burger-Icon */
.mobile-bottom-menu .wp-block-navigation__responsive-container-open:after {
    content: "Menü";
    font-size: var(--wp--preset--font-size--x-small);
    margin-top: -1px;
    text-align: center;
}


/***********  END mobiles Menü unterer Rand NEU  ***********/

/**************     Overlay mobiles Menü      **************/

/* Hintergrundeffekt für das Overlay-Menü */
.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
    -webkit-backdrop-filter: blur(40px); /* Weicher Hintergrund-Effekt */
    backdrop-filter: blur(40px); /* Unterstützt moderner Browser */
    background-color: rgba(256, 256, 256, 0.6) !important; /* Halbtransparenter Hintergrund */
	height: 100vh;
}

/**** Menü mittig auf dem Bildschirm ausrichten ***/

/* Navigation zentrieren und gleichmäßig ausrichten */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    display: flex;
    flex-direction: column;
    align-items: center; /* Zentriert Inhalte horizontal */
    justify-content: center; /* Zentriert Inhalte vertikal */
    min-height: 100dvh; /* Dynamische Höhe für mobile Geräte */
    padding: 0; /* Entfernt überschüssiges Padding */
    transition: transform 0.5s ease, opacity 0.5s ease; /* Fließende Animation beim Öffnen */
}

/**** END Menü mittig auf dem Bildschirm ausrichten ***/

/* Abstände für Menüpunkte im Overlay */

.mobilebottomnavbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    margin-bottom: 0; /* Kein unnötiger Abstand */
}

/* Close-Button verankern */
.mobilebottomnavbar .has-modal-open .wp-block-navigation__responsive-close {
    position: absolute; /* Position fixieren */
    left: 0;
    bottom: 0; /* Close-Button unten fixieren */
    height: 100%; /* Deckt die gesamte Höhe des Containers ab */
}

/* Close-Button genauer positionieren */
.mobilebottomnavbar .wp-block-navigation__responsive-container-close {
    bottom: 25px; /* Abstand von unten */
    right: calc(10% - 17px); /* Ausrichtung an der rechten Seite */
    top: inherit; /* Entfernt unnötige Top-Ausrichtung */
}

/* Sicherstellen, dass Dialogboxen richtig positioniert sind */
.mobilebottomnavbar .wp-block-navigation__responsive-dialog {
    position: initial;
}

/* Abstände der Menüpunkte */
.mobile-bottom-menu .wp-block-navigation__responsive-container-content ul li {
    padding: 0.5em; /* Gleichmäßiger Abstand für Hauptmenüpunkte */
}

/* Abstände für Untermenüpunkte */
.mobile-bottom-menu .wp-block-navigation__responsive-container-content ul li ul li {
    padding: 0.3rem; /* Reduzierter Abstand für Untermenüpunkte */
}

/* Entfernt Padding von Untermenü-Containern */
.mobile-bottom-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
    padding-top: 0;
}

/* Fügt Padding hinzu, wenn das Untermenü geöffnet ist */
.mobile-bottom-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
    padding: 0.7rem; /* Abstände innerhalb des geöffneten Untermenüs */
}

/* Standardzustand: Untermenü ausgeblendet */
.mobile-bottom-menu .has-child .wp-block-navigation__submenu-container {
    height: 0; /* Höhe auf 0 setzen */
    overflow: hidden; /* Inhalte ausblenden */
    opacity: 0; /* Unsichtbar */
    pointer-events: none; /* Keine Interaktionen möglich */
    transition: height 0.6s ease-in-out, opacity 0.6s ease-in-out, padding 0.6s ease-in-out; /* Fließende Übergänge */
}

/* Geöffneter Zustand: Untermenü sichtbar */
.mobile-bottom-menu .has-child.open .wp-block-navigation__submenu-container {
    height: auto; /* Automatische Höhe */
    opacity: 1; /* Sichtbar */
    pointer-events: auto; /* Interaktionen möglich */
}

/* Pfeil-Design hinter Menüpunkten */

/* Grundzustand mit Pfeil */
.mobile-bottom-menu .has-child > .wp-block-navigation-item__content {
    display: inline-flex; /* Platzierung von Text und Pfeil in einer Zeile */
    align-items: center; /* Vertikale Zentrierung */
    justify-content: space-between; /* Optional, falls Abstand benötigt wird */
}

/* Pfeil-Icon im Grundzustand */
.mobile-bottom-menu .has-child > .wp-block-navigation-item__content::after {
    content: '▼'; /* Pfeil nach unten */
    font-size: 10px; /* Größe des Pfeils */
    color: var(--wp--preset--color--contrast); /* Pfeilfarbe */
    margin-left: 10px; /* Abstand zwischen Text und Pfeil */
    transition: transform 0.3s ease; /* Drehung beim Öffnen */
}

/* Pfeil-Icon im geöffneten Zustand */
.mobile-bottom-menu .has-child.open > .wp-block-navigation-item__content::after {
    transform: rotate(180deg); /* Dreht den Pfeil nach oben */
}

/* Abstand unterhalb der Menüpunkte entfernen */
.mobile-bottom-menu .has-child {
    margin-bottom: -15px; /* Entfernt unerwünschten Abstand */
    transition: margin-bottom 0.3s ease-in-out; /* Fließender Übergang */
}

/* Abstand hinzufügen, wenn das Untermenü geöffnet ist */
.mobile-bottom-menu .has-child.open {
    margin-bottom: 5px; /* Fügt Abstand hinzu */
    transition: margin-bottom 0.3s ease-in-out; /* Fließender Übergang */
}

/**************     END Overlay mobiles Menü      **************/


/**************     Kontakt Form      **************/

.contact-form {
    width: 100%;
}

.contact-form-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
}

.contact-form-field {
    box-sizing: border-box;
}

.contact-form-field.full-field {
    width: 100%;
}

.contact-form-field.half-field {
    width: calc(50% - 1rem);
}

.contact-form-field.third-field {
    width: calc(33.33% - 1rem);
    padding-right: 1rem;
}

.contact-form-field.two-thirds-field {
    width: calc(66.67% - 1rem);
    padding-left: 1rem;

}

.contact-form-field input, .contact-form-field textarea {
	font-family:var(--wp--preset--font-family--system-font);
}

/* For Mobile devices */


@media (max-width: 600px) {
	.contact-form-field.third-field,
    .contact-form-field.two-thirds-field,
    .contact-form-field.half-field {
        width: 100%;
        order: 1; /* default order */
		padding:0;

    }
		
	.contact-form-field.two-thirds-field {
		order: -1; /* will be displayed first */
		padding:0;

	}
		
	.contact-form-field.third-field p,
	.contact-form-field.two-thirds-field p {
			margin-block-start:0;
	}
    .contact-form-field.third-field .wp-block-button {
        display: flex;
        justify-content: center;
        align-items: center;
    }
	
	.contact-form .wpcf7-list-item {
		margin:0;
		padding:0;
	}
}

/* getrennt von dem Feld unten drunter, falls mal ein Rand bei einem Button eingesetzt wird */
.contact-form-field input:not([type="button"]):not([type="submit"]), 
.contact-form-field textarea{
	border-radius: .0;
	border-top:none;
	border-left:none;
	border-right:none;
	border-bottom-width: 2px;
    border-bottom-style: solid ;
    border-bottom-color: var(--wp--preset--color--secondary);
	background-color: #f9f9f9;
}

.contact-form-field input, 
.contact-form-field textarea{
    width: 100%;
    padding: 15px 0 15px 10px;
    font-size: var(--wp--preset--font-size--small);
    font-weight: 100;
    color: var(--wp--preset--color--contrast);
	/* box-shadow: var(--wp--preset--shadow--input); */
}

.contact-form-field .wp-block-button input{
	border-radius: var(--wp--custom--borderradius);
}


.contact-form-field input::placeholder,
.contact-form-field textarea::placeholder {
    font-weight: 100;
    color: var(--wp--preset--color--contrast);
}

.contact-form .wpcf7-list-item {
    font-size: var(--wp--preset--font-size--x-small);
    display: inline-block;
    margin-right: 10px;
}

.contact-form .wpcf7-list-item label {
    display: inline-block;
    margin-left: 5px;
}

.contact-form .wpcf7-response-output, .wpcf7-not-valid-tip {
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 100;
}

.wpcf7-acceptance {
    display: flex;
    align-items: center;
}

.contact-form-field .wpcf7-acceptance input {
	width: inherit;
	top: -2px;
	position: relative;
}

.wp-block-button .wpcf7-spinner {
	width: 0;
	height: 0;
	margin:0;
}
span.wpcf7-quiz-label {
    display: inline-block;  /* or block */
    margin-bottom: 1rem;
}

.wp-block-contact-form-7-contact-form-selector{
	padding:1rem 0;	
}

input:is([type="button"], [type="submit"]) {
    color: var(--wp--preset--color--base);
    transition: all 0.65s ease; 
}

input:is([type="button"], [type="submit"]):active {
    transition: all 0.1s ease;
}

.contact-form .wp-block-buttons>.wp-block-button {
    display: inherit;
}

/**************     END Kontakt Form      **************/


/**************     Suche       **************/

.wp-block-search__input{
    width: 100%;
    padding: 10px 0 10px 10px;
    font-size: var(--wp--preset--font-size--small);
    font-weight: 100;
    color: var(--wp--preset--color--contrast);
	border:none;
	box-shadow: var(--wp--preset--shadow--input); 
	border-radius: var(--wp--custom--borderradius); 
	font-family:var(--wp--preset--font-family--system-font);

}

.wp-block-search__button {
	font-weight:100;
}

:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper){
	border:none;
}

.wp-block-search__button.has-icon.wp-element-button{
	padding: var(--button-padding-hoch) var(--button-padding-schmal);
}

/**************     END Suche       **************/


/**************     Formattierung der Box       **************/

.box1 {
	/* border: 1px solid var(--wp--preset--color--accent); */
	border-radius: var(--wp--custom--boxborderradius); 
	box-shadow: var(--wp--preset--shadow--boxshadow); 
}

/* Grundlegender Stil für die Gruppe box2 */
.box2 {
    overflow: visible; /* Stellt sicher, dass beim Zoom nichts überläuft */
    transition: all 0.4s ease; /* Sanfte Übergänge für alle Effekte */
	border-radius: var(--wp--custom--boxborderradius);
	box-shadow: var(--wp--preset--shadow--slideshadow);
}

.box2 :where(.wp-block-post-excerpt) {
	margin: 0.5em 0;
	margin-block-start:0;
}

.box2 .wp-block-post-title {
	margin:0.5em 0 0;
}

/* Einstellungen für das Bildzoomen */
.box2 .wp-block-post-featured-image img {
	border-radius: 0;
    transition: transform 0.3s ease-in-out; /* Sanfte Übergänge für das Bildzoomen */
	    transform-origin: bottom left; /* Setzt den Ursprung der Transformation auf die obere rechte Ecke */

}

/* Skaliert das Bild beim Hovern über box2 */
.box2:hover .wp-block-post-featured-image img {
    transform: scale(1.03); /* Vergrößert das Bild leicht */
}

.box2 .wp-block-post-excerpt {
	visibility: hidden; /* Macht den Exzerpt unsichtbar, hält aber den Platz vor */
	opacity: 0; 
	height: 0em;
}

@media only screen and (min-width: 768px) {
	/* Grundlegende Einstellungen für den Exzerpt */
	.box2 .wp-block-post-excerpt {
		transition: visibility 0s 0.8s, opacity 0.4s ease; /* Übergänge für Sichtbarkeit und Opazität */
		height: 3em; /* Vorgehaltener Platz für den Exzerpt */
	}

	/* Zeigt den Exzerpt beim Hovern über box2 */
	.box2:hover .wp-block-post-excerpt {
		visibility: visible; /* Macht den Exzerpt sichtbar */
		opacity: 1; /* Stellt die Opazität auf 1 */
		transition: opacity 0.8s ease, visibility 0s 0s; /* Sanfter Übergang für die Opazität, ohne Verzögerung für Sichtbarkeit beim Einblenden */
	}
}

.box3 {
	/* border: 1px solid var(--wp--preset--color--secondary); */
	border-radius: var(--wp--custom--boxborderradius); 
	box-shadow: var(--wp--preset--shadow--slideshadow); 
}

/**************     END Formattierung der Box       **************/


/**************     Farbverlauf (Startseite)     **************/


.top-gradient {
    position: fixed; /* Fixiert den Farbverlauf im Hintergrund */
    top: 0;
    left: 0;
    right: 0;
    height: 200vh;
    z-index: -1; /* Stellt sicher, dass der Hintergrund hinter anderen Inhalten liegt */
    background: linear-gradient(-45deg, #ffffff, #ff3333, #FFCF54, #FAD2D2);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.gradient-bg-1, .gradient-bg-2, .gradient-bg-3, .gradient-bg-4 {
    content: "";
    position: fixed; /* Fixiert den Farbverlauf im Hintergrund */
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1; /* Stellt sicher, dass der Hintergrund hinter anderen Inhalten liegt */
}

.gradient-bg-1, .gradient-bg-2, .gradient-bg-3 {
    height: 200vh;
	
}
.gradient-bg-4 {
	    height: 100vh;
}

.gradient-bg-1 {
    background: var(--wp--preset--gradient--verlauf-1);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

.gradient-bg-2 {
    background: var(--wp--preset--gradient--verlauf-2);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

.gradient-bg-3 {
    background: var(--wp--preset--gradient--verlauf-3);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

.gradient-bg-4 {
    background: var(--wp--preset--gradient--verlauf-4);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

/**************     END Farbverlauf (Startseite)     **************/

/**************     SLIDER      **************/

.content-slider {
    position: relative;
    overflow: hidden; /* overflow:hidden, damit immer nur eine Slide voll sichtbar ist */
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

/* Hintergrund für .slides, damit zwischen den Slides eine andere Hintergrundfarbe durchscheint */
.content-slider .slides {
    display: flex;
    transition: transform 0.3s ease;
    width: 100%;
}

.content-slider .slide {
    flex: 0 0 100%;
    box-sizing: border-box;
    transition: transform 0.3s ease;
}


/* Responsive Stile für mobile Ansichten */
@media (max-width: 768px) {
    .content-slider .slide img {
        max-width: 100%; /* Bilder sind nicht breiter als ihre Container */
        height: auto;
    }
	
	.content-slider .testimonialbox {
		padding: 0 20px;
	}
}

.content-slider .testimonialbox {
	padding: 0 40px;
}



/* Dots und Navigation bleiben wie zuvor */
.content-slider .slider-dots .wp-block-button__link {
  display: none;
}

.content-slider .slider-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 10px;
}

.content-slider .dot {
    width: 6px;
    height: 6px;
    background-color: var(--wp--preset--color--contrast);
    border-radius: 50%;
    margin: 0 3px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.content-slider .dot.active {
    background-color: var(--wp--preset--color--accent-1);
}

.content-slider .slider-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}

/* Buttons */
.content-slider .prev-slid .wp-block-button__link,
.content-slider .next-slid .wp-block-button__link {
    background: none;
    border: none;
    padding: 10px 10px;
    cursor: pointer;
    color: var(--wp--preset--color--contrast);
    transition: color 0.3s ease;
    margin: 0;
}

@media (min-width: 601px) {
    .content-slider .prev-slid .wp-block-button__link:hover,
    .content-slider .next-slid .wp-block-button__link:hover {
      color: var(--wp--preset--color--accent-1);
    }
}

/**************     END SLIDER      **************/

/* Überschreibt die WP-Standardregel für das erste Kind in is-layout-constrained nur im Slider */
.content-slider :where(.is-layout-constrained) > :first-child {
  margin-block-start: 1em !important; /* oder ein anderer Wert nach Bedarf */
}


/**************     Onepager      **************/

		.onepager-bottom {
			position: fixed;
			bottom: 0;
			text-align: center;
			width: 100%;
			margin: 0;
			padding: 0.5em 0;
			background: rgba(var(--impressbg), var(--impressalpha));
			color: var(--grey);
			z-index:10;
		}

.page-template-onepager, .page-template-onepager .wp-site-blocks{
	padding:0 !important;
	margin:0 !important;
}

/**************     Buttons Onepager      **************/

.gleichbreit .wp-element-button, .gleichbreit .wp-block-button__link {
	width: 100%;
}

.wp-block-buttons>.wp-block-button.gleichbreit  {
	width: 60%;
}

.gleichbreit .wp-block-button__link {
	padding: var(--button-padding-hoch) var(--button-padding-schmal);
}

@media (max-width: 600px) {

	.wp-block-buttons>.wp-block-button.gleichbreit  {
		width: 100%;
	}
}

/**************     END Onepager      **************/


/**************     Blog Übersicht      **************/


.wp-block-post-excerpt__more-text {
	margin-bottom: 0;
	margin-top:1vh; 
}



.wp-block-archives-list {
    list-style-type: none !important ; /* Entfernt die Anstriche (Bullets) */
    margin-block-start: 16px !important ; /* Setzt den oberen Block-Margin auf 0 */
	padding-left:0;
}

.wp-block-archives-list li {
    margin-bottom: 0.5rem;
}

/**************     END Blog Übersicht      **************/



/**************     scroll to top      **************/

#scrollToTopButton {
    display: none; /* Verbirgt den Button zunächst */
    position: fixed;
    bottom: 85px;
    right: 16px;
    z-index: 99;
    border: none;
    outline: none;
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(40px);
    background-color: rgba(256,256,256,.7);
    color: var(--wp--preset--color--contrast); /* Setzt die Textfarbe */
    cursor: pointer;
    padding: 11px 14px 10px 14px;
    border-radius: 50%; /* Macht den Button rund */
    font-size: 24px; /* Größe des Icons anpassen */
	border: 1px solid var(--wp--preset--color--base);
}



@media only screen and (min-width: 601px) {
	#scrollToTopButton {
		bottom: 20px;
		right: 20px;
	}
}

#scrollToTopButton:hover {
    background-color: rgba(256,256,256,.85); /* Leichte Farbänderung beim Hover */
}

/**************     END scroll to top      **************/


/**************     Masonry      **************/

@media only screen and (min-width: 768px) {
	.mymasonry.wp-block-query {
		-moz-column-count: 2;
		-webkit-column-count: 2;
		column-count: 2;
	    gap: 2em; /* Abstand zwischen den Elementen */
	}
	.mymasonry.wp-block-query .wp-block-post {
		break-inside: avoid; /* Verhindert das Brechen von Posts innerhalb der Spalte */
	}
}

/**************   END  Masonry      **************/



/************* Spezifische Farben und Icons für bestimmte Kategorien *************/

.format-category-markenbildung {
    background-color: var(--wp--preset--color--cat-1);
}

.format-category-markenbildung::before {
    content: "\f2b9"; /* Unicode für das fa-address-book Icon */
    font-family: FontAwesome; 
    margin-right: 8px; 
}

.format-category-corporate {
    background-color: var(--wp--preset--color--cat-2);
}
.format-category-corporate::before {
    content: "\f0b1"; /* Unicode für das fa-briefcase Icon */
    font-family: FontAwesome; 
    margin-right: 8px; 
}

.format-category-reportage {
    background-color: var(--wp--preset--color--cat-3);
}
.format-category-reportage::before {
    content: "\f0b1"; /* Unicode für das fa-briefcase Icon */
    font-family: FontAwesome; 
    margin-right: 8px; 
}

/************* END Spezifische Farben und Icons für bestimmte Kategorien *************/

/*************************** Gallery Slider *********************************/
.image-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.image-slider .wp-block-gallery {
  display: flex;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  transition: transform 0.3s ease;
  gap: 0;
}

.image-slider .wp-block-gallery figure.wp-block-image {
  position: relative;
  overflow: hidden;
  border-radius: var(--wp--custom--boxborderradius);
  flex: 0 0 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff; /* optional, für bessere Sichtbarkeit des Radius */
}

/* Alle Bilder kleiner, außer das aktuelle */
.image-slider .wp-block-gallery figure.wp-block-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--wp--custom--boxborderradius);
  transition: transform 0.3s;
  transform: scale(0.9);
}

.image-slider .wp-block-gallery figure.wp-block-image.current-slide img {
  transform: scale(1);
}

/* Nicht aktuelle Slides leicht aufgehellt / verwaschen darstellen */
.image-slider .wp-block-gallery figure.wp-block-image:not(.current-slide) img {
  /* Hier kannst Du die Werte anpassen, um einen helleren, 
     etwas verwaschenen Look zu erzeugen. Ein Beispiel: */
  filter: brightness(1) saturate(0) contrast(1);
}

/* Navigation unten mittig wie gehabt */
.image-slider .gallery-navigation {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 300px; 
  margin: 20px auto 0;
}

.image-slider .gallery-navigation::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 1px;
  background-color: var(--wp--preset--color--contrast);
  pointer-events: none;
}

.image-slider .gallery-navigation .wp-block-button__link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--wp--preset--color--contrast);
  text-decoration: none;
  transition: color 0.3s ease-in-out;
}

@media (min-width: 601px) {
  .image-slider .gallery-navigation .wp-block-button__link:hover {
    color: var(--wp--preset--color--accent-1);
  }
}
/*************************** END Gallery Slider *********************************/


/*************************** CStrtgn spezifisch *********************************/



/* Logo bleibt scrollbar */
.cstrtgn .wp-block-site-logo {
  position: relative; /* Standard-Positionierung, damit das Logo scrollt */
  margin-left: 20px;
  margin-top:25px;
	z-index:20;
}

/* Menübutton fixieren */
.cstrtgn .wp-block-navigation__responsive-container-open {
  position: fixed;  
  z-index: 1000; 
  margin-top: 30px;
	margin-right: 100px;
}


/* Navigation groß */
.wp-block-navigation__responsive-container-close svg, .wp-block-navigation__responsive-container-open svg{
	height: 100px !important;
	width: 100px !important;
}

.cstrtgn .wp-block-navigation__responsive-container-close {
	right: -10px;
    top: 15px;
}

.cstrtgn{   justify-content: center;
}

@media (max-width: 600px) {
	
	/* Abstand um die Naviagation am unteren Ende auszugleichen und keinen Inhalt dahinter zu haben */
	.wp-site-blocks {
		padding-bottom: 0 !important;
	}
}

:root :where(.is-layout-flow) > * {
	margin-block-start: 0;
}

main.cstrtgn{
	margin-top: -155px !important;
}

.overflow-bg {
  position: relative;
  z-index: 0;
  overflow:visible;

}

.overflow-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%; /* Dehnt das Bild aus, um in den nächsten Block hineinzureichen */
  background-image: url('https://costrategen.de/wp-content/uploads/2025/01/CoStrategen-vibrant-splash-169.png');
    background-size: 120vw;
    background-position: 50% 40%;
  background-repeat: no-repeat; /* Verhindert die Wiederholung des Bildes */
  z-index: 10; /* Stellt sicher, dass das Bild hinter dem Block liegt */
  pointer-events: none; /* Verhindert, dass das Bild anklickbar ist */
  z-index: -1;
}

.blurtainer {
    position: relative; /* Wichtig für das Pseudo-Element */
    isolation: isolate; /* Trennt den Effekt vom Rest der Seite */
    overflow: visible; /* Effekt über die Grenzen hinaus sichtbar */
}

.blurtainer::before {
    content: '';
    position: absolute;
    inset: -20px 0; /* Weicher Auslauf nur oben und unten */
    -webkit-backdrop-filter: blur(10px); /* Blur-Effekt */
    backdrop-filter: blur(10px); /* Blur-Effekt */
    mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%, /* Transparenz oben */
        rgba(0, 0, 0, 1) 20%, /* Sichtbarer Blur */
        rgba(0, 0, 0, 1) 80%, /* Sichtbarer Blur */
        rgba(0, 0, 0, 0) 100% /* Transparenz unten */
    );
    -webkit-mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%, /* Für WebKit-Browser */
        rgba(0, 0, 0, 1) 20%, /* Sichtbarer Blur */
        rgba(0, 0, 0, 1) 80%, /* Sichtbarer Blur */
        rgba(0, 0, 0, 0) 100% /* Transparenz unten */
    );
    z-index: -1; /* Effekt hinter dem Inhalt */
    pointer-events: none; /* Keine Interaktionen auf den Effekt */
}

/*************************** END CStrtgn spezifisch *********************************/