/*
Theme Name: THEME
Description: Handcoded by wiegandt media - Based on Bootstrap 5
Author: wiegandt media UG
URI: http://www.wiegandt-media.de/
Version: 2026.03
Tags: wiegandt media UG
*/

/* ==========================================================================
   Fonts & Development
   ========================================================================== */

#wpadminbar {display: none;}

/* poppins-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('/wp-content/themes/butchers/fonts/poppins-v24-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url('/wp-content/themes/butchers/fonts/poppins-v24-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* nunito-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  src: url('/wp-content/themes/butchers/fonts/nunito-v32-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nunito-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  src: url('/wp-content/themes/butchers/fonts/nunito-v32-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@keyframes zoom {
  0% {
    scale: 1.01;
  }
  50% {
    scale: 1.2;
  }
  100% {
   scale: 1.01;
  }
}

/* ==========================================================================
   Basics
   ========================================================================== */

body {height:100%;width:100%;margin: 0;padding: 0;font-weight: 400;font-family: 'Nunito', sans-serif;font-size: 18px;color: #5c5c5c;overflow-x: hidden;}
html {height: 100%; width: 100%; margin: 0; padding:0;}

p {line-height: 1.55em;margin-bottom: 1.75rem;}
a {transition: all 0.2s;cursor: pointer;}
a:hover,a:focus {color: #d61a27;text-decoration: none;}
:focus {outline: none !important}

.center {text-align: center;}
.left {text-align: left;}
.right {text-align:right;}
.clear {clear: left;}

::selection{background:#E5E5E5}
::-moz-selection{background:#E5E5E5}

img.responsive {width: 100%; height: auto;}

h1 {font-size: 62px;font-family: 'Poppins', sans-serif;font-weight: 700;margin-top: 3px;margin-bottom: 5px;line-height: 1.1em;text-transform: uppercase;}
h2 {font-size: 42px;font-family: 'Poppins', sans-serif;font-weight: 700;margin-top: 5px;margin-bottom: 25px;line-height: 1.05em;text-transform: uppercase;}
h3 {font-size: 28px;font-family: 'Poppins', sans-serif;font-weight: 700;margin-top: 3px;margin-bottom: 5px;line-height: 1.25em;text-transform: uppercase;}
h4 {font-size: 19px; font-family: 'Poppins', sans-serif;font-weight: 700; margin-top: 3px; margin-bottom: 5px; line-height: 1.25em;}
h5 {font-size: 14px; font-weight: 400; margin-top: 3px; margin-bottom: 5px; line-height: 1.5em;}
h6 {font-size: 12px; font-weight: 400; margin-top: 3px; margin-bottom: 5px; line-height: 1.5em;}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    color: #212121;
}

.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
    color: #ffffff;
}

.policy-details {
    font-size: 13px;
}

body.modal-open header,
body.modal-open .hamburger {
  padding-right: 15px;
}

.nf-form-fields-required {display: none;}

.modal-content {
    background-color: #1e1e1e;
    color: #c5c5c5;
}

.modal-header h1 {
    color: #ffffff !important;
}

.btn-close {
    background: transparent url('/wp-content/themes/butchers/img/icon-close.svg') center/1em auto no-repeat;
    opacity: 1;
}

.nf-after-field .nf-error-msg {
    font-size: 13px;
}

.nf-field-label {
    font-size: 15px;
}

.nf-field-element input, .nf-field-element select, .nf-field-element textarea {
    padding: 6px;
}

.datepicker {
    padding: 9px 9px 8px !important;
    border-radius: 1px;
}

.nf-field-element input, .nf-field-element select, .nf-field-element textarea {
    padding: 6px;
}

.datepicker {
    padding: 9px 9px 8px !important;
    border-radius: 1px;
}

input.ninja-forms-field.nf-element.datepicker.pikaday__display.pikaday__display--pikaday.form-control.input {}

.field-wrap input[type=submit] {
    background-color: #d61a27;
    border: none;
    padding: 8px 13px;
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
}

.field-wrap input[type=submit]:hover {
    background-color: #d61a27;
    border: none;
    padding: 8px 13px;
    color: #ffffff;
    opacity: .85;
}

/* ==========================================================================
   Menu
   ========================================================================== */

header ul {
  padding-left: 0;
  display: inline-block;
}

.logo-box a {
    display: block;
    width: 280px;
    height: 78px;
    background-image: url(./img/butchers-logo.svg);
    background-size: 280px;
    background-position: center;
    background-repeat: no-repeat;
}

.logo-box {
    display: inline-block;
}

.hamburger {
    padding: 15px 0;
}

button.hamburger {
  display: none;
  z-index: 99;
  position: absolute;
  right: 20px;
  top: 15px;
}

.navbar-right {
    float: right;
}

ul.menu {
    padding-left: 0;
    list-style: none;
}

ul#menu-footer {
    display: inline-block;
    margin-bottom: 9px;
}

ul#menu-footer li {
    display: inline-block;
    margin: 0 8px;
}

