.elementor-kit-10{--e-global-color-primary:#1F3D2E;--e-global-color-secondary:#A7B89A;--e-global-color-text:#3B2C22;--e-global-color-accent:#C48A4E;--e-global-color-cb5d49b:#F7F2EA;--e-global-color-7e877e0:#FFFDF8;--e-global-color-cee91be:#FFFFFF;--e-global-typography-primary-font-family:"Cormorant Garamond";--e-global-typography-primary-font-weight:600;--e-global-typography-primary-font-style:normal;--e-global-typography-secondary-font-family:"Nunito Sans";--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-font-style:normal;--e-global-typography-text-font-family:"Nunito Sans";--e-global-typography-text-font-weight:400;--e-global-typography-text-font-style:normal;--e-global-typography-accent-font-family:"Nunito Sans";--e-global-typography-accent-font-weight:600;--e-global-typography-accent-font-style:normal;background-color:var( --e-global-color-cb5d49b );color:var( --e-global-color-text );font-family:"Nunito Sans", Sans-serif;font-weight:400;font-style:normal;line-height:1.65em;}.elementor-kit-10 button,.elementor-kit-10 input[type="button"],.elementor-kit-10 input[type="submit"],.elementor-kit-10 .elementor-button{background-color:var( --e-global-color-primary );font-family:"Nunito Sans", Sans-serif;font-size:1rem;font-weight:600;font-style:normal;line-height:1.2em;color:#FFFDF8;border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-primary );border-radius:0,375rem 0,375rem 0,375rem 0,375rem;padding:0,75rem 1,25rem 0,75rem 1,25rem;}.elementor-kit-10 button:hover,.elementor-kit-10 button:focus,.elementor-kit-10 input[type="button"]:hover,.elementor-kit-10 input[type="button"]:focus,.elementor-kit-10 input[type="submit"]:hover,.elementor-kit-10 input[type="submit"]:focus,.elementor-kit-10 .elementor-button:hover,.elementor-kit-10 .elementor-button:focus{background-color:#FFFDF8;color:var( --e-global-color-primary );border-style:solid;border-color:var( --e-global-color-primary );}.elementor-kit-10 e-page-transition{background-color:#FFBC7D;}.elementor-kit-10 p{margin-block-end:1rem;}.elementor-kit-10 a{color:var( --e-global-color-primary );font-family:"Nunito Sans", Sans-serif;font-weight:600;font-style:normal;}.elementor-kit-10 a:hover{color:var( --e-global-color-accent );}.elementor-kit-10 h1{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );font-style:var( --e-global-typography-primary-font-style );}.elementor-kit-10 h2{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );font-style:var( --e-global-typography-primary-font-style );}.elementor-kit-10 h3{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );font-style:var( --e-global-typography-primary-font-style );}.elementor-kit-10 h4{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );font-style:var( --e-global-typography-primary-font-style );}.elementor-kit-10 h5{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );font-style:var( --e-global-typography-primary-font-style );}.elementor-kit-10 h6{color:var( --e-global-color-primary );font-family:"Nunito Sans", Sans-serif;font-weight:700;font-style:normal;}.elementor-kit-10 img{border-radius:0px 0px 0px 0px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* =========================================================
   NATURHEILPRAXIS EHRLINSPIEL
   GLOBALES DESIGN + TYPOGRAFIE + LAYOUT
   ========================================================= */

:root {
    /* Farben */
    --color-primary: #1F3D2E;
    --color-secondary: #A7B89A;
    --color-text: #3B2C22;
    --color-accent: #C48A4E;
    --color-background: #F7F2EA;
    --color-surface: #FFFDF8;

    /* Schriften */
    --font-heading: "Cormorant Garamond", Georgia, serif;
    --font-body: "Nunito Sans", Arial, sans-serif;

    /* Responsive Schriftgrößen */
    --fs-body: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);

    --fs-h1: clamp(2.25rem, 1.7rem + 2vw, 3.5rem);
    --fs-h2: clamp(1.875rem, 1.5rem + 1.35vw, 2.625rem);
    --fs-h3: clamp(1.5rem, 1.3rem + 0.7vw, 1.875rem);
    --fs-h4: clamp(1.25rem, 1.15rem + 0.35vw, 1.5rem);
    --fs-h5: clamp(1.125rem, 1.05rem + 0.2vw, 1.25rem);

    /* Layout */
    --content-max: 80rem;
    --page-gutter: clamp(0.5rem, 2vw, 2rem);
}


