*,*::before,*::after{box-sizing:border-box}
:root{
  --z:1.6;
  /* HAIR HAUS CI: Navy #1B2240, HH Rot #C61748, Rosé #FAD1DD, Rotgrau #897177 */
  --bg:#F5F2F3; --bg-2:#EAE3E5; --surface:#FFFFFF; --surface-2:#FAF7F8;
  --ink:#1B2240; --ink-2:#3E4463; --muted:#7C6A70; --faint:#A2949A;
  --line:#E4DBDE; --line-2:#D2C5C9;
  --accent:#C61748; --accent-ink:#FFFFFF;
  --accent-soft:color-mix(in srgb, var(--accent) 13%, var(--surface));
  --accent-line:color-mix(in srgb, var(--accent) 42%, var(--surface));
  --warn:#A96A12; --warn-soft:#FBF0DE; --crit:#B3243F; --crit-soft:#FBE2E7;
  --shadow-1:0 1px 2px rgba(27,34,64,.07), 0 1px 1px rgba(27,34,64,.04);
  --shadow-2:0 4px 14px rgba(27,34,64,.10), 0 1px 3px rgba(27,34,64,.06);
  --shadow-3:0 18px 44px rgba(27,34,64,.20), 0 4px 12px rgba(27,34,64,.10);
  --r-s:6px; --r-m:10px; --r-l:14px;
  /* Labels aus der Sekundärpalette */
  --lbl-rot:#C61748; --lbl-rose:#EB99A8; --lbl-tuerkis:#3D93A6; --lbl-blond:#B18F45;
  --lbl-flieder:#7E80B4; --lbl-navy:#1B2240; --lbl-gruen:#3F8A63; --lbl-orange:#C4702C;
  --lbl-grau:#897177; --lbl-pflaume:#8C4A6B;
  --font-d:"Bebas Neue","Ubuntu",system-ui,sans-serif;
  --font-b:"Ubuntu",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#151830; --bg-2:#1B1F3A; --surface:#212545; --surface-2:#2A2E52;
    --ink:#ECEAF2; --ink-2:#C6C4D8; --muted:#9791A8; --faint:#7B7590;
    --line:#333760; --line-2:#454A76;
    --accent:#EE5E82; --accent-ink:#1B2240;
    --accent-soft:color-mix(in srgb, var(--accent) 18%, var(--surface));
    --accent-line:color-mix(in srgb, var(--accent) 45%, var(--surface));
    --warn:#D9A445; --warn-soft:#3A2E18; --crit:#F0788F; --crit-soft:#3E1F2A;
    --shadow-1:0 1px 2px rgba(0,0,0,.45);
    --shadow-2:0 4px 14px rgba(0,0,0,.5);
    --shadow-3:0 18px 44px rgba(0,0,0,.65);
    --lbl-rot:#E8496F; --lbl-rose:#F0A9B6; --lbl-tuerkis:#63B6C7; --lbl-blond:#D6BC83;
    --lbl-flieder:#A0A2C9; --lbl-navy:#8A90C4; --lbl-gruen:#57A87C; --lbl-orange:#D48244;
    --lbl-grau:#A2939A; --lbl-pflaume:#BF7BA0;
  }
}
:root[data-theme="dark"]{
    --bg:#151830; --bg-2:#1B1F3A; --surface:#212545; --surface-2:#2A2E52;
    --ink:#ECEAF2; --ink-2:#C6C4D8; --muted:#9791A8; --faint:#7B7590;
    --line:#333760; --line-2:#454A76;
    --accent:#EE5E82; --accent-ink:#1B2240;
    --accent-soft:color-mix(in srgb, var(--accent) 18%, var(--surface));
    --accent-line:color-mix(in srgb, var(--accent) 45%, var(--surface));
    --warn:#D9A445; --warn-soft:#3A2E18; --crit:#F0788F; --crit-soft:#3E1F2A;
    --shadow-1:0 1px 2px rgba(0,0,0,.45);
    --shadow-2:0 4px 14px rgba(0,0,0,.5);
    --shadow-3:0 18px 44px rgba(0,0,0,.65);
    --lbl-rot:#E8496F; --lbl-rose:#F0A9B6; --lbl-tuerkis:#63B6C7; --lbl-blond:#D6BC83;
    --lbl-flieder:#A0A2C9; --lbl-navy:#8A90C4; --lbl-gruen:#57A87C; --lbl-orange:#D48244;
    --lbl-grau:#A2939A; --lbl-pflaume:#BF7BA0;
}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-b); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow:hidden;
  overscroll-behavior:none;
}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--muted);background-clip:content-box;border:3px solid transparent}
::-webkit-scrollbar-track{background:transparent}

/* ---------- shell ---------- */
/* Ansichtsgröße: eine Skalierung für alles. Die Höhen setzt das Skript in
   Pixeln, weil Bildschirm-Einheiten sich mit der Skalierung nicht vertragen. */
