/* ================================================================
   Zeltwerk – Landing Page (nur die Startseite)

   Diese Datei lädt AUSSCHLIESSLICH index.html, zusätzlich zu
   styles.css. Warum getrennt: styles.css trägt auch Impressum,
   Datenschutz und die Formularseite /f/<id>. Deren Schriftskala und
   Karten-Optik sollen sich nicht mitverändern, wenn die Startseite
   umgebaut wird. Alles hier ist deshalb mit `lp-` benannt bzw. an
   `.lp` (die Klasse am body) gebunden und kann keine andere Seite
   erreichen.

   Aufbau:
     1. Tokens – die eine Stelle für Farbe, Maß und Schrift
     2. Basis der Seite
     3. Bausteine (Sektion, Inhaltsbreite, Text, Platzhalter, Knopf)
     4. Die Abschnitte in der Reihenfolge der Seite
   ================================================================ */

/* ----------------------------------------------------------------
   1. TOKENS

   Mobile-first wie im ganzen Projekt: Die kleinen Werte stehen als
   Grundeinstellung da, die großen kommen ab 768px dazu. Ergebnis ist
   dasselbe wie „unter 768px: 72px" – nur muss ein schmales Handy so
   keine Regel erst wieder zurücknehmen.
   ---------------------------------------------------------------- */
:root {
  /* Flächen – kein Abschnitt liegt neben einem gleichfarbigen. */
  --flaeche-basis: #f4f7fb;
  --flaeche-hoch: #ffffff;
  --flaeche-dunkel: #0a1b2e;

  --text-auf-dunkel: #ffffff;
  --text-auf-dunkel-soft: #a8b8cc;

  /* Breiten */
  --breite-inhalt: 1200px;
  --breite-text: 680px;

  /* Abstände */
  --abstand-sektion: 72px;   /* ab 768px: 128px */
  --abstand-block: 48px;
  --abstand-eng: 24px;

  /* Schrift */
  --schrift-hero: 36px;      /* ab 768px: 56px */
  --schrift-h2: 28px;        /* ab 768px: 40px */
  --schrift-h3: 22px;
  --schrift-body: 17px;
  --schrift-klein: 15px;

  --radius-karte: 16px;
  --radius-knopf: 8px;

  /* Akzent: unverändert die bestehende Farbe. Sie ist Knopf-, Link-
     und Akzentfarbe – nie die Fläche eines Abschnitts. */
  --lp-akzent: #0066ff;

  /* Nur für den Entwurf: die grauen Bild-Platzhalter. Fliegt raus,
     sobald echte Bilder drin sind. */
  --lp-platzhalter: #e3e8ef;
  --lp-platzhalter-text: #7d8a9c;

  /* Feine Trennkante (FAQ-Zeilen, sekundärer Knopf). */
  --lp-kante: #d8e0ea;

  /* Einblenden beim Scrollen – alle Stellschrauben beieinander.
     Die Kurve startet schnell und läuft weich aus. */
  --dauer-reveal: 300ms;
  --weg-reveal: 32px;
  --kurve-reveal: cubic-bezier(0.16, 1, 0.3, 1);
  --versatz-reveal: 60ms;
}

@media (min-width: 768px) {
  :root {
    --abstand-sektion: 128px;
    --schrift-hero: 56px;
    --schrift-h2: 40px;
  }
}

/* ----------------------------------------------------------------
   2. BASIS DER SEITE
   ---------------------------------------------------------------- */
body.lp {
  background-color: var(--flaeche-basis);
  font-size: var(--schrift-body);
  line-height: 1.6;
}

/* Überschriften nie über Schriftstärke 700. styles.css setzt die h1
   auf 800 – das gilt weiter für die Rechtsseiten, hier nicht. */
.lp h1,
.lp h2,
.lp h3 {
  font-weight: 700;
}