/* =========================================================
   GRUNDLAGE
   ========================================================= */

html,
body {
    width: 100%;
    overflow-x: clip;
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 1.65;

    color: var(--color-text);
    background-color: var(--color-background);
}


/* =========================================================
   ÜBERSCHRIFTEN
   ========================================================= */

h1,
h2,
h3,
h4,
h5 {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--color-primary);
    text-wrap: balance;
}

h1 {
    font-size: var(--fs-h1);
    line-height: 1.12;
}

h2 {
    font-size: var(--fs-h2);
    line-height: 1.18;
}

h3 {
    font-size: var(--fs-h3);
    line-height: 1.25;
}

h4 {
    font-size: var(--fs-h4);
    line-height: 1.3;
}

h5 {
    font-size: var(--fs-h5);
    line-height: 1.35;
}

h6 {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;

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


/* =========================================================
   LINKS
   ========================================================= */

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

    text-underline-offset: 0.18em;
    text-decoration-thickness: 0.08em;
}

a:hover {
    color: var(--color-primary);
    text-decoration-color: var(--color-accent);
}


/* =========================================================
   TASTATURFOKUS
   ========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 0.1875rem solid var(--color-primary);
    outline-offset: 0.1875rem;
}


/* =========================================================
   GLOBALES LAYOUT
   ========================================================= */

.site-width {
    width: calc(100% - (2 * var(--page-gutter)));
    max-width: var(--content-max);
    margin-inline: auto;
}


/* =========================================================
   TEXTBREITEN
   ========================================================= */

.text-width {
    max-width: 68ch;
}

.text-width-small {
    max-width: 55ch;
}


/* =========================================================
   HEADER – HAUPTNAVIGATION
   Klasse am Nav-Menü-Widget: main-nav

   NORMAL:
   Waldgrün

   HOVER:
   Bronze + Linie fährt weich von der Mitte nach außen

   AKTIV:
   Bronze + Linie bleibt sichtbar
   ========================================================= */

/* Elementor-eigene Pointer vollständig entfernen */
.main-nav .elementor-nav-menu--main .elementor-item::before,
.main-nav .elementor-nav-menu--main .elementor-item::after {
    content: none !important;
    display: none !important;
}


/* Grundzustand */
.main-nav .elementor-nav-menu--main .menu-item > a.elementor-item {
    position: relative !important;

    color: var(--color-primary) !important;
    text-decoration: none !important;

    /*
     * Eigene Linie als Hintergrund.
     * Dadurch sind wir unabhängig von Elementors Pointer-System.
     */
    background-image:
        linear-gradient(
            var(--color-accent),
            var(--color-accent)
        ) !important;

    background-repeat: no-repeat !important;

    /*
     * Linie sitzt im unteren Bereich des Links
     * mit sichtbarem Abstand zum Text.
     */
    background-position:
        50% calc(100% - 0.25rem) !important;

    /*
     * Ausgangszustand:
     * Breite 0 = Linie unsichtbar.
     */
    background-size:
        0 0.125rem !important;

    transition:
        color 0.28s ease,
        background-size 0.32s ease !important;
}


/* Hover */
.main-nav .elementor-nav-menu--main .menu-item:hover > a.elementor-item {
    color: var(--color-accent) !important;

    background-size:
        calc(100% - 2rem)
        0.125rem !important;
}


/* Aktuelle Seite – WordPress */
.main-nav .elementor-nav-menu--main
.menu-item.current-menu-item > a.elementor-item,

