/* wminfra Feedback — landing page styles.
   Extracted 1:1 (FEE-4 decision 5) from the #landing section of design/prototype.html:
   same brand tokens, same layout rules, same copy-adjacent classes. Two differences from
   the prototype, both purely mechanical (no visual/content change):
   1. The prototype's multi-screen `.screen`/proto-bar plumbing is dropped — this file is a
      single static page, not a click-through mockup.
   2. The logo is two swapped <img> elements (light/dark) instead of a base64-encoded
      `--logo-img` custom property — same rendered result, matches the pattern already used
      in src/WMinfra.Feedback.App/wwwroot/app.css, and avoids re-embedding a ~15 KB data URI
      here when the SVG files already live in img/. */

:root{
  --bg:#F6F9F7;
  --surface:#FFFFFF;
  --ink:#121D17;
  --ink-2:#475A4E;
  --ink-3:#748477;
  --line:#D8E2DA;
  --line-strong:#B7C6BB;

  --brand:#0E8A57;          /* wminfra green, text-safe */
  --brand-fill:#0E8A57;     /* filled surfaces */
  --on-brand:#FFFFFF;

  --accent-fill:#F0AD2D;
  --accent-soft:#FBF0D9;

  --ok:#1D7A3E;      --ok-soft:#E3F2E7;
  --warn:#8A5A06;    --warn-soft:#FBF0D9;
  --info:#0A5AA4;    --info-soft:#E3EEF8;

  --font-display:Bahnschrift,'DIN Alternate','Franklin Gothic Medium','Arial Narrow',sans-serif;
  --font-body:'Segoe UI Variable Text','Segoe UI',system-ui,-apple-system,sans-serif;

  --radius:5px;
  --shadow:0 1px 2px rgba(22,32,42,.06),0 4px 14px rgba(22,32,42,.07);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0D1411;
    --surface:#151E18;
    --ink:#E7EFE9;
    --ink-2:#A9B8AD;
    --ink-3:#75857B;
    --line:#25332A;
    --line-strong:#3A4B40;

    --brand:#41C98D;
    --brand-fill:#16AC6F;
    --on-brand:#FFFFFF;

    --accent-fill:#D19426;
    --accent-soft:#33270F;

    --ok:#6FCB8B;      --ok-soft:#12301C;
    --warn:#E8B554;    --warn-soft:#33270F;
    --info:#6FB2E8;    --info-soft:#14283C;

    --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.35);
  }
}

/* ============ Base ============ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:15.5px;
  line-height:1.55;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.15;margin:0;text-wrap:balance}
p{margin:0}
a{color:var(--brand)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:3px}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

.eyebrow{
  font-family:var(--font-display);font-size:.72rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.09em;color:var(--brand);
}
.num{font-variant-numeric:tabular-nums}

/* wminfra logo: two <img>s swapped by theme (see src/WMinfra.Feedback.App/wwwroot/app.css) */
.logo{height:2rem;width:auto}
.logo-dark{display:none}
@media (prefers-color-scheme: dark){
  .logo-light{display:none}
  .logo-dark{display:inline-block}
}
.lockup{
  display:inline-flex;align-items:center;gap:.65em;
  text-decoration:none;white-space:nowrap;
}
.lockup .suffix{
  font-family:var(--font-display);font-weight:600;font-size:1.02rem;
  letter-spacing:.04em;color:var(--ink-2);line-height:1;
  border-left:1px solid var(--line-strong);padding-left:.65em;
}
.lockup:hover .suffix{color:var(--brand)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:.5em;
  border:1px solid var(--line-strong);border-radius:var(--radius);
  background:var(--surface);color:var(--ink);
  padding:.5em 1em;font-weight:600;font-family:var(--font-display);
  letter-spacing:.02em;text-decoration:none;font-size:.92rem;
  transition:background .15s,border-color .15s;
}
.btn:hover{border-color:var(--brand);color:var(--brand)}
.btn-primary{background:var(--brand-fill);border-color:var(--brand-fill);color:var(--on-brand)}
.btn-primary:hover{filter:brightness(1.08);color:var(--on-brand)}
.btn-sm{padding:.3em .7em;font-size:.82rem}

/* Pills / Status (mock board cards) */
.pill{
  display:inline-flex;align-items:center;gap:.4em;
  font-family:var(--font-display);font-size:.72rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;
  padding:.22em .6em;border-radius:999px;white-space:nowrap;
}
.pill::before{content:"";width:.5em;height:.5em;border-radius:50%;background:currentColor}
.s-plan{background:var(--info-soft);color:var(--info)}
.s-work{background:var(--warn-soft);color:var(--warn)}
.s-done{background:var(--ok-soft);color:var(--ok)}

