/* Layout-Helfer speziell für hgw-ai.de — ergänzt das Token-System
   (entspricht den lokalen <style>-Regeln der Design-System-Beispielseiten). */

html, body { margin: 0; padding: 0; overflow-x: hidden; }
.wrap { width: 100%; }
.page { width: 1280px; max-width: 100%; margin: 0 auto; }

/* Hero-Hintergrund (Strandhafer, Wasser, Farbverlauf) geht über die volle Viewport-Breite */
.hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
/* Hero-Inhalt bleibt in der Content-Spalte zentriert */
.hero__content {
  box-sizing: border-box;
  width: 1280px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.hero__intro { max-width: 540px; }
.hero__actions { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.stat { padding: 24px 26px; border-radius: var(--radius-lg); }

.event-row {
  display: flex;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-hair);
  background: var(--surface-card);
}
.event-row .datechip { border-radius: 0; min-width: 180px; }
.event-row__body { flex: 1; padding: 34px 40px; display: flex; flex-direction: column; justify-content: center; }
.event-row__cta { display: flex; align-items: center; padding: 0 40px; }

.signup__inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }

/* Prose: Markdown-Kinder im Coastal-Stil (Überschriften, Listen, Links, Betonung). */
.prose h2 { font-family: var(--font-display); font-size: var(--text-h2); font-weight: var(--fw-black); letter-spacing: var(--ls-head); color: var(--text-strong); margin: 40px 0 14px; }
.prose h3 { font-family: var(--font-display); font-size: var(--text-h3); font-weight: var(--fw-bold); color: var(--text-strong); margin: 30px 0 10px; }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 1.3em; }
.prose li { margin: 6px 0; }
.prose a { color: var(--brand); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--text-strong); font-weight: var(--fw-semibold); }
.prose hr { border: 0; border-top: 1px solid var(--border-hair); margin: 32px 0; }

/* Event-Detailseite. */
.event-head { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.event-head .datechip { border-radius: var(--radius-lg); min-width: 150px; }
.event-body { max-width: 760px; }

.event-meta { margin-top: 40px; padding: 26px 30px; border-radius: var(--radius-lg); background: var(--surface-tint); display: grid; gap: 12px; }
.event-meta > div { display: flex; gap: 16px; align-items: baseline; }
.event-meta__label { min-width: 110px; font-family: var(--font-display); font-size: var(--text-xs); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--sea); }
.event-meta__val { font-size: var(--text-base); color: var(--text-body); }

/* Event-Übersicht: klickbare Karten. */
.event-list { display: grid; gap: 22px; }
.event-row--link { transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease); }
.event-row--link:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.event-row--link .datechip { min-width: 150px; }

.footer__legal { display: flex; align-items: center; gap: 12px; }
.footer__sep { color: var(--border-hair); }
.footer__egg { text-decoration: none; color: inherit; }
.footer__egg:hover { color: inherit; }

@media (max-width: 768px) {
  .grass-layer { display: none; }
}

@media (max-width: 900px) {
  .grid-2, .stat-grid { grid-template-columns: 1fr; }
  .h-hero { font-size: 13vw; }
  .nav__links { gap: 18px; }
  .event-row { flex-direction: column; }
  .event-row__cta { padding: 0 40px 34px; }
  .event-head { gap: 18px; }
  .event-meta > div { flex-direction: column; gap: 2px; }
}