/* ====================== ZENTRIERTER CONTAINER ====================== */
.special-mission-box {
    display: flex;
    justify-content: center;
    gap: 50px;
    margin: 180px auto;
    max-width: 1728px;
    padding: 0 24px;
}
/* ====================== LINKER TEXTKASTEN ====================== */
.mission-text-box {
    flex: 0 0 504px;
    background-color: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 10px;
}
/* ====================== RECHTER VIDEO-KASTEN ====================== */
.mission-video-box {
    flex: 0 0 900px;
    height: 500px;
    position: relative;
    overflow: hidden;

    /* FUTURISTIC GLOW */
    filter: 
        drop-shadow(0 0 8px rgba(0, 255, 255, 0.4))
        drop-shadow(0 0 16px rgba(0, 119, 255, 0.3));

    transition: transform 0.4s ease;
}

.mission-video-box video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: polygon(
        8% 0%,
        100% 0%,
        100% 85%,
        93% 100%,
        0% 100%,
        0% 20%
    );
}

/* Bild-Version (für Askaban) */
.mission-video-box img.banner-base {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    clip-path: polygon(
        8% 0%,
        100% 0%,
        100% 85%,
        93% 100%,
        0% 100%,
        0% 20%
    );
}

/* Rahmen */
.box-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.box-frame polygon {
    stroke: #00aaff;
    stroke-width: 2;
    fill: none;
}
/* ====================== TEXT BOX ====================== */
.mission-text-box {
    flex: 0 0 504px;
    background-color: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 10px;

    transition: transform 0.4s ease, box-shadow 0.4s ease;

    box-shadow:
        0 0 8px rgba(0, 255, 255, 0.4),
        0 0 16px rgba(0, 119, 255, 0.3);
}

/* Hover nur auf Text */
.mission-text-box:hover {
    transform: scale(1.2);
    z-index: 5;
    box-shadow:
        0 0 12px #00ffff,
        0 0 24px #0077ff;
}

/* Bild/Video verkleinern wenn Text gehovert wird */
.special-mission-box:has(.mission-text-box:hover) .mission-video-box {
    transform: scale(0.9);
}
/* ====================== INDIVIDUELLE BOX-VERSCHIEBUNG ====================== */
/* Obere Reihe */
#showEvents2 .special-mission-top .special-mission-box:nth-of-type(1) {
    transform: translateX(-50px); /* leicht nach links */
}
#showEvents2 .special-mission-top .special-mission-box:nth-of-type(2) {
    transform: translateX(50px);  /* leicht nach rechts */
}
/* Untere Reihe (optional später anpassen) */
#showEvents2 .special-mission-bottom .special-mission-box:nth-of-type(1) {
    transform: translateX(-30px);
}
#showEvents2 .special-mission-bottom .special-mission-box:nth-of-type(2) {
    transform: translateX(30px);
}
/* ================================= GLOBAL ================================= */
body {
    margin: 0;
    font-family: 'Orbitron', Arial, sans-serif;
    color: white;
    background-color: black; /* bleibt schwarz */
    min-height: 100vh;
}
/* ================= GRID BACKGROUND FOR SUBPAGES ================= */

.simple-page {
    position: relative;
    background: black;
    overflow: hidden;
}

/* Grid Overlay */
.simple-page::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;

    background-image: 
        linear-gradient(rgba(0,170,255,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,170,255,0.06) 1px, transparent 1px);

    background-size: 50px 50px; /* Grid Abstand */
    pointer-events: none;
}

