* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Helle Farbwelt in Anlehnung an den M-Serie-Prospekt */
    --dark-bg: #F3F0EA;          /* Grundfläche: helles Beige */
    --dark-secondary: #FFFFFF;   /* Karten und abgesetzte Flächen */
    --sand: #E8E1D6;             /* warmes Sandbeige für Wechselflächen */
    --primary: #C1272D;          /* Rot – Flächen & Buttons (weiße Schrift darauf) */
    --primary-text: #A81F25;     /* dunkleres Rot – Text auf hellem Grund */
    --primary-hover: #9E1B21;
    --text-light: #232220;       /* Haupttext: Anthrazit */
    --text-muted: #6e6a63;
    --border-color: #ddd7cb;
    --accent: #b8590f;

    /* abgeleitete Transparenzen */
    --primary-glow: rgba(193, 39, 45, 0.14);
    --primary-soft: rgba(193, 39, 45, 0.08);
    --primary-softer: rgba(193, 39, 45, 0.05);

    /* dunkle Werte für Navigation und Footer */
    --dunkel: #232220;
    --dunkel-rand: #3c3a37;
}

html {
    scroll-behavior: smooth;
    /* reserviert die Breite des Scrollbalkens dauerhaft,
       damit beim Öffnen von Overlays nichts springt */
    scrollbar-gutter: stable;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    background-color: var(--dark-bg);
    color: var(--text-light);
    line-height: 1.6;
    letter-spacing: 0.5px;
}

/* ============ Navigation ============ */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(35, 34, 32, 0.96);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
    z-index: 1000;
    padding: 1rem 0;
}

.nav-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--text-light);
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 3rem;
}

.nav-menu a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.3s ease;
    position: relative;
}

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: width 0.3s ease;
}

.nav-menu a:hover {
    color: var(--text-light);
}

.nav-menu a:hover::after {
    width: 100%;
}

.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.hamburger span {
    width: 25px;
    height: 2px;
    background: var(--text-light);
}

/* ============ Hero Section ============ */
.hero {
    margin-top: 80px;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: center;
    padding: 6rem 2rem;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.hero-content h1 {
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 2rem;
    letter-spacing: -1px;
}

.hero-content p {
    font-size: 1.25rem;
    color: var(--text-muted);
    margin-bottom: 1.1rem;
    max-width: 520px;
    line-height: 1.7;
}

.hero-content p:last-of-type {
    margin-bottom: 2.6rem;
}

.hero-content p a {
    color: var(--primary-text);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--primary-glow);
}

.hero-content p a:hover,
.hero-content p a:focus-visible {
    border-bottom-color: var(--primary);
}

.cta-button {
    display: inline-block;
    padding: 16px 40px;
    background: var(--primary);
    color: var(--text-light);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    border: 2px solid var(--primary);
}

.cta-button:hover {
    background: transparent;
    color: var(--primary-text);
}

.hero-visual {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    align-items: center;
    justify-items: center;
}

