/*
Theme Name: ulrich.digital Block Theme
Version: 2023.10
Description: ulrich.digital Block Theme
Author: Matthias Ulrich & Erhard J. Sigrist
Author URI: https://ulrich.digital
License: MIT
License URI: http://opensource.org/licenses/mit-license.php
Text Domain: ulrich.digital
*/

/*
Achtung: Browser unter iOS, benötigen u.a. für hypens: auto; zusätzlich ein -webkit-hyphens: auto;
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* =============================================================== *\
   Peter Meyer CSS Reset
\* =============================================================== */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
    hyphens: auto;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}


/* =============================================================== *\
   Form-Reset
\* =============================================================== */

input,
select,
textarea,
button {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 100%;
}

/* =============================================================== *\
   Schriften / Fonts
\* =============================================================== */


@font-face {
    font-family: 'Yukarimobile';
    src: url('./assets/fonts/Yukarimobile.woff2') format('woff2'),
        url('./assets/fonts/Yukarimobile.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Housky Demo';
    src: url('./assets/fonts/HouskyDemo.woff2') format('woff2'),
        url('./assets/fonts/HouskyDemo.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Semantic font-weight variables */
    --ud-font-weight-thin: 100;
    --ud-font-weight-extra-light: 200;
    --ud-font-weight-light: 300;
    --ud-font-weight-regular: 400;
    --ud-font-weight-medium: 500;
    --ud-font-weight-semi-bold: 600;
    --ud-font-weight-bold: 700;
    --ud-font-weight-extra-bold: 800;
    --ud-font-weight-black: 900;
    --ud-inner-block-small: 1000px;
    --ud-font-color: #2F2F2F;
    --ud-font-handwriting: 'Housky Demo';
    --ud-font-color-ink: #003366;
    --ud-dark-brown: #2F2F2F;
    --ud-font-darkbackground: #FFFFFF;
    --ud-blue-darkbackground: #3BBAFF;
    --ud-dark-blue: #1096DF;
    --ud-stroke-yellow: #F9D603;
    --ud-background-color: #F5F5F5;
    --ud-blue-ink: #003366;
    --ud-error: #F9D603;
    --ud-block-padding: 10px;
    --ud-inner-block-padding: 20px;
}

.inter-thin {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
}

.inter-extra-light {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
}

.inter-light {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

.inter-regular {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.inter-medium {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.inter-semi-bold {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

.inter-bold {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.inter-extra-bold {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
}

.inter-black {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
}


/* =============================================================== *\
   REM Basis
\* =============================================================== */
html {
    font-size: 24px;
}

body {
    background-color: #F5F5F5;
    font-family: "Inter", sans-serif;
    color: var(--ud-font-color);
    line-height: 1.5em;
    position: relative;
    font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Yukarimobile';
    color: var(--ud-dark-brown);
    hyphens: auto;
    overflow-wrap: break-word;
}

a {
    color: var(--ud-dark-blue);
}

p {
    font-weight: 400;
    margin-bottom: .5em;
    font-size: clamp(18px, 2vw, 24px);
    line-height: clamp(1.2em, 2vw, 36px);
}

.entry-content li {
    font-size: clamp(18px, 2vw, 24px);
    line-height: clamp(1.2em, 2vw, 36px);
    padding-bottom: .4rem;
}

.entry-content #ud-footer-block-kunden li {
    padding-bottom: 0;
}

.ud-center {
    text-align: center;
}

h2 {
    font-size: clamp(40px, 5vw, 60px);
    padding: 4px 10px;
    color: var(--ud-dark-brown);
    background-color: var(--ud-stroke-yellow);
    display: inline;
    padding: 0.01em 0.2em;
    line-height: 1.5;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    margin-bottom: 2em;
    hyphens: auto;
}

/* header */
#ud-header-image-block {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: -20;
}

/* ----------------------------------------------------------- */
#ud-header-image-block {
    position: relative;
    z-index: 0;
    min-height: 1200px;
}

@media (max-width: 1500px) {
    #ud-header-image-block {
        min-height: 1000px;
        /* Tablet */
    }
}

@media (max-width: 1000px) {
    #ud-header-image-block {
        min-height: 800px;
        /* Mobile */
    }
}

#ud-header-image-block .wp-block-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* volle Höhe */
    z-index: -1;
    /* Bild nach hinten */
}

#ud-cover-image {
    min-height: clamp(30vh, 60vh, 80vh) !important;
}

/* ----------------------------------------------------------- */

/* Header Titel nach oben verschieben bei > 2000px */
@media (min-width: 2000px) {
    #ud-cover-image .wp-block-cover__inner-container {
        margin-top: -25vh;
    }
}

#ud-cover-image h2 {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-size: clamp(32px, 10vw, 60px) !important;
    color: var(--ud-dark-brown);
}

.ud-subtitle {
    font-family: "Inter", sans-serif;
    font-style: italic;
    font-size: clamp(21px, 5vw, 40px);
    font-weight: 500;
    padding: 4px 10px;
    color: var(--ud-dark-brown);
    background-color: var(--ud-stroke-yellow);
    display: inline;
    padding: 0.01em 0.2em;
    line-height: 1.5;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    hyphens: auto;
    word-break: break-word;
}

#ud-header-image-block .svg-overlay {
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    line-height: 0;
    /* entfernt whitespace unter SVG */
}

/* default currentColor */
body.stellenanzeige #ud-header-image-block .svg-overlay svg {
    color: var(--ud-background-color);
    /* grey */
    width: 100%;
    height: auto;
}

/* Wenn body die Klasse stellenanzeige NICHT hat */
body:not(.stellenanzeige) #ud-header-image-block .svg-overlay svg {
    color: white;
    width: 100%;
    height: auto;
}

.ud-header-navigation {
    position: absolute;
    right: 0;
    top: 80px;
    z-index: 99;
}

