/* =============================================================
   OriSela — Coming Soon
   Design system + components. Dark theme locked (brand requirement).
   ============================================================= */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Satoshi';
  src: url('../assets/fonts/satoshi-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../assets/fonts/satoshi-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../assets/fonts/satoshi-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../assets/fonts/satoshi-900.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* surfaces (warm near-black) */
  --bg:        #0a0705;
  --bg-elev:   #0e0a07;
  --surface:   #14100b;
  --surface-2: #1b150d;

  /* hairlines / lines (warm) */
  --hair:      rgba(255, 231, 201, 0.08);
  --hair-2:    rgba(255, 231, 201, 0.14);

  /* type */
  --text:      #f3ede3;
  --text-2:    #cabfad;
  --muted:     #8f8676;

  /* brand accent (sun orange) */
  --accent:    #f2a85c;
  --accent-2:  #e57f36;
  --accent-3:  #ffce93;
  --ink:       #180f04;   /* text on accent */
  --glow:      242, 168, 92;

  /* radii — buttons: pill · cards: 20 · inputs: 14 */
  --r-card:  20px;
  --r-input: 14px;

  /* type family */
  --font: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* motion */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* layout */
  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  /* Scales with viewport WIDTH, not height: the sections carry no dividers or
     alternating backgrounds, so this gap is the only separator between them.
     The 4rem base keeps tablet widths from collapsing to a tight gap. */
  --section-pad: clamp(5rem, 4rem + 6vw, 11rem);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font);
  font-weight: 500;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100dvh;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea { font: inherit; }

::selection { background: rgba(var(--glow), 0.28); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: fixed; top: 0; left: 50%; transform: translate(-50%, -120%);
  z-index: 100; padding: 0.7rem 1.2rem; border-radius: 0 0 12px 12px;
  background: var(--accent); color: var(--ink); font-weight: 700;
  transition: transform 0.25s var(--ease-out);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

/* ---------- Ambient grain + vignette (fixed, non-interactive) ---------- */
.fx-grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(var(--glow), 0.10), transparent 55%),
    radial-gradient(100% 100% at 50% 120%, rgba(0,0,0,0.55), transparent 60%);
  mix-blend-mode: screen;
  opacity: 0.9;
}
.fx-grain::after {
  content: ""; position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.028; mix-blend-mode: overlay;
}

/* =============================================================
   HEADER
   ============================================================= */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  height: 72px;
  display: flex; align-items: center;
  transition: background 0.4s var(--ease-out), backdrop-filter 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: rgba(10, 7, 5, 0.62);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  border-bottom-color: var(--hair);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand { display: inline-flex; align-items: center; }
.brand__img {
  height: 30px; width: auto;
  filter: drop-shadow(0 2px 14px rgba(var(--glow), 0.18));
  transition: transform 0.5s var(--ease-out), filter 0.5s var(--ease-out);
}
.brand:hover .brand__img { transform: translateY(-1px); filter: drop-shadow(0 3px 20px rgba(var(--glow), 0.32)); }

/* =============================================================
   BUTTONS
   ============================================================= */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  font-weight: 700; font-size: 0.98rem; letter-spacing: -0.01em;
  white-space: nowrap;
  will-change: transform;
  transition: transform 0.5s var(--ease-spring), background 0.4s var(--ease-out), color 0.4s var(--ease-out), box-shadow 0.5s var(--ease-out), border-color 0.4s var(--ease-out);
}
.btn__label { position: relative; z-index: 2; }
.btn .icon--sm { position: relative; z-index: 2; transition: transform 0.5s var(--ease-spring); }

/* ghost (header) */
.btn--ghost {
  color: var(--text);
  border: 1px solid var(--hair-2);
  background: rgba(255, 231, 201, 0.02);
}
.btn--ghost::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(120% 160% at 50% 0%, rgba(var(--glow), 0.22), transparent 70%);
  opacity: 0; transition: opacity 0.45s var(--ease-out);
}
.btn--ghost:hover {
  border-color: rgba(var(--glow), 0.5);
  box-shadow: 0 10px 30px -12px rgba(var(--glow), 0.4);
}
.btn--ghost:hover::before { opacity: 1; }
.btn--ghost:active { transform: scale(0.97); }