.simple-page > * {
    position: relative;
    z-index: 1;
}
/* ================================= HEADER ================================= */
.header-image {
    width: 100%;
    height: 200px; /* bleibt fix */
    background: url('PRESENTATION/BILDER WEBPAGE/1.png') center no-repeat;
    background-size: 100% 100%; /* nur Breite strecken, Höhe bleibt Kasten */
}
/* ================================= NAV ================================= */
nav {
    background: rgba(0, 0, 0, 0.9);
    border-top: 2px solid #00aaff;
    border-bottom: 2px solid #00aaff;
    position: sticky;
    top: 0;
    z-index: 1000;
}
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 100px;
}
nav ul li {
    position: relative;
    padding: 18px 0;
    font-size: 18px;
}
nav ul li a {
    text-decoration: none;
    color: white;
    font-weight: bold;
    letter-spacing: 1.5px;
}
/* =================== Dropdown-Menü Standard =================== */
nav ul li ul {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    background: #001f33;
    min-width: 500px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
    z-index: 1000;
    /* Höhe automatisch, damit alle Items Platz haben */
    height: auto;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
/* Dropdown sichtbar beim Hover */
nav ul li:hover ul {
    opacity: 1;
    visibility: visible;
}
/* Einzelne Einträge vertikal */
nav ul li ul li {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 20px 20px;

    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
/* Oberer Abstand für ersten Eintrag beibehalten */
nav ul li ul li:first-child {
    margin-top: 22px;
}
/* Abstand nach unten nur beim letzten Eintrag */
nav ul li ul li:last-child {
    margin-bottom: 35px;
}
/* Links in den Dropdown-Einträgen */
nav ul li ul li a {
    display: block;
    text-decoration: none;
    color: white;
    font-weight: bold;
    padding: 0;
    transition: color 0.5s ease;
}
/* Hover-Effekt für Dropdown-Einträge */
nav ul li ul li a:hover {
    color: #00aaff;
}
/* Hauptreiter Hover bleibt unverändert */
nav ul li:hover > a {
    background-color: transparent;
    color: white;
}
/* Leuchtstreifen */
nav ul li ul::after {
    content: "";
    position: absolute;
    bottom: 9px;
    left: 50px;
    right: 50px;
    height: 4px;
    background-color: #00aaff;
    box-shadow: 0 0 12px #00ffff, 0 0 20px #0077ff;
    border-radius: 2px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
/* Keyframes für Flackern */
@keyframes flacker {
    0%   { opacity: 0; }
    10%  { opacity: 1; }
    20%  { opacity: 0.6; }
    30%  { opacity: 1; }
    40%  { opacity: 0.4; }
    50%  { opacity: 1; }
    60%  { opacity: 0.5; }
    70%  { opacity: 1; }
    80%  { opacity: 0.3; }
    90%  { opacity: 1; }
    100% { opacity: 1; }
}
/* Hover: Balken flackert */
nav ul li:hover ul::after {
    animation: flacker 0.7s forwards;
}
/* ================= STAGGERED DROPDOWN ITEMS ================= */
nav ul li:hover ul li:nth-child(1) {
    transition-delay: 0.05s;
    opacity: 1;
    transform: translateY(0);
}
nav ul li:hover ul li:nth-child(2) {
    transition-delay: 0.12s;
    opacity: 1;
    transform: translateY(0);
}
nav ul li:hover ul li:nth-child(3) {
    transition-delay: 0.19s;
    opacity: 1;
    transform: translateY(0);
}
nav ul li:hover ul li:nth-child(4) {
    transition-delay: 0.26s;
    opacity: 1;
    transform: translateY(0);
}
nav ul li:hover ul li:nth-child(5) {
    transition-delay: 0.33s;
    opacity: 1;
    transform: translateY(0);
}
nav ul li:hover ul li:nth-child(6) {
    transition-delay: 0.40s;
    opacity: 1;
    transform: translateY(0);
}
nav ul li:hover ul li:nth-child(7) {
    transition-delay: 0.47s;
    opacity: 1;
    transform: translateY(0);
}
/* ================================= MIDDLE BUTTON ================================= */
.middle-button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('PRESENTATION/BILDER WEBPAGE/TEST1.gif');
    background-size: 2600px 300px;
    background-position: center;
    background-repeat: no-repeat;
    height: 150px;
    border-bottom: 3px solid #00aaff;
    position: relative; /* Overlay korrekt positionieren */
    z-index: 1;
    gap: 80px; /* Abstand zwischen Bildern und Button */
}
.middle-button-container::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.0); /* halbtransparentes Schwarz über dem GIF */
    z-index: 0;
}
.middle-button {
    position: relative;  /* damit der Button über dem Overlay liegt */
    z-index: 1;
    background: linear-gradient(135deg, #00ffff, #0077ff);
    color: white;
    font-size: 27px;
    font-weight: 900;
    padding: 15px 30px;
    border: 4px solid #00ffff;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.4s ease;
    box-shadow: 
        0 0 20px #00ffff,
        0 0 40px #0077ff,
        0 0 60px #00ffff inset;
    text-transform: uppercase;
    letter-spacing: 3px;
}
.middle-button:hover {
    transform: scale(1.15);
    box-shadow:
        0 0 30px #00ffff,
        0 0 60px #0077ff,
        0 0 80px #00ffff inset;
}
/* Bilder links und rechts vom Button */
.side-image {
    width: 90%;          /* etwas kleiner als Original */
    max-width: 120px;    /* maximale Breite */
    z-index: 1;
}
/* Unteres/rechtes Bild um 180 Grad drehen */
.flipped {
    transform: scaleX(-1);
}
/* ================================= CONTENT ================================= */
.content {
    letter-spacing: 1.0px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px;                    /* Abstand zwischen den Kästen */
    padding: 0px 10px 80px 10px;  /* Abstand oben (vom Vorregistrierungsbutton) */
    flex-grow: 1;
    overflow: hidden;
}
/* Abstand nur für den ersten Kasten */
.content .box:first-of-type {
    margin-top: 60px; /* oder so viel, wie du brauchst */
}
/* Hintergrundvideo nur innerhalb der Content-Boxen */
.content #background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    filter: brightness(50%);
}
/* ================= FUTURISTIC BOXES ================= */
.box {
    background: rgba(0, 0, 0, 0.85);
    width: 90%;
    max-width: 1100px;
    aspect-ratio: 16 / 9;
    display: flex;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    transition: 0.3s;
    margin: 0 auto;
    /* Polygon mit abgeschrägten Ecken */
    clip-path: polygon(
        90px 0%,
        100% 0%,
        100% calc(100% - 90px),
        calc(100% - 80px) 100%,
        0% 100%,
        0% 20%
    );
}
.box::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* exakt dasselbe Polygon wie die Box */
    clip-path: polygon(
        90px 0%,
        100% 0%,
        100% calc(100% - 90px),
        calc(100% - 80px) 100%,
        0% 100%,
        0% 20%
    );
    border: 3px solid #00aaff; /* blauer Rahmen */
    box-sizing: border-box;
    z-index: 3; /* über Video/Bilder, unter Text */
}
.box:hover {
    transform: scale(1.05);
    background: rgba(0,42,68,0.8);
}
.box-text {
    width: 20%;
    padding: 20px;
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    background: rgba(0,0,0,0.5);
    z-index: 4; /* Text liegt über Rahmen */
}
.box-video {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1; /* Video/Bilder unter Rahmen */
}
.box-video video,
.box-video img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* füllt Box perfekt aus */
    display: block;
}
.box-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* klickbar bleibt das Video/Text */
    z-index: 3; /* über Video, unter Text */
}
.patch-buttons-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 90%;
    max-width: 800px;
    margin: 40px auto;
}
.patch-box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px; /* nur so hoch wie nötig */
    background: rgba(0, 0, 0, 0.85);
    color: white;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    position: relative;
    transition: 0.3s;
    cursor: pointer;
    clip-path: polygon(
        30px 0%, 100% 0%, 100% 100%, calc(100% - 30px) 100%, 0% 100%, 0% 30%
    ); /* abgeschrägte Kanten ähnlich wie große Boxen, aber angepasst */
    border: 3px solid #00aaff;
}
.patch-box:hover {
    transform: scale(1.03);
    background: rgba(0, 42, 68, 0.8);
    box-shadow: 
        0 0 10px #00ffff,
        0 0 20px #0077ff,
        0 0 30px #00ffff inset;
}
/* ================================= BANNER ================================= */
.full-width-banner {
    width: 100%;
    height: 250px;          /* feste Höhe des Kastens */
    position: relative;
    overflow: hidden;
    border-top: 2px solid #00aaff;
    border-bottom: 2px solid #00aaff;
    background-color: transparent; /* sicherstellen, dass kein schwarzer Balken entsteht */
    z-index: 0;
}
.banner-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Bild füllt den Container perfekt */
    z-index: 0;        /* Bild liegt ganz hinten */
}
.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0; /* Overlay nur sichtbar, wenn nötig */
    transition: opacity 0.6s ease-in-out;
    z-index: 1; /* Overlay über dem Bild, aber unter Buttons */
    background-color: rgba(0,0,0,0); /* Kein Schwarz standardmäßig */
}
.banner-buttons {
    position: absolute;
    bottom: 20px;
    right: 40px;
    display: flex;
    gap: 120px;
    z-index: 2; /* Buttons immer ganz oben */
}
/* ==================== BANNER BUTTONS FUTURISTIC STYLE ==================== */
.banner-buttons button {
    padding: 20px 40px;
    font-size: 22px;
    border: 1px solid #00aaff;
    background: rgba(0,0,0,0.5);
    color: #00aaff;
    font-weight: bold;
    cursor: pointer;
    position: relative;
    overflow: visible; /* Glow außerhalb der Box möglich */
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 0 8px rgba(0,170,255,0.3);
}
/* Hover-Effekt: nur größer + Glow außerhalb */
.banner-buttons button:hover {
    transform: scale(1.1);
    box-shadow: 
        0 0 15px rgba(0,170,255,0.5),
        0 0 25px rgba(0,119,255,0.3),
        0 0 35px rgba(0,170,255,0.2);
    background: rgba(0,0,0,0.6); /* minimal dunkler beim Hover */
}
/* ================================= TICKER ================================= */
.ticker {
    height: 30px;
    overflow: hidden;
    display: flex;
    align-items: center;
    border-top: 2px solid #00aaff;
    border-bottom: 2px solid #00aaff;
    background: rgba(0,0,0,0.9);
}
.ticker-track {
    display: flex;
    width: max-content;
    animation: ticker-scroll 100s linear infinite;
}
.ticker-content {
    white-space: nowrap;
    padding-right: 20px; /* vorher 120px */
    font-size: 20px;
    font-weight: bold;
    color: #00aaff;
}
@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
/* ================================= FOOTER ================================= */
footer {
    background: 
        linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,0.8)),
        url("PRESENTATION/BILDER WEBPAGE/TEST1c.jpg") center/cover no-repeat;
    border-top: 2px solid #00aaff;
    padding: 50px 20px 100px 20px; /* Abstand oben/rechts/unten/links */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    
    min-height: 400px; /* Mindesthöhe sichern, Footer schrumpft nicht */
}
.footer-logo {
    position: absolute;
    left: 140px;
    top: 38%;
    transform: translateY(-50%);
    height: 180px;
}
.footer-title {
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 3px;
    margin-top: 50px;
}
.footer-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 80px;
    margin-top: 50px;
    margin-left: 65px; /* verschiebt die Icons nach rechts */
}
.footer-block {
    background: rgba(0,0,0,0.5);
    border: 2px solid #00aaff;
    border-radius: 8px;
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.4s ease;
    display: inline-block;  /* nur Größe, kein Flex hier */
}
.footer-block a {
    display: flex;           /* Flex auf den Link selbst */
    align-items: center;     /* vertikal zentriert */
    justify-content: flex-start; /* Icon links, Text daneben */
    gap: 10px;
    padding: 10px 20px;     /* Abstand innen */
    text-decoration: none;  /* Unterstrich entfernen */
    color: #00aaff;         /* Textfarbe */
    font-weight: bold;
    line-height: 1;         /* kein extra Höhenproblem */
}
.footer-block a svg {
    width: 30px;
    height: 30px;
    flex-shrink: 0;         /* Icon nicht schrumpfen lassen */
    display: block;         /* Baseline-Offset entfernen */
}
.footer-block:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.05);

    /* FUTURISTIC GLOW */
    box-shadow: 
        0 0 20px #00ffff,
        0 0 40px #0077ff,
        0 0 60px #00ffff inset;
}
.footer-info {
    position: absolute;       /* absolute Position innerhalb des Footers */
    bottom: 60px;             /* Abstand vom unteren Rand des Footers */
    background: rgba(0,0,0,0.5);
    border: 2px solid #00aaff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: bold;
    left: 50%;                /* horizontal zentrieren */
    transform: translateX(-50%);
}
.footer-disclaimer {
    position: absolute;
    left: 80px;
    bottom: 150px;
    font-size: 10px;
    font-weight: bold;
    color: #00aaff;
    max-width: 300px;
    line-height: 1.2;
}
.footer-banners {
    display: flex;           /* Bilder nebeneinander */
    justify-content: center; /* zentriert die Reihe */
    gap: 70px;               /* Abstand zwischen den Bildern */
    margin-bottom: 10px;     
}

