/* Allgemein */



body {
  font-family: "Yanone Kaffeesatz", sans-serif;
  font-size: 1.6rem;

}

.sandrosfarbe {
  color: rgb(242, 183, 124);

}

.sandrosfarbe2 {
  color: rgb(120, 31, 46);

}


#products,
#partyservice,
#standorte,
#about,
#photos,
#fb,
#inst {
  padding-top: 100px;
}

.navbar,
.carousel {
  border-bottom: 1px solid #888;
}

/* Navigation */

.nav-link {
  cursor: pointer;
}

.nav-link:active,
.nav-link:hover {
  color: rgb(123, 47, 39) !important;
}

.icon-link:active svg,
.icon-link:hover svg {
  color: limegreen;
}


/* Slider */

.slider-image {
  width: 100vw;
  height: 70vh;
  background-size: cover;
  background-position: center;
}

/* Produkt Cards */

.card-image {
  height: 500px;
  background-size: cover;
  background-position: center;
}

@media (max-width: 991px) {
  .card-group {
    display: flex;
    flex-flow: column wrap;
  }
}

/* Über uns */

.about-image {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background-position: center;
  background-size: cover;
}

/* Footer */

.footer {
  font-family: sans-serif;
  font-size: 1rem;
  text-align: center;
  border-top: 1px solid #888;
}


/* ══════════════════════════════════════════
   ANIMATIONS & MODERN EFFECTS
══════════════════════════════════════════ */

html {
  scroll-behavior: smooth;
}

/* ── Hero Ken Burns Zoom ── */

.carousel-inner {
  overflow: hidden;
}

@keyframes kenBurns {
  0%   { transform: scale(1);    }
  100% { transform: scale(1.08); }
}

.slider-image {
  animation: kenBurns 8s ease-in-out infinite alternate;
}

/* Hero bottom gradient overlay */
#carouselExampleFade::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 45%, rgba(15, 8, 0, 0.65) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ── Section Headings Glow Pulse ── */

@keyframes glowPulse {
  0%,  100% { text-shadow: 0 0 6px  rgba(242, 183, 124, 0.15); }
  50%        { text-shadow: 0 0 28px rgba(242, 183, 124, 0.70),
                             0 0 55px rgba(242, 183, 124, 0.20); }
}

h1.sandrosfarbe,
h2.sandrosfarbe {
  animation: glowPulse 3.2s ease-in-out infinite;
}

/* ── Navbar ── */

.navbar-brand {
  transition: transform 0.3s ease !important;
}

.navbar-brand:hover {
  transform: scale(1.07);
}

.nav-link {
  position: relative;
  transition: color 0.3s ease !important;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 0%;
  height: 2px;
  background-color: rgb(242, 183, 124);
  transition: width 0.35s ease;
}

.nav-link:hover::after {
  width: 100%;
}

/* ── Social Icon Pop ── */

.icon-link {
  transition: transform 0.25s ease, opacity 0.25s ease !important;
  display: inline-flex !important;
}

.icon-link:hover {
  transform: scale(1.4) rotate(8deg) !important;
  opacity: 1 !important;
  color: rgb(242, 183, 124) !important;
}

/* ── Cards hover lift + glow ── */

.card {
  transition: transform 0.35s ease, box-shadow 0.35s ease !important;
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 22px 44px rgba(242, 183, 124, 0.18);
}

/* ── About image hover ── */

.about-image {
  transition: transform 0.4s ease, box-shadow 0.4s ease !important;
}

.about-image:hover {
  transform: scale(1.06);
  box-shadow: 0 0 35px rgba(242, 183, 124, 0.35);
}

/* ── Wichtige Mitteilung box glow ── */

@keyframes boxGlow {
  0%,  100% { box-shadow: 0 0  0px rgba(242, 183, 124, 0.00); }
  50%        { box-shadow: 0 0 22px rgba(242, 183, 124, 0.35); }
}

#wichtig .bg-gray-400 {
  animation: boxGlow 2.8s ease-in-out infinite;
}

/* ── Zofingen Bild Glow Pulse ── */

