/* =======================================================================
   CUSTOM MASTER STYLESHEET – ZD INGENIEURE (2025)
   Bereinigt & stabilisiert – ohne StartseiteText & ohne Button-Anhebung
======================================================================= */

/* =======================================================================
   1) LEGACY CONTENT ELEMENTE  MÖGLICHERWEISE MÜLL ???
======================================================================= */

.unternehmen {
    clear: both;
}

.mainblock {
    border: 1px solid grey;
    border-radius: 15px;
    box-shadow: 5px 10px 5px #E0E4DB;
    padding: 20px;
    margin: 15px 0;
}

.greenbackground {
    background-color: #33CC33;
    padding: 40px;
}

.rahmenbox {
    border: 3px solid #33CC33;
    padding: 20px 0;
}

.relative {
    display: block;
}

/* ==========================================================================
   GLOSSAR – GLOBAL
========================================================================== */

.glossar-header {
    margin-bottom: 30px;
}

/* ==========================================================================
   GLOSSAR – WRAPPER (Sidebar links + Content rechts)
========================================================================== */

.glossar-wrapper {
    display: flex;
    align-items: flex-start;
    width: 100%;
    gap: 40px;
    margin-top: 40px;
}

/* ==========================================================================
   SIDEBAR A–Z
========================================================================== */

.glossar-sidebar {
    position: sticky;
    top: 120px;
    width: 140px;
    padding: 20px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    height: fit-content;
}

    .glossar-sidebar h4 {
        font-size: 18px;
        margin-bottom: 15px;
        color: #232856;
    }

    .glossar-sidebar a {
        display: block;
        padding: 3px 0;
        font-size: 16px;
        font-weight: 600;
        color: #232856;
        text-decoration: none;
        transition: 0.2s;
    }

        .glossar-sidebar a:hover {
            color: #33cc33;
        }

        .glossar-sidebar a.active {
            color: #33cc33;
            font-weight: 700;
        }

/* ==========================================================================
   GLOSSAR CONTENT
========================================================================== */

.glossar-container {
    flex: 1;
    max-width: 900px;
}

.glossar-section-title {
    font-size: 32px;
    color: #232856;
    font-weight: 700;
    margin: 40px 0 20px;
}

/* Jede Glossar-Karte */
.glossar-card {
    background: #ffffff;
    border-radius: 10px;
    padding: 25px 30px;
    margin-bottom: 25px;
    border-left: 5px solid #33cc33;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    scroll-margin-top: 140px;
}

    .glossar-card h3 {
        color: #232856;
        font-size: 22px;
        margin-bottom: 12px;
    }

    .glossar-card p {
        color: #444;
        font-size: 16px;
        line-height: 1.6;
    }

/* ==========================================================================
   MOBILE
========================================================================== */

@media (max-width: 992px) {
    .glossar-wrapper {
        flex-direction: column;
    }

    .glossar-sidebar {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        position: static;
        box-shadow: none;
        padding: 10px;
        background: transparent;
    }

        .glossar-sidebar a {
            margin-right: 10px;
        }
}

/* ============================================================
   GLOSSAR – SIDEBAR + CONTENT MITTIG ZENTRIERT
============================================================ */

.glossar-center-wrapper {
    display: flex;
    justify-content: center; /* zentriert das gesamte Paket */
    gap: 40px; /* Abstand zwischen Sidebar & Cards */
    max-width: 1200px; /* gesamte Breite */
    margin: 0 auto; /* Zentrierung */
    align-items: flex-start; /* gleiche Starthöhe */
    padding-top: 20px;
}

/* Sidebar */
.glossar-sidebar {
    position: sticky;
    top: 120px;
    background: white;
    padding: 20px 15px;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    width: 130px;
    height: fit-content;
}

    /* Sidebar Links */
    .glossar-sidebar a {
        display: block;
        margin: 4px 0;
        font-size: 16px;
        font-weight: 600;
        color: #232856;
        text-decoration: none;
    }

        .glossar-sidebar a:hover {
            color: #33cc33;
        }

/* Glossar Inhalt */
.glossar-content {
    max-width: 750px;
    width: 100%;
}

/* Mobile */
@media (max-width: 992px) {
    .glossar-center-wrapper {
        flex-direction: column;
    }

    .glossar-sidebar {
        display: none;
    }
}

/* =======================================================================
   4) PARTNER-LOGO LEISTE (FOOTER)
======================================================================= */

.partner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 35px;
    justify-items: center;
    align-items: center;
    margin: 30px 0;
}

    .partner-grid img {
        height: 80px;
        width: auto;
        filter: grayscale(100%);
        opacity: 0.7;
        transition: all 0.3s ease;
    }

        .partner-grid img:hover {
            filter: grayscale(0%);
            opacity: 1;
            transform: scale(1.06);
        }

/* 
   STARTSEITEN-LEISTUNGSBOXEN – 4-Spalten-Grid (modern & responsive)
============================================================================ */

/* Außenabstand / max Breite für Gutenberg-Gruppe */
.wp-block-group.alignwide {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 3rem;
}

/* Spalten-Container */
.wp-block-columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.5rem;
    margin-bottom: 3rem;
}

/* Jede Box */
.wp-block-column.link-box {
    flex: 1 1 calc(25% - 2.5rem);
    text-align: center;
    transition: transform 0.3s ease;
}

    .wp-block-column.link-box:hover {
        transform: scale(1.05);
    }

/* RESPONSIVE BREAKPOINTS */
@media (max-width: 1024px) {
    .wp-block-column.link-box {
        flex: 1 1 calc(50% - 2.5rem);
    }
}

@media (max-width: 768px) {
    .wp-block-column.link-box {
        flex: 1 1 100%;
    }
}

/* ================================
   FIX: Bildfenster quadratisch
   (Gutenberg überschreiben)
================================ */

/* Einheitliches quadratisches Bildfenster */
.link-box .wp-block-image,
.link-box figure.wp-block-image {
    aspect-ratio: 1 / 1 !important;
    overflow: hidden;
    border-radius: 4px;
}

/* Bilder */
.wp-block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

    .wp-block-image img:hover {
        transform: scale(1.06);
        box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    }

