/*
Theme Name: Twenty Twenty-Four Child
Theme URI: https://wordpress.org/themes/twentytwentyfour/
Template: twentytwentyfour
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Four is designed to be flexible, versatile and applicable to any website. Its collection of templates and patterns tailor to different needs, such as presenting a business, blogging and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. Twenty Twenty-Four comes with style variations and full page designs to help speed up the site building process, is fully compatible with the site editor, and takes advantage of new design tools introduced in WordPress 6.4.
Tags: one-column,custom-colors,custom-menu,custom-logo,editor-style,featured-images,full-site-editing,block-patterns,rtl-language-support,sticky-post,threaded-comments,translation-ready,wide-blocks,block-styles,style-variations,accessibility-ready,blog,portfolio,news
Version: 1.4.1768049220
Updated: 2026-01-10 13:47:00

*/

html {
  scroll-behavior: smooth;
}

:root {
	--hintergrund: #161616;
	--vordergrund: #ffffff;
	--social-media-hintergrund: #3B3B3B;
	--social-media-vordergrund: #f9f9f9;
	--dashicons-size: 40px;
	/*--switch-bg-color: lightgrey;*/
}

.preload * {
  transition: none !important;
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}

body {
	--hintergrund: #161616;
	--vordergrund: #ffffff;
	--social-media-hintergrund: #3B3B3B;
	--social-media-vordergrund: #f9f9f9;
	/*color: white;*/
	background-color: #161616;
	--switch-bg-color: lightgrey;
	--button-bg-color: white;
	--button-bg-hover-color: lightgrey;
	--abschnitt-bg-color: rgb(48,48,48);
}

body.light-theme {
	--hintergrund: #ffffff !important;
	--vordergrund: #161616 !important;
	--social-media-hintergrund: #f9f9f9;
	--social-media-vordergrund: #3B3B3B;
	/*color: black;*/
	background-color: white;
	--switch-bg-color: white;
	--button-bg-color: lightgrey;
	--button-bg-hover-color: darkgrey;
	--abschnitt-bg-color: rgb(200,200,200);
}

a {
	color: white;
}

body.light-theme a {
	color: black;
}

h1, h2, h4, p {
	color: var(--vordergrund) !important;
}

div#image-overlay {
	cursor: pointer !important;
}

.wp-element-button {
	background-color: var(--button-bg-color);
}

.wp-element-button:hover {
	background-color: var(--button-bg-hover-color);
}

.has-base-2-background-color {
	background-color: var(--abschnitt-bg-color) !important;
}

.kb-row-layout-wrap.wp-block-kadence-rowlayout.kb-row-layout-id524_d6561e-aa {
	
	background-color: #161616;
}

body.light-theme .kb-row-layout-wrap.wp-block-kadence-rowlayout.kb-row-layout-id524_d6561e-aa {
	
	background-color: lightgrey !important;
}


/*---------------------------- Light / Dark Switch -------------------------------*/

.mode-toggle {
	border: none;
	background: linear-gradient(90deg, #555555 0%, #666666 100%);
	padding: 4px;
	width: 70px;
	border-radius: 19px;
	cursor: pointer;
	position: relative;
}

.mode-toggle > span {
	position: relative;
	display: block;
	width: 30px;
	height: 30px;
	border-radius: 100%;
	background-color: var(--switch-bg-color);
	/*
	box-shadow: Opx 1px 1px rgba(3, 7, 18, 0.06),
				Opx 2px 5px rgba(3, 7, 18, 0.12),
				Opx 5px 12px rgba(3, 7, 18, 0.18),
				Opx 10px 20px rgba(3, 7, 18, 0.24),
				Opx 15px 32px rgba(3, 7, 18, 0.30);
	*/
	left: 0;
	transition: all 300ms ease-in-out;
}

body.light-theme .mode-toggle > span {
	left: 100%;
	transform: translatex(-100%);
}

.mode-toggle > span > img {
	width: 27px;
	height: 27px;
	
	position: absolute;
	top: 2px;
	left: 2px;
	transition: all 300ms ease-in-out;
}

.mode-toggle > span > img:nth-child(1) {
	opacity: 0;
}

.mode-toggle > span > img:nth-child(2) {
	opacity: 1;
}

body.light-theme .mode-toggle > span > img:nth-child(1) {
	opacity: 1;
}

body.light-theme .mode-toggle > span > img:nth-child(2) {
	opacity: 0;
}

.logo a:hover{
	cursor: pointer !important;
}

body.light-theme .logo {
	filter: invert(100%);
}

.eb-icon-container span {
	width: 60px !important;
	height: 60px !important;
	font-size: 60px !important;
}


.menu-toggle {
	border: none;
	background: grey;
	padding: 4px;
	width: 70px;
	border-radius: 19px;
	cursor: pointer;
	position: relative;
}

.menu-toggle > span {
	position: relative;
	display: block;
	width: 30px;
	height: 30px;
	border-radius: 100%;
	background-color: var(--switch-bg-color);
	left: 0;
	transition: all 300ms ease-in-out;
}

.menu-toggle > span > span {
	font-size:var(--dashicons-size);
	
	position: absolute;
	/*top: 2px;
	left: 2px;*/
	transition: all 300ms ease-in-out;
}


/*-------------- Header Underline Animation -------------------*/

#mega-menu-max_mega_menu_1 a.mega-menu-link:after {
	display: inline-block !important;
}

