/*
Theme Name: Twenty Twenty-Three Child
Template: twentytwentythree
*/

/*
 * ZUR ORIENTIERUNG:
 * 
Basis (dunkles weiss) #FFFFFF
var(--wp--preset--color--base)

Contrast (dunkel) #010600
var(--wp--preset--color--contrast)

Primär (orange) #FF7E42
var(--wp--preset--color--primary)

Sekundär (schon wieder weiss???) #FFFFFF
var(--wp--preset--color--secondary)

Tertiär (auch dunkal aber anders dunkel???) #212121
var(--wp--preset--color--tertiary)

Bläuliches Cyangrau #ABB8C3
var(--wp--preset--color--cyan-bluish-gray)

MAXIMALE BREITE des wide contents 1200px
ist erreicht bei der Screenbreite 1264px

*/

/* BASICS und FIXES */

*,*:before,*:after{
	box-sizing:border-box;
}
html {
	scroll-behavior: smooth;
}
body{
	--wp--preset--font-family--system-font: 'Source Sans 3', sans-serif;
	--border-radius:15px;
}
main ol, 
main ul{
	padding-left:1.5em;
}
main li{
	list-style-type:none;
	position:relative;
}
main li:before{
	content:"⬤";
	position:absolute;
	font-size:10px;
	top:0.5em;
	left:-1.5em;
	
}
main ul.dash-list{
	padding-left:.666em;
}
main ul.dash-list li:before{
	content:"-";
	top:0;
	left:-.666em;
}
dialog{
	border:0;
	color:var(--wp--preset--color--primary);
}

progress {
	border:0;
    border-radius: 0; 
    width: 100%;
    height: 5px;
	background-color: var(--wp--preset--color--base);
}
progress::-webkit-progress-bar {
    background-color: var(--wp--preset--color--base);
    border-radius: 0;
}
progress::-webkit-progress-value {
  background-color: var(--wp--preset--color--primary);
  border-radius: 0;
  box-shadow: 0;
}

progress::-moz-progress-bar {
    background-color: var(--wp--preset--color--primary);
    border-radius: 0;
}











/* header */
header.wp-block-template-part{
	z-index:2;
	position:relative;
}









/* Navigation */
.wp-block-navigation-item.current-menu-item{
	color:var(---wp--preset--color--primary);
	pointer-events:none;
}
.wp-block-navigation-item.current-menu-item a{
	text-decoration: none;
}

body.tag-header-invers header.wp-block-template-part{
	--wp--preset--color--contrast:var(--wp--preset--color--base);
	color:var(--wp--preset--color--base);
}
body.tag-header-invers header.wp-block-template-part .custom-logo-link{
    background:transparent url(https://www.zeichenundzeit.de/beta/wp-content/uploads/2023/09/zuz-logo-dark.svg) center center no-repeat;
	background-size:contain;
}
body.tag-header-invers header.wp-block-template-part .custom-logo-link img{
	visibility:hidden;
}



@media (min-width:600px){ 
	.wp-block-navigation__responsive-container-open{ /* burger menü auch >600px anzeigen... */
		display:flex!important;
		
	}
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open){ /* ...und navi weiterhin versteckt halten */
		display:none;
	}
}
@media (min-width:800px){ 
	.wp-block-navigation__responsive-container-open{ /* ab 800px burger ausblenden... */
		display:none!important;
		background-color: #0000 !important; /* Setzt den Hintergrund auf schwarz */
	}
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open){ /* ...und navi anzeigen */
		display:block;
	}
}
@media (min-width:1264px){
	header.wp-block-template-part .wp-block-navigation__container{
		margin-right:5em;
	}
}






/* main */
body.single-post main.wp-block-group{}




/* Footer */
footer.wp-block-template-part{
	margin-block-start:0;
}
footer.wp-block-template-part p a{
	font-weight:600;
	color:var(--wp--preset--color--primary);
	text-decoration:none;
}
footer.wp-block-template-part .footer_menu .wp-block-navigation__container{
	display:block;
	column-count: 2;
	column-gap: 4em;
}
footer.wp-block-template-part .footer_menu .wp-block-navigation-item{
	margin-bottom:1em;
}
footer.wp-block-template-part .wp-block-social-links svg{
	color:var(--wp--preset--color--cyan-bluish-gray)!important
}