.visual-element {
    text-align: center;
    padding: 3rem 2rem;
    background: var(--dark-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: all 0.3s ease;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.visual-element:hover {
    border-color: var(--primary);
    transform: translateY(-10px);
    box-shadow: 0 20px 40px var(--primary-glow);
}

.visual-element span {
    font-size: 4rem;
    display: block;
    margin-bottom: 1rem;
}

.visual-element h3 {
    font-size: 1.3rem;
    font-weight: 600;
}

/* ============ Services Section ============ */
.services {
    padding: 8rem 2rem;
    background: var(--dark-secondary);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.section-header {
    max-width: 600px;
    margin: 0 auto 5rem;
    text-align: center;
}

.section-header h2 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    letter-spacing: -0.5px;
}

.section-header p {
    font-size: 1.1rem;
    color: var(--text-muted);
}

.services-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
}

.service-item {
    padding: 3rem;
    background: var(--dark-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.service-item:hover {
    border-color: var(--primary);
    transform: translateY(-8px);
    box-shadow: 0 30px 60px var(--primary-glow);
}

.service-icon {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    display: block;
}

.service-item h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.service-item p {
    color: var(--text-muted);
    margin-bottom: 2rem;
    line-height: 1.8;
}

.features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.features li {
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* ============ Stats Section ============ */
.stats {
    padding: 6rem 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
}

.stat h3 {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-text);
    margin-bottom: 0.5rem;
}

.stat p {
    font-size: 1.1rem;
    color: var(--text-muted);
}

/* ============ About Section ============ */
.about {
    padding: 8rem 2rem;
    background: var(--dark-secondary);
    border-bottom: 1px solid var(--border-color);
}

.about-container {
    max-width: 900px;
    margin: 0 auto;
}

.about-container h2 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
    letter-spacing: -0.5px;
}

.about-container > p {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

.about-features {
    margin-top: 4rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.feature {
    display: flex;
    gap: 1.5rem;
}

.feature-icon {
    font-size: 2.5rem;
    flex-shrink: 0;
}

.feature h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.feature p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* ============ Contact Section ============ */
.contact {
    padding: 8rem 2rem;
}

.contact-wrapper {
    max-width: 1400px;
    margin: 0 auto;
}

.contact-header {
    text-align: center;
    margin-bottom: 5rem;
}

.contact-header h2 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    letter-spacing: -0.5px;
}

.contact-header p {
    font-size: 1.1rem;
    color: var(--text-muted);
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: start;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
    padding: 14px 18px;
    background: var(--dark-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-light);
    font-family: inherit;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: var(--text-muted);
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--dark-secondary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

.submit-button {
    padding: 16px 40px;
    background: var(--primary);
    color: var(--text-light);
    border: 2px solid var(--primary);
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
}

.submit-button:hover {
    background: transparent;
    color: var(--primary-text);
}

.contact-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.info-card {
    padding: 2rem;
    background: var(--dark-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.info-card:hover {
    border-color: var(--primary);
    transform: translateY(-5px);
}

.info-card h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--primary-text);
}

.info-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

.info-card a {
    color: var(--primary-text);
    text-decoration: none;
    font-weight: 600;
}

.info-card a:hover {
    text-decoration: underline;
}

.info-card .small {
    font-size: 0.85rem;
}

/* ============ Footer ============ */
.footer {
    background: var(--dark-secondary);
    border-top: 1px solid var(--border-color);
    padding: 4rem 2rem 2rem;
}

.footer-content {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
}

.footer-section h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    letter-spacing: 0.5px;
}

.footer-section p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.footer-section ul {
    list-style: none;
}

.footer-section a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    display: block;
    padding: 0.4rem 0;
    transition: color 0.3s ease;
}

.footer-section a:hover {
    color: var(--primary-text);
}

.footer-bottom {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* ============ Responsive Design ============ */
@media (max-width: 1024px) {
    .hero {
        grid-template-columns: 1fr;
        padding: 4rem 2rem;
    }

    .hero-content h1 {
        font-size: 3.5rem;
    }

    .hero-visual {
        grid-template-columns: 1fr;
    }

    .contact-content {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .contact-info {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    /* Klappmenü: schiebt sich als eigenes Feld unter die Leiste,
       statt sich als Zeile über das Logo zu legen. */
    .nav-wrapper {
        position: static;
    }

    .hamburger {
        display: flex;
    }

    .nav-menu {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        gap: 0;
        background: rgba(28, 27, 25, 0.99);
        backdrop-filter: blur(10px);
        border-top: 1px solid var(--dunkel-rand);
        border-bottom: 3px solid var(--primary);
        padding: 0;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transition: max-height 0.28s ease, opacity 0.2s ease, visibility 0.2s;
    }

    .nav-menu.offen {
        max-height: 75vh;
        overflow-y: auto;
        opacity: 1;
        visibility: visible;
        padding: 0.4rem 0;
    }

    .nav-menu li {
        display: block;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .nav-menu li:last-child {
        border-bottom: none;
    }

    .nav-menu a {
        display: block;
        padding: 0.95rem 2rem;
        font-size: 1rem;
        color: rgba(255, 255, 255, 0.88);
    }

    .nav-menu a:hover,
    .nav-menu a:focus-visible {
        background: rgba(255, 255, 255, 0.07);
        color: #ffffff;
    }

    /* Der Unterstrich der Desktopfassung stört im Klappmenü */
    .nav-menu a::after {
        display: none;
    }

    /* Hamburger wird beim Öffnen zum Kreuz */
    .hamburger {
        cursor: pointer;
        padding: 6px;
        margin: -6px;
    }

    .hamburger span {
        transition: transform 0.25s ease, opacity 0.2s ease;
    }

    .hamburger.offen span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .hamburger.offen span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.offen span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .hamburger:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 3px;
    }

    .hero-content h1 {
        font-size: 2.5rem;
    }

    .section-header h2 {
        font-size: 2.5rem;
    }

    .contact-header h2 {
        font-size: 2.5rem;
    }

    .about-container h2 {
        font-size: 2.5rem;
    }

    .services-container {
        grid-template-columns: 1fr;
    }

    .stats {
        grid-template-columns: 1fr;
    }

    .about-features {
        grid-template-columns: 1fr;
    }

    .configurator-content {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .result-grid {
        grid-template-columns: 1fr;
    }
}


/* ============ Klimaanlagen-Konfigurator ============ */

/* --- Sticky Summenleiste --- */
.kfg-bar {
    position: fixed;
    top: 73px;
    left: 0;
    right: 0;
    z-index: 900;
    background: rgba(52, 55, 61, 0.97);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
}

.kfg-bar-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0.9rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.kfg-bar-links {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.kfg-bar-titel {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.kfg-bar-preis {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-light);
    line-height: 1.2;
}

.kfg-bar-sub {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.kfg-bar-cta {
    padding: 12px 28px;
    font-size: 0.9rem;
    white-space: nowrap;
}

/* --- Grundlayout --- */
.konfigurator {
    padding: 12rem 2rem 8rem;
}

.kfg-wrapper {
    max-width: 1400px;
    margin: 0 auto;
}

.kfg-header {
    text-align: center;
    margin-bottom: 4rem;
}

.kfg-header h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    letter-spacing: -0.5px;
}

.kfg-header p {
    font-size: 1.1rem;
    color: var(--text-muted);
    max-width: 720px;
    margin: 0 auto;
}

.kfg-layout {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 3rem;
    align-items: start;
}

.kfg-visual-inner {
    position: sticky;
    top: 190px;
}

.kfg-visual-inner > h3 {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.visual-raum {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.2rem;
    background: var(--dark-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 0.8rem;
}

.visual-raum-icon {
    font-size: 1.5rem;
}

.visual-raum-info {
    display: flex;
    flex-direction: column;
}

.visual-raum-info strong {
    font-size: 0.95rem;
}

.visual-raum-info span {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* --- Schritte --- */
.kfg-step {
    margin-bottom: 3.5rem;
}

.kfg-step-head {
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.kfg-step-nr {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
}

.kfg-step-head h2 {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.kfg-step-head p {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* --- Karten --- */
.kfg-card {
    background: var(--dark-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 1.5rem;
}

.kfg-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.kfg-card-head h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.raum-titel-name {
    color: var(--text-muted);
    font-weight: 400;
}

.kfg-card-sub {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.kfg-card-head-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.kfg-card-preis {
    font-size: 1.2rem;
    font-weight: 700;
    white-space: nowrap;
}

.raum-entfernen {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.raum-entfernen:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* --- Formularfelder --- */
.kfg-felder {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.kfg-feld {
    margin-bottom: 1.5rem;
}

.kfg-felder .kfg-feld {
    margin-bottom: 0;
}

.kfg-feld label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.6rem;
}

.kfg-feld label strong {
    color: var(--text-light);
}

.kfg-feld input[type="text"],
.kfg-feld input[type="number"],
.kfg-feld select {
    width: 100%;
    padding: 12px 16px;
    background: var(--dark-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-light);
    font-family: inherit;
    font-size: 0.95rem;
}

.kfg-feld input:focus,
.kfg-feld select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

.kfg-feld input[type="range"] {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--dark-bg);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    outline: none;
}

.kfg-feld input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
    border: none;
}

.kfg-feld input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
    border: none;
}

/* --- Serien-Auswahl --- */
.serie-auswahl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.8rem;
}

.serie-chip {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.9rem 1rem;
    background: var(--dark-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
    font-family: inherit;
}

.serie-chip:hover {
    border-color: var(--text-muted);
}

.serie-chip.aktiv {
    border-color: var(--primary);
    background: var(--primary-soft);
}

.serie-chip-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-light);
}

.serie-chip-claim {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* --- Gerätezeile --- */
.geraet-zeile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 1.4rem;
    background: var(--dark-bg);
    border: 1px solid var(--primary);
    border-radius: 10px;
}

.geraet-modell {
    font-weight: 600;
    font-size: 0.95rem;
}

.geraet-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}

.geraet-preis {
    font-weight: 700;
    white-space: nowrap;
}

/* --- Zubehör / Montage Zeilen --- */
.zubehoer-zeile,
.montage-zeile {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.3rem;
    background: var(--dark-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.zubehoer-zeile:last-child,
.montage-zeile:last-child {
    margin-bottom: 0;
}

.zubehoer-zeile:hover,
.montage-zeile:hover {
    border-color: var(--text-muted);
}

.zubehoer-zeile.aktiv,
.montage-zeile.aktiv {
    border-color: var(--primary);
    background: var(--primary-softer);
}

.zubehoer-zeile input,
.montage-zeile input {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    flex-shrink: 0;
    cursor: pointer;
}

.zubehoer-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1;
}

.zubehoer-label {
    font-size: 0.95rem;
    font-weight: 600;
}

.zubehoer-label em {
    color: var(--text-muted);
    font-style: normal;
    font-weight: 400;
}

.zubehoer-sub {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.zubehoer-preis {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-light);
    white-space: nowrap;
}

/* --- Technische Daten Tabelle --- */
.tech-tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.tech-tabelle th {
    text-align: left;
    padding: 0.8rem 0.6rem;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color);
}

.tech-tabelle td {
    padding: 0.9rem 0.6rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-muted);
}

.tech-tabelle tbody tr:last-child td {
    border-bottom: none;
}

.tech-tabelle td:nth-child(2) {
    color: var(--text-light);
    font-weight: 500;
}

.ta-right {
    text-align: right;
}

/* --- Summe --- */
.summe-card {
    margin-top: 1.5rem;
    margin-bottom: 0;
}

.summe-card h3 {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.summe-zeile {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0;
    font-size: 0.9rem;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
}

.summe-zeile span:last-child {
    color: var(--text-light);
    font-weight: 500;
    white-space: nowrap;
}

.summe-gesamt {
    border-bottom: none;
    border-top: 2px solid var(--border-color);
    margin-top: 0.5rem;
    padding-top: 1.2rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-light);
}

.summe-gesamt span:last-child {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary-text);
}

.summe-note {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 1.2rem 0 1.5rem;
    line-height: 1.6;
}

.summe-card .cta-button {
    display: block;
    text-align: center;
    padding: 14px 20px;
    font-size: 0.9rem;
}

/* --- Hinweise --- */
.kfg-hinweis,
.kfg-warnung {
    margin-top: 1.2rem;
    padding: 1rem 1.2rem;
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-muted);
}

.kfg-hinweis {
    background: var(--primary-softer);
    border-left: 3px solid var(--primary);
}

.kfg-warnung {
    background: rgba(240, 128, 60, 0.12);
    border-left: 3px solid var(--accent);
}

.kfg-add-btn {
    width: 100%;
    padding: 1.1rem;
    background: transparent;
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    color: var(--primary-text);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.kfg-add-btn:hover {
    border-color: var(--primary);
    background: var(--primary-softer);
}

.configurator-disclaimer {
    margin-top: 4rem;
    padding: 1.5rem;
    background: var(--dark-secondary);
    border-left: 4px solid var(--primary);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.7;
}

/* --- Responsive --- */
@media (max-width: 1100px) {
    .kfg-layout {
        grid-template-columns: 1fr;
    }

    .kfg-visual-inner {
        position: static;
    }
}

@media (max-width: 768px) {
    .konfigurator {
        padding: 13rem 1.2rem 5rem;
    }

    .kfg-header h1 {
        font-size: 2.2rem;
    }

    .kfg-bar-inner {
        padding: 0.8rem 1.2rem;
        gap: 1rem;
    }

    .kfg-bar-preis {
        font-size: 1.2rem;
    }

    .kfg-bar-sub {
        display: none;
    }

    .kfg-bar-cta {
        padding: 10px 18px;
        font-size: 0.8rem;
    }

    .kfg-card {
        padding: 1.3rem;
    }

    .kfg-felder {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }

    .serie-auswahl {
        grid-template-columns: 1fr 1fr;
    }

    .tech-tabelle {
        font-size: 0.78rem;
    }

    .tech-tabelle th,
    .tech-tabelle td {
        padding: 0.6rem 0.3rem;
    }
}

.montage-staffel {
    display: block;
    font-size: 0.75rem;
    color: var(--primary-text);
    margin-top: 0.4rem;
}

.summe-brutto {
    border-bottom: none;
    padding-top: 0.4rem;
    font-size: 0.85rem;
}

.summe-brutto span:last-child {
    font-weight: 600;
}

/* --- Abschluss / Anfrage --- */
.abschluss-card {
    border-color: var(--primary);
}

.abschluss-summe {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.abschluss-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.3rem;
}

.abschluss-detail {
    display: block;
    font-size: 0.95rem;
    color: var(--text-light);
}

.abschluss-preis {
    text-align: right;
}

.abschluss-preis > span:first-child {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-text);
    line-height: 1.2;
}

.abschluss-brutto {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.anfrage-form textarea {
    width: 100%;
    padding: 12px 16px;
    background: var(--dark-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-light);
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
}

.anfrage-form textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

.abschluss-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 18px 20px;
    font-size: 1.05rem;
    cursor: pointer;
    margin-top: 0.5rem;
}

.abschluss-note {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-top: 1rem;
    text-align: center;
}

@media (max-width: 768px) {
    .abschluss-summe {
        flex-direction: column;
        align-items: flex-start;
    }

    .abschluss-preis {
        text-align: left;
    }
}

/* ============ Begrüßung ============ */
.willkommen {
    padding: 6rem 2rem 2rem;
    background: var(--dark-bg);
}

.willkommen-inner {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
}

.willkommen-inner h2 {
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    letter-spacing: -0.5px;
}

.willkommen-inner p {
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.9;
}

.willkommen-signatur {
    margin-top: 1.5rem;
    color: var(--primary-text) !important;
    font-weight: 600;
}

/* ============ Qualifikationen ============ */
.qualifikationen {
    margin-top: 3rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.quali-block {
    background: var(--dark-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem;
}

.quali-block h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-text);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.2rem;
}

.quali-block ul {
    list-style: none;
}

.quali-block li {
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.6;
    padding-left: 1.4rem;
    margin-bottom: 0.9rem;
    position: relative;
}

.quali-block li:last-child {
    margin-bottom: 0;
}

.quali-block li::before {
    content: "▸";
    position: absolute;
    left: 0;
    color: var(--primary-text);
}

.quali-block li span {
    color: var(--text-muted);
    opacity: 0.75;
    font-size: 0.85rem;
}

@media (max-width: 768px) {
    .willkommen {
        padding: 4rem 1.5rem 1rem;
    }

    .willkommen-inner h2 {
        font-size: 1.8rem;
    }

    .qualifikationen {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }

    .quali-block {
        padding: 1.5rem;
    }
}

/* ============ Zusatzleistung 3D-Druck ============ */
.extra-leistung {
    padding: 7rem 2rem;
    background: var(--dark-bg);
    border-bottom: 1px solid var(--border-color);
}

.extra-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: center;
}

.extra-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--primary-text);
    border: 1px solid var(--primary);
    border-radius: 20px;
    padding: 5px 14px;
    margin-bottom: 1.2rem;
}

.extra-text h2 {
    font-size: 2.6rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    letter-spacing: -0.5px;
}

.extra-text p {
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.85;
    margin-bottom: 1.2rem;
}

.extra-text strong {
    color: var(--text-light);
}

.extra-text .cta-button {
    margin-top: 1rem;
}

.extra-visual {
    background: var(--dark-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2.5rem;
    text-align: center;
}

.extra-icon {
    font-size: 4rem;
    margin-bottom: 1.5rem;
}

.extra-liste {
    list-style: none;
    text-align: left;
}

.extra-liste li {
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.6;
    padding-left: 1.6rem;
    margin-bottom: 1rem;
    position: relative;
}

.extra-liste li:last-child {
    margin-bottom: 0;
}

.extra-liste li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--primary-text);
    font-weight: 700;
}

@media (max-width: 900px) {
    .extra-inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

@media (max-width: 768px) {
    .extra-leistung {
        padding: 4rem 1.5rem;
    }

    .extra-text h2 {
        font-size: 2rem;
    }

    .extra-visual {
        padding: 1.8rem;
    }
}

/* ============ Anfrageformular mit Upload ============ */
.anfrage-section {
    padding: 11rem 2rem 7rem;
}

.anfrage-wrapper {
    max-width: 820px;
    margin: 0 auto;
}

.anfrage-header {
    margin-bottom: 3rem;
}

.anfrage-header h1 {
    font-size: 3rem;
    font-weight: 700;
    margin: 0.5rem 0 1rem;
    letter-spacing: -0.5px;
}

.anfrage-header p {
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.85;
}

.form-block {
    background: var(--dark-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 1.5rem;
}

/* Abschnittsüberschriften als nummerierte Schritte – die kleine
   rote Versalienzeile war im Formular kaum zu sehen. */
.anfrage-formular {
    counter-reset: schritt;
}

.form-block legend {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--text-light);
    padding: 0;
    margin-bottom: 0.4rem;
}

.form-block legend::before {
    counter-increment: schritt;
    content: counter(schritt);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    background: var(--primary);
    color: #ffffff;
    border-radius: 50%;
    font-size: 0.95rem;
    font-weight: 700;
}

.form-block legend + * {
    margin-top: 1.4rem;
}

.form-block legend::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}

.form-feld {
    margin-bottom: 1.5rem;
}

.form-grid .form-feld {
    margin-bottom: 0;
}

.form-feld:last-child {
    margin-bottom: 0;
}

.form-feld label {
    display: block;
    font-size: 0.88rem;
    color: var(--text-muted);
    margin-bottom: 0.6rem;
}

.pflicht {
    color: var(--primary-text);
}

.form-feld input,
.form-feld textarea {
    width: 100%;
    padding: 13px 16px;
    background: var(--dark-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-light);
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
}

.form-feld input:focus,
.form-feld textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

.form-hinweis {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-top: 1.2rem;
}

.form-hinweis.zentriert {
    text-align: center;
    margin-top: 1rem;
}

/* Spam-Falle */
.spam-falle {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Upload-Fläche */
.upload-feld {
    position: relative;
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    padding: 2.5rem 1.5rem;
    text-align: center;
    transition: all 0.25s ease;
    cursor: pointer;
}

.upload-feld:hover,
.upload-feld.aktiv {
    border-color: var(--primary);
    background: var(--primary-softer);
}

.upload-feld input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.upload-text {
    pointer-events: none;
}

.upload-icon {
    display: block;
    font-size: 2.2rem;
    margin-bottom: 0.8rem;
}

.upload-text strong {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.upload-sub {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Dateiliste */
.datei-liste {
    list-style: none;
    margin-top: 1.2rem;
}

.datei-zeile {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 1rem;
    background: var(--dark-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 0.6rem;
}

.datei-name {
    flex: 1;
    font-size: 0.88rem;
    word-break: break-all;
}

.datei-groesse {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.datei-weg {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.75rem;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.datei-weg:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.datei-summe {
    font-size: 0.8rem;
    color: var(--text-muted);
    padding-top: 0.4rem;
}

.upload-meldung {
    display: none;
    margin-top: 1rem;
    padding: 0.9rem 1.1rem;
    background: rgba(240, 128, 60, 0.12);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* Zustimmung */
.checkbox-zeile {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.7;
    cursor: pointer;
}

.checkbox-zeile input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--primary);
    flex-shrink: 0;
    cursor: pointer;
}

.checkbox-zeile a {
    color: var(--primary-text);
}

.absenden-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 18px 20px;
    font-size: 1.05rem;
    cursor: pointer;
}

.absenden-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Danke-/Fehlerseite */
.danke-section {
    padding: 13rem 2rem 8rem;
    min-height: 70vh;
}

.danke-box {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
    background: var(--dark-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 3.5rem 2.5rem;
}

.danke-icon {
    font-size: 3.5rem;
    line-height: 1;
    margin-bottom: 1.5rem;
}

.danke-box h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1.2rem;
}

.danke-box p {
    color: var(--text-muted);
    line-height: 1.85;
    margin-bottom: 2rem;
}

@media (max-width: 768px) {
    .anfrage-section {
        padding: 8rem 1.2rem 4rem;
    }

    .anfrage-header h1 {
        font-size: 2.1rem;
    }

    .form-block {
        padding: 1.4rem;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .danke-section {
        padding: 9rem 1.2rem 5rem;
    }

    .danke-box {
        padding: 2.2rem 1.5rem;
    }
}

/* Abgesetzter Hinweis auf die Zusatzleistung 3D-Druck */
/* Längeres Logo auf kleinen Bildschirmen verkleinern */
@media (max-width: 900px) {
    .logo {
        font-size: 1.15rem;
        letter-spacing: 1px;
    }
}

@media (max-width: 480px) {
    .logo {
        font-size: 0.95rem;
        letter-spacing: 0.5px;
    }
}

/* Hero-Kacheln als Links */
a.visual-element {
    text-decoration: none;
    color: inherit;
}

a.visual-element:hover h3 {
    color: var(--primary-text);
}

.visual-element em {
    display: block;
    font-style: normal;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
    line-height: 1.45;
}

/* ============ Klimaanlagen-Galerie ============ */
.galerie-section {
    padding: 11rem 2rem 5rem;
}

.galerie-wrapper {
    max-width: 1400px;
    margin: 0 auto;
}

.galerie-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 3.5rem;
}

.galerie-header h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    letter-spacing: -0.5px;
}

.galerie-header p {
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.85;
}

.galerie-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.2rem;
}

.galerie-bild {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    aspect-ratio: 4 / 3;
    background: var(--dark-secondary);
    transition: border-color 0.25s ease, transform 0.25s ease;
}

.galerie-bild.gross {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: auto;
    min-height: 340px;
}

.galerie-bild:hover,
.galerie-bild:focus-visible {
    border-color: var(--primary);
    transform: translateY(-4px);
    outline: none;
}

.galerie-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.galerie-bild:hover img {
    transform: scale(1.04);
}

.galerie-bild figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.6rem 1.1rem 0.9rem;
    background: linear-gradient(to top, rgba(20, 22, 25, 0.92), transparent);
    color: var(--text-light);
    font-size: 0.85rem;
    font-weight: 500;
}

/* Serienübersicht */
.serien-block {
    margin-top: 5rem;
}

.serien-block h2 {
    font-size: 2.4rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.8rem;
    letter-spacing: -0.5px;
}

.serien-intro {
    text-align: center;
    color: var(--text-muted);
    max-width: 640px;
    margin: 0 auto 3rem;
    line-height: 1.8;
}

.serien-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 2rem;
}

.serie-karte {
    background: var(--dark-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem;
    transition: all 0.3s ease;
}

.serie-karte:hover {
    border-color: var(--primary);
    transform: translateY(-6px);
}

.serie-bild {
    background: var(--dark-bg);
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
}

.serie-bild img {
    max-width: 100%;
    height: auto;
    display: block;
}

.serie-karte h3 {
    font-size: 1.35rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.serie-claim {
    color: var(--primary-text) !important;
    font-size: 0.85rem !important;
    font-weight: 600;
    margin-bottom: 1rem !important;
}

.serie-karte p {
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.75;
    margin-bottom: 1.5rem;
}

.farben {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.farbe {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    display: inline-block;
    flex-shrink: 0;
}

.farb-text {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-left: 0.3rem;
}

.galerie-cta {
    text-align: center;
    margin-top: 4rem;
}

/* ============ Lightbox ============ */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(15, 16, 18, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
}

.lightbox[hidden] {
    display: none;
}

.lightbox-inhalt {
    max-width: 1100px;
    max-height: 100%;
    text-align: center;
}

.lightbox-inhalt img {
    max-width: 100%;
    max-height: 78vh;
    border-radius: 8px;
    display: block;
    margin: 0 auto;
}

.lightbox-inhalt figcaption {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 1.2rem;
}

.lightbox-zu {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--dark-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-light);
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lightbox-zu:hover {
    border-color: var(--primary);
    color: var(--primary-text);
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--dark-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-light);
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lightbox-nav:hover {
    border-color: var(--primary);
    color: var(--primary-text);
}

.lightbox-zurueck { left: 1.5rem; }
.lightbox-weiter  { right: 1.5rem; }

@media (max-width: 900px) {
    .galerie-bild.gross {
        grid-column: span 1;
        grid-row: span 1;
        aspect-ratio: 4 / 3;
        min-height: 0;
    }
}

@media (max-width: 768px) {
    .galerie-section {
        padding: 8rem 1.2rem 3rem;
    }

    .galerie-header h1 {
        font-size: 2.2rem;
    }

    .galerie-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.7rem;
    }

    .galerie-bild figcaption {
        font-size: 0.72rem;
        padding: 1.2rem 0.7rem 0.6rem;
    }

    .serien-block h2 {
        font-size: 1.8rem;
    }

    .lightbox {
        padding: 1rem;
    }

    .lightbox-nav {
        width: 42px;
        height: 42px;
        font-size: 1.4rem;
    }

    .lightbox-zurueck { left: 0.5rem; }
    .lightbox-weiter  { right: 0.5rem; }
}

/* Serienkarten – Detaildaten */
.serie-karte {
    position: relative;
    display: flex;
    flex-direction: column;
}

.serie-karte.hervorgehoben {
    border-color: var(--primary);
}

.serie-badge {
    position: absolute;
    top: -11px;
    right: 1.5rem;
    background: var(--primary);
    color: var(--text-light);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 20px;
}

.serie-daten {
    list-style: none;
    margin-bottom: 1.5rem;
}

.serie-daten li {
    color: var(--text-muted);
    font-size: 0.86rem;
    line-height: 1.55;
    padding-left: 1.3rem;
    margin-bottom: 0.65rem;
    position: relative;
}

.serie-daten li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--primary-text);
    font-weight: 700;
}

.serie-daten strong {
    color: var(--text-light);
    font-weight: 600;
}

.serie-karte .farben {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

/* ============ Technik-Block ============ */
.technik-block {
    margin-top: 5.5rem;
    padding-top: 4rem;
    border-top: 1px solid var(--border-color);
}

.technik-block h2 {
    font-size: 2.4rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.8rem;
    letter-spacing: -0.5px;
}

.technik-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.technik-karte {
    background: var(--dark-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem;
    transition: border-color 0.3s ease;
}

.technik-karte:hover {
    border-color: var(--primary);
}

.technik-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.technik-karte h3 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 0.9rem;
}

.technik-karte p {
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.8;
}

.technik-quelle {
    margin-top: 2.5rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.7;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    .technik-block {
        margin-top: 3.5rem;
        padding-top: 2.5rem;
    }

    .technik-block h2 {
        font-size: 1.8rem;
    }

    .technik-karte {
        padding: 1.5rem;
    }
}

/* ============ Außengeräte ============ */
.aussen-block {
    margin-top: 5rem;
    padding-top: 4rem;
    border-top: 1px solid var(--border-color);
}

.aussen-block h2 {
    font-size: 2.4rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.8rem;
    letter-spacing: -0.5px;
}

@media (min-width: 1180px) {
    /* Sechs Karten sollen 3 + 3 stehen, nicht 4 + 2 */
    .aussen-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Die Karten übernehmen das Aussehen der Innengeräte-Karten,
   brauchen aber einen etwas höheren Bildkasten. */
.serie-karte[data-aussen] {
    cursor: pointer;
}

.serie-karte[data-aussen]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

.serie-karte[data-aussen]:hover .karte-mehr {
    transform: translateX(3px);
}

.aussen-karte .serie-bild {
    min-height: 200px;
}

.aussen-karte .serie-bild img {
    max-height: 190px;
    width: auto;
}

.aussen-karte .serie-daten {
    margin-top: auto;
}

.serie-badge.badge-multi {
    background: var(--dunkel);
    border: 1px solid var(--dunkel-rand);
}

/* Aufstellung */
.aufstellung {
    margin-top: 2.5rem;
    background: var(--dark-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2.2rem;
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 2.5rem;
    align-items: start;
}

.aufstellung-bild {
    background: var(--dark-secondary);
    border-radius: 10px;
    padding: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aufstellung-bild img {
    max-width: 100%;
    height: auto;
    display: block;
}

.aufstellung-text h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
}

.aufstellung-text > p {
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.8;
    margin-bottom: 1.2rem;
}

.aufstellung-text ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.9rem 2rem;
}

.aufstellung-text ul li {
    position: relative;
    padding-left: 1.1rem;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.7;
}

.aufstellung-text ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
}

.aufstellung-text ul li strong {
    color: var(--text-light);
    font-weight: 600;
}

.aufstellung-note {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.7;
    padding-left: 0.9rem;
    border-left: 2px solid var(--border-color);
    margin: 0;
}

/* ============ Partner und Herkunft ============ */
.partner-block {
    margin-top: 5rem;
    padding-top: 4rem;
    border-top: 1px solid var(--border-color);
}

.partner-block h2 {
    font-size: 2.4rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.8rem;
    letter-spacing: -0.5px;
}

.partner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}

.partner-karte {
    background: var(--dark-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    transition: border-color 0.3s ease;
}

.partner-karte:hover {
    border-color: var(--primary);
}

.partner-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--primary-text);
    margin-bottom: 0.5rem;
}

.partner-karte h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
    word-break: break-word;
}

.partner-karte p {
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.8;
    margin-bottom: 1.4rem;
}

.partner-link {
    align-self: flex-start;
    margin-top: auto;
    color: var(--primary-text);
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    border-bottom: 1px solid var(--primary-glow);
    padding-bottom: 2px;
    transition: border-color 0.25s ease, color 0.25s ease;
}

.partner-link:hover,
.partner-link:focus-visible {
    color: var(--primary-hover);
    border-bottom-color: var(--primary);
}

.partner-link.zweit {
    margin-top: 0.7rem;
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--text-muted);
    border-bottom-color: var(--border-color);
}

