/* Landingpage (index.html, en/index.html), geladen nach styles.css.
   Gestaltet nach tasteskill v2 (.claude/skills/design-taste-frontend), Richtung
   „Angeheftetes Plakat“: das App-Handy bleibt stehen, die Bereiche der App
   wechseln darin. Farben und Schrift kommen unverändert aus styles.css (:root).
   Die Datei laden nur die zwei Startseiten; die Regeln hängen an
   body.landing, lp-Klassen oder den Attributen data-rise/data-reveal. */

body.landing {
  /* Seitenrand wie auf allen anderen Seiten (styles.css), sonst springt der
     Text beim Wechsel zum Ratgeber. */
  --lp-margin: var(--pad-x);
  --lp-gutter: clamp(16px, 2vw, 32px);
  --lp-section: clamp(104px, 12vw, 184px);
  /* Fünf Schriftstufen, mehr nicht. */
  --fs-display: clamp(34px, 5.4vw, 84px);
  --fs-heading: clamp(28px, 3.4vw, 48px);
  --fs-lead: clamp(20px, 1.7vw, 24px);
  --fs-text: 17px;
  --fs-small: 14px;
  /* Tonstufe zum Grund statt Linie oder Schatten. */
  --field-sand: var(--sand);
  /* Bewegung: drei Kurven, vier Dauern. ease-out für alles,
     was hereinkommt; ease-in-out für Wechsel im Blickfeld; linear nur für die
     scroll-gekoppelte Drift, deren Fortschritt der Scrollweg selbst ist. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 320ms;
  --t-enter: 600ms;
  --stagger: 60ms;
  /* Höhe des angehefteten Handys, Breite aus dem Seitenverhältnis der Screens (900 × 1930). */
  --dev-h: min(74svh, 720px);
  --dev-w: calc(var(--dev-h) * 900 / 1930);
  --tabs-h: 48px;
  font-size: var(--fs-text);
}

.lp-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Raster ---------- */

.lp-grid,
.lp-run {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--lp-gutter);
  padding: 0 var(--lp-margin);
}
@media (min-width: 900px) {
  .lp-grid,
  .lp-run { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

/* ---------- Schriftstufen für Abschnittsüberschriften und Aussagen ---------- */

/* :where hält die Spezifität niedrig, damit einzelne Abschnitte (Display-Größe
   im grünen Feld) sie überschreiben können. */
:where(body.landing main) h2 {
  font-size: var(--fs-heading);
  line-height: 1.05;
  letter-spacing: -.025em;
}
.lp-lead,
.lp-statement {
  font-size: var(--fs-lead);
  line-height: 1.4;
  letter-spacing: -.01em;
}

/* ---------- Links und Buttons ---------- */

body.landing main a:not(.lp-btn),
.lp-footer a,
.lp-nav-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: .07em;
  text-underline-offset: .2em;
  transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease;
}
.lp-nav-link,
.lp-footer a { text-decoration-color: transparent; }
@media (hover: hover) and (pointer: fine) {
  .lp-nav-link:hover,
  .lp-footer a:hover,
  .lp-lesen-list a:hover { color: var(--primary); text-decoration-color: currentColor; }
}

.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: var(--fs-text);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.lp-btn:active { transform: scale(.97); }
.lp-btn:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .lp-btn:hover { background: var(--primary-dark); color: #fff; }
  .lp-btn-light:hover { background: #fff; color: var(--primary); }
}
.lp-btn-small { min-height: 40px; padding: 0 18px; font-size: var(--fs-small); }
.lp-btn-light { background: var(--bg); color: var(--primary); }
.lp-btn-light:focus-visible { outline-color: var(--bg); }

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

.lp-header {
  padding: 20px var(--lp-margin);
  gap: 12px;
}
.lp-header .brand { font-size: var(--fs-text); }
.lp-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 4px 20px;
  margin-left: auto;
}
.lp-nav-link {
  font-size: var(--fs-small);
  padding: 10px 2px;
  white-space: nowrap;
}

/* ---------- Hero und Handy-Lauf ---------- */

.lp-run { padding-top: clamp(16px, 3vw, 48px); }

.lp-title {
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.035em;
  color: var(--ink);
  text-wrap: balance;
}
/* Laufweite je Zeile, damit sie mit der Schriftgröße der Zeile skaliert
   (geerbt käme der px-Wert der Überschrift an). */
.lp-title-line { display: block; letter-spacing: -.035em; }
/* Schmal passt die ganze Überschrift nur klein in zwei Zeilen. Deshalb steht
   dort nur die erste Zeile groß, die zweite in der Aussage-Größe darunter
   (gleicher Wortlaut, nur andere Gewichtung). */
@media (max-width: 699px) {
  /* Obergrenze 40 px: ab 700 px gilt --fs-display (dort 37,8 px), so springt
     die Größe an der Grenze nur um 2 px statt um 18. */
  .lp-title { font-size: clamp(30px, 11.5vw, 40px); }
  .lp-title:lang(en) { font-size: clamp(28px, 9vw, 40px); }
  /* Die zweite Zeile wächst mit der Breite (20 px bei 390, rund 37 px bei
     699) und trifft an der 700-px-Grenze die Display-Größe, statt dort
     von 20 auf 38 px zu springen. Der Teiler hält sie einzeilig. Auch der
     Abstand darüber läuft zur Grenze hin aus (5,6 px bei 390, 0 bei 700),
     Zeilenhöhe und Laufweite folgen der Überschrift. So wechselt an
     der Grenze nichts außer der Schriftgröße. */
  .lp-title-line + .lp-title-line {
    margin-top: max(0px, calc((700px - 100vw) * .018));
    font-size: max(20px, calc((100vw - 48px) / 17.5));
  }
}

.lp-lead { max-width: 30em; }
.lp-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}
.lp-note { font-size: var(--fs-small); color: var(--ink-soft); }

