/* Spassboxx Galerie – öffentlich für Gäste */
:root {
  --ink: #0e3a42; --ink-2: #3d6168; --teal: #1a5a72; --mint: #cdeadb; --mint-soft: #e9f6ef;
  --cream: #faf8f3; --rose: #e0507c; --rose-soft: #fbe3eb; --line: rgba(14, 58, 66, .14);
  --serif: 'Fraunces', Georgia, serif; --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; color: var(--ink); font: 16px/1.55 var(--sans);
  background: radial-gradient(circle at 10% 0%, var(--mint) 0, transparent 40%), radial-gradient(circle at 95% 100%, var(--rose-soft) 0, transparent 45%), var(--cream); }
h1, h2 { font-family: var(--serif); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 .4em; }
h1 { font-size: clamp(1.9rem, 6vw, 2.8rem); }
h2 { font-size: clamp(1.4rem, 4vw, 1.8rem); }
p { margin: 0 0 .9em; }
a { color: var(--teal); }

.g-head { padding: 20px 20px 0; text-align: center; }
.g-brand { font: 600 1.5rem var(--serif); color: var(--ink); text-decoration: none; letter-spacing: -.01em; }
.g-main { flex: 1; width: 100%; max-width: 720px; margin: 0 auto; padding: 24px 16px 40px; display: flex; flex-direction: column; gap: 22px; }
.g-foot { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; padding: 22px 16px 30px; font-size: .88rem; }
.g-foot a { color: var(--ink-2); text-decoration: none; }

.g-hero { text-align: center; padding: 20px 4px 0; }
.g-hero p { color: var(--ink-2); max-width: 520px; margin-left: auto; margin-right: auto; }
.g-eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; font-weight: 600; color: var(--rose); margin-bottom: 8px; }
.g-card { background: #fff; border-radius: 24px; padding: clamp(22px, 5vw, 36px); box-shadow: 0 18px 50px rgba(14, 58, 66, .1); }
.g-lock, .g-event { text-align: center; }
.g-date { color: var(--ink-2); font-weight: 500; }
.g-lead { font: 600 1.35rem var(--serif); margin-top: 18px; }
.g-muted { color: var(--ink-2); font-size: .95rem; }

.g-countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 18px auto 20px; max-width: 460px; }
.g-countdown div { background: var(--ink); color: #fff; border-radius: 16px; padding: 14px 4px; }
.g-countdown b { display: block; font: 600 clamp(1.6rem, 7vw, 2.3rem)/1 var(--serif); font-variant-numeric: tabular-nums; }
.g-countdown span { font-size: .75rem; color: var(--mint); }

.g-form { display: flex; flex-direction: column; gap: 14px; text-align: left; margin-top: 16px; }
.g-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: .9rem; min-width: 0; }
.g-form em { color: #b4234f; font-style: normal; font-weight: 500; font-size: .85rem; }
.g-form input, .g-form textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; font: inherit; font-weight: 400; color: var(--ink); background: #fff; }
.g-form input:focus, .g-form textarea:focus { outline: 3px solid rgba(26, 90, 114, .25); border-color: var(--teal); }
.g-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.g-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.g-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border: 0; border-radius: 999px;
  background: var(--rose); color: #fff; font: 600 1rem var(--sans); text-decoration: none; cursor: pointer; width: 100%; }
.g-btn:hover { filter: brightness(.95); }
.g-btn-ghost { background: var(--ink); width: auto; }
.g-wa { background: #25d366; margin: 6px 0 4px; }
.g-or { display: flex; align-items: center; gap: 12px; color: var(--ink-2); font-size: .85rem; margin: 16px 0 0; }
.g-or::before, .g-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.g-wa svg { width: 22px; height: 22px; }
.g-ok { background: var(--mint-soft); color: #1a7a4c; border-radius: 14px; padding: 14px 16px; margin: 14px 0 4px; }
.g-err { background: var(--rose-soft); color: #9b1c45; border-radius: 12px; padding: 10px 14px; }

@media (max-width: 520px) {
  .g-row { grid-template-columns: 1fr; }
  .g-countdown { gap: 6px; }
}