/* Page-local styles — Gutscheine. Formularfelder wie Kontakt (.form-grid, .form-field aus global.css). */

/* === HERO === */
.g-hero{padding:11rem 3rem 3rem;text-align:center;position:relative;overflow:hidden;background:var(--ivory)}
.g-hero-glow{position:absolute;top:-180px;left:50%;transform:translateX(-50%);width:560px;height:560px;border-radius:50%;background:radial-gradient(circle, rgba(224,128,94,0.16) 0%, rgba(227,165,63,0.08) 45%, transparent 70%);pointer-events:none;animation:float 11s ease-in-out infinite}
.g-particle{position:absolute;width:6px;height:6px;background:var(--amber);border-radius:50%;opacity:0.4;animation:floatParticle 9s ease-in-out infinite}
.g-hero .eyebrow-wrap{opacity:0;animation:fadeUp 0.9s 0.2s forwards}
.g-hero h1{font-family:'Cormorant Garamond',serif;font-size:clamp(2.8rem,6vw,5rem);font-weight:300;line-height:1.0;letter-spacing:-0.02em;margin-bottom:1.5rem;opacity:0;animation:fadeUp 1s 0.4s forwards}
.g-hero h1 em{font-style:italic;color:var(--terracotta)}
.g-hero p{max-width:620px;margin:0 auto;color:var(--ink-soft);font-size:1.12rem;line-height:1.7;opacity:0;animation:fadeUp 1s 0.6s forwards}

/* hidden-Attribut gewinnt immer (sonst überstimmt display:flex/grid unten) */
.g-main [hidden]{display:none!important}

/* === MAIN === */
.g-main{background:var(--cream)}
.g-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:3.5rem;align-items:start;max-width:1200px;margin:0 auto}
.g-side{position:sticky;top:7rem}

/* Vorschau im Stil des PDF-Gutscheins (Gutschein::svg) */
.g-card{display:grid;grid-template-columns:36% 1fr;aspect-ratio:210/148;border-radius:18px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(61,46,42,0.55);background:var(--ivory)}
.g-card-links{position:relative;background:#3D2E2A;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:1rem;overflow:hidden}
.g-card-links::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 85% 8%, rgba(217,139,95,0.32) 0%, transparent 60%),radial-gradient(circle at 10% 95%, rgba(224,128,94,0.3) 0%, transparent 55%)}
.g-card-links img{position:relative;width:78%;height:auto}
.g-card-links span{position:relative;font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--cream);font-size:clamp(0.7rem,1.3vw,0.95rem);text-align:center}
.g-card-rechts{padding:9% 8% 7%;display:flex;flex-direction:column;background:radial-gradient(circle at 100% 0%, rgba(242,196,164,0.35) 0%, transparent 65%);min-width:0}
.g-card-rechts small{font-size:clamp(0.55rem,1vw,0.72rem);letter-spacing:0.4em;text-transform:uppercase;color:var(--terracotta);font-weight:500}
.g-card-rechts strong{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(2rem,4.4vw,3.4rem);line-height:1;margin-top:0.8rem;color:var(--ink)}
.g-card-rechts em{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--terracotta-dark);font-size:clamp(0.95rem,1.7vw,1.3rem);margin-top:0.4rem}
.g-card-fuer{margin-top:0.9rem;font-family:'Cormorant Garamond',serif;font-size:clamp(1rem,1.7vw,1.3rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-card-fuer span{font-family:'Outfit',sans-serif;font-size:0.62rem;letter-spacing:0.25em;text-transform:uppercase;color:var(--ink-soft);margin-right:0.3rem}
.g-card-fuer b{font-weight:400}
.g-card-rechts p{margin-top:0.6rem;font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--ink-soft);font-size:clamp(0.8rem,1.3vw,1rem);line-height:1.35;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}

.g-schritte{list-style:none;counter-reset:s;margin-top:2.4rem;display:grid;gap:1.1rem}
.g-schritte li{counter-increment:s;display:grid;grid-template-columns:2.4rem 1fr;column-gap:1rem;align-items:baseline}
.g-schritte li::before{content:counter(s);grid-row:span 2;width:2.4rem;height:2.4rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(190,110,71,0.1);color:var(--terracotta);font-family:'Cormorant Garamond',serif;font-size:1.25rem}
.g-schritte b{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.25rem}
.g-schritte span{color:var(--ink-soft);font-size:0.95rem;line-height:1.55}

/* Formular */
.g-form-card{background:var(--ivory);border-radius:28px;padding:3rem;box-shadow:var(--shadow);position:relative;overflow:hidden}
.g-form-card::before{content:'';position:absolute;top:-100px;right:-100px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle, var(--rose-soft) 0%, transparent 70%);opacity:0.4}
.g-form-head{position:relative;z-index:1;margin-bottom:1.6rem}
.g-form-head h3{font-family:'Cormorant Garamond',serif;font-size:1.7rem;font-weight:400;margin-bottom:0.4rem}
.g-form-head p{color:var(--ink-soft);font-size:0.95rem}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;position:relative;z-index:1}
.form-field.full{grid-column:span 2}
.form-field textarea{min-height:100px}
.field-opt{text-transform:none;letter-spacing:normal;color:var(--ink-soft);opacity:0.8}
.form-error{grid-column:span 2;display:none;padding:0.9rem 1.2rem;border-radius:14px;background:rgba(224,128,94,0.12);border:1px solid rgba(224,128,94,0.4);color:var(--terracotta-dark);font-size:0.92rem;line-height:1.5}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-actions{grid-column:span 2;display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:0.5rem;flex-wrap:wrap}
.form-hint{font-size:0.78rem;color:var(--ink-soft);font-style:italic;max-width:260px}