.ud-header-navigation .ud-highlight p {
    padding-top: 10px;
    padding-right: 10px;
}

#ud-pv-anlage {
    position: relative;
    width: 100%;
}

#ud-pv-anlage figure,
#ud-pv-anlage img {
    width: 100%;
}

#ud-pv-anlage .ud-arrow-down {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

/* modal menu */

.modal-menu {
    background-color: var(--ud-dark-blue);
    color: white;
}

.modal-menu ul li {
    font-weight: 600;
}

.modal-menu .wp-container-core-columns-is-layout-9d6595d7 {
    row-gap: 0;
    column-gap: 40px;
}

.modal-menu a {
    hyphens: auto;
}

@media (max-width: 420px) {
    .modal-menu #kessler-logo {
        display: none;
    }
}

#ud-top-nav {
    position: relative;
    color: var(--ud-dark-blue);
}

#ud-top-nav-wrapper {
    cursor: pointer;
    transition: all 0.5s ease;
}

#ud-top-nav-wrapper:hover {
    background-color: var(--ud-blue-darkbackground);
    animation: pulse 1s infinite ease-in-out;
}

#ud-top-nav-wrapper:hover #ud-top-nav {
    color: white;
}

#ud-top-nav-wrapper.fixed {
    position: fixed;
    top: 30px;
    right: 10px;
    z-index: 1000;
    background-color: var(--ud-blue-darkbackground);
    padding: 5px 10px;
    border-radius: 2px;
    box-sizing: border-box;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: none;
}

#ud-top-nav-wrapper.fixed:hover {
    transition: all .3s ease-in-out;
    background-color: var(--ud-stroke-yellow);
}

#ud-top-nav-wrapper.fixed #ud-top-nav {
    color: white;
}

#ud-top-nav,
.ud-nav-row a {
    cursor: pointer;
    transform: scale(1);
    transition: transform 0.3s ease;
}

#ud-top-nav:hover,
.ud-nav-row a:hover {
    animation: pulse 1s infinite ease-in-out;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }
}

.ud-menu-stoerung {
    gap: 40px;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    background-color: var(--ud-dark-brown);
    padding: 15px;
}

.ud-handwriting {
    font-family: var(--ud-font-handwriting);
    font-size: 90px;
    color: var(--ud-font-color-ink);
}

.ud-description {
    font-size: 20px;
    line-height: normal;
    margin: 0;
}

.ud-button a {
    background-color: #1096DF;
    font-family: "inter";
    font-size: 20px;
    font-weight: 700;
    border-radius: 0;
    display: inline-block;
    padding: 0.75em 2em 0.75em 3em;
    min-height: 2.5em;
    line-height: 1.2;
    border: none;
    cursor: pointer;
    text-align: center;
    position: relative;
    overflow: hidden;
    clip-path: polygon(2em 0, 100% 0, 100% 100%, 0 100%, 0 100%);
    transition: all .5s ease;
    margin-top: 1.5rem;
}

.ud-button a:hover,
.ud-button a:focus {
    clip-path: polygon(2em 0, 100% 0, 100% 100%, 2em 100%, 0.8em 50%);
    color: var(--ud-stroke-yellow);
}

/* Stelle sicher, dass die Regel speziell genug ist */
.ud-trapez {
    background: #fff;
    color: #222;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* vertikal zentrieren */
    align-items: center;
    /* horizontal zentrieren */
    clip-path: polygon(0 0,
            100% 0,
            100% calc(100% - 8vw),
            /* rechts unten 8vw nach oben */
            0 100%);
}

.stellenanzeige .ud-trapez {
    clip-path: polygon(0 10%,
            /* Linke obere Ecke nach unten versetzt (10%) */
            100% 0,
            /* Rechte obere Ecke ganz oben */
            100% 90%,
            /* Rechte untere Ecke nach oben versetzt (90%) */
            0 100%
            /* Linke untere Ecke ganz unten */
        );
}

#ud-ihr-stromer-in-schwyz .wp-image-26 {
    max-width: 180px;
    margin-bottom: 40px;
}

