/* Inhaltsverzeichnis

1. Allgemeine Einstellungen
2. Login/Logout
3. Header
3.1. Menu
4. Footer
5. Dashboard
6. Klienten
7. Artikel
8. Reinigungen
8.1. Zeiterfassung
8.2. Meine Zeiten
9. Aufträge (aktiv)
9.1. Aufträge (erledigt)
9.2. Auftrag erstellen
9.3. Auftragsstatistik
10. Objekte
11. Rechnungen
11.1. Rechnung erstellen
11.2. offene Rechnungen
11.3. fertige Rechnungen
12. Buchhaltung
12.1. Rechnungen (Monat)
12.2. Rechnungen (Jahr)
12.3. Umsatz (Monat)
12.4. Umsatz (Jahr)
13. Statistik
13.1. Statistik Kunden
14. Administration
14.1. Mitarbeiterverwaltung
14.2. Zeiterfassung Mitarbeiter (Übersicht)
14.3. Zeiterfassung Mitarbeiter
14.4. Login Staff
14.5. Login Logs
14.6. Backup

*/

/*
--------------------------------------------------------
1. Allgemeine Einstellungen
--------------------------------------------------------
*/

:root{
    --header-h: 64px;
    --footer-h: 44px;
    --brand: rgb(0,77,34);
    --content-bg: #f8f9fa;
    --scroll-pct: 0;
}

body{
    font-family: Arial, sans-serif;
    background-color: var(--content-bg);
    margin:0;
    padding:0;
}

*{ box-sizing:border-box; }
a { text-decoration: none; color: var(--brand); }

/* Tabellen */

table {
  border-collapse:collapse;
  width:100%;
  background:white;
  border-radius:6px;
  overflow:hidden;
}
.table-wrap{
  width:100%;
}
.actions{
  display:flex;
  gap:12px;
  align-items:center;
}
th,td {
  padding:12px;
  border-bottom:1px solid #ddd;
  text-align:left;
  font-size:0.825rem;
}
th {
  background-color:rgba(64,115,158,.1);
  font-weight:bold;
}
tr:hover {
  background:#f1f2f6;
}

table i {
  font-size: 1.2rem;
}

/* Button */

.add-btn{
  width:15em;
  background: var(--brand);
  color:white;
  margin-right:.5em;
  padding:8px 16px;
  border:0.5px solid var(--brand);
  border-radius:4px;
  margin-bottom:15px;
}
.add-btn:hover{
  color:var(--brand);
  background:white;
}
.action-btn{
  padding:5px 10px;
  border-radius:3px;
}
.edit{
  color:#44bd32;
}
.delete{
  color:#e84118;
}
.search-btn {
  background-color: var(--brand);
  color: white;
  padding: 0 1rem;
  border: 1px solid var(--brand) !important;
}
.search-btn:hover{
  color:var(--brand) !important;
  background:white;
}
.current-btn {
  width:15em;
  background: white;
  color:var(--brand);
  margin-right:.5em;
  padding:8px 16px;
  border:0.5px solid var(--brand);
  border-radius:4px;
  margin-bottom:15px;
}

/* Page Counter */

.pagination{
  margin-top:20px;
  padding-bottom:2em;
  text-align:center;
}
.pagination a{
  display:inline-block;
  padding:8px 12px;
  margin:0 3px;
  border:1px solid #ccc;
  color:white;
  border-radius:4px;
}
.pagination a.active{
  background:var(--brand);
  color:white;
}
.pagination a:hover { 
  background:#dcdde1; 
}

/* Search Containert */

.search-container{
  margin-bottom:20px;
  display:flex;
  justify-content:flex-start;
  align-items:center;
}
.search-container .searchBox{
  width:100%;
  display:flex;
  justify-content:flex-end;
}
.search-container input[type="text"]{
  width:20rem;
  height:2rem;
  margin-right:1em;
  padding:0 20px;
  border:1px solid #ccc;
  border-radius:4px;
}
.search-container .searchBox button{
  height:2rem;
  border:none;
  color:white;
  border-radius:4px;
  cursor:pointer;
}

@media (max-width:991px){
    .search-container{
      flex-wrap:wrap;
      gap:8px;
    }
    .search-container > a{
      flex:1 1 calc(50% - 8px);
    }
    .searchBox{
      width:100%;
      justify-content:flex-start;
      margin-left:0;
    }
    .searchBox form{
      display:flex;
      gap:8px;
      width:100%;
      flex-wrap:wrap;
    }
    .searchBox input[type="text"]{
      flex:1;
      width:auto;
      margin-right:0;
    }
    .table-wrap{
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
    }
  }

 @media (max-width:767px){
    .search-container > a{
      flex:1 1 100%;
    }
    .searchBox form{
      flex-direction:column;
    }
    .searchBox input,
    .searchBox button,
    .searchBox select{
      width:100%;
    }
  }

.nav{ display:none !important; } /* altes Menü deaktiviert */

/*  STICKY DATUM (CLEANING).  */

.day-header{
    position: sticky;
    top: 0;                      /* <<< WICHTIG FIX */
    z-index: 50;
    margin:16px 0 10px 0;
    padding:10px 14px;
    border-radius:12px;
    background: rgba(248,249,250,.95);
    backdrop-filter: blur(6px);
    border:1px solid rgba(0,0,0,.08);
    box-shadow:0 6px 14px rgba(0,0,0,.06);
    font-weight:800;
    font-size:18px;
}
.day-header::after{
    content:"";
    display:block;
    height:1px;
    background:rgba(0,0,0,.1);
    margin-top:8px;
}

/* Content SCROLLER */

.content{
    width:90%;
    margin:0 auto;

    padding-top: var(--header-h);
    padding-bottom: var(--footer-h);

    height:100vh;
    overflow-y:auto;
    overflow-x:hidden;
}
.content-main{
    width:95%;
    margin:5rem auto 5rem;

}
/* Scrollbar ausblenden – Scrollen bleibt möglich */
.content{
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* IE / Edge Legacy */
}

.content::-webkit-scrollbar{
    width: 0;
    height: 0;
    display: none;                /* Chrome, Safari */
}


/* kleinere Geräte */
@media (max-width:700px){
    .content{ width:96%; }
}


/*
--------------------------------------------------------
2. Login/Logout
--------------------------------------------------------
*/

.login-overlay{
  min-height: 100vh;
  width: 100%;
  background: rgba(31,43,50, 0.55);
  display: grid;
  place-items: center;
  padding: 24px;
} 
.login-card{
  max-width: 420px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.25);
  padding: 22px 20px;
}
.login-title{
  text-align: center;
  color: #1f2b32;
  line-height: 1.25;
  margin: 0 0 14px 0;
}
.login-title small{
  opacity: .8;
  font-weight: 600;
}
.login-sub{
  margin: 0 0 16px 0;
  font-size: 0.9rem;
  opacity: .8;
  color:#1f2b32;
  text-align:center;
}
.error{
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,0,0,0.08);
  border: 1px solid rgba(255,0,0,0.20);
  color: #b00020;
  font-weight: 700;
  text-align: center;
  margin: 0 0 12px 0;
}
.login-form{
  gap: 12px;
  margin-top: 10px;
  display: grid;
}
.login-form input{
  padding: 12px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.18);
  font-size: 16px;
  outline: none;
  background: #fff;
  width: 100%;
}
.login-form input:focus{
  box-shadow: 0 0 0 4px rgba(0,77,64,0.12);
  border-color: rgba(0,77,64,0.55);
}
.login-form button{
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  background: rgb(0,77,64);
  border: 1px solid rgb(0,77,64);
  color: #fff;
  width: 100%;
}
.login-form button:hover{
  color: rgb(0,77,64);
  background: #fff;
}
.login-note{
  font-size: 0.85rem;
  color: #1f2b32;  
  width: 70%;
  margin: 1rem auto;
  text-align: center;
}
.login-footer{
  text-align: center;
  font-size: 0.9rem;
  margin-top: 18px;
}
.login-footer a{
  text-decoration: none;
  font-weight: 700;
  margin: 0 6px;
  cursor: pointer;
  color: rgb(0,77,64);
}
.login-footer a:hover{
  text-decoration: underline;
}
.modal-login{
  display: none;
  position: fixed;
  background: rgba(0,0,0,0.55);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  inset: 0;
  padding: 20px;
}
.modal-content{
  width: 100%;
  max-width: 760px;
  max-height: 85vh;
  overflow-y: auto;
  border-radius: 16px;
  padding: 26px 22px;
  position: relative;
  box-shadow: 0 18px 50px rgba(0,0,0,0.30);
  background: #fff;
}
.modal-content h2{
  color: #1f2b32;
  margin-top: 0;
}
.modal-content h3{
  margin-top: 18px;
  color: #1f2b32;
  margin-bottom: 8px;
}
.modal-content p,
.modal-content li{
  color: #333;
  line-height: 1.6;
}
.modal-content ul{
  padding-left: 20px;
}
.close-btn{
  top: 10px;
  right: 14px;
  border: none;
  background: transparent;
  font-size: 28px;
  cursor: pointer;
  color: #444;
  position: absolute;
}
.close-btn:hover{
  color: #000;
}

@media (max-width: 420px){
  .login-card{
    border-radius: 14px;
    padding: 18px 16px;
  }
}


/*
--------------------------------------------------------
3. Header
--------------------------------------------------------
*/

#mHeader{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height: var(--header-h);
    background: var(--brand);
    color:#fff;


    display:flex;
    justify-content:space-between;
    align-items:center;

    z-index:2000;

    transition: box-shadow .18s ease;
}

body.scrolled #mHeader{
    box-shadow:0 10px 24px rgba(0,0,0,.18);
}

