/*
Theme Name: Tagespflege Theme
Theme URI: https://www.pferdmenges.de
Author: Jan Pferdmenges
Author URI: https:/www.pferdmenges.de
Description: Custom Theme for Tagespflege am Stadtpark GmbH
Version: 1.0
License: Commercial
*/


/* FONTS

@import url('https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600;700&display=swap');
*/

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100..900&display=swap');



:root {
    --color-primary: #736834;
    --color-secondary: #c43e15;
    --color-lightblue: #E1E9F0;
	--color-lightgrey: #aaaaaa;
	--color-bg1: #ffffff;
	--color-bg2: #e6d8ca;
	--color-text: #404042;
	--color-headline: #022F59;
	--color-button: darkorange;
	--color-link: #022F59;
	--color-hover: #FF8000;
	--color-line: #444;
	--color-shadow: #444;
    
    
    --bs-padding: 16px;
}



/* open sans condensed - 700 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Open Sans Condensed';
  font-style: bold;
  font-weight: 700;
  src: url('fonts/OpenSans-CondBold-webfont.woff') format('woff'); 
}

html {padding: 0; margin:0; font-size: 16px; background: white;  height: 100%;}
body {padding: 0; margin:0; font-family: "Raleway", sans-serif; font-optical-sizing: auto; font-weight: 400; line-height: 1.6em;  color: var(--color-text);}
h1,h2 { color: var(--color-headline); line-height: 1.1em; font-family: "Open Sans Condensed", sans-serif; font-weight: 700;text-transform: uppercase;}
h1:first-child, h2:first-child { margin-top:0; }
h1 {font-size: 4rem;}
h2 {font-size: 3rem;}
h3 {color: var(--color-headline); line-height: 1.1em; font-weight: 700; font-size: 1.3rem;}
p {margin-bottom: 0.5rem;}
div {box-sizing: border-box;}

/*
**		TopBar und Primary Navigation
*/


#Topbar {position: relative; color:white; background-color: var(--color-primary); height: 80px; } 
#Topbar .logo {width: 250px; height: auto; display: block;}
#Topbar > div {display: flex; justify-content: space-between; height: 100%; align-items: center; }

/* #Topbar > div > div {align-self: flex-end;} */

#Menu { }
#Menu > ul {display: flex; justify-content: flex-end; list-style: none; padding-bottom: 10px; margin: 0; padding: 0;}
#Menu > ul > li {margin-left: 15px;}
#Menu a {color: white; text-decoration: none;}


#Topbar nav {display:flex;}
/*
#MenuIcon {display: flex; align-items: center;}
#MenuIcon img {width: 50px; height: auto;}
#MenuIcon img.navWhite {display: none;}
#MenuIcon span {margin-left: 10px;}
#MenuCheckBox {display: none;}

#Topbar {position: relative; color:white; background-color: var(--color-primary);  } 
#Topbar > div {display: flex; justify-content: space-between; align-items: center; padding: 15px 15px 15px 15px; height: 85px; } 
#Topbar > span {display: inline-block; position: absolute; bottom: 0; right: 0; padding: 5px 15px; color: white; background-color: rgba(2,47,89,.7); border-radius: 8px 0 0 8px; transform: translateY(60%); font-weight: 600; z-index: 10;}
#JhpMenu {position: relative; z-index: 10;}
#JhpMenu > span {position: fixed; top: 0; left: 0;width: 0; height: 100%; background-color: rgba(0,0,0,0.7); z-index: 00; opacity: 0; display: block; transition: opacity 500ms;}
#MenuCheckBox:checked ~ #JhpMenu > span {opacity: 1; width: 100%; }
#JhpMenu > div {position: fixed; top:0; left: 0; width: max(250px,40vw); height: 100%; display: flex; align-items: center; z-index: 1; background-color: white; transform: translateX(-100vw);  transition-duration: 1000ms;}
#JhpMenu > div::after {content: ''; position: absolute; top:0; right: -4.85vh; width: 5vh; height: 100%; background: url("img/menurand.svg"); background-size: contain; background-position: left center; background-repeat: no-repeat;}
#MenuCheckBox:checked ~ #JhpMenu > div {transform: translateX(0);}
#JhpMenu > label {position: fixed; z-index: 2; top:50%; left: calc(max(250px,40vw) + 5vh); transform: translate(-50%,-50%) translateX(-100vw); transition-duration: 1000ms;}
#JhpMenu > label > img {width: 50px; height: auto; display: block;}
#MenuCheckBox:checked ~ #JhpMenu > label { transform: translate(-50%,-50%);}

#JhpMenu > div > ul {margin: 0; padding: 0; list-style: none; display: block; width: 100%;}
#JhpMenu > div > ul a {color: var(--color-blau); text-decoration: none; transition: 300ms; display: inline-block; width: 100%;}
#JhpMenu > div > ul a:hover {color: var(--color-hover); }
#JhpMenu > div > ul > li {padding: 0 0 0 7px; border-left: 8px solid white;}
#JhpMenu > div > ul > li.current-menu-item {border-left-color:var(--color-green);}
#JhpMenu > div > ul > li > a {font-weight: 600; padding: 8px 0; }

*/