.main-navbar ul li {
    display: inline-block;
}

.main-navbar ul li:last-child {
    margin-right: 0;
}

.main-navbar ul {
    margin-top: 35px;
}

.mobile-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #191b1d;
    -webkit-transition: opacity .75s ease-in-out;
    -moz-transition: opacity .75s ease-in-out;
    -o-transition: opacity .75s ease-in-out;
    transition: all .75s ease-in-out;
    text-align: center;
    z-index: 25;
    transform: translateY(-110%);
}

.menu-active .mobile-navbar {
    transform: translateY(0);
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    transition: all .75s ease-in-out;
    z-index: 25;
}

.mobile-navbar ul {
    padding-left: 0;
    list-style: none;
    position: relative;
}

.mobile-navbar ul li a {
    color: #ffffff;
    font-size: 23px;
    text-decoration: none;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.mobile-navbar ul li a:hover {
    color: #ffffff;
}

.footer-menu ul {
    text-align: right;
    padding-left: 0;
    list-style: none;
}

.footer-menu ul li {
    display: inline-block;
    margin: 0 5px;
} 

.footer-menu ul li:last-child {
    margin-right: 0;
}

header.scroll-up {
    transform: translateY(-100%);
}

section#willkommen {
    min-height: 640px;
    position: relative;
    overflow: hidden;
}

.overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000;
    opacity: .25;
}

/* ==========================================================================
   Site
   ========================================================================== */

header {
    padding: 15px 0 20px;
    position: fixed;
    width: 100%;
    z-index: 40;
    transition: all .3s, background-color 1s;
    overflow: hidden;
}

section#main {
    padding: 15px 0 20px;
    padding-top: 130px;
}

section#footer {
    background-color: #1e1e1e;
    padding: 50px 0 60px;
    font-size: 14px;
    color: #ffffff;
}

.header-overlay {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    background: linear-gradient(180deg, rgb(0,0,0,90%) 0%, rgba(0,0,0, 0) 90%);
    height: 300px;
    z-index: 5;
}

.main-navbar a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.main-navbar a:hover {
    color: #dab6a1;
}

ul#menu-links li {
    margin-right: 45px;
}

ul#menu-links li:last-child {
    margin-right: 0;
}

ul#menu-rechts li {
    margin-left: 45px;
}

ul#menu-rechts li:first-child {
    margin-left: 0;
}

.fronter {
    z-index: 10;
    position: relative;
}

.willkommen-text {
    text-align: center;
    color: #ffffff;
}

#willkommen .container-fluid {
    position: absolute;
    top: 50%;
    transform: translateY(-20%);
}

section#start {
    background-color: #f9f4e7;
    padding: 75px 0 80px;
}

section#drinks {
    background-color: #f9f4e7;
    padding: 75px 0 95px;
}

.angebot-box {
    background-color: #f5edd9;
    text-align: center;
    padding: 45px 15px 25px;
    margin-bottom: 15px;
}

