/* --- MAX WIDTH: 1860px --- */
@media only screen and (max-width: 1860px) {
  /* no about image positioning here anymore */
}

/* --- MAX WIDTH: 1640px --- */
@media only screen and (max-width: 1640px) {
  #Speisekarte { width: 90%; }
  #Logo { right: 5%; }
}

/* --- MAX WIDTH: 1420px --- */
@media only screen and (max-width: 1420px) {
  .item { padding: 0px 2%; }

  #Logo {
    top: 75px;
    right: 5%;
  }

  #Speisekarte { width: 95%; }
  #SeparatorAbout { height: 650px; }
}

/* --- MAX WIDTH: 1280px --- */
@media only screen and (max-width: 1280px) {
  .item { padding: 0px 1%; }

  #SeparatorAbout { height: 870px; }
  .absatz { width: 100%; }

  #SeparatorKontakt{
    height: 250px;
    width: 100%;
  }

  .contact-form-container{ width: 75%; }
}

/* --- MAX WIDTH: 1100px --- */
@media only screen and (max-width: 1100px) {
  #indexPage{ width: 85%; }
  .menu-primary-container{ width: 100%; }
}

/* --- MAX WIDTH: 1020px --- */
@media only screen and (max-width: 1020px) {
  #SeparatorKontakt{
    width: 75%;
    height: 650px;
  }

  #SeparatorKontakt .absatz{ width: 85%; }
  #oeffnungszeiten{ width: 95%; }

  .container{ height: auto; }
  .container .item{ width: 90%; }

  .containerDrinks .item p{ text-align: center !important; }
  .containerDrinks .item h4{
    text-align: center !important;
    margin-bottom: 10px !important;
  }

  .contact-form-container{ width: 85%; }
}

/* --- MAX WIDTH: 1000px --- */
@media only screen and (max-width: 1000px) {
  .contact-hours-banner{
    flex-direction: column;
    margin-top: 250px;      /* was 200px */
    margin-bottom: 250px;   /* was 250px */
 	justify-content: center;
	}

  .contact-hours-trans p,
  .contact-hours-trans h2
  {
    color: var(--blue);
  }

  .basic-button-w{
    border: 2px solid var(--blue);
    background: linear-gradient(to left, var(--blue) 50%, var(--white) 50%) right;
    background-size: 200%;
  }

  .basic-button-w a{ color: var(--white); }
  .basic-button-w:hover a{ color: var(--blue); }
}

/* --- MAX WIDTH: 860px --- */
@media only screen and (max-width: 860px) {
  #SeparatorAbout{ height: 940px; }
	.wm .wp-block-image img {height: auto !important;}
}

/* --- DESKTOP MENU SHOW --- */
@media only screen and (min-width: 915px){
  /* show desktop nav */
  .menu-primary-container{ display: flex !important; }
  .desktop-menu{ display: flex !important; }

  /* hide mobile UI */
  .mobile-menu{ display: none !important; }
  .menu-toggle{ display: none !important; }
  .mobile-bar-left{ display: none !important; }

  /* safety: hide backdrop if present */
  #mobile-backdrop{ display: none !important; }
}

/* --- MOBILE MENU SHOW --- */
@media only screen and (max-width: 914px){
  /* hide desktop nav wrapper completely (prevents layout weirdness) */
  .menu-primary-container{ display: none !important; }
  .desktop-menu{ display: none !important; }

  /* show mobile UI */
  .menu-toggle{ display: flex !important; }
  .mobile-menu{ display: block !important; }
  .mobile-bar-left{ display: flex !important; }
  .mobile-current-title{ display: block !important; }

  .Seite{
    width: 100%;
    padding-left: 0%;
    padding-right: 0%;
  }

  #Speisekarte, #dailyMenu{ width: 100%; }

  .gallery{
    width: 100%;
    margin: 0 auto;
  }

  .gallery .wp-block-image {
    padding: 10px;
    height: 100%;
  }

  #whitywhite{
    left: 20px;
    bottom: 55px; /* leave room for copyright line */
  }

  #whitywhite img{
    width: 160px;
    height: auto;
    max-width: 60vw;
  }
}

/* --- MAX WIDTH: 750px --- */
@media only screen and (max-width: 750px) {
  #CircleMap{
    width: 100%;
    max-height: var(--logo-max);
    max-width: var(--logo-max);
    background-color: rgba(255,236,200,0);
    border-radius: 50%;
    display: inline-block;
  }

  #Logo{ display: none; }

  #SeparatorAbout{ height: 1400px; }

  .contact-form-container{ width: 95%; }
}

/* --- MAX WIDTH: 625px --- */
@media only screen and (max-width: 625px) {
  /* no about image positioning here anymore */
}