/* Titel der Boxen */
h4.wp-block-heading {
    margin-top: 1.2rem;
    color: #232856;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
}

.link-box a {
    color: #232856;
    text-decoration: none;
    display: block;
}

    .link-box a:hover h4 {
        color: #0073aa;
    }

/* =======================================================================
   6) HERO PARALLAX + SLIDER
======================================================================= */

.hero-parallax.hero-slider {
    height: 90vh;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-top: -240px !important; /* 60px weiter weg vom Top, solange Wellen sichtbar sind */
    z-index: 5;
}

.hero-parallax::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 1;
}

/* Hintergrundanimation */
.hero-slider {
    animation: bgFade 25s infinite alternate ease-in-out;
}

@keyframes bgFade {
    0% {
        background-image: url('/wp-content/uploads/2025/11/banner2-1.webp');
    }

    50% {
        background-image: url('/wp-content/uploads/2025/06/Firefly_Ein-Bild-mit-einem-Energieeffizienz-Experten-der-einen-Gebaeudeheizungsrohrnetz-unters-69615.webp');
    }

    100% {
        background-image: url('/wp-content/uploads/2021/06/bkontakt.jpg');
    }
}

/* =======================================================================
   7) HERO TEXT-SLIDER
======================================================================= */

.hero-slides-wrapper {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 900px;
    width: 100%;
    text-align: center;
    z-index: 1000;
}

.hero-slide {
    position: absolute;
    width: 100%;
    opacity: 0;
    transform: translateX(60px);
    transition: transform 1.2s ease, opacity 1.2s ease;
}

    .hero-slide.active {
        opacity: 1;
        transform: translateX(0);
    }

    .hero-slide.exit {
        opacity: 0;
        transform: translateX(-60px);
    }

/* =======================================================================
   8) HERO STATISCHE ELEMENTE (Telefonbox + CTA)
======================================================================= */

.hero-content-static {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 1000;
}

.hero-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    margin-bottom: 15px;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.4);
    font-family: 'Poppins', sans-serif;
}

.hero-sub {
    font-size: clamp(1rem, 2vw, 1.4rem);
    color: #eaeaea;
    margin-bottom: 25px;
    text-align: center;
    font-family: 'Poppins', sans-serif;
}

/* Telefonbox – Firmenblau */
.hero-contact-box {
    background: #000066 !important;
    padding: 8px 24px 0;
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 25px;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

    .hero-contact-box::before {
        content: "";
        position: absolute;
        left: -18px;
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-top: 14px solid transparent;
        border-bottom: 14px solid transparent;
        border-right: 18px solid #000066 !important;
    }

.hero-phone-label {
    display: block;
    font-size: 0.85rem;
    opacity: 0.9;
}

.hero-phone {
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 700;
    text-decoration: none !important;
}

    .hero-phone:hover {
        text-decoration: none !important;
        color: #33cc33;
    }

/* CTA-Button – Firmengrün */
.hero-btn {
    display: inline-block;
    background: #33B933 !important;
    padding: 10px 24px;
    border-radius: 6px;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: 10px;
    margin-left: 20px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.22);
}

    .hero-btn:hover {
        background: #2aa32a;
        transform: translateY(-3px) scale(1.02);
        box-shadow: 0 12px 28px rgba(0,0,0,0.28);
        color: #000066;
        text-decoration: none;
    }

.hero-contact-box:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 14px 30px rgba(0,0,0,0.30);
}