.lp-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 56px 0 0;
}
.lp-panel p:not(.lp-lead) { max-width: 36em; line-height: 1.6; }
.lp-panel-hero { padding-top: 28px; gap: 32px; }

/* Das Handy: alle Screens liegen übereinander, der aktive ist sichtbar.
   Kontur und runde Ecken wie bisher (README), Uhrzeit 9:41 aus dem CSS. */
.lp-device {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 48px;
}
.lp-screen {
  position: relative;
  container-type: inline-size;
  width: min(78vw, 340px);
  aspect-ratio: 900 / 1930;
  margin: 0;
}
.lp-screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: 10.7cqw;
  box-shadow: 0 0 0 1px var(--line-strong); /* taste-skill-ignore: feine Kontur des App-Screens (data-ui, README) */
  opacity: 0;
  transform: scale(.985);
  transition: opacity var(--t-ui) var(--ease-in-out), transform var(--t-ui) var(--ease-in-out);
}
.lp-screen img.is-active { opacity: 1; transform: none; }
.lp-screen::after {
  content: "9:41";
  content: "9:41" / "";
  position: absolute;
  z-index: 1;
  top: 4.6cqw;
  left: 9.3cqw;
  font-size: 3.9cqw;
  font-weight: 500;
  line-height: 1;
  color: var(--bg);
  pointer-events: none;
}

