/* ============================ */
/* Preloader Overlay */
/* ============================ */
.preloader-overlay {
  position: fixed;
  inset: 0;
  background-color: #e2001a;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

.preloader-overlay.fade-out {
  opacity: 0;
}

.preloader-logo {
  width: 200px;
  animation: zoom 3s ease-in-out infinite;
}

@keyframes zoom {
  0%   { transform: scale(0.5); }   /* Logo Preloader jetzt 50 % der Originalgröße */
  50%  { transform: scale(1.5); }   /* Logo Preloader jetzt 150 % der Originalgröße */
  100% { transform: scale(0.5); }

}


/* ============================ */
/* General Styles */
/* ============================ */
html {
  /* Immer den vertikalen Scrollbalken anzeigen, so bleibt das Layout des Secondary Nav und somit das Restaurant Logo
  unter anderem, auch konstant und rutscht nicht. Ohne das gibt es bei mancehn Secaondary Nav Scrollbar und manchen nicht
  so dass es aussieht als würde das Restaurant Logo in den Menüs mit bzw. ohne Scrollbar sich verschieben */
  overflow-y: scroll;
}

body {
    font-family: "Lato", sans-serif;
    font-size: 16px;
    color: #fff;
    background-color: #000;
    margin: 0;
    padding: 0;
}

a {
    color: #fff;
    text-decoration: none;
}

a:hover {
    color: #fff;
}

a:active {
    color: #fff;
    border-bottom: 2px solid #e2001a !important;
}

ul {
    list-style-type: none;
}

/* ============================ */
/* Header - Primary Navigation */
/* ============================ */
/* Mobile Nav Overlay Offcanvas instead of Toggler-Button: Standard */
/* ──────────────────────────────────── */
/* Mobile Nav Overlay and Comment Navbar-Toggler  */
/* ──────────────────────────────────── */
/* ===== Fullscreen Offcanvas Override ===== */
.offcanvas-fullscreen {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(0,0,0,0.95);
  z-index: 1050;
}

/* Header-Bereich (Logo + Close) */
.offcanvas-fullscreen .offcanvas-header {
  position: relative;          /* für den absolut pos. Close-Button */
  display: flex;
  justify-content: center;     /* Logo zentrieren */
  align-items: center;
  height: 80px;
  padding: 0;
}

/* Logo in der Mitte */
.offcanvas-fullscreen .offcanvas-header .offcanvas-logo {
  height: 40px;
  margin: 0 auto;
}

/* Close-Button oben rechts */
.offcanvas-fullscreen .offcanvas-header .btn-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  filter: invert(1);           /* weißes Icon */
}

/* Body: Menü-Liste weiter oben, dennoch zentriert */
.offcanvas-fullscreen .offcanvas-body {
  display: flex;
  flex-direction: column;
  justify-content: start;      /* von oben her beginnen */
  align-items: center;
  padding-top: 2rem;           /* Abstand vom Header */
}

/* Menü-Links – Grundstil */
.offcanvas-fullscreen .mobile-menu-list .nav-link {
  display: block;
  width: 100%;
  font-size: 2.5rem;           /* nach Bedarf anpassen */
  font-weight: 900;            /* fett */
  text-transform: uppercase;   /* uppercase */
  color: #fff !important;      /* weiß */
  padding: 0.5rem 0;            /* enger vertikal */
  margin: 0;                    /* kein Außenabstand */      /* leichter Buchstabenabstand */
  line-height: 1.7rem;
  transition: color 0.2s ease;
}

/* Hover */
.offcanvas-fullscreen .mobile-menu-list .nav-link:hover {
  color: #e2001a !important;
}

/* Focus & Active */
.offcanvas-fullscreen .mobile-menu-list .nav-link:focus,
.offcanvas-fullscreen .mobile-menu-list .nav-link:focus-visible,
.offcanvas-fullscreen .mobile-menu-list .nav-link:active,
.offcanvas-fullscreen .mobile-menu-list .nav-link.active {
  color: #e2001a !important;
  outline: none;
}

/* Focus, Active und class="active" */
.offcanvas-fullscreen .mobile-menu-list .nav-link:focus,
.offcanvas-fullscreen .mobile-menu-list .nav-link:focus-visible,
.offcanvas-fullscreen .mobile-menu-list .nav-link:active,
.offcanvas-fullscreen .mobile-menu-list .nav-link.active {
  color: #e2001a !important;
  outline: none;
}

/* Close-Button (Bootstrap liefert bereits das weiße Icon) */
.offcanvas-fullscreen .btn-close-white {
  filter: invert(1);
}

/* Menu Mobile SVG-Icon */
.navbar-toggler-icon {
  background-image: url("/static/icons/nav_sc_icon.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 24px 24px !important;
}

/* Hover (optional leicht transparent) */
.navbar-toggler:hover {
  background-color: rgba(226,0,26,0.8) !important;
}

/* nur wenn wirklich geöffnet */
.navbar-toggler[aria-expanded="true"] {
  background-color: #e2001a !important;
}

/* wenn geschlossen (collapsed oder aria-expanded=false) */
.navbar-toggler.collapsed,
.navbar-toggler[aria-expanded="false"] {
  background: none !important;
}

/* fokussiert nie einen weißen Ring zeigen */
.navbar-toggler:focus {
  outline: none !important;
  box-shadow: none !important;
}

.navbar {
    color: #fff;
    background-color: #000;
    padding: 15px 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    z-index: 1050;
}

.navbar-brand img {
    height: 50px; /* Logo size */
}

.navbar-collapse {
    justify-content: flex-end !important;
}

.navbar-nav .nav-link {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
      display: flex !important;
  align-items: center !important;
  gap: 0.5rem;
    padding: 10px 20px;
    transition: all 0.3s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    border-bottom: 2px solid #e2001a !important;
}

.nav-icon {
  width: 18px;
  height: auto;
  margin-right: 5px;
  vertical-align: middle;
}

.nav-item {
    padding: 0 15px;
}

.bg-dark {
    background-color: transparent !important;
}

/* Mobile Nav Menu Delete Bullets li */
#mobileMenu .mobile-menu-list,
#mobileMenu .mobile-menu-list li {
  list-style: none !important;
  padding: 0;
  margin: 0;
}

/* Falls trotzdem Marker gerendert werden */
#mobileMenu .mobile-menu-list li::marker {
  content: "" !important;
}

/* Sicherheit: keine zusätzlichen Inhalte über Pseudo-Elemente */
#mobileMenu .mobile-menu-list .nav-link::before,
#mobileMenu .mobile-menu-list .nav-link::after {
  content: none !important;
}


/* ============================ */
/* Secondary Navigation */
/* ============================ */
#secondary-nav {
  background-color: #000;
  padding: 10px 0;
  display: flex;               /* Flex behalten */
  flex-wrap: nowrap;           /* Keine Zeilenumbrüche */
  justify-content: flex-start; /* Links ausrichten statt zentrieren */
  overflow-x: auto;            /* Horizontaler Scrollbar */
  -webkit-overflow-scrolling: touch; /* weiches iOS-Scrollen */
}

#secondary-nav li {
  flex: 0 0 auto;
  margin-right: 5px;
}