/* Mobile: Hero-Text + Boxen kompakter */
@media (max-width: 768px) {
    .hero-parallax.hero-slider {
        height: 75vh;
        background-attachment: scroll;
    }

    .hero-slides-wrapper {
        top: 34%;
        max-width: 100%;
        padding: 0 16px;
    }

    .hero-title {
        font-size: clamp(1.6rem, 6vw, 2.2rem);
        margin-bottom: 10px;
    }

    .hero-sub {
        font-size: clamp(0.95rem, 4vw, 1.1rem);
        margin-bottom: 16px;
    }

    .hero-content-static {
        bottom: 10px;
        width: 100%;
        padding: 0 8px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        align-items: stretch;
        justify-items: stretch;
    }

    .hero-contact-box {
        padding: 2px 8px 0;
        margin-bottom: 0;
        width: 100%;
        max-width: none;
        text-align: center;
        height: 100%;
        line-height: 1.05;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

        .hero-contact-box::before {
            display: none;
        }

    .hero-phone {
        font-size: 0.95rem;
        line-height: 1.05;
        display: block;
        margin-bottom: 2px;
    }

    .hero-btn {
        margin-left: 0;
        padding: 6px 8px;
        font-size: 0.95rem;
        width: 100%;
        max-width: none;
        display: block;
        text-align: center;
        line-height: 1.2;
        word-break: normal;
        overflow-wrap: normal;
        hyphens: none;
    }

    .hero-content-static p {
        margin: 0;
        width: 100%;
        max-width: none;
        height: 100%;
    }

    .hero-btn small {
        font-size: 0.75em;
    }

    .hero-phone-label {
        font-size: 0.8rem;
        line-height: 1.0;
        margin-bottom: 2px;
        display: block;
    }
}

@media (max-width: 480px) {
    .hero-slides-wrapper {
        top: 30%;
        padding: 0 10px;
        max-width: 320px;
    }

    .hero-content-static {
        bottom: 10px !important;
        max-width: 320px;
        margin: 0 auto;
        width: calc(100% - 16px);
        grid-template-columns: 46% 46%;
        justify-content: center;
        gap: 6px;
        align-items: end;
    }

    .hero-contact-box {
        padding: 4px 6px;
        min-height: 58px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 2px;
    }

        .hero-contact-box br {
            display: none !important;
        }

    .hero-phone-label {
        font-size: 0.6rem !important;
        line-height: 1 !important;
        margin: 0;
    }

    .hero-phone {
        font-size: 0.75rem !important;
        line-height: 1 !important;
        margin: 1px 0;
    }

    .hero-btn {
        padding: 6px 6px;
        min-height: 58px;
        font-size: 0.75rem !important;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .hero-btn small {
        font-size: 0.65em !important;
        margin-bottom: 2px;
    }

    /* Hard override in case of higher-specificity styles */
    .hero-content-static .hero-contact-box,
    .hero-content-static .hero-contact-box * {
        font-size: inherit !important;
    }

    .hero-content-static .hero-contact-box {
        font-size: 0.75rem !important;
    }

    .hero-content-static .hero-btn {
        font-size: 0.75rem !important;
    }

    .hero-title {
        font-size: 1.3rem !important;
        margin-bottom: 4px;
    }

    .hero-sub {
        font-size: 0.8rem !important;
        margin-bottom: 6px;
    }
}

/* Startseite: eigenes Fokuspunkting fuer den Hero */
body.home .hero-parallax.hero-slider {
    background-position: center 35%;
}

@media (max-width: 768px) {
    body.home .hero-parallax.hero-slider {
        background-position: 70% calc(14% + 170px);
        background-attachment: scroll;
    }
}

/* iPad Air (820x1180) */
@media (width: 820px) and (height: 1180px) {
    body.home .hero-parallax.hero-slider {
        /* Mitte ohne Raender: sauber croppen, kein Wiederholen */
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        background-attachment: scroll;
    }
}

/* iPad Pro 12.9" (1024x1366) */
@media (width: 1024px) and (height: 1366px) {
    body.home .hero-parallax.hero-slider {
        /* Mitte ohne Raender: sauber croppen, kein Wiederholen */
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        background-attachment: scroll;
    }
}

@media (max-width: 480px) {
    body.home .hero-parallax.hero-slider {
        background-position: 70% calc(16% + 170px);
    }
}

/* Header/Nav/Waves wurden in header-waves.css ausgelagert. */


/* ============================================
   SUBBANNER & WELLE: Abstaende angleichen (Full/Parallax)
   - Banner etwas nach oben ziehen, damit er in die Welle greift
   - Welle auf Unterseiten ohne zusaetzlichen Abstand
   - Ab 2400px Banner normal, Welle ausgeblendet
============================================ */
body.page-template-page-full-php .sub-banner-wrapper,
body.page-template-page-full .sub-banner-wrapper,
body.page-template-page-parallax .sub-banner-wrapper {
    margin-top: -70px; /* 100px weiter nach oben */
    z-index: 300;
}

/* Wellen: Overflow lokal clippen, ohne die Wellen selbst zu aendern */
.waves-clip {
    position: relative;
    height: 0;
    overflow-x: clip;
}

body.page-template-page-full-php .sub-banner-wrapper .sub-banner,
body.page-template-page-full .sub-banner-wrapper .sub-banner,
body.page-template-page-parallax .sub-banner-wrapper .sub-banner {
    margin-top: 0;
}

@media (max-width: 768px) {
    body.page-template-page-full-php .sub-banner-wrapper,
    body.page-template-page-full .sub-banner-wrapper,
    body.page-template-page-parallax .sub-banner-wrapper {
        margin-top: 70px; /* 60px hoeher als vorher */
    }
}

@media (max-width: 700px) {
    body.page-template-page-parallax .sub-banner-wrapper {
        margin-top: 30px; /* 40px näher zum Top */
    }
}

body.page-template-page-full-php .waves,
body.page-template-page-full .waves,
body.page-template-page-parallax .waves,
body.home .waves {
    position: absolute;
    top: 100px; /* Wellen auf Unterseiten weiter nach unten */
    left: 0;
    right: 0;
    width: 100%;
    height: 220px;
    z-index: 900;
    margin-top: 0;
    overflow: visible;
    pointer-events: none;
    display: block !important;
}

body.page-template-page-full-php .waves::after,
body.page-template-page-full .waves::after,
body.page-template-page-parallax .waves::after,
body.home .waves::after {
    bottom: 60px; /* Hauptwelle */
}

body.page-template-page-full-php .waves::before,
body.page-template-page-full .waves::before,
body.page-template-page-parallax .waves::before,
body.home .waves::before {
    bottom: 5px; /* Welle 2 25px nach oben */
}

body.page-template-page-full-php .waves .wave3,
body.page-template-page-full .waves .wave3,
body.page-template-page-parallax .waves .wave3,
body.home .waves .wave3 {
    bottom: 65px; /* Welle 3 25px nach oben */
}

@media (max-width: 760px) {
    .waves-clip {
        overflow: visible;
    }

    body.page-template-page-full-php .waves,
    body.page-template-page-full .waves,
    body.page-template-page-parallax .waves,
    body.home .waves {
        top: 0;
        margin-top: 0;
        height: 90px;
        overflow: visible;
    }

    body.page-template-page-full-php .waves::after,
    body.page-template-page-full .waves::after,
    body.page-template-page-parallax .waves::after,
    body.home .waves::after {
        height: 90px;
        bottom: 0;
    }

    body.page-template-page-full-php .waves::before,
    body.page-template-page-full .waves::before,
    body.page-template-page-parallax .waves::before,
    body.home .waves::before {
        height: 90px;
        top: 40px;
        width: 520%;
        background-size: 520% 150%;
    }

    body.page-template-page-full-php .waves .wave3,
    body.page-template-page-full .waves .wave3,
    body.page-template-page-parallax .waves .wave3,
    body.home .waves .wave3 {
        height: 90px;
        top: 20px;
        width: 450%;
        background-size: 450% 100%;
    }
}

@media (min-width: 2300px) {
    body.page-template-page-full-php .sub-banner-wrapper,
    body.page-template-page-full .sub-banner-wrapper,
    body.page-template-page-parallax .sub-banner-wrapper {
        margin-top: -70px; /* 100px weiter nach oben */
    }

    body.page-template-page-full-php .waves,
    body.page-template-page-full .waves,
    body.page-template-page-parallax .waves,
    body.home .waves {
        display: none !important;
    }
}

/* ============================================================================
   Firmenblauer Abschnitt für die Leistungs-Boxen
   (wirkt nur auf: <div class="wp-block-columns leistungen-blau">)
============================================================================ */

/* Blaue Sektion – gleiche Breite wie der restliche Inhalt */
.wp-block-columns.leistungen-blau {
    background: #ffffff; /* Firmenblau */
    color: #000000; /* Standardschriftfarbe in diesem Bereich */
    padding: 4rem 3rem;
    margin: 0 -3rem; /* gleicht das padding der Gruppe aus,
                                 damit Blau bis zum Content-Rand geht */
    box-sizing: border-box;
}

    /* Schrift sofort weiß, nicht nur bei Hover */
    .wp-block-columns.leistungen-blau h4,
    .wp-block-columns.leistungen-blau p,
    .wp-block-columns.leistungen-blau a,
    .wp-block-columns.leistungen-blau .wp-block-heading {
        color: #000000 !important;
    }

    /* Hover-Farbe der Überschriften */
    .wp-block-columns.leistungen-blau .wp-block-column:hover h4 {
        color: #33CC33 !important;
    }

    /* Einheitliche Bildhöhen nur in dieser Sektion */
    .wp-block-columns.leistungen-blau .wp-block-column figure {
        aspect-ratio: 4 / 3;
        overflow: hidden;
        border-radius: 4px;
    }

    .wp-block-columns.leistungen-blau .wp-block-column img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* ============================================================================
               UNTERNEHMENSPORTRAIT_ TEAM SLIDER OUTER WRAPPER
============================================================================ */
/* --- TEAM SLIDER OUTER WRAPPER --- */
.zd-team-slider {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto; /* Start genau wie linker Block */
    padding-top: 0 !important;
    display: flex;
    align-items: flex-start; /* gleiche Höhe wie links */
    overflow: hidden;
}

/* --- INNER TRACK (alle Slides nebeneinander) --- */
.zd-team-slider-wrapper {
    display: flex;
    transition: transform 0.6s ease;
    width: 100%;
}

/* --- EINZELNER SLIDE --- */
.zd-slide {
    min-width: 100%;
    padding: 20px 40px;
    background: #fff;
    text-align: left; /* zentrale Änderung */
}

    /* --- BILD (vergrößert) --- */
    .zd-slide img,
    .zd-team-img {
        width: 420px; /* größer */
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto 20px auto;
    }

    /* --- NAME / ROLLE (links statt zentriert) --- */
    .zd-slide h3,
    .zd-team-name {
        font-size: 30px;
        color: #232856;
        margin-bottom: 5px;
        text-align: left !important;
    }

    .zd-slide .role,
    .zd-team-role {
        color: #757676;
        font-style: italic;
        margin-bottom: 20px;
        text-align: left !important;
    }

    /* --- LISTE LINKS --- */
    .zd-slide ul,
    .zd-team-list {
        list-style: none;
        padding-left: 20px;
        text-align: left !important;
    }

        .zd-slide li,
        .zd-team-list li {
            position: relative;
            padding-left: 26px;
            margin-bottom: 8px;
            text-align: left !important;
        }

            /* Grüner Pfeil */
            .zd-slide li::before,
            .zd-team-list li::before {
                content: "\f0da";
                font-family: "FontAwesome";
                font-size: 18px;
                color: #33cc33;
                position: absolute;
                left: 0;
                top: 4px;
            }

/* --- NAVIGATION BUTTONS --- */
.zd-prev,
.zd-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: #fff;
    width: 50px;
    height: 50px;
    font-size: 34px;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    cursor: pointer;
    z-index: 10;
}

.zd-prev {
    left: 10px;
}

.zd-next {
    right: 10px;
}

/* --- PAGINATION --- */
.zd-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

    .zd-pagination span {
        width: 12px;
        height: 12px;
        background: #bbb;
        border-radius: 50%;
        display: inline-block;
        cursor: pointer;
    }

    .zd-pagination .active {
        background: #33cc33;
    }

/* ============================================
   SUBBANNER - Full-Width (Unterseiten)
============================================ */

.sub-banner-wrapper {
    margin-top: 0px; /* Abstand unter dem Menü */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Banner selbst */
.sub-banner {
    width: 100%;
    height: 520px;
    overflow: hidden;
    border-radius: 0; /* Full-Width ohne "Karten"-Look */
}

/* Bild im Banner */
.sub-banner-image {
    width: 100%;
    height: 100%;
    background-size: cover; /* klassisch: füllt die Fläche */
    background-repeat: no-repeat;
    background-position: center center;
}

/* Parallax nur auf dem Parallax-Template */
body.page-template-page-parallax .sub-banner-image {
    background-attachment: fixed;
}

/* Responsive Fokuspunkte + Höhen für Banner/Parallax */
@media (max-width: 1200px) {
    .sub-banner {
        height: 440px;
    }

    .sub-banner-image {
        background-position: center 35%;
    }

    .hero-parallax.hero-slider {
        background-position: center 35%;
    }
}

@media (max-width: 992px) {
    .sub-banner {
        height: 380px;
    }

    .sub-banner-image {
        background-position: center 30%;
    }

    .hero-parallax.hero-slider {
        background-position: center 30%;
    }
}

@media (max-width: 768px) {
    .sub-banner {
        height: 300px;
    }

    .sub-banner-image {
        background-position: center 25%;
    }

    body.page-template-page-parallax .sub-banner-image {
        background-attachment: scroll;
    }

    .hero-parallax.hero-slider {
        background-position: center 25%;
    }
}

@media (max-width: 480px) {
    .sub-banner {
        height: 240px;
    }

    .sub-banner-image {
        background-position: center 20%;
    }

    .hero-parallax.hero-slider {
        background-position: center 20%;
    }
}



/* Mobile Nav wird zentral in header-waves.css gesteuert. */

/* ============================================
   MOBILE TYPO: sauberer Wortumbruch
   - verhindert "Break-All" mitten im Wort
   - deaktiviert Blocksatz auf kleinen Screens
============================================ */
@media (max-width: 768px) {
    /* viele Gutenberg-Layouts liegen in `.container` / `.row` / `.col-*` */
    .container,
    .container p,
    .container li,
    .container a,
    .container h1,
    .container h2,
    .container h3,
    .container h4,
    .container h5,
    .container h6,
    .container figcaption,
    .container div,
    .container span,
    section p,
    section li,
    section a,
    section h1,
    section h2,
    section h3,
    section h4,
    section h5,
    section h6,
    section figcaption,
    section div,
    section span {
        word-break: normal !important;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    .container p,
    section p {
        text-align: left;
        word-spacing: normal;
    }
}

/* Header-Transparenz wird zentral in header-waves.css gesteuert. */

/* ============================================
   ZD-CHATBOT
 ============================================ */

/* --- Chat-Container --- */
#zd-chat {
    position: fixed;
    right: 24px; /* etwas mehr Abstand */
    bottom: 24px;
    width: 360px; /* größer als vorher */
    max-height: 520px; /* höher */
    background: #ffffff;
    border-radius: 18px; /* weicher */
    border: 1px solid #33CC33;
    box-shadow: 0 25px 50px rgba(0,0,0,.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 9999;
    font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* --- Header --- */
#zd-chat-header {
    background: linear-gradient(135deg, #33CC33, #28aa28);
    color: #ffffff;
    padding: 14px 16px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    /* NEU: Layout wie LineMetrics */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.zd-chat-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

#zd-chat-close {
    margin-left: auto;
    background: rgba(255,255,255,0.16);
    border: none;
    color: #ffffff;
    font-size: 20px;
    line-height: 1;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

#zd-chat-close:hover {
    background: rgba(255,255,255,0.25);
    transform: scale(1.03);
}

    /* Logo im Header (optional, falls vorhanden) */
    #zd-chat-header img {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: #ffffff;
        padding: 3px;
    }

/* --- Chat Body --- */
#zd-chat-body {
    flex: 1;
    padding: 14px;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.45;
    color: #1f2937;
}

/* Antworten: gleiche Schriftgroesse wie Eingabe */
#zd-chat-body .zd-chat-card,
#zd-chat-body .zd-chat-card h1,
#zd-chat-body .zd-chat-card h2,
#zd-chat-body .zd-chat-card h3,
#zd-chat-body .zd-chat-card h4,
#zd-chat-body .zd-chat-card h5,
#zd-chat-body .zd-chat-card h6,
#zd-chat-body .zd-chat-card p,
#zd-chat-body .zd-chat-card ul,
#zd-chat-body .zd-chat-card ol,
#zd-chat-body .zd-chat-card li,
#zd-chat-body .zd-chat-card strong,
#zd-chat-body .zd-chat-card em {
    font-size: inherit;
    line-height: inherit;
}

    /* Einzelne Nachrichten */
    #zd-chat-body div {
        margin-bottom: 10px;
    }

    /* Bot-Links */
    #zd-chat-body a {
        color: #0b5ea8;
        text-decoration: underline;
    }

        #zd-chat-body a:hover {
            text-decoration: none;
        }

