/* ==========================================================================
   Embla · DAYLIGHT  — hell, flach, gelb-geführt, KEINE Verläufe/Glow
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --paper:#faf8f2;        /* warmes Off-White */
  --surface:#f1ede2;      /* sand */
  --card:#ffffff;
  --ink:#171512;          /* warmes Fast-Schwarz */
  --ink-2:#46423a;
  --ink-3:#8a8276;
  --line:#e6e0d2;
  --yellow:#facc15;       /* Embla-Gelb (Hero) */
  --yellow-d:#e0b00a;
  --yellow-ink:#1c1605;   /* Text auf Gelb */
  --stop:#d6442f;
  --font:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --r:14px; --r-l:20px; --r-xl:26px; --r-pill:999px;
  --e:0 2px 0 rgba(23,21,18,.06);
  --ease:cubic-bezier(0.2,0.8,0.2,1);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-body);color:var(--ink);background:var(--paper)}

.stage{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px;background:#efe9da}
.phone{width:390px;height:844px;background:#000;border-radius:54px;padding:11px;position:relative;box-shadow:0 50px 90px -42px rgba(23,21,18,.5),0 0 0 1px rgba(23,21,18,.08)}
.screen{width:100%;height:100%;border-radius:44px;overflow:hidden;position:relative;background:var(--paper);display:flex;flex-direction:column}
.island{position:absolute;top:13px;left:50%;transform:translateX(-50%);width:122px;height:34px;background:#000;border-radius:20px;z-index:60}
.statusbar{height:54px;flex:none;display:flex;align-items:flex-end;justify-content:space-between;padding:0 26px 8px;color:var(--ink);font:600 15px/1 var(--font)}
.statusbar.abs{position:absolute;top:0;left:0;right:0;z-index:30}
.statusbar.on-photo{color:#fff}
.sb-r{display:flex;gap:7px;align-items:center}
.canvas{flex:1;overflow-y:auto}.canvas::-webkit-scrollbar{display:none}

.appbar{display:flex;align-items:center;justify-content:space-between;padding:6px 20px 12px;flex:none}
.brand{display:flex;align-items:center;gap:8px;font:700 22px/1 var(--font);letter-spacing:-.02em;color:var(--ink)}
.brand .mk{color:var(--yellow-d)}
.iconbtn{width:42px;height:42px;border-radius:50%;background:var(--ink);color:var(--paper);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer}
.iconbtn.soft{background:var(--surface);color:var(--ink)}

/* Typo */
.t-display{font:700 38px/0.98 var(--font);letter-spacing:-.03em}
.t-h1{font:700 28px/1.02 var(--font);letter-spacing:-.02em}
.t-h2{font:700 22px/1.1 var(--font);letter-spacing:-.01em}
.over{font:600 11px/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}

/* Buttons — flach, kräftig */
.btn{border:none;cursor:pointer;font:700 16px/1 var(--font);border-radius:var(--r-pill);display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:16px 22px;transition:transform .12s var(--ease)}
.btn:active{transform:scale(.97)}
.btn-yellow{background:var(--yellow);color:var(--yellow-ink)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-soft{background:var(--surface);color:var(--ink)}
.btn-ghost{background:none;color:var(--ink-2)}
.btn-block{width:100%}

/* Pills / tags */
.pill{display:inline-flex;align-items:center;gap:6px;font:600 13px/1 var(--font);padding:9px 14px;border-radius:var(--r-pill);background:var(--surface);color:var(--ink-2);border:1px solid var(--line)}
.pill-yellow{background:var(--yellow);color:var(--yellow-ink);border-color:transparent}

/* Verified — flach, gelb */
.vchip{width:18px;height:18px;border-radius:50%;background:var(--yellow);display:inline-flex;align-items:center;justify-content:center;color:var(--yellow-ink);flex:none}
.vchip svg{width:11px;height:11px}
.verline{display:inline-flex;align-items:center;gap:6px;background:var(--yellow);color:var(--yellow-ink);font:700 12px/1 var(--font);padding:7px 12px 7px 8px;border-radius:var(--r-pill)}
.verline .vchip{background:var(--yellow-ink);color:var(--yellow)}

/* Card / prompt */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl)}
.prompt{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);padding:18px 20px}
.prompt .pl{font:600 11px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--yellow-d)}
.prompt .pa{margin-top:8px;font:600 18px/1.34 var(--font);color:var(--ink);letter-spacing:-.01em}

/* Tabbar — flach, gelb aktiv */
.tabbar{height:84px;flex:none;background:var(--card);border-top:1px solid var(--line);display:flex;align-items:flex-start;justify-content:space-around;padding:12px 12px 0}
.tab{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:none;color:var(--ink-3);font:600 11px/1 var(--font);cursor:pointer}
.tab.active{color:var(--ink)}
.tab.active .ico{color:var(--yellow-d)}

.input{width:100%;background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);padding:15px 16px;font:500 16px/1.2 var(--font-body);color:var(--ink)}
.input:focus{outline:none;border-color:var(--yellow-d)}
.divider{height:1px;background:var(--line)}
.online{width:12px;height:12px;border-radius:50%;background:#2ea66a;border:2.5px solid var(--card)}