/* CSS für W4A-Anwendung 
14.09.2026 V1.2 Ersterstellung 
==============================
   Z-INDEX SYSTEM
   0    background / overlay
   10   page content
   20   image UI
   100  header
   200  mobile navigation
   1000 modal / lightbox
============================== 
 */

/* ===================== */
/* A Grundlayout */
/* ===================== */
/* zentraler html und body */
/*Einige CSS-Eigenschaften bzw. das Verhalten des Viewport-/Scrollbereichs können sich zwischen html und body unterscheiden. daher Grundeinstellungen gemeinsam definieren*/
html, body {
    margin: 0;           /* verhindert Ghostscroll */
    padding: 0;
    min-height: 100%;
    font-family: Arial, sans-serif;
    /* overflow-x: hidden;     verhindert horizontales scrollen insbesondere auf dem handy */
    /* overflow-y: hidden; würde vertikales scrollen verhindern */
    /* border: 4px solid #941010; für test*/
}

/* globale Variablen für Höhe header und footer */
:root {
  --header-height: 100px;
  --footer-height: 30px;
}

@media (max-width: 768px) {

    :root {
        --header-height: 80px;
        --footer-height: 45px;
    }
    /* für index.php und vorlage_passwort_aendern.php wird login-box weiter oben positioniert wg. tastarur */
    .login-page {
        --header-height: 20px;
    }
}

/* content immer zwischen header und footer */
main {
    top: var(--header-height);
    bottom: var(--footer-height);

    overflow-y: auto;              /* nur Main scrollt */
    position: relative;            /* für absolute Kinder wie Slideshow Caption */
    /*border: 5px solid rgb(80, 33, 167); für Test bei layout box */
}


/* ===================== */
/* E Grundlayout */
/* ===================== */

/* ===================== */
/* A index.php */
/* ===================== */
/* ===================== */
/* E index.php */
/* ===================== */

/* ===================== */
/* A up_menue */
/* ===================== */
/* A topbar */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;   /* fixed element braucht Randabstände für max Breite / Höhe, ansonsten Breite berechnet nach Inhalt */
  height: var(--header-height);
  border: 2px solid #110303;
  background: rgba(179, 216, 214, 0.9);
  backdrop-filter: blur(8px);
  z-index: 100;
}