/* --- Eingabefeld --- */
#zd-chat-input {
    border: none;
    border-top: 1px solid #e5e7eb;
    padding: 14px;
    font-size: 14px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}

/* ============================================
   Chat-Buttons (für Formular-CTAs)
============================================ */

.zd-chat-card {
    background: #f3f4f6;
    padding: 12px;
    border-radius: 12px;
    margin: 8px 0;
}

.zd-chat-btn {
    display: inline-block;
    margin-top: 8px;
    background: #33CC33;
    color: #242424;
    border: none;
    padding: 9px 16px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}

    .zd-chat-btn:hover {
        background: #28aa28;
    }

/* ============================================
   OPTIONAL: Einklappbare Chat-Bubble
============================================ */

#zd-chat-toggle {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    background: #33CC33;
    color: #ffffff;
    border-radius: 50%;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9998;
}

/* Wenn Chat eingeklappt */
#zd-chat.closed {
    display: none;
}

/* ============================================
   FORMULAR OVERLAY
============================================ */

#zd-form-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    display: none;
    z-index: 10000;
    overflow-x: hidden;
}

    #zd-form-overlay.active {
        display: flex;
        align-items: center;
        justify-content: center;
    }

.zd-form-inner {
    background: #fff;
    width: 95%;
    max-width: min(1300px, 95vw); /* große Formulare (ISFP!) */
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 16px;
    padding: 24px 28px;
    box-sizing: border-box;
    position: relative;
}

