/* Allgemeine Stile für die Webseite */
body {
  font-family: Arial, sans-serif; /* Festlegung der Schriftart */
  margin: 0; /* Kein Außenabstand */
  padding: 0 5pt; /* Horizontaler Innenabstand (links und rechts) */
  background-color: #0099ff; /* Blauer Hintergrund für die gesamte Seite */
  color: #ffff00; /* Gelber Text für bessere Lesbarkeit auf blauem Hintergrund */
}

h1.page-title {
  font-size: 2.5em; /* Erhöhe die Schriftgröße */
  text-align: center; /* Titel zentrieren */
  font-style: italic; /* Kursivschrift für den Haupttitel */
  font-weight: normal; /* Normalgewicht für den Titel */
}

/* Link-Stile für die Webseite */
a {
  color: #ffff00; /* Gelber Text für Links */
  text-decoration: none; /* Keine Unterstreichung */
}

a:visited {
  color: #ffffff; /* Weiße Farbe für besuchte Links */
}

/* Globale Tabellenstile */
table {
  width: 100%; /* Tabelle füllt die gesamte Breite aus */
  border-collapse: collapse; /* Zusammenfassung von Zellrahmen, um keine Lücken zu haben */
  margin: 20px 0; /* Vertikale Abstände über und unter der Tabelle */
}

td {
  padding: 10px; /* Abstand innerhalb der Tabellenzellen */
  vertical-align: top; /* Inhalt wird oben in der Zelle ausgerichtet */
}

/* Festgelegte Spaltenbreiten für Layout */
.left-column,
.right-column {
  width: 300px; /* Linke und rechte Spaltenbreite */
}

.left-column td {
  text-align: left; /* Links ausrichten */
}

.right-column {
  text-align: left; /* Spaltenausrichtung links */
}

.right-column td {
  text-align: center; /* Inhalte zentriert innerhalb der Zellen */
  vertical-align: middle; /* Vertikale Ausrichtung */
}

.middle-column {
  width: 600px; /* Mittlere Spalte ist breiter */
  display: flex; /* Flexbox-Layout für bessere Kontrolle */
  justify-content: center; /* Inhalt horizontal zentrieren */
  align-items: center; /* Inhalt vertikal zentrieren */
  text-align: center; /* Inhalte zentriert ausrichten */
  overflow-y: auto; /* Aktiviert vertikales Scrollen */
}

/* Farben für abwechselnde Tabellenzeilen */
.teal-row {
  background-color: #008080; /* Teal-Farbton für bestimmte Zeilen */
}

.blue-row {
  background-color: #3366cc; /* Blau-Farbton für bestimmte Zeilen */
}

.text-cell-with-bg {
    background-image: url('Startpage/images/fliege.gif');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto; /* contain oder 'cover', je nach gewünschtem Effekt */
}

.ffilm-cell-with-bg {
    background-image: url('Startpage/images/FanW.gif');
    background-repeat: no-repeat;
    background-position: right center; /* Rechtsbündig, vertikal zentriert */
    background-size: auto; /* contain oder 'cover', je nach gewünschtem Effekt */
}

/* Hervorhebung für wichtige Textpassagen */
.highlight {
  color: #ffa500; /* Hell-orange */
  font-size: 1.2em; /* Schriftgröße etwas größer */
}

/* Stil für die Anzeige von Datum und Uhrzeit */
#datetime-cell {
  font-size: 2em; /* Größe der ersten Zeile (Zeit) */
  text-align: center; /* Zentrierung */
}

#datetime-cell .date-row {
  font-size: 1.2em; /* Reduzierte Größe für das Datum */
}

/* Stile für Panorama-Bereiche */
.panorama-title,
.panorama-cell {
  text-align: center; /* Zentrierung des Inhalts */
  padding: 10px; /* Innenabstand für eine bessere Struktur */
}

.panorama-cell img {
  max-width: 100%; /* Maximal 100% breit */
  height: auto; /* Höhe unter Beibehaltung der Proportionen proportional reduzieren */
  display: block; /* Block-Element für saubere Zentrierung */
  margin: 0 auto; /* Eingemittet in Originalgrösse */
}

/* Stile für Bilder in der mittleren Spalte */
.middle-column-img {
  max-width: 100%; /* Bild passt sich der Zellenbreite an */
  height: auto; /* Beibehaltung des Seitenverhältnisses */
  display: block; /* Block-Level-Element für bessere Positionierung */
  margin: 0 auto; /* Zentrierung des Bildes innerhalb der Zelle */
}

/* Zusätzliche Tabellenformate */
.inner-table {
  border: none; /* Keine Rahmen für innere Tabellen */
  width: 100%; /* Tabelle füllt die Zelle vollständig aus */
  text-align: center; /* Text in der Tabelle zentrieren */
}

/* Fußzeilenstile */
.footer-left,
.footer-middle,
.footer-right {
  padding: 10px; /* Abstand für eine saubere Darstellung */
  text-align: center; /* Text zentriert für Konsistenz */
  font-size: 0.9em; /* Kleinere Schriftgröße für die Fußzeile */
  background-color: transparent; /* Keine Hintergrundfarbe */
}

.footer-middle {
  display: none; /* Mittelspalte der Fußzeile wird ausgeblendet */
}

.center-column {
  /* Mittlere Spalte ist breiter */
  display: flex; /* Flexbox-Layout für bessere Kontrolle */
  justify-content: center; /* Inhalt horizontal zentrieren */
  align-items: center; /* Inhalt vertikal zentrieren */
  text-align: center; /* Inhalte zentriert ausrichten */
  overflow-y: auto;
  /* Aktiviert vertikales Scrollen */
}


.table img {
  /* Bild innerhalb der Tabelle */
  margin-bottom: 10px;
 vertical-align: top; /* Entspricht align="top" */
}

.highlighted-film-cell a:link,
.highlighted-film- cell a:visited {
    color: inherit; /* Vererbt die Farbe des umgebenden Elements */
    text-decoration: none; /* Entfernt die Unterstreichung (optional) */
}

#datetime-cell {
  /*background-image: url('Startpage/images/birds_animated.svg');*/
  background-image: url('Startpage/images/birds7cx.gif');
  background-size: cover; /* Passt das Bild an die Größe der Zelle an */
  background-repeat: no-repeat; /* Verhindert Wiederholungen des Bildes */
  background-position: center; /* Zentriert das Bild */
}

/* Stile für Bilder in Nützliche Links */
.table-image {
  border-radius: 6px; 
}

/* Fix für Smart-TV-Browser: Bild-Links navigierbar machen */
.img-link {
  display: inline-block;
}
.img-link img {
  pointer-events: none; /* Klick zwingend an Link weitergeben */
}.left-column a {
    transition: color 0.2s ease;
}
.left-column a:hover {
    color: #ffdd00;
}
.left-column a img {
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.left-column a:hover img {
    transform: scale(1.03);
    opacity: 0.9;
}