@font-face {
  font-family: "Steelfish";
  src: url("/wp-content/themes/henrii-divi-child/assets/fonts/Steelfish-Regular.woff")
    format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Steelfish";
  src: url("/wp-content/themes/henrii-divi-child/assets/fonts/Steelfish-Italic.woff")
    format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Steelfish";
  src: url("/wp-content/themes/henrii-divi-child/assets/fonts/Steelfish-Bold.woff")
    format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Steelfish";
  src: url("/wp-content/themes/henrii-divi-child/assets/fonts/Steelfish-BoldItalic.woff")
    format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Steelfish";
  src: url("/wp-content/themes/henrii-divi-child/assets/fonts/Steelfish-ExtraBold.woff")
    format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Steelfish";
  src: url("/wp-content/themes/henrii-divi-child/assets/fonts/Steelfish-ExtraBoldItalic.woff")
    format("woff");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

:root {
  font-size: 112.5%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Steelfish", sans-serif;
  font-weight: normal !important;
  font-size: 3.48rem;
}

h1 {
  font-size: 4.63rem;
  line-height: 1.05;
}

h2 {
  font-size: 3.51rem;
  line-height: 1.15;
}

h3 {
  font-size: 2.61rem;
  line-height: 1.15;
}

h4 {
  font-size: 1.95rem;
  line-height: 1.2;
}

h5 {
  font-size: 1.46rem;
  line-height: 1.3;
}

h6 {
  font-size: 1.1rem;
  line-height: 1.4;
}
p {
  letter-spacing: 0.02em;
}

span.Increased {
  letter-spacing: 1px;
}

.img-quadrat img {
  aspect-ratio: 4/4;
  object-fit: cover;
}

/* Desktop: zentriertes Hauptmenü */
@media (min-width: 981px) {
  #main-header .container {
    display: flex;
    align-items: center;
  }
  #main-header .logo_container {
    margin-right: auto;
  }
  #main-header #et-top-navigation {
    flex: 1;
    display: flex;
    justify-content: center;
  }
  #main-header #et-top-navigation .nav {
    display: flex;
    gap: 1.6rem;
  }
}

/*# sourceMappingURL=custom-styles.css.map */

/* ================================
   HENRII FULLSCREEN MOBILE MENU
   ================================ */
