/*
Theme Name: Twenty Twenty-Four Child
Theme URI: https://marcelschroeder.de
Author: Marcel Schroeder
Author URI: https://marcelschroeder.de
Template: twentytwentyfour
Version: 2.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/*************  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: 68px; /* 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 */
	background-color:lightsalmon;
}


/* Rand unterhalb Footer */

.wp-site-blocks {
        padding-top: var(--spacing-body);
		padding-bottom: 0;

}

@media (max-width: 600px) {
    .colapsmobil {
        display: none !important;
    }
	
	.wp-site-blocks {
		padding-top: 0;
		padding-bottom: var(--spacing-body);
	}
	
	.mobilenopadding {
		padding:0 !important;
	}
}

@media (min-width: 601px) {
    .colapsbig {
        display: none !important;
    }
}


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

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


.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;
}


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


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

/* Safari-spezifische Regel mit Präfix */
@media not all and (-webkit-min-device-pixel-ratio:0) {
    .headernav {
    }
}

.spacing-header-nav{
	padding: var(--spacing-20) 0;
}

@media (max-width: 960px) {

	main {
		padding-top:0;
		margin-top:0 !important;
	}
}


.wp-block-navigation__responsive-container-open svg{
	color:var(--wp--preset--color--contrast);
}

.wp-block-navigation__responsive-container-close svg{
	color:var(--wp--preset--color--accent);

}

.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--spacing-20,2rem);
}

@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;
}


/**************     Footer      **************/

/* FARBEN */
.wp-block-navigation a:where(:not(.wp-element-button)):hover, 
.wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:hover{
	color: var(--wp--preset--color--contrast) !important;
}

.wp-block-navigation a:where(:not(.wp-element-button)), 
.wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor{
	color: var(--wp--preset--color--primary) !important;
}

/**************     Buttons      **************/


.wp-element-button, .wp-block-button__link, .contact-form-field input.wp-block-button__link  {
	padding: var(--button-padding-hoch) var(--button-padding-breit);
}

.invertiert .wp-element-button, .invertiert .wp-block-button__link {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

.invertiert .wp-element-button:hover, .invertiert .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--accent);
}

.icon {
font-size: 1.3em;
margin: 0 10px 0 0;
}

.wp-block-buttons.is-layout-flex {
		margin-block-start: 1rem;
}

/* Buttons Kontakt gleiche Breite */

.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%;
	}
}


/**************     Textformatierung       **************/

html {
	font-size:22px;
}

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

/**************     Navigation Overlay       **************/


.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	gap:0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container li{
	margin-bottom:0.5rem;
}

.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open{
	-webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(40px);
	background-color: rgba(256,256,256,.7);
}

.wp-block-navigation__responsive-container.is-menu-open {
    animation: overlay-menu__fade-in-animation 1s cubic-bezier(0.9, 0.01, 0, 1.0);
}

@keyframes overlay-menu__fade-in-animation {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}



/**************     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;
}

/**************     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);
}

/**************     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 */
}

.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 */
	}
}


/* iFrame */

    .iframe-container {
      height: 100%;
    }
    .iframe-container iframe {
      display: block;  /* Reduziert den weißen Raum unter dem iframe */
      width: 100%;
      height: 100%;
      border: none;  /* Entfernt den iframe-Rahmen */
    }


/**************     mobile Navbar im Footerbereich      **************/



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

#footer-desktop, #header-desktop {
	display:block;
}
#footer-mobile, #header-mobile  {
	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 {
	display:block;
}
	
.mobil-site-logo {
    display: flex;
    justify-content: center; /* Zentriert den Inhalt horizontal */
    align-items: center; /* Zentriert den Inhalt vertikal, falls notwendig */
    flex-wrap: wrap; /* Erlaubt den Elementen, in die nächste Zeile zu wechseln */
    width: 100%; /* Stellt sicher, dass der Container die volle Breite einnimmt */
	padding: var(--spacing-3) 0 1vh;
	}
	
