/*
 Theme Name:   GeneratePress Child CVE
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Template:     generatepress
 Version:      1.0
*/

@import url('fonts.css');

/* ---------- VARIABLES ---------- */
:root {
    --primary-clr: #2708A4;
    --secondary-clr: #E4AE1E;
    --cta-clr: #8ac122;
	--darker-cta-clr: #77ab14;
}

/* ---------- BASICS ---------- */
body {
    overflow-x: hidden;
    background-color: #fff;
    font-size: 1.1rem;
  	color: #434343;
}
.fullwidth {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    padding-top: 4em;
    padding-bottom: 4em;
    padding-left: 40px;
    padding-right: 40px;
}
.fullwidth-dark {
    background: #eee;
}
.fullwidth-light {
    background: #fff;
}
.inside-header {
    padding: 5px 40px;
}


/* .... TEXT .... */
h1, h2, h3 {
	font-family: "PT Sans", sans-serif;
	font-weight: 600;
}
h1 {
	font-size: 2.2rem;
    margin-bottom: 1.9rem;
    hyphens: auto;
    -webkit-hyphens: auto;
    color: var(--primary-clr);
}
h2 {
	font-size: 1.8rem;
    margin-bottom: 1.6rem;
    color: var(--primary-clr);
}
h1 + h2 {
    margin-top: -1.2rem;
    margin-bottom: 3rem;
    color: var(--primary-clr);
    font-weight: 500;
    font-size: 1.4rem;
}
h3 {
	font-size: 1.6rem;
	margin-bottom: 1.25rem;
    color: var(--secondary-clr);
}
h3 + h4 {
    color: var(--primary-clr);
    font-size: 1.2rem;
}
body:not(.page-id-3) h2 + h3 {
    margin-top: -1.2rem;
    margin-bottom: 3rem;
    color: var(--primary-clr);
    font-weight: 500;
    font-size: 1.15rem;
}
p {
    margin-bottom: 1rem;
    margin-right: auto;
    line-height: 1.65rem;
    color: #434343;
}
.yellow {
    color: var(--secondary-clr);
}
main .entry-content p, 
main .entry-content ul, 
main .entry-content ol {
    max-width: 900px;
    margin-right: auto;
}
main .entry-content ul {
	padding-left: 20px;
}
main .entry-content li {
	margin-bottom: 15px;
}
main a {
	color: var(--cta-clr);
    font-weight: 600;
}
a:hover {
	text-decoration: none;
	color: var(--darker-cta-clr);
}
b, strong {
    font-weight: 600;
}

@media (min-width: 768px) {
    h1 {
        font-size: 2.7rem;
        margin-bottom: 2rem;
    }
}
/* .... BUTTONS .... */
.button,
.btn,
input[type=submit],
a.wp-block-button__link:not(.has-background) {
	padding: 7px 20px;
    margin-top: 1em;
	background: var(--cta-clr);
	display: inline-block;
	color: #fff;
    border-radius: 0;
    margin-bottom: 2em;
}
.button:hover,
.btn:hover,
.button:focus,
.btn:focus,
a.wp-block-button__link:not(.has-background):hover {
	background: var(--darker-cta-clr);
    color: #fff;
}
.fullwidth a.wp-block-button__link:not(.has-background) {
    margin-bottom: 0;
}
.wp-block-lazyblock-leistungskacheln ~ .wp-block-buttons a.wp-block-button__link:not(.has-background) {
    margin-top: 3em;
}


/* .... OTHER .... */
img {
  	max-width: 100%;
  	height: auto; 
}
.wpcf7 .note {
	margin-top: 30px;
	font-style: italic;
	font-size: 0.9em;
    opacity: 0.7;
}

/* .... HEADER .... */
#keyvisual img {
	width: 100%;
}

/* .... NAVIGATION .... */
.main-navigation .main-nav ul li a {
    font-size: 20px;
    font-family: "Quicksand",sans-serif;
    font-weight: 500;
}
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
    color: var(--primary-clr);
}
.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a {
    color: var(--secondary-clr);
}
.site-header .site-branding {
    display: none;
}
main-navigation li:first-child a {
    padding-left: 0;
}