.partner-link.zweit:hover,
.partner-link.zweit:focus-visible {
    color: var(--primary-text);
}

.partner-note {
    margin: 2.5rem auto 0;
    max-width: 700px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.7;
}

@media (max-width: 900px) {
    .aufstellung {
        grid-template-columns: 1fr;
        gap: 1.6rem;
    }

    .aufstellung-bild {
        max-width: 260px;
    }
}

@media (max-width: 768px) {
    .aussen-block,
    .partner-block {
        margin-top: 3.5rem;
        padding-top: 2.5rem;
    }

    .aussen-block h2,
    .partner-block h2 {
        font-size: 1.8rem;
    }

    .aufstellung {
        padding: 1.5rem;
    }

    .partner-karte {
        padding: 1.5rem;
    }
}

/* ============================================================
   Mitsubishi-Electric-Bereich – Farbwelt nach M-Serie-Prospekt
   Weiß, Sandbeige, ME-Rot, Anthrazit
   ============================================================ */
.me-band {
    background: #232220;
    border-bottom: 4px solid #E7000E;
    padding: 1.6rem 2rem;
    margin-top: 73px;
}

.me-band-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 2.5rem;
    flex-wrap: wrap;
}

.me-logo {
    height: 46px;
    width: auto;
    display: block;
    flex-shrink: 0;
}

.me-band-text {
    display: flex;
    flex-direction: column;
    padding-left: 2.5rem;
    border-left: 1px solid rgba(255, 255, 255, 0.22);
}