.secondary-nav-container {
    width: 100%;
    display: flex;
    justify-content: center; /* Zentriert die Navigation in der Mitte */
    overflow-x: auto;    /* Horizontal scroll möglich */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.secondary-nav-container::-webkit-scrollbar {
    display: none; /* Hide scrollbar */
}

.secondary-nav-list .nav-item {
    font-size: 16px;
    font-weight: 700;
    padding: 10px 15px;
    color: #fff;
    text-transform: uppercase;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}

.secondary-nav-list .nav-item a:hover, .nav-item a:focus,
.secondary-nav-list .nav-item.active a {
    color: #fff;
    border-bottom: 2px solid #e2001a; /* Highlight active item */
}

/* Horizontaler Balken des Secondary Navivation */
.secondary-nav-list {
    display: inline-flex;
    gap: 20px;                /* Abstand zwischen Einträgen */
    min-width: max-content;   /* Sorgt für eine Breite, die dem Inhalt entspricht */
    margin: 0 auto;          /* Zentriert das inline-flex-Element */
    white-space: nowrap;      /* Kein Zeilenumbruch */
}

.secondary-nav-list::-webkit-scrollbar {
    display: none; /* Für Chrome, Safari und Edge */
}

/* ============================ */
/* Spa Menü Loading Animation */
/* ============================ */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-spinner {
    animation: spin 1s linear infinite;
    border: 3px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: #fff;
    width: 24px;
    height: 24px;
    margin: 20px auto;
}

/* Active Menu Item */
#secondary-nav .nav-item.active a {
    border-bottom: 2px solid #e2001a;
}

/* Sekundäres Nav Speisekarte aktiv markieren bei Preview bzw. Link-Aufruf */
#secondary-nav .nav-item.active > a {
  border-bottom: 2px solid #f00; /* Rot, wie bei dir */
}


/* ============================ */
/* Slider Promo */
/* ============================ */
#sliderCarousel .carousel-control-prev,
#sliderCarousel .carousel-control-next {
  display: none !important;
}

.slider-img {
  max-height: 840px;
  width: auto;
  object-fit: cover;
}

/* ============================ */
/* Topics and Categories */
/* ============================ */
.topic-title {
    font-family: Dancing Script;     ;
    font-size: 60px;
    font-weight: 700;
}

.topic-title h2 {
    font-size: 60px;
    font-family: 'Dancing Script', cursive;
    font-weight: bold;
}

.topics-nav-container {
    margin-top: -5px !important;
    background-color: none;
}


.topics-nav {
    font-family: Roboto Condensed;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 15px;
}

.topics-nav .nav-item {
    color: #fff;
    padding: 10px 15px 10px 0px;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
}

.topics-nav .nav-item a {
    color: #fff;
    font-size: 16px;
    text-decoration: 1px solid #e2001a;
}

.topics-nav .nav-item a:hover {
    border-bottom: 2px solid #e2001a;
}

.topics-nav .nav-item.active a {
    color: #fff;
    border-bottom: 2px solid #e2001a;
}

.categories-container {
    font-size: 34px;
    color: white;
    font-weight: 400;
    background: none;
    border: none;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 4px;
    cursor: pointer;
    transition: 0.3s ease;
    margin-top: 36px;
}

/* Sulti Aiveo Menulo */

.categories-container h3 {
    font-size: 34px;
    color: #fff;
    font-weight: 400;
    background: none;
    border: none;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 4px;
    cursor: pointer;
    transition: 0.3s ease;
    padding-bottom: 0.6rem;
}

.categories-list {
    display: none; /* Standardmäßig alle Kategorien ausblenden */
}

.category-item h3 {
  margin-bottom: 0px;
}

.categories-list:not(.d-none) {
    display: block; /* Nur die aktive Kategorie-Liste anzeigen */
}

.sub-categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;     /* Inhalte horizontal zentrieren */
    gap: 6px 12px;
    list-style: none;
    margin: 0; 
    padding: 0;
}

.sub-categories li {
    font-size: 14px;
    display: inline-block;
    cursor: pointer;
    background-color: none;
    letter-spacing: 2px;
    margin: 0 8px;
}

/* Sub Categories: Hover & Active-State */
.sub-categories .sub-category-link:hover,
.sub-categories .sub-category-link.active {
    border-bottom: 2px solid #e2001a !important;
    opacity: 1 !important;
}

/* Standard-Styling für Sub Category-Links */
.sub-categories .sub-category-link {
    border-bottom: 2px solid transparent;
    padding-bottom: 0px;
}

/* Container für Sub-Category-Name und Preis */
.subcategory-item {
  display: flex;
  flex-direction: column; /* Elemente untereinander */
  align-items: center; /* Zentriert beide Elemente */
  text-align: center;
}

/* Name über dem Preis */
.subcategory-name {
  order: 1;
}

/* Preis unter dem Namen platzieren */
.subcategory-price {
  order: 2; /* Preis nach unten verschieben */
  margin-top: 5px; /* Abstand zum Namen */
  width: 100%; /* Für korrekte Zentrierung */
  text-align: center;
}

/* Sub Category Intro zunächst verstecken */
.subcategory-intro {
  font-size: 0.9em;
  text-transform: none;
  display: none;          /* hier hinzugefügt */
}

/* Deaktiviert: Sub Category Intro nicht mehr im LI aufklappen */
.sub-category-link.active + .subcategory-intro {
  display: none !important;
}

/* Listenelement als Positionierungs‑Referenz */
.sub-categories .subcategory-item {
  position: relative;
}

/* Subcategory‑Intro: Inline‑Flow, nur bei active, Abstand */
.subcategory-intro {
  display: none;           
  white-space: pre-wrap;    
  margin: 0;                
  padding: 0;                
  font-size: 0.9em;
  text-transform: none;
  color: #fff;
}

/* Zentrales Intro-Panel unter der Sub-Category-Leiste */
.subcategory-intro-panel {
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0px;
  margin-top: .5rem;
  padding: 0.1rem 0rem 1.2rem 0;
  border: 1px solid #2a2a2a;
  border-radius: .5rem;
  background: #121212;
  color: #fff;
  min-height: 3.5rem;        /* Platz reservieren, verhindert „Springen“ */
  transition: min-height .2s ease, opacity .15s ease;
  opacity: 1;
}

.subcategory-intro-panel:empty {
  padding: 0;
  border: 0;
  min-height: 0;
  opacity: 0;
}


/* — Subcategory: Name über Preis, immer zentriert — */

/* li-Container als vertikale Flex-Box */
.sub-categories .subcategory-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin: 0 8px;
  margin: 0 8px 10px 0px;
}

/* Link selbst ebenfalls Flex-Container, damit Name + Preis zentriert bleiben */
.sub-categories .subcategory-item .sub-category-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none; /* kein Unterstrich */
}

/* Stil für den Namen */
.sub-categories .subcategory-item .subcategory-name {
  font-size: 14px;
  margin-bottom: 0px;
}

/* Stil für den Preis */
.sub-categories .subcategory-item .subcategory-price {
  font-size: 12px;
  color: #fff;
}

/* Aktive/hover-Linie nur unter dem Preis */
.sub-categories .subcategory-item .sub-category-link.active .subcategory-price,
.sub-categories .subcategory-item .sub-category-link:hover .subcategory-price {
  /* border-bottom: 2px solid #e2001a; */
  display: inline-block;
}
  
/* Container für Name + Preis */
.subcategory-content {
display: inline-block;
text-align: center;
}

.subcategory-name {
display: block;
margin: 0;
padding: 0;
}

.subcategory-price {
display: block;
margin-top: 8px;
font-size: 0.9em;
}

/* Rote Linie nur beim Preis */
.subcategory-price.active,
.subcategory-price:hover {
/* border-bottom: 2px solid e2001a; */
display: inline-block; /* Damit die Linie nur unter dem Text ist */
}

/* Preise ausblenden wenn leer */
.subcategory-price:empty {
display: none !important;
}