.topbar-inner {
  position: relative;
  max-width: 1200px;
  height: 90%;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* E topbar 

/* A logo */
/* A Für alle medias Logo links und an topbar hängen */
/*Element*/
.logo {
  position: relative;     /* kein fixed mehr */
  left: 0;
  top: 0;
  z-index: 210;
}
/* gilt für Bild im Element*/
.logo img {
  height: 80px;
  width: auto;
  display: block;
  /* wegen Überlappung icon und Menue im Übergang von Tablet zu Handy mit Burger-menue*/
  opacity: 0.8;   /* 0 = unsichtbar | 1 = voll sichtbar */
}
/* A Für Handy Logo zentriert*/
/* Änderungen für logo dynasmisch positionieren*/
@media (max-width: 768px) {
  .logo {
    position: absolute;
/* Änderung zentriert und 5px von oben */
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
  }
/* Reset von: durchscheinend wegen Überlappung icon und Menue im Übergang von Tablet zu Handy mit Burger-menue*/
  .logo img {  
  opacity: 1;   /* 0 = unsichtbar | 1 = voll sichtbar */
  }
  /* icon CSV Bearbeitung linksbündig für handy */
  .admin-link {
    margin-right: auto; /* schiebt alles andere nach rechts */
    display: flex;
    align-items: center;
  }
}
/* E Für alle medias Logo links und an topbar hängen*/
/* E logo

/* A allgemein CSS für Navigation */
.main-nav {/*iO*/
  display: flex;
  justify-content: center;
  position: fixed;
  top: 55px;
  left: 50%;
  column-gap: 15px;
  row-gap: 2px;
  transform: translateX(-50%);
  width: min(700px, 90%);  
  flex-wrap: wrap;         /* 🔥 wichtig */
  z-index: 200;
}

/* A neuer Stand Animaton Auswahlpunkt */
.main-nav a {/*iO*/
  position: relative;
  text-decoration: none;
  color: #222;
  font-size: clamp(12px, 1.2vw, 14px); /* passt SG dynamisch an min, bevorzugt, max wert */
  font-weight: 400;
  letter-spacing: 0.5px;
  transition: color 0.3s ease;
}

.main-nav a::after {/*iO*/
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 1px;
  background: #c6a75e;   /* warmes Kunst-Gold */
  transition: width 0.35s ease;
}

.main-nav a:hover {/*iO*/
  background: rgba(160,25,25,0.05);
  color: #a01919;
}
 
/* E allgemein CSS für Navigation */

/* A Burger Menue */
/* Burger-Menue wird für Desktop deaktiviert */
.burger {/*iO*/
    display: none;
}

/* Burger CSS für Handy */
@media (max-width: 768px) {

  /* Burger-Button */
  .burger {/*iO*/
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 22px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 220;
    position: absolute;
    top: 50px;
    right: 20px;
  }

  .burger span {/*iO*/
    display: block;
    height: 3px;
    width: 100%;
    background-color: #111;
    border-radius: 2px;
    transition: all 0.3s ease;
  }

  .burger.active span:nth-child(1) {/*iO*/
    transform: rotate(45deg) translate(5px, 5px);
  }

  .burger.active span:nth-child(2) {/*iO*/
    opacity: 0;
  }

  .burger.active span:nth-child(3) {/*iO*/
    transform: rotate(-45deg) translate(5px, -5px);
  }

/* A Mobile Navigation Hauptmenue wird über Burger dargestellt*/
  .main-nav {/*iO*/
    top: 130px;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;      /* 🔥 Box passt sich Text an */
    min-width: 220px;        /* optional, für Optik */
    padding: 0;          /* 🔑 nur minimal */
    gap: 0;                  /* ❗ wichtig */

    display: none;
    flex-direction: column;

    background: #fff; 
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  
    z-index: 999;
  }
   
  .main-nav.active {/*iO*/
    display: flex;
    animation: slideDown 0.25s ease-out;
  }

  .main-nav a {/*iO*/
    display: block;
    padding: 6px 14px; /* 🔥 hier steuert man die Höhe */
    line-height: 1.3;    /* ❗ kein unnötiger Zeilenabstand */
    margin: 0;

   /* color: #111;
    white-space: nowrap; */
   /* font-size: 15px;   desktop 14 */
   /* letter-spacing: 0.08em; desktop 0.5px */
   /* transition: background 0.2s, color 0.2s; s. Desktop */
  }
 
/* E Mobile Navigation Hauptmenue wird über Burger dargestellt*/

  .dropbtn {/*iO*/
      padding-left: 14px;
  }

/* E Drop-Down Liste für Kategorie Auswahl */
} /* schließt @media für Burger-Menue*/
/* E Burger Menue */

/* A Seitentitel */
.page-title {/*iO*/
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);

  font-family: "Montserrat", "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;

  color: #111;
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;

  animation: titleFadeUp 1.2s ease-out forwards;
}

/* feine Galerie-Linie */
.page-title::after {/*iO*/
  content: "";
  display: block;
  height: 1px;
  margin: 8px auto 0;
  background: rgba(0,0,0,0.25);

  opacity: 0;
  width: 150px;         
  animation: lineFade 0.8s ease-out forwards;
  animation-delay: 0.6s;
}

/* A Für Handy Page Title */
@media (max-width: 768px) {
  .page-title {/*iO*/
    top: auto;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.05rem;
    letter-spacing: 0.14em;
    pointer-events: none;
    color: #111;
  }

  .page-title::after {/*iO*/
    width: 62px;
    max-width: 62px;
    margin-top: 6px;
  }
}
/* E Für Handy Page Title */