body{zoom:var(--z,1)}
#root{height:100dvh;display:flex;flex-direction:column;position:relative}
#overlay-wrap{position:fixed;top:0;left:0;pointer-events:none;z-index:100}
#overlay{position:absolute;inset:0}
#overlay > *:not(.drag-ghost){pointer-events:auto}
.topbar{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:9px 14px;background:var(--surface);border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-1);z-index:20;position:relative;
}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-d);font-weight:400;font-size:22px;letter-spacing:.03em;white-space:nowrap;line-height:1}
.brand .nm{
  font-family:var(--font-d);font-size:22px;letter-spacing:.03em;color:var(--ink);
  background:transparent;border:1px solid transparent;border-radius:6px;
  padding:2px 5px;margin:-2px -5px;line-height:1.05;min-width:40px;
}
.brand .nm:hover:not(:read-only){border-color:var(--line);background:var(--surface-2)}
.brand .nm:focus{outline:none;border-color:var(--accent-line);background:var(--surface-2)}
.brand .mark{width:28px;height:28px;border-radius:8px;flex:0 0 auto;font-size:0;color:transparent;
  background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAMAAADVRocKAAAAYFBMVEXIFkfMMl26BDKsAlLcC1XHFkjgg51/AADlADnrrsDbbo3GF0j+/v4AAADDDkHJJVPxx9P55uzeeZXmma7ttsX009z22uLCCj7OOmPpp7rii6TZZof/AADRR27VVXnIF0i1SP/SAAAAIHRSTlNc/wUGC7P/AgT///7/AP//////////////////Af//h+E6Ij4AAASTSURBVHja1ZoJc6M6DIDthKXtuvjA3GD4//9yLUPCEXxAwpt5mp2dJnX1WbIsbAmUPKX7TpIbGgbyhgwDuiXJdzdrRc+fIv0PkQ8IioyyLaBL7gP5kAz3pNsAui5B5IOCQOMC0H3d/pCPyp/bVzcDuq/7h/Vrwn0koIv0Pwka0N1uF+gHL906A7gnl+jXBK1aA25B8UMp/I+ZlvmjP5a08q6LvANLglUrM84LEM4z2Sqsv/VK1HXoO/HsL0pU/FP8bqWo04r47BiSb5S4DaA45WLSKXIOkj9oImuZBxEl6O5aAVpJMelqWlUZ9xNW9W2Tjd8XjRuh1Ud+9bnstceXLtcfcF8bS4QbESFk931q1Nv8QClrM2NF6zIBDdbpm7+ulSNaStKbQVllNWKwAsz0M+WNxJ6Dn1pqBVh+IeHPUuLfT5SZqTRWH+1+y8ByXpVBGYEqMKI+AmDcNacdI2pwZzjA6E/pkbwWWwl7APBPWx5KnDS1EXYAYO8iKqgzTz0jFggyCNCM85f1JHFl1V/F05ifZrRhx69bAO2ncXP+zG2EajGGEQqRrbwAVkwRl8+ZOd1fD6NxEs7GtePMB5BmNmGAegOo9I5rqBsADurpSUDZ7jhpA+DPUDgBME6qXQCqpyDYGwBwUk/tANjCMX0DAOue2S2AEC0eYXAKYExQdguy2YAloClxBTJvABBGdgBggrQCNF5g8grgZIz4etSCsxHLilcAUdoJ2AIo42UM7ADGDGVyghUAXlglSrT2UO8EpH4A7IXaYoFaLPFpgPEz2wXQNfssAPyg9gFylW7PAmizftoiyxKct6BfLwJa5qHFEuwDSABALwLfBWx+YQUQD0B/vZwomvOEWKWRPYDIQYQboD0hFH0FQABLD2AlVoDOIDZA8ylAX14IgDhtLwXE/3cADLatwaVRFLIPfgXI77l9ELKTJTw6cePfyXgvVbDcn4vKxznaAcC2XLRJ5KeT3d/1yQWtVn9xQDmdrqXteXD5E41UFz+Tx0cadQFi8tapwn8uMhY8okgePxcpy8ku0wDYYZMWzOGTxQLtZ1G5zqbPOFqfTdXL2VRZz6a1/XTdLqZy/nTdu+8H6Vv3g8Z5PzABUlx5w3n7jla/1hPQ6zVcnb1l0oBbJszh9D2ZaQdJGnDTN4OuuukbM9e1ivWVaL0xl7WKJqhWMY6Daks2ibRXW9Q8KLjaouVnXS8KE1NGCKsXjRW1o4T2QMWL4PwoYayoseCqIz5WdRyrrPv6XXXTDAfWTStu109sld/aFIxD1JMzld/HRSlTnuIyfdSu7eX3wVkw/pUuBCWqHudRHq++64X4a3Zq3RNa7tb2ydg/EKmri4OQswMy5oGmZxs7KGG9NOlKSEydDQp3j0hNPZyijtuKTT0cptpm6ksJWbkXKXI3ifRMccOfZ/fCdKGK5wmep8zXqrv72lwmUNJMvNw/RJYqf/8iSvyNOtNXZH1cZzB3LTnP6lSvSulPJtCoC2k1PursbCrWBQu0GgObpafEKL++3Xt9w/rylvv1Lw1c/9rD9S9uXP/qyX/w8sxVr//8AxDrukWqCO5tAAAAAElFTkSuQmCC");background-size:cover;background-position:center}
.topbar .sep{width:1px;height:22px;background:var(--line);flex:0 0 auto}
.btn{
  display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;
  border-radius:var(--r-s);border:1px solid var(--line);background:var(--surface);
  color:var(--ink-2);font-weight:500;font-size:13px;white-space:nowrap;
  transition:background .12s,border-color .12s,color .12s;
}
.btn:hover{background:var(--surface-2);border-color:var(--line-2);color:var(--ink)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--surface-2);border-color:var(--line)}
.btn.sm{height:28px;padding:0 9px;font-size:12.5px}
.btn.icon{width:32px;padding:0;justify-content:center}
.btn.icon.sm{width:28px}
.btn[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.spacer{flex:1 1 auto}
.search{position:relative;display:flex;align-items:center}
.search input{
  height:32px;width:190px;padding:0 30px 0 30px;border-radius:var(--r-s);
  border:1px solid var(--line);background:var(--bg-2);color:var(--ink);
  transition:width .16s,background .12s;font-size:13px;
}
.search input:focus{width:250px;background:var(--surface);outline:none;border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-soft)}
.search .ic{position:absolute;left:9px;color:var(--faint);pointer-events:none;display:grid}
.search .clr{position:absolute;right:5px;color:var(--faint);width:22px;height:22px;border-radius:5px;display:grid;place-items:center}
.search .clr:hover{background:var(--line);color:var(--ink)}
.who{display:flex;align-items:center;gap:7px;padding:0 4px}
.zoomctl{
  display:flex;align-items:center;gap:2px;flex:0 0 auto;
  border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface);height:32px;padding:0 2px;
}
.zoomctl button{
  width:24px;height:26px;border-radius:4px;color:var(--ink-2);font-size:15px;font-weight:600;line-height:1;
}
.zoomctl button:hover:not(:disabled){background:var(--surface-2);color:var(--ink)}
.zoomctl button:disabled{opacity:.3;cursor:default}
.zoomctl b{
  font-size:11.5px;font-weight:600;color:var(--muted);min-width:36px;text-align:center;
  font-variant-numeric:tabular-nums;
}
.banner.ok{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line)}
.banner span{flex:1 1 auto}
.sync{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);white-space:nowrap;
  border:1px solid transparent;border-radius:var(--r-s);padding:0 8px;height:32px}