/* Fallback für leere Preise mit Währungssymbol */
.subcategory-price[data-price="0.00"],
.subcategory-price[data-price="0,00"],
.subcategory-price:contains("€") {
display: none !important;
}

.dish-section {
  padding: 20px;
  background-color: #111;
  color: #fff;
  text-align: center;
}

/* Hover & Active-State mit höherer Spezifität */
.dish-sizes .dish-size-button:hover,
.dish-sizes .dish-size-button.active {
    border-bottom: 2px solid #e2001a !important;
}

.dish-sizes .dish-size-button {
    color: #fff !important;
    font-size: 12px;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    background: none !important; 
}

.dish-image {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto;
}

.dish-title {
  font-size: 1.2em;
  margin: 10px 0;
}

.swiper {
    border: none;
    /* min-height: 300px;     Mindesthöhe */
}
.swiper-pagination {
    position: relative !important;  /* Statt absolute - jetzt relativ zum Container */
    margin-top: 6px;                /* Abstand nach oben (vom Mehr-Button aus gesehen) */
    text-align: center;             /* Zentrierung */
    z-index: 0 !important;          /* Niedriger Z-Index, damit es nicht überlappt */
}


.swiper-pagination-bullet {
  background: #e2001a;
}

.swiper-button-next,
.swiper-button-prev {
  display: none;
}

/* ============================ */
/* Category Tabs */
/* ============================ */
.category-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.category-tab {
    font-size: 34px;
    color: white;
    font-weight: 400;
    background: none;
    border: none;
    text-transform: uppercase;
    letter-spacing: 4px;
    padding: 10px 20px;
    cursor: pointer;
    transition: 0.3s ease;
}

.category-tab.active {
    color: fff;
    background-color: none;
}

/* ============================ */
/* Dish Circles Design */
/* ============================ */
/* Container für jedes Gericht */
.dish-container {
    display: flex;
    flex-direction: column; /* Elemente vertikal ausrichten */
    align-items: center; /* Zentrierung horizontal */
    margin: 10px; /* Abstand zwischen den Gerichten */
}

.default-image {
    opacity: 0.6; /* Transparenz für Standardbild */
}

.dish-slider-container {
    overflow-x: auto;
    white-space: nowrap;
    scroll-behavior: smooth;
    margin-bottom: 10px;
    /* padding: 10px 0; */
}

.dish-slider {
    display: flex;
    gap: 15px;
}

.dish-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 3px solid #fff;
    overflow: hidden; /* Alles außerhalb des Kreises ausblenden */
    display: flex;
    align-items: center; /* Vertikal zentrieren */
    justify-content: center; /* Horizontal zentrieren */
    background-color: black; /* Hintergrundfarbe für leere Kreise */
    margin: 0 auto;
}

.dish-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Zuschneiden für perfekte Passform */
    border-radius: 50%;
}

/* Dish Details below Dish Circle */
.dish-details {
    margin-top: 10px; /* Abstand zum Kreis */
    text-align: center; /* Zentriert */
}

/* Dish Name */
.dish-name {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 17px;
}

/* Dish Description */
.dish-description {
    font-size: 14px;
    letter-spacing: 1px;
    margin-bottom: 5px;
    text-transform: none;
    /* WICHTIG: normal umbrechen */
    white-space: normal;
    /* Lange Wörter umbrechen, auch in Mobile */
    word-break: break-word;
    overflow-wrap: anywhere; 
    /* Auf 2 Zeilen begrenzen und mit … abschneiden */
    display: -webkit-box;
    -webkit-line-clamp: 2;          /* Anzahl Zeilen */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Size (Sizes) */
.dish-sizes {
    font-size: 14px;
    letter-spacing: 1px;
    margin-bottom: 5px;
    background: none;
}

.dish-sizes .active {
    border-bottom: 1px solid #e2001a;
}

.dish-ton {
    font-size: 14px;
    letter-spacing: 1px;
    margin-bottom: 5px;
    background: none;
}

/* Price */
.dish-price {
    font-family: Roboto Condensed;
    font-size: 13px;
    letter-spacing: 1px;
    margin-top: 15px;
    margin-bottom: -1px;
}

/* Mehr Button */
.dish-button {
    font-size: 12px;
    color: #fff;
    background: none;
    border: 1px solid #fff;
    padding: 10px 20px;
}

.dish-button:hover {
    background-color: #e04343;
}

.dish-nr, .dish-aiz {
    font-size: 14px;
    margin-bottom: 5px;
    color: #fff;
}

/* ============================ */
/* Dish Detail Overlay */
/* ============================ */
/* Dish Detail Section */
/* Overlay für Dish-Detail */
.dish-detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.dish-detail-card {
  background: #000;
  padding: 20px;
  width: 90%;
  max-width: 400px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  text-align: center;
}

.dish-detail-card .close-detail {
  position: absolute;
  top: 10px; right: 10px;
  font-size: 24px;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
}

.detail-image {
  width: 100%;
  margin-bottom: 15px;
}

/* Titel DishName Overlay */
.detail-info-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 17px;
}

.detail-info-desc {
  font-size: 14px;
  letter-spacing: 1px;
  margin-bottom: 15px;
  text-transform: none;
}

/* Speisename, Beschreibung, Größe, Preis übernehmen die Styles aus den Dish-Circles */
.detail-name { 
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 17px;
}

.detail-desc {
  font-size: 14px;
  letter-spacing: 1px;
  margin-bottom: 5px;
  text-transform: none;
}

.detail-sizes { 
  display: flex; 
  gap: 10px; 
  justify-content: center; 
  margin-bottom: 15px; 
}

.detail-size-button {
  color: #fff !important;
  font-size: 12px;
  border: 2px solid transparent;
  cursor: pointer;
  background: none;
}

.detail-size-button.active,
.detail-size-button:hover {
  border-bottom: 2px solid #e2001a;
}
.detail-price {
  font-family: Roboto Condensed;
  font-size: 13px;
  letter-spacing: 1px;
  margin-top: 15px;
  margin-bottom: -1px;
}


/* ============================ */
/* Dish-Detail: Allergene / Zusatzstoffe / Shisha Law */
/* ============================ */
/* Nr.: A|Z: Dish Details inline-Styling */
.dish-details-nr-az {
  font-family: Roboto Condensed;
  font-size: 13px;
  letter-spacing: 1px;
  margin-top: 30px;
  margin-bottom: -1px;
}

.detail-allergens-title {
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 20px;
  margin-bottom: 1px;
}

.detail-allergens-desc {
  font-size: 12px;
  line-height: 1.4;
  margin-bottom: 15px;
}

.detail-additives-title {
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 20px;
  margin-bottom: 1px;
}

.detail-additives-desc {
  font-size: 12px;
  line-height: 1.4;
  margin-bottom: 15px;
}

.detail-shisha-title {
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 20px;
  margin-bottom: 1px;
}

.detail-shisha-desc {
  font-size: 12px;
  line-height: 1.4;
  margin-bottom: 15px;
}

/* ============================ */
/* Buttons */
/* ============================ */
button {
    border-radius: 0;
    background: none;
    color: #fff;
    border: none;
}

/* ============================ */
/* Logo Styles, Restaurant Logo */
/* ============================ */
.logo-image {
    width: 200;            
    height: auto;            
    max-width: 200px;       
    object-fit: contain;     
    display: block;          
    margin: 0 auto;
    padding-bottom: 10px;
}

/* Contact Section */
.contact-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

.contact-address,
.contact-zip,
.contact-phone {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 5px;
}

.contact-phone {
    font-size: 16px;
    margin-bottom: 5px; /* Abstand zwischen den Telefonnummern */
}

