/* Startseite.
 *
 * Eigene Datei, weil nur diese Seite ein Verkaufslayout hat; die übrigen
 * Seiten bleiben Dokumente und laden das hier nicht mit. Baut auf den Tokens
 * aus app.css auf und führt keine eigenen Farben ein.
 *
 * Das wiederkehrende Bildmotiv ist die Zeilennummer (.line-ref): sie ist das,
 * was das Produkt liefert, also zeigt die Seite sie statt einer Illustration.
 */

.page.lp { max-width: 72rem; }

.lp p { max-width: var(--measure); }

/* Volle Breite für die Bandfarbe, ohne 100vw und damit ohne horizontalen
 * Scrollbalken auf Systemen mit sichtbarer Scrollleiste. Ein Schatten zählt
 * nicht zur Scrollfläche, ein breiteres Element schon. */
.lp-hero,
.lp-cta {
  box-shadow: 0 0 0 100vmax var(--lp-band);
  clip-path: inset(0 -100vmax);
}

/* ---------------------------------------------------------------- hero */

main:has(.lp) { padding-top: 0; }

.lp-hero {
  --lp-band: var(--c-paper);
  background:
    radial-gradient(28rem 20rem at 75% 50%, var(--c-brand-tint), transparent 75%),
    var(--c-paper);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--s-7);
  align-items: center;
  padding: var(--s-8) 0 var(--s-7);
  border-bottom: 1px solid var(--c-border);
}

.lp-eyebrow {
  display: inline-block;
  margin-bottom: var(--s-4);
  padding: var(--s-1) var(--s-3);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-accent);
  background: var(--c-accent-tint);
  border-radius: 999px;
}

.lp-hero h1 {
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 720;
  margin-bottom: var(--s-4);
  text-wrap: balance;
}

.lp-hero__lede {
  font-size: var(--t-md);
  color: var(--c-ink-soft);
  max-width: 52ch;
}

.btn--lg { padding: var(--s-3) var(--s-5); font-size: var(--t-md); }

.lp-checks {
  list-style: none;
  padding: 0;
  margin: var(--s-5) 0 0;
  display: grid;
  gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--c-ink-soft);
}

.lp-checks li {
  position: relative;
  padding-left: var(--s-5);
}

.lp-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 0.9rem;
  height: 0.5rem;
  border-left: 2px solid var(--c-ok);
  border-bottom: 2px solid var(--c-ok);
  transform: rotate(-45deg) scale(0.8);
}

.lp-checks a { color: var(--c-ink); }

.lp-meta {
  margin-top: var(--s-4);
  font-size: var(--t-xs);
  color: var(--c-ink-faint);
}

/* --------------------------------------------- hero: Formular-Auszug */

.lp-sheet {
  margin: 0;
  background: var(--c-paper);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow:
    0 1px 2px rgb(23 34 46 / 6%),
    0 12px 32px rgb(23 34 46 / 10%),
    0 32px 64px -24px rgb(29 63 94 / 18%);
  padding: var(--s-5);
  transform: rotate(0.6deg);
}

.lp-sheet__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-2);
  border-bottom: 2px solid var(--c-ink);
}

.lp-sheet__form {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.lp-sheet__year { font-size: var(--t-sm); color: var(--c-ink-faint); }

.lp-sheet__table td { padding: var(--s-2) var(--s-1); }
.lp-sheet__table td:first-child { width: 1%; white-space: nowrap; }
.lp-sheet__table tr.is-total td { border-bottom: 0; }

.lp-sheet__aus {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-1) var(--s-3);
  margin-top: var(--s-4);
  padding: var(--s-3);
  font-size: var(--t-sm);
  background: var(--c-ok-tint);
  border-radius: var(--radius);
}

.lp-sheet__aus .lp-sheet__form { grid-column: 1 / -1; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-ok); }
.lp-sheet__aus .num { font-family: var(--font-num); }

.lp-sheet figcaption {
  margin-top: var(--s-3);
  font-size: var(--t-xs);
  color: var(--c-ink-faint);
}

/* -------------------------------------------------------------- facts */

.lp-facts {
  list-style: none;
  margin: 0;
  padding: var(--s-6) 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
  font-size: var(--t-sm);
  color: var(--c-ink-soft);
}

.lp-facts strong {
  display: block;
  font-size: var(--t-xl);
  color: var(--c-brand);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* ------------------------------------------------------------ sections */

.lp-section { padding-top: var(--s-8); }

.lp-section > h2 {
  margin-top: 0;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  letter-spacing: -0.02em;
  max-width: 32ch;
  text-wrap: balance;
}

.lp-section__lede { font-size: var(--t-md); color: var(--c-ink-soft); }

.lp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--s-4);
  margin: var(--s-5) 0;
}

.lp-card {
  background: var(--c-paper);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
}

