/*Start Global*/
* {
    box-sizing: border-box;
}



html {
  scroll-behavior: smooth;
}

:target {
  scroll-margin-top: 100px;
}
body {
    margin: 0;
    padding: 0px;
    background-color: #FAFAFA;
    
}
body.hide-scroll::-webkit-scrollbar {
    display: none;
}
a {
    text-decoration: none;
}
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
img {
    max-width: 100%;
}
h2 {
    font-family: 'Herr Von Muellerhoff', cursive;
    font-size: 100px;
    font-weight: normal;
    margin: 0 0 -55px;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.17);
}
h1, h3 {
    font-family: "Source Code Pro", sans-serif;
    font-size: 47px;
    font-weight: bold;
    letter-spacing: 9.4px;
    margin: 0 0 15px;
}
p {
    color: #515151;
    line-height: 27px;
}
.a-CTA {
    border-bottom: 2px solid #65c0be;
    padding-bottom: 4px;
    letter-spacing: 1.5px;
    font-size: 18px;
}
/*End Global*/

.logo img {
  height: 20px;   /* or 50px, 40px, depending on your taste */
  width: auto;    /* keeps the aspect ratio */
}

/*Start Mutual*/
p, .a-CTA, input, header .navigation-bar a, .copyright li, .contact .form form label, .contact .form form button {
    font-family: Cabin, sans-serif;
}
.fa-asterisk, .a-CTA, h2, header .navigation-bar a:hover, header nav.active .navigation-bar a:hover, footer .social-media .links a:hover, .copyright .info li a, .copyright .CTA li a:hover {
    color: #65c0be ;
}

header nav .navigation-bar .underline, header .text .button button:hover, .contact .form form button:hover, .contact .text i:hover {
    background-color: #65c0be;
}
header .navigation-bar ul li, header .text, .about-us .text, .reservation .text, .menu .box-model, .menu .text, .fixed-image .text, footer, .copyright, .contact .text i {
    text-align: center;
}
header nav, header .navigation-bar ul, .about-us, .reservation, .about-us .image-container, .reservation .image-container, .menu, .menu .menu-image-container, footer .contact-container, .copyright ul, .contact {
    display: flex;
}
header nav .toggle, header nav .toggle span, header .navigation-bar, header .navigation-bar ul, .menu .box-model .close, footer .social-media .links a, .copyright .CTA li a {
    transition: .3s;
}
header, header nav .toggle span, header .navigation-bar a, header .text, header .text .arrow .left, header .text .arrow .right, .Gerechten, .menu .box-image-container, .fixed-image .text, .copyright, .copyright .arrow-up {
    position: relative;
}
header nav .toggle, header .navigation-bar .underline, header .text .arrow .left:after, header .text .arrow .right:after, header .svg-down, header .arrow-down, .Gerechten .text, .menu .box-model .close, .menu .box-model .arrow .arrow-right,.menu .box-model .arrow .arrow-left, .menu .box-image-container .box-image, .copyright .svg-up {
    position: absolute;
}
.Gerechten .text, .fixed-image .text, .menu .box-image-container, .menu .box-image-container .box-image {
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
header nav, header .navigation-bar a:hover .underline, header .navigation-bar li.active .underline, .menu .box-model, .menu .box-image-container, .menu .box-image-container .box-image {
    width: 100%;
}
button, .dots > div, header nav .toggle, header .arrow-down, .menu .box-model .close, .menu .box-model .arrow .arrow-right,.menu .box-model .arrow .arrow-left, .menu .menu-image-container .image img, footer .newsletter i, .copyright .arrow-up {
    cursor: pointer;
}
.dots .active, header nav.active, header nav.active .toggle.active span, header nav .toggle span, header .navigation-bar .underline, header .text .arrow .left, header .text .arrow .right, header .text .button button, .contact form button {
    background-color: #fff;
}
h1, h3, header .navigation-bar a, header .text span, .menu .box-model .close:hover, footer .text h2, footer .text p, footer .social-media .links a, .contact .text i, .contact .form form button {
    color: #fff;
}
header nav, header .navigation-bar.show, header .navigation-bar a:hover .underline, header .navigation-bar li.active .underline, header .text .arrow .left:after, .menu .box-model, .copyright .arrow-up {
    left: 0;
}
header .text .arrow .left:after, header .text .arrow .right:after, header .text span, footer .social-media .links a, footer .newsletter i, .copyright .arrow-up, .contact .text i, .contact .form form label {
    display: inline-block;
}
/*End Mutual*/

/*Start Dots*/
.dots {
    position: fixed;
    top: 50%;
    right: 30px;
    transform: translate(0,-50%);
    z-index: 5;
}
.dots > div  {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    z-index: 20;
    margin-bottom: 10px;
    border: 2px solid #fff;
}
.dots .black {
    border-color: #000;
}
.dots .active.black {
    background-color: #000;
}
/*End Dots*/



/*Start Home Page*/

/* Start Header */
header{
  position: relative;
  height: calc(100vh - 22px);
  padding: 20px 70px;
  overflow: hidden; /* knip video op viewport */
}

/* De video zelf vult het scherm zoals 'background-size: cover' */
header .bg-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* vult zonder rek, mag croppen */
  z-index: -2;       /* achter de content */
}

/* Donkere overlay (vervangt je background-blend-mode) */
header::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.712); /* zelfde dim als je had */
  pointer-events: none;
  z-index: -1;
}

/* Mobiel: geen 'fixed' gedoe nodig, video blijft cover */
@media (max-width: 768px){
  header{ padding: 20px 24px; }
}

/* (Optioneel) Respecteer 'Reduce Motion': toon poster i.p.v. video */
@media (prefers-reduced-motion: reduce){
  header .bg-video{ display: none; }
  /* Toon dan je poster als achtergrond */
  header{
    background: #000 url("/videos/5.jpg") center/cover no-repeat;
  }
}
    
header nav {
    position: fixed;
    top: 0;
    padding: 24px 36px 20px;
    z-index: 200;
}

