/* --- the landing page (/start, 2026-10-22) -------------------------------------------------
   Built on features.css (frame, hero, sections, dark band); only what the landing page adds
   is here. Variables only, no fixed colour outside the tokens of app.css and features.css. */

/* the sign-in: in the top bar and nowhere else on the page. An outlined button in the bar's
   own white, like the hero's second button: var(--accent) is the bar's violet in the classic
   theme and the button vanished into it (1.0:1), and a filled cyan one would compete with the
   hero's «Zugang anfragen». */
.doc-topnav .lp-login{background:transparent;border-color:var(--fx-hero-fg);color:var(--fx-hero-fg);font-weight:700}
.doc-topnav .lp-login:hover{background:var(--fx-hero-btn-hover)}

.lp-hero-inner{position:relative;padding:clamp(3.5rem,9vw,6.5rem) 1.5rem}
.lp-hero .fx-statement{max-width:22ch}
/* section headings: a sentence each, so wider and a step smaller than the hero's */
.lp-race-section .fx-statement,.lp-myths-section .fx-statement,.lp-offer-section .fx-statement{max-width:30ch;font-size:clamp(1.7rem,3.4vw,2.6rem)}

/* the race: infection, market, our alert, the attacker's sign-in */
.lp-race{list-style:none;margin:2.8rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem;counter-reset:none}
.lp-step{padding:1.3rem 1.2rem 1.2rem;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.lp-step h3{margin:.7rem 0 .4rem;font-size:1.02rem;line-height:1.3}
.lp-step p{margin:0;font-size:.93rem;line-height:1.55;color:var(--fg-2)}
.lp-step-no{display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--surface-2);color:var(--fg-2);font-weight:700;font-variant-numeric:tabular-nums}
.lp-step.lp-ours{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}
.lp-step.lp-ours .lp-step-no{background:var(--accent);color:var(--accent-fg)}
/* beside the number, wrapping below it where the card is narrow: absolutely placed it covered
   the number in four columns (English at 1280 px) */
.lp-ours-label{margin:0 0 0 .5rem;vertical-align:middle;white-space:normal;background:var(--accent);color:var(--accent-fg)}
.lp-more{margin:1.6rem 0 0;font-weight:600}

/* the misconceptions */
.lp-myths{list-style:none;margin:2.8rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem}
.lp-myth{padding:1.4rem 1.4rem 1.3rem;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);scroll-margin-top:5rem}
.lp-myth-label{margin:0 0 .5rem;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lp-claim{margin:0 0 .7rem;font-size:1.12rem;line-height:1.35;color:var(--brand)}
.lp-claim q{quotes:"«" "»"}
:lang(en) .lp-claim q{quotes:"\201C" "\201D"}
.lp-answer{margin:0 0 .8rem;line-height:1.6;color:var(--fg-2)}
.lp-helps{margin:0;padding-top:.7rem;border-top:1px solid var(--line);font-size:.93rem;line-height:1.55}

/* what you get */
.lp-offer{list-style:none;margin:2.8rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}
.lp-offer-item h3{margin:0 0 .4rem;font-size:1.02rem}
.lp-offer-item p{margin:0 0 .6rem;line-height:1.55;color:var(--fg-2)}
.lp-offer-item a{font-weight:600}
/* six «Mehr dazu» links: the offer's name for a screen reader's link list (WCAG C7). A class,
   since the CSP allows no style attribute; not .hp, that is the register form's bait. */
.lp-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.lp-price{margin:2.4rem 0 0;padding-top:1.4rem;border-top:1px solid var(--line);font-size:1.05rem}

/* the closing band */
.lp-closing .fx-statement{max-width:26ch}
/* fx-center centres the text, not the boxes: both carry a max-width */
.lp-closing .fx-statement,.lp-closing .fx-lead{margin-left:auto;margin-right:auto}
.lp-center{justify-content:center}
/* the second button on the dark band, as in the hero (features.css .fx-hero): a plain .btn
   is the classic violet, 1.1:1 on the band, and in the console a second green one */
.lp-closing .btn:not(.accent){background:transparent;border-color:var(--fx-hero-line);color:var(--fx-hero-fg)}
.lp-closing .btn:not(.accent):hover{background:var(--fx-hero-btn-hover);border-color:var(--fx-hero-fg)}

@media (max-width:880px){
  .lp-race{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp-myths{grid-template-columns:minmax(0,1fr)}
  .lp-offer{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .lp-race,.lp-offer{grid-template-columns:minmax(0,1fr)}
  .lp-myth{padding:1.1rem}
  /* features.css hides the switch on a phone; here it is the first thing a visitor from
     abroad needs, and the top bar wraps anyway */
  .doc-topnav .langs{display:flex}
}