/* ============================================================
   Gutscheine (/gutscheine/ und /gutscheine/pruefen/). Gilt NUR dort.
   Alle Farben, Abstaende, Radien und Schriften kommen aus site.css
   (Tokens --s1..--s8, --sonne, --sand, --schrift-display). Nichts hier
   erfindet eine zweite Marke. Entwurf 24.09.2026, Konzept:
   docs/KONZEPT_GUTSCHEINE.md
   ============================================================ */

/* Versteckte Teile bleiben versteckt, auch wenn sie unten ein display:grid bekommen
   (site.css hat keine allgemeine [hidden]-Regel, das Menue loest es genauso). */
.gs-fertig[hidden],.gs-druck[hidden],.gs-ergebnis[hidden],.gs-termin[hidden]{display:none}

/* ---------- Hinweis: Entwurf ---------- */
.gs-entwurf{
  display:grid; grid-template-columns:auto 1fr; gap:var(--s3); align-items:start;
  padding:var(--s4) var(--s5); margin-bottom:var(--s6);
  background:var(--sand-weich); border:1px solid var(--linie-weich); border-left:4px solid var(--sonne);
  border-radius:var(--r-flaeche); color:var(--neben); font-size:15px;
}
.gs-entwurf svg{width:18px;height:18px;color:var(--gold);margin-top:3px}
.gs-entwurf b{color:var(--tinte)}

/* ---------- Werkstatt: links gestalten, rechts die Vorschau ---------- */
.gs-raster{display:grid; gap:var(--s6)}
@media (min-width:960px){
  .gs-raster{grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:var(--s7); align-items:start}
}
/* Unter 960 px steht die Vorschau ueber dem Formular. Dann darf sie NICHT kleben:
   site.css macht .desktop-klebrig ab 860 px sticky, das haette sie zwischen 860
   und 959 px ueber das Formular geschoben. */
@media (max-width:959px){ .gs-vorschau{order:-1} .gs-vorschau.desktop-klebrig{position:static} }

.gs-schritte{display:grid; gap:var(--s7)}
.gs-schritt{display:grid; gap:var(--s4)}
.gs-schritt h2{font-size:clamp(22px,2.6vw,28px)}
.gs-hilfe{color:var(--neben); font-size:15px; max-width:62ch}

