/* KACHELN ON THE COMPUTER (CEO, 23 Sep 2026: "make the desktop version familiar with the people who are using
   the app"). One design, shown twice: the phone's living tiles, its five doors, its numbers, its plates and
   its state colours, on a computer screen. Every colour is a token from ck2.css, so light and dark are one
   set of markup. The classes are prefixed k-; the older ck- classes keep working under the same tokens. */

/* ── the frame: five doors in a rail, the credits pill in the head ────────── */
.ck-side{width:248px}
.ck-side-head{min-height:88px;padding:18px 22px 8px}
.ck-side-body{padding:6px 14px 18px;border-right:1px solid var(--lv-line)}
.ck-nav{gap:4px}
.ck-nav-i{height:52px;padding:0 14px;border-radius:16px;font-size:15.5px;font-weight:600;gap:14px;border:1px solid transparent}
.ck-nav-i:hover{background:var(--lv-white);border-color:var(--lv-line)}
.ck-nav-i[data-on]{background:var(--lv-white);border-color:var(--lv-line);font-weight:800;box-shadow:var(--shadow-card)}
.ck-nav-i[data-on] svg{color:var(--lv-coral-600)}
.ck-head{min-height:88px;padding:14px 36px;border-bottom:0}
.ck-head h1{font-size:32px;font-weight:800;letter-spacing:-.035em}
.ck-credits{gap:8px;min-height:40px;padding:0 14px 0 12px;border:1px solid var(--lv-line);border-radius:999px;background:var(--lv-white);font-size:14px;font-weight:700}
.ck-credits>span:first-child{color:var(--lv-ink)}
.ck-pad{padding:8px 36px 80px;max-width:1280px}
.ck-user{border-radius:18px}

