/* =========================================================
   POI Monitor – Layout CSS (sauber + kommentiert)
   Ziel:
   - Header oben fix
   - Footer unten fix
   - Inhalt dazwischen füllt den Rest (ohne Scrollbars)
   - 2 Spalten: links Termine, rechts Diashow (50/50)
   ========================================================= */

/* 1) Grundlayout: volle Höhe, keine Standard-Abstände */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* 2) Seite als Flex-Spalte: Header / Content / Footer */
body {
  display: flex;
  flex-direction: column;
  overflow: hidden;        /* verhindert Scrollbalken auf dem Monitor */
  font-family: Arial, Helvetica, sans-serif;
  background: #ffffff;
}

/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

/* Header-Container (W3 kann Padding setzen – wir setzen sauber) */
.main-header {
  flex: 0 0 auto;          /* Header bleibt oben, nimmt nur eigene Höhe */
  padding: 0 16px;         /* etwas Luft links/rechts */
  background: #fff;
}

/* Header-Zeile auf feste Höhe */
.header-row {
  display: flex;
  align-items: center;     /* vertikal zentriert */
  height: 70px;            /* feste Headerhöhe (bei Bedarf anpassen) */
}

/* Spalten im Header */
.header-col {
  display: flex;
  align-items: center;
}

.header-col.left  { justify-content: flex-start; }
.header-col.center{ justify-content: center; }
.header-col.right { justify-content: flex-end; }

/* Datum-Text */
.header-text {
  font-size: 2.2em;        /* ggf. anpassen */
  color: #008532;
  font-weight: bold;
  text-align: center;
  line-height: 1;
}

/* ---------------------------------------------------------
   TRENNLINIEN (hr)
   WICHTIG: Kein Margin, sonst „frisst“ das Höhe!
   --------------------------------------------------------- */
.divider {
  flex: 0 0 auto;
  border: 0;
  height: 4px;             /* Dicke der Linie */
  background: green;       /* Farbe der Linie */
  margin: 0;               /* KEIN Abstand, sonst Layout verrutscht */
}

/* ---------------------------------------------------------
   HAUPTBEREICH (2-spaltig)
   --------------------------------------------------------- */

/* Der Content nimmt den gesamten Rest zwischen Header und Footer */
.main-content {
  flex: 1 1 auto;          /* füllt den verfügbaren Platz */
  min-height: 0;           /* sehr wichtig für iframes in Flexbox! */
  padding: 0 !important;   /* W3 .w3-container Padding überschreiben */
  margin: 0;
}

/* Split-Container: 2 Spalten, volle Höhe */
.split {
  display: flex;
  height: 100%;
  width: 100%;
}

/* Beide Panels genau gleich breit (50/50) */
.pane {
  flex: 1 1 0;
  height: 100%;
  width: 50%;
  border: 0;
  display: block;
}

/* Optional: Trennlinie zwischen links/rechts */
.pane.left {
  border-right: 2px solid #e0e0e0;
}

/* Iframes sollen IMMER den kompletten Panel-Bereich füllen */
iframe.pane {
  height: 100%;
  width: 100%;
  border: 0;
}

/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */

.main-footer {
  flex: 0 0 auto;          /* Footer bleibt unten */
  height: 80px;            /* feste Footerhöhe (bei Bedarf anpassen) */
  padding: 0 16px;
  background: #fff;
  border: none;            /* W3-Rahmen entfernen */
  display: flex;
  align-items: center;     /* Inhalt vertikal mittig */
}

/* Footer-Row (links Text, rechts Uhr) */
.footer-row {
  display: flex;
  width: 100%;
  align-items: center;
}

/* Footer-Spalten */
.footer-col.left {
  flex: 1;
  display: flex;
  align-items: center;
}

.footer-col.right {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* Footer-Text */
.footer-text {
  font-size: 1.5em;
  color: #008532;
  font-weight: bold;
}

/* Uhr (FlipClock) skalieren, damit sie in den Footer passt */
.clock {
  transform: scale(0.65);
  transform-origin: right center;
}