/* ===== RESPONSIVE HEADER ===== */

@media (max-width: 768px) {
    .header-center, 
    .header-center-nav { display: none; }
}
@media (max-width: 768px) {
    .header-columns { gap: 0; }
}

/* ===== RESPONSIVE HEADLINE ===== */

@media (max-width: 768px) {
    .site-headline {
        top: 0;
        z-index: 900;
        width: 100%;
    }
    .headline-columns {
        display: grid;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
        padding: 30px 20px 30px 20px;
        background-color: var(--headlineBackground);
    }
    .headline-center {
        position: relative;
        text-align: center;
        font-weight:300;
        color: var(--headlineTitle);
    }
}

/* ===== RESPONSIVE SECTION ===== */

@media (max-width: 768px) {
	.hero-section,
    .chat-section,
	.feature-section,
	.model-section,
	.vision-section,
	.app-section,
	.team-gallery,
	.model-overview-section,
	.team-boxes,
	.chat-column,
	.model-column,
	.product-install-column,
	.product-faq-column,
	.info-column,
	.legal-column,
	.download-column,
	.download-intro,
	.support-section,
	.user-column { 
        padding: 10px;
    }
}

/* ===== RESPONSIVE COLUMN ===== */

@media (max-width: 768px) {
    .info-column,
    .product-install-column,
	.product-faq-column,
    .download-column,
	.product-column,
    .inprint-column,
    .legal-column {
    	width: 96%;
    	margin: 0 auto;
		padding-top: 40px;
		margin-top:20px;
    }
}

/* ===== RESPONSIVE GRID ===== */

@media (max-width: 768px) {

    .hero-boxes,
    .feature-section,
    .model-boxes,
    .vision-section,
    .app-boxes,
	.team-gallery,
	.team-boxes,
    .founding-boxes,
    .pricing-boxes,
    .model-section,
    .model-overview-grid,
	.download-boxes,
	.user-column,
	.support-form {
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 100%;
    }
}

/* ===== RESPONSIVE FOOTER ===== */

@media (max-width: 768px) {
    .footer-columns {
        grid-template-columns: 1fr;
        gap: 40px;
		padding-left: 20px;
    }
}

/* ===== RESPONSIVE ÜBERSCHRIFTEN ===== */

@media (max-width: 768px) {
    h1 { font-size: 1.6rem; font-weight: 600; }
    h2 { font-size: 1.4rem; font-weight: 550;}
    h3 { font-size: 1.2rem; font-weight: 500;} 
    h4 { font-size: 1.0rem; font-weight: 450;}
    h5 { font-size: 0.9rem; font-weight: 400;}
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ===== RESPONSIVE TITLE ===== */

@media (max-width: 768px) {
	.feature-title,
	.model-section-title,
	.vision-title,
	.app-section-title,
	.legal-column h1 {
		font-size: 1.6rem;
		line-height: 1.6;
		text-align:center;
    }
	.support-title {
	font-size: 1.4rem;
	}
}

/* ===== RESPONSIVE BUTTON ===== */

@media (max-width: 768px) {
	.grund-buttons {
    	display: grid;
		gap: 30px;
    	}
	.button-primary {
		padding-bottom: 20px;
	}
}
	
/* ===== RESPONSIVE INDEX ===== */

/* Index C1 HERO */
@media (max-width: 768px) {
	.hero-boxes {
	margin-bottom: 30px;
	}
    .hero-buttons {
        gap: 15px;
        flex-direction: column;
		padding-top: 20px;
		margin-bottom: 30px;
    }
}

/* ===== RESPONSIVE MODEL ===== */

@media (max-width: 768px) {
	.model-overview-section {
		padding: 20px 5px 0px 5px;
	}
    .model-overview-info {
        width: calc(100% - 30px);
    }
	.model-detail-icon {
    	width: 100%;
    	max-width: 100%;
    	overflow: hidden;
    	box-sizing: border-box;
	}
	.model-detail-icon img {
    	display: block;
    	width: 100%;
    	max-width: 100%;
    	height: auto;
    	object-fit: contain;	
	}	
	.founding-intro {
    	padding: 10px 10px 30px 10px;
	}
	.founding-info-box {
    	padding: 20px 10px 10px 10px;
	}
}

/* ===== RESPONSIVE PRODUCT TABELLE ===== */

@media (max-width: 768px) {
	.compare-head, .compare-row {
		display: inline-block;
	}
	.compare-head-title {
		text-align: center;
	}
}

/* ===== RESPONSIVE Diverse ===== */

@media (max-width: 768px) {
	.feature-section {
	gap: 20px; 
	}
	.feature-content {
	padding-bottom: 30px;
	}
	.vision-section {
	gap: 0px;
	}
	.user-section {
	padding: 0px;
	}
	.user-headline {
	margin-top: 20px;
	}
}