/* Startseite: «Bereit? Dann voran.» Schwarz auf Weiss, in jedem Farbmodus. */
html:has(.app.is-landing), body:has(.app.is-landing) { background: #ffffff; color-scheme: light; }

.ld {
  --ld-bg: #ffffff;
  --ld-ink: #0b0b0c;
  --ld-muted: #6b6f76;
  --ld-line: #d9dbdf;
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
  padding: env(safe-area-inset-top, 0px) var(--gutter, 16px) 0;
  background: var(--ld-bg); color: var(--ld-ink);
}
.ld-main { flex: 1; display: grid; place-content: center; justify-items: center; gap: clamp(32px, 6vh, 56px); padding: 48px 0 24px; text-align: center; }

/* Schrift: wie die Wortmarke, sehr fett und breit */
.ld-title {
  margin: 0; display: grid; justify-items: center; gap: 0.04em;
  font-size: clamp(50px, 9.4vw, 156px); line-height: 0.92; font-weight: 900; font-stretch: 125%; letter-spacing: -0.035em; text-transform: uppercase;
}
.ld-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 0.28em; }
.ld-word { display: inline-flex; }
.ld-l3 { font-style: italic; }
.ld-ch { display: inline-block; }
.ld-bar { display: block; align-self: baseline; width: 0.5em; height: 0.2em; margin-left: -0.12em; background: var(--ld-ink); transform: skewX(-18deg); transform-origin: left center; }

.ld-cta { display: grid; justify-items: center; gap: 14px; }
.ld-btn {
  display: inline-flex; align-items: center; justify-content: center; min-width: 240px; height: 56px; padding: 0 32px;
  border: 0; border-radius: var(--r-s, 4px); background: var(--ld-ink); color: var(--ld-bg); cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 800; font-stretch: 125%; letter-spacing: 0.1em; text-transform: uppercase;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ld-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(11, 11, 12, 0.18); }
.ld-btn:focus-visible, .ld-link:focus-visible, .ld-foot .link-btn:focus-visible { outline: 2px solid var(--ld-ink); outline-offset: 3px; }
.ld-login { margin: 0; color: var(--ld-muted); font-size: 14px; }
.ld-link { padding: 0; border: 0; background: none; color: var(--ld-ink); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Rechtliches: sehr klein */
.ld-foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 16px; padding: 14px 0 calc(14px + env(safe-area-inset-bottom, 0px)); color: var(--ld-muted); font-size: 11px; }
.ld-foot .legal-links { gap: 4px 14px; justify-content: center; }
.ld-foot .link-btn { padding: 2px 0; color: var(--ld-muted); font-size: 11px; font-weight: 500; text-decoration: none; }
.ld-foot .link-btn:hover { color: var(--ld-ink); text-decoration: underline; }

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion: no-preference) {
  .ld.is-in .ld-ch { animation: ld-rise 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i) * 45ms + 120ms); }
  .ld.is-in .ld-l3 .ld-ch { animation-name: ld-dash; animation-duration: 0.7s; animation-delay: calc(var(--i) * 40ms + 260ms); }
  .ld.is-in .ld-l1 .ld-ch:last-child { animation-name: ld-tilt; animation-duration: 0.9s; }
  .ld.is-in .ld-bar { animation: ld-bar-in 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) 1.05s both, ld-bar-go 3.6s ease-in-out 2.4s infinite; }
  .ld.is-in .ld-cta { animation: ld-fade 0.6s ease 1.25s both; }
  .ld.is-in .ld-foot { animation: ld-fade 0.6s ease 1.5s both; }
}
@keyframes ld-rise { from { opacity: 0; transform: translateY(0.55em) rotate(4deg); } to { opacity: 1; transform: none; } }
@keyframes ld-tilt { 0% { opacity: 0; transform: translateY(0.4em) rotate(-24deg); } 60% { opacity: 1; transform: rotate(10deg); } 100% { opacity: 1; transform: none; } }
@keyframes ld-dash { from { opacity: 0; transform: translateX(-0.9em) skewX(-24deg); } 70% { opacity: 1; transform: translateX(0.04em) skewX(4deg); } to { opacity: 1; transform: none; } }
@keyframes ld-bar-in { from { opacity: 0; transform: translateX(-1.4em) skewX(-18deg) scaleX(2.4); } to { opacity: 1; transform: skewX(-18deg); } }
@keyframes ld-bar-go { 0%, 70%, 100% { transform: skewX(-18deg) translateX(0); } 80% { transform: skewX(-18deg) translateX(0.22em) scaleX(1.25); } 90% { transform: skewX(-18deg) translateX(-0.02em); } }
@keyframes ld-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (max-width: 520px) {
  .ld-title { font-size: 13.6vw; }
  .ld-btn { width: 100%; min-width: 0; }
  .ld-cta { width: 100%; max-width: 360px; }
}