.footer-banners img {
    width: 300px;            /* feste Breite */
    height: 100px;           /* feste Höhe */
}
/* ==================== FIXIERTE NAV-BUTTONS UNTEN RECHTS - NEU STYLING ==================== */
#scrollTopBtn,
#backBtn,
#forwardBtn {
  position: fixed;
  width: 50px;
  height: 50px;
  font-size: 24px;

  background-color: rgba(0,0,0,0.7); /* dunkler transparenter Kreis */
  color: #00aaff;                     /* Pfeil in Akzentfarbe */
  border: 2px solid #00aaff;          /* feiner Rand für Sichtbarkeit */
  
  border-radius: 50%;                  /* Kreisform */
  cursor: pointer;
  box-shadow: 0 0 15px rgba(0,170,255,0.5); /* leichter Glow */
  
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  z-index: 9999;
}

/* Positionierung */
#scrollTopBtn { bottom: 90px; right: 30px; }  /* nach oben */
#backBtn { bottom: 30px; right: 90px; }       /* zurück */
#forwardBtn { bottom: 30px; right: 30px; }    /* weiter */

/* Hover-Effekt */
#scrollTopBtn:hover,
#backBtn:hover,
#forwardBtn:hover {
  transform: scale(1.2);
  background-color: rgba(0,0,0,0.9);           /* etwas dunkler beim Hover */
  box-shadow: 0 0 25px rgba(0,170,255,0.8);    /* stärkerer Glow */
}
/* ================= SIMPLE CONTENT PAGES ================= */
.simple-page {
    display: flex;
    justify-content: center;
    padding-top: 80px;
}

