/* ==========================================================================
   Allgemeine Stile               Update Ben v.03
   ========================================================================== */

body {
    font-family: 'Lato', sans-serif;
    background-color: #f4f4f4;
    color: #333;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center; /* Zentriert den Inhalt horizontal */
    min-height: 100vh; /* Sorgt dafür, dass der Footer immer am unteren Rand ist */
}

/* ==========================================================================
   Header-Bereich
   ========================================================================== */

.header-bg {
    /* Header-Hintergrund */
    background-color: #03b5f5; /* Angepasstes Hellblau */
    color: white;
    padding: 20px 0;
    text-align: center;
    margin-bottom: 30px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 100%; /* Volle Breite */
}

.header-bg .container {
    /* Container innerhalb des Headers */
    width: 80%; /* Behält den Inhalt innerhalb des Containers */
    margin: 0 auto;
}

h1 {
    /* Hauptüberschrift */
    text-align: center;
    color: white;
    margin: 0;
    background-color: #03b5f5; /* Angepasstes Hellblau (gleich wie header-bg) */
}

/* ==========================================================================
   Cybersecurity Level Circle
   ========================================================================== */

.level-container {
    /* Container des Kreises */
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.level-container h2 {
    /* Schwierigkeitsgrad-Überschrift */
    font-size: 24px;
    margin-bottom: 10px;
    color: red; /* *** FÜR HARD *** */
    text-align: center; /* Zentriert die Schwierigkeitsgrad-Überschrift */
}

.circle {
    /* Kreis */
    position: relative;
    width: 100px;
    height: 100px;
}

.circle .segment {
    /* Segmente des Kreises */
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    clip-path: polygon(50% 50%, 100% 0, 100% 100%);
    border: 15px solid transparent; /* Dicke des Segments */
    box-sizing: border-box;
}

.segment-1 {
    /* Erstes Segment */
    background-color: red; /* *** FÜR HARD *** */
    transform: rotate(0deg);
}

.segment-2 {
    /* Zweites Segment */
    background-color: red; /* *** FÜR HARD *** */
    transform: rotate(120deg);
}

.segment-3 {
    /* Drittes Segment */
    background-color: red; /* *** FÜR HARD *** */
    transform: rotate(240deg);
}

.circle .inner {
    /* Innerer Kreis */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px; /* (100px - 2 * 15px Border) */
    height: 70px;
    background-color: #03b5f5; /* Angepasstes Hellblau (gleich wie header-bg) */
    border-radius: 50%;
}

/* ==========================================================================
   Container
   ========================================================================== */

.container {
    /* Hauptcontainer */
    width: 80%;
    margin: 0 auto;
    padding: 20px;
    background-color: #ffffff; /* Weißer Hintergrund für den Content-Bereich */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); /* Leichter Schatten für den Container */
    border-radius: 8px; /* Abgerundete Ecken */
    flex: 1; /* Sorgt dafür, dass der Container den verfügbaren Platz ausfüllt */
}

/* ==========================================================================
   Tool Grid
   ========================================================================== */

.tools-grid {
    /* Tool Grid */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.tool-item {
    /* Einzelne Tool-Elemente */
    background-color: #ecf0f1; /* Helles Grau */
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   Inhaltsverzeichnis
   ========================================================================== */

.toc {
    /* Inhaltsverzeichnis */
    margin-bottom: 30px;
    background-color: #fff; /* Weißer Hintergrund */
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.toc h2 {
    /* Inhaltsverzeichnis-Überschrift */
    color: #3498db; /* Blau */
    border-bottom: 2px solid #3498db; /* Blaue Unterstreichung */
    padding-bottom: 5px;
}

.toc ul {
    /* Inhaltsverzeichnis-Liste */
    list-style-type: none;
    padding: 0;
}

.toc li {
    margin-bottom: 5px; /* Abstand zwischen Listenelementen */
}

.toc a {
    /* Inhaltsverzeichnis-Links */
    color: #333; /* Dunkelgrau */
    text-decoration: none;
    display: block;
    padding: 5px 0;
    transition: color 0.3s ease; /* Weicher Übergang für Hover */
}

.toc a:hover {
    /* Inhaltsverzeichnis-Links beim Überfahren */
    color: #3498db; /* Blau */
}

/* ==========================================================================
   Kommentarstile
   ========================================================================== */

.comment {
    /* Hier die Stile für die Kommentare anpassen */
    background-color: #a8d0e6; /* Hellblauer Hintergrund */
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
    border-left: 5px solid #74b9ff; /* Dunklerer Blauton für den Rand */
    color: black; /* Schriftfarbe auf Schwarz geändert */
}

.comment strong {
    color: #1a2530; /* Noch dunkleres Blau für Hervorhebungen auf dem hellblauen Grund */
}

.comment ul {
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 20px;
}


/* ==========================================================================
   Code-Block-Stile
   ========================================================================== */

.code-block {
    /* Äußerer Container für Code-Blöcke */
    background-color: #f0f0f0; /* Hellerer Hintergrund für den Block selbst */
    padding: 5px; /* Kleiner Padding außen */
    margin: 15px 0;
    border-radius: 5px;
    overflow-x: auto; /* Horizontaler Scrollbalken */
    border: 1px solid #ccc; /* Leichter grauer Rand */
}

.terminal {
    /* Innerer Container im Terminal-Stil */
    background-color: #000; /* Schwarzer Hintergrund */
    color: #fff; /* Weiße Schrift */
    font-family: monospace;
    padding: 15px; /* Innenabstand */
    border-radius: 3px; /* Leichte Abrundung innen */
    overflow-x: auto;
    line-height: 1.4; /* Zeilenhöhe für bessere Lesbarkeit */
}

.terminal .prompt {
    /* Promt-Zeile (Kali) */
    color: #ff0000; /* Rot für Kali-Prompt */
    user-select: none; /* Verhindert das Markieren des Prompts */
}

.terminal .command {
    /* Befehl innerhalb des Prompts oder als eigener Block */
    color: #66d9ef; /* Cyan für Befehle */
    font-weight: bold;
}

.terminal .output {
     /* Explizite Markierung für Befehlsausgaben (optional) */
    color: #a6e22e; /* Standard-Ausgabefarbe (Grün) */
}

/* Zusätzliche Stile für mehrzeilige Ausgaben ohne <pre> */
.terminal div:not(.prompt) {
    white-space: pre-wrap; /* Erhält Zeilenumbrüche und Leerzeichen */
    word-wrap: break-word; /* Bricht lange Zeilen um */
}

.terminal pre {
    margin: 0; /* Entfernt Standard-Margin von pre */
    white-space: pre-wrap; /* Stellt sicher, dass auch pre umbricht, falls nötig */
    word-wrap: break-word;
    color: #a6e22e; /* Standard-Ausgabefarbe (Grün) für pre-Blöcke */
}

/* ==========================================================================
   Passwort-Hervorhebung
   ========================================================================== */

.password {
    /* Passwort/Flag-Hervorhebung */
    color: lime; /* Helles Grün für gute Sichtbarkeit */
    /* Kein Hintergrund! */
    padding: 1px 3px; /* Minimales Padding */
    border-radius: 3px;
    font-weight: bold;
    border: 1px solid darkgreen; /* Dunkelgrüner Rand zur Abgrenzung */
}

/* ==========================================================================
   Grid Flex (Nicht explizit im HTML, aber Tools-Grid nutzt Grid)
   ========================================================================== */

/* Stile für .tools-grid bereits oben definiert */

/* ==========================================================================
   Footer Style
   ========================================================================== */

.footer { /* Klasse statt Tag-Selector für bessere Spezifität */
    text-align: center;
    margin-top: 30px;
    padding: 20px; /* Mehr Padding */
    color: #333; /* Dunkelgrau */
    background-color: #e6e6fa; /* Lavendel als Beispiel, anpassbar */
    border-top: 1px solid #ccc; /* Leichte Trennlinie oben */
    width: 100%; /* Volle Breite */
    box-sizing: border-box; /* Padding in Breite einrechnen */
}

.footer p {
    margin: 5px 0; /* Kleinerer Abstand zwischen Absätzen */
    font-size: 0.9em; /* Etwas kleinere Schrift */
}


/* ==========================================================================
   Flag-Container Style
   ========================================================================== */

.flag-container {
    text-align: center; /* Zentriert den gesamten Inhalt */
    margin-top: 30px; /* Abstand nach oben */
    margin-bottom: 20px; /* Abstand nach unten */
}

.flag-heading {
    text-align: center; /* Zentriert die Überschrift */
    color: #3498db; /* Gleiche Farbe wie Inhaltsverzeichnis-Überschrift */
    border-bottom: 2px solid #3498db;
    display: inline-block; /* Verhindert, dass die Border über die volle Breite geht */
    padding-bottom: 5px;
    margin-bottom: 20px; /* Abstand unter der Überschrift */
}

.flag-content {
    display: inline-block; /* Sorgt dafür, dass das Element die Breite des Inhalts einnimmt */
    text-align: center; /* Zentriert den Text */
    margin-top: 5px; /* Kleiner Abstand über der Flag */
}

/* Anpassung für Code-Blöcke im Flag-Bereich, falls Zentrierung gewünscht */
.flag-container .code-block {
     display: inline-block; /* Lässt Block schrumpfen */
     text-align: left; /* Text innerhalb des Blocks linksbündig */
     max-width: 90%; /* Verhindert, dass es zu breit wird */
}
.flag-container .terminal {
     text-align: left; /* Stellt sicher, dass der Terminal-Text linksbündig ist */
}
.flag-container .code-block .command {
    display: block; /* Befehl über der Flag */
    margin-bottom: 5px;
    color: #fff; /* Weiße Schrift für Befehl hier, da im Flag-Block */
    font-weight: normal;
}

/* ==========================================================================
   Sonstige Hilfsstile
   ========================================================================== */
section {
    margin-bottom: 40px; /* Mehr Abstand zwischen den Hauptabschnitten */
}

h2 {
     color: #333;
     border-bottom: 1px solid #ccc; /* Leichte Trennlinie unter Abschnittsüberschriften */
     padding-bottom: 10px;
     margin-top: 30px; /* Abstand über Abschnittsüberschriften */
}