/* landing.css — Hero + Beispiel-Card + Prozess-Reihe */

.landing { padding: var(--space-12) 0 var(--space-20); position: relative; }

.landing__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
  color: var(--accent);
}
.landing__eyebrow-rule {
  display: inline-block;
  width: 32px; height: 1px;
  background: var(--accent);
}

.landing__hero h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--type-display);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0;
}
.landing__hero h1 em { color: var(--accent); font-style: italic; }

.landing__hero-lead {
  font-size: var(--type-body-lg);
  color: var(--ink-70);
  margin-top: var(--space-8);
  max-width: 480px;
  line-height: 1.55;
}

.landing__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-12);
}

.landing__example {
  margin-top: var(--space-12);
}
.landing__example-receipt {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--space-4);
  row-gap: var(--space-2);
  font-size: var(--type-body);
  margin-bottom: var(--space-6);
}
.landing__example-receipt > .mono-label { align-self: center; }

.landing__process {
  margin-top: var(--space-16);
  padding-top: var(--space-8);
  border-top: 1px solid var(--ink-15);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
}
.landing__process-step h3 {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  margin: var(--space-2) 0 var(--space-2);
  font-weight: 400;
}
.landing__process-step p {
  font-size: var(--type-body);
  color: var(--ink-70);
  line-height: 1.5;
  max-width: 320px;
  margin: 0;
}

.landing__ornament {
  position: absolute;
  right: -120px;
  top: 60px;
  opacity: 0.5;
  pointer-events: none;
}

/* Tablet und größer */
@media (min-width: 768px) {
  .landing__process { grid-template-columns: repeat(3, 1fr); }
}

/* Desktop */
@media (min-width: 1200px) {
  .landing { padding-top: 0; }
  .landing__layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-20);
    align-items: start;
    padding-top: 100px;
  }
  .landing__example { margin-top: var(--space-12); }
}