Das ist die perfekte Vorlage! Ich habe dein CSS jetzt komplett "durchgeputzt". Überall, wo das grelle Blau (#00bfff) als Rahmen saß, habe ich es durch dein neues Steel-Grey-Blue (#34495e) ersetzt.

Außerdem habe ich die Glow-Effekte (Schatten) angepasst. Das grelle Blau leuchtete so stark, dass es auf Videos oft geflimmert hat. Jetzt haben wir einen dezenten, dunklen Schatten, der Tiefe gibt, ohne zu blenden.

Hier ist dein finales, bereinigtes CSS:

CSS

/* =============================================================
   MAGIC MOON - LIVE FINAL CSS (STEEL-DESIGN UPDATE)
   ============================================================= */

/* 1. VIDEO HINTERGRUND */
#video-bg { 
    position: fixed; top: 50%; left: 50%; 
    min-width: 100%; min-height: 100%; 
    z-index: -1; transform: translateX(-50%) translateY(-50%);
    object-fit: cover; opacity: 1.0; 
}

body { 
    margin: 0; padding: 0; 
    font-family: "sans serif ms", Arial, Sans-Serif; 
    background-color: #000; color: #fff; 
}

.site-wrapper { 
    width: 95%; 
    max-width: 1280px; 
    margin: 0 auto; 
    position: relative; 
    z-index: 10;
}

/* 2. HEADER EINHEIT (Verschmolzen - Jetzt in Steel-Blue) */
.header-container { 
    margin-top: 10px;
    background: rgba(0,0,0,0.85);
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    /* UPDATE: Rahmen von Blau auf Steel-Grey-Blue */
    border: 4px solid #34495e; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    display: block; 
    padding: 0;
}

.header-banner { 
    width: 100% !important; 
    height: 308px !important; 
    background-image: url("../images/design_<?php echo $d; ?>/header.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0;
    padding: 0;
    display: block;
    border: none !important;
}

.nav-container { 
    width: 100%;            
    height: 57px; 
    background-image: url("../images/box_2/nav_bg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    text-align: center; 
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: none !important; 
    border-bottom: none !important; 
    outline: none !important;
}

/* 2.1 NAVIGATION BUTTONS */
.nav-button { 
    color: #ffffff; 
    text-decoration: none; 
    margin: 0 15px; 
    font-weight: 800;
    font-size: 16px;
    text-transform: uppercase;
    padding: 10px 20px;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
    text-shadow: 2px 2px 4px #000000;
    background: rgba(0, 0, 0, 0.5); 
    /* Button-Rahmen dezent gehalten */
    border: 2px solid #34495e;
    display: inline-block;
}

.nav-button:hover { 
    color: #ffffff; 
    background: #34495e; 
    box-shadow: 0 0 15px rgba(52, 73, 94, 0.6);
    transform: translateY(-2px);
}

/* 3. BOXEN DESIGN (Zentraler Fix für alle Panels) */
.magic-box, .content-box-middle { 
    background: rgba(0, 0, 0, 0.85); 
    border-radius: 12px; 
    margin-bottom: 15px; 
    overflow: hidden;
    /* UPDATE: Markanter Steel-Rahmen */
    border: 4px solid #34495e; 
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.7);
}

/* BOXEN ÜBERSCHRIFTEN */
.box-header, .content-header { 
    background-image: url("../images/box_<?php echo $d; ?>/nav_oben.png") !important; 
    background-size: 100% 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    /* Linie unter dem Header passend zum Steel-Look */
    border-bottom: 2px solid #34495e; 
    color: #ffffff !important;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 1px 1px 2px #000;
}

.box-content, .content-body { 
    padding: 15px; 
}

/* 4. FOOTER (Abschluss unten) */
.main-footer { 
    background: #000;
    border-radius: 0 0 15px 15px;
    overflow: hidden;
    /* UPDATE: Footer-Rahmen vereinheitlicht */
    border: 4px solid #34495e;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.8); 
    margin-bottom: 40px;
    margin-top: -10px !important; 
}

.footer-banner {
    width: 100%;
    height: 100px;
    background-image: url("../images/<?php echo $D; ?>/footer.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* Logo-Abschluss für die Seiten-Panels */
.side-col .magic-box::after {
    content: "";
    display: block;
    width: 100%;
    height: 60px; 
    background-image: url("../images/box_<?php echo $d; ?>/nav_unten.png"); 
    background-size: 100% auto; 
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 15px;
    border-top: 1px solid rgba(52, 73, 94, 0.4);
}