/* DigitalKasse – device drawings shared by the homepage and the Branchen pages: the tablet with the Kasse start
   screen of each business type (drawn after kasse.css), the phone with the shop's public page and the event toast.
   Sized in em from --u on .group, so the whole picture scales as one. */

/* stage: the device group, sized in em so it scales as one picture */
.stage { position: relative; container-type: inline-size; min-width: 0; }
.group { position: relative; --u: min(1.5cqw, 13px); font-size: var(--u); width: 66em; max-width: 100%; height: 50em; margin-inline-start: auto; }
.module { position: relative; display: flex; justify-content: flex-end; margin-top: 12px; font-size: 14px; }
.module span { display: inline-flex; flex-wrap: wrap; gap: 6px 18px; }
.module a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: var(--ink); font-weight: 600; text-decoration: none; }
.module a::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--acc); border-top: 2px solid var(--acc); transform: rotate(45deg); }
.module a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* tablet: drawn after the Kasse (kasse.css tokens: petrol ink on a cool grey-green canvas, white work surfaces) */
.tab { position: absolute; left: 0; top: 0; width: 60em; height: 41.6em; padding: .9em; border-radius: 2.1em; background: linear-gradient(145deg, #2a3248, #10162a 60%); box-shadow: var(--shadow-3), 0 0 0 1px rgba(255, 255, 255, .06) inset; }
.tab::after { content: ""; position: absolute; left: 50%; top: .35em; width: .32em; height: .32em; border-radius: 50%; background: #39425c; }
.tscr { --k-bg: #eaefee; --k-s2: #f4f7f6; --k-s3: #e2e9e7; --k-ink: #0a2328; --k-ink2: #29454a; --k-mu: #566b6f; --k-faint: #8197a0; --k-line: #d3dcda; --k-line2: #b2c1be;
  --st-blue: #1a569c; --st-blue-bg: #e1ecf8; --st-amber: #855000; --st-amber-bg: #fbefd6; --st-violet: #5f3696; --st-violet-bg: #eee5f8; --st-green: #0f6b49; --st-green-bg: #daf1e5; --st-red: #a8102a; --st-red-bg: #fbe5e9;
  position: relative; height: 100%; border-radius: 1.3em; overflow: hidden; background: var(--k-bg); color: var(--k-ink); line-height: 1.3; }
.tscr svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sc { position: absolute; inset: 0; display: grid; grid-template-columns: 4.7em minmax(0, 1fr); opacity: 0; visibility: hidden; transform: scale(.985); transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .5s; }
.sc.on { opacity: 1; visibility: visible; transform: none; transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1), visibility 0s; }
.kr { display: flex; flex-direction: column; align-items: stretch; gap: .25em; padding: .9em .35em; background: #fff; border-right: 1px solid var(--k-line); }
.kl { align-self: center; display: grid; place-items: center; width: 2.2em; height: 2.2em; margin-bottom: .9em; border-radius: .55em; background: var(--k-ink); color: #fff; }
.kl svg { width: 1.3em; height: 1.3em; stroke: #fff; }
.kr > span { position: relative; display: grid; justify-items: center; gap: .15em; padding: .45em .1em; border-radius: .55em; font-size: .58em; font-weight: 600; color: var(--k-ink2); text-align: center; line-height: 1.15; hyphens: manual; }
.kr > span svg { width: 2.3em; height: 2.3em; stroke-width: 1.6; }
.kr > span.on { background: var(--k-s3); color: var(--k-ink); }
.kr > span.on::before { content: ""; position: absolute; left: -.6em; top: 25%; bottom: 25%; width: .35em; border-radius: 0 .3em .3em 0; background: #c8102e; }
.km { display: flex; flex-direction: column; min-width: 0; }
.kt { display: flex; align-items: center; gap: .55em; height: 3.7em; padding: 0 1em; background: #fff; border-bottom: 1px solid var(--k-line); }
.op { display: grid; justify-items: center; gap: .1em; padding: .2em .35em; border-radius: .55em; border: 1.5px solid transparent; font-size: .62em; font-weight: 600; color: var(--k-ink2); }
.op i { display: grid; place-items: center; width: 3em; height: 3em; border-radius: 50%; font-style: normal; font-size: .95em; font-weight: 700; color: var(--k-ink); background: color-mix(in srgb, var(--acc) 22%, #fff); }
.op.on { border-color: var(--k-ink); background: var(--k-s2); }
.lk { width: 1.25em; height: 1.25em; margin-left: .2em; color: var(--k-ink2); }
.kt-r { margin-left: auto; display: flex; align-items: center; gap: .65em; }
.kt-r > svg { width: 1.3em; height: 1.3em; color: var(--k-ink2); }
.sync, .glb, .rush { display: inline-flex; align-items: center; gap: .35em; padding: .38em .7em; border-radius: 2em; border: 1px solid var(--k-line); font-size: .72em; font-weight: 600; }
.sync i { width: .55em; height: .55em; border-radius: 50%; background: var(--st-green); }
.glb svg { width: 1.3em; height: 1.3em; }
.rush { background: var(--k-ink); border-color: var(--k-ink); color: #fff; }
.kb { flex: 1; min-height: 0; display: grid; gap: .7em; padding: .8em; }
.tscr h6 { margin: 0; font-size: .68em; font-weight: 700; color: var(--k-mu); text-transform: none; letter-spacing: .01em; }
.tscr kbd { font: 600 .82em/1 var(--font); padding: .2em .35em; border-radius: .3em; border: 1px solid var(--k-line); color: var(--k-mu); background: #fff; }
.chips { display: flex; gap: .35em; min-width: 0; overflow: hidden; }
.chips span { flex: none; display: inline-flex; align-items: center; gap: .35em; padding: .42em .8em; border-radius: 2em; border: 1px solid var(--k-line); background: #fff; font-size: .7em; font-weight: 600; white-space: nowrap; }
.chips span.on { background: var(--k-ink); border-color: var(--k-ink); color: #fff; }
.chips em { font-style: normal; min-width: 1.6em; padding: 0 .3em; border-radius: 1em; background: #c8102e; color: #fff; text-align: center; }
.today { display: flex; gap: .4em; }
.today span { display: inline-flex; align-items: center; gap: .4em; padding: .38em .7em; border-radius: .5em; background: #fff; border: 1px solid var(--k-line); font-size: .68em; font-weight: 600; white-space: nowrap; }
.today i { width: .6em; height: .6em; border-radius: 50%; }
.today i.g { background: var(--st-green); } .today i.a { background: #c98a12; } .today i.b { background: var(--st-blue); }
.rc { display: flex; flex-direction: column; gap: .45em; padding: .8em; border-radius: .7em; background: #fff; border: 1px solid var(--k-line); min-width: 0; }
.pr { display: grid; grid-template-columns: 3.4em minmax(0, 1fr); gap: .5em; padding: .45em 0; border-top: 1px solid var(--k-line); font-size: .7em; }
.pr b { font-variant-numeric: tabular-nums; }
.pr span { display: grid; font-weight: 600; min-width: 0; }
.pr small { font-weight: 500; color: var(--k-mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr.done { opacity: .55; }
.pr.od b { color: var(--st-red); }

/* handy: sale */
.k-sale { grid-template-columns: 19.5em minmax(0, 1fr); padding: 0; gap: 0; }
.co { display: flex; flex-direction: column; gap: .5em; padding: .9em .8em; background: #fff; border-right: 1px solid var(--k-line); min-width: 0; }
.co header { display: flex; justify-content: space-between; align-items: baseline; font-size: .82em; }
.co header small { color: var(--k-ink2); font-weight: 600; }
.li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2em .5em; padding: .55em .6em; border-radius: .5em; font-size: .72em; }
.li b { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.li small { color: var(--k-mu); display: inline-flex; align-items: center; gap: .3em; white-space: nowrap; }
.li u { text-decoration: none; display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: color-mix(in srgb, var(--acc) 22%, #fff); font-size: .8em; font-weight: 700; }
.qty { display: inline-flex; align-items: center; gap: .5em; font-weight: 700; }
.qty i { font-style: normal; display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: .35em; border: 1px solid var(--k-line); background: #fff; font-weight: 600; }
.li.sel { background: color-mix(in srgb, var(--acc) 12%, #fff); }
.cust { margin-top: auto; display: flex; align-items: center; gap: .6em; padding: .55em .7em; border-radius: .55em; border: 1px solid var(--k-line); background: var(--k-s2); font-size: .7em; }
.cust svg { width: 1.6em; height: 1.6em; }
.cust span { display: grid; } .cust small { color: var(--k-mu); }
.pm { display: grid; grid-template-columns: repeat(4, 1fr); padding: .2em; border-radius: .55em; background: var(--k-s2); border: 1px solid var(--k-line); }
.pm span { text-align: center; padding: .45em 0; border-radius: .4em; font-size: .7em; font-weight: 600; }
.pm span.on { background: #fff; box-shadow: 0 1px 2px rgba(10, 35, 40, .15); }
.payb { display: flex; align-items: center; justify-content: space-between; gap: .5em; padding: .75em .9em; border-radius: .6em; background: var(--k-ink); color: #fff; }
.payb span { font-size: .7em; font-weight: 650; line-height: 1.25; }
.payb b { font-size: 2.1em; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cat { display: flex; flex-direction: column; gap: .55em; padding: .8em; min-width: 0; }
.sf { display: flex; align-items: center; gap: .5em; padding: .55em .7em; border-radius: .55em; background: #fff; border: 1.5px solid var(--st-blue); box-shadow: 0 0 0 .2em rgba(29, 100, 194, .15); font-size: .74em; color: var(--k-faint); }
.sf svg { width: 1.5em; height: 1.5em; color: var(--k-mu); }
.sf kbd { margin-left: auto; }
.tl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5em; }
.it { position: relative; display: grid; gap: .15em; padding: .5em; border-radius: .55em; background: #fff; border: 1px solid var(--k-line); font-size: .7em; }
.it > i { display: grid; place-items: center; height: 3.2em; border-radius: .4em; background: var(--k-s2); margin-bottom: .3em; }
.it > i svg { width: 1.8em; height: 1.8em; color: var(--k-ink2); stroke-width: 1.5; }
.it.sv > i { background: #fff; border: 1.5px dashed var(--k-line2); }
.it b { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.it span { font-weight: 700; font-variant-numeric: tabular-nums; }
.it small { position: absolute; right: .6em; bottom: .55em; color: var(--k-mu); }
.it:not(.sv) small::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .3em; border-radius: 50%; background: var(--st-green); }
.ab { margin-top: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4em; }
.ab span { position: relative; display: grid; justify-items: center; gap: .15em; padding: .5em .2em; border-radius: .5em; background: #fff; border: 1px solid var(--k-line2); font-size: .64em; font-weight: 650; text-align: center; }
.ab svg { width: 1.6em; height: 1.6em; }
.ab kbd { position: absolute; top: .3em; right: .35em; font-size: .75em; border: 0; padding: 0; background: none; }

/* bakery: Theke */
.k-theke { grid-template-columns: minmax(0, 1fr) 11.5em; }
.th { display: flex; flex-direction: column; gap: .55em; min-width: 0; }
.tg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5em; }
.bt { position: relative; display: grid; gap: .05em; padding: .45em .5em .5em; border-radius: .6em; background: #fff; border: 1px solid var(--k-line); font-size: .74em; }
.bt i { height: 2.9em; border-radius: .45em; margin-bottom: .3em; }
.bt b { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt span { font-weight: 700; font-variant-numeric: tabular-nums; }
.bt small { position: absolute; right: .55em; bottom: .5em; font-size: .8em; font-weight: 700; letter-spacing: .04em; color: var(--k-mu); }
.bt em { position: absolute; top: .3em; right: .3em; min-width: 1.8em; height: 1.8em; display: grid; place-items: center; border-radius: 1em; background: var(--acc); color: #fff; font-style: normal; font-weight: 700; font-size: .85em; }
.t1 i { background: radial-gradient(60% 55% at 50% 60%, #e9b46a, #c98432 70%, transparent 72%), #fbefdc; }
.t2 i { background: radial-gradient(46% 26% at 50% 55%, #c58844, #8d5424 75%, transparent 78%), #f6eadb; }
.t3 i { background: radial-gradient(40% 30% at 50% 55%, #6b6470 0 18%, #d8a35c 20%, #b77a35 72%, transparent 75%), #f7ecdd; }
.t4 i { background: radial-gradient(80% 40% at 50% 60%, #f0b558, #cf7f1f 70%, transparent 72%), #fff3e2; }
.t5 i { background: radial-gradient(35% 35% at 50% 52%, #fff8dd 60%, transparent 62%), linear-gradient(45deg, transparent 22%, #e5a64f 23%, #e5a64f 77%, transparent 78%), #fbf1e0; }
.t6 i { background: radial-gradient(14% 14% at 50% 40%, #c03b3b 70%, transparent 75%), radial-gradient(45% 45% at 50% 55%, #f3e3c7 50%, #d79a4b 52%, #b9782f 70%, transparent 72%), #fbefe3; }
.t7 i { background: radial-gradient(70% 50% at 50% 62%, #8a5a2b, #5e3816 70%, transparent 72%), #f2e6d8; }
.t9 i { background: radial-gradient(38% 30% at 50% 55%, transparent 45%, #8a4a1c 47%, #6b3410 70%, transparent 72%), #f4e8da; }
.t8 i { background: radial-gradient(32% 40% at 50% 50%, #f5e7d2 40%, #b77a48 42%, #8a5530 66%, transparent 68%), #f3ebe4; }
.tb { margin-top: auto; display: grid; grid-template-columns: 7.4em minmax(0, 1fr) auto; gap: .5em; align-items: stretch; }
.qk { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25em; }
.qk i { display: grid; place-items: center; height: 1.75em; border-radius: .35em; background: #fff; border: 1px solid var(--k-line); font-style: normal; font-size: .72em; font-weight: 700; }
.qk i.x { background: var(--k-ink); color: #fff; border-color: var(--k-ink); }
.bon { display: flex; flex-direction: column; justify-content: center; gap: .15em; padding: .5em .8em; border-radius: .6em; background: #fff; border: 1px solid var(--k-line); font-size: .7em; color: var(--k-ink2); }
.bon b { margin-top: .2em; font-size: 2em; color: var(--k-ink); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pk { display: grid; gap: .4em; }
.pk span { display: flex; align-items: center; justify-content: center; gap: .45em; min-width: 6.2em; border-radius: .6em; border: 1px solid var(--k-line2); background: #fff; font-size: .82em; font-weight: 700; }
.pk span.kc { background: var(--k-ink); border-color: var(--k-ink); color: #fff; }
.pk svg { width: 1.5em; height: 1.5em; }

/* gastro: Tischplan */
.k-plan { grid-template-columns: minmax(0, 1fr) 11.5em; }
.fl { display: flex; flex-direction: column; gap: .55em; min-width: 0; }
.room { flex: 1; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, 8.2em); align-content: space-evenly; gap: 1.6em 1.2em; padding: 1.1em 1.4em; border-radius: .7em; background: #fff; border: 1px solid var(--k-line);
  background-image: radial-gradient(var(--k-line) 1px, transparent 1.2px); background-size: 1.3em 1.3em; }
.gt { --bd: var(--k-line2); --bgc: #fff; position: relative; display: grid; grid-template-columns: 1fr auto; align-content: space-between; padding: .5em .6em .55em; border-radius: .6em; border: 1.5px solid var(--bd); background: var(--bgc); font-size: .74em; }
.gt b { font-size: 1.9em; line-height: 1; font-weight: 700; letter-spacing: -.02em; }
.gt small { color: var(--k-mu); font-weight: 600; }
.gt em { grid-column: 1 / -1; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.gt em.rs { color: var(--acc-ink); }
.gt span { grid-column: 1 / -1; display: flex; align-items: center; gap: .3em; font-size: .9em; font-weight: 600; color: var(--k-ink2); }
.gt span svg { width: 1.2em; height: 1.2em; }
.gt u { margin-left: auto; text-decoration: none; display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: color-mix(in srgb, var(--acc) 22%, #fff); font-size: .8em; font-weight: 700; }
.gt::after { content: ""; position: absolute; left: 50%; bottom: -.45em; width: .7em; height: .7em; margin-left: -.35em; border-radius: 50%; background: var(--bd); box-shadow: 0 0 0 2px #fff; }
.gt.rd { border-radius: 50%; width: auto; height: 100%; aspect-ratio: 1; justify-self: center; align-self: center; place-content: center; text-align: center; grid-template-columns: 1fr; }
.gt.ln { grid-column: span 2; height: 5.4em; align-self: center; }
.gt[data-st="frei"]::after { display: none; }
.gt[data-st="besetzt"] { --bd: var(--st-blue); --bgc: var(--st-blue-bg); }
.gt[data-st="wartet"] { --bd: #c98a12; --bgc: var(--st-amber-bg); }
.gt[data-st="wartet"]::after { border-radius: 1px; transform: rotate(45deg); }
.gt[data-st="rechnung"] { --bd: var(--st-violet); --bgc: var(--st-violet-bg); }
.gt[data-st="rechnung"]::after { border-radius: 2px; }
.gt[data-st="reserviert"] { --bd: var(--acc-ink); --bgc: color-mix(in srgb, var(--acc) 8%, #fff); border-style: dashed; }
.lg { display: flex; flex-wrap: wrap; gap: .3em 1em; font-size: .64em; color: var(--k-mu); font-weight: 600; }
.lg span { display: inline-flex; align-items: center; gap: .35em; }
.lg i { width: .9em; height: .9em; border-radius: .25em; border: 1.5px solid var(--k-line2); background: #fff; }
.lg [data-st="besetzt"] i { border-color: var(--st-blue); background: var(--st-blue-bg); }
.lg [data-st="wartet"] i { border-color: #c98a12; background: var(--st-amber-bg); transform: rotate(45deg) scale(.85); }
.lg [data-st="rechnung"] i { border-color: var(--st-violet); background: var(--st-violet-bg); }
.lg [data-st="reserviert"] i { border: 1.5px dashed var(--acc-ink); }

/* salon: day book */
.k-salon { grid-template-columns: minmax(0, 1fr) 11.5em; grid-template-rows: auto minmax(0, 1fr); }
.wk { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.2em; padding: .5em .8em; border-radius: .6em; background: #fff; border: 1px solid var(--k-line); font-size: .7em; color: var(--k-ink2); white-space: nowrap; overflow: hidden; }
.wk .wq { display: inline-flex; align-items: center; gap: .4em; color: var(--k-ink); }
.wk svg { width: 1.4em; height: 1.4em; }
.wk .wa { margin-left: auto; display: inline-flex; align-items: center; gap: .3em; padding: .35em .8em; border-radius: .45em; background: var(--k-ink); color: #fff; font-weight: 700; }
.db { position: relative; display: grid; grid-template-columns: 2.9em repeat(3, minmax(0, 1fr)); gap: 0 .45em; padding: .6em .6em .6em 0; border-radius: .7em; background: #fff; border: 1px solid var(--k-line); --row: 5.4em; --top: 3.8em; min-width: 0; }
.hrs { display: grid; grid-template-rows: var(--top) repeat(5, var(--row)); font-size: .62em; color: var(--k-mu); text-align: right; font-variant-numeric: tabular-nums; }
.hrs { --row: 8.7em; --top: 6.13em; }
.hrs span { transform: translateY(-.6em); }
.ch { position: relative; border-left: 1px solid var(--k-line); background-image: linear-gradient(var(--k-s3) 1px, transparent 1px); background-size: 100% var(--row); background-position: 0 var(--top); min-width: 0; }
.ch header { height: var(--top); display: grid; grid-template-columns: 2.4em 1fr; column-gap: .45em; align-content: center; padding-left: .45em; }
.ch header svg { grid-row: 1 / 3; width: 2.4em; height: 2.4em; border-radius: 50%; stroke: none; box-shadow: 0 0 0 .15em #fff, 0 0 0 .27em color-mix(in srgb, var(--acc) 45%, #fff); }
.ch header b { font-size: .78em; align-self: end; }
.ch header small { font-size: .6em; color: var(--k-mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap { position: absolute; left: .3em; right: .3em; top: calc(var(--top) + var(--t) * var(--row) + .15em); height: calc(var(--h) * var(--row) - .3em); padding: .35em .45em; border-radius: .4em; border-left: .25em solid var(--c); background: var(--cb); display: flex; flex-direction: column; overflow: hidden; }
.ap b { font-size: .64em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap span { font-size: .58em; color: var(--k-ink2); white-space: nowrap; }
.ap.s1 { --c: var(--acc); --cb: color-mix(in srgb, var(--acc) 14%, #fff); } .ap.s2 { --c: #c98a12; --cb: var(--st-amber-bg); }
.ap.s3 { --c: var(--st-blue); --cb: var(--st-blue-bg); } .ap.s4 { --c: var(--st-green); --cb: var(--st-green-bg); }
.ap.ns { opacity: .55; background: repeating-linear-gradient(135deg, var(--st-blue-bg) 0 .5em, #fff .5em 1em); }
.ap.cur { box-shadow: 0 0 0 .15em var(--k-ink); }
.t0 { --t: 0; } .t05 { --t: .5; } .t1 { --t: 1; } .t25 { --t: 2.5; } .t15 { --t: 1.5; } .t3 { --t: 3; }
.h05 { --h: .5; } .h1 { --h: 1; } .h125 { --h: 1.25; } .h2 { --h: 2; }
.now { position: absolute; left: 2.9em; right: .6em; top: calc(.6em + var(--top) + 2.25 * var(--row)); height: 2px; background: #c8102e; }
.now::before { content: ""; position: absolute; left: -.35em; top: -.3em; width: .7em; height: .7em; border-radius: 50%; background: #c8102e; }
.pop { position: absolute; z-index: 1; left: 4em; top: calc(.6em + var(--top) + 3.55 * var(--row)); display: grid; gap: .4em; padding: .55em .6em; border-radius: .6em; background: #fff; border: 1px solid var(--k-line2); box-shadow: 0 .8em 1.6em -.6em rgba(10, 35, 40, .35); }
.pop b { font-size: .62em; }
.pop span { display: flex; gap: .3em; }
.pop i { font-style: normal; padding: .4em .6em; border-radius: .4em; border: 1px solid var(--k-line); font-size: .6em; font-weight: 700; white-space: nowrap; }
.pop i.k { background: var(--k-ink); color: #fff; border-color: var(--k-ink); }

/* retail: scanner */
.k-scan { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
.sl { display: flex; flex-direction: column; gap: .5em; min-width: 0; }
.sf.on { color: var(--k-ink2); border-color: var(--acc); box-shadow: 0 0 0 .22em color-mix(in srgb, var(--acc) 22%, transparent); }
.sf.on kbd { color: var(--acc-ink); border-color: color-mix(in srgb, var(--acc) 40%, #fff); }
.pl { display: grid; grid-template-columns: minmax(0, 1fr); border-radius: .6em; background: #fff; border: 1px solid var(--k-line); overflow: hidden; }
.pl div { display: grid; grid-template-columns: 2.4em minmax(0, 1fr) auto; align-items: center; gap: .5em; padding: .5em .8em; border-top: 1px solid var(--k-s3); font-size: .8em; }
.pl div:first-child { border-top: 0; }
.pl i { font-style: normal; color: var(--k-mu); font-weight: 600; }
.pl b { display: grid; font-weight: 650; min-width: 0; white-space: nowrap; }
.pl small { font-weight: 500; font-size: .8em; color: var(--k-mu); font-variant-numeric: tabular-nums; }
.pl span { font-weight: 700; font-variant-numeric: tabular-nums; }
.pl .pf { background: var(--k-s2); }
.pl .pf b { color: var(--k-ink2); }
.pl .nw { background: color-mix(in srgb, var(--acc) 10%, #fff); box-shadow: inset .22em 0 0 var(--acc); }
.tot { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; padding: .3em .2em 0; }
.tot span { font-size: .74em; color: var(--k-mu); font-weight: 600; }
.tot b { font-size: 3.2em; line-height: 1; font-weight: 700; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.fv { display: flex; flex-direction: column; gap: .5em; min-width: 0; }
.fg { display: grid; grid-template-columns: 1fr 1fr; gap: .45em; }
.fg span { display: grid; gap: .1em; padding: .7em .6em; border-radius: .55em; background: #fff; border: 1px solid var(--k-line); font-size: .72em; font-weight: 650; }
.fg small { color: var(--k-mu); font-weight: 600; }
.fg .lg2 { background: color-mix(in srgb, var(--acc) 10%, #fff); border-color: color-mix(in srgb, var(--acc) 35%, #fff); }
.rb { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em; }
.rb span { text-align: center; padding: .5em 0; border-radius: .5em; border: 1px dashed var(--k-line2); font-size: .7em; font-weight: 700; }
.pb { grid-column: 1 / -1; display: grid; grid-template-columns: 1.5fr .7fr .7fr 1.3fr 1.3fr; gap: .4em; }
.pb span { display: flex; align-items: center; justify-content: center; gap: .4em; padding: .7em .4em; border-radius: .55em; background: #fff; border: 1px solid var(--k-line2); font-size: .76em; font-weight: 700; }
.pb span.on { background: var(--k-ink); border-color: var(--k-ink); color: #fff; }
.pb span.nt { background: var(--k-s2); }
.pb svg { width: 1.5em; height: 1.5em; }

/* services: Aufträge */
.k-jobs { grid-template-columns: minmax(0, 1fr) 11.5em; grid-template-rows: auto minmax(0, 1fr); }
.kb5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4em; min-width: 0; }
.kc { display: flex; flex-direction: column; gap: .4em; padding: .45em; border-radius: .6em; background: var(--k-s2); border: 1px solid var(--k-line); min-width: 0; }
.kc h6 { display: flex; align-items: center; justify-content: space-between; color: var(--k-ink2); }
.kc h6 em { font-style: normal; min-width: 1.6em; text-align: center; border-radius: 1em; background: var(--k-s3); }
.jc { display: grid; gap: .1em; padding: .5em; border-radius: .45em; background: #fff; border: 1px solid var(--k-line); font-size: .64em; min-width: 0; }
.jc b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jc span { color: var(--k-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jc small { color: var(--k-mu); }
.jc.sel { border-color: var(--acc); box-shadow: 0 0 0 .2em color-mix(in srgb, var(--acc) 20%, transparent); }
.pl2 { justify-self: start; margin-top: .2em; padding: .15em .5em; border-radius: .3em; font-style: normal; font-weight: 700; font-size: .92em; background: var(--k-s3); color: var(--k-ink2); white-space: nowrap; }
.pl2.rd { background: var(--st-red-bg); color: var(--st-red); } .pl2.am { background: var(--st-amber-bg); color: var(--st-amber); } .pl2.bl { background: var(--st-blue-bg); color: var(--st-blue); } .pl2.gr { background: var(--st-green-bg); color: var(--st-green); }

/* phone */
.phone { position: absolute; right: 0; bottom: 0; width: 17.2em; height: 35em; padding: .55em; border-radius: 2.7em; background: linear-gradient(150deg, #2c3550, #0e1426 60%); box-shadow: var(--shadow-3), 0 0 0 1px rgba(255, 255, 255, .07) inset; z-index: 2; }
.pscr { position: relative; height: 100%; border-radius: 2.2em; overflow: hidden; background: #fff; color: #1b2236; line-height: 1.3; }
.island { position: absolute; z-index: 3; left: 50%; top: .6em; width: 5.2em; height: 1.45em; margin-left: -2.6em; border-radius: 1em; background: #0b0f1c; }
.ps { position: absolute; inset: 0 0 4.2em; display: flex; flex-direction: column; gap: .7em; padding: 0 0 .6em; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.ps.on { opacity: 1; visibility: visible; transition: opacity .5s ease .08s, visibility 0s; }
.cover { position: relative; height: 10em; flex: none; display: grid; place-items: center; overflow: hidden; background: linear-gradient(150deg, var(--acc2), var(--acc)); }
.cover::before, .cover::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.cover::before { width: 9em; height: 9em; left: -2.5em; top: 3.5em; }
.cover::after { width: 6em; height: 6em; right: -1.5em; top: -1.5em; background: rgba(255, 255, 255, .12); }
.cover svg { position: relative; width: 4.2em; height: 4.2em; fill: none; stroke: #fff; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 .4em .8em rgba(0, 0, 0, .18)); }
.c-handy { --acc: #2f6bff; --acc2: #19b5e8; } .c-baeckerei { --acc: #e07b12; --acc2: #f2b544; } .c-gastro { --acc: #e2453c; --acc2: #f08a4b; }
.c-friseur { --acc: #a64bdb; --acc2: #e25ca8; } .c-handel { --acc: #0f9f6e; --acc2: #6cc24a; } .c-dienstleistung { --acc: #4757d6; --acc2: #2ba3c7; }
.pinfo { display: grid; gap: .15em; padding: 0 1.1em; }
.pinfo b { font-size: 1.25em; font-weight: 700; letter-spacing: -.02em; }
.pinfo small { display: inline-flex; align-items: center; gap: .4em; font-size: .82em; color: #4f5872; }
.pinfo .open { width: .5em; height: .5em; border-radius: 50%; background: #16b37a; }
.pbtns { display: flex; gap: .45em; padding: 0 1.1em; }
.pbtns span { flex: 1; text-align: center; padding: .7em .4em; border-radius: .8em; border: 1px solid #e3e7f0; font-size: .85em; font-weight: 650; white-space: nowrap; }
.pbtns span.p1 { background: var(--acc); border-color: var(--acc); color: #fff; box-shadow: 0 .5em 1em -.5em var(--acc); }
.pcard { margin: 0 1.1em; padding: .8em .9em; border-radius: .9em; background: #f6f7fb; display: grid; gap: .3em; }
.pcard small { font-size: .78em; color: #6b7590; }
.pcard b { font-size: 1em; }
.meter { height: .45em; border-radius: 1em; background: #e3e7f0; overflow: hidden; }
.meter i { display: block; width: 100%; height: 100%; border-radius: 1em; background: linear-gradient(90deg, var(--acc2), var(--acc)); }
.pcard .st { font-size: .82em; font-weight: 650; color: var(--acc-ink); }
.plist { margin: 0 1.1em; display: grid; grid-template-columns: minmax(0, 1fr); border-radius: .9em; border: 1px solid #e7eaf2; overflow: hidden; }
.plist div { display: flex; align-items: center; gap: .5em; padding: .6em .8em; border-bottom: 1px solid #f0f2f7; font-size: .88em; }
.plist div:last-child { border-bottom: 0; }
.plist b { flex: 1; font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plist b i { font-style: normal; font-size: .78em; font-weight: 700; letter-spacing: .04em; color: #6b7590; }
.plist span { color: #4f5872; font-variant-numeric: tabular-nums; }
.plist em { font-style: normal; min-width: 1.8em; height: 1.8em; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--acc) 14%, #fff); color: var(--acc-ink); font-weight: 700; font-size: .85em; }
.pslot { margin: 0 1.1em; display: flex; align-items: center; gap: .5em; padding: .65em .8em; border-radius: .8em; background: color-mix(in srgb, var(--acc) 10%, #fff); color: var(--acc-ink); font-size: .85em; font-weight: 650; }
.pslot svg { width: 1.3em; height: 1.3em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.seg { margin: 0 1.1em; display: flex; padding: .22em; border-radius: .8em; background: #f1f3f8; }
.seg span { flex: 1; text-align: center; padding: .45em; border-radius: .6em; font-size: .85em; color: #5b647c; }
.seg span.on { background: #fff; color: #1b2236; font-weight: 650; box-shadow: 0 1px 2px rgba(18, 26, 47, .1); }
.pteam { display: flex; gap: .4em; padding: 0 1.1em; }
.pteam span { flex: 1; display: grid; justify-items: center; gap: .3em; font-size: .8em; font-weight: 600; padding: .55em .2em; border-radius: .8em; border: 1px solid #e7eaf2; }
.pteam span:first-child { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 8%, #fff); }
.pteam svg { width: 3em; height: 3em; border-radius: 50%; }
.pteam .any svg { box-sizing: border-box; padding: .75em; background: #f1f3f8; fill: none; stroke: #4f5872; stroke-width: 1.8; stroke-linecap: round; }
.slots { display: flex; gap: .4em; padding: 0 1.1em; }
.slots span { flex: 1; text-align: center; padding: .55em 0; border-radius: .7em; border: 1px solid #e3e7f0; font-size: .85em; font-weight: 600; font-variant-numeric: tabular-nums; }
.slots span.on { background: var(--acc); border-color: var(--acc); color: #fff; }

.pnav { position: absolute; left: 0; right: 0; bottom: 0; height: 4.2em; display: flex; justify-content: space-around; align-items: center; padding-bottom: .6em; border-top: 1px solid #eef0f5; background: #fff; }
.pnav svg { width: 1.5em; height: 1.5em; fill: none; stroke: #8a93aa; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pnav svg.on { stroke: var(--acc); }

/* toast: sits under the tablet, never over the work area */
.toast { position: absolute; left: 3em; bottom: 0; z-index: 3; width: 23em; height: 4.6em; }
.tt { position: absolute; inset: 0; display: flex; align-items: center; gap: .8em; padding: .8em 1em; border-radius: 1.1em; background: rgba(255, 255, 255, .94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #1b2236; box-shadow: 0 1.2em 2.4em -1em rgba(18, 26, 47, .4), 0 0 0 1px rgba(18, 26, 47, .06); opacity: 0; transform: translateY(.8em) scale(.97); transition: opacity .4s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.tt.on { opacity: 1; transform: none; transition-delay: .45s; }
.tt svg { flex: none; width: 2.4em; height: 2.4em; padding: .5em; border-radius: .8em; box-sizing: border-box; background: var(--acc); fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tt span { display: grid; font-size: .92em; color: #4f5872; line-height: 1.25; min-width: 0; }
.tt b { color: #1b2236; font-weight: 650; }
.pill { display: inline-flex; align-items: center; justify-self: start; align-self: flex-start; padding: .18em .6em; border-radius: 1em; background: #eef0f6; color: #4f5872; font-style: normal; font-size: .78em; font-weight: 600; white-space: nowrap; }
.pill.acc { background: color-mix(in srgb, var(--acc) 14%, #fff); color: var(--acc-ink); }