@media (min-width: 1424px) {
  header .navigation-bar {
    margin-left: 800px;
  }
}

header nav .toggle {
    display: none;
    top: 26px;
    left: 20px;
    background-color: transparent;
    border: none;
    padding: 0;
    z-index: 210;
}
header nav .toggle:focus {
    outline: none;
}
header nav.active .toggle span {
    background-color: #000;
}
header nav .toggle.active {
    left: 32%;
}
header nav .toggle.active .first {
    top: 16px;
    transform: rotate(-45deg);
}
header nav .toggle.active .last {
    top: 0;
    transform: rotate(45deg);
}
header nav .toggle .hide {
    transition: 0s;
    visibility: hidden;
}
header nav .toggle span {
    display: block;
    width: 30px;
    height: 2px;
    border-radius: 40px;
}
header nav .toggle span:not(:last-of-type) {
    margin-bottom: 6px;
}
header nav .logo {
    flex-basis: 56%;
    padding-left: 50px;
}
header .navigation-bar.show {
    width: 40%;
}
header .navigation-bar.show a {
    color: #ccc !important;
}
header .navigation-bar.show a:hover {
    color: #fff !important;
}
header .navigation-bar ul li {
    flex: 1;
    padding: 0 15px;
}
header .navigation-bar a {
    text-decoration: none;
    transition: all .5s;
    font-size: 16px;
}

header .navigation-bar ul {
    flex-wrap: nowrap;
}

header .navigation-bar ul li {
    white-space: nowrap;
}
header nav.active .navigation-bar a {
    color: #000;
}
header .navigation-bar .underline {
    height: 2px;
    width: 0;
    left: 50%;
    bottom: -4px;
    transition: all .3s;
    display: block;
}
header .text {
    top: 24%;
}
header .text h1 {
    margin-bottom: 0;
}
header .text .arrow .left, header .text .arrow .right {
    height: 3px;
    width: 100px;
}
header .text .arrow .left {
    left: -4%;
}
header .text .arrow .right {
    right: -4%;
}
header .text .arrow .left:after, header .text .arrow .right:after {
    content: '';
    border: 10px solid transparent;
    border-left-color: #fff;
    top: -8px;
}
header .text .arrow .right:after {
    right: 0;
    border-color: transparent #fff transparent transparent;
}
header .text .arrow .fa-asterisk {
    vertical-align: super;
}
header .text span {
    font-family: "Source Code Pro", sans-serif;
    font-size: 15px;
    margin-bottom: 12px;
}
header .text .button button, .contact form button {
    border: none;
    padding: 15px 50px;
    letter-spacing: 2.4px;
    font-size: 12px;
    
    border-radius: 5px;
}
header .text .button button, .contact form button:focus {
    outline: none;
}
header .svg-down {
    bottom: 0;
    left: 50%;
    z-index: 100;
    margin-left: -96px;
    margin-bottom: -12px;
    color: #fff;
}
header .arrow-down {
    width: 70px;
    height: 50px;
    bottom: -10px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 105;
    background: url("https://res.cloudinary.com/abdel-rahman-ali/image/upload/v1535988515/arrow-down.png") no-repeat center;
}

/* Hero-logo net wat hoger */
header .text .hero-logo{
  display:block;
  margin:0 auto;
  transform: translateY(-28px);
}

/* Iets subtieler op mobiel */
@media (max-width:768px){
  header .text .hero-logo{ transform: translateY(50px); }
}


/* Subpages: navbar altijd donker (zelfde grijze BG als screenshot) */
body.subpage header nav,
body.subpage header nav.active{
  background: #111 !important;           /* evt. jouw exacte grijs hier */
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}

/* Tekst/links in het wit houden op subpages */
body.subpage header nav .navigation-bar a{ 
  color: #fff !important; 
}

/* Onderlijntje in jouw mint-kleur */
body.subpage header nav .navigation-bar .underline{
  background: #65c0be;
}

/*End Header*/

/*Start About-Us*/
.about-us, .reservation {
    padding: 60px;
}
.about-us .text, .reservation .text {
    flex: 50%;
    padding: 40px 52px 0 0;
}
.about-us .text h3, .reservation .text h3 {
    color: #000;
}
.about-us .text .fa-asterisk, .reservation .text .fa-asterisk {
    color: #9a9998;
}
.about-us .image-container, .reservation .image-container {
    flex: 50%;
}
.about-us .image, .reservation .image {
    margin-left: 20px;
}
/*End About-Us*/

/*Start Gerechten*/
.Gerechten .image {
    height: 350px;
    background: rgba(0, 0, 0, 0.5) url("/../photos/buiten.jpeg") fixed center;
    background-blend-mode: darken;
    background-size: cover;
}

.Gerechten .text {
    text-align: center;
}



/*End Gerechten*/

/*Start Menu*/
.menu {
    padding: 60px;
}
.menu .box-model {
    display: none;
    position: fixed;
    height: 100%;
    top: 0;
    z-index: 20;
    background-color: rgba(0,0,0,.7);
}
.menu .box-model.active {
    display: block;
}
.menu .box-model.active body {
    overflow: hidden;
}
.menu .box-model .close {
    color: #ccc;
    right: 25px;
    top: 10px;
    z-index: 20;
}
.menu .box-model .arrow .arrow-right,.menu .box-model .arrow .arrow-left {
    width: 40px;
    height: 40px;
    right: 20px;
    top: 50%;
    border-right: 2px solid #fff;
    border-top: 2px solid #fff;
    transform: rotate(45deg);
    z-index: 20;
}
.menu .box-model .arrow .arrow-left {
    left: 20px;
    transform: rotate(-135deg);
}
/* ===== Menu-foto's: 2-koloms grid met stevige hoogte ===== */
.menu .box-image-container { height: auto !important; } /* voorkomt 'dun' door erfelijke 100% */

.menu .menu-image-container{
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  flex: 60%;
}

