:root {
  --gold-text: #8B6914;
  --gold-accent: #B8860B;
  --text-muted: #666666;
  --card-bg: rgba(255, 255, 255, 0.9);
  --bg-light: #f5f5f5;
  --text-dark: #333333;
  --border-light: rgba(0, 0, 0, 0.1);
}

body {
  font-family: 'Raleway', sans-serif;
  background: #f8f9fa;
  color: var(--text-dark);
  min-height: 100vh;
  position: relative;
}

/* Light background pattern */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
  z-index: -1;
}

h1, h2, h3, h4, h5 {
  font-family: 'Playfair Display', serif;
  letter-spacing: 0.5px;
}

/* ===== Angeheftete Kopfleiste =====
   Enthält zwei Zeilen: Logo + Aktionen, darunter die Kategorien. Beide
   bleiben beim Scrollen gemeinsam oben stehen. Der frühere große,
   mittige Kopfbereich (Logo 150 px + Untertitel + Abstände, rund 230 px
   Höhe) ist entfallen - er scrollte weg und verbrauchte auf dem
   Smartphone fast den gesamten ersten Bildschirm. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-light);
  margin: 0 -12px; /* Innenabstand des Bootstrap-Containers ausgleichen */
  padding: 0 12px;
}

.site-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0;
}

.site-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  text-decoration: none;
}

/* Das Pizzazeichen. Feste Hoehe, damit es neben dem Namen nicht wandert. */
.brand-zeichen {
  height: 46px;
  width: 46px;
  flex: none;
  object-fit: contain;
  display: block;
}

/* "Rimini" in der Anzeigeschrift der Seite - dieselbe, in der auch die
   Kategorien und Gerichtnamen gesetzt sind. */
.brand-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 30px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-dark);
  white-space: nowrap;
}

@media (max-width: 576px) {
  .site-brand { gap: 9px; }
  .brand-zeichen { height: 36px; width: 36px; }
  .brand-name { font-size: 24px; }
}

.header-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Logo läuft klein in der Kopfleiste mit, damit der Name immer sichtbar ist. */
.header-logo {
  height: 52px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  display: block;
}

@media (max-width: 576px) {
  .header-logo {
    height: 40px;
    max-width: 150px;
  }
}

/* Navbar */
.navbar {
  background: #fff !important;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.navbar-brand {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  color: var(--gold-text) !important;
}

.search-input {
    border: 1px solid var(--border-light);
    background: #fff;
    border-radius: 50px;
    padding: 0.5rem 1rem;
    color: var(--text-dark);
}

.search-input::placeholder {
  color: var(--text-muted);
}

/* Category Navigation
   Sitzt jetzt INNERHALB von .site-header, das die Sticky-Positionierung
   übernimmt - deshalb hier bewusst position: relative. */
.category-nav-container {
  display: flex;
  align-items: center;
  padding: 0.5rem 0 0.6rem;
  margin-bottom: 0;
  position: relative;
  border-top: 1px solid var(--border-light);
}