.main-navigation .dropdown-menu-toggle {
    display: none;
}
.main-navigation li.menu-item-has-children a,
.main-navigation .main-nav ul li.menu-item-has-children>a{
    padding-right: 20px;
}
.main-navigation ul.sub-menu li:hover a,
.main-navigation .main-nav ul ul li:not([class*="current-menu-"]):hover > a {
    color: var(--secondary-clr);
}
.main-navigation .main-nav ul ul li[class*="current-menu-"] > a {
    color: var(--primary-clr);
}

.main-navigation .menu-toggle {
    background: transparent;
}
.main-navigation .menu-toggle .icon-menu-bars {
    font-size: 2em;
}
.main-navigation .menu-toggle svg {
    padding-top: 8px;
}

@media (max-width: 768px) {
    .main-navigation .dropdown-menu-toggle {
        display: block;
    }
}


/* .... KEYVISUAL .... */
#keyvisual {
  position: relative;
}
#keyvisual:after {
    position: absolute;
    bottom: -35px;
    left: 0;
    right: 0;
    display: block;
    content: '';
    height: 10px;
    background: var(--secondary-clr);
}
#keyvisual .flexbox {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: -ms-flexbox!important;
    display: flex!important;
}
#keyvisual .flexbox .grid-container {
    display: flex;
    width: 100%;
    /*padding: 0 30px;*/
}
@media (min-width:769px) {
    #keyvisual .flexbox .grid-container {
        /*padding: 0 40px;*/
    }
}

/* box vertical center */
#keyvisual .flexbox.box-left,
#keyvisual .flexbox.box-right,
#keyvisual .flexbox.box-center {
    -ms-flex-align: center!important;
    align-items: center!important;
}
/* box left */
#keyvisual .flexbox.box-left .grid-container {
    justify-content: flex-start;
}
/* box right */
#keyvisual .flexbox.box-right .grid-container {
    justify-content: flex-end;
}
/* box center */
#keyvisual .flexbox.box-center .grid-container {
    justify-content: center;
}

#keyvisual img {
    width: 100%;
    display: block;
}
#keyvisual > div:not(.box-below) .textbox {
  width: 400px;
  background: rgba(255,255,255,0.7);
}
@media (max-width:767px) {
  #keyvisual div:not(.box-below) .textbox {
    display: none;
  }
}
#keyvisual .text {
  padding: 20px;
  font-size: 1rem;
}
#keyvisual h1,
#keyvisual h2,
#keyvisual h3,
#keyvisual h4 {
  margin: 0;
  padding: 7px 20px;    
  background: #fff;
  color: #555;
  font-weight: 400;
}
#keyvisual h1 {
  font-size: 3rem;
}
#keyvisual h2 {
  font-size: 2.6rem;
}
#keyvisual h3 {
  font-size: 2.2rem;
}
#keyvisual h4 {
  font-size: 2rem;
}

/* textbox als Banner */
#keyvisual {
    position: relative;
    border-bottom: 20px solid var(--primary-clr);
}
#keyvisual .flexbox.box-below {
	position: relative;
	top: inherit;
	right: inherit;
	bottom: inherit;
	left: inherit;
	background: #55c1cc;
}
#keyvisual .box-below .textbox {
	width: 100%;
	padding: 20px 0 20px;
    text-align: center;
}
#keyvisual .box-below h3 {
	padding: 0;
	margin-bottom: 10px;
	background: none;
	text-align: center;
	font-size: 2rem;
}
#keyvisual .box-below .text {
	padding: 0;
	background: transparent;
	color: #fff;
	font-size: 1.5rem;
}
#keyvisual .box-below p {
	margin-bottom: 0;
}