.delivery-text {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* ============================ */
/* Social Media Icons */
/* ============================ */
.social-icons {
    display: flex;
    justify-content: center;
    gap: 20px; /* Abstand zwischen Icons */
    margin-top: 20px;
}

.social-icon {
    width: 30px; /* Icon-Größe */
    height: 30px;
    transition: transform 0.3s ease;
}

.social-icon:hover {
    transform: scale(1.2); /* Vergrößern beim Hover */
}

/* ============================ */
/* Swipe Indicators */
/* ============================ */
.slider-indicators {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.slider-indicators .indicator {
    width: 8px;
    height: 8px;
    margin: 0 5px;
    border-radius: 50%;
    background-color: gray;
    transition: background-color 0.3s;
}

.slider-indicators .indicator.active {
    background-color: red; /* Active indicator in red */
}

/* ============================ */
/* Login-Formular Client Panel */
/* ============================ */
.login-container {
    background-color: #1e1e1e;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    width: 223px;
    text-align: center;
    margin: 100px auto; /* Zentrierung in der Mitte */
}

.logo-container {
    display: flex;
    justify-content: center; /* Horizontal zentriert */
    margin-bottom: 25px;
}

.logo {
    width: 150px;
    height: auto;
    margin: 0 auto;
}

/* Formular-Struktur */
.login-form {
    display: flex;
    flex-direction: column;
    align-items: center; /* In der Mitte bleiben */
}

/* Formular-Felder */
.form-group {
    width: 100%; /* Volle Breite */
    margin-bottom: 15px; /* Abstand zwischen Gruppen */
    text-align: left; /* Links ausgerichtet */
}

/* Beschriftungen (Labels) */
.form-group label {
    display: block;
    margin-bottom: 5px; /* Abstand zum Feld */
    font-size: 14px;
    text-align: left; /* Links ausgerichtet */
}

/* Eingabefelder */
.form-group input {
    width: 100%;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #444;
    background-color: #222;
    color: #fff;
}

/* Checkbox - Passwort anzeigen */
.form-group-checkbox {
    display: flex;
    align-items: center; /* Vertikal zentriert */
    gap: 10px; /* Abstand zwischen Checkbox und Label */
    margin-bottom: 20px;
    width: 100%; /* Volle Breite */
    text-align: left; /* Links ausgerichtet */
}

/* Login-Button */
.login-button {
    background-color: #e2001a;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    font-size: 16px;
}

.login-button:hover {
    background-color: #bb2026;
}

/* ============================ */
/* Brand Container below Login Button */
/* ============================ */
.brand-container {
    margin-top: 20px; /* Abstand nach oben */
    text-align: center; /* Zentrierung */
}

.brand-text {
    font-size: 14px; /* Schriftgröße */
    color: #fff; /* Graue Farbe */
    margin-bottom: 10px; /* Abstand zum Logo */
}

/* Aiveo Logo (Standardgröße) */
.aiveo-logo {
    width: 120px;
    height: auto;
}

/* Pritago Logo (kleiner) */
.pritago-logo {
    width: 90px; /* Kleinere Breite */
    height: auto;
}

/* Hover-Effekt für beide Logos */
.brand-logo:hover {
    transform: scale(1.1);
}

/* ============================ */
/* Client Panel Sidebar Navigation */
/* ============================ */
.restaurant-logo {
    width: 100px;      
    height: auto;      
    object-fit: contain;
    display: block;    
    margin: 0 auto;
    margin-top: 20px;
}   

.sidebar .logo {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin: 0 auto;
}

.menu-icon {
    width: 25px;        
    height: 25px;       
    margin-right: 10px;  
    vertical-align: middle;
}

.sidebar {
    width: 250px;
    height: 100vh;
    background: #000;
    color: white;
    position: fixed;
    overflow-y: auto; 
    scrollbar-width: thin;
    scrollbar-color: #000; #111; 
}

.sidebar ul {
    list-style: none;
    padding: 0;
}

.sidebar ul li {
    cursor: pointer;
}

.sidebar ul li a {
    color: #fff;
    text-decoration: none;
    display: flex; /* Flexbox für Ausrichtung */
    align-items: center; /* Vertikal mittig */
    padding: 10px 15px;
}

.sidebar ul li a:hover {
    background: #e2001a;
}

/* Active- und Focus-State für Sidebar-Links */
.sidebar ul li a.active,
.sidebar ul li a:focus {
  background-color: #e2001a; /* dein Highlight-Rot */
  color: #fff;               /* weiße Schrift */
  outline: none;             /* remove default focus outline */
}

.footer-logos {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;   /* vertikaler Abstand über den Logos */
  gap: 0.5rem;        /* weniger Abstand zwischen Aiveo- und Menulo + Pritago-Reihe */
}

.footer-logo {
  height: 60px;
  width: auto;
  display: inline-block;
}

.footer-logos-bottom {
  display: flex;
  margin-top: -40px;    /* vertikaler Abstand über den Logos */
  gap: 0.5rem;          /* horizontaler Abstand zwischen Menulo- und Pritago-Logo */
}

.footer-logo-red {
    width: 36px; 
    height: auto;
    margin-top: 10px;
}

.footer-logo-white {
    width: 100px;
    height: auto;
    margin-bottom: 8px; 
}

.footer-text {
    text-align: center; 
    font-size: 16px;
    color: #fff;
    margin-top: 20px;
    line-height: 5px;
}

/* Scrollbar-Styling für Chrome und Edge */
.sidebar::-webkit-scrollbar {
    width: 8px;
}

/* ============================ */
/* Client Panel Content */
/* ============================ */
/* Content-Bereich nach rechts schieben */
.content {
  margin-left: 240px; /* Breite deiner Sidebar anpassen */
  padding: 1rem;
  box-sizing: border-box;
}

/* Hauptbereich-Container */
.content #dynamic-content {
  text-align: center;         
  max-width: none; 
  margin: 0;           
}

.content #dynamic-content h1 {
  margin-bottom: 10px;
}

.content #dynamic-content p {
  font-size: 14px;
  line-height: 1.4;
  margin-top: 0;
}

/* Header über der Tabelle */
.client-panel-main-header {
  margin-bottom: 1rem;
}

.client-panel-main-title {
  color: #fff;
  font-size: 28px;
  margin: 0;
}

.client-panel-main-subtitle {
  font-size: 16px !important;;
  color: #fff;
  margin: 0.2rem 0 0.8rem;
}

/* ============================ */
/* Client Panel Speisen Table */
/* ============================ */
/* Nur auf die Speisen-Tabelle anwenden */
.client-table-dishes {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  margin: 0 20px 1rem;
}

.client-table-dishes thead th {
  background-color: #e2001a;
  color: #fff;
  padding: 6px;
  text-align: left;
  white-space: nowrap;
  font-size: 0.9rem;
}

/* Spaltenbreiten großzügiger */
.client-table-dishes th.col-nr     { width: 5%;  }
.client-table-dishes th.col-img    { width: 8%;  }
.client-table-dishes th.col-dish   { width: 15%; }
.client-table-dishes th.col-desc   { width: 20%; }
.client-table-dishes th.col-aiz    { width: 8%;  }
.client-table-dishes th.col-price  { width: 10%; }
.client-table-dishes th.col-size   { width: 10%; }
.client-table-dishes th.col-action { width: 6%;  }

/* Body-Zellen: keine Umbrüche */
.client-table-dishes tbody td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 4px 6px;
  font-size: 0.85rem;
  text-align: left;
}

