/* ======================================================================
   GUTSCHEIN-SHOP  (nur /gutscheine, Abschnitt #kaufen)
   Heller KICK-Look wie die Terminwahl: helle Flaeche, weisse Karte,
   Pink fuer Akzente, Gelb als Hervorhebung, Schwarz nur als Schrift.
   ====================================================================== */
.gs-abschnitt{
  --gs-pink:#e03373;
  --gs-pink-text:#c4205e;
  --gs-pink-hell:#fdeef3;
  --gs-gelb:#ffdd00;
  --gs-text:#1a1a1a;
  --gs-mute:#5c5c5c;
  --gs-grau:#f4f3f0;
  --gs-linie:#e4e2dc;
  background:var(--gs-grau);color:var(--gs-text);
  scroll-margin-top:110px;
}
.gs-abschnitt *{box-sizing:border-box}
.gs-abschnitt [hidden]{display:none!important}
.gs-abschnitt :focus-visible{outline:3px solid var(--gs-pink);outline-offset:3px}

/* ---------- Kopf ---------- */
.gs-kopf{display:grid;justify-items:center;gap:12px;text-align:center;margin-bottom:clamp(22px,3vw,32px)}
.gs-tag{
  margin:0;padding:5px 18px;background:var(--gs-pink);color:#fff;
  font-family:var(--f-display);font-weight:900;font-size:14px;letter-spacing:.22em;text-transform:uppercase;
  clip-path:polygon(10px 0%,100% 0%,calc(100% - 10px) 100%,0% 100%);
}
.gs-h2{margin:0;font-family:var(--f-display);font-weight:900;font-size:clamp(56px,8vw,104px);line-height:.88;text-transform:uppercase;color:var(--gs-text)}
.gs-h2 em{font-style:normal;color:var(--gs-pink)}
.gs-sub{margin:0;max-width:56ch;font-family:var(--f-body);font-size:18px;line-height:1.6;color:var(--gs-mute)}

/* Drei kurze Fakten statt langer Erklaerung */
.gs-fakten{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px;margin:0 0 clamp(22px,3vw,30px);padding:0;list-style:none}
.gs-fakten li{
  display:inline-flex;align-items:center;gap:10px;padding:10px 18px 10px 12px;border-radius:999px;
  background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.05),0 0 0 1px var(--gs-linie);
  font-family:var(--f-body);font-size:15px;font-weight:600;line-height:1.3;color:var(--gs-text);
}
.gs-fakten li b{font-weight:800}
.gs-fakten svg{flex:none;width:30px;height:30px;padding:6px;border-radius:50%;background:var(--gs-gelb);fill:none;stroke:var(--gs-text);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Die Kasse: weisse Karte ---------- */
.gs-kasse{
  position:relative;min-height:440px;border-radius:4px;overflow:hidden;background:#fff;
  box-shadow:0 2px 12px rgba(0,0,0,.06),0 0 0 1px rgba(224,51,115,.12);
}
.gs-kasse::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;z-index:2;background:linear-gradient(90deg,var(--gs-pink),var(--gs-gelb));pointer-events:none}
.gs-rahmen{display:block;width:100%;height:520px;border:0;background:#fff;opacity:0;transition:opacity .45s ease,height .3s ease}
.gs-kasse.ist-bereit .gs-rahmen{opacity:1}
.gs-kasse.ist-bereit{min-height:0}

/* Ladezeit: Geschenk mit huepfender Schleife */
.gs-laden{position:absolute;inset:0;z-index:1;display:grid;place-content:center;justify-items:center;gap:18px;padding:24px;text-align:center;background:#fff}
.gs-laden-bild{width:86px;height:86px;animation:gs-wippen 1.6s ease-in-out infinite}
.gs-laden-bild .gs-box{fill:var(--gs-gelb)}
.gs-laden-bild .gs-band{fill:var(--gs-pink)}
.gs-laden-bild .gs-linie{fill:none;stroke:var(--gs-text);stroke-width:2.2;stroke-linejoin:round}
@keyframes gs-wippen{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-8px) rotate(-4deg)}60%{transform:translateY(0) rotate(3deg)}}
.gs-laden p{display:grid;gap:6px;margin:0;font-family:var(--f-display);font-weight:900;font-size:34px;letter-spacing:.04em;line-height:.9;text-transform:uppercase;color:var(--gs-text)}
.gs-laden small{font-family:var(--f-body);font-weight:500;font-size:16px;letter-spacing:0;text-transform:none;color:var(--gs-mute)}

.gs-ohne{position:relative;z-index:3;margin:0;padding:40px 24px;text-align:center;font-family:var(--f-body);font-size:17px;color:var(--gs-text);background:#fff}
.gs-ohne a{color:var(--gs-pink-text);font-weight:700;text-decoration:underline}

/* ---------- Fuss: Einloesen, Sicherheit, Hilfe ---------- */
.gs-fuss{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.gs-fuss p{
  display:flex;align-items:flex-start;gap:12px;margin:0;padding:16px 18px;border-radius:4px;background:#fff;
  box-shadow:0 0 0 1px var(--gs-linie);font-family:var(--f-body);font-size:15px;line-height:1.5;color:var(--gs-mute);
}
.gs-fuss p b{display:block;margin-bottom:2px;font-size:15px;font-weight:800;color:var(--gs-text)}
.gs-fuss svg{flex:none;width:24px;height:24px;margin-top:2px;fill:none;stroke:var(--gs-pink);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.gs-fuss a{color:var(--gs-text);font-weight:700;white-space:nowrap;text-decoration:underline;text-decoration-color:var(--gs-pink);text-decoration-thickness:2px;text-underline-offset:3px}
.gs-kasse.ist-langsam ~ .gs-fuss .gs-extern{padding:2px 8px;background:var(--gs-pink);color:#fff;text-decoration:none}

@media (max-width:900px){
  .gs-fuss{grid-template-columns:1fr}
}
@media (max-width:768px){
  .gs-abschnitt{scroll-margin-top:90px}
  .gs-sub{font-size:17px}
  .gs-fakten{gap:8px}
  .gs-fakten li{width:100%;justify-content:flex-start;border-radius:4px;font-size:15px}
  .gs-kasse{margin-inline:-8px}
}
@media (prefers-reduced-motion:reduce){
  .gs-laden-bild{animation:none}
  .gs-rahmen{transition:none}
}