#zd-form-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10002;
    background: #fff;
    border-radius: 50%;
    padding: 4px 10px;
    cursor: pointer;
    line-height: 1;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* ZD Offer Modals: Close-Button immer ueber Formular-Header */
.zd-offer-modal__panel {
    position: relative;
}

.zd-offer-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10002;
    line-height: 1;
}

/* ============================================
   RESPONSIVE
============================================ */
@media (max-width: 480px) {
    #zd-chat {
        right: 12px;
        bottom: 12px;
        width: calc(100% - 24px);
        max-height: 70vh;
    }
}

@media (max-width: 768px) {
    .zd-form-inner {
        width: 98%;
        max-width: none;
        padding: 16px;
    }

    #zd-chat-toggle {
        width: 72px;
        height: 72px;
        font-size: 20px;
        right: 16px;
        bottom: 16px;
    }
}


/* ============================================
   CHAT BUBBLE (LineMetrics-Style)
============================================ */
#zd-chat-toggle {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #33CC33, #28aa28);
    color: #ffffff;
    border-radius: 50%;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9998;
    box-shadow: 0 15px 30px rgba(0,0,0,.25);
}

/* Chat zunächst versteckt */
#zd-chat {
    display: none;
}

/* ============================================
   CHAT ANIMATION
============================================ */
    #zd-chat.open {
        display: flex;
        animation: zdChatIn .35s ease-out forwards;
    }

@keyframes zdChatIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ============================================
   ZD CHAT – INFO LINKS CLICK FIX
============================================ */

#zd-chat a.zd-chat-link {
    pointer-events: auto !important;
    cursor: pointer;
    display: inline-block;
    z-index: 10;
}

/* ====================================================
   BILDER DIE SICH RECHTS NEBEN TEXT EINORDNEN SOLLEN
==================================================== */
.image-right {
    float: right;
    max-width: 300px;
    width: 100%;
    height: auto;

    margin: 0 0 20px 30px; /* Abstand zum Text links & unten */
}