.category-scroll-wrapper {
  display: flex;
  gap: 15px;
  padding: 0 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  flex: 1;
  /* Hide scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.category-scroll-wrapper::-webkit-scrollbar {
  display: none;
}

/* Scroll Arrows */
.category-scroll-arrow {
  background: #fff;
  border: 1px solid var(--gold-accent);
  color: var(--gold-text);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.category-scroll-arrow:hover {
  background: var(--gold-accent);
  color: #fff;
  transform: scale(1.1);
}

.category-scroll-arrow:active {
  transform: scale(0.95);
}

.category-scroll-arrow.hidden {
  opacity: 0;
  pointer-events: none;
}

.category-scroll-arrow-left {
  margin-right: 8px;
}

.category-scroll-arrow-right {
  margin-left: 8px;
}

/* Gradient fade effect on edges */
.category-nav-container::before,
.category-nav-container::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30px;
  pointer-events: none;
  z-index: 5;
}

.category-nav-container::before {
  left: 44px;
  background: linear-gradient(to right, rgba(255,255,255,0.9), transparent);
}

.category-nav-container::after {
  right: 44px;
  background: linear-gradient(to left, rgba(255,255,255,0.9), transparent);
}

/* Ohne Scrollpfeile beginnt der Verlauf direkt am Rand. */
.category-nav-container.no-arrows::before { left: 0; }
.category-nav-container.no-arrows::after { right: 0; }

@media (max-width: 767.98px) {
  .category-nav-container::before { left: 0; }
  .category-nav-container::after { right: 0; }
}

.category-nav-container.at-start::before {
  opacity: 0;
}

.category-nav-container.at-end::after {
  opacity: 0;
}

.category-pill {
  background: #fff;
  border: 1px solid var(--border-light);
  color: var(--text-muted);
  padding: 0.5rem 1.2rem;
  border-radius: 8px;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 1px;
  font-weight: 600;
  transition: all 0.3s ease;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}

.category-pill:hover {
  border-color: var(--gold-accent);
  color: var(--gold-text);
}

.category-pill.active {
  background: var(--gold-accent);
  border-color: var(--gold-accent);
  color: #fff;
  box-shadow: 0 4px 12px rgba(184, 134, 11, 0.3);
}

/* Scrollpfeile auf Touchgeräten ausblenden - dort wischt man, und die
   beiden Pfeile kosteten 72 px der ohnehin knappen Breite.
   Die Klasse setzt das JavaScript anhand der Zeigergenauigkeit; die
   Medienabfrage ist der Rückfall für Browser ohne Pointer-Erkennung. */
.category-nav-container.no-arrows .category-scroll-arrow {
  display: none;
}

@media (max-width: 767.98px) {
  .category-scroll-arrow {
    display: none;
  }
}

/* Mobile Category Navigation
   Ziel: mindestens 44 px Berührungshöhe (Apples Empfehlung) UND möglichst
   viele sichtbare Kategorien. Die Schrift bleibt daher lesbar, die Höhe
   kommt aus min-height statt aus großen Innenabständen. */
@media (max-width: 576px) {
  .category-nav-container {
    padding: 0.35rem 0 0.45rem;
  }

  .category-scroll-wrapper {
    gap: 8px;
    padding: 0 2px;
  }

  .category-pill {
    padding: 0.4rem 0.85rem;
    min-height: 44px;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    gap: 6px;
    border-radius: 10px;
  }

  .category-pill i {
    font-size: 0.8rem;
  }
}

/* Cards */
.card-menu-item {
  background: #fff;
  border: 1px solid var(--gold-accent);
  border-radius: 16px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  min-height: 140px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.card-menu-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.menu-item-image-container {
  flex-shrink: 0;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 2px solid var(--gold-accent);
  padding: 4px; /* Gap */
  position: relative;
}

.menu-item-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.card-content {
  flex-grow: 1;
  min-width: 0; /* Text truncation fix */
}

.card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.5rem;
  gap: 1rem;
}

.card-title-text {
  font-size: 1.2rem;
  color: var(--gold-text);
  margin: 0;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.price-tag {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  color: var(--text-dark);
  white-space: nowrap;
  font-weight: 600;
}

.price-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.price-variant {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 2px;
}

.variant-name {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 1px;
}

.variant-price {
  color: var(--text-dark);
  font-weight: 600;
  font-family: 'Playfair Display', serif;
}

.card-description {
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in {
  animation: fadeIn 0.5s ease forwards;
  opacity: 0;
}

/* Mobile Adjustments */
@media (max-width: 576px) {
  .card-menu-item {
    flex-direction: column;
    text-align: center;
    padding: 1.5rem;
    gap: 1rem;
  }

  .card-header-row {
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
  }

  .card-title-text {
    white-space: normal;
  }

  .menu-item-image-container {
    width: 130px;
    height: 130px;
  }

  .price-variant {
      justify-content: center;
      gap: 10px;
  }
}

/* ========== WARENKORB STYLES ========== */

/* Warenkorb Icon in der Navigation */
.cart-icon-container {
  position: relative;
  cursor: pointer;
  padding: 0.5rem 0.75rem;
  margin-left: 1rem;
  transition: transform 0.2s ease;
  flex-shrink: 0;
  border-left: 1px solid var(--border-light);
}

.cart-icon-container:hover {
  transform: scale(1.1);
}

.cart-icon {
  font-size: 1.5rem;
  color: var(--gold-text);
}

.cart-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--gold-accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
}

.cart-badge.hidden {
  display: none;
}

/* In den Warenkorb Button */
.btn-add-cart {
  background: var(--gold-accent);
  border: 1px solid var(--gold-accent);
  color: #fff;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 0.5rem;
}

.btn-add-cart:hover {
  background: var(--gold-text);
  border-color: var(--gold-text);
  color: #fff;
}

.btn-add-cart.added {
  background: #28a745;
  border-color: #28a745;
  color: #fff;
}

/* Varianten-Auswahl für Pizza */
.variant-select {
  background: #fff;
  border: 1px solid var(--border-light);
  color: var(--text-dark);
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  margin-right: 0.5rem;
}

.variant-select option {
  background: #fff;
  color: var(--text-dark);
}

/* Warenkorb Sidebar */
.cart-sidebar {
  position: fixed;
  top: 0;
  right: -400px;
  width: 380px;
  max-width: 90vw;
  height: 100vh;
  background: #fff;
  border-left: 1px solid var(--border-light);
  z-index: 1050;
  transition: right 0.3s ease;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
}

.cart-sidebar.open {
  right: 0;
}

.cart-sidebar-header {
  padding: 1.5rem;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-sidebar-header h2 {
  color: var(--gold-text);
  margin: 0;
  font-size: 1.5rem;
}

.cart-close-btn {
  background: none;
  border: none;
  color: var(--text-dark);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.5rem;
  transition: color 0.2s;
}

.cart-close-btn:hover {
  color: var(--gold-accent);
}

.cart-sidebar-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  background: #fafafa;
}

.cart-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 3rem 1rem;
}

.cart-empty i {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

/* Warenkorb Artikel */
.cart-item {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.cart-item-info {
  flex: 1;
}

.cart-item-name {
  color: var(--text-dark);
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.cart-item-variant {
  color: var(--text-muted);
  font-size: 0.8rem;
  text-transform: capitalize;
}

.cart-item-price {
  color: var(--gold-text);
  font-size: 0.9rem;
  font-weight: 600;
}

.cart-item-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cart-qty-btn {
  background: #f0f0f0;
  border: none;
  color: var(--text-dark);
  width: 28px;
  height: 28px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.cart-qty-btn:hover {
  background: var(--gold-accent);
  color: #fff;
}

.cart-qty {
  color: var(--text-dark);
  min-width: 24px;
  text-align: center;
  font-weight: 600;
}

.cart-remove-btn {
  background: none;
  border: none;
  color: #dc3545;
  cursor: pointer;
  padding: 0.25rem;
  font-size: 1rem;
  transition: transform 0.2s;
}

.cart-remove-btn:hover {
  transform: scale(1.2);
}

/* Warenkorb Footer */
.cart-sidebar-footer {
  padding: 1.5rem;
  border-top: 1px solid var(--border-light);
  background: #fff;
}

.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.cart-total-label {
  color: var(--text-muted);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.cart-total-price {
  color: var(--gold-text);
  font-size: 1.5rem;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
}

.btn-checkout {
  width: 100%;
  background: var(--gold-accent);
  border: none;
  color: #fff;
  padding: 1rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-checkout:hover {
  background: var(--gold-text);
  transform: translateY(-2px);
}

.btn-checkout:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
}

.btn-clear-cart {
  width: 100%;
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--text-muted);
  padding: 0.75rem;
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
  margin-top: 0.75rem;
  transition: all 0.2s;
}

.btn-clear-cart:hover {
  border-color: #dc3545;
  color: #dc3545;
}

/* Overlay */
.cart-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1040;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.cart-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* ========== MENU SECTIONS (One-Page Layout) ========== */

.menu-section {
  padding: 2rem 0;
  border-bottom: 1px solid var(--border-light);
  scroll-margin-top: 100px; /* Offset für fixierte Navigation */
}

.menu-section:last-child {
  border-bottom: none;
}

/* Kategorie Header Bild */
.section-header-image {
  width: 100%;
  height: 200px;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.section-header-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.section-header-image:hover img {
  transform: scale(1.02);
}

@media (max-width: 576px) {
  .section-header-image {
    height: 150px;
    border-radius: 12px;
  }
}

.section-header {
  margin-bottom: 1.5rem;
}

.section-header-content {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.5rem;
}

.section-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  color: var(--gold-text);
  margin: 0;
  position: relative;
  padding-bottom: 0.5rem;
}

.section-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: var(--gold-accent);
}

.section-count {
  color: var(--text-muted);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.section-info {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0.75rem 0 0 0;
  padding: 0.75rem 1rem;
  background: rgba(184, 134, 11, 0.08);
  border-left: 3px solid var(--gold-accent);
  border-radius: 0 8px 8px 0;
  line-height: 1.5;
}

.section-info i {
  color: var(--gold-accent);
  margin-right: 0.5rem;
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Mobile adjustments for sections */
@media (max-width: 576px) {
  .section-title {
    font-size: 1.4rem;
  }

  .section-header-content {
    flex-direction: column;
    gap: 0.25rem;
  }

  .section-info {
    font-size: 0.8rem;
    padding: 0.5rem 0.75rem;
  }
}

/* ========== PRODUKT-ANPASSUNGS-MODAL ========== */

.customize-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.customize-overlay.open {
  opacity: 1;
  visibility: visible;
}

.customize-modal {
  position: fixed;
  bottom: -100%;
  left: 0;
  right: 0;
  max-height: 85vh;
  background: #fff;
  border-top: 1px solid var(--border-light);
  border-radius: 20px 20px 0 0;
  z-index: 1110;
  transition: bottom 0.4s ease;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
}

.customize-modal.open {
  bottom: 0;
}

.customize-modal-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.customize-modal-header h3 {
  color: var(--gold-text);
  margin: 0;
  font-size: 1.3rem;
  font-family: 'Playfair Display', serif;
}

.customize-close-btn {
  background: none;
  border: none;
  color: var(--text-dark);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 0.5rem;
  transition: color 0.2s;
}

.customize-close-btn:hover {
  color: var(--gold-accent);
}

.customize-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  background: #fafafa;
}

/* Option Groups */
.option-group {
  margin-bottom: 1.5rem;
}

.option-group-title {
  color: var(--text-dark);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.option-group-title .required-badge {
  background: var(--gold-accent);
  color: #fff;
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  font-weight: 700;
}

.option-group-title .optional-badge {
  background: #e0e0e0;
  color: var(--text-muted);
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

/* Option Items */
.option-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  margin-bottom: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.option-item:hover {
  background: #f5f5f5;
  border-color: var(--gold-accent);
}

.option-item.selected {
  background: rgba(184, 134, 11, 0.1);
  border-color: var(--gold-accent);
}

.option-item-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.option-radio,
.option-checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.option-checkbox {
  border-radius: 4px;
}

.option-item.selected .option-radio,
.option-item.selected .option-checkbox {
  border-color: var(--gold-accent);
  background: var(--gold-accent);
}

.option-item.selected .option-radio::after,
.option-item.selected .option-checkbox::after {
  content: "";
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
}

.option-item.selected .option-checkbox::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.7rem;
  color: #fff;
  background: none;
  border-radius: 0;
}

.option-name {
  color: var(--text-dark);
  font-size: 0.95rem;
}

.option-price {
  color: var(--gold-text);
  font-size: 0.9rem;
  font-weight: 600;
}

.option-price.free {
  color: var(--text-muted);
}

/* Modal Footer */
.customize-modal-footer {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--border-light);
  background: #fff;
}

.customize-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.customize-price-label {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.customize-total-price {
  color: var(--gold-text);
  font-size: 1.4rem;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
}

.btn-customize-add {
  width: 100%;
  background: var(--gold-accent);
  border: none;
  color: #fff;
  padding: 1rem;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-customize-add:hover {
  background: var(--gold-text);
  transform: translateY(-2px);
}

.btn-customize-add:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
}

/* Desktop: Modal zentriert */
@media (min-width: 768px) {
  .customize-modal {
    bottom: auto;
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0;
    visibility: hidden;
    width: 450px;
    max-height: 80vh;
    border-radius: 16px;
    border: 1px solid var(--border-light);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  }

  .customize-modal.open {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    visibility: visible;
  }
}

/* Textarea für Notizen */
.option-textarea {
  width: 100%;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  color: var(--text-dark);
  font-size: 0.95rem;
  font-family: inherit;
  resize: vertical;
  min-height: 60px;
  transition: border-color 0.2s ease;
}

.option-textarea::placeholder {
  color: var(--text-muted);
}

.option-textarea:focus {
  outline: none;
  border-color: var(--gold-accent);
  background: #fff;
}

/* ========== AUTH MODAL STYLES ========== */

/* Auth Icon in Navigation */
.auth-icon-container {
  position: relative;
  cursor: pointer;
  padding: 0.5rem 0.75rem;
  margin-left: 0.5rem;
  transition: transform 0.2s ease;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.auth-icon-container:hover {
  transform: scale(1.1);
}

.auth-icon {
  font-size: 1.4rem;
  color: var(--gold-text);
}

.auth-icon.logged-in {
  color: #28a745;
}

.auth-user-name {
  font-size: 0.8rem;
  color: var(--gold-text);
  font-weight: 500;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-user-name.hidden {
  display: none;
}

/* Auth Overlay */
.auth-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1200;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.auth-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* Auth Modal */
.auth-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  width: 400px;
  max-width: 90vw;
  max-height: 90vh;
  background: #fff;
  border-radius: 16px;
  z-index: 1210;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.auth-modal.open {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  visibility: visible;
}

.auth-modal-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.auth-modal-header h3 {
  color: var(--gold-text);
  margin: 0;
  font-size: 1.3rem;
  font-family: 'Playfair Display', serif;
}

.auth-close-btn {
  background: none;
  border: none;
  color: var(--text-dark);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 0.5rem;
  transition: color 0.2s;
}

.auth-close-btn:hover {
  color: var(--gold-accent);
}

/* Auth Tabs */
.auth-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-light);
}

.auth-tabs.hidden {
  display: none;
}

.auth-tab {
  flex: 1;
  background: none;
  border: none;
  padding: 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.auth-tab:hover {
  color: var(--gold-text);
}

.auth-tab.active {
  color: var(--gold-accent);
}

.auth-tab.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gold-accent);
}

/* Auth Error */
.auth-error {
  background: #f8d7da;
  color: #721c24;
  padding: 0.75rem 1rem;
  margin: 0.75rem 1.5rem 0;
  border-radius: 8px;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.auth-error::before {
  content: "\f071";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

.auth-error.hidden {
  display: none;
}

.auth-error.success {
  background: #d4edda;
  color: #155724;
}

.auth-error.success::before {
  content: "\f00c";
}

.auth-error.info {
  background: #fff3cd;
  color: #856404;
}

.auth-error.info::before {
  content: "\f07a"; /* shopping-cart icon */
}

/* Auth Forms */
.auth-form {
  padding: 1.5rem;
  overflow-y: auto;
}

.auth-form.hidden {
  display: none;
}

.auth-form-group {
  margin-bottom: 1rem;
}

.auth-form-group label {
  display: block;
  color: var(--text-dark);
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
}

.auth-form-group input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  font-size: 0.95rem;
  color: var(--text-dark);
  transition: border-color 0.2s ease;
}

.auth-form-group input:focus {
  outline: none;
  border-color: var(--gold-accent);
}

.auth-form-group input::placeholder {
  color: var(--text-muted);
}

.auth-form-row {
  display: flex;
  gap: 1rem;
}

.auth-form-row .auth-form-group {
  flex: 1;
}

.auth-submit-btn {
  width: 100%;
  background: var(--gold-accent);
  border: none;
  color: #fff;
  padding: 1rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 0.5rem;
}

.auth-submit-btn:hover {
  background: var(--gold-text);
}

.auth-submit-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* Logged In View */
.auth-logged-in {
  padding: 2rem 1.5rem;
  text-align: center;
}

.auth-logged-in.hidden {
  display: none;
}

.auth-user-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.auth-user-avatar {
  font-size: 4rem;
  color: var(--gold-accent);
}

.auth-user-details {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.auth-logged-in-name {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-dark);
}

.auth-logged-in-email {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.auth-logout-btn {
  width: 100%;
  background: transparent;
  border: 1px solid #dc3545;
  color: #dc3545;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.auth-logout-btn:hover {
  background: #dc3545;
  color: #fff;
}

/* Mobile Auth Modal */
@media (max-width: 576px) {
  .auth-modal {
    width: 95vw;
    max-height: 85vh;
  }

  .auth-form-row {
    flex-direction: column;
    gap: 0;
  }

  .auth-user-name {
    display: none;
  }
}

/* ========== PROFILE FORM STYLES ========== */

.auth-logged-in-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

.auth-edit-profile-btn {
  width: 100%;
  background: var(--gold-accent);
  border: none;
  color: #fff;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.auth-edit-profile-btn:hover {
  background: var(--gold-text);
}

.auth-form-divider {
  display: flex;
  align-items: center;
  margin: 1rem 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.auth-form-divider::before,
.auth-form-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-light);
}

.auth-form-divider span {
  padding: 0 0.75rem;
  font-weight: 500;
}

.auth-form-group-street {
  flex: 3;
}

.auth-form-group-house {
  flex: 1;
  min-width: 80px;
}

.auth-form-group-zip {
  flex: 1;
  min-width: 100px;
}

.auth-form-group-city {
  flex: 2;
}

.auth-form-buttons {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

.auth-form-buttons .auth-submit-btn {
  flex: 2;
  margin-top: 0;
}

.auth-cancel-btn {
  flex: 1;
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--text-muted);
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.auth-cancel-btn:hover {
  border-color: var(--text-dark);
  color: var(--text-dark);
}

@media (max-width: 576px) {
  .auth-form-group-street,
  .auth-form-group-house,
  .auth-form-group-zip,
  .auth-form-group-city {
    flex: 1 1 100%;
  }

  .auth-form-buttons {
    flex-direction: column-reverse;
  }

  .auth-form-buttons .auth-submit-btn,
  .auth-cancel-btn {
    flex: 1;
  }
}

/* ========== PROFILE FORM STYLES ========== */

.auth-logged-in-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.auth-action-btn {
  width: 100%;
  background: #f8f9fa;
  border: 1px solid var(--border-light);
  color: var(--text-dark);
  padding: 0.7rem 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.auth-action-btn i {
  width: 20px;
  text-align: center;
  color: var(--gold-accent);
}

.auth-action-btn:hover {
  background: #fff;
  border-color: var(--gold-accent);
}

.auth-action-btn-danger {
  color: #dc3545;
}

.auth-action-btn-danger i {
  color: #dc3545;
}

.auth-action-btn-danger:hover {
  background: #fff5f5;
  border-color: #dc3545;
}

.auth-action-divider {
  height: 1px;
  background: var(--border-light);
  margin: 0.5rem 0;
}

.auth-edit-profile-btn {
  width: 100%;
  background: var(--gold-accent);
  border: none;
  color: #fff;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.auth-edit-profile-btn:hover {
  background: var(--gold-text);
}

.auth-form-divider {
  display: flex;
  align-items: center;
  margin: 1rem 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.auth-form-divider::before,
.auth-form-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-light);
}

.auth-form-divider span {
  padding: 0 0.75rem;
  font-weight: 500;
}

.auth-form-group-street {
  flex: 3;
}

.auth-form-group-house {
  flex: 1;
  min-width: 80px;
}

.auth-form-group-zip {
  flex: 1;
  min-width: 100px;
}

.auth-form-group-city {
  flex: 2;
}

.auth-form-buttons {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

.auth-form-buttons .auth-submit-btn {
  flex: 2;
  margin-top: 0;
}

.auth-cancel-btn {
  flex: 1;
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--text-muted);
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.auth-cancel-btn:hover {
  border-color: var(--text-dark);
  color: var(--text-dark);
}

@media (max-width: 576px) {
  .auth-form-group-street,
  .auth-form-group-house,
  .auth-form-group-zip,
  .auth-form-group-city {
    flex: 1 1 100%;
  }

  .auth-form-buttons {
    flex-direction: column-reverse;
  }

  .auth-form-buttons .auth-submit-btn,
  .auth-cancel-btn {
    flex: 1;
  }
}

/* Delete Account Warning */
.auth-delete-warning {
  background: #fff5f5;
  border: 1px solid #f5c6cb;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.auth-delete-warning i {
  color: #dc3545;
  font-size: 1.2rem;
  margin-top: 2px;
}

.auth-delete-warning p {
  margin: 0;
  color: #721c24;
  font-size: 0.85rem;
  line-height: 1.4;
}

.auth-delete-btn {
  flex: 2;
  background: #dc3545;
  border: none;
  color: #fff;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.auth-delete-btn:hover {
  background: #c82333;
}

/* ========== AVATAR MIT INITIALEN ========== */

.auth-avatar-initials {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--gold-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 1px;
  flex-shrink: 0;
}

/* ========== PASSWORT SICHTBARKEITS-TOGGLE ========== */

.password-input-wrapper {
  position: relative;
}

.password-input-wrapper input {
  padding-right: 2.75rem !important;
}

.password-toggle-btn {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: color 0.2s ease;
}

.password-toggle-btn:hover {
  color: var(--gold-accent);
}

/* ========== TOAST-BENACHRICHTIGUNGEN ========== */

.app-toast-container {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 360px;
}

.app-toast {
  background: #fff;
  border-left: 4px solid var(--gold-accent);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: var(--text-dark);
  animation: toastIn 0.3s ease forwards;
}

.app-toast.app-toast-leaving {
  animation: toastOut 0.3s ease forwards;
}

.app-toast i {
  font-size: 1.1rem;
  margin-top: 1px;
}

.app-toast.app-toast-success {
  border-left-color: #28a745;
}
.app-toast.app-toast-success i {
  color: #28a745;
}

.app-toast.app-toast-error {
  border-left-color: #dc3545;
}
.app-toast.app-toast-error i {
  color: #dc3545;
}

.app-toast.app-toast-info i {
  color: var(--gold-accent);
}

.app-toast-message {
  flex: 1;
  line-height: 1.4;
  white-space: pre-line;
}

.app-toast-close-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  font-size: 0.9rem;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(30px); }
}

@media (max-width: 576px) {
  .app-toast-container {
    left: 1rem;
    right: 1rem;
    top: 1rem;
    max-width: none;
  }
}

/* ========== TISCHRESERVIERUNG ========== */

/* ===== Ausverkaufte Gerichte =====
   Bleiben auf der Karte sichtbar, damit Gäste sehen, dass es das Gericht
   gibt - heute nur nicht. Zurückgenommen dargestellt, aber lesbar: der
   Preis bleibt erkennbar, weil er morgen wieder gilt. */
.card-menu-item.is-sold-out {
  border-color: var(--border-light);
  background: #fafafa;
}

.card-menu-item.is-sold-out .menu-item-image-container {
  /* Graustufen statt Ausblenden - das Gericht soll erkennbar bleiben. */
  filter: grayscale(1);
  opacity: 0.55;
  border-color: var(--border-light);
}

.card-menu-item.is-sold-out .card-title-text,
.card-menu-item.is-sold-out .card-description,
.card-menu-item.is-sold-out .price-list {
  opacity: 0.7;
}

.sold-out-badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 2px 8px;
  border-radius: 6px;
  background: #6c6c70;
  color: #fff;
  font-family: 'Raleway', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Ausverkaufter Belag im Anpassungsdialog: sichtbar, aber nicht wählbar. */
.option-item.is-sold-out {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--bg-light);
}

.option-item.is-sold-out:hover {
  /* Keine Hervorhebung beim Überfahren - der Eintrag ist nicht anklickbar. */
  border-color: var(--border-light);
  background: var(--bg-light);
}

.option-item.is-sold-out .option-name {
  text-decoration: line-through;
}

.option-item.is-sold-out .option-radio,
.option-item.is-sold-out .option-checkbox {
  opacity: 0.4;
}

.option-sold-out {
  margin-left: 0.5rem;
  padding: 1px 7px;
  border-radius: 5px;
  background: #6c6c70;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.sold-out-note {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.6rem;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  background: rgba(108, 108, 112, 0.1);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
}

/* ===== Vorbestellung im Warenkorb ===== */
.preorder-box {
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.75rem;
  background: rgba(184, 134, 11, 0.04);
}

.preorder-toggle {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  margin: 0;
  min-height: 32px;
}

.preorder-toggle input {
  width: 20px;
  height: 20px;
  accent-color: var(--gold-accent);
  flex-shrink: 0;
  cursor: pointer;
}

.preorder-toggle-text {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--gold-text);
}

.preorder-fields {
  margin-top: 0.7rem;
}

.preorder-fields.hidden {
  display: none;
}

.preorder-row {
  display: flex;
  gap: 0.6rem;
}

.preorder-group {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.preorder-group label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
}

.preorder-group input {
  min-height: 44px;
  padding: 0 0.6rem;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  font-family: 'Raleway', sans-serif;
  font-size: 0.95rem;
  color: var(--text-dark);
  background: #fff;
  width: 100%;
}

.preorder-group input:focus {
  outline: 2px solid var(--gold-accent);
  outline-offset: -2px;
}

.preorder-hint {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--text-muted);
}

/* ---------- Nachricht an die Küche ----------
   Steht im Warenkorb zwischen dem Vorbestell-Kasten und der Summe: sichtbar
   ohne Aufklappen, aber ohne sich vor die Summe zu drängen. Sie gilt für
   jede Bestellung, nicht nur für eine Vorbestellung. */
.order-note-box {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0.7rem 0 0;
}

.order-note-box label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
}

.order-note-box textarea {
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  font-family: 'Raleway', sans-serif;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--text-dark);
  background: #fff;
  width: 100%;
  resize: vertical;
  min-height: 60px;
}

.order-note-box textarea:focus {
  outline: 2px solid var(--gold-accent);
  outline-offset: -2px;
}

.order-note-count {
  align-self: flex-end;
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* Ein unzulässiger Termin muss sich klar vom normalen Hinweis abheben. */
.preorder-hint-error {
  color: #b02a37;
  font-weight: 600;
}

/* Hinweis in der Bestellliste des Kunden */
.preorder-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.5rem 0;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: 1.4;
}

.preorder-notice-wait {
  background: rgba(184, 134, 11, 0.1);
  color: var(--gold-text);
}

.preorder-notice-ok {
  background: rgba(25, 135, 84, 0.1);
  color: #146c43;
}

.preorder-notice-no {
  background: rgba(220, 53, 69, 0.1);
  color: #b02a37;
}

.preorder-answer {
  margin: 0.25rem 0 0.5rem;
  padding: 0.5rem 0.7rem;
  background: var(--bg-light);
  border-radius: 8px;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--text-dark);
  white-space: pre-line;
}

