/* VxDionysos balance page. Colours follow the theme; a soft card for the result. */
.vxd-balance { max-width: 560px; margin: 0 auto; padding: 8px 0 24px 0; }
.vxd-balance-intro { margin-bottom: 18px; }
.vxd-balance-form label { display: block; font-weight: 600; margin-bottom: 6px; }
.vxd-balance-row { display: flex; gap: 8px; align-items: stretch; }
.vxd-balance-input { flex: 1 1 auto; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.08em; text-transform: uppercase; font-size: 16px; }
.vxd-balance-result { margin-top: 20px; padding: 18px 20px; border-radius: 8px; border: 1px solid #e1ddd6; background: #fbfaf7; }
.vxd-tone-ok { border-color: #bfe3c7; background: #f1faf3; }
.vxd-tone-warn { border-color: #f0c9a0; background: #fff7ee; }
.vxd-balance-value { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.vxd-balance-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: #6b6b6b; }
.vxd-balance-amount { font-size: 32px; font-weight: 700; line-height: 1.1; }
.vxd-balance-date { font-size: 14px; color: #444; }
.vxd-balance-message { margin: 0; }
@media (max-width: 480px) {
  .vxd-balance-row { flex-direction: column; }
  .vxd-balance-row .btn { width: 100%; }
}

/* ------------------------------------------------------------------
   Der Gutschein-Konfigurator auf der Produktseite.

   Er sitzt im Warenkorb-Formular des Themes, also erbt er dessen
   Schrift und Farben und bringt nur Rhythmus und Form mit. Die
   Akzentfarbe kommt aus der Variable, damit ein anderer Shop sie
   überschreiben kann, ohne die Datei anzufassen.
   ------------------------------------------------------------------ */
.vxd-config {
  --vxd-accent: #a64b2a;
  --vxd-line: #ddd7ce;
  --vxd-soft: #faf8f5;
  --vxd-text: #262626;
  --vxd-muted: #6f6a63;
  margin: 24px 0 8px 0;
  padding: 22px 22px 18px 22px;
  border: 1px solid var(--vxd-line);
  border-radius: 10px;
  background: var(--vxd-soft);
  max-width: 100%;
  box-sizing: border-box;
}
.vxd-config *, .vxd-config *::before, .vxd-config *::after { box-sizing: border-box; }

.vxd-row { margin: 0 0 18px 0; }
.vxd-row:last-child { margin-bottom: 0; }

.vxd-label {
  display: block;
  /* Themes richten Formular-Beschriftungen gern rechts aus; hier nicht. */
  text-align: left;
  float: none;
  width: auto;
  margin: 0 0 7px 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--vxd-muted);
}
.vxd-hint { display: block; text-align: left; margin-top: 6px; font-size: 13px; color: var(--vxd-muted); }

.vxd-input {
  max-width: 100%; box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--vxd-line);
  border-radius: 6px;
  background: #fff;
  font: inherit;
  color: var(--vxd-text);
  line-height: 1.4;
}
.vxd-input:focus { outline: 2px solid var(--vxd-accent); outline-offset: 1px; border-color: var(--vxd-accent); }
.vxd-input.is-wrong { border-color: #c0392b; background: #fdf4f3; }
textarea.vxd-input {
  max-width: 100%; box-sizing: border-box; resize: vertical; min-height: 84px; }

/* Beträge als Reihe von Marken */
.vxd-amounts { display: flex; flex-wrap: wrap; gap: 8px; }
.vxd-amount {
  appearance: none;
  padding: 9px 14px;
  border: 1px solid var(--vxd-line);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-weight: 600;
  color: var(--vxd-text);
  cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
}
.vxd-amount:hover { border-color: var(--vxd-accent); }
.vxd-amount.is-on { background: var(--vxd-accent); border-color: var(--vxd-accent); color: #fff; }
.vxd-amount-free { font-weight: 500; }

.vxd-free-wrap { position: relative; margin-top: 10px; max-width: 220px; }
.vxd-free { padding-right: 30px; font-weight: 600; }
.vxd-unit { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--vxd-muted); }

/* Formate als kleine Karten mit Skizze */
.vxd-formats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.vxd-format {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--vxd-line);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
.vxd-format:hover { border-color: var(--vxd-accent); }
.vxd-format.is-on { border-color: var(--vxd-accent); box-shadow: inset 0 0 0 1px var(--vxd-accent); }
.vxd-format-name { font-weight: 700; font-size: 15px; color: var(--vxd-text); }
.vxd-format-hint { font-size: 12px; line-height: 1.35; color: var(--vxd-muted); }

/* Die Skizze zeigt, was man bekommt: Blatt, Bildfläche, Textzeilen */
.vxd-format-sketch {
  display: block;
  width: 34px;
  height: 46px;
  margin-bottom: 4px;
  border: 1px solid #c7c0b6;
  border-radius: 2px;
  background: #fff;
  position: relative;
  overflow: hidden;
}
.vxd-format-sketch::before { content: ""; position: absolute; background: #cfc6ba; }
.vxd-format-sketch::after {
  content: ""; position: absolute; left: 5px; right: 5px; height: 1px; background: #ddd6cb;
  box-shadow: 0 4px 0 #ddd6cb, 0 8px 0 #ddd6cb;
}
.vxd-sketch-classic::before { left: 0; right: 0; top: 0; height: 18px; }
.vxd-sketch-classic::after { top: 26px; }
.vxd-sketch-modern::before { left: 9px; top: 7px; width: 16px; height: 16px; border-radius: 50%; }
.vxd-sketch-modern::after { top: 30px; }
.vxd-sketch-split { width: 46px; height: 34px; }
.vxd-sketch-split::before { left: 0; top: 0; bottom: 0; width: 20px; }
.vxd-sketch-split::after { left: 25px; right: 4px; top: 10px; }
.vxd-sketch-fold::before { left: 0; right: 0; top: 22px; height: 1px; background: #a99f92; }
.vxd-sketch-fold::after { top: 30px; }

/* Schriften zeigen sich selbst */
.vxd-fonts { display: flex; flex-wrap: wrap; gap: 8px; }
.vxd-font {
  padding: 9px 16px;
  border: 1px solid var(--vxd-line);
  border-radius: 6px;
  background: #fff;
  font-size: 17px;
  color: var(--vxd-text);
  cursor: pointer;
}
.vxd-font:hover { border-color: var(--vxd-accent); }
.vxd-font.is-on { border-color: var(--vxd-accent); box-shadow: inset 0 0 0 1px var(--vxd-accent); }
.vxd-font-lora { font-family: Georgia, "Times New Roman", serif; }
.vxd-font-caveat { font-family: "Segoe Script", "Bradley Hand", cursive; font-size: 19px; }

/* Motive */
.vxd-designs { display: flex; flex-wrap: wrap; gap: 8px; }
.vxd-design {
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
  line-height: 0;
}
.vxd-design > img { width: 78px; height: 78px; object-fit: cover; display: block; }
.vxd-design.is-on { border-color: var(--vxd-accent); }
.vxd-design[data-design="0"] {
  line-height: 1.2; padding: 9px 14px; border: 1px solid var(--vxd-line); font: inherit; color: var(--vxd-muted);
}
.vxd-design[data-design="0"].is-on { border-color: var(--vxd-accent); color: var(--vxd-text); }

/* Zähler unter dem Gruß */
.vxd-counter { display: block; margin-top: 5px; font-size: 12px; color: var(--vxd-muted); text-align: right; }

/* Der Satz, der zwischen den Wegen umschaltet */
.vxd-switch {
  display: inline-block;
  margin-top: 4px;
  font-size: 15px;
  color: var(--vxd-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.vxd-switch:hover { color: var(--vxd-text); }
.vxd-switch-up { margin: 0 0 16px 0; }

.vxd-errors {
  margin: 0 0 16px 0;
  padding: 11px 14px;
  border: 1px solid #e3b4ae;
  border-left: 3px solid #c0392b;
  border-radius: 6px;
  background: #fdf4f3;
  color: #8e2a1f;
  font-size: 14px;
}

.vxd-actions { margin-top: 20px; }
.vxd-submit, .vxd-fallback {
  display: inline-block;
  padding: 13px 28px;
  border: 0;
  border-radius: 6px;
  background: var(--vxd-accent);
  color: #fff;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;
}
.vxd-submit:hover, .vxd-fallback:hover { filter: brightness(1.08); color: #fff; }
.vxd-submit.is-busy { opacity: .65; cursor: progress; }

.vxd-valid { margin: 12px 0 0 0; font-size: 12px; color: var(--vxd-muted); }

.vxd-done {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 16px; padding: 12px 14px;
  border: 1px solid #bfe3c7; border-radius: 6px; background: #f1faf3; color: #1f5c32;
}
.vxd-done-link { font-weight: 700; color: #1f5c32; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 480px) {
  .vxd-config { padding: 16px 14px; }
  .vxd-formats { grid-template-columns: 1fr; }
  .vxd-submit, .vxd-fallback { display: block; width: 100%; text-align: center; }
  .vxd-design > img { width: 64px; height: 64px; }
}

/* ------------------------------------------------------------------
   Übersichtsseite, Kundenkonto, eigene Seite
   ------------------------------------------------------------------ */
.vxd-page { max-width: 1100px; margin: 0 auto; padding: 8px 0 28px 0; }
.vxd-intro { max-width: 60ch; margin-bottom: 26px; font-size: 17px; line-height: 1.6; }
.vxd-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.vxd-tile {
  display: flex; flex-direction: column;
  border: 1px solid #ddd7ce; border-radius: 10px; background: #fff;
  overflow: hidden; text-decoration: none; color: inherit;
  transition: border-color .12s, transform .12s;
}
.vxd-tile:hover { border-color: #a64b2a; transform: translateY(-2px); color: inherit; }
.vxd-tile-image { display: block; line-height: 0; background: #f2efe9; }
.vxd-tile-image img { width: 100%; height: 150px; object-fit: cover; display: block; }
.vxd-tile-title { padding: 14px 16px 4px 16px; font-size: 17px; font-weight: 700; }
.vxd-tile-text { padding: 0 16px 16px 16px; font-size: 14px; line-height: 1.5; color: #6f6a63; }
.vxd-balance-link { margin-top: 26px; }
.vxd-empty { color: #6f6a63; }
.vxd-form .vxd-row { max-width: 560px; }
.vxd-table { width: 100%; }
.vxd-table td, .vxd-table th { vertical-align: top; }
@media (max-width: 600px) {
  .vxd-table { display: block; overflow-x: auto; }
}

/* ------------------------------------------------------------------
   Die Gestalterseite: drei Schritte links, die Karte rechts.

   Die Karte ist kein Beiwerk, sie ist der Grund, warum jemand hier ist.
   Deshalb bekommt sie eine eigene Spalte, bleibt beim Rollen stehen und
   behält ihr Blattverhältnis.
   ------------------------------------------------------------------ */
.vxd-designer {
  --vxd-accent: #a64b2a;
  --vxd-line: #ddd7ce;
  --vxd-soft: #faf8f5;
  --vxd-text: #262626;
  --vxd-muted: #6f6a63;
  max-width: 1200px;
  margin: 0 auto;
  padding: 4px 0 32px 0;
}
.vxd-designer *, .vxd-designer *::before, .vxd-designer *::after { box-sizing: border-box; }

/* Das Band mit den drei Schritten */
.vxd-band {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 26px 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.vxd-band-step {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1 1 180px;
  padding: 11px 16px;
  border-bottom: 3px solid var(--vxd-line);
  color: var(--vxd-muted);
  font-size: 15px;
}
.vxd-band-step.is-on { border-bottom-color: var(--vxd-accent); color: var(--vxd-text); font-weight: 700; }
.vxd-band-step.is-done { border-bottom-color: #c6b8a8; color: var(--vxd-text); }
.vxd-band-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--vxd-line); color: #fff; font-size: 13px; font-weight: 700; flex: 0 0 auto;
}
.vxd-band-step.is-on .vxd-band-no, .vxd-band-step.is-done .vxd-band-no { background: var(--vxd-accent); }

/*
 * Die rechte Spalte muss so hoch sein wie die Zeile, sonst hat `sticky` keinen
 * Weg zum Kleben: mit `align-items: start` war die Spalte nur so hoch wie die
 * Vorschau selbst, und sie scrollte beim ersten langen Text aus dem Bild.
 */
.vxd-columns { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; align-items: stretch; }

/* Ein Schritt */
.vxd-step { border: 1px solid var(--vxd-line); border-radius: 10px; background: #fff; margin: 0 0 14px 0; overflow: hidden; }
.vxd-step-head {
  display: flex; align-items: center; gap: 12px;
  margin: 0; padding: 16px 20px;
  font-size: 17px; line-height: 1.3;
  background: var(--vxd-soft);
}
.vxd-step.is-done .vxd-step-head { cursor: pointer; }
.vxd-step-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  background: var(--vxd-line); color: #fff; font-size: 14px; font-weight: 700;
}
.vxd-step.is-open .vxd-step-no, .vxd-step.is-done .vxd-step-no { background: var(--vxd-accent); }
.vxd-step-title { font-weight: 700; }
.vxd-step-summary { margin-left: auto; font-size: 14px; font-weight: 400; color: var(--vxd-muted); text-align: right; }
.vxd-step-change {
  border: 0; background: none; padding: 0 0 0 10px; color: var(--vxd-accent);
  font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.vxd-step-body { display: none; padding: 20px; }
.vxd-step.is-open .vxd-step-body { display: block; }

/* Reiter nach Anlass */
.vxd-tabs { display: flex; flex-wrap: wrap; gap: 2px; margin: 0 0 18px 0; border-bottom: 1px solid var(--vxd-line); }
.vxd-tab {
  padding: 8px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px;
  color: var(--vxd-muted); text-decoration: none; font-size: 15px;
}
.vxd-tab:hover { color: var(--vxd-text); }
.vxd-tab.is-on { border-bottom-color: var(--vxd-accent); color: var(--vxd-text); font-weight: 700; }

.vxd-note {
  margin: 0 0 16px 0; padding: 10px 14px;
  border-left: 3px solid #e0b76a; background: #fdf8ee;
  font-size: 14px; color: #6b5526;
}

/* Die Entwurfskarten */
.vxd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 22px; }
.vxd-card {
  display: flex; flex-direction: column; gap: 2px;
  padding: 0 0 12px 0; border: 2px solid var(--vxd-line); border-radius: 9px;
  background: #fff; font: inherit; text-align: left; cursor: pointer; overflow: hidden;
  transition: border-color .12s, transform .12s;
}
.vxd-card:hover { border-color: #c6a28e; transform: translateY(-2px); }
.vxd-card.is-on { border-color: var(--vxd-accent); }
.vxd-card-image { display: block; width: 100%; aspect-ratio: 1 / 1.414; background: #f2efe9; line-height: 0; overflow: hidden; }
.vxd-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vxd-card-name { padding: 10px 12px 0 12px; font-size: 15px; font-weight: 700; color: var(--vxd-text); line-height: 1.25; }
.vxd-card-text { padding: 0 12px; font-size: 12px; line-height: 1.4; color: var(--vxd-muted); }

/* Ohne Bild: eine Skizze des Blattes */
.vxd-card-sketch { position: relative; }
.vxd-card-sketch::before { content: ""; position: absolute; background: #ddd5c9; }
.vxd-card-sketch::after {
  content: ""; position: absolute; left: 18%; right: 18%; height: 2px; background: #e6dfd4;
  box-shadow: 0 8px 0 #e6dfd4, 0 16px 0 #e6dfd4;
}
.vxd-sketch-classic::before { left: 0; right: 0; top: 0; height: 42%; }
.vxd-sketch-classic::after { top: 58%; }
.vxd-sketch-modern::before { left: 28%; top: 14%; width: 44%; aspect-ratio: 1; border-radius: 50%; }
.vxd-sketch-modern::after { top: 64%; }
.vxd-sketch-split::before { left: 0; top: 0; bottom: 0; width: 46%; }
.vxd-sketch-split::after { left: 54%; right: 8%; top: 40%; }
.vxd-sketch-fold::before { left: 0; right: 0; top: 50%; height: 2px; background: #c3b8a8; }
.vxd-sketch-fold::after { top: 68%; }

/* Felder und Gruppen */
.vxd-group { border: 0; margin: 0 0 6px 0; padding: 0; }
.vxd-group-name { margin: 0; padding: 0; width: 100%; }
.vxd-group-toggle {
  display: block; width: 100%; text-align: left;
  padding: 10px 0; border: 0; border-top: 1px solid var(--vxd-line); background: none;
  font: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--vxd-muted); cursor: pointer;
}
.vxd-group-toggle::after { content: " −"; }
.vxd-group.is-folded .vxd-group-toggle::after { content: " +"; }
.vxd-group.is-folded .vxd-group-body, .vxd-group.is-folded .vxd-group-text { display: none; }
.vxd-group-text { margin: 0 0 10px 0; font-size: 13px; color: var(--vxd-muted); }
.vxd-group:first-child .vxd-group-toggle { border-top: 0; }

.vxd-req { color: var(--vxd-accent); }
.vxd-field-error { display: block; margin-top: 5px; font-size: 13px; color: #c0392b; }
.vxd-textarea { min-height: 90px; }

.vxd-blocks {
  margin: 0 0 16px 0; padding: 10px 14px; border-radius: 6px;
  background: var(--vxd-soft); font-size: 14px; color: var(--vxd-muted);
}
.vxd-blocks strong { color: var(--vxd-text); }

/* Farbwelten und Bildauswahl */
.vxd-swatches, .vxd-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.vxd-swatch {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px 7px 8px; border: 1px solid var(--vxd-line); border-radius: 999px;
  background: #fff; font: inherit; font-size: 14px; cursor: pointer;
}
.vxd-swatch.is-on { border-color: var(--vxd-accent); box-shadow: inset 0 0 0 1px var(--vxd-accent); }
.vxd-swatch-dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); }
.vxd-pick { padding: 0; border: 2px solid transparent; border-radius: 7px; background: #fff; cursor: pointer; line-height: 0; overflow: hidden; }
.vxd-pick img { width: 72px; height: 72px; object-fit: cover; display: block; }
.vxd-pick.is-on { border-color: var(--vxd-accent); }
.vxd-pick-name { display: inline-block; padding: 8px 12px; line-height: 1.2; font-size: 14px; }

/* Zusammenfassung in Schritt 3 */
.vxd-summary { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 0 0 20px 0; font-size: 15px; }
.vxd-summary dt { color: var(--vxd-muted); }
.vxd-summary dd { margin: 0; }

.vxd-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.vxd-next, .vxd-submit {
  padding: 12px 26px; border: 0; border-radius: 6px;
  background: var(--vxd-accent); color: #fff; font: inherit; font-weight: 700; cursor: pointer;
}
.vxd-next:hover, .vxd-submit:hover { filter: brightness(1.08); }
.vxd-submit.is-busy { opacity: .6; cursor: progress; }
.vxd-back {
  padding: 12px 20px; border: 1px solid var(--vxd-line); border-radius: 6px;
  background: #fff; color: var(--vxd-muted); font: inherit; cursor: pointer;
}
.vxd-back:hover { color: var(--vxd-text); }

/* Die Karte daneben */
.vxd-preview-sticky {
  position: sticky; top: 16px;
  /* Ist die Karte höher als der Bildschirm, rollt sie in sich, nicht die Seite */
  max-height: calc(100vh - 32px);
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin;
}
.vxd-preview-title { margin: 0 0 10px 0; font-size: 13px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--vxd-muted); }
.vxd-preview-sheet {
  position: relative;
  aspect-ratio: 1 / 1.414;
  border: 1px solid var(--vxd-line);
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 6px 24px rgba(0,0,0,.09);
  overflow: hidden;
}
.vxd-preview-frame { width: 210mm; height: 297mm; border: 0; transform-origin: top left; overflow: hidden; }
.vxd-preview-wait {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 7px 12px; background: rgba(255,255,255,.92);
  font-size: 13px; color: var(--vxd-muted); text-align: center;
}
.vxd-contains { margin: 12px 0 0 0; padding: 0 0 0 18px; font-size: 13px; color: var(--vxd-muted); }

/* Schritt 1: Betrag und Name nebeneinander */
.vxd-row-for { margin-top: 20px; }
.vxd-row-for .vxd-input { max-width: 340px; }
.vxd-cards-hint { grid-column: 1 / -1; margin: 0; }
.vxd-tabs button.vxd-tab { font: inherit; cursor: pointer; background: none; border: 0; border-bottom: 2px solid transparent; }
.is-from-step-one > .vxd-label::after { content: " \00b7 aus Schritt 1"; color: var(--vxd-muted); font-weight: 400; }

/* Ist ein Entwurf gewählt, bleibt nur er stehen */
.vxd-cards.is-picked .vxd-card { display: none; }
.vxd-cards.is-picked { grid-template-columns: 190px; }
.vxd-cards.is-picked .vxd-card.is-on { display: block; width: 190px; }
.vxd-cards.is-picked .vxd-card-text { display: none; }
.vxd-cards-again { display: none; margin: 0 0 18px 0; padding: 7px 14px; border: 1px solid var(--vxd-line);
  border-radius: 6px; background: #fff; color: var(--vxd-muted); font: inherit; cursor: pointer; }
.vxd-cards.is-picked + .vxd-cards-again { display: inline-block; }
.vxd-cards-again:hover { color: var(--vxd-text); }

/* Zurück zur Übersicht, Hinweise, solange nichts gewählt ist */
.vxd-up { margin: 0 0 10px 0; font-size: 14px; }
.vxd-up a { color: var(--vxd-muted); text-decoration: none; }
.vxd-up a:hover { color: var(--vxd-accent); }
.vxd-up a::before { content: "\2190"; margin-right: 6px; }
.vxd-wait-hint, .vxd-preview-hint { margin: 0; padding: 18px 4px; color: var(--vxd-muted); font-size: 14px; line-height: 1.5; }
.vxd-preview-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; }

/* Die große Ansicht: dasselbe Blatt, nur über die ganze Seite */
.vxd-preview-note { margin: 10px 0 0 0; font-size: 13px; color: #8a5a1e; }
.vxd-preview-big {
  margin: 12px 0 0 0; padding: 8px 14px; border: 1px solid var(--vxd-line); border-radius: 6px;
  background: #fff; color: var(--vxd-muted); font: inherit; cursor: pointer;
}
.vxd-preview-big:hover { color: var(--vxd-text); }
.vxd-is-big .vxd-preview {
  position: fixed; inset: 0; z-index: 2000; margin: 0; padding: 18px;
  background: rgba(32,28,24,.88); overflow: auto;
}
.vxd-is-big .vxd-preview-sticky { position: static; max-width: 760px; margin: 0 auto; }
.vxd-is-big .vxd-preview-title, .vxd-is-big .vxd-contains { color: #e8e3db; }
.vxd-is-big .vxd-preview-big { background: transparent; color: #e8e3db; border-color: rgba(255,255,255,.4); }

@media (max-width: 1000px) {
  .vxd-columns { grid-template-columns: 1fr; }
  .vxd-preview { order: -1; }
  .vxd-preview-sticky { position: static; }
  .vxd-preview-sheet { max-width: 320px; margin: 0 auto; }
}
@media (max-width: 480px) {
  .vxd-band-step { flex: 1 1 100%; }
  .vxd-cards { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .vxd-step-body { padding: 16px 14px; }
  .vxd-step-summary { display: none; }
  .vxd-next, .vxd-submit, .vxd-back { flex: 1 1 100%; text-align: center; }
}

/* Produktseite: nur der Weg zur Gestalterseite */
.vxd-product-link { margin: 20px 0; padding: 18px 20px; border: 1px solid #ddd7ce; border-radius: 9px; background: #faf8f5; }
.vxd-product-link-text { margin: 0 0 12px 0; color: #6f6a63; }
.vxd-product-link-button {
  display: inline-block; padding: 12px 26px; border-radius: 6px;
  background: #a64b2a; color: #fff; font-weight: 700; text-decoration: none;
}
.vxd-product-link-button:hover { color: #fff; filter: brightness(1.08); }

/* ---------------------------------------------------------------
   Einlösen im Warenkorb (0.0.7)
   Der Kasten steht im fremden Theme, deshalb eigene Abstände und
   keine Annahmen über Schriftgrößen des Themes.
   --------------------------------------------------------------- */
.vxd-redeem {
  margin: 22px 0; padding: 0;
  border: 1px solid #ddd7ce; border-radius: 9px; background: #faf8f5;
}
/* Eingeklappt ist der Kasten eine Zeile. Das Dreieck des Browsers ersetzen wir
   durch ein eigenes, sonst sieht es in jedem Theme anders aus. */
.vxd-redeem-fold { display: block; }
.vxd-redeem-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  padding: 13px 20px 13px 38px; position: relative;
  cursor: pointer; list-style: none; user-select: none;
}
.vxd-redeem-head::-webkit-details-marker { display: none; }
.vxd-redeem-head::before {
  content: ""; position: absolute; left: 19px; top: 50%;
  width: 7px; height: 7px; margin-top: -5px;
  border-right: 2px solid #a64b2a; border-bottom: 2px solid #a64b2a;
  transform: rotate(-45deg); transition: transform .15s ease;
}
.vxd-redeem-fold[open] > .vxd-redeem-head::before { transform: rotate(45deg); margin-top: -6px; }
.vxd-redeem-fold[open] > .vxd-redeem-head { padding-bottom: 4px; }
.vxd-redeem-head:hover .vxd-redeem-title { color: #a64b2a; }
.vxd-redeem-title {
  margin: 0; font-size: 1.05rem; font-weight: 700; color: #262626;
  letter-spacing: .01em;
}
.vxd-redeem-summary {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .88rem; color: #a64b2a; font-weight: 700;
}
.vxd-redeem-open { font-size: .86rem; color: #6f6a63; }
.vxd-redeem-body { padding: 6px 20px 18px 20px; }
.vxd-redeem-foreign { margin-top: -6px; }
.vxd-redeem-list { margin: 0 0 14px 0; padding: 0; list-style: none; }
.vxd-redeem-item {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  padding: 10px 0; border-bottom: 1px solid #ece7e0;
}
.vxd-redeem-item:last-child { border-bottom: 0; }
.vxd-redeem-code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: #262626; }
.vxd-redeem-amount { font-weight: 700; color: #a64b2a; }
.vxd-redeem-note { flex: 1 1 100%; font-size: .86rem; color: #6f6a63; }
.vxd-redeem-remove {
  margin-left: auto; padding: 4px 10px; border: 1px solid #ddd7ce; border-radius: 5px;
  background: #fff; color: #6f6a63; font-size: .82rem; cursor: pointer;
}
.vxd-redeem-remove:hover { border-color: #a64b2a; color: #a64b2a; }
.vxd-redeem-form { margin: 0; }
.vxd-redeem-label { display: block; margin-bottom: 6px; font-size: .88rem; color: #6f6a63; }
.vxd-redeem-row { display: flex; flex-wrap: wrap; gap: 10px; }
.vxd-redeem-input {
  flex: 1 1 220px; min-width: 0; padding: 11px 12px;
  border: 1px solid #ccc5ba; border-radius: 6px; background: #fff;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 1rem; letter-spacing: .06em; text-transform: uppercase;
}
.vxd-redeem-input:focus { outline: 2px solid #a64b2a; outline-offset: 1px; border-color: #a64b2a; }
.vxd-redeem-submit {
  flex: 0 0 auto; padding: 11px 24px; border: 0; border-radius: 6px;
  background: #a64b2a; color: #fff; font-weight: 700; cursor: pointer;
}
.vxd-redeem-submit:hover { filter: brightness(1.08); }
.vxd-redeem-intro { margin: 10px 0 0 0; font-size: .84rem; color: #6f6a63; }
.vxd-redeem-message { margin: 10px 0 0 0; font-size: .9rem; min-height: 1.2em; }
.vxd-redeem-message.is-ok { color: #2f6b3a; font-weight: 600; }
.vxd-redeem-message.is-warn { color: #9c3b26; font-weight: 600; }
.vxd-redeem-message.is-neutral { color: #6f6a63; }
.vxd-redeem-foot { margin: 12px 0 0 0; font-size: .84rem; }
.vxd-redeem-foot a { color: #a64b2a; }

.vxd-redeemed { margin: 22px 0; padding: 16px 20px; border-left: 3px solid #a64b2a; background: #faf8f5; }
.vxd-redeemed-title { margin: 0 0 10px 0; font-size: 1rem; font-weight: 700; }
.vxd-redeemed-list { margin: 0; padding: 0; list-style: none; }
.vxd-redeemed-list li { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 6px 0; }
.vxd-redeemed-code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.vxd-redeemed-amount { font-weight: 700; color: #a64b2a; }
.vxd-redeemed-note { flex: 1 1 100%; font-size: .86rem; color: #6f6a63; }
.vxd-redeemed-foot { margin: 10px 0 0 0; font-size: .84rem; }
.vxd-redeemed-foot a { color: #a64b2a; }

@media (max-width: 480px) {
  .vxd-redeem { padding: 14px 15px; }
  .vxd-redeem-submit { flex: 1 1 100%; }
  .vxd-redeem-remove { margin-left: 0; }
}

/* ---------------------------------------------------------------
   Die Geschenkseite (0.0.8)
   Sie steht im fremden Theme und soll trotzdem nach Geschenk
   aussehen, nicht nach Formular. Große Karte, viel Luft, wenig
   Linien, eine einzige Akzentfarbe.
   --------------------------------------------------------------- */
.vxd-gift {
  max-width: 980px; margin: 0 auto; padding: 8px 0 48px 0;
  color: #262626;
}
.vxd-gift-top {
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 36px; align-items: start; margin-bottom: 8px;
}
.vxd-gift-sheet {
  position: relative; overflow: hidden;
  border: 1px solid #e3ddd4; border-radius: 6px; background: #fff;
  box-shadow: 0 10px 34px rgba(0,0,0,.12);
}
.vxd-gift-frame { border: 0; transform-origin: top left; overflow: hidden; }
.vxd-gift-kicker {
  margin: 0 0 6px 0; font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #a64b2a;
}
.vxd-gift-head { margin: 0 0 14px 0; font-size: 2rem; line-height: 1.15; font-weight: 700; }
.vxd-gift-lead { margin: 0 0 18px 0; color: #6f6a63; }
.vxd-gift-greeting {
  margin: 0 0 18px 0; padding: 0 0 0 16px;
  border-left: 3px solid #a64b2a; color: #4a453f;
  font-size: 1.08rem; line-height: 1.6; font-style: italic;
}
.vxd-gift-print { margin: 0; }

.vxd-gift-voucher {
  margin: 22px 0 18px 0; padding: 26px 28px; border-radius: 10px;
  background: #faf8f5; border: 1px solid #e3ddd4; text-align: center;
}
.vxd-gift-label { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #6f6a63; }
.vxd-gift-amount { margin: 4px 0 18px 0; font-size: 2.6rem; font-weight: 700; color: #a64b2a; line-height: 1; }
.vxd-gift-code-box { margin: 0 0 14px 0; }
.vxd-gift-reveal {
  padding: 13px 30px; border: 1px dashed #a64b2a; border-radius: 7px;
  background: #fff; color: #a64b2a; font: inherit; font-weight: 700; cursor: pointer;
}
.vxd-gift-reveal:hover { background: #a64b2a; color: #fff; border-style: solid; }
.vxd-gift-code-inner:focus { outline: none; }
.vxd-gift-code-label { margin: 0; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #6f6a63; }
.vxd-gift-code {
  margin: 4px 0 0 0; font-size: 1.5rem; font-weight: 700; letter-spacing: .12em;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  word-break: break-word;
}
.vxd-gift-meta { margin: 0 0 16px 0; font-size: .9rem; color: #6f6a63; }
.vxd-gift-note { margin: 0 0 16px 0; color: #9c3b26; }
.vxd-gift-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0; }
.vxd-gift-words > .vxd-gift-print { text-align: left; }
.vxd-gift-button {
  display: inline-block; padding: 13px 30px; border-radius: 7px;
  background: #a64b2a; color: #fff; font-weight: 700; text-decoration: none;
}
.vxd-gift-button:hover { color: #fff; filter: brightness(1.08); }
.vxd-gift-ghost {
  display: inline-block; padding: 12px 24px; border: 1px solid #ddd7ce; border-radius: 7px;
  background: #fff; color: #6f6a63; font: inherit; text-decoration: none; cursor: pointer;
}
.vxd-gift-ghost:hover { border-color: #a64b2a; color: #a64b2a; }

.vxd-gift-ideas, .vxd-gift-guides { margin-top: 44px; }
.vxd-gift-h2 { margin: 0 0 4px 0; font-size: 1.35rem; font-weight: 700; }
.vxd-gift-sub { margin: 0 0 18px 0; color: #6f6a63; font-size: .95rem; }
.vxd-gift-ideas-body { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 24px; align-items: center; }
.vxd-gift-ideas-img { width: 100%; height: auto; border-radius: 6px; border: 1px solid #e3ddd4; }
.vxd-gift-ideas-title { margin: 0 0 14px 0; font-size: 1.1rem; font-weight: 700; }
.vxd-gift-ideas-body .vxd-gift-actions { justify-content: flex-start; }
.vxd-gift-guide-list { margin: 0; padding: 0 0 0 20px; }
.vxd-gift-guide-list li { margin-bottom: 7px; }
.vxd-gift-guide-list a { color: #a64b2a; }

.vxd-gift-foot { margin-top: 44px; padding-top: 22px; border-top: 1px solid #ece7e0; text-align: center; }
.vxd-gift-share { margin-bottom: 18px; }
.vxd-gift-share summary { cursor: pointer; color: #6f6a63; }
.vxd-gift-share .vxd-gift-actions { margin-top: 14px; }
.vxd-gift-own { color: #a64b2a; font-weight: 700; }
.vxd-gift-missing { text-align: center; padding: 48px 0; }

@media (max-width: 760px) {
  .vxd-gift-top { grid-template-columns: 1fr; gap: 22px; }
  .vxd-gift-sheet { max-width: 320px; margin: 0 auto; }
  .vxd-gift-head { font-size: 1.6rem; }
  .vxd-gift-amount { font-size: 2.1rem; }
  .vxd-gift-voucher { padding: 22px 16px; }
  .vxd-gift-ideas-body { grid-template-columns: 1fr; }
  .vxd-gift-ideas-img { max-width: 280px; }
  .vxd-gift-button, .vxd-gift-ghost { flex: 1 1 100%; text-align: center; }
}

/* Ideen dazulegen, im Warenkorb unter dem Gutschein */
.vxd-idea {
  margin: 22px 0; padding: 18px 20px;
  border: 1px dashed #c8bfb2; border-radius: 9px; background: #fff;
}
.vxd-idea-title { margin: 0 0 6px 0; font-size: 1.05rem; font-weight: 700; }
.vxd-idea-intro { margin: 0 0 14px 0; font-size: .9rem; color: #6f6a63; }
.vxd-idea-list { margin: 0; padding: 0; list-style: none; }
.vxd-idea-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 6px 0; }
.vxd-idea-for { color: #262626; font-weight: 600; }
.vxd-idea-link {
  margin-left: auto; padding: 10px 20px; border-radius: 6px;
  background: #a64b2a; color: #fff; font-weight: 700; text-decoration: none;
}
.vxd-idea-link:hover { color: #fff; filter: brightness(1.08); }

/* Der Streifen oben auf der Blätterseite des Katalogs */
.vxd-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  margin: 0 0 16px 0; padding: 12px 18px;
  border-left: 3px solid #a64b2a; background: #faf8f5; border-radius: 0 6px 6px 0;
}
.vxd-strip-title { font-weight: 700; }
.vxd-strip-amount { color: #a64b2a; font-weight: 700; }
.vxd-strip-link { margin-left: auto; color: #a64b2a; font-weight: 700; }

@media (max-width: 480px) {
  .vxd-idea-link { margin-left: 0; flex: 1 1 100%; text-align: center; }
  .vxd-strip-link { margin-left: 0; }
}

/* „optional" am Feldnamen, klein und zurückhaltend */
.vxd-optional {
  margin-left: 8px; font-size: 12px; font-weight: 400; letter-spacing: 0;
  text-transform: none; color: var(--vxd-muted);
}

/* ---------------------------------------------------------------
   Grußvorschläge unter dem Textfeld
   Zurückhaltend: der Assistent ist ein Angebot, kein Schritt.
   --------------------------------------------------------------- */
.vxd-textarea.is-filled { animation: vxd-greet-flash .7s ease-out 1; }
@keyframes vxd-greet-flash {
  0% { background: #f6ece4; }
  100% { background: #fff; }
}
@media (max-width: 480px) {
  .vxd-greet-button { width: 100%; }
}

/* ------------------------------------------------------------ Wunschseite */
.vxd-wish-intro { font-size: 17px; max-width: 640px; margin: 0 0 24px 0; }
.vxd-wish-h { font-size: 20px; margin: 26px 0 10px 0; }
.vxd-wish-vouchers { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.vxd-wish-voucher { border: 1px solid #e3ded6; border-radius: 10px; background: #fff; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.vxd-wish-code { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.08em; color: #8a8378; }
.vxd-wish-amount { font-size: 24px; font-weight: 700; }
.vxd-wish-meta { font-size: 13px; color: #8a8378; }
.vxd-wish-gift { margin-top: 6px; font-weight: 600; }
.vxd-wish-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 28px 0; }
.vxd-wish-tile { border: 1px solid #e3ded6; border-radius: 10px; background: #faf8f5; padding: 18px; }
.vxd-wish-tile h3 { margin: 0 0 6px 0; font-size: 17px; }
.vxd-wish-tile p { color: #6f6a61; font-size: 14px; min-height: 40px; }
.vxd-wish-open { display: flex; gap: 8px; }
.vxd-wish-open .vxd-input { flex: 1; min-width: 0; }
.vxd-wish-login { border: 1px solid #e3ded6; border-left: 4px solid #b56a4b; border-radius: 10px; background: #fff; padding: 18px; max-width: 560px; }

/* Die Einladung zur Wunschseite im Gestalter, nach „in den Warenkorb" */
.vxd-wish-offer { margin-top: 14px; border: 1px dashed #cdbfae; border-radius: 10px; background: #faf8f5; padding: 14px; display: flex; gap: 14px; align-items: flex-start; }
.vxd-wish-offer img { width: 180px; height: auto; border-radius: 6px; border: 1px solid #e3ded6; flex: 0 0 auto; }
.vxd-wish-offer-text { font-size: 14px; }
.vxd-wish-offer .vxd-btn { margin-top: 10px; }
.vxd-wish-offer-done { font-weight: 600; color: #4c6b43; }
.vxd-wish-offer-hint { font-size: 13px; color: #8a8378; margin-top: 6px; }
@media (max-width: 560px) {
  .vxd-wish-offer { flex-direction: column; }
  .vxd-wish-offer img { width: 100%; }
}

/* Die Text-Idee: eine kleine Zeile über dem Grußfeld, kein Kasten. */
.vxd-greet { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 6px 0; font-size: 13px; }
.vxd-greet-button { border: 1px solid #cdbfae; background: #faf8f5; color: #7a4a33; border-radius: 999px; padding: 3px 12px; font-size: 13px; cursor: pointer; }
.vxd-greet-button:hover { border-color: #b56a4b; }
.vxd-greet-button:disabled { opacity: 0.5; cursor: default; }
.vxd-greet-meta { color: #8a8378; }
.vxd-greet-hint { color: #8a8378; }

/* Geschenkideen auf der Geschenkseite */
.vxd-gift-idea-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.vxd-gift-idea { display: flex; flex-direction: column; gap: 6px; border: 1px solid #e3ded6; border-radius: 10px; background: #fff; padding: 12px; text-decoration: none; color: inherit; }
.vxd-gift-idea img { width: 100%; height: 130px; object-fit: cover; border-radius: 6px; }
.vxd-gift-idea-name { font-size: 14px; line-height: 1.3; }
.vxd-gift-idea-price { font-weight: 700; color: #7a4a33; }

/* Der Ideen-Wähler im Gestalter */
.vxd-ideas { margin-top: 14px; border-top: 1px dashed #cdbfae; padding-top: 12px; }
.vxd-ideas-title { font-weight: 700; margin: 0 0 2px 0; }
.vxd-ideas-hint { font-size: 13px; color: #8a8378; margin: 0 0 8px 0; }
.vxd-ideas-row { display: flex; gap: 8px; }
.vxd-ideas-row .vxd-input { flex: 1; min-width: 0; }
.vxd-ideas-list { list-style: none; margin: 8px 0 0 0; padding: 0; max-height: 220px; overflow: auto; border: 1px solid #e3ded6; border-radius: 8px; background: #fff; }
.vxd-ideas-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid #f0ece5; }
.vxd-ideas-list li:last-child { border-bottom: 0; }
.vxd-ideas-list img { width: 42px; height: 42px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; }
.vxd-ideas-name { flex: 1; font-size: 14px; }
.vxd-ideas-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.vxd-ideas-chip { background: #faf8f5; border: 1px solid #cdbfae; border-radius: 999px; padding: 3px 10px; font-size: 13px; }
.vxd-ideas-weg { border: 0; background: none; color: #b56a4b; font-size: 15px; cursor: pointer; padding: 0 2px; }
.vxd-ideas-msg { font-size: 13px; color: #8a8378; margin: 6px 0 0 0; }