@media (max-width: 980px) {
  /* Basiszustand: Menü ausgeblendet */
  .et_mobile_menu {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #0b111ac0 !important; /* dunkles Blau passend zu Henrii */
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: all 0.5s ease;
  }

  /* Aktiviert bei Klick */
  .mobile_nav.opened .et_mobile_menu {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
  }

  /* Menülinks styling */
  .et_mobile_menu li {
    border: none !important;
    margin: 10px 0 !important;
    opacity: 0;
    transform: translateY(20px);
    animation: none;
    text-align: center;
  }

  /* Animation für jeden Menüpunkt leicht zeitversetzt.

     Vorher waren die Delays einzeln fuer nth-child(1) bis (6) verdrahtet —
     beim siebten Menuepunkt ("Gutscheine") lief er deshalb ohne Delay, also
     sofort, waehrend die anderen noch gestaffelt kamen.

     Jetzt kommt der Delay aus einer Formel. Zum Nachjustieren reichen die
     beiden Variablen; die Liste unten vergibt nur noch den Index. */
  .mobile_nav.opened .et_mobile_menu li {
    --menu-start: 0.15s;   /* Vorlauf, bevor der erste Punkt startet */
    --menu-step: 0.1s;     /* Abstand zwischen zwei Punkten */

    animation: fadeUp 0.7s ease forwards;
    animation-delay: calc(var(--menu-start) + var(--menu-i, 0) * var(--menu-step));
  }

  /* Index je Position. Reicht fuer 12 Menuepunkte — kommt einer dazu,
     einfach die naechste Zeile ergaenzen. Ohne Eintrag animiert ein Punkt
     weiterhin, nur ohne Staffelung (--menu-i faellt auf 0 zurueck). */
  .mobile_nav.opened .et_mobile_menu li:nth-child(1)  { --menu-i: 0; }
  .mobile_nav.opened .et_mobile_menu li:nth-child(2)  { --menu-i: 1; }
  .mobile_nav.opened .et_mobile_menu li:nth-child(3)  { --menu-i: 2; }
  .mobile_nav.opened .et_mobile_menu li:nth-child(4)  { --menu-i: 3; }
  .mobile_nav.opened .et_mobile_menu li:nth-child(5)  { --menu-i: 4; }
  .mobile_nav.opened .et_mobile_menu li:nth-child(6)  { --menu-i: 5; }
  .mobile_nav.opened .et_mobile_menu li:nth-child(7)  { --menu-i: 6; }
  .mobile_nav.opened .et_mobile_menu li:nth-child(8)  { --menu-i: 7; }
  .mobile_nav.opened .et_mobile_menu li:nth-child(9)  { --menu-i: 8; }
  .mobile_nav.opened .et_mobile_menu li:nth-child(10) { --menu-i: 9; }
  .mobile_nav.opened .et_mobile_menu li:nth-child(11) { --menu-i: 10; }
  .mobile_nav.opened .et_mobile_menu li:nth-child(12) { --menu-i: 11; }

  /* Menülinks Text */
  .et_mobile_menu li a {
    font-size: 24px !important;
    color: #e8e3d2 !important; /* Henrii-Beige */
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 500;
    text-decoration: none !important;
    transition: color 0.3s ease, transform 0.3s ease;
    line-height: 1.3;
  }

  .et_mobile_menu li a:hover {
    color: #f7f3e4 !important;
    transform: scale(1.08);
  }

  /* Burger-Icon fixieren */
  .mobile_menu_bar {
    position: fixed !important;
    top: 25px;
    right: 25px;
    z-index: 10000;
  }

  /* Body scroll lock bei offenem Menü */
  body.et_mobile_menu_active {
    overflow: hidden;
  }

  /* Keyframes für weiches Auftauchen */
  @keyframes fadeUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}
.et_mobile_menu {
  backdrop-filter: blur(10px);
}

/* ================================
   HENRII FULLSCREEN MOBILE MENU END
   ================================ */

/* ============================================================================
   EVENT / CATERING — CTA-Sektion
   ----------------------------------------------------------------------------
   Greift ueber die Modulklasse "event-cta", die an der Sektion auf beiden
   Seiten (Ihr Event / Catering) gesetzt ist.
   ========================================================================== */

/* Karte etwas praesenter vom beigen Hintergrund abheben */
.event-cta .et_pb_row {
  background-color: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(9, 25, 38, 0.12);
}

/* --- Ausrichtung ------------------------------------------------------------
   Ueberschrift und Frage standen linksbuendig, Fliesstext und Button
   zentriert. Gemischte Ausrichtung laesst einen CTA-Block unruhig wirken —
   hier gilt durchgehend zentriert. */
.event-cta .et_pb_text,
.event-cta .et_pb_text h1,
.event-cta .et_pb_text h2,
.event-cta .et_pb_text h3,
.event-cta .et_pb_text p {
  text-align: center !important;
}

/* --- Zeilenlaenge -----------------------------------------------------------
   Der Fliesstext lief ueber die volle Kartenbreite (1116px, rund 180 Zeichen
   pro Zeile). Lesbar sind 60-75 Zeichen — daher eine feste Textbreite,
   mittig in der Karte. */