.main-nav .elementor-nav-menu--main
.menu-item.current_page_item > a.elementor-item,

/* Aktuelle Seite – Elementor */
.main-nav .elementor-nav-menu--main
a.elementor-item.elementor-item-active,

/* Aktuelle Seite – Browser/ARIA */
.main-nav .elementor-nav-menu--main
a.elementor-item[aria-current="page"] {

    color: var(--color-accent) !important;

    background-size:
        calc(100% - 2rem)
        0.125rem !important;
}


/* =========================================================
   MASTER-HERO – ALLE SEITEN
   Eine Struktur, eine Klassenfamilie, ein responsives System
   ========================================================= */

.site-hero,
.site-hero * {
    box-sizing: border-box;
}

.site-hero {
    position: relative;
    isolation: isolate;

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

    width: 100%;
    max-width: 100%;

    min-height: calc(100vh - 4.75rem);
    min-height: calc(100svh - 4.75rem);

    margin: 0;
    overflow: hidden;

    background-color: var(--color-background);
}


/* Einheitliche Welle */
.site-hero::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -0.0625rem;
    z-index: 5;

    width: 100%;
    height: clamp(4rem, 8vw, 7rem);

    pointer-events: none;

    background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1440 120%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0,60 C320,120 420,0 720,40 C1020,80 1200,20 1440,60 L1440,120 L0,120 Z%22 fill=%22%23F7F2EA%22/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% 100%;
}


.site-hero__inner {
    position: relative;
    z-index: 1;

    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    min-height: inherit;

    padding-block:
        clamp(2rem, 4vw, 3.5rem)
        clamp(6rem, 8vw, 7rem);
}


.site-hero__content {
    position: relative;
    z-index: 2;

    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    width: 50%;
    max-width: 38rem;
}


.site-hero__media {
    width: 50%;
    flex: 0 0 50%;
}


.site-hero__eyebrow,
.site-hero__title,
.site-hero__subline,
.site-hero__text,
.site-hero__eyebrow .elementor-heading-title,
.site-hero__title .elementor-heading-title,
.site-hero__subline p,
.site-hero__text p {
    margin: 0;
}


.site-hero__eyebrow {
    margin-bottom: 0.85rem;
}


.site-hero__eyebrow .elementor-heading-title {
    color: #8B5C2E;

    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.site-hero__title {
    width: 100%;
    margin-bottom: clamp(1.1rem, 2vw, 1.5rem);
}


.site-hero__title .elementor-heading-title {
    color: var(--color-primary);

    font-family: var(--font-heading);
    font-size: var(--fs-h1);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.025em;

    text-wrap: balance;
}


.site-hero__subline {
    width: min(100%, 36rem);
    margin-bottom: 0.9rem;
}


.site-hero__subline,
.site-hero__subline p {
    color: var(--color-primary);

    font-family: var(--font-body);
    font-size: clamp(1.125rem, 1.03rem + 0.35vw, 1.35rem);
    font-weight: 700;
    line-height: 1.5;
}


.site-hero__text {
    width: min(100%, 55ch);
}


.site-hero__text,
.site-hero__text p {
    color: var(--color-text);

    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 500;
    line-height: 1.7;
}


.site-hero__actions {
    display: flex !important;
    flex-flow: row wrap;
    align-items: center;

    width: 100%;

    margin-top: clamp(1.75rem, 3vw, 2.5rem);
    gap: 0.75rem;
}


.site-hero__actions .elementor-widget-button {
    width: auto;
}


.site-hero__actions .elementor-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 3rem;
    padding: 0.85rem 1.3rem;

    border-radius: 0.5rem;

    font-family: var(--font-body);
    font-size: 0.975rem;
    font-weight: 800;
    line-height: 1.2;

    text-decoration: none;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}


.site-hero__button--primary .elementor-button {
    color: var(--color-surface) !important;
    background-color: var(--color-primary) !important;
    border: 0.0625rem solid var(--color-primary) !important;
}