/* ===== Stückzahl =====
   Minus, Zahl, Plus. Die Pfeilchen, die Browser bei type="number" selbst
   einblenden, sind auf dem Smartphone zu klein zum Treffen und werden
   deshalb ausgeblendet. */
.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  flex-shrink: 0;
}

.qty-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--gold-text);
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.15s ease;
}

.qty-btn:hover {
  background: rgba(184, 134, 11, 0.1);
}

.qty-btn:active {
  background: rgba(184, 134, 11, 0.2);
}

.qty-input {
  width: 44px;
  height: 44px;
  border: none;
  border-left: 1px solid var(--border-light);
  border-right: 1px solid var(--border-light);
  text-align: center;
  font-family: 'Raleway', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  background: #fff;
  /* Die eigenen Pfeilchen des Browsers weg - zu klein für den Daumen. */
  -moz-appearance: textfield;
  appearance: textfield;
}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.qty-input:focus {
  outline: 2px solid var(--gold-accent);
  outline-offset: -2px;
}

/* Auf der Produktkarte etwas kompakter, damit Menge und Knopf in eine
   Zeile passen. */
.qty-stepper-card {
  margin-right: 0.5rem;
}

.qty-stepper-card .qty-btn,
.qty-stepper-card .qty-input {
  width: 38px;
  height: 38px;
}

