/* Kanzelwart landing page (P9) – loaded on "/" only. Tokens come from app.css; the hero scene has its own fixed night palette. */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

.body-landing { --lp-display: "Fraunces", Georgia, "Times New Roman", serif; --lp-ink: #F4F1E8; }
.lp-display { font-family: var(--lp-display); font-weight: 650; letter-spacing: -.01em; font-optical-sizing: auto; }

/* Header floats over the hero */
.body-landing .site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 5; max-width: 1200px; }
.body-landing .site-header__brand { color: var(--lp-ink); }
.body-landing .site-header .btn--ghost { color: var(--lp-ink); }
.body-landing .site-header .btn--ghost:hover { background: rgba(255, 255, 255, .14); }
.body-landing .site-header .btn--primary { background: var(--lp-ink); color: #1F3D2B; }
.body-landing .site-header .btn--primary:hover { background: #fff; }
.body-landing .site-header :focus-visible, .lp-hero :focus-visible { outline-color: #9CC9FF; }

/* Light buttons on the dark scene */
.btn--light { background: var(--lp-ink); color: #1F3D2B; }
.btn--light:hover { background: #fff; }
.btn--outline-light { border-color: rgba(244, 241, 232, .75); color: var(--lp-ink); background: transparent; }
.btn--outline-light:hover { background: rgba(255, 255, 255, .14); }

/* Hero */
.lp-hero { position: relative; overflow: hidden; background: #0E1F16; color: var(--lp-ink); min-height: min(92vh, 780px); display: flex; align-items: center; padding: 96px var(--s4) 120px; isolation: isolate; }
.lp-hero__art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.lp-hero__art [data-depth] { will-change: transform; }
.lp-hero__inner { max-width: 760px; margin: 0 auto; width: 100%; text-shadow: 0 1px 14px rgba(5, 14, 9, .5); }
@media (min-width: 1000px) { .lp-hero__inner { margin-left: max(var(--s5), calc((100vw - 1200px) / 2 + var(--s4))); } }
.lp-eyebrow { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 600; color: #DCE8CF; margin-bottom: var(--s3); }
.lp-hero h1 { font-size: clamp(32px, 7.4vw, 64px); line-height: 1.08; margin-bottom: var(--s4); }
.lp-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.lp-word > span { display: inline-block; will-change: transform; }
.lp-lead { font-size: clamp(17px, 2.4vw, 20px); max-width: 60ch; color: rgba(244, 241, 232, .94); }
.lp-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s5) 0 var(--s3); }
.lp-note { font-size: var(--fs-s); color: rgba(244, 241, 232, .85); }
@media (max-width: 479px) { .lp-actions .btn { width: 100%; } }
.lp-scroll { position: absolute; left: 50%; bottom: var(--s4); transform: translateX(-50%) rotate(90deg); width: var(--tap); height: var(--tap); display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--lp-ink); border: 2px solid rgba(244, 241, 232, .6); animation: lp-bob 2.4s ease-in-out infinite; }
.lp-scroll:hover { background: rgba(255, 255, 255, .14); }
@keyframes lp-bob { 50% { transform: translateX(-50%) rotate(90deg) translateX(6px); } }

/* Stats */
.lp-stats { background: var(--c-primary); color: var(--c-on-primary); }
.lp-stats__list { list-style: none; margin: 0 auto; padding: var(--s6) var(--s4); max-width: 1100px; display: grid; gap: var(--s5) var(--s4); grid-template-columns: repeat(2, 1fr); text-align: center; }
@media (min-width: 768px) { .lp-stats__list { grid-template-columns: repeat(4, 1fr); } }
.lp-stat { display: grid; gap: var(--s1); }
.lp-stat__value { font-size: clamp(36px, 7vw, 56px); line-height: 1; font-variant-numeric: tabular-nums; }
.lp-stat__label { font-size: var(--fs-m); }

/* Sections */
.lp-section { max-width: 1100px; margin: 0 auto; padding: var(--s6) var(--s4); }
.lp-section--band { max-width: none; background: var(--c-sand); padding-block: 48px; }
.lp-section--band > * { max-width: 1100px; margin-inline: auto; }
.lp-h2 { font-size: clamp(28px, 5vw, 40px); margin-bottom: var(--s5); }
.lp-features { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.lp-feature { transition: transform .25s ease, box-shadow .25s ease; }
@media (hover: hover) { .lp-feature:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(20, 30, 20, .14); } }
.lp-feature h3 { margin-bottom: var(--s2); }

/* Flow: phone + timeline */
.lp-flow { display: grid; gap: var(--s6); align-items: start; }
@media (min-width: 900px) { .lp-flow { grid-template-columns: minmax(260px, 340px) 1fr; gap: 64px; } .lp-phone-wrap { position: sticky; top: 48px; } }
.lp-phone-wrap { display: flex; justify-content: center; }
.lp-phone { position: relative; width: 264px; height: 540px; border-radius: 38px; background: #0E1512; padding: 12px; box-shadow: 0 24px 60px rgba(10, 20, 14, .35), inset 0 0 0 2px #2B362E; }
.lp-phone__notch { position: absolute; top: 20px; left: 50%; width: 76px; height: 20px; margin-left: -38px; border-radius: 12px; background: #0E1512; z-index: 3; }
.lp-screen { position: absolute; inset: 12px; border-radius: 28px; overflow: hidden; background: #fff; color: #1C211D; padding: 46px 14px 14px; display: flex; flex-direction: column; gap: var(--s3); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s; }
.lp-screen.is-active { opacity: 1; visibility: visible; }
.lp-screen__bar { display: flex; align-items: center; gap: var(--s2); font-weight: 700; font-size: var(--fs-s); position: absolute; top: 14px; left: 0; right: 0; padding: 14px 18px 0; z-index: 2; }
.lp-screen[data-screen="0"] { padding: 0; }
.lp-map { width: 100%; height: 100%; object-fit: cover; }
.lp-screen[data-screen="0"] .lp-screen__bar { background: rgba(255, 255, 255, .92); padding-bottom: 8px; top: 0; padding-top: 40px; }
.lp-sheet { position: absolute; left: 10px; right: 10px; bottom: 10px; background: #fff; border-radius: 14px; box-shadow: 0 2px 14px rgba(20, 30, 20, .25); padding: 12px; display: grid; gap: var(--s2); font-size: var(--fs-s); }
.lp-chip { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; border: 1px solid currentColor; }
.lp-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.lp-chip--due { color: #8A5A00; }
.lp-chip--ok { color: #1E6B2E; }
.lp-progress { height: 8px; border-radius: 4px; background: #E2DED3; overflow: hidden; }
.lp-progress span { display: block; width: 30%; height: 100%; background: #1F3D2B; }
.lp-q { font-weight: 700; font-size: var(--fs-l); margin: 0; }
.lp-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.lp-seg span { display: flex; align-items: center; justify-content: center; min-height: 56px; border: 2px solid #80877F; border-radius: 10px; font-weight: 700; font-size: var(--fs-s); }
.lp-seg .is-ok { background: #1E6B2E; border-color: #1E6B2E; color: #fff; }
.lp-photo { display: flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 52px; border: 2px dashed #80877F; border-radius: 10px; font-size: var(--fs-s); color: #4B534C; }
.lp-cta { margin-top: auto; text-align: center; background: #1F3D2B; color: #fff; padding: 14px; border-radius: 10px; font-weight: 700; }
.lp-lines { margin: 0; padding-left: 18px; display: grid; gap: var(--s2); font-size: var(--fs-s); }
.lp-hash { margin-top: auto; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; background: #EFE8DA; border-radius: 8px; padding: 10px; }

.lp-steps { --lp-rail: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s6); position: relative; }
.lp-steps::before, .lp-steps::after { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; background: var(--c-line); }
.lp-steps::after { background: var(--c-primary); transform-origin: top; transform: scaleY(var(--lp-rail)); }
.lp-step { position: relative; z-index: 1; display: grid; grid-template-columns: 44px 1fr; gap: var(--s4); align-items: start; }
.lp-step .steps__num { margin: 0; box-shadow: 0 0 0 6px var(--c-sand); transition: transform .3s; }
.lp-step.is-active .steps__num { transform: scale(1.12); }
.lp-step h3 { margin-bottom: var(--s2); font-size: var(--fs-xl); }
@media (min-width: 900px) { .lp-step { min-height: 160px; } }

/* Reveal start states only when motion is allowed and the scripts run (landing-boot.js sets .lp-anim) */
.lp-anim [data-reveal], .lp-anim [data-hero] { opacity: 0; }
.lp-anim [data-split] { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .lp-scroll { animation: none; }
  .lp-screen, .lp-step .steps__num, .lp-feature { transition: none; }
}
.lp-actions .btn { text-shadow: none; }

/* Streckenliste section */
.lp-tally { display: grid; gap: var(--s5); align-items: center; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.lp-tally__text p { margin: 0 0 var(--s3); font-size: var(--fs-l, 1.125rem); }
.lp-tally__sheet { display: grid; gap: var(--s3); max-width: 420px; }
.lp-tally__head { display: flex; align-items: center; gap: var(--s2); font-weight: 700; }
.lp-tally__sheet table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.lp-tally__sheet th, .lp-tally__sheet td { padding: 6px 4px; border-bottom: 1px solid var(--c-line); text-align: right; }
.lp-tally__sheet th:first-child, .lp-tally__sheet td:first-child { text-align: left; }
.lp-tally__sheet thead th { color: var(--c-muted); font-size: var(--fs-s); }