.menu .menu-image-container .image{
  position: relative;
  /* responsieve, stevige hoogte: pas de middenwaarde aan voor “dikker/dunner” */
  height: clamp(220px, 28vw, 360px);
  overflow: hidden;
  border-radius: 15px;
  background: #ffffff;
  margin: 0 !important; /* we gebruiken 'gap' */
  /* hier je witte rand */
  border: 1px solid #ffffff;
  box-sizing: border-box; /* zodat de rand niet buiten de container steekt */
}

.menu .menu-image-container .image img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;   /* zoom/crop zoals de rode voorbeelden */
  object-position: center;
  display: block;

  /* Strakke witte rand */
  border: 1px solid #fff;
  border-radius: 15px;      /* zelfde radius als de container */
  box-sizing: border-box;   /* rand telt binnen de afmetingen */
}


.menu .menu-image-container .image > div{
  position: absolute; inset: 0; pointer-events: none;
}

/* Mobiel: 1 kolom + iets lagere hoogte zodat het niet te hoog wordt */
@media (max-width: 680px){
  .menu .menu-image-container{
    grid-template-columns: 1fr;
  }
  .menu .menu-image-container .image{
    height: clamp(200px, 55vw, 320px);
  }
}


.menu .text {
    flex: 55%;
    padding: 40px 0 0 62px;
}
.menu .text h3 {
    color: #000;;
}
.menu .text .fa-asterisk {
    color: #9a9998;
}
/*End Menu*/

/*Start fixed-image*/
.fixed-image {
  position: relative;
  height: 400px;
  overflow: hidden;
}

.fixed-image .bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;  /* like background-size: cover */
  z-index: 0;
}

.fixed-image .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5); /* dark layer */
  z-index: 1;
}

.fixed-image .text {
  position: relative;
  z-index: 2; /* content stays above */
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}

/*End fixed-image*/

/*Start Footer*/
footer {
    background-color: #121212;
    padding: 60px 20px;
}
footer .text {
    max-width: 500px;
    margin: auto;
}
footer .text h2 {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 19px;
    letter-spacing: 1.9px;
    margin-bottom: 25px;
}
footer .text .fa-asterisk {
    font-size: 12px;
}
footer .text p {
    line-height: 27px;
}
footer .contact-container {
    padding: 40px 0;
    max-width: 1000px;
    margin: auto;
}
footer .contact-container > div {
    flex: 1;
}
footer .contact-container h3 {
    font-size: 19px;
    letter-spacing: 1.9px;
}
footer .social-media .links a {
    margin: 0 10px;
    font-size: 25px;
}
footer .newsletter input {
    padding: 10px;
    width: 270px;
    background-color: #eee;
    border: none;
    margin-left: -15px;
}
footer .newsletter i {
    margin-left: -40px;
    vertical-align: middle;
    font-size: 21px;
}
.copyright {
    padding: 15px 40px 30px;
    background-color: #262526;
}
.copyright .svg-up {
    top: 0;
    left: 50%;
    margin-left: -96px;
    margin-top: -50px;
}
.copyright .arrow-up {
    width: 40px;
    height: 30px;
    top: -45px;
    color: #fff;
    line-height: 1.9;
}
.copyright ul {
    justify-content: center;
}
.copyright li {
    color: #919191;
    font-size: 14px;
}
.copyright li:not(:last-of-type):after {
    content: '•';
    margin: 10px;
}
.copyright .CTA {
    margin-top: 25px;
}
.copyright .CTA li a {
    color: #919191;
}

/*End Footer*/

/*End Home Page*/

/*Start Contact Page*/
.contact-header {
    background-image: url("https://res.cloudinary.com/abdel-rahman-ali/image/upload/v1535988526/contact-food.jpg");
    height: 40vh;
}
.contact {
    padding: 78px 40px;
}
.contact > div {
    flex: 50%;
}
.contact .text p {
    margin-bottom: 30px;
}
.contact .text i {
    width: 50px;
    height: 50px;
    background-color: #000;
    border-radius: 50%;
    line-height: 48px;
    font-size: 24px;
}
.contact .text h2 {
    font-family: source_sans_problack, sans-serif;
    font-size: 24px;
    color: #262626;
    letter-spacing: 2.4px;
    margin-bottom: 20px;
}
.contact .form {
    margin-left: 48px;
}
.contact .form form label {
    margin-bottom: 5px;
    color: #515151;
}
.contact .form form input, .contact .form form textarea {
    display: block;
    width: 100%;
    padding: 10px;
    margin-bottom: 24px;
    border-radius: 5px;
    border: 2px solid #D8D8D8;
    outline: none;
}
.contact .form form input:focus, .contact .form form textarea:focus {
    border-color: #65c0be;
    box-shadow: 0 1px 1px #737373;
}
.contact .form form textarea {
    height: 212px;
    resize: none;
}
.contact .form form button {
    background-color: #262526;
    padding: 12px 30px;
    font-size: 12px;
}
/*End Contact Page*/
/*Start Home Page Responsive*/

@media (max-width: 1200px) {
    .menu, .about-us, .reservation {
        padding: 60px 40px;
    }
    .about-us .text, .reservation .text {
        padding: 0 32px 0 0;
    }
    .about-us .image-container, .reservation .image-container {
        align-items: center;
    }
    .menu .text {
        padding: 0 0 0 32px;
    }
}

@media (max-width: 992px) {
    body {
        padding: 0;
    }
    .dots {
        display: none;
    }
    header {
        height: calc(100vh - 10px);
    }
    header nav .logo {
        padding-left: 0;
    }
    .about-us {
        display: block;
        padding-top: 50px;
    }
    .about-us .text , .reservation .text {
        padding: 0 0 40px;
    }
    .about-us .image-container .image1, .reservation .image-container .image1 {
        margin-left: 0;
    }
    .menu {
        display: block;
        padding: 60px 20px 60px 40px;
    }
    .menu .text {
        padding: 20px 20px 0 0;
    }
    .reservation {
        display: block;
        padding: 30px 20px 60px;
    }
    .contact {
        display: block;
        padding: 78px 20px;
    }
    .contact .form {
        margin-left: 0;
        margin-top: 40px;
    }
}