/* Umschalter Betrag / Angebot */
.g-modus{display:inline-flex;padding:4px;border-radius:100px;background:var(--cream);border:1px solid var(--line)}
.g-modus button{border:0;background:none;padding:0.6rem 1.5rem;border-radius:100px;font:inherit;font-size:0.92rem;color:var(--ink-soft);cursor:pointer;transition:all 0.25s}
.g-modus button.is-aktiv{background:var(--ink);color:var(--cream)}

/* Betrags-Kapseln (wie Themenwahl Kontakt) */
.g-chips{display:flex;flex-wrap:wrap;gap:0.6rem}
.form-field .g-chip{position:relative;cursor:pointer;margin:0;display:inline-block;font-size:inherit;letter-spacing:normal;text-transform:none}
.g-chip input,.g-angebot input{position:absolute;opacity:0;pointer-events:none}
.g-chip span{display:inline-block;padding:0.7rem 1.2rem;border-radius:100px;border:1px solid var(--line);background:var(--ivory);color:var(--ink-soft);font-size:0.95rem;transition:all 0.25s}
.g-chip:hover span{border-color:var(--terracotta);color:var(--terracotta)}
.g-chip input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.g-chip input:focus-visible + span,.g-angebot input:focus-visible + span{outline:2px solid var(--terracotta);outline-offset:2px}
.g-frei{display:flex;align-items:center;gap:0.7rem;margin-top:0.9rem;max-width:220px}
.g-frei span{color:var(--ink-soft);font-size:0.9rem;letter-spacing:0.1em}

/* Angebote als Liste */
.g-angebote{display:grid;gap:0.5rem}
.form-field .g-angebot{position:relative;cursor:pointer;margin:0;display:block;font-size:inherit;letter-spacing:normal;text-transform:none}
.g-angebot span{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:0.85rem 1.2rem;border-radius:14px;border:1px solid var(--line);background:var(--ivory);transition:all 0.25s}
.g-angebot b{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.15rem;color:var(--ink)}
.g-angebot i{font-style:normal;color:var(--ink-soft);font-size:0.9rem;white-space:nowrap}
.g-angebot:hover span{border-color:var(--terracotta)}
.g-angebot input:checked + span{border-color:var(--terracotta);background:rgba(190,110,71,0.08);box-shadow:inset 3px 0 0 var(--terracotta)}

.g-zaehler{display:block;text-align:right;font-size:0.75rem;color:var(--ink-soft);margin-top:0.3rem}
.g-trenner{margin-top:0.8rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.g-trenner span{font-family:'Cormorant Garamond',serif;font-size:1.35rem}

.g-form-success{display:none;text-align:center;padding:2rem 0;position:relative;z-index:1}
.g-form-success .cs-icon{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg, var(--amber) 0%, var(--coral) 100%);margin:0 auto 1.5rem;display:flex;align-items:center;justify-content:center;color:var(--cream);font-size:2.5rem;animation:popIn 0.5s ease}
.g-form-success h3{font-family:'Cormorant Garamond',serif;font-size:2rem;font-weight:400;margin-bottom:0.8rem}
.g-form-success p{color:var(--ink-soft);max-width:440px;margin:0 auto}

/* Formularschritte: am Computer unsichtbare Hüllen (Raster bleibt), auf dem Handy einzeln */
.g-schritt{display:contents}
.g-nav,.g-schrittinfo{display:none}

/* === RESPONSIVE === */
@media (max-width:900px){
  .g-hero{padding:8rem 1.5rem 2rem}
  .g-grid{grid-template-columns:1fr;gap:1.4rem}
  /* Reihenfolge auf dem Handy: Ablauf 1-2-3 kompakt, dann Vorschau, dann Formular in Schritten */
  .g-side{position:static;display:flex;flex-direction:column;gap:1.2rem}
  .g-schritte{order:-1;margin-top:0;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.5rem}
  .g-schritte li{grid-template-columns:1fr;justify-items:center;text-align:center;row-gap:0.3rem}
  .g-schritte li::before{grid-row:auto;width:2rem;height:2rem;font-size:1.05rem}
  .g-schritte b{font-size:1.05rem}
  .g-schritte span{display:none}
  .g-schrittinfo{display:block;font-size:0.7rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--terracotta);margin-bottom:0.4rem}
  #gsForm[data-schritt="1"] .g-schritt:not([data-teil="1"]),
  #gsForm[data-schritt="2"] .g-schritt:not([data-teil="2"]),
  #gsForm[data-schritt="3"] .g-schritt:not([data-teil="3"]){display:none}
  .g-nav{display:flex;align-items:center;gap:1rem;margin-top:0.4rem}
  .g-nav .btn{margin-left:auto}
  .g-nav-ende{margin-top:0}
  .g-zurueck{border:0;background:none;padding:0.6rem 0;font:inherit;font-size:0.9rem;color:var(--ink-soft);cursor:pointer}
  .g-trenner{display:none}   /* die Schrittfrage sagt dasselbe */
  .g-main{padding-top:1.5rem}
  .g-form-card{padding:2rem 1.4rem}
  .form-grid{grid-template-columns:1fr 1fr}
  .form-actions{flex-direction:column-reverse;align-items:stretch}
  .form-actions .btn{width:100%;justify-content:center}
  .form-hint{max-width:none}
}
@media (max-width:560px){
  .form-grid{grid-template-columns:1fr}
  .form-field.full,.form-error,.form-actions{grid-column:span 1}
  .g-plz{max-width:none}
  .g-schritte{margin-top:1.8rem}
}