/* This is a comment in CSS */
        /* Allgemeine Stildefinitionen */
        @font-face {
            font-family: 'Source Sans Pro';

        }

        body {
            font-family: 'Source Sans Pro', sans;
            background-image: url('Axel_bad.jpg');
            background-size: cover;
            color: #ccccff;
            margin: 0 auto;
            padding: 0;
        }

        /* Hyperlink-Stil */
        a {
            text-decoration: none;
            color: #66d9ef;
        }

        a:visited {
            color: #ffb6c1;
        }

        a:hover {
            text-decoration: underline;
        }

        /* Stil für Link-Kategorien */
        .categories {
            display: flex;
            flex-wrap: wrap;
            background-color: rgba(44, 62, 80, 0.7); /* Halb durchsichtiger Dunkelblau-Hintergrund */
            color: #ecf0f1;
            padding: 10px;
            line-spacing: 2px;
            line-height: 0.7;
        }

        /* Stil für einzelne Kategorien */
        .category {
            flex: 1;
            margin: 10px;
            background-color: rgba(44, 72, 80, 0.5); /* Viertel durchsichtiger Hintergrund */
        }

        /* Stil für Links in Kategorien */
        .category a {
            color: #cdd0f1;
            display: block;
            margin-bottom: 10px;
        }

        @media (max-width: 768px) {
            /* Wenn die Bildschirmbreite 768px oder kleiner ist, untereinander anzeigen */
            .categories {
                flex-direction: column;
            }

            .category {
                width: auto;
            }
        }

        .progress-container {
            display: flex;
            align-items: center;
        }

        .progress-bar {
            font-size: 100%;
            flex: 1;
            height: 10px;
            margin: 2px;
            background-color: #f0f0f0;
            position: relative;
        }

        .bar {

            height: 50%;
            width: 0;
            transition: width 1s;
            position: absolute;
        }

        .bar-text {
            position: absolute;
            left: 12px;
            top: 1opx;
        }

        .core-container {
            display: flex;
        }

        .core-bar {
            flex: 1;
            height: 10px;
            background-color: #f0f0f0;
            position: relative;
            margin: 2px;
        }

        .core-load {
    font-size: 100%;
            height: 100%;
            width: 0;
            transition: width 1s;
            position: absolute;
        }

        .core-bar-text {
    font-size: 100%;
            position: absolute;
            left: 5px;
            top: 5px;
            color: #ffffff;
        }

/* Stil für die Container-Box */
        .container {
    font-size: 80%;
            width: 30%;
            background-color: rgba(44, 62, 80, 0.7);
            padding: 10px;
            margin: 0 auto; /* Horizontal zentriert */
            position: absolute; /* Absolute Positionierung */
            left: 50%;
            transform: translate(-50%, -50%);
            bottom: 0; /* Am unteren Rand positionieren */
        }

        /* Stil für die progress-container */
        .progress-container {
            display: flex; /* Flexbox-Layout für die Fortschrittsbalken */
            justify-content: space-between; /* Platz zwischen den Balken */
        }

        /* Farbschemata */
        .green {
            background-color: #6CBF50;
        }

        .light-green {
            background-color: #7ADD63;
        }

        .light-orange {
            background-color: #FFB500;
        }

        .orange {
            background-color: #FF7600;
        }

        .red {
            background-color: #FF3030;
        }

        #video-background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
        }

        #video-background video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.strikethrough {
    text-decoration: line-through !important; /* Wichtig, um die Standard-Unterstreichung zu überschreiben */
    opacity: 0.6; /* Optional: Macht die Links etwas blasser, um sie als "inaktiv" zu kennzeichnen */
}