/* Wichtig: Float sauber beenden */
.image-right::after {
    content: "";
    display: table;
    clear: both;
}

@media (max-width: 768px) {
    .image-right {
        float: none;
        display: block;
        margin: 0 auto 20px auto;
        max-width: 100%;
    }
}

/* ====================================================
   DAS ULV-BILD AUF DER PRÄQUALIFIKATIONSSEITE
   (BEWUSST OHNE FLOAT!)
==================================================== */
.ulv-image {
    max-width: 300px;
    width: 100%;
    height: auto;

    display: block;
    margin: 20px auto; /* zentriert, kein Einfluss auf Text */
}

/* (entfernt: alter Font-Override + Lastgang-Codeleiche) */

/* (entfernt: Font-Override am Ende nicht mehr nötig) */

/* -----------------------------------------------------------------------
   Header logo: stick to first wave, responsive sizing
   ----------------------------------------------------------------------- */

/* Logo-Positionierung wird zentral in header-waves.css gesteuert. */

/* ==============================================================================================================
   Lastganganalyse-Tool - HERO CTA (FINAL)
   ============================================================================================================== */

.lastganganalyse-cta {
  background: linear-gradient(
    180deg,
    #39cc2f 0%,
    #2f792f 60%,
    #325732 100%
  );

  /* Typo-Reset NUR für diese Section */
  line-height: normal;

  /* vorher: padding: 120px 24px; */
  padding: 100px 24px 64px;
  margin-bottom: 0;
}

/* Alle Links in der CTA bekommen eine saubere Basis */
.lastganganalyse-cta a {
  line-height: 1.2;
}

/* Grid / Layout */
.lastganganalyse-cta .cta-inner {
  max-width: 1200px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 64px;
  align-items: center;
}

/* Primärer Button – endgültig stabil */
.lastganganalyse-cta .cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 1rem;
  line-height: 1.2;
  padding: 10px 22px;

  box-sizing: border-box;
}

body.page-id-XXXX .lastganganalyse-cta .wp-block-button__link {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  line-height: 1.2 !important;
}

/* =========================
   Linke Spalte (Text)
   ========================= */

.cta-col-text {
  max-width: 560px;
}

/* =========================
   HERO PRODUKT-ÜBERSCHRIFT
   ========================= */

.cta-hero-title {
  margin-bottom: 28px;
}