/* Animation page-title */
@keyframes titleFadeUp {
  from {
    opacity: 0;
    transform: translate(-50%, -6px);
  }
  to {
    opacity: 0.9;
    transform: translate(-50%, 0);
  }
}

@keyframes lineFade {
  from {
    opacity: 0;
    width: 0;
  }
  to {
    opacity: 1;
    width: 150px;
  }
}
/* E Seitentitel */

/* ===================== */
/* E up_menue */
/* ===================== */

/* A allgemeine CSS räume, personen, belegungen */
.formular {  
    font-size: clamp(10px, 1.2vw, 16px);

    width: 95%;
    margin: 0 auto;

    margin-bottom: 5px;
    padding: 5px;
    border: 1px solid #999;
    background: #eee;
}

.formular label {
    display: block;
    margin-bottom: 12px;
    
}

.formular select,
.formular input {
    width: 300px;
    max-width: 100%;
    padding: 6px;
    box-sizing: border-box;  /* nicht personen */
    font-size: clamp(10px, 1.2vw, 16px);
}

@media (max-width: 768px) {

    .formular {
        width: 90%;
        margin-bottom: 15px;
        padding: 10px;
    }

    .formular label {
        margin-bottom: 10px;
    }

    .formular select,
    .formular input {
        width: 100%;
        max-width: 100%;
        max-height: 20px;
        padding: 2px;
    }
  }

  table {
      border-collapse: collapse;
      width: 100%;
  }

  th,
  td {
      border: 1px solid #999;
      padding: 8px;
      text-align: left;
  }

  th {
      background: #ddd;
  }

  .aktion {
    white-space: nowrap;
    background: #ddd;
    width: 170px;
    min-width: 170px;
    max-width: 170px;
    /* 1. Spalte links fixieren */
    position: sticky;
    left: 0;
}

@media (max-width: 768px) {

    .aktion {
        width: 80px;
        min-width: 80px;
        max-width: 80px;
    }

    .aktion .button {
        display: block;
        width: 100%;
        margin-bottom: 4px;
        text-align: center;
        font-size: 10px;
    }

}      
  a {
      margin-right: 10px;
  }

 .button {
    display: inline-block;
    padding: 2px 6px;
    margin: 0;

    text-align: center;

    font-family: Arial, sans-serif;
    font-size: clamp(10px, 1.2vw, 16px);
    font-weight: 400;
    line-height: normal;

    color: #000;
    background: #efefef;

    border: 2px outset #767676;
    border-radius: 2px;

    text-decoration: none;
    cursor: pointer;
    vertical-align: middle;

    box-sizing: border-box;
}

.button:hover {
    background: #b78cdb;
}
/* E allgemeine CSS räume, personen, belegungen */

/* A Kalender */
/* -------------------------------------------------
    Navigation
    ------------------------------------------------- */

.navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    flex-wrap: wrap;
}

.nav-break {
    flex-basis: 100%;
    height: 0;
}

.navigation a {

    padding: 7px 12px;

    border: 2px solid #cf9292;
    border-radius: 6px;

    background: #c7ade4;
    font-size: clamp(10px, 1.2vw, 16px); /* passt SG dynamisch an min, bevorzugt, max wert */
    text-decoration: none;

    color: #000;
}

.von_bis {
    margin-top: 5px;
    font-size: clamp(10px, 1.2vw, 16px); /* passt SG dynamisch an min, bevorzugt, max wert */
}
/* -------------------------------------------------
    Raumfilter
    ------------------------------------------------- */

.filter {

    margin-bottom: 15px;
}


.filter select {    
    display: flex;
    justify-content: center;
    padding: 6px;
}

/* -------------------------------------------------
   Kalender Scroll-Container
   ------------------------------------------------- */

.kalender-container {

    font-size: clamp(10px, 1.2vw, 16px);

    width: 95%;
    margin: 0 auto;

    height: calc(
        100vh
        - var(--header-height)
        - var(--footer-height)
        - 100px
    );

    overflow-x: auto;
    overflow-y: auto;
}

