/* Mondgeschenk – mobile first. Deep night blue for the evening/fantasy parts, warm cream for
   reading and forms, soft moonlight as accent, rosé only for the main actions.
   Headings: Fraunces (warm serif) · text: Nunito. */
:root {
  --night-0: #0c1230;
  --night-1: #121a3d;
  --night-2: #1b2655;
  --night-3: #2a376f;
  --night-text: #e9e6f3;
  --night-soft: #b9bdd8;
  --ink: #1b2245;
  --ink-soft: #4a5174;
  --muted: #737896;
  --cream: #fbf6ee;
  --cream-2: #f4ecdf;
  --paper: #fffdf9;
  --line: #e8dfd1;
  --moon: #f1d99a;
  --moon-soft: #fbf1d6;
  --gold: #c99a3c;
  --rose: #d46f86;
  --rose-2: #b9566e;
  --rose-soft: #f8e4e8;
  --green: #3c8d63;
  --error: #a8314d;
  --radius: 18px;
  --radius-lg: 26px;
  --shadow: 0 10px 30px rgba(27, 34, 69, .08);
  --shadow-strong: 0 18px 44px rgba(12, 18, 48, .18);
  --gutter: 16px;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
  --focus: 0 0 0 3px rgba(212, 111, 134, .45);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font: 500 17px/1.6 var(--sans); overflow-x: hidden;
  min-height: 100vh; display: flex; flex-direction: column;
}
main { flex: 1 0 auto; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; line-height: 1.15;
             text-wrap: balance; }
p { margin: 0; }
.center { text-align: center; }
.icon { flex: none; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
           clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 10px; }

