/*
 * style.css
 * ---------------------------------------------------------
 * Bildet das bisherige Frameset-Layout (rows="56,*,27") nach:
 *   - Kopfzeile: 56px, immer sichtbar, oben fixiert
 *   - Inhalt:    scrollt normal mit der Seite
 *   - Fußzeile:  27px, immer sichtbar, unten fixiert
 * ---------------------------------------------------------
 */

:root {
  --nav-height: 56px;          /* Hauptmenü (bisher oben.htm) */
  --image-menu-height: 56px;   /* Bildbasiertes Menü */
  --scrollbar-reserve: 21px;    /* Platz für die horizontale Scrollbar im Header,
                                   verhindert dass sie (v.a. in Safari) das
                                   Bildmenü überdeckt, statt darunter zu liegen.
                                   Muss mind. so groß sein wie die Höhe der
                                   ::-webkit-scrollbar-Regel weiter unten! */
  --header-height: calc(var(--nav-height) + var(--image-menu-height) + var(--scrollbar-reserve));
  --footer-height: 27px;

  /* Gesamtbreite, die das Bildmenü tatsächlich braucht:
     größter "left"-Wert in menu_top.php + Breite dieses Bildes (+ etwas Luft).
     Beispiel: letzter Punkt bei left:188px, Bildbreite 158px -> 346px,
     plus Puffer = 380px. AN DIE ECHTEN WERTE ANPASSEN! */
  --menu-top-content-width: 1141px; /*978+158+5  380px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  /* Platz für die fixierten Bereiche freihalten,
     damit der Inhalt nicht darunter verschwindet */
  padding-top: var(--header-height);
  padding-bottom: var(--footer-height);
}

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

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);  /* Hauptmenü + Bildmenü zusammen */
  z-index: 100;

  overflow-x: auto;               /* horizontal wischen/scrollen statt abschneiden */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch; /* sanftes Scrollen auf iOS */

  /* Schmale, dezente Scrollbar statt der breiten Standard-Leiste.
     Wichtig v.a. für Safari/WebKit, das overflow-x:auto-Scrollbars
     standardmäßig INNERHALB der Element-Höhe zeichnet und damit
     einen Teil des Bildmenüs verdecken würde. */
  scrollbar-width: thin;               /* Firefox */
  scrollbar-color: #bbb transparent;   /* Firefox */

  /* TODO: bestehendes Erscheinungsbild von oben.htm übernehmen */
  background: #ffffff;
  border-bottom: 1px solid #ddd;
}

/* Safari/Chrome (WebKit): eigene, schmale Scrollbar-Gestaltung.
   Reduziert die Höhe der Leiste von default (~15px) auf 6px,
   wodurch sie nur noch einen kleinen Streifen überdeckt statt
   knapp die Hälfte des Bildmenüs. */
.site-header::-webkit-scrollbar {
  height: 4px;
}
.site-header::-webkit-scrollbar-track {
  background: transparent;
}
.site-header::-webkit-scrollbar-thumb {
  background-color: #bbb;
  border-radius: 3px;
}

.site-nav {
  height: var(--nav-height);
  display: flex;
  align-items: center;
  flex-wrap: nowrap;     /* lieber scrollen als umbrechen */
  width: max-content;     /* Breite richtet sich nach den Menüpunkten */
  min-width: 100%;        /* aber mindestens Bildschirmbreite */
}

.site-nav a {
  display: inline-block;
  padding: 0 12px;
  text-decoration: none;
  flex-shrink: 0;          /* Menüpunkte nicht zusammendrücken */
  white-space: nowrap;
}

/* ---- Bildbasiertes Menü, jetzt Teil des Headers (immer sichtbar) ---- */

.menu-top {
  position: relative;   /* Bezugsrahmen für die absolut positionierten Bilder */
  width: 100%;
  min-width: var(--menu-top-content-width); /* darf breiter als der Bildschirm sein */
  height: var(--image-menu-height);
}

.menu-top__bg {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;   /* = Breite von .menu-top, also inkl. min-width */
  height: 86px;
  z-index: 1;
}

.menu-top__item {
  position: absolute;
  top: -2px;
  z-index: 2;
  display: block;
}

.menu-top__item img {
  display: block;
  border: 0;
}

/* ---- Inhaltsbereich -------------------------------------------- */

.site-content {
  /* normaler Fließbereich - kein eigenes Scrollen mehr nötig,
     die ganze Seite scrollt wie gewohnt */
  padding: 16px;
}

/* ---- Fußzeile ---------------------------------------------------- */

.site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--footer-height);  /* 27px - entspricht der alten dritten Frame-Zeile */
  z-index: 100;
  overflow: hidden;               /* zeigt garantiert nur diese 27px - nichts wird "nach unten weggeschoben" */
  background: #606060;            /* Fallback-Farbe, entspricht dem alten bgcolor der Tabelle */
}

/* Balken-Grafik: 10px hoher Streifen am oberen Rand der Fußzeile */
.footer-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 10px;
  z-index: 1;
}

/* Text liegt als eigene Ebene ÜBER dem gesamten Fußzeilen-Bereich
   (also auch über dem Balkenbild) */
.footer-text {
  position: absolute;
  top: 5px;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;

  margin: 0;                       /* WICHTIG: Standard-Außenabstand von <p> entfernen -
                                       das war die Ursache für den "verschluckten" Text */
  display: flex;
  align-items: center;
  justify-content: center;

  color: #ffffff;
  font-size: 0.9em;
  white-space: nowrap;
  text-align: center;
  padding: 0 8px;
}

/* ---- Hilfsklassen für Inhaltsseiten ----------------------------- */

/* Tabellenzeile mit "Balken-Spalte": macht die <tr> zum Flex-Container,
   wodurch die Balken-Zelle automatisch die Höhe der Inhaltszelle
   übernimmt (Flexbox-Standard: align-items: stretch). Dadurch
   funktioniert height="100%" auf dem <img> wieder wie früher. */
.row-with-bar {
  display: flex;
  align-items: stretch; /* Standardwert, hier zur Klarheit */
}

.row-with-bar > .vbar {
  flex: 0 0 30px;   /* feste Breite, entspricht width="30px" */
}

.row-with-bar > .vbar img {
  display: block;
  height: 100%;
}

/* Spalten mit fester Breite (z.B. die linke Spalte mit width="170px"):
   weder wachsen noch schrumpfen - Breite kommt vom width-Attribut */
.row-with-bar > .fixed-col {
  flex: 0 0 auto;
}

.row-with-bar > .content-cell {
  flex: 1 1 auto;   /* nimmt den restlichen Platz ein */
}