@media (max-width: 576px) {
  /* Auf dem Smartphone wieder auf 44 px: dort wird getippt, nicht geklickt. */
  .qty-stepper-card .qty-btn,
  .qty-stepper-card .qty-input {
    width: 44px;
    height: 44px;
  }
}

/* Zeile "Stückzahl" im Anpassungsdialog */
.qty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-light);
}

.qty-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-dark);
}

.customize-unit-price {
  margin: 0.15rem 0 0.6rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  text-align: right;
}

.customize-unit-price.hidden {
  display: none;
}

/* ===== Anrufen: schwebender Knopf unten rechts =====
   Unten rechts, weil der Daumen dort liegt und der Knopf auf jeder
   Scrollposition erreichbar ist. Am Rechner mit Text, auf dem Smartphone als
   runder Knopf - dort ist der Platz knapp und das Hörersymbol eindeutig. */
.call-fab {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 1020; /* über dem Inhalt, aber UNTER Warenkorb (1050) und Dialogen (1200) */
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 56px;
  padding: 0 1.1rem;
  border-radius: 28px;
  background: var(--gold-accent);
  color: #fff;
  text-decoration: none;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  transition: background 0.2s ease, transform 0.15s ease;
}

.call-fab:hover,
.call-fab:focus-visible {
  background: #a5780a;
  color: #fff;
}

