/* Base */
 body  {
   font-family: Arial, sans-serif;
   background-color: #f4f4f4;
   color: #333;
   margin: 0;
   padding: 0;
   
}
 
/* --- Header: global, geometrisch mittig --- */
 header  {
   background-color: #A12A7C;
   color: white;
   padding: 10px;
   
  /* Symmetrisches Grid: echte Mitte */
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   
  /* links 
 MITTE 
 rechts */
   align-items: center;
   gap: 10px;
   
}
 
/* --- Logo: generischer Selektor für alle Seiten --- */
 
/* Wichtig: Einige Seiten nutzen ohne class="logo". Daher generisch targeten. */
 header > img  {
   height: 50px;
   max-height: 50px;
   width: auto;
   background-color: white;
   padding: 5px;
   border-radius: 5px;
   margin-right: 0;
   
  /* Abstand via grid gap */
   grid-column: 1;
   
  /* explizit linke Spalte */
   justify-self: start;
   object-fit: contain;
   
}
 
/* Überschrift exakt in der Mitte */
 header h1  {
   color: white;
   font-size: 1.8em;
   margin: 0;
   text-align: center;
   grid-column: 2;
   
  /* mittlere Spalte */
   
}
 
/* Button-Gruppe rechts */
 .header-buttons  {
   display: flex;
   gap: 16px;
   grid-column: 3;
   
  /* rechte Spalte */
   justify-self: end;
   
}
 .header-buttons button  {
   background-color: white;
   color: #A12A7C;
   border: 2px solid #A12A7C;
   padding: 8px 12px;
   border-radius: 4px;
   cursor: pointer;
   font-size: 0.9em;
   font-weight: bold;
   transition: all 0.3s ease;
   
}
 .header-buttons button:hover  {
   background-color: #f4f4f4;
   
}
 
/* --- Restliche globale Styles (unverändert) --- */
 h1  {
   color: #A12A7C;
   
}
 label  {
   display: inline-block;
   width: 150px;
   margin: 10px 0 5px;
   
}
 input[type="text"], input[type="password"], select  {
   width: 100%;
   padding: 8px;
   margin: 5px 0 10px;
   border: 1px solid #ccc;
   border-radius: 4px;
   box-sizing: border-box;
   
}
 button  {
   background-color: #A12A7C;
   color: white;
   padding: 10px 15px;
   border: none;
   border-radius: 4px;
   cursor: pointer;
   
}
 button:hover  {
   background-color: #8e246b;
   
}
 button:disabled  {
   background-color: #ccc;
   color: #666;
   cursor: not-allowed;
   
}
 pre  {
   background-color: #f4f4f4;
   padding: 10px;
   border: 1px solid #ccc;
   border-radius: 4px;
   overflow-x: auto;
   
}
 .container  {
   max-width: 2000px;
   min-width: 80vw;
   margin: 20px auto;
   padding: 20px;
   background-color: white;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   border-radius: 8px;
   flex: 1 0 auto;
   
}
 .table-wrapper  {
   overflow-x: auto;
   max-width: 100%;
   
}
 table  {
   width: 100%;
   border-collapse: collapse;
   margin-top: 20px;
   table-layout: auto;
   min-width: max-content;
   
}
 th, td  {
   border: 1px solid #ccc;
   padding: 8px;
   text-align: left;
   white-space: nowrap;
   
}
 th  {
   background-color: #eee;
   position: relative;
   
}
 th .resizer  {
   position: absolute;
   right: 0;
   top: 0;
   width: 5px;
   height: 100%;
   cursor: col-resize;
   user-select: none;
   
}
 th.no-border, td.no-border  {
   border: none !important;
   
}
 th.no-border  {
   background-color: white !important;
   
}
 