/* Kein Element bringt einen eigenen Abstand mit; die Abstände kommen
   ausschließlich aus den Bausteinen weiter unten.

   Das `:where()` ist hier wichtig und kein Zierrat: Es macht diese
   Regel absichtlich SCHWACH. Ohne es hätte `.lp p` mehr Gewicht als
   `.lp-kopf > * + *`, und dann klebte jeder Absatz an seiner
   Überschrift – die Abstandsregel stünde da, ohne zu wirken. */
:where(.lp) :where(h1, h2, h3, p) {
  margin: 0;
}

.lp h1 {
  font-size: var(--schrift-hero);
  line-height: 1.1;
}

.lp h2 {
  font-size: var(--schrift-h2);
  line-height: 1.15;
}

.lp h3 {
  font-size: var(--schrift-h3);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* ----------------------------------------------------------------
   3. BAUSTEINE
   ---------------------------------------------------------------- */

/* Ein Abschnitt: volle Breite, Fläche über die Variante.
   Der senkrechte Abstand steckt im Abschnitt selbst – so kann kein
   Rand zweier Nachbarn zusammenfallen und die Reihenfolge der Flächen
   bleibt genau die, die im HTML steht. */
.lp-sektion {
  padding-block: var(--abstand-sektion);
}

.lp-sektion--basis  { background-color: var(--flaeche-basis); }
.lp-sektion--hoch   { background-color: var(--flaeche-hoch); }

.lp-sektion--dunkel {
  background-color: var(--flaeche-dunkel);
  color: var(--text-auf-dunkel);
}

/* Zentrierte Inhaltsbreite mit Seitenabstand auf schmalen Geräten. */
.lp-inhalt {
  width: min(var(--breite-inhalt), 100% - 2 * var(--abstand-eng));
  margin-inline: auto;
}

/* Fließtext bricht nie breiter um als --breite-text. Die Klasse steht
   an jedem Absatz, nicht am Abschnitt: In den Karten und im Ablauf ist
   die Spalte ohnehin schmaler, im Bild-Text-Block die halbe Breite –
   nur die vollbreiten Abschnitte brauchen die Bremse wirklich. */
.lp-text {
  max-width: var(--breite-text);
  font-size: var(--schrift-body);
  line-height: 1.6;
}

.lp-text--klein {
  font-size: var(--schrift-klein);
}

/* Auf dunklem Grund: Überschrift weiß, Fließtext gedämpft. */
.lp-sektion--dunkel .lp-text {
  color: var(--text-auf-dunkel-soft);
}

/* Ein zentrierter Block: Text mittig, Kasten mittig. */
.lp-mitte {
  text-align: center;
}

.lp-mitte .lp-text {
  margin-inline: auto;
}

/* Der Abstand zwischen Überschrift und dem, was darunter gehört. */
.lp-kopf > * + * {
  margin-top: var(--abstand-eng);
}

/* Bild-Platzhalter: graue Fläche, Beschriftung = Seitenverhältnis.
   Das Verhältnis kommt als --seiten aus dem HTML, damit im Markup
   steht, was auch als Text drinsteht. */
.lp-bild {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: var(--seiten, 16 / 9);
  border-radius: var(--radius-karte);
  background-color: var(--lp-platzhalter);
  color: var(--lp-platzhalter-text);
  font-size: var(--schrift-klein);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Knöpfe – 8px Radius, mindestens 44px hoch (Daumen). */
.lp-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.75rem 1.75rem;
  border: 0;
  border-radius: var(--radius-knopf);
  font-family: inherit;
  font-size: var(--schrift-body);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.lp-knopf--primaer {
  background-color: var(--lp-akzent);
  color: #ffffff;
}

/* Sekundär: helle Fläche mit feiner Kante, Schrift in der Akzentfarbe.
   box-shadow statt border, damit beide Knöpfe exakt gleich hoch sind. */
.lp-knopf--sekundaer {
  background-color: var(--flaeche-hoch);
  color: var(--lp-akzent);
  box-shadow: inset 0 0 0 1px var(--lp-kante);
}

@media (hover: hover) {
  .lp-knopf:hover { opacity: 0.9; }
}

.lp-knopf:focus-visible {
  outline: 2px solid var(--lp-akzent);
  outline-offset: 2px;
}

/* Zwei Knöpfe nebeneinander, auf dem Handy untereinander. */
.lp-knopfzeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-eng);
}

