/* Establish — öffentliche Formular-Landingpages
   Dunkle Basis wie vor dem CI-Umbau; aus der CI bleiben Gold-Akzent
   (Buttons, Fokus) und die est.-Wortmarke. */
:root {
  --bg: #050506; --panel: #101014; --panel2: #15151b;
  --border: rgba(255,255,255,.09); --border2: rgba(255,255,255,.16);
  --text: #f5f5f7; --muted: #8e8e93; --muted2: #6e6e73;
  --accent: #D4AF37; --green: #30d158; --red: #ff453a;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { color-scheme: dark; }
body {
  background: radial-gradient(1200px 500px at 50% -100px, rgba(10,132,255,.10), transparent), var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh; display: flex; flex-direction: column; align-items: center;
  padding: 40px 16px 60px;
}
/* CI-Wortmarke: est. — klein, Bone White, Punkt in Gold. */
.brand {
  font-size: 24px; font-weight: 700; letter-spacing: -.02em;
  color: var(--text); margin-bottom: 28px; user-select: none;
}
.brand em { color: var(--accent); font-style: normal; }
.card {
  width: 100%; max-width: 560px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)), var(--panel);
  border: 1px solid var(--border); border-radius: 14px; padding: 30px 28px 26px;
}
h1 { font-size: 23px; font-weight: 700; letter-spacing: -.02em; }
.sub { color: var(--muted); font-size: 13.5px; margin-top: 7px; line-height: 1.55; }
form { margin-top: 24px; display: flex; flex-direction: column; gap: 18px; }
label.q { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; line-height: 1.45; }
label.q .req { color: var(--accent); }
input[type=text], input[type=email], input[type=number], input[type=date], textarea, select {
  width: 100%; background: var(--panel2); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font: inherit; font-size: 15px; padding: 12px 13px; outline: none;
  transition: border-color .15s;
}
input:focus, textarea:focus, select:focus { border-color: var(--accent); }
textarea { min-height: 96px; resize: vertical; }
.unit { position: relative; }
.unit input { padding-right: 38px; }
.unit::after { content: attr(data-unit); position: absolute; right: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 14px; pointer-events: none; }
.scale { display: flex; gap: 6px; flex-wrap: wrap; }
.scale button {
  flex: 1 0 34px; height: 40px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--panel2); color: var(--muted); font: inherit; font-size: 14px; cursor: pointer;
}
.scale button.on { background: var(--accent); border-color: var(--accent); color: #050506; font-weight: 700; }
.choices { display: flex; gap: 8px; flex-wrap: wrap; }
.choices button {
  padding: 10px 18px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--panel2); color: var(--text); font: inherit; font-size: 14px; cursor: pointer;
}
.choices button.on { background: var(--accent); border-color: var(--accent); color: #050506; font-weight: 600; }
.hp { position: absolute; left: -6000px; top: -6000px; }
.submit {
  margin-top: 8px; width: 100%; padding: 14px; border: none; border-radius: 6px;
  background: var(--accent); color: #050506; font: inherit; font-size: 15.5px; font-weight: 700;
  cursor: pointer; transition: filter .15s;
}
.submit:hover { filter: brightness(1.08); }
.submit:disabled { opacity: .55; cursor: default; }
.err { color: var(--red); font-size: 13px; display: none; }
.done { text-align: center; padding: 34px 6px 18px; display: none; }
.done .tick {
  width: 58px; height: 58px; border-radius: 50%; background: rgba(48,209,88,.14);
  color: var(--green); font-size: 28px; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px; border: 1px solid rgba(48,209,88,.35);
}
.done h2 { font-size: 19px; }
.done p { color: var(--muted); font-size: 13.5px; margin-top: 8px; }
.foot { color: var(--muted2); font-size: 11.5px; margin-top: 22px; text-align: center; line-height: 1.6; }

/* ===== Mobile ===== */
@media (max-width: 640px) {
  body { padding: 24px 12px 44px; }
  .brand { margin-bottom: 20px; }
  .card { padding: 22px 16px 20px; border-radius: 12px; }
  h1 { font-size: 20px; }
  /* 16px verhindert den iOS-Auto-Zoom beim Fokussieren. */
  input[type=text], input[type=email], input[type=number], input[type=date], textarea, select { font-size: 16px; }
}