/* ── the tile ─────────────────────────────────────────────────────────────── */
.k-tile{position:relative;display:block;width:100%;text-align:left;border:1px solid var(--lv-line);border-radius:26px;background:var(--lv-white);padding:18px 20px;overflow:hidden;color:var(--lv-ink);text-decoration:none;font:inherit}
a.k-tile,button.k-tile{cursor:pointer;transition:transform 140ms ease,border-color 140ms ease}
a.k-tile:hover,button.k-tile:hover{border-color:var(--lv-line-strong);color:var(--lv-ink)}
a.k-tile:active,button.k-tile:active{transform:scale(.99)}
.k-tile--ok{border-color:var(--vera);background:linear-gradient(200deg,var(--k-green-tint),var(--lv-white) 72%)}
.k-tile--accent{border-color:var(--lv-coral-600);background:linear-gradient(200deg,var(--k-coral-tint),var(--lv-white) 72%)}
.k-tile--wait{border-color:var(--k-amber);background:linear-gradient(200deg,var(--k-amber-tint),var(--lv-white) 72%)}
.k-tile--sunken{background:var(--lv-sand)}
.k-tile--photo{padding:0;min-height:230px;display:flex;flex-direction:column;justify-content:flex-end;background:var(--lv-sand);color:#FDF8F4}
.k-tile--photo>img,.k-tile--photo>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.k-tile--photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(21,23,27,.04) 30%,rgba(21,23,27,.86));pointer-events:none}
.k-tile--photo>.k-on{position:relative;z-index:1;padding:18px 20px;color:#FDF8F4}
.k-on b{display:block;font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.k-on small{display:block;margin-top:5px;font-size:13px;color:rgba(253,248,244,.82)}
.k-on .k-res{display:inline-flex;align-items:center;gap:7px;margin-top:8px;font-size:13px;font-weight:700;color:#FDF8F4}
.k-on .k-res::before{content:"";width:7px;height:7px;border-radius:50%;background:#3A9A6E}
.k-state{position:absolute;top:12px;right:12px;z-index:2}
.k-tile--photo .k-state .ck-badge{background:rgba(253,248,244,.92);border-color:transparent;color:#241B14}
.k-tile--photo .k-state .ck-badge--ready{color:#14472F}
.k-tile--photo .k-state .ck-badge--wait{color:#8A5B0A}
.k-tile--photo .k-state .ck-badge--attention{color:#8F2F16}

/* ── the number tile ──────────────────────────────────────────────────────── */
.k-num{padding:16px 18px;min-height:104px}
.k-num b{display:block;font-size:34px;font-weight:800;letter-spacing:-.035em;line-height:1.05;font-variant-numeric:tabular-nums}
.k-num b.is-long{font-size:26px}
.k-num span{display:block;margin-top:6px;font-size:13.5px;font-weight:600;color:var(--lv-muted)}
.k-period{margin:10px 0 0 4px;font-size:13px;color:var(--lv-muted)}

/* ── the two doors: Posten on the plate, Werben on the coral ──────────────── */
.k-door{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:176px;padding:20px 22px;border-radius:26px;text-decoration:none;color:var(--k-onplate);background:var(--k-plate);overflow:hidden;transition:transform 140ms ease}
.k-door:hover{color:var(--k-onplate);transform:translateY(-1px)}
.k-door:active{transform:scale(.99)}
.k-door--accent{background:var(--lv-coral-600);color:#FFFFFF}
.k-door--accent:hover{color:#FFFFFF}
.k-door-top{display:flex;justify-content:space-between;align-items:flex-start}
.k-door-ic{position:relative;width:46px;height:46px;display:flex;align-items:center;justify-content:center}
.k-door-ic::before{content:"";position:absolute;inset:0;border-radius:50%;background:currentColor;opacity:.26;animation:k-breathe 3s ease-in-out infinite}
.k-door-ic::after{content:"";position:absolute;inset:5px;border-radius:50%;background:currentColor;opacity:.14}
.k-door-ic svg{position:relative;z-index:1}
@keyframes k-breathe{0%,100%{transform:scale(1);opacity:.3}50%{transform:scale(1.22);opacity:.08}}
.k-door-state{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.18);font-size:12px;font-weight:700;white-space:nowrap}
.k-door--accent .k-door-state{background:rgba(255,255,255,.2)}
html[data-theme="inverse"] .k-door:not(.k-door--accent) .k-door-state,.ck-app[data-theme="dark"] .k-door:not(.k-door--accent) .k-door-state{background:rgba(21,23,27,.1)}
.k-door-state::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.k-door-word{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:32px;font-weight:800;letter-spacing:-.03em;line-height:1}
.k-door-word svg{flex:none}

/* ── grids ────────────────────────────────────────────────────────────────── */
.k-grid{display:grid;gap:16px}
.k-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.k-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.k-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.k-grid--rooms{grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
.k-grid--photos{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
@media (max-width:1100px){.k-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}.k-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
.k-sec{margin-top:26px}
.k-sec-h{display:flex;align-items:baseline;gap:10px;margin:0 0 12px 4px}
.k-sec-h h2{font-size:18px;font-weight:800;letter-spacing:-.02em}
.k-sec-h small{font-size:13px;color:var(--lv-muted)}

/* ── rooms (Mehr) ────────────────────────────────────────────────────────── */
.k-room{min-height:156px;display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.k-room .k-ic{width:40px;height:40px;border-radius:12px;background:var(--lv-sand);display:flex;align-items:center;justify-content:center;color:var(--lv-ink)}
.k-room b{display:block;font-size:16px;font-weight:700;letter-spacing:-.01em}
.k-room small{display:block;font-size:13px;color:var(--lv-muted);margin-top:4px;line-height:1.4}
.k-room--wait small{color:var(--lv-coral-700);font-weight:700}
.k-row{display:flex;align-items:center;gap:14px}
.k-row>.grow{flex:1;min-width:0}
.k-list-tile>.k-li{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--lv-line);text-decoration:none;color:inherit}
.k-list-tile>.k-li:first-child{border-top:0;padding-top:4px}
.k-list-tile>.k-li:last-child{padding-bottom:4px}
.k-li b{display:block;font-size:15px;font-weight:700}
.k-li small{display:block;font-size:13px;color:var(--lv-muted);margin-top:2px}

/* ── the ring, the progress bar, the week strip, the channel mark ─────────── */
.k-ring{position:relative;display:inline-grid;place-items:center}
.k-ring svg{display:block}
.k-ring>span{position:absolute;display:flex;flex-direction:column;align-items:center;font-weight:800;letter-spacing:-.03em;line-height:1}
.k-ring>span small{margin-top:3px;font-size:11px;font-weight:600;color:var(--lv-muted);letter-spacing:0}
.k-progress{height:6px;border-radius:3px;background:var(--lv-sand-deep);overflow:hidden}
.k-progress>i{display:block;height:100%;border-radius:3px;background:var(--lv-coral-600);transition:width 600ms cubic-bezier(.2,.8,.2,1)}
.k-week{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;gap:4px}
.k-week small{display:block;font-size:12px;color:var(--lv-muted)}
.k-week b{display:block;font-size:20px;font-weight:800;margin-top:4px;letter-spacing:-.02em}
.k-week .is-today b{color:var(--lv-coral-600)}
.k-cmark{flex:none;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;background:var(--lv-sand);border:1px solid var(--lv-line);color:var(--lv-ink)}
.k-step{display:flex;align-items:flex-start;gap:14px;padding:14px 0;border-top:1px solid var(--lv-line)}
.k-step:first-of-type{border-top:0}
.k-step .k-box{flex:none;width:26px;height:26px;border-radius:8px;border:1.5px solid var(--lv-line-strong);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--lv-muted);margin-top:1px}
.k-step .k-box.is-done{background:var(--k-plate);border-color:var(--k-plate);color:var(--k-onplate)}
.k-step .k-box.is-next{border-style:dashed}
.k-step b{display:block;font-size:15px;font-weight:700}
.k-step small{display:block;font-size:13.5px;color:var(--lv-muted);margin-top:3px;line-height:1.45}
.k-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid var(--lv-line);background:var(--lv-sand);font-size:12.5px;font-weight:700;white-space:nowrap}

/* ── the phone gate: on a phone the cockpit is the app ────────────────────── */
.k-gate{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:32px 24px 48px;text-align:center;background:var(--lv-cream);color:var(--lv-ink);font-family:var(--ck-font)}
.k-gate .wm{width:min(230px,62vw);height:auto;display:block;margin-bottom:12px}
.k-gate .wm--dark{display:none}
html[data-theme="inverse"] .k-gate .wm--light,.ck-app[data-theme="dark"] .k-gate .wm--light{display:none}
html[data-theme="inverse"] .k-gate .wm--dark,.ck-app[data-theme="dark"] .k-gate .wm--dark{display:block}
.k-gate h1{font-size:28px;font-weight:800;letter-spacing:-.03em;line-height:1.1;max-width:18ch;text-transform:none}
.k-gate p{font-size:15px;color:var(--lv-muted);max-width:32ch;line-height:1.5}
.k-gate .stores{display:flex;flex-direction:column;gap:10px;width:min(320px,100%);margin-top:8px}
.k-store{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 20px;border-radius:16px;background:var(--k-plate);color:var(--k-onplate);font-size:15px;font-weight:700;text-decoration:none;border:0;font-family:inherit}
.k-store:hover{color:var(--k-onplate)}
.k-store[aria-disabled="true"]{opacity:.5;cursor:default}
.k-store .soon{margin-left:6px;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.18);font-size:11.5px}
.k-gate .fine{font-size:13px;color:var(--lv-muted);margin-top:6px}
.k-gate .fine a{color:var(--text-link);font-weight:700}