/* ============================================================
   Gutschein-Layouts – Lilous Cosmetic
   3 Varianten: .v-gold  .v-rose  .v-libelle
   Wird von gutscheine.html (Vorschau) und gutschein.html (Druck)
   genutzt.
   ============================================================ */

.voucher {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 1.62 / 1;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.1rem, 3.2vw, 2.1rem);
  box-shadow: 0 30px 70px -45px rgba(44, 42, 40, .55);
  font-family: 'Inter', system-ui, sans-serif;
}
.voucher * { box-sizing: border-box; }

.voucher .v-brand {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  letter-spacing: .04em;
  font-size: clamp(1.15rem, 3.4vw, 1.7rem);
  line-height: 1;
}
.voucher .v-eyebrow {
  font-size: .62rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  margin-bottom: .35rem;
}
.voucher .v-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 5vw, 2.4rem);
  line-height: 1.05;
}
.voucher .v-amount {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 9vw, 4.2rem);
  line-height: 1;
}
.voucher .v-for {
  font-size: clamp(.78rem, 2.4vw, .95rem);
  margin-top: .15rem;
}
.voucher .v-msg {
  font-style: italic;
  font-size: clamp(.72rem, 2.2vw, .9rem);
  opacity: .9;
  margin-top: .4rem;
  max-width: 60%;
}
.voucher .v-code {
  font-family: 'Inter', monospace;
  font-weight: 600;
  letter-spacing: .12em;
  font-size: clamp(.78rem, 2.4vw, 1rem);
  padding: .4rem .75rem;
  border-radius: 999px;
  display: inline-block;
}
.voucher .v-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  font-size: clamp(.58rem, 1.8vw, .72rem);
  line-height: 1.35;
}
.voucher .v-foot .v-terms { opacity: .8; }
.voucher .v-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
.voucher .v-mid { margin: .3rem 0; }

/* Dekorative Libelle (SVG inline gefärbt über currentColor) */
.voucher .v-dragon {
  position: absolute;
  right: -10px; bottom: -10px;
  width: 165px; height: 165px;
  opacity: .12;
  pointer-events: none;
}

/* ---------- Variante GOLD (edel, dunkel) ---------- */
.voucher.v-gold {
  background:
    radial-gradient(120% 120% at 80% -10%, rgba(184,153,104,.35), transparent 55%),
    linear-gradient(150deg, #34322F 0%, #2C2A28 55%, #232120 100%);
  color: #F4EEE4;
  border: 1px solid rgba(184,153,104,.35);
}
.voucher.v-gold .v-brand { color: #E7D6B6; }
.voucher.v-gold .v-eyebrow { color: #C7AE85; }
.voucher.v-gold .v-amount { color: #E7D6B6; }
.voucher.v-gold .v-code {
  background: rgba(184,153,104,.18);
  border: 1px solid rgba(184,153,104,.5);
  color: #EFE2C8;
}
.voucher.v-gold .v-dragon { color: #B89968; opacity: .16; }

/* ---------- Variante ROSE (hell, zart) ---------- */
.voucher.v-rose {
  background:
    radial-gradient(120% 120% at 10% 0%, rgba(226,163,141,.28), transparent 55%),
    linear-gradient(150deg, #FBF8F4 0%, #F6ECE6 60%, #F1E2DA 100%);
  color: #2C2A28;
  border: 1px solid rgba(226,163,141,.4);
}
.voucher.v-rose .v-brand { color: #2C2A28; }
.voucher.v-rose .v-eyebrow { color: #C77F66; }
.voucher.v-rose .v-amount { color: #B26A52; }
.voucher.v-rose .v-code {
  background: #fff;
  border: 1px solid rgba(226,163,141,.55);
  color: #2C2A28;
}
.voucher.v-rose .v-dragon { color: #E2A38D; opacity: .22; }

/* ---------- Variante LIBELLE (botanisch, beige) ---------- */
.voucher.v-libelle {
  background:
    radial-gradient(130% 130% at 90% 110%, rgba(184,153,104,.22), transparent 50%),
    linear-gradient(160deg, #FBF8F4 0%, #F3EEE4 100%);
  color: #2C2A28;
  border: 1px solid rgba(184,153,104,.4);
}
.voucher.v-libelle .v-brand { color: #2C2A28; }
.voucher.v-libelle .v-eyebrow { color: #9A7C46; }
.voucher.v-libelle .v-amount { color: #8A6E3C; }
.voucher.v-libelle .v-code {
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(184,153,104,.5);
  color: #2C2A28;
}
.voucher.v-libelle .v-dragon { color: #B89968; opacity: .28; }

/* Kleine Vorschau-Variante (Auswahl im Kaufformular) */
.voucher.is-preview {
  aspect-ratio: 1.62 / 1;
  border-radius: 14px;
  padding: .7rem .8rem;
  box-shadow: none;
  pointer-events: none;
}
.voucher.is-preview .v-amount { font-size: 1.5rem; }
.voucher.is-preview .v-title { font-size: 1rem; }
.voucher.is-preview .v-foot, .voucher.is-preview .v-msg, .voucher.is-preview .v-code { display: none; }

/* ---------- Druck ---------- */
@media print {
  body * { visibility: hidden !important; }
  #print-area, #print-area * { visibility: visible !important; }
  #print-area {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 0; margin: 0;
  }
  .voucher {
    max-width: 16cm;
    box-shadow: none !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  @page { size: landscape; margin: 1.2cm; }
}