@charset "UTF-8";
/*
Theme Name: SE solar
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;}
.wpforms-submit-spinner {display:none!important;
}
/* ========================================
   CSS VARIABLES
   ======================================== */

/*
 * Alle Variablen liegen auf :root (NICHT auf *), damit sie vererbt werden.
 * Nur so lassen sie sich pro Bereich überschreiben, z. B.:
 *   .blog-page { --primary-color: #005eb8; }
 */

:root {
    /* Typography */
    --font-family: "Barlow", system-ui, sans-serif;
    --font-family-display: "Barlow Semi Condensed", sans-serif;
    --font-size: 18px;
    --line-height: calc(var(--font-size) * 1.6);

    /* Layout */
    --wrp-width: 1240px;
    --header-height: 83px;  /* Höhe des fixierten Headers (SE²: schlanke Ankernav statt Mastertheme-Mega-Menü) */
    --submenu-offset: 84px;  /* Offset für Desktop-Submenu */

    /* Colors */
    --primary-color: #fad82a;
    --secondary-color: #6a141d;
    --text-color: #5e4b4d;
    --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;

    /* Blog */
    --blog-content-width: 800px; /* Lesebreite im Beitragstext */

    /* SE² · Markenfarben (aus dem Logo) */
    --se2-sun-100: #f7ef95;
    --se2-sun-200: #f9e75a;
    --se2-sun-300: #fad82a;
    --se2-amber: #f6b21b;
    --se2-bordeaux: #6a141d;
    --se2-bordeaux-dark: #4a0e15;
    --se2-red: #c41340;
    --se2-ink: #2b1d1f;
    --se2-ink-600: #5e4b4d;
    --se2-ink-400: #85716f;
    --se2-paper: #fffcf2;
    --se2-sand: #fbf3da;
    --se2-white: #fff;
    --se2-line: #efe4c6;
    --se2-line-soft: #f3ead2;
    --se2-line-input: #e6dcc0;
    --se2-tint-yellow: #fef7cf;
    --se2-tint-yellow-2: #fffbe3;
    --se2-tint-red: #fbe3e8;
    --se2-on-dark: #f3dcdc;
    --se2-on-dark-2: #fbeede;

    /* SE² · Radien & Schatten */
    --se2-radius-input: 10px;
    --se2-radius-card: 16px;
    --se2-radius-lg: 20px;
    --se2-radius-xl: 22px;
    --se2-shadow-card: 0 6px 24px rgba(74, 14, 21, .07);
    --se2-shadow-card-hover: 0 16px 40px rgba(74, 14, 21, .12);
    --se2-shadow-hero-img: 0 24px 60px rgba(74, 14, 21, .18);
    --se2-shadow-form: 0 30px 70px rgba(0, 0, 0, .28);
    --se2-shadow-btn: 0 8px 22px rgba(246, 178, 27, .35);
}

/* ========================================
   SE² · LOKALE FONTS (Barlow, DSGVO-konform ohne Google-CDN)
   ======================================== */

@font-face {
    font-family: "Barlow";
    src: url("assets/fonts/barlow-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Barlow";
    src: url("assets/fonts/barlow-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Barlow";
    src: url("assets/fonts/barlow-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Barlow";
    src: url("assets/fonts/barlow-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Barlow Semi Condensed";
    src: url("assets/fonts/barlow-semi-condensed-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Barlow Semi Condensed";
    src: url("assets/fonts/barlow-semi-condensed-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ========================================
   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;}

/* Nur für Screenreader sichtbar */
.sr-only {position: absolute !important;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0 0 0 0);clip-path: inset(50%);white-space: nowrap;border: 0;}

/* Skip-Link (erster Tab-Stop) */
.skip-link {position: absolute;left: -9999px;top: 0;z-index: 9999;padding: 12px 16px;background: var(--primary-color);color: var(--bg-white);}
.skip-link:focus {left: 0;color: var(--bg-white);}

/* Sichtbarer Fokus für Tastaturnutzung */
:focus-visible {outline: 2px solid var(--primary-color);outline-offset: 3px;}

/* Bewegung reduzieren */
@media (prefers-reduced-motion: reduce) {
    html {scroll-behavior: auto;}
    *, *::before, *::after {animation-duration: .01ms !important;animation-iteration-count: 1 !important;transition-duration: .01ms !important;scroll-behavior: auto !important;}
}

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

h1, h2, h3 {margin: 0;font-family: var(--font-family-display);font-weight: 700;color: var(--se2-ink);}
a {text-decoration: none;outline: none;color: var(--text-color);transition: var(--transition);}
a:hover {color: var(--secondary-color);transition: var(--transition);}
.btn {padding: 12px 16px;background: var(--primary-color);display: inline-block; margin-top: 25px;}
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
   ======================================== */

/* Achtung: nur .site-header ansprechen, NICHT den Element-Selektor header –
   sonst erben auch <header>-Elemente im Content (z. B. .blog-header) die
   fixierte Positionierung. */
.site-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);}
.site-header .header-grid {display: grid;grid-template-columns: 200px auto;grid-template-rows: auto;justify-items: start;align-items: center;justify-content: space-between;}
.site-header .header-grid .logo {width: 100%;}
.site-header .header-grid .logo a {display: flex;align-items: center;}
.site-header .header-grid .mainnav-toggle {display: none;justify-self: end;}

/* ========================================
   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: 20px;margin-left: 40px;}
#mainnav ul.mainnav.desktop li:first-child {margin-left: 0;}
#mainnav ul.mainnav.desktop li a {display: block;color: var(--text-color);transition: var(--transition);padding: 30px 0;}
#mainnav ul.mainnav.desktop li a:hover, #mainnav ul > li.current-menu-item > a {color: var(--primary-color);transition: var(--transition);}

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

@media (min-width: 1080px) {
    #mainnav ul.mainnav.desktop {display: flex;align-items: center;margin: 0;}
    html.scrolled #mainnav ul.mainnav li a {padding: 15px 0;transition: var(--transition);}

    /* Submenu Level 1 */
    #mainnav ul.mainnav li.menu-item-has-children {position: relative;}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu {position: absolute;top: var(--submenu-offset);left: 0;display: block;height: auto;max-height: 0;overflow: hidden;}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li {width: 200px;height: 100%;padding: 8px 0 8px 7px;transition: 0.8s ease;background: var(--bg-light-gray);margin: 0;}
    #mainnav ul.mainnav li.menu-item-has-children:hover > ul.sub-menu {max-height: 674px;padding: 0;overflow: visible;margin-top: -6px;}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li:hover {background: var(--primary-color);}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li:hover a {color: var(--bg-white);}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li a {padding: 3px;}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li:last-child {margin-bottom: 0;}

    /* 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: 100%;top: 6px;overflow: hidden;}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li.menu-item-has-children:hover ul.sub-menu {overflow: visible;}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li.menu-item-has-children ul.sub-menu li {background: var(--bg-light-gray);}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li.menu-item-has-children ul.sub-menu li a {color: var(--text-color);}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li.menu-item-has-children ul.sub-menu li:hover a {color: var(--primary-color);}

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

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

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

    /* Offcanvas Panel */
    #mainnav ul.mainnav.smart {display: block;}
    #mainnav {position: fixed;top: 0;right: 0;bottom: 0;background: var(--bg-white);width: 100%;max-width: 500px;transform: translateX(103%);transition: var(--transition);box-shadow: var(--box-shadow);z-index: 2;}
    #mainnav.active {transform: translateX(0);transition: var(--transition);}

    /* Offcanvas Header */
    #mainnav .head {display: grid;grid-template-columns: auto auto 55px;align-items: center;padding: 20px;box-sizing: border-box;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}
    #mainnav .head p {margin: 0;font-size: 25px;color: var(--text-color);}
    #mainnav .head .buttons {display: flex;justify-content: center;justify-self: end;}
    #mainnav .head .buttons a {width: 50px;height: 50px;border-radius: 2px;background: var(--bg-light-gray);margin-left: 5px;display: flex;align-items: center;justify-content: space-around;}
    #mainnav .head .buttons a:first-child {margin-left: 0;}
    #mainnav .head .buttons a svg {width: 25px;height: 25px;}
    #mainnav .head .buttons a svg g path {stroke: var(--icon-gray);}

    /* Mobile Menu Items */
    #mainnav ul.mainnav li {padding: 0;box-sizing: border-box;margin: 0;background: var(--bg-gray);border-bottom: 1px solid var(--border-gray);list-style-type: none;}
    #mainnav ul.mainnav li a {font-size: var(--font-size);padding: 10px 45px 10px 5%;display: block;}

    /* Submenu Toggle Button */
    #mainnav .opensubnav {cursor: pointer;width: 49px;height: 49px;position: absolute;right: 0;background: var(--bg-white);display: block;z-index: 100;box-sizing: border-box;}
    #mainnav .opensubnav.active {background: var(--secondary-color);}
    #mainnav .opensubnav:after {content: '';transform: rotate(-45deg) translate(-50%, -50%);border: solid var(--secondary-color);border-width: 0 2px 2px 0;display: inline-block;padding: 3px;left: 50%;top: 42%;position: absolute;transition: var(--transition);}
    #mainnav .opensubnav.active:after {content: '';transform: rotate(45deg);-webkit-transform: rotate(45deg);border: solid var(--bg-white);border-width: 0 2px 2px 0;left: 19px;top: 18px;transition: var(--transition);}
    #mainnav address.contact {padding: 5%;box-sizing: border-box;display: block;}

    /* Submenu Level 1 */
    #mainnav li.menu-item-has-children ul.sub-menu {display: none;transition: var(--transition);margin-bottom: 0;}
    #mainnav li.menu-item-has-children.active ul.sub-menu {display: block;}
    #mainnav li.menu-item-has-children.active ul.sub-menu li a {background: var(--bg-white);padding-left: 10%;}
    #mainnav li.menu-item-has-children.active ul.sub-menu li ul.sub-menu li a {padding-left: 15%;}

    /* Submenu Level 2 */
    #mainnav li.menu-item-has-children ul.sub-menu li.menu-item-has-children .opensubnav {background: var(--bg-light-gray);}
    #mainnav li.menu-item-has-children.active ul.sub-menu li.menu-item-has-children ul.sub-menu {display: none;transition: var(--transition);}
    #mainnav li.menu-item-has-children.active ul.sub-menu li.menu-item-has-children.active ul.sub-menu {display: block;transition: var(--transition);}
    #mainnav ul.offcanvas-menu li.back a:before {display: none;}

    /* Hamburger Menu Toggle */
    .mainnav-toggle {border-radius: 2px;display: block;position: relative;z-index: 10;width: 50px;height: 50px;background: var(--primary-color);box-shadow: none;transition: var(--transition);}
    .mainnav-toggle.off {border-radius: 2px;display: block;position: absolute;z-index: 10;top: 50%;right: 0;transform: translateY(-50%);width: 50px;height: 50px;background: var(--primary-color);box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);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: 35px;cursor: pointer;}
    .mainnav-toggle .btn-mainnav-toggle span {display: block;width: 100%;box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3);border-radius: 4px;height: 2px;background: var(--bg-white);transition: all .3s;position: relative;}
    .mainnav-toggle .btn-mainnav-toggle span + span {margin-top: 7px;}
    .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);}
}

