/* ######################## Globales ######################## */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html{
  overflow-x: hidden !important;
}

body {
  font-family: "Jost" !important;
  background-color: rgb(16, 16, 16);
  color: rgb(214, 212, 212);
  overflow-x: hidden !important;
}

:root {
  --main: black;
  --yellow:#e9be62;
}

/* ######################## Allgemeines ######################## */

a {
  text-decoration: none;
  transition:.4s;
}

a:hover{
  color:var(--yellow) !important;
  transition:.4s !important;
}

p {
  color: white;
}

li {
  list-style: none;
}

h1 {
  color: white;
  text-transform: uppercase;
  font-size: 1.6rem;
}

h2{
  text-transform: uppercase;
}

.rand {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.yellow-line {
  background-image: linear-gradient(
    90deg,
    rgba(233, 190, 98, 1) 0%,
    rgba(233, 190, 98, 1) 100%
  );
  background-repeat: no-repeat;
  background-size: contain;
  height: 11px;
}

section{
  padding-top:2rem;
  padding-bottom:2rem;
}

/* ######################## Navigationsbar-Gestaltung ######################## */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background: rgb(0, 0, 0);
  background: -moz-linear-gradient(
    180deg,
    rgba(0, 0, 0, 1) 48%,
    rgba(0, 0, 0, 0.6502976190476191) 75%,
    rgba(0, 0, 0, 0) 100%
  );
  background: -webkit-linear-gradient(
    180deg,
    rgba(0, 0, 0, 1) 48%,
    rgba(0, 0, 0, 0.6502976190476191) 75%,
    rgba(0, 0, 0, 0) 100%
  );
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 1) 48%,
    rgba(0, 0, 0, 0.6502976190476191) 75%,
    rgba(0, 0, 0, 0) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
  color: #fff;
  position: absolute;
  z-index: 100;
  width: 100%;
}

.active {
  color: #e9be62 !important;
}

.nav-links a {
  color: #fff;
  text-transform: uppercase;
  font-weight: 800;
}

/* ######################## Navigationsbar-Logo ######################## */
.logo {
  width: 160px;
}

/* ######################## Navigationsbar-Menü ######################## */
.menu {
  display: flex;
  gap: 1em;
  font-size: 18px;
}

.menu li {
  padding: 5px 14px;
}

/* ######################## Wenn nötig: Dropdown ######################## */
.services {
  position: relative;
}

.dropdown {
  background-color: rgb(1, 139, 139);
  padding: 1em 0;
  position: absolute; /*WITH RESPECT TO PARENT*/
  display: none;
  border-radius: 8px;
  top: 35px;
}

.dropdown li + li {
  margin-top: 10px;
}

.dropdown li {
  padding: 0.5em 1em;
  width: 8em;
  text-align: center;
}

.dropdown li:hover {
  background-color: #4c9e9e;
}

.services:hover .dropdown {
  display: block;
}

/* ######################## Responsive Navbar ######################## */
/* ######################## Checkbox ######################## */

input[type="checkbox"] {
  display: none;
}

/* ######################## Hamburger Menu ######################## */
.hamburger {
  display: none;
  font-size: 24px;
  user-select: none;
}

/* ######################## Media-Queries ######################## */
@media (max-width: 768px) {
  .menu {
    display: none;
    position: absolute;
    background-color: black;
    right: 0;
    left: 0;
    text-align: center;
    padding: 16px 0;
    top: 108px;
  }

  .menu li:hover {
    display: inline-block;
    background-color: #4c9e9e;
    transition: 0.3s ease;
  }

  .menu li + li {
    margin-top: 12px;
  }

  input[type="checkbox"]:checked ~ .menu {
    display: block;
  }

  .hamburger {
    display: block;
  }

  .dropdown {
    left: 50%;
    top: 30px;
    transform: translateX(35%);
  }

  .dropdown li:hover {
    background-color: #4c9e9e;
  }
}

/* ######################## Swiper-Gestaltung ######################## */
.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 550px;
  object-fit: cover;
  object-position:center;
}

.swiper-button-next,
.swiper-button-prev {
  top: var(--swiper-navigation-top-offset, 55%) !important;
  color: #00000052 !important;
}

