/*
 * styles.css — globales Stylesheet für die Abitur-2007-Jubiläumsseite.
 *
 * Story 1.2: Design-Token-System & globales Layout.
 * Enthält das Token-Layer (DESIGN.md), die selbst-gehostete Schrift (Inter),
 * das mobile-first Single-Column-Layout, die Basis-Typografie und den
 * gold-Focus-Ring. KEINE Komponenten (Hero → 1.3, Eckdaten → 1.4,
 * Formular/Chips/Button → Epic 2).
 */

/* ============================================================
   Self-hosted font — Inter v4.1 (variable, Latin u. a.).
   Lokal aus assets/fonts/, KEIN CDN / kein Google Fonts.
   font-display:swap → Fallback-Stack sofort, dann Swap auf Inter.
   ============================================================ */
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   Design tokens (DESIGN.md, status: final) — single source of truth.
   ============================================================ */
:root {
  /* Colors */
  --bg-base: #0a0a0b;
  --bg-raised: #17171c;
  --bg-input: #202028;
  --ink-primary: #ffffff;
  --ink-secondary: #b6b6c0;
  --ink-disabled: #6b6b74;
  --gold: #c9a24b;
  --gold-bright: #e2c173;
  --gold-deep: #8c7330;
  --border-hairline: #2b2b33;
  --focus-ring: #e2c173;
  --danger: #e08a7b;

  /* Type scale (size + weight). Body never below 16px. */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --text-display-size: clamp(1.5625rem, 1.05rem + 2.3vw, 2.5rem); /* ~25px → ~40px */
  --text-display-weight: 700;
  --text-title-size: 1.375rem; /* 22px */
  --text-title-weight: 600;
  --text-heading-size: 1.125rem; /* 18px */
  --text-heading-weight: 600;
  --text-body-size: 1rem; /* 16px */
  --text-body-weight: 400;
  --text-meta-size: 0.8125rem; /* 13px */
  --text-meta-weight: 400;
  --text-meta-weight-strong: 500;

  /* Radii */
  --rounded-sm: 8px;
  --rounded-md: 14px;
  --rounded-pill: 999px;

  /* Spacing scale (4 / 8 / 12 / 16 / 24 / 32 / 48) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
}

/* ============================================================
   Reset & global base — mobile-first, no horizontal scroll.
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  overflow-x: hidden;
}

body {
  background: var(--bg-base);
  color: var(--ink-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   Layout shell — single centered column (max-width ~520px).
   Applies to the existing <main> element; no components here.
   ============================================================ */
main {
  display: block;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  min-height: 100dvh; /* radial reaches the viewport bottom (mockup parity); dvh avoids iOS URL-bar jumps */
  padding: var(--space-6) var(--space-4) var(--space-7); /* 32px 16px 48px */
  /* Subtle radial darkening behind the hero crest (DESIGN.md "Elevation & Depth").
     The one allowed radial — keeps the gold crest popping; static, not motion. */
  background: radial-gradient(120% 60% at 50% 0%, #15151b 0%, var(--bg-base) 55%);
}

/* ============================================================
   Element-level base typography (wired to the type scale).
   Components style themselves in later stories.
   ============================================================ */
h1 {
  font-size: var(--text-display-size);
  font-weight: var(--text-display-weight);
  line-height: 1.22;
  margin: 0 0 var(--space-4);
}

h2 {
  font-size: var(--text-title-size);
  font-weight: var(--text-title-weight);
  line-height: 1.3;
  margin: 0 0 var(--space-3);
}

h3 {
  font-size: var(--text-heading-size);
  font-weight: var(--text-heading-weight);
  line-height: 1.3;
  margin: 0 0 var(--space-2);
}

p {
  font-size: var(--text-body-size);
  margin: 0 0 var(--space-4);
}

a {
  color: var(--gold);
}

/* ============================================================
   Hero (Story 1.3) — gold crest → headline → intro line.
   Headline reuses the base h1/display style; here we only
   center and space it. No components beyond the hero band.
   ============================================================ */
.crest {
  display: block;
  margin: var(--space-2) auto 0;
  max-height: 150px;
  width: auto;
  height: auto; /* let max-height drive size; width/height attrs reserve aspect ratio (CLS) */
}

.hero-line {
  text-align: center;
  letter-spacing: 0.005em;
  margin: var(--space-5) var(--space-2) var(--space-2);
}

.hero-sub {
  text-align: center;
  color: var(--ink-secondary);
  margin: 0 var(--space-2) var(--space-6);
}

/* ============================================================
   Event facts (Story 1.4) — read-only bg-raised card with gold
   uppercase labels (Wo / Wann). Generic .card is reused by the
   form panel & confirmation card in later stories (DESIGN.md
   "rounded/md — the form panel and confirmation card").
   ============================================================ */
.card {
  background: var(--bg-raised);
  border: 1px solid var(--border-hairline);
  border-radius: var(--rounded-md);
  padding: var(--space-4); /* 16px */
  margin-bottom: var(--space-5); /* 24px — separates the facts band from the (future) form */
}

.facts > div {
  display: flex;
  gap: var(--space-3); /* 12px between label and value */
  padding: var(--space-1) 0; /* small vertical rhythm between rows */
}

.facts .lbl {
  flex-shrink: 0;
  min-width: 64px; /* aligns values to a common left edge */
  padding-top: 2px;
  color: var(--gold);
  font-size: var(--text-meta-size); /* ~13px meta caption */
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Long values (placeholder/address) wrap instead of forcing horizontal scroll at ~360px.
   Targets the value span specifically (second span) — a label-only row never gets it. */
.facts > div > span + span {
  overflow-wrap: anywhere;
}

/* ============================================================
   RSVP form (Story 2.1) — markup + styling only, no behavior.
   Reuses the generic .card panel. Chips are aria-pressed buttons;
   selected = [aria-pressed="true"]. The "Abschicken" button is the
   one glossy element allowed to shine (DESIGN.md "Elevation & Depth").
   ============================================================ */

/* Labels & group captions (meta ink). Single-page site → global label is safe. */
label {
  display: block;
  color: var(--ink-secondary);
  font-size: var(--text-meta-size);
  margin: var(--space-4) 0 var(--space-1);
}

.grouptitle {
  font-size: 15px; /* group title: a touch above meta, below body */
  font-weight: 600;
  color: var(--ink-primary);
  margin-bottom: var(--space-1);
}

.grouphint {
  color: var(--ink-secondary);
  font-size: var(--text-meta-size);
  margin: 0 0 var(--space-3);
}

/* Text inputs — bg-input fill, hairline, white ink, 16px (no iOS zoom). */
input[type="text"],
input[type="email"],
input[type="tel"] {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border-hairline);
  border-radius: var(--rounded-sm);
  color: var(--ink-primary);
  font-size: 16px;
  padding: 12px 13px;
  font-family: var(--font-sans);
}

input::placeholder {
  color: var(--ink-disabled);
}

/* Gold border on focus; the global gold :focus-visible ring also applies. */
input:focus {
  border-color: var(--gold);
}

/* Field groups — fieldset reset (no default border/legend quirks); min-width:0
   prevents fieldset's intrinsic min-width from breaking flex children. */
.group {
  margin-top: var(--space-5);
  border: 0;
  padding: 0;
  min-width: 0;
}

.group > legend.grouptitle {
  padding: 0;
}

/* Pill chips — default bg-input + hairline; selected = gold fill + dark ink.
   ≥44px tap target; keyboard-operable as native <button>. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip {
  min-height: 44px;
  border: 1px solid var(--border-hairline);
  border-radius: var(--rounded-pill);
  background: var(--bg-input);
  color: var(--ink-primary);
  font-size: 15px;
  font-family: var(--font-sans);
  padding: 10px 16px;
  cursor: pointer;
}

.chip[aria-pressed="true"] {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--bg-base);
  font-weight: 600;
}

/* The "kann an keinem" pill — distinct, full-width, dashed, set apart from dates. */
.chip-none {
  width: 100%;
  margin-top: var(--space-1);
  border-style: dashed;
  text-align: center;
}

/* Contact fields two-up where width allows. */
.row2 {
  display: flex;
  gap: var(--space-3);
}

.row2 > div {
  flex: 1;
  min-width: 0;
}

/* Honeypot — off-screen, not announced (aria-hidden), not focusable (tabindex -1). */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Turnstile mount — reserve height so the real widget (Story 2.7) doesn't shift layout. */
.cf-turnstile {
  margin-top: var(--space-5);
  min-height: 65px;
  /* Turnstile rendert ein ~300px breites iframe — mittig in der Karte ausrichten. */
  display: flex;
  justify-content: center;
}

/* Glossy metallic-gold primary button — the one element allowed to shine.
   Gradient/glow hex values are design constants from DESIGN.md "Elevation & Depth". */
.submit {
  width: 100%;
  min-height: 44px;
  margin-top: var(--space-5);
  padding: 15px;
  border: none;
  border-radius: var(--rounded-sm);
  color: #241c08; /* dark ink on gold (DESIGN.md) */
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background: linear-gradient(177deg, #f5e2a8 0%, #e2c173 24%, #c9a24b 62%, #a9863a 100%);
  box-shadow: 0 6px 22px rgba(201, 162, 75, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -2px 4px rgba(120, 90, 30, 0.45);
}

/* Diagonal sheen sweep (static — reduced-motion unaffected). */
.submit::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none; /* decorative overlay — never intercept clicks/selection */
  background: linear-gradient(
    110deg,
    transparent 35%,
    rgba(255, 255, 255, 0.55) 48%,
    transparent 60%
  );
  transform: translateX(-30%);
}

.submit:hover {
  box-shadow: 0 6px 30px rgba(226, 193, 115, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -2px 4px rgba(120, 90, 30, 0.45);
}

/* Focus ring legible on gold (resolves deferred 1.2 item): a white ring on the
   dark canvas reads where the global gold ring would be gold-on-gold. */
.submit:focus-visible {
  outline: 2px solid var(--ink-primary);
  outline-offset: 2px;
}

/* ============================================================
   RSVP form — interaction & validation states (Story 2.2).
   Friendly client-side errors (calm coral) + disabled date chips.
   Behavior lives in js/app.js; these are UX-only states (AD-5).
   ============================================================ */

/* Date chips disabled while "Ich kann leider an keinem Termin" is active. */
.chip:disabled {
  color: var(--ink-disabled);
  cursor: not-allowed;
  opacity: 0.55;
}

/* Validation message — calm coral, meta size, just below the control/group. */
.field-error {
  margin: var(--space-1) 0 0;
  color: var(--danger);
  font-size: var(--text-meta-size);
}

/* Invalid input border — calm coral, never fire-engine red (DESIGN.md). */
#rsvp input[aria-invalid="true"] {
  border-color: var(--danger);
}

/* ============================================================
   Submit & confirmation states (Story 2.4) — busy button,
   inline submit status/error (calm coral), in-place confirmation panel.
   ============================================================ */

/* Busy state during send — the gloss rests, no longer interactive. */
.submit:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Inline submit status/error above the button (transport/captcha). */
.submit-status {
  margin: var(--space-4) 0 0;
  color: var(--danger);
  font-size: var(--text-meta-size);
}

/* Confirmation panel — reuses .card; one warm gold accent on the thank-you. */
.confirm > h2 {
  color: var(--gold);
}

/* "Schon angemeldet"-Hinweis (Story 2.6) — weicher, NICHT-fehlerhafter Nudge
   oben am Formular; gold-Akzent statt danger, blockiert nichts. */
.rsvp-nudge {
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-raised);
  border-left: 3px solid var(--gold);
  border-radius: var(--rounded-sm);
  color: var(--ink-secondary);
  font-size: var(--text-meta-size);
}

/* PayPal-Button im Bestätigungs-Panel (Story 3.1) — exakt dieselbe glänzende
   Metallic-Gold-Optik wie der „Abschicken"-Submit (Verlauf/Glow/Sheen aus
   DESIGN.md "Elevation & Depth"). Im Panel ist der Submit ohnehin weg, daher
   kein Konkurrieren zweier Schimmer-Buttons. */
.paypal {
  display: block;
  margin: var(--space-2) 0 var(--space-5);
  padding: 15px;
  min-height: 44px;
  border: none;
  border-radius: var(--rounded-sm);
  color: #241c08; /* dark ink on gold (DESIGN.md) */
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  background: linear-gradient(177deg, #f5e2a8 0%, #e2c173 24%, #c9a24b 62%, #a9863a 100%);
  box-shadow: 0 6px 22px rgba(201, 162, 75, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -2px 4px rgba(120, 90, 30, 0.45);
}

/* Diagonaler Sheen-Sweep (statisch — reduced-motion bleibt unberührt), wie .submit. */
.paypal::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none; /* dekorative Overlay-Schicht — fängt nie Klicks ab */
  background: linear-gradient(
    110deg,
    transparent 35%,
    rgba(255, 255, 255, 0.55) 48%,
    transparent 60%
  );
  transform: translateX(-30%);
}

.paypal:hover {
  box-shadow: 0 6px 30px rgba(226, 193, 115, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -2px 4px rgba(120, 90, 30, 0.45);
}

/* Safety-Net: solange die Platzhalter-URL drinsteht, KEIN toter Geld-Link —
   Button bleibt ausgeblendet und erscheint automatisch, sobald Basti die echte
   PayPal-Pool-URL einträgt (organizer-supplied). */
.paypal[href*="PAYPAL_POOL_PLATZHALTER"] {
  display: none;
}

/* Sekundär-Button „Meine Angaben ändern" im Panel — bewusst zurückhaltend
   (Textlink-Optik), damit der Gold-PayPal-Button die primäre Aktion bleibt.
   44px Mindesthöhe = bequemes Touch-Ziel. */
.edit-link {
  display: inline-block;
  margin: 0;
  padding: 8px 0;
  min-height: 44px;
  background: none;
  border: none;
  color: var(--gold);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.edit-link:hover {
  color: var(--gold-bright);
}

.edit-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ============================================================
   Legal footer + legal pages (Impressum/Datenschutz, Story 3.2/3.3).
   ============================================================ */
.footer {
  margin-top: var(--space-7);
  padding: var(--space-5) 0;
  text-align: center;
  color: var(--ink-secondary);
  font-size: var(--text-meta-size);
}

.footer a {
  color: var(--gold);
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

/* Legal pages reuse .card; document-like, lesbarer Fließtext. */
.legal h1 {
  font-size: var(--text-title-size);
}

.legal h2 {
  font-size: var(--text-heading-size);
  margin-top: var(--space-5);
}

.legal address {
  font-style: normal;
  color: var(--ink-secondary);
}

/* Lange echte Werte (E-Mail/URL/Anschrift) umbrechen statt bei 360px abzuschneiden. */
.legal {
  overflow-wrap: anywhere;
}

/* Inline-Links in Rechtstext: Nicht-Farb-Affordance (WCAG 1.4.1). */
.legal a {
  color: var(--gold);
  text-decoration: underline;
}

.legal ul {
  color: var(--ink-secondary);
  padding-left: var(--space-5);
}

/* Pre-Submit-Datenhinweis im Formular (Story 3.3) — dezent, nicht alarmierend. */
.form-privacy-note {
  margin: var(--space-4) 0 0;
  color: var(--ink-secondary);
  font-size: var(--text-meta-size);
}

.form-privacy-note a {
  color: var(--gold);
  text-decoration: underline; /* Nicht-Farb-Affordance (WCAG 1.4.1) */
}

/* Fokus-Ring auf Gold lesbar (weiß, nicht gold-auf-gold) — analog .submit. */
.paypal:focus-visible {
  outline: 2px solid var(--ink-primary);
  outline-offset: 2px;
}

/* ============================================================
   Focus ring — visible gold indicator on keyboard focus
   for every focusable element (AC #3, Accessibility Floor).
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--rounded-sm);
}

/* ============================================================
   Respect reduced-motion (Accessibility Floor): states instant.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}