@charset "UTF-8";
/*
Theme Name: Hülshoff
Theme URI: http://www.kundenurl.de/
Author: SIGN+DESIGN Werbeagentur
Author URI: https://www.signunddesign.com/
Description: Wozu lange um den „heißen Brei" reden: Unser Ziel ist Ihr Erfolg! Denn nur erfolgreiche Kunden sind auf Dauer glückliche Kunden. Und um Sie glücklich zu machen, richten wir unsere Energie auf Ihren stimmigen Auftritt und die Entwicklung zielführender Kommunikationsmaßnahmen. Werbung darf bei uns Spaß machen und ist trotzdem niemals Selbstzweck. Was zählt ist Ihr Erfolg! Die Früchte unserer Bemühungen: treue, langjährige Kunden und zahlreiche Weiterempfehlungen – mit ein Grund dafür, dass viele unserer Kunden aus dem Bereich Immobilien stammen. Und hier liegt auch seit über 20 Jahren ein Schwerpunkt unserer Arbeit.
Version: 2.1
*/

/* ========================================
   GLOBAL RESET
   ======================================== */

body, html, h1, h2, h3, h4, h5, h6, p, ul, ol, li {padding: 0;margin: 0;}
body, html {overflow: unset;width: 100%;-webkit-font-smoothing: antialiased;-webkit-overflow-scrolling: touch;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}

/* ========================================
   CSS VARIABLES
   ======================================== */

* {
    /* Typography */
    --font-family: "Open Sans", sans-serif;
    --font-size: 16px;
    --line-height: calc(var(--font-size) * 1.8);

    /* Layout */
    --wrp-width: 1240px;
    --header-height: 118px;  /* Höhe des fixierten Headers */
    --submenu-offset: 84px;  /* Offset für Desktop-Submenu */
    --section-pad: 80px;

    /* Colors */
    --primary-color: #009fe3;
    --secondary-color: #009fe3;
    --text-color: #515151;
    --bg-white: #fff;
    --bg-light-gray: #f5f5f5;
    --bg-lighter-gray: #f8f8f8;
    --bg-gray: #efefef;
    --border-gray: #dedede;
    --icon-gray: #a4a4a4;
    --text-dark: #555;

    /* Effects */
    --transition: .2s ease;
    --box-shadow: 0px 5px 13px 0px rgba(0, 0, 0, 0.3);
    --border-radius: 15px;
}

/* ========================================
   GLOBAL STYLES
   ======================================== */

html {scroll-behavior: smooth;}
body {font-size: var(--font-size);font-family: var(--font-family), sans-serif;line-height: var(--line-height);color: var(--text-color);}
body.nav-open {overflow: hidden;}
img {-ms-interpolation-mode: bicubic;vertical-align: bottom;}
svg {width: 100%;height: 100%;}
hr {border: none;height: 1px;background: #ddd;margin: 0;}
.wrp {max-width: var(--wrp-width);width: 90%;margin: 0 auto;position: relative;box-sizing: border-box;}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Margins */
.mb {margin-bottom: 100px;}
.mb50 {margin-bottom: 50px;}

/* ========================================
   TYPOGRAPHY
   ======================================== */

h1, h2, h3, h4 {margin: 0;font-family: var(--font-family);}
h1 {font-size: 52px;font-weight: 800;line-height: 1.1;letter-spacing: -0.5px;}
.home h1 {font-size: clamp(54px, 4.24vw, 86px);font-weight: 600;line-height: 1.1;letter-spacing: -0.5px;}
.home h1 strong {font-size: clamp(54px, 4.24vw, 86px);font-weight: 800;color: var(--secondary-color);}
h2 {font-size: 40px;font-weight: 800;line-height: 1.15;letter-spacing: -0.3px;margin-bottom: 15px;}
h3 {font-size: 18px;font-weight: 700;line-height: 1.3;margin-bottom: 10px;}
a {text-decoration: none;outline: none;color: var(--text-color);transition: var(--transition);}
a:hover {color: var(--secondary-color);transition: var(--transition);}
.btn {
    padding: 13px 28px;
    background: var(--primary-color);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    margin-top: 0;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    white-space: nowrap;
}
.btn:hover {background: #008cc8;color: #fff;}
.btn svg {flex-shrink: 0;}
p {margin-bottom: var(--line-height);}
p:last-child {margin-bottom: 0;}
address {font-style: normal;color: var(--text-color);}
address a {display: block;}
ol, ul {margin-bottom: var(--line-height);}
li {margin-left: 20px;}

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

header {position: fixed;top: 0;width: 100%;z-index: 10;padding: 15px 0;box-sizing: border-box;background: var(--bg-white);box-shadow: var(--box-shadow);transition: padding 0.3s ease;}
header .header-grid {display: grid;grid-template-columns: 200px auto;grid-template-rows: auto;justify-items: start;align-items: center;justify-content: space-between;transition: grid-template-columns 0.3s ease;}
header .header-grid .logo {width: 100%;}
header .header-grid .logo a {display: flex;align-items: center;}
header .header-grid .logo img {transition: height 0.3s ease, width 0.3s ease;}
html.scrolled header {padding: 8px 0;}
html.scrolled {--header-height: 72px;}
html.scrolled header .header-grid {grid-template-columns: 150px auto;}
header .header-grid .mainnav-toggle {display: none;justify-self: end;}
/* Äußerer Toggle liegt im Markup vor .header-grid (Geschwister, nicht Kind) — obige Regel greift dort nicht.
   Als <button> zeigt der Browser sonst seine Default-Chrome; ab 1024px wird das per @media wieder auf display:block gesetzt. */
.mainnav-toggle.off {display: none;}

/* ========================================
   NAVIGATION - DESKTOP
   ======================================== */

#mainnav ul.mainnav.smart {display: none;}
#mainnav {display: block;transform: translate(0);}
#mainnav ul.mainnav.desktop > li {list-style-type: none;font-size: 18px;font-weight: 500;margin-left: 36px;}
#mainnav ul.mainnav.desktop > li:first-child {margin-left: 0;}
#mainnav ul.mainnav.desktop > li > a {
    display: block;
    color: var(--text-color);
    transition: color 0.2s ease;
    padding: 30px 0;
    position: relative;
}
/* Unterline-Indikator nur für Top-Level */
#mainnav ul.mainnav.desktop > li > a::after {
    content: '';
    position: absolute;
    bottom: 22px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    border-radius: 2px;
    transition: width 0.2s ease;
}
#mainnav ul.mainnav.desktop > li > a:hover {color: var(--primary-color);}
#mainnav ul.mainnav.desktop > li > a:hover::after {width: 100%;}

/* Aktive Zustände Top-Level */
#mainnav ul.mainnav.desktop > li.current-menu-item > a,
#mainnav ul.mainnav.desktop > li.current-menu-parent > a,
#mainnav ul.mainnav.desktop > li.current-menu-ancestor > a {color: var(--primary-color);}
#mainnav ul.mainnav.desktop > li.current-menu-item > a::after,
#mainnav ul.mainnav.desktop > li.current-menu-parent > a::after,
#mainnav ul.mainnav.desktop > li.current-menu-ancestor > a::after {width: 100%;}

/* ========================================
   NAVIGATION - DESKTOP SUBMENU
   ======================================== */

@media (min-width: 1025px) {
    #mainnav ul.mainnav.desktop {display: flex;align-items: center;margin: 0;justify-content: flex-end;}
    html.scrolled #mainnav ul.mainnav.desktop > li:not(.nav-cta) > a {padding: 20px 0;}
    html.scrolled #mainnav ul.mainnav.desktop > li:not(.nav-cta) > a::after {bottom: 12px;}
    #mainnav ul.mainnav.desktop > li.nav-cta > a::after {display: none;}

    /* Submenu Level 1 — padding-top bridged die Lücke zum parent-Link */
    #mainnav ul.mainnav li.menu-item-has-children {position: relative;}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu {
        position: absolute;
        top: 100%;
        left: -20px;
        display: block;
        min-width: 330px;
        padding-top: 10px; /* unsichtbare Brücke, verhindert hover-Lücke */
        opacity: 0;
        pointer-events: none;
        transform: translateY(6px);
        transition: opacity 0.2s ease, transform 0.2s ease;
        z-index: 100;
    }
    /* Visuelle Card — liegt hinter den Items, aber über der Brücke */
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu::before {
        content: '';
        position: absolute;
        top: 10px;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
        border-top: 3px solid var(--primary-color);
    }
    #mainnav ul.mainnav li.menu-item-has-children:hover > ul.sub-menu {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li {
        position: relative;
        width: auto;
        margin: 0;
        padding: 0;
        background: none;
        list-style: none;
    }
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li:first-child a {border-radius: 11px 11px 0 0;}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li:last-child a {border-radius: 0 0 11px 11px;}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li a {
        position: relative;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 13px 20px;
        font-size: 15px;
        font-weight: 500;
        color: var(--text-color);
        transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
        border-bottom: 1px solid #f0f0f0;
    }
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li:last-child a {border-bottom: none;}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li a::before {
        content: '';
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--primary-color);
        flex-shrink: 0;
        opacity: 0.25;
        transition: opacity 0.15s ease, transform 0.15s ease;
    }
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li a:hover {
        background: rgba(0,159,227,0.06);
        color: var(--primary-color);
        padding-left: 24px;
    }
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li a:hover::before {opacity: 1;transform: scale(1.3);}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li.current-menu-item a {color: var(--primary-color);background: rgba(0,159,227,0.06);}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li.current-menu-item a::before {opacity: 1;}

    /* Submenu Level 2 */
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li.menu-item-has-children ul.sub-menu {
        position: absolute;
        left: calc(100% + 8px);
        top: 0;
        padding-top: 0;
    }
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li.menu-item-has-children ul.sub-menu::before {top: 0;border-top: 3px solid var(--primary-color);}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li.menu-item-has-children:hover ul.sub-menu {opacity: 1;pointer-events: auto;transform: translateY(0);}

    /* Hide mobile elements on desktop */
    #mainnav .head, #mainnav address.contact, #mainnav ul.mainnav li.back {display: none;}
}

