:root {
    --header-height-desktop: 130px; /* Schätzung für Desktop-Header-Höhe */
    --header-height-mobile: 180px; /* Schätzung für mobile Header-Höhe (gestapeltes Menü) */
}

body {
    margin: 0;
    /* Wichtig: overflow: hidden entfernt, damit man scrollen kann, wenn Inhalt länger ist */
    background-color: #000;
    font-family: 'Courier New', Courier, monospace;
    color: #eee; /* Standardtextfarbe für Body (wird von main überschrieben) */
    /* Padding unten hinzufügen, um Platz für den Footer zu schaffen, wenn der Inhalt sehr kurz ist */
    /* padding-bottom: 150px; /* Höhe des Footers schätzen */
    /* Alternative: Flexbox für Body, um Footer unten zu halten (komplexer) */
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* --- Canvas für Matrix-Effekt --- */
#matrixCanvas {
    display: block;
    position: fixed; /* Bleibt fixiert */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Hinter allem anderen */
}

/* --- Header mit Banner und Menü --- */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    background-color: rgba(2, 2, 2, 0.5); /* Dunkler, satterer Hintergrund */
    padding: 10px 0;
    text-align: center;
    color: rgb(129, 185, 218);
    border-bottom: 1px solid rgb(129, 185, 218); /* Kleine Trennlinie */
}

.banner h1 {
    margin: 0;
    padding: 5px 0;
    font-size: 2.5em;
    color: #FFF;
    text-shadow: 0 0 5px rgb(129, 185, 218), 0 0 10px rgb(129, 185, 218); /* Verstärkter Schein */
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 10px 0 5px 0; /* Weniger Margin unten */
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

nav li {
    margin: 5px 15px;
}

nav a {
    color: rgb(129, 185, 218);
    text-decoration: none;
    font-size: 1.2em;
    padding: 5px 10px;
    border: 1px solid transparent;
    transition: color 0.3s, border-color 0.3s, background-color 0.3s;
}

nav a:hover,
nav a:focus {
    color: #FFF;
    border-color: rgb(129, 185, 218);
    background-color: rgba(0, 255, 0, 0.1); /* Leichter grüner Hintergrund beim Hover */
}

/* --- Haupt-Inhaltsbereich (Schreibbereich) --- */
main {
	flex: 1;
    /* Wichtig: Padding oben, um Platz für den fixierten Header zu schaffen */
    padding-top: var(--header-height-desktop);
    padding-bottom: 20px; /* Abstand zum Footer */
    padding-left: 15px; /* Seitenabstand */
    padding-right: 15px; /* Seitenabstand */

    max-width: 960px; /* Maximale Breite des Inhaltsbereichs */
    margin: 0 auto; /* Zentriert den Inhaltsbereich horizontal */
    background-color: rgba(0, 0, 0, 0.8); /* Dunkler Hintergrund für Lesbarkeit */
    color: #eee; /* Helle Schriftfarbe für den Inhalt */
    z-index: 5; /* Über dem Canvas, unter dem Header */
    position: relative; /* Notwendig für z-index */
    min-height: calc(100vh - var(--header-height-desktop) - 150px); /* Versucht, den Bereich hoch genug zu machen, damit Footer unten ist (Höhe Footer ca 150px) - experimentell! */
}

main h2 {
    color: rgb(255, 255, 255); /* Überschriften im Matrix-Grün */
    text-align: left;
    margin-top: 10px;
}

main p {
    line-height: 1.6; /* Bessere Lesbarkeit */
    text-align: justify;
}

/* --- Footer --- */
footer {
    background-color: rgba(2, 2, 2, 0.5); /* Gleicher Hintergrund wie Header */
    color: rgb(129, 185, 218);
    padding: 20px 15px; /* Innenabstand */
    margin-top: 20px; /* Abstand zum Hauptinhalt */
    border-top: 1px solid rgb(129, 185, 218); /* Trennlinie oben */
    z-index: 5; /* Über dem Canvas, unter dem Header */
    position: relative; /* Notwendig für z-index */

    /* Flexbox für die Spalten */
    display: flex;
    justify-content: space-around; /* Verteilt den Platz um die Spalten */
    flex-wrap: wrap; /* Erlaubt Umbruch auf sehr kleinen Screens */
    gap: 15px; /* Abstand zwischen den Flex-Items (Spalten) */
}

.footer-column {
    flex: 1; /* Jede Spalte versucht, gleich viel Platz einzunehmen */
    min-width: 180px; /* Mindestbreite, bevor Umbruch/Skalierung passiert */
    text-align: center; /* Text in den Spalten zentrieren */
}

.footer-column h4 {
    color: #FFF; /* Weiß für Footer-Überschriften */
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: 1px dashed rgb(129, 185, 218);
    padding-bottom: 5px;
    display: inline-block;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column li {
    margin-bottom: 5px;
}

.footer-column a {
    color: rgb(129, 185, 218);
    text-decoration: none;
}

.footer-column a:hover,
.footer-column a:focus {
    color: #FFF;
    text-decoration: underline;
}


/* --- Responsive Anpassungen --- */
@media (max-width: 768px) {
    :root {
         /* Header-Höhe anpassen, da Menü gestapelt ist */
        --header-height-mobile: 220px; /* Ggf. anpassen! */
    }

    .banner h1 {
        font-size: 1.8em;
    }

    nav ul {
        flex-direction: column;
        align-items: center;
    }

    nav li {
        margin: 8px 0;
        width: 80%; /* Breite der Menüpunkte anpassen */
        text-align: center;
    }

    nav a {
        font-size: 1.1em;
        display: block; /* Nimmt die Breite des li ein */
        width: 100%;
    }

    /* Hauptinhalt: Padding oben für mobilen Header anpassen */
    main {
        padding-top: var(--header-height-mobile);
         min-height: calc(100vh - var(--header-height-mobile) - 200px); /* Footer Höhe mobilschätzen*/
    }

    /* Footer: Spalten untereinander stapeln */
    footer {
        flex-direction: column; /* Spalten untereinander */
        align-items: center; /* Zentriert die Spaltenblöcke */
    }

    .footer-column {
        flex: none; /* Deaktiviert das flexible Wachsen */
        width: 80%; /* Breite der gestapelten Spalten */
        margin-bottom: 15px; /* Abstand zwischen gestapelten Spalten */
        text-align: center;
    }
     .footer-column:last-child {
         margin-bottom: 0;
     }
}

 @media (max-width: 480px) {
     :root {
         --header-height-mobile: 200px; /* Ggf. erneut anpassen für sehr kleine Screens */
     }
     .banner h1 {
         font-size: 1.5em;
     }
      nav a {
        font-size: 1em;
     }
     main {
         padding-top: var(--header-height-mobile);
         min-height: calc(100vh - var(--header-height-mobile) - 250px); /* Footer Höhe mobilschätzen*/
     }
     .footer-column {
         width: 90%;
     }
 }

#ts-viewer {
  font-family: monospace;
  color: #cce4ff;
  background: #0a0a0a;
  padding: 1rem;
  border-radius: 12px;
  max-width: 500px;
  margin: 2rem auto;
  box-shadow: 0 0 15px rgba(0, 170, 255, 0.25);
}

#ts-viewer li {
  margin-left: 1rem;
}