/* Landing page (www.<domain> / root) — Feature 021, spec.md FR-012/FR-085
   revised 2026-08-07: this surface is now a deliberate marketing/brand
   moment, not the bare notice page it started as. Loads after styles.css
   (fonts, spacing/radius tokens, the still-theme-adaptive --color-* product
   tokens used by the legal pages) and layers the brand palette on top.

   Deliberately single-theme (no prefers-color-scheme branching): the hero
   and CTA bands are a fixed brand-navy block regardless of OS setting, like
   a printed brochure — consistent with the brand colors being reserved for
   "the mark, lockup and marketing/brand moments" (designitems/TEM Design
   System/readme.md). The legal pages (build_legal.py) keep the adaptive
   product-neutral theme from styles.css; this file never touches them. */

:root {
  --brand-navy-800: #132c39;
  --brand-navy-900: #0b1d26;
  --brand-ink: #0e2430;
  --brand-orange-500: #ff7a3d;
  --brand-orange-600: #e85a1e;
  --brand-off-white: #edeff2;
  --brand-steel-light: #5a7484;
  --brand-steel-dark: #8fa6b2;
}

.landing {
  color: var(--brand-ink);
  background: #ffffff;
}

.landing section {
  padding: var(--space-10) var(--space-6);
}

.landing .section-inner {
  max-width: 64rem;
  margin: 0 auto;
}

.landing .measure {
  max-width: 40rem;
}

/* — Eyebrow / utility label register. IBM Plex Mono stays reserved for the
   logo wordmark only (readme.md: "not used as a UI font anywhere in the
   product") — hierarchy here comes from Inter's own weight axis instead:
   heavy + tracked-out caps for labels, extrabold for headings, regular for
   body. One family, three registers. */

.eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 var(--space-3);
}

.landing h1 {
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

.landing h2 {
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.005em;
  margin: 0 0 var(--space-2);
  text-wrap: balance;
}

.landing .lede {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  margin: 0 0 var(--space-6);
  text-wrap: pretty;
}

/* — Hero: fixed brand-navy gradient, the same two stops as the logo lockup
   itself, so the page opens on a direct echo of the mark rather than a
   generic hero treatment. */

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--brand-navy-800) 0%, var(--brand-navy-900) 100%);
  color: var(--brand-off-white);
  padding: var(--space-10) var(--space-6);
}

.hero .section-inner {
  position: relative;
  z-index: 1;
}

.hero .lede {
  color: var(--brand-steel-dark);
  max-width: 38rem;
}

.hero .brand {
  display: block;
  margin-bottom: var(--space-10);
}

.hero .brand img {
  display: block;
  height: 2.5rem;
  width: auto;
}

/* Oversized, low-opacity equipment tag — the same path data as the logo
   mark's own tag glyph (assets/logo/*.svg), not a stock graphic — bleeding
   off the top-right corner as texture, not a second logo. */
.hero-motif {
  position: absolute;
  top: -8rem;
  right: -6rem;
  width: 26rem;
  height: 26rem;
  opacity: 0.16;
  pointer-events: none;
}

@media (max-width: 40rem) {
  .hero-motif {
    width: 16rem;
    height: 16rem;
    top: -4rem;
    right: -5rem;
  }
}

/* — CTA pair, used in both the hero and the closing band. */

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--control-height);
  padding: 0 var(--space-6);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 120ms;
}

.btn:hover {
  opacity: 0.9;
}

.btn-primary {
  background: linear-gradient(135deg, var(--brand-orange-500) 0%, var(--brand-orange-600) 100%);
  color: #1a0900;
  border: 1px solid transparent;
}

.btn-secondary-on-dark {
  background: transparent;
  color: var(--brand-off-white);
  border: 1px solid var(--brand-steel-light);
}

.btn-secondary-on-light {
  background: transparent;
  color: var(--brand-ink);
  border: 1px solid #c7ccd1;
}

.cta-note {
  font-size: var(--text-sm);
  color: var(--brand-steel-dark);
  margin: var(--space-3) 0 0;
}

.section-light .cta-note {
  color: var(--brand-steel-light);
}

/* — "Warum tem" grid: four concrete points, card treatment carried over
   from the product design system (Card.jsx: full 1px border + fill,
   radius-md, no shadow) rather than a colored-accent card. */

.section-light {
  background: var(--brand-off-white);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (max-width: 40rem) {
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

.point-card {
  border: 1px solid #c7ccd1;
  border-radius: var(--radius-md);
  background: #ffffff;
  padding: var(--space-6);
}

.point-card h2 {
  font-size: var(--text-lg);
}

.point-card p {
  margin: 0;
  color: var(--brand-steel-light);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/* — Anwendungsfälle: drei konkrete Ausprägungen desselben Workflow-
   Mechanismus (nicht drei weitere, unabhängige Merkmale) — dieselbe
   Kartenoptik wie .point-card, drei statt vier Spalten. */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (max-width: 56rem) {
  .grid-3 {
    grid-template-columns: 1fr;
  }
}

/* — "So funktioniert es": a genuine three-step sequence (scan → capture →
   file/prove), so numbering here encodes real order, unlike a decorative
   01/02/03 on non-sequential content. */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  counter-reset: step;
}

@media (max-width: 48rem) {
  .steps {
    grid-template-columns: 1fr;
  }
}

.step {
  counter-increment: step;
}

.step::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
  background: var(--brand-navy-900);
  color: var(--brand-off-white);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

.step h2 {
  font-size: var(--text-lg);
}

.step p {
  margin: 0;
  color: var(--brand-steel-light);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/* — Zielgruppen: two genuinely different buyer concerns, named separately
   rather than folded into one generic "for everyone" block. */

.audience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

@media (max-width: 48rem) {
  .audience-grid {
    grid-template-columns: 1fr;
  }
}

.audience-card {
  border: 1px solid #c7ccd1;
  border-radius: var(--radius-md);
  background: #ffffff;
  padding: var(--space-6);
}

.audience-card h2 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-4);
}

.audience-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.audience-card li {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--brand-ink);
  padding-left: var(--space-4);
  position: relative;
}

.audience-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: var(--brand-orange-500);
}

/* — Closing CTA band: echoes the hero so the page opens and closes on the
   same brand block. */

.cta-band {
  background: linear-gradient(135deg, var(--brand-navy-800) 0%, var(--brand-navy-900) 100%);
  color: var(--brand-off-white);
  text-align: center;
}

.cta-band .section-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cta-band h2 {
  color: #ffffff;
}

.cta-band .lede {
  color: var(--brand-steel-dark);
  max-width: 34rem;
}

/* — Footer: quiet, same information as before (legal links + contact),
   deliberately not styled as another marketing section. */

.landing-footer {
  background: #ffffff;
  border-top: 1px solid #e4e6e9;
  padding: var(--space-6);
}

.landing-footer .section-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}

.landing-footer .legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.landing-footer .legal-links a,
.landing-footer .contact a {
  color: var(--brand-ink);
}

.landing-footer .contact {
  font-size: var(--text-sm);
  color: var(--brand-steel-light);
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .landing [data-reveal] {
    animation: landing-fade-up 500ms ease-out both;
  }
}

@keyframes landing-fade-up {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}