/* .... badge (noch nicht im Template integriert) .... */
#keyvisual .badge {
    position: absolute; 
    padding: 0;
    color: #fff;
    white-space: normal;
    hyphens: auto;
    line-height: 1.6rem;
    font-size: 1.2rem;
}
#keyvisual .badge-right {
    top: -10px;
    right: 5%;
    transform: rotate(8deg);
}
#keyvisual .badge-left {
    top: -10px;
    left: 5%;
    transform: rotate(-8deg);
}
#keyvisual .badge-rightbottom {
    bottom: -40px;
    right: 5%;
    transform: rotate(8deg);
}
#keyvisual .badge-leftbottom {
    bottom: -40px;
    left: 5%;
    transform: rotate(-8deg);
}
#keyvisual .badge p {
    margin: 0;
    line-height: 1.8rem;
}
#keyvisual .badge span,
#keyvisual .badge a:link, 
#keyvisual .badge a:visited {    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;    
    width: 140px;
    height: 140px;
    border-radius: 70px;
    background: #56ada0;
    color: #fff;
    padding: 1.2rem;
}

@media (min-width:768px) {
    #keyvisual .badge {
        line-height: 1.8rem;
        font-size: 1.35rem;
    }
    #keyvisual .badge span,
    #keyvisual .badge a:link, 
    #keyvisual .badge a:visited {  
        width: 150px;
        height: 150px;
        border-radius: 75px;
    }
}
@media (min-width:1600px) {
    #keyvisual .badge-right {
        top: -20px;
        right: 15%;
    }
    #keyvisual .badge-left {
        top: -20px;
        left: 15%;
    }
    #keyvisual .badge-rightbottom {
        right: 15%;
    }
    #keyvisual .badge-leftbottom {
        left: 15%;
    }
}

/* ... keyvisual logo .... */
#keyvisual .keyvisual-logo {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 1140px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}
@media (max-width: 1180px) {
    #keyvisual .keyvisual-logo {
        padding: 0 40px;
    }
}


