@font-face { font-family: "Hanken Grotesk"; font-weight: 100 900; font-display: swap; src: url("hanken-grotesk-latin-wght-normal.woff2") format("woff2"); }
/* Frosted glass over one warm room. One accent, semantic green and red, everything else is light on glass. */
:root { color-scheme: dark; --text: #fff9f0; --mute: #e9dccbb8; --faint: #e9dccb66; --glass: #20170f7a; --glass-2: #2a1f1673; --glass-hi: #fff4e41f; --line: #fff0dc24; --orange: #ec681c; --orange-2: #ff8a3d; --good: #8fdcae; --bad: #ff8f80; --warn: #ffc76b; --r: 22px; --blur: blur(30px) saturate(150%) brightness(.82); --spring: cubic-bezier(.3, 1.35, .45, 1); --ease: cubic-bezier(.2, .7, .2, 1); --gut-l: max(14px, env(safe-area-inset-left, 0px)); --gut-r: max(14px, env(safe-area-inset-right, 0px)); }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; color: var(--text); background: #1c150f; font: 500 15px/1.4 "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: url("img/raum.webp") center / cover no-repeat; }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; background: #120c0714; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; padding: 0; } ul, ol { list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:is(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--orange-2); outline-offset: 2px; }
.glass { background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 18px 50px #0a060340, inset 0 1px 0 #fff4e41a; }
.shell { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; height: 100dvh; padding: 14px var(--gut-r) 14px var(--gut-l); }

.side { position: relative; z-index: 5; display: flex; flex-direction: column; gap: 4px; width: 68px; padding: 10px; border-radius: 34px; transition: width .38s var(--spring); overflow: hidden; }
.side.open { width: 238px; }
.side .top { display: flex; align-items: center; gap: 10px; height: 48px; padding-left: 4px; flex: none; }
.mark { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--orange); border: 0; display: grid; place-items: center; font-weight: 900; color: var(--text); padding: 0; }
.side .brand { min-width: 0; white-space: nowrap; opacity: 0; transition: opacity .2s; } .side.open .brand { opacity: 1; }
.side .brand img { height: 20px; display: block; }
.side .brand small { color: var(--mute); font-size: 12px; }
.nav-items { position: relative; display: grid; gap: 2px; margin-top: 12px; }
.nav-slide { position: absolute; left: 0; right: 0; top: 0; height: 46px; border-radius: 23px; background: var(--glass-hi); border: 1px solid #fff0dc33; transition: transform .42s var(--spring); pointer-events: none; }
.nav-item { position: relative; display: flex; align-items: center; gap: 14px; height: 46px; padding: 0 14px; border: 0; border-radius: 23px; background: none; color: var(--mute); text-align: left; white-space: nowrap; transition: color .15s; }
.nav-item:hover, .nav-item[aria-current="page"] { color: var(--text); }
.nav-item svg { flex: none; width: 20px; height: 20px; }
.nav-item span { opacity: 0; transition: opacity .15s; } .side.open .nav-item span { opacity: 1; }
.nav-item b { position: absolute; top: 7px; left: 29px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--orange); color: var(--text); font-size: 10px; line-height: 16px; text-align: center; font-weight: 800; }
.side.open .nav-item b { position: static; margin-left: auto; }
.side .foot { margin-top: auto; display: grid; gap: 2px; }

.main { min-width: 0; overflow-y: auto; border-radius: var(--r); scrollbar-width: thin; padding-bottom: 20px; }
.bar { position: sticky; top: 0; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 12px; }
.bar h1 { font-size: clamp(19px, 2vw, 26px); font-weight: 700; letter-spacing: -.02em; margin-right: auto; }
.bar h1 small { display: block; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--mute); }
.search { width: min(260px, 40vw); height: 38px; padding: 0 14px; border-radius: 19px; border: 1px solid var(--line); background: #0000002e; }
.search::placeholder { color: var(--mute); }
.pill { height: 38px; padding: 0 16px; border-radius: 19px; border: 1px solid var(--line); background: var(--glass-hi); font-weight: 700; transition: transform .15s var(--ease), background .15s; white-space: nowrap; }
.pill:hover { transform: translateY(-1px); background: #fff4e42e; }
.pill.go { background: var(--orange); border-color: transparent; color: var(--text); }
.pill.go:hover { background: var(--orange-2); }
.demo { margin-bottom: 12px; padding: 8px 14px; color: var(--warn); font-weight: 700; font-size: 13px; }

.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.card { padding: 16px; min-width: 0; }
.c3 { grid-column: span 3; } .c4 { grid-column: span 4; } .c5 { grid-column: span 5; } .c6 { grid-column: span 6; } .c7 { grid-column: span 7; } .c8 { grid-column: span 8; } .c12 { grid-column: span 12; }
.card h2 { font-size: 14px; font-weight: 700; color: var(--mute); margin-bottom: 8px; }
.kpi { display: grid; gap: 2px; align-content: start; }
.kpi strong { font-size: clamp(24px, 2.5vw, 34px); font-weight: 700; letter-spacing: -.025em; line-height: 1.05; }
.kpi small { color: var(--mute); font-size: 12.5px; }
.kpi.hero { background: linear-gradient(150deg, #c9803ccc, #8a4f22b3); border-color: #ffd9a855; }
.kpi.hero h2, .kpi.hero small { color: #fff3e2d6; }
.bad { color: var(--bad); } .good { color: var(--good); } .warn { color: var(--warn); }

.bars { display: flex; align-items: flex-end; gap: clamp(6px, 1.2vw, 16px); height: 190px; padding-top: 22px; }
.bars li { flex: 1; min-width: 0; display: grid; gap: 6px; justify-items: center; align-self: stretch; grid-template-rows: minmax(0, 1fr) auto; }
.bars .col { position: relative; align-self: end; width: min(100%, 34px); border-radius: 17px; background: linear-gradient(180deg, #fff4e466, #fff4e40d); border: 1px solid #fff0dc33; min-height: 12px; transition: height .5s var(--ease); }
.bars .col.top { background: linear-gradient(180deg, var(--orange-2), #ec681c55); border-color: #ffb98466; }
.bars .col i { position: absolute; left: 50%; top: -20px; translate: -50% 0; font-style: normal; font-size: 12px; font-weight: 800; }
.bars small { font-size: 11px; color: var(--mute); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.donut svg { width: 118px; height: 118px; flex: none; }
.legend { display: grid; gap: 3px; font-size: 12.5px; min-width: 110px; flex: 1; }
.legend li { display: flex; align-items: center; gap: 7px; } .legend i { width: 9px; height: 9px; border-radius: 50%; flex: none; } .legend b { margin-left: auto; }

.rows { display: grid; gap: 2px; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; width: 100%; padding: 9px 10px; border: 0; border-radius: 13px; background: none; text-align: left; transition: background .14s; }
.row:hover { background: var(--glass-hi); }
.row b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row small { grid-column: 1; color: var(--mute); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip { grid-row: 1 / span 2; grid-column: 2; padding: 3px 9px; border-radius: 11px; font-size: 12px; font-weight: 700; background: var(--glass-hi); white-space: nowrap; }
.chip.bad { background: #ff8f8026; } .chip.good { background: #8fdcae26; } .chip.warn { background: #ffc76b26; }
.empty { padding: 14px 10px; color: var(--mute); font-size: 13.5px; }

.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 8px; scrollbar-width: thin; }
.lane { scroll-snap-align: start; padding: 12px; display: grid; gap: 8px; align-content: start; min-height: 240px; }
.lane h3 { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--mute); }
.tile { display: grid; gap: 3px; width: 100%; padding: 11px 12px; border-radius: 15px; border: 1px solid var(--line); background: var(--glass-2); text-align: left; transition: transform .18s var(--ease), border-color .15s; }
.tile:hover { transform: translateY(-2px); border-color: #fff0dc55; }
.tile b { font-weight: 700; overflow-wrap: anywhere; }
.tile small { color: var(--mute); font-size: 12.5px; overflow-wrap: anywhere; }
.tile .meta { display: flex; flex-wrap: wrap; gap: 3px 6px; font-size: 12px; font-weight: 700; margin-top: 3px; }
.tile .meta span { padding: 1px 7px; border-radius: 8px; background: var(--glass-hi); }
.who { display: flex; align-items: center; gap: 10px; }
.ava { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--orange); font-weight: 800; flex: none; }

.scrim { position: fixed; inset: 0; z-index: 20; background: #0a060366; animation: fade .2s; }
.sheet { position: fixed; z-index: 21; top: 14px; right: 14px; bottom: 14px; width: min(430px, calc(100vw - 28px)); overflow-y: auto; padding: 18px; background: #1e1610d9; animation: slide .34s var(--spring); }
.sheet h2 { font-size: 21px; font-weight: 700; letter-spacing: -.02em; padding-right: 40px; overflow-wrap: anywhere; }
.sheet .x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--glass-hi); font-size: 18px; line-height: 1; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 12px; }
.quick a { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 17px; background: var(--glass-hi); text-decoration: none; font-weight: 700; font-size: 13.5px; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.form label { display: grid; gap: 4px; font-size: 12.5px; color: var(--mute); font-weight: 700; min-width: 0; }
.form .wide { grid-column: 1 / -1; }
.form input, .form select, .form textarea { width: 100%; min-height: 40px; padding: 8px 11px; border-radius: 12px; border: 1px solid var(--line); background: #00000033; font-size: 16px; font-weight: 500; color: var(--text); }
.form select option { background: #2a1f16; }
.form textarea { resize: vertical; min-height: 74px; }
.toast { position: fixed; z-index: 30; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); translate: -50% 0; padding: 10px 16px; border-radius: 16px; font-weight: 700; background: #1e1610ee; border: 1px solid var(--line); max-width: calc(100vw - 28px); animation: fade .2s; }
.toast.err { color: var(--bad); }

.login { min-height: 100dvh; display: grid; place-items: center; padding: 16px; }
.login form { width: min(380px, 100%); padding: 24px; display: grid; gap: 12px; }
.login img { height: 26px; margin-bottom: 4px; }
.login h1 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.who-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.who-pick label { position: relative; display: grid; place-items: center; height: 42px; border-radius: 14px; border: 1px solid var(--line); font-weight: 700; cursor: pointer; }
.who-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.who-pick label:has(input:checked) { background: var(--orange); border-color: transparent; }
.who-pick label:has(input:focus-visible) { outline: 2px solid var(--orange-2); outline-offset: 2px; }
.login .pw { height: 44px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--line); background: #00000033; font-size: 16px; }
.login .pill { height: 44px; border-radius: 14px; }
.login .err { color: var(--bad); font-size: 13.5px; min-height: 1.2em; }

@keyframes fade { from { opacity: 0; } }
@keyframes slide { from { transform: translateX(40px); opacity: 0; } }
@media (max-width: 1100px) { .c3 { grid-column: span 6; } .c4, .c5, .c6, .c7, .c8 { grid-column: span 12; } }
@media (max-width: 760px) {
  body::before { background-image: url("img/raum-m.webp"); }
  .shell { display: block; height: auto; min-height: 100dvh; padding: 10px var(--gut-r) calc(88px + env(safe-area-inset-bottom, 0px)) var(--gut-l); }
  .main { overflow: visible; }
  .bar { top: calc(6px + env(safe-area-inset-top, 0px)); padding: 9px 12px; }
  .search { width: 100%; order: 3; }
  .side, .side.open { position: fixed; left: 50%; translate: -50% 0; top: auto; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); width: min(366px, calc(100vw - 20px)); height: 66px; padding: 6px; border-radius: 33px; flex-direction: row; overflow: visible; }
  .side .top, .side .foot { display: none; }
  .nav-items { flex: 1; margin: 0; grid-auto-flow: column; grid-auto-columns: 1fr; }
  .nav-slide { top: 0; bottom: 0; height: auto; width: 25%; right: auto; border-radius: 27px; }
  .nav-item, .side.open .nav-item { flex-direction: column; justify-content: center; gap: 1px; height: 54px; padding: 0; border-radius: 27px; font-size: 11px; font-weight: 700; }
  .nav-item span, .side.open .nav-item span { opacity: 1; }
  .nav-item b, .side.open .nav-item b { position: absolute; top: 3px; left: calc(50% + 6px); margin: 0; }
  .sheet { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 88dvh; border-radius: 26px 26px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); animation-name: rise; }
  .board { grid-auto-columns: 82vw; margin-inline: calc(var(--gut-l) * -1) calc(var(--gut-r) * -1); padding-inline: var(--gut-l) var(--gut-r); scroll-padding-inline: var(--gut-l); }
  .c3 { grid-column: span 6; }
  .bars { height: 160px; }
}
@keyframes rise { from { transform: translateY(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }