:root {
  /* Palette Colors */
  --palette-dark-green: #2F6B3F;
  --palette-light-green: #7FB77E;
  --palette-yellow: #F7C85C;
  --palette-cream: #FFF6C0;

  /* Theme Mapping */
  --bg-color: #ffffff;
  --text-primary: var(--palette-dark-green);
  --text-secondary: var(--palette-light-green);
  --accent-primary: var(--palette-yellow);
  --accent-secondary: var(--palette-cream);

  --glass-bg: rgba(255, 255, 255, 0.247);
  --glass-border: rgba(47, 107, 63, 0.096);
  --glass-hover: rgba(247, 200, 92, 0.05);

  /* Ankerpunkt des kompakten Kopftitels (ab Schritt 2). Die Werte hier sind nur
     Fallbacks — `anchorHeaderTitle()` in app.js misst den „zurück"-Button und
     überschreibt sie am <html>-Element, damit Titel und Button exakt auf einer
     Linie stehen. Nicht hart in Pixeln in Regeln unten einbauen. */
  --header-title-left: 12.5rem;
  --header-title-top: 1.5rem;
  --header-title-height: 2.9rem;

  /* Höhe der Glas-Leiste: Button-Höhe plus oben/unten derselbe Abstand, den der
     Button nach oben hat. Ergibt sich damit automatisch aus den gemessenen
     Werten oben — nirgends eine zweite Pixel-Zahl pflegen. */
  --topbar-height: calc(var(--header-title-top) * 2 + var(--header-title-height));
}

@font-face {
  font-family: 'Eraser';
  src: url('./ASSETS/EraserRegular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

h1,
h2,
h3,
h4,
h5,
h6,
.step-title {
  font-family: 'Eraser', sans-serif !important;
  font-weight: normal !important;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background-color: black;
  overscroll-behavior: none;

}

body {
  font-family: 'Outfit', sans-serif;
  background-color: var(--bg-color);
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: url('https://loehne-deli.de/wp-content/uploads/2022/02/Background-Deli.jpg') no-repeat center center fixed;
  background-size: cover;
}

#app {
  width: 100%;
  max-width: 1200px;
  padding: 1.5rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  min-height: 100vh;
}

header {
  text-align: center;
  margin-top: 0.5rem;
  animation: fadeInDown 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

header h1 {
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--palette-yellow);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  letter-spacing: -1px;
}

header p {
  color: var(--bg-color);
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  font-size: 1.2rem;
  margin-top: 0.5rem;
  font-weight: 400;
}

/* ---------------------------------------------------------------
   Kompakter Kopf (ab Schritt 2)
   `setHeaderMode()` in app.js schaltet `app--compact` auf #app. Der Titel
   springt dabei per CSS an seine neue Stelle (fixed, oben links neben dem
   „zurück"-Button); die weiche Bewegung dorthin macht app.js mit einer
   FLIP-Animation auf `.site-title__text`. Deshalb hier KEIN `transition` auf
   `top`/`left`/`font-size` des Titels — das würde gegen die Animation laufen.
--------------------------------------------------------------- */

/* Bezugsrahmen für die FLIP-Animation: skaliert wird von der linken oberen Ecke
   des Textes, nicht vom Kasten der <h1>. */
.site-title__text {
  display: inline-block;
  transform-origin: left top;
  will-change: transform;
}

#app.app--compact header {
  /* Titel ist `fixed`, Untertitel ausgeblendet — der Header nimmt keine Höhe
     mehr ein, der Inhalt rückt nach oben.
     Hier bewusst KEIN `animation: none`: das Zurücksetzen beim Verlassen des
     kompakten Modus würde `fadeInDown` erneut starten und gegen die
     FLIP-Animation des Titels laufen (Titel springt um 30 px). */
  margin-top: 0;
}

