/* shared by Select, Transfer and Review: switch between the tools, project page, address suggestions */
:root{--hub-s:#C9A6F7;--hub-t:#3DDC97;--hub-r:#F2668B}
.tswitch{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;background:rgba(12,7,19,.35);flex-wrap:wrap}
.tsw{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-decoration:none;padding:6px 11px;border-radius:999px;line-height:1;white-space:nowrap}
.tsw:hover{color:var(--text);background:rgba(243,238,249,.08)}
.tsw.on{color:var(--ink,#120A1C);background:var(--lav)}
.tsw.hub{border-left:1px solid var(--line);border-radius:0 999px 999px 0;margin-left:4px;padding-left:12px}
.tsw.hub.on{border-left-color:transparent;border-radius:999px}

.hub{max-width:1180px}
.hub .stack24>*+*{margin-top:24px}
.hub.stack24>*+*{margin-top:24px}
.hstors{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.hstor{border:1px solid var(--line);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;background:rgba(27,17,40,.55);min-width:0}
.hstor b{font-size:17px;white-space:nowrap}
.hstor.total{background:transparent;border-style:dashed}
.hbar{height:6px;border-radius:9px;background:rgba(243,238,249,.1);overflow:hidden}
.hbar span{display:block;height:100%;border-radius:9px;background:var(--hub-s)}
.hstor.tT .hbar span{background:var(--hub-t)}
.hstor.tR .hbar span{background:var(--hub-r)}
.hub .search{min-width:0;flex:1 1 280px;max-width:420px;min-height:44px;border-radius:999px;border:1px solid var(--line);background:rgba(12,7,19,.5);color:var(--text);padding:0 18px;font-size:15px}
.hub .search::placeholder{color:var(--muted)}
.hempty{display:flex;flex-direction:column;gap:6px}
.hub>.row>.small{flex:1 1 320px;min-width:0}
.hcard{border:1px solid var(--line);border-radius:18px;background:rgba(27,17,40,.55);padding:18px 20px}
.hproj{display:flex;flex-direction:column;gap:12px}
.hbtn{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid rgba(243,238,249,.25);background:transparent;color:var(--text);font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.hbtn:hover{border-color:var(--lav)}
.hbtn.on{background:var(--lav);border-color:var(--lav);color:var(--ink,#120A1C)}
.hib{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border-radius:10px;border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:20px;line-height:1}
.hib:hover{color:var(--text);background:rgba(243,238,249,.08)}
.hib .ic{width:20px;height:20px}
.hph{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.hph .h-sec{font-size:24px;overflow-wrap:anywhere}
.hph .stack2{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 240px}
.hrows{display:flex;flex-direction:column}
.hrow{display:grid;grid-template-columns:86px minmax(0,1fr) auto 10px 40px;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.hrows>.hrow:first-child{border-top:0}
.hrow[hidden]{display:none}
.hk{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:5px 8px;border-radius:7px;text-align:center;color:var(--ink,#120A1C);background:var(--hub-s)}
.hk.tT{background:var(--hub-t)}
.hk.tR{background:var(--hub-r)}
.hmain{display:flex;flex-direction:column;gap:2px;min-width:0}
.htitle{color:var(--text);font-weight:600;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.htitle:hover{color:var(--lav);text-decoration:underline}
.hmain .small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hfacts{display:flex;gap:14px;white-space:nowrap}
.hleg{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--muted)}
.hleg span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.hleg .hst{display:inline-block;flex:none}
.hst{width:10px;height:10px;border-radius:50%;background:rgba(243,238,249,.3)}
.hst.done,.hst.ok,.hst.in{background:var(--mint)}
.hst.changes{background:#FFB84D}
.hst.open,.hst.review,.hst.out{background:var(--lav)}
.hst.exp{background:transparent;border:1px solid rgba(243,238,249,.4)}

.hset{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:4px 0 6px}
.hph .hset{flex-basis:100%}
.hset input{flex:1 1 220px;min-width:0;min-height:40px;border-radius:10px;border:1px solid var(--line);background:rgba(12,7,19,.5);color:var(--text);padding:0 12px}

.hlooseall summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px}
.hlooseall summary::-webkit-details-marker{display:none}
.hlooseall summary::before{content:'›';display:inline-block;transition:transform .15s;font-size:20px;line-height:1}
.hlooseall[open] summary::before{transform:rotate(90deg)}
.hlooseall[open] summary{margin-bottom:12px}
.hloose{display:flex;flex-direction:column;gap:6px}
.hloose[hidden]{display:none}
@media (max-width:760px){
  .hrow{grid-template-columns:minmax(0,1fr) 10px 40px;row-gap:4px}
  .hk{grid-column:1/-1;justify-self:start}
  .hfacts{grid-column:1/2;grid-row:3}
  .hcard{padding:14px}
  .hub .search{max-width:none}
}

/* address suggestions */
.abwrap{position:relative}
.abbox{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:60;max-height:320px;overflow:auto;border:1px solid var(--line);border-radius:12px;background:var(--ink2,#1B1128);box-shadow:0 18px 40px rgba(0,0,0,.45);padding:4px}
.abopt{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'n t' 'm t';gap:0 10px;width:100%;text-align:left;border:0;background:transparent;color:var(--text);padding:8px 10px;border-radius:9px;cursor:pointer}
.abopt.on,.abopt:hover{background:rgba(201,166,247,.16)}
.abname{grid-area:n;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.abmail{grid-area:m;font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.abtools{grid-area:t;display:flex;gap:3px;align-items:center}
.abt{font-family:var(--mono);font-size:10px;font-weight:700;width:18px;height:18px;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink,#120A1C);background:var(--hub-s)}
.abt.tT{background:var(--hub-t)}
.abt.tR{background:var(--hub-r)}

/* light look (white-label) */
.light .tswitch{background:var(--l-card);border-color:var(--l-line)}
.light .tsw{color:var(--l-muted)}
.light .tsw:hover{color:var(--l-text);background:var(--l-deep)}
.light .tsw.on{background:var(--l-accent);color:#FFFFFF}
.light .hstor,.light .hcard{background:var(--l-card);border-color:var(--l-line)}
.light .hbtn{color:var(--l-text);border-color:var(--l-line2)}
.light .hbtn.on{background:var(--l-accent);border-color:var(--l-accent);color:#FFFFFF}
.light .hib{color:var(--l-muted)}
.light .hbar{background:var(--l-deep)}
.light .htitle{color:var(--l-text)}
.light .hset input,.light .hub .search{background:var(--l-card);color:var(--l-text);border-color:var(--l-line2)}
.light .abbox{background:var(--l-card);border-color:var(--l-line);box-shadow:0 18px 40px rgba(0,0,0,.12)}
.light .abopt{color:var(--l-text)}
.light .abopt.on,.light .abopt:hover{background:var(--l-deep)}
.light .abmail{color:var(--l-muted)}

/* ---------- overview of galleries and reviews: tiles or list, same card in both tools ---------- */
.pkbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.pkbar .chips{display:flex;flex-wrap:wrap;gap:10px}
.pkright{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.pkview{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px}
.pkview button{display:inline-flex;align-items:center;justify-content:center;width:36px;height:32px;border:0;border-radius:999px;background:transparent;color:var(--muted);cursor:pointer}
.pkview button.on{background:var(--text);color:var(--ink,#120A1C)}
.pkview svg{width:16px;height:16px}
.pkcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pk{display:flex;flex-direction:column;min-width:0;background:var(--ink2);border-radius:18px;overflow:hidden;box-shadow:0 0 0 1px rgba(201,166,247,.25);transition:box-shadow .15s}
.pk[hidden]{display:none}
.pk:hover{box-shadow:0 0 0 2px rgba(201,166,247,.7)}
.pk.st-ok{box-shadow:0 0 0 1px rgba(61,220,151,.55)}.pk.st-ok:hover{box-shadow:0 0 0 2px #3DDC97}
.pk-pic{position:relative;display:block;aspect-ratio:16/9;background:rgba(201,166,247,.06);overflow:hidden}
.pk-pic img,.pk-pic .rthumb{display:block;width:100%;height:100%;object-fit:cover}
.pk-pic .mosaic{border-radius:0}
.pk-tags{position:absolute;left:12px;top:12px;right:12px;display:flex;flex-wrap:wrap;gap:6px}
.pk-st{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:rgba(12,7,19,.78);border:1px solid rgba(201,166,247,.6);color:var(--lav);white-space:nowrap}
.pk-st.ok{border-color:#3DDC97;color:#3DDC97}.pk-st.ch{border-color:#FFB84D;color:#FFB84D}.pk-st.off{border-color:rgba(243,238,249,.3);color:var(--muted)}.pk-st.bad{border-color:#F2668B;color:#F2668B}
.pk-dur{position:absolute;right:10px;bottom:10px;font-family:var(--mono);font-size:12px;font-weight:600;background:rgba(0,0,0,.65);padding:3px 7px;border-radius:6px;color:#fff}
.pk-body{display:flex;flex-direction:column;gap:6px;padding:16px 18px 16px;min-width:0;flex:1}
.pk-kick{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tacc,var(--lav));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:14px}
.pk-title{font-size:21px;font-weight:700;color:var(--text);text-decoration:none;overflow-wrap:anywhere;line-height:1.2}
.pk-title:hover{color:var(--tacc,var(--lav))}
.pk-meta{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.pk-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:12px;border-top:1px solid rgba(243,238,249,.08)}
.pk-acts .sbtn{min-height:34px;padding:0 13px;font-size:13px}
/* list view: one row per item */
.pkcards.list{grid-template-columns:minmax(0,1fr);gap:12px}
.pkcards.list .pk{display:grid;grid-template-columns:200px minmax(0,1fr);align-items:stretch}
.pkcards.list .pk-pic{aspect-ratio:auto;min-height:112px}
.pkcards.list .pk-tags{left:8px;top:8px}
.pkcards.list .pk-st{font-size:10px;padding:4px 8px}
.pkcards.list .pk-body{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;grid-template-areas:"tags tags acts" "kick meta acts" "title meta acts";align-items:center;column-gap:20px;row-gap:4px;padding:14px 18px}
.pkcards.list .pk-kick{grid-area:kick;align-self:end}.pkcards.list .pk-title{grid-area:title;align-self:start;font-size:18px}
.pkcards.list .pk-meta{grid-area:meta;flex-direction:column;justify-content:center;gap:4px}
.pkcards.list .pk-acts{grid-area:acts;margin:0;padding:0;border:0;flex-wrap:nowrap}
@media (max-width:1100px){.pkcards{grid-template-columns:repeat(2,minmax(0,1fr))}.pkcards.list .pk-body{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tags tags" "kick acts" "title acts" "meta acts"}}
@media (max-width:700px){.pkcards{grid-template-columns:minmax(0,1fr)}.pkcards.list .pk{grid-template-columns:110px minmax(0,1fr)}.pkcards.list .pk-body{grid-template-columns:minmax(0,1fr);grid-template-areas:"tags" "kick" "title" "meta" "acts"}.pkcards.list .pk-acts{flex-wrap:wrap}.pkcards.list .pk-tags .pk-st+.pk-st{display:none}}
.gearbtn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;color:var(--muted);text-decoration:none;border:1px solid transparent}
.gearbtn:hover{color:var(--text);border-color:rgba(243,238,249,.3)}.gearbtn.on{color:var(--ink,#120A1C);background:var(--text)}
.gearbtn,.gearbtn:hover{width:32px;height:44px;border:0;background:none}.gearbtn:hover{color:var(--text)}.gearbtn.on{background:none;color:var(--text)}
.hqwrap{align-items:center}.hqby .fchip{min-height:40px}
.hqwrap{flex-wrap:nowrap}.hqwrap .search{width:300px;flex:none}@media (max-width:760px){.hqwrap{flex-wrap:wrap}.hqwrap .search{width:100%}}

/* ---------- Fehler melden (lib/report.php, assets/report.js) ---------- */
.navpill.ghrep-btn,.navpill.ghupd-btn{border-color:transparent!important;background:none!important;box-shadow:none!important;display:inline-flex;align-items:center;gap:6px}
.navpill.ghrep-btn,.atop .navpill.ghost.ghrep-btn{color:#F2668B}
.navpill.ghrep-btn:hover,.atop .navpill.ghost.ghrep-btn:hover{color:#FF9CB6}
.navpill.ghrep-btn[disabled]{opacity:.45;cursor:not-allowed;background:none;color:inherit}
.gftr__credit a{color:inherit;text-decoration:none}
.gftr__credit a:hover{text-decoration:underline}
.gftr__warn{color:#F2668B;opacity:1}
.ghrep{--r-bg:var(--ink2,#1B1128);--r-tx:var(--text,#F3EEF9);--r-mu:var(--muted,#B9AECB);--r-ln:var(--line,rgba(243,238,249,.14));--r-fld:var(--ink,#120A1C);--r-acc:var(--purple,#8A47F0);--r-acc2:var(--lav,#C9A6F7);
  position:fixed;inset:0;z-index:9000;background:rgba(8,5,12,.62);display:flex;align-items:center;justify-content:center;padding:24px max(16px,env(safe-area-inset-left,0px));overflow:auto}
body.light .ghrep{--r-bg:var(--l-card);--r-tx:var(--l-text);--r-mu:var(--l-muted);--r-ln:var(--l-line);--r-fld:var(--l-bg);--r-acc:var(--l-accent);--r-acc2:var(--l-accent);background:rgba(30,28,34,.45)}
.ghrep__box{position:relative;background:var(--r-bg);color:var(--r-tx);border:1px solid var(--r-ln);border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.35);padding:28px 28px 26px;width:min(980px,100%);max-height:calc(100vh - 48px);overflow:auto;font-size:15px;line-height:1.5}
.ghrep__box.wide{width:min(1320px,100%);display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:26px}
.ghrep__box.done{width:min(520px,100%);text-align:center;padding:34px 30px}
.ghrep__x{position:absolute;top:12px;right:14px;width:34px;height:34px;border:0;background:none;color:var(--r-mu);font-size:26px;line-height:1;cursor:pointer;border-radius:50%}
.ghrep__x:hover{color:var(--r-tx);background:var(--r-fld)}
.ghrep__h{margin:0 0 6px;font-size:22px;line-height:1.2;font-weight:700;text-transform:none;letter-spacing:0;font-family:var(--sans)}
.ghrep__lead{margin:0 0 16px;color:var(--r-mu);font-size:14px}
.ghrep__busy{margin:18px 0 6px}
.ghrep__warn{margin:0 0 14px;padding:10px 12px;border-radius:10px;background:rgba(242,102,139,.12);color:#F2668B;font-size:14px}
.ghrep__ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.ghrep__way{display:flex;flex-direction:column;gap:6px;text-align:left;padding:16px 18px;border-radius:14px;border:1px solid var(--r-ln);background:var(--r-fld);color:var(--r-tx);font:inherit;cursor:pointer}
.ghrep__way b{font-size:15px}
.ghrep__way span{font-size:13px;color:var(--r-mu);line-height:1.45}
.ghrep__way.rec,.ghrep__way:hover,.ghrep__way:focus-visible{border-color:var(--r-acc2);outline:0;box-shadow:0 0 0 1px var(--r-acc2)}
.ghrep__main{min-width:0;display:flex;flex-direction:column}
.ghrep__side{min-width:0;display:flex;flex-direction:column;gap:8px;padding-top:6px}
.ghrep__box:not(.wide) .ghrep__side{margin-top:6px}
.ghrep__tools{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.ghrep__tool{font:inherit;font-size:13px;padding:6px 12px;border-radius:999px;border:1px solid var(--r-ln);background:none;color:var(--r-tx);cursor:pointer}
.ghrep__tool.on{background:var(--r-acc);border-color:var(--r-acc);color:#fff}
.ghrep__stage{border:1px solid var(--r-ln);border-radius:12px;overflow:auto;background:var(--r-fld);max-height:calc(100vh - 230px)}
.ghrep__stage canvas{display:block;width:100%;height:auto;cursor:crosshair;touch-action:none}
.ghrep__notes{display:flex;flex-direction:column;gap:6px}
.ghrep__notes:empty{display:none}
.ghrep__note{display:flex;align-items:center;gap:8px;border:1px solid var(--r-ln);border-radius:10px;padding:6px 10px;background:var(--r-fld)}
.ghrep__note b{color:#F2668B;font-size:14px;min-width:14px}
.ghrep__note input{flex:1;min-width:0;border:0;background:none;color:var(--r-tx);font:inherit;font-size:14px;outline:0;padding:2px 0}
.ghrep__lbl{font-size:13px;font-weight:600;margin-top:6px}
.ghrep__lbl span{font-weight:400;color:var(--r-mu);font-size:12px}
.ghrep__ta{width:100%;resize:vertical;min-height:96px;border:1px solid var(--r-ln);border-radius:10px;background:var(--r-fld);color:var(--r-tx);font:inherit;font-size:14px;padding:10px 12px}
.ghrep__ta:focus{outline:0;border-color:var(--r-acc2)}
.ghrep__files{display:flex;flex-wrap:wrap;gap:6px}
.ghrep__chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;font:inherit;font-size:13px;padding:5px 10px;border-radius:999px;border:1px solid var(--r-ln);background:var(--r-fld);color:var(--r-tx);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ghrep__chip small{color:var(--r-mu)}
.ghrep__chip.add{cursor:pointer;background:none}
.ghrep__chip.add:hover{border-color:var(--r-acc2)}
.ghrep__rm{border:0;background:none;color:var(--r-mu);cursor:pointer;font-size:16px;line-height:1;padding:0 0 0 2px}
.ghrep__lock{border:1px solid var(--r-ln);border-radius:10px;background:var(--r-fld);padding:9px 12px;font-size:14px;color:var(--r-mu);user-select:all;overflow-wrap:anywhere}
.ghrep__auto{margin:0;font-size:13px;color:var(--r-mu)}
.ghrep__send{margin-top:10px;font:inherit;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:13px 18px;border-radius:999px;border:0;background:var(--r-acc);color:#fff;cursor:pointer}
.ghrep__send:hover{filter:brightness(1.08)}
.ghrep__send[disabled]{opacity:.6;cursor:wait}
.ghrep__copy{margin:2px 0 0;text-align:center;font-size:13px;color:var(--r-mu)}
.ghrep__copy.err{color:#F2668B}
.ghrep__ok{margin-top:8px}
@media (max-width:900px){.ghrep__box.wide{grid-template-columns:minmax(0,1fr)}.ghrep__stage{max-height:50vh}}
.navpill.ghupd-btn{color:#FF9F43}
.navpill.ghupd-btn:hover{color:#FFC48A}
body.light .navpill.ghrep-btn{color:#C8325A}
body.light .navpill.ghupd-btn{color:#C75F00}
body.light .navpill.ghupd-btn:hover,body.light .navpill.ghrep-btn:hover{text-decoration:underline;text-underline-offset:3px}
.ghrep__notesbox{margin:0 0 16px;padding:12px 14px;border-radius:12px;background:var(--r-fld);border:1px solid var(--r-ln);font-size:14px;max-height:40vh;overflow:auto}
/* the "search in" chips only matter while searching */
.hqbyl{align-self:center;margin-right:2px}

/* "?" help bubbles, same as in Select (Select also defines them in app.css) */
.q{display:inline-flex;align-items:center;justify-content:center;flex:none;width:20px;height:20px;min-height:0;padding:0;margin-left:2px;border-radius:50%;border:1px solid rgba(201,166,247,.6);background:transparent;color:var(--lav);font-family:var(--mono);font-size:11px;font-weight:600;line-height:1;cursor:help;vertical-align:middle;text-transform:none;letter-spacing:0}
.q:hover,.q.on{background:var(--lav);color:#1B0F2E;border-color:var(--lav)}
/* bigger hit area on touch without changing the look */
@media (hover:none){.q{position:relative}.q::after{content:'';position:absolute;inset:-12px}}
.tippop{position:fixed;z-index:80;padding:11px 14px;border-radius:12px;background:#2A1C3D;box-shadow:0 0 0 1px rgba(201,166,247,.5),0 12px 30px rgba(0,0,0,.5);font-size:13px;line-height:1.5;color:var(--text);pointer-events:none;text-transform:none;letter-spacing:0;font-family:var(--sans);font-weight:400;white-space:normal}
.atop .navpill.ghost.ghupd-btn{color:#FF9F43}body.light .atop .navpill.ghost.ghrep-btn{color:#C8325A}body.light .atop .navpill.ghost.ghupd-btn{color:#C75F00}

.pk[data-href]{cursor:pointer}.pk[data-href] .pk-acts{cursor:auto}

/* card buttons as pictograms (gh_acts): round, the label as a small bubble on hover or focus */
.pk-acts{align-items:center}
.pk-acts .sbtn.icb{position:relative;width:40px;height:40px;min-height:40px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:50%}
.pk-acts .sbtn.icb .ic{width:22px;height:22px;flex:none;margin:0!important;stroke-width:1.9}
.pk-acts .sbtn.icb .ic-ext{transform:translateY(.3px)}
.pk-acts .sbtn.icb.danger{margin-left:auto}
.pkcards.list .pk-acts .sbtn.icb.danger{margin-left:8px}
.pk-acts .sbtn.icb[data-label]::after{content:attr(data-label);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:5;padding:6px 10px;border-radius:10px;background:#2A1C3D;box-shadow:0 0 0 1px rgba(201,166,247,.5),0 8px 20px rgba(0,0,0,.45);color:var(--text);font:400 12px/1.4 var(--sans);letter-spacing:0;text-transform:none;white-space:nowrap;max-width:260px;pointer-events:none;opacity:0;transition:opacity .12s}
.pk-acts .sbtn.icb[data-label]:hover::after,.pk-acts .sbtn.icb[data-label]:focus-visible::after{opacity:1}
.pk-acts .sbtn.icb.danger[data-label]::after{left:auto;right:0;transform:none}
.pk-acts .sbtn.icb[disabled]{opacity:.45}
@media (hover:none){.pk-acts .sbtn.icb[data-label]::after{display:none}}
.light .pk-acts .sbtn.icb[data-label]::after{background:var(--l-card);color:var(--l-text);box-shadow:0 0 0 1px var(--l-line2),0 8px 20px rgba(0,0,0,.15)}
.pk-acts .sbtn.icb:first-child::after{left:0;transform:none}

/* pictogram + text on buttons inside the tools (gh_iconize) */
.ict{width:15px;height:15px;flex:none;vertical-align:-3px;margin-right:6px}
:is(.sbtn,.btn,.copybtn,.btn-ghost):has(>.ict){display:inline-flex;align-items:center;justify-content:center;gap:0}
/* project page: pick boxes, quick actions, bar for several entries */
.hrow{grid-template-columns:22px 86px minmax(0,1fr) auto auto 10px 40px}
.hpick{display:flex;align-items:center;justify-content:center;cursor:pointer}
.hpick input{width:16px;height:16px;margin:0;accent-color:#8A47F0;opacity:.35;transition:opacity .15s;cursor:pointer}
.hrow:hover .hpick input,.hpick input:checked,.hpick input:focus-visible,.hub.picking .hpick input{opacity:1}
.hrow.picked{background:rgba(155,92,246,.1)}
.hquick{display:flex;gap:8px}
.hquick .hib .ic{width:18px;height:18px}
.hib[disabled]{opacity:.35;cursor:not-allowed}
.hbulk{position:sticky;top:12px;z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 12px 10px 18px;border-radius:999px;background:#2A1C3D;box-shadow:0 0 0 1px rgba(201,166,247,.5),0 12px 30px rgba(0,0,0,.45)}
.hbulk[hidden]{display:none}
.hbulk input{flex:1 1 220px;min-width:0;min-height:38px;border-radius:999px;border:1px solid var(--line);background:rgba(12,7,19,.5);color:var(--text);padding:0 14px}
@media (max-width:760px){.hrow{grid-template-columns:22px minmax(0,1fr) auto 10px 40px}.hk{grid-column:2/-1}.hfacts{grid-column:2/3}.hbulk{border-radius:18px}}
.light .hbulk{background:var(--l-card);box-shadow:0 0 0 1px var(--l-line2),0 12px 30px rgba(0,0,0,.12)}.light .hbulk input{background:var(--l-bg);color:var(--l-text);border-color:var(--l-line2)}
/* sort menu, new comments, expiry soon */
.pksort{position:relative;display:inline-flex}
.pksort .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pksort select{min-height:38px;border-radius:999px;border:1px solid var(--line);background:rgba(12,7,19,.5);color:var(--text);padding:0 34px 0 14px;font:inherit;font-size:13px;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23B9AECB' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;cursor:pointer}
.light .pksort select{background-color:var(--l-card);color:var(--l-text);border-color:var(--l-line2)}
.pk-st.new{border-color:#F2668B;color:#fff;background:rgba(242,102,139,.85);display:inline-flex;align-items:center;gap:6px}
.pk-st.new i{width:7px;height:7px;border-radius:50%;background:#fff}
.pk-meta .soon{color:#FFB84D;font-weight:600}
.light .pk-meta .soon{color:#B25E00}
.pkcards .pk[hidden],.pkcards.list .pk[hidden]{display:none!important}
@media (max-width:760px){
  .hrow{grid-template-columns:22px auto minmax(0,1fr) auto 10px 40px;grid-template-areas:"pick kind . quick st move" ". main main main main main" ". facts facts facts facts facts";row-gap:6px}
  .hrow .hpick{grid-area:pick}.hrow .hk{grid-area:kind}.hrow .hquick{grid-area:quick}.hrow .hst{grid-area:st}.hrow .hmove{grid-area:move}
  .hrow .hmain{grid-area:main;min-width:0}.hrow .hfacts{grid-area:facts}
  .hmain .htitle,.hmain .small{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
}

/* Fehler melden: red warning sign only, name as hover bubble */
.navpill.ghrep-btn{width:40px;padding:0!important;justify-content:center}.navpill.ghrep-btn .ic{width:21px;height:21px}
.navpill.ghrep-btn{position:relative;overflow:visible}
.navpill.ghrep-btn[data-label]::after{content:attr(data-label);position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:60;padding:6px 10px;border-radius:10px;background:#2A1C3D;box-shadow:0 0 0 1px rgba(201,166,247,.5),0 8px 20px rgba(0,0,0,.45);color:var(--text);font:400 12px/1.4 var(--sans);letter-spacing:0;text-transform:none;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s}
.navpill.ghrep-btn:hover::after,.navpill.ghrep-btn:focus-visible::after{opacity:1}
.light .navpill.ghrep-btn[data-label]::after{background:var(--l-card);color:var(--l-text);box-shadow:0 0 0 1px var(--l-line2),0 8px 20px rgba(0,0,0,.15)}
@media (hover:none){.navpill.ghrep-btn[data-label]::after{display:none}}

/* phones: search over the full width, buttons and filter chips in two columns like on the website */
@media (max-width:600px){
  /* search over the full width, the buttons for new things side by side */
  .tact2,.amain > .row.between > .row.gap10{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%}
  .tact2 > .search,.amain > .row.between > .row.gap10 > .search,.hqwrap .search{grid-column:1/-1;width:100%!important;max-width:none!important;flex:1 1 100%!important}
  .tact2 > .btn,.amain > .row.between > .row.gap10 > .btn{min-width:0;width:100%;justify-content:center;text-align:center;padding:0 10px;font-size:13px;letter-spacing:.04em;white-space:nowrap;margin:0}
  .tact2 > .btn:nth-child(2):last-child,.amain > .row.between > .row.gap10 > .btn:nth-child(2):last-child{grid-column:1/-1}
  /* filter chips in two equal columns, like on the website */
  .pkbar{display:flex;flex-direction:column;align-items:stretch;gap:12px}
  .pkbar .chips{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .pkbar .fchip{width:100%;justify-content:center;padding:0 8px;font-size:13px;white-space:nowrap;min-height:40px}
  /* storage line, then sort and view in one row */
  .pkright{display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
  .pkright > span:first-child{grid-column:1/-1;font-size:12px}
  .pksort,.pksort select{width:100%}
}
@media (max-width:600px){.hqwrap{width:100%;flex:1 1 100%}}
@media (max-width:600px){.mhide{display:none}}

/* header: update, report, settings and logout as pictograms with a small bubble on hover */
.navico{position:relative;overflow:visible;display:inline-flex!important;align-items:center;justify-content:center;width:40px;min-width:40px;height:40px;padding:0!important}
.navico .ic{width:20px;height:20px}
.navpill.ghupd-btn.navico .ic{width:22px;height:22px}
.navico[data-label]::after{content:attr(data-label);position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:60;padding:6px 10px;border-radius:10px;background:#2A1C3D;box-shadow:0 0 0 1px rgba(201,166,247,.5),0 8px 20px rgba(0,0,0,.45);color:var(--text);font:400 12px/1.4 var(--sans);letter-spacing:0;text-transform:none;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s}
.navico:last-child[data-label]::after,form:last-child .navico[data-label]::after{left:auto;right:0;transform:none}
.navico:hover::after,.navico:focus-visible::after{opacity:1}
.light .navico[data-label]::after{background:var(--l-card);color:var(--l-text);box-shadow:0 0 0 1px var(--l-line2),0 8px 20px rgba(0,0,0,.15)}
@media (hover:none){.navico[data-label]::after{display:none}}
/* phones: logo left and the pictograms right in one row, the tool switch below over the full width */
@media (max-width:600px){
  .topbar,.atop{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center;row-gap:14px;column-gap:8px}
  .topbar>.tbrand,.atop>.tbrand{display:contents}
  .topbar>.tbrand>a,.atop>.tbrand>a{grid-column:1;grid-row:1}
  .topbar>.tbrand>.tswitch,.atop>.tbrand>.tswitch{grid-column:1/-1;grid-row:2;justify-self:stretch;display:flex;width:100%;box-sizing:border-box}
  .topbar>.tbrand>.tswitch .tsw,.atop>.tbrand>.tswitch .tsw{flex:1 1 auto;text-align:center;justify-content:center}
  .topbar>nav[aria-label=Konto],.atop>nav[aria-label=Konto]{grid-column:2;grid-row:1;flex-wrap:nowrap;gap:2px;justify-content:flex-end}
}
/* all header pictograms at the same size */
.navico svg,.navico .ic,.navpill.ghrep-btn .ic,.navpill.ghupd-btn.navico .ic,.gearbtn.navico svg{width:22px!important;height:22px!important}
.navico svg,.navpill.ghrep-btn svg{stroke-width:1.9}
/* storage of all tools in one bar, like the storage view of a phone */
.hstor1{display:flex;flex-direction:column;gap:12px;padding:18px 20px;border-radius:18px;background:var(--ink2);box-shadow:0 0 0 1px var(--line)}
.hstor1h{display:flex;justify-content:space-between;align-items:baseline;gap:6px 16px;flex-wrap:wrap}
.hstor1t{font-size:20px;font-weight:700;color:var(--text)}
.hstor1h .muted{font-size:14px}
.hbar1{position:relative;display:flex;height:26px;border-radius:7px;overflow:hidden;background:rgba(12,7,19,.75);box-shadow:inset 0 0 0 1px var(--line)}
.hseg{height:100%;flex:none}.hseg+.hseg{box-shadow:-2px 0 0 #0c0713}
.hseg.tS{background:#C9A6F7}.hseg.tT{background:#3DDC97}.hseg.tR{background:#F2668B}
.hfree{flex:1;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--text);white-space:nowrap;padding:0 8px;min-width:0;overflow:hidden}
.hlegs{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--muted)}
.hleg{display:inline-flex;align-items:center;gap:6px}.hleg b{color:var(--text);font-weight:600}
.hleg i{width:10px;height:10px;border-radius:50%;display:inline-block}
.hleg.tS i{background:#C9A6F7}.hleg.tT i{background:#3DDC97}.hleg.tR i{background:#F2668B}
.light .hstor1{background:var(--l-card);box-shadow:0 0 0 1px var(--l-line)}.light .hstor1t,.light .hleg b,.light .hfree{color:var(--l-text)}.light .hbar1{background:var(--l-deep)}
.ghrep__alt{all:unset;cursor:pointer;color:var(--text);text-decoration:underline;text-underline-offset:3px;font-weight:600}.ghrep__alt:hover{color:#fff}
.pkcards.list .pk-pic{position:relative}.pkcards.list .pk-pic > img,.pkcards.list .pk-pic > .rthumb,.pkcards.list .pk-pic > .mosaic,.pkcards.list .pk-pic > .tk-ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tippop{padding:7px 11px!important;border-radius:10px!important;font-size:12px!important;line-height:1.45!important;width:auto}
.hst[data-tip]{cursor:help;flex:none}
/* list view: every row the same height, pictures fit in full with dark bars */
.pkcards.list .pk{grid-template-rows:minmax(132px,auto)}
.pkcards.list .pk-pic{height:132px;min-height:0;align-self:start;background:#0d0a14}
.pkcards.list .pk-pic > img,.pkcards.list .pk-pic > img.rthumb{object-fit:contain}
.pkcards.list .pk-meta > *{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
@media (max-width:700px){.pkcards.list .pk-pic{height:auto;min-height:110px;align-self:stretch}}
/* tiles too: the whole picture with dark bars */
.pk-pic{background:#0d0a14}
.pk-pic > img,.pk-pic > img.rthumb{object-fit:contain}
/* pictogram buttons outside the cards (invited people in Review) */
.pk-acts.pacts{margin:0 0 0 auto;padding:0;border:0;flex-wrap:nowrap;justify-content:flex-end}
.pk-acts.pacts .sbtn.icb.danger{margin-left:0}

/* DE / EN switch on the client pages, as on the website */
.ghlang{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;padding:0 14px;height:40px;border-radius:999px;border:1px solid rgba(243,238,249,.3);color:var(--text,#F3EEF9);font:600 13px/1 var(--mono,ui-monospace,monospace);letter-spacing:.08em;text-decoration:none;white-space:nowrap;background:rgba(14,8,23,.35);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ghlang:hover{border-color:var(--lav,#C9A6F7);color:#fff}
.ghlang--top{position:absolute;z-index:40;top:max(18px,env(safe-area-inset-top,0px));right:max(20px,env(safe-area-inset-right,0px))}
@media (max-width:700px){.ghlang--top{position:relative;top:auto;right:auto;display:flex;width:max-content;margin:12px max(16px,env(safe-area-inset-right,0px)) 0 auto}}
.light .ghlang{border-color:var(--l-line2,rgba(0,0,0,.2));color:var(--l-text,#1b1426);background:rgba(255,255,255,.6)}
@media (max-width:600px){.topbar .ghlang,.pbar .ghlang{padding:0 12px}.topbar .ghlang svg,.pbar .ghlang svg{display:none}}

/* small cards in the middle of the page (login, password, link gone, set up): everything centred */
.login-wrap > .glass{text-align:center}
.login-wrap > .glass label,.login-wrap > .glass .flabel,.login-wrap > .glass .small,.login-wrap > .glass .muted,.login-wrap > .glass p{text-align:center}
.login-wrap > .glass .row,.login-wrap > .glass .srow{justify-content:center}
.login-wrap > .glass input,.login-wrap > .glass textarea,.login-wrap > .glass select{text-align:left}
.login-wrap > .glass .brandlogo,.login-wrap > .glass img{margin-left:auto;margin-right:auto}
/* empty date field: digits and slashes in the colour of the field outline (solid: Safari draws see-through digits lilac); time without a date: greyed out */
input[type=date].is-empty{color:#4C4556}
input[type=date].is-empty::-webkit-datetime-edit,input[type=date].is-empty::-webkit-datetime-edit-fields-wrapper,input[type=date].is-empty::-webkit-datetime-edit-text,input[type=date].is-empty::-webkit-datetime-edit-month-field,input[type=date].is-empty::-webkit-datetime-edit-day-field,input[type=date].is-empty::-webkit-datetime-edit-year-field{color:#4C4556}
.fld.dim{opacity:.4;transition:opacity .15s}
.light input[type=date].is-empty,.light input[type=date].is-empty::-webkit-datetime-edit{color:var(--l-line2)}
.untilin{margin-top:8px;width:100%}
input[type=date],input[type=time]{color-scheme:dark}
.light input[type=date],.light input[type=time]{color-scheme:light}
input[type=date]::-webkit-calendar-picker-indicator,input[type=time]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.85}
/* ---------- edit view: summary line, panels, settings in three groups (Select gallery, Review) ---------- */
.phead .pk-acts.pacts,.trow .pk-acts.pacts{flex-wrap:nowrap}
.phead .pk-acts .sbtn.icb.danger,.trow .pk-acts .sbtn.icb.danger{margin-left:0}
.esum{background:var(--ink2);border-radius:18px;box-shadow:0 0 0 1px rgba(243,238,249,.1);padding:16px 20px;display:flex;flex-direction:column;gap:14px}
.esline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:15px;color:var(--muted);min-width:0}
.esline b{color:var(--text);font-weight:600}
.esdot{opacity:.5}
.esbadge{display:inline-flex;align-items:center;min-height:26px;padding:0 11px;border-radius:999px;font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;background:rgba(61,220,151,.14);color:var(--mint)}
.esbadge.warn{background:rgba(255,184,77,.15);color:#FFB84D}
.esbadge.off{background:rgba(243,238,249,.1);color:var(--muted)}
.esbtns .sbtn.on{border-color:var(--lav);background:rgba(155,92,246,.2)}
.egroups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 24px;align-items:start}
.egroup{display:flex;flex-direction:column;gap:12px;min-width:0}
.egroup>.label,.egroup .ghd{font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--lav)}
.egroup .fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.egroup .fld label,.egroup .flabel{font-size:12px;font-weight:600;color:var(--muted)}
.egroup .fld input:not([type=checkbox]),.egroup .fld select{width:100%;min-width:0;box-sizing:border-box;min-height:44px;height:44px;font-size:14px;padding:0 12px}
.egroup .fld2{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:10px}
.egroup .chips{display:flex;flex-wrap:wrap;gap:8px}
.egroup .ehint{font-size:12px;color:var(--muted);margin:0}
.efoot2{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding-top:12px;border-top:1px solid rgba(243,238,249,.12)}
.esaved{font-size:13px;color:var(--muted)}
.esaved.ok{color:var(--mint)}
.esaved.err{color:#FF8A8A}
.ltip[data-tip]{cursor:help;text-decoration:underline dotted rgba(243,238,249,.35);text-underline-offset:3px}
@media (max-width:980px){.egroups{grid-template-columns:repeat(2,minmax(0,1fr))}.egroups .egroup.wide{grid-column:1/-1}}
@media (max-width:640px){.egroups{grid-template-columns:minmax(0,1fr)}.esum{padding:14px 16px}.esline{font-size:14px}}
.light .esum{background:var(--l-card);box-shadow:0 0 0 1px var(--l-line)}
.light .esline{color:var(--l-muted)}.light .esline b{color:var(--l-text)}
.light .esbadge{background:rgba(79,111,94,.12);color:var(--l-green)}
.light .esbadge.warn{background:rgba(154,74,67,.1);color:var(--l-red)}
.light .esbadge.off{background:var(--l-deep);color:var(--l-muted)}
.light .egroup>.label,.light .egroup .ghd{color:var(--l-accent)}
.light .egroup .fld label,.light .egroup .flabel,.light .esaved{color:var(--l-muted)}
.light .esaved.ok{color:var(--l-green)}
.light .efoot2{border-top-color:var(--l-line)}
.light .esbtns .sbtn.on{border-color:var(--l-text);background:var(--l-deep)}
.light .ltip[data-tip]{text-decoration-color:rgba(var(--l-text-rgb),.35)}
.light .rsum{color:var(--l-muted)}.light .rsum b{color:var(--l-text)}
/* update available: the pictogram breathes slowly, never when the system asks for less motion */
@keyframes ghupdpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.9)}}
.navpill.ghupd-btn .ic,.navpill.ghupd-btn svg{animation:ghupdpulse 3.6s ease-in-out infinite;transform-origin:50% 50%}
.navpill.ghupd-btn:hover .ic,.navpill.ghupd-btn:hover svg{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.navpill.ghupd-btn .ic,.navpill.ghupd-btn svg{animation:none}}
#einladen[hidden],#bearbeiten[hidden]{display:none!important}
.tchip.ltip[data-tip]{text-decoration:none}

/* the labels of the round buttons come from the shared tooltip (position fixed), so a card with overflow hidden cannot cut them off */
.pk-acts .sbtn.icb[data-label]::after{display:none!important}
/* list view: the status pills sit in the text column above the client line, not on the picture (hub.js copies them there) */
.pk-body>.pk-tags{display:none}
.pkcards.list .pk-pic>.pk-tags{display:none}
.pkcards.list .pk-body>.pk-tags{display:flex;position:static;grid-area:tags;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.pkcards.list .pk-body>.pk-tags .pk-st{background:transparent}
@media (max-width:700px){.pkcards.list .pk-body>.pk-tags .pk-st+.pk-st{display:inline-flex}}

/* ===== Design-Raster (Okt 2026): gleiche Höhe und Schrift für gleiche Aufgaben in Select, Transfer und Review =====
   48 Hauptaktion (lila) · 40 alle anderen Buttons, Filter-Pills und runden Piktogramm-Buttons · 36 kleine Buttons in Formularen und Kommentaren
   · 30 kleine runde Piktogramme (Erledigt, Mehr, Reaktion) · 26 Status-Badges · 44 Eingabefelder · 22 "?".
   Schrift: Ruddy nur für die Hauptaktion, Open Sans für alle anderen Buttons, Source Code nur für Beschriftungen, Status und Navigation. */
:root{--h-main:48px;--h-btn:40px;--h-sm:36px;--h-ics:30px;--h-badge:26px;--h-in:44px;--h-q:22px}
:where(svg.ic){width:18px;height:18px;flex:none}
:where(svg.ic.fi){width:14px;height:14px}
/* main action: always 48, also the wide ones in forms, logins and the dock */
.btn,.btn.big,.btn.sbig,.btn.newbtn,.dock .btn,.login .btn,.card .btn{min-height:var(--h-main)}
.btn.big,.btn.sbig{font-size:18px}
.btn.small,.btn.sm{min-height:var(--h-sm);height:auto;padding:0 16px;font-size:14px}
/* secondary buttons and pills: one height, one typeface */
.btn-ghost,.sbtn,.hbtn,.cvbtn,.copybtn{min-height:var(--h-btn);padding:0 16px;font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;border-radius:999px}
.btn-ghost.sm,.sbtn.sm,.hbtn.sm{min-height:var(--h-sm);padding:0 14px;font-size:14px}
.btn-ghost .ic,.sbtn .ic,.hbtn .ic,.copybtn .ic,.btn .ic{width:16px;height:16px;flex:none}
.fchip,.qbtn{min-height:var(--h-btn);height:auto;font-size:14px;font-weight:600}
.pksort select,.hqby .fchip{min-height:var(--h-btn)}
/* round pictogram buttons */
.sbtn.icb,.pk-acts .sbtn.icb,.hib,.vround,.tool.ti{width:var(--h-btn);height:var(--h-btn);min-height:var(--h-btn);padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
.sbtn.icb .ic,.pk-acts .sbtn.icb .ic,.vround svg,.tool.ti svg,.hib .ic,.hquick .hib .ic{width:22px;height:22px;stroke-width:1.8}
.hrow .hib{flex:none}
.hib{border:1px solid rgba(243,238,249,.25);color:var(--text)}
.hib:hover{border-color:var(--lav);background:transparent}
.light .hib{border-color:var(--l-line2,rgba(0,0,0,.2));color:var(--l-text,inherit)}
/* small round pictograms */
.okchk,.picb{width:var(--h-ics);height:var(--h-ics);border-width:1.5px}
.okchk .ic,.picb svg,.picb .ic{width:16px;height:16px}
/* status badges */
.pk-st,.esbadge,.stchip{display:inline-flex;align-items:center;height:var(--h-badge);min-height:var(--h-badge);padding:0 11px;font-size:11px;line-height:1}
/* input fields */
input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],input[type=url],input[type=date],input[type=time],input:not([type]),select{min-height:var(--h-in)}
.egroup .fld input:not([type=checkbox]),.egroup .fld select{min-height:var(--h-in);height:var(--h-in)}
select{font-family:var(--sans)}
.tchip{min-height:var(--h-sm)}
/* "?" help: one size everywhere */
.q,.q.ghost,button.q{width:var(--h-q);height:var(--h-q);min-height:var(--h-q);font-size:12px}
/* text links: the same in all tools (no underline until hover) */
.linkbtn,.lnk{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--lav);text-decoration:none}
.linkbtn:hover,.lnk:hover{text-decoration:underline;text-underline-offset:3px}
.linkbtn.danger{color:#FF8A8D}
/* one look for every drop-down and "…" menu (Exportieren, Optionen, Filter, Sortieren) */
.xmenu{position:relative}
.xmenu>summary{list-style:none;cursor:pointer}
.xmenu>summary::-webkit-details-marker{display:none}
.xmenu>summary .ic{transition:transform .15s}
.xmenu[open]>summary .ic{transform:rotate(180deg)}
.xlist{position:absolute;z-index:30;top:calc(100% + 8px);left:0;width:min(340px,calc(100vw - 32px));display:flex;flex-direction:column}
.xlist,.pop,.rmenu{padding:6px;border-radius:12px;background:#2A1C3E;box-shadow:0 0 0 1px rgba(243,238,249,.14),0 18px 44px rgba(0,0,0,.6)}
.xitem,.popt,.rmenu a,.rmenu button{display:flex;flex-direction:row;align-items:center;gap:12px;width:100%;min-height:40px;padding:8px 12px;border:0;border-radius:8px;background:transparent;color:var(--text);font:inherit;font-size:14px;line-height:1.3;text-align:left;text-decoration:none;cursor:pointer}
.xitem:hover,.xitem:focus-visible,.popt:hover,.rmenu a:hover,.rmenu button:hover{background:rgba(243,238,249,.08);outline:none}
.xitem>.ic,.popt>.ic,.rmenu .ic{width:16px;height:16px;flex:none;color:var(--muted)}
.xitem .xt,.popt .xt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.xitem .xt b,.popt .xt b{font-weight:600;font-size:14px}
.xitem .xt span,.popt .xt span{font-size:12px;color:var(--muted)}
.xitem.danger,.popt.danger,.rmenu .danger{color:#FF8A8D}.xitem.danger .ic,.popt.danger .ic{color:inherit}
.light .xlist,.light .pop,.light .rmenu{background:var(--l-card);box-shadow:0 0 0 1px var(--l-line),0 14px 34px rgba(0,0,0,.12)}
.light .xitem,.light .popt,.light .rmenu a,.light .rmenu button{color:var(--l-text)}
.light .xitem:hover,.light .popt:hover,.light .rmenu a:hover,.light .rmenu button:hover{background:rgba(var(--l-text-rgb),.06)}
.light .xitem .xt span,.light .popt .xt span,.light .xitem>.ic{color:var(--l-muted)}
/* comments: done circle on the Review film page like in the player */
.crow .okchk{margin-left:auto}
.topbar .pill.glass-pill{min-height:var(--h-btn)}
.egroups>.efoot2{grid-column:1/-1}
#filmform.egroups{grid-template-columns:minmax(0,1fr)}
#filmform .fld2{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);max-width:760px}

/* ===== head of the client pages (Select gallery, Review project, Transfer download and upload): one jungle band for all three ===== */
.chead{position:relative;padding:22px var(--pad,40px) 44px;background:linear-gradient(180deg,rgba(18,10,28,.55) 0%,rgba(18,10,28,.82) 60%,var(--ink,#120A1C) 100%),url('img/jungle.jpg') center 40%/cover;color:var(--text)}
.chtop{display:flex;align-items:center;justify-content:space-between;gap:16px}
.chlogo{flex:none;display:block;line-height:0}.chlogo img{display:block;width:105px;height:auto}
.chacts{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0}
.chpill{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--h-btn,40px);min-height:var(--h-btn,40px);padding:0 16px;border-radius:999px;border:1px solid rgba(243,238,249,.3);background:rgba(18,10,28,.62);color:var(--text);font:600 14px/1 var(--sans);text-decoration:none;white-space:nowrap;cursor:pointer}
.chpill:hover{border-color:var(--lav,#C9A6F7);color:var(--text)}
.chpill .ic{width:18px;height:18px}
.chpill[disabled]{opacity:.5;cursor:default}
.chme{display:inline-flex;align-items:center;gap:8px;min-width:0;padding:0 4px;font-size:14px;white-space:nowrap}
.chme .tl{overflow:hidden;text-overflow:ellipsis;max-width:200px}
.chdot{flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--c);color:#1B1128;font:700 11px/1 var(--sans)}
.chacts .ghlang{height:var(--h-btn,40px)}
.chhero{display:flex;flex-direction:column;gap:14px;max-width:1100px;margin-top:40px}
.chkick{font:600 12px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tacc,var(--lav))}
.chkick a{color:inherit;text-decoration:none}.chkick a:hover{text-decoration:underline;text-underline-offset:3px}
.chkick .sep{opacity:.7;margin:0 .1em}
.chtitle{margin:0;font-size:clamp(44px,6.4vw,92px);line-height:.98;overflow-wrap:anywhere;text-wrap:balance}
.chtitle .cht{display:inline-block;max-width:100%}
.chhero .metab{margin:0}
.chmsg{margin:4px 0 0;max-width:60ch;padding-left:14px;border-left:2px solid var(--tacc,var(--lav));color:#D8CDE6;font-size:16px;line-height:1.55;overflow-wrap:anywhere}
.cbody{padding:24px var(--pad,40px) 56px}
.ccol{display:flex;flex-direction:column;gap:18px;max-width:760px}
.ccol>.btn.big{align-self:flex-start;width:auto;min-width:260px}
@media (max-width:600px){
  .chead{padding:16px var(--pad,18px) 28px}
  .chlogo img{width:84px}
  .chacts{gap:6px}
  .chpill .tl,.chme .tl{display:none}
  .chpill{width:40px;padding:0}
  .chme{padding:0}
  .chhero{margin-top:28px}
  .chacts .ghlang{padding:0 12px}
  .ccol>.btn.big{width:100%;min-width:0}
}
.light .chead{background:var(--l-bg);color:var(--l-text)}
.light .chpill{background:var(--l-card);border-color:var(--l-line2);color:var(--l-text)}
.light .chkick{color:var(--l-accent)}
.light .chmsg{color:var(--l-soft);border-left-color:var(--l-accent)}
/* ---------- the Neu pages (Neue Galerie, Neues Review, Dateien senden/anfordern): settings, files, then one button in the middle ---------- */
/* one drop zone in all tools: title, hint, buttons, each line in the middle */
.drop.slim{min-height:0;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;text-align:center;gap:8px 14px;padding:16px 18px;border-radius:14px}
.drop.slim strong{font-size:16px}
.drop.slim .dhint{flex-basis:100%}
.drop.slim .dropbtns{flex-basis:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 14px;margin-top:4px}
.egroups>.egroup.full{grid-column:1/-1;padding-top:18px;border-top:1px solid rgba(243,238,249,.1)}
.vgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 24px;align-items:start}
.vgrid .s2{grid-column:span 2}.vgrid .s3{grid-column:1/-1}
.egroup .vgrid .fld textarea{width:100%;box-sizing:border-box;min-height:64px;font-size:14px;padding:10px 12px;resize:vertical}
.cgo{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;margin-top:8px}
.cgo .btn{width:auto;max-width:100%;padding:0 40px;font-size:18px;white-space:normal;line-height:1.15;text-align:center}
.cgo p{margin:0;max-width:66ch}
.drafts{display:flex;flex-direction:column;gap:8px}
.drafts .drow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px;padding-top:8px;border-top:1px solid rgba(243,238,249,.12)}
.drafts .drow b{font-weight:600}
@media (max-width:980px){.vgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.vgrid .s2{grid-column:1/-1}}
@media (max-width:640px){.vgrid{grid-template-columns:minmax(0,1fr)}.cgo .btn{padding:0 24px;font-size:16px;min-height:var(--h-main,48px);height:auto;padding-block:12px}}
.light .egroups>.egroup.full{border-top-color:var(--l-line)}
.light .drafts .drow{border-top-color:var(--l-line)}
/* list view: every row as high as its picture (132 px), at any width: the date is a pill next to the status,
   title and facts take one line each (cut with … when narrow) */
.pk-until{display:none}
.pkcards.list .pk-body>.pk-tags .pk-until{display:block}
.pkcards.list .pk-meta>.until{display:none}
.pkcards.list .pk-body>.pk-tags{flex-wrap:nowrap;overflow:hidden}
.pkcards.list .pk-body>.pk-tags .pk-st,.pkcards.list .pk-body>.pk-tags .pk-st+.pk-st{display:block;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;padding-top:0;padding-bottom:0;line-height:calc(var(--h-badge,26px) - 2px)}
.pkcards.list .pk-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pkcards.list .pk-body>.pk-tags .pk-st:first-child{flex-shrink:0}
@media (max-width:700px){.pkcards.list .pk-body>.pk-tags .pk-st .pl,.pkcards.list .pk-body>.pk-tags .pk-st .pt{display:none}.pkcards.list .pk-body>.pk-tags .pk-st,.pkcards.list .pk-body>.pk-tags .pk-st+.pk-st{letter-spacing:.04em;padding:0 6px}}
@media (max-width:1100px){
  .pkcards.list .pk-meta{flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:0;overflow:hidden;white-space:nowrap;height:20px;line-height:20px}
  .pkcards.list .pk-meta>*{flex:0 1 auto;min-width:0}
  .pkcards.list .pk-meta>.lo{flex:0 1 auto;max-width:55%;min-width:4em}   /* recipients get at most half the line, cut with …, so the separator after them always has text before it */
  .pkcards.list .pk-meta>.lo{flex-shrink:4}.pkcards.list .pk-meta>.lo+*{flex-shrink:1}
  .pkcards.list .pk-meta>*+*::before{content:"·";margin:0 .45em}
  .pkcards.list .pk-meta>:empty{display:none}
  .pkcards.list .pk-meta>:empty+*::before{content:none}
}
/* the hover bubbles of the header pictograms are invisible until hover, but still counted for the page width:
   in a very narrow desktop window they made the page scroll sideways by a few pixels */
.atop,.band{overflow-x:clip}
/* light look: the pills in the text column of the list sit on white, so they need darker lines and text */
.light .pkcards.list .pk-body>.pk-tags .pk-st{border-color:var(--l-accent);color:var(--l-accent)}
.light .pkcards.list .pk-body>.pk-tags .pk-st.off{border-color:var(--l-line2);color:var(--l-muted)}
.light .pkcards.list .pk-body>.pk-tags .pk-st.ch{border-color:#B25E00;color:#B25E00}
.light .pkcards.list .pk-body>.pk-tags .pk-st.ok{border-color:#178A5B;color:#178A5B}
.light .pkcards.list .pk-body>.pk-tags .pk-st.bad{border-color:#C8325A;color:#C8325A}
/* one red for everything that deletes: the bin has the same colour as the warning triangle of "Fehler melden" (dark #F2668B, light #C8325A) */
:root{--gh-bin:#F2668B}body.light{--gh-bin:#C8325A}
.sbtn.danger,.btn-ghost.danger,.sbtn.icb.danger,.picb.del,.vround.vdel{color:var(--gh-bin);border-color:var(--gh-bin)}
.sbtn.danger:hover,.btn-ghost.danger:hover,.sbtn.icb.danger:hover,.sbtn.danger:focus-visible,.sbtn.icb.danger:focus-visible,.picb.del:hover,.vround.vdel:hover{background:rgba(242,102,139,.16);border-color:var(--gh-bin);color:var(--gh-bin)}
.linkbtn.danger,.xitem.danger,.popt.danger,.rmenu .danger,.ib.danger{color:var(--gh-bin)}
.utile .ux,.round.rm,#newrv .qrow .qdel{color:var(--gh-bin);box-shadow:inset 0 0 0 1.5px var(--gh-bin);border-color:transparent}
/* filter pills -> tiles/list: the same 48 px as storage card -> search on Projekte (parents differ: Select .amain gap 26, Transfer/Review .stack16 gap 16) */
.pkbar+.pkcards{margin-top:32px}
.amain>.pkbar+.pkcards{margin-top:22px}
/* phone: the head pictograms sit on their own line, with the same space above (to the title) and below (to the next block): 24 px */
@media (max-width:600px){
  .phead{row-gap:24px;margin-bottom:-2px}
  .band .trow:has(>.pk-acts.pacts){row-gap:24px}
  .band:has(.trow>.pk-acts.pacts){padding-bottom:16px}
  /* pictograms always end at the right edge (like on the desktop), on their own line under the title, in every tool */
  .band .trow>.pk-acts.pacts,.phead>.phact{margin-left:auto!important;justify-content:flex-end!important;flex-basis:100%}
  .pk-acts.ftools{margin-left:auto!important;justify-content:flex-end!important}
  /* folder title and its pictograms on one line: the title column takes the rest and wraps itself, the pictograms sit at the height of the title */
  .fhead{flex-wrap:nowrap!important;align-items:flex-end!important;gap:12px}.fhead>.stack6{flex:1 1 auto;min-width:0}.fhead>.stack6 h2,.fhead>.stack6 .h-sec{overflow-wrap:anywhere}
}

/* admin drop zones: "Dateien auswählen", "Ordner auswählen", "Aus Transfer übernehmen" as round pictograms, name on hover (hub.js) */
.dropbtns{gap:12px}
.dropbtns>.btn-ghost{font-size:0;width:44px;height:44px;min-height:0;padding:0;border-radius:50%;justify-content:center;gap:0}
.dropbtns>.btn-ghost .ic{width:20px;height:20px;margin:0}
/* round pictogram buttons: the icon has no side margin (a text button's icon keeps its gap to the text), so it sits in the middle */
.icb>.ic,.icb>svg{margin:0!important}
/* admin drop zones: the explanation is the hover name of the zone */
.drop.dtip .dhint{display:none}
.esf{display:inline;min-width:0}.esf>.esdot{margin-left:10px}
.esf{overflow-wrap:break-word}
/* tablet: search and the new button(s) in equal columns, the four filter pills in four equal columns, storage / sort / view as one justified line */
@media (min-width:601px) and (max-width:1100px){
  .tact2,.amain > .row.between > .row.gap10{display:grid!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:12px;width:100%;flex:1 1 100%}
  .tact2 > .search,.amain > .row.between > .row.gap10 > .search{width:100%!important;max-width:none!important;min-width:0}
  .tact2 > .btn,.amain > .row.between > .row.gap10 > .btn{min-width:0;width:100%;justify-content:center;text-align:center;white-space:nowrap;margin:0}
  .pkbar{display:flex;flex-direction:column;align-items:stretch;gap:20px}
  .pkbar .chips{display:grid!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px}
  .pkbar .fchip{width:100%;justify-content:center;padding:0 8px;white-space:nowrap;min-width:0}
  .pkright{display:flex!important;flex-wrap:nowrap;justify-content:flex-start;gap:14px;width:100%}.pkright>.pksort{margin-left:auto}   /* storage left, sort right beside the view switch */
}
@media (min-width:601px) and (max-width:780px){.pkbar .fchip{font-size:13px;padding:0 4px;letter-spacing:0}}
/* phone: storage, sort and view in one line; the storage figure breaks into two short lines ("Belegt: 39 MB" / "von 21,9 GB") */
@media (max-width:600px){
  .pkright{grid-template-columns:minmax(0,1fr) auto auto!important;gap:8px!important}
  .pkright > span:first-child{grid-column:auto!important;font-size:12px;line-height:1.35}
  .pkright > span:first-child #used{display:block}
  .pkright .pksort select{width:auto;max-width:168px;padding-left:14px;padding-right:34px;font-size:14px}
}
/* very small phones (under 375 px): no room for all three, the storage figure goes back above */
@media (max-width:374px){.pkright{grid-template-columns:minmax(0,1fr) auto!important}.pkright > span:first-child{grid-column:1/-1!important}.pkright > span:first-child #used{display:inline}.pkright .pksort select{max-width:none;width:100%}}
/* Select: the same space from the new button to the filter pills as in Review and Transfer */
.amain>.row.between+.pkbar{margin-top:12px}
.vgrid .vpw{grid-column:span 2;align-self:end;min-height:var(--h-in,44px);align-items:center}
@media (max-width:980px){.vgrid .vpw{grid-column:auto}}
/* Safari draws the digits of an empty date field at about 66 % of the colour it is given (measured: #757575 came out #4D4D4D,
   #57525E came out #39363D), the slashes at full colour: give the digits colour / 0.657 so both come out like the outline (#4C4556) */
@supports (hanging-punctuation:first) and (-webkit-appearance:none){   /* only Safari knows hanging-punctuation */
  input[type=date].is-empty::-webkit-datetime-edit-month-field,input[type=date].is-empty::-webkit-datetime-edit-day-field,input[type=date].is-empty::-webkit-datetime-edit-year-field{color:#746983}
}
/* phone: language box and password pill on one line */
@media (min-width:372px) and (max-width:479px){
  .vgrid{grid-template-columns:auto minmax(0,1fr)!important;column-gap:10px}
  .vgrid .s3{grid-column:1/-1}
  .vgrid #vlg{width:124px;min-width:0}
  .vgrid .vpw{grid-column:2!important}
  .vgrid .vpw .tchip{white-space:nowrap}
}
/* from 480 px up to the desktop layout: language box and password pill in two equal columns, the pill as wide as its column */
@media (min-width:480px) and (max-width:980px){
  .vgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .vgrid .s3{grid-column:1/-1}
  .vgrid .vpw{grid-column:2!important}
  .vgrid .vpw .tchip{width:100%;justify-content:center;min-height:var(--h-in,44px)}
}

/* --- 31.10. version 1.0.1 --- */
/* Ruddy: pairs like "Fi", "Ri" without the font's far too wide kerning (set by nk.js) */
.nk{font-kerning:none}
/* phones: fields with 16 px text, otherwise iOS zooms in when a field is tapped */
@media (max-width:600px){input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),select,textarea{font-size:16px!important}}

/* Versenden (Neu pages): An | Sprache, below Nachricht | Passwort per 2. Mail */
.vgrid2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"to to lg" "msg msg pw";gap:12px 24px;align-items:start}
.vgrid2 .a-to{grid-area:to}.vgrid2 .a-lg{grid-area:lg}.vgrid2 .a-msg{grid-area:msg}.vgrid2 .a-pw{grid-area:pw}
.egroup .vgrid2 .fld textarea{width:100%;box-sizing:border-box;min-height:64px;font-size:14px;padding:10px 12px;resize:vertical}
.vgrid2 .a-pw .flab{visibility:hidden}
.vgrid2 .a-pw .tchip{align-self:flex-start;white-space:nowrap}
.egroup .vgrid2 .a-pw label.tchip{font-size:13px;font-weight:400;color:inherit}
@media (max-width:980px){
  .vgrid2{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"to to" "msg msg" "lg pw";column-gap:12px}
  .vgrid2 #vlg,.vgrid2 #vplg{width:140px;min-width:0}
  .vgrid2 .a-pw .flab{display:none}
  .vgrid2 .a-pw{align-self:end}
  .vgrid2 .a-pw .tchip{min-height:var(--h-in,44px)}
}