/* =========================================================================
   Gutschein-Shop
   =========================================================================
   Erbt sämtliche Farben, Schriften und Abstände aus style.css. Hier stehen
   nur die Bausteine, die es dort noch nicht gibt.

   Wie bei baukasten.css werden Textfarben an einigen Stellen ausdrücklich
   gesetzt. Grund ist derselbe: Überschriften erben sonst --tx-dark und
   werden auf dunklem Grund unlesbar.
   ========================================================================= */

/* ---------- Hero ---------- */
.gs-hero{
  background:linear-gradient(180deg,var(--ink-950) 0%,var(--ink-850) 100%);
  color:var(--tx-light);
  padding:clamp(3rem,2rem + 6vw,6.5rem) 0 clamp(2.5rem,1.6rem + 4vw,4.5rem);
}
.gs-kicker{
  display:flex;align-items:center;gap:.7rem;margin:0 0 1.1rem;
  font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-300);
}
.gs-kicker span{display:block;width:2.2rem;height:2px;background:var(--brand-500);border-radius:2px}
.gs-h1{
  margin:0 0 1.1rem;font-family:Manrope,system-ui,sans-serif;font-weight:800;
  font-size:clamp(2.1rem,1.2rem + 4.2vw,4rem);line-height:1.04;letter-spacing:-.02em;
  color:var(--tx-light);
}
.gs-lead{margin:0;max-width:52ch;font-size:var(--fs-lead);color:var(--tx-light-mute);line-height:1.66}

/* ---------- Layout ---------- */
.gs-shop{padding:clamp(2rem,1.4rem + 3vw,3.5rem) 0 clamp(3rem,2rem + 4vw,5rem);background:var(--paper-soft)}
.gs-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(1.5rem,1rem + 2vw,3rem);align-items:start}
@media (max-width:960px){ .gs-grid{grid-template-columns:1fr} }

/* ---------- Formularblöcke ---------- */
.gs-form{display:flex;flex-direction:column;gap:1.1rem;margin:0}
.gs-block{
  margin:0;padding:clamp(1.2rem,1rem + 1vw,1.8rem);border:1px solid var(--line);
  border-radius:var(--r-lg);background:var(--paper);box-shadow:var(--sh-sm);
}
.gs-legend{
  display:flex;align-items:center;gap:.7rem;padding:0;margin:0 0 1.1rem;
  font-family:Manrope,system-ui,sans-serif;font-weight:700;font-size:1.08rem;
  color:var(--tx-dark);
}
.gs-num{
  display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:999px;
  background:var(--brand-500);color:#06240A;font-size:.85rem;font-weight:800;flex:none;
}

/* ---------- Beträge ---------- */
.gs-betraege{display:grid;grid-template-columns:repeat(auto-fit,minmax(6.2rem,1fr));gap:.6rem}
.gs-betrag{
  padding:1rem .6rem;border:2px solid var(--line);border-radius:var(--r-md);
  background:var(--paper);color:var(--tx-dark);cursor:pointer;
  font-family:Manrope,system-ui,sans-serif;font-weight:800;font-size:1.15rem;
  transition:border-color .16s,background .16s,transform .16s;
}
.gs-betrag:hover{border-color:var(--brand-400);transform:translateY(-1px)}
.gs-betrag.is-aktiv{border-color:var(--brand-500);background:#EEF9EA;color:var(--brand-ink)}
.gs-betrag--frei{font-size:.92rem;font-weight:700}
.gs-betrag:focus-visible{outline:2px solid var(--brand-600);outline-offset:2px}

.gs-wunsch{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line)}
.gs-wunsch label{display:block;margin-bottom:.4rem;font-size:.86rem;color:var(--tx-mute)}
.gs-wunsch__zeile{display:flex;align-items:center;gap:.6rem}
.gs-wunsch__zeile input{
  width:9rem;padding:.75rem .9rem;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  font-family:Manrope,system-ui,sans-serif;font-size:1.3rem;font-weight:800;color:var(--tx-dark);
  background:var(--paper);
}
.gs-wunsch__zeile span{font-family:Manrope,system-ui,sans-serif;font-size:1.3rem;font-weight:800;color:var(--tx-mute)}

