/* urbanist-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Urbanist';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/urbanist-v18-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* lato-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/lato-v25-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* lato-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/Lato-Semibold.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* 
https: //dbushell.com/2025/09/12/css-reset/ 
https: //git.dbushell.com/dbushell/patchwork/src/branch/main/static/css/base/reset.css 
*/
*,
*::after,
*::before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:where(html) {
    color-scheme: light dark;
    hanging-punctuation: first allow-end last;
    interpolate-size: allow-keywords;
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
}

:where(html.translated-rtl) {
    direction: rtl;
}

@media (prefers-reduced-motion: reduce) {
    :where(html) {
        scroll-behavior: auto;
    }
}

:where(body) {
    min-block-size: 100svb;
    min-inline-size: 300px;
    font-family: 'Lato', sans-serif;
}

:where(canvas, img, picture, svg, video) {
    block-size: auto;
    border: none;
    display: block;
    max-inline-size: 100%;
}

:where(button, input, progress, select, textarea) {
    appearance: none;
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    hanging-punctuation: none;
    line-height: inherit;
    text-align: start;
    touch-action: manipulation;
}

:where(button) {
    cursor: pointer;
    user-select: none;
}

:where(textarea) {
    resize: vertical;
}

:where(textarea:not([rows])) {
    field-sizing: content;
}

:where(fieldset, iframe) {
    border: none;
}

:where(span, small, p, li, h1, h2, h3, h4, h5, h6) {
    overflow-wrap: break-word;
    text-wrap: pretty;
}

:where(abbr[title]) {
    border: none;
    text-decoration: none;
}

:where(cite) {
    font-style: inherit;
}

:where(small) {
    font-size: inherit;
}

:where(li, ol, ul) {
    list-style: none;
}

:where(dialog, [popover]) {
    background: transparent;
    border: none;
    color: inherit;
    margin: auto;
    max-block-size: none;
    max-inline-size: none;
    position: fixed;
}

:where([popover]) {
    inset: auto;
}

:where(dialog:not([open], [popover]), [popover]:not(:popover-open)) {
    display: none;
}

:where([hidden]:not([hidden="until-found"])) {
    display: none !important;
}




