/* ==========================================================================
   Gutscheine: Konfigurator + Live-Vorschau (Desktop auf der Bildseite)
   ========================================================================== */

.gutschein h1 {
  font-size: var(--text-4xl);
  font-weight: 330;
  max-width: 10ch;
}

.gutschein h1 em {
  font-size: inherit;
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  color: var(--terrakotta);
}

.gutschein__einleitung {
  padding-bottom: var(--abstand-5);
}

.gutschein__formular {
  padding-top: var(--abstand-5);
}

/* --- Bühne der Vorschau ------------------------------------------------------ */
.gutschein__buehne {
  display: grid;
  justify-items: center;
  gap: var(--abstand-3);
  padding: var(--abstand-6) var(--rand);
  background:
    radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--papier-hell) 70%, transparent), transparent 70%),
    var(--papier-tief);
  border-block: var(--linie-breite) solid var(--linie);
}

.gutschein__vorschauhinweis {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--espresso-weich);
}

@media (min-width: 64rem) {
  .gutschein__buehne {
    position: fixed;
    top: var(--kopf-hoehe);
    left: 0;
    width: var(--panel);
    height: calc(100vh - var(--kopf-hoehe));
    align-content: center;
    border-block: 0;
    border-right: var(--linie-breite) solid var(--linie);
  }
}

/* --- die Gutscheinkarte (skaliert per Container Query mit ihrer Breite) ----------- */
.gutschein-karte {
  --akzent: var(--oliv);
  container-type: inline-size;
  width: min(100%, 25rem);
  aspect-ratio: 5 / 7;
  padding: 3.5%;
  background: var(--papier-hell);
  border: var(--linie-breite) solid var(--linie-stark);
  box-shadow: 0 30px 50px -30px color-mix(in srgb, var(--espresso) 45%, transparent), 0 2px 0 color-mix(in srgb, var(--espresso) 5%, transparent);
  transform: rotate(-1.2deg);
  transition: transform var(--dauer-mittel) var(--kurve);
}

@media (min-width: 64rem) {
  .gutschein-karte {
    width: min(88%, 32rem, calc((100vh - var(--kopf-hoehe) - 7rem) * 5 / 7));
  }
}

.gutschein-karte__innen {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 7% 8% 5%;
  border: 1px solid var(--akzent);
  outline: 1px solid color-mix(in srgb, var(--akzent) 50%, transparent);
  outline-offset: -5px;
  text-align: center;
  transition: border-color var(--dauer-mittel);
}

.gutschein-karte p {
  margin: 0;
  hyphens: manual;
}

.gutschein-karte__marke {
  display: grid;
  line-height: 1;
}

.gutschein-karte__marke span:first-child {
  font-family: var(--schrift-marke);
  font-size: 3.4cqi;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.42em;
  padding-left: 0.42em;
}

.gutschein-karte__marke span:last-child {
  font-family: var(--schrift-titel);
  font-style: italic;
  font-weight: 380;
  font-size: 9cqi;
  font-variation-settings: "opsz" 144;
}

.gutschein-karte__motiv {
  display: grid;
  place-items: center;
  width: 62%;
  height: 26cqi;
  margin: 5cqi 0 3cqi;
  color: var(--akzent);
}

.gutschein-karte__motiv .orn {
  max-height: 100%;
  stroke-width: 1.1;
  transition-duration: 1s; /* beim Motivwechsel zügiger nachzeichnen als die Ornamente im Text */
}

.gutschein-karte__label {
  font-family: var(--schrift-marke);
  font-size: 3.4cqi;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.16em;
  color: var(--espresso-weich);
}

.gutschein-karte__betrag {
  margin: 1cqi 0 3cqi !important;
  font-family: var(--schrift-titel);
  font-style: italic;
  font-weight: 330;
  font-size: 15cqi;
  font-variation-settings: "opsz" 144;
  line-height: 1;
  color: var(--espresso);
}

.gutschein-karte__fuer,
.gutschein-karte__von {
  font-size: 4.2cqi;
}

.gutschein-karte__fuer span,
.gutschein-karte__von span {
  font-family: var(--schrift-titel);
  font-style: italic;
  font-size: 1.15em;
}