@keyframes zofingenImgGlow {
  0%,  100% { box-shadow: 0 0  4px rgba(255, 120, 20, 0.15),
                           0 0  8px rgba(255, 120, 20, 0.08); }
  50%        { box-shadow: 0 0 22px rgba(255, 120, 20, 0.85),
                           0 0 50px rgba(255, 120, 20, 0.45),
                           0 0 80px rgba(255, 120, 20, 0.20); }
}

.zofingen-img-glow {
  animation: zofingenImgGlow 2.4s ease-in-out infinite;
}

/* ── Floating ember particles ── */

.ember {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffcc44, #ff4400);
  pointer-events: none;
  z-index: 2;
}

/* ── Photo Gallery ── */

.photo-gallery {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #0f0f0f;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(242, 183, 124, 0.12);
  user-select: none;
}

.photo-gallery__frame {
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 68vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111;
}

@media (max-width: 576px) {
  .photo-gallery__frame {
    aspect-ratio: 3 / 4;
    max-height: 80vw;
  }
}

.photo-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 1;
  transition: opacity 0.35s ease;
}

.photo-gallery__img.fading {
  opacity: 0;
}

.photo-gallery__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: rgba(15, 15, 15, 0.55);
  color: #fff;
  font-size: 2.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  transition: background 0.22s, transform 0.22s;
  z-index: 10;
}

.photo-gallery__btn:hover {
  background: rgba(242, 183, 124, 0.85);
  color: #111;
  transform: translateY(-50%) scale(1.12);
}

.photo-gallery__btn--prev { left: 14px; }
.photo-gallery__btn--next { right: 14px; }

.photo-gallery__counter {
  position: absolute;
  bottom: 14px;
  right: 14px;
  padding: 4px 14px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-family: sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  backdrop-filter: blur(6px);
  z-index: 10;
}

.photo-gallery__bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.12);
  z-index: 10;
}

.photo-gallery__bar-fill {
  height: 100%;
  width: 0%;
  background: rgb(242, 183, 124);
}

/* Loading shimmer */
@keyframes pgShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

.photo-gallery__frame.loading {
  background: linear-gradient(90deg, #1a1a1a 25%, #252525 50%, #1a1a1a 75%);
  background-size: 200% 100%;
  animation: pgShimmer 1.4s infinite;
}

/* ── Loader overlay ── */

.photo-gallery__loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(5px);
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.photo-gallery__frame.loading .photo-gallery__loader {
  opacity: 1;
}

.photo-gallery__loader-dots {
  display: flex;
  gap: 9px;
}

.photo-gallery__loader-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgb(242, 183, 124);
  animation: pgBounce 0.9s ease-in-out infinite;
}

.photo-gallery__loader-dot:nth-child(2) { animation-delay: 0.16s; }
.photo-gallery__loader-dot:nth-child(3) { animation-delay: 0.32s; }

@keyframes pgBounce {
  0%, 80%, 100% { transform: scale(0.55); opacity: 0.35; }
  40%            { transform: scale(1.25); opacity: 1; }
}

.photo-gallery__loader-text {
  color: rgb(242, 183, 124);
  font-family: sans-serif;
  font-size: 0.88rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ══════════════════════════════════════════
   3D KACHELN – Sortiment & Party Service
══════════════════════════════════════════ */

#products .card,
#partyservice .card {
  border-radius: 18px !important;
  overflow: hidden;
  margin: 6px;
  /* Mehrschichtiger Schatten = räumliche Tiefenwirkung */
  box-shadow:
    0 2px 4px   rgba(0, 0, 0, 0.10),
    0 5px 12px  rgba(0, 0, 0, 0.09),
    0 14px 32px rgba(0, 0, 0, 0.08),
    0 28px 56px rgba(0, 0, 0, 0.05) !important;
  transition:
    box-shadow 0.5s ease !important;
  will-change: transform, box-shadow;
  cursor: pointer;
  position: relative;
}

