@import url("/fonts/fonts.css");
:root{--navy:#101b2f;--navy-2:#1e2f4f;--sky:#aed8f1;--text:#333;--muted:#777;--line:#d9dde5;--white:#fff;--paper:#f7f7f7}
*{box-sizing:border-box}
html{background:var(--navy)}
body{margin:0;min-height:100vh;color:var(--text);font:300 17px/1.6 Lato,Arial,sans-serif;background:var(--navy)}
.top{text-align:center;padding:40px 16px 36px;background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%)}
.top img{height:64px;width:auto;display:block;margin:0 auto 14px}
.top p{margin:0;color:var(--sky);font:400 13px/1.4 Lato,Arial,sans-serif;letter-spacing:.22em;text-transform:uppercase}
.wrap{background:var(--paper);min-height:calc(100vh - 170px);padding:40px 16px 56px}
.card{width:100%;max-width:600px;margin:0 auto;background:var(--white);padding:40px 32px 36px;border-top:3px solid var(--navy)}
h1{margin:0 0 14px;font:400 26px/1.3 "Playfair Display",Georgia,serif;letter-spacing:.06em;text-transform:uppercase;color:var(--navy)}
.muted{color:var(--muted);margin:0 0 28px}
.step{display:none}.step.on{display:block}
.q{margin:30px 0 12px;font:700 12px/1.4 Lato,Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--navy-2)}
.opts{display:grid;gap:10px}
.opt{display:block;width:100%;text-align:left;padding:14px 18px;border:1px solid var(--line);border-radius:0;background:var(--white);font:400 16px/1.4 Lato,Arial,sans-serif;color:var(--text);cursor:pointer;transition:border-color .15s,background .15s}
.opt:hover{border-color:var(--navy-2)}
.opt.sel{border-color:var(--navy);background:var(--navy);color:var(--white)}
.opt:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
.scale{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.scale .opt{text-align:center;padding:12px 0}
.ends{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-top:6px}
textarea{width:100%;min-height:110px;padding:12px 14px;border:1px solid var(--line);border-radius:0;font:300 16px/1.5 Lato,Arial,sans-serif;resize:vertical}
textarea:focus{outline:none;border-color:var(--navy-2)}
.btn{display:block;margin:34px auto 0;padding:14px 28px;background:none;border:0;border-top:1px solid var(--navy);border-bottom:1px solid var(--navy);color:var(--navy);font:700 15px/1 Lato,Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.btn:hover:not(:disabled){background:var(--navy);color:var(--white)}
.btn:disabled{opacity:.3;cursor:default}
.note{margin:24px auto 0;max-width:600px;padding:10px 14px;background:#fff6e5;color:#7a5200;font-size:14px}
.err{color:#b42318;max-width:600px;margin:16px auto 0}
.foot{text-align:center;color:#8a93a6;font:400 11px/1.4 Lato,Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;padding:22px 16px}
@media (max-width:480px){.card{padding:30px 20px 28px}h1{font-size:22px}.top img{height:52px}}
/* Onboarding */
.progress{height:3px;background:var(--line);margin:-40px -32px 32px}
.progress i{display:block;height:100%;background:var(--navy);transition:width .25s}
.stepno{margin:0 0 10px;color:var(--muted);font:400 12px/1 Lato,Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips .opt{width:auto;padding:10px 14px}
.hint{font-size:14px;color:var(--muted);margin:-4px 0 12px}
input[type=text]{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:0;font:300 16px/1.4 Lato,Arial,sans-serif;margin-bottom:8px}
input[type=text]:focus{outline:none;border-color:var(--navy-2)}
.zeile{border-left:2px solid var(--line);padding:4px 0 4px 14px;margin:0 0 16px}
.zeile:focus-within{border-left-color:var(--navy)}
.add{background:none;border:0;padding:6px 0;color:var(--navy-2);font:700 13px/1 Lato,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.nav{display:flex;justify-content:space-between;align-items:center;margin-top:34px}
.nav .btn{margin:0}
.back{background:none;border:0;color:var(--muted);font:400 14px/1 Lato,Arial,sans-serif;cursor:pointer;padding:8px 0}
.check{display:flex;gap:12px;align-items:flex-start;margin:0 0 18px;font-size:15px;line-height:1.5;cursor:pointer}
.check input{margin-top:4px;width:18px;height:18px;flex:none;accent-color:var(--navy)}
@media (max-width:480px){.progress{margin:-30px -20px 26px}}
.count{display:block;text-align:right;font-size:12px;color:var(--muted);margin:-4px 0 6px}
.count.over{color:#b42318;font-weight:700}
.tags input{margin-bottom:6px}
.tags input.bad{border-color:#b42318}
label.lbl{display:block;margin:22px 0 8px;font:700 12px/1.4 Lato,Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--navy-2)}
label.lbl span{font-weight:400;letter-spacing:.05em;text-transform:none;color:var(--muted)}
.foot a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.foot a:hover{color:var(--sky)}
.chips.compact{gap:6px}
.chips.compact .opt{padding:7px 11px;font-size:14px}