/* ============================================
   RESTAURANT PAGE STYLES
   ============================================
   Spezifische Styles für /restaurant
   - Farbschema: Petrol (#557277)
   - Layout: 1/6 + 2/3 + 1/6
   - Service Container: 9-spaltig
   
   WICHTIG: Viele Overrides für kucook.css
   ============================================ */

/*====================
= 1. Globale Overrides =
====================*/

/* Basis-Root-Font-Size für 1920px */
html {
  font-size: 16px; /* 1rem = 16px (Basis für 1920px) */
}

body.startseite,
body[class*="startseite"] {
  overflow: hidden;
  width: 120rem; /* 1920px / 16 = 120rem */
  height: 67.5rem; /* 1080px / 16 = 67.5rem */
  transform-origin: top left;
  max-height: 100vh;
  max-width: 100vw;
}

.page-background {
  background-color: #557277;
}

/*====================
= 2. Header (Override) =
====================*/

.kucook-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 0 4rem 0;
  min-height: 5rem; /* 80px */
  background-color: #557277;
  transition: all 0.5s ease;
}

.kucook-header.shrink {
  padding: 1rem 0;
  min-height: 6.875rem; /* 110px */
}

.kucook-header img {
  display: block;
  height: 7.5rem; /* WICHTIG: height muss gesetzt sein */
  max-height: 7.5rem; /* 120px */
  width: auto;
  z-index: 21;
  transition: max-height 0.3s ease;
  position: relative;
  left: 0.45rem;
}

.kucook-header.shrink img {
  max-height: 3.75rem; /* 60px */
}

.attributes {
  position: relative;
}

.kucook-header .header-link {
  position: absolute; /* absolut innerhalb des Headers */
  top: 12.6rem;           /* vertikal zentriert */
  right: 17.55rem;        /* Abstand vom rechten Bildschirmrand */
  transform: translateY(-50%); /* korrekt vertikal zentrieren */
  z-index: 100;
  text-decoration: none;
  transform: scale(1.4);
}

.kucook-header .stoerer-restaurant {
  display: block;     /* Bild wird Block-Level, damit margin/padding wirken */
  width: 160px;
  height: auto;
  filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.5));
  transform: scale(1);
  transition: all 0.3s ease;
}
.kucook-header.shrink .stoerer-restaurant {
  top: -5rem;
  transition: all 0.3s ease;
  transform: scale(1.4);
}
/*====================
= 3. Layout & Wrapper =
====================*/

#wrapper {
  padding-top: 20rem; /* 320px */
}

.kucook-header.shrink + #wrapper {
  padding-top: 7.5rem; /* 120px */
  transition: all 0.5s ease;
}

.bg-wrapper {
  position: relative;
}

.full-height .first-row {
  display: flex;
  width: 100%;
}

.full-height .first-row .column {
  display: flex;
  flex-direction: column;
}

.richtig-bloeder-hintergrund {
  position: absolute;
  top: 100vh;
  left: 0;
  width: 100%;
  height: 20vh;
  background-color: rgba(85, 114, 119, 1);
  z-index: -1;
}