.mega-menu-link {
  	display: inline-block !important;
  	position: relative;
	color: var(--vordergrund) !important;
}


.mega-menu-link::after {
	content: '';
	position: absolute;
	width: 75%;
	transform: scaleX(0);
	height: 1px;
	bottom: 8px;
	left: 10px;
	background-color: var(--vordergrund);
	transition: transform 0.4s ease-in-out;
	transform-origin: bottom left;
}

.mega-menu-link:hover::after {
	transform: scaleX(1);
	transform-origin: bottom left;
}



/*Social Media Icons*/
.social-media-logos a{
	background-color: var(--social-media-hintergrund); 
	color: var(--social-media-vordergrund) !important;
	border-top-left-radius: 9999px;
	border-top-right-radius: 9999px;
	border-bottom-left-radius: 9999px;
	border-bottom-right-radius: 9999px;

}

.social-media-logos-footer a{
	background-color: #fff; 
	color: #000 !important;
	border-top-left-radius: 9999px;
	border-top-right-radius: 9999px;
	border-bottom-left-radius: 9999px;
	border-bottom-right-radius: 9999px;

}

body.light-theme .social-media-logos-footer a{
	background-color: lightgrey; 
	color: #000 !important;

}

.social-media-logos .wp-social-link-instagram:hover a {
	background-color: #f00075;
	color: #fff !important;
}

.social-media-logos .wp-social-link-linkedin:hover a {
	background-color: #0d66c2;
	color: #fff !important;
}

.social-media-logos .wp-social-link-mail:hover a {
	background-color: #fff;
	color: #000 !important;
}

/*------------------------------------------------------------------------------------------*/

/*Anker richtig setzten durch Sticky Header*/
#ProjekteAnker {
	scroll-margin-top: 100px;
}


/* Startseite Button */
.kb-button:hover {
	cursor: pointer;
}



/* Startseite Projekt hover Effect Bild*/
.image-effect{
	position: relative;
}

.projekte-cover {
  	width: 400px !important;
  	min-height: 225px; /* Oder eine andere gewünschte Mindesthöhe*/ 
  	padding-left: 0;
	padding-right: 0;
}

.image-effect .projekte-cover{
	background-color: #222;
	overflow: hidden;
}
/*
.image-effect .wp-block-kadence-column .wp-block-image{
	transition: 1s;
	transition-delay: 0.2s;
	opacity: 0%;
}
*/
/*Größe und Übergang von Play-Logo wenn ausgeblendet*/
.image-effect .wp-block-kadence-column .wp-block-group{
	transform: scale(1.2);
	transition: 0.7s ease-in-out;
	opacity: 0%;
}

/*Übergang skalierung Hintergrund*/
.image-effect .wp-block-cover__image-background{
	transition: 0.5s ease-in;
}

/*hover*/
.image-effect .wp-block-kadence-column .projekte-cover:hover{
	cursor: pointer;
}

/*Play-Logo einblenden*/
.image-effect .wp-block-kadence-column .wp-block-cover:hover .wp-block-group{
	transform: scale(0.9);
	opacity: 1;
}

/*Hintergrund skalieren und abdunkeln*/
.image-effect .wp-block-kadence-column .wp-block-cover:hover .wp-block-cover__image-background{
	opacity: .6;
	transform: scale(1.2);
}
/*
.image-effect .wp-block-kadence-column .wp-block-cover:hover .wp-block-uagb-image{
	opacity: 1 !important;
}*/


.cookiebanner-bg {
	width: 400px !important;
	margin: 0;
	padding: 0;
}