.ud-dienstleistungen {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ud-dienstleistung {
    padding-left: var(--ud-block-padding);
    padding-right: var(--ud-block-padding);
}

.ud-dienstleistung h2 {
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    word-break: break-word;
    font-size: clamp(50px, 5vw, 60px);
}

.ud-vorteil {
    background-color: var(--ud-dark-brown);
    color: var(--ud-stroke-yellow);
    display: inline;
    padding: 0.1em 0.4em;
    line-height: 1.6;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* Gelber Hintergrund entfernen */
@media (max-width: 1500px) {
    #projekt.ud-yellow {
        background-image: none;
    }
}

@media (max-width: 1600px) {

    .ud-dienstleistung .ud-icon {
        display: none;
    }

    .ud-dienstleistung p, li {
        line-height: normal;
    }

    .ud-servicebox ul, .ud-servicebox p {
        max-width: none !important;
    }

    .ud-servicebox .ud-vorteil {
        line-height: 1.6em !important;
    }
}

/* unsere Deinstleistungen: Grid für genau diesen Block */
.ud-dienstleistungen .wp-container-core-columns-is-layout-9d6595d7 {
    display: grid !important;
    gap: var(--wp--style--block-gap, 2rem);
    grid-template-columns: repeat(3, 1fr);
    /* Desktop: 3 */
}

/* ≤1600px: 2 Spalten */
@media (max-width: 1600px) {
    .ud-dienstleistungen .wp-container-core-columns-is-layout-9d6595d7 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ≤768px: 1 Spalte */
@media (max-width: 768px) {
    .ud-dienstleistungen .wp-container-core-columns-is-layout-9d6595d7 {
        grid-template-columns: 1fr;
    }
}

/*
#ud-elektroinstallationen-titel {
  position: relative;
  padding-left: 48px;
}

#ud-elektroinstallationen-titel::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 32px;
  background-image: url('https://stromer-schwyz.ulrich.digital/wp-content/uploads/2025/05/Elektroinstallationen.svg');
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
*/

.ud-stroke-left {
    position: relative;
    min-height: 50vh;

    /* 2 Backgrounds: Stroke links + Hauptbild */
    background:
        url(https://stromer-schwyz.ulrich.digital/wp-content/uploads/2025/09/Stroke-links.svg) no-repeat left top / contain,
        url(https://stromer-schwyz.ulrich.digital/wp-content/uploads/2025/05/platzhalter1.jpg) no-repeat center center / cover;
}

/* modal box */
.modal-overlay {
    display: none;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--ud-dark-blue);
    z-index: 1000;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.active {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.modal-content {
    width: 90%;
    max-width: 700px;
    margin: auto;
    padding: 20px;
    border-radius: 8px;
    position: relative;
}

#modal-menu.active {
    display: flex;
    position: fixed;
}

.modal-menu .modal-content {
    max-width: 1200px;
}

#ud-top-nav-wrapper {
    clip-path: polygon(15px 0,
            /* oben links eingerückt */
            100% 0,
            /* oben rechts */
            calc(100% - 15px) 100%,
            /* unten rechts eingerückt */
            0 100%
            /* unten links */
        );
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    opacity: .95;
    height: 40px;
    line-height: 40px;
    padding: 0 25px;
}

.ud-header-navigation .ud-nav-row a {
    display: inline-block;
    position: relative;
    background: white;
    opacity: .95;
    height: 40px;
    line-height: 40px;
    padding: 0 30px;
    /* Parallelogramm: beide Seiten um 15° schräg */
    clip-path: polygon(15px 0,
            /* oben links eingerückt */
            100% 0,
            /* oben rechts */
            calc(100% - 15px) 100%,
            /* unten rechts eingerückt */
            0 100%
            /* unten links */
        );
    transition: all 0.5s ease;
}

.wp-block-site-logo {}

@media (max-width: 761px) {
    .wp-block-site-logo {
        position: relative;
    }
}

@media (max-width: 960px) {
    .ud-header-navigation .ud-nav-row p {
        display: none;
    }

    #ud-top-nav-wrapper {
        clip-path: none;
        padding: 5px 10px;
        width: 50px;
        height: 50px;
    }
}

.ud-header-navigation .ud-nav-row a:hover {
    background-color: var(--ud-blue-darkbackground);
    color: white;
}

.ud-header-navigation .ud-nav-row {
    margin-top: 15px;
    padding: 10px 15px;
    gap: 40px;
}

.ud-header-navigation .ud-nav-row a,
#ud-top-nav {
    font-weight: 700;
    font-size: 30px;
    display: inline-block;
}

#modal-menu .ud-nav-list li {
    padding: 10px 0;
}

.ud-nav-list a {
    position: relative;
    text-decoration: none;
    color: inherit;
    transition: all 0.6s ease-in-out;
    display: inline-block;
}

.ud-nav-list a:hover {
    color: var(--ud-stroke-yellow) !important;
}

.ud-nav-list a::before {
    content: "";
    position: absolute;
    left: -35px;
    /* Adjust the spacing to your needs */
    top: 50%;
    transform: translateY(-50%);
    width: 18.158px;
    height: 45.667px;
    background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="18.158" height="45.667" viewBox="0 0 18.158 45.667"%3E%3Cpath id="Pfad_66" data-name="Pfad 66" d="M8.988,0,0,27.418H7.58L5.9,45.667,15.615,23.7H7.263L18.158,0Z" transform="translate(0 0)" fill="%23f9d603"/%3E%3C/svg%3E') no-repeat center;
    background-size: contain;
    opacity: 0;
    /* Initially hidden */
    transition: opacity 0.5s ease;
    /* Smooth transition for SVG */
}

.ud-nav-list a:hover::before {
    opacity: 1;
    /* Fully visible on hover */
}

#modal-menu .ud-nav-list a {
    font-size: clamp(30px, 4vw, 40px);
    letter-spacing: .5px;
}

.modal-overlay .with_frm_style input,
.modal-overlay .with_frm_style textarea {
    background-color: transparent;
    margin: 0;
}

.modal-overlay .with_frm_style input {
    padding-left: 0;
}

.modal-overlay .with_frm_style textarea {
    border: 1px solid var(--ud-font-darkbackground);
}

.modal-overlay .with_frm_style input::placeholder,
.modal-overlay .with_frm_style textarea::placeholder {
    color: var(--ud-font-darkbackground);
}

#closeModal {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    font-size: 40px;
    cursor: pointer;
    transition: all .5s ease;
}

#closeModal:hover {
    color: var(--ud-stroke-yellow);
}

#kessler-logo {
    position: absolute;
    top: 20px;
    left: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
}

#kessler-logo img {
    max-width: 320px;
}

#modal-menu #closeModal:hover {
    color: var(--ud-stroke-yellow);
}

/* insta feed */
.ud-aktuelles-feed {
    position: relative;
    padding: var(--ud-block-padding);
    width: 100%;
    max-width: 1200px;
}


/* Container für den Feed-Item */
.ud-aktuelles-feed .sbi_item .sbi_inner_wrap {
    display: flex;
    align-items: flex-start;
    /* Vertikale Ausrichtung */
    margin-bottom: 20px;
    /* Abstand zwischen den Items */
}

/* Bild-Bereich */
.ud-aktuelles-feed .sbi_photo_wrap {
    aspect-ratio: 1 / 1;
    /* Quadrat */
    width: clamp(100px, 15vw, 500px);
    /* min, fluid, max */
    min-width: 100px !important;
    height: auto;
    /* Höhe folgt dem Seitenverhältnis */
    position: relative;
}