/* primary (accent pill) */
.btn--primary {
  color: var(--ink);
  background: linear-gradient(180deg, var(--accent-3), var(--accent));
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 14px 34px -14px rgba(var(--glow), 0.75),
    0 2px 10px -4px rgba(0,0,0,0.5);
  padding-inline: 1.9rem;
}
.btn--primary::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.35), transparent 45%);
  opacity: 0.6; transition: opacity 0.4s var(--ease-out);
}
.btn--primary:hover {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 20px 46px -14px rgba(var(--glow), 0.95),
    0 3px 14px -4px rgba(0,0,0,0.55);
}
.btn--primary:hover .icon--sm { transform: translate(3px, -3px) rotate(6deg); }
.btn--primary:active { transform: scale(0.97); }

/* text link button */
.btn--text {
  padding: 0.4rem 0; color: var(--accent);
  font-size: 1.02rem;
}
.btn--text .icon--sm { transition: transform 0.5s var(--ease-spring); }
.btn--text:hover .icon--sm { transform: translate(3px, -3px); }
.btn--text::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}
.btn--text:hover::after { transform: scaleX(1); }

.icon { width: 24px; height: 24px; display: block; }
.icon--sm { width: 18px; height: 18px; }

/* =============================================================
   HERO / SUN
   ============================================================= */
.hero {
  position: relative; z-index: 2;
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(1rem, 3vh, 2.4rem);
  padding: calc(72px + 3vh) var(--gutter) clamp(3rem, 7vh, 6rem);
  text-align: center;
}

.hero__stage {
  position: relative;
  width: min(92vw, 640px);
  display: flex; justify-content: center;
  will-change: transform;
}

.sun {
  position: relative;
  width: 100%;
  aspect-ratio: 1126 / 640;
  display: flex; align-items: flex-end; justify-content: center;
}

.sun__img {
  position: relative; z-index: 3;
  width: 100%; height: auto;
  filter: drop-shadow(0 0 22px rgba(var(--glow), 0.52)) drop-shadow(0 0 62px rgba(var(--glow), 0.34));
  animation: sunBreath 8.5s ease-in-out infinite;
  will-change: transform, filter;
}

/* glows behind the sun */
.sun__glow {
  position: absolute; z-index: 1; left: 50%; bottom: 4%;
  translate: -50% 0;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
}
/* Outermost diffuse aura: the slowest, softest layer. Its long, coprime period
   (17s) against the far (11s) and near (7.3s) layers means the three peaks
   almost never realign, so the summed light reads as continuous, non-repeating
   radiation rather than one looping pulse. */
.sun__glow--aura {
  width: 220%; height: 188%;
  background: radial-gradient(circle at 50% 60%, rgba(var(--glow), 0.22) 0%, rgba(229, 127, 54, 0.11) 34%, transparent 66%);
  filter: blur(44px);
  animation: sunGlowAura 17s ease-in-out infinite;
}
.sun__glow--far {
  width: 200%; height: 172%;
  background: radial-gradient(circle at 50% 62%, rgba(var(--glow), 0.50) 0%, rgba(229, 127, 54, 0.25) 28%, transparent 60%);
  filter: blur(28px);
  animation: sunGlowFar 11s ease-in-out infinite;
}
.sun__glow--near {
  width: 123%; height: 104%;
  background: radial-gradient(circle at 50% 70%, rgba(255, 206, 147, 0.64) 0%, rgba(var(--glow), 0.35) 34%, transparent 62%);
  filter: blur(15px);
  animation: sunGlowNear 7.3s ease-in-out infinite;
}
.sun__core {
  position: absolute; z-index: 2; left: 50%; bottom: 6%;
  translate: -50% 0;
  width: 46%; height: 34%;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 236, 209, 0.9) 0%, rgba(255, 206, 147, 0.5) 30%, transparent 68%);
  filter: blur(10px);
  mix-blend-mode: screen;
  animation: coreFlicker 5s ease-in-out infinite;
  pointer-events: none;
}