.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: var(--swiper-pagination-bottom, 8px);
  top: var(--swiper-pagination-top, 92%) !important;
  left: 0;
  width: 100%;
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  right: var(--swiper-navigation-sides-offset, 0.3rem) !important;
  left: auto;
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
  left: var(--swiper-navigation-sides-offset, 0.3rem) !important;
  right: auto;
}

.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--main) !important;
}

/* ######################## Section: Start ######################## */
#start p{
  padding-top:2rem;
}

.start-container{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
}

.start-item > img{
  width:190px;
  padding-top:2rem;
}

.contact-container > .contact-item > h2{
  font-size:1.1rem;
}

.underline {
  display: inline;
  position: relative;
  overflow: hidden;
}
.underline:after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  width: 0;
  bottom: 6px;
  background: var(--yellow);
  height: 1.5px;
  transition-property: width;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}
.underline:hover:after,
.underline:focus:after,
.underline:active:after {
  left: 0;
  right: auto;
  width: 100%;
}

.contact-container {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 30px;
  padding-top:2.5rem;
}

.wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.left {
  min-width: 153px;
}


/* ######################## Section: Unsere Speisen ######################## */
#speisen p{
  padding-top:2rem;
}

.tisch-container{
  background-image:url('../media/tisch/holz.png');
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  gap:1rem;
  padding-bottom:1rem;
  padding-top:1rem;
}

.tisch-item img{
  min-width:220px;
  max-width:220px;
}


/* ######################## Section: News ######################## */
#news{
  text-align:right;
}

#news h2 .underline{
  float:right;
  text-align:right;
}

#news p{
  padding-top:2rem;
}

.pizza-bg{
  background-image: url('../media/img/cover/pizza.png');
  background-size: contain;
  background-repeat: no-repeat;
  filter:none !important;
}

.blur{
  backdrop-filter: blur(3px);
}

/* ######################## Section: Footer ######################## */
footer img{
  object-fit: cover;
  object-position:center;
  height:60px;
  width:100%;
}

footer > .footer-container{
  text-align:center ;
}

footer .wrap .left{
  text-align:center ;
}

footer .wrap .left .right{
  text-align:center ;
}

.footer-logo{
  padding-top:0.5rem;
  padding-bottom:0.5rem;
}

footer .wrap{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
}

.footer-container{
  font-size:0.7rem;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  padding-top:0.8rem;
}
footer .left{
  min-width:120px;
}

footer .contact-container{
  gap:20px;
}

.rechtl-container{
  padding-top:2rem;
  padding-bottom:1rem;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  text-align:center;
}

.rechtl-item{
  font-size:0.7rem;
}

.rechtl-item > a {
  color:rgb(214, 212, 212);;
  text-decoration:none;
}



/* ######################## Reveal Animation ######################## */
.reveal {
  position: relative;
  transform: translateY(150px);
  opacity: 0;
  transition: 1s all ease;
}

.reveal.active {
  transform: translateY(0);
  opacity: 1;
}

/* Reveal von links */
.reveals {
  position: relative;
  transform: translateX(150px);
  opacity: 0;
  transition: 1s all ease;
}

.reveals.active {
  transform: translateX(0);
  opacity: 1;
}

@media screen and (min-width:744px){
  .tisch-container{
    display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: center;
     align-items: flex-end;
     align-content: flex-start;

  }
 
}

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

  .rand{
    margin-left:3rem;
    margin-right:3rem;
  }
 #start .contact-container{
    display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: flex-start;
     align-items: flex-start;
     align-content: flex-start;
  }
}

@media screen and (min-width:720px){
  .footer-container{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: flex-start;
    margin-left:3rem;
  }

  footer .contact-container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
  }

  footer .contact-item{
    flex-basis: 40%
  }

  .contact-item{
    flex-basis:40%;
  }
}

@media screen and (min-width:814px){
  .start-container > .start-item:nth-child(1){
    width:456px;
  }

  .start-container{
    display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: space-between;
     align-items: flex-start;
     align-content: flex-start;
  }
}

@media screen and (min-width:1096px){
  .rand{
    margin-left:6rem;
    margin-right:6rem;
  }
}