/* Caption-Bereich */
.ud-aktuelles-feed .sbi_info_wrapper {
    flex: 2;
    /* Caption nimmt den verbleibenden Platz ein */
    font-size: 14px;
    /* Schriftgröße der Caption */
    color: #434960;
    /* Textfarbe */
    line-height: 1.6;
    /* Zeilenhöhe für bessere Lesbarkeit */
}

/* Entfernen von unerwünschten Hover-Effekten */
.ud-aktuelles-feed .sbi_hover_top, .sbi_hover_bottom {
    display: none;
}

.ud-aktuelles-feed #sb_instagram .sbi_info {
    text-align: left;
}

.ud-aktuelles-feed .sbi_follow_btn {
    margin-top: 5rem;
}

.ud-aktuelles-feed .sbi_follow_btn a {
    border-radius: 0 !important;
    padding: 1em 2em 1em 3em !important;
    clip-path: polygon(2em 0, 100% 0, 100% 100%, 0 100%, 0 100%);
    font-weight: 500;
}

.ud-aktuelles-feed .sbi_follow_btn a:hover {
    color: var(--ud-stroke-yellow) !important;
    clip-path: polygon(2em 0, 100% 0, 100% 100%, 2em 100%, 0.8em 50%);
}

.ud-aktuelles-feed .sbi_follow_btn a span,
.ud-aktuelles-feed #sb_instagram .sbi_follow_btn svg {
    font-size: 20px;
}

#sb_instagram .sbi_follow_btn svg {
    margin-right: 4px;
}

.ud-aktuelles-feed div#sbi_images {
    gap: 80px !important;
}

.ud-aktuelles-feed #sb_instagram .sbi_caption {
    font-size: 1rem !important;
}

.ud-aktuelles-feed #sb_instagram .sbi_likes,
.ud-aktuelles-feed #sb_instagram .sbi_likes svg,
.ud-aktuelles-feed #sb_instagram .sbi_comments,
.ud-aktuelles-feed #sb_instagram .sbi_comments svg {
    font-size: .8rem !important;
}

/* Diensleistungen */
.ud-servicebox {
    padding: 25px;
    border: 3px dashed var(--ud-dark-blue);
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.ud-servicebox ul {
    list-style: none;
    /* Entfernt Standard-Punkte */
    padding-left: 0;
    /* Entfernt Einzug */
    margin: 1em 0;
}

.ud-servicebox ul li {
    position: relative;
    padding-left: 50px;
    /* Platz für das Icon */
    margin-bottom: 0.5em;
    /* Abstand zwischen den Punkten */
    font-style: italic;
}

.ud-servicebox ul li::before {
    content: '\f00c';
    /* Unicode für das Font Awesome Häkchen */
    font-family: 'Font Awesome 6 Pro';
    /* Font Awesome Schriftart */
    font-weight: 900;
    /* Für das Solid Icon */
    position: absolute;
    left: 0;
    top: 25px;
    transform: translateY(-50%);
    font-size: 40px;
    color: var(--ud-dark-blue);
    font-style: normal;
}

.ud-servicebox ul,
.ud-servicebox p {
    max-width: 80%;
    text-align: left;
    margin-left: 0 !important;
}

.ud-servicebox .wp-block-buttons {
    margin-top: 2rem;
}

.ud-title-wrapper {
    position: relative;
}

.ud-title-wrapper .ud-icon {
    position: absolute;
    left: -180px;
    /* Abstand nach links außerhalb des Containers, anpassen! */
    top: 30px;
    transform: translateY(-50%);
    margin: 0;
    /* optional, falls nötig */
}

/* Projekte */
.wp-block-media-text.is-stacked-on-mobile.is-vertically-aligned-top#ud-projekt-grid {
    display: grid;
    grid-template-columns: 50% 1fr;
    gap: 1rem;
    /* weitere Styles */
}

/* Responsive Anpassung */
@media (max-width: 768px) {
    .wp-block-media-text.is-stacked-on-mobile.is-vertically-aligned-top#ud-projekt-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }

    .wp-block-media-text.is-stacked-on-mobile.is-vertically-aligned-top#ud-projekt-grid>figure.wp-block-image {
        width: 100%;
        display: block;
    }
}

.ud-projekt {
    padding-left: var(--ud-block-padding);
    padding-right: var(--ud-block-padding);
}

.ud-projekt .wp-block-list {
    list-style: none;
    padding: 0;
    margin: 2em 0;
}

/* Styling für Listenpunkte */
.ud-projekt .wp-block-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    line-height: normal;
}

@media (max-width: 768px) {
    .ud-projekt .wp-block-media-text__media {
        min-width: 240px;
    }

    .page-id-148 .ud-projekt .wp-block-media-text {
        display: block;
        grid-template-columns: none;
    }

    .page-id-148 .ud-projekt .wp-block-media-text__content {
        padding: 20px 0 !important;
    }
}

/* Icon vor jedem Listenpunkt
.ud-projekt .wp-block-list li::before {
    content: '\f00c';
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    font-size: 1.2em;
    margin-top: 2px;
    margin-right: 0.5rem;
    color: var(--ud-dark-blue);
}
*/

#ud-stellenanzeige {
    max-width: 1200px;
}

#ud-stellenanzeige h2,
.ud-projekt .ud-project-title,
.ud-titel {
    /* font-size: 40px; */
    font-size: clamp(35px, 5vw, 40px);
    display: inline-block;
    font-family: "Inter", sans-serif;
    background-color: transparent;
    line-height: normal;
    margin-bottom: 1em;
    padding: 0;
    font-weight: 700;
}

.ud-title-wrapper .ud-titel {
    font-family: 'Yukarimobile';
}

.ud-inner-stellenanzeige {
    padding: 50px;
    border: 3px dashed var(--ud-dark-blue);
    box-sizing: border-box;
}