:root {
	--ff-primary: 'Lato', sans-serif;
	--ff-secondary: 'Urbanist', sans-serif;

	--color-primary: #010500;
	--color-primary-shade: #E9E9E9;
	--color-primary-light: #F2F2F2;
	--color-primary-transparent: #01050088;
    --color-primary-transparent-light: #01050013;

    --color-secondary: #ffffff; 
	--color-secondary-transparent: #ffffff33;


	--color-highlight: #1DB100;
	--color-highlight-shade: #D1EFCC;
	--color-highlight-light: #E8F7E5;
	--color-highlight-gradient: linear-gradient(to left, #1DB100 0%, #5D5D5D 100%);


    --msr-default: 30px;
	--msr-s: 16px;

    --rds-default: 23px;

	--trans-easing-default: cubic-bezier(0.64, 0.57, 0.67, 1);
    --trans-duration-default: 162ms;

	--ts-h1: clamp(40px, 5vw, 72px);
	--ts-h1-lh: 120%;

	--ts-h2: clamp(36px, 5vw, 52px);
	--ts-h2-lh: 120%;

	--ts-h3: clamp(32px, 5vw, 44px);
	--ts-h3-lh: 120%;

	--ts-h4: clamp(24px, 5vw, 36px);
	--ts-h4-lh: 130%;

	--ts-h5: clamp(20px, 5vw, 28px);
	--ts-h5-lh: 140%;

	--ts-h6: clamp(18px, 5vw, 22px);
	--ts-h6-lh: 140%;

	--ts-pl: clamp(16px, 5vw, 18px);
	--ts-pl-lh: 150%;

	--ts-pr: 16px;
	--ts-pr-lh: 150%;

	--ts-ps: 14px;
	--ts-ps-lh: 150%;
}



html {
    background:var(--color-secondary);
    color: var(--color-primary);
}

.container {
	padding:calc( var(--msr-default) * 3 ) var(--msr-default);
}

.container-flat {
    margin-bottom:0;
    margin-top:0;
    padding-bottom:0;
    padding-top:0;
}


.row:not(:last-child) {
	margin-bottom:calc( var(--msr-default) * 2.5);
}

.col > .row:not(:last-child),
.col:first-child > .row {
	margin-bottom:calc( var(--msr-default) * 1);
}


.row:not(.row-full) {
    max-width: 1280px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.row-border {
	border-top:1px solid var(--color-primary-shade);
	padding-top:var(--msr-default);
}

.row-border > .cards .card {
    position:relative;
}

#therapeutische-filme .row-border {
    border-color:#D7E4D4;
}

.row-border > .cards .card:not(:nth-child(4)):after {
    content: '';
    position: absolute;
    right: calc(var(--msr-default) * -0.5);
    bottom: var(--msr-default);
    width: 1px;
    height: 100%;
    background-color: #D7E4D4;
}


.flex {
	display:flex;
	flex-direction: row;
	place-items: center;
	gap: var(--msr-default);
	justify-content: space-between;
	margin-bottom:1em;
}

.container > .row.flex:not(.flex-persistent) {
	gap: calc(var(--msr-default) * 2.84);
}

.container > .row.flex:not(.flex-persistent) > * {
	flex:1 1 0px;
}

.flex-start {
	justify-content: flex-start;
}


.flex-small-gap {
	gap: calc( var(--msr-default) / 2);
	margin-bottom:.5em;
}

.flex:last-child,
.flex:first-child:last-child {
	margin-bottom:0;	
}


.grid {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: var(--msr-default)
}

.grid-two {
	grid-template-columns:repeat(2, calc( ( (100% - (var(--msr-default)) ) / 2) ));
}

.grid-three {
	grid-template-columns:repeat(3, calc( ( (100% - (var(--msr-default) * 2) ) / 3) ));
}

.grid-three.cards-blog-archive {
    row-gap: calc(var(--msr-default) * 2);
}

.grid-four {
	grid-template-columns:repeat(4, calc( ( (100% - (var(--msr-default) * 3) ) / 4) ));
}

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

.center {
	display:block;
	margin-left:auto;
	margin-right:auto;
}

.flex.center {
    display:inline-flex;
}


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





h1, h2, h3, h4, h5, h6 {
	font-family:var(--ff-secondary);
	font-weight:700;
	margin-bottom:.5em;
}

p, span, small, label, input, textarea, button, a {
	font-size:var(--ts-pr);
	line-height:var(--ts-pr-lh);
	font-family:var(--ff-primary);
	font-weight:400;
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6, p {
    max-width:768px;
}

.text-center > h1,
.text-center > h2,
.text-center > h3,
.text-center > h4,
.text-center > h5,
.text-center > h6,
.text-center > p {
    margin-left:auto;
    margin-right:auto;
}

p.text-large {
	font-size:var(--ts-pl);
	line-height:var(--ts-pl-lh);
}

p:not(:last-child) {
	margin-bottom:1em;
}

main ul {
    margin-bottom:1em;
}

main ul li {
    list-style: disc;
    margin-bottom:.38em;
}

.heading-text {
	font-weight:600;
	margin-bottom:.62em;
	display:block;
}


h1 {
	font-size:var(--ts-h1);
	line-height:var(--ts-h1-lh);
}

h2 {
	font-size:var(--ts-h2);
	line-height:var(--ts-h2-lh);
}

h3 {
	font-size:var(--ts-h3);
	line-height:var(--ts-h3-lh);
}

h4 {
	font-size:var(--ts-h4);
	line-height:var(--ts-h4-lh);
}

main p + h4 {
    margin-top:1em;
}

main p a {
    color:var(--color-highlight)
}

h5 {
	font-size:var(--ts-h5);
	line-height:var(--ts-h5-lh);
}

.card-therapeutische-filme h5 {
    font-size:var(--ts-h6);
	line-height:var(--ts-h6-lh);
}


h6 {
	font-size:var(--ts-h6);
	line-height:var(--ts-h6-lh);
}

small {
	font-size:var(--ts-ps);
	line-height:var(--ts-ps-lh);
}

a {
	color:var(--color-primary);
}

.link {
	position:relative;
	padding-right:1em;
    font-weight: 600;
}

.link:after {
	content:'';
	display:inline-block;
	width:7px;
	height:12px;
	position:absolute;
	right:0;
	bottom:2px;
	background:url(img/icon_chevron_right.svg);
	background-repeat: no-repeat;
}

.margin-bottom {
    margin-bottom:1em;
}

label, .field-wrap .nf-field-label label {
	font-weight:normal
}

.ninja-forms-req-symbol,
.nf-form-fields-required {
	display:none;
}

input, textarea {
	background-color:var(--color-primary-light);
	padding: 0.62em .84em;
	border-radius:calc( var(--rds-default) / 3);
}


.button,
input[type="submit"] {
	padding:.62em 2.162em;
	border-radius:var(--rds-default);
	text-align:center;
	background:var(--color-highlight-gradient);
	color:var(--color-secondary);
	font-weight:600;
    font-size:var(--ts-pl);
    line-height:var(--ts-pl-lh);
    cursor:pointer;
    transition: all 0.3s var(--trans-easing-default);

}

.button:hover,
input[type="submit"]:hover,
header.site-header a:hover,
main p a:hover,
a.link:hover,
footer.site-footer a:hover {
    filter:brightness(1.062);
}

.button:active,
input[type="submit"]:active,
header.site-header a:active,
main p a:active,
a.link:active,
footer.site-footer a:active {
    filter:brightness(0.9);
    position:relative;
    top:1px;
    transition:none;
}


.section-alt #nf-form-2-cont .ninja-forms-form-wrap {
    margin-right:auto;
}


.section-alt .button.button-secondary,
.section-alt #nf-form-2-cont .ninja-forms-form-wrap input,
.section-alt #mc_embed_signup_scroll input[type="email"] {
    background-color:#DCEBDA;
}

.section-alt #nf-form-2-cont .ninja-forms-form-wrap input[type="submit"],
.section-alt input[type="submit"].button.button-secondary.button-secondary-dark {
    background:var(--color-highlight-gradient);
	color:var(--color-secondary);
}

.field-wrap .nf-field-element input:not([type="checkbox"]), .nf-field-element .button, .nf-field-element input[type="submit"], .button {
    height:48px;
}

.nf-field-element .button, .nf-field-element input[type="submit"], .button {
    line-height:125%;
}

.button.button-secondary {
	background:var(--color-secondary);
	color:var(--color-primary);
}

.button.button-secondary.button-secondary-dark,
#nf-form-2-cont input[type="submit"] {
	background:var(--color-primary-shade);
	color:var(--color-primary);
}

.button.button-tertiary {
	background:var(--color-secondary-transparent);
	color:var(--color-secondary);
}

.button.button-tertiary.button-dark {
	background:var(--color-primary-transparent-light);
	color:var(--color-primary);
}

.ninja-forms-form-wrap {
	max-width: 560px;
	margin-left:auto;
	margin-right:auto;
}

.nf-response-msg {
    border-radius:var(--rds-default);
    border:1px solid var(--color-highlight);
    padding:1em;
    text-align: center;
    color:var(--color-highlight);
}

.field-wrap.checkbox-wrap > div input[type=checkbox] {
	background-color:var(--color-primary-light);
	position:relative;
	width:23px;
	height:23px;
    padding:0;
    vertical-align: bottom;
}

