/* Creator-Hub für SO CLOSE.
   Eine Datei, keine Frameworks, keine fremden Schriften, keine Tracker.

   Gestaltung nach DESIGN(2).md (Hellotime): monochrom, weiße Fläche,
   Haarlinien statt Schatten, Hierarchie über Schriftgewicht statt Farbe.
   Das Blau erscheint ausschließlich als Verlauf auf einzelnen Wörtern in
   Überschriften — nie als Fläche, nie als Knopf. Charcoal ist die einzige
   gefüllte Aktion je Abschnitt; alles andere ist Umriss.

   Radien: Karten 16px, Knöpfe und Navigation 8px, Eingaben 12px,
   Pillen 9999px. Über 20px geht nichts. */

:root {
  --ink: #151619;
  --smoke: #7f8491;
  --fog: #c8cad0;
  --ash: #e1e2e5;
  --mist: #f3f3f5;
  --paper: #ffffff;
  --charcoal: #25272d;
  --graphite: #363940;
  --pewter: #b0b3bb;
  --green: #059669;

  --accent-gradient: linear-gradient(90deg, #0560fd 0%, #3a8dff 50%, #c3d9ff 100%);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* --- Navigation ---------------------------------------------------------- */

.nav {
  position: sticky; top: 0; z-index: 10;
  background: var(--paper); border-bottom: 1px solid var(--fog);
  padding: 8px 0;
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav-brand { display: flex; align-items: center; gap: 8px; }
.nav-brand img { height: 22px; width: auto; }
.nav-links { display: flex; gap: 32px; }
.nav-links a {
  color: var(--graphite); font-size: 14px; font-weight: 500; text-decoration: none;
}
.nav-links a:hover { color: var(--ink); }

/* --- Knöpfe -------------------------------------------------------------- */

.btn {
  display: inline-block; text-decoration: none; cursor: pointer;
  font-family: var(--font); font-size: 14px; border-radius: 8px;
  padding: 10px 20px;
}
/* Eine gefüllte Aktion je Abschnitt */
.btn.primary {
  background: var(--charcoal); border: 1px solid var(--charcoal);
  color: var(--paper); font-weight: 600;
}
.btn.primary:hover { background: var(--ink); border-color: var(--ink); }
.btn.ghost {
  background: transparent; border: 1px solid var(--pewter);
  color: var(--ink); font-weight: 500;
}
.btn.ghost:hover { background: var(--mist); }
.btn.on-dark {
  background: var(--paper); border-color: var(--paper); color: var(--charcoal);
}
.btn.on-dark:hover { background: var(--ash); border-color: var(--ash); }

/* --- Kopfbereich --------------------------------------------------------- */

.hero { padding: 80px 0 64px; text-align: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--ink); border-radius: 9999px;
  padding: 12px; font-size: 12px; font-weight: 500; color: var(--ink);
  text-decoration: none; margin-bottom: 32px;
}
.eyebrow:hover { background: var(--mist); }

h1 {
  font-size: clamp(44px, 7.4vw, 80px); font-weight: 700; line-height: 1;
  letter-spacing: -1.6px; color: var(--ink);
  margin: 0 auto 24px; max-width: 16ch; white-space: pre-line;
}
/* Das Blau: nur hier, nur auf ein bis zwei Wörtern */
.glow {
  background: var(--accent-gradient);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.hero .lead {
  font-size: 18px; line-height: 1.6; color: var(--smoke);
  max-width: 640px; margin: 0 auto 32px;
}

.alarm {
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em;
  color: var(--smoke); margin: 0 0 32px;
}

.hero .actions { display: flex; gap: 16px; justify-content: center; }

/* Produktbild: randlos, ohne Rahmen, ohne Schatten */
.shot-full { margin: 64px auto 0; }
.shot-full img { width: 100%; border-radius: 16px; }

/* --- Abschnitte ---------------------------------------------------------- */

section { padding: 80px 0; }
section + section { border-top: 1px solid var(--ash); }

h2 {
  font-size: clamp(32px, 4vw, 48px); font-weight: 700; line-height: 1.14;
  letter-spacing: -0.8px; color: var(--ink); margin: 0 0 16px;
}
h3 { font-size: 20px; font-weight: 600; line-height: 1.33; color: var(--ink); margin: 0 0 8px; }

.section-note { color: var(--smoke); font-size: 16px; margin: 0 0 40px; max-width: 640px; }
.lead-sm { font-size: 18px; line-height: 1.6; color: var(--smoke); margin: 0; }

.trailer { width: 100%; border-radius: 16px; background: var(--charcoal); }

/* Karten: 16px Radius, 32px Polster, Haarlinie, kein Schatten */
.cards { display: grid; gap: 24px; }
.cards.three { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cards.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.card {
  background: var(--paper); border: 1px solid var(--fog);
  border-radius: 16px; padding: 32px;
}
.card p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink); }
.card.with-shot { padding: 0; overflow: hidden; }
.card.with-shot img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.card .card-body { padding: 32px; }

/* PROXXY */
.split-grid {
  display: grid; gap: 64px; align-items: center;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
}
.portrait { margin: 0; }
.portrait img { aspect-ratio: 1 / 1; object-fit: cover; border-radius: 16px; }

.gallery {
  display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.gallery img { border-radius: 16px; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }

/* Fakten: Zeilen mit Haarlinie, kein Kasten */
.facts {
  margin: 0; display: grid; gap: 0 64px;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
}
.facts > div {
  display: grid; grid-template-columns: 160px 1fr; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--ash);
}
.facts dt { color: var(--smoke); font-size: 14px; font-weight: 500; }
.facts dd { margin: 0; color: var(--ink); font-size: 16px; }

.links { margin: 0 0 16px; padding-left: 20px; }
.links li { margin-bottom: 8px; font-size: 16px; }
.links a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.links a:hover { color: var(--smoke); }

.todo {
  color: var(--smoke); font-size: 14px; background: var(--mist);
  border-radius: 12px; padding: 16px; margin: 0;
}

/* --- Formular ------------------------------------------------------------ */

.form-grid {
  display: grid; gap: 64px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  align-items: start;
}
form { display: grid; gap: 8px; max-width: 34rem; }
label { color: var(--ink); font-size: 14px; font-weight: 500; margin-top: 16px; }
input[type="text"], input[type="url"], select, textarea {
  width: 100%; font-family: var(--font); font-size: 16px; color: var(--ink);
  background: var(--mist);
  border: 1px solid var(--ash); border-radius: 12px; padding: 12px 16px;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--ink); background: var(--paper);
}
.check {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: 24px; font-size: 14px; font-weight: 400; color: var(--smoke);
}
.check input { margin-top: 3px; }
form .btn.primary { margin-top: 24px; justify-self: start; }

/* Honeypot: unsichtbar, aber nicht display:none – manche Bots prüfen das */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

#result {
  max-width: 34rem; margin-top: 24px; padding: 16px;
  border: 1px solid var(--fog); border-radius: 16px;
  font-size: 16px; background: var(--mist); color: var(--ink);
}
/* Zustand über Füllung und Rand, nicht über Farbe */
#result.ok { border-color: var(--ink); background: var(--paper); font-weight: 500; }
#result.fail { border-color: var(--ink); background: var(--mist); }