/* geänderte Variante des Cover Blocks
 * hier wird das Video etwas weiter nach oben gezogen
 * damit es unter die navi geht. 
 * Die Position des Hintergrundvideos wird für Desktop
 * in den Block-Einstellungen "Fokuspunkt" festgelegt,
 * alles Andere, was kleiner ist, hier im CSS */
.wp-block-cover.intro-cover{
	--intro-cover-offset:10rem;
	overflow:visible;
}

.wp-block-cover.intro-cover .wp-block-cover__video-background{
	margin-top:calc( var(--intro-cover-offset) * -1 );
	height:calc( 100% + var(--intro-cover-offset) );
	object-fit: contain;
	transform: scale(.9);
    transform-origin: 103% 0;
}

@media ( width < 1260px ){
	.wp-block-cover.intro-cover .wp-block-cover__inner-container{
		margin-left: calc( var(--wp--style--root--padding-right) / 2 );
		margin-right: calc( var(--wp--style--root--padding-right) / 2 );
	}
}

@media ( width < 960px ){
	.wp-block-cover.intro-cover .wp-block-cover__video-background{
		transform: none;
	}
}

@media ( width < 782px ){
	.wp-block-cover.intro-cover .wp-block-cover__video-background{
		transform: scale(.8);
		transform-origin: 40% 60%;
	}
}

@media ( width < 600px ){
	.wp-block-cover.intro-cover .wp-block-cover__video-background{
		transform: scale(1.1);
		transform-origin: 50% 0%;
	}
}