/* Sticky Spalten */
 td.sticky-action, th.sticky-action  {
   position: sticky;
   right: 0;
   background: white;
   z-index: 2;
   
}
 td.sticky-id, th.sticky-id  {
   position: sticky;
   left: 0;
   background: white;
   z-index: 2;
   box-shadow: 2px 0 5px rgba(0,0,0,0.1);
   
}
 .table-controls  {
   position: sticky;
   left: 0;
   background: white;
   z-index: 3;
   padding-right: 20px;
   
}
 #columnToggles button  {
   background: none;
   border: none;
   padding: 4px 6px;
   margin-right: 4px;
   font-size: 14px;
   cursor: pointer;
   color: #A12A7C;
   
}
 #columnToggles button:hover  {
   text-decoration: underline;
   
}
 #columnToggles label  {
   display: inline-flex;
   align-items: center;
   white-space: nowrap;
   margin: 2px 6px 2px 0;
   font-size: 0.85em;
   
}
 #loadingIndicator span  {
   animation: pulse 1.5s infinite;
   
}
 @keyframes pulse  {
   0%  {
     opacity: 1;
     
  }
   50%  {
     opacity: 0.5;
     
  }
   100%  {
     opacity: 1;
     
  }
   
}
 .hidden-config  {
   display: none !important;
   
}
 #logoutHeaderBtn  {
   background-color: white;
   color: #A12A7C;
   border: 2px solid #A12A7C;
   padding: 8px 12px;
   border-radius: 4px;
   cursor: pointer;
   font-size: 0.9em;
   font-weight: bold;
   transition: all 0.3s ease;
   
}
 #logoutHeaderBtn:hover  {
   background-color: #f4f4f4;
   
}
 .action-button  {
   background-color: white;
   color: #A12A7C;
   border: 2px solid #A12A7C;
   padding: 4px 8px;
   border-radius: 4px;
   cursor: pointer;
   font-size: 0.8em;
   font-weight: bold;
   transition: all 0.3s ease;
   
}
 .action-button:hover  {
   background-color: #A12A7C;
   color: white;
   
}
 .column-filter  {
   border: none;
   background-color: transparent;
   outline: none;
   padding: 0;
   margin: 0;
   font-size: 0.9em;
   font-family: inherit;
   height: 1.5em;
   line-height: 1.5em;
   box-sizing: border-box;
   
}
 
/* Kopfzeilenfarben */
 thead tr:first-child th  {
   background-color: #A12A7C;
   color: white;
   border-top: 1px solid #ccc;
   border-left: 1px solid #ccc;
   border-right: 1px solid #ccc;
   
}
 
/* ganz rechte Kopfzelle ohne Top/Right/Bottom-Border */
 thead tr:first-child th.sticky-action, thead tr:nth-child(2) th.sticky-action  {
   border-top: none !important;
   border-right: none !important;
   border-bottom: none !important;
   background-color: #fff;
   
}
 
/* Filterzeile hellgrau */
 thead tr:nth-child(2) th  {
   background-color: #f0f0f0;
   color: black;
   
}
 
/* Toolbar-Controls */
 .right-controls  {
   display:flex;
   align-items:center;
   gap:8px;
   margin-left:auto;
   
}
 .toolbar-btn, #columnToggleBtn, #rowsPerPage  {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   height: 36px;
   padding: 6px 12px;
   margin: 0;
   font-size: 14px;
   line-height: 1.2;
   border: 1px solid #999;
   border-radius: 6px;
   background-color: #F0F0F0;
   color: #000;
   box-sizing: border-box;
   vertical-align: middle;
   
}
 #rowsPerPage  {
   width: auto;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   padding-right: 28px;
   
}
 
/* Sticky-Footer */
 body  {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
   
}
 .site-footer  {
   background-color: #A12A7C;
   color: #fff;
   padding: 12px 20px;
   text-align: center;
   flex-shrink: 0;
   
}
 
/* Tabellenbreite im Vollbild deckeln */
 @media (min-width: 1400px)  {
   .table-wrapper  {
     max-width: calc(80vw - 40px);
     
    /* 80vw minus Container-Padding */
     margin-left: auto;
     margin-right: auto;
     
  }
   
}
 