#app.app--compact header h1 {
  position: fixed;
  top: var(--header-title-top);
  left: var(--header-title-left);
  height: var(--header-title-height);
  /* Rechts Luft lassen, damit lange Schritt-Titel nicht aus dem Fenster laufen —
     der überzählige Text wird in `.site-title__step` mit „…" abgeschnitten. */
  max-width: calc(100vw - var(--header-title-left) - 1.5rem);
  display: flex;
  align-items: center;
  font-size: 1.9rem;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  z-index: 1100;
  pointer-events: none;
}

/* ---------------------------------------------------------------
   Glas-Leiste hinter Kopfzeile + „zurück"-Button (nur im kompakten Modus)
   Liegt mit `z-index: 1050` unter Button und Titel (beide 1100) und ist
   `pointer-events: none` — sie fängt keine Klicks ab. Der Inhalt scrollt
   darunter durch, `backdrop-filter` macht daraus den Glas-Effekt.
--------------------------------------------------------------- */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-height);
  z-index: 1050;
  pointer-events: none;

  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);

  /* Auf der Startseite weggeklappt; `setHeaderMode()` blendet sie über die
     Klasse an `#app` zusammen mit dem Titel ein. */
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#app.app--compact ~ .topbar {
  opacity: 1;
  transform: none;
}

/* Platz für die Leiste: Der Kopf ist im kompakten Modus 0 hoch, der Inhalt
   startete sonst unter der Leiste. `gap` von 3rem auf 1.5rem, damit der Inhalt
   trotz des größeren `padding-top` nicht nach unten rutscht. */
#app.app--compact {
  padding-top: var(--topbar-height);
  gap: 1.5rem;
}

/* Schritt-Titel rechts neben „Deli Catering" (z. B. „Dienstleistungs-Typ").
   Text setzt `setHeaderStepTitle()` per `textContent`; ohne Text greift `:empty`
   und der Trenner verschwindet mit. */
.site-title__step {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8em;
  color: var(--palette-cream);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.site-title__step::before {
  content: '·';
  margin: 0 0.55em;
  color: rgba(255, 246, 192, 0.65);
}

.site-title__step:empty,
#app:not(.app--compact) .site-title__step {
  display: none;
}

/* Untertitel verschwindet: erst ausblenden, dann Platz freigeben. */
header p {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#app.app--compact header p {
  opacity: 0;
  transform: translateY(-10px);
  height: 0;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}

@media (max-width: 760px) {
  #app.app--compact header h1 {
    font-size: 1.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {

  header,
  header p {
    animation: none;
    transition: none;
  }
}

/* Glassmorphism Cards */
.choice-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 24px;
  padding: 3rem 2.5rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, transparent, rgba(255, 246, 192, 0.4), transparent);
  transform: translateX(-100%);
  transition: 0.6s ease;
}

.card:hover::before {
  transform: translateX(100%);
}

.card:hover {
  transform: translateY(-8px);
  background: var(--glass-hover);
  box-shadow: 0 20px 40px rgba(47, 107, 63, 0.08);
  border-color: rgba(47, 107, 63, 0.3);
}

.card:nth-child(1):hover {
  border-bottom: 3px solid var(--palette-dark-green);
}

.card:nth-child(2):hover {
  border-bottom: 3px solid var(--palette-light-green);
}

.card h2 {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--text-primary);
}

.card p {
  color: #555555;
  font-size: 1.05rem;
  line-height: 1.6;
  font-weight: 400;
}