.ud-projekt .ud-project-category {
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-weight: 700;
}

/* Projekte Seite */
.page-id-148 .ud-projekt .ud-title-wrapper,
.page-id-3 .ud-title-wrapper,
.page-id-302 .ud-title-wrapper {
    margin-bottom: 1em;
}

.page-id-148 .ud-projekt .ud-project-title,
.ud-titel {
    margin-bottom: 2em;
    color: var(--ud-dark-brown);
    background-color: var(--ud-stroke-yellow);
    display: inline;
    padding: 0.01em 0.2em;
    line-height: 1.5;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    margin-bottom: 2em;
    hyphens: auto;
    word-break: break-word;
}

.ud-block.ud-trapez-bg {
    background-color: white;
    clip-path: polygon(0 5%,
            100% 0,
            100% 95%,
            0 100%);
}

.ud-block.ud-arrow-bg {
    background-color: white;
    position: relative;
    background-image:
        url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1920'%20height='249.975'%20viewBox='0%200%201920%20249.975'%3E%3Cpath%20id='Differenzmenge_30'%20data-name='Differenzmenge%2030'%20d='M-10257.537,385.714h0L-11218,181.562V135.74h1920v46.019Z'%20transform='translate(11217.999%20-135.74)'%20fill='%23f5f5f5'/%3E%3C/svg%3E"),
        url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1920'%20height='223.178'%20viewBox='0%200%201920%20223.178'%3E%3Cpath%20id='Schnittmenge_5'%20data-name='Schnittmenge%205'%20d='M-11218,404.74V181.562l960.462,204.152L-9298,181.758V404.74Z'%20transform='translate(11217.999%20-181.562)'%20fill='%23f5f5f5'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-size: contain;
    background-position: top, bottom;
}

/* padding für blocks */
.ud-block-inner,
#projekt,
#ud-warum-kessler,
#ud-zertifikate-partner,
#ud-footer-block-kunden .wp-container-core-group-is-layout-b0c428d9,
.ud-aos-container {
    padding-left: var(--ud-inner-block-padding);
    padding-right: var(--ud-inner-block-padding);
}

/* Block Höhe definieren */
.ud-block {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding-top: clamp(200px, 5vw, 300px);
    padding-bottom: clamp(200px, 5vw, 300px);
    box-sizing: border-box;
}

/* Background Fläche */
.ud-yellow {
    background-image: url('https://stromer-schwyz.ulrich.digital/wp-content/uploads/2025/05/links-gelb.svg');
    background-repeat: no-repeat;
    /* Keine Wiederholung des Bildes */
    background-size: contain;
    /* Bild an die Höhe anpassen */
    background-position: left center;
    /* Links ausrichten und vertikal zentrieren */
}

#ud-partner {
    clip-path: polygon(0 6vw, 100% 0, 100% 100%, 0 100%);
}

.ud-partner-logos {
    display: flex;
    gap: 60px;
}

.ud-partner-logos.ud-grid,
.ud-partner-logos.ud-primary {
    display: grid;
    gap: 2rem;
}

/* Desktop >1280px → 3 Spalten (2 Zeilen bei 6 Items) */
@media (min-width: 1281px) {

    .ud-partner-logos.ud-grid,
    .ud-partner-logos.ud-primary {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tablet ≤1280px → 2 Spalten (3 Zeilen bei 6 Items) */
@media (max-width: 1280px) and (min-width: 641px) {
    .ud-partner-logos.ud-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ud-partner-logos.ud-primary {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile ≤640px → 1 Spalte (6 Zeilen) */
@media (max-width: 640px) {

    .ud-partner-logos.ud-grid,
    .ud-partner-logos.ud-primary {
        grid-template-columns: 1fr;
    }
}

.ud-partner-logos.ud-grid .wp-block-image,
.ud-partner-logos.ud-primary .wp-block-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Kontakt Sektion */
.ud-kontakt .wp-container-core-group-is-layout-271e1ce7 {
    flex-wrap: wrap;
    gap: 20px;
}


/* kontakt seite */
#ud-kontakt {
    margin-top: 20vh;
    margin-bottom: 35vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* background-color: #FFFFFF;
    clip-path: polygon(100% 0, 0 120px, 0 100%, 100% 100%); */
    font-weight: 500;
    padding: var(--ud-block-padding);
}

#ud-kontakt a {
    font-weight: 500;
}

#ud-kontakt .wp-block-media-text__media,
#ud-kontakt .wp-block-image {
    min-width: 55px;
}

#ud-kontakt .ud100 {
    flex-wrap: wrap;
}

#ud-kontakt-form {
    margin-top: 25vh;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--ud-block-padding);
}

#ud-kontakt-form .frm_forms {
    width: 100%;
}


#ud-kontakt-form .ud-button-submit,
#ud-dienstleistungsanfrage .ud-button-submit {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

#ud-kontakt-form .frm_button_submit,
#ud-dienstleistungsanfrage .frm_button_submit {
    background-color: #1096DF;
    font-family: "inter";
    font-size: 20px;
    font-weight: 700;
    border-radius: 0;
    display: inline-block;
    min-height: 2.5em;
    line-height: 1.2;
    border: none;
    cursor: pointer;
    text-align: center;
    transition: background 0.2s, color 0.2s;
    position: relative;
    overflow: hidden;
    clip-path: polygon(2em 0, 100% 0, 100% 100%, 0 100%, 0 100%);
    padding-left: 2.5rem;
    padding-right: 1rem;
    white-space: nowrap;
    margin-top: 1.5rem;
    transition: all .5s ease;
}

#ud-kontakt-form .frm_button_submit:hover,
#ud-dienstleistungsanfrage .frm_button_submit:hover {
    clip-path: polygon(2em 0, 100% 0, 100% 100%, 2em 100%, 0.8em 50%);
    color: var(--ud-stroke-yellow);
}