.lp-tabs {
  display: flex;
  width: min(100%, 420px);
  padding: 4px;
  border-radius: 999px;
  background: var(--field-sand);
}
.lp-tabs button {
  flex: 1 1 auto;
  min-height: 40px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.lp-tabs button:active { transform: scale(.95); }
.lp-tabs button[aria-pressed="true"] { background: var(--primary); color: #fff; }
.lp-tabs button:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .lp-tabs button[aria-pressed="false"]:hover { background: var(--bg); }
}
/* Erst bedienbar, wenn landing.js vollständig gelaufen ist (html.lp-live).
   visibility statt display: das Erscheinen verschiebt nichts. */
html:not(.lp-live) .lp-tabs { visibility: hidden; }

/* Screen je Abschnitt: auf dem Handy und ohne Script, oben angeschnitten. */
.lp-shot {
  width: min(78vw, 340px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: calc(min(78vw, 340px) * .107);
  box-shadow: 0 0 0 1px var(--line-strong); /* taste-skill-ignore: Kontur des App-Screens (data-ui) */
}
.lp-shot img { opacity: 1; transform: none; border-radius: 0; box-shadow: none; /* taste-skill-ignore: hebt die Kontur auf */ }

@media (max-width: 899px) {
  .lp-panel:not(.lp-panel-hero) { padding-top: 88px; }
  /* Zweiter Teil von „Kosten sichtbar machen“: gehört zur Überschrift darüber. */
  .lp-panel[data-panel="bilanz"] { padding-top: 32px; }
  .lp-shot { margin-top: 12px; }
  .lp-tabs button { min-height: 44px; }
}
@media (max-width: 399px) {
  .lp-tabs button { padding: 0 4px; }
}
@media (max-width: 359px) {
  .lp-tabs button { padding: 0 2px; font-size: 13px; }
}

@media (min-width: 900px) {
  .lp-title { grid-column: 1 / -1; grid-row: 1; }
  .lp-device {
    grid-column: 7 / -1;
    grid-row: 2 / span 5;
    align-self: start;
    position: sticky;
    top: max(16px, calc((100svh - var(--dev-h) - var(--tabs-h) - 16px) / 2));
    margin-top: 40px;
  }
  .lp-device .lp-screen { width: var(--dev-w); }
  .lp-panel {
    grid-column: 1 / span 6;
    min-height: 74svh;
    justify-content: center;
    padding: 0;
  }
  .lp-panel-hero { grid-row: 2; min-height: 0; justify-content: flex-start; padding: 40px 0 24svh; }
  .lp-panel[data-panel="umgaenge"] { grid-row: 3; }
  .lp-panel[data-panel="belege"] { grid-row: 4; }
  .lp-panel[data-panel="bilanz"] { grid-row: 5; }
  .lp-panel[data-panel="momente"] { grid-row: 6; min-height: 84svh; }
  /* html.js setzt das Kopf-Script vor dem ersten Zeichnen und ändert sich
     danach nicht mehr: kein Layoutsprung. */
  .js .lp-shot { display: none; }
  html:not(.js) .lp-device img:not([data-screen="start"]) { display: none; }
}

/* ---------- Kennst du das? ---------- */

.lp-kennst { padding-top: var(--lp-section); }
.lp-kennst-text {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 32px;
}
.lp-kennst .lp-statement { max-width: 26em; }
.lp-bridge { margin-top: 16px; max-width: 34em; line-height: 1.6; }
@media (min-width: 900px) {
  .lp-kennst h2 { grid-column: 1 / span 5; }
  .lp-kennst-text { grid-column: 7 / -1; margin-top: 0; }
}

.lp-strasse {
  margin: clamp(56px, 7vw, 112px) 0 0;
  overflow: hidden;
}
.lp-strasse img {
  width: 100%;
  height: auto;
  aspect-ratio: 1792 / 592;
  min-height: 200px;
  object-fit: cover;
}

/* ---------- Alles bleibt auf deinem Handy ---------- */

.lp-lokal {
  background: var(--primary);
  color: #fff;
  padding: var(--lp-section) 0;
}
.lp-lokal h2 {
  color: #fff;
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -.035em;
  text-wrap: balance;
  max-width: 12em;
}
.lp-lokal :focus-visible { outline-color: var(--bg); }
.lp-lokal-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 56px;
  margin-top: clamp(48px, 7vw, 112px);
}
.lp-lokal ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 9vh, 104px);
}
.lp-lokal li { max-width: 24em; }
@media (min-width: 900px) {
  .lp-lokal h2 { grid-column: 1 / -1; }
  .lp-lokal-body { grid-column: 7 / -1; }
}

/* ---------- Wer baut das ---------- */