/* Rechtbündig für alle Größen- und Preiszellen */
.client-table-dishes td.col-price,
.client-table-dishes td.col-size,
.client-table-dishes td.price-cell,
.client-table-dishes td.size-cell {
  text-align: right;
}

/* Größere Titel-/Name-Felder in Specials, Events & Slider */
.client-table-dishes input[name="title"],
.client-table-dishes input[name="name"] {
  width: 12em !important; 
  text-align: left;
}

/* Linsbündig tippen Titel-/Name-Felder in Specials, Events & Slider */
.sliders-table input[name="name"],
.specials-table input[name="title"],
.events-table  input[name="title"] {
  text-align: left !important;
  direction: ltr !important;
}

/* Eingabefelder etwas kleiner & schwarz/weiß, Text rechtsbündig */
.client-table-dishes input[type="text"] {
  width: 4.5em;
  padding: 2px 4px;
  font-size: 0.85rem;
  box-sizing: border-box;
  background-color: #000; 
  color:#fff;
  border: 1px solid #444;
  text-align: right; 
}

/* €-Symbol direkt am Feld, nicht editierbar */
.client-table-dishes .currency {
  margin-left: 2px;
  user-select: none;
  vertical-align: middle;
  color: #fff;
}

/* Update-Icon */
.client-table-dishes td .update-icon {
  cursor: pointer;
  width: 20px;
  height: 20px;
}

/* Optional: etwas mehr Platz in der Unterkategorie-Spalte */
.client-table-dishes th.col-subcat,
.client-table-dishes td.col-subcat {
  width: 10%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================ */
/* Client Panel Shisha Table */
/* ============================ */
/* Preisanzeige-Felder */
.shisha-price-input {
  width: 3.6em;
  text-align: right;          /* linksbündig */
  background-color: #000;
  color: #fff;
  border: 1px solid #444;
  padding: 4px;
  font-size: 0.9rem;
}

/* Name- und Beschreibungsfelder */
.shisha-text-input {
  width: 12em;               /* breiter */        /* linksbündig */
  background-color: #000;
  color: #fff;
  border: 1px solid #444;
  padding: 4px;
  font-size: 0.9rem;
  text-align: left;
}

/* Falls du lieber an Klassennamen hängst, ergänze so */
.shisha-name-input {
  width: 136px !important;
  box-sizing: border-box;
  text-align: left !important;
}

.shisha-desc-input {
  width: 136px !important;
  box-sizing: border-box;
  text-align: left !important;
}

/* Nur die Unterkategorie-Spalte in der Shisha-Tabelle */
.shisha-table th.col-subcat,
.shisha-table td.col-subcat {
  width: 0px;
}

/* Formular Standard / Premium in eine Reihe zwingen */
#shisha-price-form {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: nowrap;    
  margin-bottom: 1rem;  
  justify-content: center;
}

#shisha-price-form > div {
  display: flex;
  align-items: center;
}

#shisha-price-form .form-label {
  margin: 0 .5rem 0 0;
}

/* Subcategory-Spalte nur in Shisha-Tabelle schmaler machen */
.shisha-table th.col-subcat {
  width: 8% !important;
}

/* Eingabefelder in Shisha-Tabelle breiter und linksbündig */
.shisha-table .shisha-name-input,
.shisha-table .shisha-desc-input {
  width: 150px;
  text-align: left;
}

/* Nur in der Shisha-Partial das HR ausblenden */
.shisha-hr-wrapper hr {
  display: none;
}

/* Nur in der Shisha-Tabelle: Unterkategorie schmaler */
.shisha-table th.col-subcat {
  width: 8% !important;    /* oder z. B. 80px */
}

.shisha-table td.col-subcat {
  max-width: 80px;         /* verhindert Ausbau der Zellen */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hand-Cursor auf dem Speichern Client Panel Shisha */
#shisha-price-form button {
  cursor: pointer;
  background-color: #e2001a;
  border-color: #e2001a;
  padding: 3px;
}

/* Wenn du das Hover-Verhalten anpassen willst: */
#shisha-price-form button:hover {
  background-color: #c10018; /* dunkleres Rot */
  border-color: #c10018;
}

/* ============================ */
/* Client Panel Slider-Table */
/* ============================ */
/* Datums-Spalten-Inputs schwarz + Text weiß */
.slider-table td.date-cell input.form-control {
  background-color: #000;
  color: #fff;
  border: none;
}

/* Breitere Titel-Spalte */
.slider-table td.title-cell {
  min-width: 250px;          /* passe den Wert nach Belieben an */
}



/* Falls Bootstrap dir die Input-Farbe wieder überschreibt */
.sliders-table input.form-control {
  background-color: #000 !important;
  color: #fff !important;
  border: 1px solid #444;
}

/* ============================ */
/* Client Panel Specials & Events Table */
/* ============================ */
/* 1. Eingabefelder in Specials/Events schwarz hinterlegen wie bei Slider */
.specials-table input,
.specials-table textarea,
.specials-table input[type="date"],
.events-table input,
.events-table textarea,
.events-table input[type="date"] {
  background-color: #000;
  color: #fff;
  border-color: #444; /* optional: Grenze anpassen */
}

/* 2. Cursor bei Hover auf Hinzufügen-Button */
.client-panel-add button:hover {
  cursor: pointer;
}

/* 3. Löschen-Icon ebenfalls als klickbar kennzeichnen */
.delete-icon:hover {
  cursor: pointer;
}

/* ============================ */
/* Client Panel Gallery Table */
/* ============================ */
/* Client Panel Gallery Tabelle skalierbar, damit nicht unter Sidebar rutscht */
.client-gallery-table {
  width: 100%;
  display: table;       /* zurück auf normales Table-Layout */
  margin: 20px auto;    /* oben 20px, unten 0, auto zentriert horizontal */
  border-collapse: collapse;
  clear: both;
}

/* 2) Zellen vertikal mittig ausrichten */
.client-gallery-table th,
.client-gallery-table td {
  vertical-align: middle;
  padding: 0.5rem;      /* etwas Luft innenrum */
}

/* Client Panel Gallery Tabelle Tabellenkopf hervorheben */
.client-gallery-table thead th {
  background-color: #e2001a;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Client Panel Gallery Tabelle Zeilenabstände für bessere Lesbarkeit */
.client-gallery-table th,
.client-gallery-table td {
  padding: 0.5rem;
  text-align: left;
  white-space: nowrap;
}

/* Client Panel Gallery Tabelle Overflow-Container für horizontales Scrollen */
.client-gallery-table-wrapper {
  overflow-x: auto;
  margin-bottom: 1rem;
}

#cropper-modal.hidden { display: none; }
#cropper-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: #000;
  color: #fff;
  padding: 1rem;
  border: 2px solid #fff;      /* <— hier der weiße Rahmen */
  border-radius: 6px;
  max-width: 90vw;
}

.modal-backdrop {
  position: absolute; top: 0; left: 0;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #000;
}

.modal-content {
  position: relative;
  background: #000;
  color: #fff;
  padding: 1rem;
  border-radius: 6px;
  width: 90%;
  max-width: 1000px;
}

/* Info-Text */
.crop-info {
  font-size: 14px;
  margin: 0.5rem 0 1rem;
}

/* Body: Cropper + Vorschau nebeneinander */
.modal-body {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  justify-content: flex-start; /* oder: center, je nach Wunsch */
}

/* Box mit simuliertem 600×400 (simuliert 1200×800) */
.crop-container {
  width: 600px;
  height: 400px;
  background: #222;
  overflow: hidden;
  position: relative;
}

#cropper-preview {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 3px solid #fff;
  flex: 0 0 auto;
}