/* Hover: intensivierter goldener Schatten (Transform via GSAP) */
#products .card:hover,
#partyservice .card:hover {
  box-shadow:
    0 4px 8px    rgba(0, 0, 0, 0.10),
    0 12px 24px  rgba(0, 0, 0, 0.11),
    0 28px 60px  rgba(0, 0, 0, 0.12),
    0 55px 110px rgba(242, 183, 124, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}

/* Bild-Zoom beim Hover */
#products .card-image,
#partyservice .card-image {
  transition: transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

#products .card:hover .card-image,
#partyservice .card:hover .card-image {
  transform: scale(1.08) !important;
}

/* Card Body: subtiler Verlauf beim Hover */
#products .card-body,
#partyservice .card-body {
  background: #fff;
  transition: background 0.4s ease;
}

#products .card:hover .card-body,
#partyservice .card:hover .card-body {
  background: linear-gradient(175deg, #fff 60%, rgba(242, 183, 124, 0.09) 100%);
}

/* Titel-Farbwechsel */
#products .card-title,
#partyservice .card-title {
  transition: color 0.35s ease;
}

#products .card:hover .card-title,
#partyservice .card:hover .card-title {
  color: rgb(195, 112, 25) !important;
}

/* Glanz-Streifen (Shimmer) beim Hover */
#products .card::after,
#partyservice .card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    115deg,
    transparent 28%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 72%
  );
  transform: translateX(-130%) skewX(-10deg);
  transition: transform 0.60s ease;
  pointer-events: none;
  z-index: 5;
  border-radius: inherit;
}
#products .card:hover::after,
#partyservice .card:hover::after {
  transform: translateX(140%) skewX(-10deg);
}

/* ══════════════════════════════════════════
   MODERNE PREISLISTE
══════════════════════════════════════════ */

/* ── Accordion Button ── */

#accordionExample .accordion-item {
  border: none;
  background: transparent;
}

#accordionExample .price-btn {
  background: linear-gradient(135deg, #1e1208 0%, #3a2410 60%, #1e1208 100%);
  color: rgb(242, 183, 124);
  border-radius: 14px !important;
  border: 1px solid rgba(242, 183, 124, 0.22);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  padding: 14px 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
}

#accordionExample .price-btn:not(.collapsed) {
  background: linear-gradient(135deg, #1e1208 0%, #3a2410 60%, #1e1208 100%);
  color: rgb(242, 183, 124);
  border-color: rgba(242, 183, 124, 0.45);
  box-shadow:
    0 6px 22px rgba(242, 183, 124, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  border-radius: 14px 14px 0 0 !important;
}

#accordionExample .price-btn:hover {
  border-color: rgba(242, 183, 124, 0.50);
  box-shadow:
    0 8px 28px rgba(242, 183, 124, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

#accordionExample .price-btn::after {
  filter: brightness(0) saturate(100%) invert(75%) sepia(42%) saturate(500%) hue-rotate(345deg) brightness(105%);
  margin-left: auto;
  flex-shrink: 0;
}

.price-btn-label {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
}

.price-btn-sub {
  font-size: 0.78rem;
  opacity: 0.60;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-family: sans-serif;
  font-weight: 400;
}

/* ── Accordion Body ── */

#accordionExample .accordion-collapse {
  border: 1px solid rgba(242, 183, 124, 0.20);
  border-top: none;
  border-radius: 0 0 14px 14px;
  overflow: hidden;
  background: #fff !important;
}

/* ── Preistabelle ── */

.price-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

