html {
                height: 100%;
                background: black;
                overflow: hidden;
            }
            body {
                position: absolute;
                top: 50%;
                left: 50%;
                width: 1920px;
                height: 1080px;
                transform: translate(-50%, -50%);
                margin: 0;
                padding: 0;
                font-family: Arial, sans-serif;
                color: white;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .color-overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(to bottom right, rgba(1,40,69,0.98), rgba(59,151,202,0.98));
                mix-blend-mode: lighten;
                z-index: -2;
                pointer-events: none;
            }
                .color-overlay-home {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(to bottom right, rgba(0, 32, 55, 0.98), rgba(40, 107, 143, 0.98));
                mix-blend-mode: lighten;
                z-index: -2;
                pointer-events: none;
            }
            #hintergrund-video {
                position: fixed;
                left: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                z-index: -3;
                top: 20%;
            }
            .grid-overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-image: url('grafik/grid.png');
                background-size: cover;
                mix-blend-mode: soft-light;
                opacity: 0.4;
                z-index: -1;
                pointer-events: none;
            }
            #grid-overlay-particles {
                position: absolute;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                z-index: 1;
                pointer-events: none;
            }
            .container {
                width: 1600px;
                height: 900px;
                padding: 0px;
                background: transparent;
                border: none;
                box-sizing: border-box;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .container2 {
                margin-top: 50px;
                width: 1650px;
                height: 900px;
                padding: 30px;
                border-radius: 10px;
                background: rgba(39, 183, 255, 0.2);
                border: 1px solid rgba(255, 255, 255, 0.3);
                backdrop-filter: blur(10px);
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-items: stretch;
                gap: 40px;
            }
            .tile-grid {
                display: grid;
                grid-template-columns: repeat(2, 380px);
                gap: 40px;
                justify-content: center;
                align-items: center;
            }
            .tile-grid-2 {
                display: grid;
                grid-template-columns: repeat(3, 380px);
                gap: 40px;
                justify-content: center;
                align-items: center;
            }
            .tile {
                background: rgba(255, 255, 255, 0.08);
                color: #ffffff;
                font-size: 2em;
                font-weight: bold;
                display: flex;
                justify-content: center;
                align-items: center;
                text-align: center;
                width: 380px;
                height: 380px;
                border-radius: 18px;
                box-shadow: 0 0 20px rgba(14, 59, 88, 0.15);
                cursor: pointer;
                text-decoration: none;
                border: 2px solid rgba(255,255,255,0.3);
                backdrop-filter: blur(10px);
                /* Optional: für weicheren Effekt */
                transition: background 0.3s, color 0.3s, box-shadow 0.3s;
            }
            .tile-long2 {
                width: 99%;
                max-width: none;
                height: 50px;
                min-height: 50px;
                margin: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.5em;
                border-radius: 10px;
                background: rgba(255, 255, 255, 0.08);
                color: #ffffff;
                border: 2px solid rgba(255,255,255,0.388);
                box-shadow: 0 0 20px rgba(14, 59, 88, 0.15);
                backdrop-filter: blur(10px);
                font-weight: bold;
                text-transform: uppercase;
                text-decoration: none;
                transition: background 0.3s, color 0.3s, box-shadow 0.3s;
            }
            .tile:hover {
                filter: brightness(1.2);
            }
            .tile-vertical {
                display: grid;
                grid-template-rows: 1fr 1fr;
                gap: 20px;
                height: 380px; /* gleiche Höhe wie die anderen Tiles */
            }
            .small-tile {
                height: 177px; /* oder 50% von .tile-vertical */
                font-size: 2em;
                width: 100%;
                margin: 0;
            }
            
            .dlr-logo {
                position: absolute;
                top: 25px;
                right: 25px;
                opacity: 0.85;
                cursor: pointer;
                user-select: none;
                transition: opacity 0.2s;
                z-index: 10;
            }
            .dlr-logo img {
                height: 85px;
                width: auto;
            }
            .dlr-logo:hover {
                opacity: 1;
            }
            .back-button {
                position: absolute;
                top: 20px;
                left: 20px;
                font-size: 50px;
                font-weight: bold;
                color: white;
                text-decoration: none;
                opacity: 0.8;
                transition: opacity 0.2s;
                z-index: 10;
            }
            .back-button:hover {
                opacity: 1;
            }
    
            .text-column h1 {
                font-size: 3em;
                margin-top: 0;
                text-transform: uppercase;
                letter-spacing: 0.05em;    /* Abstand zwischen den Buchstaben */
            }

            /* Kleine Überschrift */
            .text-column h2 {
                font-size: 1.8em;
                margin-top: 0.5em;
                margin-bottom: 0.5em;
                font-weight: normal;
                text-transform: none;      /* Normale Groß-/Kleinschreibung */
                color: #b3e6ff;
            }

            /* Video caption heading style */
            .text-h2.video-caption {
                font-size: 1.2em;
                margin: 8px 0 0px 0;
                color: #eaf9ff;
                font-weight: 500;
                text-align: center;
            }

            /* Videos nebeneinander */
            .responsive-video-row {
                display: flex;
                gap: 10px;
                width: 100%;
                flex-wrap: wrap;    
            }
            .video-item {
                flex: 1 1 calc(50% - 8px);
                min-width: 300px;
            }
            .video-item > div {
                height: 700px !important;
                padding-top: 0 !important;
            }
            
            @media (max-width: 900px) {
                .video-item {
                    flex: 1 1 100%;
                }
            }

            /* Video-Item für zerstoer.html - niedrigere Höhe */
            .video-item-small {
                flex: 1 1 calc(50% - 8px);
                min-width: 300px;
            }
            .video-item-small > div {
                height: 500px !important;
                padding-top: 0 !important;
            }
            
            @media (max-width: 900px) {
                .video-item-small {
                    flex: 1 1 100%;
                }
            }


            .column-links {
                width: 780px; /* Feste Breite hinzufügen */
                flex-basis: 780px;
                text-align: left;
                border-radius: 10px;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                /* Scrollbar hinzufügen, falls der Text zu lang wird */
                overflow-y: auto;
                gap: 10px;
            }

            .column-rechts {
                flex-basis: 50%;
                max-width: 50%;
                display: flex;
                flex-direction: column;
                box-sizing: border-box;
                padding: 0px;
                padding-right: 2px;
                justify-content: flex-start;
                gap: 15px;
                overflow-y: auto;
            }
            .column-rechtsflow {
                flex-basis: 50%;
                max-width: 50%;
                display: flex;
                flex-direction: column;
                box-sizing: border-box;
                padding: 0px;
                justify-content: flex-start;
                gap: 47px;

                /* Füge diese Zeile hinzu, um vertikales Scrollen zu ermöglichen */
                overflow-y: auto;

                /* Optional: Fügt etwas Platz für die Scrollbar hinzu */
                padding-right: 15px;
            }
            .column-rakete {
                width: 1700px;
                display: flex;
                align-items: center;    
                justify-content: center;
            }
            .column-rakete img {
                height: auto;
                width: auto;
                object-fit: contain;
                display: block;
            }

            /* Text-Styles */
            .text-h1 {
                font-size: 2em;
                margin-top: 0;
                text-transform: uppercase;
                letter-spacing: 0.05em;
                font-weight: bold;
            }

            .text-h2 {
                font-size: 1.8em;
                margin-top: 1.5em;
                margin-bottom: 0.5em;
                font-weight: normal;
                text-transform: none;
                color: #b3e6ff;
            }

            .text-h3 {
                font-size: 1.2em;
                margin-top: 0.5em;
                margin-bottom: 0.5em;
                font-weight: normal;
                color: #fff;
                line-height: 1.6;
            }

            /* === Styling für die Scrollleiste === */
                ::-webkit-scrollbar {
                width: 12px;
            }
                ::-webkit-scrollbar-track {
                background: #012845; /* Dunkle Farbe des Verlaufs */
                border-radius: 10px;
            }

                ::-webkit-scrollbar-thumb {
                background: #397da2; /* Helle Farbe des Verlaufs */
                border-radius: 10px;
                border: 2px solid #012845; /* Rand in der Farbe des Tracks */
            }

                ::-webkit-scrollbar-thumb:hover {
                background: #55a0c9; /* Etwas hellere Farbe beim Hovern */
            }
           .bullet-list {
                list-style-type: disc; /* Standard-Aufzählungspunkte */
                padding-left: 25px; /* Einzug für die Liste */
                color: white; /* Textfarbe, passend zum Design */
                font-size: 1.1rem; /* Angepasste Schriftgröße für Lesbarkeit */
                line-height: 1.6; /* Zeilenhöhe für bessere Lesbarkeit */
            }
            .bullet-list li {
                font-size: 1.2em;        /* entspricht h3 in deiner Definition */
                line-height: 1.6;
                margin-bottom: 1.5rem;
                color: #fff;             /* für gute Sichtbarkeit */
                text-align: left;
            }
            .claim {
                position: fixed;
                bottom: 14px;
                left: 50%;
                transform: translateX(-50%);
                font-size: 1.5rem;
                font-weight: 300; /* Light */
                font-family: Arial, sans-serif;
                color: white;
                text-align: center;
                z-index: 1000;
                white-space: nowrap;
                letter-spacing: 2px;
                cursor: pointer; /* indicate it's clickable */
                transition: opacity 0.15s, transform 0.15s;
            }
            .claim:hover {
                text-decoration: underline;
                transform: translateX(-50%) translateY(-1px);
            }
                    /* Zurück-Pfeil als Dreieck */
            .back-arrow {
                position: fixed;
                left: 45px;
                top: 50%;
                transform: translateY(-50%);
                width: 0;
                height: 0;
                border-top: 40px solid transparent;
                border-bottom: 40px solid transparent;
                border-right: 40px solid white;
                cursor: pointer;
                z-index: 1000;
            }
            .back-arrow:hover {
                border-right-color: #ccc;
            }

            .text-box {
                overflow-y: auto; /* Text scrollbar */
                padding-right: 10px; /* optional: Platz für Scrollbar */
                background-color: rgba(0, 0, 0, 0.1);
                padding: 25px;
                border-radius: 10px;
                height: 100%;
            }

            .button-box {
                display: flex;
                flex-direction: column; /* oder row, falls nebeneinander */
                gap: 10px;
                margin-top: 20px;
            }        
            #breadcrumb {
                font-size: 1.3rem;  /* oder px, em – je nach Wunsch */
                font-weight: normal;
                color: white;       /* falls du es anpassen willst */
                text-transform: uppercase;
            }
            .video-wrapper {
                position: relative;
                width: 100%;
                aspect-ratio: 16 / 9; /* moderner statt padding-top-Trick */
            }

                .video-wrapper video {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
                .video-caption {
                text-align: right;   /* rechtsbündig */
                margin-top:     55px;    /* Abstand zum Video */
}
/* Sprach-Toggle Flagge */
.lang-flag {
    position: fixed;
    bottom: 17px;
    right: 30px;
    width: 80px;
    height: auto;
    cursor: pointer;
    z-index: 1000;
    transition: transform 0.2s;
}

.lang-flag:hover {
    transform: scale(1.1);
}

/* Genereller Abstand unter Videos */
video {
    margin-bottom: 15px;
    margin-top: 20px;
}

/* Abstand über Image-Grids */
.image-grid,
.image-grid1 {
    margin-top: 10px;
    margin-bottom: 20px;
}

/* Video-Container Abstand */
div[style*="padding-top"] video {
    margin-top: 0;
}