:root{
  /* ---- NJoy Hair & Make-up color code (see FarbenCode.pdf) ------------
     white background, black typography, neutral greys for structure,
     one restrained Champagne accent (~90% white / 8% black+grey / 2% champagne) */
  --white:#FFFFFF;         /* Clean White     — primary background */
  --black:#111111;         /* Soft Black      — primary text, main CTA */
  --porcelain:#F8F6F3;     /* Warm Porcelain  — soft sections, cards */
  --graphite:#6F7478;      /* Soft Graphite   — muted / secondary text */
  --silver:#D8D8D6;        /* Elegant Silver  — dividers, borders, table lines */
  --champagne:#D8C7B3;     /* Soft Champagne  — the ONLY accent (buttons, selected) */
  --champagne-t:rgba(216,199,179,.40); /* champagne tint for fills/badges */
  --ice:#E3F0F5;           /* Pale Ice Blue   — optional, rare small badges only */

  /* role mapping (old variable names kept so existing rules resolve) */
  --teal:#111111;          /* legacy heading/link color → Soft Black */
  --bg:#FFFFFF;
  --bg-alt:#F8F6F3;
  --sage:#EDE5DA;          /* light champagne tint — badges */
  --surface:#fff;

  --ink:#111111;
  --muted:#6F7478;
  --faint:#A7ABAE;
  --line:#D8D8D6;

  /* semantic (functional colors only — not brand accents) */
  --green-d:#D8C7B3;       /* drives the input focus ring → champagne */
  --warn:#8a5a00; --warn-bg:#F3E7CB;
  --danger:#b0483c; --danger-line:rgba(176,72,60,.35); --danger-bg:#FBF1EF;
  --ok:#4C7A5F;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.5 Arial,Helvetica,"Liberation Sans",sans-serif}
a{color:var(--black);text-decoration:none}
a:hover{color:var(--graphite);text-decoration:underline}
.mono{font-family:ui-monospace,"SF Mono",Menlo,monospace}
.small{font-size:.85em}
.right{text-align:right}
.nowrap{white-space:nowrap}
.absblock .btn.small{padding:.1rem .45rem;line-height:1;font-size:.9em}
.halfday{display:inline-flex;align-items:center;gap:.35rem;margin-top:.45rem;font-size:.85em;font-weight:600;color:var(--muted);cursor:pointer}
.halfday input{margin:0}
.workinghours .wh-row{display:flex;align-items:flex-start;gap:1.4rem;flex-wrap:wrap}
.workinghours .wh-col{display:flex;flex-direction:column;gap:.35rem}
.workinghours .wh-col input[type=number]{width:6rem}
.termsval{padding:.5rem 0;font-weight:600}
.daycheck input:disabled{cursor:default}
.daychecks{display:flex;gap:.65rem;flex-wrap:wrap;padding-top:.15rem}
.daycheck{display:flex;align-items:center;gap:.25rem;font-size:.82em;font-weight:600;color:var(--ink);cursor:pointer;white-space:nowrap}
.daycheck input{margin:0}

/* top bar — white NJoy header, black type, silver hairline */
.topbar{display:flex;align-items:center;gap:1.5rem;background:var(--white);
  border-bottom:1px solid var(--silver);padding:.7rem 1.3rem;position:sticky;top:0;z-index:10}
.brand{display:inline-flex;align-items:center;font-weight:700;color:#000}
.brand-logo{height:22px;width:auto;display:block}
.toolname{color:#000;font-weight:600;font-size:.95rem;
  padding-left:.9rem;margin-left:-.3rem;border-left:1px solid rgba(0,0,0,.18)}
.topbar nav{display:flex;gap:1.1rem;margin-right:auto}
.topbar nav a{color:rgba(0,0,0,.6);font-weight:500}
.topbar nav a:hover{color:#000;text-decoration:none}
.userbox{display:flex;align-items:center;gap:.8rem;font-size:.9em}
.navbadge{display:inline-block;min-width:1.15rem;padding:0 .3rem;border-radius:10px;
  background:#D32F2F;color:#fff;font-size:.72rem;font-weight:700;text-align:center;
  line-height:1.15rem;vertical-align:middle}
.langswitch{display:inline-flex;gap:.25rem;align-items:center;font-size:.85em}
.langswitch a{color:var(--faint);font-weight:600}
.langswitch a.on{color:var(--black)}
.userbox a{color:#000}
.logout{color:rgba(0,0,0,.55)!important}

main{max-width:1080px;margin:0 auto;padding:1.6rem 1.3rem 4rem}
main.centered{display:flex;justify-content:center;padding-top:8vh}

.pagehead{display:flex;align-items:center;margin-bottom:1.2rem;gap:1rem}
.header-logo{height:26px;width:auto;flex-shrink:0}
.pagehead h1{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.headactions{display:flex;align-items:center;gap:.55rem;flex-shrink:0;margin-left:auto}
.headactions .btn{display:inline-flex;align-items:center;justify-content:center;height:36px;padding-top:0;padding-bottom:0}
.btn.nav-arrow{padding:0 .7rem;font-size:1.15rem;line-height:1;font-weight:700}
.btn.disabled{opacity:.35;pointer-events:none}
h1{font-size:1.5rem;margin:0;color:var(--teal)}

/* buttons + pills — neutral family, hover = solid black CTA */
.btn{display:inline-block;background:var(--porcelain);border:1px solid var(--silver);
  border-radius:8px;padding:.5rem .9rem;font:inherit;font-weight:600;color:var(--black);cursor:pointer;
  transition:background .13s ease,color .13s ease,border-color .13s ease}
.btn:hover{background:var(--black);border-color:var(--black);color:#fff;text-decoration:none}
/* primary = the one Champagne accent */
.btn.primary{background:var(--champagne);color:var(--black);border-color:var(--champagne)}
.btn.primary:hover{background:var(--black);border-color:var(--black);color:#fff}
/* ghost = the quiet member of the family (used for cancel / row icons) */
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--black);border-color:var(--black);color:#fff}
/* destructive keeps the same fill-on-hover behaviour but in red for safety */
.btn.danger-btn{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-line)}
.btn.danger-btn:hover{background:var(--danger);border-color:var(--danger);color:#fff}
.btn.danger-btn.small{padding:.1rem .45rem;line-height:1}
@media(prefers-reduced-motion:reduce){.btn{transition:none}}
.pill{display:inline-block;padding:.1em .55em;border-radius:6px;background:var(--porcelain);
  font-size:.78em;font-weight:600;color:var(--muted)}
.pill.ok{background:var(--champagne-t);color:var(--black)}
.pill.status-approved{background:var(--champagne-t);color:var(--black)}
.pill.status-denied{background:var(--danger-bg);color:var(--danger)}
.pill.status-pending{background:var(--bg-alt);color:var(--muted)}
.pill.status-cancelled{background:#F0EEEB;color:var(--faint)}
.role{padding:.1em .5em;border-radius:5px;font-size:.75em;font-weight:700;text-transform:uppercase;letter-spacing:.03em;background:var(--porcelain);color:var(--graphite)}
.role-admin{background:var(--champagne);color:var(--black)}
.role-accounting{background:var(--ice);color:#3E5560}
.role-hr{background:var(--sage);color:var(--black)}
.role-supervisor{background:var(--porcelain);color:var(--graphite)}

/* flash */
.flash{padding:.7rem 1rem;border-radius:8px;margin-bottom:1rem;font-weight:500}
.flash.ok{background:var(--champagne-t);color:var(--black)}
.flash.error{background:var(--danger-bg);color:var(--danger)}
.flash.warn{background:var(--warn-bg);color:var(--warn)}

/* filters */
.filters{display:flex;gap:.6rem;margin-bottom:1rem;align-items:center}
.filters input[type=search]{flex:1}
.filters select{width:auto}
input,select,textarea,button{font:inherit}
input,select,textarea{border:1px solid var(--line);border-radius:8px;padding:.5rem .6rem;
  background:var(--surface);color:var(--ink);width:100%}
input[type=checkbox],input[type=radio]{accent-color:var(--teal)}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--green-d)}

/* table */
.tablewrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:12px}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:.6rem .8rem;border-bottom:1px solid var(--line)}
th{font-size:.75em;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
/* resizable columns */
table.resizable{table-layout:fixed}
table.resizable td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.resizable th{position:relative}
table.resizable th:nth-child(1){width:70px}
table.resizable th:nth-child(2){width:30%}
table.resizable th:nth-child(3){width:28%}
table.resizable th:nth-child(4){width:28%}
table.resizable th:nth-child(5){width:95px}
.col-resizer{position:absolute;top:0;right:0;width:7px;height:100%;cursor:col-resize;z-index:5}
.col-resizer:hover{background:var(--champagne);opacity:.8}

tbody tr{cursor:pointer}
tbody tr:hover{background:var(--bg-alt)}
tr.inactive{color:var(--muted)}
.empty{text-align:center;color:var(--muted);padding:1.5rem}
.count{color:var(--muted);font-size:.85em;margin-top:.7rem}

/* login */
.loginbox{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:2.2rem;width:340px;box-shadow:0 6px 24px rgba(17,17,17,.06)}
.loginbox h1{color:var(--teal);text-align:center;margin:0}
.login-logo{display:block;height:30px;width:auto;margin:0 auto .2rem}
.loginbox .sub{text-align:center;color:var(--muted);margin:.2rem 0 1.4rem}
.loginbox label{display:block;margin-bottom:.9rem;font-size:.85em;color:var(--muted)}
.loginbox input{margin-top:.25rem}
.loginbox button{width:100%;margin-top:.4rem}

/* big form */
.bigform fieldset,fieldset{border:1px solid var(--line);border-radius:12px;
  background:var(--surface);padding:1rem 1.2rem 1.2rem;margin-bottom:1.1rem}
legend{font-weight:700;padding:0 .4rem;color:var(--teal)}
fieldset.sensitive{border-color:var(--danger-line)}
fieldset.sensitive legend{color:var(--danger)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem 1.1rem}
@media(max-width:800px){.grid{grid-template-columns:1fr}}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem 1.1rem}
@media(max-width:800px){.grid2{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.25rem}
.field.wide{grid-column:1/-1}
.rowbreak{grid-column:1/-1;height:0;margin:0;padding:0}
.field label{font-size:.8em;color:var(--muted);font-weight:600}
.field small{color:var(--muted);font-size:.75em}
.field input[type=checkbox]{width:auto;height:1.1rem;width:1.1rem}
.stack label,.loginbox label{display:block}
.stack{display:flex;flex-direction:column;gap:.9rem}
.formactions{display:flex;gap:.8rem;margin:.5rem 0 1.5rem}

.danger{border:1px solid var(--danger-line);border-radius:12px;padding:1rem 1.2rem;background:var(--danger-bg)}
.danger h3{margin:.2rem 0 .8rem;color:var(--danger);font-size:1rem}
.danger form{margin-right:.6rem}
.newuser{margin-top:1.5rem}

/* sortable headers */
th.sortable{padding:0}
th.sortable a{display:flex;align-items:center;gap:.35rem;padding:.6rem .8rem;color:var(--muted);
  text-transform:uppercase;font-size:.85em;letter-spacing:.05em;font-weight:700;white-space:nowrap}
th.sortable a:hover{color:var(--black);text-decoration:none;background:var(--bg-alt)}
th.sortable .arrow{opacity:.3;font-size:.9em}
th.sortable.sorted a{color:var(--teal)}
th.sortable.sorted .arrow{opacity:1}

/* salary history */
.salaryhist{margin-top:1.1rem}
.salaryhist table form{margin:0}
.salaryhist .btn.small{padding:.15rem .5rem;font-size:.85em;line-height:1}
td.up{color:var(--ok);font-weight:600}
td.down{color:var(--danger);font-weight:600}
.childadd{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:.9rem;align-items:end;margin-top:1rem}
@media(max-width:800px){.childadd{grid-template-columns:1fr}}
.salaryadd{display:grid;grid-template-columns:repeat(6,1fr);gap:.9rem;align-items:end;margin-top:1rem}
.salaryadd .field.wide{grid-column:1/-1}
.salaryadd .field.salnote{grid-column:span 4}
.salaryadd .field.salsubmit{justify-self:end}
.ccy{color:var(--muted);font-size:.85em}
.yearsel{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}
.yearsel select{width:auto}
.yearsel h4{margin:0;font-size:.95rem;font-weight:600}
.absblock{margin:.4rem 0 1.3rem}
.absblock h4{margin:.2rem 0 .5rem;font-size:.95rem;font-weight:600}
.absblock h4 strong{color:var(--teal)}
.currentsal{margin:.2rem 0 1rem;font-size:1.05rem}
.currentsal strong{font-size:1.15rem;color:var(--teal)}
.muted{color:var(--muted)}
@media(max-width:800px){.salaryadd{grid-template-columns:1fr}
  .salaryadd .field.salnote{grid-column:auto}
  .salaryadd .field.salsubmit{justify-self:stretch}}

/* platform hub — tool tiles */
.hub{max-width:840px;margin:0 auto}
.hubhead{margin:.6rem 0 1.6rem}
.hubhead h1{color:var(--teal)}
.hubhead .muted{margin:.25rem 0 0}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
@media(max-width:680px){.tiles{grid-template-columns:1fr}}
.tile{display:flex;flex-direction:column;gap:.55rem;background:var(--surface);
  border:1px solid var(--line);border-radius:16px;padding:1.6rem 1.5rem;text-decoration:none;color:var(--ink);
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
.tile:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(17,17,17,.08);
  border-color:var(--champagne);text-decoration:none}
.tile-icon{width:52px;height:52px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:var(--champagne-t);color:var(--black);margin-bottom:.3rem}
.tile-icon svg{width:28px;height:28px}
.tile h2{margin:0;font-size:1.2rem;color:var(--teal)}
.tile p{margin:0;color:var(--muted);font-size:.92rem;flex:1}
.tile-cta{font-weight:700;color:var(--graphite);font-size:.92rem}
.tile:hover .tile-cta{color:var(--black)}
.tile.disabled{opacity:.6;cursor:not-allowed;box-shadow:none;transform:none}
.tile.disabled:hover{transform:none;box-shadow:none;border-color:var(--line)}
.tile.disabled .tile-cta{color:var(--muted)}
/* per-tool access controls in the users table */
.rolesel{width:auto;min-width:9rem;padding:.32rem .5rem;font-size:.9em}
.toolgrid{display:grid;grid-template-columns:auto 1fr;gap:.45rem .8rem;align-items:center;max-width:26rem}
.toolchk{display:flex;align-items:center;gap:.45rem;font-weight:600;font-size:.9em;white-space:nowrap;cursor:pointer}
.toolchk input{width:auto;height:1rem;margin:0;flex:0 0 auto}

/* Mitarbeiter-App */
.clockbox{background:var(--porcelain);border:1px solid var(--silver);border-radius:16px;
  padding:1.1rem;text-align:center;margin-bottom:1.4rem}
.clocktime{font-size:2.2rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--black)}
.clockgrid{display:flex;align-items:stretch;gap:.9rem}
.clockcol{flex:1;display:flex}
.clockcol form{width:100%;display:flex}
.clockcol .bigbtn{height:100%}
.clockmid{flex:1.3;text-align:center}
.bigbtn{width:100%;padding:1rem .5rem;font-size:1.15rem;border-radius:12px}
.btn.pausebtn{background:#F7D9DC;border-color:#EFC2C8;color:var(--black)}
.btn.pausebtn:hover{background:#E8A9B0;border-color:#E8A9B0;color:var(--black)}
.btn.resumebtn{background:#A8E6B0;border-color:#8FD69A;color:var(--black)}
.btn.resumebtn:hover{background:#7ACC88;border-color:#7ACC88;color:var(--black)}
.btn.startbtn{background:#2E9E44;border-color:#2E9E44;color:#fff}
.btn.startbtn:hover{background:#237A34;border-color:#237A34;color:#fff}
.btn.endbtn{background:#D32F2F;border-color:#D32F2F;color:#fff}
.btn.endbtn:hover{background:#A52222;border-color:#A52222;color:#fff}
.appcard-unit{font-size:.85rem;font-weight:600;color:var(--graphite)}
@media(max-width:480px){.bigbtn{font-size:1rem;padding:.85rem .3rem}}
.appmain{max-width:760px;margin:0 auto;padding:1.2rem 1rem 4rem}
.appmain.centered{display:flex;justify-content:center;padding-top:8vh}
.appcards{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:1rem}
@media(max-width:520px){.appcards{grid-template-columns:1fr 1fr}}
.appcard{background:var(--porcelain);border:1px solid var(--silver);border-radius:14px;
  padding:1rem;text-align:center}
.appcard-num{font-size:1.7rem;font-weight:700;color:var(--black)}
.appcard-label{font-size:.8rem;color:var(--graphite);margin-top:.15rem}
.appcal{table-layout:fixed}
.appcal th{text-align:center}
.appcal td.calcell{height:74px;vertical-align:top;padding:.3rem .35rem;font-size:.8rem}
.appcal .calday{font-weight:600;color:var(--graphite)}
.appcal .othermonth{opacity:.35}
.appcal .today .calday{color:#fff;background:var(--black);border-radius:50%;
  width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center}
.caltag{margin-top:.2rem;border-radius:5px;padding:.05rem .3rem;font-size:.7rem;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.caltag.ok{background:var(--champagne-t);color:var(--black)}
.caltag.pend{background:var(--bg-alt);color:var(--graphite);border:1px dashed var(--silver)}
.caltag.holiday{background:#F0EEEB;color:var(--graphite)}

/* new-tool placeholder */
.emptytool{background:var(--surface);border:1px dashed var(--line);border-radius:16px;
  padding:2.4rem 1.6rem;text-align:center;margin-top:1.2rem}
.emptytool-badge{display:inline-block;background:var(--bg-alt);color:var(--muted);font-size:.72rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:.28em .75em;border-radius:20px;margin-bottom:.6rem}
.emptytool h3{margin:.2rem 0 .45rem;color:var(--teal);font-size:1.15rem}
.emptytool p{margin:0 auto;max-width:540px;color:var(--muted)}

/* Passwort ein-/ausblenden */
.pwwrap{position:relative;display:block}
.pwwrap input{padding-right:2.4rem}
.loginbox .pwwrap{margin-top:.25rem}
.loginbox .pwwrap input{margin-top:0}
.pwwrap .pwtoggle{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);
  width:auto;margin:0;background:none;border:none;padding:.2rem;cursor:pointer;
  color:var(--graphite);display:flex;align-items:center}
.pwtoggle:hover{color:var(--black)}