/* ============ Landing ============ */
.landing-header{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  max-width:1060px;margin:0 auto;padding:1.1rem 1.5rem;
}
.landing-nav{display:flex;align-items:center;gap:1.4rem}
.landing-nav a{
  font-family:var(--font-display);font-size:.9rem;font-weight:600;
  letter-spacing:.03em;color:var(--ink-2);text-decoration:none;
}
.landing-nav a:hover{color:var(--brand)}
.hero{
  max-width:1060px;margin:0 auto;padding:3.5rem 1.5rem 3rem;
  display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:center;
}
@media(max-width:820px){.hero{grid-template-columns:1fr;padding-top:2rem}}
.hero h1{font-size:clamp(2rem,4.5vw,3.1rem);letter-spacing:.005em;margin:.6rem 0 1rem}
.hero h1 .hl{color:var(--brand)}
.hero .sub{max-width:32em;color:var(--ink-2);font-size:1.06rem;margin-bottom:1.6rem}
.hero-cta{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.warm{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:.8rem;color:var(--ink-3);font-family:var(--font-display);letter-spacing:.03em;
}
.warm .dot{width:.55em;height:.55em;border-radius:50%;background:var(--accent-fill)}
.warm.ready .dot{background:var(--ok)}
.warm.ready{color:var(--ok)}
@keyframes pulse{50%{opacity:.35}}
.warm:not(.ready) .dot{animation:pulse 1.1s ease-in-out infinite}

/* Hero mock: stacked board cards (static content, not live data — see index.html) */
.mock-stack{display:grid;gap:.7rem;transform:rotate(-1.2deg)}
.mock-card{
  display:flex;align-items:center;gap:.9rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:.8rem 1rem;
}
.mock-card .m-vote{
  display:flex;flex-direction:column;align-items:center;min-width:44px;
  font-family:var(--font-display);font-weight:600;
  border:1px solid var(--line-strong);border-radius:4px;padding:.25em .4em;line-height:1.15;
}
.mock-card .m-vote span{font-size:.95rem}
.mock-card .m-vote em{font-style:normal;font-size:.55rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.mock-card.m-hot .m-vote{background:var(--accent-soft);border-color:var(--accent-fill);color:var(--warn)}
.mock-card .m-body{flex:1;min-width:0}
.mock-card .m-title{font-weight:600;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock-card .m-meta{font-size:.75rem;color:var(--ink-3)}

.section{max-width:1060px;margin:0 auto;padding:3.2rem 1.5rem}
.section h2{font-size:1.7rem;margin:.5rem 0 2rem}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.4rem;box-shadow:var(--shadow);
}
.step .n{
  font-family:var(--font-display);font-weight:700;font-size:.8rem;
  color:var(--on-brand);background:var(--brand-fill);
  display:inline-flex;align-items:center;justify-content:center;
  width:1.9em;height:1.9em;border-radius:4px;margin-bottom:.9rem;
}
.step h3{font-size:1.08rem;margin-bottom:.5rem}
.step p{color:var(--ink-2);font-size:.93rem}

.feat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
@media(max-width:820px){.feat-grid{grid-template-columns:1fr}}
.feat{border-top:2px solid var(--brand);padding:1.1rem .2rem 0}
.feat h3{font-size:1.02rem;margin-bottom:.4rem}
.feat p{color:var(--ink-2);font-size:.93rem;max-width:36em}

.landing-footer{
  border-top:1px solid var(--line);margin-top:2rem;
  max-width:1060px;margin-left:auto;margin-right:auto;
  padding:1.6rem 1.5rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  color:var(--ink-3);font-size:.85rem;
}
.landing-footer a{color:var(--ink-3);text-decoration:none;margin-left:1.2rem}
.landing-footer a:hover{color:var(--brand)}

/* ============ Datenschutz page (minimal, reuses the same tokens/header/footer) ============ */
.legal{max-width:760px;margin:0 auto;padding:2.5rem 1.5rem 3.5rem}
.legal h1{font-size:1.7rem;margin-bottom:1.2rem}
.legal h2{font-size:1.15rem;margin:1.8rem 0 .6rem}
.legal p,.legal li{color:var(--ink-2);font-size:.95rem}
.legal ul{margin:.4rem 0 0;padding-left:1.3rem}
.legal li+li{margin-top:.3rem}