/* Geschenk-Baustein (nur in der Vorschau für den Inhaber, fliegt beim Kauf raus):
   Video von Ramon mitten auf der Seite, runde Blase unten rechts, „Nein danke“. */

.rv { position: relative; padding: clamp(72px, 12vw, 140px) 0; background:
  radial-gradient(60% 50% at 50% 0%, rgba(221, 187, 130, .10), transparent 70%), var(--bg-2);
  border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.rv__innen { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; justify-items: center; text-align: center; }
@media (min-width: 900px) { .rv__innen { grid-template-columns: 1fr minmax(320px, 400px); text-align: left; justify-items: start; } }
.rv__marke { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px;
  border: 1px solid var(--linie-stark); color: var(--gold); font: 600 12px/1 var(--schrift-text); letter-spacing: .14em; text-transform: uppercase; }
.rv__marke img { width: 28px; height: 28px; border-radius: 50%; }
.rv__titel { margin-top: 18px; font: 800 clamp(30px, 6.4vw, 54px)/1.08 var(--schrift-titel); text-transform: uppercase; color: var(--text); }
.rv__titel span { display: block; color: var(--gold); }
.rv__text { margin-top: 16px; max-width: 34ch; color: var(--leise); font: 400 17px/1.55 var(--schrift-text); }
.rv__knoepfe { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
@media (min-width: 900px) { .rv__knoepfe { justify-content: flex-start; } }
.rv__klein { margin-top: 18px; color: var(--leise); font: 400 14px/1.5 var(--schrift-text); }
.rv__nein { background: none; border: 0; padding: 0; color: var(--text); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.rv__rahmen { position: relative; width: min(100%, 380px); aspect-ratio: 9 / 16; border-radius: 28px; overflow: hidden;
  border: 1px solid var(--linie-stark); box-shadow: var(--schatten), 0 0 80px rgba(221, 187, 130, .16); background: #000; }
.rv__rahmen video { display: block; width: 100%; height: 100%; object-fit: cover; }
.rv__ton { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-radius: 999px; border: 0; background: rgba(7, 6, 5, .78); color: #fff; font: 600 14px/1 var(--schrift-text); cursor: pointer;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.rv__ton svg { width: 18px; height: 18px; }
.rv__nochmal { position: absolute; inset: auto 0 18px 0; margin: 0 auto; width: max-content; display: none; padding: 12px 18px; border-radius: 999px;
  border: 0; background: var(--gold); color: #120d06; font: 700 14px/1 var(--schrift-text); cursor: pointer; }
.rv.ist-fertig .rv__nochmal { display: block; }

/* Blase unten rechts */
.rb { position: fixed; z-index: 60; right: 14px; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 72px); display: flex; align-items: center; gap: 10px;
  opacity: 0; transform: translateY(20px) scale(.9); pointer-events: none; transition: opacity .4s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
@media (min-width: 900px) { .rb { bottom: 28px; right: 28px; } }
.rb.ist-da { opacity: 1; transform: none; pointer-events: auto; }
.rb.ist-da.ist-versteckt { opacity: 0; transform: translateY(20px) scale(.9); pointer-events: none; }
.rb__auf { position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--linie-stark); background: rgba(13, 11, 9, .92); color: var(--text); box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
  font: 600 13px/1.2 var(--schrift-text); text-align: left; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.rb__bild { position: relative; width: 58px; height: 58px; flex: none; }
.rb__bild img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--gold); }
.rb__bild::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--gold); opacity: .6; animation: rb-puls 2.4s ease-out infinite; }
.rb__play { position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); display: grid; place-items: center; }
.rb__play svg { width: 10px; height: 10px; margin-left: 2px; }
.rb__auf b { display: block; color: var(--gold); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.rb__x { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--linie-stark); background: rgba(13, 11, 9, .9); color: var(--leise); cursor: pointer; font: 400 18px/1 var(--schrift-text); }
@keyframes rb-puls { 0% { transform: scale(.9); opacity: .7; } 100% { transform: scale(1.25); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rb__bild::after { animation: none; } }

/* Fenster: Video groß und Nein danke */
.rf { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .86); }
.rf[hidden] { display: none; }
html.rv-offen { overflow: hidden; }
.rf__box { position: relative; width: min(100%, 420px); display: grid; gap: 14px; }
.rf__video { width: 100%; max-height: calc(100vh - 140px); aspect-ratio: 9 / 16; border-radius: 22px; background: #000; object-fit: contain; }
.rf__zu { position: absolute; top: -10px; right: -6px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linie-stark); background: var(--bg-3); color: #fff; font: 400 22px/1 var(--schrift-text); cursor: pointer; }
.rf__weiter { justify-self: center; }
.rn { width: min(100%, 420px); padding: 28px 24px; border-radius: 22px; border: 1px solid var(--linie-stark); background: var(--bg-3); text-align: center; color: var(--text); }
.rn h3 { font: 800 22px/1.25 var(--schrift-titel); text-transform: uppercase; }
.rn p { margin-top: 10px; color: var(--leise); font: 400 16px/1.5 var(--schrift-text); }
.rn__knoepfe { margin-top: 22px; display: grid; gap: 10px; }

/* Kartenangebot: −30 % bei Einmalzahlung, 14 Tage ab Versand, läuft von selbst ab (geschenk.js) */
.rv__angebot { position: relative; margin-top: 24px; display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 18px;
  border: 2px dashed rgba(221, 187, 130, .7); background: linear-gradient(120deg, rgba(184, 145, 79, .22), rgba(184, 145, 79, .06)); text-align: left; }
.rv__prozent { flex: none; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; color: #120d06;
  font: 800 24px/1 var(--schrift-titel); background: linear-gradient(145deg, var(--gold-hell), var(--gold-tief)); }
.rv__preis small { display: block; color: var(--gold); font: 600 12px/1.2 var(--schrift-text); letter-spacing: .12em; text-transform: uppercase; }
.rv__preis b { display: block; margin-top: 4px; color: #fff; font: 800 34px/1.05 var(--schrift-titel); white-space: nowrap; }
.rv__preis s { margin-left: 6px; color: var(--leise); font-size: .55em; font-weight: 600; }
.rv__preis span { display: block; margin-top: 6px; color: var(--leise); font: 400 13px/1.45 var(--schrift-text); }
.rv__rest { color: var(--gold); font-style: normal; font-weight: 600; }
.rv__code { position: absolute; top: -13px; right: 16px; padding: 4px 10px; border-radius: 999px; background: var(--bg-2); border: 1.5px solid var(--gold);
  color: var(--gold); font: 600 12px/1.2 var(--schrift-text); letter-spacing: .12em; }
.rv__raten { margin-top: 10px; color: var(--leise); font: 400 13px/1.4 var(--schrift-text); }
.rv__normal { margin-top: 24px; color: var(--text); font: 600 18px/1.4 var(--schrift-text); }