/*Projekt Beschriftung Abstand*/
.projektbeschreibung h4{
	padding: 0px;
	margin: 0px;
}


.fixe-hoehe img {
	display: block;
	height: 261px; 
	object-fit:cover;
	width: auto;
	
}

body.light-theme .kunden img {
	filter: invert(100%);
}




/*Trenner Footer*/
.wp-block-image img{
	width:100%;
}

body.light-theme .wp-block-image img {
	filter: invert(100%);
}


/*mailadresse in Footer*/
.mailadresse a{
	text-decoration: none;
}

.mailadresse a:hover{
	text-decoration: underline;
}

.mailadresse p{
	margin: 0px;
	padding: 0px;
}

.mailadresse h3{
	color: white;
}

.social-media-logos-footer h3{
	color: white;
}

body.light-theme .mailadresse h3{
	color: black;
}

body.light-theme .social-media-logos-footer h3{
	color: black;
}

.footer-links a {
	text-decoration: none;
}


.footer-links a {
  display: inline-block;
  position: relative;
}

.footer-links a::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 2px;
  left: 0;
  background-color: var(--vordergrund);
  transition: transform 0.4s ease-in-out;
  transform-origin: bottom left;
}

.footer-links a:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}


/*-------------------------------------------------------------*/

/* Button Kontaktformular*/

.wpcf7 input[type="submit"] {
	margin-left: 35%;
	width: 30%;
	background-color: darkgray;
}

.wpcf7 input:hover[type="submit"] {
	background-color: grey;
	cursor: pointer;
}

/*Kontaktformular*/
.ht-form-elem .ht-form-elem-is-required::after {
	content: '(erforderlich)';
	color: grey;
	margin-left: 8px;
	font-weight: lighter;
}

.ht-form-elem-head label {
	color: var(--vordergrund) !important;
}


/*Impressum*/
.telefonnummer {
	text-decoration: none !important;
}

/* --------------------  Tablet  -------------------------- */

@media only screen and (max-width: 768px) {
	/* Menü */
	#mega-menu-max_mega_menu_1 {
		position: relative !important;
		width: 100px !important;
	}
	/*
	#mega-menu-max_mega_menu_1 li {
	display: inline-block !important;
	}

	#mega-menu-max_mega_menu_1 li:hover {
	text-decoration: underline !important;
	text-decoration-thickness: 2px !important;
	text-decoration-color: white !important;
	}*/
	
	.projekte-cover {
		width: 300px !important;
		min-height: 156px; /* Oder eine andere gewünschte Mindesthöhe*/ 
	}
	
	.youtube-link iframe{
		width: 300px;
		height: 168.75px;
	}
	
	.cookiebanner-bg {
		width: 300px !important;
		
	}
	
	/*Play-Logo einblenden*/
	.image-effect .wp-block-kadence-column .wp-block-group{
		transform: scale(1);
		opacity: 1;
	}

	/*Hintergrund skalieren und abdunkeln*/
	.image-effect .wp-block-kadence-column .wp-block-cover .wp-block-cover__image-background{
		opacity: .6;
		transform: scale(1);
	}
	
	/*Play-Logo einblenden*/
	.image-effect .wp-block-kadence-column .wp-block-cover:hover .wp-block-group{
		transform: none;
	}

	/*Hintergrund skalieren und abdunkeln*/
	.image-effect .wp-block-kadence-column .wp-block-cover:hover .wp-block-cover__image-background{
		transform: scale(1);
	}
	
	
	/*Projekt Beschriftung Abstand*/
	.projektbeschreibung h4{
		padding: 0px;
		margin: 0px;
		width: 100%;
		text-align: center;
	}
	
	
	.fixe-hoehe {
		width: 768px; /* Ihre feste Breite */
		max-width: 100vw; /* Verhindert horizontales Scrollen auf Handys */
		margin-left: auto;
		margin-right: auto;
		overflow: hidden; /* Schneidet überstehende Inhalte ab */
		
	}
	
	.fixe-hoehe img {		
		height: 160px; 	
	}
	
	.kb-image67_cd356b-a3 img {
		display: none;
	}
	
	.kb-image67_b9e330-35 img {
		display: none;
	}
	
	
}

/* --------------------  Handy  -------------------------- */

@media only screen and (max-width: 480px) {
	/*.startseite-ueberschrift {
		margin-top:0;
	}*/
	
	.fixe-hoehe img {
		height: 120px; 
	}
	
}