.terminal-loader {
    border: 0.1em solid #333;
    /* Fügt einen dunklen Rahmen um den Lader hinzu */
    background-color: #1a1a1a;
    /* Dunkler Hintergrund, typisch für ein Terminalfenster */
    color: #0f0;
    /* Setzt die Textfarbe auf leuchtend Grün, typisch für Terminaltext */
    font-family: "Courier New", Courier, monospace;
    /* Nutzt eine Monospace-Schriftart für authentisches Terminalaussehen */
    font-size: 1em;
    /* Standard Schriftgröße */
    padding: 1.5em 1em;
    /* Innenabstand, um den Text vom Rand fernzuhalten */
    width: 12em;
    /* Breite des Lader-Elements */
    position: fixed;
    /* Positioniert das Element fest auf der Seite */
    top: 50%;
    /* Zentriert das Element vertikal */
    left: 50%;
    /* Zentriert das Element horizontal */
    transform: translate(-50%, -50%);
    /* Nutzt transform für genaue Zentrierung (verschiebt es um seine eigene Hälfte) */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* Weicher Schatten für 3D-Effekt */
    border-radius: 4px;
    /* Leicht gerundete Ecken */
    display: none;
    /* Versteckt das Element standardmäßig */
    z-index: 1000;
    /* Stellt sicher, dass es über anderen Inhalten liegt */
}

.terminal-header {
    position: absolute;
    /* Absolute Positionierung innerhalb des terminal-loaders */
    top: 0;
    /* Oben am Rand des Elternelements */
    left: 0;
    /* Links am Rand des Elternelements */
    right: 0;
    /* Rechts am Rand des Elternelements */
    height: 1.5em;
    /* Höhe der Kopfzeile */
    background-color: #333;
    /* Dunkle Farbe für die Kopfzeile */
    border-top-left-radius: 4px;
    /* Rundet die obere linke Ecke */
    border-top-right-radius: 4px;
    /* Rundet die obere rechte Ecke */
    padding: 0 0.4em;
    /* Innenabstand links und rechts innerhalb der Kopfzeile */
    box-sizing: border-box;
    /* Beinhaltet Padding und Border in der Breiten- und Höhenberechnung */
}

.terminal-controls {
    float: right;
    /* Platziert die Steuerelemente rechts */
}

.control {
    display: inline-block;
    /* Ermöglicht die Platzierung auf einer Linie mit anderen Elementen */
    width: 0.6em;
    /* Breite jedes Steuerelements */
    height: 0.6em;
    /* Höhe jedes Steuerelements */
    margin-left: 0.4em;
    /* Abstand zwischen den Steuerelementen */
    border-radius: 50%;
    /* Kreisförmige Steuerelemente */
    background-color: #777;
    /* Mittelgraue Farbe für standard Steuerelemente */
}

.control.close {
    background-color: #e33;
    /* Rote Farbe für das Schließen-Steuerelement */
}

.control.minimize {
    background-color: #ee0;
    /* Gelbe Farbe für das Minimieren-Steuerelement */
}

.control.maximize {
    background-color: #0b0;
    /* Grüne Farbe für das Maximieren-Steuerelement */
}

.terminal-title {
    float: left;
    /* Platziert den Titel links */
    line-height: 1.5em;
    /* Höhe der Zeile, zentriert den Text vertikal */
    color: #eee;
    /* Hellgraue Farbe für den Text */
}

.text {
    display: inline-block;
    /* Ermöglicht die Platzierung auf einer Linie mit anderen Elementen */
    white-space: nowrap;
    /* Verhindert Zeilenumbrüche im Text */
    overflow: hidden;
    /* Versteckt Überlaufenden Text */
    border-right: 0.2em solid green;
    /* Simuliert den Cursor als grünen Balken */
    animation: typeAndDelete 4s steps(11) infinite, blinkCursor 0.5s step-end infinite alternate;
    /* Animiert den Text wie ein Typing und Lösch-Effekt */
    margin-top: 1.5em;
    /* Abstand oben zum Trennen von der Kopfzeile */
}

@keyframes blinkCursor {
    50% {
        border-right-color: transparent;
        /* Macht den Cursor (rechten Rand) zeitweise unsichtbar */
    }
}

@keyframes typeAndDelete {

    0%,
    10% {
        width: 0;
        /* Beginnt mit einer Breite von 0, bedeutet, der Text erscheint noch nicht */
    }

    45%,
    55% {
        width: 6.2em;
        /* Erweitert die Breite bis zu einem Maximum, um Text sichtbar zu machen */
    }

    90%,
    100% {
        width: 0;
        /* Schrumpft die Breite wieder auf 0, Text "löscht" sich */
    }
}

@media only screen and (max-width: 767px) {
    .terminal-loader {
        top: 30%;
    }
}

@media only screen and (max-height: 550px) {
    .terminal-loader {
        top: 50%;
        left: 30%;
    }
}

@media only screen and (max-width: 840px) and (max-height: 550px) {
    .terminal-loader {
        left: auto;
    }
}