/* Stil nach dem VM1000-Spartan-Plakat: schwere, breite Großbuchstaben (Montserrat 900),
   zweite Zeile und Akzente im grünen Verlauf, Nebel-Landschaft hinter freigestellten Maschinen.
   Liegt als letzte Schicht über allen anderen Stylesheets. */

:root {
  --display: 'Montserrat', 'Arial Black', system-ui, sans-serif;
  --green-1: #242c1e;
  --green-2: #415136;
  --green-3: #708c2f;
  --grad: linear-gradient(180deg, var(--green-2) 0%, var(--green-1) 100%);
  --grad-text: linear-gradient(180deg, #6d8a2a 0%, #323e2a 55%, #222a1c 100%);
}

/* ---------- Überschriften ---------- */
.display { font-family: var(--display); font-weight: 900; line-height: 1.02; letter-spacing: -.022em; text-transform: uppercase; }
.display span { white-space: normal; }
h1.display { font-size: clamp(32px, 4.5vw, 66px); }
h2.display { font-size: clamp(27px, 3.3vw, 48px); }
.display .green, .display span:last-child:not(:first-child) {
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lp-hero .display span:last-child:not(:first-child), .problem .display span:last-child:not(:first-child),
.demo-v2 .display span:last-child:not(:first-child), .cta-card .display span:last-child:not(:first-child) {
  background: linear-gradient(180deg, #ecf0d8, #c3d685); -webkit-background-clip: text; background-clip: text;
}
.lp-hero h1.display { font-size: clamp(32px, 4.6vw, 70px); }

/* Kleine Display-Rollen (Preise, Kennzahlen, Kartentitel) bleiben kräftig, aber enger */
.mcard h3, .step-body h3, .pains b, .ben b, .trust b, .form-title, .wtile-txt b, .mw a,
.tools em, .mcard-foot b, .price b, .p-cta b, .pp-price, .wb-name, .wb-num, .wb-info h3.display,
.wb-foot b, .wb-specs b, .hp-specs b, .facts b, .step-no, .how li::before, .hw-facts b {
  font-family: var(--display); font-weight: 900; letter-spacing: -.02em;
}
.mcard h3 { font-size: 22px; }
.step-body h3 { font-size: 20px; }
.pains b, .ben b { font-size: 17px; }
.trust b { font-size: 15px; }
.form-title { font-size: 22px; }
.tools em { font-size: 16px; }
.mcard-foot b, .price b, .wb-foot b { font-size: 21px; }
.p-cta b { font-size: 15px; }
.pp-price { font-size: clamp(22px, 2.2vw, 30px); }
.wb-name { font-size: 16px; }
.wb-num { font-size: 17px; }
.wb-specs b, .hp-specs b { font-size: clamp(17px, 1.6vw, 22px); }
.step-no { font-size: 16px; }
.mw a { font-size: clamp(18px, 2vw, 26px); }

/* ---------- Grüner Verlauf als Akzent ---------- */
.btn-primary { background: var(--grad); border: 0; }
.btn-primary:hover { background: linear-gradient(180deg, var(--green-3), var(--green-2)); }
.eyebrow { color: var(--green-2); }
.step-no, .tri-go { background: var(--grad); }
.ben { border-top-color: transparent; border-image: var(--grad) 1; }
.demo-v2, .problem { background: linear-gradient(180deg, #1c2217 0%, #141910 100%); }
.lead-form .btn, .sticky-cta a.go { background: var(--grad); border: 0; }

/* ---------- Riesenwort: grüner Verlauf wie auf dem Plakat ---------- */
.p-stage { --fs: calc(100cqw / (var(--chars, 6) * .8)); --stretch: 1.95; }
.p-giant {
  font-family: var(--display); font-weight: 900; letter-spacing: -.035em; line-height: .84;
  background: linear-gradient(180deg, #1c2317 0%, #33402a 30%, rgba(67, 83, 55, .55) 62%, rgba(67, 83, 55, 0) 96%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.p-title { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; }
.pp h1.pp-title { font-weight: 900; }

/* ---------- Einsatzwelt-Plakate im Hero: Nebel-Landschaft hinter der Maschine ---------- */
.tri-panel { background: #eceeea var(--bg) center top / cover no-repeat; }
.tri-panel .p-stage { --stretch: 2.35; }
.tri-panel .p-desc { color: #2e3431; }
.p-icons { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; max-width: 420px; margin: 4px 0 16px; padding: 0; list-style: none; }
.p-icons li { display: grid; justify-items: center; gap: 4px; padding: 4px 6px; }
.p-icons li + li { border-left: 1px solid #b8bcb7; }
.p-icons svg { width: 30px; height: 30px; fill: none; stroke: var(--green-1); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.p-icons b { font: 900 11.5px/1.2 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.p-icons span { font: 500 11px/1.25 var(--text); text-transform: uppercase; letter-spacing: .04em; color: #4d534f; }

@media (max-width: 900px) { .tri-panel .p-stage { --stretch: 1.9; } }