/* ---------- Anlässe ---------- */
.gs-anlaesse{display:flex;flex-wrap:wrap;gap:.5rem}
.gs-anlass{
  padding:.62rem 1.05rem;border:1px solid var(--line);border-radius:999px;
  background:var(--paper);color:var(--tx-body);font-size:.92rem;font-weight:600;cursor:pointer;
  transition:border-color .16s,background .16s,color .16s;
}
.gs-anlass:hover{border-color:var(--brand-400)}
.gs-anlass.is-aktiv{background:var(--ink-900);border-color:var(--ink-900);color:var(--tx-light)}
.gs-anlass:focus-visible{outline:2px solid var(--brand-600);outline-offset:2px}

/* ---------- Felder ---------- */
.gs-felder{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media (max-width:560px){ .gs-felder{grid-template-columns:1fr} }
.gs-feld{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.9rem}
.gs-feld:last-child{margin-bottom:0}
.gs-feld label{font-size:.86rem;font-weight:600;color:var(--tx-body)}
.gs-opt{font-weight:400;color:var(--tx-mute)}
.gs-feld input,.gs-feld textarea{
  padding:.78rem .95rem;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  font-family:inherit;font-size:1rem;color:var(--tx-dark);background:var(--paper);
  width:100%;box-sizing:border-box;
}
.gs-feld textarea{resize:vertical;min-height:5.4rem;line-height:1.55}
.gs-feld input:focus,.gs-feld textarea:focus,.gs-wunsch__zeile input:focus{
  outline:2px solid var(--brand-600);outline-offset:1px;border-color:var(--brand-500);
}
.gs-feld input[aria-invalid="true"],.gs-feld textarea[aria-invalid="true"]{border-color:var(--err)}
.gs-hinweis{margin:.4rem 0 0;font-size:.82rem;color:var(--tx-mute);line-height:1.5}

/* ---------- Zustellung ---------- */
.gs-versand{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
@media (max-width:560px){ .gs-versand{grid-template-columns:1fr} }
.gs-wahl{
  display:flex;flex-direction:column;gap:.25rem;padding:.95rem 1.05rem;text-align:left;
  border:2px solid var(--line);border-radius:var(--r-md);background:var(--paper);cursor:pointer;
  transition:border-color .16s,background .16s;
}
.gs-wahl b{font-size:.98rem;color:var(--tx-dark)}
.gs-wahl span{font-size:.82rem;color:var(--tx-mute);line-height:1.45}
.gs-wahl:hover{border-color:var(--brand-400)}
.gs-wahl.is-aktiv{border-color:var(--brand-500);background:#EEF9EA}
.gs-wahl:focus-visible{outline:2px solid var(--brand-600);outline-offset:2px}
.gs-termin{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line)}

/* ---------- Honeypot ----------
   Nicht display:none – manche Bots erkennen das. Stattdessen aus dem
   sichtbaren Bereich geschoben und für Screenreader ausgeblendet. */
.gs-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Einwilligung ---------- */
.gs-check{display:flex;gap:.7rem;align-items:flex-start;margin-top:1.1rem;
  font-size:.9rem;line-height:1.55;color:var(--tx-body);cursor:pointer}
.gs-check input{margin-top:.22rem;width:1.05rem;height:1.05rem;accent-color:var(--brand-600);flex:none}
.gs-check a{color:var(--brand-ink);text-underline-offset:2px}

/* ---------- Abschluss ---------- */
.gs-abschluss{
  padding:clamp(1.2rem,1rem + 1vw,1.7rem);border-radius:var(--r-lg);
  background:var(--ink-900);color:var(--tx-light);box-shadow:var(--sh-md);
}
.gs-summe{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding-bottom:1rem;margin-bottom:1rem;border-bottom:1px solid rgba(255,255,255,.14)}
.gs-summe span{font-size:.92rem;color:var(--tx-light-mute)}
.gs-summe b{font-family:Manrope,system-ui,sans-serif;font-size:1.85rem;font-weight:800;
  color:var(--brand-300);letter-spacing:-.01em}
.gs-kauf{
  display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;
  padding:1.05rem 1.4rem;border:0;border-radius:999px;background:var(--brand-500);
  color:#06240A;font-family:Manrope,system-ui,sans-serif;font-weight:800;font-size:1.05rem;
  cursor:pointer;transition:background .16s,transform .16s;
}
.gs-kauf:hover:not(:disabled){background:var(--brand-400);transform:translateY(-1px)}
.gs-kauf:disabled{background:var(--ink-600);color:var(--tx-light-faint);cursor:not-allowed}
.gs-kauf:focus-visible{outline:2px solid var(--brand-300);outline-offset:3px}
.gs-kauf svg{fill:none;stroke:currentColor;stroke-width:2}
.gs-sicher{margin:.85rem 0 0;font-size:.82rem;color:var(--tx-light-faint);text-align:center;line-height:1.5}
/* Pflichtangaben unmittelbar am Gesamtbetrag: Steuer, keine Zusatzkosten,
   Art der Lieferung. Bewusst direkt ueber der Kaufschaltflaeche, damit sie
   im Blickfeld steht und nicht erst nach dem Scrollen. */
.gs-summe__hinweis{margin:.5rem 0 1rem;font-size:.85rem;line-height:1.5;color:var(--tx-light-mute)}

.gs-fehler{margin:.9rem 0 0;padding:.8rem 1rem;border-radius:var(--r-sm);
  background:rgba(210,72,63,.16);color:#FFC4BE;font-size:.9rem;line-height:1.5}
.gs-gesperrt{margin:.9rem 0 0;padding:.85rem 1.05rem;border-radius:var(--r-sm);
  background:rgba(214,138,34,.16);color:#FFD79B;font-size:.9rem;line-height:1.55}

/* Rueckkehr nach einer abgebrochenen Zahlung. Bewusst ruhig gehalten und
   nicht in Fehlerrot: Es ist nichts schiefgegangen, der Kunde hat sich nur
   anders entschieden. */
.gs-abbruch{margin:0 0 .3rem;padding:.85rem 1.05rem;border-radius:var(--r-sm);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  color:var(--tx-light-mute);font-size:.9rem;line-height:1.55}
.gs-abbruch b{color:var(--tx-light)}

/* ---------- Vorschau ---------- */
.gs-vorschau{position:sticky;top:calc(var(--nav-h,72px) + 1rem);display:flex;flex-direction:column;gap:1rem}
@media (max-width:960px){ .gs-vorschau{position:static;order:-1} }
.gs-vorschau__box{
  padding:clamp(1rem,.8rem + .8vw,1.4rem);border:1px solid var(--line);
  border-radius:var(--r-lg);background:var(--paper);box-shadow:var(--sh-sm);
}
.gs-vorschau__titel{margin:0 0 .85rem;font-size:.8rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tx-mute)}
.gs-vorschau__bild{position:relative;border-radius:var(--r-md);overflow:hidden;
  background:var(--paper-mute);box-shadow:var(--sh-md);aspect-ratio:2480/3508}
.gs-vorschau__bild img{display:block;width:100%;height:100%;object-fit:contain;
  transition:opacity .2s}
.gs-vorschau__bild.is-laedt img{opacity:.45}
.gs-vorschau__laedt{position:absolute;inset:0;display:grid;place-items:center}
.gs-vorschau__laedt span{width:2rem;height:2rem;border-radius:999px;
  border:3px solid var(--line-strong);border-top-color:var(--brand-500);
  animation:gsDreh .8s linear infinite}
@keyframes gsDreh{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .gs-vorschau__laedt span{animation:none} }
.gs-vorschau__fein{margin:.85rem 0 0;font-size:.82rem;color:var(--tx-mute);line-height:1.5}

.gs-punkte{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.55rem}
.gs-punkte li{position:relative;padding-left:1.7rem;font-size:.92rem;color:var(--tx-body)}
.gs-punkte li::before{
  content:"";position:absolute;left:0;top:.42rem;width:.95rem;height:.55rem;
  border-left:2.5px solid var(--brand-500);border-bottom:2.5px solid var(--brand-500);
  transform:rotate(-45deg);
}

/* ---------- FAQ ---------- */
.gs-faq{padding:clamp(2.5rem,1.8rem + 3vw,4.5rem) 0;background:var(--paper)}
.gs-faq h2{margin:0 0 clamp(1.4rem,1rem + 1.5vw,2.2rem);font-family:Manrope,system-ui,sans-serif;
  font-weight:800;font-size:var(--fs-h2);color:var(--tx-dark);letter-spacing:-.015em}
.gs-faq__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1.5rem 2rem}
.gs-faq__grid h3{margin:0 0 .45rem;font-size:1.02rem;font-weight:700;color:var(--tx-dark)}
.gs-faq__grid p{margin:0;font-size:.94rem;color:var(--tx-body);line-height:1.62}

/* ---------- Erfolgsseite ---------- */
.gs-fertig{padding:clamp(3rem,2rem + 5vw,6rem) 0;background:var(--paper-soft);min-height:60vh}
.gs-fertig__box{max-width:46rem;margin:0 auto;padding:clamp(1.6rem,1.2rem + 2vw,2.8rem);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--sh-md);text-align:center}
.gs-fertig__icon{width:4.2rem;height:4.2rem;margin:0 auto 1.4rem;border-radius:999px;
  display:grid;place-items:center;background:#EEF9EA}
.gs-fertig__icon svg{fill:none;stroke:var(--brand-600);stroke-width:2.4}
.gs-fertig h1{margin:0 0 .7rem;font-family:Manrope,system-ui,sans-serif;font-weight:800;
  font-size:clamp(1.7rem,1.2rem + 2vw,2.5rem);color:var(--tx-dark);letter-spacing:-.02em}
.gs-fertig p{margin:0 auto 1.2rem;max-width:44ch;color:var(--tx-body);line-height:1.66}
.gs-fertig__code{display:inline-block;margin:.5rem 0 1.4rem;padding:.8rem 1.5rem;
  border-radius:var(--r-md);background:var(--paper-soft);border:1px solid var(--line);
  font-family:Manrope,system-ui,sans-serif;font-weight:800;font-size:1.35rem;
  letter-spacing:.06em;color:var(--tx-dark)}
.gs-fertig__aktionen{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:1.4rem}
.gs-warten{display:flex;align-items:center;gap:.8rem;justify-content:center;color:var(--tx-mute)}
.gs-warten span{width:1.5rem;height:1.5rem;border-radius:999px;border:3px solid var(--line-strong);
  border-top-color:var(--brand-500);animation:gsDreh .8s linear infinite}

/* =========================================================================
   Erweiterung: Produktseite
   =========================================================================
   Hero mit Beispielgutschein, Anlassgalerie, Ablauf in drei Schritten.
   Alles mobile first – die Galerie scrollt auf schmalen Bildschirmen
   horizontal, statt die Karten unlesbar klein zu quetschen.
   ========================================================================= */

/* ---------- Hero mit Bild ---------- */
.gs-hero__grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,1rem + 4vw,4.5rem);align-items:center;
}
@media (max-width:900px){
  .gs-hero__grid{grid-template-columns:1fr;gap:2.4rem}
  .gs-hero__bild{max-width:20rem;margin:0 auto}
}
.gs-hero__punkte{margin:1.6rem 0 2rem;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:.6rem}
.gs-hero__punkte li{position:relative;padding-left:1.8rem;
  color:var(--tx-light-mute);font-size:1rem}