/* ========================================
   SEITEN-HEADER (Unterseiten: Impressum, Datenschutz, sonstige Pages)
   ======================================== */

/* Ersetzt die frühere mastertheme-Stage (Beitragsbild als Banner) – dieser
   Onepager braucht auf Unterseiten kein Bild, nur einen ruhigen,
   SE²-typischen Titelbereich vor dem eigentlichen Textinhalt. padding-bottom
   allein vergrößert nur die Sand-Fläche selbst, lässt den Content aber ohne
   Zwischenraum direkt daran anschließen – der eigentliche Abstand zum
   Content kommt daher aus margin-bottom, gestaffelt über drei Stufen. */
.se2-page-header {margin-top: var(--header-height);margin-bottom: 56px;background: var(--se2-sand);padding: 72px 0;}
.se2-page-header h1 {font-size: clamp(2.2rem, 4.2vw, 3.2rem);line-height: 1.08;letter-spacing: -0.01em;margin: 0;color: var(--se2-ink);}
.se2-page-header-lead {margin: 18px 0 0;font-size: 1.15rem;line-height: 1.55;color: var(--se2-ink-600);max-width: 42em;}

@media (max-width: 1024px) {
    .se2-page-header {padding: 56px 0;margin-bottom: 40px;}
}

@media (max-width: 600px) {
    .se2-page-header {padding: 40px 0;margin-bottom: 28px;}
}

