/* --- GLOBALE BASIS (Gilt für alle Seiten) --- */
body { background-color: #000000; color: #ffffff; margin: 0; padding: 0; font-family: 'Montserrat', sans-serif; }
.container { max-width: 1200px; margin: 0 auto; padding: 20px; box-sizing: border-box; }


.service-grid, .contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.contact-card, .service-card {
    background-color: #1a1a1a;
    border: 1px solid #333;
    padding: 30px;
    border-radius: 10px;
}

.rounded-corners {
    border-radius: 20px;
    object-fit: cover;
    width: 100%;
    max-width: 400px;
    height: auto;
    display: block;
	border: none !important;    
    outline: none !important;    
    box-shadow: none !important;
}





/* --- MONTSERRAT LOKAL --- */
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-v31-latin-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-v31-latin-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-v31-latin-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-v31-latin-700italic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-v31-latin-900.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }



/* --- HEADER & NAVIGATION --- */





/* --- BUTTONS --- */
.btn-primary, .back-button, .download-button, .view-project-button, .service-link, .form-button, .view-all-button { background-color: #D40000; color: #ffffff; padding: 10px 20px; border-radius: 5px; text-decoration: none; display: inline-block; font-weight: bold; border: 2px solid #D40000; transition: all 0.3s ease; }
.btn-secondary {background-color: transparent;border: 1px solid #ffffff;color: #ffffff;padding: 15px 30px;border-radius: 5px;text-decoration: none;font-weight: bold;display: inline-block;transition: all 0.3s ease;}
.btn-secondary:hover {background-color: #ffffff;color: #000000;}
.btn-primary:hover, .back-button:hover, .download-button:hover, .view-project-button:hover, .service-link:hover, .form-button:hover, .view-all-button:hover { background-color: transparent; color: #00FF00; border-color: #00FF00; }

/* --- FOOTER --- */
.main-footer { background-color: #1a1a1a; padding: 30px 20px; border-top: 1px solid #333; text-align: center; }
.footer-nav .footer-link { color: #D40000 !important; text-decoration: none !important; }
.footer-nav .footer-link:hover { color: #ffffff !important; }

/* --- SYSTEM STATUS (Global) --- */
.system-status { position: absolute; top: 20px; right: 20px; display: flex; align-items: center; gap: 8px; font-family: monospace; font-size: 0.8rem; color: #00FF00 !important; }
.status-dot { width: 8px; height: 8px; background-color: #00FF00 !important; border-radius: 50%; box-shadow: 0 0 5px #00FF00; animation: pulse 2s infinite; }
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } }

/* --- MOBILE GLOBAL --- */
@media (max-width: 900px) {
	#mainNav {
        position: absolute !important;
        top: 120px !important; /* Passe diesen Wert an deine Header-Höhe an */
        left: 0 !important;
        width: 100% !important;
        background-color: #000000 !important;
        z-index: 9999 !important;
    }

    /* Damit sichergestellt ist, dass es nur sichtbar ist, wenn aktiv */
    #mainNav:not(.active) {
        display: none !important;
    }
	.logo-and-toggle {display: flex;justify-content: space-between;align-items: center;width: 100%;position: relative;padding: 10px 0;}
    .menu-toggle { display: block !important; cursor: pointer; }
    .nav { display: none; position: absolute; top: 80px; left: 0; width: 100%; background-color: #000; flex-direction: column; z-index: 999; }
    .nav.active { display: flex; }
    .system-status { position: relative; width: 100%; justify-content: center; margin-top: 15px; order: 3; }
	 .menu-toggle {display: block !important;order: 3;font-size: 30px;cursor: pointer;}
	.logo {order: 1;}
}