/*
 Theme Name:   2023 child
 Description:  Child Theme
 Author:       
 Template:     twentytwentythree
 Version:      1.0
 Text Domain:  2023-child2
*/

@viewport {
	width: device-width;	
	zoom: 1;	
	}


	:root {
		--base-font-size: 16px;
	}


	@font-face {
		font-family: 'ssp_r';
		src: url('fonts/SourceSansPro-Regular.ttf');
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	
	}
	
	
	
	@font-face {
		font-family: 'ssp_b';
		src: url('fonts/SourceSansPro-Bold.ttf');
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	
	}
	
	
	@font-face {
		font-family: 'ssp_l';
		src: url('fonts/SourceSansPro-Light.ttf');
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	
	}


	@font-face {
		font-family: 'os';
		src: url('fonts/OpenSans-VariableFont_wdth,wght.ttf');
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	
	}


	@media (prefers-color-scheme: dark) {
		:root {
			--bg-color: #000000;
			--text-color: #ffffff;
		}
	}



	
	:root {
		
		--bg-color: #ffffff;
		--text-color:#242424;
		--base-font-size: 18px;
		

   }
	
	html {
		max-width: 100%;
		overflow-x: hidden;
		scroll-behavior: smooth;
	}


	

body {				
font-family: 'ssp_r';	
background: var(--bg-color);;
color:var(--text-color);
font-size: var(--base-font-size);
padding: 0 !important;
}


body > .wp-site-blocks {
	padding:0;
}


/* Header und Navigation */

nav {
	background-color: rgba(255, 255, 255, 0.8);
	border-radius:10px;
}

#modal-1 {
	background-color: transparent !important;
}


nav a {
	font-size: calc(var(--base-font-size) + 0.1em);
	padding:8px 17px;
	color:rgb(51, 51, 51) !important;
	text-transform: uppercase;
  	border-radius: 2px;
  	transition: color 0.3s ease;
  	text-decoration: none;
	box-sizing: border-box;

}

nav a::after {
	height:70%;
	top:15%;
	width:1px;
	background-color: rgba(73, 73, 73, 0.3);
	content:'';
	position: absolute;
	right:-0.8em;
	
}

nav ul li:last-child a::after {display: none;}
#modal-1-content > ul > li:last-child a {background-color: #E21C3D; color: #ffffff !important; border-bottom-right-radius:10px; border-top-right-radius:10px; margin-left: -0.5em;}
#modal-1-content > ul > li:last-child a:hover {background-color:#be1733; transition: all 0.5s ease;}

nav a:hover {
  text-decoration: none;
  color:#145c72 !important;
}

header {
	background-color: transparent !important;
	position: fixed;
  	width: 100%;
  	z-index: 999;
}

.logo {
	position: absolute;
	top: -2em;
	left: 3em;
	max-width: 150px;
	background-color: rgba(255, 255, 255, 1);
	padding: 50px 1em 2em 1em;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
	border-radius: 40px;
	z-index:1;

}

.wp-image-51 {transition:all 1s ease;}

/* Überschriften */

