/* Gutschein: gestalten statt Shop */
.page-hero{ padding:150px 0 40px; }
.gift{ display:grid; gap:40px; align-items:start; }
@media (min-width:1000px){ .gift{ grid-template-columns:1.05fr .95fr; gap:64px; } .gift-preview{ position:sticky; top:100px; } }
.steps{ display:grid; gap:14px; counter-reset:st; }
.step{ background:var(--surface); border:1px solid var(--field); padding:24px 22px; }
@media (min-width:640px){ .step{ padding:28px 30px; } }
.step-h{ display:flex; gap:14px; align-items:baseline; margin-bottom:16px; }
.step-h .n{ font-family:var(--serif); font-size:34px; line-height:1; color:var(--deep); min-width:40px; }
.step-h h2{ font-size:26px; line-height:1.15; }
.step-h small{ display:block; font-family:var(--sans); font-size:14px; color:var(--muted); margin-top:4px; }
.seg{ display:inline-flex; border:1px solid var(--action); margin-bottom:14px; }
.seg button{ border:0; background:var(--surface); padding:10px 18px; font-size:13px; letter-spacing:1.5px; text-transform:uppercase; font-weight:600; }
.seg button[aria-pressed="true"]{ background:var(--action); color:var(--on-action); }
.tiles{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.tile{ position:relative; text-align:left; border:1px solid var(--field); background:var(--bg); padding:0; display:grid; grid-template-columns:60px 1fr; align-items:center; gap:12px; min-height:72px; overflow:hidden; }
.tile img{ width:60px; height:72px; object-fit:cover; }
.tile b{ font-family:var(--serif); font-weight:400; font-size:18px; line-height:1.15; display:block; }
.tile small{ font-size:12.5px; color:var(--muted); }
.tile[aria-pressed="true"]{ border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.tile[aria-pressed="true"]::after{ content:"✓"; position:absolute; right:8px; top:6px; width:22px; height:22px; border-radius:50%; background:var(--ink); color:var(--bg); font-size:12px; display:grid; place-items:center; }
.amounts{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.amounts .chip{ min-width:76px; justify-content:center; font-size:15px; }
.amounts .own{ display:flex; align-items:center; border:1px solid var(--field); background:var(--surface); height:40px; padding:0 10px; gap:4px; }
.amounts .own input{ width:70px; border:0; background:none; font:inherit; font-size:15px; outline:none; }
.sugg{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.sugg button{ border:1px dashed var(--line-strong); background:none; padding:6px 12px; font-size:13.5px; border-radius:16px; color:var(--muted); }
.sugg button:hover{ color:var(--ink); border-style:solid; }
.counter{ font-size:12.5px; color:var(--muted); text-align:right; }
.deliv{ display:grid; gap:8px; }
.deliv label{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; padding:14px 16px; border:1px solid var(--field); background:var(--bg); cursor:pointer; }
.deliv input[type=radio]{ width:20px; height:20px; accent-color:var(--deep); margin:2px 0 0; }
.deliv b{ display:block; font-size:16px; }
.deliv small{ display:block; font-size:14px; color:var(--muted); }
.deliv label:has(input:checked){ border-color:var(--ink); background:var(--surface); box-shadow:inset 0 0 0 1px var(--ink); }
.deliv .when{ margin-top:10px; }
.two{ display:grid; gap:14px; }
@media (min-width:640px){ .two{ grid-template-columns:1fr 1fr; } }
/* Gutscheinkarte mit Vorder- und Rückseite */
.vc-stage{ perspective:1400px; }
.vc{ position:relative; aspect-ratio:1.586; transform-style:preserve-3d; transition:transform .9s cubic-bezier(.3,.7,.2,1); }
.vc.flip{ transform:rotateY(180deg); }
.vc-face{ position:absolute; inset:0; border-radius:10px; backface-visibility:hidden; -webkit-backface-visibility:hidden; overflow:hidden; padding:clamp(18px,4.4%,30px); display:flex; flex-direction:column; justify-content:space-between; background:var(--vc-bg,#DCC3C3); color:var(--vc-ink,#2E2226); box-shadow:0 24px 50px -18px rgba(46,42,43,.45),0 2px 6px rgba(46,42,43,.12); transition:background-color .6s,color .6s; }
.vc-back{ transform:rotateY(180deg); background:#FBF8F6; color:#272727; }
.vc-face::before{ content:""; position:absolute; right:-14%; top:-30%; width:62%; aspect-ratio:1; border-radius:50%; border:1.5px solid currentColor; opacity:.22; }
.vc-face::after{ content:""; position:absolute; right:6%; bottom:-34%; width:44%; aspect-ratio:1; border-radius:46% 54% 50% 50%; background:var(--vc-blob,#fff); opacity:.28; }
.vc-top{ display:flex; justify-content:space-between; align-items:flex-start; position:relative; z-index:1; }
.vc-logo{ width:32%; }
.vc-logo .ink{ fill:currentColor; }
.vc-kind{ font-size:10.5px; letter-spacing:3px; text-transform:uppercase; font-weight:600; opacity:.8; }
.vc-main{ position:relative; z-index:1; }
.vc-main .t{ font-family:var(--serif); font-size:clamp(34px,7.4vw,54px); line-height:.95; }
.vc-main .s{ font-family:var(--serif); font-style:italic; font-size:clamp(16px,2.8vw,21px); margin-top:6px; }
.vc-for{ position:relative; z-index:1; display:flex; justify-content:space-between; align-items:flex-end; gap:12px; font-size:13px; letter-spacing:1px; }
.vc-for b{ font-family:var(--serif); font-weight:400; font-size:clamp(18px,3vw,24px); letter-spacing:0; display:block; }
.vc-msg{ position:relative; z-index:1; font-family:var(--serif); font-style:italic; font-size:clamp(16px,2.8vw,21px); line-height:1.35; white-space:pre-wrap; overflow:hidden; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; }
.vc-code{ position:relative; z-index:1; display:flex; justify-content:space-between; align-items:flex-end; gap:10px; font-size:12px; color:#5A5555; }
.vc-code .c{ font-family:ui-monospace,Menlo,monospace; font-size:clamp(13px,2.2vw,16px); letter-spacing:2px; color:#272727; background:#ECE5E1; padding:5px 9px; }
.preview-bar{ display:flex; justify-content:space-between; gap:12px; align-items:center; margin-top:18px; flex-wrap:wrap; }
.preview-sum{ font-size:15px; color:var(--muted); }
.preview-sum b{ color:var(--ink); }
.how{ display:grid; gap:18px; }
@media (min-width:900px){ .how{ grid-template-columns:repeat(3,1fr); } }
.how div{ border-top:3px solid var(--deep); background:var(--surface); padding:26px 24px; }
.how b{ display:block; font-family:var(--serif); font-weight:400; font-size:38px; color:var(--deep); line-height:1; margin-bottom:12px; }
.how h3{ font-size:22px; margin-bottom:6px; }
.how p{ color:var(--muted); font-size:16px; }
.redeem{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.redeem .input{ max-width:280px; font-family:ui-monospace,Menlo,monospace; letter-spacing:2px; }
.gdone{ text-align:center; padding:30px 10px 10px; animation:rise2 .5s var(--ease); }
.gdone h2{ font-size:34px; margin:6px 0 10px; }
.gdone p{ color:var(--muted); max-width:46ch; margin:0 auto; }
.burst{ position:fixed; pointer-events:none; z-index:95; width:8px; height:8px; border-radius:50%; animation:burst 1.1s ease-out forwards; }
@keyframes burst{ to{ transform:translate(var(--dx),var(--dy)) scale(.4); opacity:0; } }