/* reflection below the horizon */
.sun__reflection {
  position: absolute; z-index: 2; top: 100%; left: 0;
  width: 100%; height: 100%;
  transform: scaleY(-1);
  transform-origin: top;
  opacity: 0.24;
  filter: blur(3px);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.35) 32%, transparent 72%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.35) 32%, transparent 72%);
  animation: reflectionShimmer 7.5s ease-in-out infinite;
  pointer-events: none;
}
.sun__reflection img {
  width: 100%; height: auto;
  filter: drop-shadow(0 0 20px rgba(var(--glow), 0.35));
}
/* Flimmernde Partikel rund um die Sonne.
   Field is inset negatively so sparks can sit well outside the arc's bounding
   box, out past the ray tips. Each spark carries its own
   --x/--y/--s/--d/--delay and drift vector from the markup, so no two share a
   rhythm. Flicker owns `transform: scale()`, drift owns the `translate`
   *property* — same split as the reveal/tilt pair, so the two never collide.
   Placement is polar, not a grid — see the Gotchas note in CLAUDE.md before
   moving any of them. */
.sun__sparks {
  position: absolute; z-index: 2; inset: -16% -6% 0;
  pointer-events: none;
}
.spark {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--s); height: var(--s);
  margin: calc(var(--s) / -2);
  border-radius: 50%;
  /* Same colour world as the glow, but deliberately dim: these are embers in
     the haze around the sun, not stars. Warm centre, brand glow, gone.
     Brightness is the product of this core alpha and sparkTwinkle's peak
     (0.78 * 0.60 = 0.47, about half the original). Judge any change to either
     against that product, not the one number. */
  background: radial-gradient(circle,
    rgba(255, 236, 209, 0.78) 0%,
    rgba(var(--glow), 0.5) 45%,
    rgba(var(--glow), 0) 76%);
  opacity: 0;
  mix-blend-mode: screen;
  will-change: transform, translate, opacity;
  animation:
    sparkTwinkle var(--d) ease-in-out var(--delay) infinite,
    sparkDrift calc(var(--d) * 3.7) ease-in-out var(--delay) infinite;
}

.sun__floor {
  position: absolute; z-index: 1; top: 100%; left: 50%;
  translate: -50% 0;
  width: 150%; height: 60%;
  background: radial-gradient(ellipse at 50% 0%, rgba(var(--glow), 0.16), transparent 60%);
  filter: blur(20px); mix-blend-mode: screen; pointer-events: none;
  animation: glowPulse 8s ease-in-out infinite;
}

