@charset "ISO-8859-1";

/* Generelle Einstellungen */
body {background-color: #ffffff;}
a {text-decoration: none;}
::marker{ display:none; }
summary{ list-style: none; }

/* Header bereich */

.header-banner {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #eef9ee;
  padding: 20px;
}

.header-banner .title-container {
  flex-grow: 1;
  text-align: center;
  display: inline-block;
}

.header-banner .image-container {
  display: inline-block;
  margin-left: 20px;
  margin-right: 20px;
  text-align: right;
}

.header-banner .image-container img {
  max-width: 200px;
  height: auto;
}

/* Inhaltsbereich */
inhalt table, inhalt th, inhalt td { border: 1px solid; background-color: Lavender;}
inhalt a {text-decoration: underline;}

.content-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.left-column, .center-column, .right-column {
  padding: 3px;
}

.left-column {
  width: 15%;
}

.center-column {
  width: 70%;
}

.right-column {
  width: 15%;
}

/* Sticky Navigation und Stats */
.sticky-nav, .sticky-stats {
  position: sticky;
  top: 3px;
}

/* Navigationsbereich */
nav {
  width: 100%;
  margin-top: 2pt;
  display: block;
  font-weight: bold;
  background-color: #CCCC99;
}

nav a {display: block;}

grad0 nav {background-color:#CCCC99;}
grad0 nav a:link{color:#003366;background-color:#E0E0D1;}
grad0 nav a:visited{color:#003366;}
grad0 nav a:hover{background-color:rgb(184, 184, 133);}

grad1 nav {background-color:#0074AB;}
grad1 nav a:link{color:#005178;background-color:#80d6ff;}
grad1 nav a:visited{color:#005178;}
grad1 nav a:hover{background-color:#bfeaff;}

grad2 nav {background-color:#CD8520;}
grad2 nav a:link{color:#503000;background-color:#FFA520;}
grad2 nav a:visited{color:#503000;}
grad2 nav a:hover{background-color:#EE9A20;}

grad3 nav {background-color:#CD3333;}
grad3 nav a:link{color:#500030;background-color:#FF4040;}
grad3 nav a:visited{color:#500030;}
grad3 nav a:hover{background-color:#EE3B3B;}

/* Footer Bereich */
.footer-banner {
  width: 100%;
  text-align: center;
  font-size: small;
  padding: 10px;
  background-color: #eef9ee;
}

/* TODO: Für Grad 2 fehlt das Hover und Visite, und es fehlt Grad 3, dass sollte ich im Merge beachten*/

/* Layout für kleinere Bildschirme (max-width: 640px) */
@media (max-width: 1024px) {
  /* Content-Container als Flexbox */
  .content-container {
    display: flex;
    flex-wrap: wrap; /* Ermöglicht das Umfließen der Spalten */
    flex-direction: row; /* Die Spalten nebeneinander (default) */
  }

  /* Die linke und rechte Spalte nebeneinander oben */
  .left-column, .right-column {
    width: 48%; /* Beide Spalten nehmen jeweils 48% der Breite ein */
    margin-right: 5px; /* Kleiner Abstand zwischen den beiden */
  }

  /* Center-Column nimmt 100% der Breite und erscheint unter den anderen */
  .center-column {
    width: 100%; /* Der Inhaltsbereich nimmt die volle Breite ein */
    margin-top: 20px; /* Abstand nach oben */
    order: 3; /* Der Inhalt bleibt als letzter Block */
  }

  /* Entfernen der Sticky-Eigenschaft für Nav und Stats */
  .sticky-nav, .sticky-stats {
    position: static; /* Entfernt das sticky Verhalten */
  }

  /* Footer bleibt immer am Ende */
  .footer-banner {
    clear: both; /* Footer bleibt unter allen anderen Bereichen */
  }
}

/* Dunkler Modus */
@media (prefers-color-scheme: dark) {
  body {background-color: #121212;color: #e0e0e0;}
  a {color: #80aaff;}
  a:hover {color: #99c2ff;}
  .footer-banner, .header-banner {background-color: #2c2c2c;color: #e0e0e0;}
  .header-banner .title-container, .header-banner .image-container {color: #e0e0e0;}
  .content-container {background-color: #181818;}
  .left-column, .center-column, .right-column {background-color: #202020;color: #e0e0e0;}
  .sticky-nav, .sticky-stats {background-color: #222222;color: #e0e0e0;}
  inhalt table, inhalt th, inhalt td {border: 1px solid #444444;background-color: #2a1c38;color: #e0e0e0;}
  nav {background-color: #1a1a1a;}
  nav a {color: #e0e0e0;background-color: transparent;}
  nav a:hover {background-color: #444444;}

  grad0 nav {background-color: #666633;}
  grad0 nav a:link, grad0 nav a:visited {color: #c8c8c8;background-color: #4d4d33;}
  grad0 nav a:hover {background-color: #5a5a35;}

  grad1 nav {background-color: #005678;}
  grad1 nav a:link, grad1 nav a:visited {color: #b8d3ef;background-color: #00415e;}
  grad1 nav a:hover {background-color: #4a8fa1;}

  grad2 nav {background-color: #9e5d00;}
  grad2 nav a:link, grad2 nav a:visited {color: #ffcc80;background-color: #804c00;}
  grad2 nav a:hover {background-color: #bc6a00;}

  grad3 nav {background-color: #7d2121;}
  grad3 nav a:link, grad3 nav a:visited {color: #f4c2c2;background-color: #9d4d4d;}
  grad3 nav a:hover {background-color: #b74f4f;}
}