/* Layout: one centered column inside a fine gold page border — wordmark, gold-framed interior photo, announcement, QUINZZ logo — on a deep evergreen ground with faint pastel glows and grain. Single dark look by design. */
:root {
  --ground: #0e1714;
  --ground-2: #15211d;
  --gold: #c9a961;
  --gold-light: #ead39b;
  --gold-deep: #9a7a3c;
  --gold-soft: #b9a57a;
  --blush-glow: rgba(242, 214, 205, 0.10);
  --sage-glow: rgba(196, 220, 200, 0.08);
  --powder-glow: rgba(205, 220, 236, 0.07);
  --font-display: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --font-body: "Jost", "Futura", "Century Gothic", "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--gold);
  font-family: var(--font-body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}
.ground {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(55% 40% at 10% 8%, var(--blush-glow), transparent 70%),
    radial-gradient(50% 40% at 92% 35%, var(--powder-glow), transparent 70%),
    radial-gradient(70% 45% at 50% 100%, var(--sage-glow), transparent 70%),
    radial-gradient(120% 90% at 50% 40%, var(--ground-2), var(--ground) 70%);
}
.map {
  position: absolute; inset: -2%;
  background: url("assets/rotherbaum-karte.jpg") center / cover no-repeat;
  filter: grayscale(1) sepia(0.85) saturate(1.6) brightness(0.9) contrast(1.15);
  mix-blend-mode: luminosity;
  opacity: 0.24;
}
.map::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 70% at 50% 45%, transparent 30%, var(--ground) 100%); opacity: 0.55;
}
.ground::after {
  content: ""; position: absolute; inset: 0; z-index: 1; opacity: 0.18; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.border {
  position: fixed; z-index: 2; pointer-events: none;
  inset: calc(env(safe-area-inset-top, 0px) + 14px) calc(env(safe-area-inset-right, 0px) + 14px) calc(env(safe-area-inset-bottom, 0px) + 14px) calc(env(safe-area-inset-left, 0px) + 14px);
  border: 1px solid var(--gold-deep);
  opacity: 0.55;
}

.page {
  position: relative; z-index: 1;
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(28px, 5vw, 46px);
  padding-block: clamp(48px, 8vw, 80px);
  padding-left: max(32px, env(safe-area-inset-left, 0px));
  padding-right: max(32px, env(safe-area-inset-right, 0px));
  text-align: center;
}

.brand { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.eyebrow {
  margin: 0; font-size: 0.72rem; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--gold-soft);
}
.wordmark {
  margin: 0;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.3rem, 9vw, 5rem);
  letter-spacing: 0.22em; line-height: 1;
  padding-left: 0.22em;
  background: linear-gradient(100deg, var(--gold-deep) 0%, var(--gold) 28%, var(--gold-light) 50%, var(--gold) 72%, var(--gold-deep) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.frame {
  width: min(720px, 100%);
  padding: 10px;
  border: 1px solid var(--gold);
  position: relative;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8);
}
.frame::after {
  content: ""; position: absolute; inset: 4px;
  border: 1px solid var(--gold-deep); opacity: 0.7; pointer-events: none;
}
.frame img {
  display: block; width: 100%; height: auto; max-width: 100%;
  aspect-ratio: 1448 / 1086; object-fit: cover;
}

.announce { display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 34rem; }
.coming {
  margin: 0;
  font-family: "Pinyon Script", "Edwardian Script ITC", "Snell Roundhand", cursive; font-weight: 400;
  font-size: clamp(2.8rem, 9vw, 4.6rem); line-height: 1.5;
  padding: 0.05em 0.25em 0.3em;
  background: linear-gradient(100deg, var(--gold-deep) 0%, var(--gold) 30%, var(--gold-light) 55%, var(--gold) 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-wrap: balance;
}
.rule { display: flex; align-items: center; gap: 14px; width: min(260px, 70vw); }
.rule span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.rule span:last-child { background: linear-gradient(90deg, var(--gold), transparent); }
.rule i { width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid var(--gold); display: block; flex: none; }
.tagline { margin: 0; font-size: 1.02rem; line-height: 1.6; color: var(--gold); text-wrap: balance; }
.facts {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px;
  font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-soft);
}
.facts li + li::before { content: "·"; color: var(--gold); margin-right: 18px; }

.partner { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.partner small { font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-soft); }
.partner img { width: min(220px, 60vw); height: auto; max-width: 100%; display: block; }

@media (prefers-reduced-motion: no-preference) {
  .wordmark { background-size: 200% 100%; animation: sheen 9s ease-in-out infinite alternate; }
  @keyframes sheen { from { background-position: 0% 0; } to { background-position: 100% 0; } }
}