.sync:hover{border-color:var(--line);background:var(--surface-2)}
.sync .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.sync.busy .dot{animation:pulse 1s ease-in-out infinite}
.sync.local .dot{background:var(--warn)}
.sync.ro .dot{background:var(--crit)}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}

.avatar{
  width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-size:10.5px;font-weight:700;color:#fff;letter-spacing:.02em;flex:0 0 auto;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
.avatar.photo{box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.phbtn{position:relative;flex:0 0 auto;line-height:0;border-radius:50%}
.phbtn i{
  position:absolute;right:-2px;bottom:-2px;width:16px;height:16px;border-radius:50%;
  background:var(--surface);border:1px solid var(--line-2);color:var(--muted);
  display:grid;place-items:center;
}
.phbtn:hover i{color:var(--accent);border-color:var(--accent-line)}
.avatar.lg{width:30px;height:30px;font-size:12px}
.avatar.xs{width:20px;height:20px;font-size:9.5px}

/* ---------- board bar ---------- */
.boardbar{
  flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:8px 14px;
  background:var(--bg-2);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;
}
.boardbar::-webkit-scrollbar{display:none}
.btab{
  display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 11px;border-radius:999px;
  border:1px solid transparent;color:var(--ink-2);font-weight:500;font-size:13px;white-space:nowrap;
}
.btab:hover{background:var(--surface)}
.btab .swatch{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.btab[aria-current="true"]{background:var(--surface);border-color:var(--line-2);color:var(--ink);font-weight:600;box-shadow:var(--shadow-1)}
.filterbar{
  flex:0 0 auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:8px 14px;background:var(--accent-soft);border-bottom:1px solid var(--accent-line);
  font-size:12.5px;color:var(--ink-2);
}

/* ---------- board canvas ---------- */
.canvas{flex:1 1 auto;overflow-x:auto;overflow-y:hidden;padding:14px;display:flex;align-items:flex-start;gap:12px;scroll-behavior:auto}
.list{
  flex:0 0 auto;width:284px;max-height:100%;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:var(--shadow-1);
}
.list.drop-hint{outline:2px dashed var(--accent-line);outline-offset:2px}
.list-head{display:flex;align-items:center;gap:8px;padding:10px 10px 8px 12px;cursor:grab}
.list-owner{display:flex;flex:0 0 auto}
.list-head:active{cursor:grabbing}
.list-title{
  font-family:var(--font-b);font-weight:700;font-size:14px;letter-spacing:-.005em;color:var(--ink);
  flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  border:1px solid transparent;border-radius:5px;padding:2px 4px;margin:-2px -4px;background:transparent;
}
.list-title:focus{outline:none;border-color:var(--accent-line);background:var(--bg-2);white-space:normal}
.count{font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums;flex:0 0 auto;background:var(--bg-2);border-radius:999px;padding:1px 7px}
.cards{
  flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:0 8px 2px;
  display:flex;flex-direction:column;gap:7px;min-height:26px;
}
.list-foot{padding:8px}
.addcard{
  width:100%;justify-content:flex-start;height:30px;color:var(--muted);
  border-radius:var(--r-s);border:1px solid transparent;padding:0 8px;display:flex;align-items:center;gap:7px;font-size:13px;
}
.addcard:hover{background:var(--surface-2);color:var(--ink);border-color:var(--line)}
.composer textarea{
  width:100%;min-height:58px;resize:vertical;padding:8px 9px;border-radius:var(--r-s);
  border:1px solid var(--accent-line);background:var(--surface-2);box-shadow:0 0 0 3px var(--accent-soft);
  outline:none;font-size:13.5px;line-height:1.4;
}
.composer .row{display:flex;gap:6px;margin-top:7px;align-items:center}

.card{
  position:relative;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  padding:8px 10px;box-shadow:var(--shadow-1);cursor:pointer;
  display:flex;flex-direction:column;gap:6px;touch-action:pan-y;
  transition:border-color .12s, transform .06s;
}
.tick{
  position:absolute;top:7px;right:7px;width:19px;height:19px;border-radius:50%;
  border:1.6px solid var(--line-2);background:var(--surface);color:transparent;
  display:grid;place-items:center;z-index:2;opacity:0;
  transition:opacity .12s,border-color .12s,background .12s,color .12s;
}
.card:hover .tick,.card:focus-within .tick,.tick.on,.tick:focus-visible{opacity:1}
.tick:hover{border-color:var(--accent);color:var(--accent-line)}
.tick.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.card.is-done .card-title{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--line-2)}
.card.is-done{background:var(--surface-2)}
.card.is-done .chips,.card.is-done .card-cover{opacity:.55}
@media (hover:none){ .tick{opacity:1} }
.card-title{padding-right:20px}
.card:hover{border-color:var(--line-2)}
.card:active{transform:scale(.995)}
.card.is-ghost{opacity:.32;filter:grayscale(.4)}
.card.dim{opacity:.3}
.card-cover{margin:-8px -10px 2px;border-radius:var(--r-m) var(--r-m) 0 0;overflow:hidden;line-height:0}
.card-cover img{width:100%;height:110px;object-fit:cover;display:block}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chip{
  height:17px;min-width:34px;border-radius:4px;padding:0 7px;display:inline-flex;align-items:center;
  font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  box-shadow:inset 0 0 0 1px rgba(27,34,64,.14);
}
.chip.big{height:24px;min-width:92px;max-width:92px;justify-content:flex-start;font-size:11.5px;flex:0 0 auto}
.card-title{font-size:13.5px;line-height:1.35;color:var(--ink);word-break:break-word}
.card-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;color:var(--muted);font-size:11.5px}
.meta{display:inline-flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums}
.due{padding:2px 6px;border-radius:5px;background:var(--bg-2);color:var(--ink-2);font-weight:600}
.due.soon{background:var(--warn-soft);color:var(--warn)}
.due.over{background:var(--crit-soft);color:var(--crit)}
.due.done{background:var(--accent-soft);color:var(--accent)}
.card-members{display:flex;gap:3px;margin-left:auto}
.drag-ghost{
  position:absolute;z-index:400;pointer-events:none;box-shadow:var(--shadow-3);
  transform:rotate(2.2deg);opacity:.96;
}
/* Posteingang */
.list.inbox{background:var(--surface-2);border-style:dashed;border-color:var(--line-2)}
.list.inbox .list-head{cursor:default}
.list.inbox .list-title{display:flex;align-items:center;gap:6px;color:var(--ink-2)}
.inbox-err{
  margin:0 8px 8px;padding:7px 9px;border-radius:var(--r-s);font-size:12px;line-height:1.45;
  background:var(--warn-soft);color:var(--warn);
}
.mailcard{
  border-left:3px solid var(--line-2);cursor:grab;gap:5px;padding:10px 11px 9px;
  position:relative;overflow:hidden;
}
.mailcard.unread{border-left-color:var(--accent)}
.mailsubject{
  font-size:14.5px;line-height:1.42;color:var(--ink);font-weight:500;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
  word-break:break-word;
}
.mailcard.unread .mailsubject{font-weight:600}
.mailfrom{
  font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:flex;align-items:center;gap:3px;padding-right:76px;
}
.mailtools{
  position:absolute;bottom:4px;right:5px;display:flex;gap:2px;z-index:2;opacity:0;
  background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:1px;
  box-shadow:var(--shadow-1);transition:opacity .12s;
}
.mailcard:hover .mailtools,.mailcard:focus-within .mailtools{opacity:1}
@media (hover:none){ .mailtools{opacity:1} }
.mailtools button,.mailtools a{
  width:22px;height:22px;display:grid;place-items:center;border-radius:5px;color:var(--muted);
}
.mailtools button:hover,.mailtools a:hover{background:var(--accent-soft);color:var(--accent)}

.addlist{
  flex:0 0 auto;width:284px;border-radius:var(--r-l);border:1px dashed var(--line-2);
  background:transparent;color:var(--muted);padding:11px 12px;text-align:left;font-size:13px;
  display:flex;align-items:center;gap:8px;
}
.addlist:hover{background:var(--surface);color:var(--ink);border-style:solid}

/* ---------- panel ---------- */
.scrim{position:absolute;inset:0;background:rgba(12,20,17,.42);z-index:100;backdrop-filter:blur(2px);animation:fade .16s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.panel{
  position:absolute;top:0;right:0;bottom:0;width:min(480px,100%);z-index:101;
  background:var(--bg);border-left:1px solid var(--line);box-shadow:var(--shadow-3);
  display:flex;flex-direction:column;animation:slide .2s cubic-bezier(.2,.7,.3,1);
}
@keyframes slide{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
.panel-head{display:flex;align-items:flex-start;gap:10px;padding:14px 14px 10px;border-bottom:1px solid var(--line);background:var(--surface)}
.panel-body{flex:1 1 auto;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:16px}
.panel-title{
  flex:1 1 auto;font-family:var(--font-b);font-size:18px;font-weight:700;letter-spacing:-.01em;line-height:1.3;
  border:1px solid transparent;border-radius:6px;padding:3px 5px;margin:-3px -5px;background:transparent;color:var(--ink);
  text-wrap:balance;resize:none;overflow:hidden;
}
.panel-title:focus{outline:none;border-color:var(--accent-line);background:var(--surface-2)}
.sect{display:flex;flex-direction:column;gap:8px}
.sect > h3{
  margin:0;font-family:var(--font-d);font-size:12px;font-weight:400;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:7px;
}
.sect > h3 .line{flex:1 1 auto;height:1px;background:var(--line)}
.field{
  width:100%;padding:8px 10px;border-radius:var(--r-s);border:1px solid var(--line);
  background:var(--surface);color:var(--ink);outline:none;font-size:13.5px;
}
.field:focus{border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-soft)}
textarea.field{resize:vertical;min-height:80px;line-height:1.5}
.desc-view{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);padding:10px;
  font-size:13.5px;line-height:1.6;color:var(--ink-2);cursor:text;min-height:44px;word-break:break-word;
}
.desc-view.empty{color:var(--faint);font-style:italic}
.desc-view p{margin:0 0 8px}.desc-view p:last-child{margin:0}
.desc-view ul{margin:0 0 8px;padding-left:18px}
.desc-view code{background:var(--bg-2);padding:1px 4px;border-radius:4px;font-size:12.5px}
.desc-view a{color:var(--accent)}
.pickrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.lbl-pick{
  height:28px;border-radius:6px;padding:0 10px;display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:700;letter-spacing:.02em;opacity:.62;border:2px solid transparent;
  box-shadow:inset 0 0 0 1px rgba(27,34,64,.14);
}
.lbl-pick:hover{opacity:.85}
.lbl-pick[aria-pressed="true"]{opacity:1;border-color:var(--ink)}

/* Label-Verwaltung */
.lbl-rows{display:flex;flex-direction:column;gap:9px;max-height:52vh;overflow:auto;padding:2px}
.lbl-row{display:grid;grid-template-columns:92px minmax(0,1fr) 30px auto 32px;align-items:center;gap:8px}
.lbl-row .nm{min-width:0;width:100%}
@media (max-width:620px){
  .lbl-row{grid-template-columns:92px minmax(0,1fr) 30px 32px}
  .lbl-row .pres{grid-column:1 / -1}
}
.swatch{position:relative;width:30px;height:30px;flex:0 0 auto;cursor:pointer;display:block}
.swatch input[type="color"]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;border:0;padding:0}
.swatch span{
  display:block;width:100%;height:100%;border-radius:8px;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(27,34,64,.22), 0 0 0 2px var(--surface), 0 0 0 3px var(--line);
}
.pres{display:flex;gap:4px;flex-wrap:wrap;flex:0 0 auto}
.pre{
  width:19px;height:19px;border-radius:5px;border:0;padding:0;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(27,34,64,.18);
}
.pre[data-on]{outline:2px solid var(--ink);outline-offset:2px}
.mem-pick{opacity:.4;border:2px solid transparent;border-radius:50%;padding:0;line-height:0}
.mem-pick[aria-pressed="true"]{opacity:1;border-color:var(--accent)}
.check{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:10px}
.check-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.check-head .nm{font-weight:600;font-size:13.5px;flex:1 1 auto}
.bar{height:5px;border-radius:99px;background:var(--bg-2);overflow:hidden;margin-bottom:9px}
.bar i{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .2s}
.citem{display:flex;align-items:flex-start;gap:8px;padding:3px 0;font-size:13px}
.citem input[type=checkbox]{margin-top:2px;accent-color:var(--accent);width:15px;height:15px;flex:0 0 auto}
.citem span{flex:1 1 auto;word-break:break-word}
.citem.done span{text-decoration:line-through;color:var(--faint)}
.citem .x{opacity:0;color:var(--faint);font-size:15px;line-height:1;padding:0 3px}
.citem:hover .x{opacity:1}
.comment{display:flex;gap:9px}
.comment .bub{flex:1 1 auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:8px 10px;font-size:13px}
.comment .who2{display:flex;align-items:baseline;gap:7px;margin-bottom:3px}
.comment .who2 b{font-size:12.5px}
.comment .who2 time{font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.att{display:flex;gap:9px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:7px 9px}
.att img{width:56px;height:44px;object-fit:cover;border-radius:6px;flex:0 0 auto;cursor:zoom-in}
.att .nm{flex:1 1 auto;min-width:0;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att .ficon{width:34px;display:grid;place-items:center;color:var(--muted);flex:0 0 auto}
.att.pathrow:hover{border-color:var(--accent-line)}
.att.pathrow .ficon{color:var(--muted);border-radius:6px}
.att.pathrow .ficon:hover{color:var(--accent);background:var(--accent-soft)}
.att.pathrow a.btn{text-decoration:none}
.att.pathrow .nm{display:flex;flex-direction:column;gap:1px;white-space:normal}
.att.pathrow .nm b{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att.pathrow .nm em{font-style:normal;font-size:11px;color:var(--faint);word-break:break-all;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.att.pathrow .btn{flex:0 0 auto}
@media (max-width:520px){ .att.pathrow a.btn span{display:none} }
.att .sz{font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.panel-foot{flex:0 0 auto;display:flex;gap:8px;padding:10px 14px;border-top:1px solid var(--line);background:var(--surface);flex-wrap:wrap}

/* ---------- menus / modal ---------- */
.menu{
  position:absolute;z-index:200;min-width:210px;max-width:290px;background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r-m);box-shadow:var(--shadow-3);padding:5px;
}
.menu button{display:flex;align-items:center;gap:9px;width:100%;padding:7px 9px;border-radius:6px;font-size:13px;color:var(--ink-2);text-align:left}
.menu button:hover{background:var(--surface-2);color:var(--ink)}
.menu button.danger{color:var(--crit)}
.menu button.danger:hover{background:var(--crit-soft)}
.menu hr{border:0;border-top:1px solid var(--line);margin:5px 2px}
.menu .mh{padding:6px 9px 4px;font-family:var(--font-d);font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.modal-wrap{position:absolute;inset:0;z-index:300;display:grid;place-items:center;background:rgba(12,20,17,.5);padding:20px;backdrop-filter:blur(3px);animation:fade .16s}
.modal{
  background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r-l);box-shadow:var(--shadow-3);
  width:min(560px,100%);max-height:86vh;overflow:auto;padding:18px;
}
.modal h2{margin:0 0 4px;font-family:var(--font-b);font-size:19px;font-weight:700;letter-spacing:-.01em}
.modal p.sub{margin:0 0 14px;color:var(--muted);font-size:13px}
.modal .row{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.lightbox{position:absolute;inset:0;z-index:500;background:rgba(8,12,10,.9);display:grid;place-items:center;padding:24px;cursor:zoom-out}
.lightbox img{max-width:100%;max-height:100%;border-radius:8px;box-shadow:var(--shadow-3)}

/* ---------- calendar ---------- */
.calwrap{flex:1 1 auto;overflow:auto;padding:14px}
.calhead{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.calhead h2{margin:0;font-family:var(--font-b);font-size:18px;font-weight:700;letter-spacing:-.01em;min-width:180px}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
.cal .dow{background:var(--bg-2);padding:7px 8px;font-family:var(--font-d);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:center}
.cell{background:var(--surface);min-height:104px;padding:6px;display:flex;flex-direction:column;gap:4px}
.cell.off{background:var(--surface-2)}
.cell .dn{font-size:11.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;display:flex;align-items:center;justify-content:space-between}
.cell.today .dn b{background:var(--accent);color:var(--accent-ink);border-radius:99px;padding:1px 7px}
.calcard{
  font-size:11.5px;line-height:1.25;padding:4px 6px;border-radius:5px;background:var(--bg-2);
  border-left:3px solid var(--line-2);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.calcard:hover{background:var(--accent-soft)}
.calcard.done{opacity:.5;text-decoration:line-through}

/* ---------- misc ---------- */
.empty-state{margin:auto;text-align:center;color:var(--muted);max-width:340px;padding:40px 20px}
.empty-state h2{font-family:var(--font-b);font-size:17px;color:var(--ink);margin:0 0 6px;font-weight:700}
.toast{
  position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:600;
  background:var(--ink);color:var(--bg);padding:9px 15px;border-radius:999px;font-size:13px;font-weight:500;
  box-shadow:var(--shadow-3);animation:up .2s cubic-bezier(.2,.8,.3,1);max-width:90vw;text-align:center;
}
@keyframes up{from{transform:translate(-50%,12px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
.banner{
  flex:0 0 auto;display:flex;align-items:center;gap:9px;padding:7px 14px;font-size:12.5px;
  background:var(--warn-soft);color:var(--warn);border-bottom:1px solid var(--line);
}
.banner.crit{background:var(--crit-soft);color:var(--crit)}
.hint{font-size:11.5px;color:var(--faint)}
kbd{background:var(--bg-2);border:1px solid var(--line-2);border-bottom-width:2px;border-radius:4px;padding:0 4px;font-size:11px;font-family:var(--font-b);font-weight:600}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:640px){
  .topbar{flex-wrap:wrap;padding:8px 10px;gap:7px}
  .search input{width:132px}
  .search input:focus{width:170px}
  .canvas{padding:10px;gap:10px}
  .list,.addlist{width:min(80vw,284px)}
  .panel{width:100%}
  .cell{min-height:74px}
  .brand .nm{display:none}
}

/* ---------- Kartenfarbe, kompakte Ansicht ---------- */
.card[data-color]{
  background:color-mix(in srgb, var(--cc) 11%, var(--surface));
  border-left:3px solid var(--cc);
}
.card[data-color]:hover{border-color:var(--line-2);border-left-color:var(--cc)}
body.dense .card{padding:6px 9px;gap:4px}
body.dense .card-title{font-size:12.8px;line-height:1.3}
body.dense .cards{gap:5px}
body.dense .card-cover img{height:78px}
body.dense .list-head{padding:8px 8px 6px 11px}

/* ---------- Aussehen-Dialog ---------- */
.swatches{display:flex;flex-wrap:wrap;gap:7px}
.swatchbtn{
  display:flex;flex-direction:column;align-items:center;gap:4px;padding:5px 6px;border-radius:9px;
  border:1.5px solid transparent;min-width:52px;
}
.swatchbtn i{width:30px;height:30px;border-radius:8px;display:block;box-shadow:inset 0 0 0 1px rgba(27,34,64,.12)}
.swatchbtn span{font-size:10.5px;color:var(--muted)}
.swatchbtn:hover{background:var(--surface-2)}
.swatchbtn.on{border-color:var(--accent);background:var(--accent-soft)}
.swatchbtn.on span{color:var(--accent);font-weight:600}

/* ---------- Auslastung ---------- */
.loadgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px;align-items:start}
.panelcard{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  padding:14px 15px;box-shadow:var(--shadow-1);display:flex;flex-direction:column;gap:10px;
}
.panelcard.wide{grid-column:1/-1}
.panelcard > h3{
  margin:0;font-family:var(--font-d);font-size:12px;font-weight:400;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px;
}
.panelcard > h3 .line{flex:1 1 auto;height:1px;background:var(--line)}
.teamload{display:flex;align-items:center;gap:16px}
.teamload .big{
  font-family:var(--font-d);font-size:44px;line-height:.9;color:var(--accent);
  display:flex;align-items:baseline;gap:2px;font-variant-numeric:tabular-nums;
}
.teamload .big span{font-size:18px}
.teamload .big.warn{color:var(--warn)}
.teamload .big.crit{color:var(--crit)}
.loadbar{height:8px;border-radius:99px;background:var(--bg-2);overflow:hidden}
.loadbar i{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .25s}
.loadbar.high i{background:var(--warn)}
.loadbar.over i{background:var(--crit)}
.loadrow{display:flex;align-items:flex-start;gap:11px;padding:7px 0;border-top:1px solid var(--line)}
.loadrow:first-of-type{border-top:0}
.lname{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:13.5px;font-weight:500;margin-bottom:5px}
.lname b{font-variant-numeric:tabular-nums;color:var(--muted);font-size:12.5px}
.chk{border-top:1px solid var(--line);padding-top:8px}
.chk:first-of-type{border-top:0;padding-top:0}
.chkhead{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;margin-bottom:4px}
.chkhead b{margin-left:auto;font-size:11.5px;color:var(--muted);background:var(--bg-2);border-radius:99px;padding:1px 8px}
.dotb{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:var(--warn)}
.dotb.crit{background:var(--crit)}
.chkrow{
  display:flex;flex-direction:column;gap:1px;width:100%;text-align:left;padding:5px 7px;border-radius:7px;
}
.chkrow:hover{background:var(--surface-2)}
.chkrow span{font-size:12.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.chkrow em{font-size:11px;font-style:normal;color:var(--faint)}


/* Ordner-Auswahl */
.dirlist{display:flex;flex-direction:column;gap:5px;max-height:44vh;overflow:auto;margin:0 0 4px;padding:2px}
.dirlist .dirbtn{justify-content:flex-start;text-align:left;width:100%}
.dirlist .dirbtn svg{flex:0 0 auto}

/* Benachrichtigungen */
.glocke{position:relative}
.glocke .zahl{
  position:absolute;top:3px;right:2px;min-width:14px;height:14px;padding:0 3px;border-radius:99px;
  background:var(--accent);color:var(--accent-ink);font-size:9.5px;font-weight:700;font-style:normal;
  display:flex;align-items:center;justify-content:center;line-height:1;box-shadow:0 0 0 2px var(--surface);
}
.meldliste{max-height:46vh;overflow:auto}
.meldung{align-items:flex-start!important;gap:9px!important;padding:8px 10px!important;height:auto!important;text-align:left}
.meldung svg{margin-top:2px;flex:0 0 auto;color:var(--muted)}
.meldung span{display:flex;flex-direction:column;gap:1px;min-width:0}
.meldung b{font-size:12.5px;font-weight:600}
.meldung em{font-style:normal;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:250px}
.meldung time{font-size:11px;color:var(--faint)}
.meldung.neu{background:var(--accent-soft)}
.meldung.neu b::after{content:'';display:inline-block;width:6px;height:6px;border-radius:99px;background:var(--accent);margin-left:6px;vertical-align:middle}
.mention{background:var(--accent-soft);color:var(--accent);border-radius:4px;padding:0 3px;font-weight:600}

/* Posteingang eingeklappt */
.list.inbox.zu{width:46px;min-width:46px;padding:0;background:var(--surface-2)}
.list.inbox.zu .aufklapp{
  width:100%;height:100%;min-height:120px;border:0;background:none;cursor:pointer;color:var(--muted);
  display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 0;font:inherit;
}
.list.inbox.zu .aufklapp:hover{color:var(--ink)}
.list.inbox.zu .senk{
  writing-mode:vertical-rl;transform:rotate(180deg);display:flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:600;letter-spacing:.02em;white-space:nowrap;
}

/* Chat */
.chatfenster{
  position:fixed;right:0;top:0;bottom:0;width:min(390px,92vw);z-index:101;
  background:var(--surface);border-left:1px solid var(--line);box-shadow:var(--shadow-3);
  display:flex;flex-direction:column;
}
.chatkopf{display:flex;align-items:center;gap:8px;padding:12px 12px 10px 14px;border-bottom:1px solid var(--line)}
.chatkopf b{font-size:14.5px}
.chatliste{flex:1 1 auto;overflow:auto;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.chattag{align-self:center;font-size:11px;color:var(--faint);background:var(--bg-2);border-radius:99px;padding:2px 10px;margin:4px 0}
.chatzeile{display:flex;gap:7px;align-items:flex-end;max-width:88%}
.chatzeile.eigen{align-self:flex-end;flex-direction:row-reverse}
.chatzeile .blase{
  background:var(--bg-2);border-radius:12px;padding:7px 11px;min-width:0;
}
.chatzeile.eigen .blase{background:var(--accent);color:var(--accent-ink)}
.chatzeile.eigen .blase a{color:inherit;text-decoration:underline}
.chatzeile .txt{font-size:13.5px;line-height:1.45;word-break:break-word}
.chatzeile .txt p{margin:0 0 4px}.chatzeile .txt p:last-child{margin:0}
.chatzeile time{display:block;font-size:10.5px;opacity:.65;margin-top:3px}
.chatzeile.neu .blase{box-shadow:0 0 0 2px var(--accent-line)}
.chatfuss{display:flex;gap:8px;align-items:flex-end;padding:10px 12px;border-top:1px solid var(--line)}
.chatfuss textarea{flex:1 1 auto;min-height:40px;max-height:120px;resize:none;padding:9px 11px}

/* Reaktionen */
.reaks{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.reaks.klein{margin-top:4px}
.reak{
  height:21px;padding:0 7px;border-radius:99px;border:1px solid var(--line);background:var(--surface);
  font-size:12px;display:inline-flex;align-items:center;gap:4px;cursor:pointer;line-height:1;color:var(--ink);
}
.reak i{font-style:normal;font-size:10.5px;color:var(--muted);font-weight:600}
.reak.meins{border-color:var(--accent);background:var(--accent-soft)}
.reak.meins i{color:var(--accent)}
.reak.plus{color:var(--faint);font-weight:600;padding:0 8px}
.reaks.klein .reak{height:19px;font-size:11px;cursor:default;background:var(--bg-2);border-color:transparent}
.chatzeile.eigen .reak{background:var(--surface)}
.emojirow{display:flex;gap:2px;padding:4px}
.emojirow button{width:34px;height:34px;font-size:18px;border:0;background:none;border-radius:8px;cursor:pointer}
.emojirow button:hover{background:var(--bg-2)}

/* Notizzettel */
.zettel-layer{position:absolute;inset:0;pointer-events:none;z-index:5}
.zettel{
  position:absolute;width:172px;min-height:130px;pointer-events:auto;border-radius:3px;
  box-shadow:0 6px 14px rgba(27,34,64,.18);display:flex;flex-direction:column;
  transform:rotate(-1.2deg);transition:transform .12s ease;color:#3a3320;
}
.zettel:nth-child(even){transform:rotate(1.4deg)}
.zettel.zieht{transform:rotate(0) scale(1.04);box-shadow:0 14px 30px rgba(27,34,64,.28);z-index:9}
.zgriff{height:20px;display:flex;align-items:center;justify-content:space-between;padding:0 5px;cursor:grab;opacity:.45}
.zgriff:active{cursor:grabbing}
.zx{border:0;background:none;font-size:15px;line-height:1;cursor:pointer;color:inherit;padding:0 2px}
.zettel textarea{
  flex:1 1 auto;border:0;background:none;resize:none;padding:2px 10px 10px;font:13px/1.4 var(--font-b);
  color:inherit;outline:none;
}
.zettel textarea::placeholder{color:rgba(58,51,32,.45)}

/* Chat: Bild, „schreibt gerade" */
.chatbild{max-width:100%;border-radius:8px;display:block;margin:0 0 4px;cursor:zoom-in}
.tippt{display:flex;align-items:center;gap:7px;padding:4px 14px 8px;font-size:12px;color:var(--muted)}
.punkte{display:inline-flex;gap:3px}
.punkte b{width:5px;height:5px;border-radius:99px;background:var(--faint);animation:hop 1s infinite}
.punkte b:nth-child(2){animation-delay:.15s}
.punkte b:nth-child(3){animation-delay:.3s}
@keyframes hop{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* Effekte */
canvas.konfetti{position:fixed;inset:0;pointer-events:none;z-index:80}
.card.fliegt{box-shadow:var(--shadow-3)}

/* GIF beim Erledigen */
.gifpop{
  position:fixed;left:50%;top:46%;transform:translate(-50%,-50%) scale(.85);z-index:85;
  pointer-events:none;animation:gifin .28s cubic-bezier(.2,1.4,.5,1) forwards;
}
.gifpop img{max-width:min(320px,60vw);max-height:40vh;border-radius:14px;box-shadow:var(--shadow-3);display:block}
.gifpop.weg{animation:gifout .5s ease forwards}
@keyframes gifin{to{transform:translate(-50%,-50%) scale(1)}}
@keyframes gifout{to{opacity:0;transform:translate(-50%,-58%) scale(.94)}}

/* Spiel des Tages */
.spielbox{
  position:fixed;right:16px;bottom:16px;width:290px;z-index:55;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow-3);overflow:hidden;
}
.spielkopf{display:flex;align-items:center;gap:6px;padding:9px 8px 9px 12px;border-bottom:1px solid var(--line)}
.spielkopf b{font-size:13.5px}
.spielfeld{padding:12px}
.spielfuss{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12px;color:var(--muted)}
.spielfuss span:first-child{flex:1 1 auto}
.ttt{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.tttf{
  aspect-ratio:1;border:1px solid var(--line);background:var(--surface-2);border-radius:9px;
  font-size:26px;line-height:1;cursor:pointer;color:var(--ink);font-family:var(--font-b);
}
.tttf:hover:not(.voll){background:var(--accent-soft)}
.tttf.voll{cursor:default}
.farbfeld{height:82px;border-radius:10px;border:1px solid var(--line)}
.farbopts{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}
.farbopts .btn{font-variant-numeric:tabular-nums;justify-content:center}
.wortfeld{display:flex;flex-direction:column;gap:4px;min-height:40px}
.wortzeile{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.wortzeile i{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:700;
  border-radius:6px;background:var(--bg-2);color:var(--ink);font-size:15px;
}
.wortzeile i.gut{background:#3F8A63;color:#fff}
.wortzeile i.fast{background:#B18F45;color:#fff}
#worteingabe{margin-top:8px}

/* Tic Tac Toe: zwei Spieler */
.ttköpfe{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.ttspieler{display:flex;align-items:center;gap:6px;flex:1 1 0;min-width:0;padding:4px 6px;border-radius:8px;font-size:12px}
.ttspieler span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto}
.ttspieler b{font-variant-numeric:tabular-nums;color:var(--muted)}
.ttspieler.dran{background:var(--accent-soft)}
.ttspieler.dran b{color:var(--accent)}
.ttköpfe i{font-style:normal;color:var(--faint);font-size:12px;flex:0 0 auto}

/* Die zwei unten */
.figuren{position:fixed;left:0;right:0;bottom:0;height:190px;pointer-events:none;z-index:40;overflow:visible}
.figur{
  position:absolute;bottom:2px;width:70px;pointer-events:auto;cursor:pointer;
  transition:left .06s linear;
}
.figur img{
  width:100%;height:auto;display:block;user-select:none;
  filter:drop-shadow(0 3px 5px rgba(27,34,64,.22));
  transform-origin:50% 100%;
}
.figur .huelle{display:block}
.figur.geht img{animation:watschel .46s ease-in-out infinite}
@keyframes watschel{
  0%,100%{translate:0 0;rotate:-3.5deg}
  50%{translate:0 -3px;rotate:3.5deg}
}
.figur.hupf img{animation:hupf .65s cubic-bezier(.3,1.5,.5,1)}
@keyframes hupf{0%{translate:0 0}35%{translate:0 -26px;scale:1.04}60%{translate:0 0}75%{translate:0 -8px}100%{translate:0 0}}
.figur .sagt{
  position:absolute;bottom:100%;left:50%;transform:translateX(-50%) scale(.85);opacity:0;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:5px 10px;
  font-size:11.5px;font-weight:600;white-space:nowrap;box-shadow:var(--shadow-2);margin-bottom:4px;
  transition:opacity .18s ease, transform .18s cubic-bezier(.3,1.4,.5,1);color:var(--ink);
}
.figur .sagt.da{opacity:1;transform:translateX(-50%) scale(1)}
.figur[style*="scaleX(-1)"] .sagt{transform:translateX(-50%) scaleX(-1) scale(.85)}
.figur[style*="scaleX(-1)"] .sagt.da{transform:translateX(-50%) scaleX(-1) scale(1)}

/* Hintergrundbild des Boards */
body.mitbild::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:var(--bgbild);background-size:cover;background-position:center;
}
body.mitbild::after{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:var(--bg);opacity:var(--bgdeck,.55);
}
body.mitbild #root{position:relative;z-index:1}
.bgvor{height:74px;border-radius:10px;background-size:cover;background-position:center;border:1px solid var(--line);margin:0 0 8px}

/* Machbarkeit */
.mbtabelle{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
.mbtabelle > div{display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:13px;border-bottom:1px solid var(--line)}
.mbtabelle > div:last-child{border-bottom:0}
.mbtabelle span{flex:1 1 auto;color:var(--ink-2)}
.mbtabelle b{font-variant-numeric:tabular-nums;flex:0 0 auto}
.mbtabelle .summe{background:var(--surface-2);font-weight:600}
.mbtabelle .summe span{color:var(--ink)}

/* Duell */
.dukoepfe{display:flex;align-items:flex-end;gap:8px;margin:0 0 8px}
.duseite{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;border-radius:10px;min-width:0}
.duseite.bereit{background:var(--accent-soft)}
.duseite span{font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.duseite b{font-size:15px;font-variant-numeric:tabular-nums}
.dufigur{height:60px;width:auto;display:block}
.duvs{font-style:normal;color:var(--faint);padding-bottom:22px}
.dulast{display:flex;align-items:center;justify-content:center;gap:10px;font-size:24px;margin:0 0 8px}
.dulast i{font-style:normal;font-size:13px;color:var(--muted)}
.duwahl{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.duwahl .btn{height:48px;justify-content:center}