.field-wrap.checkbox-wrap > div input[type=checkbox]:after {
	content: '✓';
    display: none;
    position: absolute;
    text-align: center;
    color: var(--color-secondary);
    width: 100%;
    top: 0;
    left: 0;
    line-height: 22px;
}


.field-wrap.checkbox-wrap > div input[type=checkbox]:checked {
	background-color:var(--color-highlight);
}

.field-wrap.checkbox-wrap > div input[type=checkbox]:checked:after {
	display:block;
}

img {
	margin-bottom:.84em;
}

figure:not(:last-child) {
	margin-bottom:calc( var(--msr-default) / 2);
}

figure img {
	aspect-ratio: 0.84;
	object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: var(--rds-default);
    overflow: hidden;
	margin-bottom:0;
}


.cards:not(:last-child) {
	margin-bottom:var(--msr-default);
}

.tag {
	background-color:var(--color-primary-shade);
	padding:.5em 1em;
	border-radius:var(--rds-default);
    font-weight:600;
}

.tag + small {
    font-weight:600;
}

.tag-light {
	background-color:var(--color-secondary-transparent);
    color: var(--color-secondary);
}

.tag-dark {
	background-color:var(--color-primary-transparent-light);
    color: var(--color-primary);
}

.ar-auto {
    aspect-ratio: auto;
}

header.site-header {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:2;
}

header.site-header + main {
    margin-top:104px;
}

header.site-header .button {
    padding-left:1.38em;
    padding-right:1.38em;
    height:44px;
    line-height:18px;
}



.site-header .container {
	background-color:var(--color-highlight-light);
	margin:0;
	padding-top:var(--msr-default);
	padding-bottom:var(--msr-default);
}

.site-header .site-header-branding img {
	width:auto;
	height:40px;
    margin-bottom:0;
}

.site-header .site-header-branding + div.flex {
    margin-bottom:0;
}


.site-header .main-navigation ul {
	display:flex;
	gap: var(--msr-default);
}

/*
-----------------------------------------------------------------
 5. MOBIL-MENÜ (LIGHTWEIGHT)
-----------------------------------------------------------------
*/

/* --- 1. Mobile-Menü Button (Hamburger) --- */

.mobile-menu-toggle {
    display: none; /* Standardmäßig auf Desktop versteckt */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px; /* Klickfläche vergrößern */
    z-index: 1001; /* Muss über dem Header-Inhalt liegen */
    position: relative; /* Für die ::before/::after Striche */
    width: 40px;
    height: 40px;
}

.mobile-menu-toggle-icon,
.mobile-menu-toggle-icon::before,
.mobile-menu-toggle-icon::after {
    content: '';
    display: block;
    background-color: var(--color-primary); /* Strichfarbe */
    height: 3px;
    width: 25px;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.3s var(--trans-easing-default), opacity 0.3s var(--trans-easing-default), background-color 0.3s var(--trans-easing-default);
}

.mobile-menu-toggle-icon::before {
    transform: translate(-50%, -50%) translateY(-8px); /* Strich darüber */
}

.mobile-menu-toggle-icon::after {
    transform: translate(-50%, -50%) translateY(8px); /* Strich darunter */
}


/* --- 2. Mobile Layout (bis 1024px) --- */
/* (Dein Breakpoint aus der style.css) */
@media (max-width: 1024px) {
    
    .mobile-menu-toggle {
        display: block; /* Auf Mobilgeräten anzeigen */
    }

    /* Das ist der Wrapper für NAV + KONTAKT-BUTTON */
    .site-header .site-header-right .main-navigation {
        display: none; /* Auf Mobilgeräten standardmäßig verstecken */
        
        /* Als Overlay-Menü stylen, wenn es aktiv ist */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh; /* Volle Bildschirmhöhe */
        background-color: var(--color-secondary); /* Weißer Hintergrund */
        z-index: 1000; /* Liegt über dem Seiteninhalt */
        
        /* Zentrierung der Menüpunkte */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: calc(var(--msr-default) * 2);
        padding: var(--msr-default);
    }

    .site-header .site-header-right .main-navigation ul {
        flex-direction: column; /* Menüpunkte untereinander */
        text-align: center;
        gap: var(--msr-default);
    }

    .site-header .site-header-right .main-navigation ul a {
        font-size: var(--ts-h4); /* Größere Schrift im Overlay */
    }
    
    
    .site-header .site-header-branding {
        margin-right:auto;
    }

}


/* --- 3. Aktiver Zustand (Menü offen) --- */

/* Body-Klasse schaltet das Menü sichtbar */
body.mobile-menu-active .site-header .site-header-right .main-navigation {
    display: flex; /* Zeigt das Overlay-Menü an */
}


/* Body-Klasse verhindert Scrollen im Hintergrund */
body.mobile-menu-active {
    overflow: hidden;
}

/* Hamburger zu 'X' animieren */
body.mobile-menu-active .mobile-menu-toggle-icon {
    background-color: transparent; /* Mittleren Strich ausblenden */
}

body.mobile-menu-active .mobile-menu-toggle-icon::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

body.mobile-menu-active .mobile-menu-toggle-icon::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Position des Toggle-Buttons im aktiven Zustand */
body.mobile-menu-active .mobile-menu-toggle {
    position: fixed; /* 'fixed' damit er über dem Overlay bleibt */
    top: var(--msr-default); /* Gleicher Abstand wie der Header-Container */
    right: var(--msr-default);
    z-index: 1001; /* Stellt sicher, dass er über dem Menü (1000) liegt */
}










.figure-squared {
    position: absolute;
    z-index: -1;
    width: 50%;
    top: 0;
    right: 0;
    height: 100%;
}

.figure-squared-alt {
    right:auto;
    left:0;
}

.figure-squared img {
    border-radius:0;
}


.section-content {
    position:relative;
}

.section-content-squared {
    aspect-ratio: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
}




