/* Reset & Base Styles */

* {

    box-sizing: border-box;

    padding: 0;

    margin: 0;

}



:root {

    --viessmann-red: #E2001A;

    --viessmann-dark: #1A1A1A;

    --gray-50: #F9FAFB;

    --gray-100: #F3F4F6;

    --gray-200: #E5E7EB;

    --gray-300: #D1D5DB;

    --gray-400: #9CA3AF;

    --gray-500: #6B7280;

    --gray-600: #4B5563;

    --gray-700: #374151;

    --gray-800: #1F2937;

    --gray-900: #111827;

}



html {

    scroll-behavior: smooth;

}



body {

    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    color: var(--viessmann-dark);

    background: #ffffff;

    line-height: 1.6;

    overflow-x: hidden;

}



a {

    color: inherit;

    text-decoration: none;

}



.container {

    max-width: 1280px;

    margin: 0 auto;

    padding: 0 1rem;

}



@media (min-width: 640px) {

    .container {

        padding: 0 1.5rem;

    }

}



@media (min-width: 1024px) {

    .container {

        padding: 0 2rem;

    }

}



/* Header */

.header {

    background: white;

    box-shadow: 0 2px 4px rgba(0,0,0,0.1);

    position: sticky;

    top: 0;

    z-index: 50;

}



.header-content {

    display: flex;

    align-items: center;

    justify-content: space-between;

    height: 64px;

}



.logo-section {

    display: flex;

    align-items: center;

}



.mobile-menu-btn {

    display: block;

    padding: 0.5rem;

    border-radius: 0.375rem;

    color: var(--gray-700);

    background: none;

    border: none;

    cursor: pointer;

    font-size: 1.5rem;

    margin-right: 1rem;

}



@media (min-width: 1024px) {

    .mobile-menu-btn {

        display: none;

    }

}



.logo {

    display: flex;

    align-items: center;

}



.logo-text {

    font-size: 1.5rem;

    font-weight: bold;

}



.logo-red {

    color: var(--viessmann-red);

}



.logo-dark {

    color: var(--gray-800);

}



.logo-service {

    margin-left: 0.5rem;

    font-size: 0.875rem;

    color: var(--gray-600);

}



.desktop-nav {

    display: none;

    align-items: center;

    gap: 2rem;

}



@media (min-width: 1024px) {

    .desktop-nav {

        display: flex;

    }

}



.desktop-nav a {

    color: var(--gray-700);

    transition: color 0.2s;

}



.desktop-nav a:hover {

    color: var(--viessmann-red);

}



.header-cta {

    display: flex;

    align-items: center;

}



.mobile-menu {

    display: none;

    padding: 1rem 0;

    border-top: 1px solid var(--gray-200);

}



.mobile-menu.active {

    display: block;

}