/* buttons */
.wp-element-button:visited:not(.is-style-outline), .wp-block-button__link:visited:not(.is-style-outline){
	color:var(--wp--preset--color--base);
	background-color:var(--wp--preset--color--primary);
}
.wp-block-button a{
	transition:all .3s;
}
.wp-block-button:not(.is-style-outline) a:hover,
.wp-block-button:not(.is-style-outline) a:visited:hover{
	background-color:var(--wp--preset--color--secondary)!important;
	transform:translatey(-.25em);
	box-shadow:0 .25em .5em rgba(0,0,0,.2);
}
.wp-block-button.button-down a{
	text-indent:-1000px;
	aspect-ratio:1;
	background-image:url(https://www.zeichenundzeit.de/beta/wp-content/uploads/2023/09/down-contrast.svg)!important;
	background-position:center center;
	background-size:auto 99%;
	overflow:hidden;
	vertical-align:bottom;
}
.wp-block-button.button-down a:hover{
	background-position:center 9800%;
}




/* .flickity (allgemeine flickity anpassungen) */
.flickity-prev-next-button.previous,
.flickity-prev-next-button.next{
	background-color:transparent;
}




/* overline */
.overline{
	--overline-breite:2em;
	--overline-abstand:.5em;
	padding-left: calc( var(--overline-breite) + var(--overline-abstand) );
	line-height:1.25;
	font-weight:600;
}
.overline:before{
	content:"";
	position:relative;
	top:-.25em;
	display:inline-block;
	width:var(--overline-breite);
	margin-left:calc( ( var(--overline-breite) + var(--overline-abstand) ) * -1 );
	margin-right:var(--overline-abstand);
	border:0;
	border-top:2px solid;
}
.overline + h1,
.overline + h2{
	margin-block-start: .25em;
}
@media (min-width:1264px){
	.overline{
	    --overline-breite:4em;
		--overline-abstand:1em;
	}
}






/* .wp-block-post-template-is-layout-flow (Liste der Blogbeiträge/Projekte zB auf Home) 
 * Aufbau des Beitrags-Templates: Spalten > (  ( Spalte > Beitragsbild )  + ( Spalte.box.schatten > (Titel+Textauszug) ) ) 
 * */

.wp-block-post-template-is-layout-flow{
	counter-reset: post-counter;
}

.wp-block-post-template-is-layout-flow > li{
	list-style-type:none!important;
	counter-increment: post-counter;
}
.wp-block-post-template-is-layout-flow > li::before{
	content:none;
}
.wp-block-post-template-is-layout-flow .box::before {
	content: "0" counter(post-counter);
	color:#fff;
	font-weight:900;
	font-size:28px;
}
.wp-block-post-template-is-layout-flow > li:nth-child(odd) .box{
	background-color:var(--wp--preset--color--tertiary);
	
}
.wp-block-post-template-is-layout-flow > li:nth-child(even) .box{
	background-color:var(--wp--preset--color--primary);
	
}

.wp-block-post-template-is-layout-flow > li:nth-child(odd) .wp-block-post-title a{
	/* color:var(--wp--preset--color--contrast); */
	
}
.wp-block-post-template-is-layout-flow > li:nth-child(even) .wp-block-post-title a{
	/* color:var(--wp--preset--color--base); */
	
	
	
}


.wp-block-post-template-is-layout-flow .wp-block-post-excerpt__more-text{
	margin-top:.75em;
	font-weight:600;
	font-size:var(--wp--preset--font-size--medium);
	
}

@media (min-width:782px){
	.wp-block-post-template-is-layout-flow > li:nth-child(even) .wp-block-columns{
		flex-direction:row-reverse;
	}
}

@media (min-width:1300px){
	.wp-block-post-template-is-layout-flow .box{
		z-index:1;
	}
	.wp-block-post-template-is-layout-flow > li:nth-child(even) .wp-block-post-title,
	.wp-block-post-template-is-layout-flow .wp-block-post-featured-image{
		width: calc( 100% + 4rem );
	}
	.wp-block-post-template-is-layout-flow > li:nth-child(even) h2.wp-block-post-title{
		margin-left:-4rem;
	}
	.wp-block-post-template-is-layout-flow > li:nth-child(even) .wp-block-post-featured-image{
		margin-bottom:4rem;
		margin-left:-4rem;
	}
	.wp-block-post-template-is-layout-flow > li:nth-child(odd) .wp-block-columns{
		align-items: flex-start!important;
	}
	.wp-block-post-template-is-layout-flow > li:nth-child(even) .wp-block-columns{
		align-items: flex-end!important;
	}
}









/* .wp-block-post-template-is-layout-grid (Liste der Blogbeiträge/Projekte zB auf Projekte) 
 * Aufbau des Beitrags-Templates: Beitragsbild + Gruppe.box.schatten > (Titel+Textauszug) 
 * */

.wp-block-post-template-is-layout-grid{
	counter-reset: post-counter;

}
.wp-block-post-template-is-layout-grid > li{
	list-style-type:none!important;
	display:flex;
	flex-direction:column;
	height:100%;
	padding-bottom:3rem;

}
.wp-block-post-template-is-layout-grid > li::before{
	content:none;

}
.wp-block-post-template-is-layout-grid > li > *{
	margin:0;

}
.wp-block-post-template-is-layout-grid > li > .box{
	margin-top:1rem;
	flex-basis:100%;

	
}

.wp-block-post-template-is-layout-grid .wp-block-post-excerpt__more-text{
	margin-top:.75em;
	font-weight:600;
	font-size:var(--wp--preset--font-size--medium);
	
	
}

@media (min-width:1300px){
	.wp-block-post-template-is-layout-grid > li > .box{
		width:60%;
		margin-left:10%;
		margin-top:-2rem;
		flex-basis:0;
		z-index:1;
	
	}
	.wp-block-post-template-is-layout-grid > li:nth-child(4n-1) > .box,
	.wp-block-post-template-is-layout-grid > li:nth-child(4n) > .box{
		margin-left:auto;
		margin-right:10%;

	}
}





/* Beitragsseite .gb-block-post-grid ("Weitere Projekte" auf den Blog/Projekte Pages) */
body.single-post .gb-block-post-grid{
	margin-bottom:3rem;
}
body.single-post .gb-block-post-grid article{
	display:block !important;
}
body.single-post .gb-block-post-grid .is-list article:not(:last-child), 
body.single-post .gb-block-post-grid .gb-is-list article:not(:last-child){
	border:0;
	padding-bottom:0;
	margin-bottom: 3rem;
}
body.single-post .gb-block-post-grid img{
	height:auto;
}
body.single-post .gb-block-post-grid-text{
	margin-top:1rem;
	padding:1.5em 1em;
	border-radius:var(--border-radius);
	background-color:var(--wp--preset--color--tertiary);
	box-shadow:0 1rem 2rem rgba(0,0,0,.16);
}
body.single-post .gb-block-post-grid-title{
	font-size:var(--wp--preset--font-size--medium)!important;
	font-weight:600;
	margin-bottom:.25em;
	
}
body.single-post .gb-block-post-grid-title a{
	text-decoration:none!important;
	color:var(--wp--preset--color--contrast);
	color:#fff !important;
}
body.single-post .gb-block-post-grid-byline{
	display:none;
}
body.single-post .gb-block-post-grid-excerpt > p:first-child{
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
body.single-post .gb-block-post-grid-more-link{
	color:var(--wp--preset--color--primary);
	
}

@media(min-width:600px){
	body.single-post .gb-block-post-grid-excerpt > p:first-child{
		-webkit-line-clamp: 2;
	}
}
@media (min-width:782px){
	body.single-post .gb-post-grid-items{
		display:flex;
		gap: 1.5rem;
	}
	body.single-post .gb-post-grid-items > * {
        flex-basis: 0;
        flex-grow: 1;
		width:100%;
    }

	body.single-post .gb-block-post-grid-excerpt > p:first-child{
		-webkit-line-clamp: 3;
	}
}
@media (min-width:1100px){
    body.single-post .gb-block-post-grid-text{
	    padding:2.25em 2em;
	}
}
@media (min-width:1300px){
	body.single-post .gb-block-post-grid-text{
		width:56%;
		margin-top:-1.5em;
		margin-left:31.5%;
		position:relative;
		z-index:1;
	}
}









/* .team-members UND .team-members--details */
.team-members .flickity-viewport{
	overflow:visible;
}
.team-member:not(.team-member--details) h3,
.team-member:not(.team-member--details) p{
	font-size:18px;
	margin-top:0;
	margin-bottom:0;
}
.team-members--details .team-member:not(.team-member--details) h3,
.team-members:not(.team-members--details) .team-member h3,
.team-members:not(.team-members--details) .team-member p{
	font-weight:600;
}
.team-member{
	--team-member-breite:210px; /* das ist eigentlich nur die Breite für die Einfache Variante, also die Slider-Variante auf der Home */
}
.team-members:not(.team-members--details) .team-member{
	width:var(--team-member-breite);
	margin-right:25px;
}
.team-members--details .team-member{
	width: calc( 150px + 30vw );
	margin:2em auto;
}
.team-member:not(.team-member--details) img{
	width:100%;
	aspect-ratio:3/4;
	object-fit:cover;
	margin-bottom:.5em;
}
.team-member .mehr{
	font-size:18px;
}
dialog.team-member--details{
	background-color: var(--wp--preset--color--custom-durkgrey);
	padding:2rem;
	overscroll-behavior: contain;
}
dialog.team-member--details::backdrop{ /* ::backdrop dann keine variable von body erben sondern nur von html */
	background-color:rgba(0,0,0,.9);
}
dialog.team-member--details:modal{ /* offenes dialog element, also im modal modus */
	position: fixed;
	margin:auto;
	width:90vw;
}
.team-member--details .close{
	float:right;
	margin-left:1em;
}
.team-member--details .inside > img {
	display:block;
	width:80%;
	max-width:280px;
	aspect-ratio:7/8;
	object-fit:cover;
	margin:0 auto 2rem;
}
.team-member--details h3{
	font-weight:900;
	font-size:28px;
	line-height:1.1;
	color:var(--wp--preset--color--base);
	margin-top:0;
	margin-bottom:.125em;
}
.team-member--details p{
	font-weight:600;
	margin-top:0;
	margin-bottom:.5em;
}
.team-member__features h4{
	font-weight:600;
	margin-bottom:.25em;
	white-space:nowrap;
}

@media (min-width:450px){
	.team-member{
		--team-member-breite:180px;
	}
}
@media (min-width:500px){
	.team-members--details{
		display:grid;
		grid-template-columns:1fr 1fr;
		column-gap: 7%;
	}
	.team-members--details .team-member{
		width: 100%;
	}
}
@media (min-width:600px){
	.team-member{
		--team-member-breite:210px;
	}
	.team-member__features{
		margin-top:1em;
		display:grid;
		grid-template-columns:min-content 1fr;
		column-gap: 1em;
		row-gap: .25em;
	}
	.team-member__features h4{
		margin-top:1em;
	}
}
@media (min-width:700px){
	.team-member{
		--team-member-breite:30%;
	}
	.team-members--details{
		grid-template-columns:1fr 1fr 1fr;
		column-gap: 4%;
	}
}
@media (min-width:800px){
	dialog.team-member--details{
		padding:3rem;
	}
	.team-member--details .inside{
		display:grid;
		grid-template-columns: 300px 1fr;
		column-gap: 2em;
	}
	.team-member--details .inside > img {
		max-width:none;
		width:100%;
	}
	.team-member--details .box{
		grid-column: 1 / 3;
	}
	.team-member__features{
		grid-area: 1 / 2;
		align-self: end;
		margin-bottom:2rem;
	}
}
@media (min-width:900px){
	.team-members--details{
		grid-template-columns:1fr 1fr 1fr 1fr;
		column-gap: 3%;
	}
}
@media (min-width:1000px){
	.team-member{
		--team-member-breite:22%;
	}
	.team-members--details{
		column-gap: 4%;
	}
}
@media (min-width:1100px){
	.team-member--details .inside{
		display:block;
		position:relative;
	}
	.team-member--details .inside > img{
		float:left;
		width:320px;
		margin-bottom:0;
	}
	.team-member--details .box,
	.team-member__features{
		margin-left: calc( 320px + 2em ) ;
	}
	.team-member__features{
		margin-bottom:0;
	}
}
@media (min-width:1300px){
	.team-member{
		--team-member-breite:210px;
	}
	.team-member--details .inside{
		max-width:1100px;
		margin-left:auto;
		margin-right:auto;
	}
	.team-member--details .inside > img{
		width:375px;
	}
	.team-member--details .box,
	.team-member__features{
		margin-left: calc( 375px + 4em ) ;
	}
}







/* .progress (Prozentanzeige zB im Team-Members Element bei den Features) */
.progress{
	position:relative;
	padding-top:.75em;
}
.progress label{
	position:absolute;
	padding-left:22px;
	top:0;
	left: var( --progress , 0 );
	transform:translateX(-9.5px);
	background:transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='19' height='16'><polygon fill='%23ff7e42' points='0,0 9.5,16 19,0'/></svg>") left center no-repeat;
	background-size:19px;
	color:#FFF;
}
.progress--50 label{ /* wenn der Wert über 50% ist, wechselt das Label nach links vom Pfeil */
	padding-left:0;
	padding-right:22px;
	transform:translateX( calc( -100% + 9.5px ) );
	background-position:right center;
}







/* .testimonials */
.wp-block-lazyblock-testimonials {
    padding-left: 0!important;
    padding-right: 0!important;
	
}
.testimonials{
	--testimonial-bildbreite:120px;
	margin-block-end:calc( var(--testimonial-bildbreite) / 2 )!important;
}
.testimonials .flickity-viewport{
	transition: height 0.4s;
}
.testimonials .flickity-prev-next-button.previous,
.testimonials .flickity-prev-next-button.next{
   	 color: #ffffff !important; 
}



.testimonial{
	display:flex;
	flex-direction:column;
	align-items:center;
	padding-left:4em;
	padding-right:4em;
	margin-bottom:0;
		

}
.testimonial img{
	width:var(--testimonial-bildbreite);
	inset:0 auto;
	aspect-ratio:1;
	object-fit:cover;
	border-radius:9em;
	margin-bottom:calc( var(--testimonial-bildbreite) / -2 );
}
.testimonial blockquote,
.testimonial figcaption{
	text-align:center
}
.testimonial blockquote:before{
	content:"„";
	display:block;
	color:#ff4242;
	font-size:56px;
	font-weight:600;
}
.testimonial figcaption{
	font-weight:700;
	margin-bottom:1em;
}
@media (min-width:900px){
	.testimonials .inside{
		width:80%;
		margin-left:auto;
		margin-right:auto;
	}
	.testimonial{
		justify-content: space-between;
		width:50%;
	    min-height:100%;
		padding-left:2em;
		padding-right:2em;
	}
	.testimonials--1 .testimonial{
		width:70%;
		margin-left:auto;
		margin-right:auto;
	}
	.testimonials--2 .flickity-prev-next-button{ /* wenn nur 2 testiemonials, dann ab 900px pfeile ausblenden */
		display:none;
	}
	.testimonials--2 .flickity-enabled.is-draggable .flickity-viewport {
        cursor: initial;
    }
	.testimonials .flickity-prev-next-button.previous{
		left:-20px;
	}
	.testimonials .flickity-prev-next-button.next{
		right:-20px;
	}
}
@media (min-width:1264px){
	.testimonials .inside{
		width:1200px;
	}
}







/* .customers (Streifen mit Kundenlogos) */
.customers{
	--customer-animation-dauer:33s;
	overflow:hidden;
}
.customers .wp-block-group.alignwide { /* grand-parent aller logos */
	position:relative;
	animation: customersGrandParent var(--customer-animation-dauer) cubic-bezier(.2, 0, .8, 1) alternate infinite none running;
}
.customers .wp-block-group.alignfull{ /* parent aller logos */
	white-space:nowrap;
	position:absolute;
	top:50%;
	left:0;
	transform:translateY(-50%) translateX(0);
	width: max-content;
	animation: customersParent var(--customer-animation-dauer) cubic-bezier(.2, 0, .8, 1) alternate infinite none running;
}
.customers figure{
	display:inline-block;
	margin-top:0;
	vertical-align:middle;
}
.customers figure:not(:first-child){
	margin-left:70px;
}

@keyframes customersGrandParent {
    0%{ transform:translateX(0); }
    100% { transform:translateX(100%); }
}
@keyframes customersParent {
    0%{ transform:translateY(-50%) translateX(0); }
    100% { transform:translateY(-50%) translateX(-100%); }
}








/* UTILITY CLASSES */


/* Wenn .has-tertiary-color nicht die Kind-Elemente beeinflusst, dann has-tertiary-color benutzt werden  */
.children-has-tertiary-color * {
  color: var(--wp--preset--color--tertiary) !important;
}



.spalten-offset{ /* vertikaler Versatz der Spalten zB auf Beitraggseiten */	
}
@media (min-width:782px){
	.spalten-offset.are-vertically-aligned-top{
		padding-top:3rem;
	}
	.spalten-offset.are-vertically-aligned-bottom{
		padding-bottom:3rem;
	}
	.spalten-offset.are-vertically-aligned-top > *:first-child {
		align-self: flex-end;
	}
	.spalten-offset.are-vertically-aligned-bottom > *:first-child {
		align-self: flex-start;
	}
	#wp--skip-link--target .spalten-offset.are-vertically-aligned-top > *:last-child > *,
	#wp--skip-link--target .spalten-offset.are-vertically-aligned-bottom > *:last-child > *{
		margin-left:-5rem!important;
	}
	.spalten-offset.are-vertically-aligned-top > *:last-child > *{
		position:relative;
		top:-3rem;
		margin-bottom:3em;
	}
	.spalten-offset.are-vertically-aligned-bottom > *:last-child > *{
		position:relative;
		top:3rem;
		margin-top:3em;
	}
	
}



.offset-content-top{
	margin-top:5rem;
}
.offset-content-top > *{
	position:relative;
	top:-5rem;
}


.grid-stack{
	display:grid;
}
.grid-stack > *{
	grid-column:1;
	grid-row:1;
}
.grid-stack > *:first-child{
	order:1;
}

.overflow-hidden{
	overflow:hidden;
}

.mehr{ /* link mit einer Pfeilspitze nach rechts */
	text-decoration:none;
	display:inline-block;
	padding-right:1.333em;
	background:transparent url(https://www.zeichenundzeit.de/beta/wp-content/uploads/2023/09/right-primary.svg) no-repeat center right;
	background-size:auto 1.5em;
}
.close{ /* quadrat mit Pfeil nach links (zB in den Modalboxen) */
	display:inline-block;
	width:2.5em;
	aspect-ratio:1;
	background: #fff url(https://zuz.kunden-zuz.de/wp-content/uploads/2023/09/left-arrow-contrast.svg) center center;
	background-size:101% auto;
	transition:all .3s;
	overflow:hidden;
	vertical-align:bottom;
	text-indent:-1000px;
}
.close--dark{
	background-image: url(https://zuz.kunden-zuz.de/wp-content/uploads/2023/09/left-arrow-base.svg);
}
.close:hover{
	background-position:11000% center;
}

.box{
	padding:1.5em 1em;
	border-radius:var(--border-radius);
}
@media (min-width:1100px){
    .box{
	    padding:2.25em 2em;
	}
}

.verlauf-vertikal{ /* oben orange, unten rot */
	background: linear-gradient(180deg,rgb(255,126,66) 0%,rgb(255,66,66) 100%)!important;
}
	
.schatten{
	box-shadow:0 1rem 2rem rgba(0,0,0,.16);
}

#wp--skip-link--target .width-100pro-plus{
	max-width:none;
	width:120%;
	margin-left:-10%!important;
}
@media (min-width: 782px) {
	#wp--skip-link--target .md-width-100pro-plus{
		max-width:none;
		width:120%;
		margin-left:-10%!important;
	}
}
@media (min-width: 1100px) {
	#wp--skip-link--target .lg-width-100pro-plus{
		max-width:none;
		width:120%;
		margin-left:-10%!important;
	}
}
@media (min-width: 1300px) {
	#wp--skip-link--target .xl-width-100pro-plus{
		max-width:none;
		width:120%;
		margin-left:-10%!important;
	}
}

