/**
 *
 * Theme Name:        Steiner´s Edeka X MOLECO GmbH
 * Theme URI:         https://www.moleco.de
 * Description:       Dieses Theme wurde erstellt durch die MOLECO GmbH - Agentur für digitale Kommunikation
 * Version:           1.0.0
 * Author:            MOLECO GmbH
 * Author URI:        https://www.moleco.de
 * Tested up to:      6.8.1
 * Requires at least: 6.8.1
 * Requires PHP:      8.3.22
 *
 */

:root{
    --main: #212121 ;
    --sec: #FFE53A ;
    --button: #FFE53A;
    --buttonhover: #FFCC00;
    --white: #FFFFFF;
    --lightgray: #E9E9E9;
    --green: green;
    --red: red;
}

body,html,*{font-size:22px;line-height:1.3;font-family:'Roboto';font-weight:300;}
html{scroll-behavior: smooth;}

a{color:var(--main);text-decoration:underline;font-size:100%;transition:all .3s ease;}
a:hover{color:var(--sec);transition:all .3s ease;}

li{list-style:none;padding-left:30px;position:relative;}
li:before{content:'';width:7.5px;height:7.5px;display:block;background:var(--main);position:absolute;top:7.5px;left:0;border-radius:50%;}

ul{padding:0;margin:0;}

img{max-width:100%;height:auto;}

h1{font-size:575%;font-family:'Neue Plak Condensed';font-weight:900;}
h2{font-size:325%;font-family:'Neue Plak Condensed';font-weight:900;}
h3{font-size:225%;font-family:'Neue Plak Condensed';font-weight:900;}

.headline{display:block;color:var(--main);margin-bottom:25px;line-height:1;font-family:'Neue Plak Condensed';font-weight:900;}
.subline{font-size: 125%;display: block;margin-top: -15px;margin-bottom: 25px;}

.btn{position:relative;padding:8px 50px 10px 50px;font-size:100%;font-weight:900;font-family:'Neue Plak Condensed';background:var(--button);color:var(--main);transition:all .3s ease;line-height:1;text-align:center;text-decoration:none;border-radius:20px;margin-top:25px;}
.btn:hover{background:var(--buttonhover);transition:all .3s ease;color:var(--main);}

strong{font-weight:600;font-size:100%;}

.container{max-width:1640px;}
.container.wide{max-width:1850px;}

.mail, .telefon{padding-left:40px;font-weight:600;position:relative;}
.mail:before{content:'';display:block;width:30px;height:30px;background:url('media/mail.svg');background-size:100%;background-position:center;background-repeat:no-repeat;position:absolute;top:0;left:0;}
.telefon:before{content:'';display:block;width:30px;height:30px;background:url('media/telefon.svg');background-size:100%;background-position:center;background-repeat:no-repeat;position:absolute;top:0;left:0;}


.wpcf7-list-item{margin-left:0!important;}

input, select, textarea{width:100%;margin-bottom:15px;border:none;border-radius:5px;background:var(--lightgray);padding:10px 20px;}
input[type="checkbox"]{width:15px;height:15px;margin-right:5px;margin-bottom:0;}
input[type="submit"]{padding:8px 50px 10px 50px}
label{line-height:1;}
label span{font-size:85%;line-height:1;}
label a{font-size:100%;line-height:1;}

.modal .inner{position:fixed;background:var(--white);top:60px;z-index:99999999999;transform:translateX(-50%);left:50%;width:80%;max-width:650px;padding:35px 35px 10px 35px;}
.modal .inner a{color:var(--button);}
.modal button{border: none;background-color: var(--button);}
.modal .inner .popup-close{background:var(--button);color:var(--main);position:absolute;top:-15px;right:-15px;padding: 0px 15px;cursor:pointer;font-size:150%;font-weight:600;transition:all .3s ease;}
.modal .inner .popup-close:focus-visible{outline: auto;}
.modal .inner .popup-close:hover{background:var(--buttonhover);transition:all .3s ease;}
.modal_background{position:fixed;background:rgba(30,30,30,0.7);top:0;right:0;bottom:0;left:0;z-index:9999999999;}

/*------------------------------------Header-------------------------------------------------*/