.call-fab:active {
  transform: scale(0.96);
}

.call-fab i {
  font-size: 1.25rem;
}

/* Ist der Warenkorb gefüllt, steht unten die feste Warenkorb-Leiste.
   Der Knopf weicht dann nach oben aus, statt sie zu verdecken. */
body.has-cart-bar .call-fab {
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 768px) {
  body.has-cart-bar .call-fab {
    /* Am Rechner gibt es keine Warenkorb-Leiste, also kein Ausweichen. */
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
}

/* Smartphone: runder Knopf ohne Text. */
@media (max-width: 576px) {
  .call-fab {
    width: 56px;
    padding: 0;
    justify-content: center;
    gap: 0;
  }

  .call-fab-label {
    /* Beschriftung optisch weg, für Screenreader über aria-label erhalten. */
    display: none;
  }
}

.reservation-icon-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  color: var(--gold-text);
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--gold-accent);
  border-radius: 8px;
  margin-right: 0.8rem;
  transition: background 0.2s ease, color 0.2s ease;
}

.reservation-icon-container:hover {
  background: var(--gold-accent);
  color: #fff;
}

/* Die Knöpfe sind <div role="button"> - ohne diese Regel ist beim
   Durchtabben nicht zu sehen, wo man gerade steht. */
.reservation-icon-container:focus-visible {
  outline: 2px solid var(--gold-accent);
  outline-offset: 2px;
}

.reservation-icon { font-size: 1rem; }