/* Betrag */
.gs-chips{display:flex; flex-wrap:wrap; gap:var(--s3)}
.gs-chip{
  min-height:48px; padding:0 18px; border:1.5px solid var(--tinte); border-radius:var(--r-element);
  background:var(--karte); color:var(--tinte); cursor:pointer;
  font-family:var(--schrift-display); font-weight:700; font-size:18px; font-variant-numeric:tabular-nums;
  transition:background var(--schnell) var(--kurve), border-color var(--schnell) var(--kurve);
}
.gs-chip[aria-pressed="true"], .gs-chip[data-gewaehlt="true"]{background:var(--sonne); border-color:var(--sonne); color:#171512}
.gs-chip-frei{display:inline-flex; align-items:center; gap:8px; padding:0 10px 0 16px; font-size:16px}
.gs-chip-frei input{
  width:96px; min-height:36px; padding:0 10px; border:1px solid var(--linie); border-radius:var(--r-element);
  background:var(--flaeche); color:var(--tinte); font-size:16px; font-variant-numeric:tabular-nums;
}
.gs-chip-frei input:focus{outline:none; border-color:var(--akzent); background:var(--karte)}
@media (hover:hover) and (pointer:fine){
  .gs-chip:not([aria-pressed="true"]):not([data-gewaehlt="true"]):hover{background:var(--sand-weich); border-color:var(--sand)}
}

/* Motive */
.gs-motive{display:grid; gap:var(--s3); grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:640px){ .gs-motive{grid-template-columns:repeat(3,minmax(0,1fr))} }
.gs-motiv{
  display:grid; gap:8px; min-width:0; padding:0; border:0; background:none; text-align:left;
  color:var(--tinte); cursor:pointer;
}
.gs-motiv figure{
  aspect-ratio:3/2; border-radius:var(--r-flaeche); overflow:hidden; background:var(--sand-hell);
  outline:3px solid transparent; outline-offset:-3px;
  transition:outline-color var(--schnell) var(--kurve);
}
.gs-motiv picture{display:block; height:100%}
.gs-motiv img{width:100%; height:100%; object-fit:cover}
.gs-motiv > span{font-size:14.5px; padding-inline:2px}
.gs-motiv[aria-pressed="true"] figure, .gs-motiv[data-gewaehlt="true"] figure{outline-color:var(--sonne)}
.gs-motiv[aria-pressed="true"] > span, .gs-motiv[data-gewaehlt="true"] > span{font-weight:600}
/* Wunschmotiv (KI) und eigenes Foto: gleiche Kachel, eigener Platzhalter */
.gs-platz{
  position:relative; aspect-ratio:3/2; border-radius:var(--r-flaeche); box-sizing:border-box;
  border:1.5px dashed var(--sand); background:var(--schraffur), var(--sand-weich);
  display:flex; flex-direction:column; gap:6px; align-items:center; justify-content:center; text-align:center;
  padding:var(--s3); font-size:13px; line-height:1.35; color:var(--gold-tief);
  outline:3px solid transparent; outline-offset:-3px; transition:outline-color var(--schnell) var(--kurve);
}
.gs-platz svg{width:22px; height:22px; color:var(--gold)}
.gs-platz i{
  position:absolute; top:8px; right:8px; font-style:normal; font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; padding:3px 7px; border-radius:2px; background:var(--tiefe); color:#f6f0e4;
}
.gs-motiv[aria-pressed="true"] .gs-platz, .gs-motiv[data-gewaehlt="true"] .gs-platz{outline-color:var(--sonne); border-style:solid}
.gs-motiv-upload{cursor:pointer}
.gs-motiv-upload figure{display:none}
.gs-motiv-upload.hat-bild figure{display:block}
.gs-motiv-upload.hat-bild .gs-platz{display:none}
.gs-motiv-upload:focus-within{outline:3px solid var(--akzent); outline-offset:2px; border-radius:6px}
@media (hover:hover) and (pointer:fine){ .gs-motiv:hover figure,.gs-motiv:hover .gs-platz{outline-color:var(--sand)} }

/* Ladeanzeige beim Zeichnen: ein Segelboot faehrt die Bahn entlang, hinter ihm
   fuellt sich die Welle orange. Prozent laufen mit, echte Dauer rund 25 s. */
.gs-lade{display:grid; gap:4px}
.gs-lade[hidden]{display:none}
.gs-lade-bahn{position:relative; height:44px}
.gs-lade-wellen,.gs-lade-fuell{
  position:absolute; left:0; bottom:8px; height:8px; width:100%;
  background:radial-gradient(circle at 50% 100%, transparent 3.2px, var(--sand) 3.4px, var(--sand) 4.6px, transparent 4.8px) 0 0/14px 8px repeat-x;
}
.gs-lade-fuell{
  width:0;
  background:radial-gradient(circle at 50% 100%, transparent 3.2px, var(--sonne) 3.4px, var(--sonne) 4.6px, transparent 4.8px) 0 0/14px 8px repeat-x;
  transition:width 600ms var(--kurve);
}
.gs-lade-boot{position:absolute; left:0; bottom:10px; width:40px; margin-left:-20px; transition:left 600ms var(--kurve)}
.gs-lade-boot svg{display:block; width:40px; height:34px; animation:gs-schaukeln 2.6s ease-in-out infinite; transform-origin:50% 90%}
@keyframes gs-schaukeln{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(3deg) translateY(-1px)}}
.gs-lade-text{display:flex; justify-content:space-between; gap:var(--s3); font-size:14.5px; color:var(--neben)}
.gs-lade-text b{font-family:var(--schrift-display); font-size:16px; color:var(--tinte); font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){
  .gs-lade-boot svg{animation:none}
  .gs-lade-boot,.gs-lade-fuell{transition:none}
}

/* Kleine schwebende Vorschau auf dem Handy: solange die grosse Karte oben aus
   dem Bild ist, zeigt sie live, was man gerade aendert. Vorder-/Rueckseite
   antippbar, wegklickbar. Links unten, weil rechts unten Ellie sitzt. */