/* hero copy */
.hero__copy { position: relative; z-index: 5; max-width: 40rem; }
.hero__title {
  font-weight: 900;
  font-size: clamp(1.9rem, 5.2vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  min-height: 1.12em;
  text-wrap: balance;
}
.tw { color: var(--text); }
.caret {
  display: inline-block; width: 0.06em; height: 0.92em;
  margin-left: 0.06em; vertical-align: -0.08em;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(var(--glow), 0.8);
  animation: caretBlink 1.05s steps(1) infinite;
}
.caret.is-hidden { opacity: 0; animation: none; }
.hero__sub {
  margin-top: clamp(0.9rem, 2vh, 1.5rem);
  color: var(--text-2);
  font-size: clamp(1.02rem, 1.6vw, 1.28rem);
  font-weight: 500;
}

/* =============================================================
   INSTAGRAM
   ============================================================= */
.ig {
  position: relative; z-index: 2;
  padding-block: var(--section-pad);
}
.ig__inner {
  max-width: 940px;
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; justify-content: center;
  gap: clamp(2rem, 5vw, 3.75rem);
}
.ig__title {
  font-weight: 900;
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  line-height: 1.02; letter-spacing: -0.03em;
  text-wrap: balance;
}
.ig__lead {
  margin-top: 1.4rem; max-width: 34ch;
  color: var(--text-2); font-size: clamp(1.02rem, 1.5vw, 1.2rem);
}
/* animated badge */
.ig__badge {
  position: relative; justify-self: center;
  display: flex; flex-direction: column; align-items: center;
  gap: 1.1rem;
  color: var(--accent);
}
.ig__tile {
  position: relative;
  display: grid; place-items: center;
  width: clamp(113px, 15vw, 165px); aspect-ratio: 1;
  border-radius: 30%;
}
.ig__glyph {
  position: relative; z-index: 3;
  display: grid; place-items: center;
  width: 100%; height: 100%;
  border-radius: 30%;
  /* Official Instagram brand gradient (radial from the lower-left corner). */
  background:
    radial-gradient(120% 120% at 30% 107%, #fdf497 0%, #fdf497 6%, #fd5949 40%, #d6249f 62%, #4f5bd5 92%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.32),
    0 18px 44px -20px rgba(214, 36, 159, 0.55),
    0 30px 60px -30px rgba(0,0,0,0.8);
  transition: transform 0.6s var(--ease-spring), box-shadow 0.6s var(--ease-out), border-color 0.6s var(--ease-out);
}
.ig__glyph svg { width: 52%; height: 52%; fill: #fff; filter: drop-shadow(0 2px 5px rgba(24, 15, 4, 0.3)); }
.ig__orbit {
  position: absolute; z-index: 2; inset: -6%;
  border-radius: 32%;
  background: conic-gradient(from 0deg, transparent 0 62%, rgba(var(--glow), 0.55) 78%, rgba(255,206,147,0.9) 85%, transparent 92%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: orbit 6s linear infinite;
  opacity: 0.9;
}
.ig__badge:hover .ig__glyph {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.42),
    0 26px 56px -20px rgba(214, 36, 159, 0.7),
    0 40px 72px -28px rgba(0,0,0,0.6);
}
.ig__label {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.45rem;
  color: var(--accent); font-size: 1.02rem;
}
.ig__label .icon--sm { transition: transform 0.5s var(--ease-spring); }
.ig__badge:hover .ig__label .icon--sm { transform: translate(3px, -3px); }
.ig__label::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}
.ig__badge:hover .ig__label::after { transform: scaleX(1); }

/* =============================================================
   UNSERE IDEE
   ============================================================= */
.idee {
  position: relative; z-index: 2;
  padding-block: var(--section-pad);
  border-top: 1px solid var(--hair);
}
.idee__head { max-width: 46rem; margin-inline: auto; text-align: center; }
.eyebrow {
  font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--muted);
}
.eyebrow--accent { color: var(--accent); }
.idee__title {
  margin-top: 1.1rem;
  font-weight: 900; font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.04; letter-spacing: -0.03em;
  text-wrap: balance;
}
.idee__lead {
  margin-top: 1.4rem; color: var(--text-2);
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
}
.idee__lead + .idee__lead { margin-top: 0.9rem; }

.cards {
  margin-top: clamp(3rem, 6vh, 5rem);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
}
.card {
  position: relative;
  padding: clamp(1.6rem, 2.4vw, 2.2rem);
  border-radius: var(--r-card);
  background: linear-gradient(165deg, var(--surface-2), var(--surface));
  border: 1px solid var(--hair);
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  box-shadow: 0 24px 50px -34px rgba(0,0,0,0.8);
}
.card__glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 0.5s var(--ease-out);
  background: radial-gradient(180px 180px at var(--mx, 50%) var(--my, 0%), rgba(var(--glow), 0.16), transparent 70%);
}
.card:hover { border-color: rgba(var(--glow), 0.28); }
.card:hover .card__glow { opacity: 1; }
.card > * { position: relative; z-index: 1; transform: translateZ(24px); }
.card__glow { transform: none; }
.card__icon {
  display: grid; place-items: center;
  width: 52px; height: 52px; margin-bottom: 1.3rem;
  border-radius: 14px;
  color: var(--accent);
  background: radial-gradient(120% 120% at 30% 20%, rgba(var(--glow), 0.18), rgba(var(--glow), 0.04));
  border: 1px solid rgba(var(--glow), 0.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.card__icon .icon { filter: drop-shadow(0 0 10px rgba(var(--glow), 0.45)); }
.card__title {
  font-weight: 700; font-size: 1.22rem; letter-spacing: -0.01em;
}
.card__text { margin-top: 0.55rem; color: var(--muted); font-size: 1rem; }

/* =============================================================
   KONTAKT
   ============================================================= */
.kontakt {
  position: relative; z-index: 2; overflow: hidden;
  padding-block: var(--section-pad);
  border-top: 1px solid var(--hair);
  text-align: center;
}
.kontakt__aura {
  position: absolute; z-index: 0; left: 50%; top: 8%;
  translate: -50% 0;
  width: min(120vw, 1000px); aspect-ratio: 2 / 1;
  background: radial-gradient(ellipse at 50% 0%, rgba(var(--glow), 0.16), transparent 62%);
  filter: blur(30px); mix-blend-mode: screen; pointer-events: none;
  animation: glowPulse 10s ease-in-out infinite;
}
.kontakt__inner { position: relative; z-index: 1; }
.kontakt__head { max-width: 40rem; margin-inline: auto; }
.kontakt__title {
  margin-top: 1.1rem;
  font-weight: 900; font-size: clamp(2.1rem, 5vw, 3.8rem);
  line-height: 1.04; letter-spacing: -0.03em;
  text-wrap: balance;
}
.kontakt__lead {
  margin-top: 1.2rem; color: var(--text-2);
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
}

.form {
  margin: clamp(2.6rem, 5vh, 4rem) auto 0;
  max-width: 620px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.1rem; text-align: left;
}
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field--full { grid-column: 1 / -1; }
.field__label {
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--text-2);
}
.field__input {
  width: 100%;
  padding: 0.95rem 1.1rem;
  color: var(--text);
  background: rgba(255, 231, 201, 0.02);
  border: 1px solid var(--hair-2);
  border-radius: var(--r-input);
  transition: border-color 0.4s var(--ease-out), box-shadow 0.5s var(--ease-out), background 0.4s var(--ease-out), transform 0.5s var(--ease-spring);
}
.field__input::placeholder { color: var(--muted); }
.field__input:hover { border-color: rgba(var(--glow), 0.3); }
.field__input:focus {
  outline: none;
  border-color: rgba(var(--glow), 0.65);
  background: rgba(255, 231, 201, 0.04);
  box-shadow: 0 0 0 4px rgba(var(--glow), 0.12), 0 12px 30px -18px rgba(var(--glow), 0.6);
  transform: translateY(-1px);
}
.field__input--area { resize: vertical; min-height: 128px; }

.form__foot {
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  margin-top: 0.3rem;
}
.form__status {
  color: var(--text-2); font-size: 0.95rem; min-height: 1.2em;
}
.form__status.is-ok { color: var(--accent); }
.form__status.is-err { color: #ff8f6b; }

/* =============================================================
   FOOTER
   ============================================================= */
.site-footer {
  position: relative; z-index: 2;
  padding-block: clamp(2.5rem, 5vh, 3.5rem);
  border-top: 1px solid var(--hair);
}
.site-footer__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem 2rem; flex-wrap: wrap;
}
.site-footer__brand img {
  height: 26px; width: auto; opacity: 0.9;
  filter: drop-shadow(0 2px 12px rgba(var(--glow), 0.14));
  transition: opacity 0.4s var(--ease-out);
}
.site-footer__brand:hover img { opacity: 1; }
.site-footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 1.8rem; }
.site-footer__nav a {
  color: var(--text-2); font-weight: 500; font-size: 0.98rem;
  position: relative; transition: color 0.3s var(--ease-out);
}
.site-footer__nav a::after {
  content: ""; position: absolute; left: 0; bottom: -3px; height: 1px; width: 100%;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s var(--ease-out);
}
.site-footer__nav a:hover { color: var(--text); }
.site-footer__nav a:hover::after { transform: scaleX(1); }
.site-footer__copy { color: var(--muted); font-size: 0.9rem; }