.section-content-squared > .container > .row.flex {
    gap: calc(var(--msr-default) * 5.162);
}


.section-alt {
	background-color:var(--color-highlight-light);
}


.section-darken {
	position: relative;
}

.section-darken:after {
	content: '';
	position: absolute;
	inset: 0;
	background-color: var(--color-primary-transparent);
	z-index: 0;
}

.section-darken > * {
	position: relative;
	z-index: 1;
}




.section-hero {
	background-repeat: no-repeat;
	background-size: cover;
	color:var(--color-secondary);
	padding-top: calc( 4*  var(--msr-default) );
	padding-bottom: calc( 4 * var(--msr-default) );
    background-position: center;
}

main > .section-hero:first-child {
    padding-top: calc(.9162 * var(--msr-default));
    padding-bottom: calc(1.162 * var(--msr-default));
    height: calc(100svh - 104px);
    align-content: center;
    min-height:fit-content;
}

@media (max-width: 1024px) {
    main > .section-hero:first-child {
        height: calc(100svh - 86px);
    }
}


@media (max-width: 640px) {
    main > .section-hero:first-child {
        height: calc(100svh - 66px);
    }
}

.section-hero .button {
	margin-top:1em;
}



.section-hero-content h1 {
	max-width:60%;
}

.section-hero-content p {
	max-width:53%;
}




.figure-blog-thumbnail {
	aspect-ratio:1.5;
}





.newsletter-form + small {
    display:block;
    text-align: right;
}


#nf-form-2-cont nf-fields-wrap,
#mc_embed_signup_scroll {
	display:grid;
	gap:13px;
    grid-template-columns: 1fr auto;
    row-gap:5px;
}

#nf-form-2-cont nf-fields-wrap nf-field:last-child,
#mc_embed_signup_scroll > *:last-child {
    grid-column: 1 / -1;
}

#mc_embed_signup_scroll > * {
    width:100%;
}

#mc_embed_signup_scroll input[type="email"] {
    width:100%;
    height: 48px;
}


#nf-form-2-cont .ninja-forms-form-wrap {
    margin-right:0;
}

#nf-form-2-cont nf-fields-wrap .nf-field-container {
    margin-bottom:0;
}



#nf-form-2-cont .nf-field-label {
	display:none;
}


/* Hintergrund der ganzen Sektion */
.section-testimonials {
    padding: var(--msr-default) 0; /* Beispiel-Abstand */
}

/* Überschriften-Block */
.heading-testimonials {
    /* Dein Design hat die Überschriften linksbündig */
    text-align: left;
    margin-bottom: 40px;
}
.heading-testimonials h2 {
    font-size: 2.5rem; /* Beispielgröße */
    color: #000;
    margin-bottom: 10px;
}
.heading-testimonials p {
    font-size: 1.125rem;
    color: #333;
}


/* ---------------------------------- */
/* 4.2 Testimonial Card Styling       */
/* ---------------------------------- */

.testimonial-card {
    background-color: var(--color-highlight-shade); /* Das Hellgrün der Karten */
    border-radius: 12px;
    padding: 24px;
    height: 100%; /* Stellt sicher, dass alle Karten gleich hoch sind */
    box-sizing: border-box; /* Wichtig für padding */
    display: flex;
    flex-direction: column;
}

.testimonial-card .stars {
    color: #000; /* Schwarz für die Sterne */
    font-size: 1.2rem;
    margin-bottom: 16px;
    letter-spacing: 2px;
}

.testimonial-card .quote {
    font-size: 1.1rem;
    font-weight: 600;
    color: #000;
    margin-bottom: 24px;
    flex-grow: 1; /* Schiebt den Author-Block nach unten */
}

.testimonial-card .author {
    display: flex;
    align-items: center;
}

.testimonial-card .author-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #e9ddeb; /* Das Lila/Rosa vom Icon-Hintergrund */
    margin-right: 12px;
    aspect-ratio: 1;
    
    /* Hier könntest du ein SVG-Icon als background-image einfügen */
    /* background-image: url('pfad/zum/icon.svg'); */
    /* background-position: center; */
    /* background-repeat: no-repeat; */
}

.testimonial-card .author-icon img {
    margin:0;
}

.testimonial-card .author-info {
    display: flex;
    flex-direction: column;
}

.testimonial-card .author-info strong {
    font-weight: 600;
    color: #000;
    margin-bottom:.184em;
}

.testimonial-card .author-info span {
    font-size: 0.9rem;
    color: #333;
}


/* ---------------------------------- */
/* 4.3 Splide Navigation Styling      */
/* ---------------------------------- */

/* Wrapper für die Punkte-Navigation */
.testimonial-pagination {
    position: relative; /* Positionierung unter den Slider */
    bottom: auto;
    margin-top: 30px; /* Abstand nach oben */
    left: 0;
    width: 100%;
    display: flex;
    justify-content: flex-start; /* Punkte linksbündig */
}

/* Einzelner Punkt */
.splide__pagination__page {
    background-color: #ccc; /* Inaktiver Punkt */
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin: 0 4px;
    opacity: 0.8;
    transition: background-color 0.3s ease;
}

/* Aktiver Punkt */
.splide__pagination__page.is-active {
    background-color: #333; /* Aktiver Punkt (dunkel) */
    opacity: 1;
    transform: scale(1.1); /* Leicht größer */
}

/* Wrapper für die Pfeile */
.testimonial-arrows {
    /* Positioniert die Pfeile unten rechts, wie im Design */
    position: absolute;
    bottom: -13px; /* Justieren nach Bedarf */
    right: 0;
    display: flex;
    gap: 10px;
}

/* Styling der Pfeil-Buttons */
.splide__arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--color-highlight-shade); /* Gleiches Grün wie die Karten */
    border: none;
    color: #000; /* Pfeil-Farbe */
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    
    /* Zurücksetzen der Standard-Positionierung von Splide */
    position: static;
    transform: none;
    opacity: 1;
}