/* .... CONTENT .... */
/* lazyblock: fullwidth */
.fullwidth .grid-container {
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
    /*padding: 20px 40px 20px 40px;*/
}
/* lazyblock: kacheln */
.leistungskacheln .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    padding: 10px 0;
}
.leistungskacheln .kachel h3 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background: #fff;
    padding: 35px 20px;
    margin: 0;
    text-align: center;
    box-shadow: 3px 3px 5px rgb(0 0 0 / 15%);
    font-weight: 600;
    color: var(--primary-clr);
    font-size: 1.3rem;
    font-family: 'Quicksand', sans-serif;
}
.leistungskacheln .kachel h3:hover {
    background: #f3f3f3;
}
h2 ~ .wp-block-lazyblock-leistungskacheln {
    margin-top: 3rem;
}
@media (max-width: 950px) {
    .leistungskacheln .grid-container {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 768px) {
    .leistungskacheln .grid-container {
        grid-template-columns: 1fr;
    }
}

/* columns */
@media (max-width: 800px) {
    .entry-content .wp-block-columns {
        flex-wrap: wrap !important;
    }
    .entry-content .wp-block-columns .wp-block-column {
        flex-basis: 100% !important;
    }
    .entry-content .wp-block-columns .wp-block-column:last-child {
        margin-left: 0;
        margin-top: 2em;
    }
}

/* .... Youtube DSGVO .... */
a.youtube-dsgvo {
    position:relative;
    display:block; 
}
a.youtube-dsgvo img {
    width: 100%;
}
a.youtube-dsgvo .text-wrap {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: 
    rgba(25,25,25,.8);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    text-align: center;
    z-index: 10;
    opacity: 0;
}
a.youtube-dsgvo:hover .text-wrap {
    opacity: 1;
}
a.youtube-dsgvo .text-wrap p {
    font-size: 16px;
    color: #fff;
}
.youtube-dsgvo {
	font-size: 16px;
}

/* .... kontaktformular .... */
.kontaktformular {
    width: 100%;
    background: #f3f3f3;
    padding: 25px;
}
.kontaktformular .row {
    display: flex;
    justify-content: space-between;
    width: 100%
}
.kontaktformular .row p {
    width: 49%;
    padding-bottom: 0;
}
.kontaktformular p {
    color: var(--primary-clr);
    font-size: 1.1em;
    font-weight: 400;
    display: flex;
}
.kontaktformular p label {
    font-size: 1em;
    font-weight: 400;
    color: #434343;
    flex: 0 0 25%;
    max-width: 25%;
    align-self: center;
}
.kontaktformular span.wpcf7-form-control-wrap {
    flex: 0 0 75%;
    max-width: 75%;
}
.kontaktformular p input[type="text"],
.kontaktformular p input[type="tel"],
.kontaktformular p input[type="email"] ,
.kontaktformular p input[type="submit"] {
    width: 100%;
}
.kontaktformular input[type="text"],
.kontaktformular p input[type="tel"],
.kontaktformular [type="email"],
.kontaktformular textarea {
    border: none;
    background-color: #fff;
}
.kontaktformular .dsgvo-check .wpcf7-list-item {
    margin-left: 0;
}
.kontaktformular .dsgvo-check a {
    padding-right: 0;
}
.kontaktformular .datenschutz-link:before,
.kontaktformular .datenschutz-link:after {
    display: none;
}
.kontaktformular .submit-button {
    width: 30%;
}
.kontaktformular .submit-button input[type="submit"] {
    background-color: var(--cta-clr);
}
.kontaktformular .submit-button input[type="submit"]:hover {
    background-color: var(--darker-cta-clr);
}
.kontaktformular .pflichtfelder span {
    font-size: .8em;
    opacity: .7;
}

@media (max-width: 768px) {
    .kontaktformular .row {
        display: block;
    }
    .kontaktformular .row p {
        width: 100%
    }
    .kontaktformular {
        padding-bottom: 2em;
    }
}
@media (max-width: 500px) {
    .kontaktformular .submit-button {
        width: 100%;
    }
}

/* .... footer .... */
#footer-widgets p {
    font-size: 1rem;
}
#footer-widgets .inside-footer-widgets {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
}
.inside-footer-widgets .footer-widget-1 {
    grid-column: 1/4;
    grid-row: 1/2;
}
.footer-widget-1 img {
    max-width: 450px;
    margin: 1.5rem auto 2rem;
    display: flex;
    justify-content: center;
}
.inside-footer-widgets .footer-widget-2 {
    grid-column: 1/2;
    grid-row: 2/3;
}
.footer-widget-2 .footer-contact .adresse,
.footer-widget-2 .footer-contact .contact {
    display: flex;
}
.footer-widget-2 .footer-contact .adresse {
    margin-bottom: 20px;
}
.footer-widget-2 .footer-contact i {
    color: var(--secondary-clr);
    font-size: 27px;
}
.footer-widget-2 .footer-contact i.fa-map-pin {
    margin-right: 15px;
    margin-left: 5px;
}
.footer-widget-2 .footer-contact i.fa-address-book {
    margin-right: 10px;
}
.footer-widget-2 .footer-contact a {
    color: #555;
}
.footer-widget-2 .footer-contact a:hover {
    color: var(--darker-cta-clr);
}
.inside-footer-widgets .footer-widget-3 {
    grid-column: 2/4;
    grid-row: 2/3;
}
.footer-widget-3 .footer-text {
    display: flex
}
.footer-widget-3 .footer-text img {
    margin-left: 20px;
    max-width: 60px;
    height: auto;
    object-fit: contain;
    align-self: flex-start;
}
@media (max-width: 768px) {
    #footer-widgets .inside-footer-widgets {
        grid-template-columns: 1fr;
    }
    .inside-footer-widgets .footer-widget-2 {
        grid-column: 1/4;
        grid-row: 2/3;
        margin-left: auto;
        margin-right: auto;
    }
    .inside-footer-widgets .footer-widget-3 {
        grid-column: 1/4;
        grid-row: 3/4;
    }
    .footer-widget-3 .footer-text {
        flex-direction: column;
    }
    .footer-widget-3 .footer-text img {
        margin-top: 2em;
        margin-left: auto;
        margin-right: auto;
    }
    
}

.site-info {
    background: #555;
}
.site-info .inside-site-info {
    padding: 10px 0;
}


/* .... PRINT STYLES .... */
@media print {
    #keyvisual,
	.main-navigation,
	#mobile-menu-control-wrapper,
	.site-navigation,
	.primary-menu,
	.must-have {
        display: none;
    }
	body, h1, h2, h3, h4, p, ul, li, a {
		color: #444 !important;
	}
}