/* ============================================================
   Gutscheinshop — eigenes Stylesheet, Präfix gs-

   Merkbild: die Bühne wechselt die Jahreszeit. Das ist keine Deko,
   sondern die Aussage der Seite — der Gutschein gilt drei Jahre,
   also im Frühjahr wie im Nebel. Alles andere ordnet sich unter:
   die Beträge als Skalenspitze auf Pine, der Ablauf als Haarlinien
   auf Weiß, das Formular auf Mint, das Kleingedruckte auf Pine.

   Verzicht: kein Warenkorb, keine Kachelkarten mit Schatten, kein
   Bild im Formular. Wer kauft, soll drei Felder sehen und einen
   Knopf.
   ============================================================ */

.t-zahl{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.t-mikro{font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
[hidden]{display:none !important}

/* ================= 00 · HERO — die Jahreszeiten ================= */
.gs-buehne img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 55%;opacity:0;transition:opacity 1.2s var(--ease)}
.gs-buehne img.ist-an{opacity:1}
/* Ohne Skript liegt nur das erste Bild oben — die übrigen bleiben
   unsichtbar, statt sich zu stapeln. */
html:not(.js) .gs-buehne img:first-child{opacity:1}
.gs-hero .hero-buehne::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,26,17,.5) 0%,rgba(7,48,31,.28) 46%,rgba(6,26,17,.6) 100%)}

.sh-zahl{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:4px;
  padding-bottom:.3em}
.sh-zahl .t-zahl{font-size:clamp(52px,6.4vw,96px);line-height:.9;color:var(--lime)}
.sh-zahl em{font-style:normal;font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.66);max-width:16ch;
  line-height:1.4}

/* Die Beschriftung der Jahreszeit — mit Skript eine, ohne Skript alle. */
.gs-jahreszeit{position:absolute;right:var(--inset);bottom:26px;z-index:4;
  display:flex;gap:16px;font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.6)}
html.js .gs-jahreszeit{display:grid}
html.js .gs-jahreszeit span{grid-area:1/1;opacity:0;transition:opacity .6s var(--ease);
  white-space:nowrap;text-align:right}
html.js .gs-jahreszeit span.ist-an{opacity:1}

/* ================= Gemeinsames ================= */
.gs-marke{display:flex;align-items:baseline;gap:16px;padding-top:18px;
  border-top:1px solid var(--hairline-dunkel)}