/* Flex-Container ausrichten */
#cropper-modal .modal-body {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;  /* alles links beginnen */
}

/* Verhindert dass eines der beiden Elemente schrumpft */
#cropper-modal .modal-body > .crop-container,
#cropper-modal .modal-body > .preview-wrap {
  flex: 0 0 auto;  /* kein Shrink, keine Grow, feste Größe */
}

/* 3) Schiebe nur die Vorschaubox nach rechts */
.preview-wrap {
    display: flex;
  flex-direction: column;  /* übereinander anordnen */
  align-items: center; 
}

.preview-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 50px;
}

.preview-label {     /* Abstand nach oben, keine seitlichen Ränder */
  font-size: 0.9rem;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  margin-top: 10px !important;
}

.crop-buttons button {
  background: #e2001a;
  color: #fff;
  border: none;
  padding: 0.5em 1em;
  margin: 0 0.5em;
  cursor: pointer;
  border-radius: 4px;
  margin-top: 15px;
}

/* Linke Seite: Cropper */
.crop-container {
  width: 600px;
  height: 400px;
  background: #222;
  overflow: hidden;
  position: relative;
}

/* Rechte Seite: Kreis-Vorschau */
.preview-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

#preview-circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 2px solid #fff;
  overflow: hidden;
  background: #222;
  /* Damit der Kreis das selbe Bild­verhältnis ohne Verzerrung zeigt: */
  background-image: url(""); /* hier per JS setzen */
  background-size: cover;
  background-position: center;
}

/* ============================ */
/* Client Panel Other Table CSS */
/* ============================ */
/* Update, Edit, Delete-Icons at all Tables same */
.update-icon,
.delete-icon,
.edit-icon {
  width: 20px;      /* gleiche Breite */
  height: auto;     /* Höhe passt sich proportional an */
  cursor: pointer;  /* Hand-Cursor beim Hover */
}

/* Client-Panel Add Hinzufügen Button at all Tables same */
.client-panel-add .btn {
  cursor: pointer;
}

/* Größerer Hinzufügen-Button */
#add-special,
#add-event,
#add-slider {
  padding: 0.75rem 1.5rem;      
  font-size: 1.25rem;           
}

/* Hover für „+ Hinzufügen“-Buttons */
#add-special:hover,
#add-event:hover,
#add-slider:hover {
  background-color: #e2001a;
  cursor: pointer;
}

/* Hover-Hintergrund für Update, Edit, Delete-Icons */
.client-table-dishes img.update-icon,
.client-table-dishes img.delete-icon,
.client-table-dishes img.edit-icon {
  display: inline-block;
  padding: 4px;
  border-radius: 4px;
  transition: background .2s;
}

/* Roter Hintergrund beim Hover */
.client-table-dishes img.update-icon:hover,
.client-table-dishes img.delete-icon:hover,
.client-table-dishes img.edit-icon:hover {
  background-color: rgba(226, 0, 26, 0.1);
}


/* Links-nach-Rechts für alle Texteingaben in den Tabellen erzwingen */
.specials-table input[type="text"],
.specials-table textarea,
.events-table input[type="text"],
.events-table textarea {
  direction: ltr !important;
  unicode-bidi: isolate !important;
}

/* Abstand zwischen Bild und Titel bei den Event-Items */
.special-item h3,
.event-item h3 {
    margin-top: 17px;
}