.event-cta .et_pb_text > .et_pb_text_inner {
  max-width: 660px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Vertikaler Rhythmus ----------------------------------------------------
   Vorher: 16.7 / 33 / 40 / 35 / 10px, gewachsen statt gesetzt.
   Jetzt eine Staffel — Zusammengehoeriges eng, vor der Handlung viel Luft.
   Drei Klassen plus !important, weil Divi die Modulabstaende selbst mit
   !important schreibt. */
.event-cta .et_pb_column > .et_pb_module {
  margin: 0 !important;
  padding: 0 !important;
}
.event-cta .et_pb_column > .et_pb_module:nth-child(2) {
  margin-top: 10px !important;   /* Frage dicht unter die Ueberschrift */
}
.event-cta .et_pb_column > .et_pb_module:nth-child(3) {
  margin-top: 26px !important;   /* Abstand zum Fliesstext */
}

/* Absaetze innerhalb des Textmoduls */
.event-cta .et_pb_text_inner p {
  margin: 0 0 22px;
  padding: 0;
}
.event-cta .et_pb_text_inner p:last-child {
  margin-bottom: 0;
}
.event-cta .et_pb_text_inner p:has(+ .cta-eckdaten) {
  margin-bottom: 12px;           /* Einleitung dicht an ihre Aufzaehlung */
}

/* Eckdaten als Chips statt Fliesstext */
.event-cta .cta-eckdaten {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 !important;
  padding: 0;
}

.event-cta .cta-eckdaten span {
  padding: 7px 16px;
  border: 1px solid rgba(9, 25, 38, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  color: #091926;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

/* Feine Trennlinie zwischen Text und Handlungsaufforderung */
/* Feine Trennlinie zwischen Information und Handlungsaufforderung.
   Der grosszuegige Abstand hier ist der wichtigste im Block: er isoliert
   den Button optisch und macht ihn zum Endpunkt des Leseflusses. */
.event-cta .et_pb_button_module_wrapper::before {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  margin: 40px auto 32px;
  background: rgba(9, 25, 38, 0.25);
}

/* Button: gefuellt als klarer Abschluss, Hover dreht auf Outline.

   Der lange Selektor ist Absicht und kein Schmuck: Divi generiert seine
   Button-Styles als "body #page-container .et_pb_section .et_pb_button_0"
   — mit einer ID drin. Eine reine Klassenregel verliert dagegen selbst mit
   !important. Deshalb hier dieselbe Struktur plus .event-cta. */
body #page-container .et_pb_section.event-cta .et_pb_button,
body #page-container .et_pb_section.event-cta .et_pb_button:hover {
  padding: 16px 34px !important;
  border-width: 1px !important;
  border-color: #091926 !important;
  border-radius: 0 !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
}

body #page-container .et_pb_section.event-cta .et_pb_button {
  background-color: #091926 !important;
  color: #eae6db !important;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

body #page-container .et_pb_section.event-cta .et_pb_button:hover {
  background-color: transparent !important;
  color: #091926 !important;
  transform: translateY(-2px);
}

@media (max-width: 980px) {
  .event-cta .cta-eckdaten span {
    padding: 6px 13px;
    font-size: 14px;
  }
  .event-cta .cta-eckdaten {
    gap: 6px;
  }
  .event-cta .et_pb_column > .et_pb_module:nth-child(2) {
    margin-top: 8px !important;
  }
  .event-cta .et_pb_column > .et_pb_module:nth-child(3) {
    margin-top: 20px !important;
  }
  .event-cta .et_pb_text_inner p {
    margin-bottom: 18px;
  }
  .event-cta .et_pb_button_module_wrapper::before {
    margin: 30px auto 26px;
  }
  body #page-container .et_pb_section.event-cta .et_pb_button,
  body #page-container .et_pb_section.event-cta .et_pb_button:hover {
    padding: 14px 16px !important;
    font-size: 13px !important;
    letter-spacing: 1px !important;   /* sonst bricht die Beschriftung zweizeilig */
  }
}


body.custom-background {
  background-size: contain !important;
  background-repeat: repeat-y !important;
}

.text-overlay {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.et_pb_section_video_bg .mejs-video {
  left: 50%;
  top: -152%;
  mix-blend-mode: darken;
}
.img-quadrat img {
  aspect-ratio: 4/4 !important;
  object-fit: cover !important;
}

.img-hoch img {
  aspect-ratio: 3/4 !important;
  object-fit: cover !important;
}

img#step-image {
  aspect-ratio: 4 / 4;
  height: 100%;
  object-fit: cover;
  border-radius: 0px !important;
  max-width: 610px;
}