@media (max-width: 768px) {
    header nav {
        display: block;
        text-align: center;
        left: 0;
        top: 0;
        width: 100%;
        padding-top: 25px;
    }
    header nav .toggle {
        display: block;
    }
    header .navigation-bar {
        position: fixed;
        top: 0;
        left: -174px;
        height: 100%;
        background-color: #050505;
        overflow: hidden;
        z-index: 20;
        padding: 40px;
    }
    header .navigation-bar ul {
        display: block;
        padding-top: 40px;
    }
    header .navigation-bar ul li {
        text-align: left;
        padding: 14px 0;
    }
    footer .contact-container {
        display: block;
    }
    footer .social-media {
        margin-bottom: 40px;
    }
    .copyright ul {
        display: block;
        margin-top: -20px;
    }
    .copyright li {
        margin-bottom: 5px;
    }
    .copyright li:not(:last-of-type):after {
        content: '';
    }

}

@media (max-width: 576px) {
    h3, h1 {
        font-size: 40px;
    }
    h2 {
        font-size:90px
    }
    header {
        padding: 0;
    }
    header nav .logo {
        padding-left: 0;
    }
    header nav .toggle.active {
        left: 36%;
    }
    header .navigation-bar.show {
        padding: 20px;
        width: 48%;
    }
    .about-us, .reservation {
        padding: 60px 20px;
    }
    .menu {
        padding: 60px 0 60px 20px;
    }
}
/*End Home Page Responsive*/

/* ===== Scroll-in reveal (hoofdanimatie) ===== */
:root{
  --reveal-distance: 22px;
  --reveal-duration: .6s;
  --reveal-ease: cubic-bezier(.22,.61,.36,1);
}

.reveal{
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  filter: blur(0.2rem);
  will-change: transform, opacity;
  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease),
    filter var(--reveal-duration) var(--reveal-ease);
}

.reveal.in-view{
  opacity: 1;
  transform: none;
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce){
  .reveal{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}


/* Footer contact blocks spacing */
footer .contact-container > div {
  margin-bottom: 24px;         /* meer ruimte tussen de blokken */
  padding: 16px;               /* interne padding in elk blok */
  background: transparent;     /* geen rare achtergrond */
}

@media (min-width: 768px) {
  footer .contact-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;                  /* extra ruimte tussen kolommen op desktop */
  }
  footer .contact-container > div {
    margin-bottom: 0;
  }
}

/* Kaart stijl */
footer .contact-container .map iframe {
  border-radius: 12px;          /* ronde randjes */
  display: block;
}

/* Accentkleur voor highlights/links in footer */
footer a {
  color: #65c1bf; /* accentkleur */
  text-decoration: none;
  display: inline-block; /* nodig voor scale-effect */
  transition: 
    color 0.3s ease,
    transform 0.6s ease,
    text-shadow 0.3s ease;
}

footer a:hover {
  color: #aaf3f2; /* lichtere hoverkleur */
  transform: scale(1.03); /* heel licht vergroten */
  text-shadow: 0 1px 3px rgba(0,0,0,0.15); /* subtiele schaduw */
}

.footer-intro strong {
  color: #65c1bf;         /* zelfde accentkleur als je footer-links */
  font-weight: 700;       /* extra vet */
  letter-spacing: 0.5px;  /* klein beetje extra ruimte tussen letters */
  background-color: rgba(101,193,191,0.1); /* subtiele achtergrondtint */
  padding: 2px 4px;                        /* beetje ruimte om de tekst */
  border-radius: 4px;   
}


/* ===== Modal (clean, warm, accent-only UI) ===== */
:root{
  --accent: #000000;          /* jouw accentkleur */
  --modal-bg: #161a1d;        /* warm donkergrijs voor de kaart */
  --modal-bg-inner: #161a1d;  /* iets lichter voor contentvlak */
  --hdr-h: 48px;              /* hoogte titelbalk */
}

/* Donkere, blurrier overlay */
.modal{
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: rgba(0,0,0,.68);             /* donkerder overlay */
  backdrop-filter: blur(16px);              /* blurrier */
  -webkit-backdrop-filter: blur(16px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .24s ease, visibility .24s ease;
  z-index: 9999;
}
.modal.open{ opacity: 1; visibility: visible; pointer-events: auto; }

/* Matte, warme kaart met subtiele accent-glow */
.modal__dialog{
  position: relative;
  width: min(960px, 92vw);
  height: min(80vh, 720px);
  background: var(--modal-bg);
  border-radius: 16px;
  border: none;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent) inset,
    0 28px 110px rgba(0,0,0,.6),
    0 0 40px color-mix(in srgb, var(--accent) 18%, transparent);
  overflow: hidden;
  transform: scale(.9);
  opacity: 0;
  transition: transform .24s cubic-bezier(.22,.7,.3,1), opacity .24s ease;
}
.modal.open .modal__dialog{ transform: scale(1); opacity: 1; }
.modal.closing .modal__dialog{ transform: scale(.88); opacity: 0; }

/* Titelbalk: gecentreerde tekst, accentlijn — zonder grijze rand */
.modal__dialog::before{
  content:"";
  position:absolute; inset: 0 auto auto 0;
  height: var(--hdr-h);
  background: linear-gradient(0deg, rgba(255,255,255,.02), rgba(255,255,255,.04));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  pointer-events: none;
}
.modal__title{
  position: absolute;
  top: calc((var(--hdr-h) - 1em)/2);
  left: 50%; transform: translateX(-50%);
  margin: 0;
  padding: 0 56px;             /* ruimte voor close-button rechts */
  font-size: 15px;
  letter-spacing: .4px;
  color: var(--accent);
  text-align: center;
  pointer-events: none;        /* voorkomt ‘overlayen’ van interactie */
}

/* Close-button: netjes gecentreerd in de titelbalk, zonder harde randen */
.modal__close{
  position: absolute;
  top: calc((var(--hdr-h) - 36px)/2);
  right: 10px;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--accent);   /* pure accent – geen grijs */
  color: #0b1414;
  border: none;
  display: grid; place-items: center;
  cursor: pointer;
  z-index: 2;                  /* boven iframe */
  transition: transform .16s ease, opacity .16s ease;
}
.modal__close:hover{ transform: scale(1.06); opacity: .92; }

