/*
Theme Name: Harmony Mitarbeiterportal
Author: Harmony GmbH
Description: Internes Mitarbeiterportal für Harmony GmbH.
Version: 1.4.4
*/
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,Arial,sans-serif;background:#f4f7fb;color:#17324d}body{overflow-x:hidden}.hp-shell{min-height:100vh;display:flex}.hp-sidebar{position:fixed;inset:0 auto 0 0;width:270px;background:#123d6b;color:#fff;display:flex;flex-direction:column;padding:22px 16px;z-index:1000}.hp-brand{display:flex;gap:12px;align-items:center;padding:0 6px 22px;border-bottom:1px solid #ffffff22}.hp-logo{width:44px;height:44px;border-radius:12px;background:#fff;color:#123d6b;display:grid;place-items:center;font-weight:900;font-size:24px}.hp-brand strong{font-size:21px;display:block}.hp-brand span{display:block;color:#c9d8e8;font-size:13px;margin-top:2px}.hp-nav{padding:20px 0;display:flex;flex-direction:column;gap:6px;overflow:auto}.hp-nav a{color:#eaf3fb;text-decoration:none;padding:12px 13px;border-radius:9px;font-weight:600;font-size:14px}.hp-nav a:hover,.hp-nav a.active{background:#315d8c;color:#fff}.hp-company{margin-top:auto;border-top:1px solid #ffffff22;padding:18px 8px 4px}.hp-company small,.hp-company strong{display:block}.hp-company small{color:#bdd0e3;margin-bottom:5px}.hp-main{width:calc(100% - 270px);margin-left:270px;min-height:100vh}.hp-topbar{height:74px;background:#fff;border-bottom:1px solid #dde5ed;display:flex;align-items:center;justify-content:space-between;padding:0 32px;position:sticky;top:0;z-index:100}.hp-date{color:#65788c;font-size:14px}.hp-user{display:flex;align-items:center;gap:10px}.hp-user>div{display:flex;flex-direction:column}.hp-user small{color:#73869a}.hp-user a{margin-left:12px;text-decoration:none;color:#123d6b;font-weight:700}.hp-avatar{width:38px;height:38px;border-radius:50%;background:#edf4fb;display:grid;place-items:center;font-weight:800}.hp-menu{display:none;border:0;background:#123d6b;color:#fff;border-radius:8px;padding:8px 11px;font-size:20px}.hp-content{padding:30px 36px 50px;width:100%;max-width:1600px;margin:0 auto}.hp-content .hmd{max-width:none!important;width:100%}.hp-content .hmd-nav{display:none!important}.hp-content .hmd-card{border-radius:14px!important;box-shadow:0 5px 20px #163b5d12!important;border:1px solid #e4eaf0}.hp-content .hmd-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important}.hp-content .hmd-stat{min-height:105px;border:1px solid #e2e9f0;background:#f8fafc!important}.hp-content table{display:table;width:100%!important}.hp-content input,.hp-content select,.hp-content textarea{border:1px solid #cfd9e3;border-radius:7px;min-height:38px}.hp-content .button,.hp-content input[type=submit]{border-radius:7px}.hp-alert{background:#fff;padding:28px;border-radius:14px}.hp-login{min-height:100vh;display:grid;place-items:center;padding:20px;background:#eef3f8}.hp-login-card{width:min(440px,100%);background:#fff;padding:35px;border-radius:18px;box-shadow:0 12px 35px #123d6b22}.hp-login-card .hp-logo{margin-bottom:18px}.hp-login-card input[type=text],.hp-login-card input[type=password]{width:100%;padding:11px;border:1px solid #ccd8e3;border-radius:8px}.hp-login-card input[type=submit]{background:#123d6b;color:#fff;border:0;padding:11px 18px;border-radius:8px;font-weight:700}@media(max-width:1000px){.hp-sidebar{transform:translateX(-100%);transition:.2s}.hp-sidebar.open{transform:translateX(0)}.hp-main{width:100%;margin-left:0}.hp-menu{display:block}.hp-topbar{padding:0 18px}.hp-content{padding:22px 18px}.hp-date{display:none}}@media(max-width:650px){.hp-user>div{display:none}.hp-user a{font-size:13px}.hp-content{padding:15px 10px}.hp-content .hmd-card{padding:15px!important;overflow-x:auto}.hp-content .hmd-grid{grid-template-columns:1fr!important}.hp-content table{min-width:620px}}