.ce_bgimage-inside.contentwrap {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.autogrid_row.gutter_s.same_height {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/*====================
= 4. Footer (Override) =
====================*/

.kucook-footer {
  position: relative;
  bottom: auto;
  left: auto;
  width: 100%;
  background-color: #557277;
}

/*====================
= 5. Grid & Columns =
====================*/

.first-row {
  display: flex;
  width: 100%;
  align-items: stretch;
}

.first-row .column {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.column.no-pa {
  padding: 0 !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

.column.square-tile.no-pa {
  padding-top: 2vw !important;
  padding-bottom: 5vw !important;
}

/*====================
= 6. Background Colors =
====================*/

.mint {
  background-color: #aab8bb;
}

.mint.service {
  background-color: #E6E6E6;
}

.mint.veranstaltungen {
  background-color: #E6E6E6;
}

.bg-white {
  background: #fff;
}

.first-row .square-tile {
  background-color: #aab8bb;
}

/*====================
= 7. Square Tiles & Images =
====================*/

.square-image {
  width: 100%;
  display: flex;
  overflow: hidden;
  background: #f0f0f0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  flex: 1 1 auto;
}

.square-image img {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  object-position: center !important;
  padding: 0;
}

.square-tile {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.square-tile p,
.square-tile h1 {
  padding-left: 0.9375rem; /* 15px */
}

div .square-tile .attributes,
div.veranstaltungen .attributes {
  padding: 1vw;
  margin-bottom: -2vw;
}

.square-tile .same-height-wrap {
  flex: 1 1 auto;
  overflow: auto;
  min-height: 0;
}

/* Image & Tile Height Sync */
.first-row,
.tile-row.same_height {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
}

.square-img,
.square-tile {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.square-img .ce_image,
.square-img .ce_image .image_container {
  flex: 1 1 auto;
  display: flex;
  height: 100%;
}

.square-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.square-tile .same-height-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
}

/*====================
= 8. Typography Helpers =
====================*/

.h2-rot,
.h2-rot p {
  text-transform: uppercase;
  color: #CF404D;
  font-weight: 600;
}

.weiss p {
  color: white;
}

.h2-weiss,
.h2-weiss p {
  text-transform: uppercase;
  color: white;
  font-weight: 600;
}

.h3-weiss {
  color: white;
}

h2.news-subheadline {
  font-weight: 600 !important;
}

div.mod_newslist.block header h2 {
  margin-top: 0;
}

div.mod_newslist.block p,
div.mod_newslist.block h1 {
  padding-left: 0;
}

/*====================
= 9. Service Container =
====================*/

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

.service-container .column.service.icon {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.service-container .column.service.icon .ce_text.block {
  margin: 0;
}

.service-container .column.service.icon figure.image_container {
  height: clamp(3.5rem, 9vw, 6.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 .5rem 0;
  box-sizing: border-box;
  overflow: hidden;
}

.service-container .column.service.icon figure.image_container img {
  max-height: 100%;
  width: auto;
  display: block;
}

.service-container .column.service.icon h3 {
  margin: 0.5rem 0 0.25rem 0;
  line-height: 1.1;
}

.service-container .column.service.icon .button_wrapper {
  margin-top: auto;
  width: 100%;
  display: flex;
  justify-content: center;
}

.service-container .column.service.icon .ce_text {
  display: flex;
  flex-direction: column;
}

.service-container .h2-rot {
  top: auto;
  margin-top: -2rem;
}

.service-container img {
  width: 70%;
  height: auto;
  margin-bottom: 0.5rem;
  position: static;
  margin-left: auto;
  margin-right: auto;
}

.column.mint.service.icon.col_2 {
  padding-bottom: 1.875rem; /* 30px */
}

/*====================
= 10. Buttons =
====================*/

.btn-red-white {
  background: #CF404D;
  border-radius: 0.25rem; /* 4px */
  font-weight: bold;
  color: white;
  max-width: 50%;
  text-align: center;
  display: inline-block;
  width: auto;
  padding: 0.1rem 1.5rem;
  transition: transform 0.5s;
}

.btn-red-white.larger {
  max-width: 70%;
}

.btn-red-white:hover {
  transform: scale(1.2);
}

.btn-red-white a,
.btn-red-white p {
  display: inline-block !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

.ce_text.button_wrapper {
  overflow: visible;
}

.ce_text.button_wrapper.block {
  overflow: visible !important;
}

/*====================
= 11. Restaurant Body =
====================*/

.restaurant-body p {
  font-size: 1.375rem; /* 22px */
  line-height: 2rem; /* 32px */
}

/*====================
= 12. Utility Classes =
====================*/

.overflow {
  overflow: visible !important;
}

.marto {
  margin-top: -1.7rem;
}

.separator-star {
  transform: scale(1.3);
  margin-bottom: -0.75rem !important; /* -12px */
}

.half-right {
  width: 50%;
  margin-left: auto;
  text-align: center;
  box-sizing: border-box;
}

.half-right.kueche {
  padding: 0 1rem;
}

/*====================
= 13. Instagram Link =
====================*/

.instagram-link {
  padding-left: 2vw;
  text-align: left;
  display: flex;
  align-items: center;
}

.instagram-inline-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: #CF404D;
  font-weight: 600;
  font-size: 1.2rem; /* ca. 19px */
  transition: color 0.3s ease, text-decoration 0.3s ease;
}

.instagram-inline-link:hover {
  text-decoration: underline;
  color: #CF404D;
}

.instagram-inline-link img {
  width: 1.25rem; /* ca. 20px */
  height: auto;
  display: block;
}

/*====================
= 14. Media Queries - Desktop =
====================*/

@media only screen and (max-width: 99.3125rem) { /* 1589px */
  .restaurant-body p {
    font-size: 1.125rem; /* 18px */
    line-height: 1.75rem; /* 28px */
  }
}

@media only screen and (max-width: 83.125rem) { /* 1330px */
  h1 {
    font-size: 1.5rem; /* 24px */
  }
  
  .restaurant-body p {
    font-size: 1rem; /* 16px */
    line-height: 1.625rem; /* 26px */
  }
}

@media only screen and (max-width: 73.5rem) { /* 1176px */
  h1 {
    font-size: 1.25rem; /* 20px */
  }
  
  .restaurant-body p {
    font-size: 0.875rem; /* 14px */
    line-height: 1.375rem; /* 22px */
  }
}

@media only screen and (max-width: 65rem) { /* 1040px */
  .ce_text.h2-rot.block p {
    margin-bottom: 1.25rem; /* 20px */
  }
  
  .ce_text.marto.block h1 {
    margin: 2em 0;
    font-size: 1.5rem; /* 24px */
  }
  .kucook-header .stoerer-restaurant {
    display: block;     /* Bild wird Block-Level, damit margin/padding wirken */
    width: 160px;
    height: auto;
    filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.5));
    transform: scale(0.8);
    transition: all 0.3s ease;
    position: relative;
    bottom: 3rem;
    left: 6rem !important;
  }
  .kucook-header.shrink .stoerer-restaurant {
    top: 3rem !important;
    transition: all 0.3s ease;
  }    
}

@media only screen and (max-width: 64.875rem) { /* 1038px */
  .ce_text.h3-schwarz.block h1 {
    font-size: 0.9375rem; /* 15px */
    margin: 0.25rem 0 0 0; /* 4px */
  }
  
  .ce_text.h2-rot.block p {
    font-size: 0.875rem; /* 14px */
    margin: 0;
  }
  
  .ce_text.restaurant-body.block p {
    margin: 0.3125rem 0; /* 5px */
    font-size: 0.75rem; /* 12px */
    line-height: 1.125rem; /* 18px */
  }
}

/* Tablet View */
@media (max-width: 51.25rem) and (min-width: 47.9375rem) { /* 820px - 767px */
  .first-row,
  .tile-row.same_height {
    align-items: stretch;
  }

  .square-img .ce_image,
  .square-img .ce_image .image_container {
    height: 100%;
  }

  .square-img img {
    height: 100%;
    object-fit: cover;
  }

  .square-tile {
    height: auto !important;
  }

  .square-tile .same-height-wrap {
    height: auto;
  }
}

@media only screen and (min-width: 49.1875rem) { /* 787px */
  .mobile-view-only {
    display: none;
  }
  
  .half-right.button_wrapper.speisekarte {
    max-width: 38%;
  }
}

/*====================
= 15. Media Queries - Mobile =
====================*/

@media only screen and (max-width: 49.25rem) { /* 788px */
  .mobile-view-non {
    display: none !important;
  }
  
  .mobile-view-only {
    display: block;
  }
  
  .order-1 {
    order: 1 !important;
  }
  
  .order-2 {
    order: 2 !important;
  }
  
  .order-2 .half-right {
    margin-left: 0;
    width: 100%;
    color: black;
  }
  
  .order-2 div.half-right p {
    color: black;
  }
  
  .order-2 .button_wrapper {
    max-width: 50%;
    margin: 0 auto;
  }
  
  .order-2 .button_wrapper p {
    padding: 0;
  }
  
  #article-49 .container .Aktuelles .col_2,
  #article-49 .container .Aktuelles .col_4 {
    margin-bottom: 0 !important;
  }
  
  .instagram-link {
    padding-left: 3vw;
  }
}

@media only screen and (max-width: 49.1875rem) { /* 787px */
  #wrapper {
    margin-top: 0;
    padding-top: 13.75rem; /* 220px */
  }
  
  .no-mobile {
    display: none;
  }
  
  .column.mint.service.icon.col_2,
  .column.bg-white.col_8,
  div.column.col_8 {
    margin-bottom: 0 !important;
    padding-bottom: 1.875rem; /* 30px */
  }
  
  .service-container {
    grid-auto-flow: row;
  }
  
  .service-container .column.service.icon figure.image_container {
    height: clamp(3rem, 12vw, 5rem);
  }
}

@media only screen and (max-width: 47.9375rem) { /* 767px */
  .ce_text.h3-schwarz.block h1 {
    font-size: 2.25rem; /* 36px */
    margin: 1.5rem 0 0 0; /* 24px */
  }
  
  .ce_text.h2-rot.block p {
    font-size: 1.875rem; /* 30px */
    margin: 0;
    margin: 1.5rem 0 0 0; /* 24px */
  }
  
  .ce_text.restaurant-body.block p {
    margin: 0.75rem 0 0 0; /* 12px */
    font-size: 1.875rem; /* 30px */
    line-height: 2.5rem; /* 40px */
  }
  
  /* Mobile - Spalten untereinander */
  .first-row,
  .tile-row.same_height {
    flex-direction: column;
  }

  .square-img,
  .square-tile {
    width: 100%;
  }

  .square-img img {
    height: auto;
    object-fit: cover;
  }
}

@media only screen and (min-width: 47.9375rem) and (max-width: 48.25rem) { /* 767px - 772px */
  .instagram-link {
    padding-left: 5vw;
  }
}

@media only screen and (max-width: 36.5625rem) { /* 585px */
  .ce_text.h3-schwarz.block h1 {
    font-size: 1.5rem; /* 24px */
    margin: 0.75rem 0 0 0; /* 12px */
  }
  
  .ce_text.h2-rot.block p {
    font-size: 1.125rem; /* 18px */
    margin: 0;
    margin: 0.75rem 0 0 0; /* 12px */
  }
  
  .ce_text.restaurant-body.block p {
    margin: 0.75rem 0 0 0; /* 12px */
    font-size: 1.125rem; /* 18px */
    line-height: 1.75rem; /* 28px */
  }
}

/*====================
= 16. Hochskalierung (Override) =
====================*/

/* Skalierung mit Transform für verschiedene Auflösungen */
@media screen and (min-width: 2560px) {
  html { font-size: 21.33px; } /* 16 * 1.3333 */
  .stoerer-restaurant {
    transform: scale(2) !important;
  }
}

@media screen and (min-width: 3008px) {
  html { font-size: 25.07px; } /* 16 * 1.5667 */
  .stoerer-restaurant {
    transform: scale(2.2) !important;
  }
}

@media screen and (min-width: 3360px) {
  html { font-size: 28px; } /* 16 * 1.75 */
  .stoerer-restaurant {
    transform: scale(2.4) !important;
  }
}

@media screen and (min-width: 3840px) {
  html { font-size: 32px; } /* 16 * 2 */
  .stoerer {
    transform: scale(2.6) !important;
  }
}
/* FOOTER BTN OVERRIDE - muss am Ende stehen */
.kucook-footer .btn-phone {
  margin: auto 0 0.9375rem 0;
  display: block;
}
/* Font-Size flüssig skalieren */
html {
  font-size: clamp(16px, 0.7vw, 32px); /* Minimum 16px, Maximum 32px, wächst mit der Bildschirmbreite */
}

/* Stoerer flüssig skalieren */
.stoerer-restaurant {
  width: clamp(160px, 5vw, 420px);  /* Minimum 80px, Maximum 420px, wächst mit Bildschirmbreite */
  height: auto;
  filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.5));
  transform: scale(1); /* Optional: für kleine zusätzliche Anpassungen */
  transition: all 0.3s ease;
}