/* Footer mit Buttons */
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1rem;
}
.modal-footer button {
  background: #e2001a;
  color: #fff;
  padding: 0.5em 1em;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.modal-footer button:hover {
  opacity: 0.8;
}

.crop-close {
  position: absolute;
  top: 8px; right: 8px;
  background: none; border: none; color: #fff;
  font-size: 1.2rem; cursor: pointer;
}

/* ------------------------------------------- */
/* Header-Formular: Inputs und Button anpassen */
/* ------------------------------------------- */
.gallery-header {
  width: 100%;
  box-sizing: border-box;

  margin-bottom: 1rem;
}

/* Text-Inputs für Titel/Beschreibung */
.gallery-header input[type="text"] {
  width: 180px;               /* gewünschte Breite */
  padding: 0.5em;             /* Innenabstand */
  border-radius: 4px;         /* abgerundete Ecken */
  border: 1px solid #444;     /* dezenter Rahmen */
  background-color: #222;     /* dunkler Hintergrund */
  color: #fff;                /* weißer Text */
  font-size: 1rem;            /* Schriftgröße */
}

/* Platzhalter‐Text etwas heller */
.gallery-header input[type="text"]::placeholder {
  color: #888;
}

/* Schwarzer Datei-Button mit weißem Text */
input[type="file"]::-webkit-file-upload-button,
input[type="file"]::file-selector-button {
  background-color: #000;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0.5em 1em;
  cursor: pointer;
}

/* Client Panel Gallery Button eigener Upload-Button */
.gallery-header .btn-upload {
  background: #000;
  color: #fff;
  border: none;
  padding: 0.5em 1em;
  border-radius: 4px;
  cursor: pointer;
}

/* Hover-Effekte */
.gallery-header .btn-upload:hover,
input[type="file"]::-webkit-file-upload-button:hover,
input[type="file"]::file-selector-button:hover {
  opacity: 0.8;
  background: #000;
}

/* Client Pabel Gallery Pop-Up */
.open-gallery-btn {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

/* ============================ */
/* Client Panel Sidebar Space to Content-Area */
/* ============================ */
/* Breite der Sidebar (muss zum HTML passen) */
:root {
  --sidebar-width: 260px;
  --page-padding: 20px;  /* rechts und links ein bisschen Puffer */
}

/* Überschrift oben außerhalb des Scroll-Wrappers */
.client-panel-main-header {
  margin: 1rem var(--page-padding);
  text-align: center;
}

/* Wrapper bekommt KEIN overflow-x mehr */
.client-table-wrapper {
  /* Abstand zur Sidebar */
  /* margin-left: var(--sidebar-width); */
  /* kleiner Rand rechts zum Browser-Rand */
  margin-right: var(--page-padding);
  /* so breit wie möglich */
  width: calc(100% - var(--sidebar-width) - var(--page-padding) * 2);
}

/* Die Tabelle füllt den ganzen Wrapper */
.client-table-dishes {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}


/* ============================ */
/* General Lookup Fields */
/* ============================ */

/* Breiteres Eingabefeld für “Speise” Client Panel Speisentabelle */
.client-table-dishes tbody td:nth-child(7) input[type="text"] {
  width: 136px !important;
  box-sizing: border-box;
  text-align: left;
}

/* Breiteres Eingabefeld für “Beschreibung” Client Pabel Speisentabell */
.client-table-dishes tbody td:nth-child(8) input[type="text"] {
  width: 136px !important;
  box-sizing: border-box;
  text-align: left;
}

/* ---------------------
/* Templates Table */
/* ---------------------
/* Container für die Inline-Zeilen */
/* Versteckt den Standard-Django-Lösch-Link Delete Templates in allen Inlines */
.inline-deletelink {
    display: none !important;
}

/* Custom Delete Button Templates Styling */
.custom-delete {
    background-color: #e2001a;
    color: white;
    padding: 4px 8px !important;
    cursor: pointer;
    border: none;
}

.custom-delete:hover {
    border: 1px solid #fff;
}

button.move-up {
    background-color: #000;
}

button.move-up:hover {
    background-color: #e2001a;
}

button.move-down {
    background-color: #000; 
}

button.move-down:hover {
    background-color: #e2001a; 
}

button.add-row {
    background-color: #000; 
}

button.add-row:hover {
    background-color: #e2001a; 
}

button.duplicate-row {
    color: #fff;
    background-color: #000; 
}

button.duplicate-row:hover {
    background-color: #e2001a; 
}

.secondary-nav-list .nav-item {
    font-size: 16px;
    }

.container.mt-5 {
    margin-top: 3rem !important; /* Erzwinge mt-5 auf allen Seiten */
}

/* ============================ */
/* Category Button and Scroll Top Button */
/* ============================ */
/* ============================ */
/* Floating Buttons */
/* ============================ */
.category-button {
    position: fixed;
    bottom: 30px;
    right: 1rem;
    width:  50px;
    height: 50px;
    background-color: #e2001a;
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s;
    z-index: 1000;
  }

.category-button:hover {
    background-color: #c00018;
}

.category-overlay {
    display: none;
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1000;
  }

.category-overlay.active {
    display: block;
    pointer-events: none;   
}

.category-overlay.active .category-list {
    position: absolute;
    right: 1rem;              
    bottom: calc(75px + 15px);
    width: 200px;
    max-width: 90%;
    max-height: 400px;
    pointer-events: auto;
    overflow-y: auto;   
    text-align: center;
  }
  
.category-list {
    background-color: #e2001a;
    border-radius: 0.5rem;
}

.category-list .category-link {
    display: block;
    padding: 12px 16px;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
  
.category-list .category-link:hover {
   background-color:#000; /* sanfter schwarzer Hover */
}

.category-button-icon {
  width: 28px;
  height: 28px;
  display: block;
  margin: auto;
}

.category-button.active {
  background-color: #000 !important;
}

.floating-buttons-left {
    position: fixed;
    left: 30px;
    bottom: 30px;
    z-index: 9999;
}

.floating-buttons-right {
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translateY(100%); /* Panel sitzt direkt über dem Button */
}

/* ============================ */
/* Scroll Top Button */
/* ============================ */
.scroll-top-button {
  position: fixed;
  left: 30px;
  bottom: 30px;
  z-index: 9999;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #e2001a;
  border: none;
  cursor: pointer;
  display: none;          /* versteckt ihn initial */
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
}


.scroll-top-button:hover, 
.category-button:hover {
    transform: scale(1.1);
}

/* ============================ */
/* AdSection Info */
/* ============================ */
.ad-section-info p {
  margin: 0.5rem 0;
  /* z.B. Default-Stil, weitere Styles je nach css-Feld */
}

.ad-section-info p:nth-child(1) {
  font-size: 22px;
  font-weight: 400;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.ad-section-info p:nth-child(2) {
  font-size: 16px;
  text-align: center;
  line-height: 20px;
}

.ad-section-info p:nth-child(3) {
  font-size: 12px;
  text-align: center;
  line-height: 16px;
}

/* ============================ */
/* ===== AdBoxes ===== */
/* ============================ */
.adbox {
  flex: 0 0 auto;
  overflow: hidden;
  justify-content: center;
  margin: 0.5rem;
  flex-wrap: nowrap !important;
}

.adboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.adboxes,
.ad-boxes {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  overflow-x: auto;
  justify-content: center;
}
  
.adbox-img {
  display: block;
  width: 100%;
  height: auto !important;
  object-fit: cover;
  border: 3px solid #fff;
}

.adbox .adbox-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 0.5rem;
  }
  
.adbox .adbox-subtitle {
    font-size: 16px;
    letter-spacing: 1px;
    text-align: center;
    margin-bottom: 0.25rem;
}

.adbox .adbox-note {
    font-size: 14px;
    letter-spacing: 1px;
    text-align: center;
    margin-bottom: 0.25rem;
}
  
.adbox-content {
    padding: 0.75rem;
}
   
/* ============================ */
/* ===== AdCircles ===== */
/* ============================ */
.ad-circle {
    flex: 0 0 auto;  /* nicht wachsen */
    overflow: hidden;
    display: flex;     
    flex-direction: column;   
    align-items: center;
}

.ad-circles {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-top: 0rem;
}

/* Größe L */
.ad-circle-l img {
    width: 150px !important;
    height: 150px !important;
    border-radius: 50%;
    border: 3px solid #fff;
    object-fit: cover;
}

/* Größe M */
.ad-circle-m img {
    width: 100px !important;
    height: 100px !important;
    border-radius: 50%;
    border: 3px solid #fff;
    object-fit: cover;
}

/* Größe S */
.ad-circle-s img {
    width: 75px !important;
    height: 75px !important;
    border-radius: 50%;
    border: 3px solid #fff;
    object-fit: cover;
}

.ad-circle-label {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    margin-top: 0.7rem;
    margin-bottom: 0.25rem;
}
  
.ad-circle-subtitle {
    font-size: 14px;
    letter-spacing: 1px;
    text-align: center;
    margin: 0;
    margin-bottom: 0.25rem;
  }
  
.ad-circle-note {
    font-size: 12px;
    letter-spacing: 1px;
    text-align: center;
    margin: 0.25rem 0;
}

/* AdCircle L-Size Overrides */
.ad-circle-l .ad-circle-label {
  font-size: 16px;
}
.ad-circle-l .ad-circle-subtitle {
  font-size: 14px;
}
.ad-circle-l .ad-circle-note {
  font-size: 12px;
}

/* AdCircle M-Size Overrides */
.ad-circle-m .ad-circle-label {
  font-size: 14px;
}
.ad-circle-m .ad-circle-subtitle {
  font-size: 12px;
}
.ad-circle-m .ad-circle-note {
  font-size: 10px;
}

/* AdCircle S-Size Overrides */
.ad-circle-s .ad-circle-label {
  font-size: 11px;
}
.ad-circle-s .ad-circle-subtitle {
  font-size: 9px;
}
.ad-circle-s .ad-circle-note {
  font-size: 7px;
}

.swiper .swiper-wrapper {
    display: flex;
  }

/* Abstand unter dem AdBox-Swiper */
.adbox-swiper {
  margin-bottom: 1.5rem;
}

/* Abstabd zwischen AdCircle-Swipern */
.adcircle-swiper-l { margin-bottom: 2.5rem; }
.adcircle-swiper-m { margin-bottom: 2.8rem; }
.adcircle-swiper-s { margin-bottom: 0.5rem; }

.spinner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}


/* ============================ */
/* Home */
/* ============================ */
.menulo-title     { font-size: 10rem; font-weight: 900; text-transform: uppercase;}
.menulo-subtitle  { font-size: 1.5rem; margin: -1.7rem 0 1rem; text-transform: uppercase; letter-spacing: 2px;}
.menulo-subtitle2 { font-size: 10rem; font-weight: 900; margin: 1rem 0 3rem; text-transform:uppercase;}
.menulo-subtitle3 { font-size: 1.2rem; margin: -2.8rem 0 1rem;}
.menulo-text-head { font-size: 1.5rem; font-weight: 700; text-transform: uppercase;}
.menulo-text      { max-width: 60em; margin: 0 auto 0rem; font-size: 1.125rem; line-height: 1.6;}
.menulo-highlight { color: #e2001a; font-weight: 600;}
.menulo-btn--primary {
  display: inline-block;
  background-color: #e2001a;
  color: #fff;
  padding: 0.75rem 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.menulo-btn--primary:hover {
  background-color: #bb2026;
}

.home-icon {
    width: 60px;        
    height: 60px;
    padding-bottom: 10px;    
    vertical-align: middle;
}

.home-icon-one {
    width: 80px;        
    height: 80px;
    padding-bottom: 10px;  
    margin-right: -20px;        
    vertical-align: middle;
}

.home-icon-two {
    width: 60px;        
    height: 60px;  
    vertical-align: middle;
}

.home-icon-three {
    width: 60px;        
    height: 60px;
    margin-left: -20px;   
    padding: 5px;        
    vertical-align: middle;
}

/* ============================ */
/* Cookie Banner */
/* ============================ */
/* Banner unten */
.cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #000; color: #fff;
  padding: .75em 1em;
  display: flex; align-items: center;
  justify-content: space-between;
  font-size: .9em; z-index: 999;
}

.cookie-banner .btn { 
  background: #000;
  border: 1px solid #fff;
  border-radius: 3px;
  color: #fff; 
  border: none; 
  padding: .5em 1em; 
  cursor: pointer; 
}

.cookie-banner .btn--link { 
  background: none; 
  color: #fff; 
  border: none; 
  text-decoration: none; 
  cursor: pointer; 
}

/* Cookie‑Banner: Layout ändern auf zentrierte Column */
.cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #000;
  color: #fff;
  display: flex;
  flex-direction: column;    /* Stellt auf Vertikal-Layout um */
  align-items: center;       /* Zentriert alle Kinder */
  padding: 1em;
  font-size: 0.95em;
  z-index: 9999;
}

/* Große, zentrierte Überschrift */
.cookie-banner_title {
  font-size: 1.2em;
  font-weight: bold;
  margin: 0 0 0.5em;
  text-align: center;
}

/* Nachricht ebenfalls zentrieren */
.cookie-banner_message {
  margin: 0 0 1em;
  text-align: center;
  line-height: 1.4;
}

/* Buttons nebeneinander, aber mittig */
.cookie-banner_actions {
  display: flex;
  gap: 0.75em;
}

/* Modal Overlay */
.cookie-modal.hidden { display: none; }
.cookie-modal {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1000;
}

.cookie-modal_backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.6);
}