.gs-marke-nr{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.2em;color:var(--lime)}
.gs-marke-was{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.gs-h2{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(32px,4.8vw,74px);letter-spacing:-.05em;line-height:1.06;color:#fff}
.gs-h2-hell{color:var(--tinte)}

/* ================= 01 · DIE AUSWAHL ================= */
.gs-auswahl{background:var(--pine);color:#fff;
  padding:clamp(46px,6vw,84px) var(--inset) clamp(52px,7vw,96px)}
.gs-kopf-satz{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:14px 56px;align-items:end;padding-top:22px}
.gs-kopf-lead{font-size:17px;font-weight:300;line-height:1.6;color:rgba(255,255,255,.72);
  max-width:46ch;padding-bottom:.4em;text-wrap:pretty}

.gs-flash{margin-top:26px;padding:14px 18px;font-size:16px;font-weight:300;
  border-left:2px solid var(--lime);background:rgba(204,255,0,.1);max-width:70ch}
.gs-flash-err{border-color:var(--live);background:rgba(255,90,77,.12)}

.gs-liste{list-style:none;margin-top:clamp(30px,4vw,54px);
  border-top:1px solid var(--hairline-dunkel)}
.gs-zeile{display:grid;grid-template-columns:minmax(150px,auto) minmax(0,1fr) auto;
  gap:14px 40px;align-items:center;padding:26px 0;
  border-bottom:1px solid var(--hairline-dunkel);
  transition:background var(--t-schnell) ease-out}
.gs-zeile.ist-gewaehlt{background:var(--tanne)}
/* Die Skalenspitze der Seite: der Betrag. Tabular, damit 50 und 250
   dieselbe Kante haben. */
.gs-betrag{display:flex;align-items:baseline;gap:6px;
  font-size:clamp(40px,5.4vw,80px);line-height:.9;color:var(--lime)}
.gs-betrag .gs-euro{font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:.42em;letter-spacing:-.02em}
.gs-frei{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:.42em;letter-spacing:.04em;color:var(--lime)}
.gs-zeile-titel{font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:clamp(18px,1.6vw,23px);letter-spacing:-.02em;line-height:1.15;color:#fff}
.gs-zeile-beschr{margin-top:6px;font-size:15.5px;font-weight:300;line-height:1.55;
  color:rgba(255,255,255,.72);max-width:52ch;text-wrap:pretty}
.gs-art{margin-top:8px;color:rgba(255,255,255,.45) !important}
.gs-zeile-knopf{justify-self:end}
.gs-knapp{margin-top:16px;color:var(--live) !important}

.gs-leer{margin-top:clamp(34px,4.6vw,64px);max-width:56ch;display:flex;flex-direction:column;gap:14px}
.gs-leer-titel{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(24px,3vw,42px);letter-spacing:-.04em;line-height:1.08;color:#fff;text-wrap:balance}
.gs-leer-text{font-size:17px;font-weight:300;line-height:1.6;color:rgba(255,255,255,.66)}

/* ================= 02 · SO LÄUFT ES ================= */
.gs-ablauf{background:#fff;padding:clamp(50px,6vw,90px) var(--inset)}
.gs-ablauf-titel{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(22px,2.6vw,36px);letter-spacing:-.04em;line-height:1.1;color:var(--tinte)}
.gs-schritte{list-style:none;margin-top:clamp(22px,3vw,38px);border-top:1px solid var(--hairline)}
.gs-schritte li{display:grid;grid-template-columns:44px minmax(0,7fr) minmax(0,13fr);
  gap:8px 26px;padding:18px 0;border-bottom:1px solid var(--hairline);align-items:baseline}
.gs-schritt-nr{color:var(--muted) !important}
.gs-schritt-kurz{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(15px,1.4vw,19px);letter-spacing:-.02em;color:var(--gruen)}
.gs-schritt-text{font-size:16px;font-weight:300;line-height:1.6;color:var(--text);text-wrap:pretty}

/* ================= 03 · BESTELLEN ================= */
.gs-bestellen{background:var(--mint);padding:clamp(56px,7vw,104px) var(--inset);
  scroll-margin-top:150px}
.gs-bestellen-kopf{max-width:62ch}
.gs-bestellen-lead{margin-top:14px;font-size:17px;font-weight:300;line-height:1.6;
  color:var(--sekundaer);max-width:56ch;text-wrap:pretty}
.gs-raster{margin-top:clamp(28px,3.6vw,48px);display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,3fr);gap:clamp(30px,4vw,64px);align-items:start}

.gs-form{display:flex;flex-direction:column;gap:20px}
.gs-feld{display:flex;flex-direction:column;gap:7px}
.gs-feld > label{color:var(--nav)}
.gs-optional{font-weight:600;letter-spacing:.1em;color:var(--muted);text-transform:none}
.gs-form input[type=text],.gs-form input[type=email],.gs-form textarea{width:100%;
  padding:13px 15px;font-size:16px;font-family:'Hanken Grotesk',sans-serif;font-weight:400;
  color:var(--tinte);background:#fff;border:1px solid #cbd6cd;border-radius:8px;
  transition:border-color var(--t-schnell) ease-out,box-shadow var(--t-schnell) ease-out}
.gs-form textarea{resize:vertical;min-height:86px;line-height:1.5}
.gs-form input:focus-visible,.gs-form textarea:focus-visible{outline:none;
  border-color:var(--gruen);box-shadow:0 0 0 2px rgba(31,132,70,.28)}
.ist-fehler input,.ist-fehler textarea{border-color:#b5453a}
.gs-fehler{font-size:14px;color:#8c2f28}
.gs-fehler-oben{padding:12px 15px;background:#fbe4e2;border-left:2px solid #b5453a}
.gs-zweispalt{display:grid;grid-template-columns:1fr 1fr;gap:18px}

.gs-gewaehlt{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 16px;
  padding:14px 18px;background:#fff;border-left:2px solid var(--gruen)}
.gs-gewaehlt strong{font-family:'Space Grotesk',sans-serif;font-size:17px;color:var(--tinte)}
.gs-gewaehlt-preis{font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--gruen);
  font-variant-numeric:tabular-nums}
.gs-wechseln{margin-left:auto;font-size:14px;color:var(--muted);text-decoration:none;
  border-bottom:1px solid transparent}
.gs-wechseln:hover{color:var(--gruen);border-color:var(--gruen)}

.gs-typwahl{border:0;display:flex;flex-wrap:wrap;gap:10px;padding:0}
.gs-typwahl legend{width:100%;margin-bottom:9px;color:var(--nav)}
.gs-schalter{position:relative;cursor:pointer}
.gs-schalter input{position:absolute;opacity:0;width:1px;height:1px}
.gs-schalter span{display:inline-flex;align-items:center;padding:12px 20px;background:#fff;
  border:1px solid #cbd6cd;border-radius:999px;font-family:'Space Grotesk',sans-serif;
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--nav);
  transition:background var(--t-schnell) ease-out,color var(--t-schnell) ease-out,
             border-color var(--t-schnell) ease-out}
.gs-schalter:hover span{border-color:var(--gruen);color:var(--gruen)}
.gs-schalter input:checked + span{background:var(--tanne);border-color:var(--tanne);color:#fff}
.gs-schalter input:focus-visible + span{outline:2px solid var(--gruen);outline-offset:2px}

/* NICHT `.gs-recht` nennen — so heißt das Kleingedruckte-Kapitel auf Pine.
   Genau diese Kollision hat die Zustimmung im Formular zu einem dunkelgrünen
   Klotz gemacht (siehe docs/PROMPT_Register.md, „Klassennamen doppelt"). */
.gs-zustimmung{display:flex;flex-direction:column;gap:6px;scroll-margin-top:150px}
.gs-zustimmung label{display:flex;gap:11px;align-items:flex-start;
  font-size:15px;font-weight:300;line-height:1.5;color:var(--text);cursor:pointer}
.gs-zustimmung input{width:19px;height:19px;margin-top:2px;accent-color:var(--gruen);flex:none}
.gs-zustimmung a{color:var(--gruen)}

.gs-absenden{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.gs-hinweis{font-size:14px;color:var(--muted)}
.gs-ds{font-size:14px;font-weight:300;line-height:1.5;color:var(--muted);max-width:60ch}

.gs-marginalie{padding-top:8px;border-top:1px solid rgba(20,35,27,.18);
  display:flex;flex-direction:column;gap:12px}
.gs-marginalie-titel{padding-top:10px}
.gs-marginalie p{font-size:15px;font-weight:300;line-height:1.6;color:var(--sekundaer)}
.gs-marginalie-art{font-size:14px !important;color:var(--muted) !important}

/* Die Motivwahl — eigene Bilder, keine PCC-Vorlagen. Vier Streifen, das
   gewählte bekommt die grüne Kante; die Beschriftung steht darunter, damit
   die Wahl auch ohne Farbe erkennbar bleibt. */
.gs-motivwahl{border:0;padding:0}
.gs-motivwahl legend{margin-bottom:9px;color:var(--nav)}
.gs-motive{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.gs-motiv{position:relative;cursor:pointer;display:flex;flex-direction:column;gap:6px}
.gs-motiv input{position:absolute;opacity:0;width:1px;height:1px}
.gs-motiv-bild{display:block;overflow:hidden;border:2px solid transparent;
  transition:border-color var(--t-schnell) ease-out}
.gs-motiv-bild img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.gs-motiv-label{font-size:13px;font-weight:300;color:var(--sekundaer);line-height:1.35}
.gs-motiv:hover .gs-motiv-bild{border-color:#a9b8ac}
.gs-motiv input:checked ~ .gs-motiv-bild{border-color:var(--gruen)}
.gs-motiv input:checked ~ .gs-motiv-label{color:var(--tinte);font-weight:600}
.gs-motiv input:focus-visible ~ .gs-motiv-bild{outline:2px solid var(--gruen);outline-offset:2px}

/* Zustand „nichts gewählt" und „kein Bezahlweg" */
.gs-aus{margin-top:clamp(26px,3.4vw,44px);max-width:56ch;display:flex;flex-direction:column;gap:14px;
  align-items:flex-start}
.gs-aus-titel{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(20px,2.4vw,32px);letter-spacing:-.04em;line-height:1.1;color:var(--tinte);
  text-wrap:balance}
.gs-aus-text{font-size:16.5px;font-weight:300;line-height:1.6;color:var(--sekundaer)}

/* Zustand „bezahlt" */
.gs-fertig{margin-top:clamp(26px,3.4vw,44px);padding:clamp(24px,3vw,40px);background:#fff;
  border-left:2px solid var(--gruen);max-width:760px;display:flex;flex-direction:column;gap:16px}
.gs-fertig-marke{color:var(--gruen) !important}
.gs-fertig-titel{font-size:clamp(19px,2.2vw,28px);font-weight:300;line-height:1.35;
  color:var(--tinte);text-wrap:balance}
.gs-fertig-daten{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 24px;
  padding-top:6px;border-top:1px solid var(--hairline);font-size:16px}
.gs-fertig-daten dt{font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding-top:5px}
.gs-fertig-daten dd{font-weight:300;color:var(--text)}
.gs-nummer{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:19px;
  letter-spacing:.04em;color:var(--tinte)}
.gs-fertig-knopf{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.gs-fertig-mail{font-size:14px;color:var(--muted);max-width:40ch}

/* ================= 04 · DAS KLEINGEDRUCKTE ================= */
.gs-recht{background:var(--pine);color:#fff;padding:clamp(50px,6vw,90px) var(--inset)}
.gs-recht-titel{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(22px,2.6vw,36px);letter-spacing:-.04em;line-height:1.1;color:#fff}
.gs-recht-liste{margin-top:clamp(20px,2.6vw,34px);border-top:1px solid var(--hairline-dunkel);
  max-width:1000px}
.gs-recht-teil{border-bottom:1px solid var(--hairline-dunkel)}
.gs-recht-teil summary{list-style:none;cursor:pointer;padding:16px 0;
  font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:13px;letter-spacing:.1em;color:var(--lime);
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.gs-recht-teil summary::-webkit-details-marker{display:none}
.gs-recht-teil summary::after{content:"+";font-size:17px;color:rgba(255,255,255,.5)}
.gs-recht-teil[open] summary::after{content:"–"}
.gs-recht-teil summary:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.gs-recht-text{padding:0 0 20px;font-size:15px;font-weight:300;line-height:1.65;
  color:rgba(255,255,255,.74);max-width:78ch;text-wrap:pretty}

/* ================= Schmale Fenster ================= */
@media (max-width:1000px){
  .gs-kopf-satz{grid-template-columns:minmax(0,1fr)}
  .gs-raster{grid-template-columns:minmax(0,1fr)}
  .gs-marginalie{order:-1}
  .gs-schritte li{grid-template-columns:34px minmax(0,1fr)}
  .gs-schritt-text{grid-column:2}
}
@media (max-width:760px){
  .gs-zeile{grid-template-columns:minmax(0,1fr);gap:10px;padding:22px 0}
  .gs-zeile-knopf{justify-self:start}
  .gs-betrag{font-size:clamp(38px,13vw,64px)}
  .gs-zweispalt{grid-template-columns:1fr}
  .gs-motive{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gs-jahreszeit{left:var(--inset);right:auto;bottom:auto;top:auto;
    position:static;padding:0 var(--inset) 18px;justify-content:flex-start}
  html.js .gs-jahreszeit span{text-align:left}
}

/* ================= Bewegung aus ================= */
@media (prefers-reduced-motion:reduce){
  .gs-buehne img,.gs-jahreszeit span{transition:none !important}
}