/* =============================================================
   LEGAL PAGES (Impressum · Datenschutz)
   Same tokens / header / footer as the landing page.
   ============================================================= */
.legal {
  position: relative; z-index: 2; overflow: hidden;
  padding-top: calc(72px + clamp(3rem, 9vh, 6.5rem));
  padding-bottom: var(--section-pad);
}
.legal__aura {
  position: absolute; z-index: 0; left: 50%; top: -6%;
  translate: -50% 0;
  width: min(120vw, 1000px); aspect-ratio: 2 / 1;
  background: radial-gradient(ellipse at 50% 0%, rgba(var(--glow), 0.16), transparent 62%);
  filter: blur(30px); mix-blend-mode: screen; pointer-events: none;
  animation: glowPulse 10s ease-in-out infinite;
}
.legal__inner { position: relative; z-index: 1; }
.legal__head { max-width: 760px; margin-inline: auto; text-align: center; }
.legal__title {
  margin-top: 1rem;
  font-weight: 900; font-size: clamp(2.1rem, 5vw, 3.6rem);
  line-height: 1.05; letter-spacing: -0.03em;
  text-wrap: balance;
}
.legal__meta { margin-top: 1.1rem; color: var(--muted); font-size: 0.95rem; }

.legal__body {
  max-width: 760px; margin: clamp(2.6rem, 6vh, 4rem) auto 0;
}
.legal__body > * + * { margin-top: 1rem; }
.legal__body h2 {
  margin-top: 2.8rem;
  font-weight: 700; font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  letter-spacing: -0.01em; color: var(--text);
}
.legal__body h2:first-child { margin-top: 0; }
.legal__body h3 {
  margin-top: 1.7rem;
  font-weight: 700; font-size: 1.08rem; color: var(--text);
}
.legal__body p,
.legal__body li { color: var(--text-2); }
.legal__body strong { color: var(--text); font-weight: 700; }
.legal__body a { color: var(--accent); position: relative; }
.legal__body a:hover { text-decoration: underline; text-underline-offset: 3px; }
.legal__body ul { margin-top: 1rem; padding-left: 1.2rem; display: grid; gap: 0.5rem; }
.legal__body li { padding-left: 0.2rem; }
.legal__body li::marker { color: var(--accent); }
.legal__body address {
  font-style: normal; color: var(--text-2);
  padding: 1.1rem 1.3rem; margin-top: 1rem;
  border: 1px solid var(--hair); border-radius: var(--r-input);
  background: rgba(255, 231, 201, 0.02);
}
.legal__body .legal__note {
  margin-top: 2.4rem; padding: 1rem 1.2rem;
  border: 1px solid var(--hair-2); border-left: 3px solid rgba(var(--glow), 0.55);
  border-radius: var(--r-input);
  background: rgba(255, 231, 201, 0.02);
  color: var(--muted); font-size: 0.92rem;
}
.legal__back { margin-top: 3rem; }