.step-img-col {
  padding: 30px;
}
span.span-step {
  font-family: "Montserrat";
  font-size: 28px;
  display: block;
  letter-spacing: 1px;
  font-weight: 300;
  padding-bottom: 20px;
  text-transform: none;
}

p#step-subtitle {
  margin-top: 0px;
}

img.step-thumb.mx-2 {
  max-width: 25%;
  max-height: 200px;
  object-fit: cover;
  aspect-ratio: 4/4;
}

button#next-step {
  background-color: transparent;
  box-shadow: none !important;
  border: 1px solid #EAE6DB;
  padding: 8px 15px;
  color: #EAE6DB;
  margin-top: 30px;
  font-weight: 600 !important;
}

h2#step-title {
  color: #EAE6DB !important;
}

.et_header_style_left #et-top-navigation nav > ul > li > a {
  font-weight: 500;
}

/* ============================================================================
   SPEISEKARTE — Gerichte
   ----------------------------------------------------------------------------
   Markup (Divi-Textmodul, Modulstyles bewusst leer — alles kommt von hier):

     <div class="dish">
       <p class="dish-heading">Beef Tatar 18</p>
       <p class="dish-description">gebackenes Eigelb I Senfchutney I …</p>
     </div>

   Jedes Gericht ist ein eigenes Text-Modul.

   Farbe muss hier gesetzt werden: ohne Modulstyles fallen die Gerichte auf
   Divis Standard body { color:#666 } zurueck — dunkelgrau auf dunkelblau,
   also praktisch unsichtbar.
   ========================================================================== */
.dish {
  --dish-color:      #EAE6DB;                  /* Gerichtname */
  --dish-color-desc: rgba(234, 230, 219, 0.72);/* Beschreibung, gedimmt */

  margin: 0 0 26px;
}

/* Modulabstand neutralisieren — der Rhythmus kommt allein von .dish */
.et_pb_text:has(.dish) {
  margin-bottom: 0 !important;
}

.dish-heading,
.dish-description {
  margin: 0;
  padding: 0;            /* Divi setzt p { padding-bottom: 1em } */
}

.dish-heading {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--dish-color);
  margin-bottom: 4px;
}

.dish-description {
  font-size: inherit;    /* = Standardabsatz (18px aus dem Divi-Customizer).
                            Bewusst nicht fest gesetzt, damit die Beschreibung
                            dem globalen Absatz folgt statt kleiner zu sein. */
  font-weight: 400;
  line-height: 1.55;
  color: var(--dish-color-desc);
}

/* ============================================================================
   SPEISEKARTE — MOBILE
   ----------------------------------------------------------------------------
   Alle Mobilgroessen an einer Stelle, feste Pixelwerte zum direkten Anpassen.
   Desktop ist hiervon nicht betroffen und behaelt seine bisherigen Werte:
   MENU 150px (Inline-Style im Code-Modul), Kategorien 60-71px (Divi-Module).
   ========================================================================== */
@media (max-width: 980px) {

  /* "MENU"
     !important ist noetig, weil im Code-Modul ein Inline-Style
     style="font-size: 150px" direkt am <h2> haengt und Inline sonst
     jedes Stylesheet schlaegt. */
  .menu-tabs h2 {
    font-size: 72px !important;
    line-height: 1.05;
  }

  /* Kategorien: Signature Dishes, Lunch, Dinner, Wine & Drinks, Kids
     Zwei Klassen im Selektor schlagen Divis ".et_pb_text_13 h3" ueber die
     Spezifitaet — deshalb kein !important noetig. */
  .menu-panel .et_pb_text_inner h3 {
    font-size: 40px;
    line-height: 1.15;
  }

  .dish-heading     { font-size: 19px; }
  .dish-description { font-size: 16px; }
  .dish             { margin-bottom: 20px; }
}