.reservation-icon-label {
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Auf schmalen Bildschirmen nur das Symbol - der Text würde die
   Navigationsleiste sonst umbrechen lassen.

   Die Grenze lag bei 576 px und musste hoch: Seit neben "Tisch reservieren"
   auch "Vorbestellen" steht, sind es zwei beschriftete Knöpfe plus Marke,
   Konto und Warenkorb. Auf einem 640 px breiten Fenster brach die Kopfleiste
   damit um. Ohne Beschriftung bleiben die Symbole - benannt sind sie über
   title und aria-label. */
@media (max-width: 767px) {
  .reservation-icon-label { display: none; }
  .reservation-icon-container { padding: 0.4rem 0.55rem; margin-right: 0.5rem; }
}

.reservation-success {
  text-align: center;
  padding: 1rem 0 0.5rem;
}

.reservation-success.hidden { display: none; }

.reservation-success i {
  font-size: 2.6rem;
  color: #28a745;
  margin-bottom: 0.8rem;
}

.reservation-success h4 {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  margin: 0 0 0.6rem;
  color: var(--text-dark);
}

.reservation-success p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 1.3rem;
}

.auth-field-hint {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
}

#reservationForm textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
}

/* ========== ZUSTIMMUNG BEI DER REGISTRIERUNG (AGB / Datenschutz) ========== */

.auth-consent {
  margin: 1rem 0 0.25rem;
}

.auth-consent-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.83rem;
  line-height: 1.45;
  color: var(--text-dark);
  cursor: pointer;
}

.auth-consent-row input[type="checkbox"] {
  margin-top: 0.2rem;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--gold-accent);
  cursor: pointer;
}

/* Kurzer Hinweis unter einem Eingabefeld - erklaert, WOZU die Angabe
   gebraucht wird. Bei einem Pflichtfeld ist das mehr als Zierrat: Wer nicht
   weiss, warum seine Telefonnummer verlangt wird, bricht die Anmeldung ab
   oder traegt etwas Erfundenes ein. */
.auth-field-note {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 0.35rem 0 0;
}

.auth-consent-note {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 0.55rem 0 0;
  padding-left: 2.2rem;
}

.auth-consent a {
  color: var(--gold-text);
}

/* ========== TEXT-LINK IM ANMELDEBEREICH (Passwort vergessen) ========== */

.auth-link-btn {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: var(--gold-text);
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0.75rem 0 0;
  text-align: center;
}

.auth-link-btn:hover {
  color: var(--gold-accent);
}

.auth-form-hint {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin: 0 0 1rem;
}

/* ========== HINWEIS: E-MAIL NOCH NICHT BESTÄTIGT ========== */

.verify-notice {
  background: #fff8e6;
  border: 1px solid #e0a800;
  border-radius: 8px;
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
}

.verify-notice.hidden {
  display: none;
}

.verify-notice-text {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.87rem;
  line-height: 1.4;
  color: #6b4d00;
}

.verify-notice-text i {
  font-size: 1.05rem;
  color: #e0a800;
  flex-shrink: 0;
  margin-top: 1px;
}

.verify-notice-btn {
  margin-top: 0.7rem;
  width: 100%;
  background: #e0a800;
  border: none;
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.55rem 1rem;
  border-radius: 6px;
  cursor: pointer;
}

.verify-notice-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ========== HINWEIS: PIZZERIA GESCHLOSSEN (im Warenkorb) ========== */

.store-closed-notice {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: #fdecea;
  border: 1px solid #dc3545;
  color: #842029;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.85rem;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.35;
}

.store-closed-notice i {
  font-size: 1.1rem;
  color: #dc3545;
  flex-shrink: 0;
}

.store-closed-notice.hidden {
  display: none;
}

/* ========== BESTÄTIGUNGS-DIALOG (ersetzt confirm()) ========== */

.confirm-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1300;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.confirm-overlay.open {
  opacity: 1;
  visibility: visible;
}

.confirm-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  width: 380px;
  max-width: 90vw;
  background: #fff;
  border-radius: 16px;
  z-index: 1310;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  padding: 1.75rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.confirm-modal.open {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  visibility: visible;
}

.confirm-modal-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.confirm-modal-header i {
  font-size: 1.5rem;
  color: var(--gold-accent);
}

.confirm-modal-header.danger i {
  color: #dc3545;
}

.confirm-modal-header h3 {
  margin: 0;
  font-size: 1.15rem;
  color: var(--text-dark);
  font-family: 'Playfair Display', serif;
}

.confirm-modal-message {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
  /* Der Text wird per textContent gesetzt; damit die Artikelliste in der
     Bestellbestätigung mehrzeilig erscheint, müssen Zeilenumbrüche im Text
     auch als solche dargestellt werden. */
  white-space: pre-line;
  text-align: left;
  max-height: 45vh;
  overflow-y: auto;
}

.confirm-modal-buttons {
  display: flex;
  gap: 0.75rem;
}

.confirm-modal-buttons .auth-cancel-btn {
  flex: 1;
}

.confirm-modal-ok-btn {
  flex: 1;
  background: var(--gold-accent);
  border: none;
  color: #fff;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.confirm-modal-ok-btn:hover {
  background: var(--gold-text);
}

.confirm-modal-ok-btn.danger {
  background: #dc3545;
}

.confirm-modal-ok-btn.danger:hover {
  background: #c82333;
}

/* ========== BESTELLHISTORIE ========== */

.orders-view {
  padding: 1.5rem;
  overflow-y: auto;
}

.orders-view.hidden {
  display: none;
}

.orders-list {
  max-height: 55vh;
  overflow-y: auto;
  margin-bottom: 1rem;
}

.orders-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 3rem 1rem;
}

.orders-empty i {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.order-card {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 0.75rem;
}

.order-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
  gap: 0.5rem;
}

/* ---------- Hinweis auf eine Schließzeit ----------
   Auffällig genug, dass man ihn beim Öffnen der Seite sieht, aber ohne die
   Farbe einer Fehlermeldung - geschlossen zu sein ist kein Fehler. */
.closure-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0.75rem 1rem 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid #e0c68a;
  border-left: 4px solid var(--gold-accent, #b0820f);
  border-radius: 10px;
  background: #fdf7e8;
  color: #4a3a12;
  font-size: 0.95rem;
  line-height: 1.45;
}

.closure-notice > i {
  margin-top: 0.15rem;
  color: var(--gold-accent, #b0820f);
}

.closure-notice-text { display: flex; flex-direction: column; gap: 0.15rem; }
.closure-notice-text strong { font-size: 1rem; }

/* Ohne diese Regel stand der Kasten LEER ueber der Speisekarte, dauerhaft.
   Das JavaScript setzt zwar .hidden, wenn kein Schliesstag ansteht - aber
   .hidden allein bewirkt hier nichts: Bootstrap 5 kennt die Klasse nicht mehr
   (die gab es in Bootstrap 3), und styles.css definiert sie nur je Bauteil.
   Ein display:flex ohne Gegenstueck gewinnt dann immer. */
.closure-notice.hidden { display: none; }

/* ---------- Speisekarte nicht abrufbar ----------
   Steht ganz oben, in Rot, und nicht wegklickbar. Der Anlass ist selten,
   aber ernst: Die Seite zeigt dann eine feste Notfassung der Karte, deren
   Preise so alt sind wie die Datei. Ohne diesen Balken sah das für den Gast
   aus wie eine normale Speisekarte. */
.data-error-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0.75rem 1rem 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid #e3b7b7;
  border-left: 4px solid #a3312f;
  border-radius: 10px;
  background: #fdf2f2;
  color: #6b1f1e;
  font-size: 0.95rem;
  line-height: 1.45;
}