/* =============================================================
   SCROLL REVEAL
   ============================================================= */
/* Hidden state only applies once JS has flagged support (.js-reveal on <html>).
   Without JS the content stays fully visible — never a blank page. */
/* Reveal uses the `translate` property (not `transform`) + opacity, so the
   per-item transition-delay never leaks onto the JS-driven `transform` that
   powers the card tilt. Without this split the delayed cards (middle/right)
   ran their tilt through a delayed transform-transition and visibly stuttered
   while the first card (0 delay) stayed smooth. */
.js-reveal [data-reveal] {
  opacity: 0; translate: 0 26px;
  transition: opacity 0.85s var(--ease-out), translate 0.95s var(--ease-out);
  transition-delay: calc(var(--reveal-delay, 0) * 90ms);
}
.js-reveal [data-reveal].is-visible { opacity: 1; translate: 0 0; }

/* =============================================================
   KEYFRAMES
   ============================================================= */
@keyframes sunBreath {
  0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 22px rgba(var(--glow), 0.50)) drop-shadow(0 0 60px rgba(var(--glow), 0.32)); }
  50%      { transform: translateY(-1.2%) scale(1.014); filter: drop-shadow(0 0 32px rgba(var(--glow), 0.72)) drop-shadow(0 0 90px rgba(var(--glow), 0.48)); }
}
/* Horizontal centering comes from the `translate: -50% 0` property on the
   element; this animation only drifts vertically + scales, so the two never
   stack into a double horizontal shift. */
@keyframes glowPulse {
  0%, 100% { opacity: 0.72; transform: translateY(0) scale(1); }
  50%      { opacity: 1;    transform: translateY(-1.5%) scale(1.06); }
}
/* Sun glow layers: two out-of-sync pulses (far = slow swell, near = restless
   flicker) so the light reads as living, not a single even breath. Extra
   keyframe stops break the symmetry; scaleX runs a touch ahead of scaleY so the
   light spreads sideways. Horizontal centering stays on the `translate` property
   — never add a horizontal translate here (see .sun__glow note above). */