.step-title {
  text-align: center;
  font-size: 2.2rem;
  font-weight: 600;
  margin-bottom: 3rem;
  color: var(--palette-yellow);
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

/* Einheitliche Größe für alle „zurück"-Buttons des Wizards. Padding hier NICHT
   per Inline-Style in `app.js` überschreiben — sonst sind die Buttons je nach
   Schritt unterschiedlich groß. Einzige gewollte Ausnahme: `.detail-actions
   .btn-back` weiter unten (enge Button-Reihe in der Detail-Karte). */
.btn-back {
  background: #ffffff;
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  padding: 0.8rem 2.5rem;
  border-radius: 30px;
  cursor: pointer;
  font-family: 'Outfit';
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}

.btn-back:hover {
  background: var(--accent-primary);
  color: #fff;
  border-color: var(--accent-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(247, 200, 92, 0.3);
}

/* Pfeil nach links im „zurück"-Button. Nur die echten Navigations-Buttons
   bekommen ihn (per Markup, nicht per ::before) — Buttons wie „Details", die
   `.btn-back` nur zur Optik nutzen, bleiben pfeillos. */
.btn-back__arrow {
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s ease;
}

.btn-back:hover .btn-back__arrow {
  transform: translateX(-3px);
}

/* Einheitliche Position für den „zurück"-Button aller Schritte/Unterseiten:
   fest oben links am Viewport, damit er beim Scrollen sichtbar bleibt und in
   jedem Schritt an derselben Stelle steht. Wer diese Klasse setzt, darf keine
   eigene `position`/`top`/`left` per Inline-Style mitgeben. */
.btn-back--fixed {
  position: fixed;
  top: 1.5rem;
  left: 1.5rem;
  z-index: 1100;
  padding: 0.8rem 2rem 0.8rem 1.6rem;
}

@media (max-width: 760px) {
  .btn-back--fixed {
    top: 0.8rem;
    left: 0.8rem;
    padding: 0.6rem 1.4rem 0.6rem 1.1rem;
    font-size: 0.9rem;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn .6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

/* --- Start Page Wireframe Styles --- */
.options-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.option-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.option-item:hover {
  transform: translateY(-10px);
}

.circle-outline {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 10px solid var(--glass-border);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.5s ease;
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.548);
}

.option-item:hover .circle-outline {
  border: 5px solid var(--glass-border);
  filter: brightness(1.1);
}

.option-item:hover .green-ring {

  box-shadow: 0 0 40px rgba(47, 107, 63, 0.15);
}

.option-item:hover .blue-ring {

  box-shadow: 0 0 40px rgba(47, 107, 63, 0.15);
}

.square-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  filter: blur(1px);
}

.option-item:hover .square-img {
  transform: scale(1.15) rotate(2deg);
  filter: blur(0px);
}

.option-item h3 {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--palette-yellow);
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
  letter-spacing: 0.5px;
  transition: color 0.3s ease;
}

.option-item:hover h3 {
  color: var(--palette-cream);
}

/* --- Info-Modal des Dienstleistungs-Typs (Schritt 2) ---
   Ausnahme zur Inline-Style-Konvention: das Modal ist zweispaltig (Beschreibung
   links, Weiter-Button rechts) und bricht unter 780px auf eine Spalte um — eine
   Media-Query lässt sich inline nicht schreiben. Markup in `openServiceTypeModal`.
   `z-index` liegt auf derselben Stufe wie das Produkt-Info-Modal (2000). */
.service-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 2000;
}

.service-modal__card {
  position: relative;
  display: flex;
  gap: 2.5rem;
  align-items: center;
  width: 100%;
  max-width: 820px;
  max-height: 85vh;
  overflow-y: auto;
  background: white;
  border-radius: 20px;
  border: 1px solid var(--glass-border);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  padding: 2.5rem 3rem;
  text-align: left;
}

.service-modal__close {
  position: absolute;
  top: 1rem;
  right: 1.4rem;
  background: transparent;
  border: none;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  color: var(--palette-dark-green);
}

/* Die Textspalte darf schrumpfen (`min-width: 0`), die Button-Spalte nicht —
   sonst bricht die Beschriftung des Weiter-Buttons um. */
.service-modal__text {
  flex: 1 1 auto;
  min-width: 0;
}

.service-modal__text h3 {
  font-size: 1.8rem;
  color: var(--palette-dark-green);
  margin-bottom: 0.5rem;
}

