/* ============================================
   CATERING
   ============================================ */
/* ============================================
   HEADER & NAVIGATION
   ============================================ */
.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: #fff;
  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 */
}
.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-catering {
  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-catering {
  top: -5rem;
  transition: all 0.3s ease;
  transform: scale(1.4);
}
/* ============================================
   LAYOUT & SPACING
   ============================================ */
#wrapper {
  padding-top: 20rem; /* 320px */
}
.kucook-header.shrink + #wrapper {
  padding-top: 7.5rem; /* 120px */
  transition: all 0.5s ease;
}
.page-background {
  background-color: #ffffff;
}
.bg-white {
  /*background: #fff;*/
  background: #D4DBDD;
}
.bg-service-tile {
  background-color: #E6E6E6;
}
.richtig-bloeder-hintergrund {
  position: absolute;
  top: 100vh;
  left: 0;
  width: 100%;
  height: 20vh;
  background-color: #ffffff !important;
  z-index: -1;
}
/* ============================================
   GRID & COLUMNS
   ============================================ */
.first-row, .tile-row {
  display: flex;
  width: 100%;
}
.first-row .column, .tile-row .column {
  display: flex;
  flex-direction: column;
  padding: 0;
}
.column.no-pa {
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box;
}
.ce_bgimage-inside.contentwrap, .autogrid_row.gutter_s.same_height {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* ============================================
   TILES & IMAGES
   ============================================ */
.square-image {
  width: 100%;
  display: flex;
  overflow: hidden;
  background: #f0f0f0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  flex: 1 1 auto; /* Bild füllt verfügbaren Platz */
}
.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;
  /*background-color: #E6E6E6;*/
  background-color: #D4DBDD;
}
div .square-tile .attributes, div.veranstaltungen .attributes, div.attributes {
  padding: 1vw !important;
  margin-bottom: -2vw;
}
.square-tile .same-height-wrap {
  flex: 1 1 auto; /* Textbox füllt die gleiche Höhe */
  overflow: auto; /* damit Text nicht abgeschnitten wird */
  min-height: 0; /* wichtig für Flexbox */
}
.column.square-tile.no-pa.col_4 .attributes {
  background-color: #d4dbdd !important;
}
.column.square-tile.no-pa div.ce_text.h2-rot {
  padding-top: 1vw !important;
}
.column.square-tile.no-pa.veranstaltungen div.ce_text.h2-rot {
  padding-bottom: 1vw !important;
}
.square-tile p, .square-tile h1 {
  padding-left: calc(1vw + 0.9375rem); /* 15px */
  padding-right: calc(1vw + 0.9375rem); /* 15px */
}
.column.square-tile.no-pa {
  padding-top: 2vw !important;
  padding-bottom: 5vw !important;
}
.gray-background {
  background-color: #D4DBDD !important;
}
/* ============================================
   TYPOGRAPHY & TEXT STYLES
   ============================================ */
.h2-rot, .h2-rot p {
  text-transform: uppercase;
  color: #CF404D;
  font-weight: 600;
}
.h2-weiss, .h2-weiss p {
  text-transform: uppercase;
  color: white;
  font-weight: 600;
}
.h3-weiss {
  color: white;
}
.weiss p {
  color: white;
}
.restaurant-body p {
  font-size: 1.375rem; /* 22px */
  line-height: 2rem; /* 32px */
}
div.ce_text .restaurant-body p {
  padding-bottom: 2rem;
}
/* ============================================
   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);*/
  transform: none !important;
}
.service-container .column.service.icon .button_wrapper {
  margin-top: auto;
  width: 100%;
  display: flex;
  justify-content: center;
}
/* ============================================
   DECORATIVE ELEMENTS
   ============================================ */
