/* Gutschein-Shop – Farben und Schriften wie saraya-club.at */
@font-face{font-family:'Cormorant Garamond';font-weight:500;font-display:swap;src:url(fonts/cormorant-garamond-latin-500-normal.ttf)}
@font-face{font-family:'Cormorant Garamond';font-weight:700;font-display:swap;src:url(fonts/cormorant-garamond-latin-700-normal.ttf)}
@font-face{font-family:'Cormorant Garamond';font-weight:600;font-style:italic;font-display:swap;src:url(fonts/cormorant-garamond-latin-600-italic.ttf)}
@font-face{font-family:'Outfit';font-weight:300;font-display:swap;src:url(fonts/outfit-latin-300-normal.ttf)}
@font-face{font-family:'Outfit';font-weight:400;font-display:swap;src:url(fonts/outfit-latin-400-normal.ttf)}
@font-face{font-family:'Outfit';font-weight:600;font-display:swap;src:url(fonts/outfit-latin-600-normal.ttf)}
:root{--bg:#07060a;--bg-1:#0e0a10;--bg-2:#181016;--bg-3:#1f1620;--line:#2c1f26;--gold:#c9a961;--gold-bright:#e6c987;
  --gold-soft:#a88848;--gold-deep:#7a6033;--cream:#f0deb7;--wine:#6b1f2a;--wine-bright:#8a2a38;--text:#f0e2c8;
  --text-soft:#c8b69a;--text-muted:#ad9c92;--text-faint:#5a4a40;--rot:#e07a7a}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;min-height:100vh;font-variant-numeric:lining-nums;color:var(--text);font:300 16px/1.6 'Outfit','Helvetica Neue',sans-serif;
  background:radial-gradient(1200px 600px at 10% -10%,rgba(107,31,42,.35),transparent 60%),
             radial-gradient(900px 500px at 100% 0,rgba(201,169,97,.08),transparent 60%),var(--bg)}
a{color:var(--gold-bright)}
.kopf{display:flex;align-items:center;justify-content:space-between;max-width:1080px;margin:0 auto;padding:18px 20px}
.kopf img{height:46px;display:block}
.sprache a{color:var(--text-muted);text-decoration:none;font-size:13px;letter-spacing:2px;margin-left:12px}
.sprache a.an{color:var(--gold)}
main{max-width:1080px;margin:0 auto;padding:10px 20px 50px}
.ueber{font:600 12px/1 'Outfit';letter-spacing:5px;text-transform:uppercase;color:var(--gold);margin:18px 0 10px}
h1{font:700 clamp(38px,6vw,60px)/1.05 'Cormorant Garamond',serif;color:var(--cream);margin:0 0 14px}
.einl{color:var(--text-soft);max-width:560px;margin:0 0 26px}
.raster{display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width:900px){.raster{grid-template-columns:1.05fr 1fr;align-items:start}}
/* Gutschein-Vorschau */
.karte{position:relative;aspect-ratio:210/148;border-radius:16px;padding:6% 6.5%;overflow:hidden;
  background:radial-gradient(120% 90% at 0 100%,rgba(58,13,20,.9),transparent 60%),linear-gradient(135deg,#1f1620,#0e0a10);
  border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.7)}