.data-error-notice > i {
  margin-top: 0.15rem;
  color: #a3312f;
}

.data-error-notice-text { display: flex; flex-direction: column; gap: 0.15rem; }
.data-error-notice-text strong { font-size: 1rem; }

/* Wie beim Schließzeit-Hinweis: .hidden allein bewirkt hier nichts, weil ein
   display:flex ohne Gegenstück immer gewinnt. */
.data-error-notice.hidden { display: none; }

/* ---------- Laufende Vorbestellung ----------
   Übernimmt die Form des Schließzeit-Hinweises darüber: derselbe Rahmen,
   dieselbe Position. Nur die Farbe ist eine andere, damit "Sie bestellen für
   Freitag" nicht wie "wir haben zu" aussieht. */
.preorder-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 0.75rem 1rem 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid #b7d8bd;
  border-left: 4px solid #2f7d3a;
  border-radius: 10px;
  background: #f1faf2;
  color: #1f4a26;
  font-size: 0.95rem;
  line-height: 1.45;
}

.preorder-banner > i {
  margin-top: 0.15rem;
  color: #2f7d3a;
}

.preorder-banner-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  /* Nimmt den Platz, drängt die Knöpfe aber bei Bedarf in die nächste
     Zeile statt sie zu quetschen. */
  flex: 1 1 14rem;
}

.preorder-banner-text strong { font-size: 1rem; }