#mHeader::after{
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    height:3px;
    width:100%;
    background:rgba(255,255,255,.9);
    transform-origin:left;
    transform:scaleX(var(--scroll-pct));
}

/* header left */
#mHeader .left{
    display:flex;
    align-items:center;
    gap:14px;
    margin-left:3rem;
}

#mHeader .burger {
    background: none;
    border: 0;
    color: #fff;
    font-size: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: -3px 0 0 0;
    line-height: 1;
    vertical-align: middle;
    height: var(--header-h);  /* gleiche Höhe wie der Header */
}

#mHeader .title{
    font-weight:700;
    white-space:nowrap;
}

#mHeader .title-mobile{
    display: none;
}


/* header right */
#mHeader .right{
    display:flex;
    align-items:center;
    gap:18px;
    margin-right: 3rem;
}

#mHeader .user{
    font-size:.85rem;
    white-space:nowrap;
}

#mHeader .logout-btn{
    color:#fff;
    display:flex;
    gap:6px;
    align-items:center;
    font-size: 1rem;
}


/* kleinere Geräte */
@media (max-width:700px){
    #mHeader .left{margin-left:0;}
    #mHeader .user{display: none;}
    #mHeader .logout-btn span{ display: none;}
    #mHeader .title{display: none;}
    #mHeader .title-mobile{display: block;}
    #mHeader .sep{ display:none !important; }


  #mHeader{
    display:grid;
    grid-template-columns: auto 1fr auto;
    align-items:center;

    padding: 0 6px;   /* weniger Innenabstand */
  }

  /* linke Seite komplett ohne extra Abstand */
  #mHeader .left{
    margin:0;
    padding:0;
    justify-self:start;
  }

  #mHeader .burger{
    font-size:28px;     /* etwas größer */
    padding:4px;        /* besser klickbar */
  }

  /* Titel mittig */
  #mHeader .title{ 
    display:none; 
  }
  #mHeader .title-mobile{
    display:block;
    justify-self:center;
    text-align:center;
    font-weight:700;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size: 3.5vw;
  }

  /* rechte Seite */
  #mHeader .right{
    margin:0;
    padding:0;
    justify-self:end;
  }

  /* Logout-Icon größer */
  #mHeader .logout-btn i{
    font-size:20px;
  }

  /* optional nur Icon auf Mobile */
  #mHeader .logout-btn span{
    display:none;
  }

  #mHeader .user,
  #mHeader .sep{
    display:none !important;
  }
}

@media (max-width:1024px){
    #mHeader .left{margin-left:1rem;}
}



/*
--------------------------------------------------------
3.1. Menu
--------------------------------------------------------
*/

#mOverlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    opacity:0;
    pointer-events:none;
    transition:.2s;
    z-index:2100;
}

#mDrawer{
    position: fixed;
    top: var(--header-h);
    left: 0;
    width: 300px;
    height: calc(100dvh - var(--header-h));
    background: var(--brand);
    color: #fff;
    transform: translateX(-105%);
    transition: transform .25s;
    z-index: 2200;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    padding-bottom: 30px;
}

body.drawer-open{
    overflow: hidden;
    touch-action: none;
}

#mDrawer ul{
    list-style: none;
    margin: 0;
    padding: 12px 12px 40px 12px;
}

body.drawer-open #mOverlay{
    opacity:1;
    pointer-events:auto;
}
body.drawer-open #mDrawer{
    transform:translateX(0);
}

#mDrawer ul{
    list-style:none;
    margin:0;
    padding:12px 12px 30px 12px;
}

#mDrawer a{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px;
    border-radius:8px;
    color:#fff;
    font-weight:600;
}

#mDrawer a:hover{
    background:rgba(255,255,255,.15);
}

#mDrawer a.active{
    background:rgba(255,255,255,.25);
}


/*
--------------------------------------------------------
4. Footer
--------------------------------------------------------
*/

#mFooter{
    position:fixed;
    bottom:0;
    left:0;
    right:0;

    height: var(--footer-h);

    background: var(--brand);
    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:13px;
    white-space:nowrap;
    z-index: 9999;
}


/*
--------------------------------------------------------
5. Dashboard
--------------------------------------------------------
*/

.content-dashboard {
  width: 100%;
  height: 100vh;
  display:flex; 
  justify-content: center; 
  align-items: center;
}
.dashboard {
    width: 70%;
    margin: 0 auto;
  
    
}
.dashboard-inline { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 20px; 
    margin-top: 20px; 
}

/* Desktop: 3 pro Reihe */
.dashboard-inline .card-dashboard {
    flex: 0 0 calc(33.333% - 14px);
}

/* Tablet: 2 pro Reihe */
@media (max-width: 900px) {
    .dashboard {
    width: 90%;
    margin: 0 auto;
}
    .dashboard-inline .card-dashboard {
        flex: 0 0 calc(33.333% - 14px);
    }
}

/* Handy: 1 pro Reihe */
@media (max-width: 500px) {
    .content-dashboard {
        height: 100%;
        padding: 6rem 0;
    }
    .dashboard-inline .card-dashboard {
        flex: 0 0 100%;
    }
}

/* Optional: Umsatz-Kachel hervorheben */

.card-dashboard{
    background:#fff;
    border-radius:8px;
    box-shadow:0 2px 6px rgba(0,0,0,.1);
    padding:20px;
    text-align:center;
    width:calc(50% - 10px);
}

.card-dashboard:hover{
    transform:translateY(-4px);
}

@media (max-width:600px){

    .card-dashboard{ width:100%; }
}


/*
--------------------------------------------------------
6. Klienten
--------------------------------------------------------
*/

.content-clients {
  width: 95%;
  margin: 8rem auto 5rem;
}

@media (max-width:991px){
  .content-main{
    padding-left:12px;
    padding-right:12px;
  }
  #clientsTable{
    width:auto;
    min-width:1300px;
  }
}

@media (max-width:767px){

  #clientsTable,
  #clientsTable thead,
  #clientsTable tbody,
  #clientsTable th,
  #clientsTable td,
  #clientsTable tr{
    display:block;
    width:100%;
  }
  #clientsTable{
    background:transparent;
  }
  #clientsTable thead{
    display:none;
  }
  #clientsTable tbody tr{
    background:#fff;
    border:1px solid #ddd;
    border-radius:12px;
    margin-bottom:14px;
    padding:10px;
  }
  #clientsTable td{
    border:0;
    border-bottom:1px solid #eee;
    padding:10px 10px 10px 130px;
    position:relative;
  }
  #clientsTable td:last-child{
    border-bottom:0;
  }
  #clientsTable td::before{
    content:attr(data-label);
    position:absolute;
    left:10px;
    top:10px;
    width:105px;
    font-weight:700;
    color:#333;
  }
  .action-cell{
    padding-left:10px!important;
  }
  .action-cell::before{
    position:static!important;
    display:block;
    margin-bottom:8px;
  }

}


/*
--------------------------------------------------------
7. Artikel
--------------------------------------------------------
*/

.content-articles {
 width: 95%;
  margin: 8rem auto 5rem;
}
.badge { width: 3rem; 
  text-align: center; 
  display:inline-block; 
  padding:4px 8px; 
  border-radius:6px; 
  color:#fff; 
  font-size:.78rem; }
.badge-yes { 
  background:green; 
}
.badge-no {
  background:red; 
}
.icon-btn { 
  background:none;
  border:none;
  padding:0;
  cursor:pointer; 
}
.small { 
  font-size: .8rem; 
  color:#666; 
}

@media (max-width:991px){
  .content-articles{
    padding-left:12px;
    padding-right:12px;
  }
  #articlesTable{
    width:auto;
    min-width:1300px;
  }
}


@media (max-width:767px){
  #articlesTable,
  #articlesTable thead,
  #articlesTable tbody,
  #articlesTable th,
  #articlesTable td,
  #articlesTable tr{
    display:block;
    width:100%;
  }
  #articlesTable{
    background:transparent;
  }
  #articlesTable thead{
    display:none;
  }
  #articlesTable tbody tr{
    background:#fff;
    border:1px solid #ddd;
    border-radius:12px;
    margin-bottom:14px;
    padding:10px;
  }
  #articlesTable td{
    border:0;
    border-bottom:1px solid #eee;
    padding:10px 10px 10px 130px;
    position:relative;
    white-space:normal;
    word-break:break-word;
  }
  #articlesTable td:last-child{
    border-bottom:0;
  }
  #articlesTable td::before{
    content:attr(data-label);
    position:absolute;
    left:10px;
    top:10px;
    width:105px;
    font-weight:700;
    color:#333;
  }
  .action-cell{
    padding-left:10px !important;
  }
  .action-cell::before{
    position:static !important;
    display:block;
    margin-bottom:8px;
  }
}




/*
--------------------------------------------------------
8. Reinigungen
--------------------------------------------------------
*/
.content-cleaning {
  width: 90%;
  margin: 8rem auto 5rem;
}
.content-cleaning h2,
.content-cleaning h3 { 
  margin-left: 3rem; 
}

@media (max-width: 720px){  
  .content-cleaning h2,
  .content-cleaning h3 { 
    margin-left: 1rem; 
  }
}
.empty-state{
  padding: 14px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  margin-left: 3rem;
  margin-right: 3rem;
}

@media (max-width: 720px){
  .empty-state{ 
    margin-left: 1rem; 
    margin-right: 1rem; 
  }
}
.day-group{
  position: relative;
  scrollbar-width: none;
}
.cards-wrap{
  width: 92%;
  margin-left: 4%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 10px;
  margin-bottom: 18px;
}

