:root{--red:#e21a1a;--red2:#aa1414;--wine:#710d0d;--dark:#390707;--rose:#f8c6c6;--salmon:#f18d8d;--bg:#f6f5f4;--line:#e7e2e0;--muted:#6b6461;--ink:#1f1a19;--ok:#1f7a4d;--okbg:#e6f4ec;--warnbg:#fff4e0;--warn:#8a5a00;--r:14px;
--f:"Avenir Next","Avenir","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;--fh:"Tachyon","Avenir Next","Avenir","Segoe UI",system-ui,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);font-size:16px;line-height:1.45;-webkit-text-size-adjust:100%}
body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
.top{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line)}
.top-in{max-width:640px;margin:0 auto;display:flex;align-items:center;gap:10px;padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top))}
.brand{display:flex;align-items:center;gap:8px;font-family:var(--fh);font-weight:800;color:var(--red);letter-spacing:.08em;font-size:18px}
.brand small{color:var(--ink);font-family:var(--f);font-weight:600;letter-spacing:.04em;font-size:11px;text-transform:uppercase}
.brand .logo{width:150px;height:auto;display:block}
.sectag{border-left:1px solid var(--line);padding-left:8px;color:var(--wine)!important;white-space:nowrap}
.hero{display:block;width:calc(100% + 32px);margin:-16px -16px 14px;height:auto;aspect-ratio:1400/554;object-fit:cover}
.navtitle .logo{width:180px;height:auto;display:block}
@media(max-width:430px){.savebtn span{display:none}.sectag{display:none!important}}
.mark{width:24px;height:24px;border-radius:7px;background:var(--red);position:relative;flex:none}
.mark:after{content:"";position:absolute;left:7px;top:7px;width:10px;height:10px;background:#fff;border-radius:2px}
.spacer{flex:1}
.savebtn{position:relative}
.dot{position:absolute;top:3px;right:3px;width:10px;height:10px;border-radius:50%;background:var(--red);border:2px solid #fff}
.lang{width:auto;padding:6px 8px;font-size:14px}
.wave{height:34px;margin:-16px -16px 12px;background:#fdf3f3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='34' viewBox='0 0 240 34'%3E%3Cg fill='none' stroke='%23f18d8d' stroke-width='1.4'%3E%3Cpath d='M0 10 Q30 0 60 10 T120 10 T180 10 T240 10'/%3E%3Cpath d='M0 18 Q30 8 60 18 T120 18 T180 18 T240 18'/%3E%3Cpath d='M0 26 Q30 16 60 26 T120 26 T180 26 T240 26'/%3E%3C/g%3E%3C/svg%3E") repeat-x;background-size:240px 34px}
main{max-width:640px;margin:0 auto;padding:16px}
h1{font-family:var(--fh);text-transform:uppercase;font-size:23px;line-height:1.15;margin:4px 0 10px;letter-spacing:.03em;color:var(--dark)}
h2{font-size:17px;margin:0 0 10px;color:var(--dark)}
h3{font-size:15px;margin:12px 0 6px;color:var(--dark)}
h3:first-child{margin-top:0}
p{margin:0 0 10px}
.muted{color:var(--muted);font-size:14px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:0 0 12px;overflow:hidden}
.btn{appearance:none;border:0;border-radius:12px;background:var(--red);color:#fff;font:600 16px var(--f);min-height:48px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;text-decoration:none;text-align:center}
.btn:active{transform:scale(.98)}
.btn.sec{background:#fff;color:var(--red);border:1.5px solid var(--red)}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.dark{background:var(--wine)}
.btn.sm{min-height:38px;font-size:14px;padding:0 12px;border-radius:10px}
.btn.block{width:100%}
.btn:disabled{opacity:.45}
.row{display:flex;gap:10px;align-items:center}
.row>*{min-width:0}
.grow{flex:1;min-width:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
label.f{display:block;font-size:13px;font-weight:600;color:var(--muted);margin:10px 0 4px}
input,select,textarea{width:100%;font:16px var(--f);padding:12px;border:1px solid #d6cfcc;border-radius:10px;background:#fff;color:var(--ink)}
textarea{min-height:120px;font-family:ui-monospace,Menlo,monospace;font-size:13px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--rose);border-color:var(--red)}
input[type=checkbox],input[type=radio]{width:22px;height:22px;accent-color:var(--red);flex:none;padding:0;margin:0}
.opt{display:flex;gap:14px;align-items:center;text-align:left;width:100%;background:#fff;border:1.5px solid var(--line);border-radius:var(--r);padding:14px;margin:0 0 10px;font:inherit;color:inherit;cursor:pointer}
.opt.sel{border-color:var(--red);box-shadow:0 0 0 3px #f8c6c699}
.ic{width:44px;height:44px;border-radius:12px;background:#fdecec;color:var(--red);display:flex;align-items:center;justify-content:center;flex:none}
.opt b{display:block;font-size:16px}
.opt .d{display:block;font-size:14px;color:var(--muted)}
.opt .price{margin-left:auto;font-weight:700;white-space:nowrap;padding-left:8px}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;font:600 14px var(--f);color:var(--ink);cursor:pointer;white-space:nowrap}
.chip.on{background:var(--wine);color:#fff;border-color:var(--wine)}
.badge{display:inline-block;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;background:#eee;color:#444;white-space:nowrap}
.b-ok{background:var(--okbg);color:var(--ok)}.b-warn{background:var(--warnbg);color:var(--warn)}.b-red{background:#fdecec;color:var(--red2)}.b-dark{background:#f3e7e7;color:var(--wine)}
.list .it{display:flex;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.list .it:first-child{border-top:0;padding-top:0}
.ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px}
.kpi b{display:block;font-size:22px;font-family:var(--fh);color:var(--dark)}
.kpi span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.steps{display:flex;gap:6px;margin:8px 0 14px}
.steps i{flex:1;height:4px;border-radius:4px;background:var(--line)}
.steps i.on{background:var(--red)}
.qrbox{display:flex;justify-content:center;padding:12px}
.qrbox img,.qrbox canvas{max-width:100%;height:auto}
.code{font-family:ui-monospace,Menlo,monospace;font-size:20px;letter-spacing:.12em;text-align:center;font-weight:700;margin:6px 0 10px}
pre{background:#1f1a19;color:#f8eceb;border-radius:12px;padding:12px;overflow:auto;font-size:12.5px;white-space:pre-wrap;word-break:break-all;margin:0}
.tl{list-style:none;margin:0;padding:0}
.tl li{display:flex;gap:12px;padding:5px 0;align-items:flex-start;color:var(--muted)}
.tl .b{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);margin-top:4px;flex:none}
.tl li.done{color:var(--ink)}
.tl li.done .b{background:var(--red);border-color:var(--red)}
.sw{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.sw:first-child{border-top:0}
.sw>span:last-child{text-align:right}
.nav{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);z-index:30;padding-bottom:env(safe-area-inset-bottom)}
.nav-in{max-width:640px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr)}
.nav a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0 9px;color:var(--muted);text-decoration:none;font-size:12px;font-weight:600}
.nav a.on{color:var(--red)}
.modal{position:fixed;inset:0;background:#0008;z-index:50;display:flex;align-items:flex-end;justify-content:center}
.modal[hidden]{display:none}
.sheet{background:#fff;width:100%;max-width:640px;max-height:92vh;overflow:auto;border-radius:20px 20px 0 0;padding:18px 16px calc(20px + env(safe-area-inset-bottom))}
.sheet .hd{display:flex;align-items:center;gap:10px;margin-bottom:12px}
@media(min-width:700px){.modal{align-items:center}.sheet{border-radius:20px}}
.toast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);background:var(--dark);color:#fff;padding:10px 16px;border-radius:12px;font-size:14px;opacity:0;pointer-events:none;transition:.25s;z-index:60;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%)}
.banner{background:var(--warnbg);color:var(--warn);border-radius:12px;padding:10px 12px;font-size:14px;margin-bottom:12px}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th,.tbl td{padding:6px 3px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.tbl th{font-size:12px;color:var(--muted);font-weight:600}
.tbl input{padding:8px;font-size:15px}
.scroll{overflow-x:auto}
#reader{width:100%;border-radius:12px;overflow:hidden;background:#111;min-height:220px}
details summary{cursor:pointer;padding:6px 0;font-weight:600}
#print{display:none}
@media print{body>*:not(#print){display:none!important}#print{display:block}body{background:#fff;padding:0}@page{margin:10mm}}
.label{width:100mm;border:2px solid #000;padding:5mm;font-family:Arial,sans-serif;color:#000;background:#fff}
.cols>*{min-width:0}
.navtitle{display:none}
/* ---------- Desktop ---------- */
@media(min-width:900px){
  body{padding-bottom:0;padding-left:232px}
  .nav{top:0;right:auto;width:232px;border-top:0;border-right:1px solid var(--line);padding:0}
  .nav-in{display:flex;flex-direction:column;gap:4px;padding:18px 14px;max-width:none}
  .navtitle{display:block;padding:6px 8px 22px}
  .nav a{flex-direction:row;gap:12px;padding:11px 12px;border-radius:10px;font-size:15px}
  .nav a:hover{background:#fdf3f3}
  .nav a.on{background:#fdecec}
  .top .brand{display:none}
  .top-in{max-width:var(--maxw,1180px);padding:12px 32px}
  main{max-width:var(--maxw,1180px);padding:24px 32px 48px}
  body[data-sec="kunde"]{--maxw:600px}
  h1{font-size:28px}
  .kpis{grid-template-columns:repeat(4,1fr)}
  .cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;align-items:start}
  .cols>.wide,.cols>.kpis{grid-column:1/-1}
  .chips{flex-wrap:wrap;overflow:visible}
  .toast{bottom:28px;margin-left:116px}
  .sheet{max-width:720px}
  .dt-only{display:revert}
}
@media(max-width:899px){.dt-only{display:none!important}}
@media(min-width:900px){.mb-only{display:none!important}.rtbl td,.rtbl th{padding:10px 8px;white-space:nowrap}.rtbl tr:not(:first-child){cursor:pointer}.rtbl tr:not(:first-child):hover td{background:#fdf6f6}#ovbtn{width:auto}}