.service-modal__lead {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--palette-light-green);
  margin-bottom: 1rem;
}

.service-modal__text p {
  font-size: 0.95rem;
  color: #444;
  line-height: 1.6;
}

.service-modal__list {
  list-style: none;
  margin-top: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.service-modal__list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.92rem;
  color: #444;
}

.service-modal__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--palette-yellow);
}

.service-modal__aside {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.8rem;
}

.service-modal__cta {
  white-space: nowrap;
  padding: 1rem 2rem;
}

.service-modal__cancel {
  background: transparent;
  border: none;
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  color: var(--palette-light-green);
  cursor: pointer;
  text-decoration: underline;
  padding: 0.3rem;
}

.service-modal__cancel:hover {
  color: var(--palette-dark-green);
}

@media (max-width: 780px) {
  .service-modal__card {
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
    padding: 2rem 1.5rem;
  }

  .service-modal__cta {
    white-space: normal;
  }
}

/* --- Package Grid View & Detail Panel --- */
.package-layout {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.package-container {
  display: flex;
  gap: 3rem;
  align-items: flex-start;
  width: 100%;
}

/* 200px statt 220px Mindestspalte: hält bei 1200px Fensterbreite die dritte
   Spalte, nachdem `.package-detail` breiter geworden ist. Die Custom-Ansicht
   überschreibt `grid-template-columns` inline (160px) und ist nicht betroffen. */
.package-grid {
  flex: 2;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 2rem;
}

.package-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  border: 4px solid transparent;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.package-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.package-card.selected {
  border-color: var(--palette-dark-green);
  box-shadow: 0 0 0 4px rgba(47, 107, 63, 0.1);
}

.package-img {
  width: 100%;
  aspect-ratio: 1;
  background-size: cover;
  background-position: center;
}

.package-card h4 {
  padding: 1.2rem;
  text-align: center;
  font-weight: 500;
  font-size: 1.1rem;
  margin: 0;
  background: var(--glass-bg);
  color: var(--text-primary);
}

/* Detail Panel */
/* Rechte Spalte der Paket-Ansicht. `flex: 1.2` gegen `flex: 2` des Rasters
   (statt früher 1:2) — die Detailkarte war für ihre Button-Zeile und den
   Beschreibungstext zu schmal. Wer hier weiter aufdreht, muss `.package-grid`
   gegenprüfen: Bei #app-Maximalbreite (1200px) bleibt dem Raster damit 680px,
   die 200px-Spalten passen genau dreimal hinein — mehr Breite für die Karte
   kostet eine Rasterspalte. */
.package-detail {
  flex: 1.2;
  position: sticky;
  /* Unter der Glas-Leiste einrasten, nicht dahinter verschwinden. */
  top: calc(var(--topbar-height) + 1rem);
  /* Bleibt bei 320px: Die Verbreiterung kommt aus `flex`, greift also auf
     breiten Fenstern, wo Platz da ist. Eine höhere Untergrenze wirkt nur auf
     schmalen Fenstern — dort steht sie neben der Mindestspalte des Rasters und
     macht die Seite horizontal scrollbar. */
  min-width: 320px;
}

.detail-card {
  background: white;
  border-radius: 20px;
  padding: 2.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--glass-border);
}

.detail-card h3 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  text-align: center;
  color: var(--text-primary);
}

/* Button-Zeile der Paket-Detailkarte („Details" + „Auswählen").
   Das inline gesetzte `flex: 1` auf den Buttons reicht nicht: Flex-Items
   schrumpfen nie unter ihre min-content-Breite, und `.btn-primary` bringt mit
   `padding: … 3rem` bei 1.1rem Schrift allein ~190px mit — die Zeile lief
   deshalb rechts aus der Karte heraus. `min-width: 0` hebt die Sperre auf, das
   knappere Padding senkt die Untergrenze, `nowrap` hält die Beschriftung
   einzeilig. `flex-wrap` ist der Notausgang für sehr schmale Karten. */
