/* KaizenVibe – Landingpage. Werte aus DESIGN.md; Handy zuerst ("Stage + fade"), ab 721 px Desktop "Centered". */
:root { color-scheme:dark; --bg:#07080c; --text:#eef0f5; --muted:#8e96a8; --line:rgba(255,255,255,.09); --gold:#ffc44a;
        --glass:rgba(14,16,24,.58); --glass-border:rgba(255,255,255,.14); }
* { box-sizing:border-box; }
html { background:var(--bg); }
body { margin:0; min-height:100svh; background:var(--bg); color:var(--text);
       font:15px/1.45 -apple-system,BlinkMacSystemFont,"Inter","Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
[hidden] { display:none !important; }
a { color:var(--text); }
a:focus-visible, button:focus-visible, input:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
a, button, input, label { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }

.grid { position:fixed; top:0; left:0; width:100%; height:100vh; display:block; }
.wrap { position:relative; z-index:1; min-height:100svh; max-width:560px; margin:0 auto;
        padding:22px max(20px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
        display:flex; flex-direction:column; }
.logo { display:block; height:22px; width:auto; }
.wrap > .logo, .wrap > a { align-self:flex-start; }
.stage { flex:none; height:min(250px, 34svh); }
/* "Coming soon" in den vier Zielwinkeln aus dem Logo ("Lock-On"); die Gradients zeichnen nur einfarbige Striche */
.eyebrow { display:inline-block; margin:0; padding:5px 12px; font-size:12px; color:var(--gold);
           --c:var(--gold); --l:7px; --w:1.5px;
           background:
             linear-gradient(var(--c),var(--c)) left top/var(--l) var(--w) no-repeat,
             linear-gradient(var(--c),var(--c)) left top/var(--w) var(--l) no-repeat,
             linear-gradient(var(--c),var(--c)) right top/var(--l) var(--w) no-repeat,
             linear-gradient(var(--c),var(--c)) right top/var(--w) var(--l) no-repeat,
             linear-gradient(var(--c),var(--c)) left bottom/var(--l) var(--w) no-repeat,
             linear-gradient(var(--c),var(--c)) left bottom/var(--w) var(--l) no-repeat,
             linear-gradient(var(--c),var(--c)) right bottom/var(--l) var(--w) no-repeat,
             linear-gradient(var(--c),var(--c)) right bottom/var(--w) var(--l) no-repeat; }
h1 { margin:10px 0 8px; font-size:32px; font-weight:760; letter-spacing:-.035em; line-height:1.02; text-wrap:balance; }
.lead { margin:0; color:#c3c8d4; font-size:15px; text-wrap:pretty; }

.glass { position:relative; background:var(--glass); border:1px solid var(--glass-border); border-radius:18px;
         backdrop-filter:blur(10px) saturate(160%); -webkit-backdrop-filter:blur(10px) saturate(160%);
         box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 20px 50px rgba(0,0,0,.35); }
.box { margin-top:16px; }
form.join { display:grid; gap:12px; padding:18px; }
.perk { margin:0; font-size:14px; }
.perk b { color:var(--gold); font-weight:600; }
.field { display:flex; flex-direction:column; gap:8px; }
input[type=email] { width:100%; min-width:0; padding:12px 14px; border-radius:11px; border:1px solid var(--glass-border);
                    background:rgba(255,255,255,.05); color:var(--text); font:inherit; font-size:16px; }
input[type=email]::placeholder { color:var(--muted); }
button.cta { min-height:44px; padding:12px 16px; border:0; border-radius:11px; background:var(--gold); color:#1a1405;
             font:inherit; font-size:15px; font-weight:700; white-space:nowrap; cursor:pointer; }
button.cta:hover { background:#ffcf66; }
button.cta:active { transform:translateY(1px); }
button.cta[disabled] { opacity:.6; cursor:default; }
.check { display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--muted); line-height:1.4; }
.check input { flex:none; width:18px; height:18px; margin:1px 0 0; accent-color:var(--gold); }
.terms { margin:0; font-size:12px; color:var(--muted); }
.msg { margin:0; font-size:13px; color:var(--text); }
.hp { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.done, .closed, .box > [data-for] { padding:18px; }
.title { margin:0 0 4px; font-size:17px; font-weight:650; line-height:1.3; letter-spacing:0; }
.done p, .closed p, .box > [data-for] p { margin:0; color:var(--muted); font-size:14px; }
.box > [data-for] .title { color:var(--text); }
.box > [data-for] button.cta { margin-top:14px; }
button.link { margin-top:12px; padding:0; border:0; background:none; color:var(--muted); font:inherit; font-size:13px;
              text-decoration:underline; cursor:pointer; }
.box > [data-for] { display:none; }
.box[data-view="ask"] > [data-for="ask"], .box[data-view="done"] > [data-for="done"],
.box[data-view="expired"] > [data-for="expired"], .box[data-view="closed"] > [data-for="closed"],
.box[data-view="busy"] > [data-for="busy"], .box[data-view="error"] > [data-for="error"] { display:block; }
[data-state="closed"] form.join, [data-state="open"] .closed { display:none; }
.box noscript p { padding:18px; margin:0; color:var(--muted); }

.foot { margin-top:auto; padding-top:24px; display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12px; color:var(--muted); }
.foot a { color:var(--muted); text-decoration:none; }
.foot a:hover { color:var(--text); }
.foot .na { flex-basis:100%; }
.foot button.link { margin:0; font-size:12px; color:var(--muted); text-decoration:none; }
.foot button.link:hover { color:var(--text); }

@media (prefers-reduced-transparency:reduce) {
  .glass { background:#0e1018; backdrop-filter:none; -webkit-backdrop-filter:none; }
}

/* Handy: Bühne oben in voller Stärke, hinter dem Text nur leise Textur (Spec 4.2, Variante "Stage + fade") */
@media (max-width:720px) {
  .grid { -webkit-mask-image:linear-gradient(#000 0 34%, rgba(0,0,0,.14) 50%, rgba(0,0,0,.14) 100%);
                  mask-image:linear-gradient(#000 0 34%, rgba(0,0,0,.14) 50%, rgba(0,0,0,.14) 100%); }
}

/* Desktop: Raster füllt die Seite, eine ruhige Spalte in der Mitte (Spec 4.2, "Centered") */
@media (min-width:721px) {
  .wrap { max-width:none; align-items:center; text-align:center;
          padding:30px max(40px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(40px, env(safe-area-inset-left)); }
  .logo { height:26px; }
  .stage { display:none; }
  .col { margin-top:auto; display:flex; flex-direction:column; align-items:center; }
  .wrap > .logo, .wrap > a { align-self:center; }
  h1 { font-size:54px; max-width:760px; margin:18px 0 12px; }
  .lead { font-size:17px; max-width:560px; }
  .box { width:520px; margin-top:26px; text-align:left; }
  .field { flex-direction:row; }
  .foot { justify-content:center; }
}

/* Rechtstexte: ruhige Leseseite ohne Raster */
.doc .wrap { max-width:720px; padding:28px 20px 48px; text-align:left; align-items:stretch; }
.doc h1 { font-size:32px; margin:28px 0 8px; }
.doc h2 { font-size:18px; margin:28px 0 6px; letter-spacing:-.01em; }
.doc p, .doc li { color:#c3c8d4; }
.doc .draft { margin:16px 0 0; padding:10px 14px; border:1px dashed var(--glass-border); border-radius:10px; font-size:13px; }
.doc .ph { color:var(--gold); }