a.pdf-card-btn.et_pb_bg_layout_light {
  font-family: "Steelfish";
  font-size: 30px;
  font-style: normal;
  font-weight: normal;
  letter-spacing: 3px;
  color: #899cab;
  text-transform: uppercase;
}

.menu-hero-image img {
  aspect-ratio: 3/4;
  object-fit: cover;
  height: 100%;
  width: auto;
}
.menu-panel {
  display: none !important;
}
.menu-panel.is-active {
  display: block !important;
}

.menu-tab-btn {
  display: inline-block;
  padding: 25px;
  vertical-align: text-bottom;
  font-size: 40px;
  font-family: "Steelfish";
  border-right: 2px solid #899cab;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 10px 0px;
}
.menu-tab-btn a:hover {
  color: #EAE6DB !important;
}
.menu-tab-btn:hover {
  border-right: 2px solid #EAE6DB;
}
.menu-tab-btn a:active {
  color: #EAE6DB !important;
}
.menu-tab-btn:active {
  border-right: 2px solid #EAE6DB;
}

/* Tabs Layout (falls du noch feintunen willst) */
.menu-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.menu-tab-btn a {
  opacity: 0.45;
  transition: opacity 0.25s ease, transform 0.25s ease;
  display: inline-block;
  position: relative;
}
.menu-tabs h2 {
  width: max-content;
}
/* Mobile: die vier Tabs in EINER Reihe.
   Grid statt Flex, damit alle vier gleich breit sind — unabhaengig davon,
   wie lang die Beschriftung ist ("Wine & Drinks" vs. "Lunch"). */
@media (max-width: 980px) {
  .menu-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    width: 100%;
  }
  /* Ueberschrift ueber die volle Breite, ueber den Tabs */
  .menu-tabs h2 {
    grid-column: 1 / -1;
    width: 100% !important;
    margin-bottom: 10px;
  }
  .menu-tab-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 44px;          /* haelt alle vier gleich hoch, auch bei Umbruch */
    padding: 6px 2px;
    margin: 0;
    font-family: "Steelfish";
    font-size: 18px;
    letter-spacing: 0.5px;
    line-height: 1.15;
    text-transform: uppercase;
    background-color: #ffffff12;
    border-right: 0;
  }
  .menu-tab-btn a {
    display: block;            /* volle Klickflaeche in der Kachel */
    width: 100%;
  }
  .menu-tab-btn:hover,
  .menu-tab-btn:active {
    border-right: 0;
  }
}

/* Active Tab */
.menu-tab-btn a.is-active {
  opacity: 1;
  transform: translateY(-1px);
}

/* Underline Animation */
.menu-tab-btn a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
  background: currentColor;
  opacity: 0.8;
}
.menu-tab-btn a.is-active::after {
  transform: scaleX(1);
}

.menu-panel {
  opacity: 0;
  transition: opacity 0.28s ease;
}
.menu-panel.is-active {
  opacity: 1;
}

.menu-hero-image img {
  transition: opacity 0.25s ease;
}

body.admin-bar.et_fixed_nav.et_secondary_nav_enabled #main-header {
    top: 25px ! IMPORTANT;
    z-index: 999999;
}

body.admin-bar.et_fixed_nav #top-header {
    top: 36px;
}
div#top-header {
    width: max-content;
    left: inherit !important;
    float: right;
    right: 0;
    z-index: 999999999;
}

.et-fixed-header img#logo {
    left: 30px;
    position: fixed;
    height: 90px;
    top: 22px;
    background-color: #0a1924;
    padding: 4px;
    box-shadow: 3px 5px 11px #00000047;
}

.henrii-ii {
	letter-spacing: .1rem;
}

body.et_fixed_nav.et_secondary_nav_enabled #main-header {
	top: 0px !Important;
}

.et_fixed_nav #top-header {
	top: 37px !important;
}
.et_pb_text_6_tb_footer ul {
	padding: 0px !important;
}