.gutschein-karte__widmung {
  max-width: 90%;
  margin: 3cqi 0 !important;
  font-family: var(--schrift-titel);
  font-style: italic;
  font-weight: 330;
  font-size: 5.2cqi;
  font-variation-settings: "opsz" 36;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.gutschein-karte .ist-platzhalter {
  color: var(--espresso-weich);
}

.gutschein-karte__fuss {
  margin-top: auto !important;
  padding-top: 3cqi;
  border-top: 1px solid var(--linie);
  font-size: 2.7cqi;
  color: var(--espresso-weich);
}

/* Motiv: sichtbar ist nur die gewählte Zeichnung – reines CSS über :has() */
.gutschein-karte__motiv .orn:not([data-motiv="ulivo"]) {
  display: none;
}

.gutschein:has(#motiv-pasta:checked) .gutschein-karte__motiv .orn[data-motiv="ulivo"],
.gutschein:has(#motiv-vino:checked) .gutschein-karte__motiv .orn[data-motiv="ulivo"],
.gutschein:has(#motiv-tavola:checked) .gutschein-karte__motiv .orn[data-motiv="ulivo"] {
  display: none;
}

.gutschein:has(#motiv-pasta:checked) .gutschein-karte__motiv [data-motiv="pasta"],
.gutschein:has(#motiv-vino:checked) .gutschein-karte__motiv [data-motiv="vino"],
.gutschein:has(#motiv-tavola:checked) .gutschein-karte__motiv [data-motiv="tavola"] {
  display: block;
}

.gutschein:has(#motiv-pasta:checked) .gutschein-karte { --akzent: var(--terrakotta); }
.gutschein:has(#motiv-vino:checked) .gutschein-karte { --akzent: var(--terrakotta-tief); }
.gutschein:has(#motiv-tavola:checked) .gutschein-karte { --akzent: var(--espresso-weich); }

/* --- Formularteile ---------------------------------------------------------------- */
.gutschein__formular legend {
  font-family: var(--schrift-titel);
  font-weight: 400;
  font-size: var(--text-l);
  font-variation-settings: "opsz" 36;
}

.gutschein__wunsch {
  display: none;
  max-width: 16rem;
  margin-top: var(--abstand-3);
}

.gutschein:has(#betrag-wunsch:checked) .gutschein__wunsch {
  display: grid;
}

.motive {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--abstand-3);
}

@media (min-width: 40rem) {
  .motive {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.motiv {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--abstand-2);
  padding: var(--abstand-4) var(--abstand-2) var(--abstand-3);
  border: var(--linie-breite) solid var(--linie-stark);
  border-radius: var(--radius);
  background: var(--papier-hell);
  font-size: var(--text-s);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dauer-kurz), box-shadow var(--dauer-kurz);
}

.motiv input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.motiv .orn {
  height: 3rem;
  width: auto;
  max-width: 100%;
  color: var(--terrakotta);
  stroke-width: 2.2;
}

.motiv:hover {
  border-color: var(--espresso);
}

.motiv:has(input:checked) {
  border-color: var(--espresso);
  box-shadow: inset 0 0 0 1px var(--espresso);
  font-weight: 600;
}

.motiv:has(input:checked)::after {
  content: "✓";
  position: absolute;
  top: 0.35rem;
  right: 0.5rem;
  font-size: var(--text-s);
  color: var(--oliv-text);
}

.motiv:has(input:focus-visible) {
  outline: 2px solid var(--terrakotta-text);
  outline-offset: 2px;
}

.kaestchen--rund input {
  border-radius: 50%;
}

.kaestchen--rund input::after {
  width: 0.55rem;
  height: 0.55rem;
  border: 0;
  border-radius: 50%;
  background: var(--papier);
  transform: scale(0);
}

.kaestchen--rund input:checked::after {
  transform: scale(1);
}

.feld__zaehler.ist-knapp {
  color: var(--terrakotta-text);
  font-weight: 600;
}

.gutschein__summe {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--abstand-2) var(--abstand-4);
  padding: var(--abstand-4) 0;
  border-block: var(--linie-breite) solid var(--espresso);
}

.gutschein__summe p {
  margin: 0;
}

.gutschein__summe strong {
  margin-left: var(--abstand-3);
  font-family: var(--schrift-titel);
  font-weight: 400;
  font-size: var(--text-xl);
}