:root {
  --bg: #fffaf5;
  --card: #ffffff;
  --text: #2d241d;
  --muted: #75685f;
  --line: #eadfd6;
  --soft: #fae9ef;
  --rose: #d85f83;
  --rose-dark: #b84366;
  --green: #254832;
  --cream: #f4ebe2;
  --shadow: 0 24px 80px rgba(78, 53, 35, 0.11);
  --radius: 28px;
}

* { box-sizing: border-box; }
/* Author rules like `label { display: grid }` would otherwise beat the UA [hidden] rule */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: linear-gradient(180deg, #fffaf5 0%, #f7efe8 100%);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
img { max-width: 100%; display: block; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 78px;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 14px clamp(16px, 4vw, 52px);
  background: rgba(255, 250, 245, 0.88);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}

.brand img{width:auto;height:72px;max-width:220px;object-fit:contain;}
.main-nav {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex: 1;
}
.main-nav a {
  padding: 10px 14px;
  border-radius: 999px;
  color: #4b3d34;
  font-weight: 700;
  font-size: 14px;
}
.main-nav a.active,
.main-nav a:hover {
  background: var(--soft);
  color: var(--rose-dark);
}
.cart-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  font-weight: 800;
}
.cart-link strong {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--rose);
  color: white;
  font-size: 13px;
}

main {
  width: min(1210px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 60px;
}
.page { display: none; animation: fadeIn .22s ease; }
.page.active { display: block; }

@keyframes fadeIn {
  from { opacity: .45; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--rose-dark);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
h1, h2, h3 {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: -.03em;
}
h1 { font-size: clamp(42px, 7vw, 76px); line-height: .94; margin: 0 0 18px; }
h2 { font-size: clamp(28px, 3vw, 42px); line-height: 1; margin: 0 0 14px; }
p { line-height: 1.6; }
.lead { max-width: 560px; font-size: 19px; color: var(--muted); }

.hero {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 34px;
  align-items: center;
  padding: 46px;
  border-radius: 38px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 15% 20%, #fff 0 10%, transparent 24%),
    linear-gradient(135deg, #fff 0%, #f4e8df 100%);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.hero-copy { padding: 20px 0; }
.hero-art {
  position: relative;
  min-height: 500px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius);
}
.hero-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}

/* Hero carousel */
.hero-slides { position: relative; width: 100%; height: 100%; min-height: 500px; }
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1s ease, transform 6s ease;
}
.hero-slide.active {
  opacity: 1;
  transform: scale(1);
}
.hero-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}
.hero-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  cursor: pointer;
  transition: width .25s ease, background .25s ease;
}
.hero-dot.active { width: 26px; background: #fff; }

/* Hero stats */
.hero-stats {
  display: flex;
  gap: 28px;
  margin-top: 30px;
  flex-wrap: wrap;
}
.hero-stats strong {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  color: var(--rose-dark);
  line-height: 1;
}
.hero-stats span { color: var(--muted); font-size: 13px; font-weight: 700; }
.hero-actions,
.section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 28px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 15px;
  cursor: pointer;
  font-weight: 900;
  transition: transform .15s ease, background .15s ease, border .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn.primary {
  background: var(--rose);
  color: white;
  box-shadow: 0 14px 30px rgba(216, 95, 131, .22);
}
.btn.primary:hover { background: var(--rose-dark); }
.btn.ghost {
  background: white;
  color: var(--text);
  border: 1px solid var(--line);
}
.btn.wide { width: 100%; margin-top: 12px; }

.feature-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 20px 0 46px;
}
.feature-strip article {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--card);
  box-shadow: 0 10px 34px rgba(78, 53, 35, .05);
}
/* Unter den Schritten am Seitenende: Abstand nach oben statt nach unten. */
.steps + .feature-strip { margin: 36px 0 10px; }
.feature-strip b { display: block; margin-bottom: 4px; }
.feature-strip span { color: var(--muted); font-size: 14px; }

.section-head,
.page-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin: 36px 0 20px;
}
.page-title {
  display: block;
  max-width: 790px;
}
.page-title p { color: var(--muted); margin-top: 0; }
.link-more { color: var(--rose-dark); font-weight: 900; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.product-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--card);
  box-shadow: 0 16px 42px rgba(78, 53, 35, .08);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 70px rgba(78, 53, 35, .13);
}
.product-image {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--cream);
  overflow: hidden;
}
.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
/* Only on devices that really hover — on a touchscreen :hover sticks after a
   tap and the photo would stay zoomed in. */
@media (hover: hover) {
  .product-card:hover .product-image img { transform: scale(1.07); }
  .product-card:hover .product-image video.playing + img,
  .product-image video.playing ~ img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .product-image img { transition: none; }
  .product-card:hover .product-image img { transform: none; }
}
.badge {
  position: absolute;
  top: 13px;
  left: 13px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  color: var(--rose-dark);
  font-size: 12px;
  font-weight: 900;
  backdrop-filter: blur(10px);
}
.product-body { padding: 18px; }
.product-body h3 {
  margin: 0 0 8px;
  font-size: 22px;
}
/* Catalogue cards show name + price only; the description lives on the
   product page, so the grid stays scannable. */
.product-body h3 { min-height: 0; margin-bottom: 14px; }
.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.price { font-size: 18px; font-weight: 950; }
.add-mini {
  min-width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 0;
  color: white;
  background: var(--green);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

/* Occasion tiles */
.occasion-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.occasion-tile {
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 22px 12px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--card);
  box-shadow: 0 10px 30px rgba(78, 53, 35, .05);
  font-weight: 800;
  text-align: center;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.occasion-tile span { font-size: 34px; line-height: 1; transition: transform .25s ease; }
.occasion-tile:hover {
  transform: translateY(-4px);
  border-color: #f2cbd8;
  box-shadow: 0 22px 50px rgba(78, 53, 35, .12);
}
.occasion-tile:hover span { transform: scale(1.18) rotate(-6deg); }

/* How it works steps */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.steps article {
  position: relative;
  padding: 28px 24px 24px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--card);
  box-shadow: 0 12px 36px rgba(78, 53, 35, .06);
}
.step-num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--soft);
  color: var(--rose-dark);
  font-family: Georgia, serif;
  font-size: 22px;
  font-weight: 900;
  margin-bottom: 14px;
}
.steps b { display: block; font-size: 18px; margin-bottom: 6px; }
.steps p { margin: 0; color: var(--muted); font-size: 14px; }

/* Scroll reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered product card entrance */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.product-grid .product-card:not(.skeleton-card) {
  animation: cardIn .5s ease both;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 26px;
}
.filter {
  border: 1px solid var(--line);
  background: white;
  color: var(--text);
  border-radius: 999px;
  padding: 11px 16px;
  font-weight: 800;
  cursor: pointer;
}
.filter.active {
  background: var(--soft);
  color: var(--rose-dark);
  border-color: #f2cbd8;
}

.back-button {
  margin: 4px 0 18px;
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: var(--rose-dark);
  cursor: pointer;
  font-weight: 900;
}

.product-detail {
  display: grid;
  /* Das Foto bekommt den Platz: die Spalte rechts ist so schmal, wie die
     Groessen-Kacheln es zulassen. */
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 36px;
}
/* Square frame, filled edge to edge. The photos are portrait, so the old
   centred layout left wide white margins either side of the bouquet. */
.detail-image {
  position: relative;
  /* Quadratisch wie die Karten. Die Fotos sind hochkant; der Schnitt sitzt
     oben (Himmel, Wand), unten bleibt fast alles — kadrierung() in app.js
     setzt --focus-y je Foto. */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 34px;
  background: white;
  box-shadow: var(--shadow);
}
.detail-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.detail-panel {
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 34px;
  background: white;
  box-shadow: var(--shadow);
}
.detail-panel .price { font-size: 30px; }
.size-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 11px;
  margin: 14px 0 22px;
}
.size-options label,
.payment-list label,
.method-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: white;
  cursor: pointer;
}
.size-options label {
  display: grid;
  place-items: center;
  gap: 3px;
  padding: 12px 8px;
  font-weight: 900;
}
/* The finished price of that size, not a surcharge — lighter than the label
   so the size letter still reads first. */