@media screen and (min-width:1346px){
  .rand{
    margin-left:10rem;
    margin-right:10rem;
  }

  .start-container > .start-item:nth-child(1){
    width:562px;
  }

  .blur{
    backdrop-filter: unset;
  }

  #news{
    padding-top:5rem;
    padding-bottom:10rem;
  }

  .pizza-bg{
    height:297px;
  }

  #news p{
    width:550px;
    float:right;
  }

  footer img{
    height:118px;
  }

  .footer-logo img{
    height:110px;
    object-fit:cover;
    object-position:center;
    width: 100%;
  }

  .tisch-item{
    flex-basis:20%;
  }
}

/* Unterseite: Speisekarte */
#speisekarte h2{
  font-size:2rem;
}

/* Tabelle Unterseite */


table{
  font-size:1.4rem;
  margin-top:2rem;
}

td:nth-child(1){
  font-weight:500;
} 

td:nth-child(2){
  font-weight:500;
  padding-left:4px;
}

td:nth-child(4){
  text-align:right;
  float:right;
  font-weight:500;
}
td:nth-child(3){
  text-align:center;
  font-weight:300;
}

td{
  padding: 0 15px;
}

.combi{
  color:#E9BE62;
  font-weight:200 !important;
  font-size:1.1rem;
  content:'' ;
}

td:nth-child(1)::before .combi{
  content:'' !important;
}

tr:nth-child(-n + 9) td:nth-child(1)::before{
  content:'0';
}


tr:nth-child(n) td:nth-child(1)::after{
  content:'.';
}



tr:nth-child(n) td:nth-child(4)::after{
  content:',00 €';
}







/* tr:nth-child(10) td:nth-child(1)::before{
  content:'';
}

tr:nth-child(11) td:nth-child(1)::before{
  content:counter(tablerow) '.' ;
  counter-increment: tablerow -1  ; 
}

tr:nth-child(12) td:nth-child(1)::before{
  content:counter(tablerow) '.' ;
  counter-increment: tablerow - tablerow; 
}

tr:nth-child(13) td:nth-child(1)::before{
  content:'';
  counter-increment: tablerow -1; 
}

tr:nth-child(n+14) td:nth-child(1)::before{
  content:counter(tablerow) '.' ;
  counter-increment: tablerow-tablerow ; 
}

tr:nth-child(15) td:nth-child(1)::before{
  content:'';
  counter-increment: tablerow -1; 
}

tr:nth-child(20) td:nth-child(1)::before{
  content:'';
  counter-increment: tablerow -1; 
}

tr:nth-child(n+21) td:nth-child(1)::before{
  content:'16';
  counter-increment: tablerow-tablerow ; 
}

tr:nth-child(22) td:nth-child(1)::before{
  content:'';
  counter-increment: tablerow -1; 
} */ 

.kebap-item:first-child{
  float:left;
  position:relative;
  left:-13vw;
}

.kebap-item > img{
  width:320px;
  padding-top:6rem;
}

.kebap-item:nth-child(2){
  float:right;
  position:relative;
  right:0;
}

.kebap-item h3{
  font-size:1.7rem;
  text-transform:uppercase;
  font-weight:900;
}

.kebap-item h3, .kebap-item > p{
  text-align:right;
}

.under-caption{
  font-weight:400;
}

.info{
  font-weight:200;
}

#kebap{
  height:1111px;
  position:relative;
}


/* PIZZAAAAAAAA */
.pizza-item:first-child{
  float:right;
  position:absolute;
  right:0;
}

/* /* #pizza tr{ 
  counter-increment: tablerow ; 
} */
/* #kebap tr:nth-child(n+9) td:nth-child(1)::before{
  content:'0';
} */
/* #pizza tr:nth-child(n+3) td:nth-child(1)::before{
  content:counter(tablerow) '.' ;
  counter-increment: tablerow + tablerow; 
}
#pizza tr:nth-child(4) td:nth-child(1)::before{
  content:'';
}

#pizza tr:nth-child(5) td:nth-child(1)::before{
  content:counter(tablerow) '.' ;
  counter-increment: tablerow -1; 
}

#pizza tr:nth-child(6) td:nth-child(1)::before{
  content:'';
}

#pizza tr:nth-child(7) td:nth-child(1)::before{
  content:counter(tablerow) '.' ;
  counter-increment: tablerow -1; 
}
#pizza tr:nth-child(9) td:nth-child(1)::before{
  content:'';
}
#pizza tr:nth-child(10) td:nth-child(1)::before{
  content:counter(tablerow) '.' ;
  counter-increment: tablerow -1; 
} */