.mobilebottomnavbar {
    background: rgba(255, 255, 255, .7);
    /* -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(40px); Geht nicht in alles außer Safari wegen poor programming */
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px 0;
    z-index: 999;
  }
  
  .mobilebottomnavbar .screen-reader-text {
    clip: unset;
    word-wrap: normal!important;
    border: none;
    -webkit-clip-path: none;
    clip-path: none;
    height: auto;
    margin: 0;
    overflow: visible;
    padding: 0;
    position: static;
    width: auto;
  }
  
  .mobilebottomnavbar nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .mobilebottomnavbar nav ul {
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
  }
  
  .mobilebottomnavbar nav ul li {
    flex-basis: 25%;  /* bei 4 Spalten - bei mehr Spalten entsprechend anpassen */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .mobilebottomnavbar nav ul li,	
  .mobilebottomnavbar nav ul li a,
  .mobilebottomnavbar nav ul li button {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--wp--preset--color--contrast);
    font-size: var(--wp--preset--font-size--xx-small) !important;
    text-align: center;
    white-space: nowrap;
  }
	
	.mobilebottomnavbar nav ul li li.large a,
	.mobilebottomnavbar nav ul.large li a {
		font-size: var(--wp--preset--font-size--large) !important;

	}

  .mobilebottomnavbar nav ul li a:hover,
  .mobilebottomnavbar nav ul li button:hover,
	.mobilebottomnavbar	.wp-block-navigation__responsive-container-open svg:hover {
    color: var(--wp--preset--color--accent);
  }
  
  .mobilebottomnavbar nav ul li a i{ /* Größe und Abstand der Icons */
    font-size: 28px;
    margin-bottom: 5px;
  }
	
	/* Inhalte zurück formatieren nach Formatierung des Footermenus */
	
	.wp-block-social-link-label.screen-reader-text,
	.wp-block-search__label.screen-reader-text {
		display:none;
	}
	.wp-block-search__button svg {
		fill:white;
	}

	.mobilebottomnavbar nav ul ul{
		width:inherit;
	}
	
	.mobilebottomnavbar nav ul ul li{
		  flex-basis:inherit;
	}
	
	/* Menü selbst nach unten rücken */
	
  .has-modal-open .wp-block-navigation__responsive-close {
	position: absolute;
	left: 0;
	bottom: 20px;
  }

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
		margin-bottom:0px;
	}

	.wp-block-navigation__responsive-container-close {
	bottom: 5px;
	right: calc(10% - 17px);
	top: inherit;
	}
	
	.wp-block-navigation__responsive-dialog {
	position: initial;
	}

}


/* Startseite Farbverlauf */

.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, #46CFA3, #93CAD9, #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;
}

/**** SLIDER ****/

.simple-slider {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 800px; /* oder die gewünschte Breite */
    margin: 0 auto;
}

.slides {
    display: flex;
    transition: transform 0.3s;
    width: 100%;
}

.slide {
    flex: 0 0 100%; /* Jede Folie nimmt 100% der Breite des Sliders ein */
    /* overflow: hidden; */
}


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


	
	.testimonialbox {
		padding: 20px 20px 0 20px;
	}
}

.testimonialbox {
	padding: 40px 40px 0 40px;
}


/* ... Dein bisheriger CSS-Code ... */

.slider-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px; /* Abstand zwischen dem Slider und der Navigation */
}

.slider-navigation p{
	margin-block-start: 0em;
	margin-block-end: 0em;	
}

.prev, .next {
    color: var(--wp--preset--color--contrast);
    border: none;
    padding: 10px 10px;
    cursor: pointer;
    font-size: var(--wp--preset--font-size--normal);
	font-weight: lighter;
	font-style: italic;
    text-decoration: none;
    background: none;
    margin: 0; /* Abstand zwischen den Links und den Punkten */
}

.slider-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 10px; /* Abstand zu den "Vorherige" und "Nächste" Links */
}

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

.dot.active {
    background-color: var(--wp--preset--color--primary);
}

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


	/*	#onepager-template {
			font-weight:100;
			background: linear-gradient(-45deg, #FFFFFF, #FFFFFF, #F0E4D3, #EEDBCA, #F1D6D3, #E7CDD6, #DFBCD3, #CE9CD3, #FFFFFF);
			background-size: 400% 400%;
			animation: gradient 10s ease infinite;
		} */

		.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;
}