.preorder-banner-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.preorder-banner-btn {
  /* 44 px Mindesthöhe: Die Knöpfe sitzen auf dem Telefon direkt über der
     Speisekarte und werden im Vorbeiscrollen getroffen. */
  min-height: 44px;
  padding: 0.45rem 0.9rem;
  border: 1px solid #2f7d3a;
  border-radius: 8px;
  background: #2f7d3a;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.preorder-banner-btn:hover { background: #24632d; }

.preorder-banner-btn-quiet {
  background: transparent;
  color: #1f4a26;
}

.preorder-banner-btn-quiet:hover { background: #dcefdf; }

.preorder-banner-btn:focus-visible {
  outline: 2px solid #1f4a26;
  outline-offset: 2px;
}

/* Termin nicht mehr brauchbar (neuer Schließtag, Uhrzeit verstrichen): Der
   Balken bleibt STEHEN und wird rot. Ausblenden wäre das Schlimmste - der
   Kunde kaufte weiter ein und erfuhr es erst an der Kasse. */
.preorder-banner-warn {
  border-color: #e3b7b7;
  border-left-color: #a3312f;
  background: #fdf2f2;
  color: #6b1f1e;
}

.preorder-banner-warn > i { color: #a3312f; }

.preorder-banner-warn .preorder-banner-btn {
  border-color: #a3312f;
  background: #a3312f;
}

.preorder-banner-warn .preorder-banner-btn:hover { background: #852725; }

.preorder-banner-warn .preorder-banner-btn-quiet {
  background: transparent;
  color: #6b1f1e;
}

.preorder-banner-warn .preorder-banner-btn-quiet:hover { background: #f7dcdc; }

/* Wie beim Schließzeit-Hinweis: .hidden allein bewirkt hier nichts, weil ein
   display:flex ohne Gegenstück immer gewinnt. */
.preorder-banner.hidden { display: none; }

.order-code {
  font-weight: 700;
  color: var(--text-dark);
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}

/* Der lange Code bleibt sichtbar, weil er in Statuslinks und bei Rueckfragen
   gebraucht wird - aber klein: Genannt wird die kurze Nummer darueber. */
.order-beleg {
  color: var(--text-muted);
  font-size: 0.7rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.order-date {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.order-status-badge {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  background: #e0e0e0;
  color: var(--text-muted);
}

.order-status-badge.status-new,
.order-status-badge.status-accepted {
  background: #fff3cd;
  color: #856404;
}

.order-status-badge.status-printed,
.order-status-badge.status-done {
  background: #d4edda;
  color: #155724;
}

.order-status-badge.status-canceled,
.order-status-badge.status-print_failed,
.order-status-badge.status-declined {
  background: #f8d7da;
  color: #721c24;
}

/* Reservierungen: bestätigt = grün, wie eine abgeschlossene Bestellung */
.order-status-badge.status-confirmed {
  background: #d4edda;
  color: #155724;
}

/* Zeile in der Reservierungs-Übersicht (Personen, Name, Anmerkung) */
.reservation-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.85rem;
  padding: 0.15rem 0;
}

.reservation-row span:first-child {
  color: var(--text-muted);
  flex-shrink: 0;
}

.reservation-row span:last-child {
  color: var(--text-dark);
  text-align: right;
}

/* Antwort der Pizzeria - für den Kunden die wichtigste Information,
   deshalb abgesetzt hervorgehoben. */
.reservation-answer {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  background: #eef4ff;
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  margin-top: 0.6rem;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #1c3d6b;
}

.reservation-answer i {
  color: #3b6fb5;
  margin-top: 2px;
  flex-shrink: 0;
}

.order-pickup-notice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #d4edda;
  color: #155724;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
}

.order-pickup-notice i {
  color: #155724;
}

.order-items {
  border-top: 1px solid var(--border-light);
  padding-top: 0.5rem;
  margin-top: 0.5rem;
}

.order-item-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 0.15rem 0;
}

.order-item-row .order-item-name {
  color: var(--text-dark);
}

.order-total-row {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--border-light);
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  font-weight: 600;
  color: var(--text-dark);
}

.order-total-row .order-total-price {
  color: var(--gold-text);
  font-family: 'Playfair Display', serif;
}

/* =====================================================
   FOOTER STYLES
===================================================== */

.footer {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  color: #e0e0e0;
  padding: 60px 20px 30px;
  margin-top: 60px;
  border-top: 3px solid var(--gold-accent);
  font-family: 'Raleway', sans-serif;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
  margin-bottom: 40px;
}

.footer-section h5 {
  font-family: 'Playfair Display', serif;
  color: var(--gold-accent);
  font-size: 1.3rem;
  margin-bottom: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.footer-section p {
  line-height: 1.8;
  color: #b0b0b0;
  margin-bottom: 10px;
  font-size: 0.95rem;
}

.footer-description {
  color: #999;
  font-style: italic;
  line-height: 1.7;
}

.footer-link {
  color: var(--gold-accent);
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-block;
  margin-bottom: 8px;
}

.footer-link:hover {
  color: #d4af37;
  transform: translateX(3px);
}

.footer-link i {
  margin-right: 8px;
  width: 20px;
}

.footer-note {
  font-size: 0.85rem;
  color: #888;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom {
  text-align: center;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  max-width: 1200px;
  margin: 0 auto;
}

.footer-bottom p {
  margin: 8px 0;
  color: #888;
  font-size: 0.9rem;
}

.footer-link-small {
  color: var(--gold-accent);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-link-small:hover {
  color: #d4af37;
  text-decoration: underline;
}

/* Responsive Footer */
@media (max-width: 768px) {
  .footer {
    padding: 40px 15px 25px;
    margin-top: 40px;
  }

  .footer-content {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .footer-section h5 {
    font-size: 1.15rem;
    margin-bottom: 12px;
  }

  .footer-section p {
    font-size: 0.9rem;
    line-height: 1.6;
  }
}

@media (max-width: 480px) {
  .footer {
    padding: 30px 10px 20px;
    border-top-width: 2px;
  }

  .footer-section h5 {
    font-size: 1.05rem;
  }

  .footer-bottom p {
    font-size: 0.85rem;
  }
}

/* ==========================================================================
   SMARTPHONE-DARSTELLUNG
   Dieser Abschnitt steht absichtlich am Dateiende: die Regeln überschreiben
   ältere Mobilregeln weiter oben und müssen daher nach ihnen kommen.
   ========================================================================== */

/* ----- Feste Warenkorb-Leiste am unteren Rand ----- */
.mobile-cart-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030; /* unter Warenkorb-Sidebar (1050) und deren Overlay (1040) */
  padding: 0.55rem 0.75rem calc(0.55rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--border-light);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
}

.mobile-cart-bar.hidden {
  display: none;
}

/* Auf großen Bildschirmen genügt das Warenkorbsymbol oben. */
@media (min-width: 768px) {
  .mobile-cart-bar {
    display: none !important;
  }
}

.mobile-cart-bar-btn {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 0.9rem;
  background: var(--gold-accent);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  cursor: pointer;
}

.mobile-cart-bar-btn:active {
  background: #a5780a;
}

.mobile-cart-bar-count {
  flex-shrink: 0;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}

.mobile-cart-bar-label {
  flex: 1;
  text-align: left;
  font-size: 0.95rem;
  letter-spacing: 0.3px;
}

.mobile-cart-bar-total {
  flex-shrink: 0;
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
}

/* Platz schaffen, damit die Leiste den Footer nicht verdeckt. */
body.has-cart-bar {
  padding-bottom: 80px;
}

@media (min-width: 768px) {
  body.has-cart-bar {
    padding-bottom: 0;
  }
}

/* ----- Kopfleiste und Aktionssymbole ----- */
@media (max-width: 576px) {
  .site-header-bar {
    padding: 0.35rem 0;
    gap: 0.5rem;
  }

  .header-actions {
    gap: 2px;
  }

  /* Alle drei Symbole auf die empfohlene Mindestgröße von 44 px.
     Vorher waren es rund 34 px Höhe bei uneinheitlichen Abständen.
     Anrufen sitzt bewusst nicht hier, sondern als schwebender Knopf unten
     rechts - siehe .call-fab weiter oben. */
  .reservation-icon-container,
  .auth-icon-container,
  .cart-icon-container {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
  }

  .cart-icon-container {
    border-left: none;
  }

  .reservation-icon-container {
    border: 1px solid var(--gold-accent);
    border-radius: 10px;
    margin-right: 4px;
  }

  .reservation-icon {
    font-size: 1.15rem;
  }

  .auth-icon {
    font-size: 1.25rem;
  }

  .cart-icon {
    font-size: 1.3rem;
  }

  .cart-badge {
    top: 2px;
    right: 0;
  }
}

/* ----- Produktkarten: waagerecht statt untereinander -----
   Vorher wurden die Karten auf dem Smartphone umgebrochen (Bild oben,
   Text darunter) und das Bild sogar auf 130 px VERGRÖSSERT. Jede Karte
   war dadurch rund 330 px hoch, sodass ein bis zwei Gerichte pro
   Bildschirm sichtbar waren. Mit Bild links und 76 px Bildgröße kommt
   man auf etwa 130 px pro Karte - also fünf bis sechs Gerichte. */
@media (max-width: 576px) {
  .card-menu-item {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    padding: 0.8rem;
    gap: 0.8rem;
    min-height: 0;
    border-radius: 12px;
  }

  .menu-item-image-container {
    width: 76px;
    height: 76px;
    padding: 3px;
    border-width: 1px;
  }

  .card-header-row {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
  }

  .card-title-text {
    font-size: 1rem;
    text-align: left;
    white-space: normal;
    line-height: 1.25;
  }

  .card-description {
    font-size: 0.78rem;
    line-height: 1.4;
  }

  .price-list {
    gap: 2px;
  }

  .price-variant {
    justify-content: space-between;
    gap: 8px;
    font-size: 0.85rem;
  }

  /* Hauptaktion der Karte ebenfalls auf 44 px Berührungshöhe. */
  .btn-add-cart {
    min-height: 44px;
    font-size: 0.78rem;
    padding: 0.4rem 0.9rem;
    border-radius: 10px;
  }

  .variant-select {
    min-height: 44px;
  }

  /* Kategorie-Kopfbild: reine Dekoration, daher flacher. */
  .section-header-image {
    height: 120px;
    border-radius: 12px;
    margin-bottom: 1rem;
  }

  .menu-section {
    padding: 1.25rem 0;
  }
}

/* Abstand, den scrollToCategory freihalten muss - entspricht der Höhe der
   angehefteten Kopfleiste (zwei Zeilen). */
.menu-section {
  scroll-margin-top: 130px;
}

@media (max-width: 576px) {
  .menu-section {
    scroll-margin-top: 118px;
  }
}


/* ===== Allergene und Zusatzstoffe =========================================
   Kennzeichnungspflicht nach LMIV. Die Kürzel stehen hochgestellt hinter dem
   Namen des Gerichts, die Auflösung in der Legende unter der Speisekarte.

   Bewusst zurückhaltend: Die Angabe muss da sein und lesbar bleiben, soll
   aber nicht mit dem Namen des Gerichts um Aufmerksamkeit ringen. */

.allergen-codes {
  margin-left: 3px;
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: 0.5px;
  opacity: 0.75;
  cursor: help;
  white-space: nowrap;
}

.allergen-legend {
  max-width: 900px;
  margin: 8px auto 40px;
  padding: 20px 22px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.allergen-legend[hidden] { display: none; }

.allergen-legend-title {
  margin: 0 0 6px;
  font-size: 1.05rem;
  letter-spacing: 0.3px;
}

.allergen-legend-hint {
  margin: 0 0 10px;
  font-size: 0.86rem;
  opacity: 0.75;
}

.allergen-legend-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 4px 18px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  font-size: 0.88rem;
}

.allergen-legend-list li { display: flex; gap: 8px; align-items: baseline; }

.allergen-code {
  flex: 0 0 auto;
  min-width: 26px;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  font-weight: 700;
  font-size: 0.82rem;
  text-align: center;
}

@media (max-width: 576px) {
  .allergen-legend { margin: 4px 10px 30px; padding: 16px; }
  .allergen-legend-list { grid-template-columns: 1fr; }
}