/* ============================================================================
   BlumenBund — editorial theme
   ----------------------------------------------------------------------------
   Loaded after styles.css, which keeps all the layout and behaviour. This file
   only changes the look: bone paper instead of warm cream, near-black type
   instead of brown, flush edges instead of rounded cards, and a single quiet
   sand accent instead of the rose.

   Everything here is an override on purpose. The structural stylesheet stays
   untouched so the shop, the cart, the checkout and the admin keep working,
   and switching the theme off is one <link> away.
   ========================================================================= */

:root {
  --bg:        #f1f1eb;   /* bone paper */
  --card:      #f1f1eb;   /* surfaces sit on the page, they are not cards */
  --text:      #1d1e1f;   /* near black, warmer and softer than #000 */
  --muted:     rgba(29, 30, 31, .58);
  --line:      rgba(29, 30, 31, .14);
  --soft:      rgba(29, 30, 31, .05);
  /* Two jobs, two values. The structural stylesheet paints buttons with --rose
     and roughly twenty pieces of text with --rose-dark: eyebrows, "more" links,
     totals, the active language. Sand is right for a fill and unreadable as
     type — on this background it measures 1.65:1 — so --rose-dark is the deep
     bronze the text needs (5.6:1, comfortably past AA) and the button keeps its
     own hover shade below. */
  --rose:      #cbbd93;   /* sand — fills */
  --rose-dark: #6b5f39;   /* bronze — text */
  --sand-deep: #b4a679;   /* sand, one step down — button hover */
  --green:     #5c6350;
  --cream:     #e7e7df;
  --shadow:    none;
  --radius:    0px;
  --ink:       #1d1e1f;
  --display:   "Jost", ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--display);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/* ── Flatten ───────────────────────────────────────────────────────────────
   The old look leaned on 28px corners and deep shadows. Rather than hunt down
   sixty-nine declarations, the surfaces that carried it are reset here and the
   few places that still want a radius ask for it again further down. */
.product-card, .detail-image, .detail-panel, .site-footer, .login-card,
.notice-box, .cart-item, .method-card, .size-options label, .payment-list label,
.admin-panel, .admin-product-card, .delivery-admin-card, .order-card,
.version-row, .new-product-card, .shop-tools, .hero, .hero-art, .step,
.product-image, .admin-product-image, .variant-price-scroll, .empty {
  border-radius: 0;
  box-shadow: none;
}
.product-card { border: 0; background: transparent; }
.shop-tools, .notice-box, .site-footer { background: transparent; }

/* ── Type ──────────────────────────────────────────────────────────────────
   Display sizes are light and set tight; body copy stays comfortable. The old
   Georgia headings are replaced everywhere, including the ones set inline. */
h1, h2, h3, h4, .brand, .hero h1, .page > header h1, .detail-panel h1 {
  font-family: var(--display) !important;
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.08;
}
h1 { font-size: clamp(28px, 3.2vw, 44px); }   /* page titles; the hero sets its own */
h2 { font-size: clamp(28px, 3.4vw, 42px); }
h3 { font-size: 17px; font-weight: 400; letter-spacing: 0; }
p, li, label, input, select, textarea, button { letter-spacing: 0; }
.eyebrow, .badge, .photo-size-badge, .site-version {
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 11px;
  font-weight: 500;
}

/* ── Header ────────────────────────────────────────────────────────────────
   Burger on the left, wordmark centred, cart and language on the right — at
   every width, not just on phones. The order is set here rather than in the
   markup so the document still reads brand-first for a screen reader. */
.site-header {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  backdrop-filter: none;
  min-height: 68px;
  padding: 12px clamp(16px, 3vw, 40px);
  gap: 12px;
}
.nav-toggle {
  display: flex !important;
  align-items: center;
  justify-content: center;
  order: 1;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 17px;
}
/* Centred on the header, not on what is left over. `margin: 0 auto` on a flex
   item splits the free space, so the logo sat half the difference between the
   burger and the language switch off centre — a constant 9px at every width.
   Taking it out of the flow centres it on the page itself. */
/* Das Logo stand absolut zentriert. Zentriert war es damit zwar, aber auch
   aus dem Fluss genommen — nichts konnte es wegdrücken, und auf schmalen
   Telefonen lag DE/EN darunter (bei 320 px 42 px Überlappung, bei 360 px 22).
   Jetzt tragen zwei gleich breite Hüllen die Seiten: `flex: 1 1 0` macht sie
   exakt gleich groß, also steht das Logo mittig und berührt nichts. */
.header-side {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1 1 0;
  min-width: 0;
  order: 0;
}
.header-side.header-right { justify-content: flex-end; }
/* Innerhalb der linken Huelle: erst das Menue, dann die Sprache. `.nav-toggle`
   traegt noch order:1 aus der Zeit, als alles direkt im Kopf lag — damit
   waere DE/EN vor den drei Strichen gelandet. */
