/* Marketing page. Builds on the tokens in style.css; no external assets. */
body.landing { background:var(--paper); }
body.landing main { display:block; }
.land-nav { display:flex; gap:26px; margin-left:18px; }
.land-nav a { color:var(--gedimmt); text-decoration:none; font-size:.86rem; font-weight:600; }
.land-nav a:hover { color:var(--text); }
body.landing .banner-tools { display:flex; align-items:center; gap:14px; }

.land-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 22px; border-radius:11px; background:var(--verlauf); color:#fff; font-weight:650; font-size:.95rem; text-decoration:none; transition:background .15s,transform .15s; }
.land-button:hover { background:#184832; transform:translateY(-1px); }
.land-button.small { padding:9px 15px; font-size:.82rem; border-radius:9px; }
.land-button.ghost { background:transparent; color:var(--blau); border:1px solid var(--linie); }
.land-button.ghost:hover { background:#fff; border-color:#92af9b; }
.land-button.light { background:#deefad; color:#1d4a36; }
.land-button.light:hover { background:#eaf6c4; }

.land-hero,.land-section { max-width:1180px; margin:0 auto; padding:0 40px; }
.land-hero { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:64px; align-items:center; padding-top:84px; padding-bottom:96px; }
.land-hero h1 { font-size:clamp(2.7rem,5.2vw,4.4rem); line-height:1.04; margin:6px 0 22px; }
.land-lead { font-size:1.12rem; line-height:1.7; color:var(--gedimmt); max-width:560px; }
.land-actions { display:flex; flex-wrap:wrap; gap:12px; margin:32px 0 18px; }
.land-note { font-size:.82rem; color:var(--leise); }

/* Hero illustration: a miniature board built from real UI shapes. */
.land-demo { position:relative; display:grid; gap:14px; padding:28px; background:linear-gradient(160deg,#e9efe1,#f4f1e6); border:1px solid var(--linie); border-radius:22px; box-shadow:0 30px 60px -40px #223e3466; }
.demo-card { background:#fff; border:1px solid var(--linie); border-radius:14px; padding:16px 18px; box-shadow:var(--shadow); animation:land-rise .7s cubic-bezier(.2,.7,.2,1) both; }
.demo-card p { font-size:.92rem; line-height:1.5; }
.demo-answer { margin-left:34px; border-left:3px solid var(--tealgg); animation-delay:.25s; }
.demo-insight { animation-delay:.5s; }
.demo-meta { display:flex; align-items:center; gap:10px; font-size:.74rem; color:var(--leise); margin-bottom:8px; font-weight:600; }
.demo-chip { background:#e9ede4; color:var(--gedimmt); padding:2px 9px; border-radius:20px; font-size:.68rem; }
.demo-chip.answer { background:#e0eee5; color:var(--gruen); }
.demo-chip.insight { background:#f4ecd0; color:#7a5a12; }
.demo-tags { display:flex; gap:12px; margin-top:10px; font-size:.78rem; color:var(--gedimmt); }
.demo-hidden { color:transparent; text-shadow:0 0 9px #52665b99; user-select:none; }
.demo-pulse { display:flex; align-items:center; gap:14px; justify-self:center; padding:10px 18px; background:#fff; border:1px solid var(--linie); border-radius:40px; font-size:.78rem; font-weight:650; color:var(--gedimmt); animation:land-rise .7s .75s cubic-bezier(.2,.7,.2,1) both; }
.demo-pulse .dot { font-variant-numeric:tabular-nums; }
.demo-pulse .g { color:#2c7251; } .demo-pulse .y { color:#b07a12; } .demo-pulse .r { color:var(--koralle); }
@keyframes land-rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }

.land-section { padding-top:88px; padding-bottom:16px; }
.land-h2 { font-family:Georgia,'Times New Roman',serif; font-weight:400; font-size:clamp(1.9rem,3.2vw,2.6rem); letter-spacing:-.03em; max-width:720px; margin-bottom:38px; }
.land-steps { list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.land-steps li { background:#fff; border:1px solid var(--linie); border-radius:16px; padding:26px; }
.land-steps b { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#255e46; color:#deefad; font-size:.95rem; margin-bottom:18px; }
.land-steps h3,.land-grid h3,.land-list h3 { font-size:1.05rem; margin-bottom:8px; }
.land-steps p,.land-grid p,.land-list p { color:var(--gedimmt); font-size:.92rem; line-height:1.65; }
.land-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.land-grid article { padding:26px; border-radius:16px; background:#fff; border:1px solid var(--linie); transition:transform .2s,box-shadow .2s; }
.land-grid article:hover { transform:translateY(-3px); box-shadow:0 18px 34px -26px #223e3466; }
.land-icon { display:inline-grid; place-items:center; width:44px; height:44px; border-radius:12px; background:#eef2e8; font-size:1.35rem; margin-bottom:16px; }
.land-list { list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:28px 48px; padding-top:6px; border-top:1px solid var(--linie); }
.land-list li { padding-top:24px; }

.land-final { max-width:1100px; margin:96px auto 0; padding:64px 40px; text-align:center; background:var(--verlauf); color:#fff; border-radius:24px; }
.land-final h2 { font-family:Georgia,'Times New Roman',serif; font-weight:400; font-size:clamp(1.8rem,3vw,2.5rem); margin-bottom:12px; }
.land-final p { color:#cfe2d4; margin-bottom:28px; }
.land-footer { max-width:1180px; margin:0 auto; padding:40px; display:flex; justify-content:space-between; gap:20px; font-size:.82rem; color:var(--leise); }
.land-footer a { color:var(--gedimmt); }

@media (prefers-reduced-motion: reduce) { .demo-card,.demo-pulse { animation:none; } .land-grid article,.land-button { transition:none; } }
@media (max-width:1000px) {
  .land-nav { display:none; }
  .land-hero { grid-template-columns:1fr; gap:44px; padding-top:56px; padding-bottom:64px; }
  .land-hero,.land-section { padding-left:25px; padding-right:25px; }
  .land-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px) {
  .land-hero,.land-section { padding-left:18px; padding-right:18px; }
  .land-steps,.land-grid,.land-list { grid-template-columns:1fr; }
  .land-demo { padding:18px; }
  .demo-answer { margin-left:18px; }
  .land-section { padding-top:64px; }
  .land-final { margin:64px 16px 0; padding:44px 22px; }
  .land-footer { padding:30px 18px; flex-direction:column; }
  body.landing .banner-tools .land-button.small { padding:8px 11px; font-size:.75rem; }
}