/* =========================================================================
   Mamis Herzstücke – Stylesheet, Design „Galerie“
   Hell, luftig, runde Bildflächen, Serifen-Überschriften, keine Icons.
   Nur System-Schriften (keine externen Requests).
   ========================================================================= */

:root {
  --grund:       #f7f5f2;   /* warmes Off-White, Seitenhintergrund */
  --tinte:       #211c18;   /* fast-schwarzes Braun, Text + Buttons */
  --gedeckt:     #8a7c6f;   /* Nebentexte */
  --gedeckt-2:   #5f564e;   /* dunklere Nebentexte */
  --linie:       #e7e2da;   /* Haarlinien, Rahmen */
  --akzent:      #b98a7c;   /* Rosé-Gold, sparsam einsetzen */
  --weich-1:     #f3e6dd;   /* Angebots-Panel Verlauf */
  --weich-2:     #f4e3da;
  --gruen:       #6f8f6a;   /* Erfolg (Badges, Flash) */

  --radius:      20px;
  --radius-gr:   28px;
  --radius-kl:   12px;
  --schatten:    0 2px 10px rgba(33, 28, 24, .06);
  --schatten-gr: 0 18px 44px rgba(33, 28, 24, .14);

  --disp: "Didot", "Bodoni 72", "Playfair Display", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --wrap: 1160px;
  --kopf: 66px;             /* Höhe der Kopfzeile (schrumpft beim Scrollen) */
}

* { box-sizing: border-box; }

/* Muss ganz oben stehen: eigene display-Regeln (flex/grid) sind stärker als
   die Browser-Vorgabe für [hidden] – ohne das bleiben versteckte Elemente
   sichtbar. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--tinte);
  background: var(--grund);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Lange Wörter/E-Mail-Adressen dürfen die Seite nicht seitlich aufziehen. */
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  font-family: var(--disp); font-weight: 500; line-height: 1.15; color: var(--tinte);
  letter-spacing: .01em;
  /* Lange deutsche Wörter („Geschäftsbedingungen“) sprengen sonst auf
     schmalen Handys die Zeile und machen die Seite seitlich scrollbar. */
  overflow-wrap: break-word; hyphens: auto;
}
h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); margin: 0 0 .5em; text-wrap: balance; }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
a { color: var(--tinte); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.section { padding: 56px 0; }
.narrow { max-width: 760px; }
.center { text-align: center; }
.muted { color: var(--gedeckt); }
.small { font-size: .875rem; }
.req { color: var(--akzent); }

.eyebrow {
  text-transform: uppercase; letter-spacing: .18em; font-size: .72rem;
  font-weight: 600; color: var(--gedeckt); margin: 0 0 12px;
}

/* ---------- Sanftes Einblenden beim Scrollen ---------------------------- */
/* Greift nur mit JS (html.js) – ohne JS bleibt alles sofort sichtbar. */
html.js .rv { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s ease; }
html.js .rv.in { opacity: 1; transform: none; }
html.js .rv[data-d="1"] { transition-delay: .08s; }
html.js .rv[data-d="2"] { transition-delay: .16s; }
html.js .rv[data-d="3"] { transition-delay: .24s; }
html.js .rv[data-d="4"] { transition-delay: .32s; }

/* ---------- Bilder: erst weich, dann scharf (Blur-up) ------------------- */
html.js img.blurup { filter: blur(12px); transform: scale(1.03); transition: filter .5s ease, transform .5s ease; }
html.js img.blurup.geladen { filter: none; transform: none; }

/* ---------- Seitenübergänge (View Transitions, wo unterstützt) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .26s; }
/* Das erste Galeriebild der Produktseite „wächst“ aus der angeklickten Karte */
.gal-folie:first-child img { view-transition-name: produkt-bild; }

/* ---------- Buttons ----------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 26px; border-radius: 999px;
  font-weight: 500; font-family: var(--sans); font-size: .95rem;
  border: 1px solid transparent; cursor: pointer; text-align: center;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn .arr { transition: transform .25s ease; }
.btn:hover .arr { transform: translateX(4px); }
.btn-primary { background: var(--tinte); color: var(--grund); }
.btn-primary:hover { background: #000; color: #fff; box-shadow: 0 10px 24px rgba(33, 28, 24, .22); }
.btn-ghost { background: transparent; border-color: var(--linie); color: var(--tinte); }
.btn-ghost:hover { border-color: var(--tinte); }
.btn-block { display: flex; width: 100%; }
.btn-lg { padding: 16px 30px; font-size: 1rem; }

/* ---------- Kopfzeile: Menü · Marke · Warenkorb ------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  /* Deckend: durch eine halbtransparente Leiste schimmert der durchscrollende
     Inhalt hindurch – Auswahlkacheln sahen dadurch „verdeckt“ aus. */
  background: var(--grund);
  transition: box-shadow .3s ease;
}
body.kompakt .site-header { box-shadow: 0 6px 24px rgba(33, 28, 24, .08); }
.header-inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: var(--kopf); gap: 12px; transition: height .3s ease;
}
body.kompakt .header-inner { height: 56px; }

.brand {
  display: flex; align-items: center; gap: 10px; justify-self: center;
  font-family: var(--disp); font-size: 1.2rem; color: var(--tinte); white-space: nowrap;
}
.brand:hover { text-decoration: none; }
.brand img { width: 42px; height: 42px; transition: width .3s ease, height .3s ease; }
body.kompakt .brand img { width: 34px; height: 34px; }

.kopf-rechts { justify-self: end; display: flex; align-items: center; gap: 20px; }
.kopf-rechts .kopf-link { font-size: .9rem; color: var(--gedeckt-2); }
.kopf-rechts .kopf-link:hover { color: var(--tinte); text-decoration: none; }

.ico { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.cart-link {
  position: relative; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 999px; background: #fff;
  box-shadow: var(--schatten); color: var(--tinte);
}
.cart-link:hover { text-decoration: none; }
.cart-badge {
  position: absolute; top: -4px; right: -6px;
  background: var(--tinte); color: #fff; font-size: .66rem; font-weight: 700;
  min-width: 17px; height: 17px; border-radius: 999px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
}
.cart-badge.plopp { animation: plopp .4s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes plopp { from { transform: scale(.3); } 60% { transform: scale(1.25); } to { transform: scale(1); } }

/* Burger-Knopf */
.burger { display: inline-flex; flex-direction: column; gap: 5px; padding: 10px 4px; justify-self: start; background: none; border: none; cursor: pointer; }
.burger span { display: block; width: 24px; height: 1.6px; background: var(--tinte); border-radius: 2px; transition: transform .35s ease, opacity .35s ease, width .35s ease; }
.burger span:nth-child(2) { width: 16px; }
.burger:hover span:nth-child(2) { width: 24px; }
body.menu-offen .burger span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
body.menu-offen .burger span:nth-child(2) { opacity: 0; }
body.menu-offen .burger span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); width: 24px; }