.lp-mitte .lp-knopfzeile {
  justify-content: center;
}

/* ----------------------------------------------------------------
   4. DIE ABSCHNITTE
   ---------------------------------------------------------------- */

/* 4.1 Hero ------------------------------------------------------
   Das Bild geht von Kante zu Kante und hat deshalb keine eigene
   Fläche und keine Rundung. Überschrift, Satz und Knöpfe liegen
   darunter auf derselben Fläche wie der folgende Abschnitt – Hero und
   Produktkarten sind optisch EIN Feld, getrennt nur durch Abstand. */
.lp-hero {
  background-color: var(--flaeche-basis);
}

/* Randlos, also ohne Rundung. Und mit Deckel: 16:9 über die volle Breite
   sind auf einem 1440er Schirm 810 px – das Bild allein füllte den ersten
   Bildschirm, und die Überschrift stand darunter, ungesehen. Mehr als 60 %
   der Fensterhöhe darf es deshalb nicht werden. Auf schmalen Geräten greift
   der Deckel nicht: Dort ist 16:9 von sich aus niedrig genug.

   Für das spätere echte Foto heißt das: object-fit: cover, damit der Deckel
   beschneidet statt zu stauchen. */
.lp-hero__bild {
  border-radius: 0;
  /* Muss ausdrücklich dastehen: Sobald die Höhe gedeckelt ist, rechnet der
     Browser sonst die BREITE aus dem Seitenverhältnis zurück – das Bild
     schrumpfte auf 960 px und war nicht mehr randlos. Mit fester Breite
     gewinnt die Breite, und das Verhältnis gibt nach. Genau so herum. */
  width: 100%;
  max-height: 60vh;
}

.lp-hero__text {
  padding-top: var(--abstand-block);
}

.lp-hero__text > * + * {
  margin-top: var(--abstand-eng);
}

/* 4.2 Produktkarten ---------------------------------------------
   Drei Karten nebeneinander, auf dem Handy untereinander. Die Karte
   ist weiß auf der basis-Fläche; das Bild sitzt bündig unter der
   Oberkante, deshalb overflow: hidden statt eigener Rundung. */
.lp-karten {
  display: grid;
  gap: var(--abstand-eng);
  margin-top: var(--abstand-block);
}

.lp-karte {
  overflow: hidden;
  border-radius: var(--radius-karte);
  background-color: var(--flaeche-hoch);
}

.lp-karte .lp-bild {
  border-radius: 0;
}

.lp-karte__text {
  padding: var(--abstand-eng);
}

.lp-karte__text > * + * {
  margin-top: 0.75rem;
}

/* 4.3 + 4.4 Bild-Text-Block -------------------------------------
   Eine Zeile, zwei Spalten. Auf dem Handy IMMER Bild oben, Text
   darunter – ganz gleich, welche Variante: Die Reihenfolge im HTML
   ist die richtige Lesereihenfolge, getauscht wird erst ab 768px. */
.lp-duo {
  display: grid;
  gap: var(--abstand-block);
  align-items: center;
}

.lp-duo__text > * + * {
  margin-top: var(--abstand-eng);
}

/* 4.5 Ablauf in vier Schritten ----------------------------------
   Echte nummerierte Liste (ol). Die sichtbare Zahl kommt aus einem
   CSS-Zähler, steht also genau einmal im Dokument. */
.lp-schritte {
  display: grid;
  gap: var(--abstand-block);
  counter-reset: schritt;
  margin: var(--abstand-block) 0 0;
  padding: 0;
  list-style: none;
}

.lp-schritt {
  counter-increment: schritt;
}

.lp-schritt::before {
  content: counter(schritt);
  display: block;
  margin-bottom: 0.75rem;
  font-size: var(--schrift-h2);
  font-weight: 700;
  line-height: 1;
  color: var(--lp-akzent);
}