.splide__arrow:hover {
    background-color: #cde4d5; /* Leicht dunkler bei Hover */
}

.splide__arrow--prev {
    /* Keine spezielle Anpassung nötig */
}
.splide__arrow--next {
    /* Keine spezielle Anpassung nötig */
}

/* Pfeile ausblenden, wenn deaktiviert (z.B. bei nicht-loop) */
.splide__arrow:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Auf Mobilgeräten die Pfeile mittig unter den Slider setzen (Optional) */
@media (max-width: 768px) {
    .testimonial-arrows {
        position: relative;
        bottom: auto;
        right: auto;
        justify-content: center;
        margin-top: var(--msr-default);
    }
    
    .testimonial-pagination {
        justify-content: center;
        margin-top: var(--msr-default);
    }
}






/* --- NEUER Content Switcher (Bild + Text) --- */

/* Linke Spalte: Bilder */
.switcher-image-pane {
    /* Die <figure>-Elemente werden bereits durch dein
       bestehendes CSS (aspect-ratio, border-radius) formatiert. 
       Wir brauchen hier keine weiteren Styles. */
}

.switcher-image {
    display: none; /* Alle Bilder standardmäßig verstecken */
    margin-bottom: 0; /* Verhindert doppelte Abstände */
}

.switcher-image.active {
    display: block; /* Nur das aktive Bild anzeigen */
}

/* Rechte Spalte: Trigger-Blöcke */
.switcher-trigger-pane {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Zentriert die Textblöcke vertikal */
}

.switcher-trigger {
    position: relative;
    cursor: pointer;
    padding-top: 15px; /* Platz für den Balken */
    transition: color 0.3s ease, opacity 0.3s ease;
}

/* Abstand zwischen den Trigger-Blöcken */
.switcher-trigger:not(:last-child) {
    margin-bottom: var(--msr-default);
}

/* Der schwarze Balken */
.switcher-trigger::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40px; /* Breite des Balkens */
    height: 3px; /* Höhe des Balkens */
    background-color: var(--color-primary);
    
    /* Standardmäßig versteckt */
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--trans-easing-default);
}

/* Inaktive Trigger ausblenden/ausgrauen */
.switcher-trigger:not(.active) {
    color: #777; /* Graut Text (h3 + p) aus */
    opacity: 0.7;
}

/* Aktiven Trigger normal anzeigen */
.switcher-trigger.active {
    color: var(--color-primary);
    opacity: 1;
}

/* Balken für den aktiven Trigger einblenden */
.switcher-trigger.active::before {
    transform: scaleX(1);
}

/* Die h3 und p im Trigger-Block */
.switcher-trigger h3 {
    font-size: var(--ts-h5); /* H5-Größe passt besser zum Screenshot */
    line-height: var(--ts-h5-lh);
    margin-bottom: 0.5em; /* Abstand zwischen H3 und P */
}

.switcher-trigger p {
    margin-bottom: 0; /* Keinen Abstand unter dem P-Tag */
}




.flex-tags {
    flex-wrap: wrap;
}



.row.row-blog-single,
.site-content .type-page .row {
    max-width:720px;
}

.section-blog-hero .link {
    display:inline;
}

.row-blog-post img {
    border-radius: var(--rds-default);
    width:100%;
}

.row-blog-thumbnail figure img {
    aspect-ratio: 16/9;
}


.ae {
    height: 14px;
    display: inline;
    vertical-align: bottom;
    position: relative;
    top: 9px;
    padding-left: 2px;
    padding-right: 2px;
}







/*
-----------------------------------------------------------------
 6. PORTFOLIO MASONRY GALLERY
-----------------------------------------------------------------
*/

.masonry-gallery-grid {
    /* 1. Set up the columns for desktop */
    columns: 3;
    
    /* 2. Use your existing gap variable */
    gap: var(--msr-default);
}

.masonry-gallery-item {
    /* 3. This is CRITICAL: 
       It prevents an image from being cut in half and
       moved to the next column. */
    break-inside: avoid;
    
    /* 4. Add spacing below each image */
    margin-bottom: var(--msr-default);
    
    /* 5. Ensure the figure itself takes up 100% of its column */
    width: 100%;
}

.masonry-gallery-item figure {
    margin-bottom: 0; /* Your theme adds margin to figures */
}

.masonry-gallery-item img {
    /* 6. CRITICAL OVERRIDE:
       Your main CSS forces images to aspect-ratio: 0.84.
       We MUST override this for masonry to work, so the
       images can use their natural height. */
    height: auto;
    aspect-ratio: auto;
    width: 100%; /* Make sure image is responsive */
}

.masonry-gallery-item figcaption {
    font-size: var(--ts-ps);
    color: #777;
    padding-top: 5px;
}


.items-count-5 .masonry-gallery-item img {
    aspect-ratio: 1/0.562962963;
}
.items-count-5 .masonry-gallery-item:nth-child(1) img,
.items-count-5 .masonry-gallery-item:nth-child(3) img,
.items-count-5 .masonry-gallery-item:nth-child(4) img  {
    aspect-ratio: 1.162;  
}







/*
.masonry-gallery-item:nth-child(1) img {
    aspect-ratio: 1;   
}

.masonry-gallery-item:nth-child(2) img {
    aspect-ratio: 1;   
}

.masonry-gallery-item:nth-child(3) img {
    aspect-ratio: 2/1;   
}

.masonry-gallery-item:nth-child(4) img {
    aspect-ratio: 2/1;   
}

.masonry-gallery-item:nth-child(5) img {
    aspect-ratio: 1;   
}

.masonry-gallery-item:nth-child(6) img {
    aspect-ratio: 1;   
}

.masonry-gallery-item:nth-child(7) img {
    aspect-ratio: 1;   
}
*/