/* ========================================
   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;}

/* Teasercards */
.teasercards {position: relative;}
.teasercards .wrp {position: relative;overflow: visible;}
.teasercards .cards.no-carousel {display: grid;grid-column-gap: 50px;grid-row-gap: 50px;margin: 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 .img-wrp {width: 100%;aspect-ratio: 2/1.5;display: block;}

@supports not (aspect-ratio: 2/1.5) {
    .teasercard-item .img-wrp {padding-top: 75%;position: relative;}
    .teasercard-item .img-wrp img {position: absolute;top: 0;left: 0;}
}

.teasercard-item .img-wrp img {width: 100%;height: 100%;object-fit: cover;}
.teasercard-item .teasercard-content {display: block;}
.teasercard-item .teasercard-content .btn {display: inline-block;}
.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: 50px;margin-bottom: 0;}
.gallery .glightbox-gallery li {list-style-type: none;margin: 0 0 25px 0;border-radius: 5px;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 .item-accordion-head {cursor: pointer;position: relative;background: #f2f2f2;margin-bottom: 10px;padding: 10px 25px 10px 10px;border: 1px solid #f2f2f2;}
.accordion .active .item-accordion-head {background-color: var(--bg-lighter-gray);}
.accordion .item-accordion-btn {width: 26px;height: 26px;float: right;margin: 0;cursor: pointer;position: absolute;right: 5px;top: 50%;transform: translateY(-50%);}
.accordion .item-accordion-btn:before {content: '+';color: var(--text-dark);position: absolute;width: 26px;height: 26px;text-align: center;line-height: 22px;font-size: 24px;}
.accordion .item-accordion {margin-bottom: 5px;}
.accordion .item-accordion.hidden .item-accordion-btn:before {content: '+';line-height: 26px;}
.accordion .item-accordion.active .item-accordion-btn:before {content: '-';line-height: 22px;}
.accordion .item-accordion.hidden.active .item-accordion-btn:before {content: '-';line-height: 22px;}
.accordion .item-accordion.hidden .item-accordion-content {display: none;padding: 20px 20px;background: var(--bg-lighter-gray);margin-bottom: 10px;}
.accordion .item-accordion.hidden .item-accordion-content:after {display: block;width: 0;height: 0;border-right: 100px solid #037CA9;border-top: 50px solid transparent;border-bottom: 50px solid transparent;}

/* ========================================
   SIDEBAR (Seiten)
   ======================================== */

/* Sidebar – bislang unverändertes mastertheme-Grau (--bg-light-gray), passte
   nicht zu den SE²-Karten/-Farben im restlichen Theme. */
main.withsidebar .sidebar {width: 100%;position: -webkit-sticky;position: sticky;top: 150px;background: var(--se2-paper);border: 1px solid var(--se2-line);border-radius: var(--se2-radius-card);box-shadow: var(--se2-shadow-card);padding: 28px 26px;box-sizing: border-box;}
.sidebar-contact h3, .sidebar-nav h3 {font-family: var(--font-family-display);font-weight: 700;font-size: 1.2rem;margin: 0 0 16px;color: var(--se2-ink);}
.sidebar-contact address.contact {font-style: normal;line-height: 1.7;color: var(--se2-ink-600);}
.sidebar-contact address.contact a {display: block;margin-top: 10px;font-weight: 600;color: var(--se2-bordeaux);text-decoration: none;}
.sidebar-contact address.contact a:hover {color: var(--se2-red);}
.sidebar-nav ul {list-style: none;margin: 0;padding: 0;display: flex;flex-direction: column;gap: 2px;}
.sidebar-nav ul li {margin: 0;list-style: none;}
.sidebar-nav ul a {display: block;padding: 9px 0;color: var(--se2-ink-600);text-decoration: none;border-bottom: 1px solid var(--se2-line);transition: color .2s;}
.sidebar-nav ul li:last-child a {border-bottom: none;}
.sidebar-nav ul a:hover {color: var(--se2-red);}

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

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

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

.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;}
}

/* Tablet Portrait & Below (768px) */
@media (max-width: 768px) {
    /* Text + Image */
    .textbild .text {order: 1;}
    .textbild .bild {order: 2;}
    .textbild .wrp {grid-template-columns: 100%;gap: 50px;}
}

/* Mobile & Below (550px) */
@media (max-width: 550px) {
    /* Gallery */
    .gallery .video-gallery-grid {grid-template-columns: 100%;}
    .gallery .glightbox-gallery {grid-template-columns: repeat(2, 1fr);}
}

/* Mobile Small (500px) */
@media (max-width: 500px) {
    /* Margins */
    .mb {margin-bottom: 50px;}
    .mb50 {margin-bottom: 25px;}

    /* Teasercards */
    .teasercards .splide__arrow--prev {left: 10px;}
    .teasercards .splide__arrow--next {right: 10px;}
    .teasercards .cards.no-carousel {grid-template-columns: 100%;}
}

/* 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;}
}

@media (max-width: 500px) {
    .splide__arrow--prev {left: 10px;}
    .splide__arrow--next {right: 10px;}
    .splide__arrow {width: 40px;height: 40px;font-size: 20px;}
}
/* ========================================
   BLOG
   ======================================== */

/* Seitengerüst – Abstand wegen des fixierten Headers */
.blog-page {padding: calc(var(--header-height) + 50px) 0 100px 0;}
.blog-header {margin-bottom: 50px;}

/* Listen ohne Aufzählungszeichen (Breadcrumb, Filter, Tags, Pagination) */
.breadcrumbs__list, .blog-filter__list, .post-tags__list, .pagination__list {display: flex;flex-wrap: wrap;gap: 10px;margin: 0;padding: 0;list-style: none;}
.breadcrumbs__list li, .blog-filter__list li, .post-tags__list li, .pagination__list li {margin: 0;list-style: none;}
.breadcrumbs__item + .breadcrumbs__item:before {content: "/";margin-right: 10px;}

/* Meta-Angaben (Datum, Lesezeit, Autor) – auch in der Teasercard */
.post-meta {display: block;}
.post-meta__item + .post-meta__item:before {content: "•";margin: 0 8px;}

/* Fließtext */
.entry-content {max-width: var(--blog-content-width);}
.entry-content img {max-width: 100%;height: auto;}
.blog-page--single .post-image img {display: block;width: 100%;height: auto;}
.post-tags {max-width: var(--blog-content-width);}

/* Abstände der Beitragsabschnitte */
.blog-filter, .blog-page--single .post-image, .post-tags, .post-back, .pagination, .related-posts {margin-top: 50px;}
.related-posts__title {margin-bottom: 25px;}

/* Suchformular */
.search-form {display: flex;gap: 10px;}

/* ========================================
   STARTSEITE — section-eigene Styles (SE²)
   ======================================== */

/* Gemeinsame Bausteine */
.se2-wrap {max-width: 1200px;margin: 0 auto;padding: 0 24px;box-sizing: border-box;}
.se2-wrap-narrow {max-width: 1100px;margin: 0 auto;padding: 0 24px;box-sizing: border-box;}
section[id] {scroll-margin-top: calc(var(--header-height) + 16px);}

.se2-btn {display: inline-flex;align-items: center;gap: 10px;font-family: var(--font-family-display);font-weight: 700;font-size: 1.15rem;padding: 16px 28px;border-radius: 999px;text-decoration: none;transition: background .25s, color .25s;white-space: nowrap;}
.se2-btn--primary {background: var(--se2-sun-300);color: var(--se2-bordeaux-dark);box-shadow: var(--se2-shadow-btn);}
.se2-btn--primary:hover {background: var(--se2-amber);color: var(--se2-bordeaux-dark);}
.se2-btn--outline {border: 2px solid var(--se2-bordeaux);color: var(--se2-bordeaux);}
.se2-btn--outline:hover {background: var(--se2-bordeaux);color: #fff;}
.se2-btn--on-dark {border-color: rgba(255, 255, 255, .7);color: #fff;}
.se2-btn--on-dark:hover {background: #fff;color: var(--se2-bordeaux-dark);}

@media (max-width: 480px) {
    /* Kleine Phones (≤320–480px): lange Button-Labels + white-space:nowrap
       liefen über den Viewport hinaus (Textbreite > verfügbare Breite).
       Volle Breite + Zeilenumbruch erlauben behebt das Overflow und ist auf
       schmalen Screens ohnehin die bessere Tap-Target-Größe. */
    .se2-btn {white-space: normal;text-align: center;}
    .se2-hero-actions .se2-btn, .leistungen-closing > .se2-btn {width: 100%;}
}

/* Header */
.site-header {background: rgba(255, 252, 242, .92);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);box-shadow: none;border-bottom: 1px solid var(--se2-line);}
.site-header .header-grid {grid-template-columns: auto 1fr;}
.se2-brand {display: flex;align-items: center;gap: 12px;color: var(--se2-ink);}
.se2-brand-mark {width: 52px;height: 52px;display: block;}
.se2-brand-text {display: flex;flex-direction: column;line-height: 1.1;}
.se2-brand-name {font-family: var(--font-family-display);font-weight: 700;font-size: 1.25rem;color: var(--se2-ink);}
.se2-brand-location {font-size: .72rem;font-weight: 600;letter-spacing: .08em;text-transform: uppercase;color: var(--se2-ink-400);white-space: nowrap;}
.se2-nav-phone, .se2-nav-phone--mobile {display: none;}
#mainnav ul.mainnav.desktop li a:hover {color: var(--se2-red);}

@media (min-width: 1080px) {
    #mainnav {display: flex;align-items: center;justify-self: end;gap: 32px;}
    #mainnav ul.mainnav.desktop {gap: 24px;}
    #mainnav ul.mainnav.desktop li {font-size: 1rem;font-weight: 600;margin-left: 0;}
    #mainnav ul.mainnav.desktop li a, html.scrolled #mainnav ul.mainnav.desktop li a {padding: 0;color: var(--se2-ink-600);transition: color .25s;}
    .se2-nav-phone {display: flex;align-items: center;gap: 8px;font-weight: 700;color: var(--se2-bordeaux);font-size: 1rem;white-space: nowrap;margin-left: 0;}
    .se2-nav-phone svg {width: 18px;height: 18px;flex: none;}
}

@media (max-width: 1079px) {
    /* .site-header hat backdrop-filter (Sticky-Blur) – das erzeugt einen
       eigenen Containing Block für position:fixed-Nachfahren, wodurch
       #mainnav/#mainnav-overlay ihr "bottom:0" nur bis zum Header-Ende
       (~82px) statt bis zum Viewport-Ende auflösen. Explizite Höhe in
       vh/dvh umgeht das, weil Viewport-Einheiten davon nicht betroffen sind. */
    #mainnav {height: 100vh;height: 100dvh;background: var(--se2-paper);}
    #mainnav-overlay {height: 100vh;height: 100dvh;background: rgba(43, 29, 31, .35);}

    #mainnav .head {display: flex;justify-content: flex-end;padding: 16px 20px;box-shadow: none;border-bottom: 1px solid var(--se2-line);}
    #mainnav ul.mainnav.smart {padding: 8px 0;}
    #mainnav ul.mainnav.smart li {background: none;border-bottom: 1px solid var(--se2-line);}
    #mainnav ul.mainnav.smart li a {font-size: 1.1rem;font-weight: 600;color: var(--se2-ink);padding: 16px 24px;}
    #mainnav ul.mainnav.smart li a:hover {color: var(--se2-red);}
    .se2-nav-phone--mobile {display: flex;align-items: center;gap: 10px;margin: 12px 24px;padding: 14px 20px;background: var(--se2-sand);border-radius: 999px;font-weight: 700;color: var(--se2-bordeaux);font-size: 1.05rem;text-decoration: none;}
    .se2-nav-phone--mobile svg {width: 18px;height: 18px;flex: none;}

    /* Offcanvas-Schließen-Button: eigentliche Ursache dafür, dass er gar
       nicht zu sehen war – die generische Basisregel
       ".site-header .header-grid .mainnav-toggle {display:none}" (oben,
       ohne Media Query, Spezifität 0-3-0) sitzt VOR dieser Sektion, aber
       gewinnt qua Spezifität gegen die mastertheme-eigene
       ".mainnav-toggle {display:block}" aus der Mobile-Media-Query
       (Spezifität nur 0-1-0) – der Button war also unabhängig von jedem
       Styling schlicht display:none. Der Selektor hier (#mainnav .head
       .mainnav-toggle, Spezifität 1-2-0) gewinnt dank ID gegen beide und
       muss deshalb display selbst explizit setzen. Look: eigener SE²-Style
       statt mastertheme-Default (gelbes Quadrat, weiße Balken, ging im
       Papier-Hintergrund unter). Die Balken→X-Animation beim Öffnen/
       Schließen kommt weiter aus app.js/initMobileNavigation(). */
    #mainnav .head .mainnav-toggle {display: flex;align-items: center;justify-content: center;width: 44px;height: 44px;border-radius: 999px;background: var(--se2-sand);box-shadow: var(--se2-shadow-card);transition: background .25s;}
    #mainnav .head .mainnav-toggle:hover {background: var(--se2-tint-red);}
    #mainnav .head .mainnav-toggle:focus-within {outline: 2px solid var(--se2-red);outline-offset: 3px;}
    #mainnav .head .btn-mainnav-toggle {width: 18px;}
    #mainnav .head .btn-mainnav-toggle span {background: var(--se2-bordeaux);box-shadow: none;}
}

/* ==== SE²-Hero ==== */
.se2-hero {position: relative;background: var(--se2-paper);overflow-x: clip;overflow-y: visible;margin-top: var(--header-height);}
.se2-hero-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));gap: 64px;align-items: center;padding-top: 80px;padding-bottom: 104px;}
.se2-hero-content {position: relative;z-index: 2;}
.se2-hero-bars {display: flex;gap: 4px;margin-bottom: 26px;}
.se2-hero-bars span {width: 28px;height: 6px;border-radius: 3px;}
.se2-hero-bars span:nth-child(1) {background: var(--se2-sun-300);}
.se2-hero-bars span:nth-child(2) {background: var(--se2-amber);}
.se2-hero-bars span:nth-child(3) {background: var(--se2-bordeaux);}
.se2-hero-bars span:nth-child(4) {background: var(--se2-red);}
.se2-hero h1 {font-size: clamp(2.6rem, 5.2vw, 4.25rem);line-height: 1;letter-spacing: -0.01em;margin: 0 0 24px;color: var(--se2-ink);}
.se2-hero-subline {font-size: 1.3rem;line-height: 1.5;color: var(--se2-ink-600);margin: 0 0 36px;max-width: 30em;}
.se2-hero-actions {display: flex;gap: 14px;flex-wrap: wrap;}
.se2-hero-trust {display: flex;gap: 8px 18px;flex-wrap: wrap;margin-top: 30px;font-size: .95rem;font-weight: 600;color: var(--se2-ink-600);list-style: none;padding: 0;}
.se2-hero-trust li {display: flex;align-items: center;gap: 6px;white-space: nowrap;margin: 0;}
.se2-hero-trust li svg {width: 16px;height: 16px;color: var(--se2-red);flex: none;}
.se2-hero-trust--inline {color: var(--se2-on-dark-2);font-size: 1rem;margin-top: 28px;}
.se2-hero-trust-sep {color: var(--se2-sun-300);}