.gs-hero__punkte li::before{
  content:"";position:absolute;left:0;top:.45rem;width:1rem;height:.58rem;
  border-left:2.5px solid var(--brand-400);border-bottom:2.5px solid var(--brand-400);
  transform:rotate(-45deg);
}
.gs-hero__cta{
  display:inline-flex;align-items:center;gap:.6rem;padding:1rem 1.7rem;
  border-radius:999px;background:var(--brand-500);color:#06240A;text-decoration:none;
  font-family:Manrope,system-ui,sans-serif;font-weight:800;font-size:1.02rem;
  transition:background .16s,transform .16s;
}
.gs-hero__cta:hover{background:var(--brand-400);transform:translateY(-1px)}
.gs-hero__cta:focus-visible{outline:2px solid var(--brand-300);outline-offset:3px}
.gs-hero__cta svg{fill:none;stroke:currentColor;stroke-width:2}
.gs-hero__bild img{
  display:block;width:100%;height:auto;border-radius:var(--r-lg);
  box-shadow:0 42px 90px -34px rgba(0,0,0,.7);
  transform:rotate(-1.6deg);
}

/* ---------- Überschriften ---------- */
.gs-h2{
  margin:0 0 .7rem;font-family:Manrope,system-ui,sans-serif;font-weight:800;
  font-size:var(--fs-h2);line-height:1.1;letter-spacing:-.018em;color:var(--tx-dark);
}
.gs-h2--mitte{text-align:center}
.gs-sub{margin:0 0 clamp(1.6rem,1.1rem + 2vw,2.6rem);max-width:56ch;
  color:var(--tx-body);font-size:var(--fs-lead);line-height:1.62}