/*
-----------------------------------------------------------------
 6.1. Responsive Masonry
-----------------------------------------------------------------
*/

@media (max-width: 1024px) {
    .masonry-gallery-grid {
        /* Switch to 2 columns on tablets */
        columns: 2;
    }
}

@media (max-width: 640px) {
    .masonry-gallery-grid {
        /* Switch to 1 column on mobile */
        columns: 1;
    }
}

/*
-----------------------------------------------------------------
 6.2. MASONRY (SINGLE IMAGE FIX)
-----------------------------------------------------------------
*/

/* * This class will be added by PHP if there's only 1 image.
 * It disables the columns and centers the single item.
*/
.masonry-gallery-grid.items-count-1 {
    columns: 1; /* Disables the 3-column layout */
    gap: 0;
}

.masonry-gallery-grid.items-count-1 .masonry-gallery-item {
    /* Give the single, centered image a max width */
    max-width: 720px; /* Or whatever looks best to you */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0; /* No extra gap needed */
}


/*
-----------------------------------------------------------------
 6.3. MASONRY (TWO IMAGE FIX)
-----------------------------------------------------------------
*/

/* * This class will be added by PHP if there are exactly 2 images.
 * It forces a 2-column layout and centers them.
*/
.masonry-gallery-grid.items-count-2 {
    /* Use 2 columns instead of 3 */
    columns: 2;
    
    /* Set a max-width to "center" the 2-column block 
       (e.g., 2 columns + 1 gap) */
    max-width: 860px; /* (ca. 405px + 405px + 30px gap) */
    
    /* Center the block itself */
    margin-left: auto;
    margin-right: auto;
}




.newsletter-heading p {
    margin-bottom:0;
}


.site-footer-nav h6 {
	font-size:var(--var-ts-ps);
	line-height:var(--var-ts-ps-lh);
}


.site-footer-nav a {
	font-size:var(--var-ts-ps);
	line-height:var(--var-ts-ps-lh);
}

.site-footer strong {
    margin-bottom:1em;
    display:block;
}

.site-footer li:not(:last-child) a {
    padding-bottom:.62em;
    display:block;
}





/*
-----------------------------------------------------------------
 7. STYLING FÜR PAGINIERUNG
-----------------------------------------------------------------
*/

/* 1. Haupt-Container für die Paginierung */
.navigation.pagination {
    /* Fügt Abstand nach oben zu den Karten hinzu */
    margin-top: calc(var(--msr-default) * 2);
    width: 100%;
}

/* 2. Wrapper für die Links */
.navigation.pagination .nav-links {
    display: flex;
    flex-wrap: wrap; /* Falls es auf Mobilgeräten zu viele Seiten gibt */
    justify-content: center; /* Zentriert die Links */
    align-items: center;
    
    /* Verwendet deinen Standard-Abstand */
    gap: var(--msr-s); 
}

/* 3. Alle Paginierungs-Elemente (Zahlen, "Weiter", "Zurück") */
.page-numbers {
    display: flex; /* Sorgt für perfekte vertikale & horizontale Zentrierung */
    justify-content: center;
    align-items: center;
    text-decoration: none;
    
    /* Schriften & Farben aus deinem Theme */
    font-weight: 600;
    font-size: var(--ts-pr);
    color: var(--color-primary);
    background-color: var(--color-primary-shade); /* Das helle Grau, E9E9E9 */
    
    /* Sizing aus deinem Theme (wie .button) */
    height: 48px;
    min-width: 48px; /* Macht einzelne Zahlen "quadratisch" */
    border-radius: var(--rds-default); /* 23px Radius */
    padding: 0 1.2em; /* Horizontaler Puffer für Text (z.B. "Weiter") */
    
    /* Hover-Effekt */
    transition: all 0.3s var(--trans-easing-default);
}

/* 4. Das "aktive" Element (die aktuelle Seite) */
.page-numbers.current {
    /* Verwendet dein Highlight-Gradient (wie .button) */
    background: var(--color-highlight-gradient);
    color: var(--color-secondary);
    font-weight: 600;
    cursor: default;
}

/* 5. Hover- & Active-Status (kopiert von .button) */
.page-numbers:not(.current):hover {
    filter: brightness(1.062);
}

.page-numbers:not(.current):active {
    filter: brightness(0.9);
    position: relative;
    top: 1px;
}

/* Aktives Element soll keinen Hover-Effekt haben */
.page-numbers.current:hover,
.page-numbers.current:active {
    filter: none;
    top: 0;
}

/* 6. Screenreader-Text ausblenden */
.navigation.pagination .screen-reader-text {
    display: none;
}


.flex > .newsletter-heading + div,
#kontakt #mc_embed_signup {
    max-width:500px;
}

#kontakt #mc_embed_signup {
    margin-left:auto;
    margin-right:auto;
}

 