/* ========================================
   NAVIGATION - MOBILE OFFCANVAS
   ======================================== */

@media (max-width: 1024px) {
    .mainnav.desktop {display: none;}

    /* ── Offcanvas Panel ── */
    #mainnav ul.mainnav.smart {display: block;}
    #mainnav {
        position: fixed;
        top: 0; right: 0; bottom: 0;
        background: #fff;
        width: 100%;
        max-width: 420px;
        transform: translateX(103%);
        transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
        box-shadow: -8px 0 40px rgba(0,0,0,0.18);
        z-index: 200;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    #mainnav.active {transform: translateX(0);}

    /* ── Head ── */
    #mainnav .head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        height: 70px;
        flex-shrink: 0;
        border-bottom: 1px solid #f0f0f0;
        background: #fff;
    }
    #mainnav .head > div:first-child {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--primary-color);
    }
    #mainnav .head .buttons {display: flex;gap: 8px;}
    #mainnav .head .buttons a {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        background: var(--bg-light-gray);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.15s ease, color 0.15s ease;
        color: var(--text-color);
    }
    #mainnav .head .buttons a:hover {background: var(--primary-color);color: #fff;}
    #mainnav .head .buttons a.wa-btn:hover {background: #25D366;color: #fff;}
    #mainnav .head .buttons a svg {width: 20px;height: 20px;}

    /* ── Close-Button X im Head ── */
    #mainnav .head .mainnav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: var(--bg-light-gray);
        border-radius: 10px;
        box-shadow: none;
        flex-shrink: 0;
        position: relative;
        cursor: pointer;
    }
    #mainnav .head .mainnav-toggle:hover {background: #ffecec;}
    /* Spans verstecken, btn-mainnav-toggle als unsichtbarer Klick-Layer erhalten */
    #mainnav .head .mainnav-toggle .btn-mainnav-toggle {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        width: 100%;
        transform: none;
        cursor: pointer;
    }
    #mainnav .head .mainnav-toggle .btn-mainnav-toggle span {display: none;}
    #mainnav .head .mainnav-toggle::before,
    #mainnav .head .mainnav-toggle::after {
        content: '';
        position: absolute;
        top: 50%; left: 50%;
        width: 16px; height: 2px;
        background: var(--text-color);
        border-radius: 2px;
    }
    #mainnav .head .mainnav-toggle::before {transform: translate(-50%, -50%) rotate(45deg);}
    #mainnav .head .mainnav-toggle::after {transform: translate(-50%, -50%) rotate(-45deg);}
    #mainnav .head .mainnav-toggle:hover::before,
    #mainnav .head .mainnav-toggle:hover::after {background: #cc0000;}

    /* ── Scrollable Nav Area ── */
    #mainnav ul.mainnav.smart {
        flex: 1;
        overflow-y: auto;
        padding: 8px 0 20px;
    }

    /* ── Nav Items ── */
    #mainnav ul.mainnav li {
        list-style: none;
        margin: 0;
        padding: 0;
        position: relative;
        border-bottom: 1px solid #f5f5f5;
    }
    #mainnav ul.mainnav li:last-child {border-bottom: none;}
    #mainnav ul.mainnav li a {
        display: block;
        font-size: 17px;
        font-weight: 600;
        color: var(--text-color);
        padding: 16px 56px 16px 24px;
        transition: color 0.15s ease;
        line-height: 1.2;
    }
    #mainnav ul.mainnav li a:hover {color: var(--primary-color);}
    #mainnav ul.mainnav li.current-menu-item > a,
    #mainnav ul.mainnav li.current-menu-ancestor > a,
    #mainnav ul.mainnav li.current-menu-parent > a {
        color: var(--primary-color);
    }
    #mainnav ul.mainnav li.current-menu-item > a::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 60%;
        background: var(--primary-color);
        border-radius: 0 3px 3px 0;
    }

    /* ── CTA-Item ── */
    #mainnav ul.mainnav li.nav-cta {margin: 16px 20px 0;border: none;}
    #mainnav ul.mainnav li.nav-cta a {
        display: block;
        text-align: center;
        background: var(--primary-color);
        color: #fff;
        border-radius: 10px;
        padding: 14px 20px;
        font-size: 15px;
        font-weight: 700;
    }
    #mainnav ul.mainnav li.nav-cta a:hover {background: #008cc8;color: #fff;}

    /* ── Submenu Toggle ── */
    #mainnav .opensubnav {
        position: absolute;
        right: 0; top: 0;
        width: 56px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 10;
        transition: background 0.15s ease;
    }
    #mainnav .opensubnav::after {
        content: '';
        width: 8px;
        height: 8px;
        border-right: 2px solid var(--primary-color);
        border-bottom: 2px solid var(--primary-color);
        transform: rotate(45deg);
        transition: transform 0.2s ease;
        margin-top: -4px;
    }
    #mainnav .opensubnav.active::after {
        transform: rotate(-135deg);
        margin-top: 4px;
    }

    /* ── Submenu Level 1 ── */
    #mainnav li.menu-item-has-children ul.sub-menu {
        display: none;
        background: var(--bg-light-gray);
        border-top: 1px solid #ebebeb;
    }
    #mainnav li.menu-item-has-children.active > ul.sub-menu {display: block;}
    #mainnav li.menu-item-has-children ul.sub-menu li {
        border-bottom: 1px solid #ebebeb;
        background: none;
    }
    #mainnav li.menu-item-has-children ul.sub-menu li:last-child {border-bottom: none;}
    #mainnav li.menu-item-has-children ul.sub-menu li a {
        font-size: 15px;
        font-weight: 500;
        padding: 13px 24px 13px 40px;
        color: var(--text-color);
        display: flex;
        align-items: center;
        gap: 10px;
    }
    #mainnav li.menu-item-has-children ul.sub-menu li a::before {
        content: '';
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--primary-color);
        flex-shrink: 0;
        opacity: 0.4;
    }
    #mainnav li.menu-item-has-children ul.sub-menu li a:hover,
    #mainnav li.menu-item-has-children ul.sub-menu li.current-menu-item a {color: var(--primary-color);}
    #mainnav li.menu-item-has-children ul.sub-menu li.current-menu-item a::before {opacity: 1;}

    /* Submenu Level 2 */
    #mainnav li.menu-item-has-children.active ul.sub-menu li.menu-item-has-children ul.sub-menu {display: none;}
    #mainnav li.menu-item-has-children.active ul.sub-menu li.menu-item-has-children.active ul.sub-menu {display: block;}
    #mainnav li.menu-item-has-children.active ul.sub-menu li ul.sub-menu li a {padding-left: 56px;}

    /* ── Contact Footer ── */
    #mainnav address.contact {
        flex-shrink: 0;
        padding: 20px 24px;
        background: var(--bg-light-gray);
        border-top: 1px solid #ebebeb;
        font-size: 13px;
        line-height: 1.6;
        color: #888;
    }
    #mainnav address.contact strong {color: var(--text-color);font-size: 14px;}
    #mainnav address.contact a {color: var(--primary-color);font-size: 13px;display: inline-flex;align-items: center;min-height: 44px;}

    /* ── Hamburger Toggle ── */
    .mainnav-toggle {
        border-radius: 10px;
        display: block;
        position: relative;
        z-index: 10;
        width: 46px; height: 46px;
        background: var(--primary-color);
        transition: var(--transition);
        flex-shrink: 0;
        border: none;
        padding: 0;
        font: inherit;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }
    .mainnav-toggle.off {
        border-radius: 10px;
        display: block;
        position: absolute;
        z-index: 10;
        top: 50%; right: 0;
        transform: translateY(-50%);
        width: 46px; height: 46px;
        background: var(--primary-color);
        box-shadow: 0 2px 12px rgba(0,159,227,0.35);
        transition: var(--transition);
    }
    .mainnav-toggle.off.active {display: none;}
    .mainnav-toggle .btn-mainnav-toggle {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 22px;cursor: pointer;}
    .mainnav-toggle .btn-mainnav-toggle span {display: block;width: 100%;border-radius: 4px;height: 2px;background: #fff;transition: all .3s;position: relative;}
    .mainnav-toggle .btn-mainnav-toggle span + span {margin-top: 6px;}
    .mainnav-toggle .btn-mainnav-toggle.active span + span {margin-top: 13px;}
    .mainnav-toggle .btn-mainnav-toggle.active span:nth-child(1) {animation: ease .7s top forwards;}
    .mainnav-toggle .btn-mainnav-toggle.not-active span:nth-child(1) {animation: ease .7s top-2 forwards;}
    .mainnav-toggle .btn-mainnav-toggle.active span:nth-child(2) {animation: ease .7s scaled forwards;}
    .mainnav-toggle .btn-mainnav-toggle.not-active span:nth-child(2) {animation: ease .7s scaled-2 forwards;}
    .mainnav-toggle .btn-mainnav-toggle.active span:nth-child(3) {animation: ease .7s bottom forwards;}
    .mainnav-toggle .btn-mainnav-toggle.not-active span:nth-child(3) {animation: ease .7s bottom-2 forwards;}

    /* Hamburger Animations */
    @keyframes top {
        0% {top: 0;transform: rotate(0);}
        50% {top: 15px;transform: rotate(0);}
        100% {top: 15px;transform: rotate(45deg);}
    }

    @keyframes top-2 {
        0% {top: 15px;transform: rotate(45deg);}
        50% {top: 15px;transform: rotate(0deg);}
        100% {top: 0;transform: rotate(0deg);}
    }

    @keyframes bottom {
        0% {bottom: 0;transform: rotate(0);}
        50% {bottom: 15px;transform: rotate(0);}
        100% {bottom: 15px;transform: rotate(135deg);}
    }

    @keyframes bottom-2 {
        0% {bottom: 15px;transform: rotate(135deg);}
        50% {bottom: 15px;transform: rotate(0);}
        100% {bottom: 0;transform: rotate(0);}
    }

    @keyframes scaled {
        50% {transform: scale(0);}
        100% {transform: scale(0);}
    }

    @keyframes scaled-2 {
        0% {transform: scale(0);}
        50% {transform: scale(0);}
        100% {transform: scale(1);}
    }

    /* Overlay */
    #mainnav-overlay {position: fixed;top: 0;right: 0;left: 0;bottom: 0;background: rgba(0, 0, 0, 0.2);backdrop-filter: blur(7px);opacity: 0;z-index: -5;transition: var(--transition);visibility: hidden;}
    #mainnav-overlay.active {opacity: 1;z-index: 1;visibility: visible;transition: var(--transition);}
}