/* Contentvlak (PDF) – warm, matte donkergrauw en afgerond gevoel */
#menuPdf{
  width: 100%;
  height: calc(100% - var(--hdr-h));
  border: 0;
  background: var(--modal-bg-inner);
}

/* Achtergrond niet scrollen terwijl modal open is */
body.modal-open{ overflow: hidden; }

/* Mobile tuning */
@media (max-width: 640px){
  .modal__dialog{ width: 96vw; height: 82vh; border-radius: 14px; }
  .modal{ backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
}

/* Reduced motion respecteren */
@media (prefers-reduced-motion: reduce){
  .modal, .modal__dialog{ transition: none !important; }
}



/* ===== Reserveer-modal (v6) – smooth, cards, progress connectors + mooie selects ===== */
:root{
  --accent: #65c1bf;
  --overlay: rgba(0, 0, 0, 0.808);
  --blur: 18px;

  /* Progress geometry */
  --dot: 26px;      /* diameter van numbered dot */
  --labelH: 18px;   /* vaste label hoogte */
  --gap: 6px;       /* ruimte tussen label en dot */

  /* Selects */
  --select-bg: #151a1f;         /* donker grijs vakje */
  --select-bg-2: #0f1317;       /* drop-down panel bg */
  --select-fg: #d6dde3;         /* tekstkleur */
  --select-border: color-mix(in srgb, var(--accent) 26%, transparent);
  --select-focus-ring: color-mix(in srgb, var(--accent) 22%, transparent);
}

.rsv2-modal{
  position: fixed; inset: 0; display: grid; place-items: center;
  background: var(--overlay);
  backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .38s ease, visibility .38s ease;
  z-index: 9999;
}
.rsv2-modal.open{ opacity: 1; visibility: visible; pointer-events: auto; }

.rsv2-dialog{
  position: relative; width: min(560px, 92vw); background: transparent;
  transform: scale(.9); opacity: 0;
  transition: transform .42s cubic-bezier(.22,.7,.3,1), opacity .42s ease;
}
.rsv2-modal.open .rsv2-dialog{ transform: scale(1); opacity: 1; }
.rsv2-modal.closing .rsv2-dialog{ transform: scale(.9); opacity: 0; }

/* Title + Close */
.rsv2-title{
  margin: 0; color: var(--accent); text-align: center;
  font-size: clamp(32px, 2.6vw, 18px); letter-spacing: .3px;
  padding: 8px 56px 10px;
}
.rsv2-close{
  position: absolute; top: 4px; right: 4px; width: 36px; height: 36px;
  border-radius: 10px; background: var(--accent); color: #0b1414; border: none;
  display: grid; place-items: center; cursor: pointer; z-index: 2;
  transition: transform .16s ease, opacity .16s ease;
}
.rsv2-close:hover{ transform: scale(1.06); opacity: .92; }

/* Progressbar: labels boven, dot eronder; lijn achter dots
   en exact van centrum stap 1 tot centrum stap 3 */
#rsv2-progressbar{
  position: relative;
  margin: 6px auto 14px;
  padding: 0;
  max-width: 520px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 16px;
  counter-reset: step;
  z-index: 0; /* lijn onder de dots */
}

/* Baseline (achter de blokjes), start bij centrum 1 en eindigt bij centrum 3 */
#rsv2-progressbar::before{
  content:"";
  position: absolute;
  /* 1/6 (= 16.6667%) is het midden van kolom 1; idem rechts voor kolom 3 */
  left: calc(100% / 6);
  right: calc(100% / 6);
  top: calc(var(--labelH) + var(--gap) + var(--dot) / 2);
  height: 2px;
  background: rgba(255,255,255,.18);
  border-radius: 2px;
  z-index: 0;
}

/* Gevulde lijn (achter de blokjes), van centrum 1 → centrum 3 */
#rsv2-progressbar::after{
  content:"";
  position: absolute;
  left: calc(100% / 6); /* begin exact onder het midden van stap 1 */
  top: calc(var(--labelH) + var(--gap) + var(--dot) / 2);
  /* totale lengte tussen de middelpunten = 100% - 2*(1/6) = 2/3 = 66.6667% */
  width: calc(var(--progress, 0) * (100% - (100% / 3)));
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transition: width .42s ease;
  z-index: 0; /* achter de blokjes */
}

/* Items */
#rsv2-progressbar li{ list-style: none; text-align: center; }
#rsv2-progressbar .label{
  display: block;
  height: var(--labelH);
  line-height: var(--labelH);
  font-size: clamp(11px, 2vw, 12px);
  text-transform: uppercase;
  letter-spacing: .3px;
  color: #cbd5e1;
  margin-bottom: var(--gap);
  position: relative;
  z-index: 2; /* boven alles */
}
#rsv2-progressbar .dot{
  display: inline-grid;
  place-items: center;
  width: var(--dot);
  height: var(--dot);
  border-radius: 6px;
  background: rgb(36, 36, 36);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  color: #e5e7eb;
  font-size: 12px;
  position: relative;
  z-index: 1; /* dot boven de lijnen */
}
#rsv2-progressbar li.active .dot{
  background: var(--accent);
  color: #0b1414;
  border-color: var(--accent);
}


/* Viewport fixeert hoogte — JS zet exacte hoogte (geen jumping) */
.rsv2-viewport{ position: relative; overflow: hidden; width: 100%; margin: 0 auto; }

/* Steps als transparante “cards” */
#rsv2form fieldset{
  position: absolute; inset: 0; margin: 0;
  padding: 22px clamp(16px, 4vw, 28px) 78px; /* extra bottom voor knoppen */
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid color-mix(in srgb, var(--overlay) 26%, transparent);
  border-radius: 12px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--overlay) 16%, transparent) inset,
    0 18px 50px rgba(0,0,0,.25);
  display: grid; align-content: start; gap: 12px;

  opacity: 0; transform: translateX(16px) scale(.98); pointer-events: none;
  transition: opacity .42s ease, transform .42s cubic-bezier(.22,.7,.3,1);
  will-change: opacity, transform;
}
#rsv2form fieldset.active{
  opacity: 1; transform: translateX(0) scale(1); pointer-events: auto;
}