.gs-mini{
  position:fixed; left:12px; bottom:calc(12px + env(safe-area-inset-bottom, 0px)); z-index:40;
  width:176px; background:var(--karte); border:1px solid var(--linie); border-radius:6px;
  box-shadow:0 18px 40px -18px rgba(27,27,27,.45); display:grid;
}
.gs-mini[hidden]{display:none}
@media (min-width:960px){ .gs-mini{display:none !important} }
.gs-mini{touch-action:none; cursor:grab; user-select:none; -webkit-user-select:none}
.gs-mini:active{cursor:grabbing}
.gs-mini-griff{height:12px; display:grid; place-items:center; border-radius:6px 6px 0 0; background:var(--karte)}
.gs-mini-griff::before{content:""; width:32px; height:4px; border-radius:2px; background:var(--sand)}
.gs-mini-bild{display:block; width:100%; padding:0; border:0; background:none; cursor:inherit; overflow:hidden}
.gs-mini .gs{border:0; border-radius:0; box-shadow:none}
.gs-mini .gs-gruss{border:0; border-radius:0; box-shadow:none; max-height:20cqw; overflow:hidden}
.gs-mini-zu{
  position:absolute; top:-10px; right:-10px; z-index:2; width:30px; height:30px; border-radius:50%;
  border:1px solid var(--linie); background:var(--karte); color:var(--tinte); display:grid; place-items:center;
  cursor:pointer; box-shadow:0 4px 10px -4px rgba(27,27,27,.4);
}
.gs-mini-zu svg{width:12px; height:12px}
@media (prefers-reduced-motion:no-preference){
  .gs-mini{animation:gs-mini-rein 260ms var(--kurve)}
  @keyframes gs-mini-rein{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
}

/* Zusatzfelder unter den Motiven */
.gs-panel{display:grid; gap:var(--s3); padding:var(--s4); border:1px solid var(--linie); border-radius:var(--r-flaeche); background:var(--karte)}
.gs-panel[hidden]{display:none}
.gs-panel .gs-ergebnis{margin-top:0}
.gs-panel-zeile{display:grid; gap:var(--s3); grid-template-columns:minmax(0,1fr) auto; align-items:end}
@media (max-width:560px){ .gs-panel-zeile{grid-template-columns:minmax(0,1fr)} }
.gs-panel .gs-hilfe{max-width:none}
.gs-panel ul{display:grid; gap:6px; padding-left:1.1em; list-style:disc; color:var(--neben); font-size:14.5px}

/* Felder: dieselben Eingabefelder wie die Suchleiste (.suche-feld) */
.gs-felder{display:grid; gap:var(--s3); grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:560px){ .gs-felder{grid-template-columns:minmax(0,1fr)} }
.gs-felder .voll{grid-column:1 / -1}
.suche-feld textarea{
  width:100%; min-height:104px; padding:12px; border:1px solid var(--linie); border-radius:var(--r-element);
  background:var(--flaeche); color:var(--text); resize:vertical; line-height:1.45; font-size:16px;
  transition:border-color var(--schnell) var(--kurve), background var(--schnell) var(--kurve);
}
.suche-feld textarea:focus{background:var(--karte); border-color:var(--akzent); outline:none}
.gs-zaehler{font-size:13px; color:var(--neben); text-align:right; font-variant-numeric:tabular-nums}
.gs-vorschlaege{display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center; font-size:14px; color:var(--neben)}
.gs-leise{
  min-height:36px; padding:0 12px; border:1px solid var(--linie); border-radius:var(--r-element);
  background:var(--karte); color:var(--gold-tief); font-size:14px; font-weight:600; cursor:pointer;
}
@media (hover:hover) and (pointer:fine){ .gs-leise:hover{border-color:var(--sand); background:var(--sand-weich)} }

/* Zustellung */
.gs-wahl{display:grid; gap:var(--s3)}
.gs-wahl label{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--s3); align-items:start;
  padding:var(--s4); border:1.5px solid var(--linie); border-radius:var(--r-flaeche);
  background:var(--karte); cursor:pointer; transition:border-color var(--schnell) var(--kurve);
}
.gs-wahl label:has(input:checked){border-color:var(--tinte)}
.gs-wahl input[type="radio"]{width:18px; height:18px; margin:4px 0 0; accent-color:var(--tinte)}
.gs-wahl b{display:block; font-family:var(--schrift-display); font-size:16px}
.gs-wahl span{color:var(--neben); font-size:14.5px}
.gs-termin{display:grid; gap:var(--s4); grid-template-columns:minmax(0,1fr); margin-top:var(--s2)}

