/*
 * Geräte-Mockups. Jedes Maß ist calc(var(--u) * N) mit N = Pixel im Entwurf
 * (app-design/). --u ist ein Entwurfs-Pixel in Echt-Pixeln, abgeleitet aus der
 * Breite des Rahmens (.dev-box, Container). Dadurch skaliert jedes Mockup
 * verlustfrei mit seinem Rahmen.
 */
.dev-box{container-type:inline-size;width:100%}
.dev-box .ic{flex:none}
.dev-box code{font-family:var(--f-mono);font-weight:500}

/* ---------- Handy ---------- */
.phone{--u:calc(100cqw / 410);--bw:max(1px,var(--u));box-sizing:border-box;width:100%;padding:calc(var(--u)*10);border-radius:calc(var(--u)*62);background:#1b1f27;box-shadow:0 0 0 var(--bw) #4a5160}
.m-screen{position:relative;width:calc(var(--u)*390);height:calc(var(--u)*844);border-radius:calc(var(--u)*52);overflow:hidden;background:#eef0f3;color:#1b1f27;font-family:var(--f-body);font-size:calc(var(--u)*14);line-height:1.3;text-align:left}
.m-island{position:absolute;top:calc(var(--u)*11);left:50%;width:calc(var(--u)*112);height:calc(var(--u)*32);margin-left:calc(var(--u)*-56);border-radius:calc(var(--u)*20);background:#14161b;z-index:3}
.m-body{box-sizing:border-box;height:100%;display:flex;flex-direction:column;gap:calc(var(--u)*16);padding:calc(var(--u)*58) calc(var(--u)*20) calc(var(--u)*24)}
.m-top{display:flex;align-items:center;justify-content:space-between}
.m-logo{display:block;height:calc(var(--u)*34);width:auto}
.m-pill{display:flex;align-items:center;gap:calc(var(--u)*6);background:#f7ecd8;color:#8a5f22;border-radius:calc(var(--u)*999);padding:calc(var(--u)*6) calc(var(--u)*12) calc(var(--u)*6) calc(var(--u)*10);font-size:calc(var(--u)*13);font-weight:600}
.m-pill .ic{width:calc(var(--u)*16);height:calc(var(--u)*16)}
.m-head{display:flex;flex-direction:column;gap:calc(var(--u)*2);padding-top:calc(var(--u)*4)}
.m-firm{font-size:calc(var(--u)*13);font-weight:500;color:#5d6472}
.m-h1{font-family:var(--f-head);font-weight:700;font-size:calc(var(--u)*28);line-height:1.15;letter-spacing:-.01em}
.m-big{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;height:calc(var(--u)*132);box-sizing:border-box;padding:calc(var(--u)*18) calc(var(--u)*20);border:var(--bw) solid #dde1e7;border-radius:calc(var(--u)*20);background:#fff;color:#1b1f27}
.m-big--primary{background:#8a5f22;border-color:#8a5f22;color:#fff}
.m-ico{display:flex;align-items:center;justify-content:center;width:calc(var(--u)*44);height:calc(var(--u)*44);border-radius:calc(var(--u)*12);background:#f5f6f8;border:var(--bw) solid #dde1e7;color:#1b1f27}
.m-ico .ic{width:calc(var(--u)*24);height:calc(var(--u)*24)}
.m-ico--on{background:rgba(255,255,255,.16);border-color:transparent;color:#fff}
.m-big-row{display:flex;align-items:center;justify-content:space-between;width:100%}
.m-big-row .ic{width:calc(var(--u)*22);height:calc(var(--u)*22);color:#5d6472}
.m-big--primary .m-big-row .ic{color:#fff}
.m-big-t{display:block;font-family:var(--f-head);font-weight:700;font-size:calc(var(--u)*21)}
.m-big-s{display:block;font-size:calc(var(--u)*14);color:#5d6472;margin-top:calc(var(--u)*2)}
.m-big--primary .m-big-s{color:#f7ecd8}
.m-stat{display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;min-height:calc(var(--u)*50);padding:0 calc(var(--u)*16);background:#fff;border:var(--bw) solid #dde1e7;border-radius:calc(var(--u)*14);font-size:calc(var(--u)*15);color:#3a4150}
.m-stat b{color:#1b1f27;font-weight:600}
.m-stat-r{display:flex;align-items:center;gap:calc(var(--u)*8)}
.m-stat i{font-style:normal;background:#fdecea;color:#b42318;border-radius:calc(var(--u)*999);padding:calc(var(--u)*2) calc(var(--u)*10);font-weight:600}
.m-list-h{display:flex;align-items:baseline;justify-content:space-between;padding:0 calc(var(--u)*2);font-family:var(--f-head);font-weight:600;font-size:calc(var(--u)*16)}
.m-link{font-family:var(--f-body);font-size:calc(var(--u)*13);font-weight:500;color:#6e4715}
.m-list{background:#fff;border:var(--bw) solid #dde1e7;border-radius:calc(var(--u)*16);overflow:hidden}
.m-li{display:flex;align-items:center;gap:calc(var(--u)*12);padding:calc(var(--u)*10) calc(var(--u)*14);border-bottom:var(--bw) solid #dde1e7}
.m-li:last-child{border-bottom:0}
.m-li-i{flex:none;display:flex;align-items:center;justify-content:center;width:calc(var(--u)*36);height:calc(var(--u)*36);border-radius:calc(var(--u)*10);background:#f5f6f8;color:#3a4150}
.m-li-i .ic{width:calc(var(--u)*20);height:calc(var(--u)*20)}
.m-li-t{flex:1;min-width:0}
.m-li-t b{display:block;font-size:calc(var(--u)*15);font-weight:600}
.m-li-t small{display:block;font-size:calc(var(--u)*13);color:#5d6472}
.m-li-t code{color:#3a4150}
.m-tag{flex:none;background:#f7ecd8;color:#8a5f22;border-radius:calc(var(--u)*999);padding:calc(var(--u)*3) calc(var(--u)*9);font-size:calc(var(--u)*12);font-weight:600}
.m-nr{flex:none;font-size:calc(var(--u)*13);color:#3a4150}

/* Unterschrift */
.m-body--sign{gap:calc(var(--u)*14)}
.m-nav{display:flex;align-items:center;justify-content:space-between;height:calc(var(--u)*44)}
.m-back{display:flex;align-items:center;width:calc(var(--u)*44);margin-left:calc(var(--u)*-8)}
.m-back .ic{width:calc(var(--u)*24);height:calc(var(--u)*24)}
.m-step{font-size:calc(var(--u)*13);font-weight:500;color:#5d6472}
.m-cancel{font-size:calc(var(--u)*14);font-weight:500;color:#6e4715}
.m-prog{display:flex;flex-direction:column;gap:calc(var(--u)*8)}
.m-bars{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--u)*6)}
.m-bars i{height:calc(var(--u)*6);border-radius:calc(var(--u)*999);background:#8a5f22}
.m-bar-l{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--u)*6);font-size:calc(var(--u)*12);color:#5d6472}
.m-bar-l .on{font-weight:600;color:#6e4715}
.m-h2{font-family:var(--f-head);font-weight:700;font-size:calc(var(--u)*26);line-height:1.15;letter-spacing:-.01em}
.m-sum{background:#fff;border:var(--bw) solid #dde1e7;border-radius:calc(var(--u)*16);overflow:hidden}
.m-sum div{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u)*12);padding:calc(var(--u)*11) calc(var(--u)*16);border-bottom:var(--bw) solid #dde1e7}
.m-sum div:last-child{border-bottom:0}
.m-sum span{font-size:calc(var(--u)*13);color:#5d6472}
.m-sum b{font-size:calc(var(--u)*15);font-weight:600}
.m-sigwrap{flex:1;min-height:0;display:flex;flex-direction:column;gap:calc(var(--u)*8)}
.m-sig-l{font-size:calc(var(--u)*13);font-weight:500;color:#3a4150;padding:0 calc(var(--u)*2)}
.m-sigfield{position:relative;flex:1;min-height:0;background:#fff;border:calc(var(--u)*1.5) solid #c6ccd6;border-radius:calc(var(--u)*18);overflow:hidden}
.m-line{position:absolute;left:calc(var(--u)*20);right:calc(var(--u)*20);bottom:calc(var(--u)*74);border-bottom:calc(var(--u)*1.5) solid #1b1f27}
.m-x{position:absolute;left:calc(var(--u)*20);bottom:calc(var(--u)*80);font-family:var(--f-head);font-weight:600;font-size:calc(var(--u)*22);color:#5d6472}
.m-ink{position:absolute;left:calc(var(--u)*36);right:calc(var(--u)*28);bottom:calc(var(--u)*64);width:calc(100% - var(--u)*64);height:auto;color:#1b2a52}
.m-ink use{stroke-width:1.7}
.m-fine{font-size:calc(var(--u)*12);line-height:1.4;color:#5d6472;padding:0 calc(var(--u)*2)}
.m-btns{display:flex;gap:calc(var(--u)*10)}
.m-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*8);height:calc(var(--u)*54);border:var(--bw) solid #c6ccd6;border-radius:calc(var(--u)*12);background:#fff;color:#1b1f27;font-size:calc(var(--u)*16);font-weight:600}
.m-btn .ic{width:calc(var(--u)*20);height:calc(var(--u)*20)}
.m-btn--p{flex:1.4;background:#8a5f22;border-color:#8a5f22;color:#fff}

/* ---------- Tablet dunkel ---------- */
.tablet{--u:calc(100cqw / 1230);--bw:max(1px,var(--u));box-sizing:border-box;width:100%;padding:calc(var(--u)*18);border-radius:calc(var(--u)*44);background:#23272f;box-shadow:0 0 0 var(--bw) #4a5160}
.t-screen{width:calc(var(--u)*1194);height:calc(var(--u)*834);border-radius:calc(var(--u)*28);overflow:hidden;background:#14161b;color:#edeef1;font-family:var(--f-body);font-size:calc(var(--u)*16);line-height:1.3;display:grid;grid-template-columns:calc(var(--u)*320) 1fr;text-align:left}
.t-side{display:flex;flex-direction:column;box-sizing:border-box;padding:calc(var(--u)*40) calc(var(--u)*32) calc(var(--u)*32);background:#1b1e25;border-right:var(--bw) solid #2b2f38}
.t-logo{display:block;height:calc(var(--u)*44);width:auto;align-self:flex-start}
.t-firm{margin-top:calc(var(--u)*4);font-size:calc(var(--u)*14);color:#949aa6}
.t-steps{list-style:none;margin:calc(var(--u)*56) 0 0;padding:0;display:flex;flex-direction:column}
.t-steps li{position:relative;display:flex;align-items:center;gap:calc(var(--u)*16);min-height:calc(var(--u)*72)}
.t-steps li + li::before{content:"";position:absolute;left:calc(var(--u)*19);top:calc(var(--u)*-36);width:calc(var(--u)*2);height:calc(var(--u)*72);background:#2b2f38}
.t-steps b{position:relative;z-index:1;flex:none;display:flex;align-items:center;justify-content:center;width:calc(var(--u)*40);height:calc(var(--u)*40);border-radius:calc(var(--u)*999);background:#20232b;border:calc(var(--u)*1.5) solid #2b2f38;color:#949aa6;font-family:var(--f-mono);font-weight:500;font-size:calc(var(--u)*16)}
.t-steps em{display:block;font-style:normal;font-family:var(--f-head);font-weight:600;font-size:calc(var(--u)*20);color:#949aa6}
.t-steps small{display:block;font-size:calc(var(--u)*13);color:#cdd1d9}
.t-steps .on b{background:#d1a75a;border-color:#d1a75a;color:#14161b}
.t-steps .on em{color:#edeef1}
.t-sync{margin-top:auto;display:flex;align-items:center;gap:calc(var(--u)*8);font-size:calc(var(--u)*14);color:#cdd1d9}
.t-sync .ic{width:calc(var(--u)*18);height:calc(var(--u)*18);color:#d1a75a}
.t-cancel{margin-top:calc(var(--u)*14);display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*8);height:calc(var(--u)*52);border:var(--bw) solid #2b2f38;border-radius:calc(var(--u)*12);color:#cdd1d9;font-size:calc(var(--u)*16);font-weight:500}
.t-cancel .ic{width:calc(var(--u)*20);height:calc(var(--u)*20)}
.t-main{display:flex;flex-direction:column;gap:calc(var(--u)*24);box-sizing:border-box;padding:calc(var(--u)*40) calc(var(--u)*56) calc(var(--u)*32);min-width:0}
.t-head{display:flex;align-items:flex-start;justify-content:space-between;gap:calc(var(--u)*24)}
.t-head small{display:block;font-size:calc(var(--u)*14);font-weight:500;color:#949aa6;margin-bottom:calc(var(--u)*6)}
.t-h1{font-family:var(--f-head);font-weight:700;font-size:calc(var(--u)*40);line-height:1.1;letter-spacing:-.01em}
.t-timer{flex:none;display:flex;align-items:center;gap:calc(var(--u)*8);background:#362a15;color:#f3dfb2;border-radius:calc(var(--u)*999);padding:calc(var(--u)*8) calc(var(--u)*16) calc(var(--u)*8) calc(var(--u)*12);font-size:calc(var(--u)*14);font-weight:500}
.t-timer .ic{width:calc(var(--u)*18);height:calc(var(--u)*18)}
.t-timer code{font-weight:500}
.t-search-w small{display:block;font-size:calc(var(--u)*14);font-weight:500;color:#cdd1d9;margin-bottom:calc(var(--u)*8)}
.t-search{display:flex;align-items:center;gap:calc(var(--u)*14);box-sizing:border-box;height:calc(var(--u)*72);padding:0 calc(var(--u)*24);background:#20232b;border:calc(var(--u)*1.5) solid #d1a75a;border-radius:calc(var(--u)*18);font-size:calc(var(--u)*24);color:#edeef1}
.t-search .ic{width:calc(var(--u)*26);height:calc(var(--u)*26);color:#949aa6}
.t-count{font-size:calc(var(--u)*14);color:#949aa6;margin-bottom:calc(var(--u)*-14)}
.t-list{background:#1b1e25;border:var(--bw) solid #2b2f38;border-radius:calc(var(--u)*18);overflow:hidden}
.t-row{display:flex;align-items:center;gap:calc(var(--u)*20);min-height:calc(var(--u)*84);box-sizing:border-box;padding:calc(var(--u)*12) calc(var(--u)*24);border-bottom:var(--bw) solid #2b2f38}
.t-row:last-child{border-bottom:0}
.t-row.on{background:#362a15}
.t-av{flex:none;display:flex;align-items:center;justify-content:center;width:calc(var(--u)*52);height:calc(var(--u)*52);border-radius:calc(var(--u)*999);background:#20232b;border:var(--bw) solid #2b2f38;font-weight:600;font-size:calc(var(--u)*17);color:#cdd1d9}
.t-row.on .t-av{background:#14161b;border-color:#d1a75a;color:#f3dfb2}
.t-who{flex:1}
.t-who strong{display:block;font-size:calc(var(--u)*22);font-weight:600}
.t-who small{display:block;font-size:calc(var(--u)*15);color:#cdd1d9;margin-top:calc(var(--u)*2)}
.t-row .ic{width:calc(var(--u)*26);height:calc(var(--u)*26);color:#949aa6}
.t-row.on .ic{color:#d1a75a}
.t-new{margin-top:auto;display:flex;align-items:center;gap:calc(var(--u)*10);font-size:calc(var(--u)*17);color:#cdd1d9}
.t-new .ic{width:calc(var(--u)*22);height:calc(var(--u)*22);color:#d1a75a}
.t-new b{font-weight:600;color:#d1a75a}

/* ---------- Druckansicht ---------- */
.paper{--u:calc(100cqw / 1000);--bw:max(1px,var(--u));box-sizing:border-box;width:100%;padding:calc(var(--u)*36) calc(var(--u)*40) calc(var(--u)*28);background:#fff;color:#1b1f27;border:var(--bw) solid #c6ccd6;border-radius:calc(var(--u)*6);font-family:var(--f-body);font-size:calc(var(--u)*14);line-height:1.3;text-align:left}
.p-head{display:flex;justify-content:space-between;align-items:flex-start;gap:calc(var(--u)*20);padding-bottom:calc(var(--u)*16);border-bottom:calc(var(--u)*2) solid #1b1f27}
.p-head b{display:block;font-family:var(--f-head);font-size:calc(var(--u)*22);letter-spacing:-.01em}
.p-head span{display:block;margin-top:calc(var(--u)*4);font-size:calc(var(--u)*13);color:#5d6472}
.p-logo{font-family:var(--f-head);font-weight:700;font-size:calc(var(--u)*16);color:#3a4150;border:var(--bw) solid #c6ccd6;border-radius:calc(var(--u)*4);padding:calc(var(--u)*8) calc(var(--u)*12);white-space:nowrap}
.paper table{width:100%;border-collapse:collapse;margin-top:calc(var(--u)*12);table-layout:fixed}
.paper th{font-size:calc(var(--u)*11);letter-spacing:.04em;text-transform:uppercase;font-weight:600;color:#5d6472;text-align:left;padding:calc(var(--u)*8) calc(var(--u)*10);border-bottom:var(--bw) solid #1b1f27}
.paper td{padding:calc(var(--u)*10);border-bottom:var(--bw) solid #dde1e7;font-size:calc(var(--u)*14);vertical-align:middle;height:calc(var(--u)*56);box-sizing:border-box}
.paper th:nth-child(1){width:7%}.paper th:nth-child(2){width:10%}.paper th:nth-child(3){width:13%}.paper th:nth-child(4){width:14%}.paper th:nth-child(5),.paper th:nth-child(6){width:11%}.paper th:nth-child(7),.paper th:nth-child(8){width:17%}
.p-ink{display:block;width:100%;max-width:calc(var(--u)*150);height:calc(var(--u)*44);color:#1b2a52}
.p-ink use{stroke-width:1.8}
.p-open{font-size:calc(var(--u)*12);color:#8a5f22;font-weight:600}
.p-foot{display:flex;justify-content:space-between;margin-top:calc(var(--u)*14);font-size:calc(var(--u)*11);color:#5d6472}

/* ---------- Excel-Illustration ---------- */
.sheet{--u:calc(100cqw / 520);--bw:max(1px,var(--u));box-sizing:border-box;width:100%;background:#fff;color:#1b1f27;border:var(--bw) solid #c6ccd6;border-radius:calc(var(--u)*10);overflow:hidden;font-family:var(--f-body);font-size:calc(var(--u)*13);line-height:1.3;text-align:left}
.x-title{display:flex;align-items:center;gap:calc(var(--u)*6);height:calc(var(--u)*36);padding:0 calc(var(--u)*12);background:#f1f2f4;border-bottom:var(--bw) solid #c6ccd6;color:#5d6472;font-size:calc(var(--u)*12)}
.x-title i{width:calc(var(--u)*10);height:calc(var(--u)*10);border-radius:50%;background:#c6ccd6}
.x-title span{margin-left:calc(var(--u)*10)}
.sheet table{width:100%;border-collapse:collapse;table-layout:fixed}
.sheet th{background:#f1f2f4;color:#5d6472;font-weight:500;font-size:calc(var(--u)*11);text-align:center;border:var(--bw) solid #dde1e7;padding:calc(var(--u)*4) 0;width:calc(var(--u)*28)}
.sheet td{border:var(--bw) solid #dde1e7;padding:0 calc(var(--u)*8);height:calc(var(--u)*34);white-space:nowrap;overflow:hidden;text-overflow:clip}
.sheet th:first-child{width:calc(var(--u)*28)}
.sheet .hd td{font-weight:600;background:#f7f8fa}
.sheet .x-sel td:nth-child(3){outline:calc(var(--u)*2) solid #1f7a4a;outline-offset:calc(var(--u)*-2)}