/* Menü-Auszug von links */
.abdunkeln {
  position: fixed; inset: 0; z-index: 60; background: rgba(33, 28, 24, .38);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .4s ease; border: 0;
}
body.menu-offen .abdunkeln { opacity: 1; pointer-events: auto; }
.schublade {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 70;
  width: min(350px, 88vw); background: var(--grund);
  transform: translateX(-102%); transition: transform .45s cubic-bezier(.3, .9, .3, 1);
  display: flex; flex-direction: column; padding: 24px 26px 20px;
  overflow-y: auto; box-shadow: 24px 0 60px rgba(33, 28, 24, .18);
}
body.menu-offen .schublade { transform: none; }
body.menu-offen { overflow: hidden; }
.schublade-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.schublade-label { text-transform: uppercase; letter-spacing: .18em; font-size: .7rem; font-weight: 600; color: var(--gedeckt); }
.schublade-zu { background: none; border: none; cursor: pointer; font-size: 1.3rem; color: var(--gedeckt); padding: 6px; line-height: 1; }
.schublade-zu:hover { color: var(--tinte); }
.schublade-punkt {
  display: flex; align-items: baseline; gap: 12px; width: 100%;
  padding: 14px 2px; border-bottom: 1px solid var(--linie);
  font-family: var(--disp); font-size: 1.28rem; color: var(--tinte);
  transition: padding .3s ease;
}
.schublade-punkt:hover { padding-left: 10px; text-decoration: none; }
.schublade-punkt .anzahl { margin-left: auto; font-family: var(--sans); font-size: .74rem; color: var(--gedeckt); }
.schublade-punkt .pfeil { opacity: 0; transform: translateX(-6px); transition: opacity .3s ease, transform .3s ease; font-size: 1rem; color: var(--gedeckt); }
.schublade-punkt:hover .pfeil { opacity: 1; transform: none; }
.schublade-klein { margin-top: 24px; display: flex; flex-direction: column; gap: 11px; font-size: .92rem; }
.schublade-klein a { color: var(--gedeckt-2); }
.schublade-klein a:hover { color: var(--tinte); }
.schublade-fuss { margin-top: auto; padding-top: 24px; font-size: .8rem; color: var(--gedeckt); }
/* Menüpunkte gleiten nacheinander herein */
body.menu-offen .schublade .gleitet { animation: gleiten .5s ease backwards; }
body.menu-offen .schublade .gleitet:nth-child(2) { animation-delay: .07s; }
body.menu-offen .schublade .gleitet:nth-child(3) { animation-delay: .12s; }
body.menu-offen .schublade .gleitet:nth-child(4) { animation-delay: .17s; }
body.menu-offen .schublade .gleitet:nth-child(5) { animation-delay: .22s; }
body.menu-offen .schublade .gleitet:nth-child(6) { animation-delay: .27s; }
body.menu-offen .schublade .gleitet:nth-child(7) { animation-delay: .32s; }
@keyframes gleiten { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

/* ---------- Flash ------------------------------------------------------- */
.flash { padding: 12px 18px; border-radius: var(--radius-kl); margin: 18px 0 0; font-weight: 500; }
.flash-success { background: #e9f3e6; color: #3f6238; border: 1px solid #cfe4c9; }
.flash-error   { background: #fbe5e8; color: #9a3a4c; border: 1px solid #f3c9d1; }

/* ---------- Startseite: Hero-Slideshow ---------------------------------- */
.held { position: relative; border-radius: var(--radius-gr); overflow: hidden; margin-top: 8px; }
.held-buehne { position: relative; aspect-ratio: 16 / 8.5; overflow: hidden; background: var(--linie); }
.held-folie { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.held-folie.an { opacity: 1; }
.held-folie img { width: 100%; height: 100%; object-fit: cover; }
/* Ken-Burns: jedes Bild „atmet“ leicht in eine andere Richtung */
.held-folie:nth-child(1) img { animation: kb1 22s ease-in-out infinite alternate; }
.held-folie:nth-child(2) img { animation: kb2 22s ease-in-out infinite alternate; }
.held-folie:nth-child(3) img { animation: kb3 22s ease-in-out infinite alternate; }
@keyframes kb1 { from { transform: scale(1); } to { transform: scale(1.08) translateX(-1.5%); } }
@keyframes kb2 { from { transform: scale(1.08) translateX(1.2%); } to { transform: scale(1); } }
@keyframes kb3 { from { transform: scale(1); } to { transform: scale(1.09) translateY(-1.5%); } }

.held-lage {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(22px, 4.5vw, 56px); pointer-events: none;
  background: linear-gradient(15deg, rgba(247, 245, 242, .92) 0%, rgba(247, 245, 242, .45) 34%, rgba(247, 245, 242, 0) 60%);
}
.held-lage .btn, .held-lage a { pointer-events: auto; }
.held-lage h1 { font-size: clamp(1.9rem, 4.8vw, 3.9rem); line-height: 1.06; margin: 0 0 22px; max-width: 13ch; }
.held-zeile { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.held-vertrauen { font-size: .82rem; color: var(--gedeckt-2); }

.held-punkte { position: absolute; z-index: 3; right: clamp(16px, 3vw, 30px); bottom: clamp(16px, 3vw, 30px); display: flex; gap: 4px; }
/* Kleiner Punkt, große Tippfläche (padding + content-box) */
.held-punkt {
  width: 7px; height: 7px; padding: 8px; box-sizing: content-box;
  border-radius: 50%; border: none; cursor: pointer;
  background: rgba(33, 28, 24, .28); background-clip: content-box;
  transition: background-color .3s ease;
}
/* NUR background-color – die Kurzform würde background-clip zurücksetzen
   und den Punkt auf die volle Tippfläche aufblasen. */
.held-punkt.an { background-color: var(--tinte); }

.held-pfeil {
  position: absolute; z-index: 3; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255, 255, 255, .85); backdrop-filter: blur(6px);
  display: grid; place-items: center; color: var(--tinte);
  opacity: 0; transition: opacity .3s ease, background .3s ease;
}
.held:hover .held-pfeil { opacity: 1; }
.held-pfeil:hover { background: #fff; }
.held-zurueck { left: 16px; }
.held-vor { right: 16px; }

/* ---------- Startseite: Abschnitte -------------------------------------- */
.abschnitt { padding: clamp(48px, 6.5vw, 84px) 0 0; }
.abschnitt-kopf { text-align: center; margin-bottom: clamp(26px, 4vw, 42px); }
.abschnitt-kopf h2 { font-size: clamp(1.6rem, 3.2vw, 2.5rem); margin: 0; }
.abschnitt-kopf p { margin: 10px 0 0; color: var(--gedeckt); font-size: .92rem; }

/* Kategorien: Bildkacheln */
.kat-raster { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.kat-kachel { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 3.6; }
.kat-kachel img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .6, .2, 1); }
.kat-kachel:hover img { transform: scale(1.06); }
.kat-kachel:hover { text-decoration: none; }
.kat-kachel span {
  position: absolute; left: 10px; right: 10px; bottom: 10px;
  background: rgba(255, 255, 255, .9); backdrop-filter: blur(6px);
  border-radius: 999px; padding: 8px 14px; font-size: .78rem; text-align: center;
  color: var(--tinte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- Produktkarten (randlos, Bild zuerst) ------------------------ */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 18px; }
.product-card { background: none; border: none; }
.product-card-link { color: var(--tinte); display: block; }
.product-card-link:hover { text-decoration: none; }
.product-card-img {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: var(--radius); background: #eceae6; margin-bottom: 12px;
}
.product-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .6, .2, 1), opacity .45s ease; }
.product-card:hover .product-card-img img { transform: scale(1.05); }
/* Zweites Foto blendet beim Darüberfahren ein */
.zweitbild { position: absolute; inset: 0; opacity: 0; }
.product-card:hover .zweitbild { opacity: 1; }
.product-card-title { font-family: var(--sans); font-size: .92rem; font-weight: 500; margin: 0; line-height: 1.35; }
.product-card-price { font-size: .86rem; color: var(--gedeckt); margin: 3px 0 0; }
.product-card-price .from { font-size: .86rem; }

/* Hinweis-Chip auf dem Bild (erscheint beim Darüberfahren) */
.karten-tag {
  position: absolute; right: 10px; top: 10px; z-index: 2;
  background: rgba(255, 255, 255, .92); border-radius: 999px;
  padding: 5px 11px; font-size: .7rem; color: var(--tinte);
  opacity: 0; transform: translateY(-4px); transition: opacity .3s ease, transform .3s ease;
}
.product-card:hover .karten-tag { opacity: 1; transform: none; }
.img-count {
  position: absolute; bottom: 10px; right: 10px; background: rgba(33, 28, 24, .5);
  color: #fff; font-size: .68rem; padding: 3px 9px; border-radius: 999px;
}
.ribbon {
  position: absolute; top: 10px; left: 10px; z-index: 2; background: rgba(255, 255, 255, .92);
  color: var(--tinte); font-size: .7rem; font-weight: 500; padding: 5px 11px; border-radius: 999px;
}

/* ---------- Angebots-Panel (Personalisierung) --------------------------- */
.angebot {
  margin-top: clamp(48px, 6.5vw, 84px); border-radius: var(--radius-gr);
  background: linear-gradient(120deg, var(--weich-1), #f9f0ea 55%, var(--weich-2));
  text-align: center; padding: clamp(44px, 6vw, 72px) 24px;
}
.angebot h2 { font-size: clamp(1.5rem, 3vw, 2.3rem); max-width: 20ch; margin: 10px auto 12px; text-wrap: balance; }
.angebot p { color: #8a7266; font-size: .92rem; margin: 0 0 26px; }

/* ---------- Kundenstimmen (Slider mit echten Etsy-Bewertungen) ---------- */
/* touch-action: pan-y – senkrechtes Scrollen bleibt dem Browser, waagerechte
   Gesten kommen als pointer-Ereignisse an und blättern die Bewertungen. */
.stimmen { text-align: center; padding: clamp(48px, 6.5vw, 84px) 20px 0;
  touch-action: pan-y; }
.stimmen-sterne { letter-spacing: .3em; font-size: 1rem; color: var(--akzent); margin: 0 0 18px; }
/* Die Sterne füllen sich nacheinander, sobald der Bereich sichtbar wird */
html.js .stimmen-sterne span { opacity: .18; transition: opacity .5s ease; }
html.js .stimmen-sterne.an span:nth-child(1) { opacity: 1; transition-delay: .05s; }
html.js .stimmen-sterne.an span:nth-child(2) { opacity: 1; transition-delay: .2s; }
html.js .stimmen-sterne.an span:nth-child(3) { opacity: 1; transition-delay: .35s; }
html.js .stimmen-sterne.an span:nth-child(4) { opacity: 1; transition-delay: .5s; }
html.js .stimmen-sterne.an span:nth-child(5) { opacity: 1; transition-delay: .65s; }
.stimmen-buehne { display: grid; max-width: 640px; margin: 0 auto; }
.stimme { grid-area: 1 / 1; opacity: 0; transform: translateY(8px); transition: opacity .8s ease, transform .8s ease; pointer-events: none; margin: 0; }
.stimme.an { opacity: 1; transform: none; pointer-events: auto; }
.stimme blockquote { font-family: var(--disp); font-size: clamp(1.1rem, 2.2vw, 1.5rem); line-height: 1.4; margin: 0; text-wrap: balance; }
.stimme figcaption { margin-top: 14px; font-size: .8rem; color: var(--gedeckt); }
.stimmen-punkte { display: flex; justify-content: center; gap: 4px; margin-top: 22px; }
.stimmen-punkt {
  width: 6px; height: 6px; padding: 8px; box-sizing: content-box;
  border-radius: 50%; border: none; cursor: pointer;
  background: rgba(33, 28, 24, .22); background-clip: content-box;
  transition: background-color .3s ease;
}
.stimmen-punkt.an { background-color: var(--tinte); }
.stimmen-quelle { margin-top: 12px; font-size: .74rem; color: var(--gedeckt); }

/* ---------- USP-Zeile ---------------------------------------------------- */
.usps {
  display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
  padding: clamp(40px, 5.5vw, 60px) 20px;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gedeckt);
}
.usps i { font-style: normal; color: #cfc6ba; }

/* ---------- Shop-Seite --------------------------------------------------- */
.shop-head { text-align: center; margin-bottom: 8px; }
.shop-head .lead { color: var(--gedeckt); font-size: .95rem; max-width: 56ch; margin: 0 auto; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 18px 0 34px; }
.chip {
  padding: 9px 18px; border-radius: 999px; border: none;
  background: #fff; color: var(--gedeckt-2); font-size: .85rem; cursor: pointer;
  box-shadow: var(--schatten);
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.chip:hover { text-decoration: none; background: var(--tinte); color: #fff; transform: translateY(-1px); }
.chip-active { background: var(--tinte); color: #fff; }

.breadcrumb { font-size: .8rem; color: var(--gedeckt); margin-bottom: 22px; }
.breadcrumb a { color: var(--gedeckt); }
.breadcrumb a:hover { color: var(--tinte); }

/* ---------- Produktseite ------------------------------------------------- */
.product-detail { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: start; }
/* Grid-Kinder dürfen unter ihre Inhaltsbreite schrumpfen – sonst drückt ein
   großes Galeriebild die ganze Spalte (und damit die Seite) breit. */
.product-detail > * { min-width: 0; }

.product-detail-info h1 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 6px; }

/* Galerie: wischbar wie bei Etsy */
.galerie { position: sticky; top: calc(var(--kopf) + 14px); }
.gal-rahmen {
  position: relative; border-radius: var(--radius-gr); overflow: hidden;
  background: #eceae6;
}
.gal-spur {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.gal-spur::-webkit-scrollbar { display: none; }
.gal-folie { flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 1/1; }
.gal-folie img, .gal-folie video { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.gal-folie video { cursor: default; background: #000; }
.gal-zaehler {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  background: rgba(255, 255, 255, .9); color: var(--tinte); font-size: .74rem; font-weight: 500;
  padding: 4px 11px; border-radius: 999px;
}
.gal-pfeil {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255, 255, 255, .88); color: var(--tinte); font-size: 1.4rem; line-height: 1;
  display: none;                                  /* nur auf Desktop */
  align-items: center; justify-content: center;
}
.gal-pfeil:hover { background: #fff; }
.gal-zurueck { left: 10px; }
.gal-vor { right: 10px; }
@media (hover: hover) and (min-width: 861px) {
  .gal-pfeil { display: flex; opacity: 0; transition: opacity .2s ease; }
  .gal-rahmen:hover .gal-pfeil { opacity: 1; }
}
.gal-punkte { display: flex; justify-content: center; gap: 2px; margin-top: 6px; flex-wrap: wrap; }
/* Der Punkt bleibt optisch klein, die Tippfläche ist durch das Polster aber
   25×25 px groß – mit 9 px wäre er am Handy kaum zu treffen. */
.gal-punkt {
  width: 9px; height: 9px; padding: 8px; box-sizing: content-box;
  border-radius: 50%; border: none; background: var(--linie);
  background-clip: content-box; cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
/* NUR background-color – die Kurzform `background:` würde das
   background-clip:content-box von oben zurücksetzen und den Punkt auf die
   volle Tippfläche aufblasen. */
/* Aktiver Punkt wird zur kleinen Pille (width wirkt dank content-box nur
   auf den sichtbaren Punkt, die Tippfläche wächst mit) */
.gal-punkt.aktiv { background-color: var(--tinte); width: 20px; border-radius: 5px; }
.gal-punkt-video {
  width: auto; height: auto; min-width: 25px; background: none;
  color: var(--gedeckt); font-size: .68rem; line-height: 1;
}
.gal-punkt-video.aktiv { color: var(--tinte); transform: none; background: none; }

/* Preis */
.product-detail-price { font-size: 1.5rem; font-family: var(--disp); color: var(--tinte); margin: 4px 0 20px; }
.product-detail-price .from { font-size: .9rem; color: var(--gedeckt); font-family: var(--sans); }
.tax-note { display: block; font-size: .76rem; color: var(--gedeckt); font-family: var(--sans); margin-top: 4px; }
/* Erklärung unter einem Eingabefeld (z.B. warum die Telefonnummer nötig ist) */
.feld-hinweis { display: block; margin-top: 6px; font-family: var(--sans);
  font-size: .78rem; color: var(--gedeckt); line-height: 1.45; }

/* Fertigungsdauer direkt unter dem Preis – beantwortet die häufigste Frage,
   bevor sie gestellt wird. */
.lieferzeit { font-family: var(--sans); font-size: .82rem; color: var(--gedeckt);
  margin: -4px 0 18px; display: flex; align-items: center; gap: 7px; }
.lieferzeit::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #6f8f63; flex: none; }
.product-description p { margin: 0 0 14px; color: var(--gedeckt-2); font-size: .95rem; }
.handmade-hint { font-size: .82rem; color: var(--gedeckt); text-align: center; margin: 12px 0 0; }

/* ---------- Varianten (preisbestimmend): Pillen ------------------------- */
.variant-grid, .variant-grid-compact { display: flex; flex-wrap: wrap; gap: 8px; }
.variant { cursor: pointer; }
/* Hinweistext der gewählten Ausführung (z. B. „zwei Namen untereinander“) */
.variant-hinweis { min-height: 1.2em; }

/* ---------- Varianten als Liste (lange Beschriftungen) ------------------ */
/* Fünf gestapelte Pillen sind am Handy unübersichtlich – als Zeilen mit
   Auswahlpunkt links und Preis rechts liest man sie auf einen Blick. */
.variant-liste { display: flex; flex-direction: column; border-top: 1px solid var(--linie); }
.variant-liste .variant { display: block; }
/* Raster statt Reihe: der Zusatztext rutscht unter den Namen, der Preis
   bleibt rechts – ganz ohne zusätzliche Hüllen im Template. */
.variant-liste .variant-body {
  display: grid; align-items: center; gap: 0 12px;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "punkt name preis" "punkt note preis";
  background: none; border-radius: 0; box-shadow: none;
  border-bottom: 1px solid var(--linie);
  padding: 14px 4px; transition: padding .25s ease, color .2s ease;
}
.variant-liste .variant-body::before { grid-area: punkt; }
.variant-liste .variant-name { grid-area: name; }
.variant-liste .variant-note { grid-area: note; }
.variant-liste .variant-price { grid-area: preis; }
.variant-liste .variant:hover .variant-body { box-shadow: none; padding-left: 10px; }
/* Auswahlpunkt */
.variant-liste .variant-body::before {
  content: ""; flex: 0 0 auto; width: 17px; height: 17px; border-radius: 999px;
  border: 1px solid var(--gedeckt); transition: border-color .2s ease, box-shadow .2s ease;
}
.variant-liste input:checked + .variant-body {
  background: none; color: var(--tinte);
}
.variant-liste input:checked + .variant-body::before {
  border-color: var(--tinte); box-shadow: inset 0 0 0 4px var(--grund), inset 0 0 0 12px var(--tinte);
}
.variant-liste .variant-name { white-space: normal; font-weight: 500; }
/* Zusatz („Aufteilung stimmen wir ab“) steht hier direkt in der Zeile */
.variant-liste .variant-note {
  display: block; font-size: .74rem; color: var(--gedeckt); font-weight: 400;
}
.variant-liste .variant-price { font-size: .92rem; color: var(--gedeckt-2); white-space: nowrap; }
.variant-liste input:checked + .variant-body .variant-price { color: var(--tinte); font-weight: 600; }

/* Versteckte Auswahlfelder dürfen KEINEN Platz beanspruchen.
   Hier stecken ZWEI Fallen drin:
   1. Ohne die festen 1px-Maße erben sie width:100% aus `.field input` (steht
      weiter unten und wäre sonst gleich stark) – daher der spezifischere
      Selektor mit [type="radio"].
   2. `position:absolute` allein genügt NICHT: ohne left/top bleiben die Felder
      an ihrer ursprünglichen Stelle und brechen damit aus dem wischbaren
      Farbstreifen aus. Der letzte Farbpunkt landete so bei x≈1924px und machte
      die ganze Seite seitlich verschiebbar. Erst `position:relative` am Label
      plus left/top am Feld hält sie sicher an Ort und Stelle. */
.variant, .swatch, .fontcard { position: relative; }

.variant input[type="radio"], .swatch input[type="radio"],
.fontcard input[type="radio"] {
  position: absolute; left: 0; top: 0;
  opacity: 0; pointer-events: none;
  width: 1px; height: 1px; margin: 0; padding: 0; border: 0;
}
.variant-body {
  display: inline-flex; align-items: baseline; gap: 8px;
  border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linie);
  padding: 11px 18px; background: #fff; transition: all .25s ease;
}
.variant:hover .variant-body { box-shadow: inset 0 0 0 1px var(--gedeckt); }
.variant input:checked + .variant-body { background: var(--tinte); color: var(--grund); box-shadow: none; }
.variant input:checked + .variant-body .variant-price { color: rgba(247, 245, 242, .75); }
.variant input:focus-visible + .variant-body { outline: 2px solid var(--akzent); outline-offset: 2px; }
.variant-name { font-weight: 500; font-size: .88rem; white-space: nowrap; }
/* Der erklärende Zusatz wandert als .variant-hinweis unter die Reihe */
.variant-note { display: none; }
.variant-price { font-size: .82rem; color: var(--gedeckt); white-space: nowrap; }

/* ---------- Farbauswahl -------------------------------------------------- */
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 9px; }
.swatch { cursor: pointer; text-align: center; }
.swatch-dot {
  display: block; width: 100%; aspect-ratio: 1/1; border-radius: 50%;
  border: 1px solid rgba(33, 28, 24, .14); box-shadow: inset 0 -2px 6px rgba(0, 0, 0, .05);
  transition: transform .15s ease, box-shadow .15s ease;
}
.swatch:hover .swatch-dot { transform: scale(1.08); }
/* Die gewählte Farbe steht etwas größer da und bekommt einen feinen Ring */
.swatch input:checked + .swatch-dot {
  box-shadow: 0 0 0 2px var(--grund), 0 0 0 4px var(--tinte), 0 4px 10px rgba(33, 28, 24, .18);
  transform: scale(1.16);
}
.swatch input:focus-visible + .swatch-dot { outline: 2px solid var(--akzent); outline-offset: 3px; }
/* Abstand nach oben: die gewählte Farbe wächst auf 116 % und trägt einen 4px
   starken Ring – bei nur 4px Abstand schnitt der in den Namen hinein. */
.swatch-name {
  display: block; font-size: .66rem; color: var(--gedeckt); margin-top: 10px;
  line-height: 1.25; transition: color .2s ease;
  hyphens: auto;   /* „knochen-weiß“ statt Überlauf – html hat lang="de" */
}
.swatch input:checked ~ .swatch-name { color: var(--tinte); font-weight: 600; }
.chosen-color { font-weight: 400; color: var(--gedeckt-2); }
.opt-help { font-size: .8rem; color: var(--gedeckt); margin: 7px 0 0; }
.opt-help a { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Geführter Ablauf: luftige Abschnitte statt Kästen ------------ */
/* Kein weißer Kasten mehr – Kapitälchen-Überschrift, rechts erscheint die
   getroffene Wahl mit einem Häkchen. */
.add-form.gefuehrt .schritt { margin-bottom: 28px; }
.schritt-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.schritt-nr { display: none; }
.schritt-titel {
  font-size: .72rem; letter-spacing: .17em; text-transform: uppercase;
  font-weight: 600; color: var(--gedeckt);
}
.schritt-wahl {
  margin-left: auto; font-size: .8rem; color: var(--tinte); font-weight: 500;
  text-align: right; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.schritt-wahl::before { content: "✓ "; color: var(--akzent); }
/* Solange nichts gewählt ist, darf die Zeile KEINEN Platz einnehmen – auf dem
   Handy stand sonst unter jeder Überschrift eine leere Zeile. */
.schritt-wahl:empty { display: none; }
.schritt-wahl.rein { animation: wahl-rein .35s cubic-bezier(.3, .9, .3, 1); }
@keyframes wahl-rein { from { opacity: 0; transform: translateX(10px); } }

/* Ein Schritt, der erst später dazukommt, schiebt sich sanft herein */
.schritt.reingeschoben, .field.reingeschoben {
  animation: schritt-rein .42s cubic-bezier(.3, .9, .3, 1);
}
@keyframes schritt-rein {
  from { opacity: 0; transform: translateY(-12px); }
}
.add-form.gefuehrt .schritt.ohne-eingabe .zeilen-felder { display: none; }

/* ---------- Wandernde Entwurfs-Karte ------------------------------------- */
/* Sie zeigt denselben Entwurf wie die gewählte Schriftkachel. Solange die
   Schriftauswahl im Bild ist, bleibt sie unsichtbar (die Kachel selbst ist
   die Vorschau). Scrollt die Auswahl nach oben weg, fliegt die Karte aus der
   Kachel heraus und begleitet die Farbwahl – Position setzt das Skript, damit
   sie vor dem Bestellknopf haltmacht. */
/* Flache Leiste statt hoher Karte: sie begleitet die Farbwahl, verdeckt dabei
   aber so wenig wie möglich. Wer den Entwurf groß sehen will, tippt die Lupe. */
.schwebe {
  position: fixed; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  width: 330px; max-width: calc(100vw - 28px);
  background: #fff; border: 1px solid var(--linie);
  border-radius: 999px; box-shadow: var(--schatten-gr);
  padding: 8px 44px 8px 8px;          /* rechts Platz für die Lupe */
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
/* .an = es gibt einen Entwurf · .zeigt = die Karte schwebt gerade */
.schwebe.an.zeigt { opacity: 1; pointer-events: auto; }
.schwebe-buehne {
  position: relative; background: #f5f3f0; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 84px; height: 56px; overflow: hidden;
}
.schwebe-buehne img { max-width: 92%; max-height: 86%; object-fit: contain; transition: opacity .25s ease; }
/* In der flachen Leiste ist für die Beschriftung kein Platz – die Herkunft
   ist durch die Form ohnehin klar. */
.schwebe-tag { display: none; }
.schwebe-zeile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  min-width: 0; flex: 1;
}
.schwebe-info {
  font-size: .74rem; color: var(--gedeckt); max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.schwebe-preis { font-family: var(--disp); color: var(--tinte); font-size: 1.1rem; }
/* Lupe: in der Leiste rechts aussen statt in der kleinen Bühne */
.schwebe .lupe {
  top: 50%; right: 10px; transform: translateY(-50%);
  width: 30px; height: 30px; background: var(--grund);
}
.schwebe .lupe:hover { background: #efece7; }
.vorschau-laedt {
  position: absolute; top: 4px; right: 5px; width: 12px; height: 12px;
  border: 2px solid var(--linie); border-top-color: var(--tinte);
  border-radius: 50%; animation: dreh .7s linear infinite;
}
@keyframes dreh { to { transform: rotate(360deg); } }

/* ---------- Farbstreifen: eine Zeile, wischbar --------------------------- */
.farb-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 10px; }
.farb-chip {
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--linie);
  background: #fff; color: var(--gedeckt-2); font-size: .78rem; font-weight: 500; cursor: pointer;
  transition: all .2s ease;
}
.farb-chip.aktiv { background: var(--tinte); border-color: var(--tinte); color: var(--grund); }
/* Oben/unten genug Luft: der gewählte Punkt wächst auf 116 % und trägt einen
   Ring – ohne das Polster schneidet ihn der Wischbereich (overflow-x) oben ab
   und er verschwindet halb unter der Gruppen-Zeile. */
/* Seitliches Polster wie oben: der gewählte Punkt ragt mit Vergrößerung und
   Ring rund 9px über seine Fläche hinaus – bei 2px schnitt ihn der
   Wischbereich am linken Rand an. scroll-padding hält ihn auch beim
   Wischen frei. */
.farb-streifen {
  display: flex; gap: 10px; overflow-x: auto; padding: 12px 10px 8px;
  scroll-snap-type: x proximity; scroll-padding-inline: 10px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.farb-streifen::-webkit-scrollbar { display: none; }
/* min-width: 0 ist entscheidend – ohne das drückt ein langer Farbname wie
   „knochenweiß“ das Element auf, und weil der Punkt width:100% hat, wird
   ausgerechnet dieser Kreis größer als alle anderen. */
.fs-punkt { flex: 0 0 58px; min-width: 0; scroll-snap-align: start; }
/* Platz für zwei Zeilen freihalten: sonst springt die Zeilenhöhe, sobald ein
   Name durch das Fettschreiben der Auswahl umbricht. */
.fs-punkt .swatch-name { min-height: 2.5em; }

/* Ausgeklappt: alle Farben auf einmal als Raster statt einer Wischzeile */
.farb-streifen.offen {
  flex-wrap: wrap; overflow-x: visible; gap: 12px 10px;
  max-height: 60vh; overflow-y: auto;
}
.farb-streifen.offen .fs-punkt { flex: 0 0 58px; }

.farb-fuss { display: flex; align-items: center; gap: 12px; margin-top: 4px; flex-wrap: wrap; }
.fs-hinweis { font-size: .72rem; color: var(--gedeckt); margin: 0; }
.farb-mehr {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer; padding: 4px 2px;
  font-size: .76rem; color: var(--gedeckt-2);
  border-bottom: 1px solid var(--linie); transition: color .2s ease, border-color .2s ease;
}
.farb-mehr:hover { color: var(--tinte); border-color: var(--tinte); }
.farb-mehr .chev {
  width: 13px; height: 13px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .3s ease;
}
.farb-mehr[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* ---------- Textzeilen --------------------------------------------------- */
.zeilen-felder { display: flex; flex-direction: column; gap: 10px; }
.zeile-feld { display: flex; align-items: center; gap: 10px; }
.zeile-label { flex: 0 0 62px; margin: 0; font-size: .78rem; color: var(--gedeckt); font-weight: 600; }
.zeile-feld input { flex: 1 1 auto; min-width: 0; }
/* ---------- Aufteilung: Schalter statt Häkchen -------------------------- */
/* Ein Schalter passt hier besser als ein Häkchen: er wirkt sofort (das
   Wunschfeld klappt auf) statt erst beim Abschicken – so ist die Regel bei
   heutigen Oberflächen. */
.frei-wahl { border: none; margin-top: 14px; padding-top: 0; font-size: .85rem; }
.aufteilung {
  background: #fff; border: 1px solid var(--linie);
  border-radius: 16px; padding: 4px 16px 6px;
}
.schalter-zeile {
  display: flex; align-items: center; gap: 16px; cursor: pointer;
  padding: 12px 0; margin: 0;
}
.schalter-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.schalter-text b { font-size: .88rem; font-weight: 500; color: var(--tinte); }
.schalter-text small { font-size: .76rem; color: var(--gedeckt); line-height: 1.4; }

.schalter { position: relative; flex: 0 0 auto; margin-left: auto; }
/* Das echte Feld liegt unsichtbar genau auf dem Schalter (nicht verschoben –
   sonst bricht es aus dem Layout aus, siehe Farbstreifen-Falle). */
.schalter input[type="checkbox"] {
  position: absolute; left: 0; top: 0; width: 1px; height: 1px;
  opacity: 0; margin: 0; padding: 0; border: 0; pointer-events: none;
}
.schalter-bahn {
  position: relative; display: block; width: 48px; height: 28px;
  border-radius: 999px; background: #ded8ce; transition: background .3s ease;
}
.schalter-knopf {
  position: absolute; left: 3px; top: 3px; width: 22px; height: 22px;
  border-radius: 999px; background: #fff;
  box-shadow: 0 1px 4px rgba(33, 28, 24, .28);
  transition: transform .3s cubic-bezier(.3, .9, .3, 1);
}
.schalter input:checked ~ .schalter-bahn { background: var(--tinte); }
.schalter input:checked ~ .schalter-bahn .schalter-knopf { transform: translateX(20px); }
.schalter input:focus-visible ~ .schalter-bahn { outline: 2px solid var(--akzent); outline-offset: 3px; }

/* Wunschfeld – erscheint, wenn der Schalter aus ist */
.aufteilung-wunsch { padding: 2px 0 10px; animation: wunsch-auf .3s ease; }
@keyframes wunsch-auf { from { opacity: 0; transform: translateY(-4px); } }
.aufteilung-wunsch label {
  display: block; margin-bottom: 7px;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600; color: var(--gedeckt);
}
.aufteilung-wunsch input {
  width: 100%; padding: 12px 16px; border: 1px solid var(--linie);
  border-radius: 999px; font: inherit; font-size: 16px; color: var(--tinte); background: var(--grund);
}
.aufteilung-wunsch input:focus {
  outline: none; border-color: var(--tinte); box-shadow: 0 0 0 3px rgba(33, 28, 24, .08);
}
.aufteilung-wunsch input::placeholder { color: #b3a89b; }

/* ---------- Wortzahl-Prüfung -------------------------------------------- */
/* Freundlicher Hinweis, kein Fehler: warm getönt statt rot, mit einem Knopf,
   der die passende Ausführung in einem Klick übernimmt. */
.wort-pruefung {
  margin-top: 12px; padding: 12px 14px;
  background: linear-gradient(120deg, var(--weich-1), var(--weich-2));
  border-radius: 14px;
  animation: wort-auf .35s ease;
}
@keyframes wort-auf { from { opacity: 0; transform: translateY(-5px); } }
.wort-text { margin: 0; font-size: .84rem; color: #6f5a4e; line-height: 1.5; }
.wort-text b { color: #4a3a30; font-weight: 600; }
.wort-aktionen { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.wort-aktionen:empty { display: none; }
.wort-wechsel {
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--tinte); color: var(--grund);
  padding: 9px 16px; font-size: .8rem;
  transition: transform .25s ease, box-shadow .25s ease;
}
.wort-wechsel:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(33, 28, 24, .2); }
.wort-kontakt { font-size: .8rem; color: #6f5a4e; text-decoration: underline; text-underline-offset: 3px; }
.wort-kontakt:hover { color: var(--tinte); }

/* ---------- Schriftauswahl: wischbare Reihe echter Schriftproben --------- */
.font-grid {
  display: flex; align-items: center; gap: 10px;
  overflow-x: auto; padding: 4px 2px 8px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* feste Mindesthöhe, damit die Reihe beim Vergrößern nicht springt */
  min-height: 116px;
}
.font-grid::-webkit-scrollbar { display: none; }
.fontcard {
  cursor: pointer; flex: 0 0 128px; scroll-snap-align: start;
  transition: flex-basis .35s cubic-bezier(.3, .9, .3, 1);
}
.fontcard-body {
  display: block; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--linie);
  background: #fff; padding: 8px 10px 7px; text-align: center;
  transition: box-shadow .25s ease, transform .25s ease;
}
.fontcard:hover .fontcard-body { transform: translateY(-2px); }
.fontcard input:checked + .fontcard-body { box-shadow: inset 0 0 0 1.5px var(--tinte); }
.fontcard input:focus-visible + .fontcard-body { outline: 2px solid var(--akzent); outline-offset: 2px; }
/* Leicht getönte Fläche: die Proben tragen die gewählte Farbe – auf reinem
   Weiß wären Weiß und Puderrosa unsichtbar. */
.fontcard-img {
  width: 100%; height: 46px; object-fit: contain; display: block;
  background: #f5f3f0; border-radius: 10px;
  transition: height .35s cubic-bezier(.3, .9, .3, 1), opacity .25s ease;
}
.fontcard-nr { display: block; font-size: .72rem; color: var(--gedeckt); margin-top: 4px; font-weight: 500; }
.fontcard input:checked + .fontcard-body .fontcard-nr { color: var(--tinte); }
.wisch-hinweis { font-size: .74rem; color: #b3a89b; margin: 2px 0 0; }

/* Die gewählte Schrift steht größer da als die übrigen */
.fontcard:has(input:checked) { flex-basis: 158px; }
.fontcard:has(input:checked) .fontcard-img { height: 64px; }
/* Während die Karte davonfliegt bzw. schwebt, bleibt der Platz frei */
.fontcard.abgereist .fontcard-body { opacity: .25; }

/* ---------- Lupe: Entwurf groß ansehen ----------------------------------- */
.lupe {
  position: absolute; top: 7px; right: 7px; z-index: 3;
  width: 27px; height: 27px; padding: 0; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .9); color: var(--gedeckt-2);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 1px 4px rgba(33, 28, 24, .1);
  opacity: 0; transform: scale(.7);
  transition: opacity .25s ease, transform .25s ease, color .2s ease;
}
.lupe svg {
  width: 13px; height: 13px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.lupe:hover { color: var(--tinte); background: #fff; }
/* nur an der gewählten Schrift sichtbar … */
.fontcard:has(input:checked) .lupe { opacity: 1; transform: none; }
/* … und immer auf der schwebenden Leiste (ihr transform steht weiter oben,
   deshalb hier NUR die Sichtbarkeit – sonst rutscht sie aus der Mitte). */
.schwebe .lupe { opacity: 1; }

/* ---------- Entwurf in groß (Popup) -------------------------------------- */
.entwurf-gross {
  position: fixed; inset: 0; z-index: 210;
  background: rgba(33, 28, 24, .72);
  display: grid; place-items: center; padding: 24px;
  opacity: 0; transition: opacity .32s ease;
}
/* muss NACH der display-Regel stehen, sonst gewinnt grid gegen [hidden] */
.entwurf-gross[hidden] { display: none; }
.entwurf-gross.auf { opacity: 1; }
.entwurf-gross-karte {
  background: #f5f3f0; border-radius: var(--radius); padding: 20px 20px 14px;
  width: min(560px, 92vw); box-shadow: var(--schatten-gr);
  transform-origin: top left;
}
.entwurf-gross-karte img {
  width: 100%; max-height: 60vh; object-fit: contain; display: block;
}
.entwurf-gross-zeile {
  margin: 12px 0 0; text-align: center; font-size: .8rem; color: var(--gedeckt);
}
.entwurf-gross-zu {
  position: absolute; top: 18px; right: 22px;
  background: none; border: 0; color: #fff; font-size: 1.7rem;
  line-height: 1; cursor: pointer; padding: 6px;
}

/* ---------- Aufklapp-Details unter dem Produkt --------------------------- */
.detail-akk { margin-top: 44px; padding-top: 10px; border-top: 1px solid var(--linie); max-width: 640px; }
.detail-akk details { border-bottom: 1px solid var(--linie); }
.detail-akk summary {
  list-style: none; display: flex; justify-content: space-between; align-items: center;
  padding: 16px 2px; font-size: .95rem; font-weight: 500; cursor: pointer;
}
.detail-akk summary::-webkit-details-marker { display: none; }
.detail-akk summary::after { content: "+"; font-size: 1.2rem; font-weight: 400; color: var(--gedeckt); transition: transform .3s ease; }
.detail-akk details[open] summary::after { transform: rotate(45deg); }
.detail-akk .akk-text { padding: 0 2px 16px; font-size: .88rem; color: var(--gedeckt-2); line-height: 1.65; }
.detail-akk .akk-text p { margin: 0 0 10px; }
.detail-akk details[open] .akk-text { animation: akk-auf .35s ease; }
@keyframes akk-auf { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- Großansicht -------------------------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200; background: rgba(33, 28, 24, .88);
  display: flex; align-items: center; justify-content: center; padding: 28px;
  cursor: zoom-out;
  animation: lb-auf .25s ease;
}
/* muss NACH .lightbox stehen: sonst gewinnt display:flex gegen [hidden] */
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 96%; max-height: 92vh; border-radius: 10px; box-shadow: var(--schatten-gr); animation: lb-zoom .3s ease; }
@keyframes lb-auf { from { opacity: 0; } }
@keyframes lb-zoom { from { opacity: 0; transform: scale(.96); } }
.lightbox-close {
  position: absolute; top: 18px; right: 24px; background: none; border: none;
  color: #fff; font-size: 1.9rem; cursor: pointer; line-height: 1;
}

/* ---------- Formulare ---------------------------------------------------- */
.field { margin-bottom: 16px; }
/* Feldbeschriftungen als Kapitälchen – wie die Schritt-Überschriften.
   NICHT verwandeln: Häkchen/Radio (ganze Sätze) sowie die Auswahl-Labels
   der Pillen, Farbpunkte und Schriftkacheln. */
.field label:not(.check):not(.radio):not(.variant):not(.swatch):not(.fontcard) {
  display: block; margin-bottom: 8px;
  font-size: .72rem; letter-spacing: .17em; text-transform: uppercase;
  font-weight: 600; color: var(--gedeckt);
}
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 16px; border: 1px solid var(--linie); border-radius: 999px;
  font: inherit; color: var(--tinte); background: #fff;
}
.field textarea { border-radius: var(--radius); }
.field select { border-radius: 999px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--tinte); box-shadow: 0 0 0 3px rgba(33, 28, 24, .08);
}
.field ::placeholder { color: #b3a89b; }
.add-form { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--linie); }

/* ---------- Menge + Kaufknopf in einer Zeile ----------------------------- */
.kaufzeile { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.kaufzeile .btn { flex: 1 1 220px; }
.menge-stepper {
  display: inline-flex; align-items: center; background: #fff;
  border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linie);
}
.menge-stepper button {
  width: 42px; height: 50px; border: none; background: none; cursor: pointer;
  font-size: 1.1rem; color: var(--gedeckt-2); border-radius: 999px;
}
.menge-stepper button:hover { color: var(--tinte); }
.menge-stepper input {
  width: 40px; border: none; background: none; text-align: center;
  font-size: 16px; color: var(--tinte); padding: 0; -moz-appearance: textfield;
}
.menge-stepper input::-webkit-inner-spin-button,
.menge-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.menge-stepper input:focus { outline: none; }

/* Preis „tickt“ kurz, wenn er sich ändert */
#live-price { display: inline-block; }
#live-price.tickt { animation: preis-tick .35s ease; }
@keyframes preis-tick { 30% { transform: scale(1.12); } }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

fieldset.card { border: 1px solid var(--linie); }
fieldset legend { font-family: var(--disp); font-weight: 500; padding: 0 8px; font-size: 1.05rem; }

.radio, .check { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; cursor: pointer; }
.radio input, .check input { margin-top: 4px; width: auto; accent-color: var(--tinte); }
.check { border-top: 1px solid var(--linie); margin-top: 8px; padding-top: 16px; }

/* ---------- Karten ------------------------------------------------------- */
.card { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; }
.card.highlight { background: linear-gradient(120deg, var(--weich-1), var(--weich-2)); border-color: transparent; }

/* ---------- Warenkorb ---------------------------------------------------- */
.cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: 30px; align-items: start; }
.cart-item {
  display: grid; grid-template-columns: 84px 1fr auto auto auto; gap: 16px; align-items: center;
  padding: 16px 0; border-bottom: 1px solid var(--linie);
}
.cart-item-img { width: 84px; height: 84px; object-fit: cover; border-radius: 14px; }
.cart-item-name { font-weight: 500; color: var(--tinte); }
.cart-item-options { list-style: none; padding: 0; margin: 6px 0 0; font-size: .8rem; color: var(--gedeckt); }
.cart-item-options span { font-weight: 600; }
.mini-badge { display: inline-block; background: var(--gruen); color: #fff; font-size: .68rem; padding: 2px 9px; border-radius: 999px; margin-top: 6px; }
.cart-item-qty form { display: flex; align-items: center; gap: 10px; }
.cart-item-qty button {
  width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--linie);
  background: #fff; font-size: 1.05rem; cursor: pointer; line-height: 1;
  transition: border-color .2s ease;
}
.cart-item-qty button:hover { border-color: var(--tinte); }
.cart-item-price { font-weight: 500; font-family: var(--disp); color: var(--tinte); white-space: nowrap; }
.cart-item-remove button { background: none; border: none; color: var(--gedeckt); font-size: 1.05rem; cursor: pointer; }
.cart-item-remove button:hover { color: var(--tinte); }

.cart-summary {
  background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 24px; position: sticky; top: calc(var(--kopf) + 14px);
}
.sum-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: .95rem; }
.sum-total { border-top: 1px solid var(--linie); margin-top: 8px; padding-top: 14px; font-size: 1.2rem; font-family: var(--disp); }
.ship-hint { font-size: .8rem; color: var(--gedeckt); margin: 0 0 8px; }
.cart-summary .btn { margin-top: 10px; }

.empty-state { text-align: center; padding: 60px 0; }
.empty-state p { color: var(--gedeckt); font-size: 1.05rem; margin-bottom: 20px; }

/* ---------- Kasse -------------------------------------------------------- */
.checkout-layout { display: grid; grid-template-columns: 1fr 360px; gap: 30px; align-items: start; }
.checkout-summary {
  background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 24px; position: sticky; top: calc(var(--kopf) + 14px);
}
.mini-cart { list-style: none; padding: 0; margin: 0 0 16px; }
.mini-cart li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--linie); font-size: .88rem; }
.mini-cart-qty { color: var(--gedeckt); font-weight: 600; }
.mini-cart-name small { display: block; color: var(--gedeckt); }
.mini-cart-price { font-weight: 500; white-space: nowrap; }
.back-link { display: block; text-align: center; margin-top: 14px; font-size: .88rem; color: var(--gedeckt-2); }

/* ---------- PayPal an der Kasse ----------------------------------------- */
.paypal-bereich { margin-top: 4px; animation: schritt-rein .35s ease; }
#paypal-knopf { min-height: 50px; }
.paypal-hinweis { margin: 10px 0 0; text-align: center; }
.paypal-fehler {
  margin: 12px 0 0; padding: 11px 14px; border-radius: var(--radius-kl);
  background: #fbe5e8; color: #9a3a4c; font-size: .84rem; line-height: 1.5;
}
/* Zahlungsstand in der Bestellübersicht */
.badge-bezahlt { background: #e9f3e6; color: #3f6238; }
.bezahlt-hinweis {
  display: inline-flex; align-items: center; gap: 8px;
  background: #e9f3e6; color: #3f6238; border-radius: 999px;
  padding: 8px 16px; font-size: .85rem; margin: 0 0 14px;
}

/* ---------- Bestellbestätigung ------------------------------------------ */
.success-hero { text-align: center; padding: 20px 0 30px; }
.success-check {
  width: 76px; height: 76px; margin: 0 auto 16px; border-radius: 50%;
  background: var(--tinte); color: var(--grund); font-size: 2rem;
  display: flex; align-items: center; justify-content: center;
}
.payment-card { background: linear-gradient(120deg, var(--weich-1), var(--weich-2)); border-color: transparent; }
.bank-table { width: 100%; border-collapse: collapse; margin: 14px 0; }
.bank-table td { padding: 9px 10px; border-bottom: 1px solid rgba(33, 28, 24, .1); }
.bank-table td:first-child { color: #8a7266; width: 42%; }

/* ---------- Rechtsseiten ------------------------------------------------- */
.legal h2 { margin-top: 30px; font-size: 1.2rem; }
.legal p { margin: 0 0 12px; }
.draft-banner {
  background: #fff7e0; border: 1px solid #f0dca0; color: #7a5c14;
  padding: 14px 18px; border-radius: var(--radius-kl); margin-bottom: 26px; font-size: .9rem;
}
.draft-banner code { background: rgba(0, 0, 0, .06); padding: 1px 6px; border-radius: 4px; }
.steps { padding-left: 20px; }
.steps li { margin-bottom: 8px; }

/* ---------- Kontakt ------------------------------------------------------ */
.contact-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px; align-items: start; }
.contact-info { padding: 8px; }
.contact-info p { margin: 8px 0; }
.formular-vorwort { font-size: .85rem; color: var(--gedeckt); margin: 0 0 18px; }
.kontakt-knoepfe { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }

/* ---------- WhatsApp & Instagram ---------------------------------------- */
/* Nur verlinkt, nie eingebettet: beim Laden der Seite geht nichts an
   WhatsApp oder Meta – erst der Klick öffnet den Chat. */
.wa-karte {
  display: flex; align-items: center; gap: 16px;
  background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 16px 20px; margin: 0 0 28px; color: var(--tinte);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.wa-karte:hover {
  text-decoration: none; transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(33, 28, 24, .1); border-color: #cfd8cd;
}
.wa-zeichen {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 999px;
  background: #e7f0e5; color: #3f7d43;
}
.wa-zeichen svg { width: 26px; height: 26px; }
.wa-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wa-text b { font-size: .95rem; font-weight: 500; }
.wa-text small { font-size: .8rem; color: var(--gedeckt); line-height: 1.45; }
.wa-pfeil { margin-left: auto; color: var(--gedeckt); transition: transform .25s ease; }
.wa-karte:hover .wa-pfeil { transform: translateX(4px); }

/* Kleines Zeichen im Knopf */
.wa-mini { display: inline-grid; place-items: center; }
.wa-mini svg { width: 17px; height: 17px; }

/* Zeichen in der Fußzeile */
.footer-sozial { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.footer-sozial a {
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 999px; color: #b3a89b;
  transition: color .25s ease, background .25s ease;
}
.footer-sozial a:hover { color: #f2ede6; background: rgba(255, 255, 255, .08); text-decoration: none; }
.footer-sozial svg { width: 19px; height: 19px; }

/* ---------- Admin (innen, bewusst schlicht) ------------------------------ */
.admin-head { display: flex; justify-content: space-between; align-items: center; }
.admin-order-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.admin-order-total { font-family: var(--disp); font-size: 1.3rem; color: var(--tinte); }
.admin-order-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.admin-order-grid h4 { margin: 0 0 8px; }
.admin-items { list-style: none; padding: 0; margin: 0; }
.admin-items li { padding: 6px 0; border-bottom: 1px dashed var(--linie); }
.admin-status { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linie); }
.admin-status label { font-size: .9rem; color: var(--gedeckt); }
.badge { display: inline-block; font-size: .7rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }
.badge-neu { background: #fbe5e8; color: #9a3a4c; }
.badge-bezahlt { background: #e9f3e6; color: #3f6238; }
.badge-versendet { background: #e4eef7; color: #33597a; }
.badge-erledigt { background: #eee; color: #666; }
.badge-storniert { background: #efe7e2; color: #8a6a58; text-decoration: line-through; }

.admin-head-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Gutschein ---------------------------------------------------- */
.sum-rabatt { color: #3f6238; }
.gutschein-form { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linie); }
.gutschein-form label { display: block; font-family: var(--sans); font-size: .78rem;
  color: var(--gedeckt); margin-bottom: 7px; }
.gutschein-zeile { display: flex; gap: 8px; }
.gutschein-zeile input {
  flex: 1; min-width: 0; padding: 10px 16px; border: 1px solid var(--linie);
  border-radius: 999px; font-family: var(--sans);
  font-size: 16px;              /* 16px: sonst zoomt iOS beim Antippen hinein */
  text-transform: uppercase; letter-spacing: .04em;
}
.gutschein-zeile .btn { flex: none; padding-inline: 20px; }
.gutschein-aktiv { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0; font-family: var(--sans); font-size: .85rem; color: #3f6238; }
.gutschein-weg { background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--sans); font-size: .8rem; color: var(--gedeckt);
  text-decoration: underline; text-underline-offset: 3px; }
.gutschein-liste { display: grid; gap: 14px; }
.gutschein-karte.ist-aus { opacity: .55; }
.gutschein-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------- Besuchsstatistik (nur im Admin) ------------------------------ */
.stat-zahlen { display: flex; gap: 14px; flex-wrap: wrap; }
.stat-kachel { flex: 1 1 130px; background: #fff; border: 1px solid var(--linie);
  border-radius: 16px; padding: 18px 20px; text-align: center; }
.stat-wert { display: block; font-family: var(--disp); font-size: 2rem; color: var(--tinte); }
.stat-titel { font-family: var(--sans); font-size: .76rem; color: var(--gedeckt); }
/* Balken ohne Diagramm-Bibliothek – reines CSS, nichts wird nachgeladen */
.balken-reihe { display: flex; align-items: flex-end; gap: 4px; height: 160px; margin-top: 10px; }
.balken-spalte { flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; height: 100%; min-width: 0; }
.balken { width: 100%; max-width: 34px; background: var(--tinte); border-radius: 5px 5px 0 0;
  min-height: 2px; transition: height .3s ease; }
.balken-tag { font-family: var(--sans); font-size: .62rem; color: var(--gedeckt);
  margin-top: 6px; white-space: nowrap; }
.admin-hinweis {
  background: #fdf6e6; border: 1px solid #ecdcb4; border-radius: 12px;
  padding: 12px 16px; font-size: .9rem; margin: 0 0 18px;
}
/* Storno abgesetzt: soll nicht wie der nächste Schritt aussehen */
.chip-storno { margin-left: auto; border-color: #e0c9c9; color: #9a3a4c; }
.admin-sendung { display: flex; align-items: center; gap: 8px; flex-basis: 100%; }
.admin-sendung label { font-size: .8rem; }
.admin-sendung input {
  flex: 1; min-width: 0; max-width: 260px; padding: 7px 12px;
  border: 1px solid var(--linie); border-radius: 999px;
  font-family: var(--sans); font-size: 16px;   /* 16px: iOS zoomt sonst hinein */
}
.admin-sendung-anzeige { font-size: .85rem; color: var(--gedeckt); margin: 8px 0 0; }
.einst-form fieldset { margin-bottom: 20px; }
.einst-form .check { margin-bottom: 14px; }
.einst-form textarea { width: 100%; }

/* ---------- Hinweisband über allen Seiten (Urlaub o.Ä.) ------------------ */
.shop-banner {
  background: #fdf6e6; border: 1px solid #ecdcb4; border-radius: 14px;
  padding: 13px 18px; margin: 18px 0 0; text-align: center;
  font-family: var(--sans); font-size: .9rem; color: #6d5a33;
}
.shop-banner-stopp { background: #fbe9e9; border-color: #eccdcd; color: #8a3b3b; }

/* Lockvogel gegen Spam-Bots: unsichtbar, aber nicht display:none – manche
   Bots überspringen ausgeblendete Felder gezielt. */
.lockvogel {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

/* ---------- Fußzeile ----------------------------------------------------- */
.site-footer {
  background: var(--tinte); color: #b3a89b; margin-top: 56px;
  border-radius: var(--radius-gr) var(--radius-gr) 0 0;
}
.footer-zeile { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 30px 0 22px; font-size: .88rem; }
.footer-zeile img { width: 54px; filter: invert(92%) sepia(4%) saturate(300%) hue-rotate(340deg); opacity: .9; }
.footer-zeile a { color: #b3a89b; }
.footer-zeile a:hover { color: #f2ede6; text-decoration: none; }
.footer-unten {
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
  border-top: 1px solid #322b24; padding: 16px 0 28px; font-size: .76rem; color: #776c5f;
}
.footer-unten a { color: #776c5f; }
.footer-unten a:hover { color: #f2ede6; text-decoration: none; }

/* ---------- Warenkorb-Flug ----------------------------------------------- */
/* Das kleine Bild, das beim „In den Warenkorb“ zum Symbol fliegt. */
.flieger {
  position: fixed; z-index: 300; width: 74px; height: 74px;
  border-radius: 14px; object-fit: cover; pointer-events: none;
  box-shadow: var(--schatten-gr);
  transition: transform .75s cubic-bezier(.35, .8, .35, 1), opacity .75s ease;
}

/* ---------- Responsive --------------------------------------------------- */
@media (max-width: 860px) {
  .kopf-rechts .kopf-link { display: none; }

  .held-buehne { aspect-ratio: 4 / 4.6; }
  .held-lage { background: linear-gradient(10deg, rgba(247, 245, 242, .94) 6%, rgba(247, 245, 242, .5) 44%, rgba(247, 245, 242, 0) 66%); }
  .held-lage h1 { font-size: clamp(1.8rem, 8.4vw, 2.6rem); }
  .held-pfeil { display: none; }
  /* Punkte nach oben rechts – unten steht die Vertrauenszeile */
  .held-punkte { top: 16px; bottom: auto; right: 16px; }

  .kat-raster { grid-template-columns: 1fr 1fr; gap: 12px; }
  .kat-kachel { aspect-ratio: 3 / 3.2; }
  .kat-kachel:last-child { grid-column: span 2; aspect-ratio: 16 / 7.5; }

  .product-grid { grid-template-columns: 1fr 1fr; gap: 20px 12px; }

  .product-detail { grid-template-columns: 1fr; gap: 24px; }
  .galerie { position: static; }
  .gal-rahmen { border-radius: var(--radius); }
  .color-grid { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); }
  .cart-layout, .checkout-layout, .contact-layout, .admin-order-grid { grid-template-columns: 1fr; }
  .cart-summary, .checkout-summary { position: static; }
  .cart-item { grid-template-columns: 64px 1fr auto; grid-template-areas: "img info info" "img qty price" "img remove remove"; row-gap: 8px; }
  .cart-item-img { grid-area: img; width: 64px; height: 64px; }
  .cart-item-info { grid-area: info; }
  .cart-item-qty { grid-area: qty; }
  .cart-item-price { grid-area: price; text-align: right; }
  .cart-item-remove { grid-area: remove; }
}

@media (max-width: 480px) {
  .grid-2 { grid-template-columns: 1fr; }
  .usps { flex-direction: column; align-items: center; gap: 10px; }
  .usps i { display: none; }
  .footer-zeile { gap: 14px; }
}

/* =========================================================================
   Handy: der Bestellablauf muss sich mit dem Daumen bedienen lassen.
   Faustregel für Tippflächen: mindestens 44 px.
   ========================================================================= */
@media (max-width: 620px) {
  .section { padding: 32px 0; }
  .wrap { padding: 0 16px; }

  /* Formularfelder: 16px Schriftgröße verhindert das Hineinzoomen in iOS */
  .field input, .field select, .field textarea { font-size: 16px; padding: 13px 16px; }

  .add-form.gefuehrt .schritt { padding: 14px 14px 16px; border-radius: 16px; }
  .schritt-kopf { margin-bottom: 10px; }
  .schritt-titel { font-size: .92rem; }
  .schritt-wahl { max-width: 100%; margin-left: 0; flex-basis: 100%; text-align: left; }

  /* Zeilenfelder untereinander statt nebeneinander */
  .zeile-feld { flex-direction: column; align-items: stretch; gap: 4px; }
  .zeile-label { flex-basis: auto; }

  /* Varianten-Pillen: große Tippfläche für den Daumen */
  .variant-body { padding: 13px 18px; }

  /* Farbpunkte: min. 44px Tippfläche */
  .color-grid { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 12px 8px; }
  .swatch-dot { min-height: 46px; }
  .swatch-name { font-size: .62rem; }

  .btn-lg { padding: 16px 24px; font-size: 1rem; }

  /* Wandernde Leiste: am Handy etwas schmaler (top/left setzt das Skript) */
  .schwebe { width: 300px; padding: 7px 40px 7px 7px; }
  .schwebe-buehne { flex-basis: 74px; height: 50px; }
  .font-grid { min-height: 108px; }
  .fontcard:has(input:checked) { flex-basis: 148px; }
  .fontcard:has(input:checked) .fontcard-img { height: 58px; }

  .detail-akk { margin-top: 32px; }
}

/* ---------- Wenig Bewegung gewünscht ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .rv { opacity: 1; transform: none; transition: none; }
  html.js img.blurup { filter: none; transform: none; transition: none; }
  html.js .stimmen-sterne span { opacity: 1; transition: none; }
  * { animation-duration: .001s !important; animation-iteration-count: 1 !important; }
  .held-folie, .stimme, .flieger { transition-duration: .001s !important; }
  .schwebe, .fontcard, .fontcard-img, .entwurf-gross, .entwurf-gross-karte { transition-duration: .001s !important; }
  @view-transition { navigation: none; }
}