.separator-star {
  display: inline-block;
  position: relative !important;
  font-size: 1.3em;
  transform: none !important;
  top: 0.3125rem !important; /* 5px */
  margin-right: 0.375rem; /* 6px */
  color: #CF404D;
  font-weight: 700;
  line-height: 1;
}
.separator-star-center {
  display: block;
  text-align: center;
  font-size: 1.3em;
  transform: none !important;
  color: #CF404D;
  font-weight: 700;
}
/* ==================================== 
SERVICE-CONTAINER FIX (Contao-kompatibel)
==================================== */
.service-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  width: auto;
  margin: 0 calc(100vw / 6);
  background-color: #fff;
} /* Wichtig: Autogrid neutralisieren */
.autogrid_row.service-container > .column {
  float: none !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 0;
}
.service-container > .bg-service-tile.col_8 {
  flex: 0 0 100%;
  text-align: center;
  margin-left: calc(100vw/6) !important;
  margin-right: calc(100vw/6) !important;
} /* Spalten allgemein */
.service-container > .one-ninth-width-column {
  flex: 0 0 calc(11.1111% * 2);
  max-width: calc(11.1111% * 2);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  background-color: #E6E6E6;
  box-sizing: border-box;
  padding: 1.5rem 0;
}
.service-container .one-ninth-width-column .ce_image {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  margin-bottom: 1rem;
} /* Bilder als Cover */ .service-container .one-ninth-width-column figure.image_container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
  margin: 0 0 1rem 0;
}
.service-container .one-ninth-width-column figure.image_container img {
  width: 5rem; /* 80px */
  height: auto;
  display: block;
  object-fit: contain;
}
.service-container .one-ninth-width-column figure.image_container img {
  width: auto; /* 80px */
  height: 100%;
  display: block;
  object-fit: contain;

}
#picto-tagung img {
  max-height: 120px;
}
#picto-hochzeit img {
  max-height: 100px;
}
#picto-firmenenevents img {
  max-height: 130px;
}
/* Inhalt */
.service-container .one-ninth-width-column .attributes {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
}
/* Überschriften & Buttons */
.service-container .one-ninth-width-column h3 {
  margin: 0.5rem 0;
  font-size: 1.1rem;
}
.service-container .one-ninth-width-column .button_wrapper {
  margin-top: auto;
}

/* Abschlussblock (wie Header, 2/3 zentriert) */
.service-container > .icon-block-veranstaltungen.col_8 {
  flex: 0 0 calc(100vw / 3 *2);
  text-align: left;
  margin-top: 3rem;
  display: block;
  margin-left: calc(100vw/6) !important;
  margin-right: calc(100vw/6) !important;
  box-sizing: border-box;
  background-color: #e6e6e6 !important;
}
.restaurant-body.catering-highlights.iconblock-footer p {
  margin-left: calc(100vw/6) !important;
  margin-right: calc(100vw/6) !important;
}

.service-container .one-ninth-width-column .ce_image {
  display: flex;
  align-items: flex-end; /* <– NEU: Icons unten bündig */
  justify-content: center;
  height: 150px; /* Fixe Höhe für alle Icon-Boxen, anpassbar */
  margin-bottom: 1rem;
}

@media only screen and (max-width: 47.9375rem) { /* 767px */
  .service-container > .icon-block-veranstaltungen.col_8 {
    padding-left:1vw !important;
  }
}
/* ====================================
3 Spalten bei mittleren Screens (<1380px)
==================================== */
@media (max-width: 86.25rem) { /* 1380px */
  /* Grundlayout: Flex + Wrap */
  .service-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 calc(100% / 6) !important;
    margin: 0 !important;
    gap: 0;
  }
  .service-container > .bg-service-tile.col_8 {
    margin: 0 !important;
  }
  .column.bg-service-tile.col_8 {
    max-width: 100% !important;
  }
  /* Jede Kachel = 33.3333% für 3 Spalten */
  .service-container > .one-ninth-width-column {
    flex: 0 0 33.33333% !important;
    max-width: 33.33333% !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    background-color: #E6E6E6;
    box-sizing: border-box;
    padding: 1.5rem 0;
  }
  /* Optional: Bilder & Buttons */
  .service-container .ce_image img {
    width: 5rem; /* 80px */
    height: auto;
  }
  .service-container .button_wrapper .btn-red-white {
    max-width: 70%;
    margin-top: auto;
  }
  .service-container > .icon-block-veranstaltungen.col_8 {
    max-width: 100% !important;
  }
}
/* 2 Spalten auf Mobile */
@media (max-width: 49.25rem) { /* 787px */
  .service-container {
    margin: 0 !important;
  }
  .service-container > .one-ninth-width-column {
    flex: 0 0 66.66% !important;
    max-width: 66.66% !important;
    margin: 0 !important;
  }
  .column.page-background.one-ninth-width-column.col_4 {
    margin-bottom: 0;
  }
  .service-container, .service-container > .icon-block-veranstaltungen.col_8, .autogrid_row.service-container.gutter_none {
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 100%;
  }
  .restaurant-body.catering-highlights.iconblock-footer p {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 1rem !important;
    padding-left: 2vw;
  }
  .pfirsich {
    margin: 0 !important;
  }
}
/* ============================================
   FOOTER
   ============================================ */