h2 {color: #136A92; font-size: 2em;}
h3 {color: #136A92; font-size: 1.5em;}

.subheadline {font-size: 1.2em; text-transform: uppercase; color: #1E88A8; margin-bottom: -1em;}


/* Startseite */

.hero {
	border-bottom: 10px solid;
	border-image: linear-gradient(
  90deg,
  #6FBF44 0%,
  #6FBF44 25%,
  #1E88A8 25%,
  #1E88A8 50%,
  #FBC02D 50%,
  #FBC02D 75%,
  #E21C3D 75%,
  #E21C3D 100%
) 1;
}

.hero {padding: 0;}
.hero .wp-block-cover__inner-container {color: #303030 !important; background-color: rgba(255, 255, 255, 0.6); position: relative; z-index:1; width: 100vw; padding: 2em; margin: 0;}


.hero h1 {color: #136A92 !important; margin-top: 0;}
.hero p:first-child {font-size: 1.2em; text-transform: uppercase; color: rgb(30, 136, 168);}


.hero .wp-block-button__link  {
	color: rgb(255, 255, 255);
	background-color:#1E88A8;
	border-radius: 5px;
	
}

.hero .wp-block-button__link:hover{
	color: rgb(43, 43, 43);
	background-color: rgba(255, 255, 255, 0.8);
	transition: all 0.5s ease;
	}


.icons img{
filter: invert(44%) sepia(74%) saturate(528%) hue-rotate(154deg) brightness(92%) contrast(92%);
}



.icons div {
	background-color: #F4F1EC;
	padding: 1.5em;
	border-radius: 10px;
	font-weight: bold;
}


.small-cover .wp-block-cover__inner-container {color: #303030 !important; background-color: rgba(255, 255, 255, 0.6); z-index:1; padding: 2em; border-radius: 10px; width: 30%; left: 20%;}


.small-cover h2 {color: #136A92 !important; margin-top: 0;}
.small-cover p:first-child {font-size: 1.2em; text-transform: uppercase; color: #1E88A8;}


.arrow-right {position: relative; list-style: none;}
.arrow-right ul li {padding-left:0.5em;}

.arrow-right li::before {
	font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f061";
	color: #136A92;
    position: absolute;
    list-style: none;
    left:15px;
}

.leistungen {
	background-color: rgb(244, 241, 236, 0.8);
	padding: 1.5em;
	border-bottom-left-radius: 10px;
  	border-bottom-right-radius: 10px;
	margin-top: -4em;
}

.leistungen ul {position: relative; list-style: none;}
.leistungen ul li {padding-left:0.5em; line-height: 2em;}

.leistungen li::before {
	font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\e4fd";
	color: #136A92;
    position: absolute;
    list-style: none;
    left:15px;
}

.beige-tint {background-color: #F4F1EC;}



.cf_group p {margin: 0;}


.tel:before {
	font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f095";
	color: #136A92;
	margin-right:1em;
}

.fax:before {
	font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f1ac";
	color: #136A92;
	margin-right:1em;
}


.whatsapp:before {
	font-family: "Font Awesome 5 Brands"; font-weight: 900; content: "\f232";
	color: #136A92;
	margin-right:1em;
}

.mail:before {
	font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f0e0";
	color: #136A92;
	margin-right:1em;
}

/*
.vertikal-gradient {
  border-left: 10px solid; 
  border-image: linear-gradient(
    to bottom,  
    #6FBF44 0%,
    #6FBF44 25%,
    #1E88A8 25%,
    #1E88A8 50%,
    #FBC02D 50%,
    #FBC02D 75%,
    #E21C3D 75%,
    #E21C3D 100%
  ) 1;
}
*/

/* Footer */

footer {border-top: 5px solid;
border-image: linear-gradient(
  90deg,
  #6FBF44 0%,
  #6FBF44 25%,
  #1E88A8 25%,
  #1E88A8 50%,
  #FBC02D 50%,
  #FBC02D 75%,
  #E21C3D 75%,
  #E21C3D 100%
) 1;

background-color: #145c72;
color: #ffffff;
margin-top:0;
}

footer h2 {font-size: 2em; color: #ffffff;}
footer ul {list-style: none;}
footer ul li {padding: 0.5em;}
footer a {text-decoration: none; color: #ffffff;}

footer .impressum {background-color: #0c3744; padding: 0.5em;}

footer .cf_group {margin: 0 auto 2em auto !important; width: fit-content;}
footer .cf_group p {}

footer .tel:before {
	font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f095";
	color: #ffffff;
	margin-right:1em;
}

footer .mail:before {
	font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f0e0";
	color: #ffffff;
	margin-right:1em;
}

footer .whatsapp:before {color:white;}
footer .fax:before {color:white;}

footer .location:before {
	font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f3c5";
	color: #ffffff;
	margin-right:1em;
}



@media screen AND (max-width: 1100px) {
nav a {
  font-size: calc(var(--base-font-size) + 0em);
  padding: 4px 12px;
}

.logo {left:10px}

}

header > div, header > div > div {padding:5px 5px !important;}





@media screen AND (max-width: 1000px) {
.wp-container-core-columns-is-layout-8e62940e {
	gap:1em;
}

.wp-container-core-columns-is-layout-14cf5ab5 {
  flex-wrap: nowrap;
  gap: 2em;
}

}


@media screen AND (max-width: 920px) {



.subheadline {font-size: 1em;}

	h2 {
  color: #136A92;
  font-size: 1.8em;
}

.icons {flex-wrap: wrap !important; justify-content: center;}
.icons > div { min-width: 40%; flex-grow: 0 !important;}
}







/* Mobile-Menü bereits ab 900px */
@media (max-width: 900px) {
  .wp-block-navigation__responsive-container-open,
  .wp-block-navigation__responsive-container {
    display: block !important;
  }

  
  .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open {
    display: block !important;
  }

  /* Optional: Desktop-Menü ausblenden */
  .wp-block-navigation__container {
    flex-direction: column;
  }


	#modal-1::after {
		background-image: url('https://pflegeteam-dreilaendereck.de/wp-content/uploads/2025/12/Altenpflege-Dreilaendereck.png');
		background-size: cover;
		background-position: center;
		width:100%;
		height:100%;
		content:'';
		z-index:-1;
		position: absolute;
		left:0;
		top:0;
		opacity:1;
		filter:brightness(0.3)
		

	}

	#modal-1-content {width:100%;
		justify-content: center;
		align-items: center;
		align-content: center;
		flex-direction: column;
	}


	.wp-block-navigation__responsive-container-close svg {fill: white;}


#modal-1-content ul {justify-content: center !important; align-items: center;}
	#modal-1-content li {text-align: center; align-items: center !important; justify-content: center;}
	#modal-1-content a {color:white !important; font-size: calc(var(--base-font-size) + 1em);}



	.wp-block-navigation__responsive-container-open {padding:1em; background-color:#e27c1c; border-radius:10px;}

}




@media (max-width: 800px) {

	#modal-1-content > ul > li:last-child a {border-radius:10px; padding:10px;}


	.icons {flex-wrap: wrap !important; justify-content: center;}
.icons > .wp-block-column { min-width: 40%; flex-grow: 0 !important; flex-basis: 40% !important;}
	header img {width:120px;} .logo {border-radius: 10px; padding:5px; padding-top:20px; top:-6px;}
.small-cover .wp-block-cover__inner-container {width:60%}

#ueber-uns > div > div, #kontakt > div  {flex-direction: column-reverse;}
}


@media (max-width: 781px) {

  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: unset !important;
  }

.icons > .icon { width: 40%; flex-grow: 0 !important; flex-basis: 40% !important; padding:10px;}
}


@media (max-width: 600px) {
	 .small-cover .wp-block-cover__inner-container {
    width: 100%;
	left:0;
  }
	header img {width:80px;}
}


@media (max-width: 480px) {
	.leistungen {padding:10px;}
	  .icons > .icon {width: 100%;}
	.hero p:first-child {font-size:0.9em;}
	h1 {
		font-size:1.6em !important;

	}
	h3 {font-size: 1.2em; font-weight: bold;}


	footer h2 {font-size: 1.6em;}
	footer p {
		font-size: 0.8em;;
	}



	@media (max-width: 420px) {
		body {
			font-size:16px;
		}

}
}