#page-header{position:absolute;top:0;right:0;left:0;padding:0;background:var(--main);-webkit-box-shadow: 0px 10px 50px -35px rgba(0,0,0,0.5);-moz-box-shadow: 0px 10px 50px -35px rgba(0,0,0,0.5);box-shadow: 0px 10px 50px -35px rgba(0,0,0,0.5);z-index:9999;}

#page-header .logo img{max-height: 50px;}

#page-header .mainheader{padding:15px 0;}
#page-header .mainheader #toppermenu{height:100%;align-content:center;text-align:right;}
#page-header .mainheader #toppermenu .menu{position:unset;}
#page-header .mainheader #toppermenu .menu li{display:inline-block;padding:0;margin:0 50px;}
#page-header .mainheader #toppermenu .menu li:before{display:none;}
#page-header .mainheader #toppermenu .menu li a{text-decoration:none;position:relative;color:var(--white);font-family:'Neue Plak Condensed';font-weight:900;font-size:130%;transition:all .3s ease;}
#page-header .mainheader #toppermenu .menu li a:hover{color:var(--sec);transition:all .3s ease;}
#page-header .mainheader #toppermenu .menu li.btn{padding:0 50px 5px 50px;margin-right:0;margin-top:-5px;}
#page-header .mainheader #toppermenu .menu li.btn a{color:var(--main);}
#page-header .mainheader #toppermenu .menu li.btn a:before{display:none;}

#page-header .mainheader .burgerbutton{display:none;width:50px;height:auto;position:absolute;top:5px;right:35px;cursor:pointer;}
#page-header .mainheader .burgerbutton span{display:block;width:100%;height:3px;background-color:var(--white);}
#page-header .mainheader .burgerbutton span:nth-child(2){margin:10px 0;}

#page-header.bottom{padding:10px 0;position:fixed;top:0;left:0;right:0;background:var(--main);-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */              -moz-animation: fadein 2s; /* Firefox < 16 */-ms-animation: fadein 2s; /* Internet Explorer */-o-animation: fadein 2s; /* Opera < 12.1 */animation: fadein 2s;z-index:9999;}
#page-header.bottom .topheader{display:none;}
#page-header.bottom .logo img{max-width:50%;}
#page-header.bottom .mainheader{padding:0;}

@keyframes fadein {
    from { top: -150px; }
    to   { top: 0; }
}
@-moz-keyframes fadein {
    from { top: -150px; }
    to   { top: 0; }
}
@-webkit-keyframes fadein {
    from { top: -150px; }
    to   { top: 0; }
}
@-ms-keyframes fadein {
    from { top: -150px; }
    to   { top: 0; }
}


/*------------------------------------Footer-------------------------------------------------*/

#page-footer{background:var(--main);padding:25px 0;position:relative;z-index: 999;}
#page-footer .container{position:relative;}

#page-footer .main{margin:50px 0 100px;}
#page-footer .main .headline{color:var(--white);font-weight:900;font-size:150%;}
#page-footer .main .item p{color:var(--white);margin-bottom:10px;}

#page-footer .bottom .copyright{display:block;width:100%;}
#page-footer .bottom .copyright .copy{align-content:center;}
#page-footer .bottom .copyright .slogan{text-align:center;}
#page-footer .bottom .copyright .rechtliches{align-content:center;text-align:right;}
#page-footer .bottom .copyright span{display:inline-block;color:var(--white);font-size:75%;font-weight:300;text-decoration:none;transition:all .3s ease;}
#page-footer .bottom .copyright a{display:inline-block;color:var(--white);font-size:75%;font-weight:300;text-decoration:none;transition:all .3s ease;margin:0 15px;}
#page-footer .bottom .copyright a:last-child{margin-right:0;}
#page-footer .bottom .copyright a:hover{color:var(--sec);transition:all .3s ease;}
#page-footer .bottom .slogan img{width:200px;}

#page-footer .socials{position:absolute;top:0;right:0;}
#page-footer .socials a{display:block;margin:25px 0px;}
#page-footer .socials a:first-child{margin-top:0;}
#page-footer .socials a img{transition:all .3s ease;}
#page-footer .socials a:hover img{transform:scale(1.05);transition:all .3s ease;}

/*------------------------------------Kassenzettel Öffnungszeiten-------------------------------------------------*/