/* ========================================
   STAGE / HERO SECTIONS
   ======================================== */

.stage {aspect-ratio: 3/1;width: 100%;min-height: 400px;position: relative;margin-top: var(--header-height);}
.stage.mb {margin-bottom:0;}
/* Fallback für Browser ohne aspect-ratio Support */
@supports not (aspect-ratio: 3/1) {
    .stage {padding-top: 33.33%;}
}

.stage .wrp {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 2;}
/* Hintergrundbild: absolut positionieren wie das Video, damit Stage-Höhe nur von CSS bestimmt wird */
.stage > img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;object-position: center;}
.stage.subpage {aspect-ratio: 3/.7;width: 100%;position: relative;}
.stage.subpage.stage--with-content {aspect-ratio: 3/1;min-height: 520px;margin-bottom: 100px;}
.stage-overlay {position: absolute;inset: 0;background: linear-gradient(to right, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.35) 100%);z-index: 1;}
.stage-intro {color: rgba(255,255,255,0.85);font-size: clamp(18px, 1.25vw, 26px);line-height: 1.6;max-width: 620px;margin-bottom: 28px;}

@supports not (aspect-ratio: 3/.7) {
    .stage.subpage {padding-top: 23.33%;}
    .stage.subpage.stage--with-content {padding-top: 33.33%;}
}

/* ========================================
   PAGE LAYOUT
   ======================================== */

main.withsidebar .page-build {display: grid;grid-template-columns: 70% 25%;align-items: flex-start;justify-content: space-between;max-width: var(--wrp-width);width: 90%;margin: 0 auto;}
main.withsidebar .content .wrp {width: 100%;}

/* ========================================
   CONTENT BLOCKS
   ======================================== */

/* Text Block */
.text.multiple-col .wrp {-webkit-columns: 2 350px;-moz-columns: 2 350px;columns: 2 350px;-webkit-column-gap: 4em;-moz-column-gap: 4em;column-gap: 4em;}
.text.align-center {text-align: center;}

/* Text + Image Block */
.textbild .wrp {display: grid;align-items: center;justify-content: space-between;box-sizing: border-box;}
.textbild .text {border-radius: 5px 0 0 5px;box-sizing: border-box;}
.textbild .bild {width: 100%;height: 100%;}
.textbild .bild img {width: 100%;height: 100%;object-fit: cover;border-radius: 14px;}

/* Teasercards */
.teasercards {position: relative;}
.teasercards .wrp {position: relative;overflow: visible;}
.teasercards .cards.no-carousel {display: grid;gap: 20px;margin-top: 0;}
.teasercards .cards.no-carousel li {list-style-type: none;margin: 0;}
.teasercards .splide {overflow: visible;position: relative;}
.teasercards .splide .splide__track {overflow: hidden;}
.teasercards .splide ul.cards {display: flex;grid-column-gap: unset;}
.teasercard-item {position: relative;overflow: hidden;border-radius: 14px;aspect-ratio: 4/3;display: block;box-shadow: 0 2px 12px rgba(0,0,0,0.08);transition: transform 0.2s ease, box-shadow 0.2s ease;}
.teasercard-item:hover {transform: translateY(-4px);box-shadow: 0 10px 32px rgba(0,0,0,0.16);}
.teasercard-item img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.4s ease;display: block;}
.teasercard-item:hover img {transform: scale(1.05);}
.teasercards .splide__arrow--prev {left: -100px;}
.teasercards .splide__arrow--next {right: -100px;}

/* Image Block */
.image img {display: block;width: 100%;height: auto;}
.bildtrenner {width: 100%;aspect-ratio: 3/1;overflow: hidden;position: relative;}

@supports not (aspect-ratio: 3/1) {
    .bildtrenner {padding-top: 33.33%;}
}

.bildtrenner img {width: 100%;height: 100%;object-fit: cover;object-position: center;}
.bildtrenner .wrp {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 2;}

/* ========================================
   GALLERY COMPONENT
   ======================================== */

/* Gemeinsame Overlay-Styles für Galerie und Video */
.gallery-overlay {width: 100%;position: absolute;height: 100%;top: 0;left: 0;right: 0;bottom: 0;background: var(--secondary-color);opacity: 0;transition: var(--transition);}
.gallery-overlay .icon-wrp {position: absolute;top: 50%;left: 50%;width: 45px;height: 45px;transform: translate(-50%, -50%);}
.gallery-overlay .icon-wrp svg {width: 100%;height: 100%;transform: scale(0);transition: var(--transition);}
.gallery-overlay .icon-wrp svg path {fill: var(--bg-white);}

/* Image Gallery */
.gallery .glightbox-gallery:not(.masonry) {display: grid;gap: 16px;margin-bottom: 0;}
.gallery .glightbox-gallery li {list-style-type: none;margin: 0;border-radius: 8px;overflow: hidden;aspect-ratio: 1;}

@supports not (aspect-ratio: 1) {
    .gallery .glightbox-gallery li {padding-top: 100%;position: relative;}
    .gallery .glightbox-gallery li a {position: absolute;top: 0;left: 0;width: 100%;}
}

.gallery .glightbox-gallery:not(.masonry) li {margin: 0;}
.gallery .glightbox-gallery li a {position: relative;display: block;overflow: hidden;height: 100%;}
.gallery .glightbox-gallery li a .overlay {width: 100%;position: absolute;height: 100%;top: 0;left: 0;right: 0;bottom: 0;background: var(--secondary-color);opacity: 0;transition: var(--transition);}
.gallery .glightbox-gallery li a:hover .overlay {opacity: 0.6;transition: var(--transition);}
.gallery .glightbox-gallery li a .overlay .icon-wrp {position: absolute;top: 50%;left: 50%;width: 45px;height: 45px;transform: translate(-50%, -50%);}
.gallery .glightbox-gallery li a .overlay .icon-wrp svg {width: 100%;height: 100%;transform: scale(0);transition: var(--transition);}
.gallery .glightbox-gallery li a .overlay .icon-wrp svg path {fill: var(--bg-white);}
.gallery .glightbox-gallery li a:hover .overlay .icon-wrp svg {transform: scale(1);transition: var(--transition);}
.gallery .glightbox-gallery li img {width: 100%;height: 100%;object-fit: cover;}
.gallery .glightbox-gallery.masonry {gap: 25px;columns: 4;margin: 0 auto;}

/* Video Gallery */
.gallery .video-gallery-grid {display: grid;grid-column-gap: 50px;grid-row-gap: 50px;}
.gallery .video-gallery-grid .video-gallery-item {height: 220px;width: 100%;display: block;position: relative;overflow: hidden;}
.gallery .video-gallery-grid .video-gallery-item .overlay {width: 100%;position: absolute;height: 100%;top: 0;left: 0;right: 0;bottom: 0;background: var(--secondary-color);opacity: 0;transition: var(--transition);z-index: 4;}
.gallery .video-gallery-grid .video-gallery-item:hover .overlay {opacity: 0.6;transition: var(--transition);}
.gallery .video-gallery-grid .video-gallery-item .overlay .icon-wrp {position: absolute;top: 50%;left: 50%;width: 45px;height: 45px;transform: translate(-50%, -50%);}
.gallery .video-gallery-grid .video-gallery-item .overlay .icon-wrp svg {width: 100%;height: 100%;transform: scale(0);transition: var(--transition);}
.gallery .video-gallery-grid .video-gallery-item .overlay .icon-wrp svg path {fill: var(--bg-white);}
.gallery .video-gallery-grid .video-gallery-item:hover .overlay .icon-wrp svg {transform: scale(1);transition: var(--transition);}
.gallery .video-gallery-grid .video-gallery-item img {height: 100%;width: 100%;object-fit: cover;object-position: center;transform: scale(1.2);}

/* ========================================
   EMBED / VIDEO
   ======================================== */

.embed .respo-video {position: relative;height: 0;overflow: hidden; padding-bottom: 56.25%;}
.embed .respo-video iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.embed .respo-video ._brlbs-cb-youtube {margin-bottom: -56.25%;}

/* ========================================
   ACCORDION
   ======================================== */

.accordion .wrp {max-width: 860px;}

/* ========================================
   BLOG & SIDEBAR
   ======================================== */

main.withsidebar .content .blog-grid {display: grid;grid-template-columns: repeat(3, 1fr);grid-column-gap: 50px;grid-row-gap: 50px;}
main.withsidebar .content .blog-grid .post {width: 100%;}
main.withsidebar .content .blog-grid .post img {width: 100%;height: auto;object-fit: cover;}
article.singlepost .post-image img {width: 100%;height: auto;object-fit: cover;}