/* Hinweisbox für leere Tabellen-/Abfrageergebnisse */
#formattedTable .no-data {
  text-align: center;
  color: #666;
  padding: 16px;
  font-style: italic;
}

/* Footer-Layout */
 .site-footer .footer-content  {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
   gap: 12px;
   
}
 .footer-left  {
   justify-self: start;
   text-align: left;
   
}
 .footer-center  {
   justify-self: center;
   text-align: center;
   
}
 .footer-right  {
   justify-self: end;
   text-align: right;
   margin-left: auto;
   
}
 
/* Hover-State: Filter-zurücksetzen in hellem Rot */
 .toolbar-btn:hover  {
   background-color: #f8d7da;
   border-color: #e4aeb3;
   color: #7a1b1f;
   
}
 
/* --- Responsive Header --- */
 @media (max-width: 600px)  {
   header  {
     grid-template-columns: 1fr;
     
    /* alles untereinander */
     justify-items: center;
     text-align: center;
     
  }
   header > img  {
     height: 35px;
     margin-bottom: 10px;
     
  }
   header h1  {
     font-size: 1.4em;
     margin: 10px 0;
     grid-column: auto;
     
  }
   .header-buttons  {
     flex-wrap: wrap;
     justify-content: center;
     margin-top: 10px;
     grid-column: auto;
     
  }
   
}
 
/* === AddNew Modal === */
 .modal-overlay  {
   position: fixed;
   inset: 0;
   background: rgba(0,0,0,.5);
   display: none;
   align-items:center;
   justify-content:center;
   z-index: 2000;
   
}
 .modal-box  {
   background:#fff;
   width:min(900px, 95vw);
   max-height: 85vh;
   overflow:auto;
   border-radius:10px;
   box-shadow:0 10px 30px rgba(0,0,0,.3);
   padding:20px;
   
   border-top: 6px solid #A12A7C;
  
  
}
 .modal-header  {
   display:flex;
   align-items:center;
   justify-content:space-between;
   border-bottom:1px solid #eee;
   margin:-20px -20px 15px;
   padding:14px 20px;
   
}
 .modal-header h3  {
   margin:0;
   color:#000;
   
}
 .modal-close  {
   background:none;
   border:none;
   font-size:24px;
   cursor:pointer;
   color:#333;
   
}
 .form-grid  {
   display:block;
   
}
 .form-row-2col  {
   display:grid;
   grid-template-columns: 240px 1fr;
   align-items:center;
   gap:10px;
   margin:8px 0;
   
}
 .form-label  {
   font-weight:bold;
   
}
 .form-input  {
   width:100%;
   padding:8px;
   border:1px solid #ccc;
   border-radius:4px;
   box-sizing:border-box;
   
}
 .modal-actions  {
   display:flex;
   justify-content:flex-end;
   gap:10px;
   margin-top:18px;
   
}
 .action-button.secondary  {
   background-color:#f0f0f0;
   color:#A12A7C;
   border:2px solid #A12A7C;
   
}
 .action-button.secondary:hover  {
   background-color:#A12A7C;
   color:#fff;
   
}
/* === Zeilenhöhen-Fix: geringere Abstände um Eingabefelder in Tabellen === */
#formattedTable table td > input[type="text"],
#formattedTable table td > input[type="date"],
#formattedTable table th > input[type="text"],
#formattedTable table th > input[type="date"]  {
    margin: 0;
   
  /* überschreibt das globale margin: 5px 0 10px; */
}
/* Zell-Padding reduzieren, wenn die Zelle ein Eingabefeld enthält
   (betrifft Datenzellen und Filterzellen in thead). */