.site-hero__button--secondary .elementor-button {
    color: var(--color-primary) !important;
    background-color: var(--color-surface) !important;
    border: 0.0625rem solid var(--color-accent) !important;
}


.site-hero__actions .elementor-button:focus-visible {
    outline: 0.1875rem solid var(--color-accent);
    outline-offset: 0.2rem;
}


@media (hover: hover) and (pointer: fine) {

    .site-hero__actions .elementor-button:hover {
        transform: translateY(-0.125rem);
    }

    .site-hero__button--primary .elementor-button:hover {
        color: var(--color-primary) !important;
        background-color: var(--color-surface) !important;
        border-color: var(--color-accent) !important;
    }

    .site-hero__button--secondary .elementor-button:hover {
        color: var(--color-surface) !important;
        background-color: var(--color-primary) !important;
        border-color: var(--color-primary) !important;
    }
}


/* =========================================================
   TABLET UND MOBIL
   Eigenes quadratisches Bild statt Hintergrundbild
   ========================================================= */

@media (max-width: 1024px) {

    .site-hero {
        display: block;

        min-height: auto;
        padding-bottom: clamp(3.5rem, 8vw, 5rem);

        background-image: none !important;
    }


    .site-hero::after {
        display: none;
    }


    .site-hero .site-hero__inner {
        flex-direction: column;

        width: 100%;
        max-width: none;
        min-height: auto;

        margin: 0;
        padding: 0;
    }


    .site-hero__media {
        order: 1;

        display: block !important;

        width: 100%;
        flex: 0 0 auto;

        margin: 0;
        padding: 0;
    }


    .site-hero__mobile-image {
        width: 100%;
        margin: 0;
    }


    .site-hero__mobile-image img {
        display: block;

        width: 100%;
        height: auto;

        aspect-ratio: 1 / 1;
        object-fit: cover;
        object-position: center;

        -webkit-mask-image:
            linear-gradient(
                to bottom,
                #000 66%,
                transparent 100%
            );

        mask-image:
            linear-gradient(
                to bottom,
                #000 66%,
                transparent 100%
            );
    }


    .site-hero__content {
        order: 2;

        width: 100%;
        max-width: 48rem;

        margin: -2.5rem auto 0;

        padding:
            clamp(3.75rem, 7vw, 5rem)
            var(--page-gutter)
            0;
    }


    .site-hero__title {
        margin-bottom: 1.25rem;
    }


    .site-hero--therapies .site-hero__mobile-image img {
        object-position: 72% center;
    }
}


@media (max-width: 767px) {

    .site-hero__content {
        padding-inline: clamp(1rem, 5vw, 1.5rem);
    }


    .site-hero__actions {
        flex-direction: column;
        align-items: stretch;

        gap: 1rem;
    }


    .site-hero__actions .elementor-widget-button,
    .site-hero__actions .elementor-button {
        width: 100%;
    }
}


/* =========================================================
   REDUZIERTE BEWEGUNG
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .main-nav .elementor-nav-menu--main .menu-item > a.elementor-item,
    .site-hero__actions .elementor-button {
        transition: none !important;
    }
}


/* =========================================================
   MASTER-HERO – DUNKLES BILDMOTIV
   Globaler Modifier für kontrastreiche Hero-Fotos
   ========================================================= */