/* Sidebar */
main.withsidebar .sidebar {width: 100%;position: -webkit-sticky;position: sticky;top: calc(var(--header-height) + 30px);box-sizing: border-box;}

.sidebar-contact {
    background: #fff;
    border-radius: 12px;

    box-shadow: 0 2px 16px rgba(0,0,0,0.07);
    padding: 28px 24px;
}
.sidebar-contact h3 {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--primary-color);
    margin-bottom: 16px;
    line-height: 1.4;
}
.sidebar-contact address {
    font-style: normal;
    font-size: 14px;
    line-height: 1.8;
    color: #666;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sidebar-contact address a:nth-last-of-type(1) {margin:0;}
.sidebar-contact address a {
    color: var(--primary-color);
    font-weight: 500;
    margin-top: 8px;
    display: block;
    transition: var(--transition);
}
.sidebar-contact address a:hover {
    color: #007ab8;
}

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

.bottom .wrp {display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;}

/* ========================================
   404 ERROR PAGE
   ======================================== */

.error404 .stage {display: none;}
.pageerror {padding: 250px 0 100px 0;text-align: center;}

/* ========================================
   CUSTOM SLIDER
   ======================================== */

.splide {position: relative;overflow: hidden;width: 100%;margin: 0;}
.splide .splide__track {overflow: visible;width: 100%;}
.splide .splide__list, .splide .cards {display: flex;margin: 0;padding: 0;list-style: none;width: 100%;transition: transform 0.5s ease;}
.splide .splide__slide, .splide .cards > * {flex-shrink: 0;margin: 0;list-style: none;}
.splide__arrow {position: absolute;top: 50%;transform: translateY(-50%);width: 50px;height: 50px;border-radius: 50%;background: var(--primary-color);color: var(--bg-white);border: none;font-size: 24px;cursor: pointer;z-index: 5;transition: var(--transition);display: flex;align-items: center;justify-content: center;box-shadow: var(--box-shadow);font-weight: 300;}
.splide__arrow:hover {background: var(--secondary-color);transform: translateY(-50%) scale(1.1);transition: var(--transition);}
.splide__arrow--prev {left: -25px;}
.splide__arrow--next {right: -25px;}
.splide__arrow:disabled {opacity: 0.3;cursor: not-allowed;}
.splide .clone {opacity: 1;}

/* ========================================
   CUSTOM LIGHTBOX
   ======================================== */

.custom-lightbox {position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 999999;opacity: 0;visibility: hidden;transition: opacity 0.3s ease, visibility 0.3s ease;pointer-events: none;}
.custom-lightbox.active {opacity: 1;visibility: visible;pointer-events: auto;}
.lightbox-overlay {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.95);backdrop-filter: blur(10px);z-index: 1;}
.lightbox-container {position: relative;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;z-index: 2;}
.lightbox-close {position: fixed;top: 20px;right: 20px;width: 50px;height: 50px;border-radius: 50%;background: rgba(255, 255, 255, 0.2);color: var(--bg-white);border: 2px solid rgba(255, 255, 255, 0.5);font-size: 30px;cursor: pointer;z-index: 999999;transition: var(--transition);display: flex;align-items: center;justify-content: center;line-height: 1;font-weight: 300;}
.lightbox-close:hover {background: var(--primary-color);border-color: var(--primary-color);transform: rotate(90deg);transition: var(--transition);}
.lightbox-prev, .lightbox-next {position: fixed;top: 50%;transform: translateY(-50%);width: 60px;height: 60px;border-radius: 50%;background: rgba(255, 255, 255, 0.2);color: var(--bg-white);border: 2px solid rgba(255, 255, 255, 0.5);font-size: 28px;cursor: pointer;z-index: 999999;transition: var(--transition);display: flex;align-items: center;justify-content: center;font-weight: 300;}
.lightbox-prev:hover, .lightbox-next:hover {background: var(--primary-color);border-color: var(--primary-color);transform: translateY(-50%) scale(1.1);transition: var(--transition);}
.lightbox-prev {left: 20px;}
.lightbox-next {right: 20px;}
.lightbox-counter {position: fixed;top: 20px;left: 50%;transform: translateX(-50%);background: rgba(0, 0, 0, 0.8);color: var(--bg-white);padding: 10px 20px;border-radius: 20px;font-size: 16px;z-index: 999999;backdrop-filter: blur(5px);font-weight: 500;}
.lightbox-image-wrapper {position: relative;max-width: 90%;max-height: 90%;display: flex;align-items: center;justify-content: center;overflow: hidden;}
.lightbox-image {max-width: 100%;max-height: 90vh;object-fit: contain;transition: transform 0.3s ease;cursor: grab;}
.lightbox-image:active {cursor: grabbing;}
.lightbox-video-wrapper {position: relative;width: 90vw;max-width: 1280px;aspect-ratio: 16/9;}
.lightbox-video {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 8px;}
.lightbox-zoom-controls {position: fixed;bottom: 30px;left: 50%;transform: translateX(-50%);display: flex;gap: 10px;z-index: 999999;}
.lightbox-zoom-controls button {width: 45px;height: 45px;border-radius: 50%;background: rgba(255, 255, 255, 0.2);color: var(--bg-white);border: 2px solid rgba(255, 255, 255, 0.5);font-size: 20px;cursor: pointer;transition: var(--transition);display: flex;align-items: center;justify-content: center;font-weight: 300;}
.lightbox-zoom-controls button:hover {background: var(--primary-color);border-color: var(--primary-color);transform: scale(1.1);transition: var(--transition);}
.lightbox-thumbnails {position: fixed;bottom: 20px;left: 50%;transform: translateX(-50%);width: 90%;max-width: 900px;z-index: 999999;background: rgba(0, 0, 0, 0.8);padding: 15px;border-radius: 10px;backdrop-filter: blur(10px);}
.lightbox-thumbnails-wrapper {display: flex;gap: 10px;overflow-x: auto;overflow-y: hidden;scroll-behavior: smooth;padding: 5px 0;scrollbar-width: thin;scrollbar-color: rgba(255, 255, 255, 0.3) transparent;}
.lightbox-thumbnails-wrapper::-webkit-scrollbar {height: 6px;}
.lightbox-thumbnails-wrapper::-webkit-scrollbar-track {background: rgba(255, 255, 255, 0.1);border-radius: 3px;}
.lightbox-thumbnails-wrapper::-webkit-scrollbar-thumb {background: rgba(255, 255, 255, 0.3);border-radius: 3px;}
.lightbox-thumbnails-wrapper::-webkit-scrollbar-thumb:hover {background: rgba(255, 255, 255, 0.5);}
.lightbox-thumbnail {position: relative;flex-shrink: 0;width: 100px;height: 70px;border-radius: 6px;overflow: hidden;cursor: pointer;border: 3px solid transparent;transition: var(--transition);background: rgba(0, 0, 0, 0.5);}
.lightbox-thumbnail:hover {border-color: rgba(255, 255, 255, 0.5);transform: scale(1.05);transition: var(--transition);}
.lightbox-thumbnail.active {border-color: var(--primary-color);transform: scale(1.05);}
.lightbox-thumbnail img {width: 100%;height: 100%;object-fit: cover;}
.lightbox-thumbnail-video-icon {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 30px;height: 30px;background: rgba(0, 0, 0, 0.7);color: var(--bg-white);display: flex;align-items: center;justify-content: center;border-radius: 50%;font-size: 12px;pointer-events: none;}

/* ========================================
   MEDIA QUERIES - RESPONSIVE
   ======================================== */

/* Tablet Landscape & Below (1024px) */
@media (max-width: 1024px) {
    /* Page Layout */
    main.withsidebar .page-build {grid-template-columns: 100%;}
    main.withsidebar .page-build .sidebar {display: none;}

    /* Teasercards */
    .teasercards .cards.no-carousel {grid-template-columns: repeat(2, 1fr);}

    /* Gallery */
    .gallery .glightbox-gallery {grid-template-columns: repeat(4, 1fr);}
    .gallery .video-gallery-grid {grid-template-columns: repeat(2, 1fr);}
    .gallery .filterrow {display: grid;grid-template-columns: 100%;gap: 25px;}
    .gallery .filterrow #filter {flex-wrap: wrap;}
}

/* Responsive Lightbox */
@media (max-width: 768px) {
    .lightbox-close {width: 40px;height: 40px;font-size: 24px;top: 10px;right: 10px;}
    .lightbox-prev, .lightbox-next {width: 45px;height: 45px;font-size: 22px;}
    .lightbox-prev {left: 10px;}
    .lightbox-next {right: 10px;}
    .lightbox-counter {font-size: 12px;padding: 6px 12px;top: 10px;}
    .lightbox-zoom-controls {bottom: 20px;gap: 8px;}
    .lightbox-zoom-controls button {width: 38px;height: 38px;font-size: 18px;}
    .lightbox-image-wrapper {max-width: 95%;max-height: 85%;}
    .lightbox-video-wrapper {width: 95vw;}
}
/* Gallery 2-Spalten ab 550px */
@media (max-width: 550px) {
    .gallery .video-gallery-grid {grid-template-columns: 100%;}
    .gallery .glightbox-gallery {grid-template-columns: repeat(2, 1fr);}
}

/* ========================================
   HÜLSHOFF: GLOBAL ADDITIONS
   ======================================== */

* {
    --dark: #1c1c1c;
    --dark-mid: #2d2d2d;
}

.eyebrow {
    display: block;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1.4;
    color: var(--primary-color);
    margin-bottom: 10px;
}