.lp-schritt > * + * {
  margin-top: 0.75rem;
}

/* 4.6 Über uns --------------------------------------------------
   Ein breites Bild, darunter der Textblock in Lesebreite. Bewusst
   anders als die Bild-Text-Blöcke davor, sonst wäre es der dritte
   gleiche Abschnitt in Folge. */
/* Nicht über die volle Inhaltsbreite: 3:2 auf 1200px wären 800px Höhe,
   und der Abschnitt bestünde fast nur noch aus diesem einen Bild. */
.lp-ueber__bild {
  max-width: 880px;
  margin: 0 auto var(--abstand-block);
}

.lp-ueber__text {
  max-width: var(--breite-text);
  margin-inline: auto;
}

.lp-ueber__text > * + * {
  margin-top: var(--abstand-eng);
}

/* 4.7 FAQ – Aufklapp-Liste --------------------------------------
   <details>/<summary> vom Browser: klappt ohne JavaScript auf und
   ist für Vorlese-Programme von Haus aus richtig ausgezeichnet.
   Bewusst ohne Animation – die kommt im zweiten Schritt. */
.lp-faq {
  max-width: var(--breite-text);
  margin: var(--abstand-block) auto 0;
}

.lp-faq__eintrag {
  border-top: 1px solid var(--lp-kante);
}

.lp-faq__eintrag:last-child {
  border-bottom: 1px solid var(--lp-kante);
}

.lp-faq__frage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-eng);
  min-height: 44px;              /* Trefferfläche für den Daumen */
  padding-block: var(--abstand-eng);
  font-size: var(--schrift-h3);
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;              /* das Standard-Dreieck weg */
}

.lp-faq__frage::-webkit-details-marker {
  display: none;                 /* dasselbe für Safari */
}

/* Plus/Minus als Zeichen der Akzentfarbe. Kein Bild, kein Icon-Font. */
.lp-faq__frage::after {
  content: "+";
  flex: 0 0 auto;
  font-size: var(--schrift-h3);
  font-weight: 400;
  line-height: 1;
  color: var(--lp-akzent);
}

.lp-faq__eintrag[open] .lp-faq__frage::after {
  content: "\2212";              /* echtes Minuszeichen, kein Bindestrich */
}

.lp-faq__antwort {
  padding-bottom: var(--abstand-eng);
}

.lp-faq__frage:focus-visible {
  outline: 2px solid var(--lp-akzent);
  outline-offset: -2px;
}

/* 4.8 Footer ----------------------------------------------------
   Dunkel wie der Abschlussblock darüber – die beiden gehen ineinander
   über; das ist die einzige Stelle, an der zwei gleiche Flächen
   aneinanderstoßen sollen.

   Die Links stehen hier NICHT in der Akzentfarbe: #0066ff auf dem
   dunklen Blau kommt auf etwa 2,7:1 Kontrast, gefordert sind 4,5:1.
   Auf dunklem Grund tragen sie deshalb die helle Textfarbe. */
.lp-footer {
  background-color: var(--flaeche-dunkel);
  color: var(--text-auf-dunkel-soft);
  padding-block: var(--abstand-block);
}

.lp-footer__innen {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-eng);
}

/* Die Wortmarke kommt als --wortmarke aus styles.css; die Klasse
   `auf-dunkel` am Footer schaltet dort auf die weiße Fassung um. */
.lp-footer__marke {
  display: block;
  aspect-ratio: 211.6 / 177.41;
  height: 56px;
  background: var(--wortmarke) left center / contain no-repeat;
}

.lp-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-eng);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-footer__links a {
  color: var(--text-auf-dunkel);
  font-size: var(--schrift-klein);
  text-decoration: none;
}

@media (hover: hover) {
  .lp-footer__links a:hover { text-decoration: underline; }
}

.lp-footer__zeile {
  font-size: var(--schrift-klein);
  margin: 0;
}