/* ---------------------------------------------------------------- top bar */
.topbar { position: sticky; top: 0; z-index: 20; background: rgba(251, 246, 238, .92);
          backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.topbar-inner { max-width: 1160px; margin: 0 auto; height: 62px; padding: 0 var(--gutter);
                display: flex; align-items: center; gap: 12px; }
.logo { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; text-decoration: none;
        color: var(--ink); font: 600 21px/1 var(--serif); letter-spacing: -.01em; }
.logo-moon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
             color: var(--night-1); background: radial-gradient(circle at 35% 35%, #fff6da, var(--moon) 70%);
             box-shadow: 0 0 18px rgba(241, 217, 154, .55); }
.logo-moon .icon { width: 19px; height: 19px; }
.back { display: inline-flex; padding: 8px; margin-left: -8px; border-radius: 12px; color: var(--ink); }
.back:hover { background: var(--cream-2); }

.topbar-dark { position: absolute; left: 0; right: 0; background: transparent; border: 0; backdrop-filter: none; }
.topbar-dark .logo, .page-night .topbar .logo { color: #fff; }
.menu { margin-left: auto; background: none; border: 0; color: var(--ink); cursor: pointer; border-radius: 12px;
        min-width: 44px; min-height: 44px; display: grid; place-items: center; }
.topbar-dark .menu, .page-night .menu { color: #fff; }
.mainnav { display: none; }
.mainnav.open { display: flex; position: absolute; top: 62px; right: var(--gutter); z-index: 30; flex-direction: column;
                background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow-strong); padding: 8px; min-width: 240px; }
.mainnav a { padding: 13px 16px; border-radius: 12px; text-decoration: none; color: var(--ink); font-weight: 700; }
.mainnav a:hover { background: var(--cream-2); }
.mainnav .nav-cta { color: var(--rose-2); }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0;
       font: 800 17px/1.25 var(--sans); text-decoration: none; cursor: pointer; border-radius: 999px;
       padding: 15px 26px; min-height: 54px; transition: transform .12s, box-shadow .2s, filter .2s, background .2s;
       text-align: center; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary { color: #fff; background: linear-gradient(180deg, var(--rose), var(--rose-2));
               box-shadow: 0 10px 24px rgba(185, 86, 110, .3); }
.btn-primary:hover { filter: brightness(1.05); box-shadow: 0 12px 28px rgba(185, 86, 110, .38); }
.btn-primary:disabled { filter: grayscale(.45) opacity(.5); box-shadow: none; cursor: not-allowed; }
.btn-ghost { color: #fff; background: rgba(255, 255, 255, .1); border: 1.5px solid rgba(255, 255, 255, .35); }
.btn-ghost:hover { background: rgba(255, 255, 255, .18); }
.btn-outline { color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); }
.btn-outline:hover { border-color: var(--ink-soft); }
.btn-large { font-size: 18px; padding: 17px 30px; min-height: 58px; }
.btn-block { width: 100%; }
.btn-text { background: none; border: 0; font: 700 15px/1.3 var(--sans); color: var(--ink-soft); cursor: pointer;
            text-decoration: underline; text-underline-offset: 3px; min-height: 44px; padding: 8px 12px; }
.btn-text:hover { color: var(--ink); }
.tag { font-size: 12px; font-weight: 800; background: rgba(255,255,255,.22); padding: 3px 8px; border-radius: 8px; }

.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 800 13px/1.3 var(--sans);
           letter-spacing: .12em; text-transform: uppercase; color: var(--moon); }
.eyebrow-dark { color: var(--gold); }

/* ---------------------------------------------------------------- hero */
.hero { position: relative; color: var(--night-text); overflow: hidden;
        background: radial-gradient(130% 90% at 70% 0%, var(--night-3) 0%, var(--night-1) 55%, var(--night-0) 100%);
        padding-bottom: 44px; }
.hero-art img { width: 100%; height: min(92vw, 58vh); object-fit: cover; object-position: 66% 50%;
                -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent);
                        mask-image: linear-gradient(180deg, #000 62%, transparent); }
.hero-text { position: relative; padding: 0 var(--gutter); margin-top: -64px; max-width: 640px; }
.hero h1 { margin-top: 10px; font-size: 34px; color: #fff; text-shadow: 0 2px 20px rgba(5, 8, 30, .5); }
.hero-sub { margin-top: 14px; font-size: 18px; font-weight: 600; color: #f4efe2; }
.hero-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.facts-line { display: flex; flex-wrap: wrap; gap: 4px 0; margin-top: 18px; font-size: 14px; font-weight: 700;
              color: var(--moon-soft); }
.facts-line span + span::before { content: "·"; margin: 0 10px; color: var(--moon); }

/* ---------------------------------------------------------------- sections */
.section { padding: 64px 0; }
.section-inner { max-width: 1160px; margin: 0 auto; padding: 0 var(--gutter); }
.section-title { font-size: 30px; color: var(--ink); }
.section-lead { margin-top: 12px; max-width: 660px; color: var(--ink-soft); font-size: 17px; }
.section-cta { margin-top: 34px; text-align: center; }
.night { background: linear-gradient(180deg, var(--night-1), var(--night-0)); color: var(--night-text); }
.night .section-title { color: #fff; }
.night .section-lead { color: var(--night-soft); }

/* proof: who is behind it - the number is the hero of this section */
.proof { background: var(--paper); border-bottom: 1px solid var(--line); }
.proof-inner { display: grid; gap: 22px; }
.proof .section-title { margin-top: 10px; }
.proof-figure { padding: 22px 22px 20px; border-radius: var(--radius-lg); text-align: center;
  background: radial-gradient(120% 140% at 50% 0%, var(--night-3), var(--night-1) 70%);
  color: var(--night-text); box-shadow: var(--shadow-strong); }
.proof-number { font: 700 60px/1 var(--serif); letter-spacing: -.02em; color: var(--moon); }
.proof-label { margin-top: 10px; font-size: 18px; font-weight: 800; color: #fff; }
.proof-source { margin-top: 6px; font-size: 14px; color: var(--night-soft); }
.proof-text { font-size: 17px; color: var(--ink-soft); }
.proof-items { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; }
.proof-items li { display: inline-flex; align-items: center; margin: 0 8px 8px 0; padding: 8px 14px;
  border-radius: 999px; background: var(--cream-2); color: var(--ink); font-size: 15px; font-weight: 800; }
.proof-items .icon { color: var(--night-3); margin-right: 8px; }

/* personal: one example instead of a feature list */
.personal-inner { display: grid; gap: 26px; }
.personal-art img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 62%;
  border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.message-label { display: inline-flex; align-items: center; gap: 6px; font: 800 12px/1.3 var(--sans); letter-spacing: .12em;
                 text-transform: uppercase; color: var(--rose-2); }
.personal-quote { margin: 20px 0 0; padding: 18px 20px 20px; border-left: 4px solid var(--rose);
  border-radius: 0 var(--radius) var(--radius) 0; background: var(--paper); box-shadow: var(--shadow); }
.personal-quote blockquote { margin: 8px 0 0; font: 500 22px/1.4 var(--serif); color: var(--ink); }
.personal-result { margin-top: 18px; font: 600 20px/1.35 var(--serif); color: var(--ink); }
.personal-note { margin-top: 8px; font-size: 17px; color: var(--ink-soft); max-width: 560px; }

/* sample (night): picture, play button, and the premium voice in a few words */
.sample-inner { display: grid; gap: 28px; align-items: center; }
.sample-art img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-lg);
                  box-shadow: 0 18px 44px rgba(0, 0, 0, .35); }
.sample-box .section-title { margin-top: 10px; }
.sample-pending { margin-top: 14px; max-width: 520px; color: var(--night-soft); font-size: 16px; }
.sample-pending strong { display: block; color: var(--moon-soft); font-weight: 800; }
.player-pending { opacity: .5; pointer-events: none; }
.night .wave i { background: rgba(255, 255, 255, .22); }
.night .wave i.on { background: var(--moon); }
.night .time, .night .volume { color: var(--night-soft); }
.night .volume input { accent-color: var(--moon); }
.sample-box .section-lead { max-width: 520px; }
.sample-player { margin-top: 22px; padding: 18px; border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.sample-player .play { width: 68px; height: 68px; }
.sample-player .wave { height: 52px; }
.sample-player .sample-pending { margin-top: 12px; }
.sample-title { margin-bottom: 10px; font-weight: 800; color: var(--moon-soft); }
.sample-meta { display: flex; flex-wrap: wrap; margin-top: 16px; font-size: 15px; font-weight: 800;
  color: var(--moon-soft); }
/* a small moon dot before every item - wraps cleanly on narrow phones */
.sample-meta span { display: inline-flex; align-items: center; margin: 0 16px 6px 0; white-space: nowrap; }
.sample-meta span::before { content: ""; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%;
  background: var(--moon); }
.sample-solo { max-width: 760px; }
.sample-page .sample-section { padding-top: 44px; }
.sample-cta { text-align: center; padding: 34px var(--gutter) 56px; }

/* how: three light steps - a big number, one line, one short sentence */
.how { background: var(--cream); }
.steps3 { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 18px; }
.steps3 li { display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; align-items: start; }
.steps3-num { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  font: 700 26px/1 var(--serif); color: var(--night-1); background: var(--moon);
  box-shadow: 0 0 18px rgba(241, 217, 154, .55); }
.steps3 h3 { font-size: 20px; line-height: 1.3; padding-top: 3px; }
.steps3 p { margin-top: 4px; font-size: 16px; color: var(--ink-soft); }

/* worlds (start page: a calm gallery, not the product) */
.worlds-section { background: var(--cream-2); }
.world-gallery { list-style: none; margin: 30px 0 0; padding: 0; display: grid;
                 grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.world-gallery > li { display: block; }
.world-tile { display: block; text-decoration: none; position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3;
              background: var(--night-2); box-shadow: var(--shadow); }
.world-tile img { width: 100%; height: 100%; object-fit: cover; }
.world-tile > span { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px; color: #fff;
                     font-weight: 800; font-size: 14px; line-height: 1.25;
                     background: linear-gradient(180deg, transparent, rgba(8, 12, 36, .78)); }
/* a world whose picture is still to be made: calm night with a star, not another world's picture */
.world-standin { display: grid; place-items: center; width: 100%; height: 100%; color: var(--moon);
                 background: radial-gradient(circle at 50% 38%, var(--night-3), var(--night-1) 75%); }
.world-standin .icon { opacity: .8; }
.gift-card .world-standin, .result-cover .world-standin { height: auto; }
/* seasonal world: a quiet note, no sale badge */
.season-note { display: inline-flex; align-items: center; gap: 5px; font: italic 600 12px/1.2 var(--sans); }
.world-tile .season-note { position: absolute; top: 8px; left: 8px; padding: 5px 9px; border-radius: 999px;
                           color: var(--night-1); background: rgba(251, 241, 214, .92); font-style: normal; }
.world-tile .season-note .icon { color: var(--gold); }
.world-tile:focus-visible { box-shadow: var(--focus); }
.more-worlds { margin-top: 16px; }
.more-worlds summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer;
  font-weight: 800; font-size: 16px; color: var(--rose-2); list-style: none; }
.more-worlds summary::-webkit-details-marker { display: none; }
.more-worlds summary:hover { text-decoration: underline; text-underline-offset: 3px; }
/* the further worlds (only after a tap): two per row on phones - long names and the
   seasonal note must never be cut off */
.world-gallery-more { margin-top: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.world-gallery-more .world-tile > span { font-size: 14px; padding: 22px 10px 9px; }

/* the arc: Abenteuer -> ... -> Gute-Nacht-Lied, getting calmer (and lower) step by step */
.arc-stages { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 0; position: relative; }
.arc-stage { position: relative; display: grid; grid-template-columns: 34px 1fr; column-gap: 14px;
             padding: 0 0 22px; }
.arc-stage::before { content: ""; position: absolute; left: 16px; top: 30px; bottom: 0; width: 2px;
                     background: linear-gradient(180deg, rgba(241, 217, 154, .5), rgba(241, 217, 154, .15)); }
.arc-stage:last-child::before { display: none; }
.arc-dot { grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
           color: var(--night-1); background: var(--moon);
           opacity: calc(1 - var(--i) * .13); box-shadow: 0 0 calc(22px - var(--i) * 4px) rgba(241, 217, 154, .6); }
.arc-stage:last-child .arc-dot { opacity: 1; }
.arc-stage { align-items: center; }
.arc-stage strong { font: 600 20px/1.3 var(--serif); color: #fff; }

/* closing */
.closing { position: relative; color: #fff; overflow: hidden; background: var(--night-0); }
.closing-art img { width: 100%; height: min(80vw, 420px); object-fit: cover; object-position: 60% 50%; opacity: .9;
                   -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
                           mask-image: linear-gradient(180deg, #000 55%, transparent); }
.closing-text { position: relative; padding: 0 var(--gutter) 64px; margin-top: -54px; text-align: center; }
.closing-text h2 { font-size: 30px; color: #fff; }
.closing-text > p { margin: 12px auto 0; max-width: 520px; color: var(--night-soft); }
.closing-text .btn { margin-top: 26px; }
.closing .facts-line { justify-content: center; }
.closing-lines { font: 500 19px/1.5 var(--serif); color: #f4efe2; }
.closing-text > .closing-lines { color: #f4efe2; }
.closing-maker { font-size: 14px; font-weight: 700; }
.closing-text > .closing-maker { margin-top: 18px; color: var(--night-soft); }

/* ---------------------------------------------------------------- footer */
.footer { border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; font-weight: 700; padding: 16px 0 20px; }
.page-home .footer { background: var(--night-0); border-color: rgba(255, 255, 255, .08); color: var(--night-soft); }
.page-home .footer-links a { color: var(--night-soft); }
.page-home .footer-links a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.footer-inner { max-width: 1160px; margin: 0 auto; padding: 0 var(--gutter); display: flex; flex-direction: column;
                align-items: center; gap: 4px; text-align: center; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 2px; }
.footer-links a { color: var(--ink-soft); text-decoration: none; font-size: 14px; padding: 12px 10px; min-height: 44px;
                  display: inline-flex; align-items: center; border-radius: 10px; }
.footer-links a:hover { background: var(--cream-2); color: var(--ink); }

/* shop + legal placeholders */
.info-page { padding-top: 28px; }
.info-card { padding: 34px 20px 30px; text-align: center; display: grid; justify-items: center; gap: 12px; }
.info-card .lead { margin: 0 0 8px; max-width: 460px; }
.info-icon { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
             background: var(--moon-soft); color: var(--gold); }

/* ---------------------------------------------------------------- generic page / cards */
.page { max-width: 660px; margin: 0 auto; padding: 22px var(--gutter) 40px; position: relative; }
.page-title { font-size: 29px; }
.lead { margin-top: 10px; color: var(--ink-soft); font-size: 16px; }
.muted { color: var(--muted); font-size: 15px; }
.card { background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.card-body { padding: 16px 18px 18px; }
.cover { width: 100%; object-fit: cover; }
.placeholder-note { margin-top: 10px; font-size: 13px; color: var(--muted); text-align: center; font-weight: 700; }
/* payment: product line, the "one-time, no subscription" note, messages after PayPal */
.pay-product { margin: 14px 0 8px; text-align: center; font-size: 17px; color: var(--ink); }
.pay-email { margin: 6px 0 4px; text-align: left; }
.pay-email .field-label { margin-top: 14px; }
.pay-email .hint, .withdraw-form .hint { margin: 6px 0 0; font-size: 13px; color: var(--ink-soft); }
.pay-email .error { margin-top: 8px; }
.pay-terms { margin: 0 0 14px; font-size: 14px; color: var(--ink-soft); text-align: center; }
/* payment area: one calm card, PayPal's own logo, no wall of icons */
.paybox { margin: 4px 0 16px; padding: 16px 18px 14px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--paper); text-align: center; }
.paybox-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 6px 8px; margin: 0 0 10px; font-weight: 800; font-size: 16px; color: var(--ink); }
.paybox-title .icon { color: var(--green); flex: none; }
/* the official logo: height set, width follows the viewBox - never distorted */
.pp-logo { display: inline-block; width: auto; flex: none; vertical-align: middle; }
.paybox-title .pp-logo { height: 26px; }
/* homepage: "Sicher bezahlen mit [PayPal]" - a light badge, readable on the night images */
/* robust on older phone browsers too: no flex "gap" (margins instead), one line, own colours */
.pay-badge { display: inline-flex; flex-wrap: nowrap; align-items: center; margin: 16px 0 0;
  padding: 6px 14px 6px 11px; border-radius: 999px; background-color: #fffdf9;
  background: rgba(255, 253, 249, .96); color: #1b2245; color: var(--ink);
  font-size: 13px; font-weight: 800; line-height: 1.2; white-space: nowrap; max-width: 100%;
  box-shadow: 0 4px 16px rgba(5, 8, 30, .18); }
.pay-badge .icon { color: var(--green); flex: none; margin-right: 7px; }
.pay-badge span { flex: none; margin-right: 7px; }
.pay-badge .pp-logo { display: inline-block; height: 18px; width: auto; flex: none; }
/* the closing section colours its paragraphs light - the badge keeps dark text on its pill */
.closing-text > .pay-badge { color: var(--ink); max-width: none; margin: 16px auto 0; }
.paybox-methods { margin: 0 0 6px; font-size: 13px; color: var(--ink-soft); }
.paybox-trust { margin: 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
@media (max-width: 420px) {
  .paybox { padding: 14px 12px 12px; }
  .paybox-title { font-size: 15px; }
}
.pay-message { margin: 0 auto 16px; max-width: 560px; padding: 12px 16px; border-radius: var(--radius);
  background: var(--moon-soft); color: var(--ink); text-align: center; font-weight: 700; }
.error { margin-top: 14px; background: #fbe6ea; color: var(--error); border-radius: 14px; padding: 12px 16px; font-weight: 800; }

/* step dots: progress and navigation. Reached steps are links, the current one is rosé,
   steps that still need data are muted and not clickable. */
.stepnav { margin: 18px auto 0; padding: 0 var(--gutter); }
.stepdots { display: flex; justify-content: center; list-style: none; margin: 0; padding: 0; }
.stepdots li { position: relative; margin: 0 9px; }
.stepdots li + li::before { content: ""; position: absolute; right: 100%; top: 50%; width: 18px; height: 2px;
                            background: var(--line); }
.stepdots li.open::before, .stepdots li.active::before { background: #e9b9c4; }
.stepdots .dot { position: relative; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
                 background: var(--paper); border: 2px solid var(--line); color: #aaa69a; font-weight: 800; font-size: 15px;
                 text-decoration: none; }
.stepdots a.dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; }   /* 48px touch area */
.stepdots .open .dot { border-color: #e9b9c4; color: var(--rose-2); cursor: pointer; transition: background .15s, transform .15s; }
.stepdots .open .dot:hover { background: var(--rose-soft); transform: translateY(-1px); }
.stepdots .active .dot { background: linear-gradient(180deg, var(--rose), var(--rose-2)); border-color: transparent;
                         color: #fff; box-shadow: 0 6px 14px rgba(185, 86, 110, .3); }
.stepdots .locked .dot { background: transparent; }

/* player */
.player { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "play wave" "time volume";
          align-items: center; gap: 8px 14px; margin-top: 18px; }
.play { grid-area: play; width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
        display: grid; place-items: center; color: var(--night-1); padding-left: 3px;
        background: radial-gradient(circle at 35% 35%, #fff6da, var(--moon) 75%); box-shadow: 0 8px 20px rgba(201, 154, 60, .35); }
.play.playing { padding-left: 0; }
.wave { grid-area: wave; height: 44px; display: flex; align-items: center; gap: 2px; cursor: pointer; }
.wave i { flex: 1; min-width: 2px; border-radius: 2px; background: #d9cfbd; transition: background .2s; }
.wave i.on { background: var(--night-2); }
.time { grid-area: time; font-size: 14px; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.volume { grid-area: volume; display: flex; align-items: center; gap: 8px; color: var(--ink-soft); }
.volume input { width: 100%; height: 40px; margin: 0; accent-color: var(--night-2); cursor: pointer; }

/* ---------------------------------------------------------------- steps */
.step { padding-bottom: 28px; }
.deco { position: absolute; right: var(--gutter); top: 18px; color: var(--gold); opacity: .85; }
.step .page-title { padding-right: 60px; }
.field-label { display: block; margin: 24px 0 8px; font-weight: 800; font-size: 15px; color: var(--ink-soft); }
.optional { font-weight: 600; color: var(--muted); }
.input { width: 100%; font: 600 18px/1.4 var(--sans); color: var(--ink); background: var(--paper);
         border: 1.5px solid var(--line); border-radius: 16px; padding: 15px 16px; transition: border-color .2s, box-shadow .2s; }
.input:focus { outline: none; border-color: var(--rose); box-shadow: var(--focus); }
.input::placeholder { color: #a7a399; font-weight: 500; }
.textarea { resize: vertical; min-height: 100px; font-size: 16px; }
.question { font-size: 22px; margin: 32px 0 14px; }
.ages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.age input, .world input, .companion input { position: absolute; opacity: 0; pointer-events: none; }
.age span { display: grid; place-items: center; align-content: center; height: 68px; border-radius: 16px; background: var(--paper);
            border: 1.5px solid var(--line); font: 600 24px/1 var(--serif); cursor: pointer; transition: all .15s; }
.age small { font: 700 12px/1 var(--sans); color: var(--muted); margin-top: 4px; }
.age input:checked + span { background: var(--night-1); color: #fff; border-color: transparent; box-shadow: 0 8px 18px rgba(18, 26, 61, .25); }
.age input:checked + span small { color: var(--moon); }
.age span:hover { border-color: var(--ink-soft); }
.age input:focus-visible + span, .world input:focus-visible + .world-card,
.companion input:focus-visible + .companion-card { box-shadow: var(--focus); }

/* worlds: 2 per row on phones, 3 on tablets, 5 + 5 on desktops */
.worlds { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 20px; }
.worlds .world { display: flex; flex: 0 0 calc((100% - 12px) / 2); min-width: 0; }
.worlds .world-card { flex: 1; display: flex; flex-direction: column; }
.world-card, .companion-card { position: relative; display: block; background: var(--paper); border-radius: 18px;
                               border: 3px solid transparent; box-shadow: var(--shadow); cursor: pointer;
                               overflow: hidden; transition: border-color .15s, transform .15s; }
.world-pic { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--night-2); }
.world-pic img { width: 100%; height: 100%; object-fit: cover; }
.world-name { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center;
              font-weight: 800; padding: 9px 6px 11px; font-size: 15px; line-height: 1.2; }
.world-own { display: block; margin-top: 14px; }
.own-card { display: flex; align-items: center; gap: 14px; padding: 14px 52px 14px 16px; border: 2px dashed #d8ccb6;
            background: var(--paper); box-shadow: none; }
.world input:checked + .own-card { border-style: solid; border-width: 3px; padding: 13px 51px 13px 15px; }
.own-icon { width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center;
            background: var(--moon-soft); color: var(--gold); }
.own-name { display: block; font-weight: 800; font-size: 17px; }
.own-hint { display: block; color: var(--muted); font-size: 14px; font-weight: 600; }
.own-card .tick { top: 50%; right: 14px; margin-top: -14px; }
.own-field .field-label { margin-top: 16px; }
.badge { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 8px; vertical-align: 1px;
         font-size: 12px; font-weight: 800; color: var(--night-2); background: var(--moon-soft); }
.tick { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%;
        display: grid; place-items: center; color: #fff; background: var(--rose-2);
        box-shadow: 0 3px 8px rgba(185, 86, 110, .4); transform: scale(0); transition: transform .15s; }
.world input:checked + .world-card, .companion input:checked + .companion-card { border-color: var(--rose-2); }
.world input:checked + .world-card .tick, .companion input:checked + .companion-card .tick { transform: scale(1); }
.world-card:hover, .companion-card:hover { transform: translateY(-2px); }

.companions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.companion-card { padding: 18px 10px 14px; text-align: center; min-height: 118px; }
.companion-icon { display: grid; place-items: center; height: 46px; font-size: 32px; color: var(--night-2); }
.companion-name { display: block; font-weight: 800; margin-top: 6px; font-size: 15px; line-height: 1.2; }
.favorites-label { margin-top: 26px; }
.optional-note { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
                 gap: 6px 14px; background: var(--moon-soft); color: var(--ink); border-radius: 14px;
                 padding: 6px 6px 6px 16px; font-weight: 700; font-size: 15px; line-height: 1.35; }
.optional-note > span { padding: 6px 0; }
.skip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px; border: 0;
        border-radius: 12px; background: var(--paper); color: var(--ink); font: 800 15px/1.2 var(--sans); cursor: pointer;
        box-shadow: 0 2px 6px rgba(27, 34, 69, .1); }
.skip:hover { box-shadow: 0 4px 10px rgba(27, 34, 69, .18); }

/* step 4: the message - a little letter */
.letter { margin-top: 22px; padding: 4px 18px 20px; background: var(--paper); border: 1px solid var(--line);
          border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.letter .field-label { margin-top: 18px; }
.letter-text { font: 500 19px/1.55 var(--serif); min-height: 130px; background: var(--cream); }
.examples-label { margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--muted); }
.examples { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.example { border: 1px solid var(--line); background: var(--cream); color: var(--ink); border-radius: 999px;
           padding: 9px 14px; min-height: 40px; font: 600 14px/1.3 var(--sans); cursor: pointer; text-align: left; }
.example:hover { border-color: var(--rose); background: var(--rose-soft); }

.optional-badge { display: inline-block; margin-bottom: 10px; padding: 3px 12px; border-radius: 999px;
                  background: var(--moon-soft); color: var(--ink-soft); font-size: 13px; font-weight: 800; }
.world-season .world-name { flex-direction: column; }
.world-name .season-note { display: block; margin-top: 3px; color: var(--gold); font-weight: 700; }
.world-season .world-card { box-shadow: 0 0 0 1px rgba(201, 154, 60, .45), var(--shadow); }
.step-actions { position: sticky; bottom: 0; z-index: 10; margin: 26px calc(-1 * var(--gutter)) 0;
                padding: 14px var(--gutter) calc(14px + env(safe-area-inset-bottom));
                background: linear-gradient(180deg, rgba(251,246,238,0), var(--cream) 30%); }
.step-actions .btn { max-width: 660px; margin: 0 auto; display: flex; }
.step-actions-split { display: grid; justify-items: center; gap: 4px; }

/* summary */
.summary { padding-bottom: 40px; }
.summary-layout { display: grid; gap: 22px; margin-top: 18px; }
.summary-sub { font-size: 19px; margin: 22px 0 10px; }
.gift-card { position: relative; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); }
.gift-card .cover { aspect-ratio: 16 / 10; }
.gift-card-title { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 10px 14px; border-radius: 14px;
                   background: rgba(12, 18, 48, .72); backdrop-filter: blur(4px); color: #fff; text-align: center;
                   font: 600 18px/1.25 var(--serif); }
.facts { list-style: none; margin: 0; padding: 16px 18px; background: var(--paper); border-radius: 20px;
         border: 1px solid var(--line); display: grid; gap: 10px; }
.facts li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; }
.facts .icon { color: var(--gold); margin-top: 3px; }
.fact-message .icon { color: var(--rose-2); }
.fact-message strong { font-family: var(--serif); font-weight: 500; }
.from { color: var(--muted); }
.edit-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; font-size: 14px; font-weight: 800; color: var(--ink-soft); }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; }
.checks .icon { color: var(--green); margin-top: 4px; }
.price-box { background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-strong); padding: 24px 18px; text-align: center; }
.price { font: 600 46px/1.1 var(--serif); letter-spacing: -.02em; }
.price-note { color: var(--ink-soft); font-weight: 700; margin: 4px 0 18px; }
.price-box .checks { text-align: left; margin: 0 0 22px; padding: 18px 0 0; border-top: 1px solid var(--line); }

/* production */
.page-night .topbar { background: var(--night-1); border: 0; }
.night-head { background: linear-gradient(180deg, var(--night-1), var(--night-2)); color: #fff; padding: 6px 0 28px; }
.night-inner { max-width: 660px; margin: 0 auto; padding: 0 var(--gutter); display: flex; flex-direction: column; }
.night-head .page-title { order: -1; margin: 10px 0 16px; color: #fff; }
.night-head .lead { color: var(--night-soft); }
.producing { padding-top: 14px; }
.producing-art img { width: 100%; border-radius: 24px; aspect-ratio: 16 / 9; object-fit: cover; object-position: 66% 50%;
                     box-shadow: 0 18px 40px rgba(5, 8, 30, .35); }
.progress-steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 16px; }
.progress-steps li { display: flex; align-items: center; gap: 14px; font-weight: 700; color: var(--muted); transition: color .3s; }
.progress-steps .dot { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center;
                       background: #e8e1d4; color: #fff; transition: background .3s; }
.progress-steps .dot .icon { opacity: 0; transition: opacity .3s; }
.progress-steps li.done { color: var(--ink); }
.progress-steps li.done .dot { background: var(--green); }
.progress-steps li.done .dot .icon { opacity: 1; }
.progress-steps li.active { color: var(--ink); font-weight: 800; }
.progress-steps li.active .dot { background: transparent; border: 3px dotted var(--gold); animation: spin 2.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* finished */
.finished { padding-top: 56px; }
.deco-moon { left: 50%; right: auto; top: 14px; transform: translateX(-50%); }
.finished .page-title { padding: 0 10px; }
.result-card { margin: 20px 0 18px; }
.result-cover { position: relative; }
.result-cover .cover { aspect-ratio: 4 / 3; }
.result-title { position: absolute; left: 12px; right: 12px; bottom: 12px; text-align: center;
                font: 600 19px/1.25 var(--serif); background: rgba(12, 18, 48, .72); backdrop-filter: blur(4px);
                border-radius: 14px; padding: 10px 14px; color: #fff; }
.finished form { margin-top: 12px; }
.finished .placeholder-note { margin-top: 6px; }

/* ---------------------------------------------------------------- tablet */
@media (min-width: 720px) {
  :root { --gutter: 28px; }
  .hero h1 { font-size: 46px; }
  .hero-sub { font-size: 20px; }
  .hero-actions { flex-direction: row; flex-wrap: wrap; }
  .section { padding: 88px 0; }
  .section-title { font-size: 38px; }
  .world-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .world-gallery-more { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .steps3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 36px; }
  .steps3 li { grid-template-columns: 1fr; row-gap: 14px; }
  .proof-number { font-size: 76px; }
  .closing-text h2 { font-size: 40px; }

  .stepnav { margin-top: 28px; }
  .stepdots li { margin: 0 16px; }
  .stepdots li + li::before { width: 32px; }
  .footer-inner { flex-direction: row; justify-content: space-between; }
  .info-page { padding-top: 56px; }
  .info-card { padding: 46px 40px 42px; }
  .step { padding-top: 18px; }
  .ages { grid-template-columns: repeat(4, 96px); gap: 12px; }
  .worlds { gap: 16px; }
  .worlds .world { flex-basis: calc((100% - 2 * 16px) / 3); }
  .world-name { font-size: 16px; }
  .step-actions { position: static; background: none; margin: 0; padding: 30px 0 0; }
  .step-actions .btn { max-width: none; }
  .step-world .step-actions .btn { max-width: 460px; }
  .companions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .summary-layout { grid-template-columns: 1.15fr 1fr; align-items: start; gap: 28px; }
  .price-box { position: sticky; top: 24px; padding: 28px 26px; }
  .facts { padding: 18px 22px; }
  .step { padding-bottom: 40px; }
  .player { grid-template-columns: auto 1fr auto 140px; grid-template-areas: "play wave time volume"; }
  .player-pending { grid-template-columns: auto 1fr; grid-template-areas: "play wave"; }
  .letter { padding: 6px 26px 24px; }
}
/* the arc as a descending line from left to right */
@media (min-width: 900px) {
  .arc-stages { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; margin-top: 46px; }
  .arc-stage { grid-template-columns: 1fr; padding: 0; margin-top: calc(var(--i) * 22px); }
  .arc-stage::before { left: 34px; right: -18px; top: calc(16px + 11px); bottom: auto; width: auto; height: 2px;
                       transform-origin: left; transform: rotate(4deg);
                       background: linear-gradient(90deg, rgba(241, 217, 154, .55), rgba(241, 217, 154, .15)); }
  .arc-dot { grid-row: auto; margin-bottom: 14px; }
  .sample-inner { grid-template-columns: 1.1fr 1fr; gap: 56px; }
  .sample-inner.sample-solo { grid-template-columns: 1fr; text-align: center; }
  .sample-solo .section-lead { margin-left: auto; margin-right: auto; }
  .sample-solo .sample-meta { justify-content: center; }
  .personal-inner { grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
  /* proof: heading + text left, the number card right */
  .proof-inner { grid-template-columns: 1.15fr 1fr; grid-template-areas: "head figure" "body figure";
                 column-gap: 56px; row-gap: 14px; align-items: center; }
  .proof-head { grid-area: head; align-self: end; }
  .proof-body { grid-area: body; align-self: start; }
  .proof-figure { grid-area: figure; padding: 38px 30px 34px; }
  .proof-number { font-size: 88px; }
}
@media (min-width: 1000px) {
  .mainnav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
  .mainnav a { color: var(--ink-soft); padding: 10px 14px; }
  .topbar-dark .mainnav a, .page-night .mainnav a { color: #fff; }
  .topbar-dark .mainnav a:hover, .page-night .mainnav a:hover { background: rgba(255,255,255,.12); }
  .mainnav .nav-cta, .topbar-dark .mainnav .nav-cta, .page-night .mainnav .nav-cta {
    color: #fff; margin-left: 8px; border-radius: 999px; padding: 10px 20px;
    background: linear-gradient(180deg, var(--rose), var(--rose-2)); box-shadow: 0 6px 14px rgba(185, 86, 110, .28); }
  .mainnav .nav-cta:hover { filter: brightness(1.05); background: linear-gradient(180deg, var(--rose), var(--rose-2)); }
  .menu { display: none; }

  .world-gallery-more { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .section { padding: 104px 0; }

  .page { max-width: 840px; padding-top: 40px; }
  .page-title { font-size: 38px; }
  .step-child, .step-details, .step-message { max-width: 760px; }
  .step-world { max-width: 1160px; }
  .worlds .world { flex-basis: calc((100% - 4 * 16px) / 5); }
  .world-own { max-width: 640px; margin: 18px auto 0; }
  .own-field { max-width: 640px; margin: 0 auto; }
  .summary { max-width: 1000px; }

  .night-head { background: linear-gradient(180deg, var(--night-1) 0, var(--night-2) 40%, #cfc9e0 74%, var(--cream) 92%);
                padding: 0 0 4px; }
  .night-inner { max-width: 1000px; }
  .producing-art img { aspect-ratio: 21 / 8; border-radius: 0 0 28px 28px; box-shadow: none;
                       -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent);
                               mask-image: linear-gradient(180deg, #000 72%, transparent); }
  .night-head .page-title { order: 1; color: var(--ink); margin-top: 6px; }
  .night-head .lead { order: 2; color: var(--ink-soft); }
  .producing { max-width: 1000px; }
  .finished { max-width: 660px; padding-top: 60px; }
  .info-page { max-width: 760px; }
  .result-cover .cover { aspect-ratio: 16 / 9; }
}
/* desktop hero: text left on the night sky, the picture fills the right and fades into it */
@media (min-width: 1100px) {
  .hero { min-height: clamp(640px, 100vh, 900px); display: flex; align-items: center; padding: 100px 0 70px; }
  .hero-art { position: absolute; inset: 0 0 0 34%; }
  .hero-art img { height: 100%; object-position: 70% 50%;
                  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%);
                          mask-image: linear-gradient(90deg, transparent 0, #000 30%); }
  .hero-text { margin: 0 0 0 max(var(--gutter), calc((100vw - 1160px) / 2 + var(--gutter)));
               max-width: 560px; padding: 0; }
  .hero h1 { font-size: 56px; }
  .closing { display: grid; min-height: 560px; align-items: center; }
  .closing-art { position: absolute; inset: 0; }
  .closing-art img { height: 100%; opacity: .75; -webkit-mask-image: none; mask-image: none; }
  /* text on the dark window side, the gift stays visible on the right */
  .closing-art img { object-position: 50% 62%; }
  .closing-text { margin: 0 0 0 max(var(--gutter), calc((100vw - 1160px) / 2 + var(--gutter)));
                  padding: 80px 0; max-width: 520px; text-align: left; }
  .closing-text::before { content: ""; position: absolute; inset: 0 -120px; z-index: -1;
                          background: radial-gradient(closest-side, rgba(12, 18, 48, .7), transparent); }
  .closing-text > p { margin-left: 0; }
  .closing .facts-line { justify-content: flex-start; }
}
@media (max-width: 1299px) {
  .world-name { min-height: calc(2.4em + 20px); }
}
@media (max-width: 719px) {
  .deco svg { width: 38px; height: 38px; }
  .step .page-title { padding-right: 46px; }
  .hero-actions .btn { width: 100%; }
  .hero-actions .btn-large { padding-left: 18px; padding-right: 18px; font-size: 17px; }
  /* phones: the main button must be visible without scrolling */
  .hero-art img { height: min(74vw, 40vh); }
  .hero-text { margin-top: -44px; }
  .hero .eyebrow { letter-spacing: .08em; }
  .hero h1 { font-size: 31px; }
  .hero-sub { margin-top: 10px; font-size: 17px; }
  .hero-actions { margin-top: 20px; }
  .facts-line { font-size: 14px; }
  /* type scale on phones: hero 31 / section 26 / number 60 / body 17 / meta 14-15 */
  .section { padding: 52px 0; }
  .section-title { font-size: 26px; }
  .section-lead { font-size: 17px; }
  .personal-quote blockquote { font-size: 21px; }
  .personal-result { font-size: 19px; }
  .hero .eyebrow { font-size: 12px; }
  .world-gallery { gap: 10px; }
  .world-tile > span { font-size: 15px; }
  .arc-stages { margin-top: 26px; }
  .arc-stage { padding-bottom: 18px; }
  .closing-text h2 { font-size: 27px; }
  .facts-line span + span::before { margin: 0 7px; }
  /* phones: the PayPal badge a little larger, so the logo is clearly recognisable */
  .pay-badge { padding: 7px 15px 7px 12px; font-size: 14px; }
  .pay-badge .pp-logo { height: 21px; }
}
@media (min-width: 1600px) {
  .topbar-inner, .section-inner, .footer-inner { max-width: 1320px; }
  .hero-text { margin-left: calc((100vw - 1320px) / 2 + var(--gutter)); max-width: 640px; }
  .hero h1 { font-size: 64px; }
  .page-title { font-size: 42px; }
  .lead { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* player feedback on phones: "lädt …" while buffering, a short note if a start fails */
.player-note { grid-column: 1 / -1; margin: 0; font-size: 14px; font-weight: 700; color: var(--rose-2); }
.player-note:empty { display: none; }
.night .player-note { color: var(--moon-soft); }
.player.loading .play { animation: mg-pulse 1.2s ease-in-out infinite; }
@keyframes mg-pulse { 50% { opacity: .55; } }

/* ---------------------------------------------------------------- legal pages: no small print */
.legal-page { max-width: 760px; padding-top: 28px; padding-bottom: 48px; }
.legal-page .page-title { margin-bottom: 8px; }
.legal-section { margin-top: 28px; }
.legal-section h2 { font-size: 22px; margin-bottom: 10px; }
.legal-section p, .legal-section li { font-size: 17px; line-height: 1.65; color: var(--ink); }
.legal-section p + p { margin-top: 12px; }
.legal-section ul { margin: 10px 0 0; padding-left: 22px; }
.legal-section li + li { margin-top: 6px; }
.legal-section a { color: var(--rose-2); word-break: break-word; }
/* the official model withdrawal text, visibly set apart */
.legal-model { padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); }
.legal-model + .legal-model { margin-top: 12px; }
.legal-version { margin-top: 32px; font-size: 15px; color: var(--ink-soft); }

/* checkout: information, consent, legal links */
.pay-info { margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: var(--ink-soft); text-align: left; }
.consent { margin: 0 0 12px; padding: 14px; border: 1.5px solid var(--line); border-radius: var(--radius);
  background: var(--paper); text-align: left; }
.consent-error { border-color: var(--error); }
.consent-label { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 15px;
  line-height: 1.5; color: var(--ink); }
.consent-label input { flex: none; width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--rose-2); }
.pay-legal { margin: 0 0 14px; font-size: 15px; color: var(--ink-soft); text-align: left; }
.pay-legal a { color: var(--rose-2); }
.privacy-hint { margin-top: 8px; font-size: 14px; color: var(--ink-soft); }

/* "Vertrag widerrufen" - always there, clearly visible */
.footer-links .footer-withdraw { font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.withdraw-link { margin-top: 18px; text-align: center; font-size: 15px; }
.withdraw-link a { color: var(--ink-soft); }
.withdraw-form { display: grid; gap: 6px; margin-top: 18px; }
.withdraw-form .field-label { margin-top: 14px; }
.withdraw-form .btn { margin-top: 22px; }
.withdraw-summary { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 20px 0;
  padding: 16px 18px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line);
  font-size: 17px; }
.withdraw-summary dt { font-weight: 800; color: var(--ink-soft); }
.withdraw-summary dd { margin: 0; word-break: break-word; }
.withdraw-page form + form { margin-top: 10px; text-align: center; }

/* delivery restriction (§ 312j Abs. 1 BGB) - plainly visible, no small print */
.sales-area { margin: 10px 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--moon-soft);
  font-size: 15px; font-weight: 700; color: var(--ink); text-align: left; }