/* Cookie Banner Pop Up */
.cookie-modal_content {
  position: relative;
  color: #fff;
  background: #000;
  max-width: 600px;
  max-height: 50vh;        /* maximal 80% der Fensterhöhe */
  overflow-y: auto;        /* vertikal scrollen, wenn nötig */
  margin: 5% auto;
  padding: 1.5em;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
  box-sizing: border-box;  /* Padding zählt zur max-height dazu */
}

/* Buttons im Actions‑Container */
.cookie-modal_actions .btn {
  background: #000;
  color: #fff;
  border: none;
  padding: 0.5em 1em;
  font-size: 0.9em;
  cursor: pointer;
  border: 1px solid #fff;
  border-radius: 3px;
}

.cookie-modal_actions .btn:hover {
  background: #e2001a;
}

.cookie-modal_close {
  position: absolute; top: .5em; right: .5em;
  background: none; border: none; font-size: 1.25em; cursor: pointer;
}

.cookie-categories label {
  display: block; margin: .5em 0;
  font-size: .95em;
}

.cookie-modal_actions { 
  text-align: right; 
  margin-top: 1.5em; 
}

/* ============================ */
/* Language Switcher Sprach-Switcher */
/* ============================ */
/* Sprach-Switcher */
.dish-lang-switcher-wrapper {
  display: flex;
  justify-content: center;
}

.dish-lang-switcher .btn {
  border: 1px solid #fff;
  color: #fff;
  background-color: transparent;
  padding: 0.2rem 0.8rem;
  font-size: 0.8rem;
  text-transform: uppercase;
}

/* Hover / Focus */
.dish-lang-switcher .btn:hover,
.dish-lang-switcher .btn:focus {
  background-color: #e2001a;
  border: 1px solid #fff;
  color: #fff;
}

/* Active Language */
.dish-lang-switcher .btn.active {
  background-color: #e2001a;
  border: 1px solid #fff;
  color: #fff;
}

/* ============================ */
/* Responsive Design */
/* ============================ */
@media (max-width: 992px) {
  /* 1) Container im Navbar ganz links/rechts */
  nav.navbar .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 2) Collapse-Bereich wenn geöffnet linksbündig */
  .navbar-collapse.collapse.show {
    padding-left:    0 !important;
    padding-right:   0 !important;
    justify-content: flex-start !important;
    align-items:     flex-start !important;
  }

  /* 3) UL selbst ohne Einrückung */
  .navbar-nav {
    width:           100%;
    margin:          0 !important;
    padding-left:    0 !important;
    list-style:      none;
  }

  /* 4) Nav-Items füllen volle Breite, Links block-level */
  .navbar-nav .nav-item {
    width: 100%;
  }
  .navbar-nav .nav-link {
    text-align:    left;
    display:       block;
    padding:       0.75rem 1rem; /* oben/unten 0.75rem, links/rechts 1rem */
    margin-left: -15px;
    border-radius: 0;
  }

  /* 5) Hover, Focus & Active: roter Hintergrund */
  .navbar-nav .nav-link:hover,
  .navbar-nav .nav-link:focus,
  .navbar-nav .active .nav-link {
    background-color: #e2001a !important;
    color:            #fff !important;
  }

  .navbar-brand img {
    padding-left: 17px;
}

.footer-text {
    text-align: center; 
    font-size: 11px;
}

/* Secondary Navigation kompakter auf <= 992px */
.secondary-nav-list {
  gap: 2px !important;                 /* Zwischenraum aus */
  justify-content: center !important;/* zentriert */
}
.secondary-nav-list .nav-item {
  padding-left: 8px !important;      /* enger, nur horizontal */
  padding-right: 8px !important;
}

} /* schließt die @media (max-width: 992px) */

/* Mobile Portrait (<480px Breite) */
@media (orientation: portrait) {
.menulo-title {
  font-size: 5rem;
  margin: 0 auto;
  margin-bottom: 1rem;
}

.menulo-subtitle {
  font-size: 0.7rem;
}

.menulo-subtitle2 {
  font-size: 7rem;
  margin: 0 auto;
  margin-bottom: 3rem;
  line-height: 6.2rem;
} 

.menulo-subtitle3 {
  font-size: 0.9rem;
}
}

/* Mobile Landscape (≥480px Breite) */
@media (orientation: landscape) {
.menulo-title {
  font-size: 9.7rem;
}

.menulo-subtitle2 {
  line-height: 9rem;
}
}

/* Cookie Banner und Pop Up Smartphone‑Optimierung */
@media only screen and (max-width: 600px), only screen and (orientation: landscape) and (max-height: 600px) {
/* Modal‑Inhalt insgesamt etwas kleiner */
.cookie-modal_content {
  font-size: 12px;
  padding: 1em;
}

/* Action‑Buttons im Modal */
.cookie-modal_actions .btn {
  font-size: 12px;
  padding: 0.4em 0.8em;
}

/* Cookie Banner‑Text kleiner */
.cookie-banner_title {
  font-size: 14px;
  font-weight: bold;
}

.cookie-banner_message {
  font-size: 12px;
}

.cookie-banner .btn,
.cookie-banner .btn--link {
  font-size: 12px;
  padding: 0.4em 0.8em;
}
} /* schließt die @media (max-width: 600px) */

/* ============================================
   Lange Dish-Namen in Mobile optimiert
   ============================================ */
@media (max-width: 768px) {

  .dish-name {
      white-space: normal !important;
      word-break: break-word !important;
      overflow-wrap: anywhere !important;

      /* Auf 2 Zeilen begrenzen */
      display: -webkit-box !important;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;

      overflow: hidden !important;
      text-overflow: ellipsis;
  }
}



/* © AIVEO Werbeagentur | Menulo */