.simple-container {
    max-width: 1000px;
    width: 90%;
    color: white;
    font-size: 18px;
    line-height: 1.6;
}

.simple-container h1 {
    font-size: 36px;
    margin-bottom: 30px;
    border-bottom: 2px solid #00aaff;
    padding-bottom: 10px;
}
/* ================= JOIN THE UNIVERSE ================= */
.join-container {
    max-width: 1400px;      /* mehr Platz */
    width: 95%;             /* nutzt mehr vom Screen */
    margin: 10px auto 0 auto;
}

.join-image {
    display: block;
    margin: 0 auto 80px auto;
    max-width: 1000px;   /* vorher 600px */
    width: 95%;          /* nutzt fast gesamte Breite */
    height: auto;
}

/* Überschrift links */
.join-title {
    font-size: 36px;
    margin-bottom: 20px;
    border-bottom: 2px solid #00aaff;
    padding-bottom: 10px;
    text-align: left;
}

.join-A {
    width: 500px;
    max-width: 20%;
    height: auto;
    display: block;
    margin: 30px auto;
}
/* ================= Patch Archiv Buttons ================= */
.patch-buttons-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.patch-box {
    background-color: #00aaff;
    color: #fff;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    transition: all 0.3s ease; /* sanfte Übergänge */
}