@keyframes sunGlowAura {
  0%   { opacity: 0.46; transform: translateY(0)     scale(1,     1);    }
  21%  { opacity: 0.63; transform: translateY(-0.4%) scale(1.042, 1.018); }
  34%  { opacity: 0.80; transform: translateY(-0.8%) scale(1.082, 1.038); }
  49%  { opacity: 0.67; transform: translateY(-0.5%) scale(1.048, 1.026); }
  63%  { opacity: 0.86; transform: translateY(-1%)   scale(1.09,  1.042); }
  78%  { opacity: 0.58; transform: translateY(-0.3%) scale(1.03,  1.016); }
  100% { opacity: 0.46; transform: translateY(0)     scale(1,     1);    }
}
@keyframes sunGlowFar {
  0%   { opacity: 0.58; transform: translateY(0)     scale(1,     1);    }
  13%  { opacity: 0.79; transform: translateY(-0.5%) scale(1.048, 1.024); }
  27%  { opacity: 0.68; transform: translateY(-0.3%) scale(1.026, 1.014); }
  41%  { opacity: 1;    transform: translateY(-2%)   scale(1.145, 1.078); }
  53%  { opacity: 0.83; transform: translateY(-1%)   scale(1.062, 1.04); }
  67%  { opacity: 0.95; transform: translateY(-1.6%) scale(1.108, 1.06); }
  84%  { opacity: 0.71; transform: translateY(-0.5%) scale(1.04,  1.022); }
  100% { opacity: 0.58; transform: translateY(0)     scale(1,     1);    }
}
@keyframes sunGlowNear {
  0%   { opacity: 0.68; transform: translateY(0)     scale(1,     1);    }
  11%  { opacity: 0.88; transform: translateY(-1.2%) scale(1.055, 1.03); }
  26%  { opacity: 1;    transform: translateY(-2.4%) scale(1.12,  1.058); }
  37%  { opacity: 0.76; transform: translateY(-0.8%) scale(1.022, 1.012); }
  50%  { opacity: 0.93; transform: translateY(-1.7%) scale(1.078, 1.042); }
  63%  { opacity: 1;    transform: translateY(-2.9%) scale(1.128, 1.068); }
  74%  { opacity: 0.81; transform: translateY(-1%)   scale(1.036, 1.02); }
  88%  { opacity: 0.9;  transform: translateY(-1.5%) scale(1.062, 1.034); }
  100% { opacity: 0.68; transform: translateY(0)     scale(1,     1);    }
}
/* Uneven stops on purpose: a spark should catch and fade, not blink on a metronome.
   Drift runs on a much longer, non-multiple period than the flicker, so a spark
   is rarely at the same brightness in the same place twice. */
@keyframes sparkTwinkle {
  0%,  100% { opacity: 0;    transform: scale(0.6); }
  14%       { opacity: 0.2;  transform: scale(0.9); }
  31%       { opacity: 0.6;  transform: scale(1.12); }
  44%       { opacity: 0.3;  transform: scale(0.95); }
  58%       { opacity: 0.53; transform: scale(1.06); }
  76%       { opacity: 0.14; transform: scale(0.8); }
}
@keyframes sparkDrift {
  0%,  100% { translate: 0 0; }
  33%       { translate: var(--dx) var(--dy); }
  66%       { translate: calc(var(--dx) * -0.6) calc(var(--dy) * -0.8); }
}
@keyframes coreFlicker {
  0%, 100% { opacity: 0.78; transform: scale(1); }
  30%      { opacity: 1;    transform: scale(1.05); }
  52%      { opacity: 0.86; transform: scale(1.01); }
  74%      { opacity: 1;    transform: scale(1.04); }
}
@keyframes reflectionShimmer {
  0%, 100% { opacity: 0.22; filter: blur(3px); }
  50%      { opacity: 0.3;  filter: blur(4.5px); }
}
@keyframes caretBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes orbit {
  to { transform: rotate(360deg); }
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 900px) {
  .ig__inner { grid-template-columns: 1fr; text-align: center; gap: 3rem; }
  .ig__lead { margin-inline: auto; }
  .ig__badge { grid-row: 1; }
}

@media (max-width: 680px) {
  .site-header { height: 62px; }
  .brand__img { height: 26px; }
  .cards { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .hero__stage { width: min(96vw, 460px); }
  /* The line above leaves only ~2vw beside the sun, so the sparks' negative
     horizontal inset would push the outermost ones off-screen (body's
     overflow-x: hidden would silently eat them). Positive inset instead: the
     field squeezes inward and every spark stays visible. */
  .sun__sparks { inset: -16% 4% 0; }
}

@media (max-width: 400px) {
  .btn { padding-inline: 1.2rem; }
}

/* =============================================================
   REDUCED MOTION
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; translate: none !important; }
  .caret { display: none; }
  .sun__img { animation: none; }
}