#ud-kontakt-form input,
#ud-kontakt-form textarea,
#ud-dienstleistungsanfrage input,
#ud-dienstleistungsanfrage textarea,
#ud-dienstleistungsanfrage select {
    border-color: transparent;
    background-color: transparent;
    color: var(--text-color);
    box-shadow: none;
    margin: 0;
}

#ud-dienstleistungsanfrage select option:hover,
#ud-dienstleistungsanfrage select option:checked {
    background-color: var(--ud-stroke-yellow);
    color: var(--ud-font-color);
}

#ud-kontakt-form input,
#ud-dienstleistungsanfrage input,
#ud-dienstleistungsanfrage select {
    padding-left: 0;
    border-bottom: 1.5px solid var(--ud-dark-brown);
}


#ud-kontakt-form textarea,
#ud-dienstleistungsanfrage textarea {
    border: 1.5px solid var(--ud-dark-brown);
    height: 100%;
}

#ud-stoerungsdienst {
    display: block;
    background-color: var(--ud-dark-brown);
    color: var(--ud-stroke-yellow);
    padding: 2px 10px;
    white-space: nowrap;
    overflow-wrap: normal;
    word-wrap: normal;
    word-break: keep-all;
    hyphens: none;
    font-weight: 600;
}

.page-id-156 #ud-stoerung #ud-stoerungsdienst a {
    color: var(--ud-stroke-yellow);
}

.ud-nobreak {
    white-space: nowrap;
    overflow-wrap: normal;
    word-wrap: normal;
    word-break: keep-all;
    hyphens: none;
}

.ud100 {
    width: 100%;
}

/* über uns seite */
.ud-mitarbeiter {
    font-family: 'Housky Demo';
    color: var(--ud-blue-ink);
    font-size: 80px;
    font-weight: 100;
    margin-bottom: 20px;
}

/*
.ud-arrow-down {
    position: relative;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1919.999'%20height='439.275'%20viewBox='0%200%201919.999%20439.275'%3E%3Cpath%20id='Schnittmenge_5'%20data-name='Schnittmenge%205'%20d='M-8237.538,620.511l-.068.327L-9198,416.7V181.562l960.461,204.153L-7278,181.759V416.9l-959.468,203.942Z'%20transform='translate(9197.999%20-181.563)'%20fill='%23fff'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100% auto;
    width: 100%;
}
*/
.ud-philosophie {
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
    clip-path: polygon(0 8vh,
            /* links oben */
            100% 0,
            /* rechts oben */
            100% calc(100% - 8vh),
            /* rechts unten */
            0 100%
            /* links unten */
        );
    padding-top: clamp(200px, 5vw, 400px);
    padding-bottom: clamp(200px, 5vw, 400px);
}

.ud-team {
    padding-top: clamp(200px, 5vw, 400px);
    padding-bottom: clamp(200px, 5vw, 400px);
}

/* unsere werte */
.ud-werte .wp-container-core-columns-is-layout-9d6595d7 {
    display: grid !important;
    gap: var(--wp--style--block-gap, 2rem);
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1600px) {
    .ud-werte .wp-container-core-columns-is-layout-9d6595d7 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .ud-werte .wp-container-core-columns-is-layout-9d6595d7 {
        grid-template-columns: 1fr;
    }
}

/* Datenschutzerklärung */
.ud-absatz ul.wp-block-list {
    list-style: disc;
    list-style-position: outside;
}

.ud-absatz ul.wp-block-list li {
    margin-left: .9rem;
}

/* Kontaktanfrage modal */
#contactModal {
    color: white;
    font-size: 20px;
}

#contactModal p {
    line-height: normal;
    color: white;
}

#contactModal input {
    border-bottom: 1.3px solid white;
    color: white;
}

#contactModal textarea,
#contactModal label {
    color: white;
}

#contactModal label {
    line-height: initial;
}

#contactModal input:focus,
#contactModal input:invalid,
#contactModal input:active,
#contactModal input:visited,
#contactModal input:enabled,
#contactModal input:required,
#contactModal textarea:focus,
#contactModal textarea:invalid,
#contactModal textarea:active,
#contactModal textarea:visited,
#contactModal textarea:enabled,
#contactModal textarea:required {
    background-color: var(--ud-dark-blue) !important;
    box-shadow: none;
}

#contactModal textarea {
    border: 1.3px solid white;
    height: 100%;
    line-height: 1.3em;
}

#contactModal .frm_error {
    color: var(--ud-error);
}

#contactModal .frm_button_submit {
    background-color: white;
    font-family: "inter";
    font-size: 20px;
    font-weight: 700;
    border-radius: 0;
    display: inline-block;
    min-height: 2.5em;
    line-height: 1.2;
    border: none;
    cursor: pointer;
    text-align: center;
    transition: background 0.2s, color 0.2s;
    position: relative;
    overflow: hidden;
    clip-path: polygon(2em 0, 100% 0, 100% 100%, 0 100%, 0 100%);
    padding-left: 3.5rem;
    padding-right: 2rem;
    white-space: nowrap;
    margin-top: 1.5rem;
    transition: all .5s ease;
    color: var(--ud-dark-blue);
}

#contactModal .frm_button_submit:hover {
    clip-path: polygon(2em 0, 100% 0, 100% 100%, 2em 100%, 0.8em 50%);
    color: var(--ud-stroke-yellow);
}

#contactModal .ud-button-submit .frm_submit {
    display: flex;
    justify-content: flex-end;
}

#contactModal select {
    background-color: transparent;
    color: white !important;
    border-bottom: 1.3px solid white;
    padding-left: 0;
    appearance: auto;
}

/* Farbanpassung bei Modal für Bestätigungsnachricht */
#contactModal .with_frm_style .frm_message, #contactModal .frm_success_style {
    border: 1px solid var(--ud-error) !important;
    background-color: transparent !important;
    line-height: 1.3em;
}