/* 4.9 Kontakt-Fenster (Modal) -----------------------------------
   Das native <dialog>: Der Browser bringt Verdunkelung, Tastatur-Falle
   und Escape-zum-Schließen selbst mit. Ohne Animation. */
.lp-modal {
  width: min(520px, 100% - 2 * var(--abstand-eng));
  padding: var(--abstand-block);
  border: 0;
  border-radius: var(--radius-karte);
  background-color: var(--flaeche-hoch);
  color: inherit;
}

.lp-modal::backdrop {
  background-color: rgba(10, 27, 46, 0.6);
}

.lp-modal__kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--abstand-eng);
}

.lp-modal__schliessen {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: -0.5rem -0.5rem 0 0;
  border: 0;
  border-radius: var(--radius-knopf);
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.lp-modal__inhalt > * + * {
  margin-top: var(--abstand-eng);
}

/* ----------------------------------------------------------------
   5. AB TABLET (768px): mehrspaltig
   ---------------------------------------------------------------- */
@media (min-width: 768px) {
  .lp-karten {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--abstand-block);
  }

  .lp-duo {
    grid-template-columns: 1fr 1fr;
  }

  /* Bild rechts: nur hier getauscht, im Dokument steht es weiter vorn. */
  .lp-duo--bild-rechts .lp-duo__bild { order: 2; }
  .lp-duo--bild-rechts .lp-duo__text { order: 1; }

  .lp-schritte {
    grid-template-columns: repeat(4, 1fr);
  }

  .lp-footer__innen {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ----------------------------------------------------------------
   6. EINBLENDEN BEIM SCROLLEN

   Die WICHTIGSTE Regel steht gleich am Anfang: Versteckt wird nur,
   wenn `js-reveal` am <html> hängt. Diese Klasse setzt ein winziges
   Skript im Kopf der Seite – und zwar nur dann, wenn der Browser den
   IntersectionObserver kennt UND niemand „weniger Bewegung" eingestellt
   hat. Ohne JavaScript, mit altem Browser oder bei reduzierter Bewegung
   fehlt die Klasse, und dann greift von hier unten NICHTS: Die Seite
   steht vollständig da, als hätte es den Effekt nie gegeben.

   Angefasst wird bewusst der INHALT eines Abschnitts, nicht der
   Abschnitt selbst. Sonst blendete auch seine Hintergrundfarbe mit ein,
   und die dunklen Bänder tauchten als Fläche aus dem Nichts auf.
   ---------------------------------------------------------------- */
.js-reveal .lp-reveal {
  opacity: 0;
  transform: translateY(var(--weg-reveal));
  transition:
    opacity var(--dauer-reveal) var(--kurve-reveal),
    transform var(--dauer-reveal) var(--kurve-reveal);
}

.js-reveal .lp-reveal.ist-sichtbar {
  opacity: 1;
  transform: none;
}

/* Zweite Sicherung: Wer die Einstellung „weniger Bewegung" ERST NACH dem
   Laden setzt, hätte sonst weiter Animationen. */
@media (prefers-reduced-motion: reduce) {
  .js-reveal .lp-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Versatz innerhalb einer Reihe: Karten und Ablaufschritte kommen
   nacheinander statt gleichzeitig.

   Nur ab 768px – erst dort stehen sie NEBENEINANDER und treten
   gemeinsam ins Bild, nur dann ist ein Nacheinander überhaupt
   sichtbar. Untereinander auf dem Handy wäre die Verzögerung keine
   Choreografie mehr, sondern eine Wartezeit vor jedem einzelnen
   Element. */
@media (min-width: 768px) {
  .js-reveal .lp-karte:nth-child(2),
  .js-reveal .lp-schritt:nth-child(2) {
    transition-delay: var(--versatz-reveal);
  }

  .js-reveal .lp-karte:nth-child(3),
  .js-reveal .lp-schritt:nth-child(3) {
    transition-delay: calc(2 * var(--versatz-reveal));
  }

  .js-reveal .lp-schritt:nth-child(4) {
    transition-delay: calc(3 * var(--versatz-reveal));
  }
}