/* kleine Einleitung */
.cta-hero-eyebrow {
  display: inline-block;
  margin-bottom: 10px;

  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Headline */
.cta-hero-headline {
  margin: 0;

  font-size: clamp(3rem, 6vw, 4.6rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;

  color: #ffffff;

  text-shadow:
    0 20px 40px rgba(0, 0, 0, 0.35),
    0 0 40px rgba(57, 204, 47, 0.45);
}

/* 2026 Badge */
.cta-hero-year {
  display: inline-block;
  margin-left: 12px;
  padding: 8px 18px;

  font-size: 0.45em;
  font-weight: 900;
  letter-spacing: 0.2em;

  border-radius: 999px;

  background: #ffffff;
  color: #2b7a2b;

  vertical-align: middle;

  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.3);
}

/* =========================
   Beschreibung
   ========================= */

.cta-description {
  color: #f1f1f1;
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 28px; /* vorher 36px → kompakter */
}

/* =========================
   Buttons – vertikal perfekt zentriert (kontext-sicher)
   ========================= */

.cta-actions {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.cta-primary {
  background: #ffffff;
  color: #2b7a2b;

  /* explizit gesetzt → keine Vererbung aus Page-Templates */
  font-size: 1rem;
  line-height: 1.25;

  /* optisch perfekte Vertikalzentrierung */
  padding: 8px 22px 9px;

  border-radius: 12px;
  font-weight: 600;
  text-decoration: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
  white-space: nowrap;
}

.cta-primary:hover {
  background: #f2f2f2;
}

.cta-secondary {
  color: #ffffff;
  font-weight: 600;
  text-decoration: underline;
}

.cta-secondary:hover {
  text-decoration: none;
}

/* =========================
   Rechte Spalte (Bild) – Hover Effekt
   ========================= */

.cta-col-image img {
  width: 100%;
  max-width: 460px;
  display: block;
  margin-left: auto;

  transition:
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.lastganganalyse-cta:hover .cta-col-image img {
  transform: scale(1.05);
}

/* =========================
   Mobile
   ========================= */

@media (max-width: 900px) {
  .lastganganalyse-cta {
    padding: 72px 20px 56px;
  }

  .lastganganalyse-cta .cta-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .cta-col-text {
    max-width: none;
  }

  .cta-hero-title {
    text-align: center;
  }

  .cta-actions {
    justify-content: center;
  }

  .cta-col-image img {
    margin: 40px auto 0;
  }
}

/* =========================================================
   Visual Feature Section (wiederverwendbar)
   ========================================================= */

.visual-feature-section {
  padding: 10px 24px;
  background: #ffffff;
}

/* =========================
   Hero-Bereich
   ========================= */

.visual-feature-hero {
  max-width: 1200px;
  margin: 0 auto 20px;
  text-align: center;
}

.visual-feature-hero img {
  max-width: 900px;
  width: 100%;
  margin: 0 auto 32px;
  display: block;
}

.visual-feature-hero h2 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin-bottom: 12px;
}

.visual-feature-hero p {
  max-width: 720px;
  margin: 0 auto;
  font-size: 1.1rem;
  line-height: 1.6;
}

/* =========================
   3-Spalten-Grid
   ========================= */

.visual-feature-grid {
  max-width: 1200px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}

/* Einzelne Box */
.visual-feature-item {
  text-align: center;
}

.visual-feature-item img {
  height: 160px;        /* vorher 72px → jetzt ca. doppelt */
  width: auto;
  margin: 0 auto 24px; /* horizontal mittig + Abstand nach unten */
  display: block;
  transition: transform 0.35s ease;
}

.visual-feature-item:hover img {
  transform: scale(1.06);
}

.visual-feature-item h3 {
  margin-bottom: 12px;
  font-size: 1.25rem;
}

.visual-feature-item ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.visual-feature-item li {
  margin-bottom: 6px;
  font-size: 1rem;
  line-height: 1.4;
}

/* =========================
   Mobile
   ========================= */

@media (max-width: 900px) {
  .visual-feature-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ===============================
   ZD Services – Bootstrap Version
================================ */

.zd-services {
  padding: 4rem 0;
}

/* Header über den Services */
.zd-services-header {
  margin-bottom: 3rem;
}

.zd-services-intro {
  color: #555;
  line-height: 1.6;
}
/* Card */
.zd-service-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 2rem;

  text-align: center;

  height: 100%;

  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.zd-service-card svg {
  max-width: 100%;
  height: auto;
}

.zd-service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(0,0,0,0.1);
}

/* Icon */
.zd-service-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 1.25rem;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #0b3c5d;
}

.zd-service-icon svg {
  width: 100%;
  height: 100%;
}

/* Headline */
.zd-service-card h3 {
  font-size: 1.25rem;
  margin: 0 0 0.75rem;
  color: #0b3c5d;
}

/* Liste */
.zd-service-card ul {
  margin: 0;
  padding-left: 1.2rem;
  text-align: left;
}

.zd-service-card li {
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

.zd-service-icon svg {
  width: 48px;
  height: 48px;
  display: block;
  margin: 0 auto;
}

/* Nav-Abstaende werden zentral in header-waves.css gesteuert. */

/* =====================================================================================================
                         Reusable Media+Text Section (Bootstrap + GridBulletin friendly) 
                         ================================================================================= */

.gb-media-section{
  --gb-radius: 18px;
  --gb-gap: 14px;
  --gb-shadow: 0 12px 30px rgba(0,0,0,.10);
  --gb-border: 1px solid rgba(0,0,0,.08);
}

.gb-media-section .gb-eyebrow{
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .85rem;
  opacity: .75;
  margin-bottom: .4rem;
}

.gb-media-section .gb-title{
  margin-bottom: .75rem;
}

.gb-media-section .gb-lead{
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* Liste */
.gb-media-section .gb-list{
  padding-left: 1.1rem;
  margin: 0;
}
.gb-media-section .gb-list li{
  margin: .35rem 0;
}

/* Bilder: Stack (mehrere übereinander) */
.gb-media-section .media-stack{
  display: grid;
  gap: var(--gb-gap);
  width: 100%;
}

/* Einzelnes Bild */
.gb-media-section .media-item{
  margin: 0;
  border-radius: var(--gb-radius);
  overflow: hidden;
  border: var(--gb-border);
  box-shadow: var(--gb-shadow);
  background: #fff;
}

.gb-media-section .media-item img{
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  /* moderne, stabile Bildwirkung */
  aspect-ratio: auto;
  object-fit: contain;
}

/* Option: wenn du mal nur EIN Bild hast, bleibt es automatisch korrekt */

/* Vertikale Zentrierung: Bild mittig zur Textspalte */
.gb-media-section .gb-media-col{
  display: flex;
  align-items: center;
}

/* Switch: Bild links/rechts (Bootstrap Order) */
.gb-media-section.media-right .gb-media-col{
  order: 2;
}
.gb-media-section.media-right .gb-text-col{
  order: 1;
}

/* Auf Mobile immer Media oben, Text unten */
@media (max-width: 991.98px){
  .gb-media-section.media-right .gb-media-col,
  .gb-media-section.media-right .gb-text-col{
    order: initial;
  }
}

/* =========================
ZD – Moderne Entscheidungstabellen
========================= */

.zd-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,0.06);
  margin-top: 1.5rem;
}

.isfp-example-table .zd-table td {
  text-align: center;
}

.isfp-example-table .zd-table td:first-child {
  text-align: left;
  font-weight: 600;
}

.zd-table thead {
  background: #f3f5f8;
}

.zd-table th,
.zd-table td {
  padding: 1rem 1.25rem;
  vertical-align: top;
}

.zd-table th {
  font-weight: 600;
  color: #232856;
  font-size: 0.95rem;
  text-align: center;
}

.zd-table tbody tr:not(:last-child) td {
  border-bottom: 1px solid #e6e9ef;
}

.zd-table tbody tr:hover {
  background: #f9fbff;
}

.zd-table .highlight {
  font-weight: 600;
  color: #1a7f37;
}
.zd-table .highlight::before {
  content: "✓ ";
  color: #33cc33;
}
.zd-table .no-highlight {
  color: #999999;
}

/* =======================================================================
   ZD Tabellen – Mobile Lesbarkeit
======================================================================= */
.isfp-example-table .table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  .isfp-example-table .zd-table {
    min-width: 720px; /* verhindert Wortbruch in Spalten */
  }

  .isfp-example-table .zd-table th,
  .isfp-example-table .zd-table td {
    font-size: 0.9rem;
    padding: 0.75rem 0.85rem;
    white-space: nowrap;
  }
}

/* ======================================================================================================
                                                    FAQ SECTION
======================================================================================================== */

.faq-section {
  padding: 60px 0;
}

.faq-list {
  max-width: 900px;
  margin: 0 auto;
}

/* Einzelnes FAQ */
.faq-item {
  background: #ffffff;
  border-radius: 8px;
  margin-bottom: 12px;
  border: 1px solid rgba(0,0,0,0.08);
  overflow: hidden;
}

/* WICHTIG: summary explizit stylen */
.faq-item summary {
  cursor: pointer;
  padding: 18px 22px;
  font-size: 1.05rem;        /* <-- FIX */
  font-weight: 500;          /* <-- FIX */
  color: #232856;            /* Firmenblau */
  list-style: none;
  display: flex;
  align-items: center;
  background: #ffffff;
}

/* Entfernt Browser-Marker */

/* Restore wide content width if a plugin-enqueued stylesheet was providing it. */
:root {
    --wp--style--global--content-size: 1250px;
    --wp--style--global--wide-size: 1400px;
}

body .entry-content,
body .wp-block-post-content {
    width: 100%;
    max-width: 1250px;
  margin-left: auto;
  margin-right: auto;
}

