/* collabDoo Pflege — Schrift + Farben wie Landing/Website (Nunito 800/900, Nunito Sans 400; Ink/Accent/Surface) */
@font-face{font-family:'Nunito Sans';font-weight:400;font-display:swap;src:url(/fonts/NunitoSans-400-latin.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-weight:800;font-display:swap;src:url(/fonts/Nunito-800-latin.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-weight:900;font-display:swap;src:url(/fonts/Nunito-900-latin.woff2) format('woff2')}
:root{--c-accent:#00D3CA;--c-accent-dark:#00a8a1;--c-ink:#0A2D5A;--c-surface:#F6F4EE;--c-bg:#ffffff;--c-text:#17213a;--c-muted:#5b6577;--c-line:#e1ded6;
  --c-err:#b42318;--c-err-bg:#fdecea;--c-ok:#0f7a4f;--c-ok-bg:#e6f6ef;--c-warn-bg:#fff4e0;
  --shadow-card:0 1px 0 rgba(10,45,90,.04),0 18px 40px -28px rgba(10,45,90,.35);--r:14px}
*{box-sizing:border-box}
html,body{margin:0;min-height:100vh;background:var(--c-surface);color:var(--c-text);font-family:'Nunito Sans',system-ui,-apple-system,'Segoe UI',sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,.brand{font-family:'Nunito',sans-serif;font-weight:800;color:var(--c-ink);margin:0}
h1{font-size:1.6rem;font-weight:900}h2{font-size:1.25rem}h3{font-size:1rem}
a{color:var(--c-ink)}
button{font:inherit;cursor:pointer}
.hidden{display:none!important}
.muted{color:var(--c-muted)}
small{color:var(--c-muted);font-size:.82rem;display:block;margin-top:.25rem}

/* Knöpfe */
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1rem;border-radius:999px;border:1px solid var(--c-line);background:#fff;color:var(--c-ink);font-family:'Nunito',sans-serif;font-weight:800;font-size:.92rem;line-height:1;text-decoration:none}
.btn:hover{border-color:var(--c-ink)}
.btn.primary{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-ink)}
.btn.primary:hover{background:var(--c-accent-dark);border-color:var(--c-accent-dark)}
.btn.ghost{background:transparent;border-color:transparent}
.btn.danger{color:var(--c-err);border-color:#f0c9c4}
.btn.sm{padding:.35rem .7rem;font-size:.82rem}
.btn[disabled]{opacity:.55;cursor:default}
.link{background:none;border:0;padding:0;color:var(--c-ink);text-decoration:underline;text-underline-offset:3px;font:inherit}

/* Formulare */
label{display:block;font-size:.88rem;color:var(--c-muted);margin:0 0 .3rem}
input,select,textarea{width:100%;font:inherit;font-size:.98rem;padding:.6rem .75rem;border:1px solid var(--c-line);border-radius:10px;background:#fff;color:var(--c-text)}
input[type=color]{padding:.15rem;height:2.6rem;width:5rem}
input[type=checkbox]{width:auto;margin:0 .4rem 0 0;accent-color:var(--c-accent)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--c-accent);outline-offset:1px;border-color:var(--c-accent)}
textarea{resize:vertical;min-height:4.5rem}
.f{margin:0 0 .95rem}
.chk{display:flex;align-items:center;gap:.2rem;color:var(--c-text);font-size:.95rem;cursor:pointer}
.checks{display:flex;flex-wrap:wrap;gap:.35rem .9rem;padding:.35rem 0}
.checks label{display:inline-flex;align-items:center;color:var(--c-text);font-size:.93rem;margin:0;cursor:pointer}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.f.half{grid-column:span 1}
.fs{margin:1.2rem 0 .6rem;padding-top:.8rem;border-top:1px solid var(--c-line);font-family:'Nunito',sans-serif;font-weight:800;color:var(--c-ink);font-size:.92rem;letter-spacing:.04em;text-transform:uppercase}
.err{display:none;margin:.6rem 0;padding:.7rem .9rem;border-radius:10px;background:var(--c-err-bg);color:var(--c-err);font-size:.92rem;white-space:pre-line}
.err.show{display:block}
.ok{margin:.6rem 0;padding:.7rem .9rem;border-radius:10px;background:var(--c-ok-bg);color:var(--c-ok);font-size:.92rem}
.note{margin:.6rem 0;padding:.7rem .9rem;border-radius:10px;background:var(--c-warn-bg);font-size:.92rem}

/* Auth-Karte */
.auth{min-height:100vh;display:grid;place-items:center;padding:1.5rem 1rem}
.card{width:min(100%,26rem);background:#fff;border-radius:20px;box-shadow:var(--shadow-card);padding:2rem 1.6rem}
.card .icon{width:64px;height:64px;border-radius:16px;display:block;margin:0 auto 1rem}
.card h1{text-align:center;font-size:1.5rem}
.card .lead{text-align:center;color:var(--c-muted);margin:.4rem 0 1.4rem}
.card .btn.primary{width:100%;justify-content:center;padding:.85rem;margin-top:.6rem}
.card .row{display:flex;justify-content:space-between;gap:1rem;margin-top:1rem;font-size:.9rem}
.card footer{margin-top:1.6rem;text-align:center;font-size:.8rem;color:var(--c-muted)}
.card footer a{color:var(--c-muted)}

/* Layout */
.shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.side{background:#fff;border-right:1px solid var(--c-line);padding:1.2rem 1rem;display:flex;flex-direction:column;gap:1rem;position:sticky;top:0;height:100vh;overflow:auto}
.side .brand{display:flex;align-items:center;gap:.6rem;font-size:1.05rem}
.side .brand img{width:36px;height:36px;border-radius:10px}
.side .brand span{color:var(--c-muted);font-weight:800;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;display:block}
.side nav{display:flex;flex-direction:column;gap:.15rem}
.side nav button{text-align:left;border:0;background:transparent;padding:.55rem .75rem;border-radius:10px;color:var(--c-text);font-size:.95rem}
.side nav button:hover{background:var(--c-surface)}
.side nav button.on{background:var(--c-ink);color:#fff;font-weight:700}
.side .foot{margin-top:auto;font-size:.82rem;color:var(--c-muted);display:flex;flex-direction:column;gap:.4rem}
.side .foot .who{color:var(--c-text)}
.main{padding:1.6rem clamp(1rem,3vw,2.5rem) 3rem;max-width:1100px;width:100%}
.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem}
.top .actions{display:flex;gap:.5rem;flex-wrap:wrap}
.panel{background:#fff;border-radius:var(--r);box-shadow:var(--shadow-card);padding:1.2rem 1.3rem;margin-bottom:1.2rem}
.panel h2{margin-bottom:.6rem}
.panel form .btn.primary{margin-top:.4rem}

/* Listen */
table{width:100%;border-collapse:collapse;font-size:.93rem}
th{text-align:left;font-weight:700;color:var(--c-muted);font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;padding:.5rem .6rem;border-bottom:1px solid var(--c-line)}
td{padding:.6rem .6rem;border-bottom:1px solid var(--c-line);vertical-align:top}
tr:last-child td{border-bottom:0}
td.act{text-align:right;white-space:nowrap}
.tag{display:inline-block;padding:.1rem .5rem;border-radius:999px;background:var(--c-surface);color:var(--c-muted);font-size:.78rem;margin-right:.25rem}
.tag.on{background:#dff8f6;color:#046b66}
.tag.off{background:#f3e3e0;color:var(--c-err)}
.dot{display:inline-block;width:.75rem;height:.75rem;border-radius:50%;vertical-align:-1px;margin-right:.35rem;border:1px solid rgba(0,0,0,.08)}
.emo{font-size:1.15rem;margin-right:.35rem}
.empty{color:var(--c-muted);padding:1rem 0}
.indent{display:inline-block;width:1.2rem}
.cat{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.35rem .9rem;margin:.4rem 0 1rem}
.cat label{display:flex;align-items:flex-start;gap:.2rem;color:var(--c-text);font-size:.93rem;margin:0;padding:.3rem 0}
.cat label.ex{opacity:.55}
.search{display:flex;gap:.5rem;margin-bottom:.8rem}
.search input{max-width:22rem}
code{font-size:.85rem;background:var(--c-surface);padding:.1rem .35rem;border-radius:6px}

/* Dialog */
dialog{border:0;border-radius:20px;padding:0;width:min(96vw,720px);max-height:92vh;box-shadow:0 30px 80px -30px rgba(10,45,90,.5)}
dialog::backdrop{background:rgba(10,45,90,.35);backdrop-filter:blur(2px)}
.editor header{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.4rem .6rem}
.editor .body{padding:.4rem 1.4rem;max-height:calc(92vh - 9rem);overflow:auto}
.editor footer{display:flex;gap:.5rem;align-items:center;padding:.8rem 1.4rem 1.1rem;border-top:1px solid var(--c-line)}
.editor footer .sp{flex:1}
.editor .x{border:0;background:transparent;font-size:1.2rem;color:var(--c-muted);padding:.2rem .5rem;border-radius:8px}
.editor .x:hover{background:var(--c-surface)}
.editor .err{margin:0 1.4rem .6rem}

.toast{position:fixed;left:50%;bottom:1.4rem;transform:translateX(-50%) translateY(20px);background:var(--c-ink);color:#fff;padding:.6rem 1rem;border-radius:999px;font-size:.9rem;opacity:0;transition:.2s;pointer-events:none;z-index:9}
.toast.show{opacity:1;transform:translateX(-50%)}

@media (max-width:820px){
  .shell{grid-template-columns:1fr}
  .side{position:static;height:auto;border-right:0;border-bottom:1px solid var(--c-line)}
  .side nav{flex-direction:row;flex-wrap:wrap}
  .side .foot{margin-top:.4rem;flex-direction:row;flex-wrap:wrap;gap:.8rem;align-items:center}
  .side .hint.warn{flex-basis:100%;margin-top:0}
  .grid2{grid-template-columns:1fr}
  td.act{text-align:left}
  .main{padding:1rem 1rem 2.5rem}
}
.imgf{display:flex;gap:.8rem;align-items:flex-start}
.imgf img{width:96px;height:96px;object-fit:cover;border-radius:12px;border:1px solid var(--c-line);background:var(--c-surface)}
.imgf input[type=file]{padding:.4rem 0;border:0;background:transparent}
.imgf .chk{margin-top:.4rem}

.btn.apple{width:100%;justify-content:center;padding:.85rem;margin-top:0;background:#000;border-color:#000;color:#fff}
.btn.apple svg{width:18px;height:18px}
.or{text-align:center;color:var(--c-muted);font-size:.85rem;margin:.9rem 0 .6rem}
.card .hint{font-size:.85rem;margin-top:1rem}
.side .foot .row{display:flex;gap:.35rem;align-items:center;color:var(--c-muted)}
.side .hint{font-size:.8rem;line-height:1.4;color:var(--c-muted)}
.side .hint.warn{display:flex;gap:.45rem;align-items:flex-start;margin-top:.5rem;padding:.55rem .65rem;border-radius:10px;background:var(--c-err-bg);color:var(--c-err)}
.side .hint.warn svg{width:18px;height:18px;flex:none;margin-top:.05rem}

/* Symbolauswahl */
.iconf{display:flex;align-items:center;gap:.7rem}.iconf .cur .emo{font-size:1.3rem}.iconf .iconname{font-size:.8rem}
.picker .pickbar{display:flex;gap:.8rem;align-items:center;padding:.2rem 1.4rem .6rem;flex-wrap:wrap}
.picker .tabs button{border:1px solid var(--c-line);background:#fff;padding:.4rem .8rem;border-radius:999px;font-family:'Nunito',sans-serif;font-weight:800;font-size:.85rem;color:var(--c-ink)}
.picker .tabs button.on{background:var(--c-ink);border-color:var(--c-ink);color:#fff}
.picker .pickbar input{max-width:16rem}
.picker .body h3{margin:.8rem 0 .3rem;font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;color:var(--c-muted)}
.symgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:.35rem}
.symgrid.emo{grid-template-columns:repeat(auto-fill,minmax(52px,1fr))}
.sym{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.5rem .3rem;border:1px solid var(--c-line);border-radius:12px;background:#fff;color:var(--c-text)}
.sym span{font-size:1.5rem;line-height:1.2}.sym small{font-size:.68rem;color:var(--c-muted);margin:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sym:hover{border-color:var(--c-ink)}.sym.on{background:#dff8f6;border-color:var(--c-accent)}
.f .row{display:flex;gap:.5rem;align-items:center}.f .row input{max-width:8rem}
/* Drop-Zone */
.drop{display:flex;align-items:center;gap:.9rem;padding:.8rem;border:2px dashed var(--c-line);border-radius:14px;background:var(--c-surface);cursor:pointer;color:var(--c-text);font-size:.92rem;margin:0}
.drop:hover,.drop.over{border-color:var(--c-accent);background:#eefcfb}
.drop img{width:96px;height:96px;object-fit:cover;border-radius:12px;border:1px solid var(--c-line);background:#fff}
.drop .droptext{display:flex;flex-direction:column;gap:.15rem}.drop .droptext small{margin:0}
.imgf{flex-direction:column;align-items:stretch;gap:.4rem}
/* Markdown-Editor */
.mdf{border:1px solid var(--c-line);border-radius:10px;overflow:hidden;background:#fff}
.mdf textarea{border:0;border-radius:0;min-height:12rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9rem}
.mdf textarea:focus{outline:none}
.mdbar{display:flex;gap:.2rem;align-items:center;padding:.35rem .4rem;border-bottom:1px solid var(--c-line);background:var(--c-surface)}
.mdbar button{border:0;background:transparent;padding:.3rem .55rem;border-radius:8px;font-size:.85rem;color:var(--c-ink);font-weight:700;min-width:2rem}
.mdbar button:hover{background:#fff}.mdbar .sp{flex:1}
.mdprev{padding:.8rem 1rem;min-height:12rem;font-size:.95rem;line-height:1.55}
.mdprev h2,.mdprev h3,.mdprev h4{margin:.8rem 0 .3rem}.mdprev p{margin:.4rem 0}.mdprev ul,.mdprev ol{margin:.3rem 0;padding-left:1.4rem}
.mdprev li.task{list-style:none;margin-left:-1.2rem}.mdprev blockquote{margin:.5rem 0;padding:.3rem .8rem;border-left:3px solid var(--c-accent);color:var(--c-muted)}
.mdprev pre{background:var(--c-surface);padding:.6rem .8rem;border-radius:8px;overflow:auto;font-size:.85rem}
ul.plain{list-style:none;margin:.2rem 0 0;padding:0;font-size:.92rem}ul.plain li{padding:.2rem 0;border-bottom:1px solid var(--c-line)}ul.plain li:last-child{border-bottom:0}
.panel h3{margin:0}