.detail-actions {
  flex-wrap: wrap;
}

.detail-actions .btn-primary,
.detail-actions .btn-back {
  min-width: 0;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  white-space: nowrap;
}

/* Bestell-Limits-Karte (Schritt 3, eigenes Menü). Sitzt im rechten Panel unter
   der Warenkorb-Karte, über dem „Auswählen"-Button; das Panel selbst klebt.
   Muss nach `.detail-card h3` stehen — gleiche Spezifität, der spätere gewinnt. */
.limits-card {
  /* Das Panel ist ein Flex-Container: Die Karte darf weder mitwachsen noch
     gestaucht werden, sonst frisst sie die Höhe der Warenkorb-Liste. */
  flex: 0 0 auto;
  width: 100%;
  padding: 1.25rem 1.5rem;
  /* Setzt die Karte gegen die Warenkorb-Karte darüber ab — kräftiger als die
     dezente `.detail-card`-Variante. */
  border: 2px solid var(--palette-light-green);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 14px 34px rgba(0, 0, 0, 0.22);
}

.limits-card h3 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  text-align: left;
  color: var(--palette-dark-green);
}

/* `auto-fit` statt fester Spaltenzahl: Das rechte Panel erreicht seine 380px
   erst ab ~1190px Fensterbreite und schrumpft darunter mit. Die Zellen brechen
   nicht um (siehe unten), eine feste Zweispaltigkeit würde also irgendwann aus
   der Karte laufen — hier klappt das Raster stattdessen selbst auf eine Spalte. */
.limits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  gap: 0.6rem 1rem;
  font-size: 0.9rem;
}

/* nowrap verhindert Umbrüche wie „0 /" + „3" mitten im Zähler. */
.limits-grid>div {
  color: #555;
  white-space: nowrap;
}

/* Schmale Fenster: Das Panel ist hier nur noch ~130–200px breit. Kleinere
   Schrift und Polsterung halten die nicht-umbrechenden Zähler in der Karte,
   sonst wird die ganze Seite horizontal scrollbar. */
@media (max-width: 760px) {
  .limits-card {
    padding: 1rem;
  }

  .limits-grid {
    grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
    font-size: 0.8rem;
  }
}

.carousel-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  border: 1px solid var(--glass-border);
}

.carousel-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #ddd;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.carousel-btn:hover {
  background: white;
  transform: translateY(-50%) scale(1.1);
}

.carousel-btn.left {
  left: 10px;
}

.carousel-btn.right {
  right: 10px;
}

.carousel-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
}

.carousel-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: all 0.2s ease;
}

.carousel-dot.active {
  background: #fff;
  transform: scale(1.25);
}

.detail-desc {
  background: var(--palette-cream);
  padding: 1.5rem;
  border-radius: 12px;
  border: 1px solid rgba(247, 200, 92, 0.4);
}

.detail-desc h4 {
  margin-bottom: 0.8rem;
  color: var(--palette-dark-green);
  font-weight: 600;
  font-size: 1.1rem;
}

.detail-desc p {
  font-size: 1rem;
  line-height: 1.6;
  color: #444;
}

.detail-desc .price {
  margin-top: 1.5rem;
  font-size: 1.4rem;
  color: var(--palette-dark-green);
  font-weight: 700;
}

/* Expanded Views */
.expanded-flex {
  display: flex;
  gap: 3rem;
  align-items: stretch;
}

.detail-main {
  flex: 1;
}

.detail-extra {
  flex: 1;
}

.product-list::-webkit-scrollbar {
  width: 6px;
}

.product-list::-webkit-scrollbar-thumb {
  background: var(--palette-light-green);
  border-radius: 4px;
}

/* --- Event Form Styles (Step 4) --- */
.form-card {
  background: white;
  border-radius: 20px;
  padding: 3rem;
  width: 100%;
  max-width: 500px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--glass-border);
}