/* Button variants — border-radius: 8px (geerbt von .btn) */
.btn--primary {background: var(--primary-color);color: #fff;}
.btn--primary:hover {background: #008cc8;color: #fff;}
.btn--dark {background: #1c1c1c;color: #fff;}
.btn--dark:hover {background: #333;color: #fff;}
.btn--secondary {background: none;color: #fff;border:1px solid #f2f2f2}
.btn--secondary:hover {background: #333;color: #fff;}
.btn-stage-icon {width: 32px;height: 32px;flex-shrink: 0;}
.stage-btn-phone, .stage-btn-primary {align-items: center;gap: 12px;padding: 14px 24px;}
.btn--hell {background: #fff;color: var(--primary-color);}
.btn--hell:hover {background: #e8f5fd;color: var(--primary-color);}
.btn--outline {background: transparent;border: 2px solid var(--primary-color);color: var(--primary-color);padding: 11px 26px;}
.btn--outline:hover {background: var(--primary-color);color: #fff;}
.kontakt-tel-btn {width: 100%;justify-content: flex-start;box-sizing: border-box;}
.btn--header {background: var(--primary-color);color: #fff;padding: 10px 22px;font-size: 14px;margin-top: 0;}
.btn--header:hover {background: #008cc8;color: #fff;}
#mainnav ul.mainnav.desktop li.nav-cta a {background: var(--primary-color);color: #fff;padding: 10px 22px;border-radius: 8px;font-size: 14px;font-weight: 600;line-height: 1;}
#mainnav ul.mainnav.desktop li.nav-cta a:hover {background: #008cc8;color: #fff;}

/* ========================================
   WHATSAPP FLOAT BUTTON
   ======================================== */

.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    height: 50px;
    padding: 0 20px 0 16px;
    background: #25D366;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    z-index: 150;
    transition: transform var(--transition), box-shadow var(--transition);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.whatsapp-float:hover {transform: scale(1.05);box-shadow: 0 6px 28px rgba(0,0,0,0.3);color: #fff;}
.whatsapp-float svg {width: 22px;height: 22px;flex-shrink: 0;}
body.nav-open .whatsapp-float {opacity: 0;pointer-events: none;transition: opacity 0.2s ease;}

/* Vision-Trigger Plugin – 20px nach links versetzt */
vision-trigger {right: 40px !important;}

/* ========================================
   HEADER: CONTACT BAR + 3-COLUMN GRID
   ======================================== */

@media (min-width: 1025px) {
    header .header-grid {grid-template-columns: 180px 1fr;}
    header .header-grid #mainnav {justify-self: end;}
}
.header-phone {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 400;
    font-size: 13px;
    color: var(--text-color);
    white-space: nowrap;
    line-height: 1;
}
.header-phone img,
.header-phone svg {width: 14px;height: 14px;flex-shrink: 0;}
.header-phone:hover {color: var(--primary-color);}

/* btn--header defined in Button variants above */

/* ========================================
   STAGE / HERO EXTENSIONS
   ======================================== */

.stage.frontpage::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.75);
    z-index: 1;
}
.stage video.stagevideo {width: 100%;height: 100%;object-fit: cover;position: absolute;top: 0;left: 0;}
.stage.frontpage {min-height: 740px;}
.stage.frontpage .wrp {z-index: 2;}
.stage-content {color: #fff;max-width: 820px;}
.stage-content .eyebrow {color: rgba(255,255,255,0.8);}
.stage-content h1 strong {color: var(--primary-color);font-weight: inherit;}

.hero-ctas {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin: 28px 0;
}

.hero-trust {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px 24px;
}
.hero-trust li {display: flex;align-items: center;gap: 6px;font-size: 14px;font-weight: 500;color: rgba(255,255,255,0.9);}
.hero-check {color: var(--primary-color);font-size: 15px;font-weight: 700;}

.hero-zertifikate {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 16px;
    align-items: center;
    justify-content: start;
}
.hero-zertifikate img {height: 60px;width: auto;opacity: 0.95;}

/* ========================================
   SECTION: PROBLEME
   ======================================== */

.probleme {
    background: #fff;
    overflow: visible;
    padding: var(--section-pad) 0 calc(var(--section-pad) + 20px);
}
.probleme .eyebrow {color: var(--primary-color);}
.probleme h2 {color: var(--text-color);}
.probleme > .wrp > .probleme-inner > .probleme-left > p {color: #777;}

.probleme-inner {
    display: grid;
    grid-template-columns: 48% auto;
    gap: 60px;
    align-items: end;
}
.probleme-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 36px;
}
.problem-karte {
    background: #fff;
    border-radius: 10px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.problem-karte-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.problem-icon {width: 32px;height: 32px;flex-shrink: 0;}
.problem-icon img {width: 32px;height: 32px;object-fit: contain;}
.problem-nr {
    font-size: 13px;
    font-weight: 600;
    color: #ccc;
    line-height: 1;
}
.problem-karte h3 {color: var(--text-color);font-size: 14px;font-weight: 600;margin: 0;line-height: 1.35;}

.probleme-foto {border-radius: 14px;overflow: hidden;margin-bottom: -100px;}
.probleme-foto img {width: 100%;height: 100%;object-fit: cover;display: block;}

/* ========================================
   SECTION: CTA-BAND
   ======================================== */

/* ── Zahlen & Social Proof ─────────────────────────────── */
.zahlen-block {padding: 28px 0;}
.zahlen-block .wrp {text-align: center;}
.zahlen-block h2 {margin-bottom: 24px;}
.zahlen-bg--hell {background: var(--bg-light-gray);}
.zahlen-bg--dunkel {background: var(--dark-bg);}
.zahlen-bg--dunkel .eyebrow {color: rgba(255,255,255,0.5);}
.zahlen-bg--dunkel h2 {color: #fff;}
.zahlen-grid {display: flex;flex-wrap: nowrap;justify-content: space-between;gap: 0;margin-top: 0;}
.zahlen-item {display: flex;flex-direction: column;align-items: center;gap: 3px;flex: 1;padding: 0 20px;position: relative;}
.zahlen-item + .zahlen-item::before {content: '';position: absolute;left: 0;top: 10%;height: 80%;width: 1px;background: var(--border-gray);}
.zahlen-bg--dunkel .zahlen-item + .zahlen-item::before {background: rgba(255,255,255,0.15);}
@media (max-width: 530px) {
    /* Nowrap-Flex läuft unter 530px über (4 Items brauchen 477px) — 2x2-Grid statt einer Zeile */
    .zahlen-grid {display: grid;grid-template-columns: repeat(2, 1fr);gap: 24px 0;}
    .zahlen-item {padding: 0 12px;}
    /* Trennlinie ergibt im 2x2-Grid vor Item 3 keinen Sinn (steht dann über Item 1) */
    .zahlen-item + .zahlen-item::before {display: none;}
}
.zahlen-icon {font-size: 15px;line-height: 1;}
.zahlen-zahl {font-size: 22px;font-weight: 700;line-height: 1;color: var(--primary-color);letter-spacing: -0.3px;}
.zahlen-bg--dunkel .zahlen-zahl {color: var(--secondary-color);}
.zahlen-label {font-size: 12px;font-weight: 500;color: #888;line-height: 1.4;text-align: center;}
.zahlen-bg--dunkel .zahlen-label {color: rgba(255,255,255,0.55);}

.cta-band {
    background: #1a2535;
    padding: 40px 0;
}
.cta-band .wrp {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: nowrap;
}
.cta-band-content {display: flex;flex-direction: column;gap: 10px;flex: 1;min-width: 0;max-width: 65%;}
.cta-band .btn {flex-shrink: 0;}
.btn-phone-icon {width: 32px;height: 32px;flex-shrink: 0;}
.cta-band-btn {align-items: center;gap: 12px;padding: 14px 24px;}
.cta-band-btn-text {display: flex;flex-direction: column;gap: 2px;text-align: left;}
.cta-band-btn-label {font-size: 11px;font-weight: 600;text-transform: uppercase;letter-spacing: 0.8px;opacity: 0.8;line-height: 1;}
.cta-band-btn-number {font-size: 17px;font-weight: 700;line-height: 1;}
.cta-band .eyebrow {color: rgba(255,255,255,0.5);font-size: 11px;margin-bottom: 0;}
.cta-band-text h3 {font-size: 13px;font-weight: 700;text-transform: uppercase;letter-spacing: 2px;color: #fff;margin: 0;line-height: 1;}
.cta-band-text {color: #fff;font-size: 26px;font-weight: 700;line-height: 1.3;}
.cta-band-text p {color: #fff;margin: 0;font-size: 26px;font-weight: 700;line-height: 1.3;}
.cta-band-text strong, .cta-band-text b {color: #fff;font-weight: 800;}

/* ========================================
   SECTION: PROZESS
   ======================================== */

.prozess {
    background-color: var(--dark);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
    overflow: hidden;
    padding: 100px 0;
    color: #fff;
}
.prozess::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.65);
}
.prozess .wrp {position: relative;z-index: 2;}

.prozess-line {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.4s ease-out;
}
.prozess-line path {
    stroke: var(--primary-color);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 6 12;
}
.prozess.is-visible .prozess-line {
    clip-path: inset(0 0 0 0);
}
.prozess.is-visible .prozess-line path {
    animation: prozessFlow 1.1s linear infinite;
}
@keyframes prozessFlow {
    to { stroke-dashoffset: -18; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .prozess-line { clip-path: none; transition: none; }
    .prozess.is-visible .prozess-line path { animation: none; }
}
.prozess .eyebrow {color: var(--primary-color);}
.prozess h2 {color: #fff;}
.prozess-header {max-width: 60%;}

.prozess-schritte {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 56px;
    position: relative;
    padding: 80px 40px;
    overflow: visible;
}


.prozess-schritt {
    background: rgba(26,37,53,0.9);
    border-radius: 16px;
    padding: 28px;
    position: relative;
    z-index: 1;
    text-align: left;
}

/* Nummern-Kreis – alle oben mittig, halb überlappend */
.schritt-nummer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}


.prozess-schritt h3 {color: var(--primary-color);font-size: 16px;font-weight: 700;}
.prozess-schritt p {color: rgba(255,255,255,0.65);font-size: 14px;line-height: 1.6;margin: 0;}

/* Button zentriert */
.prozess-btn-wrap {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

/* ========================================
   SECTION: LEISTUNGEN
   ======================================== */

.leistungen {
    padding: var(--section-pad) 0;
    background: #fff;
}
.leistungen-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
}
.leistung-karte {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    aspect-ratio: 4/3;
    display: block;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.leistung-karte:hover {transform: translateY(-4px);box-shadow: 0 10px 32px rgba(0,0,0,0.16);}
.leistung-karte img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    display: block;
}
.leistung-karte:hover img {transform: scale(1.05);}
.leistung-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.5) 55%, transparent 100%);
    padding: 60px 20px 20px;
    z-index: 2;
}
.leistung-overlay h3 {font-size: 18px;margin-bottom: 6px;color: #fff;font-weight: 600;}
.leistung-kurz {font-size: 14px;color: rgba(255,255,255,0.85);margin-bottom: 10px;line-height: 1.45;}
.leistung-link {color: var(--primary-color);font-weight: 600;font-size: 14px;}

/* ========================================
   SECTION: VORHER / NACHHER (Comparison Slider Carousel)
   ======================================== */

.vorher-nachher {padding: var(--section-pad) 0;}
.vorher-nachher h2 {margin-bottom: 10px;}
.vorher-nachher > .wrp > p {color: #777;}

.vna-carousel {
    margin-top: 36px;
    overflow: hidden;
    border-radius: 14px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.12);
}
.vna-track {
    display: flex;
    transition: transform 0.4s ease;
    will-change: transform;
}
.vna-slide {
    flex: 0 0 100%;
    min-width: 0;
}

.vna-wrap {
    position: relative;
    overflow: hidden;
    cursor: ew-resize;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
}
.vna-nachher {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    max-height: 770px;
    object-fit: cover;
}
.vna-vorher {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    clip-path: inset(0 50% 0 0);
}

.vna-label {
    position: absolute;
    bottom: 16px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    padding: 5px 12px;
    border-radius: 20px;
    pointer-events: none;
    z-index: 3;
}
.vna-label-v {left: 16px;}
.vna-label-n {right: 16px;}

.vna-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 4;
    pointer-events: none;
}
.vna-line {
    width: 2px;
    height: 100%;
    background: rgba(255,255,255,0.85);
    box-shadow: 0 0 8px rgba(0,0,0,0.4);
}
.vna-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 16px rgba(0,0,0,0.4);
    pointer-events: auto;
    cursor: ew-resize;
}
.vna-btn svg {width: 22px;height: 22px;color: var(--text-color);}
.vna-caption {
    text-align: center;
    color: #888;
    font-size: 13px;
    margin: 10px 0 0;
    padding: 0;
}
.vna-dots {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 18px;
}
.vna-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ddd;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s;
}
.vna-dot.active {background: var(--primary-color);}

/* ========================================
   SECTION: REFERENZPROJEKTE
   ======================================== */

.referenzprojekte {padding: var(--section-pad) 0;background: var(--bg-light-gray);}
body.post-type-archive-referenz .referenzprojekte {background: #fff;padding-top: 0;}
.referenz-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
}
.referenz-karte {
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.referenz-karte:hover {transform: translateY(-4px);box-shadow: 0 10px 32px rgba(0,0,0,0.16);}
.referenz-karte a {display: block;color: inherit;}
.referenz-bild {
    position: relative;
    aspect-ratio: 3/2;
    overflow: hidden;
    background: #222;
}
.referenz-bild img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.4s ease;display: block;}
.referenz-karte:hover .referenz-bild img {transform: scale(1.05);}
.referenz-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--primary-color);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    z-index: 2;
}
.referenz-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.5) 55%, transparent 100%);
    padding: 60px 20px 20px;
    z-index: 2;
}
.referenz-info h3 {font-size: 18px;margin-bottom: 6px;color: #fff;font-weight: 600;}
.referenz-info p {font-size: 14px;color: rgba(255,255,255,0.75);margin-bottom: 10px;line-height: 1.45;}
.referenz-kurz {font-size: 14px;color: rgba(255,255,255,1);margin-bottom: 10px;line-height: 1.45;}
.referenz-link {color: var(--primary-color);font-weight: 600;font-size: 13px;}

/* ========================================
   SECTION: BEWERTUNGEN
   ======================================== */

.bewertungen {
    background: #0f1c2e;
    padding: var(--section-pad) 0;
    color: #fff;
}
.bewertungen .eyebrow {color: var(--primary-color);}
.bewertungen h2 {color: #fff;margin-bottom: 10px;}

.bewertungen-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    margin-bottom: 48px;
    flex-wrap: wrap;
}
.bewertungen-heading p {color: rgba(255,255,255,0.6);margin: 0;}
.bewertungen-score {
    text-align: right;
    flex-shrink: 0;
}
.bewertung-wert {
    font-size: 60px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    display: block;
}
.bewertung-sterne-big {
    font-size: 24px;
    color: #fbbf24;
    letter-spacing: 2px;
    display: block;
    margin: 4px 0;
}
.bewertung-anzahl {font-size: 13px;color: rgba(255,255,255,0.4);}

.bewertungen-slider {margin-top: 0;}
.bewertung-karte {
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid rgba(255,255,255,0.08);
}
.bewertung-kopf {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.bewertung-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
}
.bewertung-meta strong {display: block;color: #fff;font-size: 14px;font-weight: 600;}
.bewertung-datum {font-size: 12px;color: rgba(255,255,255,0.35);display: block;}
.bewertung-sterne-row {color: #fbbf24;font-size: 14px;letter-spacing: 1px;}
.bewertung-text {color: rgba(255,255,255,0.7);font-size: 14px;line-height: 1.65;flex: 1;margin-bottom: 14px;}
.bewertung-verifiziert {
    font-size: 11px;
    color: rgba(255,255,255,0.3);
    display: flex;
    align-items: center;
    gap: 5px;
}
.btn--outline-light {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 36px;
    padding: 13px 28px;
    border: 1px solid rgba(255,255,255,0.35);
    color: rgba(255,255,255,0.85);
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    transition: border-color 0.2s, color 0.2s;
}
.btn--outline-light:hover {border-color: #fff;color: #fff;}

/* ========================================
   SECTION: ÜBER UNS
   ======================================== */

.ueber-uns {padding: var(--section-pad) 0;}
.ueber-uns-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.ueber-uns-bild {
    position: relative;
    border-radius: 16px;
    overflow: visible;
    height:100%;
}
.ueber-uns-bild img {width: 100%;height:100%;object-fit:cover;border-radius: 16px;display: block;}
.ueber-uns-content {padding-left: 10px;}
.ueber-uns-text {margin: 18px 0 28px;color: var(--text-color);}
.trust-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}
.trust-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-light-gray);
    border-radius: 30px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color);
}
.trust-chip img, .trust-chip svg {width: 15px;height: 15px;object-fit: contain;flex-shrink: 0;}

/* ========================================
   SECTION: EINSATZGEBIET
   ======================================== */

.einsatzgebiet {
    padding: var(--section-pad) 0;
    background: var(--bg-light-gray);
}
.standort-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 20px;
    margin-top: 40px;
}
.standort-karte {
    text-align: center;
    padding: 28px 18px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.standort-icon {width: 40px;height: 40px;margin: 0 auto 14px;color: var(--primary-color);}
.standort-icon img {width: 40px;height: 40px;object-fit: contain;}
.standort-icon svg {width: 40px;height: 40px;}
.standort-karte h3 {font-size: 14px;margin-bottom: 4px;color: var(--text-color);font-weight: 700;}
.standort-karte p {font-size: 13px;color: #888;margin: 0;}

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

.faq {
    padding: var(--section-pad) 0;
    background: #fff;
}
.faq-inner {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 60px;
    align-items: start;
}
.faq-heading .eyebrow {color: var(--primary-color);}
.faq-heading h2 {color: var(--text-color);}
.faq-heading p {color: #777;margin: 0;}

.faq-liste {display: flex;flex-direction: column;}
.faq-item {
    border-bottom: 1px solid #e5e7eb;
}
.faq-item:first-child {border-top: 1px solid #e5e7eb;}
.faq-frage {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
    font-weight: 600;
    cursor: pointer;
    font-size: 20px;
    color: var(--text-color);
    gap: 16px;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
}
.faq-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    position: relative;
}
.faq-icon::before,
.faq-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--primary-color);
    transition: transform 0.2s, opacity 0.2s;
}
.faq-icon::before {width: 10px;height: 2px;}
.faq-icon::after {width: 2px;height: 10px;}
.faq-item.open .faq-icon::after {transform: translate(-50%, -50%) rotate(90deg);opacity: 0;}
.faq-antwort {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
    overflow: hidden;
}
.faq-item.open .faq-antwort {
    grid-template-rows: 1fr;
}
.faq-antwort-inner {
    min-height: 0;
    overflow: hidden;
    color: #777;
    font-size: 16px;
    line-height: 1.7;
}
.faq-antwort-inner > * {padding-bottom: 18px;}
.faq-antwort p {margin-bottom: 10px;color: #777;}
.faq-antwort p:last-child {margin-bottom: 0;}

/* ========================================
   SECTION: KONTAKT
   ======================================== */

.kontakt {padding: var(--section-pad) 0;background: var(--bg-light-gray);}
.kontakt--footer {background: #f2f4f7;border-top: 1px solid #e0e3e8;}
.kontakt-layout {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 60px;
    margin-top: 40px;
    align-items: start;
}
.kontakt-formular {background: #fff;border-radius: 12px;padding: 30px;}
.kontakt-formular h2 {font-size: 30px;
    font-weight: 600;
    line-height: 1.15;
}
.kontakt-info {display: flex;flex-direction: column;gap: 20px;}
.kontakt-karte {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
}
.kontakt-karte h3 {font-size: 24px;color: var(--text-color);font-weight: 700;}
.kontakt-karte address {font-style: normal;color: #777;line-height: 1.75;margin-bottom: 14px;font-size: 14px;}
.kontakt-karte > p {color: #777;font-size: 14px;margin-bottom: 14px;}
.kontakt-map {overflow: hidden;margin-top: 14px;height: 180px;margin-left: -30px;margin-right: -30px;margin-bottom: -30px;border-radius: 0 0 12px 12px;}
.kontakt-map iframe {width: 100%;height: 100%;border: none;display: block;}

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

footer {
    background: #f2f4f7;
    color: #555;
    border-top: 1px solid #e0e3e8;
    padding: 64px 0 48px;
    margin-top: 0;
}
footer .wrp {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 60px;
    align-items: start;
}
.footer-brand {display: flex;flex-direction: column;gap: 16px;}
.footer-logo img {height: 52px;width: auto;}
.footer-tagline {font-size: 14px;color: #666;margin: 0;line-height: 1.6;}
.footer-zertifikate img {display: inline-block;max-width:60px;vertical-align:middle;height: auto;width: 100%;max-height: 44px;object-fit: contain;object-position: left center;}

.footer-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
}
.footer-col h4 {
    color: var(--primary-color);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 16px;
    font-weight: 700;
}
.footer-col ul {list-style: none;padding: 0;margin: 0;}
.footer-col li {margin: 0 0 9px;}
.footer-col li a {color: #555;font-size: 14px;transition: color 0.2s;}
.footer-col li a:hover {color: var(--primary-color);}

.footer-col--kontakt address {font-style: normal;font-size: 14px;line-height: 1.75;margin-bottom: 14px;color: #555;}
.footer-col--kontakt a {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #555;
    margin-bottom: 0;
    transition: color 0.2s;
}
.footer-col--kontakt a:hover {color: var(--primary-color);}
.footer-col--kontakt a img,
.footer-col--kontakt a svg {width: 20px;height: 20px;flex-shrink: 0;}

.bottom {
    background: #e8eaed;
    padding: 18px 0;
    color: #888;
    font-size: 13px;
}
.bottom .wrp {display: flex;justify-content: space-between;align-items: center;gap: 20px;flex-wrap: wrap;}
.bottom a {color: #888;transition: color 0.2s;}
.bottom a:hover {color: var(--primary-color);}
.legal-nav {display: flex;gap: 20px;flex-wrap: wrap;list-style: none;padding: 0;margin: 0;}
.legal-nav ul {list-style: none;padding: 0;margin: 0;display: flex;gap: 20px;flex-wrap: wrap;}
.legal-nav li {margin: 0;list-style: none;display: inline;}
.footer-credit a {color: #888;}
.footer-credit a:hover {color: var(--primary-color);}

/* ========================================
   ARCHIV REFERENZEN
   ======================================== */

.archiv-referenzen {padding: var(--section-pad) 0;background: var(--bg-light-gray);}
.archiv-referenzen .referenz-grid {margin-top: 0;}
.archiv-header {text-align: center;margin-bottom: 48px;}
.archiv-header h1 {margin: 8px 0 16px;}
.archiv-intro {font-size: 18px;color: #666;max-width: 560px;margin: 0 auto;line-height: 1.6;}

.referenz-filter {display: flex;flex-wrap: wrap;gap: 10px;justify-content: center;margin-bottom: 40px;}
.filter-pill {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 50px;
    border: 1.5px solid var(--border-gray);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
    transition: var(--transition);
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.4;
}
.filter-pill:hover,
.filter-pill.active {background: var(--primary-color);border-color: var(--primary-color);color: #fff;}
.referenz-karte[hidden] {display: none;}

.referenz-pagination {display: flex;justify-content: center;gap: 8px;flex-wrap: wrap;margin-top: 60px;}
.referenz-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1.5px solid var(--border-gray);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
    background: #fff;
    transition: var(--transition);
}
.referenz-pagination .page-numbers:hover,
.referenz-pagination .page-numbers.current {background: var(--primary-color);border-color: var(--primary-color);color: #fff;}
.referenz-pagination .page-numbers.dots {border: none;background: none;}

.archiv-leer {text-align: center;color: #888;padding: 60px 0;font-size: 18px;}

/* ========================================
   SINGLE REFERENZ
   ======================================== */

.single-referenz .referenz-header {padding: 60px 0 40px;}
.referenz-pill {
    display: block;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--primary-color);
    margin-bottom: 10px;
}
.referenz-kurzbeschreibung {font-size: 18px;color: var(--text-color);line-height: 1.7;max-width: 760px;margin-bottom: 0;}
.referenz-kurzbeschreibung p {margin-bottom: 0;}
.referenz-beschreibung {max-width: 760px;margin-bottom: 32px;}
.referenz-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 50px;
}
.meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #555;
    background: var(--bg-light-gray);
    padding: 5px 14px;
    border-radius: 20px;
}
.meta-item dt {font-weight: 600;color: var(--text-color);}
.meta-item dd {margin: 0;}
.referenz-galerie {margin-bottom: 50px;}
.referenz-galerie ul {list-style: none;padding: 0;margin: 0;display: grid;grid-template-columns: repeat(3,1fr);gap: 16px;}
.referenz-galerie li {margin: 0;}
.referenz-galerie li a {position: relative;display: block;overflow: hidden;height: 100%;border-radius: 8px;}
.referenz-galerie li img {width: 100%;height: 100%;object-fit: cover;}
.referenz-galerie li a .overlay {width: 100%;position: absolute;height: 100%;top: 0;left: 0;right: 0;bottom: 0;background: var(--secondary-color);opacity: 0;transition: var(--transition);}
.referenz-galerie li a:hover .overlay {opacity: 0.6;transition: var(--transition);}
.referenz-galerie li a .overlay .icon-wrp {position: absolute;top: 50%;left: 50%;width: 45px;height: 45px;transform: translate(-50%, -50%);}
.referenz-galerie li a .overlay .icon-wrp img,
.referenz-galerie li a .overlay .icon-wrp svg {width: 100%;height: 100%;transform: scale(0);transition: var(--transition);filter: brightness(0) invert(1);}
.referenz-galerie li a:hover .overlay .icon-wrp img,
.referenz-galerie li a:hover .overlay .icon-wrp svg {transform: scale(1);transition: var(--transition);}
.btn--back {display: inline-flex;align-items: center;gap: 6px;color: var(--text-color);font-weight: 600;margin-bottom: 40px;font-size: 14px;text-decoration: none;}
.btn--back:hover {color: var(--primary-color);}

/* ========================================
   RESPONSIVE: NEW SECTIONS
   ======================================== */

/* =====================================================
   RESPONSIVE — TABLET (≤ 1024px)
   ===================================================== */
@media (max-width: 1024px) {
    /* Header height anpassen */
    * {--header-height: 72px;}

    /* Blöcke */
    .probleme-inner {grid-template-columns: 1fr;}
    .probleme-foto {display: none;}
    .leistungen-grid {grid-template-columns: repeat(2, 1fr);}
    .referenz-grid {grid-template-columns: repeat(2, 1fr);}
    .ueber-uns-inner {grid-template-columns: 1fr;}
    .ueber-uns-bild {margin-bottom: 40px;}
    footer .wrp {grid-template-columns: 1fr;}
    .footer-nav {grid-template-columns: repeat(2, 1fr);}
    .kontakt-layout {grid-template-columns: 1fr;}
    .faq-inner {grid-template-columns: 1fr;}
    .bewertungen-header {flex-direction: column;gap: 20px;}
    .bewertungen-score {text-align: left;}

    /* Stage Frontpage — etwas höher für mehr Großzügigkeit */
    .stage.frontpage {aspect-ratio: auto;height: min(calc(100dvh - var(--header-height)), 720px);min-height: 600px;}

    /* Stage Content: 100px oben, 60px unten — getestete Werte für 820/1024px */
    .stage .wrp {top: 100px;bottom: 60px;transform: translateX(-50%);display: flex;flex-direction: column;justify-content: center;}

    /* Stage Subpage */
    .stage.subpage.stage--with-content {min-height: 420px;margin-bottom: 60px;}

    /* TextBild gap kleiner */
    .textbild .wrp {gap: 32px;}

    /* Über-uns: Gap im Single-Column reduzieren */
    .ueber-uns-inner {gap: 32px;}

    /* Über-uns-Bild: Höhe deckeln im Single-Column-Layout */
    .ueber-uns-bild {max-height: 480px;overflow: hidden;}
    .ueber-uns-bild img {height: 480px;}

    /* Background-fixed auf iOS kaputt → scroll */
    .prozess {background-attachment: scroll;}
}

/* =====================================================
   RESPONSIVE — TABLET PORTRAIT (≤ 768px)
   ===================================================== */
@media (max-width: 768px) {
    * {--section-pad: 56px;}

    /* Abstände */
    .mb {margin-bottom: 60px;}
    .mb50 {margin-bottom: 30px;}

    /* Typografie Content */
    h1 {font-size: 30px;line-height: 1.15;}
    h2 {font-size: 26px;line-height: 1.2;}
    h3 {font-size: 16px;line-height: 1.35;}

    /* Stage Startseite — füllt sichtbaren Bereich unter dem Header */
    .stage.frontpage {aspect-ratio: auto;height: calc(100vh - var(--header-height));height: calc(100dvh - var(--header-height));min-height: 480px;}

    /* Stage Subpage ohne Content */
    .stage.subpage {aspect-ratio: auto;min-height: 220px;}

    /* Stage Subpage mit Content */
    .stage.subpage.stage--with-content {min-height: 360px;margin-bottom: 48px;aspect-ratio: auto;}
    .stage-intro {font-size: 15px;margin-bottom: 20px;}
    .stage-content {max-width: 100%;}

    /* Stage Overlay: auf Mobile von unten, damit Text links gut lesbar */
    .stage-overlay {background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.5) 60%, rgba(0,0,0,0.2) 100%);}

    /* Hero CTAs: gestapelt, volle Breite */
    .hero-ctas {flex-direction: column;align-items: stretch;gap: 10px;margin: 20px 0;}
    .hero-ctas .btn {width: 100%;justify-content: flex-start;box-sizing: border-box;}

    /* Trust-Liste untereinander */
    .hero-trust {flex-direction: column;gap: 6px;}
    /* Alle 3 Siegel in einer Zeile — kein 2-Spalten-Override */
    .hero-zertifikate {grid-template-columns: repeat(3, auto);gap: 12px;}
    .hero-zertifikate img {height: 44px;}

    /* Über-uns: Gap auf Tablet Portrait weiter reduzieren */
    .ueber-uns-inner {gap: 24px;}

    /* CTA Band */
    .cta-band {padding: 32px 0;}
    .cta-band .wrp {flex-direction: column;align-items: stretch;gap: 20px;}
    .cta-band-content {max-width: 100%;}
    .cta-band-text, .cta-band-text p {font-size: 20px;}
    .cta-band-btn {width: 100%;justify-content: flex-start;box-sizing: border-box;}

    /* Prozess */
    .prozess {padding: 60px 0;}
    .prozess-schritte {grid-template-columns: 1fr;gap: 60px;padding: 60px 0;}
    .prozess-header {max-width: 100%;}
    .prozess-line {display: none;}

    /* Leistungen */
    .leistungen-grid {grid-template-columns: repeat(2, 1fr);gap: 14px;}

    /* Referenzen */
    .referenz-grid {grid-template-columns: 1fr;}

    /* Probleme */
    .probleme-grid {grid-template-columns: 1fr;}

    /* Über uns */
    .ueber-uns-content {padding-left: 0;}

    /* Footer */
    .footer-nav {grid-template-columns: 1fr;}
    .bottom .wrp {flex-direction: column;gap: 10px;text-align: center;}
    .legal-nav ul {justify-content: center;}

    /* Standorte */
    .standort-grid {grid-template-columns: repeat(2, 1fr);}

    /* Bewertungen */
    .bewertung-wert {font-size: 48px;}

    /* Textbild: voll untereinander */
    .textbild .text {order: 1;}
    .textbild .bild {order: 2;}
    .textbild .wrp {grid-template-columns: 100%;gap: 24px;}
    /* Textbild-Bild: Höhe deckeln im Single-Column */
    .textbild .bild {max-height: 400px;overflow: hidden;}
    .textbild .bild img {height: 400px;}

    /* Blog */
    main.withsidebar .content .blog-grid {grid-template-columns: repeat(2, 1fr);}

    /* Accordion wrp volle Breite */
    .accordion .wrp {max-width: 100%;}

    /* Teasercards: max 2 Spalten — überschreibt PHP-Inline-Style */
    .teasercards .cards.no-carousel {grid-template-columns: repeat(2, 1fr) !important;}

    /* Galerie: max 3 Spalten — überschreibt PHP-Inline-Style */
    .gallery .glightbox-gallery {grid-template-columns: repeat(3, 1fr) !important;}
    .gallery .video-gallery-grid {grid-template-columns: repeat(2, 1fr) !important;}
}

/* =====================================================
   RESPONSIVE — SMARTPHONE (≤ 480px)
   ===================================================== */
@media (max-width: 480px) {
    * {--section-pad: 44px;}

    .mb {margin-bottom: 44px;}
    header .header-grid {
        grid-template-columns: 110px auto;
    }
    html.scrolled header .header-grid {
        grid-template-columns: 100px auto;
    }
    /* Typografie */
    h1 {font-size: 26px;line-height: 1.2;letter-spacing: -0.2px;}
    h2 {font-size: 22px;line-height: 1.25;}
    h3 {font-size: 15px;line-height: 1.4;}
    .home h1 {font-size: 32px;}
    .home h1 strong {font-size: 32px;}

    /* Stage — kein Override mehr nötig, 768px-Regel gilt */
    .stage.subpage.stage--with-content {min-height: 300px;margin-bottom: 36px;}
    .stage-intro {font-size: 14px;}

    /* Bilder deckeln auf Smartphone */
    .ueber-uns-bild {max-height: 300px;}
    .ueber-uns-bild img {height: 300px;}
    .textbild .bild {max-height: 260px;}
    .textbild .bild img {height: 260px;}

    /* Abstände auf Smartphone kompakter */
    .ueber-uns-inner {gap: 16px;}
    .prozess-schritte {gap: 40px;}
    .hero-zertifikate {gap: 8px;}
    .hero-zertifikate img {height: 36px;}

    /* FAQ Fragen kleiner */
    .faq-frage {font-size: 16px;padding: 14px 0;}

    /* Leistungen 1 Spalte */
    .leistungen-grid {grid-template-columns: 1fr;}

    /* Standorte 1 Spalte */
    .standort-grid {grid-template-columns: 1fr;}

    /* Teasercards 1 Spalte — !important überschreibt PHP-Inline-Style */
    .teasercards .cards.no-carousel {grid-template-columns: 1fr !important;}
    .teasercards .splide__arrow--prev {left: 10px;}
    .teasercards .splide__arrow--next {right: 10px;}

    /* Splide Arrows kleiner */
    .splide__arrow {width: 40px;height: 40px;font-size: 20px;}

    /* Probleme 1 Spalte bereits, Problem-Karten */
    .problem-karte {padding: 14px 16px;}

    /* CTA Band noch kompakter */
    .cta-band-text, .cta-band-text p {font-size: 18px;}
    .cta-band-btn-number {font-size: 15px;}

    /* Galerie 2 Spalten max — !important überschreibt PHP-Inline-Style */
    .gallery .glightbox-gallery {grid-template-columns: repeat(2, 1fr) !important;}
    .gallery .video-gallery-grid {grid-template-columns: 1fr !important;}

    /* Eyebrow etwas kleiner */
    .eyebrow {font-size: 11px;letter-spacing: 1.5px;}
}

/* =====================================================
   RESPONSIVE — KLEIN (≤ 375px)
   ===================================================== */
@media (max-width: 375px) {
    h1 {font-size: 22px;line-height: 1.25;}
    h2 {font-size: 20px;line-height: 1.3;}
    .home h1 {font-size: 28px;}
    .home h1 strong {font-size: 28px;}
    .cta-band-text, .cta-band-text p {font-size: 16px;}
}

/* =====================================================
   TOUCH DEVICES — Hover-Effekte deaktivieren
   ===================================================== */
@media (hover: none) {
    .leistung-karte:hover {transform: none;box-shadow: 0 2px 12px rgba(0,0,0,0.08);}
    .leistung-karte:hover img {transform: none;}
    .teasercard-item:hover {transform: none;box-shadow: 0 2px 12px rgba(0,0,0,0.08);}
    .teasercard-item:hover img {transform: none;}
    .referenz-karte:hover {transform: none;}
    .referenz-karte:hover img {transform: none;}
}

/* =====================================================
   MOBILE ONLY — Whatsapp nur Icon, kein Label
   ===================================================== */
@media (max-width: 768px) {
    .whatsapp-float span {display: none;}
    .whatsapp-float {padding: 0;width: 50px;height: 50px;border-radius: 50%;justify-content: center;bottom: 20px;right: 16px;}
}

.vision-trigger {right:inherit!important; left:20px!important; bottom:100px!important;transition: opacity 0.3s ease, visibility 0.3s ease;}
html.scrolled .vision-trigger {opacity: 0 !important;visibility: hidden;pointer-events: none;}
/* Kollidiert im geöffneten Mobilmenü mit der E-Mail-Adresse im Menüfuß */
body.nav-open .vision-trigger {opacity: 0 !important;visibility: hidden;pointer-events: none;}
.wpforms-submit-spinner {display:none!important;}

/* ========================================
   WPFORMS — Kontaktformular
   ======================================== */

/* Einheitliche Feldbreite auf Mobil — killt den ~8px-Spalten-Gutter beim Stapeln */
@media (max-width: 600px) {
    .wpforms-container .wpforms-field {width: 100% !important;margin-left: 0 !important;margin-right: 0 !important;}
}

/* Touch-Ziele auf min. 44px, Font-Size bleibt bei 16px gegen iOS-Zoom beim Fokus */
.wpforms-container .wpforms-field input[type="text"],
.wpforms-container .wpforms-field input[type="email"],
.wpforms-container .wpforms-field input[type="tel"],
.wpforms-container .wpforms-field textarea {
    min-height: 44px;
    font-size: 16px;
    box-sizing: border-box;
}
.wpforms-container .wpforms-field-checkbox ul li input[type="checkbox"] {
    width: 20px;
    height: 20px;
}
.wpforms-container .wpforms-field-checkbox ul li label {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-left: 6px;
}

/* Absenden-Button im CI-Look — gleiche Werte wie .btn (Zeile 85-101) */
.wpforms-container .wpforms-submit {
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 13px 28px;
    font-weight: 600;
    min-height: 48px;
    transition: var(--transition);
}
.wpforms-container .wpforms-submit:hover {
    background: #008cc8;
}
@media (max-width: 768px) {
    .wpforms-container .wpforms-submit {width: 100%;}
}