/* Zusammenfassung und Abschluss */
.gs-abschluss{display:grid; gap:var(--s4)}
.gs-zeilen{display:grid}
.gs-zeilen > div{
  display:flex; justify-content:space-between; gap:var(--s3); padding-block:10px;
  border-bottom:1px solid var(--linie-weich); font-size:15.5px;
}
.gs-zeilen > div:last-child{border-bottom:0; font-family:var(--schrift-display); font-weight:700; font-size:20px; padding-top:var(--s3)}
.gs-zeilen .zahl{font-variant-numeric:tabular-nums; white-space:nowrap}
.gs-recht{display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:start; font-size:14px; color:var(--neben); cursor:pointer}
.gs-recht input{width:18px; height:18px; margin:3px 0 0; accent-color:var(--tinte)}
.knopf[disabled]{background:var(--sand-hell); color:var(--neben); cursor:not-allowed}
.knopf[disabled]:hover{background:var(--sand-hell)}

/* ---------- Die Gutscheinkarte (Vorschau und Druckansicht) ---------- */
.gs-vorschau{display:grid; gap:var(--s3)}
.gs-vorschau-kopf{display:flex; justify-content:space-between; align-items:baseline; gap:var(--s3)}
.gs-vorschau-kopf span{color:var(--neben); font-size:14px}
.gs-karte-halter{container-type:inline-size}
.gs{
  position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--karte);
  border:1px solid var(--linie); border-radius:6px;
  box-shadow:0 22px 44px -26px rgba(34,31,26,.5);
}
/* Fotoband 60 % der Hoehe (Fenster 2,5:1), Textband 40 %. Alle Masse in cqw
   (Kartenbreite), Zeilenhoehen fest - sonst laeuft der Text in Safari unten raus.
   Bildausschnitt je Motiv ueber --fokus (object-position), damit kein Bus ohne Dach. */
