:root {
  --bg: oklch(0.965 0.02 75);
  --ink: oklch(0.22 0.02 250);
  --muted: oklch(0.4 0.02 250);
  --label: oklch(0.45 0.02 250);
  --blue-dark: #1B588F;
  --blue: #1D71B8;
  --green: #3AAA35;
  --lime: #95C11F;
  --error: oklch(0.55 0.19 28);
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Manrope', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
input::placeholder, textarea::placeholder { color: currentColor; opacity: .5; }
input, textarea, button { -webkit-appearance: none; appearance: none; }

/* ───────── Bühne ───────── */
.stage { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; }

.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i, .m-below i {
  position: absolute;
  width: var(--s); height: var(--s);
  background: var(--c);
  border-radius: calc(var(--s) / 6);
  transform: rotate(45deg);
  animation: bob var(--d) ease-in-out var(--delay) infinite;
}

.content {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 36px;
  padding: 56px 24px;
  text-align: center;
}

/* ───────── Logo ───────── */
.symbol { position: relative; display: block; width: 230px; height: 181px; }
.m-below { display: none; }
.wordmark { width: 340px; height: 67px; }
.symbol svg, .wordmark svg { display: block; width: 100%; height: 100%; overflow: visible; }

.sym-top, .sym-bot, .spin, .dot { transform-box: fill-box; transform-origin: center; }
.sym-top { animation: swingT 2.6s ease-in-out infinite; }
.sym-bot { animation: swingB 2.6s ease-in-out 1.3s infinite; }
.spin.s4 { animation: spin 4s linear infinite; }
.spin.s5 { animation: spin 5s linear infinite; }
.spin.s6 { animation: spin 6s linear infinite; }
.spin.rev { animation-direction: reverse; }
.dot { animation: hop 1.8s ease-in-out infinite; }

/* ───────── Text ───────── */
h1 {
  margin: 0;
  max-width: 900px;
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-wrap: balance;
}
.lead {
  margin: 0;
  max-width: 520px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}

/* ───────── Formular ───────── */
.signup { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 4px; }
.signup-form { display: flex; align-items: center; gap: 28px; }

.field { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.field-label { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--label); }
.field input {
  width: 360px; max-width: 100%;
  background: transparent;
  border: 0; border-bottom: 3px solid var(--blue-dark); border-radius: 0;
  outline: none;
  color: var(--blue-dark);
  font: inherit; font-size: 26px; font-weight: 700;
  padding: 0 0 6px;
  caret-color: var(--lime);
  transition: border-color .2s;
}
.field input:focus { border-bottom-color: var(--blue); }
.signup.has-error .field input { border-bottom-color: var(--error); }

.diamond {
  width: 52px; height: 52px; flex: none;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 8px;
  background: var(--blue);
  transform: rotate(45deg);
  cursor: pointer;
  transition: transform .35s cubic-bezier(.5, 1.6, .4, 1), background .2s;
}
.diamond span { display: block; transform: rotate(-45deg); color: #fff; font-size: 22px; font-weight: 700; line-height: 1; }
.diamond:hover, .diamond:focus-visible { transform: rotate(135deg); background: var(--green); }
.diamond:focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; }
.diamond[aria-busy="true"] { animation: spin45 1s linear infinite; background: var(--green); cursor: wait; pointer-events: none; }

.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.form-error { align-self: stretch; margin: 0; min-height: 1.4em; font-size: 15px; font-weight: 500; color: var(--error); text-align: left; }
.form-error:empty { visibility: hidden; }

.success {
  display: none;
  margin: 0;
  max-width: 560px;
  padding: 22px 0 6px;
  font-size: 26px; font-weight: 700; line-height: 1.25;
  color: var(--blue-dark);
  text-wrap: balance;
  animation: fadeUp .6s cubic-bezier(.2, .8, .2, 1) both;
}
.success.is-static { display: block; padding-top: 0; }
.signup[data-state="done"] .signup-form,
.signup[data-state="done"] .form-error { display: none; }
.signup[data-state="done"] .success { display: block; }

.fineprint { margin: 6px 0 0; font-family: var(--mono); font-size: 12px; color: var(--label); }
.fineprint a:hover { color: var(--blue); }

.button-link {
  display: inline-block;
  padding: 14px 24px;
  border-radius: 8px;
  background: var(--blue); color: #fff;
  text-decoration: none;
  border: 0; font: inherit; font-weight: 700; font-size: 16px; cursor: pointer;
  transition: background .2s;
}
.button-link:hover { background: var(--green); }

/* ───────── Animationen ───────── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes swingT { 0%, 100% { transform: rotate(-7deg) translate(3px, -3px); } 50% { transform: rotate(5deg); } }
@keyframes swingB { 0%, 100% { transform: rotate(-7deg) translate(-3px, 3px); } 50% { transform: rotate(5deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin45 { from { transform: rotate(45deg); } to { transform: rotate(405deg); } }
@keyframes hop { 0%, 55%, 100% { transform: translateY(0); } 25% { transform: translateY(-22px); } 40% { transform: translateY(2px); } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(45deg); } 50% { transform: translateY(-22px) rotate(135deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ───────── Responsive ───────── */
@media (max-height: 760px) and (min-width: 641px) {
  .content { gap: 26px; }
  .symbol { width: 190px; height: 150px; }
}

@media (max-width: 640px) {
  .content { gap: 26px; padding-left: 16px; padding-right: 16px; }
  .symbol { width: 150px; height: 118px; }
  .wordmark { width: 240px; height: 47px; }
  .lead { font-size: 17px; }
  .signup { width: 100%; }
  .signup-form { width: 100%; max-width: 420px; gap: 22px; }
  .form-error { align-self: center; width: 100%; max-width: 420px; }
  .field { flex: 1; min-width: 0; }
  .field input { width: 100%; font-size: 21px; }
  .diamond { width: 46px; height: 46px; margin-right: 6px; }
  .success { font-size: 22px; }
}

/* ───────── Konfetti auf kleinen Screens ─────────
   Die Desktop-Positionen (Prozent einer 1280×800-Fläche) würden auf schmalen Screens
   über Text und Formular liegen. Darum: 3 Rauten oben und eine Reihe unter dem Formular. */
@media (max-width: 900px) {
  .content { padding-top: 76px; padding-bottom: 72px; }
  .confetti i { display: none; }
  .m-below { display: block; position: relative; width: 100%; max-width: 420px; height: 64px; margin-top: 12px; pointer-events: none; }
  .confetti i:nth-child(-n+3) { display: block; width: var(--ms); height: var(--ms); border-radius: calc(var(--ms) / 6); }
  .confetti i:nth-child(1) { --ms: 22px; left: 7% !important;  top: 30px !important; }
  .confetti i:nth-child(2) { --ms: 12px; left: 38% !important; top: 22px !important; }
  .confetti i:nth-child(3) { --ms: 26px; left: 80% !important; top: 36px !important; }
}

/* Kontaktseite (Desktop): Seite ist höher und das Formular breiter –
   nur die Rauten am linken/rechten Rand behalten */
@media (min-width: 901px) {
  .compact .confetti i:is(:nth-child(2), :nth-child(5), :nth-child(7), :nth-child(8), :nth-child(13), :nth-child(14)) { display: none; }
}

/* ───────── Footer-Links ───────── */
.page-foot {
  position: absolute; left: 0; right: 0; bottom: 22px;
  display: flex; justify-content: center; gap: 10px;
  font-family: var(--mono); font-size: 13px; color: var(--label);
}
.page-foot a { text-decoration: none; }
.page-foot a:hover { color: var(--blue); text-decoration: underline; }

/* ───────── Kontaktseite ───────── */
.compact .content { gap: 28px; padding-top: 72px; padding-bottom: 80px; }
.compact .symbol { width: 150px; height: 118px; }
.compact .wordmark { width: 240px; height: 47px; }

.contact-form {
  width: 100%; max-width: 680px;
  display: flex; flex-direction: column; gap: 28px;
  margin-top: 4px;
  text-align: left;
}
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 32px; }
.span-2 { grid-column: 1 / -1; }

