/* Landingpage — Einstieg in den Website-Check.
 *
 * Nachbau des Hero-Headers aus Davids Webflow-Seite. Setzt tokens.css,
 * basis.css und knopf.css voraus.
 *
 * Alle Groessen kommen als Token aus tokens.css. Umbruchpunkte gibt es nur
 * dort, wo sich die Anordnung aendert und nicht bloss die Groesse — die
 * Ausnahme ist der Block fuer liegende Telefone ganz unten, der eine
 * eigene Notlage regelt und deshalb eigene Zahlen nennt.
 */

body {
  min-height: 100svh;
  overflow-x: hidden;
  font-size: var(--text-m);
  color: var(--hell);
  background-color: var(--dunkel);
}

/* Statt der Hintergrundanimation der Webflow-Seite ein ruhiger Verlauf:
   heller zur Mitte hin, an den Raendern abfallend. Er liegt auf einer
   fixierten Ebene, nicht auf background-attachment: fixed — das rechnet iOS
   Safari gegen die Dokumenthoehe und zieht den Verlauf auseinander. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(75% 55% at 50% 32%, rgba(180, 205, 200, 0.09) 0%, rgba(180, 205, 200, 0) 70%),
    linear-gradient(155deg, rgb(54, 63, 65) 0%, var(--dunkel) 48%, rgb(37, 44, 46) 100%);
}

/* ── Kopfzeile ─────────────────────────────────────────────────────── */

.kopf {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 2vw, 24px);
  padding: var(--kopf-polster) var(--seite-rand);
}

.kopf__marke { display: flex; align-items: center; min-width: 0; }
.kopf__marke img {
  display: block;
  height: clamp(21px, 2.4vw, 26px);
  width: auto;
}

.kopf__nav { display: flex; gap: clamp(18px, 2.2vw, 34px); }

.kopf__link {
  font-size: var(--text-eingabe);
  color: var(--hell);
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.kopf__link:hover { opacity: 1; color: var(--gruen); }

/* ── Hero ──────────────────────────────────────────────────────────── */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  text-align: center;
  padding: var(--hero-oben) var(--seite-rand) var(--hero-unten);
}

.hero__titel {
  margin-bottom: 26px;
  font-weight: 500;
  font-size: var(--titel-hero);
  line-height: 1.04;
  letter-spacing: -0.032em;
  /* Zwei Zeilen, nicht drei. Beide Haelften sind gleich lang
     ("Dein Sparringspartner für" / "High-Performance Websites"), balance
     setzt den Umbruch damit genau in die Mitte. Die Breite in ch waechst
     mit der Schrift mit — auf jedem Schirm dieselben zwei Zeilen, bis der
     Platz auf schmalen Geraeten nicht mehr reicht. */
  max-width: 26ch;
  text-wrap: balance;
  /* Der Titel laeuft von hell nach Markengruen — wie im Entwurf. */
  background-image: linear-gradient(178deg,
    rgb(238, 246, 236) 8%,
    rgb(190, 250, 183) 48%,
    rgb(133, 250, 126) 92%);
  background-clip: text;
  color: transparent;
}

.hero__text {
  margin-bottom: 34px;
  /* Ebenfalls zwei Zeilen: der Satz hat 123 Zeichen, 62 pro Zeile. */
  max-width: 64ch;
  font-size: var(--text-hero);
  line-height: 1.45;
  text-wrap: balance;
}

/* ── Sozialer Beweis ───────────────────────────────────────────────── */

.beweis {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 40px;
}

.beweis__koepfe { display: flex; }

.beweis__koepfe img {
  width: var(--avatar);
  height: var(--avatar);
  border-radius: var(--radius-rund);
  object-fit: cover;
  border: 2px solid var(--dunkel);
  background-color: var(--dunkel);
}
/* Knapp ein Drittel Ueberlappung, unabhaengig von der Groesse. */
.beweis__koepfe img + img { margin-left: calc(var(--avatar) * -0.31); }

.beweis__text {
  max-width: 21ch;
  text-align: left;
  font-size: var(--text-s);
  line-height: 1.3;
  color: var(--gedimmt);
}

/* ── Formular ──────────────────────────────────────────────────────── */

.suche {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: var(--suche-max);
}

.suche__feld {
  flex: 1 1 auto;
  min-width: 0;
  /* Polster in em: waechst mit der Schriftgroesse mit, ohne eigenen
     Token und ohne dass Feld und Knopf auseinanderlaufen. */
  padding: 1em 1.3em;
  font: inherit;
  /* Mindestens 16px, sonst zoomt iOS beim Hineintippen in das Feld. */
  font-size: var(--text-eingabe);
  color: var(--hell);
  background-color: var(--feld);
  border: 1px solid transparent;
  border-radius: var(--radius);
  outline: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.suche__feld::placeholder { color: var(--leise); }
.suche__feld:focus {
  border-color: rgba(109, 250, 102, 0.55);
  background-color: var(--rand);
}

.hinweis {
  margin-top: 16px;
  max-width: 52ch;
  font-size: var(--text-s);
  line-height: 1.45;
}
.hinweis__stark { display: block; font-weight: 400; color: var(--gruen); }
.hinweis__leise { color: var(--gedimmt); }

.fehler {
  margin-top: 18px;
  max-width: 48ch;
  /* Reserviert eine Zeile, damit das Formular beim Einblenden nicht springt. */
  min-height: 1.5em;
  font-size: var(--text-s);
  color: var(--band-kritisch);
}

/* ── Umbruchpunkte ─────────────────────────────────────────────────── */

/* Ab hier wird die Kopfzeile zu eng fuer die Navigation. Die Links fuehren
   ohnehin alle auf die Webflow-Seite, ueber die Marke oben links erreichbar. */
@media (max-width: 900px) {
  .kopf__nav { display: none; }
}

@media (max-width: 620px) {
  .suche { flex-direction: column; }
  .beweis { flex-direction: column; gap: 10px; text-align: center; }
  .beweis__text { max-width: none; text-align: center; }
}

/* Liegendes Telefon: hier ist nicht die Breite knapp, sondern die Hoehe.
   Der Hero darf dann kuerzer sein als der Bildschirm — Hauptsache, das
   Formular bleibt ohne Scrollen erreichbar. */
@media (orientation: landscape) and (max-height: 560px) {
  .hero {
    min-height: 0;
    padding-top: 92px;
    padding-bottom: 40px;
  }
  .hero__titel { margin-bottom: 16px; font-size: clamp(30px, 4.6vw, 52px); }
  .hero__text { margin-bottom: 22px; }
  .beweis { margin-bottom: 24px; }
}