/* v1.1.1 – echtes Desktop-Widescreen-Layout */
@media (min-width:1001px){
  html,body{width:100%!important;max-width:none!important;}
  .hp-shell{display:block!important;width:100%!important;max-width:none!important;min-height:100vh!important;}
  .hp-sidebar{width:235px!important;left:0!important;right:auto!important;}
  .hp-main{position:relative!important;margin-left:235px!important;width:calc(100vw - 235px)!important;max-width:none!important;min-width:0!important;}
  .hp-topbar{width:100%!important;max-width:none!important;padding:0 38px!important;}
  .hp-content{display:block!important;width:100%!important;max-width:none!important;margin:0!important;padding:32px 40px 55px!important;}
  .hp-content>.hmd{display:block!important;width:100%!important;max-width:none!important;margin:0!important;}
  .hp-content .hmd-card{width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important;}
  .hp-content .hmd-grid{width:100%!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;}
  .hp-content form{max-width:none!important;}
  .hp-content table{width:100%!important;max-width:none!important;}
}
@media (min-width:1400px){
  .hp-content{padding-left:48px!important;padding-right:48px!important;}
}


/* === Harmony Mobile/Tablet Optimierung === */
@media (max-width: 1024px) {
  .hp-sidebar{
    position:fixed !important;
    top:0; left:0; bottom:0;
    width:270px !important;
    max-width:86vw;
    transform:translateX(-105%);
    transition:transform .25s ease;
    z-index:10000;
    box-shadow:8px 0 30px rgba(0,0,0,.18);
    overflow-y:auto;
  }
  .hp-sidebar.open{transform:translateX(0)}
  .hp-main{margin-left:0 !important;width:100% !important;min-width:0}
  .hp-topbar{
    min-height:68px;
    padding:10px 18px !important;
    gap:12px;
    position:sticky;
    top:0;
    z-index:9000;
  }
  .hp-menu{
    display:flex !important;
    align-items:center;
    justify-content:center;
    flex:0 0 44px;
    width:44px;height:44px;
    border:0;border-radius:10px;
    font-size:24px;cursor:pointer;
  }
  .hp-content{padding:20px !important;max-width:none !important;width:100% !important}
  .hp-user{margin-left:auto}
  .hp-user small{display:block}
  .hmd,.hpb{width:100% !important;max-width:none !important}
  .hmd-grid,.hpb-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .hmd-card,.hpb-card{min-width:0}
  .hmd-card table,.hpb-card table{min-width:700px}
  .hmd-card:has(table),.hpb-card:has(table){overflow-x:auto;-webkit-overflow-scrolling:touch}
  input,select,textarea,button,.button{max-width:100%;box-sizing:border-box}
}

@media (max-width: 680px) {
  html,body{overflow-x:hidden}
  .hp-topbar{padding:8px 12px !important;min-height:62px}
  .hp-date{display:none}
  .hp-user{gap:8px}
  .hp-user .hp-avatar{width:38px;height:38px;flex:0 0 38px}
  .hp-user div{max-width:120px}
  .hp-user strong,.hp-user small{
    display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
  }
  .hp-user a{font-size:0}
  .hp-user a:after{content:"↪";font-size:24px}
  .hp-content{padding:12px !important}
  .hmd-grid,.hpb-grid{grid-template-columns:1fr !important}
  .hmd-card,.hpb-card{
    padding:18px !important;
    border-radius:14px !important;
    margin-bottom:12px !important;
  }
  .hmd-card h1,.hpb-card h1{font-size:24px}
  .hmd-card h2,.hpb-card h2{font-size:20px}
  .hmd-card h3,.hpb-card h3{font-size:18px}
  .hmd-card form,.hpb-card form{width:100%}
  .hmd-card input:not([type="checkbox"]):not([type="radio"]),
  .hmd-card select,.hmd-card textarea,
  .hpb-card input:not([type="checkbox"]):not([type="radio"]),
  .hpb-card select,.hpb-card textarea{
    width:100% !important;
    min-height:46px;
    font-size:16px !important;
    margin:5px 0 12px;
  }
  .hmd-card input[type="file"],.hpb-card input[type="file"]{
    min-height:auto;padding:12px 0;
  }
  .hmd-card button,.hmd-card .button,.hmd-card input[type="submit"],
  .hpb-card button,.hpb-card .button,.hpb-card input[type="submit"]{
    min-height:46px;
    width:100%;
    margin:5px 0;
    white-space:normal;
  }
  .hmd-card table,.hpb-card table{
    min-width:640px;
    font-size:14px;
  }
  .hmd-card th,.hmd-card td,.hpb-card th,.hpb-card td{padding:10px !important}
  .hp-nav a{min-height:46px;display:flex;align-items:center}
  .hp-brand{position:sticky;top:0;z-index:2}
}