.patch-box:hover {
    background-color: #00bfff; /* helleres, leuchtenderes Blau */
    transform: translateY(-2px);
    box-shadow: 0 0 15px #00dfff, 0 0 30px #00aaff; /* sanftes Leuchten außen */
}
/* ================= Patch Page Styling ================= */
.content.simple-page {
    display: none; /* Start hidden, JS zeigt die richtige Section */
    padding: 40px 20px;
    font-family: 'Orbitron', sans-serif;
    color: #fff;
    background-color: #111;
}
.content.simple-page h2 {
    color: #00aaff;
    margin-bottom: 15px;
}
.content.simple-page p,
.content.simple-page ul {
    line-height: 1.6;
    margin-bottom: 15px;
}
.content.simple-page ul li {
    margin-left: 20px;
}
.back-button {
    display: inline-block;
    margin-top: 20px;
    padding: 8px 15px;
    background-color: #00aaff;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s;
}
.back-button:hover {
    background-color: #0088cc;
}
/* ==================== PATCH PAGE STYLING ==================== */
.patch-page h2 {
    font-family: 'Orbitron', sans-serif; /* gleiche Schrift wie überall */
    font-size: 36px;                     /* gleiche Größe wie join-title */
    font-weight: 700;                    /* fett */
    color: #ffffff;                      /* weiß */
    border-bottom: 3px solid #00aaff;    /* blaue Linie */
    padding-bottom: 5px;                 /* Abstand zwischen Text und Linie */
    margin-bottom: 20px;                 /* Abstand nach unten */
}
.patch-page pre {
    font-family: 'Orbitron', sans-serif; /* gleiche Schriftart */
    font-size: 18px;                      /* gleiche Größe wie Content */
    line-height: 1.5;                     /* Zeilenabstand */
    color: #ffffff;                       /* Textfarbe weiß */
    background: none;                     /* kein Hintergrund */
    white-space: pre-wrap;                /* Zeilen umbrechen */
    word-wrap: break-word;                /* Wortumbruch */
    margin-bottom: 20px;                  /* Abstand nach unten */
}
.patch-page pre span.added,
.patch-page pre span.changed {
    color: #00aaff;                       /* blau */
    font-weight: bold;
}
/* Nur Video auf Join-The-Universe-Seite */
.join-container .join-video {
    width: 800px;       /* gewünschte Breite */
    max-width: 95%;     /* responsive für kleinere Bildschirme */
    height: auto;       /* Seitenverhältnis bleibt erhalten */
    display: block;
    margin: 0 auto 50px auto; /* zentriert + Abstand unten */
    border-radius: 12px;       /* optional, schöner Look */
    box-shadow: 0 0 25px rgba(0, 170, 255, 0.3); /* optional Glow */
}
/* ==================== PATCH BUTTONS ==================== */
.patch-buttons-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px; /* horizontale Lücke 10px, vertikale 14px */
    margin-top: 20px;

    position: relative;  /* Positioniert Container für z-index */
    z-index: 10;         /* Liegt über Grid, Boxen, Hintergrund */
}
.patch-button {
    position: relative;  /* notwendig für z-index der Pseudo-Elemente */
    z-index: 11;         /* liegt über Container und Grid */
    display: inline-block;
    padding: 12px 28px;
    margin: 8px 0;       /* vertikale Lücke ein wenig größer */
    font-family: 'Orbitron', sans-serif;
    font-size: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #00aaff;
    background: rgba(0, 170, 255, 0.12); /* etwas helleres Innenleben */
    border: 1px solid rgba(0, 170, 255, 0.3);
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
}
.patch-button::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(0, 170, 255, 0.15);
    pointer-events: none; /* verhindert Klickblockierung */
    border-radius: 8px;
}
.patch-button::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border-top: 2px solid #00aaff;
    border-left: 2px solid #00aaff;
    top: 0;
    left: 0;
    pointer-events: none; /* verhindert Klickblockierung */
}
.patch-button:hover {
    background: rgba(0, 170, 255, 0.18); /* beim Hover auch etwas heller */
    box-shadow: 
        0 0 12px rgba(0, 170, 255, 0.4),
        0 0 20px rgba(0, 170, 255, 0.2) inset,
        0 0 25px rgba(0, 170, 255, 0.3); /* futuristischer Glow */
    transform: translateY(-2px);
}
/* Universeller Glow für alle Bilder */
img {
    filter: drop-shadow(0 0 15px rgba(0, 170, 255, 0.7));
    transition: filter 0.3s ease;
}
/* ==================== BACK TO ARCHIVE BUTTON ==================== */
.back-to-archive {
    position: relative;
    display: inline-block;
    margin-top: 40px;
    padding: 14px 32px;

    font-family: 'Orbitron', sans-serif;
    font-size: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;

    color: #00aaff;
    background: rgba(0, 170, 255, 0.12);
    border: 1px solid rgba(0, 170, 255, 0.3);
    border-radius: 8px;

    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
}
.back-to-archive::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(0, 170, 255, 0.15);
    border-radius: 8px;
    pointer-events: none;
}
.back-to-archive::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border-top: 2px solid #00aaff;
    border-left: 2px solid #00aaff;
    top: 0;
    left: 0;
    pointer-events: none;
}
.back-to-archive:hover {
    background: rgba(0, 170, 255, 0.18);
    box-shadow: 
        0 0 12px rgba(0, 170, 255, 0.4),
        0 0 20px rgba(0, 170, 255, 0.2) inset,
        0 0 25px rgba(0, 170, 255, 0.3);
    transform: translateY(-2px);
}
/* ==================== SPECIAL MISSION HOVER EFFECTS ==================== */
.special-mission-box:hover {
    transform: none;
    z-index: auto;
}
.mission-text-box {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    transform-origin: center center; /* skaliert von der Mitte */
    z-index: 2; /* liegt über Video */
}
.mission-text-box:hover {
    transform: scale(1.2);
    z-index: 5; /* über Video */
    box-shadow:
        0 0 12px #00ffff,
        0 0 24px #0077ff;
}
/* ================= Video skalieren beim Hover ================= */
.mission-video-box {
    transition: transform 0.4s ease; /* sorgt für sanftes Rückskalieren */
}
.mission-text-box:hover + .mission-video-box {
    transform: scale(0.9); /* 10% kleiner */
}
/* ===== Patch Announcement Box ===== */
.patch-announcement-box {
    /* bisherige Styles behalten */
    background: rgba(0, 170, 255, 0.06);
    border: 2px solid #00aaff;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 30px;
    backdrop-filter: blur(8px);
    box-shadow:
        0 0 15px rgba(0,170,255,0.6),
        0 0 30px rgba(0,170,255,0.4),
        0 0 60px rgba(0,170,255,0.2);

    clip-path: polygon(
        8.3% 0%,      /* oben links */
        100% 0%,    /* oben rechts */
        100% 85%,   /* unten rechts vor Schräge */
        92.5% 100%,   /* unten rechts Schräge */
        0% 100%,    /* unten links */
        0% 20.3%      /* oben links Schräge */
    );
}
.patch-announcement-box h2 {
    color: #00dfff;
    margin-bottom: 15px;
    text-shadow: 0 0 10px rgba(0,170,255,0.7);
}
.version-text {
    color: #ffffff;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255,140,0,0.8);
}
.version-text {
    color: white;  /* macht den Text weiß */
}
.content.simple-page {
    display: none;       /* versteckt standardmäßig */
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* damit es am oberen Rand startet */
    min-height: 100vh;  /* volle Höhe des Viewports */
}
/* ================= TIMER ================= */
.countdown {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Orbitron', sans-serif;
    color: #00ffff;
    font-size: 60px;
    font-weight: 900;
    text-shadow: 
        0 0 10px #00ffff,
        0 0 20px #0077ff,
        0 0 30px #00ffff;
    letter-spacing: 3px;
    text-align: center;
    z-index: 5;
    pointer-events: none;

    white-space: nowrap;
}
.countdown span {
    display: inline;
    min-width: auto;
}
/* ================= JOIN IMAGE ================= */
.join-images {
    display: flex;                /* Bilder nebeneinander */
    justify-content: center;      /* zentriert im Container */
    gap: 130px;                    /* Abstand zwischen den Bildern */
    flex-wrap: wrap;              /* falls Bildschirm zu schmal, umbrechen */
}

.join-images img {
    max-width: 45%;               /* Bilder etwas größer */
    height: auto;                 /* proportional skalieren */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: transform 0.7s cubic-bezier(0.25, 0.8, 0.25, 1); /* sanfte Animation */
}

.join-images img:hover {
    transform: scale(1.4);        /* 50% größer beim Hover */
    z-index: 10;                  /* über dem anderen Bild */
}