/**
 *
 * Theme Name:        Feinwerk Dorsten X Hanseranking GmbH
 * Theme URI:         https://www.hanseranking.de/
 * Description:       Dieses Theme wurde erstellt durch die Hanseranking GmbH - Online-Marketing-Agentur in Hamburg. 
 * Version:           1.0.0
 * Author:            Hanseranking GmbH
 * Author URI:        https://www.hanseranking.de/
 * Tested up to:      6.8.1
 * Requires at least: 6.8.1
 * Requires PHP:      8.3.22
 *
 */

:root{
    --main: #304322 ;
    --sec: #34312E ;
    --white: #FFFFFF;
    --lightgray: #F7F7F7;
    --white-hover: #D5D2CA;
}

body,html,*{font-size:18px;line-height:1.5;font-family:'Montserrat';font-weight:300;}
html{scroll-behavior: smooth;}
main{background:var(--sec)}

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:20px;margin:10px 0;position:relative;}
li:before{content:'';width:10px;height:20px;display:block;background:url('media/arrow-right.svg');background-size:contain;background-position:center;background-repeat:no-repeat;position:absolute;top:2px;left:0;border-radius:50%;}

ul{padding:0;margin:25px 0;}

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

h1{font-size:300%;display:block;width:max-content;position:relative;color:var(--main);margin:0;line-height:1;}
h2{font-size:225%;display:block;color:var(--main);margin:0;line-height:1;}
h3{font-size:125%;display:block;color:var(--main);margin:0;line-height:1;}

.topline{font-size:100%;font-weight:600;text-transform:uppercase;display:block;color:var(--sec);margin-bottom:0;max-width:100%;}
.headline{font-weight:400;text-transform:uppercase;display:block;color:var(--main);margin-bottom:50px;line-height:1;max-width:100%;}
.headline b{font-size:100%;font-weight:600;}
.subline{font-size:160%;font-weight:300;display:block;color:var(--sec);margin-bottom:25px;max-width:100%;}


.btn{position:relative;padding:10px 50px;font-size:100%;font-weight:600;background:var(--main);color:var(--white);transition:all .3s ease;line-height:1;text-align:center;text-decoration:none;text-transform:uppercase;border-radius:5px;}
.btn:hover{background:var(--white);transition:all .3s ease;color:var(--main);}

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

.container{max-width:1400px;}
.container.wide{max-width:1650px;}
.container.res{position: relative;}

.telefon:before{content:'';display:block;width:15px;height:15px;background:url('media/phone.svg');background-size:100%;background-position:center;background-repeat:no-repeat;position:absolute;left:0;top:50%;transform:translateY(-50%);}
.mail:before{content:'';display:block;width:15px;height:15px;background:url('media/mail.svg');background-size:100%;background-position:center;background-repeat:no-repeat;position:absolute;left:0;top:50%;transform:translateY(-50%);}

.spruch{color:var(--main);font-family: 'Homemade Apple';font-size:140%;position:absolute;}
.spruch.wrapper{top: 50%;left: -30%;transform: translateY(-50%) rotate(-10deg);width: 45%;text-align: center;z-index:99;}
.spruch.wrapper:before{content:'';display:block;width:40px;height:40px;background:url('media/arrow-spruch-green.svg');background-position:center;background-size:100%;background-repeat:no-repeat;position:absolute;bottom:-35%;right:10%;}
.spruch.slide{color:var(--white-hover);bottom: -10%;right: -30%;transform: translateY(-50%) rotate(-10deg);width: 70%;text-align: center;z-index:99;}
.spruch.slide:before{content:'';display:block;width:40px;height:40px;background:url('media/arrow-spruch-gray.svg');background-position:center;background-size:100%;background-repeat:no-repeat;position:absolute;top:-40%;right:25%;}
.spruch.standort{color:var(--white);bottom: -25%;right: 30%;transform: translateY(-50%) rotate(-10deg);width: 25%;text-align: center;z-index:99;}
.spruch.standort:before{content:'';display:block;width:40px;height:40px;background:url('media/arrow-spruch-white.svg');background-position:center;background-size:100%;background-repeat:no-repeat;position:absolute;bottom:-60%;right:25%;}

.modal .inner{position:fixed;background:var(--white);top:60px;z-index:99998;transform:translateX(-50%);left:50%;width:80%;max-width:600px;max-height:calc(100vh - 120px);overflow:scroll;padding:0;}
.modal .inner p{margin-bottom:0;}
.modal .inner a{color:var(--main);}
.modal button{border: none;background-color: var(--sec);font-size:200%;font-weight:600;padding:0 15px;}
.modal .inner .popup-close{background:var(--sec);color:var(--white);position:absolute;top:0;right:0;padding: 0px 15px;cursor:pointer;transition:all .3s ease;}
.modal .inner .popup-close:hover{background:var(--white-hover);color:var(--sec);transition:all .3s ease;}
.modal .inner .popup-close:focus-visible{outline: auto;}
.modal_background{position:fixed;background:rgba(30,30,30,0.7);top:0;right:0;bottom:0;left:0;z-index:99997;}