/* Typo + Inputs (groter & gecentreerd) */
.fs-title{
  color: #e5e7eb; text-align: center;
  font-size: clamp(50px, 3.2vw, 20px);
  margin: 0;
}
.fs-subtitle{
  color: #9ca3af; text-align: center;
  font-size: clamp(13px, 2.6vw, 15px);
  margin: 0 0 8px;
}
#rsv2form input{
  width: 100%; font-size: 16px; color: #e5e7eb;
  background: rgba(255,255,255,.06);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 10px;
  padding: 14px 12px; min-height: 46px; outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
#rsv2form input:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
  transform: translateY(-1px);
}
.input-error{ border-color: #ff7a7a !important; }

.rsv2-summary{
  margin-top: 8px; padding: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: 10px; color: #d1d5db; font-size: 15px;
}

/* Buttons */
#rsv2form .button-group{ margin-top: 8px; display: flex; justify-content: center; gap: 10px; }
#rsv2form .action-button{
  min-width: 144px; height: 44px;
  background: var(--accent); color: #0b1414; border: 0;
  border-radius: 10px; font-weight: 700; cursor: pointer;
  transition: transform .18s ease, opacity .18s ease;
}
#rsv2form .action-button:hover{ transform: translateY(-1px); }
#rsv2form .action-button.ghost{
  background: transparent; color: #e5e7eb;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
}

/* ===== Mooie donkere dropdowns (custom select) ===== */
#rsv2form .ui-select{ position: relative; }
#rsv2form select{
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  width: 100%;
  font-size: 16px; color: var(--select-fg);
  background: var(--select-bg);
  border: 1px solid var(--select-border);
  border-radius: 12px;
  padding: 12px 44px 12px 12px; /* ruimte voor pijl rechts */
  min-height: 46px; outline: none;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent),
    0 10px 24px rgba(0,0,0,.25);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background-color .2s ease;
}
#rsv2form select:hover{ background: #181e23; }
#rsv2form select:focus{
  border-color: var(--accent);
  box-shadow:
    0 0 0 4px var(--select-focus-ring),
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
  transform: translateY(-1px);
}
/* Pijl (SVG mask) */
#rsv2form .ui-select::after{
  content: "";
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M7.41 8.58 12 13.17l4.59-4.59L18 10l-6 6-6-6z'/%3E%3C/svg%3E") no-repeat center / 18px 18px;
          mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M7.41 8.58 12 13.17l4.59-4.59L18 10l-6 6-6-6z'/%3E%3C/svg%3E") no-repeat center / 18px 18px;
  background-color: var(--accent);
  opacity: .95;
}
/* Opties donkergrijs */
#rsv2form select option{
  background-color: var(--select-bg-2);
  color: var(--select-fg);
}
/* Disabled/placeholder */
#rsv2form select:invalid,
#rsv2form select option[value=""]{ color: #9aa4ad; }

/* Mobile fine-tune */
@media (max-width: 640px){
  .rsv2-dialog{ width: 94vw; }
  #rsv2-progressbar{ max-width: 92vw; }
  :root{ --dot: 24px; --labelH: 18px; --gap: 6px; }
  #rsv2form fieldset{ padding: 18px 14px 84px; } /* extra lucht onderin op mobiel */
  #rsv2form select{ font-size: 17px; min-height: 50px; }
}
@media (prefers-reduced-motion: reduce){
  .rsv2-modal, .rsv2-dialog, #rsv2form fieldset{ transition: none !important; }
}

/* Elegante restaurant-kop voor .fs-title */
.fs-title{
  font-family: serif;                 /* jouw keuze */
  font-weight: 700;
  font-size: clamp(20px, 3.6vw, 28px);
  line-height: 1.2;
  letter-spacing: .3px;
  text-align: center;
  color: #e6ecef;                     /* leesbaar op donker; wil je accent? -> var(--accent) */
  text-wrap: balance;                 /* mooiere regelbreking */
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  /* subtiele diepte (niet schreeuwerig) */
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

/* Chique accent-underline onder de titel */
.fs-title::after{
  content: "";
  display: block;
  width: 120px;
  height: 2px;
  margin: 10px auto 2px;
  background: linear-gradient(90deg, transparent 0, var(--accent) 18%, var(--accent) 82%, transparent 100%);
  border-radius: 2px;
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* Optioneel: iets strakker op mobiel */
@media (max-width: 640px){
  .fs-title{ font-size: clamp(19px, 5vw, 24px); }
}

/* Tip: wil je de titel zélf in accent? uncomment de volgende regel */
/* .fs-title{ color: var(--accent); text-shadow: none; } */

/* === Mobile image fixes === */
@media (max-width: 1024px){
  /* Zet parallax uit op mobiel (voorkomt inzoomen) */
  header,
  .Gerechten .image,
  .fixed-image{
    background-attachment: scroll !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }

  /* Maak het grote header-logo responsief (override inline width=650px) */
  header .text img{
    width: min(300vw, 650px) !important;
    height: auto !important;
    display: block;
  }
}

/* Zorg dat content-foto's nooit raar worden uitgerekt */
.about-us .image img,
.reservation .image img,
.menu .menu-image-container .image img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain; /* extra safety; geen croppen */
}

/* Center logo + call-to-action in de hero op mobiel */
@media (max-width: 768px){
  header .text{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 100px;
    padding: 0 16px;
  }
  header .text img{
    display: block;
    margin: 0 auto;
    width: clamp(200px, 75vw, 480px);
    height: auto;
  }
  /* Als het logo echt gedraaid lijkt door een transform, haal dan dit commentaar weg: */
  /* header .text img { transform: none !important; } */
}

:root { --safe-bottom: env(safe-area-inset-bottom, 0px); }

/* Kies één van jouw klassen en laat die over: */
.scroll-indicator,
.scroll-cue,
.down-arrow{
  position: fixed;           /* of absolute binnen je header, als je dat al had */
  left: 50%;
  transform: translateX(-50%)!important;
  bottom: calc(var(--safe-bottom) + 40px) !important;  /* duwt ’m boven de iPhone URL-bar */
  z-index: 50;
}

/* voorkom dat content onder de iPhone-balk valt */
body{
  padding-bottom: calc(var(--safe-bottom) + 00px)!important;
}


/* About-us video's: zelfde layout als foto's, met radius en cover */
.about-us .image { 
  border-radius: 12px;       /* afgeronde hoeken */
  overflow: hidden;          /* snijdt video netjes af op de radius */
}

.about-us .image video{
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;       /* portretvorm; pas evt. aan naar 3/4 of 4/5 */
  height: auto;
  object-fit: cover;         /* mooi vullen, mag croppen */
  pointer-events: none;      /* niet te pauzeren/klikken */
  /* optioneel: subtiele diepte */
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}





/* ===== Reserveer floating widget ===== */
:root{ --reserve-accent:#65c1bf; }

#reserveWidget{
  position: fixed;
  left: 50%;
  bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 130%);
  opacity: 0;
  pointer-events: none;
  z-index: 9998;
  /* style matcht je grote knop */
  appearance: none;
  border: none;
  border-radius: 9999px;
  padding: 18px 24px;
  font: 700 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: .6px;
  color: #0b1414;
  background: var(--reserve-accent);
  box-shadow:
    0 14px 38px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.06) inset;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition:
    transform .42s cubic-bezier(.22,.7,.3,1),
    opacity  .24s ease;
}