@media (max-width: 1200px){
  .cards-wrap{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px){
  .content-cleaning {
    width: 95%;
    margin: 0 auto;
  }
  .cards-wrap{ width: 100%; margin: 0 auto; grid-template-columns: 1fr; }
}
.order-card{
 
  background:#fff;
  border:1px solid #ddd;
  border-radius:14px;
  padding:14px;
  box-shadow:0 2px 8px rgba(0,0,0,0.06);
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}
.order-card .top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,77,64,0.10);
  color: rgb(0,77,64);
  font-weight: 800;
  font-size: 12px;
  white-space: nowrap;
}
.kv{ 
  display:flex; 
  flex-direction:column; 
  gap:4px; min-width:0; 
}
.k{ 
  font-size:12px; 
  opacity:.7; 
}
.v{
  font-size:14px;
  font-weight:800;
  overflow:hidden;
  text-overflow:ellipsis;
}
.v.address{
  font-weight:600;
  font-size:13px;
  opacity:.92;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
details{
  border-top: 1px dashed #ddd;
  padding-top: 8px;
}
summary{
  cursor:pointer;
  font-weight:800;
  font-size:13px;
  user-select:none;
}
.details-body{
  font-size:13px;
  line-height:1.35;
  white-space:pre-wrap;
  word-break:break-word;
  margin-top:8px;
}
textarea.remark{
  width:100%;
  min-height:90px;
  resize:vertical;
  padding:8px;
  border:1px solid #ccc;
  border-radius:8px;
  font-family:inherit;
  font-size:14px;
}
.muted{ 
  opacity:.75; 
  font-size:12px; 
}
.btn-finish{
  display:flex;
  width:50%;
  justify-content:center;
  align-items:center;
  gap:8px;
  padding:10px 10px;
  border-radius:10px;
  border:1px solid red;
  background:red;
  color:#fff;
  cursor:pointer;
  font-weight:800;
  white-space:nowrap;
  margin-top: 2rem;
  margin-left: 25%;
}
.btn-finish:hover{ 
  opacity:.95; 
}
.whoami {
  margin-left: 3rem;
  margin-right: 3rem;
  margin-top: 10px;
  margin-bottom: 6px;
  font-size: 12px;
  opacity: .85;
}

@media (max-width: 720px){
  .whoami{ 
    margin-left: 1rem; 
    margin-right: 1rem; 
  }
}


/*
--------------------------------------------------------
8.1. Zeiterfassung
--------------------------------------------------------
*/

.card-time{
  margin: 5em 2em; 
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:16px;
  max-width:800px
}
.card-time .row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px
}
.card-time button{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.15);
  cursor:pointer;
  font-weight:700
}
.card-time button.primary{
  background:rgb(0,77,64);
  color:#fff;
  border-color:rgb(0,77,64)
}
.card-time button.danger{
  background:#b00020;
  color:#fff;
  border-color:#b00020
}
.card-time button:disabled{
  opacity:.45;
  cursor:not-allowed
}
.card-time .muted{
  opacity:.75
}
.card-time .msg{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(0,77,64,.08);
  border:1px solid rgba(0,77,64,.18);
  display:none
}
.card-time .err{
  background:rgba(176,0,32,.08);
  border-color:rgba(176,0,32,.18)
}
.card-time .grid{
  display:grid;
  gap:10px;
  margin-top:10px
}
.card-time .userline{ 
  margin-top:-6px; 
  margin-bottom:12px; 
}
.card-time .status{
  font-weight:900;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.04);
  display:inline-block;
  vertical-align:middle;
}
.card-time .status.st-running{ 
  background: rgba(0,77,64,.10); 
  border-color: rgba(0,77,64,.25); 
}
.card-time .status.st-break{ 
  background: rgba(245,124,0,.12); 
  border-color: rgba(245,124,0,.28); 
}
.card-time .status.st-ended{ 
  background: rgba(0,0,0,.06); 
  border-color: rgba(0,0,0,.14); 
  opacity:.9; 
}
.card-time .status.st-not_started{ 
  background: rgba(0,0,0,.04); 
  border-color: rgba(0,0,0,.10); 
  opacity:.85; 
}
.card-time .time-cards{
  display:flex;
  gap:10px;
  margin-top:10px;
  flex-wrap:wrap;
}
.card-time .time-card{
  flex:1;
  min-width:160px;
  background:#f8f9fb;
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  padding:12px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.card-time .time-label{ 
  font-size:.82rem; 
  opacity:.65; 
  margin-bottom:4px; 
}
.card-time .time-value{
  font-size:1.55rem;
  font-weight:900;
  letter-spacing:.6px;
  font-variant-numeric: tabular-nums;
}
.card-time .time-card.work{ 
  border-color: rgba(0,77,64,.18); 
  background: rgba(0,77,64,.06); 
}
.card-time .time-card.break{ 
  border-color: rgba(245,124,0,.22); 
  background: rgba(245,124,0,.06); 
}
.card-time .time-card.net{ 
  border-color: rgba(0,0,0,.10); 
  background: rgba(0,0,0,.03); 
}
.card-time .time-value.pulse{ 
  animation: tick .35s ease; 
}

@keyframes tick{ 
  0%{
    transform:translateY(0);opacity:1
  } 
  35%{
    transform:translateY(-1px);opacity:.95
  } 
  100%{
    transform:translateY(0);opacity:1
  } 
}
.card-time .time-card.break.blink{
  animation: blink 1.2s ease-in-out infinite; 
}

@keyframes blink{ 
  0%,100%{ 
    box-shadow: 0 0 0 rgba(245,124,0,0); 
  } 
  50%{ 
    box-shadow: 0 0 0 4px rgba(245,124,0,.10); 
  } 
}

@media (max-width: 700px){
  .card-time{ 
    margin: 16px 0; 
    padding:14px; 
    border-radius:16px; 
  }
  .card-time h2{ 
    margin: 0 0 8px; 
    font-size: 1.35rem; 
  }
  .card-time .userline{ 
    margin-top:-2px; 
    margin-bottom:12px; 
    font-size: .98rem; 
  }
  .card-time .row{ 
    flex-direction: 
    column; gap: 10px; 
  }
  .card-time button{ 
    width: 100%; 
    padding: 14px 14px; 
    border-radius: 14px; 
    font-size: 1rem; 
  }
  .card-time .status{ 
    margin-left:6px; 
  }
  .card-time .time-cards{ 
    flex-direction:column;  
  }
  .card-time .time-card{ 
    padding:14px; 
    min-width:auto; 
  }
  .card-time .time-value{ 
    font-size:1.75rem; 
  }
}



/*
--------------------------------------------------------
 8.2. Meine Zeiten
--------------------------------------------------------
*/

.card-my-time{
  margin: 8em 2em;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:16px;
  max-width:980px;
}
.card-my-time .row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:flex-end;
  margin:10px 0 14px;
}
.card-my-time label{
  font-size:12px;
  opacity:.8;
  font-weight:700;
  display:block;
  margin-bottom:6px
}
.card-my-time select{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.15);
  background:#fff
}
.card-my-time button{
  padding:10px 12px;border-radius:12px;border:1px solid rgba(0,0,0,.15);
  cursor:pointer;font-weight:800;background:rgb(0,77,64);color:#fff
}