.me-band-text strong {
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.me-band-text span {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.88rem;
}

/* Farbvariablen im ME-Bereich überschreiben */
.me-theme {
    --dark-bg: #F3F0EA;
    --dark-secondary: #FFFFFF;
    --primary: #E7000E;
    --primary-text: #B8000B;
    --primary-hover: #C1000C;
    --text-light: #232220;
    --text-muted: #6e6a63;
    --border-color: #d9d3c7;
    --accent: #b8590f;
    --primary-glow: rgba(231, 0, 14, 0.14);
    --primary-soft: rgba(231, 0, 14, 0.07);
    --primary-softer: rgba(231, 0, 14, 0.045);

    background: #E8E1D6;
    color: #232220;
}

.me-theme.kfg-bar {
    background: rgba(255, 255, 255, 0.97);
    border-bottom: 1px solid #d9d3c7;
    margin-top: 0;
}

.me-theme.galerie-section {
    padding-top: 4.5rem;
}

.me-theme.konfigurator {
    background: #F3F0EA;
    border-top: 1px solid #d9d3c7;
}

/* Buttons im ME-Bereich: weiße Schrift auf ME-Rot */
.me-theme .cta-button {
    color: #ffffff;
}

.me-theme .cta-button:hover {
    background: transparent;
    color: #B8000B;
}

/* Galeriebilder auf hellem Grund */
.me-theme .galerie-bild {
    background: #ffffff;
}

/* Serienbild-Fläche hell halten */
.me-theme .serie-bild {
    background: #F3F0EA;
}

/* Eingabefelder */
.me-theme input,
.me-theme select,
.me-theme textarea {
    background: #ffffff !important;
    color: #232220 !important;
}

.me-theme input[type="range"] {
    background: #e5e0d6 !important;
}

.me-theme .serie-chip,
.me-theme .geraet-zeile,
.me-theme .zubehoer-zeile,
.me-theme .montage-zeile,
.me-theme .quali-block {
    background: #ffffff;
}

.me-theme .serie-chip.aktiv,
.me-theme .zubehoer-zeile.aktiv,
.me-theme .montage-zeile.aktiv {
    background: rgba(231, 0, 14, 0.05);
}

.me-theme .kfg-step-nr {
    background: #E7000E;
    color: #ffffff;
}

.me-theme .visual-raum,
.me-theme .kfg-card,
.me-theme .technik-karte,
.me-theme .serie-karte {
    background: #ffffff;
}

.me-theme .configurator-disclaimer {
    background: #ffffff;
    border-left-color: #E7000E;
}

.me-theme .lightbox {
    background: rgba(35, 34, 32, 0.96);
}

.me-theme .summe-gesamt span:last-child,
.me-theme .abschluss-preis > span:first-child {
    color: #E7000E;
}

/* ============ Vergleichstabelle ============ */
.vergleich-block {
    margin-top: 5rem;
    padding-top: 4rem;
    border-top: 1px solid var(--border-color);
}

.vergleich-block h2 {
    font-size: 2.4rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.8rem;
    letter-spacing: -0.5px;
}

.vergleich-scroll {
    overflow-x: auto;
    margin-top: 2.5rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.vergleich-tabelle {
    width: 100%;
    border-collapse: collapse;
    background: var(--dark-secondary);
    font-size: 0.9rem;
    min-width: 640px;
}

.vergleich-tabelle th,
.vergleich-tabelle td {
    padding: 1rem 1.2rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.vergleich-tabelle thead th {
    background: var(--dark-bg);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-light);
    border-bottom: 2px solid var(--primary);
}

.vergleich-tabelle thead th:first-child {
    font-weight: 500;
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.vergleich-tabelle tbody th {
    font-weight: 500;
    color: var(--text-muted);
    font-size: 0.85rem;
    width: 30%;
}

.vergleich-tabelle td {
    color: var(--text-light);
}

.vergleich-tabelle tbody tr:last-child th,
.vergleich-tabelle tbody tr:last-child td {
    border-bottom: none;
}

.vergleich-tabelle .ja   { color: var(--primary-text); font-weight: 600; }
.vergleich-tabelle .nein { color: var(--text-muted); }

@media (max-width: 768px) {
    .me-band {
        padding: 1.2rem 1.2rem;
        margin-top: 66px;
    }

    .me-band-inner {
        gap: 1rem;
    }

    .me-logo {
        height: 34px;
    }

    .me-band-text {
        padding-left: 0;
        border-left: none;
    }

    .me-band-text strong {
        font-size: 1.05rem;
    }

    .me-band-text span {
        font-size: 0.8rem;
    }

    .vergleich-block h2 {
        font-size: 1.8rem;
    }
}

/* ============================================================
   Helle Grundoptik – Korrekturen
   Navigation und Footer bleiben als dunkler Rahmen bestehen
   ============================================================ */
.navbar {
    border-bottom: 1px solid var(--dunkel-rand);
}

.navbar .logo {
    color: #ffffff;
}

.nav-menu a {
    color: rgba(255, 255, 255, 0.72);
}

.nav-menu a:hover {
    color: #ffffff;
}

.hamburger span {
    background: #ffffff;
}

.footer {
    background: var(--dunkel);
    border-top: none;
}

.footer-content {
    border-bottom-color: var(--dunkel-rand);
}

.footer-section h4 {
    color: #ffffff;
}

.footer-section p,
.footer-section a,
.footer-bottom {
    color: rgba(255, 255, 255, 0.65);
}

.footer-section a:hover {
    color: #ffffff;
}

/* Buttons: weiße Schrift auf rotem Grund */
.cta-button,
.submit-button,
.absenden-btn {
    color: #ffffff;
}

.cta-button:hover,
.submit-button:hover {
    background: transparent;
    color: var(--primary-text);
}

/* Wechselflächen in Sandbeige für ruhigen Rhythmus */
.willkommen,
.extra-leistung {
    background: var(--sand);
}

.hero {
    background: transparent;
}

/* Kartenflächen auf beigem Grund weiß absetzen */
.quali-block,
.extra-visual {
    background: #ffffff;
}

/* Lightbox bleibt dunkel */
.lightbox {
    background: rgba(35, 34, 32, 0.96);
}

.lightbox-inhalt figcaption {
    color: rgba(255, 255, 255, 0.75);
}

.lightbox-zu,
.lightbox-nav {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.lightbox-zu:hover,
.lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: #ffffff;
    color: #ffffff;
}

/* Bildunterschriften in der Galerie */
.galerie-bild figcaption {
    color: #ffffff;
}

/* ============ Portrait im Bereich "Wer bin ich" ============ */
.portrait-zeile {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.portrait {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--dark-secondary);
    box-shadow: 0 8px 30px rgba(35, 34, 32, 0.14);
    flex-shrink: 0;
}

.portrait-text {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.portrait-text strong {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.3px;
}

.portrait-text span {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.portrait-text span:first-of-type {
    color: var(--primary-text);
    font-weight: 600;
}

@media (max-width: 600px) {
    .portrait-zeile {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.3rem;
    }

    .portrait {
        width: 140px;
        height: 140px;
    }

    .portrait-text strong {
        font-size: 1.3rem;
    }
}

/* Weiße Schrift auf allen roten Flächen sicherstellen */
.kfg-step-nr,
.serie-badge,
.product-card .badge,
.extra-label.gefuellt {
    color: #ffffff;
}

.serie-badge.badge-aktion {
    background: var(--primary);
}

.serie-karte.aktion {
    border-color: var(--primary);
}

/* Fußnoten der Vergleichstabelle */
.fn {
    display: inline-block;
    font-size: 0.68em;
    font-weight: 700;
    color: var(--primary-text);
    vertical-align: super;
    margin-left: 1px;
}

.vergleich-fussnoten {
    list-style: none;
    margin-top: 1.5rem;
    padding: 0;
}

.vergleich-fussnoten li {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 0.6rem;
    padding-left: 1.2rem;
    text-indent: -1.2rem;
}

.vergleich-tabelle td.ja {
    color: var(--primary-text);
    font-weight: 600;
}

/* ============================================================
   Konfigurator – Mobile-Optimierung
   Ohne Sticky-Leiste: Übersicht rutscht auf kleinen Schirmen
   hinter die Eingabeschritte, damit man zuerst konfiguriert.
   ============================================================ */
@media (max-width: 1100px) {
    .kfg-layout {
        display: flex;
        flex-direction: column;
    }

    .kfg-steps {
        order: 1;
    }

    .kfg-visual {
        order: 2;
    }

    .kfg-visual-inner > h3 {
        margin-top: 1rem;
    }
}

/* Ohne Summenleiste braucht der obere Bereich weniger Abstand */
.me-band {
    margin-top: 73px;
}

.me-theme.galerie-section {
    padding-top: 4rem;
}

.konfigurator {
    padding-top: 6rem;
}

@media (max-width: 768px) {
    .konfigurator {
        padding-top: 4rem;
    }
}

/* ============================================================
   Konfigurator – Kopfbereich mit Bild und Mitsubishi-Logo
   ============================================================ */
.konfigurator {
    padding-top: 0;
}

.kfg-hero {
    position: relative;
    background-image: url("../images/klima/konfigurator-bg.jpg");
    background-size: cover;
    background-position: center 40%;
    padding: 6rem 2rem;
    margin-bottom: 5rem;
    overflow: hidden;
}

.kfg-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(28, 27, 25, 0.88) 0%, rgba(28, 27, 25, 0.72) 45%, rgba(28, 27, 25, 0.35) 100%);
}

.kfg-hero-inner {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
}

.kfg-hero-logo {
    height: 42px;
    width: auto;
    display: block;
    margin-bottom: 2rem;
}

.kfg-hero h1,
.kfg-hero h2 {
    font-size: 3rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.5px;
    margin-bottom: 1.2rem;
    max-width: 700px;
}

.kfg-hero p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.08rem;
    line-height: 1.8;
    max-width: 620px;
}

/* Der Kopfbereich ersetzt die frühere Überschriftenzeile */
.kfg-wrapper > .kfg-header {
    display: none;
}

@media (max-width: 768px) {
    .kfg-hero {
        padding: 3.5rem 1.2rem;
        margin-bottom: 3rem;
        background-position: 65% center;
    }

    .kfg-hero::before {
        background: rgba(28, 27, 25, 0.82);
    }

    .kfg-hero-logo {
        height: 30px;
        margin-bottom: 1.4rem;
    }

    .kfg-hero h1,
.kfg-hero h2 {
        font-size: 1.9rem;
    }

    .kfg-hero p {
        font-size: 0.95rem;
    }
}

/* ============ Serien-Auswahl mit Produktbild ============ */
.serie-auswahl {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.9rem;
}

.serie-chip {
    padding: 1rem 0.9rem 0.9rem;
    align-items: stretch;
    gap: 0;
}

.serie-chip-bild {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 54px;
    margin-bottom: 0.8rem;
    padding: 0 0.3rem;
}

.serie-chip-bild img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.25s ease;
}

.serie-chip:hover .serie-chip-bild img {
    transform: scale(1.06);
}

.serie-chip-bild.leer::after {
    content: "❄";
    font-size: 1.6rem;
    color: var(--border-color);
}

.serie-chip.aktiv .serie-chip-bild.leer::after {
    color: var(--primary);
}

/* ============ Gewähltes Gerät mit Abbildung ============ */
.geraet-gewaehlt {
    align-items: center;
    gap: 1.4rem;
    padding: 1.4rem;
}

.geraet-bild {
    width: 130px;
    height: auto;
    max-height: 62px;
    object-fit: contain;
    flex-shrink: 0;
}

.geraet-info {
    flex: 1;
    min-width: 0;
}

.geraet-claim {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.35rem;
    line-height: 1.5;
}

@media (max-width: 600px) {
    .serie-auswahl {
        grid-template-columns: 1fr 1fr;
    }

    .serie-chip-bild {
        height: 44px;
    }

    .geraet-gewaehlt {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .geraet-bild {
        width: 100px;
        max-height: 48px;
    }

    .geraet-gewaehlt .geraet-preis {
        width: 100%;
        text-align: right;
    }
}

/* Stufenanzeige für die Luftreinigung */
.stufe {
    display: inline-flex;
    gap: 3px;
    vertical-align: middle;
    margin-right: 0.45rem;
}

.stufe i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: transparent;
    display: block;
}

.stufe i.an {
    background: var(--primary);
    border-color: var(--primary);
}

.vergleich-tabelle tr.zeile-fazit {
    background: var(--dark-bg);
}

.vergleich-tabelle tr.zeile-fazit th,
.vergleich-tabelle tr.zeile-fazit td {
    font-weight: 600;
    border-top: 1px solid var(--border-color);
}

.vergleich-tabelle tr.zeile-fazit td {
    font-size: 0.85rem;
    white-space: nowrap;
}

/* ============================================================
   Serienkarten anklickbar + Detailfenster
   ============================================================ */
.serie-karte[data-serie] {
    cursor: pointer;
}

.serie-karte[data-serie]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

.karte-mehr {
    display: block;
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary-text);
    transition: transform 0.2s ease;
}

.serie-karte[data-serie]:hover .karte-mehr {
    transform: translateX(3px);
}

/* --- Modal --- */
.serie-modal {
    position: fixed;
    inset: 0;
    z-index: 2100;
    background: rgba(35, 34, 32, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
}

.serie-modal[hidden] {
    display: none;
}

.serie-modal-box {
    position: relative;
    background: #ffffff;
    border-radius: 14px;
    width: 100%;
    max-width: 1000px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 70px rgba(20, 19, 18, 0.35);
    overflow: hidden;
}

.serie-modal-zu {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #F3F0EA;
    border: 1px solid #ddd7cb;
    color: #232220;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.serie-modal-zu:hover {
    background: #E7000E;
    border-color: #E7000E;
    color: #ffffff;
}

.serie-modal-inhalt {
    overflow-y: auto;
    padding: 2.5rem;
    color: #232220;
}

.modal-kopf {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid #E7000E;
    flex-wrap: wrap;
}

.modal-bild {
    width: 230px;
    height: auto;
    flex-shrink: 0;
    background: #F3F0EA;
    border-radius: 10px;
    padding: 1rem;
}

.modal-claim {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #B8000B;
    margin-bottom: 0.4rem;
}

.serie-modal-inhalt h2 {
    font-size: 1.9rem;
    font-weight: 700;
    margin-bottom: 0.9rem;
    letter-spacing: -0.4px;
}

.modal-kopf p {
    color: #6e6a63;
    font-size: 0.95rem;
    line-height: 1.75;
    margin-bottom: 1.2rem;
}

.modal-einsatz {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: #6e6a63;
}

.modal-einsatz strong {
    color: #232220;
}

.serie-modal-inhalt h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 2rem 0 1rem;
    padding-left: 0.7rem;
    border-left: 3px solid #E7000E;
}