/* Alleen op grotere schermen (bijv. desktops vanaf 992px) → rechts onder */
@media (min-width: 992px) {
  #reserveWidget {
    left: auto;
    right: 30px;                 /* afstand van rechterrand */
    bottom: 50px;                /* iets hoger */
    transform: translateY(130%); /* alleen verticale animatie */
  }
  #reserveWidget.is-visible {
    transform: translateY(0);
  }
}

#reserveWidget svg{ width: 22px; height: 22px; display:block; }

#reserveWidget.is-visible{
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

/* klein beetje hover/focus flair */
#reserveWidget:hover{ transform: translate(-50%, -2px); }
#reserveWidget:active{ transform: translate(-50%, 1px) scale(.98); }
#reserveWidget:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(101,193,191,.35),
    0 14px 38px rgba(0,0,0,.28);
}

/* Optioneel: op mobiel iets compacter */
@media (max-width: 480px){
  #reserveWidget{ padding: 12px 14px; font-size: 13px; }
}



  /* Reserveer-knop — donkerder basis, groeit & wordt #65c0be op hover */
  button#open-reserveer.reserveer-btn{
    --accent: #76d1d0;
    --accent-dark: #65c0be; /* ~10% donkerder */
    appearance:none; -webkit-appearance:none;
    background: var(--accent-dark) !important;
    color:#f7ffff !important;
    display:inline-flex;            /* <— flex */
    align-items:center;             /* <— verticaal centreren */
    gap:10px;
    line-height:1;                  /* <— geen baseline drift */
    font:700 16px/1 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    letter-spacing:1px;
    cursor:pointer;
    box-shadow:0 10px 24px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.08) inset;
    text-shadow:
      0 1px 0 rgba(0,0,0,.35),
      0 0 10px rgba(101,192,190,.55),
      0 0 18px rgba(101,192,190,.35);
    transform:translateZ(0);
    transition:transform .18s ease, background-color .18s ease, box-shadow .18s ease, text-shadow .18s ease;
  }
  /* SVG netjes gecentreerd tov tekst */
  button#open-reserveer.reserveer-btn .icon{
    width:1.15em; height:1.15em;
    display:block;                 /* <— geen inline-baseline */
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.25));
    position: relative;
    top: -1px; 
  }
  /* Tekst als blok + line-height 1 voor perfecte uitlijning */
  button#open-reserveer.reserveer-btn .label{
    display:block; line-height:1;
    top: 5px;
    position: relative;
  }

  button#open-reserveer.reserveer-btn:hover{
    background: var(--accent) !important;
    transform: scale(1.06) translateY(-0px);
    box-shadow:0 12px 28px rgba(0,0,0,.30), 0 12px 28px rgba(101,192,190,.18);
    text-shadow:
      0 1px 0 rgba(0,0,0,.35),
      0 0 12px rgba(101,192,190,.70),
      0 0 22px rgba(101,192,190,.45);
  }
  button#open-reserveer.reserveer-btn:active{ transform:scale(.98); }
  button#open-reserveer.reserveer-btn:focus-visible{
    outline:none;
    box-shadow:0 10px 24px rgba(101,192,190,.28), 0 10px 24px rgba(0,0,0,.25);
  }

  /* Micro-nudge optie: als het nog 1px off oogt, uncomment: */
  /* button#open-reserveer.reserveer-btn .icon{ position:relative; top:.5px; } */

  /* TikTok embed – laat zichzelf groeien, geen crop */
#media { display: block; }
#media .text {
  max-width: 1100px;
  margin-inline: auto;
}

/* wrapper = alleen styling, geen aspect-ratio forceren */
#media .tiktok-embed {
  width: 100%;
  max-width: 1100px;
  margin: 12px auto 0;
  border-radius: 12px;
  overflow: hidden;
  background: #f5f7fa;
}

/* iframe vult breedte, hoogte bepaalt hij zelf */
#media .tiktok-embed iframe {
  width: 100%;
  height: auto;      /* belangrijk: laat iframe zelf de hoogte bepalen */
  min-height: 600px; /* vangnet: genoeg ruimte op mobiel */
  border: 0;
  display: block;
}