.card-my-time .num{
  text-align:right;
  white-space:nowrap;
}
.card-my-time .muted{
  opacity:.75
}
.card-my-time .sum{
  margin-top:12px;
  background:#f0f0f0;
  padding:12px;
  border-radius:12px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.card-my-time .sum b{
  font-size:15px
}
.card-my-time .pill{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(0,77,64,.08);
  border:1px solid rgba(0,77,64,.18);
  font-size:12px;
  font-weight:800;
}
.card-my-time .btn{
  display:inline-block; 
  padding:8px 12px;
  border-radius:8px;border:1px solid var(--brand);
  background:var(--brand);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:13px
}

/* KPI-Kacheln */

.card-my-time .kpi-grid{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:12px 0 6px;
}
.card-my-time .kpi{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:12px 14px;
  min-width:220px;
  flex:1 1 220px;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.card-my-time .kpi .label{
  font-size:12px;
  opacity:.75;
  font-weight:800;
  margin-bottom:6px;
}
.card-my-time .kpi .value{
  font-size:22px;
  font-weight:900;
  line-height:1.1;
}
.card-my-time .kpi .sub{
  margin-top:6px;
  font-size:12px;
  opacity:.75;
}
.card-my-time .kpi.warn{
  border-color: rgba(176,0,32,.25);
  background: rgba(176,0,32,.04);
}
.card-my-time .kpi.ok{
  border-color: rgba(0,77,64,.25);
  background: rgba(0,77,64,.04);
}

/* Mobile Optimierungen */

.card-my-time .table-wrap{
  overflow-x:auto; 
  -webkit-overflow-scrolling:touch; 
  border-radius:12px;
}
.card-my-time .table-wrap table{
  min-width:620px;
}

@media (max-width: 768px){
  .card-my-time{
    margin:6.5em 0.5em; 
    padding:12px;
  }
  .card-my-time h2{
    font-size:20px;
  }
  .card-my-time th,
  .card-my-time td{
    font-size:13px; padding:9px 7px;
  }
  .card-my-time .row{
    gap:10px;
  }
  .card-my-time .row > div{
    width:100%;
  }
  .card-my-time select, button{
    width:100%;
  }
  .card-my-time .btn{
    display:block; 
    width:100%; 
    text-align:center; 
    padding:10px 12px;
  }
  .card-my-time .kpi{
    min-width:unset; 
    flex:1 1 100%;
  }
  .card-my-time .kpi .value{
    font-size:20px;
  }
  .card-my-time .sum{
    gap:10px;
  }
  .card-my-time .sum > div{
    width:100%;}
}

@media (max-width: 420px){
  .card-time{
    margin:6.2em 0.25em;
  }
  .card-my-timeth,
  .card-my-time td{
    font-size:12.5px;
  }
}


/*
--------------------------------------------------------
9. Aufträge (aktiv)
--------------------------------------------------------
*/

.content-orders {
  width: 95%;
  margin: 8rem auto 5rem;
}
.orders-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin-top: 10px;
  background: #fff;
}
.orders-table th,
.orders-table td {
  border: 1px solid #ddd;
  padding: 10px;
  font-size: 0.825rem;
  vertical-align: middle;
  overflow: hidden;
}
.orders-table th {
  background: #f4f4f4;
  text-align: left;
  white-space: nowrap;
}
.orders-table  .nowrap { 
  white-space: nowrap; 
}
.orders-table  .wrap {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.orders-table  .cell-scroll {
    max-height: 72px;
    overflow: auto;
}
.content-orders .empty-state {
  padding: 14px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
}
.content-orders .badge-active {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  background: #e9f7ef;
  border: 1px solid #c9ebd6;
}
.content-orders .actions {
  display:flex;
  gap:8px;
  align-items:center;
}
.content-orders .btn {
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid transparent;
  background: transparent;
  cursor:pointer;
  font-weight:600;
  font-size: 13px;
}
.content-orders .btn:hover {
  opacity:.95;
  background-color:#fff;
  color:rgb(0,77,64);
}
.content-orders form.inline { 
  margin:0; 
  display:inline; 
}
.content-orders .orders-table-wrap {
  width:100%;
}

@media (max-width: 991px) {
  .content-orders {
    padding-left:12px;
    padding-right:12px;
  }
  
  .content-orders .search-container {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  
  .content-orders .search-container a {
    flex:1 1 calc(50% - 8px);
  }
  
  .content-orders .search-container button {
    width:100%;
  }
  
  /* horizontales Scrollen für Tabellen */
  .orders-table-wrap {
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .orders-table {
    width:auto;
    min-width:1100px;
  }
}

@media (max-width: 767px) {
  .content-orders .day-header {
    font-size:16px;
    margin-top:18px;
  }
  .orders-table,
  .orders-table thead,
  .orders-table tbody,
  .orders-table th,
  .orders-table td,
  .orders-table tr {
    display:block;
    width:100%;
  }
  .orders-table {
    border:0;
    background:transparent;
    margin-top:10px;
    min-width:0;
  }
  .orders-table-wrap {
    overflow:visible;
  }
  .orders-table colgroup {
    display:none;
  }
  .orders-table thead {
    display:none;
  }
  .orders-table tbody tr {
    background:#fff;
    border:1px solid #ddd;
    border-radius:12px;
    margin-bottom:14px;
    padding:10px;
    overflow:hidden;
  }
  .orders-table td {
    border:0;
    border-bottom:1px solid #eee;
    padding:10px 10px 10px 130px;
    min-height:42px;
    position:relative;
    text-align:left;
    overflow:visible;
    white-space:normal;
  }
  .orders-table td:last-child {
    border-bottom:0;
  }
  .orders-table td::before {
    content:attr(data-label);
    position:absolute;
    left:10px;
    top:10px;
    width:105px;
    font-weight:700;
    color:#333;
    white-space:normal;
    word-break:break-word;
  }
  .content-orders .cell-scroll {
    max-height:none;
    overflow:visible;
  }
  .content-orders .actions {
    justify-content:flex-start;
    gap:12px;
  }
  .orders-table td.action-cell {
    padding-left:10px;
  }
  .orders-table td.action-cell::before {
    position:static;
    display:block;
    width:auto;
    margin-bottom:8px;
  }
  .orders-table td.status-cell {
    padding-top:12px;
    padding-bottom:12px;
  }
}

@media (max-width:480px) {
  .content-orders .search-container a {
    flex:1 1 100%;
  }
  .orders-table td {
    padding-left:105px;
    font-size:0.8rem;
  }
  .orders-table td::before {
    width:85px;
    font-size:0.78rem;
  }
  .content-orders .btn {
    padding:6px 8px;
  }
}    


/*
--------------------------------------------------------
9.1. Aufträge (erledigt)
--------------------------------------------------------
*/

.content-orders .badge-finished {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: #fff;
  background: var(--brand);
  border: 1px solid var(--brand);
}
.content-orders .badge-invoiced {
  display:inline-block;
  margin-top: 0.5em;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: #fff;
  background:green;
  border:1px solid var(--brand);
}
.content-orders .badge-closed {
  display:inline-block;
  margin-top: 0.5em;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: #fff;
  background:red;
  border:1px solid red;
}


/*
--------------------------------------------------------
9.2. Auftrgge erstellen
--------------------------------------------------------
*/

.content-newOrders {
  width: 95%;
  margin: 8rem auto 5rem;
}
.content-newOrders .card-box {
  width: 75%;
  border:1px solid #ddd;
  border-radius:10px;
  padding:16px;
  background:#fff;
}
.content-newOrders label {
  display:block;
  font-size:0.9rem;
  margin: 1rem 0 0.5rem;
  color:#333;
}
.content-newOrders input,
.content-newOrders select {
  width:100%;
  padding:10px;
  border:1px solid #ccc;
  border-radius:8px;
}
.content-newOrders input:disabled {
  background:#f3f3f3;
  cursor:not-allowed;
}
.content-newOrders .btn-add{
  width:15em;
  background: var(--brand);
  color:white;
  margin-right:.5em;
  padding:8px 16px;
  border:0.5px solid var(--brand);
  border-radius:4px;
  margin-bottom:15px;
}
.content-newOrders .btn-add:hover{
  color:var(--brand);
  background:white;
}
.content-newOrders .btn-add {
  margin-top: 1rem;
}
.content-newOrders .row {
  display:grid;
  grid-template-columns: 2fr 1fr 2fr 40px;
  gap:10px;
  align-items:end;
  margin-top:10px;
}
.content-newOrders .icon-btn {
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:0;
}
.content-newOrders .muted {
  color:#666;
  font-size:0.85rem;
}
.content-newOrders hr {
  margin:18px 0;
}
.content-newOrders .msg {
  padding:10px;
  border-radius:8px;
  margin:10px 0;
}
.content-newOrders .ok {
  background:#e9f7ef; 
}
.content-newOrders .err { 
  background:#fdecea; 
}
.content-newOrders i {
  color: red;
  font-size: 1.2rem;
}

@media (max-width: 991px) {
  .content-newOrders {
    padding-left: 12px;
    padding-right: 12px;
  }
  .content-newOrders .card-box {
    width: 100%;
  }
  .content-newOrders .search-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .content-newOrders .search-container a {
    flex: 1 1 calc(50% - 8px);
    display: block;
  }
  .content-newOrders .search-container button {
    width: 100%;
  }
  .content-newOrders .row {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 10px;
    margin-top: 12px;
    background: #fff;
  }
  .content-newOrders .row > div:first-child {
    grid-column: 1 / -1;
  }
  .content-newOrders .row .icon-btn.del {
    width: 100%;
    height: 44px;
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .content-newOrders .card-box {
    padding: 12px;
  }
  .content-newOrders .row {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 10px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 10px;
    margin-top: 12px;
  }
  .content-newOrders .row > div:first-child {
    grid-column: auto;
  }
  .content-newOrders .row .icon-btn.del {
    width: 100%;
    height: 44px;
    justify-content: center;
  }
  .content-newOrders input[type="date"] {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .content-newOrders {
    padding: 12px !important;
  }
  .content-newOrders .card-box {
    padding: 12px !important;
  }
  .content-newOrders .search-container a {
    flex: 1 1 100%;
  }
  .content-newOrders input,
  .content-newOrders select,
  .content-newOrders button {
    min-height: 44px;
  }
}


/*
--------------------------------------------------------
9.3. Auftragsstatistik
--------------------------------------------------------
*/

.content-ordersStatistics {
  width: 95%;
  margin: 8rem auto 5rem;
}
.content-ordersStatistics .year-header {
  margin-top: 22px;
  font-size: 20px;
  font-weight: 800;  
}
.content-ordersStatistics .client-header {
  margin-top: 14px;
  font-size: 16px;
  font-weight: 700;
}
.content-ordersStatistics .badge-final {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: #fff;
  background: var(--brand);
  border: 1px solid var(--brand);
}
.content-ordersStatistics .filter-box {
  width: 98%;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 12px;
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.content-ordersStatistics .filter-box label {
  font-weight: 700;
  font-size: 13px;
  display: block;
  margin-bottom: 6px;
}
.content-ordersStatistics .filter-box select,
.content-ordersStatistics .filter-box input[type="text"] {
  min-width: 220px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #ccc;
  background: #fff;
}
.content-ordersStatistics .filter-actions {
  display: flex;
  gap: 10px;
}
.content-ordersStatistics .btn {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}
.content-ordersStatistics .btn-apply {
  border-color: var(--brand);
  color: var(--brand);
}
.content-ordersStatistics .btn-reset {
  border-color: #999;
  color: #333;
}
.content-ordersStatistics .hint {
  font-size: 12px;
  color: #666;
  margin-top: 8px;
  width: 98%;
}
.content-ordersStatistics .muted {
  color: #666;
}
.content-ordersStatistics .empty-state {
  margin-top: 20px;
  padding: 15px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  width: 98%;
}

@media (max-width: 991px) {
  .content-ordersStatistics {
    padding-left: 12px;
    padding-right: 12px;
  }
  .content-ordersStatistics .search-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .content-ordersStatistics .search-container a {
    flex: 1 1 calc(50% - 8px);
  }
  .content-ordersStatistics .search-container button {
    width: 100%;
  }
  .content-ordersStatistics .filter-box {
    width: 100%;
  }
  .content-ordersStatistics .orders-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  } 
  .content-ordersStatistics .orders-table {
    width: auto;
    min-width: 1100px;
  }
}

@media (max-width: 767px) {
  .content-ordersStatistics .year-header {
    font-size: 18px;
    margin-top: 18px;
  }
  .content-ordersStatistics .client-header {
    font-size: 15px;
    margin-top: 12px;
  }
  .content-ordersStatistics .filter-box {
    padding: 10px;
    gap: 10px;
  }
  .content-ordersStatistics .filter-box > div {
    width: 100%;
  }
  .content-ordersStatistics .filter-box select,
  .content-ordersStatistics .filter-box input[type="text"] {
    width: 100%;
    min-width: 0;
  }
  .content-ordersStatistics .filter-actions {
    width: 100%;
    flex-direction: column;
  }
  .content-ordersStatistics .filter-actions .btn,
  .content-ordersStatistics .filter-actions a.btn,
  .content-ordersStatistics .filter-actions button.btn {
    width: 100%;
    justify-content: center;
  }
  .content-ordersStatistics .orders-table,
  .content-ordersStatistics .orders-table thead,
  .content-ordersStatistics .orders-table tbody,
  .content-ordersStatistics .orders-table th,
  .content-ordersStatistics .orders-table td,
  .content-ordersStatistics .orders-table tr {
    display: block;
    width: 100%;
  }
  .content-ordersStatistics .orders-table {
    border: 0;
    background: transparent;
    margin-top: 10px;
    min-width: 0;
  }
  .content-ordersStatistics .orders-table-wrap {
    overflow: visible;
  }
  .content-ordersStatistics .orders-table colgroup {
    display: none;
  }
  .content-ordersStatistics .orders-table thead {
    display: none;
  }
  .content-ordersStatistics .orders-table tbody tr {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    margin-bottom: 14px;
    padding: 10px;
    overflow: hidden;
  }
  .content-ordersStatistics .orders-table td {
    border: 0;
    border-bottom: 1px solid #eee;
    padding: 10px 10px 10px 130px;
    min-height: 42px;
    position: relative;
    text-align: left;
    overflow: visible;
    white-space: normal;
  }
  .content-ordersStatistics .orders-table td:last-child {
    border-bottom: 0;
  }
  .content-ordersStatistics .orders-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 10px;
    top: 10px;
    width: 105px;
    font-weight: 700;
    color: #333;
    white-space: normal;
    word-break: break-word;
  }
  .content-ordersStatistics .orders-table td.nowrap,
  .content-ordersStatistics .orders-table td.wrap {
    white-space: normal;
  }
}
  
@media (max-width: 480px) {
  .content-ordersStatistics .search-container a {
    flex: 1 1 100%;
  }
  .content-ordersStatistics .orders-table td {
    padding-left: 105px;
    font-size: 0.8rem;
  }
  .content-ordersStatistics .orders-table td::before {
    width: 85px;
    font-size: 0.78rem;
  }
  .content-ordersStatistics .btn {
    padding: 6px 8px;
  }
}


/*
--------------------------------------------------------
10. Objekte
--------------------------------------------------------
*/

.content-objects {
  width: 95%;
  margin: 8rem auto 5rem;
}

/*
--------------------------------------------------------
11. Rechnungen
11.2. offene Rechnungen
11.3. fertige Rechnungen
--------------------------------------------------------
*/

.content-invoices {
  width: 95%;
  margin: 8rem auto ;
}
.content-invoices .card{
  width:fit-content;
  margin-top:18px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.04)
}
.content-invoices .card-box {
  width: 75%; 
  border:1px solid #ddd; 
  border-radius:10px; 
  padding:16px; 
}
.content-invoices .wrap { 
  max-width: 100%; 
  padding: 0 16px; 
}
.content-invoices .grid { 
  display:grid; 
  grid-template-columns: repeat(auto-fill, minmax(20%, 1fr)); 
  gap: 12px; 
}
.content-invoices .tile { 
  background:#fff; 
  border:1px solid #e5e7eb; 
  border-radius: 12px; padding: 14px; 
  box-shadow: 0 1px 2px rgba(0,0,0,.04); 
  text-decoration:none; 
  color:inherit; 
}
.content-invoices .tile:hover { 
  border-color:#cbd5e1; 
}
.content-invoices .name { 
  font-weight: 750; 
}
.content-invoices .muted { 
  color:#6b7280; 
  font-size: 13px; 
  margin-top: 6px; 
}
.content-invoices .count { 
  display:inline-block; 
  margin-top:10px; 
  padding:4px 10px; 
  border-radius:4px; 
  background: var(--brand); 
  color:#fff; 
  font-size: 12px; 
}
.content-invoices .card-invoices { 
  margin-top: 18px; 
  background:#fff; 
  border:1px solid #e5e7eb; 
  border-radius: 12px; 
  padding: 16px; 
  box-shadow: 0 1px 2px rgba(0,0,0,.04); 
  width: 60%;
}
.content-invoices .topbar { 
  display:flex; 
  justify-content:space-between; 
  align-items:center; 
  gap:10px; 
  flex-wrap:wrap; 
}
.content-invoices .pill { 
  display:inline-block; 
  padding: 4px 8px; 
  border-radius: 999px; 
  font-size: 12px; 
  border:1px solid #e5e7eb; 
  background:#fafafa; 
}
.content-invoices .flex { 
  display:flex; 
  gap:10px; 
  align-items:center; 
  flex-wrap: wrap; 
  margin-top: 10px; 
}
.content-invoices .btn{
  display:inline-block;
  padding:8px 12px;
  border-radius:8px;
  border:1px solid var(--brand);
  background:var(--brand);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:13px
}
.content-invoices .btn.secondary{
  background:#fff;
  color:#111827;
  border-color:#d1d5db
}

@media (max-width: 991px) {
  .content-invoices {
    padding-left: 12px;
    padding-right: 12px;
  }
  .content-invoices .card{
    width:auto;
  }
  .content-invoices .wrap {  
    max-width: 100%;
    padding: 0;
  }
  .content-invoices .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .content-invoices .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .content-invoices .invoice-preview-table {
    width: auto;
    min-width: 950px;
  }
  
}

@media (max-width: 767px) {
  .content-invoices .wrap {
    max-width: 100%;
    padding: 0;
  }
  .content-invoices .grid {
    grid-template-columns: 1fr;
  }
  .content-invoices .card{
    width:auto;
    padding:12px;
  }
  .content-invoices .card-invoices {
    padding: 12px;
  }
  .content-invoices .topbar {
    align-items: stretch;
  }
  .content-invoices .topbar > div:last-child {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .content-invoices .topbar > div:last-child .btn {
    width: 100%;
    text-align: center;
  }
  .content-invoices .flex {
    flex-direction: column;
    align-items: stretch;
  }
  .content-invoices .pill {
    width: 100%;
    box-sizing: border-box;
  }
  .content-invoices .table-wrap {
    overflow: visible;
  }
  .content-invoices .invoice-preview-table,
  .content-invoices .invoice-preview-table thead,
  .content-invoices .invoice-preview-table tbody,
  .content-invoices .invoice-preview-table th,
  .content-invoices .invoice-preview-table td,
  .content-invoices .invoice-preview-table tr {
    display: block;
    width: 100%;
  }
  .content-invoices .invoice-preview-table {
    background: transparent;
    margin-top: 12px;
  }
  .content-invoices .invoice-preview-table thead {
    display: none;
  }
  .content-invoices .invoice-preview-table tbody tr {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    margin-bottom: 14px;
    padding: 10px;
    overflow: hidden;
  }
  .content-invoices .invoice-preview-table td {
    border: 0;
    border-bottom: 1px solid #eee;
    padding: 10px 10px 10px 130px;
    min-height: 42px;
    position: relative;
    text-align: left !important;
    white-space: normal;
    word-break: break-word;
    overflow: visible;
  }
  .content-invoices .invoice-preview-table td:last-child {
    border-bottom: 0;
  }
  .content-invoices .invoice-preview-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 10px;
    top: 10px;
    width: 105px;
    font-weight: 700;
    color: #333;
    white-space: normal;
    word-break: break-word;
  }
  .content-invoices .invoice-preview-table td.total-row {
    padding-left: 10px;
  }
  
  .content-invoices .invoice-preview-table td.total-row::before {
    display: none;
  }
}

@media (max-width: 480px) {
  .content-invoices .invoice-preview-table td {
    padding-left: 105px;
    font-size: 0.8rem;
  }
  .content-invoices .invoice-preview-table td::before {
    width: 85px;
    font-size: 0.78rem;
  }
  .content-invoices .search-container button,
  .content-invoices .btn {
    min-height: 44px;
  }
}


/*
--------------------------------------------------------
11.1. Rechnung erstellen
--------------------------------------------------------
*/

.content-addInvoice {
  width: 95%;
  margin: 8rem auto 5rem;
}
.content-addInvoice .wrap { 
  max-width: 1200px; 
  padding: 0 16px; 
}
.content-addInvoice .card-invoice { 
  background:#fff; 
  border:1px solid #e5e7eb; 
  border-radius: 12px; 
  padding: 16px; 
  box-shadow: 0 1px 2px rgba(0,0,0,.04); 
}
.content-addInvoice .row {
  display:flex;
  gap:16px;
  flex-wrap: wrap;
  align-items:flex-end;
}
.content-addInvoice .col { 
  flex:1; min-width: 280px; 
}
.content-addInvoice label {
  display:block;
  font-size: 13px;
  margin-bottom: 6px;
  color:#374151;
}
.content-addInvoice select,
.content-addInvoice input {
  width:100%;
  padding:10px 12px;
  border:1px solid #d1d5db;
  border-radius: 10px;
  font-size:14px;
  background:#fff;
}
.content-addInvoice .btn {
  padding: 10px 14px;
  border-radius: 10px;
  border:1px solid var(--brand);
  background: var(--brand);
  color:#fff;
  cursor:pointer;
  font-weight:600;
}
.content-addInvoice .btn.secondary {
  background:#fff;
  color:#111827;
}
.content-addInvoice .btn.disabled {
  opacity: .5;
  cursor:not-allowed;
}
.content-addInvoice .msg {
  margin: 12px 0;
  padding: 10px 12px;
  border-radius: 10px;
  white-space: pre-line;
}
.content-addInvoice .err { 
  background:#fee2e2; 
  border:1px solid #fecaca; 
  color:#7f1d1d; 
}
.content-addInvoice .warn { 
  background:#fff7ed; 
  border:1px solid #fed7aa; 
  color:#7c2d12; 
}

@media (max-width: 991px) {
  .content-addInvoice {
    padding-left: 12px;
    padding-right: 12px;
  }
  .content-addInvoice .wrap {
    max-width: 100%;
    padding: 0;
  }
  .content-addInvoice .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: end;
  }
  .content-addInvoice .row .col:last-child {
    grid-column: 1 / -1;
  }
  .content-addInvoice .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .content-addInvoice .invoice-create-table {
    width: auto;
    min-width: 950px;
  }
}

@media (max-width: 767px) {
  .content-addInvoice .wrap {
    max-width: 100%;
    padding: 0;
  }
  .content-addInvoice .card-invoice {
    padding: 12px;
  }
  .content-addInvoice .row {
    display: block;
  }
  .content-addInvoice .col {
    min-width: 0;
    margin-bottom: 12px;
  }
  .content-addInvoice .flex {
    flex-direction: column;
    align-items: stretch;
  }
  .content-addInvoice .pill {
    width: 100%;
    box-sizing: border-box;
  }
  .content-addInvoice .table-wrap {
    overflow: visible;
  }
  .content-addInvoice .invoice-create-table,
  .content-addInvoice .invoice-create-table thead,
  .content-addInvoice .invoice-create-table tbody,
  .content-addInvoice .invoice-create-table th,
  .content-addInvoice .invoice-create-table td,
  .content-addInvoice .invoice-create-table tr {
    display: block;
    width: 100%;
  }
  .content-addInvoice .invoice-create-table {
    background: transparent;
  }
  .content-addInvoice .invoice-create-table thead {
    display: none;
  }
  .content-addInvoice .invoice-create-table tbody tr {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    margin-bottom: 14px;
    padding: 10px;
    overflow: hidden;
  }
  .content-addInvoice .invoice-create-table td {
    border: 0;
    border-bottom: 1px solid #eee;
    padding: 10px 10px 10px 130px;
    min-height: 42px;
    position: relative;
    text-align: left !important;
    white-space: normal;
    word-break: break-word;
    overflow: visible;
  }
  .content-addInvoice .invoice-create-table td:last-child {
    border-bottom: 0;
  }
  .content-addInvoice .invoice-create-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 10px;
    top: 10px;
    width: 105px;
    font-weight: 700;
    color: #333;
    white-space: normal;
    word-break: break-word;
  }
  .content-addInvoice .invoice-create-table td.total-row {
    padding-left: 10px;
  }
  .content-addInvoice .invoice-create-table td.total-row::before {
    display: none;
  }
  .content-addInvoice .btn,
  .content-addInvoice button.btn {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .content-addInvoice .invoice-create-table td {
    padding-left: 105px;
    font-size: 0.8rem;
  }
  .content-addInvoice .invoice-create-table td::before {
    width: 85px;
    font-size: 0.78rem;
  }
  .content-addInvoice .search-container button,
  .content-addInvoice .btn {
    min-height: 44px;
  }
}

/*
--------------------------------------------------------
12. Buchhaltung
--------------------------------------------------------
*/

.content-tax {
  width: 95%;
  margin: 8rem auto 5rem;
}
.content-tax .btn-view {
  padding: 0.6rem;
  border-radius: 10px;
  border: 1px solid var(--brand);
  background-color: #fff;
  color: var(--brand);
}
.content-tax .btn {
  padding: 0.5rem 1rem;
  border-radius: 10px;
  border: none;
  background-color: var(--brand);
  color: #fff;
}
/*
--------------------------------------------------------
12.3. Umsatz (Monat)
12.4. Umsatz (Jahr)
--------------------------------------------------------
*/

.content-tax .box { 
  background:#fff; 
  border:1px solid #ddd; 
  border-radius:10px; 
  padding:14px; 
  margin-top:12px; 
}
.content-tax .grid { 
  display:grid; 
  grid-template-columns: 1fr 1fr 1fr; 
  gap:10px; 
}
.content-tax .muted {
  opacity:.75; 
  font-size:12px; 
}

/*
--------------------------------------------------------
13. Statistik
--------------------------------------------------------
*/

.stats-wrap { 
  display: grid; 
  gap: 16px; 
  margin:4rem 0 2rem;
}
.stats-top {
  display: flex; 
  flex-wrap: wrap; 
  gap: 12px;
  align-items: center; 
  justify-content: space-between; 
  background-color: #f2f4f6; 
  padding: 1rem ; 
  border-radius: 8px;
}
.stats-cards {
  margin-top: 3rem; 
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.card-statistics {
  background: #fff; 
  border-radius:8px; 
  padding: 14px 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}
.card .label { 
  font-size: 13px; 
  opacity: 0.7; 
  margin-bottom: 6px; 
}
.card .value { 
  font-size: 22px; 
  font-weight: 700; 
}
.chart-card { 
  padding: 16px; 
}
.range { 
  display: flex; 
  gap: 8px; 
  flex-wrap: wrap; 
}
.range a {
  padding: 8px 10px; 
  border-radius: 4px;
  background: #f2f4f6; color: #1d1d1d;
  font-size: 14px;
}
.range a.active { 
  background: var(--brand); 
  color: #fff; 
}
canvas { 
  width: 100% !important; 
  height: 320px !important; 
}
.chart {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.chart-card {
  width: 100%;
}

@media (max-width: 768px) {
  .chart {
    grid-template-columns: 1fr; /* nur 1 Spalte */
  }
}

/*
--------------------------------------------------------
 13.1. Statistik Kunden
--------------------------------------------------------
*/

.content-statistic {
  width: 95%;
  margin: 8rem auto 5rem;
}
.content-statistic .filter-box {
  width:98%;
  background:#fff;
  border:1px solid #ddd;
  border-radius:10px;
  padding:12px;
  display:flex;
  gap:12px;
  align-items:flex-end;
  flex-wrap:wrap;
  margin-top: 10px;
}
.content-statistic .filter-box label {
  font-weight:700;
  font-size:13px;
  display:block;
  margin-bottom:6px;
}
.content-statistic .filter-box select {
  min-width:220px;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid #ccc;
  background:#fff;
}
.content-statistic .filter-actions {
  display:flex;
  gap:10px;
}
.content-statistic .btn {
  display:inline-flex;gap:8px;align-items:center;
  padding:8px 10px;border-radius:8px;border:1px solid #ccc;background:#fff;
  cursor:pointer;font-weight:600;font-size:13px;
  text-decoration:none;
}
.content-statistic .btn-apply {
  border-color: var(--brand); 
  color: var(--brand);
}
.content-statistic  .btn-reset {
  border-color:#999;
  color:#333;
}
.content-statistic .tiles {
  width:98%;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.content-statistic .tile {
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:14px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.content-statistic  .tile .head {
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom: 10px;
}
.content-statistic .tile .title { 
  font-weight:800; 
  font-size:14px; 
}
.content-statistic .tile .icon {
  width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid #e5e7eb;background:#fafafa;
}
.content-statistic .tile .value {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: .2px;
}
.content-statistic .tile .sub { 
  margin-top:6px; 
  color:#6b7280; 
  font-size:12px; 
}

/*
--------------------------------------------------------
14. Administration
--------------------------------------------------------
*/

.content-company {
  width: 95%;
  margin: 5rem auto;
}
.content-company .card-content h3 {
  padding-top: 3rem !important;
}
.content-company .card-box { 
  width: 50%; 
  flex-direction: row; 
  justify-content: center; 
  align-items: center; 
  border: 1px solid #ddd; 
  border-radius: 10px; 
  padding: 16px; 
}
.content-company .card-box label,
.content-company .card-box input {
  width: 100%;
  padding: 0.5rem;
}
.content-company .card-box input {
  margin-top: 0.5rem;
}

/*
--------------------------------------------------------
14.1. Mitarbeiter
--------------------------------------------------------
*/

.content-staff {
  width: 95%;
  margin: 8rem auto 5rem;
}
.content-staff .tabs{
  display:flex; 
  gap:10px; 
  flex-wrap:wrap; 
  margin:14px 0;
}
.content-staff .tab{
  padding:10px 14px; 
  border-radius:5px; 
  border:1px solid #ddd; 
  text-decoration:none; 
  color:#111; 
  background:#fff; 
  margin: 2rem 0;
}
.content-staff .tabs a {
  font-size: 0.825rem;
}
.content-staff .tab.active {
  background:var(--brand);
  color:#fff;
  border-color:#222;
}
.content-staff .card-staff {
  background:#fff;
  border-radius:12px;
  padding:16px;
  margin:16px 0;
}
.content-staff .topbar {
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.content-staff .searchbox {
  display:flex;
  gap:8px;
  justify-content: flex-end; 
  align-items:center;
  width:25rem;
}
.content-staff input[type="text"] {
  padding:10px;
  border:1px solid #ccc;
  border-radius:10px;
  width: 100%;
}
.content-staff .btn {
  padding:10px 14px;
  border-radius:5px;
  border:0;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  gap:8px;
  align-items:center;
}
.content-staff .btn-light {
  background: var(--brand);
  color:white;
}
.content-staff .btn-reset {
  background: red;
  color:white;
}
.content-staff .table-wrap {
  overflow:auto; 
  max-height:65vh; 
  border:1px solid #eee; 
  border-radius:12px;
}
.content-staff table {
  width:max-content;
  border-collapse:collapse;
  table-layout:auto;
  font-size: 0.825rem;
}
.content-staff th,
.content-staff td {
  border-bottom:1px solid #eee;
  padding:10px;
  text-align:left;
  vertical-align:top;
  white-space:nowrap;
}
.content-staff th {
  background:#fafafa;
  position:sticky;
  top:0;
  z-index:1;
}
.content-staff .wrap {
  white-space:normal;
  max-width:260px;
}
.content-staff .pager {
  display:flex;
  gap:8px;
  justify-content:flex-end;
  margin-top:12px;
  flex-wrap:wrap;
}
.content-staff .pager a {
  padding:8px 10px;
  border:1px solid #ddd;
  border-radius:10px;
  text-decoration:none;
  color:#111;
  background:#fff;
}
.content-staff .pager a.active {
  background:#222;
  color:#fff;
  border-color:#222;
}
.content-staff i {
  color: limegreen;
}

/* Status Toggle farbig */

.content-staff .status-toggle {
  padding: 0; border-radius: 10px;
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; border:1px solid #ddd; background:#fff;
}
.content-staff .status-toggle.on  { 
  color:limegreen; 
  border-color:#fff; 
  background:#e8fff1; 
}
.content-staff .status-toggle.off { 
  color:#b00020; 
  border-color:#ffb5b5; 
  background:#ffecec; 
}
.content-staff .status-toggle i { 
  font-size:1.05rem; 
}


/*
--------------------------------------------------------
 14.2. Zeiterfassung Mitarbeiter (Übersicht)
--------------------------------------------------------
*/

.content-staff-overview {
  width: 95%;
  margin: 8rem auto 5rem;
}
.content-staff-overview .card-time-staff {
  width: 100%;
}
.content-staff-overview .card-export,
.content-staff-overview .filter-card {
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:16px
}
.content-staff-overview .filter-card {
  margin:16px 0; 
  width: 100%;
}
.content-staff-overview .row {
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  align-items:flex-end
}
.content-staff-overview .row label {
  display:flex;
  flex-direction:column;
  font-weight:600;
  font-size:14px;
  gap:6px;
  min-width:160px
}
.content-staff-overview .row input,
.content-staff-overview .row select {
  padding:10px 12px;
  border-radius:8px;
  border:1px solid rgba(0,0,0,.15)
}
.content-staff-overview .actions {
  display:flex;
  gap:10px
}
.content-staff-overview .btn {
  display:inline-block;
  padding:10px 14px;
  border-radius:8px;
  border:1px solid var(--brand);
  background:var(--brand);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:13px
}
.content-staff-overview .btn-ghost {
  background:#fff;
  color:var(--brand)
}
.content-staff-overview .badge-time-staff {
  display:inline-block;
  padding:4px 10px;
  border-radius:8px;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
}
.content-staff-overview .badge-admin { 
  background:#ffebee;
  color:#c62828;
  border:1px solid #c62828;
}
.content-staff-overview .badge-staff {
  background:#e3f2fd;
  color:#1565c0;
  border:1px solid #1565c0
}
.content-staff-overview .badge-user {
  background:#e8f5e9;
  color:#2e7d32;
  border:1px solid #2e7d32
}
.content-staff-overview a {
  color:#000;font-weight:500
}

@media (max-width: 991px){
  .content-staff-overview{
    padding-left:12px;
    padding-right:12px;
  }
  .content-staff-overview .row{
    gap:12px;
  }
  .content-staff-overview .row label{
    flex:1 1 calc(50% - 12px);
    min-width:220px;
  }
  .content-staff-overview .actions{
    width:100%;
    flex-wrap:wrap;
  }
  .content-staff-overview .card-export > div{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
  }
  .content-staff-overview .table-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .content-staff-overview .admin-report-table{
    width:auto;
    min-width:780px;
  }
}

@media (max-width: 767px){
  .content-staff-overview .card-time{
    margin:1em 0 !important;
  }
  .content-staff-overview .row{
    display:block;
  }
  .content-staff-overview .row label{
    display:block;
    min-width:0;
    margin-bottom:12px;
  }
  .content-staff-overview .row input,
  .content-staff-overview .row select{
    width:100%;
    box-sizing:border-box;
  }
  .content-staff-overview .actions{
    display:flex;
    flex-direction:column;
    width:100%;
  }
  .content-staff-overview .actions .btn,
  .content-staff-overview .actions .btn-ghost{
    width:100%;
    text-align:center;
  }
  .content-staff-overview .card-export > div{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .content-staff-overview .card-export .btn{
    width:100%;
    text-align:center;
  }
  .content-staff-overview .table-wrap{
    overflow:visible;
  }
  .content-staff-overview .admin-report-table,
  .content-staff-overview .admin-report-table thead,
  .content-staff-overview .admin-report-table tbody,
  .content-staff-overview .admin-report-table th,
  .content-staff-overview .admin-report-table td,
  .content-staff-overview .admin-report-table tr{
    display:block;
    width:100%;
  }
  .content-staff-overview .admin-report-table{
    background:transparent;
    margin-top:12px;
  }
  .content-staff-overview .admin-report-table thead{
    display:none;
  }
  .content-staff-overview .admin-report-table tbody tr{
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:12px;
    margin-bottom:14px;
    padding:10px;
    overflow:hidden;
  }
  .content-staff-overview .admin-report-table td{
    border:0;
    border-bottom:1px solid #eee;
    padding:10px 10px 10px 130px;
    min-height:42px;
    position:relative;
    text-align:left !important;
    white-space:normal;
    word-break:break-word;
    overflow:visible;
  }
  .content-staff-overview .admin-report-table td:last-child{
    border-bottom:0;
  }
  .content-staff-overview .admin-report-table td::before{
    content:attr(data-label);
    position:absolute;
    left:10px;
    top:10px;
    width:105px;
    font-weight:700;
    color:#333;
    white-space:normal;
    word-break:break-word;
  }
}

@media (max-width: 480px){
  .content-staff-overview .table-wrap{
    width:100%;
    overflow:visible;
  }
  .content-staff-overview .admin-report-table{
    width:100%;
    min-width:0;
    border:0;
  }
  .content-staff-overview .admin-report-table,
  .content-staff-overview .admin-report-table thead,
  .content-staff-overview .admin-report-table tbody,
  .content-staff-overview .admin-report-table th,
  .content-staff-overview .admin-report-table td,
  .content-staff-overview .admin-report-table tr{
    display:block;
    width:100%;
  }
  .content-staff-overview .admin-report-table thead{
    display:none;
  }
  .content-staff-overview .admin-report-table tbody tr{
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:12px;
    margin-bottom:14px;
    padding:10px;
    width:100%;
    box-sizing:border-box;
  }
  .content-staff-overview .admin-report-table td{
    border:0;
    border-bottom:1px solid #eee;
    padding:10px 10px 10px 100px;
    min-height:40px;
    position:relative;
    text-align:left !important;
    width:100%;
    box-sizing:border-box;
    font-size:0.82rem;
  }
  .content-staff-overview .admin-report-table td:last-child{
    border-bottom:0;
  }
  .content-staff-overview .admin-report-table td::before{
    content:attr(data-label);
    position:absolute;
    left:10px;
    top:10px;
    width:80px;
    font-weight:700;
    color:#333;
    font-size:0.75rem;
  }
  .content-staff-overview .btn,
  .content-staff-overview .btn-ghost{
    min-height:44px;
    width:100%;
  }
}

/*
--------------------------------------------------------
 14.3. Zeiterfassung Mitarbeiter
--------------------------------------------------------
*/

.content-staff-timekeeping {
  width: 95%;
  margin: 8rem auto 5rem;
}
.content-staff-timekeeping .card-time-timekeeping {
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:16px;
  margin-bottom:14px;
}
.content-staff-timekeeping .muted {
  opacity:.75;
}
.content-staff-timekeeping .btn {
  display:inline-block;
  padding:5px 10px;
  margin: 0.5rem 0; 
  border-radius:8px;
  border:1px solid var(--brand);
  background:var(--brand);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:.825rem;
}
.content-staff-timekeeping .btn:hover {
  background-color:#fff;
  color:var(--brand);
}
.content-staff-timekeeping .btn-back {
  display:inline-block;
  padding:5px 10px;
  margin: 0.5rem 0; 
  border-radius:8px;
  border:1px solid var(--brand);
  background:var(--brand);
  color:#fff;
  text-decoration:none;
  text-align: center;
  font-weight:700;
  font-size:.825rem;
  max-width: 5rem;
}
.content-staff-timekeeping .btn.secondary {
  background:#444;
  border-color:#444;
}
.content-staff-timekeeping .btn.secondary:hover {
  background:#fff;
  border-color:#444;
  color:#444;
}
.content-staff-timekeeping .btn.green {
  background:#0b5;
  border-color:#0b5
}
.content-staff-timekeeping .btn.green:hover {
  background:#fff;
  border-color:#0b5;
  color:#0b5
}
.content-staff-timekeeping .btn.gray {
  background:#555;
  border-color:#555
}
.content-staff-timekeeping .btn.gray:hover {
  background:#fff;
  border-color:#555
}
.content-staff-timekeeping button.btn {
  cursor:pointer
}
.content-staff-timekeeping .inline-form {
  display:inline-block;
  margin:2px 4px 2px 0;
}
.content-staff-timekeeping .inline-form button {
  margin:0;
}
.content-staff-timekeeping .row {
  display:flex;
  gap:20px;
  flex-wrap: wrap;
  align-items:flex-end;
  justify-content:flex-start;
}
.content-staff-timekeeping .row > div {
  display:flex;
  flex-direction:column;
}
.content-staff-timekeeping label { 
  font-weight:600;
  margin-bottom:6px;
}
.content-staff-timekeeping select,
.content-staff-timekeeping input[type="date"],
.content-staff-timekeeping input[type="text"] {
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.15);
  background:#fff
}
.content-staff-timekeeping select {
  min-width:180px;
}
.content-staff-timekeeping .badge-staff-time {
  display:inline-block;
  padding:3px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  border:1px solid rgba(0,0,0,.12);
  margin-right:6px;
  white-space:nowrap;
}
.content-staff-timekeeping .badge-staff-time.sick {
  background:#ffe7e7;
}
.content-staff-timekeeping .badge-staff-time.vac {
  background:#e7f2ff;
}
.content-staff-timekeeping .badge-staff-time.hol {
  background:#fff3cd;
  border-color:#ffe8a1;
}
.content-staff-timekeeping .badge-staff-time.rule {
  background:#e8fff1;
  border-color:#b7f5cf;
}
.content-staff-timekeeping .badge-staff-time.free {
  background:#f1f1f1;
}
.content-staff-timekeeping .badge-staff-time.ot {
  background:#fff0f6;
  border-color:#ffb3d1;
}
.content-staff-timekeeping .badge-staff-time.violation {
  background:#ffdddd;
  border-color:#ff7a7a;
}
.content-staff-timekeeping tr.row-sick td {
  background:rgba(255,231,231,0.55);
}
.content-staff-timekeeping tr.row-vac td {
  background:rgba(231,242,255,0.55);
}
.content-staff-timekeeping tr.row-both td {
  background:linear-gradient(90deg, rgba(255,231,231,.55), rgba(231,242,255,.55));
}
.content-staff-timekeeping tr.row-violation td {
  background:rgba(255,122,122,0.18)!important;
}
.content-staff-timekeeping thead tr th {
  background:#fafafa!important;
}
.content-staff-timekeeping .row-muted td {
  opacity:.55;
}
.content-staff-timekeeping .row-muted td a,
.content-staff-timekeeping .row-muted td button {
  pointer-events:auto;
  opacity:1;
}
.content-staff-timekeeping .ot-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin:14px 2em;
}
.content-staff-timekeeping .ot-card {
  background:#fff;
  border:1px solid #eee;
  border-radius:14px;
  padding:12px;
}
.content-staff-timekeeping .ot-title {
  font-weight:900;
  margin-bottom:6px;
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.content-staff-timekeeping .ot-small {
  color:#666;
  font-size:.85rem;
  margin-top:2px;
  line-height:1.25;
}
.content-staff-timekeeping .ot-diff {
  font-size:1.4rem;
  font-weight:900;
  letter-spacing:.4px;
}
.content-staff-timekeeping .ot-diff small {
  font-size:.825rem;
}
.content-staff-timekeeping .ot-pos {
  color:#111;
}
.content-staff-timekeeping .ot-neg {
  color:#c00000;
}
.content-staff-timekeeping .ot-off {
  opacity:.55
}
.content-staff-timekeeping .note {
  background:#eef6ff;
  border:1px solid #cfe6ff;
  padding:10px;
  border-radius:12px;
  margin-top:10px;
}
.content-staff-timekeeping .warn {
  background:#ffecec;
  border:1px solid #ffb5b5;
  padding:10px;
  border-radius:12px;
  margin-top:10px;
}
.content-staff-timekeeping .table-wrap {
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}
.content-staff-timekeeping .admin-user-time-table {
  width:100%;
}

@media (max-width:1100px) {
  .content-staff-timekeeping .ot-grid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:650px) {
  .content-staff-timekeeping .ot-grid{grid-template-columns:1fr;}
}


@media (max-width: 991px) {
  .content-staff-timekeeping .row{
    gap:12px;
  }
  .content-staff-timekeeping .row > div{
    min-width:220px;
  }
  .content-staff-timekeeping .admin-user-time-table{
    width:auto;
    min-width:1400px;
  }
}

@media (max-width: 768px){
  .content-staff-timekeeping .card-time-timekeeping {
    margin:1em 0 !important;
    padding:12px;
  }
  .content-staff-timekeeping .row{
    display:block;
  }
  .content-staff-timekeeping .row > div{
    display:block;
    min-width:0;
    margin-bottom:12px;
  }
  .content-staff-timekeeping .row label{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
  }
  .content-staff-timekeeping .row select,
  .content-staff-timekeeping .row input[type="date"],
  .content-staff-timekeeping .row input[type="text"]{
    width:100%;
    box-sizing:border-box;
  }
  .content-staff-timekeeping .inline-form{
    display:block;
    margin:6px 0;
  }
  .content-staff-timekeeping .inline-form .btn,
  .content-staff-timekeeping .btn{
    width:100%;
    text-align:center;
  }
  
  /* 1. Block volle Breite, darunter 3 gleich breite Blöcke */
  .content-staff-timekeeping .stats-grid{
    grid-template-columns:repeat(3, 1fr) !important;
    gap:8px !important;
    margin:1em 0 !important;
  }
  .content-staff-timekeeping .stats-grid > .content-staff-timekeeping .card-time-timekeeping:first-child{
    grid-column:1 / -1;
  }
  
  /* Tabelle bleibt Tabelle und scrollt im weißen Block */
  .content-staff-timekeeping .table-wrap{
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
  }
  .content-staff-timekeeping .admin-user-time-table{
    width:auto;
    min-width:1400px;
  }
  .content-staff-timekeeping .ot-grid{
    margin:1em 0;
  }
}

@media (max-width: 480px) {
  .content-staff-timekeeping .stats-grid{
    grid-template-columns:1fr !important;
    gap:8px !important;
    margin:1em 0 !important;
  }
  .content-staff-timekeeping .stats-grid > .content-staff-timekeeping .card-time-timekeeping:first-child{
    grid-column:1 / -1;
  }
  .content-staff-timekeeping .admin-user-time-table{
    width:auto;
    min-width:1400px;
  }
}

/*
--------------------------------------------------------
14.4. Login Staff
--------------------------------------------------------
*/

.content-login-staff {
  width: 95%;
  margin: 8rem auto ;
}
.content-login-staff .action-btn { 
  padding:5px 10px; 
  border-radius:3px; 
  text-decoration:none; 
}
.content-login-staff .edit { 
  color:var(--brand) 
}
.content-login-staff input, 
.content-login-staff select { 
  padding:8px; 
  border:1px solid #ccc; 
  border-radius:4px; 
  width:20em; 
  margin-right: 1em;
}
.content-login-staff button { 
  padding:8px 14px; 
  border:none; 
  background: var(--brand); 
  color:white; 
  border-radius:4px; 
  border: 0.5px solid var(--brand); 
  cursor:pointer; 
}
.content-login-staff button:hover { 
  background:#fff; 
  color: var(--brand);  
}
.content-login-staff .clarity {
  width: 80%;
  margin: 5em 0;
}
.content-login-staff .clarityBox form {
  width: 100%;
  display: flex; 
  flex-direction: row; 
  align-items: center; 
  gap:10px;
}
.content-login-staff .back {
  padding:8px 14px; 
  font-size: .825rem; 
  border:1px solid #40739e; 
  color:#40739e; 
  border-radius:4px; 
  cursor:pointer;
  text-decoration: none;
}
.content-login-staff hr {
  margin: 2em 0;
}
.content-login-staff .badge-login {
  display:inline-block;
  padding:4px 10px;
  border-radius:5px;
  text-align: center;
  font-size:.75rem;
  font-weight:700;
  border:1px solid rgba(0,0,0,.15);
  background:#fff;
  white-space:nowrap;
}
.content-login-staff .badge-on { 
  border-color:#2e7d32; 
  color:#2e7d32; 
  background:#e8f5e9; 
}
.content-login-staff .badge-off { 
  border-color:#c62828; 
  color:#c62828; 
  background:#ffebee; 
}
.content-login-staff .toggle-btn {
  display:inline-block;
  padding:6px 10px;
  border-radius:5px;
  border:1px solid rgba(0,0,0,.15);
  background:#fff;
  color:#111;
  font-weight:700;
  font-size:.75rem;
  cursor:pointer;
}
.content-login-staff .toggle-btn:hover { 
  background:#f6f7f9; 
}
.content-login-staff .toggle-on { 
  border-color:#2e7d32; 
  color:#2e7d32; 
}
.content-login-staff .toggle-off { 
  border-color:#c62828; 
  color:#c62828; 
}
.content-login-staff .msg {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 8px;
  background: #fff;
}
    
/*
--------------------------------------------------------
14.5. Login Logs
--------------------------------------------------------
*/

.content-logs {
  width: 95%;
  margin: 8rem auto;
}
.content-logs .container { 
  display: flex; 
  justify-content: center; 
  padding: 20px; 
}
.content-logs h3 { 
  margin-bottom: 3rem; 
}


/*
--------------------------------------------------------
 14.6. BackUp
--------------------------------------------------------
*/