.kucook-footer {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  background-color: #ffffff !important;
}
.kucook-footer .footer-left, .kucook-footer .footer-center, .kucook-footer .footer-left a, .footer-center > a {
  color: #557277 !important;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.half-right {
  width: 50%;
  margin-left: auto;
  text-align: center;
  box-sizing: border-box;
}
/* ============================================
   CATERING PAGE SPECIFIC
   ============================================ */
.catering .square-tile {
  background-color: #ffffff;
  color: #557277;
}
.catering .square-tile .attributes {
  padding: 1.5vw;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.catering .h3-schwarz h1, .catering .restaurant-body p {
  color: #000;
}
.catering .first-row, .catering .tile-row.same_height {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
}
.catering .square-img, .catering .square-tile {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.catering .square-img .ce_image, .catering .square-img .ce_image .image_container {
  flex: 1 1 auto;
  display: flex;
  height: 100%;
}
.catering .square-tile .same-height-wrap {
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-start;
  min-height: 0;
  overflow: visible;
  flex-direction: column;
}
.square-img .same-height-wrap {
  display: block !important;
  flex: none !important;
}
.square-img .attributes, .square-img .same-height-wrap {
  padding: 0;
  margin: 0;
}
.first-row.same_height, .tile-row.same_height {
  align-items: stretch;
}
/* ============================================
   RESPONSIVE - DESKTOP/TABLET
   ============================================ */
@media only screen and (max-width: 99.3125rem) { /* 1589px */
  .restaurant-body p, .catering .restaurant-body p {
    font-size: 1.125rem; /* 18px */
    line-height: 1.75rem; /* 28px */
  }
}
@media only screen and (max-width: 83.125rem) { /* 1330px */
  h1, .catering h1 {
    font-size: 1.5rem; /* 24px */
  }
  .restaurant-body p, .catering .restaurant-body p {
    font-size: 1rem; /* 16px */
    line-height: 1.625rem; /* 26px */
  }
}
@media only screen and (max-width: 73.5rem) { /* 1176px */
  h1, .catering h1 {
    font-size: 1.25rem; /* 20px */
  }
  .restaurant-body p, .catering .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: 2rem 0;*/
    font-size: 1.5rem; /* 24px */
  }
  .kucook-header .stoerer-catering {
    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-catering {
    top: 3rem;
    transition: all 0.3s ease;
    transform: scale(1.4);
  }  
}
@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 */
  }
}
@media (max-width: 51.25rem) and (min-width: 47.9375rem) { /* 820px - 767px */
  .catering .first-row, .catering .tile-row.same_height {
    align-items: stretch;
  }
  .catering .square-img .ce_image, .catering .square-img .ce_image .image_container {
    height: 100%;
  }
  .catering .square-img img {
    height: 100%;
    object-fit: cover;
  }
  .catering .square-tile {
    height: auto !important;
  }
  .catering .square-tile .same-height-wrap {
    height: auto;
  }
}

@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: 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 */
  }
  .catering .first-row, .catering .tile-row.same_height {
    flex-direction: column;
  }
  .catering .square-img, .catering .square-tile {
    width: 100%;
    height: auto;
  }
  .catering .square-img img {
    height: auto;
  }
}
@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.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 */
  }
}
.enlarger {
  height: 100% !important;
}
.one-ninth-width-column {
  max-width: calc(100%/9);
  background-color: #E6E6E6;
}
/* ============================================
   CATERING PAGE CSS
   ============================================ */
/* ============================================
   GRID & ROWS
   ============================================ */
.catering .first-row.same_height, .catering .tile-row.same_height {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch; /* gleiche Höhe für alle Spalten */
}
.catering .first-row, .catering .tile-row {
  display: flex;
  width: 100%;
}
/* ============================================
   COLUMNS
   ============================================ */