@media (min-width: 1025px) {

    .site-hero--dark::before {
        content: "";

        position: absolute;
        inset: 0;
        z-index: 0;

        pointer-events: none;

        background:
            linear-gradient(
                90deg,
                rgba(20, 44, 32, 0.84) 0%,
                rgba(20, 44, 32, 0.66) 38%,
                rgba(20, 44, 32, 0.22) 68%,
                rgba(20, 44, 32, 0) 100%
            );
    }


    .site-hero--dark .site-hero__eyebrow .elementor-heading-title {
        color: #F0C491;
    }


    .site-hero--dark .site-hero__title .elementor-heading-title,
    .site-hero--dark .site-hero__subline,
    .site-hero--dark .site-hero__subline p {
        color: var(--color-surface);
    }


    .site-hero--dark .site-hero__text,
    .site-hero--dark .site-hero__text p {
        color: rgba(255, 253, 248, 0.92);
    }


    .site-hero--dark .site-hero__button--primary .elementor-button {
        color: var(--color-primary) !important;
        background-color: var(--color-surface) !important;
        border-color: var(--color-surface) !important;
    }


    .site-hero--dark .site-hero__button--secondary .elementor-button {
        color: var(--color-surface) !important;
        background-color: rgba(31, 61, 46, 0.34) !important;
        border-color: #F0C491 !important;
    }
}


@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {

    .site-hero--dark .site-hero__button--primary .elementor-button:hover {
        color: var(--color-surface) !important;
        background-color: var(--color-primary) !important;
        border-color: #F0C491 !important;
    }


    .site-hero--dark .site-hero__button--secondary .elementor-button:hover {
        color: var(--color-primary) !important;
        background-color: var(--color-surface) !important;
        border-color: var(--color-surface) !important;
    }
}

/* =========================================================
   GLOBALER CTA – PERSÖNLICHE BERATUNG

   Aufbau im Elementor-Template:

   wissen-cta
   ├── wissen-cta__eyebrow
   ├── wissen-cta__title
   ├── wissen-cta__text
   └── wissen-cta__button
   ========================================================= */


/* Alle Elemente rechnen Padding und Rahmen in ihre Breite ein */
.wissen-cta,
.wissen-cta * {
    box-sizing: border-box; /* verhindert unerwartete Überbreiten */
}


/* =========================================================
   ÄUSSERER CTA-CONTAINER
   ========================================================= */

.wissen-cta {
    width: 100vw; /* CTA geht über die komplette Fensterbreite */

    max-width: none !important; /* Elementor darf die Breite nicht begrenzen */

    margin-left: calc(50% - 50vw) !important; /* zieht CTA links bis zum Browserrand */

    margin-right: calc(50% - 50vw) !important; /* zieht CTA rechts bis zum Browserrand */

    margin-bottom: 0 !important; /* kein zusätzlicher Abstand unter dem CTA */

    min-height: 0 !important; /* entfernt eventuell gesetzte Elementor-Mindesthöhe */

    height: auto !important; /* Höhe richtet sich nur nach Inhalt + Padding */

    padding:
        clamp(4rem, 5vw, 5rem) /* Abstand oben und unten */
        max(
            var(--page-gutter),
            calc(
                (100vw - var(--content-max)) / 2
                + var(--page-gutter)
            )
        ); /* Inhalt bleibt horizontal auf unserer normalen Seitenbreite */

    background-color: var(--color-primary) !important; /* dunkles Praxisgrün */

    border: 0; /* entfernt sonstige Rahmen */

    border-bottom:
        0.0625rem solid
        rgba(240, 196, 145, 0.5); /* dünne bronzene Trennlinie zum Footer */

    border-radius: 0; /* CTA bleibt rechteckig */

    display: flex !important; /* Kinder werden per Flexbox angeordnet */

    flex-direction: column !important; /* Eyebrow, H2, Text und Button untereinander */

    align-items: flex-start !important; /* alles linksbündig */

    gap: 0 !important; /* keine Elementor-Gaps – Abstände regeln wir gezielt selbst */
}


/* =========================================================
   EYEBROW
   ========================================================= */

.wissen-cta > .wissen-cta__eyebrow {
    width: 100% !important; /* Widget darf die gesamte Inhaltsbreite nutzen */

    margin-top: 0 !important; /* kein Abstand oberhalb */

    margin-right: 0 !important; /* kein seitlicher Abstand */

    margin-bottom: 0.9rem !important; /* KLARER Abstand zwischen Eyebrow und H2 */

    margin-left: 0 !important; /* kein seitlicher Abstand */
}