.karte::before{content:"";position:absolute;inset:4.5%;border:1px solid rgba(201,169,97,.35);border-radius:6px;pointer-events:none}
.karte .k-logo{width:34%;display:block}
.karte .k-kopf{font:600 clamp(8px,1.2vw,11px)/1 'Outfit';letter-spacing:4px;color:var(--gold);margin:7% 0 2%}
.karte .k-titel{font:700 clamp(28px,5.2vw,48px)/1 'Cormorant Garamond',serif;color:var(--cream)}
.karte .k-drink{font:600 italic clamp(18px,3vw,28px)/1.3 'Cormorant Garamond',serif;color:var(--gold-bright);margin-top:2%}
.karte .k-qr{position:absolute;right:7%;top:30%;width:26%;aspect-ratio:1;background:#fff;border-radius:8px;
  display:grid;place-items:center;color:#0e0a10;font:600 11px 'Outfit';letter-spacing:2px}
.karte .k-qr svg{width:78%;height:78%}
.karte .k-fuss{position:absolute;left:6.5%;bottom:8%;font:400 clamp(9px,1.2vw,12px)/1.4 'Outfit';color:var(--text-muted)}
.schritte{margin:22px 0 0;padding:0;list-style:none;counter-reset:s}
.schritte li{counter-increment:s;position:relative;padding:0 0 12px 44px;color:var(--text-soft)}
.schritte li::before{content:counter(s);position:absolute;left:0;top:-2px;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--gold-deep);color:var(--gold);display:grid;place-items:center;font:600 13px 'Outfit'}
.schritte h3{font:600 13px 'Outfit';letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin:0 0 12px;padding-left:0}
/* Formular */
.form{background:linear-gradient(180deg,rgba(31,22,32,.9),rgba(14,10,16,.95));border:1px solid var(--line);border-radius:16px;padding:24px}
.preiszeile{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:18px}
.preiszeile b{font:700 26px/1.1 'Cormorant Garamond',serif;color:var(--cream)}
.preiszeile .drink{display:block;font:600 italic 18px 'Cormorant Garamond',serif;color:var(--gold-bright)}
.preis{font:700 34px/1 'Cormorant Garamond',serif;color:var(--gold-bright);white-space:nowrap;text-align:right}
.preis small{display:block;font:300 12px 'Outfit';color:var(--text-muted);letter-spacing:1px}
.band{background:linear-gradient(90deg,var(--wine),var(--wine-bright));color:#fff;border-radius:10px;padding:10px 14px;
  font:400 14px/1.4 'Outfit';margin-bottom:18px;display:flex;gap:10px;align-items:center}
.band span{font-size:20px}
label{display:block;font-size:13px;color:var(--text-muted);margin:12px 0 5px;letter-spacing:.3px}
input[type=text],input[type=email]{width:100%;background:#0b080d;border:1px solid var(--line);border-radius:10px;padding:12px 14px;
  color:var(--text);font:400 16px 'Outfit';outline:none}