img.angebot-img {
    max-width: 100px;
    max-height: 100px;
    margin-bottom: 20px;
}

.start-text {
    margin-bottom: 55px;
}

.header-background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    animation: zoom 40s infinite;
    -webkit-animation: zoom 40s infinite;
    background-position: center;
}

.main-navbar li.highlighting a {
    color: #d61a27;
}

.main-navbar li.highlighting a:hover {
    color: #a20c17;
} 

.willkommen-text h1 {
    text-shadow: 2px 2px 40px #000;
    margin-bottom: 20px;
}

section#intro {
    background-color: #1e1e1e;
    color: #c5c5c5;
    padding: 95px 0 105px;
}

.btn {
    border-radius: 0;
    border: none;
    padding: 8px 20px;
    font-weight: 700;
    background-color: #d61a27;
    color: #ffffff;
}

.btn:hover {
    background-color: #ab101a;
    color: #ffffff;
}

.btn-dark {
    background-color: #f5edd9;
    color: #212121;
}

.btn-light {
    background-color: #d61a27;
    color: #ffffff;
}

section#oeffnungszeiten {
    background-color: #1e1e1e;
    color: #c5c5c5;
    padding: 65px 0 15px;
    overflow: hidden;
}

.copyright .menu ul {
    list-style: none;
    padding-left: 0;
}

ul#menu-footer a {
    text-decoration: none;
    color: #b5b5b5;
}

section#oeffnungszeiten a {
    color: #b5b5b5;
}

.footer-box img.responsive {
    max-width: 260px;
}

header.scrolled {
    background-color: #1e1e1e;
    padding: 15px 0 10px;
}

header.scrolled .logo-box a {
    background-size: 180px;
    height: 55px;
}

header.scrolled .main-navbar ul {
    margin-top: 15px;
}

.hamburger-inner, .hamburger-inner:after, .hamburger-inner:before {
    background-color: #ffffff;
    border-radius: 0;
}

.intro-img {
    margin-bottom: 45px;
}

.mobile-navbar .menu {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}

.mobile-navbar ul li:hover a {
    color: #000;
}

section#galerie {
    overflow: hidden;
}

.mobile-navbar ul li {
    display: block;
    margin-bottom: 8px;
}

a.insta-btn {
    width: 36px;
    height: 36px;
    display: inline-block;
    background-image: url(/wp-content/themes/butchers/img/icon-insta.svg);
    background-size: 36px;
    background-repeat: no-repeat;
}

.insta-mobile {
    position: absolute;
    top: 25px;
    left: 20px;
    z-index: 9999999999;
}

section#willkommen.subpage {
    min-height: 240px;
}

.small-policy .nf-field-label label {
    font-weight: 400;
}

.reservierung {
    margin-bottom: 15px; 
}

/* ==========================================================================
   Responsive MAX
   ========================================================================== */

@media screen and (min-width: 1400px) {

  .container {
    max-width: 1400px;
  }
  
  .insta-mobile { display:none !important; }

}

@media screen and (max-width: 1399px) {

  button.hamburger {
      display: block;
  }
  
  .main-navbar {
      display: none;
  }
  
  h1 {
      font-size: 52px;
  }
  
  h2 {
      font-size: 32px;
  }
  
  h3 {
      font-size: 24px;
  }

}

@media screen and (max-width: 1199px) {


}

@media screen and (max-width: 991px) {

.logo-box a {
    background-size: 180px;
    width: 180px;
    height: 55px;
}

h1 {
    font-size: 42px;
}

h2 {
    font-size: 25px;
}

h3 {
    font-size: 20px;
}

}

@media screen and (max-width: 767px) {

.footer-box {
    margin-bottom: 35px;
}

section#footer {
    padding: 20px 0 60px;
}

h1 {
    font-size: 33px;
}

section#willkommen {
    min-height: 500px;
}


}

@media screen and (max-width: 575px) {
  
  .angebot-box {
      padding: 25px 15px 5px;
  }

}