*[class*=max-width-]{
	margin-left:auto;
	margin-right:auto;
}
.max-width-50{max-width:50px}
.max-width-100{max-width:100px}
.max-width-150{max-width:150px}
.max-width-200{max-width:200px}
.max-width-250{max-width:250px}
.max-width-300{max-width:300px}
.max-width-350{max-width:350px}
.max-width-400{max-width:400px}
.max-width-450{max-width:450px}
.max-width-500{max-width:500px}
.max-width-550{max-width:550px}
.max-width-600{max-width:600px}



@media (max-width: 781.95px) {
    .reverse-mobile,
	.mobile-reverse{
        flex-direction: column-reverse;
    }
}

.outset{
	margin-top:-3rem!important;
	z-index:1;
	position:relative;
}
@media (min-width:782px){
	.outset{
		margin-bottom:-3rem!important;
	}
}
@media (min-width:1300px){
	.outset{
		margin-top:-4rem!important;
		margin-bottom:-4rem!important;
	}
}

.text-columns{
	column-width: 20em;
	column-gap: 3em;
}
.text-columns > *{ 
	-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
          page-break-inside: avoid; /* Firefox */
               break-inside: avoid; /* IE 10+ */
}
.z-index-1{
	z-index:1;
}

@media (max-width: 781.95px){ /* unterhalb von 782px, als einspaltiges Layout */
	.hide-on-mobile{
		display:none;
	}
}