/* Zeile über der Überschrift, in der der „Inhalt leeren"-Button rechts sitzt.
   Bewusst im Fluss statt absolut positioniert — ein absoluter Button mit Text
   würde die zentrierte <h2> überlappen. */
.form-card-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.5rem;
}

/* Optisch identisch zu `.btn-icon-danger` im CMS, nur mit Beschriftung. */
.btn-clear-form {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #8a9199;
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.btn-clear-form svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.btn-clear-form:hover {
  background: rgba(255, 77, 79, 0.10);
  border-color: rgba(255, 77, 79, 0.35);
  color: #ff4d4f;
}

.btn-clear-form:focus-visible {
  outline: 2px solid #ff4d4f;
  outline-offset: 2px;
}

.btn-clear-form:active {
  transform: scale(0.97);
}

.form-group {
  margin-bottom: 1.2rem;
}

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

.form-card input[type="text"],
.form-card input[type="number"],
.form-card input[type="date"],
.form-card input[type="time"],
.form-card input[type="tel"],
.form-card input[type="email"],
.form-card select {
  width: 100%;
  padding: 1rem 1.2rem;
  border: 1px solid #d1d9e0;
  border-radius: 12px;
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  color: #333;
  outline: none;
  transition: all 0.3s ease;
  background: #fafbfc;
}

.form-card input:focus,
.form-card select:focus {
  border-color: var(--palette-light-green);
  box-shadow: 0 0 0 4px rgba(127, 183, 126, 0.15);
  background: white;
}

.btn-primary {
  background: var(--palette-dark-green);
  color: white;
  border: none;
  padding: 1rem 3rem;
  border-radius: 30px;
  font-family: 'Outfit', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 8px 20px rgba(47, 107, 63, 0.2);
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(47, 107, 63, 0.3);
  background: #245230;
}

/* Footer */
.site-footer {
  position: fixed;
  bottom: 10px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 0.85rem;
  color: #999;
  z-index: 1000;
  pointer-events: none;
}

.site-footer a {
  color: #999;
  text-decoration: none;
  transition: color 0.3s ease;
  pointer-events: auto;
}

.site-footer a:hover {
  color: var(--palette-dark-green);
  text-decoration: underline;
}

.site-footer .separator {
  margin: 0 0.8rem;
  color: #ccc;
}
/* --- Animierter Brief (Bestätigungs-Screen nach dem Absenden) ---
   Basis: https://codepen.io/jakegilesphillips/pen/MveNLe ("Animated CSS Mail Button"),
   auf die Deli-Grüntöne umgefärbt. Reines CSS, gesteuert über die Klasse `.is-open`
   (siehe playMailAnimation() in app.js), nicht per :hover.

   Die Animation läuft bewusst rückwärts: `.is-open` steht schon im gerenderten Markup,
   der Brief ist also zuerst offen; JS nimmt die Klasse weg und die Transitions unten
   laufen in die Gegenrichtung (Brief fährt ein, danach klappt die Lasche zu). */
.mail-animation {
  --mail-front: var(--palette-light-green);
  --mail-flap: rgb(222, 188, 78);
  --mail-side: #6ba46a;
  --mail-line: #3f7d4d;

  position: relative;
  width: 200px;
  height: 250px;
  margin: 0 auto 2rem;
}

.mail-animation .letter-image {
  position: absolute;
  top: 0;
  left: 50%;
  width: 200px;
  height: 200px;
  transform: translateX(-50%);
  cursor: pointer;
  animation: mailDrop .6s cubic-bezier(0.165, 0.84, 0.44, 1) both;
}

@keyframes mailDrop {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-40px) scale(.9);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

.mail-animation .animated-mail {
  position: absolute;
  height: 150px;
  width: 200px;
  transition: transform 0.4s;
}

.mail-animation .animated-mail .body {
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 100px 200px;
  border-color: transparent transparent var(--mail-front) transparent;
  z-index: 2;
}

.mail-animation .animated-mail .top-fold {
  position: absolute;
  top: 50px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 100px 0 100px;
  border-color: var(--mail-flap) transparent transparent transparent;
  transform-origin: 50% 0%;
  transition: transform 0.4s 0.4s, z-index 0.2s 0.4s;
  z-index: 2;
}

.mail-animation .animated-mail .back-fold {
  position: absolute;
  bottom: 0;
  width: 200px;
  height: 100px;
  background: var(--mail-flap);
  z-index: 0;
}

.mail-animation .animated-mail .left-fold {
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 0 50px 100px;
  border-color: transparent transparent transparent var(--mail-side);
  z-index: 2;
}

.mail-animation .animated-mail .letter {
  position: absolute;
  left: 20px;
  bottom: 0;
  width: 160px;
  height: 60px;
  background: #fff;
  z-index: 1;
  overflow: hidden;
  transition: height 0.4s 0.2s;
}

.mail-animation .animated-mail .letter .letter-border {
  height: 10px;
  width: 100%;
  background: repeating-linear-gradient(-45deg,
      var(--mail-line),
      var(--mail-line) 8px,
      transparent 8px,
      transparent 18px);
}

.mail-animation .animated-mail .letter .letter-title {
  margin-top: 10px;
  margin-left: 5px;
  height: 10px;
  width: 40%;
  background: var(--mail-line);
}

.mail-animation .animated-mail .letter .letter-context {
  margin-top: 10px;
  margin-left: 5px;
  height: 10px;
  width: 20%;
  background: var(--mail-line);
}

.mail-animation .animated-mail .letter .letter-stamp {
  margin-top: 30px;
  margin-left: 120px;
  border-radius: 100%;
  height: 30px;
  width: 30px;
  background: var(--mail-line);
  opacity: 0.3;
}

.mail-animation .shadow {
  position: absolute;
  top: 200px;
  left: 50%;
  width: 300px;
  height: 30px;
  transform: translateX(-50%);
  transition: width 0.4s;
  border-radius: 100%;
  background: radial-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
}

/* Geöffneter Zustand — steht beim Rendern im Markup und wird per JS wieder entfernt.
   Die Transitions in dieser Gruppe greifen deshalb nur beim erneuten Abspielen (Klick);
   das Zuklappen nutzt die Transitions der Grundregeln weiter oben (Brief zuerst,
   Lasche mit 0.4s Verzögerung hinterher). */
.mail-animation.is-open .animated-mail {
  transform: translateY(50px);
}

.mail-animation.is-open .animated-mail .top-fold {
  transition: transform 0.4s, z-index 0.2s;
  transform: rotateX(180deg);
  z-index: 0;
}

.mail-animation.is-open .animated-mail .letter {
  height: 180px;
}

.mail-animation.is-open .shadow {
  width: 200px;
}

/* Nur für einen Frame gesetzt (Klick = nochmal abspielen): zurück in den offenen
   Zustand springen, ohne dass man das Aufklappen sieht. */
.mail-animation.is-instant .animated-mail,
.mail-animation.is-instant .animated-mail .top-fold,
.mail-animation.is-instant .animated-mail .letter,
.mail-animation.is-instant .shadow {
  transition: none !important;
}

/* Konfetti — platzt auf, wenn Text und Button erscheinen, und umrandet den Text einmal.
   Die Schnipsel baut `burstConfetti()` in app.js: Startpunkte auf einer Ellipse um den
   Text-Block, Flugweite/Drehung/Dauer pro Schnipsel als Custom Properties.

   Position und Maße des Layers setzt das JS inline aus dem gemessenen Text-Block; er hängt
   an `document.body` und ist `fixed`, weil die nach außen fliegenden Schnipsel sonst die
   Scrollfläche der Seite aufziehen (horizontaler Scrollbalken) und weil `fixed` in einem
   transformierten Vorfahren wie `.fade-in` an diesem kleben würde statt am Fenster. */
.confetti-layer {
  position: fixed;
  pointer-events: none;
  z-index: 30;
}

.confetti-piece {
  position: absolute;
  /* `left`/`top` kommen pro Schnipsel inline — sie bilden den Ring um den Text */
  display: block;
  border-radius: 1px;
  opacity: 0;
  animation: confettiBurst var(--dur, 1.8s) linear var(--delay, 0s) forwards;
  will-change: transform, opacity;
}

.confetti-piece.is-round {
  border-radius: 50%;
}

/* `--peak` ist negativ (Steigflug), `--dy` positiv (Fall). Die Zwischenstopps formen
   daraus den Bogen; deshalb `linear` als Timing-Funktion. */
@keyframes confettiBurst {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(0deg) scale(.7);
  }

  8% {
    opacity: 1;
  }

  35% {
    transform: translate(calc(var(--dx) * .5), var(--peak)) rotate(calc(var(--rot) * .35)) scale(1);
  }

  75% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1);
  }
}