/* ---------- Anlassgalerie ---------- */
.gs-anlaesse-sek{padding:clamp(2.6rem,1.8rem + 3.5vw,5rem) 0;background:var(--paper)}
.gs-galerie{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1rem;
}
@media (max-width:1100px){ .gs-galerie{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:760px){
  /* Auf dem Handy horizontal scrollen statt schrumpfen. */
  .gs-galerie{
    display:flex;gap:.85rem;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:.8rem;margin-inline:calc(var(--wrap-pad,1.2rem) * -1);
    padding-inline:var(--wrap-pad,1.2rem);
    scrollbar-width:thin;
  }
  .gs-karte{flex:0 0 min(46vw,11rem);scroll-snap-align:start}
}
.gs-karte{
  display:flex;flex-direction:column;gap:.65rem;padding:0;border:0;background:none;
  cursor:pointer;text-align:center;
}
.gs-karte__bild{
  display:block;border-radius:var(--r-md);overflow:hidden;background:var(--paper-mute);
  box-shadow:var(--sh-md);transition:transform .2s,box-shadow .2s,outline-color .2s;
  outline:3px solid transparent;outline-offset:3px;aspect-ratio:2480/3508;
}
.gs-karte__bild img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.gs-karte:hover .gs-karte__bild{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.gs-karte.is-aktiv .gs-karte__bild{outline-color:var(--brand-500)}
.gs-karte:focus-visible .gs-karte__bild{outline-color:var(--brand-600)}
.gs-karte__titel{font-size:.92rem;font-weight:700;color:var(--tx-dark)}

/* ---------- Ablauf ---------- */
.gs-ablauf{padding:clamp(2.4rem,1.6rem + 3vw,4.5rem) 0;background:var(--ink-900);color:var(--tx-light)}
.gs-ablauf .gs-h2{color:var(--tx-light);text-align:center;
  margin-bottom:clamp(1.6rem,1.1rem + 2vw,2.6rem)}
.gs-schritte{margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.6rem}
.gs-schritte li{position:relative;padding-left:3.4rem}
.gs-schritte__nr{
  position:absolute;left:0;top:-.1rem;display:grid;place-items:center;
  width:2.5rem;height:2.5rem;border-radius:999px;
  background:rgba(95,187,70,.16);color:var(--brand-300);
  font-family:Manrope,system-ui,sans-serif;font-weight:800;font-size:1.05rem;
}
.gs-schritte h3{margin:.25rem 0 .45rem;font-size:1.1rem;font-weight:700;color:var(--tx-light)}
.gs-schritte p{margin:0;color:var(--tx-light-mute);font-size:.96rem;line-height:1.62}

/* ---------- Ergänzungen Formular ---------- */
.gs-shop .wrap > .gs-h2{margin-bottom:clamp(1.5rem,1rem + 2vw,2.4rem)}
.gs-hinweis--tipp{
  margin-top:1rem;padding:.7rem .95rem;border-radius:var(--r-sm);
  background:var(--paper-soft);color:var(--tx-body);font-size:.86rem;
}
.gs-betraege{grid-template-columns:repeat(auto-fit,minmax(5.6rem,1fr))}

/* ---------- Bald verfügbar ---------- */
.gs-bald{
  margin:1rem 0 0;padding:1rem 1.15rem;border-radius:var(--r-md);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  color:var(--tx-light-mute);font-size:.92rem;line-height:1.6;
}
.gs-bald b{display:block;margin-bottom:.3rem;color:var(--tx-light);font-size:1rem}
.gs-bald__zeile{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.9rem}
.gs-bald__zeile a{
  display:inline-flex;align-items:center;gap:.45rem;padding:.6rem 1.1rem;
  border-radius:999px;background:rgba(255,255,255,.1);color:var(--tx-light);
  text-decoration:none;font-size:.9rem;font-weight:600;
  border:1px solid rgba(255,255,255,.18);transition:background .16s;
}
.gs-bald__zeile a:hover{background:rgba(255,255,255,.18)}
.gs-bald__zeile a:focus-visible{outline:2px solid var(--brand-300);outline-offset:2px}

/* ---------- Startseiten-Teaser ---------- */
.gs-teaser{padding:clamp(2.4rem,1.6rem + 3vw,4.2rem) 0;background:var(--paper-soft)}
.gs-teaser__box{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,15rem);
  gap:clamp(1.4rem,1rem + 2vw,3rem);align-items:center;
  padding:clamp(1.5rem,1.1rem + 2vw,2.8rem);border-radius:var(--r-xl);
  background:var(--ink-900);color:var(--tx-light);box-shadow:var(--sh-md);
}
@media (max-width:760px){
  .gs-teaser__box{grid-template-columns:1fr;text-align:center}
  .gs-teaser__bild{order:-1;max-width:11rem;margin:0 auto}
}
.gs-teaser h2{margin:0 0 .6rem;font-family:Manrope,system-ui,sans-serif;font-weight:800;
  font-size:clamp(1.5rem,1.1rem + 1.6vw,2.1rem);color:var(--tx-light);letter-spacing:-.015em}
.gs-teaser p{margin:0 0 1.3rem;color:var(--tx-light-mute);line-height:1.62;max-width:46ch}
@media (max-width:760px){ .gs-teaser p{margin-inline:auto} }
.gs-teaser__cta{
  display:inline-flex;align-items:center;gap:.55rem;padding:.9rem 1.5rem;border-radius:999px;
  background:var(--brand-500);color:#06240A;text-decoration:none;
  font-family:Manrope,system-ui,sans-serif;font-weight:800;transition:background .16s,transform .16s;
}
.gs-teaser__cta:hover{background:var(--brand-400);transform:translateY(-1px)}
.gs-teaser__cta:focus-visible{outline:2px solid var(--brand-300);outline-offset:3px}
.gs-teaser__cta svg{fill:none;stroke:currentColor;stroke-width:2}
.gs-teaser__bild img{display:block;width:100%;height:auto;border-radius:var(--r-md);
  box-shadow:0 28px 60px -26px rgba(0,0,0,.75);transform:rotate(2deg)}

/* ---------------------------------------------------------------------
   Gutschein prüfen
   --------------------------------------------------------------------- */
.gs-pruef{margin:28px 0 8px}
.gs-pruef__label{display:block;font-size:14px;font-weight:600;color:var(--tx-2,#5A6D74);margin-bottom:8px}
.gs-pruef__zeile{display:flex;gap:12px;flex-wrap:wrap}
.gs-pruef__feld{flex:1 1 260px;min-width:0;padding:14px 16px;font:600 18px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.06em;border:2px solid #DCE5E3;border-radius:12px;background:#fff;color:#0C1417}
.gs-pruef__feld:focus{outline:none;border-color:#5FBB46;box-shadow:0 0 0 4px rgba(95,187,70,.16)}
.gs-pruef__hilfe{margin:10px 0 0;font-size:14px;color:#7A8D94}
.gs-pruef__ergebnis{margin:26px 0 0;padding:22px 24px;border-radius:16px;background:#F5F8F7;border-left:5px solid #C9D6D2;text-align:left}
.gs-pruef__ergebnis--gut{border-left-color:#5FBB46;background:#F2FAEF}
.gs-pruef__ergebnis--neutral{border-left-color:#C9A25C;background:#FBF7EF}
.gs-pruef__ergebnis--leer{border-left-color:#C9D6D2}
.gs-pruef__ergebnis h2{margin:0 0 8px;font-size:22px}
.gs-pruef__ergebnis p{margin:0 0 4px}
.gs-pruef__daten{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:18px 0 0}
.gs-pruef__daten dt{color:#5A6D74;font-size:14px}
.gs-pruef__daten dd{margin:0;font-weight:600;color:#0C1417}
.gs-pruef__rest{font-size:20px;color:#3A8129}
.gs-pruef__wie{margin:36px 0 0;padding:26px 0 0;border-top:1px solid #E3EAE8;text-align:left}
.gs-pruef__wie h2{margin:0 0 12px;font-size:20px}
.gs-pruef__wie ol{margin:0 0 22px;padding-left:22px;color:#3C4E55;line-height:1.65}
.gs-pruef__wie li{margin-bottom:8px}
/* Auf dem Handy stehen Feld und Knopf untereinander. Dabei gilt die
   flex-basis der Zeile 378 nicht mehr fuer die Breite, sondern fuer die
   HOEHE -- das Eingabefeld wurde dadurch 260 px hoch, ein leerer Kasten mit
   der Nummer irgendwo in der Mitte. Deshalb hier zuruecksetzen. */
@media(max-width:560px){
  .gs-pruef__zeile{flex-direction:column}
  .gs-pruef__zeile .gs-pruef__feld{flex:0 0 auto;width:100%}
  .gs-pruef__zeile .btn{width:100%}
  /* Die zweispaltige Liste laesst dem Wert auf einem 375-px-Bildschirm nur
     84 px: Selbst "200,00 EUR" brach dort um, die Gutscheinnummer ueber vier
     Zeilen. Auf dem Handy stehen Bezeichnung und Wert deshalb untereinander. */
  .gs-pruef__daten{grid-template-columns:1fr;gap:2px 0}
  .gs-pruef__daten dd{margin-bottom:12px}
}