#contactModal .with_frm_style .frm_message p, #contactModal .frm_success_style p {
    color: var(--ud-error) !important;
    line-height: 1.3em;
}

#contactModal #field_szz77,
#contactModal #field_bpudv {
    color: white !important;
}

#contactModal select option {
    background-color: transparent;
    padding-left: 5px;
}

#contactModal select option:hover {
    background-color: var(--ud-dark-blue);
}

#contactModal .frm_description {
    font-style: italic;
    color: lightgray;
    padding: 0;
}

/* Bild-Text Block */
.wp-block-media-text__media {
    max-width: fit-content;
}

@media (max-width: 600px) {
    .wp-block-media-text__content {
        padding: 0 !important;
    }

    .wp-block-media-text.is-stacked-on-mobile.is-vertically-aligned-top {
        row-gap: 10px;
    }

    .wp-block-media-text.is-stacked-on-mobile.is-vertically-aligned-top figure.wp-block-media-text__media {
        max-width: 60px;
    }
}

/* footer block */
#ud-footer-block-kunden,
#ud-footer-block-kessler,
#ud-footer-block-faq {
    background-color: var(--ud-stroke-yellow);
    color: var(--ud-dark-brown);
    clip-path: polygon(0 0, 100% 4vw, 100% 100%, 0 100%);
    margin-top: -100px;
    padding-top: 120px;
    font-weight: 500;
    padding-left: 10px;
    padding-right: 10px;
}

#ud-footer-block-kunden h3,
#ud-footer-block-kessler h3,
#ud-footer-block-faq h3 {
    font-size: 30px;
    font-family: "Inter", sans-serif;
    background-color: var(--ud-dark-brown);
    color: var(--ud-stroke-yellow);
    display: inline;
    padding: 0.01em 0.2em;
    line-height: 1.5;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    margin-bottom: 2em;
    hyphens: auto;
    word-break: break-word;
}

/* Für kleine Bildschirme flacherer Winkel */
@media (max-width: 768px) {

    #ud-footer-block-kunden,
    #ud-footer-block-kessler,
    #ud-footer-block-faq {
        clip-path: polygon(0 0, 100% 5vw, 100% 100%, 0 100%);
    }
}

#ud-footer-block-kunden p,
#ud-footer-block-kessler p,
#ud-footer-block-faq p {
    font-size: clamp(16px, 2vw, 24px);
    line-height: clamp(24px, 3vw, 36px);
}

#ud-footer-block-kunden .ud-kunden-list {
    font-size: 24px;
    font-weight: 500;
}

#ud-footer-block-kunden .ud-kunden-list li {
    position: relative;
    /* Stellt sicher, dass das Pseudo-Element korrekt positioniert wird */
    padding-left: 25px;
    /* Platz für das SVG-Icon einplanen */
    font-weight: 500;
    line-height: normal;
    font-style: italic;
    margin-bottom: 14px;
}

#ud-footer-block-kunden .ud-kunden-list li::before {
    content: "";
    position: absolute;
    left: 0px;
    /* Position des Icons links */
    top: 20px;
    /* Vertikale Mitte */
    transform: translateY(-50%);
    /* Exakte Zentrierung */
    width: 11.93px;
    /* Neue Breite proportional zur Höhe */
    height: 30px;
    /* Angepasste Höhe */
    background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="18.158" height="45.667" viewBox="0 0 18.158 45.667"%3E%3Cpath id="Pfad_66" data-name="Pfad 66" d="M8.988,0,0,27.418H7.58L5.9,45.667,15.615,23.7H7.263L18.158,0Z" transform="translate(0 0)" fill="%232F2F2F"/%3E%3C/svg%3E') no-repeat center;
    background-size: contain;
    /* Sicherstellen, dass das Icon korrekt skaliert */
}

/* Google Zeit Review */
#ud-kundenstimmen .wp-google-time {
    display: none;
}

/* Navigations Pfeile Review Slider */
#ud-kundenstimmen .wp-gr .grw-btns {
    height: 66px !important;
    width: 66px !important;
}

#ud-kundenstimmen .wp-gr .rpi-dot.active {
    background-color: var(--ud-stroke-yellow) !important;
}

/* footer */
footer {
    background-color: var(--ud-dark-brown);
    color: var(--ud-font-darkbackground);
    padding-left: 5vw;
    padding-top: 60px;
    padding-right: 5vw;
    padding-bottom: 10px;
}

footer .ud-nav-list {
    font-size: 20px;
    font-weight: 600;
    color: var(--ud-blue-darkbackground);
    width: 100%;
}

footer .ud-instafeed {
    width: 100%;
}

footer .ud-nav-list a:hover {
    color: var(--ud-font-darkbackground);
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

footer .ud-nav-list li:not(:last-of-type) {
    border-bottom: 1px solid var(--ud-blue-darkbackground);
}

.ud-highlight {
    position: relative;
}

.ud-highlight p {
    font-weight: 600;
    hyphens: auto;
    word-break: break-word;
    font-size: 16px;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

.ud-highlight span.nowrap {
    padding: 0 12px;
    margin-top: 2px;
    margin-bottom: 2px;
    background-color: var(--ud-stroke-yellow);
    color: var(--ud-dark-brown);
    min-height: 32px;
    line-height: 32px;
}

@media (max-width: 800px) {
    #ud-emergency {
        display: none;
    }

    #ud-emergency-number::before {
        font-family: "Font Awesome 6 Pro";
        font-weight: 900;
        content: "\e3d0";
        margin-right: 0.5em;
    }

}

footer .ud-highlight {
    margin-top: 15px;
}

/* Dienstleistungsanfrage */
#ud-dienstleistungsanfrage {
    max-width: 1200px;
    padding-left: var(--ud-block-padding);
    padding-right: var(--ud-block-padding);
}