body .entry-content > *,
body .wp-block-post-content > * {
  max-width: 100%;
}

/* Override default block max-width that can narrow content in classic themes. */
body .entry-content .wp-block,
body .wp-block-post-content .wp-block {
  max-width: 100% !important;
  width: 100%;
}

body .entry-content .alignwide,
body .wp-block-post-content .alignwide {
  max-width: 1250px;
  margin-left: auto;
  margin-right: auto;
}

body .entry-content .alignfull,
body .wp-block-post-content .alignfull {
  max-width: none;
  width: 100%;
}

/* Override block layout constraints that can force narrow columns. */
body .is-layout-constrained,
body .is-layout-flow {
  max-width: none;
}

body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
body .is-layout-flow > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: 1250px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

body .is-layout-constrained > .alignwide,
body .is-layout-flow > .alignwide {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}

/* Plus / Minus */
.faq-item summary::after {
  content: "+";
  font-size: 1.6rem;
  font-weight: 400;
  margin-left: auto;
  color: #232856;
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
  content: "–";
}

/* Antwort */
.faq-answer {
  padding: 0 22px 20px 22px;
}

.faq-answer p {
  margin: 0;
  font-size: 1rem;          /* <-- FIX */
  line-height: 1.6;
  color: #333;
}

/* Hover */
.faq-item summary:hover {
  background-color: #f6f7f9;
}

/* FAQ Überschrift */

.faq-heading {
    font-family: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(0.86rem, 1.44vw, 1.73rem);
    font-weight: 600;
    line-height: 1.25;
    color: #232856;
    text-align: center;
}

/* ============================================================
   HERO MOBILE OVERRIDE (locked layout for iPhone SE)
============================================================ */
@media (max-width: 480px) {
    body.home .hero-parallax.hero-slider {
        height: 70vh;
    }

    body.home .hero-slides-wrapper {
        top: 54%;
        left: 50%;
        width: calc(100% - 20px);
        max-width: 320px;
        padding: 0 10px;
        transform: translate(-50%, -50%);
        text-align: center;
        z-index: 6;
    }

    body.home .hero-title,
    body.home .hero-sub {
        display: block;
        opacity: 1;
        color: #ffffff;
        text-shadow: 0 2px 8px rgba(0,0,0,0.5);
    }

    body.home .hero-content-static {
        bottom: 10px;
        left: 50%;
        width: calc(100% - 20px);
        max-width: 320px;
        margin: 0 auto;
        transform: translateX(-50%);
        display: grid;
        grid-template-columns: 46% 46%;
        justify-content: center;
        gap: 6px;
        font-size: 12px;
    }

    body.home .hero-content-static p {
        margin: 0;
    }


    body.home .hero-contact-box,
    body.home .hero-btn {
        padding-top: 1px !important;
        padding-bottom: 1px !important;
        padding-left: 6px;
        padding-right: 6px;
        min-height: 75px !important;
        height: 75px !important;
        font-size: 1em;
        text-align: center;
    }

    body.home .hero-contact-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 2px;
        min-height: 75px !important;
        height: 75px !important;
        transform: translateY(10px);
    }

    body.home .hero-contact-box br {
        display: none !important;
    }

    body.home .hero-phone-label {
        font-size: 0.8em;
        line-height: 1;
        margin: 0;
    }

    body.home .hero-phone {
        font-size: 1em;
        line-height: 1.05;
        margin: 9px 0 1px;
    }

    body.home .hero-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        line-height: 1.2;
        min-height: 75px !important;
        height: 75px !important;
    }

    body.home .hero-btn small {
        font-size: 0.75em;
    }
}

@media (max-width: 400px) {
    body.home .hero-parallax.hero-slider {
        margin-top: -190px !important; /* 50px mehr Abstand nach oben */
    }
}

/* Short-height devices: keep slider text below waves */
@media (max-width: 480px) and (max-height: 700px) {
    body.home .hero-slides-wrapper {
        top: 62%;
    }
}

/* ============================================
   ZD Heading: Mobile-Downscaling
============================================ */
@media (max-width: 768px) {
    h1.zd-heading {
        font-size: 28px;
        margin-top: 16px;
    }

    h2.zd-heading {
        font-size: 24px;
        margin-top: 36px;
    }

    h3.zd-heading {
        font-size: 20px;
        margin-top: 28px;
    }

    h4.zd-heading {
        font-size: 17px;
        margin-top: 22px;
    }

    .zd-heading-line {
        width: 44px;
        margin-top: 8px;
        margin-bottom: 20px;
    }
}

/* ============================================
   Weitere Standard-Headlines: Mobile-Downscaling
============================================ */
@media (max-width: 768px) {
    .gb-title {
        font-size: 22px;
        line-height: 1.25;
    }

    .cta-hero-headline {
        font-size: clamp(2.1rem, 7vw, 2.6rem);
        line-height: 1.05;
    }

    .faq-heading {
        font-size: clamp(1.1rem, 4.6vw, 1.5rem);
        line-height: 1.25;
    }

    .usp-section h2 {
        font-size: 24px;
        line-height: 1.25;
    }

    .cta-offer .cta-text {
        font-size: 1.05rem;
        line-height: 1.4;
    }
}

/* CTA button text always centered */
.cta-offer a.cta-button {
    text-align: center;
}

/* iPhone SE / 375x667: hide boxes */
@media (width: 375px) and (height: 667px) {
    body.home .hero-content-static {
        display: none !important;
    }
}

/* Nest Hub (1024x600) */
@media (min-width: 900px) and (max-width: 1200px) and (max-height: 700px) {
    body.home .hero-slides-wrapper {
        top: 58%;
    }

    body.home .hero-content-static {
        display: none !important;
    }
}

/* Nest Hub Max (1280x800) */
@media (min-width: 1201px) and (max-width: 1400px) and (max-height: 850px) {
    body.home .hero-slides-wrapper {
        top: 54%;
    }

    body.home .hero-content-static {
        display: none !important;
    }
}

/* Kontaktbereich */
.contact-section {
  background: #f7f9fb;
  padding: 4rem 0;
}

/* Map Container */
.map-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

/* Iframe sauber skalieren */
.map-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}