.gs .gs-foto{position:absolute; inset:0 0 40% 0; background:var(--sand-hell); overflow:hidden}
.gs .gs-foto img{width:100%; height:100%; object-fit:cover; object-position:var(--fokus,50% 50%)}
.gs .gs-logo{position:absolute; top:4%; left:4%; width:12%; aspect-ratio:1; border-radius:50%; box-shadow:0 4px 12px rgba(0,0,0,.25)}
.gs .gs-streifen{position:absolute; left:0; right:0; top:60%; height:6px; background:var(--schraffur), var(--papier); border-top:1px solid var(--sand-hell)}
.gs .gs-unten{
  position:absolute; left:0; right:0; bottom:0; height:40%; background:var(--papier); overflow:hidden;
  padding:2.8% 5% 3%; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4%;
}
.gs .gs-l{display:grid; align-content:space-between; min-width:0; min-height:0}
.gs .gs-label{font-size:2.2cqw; line-height:1.25; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.gs .gs-betrag{font-family:var(--schrift-display); font-weight:700; font-size:9.6cqw; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:var(--tinte)}
.gs .gs-fuer{font-size:3.1cqw; line-height:1.3; color:var(--tinte); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.gs .gs-fuer b{font-family:var(--schrift-display)}
.gs .gs-code{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:2.8cqw; line-height:1.3; letter-spacing:.1em; color:var(--tinte)}
.gs .gs-r{display:grid; justify-items:end; align-content:space-between; min-height:0}
.gs .gs-qr{width:14cqw; height:14cqw; image-rendering:pixelated; background:#fff}
.gs .gs-gueltig{font-size:2.1cqw; line-height:1.35; color:var(--neben); white-space:nowrap; text-align:right}
.gs .gs-foto-leer{position:absolute; inset:0; display:grid; place-items:center; padding:6%; text-align:center; font-size:2.6cqw; line-height:1.35; color:var(--gold-tief); background:var(--schraffur), var(--sand-weich)}
/* Gruss direkt unter der Karte, wie im PDF (eine Seite, keine Rueckseite) */
.gs-karte-halter .gs:has(+ .gs-gruss){border-radius:6px 6px 0 0; box-shadow:none}
.gs-gruss{
  border:1px solid var(--linie); border-top:0; border-radius:0 0 6px 6px; background:var(--papier);
  padding:4.2cqw 5cqw 4.6cqw; font-family:var(--schrift-display); font-weight:700; font-size:3.2cqw;
  line-height:1.35; letter-spacing:-.01em; color:var(--tinte); white-space:pre-line; overflow-wrap:anywhere;
  box-shadow:0 22px 44px -26px rgba(34,31,26,.5);
}
.gs-gruss.leer{color:var(--neben); font-weight:400}
.gs-karte-hinweis{margin:0; color:var(--neben); font-size:13.5px}

/* Druckansicht: ein A4-Blatt hoch, Karte mit Gruss oben (wie das PDF) */
.gs-druck{display:grid; gap:var(--s5); min-width:0}
.gs-druck > *{min-width:0}
.gs-blatt{
  aspect-ratio:210/297; max-width:420px; width:100%; min-width:0; padding:7% 7.7%; display:grid; gap:3%; align-content:start; overflow:hidden;
  background:var(--karte); border:1px solid var(--linie); box-shadow:0 20px 40px -28px rgba(34,31,26,.5);
}
.gs-blatt .gs,.gs-blatt .gs-gruss{box-shadow:none}
.gs-blatt-rand{font-size:12.5px; color:var(--neben); text-align:center}

/* ---------- Fertig ---------- */
.gs-fertig{display:grid; gap:var(--s4); min-width:0}
.gs-haken{display:inline-grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--gruen); color:#fff}
.gs-haken svg{width:20px; height:20px}
.gs-code-gross{
  display:flex; justify-content:space-between; align-items:center; gap:var(--s3); flex-wrap:wrap;
  padding:var(--s4); border:1.5px dashed var(--sand); border-radius:var(--r-flaeche); background:var(--papier);
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:clamp(20px,4vw,28px); letter-spacing:.12em;
}
.gs-code-gross small{font-family:var(--schrift-text); font-size:13.5px; color:var(--neben); letter-spacing:0}
.gs-fertig ul.gs-punkte{display:grid; gap:8px; padding-left:1.1em; list-style:disc; color:var(--neben); font-size:15.5px}
.gs-aktionen{display:flex; flex-wrap:wrap; gap:var(--s3)}

/* ---------- Das bekommt man dafuer ---------- */
.gs-beispiele li{grid-template-columns:minmax(0,1fr) auto; gap:var(--s3); align-items:center}
.gs-beispiele li > div:first-child{display:grid; gap:2px; min-width:0}
.gs-beispiele .zahl{font-family:var(--schrift-display); font-weight:700; font-size:18px; color:var(--tinte); text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
.gs-beispiele .zahl small{display:block; font-family:var(--schrift-text); font-weight:400; font-size:13.5px; color:var(--neben)}
@media (max-width:480px){
  .gs-beispiele li{grid-template-columns:minmax(0,1fr)}
  .gs-beispiele .zahl{text-align:left}
}
.gs-quelle{margin-top:var(--s4); font-size:13.5px; color:var(--neben); max-width:72ch}

/* ---------- So kommt er an, so wird er eingeloest ---------- */
.gs-ablauf{background:var(--sand-weich); border-block:1px solid var(--linie)}
.gs-dreispalt{display:grid; gap:var(--s6)}
@media (min-width:760px){ .gs-dreispalt{grid-template-columns:1fr 1fr} }
@media (min-width:1040px){ .gs-dreispalt{grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s6)} }
.gs-dreispalt h2{font-size:clamp(22px,2.4vw,27px)}
.gs-ablaufliste{display:grid; gap:var(--s3); counter-reset:gs; margin-top:var(--s4)}
.gs-ablaufliste li{display:grid; grid-template-columns:28px minmax(0,1fr); gap:var(--s3); align-items:start; font-size:16px}
.gs-ablaufliste li::before{
  counter-increment:gs; content:counter(gs);
  font-family:var(--schrift-display); font-weight:700; color:var(--gold); font-size:18px; line-height:1.4;
}
.gs-ablaufliste b{font-weight:600}

/* ---------- Gutschein pruefen ---------- */
.gs-pruefen{display:grid; gap:var(--s3); grid-template-columns:minmax(0,1fr) auto; align-items:end}
@media (max-width:560px){ .gs-pruefen{grid-template-columns:minmax(0,1fr)} .gs-pruefen .knopf{width:100%} }
.gs-pruefen input{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; letter-spacing:.08em; text-transform:uppercase}
.gs-ergebnis{
  margin-top:var(--s4); padding:var(--s4) var(--s5); display:grid; gap:4px;
  background:var(--karte); border:1px solid var(--linie); border-left:4px solid var(--sand); border-radius:var(--r-flaeche);
}
.gs-ergebnis.ok{border-left-color:var(--gruen)}
.gs-ergebnis.leer{border-left-color:var(--sonne)}
.gs-ergebnis b{font-family:var(--schrift-display); font-size:22px; font-variant-numeric:tabular-nums}
.gs-ergebnis span{color:var(--neben); font-size:14.5px}
.gs-code-beispiel{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; letter-spacing:.04em}
.gs-pfad{font-size:13.5px; color:var(--neben)}
.gs-pfad a{color:var(--neben); text-decoration:none; border-bottom:1px solid var(--linie)}
.gs-nach{margin-top:var(--s5)}

/* ---------- Bezahlen (Attrappe): eigenes Blatt wie das Menue ---------- */
.gs-nexi{display:grid; gap:10px; padding:var(--s4); border:1px solid var(--linie); border-radius:var(--r-flaeche); background:var(--karte)}
.gs-nexi-kopf{display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--neben)}
.gs-nexi-kopf b{font-family:var(--schrift-display); color:var(--tinte); font-size:15px}
.gs-nexi input{width:100%; min-height:44px; padding:0 12px; border:1px solid var(--linie); border-radius:var(--r-element); background:var(--sand-weich); color:var(--neben); font-size:15px}
.gs-nexi-zwei{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.gs-wallets{display:flex; gap:8px}
.gs-wallets span{flex:1; text-align:center; padding:8px; border:1px solid var(--linie); border-radius:var(--r-element); background:var(--sand-weich); color:var(--neben); font-size:14px}

@media (prefers-reduced-motion:reduce){
  .gs-chip,.gs-motiv figure,.gs-wahl label{transition:none}
}

/* Echter Kauf (P2): Kaeuferangaben, Nexi-Feld, Status. Vorschau bleibt unveraendert. */
.gs-kaeufer{display:grid; gap:var(--s3); grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.gs-kaeufer[hidden],.gs-nexi-echt[hidden],.gs-z-status[hidden]{display:none}
.gs-z-status{color:var(--tinte)}
.gs-echt .gs-nexi,.gs-echt #gs-z-simulieren,.gs-echt #gs-z-attrappe,.gs-echt .gs-qr{display:none}
/* Robert 09.11.2026: Vorschau = PDF. Statt Attrappen-QR ein neutrales Feld an derselben Stelle. */
.gs-echt .gs .gs-r::before{content:""; width:14cqw; height:14cqw; border:1px solid var(--linie); background:repeating-conic-gradient(var(--sand-hell) 0 25%, #fff 0 50%) 0 0/3.5cqw 3.5cqw}
/* Review 29.10.: im echten Kauf darf der Hinweis "nichts davon ist echt" nicht stehen */
.gs-echt .gs-entwurf{display:none}
/* Eigene Motive (KI, Foto) im echten Kauf nur mit Schalter camping.voucher.eigene_motive_aktiv;
   Beispielbilder und die Ablehnungs-Attrappe gibt es dort nicht. */
.gs-echt:not(.gs-eigene) .gs-motiv-ki,.gs-echt:not(.gs-eigene) .gs-motiv-upload,
.gs-echt:not(.gs-eigene) #gs-ki-panel,.gs-echt:not(.gs-eigene) #gs-upload-panel{display:none}
.gs-echt #gs-ki-beispiel,.gs-echt #gs-upload-beispiel{display:none}
.gs-link{background:none; border:0; padding:0; margin-left:.35em; font:inherit; font-weight:600; color:inherit; text-decoration:underline; cursor:pointer}
/* Fertig-Seite: echtes PDF statt Browser-Druckansicht mit QR-Attrappe */
.gs-echt #gs-druck-an,.gs-echt #gs-druck,.gs-echt #gs-fertig > .gs-hilfe{display:none}

/* Vorschau umschaltbar PDF | Wallet-Karte (Robert 18.10.2026). Die Handy-Karte
   bildet Apples Poster-Karte nach, ausgemessen an Roberts iPhone: Foto oben
   (Apple vergroessert es, schneidet seitlich ab), Nachricht im Bild zwischen
   Kopf und QR-Code, QR klein unten rechts im Bild (Apples eigener ist fest
   und zu gross, Robert 18.10.), darunter Apples Flaeche in den Farben des Fotos.
   Masse in cqw = Kartenbreite. */
.gs-vorschau[hidden]{display:none}
.gs-ansicht{display:inline-grid; grid-auto-flow:column; border:1px solid var(--linie); border-radius:var(--r-element); overflow:hidden; background:var(--karte)}
.gs-ansicht button{
  display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 14px; border:0; background:none;
  color:var(--neben); font:inherit; font-size:14px; font-weight:600; cursor:pointer; border-bottom:2px solid transparent;
}
.gs-ansicht button + button{border-left:1px solid var(--linie)}
.gs-ansicht button svg{width:15px; height:15px}
.gs-ansicht button[aria-pressed="true"]{color:var(--tinte); border-bottom-color:var(--sonne)}
.gs-wallet-fuss{color:var(--neben); font-size:13.5px; margin:0; max-width:46ch}
.gw-halter{container-type:inline-size; max-width:340px; width:100%; margin-inline:auto}
.gw{position:relative; aspect-ratio:846/1150; overflow:hidden; border-radius:3.6cqw; background:#1c1c1c; color:#fff;
  box-shadow:0 22px 44px -22px rgba(20,20,20,.55)}
.gw .gw-mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
.gw .gw-bild{position:absolute; left:0; right:0; top:0; height:102.5cqw; overflow:hidden; background:#2b3833}
.gw .gw-bild > img{position:absolute; left:-4.15cqw; top:0; width:108.3cqw; height:78.66cqw; object-fit:cover; max-width:none}
.gw .gw-text{position:absolute; left:5.5cqw; right:5.5cqw; top:18.9cqw; isolation:isolate; font-family:var(--schrift-display); font-weight:700; line-height:1.28}
.gw .gw-text::before{content:""; position:absolute; inset:-5cqw -8cqw; z-index:-1; background:rgba(0,0,0,.42); filter:blur(4cqw)}
.gw .gw-wer{font-weight:600; text-transform:uppercase; color:#ffecc8; font-size:.62em; letter-spacing:.02em; margin-bottom:.35em}
.gw .s1{font-size:6.6cqw} .gw .s2{font-size:5.4cqw} .gw .s3{font-size:4.6cqw} .gw .s4{font-size:4cqw}
.gw .gw-kopf{position:absolute; top:3.2cqw; right:3.7cqw; text-align:right; font-size:3.6cqw; line-height:1.25; font-weight:700; text-transform:uppercase; color:rgba(255,255,255,.88)}
.gw .gw-kopf .gw-mono{font-weight:500; text-transform:none}
/* Karte H: Masse aus wallet_posterbild.py, 1 Bildpunkt (716 breit) = 0,1513cqw, Bild ab -4,15cqw;
   Foto bis 520 px (78,66cqw), darunter einheitliche dunkle Flaeche wie Apples Kasten */
.gw .gw-stempel{position:absolute; left:5.53cqw; top:3.03cqw; display:flex; align-items:center; gap:2.1cqw; font-family:var(--schrift-display)}
.gw .gw-stempel img{width:13cqw; height:13cqw; padding:1.05cqw; border-radius:50%; background:#fff; object-fit:contain}
.gw .gw-titel{font-weight:700; font-size:4.54cqw; line-height:1.2; text-shadow:0 0 .8cqw rgba(0,0,0,.75)}
.gw .gw-untertitel{font-weight:500; font-size:3.18cqw; color:#ffecc8; margin-top:.5cqw; text-shadow:0 0 .8cqw rgba(0,0,0,.75)}
.gw .gw-fussband{position:absolute; left:0; right:0; top:78.66cqw; bottom:0; background:#1b2823}
.gw .gw-nummer{position:absolute; right:23.1cqw; top:5.14cqw; text-align:right; font-family:var(--schrift-display); font-weight:600; white-space:nowrap}
.gw .gw-nummer div:first-child{font-size:2.72cqw; color:#f0e6d2; text-transform:uppercase}
.gw .gw-nummer div:last-child{font-size:4.24cqw; margin-top:1.2cqw}
.gw .gw-flaeche{position:absolute; left:0; right:0; top:102.5cqw; bottom:0; overflow:hidden; background:#1c2723}
.gw .gw-noch{position:absolute; left:3.8cqw; top:10.4cqw; font-size:3.4cqw; line-height:1.3}
.gw .gw-gross{font-size:4.6cqw}
.gw .gw-fuss{position:absolute; left:3.8cqw; bottom:4.6cqw; font-size:3.4cqw}
.gw .gw-qr-feld{position:absolute; right:5.53cqw; top:3.03cqw; width:15.13cqw; padding:1.21cqw; box-sizing:border-box; background:#fff; border-radius:1.21cqw}
.gw .gw-qr{display:block; width:100%; aspect-ratio:1; height:auto; image-rendering:pixelated}

/* Bezahlen als eigener Schritt statt Pop-up (Robert 09.11.2026, Muster der Buchung) */
.gs-bezahlen[hidden],.gs-schritte[hidden]{display:none}
.gs-bezahlen{display:grid; gap:var(--s4); min-width:0; scroll-margin-top:84px}
@media (min-width:960px){ .gs-bezahlen{scroll-margin-top:164px} }
.gs-z-auge{margin:0; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--neben)}
.gs-bezahlen h2{margin:0}
.gs-bezahlen h2:focus{outline:none}
.gs-z-summe{display:grid; grid-template-columns:104px minmax(0,1fr) auto; gap:var(--s3); align-items:center;
  padding:var(--s3); border:1px solid var(--linie); border-radius:var(--r-flaeche); background:var(--karte)}
.gs-z-mini{width:104px; pointer-events:none}
.gs-z-text{display:grid; gap:2px; min-width:0}
.gs-z-text small{color:var(--neben); font-size:13px; overflow-wrap:anywhere}
.gs-z-aendern{justify-self:start; margin-top:2px; padding:0; border:0; background:none; font:inherit; font-size:14px; cursor:pointer}
.gs-z-betrag{display:grid; text-align:right}
.gs-z-betrag small{color:var(--neben); font-size:12px}
.gs-z-betrag b{font-size:20px}
@media (max-width:520px){
  .gs-z-summe{grid-template-columns:76px minmax(0,1fr)}
  .gs-z-mini{width:76px}
  .gs-z-betrag{grid-column:1 / -1; display:flex; justify-content:space-between; align-items:baseline; text-align:left;
    padding-top:var(--s2); border-top:1px solid var(--linie)}
}
.gs-nexi-echt{min-height:300px; max-width:100%; overflow:hidden}
.gs-nexi-echt iframe{max-width:100%}
.gs-z-fuss{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:var(--s3)}
.gs-z-sicher{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--neben)}
.gs-z-sicher svg{width:14px; height:14px; flex:none}
@media (max-width:959px){ .gs-raster.gs-zahlen .gs-vorschau{display:none} }

/* Preisaktion (Black Friday), nur sichtbar, wenn Odoo eine laufende Aktion meldet */
.gs-aktion{margin:0 0 14px; padding:12px 14px; border-radius:var(--r-element); background:var(--sand-weich); border-left:4px solid var(--sonne); font-size:15px; line-height:1.45; max-width:62ch}
.gs-chip-preis{display:block; font-size:12px; font-weight:600; color:var(--neben); line-height:1.2; margin-top:2px}
.gs-z-aktion{display:block; color:var(--neben)}
.gs-chip[aria-pressed="true"] .gs-chip-preis{color:inherit}

/* Wann ankommen: Sofort oder Wunschtermin (Frank/Robert 09.11.2026) */
.gs-wann-wahl{border:0; margin:0; padding:0; min-width:0; display:grid; gap:8px}
.gs-wann-wahl legend{padding:0; margin-bottom:8px; font-size:13px; font-weight:600; color:var(--neben)}
.gs-wahl-paar{grid-template-columns:repeat(2,minmax(0,1fr))}
.gs-wahl-paar label{padding:var(--s3) var(--s4)}
.gs-wann{display:grid; gap:var(--s3); grid-template-columns:repeat(2,minmax(0,1fr))}
.gs-wann[hidden]{display:none}
@media (max-width:420px){ .gs-wahl-paar,.gs-wann{grid-template-columns:minmax(0,1fr)} }

/* Ausgeblendete Zeilen bleiben aus, auch wenn eine Layoutregel display setzt
   (leere Zeile „Nachlass“ ohne Aktion, Browser-Check 09.11.2026). */
[hidden]{display:none !important}

/* Widerruf Gutscheinkauf (86-gutschein-recht.js, Robert 10.11.2026) */
.wr-kasten{margin-bottom:var(--s6)}
.wr-form{display:grid; gap:var(--s3); margin-top:var(--s3)}
.wr-form textarea{width:100%; font:inherit; padding:10px 12px; border:1px solid var(--linie-weich); border-radius:10px; background:#fff}
.wr-knoepfe{display:flex; flex-wrap:wrap; gap:12px}
.wr-status{margin:var(--s3) 0 0; min-height:1.2em}
.wr-status.wr-fehler{color:#b42318; font-weight:600}
.wr-fertig{margin-top:var(--s3); padding:var(--s4); border-radius:12px; background:#fff; border:2px solid var(--sonne, #e8a33d)}
.wr-fertig:focus{outline:none}
.wr-muster ul{list-style:none; padding-left:0}
.wr-muster li{padding:10px 0; border-bottom:1px dashed var(--linie-weich)}
.gs-recht a{color:inherit; text-decoration:underline; text-underline-offset:3px}
@media print{
  .kopf,.fuss,.wr-kasten,#wr-drucken,.gs-pfad{display:none !important}
}