/*
**		Footer
*/


footer {padding: 150px 0; background-color: var(--color-primary); color: white; font-size: 0.85rem}
footer .kontaktbezeichnung {display: inline-block; min-width: 60px;}
footer img.footerLogo {display: block; width: 200px; height: auto;}
footer .trenner {border-top: 1px solid; margin-top: calc(2* var(--bs-padding)); margin-bottom: calc(5px - var(--bs-padding)); }
footer nav ul {padding: 0; margin:0; list-style: none; display: flex; flex-direction: column; align-items: flex-end;}
footer nav ul > li {margin-bottom: 15px; text-transform: uppercase; }
footer a {color: white; text-decoration: none;}
footer a:hover {color: lightblue;}
footer .footerSocial {display: flex; justify-content: flex-end;}
footer .footerSocial img {display: block; width: auto; height: 25px; transition-duration: 500ms;}
footer .footerSocial img:hover {transform: scale(1.15);}
footer .footerSocial > a:not(:first-child) {margin-left: 10px;}
footer .icon {padding-left: 30px; position: relative; padding-bottom: 10px;}
footer .icon img {position: absolute; top:0; left:-30px;}
.oeffnungszeitenTag {display: inline-block; width: 95px;}
.jhpOeffnungszeiten .smallHeadline {font-weight: 700; font-size: 1.25em;margin-bottom: 10px;}


/*
**		Cookie-Banner
*/

#JhpCookieBanner {position: fixed; bottom:0; width: 90%; z-index: 10; left: 5%; background-color: #444; color: white; border-radius: 15px 15px 0 0; padding: 15px; display:flex; justify-content: space-between; transition: 500ms; transform: translateY(100%);}
#JhpCookieBanner.active {transform: translateY(0); transition-delay: 1500ms;}

#JhpCookieBanner .cookieButton {margin-left: 15px; display: block; background-color: var(--color-button); padding: 5px 20px; border-radius: 5px; cursor: pointer; transition-duration: 300ms}
#JhpCookieBanner .cookieButton:hover {transform: scale(1.05);}
#JhpCookieBanner a {color: var(--color-button);}



/*
**		Kontaktformular
*/

