/* Libelle Raummiete – Kaufformular für Geschenkgutscheine und Online-Ansicht. Baut auf raummiete.css auf. */

/* Kaufformular: links die Schritte, rechts die mitlaufende Vorschau */
.lb-gsk.lb-raum { display: grid; gap: 1.6rem; max-width: 1120px; grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); align-items: start; }
.lb-gsk-form { display: grid; gap: 1.1rem; min-width: 0; }
.lb-gsk-preview { position: sticky; top: 96px; display: grid; gap: .6rem; min-width: 0; }
.lb-gsk-preview p { margin: 0; text-align: center; }
.lb-gsk-designs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
#lb-gsk .lb-gsk-design { padding: .7rem .8rem; min-height: 48px; border: 1px solid var(--r-line); border-radius: 12px; background: var(--r-bg2); color: var(--r-ink); font: inherit; font-weight: 700; font-size: .95rem; line-height: 1.25; text-align: left; white-space: normal; cursor: pointer; }
#lb-gsk .lb-gsk-design:hover { border-color: var(--r-acc); background: var(--r-bg2); color: var(--r-ink); }
#lb-gsk .lb-gsk-design.is-sel { border-color: var(--r-acc); box-shadow: 0 0 0 1px var(--r-acc) inset; color: var(--r-acc); }
.lb-gsk-count { justify-self: end; }
/* Schmale Bildschirme: die Vorschau steht nach Design und Widmung, vor den eigenen Angaben */
@media (max-width: 900px) {
  .lb-gsk.lb-raum { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .lb-gsk-form { display: contents; }
  .lb-gsk-form > :nth-child(1) { order: 1; }
  .lb-gsk-form > :nth-child(2) { order: 2; }
  .lb-gsk-form > :nth-child(3) { order: 3; }
  .lb-gsk-form > :nth-child(4) { order: 4; }
  .lb-gsk-preview { order: 5; position: static; max-width: 420px; width: 100%; margin: 0 auto; }
  .lb-gsk-form > :nth-child(5) { order: 6; }
  .lb-gsk-form > :nth-child(6) { order: 7; }
}

/* Online-Ansicht */
.lb-gsv { max-width: 1040px; margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem) 0; color: var(--ink, #f4f0ff); }
.lb-gsv-grid { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 2rem; align-items: start; }
.lb-gsv-side { display: grid; gap: 1rem; min-width: 0; }
.lb-gsv-side p { margin: 0; }
.lb-gsv-status { padding: .9rem 1.1rem; border: 1px solid var(--green, #3dff9a); border-radius: 12px; background: rgba(61, 255, 154, .08); font-weight: 700; }
.lb-gsv-status--redeemed, .lb-gsv-status--expired, .lb-gsv-status--locked, .lb-gsv-status--reserved { border-color: var(--warn, #ffb86b); background: rgba(255, 184, 107, .1); }
.lb-gsv-actions { display: grid; gap: .7rem; }
#lb-gsv .lb-raum-btn { text-align: center; text-decoration: none; box-sizing: border-box; }
#lb-gsv .lb-gsv-btn2 { background: transparent !important; color: var(--pink, #ff3d9a) !important; border: 1px solid var(--pink, #ff3d9a); box-shadow: none; }
#lb-gsv .lb-gsv-btn2:hover { background: var(--pink, #ff3d9a) !important; color: #14051f !important; }
.lb-gsv-form.lb-raum { max-width: none; margin: .6rem 0 0; padding: 1.2rem 1.3rem 1.3rem; border: 1px solid var(--line, rgba(176, 140, 255, .22)); border-radius: var(--radius, 14px); background: var(--bg-2, #120a26); }
.lb-gsv-form h2 { margin: 0; font-size: 1.3rem; }
@media (max-width: 800px) {
  .lb-gsv-grid { grid-template-columns: minmax(0, 1fr); }
  .lb-gsv-view { max-width: 460px; width: 100%; margin: 0 auto; }
}

/* Grafiken der Designs in Seitentexten (Shortcode libelle_gutschein_motiv): eine Zeile fester Höhe über der Überschrift */
.lb-gs-motive { display: flex; align-items: center; gap: 16px; height: 84px; margin: 0 0 0.9rem; }
.lb-gs-motive svg { display: block; flex: none; max-width: none; overflow: visible; }