.kassenzettel_offnungszeiten{position:fixed;bottom:0;right:75px;width:350px;background:url('media/kassenbon_zacken.svg');background-size:100%;background-position:top left;background-repeat:no-repeat;padding-top:10px;box-shadow:0px 15px 10px 2px rgba(0,0,0,0.15);-webkit-box-shadow:0px 15px 10px 2px rgba(0,0,0,0.15);z-index:99;}
.kassenzettel_offnungszeiten .inner{padding:5px 15px 15px;;background:var(--white);}
.kassenzettel_offnungszeiten .inner .headline{font-size:175%;margin-bottom:0;cursor: pointer;position:relative;transition:all .6s ease;}
.kassenzettel_offnungszeiten .inner .headline:after{content:'';display:block;width:25px;height:25px;border-radius:50%;position:absolute;top:7.5px;right:0;}
.kassenzettel_offnungszeiten .inner .headline.open:after{background:var(--green);}
.kassenzettel_offnungszeiten .inner .headline.close:after{background:var(--red);}
.kassenzettel_offnungszeiten .inner .zeiten{height:0;opacity:0;transition:all .6s ease;}
.kassenzettel_offnungszeiten .inner .zeiten .item{margin-bottom:15px;}
.kassenzettel_offnungszeiten .inner .zeiten .item p{margin-bottom:0px;font-size:90%;}
.kassenzettel_offnungszeiten .inner.active .zeiten{height:325px;opacity:1;transition:all .6s ease;}
.kassenzettel_offnungszeiten .inner.active .headline{margin-bottom:25px;transition:all .6s ease;}

/*----------------------------------------Karriere Single---------------------------------------------------------*/

#karrieresingle .backbtn{position:fixed;bottom:50px;left:50px;z-index: 99;}

#karrieresingle .heroimage{height:900px;position:relative;}
#karrieresingle .heroimage:before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,rgba(33, 33, 33, 1) 0%, rgba(33, 33, 33, 0.80) 30%, rgba(33, 33, 33, 0) 75%);z-index:5}
#karrieresingle .heroimage img{height:100%;width:100%;object-fit:cover;object-position:top;}
#karrieresingle .heroimage .content{position:absolute;bottom:15%;max-width:55%;z-index:9;}
#karrieresingle .heroimage .content h1{color:var(--white);line-height:1}
#karrieresingle .heroimage .content h1 .gender{font-weight:900;line-height:1;font-family:'Neue Plak Condensed';font-size:50%;margin-left:5px;}
#karrieresingle .heroimage .content > span{display:inline-block;padding:5px 35px;border-radius:30px;background:var(--main);color:var(--white);margin-right:25px;}

#karrieresingle .inhaltswrapper{background:var(--lightgray);}
#karrieresingle .inhaltswrapper .content{align-content: center;padding-bottom:75px;}
#karrieresingle .inhaltswrapper .content .inhalt{margin:75px 0;}

#karrieresingle .inhaltswrapper .formular .inner{margin-top:-150px;background:var(--main);padding:50px;position:relative;z-index:99;margin-bottom:75px;}
#karrieresingle .inhaltswrapper .formular .inner .headline{color:var(--white);font-size:320%;}
#karrieresingle .inhaltswrapper .formular .inner input, #karrieresingle .formular .inner textarea{max-width:100%;width:100%;padding:5px 15px;border:none;margin-bottom:15px;border-radius:7px;}
#karrieresingle .inhaltswrapper .formular .inner select{background:var(--main);color:var(--white);width:100%;box-shadow:none;border:solid 1px var(--white);padding:5px 15px;margin:15px 0 35px;border-radius:7px;}
#karrieresingle .inhaltswrapper .formular .inner label{color:var(--white);max-width:100%;width:100%;line-height:1;}
#karrieresingle .inhaltswrapper .formular .inner a{color:var(--white);}
#karrieresingle .inhaltswrapper .formular .inner .wpcf7-form-control-wrap[data-name="datenschutz"] label span{font-size:85%;}
#karrieresingle .inhaltswrapper .formular .inner .wpcf7-form-control-wrap[data-name="datenschutz"] input{width:15px;height:15px;margin-right:5px;margin-bottom:0;}
#karrieresingle .inhaltswrapper .formular .inner input[type="submit"]{padding:8px 50px 10px 50px}