/* Startseite bad-tratsching.de. Schriften, Farben und Abstände kommen aus /tokens.css. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bt-night);
  color: var(--bt-snow);
  font: 400 var(--bt-size-md)/var(--bt-leading-text) var(--bt-font-text);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:focus-visible { outline: 2px solid var(--bt-focus); outline-offset: 3px; border-radius: 2px; }
img { display: block; max-width: 100%; height: auto; }
.wrap { width: min(1100px, 100%); margin: 0 auto; padding: 0 var(--bt-gutter); }

/* Titelbild */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; }
.hero picture, .hero picture img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero picture img { object-fit: cover; object-position: 50% 40%; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(21, 26, 43, 0.5) 0%, rgba(21, 26, 43, 0) 24%),
    linear-gradient(0deg, rgba(21, 26, 43, 0.97) 0%, rgba(21, 26, 43, 0.62) 30%, rgba(21, 26, 43, 0) 58%);
}
@media (max-height: 520px) and (orientation: landscape) {
  .hero::after {
    background: linear-gradient(0deg, rgba(21, 26, 43, 0.97) 0%, rgba(21, 26, 43, 0.7) 45%, rgba(21, 26, 43, 0) 80%);
  }
}
.hero-text {
  position: relative; z-index: 1; width: min(1100px, 100%); margin: 0 auto;
  padding: 0 var(--bt-gutter) max(7vh, var(--bt-space-6)); text-align: center;
}
.place {
  margin: 0 0 var(--bt-space-4);
  font: 500 var(--bt-size-xs)/1.3 var(--bt-font-ui);
  letter-spacing: var(--bt-track-caps); text-transform: uppercase;
  color: var(--bt-amber);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}
.hero h1 { margin: 0; }
.hero h1 img { width: min(560px, 84vw, 105svh); margin: 0 auto; filter: drop-shadow(0 2px 18px rgba(0, 0, 0, 0.45)); }
.slogan {
  margin: var(--bt-space-5) 0 0;
  font: italic 400 var(--bt-size-xl)/var(--bt-leading-snug) var(--bt-font-display);
  color: var(--bt-paper);
}

/* Inhalt */
main { background: linear-gradient(180deg, var(--bt-night) 0%, var(--bt-night-2) 100%); }
.intro { padding: var(--bt-space-8) 0 var(--bt-space-7); text-align: center; }
.intro p {
  max-width: 34em; margin: 0 auto;
  font-size: var(--bt-size-lg); line-height: 1.55; color: var(--bt-snow);
}

/* Drei Absätze über das Spiel, ruhig gesetzt, durch feine Linien getrennt */
.grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--bt-space-6) var(--bt-space-6); padding-bottom: var(--bt-space-8);
}
.card { border-top: 1px solid var(--bt-line-dark); padding-top: var(--bt-space-4); }
.card h2 {
  margin: 0 0 var(--bt-space-3);
  font: 600 var(--bt-size-xl)/var(--bt-leading-snug) var(--bt-font-display);
  color: var(--bt-snow);
}
.card p { margin: 0 0 var(--bt-space-3); color: var(--bt-snow-muted); }
.card p:last-child { margin-bottom: 0; }

/* Gästeinformation im Stil eines Aushangs */
.notice {
  margin: 0 auto var(--bt-space-8); max-width: 44rem;
  background: var(--bt-paper); color: var(--bt-ink);
  border-radius: var(--bt-radius-s);
  padding: var(--bt-space-6) clamp(1.25rem, 4vw, 2.5rem) var(--bt-space-5);
  box-shadow: var(--bt-shadow-raise);
  transform: rotate(-0.5deg);
}
.notice h2 {
  margin: 0; text-align: center;
  font: 600 var(--bt-size-2xl)/1.15 var(--bt-font-display);
  font-variant-caps: small-caps; letter-spacing: 0.04em;
}
.notice .from {
  margin: var(--bt-space-2) 0 var(--bt-space-5); text-align: center;
  font: 500 var(--bt-size-xs)/1.3 var(--bt-font-ui); letter-spacing: var(--bt-track-caps);
  text-transform: uppercase; color: var(--bt-ink-muted);
}
.notice dl {
  margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: var(--bt-space-3) var(--bt-space-5);
  border-top: 1px solid var(--bt-line-light); padding-top: var(--bt-space-4);
}
.notice dt { font: 600 var(--bt-size-md)/1.4 var(--bt-font-display); }
.notice dd { margin: 0; }
@media (max-width: 560px) {
  .notice dl { grid-template-columns: 1fr; gap: var(--bt-space-1); }
  .notice dd { margin-bottom: var(--bt-space-3); }
}

.status {
  text-align: center; padding-bottom: var(--bt-space-8);
  font: 400 var(--bt-size-sm)/1.5 var(--bt-font-ui); color: var(--bt-snow-muted);
}

/* Rechtsseiten */
.legal { background: var(--bt-paper); color: var(--bt-ink); min-height: 100svh; }
.legal .wrap { max-width: 46rem; padding-top: var(--bt-space-7); padding-bottom: var(--bt-space-8); }
.legal h1 {
  margin: 0 0 var(--bt-space-5);
  font: 600 var(--bt-size-3xl)/var(--bt-leading-tight) var(--bt-font-display);
}
.legal h2 {
  margin: var(--bt-space-6) 0 var(--bt-space-2);
  font: 600 var(--bt-size-lg)/var(--bt-leading-snug) var(--bt-font-display);
  color: var(--bt-loden);
}
.legal p { margin: 0 0 var(--bt-space-3); }
.legal a { color: var(--bt-glow-ink); }
.legal .back {
  display: inline-block; margin-bottom: var(--bt-space-6);
  font: 500 var(--bt-size-sm)/1.3 var(--bt-font-ui); color: var(--bt-ink-muted);
}

footer {
  background: #0f1320; color: var(--bt-snow-muted);
  font: 400 var(--bt-size-sm)/1.5 var(--bt-font-ui);
  padding: var(--bt-space-5) var(--bt-gutter); text-align: center;
}
footer nav { display: flex; gap: var(--bt-space-5); justify-content: center; flex-wrap: wrap; margin-bottom: var(--bt-space-2); }
footer a { color: var(--bt-snow); }
.legal + footer { background: var(--bt-ink); }