@media(max-width:1024px) {

    :root {
        --msr-default: 23px;
    }

    header.site-header + main {
        margin-top:86px;
    }
    
    #nf-form-2-cont nf-fields-wrap {
        flex-direction: column;
    }

	.section-hero-content h1,
    .section-hero-content p {
        max-width:none;
    }

    .section-content-squared > .container {
        padding-top:calc( var(--msr-default) * 2.162 );
        padding-bottom:calc( var(--msr-default) * 2.162 );
    }
    
    .section-content-squared .row.flex > .col > .row:last-child {
        margin-bottom:0;
    }

    .container > .row.flex:not(.flex-persistent) {
        gap:0;
    }

 
    .row.flex.row-flex-responsive-reverse {
        flex-direction: column-reverse;
    }


    .figure-squared {
        position:static;
        width:100%;
        height:auto;
    }

    .figure-squared img {
        aspect-ratio: 1;
    }

	.grid {
		grid-template-columns:auto;
	}

    .cards.grid {
        grid-row-gap:calc(var(--msr-default) * 2);
    }

    .grid-four {
        grid-template-columns: repeat(2, calc(((100% - (var(--msr-default) * 2)) / 2)));
        gap: calc(var(--msr-default) * 2);
    }

    .row-border .grid-four {
        row-gap:0;
    }

    .row-border > .cards .card:not(:nth-child(4)):after {
        content:none;
    }

    .row-border > .cards .card:nth-child(odd):after {
        content: '';
        position: absolute;
        right: calc(var(--msr-default) * -1);
        bottom: var(--msr-default);
        width: 1px;
        height: 100%;
        background-color: #D7E4D4;
    }

    .row-border > .cards .card:not(:nth-child(3), :nth-child(4)) {
        padding-bottom:calc(var(--msr-default) * 2);
    }




	.flex:not(.flex-persistent) {
		flex-direction: column;
        width:100%;
	}

    input[type="submit"],
	.button:not(.button-persistent),
    .nf-form-cont .field-wrap>div input[type=checkbox],
    .nf-form-cont .field-wrap button,
    .nf-form-cont .field-wrap input[type=button],
    .nf-form-cont .field-wrap input[type=submit] {
		width:100%;
        display:block;
	}


    /*
    .container > .row.flex:not(.flex-persistent) > .col:first-child {
        margin-top:calc((var(--msr-default) * 2.162));
    }

    .container > .row.flex:not(.flex-persistent, .row-flex-responsive-reverse) > .col:not(:last-child) {
        margin-bottom:calc((var(--msr-default) * 2.162));
    }
    */

    .row.flex > .col:first-child > .row {
        margin-bottom:calc((var(--msr-default) * 3.162));
    }

    .row.row-flex-responsive-reverse > .col:first-child > .row {
        margin-top:calc((var(--msr-default) * 3.162));
    }

    .row.flex > .col:first-child > .row:not(:last-child) {
        margin-bottom:calc((var(--msr-default) * 1.5));
    }

 
 


    section.newsletter > .container > .row.flex {
        gap:var(--msr-default);
    }

    .newsletter-heading {
        text-align: center;
    }

    .site-footer-branding.text-right {
        text-align:center;
    }

    /*
    .flex.center {
        display:block;
    }
    */


    .section-hero .button + .button {
        margin-top:0;
    } 

}

@media(max-width:640px) {
    .grid-four {
        grid-template-columns:auto;
    }

    .row-border > .cards .card:not(:nth-child(4)):after,
    .row-border > .cards .card:nth-child(odd):after {
        content:none;
    }

    .row-border > .cards .card:not(:last-child) {
        padding-bottom:calc(var(--msr-default) * 2);
    }


    #nf-form-2-cont nf-fields-wrap,
    #mc_embed_signup_scroll {
        display:flex;
        text-align:center;
    }

    #mc_embed_signup_scroll {
        flex-direction: column;
        gap: 13px;
    }

  
    .newsletter .row > * {
        width:100%;
    }

    .ninja-forms-form-wrap {
        max-width:none;
    }

    .site-header .container {
        padding:var(--msr-s);
    }

    header.site-header .button {
        font-size:14px;
        height: 40px;
        line-height: 21px;
    }

    .site-header .site-header-branding img {
        height:33px;
    }

    .site-header .container > .row {
        gap: calc(var(--msr-s) * .62);
    }

    .container {
        padding-left:var(--msr-s);
        padding-right:var(--msr-s);
    }

    header.site-header + main {
        margin-top: 66px;
    }

    body.mobile-menu-active .mobile-menu-toggle {
        top: var(--msr-s);
        right: var(--msr-s);
    }
}



.custom-video-wrapper {
    width: 100%;
    /* Die magische Zeile: Ersetzt den padding-bottom Hack */
    aspect-ratio: 16 / 9; 
    
    /* Optional: Maximale Breite begrenzen, falls gewünscht */
    max-width: 100%; 
    
    /* Deine Anforderung: Abstände kontrollieren */
    margin-bottom: 1.5rem; /* Oder 0, je nach Wunsch */
    margin-top: 0;
}

.custom-video-wrapper iframe {
    width: 100%;
    height: 100%;
    display: block; /* Verhindert kleine Abstände unter Inline-Elementen */
}

.row.row-blog-thumbnail {
    margin-bottom:1.84em;
}



p + figure.wp-block-image {
    margin-top:1.84em;
}

figure.wp-block-image img {
    max-height: calc(100dvh - 162px);
    min-height: 230px;
    max-width: 768px;
    display: block;
    margin: 0 auto;
    aspect-ratio: auto;
    min-width: 360px;
    width: auto;
}

body.single-nachrichten figure.wp-block-image img {
    max-width:720px;
}