.inputFeld {margin-bottom: 20px; position: relative; border-bottom: 1px solid var(--color-lightgrey); padding: 8px 0px 0 0px;}
.inputFeld.activeInput {border-bottom-color:  var(--color-primary);}
.inputFeld label {position:absolute; top: 10px; color: #b0b0b0; left: 1px; transition-duration: 300ms; font-weight: 400;}
.inputFeld.filled label {position:absolute; top: -8px; font-size: 13px;}
.inputFeld input, .inputFeld textarea {width: 100%; outline: none; font-family: 'Raleway', sans-serif; font-size: 1rem; font-weight: 600; border: none; color: var(--color-lightgrey); padding-bottom: 0;}
.inputFeld.activeInput input, .inputFeld.activeInput textarea, .inputFeld.activeInput label {color: var(--color-primary);}
.inputFeld textarea {height: 150px;}

.checkbox {margin-bottom: 20px;}

.checkbox label {padding-left: 30px; position: relative;}
.checkbox label::before {content: url("img/checkboxOff.png"); position: absolute; left: 0; top: -2px;}
.checkbox input {display: none;}
.checkbox input:checked ~ label::before {content: url("img/checkboxOn.png");}

input[type=submit] {border-radius: 15px; background-color: var(--color-button); display: inline-block; color: white; padding: 10px 25px; transition-duration: 300ms; border:none; font-weight: 700; font-size: 1rem;}
input[type=submit]:hover {background-color: orange;  transform: translateY(-2px);}

.errorBox {background-color: #D10014; color: white; padding: 15px; margin-bottom: 20px; border-radius: 15px;}
.infoBox {color: #D10014; padding: 15px; margin-bottom: 20px; border: 1px solid #D10014;border-radius: 15px;}
.error {padding-left: 30px; color: #993300; position: relative; margin-top:30px;}
.error::before {content: url("img/fehler.png"); position: absolute; left:0;top:2px;}

.contactBar a {font-weight: 400;}
.contactBar { margin-bottom: 75px;}



/*
.inputFeld {border: 2px solid #e6e6e6; border-radius: 12px; position: relative; margin-bottom: 30px; transition: border 500ms; background-color: white;}
.inputFeld input, .inputFeld textarea { width: 100%; box-sizing: border-box; padding: 10px; font-size: 18px; color: #333; border:none; background-color: transparent; outline: none;  font-family: 'Merriweather Sans', sans-serif; font-weight: 400;}
.inputFeld textarea {height: 160px;}
.inputFeld label { font-size: 18px; line-height: 18px; font-size: 1rem; color: #aaa; position: absolute; padding: 15px 10px; transition: 300ms; font-weight: 400; z-index: 0;}
.inputFeld.pflichtangabe label::after {content: '*'; margin-left: 2px; }
.inputFeld.filled { border-color: #e6e6e6;}
.inputFeld.filled input, .inputFeld.filled Textarea { padding: 15px 10px 5px 10px; }
.inputFeld.filled label { font-size: 12px; padding: 0 10px;}
.inputFeld.error {border-color: #fcc;} 
.inputFeld.activeInput, inputFeld.activeInput.error {border-color: var(--color-green);}
.inputFeld.activeInput input, .inputFeld.activeInput textarea {color: var(--color-green);}
label.checkbox {position: relative; padding-left: 30px; margin-bottom: 30px; font-weight: 400;}
label.checkbox::before{content: url(img/checkboxOff.png); position: absolute; top: 2px; left:0;}
input.checkbox {display:none;}
input.checkbox:checked + label.checkbox::before{content: url(img/checkboxOn.png);}
.selectFeld {margin-bottom: 30px;}
.selectFeld select {width: 100%; font-size: 18px; padding: 10px; border-radius: 12px; border: 2px solid #e6e6e6; background-color: white;}
.selectFeld select.error {border-color: #fcc;}
.errorBox {background: red; color: white; padding: 15px; border-radius: 15px;margin-bottom: 30px; font-weight: 600;}
.errorMessage {padding: 10px; color: red;}
.messageBox {background: var(--color-green); color: white; padding: 15px; border-radius: 15px;margin-bottom: 30px; font-weight: 600;}

.iconContact img {width: 70px; height: auto;}
.contactIconBox {text-align: center;}
.contactIconBox:not(:first-child) {margin-top: 50px; text-align: center;}
#contactItems {margin-bottom: 70px;}
*/




/*
**		weitere Elemente
*/

.majuskeln {text-transform: uppercase;}
.infoBox100 .wp-block-kadence-column {height: 100%; }
.infoBox100 .kt-inside-inner-col {height: 100%; }
.desktop {display: none;}
.width200px {width:200px!important;}






/*
**
**      RESPONSIVE
**
*/


@media (min-width: 768px) {

	.desktop {display: inline;}
    .mobile {display: none;}
}

@media (min-width: 1024px) {


    
}