/* Abflug — letzter Teil der Sequenz: kurzer Ausholer nach links, dann mit Tempo nach
   rechts aus dem Bild.

   Warum `position: fixed`: Ein absolut positioniertes Element, das 105vw nach rechts
   fliegt, vergrößert die Scrollfläche der Seite → horizontaler Scrollbalken. Fixe
   Elemente zählen dort nicht mit.

   Fixiert wird der **Container** (`.mail-animation`), nicht das `.letter-image` — sonst
   greifen die ganzen `.mail-animation …`-Regeln für Lasche, Brief und Schatten nicht mehr.
   Position und Maße setzt `startFlight()` inline aus dem gemessenen Rechteck; außerdem
   hängt es den Container an `document.body` um, weil jeder transformierte Vorfahre
   (z. B. `.fade-in`, das mit `translateY(0)` endet) sonst zum Bezugsrahmen für `fixed`
   wird und der Umschlag an eine falsche Stelle springt. */
.mail-animation.is-flying {
  margin: 0;
  z-index: 20;
}

.mail-animation.is-flying .letter-image {
  animation: mailFlyOut .85s forwards;
  will-change: transform;
}

/* Das `translateX(-50%)` der Grundregel muss in jedem Keyframe mitlaufen, sonst
   springt der Umschlag beim Start der Animation um seine halbe Breite. */