.se2-hero-media {position: relative;}
.se2-hero-image {position: relative;z-index: 2;aspect-ratio: 4/3;border-radius: var(--se2-radius-lg);box-shadow: var(--se2-shadow-hero-img);overflow: hidden;}
.se2-hero-image img {width: 100%;height: 100%;object-fit: cover;display: block;}

/* Hero-Sonne */
.se2-sun {position: absolute;width: min(100%, 480px);aspect-ratio: 1;top: 50%;right: -18%;transform: translateY(-50%);pointer-events: none;z-index: 1;}
.se2-sun-glow {position: absolute;inset: -3%;border-radius: 50%;background: radial-gradient(closest-side, rgba(250, 216, 42, .55) 70%, rgba(250, 216, 42, 0) 100%);opacity: .55;}
.se2-sun-rays {position: absolute;inset: -14%;width: auto;height: auto;display: block;opacity: 1;}
.se2-sun-disc {position: relative;width: 100%;height: 100%;border-radius: 50%;overflow: hidden;display: flex;flex-direction: column;gap: 2%;background: var(--se2-paper);}
.se2-sun-band {flex: none;transform-origin: center;}
.se2-sun-band:nth-child(1) {height: 17%;}
.se2-sun-band:nth-child(2) {height: 16%;}
.se2-sun-band:nth-child(3) {height: 16%;}
.se2-sun-band:nth-child(4) {height: 16%;}
.se2-sun-band:nth-child(5) {height: 14%;}
.se2-sun-band:nth-child(6) {height: 11%;}

/* Eintritts- und Loop-Animation nur, wenn JS die Klasse setzt (initSe2Sun, js/app.js) — ohne JS bzw. bei reduzierter Bewegung bleibt die Sonne statisch sichtbar. */
.se2-hero.se2-sun-animate .se2-sun-disc {animation: se2Rise 1.6s cubic-bezier(.22, .61, .36, 1) both;}
.se2-hero.se2-sun-animate .se2-sun-band {animation: se2Band .9s cubic-bezier(.22, .61, .36, 1) both;}
.se2-hero.se2-sun-animate .se2-sun-band:nth-child(1) {animation-delay: .35s;}
.se2-hero.se2-sun-animate .se2-sun-band:nth-child(2) {animation-delay: .47s;}
.se2-hero.se2-sun-animate .se2-sun-band:nth-child(3) {animation-delay: .59s;}
.se2-hero.se2-sun-animate .se2-sun-band:nth-child(4) {animation-delay: .71s;}
.se2-hero.se2-sun-animate .se2-sun-band:nth-child(5) {animation-delay: .83s;}
.se2-hero.se2-sun-animate .se2-sun-band:nth-child(6) {animation-delay: .95s;}
.se2-hero.se2-sun-animate .se2-sun-rays {animation: se2Fade 1.2s 1.4s ease both, se2Spin 320s linear infinite;}
.se2-hero.se2-sun-animate .se2-sun-glow {animation: se2Glow 13s 1.6s ease-in-out infinite;}