.price-table .price-cat th {
  background: linear-gradient(90deg, #2c1a06 0%, #4a2e0e 50%, #2c1a06 100%);
  color: rgb(255, 210, 140);
  padding: 10px 20px;
  font-size: 1.0rem;
  font-family: "Yanone Kaffeesatz", sans-serif;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border-top: 1px solid rgba(242, 183, 124, 0.20);
  border-bottom: 1px solid rgba(242, 183, 124, 0.20);
}

.price-table .price-cat--highlight th {
  background: linear-gradient(90deg, #3a1e04 0%, #6a3810 50%, #3a1e04 100%);
  color: rgb(255, 220, 150);
}

.price-table tbody tr:not(.price-cat) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  transition: background 0.18s ease;
  background: #fff;
}

.price-table tbody tr:not(.price-cat):last-child {
  border-bottom: none;
}

.price-table tbody tr:not(.price-cat):hover {
  background: rgba(242, 183, 124, 0.10);
}

.price-table tbody tr:not(.price-cat) td {
  padding: 10px 20px;
  vertical-align: middle;
  color: #1a1a1a;
  font-size: 1.15rem;
}

.price-table tbody tr:not(.price-cat) td:last-child,
.price-table .price-val {
  text-align: right !important;
  font-weight: 700;
  color: rgb(180, 90, 0);
  white-space: nowrap !important;
  font-size: 1.2rem;
  width: 1%;
  min-width: 90px;
}

.price-table .price-portion {
  color: #666;
  font-size: 0.88rem;
  font-family: sans-serif;
  white-space: nowrap;
}

.price-table .price-menu-row td {
  font-weight: 700;
  color: #111;
  background: rgba(242, 183, 124, 0.05);
}

.price-table .price-menu-row td.price-val {
  color: rgb(180, 90, 0);
}

@media (max-width: 576px) {
  /* Tabelle und Body als Block, damit Zeilen Flex sein können */
  .price-table,
  .price-table tbody {
    display: block;
    width: 100%;
  }

  /* Kategorien-Kopfzeilen */
  .price-table .price-cat,
  .price-table .price-cat th {
    display: block;
  }

  /* Datenzeilen: Flexbox statt Tabellen-Layout */
  .price-table tbody tr:not(.price-cat) {
    display: flex;
    align-items: center;
    width: 100%;
  }

  /* Produktname: füllt verfügbaren Platz */
  .price-table tbody tr:not(.price-cat) td:first-child {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Mittelspalte und leere Zellen ausblenden */
  .price-table .price-portion,
  .price-table tbody tr:not(.price-cat) td:not(.price-val):not(:first-child):not(.pe-delete-cell) {
    display: none;
  }

  /* Preis: immer rechts, feste Breite */
  .price-table .price-val {
    flex: 0 0 auto;
    align-self: center;
  }

  .price-table tbody tr:not(.price-cat) td {
    padding: 9px 14px;
  }
}

/* ══════════════════════════════════════════
   PREISLISTEN-EDITOR
══════════════════════════════════════════ */

/* ── Bearbeitungs-Leiste ── */

.pe-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 20px;
  background: linear-gradient(90deg, #1e1208, #3a2410, #1e1208);
  border-bottom: 2px solid rgba(242, 183, 124, 0.35);
}

.pe-bar-label {
  color: rgb(242, 183, 124);
  font-size: 0.95rem;
  font-family: sans-serif;
}

.pe-bar-actions {
  display: flex;
  gap: 8px;
}

/* ── Schloss-Button ── */

.pe-lock-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px 4px;
}

.pe-print-btn {
  background: transparent;
  border: 1px solid rgba(242, 183, 124, 0.35);
  border-radius: 8px;
  color: rgb(180, 90, 0);
  font-size: 0.9rem;
  font-family: "Yanone Kaffeesatz", sans-serif;
  letter-spacing: 0.05em;
  padding: 5px 14px;
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}

.pe-print-btn:hover {
  color: rgb(220, 130, 0);
  border-color: rgba(242, 183, 124, 0.65);
  background: rgba(242, 183, 124, 0.10);
}

.pe-lock-btn {
  background: transparent;
  border: 1px solid rgba(150, 150, 150, 0.20);
  border-radius: 8px;
  color: rgba(150, 150, 150, 0.40);
  font-size: 0.85rem;
  padding: 5px 10px;
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}

.pe-lock-btn:hover {
  color: rgb(242, 183, 124);
  border-color: rgba(242, 183, 124, 0.45);
  background: rgba(242, 183, 124, 0.07);
}

/* ── Gemeinsame Button-Stile ── */

.pe-btn {
  border: none;
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 1.0rem;
  font-family: "Yanone Kaffeesatz", sans-serif;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.pe-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.pe-btn--save {
  background: linear-gradient(135deg, rgb(180, 100, 20), rgb(220, 150, 40));
  color: #fff;
  font-weight: 700;
}

.pe-btn--cancel {
  background: rgba(255,255,255,0.12);
  color: rgb(242, 183, 124);
  border: 1px solid rgba(242, 183, 124, 0.30);
}

/* ── Editiermodus: Zellen hervorheben ── */

.price-edit-mode tbody tr:not(.price-cat) td[contenteditable] {
  outline: 2px dashed rgba(242, 183, 124, 0.55);
  outline-offset: -2px;
  border-radius: 4px;
  background: rgba(242, 183, 124, 0.06);
  cursor: text;
  transition: outline-color 0.2s, background 0.2s;
}

.price-edit-mode tbody tr:not(.price-cat) td[contenteditable]:focus {
  outline: 2px solid rgb(242, 183, 124);
  background: rgba(242, 183, 124, 0.13);
}

/* ── Passwort-Modal ── */

.pe-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.70);
  backdrop-filter: blur(6px);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

.pe-modal.is-open {
  display: flex;
}

.pe-modal-box {
  background: linear-gradient(160deg, #1e1208 0%, #2e1c0a 100%);
  border: 1px solid rgba(242, 183, 124, 0.30);
  border-radius: 20px;
  padding: 36px 40px;
  max-width: 380px;
  width: 90%;
  text-align: center;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.60),
    inset 0 1px 0 rgba(255,255,255,0.07);
  animation: peModalIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
}

@keyframes peModalIn {
  from { opacity: 0; transform: scale(0.85) translateY(20px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

.pe-modal-icon {
  font-size: 2.2rem;
  color: rgb(242, 183, 124);
  margin-bottom: 12px;
}

.pe-modal-title {
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 4px;
  font-family: "Yanone Kaffeesatz", sans-serif;
}

.pe-modal-sub {
  color: rgba(255,255,255,0.55);
  font-size: 0.88rem;
  font-family: sans-serif;
  margin-bottom: 20px;
}

.pe-modal-input {
  width: 100%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(242, 183, 124, 0.30);
  border-radius: 10px;
  color: #fff;
  font-size: 1.1rem;
  padding: 10px 16px;
  text-align: center;
  letter-spacing: 0.25em;
  outline: none;
  transition: border-color 0.25s, background 0.25s;
  margin-bottom: 8px;
}

.pe-modal-input:focus {
  border-color: rgb(242, 183, 124);
  background: rgba(255,255,255,0.12);
}

.pe-modal-error {
  display: none;
  color: rgb(255, 100, 80);
  font-size: 0.85rem;
  font-family: sans-serif;
  margin-bottom: 10px;
  margin-top: 0;
}

.pe-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 16px;
}

/* ── Zeile löschen (Editiermodus) ── */

.pe-delete-cell {
  width: 38px !important;
  padding: 0 6px !important;
  text-align: center;
  vertical-align: middle;
}

.pe-delete-btn {
  background: transparent;
  border: none;
  color: rgba(220, 80, 60, 0.35);
  font-size: 0.88rem;
  padding: 5px 7px;
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
  line-height: 1;
}

.pe-delete-btn:hover {
  color: rgb(220, 55, 35);
  background: rgba(220, 55, 35, 0.10);
}

/* ── Zeile hinzufügen (Editiermodus) ── */

.pe-insert-row td {
  padding: 5px 10px !important;
  background: transparent !important;
  border-bottom: none !important;
}

.pe-insert-btn {
  width: 100%;
  background: transparent;
  border: 1px dashed rgba(242, 183, 124, 0.32);
  border-radius: 8px;
  color: rgba(242, 183, 124, 0.60);
  font-size: 0.88rem;
  font-family: sans-serif;
  padding: 6px 16px;
  cursor: pointer;
  transition: color 0.22s, border-color 0.22s, background 0.22s;
  text-align: center;
  letter-spacing: 0.04em;
}

.pe-insert-btn:hover {
  color: rgb(242, 183, 124);
  border-color: rgba(242, 183, 124, 0.65);
  background: rgba(242, 183, 124, 0.07);
}

.pe-insert-btn:hover::before {
  content: '';
}