/* Heartli – gemeinsame Gestaltung. Farben wie im Konzept. */
:root{--bg:#F4F7F8;--paper:#fff;--ink:#1F2A30;--muted:#5B6870;--line:#D9E1E5;--pink:#F15BB5;--turq:#2EC4B6;--blue:#3A86FF;--sun:#F4B942;--red:#D64545;
--display:"Fredoka",ui-rounded,system-ui,sans-serif;--body:"Nunito",system-ui,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.5;padding:0 16px}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.15;margin:0 0 8px}
h1{font-size:2rem} h1 em{font-style:normal;color:var(--pink)}
.wrap{max-width:720px;margin:0 auto;padding:24px 0 60px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:18px;margin:14px 0}
label{display:block;font-weight:700;margin:10px 0 4px}
input,select,textarea{width:100%;font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fff}
button,.btn{font:inherit;font-weight:700;border:0;border-radius:14px;padding:11px 18px;cursor:pointer;background:var(--turq);color:#fff;text-decoration:none;display:inline-block}
button.pink{background:var(--pink)} button.blue{background:var(--blue)} button.grey{background:#8A949A} button.red{background:var(--red)} button.sun{background:var(--sun);color:var(--ink)}
button:disabled{opacity:.5;cursor:default}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.note{color:var(--muted);font-size:.92rem}
.err{color:var(--red);font-weight:700;min-height:1.4em}
.ok{color:#1E7B34;font-weight:700}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 4px}
.tabs button{background:#fff;color:var(--ink);border:1px solid var(--line)} .tabs button.on{background:var(--turq);color:#fff;border-color:var(--turq)}
.step{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:start;border-top:1px solid var(--line);padding:12px 0}
.step .em{font-size:38px;text-align:center}
.pill{display:inline-block;border-radius:999px;padding:2px 10px;font-size:.85rem;font-weight:700;background:#E6F7F5;color:#146A62}
.pill.warn{background:#FFF3CD;color:#7A5A00}
code{background:#EEF2F4;padding:2px 6px;border-radius:6px}
.big{font-size:2.2rem;letter-spacing:.2em;text-align:center;font-family:var(--display)}
audio{width:100%;margin-top:6px}
hr{border:0;border-top:1px solid var(--line);margin:14px 0}