@media(max-width:814px) {
    figure.wp-block-image img,
    body.single-nachrichten figure.wp-block-image img {
        max-width:100%;
        min-width: auto;
        height:auto;
    }
}





 :root {
            --bento-gap: 20px;
            --bento-radius: 24px;
            
            /* DEINE FIXEN WERTE */
            --h-small: 228px;
            --h-large: 405px; 
        }

        

        /* Standard Item (wird überschrieben, aber gut als Fallback) */
        .bento-item {
            position: relative;
            border-radius: var(--bento-radius);
            overflow: hidden;
            background-color: #eee;
            margin-bottom: var(--bento-gap); /* Abstand nach unten für Masonry Spalten */
            break-inside: avoid; /* WICHTIG: Verhindert, dass Bilder in Spalten zerschnitten werden */
            transform: translateZ(0); /* Fix für Render-Bugs in Safari */
        }

        .bento-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }


        /* * LAYOUT LOGIK (Desktop)
         * Wir nutzen fast überall column-count statt Grid, damit es "ausufert".
         */
        @media (min-width: 900px) {
            
            /* BASIS SETUP für alle ab 3 */
            .bento-grid[data-count] {
                display: block;
                column-count: 3;
                column-gap: var(--bento-gap);
            }

            /* --- FALL 1 & 2 (Sonderfälle, hier ist Grid okay/besser) --- */
            .bento-grid[data-count="1"] { 
                display: grid; grid-template-columns: 1fr; 
                height: 600px;
            }
            .bento-grid[data-count="1"] .bento-item { height: 100%; margin: 0; }

            .bento-grid[data-count="2"] { 
                display: grid; grid-template-columns: 1fr 1fr; gap: var(--bento-gap);
                height: var(--h-large);
            }
            .bento-grid[data-count="2"] .bento-item { height: 100%; margin: 0; }


            /* --- AB HIER: ECHTES MASONRY (Alles steht unterschiedlich hervor) --- */
            
            /* FALL 3: Groß - Klein - Groß 
             * Mitte ist viel kürzer -> Starke Wellenform
             */
            .bento-grid[data-count="3"] .bento-item:nth-child(1) { height: var(--h-large); }
            .bento-grid[data-count="3"] .bento-item:nth-child(2) { height: var(--h-small); }
            .bento-grid[data-count="3"] .bento-item:nth-child(3) { height: var(--h-large); }


            /* FALL 4: 
             * Col 1: Groß
             * Col 2: Groß
             * Col 3: Groß + Klein (Rechts steht stark hervor)
             */
            .bento-grid[data-count="4"] .bento-item:nth-child(1) { height: var(--h-large); }
            .bento-grid[data-count="4"] .bento-item:nth-child(2) { height: var(--h-large); }
            .bento-grid[data-count="4"] .bento-item:nth-child(3) { height: var(--h-large); }
            .bento-grid[data-count="4"] .bento-item:nth-child(4) { height: var(--h-small); }


            /* FALL 5: 
             * Col 1: Groß + Klein (653px)
             * Col 2: Klein + Groß (653px)
             * Col 3: Groß (405px) -> Rechts viel kürzer
             */
            .bento-grid[data-count="5"] .bento-item:nth-child(odd) { height: var(--h-large); }
            .bento-grid[data-count="5"] .bento-item:nth-child(even) { height: var(--h-small); }


            /* FALL 6: 
             * Col 1: L + S (653px)
             * Col 2: S + S + S (724px) -> Mitte steht hervor!
             * Col 3: L + S (653px)
             */
            .bento-grid[data-count="6"] .bento-item:nth-child(1) { height: var(--h-large); } /* L */
            .bento-grid[data-count="6"] .bento-item:nth-child(2) { height: var(--h-small); } /* S */
            
            .bento-grid[data-count="6"] .bento-item:nth-child(3) { height: var(--h-small); } /* S (Mitte start) */
            .bento-grid[data-count="6"] .bento-item:nth-child(4) { height: var(--h-small); } /* S */
            .bento-grid[data-count="6"] .bento-item:nth-child(5) { height: var(--h-small); } /* S */

            .bento-grid[data-count="6"] .bento-item:nth-child(6) { height: var(--h-large); } /* L (Rechts) */
            /* Hinweis: Browser verteilt Items oft automatisch um Balance zu halten. 
               Bei column-count ist die Reihenfolge Oben->Unten pro Spalte. */


            /* FALL 7 (Dein Favorit):
             * Col 1: S + L (653px)
             * Col 2: S + S + S (724px) -> Mitte steht hervor
             * Col 3: L + S (653px)
             */
            .bento-grid[data-count="7"] .bento-item:nth-child(1) { height: var(--h-small); }
            .bento-grid[data-count="7"] .bento-item:nth-child(2) { height: var(--h-large); }
            .bento-grid[data-count="7"] .bento-item:nth-child(3) { height: var(--h-small); }
            .bento-grid[data-count="7"] .bento-item:nth-child(4) { height: var(--h-small); }
            .bento-grid[data-count="7"] .bento-item:nth-child(5) { height: var(--h-small); }
            .bento-grid[data-count="7"] .bento-item:nth-child(6) { height: var(--h-large); }
            .bento-grid[data-count="7"] .bento-item:nth-child(7) { height: var(--h-small); }


            /* FALL 8: 
             * Col 1: L + S (653)
             * Col 2: L + L (830) -> Mitte steht massiv hervor
             * Col 3: S + S + L (876) -> Rechts noch länger? Oder Browser balanciert es anders.
             */
            .bento-grid[data-count="8"] .bento-item:nth-child(1) { height: var(--h-large); }
            .bento-grid[data-count="8"] .bento-item:nth-child(2) { height: var(--h-small); }
            .bento-grid[data-count="8"] .bento-item:nth-child(3) { height: var(--h-large); }
            .bento-grid[data-count="8"] .bento-item:nth-child(4) { height: var(--h-large); }
            .bento-grid[data-count="8"] .bento-item:nth-child(5) { height: var(--h-small); }
            .bento-grid[data-count="8"] .bento-item:nth-child(6) { height: var(--h-small); }
            .bento-grid[data-count="8"] .bento-item:nth-child(7) { height: var(--h-large); }
            .bento-grid[data-count="8"] .bento-item:nth-child(8) { height: var(--h-small); }


            /* FALL 9 (Klassisch 3x3, aber wir machen es unruhig) 
             * L S L / S L S / L S L
             */
            .bento-grid[data-count="9"] .bento-item:nth-child(odd) { height: var(--h-large); }
            .bento-grid[data-count="9"] .bento-item:nth-child(even) { height: var(--h-small); }
        }

        /* Mobile */
        @media (max-width: 899px) {
            .bento-grid[data-count] { display: flex; flex-direction: column; }
            .bento-item { height: 300px !important; width: 100%; }
        }