@keyframes se2Rise {from {transform: translateY(60px);opacity: 0;} to {transform: none;opacity: 1;}}
@keyframes se2Band {from {transform: scaleX(.2);opacity: 0;} to {transform: none;opacity: 1;}}
@keyframes se2Glow {0%, 100% {transform: scale(1);opacity: .55;} 50% {transform: scale(1.07);opacity: .9;}}
@keyframes se2Spin {to {transform: rotate(360deg);}}
@keyframes se2Fade {from {opacity: 0;} to {opacity: 1;}}

/* Hero-Variante „vollflächig“ */
.se2-hero--full {min-height: 680px;display: flex;flex-direction: column;justify-content: flex-end;background: var(--se2-bordeaux-dark);}
.se2-hero-media--full {position: absolute;inset: 0;}
.se2-hero-media--full img {width: 100%;height: 100%;object-fit: cover;display: block;}
.se2-hero-scrim {position: absolute;inset: 0;pointer-events: none;background: linear-gradient(100deg, rgba(74, 14, 21, .94) 0%, rgba(74, 14, 21, .78) 38%, rgba(74, 14, 21, .1) 72%);}
.se2-hero-inner--full {position: relative;padding-top: 140px;padding-bottom: 80px;pointer-events: none;}
.se2-hero-inner--full .se2-hero-content {max-width: 640px;pointer-events: auto;}
.se2-hero--full h1 {color: #fff;font-size: clamp(2.6rem, 5.2vw, 4.5rem);}
.se2-hero--full .se2-hero-subline {color: var(--se2-on-dark-2);}
.se2-hero-stripes {position: relative;display: flex;flex-direction: column;gap: 3px;}
.se2-hero-stripes span {height: 8px;}
.se2-hero-stripes span:nth-child(1) {background: var(--se2-sun-300);}
.se2-hero-stripes span:nth-child(2) {background: var(--se2-amber);}
.se2-hero-stripes span:nth-child(3) {background: var(--se2-red);}

/* Hero (Split-Layout) auf Tablet/Mobile: Grid ist hier schon einspaltig
   gestapelt (auto-fit kippt unter ~984px Inhaltsbreite). Bild + Sonne nahmen
   dort vor dem eigentlichen Inhalt zu viel Raum ein – ab iPad-mini-Breite
   abwärts daher reiner Text-Hero statt verkleinertem Bild. */
@media (max-width: 1024px) {
    .se2-hero-grid {grid-template-columns: 1fr;gap: 0;padding-top: 64px;padding-bottom: 56px;}
    .se2-hero-grid .se2-hero-media {display: none;}
}

/* ==== Vertrauen ==== */
.vertrauen {background: #fff;padding: 104px 0;}
.vertrauen h2 {font-size: clamp(2rem, 3.4vw, 2.75rem);line-height: 1.1;margin: 0 0 52px;max-width: 18em;}
.vertrauen-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));gap: 20px;}
.vertrauen-card {background: var(--se2-paper);border: 1px solid var(--se2-line);border-radius: var(--se2-radius-card);padding: 32px 30px;display: flex;flex-direction: column;gap: 12px;}
.vertrauen-number {font-family: var(--font-family-display);font-weight: 700;font-size: 2.4rem;line-height: 1;color: var(--se2-amber);}
.vertrauen-card h3 {font-size: 1.3rem;margin: 6px 0 0;line-height: 1.2;}
.vertrauen-card p {margin: 0;font-size: 1rem;line-height: 1.55;color: var(--se2-ink-600);}

/* ==== Problem ==== */
.problem {background: var(--se2-sand);padding: 104px 0;}
.problem-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));gap: 48px 72px;align-items: start;}
.problem-text h2 {font-size: clamp(2rem, 3.4vw, 2.75rem);line-height: 1.1;margin: 0 0 26px;}
.problem-text p {margin: 0;line-height: 1.65;color: var(--se2-ink-600);max-width: 34em;}
.problem-points {display: flex;flex-direction: column;gap: 12px;}
.problem-point {display: flex;gap: 16px;align-items: flex-start;background: #fff;border-radius: 14px;padding: 20px 22px;}
.problem-point-icon {flex: none;width: 30px;height: 30px;border-radius: 999px;background: var(--se2-tint-red);color: var(--se2-red);display: grid;place-items: center;}
.problem-point-icon svg {width: 15px;height: 15px;}
.problem-point span:last-child {line-height: 1.5;padding-top: 2px;}
.problem-closing {margin-top: 14px;display: flex;align-items: center;gap: 16px;background: var(--se2-bordeaux);border-radius: 14px;padding: 20px 22px;}
.problem-closing-icon {flex: none;width: 30px;height: 30px;border-radius: 999px;background: var(--se2-sun-300);color: var(--se2-bordeaux-dark);display: grid;place-items: center;}
.problem-closing-icon svg {width: 16px;height: 16px;}
.problem-closing p {margin: 0;font-size: 1.6rem;line-height: 1.2;font-weight: 700;color: #fff;}

/* ==== Lösung (Leistungen) ==== */
.leistungen {background: var(--se2-paper);padding: 104px 0;}
.leistungen-head {display: grid;grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));gap: 24px 72px;align-items: end;margin-bottom: 56px;}
.leistungen-head h2 {font-size: clamp(2rem, 3.4vw, 2.75rem);line-height: 1.1;margin: 0;}
.leistungen-head p {margin: 0;font-size: 1.15rem;line-height: 1.6;color: var(--se2-ink-600);}
/* flex-wrap mit flex:1 1 300px ließ die 3. Karte zwischen ~700–950px allein
   in einer Reihe stehen und auf fast volle Breite wachsen – feste Stufen
   (1 Spalte / 3 Spalten) statt frei umbrechendem Flex vermeiden das. */