.modal-tabelle-scroll {
    overflow-x: auto;
    border: 1px solid #e5e0d6;
    border-radius: 10px;
}

.modal-tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
    min-width: 620px;
}

.modal-tabelle th {
    background: #F3F0EA;
    text-align: left;
    padding: 0.7rem 0.8rem;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #6e6a63;
    white-space: nowrap;
    border-bottom: 1px solid #e5e0d6;
}

.modal-tabelle td {
    padding: 0.7rem 0.8rem;
    border-bottom: 1px solid #efeae1;
    white-space: nowrap;
}

.modal-tabelle tbody tr:last-child td {
    border-bottom: none;
}

.modal-tabelle tr.extra-zeile td {
    font-size: 0.76rem;
    color: #6e6a63;
    padding-top: 0;
    white-space: normal;
}

.mini-badge {
    display: inline-block;
    background: #E7000E;
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 10px;
    vertical-align: 1px;
}

.mini-badge.grau {
    background: #b4aea3;
}

.modal-hinweis {
    font-size: 0.83rem;
    color: #6e6a63;
    line-height: 1.7;
    margin-top: 0.9rem;
    padding-left: 0.9rem;
    border-left: 2px solid #e5e0d6;
}

/* Außengerät im Detailfenster */
.modal-aussen-zeile {
    display: flex;
    gap: 1.6rem;
    align-items: flex-start;
}

.modal-aussen-daten {
    flex: 1;
    min-width: 0;
}

.modal-aussen-bild {
    width: 190px;
    flex-shrink: 0;
    margin: 0;
}

.modal-aussen-bild img {
    width: 100%;
    height: auto;
    display: block;
    background: #F3F0EA;
    border-radius: 10px;
    padding: 0.9rem;
    box-sizing: border-box;
}

.modal-aussen-bild figcaption {
    font-size: 0.76rem;
    color: #6e6a63;
    line-height: 1.6;
    margin-top: 0.6rem;
}

@media (max-width: 700px) {
    .modal-aussen-zeile {
        flex-direction: column;
        gap: 1rem;
    }

    .modal-aussen-bild {
        width: 100%;
        max-width: 240px;
    }
}

.modal-liste {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.6rem 1.5rem;
}

.modal-liste li {
    font-size: 0.88rem;
    color: #454239;
    line-height: 1.6;
    padding-left: 1.4rem;
    position: relative;
}

.modal-liste li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #E7000E;
    font-weight: 700;
}

/* Zusätzliche Abbildung im Detailfenster */
.modal-zusatz {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin: 1rem 0 0;
    padding: 1rem 1.2rem;
    background: #F3F0EA;
    border-radius: 10px;
}

.modal-zusatz img {
    width: 110px;
    height: auto;
    flex-shrink: 0;
    display: block;
}

.modal-zusatz figcaption {
    font-size: 0.84rem;
    color: #6e6a63;
    line-height: 1.7;
}

@media (max-width: 560px) {
    .modal-zusatz {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Längere Fließtext-Hinweise: eine Spalte, Punkt statt Häkchen */
.modal-liste.breit {
    grid-template-columns: 1fr;
    gap: 0.7rem;
}

.modal-liste.breit li::before {
    content: "•";
    font-size: 1.2em;
    line-height: 1;
}

.modal-text {
    font-size: 0.9rem;
    color: #6e6a63;
    line-height: 1.8;
}

.modal-fuss {
    margin-top: 2.5rem;
    padding-top: 1.8rem;
    border-top: 1px solid #e5e0d6;
    text-align: center;
}

.modal-fuss .cta-button {
    background: #E7000E;
    border-color: #E7000E;
    color: #ffffff;
    cursor: pointer;
}

.modal-fuss .cta-button:hover {
    background: transparent;
    color: #B8000B;
}

.modal-quelle {
    font-size: 0.74rem;
    color: #8d887e;
    line-height: 1.65;
    margin-top: 1.2rem;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    .serie-modal {
        padding: 0.8rem;
    }

    .serie-modal-box {
        max-height: 94vh;
    }

    .serie-modal-inhalt {
        padding: 1.5rem 1.2rem;
    }

    .modal-kopf {
        gap: 1.2rem;
    }

    .modal-bild {
        width: 150px;
        padding: 0.6rem;
    }

    .serie-modal-inhalt h2 {
        font-size: 1.4rem;
    }

    .modal-tabelle {
        font-size: 0.76rem;
    }
}

/* Hinweiszeile zur Kältemittelleitung */
.leitung-info {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.4rem;
    margin-top: 0.9rem;
    padding: 0.8rem 1.1rem;
    background: var(--dark-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.leitung-info strong {
    color: var(--text-light);
}

.leitung-info .leitung-plus {
    color: var(--primary-text);
    font-weight: 600;
    flex-basis: 100%;
}

/* Zwei Buttons im Fuß des Detailfensters */
.modal-knoepfe {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.modal-fuss .cta-button.zweit {
    background: transparent;
    border-color: #ddd7cb;
    color: #232220;
}

.modal-fuss .cta-button.zweit:hover {
    border-color: #E7000E;
    color: #B8000B;
    background: #F3F0EA;
}

@media (max-width: 600px) {
    .modal-knoepfe {
        flex-direction: column;
    }

    .modal-knoepfe .cta-button {
        width: 100%;
        text-align: center;
    }
}

/* Allgemeine Hinweise ohne Fußnotenziffer */
.vergleich-fussnoten li.ohne-nummer {
    padding-left: 0;
    text-indent: 0;
    margin-top: 0.9rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--border-color);
}

.vergleich-fussnoten li.ohne-nummer + li.ohne-nummer {
    margin-top: 0.4rem;
    padding-top: 0;
    border-top: none;
}

/* ============================================================
   Unternavigation im Klimabereich
   Liegt direkt unter dem ME-Markenband. Feste Farbwerte, weil
   die Leiste außerhalb von .me-theme steht.
   ============================================================ */
.klima-nav {
    background: #ffffff;
    border-bottom: 1px solid #d9d3c7;
}

.klima-nav-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0.9rem 2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.klima-nav-btn {
    display: inline-block;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #454239;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.klima-nav-btn:hover,
.klima-nav-btn:focus-visible {
    background: #F3F0EA;
    color: #232220;
}

.klima-nav-btn.aktiv {
    background: #F3F0EA;
    border-color: #d9d3c7;
    color: #232220;
}

/* Der Konfigurator steht vorne und ist hervorgehoben */
.klima-nav-btn.haupt {
    background: #E7000E;
    color: #ffffff;
    padding: 0.55rem 1.4rem;
    margin-right: 0.6rem;
}

.klima-nav-btn.haupt:hover,
.klima-nav-btn.haupt:focus-visible {
    background: #C1000C;
    color: #ffffff;
}

.klima-nav-btn.haupt.aktiv {
    background: #C1000C;
    border-color: #C1000C;
    color: #ffffff;
}

.klima-nav-btn:focus-visible {
    outline: 2px solid #E7000E;
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .klima-nav-inner {
        padding: 0.7rem 1.2rem;
        gap: 0.35rem;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .klima-nav-inner::-webkit-scrollbar {
        display: none;
    }

    .klima-nav-btn {
        white-space: nowrap;
        font-size: 0.85rem;
        padding: 0.5rem 0.9rem;
    }
}

/* ============ Seitenkopf der Klima-Unterseiten ============ */
.seiten-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--primary-text);
    margin-bottom: 0.7rem;
}

.galerie-cta.oben {
    margin-top: 0;
    margin-bottom: 3.5rem;
}

.cta-note {
    display: block;
    margin-top: 0.9rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* ============ Wegweiser zu den Unterseiten ============ */
.wegweiser {
    margin-top: 5rem;
    padding-top: 4rem;
    border-top: 1px solid var(--border-color);
}

.wegweiser h2 {
    font-size: 2.4rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.8rem;
    letter-spacing: -0.5px;
}

.wegweiser-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.wegweiser-karte {
    display: flex;
    flex-direction: column;
    background: var(--dark-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.8rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.wegweiser-karte:hover,
.wegweiser-karte:focus-visible {
    border-color: var(--primary);
    transform: translateY(-4px);
}

.wegweiser-karte:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

.wegweiser-bild {
    background: var(--dark-bg);
    border-radius: 10px;
    padding: 1.2rem;
    margin-bottom: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
}

.wegweiser-bild img {
    max-width: 100%;
    max-height: 96px;
    width: auto;
    height: auto;
    display: block;
}

/* Inline-SVG statt Emoji: Emojis werden je nach Betriebssystem
   unterschiedlich oder gar nicht dargestellt (Flaggen z.B. unter Windows). */
.wegweiser-svg {
    display: block;
    max-width: 100%;
    height: auto;
    color: var(--primary-text);
}

.wegweiser-svg.fahne {
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.wegweiser-karte h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.7rem;
}

.wegweiser-karte p {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.75;
    margin-bottom: 1.3rem;
}

.wegweiser-mehr {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-text);
    transition: transform 0.2s ease;
}

.wegweiser-karte:hover .wegweiser-mehr {
    transform: translateX(3px);
}

@media (max-width: 768px) {
    .wegweiser {
        margin-top: 3.5rem;
        padding-top: 2.5rem;
    }

    .wegweiser h2 {
        font-size: 1.8rem;
    }

    .wegweiser-karte {
        padding: 1.4rem;
    }
}

/* Der erste Block einer Unterseite braucht keine Trennlinie zum Seitenkopf */
.galerie-header + .serien-block,
.galerie-header + .aussen-block,
.galerie-header + .technik-block,
.galerie-header + .partner-block,
.galerie-header + .vergleich-block,
.galerie-header + .wegweiser,
.galerie-cta.oben + .serien-block,
.galerie-cta.oben + .aussen-block {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* ============================================================
   Aufmacher der Klimaseite
   Zweigeteilt: dunkle Textspalte links, Foto rechts.
   Feste Farbwerte, weil der Bereich außerhalb von .me-theme liegt.
   ============================================================ */
.klima-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    background: #232220;
    align-items: stretch;
}

.klima-hero-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4.5rem 3.5rem 4.5rem max(2rem, calc((100vw - 1400px) / 2 + 2rem));
}

.klima-hero-label {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #ffffff;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid #E7000E;
    margin-bottom: 1.8rem;
}

.klima-hero h1 {
    font-size: 2.9rem;
    line-height: 1.18;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: #ffffff;
    margin: 0 0 1.4rem;
    max-width: 18ch;
}

.klima-hero-text > p {
    font-size: 1.08rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 2.2rem;
    max-width: 46ch;
}

.klima-hero-aktion .cta-button {
    background: #E7000E;
    color: #ffffff;
    border: none;
}

.klima-hero-aktion .cta-button:hover,
.klima-hero-aktion .cta-button:focus-visible {
    background: #C1000C;
    color: #ffffff;
}

.klima-hero-punkte {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.6rem;
}

.klima-hero-punkte li {
    position: relative;
    padding-left: 1.3rem;
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.62);
}

.klima-hero-punkte li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #E7000E;
    font-weight: 700;
}

.klima-hero-bild {
    position: relative;
    min-height: 420px;
}

.klima-hero-bild img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 40% center;
    display: block;
}

@media (max-width: 900px) {
    .klima-hero {
        grid-template-columns: 1fr;
    }

    .klima-hero-text {
        padding: 3rem 1.5rem;
    }

    .klima-hero h1 {
        font-size: 2.1rem;
    }

    .klima-hero-bild {
        min-height: 260px;
    }

    .klima-hero-bild img {
        position: static;
        height: 260px;
    }
}

/* ============================================================
   Aktionsseite
   ============================================================ */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.aktion-warum h2,
.aktion-zusatz h2 {
    font-size: 2.4rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 2.5rem;
    letter-spacing: -0.5px;
}

.aktion-warum {
    background: var(--dark-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2.5rem;
    margin-bottom: 4rem;
}

.aktion-warum-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.8rem 2.5rem;
}

.aktion-warum h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.6rem;
}

.aktion-warum p {
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.8;
}

.aktion-warum strong {
    color: var(--text-light);
    font-weight: 600;
}

/* --- Edition --- */
.aktion-edition {
    margin-bottom: 4.5rem;
    padding-top: 3.5rem;
    border-top: 1px solid var(--border-color);
}

.aktion-edition-kopf {
    display: flex;
    gap: 2.5rem;
    align-items: flex-start;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}

.aktion-edition-bilder {
    flex-shrink: 0;
    width: 240px;
    background: var(--dark-bg);
    border-radius: 12px;
    padding: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
}

.aktion-edition-bilder img {
    max-width: 60%;
    height: auto;
    display: block;
}

.aktion-edition-bilder img.klein {
    max-width: 34%;
}

.aktion-edition-typ {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--primary-text);
    margin-bottom: 0.5rem;
}