.header-side .nav-toggle { order: 0; }
.header-side .lang-switch { order: 1; }
.brand {
  order: 0;
  position: static;
  transform: none;
  flex: 0 0 auto;
  margin: 0;
}
.brand img { height: 30px; max-width: 180px; }
.cart-link { margin: 0; font-size: 13px; letter-spacing: .04em; }
.lang-switch { margin-left: 0; gap: 2px; }
.lang-switch button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .1em;
  padding: 8px 6px;
  min-height: 40px;
}
.lang-switch button.active { background: transparent; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
/* Straeusse / Zimmerpflanzen neben der Sprache, in derselben Schrift. */
.head-links { display: flex; align-items: center; gap: 6px; margin-left: 28px; order: 2; flex: 1 1 auto; min-width: 0; }
.head-links a {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 8px 6px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.head-links a:hover { color: var(--ink); }
.head-links a.active { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
/* "Straeusse" klappt beim Zeigen auf: alle oder nur die Rosen. */
.head-menu { position: relative; display: flex; align-items: center; }
.head-menu > a::after { content: "▾"; margin-left: 5px; font-size: 10px; }
.head-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  gap: 10px;
  padding: 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  z-index: 60;
}
.head-dropdown-links { display: flex; flex-direction: column; min-width: 160px; }
.head-dropdown-pic {
  width: 150px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 10px;
  background: var(--cream);
}
.head-dropdown-pic img { width: 100%; height: 100%; object-fit: cover; transition: opacity .18s ease; }
.head-dropdown-pic img.is-switching { opacity: .4; }
.head-menu:hover .head-dropdown, .head-menu:focus-within .head-dropdown { display: flex; }
.head-dropdown a {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 14px;
  padding: 9px 12px;
  min-height: 0;
  color: var(--ink);
}
.head-dropdown a:hover { background: var(--soft); }
.head-dropdown a.active { font-weight: 600; text-decoration: none; }
/* Im Menue auf dem Telefon: "Rosen" eingerueckt unter "Shop". */
.main-nav a.nav-sub { padding-left: 40px; font-size: 92%; }
.main-nav a.nav-sub svg { width: 17px; height: 17px; }
/* Suche: eine Zeile mit Lupe, ohne Rahmen — nur ein Strich darunter. */
/* Das Suchfeld steht rechts vom Logo, vor den Favoriten — auf breiten
   Schirmen lang, auf 1280 so kurz wie noetig. */
.head-search { display: flex; align-items: center; gap: 6px; margin: 0 14px 0 0; flex: 0 1 240px; min-width: 110px; border-bottom: 1px solid var(--line); }
.head-search:focus-within { border-bottom-color: var(--ink); }
.head-search svg { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; flex: 0 0 auto; }
.head-search input {
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 7px 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
}
.head-search input::placeholder { color: var(--muted); letter-spacing: .04em; }
.head-search input:focus { outline: none; border: 0; }
.head-search input::-webkit-search-cancel-button { cursor: pointer; }
@media (max-width: 1200px) { .head-search { display: none; } }
@media (max-width: 900px) { .head-links { display: none; } }
/* Weihnachten & Neujahr: sieht aus wie die anderen Punkte (Schrift, Abstand,
   Unterstreichung), dazu eine Schneeflocke, die sich langsam dreht. Beim
   Zeigen dreht sie schneller und ueber dem Wort faellt Schnee. Ohne Bewegung
   (prefers-reduced-motion) bleibt nur die ruhende Flocke. */
.head-links a.nj-link { position: relative; gap: 6px; }
.head-links a.nj-link[hidden] { display: none; }
.nj-link .nj-flake { flex: 0 0 auto; fill: none; stroke: #5b9bd5; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nj-snow { position: absolute; left: 0; right: 0; top: 4px; height: 0; pointer-events: none; }
.nj-snow b { position: absolute; top: 0; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(110, 160, 215, .8); opacity: 0; }
.nj-snow b:nth-child(1) { left: 6%; }
.nj-snow b:nth-child(2) { left: 24%; width: 3px; height: 3px; }
.nj-snow b:nth-child(3) { left: 42%; }
.nj-snow b:nth-child(4) { left: 58%; width: 3px; height: 3px; }
.nj-snow b:nth-child(5) { left: 76%; }
.nj-snow b:nth-child(6) { left: 92%; width: 3px; height: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .nj-link .nj-flake { animation: nj-spin 9s linear infinite; }
  .nj-link:hover .nj-flake, .nj-link:focus-visible .nj-flake { animation-duration: 1.6s; }
  .nj-link:hover .nj-snow b, .nj-link:focus-visible .nj-snow b { animation: nj-fall 1.3s linear infinite; }
  .nj-snow b:nth-child(2) { animation-delay: .35s !important; }
  .nj-snow b:nth-child(3) { animation-delay: .7s !important; }
  .nj-snow b:nth-child(4) { animation-delay: .15s !important; }
  .nj-snow b:nth-child(5) { animation-delay: .9s !important; }
  .nj-snow b:nth-child(6) { animation-delay: .5s !important; }
}
@keyframes nj-spin { to { transform: rotate(360deg); } }
@keyframes nj-fall { 0% { transform: translate(0, -2px); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(5px, 38px); opacity: 0; } }
/* Platz im Kopf: unter 1350 px steht der Punkt nur im Menue (Hamburger). */
@media (max-width: 1349px) { .head-links > a[data-section-nav="neujahr"] { display: none; } }
/* The horizontal nav is replaced by a drawer that slides in from the left, at
   every width. The structural stylesheet only lays the drawer out inside its
   own phone media query, so on a desktop the opened menu used to be a 0x0 box:
   invisible, uncloseable — the backdrop that closes it did not exist — and the
   scroll lock it takes was never released. Everything it needs lives here.

   Kept as display:flex with pointer-events:none when closed, so the slide and
   the backdrop fade can actually animate. */
.main-nav {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 300;
  justify-content: flex-start;   /* the drawer hangs on the LEFT */
  align-items: stretch;
  background: rgba(29, 30, 31, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  flex: none;
  order: unset;
  width: auto;
  height: auto;
  overflow: visible;
}
.main-nav.open { opacity: 1; pointer-events: auto; }
.nav-drawer {
  position: relative;            /* anchors the ✕, which is absolute */
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: min(340px, 84vw);
  min-width: 0;
  height: 100%;
  padding: 64px 22px 28px;
  background: var(--bg);
  border-right: 1px solid var(--line);
  box-shadow: none;
  transform: translateX(-100%);
  transition: transform .28s cubic-bezier(.2, .7, .3, 1);
}
.main-nav.open .nav-drawer { transform: none; }
.main-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 17px;
  padding: 14px 16px;
  border-radius: 0;
}
.main-nav a svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); }
.main-nav a.active svg, .main-nav a:hover svg { color: inherit; }
.main-nav a.active, .main-nav a:hover { background: var(--soft); color: var(--ink); }
.nav-close {
  position: absolute;
  top: 12px;
  right: 12px;
  left: auto;
  /* display is set here because the structural stylesheet only makes this
     button visible inside its phone media query — above 620px it stayed
     hidden, leaving the drawer with no ✕. */
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: var(--soft);
  color: var(--ink);
  font-size: 18px;
  cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  .main-nav, .nav-drawer { transition: none; }
}

/* ── Buttons ───────────────────────────────────────────────────────────────
   One quiet pill in sand, and a plain outline for everything secondary. */
.btn {
  border-radius: 999px;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .02em;
  min-height: 46px;
  padding: 0 26px;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { transform: none; }
/* The structural stylesheet gives the primary button a rose glow. Under a sand
   button on bone paper it read as a pink smear — the one shadow the flattening
   above had missed. */
.btn, .btn.primary { box-shadow: none; }
.btn.primary { background: var(--rose); color: var(--ink); border: 1px solid var(--rose); }
.btn.primary:hover { background: var(--sand-deep); border-color: var(--sand-deep); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn.ghost:hover { border-color: var(--ink); }

/* ── Hero ──────────────────────────────────────────────────────────────────
   Edge to edge, the headline centred over the photograph. */
.hero {
  position: relative;
  display: block;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 0;
  border: 0;
  background: var(--ink);
  overflow: hidden;
}
.hero-art, .hero-slides { min-height: 0; }
.hero-slides, .hero-art { position: absolute; inset: 0; margin: 0; }
.hero-slides img, .hero-art img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Our photographs are busy close-ups, not the calm interiors this layout
     was borrowed from, so the scrim has to work much harder. A vignette plus
     a centre wash keeps the headline readable on every slide. */
  background:
    radial-gradient(120% 85% at 50% 45%, rgba(29,30,31,.62) 0%, rgba(29,30,31,.30) 55%, rgba(29,30,31,.42) 100%),
    linear-gradient(180deg, rgba(29,30,31,.45), rgba(29,30,31,.20) 40%, rgba(29,30,31,.55));
}
.hero-copy {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 22px;
  text-align: center;
  min-height: min(76vh, 660px);
  padding: 90px 24px;
  color: #fff;
}
.hero-copy .eyebrow { color: rgba(255,255,255,.82); }
.hero-copy h1 { color: #fff; font-size: clamp(32px, 4.6vw, 56px); font-weight: 300; max-width: 16ch; }
.hero-copy p { color: rgba(255,255,255,.9); max-width: 52ch; font-size: 15px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
/* Over a photograph the outline button has to be light — the page-level ghost
   is near-black and simply disappeared here. */
.hero-actions .btn.ghost { color: #fff; border-color: rgba(255,255,255,.6); background: transparent; }
.hero-actions .btn.ghost:hover { border-color: #fff; background: rgba(255,255,255,.12); }
.hero-copy h1, .hero-copy .lead { text-shadow: 0 1px 24px rgba(29,30,31,.45); }
.hero-dots { position: absolute; bottom: 78px; left: 0; right: 0; z-index: 3; justify-content: center; }

/* ── Sections ──────────────────────────────────────────────────────────────
   Quiet headings, left aligned, and not so tall that the goods are pushed off
   the first screen. On a phone the catalogue used to start 656 px down, which
   is the whole viewport before a single bouquet. */
.page > header, .section-head {
  max-width: none;
  text-align: left;
  margin: 0 0 18px;
}
.page { padding-top: 0; }
/* Breiter als vorher: der Rand links und rechts ist nur noch halb so gross,
   das Raster mit drei Karten bekommt den Platz. (Wunsch des Inhabers,
   08.10.2026.) Die halbe Breite plus 605px ist genau die Mitte zwischen den
   alten 1210px und der vollen Breite. Was Text zum Lesen ist — Kasse, Korb,
   Rechtliches — bleibt bei den alten 1210px, sonst werden die Zeilen zu lang. */
main { width: min(calc(50% + 605px), calc(100% - 32px)); }
main > .page:not(#home):not(#shop):not(#pflanzen):not(#favoriten) { max-width: 1210px; margin-inline: auto; }
.page-title { margin-bottom: 14px; }
.page-title .eyebrow { margin-bottom: 4px; }
.page-title h1 { margin: 0 0 6px; }
.page-title p { margin: 0; font-size: 14px; color: var(--muted); max-width: 62ch; }
.wrap, main > section { --gutter: clamp(16px, 3vw, 40px); }

/* ── Occasion tiles ────────────────────────────────────────────────────────
   The emoji stickers are off — a cake, a ring and a party popper sat oddly
   beside photographs of real bouquets. The tiles keep working as links; they
   are simply set as type now. The markup still holds the icons, so bringing
   them back is deleting the first rule. */
.occasion-tile span { display: none; }
.occasion-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  transition: border-color .18s ease, color .18s ease;
}
.occasion-tile:hover { border-color: var(--ink); transform: none; box-shadow: none; }
.occasion-tile b { font-weight: 400; font-size: 14px; letter-spacing: .02em; }

/* ── Product grid ──────────────────────────────────────────────────────────
   Four across, softly rounded, with the name and price set small underneath.
   No card, no border — the photograph carries the row on its own. */
.product-grid, #productGrid, #featuredGrid {
  gap: 26px 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.product-card { transition: opacity .25s ease; }
.product-card:hover { transform: none; box-shadow: none; opacity: .92; }
.product-image {
  /* Quadratisch. Die Fotos sind hochkant; was wegfaellt, geht groesstenteils
     oben weg (Himmel, Wand) und nur wenig unten — siehe kadrierung() in
     app.js, das je Foto die genaue Position setzt. Bis dahin ein Mittelwert. */
  aspect-ratio: 1 / 1;
  background: var(--cream);
  border-radius: 14px;
  overflow: hidden;         /* so the photo and the clip follow the corners */
}
/* Bis kadrierung() das Bild vermessen hat: der Wert fuer ein 9:16-Foto, das
   sind die meisten. --focus-y wird in styles.css auf die Bilder gelegt. */
.product-card, .detail-image { --focus-y: 63%; }

.product-body { padding: 12px 2px 0; }
.product-card h3 { font-size: 14px; font-weight: 400; letter-spacing: .01em; margin: 0 0 4px; }
.price-row { align-items: baseline; }
.price { font-size: 14px; font-weight: 400; color: var(--muted); }
/* The mood labels — Romantik, Festlich and the rest — are off. They sat on
   the photograph and said little the picture did not already say. The markup
   keeps them, so switching them back on is this one rule. */
.product-image .badge { display: none; }
.photo-size-badge { border-radius: 999px; background: rgba(29,30,31,.55); }
.add-mini {
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
}
.add-mini:hover { border-color: var(--ink); background: transparent; }

/* Leere Meldung im Raster ("noch nichts gemerkt", "keine Straeusse"): ueber
   alle Spalten, mittig — sonst sass sie als schmaler Kasten in der ersten Zelle. */
.product-grid > .empty { grid-column: 1 / -1; max-width: 520px; width: 100%; margin: 8px auto 0; text-align: center; }

/* ── Favoriten: das Herz ─────────────────────────────────────────────────── */
.fav-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .86);
  color: var(--ink);
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: transform .18s ease, background .18s ease;
}
.fav-btn svg { width: 20px; height: 20px; fill: transparent; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; transition: fill .18s ease, stroke .18s ease; }
.fav-btn:hover { transform: scale(1.08); }
.fav-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.fav-btn.is-fav svg { fill: #c8323f; stroke: #c8323f; }
/* Auf der Detailseite steht das Herz neben dem Titel, mit Wort. */
.detail-title { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.detail-title h1 { margin: 0; min-width: 0; }
.fav-btn.fav-btn-text {
  position: static;
  width: auto;
  height: 40px;
  padding: 0 16px 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: transparent;
  backdrop-filter: none;
  font: inherit;
  font-size: 13px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.fav-btn.fav-btn-text:hover { transform: none; border-color: var(--ink); }
.fav-btn.fav-btn-text.is-fav { border-color: #c8323f; color: #c8323f; }
/* Die Blumen im Strauss, unter der Beschreibung. */
.detail-flowers { color: var(--muted); font-size: 14px; letter-spacing: .02em; margin: -6px 0 14px; }
/* Zwischen Foto und Empfehlungen: ein Satz, gross und mittig — und Luft
   nach oben und unten, damit nichts am Foto klebt. */
.home-claim {
  text-align: center;
  font-weight: 300;
  font-size: clamp(28px, 4.2vw, 52px);
  letter-spacing: .02em;
  line-height: 1.1;
  margin: clamp(44px, 6vw, 80px) 0 clamp(12px, 2vw, 24px);
  text-wrap: balance;
}
.hero + .section-head { margin-top: clamp(40px, 5vw, 64px); }

/* Im Korb: der Strauss gross, die Karte darunter klein. Keine Rahmen um die
   Posten und keinen weissen Kasten drumherum — nur eine Linie dazwischen. */
/* Mit der Elternklasse, damit es die spaetere Sammelregel (.cart-item mit
   Rahmen) sicher schlaegt. */
.cart-layout .cart-items { border: 0; background: transparent; box-shadow: none; padding: 0; border-radius: 0; }
.cart-items .cart-item { grid-template-columns: 128px minmax(0, 1fr) auto; border: 0; border-bottom: 1px solid var(--line); padding: 18px 0; background: transparent; }
.cart-items .cart-item:last-child { border-bottom: 0; }
.cart-item > img { width: 128px; height: 128px; object-fit: cover; border-radius: 14px; }
@media (max-width: 620px) {
  .cart-item { grid-template-columns: 96px 1fr; }
  .cart-item > img { width: 96px; height: 96px; }
}

/* ── Grusskarte als Unterposten im Korb ──────────────────────────────────── */
.cart-sub {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin: 2px 0 0 24px;
  padding: 10px 12px 10px 0;
  border-left: 2px solid var(--line);
  padding-left: 14px;
}
.cart-sub img { width: 44px; height: 56px; object-fit: cover; border-radius: 8px; background: var(--cream); }
.cart-sub h4 { margin: 0 0 2px; font-size: 14px; font-weight: 500; }
.cart-sub p { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.cart-sub strong { font-size: 14px; font-weight: 500; }
.cart-add-card {
  grid-column: 1 / -1;
  justify-self: start;
  margin: 0 0 0 24px;
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: var(--rose-dark);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cart-add-card:hover { color: var(--ink); }
@media (max-width: 620px) {
  .cart-sub { margin-left: 0; grid-template-columns: 40px minmax(0, 1fr); }
  .cart-sub img { width: 40px; height: 50px; }
  .cart-sub > strong { grid-column: 2; }
  .cart-add-card { margin-left: 0; }
}

/* ── "Grusskarte dazu?" — das Fenster beim Hinzufuegen ───────────────────── */
.card-modal { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 16px; }
.card-modal[hidden] { display: none; }
.card-modal-backdrop { position: absolute; inset: 0; background: rgba(29, 30, 31, .45); }
.card-modal-box {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 22px 22px 18px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(29, 30, 31, .3);
  animation: card-modal-in .22s ease-out;
}
.card-modal-box h2 { font-size: 24px; font-weight: 300; margin: 2px 0 4px; }
.card-modal-box .eyebrow { margin: 0; }
.card-modal-sub { color: var(--muted); font-size: 13.5px; margin: 0 0 14px; }
.card-modal-sub strong { color: var(--ink); font-weight: 500; }
.card-modal-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--soft); color: var(--ink); cursor: pointer; font-size: 14px; }
.card-modal-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.card-modal-actions .btn { min-height: 44px; }
.card-modal-actions .btn[disabled] { opacity: .45; cursor: not-allowed; }
/* Im Fenster sind die Karten gross: ein Raster, das die Breite fuellt, mit
   Hochkant-Bildern — auf 96 px war nichts zu erkennen. */
.card-modal-box { width: min(820px, 100%); }
#cardModalRow { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; overflow: visible; max-height: 56vh; overflow-y: auto; padding: 4px 4px 8px; }
#cardModalRow .card-opt { width: auto; }
#cardModalRow .card-opt img { width: 100%; height: auto; aspect-ratio: 4 / 5; border-width: 3px; border-radius: 14px; }
#cardModalRow .card-opt span { font-size: 13px; margin-top: 7px; }
#cardModalRow .card-opt input:checked + img { box-shadow: 0 0 0 3px rgba(200, 50, 63, .22); }
body.modal-open { overflow: hidden; }
@keyframes card-modal-in { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 620px) {
  /* Auf dem Telefon von unten, bis zum Rand. */
  .card-modal { padding: 0; align-items: end; }
  .card-modal-box { width: 100%; border-radius: 18px 18px 0 0; max-height: 92vh; }
  #cardModalRow { grid-template-columns: repeat(2, 1fr); gap: 12px; max-height: 52vh; }
  .card-modal-actions .btn { flex: 1 1 auto; }
}
.card-pick-row { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: thin; }
.card-opt { position: relative; flex: 0 0 auto; width: 96px; cursor: pointer; text-align: center; }
.card-opt input { position: absolute; opacity: 0; inset: 0; pointer-events: none; }
.card-opt img, .card-opt.card-none > span:first-of-type {
  display: grid; place-items: center;
  width: 96px; height: 96px; object-fit: cover;
  border: 2px solid var(--line); border-radius: 12px; background: var(--cream);
  transition: border-color .15s ease, transform .15s ease;
}
.card-opt.card-none > span { font-size: 12px; color: var(--muted); padding: 6px; }
.card-opt:not(.card-none) span { display: block; font-size: 12px; margin-top: 5px; line-height: 1.25; color: var(--muted); }
.card-opt:hover img, .card-opt:hover.card-none > span:first-of-type { border-color: var(--ink); }
.card-opt input:checked + img, .card-opt input:checked + span { border-color: #c8323f; box-shadow: 0 0 0 2px rgba(200, 50, 63, .18); transform: translateY(-1px); }
.card-opt input:focus-visible + img, .card-opt input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.card-pick-note { font-size: 12.5px; color: var(--muted); margin: 2px 0 0; }

/* Instagram und WhatsApp im Fuss: Zeichen mit Wort, in einer Reihe. */
.social-links { display: flex; gap: 8px 18px; flex-wrap: wrap; margin-top: 14px; }
.site-footer .social-links a { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 4px 0; color: var(--muted); font-size: 13px; }
.site-footer .social-links a:hover { color: var(--ink); }
.social-links svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }

/* ── WhatsApp, schwebend unten rechts ─────────────────────────────────────── */
.wa-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 250;            /* unter dem Menue (300), ueber allem anderen */
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 50px;
  padding: 0 18px 0 14px;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(37, 211, 102, .35), 0 2px 6px rgba(0, 0, 0, .15);
  transition: transform .18s ease, box-shadow .18s ease;
}
.wa-float:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(37, 211, 102, .45), 0 2px 6px rgba(0, 0, 0, .15); color: #fff; }
.wa-float svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.wa-float svg path:last-child { fill: currentColor; stroke: none; }
@media (max-width: 620px) {
  /* Auf dem Telefon nur das Zeichen, damit es keinen Knopf verdeckt. */
  .wa-float { right: 14px; bottom: 14px; width: 52px; min-height: 52px; padding: 0; justify-content: center; }
  .wa-float span { display: none; }
}
/* Waehrend das Durchblaettern offen ist, bleibt der Knopf weg. */
body:has(#reelView:not([hidden])) .wa-float { display: none; }

/* ── Hinweis-Knoepfe "i" in der Kasse ─────────────────────────────────────── */
.tip { position: relative; display: inline-flex; vertical-align: middle; margin-left: 6px; }
.tip-btn {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.tip-btn svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.tip-btn:hover, .tip.open .tip-btn { color: var(--ink); border-color: var(--ink); }
.tip-text {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 40;
  width: min(320px, 80vw);
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 400;
  box-shadow: 0 10px 28px rgba(29, 30, 31, .14);
  display: none;
}
.tip.open .tip-text { display: block; }
@media (hover: hover) { .tip:hover .tip-text { display: block; } }
/* Rechts am Rand lieber nach links aufklappen. */
.tip.tip-right .tip-text { left: auto; right: 0; }

/* Im Kopf: der Laden, nur ein Zeichen — eine Pille wie der Warenkorb. */
.shop-link { padding: 11px 13px; margin-right: 6px; }
.shop-link svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* Auf dem Telefon ist rechts kein Platz fuer drei Pillen: der Laden steht
   im Menue, Herz und Korb werden schmaler — sonst lag alles ueber dem Logo. */
@media (max-width: 620px) {
  .shop-link { display: none; }
  .header-side.header-right { gap: 6px; }
  .cart-link { padding: 7px 9px; gap: 5px; }
  .cart-link strong { min-width: 20px; height: 20px; font-size: 12px; }
  .fav-link { padding-left: 9px; margin-right: 0; }
  .fav-link svg { width: 16px; height: 16px; }
  .brand img { max-width: min(140px, 36vw); }
}

/* ── Ladenseite ───────────────────────────────────────────────────────────── */
.store-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
/* Festes Seitenverhaeltnis: auch wenn das Standbild der beweglichen Karte
   weicht, bleibt der Rahmen gleich gross. */
.store-map { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--cream); }
/* Nur das Standbild direkt im Rahmen — die Kacheln von Leaflet sind auch
   <img> und duerfen von diesen Regeln nichts abbekommen. */
.store-map > img { width: 100%; height: auto; display: block; }
/* Die bewegliche Karte liegt ueber dem Standbild, genau so gross. */
.store-map-live { position: absolute; inset: 0; z-index: 2; background: var(--cream); }
/* Solange die Kacheln unterwegs sind, steht das hier — sie decken es dann zu. */
.store-map-live::before { content: "Karte lädt …"; position: absolute; inset: 0; display: grid; place-items: end center; padding-bottom: 34px; color: var(--muted); font-size: 14px; letter-spacing: .04em; }
.store-map.is-live > img, .store-map.is-live .store-map-load { display: none; }
.store-map.is-live > small { display: none; }   /* Leaflet schreibt die Quelle selbst */
.store-map-load {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: grid;
  gap: 4px;
  max-width: calc(100% - 32px);
  padding: 14px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(241, 241, 235, .94);
  color: var(--ink);
  font: inherit;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(29, 30, 31, .18);
}
.store-map-load strong { font-weight: 500; font-size: 15px; }
.store-map-load span { font-size: 12px; color: var(--muted); }
.store-map-load:hover { border-color: var(--ink); }
/* Parkhaus: blauer Kreis mit P, wie im Standbild. */
.store-park-pin i {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #2f6fb5; color: #fff;
  border: 3px solid #fff;
  font: 700 17px/1 Arial, sans-serif; font-style: normal;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}
.store-parking { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; margin-bottom: 8px; }
.store-parking-icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #2f6fb5; color: #fff; font: 700 20px/1 Arial, sans-serif; }
.store-parking strong { display: block; font-weight: 500; margin-bottom: 4px; }
.store-parking p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.store-parking .btn { min-height: 40px; }

/* Die Nadel auf der Karte — dieselbe wie im Standbild. */
.store-pin i {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 50% 50% 50% 0;
  background: #c8323f;
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
  transform: rotate(-45deg);
  margin: 2px 0 0 0;
}
.store-pin i::after { content: ""; position: absolute; left: 11px; top: 11px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.leaflet-container { font-family: inherit; }
.leaflet-popup-content { font-size: 14px; line-height: 1.45; margin: 12px 16px; }
.leaflet-popup-content-wrapper { border-radius: 10px; }
.store-map small { position: absolute; right: 8px; bottom: 6px; font-size: 10px; color: rgba(29,30,31,.7); background: rgba(255,255,255,.75); padding: 2px 6px; border-radius: 999px; }
.store-info h2 { font-size: 20px; font-weight: 400; margin: 0 0 12px; }
.store-actions + h2 { margin-top: 28px; }
.store-address {
  display: grid;
  gap: 2px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  text-decoration: none;
  font-size: 17px;
  transition: border-color .18s ease;
}
.store-address:hover { border-color: var(--ink); }
.store-address strong { font-weight: 500; }
.store-address em { font-style: normal; font-size: 13px; color: var(--rose-dark); margin-top: 8px; }
.store-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.store-actions .btn { min-height: 42px; }
.store-list { margin: 0; padding-left: 20px; display: grid; gap: 8px; line-height: 1.5; }
.store-contact { margin-top: 22px; color: var(--muted); }
.store-contact a { color: inherit; }
@media (max-width: 760px) { .store-grid { grid-template-columns: 1fr; } }

/* Im Kopf: Herz mit Zaehler, gleiche Pille wie der Warenkorb. */
.fav-link { gap: 6px; padding-left: 12px; margin-right: 6px; }
.fav-link svg { width: 18px; height: 18px; fill: transparent; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.fav-link strong { background: #c8323f; }
@media (prefers-reduced-motion: no-preference) {
  .fav-btn.pop svg { animation: heart-pop .4s cubic-bezier(.2, .9, .3, 1.4); }
  #favCount.bump { animation: count-bump .45s ease-out; }
}
@keyframes heart-pop {
  0%   { transform: scale(.6); }
  60%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}
@media (max-width: 620px) {
  .fav-link { padding: 8px 10px; margin-right: 4px; }
  .fav-btn { width: 34px; height: 34px; top: 8px; right: 8px; }
  .detail-title { flex-wrap: wrap; }
}

/* Liegt der Strauss im Korb: Anzahl in Gruen, Minus und Plus daneben. */
.add-slot { display: inline-flex; border-radius: 999px; }
.card-stepper {
  display: inline-flex;
  align-items: center;
  height: 42px;
  border-radius: 999px;
  background: #3d7a4c;
  color: #fff;
  /* Kein Schein und kein Schatten: die Karte schneidet an ihrem Rand ab,
     und ein halber Schein sah aus wie ein Fehler. */
}
.card-stepper button {
  width: 38px;
  height: 42px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  border-radius: 999px;
}
.card-stepper button:hover { background: rgba(255, 255, 255, .14); }
.card-stepper button:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.card-stepper output {
  min-width: 18px;
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: no-preference) {
  /* Erstes Hinzufuegen: das Plus wird zur gruenen Pille, mit kurzem Leuchten. */
  .add-slot.pop .card-stepper { animation: stepper-pop .45s cubic-bezier(.2, .9, .3, 1.3); }
  /* Jedes weitere: die Zahl springt. */
  .add-slot.bump output { animation: count-bump .32s ease-out; }
  /* Kein display hier: der Kreis ist ein inline-grid, das die Zahl zentriert —
     inline-block schob sie in die Ecke. */
  #cartCount.bump { animation: count-bump .45s ease-out; }
}
@keyframes stepper-pop {
  0%   { transform: scale(.55); opacity: .4; filter: brightness(1.35); }
  70%  { transform: scale(1.06); opacity: 1; filter: brightness(1.2); }
  100% { transform: scale(1); filter: brightness(1); }
}
@keyframes count-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}

/* Filters read as a quiet toolbar rather than a panel. */
.shop-tools {
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 14px 0;
}
.shop-tools select, .shop-tools .btn { min-height: 42px; }
input, select, textarea {
  border-radius: 0;
  border: 1px solid var(--line);
  background: transparent;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); }
/* Das Datumsfeld sieht aus wie jedes andere Feld — nicht wie eine weisse Pille. */
.date-trigger { border-radius: 0; background: transparent; font-weight: 600; }
.date-trigger:hover, .date-trigger[aria-expanded="true"] { border-color: var(--ink); }

/* ── Shop toolbar ──────────────────────────────────────────────────────────
   The panel of four dropdowns is gone. The controls stay in the markup and
   keep working — they are only taken out of the layout — so restoring the
   panel is deleting this one block. What is left is the count of bouquets. */
.shop-tools .tool, .shop-tools #fReset { display: none; }
.shop-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 0;
  padding: 6px 0 18px;
}
.shop-tools .filter-count { margin: 0; font-size: 13px; color: var(--muted); order: 1; }

/* ── Product detail ────────────────────────────────────────────────────────*/
.detail-image { border: 0; background: var(--cream); border-radius: 22px; }
.detail-panel { background: transparent; border: 0; padding-left: clamp(0px, 3vw, 40px); }
.detail-panel h1 { font-size: clamp(30px, 3.2vw, 40px); }
/* Die rechte Spalte ist schmal: „Merken" darf unter den Namen rutschen,
   statt ihn zu ueberlappen. */
.detail-title { flex-wrap: wrap; align-items: flex-start; }
.detail-panel .price { font-size: 22px; color: var(--ink); font-weight: 400; }
.size-options label {
  border: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  font-weight: 400;
}
/* Gewaehlt: Sand statt Schwarz — der Rahmen in der Akzentfarbe, eine
   hauchduenne Fuellung, die Schrift bleibt dunkel. */
.size-options label:has(input:checked) {
  background: rgba(203, 189, 147, .16);
  border-color: var(--rose);
  box-shadow: inset 0 0 0 1px var(--rose);
  color: var(--ink);
}
.size-options label small { opacity: .8; }
.qty-control { border-radius: 999px; border: 1px solid var(--line); }

/* ── Cart, checkout, panels ────────────────────────────────────────────────*/
.cart-item, .checkout-panel, .order-card, .method-card, .payment-list label,
.notice-box, .login-card, .empty {
  border-radius: 0;
  background: transparent;
  border: 1px solid var(--line);
}
.notice-box { border-left: 2px solid var(--rose); border-right: 0; border-top: 0; border-bottom: 0; padding-left: 16px; }
.shop-closed-banner { border-radius: 0; border: 0; border-bottom: 1px solid var(--line); background: var(--soft); }

/* ── Footer ────────────────────────────────────────────────────────────────*/
.site-footer {
  width: auto;
  margin: 80px 0 0;
  padding: 48px clamp(16px, 3vw, 40px);
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
}
.site-footer img { height: 26px; max-width: 150px; }
.site-footer a { color: var(--muted); font-size: 13px; }
.site-footer a:hover { color: var(--ink); }
.site-version { color: var(--muted); opacity: .5; }

/* ── Reel button keeps the theme ───────────────────────────────────────────*/
.reel-open { background: var(--ink); color: var(--bg); font-weight: 500; }

/* ── Narrower screens ──────────────────────────────────────────────────────
   Four across is a desktop figure; below that the columns drop rather than
   shrink, or the bouquets end up as four slivers. */

@media (max-width: 760px) {
  .product-grid, #productGrid, #featuredGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
}
@media (max-width: 620px) {
  .site-header { min-height: 58px; padding: 8px 14px; }
  .brand img { height: 24px; max-width: 140px; }
  .site-header { gap: 8px; }
  .cart-link span { display: none; }
  .hero-copy { min-height: 64vh; padding: 70px 20px 64px; }
  .product-image { border-radius: 10px; }
  .product-body { padding: 10px 2px 0; }
  .detail-panel { padding-left: 0; }
}

/* Unter 380 px wird es eng: Menü, Sprache, Logo und Warenkorb müssen
   nebeneinander passen, ohne dass eine Seite gestaucht wird. */
/* Unter 380 px wird es eng. Die drei Striche bleiben bei 44 px — kleiner darf
   ein Ziel fuer einen Daumen nicht werden —, also gibt das Logo die Breite her.
   Es waechst mit dem Bildschirm statt in Stufen zu springen: bei 393 px sind
   das 110 px, beim zusammengeklappten Galaxy Fold (280 px) noch 78, und die
   linke Gruppe (Menue + Sprache) passt in jeder dieser Breiten in ihre Haelfte. */
@media (max-width: 380px) {
  .site-header { gap: 6px; padding: 8px 10px; }
  .brand img { max-width: min(112px, 28vw); }
  .lang-switch button { padding: 8px 4px; letter-spacing: .06em; }
}
@media (max-width: 340px) {
  .site-header { gap: 4px; padding: 8px; }
  .lang-switch { gap: 0; }
  .lang-switch button { padding: 8px 2px; letter-spacing: 0; }
}

/* Schneeleinwand im Bereich Weihnachten & Neujahr (js/app.js, snowStart). Ueber
   dem Inhalt, aber unter dem Kopf und dem Menue; reagiert nicht auf Klicks. */
.snow-canvas { position: fixed; inset: 0; z-index: 19; pointer-events: none; }