.lp-card h3 { margin-top: 0; font-size: var(--t-lg); }
.lp-card p { font-size: var(--t-sm); color: var(--c-ink-soft); margin-bottom: 0; }

.lp-tag {
  display: inline-block;
  margin-bottom: var(--s-3) !important;
  font-family: var(--font-num);
  font-size: var(--t-xs) !important;
  color: var(--c-brand) !important;
  background: var(--c-brand-tint);
  padding: 0.1rem 0.5rem;
  border-radius: 3px;
}

/* ------------------------------------------------------------- steps */

.lp-steps {
  list-style: none;
  counter-reset: lp-step;
  padding: 0;
  margin: var(--s-5) 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
}

.lp-steps li {
  counter-increment: lp-step;
  padding-top: var(--s-4);
  border-top: 2px solid var(--c-brand);
}

.lp-steps li::before {
  content: counter(lp-step, decimal-leading-zero);
  display: block;
  font-family: var(--font-num);
  font-size: var(--t-sm);
  color: var(--c-accent);
  font-weight: 700;
  margin-bottom: var(--s-2);
}

.lp-steps h3 { margin-top: 0; }
.lp-steps p { color: var(--c-ink-soft); margin: 0; }

/* ----------------------------------------------------------- compare */

.lp-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
  margin: var(--s-5) 0 var(--s-4);
}

.lp-compare__col {
  padding: var(--s-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--c-border);
  background: var(--c-paper);
}

.lp-compare__col--hl {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px var(--c-brand-tint);
}

.lp-compare__label {
  font-size: var(--t-sm);
  color: var(--c-ink-faint);
  margin-bottom: var(--s-1);
}

.lp-compare__method {
  font-size: var(--t-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--s-3);
}

.lp-compare__col--hl .lp-compare__method { color: var(--c-brand); }

.lp-compare ul { margin: 0; padding-left: var(--s-5); font-size: var(--t-sm); }
.lp-compare li + li { margin-top: var(--s-1); }

.lp-details {
  margin-bottom: var(--s-4);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-paper);
}

.lp-details > summary {
  cursor: pointer;
  padding: var(--s-3) var(--s-4);
  font-weight: 600;
  color: var(--c-brand);
}

.lp-details[open] > summary { border-bottom: 1px solid var(--c-border); }
.lp-details .table-scroll { margin: 0; }

/* ------------------------------------------------------------- price */

.lp-price {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--s-6);
  align-items: center;
}

.lp-price__box {
  text-align: center;
  padding: var(--s-6) var(--s-5);
  background: var(--c-paper);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.lp-price__box p { margin-inline: auto; }

.lp-price__amount {
  font-size: var(--t-2xl);
  font-weight: 720;
  letter-spacing: -0.03em;
  color: var(--c-brand);
  margin-bottom: 0;
}

/* ---------------------------------------------------- Ratgeber, Rechner */

.lp-tools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--s-4);
  margin: var(--s-5) 0;
}

.lp-tool {
  display: block;
  padding: var(--s-4) var(--s-5);
  background: var(--c-brand-tint);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  color: var(--c-ink);
  text-decoration: none;
}

.lp-tool:hover { border-color: var(--c-brand); color: var(--c-ink); }
.lp-tool strong { display: block; color: var(--c-brand); }
.lp-tool span { font-size: var(--t-sm); color: var(--c-ink-soft); }

.lp-links {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2 22rem;
  column-gap: var(--s-6);
  font-size: var(--t-sm);
}

.lp-links li {
  break-inside: avoid;
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--c-border);
}

.lp-links a { text-decoration: none; }
.lp-links a:hover { text-decoration: underline; }

/* --------------------------------------------------------------- CTA */

.lp-cta {
  --lp-band: var(--c-brand);
  background: var(--c-brand);
  margin-top: var(--s-8);
  padding: var(--s-7) 0;
  color: #fff;
  text-align: center;
}

.lp-cta h2 { margin-top: 0; color: #fff; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.lp-cta p { margin-inline: auto; color: rgb(255 255 255 / 80%); }

.btn--light { background: #fff; color: var(--c-brand); }
.btn--light:hover { background: var(--c-brand-tint); color: var(--c-brand-dark); }

.lp > section.card { margin-top: var(--s-7); }

/* ------------------------------------------------------------ mobile */

@media (max-width: 52rem) {
  .lp-hero {
    grid-template-columns: 1fr;
    gap: var(--s-6);
    padding-top: var(--s-6);
  }
  .lp-hero { background: var(--c-paper); }
  .lp-sheet { transform: none; }
  .lp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-steps,
  .lp-compare,
  .lp-price { grid-template-columns: 1fr; }
  .lp-section { padding-top: var(--s-7); }
}

@media (prefers-reduced-motion: no-preference) {
  .lp-tool,
  .btn { transition: background-color 120ms ease, border-color 120ms ease; }
}