/* Weißes Feld: der weiße Fotogrund geht darin auf, statt als Ausschnitt zu stehen. */
.lp-wer {
  margin-top: 0;
  padding: var(--lp-section) 0;
  background: var(--card);
}
.lp-wer-photo {
  margin: 0;
  width: min(100%, 420px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #fff;
}
.lp-wer-photo picture { height: 100%; }
.lp-wer-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.lp-wer-text { margin-top: 32px; }
.lp-wer-text .lp-statement { max-width: 28em; }
@media (min-width: 900px) {
  .lp-wer-photo { grid-column: 1 / span 5; width: 100%; max-width: 460px; }
  .lp-wer-text { grid-column: 7 / -1; align-self: center; margin-top: 0; }
}

/* ---------- Vier Fragen vorab ---------- */

.lp-faq { padding-top: var(--lp-section); }
.lp-faq h2 { margin-bottom: 32px; }
.lp-faq-list { display: flex; flex-direction: column; }
.lp-faq summary {
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 12px 0;
  font-size: var(--fs-text);
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color var(--t-hover) ease;
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::marker { content: ""; }
.lp-faq summary::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-strong);
  transform: translateY(-2px);
  transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.lp-faq details[open] > summary { color: var(--ink); }
.lp-faq details[open] > summary::before { background: var(--primary); }
.lp-faq summary:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
@media (hover: hover) and (pointer: fine) {
  .lp-faq summary:hover { color: var(--ink); }
}
.lp-faq details[open] .lp-faq-answer { animation: lp-fade var(--t-ui) var(--ease-out); }
@keyframes lp-fade { from { opacity: 0; } }
.lp-faq-answer p {
  padding: 4px 0 20px 22px;
  line-height: 1.6;
  max-width: 36em;
}
@media (min-width: 900px) {
  .lp-faq h2 { grid-column: 1 / -1; }
  /* Fragen links, die offene Antwort groß rechts daneben (Spalten 7–12). */
  .lp-faq-list {
    grid-column: 1 / span 5;
    position: relative;
    min-height: 32rem;
  }
  /* Geschlossene Antworten legt Chrome trotzdem als Box an; breit lägen sie
     unsichtbar über dem nächsten Abschnitt. */
  .lp-faq details:not([open]) .lp-faq-answer { display: none; }
  .lp-faq-answer {
    position: absolute;
    top: 6px;
    left: calc(100% + 2 * var(--lp-gutter) + (100% - 4 * var(--lp-gutter)) / 5);
    width: calc((100% - 4 * var(--lp-gutter)) / 5 * 6 + 5 * var(--lp-gutter));
  }
  .lp-faq-answer p {
    padding: 0;
    font-size: var(--fs-lead);
    line-height: 1.45;
    letter-spacing: -.01em;
    max-width: 30em;
  }
}

/* ---------- Zum Nachlesen ---------- */

.lp-lesen { padding-top: var(--lp-section); }
.lp-lesen-head p { margin-top: 16px; max-width: 24em; line-height: 1.6; }
.lp-lesen-list {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.lp-lesen-list h3 {
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.lp-lesen-list li {
  display: grid;
  grid-template-columns: minmax(112px, 36%) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
@media (max-width: 559px) {
  .lp-lesen-list li { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .lp-lesen-bild { max-width: 240px; }
}
.lp-lesen-list h3 { hyphens: auto; overflow-wrap: break-word; }
.lp-lesen-bild { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--field-sand); }
.lp-lesen-bild img { width: 100%; height: 100%; object-fit: cover; }
.lp-lesen-list p { margin-top: 8px; max-width: 36em; line-height: 1.6; }
.lp-lesen-alle { margin-top: 40px; }
@media (min-width: 900px) {
  .lp-lesen-head { grid-column: 1 / span 5; }
  .lp-lesen-list,
  .lp-lesen-alle { grid-column: 7 / -1; }
  .lp-lesen-list { margin-top: 6px; grid-row: 1; }
}

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

.lp-warteliste {
  margin-top: var(--lp-section);
  padding: var(--lp-section) 0 clamp(64px, 8vw, 120px);
  background: var(--field-sand);
}
.lp-warteliste-head .lp-statement { margin-top: 20px; max-width: 20em; }
.lp-form { margin-top: 32px; }
.lp-form iframe { display: block; width: 100%; border: 0; }
@media (min-width: 900px) {
  .lp-warteliste-head { grid-column: 1 / span 5; }
  .lp-form { grid-column: 7 / -1; margin-top: 0; }
}

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

.lp-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 40px var(--lp-margin) 32px;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}
.lp-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}
@media (min-width: 900px) {
  .lp-footer {
    grid-template-columns: 1fr auto 1fr;
    align-items: baseline;
    gap: 16px 32px;
  }
  .lp-footer-links { justify-content: center; }
  .lp-footer-lang { justify-self: end; }
}

/* ---------- Bewegung ----------
   Nur transform und opacity, ganz ohne Script-Abhängigkeit: der Hero läuft
   als CSS-Animation, die Abschnitte als scroll-gekoppelte Animation. Ohne
   Unterstützung (animation-timeline) und bei reduzierter Bewegung ist alles
   sofort sichtbar, nichts wartet auf landing.js. */

@media (prefers-reduced-motion: no-preference) {
  /* Hero: rein per CSS, braucht landing.js nicht. Alles bleibt dabei
     sichtbar (nur Bewegung), sonst zählt der Browser das größte Element
     erst spät (LCP). */
  .js [data-rise] {
    transform: translateY(20px);
    animation: lp-rise var(--t-enter) var(--ease-out) forwards;
    animation-delay: calc(var(--i, 0) * var(--stagger) + 80ms);
  }
}
@keyframes lp-rise { to { transform: none; } }

/* Abschnittsteile steigen beim Hereinscrollen auf, gestaffelt über --i
   (landing.js setzt es; ohne Script starten alle gleichzeitig). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-reveal] {
      /* Auch scroll-gekoppelt mit Kurve: die Teile kommen zügig und landen sanft. */
      animation: lp-reveal var(--ease-out) both;
      animation-timeline: view();
      animation-range: entry calc(var(--i, 0) * 6%) entry calc(70% + var(--i, 0) * 6%);
    }
    /* Bilder setzen sich aus leichter Vergrößerung, statt hochzurutschen. */
    .lp-wer-photo[data-reveal],
    .lp-shot[data-reveal] { animation-name: lp-settle; }
    @keyframes lp-reveal {
      from { opacity: 0; transform: translateY(24px); }
      to { opacity: 1; transform: none; }
    }
    @keyframes lp-settle {
      from { opacity: 0; transform: scale(1.04); }
      to { opacity: 1; transform: none; }
    }
  }
}

/* Die Straße zieht beim Scrollen langsam durchs Bild. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .lp-strasse img {
      animation: lp-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes lp-drift {
      from { transform: scale(1.08) translateX(-2%); }
      to { transform: scale(1.08) translateX(2%); }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-screen img { transform: none; }
}