input:focus{border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(201,169,97,.12)}
.menge{display:flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:10px;width:max-content;overflow:hidden}
.menge button{background:#0b080d;border:0;color:var(--gold);width:46px;height:46px;font-size:22px;cursor:pointer}
.menge input{width:56px;text-align:center;border:0;border-radius:0;background:#0b080d;color:var(--cream);font:600 18px 'Outfit';-moz-appearance:textfield}
.menge input::-webkit-inner-spin-button{-webkit-appearance:none}
.haken{display:flex;gap:10px;align-items:flex-start;color:var(--text-soft);font-size:14px;margin:12px 0 0;cursor:pointer}
.haken input{margin-top:4px;accent-color:var(--gold);width:18px;height:18px;flex:none}
.summe{display:flex;justify-content:space-between;align-items:baseline;margin:20px 0 14px;padding-top:14px;border-top:1px solid var(--line)}
.summe span{color:var(--text-muted);letter-spacing:2px;text-transform:uppercase;font-size:12px}
.summe b{font:700 30px 'Cormorant Garamond',serif;color:var(--cream)}
.knopf{width:100%;border:0;border-radius:999px;padding:16px 20px;cursor:pointer;font:600 15px 'Outfit';letter-spacing:2px;
  text-transform:uppercase;color:#1a1218;background:linear-gradient(135deg,var(--gold-bright),var(--gold) 55%,var(--gold-soft));
  box-shadow:0 8px 32px rgba(201,169,97,.25)}
.knopf:disabled{opacity:.5;cursor:not-allowed}
.klein{font-size:12px;color:var(--text-muted);text-align:center;margin:12px 0 0}
.fehler{background:rgba(138,42,56,.25);border:1px solid var(--wine-bright);color:#f4c9c9;border-radius:10px;padding:10px 14px;margin-bottom:14px;font-size:14px}
.fehler div+div{margin-top:4px}
.hinweis{background:rgba(201,169,97,.08);border:1px solid var(--gold-deep);border-radius:10px;padding:10px 14px;margin-bottom:14px;font-size:14px;color:var(--text-soft)}
.info{color:var(--text-muted);font-size:13px;margin-top:16px}
footer{border-top:1px solid var(--line);margin-top:30px;padding:22px 20px;text-align:center;color:var(--text-faint);font-size:12px}
footer a{color:var(--text-muted);text-decoration:none;margin:0 8px}
/* Textseiten + Danke */
.text{max-width:760px}
.text h2{font:700 26px 'Cormorant Garamond',serif;color:var(--cream);margin:28px 0 6px}
.text p,.text li{color:var(--text-soft)}
.danke{max-width:620px;margin:30px auto;text-align:center}
.danke .symbol{width:74px;height:74px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;font-size:34px;
  border:1px solid var(--gold-deep);color:var(--gold-bright)}
.danke p{color:var(--text-soft)}
.danke .knopf{display:inline-block;width:auto;text-decoration:none;padding:13px 28px;margin-top:16px}
.lade{display:inline-block;width:18px;height:18px;border:2px solid var(--gold-deep);border-top-color:var(--gold-bright);border-radius:50%;animation:dreh 1s linear infinite;vertical-align:-3px;margin-right:8px}
@keyframes dreh{to{transform:rotate(360deg)}}
/* Produktwahl + Halloween (seit 16.10.2026) */
.wahl{display:grid;gap:10px;margin-bottom:6px}
.wahl-karte{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;margin:0;background:#0b080d;color:var(--text)}
.wahl-karte input{margin-top:5px;accent-color:var(--gold);width:18px;height:18px;flex:none}
.wahl-karte:has(input:checked){border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.wahl-inhalt{flex:1;display:block}
.wahl-inhalt b{display:block;font:700 20px/1.2 'Cormorant Garamond',serif;color:var(--cream)}
.wahl-text{display:block;font-size:13px;color:var(--text-muted);margin-top:3px;line-height:1.45}
.wahl-preis{font:700 24px/1 'Cormorant Garamond',serif;color:var(--gold-bright);white-space:nowrap}
.wahl-hw{background:linear-gradient(135deg,#1a0806,#0b080d 70%)}
.wahl-hw input{accent-color:#ff9a3c}
.wahl-hw:has(input:checked){border-color:#ff9a3c;box-shadow:0 0 0 1px #ff9a3c inset,0 0 24px rgba(255,154,60,.18)}
.wahl-hw .wahl-preis{color:#ffb860}
.karte-hw{background:radial-gradient(110% 90% at 30% 110%,rgba(122,29,12,.95),transparent 60%),linear-gradient(135deg,#140806,#0a0608)}
.karte-hw::before{border-color:rgba(255,154,60,.45)}
.karte-hw .k-hwlogo{width:64%;display:block;border-radius:4px;margin-top:-1%}
.karte-hw .k-hwdatum{font:600 clamp(8px,1.2vw,12px)/1 'Outfit';letter-spacing:3px;color:#ffd38a;margin:4% 0 3%}
.karte-hw .k-titel{font-size:clamp(22px,4vw,36px)}
.karte-hw .k-drink{display:inline;font-size:.6em;color:#ff9a3c}
.karte-hw .k-qr{box-shadow:0 0 30px rgba(255,154,60,.35)}
body.hw .knopf{background:linear-gradient(135deg,#ffd38a,#ff9a3c 55%,#c9561a);box-shadow:0 8px 32px rgba(255,154,60,.3)}
body.hw .ueber{color:#ff9a3c}
body.hw{background:radial-gradient(1200px 600px at 10% -10%,rgba(122,29,12,.45),transparent 60%),radial-gradient(900px 500px at 100% 0,rgba(255,154,60,.08),transparent 60%),var(--bg)}
[hidden]{display:none!important}
.karte-hw .k-hwlogo{width:60%}
.karte-hw .k-hwdatum,.karte-hw .k-titel{max-width:62%}
.karte-hw .k-titel{font-size:clamp(20px,3.4vw,32px);line-height:1.15}
.karte-hw .k-drink{display:block;font-size:.62em;margin-top:2px}