.reservierung{position:absolute;bottom:-150px;height:300px;max-width:100%;background:url('media/reservierung_background.svg');background-size:100%;background-repeat:no-repeat;background-position:center;z-index:999;align-content: center;padding: 0 75px;}
.reservierung .textwrapper .headline{margin-bottom:15px;color:var(--white);font-size:175%;font-weight:600;}
.reservierung .textwrapper .inhalt{color:var(--white);margin-bottom:0;}
.reservierung .buttonwrapper{align-content:center;}
.reservierung .buttonwrapper .btn{background:var(--white);color:var(--sec);line-height:1.2;}
.reservierung .buttonwrapper .btn:hover{background:var(--white-hover);color:var(--sec);}

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

#page-header{position:absolute;top:0;right:0;left:0;padding:20px 0;z-index:9999;}
#page-header:before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;  background:linear-gradient(180deg,rgba(52, 49, 46, 1) 0%, rgba(52, 49, 46, 0) 100%);mix-blend-mode: multiply;pointer-events: none;}

#page-header .logo{display:block;height:100%;align-content:center;}

#page-header .topheader{padding:0;text-align:right;}
#page-header .topheader a{color:var(--white);text-decoration:none;padding-left:25px;margin-left:25px;position:relative;font-size:85%;font-weight:500;}
#page-header .topheader a:hover{color:var(--white-hover);}
#page-header .topheader .telefon:before{background:url('media/phone-weiss.svg');background-size:100%;background-position:center;background-repeat:no-repeat;}
#page-header .topheader .mail:before{background:url('media/mail-weiss.svg');background-size:100%;background-position:center;background-repeat:no-repeat;}
#page-header .topheader.mobile{display:none;}

#page-header .mainheader #toppermenu{text-align:right;}
#page-header .mainheader #toppermenu .menu{position:unset;}
#page-header .mainheader #toppermenu .menu li{display:inline-block;margin:0;padding:0 30px;position:relative;}
#page-header .mainheader #toppermenu .menu li:last-child{padding-right:0;margin-right:0;}
#page-header .mainheader #toppermenu .menu li:before{width:1px;height:30px;background:var(--white);top:50%;transform:translateY(-50%);border-radius:0;}
#page-header .mainheader #toppermenu .menu li:first-child:before{display:none;}
#page-header .mainheader #toppermenu .menu li a{padding:0;text-decoration:none;position:relative;color:var(--white);text-transform:uppercase;font-weight:500;}
#page-header .mainheader #toppermenu .menu li a:hover, #page-header .mainheader #toppermenu .menu li.current-menu-item a{color:var(--white-hover);}

#page-header .mainheader #toppermenu .menu li.btn{padding:10px 25px;background:var(--white);}
#page-header .mainheader #toppermenu .menu li.btn:hover{background:var(--white-hover);}
#page-header .mainheader #toppermenu .menu li.btn a{color:var(--sec);}
#page-header .mainheader #toppermenu .menu li.btn:before{display:none;}

#page-header.bottom{padding:0;position:fixed;top:0;left:0;right:0;-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:before{background:var(--sec);}
#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(--sec) url('media/background_footer.svg');background-size:107.5%;background-position:top;background-repeat:no-repeat;padding:75px 0 0;}
#page-footer .headline{margin-bottom:10px;}
#page-footer .subline{margin-bottom:0;margin-top:15px;color:var(--main);font-size:100%;line-height:1.2;}

#page-footer .logowrapper .logo img{width:75%;}
#page-footer .logowrapper .social{margin-top:50px;}
#page-footer .logowrapper .social a:first-child{margin-left:0;}
#page-footer .logowrapper .social a{text-decoration:none;margin:0 5px;}

#page-footer .kontaktwrapper{margin-top:15px;}
#page-footer .kontaktwrapper a{color:var(--sec);text-decoration:none;padding-left:25px;position:relative;display:block;margin:5px 0;}
#page-footer .kontaktwrapper a:hover{color:var(--main);}
#page-footer .kontaktwrapper .telefon:before{background:url('media/phone-grau.svg');background-size:100%;background-position:center;background-repeat:no-repeat;}
#page-footer .kontaktwrapper .mail:before{background:url('media/mail-grau.svg');background-size:100%;background-position:center;background-repeat:no-repeat;}

#page-footer .offnungszeitenwrapper .offnungszeiten{margin:5px 0;display:flex;}
#page-footer .offnungszeitenwrapper .offnungszeiten .day{width:30%;}
#page-footer .offnungszeitenwrapper .offnungszeiten .time{width:70%;}

#page-footer .bottom{margin-top:50px;padding:15px 0;border-top:solid 1px var(--sec);}
#page-footer .bottom .copyright{display:inline-block;width:49.8%;}
#page-footer .bottom .copyright span{display:block;color:var(--sec);font-size:100%;font-weight:300;text-decoration:none;transition:all .3s ease;}
#page-footer .bottom .rechtliches{display:inline-block;width:49.8%;text-align:right;}
#page-footer .bottom .rechtliches a{display:inline-block;color:var(--sex);font-size:100%;font-weight:300;text-decoration:none;transition:all .3s ease;position: relative;}
#page-footer .bottom .rechtliches a:hover{color:var(--main);}
#page-footer .bottom .rechtliches .spacer{display:inline-block;margin:0 10px;}