/* mobiel: meer ruimte geven, want feed is langer */
@media (max-width: 768px){
  #media .tiktok-embed iframe {
    min-height: 700px; /* of nog hoger, afhankelijk van je widget */
  }
}

  /* lichte, subtiele kaarten – goed leesbaar op donkere pagina */
  
  .tnt-wrap{
    --card-bg:#f5f7fa;           /* lichtgrijs */
    --card-border:#e7eaef;       /* subtiele rand */
    --title:#0f172a;             /* bijna-zwart voor titels */
    --text:#1f2937;              /* donkergrijs tekst */
    --muted:#6b7280;             /* secundair */
    --accent:#11b1b8;            /* Tantunio teal voor focus/knop */
    max-width:1100px; margin:20px auto 0; padding:0 16px;
    display:grid; grid-template-columns:1fr; gap:22px;
  }
  @media (min-width:980px){ .tnt-wrap{ grid-template-columns:1fr 1fr; } }

  .tnt-card{
    background:var(--card-bg);
    border:1px solid var(--card-border);
    border-radius:14px;
    padding:18px;
    color:var(--text);
    box-shadow:0 8px 18px rgba(0,0,0,.06);
  }
  .tnt-title{ margin:0 0 12px; font-weight:800; font-size:22px; letter-spacing:.2px; color:var(--title); }

  /* Accordion */
  .tnt-acc{ border-top:1px solid var(--card-border); }
  .tnt-acc-btn{
    width:100%; text-align:left; background:transparent; border:0; padding:14px 0;
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    border-bottom:1px solid var(--card-border); cursor:pointer; color:var(--title);
  }
  .tnt-acc-btn:hover{ color:#111; }
  .tnt-plus{ position:relative; width:18px; height:18px; flex:0 0 18px; color:var(--muted); }
  .tnt-plus::before,.tnt-plus::after{
    content:""; position:absolute; left:50%; top:50%; width:12px; height:2px; background:currentColor;
    border-radius:2px; transform:translate(-50%,-50%);
  }
  .tnt-plus::after{ transform:translate(-50%,-50%) rotate(90deg); }
  .tnt-acc-btn[aria-expanded="true"] .tnt-plus{ color:#111; }
  .tnt-acc-btn[aria-expanded="true"] .tnt-plus::after{ opacity:0; }
  .tnt-acc-panel{ padding:10px 0 14px; line-height:1.55; color:var(--text); }

  /* Form */
  .tnt-form{ display:block; }
  .tnt-grid{ display:grid; grid-template-columns:1fr; gap:12px; }
  .tnt-field span{ display:block; font-size:13px; color:var(--muted); margin-bottom:6px; }
  .tnt-field input, .tnt-field select, .tnt-field textarea{
    width:100%; border:1px solid var(--card-border); border-radius:10px; padding:10px 12px;
    background:#fff; color:#0b1324; outline:none;
  }
  .tnt-field input::placeholder, .tnt-field textarea::placeholder{ color:#9aa0a6; }
  .tnt-field input:focus, .tnt-field select:focus, .tnt-field textarea:focus{
    border-color:var(--accent); box-shadow:0 0 0 3px rgba(17,177,184,.18);
  }
  .tnt-span2{ grid-column:span 1; }

  .tnt-btn{
    margin-top:4px; border:0; border-radius:10px; padding:11px 14px; font-weight:800; cursor:pointer;
    background:var(--accent); color:#071317; box-shadow:0 6px 16px rgba(17,177,184,.25);
  }
  .tnt-btn:hover{ filter:brightness(1.05); }
  .tnt-mini{ font-size:12px; color:var(--muted); margin-top:6px; }

  @media (min-width:860px){
    .tnt-grid{ grid-template-columns:repeat(2,1fr); }
    .tnt-span2{ grid-column:span 2; }
  }

  /* === Gerechten: counter weer bovenop de foto + hogere hoogte op mobiel === */
.Gerechten{ position: relative; }  /* anker voor absolute child */

.Gerechten .text{
  position: absolute;           /* zwevend boven de bg */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(100%, 1100px);
  padding: 8px 12px;
  z-index: 2;                   /* boven de foto */
}

/* achtergrond hoger zodat alles past op mobiel */
@media (max-width: 880px){
  .Gerechten .image{ height: 520px !important; }
}
@media (max-width: 360px){
  .Gerechten .image{ height: 560px !important; }
}

/* (belangrijk) maak evt. oude override ongedaan */
@media (min-width:0){
  .Gerechten .text{ top:50% !important; left:50% !important; transform:translate(-50%,-50%) !important; }
}

/* Zorg voor consistente body-font voor ALLES */
body, p, li, a, h1, h3, h4, h5, h6 {
  font-family: 'Source Sans Pro', 'Cabin', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Links netjes */
a {
  color: #0f172a;
  text-decoration: none;
  transition: color .2s ease;
}
a:hover {
  color: #11b1b8; /* je accentkleur */
}

/* Lijsten */
ul.legal-list {
  list-style: disc;
  padding-left: 20px;
}
ul.legal-list li {
  margin: 6px 0;
  line-height: 1.5;
}


/* Maak de hele nav-tegel klikbaar, niet alleen de tekst */
header nav .navigation-bar li { position: relative; }
header nav .navigation-bar li > a{
  display:block;               /* link vult de hele li */
  width:100%;
  height:100%;           /* pas aan op jouw spacing */
  text-decoration:none;
}
header nav .navigation-bar li > a .underline{
  pointer-events:none;         /* tappen op de underline triggert nog steeds de link */
}

/* Zorg dat datum en tijd velden gelijk zijn */
.ui-select input[type="date"],
.ui-select select {
  width: 100%;
  height: 48px;        /* pas dit aan naar de hoogte van je "Kies tijd" select */
  box-sizing: border-box;
  padding: 0 12px;     /* zelfde padding als select */
  font-size: 16px;     /* gelijke tekstgrootte */
  border: 1px solid #444;   /* zelfde border als select */
  border-radius: 6px;       /* zelfde afgeronde hoeken */
  background-color: #111;   /* zelfde achtergrondkleur als select */
  color: #fff;              /* tekstkleur */
  appearance: none;         /* verwijdert native iOS stijlen */
}