.wissen-cta > .wissen-cta__eyebrow .elementor-heading-title {
    margin: 0 !important; /* Elementor-Standardabstand der Überschrift entfernen */

    color: #F0C491 !important; /* Bronze */

    font-family: var(--font-body); /* Nunito Sans */

    font-size: 0.875rem; /* kleine Eyebrow-Schrift */

    font-weight: 800; /* kräftig */

    line-height: 1.3; /* kompakte Zeilenhöhe */

    letter-spacing: 0.08em; /* etwas mehr Buchstabenabstand */

    text-transform: uppercase; /* Großbuchstaben */
}


/* =========================================================
   H2
   ========================================================= */

.wissen-cta > .wissen-cta__title {
    width: 100% !important; /* volle verfügbare Inhaltsbreite */

    max-width: 70rem !important; /* Überschrift darf trotzdem nicht endlos breit werden */

    margin-top: 0 !important; /* kein Abstand oberhalb */

    margin-right: 0 !important; /* kein seitlicher Abstand */

    margin-bottom: 1.25rem !important; /* DEUTLICHER Abstand zwischen H2 und Text */

    margin-left: 0 !important; /* kein seitlicher Abstand */
}


.wissen-cta > .wissen-cta__title .elementor-heading-title {
    margin: 0 !important; /* Elementor-eigenen Überschriftenabstand entfernen */

    color: #FFFDF8 !important; /* warmes Weiß */

    font-family: var(--font-heading); /* Cormorant Garamond */

    font-size:
        clamp(
            2.25rem,
            1.9rem + 1vw,
            3rem
        ); /* responsive Überschrift */

    font-weight: 600; /* nicht zu fett */

    line-height: 1.1; /* etwas Luft innerhalb mehrzeiliger Headlines */

    letter-spacing: -0.02em; /* Serifenschrift leicht kompakter */

    text-wrap: balance; /* mehrzeilige Überschrift harmonischer umbrechen */
}


/* =========================================================
   TEXT
   ========================================================= */

.wissen-cta > .wissen-cta__text {
    width: 100% !important; /* Textwidget nutzt die verfügbare Breite */

    max-width: 68rem !important; /* verhindert zu lange Textzeilen */

    margin-top: 0 !important; /* kein zusätzlicher Abstand oberhalb */

    margin-right: 0 !important; /* kein seitlicher Abstand */

    margin-bottom: 2rem !important; /* GROSSER Abstand zwischen Text und Button */

    margin-left: 0 !important; /* kein seitlicher Abstand */
}


.wissen-cta > .wissen-cta__text,
.wissen-cta > .wissen-cta__text p {
    color: rgba(255, 253, 248, 0.92) !important; /* leicht weicher als reines Weiß */

    font-family: var(--font-body); /* Nunito Sans */

    font-size:
        clamp(
            1rem,
            0.97rem + 0.12vw,
            1.1rem
        ); /* responsive Fließtextgröße */

    font-weight: 400; /* normale Textstärke */

    line-height: 1.7; /* gute Lesbarkeit */
}


.wissen-cta > .wissen-cta__text p {
    margin: 0 !important; /* WordPress/Elementor Absatzabstand vollständig entfernen */
}


/* =========================================================
   BUTTON
   ========================================================= */

.wissen-cta > .wissen-cta__button {
    width: auto; /* Button bleibt nur so breit wie sein Inhalt */

    margin: 0 !important; /* Elementor-Abstände am Buttonwidget entfernen */
}