.catering .column {
  display: flex;
  flex-direction: column;
  padding: 0;
  box-sizing: border-box;
}
.catering .column.no-pa {
  padding: 0 !important;
  margin: 0 !important;
}
/* ============================================
   SQUARE TILES (Textspalten)
   ============================================ */
.catering .square-tile {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto; /* gleiche Höhe wie Bildspalte */
  justify-content: flex-end;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.catering .square-tile .same-height-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto; /* wächst mit Inhalt */
  min-height: 0; /* wichtig für Flexbox */
  overflow: visible;
}
.catering .square-tile .attributes {
  padding: 1vw;
  margin-bottom: -2vw;
}
/* ============================================
   SQUARE IMAGES (Bildspalten)
   ============================================ */
.catering .square-img {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto; /* gleiche Höhe wie Textspalte */
  width: 100%;
  overflow: hidden;
}
.catering .square-img .ce_image, .catering .square-img .ce_image .image_container {
  display: flex;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0; /* zwingt Flexbox zur Höhe der Textspalte */
  overflow: hidden;
}
.catering .square-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* ============================================
   TYPOGRAPHY
   ============================================ */
.catering .restaurant-body p {
  font-size: 1.375rem; /* 22px */
  line-height: 2rem; /* 32px */
  color: #000;
}
.catering .h3-schwarz h1 {
  color: #000;
}
.catering .h2-rot, .catering .h2-rot p {
  text-transform: uppercase;
  color: #CF404D;
  font-weight: 600;
}
/* ============================================
   IMAGE & TILE HEIGHT SYNC – FINAL FIX
   ============================================ */
/* Baseline für alle größeren Viewports */
.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;
}
/* Textbox darf beliebig hoch sein – wächst mit Inhalt */
.square-tile .same-height-wrap {
  display: flex;
  flex-direction: column;
  /*justify-content: center;*/
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
}
/* Für mittlere Viewports (768–820 px) – kein Gap mehr */
@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;
  }
}
/* Mobile – Spalten untereinander */
@media (max-width: 47.9375rem) { /* 767px */
  .first-row, .tile-row.same_height {
    flex-direction: column;
  }
  .square-img, .square-tile {
    width: 100%;
  }
  .square-img img {
    height: auto;
    object-fit: cover;
  }
}
@media (max-width: 59.375rem) and (min-width: 47.9375rem) { /* 950px - 767px */
  .catering .first-row.same_height, .catering .tile-row.same_height {
    flex-wrap: wrap; /* vorher nowrap */
    align-items: stretch;
  }
  .catering .square-img, .catering .square-tile {
    flex: 1 1 100%; /* flex-grow/flex-basis anpassen */
    min-width: 100%;
    height: auto; /* zwingt Bilder, sich an Spalte zu orientieren */
  }
  .catering .square-img .ce_image, .catering .square-img .ce_image .image_container {
    height: auto !important;
  }
  .catering .square-img img {
    height: auto !important;
  }
}
.column.no-pa > .attributes {
  padding: 0 !important; /* Optional: erzwingt Padding-freiheit */
  margin: 0 !important; /* Optional: falls margin stört */
}
/* Catering page: mobile adjustments */
@media (max-width: 48rem) { /* 768px */
  /* Reduziere den unteren Abstand für alle restaurant-body Texte */
  .ce_text.restaurant-body p {
    padding-bottom: 1rem; /* vorher 2rem auf Desktop, kleiner auf Mobile */
    margin-bottom: 0.5rem; /* optional */
  }
  /* Optional: Spaltenhöhe auf auto setzen, damit same-height-wrap nicht mehr zwingt */
  .same-height-wrap {
    min-height: auto !important;
  }
  /* Optional: Falls die Tiles zu eng sind */
  .tile-row .column {
    flex: 1 1 100%; /* jede Spalte nimmt volle Breite */
  }
}
/* Mobile: mehr Abstand am Ende der Tiles */
@media (max-width: 47.9375rem) { /* 767px */
  .catering .square-tile {
    padding-bottom: 2rem; /* oder 3rem, je nach Bedarf */
  }
  /* Text bleibt trotzdem sauber */
  .catering .restaurant-body p {
    margin-bottom: 0; /* Padding übernimmt den Abstand */
  }
  /* Flexbox-Zwang aufheben */
  .catering .square-tile .same-height-wrap {
    height: auto !important;
    min-height: 0 !important;
  }
}