.side-note {
  background: var(--mist); border-radius: 16px; padding: 32px;
}
.side-note h3 { margin-top: 32px; }
.side-note h3:first-child { margin-top: 0; }
.side-note ol { margin: 0 0 8px; padding-left: 20px; color: var(--smoke); font-size: 16px; }
.side-note li { margin-bottom: 8px; }

/* --- Dunkler Abschlussblock ---------------------------------------------- */

.closing { padding: 80px 0; border-top: 1px solid var(--ash); }
.closing-card {
  background: var(--charcoal); color: var(--paper);
  border-radius: 16px; padding: 64px 32px; text-align: center;
}
.closing-card h2 { color: var(--paper); margin-bottom: 16px; }
.closing-card p { color: var(--fog); font-size: 18px; max-width: 560px; margin: 0 auto 32px; }

footer { padding: 32px 0 48px; color: var(--smoke); font-size: 14px; }
footer p { margin: 0 0 4px; }
footer .meta { font-family: var(--mono); font-size: 12px; color: var(--pewter); }

/* --- Schmale Schirme ----------------------------------------------------- */

@media (max-width: 900px) {
  .split-grid, .form-grid { grid-template-columns: 1fr; gap: 40px; }
  section { padding: 64px 0; }
  .hero { padding: 48px 0 40px; }
  .nav-links { display: none; }
  .facts > div { grid-template-columns: 1fr; gap: 4px; }
  .portrait { max-width: 360px; }
  .card, .side-note { padding: 24px; }
  .card .card-body { padding: 24px; }
  .closing-card { padding: 40px 24px; }
}