.mobile-nav {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.mobile-nav a {

    color: var(--gray-700);

    padding: 0.5rem 0;

    transition: color 0.2s;

}



.mobile-nav a:hover {

    color: var(--viessmann-red);

}



.mobile-phone {

    color: var(--viessmann-red);

    font-weight: 600;

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



.desktop-only {

    display: none;

}



@media (min-width: 640px) {

    .desktop-only {

        display: inline;

    }

}



.mobile-only {

    display: inline;

}



@media (min-width: 640px) {

    .mobile-only {

        display: none;

    }

}



/* Buttons */

.btn-primary {

    background: var(--viessmann-red);

    color: white;

    padding: 0.75rem 1.5rem;

    border-radius: 0.5rem;

    font-weight: 600;

    transition: all 0.2s;

    box-shadow: 0 4px 6px rgba(0,0,0,0.1);

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    border: none;

    cursor: pointer;

}



.btn-primary:hover {

    background: #C00016;

    box-shadow: 0 6px 12px rgba(0,0,0,0.15);

}



.btn-large {

    padding: 1rem 2rem;

    font-size: 1.125rem;

}



.btn-extra-large {

    padding: 1.5rem 3rem;

    font-size: 1.5rem;

}



/* Hero Section */

.hero {

    background: linear-gradient(to bottom right, var(--gray-50), var(--gray-100));

    padding: 5rem 0;

}



.hero-grid {

    display: grid;

    gap: 3rem;

    align-items: center;

}



@media (min-width: 1024px) {

    .hero-grid {

        grid-template-columns: 1fr 1fr;

    }

}



.badge {

    margin-bottom: 1rem;

}



.badge span {

    display: inline-block;

    background: #FEE2E2;

    color: var(--viessmann-red);

    padding: 0.5rem 1rem;

    border-radius: 9999px;

    font-size: 0.875rem;

    font-weight: 600;

}



.hero-title {

    font-size: 2.25rem;

    font-weight: bold;

    color: var(--gray-900);

    margin-bottom: 1.5rem;

    line-height: 1.2;

}



@media (min-width: 768px) {

    .hero-title {

        font-size: 3rem;

    }

}



@media (min-width: 1024px) {

    .hero-title {

        font-size: 3.75rem;

    }

}



.text-red {

    color: var(--viessmann-red);

    display: block;

}



.hero-description {

    font-size: 1.25rem;

    color: var(--gray-600);

    margin-bottom: 2rem;

    line-height: 1.75;

}



.features-grid {

    display: grid;

    grid-template-columns: 1fr;

    gap: 1rem;

    margin-bottom: 2rem;

}



@media (min-width: 640px) {

    .features-grid {

        grid-template-columns: repeat(3, 1fr);

    }

}



.feature-item {

    display: flex;

    align-items: center;

    gap: 0.75rem;

}



.feature-item i {

    font-size: 1.5rem;

}



.feature-item span {

    color: var(--gray-700);

    font-weight: 500;

}



.hero-cta {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



@media (min-width: 640px) {

    .hero-cta {

        flex-direction: row;

    }

}



.hero-card {

    background: white;

    border-radius: 1rem;

    box-shadow: 0 10px 15px rgba(0,0,0,0.1);

    padding: 2rem;

}



.card-title {

    font-size: 1.5rem;

    font-weight: bold;

    color: var(--gray-900);

    margin-bottom: 1.5rem;

}



.phone-card {

    display: block;

    padding: 1.5rem;

    background: linear-gradient(to bottom right, var(--viessmann-red), #B80016);

    border-radius: 0.5rem;

    margin-bottom: 1.5rem;

    transition: all 0.2s;

    border: 2px solid transparent;

}



.phone-card:hover {

    background: linear-gradient(to bottom right, #B80016, #A00014);

    border-color: #900012;

}



.phone-card-content {

    display: flex;

    align-items: center;

    justify-content: space-between;

    color: white;

}



.phone-label {

    font-size: 0.875rem;

    opacity: 0.9;

    margin-bottom: 0.5rem;

}



.phone-number {

    font-size: 1.875rem;

    font-weight: bold;

}



.phone-icon {

    font-size: 1.875rem;

}



.card-divider {

    padding-top: 1.5rem;

    border-top: 1px solid var(--gray-200);

}



.working-hours {

    padding-top: 1.5rem;

}



.hours-label {

    font-size: 0.875rem;

    color: var(--gray-600);

    margin-bottom: 0.5rem;

}



.hours-text {

    font-size: 1.125rem;

    font-weight: 600;

    color: var(--gray-900);

}



/* Services Section */

.services {

    padding: 5rem 0;

    background: white;

}



.section-header {

    text-align: center;

    margin-bottom: 4rem;

}



.section-title {

    font-size: 2.25rem;

    font-weight: bold;

    color: var(--gray-900);

    margin-bottom: 1rem;

}



@media (min-width: 768px) {

    .section-title {

        font-size: 3rem;

    }

}



.section-description {

    font-size: 1.25rem;

    color: var(--gray-600);

    max-width: 48rem;

    margin: 0 auto;

}



.services-grid {

    display: grid;

    grid-template-columns: 1fr;

    gap: 2rem;

    max-width: 80rem;

    margin: 0 auto 3rem;

}



@media (min-width: 768px) {

    .services-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}



.service-card {

    background: var(--gray-50);

    border-radius: 0.75rem;

    padding: 2rem;

    border: 1px solid var(--gray-200);

    transition: all 0.3s;

}



.service-card:hover {

    box-shadow: 0 20px 25px rgba(0,0,0,0.1);

    border-color: var(--viessmann-red);

}



.service-icon {

    background: var(--viessmann-red);

    width: 4rem;

    height: 4rem;

    border-radius: 0.5rem;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 1.5rem;

}



.service-icon i {

    color: white;

    font-size: 1.5rem;

}



.service-title {

    font-size: 1.25rem;

    font-weight: bold;

    color: var(--gray-900);

    margin-bottom: 0.75rem;

}



.service-description {

    color: var(--gray-600);

    margin-bottom: 1.5rem;

}



.service-link {

    color: var(--viessmann-red);

    font-weight: 600;

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    transition: all 0.2s;

}



.service-link:hover {

    text-decoration: underline;

}



.services-cta {

    text-align: center;

}



/* About Section */

.about {

    padding: 5rem 0;

    background: var(--gray-50);

}



.badge-container {

    margin-top: 1.5rem;

}



.features-grid-4 {

    display: grid;

    grid-template-columns: 1fr;

    gap: 2rem;

    margin-bottom: 4rem;

}



@media (min-width: 768px) {

    .features-grid-4 {

        grid-template-columns: repeat(2, 1fr);

    }

}



@media (min-width: 1024px) {

    .features-grid-4 {

        grid-template-columns: repeat(4, 1fr);

    }

}



.feature-box {

    text-align: center;

}



.feature-icon-circle {

    background: white;

    width: 5rem;

    height: 5rem;

    border-radius: 9999px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 1.5rem;

    box-shadow: 0 4px 6px rgba(0,0,0,0.1);

}



.feature-icon-circle i {

    color: var(--viessmann-red);

    font-size: 1.875rem;

}



.feature-title {

    font-size: 1.25rem;

    font-weight: bold;

    color: var(--gray-900);

    margin-bottom: 0.75rem;

}



.feature-text {

    color: var(--gray-600);

}



.why-us-card {

    background: white;

    border-radius: 1rem;

    box-shadow: 0 10px 15px rgba(0,0,0,0.1);

    padding: 2rem;

    max-width: 48rem;

    margin: 0 auto;

}



@media (min-width: 768px) {

    .why-us-card {

        padding: 3rem;

    }

}



.why-us-title {

    font-size: 1.875rem;

    font-weight: bold;

    color: var(--gray-900);

    margin-bottom: 1.5rem;

    text-align: center;

}



.why-us-list {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.why-us-item {

    display: flex;

    align-items: flex-start;

    gap: 1rem;

}



.why-us-item i {

    color: var(--viessmann-red);

    font-size: 1.25rem;

    margin-top: 0.25rem;

    flex-shrink: 0;

}



.why-us-item h4 {

    font-weight: 600;

    color: var(--gray-900);

    margin-bottom: 0.25rem;

}



.why-us-item p {

    color: var(--gray-600);

}



/* Contact Section */

.contact {

    padding: 5rem 0;

    background: white;

}



.contact-content {

    max-width: 64rem;

    margin: 0 auto;

}



.contact-grid {

    display: grid;

    grid-template-columns: 1fr;

    gap: 2rem;

    margin-bottom: 3rem;

}



@media (min-width: 768px) {

    .contact-grid {

        grid-template-columns: 1fr 1fr;

    }

}



.contact-phone-card {

    background: linear-gradient(to bottom right, var(--viessmann-red), #B80016);

    border-radius: 1rem;

    padding: 2rem;

    box-shadow: 0 10px 15px rgba(0,0,0,0.1);

}



.contact-card-title {

    font-size: 1.5rem;

    font-weight: bold;

    color: white;

    margin-bottom: 1.5rem;

}



.contact-phone-link {

    display: block;

    padding: 1.5rem;

    background: rgba(255,255,255,0.2);

    border-radius: 0.5rem;

    transition: all 0.2s;

    border: 2px solid transparent;

}



.contact-phone-link:hover {

    background: rgba(255,255,255,0.3);

    border-color: white;

}



.contact-phone-content {

    display: flex;

    align-items: center;

    justify-content: space-between;

    color: white;

}



.contact-phone-label {

    font-size: 0.875rem;

    opacity: 0.9;

    margin-bottom: 0.5rem;

}



.contact-phone-number {

    font-size: 2.25rem;

    font-weight: bold;

}



.contact-phone-icon {

    font-size: 2.25rem;

}



.contact-info {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}



.contact-info-item {

    display: flex;

    align-items: flex-start;

    gap: 1rem;

}



.contact-info-icon {

    width: 3rem;

    height: 3rem;

    border-radius: 0.5rem;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}



.email-icon {

    background: var(--gray-800);

}



.address-icon {

    background: #3B82F6;

}



.contact-info-icon i {

    color: white;

    font-size: 1.25rem;

}



.contact-info-title {

    font-weight: bold;

    color: var(--gray-900);

    margin-bottom: 0.5rem;

}



.contact-info-link {

    color: var(--gray-600);

    font-size: 1.125rem;

    transition: color 0.2s;

}



.contact-info-link:hover {

    color: var(--viessmann-red);

}



.contact-info-text {

    color: var(--gray-600);

    font-size: 1.125rem;

}



.contact-hours-card {

    background: var(--gray-50);

    border-radius: 0.75rem;

    padding: 1.5rem;

}



.contact-hours-title {

    font-weight: bold;

    color: var(--gray-900);

    margin-bottom: 1rem;

}



.contact-hours-text {

    color: var(--gray-700);

    font-size: 1.125rem;

    font-weight: 600;

    margin-bottom: 0.5rem;

}



.contact-hours-subtext {

    color: var(--gray-600);

}



.contact-cta {

    text-align: center;

}



/* Footer */

.footer {

    background: var(--gray-900);

    color: white;

    padding: 3rem 0;

}



.footer-grid {

    display: grid;

    grid-template-columns: 1fr;

    gap: 2rem;

    margin-bottom: 2rem;

}



@media (min-width: 768px) {

    .footer-grid {

        grid-template-columns: repeat(3, 1fr);

    }

}



.footer-logo {

    font-size: 1.5rem;

    font-weight: bold;

    margin-bottom: 1rem;

}



.footer-logo-red {

    color: var(--viessmann-red);

}



.footer-text {

    color: var(--gray-400);

    margin-bottom: 1rem;

}



.footer-badge {

    background: #FEE2E2;

    color: var(--viessmann-red);

    padding: 0.25rem 0.5rem;

    border-radius: 0.25rem;

    font-size: 0.75rem;

    font-weight: 600;

}



.footer-title {

    font-size: 1.125rem;

    font-weight: 600;

    margin-bottom: 1rem;

}



.footer-links {

    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

}



.footer-links li {

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



.footer-icon {

    color: var(--viessmann-red);

}



.footer-links a {

    color: var(--gray-400);

    transition: color 0.2s;

}



.footer-links a:hover {

    color: white;

}



.footer-bottom {

    border-top: 1px solid var(--gray-800);

    padding-top: 2rem;

    text-align: center;

    color: var(--gray-400);

    font-size: 0.875rem;

}



.footer-disclaimer {

    margin-top: 0.5rem;

    font-size: 0.75rem;

}

/* City Links Styles */
.city-link {
    padding: 0.75rem;
    background: var(--gray-100);
    border-radius: 0.5rem;
    text-align: center;
    color: var(--gray-700);
    transition: all 0.2s;
    text-decoration: none;
    display: block;
    font-weight: 500;
}

.city-link:hover {
    background: var(--viessmann-red);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}