.aktion-edition-kopf h3 {
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: -0.3px;
    margin-bottom: 0.3rem;
}

.aktion-edition-claim {
    font-weight: 600;
    margin-bottom: 1rem !important;
    color: var(--text-light) !important;
}

.aktion-edition-kopf p {
    color: var(--text-muted);
    line-height: 1.8;
    max-width: 62ch;
    margin: 0;
}

/* --- Setkarten --- */
.aktion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.4rem;
}

.aktion-karte {
    display: flex;
    flex-direction: column;
    background: var(--dark-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.6rem;
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.aktion-karte:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
}

.aktion-karte-kopf h4 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.aktion-leistung {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 1.2rem;
}

.aktion-flaeche {
    background: var(--primary-soft);
    border-radius: 8px;
    padding: 0.9rem 1rem;
    margin-bottom: 1.2rem;
}

.aktion-flaeche-wert {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary-text);
    margin-bottom: 0.25rem;
}

.aktion-flaeche-text {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.aktion-inhalt {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}

.aktion-inhalt li {
    position: relative;
    padding-left: 1.2rem;
    font-size: 0.86rem;
    line-height: 1.7;
    margin-bottom: 0.25rem;
}

.aktion-inhalt li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: 700;
}

.aktion-daten {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 1.4rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--border-color);
}

.aktion-preis {
    margin-top: auto;
}

.aktion-preis-brutto {
    display: block;
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.aktion-preis-netto {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}

.aktion-knopf {
    display: inline-block;
    align-self: flex-start;
    margin-top: 1.2rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--primary-text);
    text-decoration: none;
    border-bottom: 1px solid var(--primary-glow);
    padding-bottom: 2px;
    transition: border-color 0.25s ease;
}

.aktion-karte:hover .aktion-knopf {
    border-bottom-color: var(--primary);
}

/* --- Zusatzleistungen --- */
.aktion-zusatz {
    padding-top: 3.5rem;
    border-top: 1px solid var(--border-color);
}

.aktion-tabelle th[scope="row"] span,
.aktion-tabelle td.zahl span {
    display: block;
    font-size: 0.76rem;
    font-weight: 400;
    color: var(--text-muted);
    margin-top: 0.2rem;
}

.aktion-tabelle td.zahl {
    font-weight: 700;
    white-space: nowrap;
    text-align: right;
}

@media (max-width: 768px) {
    .aktion-warum {
        padding: 1.5rem;
    }

    .aktion-warum h2,
    .aktion-zusatz h2 {
        font-size: 1.8rem;
    }

    .aktion-edition-kopf h3 {
        font-size: 1.5rem;
    }

    .aktion-edition-bilder {
        width: 100%;
    }
}

/* Partnerlogo in der Herkunftskarte */
.partner-logo {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.1rem 1.3rem;
    margin-bottom: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.partner-logo img {
    width: 100%;
    max-width: 340px;
    height: auto;
    display: block;
}

/* Aktionsbutton in der Unternavigation */
.klima-nav-btn.aktion {
    border-color: #E7000E;
    color: #B8000B;
}

.klima-nav-btn.aktion:hover,
.klima-nav-btn.aktion:focus-visible {
    background: rgba(231, 0, 14, 0.08);
    color: #B8000B;
}

.klima-nav-btn.aktion.aktiv {
    background: rgba(231, 0, 14, 0.1);
    border-color: #E7000E;
    color: #B8000B;
}

/* Hervorgehobene Wegweiser-Karte */
.wegweiser-karte {
    position: relative;
}

.wegweiser-karte.hervor {
    border-color: var(--primary);
}

.wegweiser-badge {
    position: absolute;
    top: -11px;
    right: 1.4rem;
    background: var(--primary);
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 20px;
}

/* ============================================================
   Anfrageseite für ein Aktionspaket
   ============================================================ */
.set-kopf {
    display: flex;
    gap: 2.5rem;
    align-items: flex-start;
    background: var(--dark-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2.2rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.set-kopf-bilder {
    flex-shrink: 0;
    width: 260px;
    background: var(--dark-bg);
    border-radius: 10px;
    padding: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
}

.set-kopf-bilder img {
    max-width: 58%;
    height: auto;
    display: block;
}

.set-kopf-bilder img.klein {
    max-width: 36%;
}

.set-kopf-text {
    flex: 1;
    min-width: 280px;
}

.set-edition {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--primary-text);
    margin-bottom: 0.4rem;
}

.set-kopf-text h2 {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.3px;
    margin-bottom: 0.3rem;
}

.set-leistung {
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.set-flaeche {
    background: var(--primary-soft);
    border-radius: 8px;
    padding: 0.9rem 1.1rem;
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.set-kopf-text h3 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.6rem;
}

.set-inhalt {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.set-inhalt li {
    position: relative;
    padding-left: 1.3rem;
    font-size: 0.92rem;
    line-height: 1.8;
}

.set-inhalt li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: 700;
}

.set-inhalt span {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.set-grundpreis {
    padding-top: 1.2rem;
    border-top: 1px solid var(--border-color);
}

.set-grundpreis-brutto {
    display: block;
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.set-grundpreis-netto {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}

/* --- Blöcke --- */
.set-block {
    margin-bottom: 3rem;
}

.set-block > h2 {
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -0.3px;
    margin-bottom: 1.5rem;
    padding-bottom: 0.7rem;
    border-bottom: 2px solid var(--primary);
}

#set-technik h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 1.8rem 0 0.9rem;
}

#set-technik h3:first-child {
    margin-top: 0;
}

.set-daten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0;
    margin: 0;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    background: var(--dark-secondary);
}

.set-daten > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.87rem;
}

.set-daten dt {
    color: var(--text-muted);
}

.set-daten dd {
    margin: 0;
    font-weight: 600;
    text-align: right;
}

.set-daten > div.hervor {
    background: var(--primary-soft);
}

.set-daten > div.hervor dd {
    color: var(--primary-text);
}

.set-technik-note {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-top: 1rem;
    padding-left: 0.9rem;
    border-left: 2px solid var(--border-color);
}

/* --- Optionen --- */
.set-optionen {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.option-feld {
    background: var(--dark-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.3rem;
}

.option-feld label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.6rem;
}

.option-feld select {
    width: 100%;
    max-width: 420px;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--dark-bg);
    color: var(--text-light);
    font-size: 0.95rem;
    font-family: inherit;
}

.option-note {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-top: 0.8rem;
}

.option-zeile {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: var(--dark-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.3rem;
    cursor: pointer;
    transition: border-color 0.25s ease;
}

.option-zeile:hover,
.option-zeile:focus-within {
    border-color: var(--primary);
}

.option-zeile input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: var(--primary);
}

.option-text {
    flex: 1;
    min-width: 0;
}

.option-text strong {
    display: block;
    font-size: 1rem;
    margin-bottom: 0.3rem;
}

.option-beschreibung {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.7;
}

.option-preis {
    flex-shrink: 0;
    text-align: right;
    font-weight: 700;
    font-size: 1.1rem;
    white-space: nowrap;
}

.option-preis span {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

/* --- Summe --- */
.set-summe {
    background: var(--dunkel);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 3rem;
    color: #ffffff;
}

.set-summe h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 1.2rem;
}

.summe-posten {
    list-style: none;
    padding: 0;
    margin: 0 0 1.2rem;
}

.summe-posten li {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.5rem 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.82);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.summe-zeile {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.4rem 0;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.7);
}

.summe-zeile.gesamt {
    margin-top: 0.6rem;
    padding-top: 1rem;
    border-top: 2px solid #E7000E;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
}

.summe-note {
    margin-top: 1.2rem;
    font-size: 0.8rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.6);
}

/* --- kein Paket gewählt --- */
.set-fehlt {
    background: var(--dark-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2.5rem;
    text-align: center;
}

.set-fehlt h2 {
    font-size: 1.6rem;
    margin-bottom: 0.8rem;
}

.set-fehlt-liste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.8rem;
    margin: 2rem 0;
}

.set-fehlt-liste a {
    display: block;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.25s ease;
}

.set-fehlt-liste a:hover {
    border-color: var(--primary);
}

.set-fehlt-liste strong {
    display: block;
    margin-bottom: 0.2rem;
}

.set-fehlt-liste span {
    font-size: 0.82rem;
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .set-kopf {
        padding: 1.5rem;
    }

    .set-kopf-bilder {
        width: 100%;
    }

    .set-kopf-text h2 {
        font-size: 1.5rem;
    }

    .option-zeile {
        flex-wrap: wrap;
    }

    .option-preis {
        width: 100%;
        text-align: left;
    }

    .set-summe {
        padding: 1.5rem;
    }
}

/* ============================================================
   Partnerbetriebe für die Montage
   ============================================================ */
.partner-montage {
    margin-top: 1rem;
    background: var(--dark-secondary);
    border: 1px solid var(--primary);
    border-radius: 10px;
    padding: 1.6rem;
}

.partner-montage h3 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 0.6rem;
}

.partner-montage-text {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.8;
    margin-bottom: 1.4rem;
}

.karte-huelle {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    background: var(--dark-bg);
}

.karte-platzhalter {
    padding: 2.5rem 1.5rem;
    text-align: center;
}

.karte-icon {
    display: block;
    font-size: 2rem;
    margin-bottom: 0.8rem;
}

.karte-platzhalter p {
    max-width: 46ch;
    margin: 0 auto 1.2rem;
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--text-muted);
}

.karte-knopf {
    background: var(--primary);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 0.7rem 1.6rem;
    font-size: 0.92rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.25s ease;
}

.karte-knopf:hover,
.karte-knopf:focus-visible {
    background: var(--primary-hover);
}

.karte-laedt {
    margin: 0;
    padding: 2rem 1rem;
    text-align: center;
    font-size: 0.88rem;
    color: var(--text-muted);
}

.karte-flaeche {
    height: 380px;
    width: 100%;
}

/* Leaflet-Popup an die Seite anpassen */
.karte-flaeche .leaflet-popup-content {
    font-family: inherit;
    font-size: 0.85rem;
    line-height: 1.6;
}