/* -------------------------------------------------
   Tabellenkopf beim Scrollen fixieren
   ------------------------------------------------- */

/* -------------------------------------------------
   Tabellenkopf
   ------------------------------------------------- */

.kalender-container thead th {
    position: sticky;
    top: 0;

    z-index: 5;

    background: #ddd;
}


/* -------------------------------------------------
   Erste Spalte
   ------------------------------------------------- */

.kalender-container tbody td:first-child {
    position: sticky;
    left: 0;

    z-index: 10;

    background: #eee;
}


/* -------------------------------------------------
   Obere linke Ecke
   ------------------------------------------------- */

.kalender-container thead th:first-child {
    position: sticky;

    left: 0;
    top: 0;

    z-index: 20;

    background: #ddd;
}

.kalender-container thead th.aktion {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
}

/* -------------------------------------------------
    Kalender
    ------------------------------------------------- */

.kalender {

    display: grid;

    grid-template-columns:
        60px
        repeat(7, minmax(130px, 1fr));

    min-width: 1050px;

    border-top: 1px solid #999;
    border-left: 1px solid #999;
}


/* -------------------------------------------------
    Kalenderzellen
    ------------------------------------------------- */

.zelle {

    min-height: 100px;

    padding: 6px;

    border-right: 1px solid #999;
    border-bottom: 1px solid #999;

    box-sizing: border-box;

    font-size: clamp(10px, 1.2vw, 16px);
}


/* -------------------------------------------------
    Kopfzeile
    ------------------------------------------------- */

.kopf {

    min-height: auto;

    text-align: center;

    font-weight: bold;

    background: #ddd;

    font-size: clamp(10px, 1.2vw, 16px);

    /* Kopfzeile oben fixieren */
    position: sticky;
    top: 0;

    z-index: 5;
}


/* -------------------------------------------------
    Raum
    ------------------------------------------------- */

.raum {

    font-weight: bold;

    background: #eee;

    font-size: clamp(10px, 1.2vw, 16px);

    /* 1. Spalte links fixieren */
    position: sticky;
    left: 0;

    z-index: 10;
}


/* -------------------------------------------------
    Ecke oben links
    ------------------------------------------------- */

.raum-kopf {

    position: sticky;

    left: 0;
    top: 0;

    z-index: 20;

    background: #ddd;
}


/* -------------------------------------------------
    Raum-ID
    ------------------------------------------------- */

#raum_id {

    font-size: clamp(10px, 1.2vw, 16px);

    display: block;

    margin: 0 auto;
}


/* -------------------------------------------------
    Kompakte Belegung
    ------------------------------------------------- */

.belegung {

    display: block;

    margin-bottom: 6px;

    padding: 5px 6px;

    border: 1px solid #666;

    border-radius: 4px;

    background: #d9e4f5;

    color: #000;

    text-decoration: none;

    font-size: clamp(9px, 1vw, 13px);

    line-height: 1.3;

    box-sizing: border-box;
}


/* -------------------------------------------------
    Uhrzeit
    ------------------------------------------------- */

.belegung-zeit {

    display: block;

    font-weight: bold;

    font-size: clamp(10px, 1.05vw, 14px);

    margin-bottom: 2px;
}


/* -------------------------------------------------
    Veranstaltung
    ------------------------------------------------- */

.belegung-veranstaltung {

    display: block;

    font-weight: bold;

    font-size: inherit;

    margin-bottom: 2px;
}


/* -------------------------------------------------
    Person
    ------------------------------------------------- */

.belegung-person {

    display: block;

    font-size: inherit;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* -------------------------------------------------
    Mehrtägige Belegung
    ------------------------------------------------- */

.mehrtaegig {
    font-style: italic;
}


/* -------------------------------------------------
    Heute hervorheben
    ------------------------------------------------- */

.heute {
    background: #fff4c2;
}