.cfield { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cfield input, .cfield textarea {
  width: 100%;
  background: transparent;
  border: 0; border-bottom: 3px solid var(--blue-dark); border-radius: 0;
  outline: none;
  color: var(--blue-dark);
  font: inherit; font-size: 20px; font-weight: 700;
  padding: 2px 0 6px;
  caret-color: var(--lime);
  transition: border-color .2s;
}
.cfield textarea { resize: vertical; min-height: 130px; line-height: 1.45; }
.cfield input:focus, .cfield textarea:focus { border-bottom-color: var(--blue); }
.cfield [aria-invalid="true"] { border-bottom-color: var(--error); }
.field-error { font-size: 14px; font-weight: 500; color: var(--error); }

.contact-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; }
.captcha { max-width: 340px; }
.captcha-q { font-size: 18px; font-weight: 700; color: var(--ink); }
.captcha input { width: 160px; }
.contact-bottom .diamond { margin: 0 8px 10px 0; }

.contact-alert { margin: 0; padding: 12px 14px; border-radius: 8px; background: oklch(0.95 0.03 28); color: var(--error); font-weight: 500; }
.contact-form .fineprint { margin: 0; }

@media (max-width: 640px) {
  .contact-grid { grid-template-columns: 1fr; gap: 22px; }
  .cfield input, .cfield textarea { font-size: 18px; }
  .page-foot { bottom: 16px; }
}