@keyframes mailFlyOut {
  0% {
    transform: translateX(-50%) translate(0, 0) rotate(0deg);
    /* Ausholer: sanft raus, am linken Umkehrpunkt fast stehend */
    animation-timing-function: cubic-bezier(.25, .8, .4, 1);
  }

  45% {
    transform: translateX(-50%) translate(-46px, 4px) rotate(-7deg);
    /* … und von dort beschleunigt nach rechts raus */
    animation-timing-function: cubic-bezier(.55, 0, .85, .5);
  }

  100% {
    transform: translateX(-50%) translate(105vw, -70px) rotate(16deg);
  }
}

/* Text + Button des Erfolgs-Screens. Startet unsichtbar (belegt aber Platz, damit beim
   Einblenden nichts springt) und wird erst nach dem Abflug per `.is-visible` eingefaded. */
.success-message {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.success-message.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {

  .mail-animation .letter-image,
  .mail-animation .animated-mail,
  .mail-animation .animated-mail .top-fold,
  .mail-animation .animated-mail .letter,
  .mail-animation .shadow,
  .mail-animation.is-flying .letter-image {
    animation: none !important;
    transition: none !important;
  }

  /* Konfetti wird in dem Fall gar nicht erst erzeugt (siehe playMailAnimation) */
  .confetti-layer {
    display: none;
  }

  /* Ohne Bewegung: Umschlag verschwindet sofort, der Text steht einfach da */
  .success-message {
    transition: none;
  }
}