/* Datei: style_backend.css  */
/* Basis-Body-Styling >> zentrales Style-Sheet, kann auf in Datei ausgelagert werden*/
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

/* Scroll-Wrapper */
.scroll-wrapper {
  display: block;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  padding: 10px;
}

.header-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
}

/* Footer */
.footer-container {
  display: block; /* von none auf block geändert */
  padding: 10px;
  background-color: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  width: 1400px;
  height: auto;
  margin-bottom: 30px;
}

/* Subnavigation und Hauptinhalt */
.tab-navi,
.tab-content {
  display: block;
  padding: 10px;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 10px;
  margin-top: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 1400px;
}

.tab-navi.active,
.tab-content.active {
  display: block;
}

/* ------------------------------
   Lightbox Styling
   ------------------------------ */

/* Overlay */
.lightbox {
  background-color: rgba(0, 0, 0, 0.8); /* dunkler Hintergrund */
  align-items: center;
  justify-content: center;
}

/* Inhalt der Lightbox */
.lightbox-content {
  background-color: #ffffff;
  width: 90%;
  height: 90%;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  position: relative;       /* <— NEU: Bezugspunkt für das X */
}

/* iFrame im Lightbox-Inhalt */
.lightbox-content iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Schließen-Button */
.close-lightbox {
  position: absolute;
  top: 20px;
  right: 20px;
  background: #87CEEB;       /* besser sichtbar – hellblau wie früher */
  border: none;
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  z-index: 1001;             /* über dem iFrame */
}

/********************** Buttons Backend *************************************/
/* A Styling für Lightbox-Buttons, Button für Hauptnavigation in der Navileiste = 1. Ebene */
/* wird von lightbox.js Script gesteuert*/
.lightbox-button {
  padding: 7px 11px;
  font-size: 0.8rem;
  border: 2px solid #4caf50;
  border-radius: 8px;
  background-color: #f9f9f9;
  text-decoration: none;
  color: #000000;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* Hover-Effekt für Buttons */
.lightbox-button:hover {
  background-color: #e8f5e9; /* leichtes Grün */
  border-color: #388e3c;
  color: #000000;
}

/* B Styling für NORMALE-Buttons, genauso wie .lightbox-button-Button in A für Hauptnavigation */
.normal-button {
  padding: 7px 11px;
  font-size: 0.8rem;
  border: 2px solid #4caf50;
  border-radius: 8px;
  background-color: #f9f9f9;
  text-decoration: none;
  color: #000000;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* Hover-Effekt für Buttons */
.normal-button:hover {
  background-color: #e8f5e9; /* leichtes Grün */
  border-color: #388e3c;
  color: #000000;
}

/* B) Styles für Buttons & Dropdowns in der Subnavigation (Ebene 2) */
.subnavi_dropdown {
    padding: 6px;
    font-size: 0.7rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
    max-width: 550px;
}
.subnavi_btn-primary {
    display:inline-flex; align-items:center;
    padding:4px 8px; height:28px;
    border:3px solid #87CEEB; border-radius:4px;
    background-color:#87CEEB; color:#000;
    font-size:11px; cursor:pointer; transition:all 0.3s ease;
    text-decoration:none;
}
.subnavi_btn-primary:hover {
    background-color:#fff; color:#2B5D6B;
}
.subnavi_btn-secondary {
    display:inline-flex; align-items:center; justify-content:center;
    padding:4px 8px; height:28px; box-sizing:border-box;
    border:3px solid #87CEEB; border-radius:4px;
    background-color:#fff; color:#2B5D6B;
    font-size:11px; cursor:pointer; transition:all 0.3s ease;
    text-decoration:none;
}
.subnavi_btn-secondary:hover {
    background-color:#87CEEB; color:white;
}