/* QuarterBell — Landing-Page.
   Mobile-first, kein Framework, kein Build-Schritt.
   Keine externen Schriften/Skripte/Bilder — die einzige Verbindung nach
   aussen ist der Formular-POST an Brevo beim Absenden. */

:root {
  /* Farbwelt: Navy-Umfeld, Weiss, Blau-Akzent. */
  --navy:        #0d2461;   /* Leitfarbe (Flaechen, Karten) */
  --navy-tief:   #081741;   /* Seitenhintergrund, dunkler als die Leitfarbe */
  --navy-kante:  #1b3a86;   /* Linien/Raender */
  --weiss:       #ffffff;
  --weiss-leise: #c3cee6;   /* Fliesstext gedaempft */
  --akzent:      #5b9bff;   /* Blau-Akzent: Links, Fokus, Knopf */
  --akzent-tief: #3d7ded;   /* Knopf gedrueckt/hover */
  --warnung:     #9fb0d4;   /* Fusszeile */

  --radius: 12px;
  --spur: 0.02em;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--navy-tief);
  color: var(--weiss);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Dezenter Verlauf: oben Leitfarbe, darunter der dunklere Grund. */
  background-image: linear-gradient(180deg, var(--navy) 0%, var(--navy-tief) 60%);
  background-repeat: no-repeat;
}

main {
  max-width: 40rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 1rem;
}

/* ---------- Kopf ---------- */

.kopf { text-align: center; }

.logo {
  display: block;
  width: 96px;
  height: auto;      /* haelt das Seitenverhaeltnis, egal welches SVG kommt */
  max-width: 40vw;
  margin: 0 auto 0.75rem;
}

.wortmarke {
  margin: 0 0 2rem;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--weiss);
}

.claim {
  margin: 0 0 0.75rem;
  font-size: clamp(1.75rem, 7.5vw, 2.6rem);
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: calc(var(--spur) * -1);
  text-wrap: balance;
}

.subline {
  margin: 0 0 2.75rem;
  font-size: clamp(1rem, 4vw, 1.15rem);
  color: var(--weiss-leise);
}

/* ---------- Nutzenblöcke ---------- */

.nutzen {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 2.75rem;
}

.block {
  background: var(--navy);
  border: 1px solid var(--navy-kante);
  border-radius: var(--radius);
  padding: 1.1rem 1.15rem;
}

.block h2 {
  margin: 0 0 0.35rem;
  font-size: 1.02rem;
  font-weight: 650;
  color: var(--akzent);
  letter-spacing: var(--spur);
}

.block p {
  margin: 0;
  color: var(--weiss-leise);
  font-size: 0.97rem;
}

/* ---------- Warteliste ---------- */

.warteliste {
  background: var(--navy);
  border: 1px solid var(--navy-kante);
  border-radius: var(--radius);
  padding: 1.4rem 1.15rem 1.25rem;
}

.warteliste h2 {
  margin: 0 0 0.4rem;
  font-size: 1.25rem;
  font-weight: 650;
}

.warteliste-text {
  margin: 0 0 1.25rem;
  color: var(--weiss-leise);
  font-size: 0.97rem;
}

.feld-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--weiss-leise);
}

.feld {
  width: 100%;
  padding: 0.8rem 0.9rem;
  font: inherit;
  font-size: 1rem;                 /* >=16px: verhindert Auto-Zoom auf iOS */
  color: var(--weiss);
  background: var(--navy-tief);
  border: 1px solid var(--navy-kante);
  border-radius: 10px;
}

.feld::placeholder { color: #7d8db4; }

.feld:focus-visible,
.knopf:focus-visible,
.einwilligung input:focus-visible,
a:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
}

/* Honeypot: fuer Menschen unsichtbar, fuer Bots ein Koeder.
   Nicht display:none — manche Bots ueberspringen versteckte Felder. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.einwilligung {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  margin: 1rem 0 1.25rem;
}

.einwilligung input {
  flex: none;
  margin: 0.28rem 0 0;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--akzent);
}

.einwilligung label {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--weiss-leise);
}

.knopf {
  display: block;
  width: 100%;
  padding: 0.9rem 1rem;
  font: inherit;
  font-size: 1.02rem;
  font-weight: 650;
  color: var(--weiss);
  background: var(--akzent);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}

.knopf:hover  { background: var(--akzent-tief); }
.knopf:active { background: var(--akzent-tief); transform: translateY(1px); }

.form-hinweis {
  margin: 1rem 0 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: #93a4c9;
}

/* ---------- Rechtstexte (impressum.html, datenschutz.html) ----------
   Gleiche Farbwelt und gleicher Satzspiegel wie die Startseite, nur
   linksbuendig und mit Fliesstext-Rhythmus statt Karten. */

.rechtstext .seiten-kopf {
  margin-bottom: 2rem;
}

.zurueck {
  display: inline-block;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.rechtstext h1 {
  margin: 0;
  font-size: clamp(1.6rem, 6vw, 2.1rem);
  line-height: 1.25;
  font-weight: 650;
  letter-spacing: calc(var(--spur) * -1);
}

.rechtstext h2 {
  margin: 2.25rem 0 0.6rem;
  font-size: 1.05rem;
  font-weight: 650;
  color: var(--akzent);
  letter-spacing: var(--spur);
}

.rechtstext h3 {
  margin: 1.5rem 0 0.4rem;
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--weiss);
}

.rechtstext p,
.rechtstext li {
  color: var(--weiss-leise);
  font-size: 0.95rem;
}

.rechtstext p { margin: 0 0 0.9rem; }

.rechtstext ul {
  margin: 0 0 0.9rem;
  padding-left: 1.2rem;
}

.rechtstext li { margin-bottom: 0.35rem; }

.anschrift {
  margin: 0 0 0.9rem;
  font-style: normal;
  color: var(--weiss-leise);
  font-size: 0.95rem;
  line-height: 1.7;
}

.stand {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--navy-kante);
  font-size: 0.82rem;
  color: #93a4c9;
}

/* Die Regeln .platzhalter und .entwurf sind mit dem Ausfuellen der Rechtstexte
   am 11.08.2026 entfallen — die Seiten tragen keine offenen Felder mehr. Wer
   sie fuer eine kuenftige Entwurfsfassung braucht (etwa wenn die UG gegruendet
   ist und das Impressum neu gefasst wird), findet sie in der Git-Historie. */

/* ---------- Fußzeile ---------- */

.fuss {
  max-width: 40rem;
  margin: 0 auto;
  padding: 1.75rem 1.25rem 2.5rem;
  border-top: 1px solid var(--navy-kante);
  margin-top: 2.25rem;
}

.fuss-warnung {
  margin: 0 0 0.9rem;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--warnung);
}

.fuss-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.82rem;
  color: var(--warnung);
}

a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Ab Tablet ---------- */

@media (min-width: 40rem) {
  main { padding-top: 3.5rem; }
  .nutzen { grid-template-columns: repeat(3, 1fr); gap: 0.9rem; }
  .warteliste { padding: 1.75rem 1.6rem 1.5rem; }
  .knopf { width: auto; min-width: 14rem; }
}

@media (prefers-reduced-motion: reduce) {
  .knopf:active { transform: none; }
}