@media (min-width: 1025px) {
  .hp-menu{display:none !important}
}


/* === Alltagsbetreuung Harmony – Logo Design Variante 1 === */
:root{
 --harmony-gold:#c88b43;
 --harmony-gold-dark:#a96d2f;
 --harmony-gold-light:#e8c89f;
 --harmony-cream:#fbf7f0;
 --harmony-charcoal:#20201f;
 --harmony-charcoal-2:#292826;
 --harmony-text:#252728;
}
body{background:#f7f4ef!important;color:var(--harmony-text)}
.hp-sidebar{
 background:linear-gradient(180deg,#1d1e1e 0%,#252422 100%)!important;
 border-right:1px solid #3c342b!important;
}
.hp-brand{
 min-height:150px!important;
 padding:18px 14px 16px!important;
 justify-content:center!important;
 border-bottom:1px solid rgba(200,139,67,.24)!important;
}
.hp-brand-logo{width:132px;height:132px;display:flex;align-items:center;justify-content:center;margin:auto}
.hp-brand-logo img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(0,0,0,.22))}
.hp-nav{padding-top:15px!important}
.hp-nav a{
 color:#f5eee5!important;
 border-radius:11px!important;
 margin:4px 10px!important;
 transition:.18s ease!important;
}
.hp-nav a:hover{background:rgba(200,139,67,.13)!important;color:#fff!important}
.hp-nav a.active{
 background:linear-gradient(135deg,#d09a59,#ae7335)!important;
 color:#fff!important;
 box-shadow:0 8px 18px rgba(147,91,35,.25)!important;
}
.hp-company{
 border-top:1px solid rgba(200,139,67,.3)!important;
 color:#f5eee5!important;
}
.hp-company small{color:#d7b386!important}
.hp-topbar{
 background:#fffdfa!important;
 border-bottom:1px solid #eee3d5!important;
 box-shadow:0 2px 12px rgba(67,48,29,.04)!important;
}
.hp-avatar{
 background:#f1dfc6!important;
 color:#9b642c!important;
}
.hp-user a{color:#a86e31!important}
.hp-content{background:#f7f4ef!important}
.hmd-card{
 background:#fffdfa!important;
 border-color:#eadfd2!important;
 box-shadow:0 8px 25px rgba(66,45,24,.055)!important;
}
.hmd-card h1,.hmd-card h2,.hmd-card h3{color:#262626!important}
.hmd button,.hmd .button,.hmd input[type=submit]{
 background:linear-gradient(135deg,#c9914e,#ad7132)!important;
 border-color:#ad7132!important;
 color:#fff!important;
 box-shadow:0 6px 14px rgba(163,102,43,.15)!important;
}
.hmd button:hover,.hmd .button:hover,.hmd input[type=submit]:hover{
 background:linear-gradient(135deg,#b77c38,#986027)!important;
}
.hmd input,.hmd select,.hmd textarea{
 border-color:#ddcdbb!important;
 background:#fff!important;
}
.hmd input:focus,.hmd select:focus,.hmd textarea:focus{
 border-color:#c58b48!important;
 box-shadow:0 0 0 3px rgba(197,139,72,.12)!important;
}
.hmd table{border-color:#eadfd2!important}
.hmd th{background:#f7efe5!important;color:#77522f!important}
.hmd tr:hover td{background:#fffbf6!important}
.hmd-ok{background:#f1f7ef!important;border-color:#bdd3b8!important}
.hmd-warn{background:#fff5e8!important;border-color:#e6c08e!important}
.hp-login{background:linear-gradient(145deg,#1d1e1e,#342b22)!important}
.hp-login-card{background:#fffdfa!important;border:1px solid #ead7bf!important}
.hp-login-logo{width:150px;height:150px;object-fit:contain;margin:0 auto 16px;display:block}
@media(max-width:1024px){
 .hp-brand{min-height:145px!important}
 .hp-brand-logo{width:120px;height:120px}
}
@media(max-width:680px){
 .hp-sidebar{width:285px!important}
 .hp-brand{min-height:130px!important;padding:12px!important}
 .hp-brand-logo{width:108px;height:108px}
 .hp-content{background:#f8f5f0!important}
 .hmd-card{border-radius:15px!important}
}

/* Adminbar ist im Frontend deaktiviert */
html{margin-top:0!important}body.admin-bar{margin-top:0!important}.admin-bar .hp-sidebar{top:0!important}

/* Selbstregistrierung */
.hp-login-card{width:min(430px,calc(100vw - 28px))!important}
.hp-login-divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:#8a7a68;font-size:12px}
.hp-login-divider:before,.hp-login-divider:after{content:"";height:1px;background:#e4d8ca;flex:1}
.hp-register-toggle{width:100%;min-height:44px;border:1px solid #c88b43;background:#fffaf4;color:#8f5927;border-radius:10px;font-weight:700;cursor:pointer}
.hp-register-form{display:none;margin-top:16px;padding-top:16px;border-top:1px solid #eadfd2}
.hp-register-form.is-open{display:block}
.hp-register-form label{display:block;margin:0 0 11px;font-size:13px;font-weight:650;color:#44372d}
.hp-register-form input,.hp-register-form select{display:block;width:100%;min-height:43px;margin-top:5px;border:1px solid #ddcdbb;border-radius:9px;padding:9px 11px;background:#fff;font-size:16px;box-sizing:border-box}
.hp-register-form button[type=submit]{width:100%;min-height:45px;margin-top:5px;border:0;border-radius:10px;background:linear-gradient(135deg,#c9914e,#ad7132);color:#fff;font-weight:750;cursor:pointer}
.hp-reg-success,.hp-reg-error{padding:11px 12px;border-radius:9px;margin:12px 0;font-size:13px;line-height:1.4}
.hp-reg-success{background:#edf7ec;border:1px solid #bdd8b9;color:#315d2d}
.hp-reg-error{background:#fff0ed;border:1px solid #e7c0b9;color:#8a382d}

/* === v1.4.2 – Responsive Feinschliff Smartphone & Tablet === */
@media (max-width:1024px){
  body.hp-menu-open{overflow:hidden!important}
  .hp-shell{display:block!important;width:100%!important;min-width:0!important}
  .hp-main{width:100%!important;max-width:100%!important;margin-left:0!important;overflow:hidden}
  .hp-sidebar{height:100dvh!important;max-height:100dvh!important}
  .hp-topbar{width:100%!important;height:auto!important;min-height:64px!important}
  .hp-content{width:100%!important;min-width:0!important;overflow:hidden}
  .hp-content .hmd-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
  .hp-content .hmd-card{min-width:0!important;max-width:100%!important}
  .hp-content img{max-width:100%!important;height:auto!important}
  .hp-content form{width:100%!important;max-width:100%!important}
  .hp-content input,.hp-content select,.hp-content textarea{max-width:100%!important}
  .hp-table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

@media (min-width:681px) and (max-width:1024px){
  .hp-content{padding:22px 20px 36px!important}
  .hp-sidebar{width:300px!important;max-width:72vw!important}
  .hp-user>div{display:flex!important}
  .hp-user a{font-size:14px!important}
}

@media (max-width:680px){
  .hp-topbar{gap:8px!important;padding:8px 10px!important}
  .hp-menu{width:42px!important;height:42px!important;flex-basis:42px!important}
  .hp-user{min-width:0!important;gap:7px!important}
  .hp-user>div{display:none!important}
  .hp-user a{margin-left:2px!important;min-width:38px;height:38px;display:grid;place-items:center;border-radius:9px;background:#f7efe5;font-size:0!important}
  .hp-user a:after{content:"↪";font-size:21px;color:#a86e31}
  .hp-content{padding:12px 10px 28px!important}
  .hp-content .hmd-grid{grid-template-columns:minmax(0,1fr)!important;gap:11px!important}
  .hp-content .hmd-card{padding:14px!important;margin-bottom:10px!important;overflow:visible!important}
  .hp-content .hmd-stat{min-height:auto!important}
  .hp-content h1{font-size:clamp(22px,7vw,28px)!important;line-height:1.15!important}
  .hp-content h2{font-size:20px!important;line-height:1.2!important}
  .hp-content h3{font-size:17px!important;line-height:1.25!important}
  .hp-content p,.hp-content label,.hp-content td,.hp-content th{overflow-wrap:anywhere}
  .hp-content input:not([type=checkbox]):not([type=radio]),
  .hp-content select,.hp-content textarea{width:100%!important;min-width:0!important;font-size:16px!important}
  .hp-content button,.hp-content .button,.hp-content input[type=submit]{max-width:100%!important;white-space:normal!important}
  .hp-sidebar{width:min(300px,88vw)!important;max-width:88vw!important}
  .hp-brand{min-height:118px!important}
  .hp-brand-logo{width:96px!important;height:96px!important}
  .hp-login{padding:14px!important;align-items:center}
  .hp-login-card{padding:24px 18px!important;border-radius:15px!important}
  .hp-login-logo{width:120px!important;height:120px!important}
  .hp-login-card h1{font-size:25px!important;line-height:1.15}
}


/* === v1.4.3 – finale Mobile/Tablet-Kompatibilität === */
@media (max-width:1024px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  .hp-shell,.hp-main,.hp-content,.hp-content>.hmd{width:100%!important;max-width:100%!important;min-width:0!important}
  .hp-main{margin-left:0!important}
  .hp-sidebar{position:fixed!important;inset:0 auto 0 0!important;width:min(300px,88vw)!important;max-width:88vw!important;height:100dvh!important;transform:translateX(-105%);transition:transform .25s ease;z-index:10000!important;overflow-y:auto}
  .hp-sidebar.open{transform:translateX(0)!important}
  .hp-topbar{min-height:64px!important;height:auto!important;padding:9px 16px!important;gap:10px!important}
  .hp-menu{display:flex!important;align-items:center;justify-content:center;width:44px!important;height:44px!important;flex:0 0 44px!important}
  .hp-content{padding:20px!important;overflow:hidden}
  .hp-content .hmd-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
  .hp-content .hmd-card{min-width:0!important;max-width:100%!important}
  .hp-content img{max-width:100%!important;height:auto!important}
  .hp-content form{width:100%!important;max-width:100%!important}
  .hp-content input,.hp-content select,.hp-content textarea{max-width:100%!important}
  .hp-table-scroll{width:100%!important;max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  .hp-table-scroll table{min-width:700px!important}
}
@media (min-width:681px) and (max-width:1024px){
  .hp-content{padding:22px 20px 36px!important}
  .hp-sidebar{width:min(300px,72vw)!important}
  .hp-user>div{display:flex!important}
}
@media (max-width:680px){
  .hp-topbar{padding:8px 10px!important}
  .hp-date{display:none!important}
  .hp-user{min-width:0!important;gap:7px!important;margin-left:auto}
  .hp-user>div{display:none!important}
  .hp-user a{margin-left:2px!important;min-width:38px;height:38px;display:grid;place-items:center;border-radius:9px;background:#f7efe5;font-size:0!important}
  .hp-user a:after{content:"↪";font-size:21px;color:#a86e31}
  .hp-content{padding:12px 10px 28px!important}
  .hp-content .hmd-grid{grid-template-columns:minmax(0,1fr)!important;gap:11px!important}
  .hp-content .hmd-card{padding:14px!important;margin-bottom:10px!important;overflow:visible!important}
  .hp-content h1{font-size:clamp(22px,7vw,28px)!important;line-height:1.15!important}
  .hp-content h2{font-size:20px!important;line-height:1.2!important}
  .hp-content h3{font-size:17px!important;line-height:1.25!important}
  .hp-content p,.hp-content label,.hp-content td,.hp-content th{overflow-wrap:anywhere}
  .hp-content input:not([type=checkbox]):not([type=radio]),.hp-content select,.hp-content textarea{width:100%!important;min-width:0!important;font-size:16px!important}
  .hp-content button,.hp-content .button,.hp-content input[type=submit]{max-width:100%!important;white-space:normal!important}
  .hp-table-scroll table{min-width:620px!important}
  .hp-brand{min-height:118px!important}
  .hp-brand-logo{width:96px!important;height:96px!important}
  .hp-login{padding:14px!important}
  .hp-login-card{width:min(430px,calc(100vw - 28px))!important;padding:24px 18px!important;border-radius:15px!important}
  .hp-login-logo{width:120px!important;height:120px!important}
}

/* Dedicated mobile employee status page */
.hp-status-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px;background:#f4f7fb}.hp-status-page-inner{width:100%;max-width:620px}