#formattedTable table td:has(> input),
#formattedTable table th:has(> input)  {
    padding: 4px 6px;
   
  /* vorher 8px */
    vertical-align: middle;
  
  
}
/* --- Modal Close hover override (subtle light grey) --- */
.modal-close:hover  {
    background-color: #eee;
  
    color: #333;
  
  
}
html, body  {
   overflow-x: hidden;
   
}
.container  {
    min-width: 0;
                   
  /* override legacy min-width */
    width: 100%;
                    
  /* no vw: avoids tiny horizontal gap */
    max-width: 1800px;
              
  /* use more width on large screens */
    margin-left: auto;
              
  /* center */
    margin-right: auto;
  
    padding-left: clamp(8px, 2vw, 24px);
     
  /* slim side padding */
    padding-right: clamp(8px, 2vw, 24px);
  
    overflow-x: hidden;
             
  /* keep page from scrolling horizontally */
}
/* Nur der Tabellenbereich darf horizontal scrollen */
.table-wrapper, #formattedTable  {
   width: 100%;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   
}
/* Überschrift-/Aktionszeile: sauberer Umbruch bei wenig Platz */
.container > h2  {
   display:flex;
   flex-wrap:wrap;
   gap:10px;
   
}
.container > h2 > #outputHeading  {
   flex:1 1 320px;
   min-width:160px;
   
}
.container > h2 > div  {
   display:flex;
   flex-wrap:wrap;
   gap:10px;
   
}
/* Bedienelemente oberhalb der Tabelle */
.table-controls  {
   display:flex;
   flex-wrap:wrap;
   gap:10px;
   
}
.right-controls  {
   display:flex;
   flex-wrap:wrap;
   gap:8px;
   
}
/* Seitennavigation zentriert; darf umbrechen */
#pagination  {
   display:flex;
   flex-wrap:wrap;
   justify-content:center;
   gap:6px;
   
}
#pagination button  {
   flex:0 0 auto;
   
}
/* Kompaktere Bedienelemente auf sehr kleinen Bildschirmen */
@media (max-width: 480px)  {
    .action-button, .toolbar-btn, #columnToggleBtn, #rowsPerPage  {
     padding:6px 10px;
     font-size:13px;
     
  }
    #tableFilter  {
     width:100%;
     min-width:0;
     
  }
}
/* Breiterer Container auf Desktop, Padding in Breite enthalten */
.container  {
   max-width: 1800px;
   box-sizing: border-box;
   
}
/* Auf großen Bildschirmen volle Breite für .table-wrapper (übersteuert ältere Begrenzung) */
@media (min-width: 1400px)  {
   .table-wrapper  {
     max-width: 100% !important;
     margin-left: 0;
     margin-right: 0;
     
  }
   
}
/* Header-Layout (Responsive Grid mit Bereichen) */
header  {
   grid-template-columns: auto 1fr auto;
   grid-template-areas: 'logo title buttons';
   
}
header > img  {
   grid-area: logo;
   
}
header h1  {
   grid-area: title;
   
}
.header-buttons  {
   grid-area: buttons;
   
}
/* Mittelbreite: Titel leicht verkleinern, um einzeiligen Header länger zu erhalten */
@media (max-width: 900px)  {
   header h1  {
     font-size: clamp(1.0rem, 2.6vw, 1.3rem);
     
  }
   
}
/* Sehr schmale Bildschirme: zweizeiliger Header (Logo+Buttons oben, Titel darunter) */
@media (max-width: 600px)  {
    header  {
     grid-template-columns: auto 1fr auto;
     grid-template-areas: 'logo buttons buttons' 'title title title';
     
  }
    .header-buttons  {
     justify-self: end;
     
  }
    header h1  {
     text-align: center;
     
  }
}


/* === Überschrift seitenzentriert – unabhängig von Grid-Spalten === */
header { position: relative; }
header h1 {
  position: absolute;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  grid-area: 1 / 1 / -1 / -1;

  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: max-content;
  max-width: calc(100% - 48px);
  margin: 0;
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 600px) {
  header h1 {
    position: static;
    transform: none;
    width: auto;
    max-width: 100%;
    pointer-events: auto;
    z-index: auto;
  }
}