.size-options label small {
  font-size: 13px;
  font-weight: 700;
  opacity: .72;
  letter-spacing: -.01em;
}
.size-options label small:empty { display: none; }
.size-options label .size-dia { font-size: 12px; font-weight: 500; opacity: .65; letter-spacing: 0; margin-top: -2px; }
.size-options label .variant-note { font-size: 11px; font-weight: 500; opacity: .7; letter-spacing: 0; text-align: center; line-height: 1.25; }
/* Kachel: Groesse gross, darunter Durchmesser und Preis. */
.size-options label .size-text { display: grid; gap: 1px; justify-items: center; min-width: 0; }
.size-options label .size-text > b { font-size: 22px; font-weight: 600; line-height: 1.1; }
.size-options label:has(input:checked),
.method-card:has(input:checked) {
  background: var(--soft);
  border-color: #f1c9d7;
  color: var(--rose-dark);
}
.size-options input,
.method-card input { display: none; }
.qty-row {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 20px 0;
}
.qty-control {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.qty-control button {
  width: 42px;
  height: 46px;
  border: 0;
  background: white;
  cursor: pointer;
}
.qty-control span {
  min-width: 42px;
  text-align: center;
  font-weight: 900;
}

.cart-layout,
.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 26px;
}
.cart-items,
.summary,
.checkout-panel,
.success-card,
.info-card,
.legal-grid article,
.orders-list article {
  border: 1px solid var(--line);
  border-radius: 28px;
  background: white;
  box-shadow: 0 14px 42px rgba(78, 53, 35, .07);
}
.cart-items,
.summary,
.checkout-panel,
.success-card,
.info-card,
.legal-grid article {
  padding: 26px;
}
.empty {
  padding: 44px;
  text-align: center;
  color: var(--muted);
}
.cart-item {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.cart-item:last-child { border-bottom: 0; }
.cart-item img {
  width: 92px;
  height: 92px;
  object-fit: cover;
  border-radius: 18px;
  background: var(--cream);
}
.cart-item h3 {
  margin: 0 0 5px;
  font-size: 20px;
}
.cart-item p { margin: 0; color: var(--muted); font-size: 14px; }
.item-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.small-button {
  border: 1px solid var(--line);
  background: white;
  border-radius: 999px;
  padding: 7px 10px;
  cursor: pointer;
  font-weight: 800;
}
.summary-line {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 14px 0;
}
.summary-note,
.small,
.muted { color: var(--muted); font-size: 13px; }

/* Kleiner Hinweis unter einem Feld — hier: der frueheste Termin. Bewusst
   ruhig, er soll erklaeren und nicht wie ein Fehler aussehen. */
.field-note {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted, #6b6b63);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
label {
  display: grid;
  gap: 7px;
  color: var(--text);
  font-weight: 800;
  font-size: 14px;
  /* Jedes Feld im Raster ist so hoch wie das hoechste seiner Reihe. Ohne
     `start` verteilt das Raster die ueberschuessige Hoehe auf die Zeilen des
     Feldes: neben "Datum" mit seinem Hinweistext rutschte das Zeitfenster nach
     unten und stand nicht mehr auf einer Linie mit dem Datumsfeld. */
  align-content: start;
}
label.full,
.full { grid-column: 1 / -1; }
/* Was direkt hinter einem Feldraster steht, braucht denselben Abstand, den das
   Raster zwischen seinen Reihen haelt - sonst klebt das naechste Feld am
   Hinweistext der letzten Zeile. */
.form-grid + label,
.form-grid + .form-grid { margin-top: 14px; }
/* Beschriftung und „i" nebeneinander — in einem Raster-Label bekaeme der
   Hinweisknopf sonst eine eigene Zeile und das Feld rutscht nach unten. */
.label-row { display: flex; align-items: center; gap: 6px; min-height: 22px; }
.label-row .tip { margin-left: 0; }

/* ── Datumsauswahl ──────────────────────────────────────────────────────────
   Gesperrte Wochentage sollen zu sehen sein, bevor jemand sie antippt. Ein
   <input type="date"> kann das nicht, also steht hier ein eigener Kalender.
   Das Feld sieht aus und sitzt wie jedes andere im Raster. */
.date-field {
  display: grid;
  gap: 7px;
  align-content: start;
  color: var(--text);
  font-weight: 800;
  font-size: 14px;
}
/* Der Kalender haengt am Knopf, nicht am ganzen Feld - sonst klappt er unter
   dem Hinweistext auf und sieht aus, als gehoere er nicht dazu. */
.date-anchor { position: relative; }
.date-trigger {
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 13px 14px;
  color: var(--text);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.date-trigger:hover { border-color: #d8c3b4; }
.date-trigger[aria-expanded="true"] { border-color: #c98ba5; }
.date-trigger[data-empty] { color: #9b8a7d; font-weight: 700; }

.date-pop {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 40;
  margin-top: 6px;
  width: max(300px, 100%);
  max-width: calc(100vw - 32px);
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(78, 53, 35, .18);
}
.date-pop[hidden] { display: none; }
.date-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.date-pop-head strong { font-size: 15px; text-transform: capitalize; }
.date-nav {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.date-nav:disabled { opacity: .3; cursor: default; }

.date-week,
/* minmax(0, 1fr): die Tage duerfen schmaler werden als ihr Inhalt — sonst
   schob die siebte Spalte am Telefon ueber den Rand hinaus. */
.date-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.date-week {
  margin-bottom: 4px;
  color: #9b8a7d;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.date-day {
  aspect-ratio: 1;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 12px;
  background: #faf7f3;
  color: var(--text);
  font: inherit;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
}
.date-day:hover:not(:disabled) { border-color: #c98ba5; }
.date-day[aria-pressed="true"] { background: #254832; color: #fff; }
/* Gesperrt heisst: sichtbar da, aber blass und nicht anklickbar. */
.date-day:disabled { background: transparent; color: #c9bfb6; cursor: default; text-decoration: line-through; }
.date-day.date-empty { background: none; border: none; cursor: default; }
.date-legend { margin: 10px 0 0; color: #8a7a6d; font-size: 12px; font-weight: 700; }

@media (max-width: 560px) {
  /* Am Telefon so breit wie der Bildschirm minus Rand, mittig unter dem Feld. */
  .date-pop { width: min(calc(100vw - 32px), 380px); max-width: none; left: 50%; transform: translateX(-50%); }
  .date-day { font-size: 15px; }
}
input, textarea, select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 13px 14px;
  color: var(--text);
}
textarea { resize: vertical; }
.checkout-panel h2 { font-size: 28px; margin-top: 0; }
.checkout-panel h2:not(:first-child) { margin-top: 30px; }
.method-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
.method-card {
  padding: 16px;
}
.method-card span {
  display: block;
  font-weight: 950;
  margin-bottom: 4px;
}
.method-card small,
.payment-list small { color: var(--muted); }
.payment-list {
  display: grid;
  gap: 10px;
}
.payment-list label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
}
.payment-list input { width: auto; }
/* Zahlungs-Kacheln: Logo links, Text, Auswahlknopf rechts. */
.payment-list label[hidden] { display: none; }
.payment-list label.pay-tile { justify-content: flex-start; }
.payment-list label.pay-tile.active { border-color: var(--rose); box-shadow: inset 0 0 0 1px var(--rose); }
.pay-tile input { width: 18px; height: 18px; margin: 0; order: 2; flex-shrink: 0; accent-color: var(--rose); cursor: pointer; }
.pay-logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 32px;
  min-width: 58px;
  justify-content: center;
  padding: 0 10px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.01em;
  line-height: 1;
}
.pay-logo svg { display: block; flex-shrink: 0; }
.pay-logo-apple  { background: #000; color: #fff; }
.pay-logo-google { background: #fff; color: #3c4043; border: 1px solid #dadce0; }
.pay-logo-card   { background: #eef3ef; color: #254832; }
.pay-logo-paypal { background: #fff; border: 1px solid #dadce0; gap: 0; font-style: italic; font-weight: 800; }
.pay-logo-paypal i:first-child { color: #003087; }
.pay-logo-paypal i:last-child  { color: #009cde; }
.pay-text { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.pay-text > span { font-weight: 600; }
.checkout-summary {
  margin: 22px 0;
  padding: 16px;
  border-radius: 18px;
  background: var(--bg);
  border: 1px solid var(--line);
}
.terms {
  display: flex;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 10px;
  color: var(--muted);
}
.terms input { width: auto; margin-top: 3px; }

.success-card {
  max-width: 720px;
  margin: 60px auto;
  text-align: center;
  padding: 56px;
}
.info-grid,
.legal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.big-icon { font-size: 58px; display: block; margin-bottom: 14px; }
.info-card ul { color: var(--muted); line-height: 1.8; }

.site-footer {
  width: min(1210px, calc(100% - 32px));
  margin: 0 auto 34px;
  padding: 28px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 24px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: white;
  color: var(--muted);
}
.site-footer img{width:auto;height:92px;max-width:150px;margin-bottom:10px;object-fit:contain;}
.site-footer a { display: block; margin-top: 8px; color: var(--muted); }
.site-footer strong { color: var(--text); }

/* Login card — the whole page until you are signed in */
.login-card {
  max-width: 420px;
  margin: 10px auto 26px;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: #fff;
  box-shadow: var(--shadow);
  text-align: center;
}
.login-card h2 { margin: 0 0 6px; font-size: 28px; }
.login-card p { margin: 0 0 18px; font-size: 14px; }
.login-card input { text-align: center; margin-bottom: 12px; }

/* Toolbar shown after login */
.admin-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 18px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(78, 53, 35, .05);
}
.admin-who { font-weight: 900; color: var(--rose-dark); }
.admin-bar-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.admin-bar-actions .btn { min-height: 40px; padding: 0 16px; font-size: 14px; }

@media (max-width: 620px) {
  .admin-bar { flex-direction: column; align-items: stretch; }
  .admin-bar-actions .btn { flex: 1; }
}
.orders-list {
  display: grid;
  gap: 16px;
}
.orders-list article { padding: 18px; }
.order-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
  margin-bottom: 12px;
}
.order-lines {
  margin: 12px 0;
  color: var(--muted);
}
.status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.status-row select { width: auto; }

@media (max-width: 980px) {
  .hero,
  .product-detail,
  .cart-layout,
  .checkout-layout {
    grid-template-columns: 1fr;
  }
  .product-grid,
  .feature-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .occasion-grid { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .hero { padding: 30px; }
  .hero-art { min-height: auto; }
  .hero-slides { min-height: 360px; }
  .site-header { flex-wrap: wrap; }
  .main-nav { order: 3; width: 100%; justify-content: flex-start; overflow-x: auto; }
}

/* Close button and drawer wrapper — only used inside mobile menu */
.nav-close { display: none; }
.nav-drawer { display: contents; }

/* Mobile hamburger toggle — hidden on desktop */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  font-size: 22px;
  color: var(--text);
  line-height: 1;
  border-radius: 10px;
}
.nav-toggle:hover { background: var(--soft); }

@media (max-width: 620px) {
  main,
  .site-footer {
    width: min(100% - 22px, 1210px);
  }
  .product-grid,
  .feature-strip,
  .form-grid,
  .method-grid,
  .info-grid,
  .legal-grid,
  .site-footer {
    grid-template-columns: 1fr;
  }
  .occasion-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-stats { gap: 18px; }
  .hero { padding: 24px; border-radius: 28px; }
  .cart-link span { display: none; }
  .section-head { display: block; }
  .cart-item { grid-template-columns: 74px 1fr; }
  .cart-item > strong { grid-column: 2; }

  /* Mobile nav drawer */
  .nav-toggle { display: flex; align-items: center; justify-content: center; }
  .site-header { flex-wrap: nowrap; }
  .main-nav {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    /* The header carries backdrop-filter, and that makes it the containing
       block for fixed children — so top/bottom here resolve against the header,
       not the viewport, and the drawer came out header-high with the links
       spilling onto the page. An explicit viewport height fixes it; dvh keeps
       it right while the mobile browser bar slides in and out. */
    height: 100vh;
    height: 100dvh;
    background: rgba(45, 36, 29, 0.55);
    z-index: 200;
    flex-direction: column;
    align-items: flex-end;
    order: unset;
    width: auto;
    overflow: visible;
  }
  .main-nav.open {
    display: flex;
  }
  .nav-drawer {
    display: flex;
    flex-direction: column;
    background: var(--card);
    min-width: 240px;
    height: 100%;
    padding: 60px 24px 32px;
    gap: 4px;
    box-shadow: -4px 0 32px rgba(78,53,35,.15);
  }
  .main-nav a {
    font-size: 17px;
    padding: 14px 18px;
    border-radius: 14px;
  }
  .nav-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--soft);
    border: none;
    cursor: pointer;
    font-size: 20px;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Product detail — photo size note */
/* Hover clip sits on top of the still and fades in once it is actually
   playing, so a slow connection shows the photo rather than a black box. */
.hover-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.hover-video.playing { opacity: 1; }
/* Small play mark so it is discoverable that the photo does something. It is a
   <button>, but with a mouse it stays a hint: pointer-events are off so it can
   never swallow a click meant for the card. Keyboard and touch reach it anyway
   — Enter fires a click regardless, and the phone rules below switch it on. */
.video-hint {
  position: absolute;
  right: 11px;
  bottom: 11px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 999px;
  background: rgba(45, 36, 29, .55);
  backdrop-filter: blur(6px);
  pointer-events: none;
  cursor: pointer;
  transition: opacity .25s ease;
}
.video-hint::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #fff;
}
/* Beim Zeigen tritt die Marke zurueck — aber nur, wo es echtes Zeigen gibt.
   Auf dem Telefon bleibt :hover nach einem Tipp am Element haengen; ohne diese
   Klammer waere der Pause-Knopf genau dann unsichtbar, wenn man ihn braucht. */
@media (hover: hover) {
  .product-image:hover .video-hint, .detail-image:hover .video-hint { opacity: 0; }
}
/* On the detail page the photo is contained and centred, not cropped to fill,
   so the clip has to be boxed the same way — inset:0 + cover would show a
   noticeably bigger, differently cropped picture the moment you hover. */
/* The clip fills the same square as the photo, so hovering does not resize
   or re-crop the picture. */
.detail-image .hover-video { object-fit: cover; }
.detail-image .video-hint { right: 16px; bottom: 16px; width: 34px; height: 34px; }
.detail-image .video-hint::after { border-width: 6px 0 6px 10px; }
/* Laeuft der Clip, wird aus dem Dreieck ein Pausezeichen — der Knopf ist auf
   dem Telefon der einzige Weg zurueck zum Foto. */
.clip-on .video-hint::after {
  left: 50%;
  width: 11px;
  height: 12px;
  box-sizing: border-box;
  border-style: solid;
  border-width: 0 3px;
  border-color: #fff;
}
.detail-image.clip-on .video-hint::after { width: 14px; height: 15px; border-width: 0 4px; }
/* Zwischen Tippen und erstem Bild liegt der Download. */
@keyframes clipLoading { 50% { background: rgba(45, 36, 29, .85); } }
.video-hint.is-loading { animation: clipLoading .9s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .hover-video { display: none; }
  .video-hint { display: none; }
}

/* The catalogue photo shows size M while the price quoted is the S price, so
   the card has to say which size is pictured — otherwise "ab 49,99" reads as a
   promise about the bouquet in the photo. */
.photo-size-badge {
  position: absolute;
  bottom: 11px;
  left: 11px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(45, 36, 29, .55);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
  backdrop-filter: blur(6px);
}
.photo-size-note {
  position: absolute;
  bottom: 12px;
  left: 12px;
  margin: 0;
  font-size: 12px;
  color: #fff;
  background: rgba(45, 36, 29, 0.55);
  padding: 4px 10px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
}

/* Gift card option on product detail */
.gift-card-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  font-size: 15px;
  transition: border-color .15s, background .15s;
}
.gift-card-option:hover { border-color: var(--rose); background: var(--soft); }
.gift-card-option input { width: 18px; height: 18px; accent-color: var(--rose); cursor: pointer; flex-shrink: 0; }

/* Two-axis variant chooser (e.g. roses: count × height) */
.variant-count { margin: 12px 0 4px; }
.variant-select { max-width: 260px; font-weight: 800; }
.size-options-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 320px; }

/* Skeleton loading placeholders */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton-card { pointer-events: none; }
.skeleton-img {
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  background: linear-gradient(90deg, var(--cream) 25%, #f0e4d8 50%, var(--cream) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite linear;
}
.skeleton-line {
  height: 14px;
  border-radius: 8px;
  margin: 12px 8px 6px;
  background: linear-gradient(90deg, var(--cream) 25%, #f0e4d8 50%, var(--cream) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite linear;
}
.skeleton-line.short { width: 55%; }

/* Order status result card */
.status-result {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin-top: 20px;
  display: grid;
  gap: 8px;
}
.status-result p { margin: 0; }

/* Admin product/photo management */
.hidden { display: none !important; }
.admin-tabs { display: flex; gap: 10px; margin: 0 0 20px; flex-wrap: wrap; }
.notice-box {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff7d6;
  color: #6a5515;
  margin-bottom: 20px;
}
.admin-products-grid { display: grid; gap: 18px; }
.admin-product-card {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 20px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: white;
  box-shadow: 0 14px 42px rgba(78, 53, 35, .07);
}
.admin-product-image {
  min-height: 220px;
  border-radius: 22px;
  overflow: hidden;
  background: var(--cream);
  border: 1px solid var(--line);
}
.admin-product-image { --focus-y: 50%; }
.admin-product-image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--focus-y); }
.focus-row { display: flex; align-items: center; gap: 10px; }
.focus-row input[type="range"] { flex: 1; min-height: 0; padding: 0; accent-color: var(--rose); }
.focus-row small { opacity: .6; white-space: nowrap; }
/* The "no photo yet" placeholder is a drawing, not a photo — cropping it to
   fill would cut the label off. */
.admin-product-image img[src$="kein-foto.svg"],
.product-image img[src$="kein-foto.svg"],
.detail-image img[src$="kein-foto.svg"] { object-fit: contain; padding: 12%; }
.admin-product-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.admin-product-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.admin-product-fields small[data-message] { grid-column: 1 / -1; min-height: 18px; }
/* The photo file picker and the "which size is pictured" select belong
   together, so they share one row instead of leaving a half cell empty. */
/* Catalogue version list — one row per snapshot. */
.version-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
}
.version-row + .version-row { margin-top: 10px; }
.version-info { display: grid; gap: 2px; }
.version-info small { opacity: .7; font-size: 13px; }
.version-actions { display: flex; align-items: center; gap: 12px; }
.version-actions .btn.armed { background: #9b2d2d; border-color: #9b2d2d; color: #fff; }
@media (max-width: 620px) {
  .version-row { flex-direction: column; align-items: stretch; }
  .version-actions { justify-content: space-between; }
}
/* Tab icons — drawn in currentColor so they follow the active/inactive state
   of the button they sit in. They carry no meaning on their own; the label
   next to them still says what the tab is. */
.admin-tabs .filter { display: inline-flex; align-items: center; gap: 8px; }
.tab-ico { width: 17px; height: 17px; flex: none; opacity: .75; }
.admin-tabs .filter.active .tab-ico { opacity: 1; }

/* Creating a bouquet sits above the list, visually apart from the editors. */
.new-product-card {
  display: grid;
  gap: 10px;
  padding: 18px 20px;
  margin-bottom: 18px;
  border: 1px dashed #e3c9bb;
  border-radius: 22px;
  background: var(--card);
}
.new-product-row { display: grid; grid-template-columns: 2fr 1fr auto; gap: 14px; align-items: end; }
.new-product-row label { margin: 0; }
.new-product-row .btn { min-height: 46px; }
@media (max-width: 720px) { .new-product-row { grid-template-columns: 1fr; } }

/* Video row mirrors the photo row above it. */
.video-row { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; align-items: end; }
.video-row label { margin: 0; }
.video-side { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.video-side .btn { min-height: 40px; padding: 0 14px; font-size: 14px; }
.video-state { font-size: 13px; opacity: .7; white-space: nowrap; }
@media (max-width: 760px) { .video-row { grid-template-columns: 1fr; } }

/* "Visible in the shop" — a plain checkbox row, not a form field box. */
.admin-product-fields .check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}
.admin-product-fields .check-row input { width: 18px; height: 18px; }

/* ── Reel: full-screen swipe browsing, phones only ───────────────────────────
   The swiping itself is native scrolling with scroll-snap — no touch handlers,
   so it keeps the momentum and rubber-banding the phone already does well. */
.reel-open { display: none; }
@media (max-width: 620px) {
  .reel-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 50px;
    margin-bottom: 14px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(100deg, var(--rose), var(--rose-dark));
    color: #fff;
    font: inherit;
    font-weight: 900;
    font-size: 15px;
    cursor: pointer;
  }
  .reel-open svg { width: 19px; height: 19px; }
}
.reel {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: #0d0b0a;
}
.reel[hidden] { display: none; }
.reel-track {
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.reel-track::-webkit-scrollbar { display: none; }
.reel-slide {
  position: relative;
  height: 100vh;
  height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  /* Beim Halten fuer 2x soll nichts markiert werden und das lange Druecken
     auf ein Foto nicht die "Bild sichern"-Karte oeffnen. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.reel-slide img, .reel-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.reel-slide video { position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease; }
.reel-slide video.playing { opacity: 1; }
.reel-info {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 90px 20px calc(28px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(13, 11, 10, .82) 55%);
  color: #fff;
  display: grid;
  gap: 10px;
}
.reel-info h3 { margin: 0; font-size: 26px; line-height: 1.15; }
.reel-info .reel-price { font-size: 19px; font-weight: 900; }
.reel-info p { margin: 0; font-size: 14px; opacity: .85; }
.reel-actions { display: flex; gap: 10px; margin-top: 4px; }
.reel-actions .btn { flex: 1; min-height: 48px; }
.reel-actions .btn.ghost { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.35); }
.reel-close {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top));
  right: 14px;
  z-index: 2;
  width: 44px; height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(13, 11, 10, .5);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
/* A nudge on the first slide only, so it is clear the thing swipes. */
.reel-hint {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(200px + env(safe-area-inset-bottom));
  /* A pill, because plain white text disappeared over the pale bouquets. */
  padding: 7px 15px;
  border-radius: 999px;
  background: rgba(13, 11, 10, .55);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  animation: reelNudge 1.9s ease-in-out infinite;
}
@keyframes reelNudge { 0%,100% { transform: translate(-50%, 0); opacity: .75 } 50% { transform: translate(-50%, -7px); opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .reel-hint { animation: none } }
/* Kleines "2x", solange die linke Haelfte gehalten wird. */
.reel-speed {
  position: absolute;
  top: calc(64px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(13, 11, 10, .62);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .05em;
  pointer-events: none;
}
.reel-speed[hidden] { display: none; }

/* ── Dienstplan ────────────────────────────────────────────────────────────
   People down the side, the week across the top. The table scrolls inside its
   own box so seven columns never push the admin page sideways on a phone. */
.sch-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.sch-bar .btn { min-height: 40px; padding: 0 14px; }
.sch-week { font-size: 15px; white-space: nowrap; }
.sch-spacer { flex: 1 1 auto; }
.sch-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; }
.sch-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sch-table th, .sch-table td { padding: 8px 10px; text-align: left; }
.sch-table thead th, .sch-table tr:first-child th {
  position: sticky; top: 0; background: var(--cream);
  border-bottom: 1px solid var(--line); font-size: 13px;
}
.sch-table tr:first-child th span { display: block; font-weight: 900; }
.sch-table tr:first-child th small { opacity: .6; font-weight: 400; }
.sch-table tr + tr { border-top: 1px solid var(--line); }
.sch-name { white-space: nowrap; font-weight: 700; }
.sch-table input { min-height: 36px; min-width: 74px; padding: 0 8px; font-size: 14px; }
.sch-del {
  border: 0; background: transparent; cursor: pointer;
  color: #9b2d2d; font-size: 20px; line-height: 1; padding: 4px 8px;
}
/* Roster in view-only mode: no save, no add, no delete, inputs quiet. */
.sch-ro-note { display: none; margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.sch-readonly .sch-ro-note { display: block; }
.sch-readonly #schSave, .sch-readonly .sch-add, .sch-readonly .sch-del { display: none; }
.sch-readonly .sch-table input { border-color: transparent; background: transparent; }

/* ── Geraete ───────────────────────────────────────────────────────────────
   Eine Zeile pro Geraet mit der App. Auf dem Telefon scrollt die Tabelle
   seitwaerts, statt die Spalten unlesbar zu quetschen. */
.dev-bar { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; flex-wrap: wrap; }
.dev-bar .muted { font-size: 13px; }
.dev-warn {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff6e2;
  border: 1px solid #f0d9a6;
  color: #6b5326;
  font-size: 14px;
}
.dev-scroll { overflow-x: auto; }
/* Auf dem Telefon lieber seitwaerts scrollen als die Spalten so zu quetschen,
   dass "0.26.7 (44)" auf zwei Zeilen umbricht. */
.dev-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; }
.dev-table td:nth-child(2) { white-space: nowrap; }
.dev-table th, .dev-table td { padding: 10px 12px; text-align: left; vertical-align: middle; }
.dev-table tr + tr { border-top: 1px solid var(--line); }
.dev-table tr:first-child th { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.dev-name { font-weight: 600; white-space: nowrap; }
.dev-name small { display: block; font-weight: 400; font-size: 12px; opacity: .6; }
.dev-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; white-space: nowrap; }
.dev-on   { background: #e4f3e6; color: #2f6b39; }   /* alle 15 Min gemeldet   */
.dev-idle { background: var(--soft, #f0efe9); color: var(--muted); }
.dev-old  { background: #fbe6e6; color: #9b2d2d; }   /* laenger als einen Tag  */
.dev-badge-old {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff2cd;
  color: #7a5a15;
  font-size: 12px;
}
.dev-marks { white-space: nowrap; font-size: 16px; }
.dev-mark { margin-right: 4px; cursor: help; }
.dev-actions { text-align: right; }
.dev-actions .btn.armed { background: #9b2d2d; border-color: #9b2d2d; color: #fff; }

.sch-role { display: block; font-weight: 400; font-size: 12px; opacity: .6; }
.sch-table input.sch-lock { color: var(--muted); background: var(--soft); border-color: transparent; cursor: not-allowed; }

.sch-add { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.sch-add input { min-height: 42px; max-width: 240px; }

/* ── Stundensummen im Dienstplan ────────────────────────────────────────────
   Rechts die Woche je Person, unten der Tag je Spalte. Die Differenz steht
   klein unter der Summe: gruen, wenn jemand ueber dem Soll liegt, rot darunter,
   grau wenn kein Soll hinterlegt ist. */
.sch-soll { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-weight: 400; font-size: 12px; opacity: .75; }
.sch-soll input { min-height: 28px !important; min-width: 62px !important; width: 62px; padding: 0 6px !important; font-size: 12px !important; }
.sch-sum-head { text-align: right !important; }
.sch-sum { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sch-sum strong { display: block; font-size: 15px; }
.sch-diff { display: block; font-size: 12px; font-weight: 800; }
.sch-diff[data-sign="plus"]  { color: #2f6b3a; }
.sch-diff[data-sign="minus"] { color: #a3402c; }
.sch-diff[data-sign="zero"]  { color: var(--muted); }
.sch-diff[data-sign="none"]  { color: var(--muted); font-weight: 400; }
.sch-vac { display: block; font-size: 11px; font-weight: 700; color: #6a5aa0; }
.sch-foot th, .sch-foot td {
  border-top: 2px solid var(--line);
  background: var(--soft);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.sch-foot td { text-align: left; }
.sch-foot td.sch-sum { text-align: right; font-size: 15px; }

/* ── Blur-up ───────────────────────────────────────────────────────────────
   The placeholder sits under the real thumbnail, blurred and slightly scaled so
   its edges never show. The thumbnail starts transparent while it loads and
   fades in once decoded; the placeholder is then hidden behind it. */
.product-image img.lqip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(14px);
  transform: scale(1.08);
}
.product-image img:not(.lqip) {
  position: relative;
  transition: opacity .45s ease;
}
.product-image img.is-loading { opacity: 0; }

/* ── In-cart state of the add button ───────────────────────────────────────
   Once the bouquet is in the cart the same button removes it, so it steps
   back to an outline with a tick — a filled button would read as "add again". */
.btn.primary.is-in-cart,
.btn.primary.is-in-cart:hover {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--text);
  box-shadow: none;         /* the primary glow, or it reads as still "add" */
}
/* :hover is listed above on purpose: the theme's own .btn.primary:hover ties
   this rule on specificity and loads later, so without it the button turned
   sand again the moment the pointer rested on it — which after a click it does. */
.btn.primary.is-in-cart::before { content: "✓\00a0"; }   /* nbsp: a plain space here collapses */

/* ── VAT note and footer payment line ──────────────────────────────────────
   Small and muted: it has to be there, it does not have to shout. */
.vat-note { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.detail-panel .vat-note { margin: -6px 0 14px; }
.shop-tools .vat-note { margin: 0; order: 1; }
/* The strip under the footer — the last thing on every page. */
.site-payment {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 22px;
  padding: 14px clamp(16px, 3vw, 40px) 18px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}
.site-payment strong { color: var(--text); font-weight: 700; }
.site-payment .vat-note { margin: 0; font-size: 13px; }

/* Button row under the home-page bouquets — centred, clear of the grid. */
.section-actions-center { justify-content: center; flex-wrap: wrap; gap: 12px; margin: 30px 0 10px; }
.section-actions-center .btn { min-width: 220px; }

/* ── Crop point ────────────────────────────────────────────────────────────
   Cropping is centred by default, which cuts an upright photo equally top and
   bottom — the bottom is where the stems are, so that is what goes missing.
   A product can set --focus-y (0% = keep the top, 100% = keep the bottom) and
   every frame follows it: the card, the detail page, the swipe feed, and the
   clip that plays over each of them. */
.product-card, .detail-image, .reel-slide { --focus-y: 50%; }
.product-image img, .product-image video,
.detail-image img, .detail-image video,
.reel-slide img, .reel-slide video { object-position: 50% var(--focus-y); }

.photo-row { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; align-items: end; }
.photo-row label { margin: 0; }
@media (max-width: 760px) { .photo-row { grid-template-columns: 1fr; } }
/* The rose grid is 18 counts x 2 heights, so it scrolls inside its own box
   instead of stretching the card on a phone. */
.variant-price-grid > strong { display: block; margin-bottom: 8px; font-size: 14px; }
.variant-price-scroll { max-height: 340px; overflow: auto; border: 1px solid var(--line); border-radius: 14px; }
.variant-price-grid table { width: 100%; border-collapse: collapse; font-size: 14px; }
.variant-price-grid th, .variant-price-grid td { padding: 5px 8px; text-align: left; }
.variant-price-grid thead th {
  position: sticky;
  top: 0;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  z-index: 1;
}
.variant-price-grid tbody th { font-weight: 700; white-space: nowrap; }
.variant-price-grid tbody tr + tr { border-top: 1px solid var(--line); }
.variant-price-grid td label { margin: 0; }
.variant-price-grid input { min-height: 34px; padding: 0 8px; font-size: 14px; }
/* Delete sits apart from save/upload so it is never the button you reach for by
   habit, and turns solid red only once it is armed and one click from acting. */
.admin-product-actions .btn.danger {
  margin-left: auto;
  background: #fff;
  color: #9b2d2d;
  border: 1px solid #f2baba;
}
.admin-product-actions .btn.danger:hover { background: #ffe9e9; }
.admin-product-actions .btn.danger.armed {
  background: #9b2d2d;
  border-color: #9b2d2d;
  color: #fff;
}
@media (max-width: 760px) {
  .admin-product-actions .btn.danger { margin-left: 0; width: 100%; }
}
@media (max-width: 760px) {
  .admin-product-card { grid-template-columns: 1fr; }
  .admin-product-fields { grid-template-columns: 1fr; }
}


.admin-status {
  min-height: 20px;
  margin: -8px 0 18px;
  font-weight: 800;
  color: var(--muted);
}
.admin-status[data-type="success"] { color: #23633f; }
.admin-status[data-type="error"] { color: #b84366; }
.admin-status[data-type="warn"] { color: #8a6416; }


.delivery-zip-message {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  margin-top: -4px;
}

.delivery-zip-message[data-type="success"] {
  background: #eaf7ee;
  border-color: #b8dfc2;
  color: #255c37;
}

.delivery-zip-message[data-type="error"] {
  background: #ffe9e9;
  border-color: #f2baba;
  color: #9b2d2d;
}

.delivery-admin-card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: white;
  box-shadow: 0 14px 42px rgba(78, 53, 35, .07);
}

.delivery-admin-card textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.field-hint { display: block; font-weight: 400; color: #888; font-size: 12px; margin-bottom: 4px; }

/* Day headings + archive sections in the order lists */
.day-heading {
  margin: 22px 0 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--line);
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rose-dark);
}
.day-heading:first-child { margin-top: 0; }
.archive-section {
  margin: 28px 0 6px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 17px;
  font-weight: 900;
  color: var(--text);
}
.archive-section:first-child { margin-top: 0; }
#archiveList { display: block; }
#archiveList article { margin-bottom: 16px; }

/* Order card: big name + sum */
.order-head { align-items: flex-start; }
.order-title { min-width: 0; }
.order-name {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  line-height: 1.2;
}
.order-meta { margin-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.order-no { color: var(--muted); font-size: 13px; font-weight: 800; }
.order-sum {
  flex: none;
  font-size: 22px;
  font-weight: 950;
  color: var(--rose-dark);
  white-space: nowrap;
}

/* App order card with a large photo */
.app-card-main { display: flex; gap: 18px; align-items: flex-start; }
/* Fotos oben in der Detailansicht einer Website-Bestellung. */
.web-detail-photos { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.web-detail-photos img { height: 180px; max-width: 100%; border-radius: 14px; object-fit: cover; cursor: zoom-in; background: #faf7f3; }
.app-card-info { flex: 1; min-width: 0; }
.app-order-photo {
  /* Portrait, because the photos are: a phone shot squeezed into a square lost
     nearly half its height — 22% off the top and 22% off the bottom — and with
     a bouquet that is the stems and the wrapping gone. A 3:4 frame fits an
     upright phone photo exactly and takes a quarter off a tall 9:16 one.
     object-position is spelled out so a later rule cannot quietly shift the
     crop off centre. */
  width: 150px;
  aspect-ratio: 3 / 4;
  height: auto;
  flex: none;
  object-fit: cover;
  object-position: center;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--cream);
  cursor: pointer;
}
.app-order-photo.empty {
  display: grid;
  place-items: center;
  font-size: 40px;
  opacity: .45;
}
.app-card-when { margin: 0 0 6px; }
.app-card-desc { white-space: pre-wrap; margin: 6px 0; }

@media (max-width: 620px) {
  .app-card-main { flex-direction: column; }
  /* Full width, still 3:4. Capping the height here turned the frame landscape
     again and cropped a phone photo harder than the old square did. */
  .app-order-photo { width: 100%; height: auto; }
  .order-sum { font-size: 19px; }
}

/* Order source badge (internet vs. shop) */
.source-badge {
  display: inline-block;
  vertical-align: middle;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .02em;
  white-space: nowrap;
}
.source-badge.internet { background: #e7f0fb; color: #1d5192; border: 1px solid #c4dbf5; }
.source-badge.shop     { background: #eaf7ee; color: #255c37; border: 1px solid #b8dfc2; }
/* Loeschen steht ganz unten im Detailfenster, hinter dem ganzen Auftrag —
   nicht oben neben „Bearbeiten“, wo man aus Gewohnheit hinklickt. Wie im
   Katalog wird der Knopf erst beim zweiten Klick rot und handelt dann. */
.detail-danger {
  margin: 26px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line, #e6e2d8);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.detail-danger .btn.danger {
  background: #fff;
  color: #9b2d2d;
  border: 1px solid #f2baba;
}
.detail-danger .btn.danger:hover { background: #ffe9e9; }
.detail-danger .btn.danger.armed { background: #9b2d2d; border-color: #9b2d2d; color: #fff; }
.detail-danger .muted { font-size: 13px; }

.detail-badges { margin: 0 0 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.detail-badges:empty { display: none; }
.detail-badges .btn { min-height: 34px; padding: 0 14px; }
.edit-actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.modal-body .form-grid { margin-top: 10px; }

/* ── Bestell-Link: was die Kundin sieht ─────────────────────────────────────
   Ein Angebot, kein Katalogeintrag. Deshalb steht das Foto gross und der Preis
   daneben, und es gibt nichts zu klicken ausser dem Formular darunter. */
.offer-card {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 20px;
  margin-bottom: 22px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(78, 53, 35, .08);
}
.offer-card[hidden] { display: none; }
.offer-photos { display: grid; gap: 8px; align-content: start; }
.offer-photos img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 16px;
  background: #faf7f3;
}
.offer-photos img:nth-child(n+2) { aspect-ratio: 16 / 10; }
.offer-body { align-self: center; }
.offer-body h2 { margin: 4px 0 8px; }
.offer-note { margin: 0 0 12px; color: #6f6157; }
.offer-items { display: grid; gap: 6px; margin-bottom: 10px; }
.offer-line { display: flex; justify-content: space-between; gap: 12px; font-weight: 800; }
.offer-line span { color: #6f6157; font-weight: 700; }
/* Versandpreis zur gewaehlten Groesse auf der Seite des Strausses. */
.ship-note { margin: -4px 0 14px; color: #6f6157; font-size: 14px; font-weight: 600; }

.offer-dead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  padding: 18px;
  border: 1px solid #e8cfc2;
  border-radius: 18px;
  background: #fdf6f1;
}
.offer-dead[hidden] { display: none; }
.offer-dead strong { flex: 1 1 260px; }

@media (max-width: 720px) {
  .offer-card { grid-template-columns: 1fr; gap: 14px; padding: 14px; }
  .offer-photos img { aspect-ratio: 4 / 3; }
}

/* ── Trichter im Admin ─────────────────────────────────────────────────────
   Oben die Zahlen der ganzen Zeitspanne, darunter Tag fuer Tag. Der Anteil der
   Abspringer steht rot, weil genau er die Frage beantwortet, die dahintersteht. */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 0 0 16px; }
.stat-card {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.stat-card span { display: block; color: #8a7a6d; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.stat-card strong { display: block; margin-top: 4px; font-size: 22px; font-variant-numeric: tabular-nums; }
.stat-card[data-tone="warn"] strong { color: #a3402c; }
.stat-card[data-tone="good"] strong { color: #2f6b3a; }
.stat-codes { margin-top: 14px; }
.stat-codes li { font-variant-numeric: tabular-nums; }
#statTable td, #statTable th { font-variant-numeric: tabular-nums; }
#statTable .stat-lost { color: #a3402c; font-weight: 800; }

/* ── Bestell-Links im Admin ──────────────────────────────────────────────── */
.lnk-items { display: grid; gap: 10px; margin: 14px 0 10px; }
.lnk-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px 84px 84px 44px;
  gap: 8px;
  align-items: end;
}
.lnk-item label { gap: 5px; font-size: 12px; }
.lnk-item .lnk-drop { align-self: end; }
.lnk-total { margin-left: auto; font-size: 16px; }
.lnk-result { margin-top: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: #faf7f3; }
.lnk-result[hidden] { display: none; }
.lnk-url-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; }
.lnk-url-row input { flex: 1 1 260px; min-width: 0; font-size: 13px; }
.lnk-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 8px;
  background: #fff;
}
.lnk-row img { width: 46px; height: 46px; object-fit: cover; border-radius: 10px; }
.lnk-row .lnk-main { flex: 1 1 220px; min-width: 0; }
.lnk-row .lnk-main b { display: block; }
.lnk-row .lnk-main span { color: #8a7a6d; font-size: 12px; font-weight: 700; }
.lnk-state { padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.lnk-state[data-state="open"]      { background: #e4f0e4; color: #254832; }
.lnk-state[data-state="used"]      { background: #e7e2f3; color: #4a3d73; }
.lnk-state[data-state="expired"]   { background: #f3e7e2; color: #7a4a35; }
.lnk-state[data-state="cancelled"] { background: #eee; color: #777; }

@media (max-width: 760px) {
  .lnk-item { grid-template-columns: minmax(0, 1fr) 1fr; }
  .lnk-item .lnk-drop { grid-column: 1 / -1; }
}

/* Order detail modal */
.order-card { cursor: pointer; transition: box-shadow .15s ease, border-color .15s ease; }
.order-card:hover { border-color: #f2cbd8; box-shadow: 0 18px 44px rgba(78,53,35,.12); }

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(45, 36, 29, .55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
  backdrop-filter: blur(3px);
}
.modal {
  position: relative;
  width: min(720px, 100%);
  margin: auto;
  padding: 30px;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(45,36,29,.35);
}
.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: var(--soft);
  color: var(--rose-dark);
  font-size: 18px;
  cursor: pointer;
}
.detail-title { margin: 0 24px 14px 0; font-size: 26px; }
.modal-body h3 {
  margin: 22px 0 8px;
  font-size: 15px;
  font-family: Inter, system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--rose-dark);
}
.detail-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.detail-row span { color: var(--muted); }
.detail-row strong { text-align: right; word-break: break-word; }
.detail-total { font-size: 18px; color: var(--rose-dark); }
.detail-item {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.detail-desc { white-space: pre-wrap; margin: 0; font-size: 14px; line-height: 1.6; }
.detail-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.detail-photo-grid img {
  width: 100%;
  aspect-ratio: 3 / 4;      /* same reasoning as .app-order-photo above */
  object-fit: cover;
  object-position: center;
  border-radius: 14px;
  border: 1px solid var(--line);
  cursor: zoom-in;
  display: block;
}

/* Photo tiles: drag to reorder, first one is the preview */
.photo-tile { position: relative; margin: 0; }
.photo-tile[draggable="true"] { cursor: grab; }
.photo-tile.dragging { opacity: .4; }
.photo-tile.drop-target img { outline: 3px solid var(--rose); outline-offset: 2px; }
.photo-tile.is-first img { border-color: var(--rose); box-shadow: 0 0 0 2px var(--soft); }
.photo-badge {
  position: absolute;
  top: 8px; left: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--rose);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}
.photo-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.photo-actions .small-button { padding: 5px 9px; font-size: 12px; }
.small-button.danger { color: #9b2d2d; border-color: #f2baba; background: #ffe9e9; }
.photo-add { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.photo-add label { cursor: pointer; display: inline-flex; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(20, 15, 12, .9);
  display: grid;
  place-items: center;
  padding: 24px;
  cursor: zoom-out;
}
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 12px; }

@media (max-width: 620px) {
  .modal { padding: 22px 18px; border-radius: 22px; }
  .detail-row, .detail-item { flex-direction: column; gap: 2px; }
  .detail-row strong, .detail-item strong { text-align: left; }
}

/* Note on the legal pages when the shop is shown in English */
.legal-lang-note {
  max-width: 860px;
  margin: 0 auto 20px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--cream);
  color: var(--muted);
  font-size: 14px;
}

/* Language switch (shop header + admin) */
.lang-switch { display: inline-flex; gap: 4px; margin-left: auto; }

/* On a narrow phone the logo, the burger and the language switch did not fit
   into 390 px, which pushed the EN button off the right edge and made every
   page scroll sideways. Everything in the header shrinks, and the two buttons
   grow to a thumb-sized 44 px while they are at it. */
@media (max-width: 480px) {
  .site-header { gap: 10px; padding: 10px 14px; min-height: 64px; }
  .brand img { height: 46px; max-width: 148px; }
  .lang-switch { gap: 6px; }
  .lang-switch button { padding: 0 12px; min-height: 44px; font-size: 13px; }
  .nav-toggle { min-width: 44px; min-height: 44px; }
}

/* iOS Safari zooms the whole page when a field smaller than 16px gets focus,
   so every form jumped on the first tap. */
@media (max-width: 760px) {
  input, textarea, select { font-size: 16px; }
  .main-nav a { padding: 16px 18px; }
  /* Footer links were 21px tall — a thumb needs more than that. */
  .site-footer a { display: inline-block; padding: 10px 0; }
}

/* Without a mouse there is nothing to hover, so the play mark becomes the
   switch itself: a thumb-sized button that starts the clip and stops it again.
   Nothing is fetched before that tap — preload="none" still holds, and a clip
   is megabytes of mobile data. Under reduced motion the block above keeps both
   the clip and the button hidden, so this rule deliberately does not match. */
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  /* Oben rechts statt unten rechts: unten links sitzt schon die Groessen-
     plakette, und auf einem hohen Foto steht der Knopf so sofort im Bild,
     ohne dass man erst scrollen muss. */
  .video-hint {
    pointer-events: auto;
    width: 44px;
    height: 44px;
    top: 8px;
    bottom: auto;
    right: 8px;
    background: rgba(45, 36, 29, .62);
  }
  .video-hint::after { border-width: 7px 0 7px 11px; }
  .clip-on .video-hint::after { width: 14px; height: 16px; border-width: 0 4px; }
  .detail-image .video-hint { width: 56px; height: 56px; top: 12px; bottom: auto; right: 12px; }
  .detail-image .video-hint::after { border-width: 9px 0 9px 14px; }
  .detail-image.clip-on .video-hint::after { width: 18px; height: 20px; border-width: 0 5px; }
  /* Der Clip liegt ueber dem Foto; ein Tipp darauf soll weiter den Strauss
     oeffnen, nur der Knopf schaltet das Video. */
  .hover-video { pointer-events: none; }
}

.lang-switch button {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
}
.lang-switch button.active { background: var(--soft); color: var(--rose-dark); border-color: #f2cbd8; }

/* Shown while ordering is switched off (shop still being built) */
.shop-closed-banner {
  margin: 0 0 22px;
  padding: 16px 20px;
  border: 1px solid #f3dca6;
  border-radius: 20px;
  background: #fff7e6;
  color: #6b5a3a;
  font-weight: 800;
  text-align: center;
  line-height: 1.5;
}
.shop-closed-inline {
  margin: 14px 0 0;
  padding: 14px 16px;
  border: 1px solid #f3dca6;
  border-radius: 16px;
  background: #fff7e6;
  color: #6b5a3a;
  font-size: 14px;
  line-height: 1.5;
}

/* Notice shown while delivery is paused */
.pickup-notice {
  padding: 16px 18px;
  margin: 0 0 20px;
  border: 1px solid #f3dca6;
  border-radius: 18px;
  background: #fff7e6;
  color: #6b5a3a;
  font-size: 14px;
  line-height: 1.6;
}
.pickup-notice strong { display: block; color: #5a4520; margin-bottom: 2px; }

.soon-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--rose-dark);
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.legal-tabs { max-width: 860px; margin: 0 auto; }

.legal-nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  border-bottom: 2px solid #e8e8e8;
  margin-bottom: 32px;
}
.legal-tab {
  padding: 10px 20px;
  border-radius: 8px 8px 0 0;
  font-weight: 600;
  font-size: 14px;
  color: #555;
  text-decoration: none;
  border: 2px solid transparent;
  border-bottom: none;
  transition: .15s;
}
.legal-tab:hover { background: #f5f5f5; color: #254832; }
.legal-tab.active {
  background: #fff;
  color: #254832;
  border-color: #e8e8e8;
  border-bottom-color: #fff;
  margin-bottom: -2px;
}

.legal-content { display: none; }
.legal-content.active { display: block; }

.legal-content h2 { font-size: 1.5rem; margin-bottom: 8px; }
.legal-content h3 { font-size: 1rem; font-weight: 700; margin: 24px 0 6px; color: #254832; }
.legal-content p, .legal-content blockquote { font-size: 14px; line-height: 1.7; color: #444; margin-bottom: 10px; }
.legal-content blockquote {
  background: #f9f9f9;
  border-left: 3px solid #d4c5a0;
  padding: 16px 20px;
  border-radius: 0 8px 8px 0;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 13px;
}
.legal-content a { color: #254832; }

.site-version {
  text-align: center;
  padding: 8px;
  font-size: 11px;
  color: #aaa;
  background: #f8f8f8;
  letter-spacing: .04em;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero-slide { transition: opacity .2s ease; transform: none; }
}

/* Admin: app-order integration */
.app-order-badge{color:#2e7d32;font-weight:600;}
/* Woher die Kundin kam — unter den Positionen der Bestellkarte. */
.herkunft-line{color:var(--muted,#6b6b6b);font-size:.92rem;}
.herkunft-line strong{color:inherit;}
.app-order-title{display:flex;align-items:center;gap:10px;}
.app-order-thumb{width:56px;height:56px;object-fit:cover;border-radius:8px;flex:none;}
.app-order-photos{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0;}
.app-order-photos img{height:80px;border-radius:8px;object-fit:cover;}
.small-button.confirm{background:#2e7d32;color:#fff;border-color:#2e7d32;}

/* Payment gateway note at checkout */
.pay-note {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/* Shop filter + sort bar */
.shop-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 14px;
  margin: 22px 0 26px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--card);
  box-shadow: 0 10px 30px rgba(78, 53, 35, .05);
}
.shop-tools .tool { gap: 5px; font-size: 13px; }
.shop-tools select { min-width: 165px; padding: 10px 12px; }
.shop-tools .btn { min-height: 42px; padding: 0 18px; }
.filter-count {
  margin: 0 0 0 auto;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  align-self: center;
}
@media (max-width: 620px) {
  .shop-tools { flex-direction: column; align-items: stretch; }
  .shop-tools select, .shop-tools .btn { width: 100%; }
  .filter-count { margin: 4px 0 0; text-align: center; }
}

/* Admin: Sendungsnummer an die Kundin schicken */
.trk-form { display: grid; gap: 10px; margin: 8px 0 18px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; }
.trk-form label { gap: 5px; font-size: 13px; }
.trk-form input[type="file"] { padding: 10px; font-size: 13px; }
.trk-form .btn { justify-self: start; }
/* DHL-Label: Gewicht und Datum nebeneinander. */
.dhl-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.dhl-form [data-dhl-state]:not(:empty) { color: #b3261e; font-weight: 600; }

/* ── Beliebt-Karussell auf der Startseite ─────────────────────────────────── */
.pop { margin: 8px 0 48px; }
.pop[hidden] { display: none; }
.pop-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.pop-head h2 { margin: 4px 0 0; }
.pop-nav { display: flex; gap: 8px; }
.pop-arrow { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; }
.pop-arrow:hover { border-color: var(--ink); }
.pop-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, calc((100% - 3 * 16px) / 4));
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 2px;
  padding-bottom: 6px;
  scrollbar-width: thin;
}
.pop-card { scroll-snap-align: start; display: grid; gap: 6px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pop-img { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden; background: var(--cream); }
.pop-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--focus-y, 63%); display: block; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
@media (hover: hover) { .pop-card:hover .pop-img img { transform: scale(1.05); } }
.pop-badge { position: absolute; left: 10px; top: 10px; padding: 5px 10px; border-radius: 999px; background: rgba(29,30,31,.78); color: #fff; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.pop-name { font-size: 16px; }
.pop-price { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pop-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 14px; }
@media (max-width: 760px) {
  .pop-nav { display: none; }
  .pop-track { grid-auto-columns: 62%; gap: 12px; }
}

/* ── Naechste Termine auf der Produktseite ─────────────────────────────────── */
.next-days { margin: 4px 0 20px; display: grid; gap: 10px; min-width: 0; }
.nd-title { margin: 0; }
/* Abholung / Versand: zwei grosse Knoepfe, so breit wie das Band der Tage. */
.nd-tabs { display: grid; grid-template-columns: repeat(var(--nd-n, 2), minmax(0, 1fr)); gap: 8px; }
.nd-tabs button { display: grid; gap: 2px; place-content: center; padding: 8px 10px; min-height: 56px; border: 1px solid var(--line); border-radius: 12px; background: transparent; color: var(--text); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
.nd-tabs button:hover { border-color: var(--rose); }
.nd-tabs button b { font-weight: 600; }
.nd-tabs button small { font-size: 12px; color: var(--muted); font-weight: 400; }
.nd-tabs button[aria-selected="true"] { border-color: var(--rose); box-shadow: inset 0 0 0 1px var(--rose); background: rgba(203, 189, 147, .22); }
.nd-track { display: grid; grid-auto-flow: column; grid-auto-columns: 62px; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 4px; scrollbar-width: thin; }
.nd-day { scroll-snap-align: start; display: grid; justify-items: center; gap: 1px; padding: 9px 4px; border: 1px solid var(--line); border-radius: 12px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.nd-day:hover { border-color: var(--rose); }
.nd-day.on { border-color: var(--rose); box-shadow: inset 0 0 0 1px var(--rose); background: rgba(203, 189, 147, .22); }
.nd-wd { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.nd-d { font-size: 20px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
.nd-m { font-size: 11px; color: var(--muted); white-space: nowrap; }
.nd-note { margin: 0; font-size: 13px; color: var(--muted); }

/* ── Kasse in drei Schritten ──────────────────────────────────────────────── */
#checkoutForm[data-cur="1"] [data-step]:not([data-step~="1"]),
#checkoutForm[data-cur="2"] [data-step]:not([data-step~="2"]),
#checkoutForm[data-cur="3"] [data-step]:not([data-step~="3"]) { display: none !important; }
.co-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 18px; padding: 0; counter-reset: none; }
.co-steps button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; border-bottom: 2px solid var(--line); background: transparent; color: var(--muted); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.co-steps button:disabled { cursor: default; }
.co-steps .co-num { flex: 0 0 auto; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); font-size: 13px; font-variant-numeric: tabular-nums; }
.co-steps button.on { color: var(--text); border-bottom-color: var(--rose); }
.co-steps button.on .co-num { background: var(--rose); border-color: var(--rose); color: var(--text); }
.co-steps button.done { color: var(--text); border-bottom-color: var(--rose); }
.co-steps button.done .co-num { border-color: var(--rose); }
.co-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; }
.co-nav .btn { min-width: 140px; }
.co-nav [data-step-back][hidden] { display: none; }
.co-nav [data-step-next] { margin-left: auto; }
.co-recap { display: grid; gap: 18px; }
.co-recap > .btn { justify-self: start; }
.co-rblock { display: grid; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.co-rhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.co-rhead h2 { margin: 0; font-size: 22px; }
.co-rrow { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; font-size: 15px; }
.co-rrow span { color: var(--muted); }
.co-rrow strong { font-weight: 500; overflow-wrap: anywhere; }
.link-btn { border: 0; background: none; padding: 0; color: var(--rose-dark); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; }
@media (max-width: 560px) {
  .co-steps button { flex-direction: column; gap: 4px; padding: 8px 4px; font-size: 13px; text-align: center; }
  .co-nav .btn { min-width: 0; flex: 1; }
  .co-rrow { grid-template-columns: 1fr; gap: 0; }
}

/* Produktseite: Beschreibung unter den Knoepfen, ruhig abgesetzt */
.detail-about { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.detail-about p { margin: 0 0 8px; }

/* Kasse: Fehler direkt am Feld */
#checkoutForm .is-invalid { border-color: #b3261e !important; box-shadow: inset 0 0 0 1px #b3261e; }
#checkoutForm .payment-list.is-invalid { box-shadow: none; outline: 1px solid #b3261e; outline-offset: 4px; border-radius: 4px; }
#checkoutForm .terms input.is-invalid { outline: 2px solid #b3261e; outline-offset: 2px; }
#checkoutForm .field-err { display: block; margin-top: 4px; color: #b3261e; font-size: 12.5px; font-weight: 500; line-height: 1.35; }
/* Zeichenzaehler unter dem Grusskarten-Text; rot, sobald es zu viele sind. */
#checkoutForm .gift-count { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted, #6b6b6b); text-align: right; }
#checkoutForm .gift-count.over { color: #b3261e; font-weight: 600; }
#checkoutForm .field-err { margin-bottom: 6px; }
/* Beschriftungen gleich hoch, damit Felder nebeneinander auf einer Linie stehen (eine hat ein "i") */
#checkoutForm .form-grid > label > span:first-child { min-height: 22px; display: flex; align-items: center; }

/* Beliebt-Band im Katalog: etwas kompakter, der Katalog folgt darunter */
.pop-shop { margin: 6px 0 28px; }
.pop-shop .pop-head h2 { font-size: clamp(22px, 2.6vw, 30px); }

/* Termin-Knoepfe: Name, Preis, Hinweis — der Text bricht um statt abzuschneiden */
.nd-tabs button { min-width: 0; }
.nd-tabs button .nd-price { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--rose-dark); }
.nd-tabs button .nd-price:empty { display: none; }
.nd-tabs button small { white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
/* Video im Beliebt-Band */
.pop-img .hover-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--focus-y, 63%); }

/* Produktseite: Hauptfoto und bis zu vier weitere — Miniaturen darunter,
   Pfeile im Bild (am Rechner), Wischen (am Telefon). */
.detail-media { display: grid; gap: 12px; align-content: start; min-width: 0; }
.detail-thumbs { display: flex; gap: 10px; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.detail-thumbs::-webkit-scrollbar { display: none; }
.detail-thumb {
  flex: 0 0 auto; width: 76px; aspect-ratio: 1 / 1; padding: 0;
  border: 2px solid transparent; border-radius: 14px; overflow: hidden;
  background: var(--cream, #f6efe6); cursor: pointer; opacity: .75;
  transition: opacity .15s, border-color .15s;
}
.detail-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.detail-thumb:hover { opacity: 1; }
.detail-thumb[aria-current="true"] { border-color: var(--rose-dark, #b23a5c); opacity: 1; }
.detail-thumb:focus-visible { outline: 2px solid var(--rose-dark, #b23a5c); outline-offset: 2px; }
.gal-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .9); color: #2b2024; font-size: 28px; line-height: 1;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .15); cursor: pointer; opacity: 0; transition: opacity .2s;
}
.gal-prev { left: 14px; }
.gal-next { right: 14px; }
.detail-image:hover .gal-arrow, .gal-arrow:focus-visible { opacity: 1; }
@media (hover: none) { .gal-arrow { opacity: .85; width: 36px; height: 36px; font-size: 24px; } }
/* Weitere Fotos: kein Video darueber, kein Groessenhinweis. */
.detail-image.gal-alt .hover-video, .detail-image.gal-alt .video-hint { display: none; }
@media (max-width: 560px) { .detail-thumb { width: 62px; border-radius: 12px; } }

/* Admin: weitere Fotos als kleine Kacheln mit Knoepfen darunter. */
.gallery-row { display: grid; gap: 10px; }
.gallery-row > strong { font-size: 14px; }
.gal-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.gal-item { margin: 0; display: grid; gap: 6px; }
.gal-item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); }
.gal-item figcaption { display: flex; gap: 4px; flex-wrap: wrap; }
.gal-btn { min-height: 30px; padding: 2px 9px; border: 1px solid var(--line); border-radius: 999px; background: white; font: inherit; font-size: 12px; cursor: pointer; }
.gal-btn:disabled { opacity: .35; cursor: default; }
.gal-btn.gal-del { color: #a3283c; margin-left: auto; }
.gal-add { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.gal-add input[type=file] { flex: 1 1 220px; }
.gal-list { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.gal-item figcaption { gap: 6px; }
.gal-btn { min-width: 30px; }
.gal-btn[data-gal-act="makeMain"] { order: 5; flex-basis: 100%; }

/* Weihnachten & Neujahr: eigener Bereich auf der Shop-Seite — eigene Ueberschrift,
   ohne Beliebt-Band, Reel und die Blumen-Filter Anlass/Farbe. */
#shop:not(.kat-neujahr) .nj-title,
#shop.kat-neujahr .shop-title,
#shop.kat-neujahr .pop-shop,
#shop.kat-neujahr .reel-open,
#shop.kat-neujahr .tool:has(#fOccasion),
#shop.kat-neujahr .tool:has(#fColor) { display: none; }

/* Kraenze: das ganze Foto in voller Hoehe, nichts abgeschnitten. Karte und
   Produktseite verlieren den quadratischen Rahmen; die Hoehe richtet sich nach
   dem Foto. */
.product-card.foto-ganz .product-image { aspect-ratio: auto; }
.product-card.foto-ganz .product-image img:not(.lqip) { display: block; width: 100%; height: auto; object-fit: contain; }
.product-card.foto-ganz .product-image img.lqip { object-fit: cover; }
#shop.kat-neujahr .product-grid { align-items: start; }
.detail-image.foto-ganz { aspect-ratio: auto; display: flex; justify-content: center; background: var(--cream); }
.detail-image.foto-ganz img { width: auto; max-width: 100%; height: auto; max-height: 88vh; object-fit: contain; }

/* Hinweis: Foto kann leicht abweichen (Produktseite) */
.detail-panel .photo-diff{margin:14px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}

/* Alle Bestellungen: Liste + Kalender */
.all-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 16px}
.view-switch{display:flex;gap:8px}
.chan-badge{display:inline-block;padding:1px 8px;margin-right:6px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--line);color:var(--rose-dark);background:var(--soft)}
.chan-badge.app{color:#2f5d8a;border-color:rgba(47,93,138,.35);background:rgba(47,93,138,.08)}
#allCal.hidden{display:none}
.cal-head{display:flex;align-items:center;gap:10px;margin:0 0 12px;flex-wrap:wrap}
.cal-title{min-width:150px;text-align:center;font-size:17px;text-transform:capitalize}
.cal-legend{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;margin:0 0 12px;font-size:13px}
.cal-legend .dot{display:inline-block;width:12px;height:12px;margin-right:6px;vertical-align:-1px;border:1px solid transparent}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal-wd{padding:4px 0;text-align:center;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cal-cell{min-height:78px;padding:6px 8px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;font:inherit;text-align:left;color:var(--text);background:transparent;border:1px solid var(--line);cursor:pointer}
.cal-cell.blank{border:0;cursor:default}
.cal-num{font-size:13px;color:var(--muted)}
.cal-count{font-size:22px;line-height:1.1}
.cal-sub{font-size:12px;font-weight:700}
.cal-cell.ok,.dot.ok{background:#d8efdd;border-color:#3f9b5c}
.cal-cell.part,.dot.part{background:#faecc0;border-color:#d39b17}
.cal-cell.todo,.dot.todo{background:#f6d4cf;border-color:#cc4b3d}
.cal-cell.today .cal-num{color:var(--text);font-weight:900;text-decoration:underline}
.cal-cell.sel{outline:2px solid var(--text);outline-offset:1px}
.cal-cell:focus-visible{outline:2px solid var(--text);outline-offset:1px}
.cal-day{margin-top:22px}
.cal-sum{margin:0 0 12px;padding:8px 12px;font-weight:700;border-left:4px solid var(--line);background:var(--soft)}
.cal-sum.ok{border-left-color:#3f9b5c;background:#d8efdd}
.cal-sum.part{border-left-color:#d39b17;background:#faecc0}
.cal-sum.todo{border-left-color:#cc4b3d;background:#f6d4cf}
@media (max-width:620px){.cal-grid{gap:3px}.cal-cell{min-height:60px;padding:4px}.cal-count{font-size:17px}.cal-sub{font-size:10px}}
.twin-line{margin:6px 0 0;font-size:13px;color:var(--muted)}
.photo-note{margin:4px 0;font-size:13px;color:var(--muted)}
.photo-note.diff{color:#9a3b12;font-weight:700}

/* Karriere im Admin */
.job-toggles{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center}
.job-toggle{display:inline-flex;align-items:center;gap:8px;font-weight:700;cursor:pointer}
.job-toggle input{width:18px;height:18px}
.job-state.on{color:#2d6a3f;font-weight:700}
.job-state.off{color:var(--muted)}