.leistungen-cards {display: grid;grid-template-columns: 1fr;gap: 20px 24px;align-items: stretch;}
@media (min-width: 1000px) {
    .leistungen-cards {grid-template-columns: repeat(3, minmax(0, 1fr));}
}
.leistung-card {min-width: 0;display: flex;}
.leistung-card-inner {flex: 1;background: #fff;border-radius: var(--se2-radius-lg);box-shadow: var(--se2-shadow-card);padding: 30px 28px 26px;display: flex;flex-direction: column;gap: 14px;transition: transform .28s, box-shadow .28s;}
.leistung-card:hover .leistung-card-inner {transform: translateY(-3px);box-shadow: var(--se2-shadow-card-hover);}
.leistung-card-head {display: flex;align-items: center;gap: 14px;}
.leistung-number {flex: none;width: 48px;height: 48px;border-radius: 999px;display: grid;place-items: center;font-family: var(--font-family-display);font-weight: 700;font-size: 1.3rem;background: var(--se2-sun-300);color: var(--se2-bordeaux-dark);}
.leistung-card:nth-child(2) .leistung-number {background: var(--se2-amber);}
.leistung-card:nth-child(3) .leistung-number {background: var(--se2-red);color: #fff;}
.leistung-card-head h3 {font-size: 1.6rem;margin: 0;}
.leistung-claim {font-weight: 600;color: var(--se2-red);font-size: .95rem;margin-top: 2px;}
.leistung-card-inner > p {margin: 0;line-height: 1.62;color: var(--se2-ink-600);font-size: 1rem;}
.leistung-partner {margin-top: auto;display: flex;flex-wrap: wrap;align-items: baseline;gap: 4px 10px;border-top: 1px solid var(--se2-line-soft);padding-top: 14px;}
.leistung-partner-label {font-size: .72rem;font-weight: 700;letter-spacing: .12em;text-transform: uppercase;color: var(--se2-ink-400);}
.leistung-partner-name {font-weight: 700;color: var(--se2-bordeaux);font-size: .98rem;}
.leistungen-closing {margin-top: 28px;display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 18px 32px;background: var(--se2-sand);border-radius: 18px;padding: 26px 30px;}
.leistungen-closing-text {flex: 1 1 520px;min-width: 0;display: flex;flex-direction: column;gap: 14px;}
.leistungen-closing-text > p {margin: 0;font-family: var(--font-family-display);font-weight: 700;font-size: 1.35rem;line-height: 1.25;}
.leistungen-closing-points {list-style: none;margin: 0;padding: 0;display: flex;flex-wrap: wrap;gap: 8px 24px;color: var(--se2-ink);}
.leistungen-closing-points li {display: flex;align-items: center;gap: 8px;font-weight: 600;font-size: .98rem;white-space: nowrap;margin: 0;}
.leistungen-closing-points li svg {width: 16px;height: 16px;color: var(--se2-red);flex: none;}
.leistungen-closing .se2-btn {font-size: 1.1rem;padding: 14px 24px;}

/* ==== Ablauf ==== */
.ablauf {background: var(--se2-bordeaux);color: #fff;padding: 104px 0;}
.ablauf h2 {font-size: clamp(2rem, 3.4vw, 2.75rem);line-height: 1.1;margin: 0 0 60px;color: #fff;}
.ablauf-steps {list-style: none;margin: 0;padding: 0;display: grid;grid-template-columns: 1fr;gap: 44px 32px;}
/* auto-fit erzeugte zwischen ~820–1059px eine 3+1-Zeile (Schritt 4 landete
   allein in einer eigenen Reihe) – mit der Verbindungslinie zwischen den
   Nummern sah das unfertig aus. Feste Stufen statt auto-fit vermeiden das. */
@media (min-width: 480px) {
    .ablauf-steps {grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (min-width: 1060px) {
    .ablauf-steps {grid-template-columns: repeat(4, minmax(0, 1fr));}
}
.ablauf-step {display: flex;flex-direction: column;gap: 14px;}
.ablauf-step-head {display: flex;align-items: center;gap: 14px;}
.ablauf-number {flex: none;width: 54px;height: 54px;border-radius: 999px;display: grid;place-items: center;font-family: var(--font-family-display);font-weight: 700;font-size: 1.4rem;background: var(--se2-sun-100);color: var(--se2-bordeaux-dark);}
.ablauf-step:nth-child(2) .ablauf-number {background: var(--se2-sun-300);}
.ablauf-step:nth-child(3) .ablauf-number {background: var(--se2-amber);}
.ablauf-step:nth-child(4) .ablauf-number {background: var(--se2-red);color: #fff;}
.ablauf-line {flex: 1;height: 2px;background: rgba(255, 255, 255, .2);}
.ablauf-step:last-child .ablauf-line {visibility: hidden;}
.ablauf-step h3 {font-size: 1.45rem;margin: 6px 0 0;line-height: 1.2;color: #fff;}
.ablauf-step p {margin: 0;line-height: 1.6;color: var(--se2-on-dark);font-size: 1rem;}

/* ==== Beispielrechnung ==== */
.beispielrechnung {background: var(--se2-paper);padding: 104px 0;}
.beispielrechnung-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));gap: 48px 72px;align-items: start;}
.beispielrechnung-intro h2 {font-size: clamp(2rem, 3.4vw, 2.75rem);line-height: 1.1;margin: 0 0 22px;}
.beispielrechnung-lead {margin: 0 0 40px;font-size: 1.2rem;line-height: 1.55;color: var(--se2-ink-600);}
.beispielrechnung-intro > p:not(.beispielrechnung-lead) {margin: 0;line-height: 1.65;color: var(--se2-ink-600);}
.beispielrechnung-kpis {display: grid;grid-template-columns: 1fr 1fr;gap: 16px;margin-bottom: 32px;}
.beispielrechnung-kpi {border-radius: 18px;padding: 24px;}
.beispielrechnung-kpi--primary {background: var(--se2-sun-300);}
.beispielrechnung-kpi--primary .beispielrechnung-kpi-label {color: var(--se2-bordeaux);}
.beispielrechnung-kpi--primary .beispielrechnung-kpi-value {color: var(--se2-bordeaux-dark);}
.beispielrechnung-kpi--dark {background: var(--se2-bordeaux);}
.beispielrechnung-kpi--dark .beispielrechnung-kpi-label {color: var(--se2-sun-100);}
.beispielrechnung-kpi--dark .beispielrechnung-kpi-value {color: #fff;}
.beispielrechnung-kpi-label {font-size: .8rem;font-weight: 700;letter-spacing: .1em;text-transform: uppercase;}
.beispielrechnung-kpi-value {font-family: var(--font-family-display);font-size: 2.6rem;line-height: 1.05;font-weight: 700;margin-top: 8px;}
.beispielrechnung-table {background: #fff;border-radius: var(--se2-radius-lg);box-shadow: var(--se2-shadow-card);overflow: hidden;}
.beispielrechnung-table table {width: 100%;border-collapse: collapse;font-size: 1rem;}
.beispielrechnung-table thead tr {background: var(--se2-sand);}
.beispielrechnung-table th[scope="col"] {text-align: left;padding: 14px 26px;font-size: .8rem;letter-spacing: .1em;text-transform: uppercase;color: var(--se2-ink-400);}
.beispielrechnung-table th[scope="col"]:last-child {text-align: right;}
.beispielrechnung-table tbody tr {border-top: 1px solid var(--se2-line-soft);}
.beispielrechnung-table th[scope="row"] {text-align: left;font-weight: 400;color: var(--se2-ink-600);padding: 13px 26px;}
.beispielrechnung-table td {text-align: right;font-weight: 600;padding: 13px 26px;}
.beispielrechnung-table tr.is-highlighted {background: var(--se2-tint-yellow-2);border-top: 2px solid var(--se2-sun-300);}
.beispielrechnung-table tr.is-highlighted th, .beispielrechnung-table tr.is-highlighted td {font-weight: 700;color: var(--se2-bordeaux);}
.beispielrechnung-disclaimer {margin: 20px 4px 0;font-size: .875rem;line-height: 1.6;color: var(--se2-ink-400);}

/* ==== Über SE² ==== */
.ueber {background: var(--se2-sand);padding: 104px 0;}
.ueber-flex {display: flex;flex-wrap: wrap;gap: 48px 56px;align-items: center;}
.ueber-media {position: relative;flex: 0 1 420px;min-width: min(100%, 300px);}
.ueber-media img {width: 100%;height: auto;aspect-ratio: 4/5;object-fit: cover;display: block;border-radius: var(--se2-radius-lg);box-shadow: 0 24px 60px rgba(74, 14, 21, .16);}
.ueber-text {flex: 1 1 420px;min-width: 0;}
.ueber-text h2 {font-size: clamp(2rem, 3.4vw, 2.75rem);line-height: 1.1;margin: 0 0 26px;}
.ueber-copy p {margin: 0 0 18px;line-height: 1.7;color: var(--se2-ink-600);}
.ueber-copy p:last-child {margin-bottom: 32px;}
.ueber-signature {display: flex;align-items: center;gap: 16px;border-top: 1px solid #eadcb4;padding-top: 22px;}
.ueber-signature img {width: 48px;height: 48px;}
.ueber-signature-name {font-family: var(--font-family-display);font-weight: 700;font-size: 1.3rem;}
.ueber-signature-firma {font-size: .95rem;color: var(--se2-ink-400);}

/* ==== Referenzen ==== */
.referenzen {background: #fff;padding: 104px 0;}
.referenzen h2 {font-size: clamp(2rem, 3.4vw, 2.75rem);line-height: 1.1;margin: 0 0 44px;}
.referenzen-grid {display: grid;grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);grid-template-rows: 260px 260px;gap: 16px;}
.referenzen-tile {position: relative;border-radius: 18px;overflow: hidden;display: block;}
.referenzen-tile--main {grid-row: span 2;}
.referenzen-tile img {width: 100%;height: 100%;object-fit: cover;display: block;}
.referenzen-zoom {position: absolute;top: 12px;right: 12px;width: 38px;height: 38px;border-radius: 999px;background: rgba(255, 255, 255, .92);color: var(--se2-bordeaux);display: grid;place-items: center;box-shadow: 0 4px 12px rgba(0, 0, 0, .15);transition: background .2s;}
.referenzen-zoom svg {width: 18px;height: 18px;}
.referenzen-tile--main .referenzen-zoom {top: 14px;right: 14px;width: 42px;height: 42px;}
.referenzen-tile--main .referenzen-zoom svg {width: 20px;height: 20px;}
.referenzen-tile:hover .referenzen-zoom {background: var(--se2-sun-300);}

@media (max-width: 720px) {
    .referenzen-grid {grid-template-columns: 1fr 1fr;grid-template-rows: repeat(3, 220px);}
    .referenzen-tile--main {grid-column: span 2;grid-row: span 1;}
}
@media (max-width: 420px) {
    .referenzen-grid {grid-template-columns: 1fr;grid-template-rows: repeat(5, 220px);}
    .referenzen-tile--main {grid-column: span 1;}
}

/* ==== FAQ + Kontaktkarte ==== */
.faq-sektion {background: var(--se2-paper);padding: 104px 0;}
.faq-flex {display: flex;flex-wrap: wrap;gap: 48px 64px;align-items: flex-start;}
.faq-aside {flex: 1 1 340px;min-width: 0;position: sticky;top: calc(var(--header-height) + 30px);display: flex;flex-direction: column;gap: 32px;}
.faq-aside h2 {font-size: clamp(2rem, 3.4vw, 2.75rem);line-height: 1.1;margin: 0 0 20px;}
.faq-card {position: relative;overflow: hidden;background: var(--se2-bordeaux);color: #fff;border-radius: var(--se2-radius-lg);padding: 28px 28px 30px;}
.faq-card-decor {position: absolute;right: -70px;bottom: -70px;width: 200px;height: 200px;border-radius: 50%;opacity: .22;background: linear-gradient(to bottom, var(--se2-sun-300) 0 30%, transparent 30% 36%, var(--se2-amber) 36% 66%, transparent 66% 72%, var(--se2-red) 72% 100%);}
.faq-card-person {position: relative;display: flex;align-items: center;gap: 16px;margin-bottom: 20px;}
.faq-card-avatar {width: 76px;height: 76px;flex: none;border-radius: 999px;overflow: hidden;box-shadow: 0 0 0 3px var(--se2-sun-300);display: block;}
.faq-card-avatar img {width: 100%;height: 100%;object-fit: cover;display: block;}
.faq-card-name {font-family: var(--font-family-display);font-weight: 700;font-size: 1.3rem;}
.faq-card p {position: relative;margin: 0 0 22px;color: var(--se2-on-dark);line-height: 1.55;font-size: 1rem;}
.faq-card-actions {position: relative;display: flex;flex-direction: column;gap: 10px;}
.faq-card-actions .se2-btn {justify-content: center;}
.faq-card-actions .se2-btn svg {width: 18px;height: 18px;flex: none;}

.faq-list {flex: 1.7 1 520px;min-width: 0;display: flex;flex-direction: column;gap: 10px;}
.faq-item {background: #fff;border: 1px solid var(--se2-line);border-radius: 14px;}
.faq-item-head {width: 100%;display: flex;justify-content: space-between;align-items: center;gap: 20px;background: none;border: none;padding: 20px 24px;text-align: left;cursor: pointer;font-family: var(--font-family-display);font-weight: 700;font-size: 1.25rem;color: var(--se2-ink);}
.faq-item-icon {flex: none;width: 32px;height: 32px;border-radius: 999px;background: var(--se2-tint-yellow);color: var(--se2-bordeaux);display: grid;place-items: center;position: relative;}
.faq-item-icon:before, .faq-item-icon:after {content: '';position: absolute;background: currentColor;border-radius: 1px;}
.faq-item-icon:before {width: 12px;height: 2px;}
.faq-item-icon:after {width: 2px;height: 12px;transition: transform .2s;}
.faq-item.is-open .faq-item-icon:after {transform: scaleY(0);}
.faq-item-content {padding: 0 24px 22px;line-height: 1.65;color: var(--se2-ink-600);max-width: 44em;}
.faq-item-content p {margin: 0;}

@media (max-width: 900px) {
    .faq-aside {position: static;}
}

/* ==== Kontakt ==== */
.kontakt {background: var(--se2-bordeaux-dark);color: #fff;padding: 104px 0 112px;overflow: hidden;}
.kontakt-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));gap: 56px 80px;align-items: start;}
.kontakt-intro h2 {font-size: clamp(2.4rem, 4.4vw, 3.5rem);line-height: 1.02;margin: 0 0 24px;color: #fff;}
.kontakt-intro > p {margin: 0 0 44px;font-size: 1.2rem;line-height: 1.55;color: var(--se2-on-dark);max-width: 28em;}
.kontakt-address {display: flex;flex-direction: column;gap: 12px;}
.kontakt-firma {display: flex;align-items: center;gap: 16px;background: #fff;color: var(--se2-ink);border-radius: 18px;padding: 16px 20px;}
.kontakt-firma img {width: 56px;height: 56px;flex: none;}
.kontakt-firma-name {font-family: var(--font-family-display);font-weight: 700;font-size: 1.25rem;}
.kontakt-firma-inhaber {font-size: .92rem;color: var(--se2-ink-400);}
.kontakt-tile {display: flex;gap: 14px;align-items: flex-start;background: rgba(255, 255, 255, .06);border: 1px solid rgba(255, 255, 255, .14);border-radius: 16px;padding: 18px 20px;text-decoration: none;color: #fff;transition: background .25s;}
.kontakt-tile:hover {background: rgba(255, 255, 255, .12);color: #fff;}
.kontakt-tile-icon {flex: none;width: 44px;height: 44px;border-radius: 12px;background: var(--se2-sun-300);color: var(--se2-bordeaux-dark);display: grid;place-items: center;}
.kontakt-tile-icon svg {width: 20px;height: 20px;}
.kontakt-tile-body {flex: 1;min-width: 0;display: flex;flex-direction: column;}
.kontakt-tile-label {font-size: .72rem;font-weight: 700;letter-spacing: .12em;text-transform: uppercase;color: var(--se2-on-dark);margin-bottom: 2px;}
.kontakt-tile-value {font-weight: 600;line-height: 1.4;}
.kontakt-tile--phone .kontakt-tile-value {font-family: var(--font-family-display);font-weight: 700;font-size: 1.7rem;line-height: 1.15;color: var(--se2-sun-300);white-space: nowrap;}
.kontakt-tiles-row {display: grid;grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));gap: 12px;}

.kontakt-form-card {background: #fff;color: var(--se2-ink);border-radius: var(--se2-radius-xl);padding: 36px;box-shadow: var(--se2-shadow-form);}
.kontakt-urgency {margin: 0 0 20px;display: flex;gap: 10px;align-items: flex-start;font-size: .95rem;line-height: 1.5;color: var(--se2-bordeaux);background: var(--se2-tint-yellow-2);border-radius: 10px;padding: 12px 14px;}
.kontakt-urgency svg {width: 20px;height: 20px;flex: none;margin-top: 1px;color: var(--se2-red);}

/* .custom = zusätzliche CSS-Klasse am WPForms-Container (im Formular-Editor
   gesetzt), damit diese Regeln die WPForms-eigenen Feldstyles ohne
   !important überstimmen (höhere Selektor-Spezifität statt Ladereihenfolge). */
.kontakt-form input[type="text"], .kontakt-form input[type="email"], .kontakt-form input[type="tel"], .kontakt-form input[type="number"], .kontakt-form textarea,
.kontakt-form .custom input[type="text"], .kontakt-form .custom input[type="email"], .kontakt-form .custom input[type="tel"], .kontakt-form .custom input[type="number"], .kontakt-form .custom textarea {box-sizing: border-box;width: 100%;font-size: 1rem;padding: 13px 14px;border-radius: var(--se2-radius-input);border: 1.5px solid var(--se2-line-input);background: var(--se2-paper);font-family: var(--font-family);color: var(--se2-ink);}
.kontakt-form .custom input:focus, .kontakt-form .custom textarea:focus {border-color: var(--se2-amber);box-shadow: 0 0 0 3px rgba(250, 216, 42, .35);outline: none;}
.kontakt-form .custom .wpforms-field-label {font-weight: 600;font-size: .9rem;color: var(--se2-ink);}
.kontakt-form .custom .wpforms-field-description, .kontakt-form .custom .wpforms-error {color: var(--se2-red);font-size: .85rem;}
.kontakt-form .custom input[type="checkbox"] {width: 20px;height: 20px;margin: 1px 8px 0 0;accent-color: var(--se2-bordeaux);flex: none;}
.kontakt-form .custom .wpforms-field-checkbox label {font-weight: 400;}
.kontakt-form .custom .wpforms-submit-container button.wpforms-submit {display: flex;justify-content: center;align-items: center;gap: 10px;width: 100%;background: var(--se2-sun-300);color: var(--se2-bordeaux-dark);border: none;font-family: var(--font-family-display);font-weight: 700;font-size: 1.25rem;padding: 18px 28px;border-radius: 999px;cursor: pointer;transition: background .25s;}
.kontakt-form .custom .wpforms-submit-container button.wpforms-submit:hover {background: var(--se2-amber);}
.kontakt-form .custom .wpforms-submit-spinner {display: none;}

/* ==== Footer & Mobile Call-Bar ==== */
.se2-footer {background: var(--se2-ink);color: #cdbfbf;}
.se2-footer-stripes {display: flex;flex-direction: column;gap: 3px;}
.se2-footer-stripes span {height: 6px;}
.se2-footer-stripes span:nth-child(1) {background: var(--se2-sun-300);}
.se2-footer-stripes span:nth-child(2) {background: var(--se2-amber);}
.se2-footer-stripes span:nth-child(3) {background: var(--se2-red);}
.se2-footer-row {padding: 36px 24px;display: flex;flex-wrap: wrap;gap: 16px 32px;align-items: center;font-size: .95rem;}
.se2-footer-copy {color: #fff;}
.se2-footer .footernav {margin-left: auto;}
.se2-footer .bottom_nav {display: flex;gap: 24px;margin: 0;padding: 0;list-style: none;}
.se2-footer .bottom_nav li {margin: 0;list-style: none;}
.se2-footer .bottom_nav a {color: #fff;}
.se2-footer .bottom_nav a:hover {color: var(--se2-sun-300);}
.se2-footer-credit {color: rgba(205, 191, 191, .6);}
.se2-footer-credit a {color: rgba(205, 191, 191, .6);text-decoration: underline;}
.se2-footer-credit a:hover {color: var(--se2-sun-300);}

.se2-callbar {position: fixed;left: 0;right: 0;bottom: 0;z-index: 60;display: none;grid-template-columns: 1fr 1.4fr;gap: 10px;padding: 10px 12px calc(10px + env(safe-area-inset-bottom));background: rgba(255, 252, 242, .96);backdrop-filter: blur(8px);border-top: 1px solid var(--se2-line);box-shadow: 0 -6px 20px rgba(74, 14, 21, .08);}
.se2-callbar-call {display: flex;justify-content: center;align-items: center;gap: 8px;min-height: 48px;border-radius: 999px;border: 2px solid var(--se2-bordeaux);color: var(--se2-bordeaux);font-family: var(--font-family-display);font-weight: 700;font-size: 1.05rem;text-decoration: none;}
.se2-callbar-call svg {width: 18px;height: 18px;flex: none;}
.se2-callbar-cta {display: flex;justify-content: center;align-items: center;min-height: 48px;border-radius: 999px;background: var(--se2-sun-300);color: var(--se2-bordeaux-dark);font-family: var(--font-family-display);font-weight: 700;font-size: 1.05rem;text-decoration: none;}

@media (max-width: 819px) {
    .se2-callbar {display: grid;}
    body.has-se2-callbar .se2-footer {padding-bottom: 84px;}
}

/* Call-Bar liegt (z-index 60) bewusst über allem, u. a. damit sie beim
   Scrollen nie von anderen Sections verdeckt wird – bei offenem Offcanvas
   (Panel selbst nur "im" Header gestackt, siehe Kommentar oben bei
   #mainnav) würde sie sonst über dem Menü schweben. Beim Öffnen daher
   ausblenden statt zwei "obenauf"-Ebenen gleichzeitig zu zeigen. */
body.nav-open .se2-callbar {display: none;}

/* Vision-Trigger (Button des Plugins "SD Barrierefreiheit", .vision-trigger,
   fixed, kommt von außerhalb des Themes – Position/Load-Order nicht in
   unserer Kontrolle, daher !important) lag ab dem Callbar-Breakpoint über
   dem "Beratung anfragen"-Button. Auf dieselbe Höhe wie die restliche Call-
   Bar-Logik gehoben: 48px Button + 2×10px Padding ≈ 68px Balkenhöhe, plus
   Sicherheitsabstand und env(safe-area-inset-bottom) fürs Home-Indicator-
   Gebiet auf iOS. Nur mit Callbar aktiv (body.has-se2-callbar, siehe
   initSe2CallBar()/app.js), sonst bliebe der Trigger auf Unterseiten ohne
   Callbar unnötig angehoben. */
@media (max-width: 819px) {
    body.has-se2-callbar .vision-trigger {bottom: calc(80px + env(safe-area-inset-bottom)) !important;}
}

/* ==== Startseite: vertikale Rhythmik auf Smartphone-Breite ====
   Alle Content-Sections nutzen durchgängig 104px Padding oben/unten (fürs
   Desktop-Raster gedacht) – zwei Sections addierten das auf >200px Luft
   zwischen den Abschnitten, auf schmalen Screens wirkt das leer statt
   ruhig. Ab 600px (Smartphone-Breite, knapp über den üblichen 480/550px-
   Stufen dieser Datei) auf ein knapperes, aber weiterhin klar getrenntes
   Maß herunterskaliert – plus die größten Karten-/Box-Innenabstände
   (Vertrauen-Karten, Leistungs-Karten, FAQ-Karte/-Items, Kontaktformular),
   die auf dem schmalen Screen unproportional voll wirkten. */
@media (max-width: 600px) {
    .se2-hero-grid {padding-top: 48px;padding-bottom: 24px;}
    .vertrauen, .problem, .leistungen, .ablauf, .beispielrechnung, .ueber, .referenzen, .faq-sektion {padding: 48px 0;}
    .kontakt {padding: 48px 0 56px;}

    .vertrauen-card {padding: 22px 20px;}
    .leistung-card-inner {padding: 22px 20px 20px;}
    .leistungen-closing {padding: 20px 22px;}
    .faq-card {padding: 22px 22px 24px;}
    .faq-item-head {padding: 16px 18px;}
    .faq-item-content {padding: 0 18px 18px;}
    .kontakt-form-card {padding: 24px;}
}
.search-form__field {flex: 1 1 auto;min-width: 0;font: inherit;box-sizing: border-box;}
.search-form__submit {font: inherit;cursor: pointer;}