/* =============================
   MOBILE-ANPASSUNGEN
   ============================= */
@media (max-width: 48rem) {
  .image_container img {
  position: relative !important;
  object-fit: cover !important;
  }
  .column.square-tile.no-pa.col_4 .attributes {
    padding-bottom: 2rem !important;
  }
}

/*====================
= 6. Hochskalierung mit rem-Referenz =
====================*/

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

/* Wrapper um die Startseite, falls nicht schon vorhanden */
body.startseite, body[class*="startseite"] {
  overflow: hidden;          /* verhindert Scrollbars */
  width: 120rem;             /* 1920px / 16 = 120rem */
  height: 67.5rem;           /* 1080px / 16 = 67.5rem */
  transform-origin: top left;
}

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

@media screen and (min-width: 3008px) {
  html { font-size: 25.07px; } /* 16 * 1.5667 */
}

@media screen and (min-width: 3360px) {
  html { font-size: 28px; } /* 16 * 1.75 */
}

@media screen and (min-width: 3840px) {
  html { font-size: 32px; } /* 16 * 2 */
}

/* max 100% viewport */
body.startseite {
  max-height: 100vh;
  max-width: 100vw;
}
@media only screen and (max-width: 49.25rem) { /* 788px */
  /* Der ganze Service-Container wird gestapelt */
  .autogrid_row.service-container.gutter_none {
    flex-direction: column !important;
    align-items: center;
      display: flex;
  }
  /* Jede Spalte nimmt volle Breite */
  .autogrid_row.service-container.gutter_none .one-ninth-width-column {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 2rem; /* etwas Abstand zwischen den Elementen */
    padding: 2rem 0;
  }

  /* Bilder zentriert und kleiner */
  .autogrid_row.service-container.gutter_none .one-ninth-width-column figure.image_container img {
    /*width: 4rem;*/
  }

  /* Buttons zentriert */
  .autogrid_row.service-container.gutter_none .one-ninth-width-column .button_wrapper {
    margin-top: 1rem;
  }
  .maxwidth-788px-display-none {
  }
  .service-container > .one-ninth-width-column,
  div.column.no-mobile.no-pa.icon-block-veranstaltungen.col_8 {
    flex: 0 0 66.66% !important;
    max-width: 66.66% !important;
    margin: 0 !important;
  }
}
/* ============================================
   RESPONSIVE - MOBILE
   ============================================ */
@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);
  }
  .catering .square-image, .catering .square-tile {
    aspect-ratio: auto;
  }
  .catering .restaurant-body p {
    font-size: 1.125rem; /* 18px */
    line-height: 1.75rem; /* 28px */
  }
  .service-container > .one-ninth-width-column,
  div.column.no-mobile.no-pa.icon-block-veranstaltungen.col_8 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}
  .kucook-footer .btn-phone {
    margin: auto 0 0.9375rem 0;
    display: block;
  }
/*====================
= 10. Hochskalierung =
====================*/

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

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

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

@media screen and (min-width: 3840px) {
  html { font-size: 32px; } /* 16 * 2 */
  .stoerer-catering {
    transform: scale(2.6) !important;
  }
}
  
  /* 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-catering {
  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;
}

/* ###### EASTEREGG ###### */
/* TAGUNG: Fallen wie ein Stein */
.fall-like-stone {
  animation: fallDown 1s ease-in forwards;
}

@keyframes fallDown {
  0% { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(800px) rotate(40deg); opacity: 0; }
}

/* HOCHZEIT: Aufblasen + Platzen */
.inflate-pop {
  animation: inflate 0.7s ease-out forwards, pop 0.1s ease-out forwards 0.7s;
}

@keyframes inflate {
  0% { transform: scale(1); }
  100% { transform: scale(2.5); }
}
@keyframes pop {
  0% { opacity: 1; transform: scale(2.5); }
  100% { opacity: 0; transform: scale(0); }
}

/* FIRMENEVENTS: Explodieren in Stücke */
.explode-piece {
  position: absolute;
  pointer-events: none;
  animation: explodeAnim 0.7s ease-out forwards;
}

@keyframes explodeAnim {
  from { transform: translate(0,0) rotate(0); opacity: 1; }
  to   { transform: translate(var(--x), var(--y)) rotate(720deg); opacity: 0; }
}