.wissen-cta > .wissen-cta__button .elementor-button {
    display: inline-flex; /* Buttoninhalt sauber ausrichten */

    align-items: center; /* vertikal zentrieren */

    justify-content: center; /* horizontal zentrieren */

    min-height: 3rem; /* angenehme Klickhöhe */

    padding:
        0.85rem
        1.6rem; /* Innenabstand oben/unten und links/rechts */

    color: var(--color-primary) !important; /* grüner Text */

    background-color: #FFFDF8 !important; /* heller Button */

    border:
        0.0625rem solid
        #FFFDF8 !important; /* heller Rahmen */

    border-radius: 0.5rem; /* leichte Rundung */

    font-family: var(--font-body); /* Nunito Sans */

    font-size: 0.975rem; /* Buttonschrift */

    font-weight: 800; /* kräftiger Buttontext */

    line-height: 1.2; /* kompakte Zeilenhöhe */

    text-decoration: none; /* keine Unterstreichung */

    box-shadow:
        0
        0.5rem
        1.25rem
        rgba(0, 0, 0, 0.08); /* sehr dezente Tiefe */

    transition:
        transform 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease; /* weicher Hover */
}


/* =========================================================
   HOVER – NUR GERÄTE MIT MAUS
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    .wissen-cta > .wissen-cta__button .elementor-button:hover {
        transform: translateY(-0.125rem); /* Button hebt sich minimal */

        color: #FFFDF8 !important; /* Text wird weiß */

        background-color: transparent !important; /* Grün des CTA scheint durch */

        border-color: #F0C491 !important; /* Rahmen wird Bronze */
    }
}


/* =========================================================
   TASTATURFOKUS
   ========================================================= */

.wissen-cta > .wissen-cta__button .elementor-button:focus-visible {
    outline:
        0.1875rem solid
        #F0C491; /* deutliche Tastaturmarkierung */

    outline-offset: 0.2rem; /* Abstand zum Button */
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .wissen-cta {
        padding:
            3.5rem
            clamp(1.5rem, 5vw, 3rem); /* Tablet bekommt ausreichend Seitenrand */
    }


    .wissen-cta > .wissen-cta__eyebrow {
        margin-bottom: 0.8rem !important; /* Abstand Eyebrow → H2 */
    }


    .wissen-cta > .wissen-cta__title {
        max-width: 48rem !important; /* Textbreite für Tablet begrenzen */

        margin-bottom: 1.1rem !important; /* Abstand H2 → Text */
    }


    .wissen-cta > .wissen-cta__text {
        max-width: 46rem !important; /* angenehme Lesebreite */

        margin-bottom: 1.8rem !important; /* Abstand Text → Button */
    }
}


/* =========================================================
   MOBIL
   ========================================================= */

@media (max-width: 767px) {

    .wissen-cta {
        padding:
            3rem
            clamp(1rem, 5vw, 1.5rem); /* kompakter, aber nicht gequetscht */
    }


    .wissen-cta > .wissen-cta__eyebrow {
        margin-bottom: 0.75rem !important; /* Luft zur Headline */
    }


    .wissen-cta > .wissen-cta__title {
        max-width: none !important; /* gesamte mobile Breite nutzbar */

        margin-bottom: 1rem !important; /* Luft zum Text */
    }


    .wissen-cta > .wissen-cta__title .elementor-heading-title {
        font-size:
            clamp(
                2rem,
                9vw,
                2.6rem
            ); /* responsive mobile Überschrift */

        line-height: 1.08; /* kompakte, aber lesbare Überschrift */
    }


    .wissen-cta > .wissen-cta__text {
        max-width: none !important; /* volle mobile Textbreite */

        margin-bottom: 1.75rem !important; /* klare Trennung zum Button */
    }


    .wissen-cta > .wissen-cta__text,
    .wissen-cta > .wissen-cta__text p {
        line-height: 1.65; /* leicht kompakter auf kleinen Displays */
    }


    .wissen-cta > .wissen-cta__button {
        width: 100%; /* Buttonwidget nutzt mobil volle Breite */
    }


    .wissen-cta > .wissen-cta__button .elementor-button {
        width: 100%; /* eigentlicher Button ebenfalls volle Breite */
    }
}


/* =========================================================
   REDUZIERTE BEWEGUNG
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .wissen-cta > .wissen-cta__button .elementor-button {
        transition: none; /* Animation abschalten, wenn Nutzer das wünscht */
    }
}/* End custom CSS */