/* Google review */
.grw-review svg {
    display: none;
}

footer .ud-aktuelles {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

footer .ud-aktuelles a {
    margin: 0;
    padding-left: 6px;
    color: var(--ud-blue-darkbackground);
    transition: all 0.3s ease;
}

footer .ud-aktuelles a:hover {
    color: var(--ud-stroke-yellow);
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

footer .ud-social-icons a {
    font-size: 50px;
    color: var(--ud-blue-darkbackground);
    padding: 0 5px;
    transition: all 0.3s ease;
}

footer .ud-social-icons a:hover {
    color: var(--ud-stroke-yellow);
}

/* insta feed */
footer .sbi-owl-dot span {
    background-color: lightgrey !important;
}

footer .sbi-owl-dot.active span {
    background-color: var(--ud-blue-darkbackground) !important;
}

footer .sbi-header.sbi-header-type-text {
    font-size: 20px;
    font-weight: 600;
}

.nowrap {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: manual !important;
}

/* Footer Spalten responsiv */
footer .wp-container-core-columns-is-layout-9d6595d7 {
    display: flex;
    flex-wrap: wrap;
}

footer .wp-container-core-columns-is-layout-9d6595d7 .wp-block-column {
    flex-grow: 0;
    /* Nicht wachsen */
    flex-shrink: 0;
    /* Nicht schrumpfen */
    flex-basis: 25%;
    /* Breite */
    max-width: 25%;
    min-width: 0;
    box-sizing: border-box;
}

@media (max-width: 1201px) {
    footer .wp-container-core-columns-is-layout-9d6595d7 .wp-block-column {
        flex-basis: 50% !important;
        max-width: 50% !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
    }
}

@media (max-width: 781px) {
    footer .wp-container-core-columns-is-layout-9d6595d7 .wp-block-column {
        flex-basis: 100% !important;
        max-width: 100% !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
    }
}

/* Captcha Badge ausblenden */
.grecaptcha-badge {
    height: 0;
    width: 0;
    opacity: 0;
    visibility: hidden;
}

.ud-spacer {
    height: clamp(150px, 10vw, 600px) !important;
    /* min, fluid, max */
}

.ud-inline-wrapper {
    max-width: 80%;
    margin-left: 0 !important;
}

@media (max-width: 1600px) {
    .ud-inline-wrapper {
        max-width: none;
    }
}

/* unser team */
.ud-team-grid {
    display: grid;
    gap: 1.5rem;
    /* Abstand zwischen den Kacheln */
    grid-template-columns: repeat(3, 1fr);
    /* 3 Spalten Desktop */
}

.ud-team-grid .wp-block-media-text {
    margin-bottom: clamp(1rem, 3rem, 5rem);
}

/* Tablet */
@media (max-width: 1024px) {
    .ud-team-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 Spalten */
    }
}

/* Mobile */
@media (max-width: 600px) {
    .ud-team-grid {
        grid-template-columns: none;
        display: block;
    }

    .ud-team-grid .wp-block-media-text__media {
        max-width: 150px !important;
        margin-bottom: 1rem;
    }
}

/* FAQ */
.page-id-537 .ud-block {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/* unsere Geschichte */
.ud-geschichte {
    padding-top: 10rem;
    padding-bottom: 10rem;
    background-color: white;
    clip-path: polygon(0% 0%,
            50% 6vw,
            /* statt 10% nun mit 6vw */
            100% 0%,
            100% 100%,
            0% 100%);
}

@media (max-width: 767px) {
    [data-aos], .aos-init, .aos-animate {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
        visibility: visible !important;
    }
}

/* ======================================
   Fix: Google Reviews Slider zu breite Karten auf Mobile
   ====================================== */
@media (max-width: 768px) {

    /* Slider selbst einkapseln */
    .wp-gr[data-layout="slider"] {
        overflow: hidden !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Track als Flexreihe */
    .wp-gr[data-layout="slider"] .grw-reviews {
        display: flex !important;
        flex-wrap: nowrap !important;
    }

    /* Jede Karte exakt eine Viewportbreite */
    .wp-gr[data-layout="slider"] .grw-review {
        min-width: 100% !important;
        flex: 0 0 100% !important;
        box-sizing: border-box !important;
    }

    /* Pfeile ausblenden (verhindert Überbreite) */
    .wp-gr[data-layout="slider"] .grw-btns {
        display: none !important;
    }
}

/* ======================================
   Projekt Filter
   ====================================== */

.page-id-148 .ud-projekt-filter-wrapper {
    /* max-width: 1500px; */
    padding-left: var(--ud-block-padding);
    padding-right: var(--ud-block-padding);
    font-size: 15px;
    padding-top: clamp(200px, 5vw, 300px);
}

.page-id-148 .ud-projekt-filter-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 2.5rem 0;
}

.page-id-148 .ud-projekt-filter-buttons .filter-btn {
    padding: 2px 25px;
    border-radius: 6px;
    background: #fff;
    color: var(--ud-dark-brown);
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1.8em;
}

.page-id-148 .ud-projekt-filter-buttons .filter-btn:hover {
    background: var(--ud-stroke-yellow);
}

.page-id-148 .ud-projekt-filter-buttons .filter-btn.active {
    background: var(--ud-dark-blue);
    color: #fff;
}

/* beim ersten Projekt */
.page-id-148 .ud-projekt.first-ud-projekt {
    min-height: auto;
    padding-top: 0;
}

.page-id-148 .ud-white-background:not(.ud-last) {
    background-color: white;
    margin-top: -80px;
    margin-bottom: -80px;
    clip-path: polygon(0 80px, 100% 0, 100% calc(100% - 80px), 0 100%);
}

.page-id-148 .ud-white-background.ud-last {
    background-color: white;
    clip-path: polygon(0 6vw, 100% 0, 100% 100%, 0% 100%);
}