.partner-betriebe {
    list-style: none;
    padding: 0;
    margin: 0 0 1.2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.partner-betriebe li {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    background: var(--dark-bg);
    border-radius: 10px;
    padding: 1.1rem;
}

.partner-nummer {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #ffffff;
    border-radius: 50%;
    font-size: 0.82rem;
    font-weight: 700;
}

.partner-betriebe strong {
    display: block;
    font-size: 0.95rem;
    line-height: 1.4;
    margin-bottom: 0.2rem;
}

.partner-zusatz {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
}

.partner-adresse {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

.partner-kontakt {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.partner-kontakt a {
    font-size: 0.82rem;
    color: var(--primary-text);
    text-decoration: none;
    font-weight: 600;
}

.partner-kontakt a:hover,
.partner-kontakt a:focus-visible {
    text-decoration: underline;
}

.partner-montage-note {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0;
    padding-left: 0.9rem;
    border-left: 2px solid var(--border-color);
}

@media (max-width: 768px) {
    .partner-montage {
        padding: 1.2rem;
    }

    .karte-flaeche {
        height: 300px;
    }
}

/* Auswahl des Montagebetriebs */
.partner-betriebe li {
    padding: 0;
    background: none;
}

.partner-wahl {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    width: 100%;
    background: var(--dark-bg);
    border: 2px solid transparent;
    border-radius: 10px;
    padding: 1.1rem;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.partner-wahl:hover,
.partner-wahl:focus-within {
    border-color: var(--border-color);
}

.partner-betriebe li.gewaehlt .partner-wahl {
    border-color: var(--primary);
    background: var(--primary-softer);
}

.partner-wahl input[type="radio"] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: var(--primary);
}

.partner-daten {
    flex: 1;
    min-width: 0;
}

.partner-bezirk {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.partner-fehler {
    background: var(--primary-soft);
    border-left: 3px solid var(--primary);
    border-radius: 0 8px 8px 0;
    padding: 0.9rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-text);
    margin: 0 0 1.2rem;
}

.popup-knopf {
    margin-top: 0.6rem;
    background: #C1272D;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 0.4rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

.popup-knopf:hover {
    background: #9E1B21;
}

/* Bestätigung statt Fehlermeldung */
.upload-meldung.ok {
    background: rgba(30, 120, 60, 0.08);
    border-left-color: #1e783c;
    color: #1a5c30;
}

/* ============================================================
   Feinschliff für Handys
   Auf schmalen Displays sind die Abstände und Schriftgrade des
   Desktop-Layouts zu üppig. Hier wird alles eine Stufe kompakter.
   ============================================================ */
@media (max-width: 600px) {

    /* --- Überschriften eine Stufe kleiner --- */
    .klima-hero h1 {
        font-size: 1.75rem;
        line-height: 1.25;
    }

    .klima-hero-text > p {
        font-size: 0.98rem;
    }

    .klima-hero-text {
        padding: 2.2rem 1.2rem;
    }

    .galerie-header h1,
    .anfrage-header h1 {
        font-size: 1.65rem;
        line-height: 1.25;
    }

    .galerie-header p,
    .anfrage-header p {
        font-size: 0.92rem;
    }

    .serien-block h2,
    .vergleich-block h2,
    .technik-block h2,
    .aussen-block h2,
    .partner-block h2,
    .wegweiser h2,
    .aktion-warum h2,
    .aktion-zusatz h2 {
        font-size: 1.45rem;
        margin-bottom: 0.6rem;
    }

    .serien-intro {
        font-size: 0.9rem;
        margin-bottom: 2rem;
    }

    .set-block > h2 {
        font-size: 1.3rem;
    }

    .aktion-edition-kopf h3 {
        font-size: 1.3rem;
    }

    /* --- Karten enger --- */
    .serie-karte,
    .aktion-karte,
    .wegweiser-karte,
    .partner-karte,
    .technik-karte {
        padding: 1.2rem;
    }

    .serie-bild,
    .wegweiser-bild {
        padding: 1rem;
        margin-bottom: 1rem;
        min-height: 0;
    }

    .aussen-karte .serie-bild {
        min-height: 0;
    }

    .aussen-karte .serie-bild img,
    .wegweiser-bild img {
        max-height: 130px;
    }

    .serien-grid,
    .aussen-grid,
    .wegweiser-grid,
    .aktion-grid,
    .technik-grid,
    .partner-grid {
        gap: 1rem;
    }

    .serie-karte h3,
    .aktion-karte-kopf h4 {
        font-size: 1.1rem;
    }

    .serie-daten li,
    .aktion-inhalt li {
        font-size: 0.85rem;
    }

    /* --- Preise nicht mehr riesig --- */
    .aktion-preis-brutto,
    .set-grundpreis-brutto {
        font-size: 1.4rem;
    }

    .summe-zeile.gesamt {
        font-size: 1.2rem;
    }

    /* --- Anfrageseite --- */
    .set-kopf {
        padding: 1.2rem;
        gap: 1.2rem;
    }

    .set-kopf-bilder {
        padding: 0.9rem;
    }

    .set-kopf-bilder img {
        max-height: 110px;
        width: auto;
    }

    .set-kopf-text h2 {
        font-size: 1.35rem;
    }

    .set-flaeche,
    .aktion-flaeche {
        padding: 0.7rem 0.8rem;
        font-size: 0.85rem;
    }

    .set-block {
        margin-bottom: 2rem;
    }

    /* Technische Daten: Bezeichnung über den Wert statt daneben */
    .set-daten > div {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.1rem;
        padding: 0.6rem 0.9rem;
    }

    .set-daten dt {
        font-size: 0.78rem;
    }

    .set-daten dd {
        text-align: left;
        font-size: 0.9rem;
    }

    /* --- Formular --- */
    .form-block {
        padding: 1.2rem;
    }

    .form-block legend {
        font-size: 1.05rem;
        gap: 0.5rem;
    }

    .form-block legend::before {
        width: 25px;
        height: 25px;
        font-size: 0.85rem;
    }

    .option-feld,
    .option-zeile {
        padding: 1rem;
    }

    .option-text strong {
        font-size: 0.94rem;
    }

    .option-beschreibung {
        font-size: 0.8rem;
    }

    .option-preis {
        font-size: 1rem;
    }

    /* --- Montagebetriebe --- */
    .partner-montage {
        padding: 1rem;
    }

    .partner-wahl {
        padding: 0.9rem;
        gap: 0.7rem;
    }

    .partner-betriebe strong {
        font-size: 0.9rem;
    }

    .partner-adresse,
    .partner-zusatz {
        font-size: 0.8rem;
    }

    .karte-flaeche {
        height: 250px;
    }

    .karte-platzhalter {
        padding: 1.6rem 1rem;
    }

    /* --- Aktionsseite --- */
    .aktion-edition {
        margin-bottom: 2.5rem;
        padding-top: 2rem;
    }

    .aktion-edition-kopf {
        gap: 1.2rem;
        margin-bottom: 1.5rem;
    }

    .aktion-edition-bilder {
        padding: 0.9rem;
    }

    .aktion-edition-bilder img {
        max-height: 110px;
        width: auto;
    }

    .aktion-warum-grid {
        gap: 1.2rem;
    }

    /* --- Abstände der Abschnitte --- */
    .me-theme.galerie-section {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
        padding-top: 2.5rem;
    }

    .aussen-block,
    .partner-block,
    .vergleich-block,
    .technik-block,
    .wegweiser {
        margin-top: 2.5rem;
        padding-top: 2rem;
    }

    /* --- Fußnoten und Quellen --- */
    .technik-quelle,
    .partner-note,
    .vergleich-fussnoten li,
    .set-technik-note,
    .summe-note {
        font-size: 0.76rem;
    }
}

/* Sehr schmale Geräte (iPhone SE und ähnlich) */
@media (max-width: 380px) {
    .klima-hero h1 {
        font-size: 1.55rem;
    }

    .galerie-header h1 {
        font-size: 1.45rem;
    }

    .set-kopf-bilder,
    .aktion-edition-bilder {
        width: 100%;
    }

    .option-zeile {
        gap: 0.7rem;
    }

    .navbar .logo {
        font-size: 0.8rem;
    }
}

/* ============================================================
   Konfigurator-Knopf im Markenband
   ============================================================ */
.me-band-cta {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    background: #E7000E;
    color: #ffffff;
    text-decoration: none;
    padding: 0.6rem 1.4rem;
    border-radius: 8px;
    line-height: 1.25;
    transition: background 0.2s ease;
}

.me-band-cta:hover,
.me-band-cta:focus-visible {
    background: #C1000C;
    color: #ffffff;
}

.me-band-cta.aktiv {
    background: #ffffff;
    color: #232220;
}

.me-band-cta-text {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.me-band-cta-sub {
    font-size: 0.72rem;
    opacity: 0.85;
}

.me-band-cta:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* ============================================================
   Aufklappbare Textblöcke
   ============================================================ */
.aufklapp-liste {
    display: grid;
    gap: 0.6rem;
}

.aufklapp {
    background: var(--dark-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
}

.aufklapp[open] {
    border-color: var(--primary);
}

.aufklapp summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1.2rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    transition: background 0.2s ease;
}

.aufklapp summary::-webkit-details-marker {
    display: none;
}

.aufklapp summary::after {
    content: "+";
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary-text);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
}

.aufklapp[open] summary::after {
    content: "–";
}

.aufklapp summary:hover,
.aufklapp summary:focus-visible {
    background: var(--primary-softer);
}

.aufklapp summary:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.aufklapp-inhalt {
    padding: 0 1.2rem 1.1rem;
}

.aufklapp-inhalt p {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.8;
    margin: 0;
}

.aufklapp-inhalt strong {
    color: var(--text-light);
}

/* ============================================================
   Zusatzleistungen: auf schmalen Displays Karten statt Tabelle
   ============================================================ */
@media (max-width: 700px) {
    .aktion-zusatz .vergleich-scroll {
        overflow: visible;
        border: none;
        border-radius: 0;
    }

    .aktion-tabelle,
    .aktion-tabelle tbody {
        display: block;
        min-width: 0;
        width: 100%;
    }

    .aktion-tabelle tr {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.3rem 0.8rem;
        background: var(--dark-secondary);
        border: 1px solid var(--border-color);
        border-radius: 10px;
        padding: 1rem;
        margin-bottom: 0.7rem;
    }

    .aktion-tabelle th,
    .aktion-tabelle td {
        display: block;
        border: none;
        padding: 0;
        background: none;
    }

    .aktion-tabelle th[scope="row"] {
        order: 1;
        flex: 1 1 55%;
        font-size: 0.95rem;
        text-align: left;
    }

    .aktion-tabelle td.zahl {
        order: 2;
        margin-left: auto;
        text-align: right;
        font-size: 1.05rem;
    }

    .aktion-tabelle td:not(.zahl) {
        order: 3;
        flex: 1 1 100%;
        font-size: 0.84rem;
        color: var(--text-muted);
        line-height: 1.7;
        padding-top: 0.5rem;
        border-top: 1px solid var(--border-color);
    }
}

@media (max-width: 900px) {
    .me-band-inner {
        gap: 1.2rem;
    }

    .me-band-cta {
        margin-left: 0;
        flex: 1 1 100%;
        align-items: center;
        text-align: center;
        padding: 0.75rem 1rem;
    }

    .me-band {
        padding: 1.1rem 1.2rem;
    }

    .me-band-text {
        padding-left: 1.2rem;
    }

    .me-logo {
        height: 34px;
    }

    .me-band-text strong {
        font-size: 1.05rem;
    }

    .me-band-text span {
        font-size: 0.78rem;
    }
}

/* Aufklappblöcke der Gerätetechnik */
.aufklapp summary {
    align-items: baseline;
}

.aufklapp-titel {
    flex: 1;
}

.aufklapp-zusatz {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text-muted);
    text-align: right;
}

/* In den Technikblöcken sitzt die Datenliste direkt im Inhalt */
.aufklapp-inhalt .set-daten {
    border-radius: 8px;
}

.aufklapp-inhalt .set-daten:last-child > div:last-child {
    border-bottom: none;
}

.geraet-block + .geraet-block {
    margin-top: 1rem;
}

.geraet-block h4 {
    font-size: 0.92rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--primary-text);
}

#set-technik .aufklapp-inhalt {
    padding: 0 1rem 1rem;
}

#set-technik .set-technik-note {
    margin-top: 0.8rem;
    font-size: 0.78rem;
}

/* Auf breiten Bildschirmen die Datenlisten zweispaltig */
@media (min-width: 900px) {
    .aufklapp-inhalt .set-daten {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .aufklapp summary {
        padding: 0.85rem 1rem;
        font-size: 0.95rem;
    }

    .aufklapp-zusatz {
        font-size: 0.75rem;
    }

    #set-technik .aufklapp-inhalt {
        padding: 0 0.8rem 0.9rem;
    }

    .aufklapp-inhalt .set-daten > div {
        padding: 0.55rem 0.8rem;
    }
}

/* Beträge in der Zusammenstellung
   Eine ältere Regel aus dem Konfigurator färbt den letzten Span mit
   var(--text-light). Im ME-Bereich ist das Anthrazit – auf dem dunklen
   Kasten also unsichtbar. Hier wird gezielt gegengesteuert. */
.set-summe .summe-zeile span:last-child {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 600;
    white-space: nowrap;
}

.set-summe .summe-zeile.gesamt span:last-child {
    color: #ffffff;
    font-weight: 700;
}

.set-summe .summe-posten li span:last-child {
    color: #ffffff;
    font-weight: 600;
    white-space: nowrap;
}

.set-summe .summe-zeile {
    border-bottom: none;
}

/* ============================================================
   Mitsubishi-Logo auf der Startseitenkachel
   ============================================================ */
.visual-element .kachel-logo {
    width: auto;
    height: 34px;
    max-width: 80%;
    display: block;
    margin: 0 auto 0.2rem;
}

/* ============================================================
   Konditionen der Beratung
   Gleiche Kachel wie die übrigen Leistungen, nur der Betrag
   ist hervorgehoben.
   ============================================================ */
.beratung-preiszeile {
    margin-bottom: 1.5rem !important;
    padding-bottom: 1.3rem;
    border-bottom: 1px solid var(--border-color);
}

.beratung-betrag {
    display: block;
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--primary-text);
    line-height: 1.1;
    letter-spacing: -1px;
}

.beratung-netto {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.35rem;
}

.beratung-hinweis {
    max-width: 900px;
    margin: 3rem auto 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.85;
}

/* ============================================================
   Konfigurator-Band auf der Startseite
   ============================================================ */
.me-banner {
    display: block;
    margin-top: 73px;
    background: #232220;
    border-bottom: 4px solid #E7000E;
    padding: 1.3rem 2rem;
    text-decoration: none;
    transition: background 0.25s ease;
}

.me-banner:hover,
.me-banner:focus-visible {
    background: #2e2c29;
}

.me-banner-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.me-banner .me-logo {
    height: 40px;
    width: auto;
    flex-shrink: 0;
}