body.page-template-onepager {
    background: var(--wp--preset--gradient--verlauf-1);
	background-size: 400% 400%;
	animation: gradient 10s ease infinite;
}


/**************   Leistungen mit Details   **************/


.leistungen  .wp-block-media-text .wp-block-media-text__content {
	padding: 0 8% 0 0 ;
}

summary {
	color:var(--wp--preset--color--primary);
	font-weight:200;
	transition: ease all 1s;
}

summary::-webkit-details-marker {
	color:var(--wp--preset--color--primary);
}
summary:hover {
	color:var(--wp--preset--color--accent);
}

@media (max-width: 600px) {
	.leistungen .wp-block-heading{
		padding-top: 2vh !important;
	}
}

.wp-block-buttons.is-vertical>.wp-block-button.wp-block-button__width-85 {
    width: 85%;
}
.wp-block-buttons>.wp-block-button.wp-block-button__width-85 {
    width: calc(85% - var(--wp--style--block-gap, .5em)*.25);
}


.leistungsuebersicht .has-base-background-color:hover {
	background-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--accent) !important;
}

.leistungsuebersicht .has-base-background-color:active, .leistungsuebersicht .has-base-background-color:visited {
	background-color: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast) !important;
}

/**************     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;
}

/**************     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--primary); /* 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 */
}

/**************     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 */
	}
}

/* hoverzoom */




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



/**** Leistungsbox in der Portfolioübersicht ***/

.3dhover {
    transform-style: preserve-3d;
}

/* Grundlegende Button-Formatierung für alle Kategorien */
.taxonomy-category a {
    display: inline-flex; /* Verwenden Sie flex, um das Icon und den Text nebeneinander anzuzeigen */
    align-items: center; /* Zentriert den Text und das Icon vertikal */
    padding: 0.3rem 0.8rem; /* Innenabstand für den Button */
    border: none; /* Kein Rand */
    border-radius: var(--wp--custom--boxborderradius); /* Abgerundete Ecken */
    text-decoration: none; /* Entfernt Unterstreichungen von Links */
    margin-right: 5px; /* Ein kleiner Abstand zwischen den Buttons */
    transition: background-color 0.3s ease; /* Eine sanfte Übergangsfarbe beim Überfahren mit der Maus */
	font-size: var(--wp--preset--font-size--xx-small)
}

/************* 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; 
}



/**************     MS-spezifisch alter Look      **************/

.entry-content p strong, .entry-content .speziallink a, .entry-content h1 strong, .entry-content h2 strong {
    position: relative;
    font-style: italic;
    text-shadow: none;
    z-index: 1;
    font-weight: inherit;
    text-decoration: none;
    background-image: linear-gradient(to right, var(--wp--preset--color--secondary) 100%, transparent 0%);
    background-repeat: no-repeat;
    transition: all .4s ease; /* Sanfte Übergänge für Hover-Effekte */
}

.entry-content p strong, .entry-content .speziallink a{
	background-size: 100% 0.25em;
	background-position: 0 90%;
}

/* Spezielle Anpassungen für h1 und h2 */
.entry-content h1 strong, .entry-content h2 strong, .entry-content h1.speziallink a , .entry-content h2.speziallink a {
	background-size: 100% 0.2em;
	background-position: 0 60%;
}

.entry-content .speziallink a:hover {
	background-position: 0 calc(90% - 0.4em); /* Hebt die Linie am unteren Rand hervor */
}

.entry-content h1.speziallink a:hover , .entry-content h2.speziallink a:hover {
	background-position: 0 calc(60% - 0.4em); /* Hebt die Linie am unteren Rand hervor */
}

/* Nicht alter Look, aber MS-spezifisch */
#mastercookie-banner .wp-element-button{
	font-size: var(--wp--preset--font-size--xx-small);
}

:where(body .is-layout-constrained) > h2.speziallink{
    margin-block-start: 0rem;
}