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

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 {
    /* Hier die Stile für den Header-Hintergrund anpassen */
    background-color: DeepSkyBlue; /* 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 {
    /* Hier die Stile für den Container innerhalb des Headers anpassen */
    width: 80%; /* Behält den Inhalt innerhalb des Containers */
    margin: 0 auto;
}

h1 {
    /* Hier die Stile für die Hauptüberschrift anpassen */
    text-align: center;
    color: white;
    margin: 0;
    background-color: DeepSkyBlue; /* Hellblau */
}

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

.level-container {
    /* Hier die Stile für den Container des Kreises anpassen */
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.level-container h2 {
    /* Hier die Stile für die Schwierigkeitsgrad-Überschrift anpassen */
    font-size: 24px;
    margin-bottom: 10px;
    color: orange; /* Geändert auf Grün */
    text-align: center; /* Zentriert die Schwierigkeitsgrad-Ãœberschrift */
}

.circle {
    /* Hier die Stile für den Kreis anpassen */
    position: relative;
    width: 100px;
    height: 100px;
}

.circle .segment {
    /* Hier die Stile für die Segmente des Kreises anpassen */
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    clip-path: polygon(50% 50%, 100% 0, 100% 100%);
    border: 15px solid transparent;
    box-sizing: border-box;
}

.segment-1 {
    /* Hier die Stile für das erste Segment anpassen */
    background-color: orange; /* Geändert auf Grün */
    transform: rotate(0deg);
}

.segment-2 {
    /* Hier die Stile für das zweite Segment anpassen */
    background-color: orange; /* Geändert auf Grün */
    transform: rotate(120deg);
}

.segment-3 {
    /* Hier die Stile für das dritte Segment anpassen */
    background-color: orange; /* Geändert auf Grün */
    transform: rotate(240deg);
}

.circle .inner {
    /* Hier die Stile für den inneren Kreis anpassen */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background-color: DeepSkyBlue; /* Hellblau */
    border-radius: 50%;
}

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

.container {
    /* Hier die Stile für den Hauptcontainer anpassen */
    width: 80%;
    margin: 0 auto;
    padding: 20px;
    flex: 1; /* Sorgt dafür, dass der Container den verfügbaren Platz ausfüllt */
}

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

.tools-grid {
    /* Hier die Stile für das Tool Grid anpassen */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.tool-item {
    /* Hier die Stile für die einzelnen Tool-Elemente anpassen */
    background-color: #ecf0f1;
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

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

.toc {
    /* Hier die Stile für das Inhaltsverzeichnis anpassen */
    margin-bottom: 30px;
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.toc h2 {
    /* Hier die Stile für die Inhaltsverzeichnis-Überschrift anpassen */
    color: #3498db;
    border-bottom: 2px solid #3498db;
    padding-bottom: 5px;
}

.toc ul {
    /* Hier die Stile für die Inhaltsverzeichnis-Liste anpassen */
    list-style-type: none;
    padding: 0;
}

.toc a {
    /* Hier die Stile für die Inhaltsverzeichnis-Links anpassen */
    color: #333;
    text-decoration: none;
    display: block;
    padding: 5px 0;
}

.toc a:hover {
    /* Hier die Stile für die Inhaltsverzeichnis-Links beim Überfahren anpassen */
    color: #3498db;
}

/* ==========================================================================
   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 */
}

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

.code-block {
    /* Hier die Stile für die Code-Blöcke anpassen */
    background-color: #272822; /* Dunkler Hintergrund */
    color: #f8f8f2; /* Helle Schrift */
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
    overflow-x: auto; /* Horizontaler Scrollbalken, falls der Code zu lang ist */
    font-family: monospace;
    border: 1px solid #66d9ef; /* Cyan Border */
}

.code-block .command {
    /* Hier die Stile für die Befehle in den Code-Blöcken anpassen */
    color: #66d9ef; /* Helle Schrift für Befehle */
}

.code-block .output {
    /* Hier die Stile für die Ausgabe in den Code-Blöcken anpassen */
    color: #a6e22e; /* Grüne Schrift für die Ausgabe */
}

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

.password {
    /* Hier die Stile für die Passwort-Hervorhebung anpassen */
   /*  background-color: #e74c3c; Fröhliches Rot */
    color: lime;
    padding: 2px 5px;
    border-radius: 3px;
    font-weight: bold;
    border: 1px solid #c0392b; /* Dunkleres Rot für den Rand */
}

/* ==========================================================================
   Terminal Style
   ========================================================================== */

.terminal {
    background-color: #000; /* Schwarzer Hintergrund */
    color: #fff; /* Weiße Schrift */
    font-family: monospace;
    padding: 10px;
    border-radius: 5px;
    overflow-x: auto;
}

.terminal .prompt {
    color: #ff0000; /* Roter Prompt */
}

.terminal .command {
    color: #66d9ef; /* Cyan für Befehle */
}

.terminal .output {
    color: #a6e22e; /* Grün für Ausgabe */
}

/* ==========================================================================
   Promt Style
   ========================================================================== */

.terminal .prompt {
    color: #ff0000; /* Rot */
}

/* ==========================================================================
   Grid Flex
   ========================================================================== */

.grid-flex {
    /* Hier die Stile für das Grid Flex Layout anpassen */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; /* Verteilt die Elemente gleichmäßig */
}

.grid-item {
    /* Hier die Stile für die einzelnen Grid-Elemente anpassen */
    width: 20%; /* Fünf Elemente pro Zeile */
    margin-bottom: 10px;
    text-align: center;
    box-sizing: border-box; /* Sorgt dafür, dass Padding und Border nicht die Breite beeinflussen */
}

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

footer {
    /* Hier die Stile für den Footer anpassen */
    text-align: center;
    margin-top: 30px;
    padding: 10px;
    color: #333; /* Dunkelgrau, passend zum allgemeinen Textstil */
    background-color: #e6d8ff; /* Leicht Violett (#e6d8ff) */
    border: 1px solid black;
    width: 100%; /* Footer nimmt die gesamte Breite ein */
    height: 8rem; /* 8 rem Höhe */
    display: flex;
    flex-direction: column; /* Anordnung der Elemente untereinander */
    justify-content: center; /* Zentriert den Inhalt horizontal */
    align-items: center; /* Zentriert den Inhalt vertikal */
}

footer p {
    margin: 0.5rem 0; /* Fügt etwas Abstand zwischen den Absätzen hinzu */
}

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

.flag-container {
    text-align: center; /* Zentriert den gesamten Inhalt */
}

.flag-heading {
    text-align: center; /* Zentriert die Ãœberschrift */
}

.flag-content {
    display: inline-block; /* Sorgt dafür, dass das Element die Breite des Inhalts einnimmt */
    text-align: center; /* Zentriert den Text */
}

/* ==========================================================================
   Difficulty Level Style
   ========================================================================== */

.difficulty-easy {
    color: orange;
    text-align: center; /* Zentriert den Text */
}