.me-banner-text {
    flex: 1;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    padding-left: 2rem;
    border-left: 1px solid rgba(255, 255, 255, 0.22);
}

.me-banner-text strong {
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.me-banner-text span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.88rem;
    line-height: 1.5;
}

.me-banner-cta {
    flex-shrink: 0;
    background: #E7000E;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.75rem 1.6rem;
    border-radius: 8px;
    white-space: nowrap;
    transition: background 0.2s ease;
}

.me-banner:hover .me-banner-cta {
    background: #C1000C;
}

.me-banner:focus-visible {
    outline: 2px solid #E7000E;
    outline-offset: -3px;
}

/* Der Aufmacher schließt direkt an das Band an */
.me-banner + .hero {
    margin-top: 0;
    min-height: 0;
    padding-top: 4rem;
}

@media (max-width: 900px) {
    .me-banner {
        padding: 1.1rem 1.2rem;
    }

    .me-banner-inner {
        gap: 1rem;
    }

    .me-banner .me-logo {
        height: 30px;
    }

    .me-banner-text {
        padding-left: 1rem;
    }

    .me-banner-text strong {
        font-size: 1.05rem;
    }

    .me-banner-text span {
        font-size: 0.8rem;
    }

    .me-banner-cta {
        flex: 1 1 100%;
        text-align: center;
        padding: 0.7rem 1rem;
    }
}

@media (max-width: 600px) {
    .beratung-betrag {
        font-size: 2.1rem;
    }

    .beratung-hinweis {
        font-size: 0.86rem;
        margin-top: 2rem;
    }

    .visual-element .kachel-logo {
        height: 28px;
    }
}

/* ============================================================
   Kacheln im Aufmacher gleich groß
   Vorher waren sie über justify-items/align-items zentriert und
   damit nur so breit und hoch wie ihr Inhalt.
   ============================================================ */
.hero-visual {
    align-items: stretch;
    justify-items: stretch;
}

.visual-element {
    width: 100%;
    justify-content: flex-start;
    padding: 2.2rem 1.5rem;
}

/* Einheitlicher Platz für Symbol beziehungsweise Logo */
.visual-element > span:first-child,
.visual-element .kachel-logo {
    height: 66px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.visual-element > span:first-child {
    font-size: 3.2rem;
    line-height: 1;
}

.visual-element .kachel-logo {
    width: auto;
    max-width: 82%;
    object-fit: contain;
}

.visual-element h3 {
    margin-bottom: 0.4rem;
}

.visual-element em {
    margin-top: 0 !important;
}

/* ============================================================
   Kontaktdaten in einer Karte
   ============================================================ */
.kontakt-daten {
    margin: 0;
    display: grid;
    gap: 1.1rem;
}

.kontakt-daten > div {
    display: grid;
    gap: 0.15rem;
}

.kontakt-daten dt {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.kontakt-daten dd {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.6;
}

.kontakt-daten dd a {
    color: var(--primary-text);
    font-weight: 600;
    text-decoration: none;
}

.kontakt-daten dd a:hover,
.kontakt-daten dd a:focus-visible {
    text-decoration: underline;
}

@media (max-width: 600px) {
    .kontakt-daten {
        gap: 0.9rem;
    }

    .kontakt-daten dd {
        font-size: 0.96rem;
    }
}

/* Nachsatz zur Marke im Aufmacher: etwas kleiner als der Haupttext */
.hero-content p.hero-marke {
    font-size: 1rem;
    line-height: 1.75;
    padding-left: 1.1rem;
    border-left: 2px solid var(--primary-glow);
}

/* ============================================================
   Hinweise zum Montageumfang im Konfigurator
   ============================================================ */
#montage-hinweis {
    margin-top: 1rem;
}

.umfang-hinweis {
    background: var(--dark-secondary);
    border-left: 3px solid var(--primary);
    border-radius: 0 10px 10px 0;
    padding: 1.2rem 1.4rem;
    margin-bottom: 1rem;
}

.umfang-hinweis h4 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.umfang-hinweis p {
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--text-muted);
    margin: 0;
}

.umfang-hinweis strong {
    color: var(--text-light);
}

/* Nachweis nach der F-Gase-Verordnung */
.fgas-hinweis {
    background: var(--primary-softer);
    border: 1px solid var(--primary);
    border-radius: 10px;
    padding: 1.3rem 1.4rem;
}

.fgas-hinweis h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-text);
    margin-bottom: 0.6rem;
}

.fgas-hinweis > p {
    font-size: 0.86rem;
    line-height: 1.8;
    color: var(--text-muted);
    margin-bottom: 1.1rem;
}

.fgas-bestaetigung {
    background: var(--dark-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.9rem 1.1rem;
    align-items: flex-start;
}

.fgas-bestaetigung span {
    font-size: 0.88rem;
    line-height: 1.65;
}

.fgas-fehler {
    margin: 0.9rem 0 0;
    padding: 0.7rem 1rem;
    background: var(--primary-soft);
    border-radius: 8px;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--primary-text);
}

@media (max-width: 600px) {
    .umfang-hinweis,
    .fgas-hinweis {
        padding: 1rem;
    }
}

/* ============================================================
   Kabel und Elektroanschluss im Konfigurator
   ============================================================ */
.kabel-titel {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.kabel-hinweis {
    font-size: 0.84rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 1.1rem;
}

.kabel-zeile {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--border-color);
}

.kabel-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.kabel-warnung {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary-text);
    margin-top: 0.25rem;
}

.kabel-feld {
    margin-top: 1.2rem;
}

.kabel-feld input,
.kabel-feld select {
    width: 100%;
    max-width: 320px;
}

.kabel-sub {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-top: 0.4rem;
}

.elektro-block {
    background: var(--dark-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.3rem 1.4rem;
    margin-top: 1rem;
}

.elektro-block h4 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.elektro-block > p {
    font-size: 0.88rem;
    line-height: 1.8;
    color: var(--text-muted);
    margin-bottom: 1.1rem;
}

.elektro-block strong {
    color: var(--text-light);
}

@media (max-width: 600px) {
    .kabel-zeile {
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .elektro-block {
        padding: 1rem;
    }
}

/* ============================================================
   Mengenauswahl beim Zubehör
   ============================================================ */
.menge-waehler {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.menge-knopf {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border-color);
    background: var(--dark-secondary);
    color: var(--text-light);
    border-radius: 8px;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.menge-knopf:hover:not(:disabled),
.menge-knopf:focus-visible {
    border-color: var(--primary);
    background: var(--primary-softer);
}

.menge-knopf:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.menge-knopf.hinzu {
    width: auto;
    padding: 0 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-text);
    white-space: nowrap;
}

.menge-zahl {
    min-width: 1.6rem;
    text-align: center;
    font-weight: 700;
    font-size: 1rem;
}

.zubehoer-zeile .menge-waehler {
    margin-left: auto;
}

@media (max-width: 600px) {
    .zubehoer-zeile {
        flex-wrap: wrap;
    }

    .menge-waehler {
        order: 3;
    }

    .zubehoer-zeile .zubehoer-preis {
        order: 4;
        margin-left: auto;
    }
}

/* ============================================================
   Sanftes Einblenden beim Scrollen
   Die Klasse anim-bereit setzt JavaScript. Ohne JavaScript
   greift keine dieser Regeln und alles bleibt sichtbar.
   ============================================================ */
.anim-bereit .anim {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.55s ease, transform 0.55s ease;
    will-change: opacity, transform;
}

.anim-bereit .anim.sichtbar {
    opacity: 1;
    transform: none;
}

/* Wer Bewegung reduziert haben will, bekommt keine */
@media (prefers-reduced-motion: reduce) {
    .anim-bereit .anim {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Weichere Bewegung bei den Kacheln, die sich beim Überfahren heben */
.serie-karte,
.wegweiser-karte,
.aktion-karte,
.technik-karte,
.partner-karte,
.service-item,
.visual-element {
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, opacity 0.55s ease;
}

@media (prefers-reduced-motion: reduce) {
    .serie-karte:hover,
    .wegweiser-karte:hover,
    .aktion-karte:hover,
    .service-item:hover,
    .visual-element:hover {
        transform: none;
    }
}

/* ===================================================================
   Kontaktformular Startseite
   Nutzt die Formularklassen der Anfrageseiten (.form-feld, .pflicht,
   .checkbox-zeile). Diese Regeln setzen nur das gerade, was sich mit
   den älteren .contact-form-Regeln beisst.
   =================================================================== */

/* .contact-form hat gap: 1.5rem, .form-feld zusätzlich margin-bottom.
   Sonst stünde zwischen den Feldern der doppelte Abstand. */
.contact-form .form-feld {
    margin-bottom: 0;
}

.contact-form .form-feld label {
    display: block;
    font-size: 0.88rem;
    color: var(--text-muted);
    margin-bottom: 0.6rem;
}

.contact-form .form-feld input,
.contact-form .form-feld textarea,
.contact-form .form-feld select {
    width: 100%;
    padding: 13px 16px;
    background: var(--dark-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-light);
    font-family: inherit;
    font-size: 0.95rem;
}

.contact-form .form-feld textarea {
    resize: vertical;
    min-height: 120px;
}

.contact-form .form-feld input:focus,
.contact-form .form-feld textarea:focus,
.contact-form .form-feld select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

/* Die allgemeine .contact-form-input-Regel würde sonst auch das
   Häkchen treffen und ihm Polsterung und Hintergrund verpassen. */
.contact-form .checkbox-zeile input[type="checkbox"] {
    width: 18px;
    height: 18px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    accent-color: var(--primary);
    flex-shrink: 0;
}

.contact-form .submit-button {
    align-self: flex-start;
}

.contact-form .form-hinweis {
    margin-top: 0;
}

/* Tastaturbedienung sichtbar machen */
.contact-form .checkbox-zeile input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

@media (max-width: 700px) {
    .contact-form .submit-button {
        align-self: stretch;
        width: 100%;
    }
}

/* ===================================================================
   cool-me – eigene Bausteine
   Ergaenzungen gegenueber dem uebernommenen Klimabereich.
   =================================================================== */

/* Logo als Bild statt Schriftzug */
.logo-coolme {
    display: flex;
    align-items: center;
    text-decoration: none;
    line-height: 0;
}

.logo-coolme img {
    height: 34px;
    width: auto;
    display: block;
}

/* Aktiver Menuepunkt in der Hauptnavigation */
.nav-menu a.aktiv {
    color: #ffffff;
}

.nav-menu a.aktiv::after {
    width: 100%;
}

/* Hinweis im Fuss: Betreiber und Markenverhaeltnis.
   Rechtlich notwendig, deshalb bewusst lesbar und nicht kleingedruckt. */
.footer-unabhaengig {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.6rem 2rem 0;
    border-top: 1px solid var(--dunkel-rand);
}

.footer-unabhaengig p {
    font-size: 0.84rem;
    line-height: 1.8;
    color: #b8b3aa;
    margin: 0;
}

.footer-unabhaengig strong {
    color: #ffffff;
    font-weight: 600;
}

/* Aufmacher der Kontaktseite */
.kontakt-hero {
    padding: 9rem 2rem 3.5rem;
    background: var(--sand);
}

.kontakt-hero-inner {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.kontakt-hero h1 {
    font-size: clamp(2rem, 4.5vw, 3rem);
    line-height: 1.15;
    margin: 0.8rem 0 1.2rem;
}

.kontakt-hero p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--text-muted);
    margin: 0 auto 2rem;
    max-width: 640px;
}

.kontakt-hero-aktion {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Zweitrangiger Knopf: gleiche Groesse, weniger Gewicht */
.cta-button.sekundaer {
    background: transparent;
    color: var(--primary-text);
    border: 2px solid var(--primary);
}

.cta-button.sekundaer:hover {
    background: var(--primary);
    color: #ffffff;
}

/* Gruppe von Aufklappbloecken */
.aufklapp-gruppe {
    display: grid;
    gap: 1rem;
    max-width: 900px;
    margin: 2.5rem auto 0;
}

/* Preiskarte auf der Kontaktseite */
.info-card.beratung-karte .features {
    list-style: none;
    padding: 0;
    margin: 1.2rem 0 0;
}

.info-card.beratung-karte .features li {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.9;
}

@media (max-width: 900px) {
    .kontakt-hero {
        padding: 7rem 1.2rem 2.5rem;
    }

    .footer-unabhaengig {
        padding: 1.4rem 1.2rem 0;
    }

    .footer-unabhaengig p {
        font-size: 0.8rem;
    }

    .logo-coolme img {
        height: 28px;
    }
}

@media (max-width: 700px) {
    .kontakt-hero-aktion .cta-button {
        width: 100%;
        text-align: center;
    }
}