/* ROOT */
:root {
    --farbe-hintergrund: #eed8ae;
    --farbe-flaeche: #f7f1eb;
    --farbe-flaeche-soft: #ede3ea;
    --farbe-primary: #7a3db4;
    --farbe-primary-dunkler: #672f9e;
    --farbe-text: #2d2430;
    --farbe-text-weich: #6f6474;
    --farbe-rahmen: #e8ddee;
    --farbe-schatten: 0 12px 30px rgba(84, 48, 112, 0.08);
    --radius-gross: 24px;
    --radius-mittel: 16px;
    --seitenbreite: 1500px;
    --schrift-text: "Nunito Sans", Arial, sans-serif;
    --schrift-titel: "Cormorant Garamond", serif;
}

/* Allgemeine Seite */

html {
    font-size: 16px;
    position: relative;
    min-height: 100%;
}

body {
    margin: 0;
    font-family: var(--schrift-text);
    background: var(--farbe-hintergrund);
    color: var(--farbe-text);
}

a {
    color: inherit;
    text-decoration: none;
}

.seitenrahmen {
    width: min(var(--seitenbreite), calc(100% - 40px));
    margin: 0 auto;
}

.seitenkopf {
    background: #fbd9a1;
    border-bottom: 1px solid var(--farbe-rahmen);
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(10px);
}

.kopf-inhalt {
    min-height: 96px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.logo-link {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.logo-bild {
    height: 70px;
    width: auto;
    display: block;
}

.hauptnavigation {
    display: flex;
    align-items: center;
    gap: 28px;
    justify-content: center;
}

    .hauptnavigation a {
        font-size: 1rem;
        font-weight: 700;
        font-family: var(--schrift-text);
        letter-spacing: 0.01em;
        color: var(--farbe-text);
        position: relative;
        padding: 8px 0;
        transition: color 0.2s ease;
    }

        .hauptnavigation a:hover {
            color: var(--farbe-primary);
        }

        .hauptnavigation a.aktiv {
            color: var(--farbe-primary);
        }

            .hauptnavigation a.aktiv::after {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                bottom: -8px;
                height: 3px;
                border-radius: 999px;
                background: var(--farbe-primary);
            }

.kopf-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 24px;
    border-radius: 14px;
    background: var(--farbe-primary);
    color: white;
    font-weight: 700;
    font-family: var(--schrift-text);
    white-space: nowrap;
    box-shadow: var(--farbe-schatten);
    transition: background 0.2s ease, transform 0.2s ease;
}

    .kopf-button:hover {
        background: var(--farbe-primary-dunkler);
        color: white;
        transform: translateY(-1px);
    }

.seiteninhalt {
    padding: 32px 0 48px;
}

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

.seitenfuss {
    margin-top: 16px;
    padding-top: 34px;
    background: var(--farbe-flaeche);
    border-top: 1px solid var(--farbe-rahmen);
}

.fuss-inhalt {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr 1fr;
    gap: 28px;
    padding-bottom: 28px;
}

.fuss-block {
    display: grid;
    gap: 12px;
    align-content: start;
}

.fuss-marke {
    font-family: var(--schrift-titel);
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--farbe-text);
}

.fuss-text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--farbe-text-weich);
}

.fuss-webdesign {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--farbe-text-weich);
}

.fuss-titel {
    margin: 0 0 4px;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--farbe-text);
}

.fuss-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .fuss-links li {
        margin-bottom: 8px;
    }

    .fuss-links a {
        color: var(--farbe-text-weich);
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .fuss-links a:hover {
            color: var(--farbe-primary);
        }

.fuss-kontakt {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--farbe-text-weich);
}

.fuss-abstand {
    height: 8px;
}

.fuss-unten {
    padding: 16px 0 20px;
    border-top: 1px solid var(--farbe-rahmen);
}

.fuss-berlin {
    text-align: center;
    font-size: 0.88rem;
    color: var(--farbe-text-weich);
}

.fuss-unten {
    position: relative;
}

.fuss-anmeldung {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--farbe-text-weich);
    font-size: 0.85rem;
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid var(--farbe-rahmen);
    background: #ffffff;
    opacity: 0.75;
    transition: all 0.2s ease;
}

    .fuss-anmeldung:hover {
        opacity: 1;
        color: var(--farbe-primary);
        border-color: var(--farbe-primary);
        background: var(--farbe-flaeche-soft);
    }

/* Tablet */
@media (max-width: 1100px) {
    .fuss-inhalt {
        grid-template-columns: 1fr 1fr;
    }
}

/* Mobil */
@media (max-width: 768px) {
    .seitenfuss {
        margin-top: 30px;
        padding-top: 26px;
    }

    .fuss-inhalt {
        grid-template-columns: 1fr;
        gap: 22px;
        padding-bottom: 22px;
    }

    .fuss-marke {
        font-size: 1.5rem;
    }
}

h1, h2, h3, h4 {
    margin-top: 0;
    color: var(--farbe-text);
    font-family: var(--schrift-titel);
    font-weight: 600;
    line-height: 1.1;
}

/* Startseite */

.hero-start {
    padding: 28px 0 10px;
}

.hero-start__inhalt {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center;
    border: 1px solid var(--farbe-rahmen);
    border-radius: var(--radius-gross);
    background: var(--farbe-flaeche);
    box-shadow: var(--farbe-schatten);
    overflow: hidden;
    isolation: isolate;
}

.hero-start__hintergrund {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero-start__bild {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right center;
    display: block;
}

.hero-start__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient( to right, rgba(247, 241, 235, 0.98) 0%, rgba(247, 241, 235, 0.95) 28%, rgba(247, 241, 235, 0.86) 42%, rgba(247, 241, 235, 0.55) 58%, rgba(247, 241, 235, 0.18) 72%, rgba(247, 241, 235, 0) 100% );
}

.hero-start__text {
    position: relative;
    z-index: 3;
    max-width: 760px;
    width: 100%;
    padding: 56px 56px 34px 56px;
}

.hero-start__kicker {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--farbe-primary);
    letter-spacing: 0.02em;
}

.hero-start h1 {
    margin-bottom: 18px;
    font-size: clamp(2.9rem, 5vw, 4.8rem);
    line-height: 0.95;
}

.hero-start p {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.75;
    color: var(--farbe-text-weich);
    max-width: 40ch;
}

.hero-start__aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

.hero-start__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 24px;
    border-radius: 14px;
    font-weight: 700;
    transition: all 0.2s ease;
}

.hero-start__button--primary {
    background: var(--farbe-primary);
    color: white;
    box-shadow: var(--farbe-schatten);
}

    .hero-start__button--primary:hover {
        background: var(--farbe-primary-dunkler);
        color: white;
        transform: translateY(-1px);
    }

.hero-start__button--secondary {
    border: 1px solid var(--farbe-primary);
    color: var(--farbe-primary);
    background: rgba(247, 241, 235, 0.72);
    backdrop-filter: blur(2px);
}

    .hero-start__button--secondary:hover {
        background: rgba(122, 61, 180, 0.08);
        color: var(--farbe-primary);
    }

.hero-start__merkmale {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin-top: 26px;
}

.hero-start__merkmal {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--farbe-text);
    font-size: 1.06rem;
    font-weight: 600;
    line-height: 1.4;
}

    .hero-start__merkmal i {
        font-size: 1.55rem;
        color: var(--farbe-primary);
        width: 28px;
        text-align: center;
        flex-shrink: 0;
    }

/* Zeitenbereich */

.zeitenbereich {
    margin-top: 24px;
}

.zeitenbereich-inhalt {
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rahmen);
    border-radius: var(--radius-gross);
    padding: 28px 24px 24px;
    box-shadow: var(--farbe-schatten);
}

.zeitenkopf {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 20px;
}

.zeitenkopf-links {
    max-width: 680px;
}

.zeitenkopf h2 {
    margin-bottom: 10px;
    font-size: clamp(2rem, 3vw, 2.8rem);
}

.zeitenkopf p {
    margin: 0;
    color: var(--farbe-text-weich);
    line-height: 1.6;
    max-width: 52ch;
}

.zeitenhinweis {
    max-width: 560px;
    min-height: 64px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    color: var(--farbe-text-weich);
    background: #f1e8f5;
    border: 1px solid #e5d8ec;
    border-radius: 18px;
    padding: 12px 18px;
    line-height: 1.55;
}

.zeitenhinweis-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--farbe-primary);
}

.zeitenhinweis-text {
    flex: 1;
}

.zeitenkarten {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.zeitenkarte {
    position: relative;
    background: #fffdfa;
    border: 1px solid var(--farbe-rahmen);
    border-radius: var(--radius-gross);
    padding: 28px 20px 22px;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

    .zeitenkarte:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 34px rgba(84, 48, 112, 0.10);
        border-color: #dccae7;
    }

.zeitenkarte-icon {
    font-size: 1.6rem;
    color: var(--farbe-primary);
    margin-bottom: 12px;
}

.zeitenkarte h3 {
    margin-bottom: 10px;
    font-size: 1.6rem;
}

.zeitenkarte p {
    margin: 0 0 14px;
    font-size: 0.95rem;
    color: var(--farbe-text-weich);
    line-height: 1.6;
}

.zeitenkarte-preis {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 14px;
}

.zeitenkarte-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 24px;
    border-radius: 14px;
    background: var(--farbe-primary);
    color: white;
    font-size: 0.95rem;
    font-weight: 700;
    box-shadow: var(--farbe-schatten);
    transition: background 0.2s ease, transform 0.2s ease;
}

    .zeitenkarte-button:hover {
        background: var(--farbe-primary-dunkler);
        color: white;
        transform: translateY(-1px);
    }

.zeitenkarte-empfohlen {
    background: #fcf8fe;
    border: 2px solid var(--farbe-primary);
    box-shadow: 0 16px 34px rgba(122, 61, 180, 0.10);
}

.zeitenkarte-badge {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--farbe-primary);
    color: white;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    padding: 5px 11px;
    border-radius: 999px;
    box-shadow: 0 8px 18px rgba(122, 61, 180, 0.18);
}

/* Wirkungsbereich */

.wirkungbereich {
    display: grid;
    grid-template-columns: 1.05fr 1.2fr;
    gap: 18px;
    margin-top: 22px;
}

.wirkungbild {
    overflow: hidden;
    border-radius: var(--radius-gross);
    border: 1px solid var(--farbe-rahmen);
    background: var(--farbe-flaeche);
}

    .wirkungbild img {
        width: 100%;
        height: 100%;
        min-height: 320px;
        object-fit: cover;
        object-position: center center;
        display: block;
    }

.wirkunginhalt {
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rahmen);
    border-radius: var(--radius-gross);
    padding: 26px 28px;
    position: relative;
}

    .wirkunginhalt h2 {
        margin-bottom: 12px;
        font-size: clamp(2rem, 3vw, 2.7rem);
    }

.wirkungtext {
    margin: 0 0 28px;
    color: var(--farbe-text-weich);
    line-height: 1.7;
    font-size: 1rem;
    max-width: 48ch;
}

.wirkungpunkte {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 32px;
}

.wirkungpunkt {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.wirkungicon {
    width: 78px;
    height: 78px;
    border-radius: 999px;
    background: #f3ebf7;
    border: 1px solid #e6d7ee;
    color: var(--farbe-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 14px;
    flex-shrink: 0;
}

.wirkunglabel {
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--farbe-text);
    max-width: 14ch;
}

/* Mehrwertbereich */

.mehrwertbereich {
    display: grid;
    grid-template-columns: 1fr 1fr 0.9fr;
    gap: 18px;
    margin-top: 22px;
}

.mehrwertkarte {
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rahmen);
    border-radius: var(--radius-gross);
    padding: 24px 22px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .mehrwertkarte:hover {
        transform: translateY(-3px);
        box-shadow: 0 18px 40px rgba(84, 48, 112, 0.12);
    }

    .mehrwertkarte h2 {
        margin-bottom: 12px;
        font-size: clamp(1.8rem, 2.5vw, 2.3rem);
    }

.mehrwert-einleitung {
    margin: 0 0 18px;
    color: var(--farbe-text-weich);
    line-height: 1.7;
    font-size: 1rem;
}

.extrasliste {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.extraeintrag {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 14px;
    background: #fffdfa;
    border: 1px solid var(--farbe-rahmen);
    border-radius: var(--radius-mittel);
}

.extraicon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.extraeintrag:first-child .extraicon {
    color: #ff5a36;
}

.extraeintrag:last-child .extraicon {
    color: var(--farbe-primary);
}

.extratext h3 {
    margin-bottom: 4px;
    font-size: 1.3rem;
}

.extratext p {
    margin: 0;
    color: var(--farbe-text-weich);
    line-height: 1.55;
}

.gruendeliste {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 18px;
}

.grundpunkt {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--farbe-text);
    font-size: 1rem;
    line-height: 1.5;
}

    .grundpunkt i {
        color: var(--farbe-primary);
        font-size: 1rem;
        flex-shrink: 0;
    }

.mehrwertbild {
    overflow: hidden;
    border-radius: var(--radius-gross);
    border: 1px solid var(--farbe-rahmen);
    background: var(--farbe-flaeche);
}

    .mehrwertbild img {
        width: 100%;
        height: 100%;
        min-height: 100%;
        object-fit: cover;
        object-position: center center;
        display: block;
        filter: saturate(0.9) brightness(0.98);
    }

/* CTA-Bereich */

.cta-bereich {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: center;
    align-items: center;
    column-gap: 90px;
    margin-top: 22px;
    padding: 14px 22px;
    background: linear-gradient(90deg, #d8bfe3 0%, #e8d7ef 50%, #f3eaf7 100%);
    border: 1px solid #dcc6e7;
    border-radius: var(--radius-gross);
    position: relative;
    overflow: hidden;
}

.cta-bild {
    display: flex;
    align-items: flex-end;
}

    .cta-bild img {
        display: block;
        width: 180px;
        height: auto;
        max-width: 100%;
    }

.cta-inhalt {
    text-align: left;
}

    .cta-inhalt h2 {
        margin-bottom: 4px;
        font-size: clamp(1.7rem, 2.3vw, 2.3rem);
    }

    .cta-inhalt p {
        margin: 0;
        color: var(--farbe-text-weich);
        line-height: 1.45;
        font-size: 0.95rem;
        max-width: 90ch;
    }

.cta-aktion {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 24px;
    border-radius: 14px;
    background: var(--farbe-primary);
    color: white;
    font-weight: 700;
    font-size: 0.98rem;
    white-space: nowrap;
    box-shadow: 0 12px 28px rgba(122, 61, 180, 0.18);
    transition: background 0.2s ease, transform 0.2s ease;
}

    .cta-button:hover {
        background: var(--farbe-primary-dunkler);
        color: white;
        transform: translateY(-1px);
    }


/* =========================================================
   BER MICH
   Intro
========================================================= */

.uebermich-seite {
    padding: 32px 0 80px;
}

.uebermich-intro {
    margin-bottom: 28px;
}

.uebermich-intro-inhalt {
    display: grid;
    grid-template-columns: 1.02fr 1fr;
    align-items: stretch;
    background: linear-gradient(135deg, #f8f2ee 0%, #f6efe9 100%);
    border: 1px solid var(--farbe-rahmen);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: var(--farbe-schatten);
    min-height: 620px;
}

.uebermich-intro-text {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 56px 54px 56px 54px;
    z-index: 1;
}

.uebermich-kicker {
    display: inline-block;
    margin-bottom: 18px;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--farbe-primary);
}

.uebermich-intro-titel {
    margin: 0 0 28px;
    font-family: var(--schrift-titel);
    font-size: clamp(2.7rem, 4.1vw, 4.4rem);
    line-height: 0.98;
    color: var(--farbe-text);
}

    .uebermich-intro-titel span {
        display: inline-block;
        color: var(--farbe-primary);
    }

.uebermich-intro-absatz {
    max-width: 520px;
    margin: 0 0 20px;
    font-size: 1.12rem;
    line-height: 1.8;
    color: var(--farbe-text);
}

.uebermich-handschrift {
    margin: 18px 0 0;
    font-family: var(--schrift-titel);
    font-size: 2rem;
    line-height: 1.25;
    color: var(--farbe-primary);
}

.uebermich-intro-bildbereich {
    position: relative;
    min-height: 100%;
    background: #ead8c3;
}

    .uebermich-intro-bildbereich::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 -1px;
        width: 180px;
        background: linear-gradient(to right, #f7f1eb 0%, rgba(247, 241, 235, 0.92) 28%, rgba(247, 241, 235, 0) 100%);
        z-index: 2;
        pointer-events: none;
    }

.uebermich-intro-bild {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 620px;
    object-fit: cover;
    object-position: center;
}

/* Tablet */
@media (max-width: 1100px) {
    .uebermich-intro-inhalt {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .uebermich-intro-text {
        padding: 48px 40px 36px;
    }

    .uebermich-intro-bildbereich::before {
        display: none;
    }

    .uebermich-intro-bild {
        min-height: 420px;
        max-height: 520px;
    }
}

/* Mobil */
@media (max-width: 768px) {
    .uebermich-seite {
        padding: 20px 0 56px;
    }

    .uebermich-intro-inhalt {
        border-radius: 22px;
    }

    .uebermich-intro-text {
        padding: 34px 24px 28px;
    }

    .uebermich-kicker {
        margin-bottom: 14px;
        font-size: 0.82rem;
        letter-spacing: 0.18em;
    }

    .uebermich-intro-titel {
        margin-bottom: 20px;
        font-size: clamp(2.2rem, 8vw, 3.2rem);
        line-height: 1.02;
    }

    .uebermich-intro-absatz {
        margin-bottom: 16px;
        font-size: 1rem;
        line-height: 1.7;
    }

    .uebermich-handschrift {
        margin-top: 10px;
        font-size: 1.6rem;
    }

    .uebermich-intro-bild {
        min-height: 300px;
        max-height: 360px;
    }
}


/* =========================================================
   BER MICH
   Philosophie
========================================================= */

.uebermich-philosophie {
    margin-bottom: 28px;
}

.uebermich-philosophie-karte {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 28px;
    align-items: center;
    padding: 30px 34px;
    background: #f3ecf3;
    border: 1px solid var(--farbe-rahmen);
    border-radius: 24px;
    box-shadow: var(--farbe-schatten);
}

.uebermich-philosophie-einstieg {
    display: grid;
    grid-template-columns: 86px 1fr;
    gap: 22px;
    align-items: start;
}

.uebermich-philosophie-iconbox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: rgba(122, 61, 180, 0.16);
    flex-shrink: 0;
}

.uebermich-philosophie-icon {
    font-size: 2rem;
    line-height: 1;
    color: var(--farbe-primary);
}

.uebermich-bereichstitel {
    margin: 0 0 16px;
    font-family: var(--schrift-titel);
    font-size: clamp(2rem, 2.4vw, 2.6rem);
    line-height: 1.1;
    color: var(--farbe-text);
}

.uebermich-philosophie-text {
    margin: 0 0 14px;
    font-size: 1.04rem;
    line-height: 1.8;
    color: var(--farbe-text);
}

    .uebermich-philosophie-text:last-child {
        margin-bottom: 0;
    }

.uebermich-philosophie-werte {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.uebermich-philosophie-wert {
    text-align: center;
    padding: 12px 8px;
}

.uebermich-philosophie-werticon {
    margin-bottom: 12px;
    font-size: 2rem;
    line-height: 1;
}

.uebermich-philosophie-werttitel {
    margin: 0 0 8px;
    font-size: 1.22rem;
    font-weight: 700;
    color: var(--farbe-text);
}

.uebermich-philosophie-werttext {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--farbe-text-weich);
}

/* Tablet */
@media (max-width: 1100px) {
    .uebermich-philosophie-karte {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 28px;
    }
}

/* Mobil */
@media (max-width: 768px) {
    .uebermich-philosophie {
        margin-bottom: 22px;
    }

    .uebermich-philosophie-karte {
        padding: 24px 20px;
        border-radius: 20px;
    }

    .uebermich-philosophie-einstieg {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .uebermich-philosophie-iconbox {
        width: 68px;
        height: 68px;
    }

    .uebermich-philosophie-icon {
        font-size: 1.6rem;
    }

    .uebermich-bereichstitel {
        margin-bottom: 12px;
        font-size: clamp(1.8rem, 7vw, 2.3rem);
    }

    .uebermich-philosophie-text {
        font-size: 1rem;
        line-height: 1.75;
    }

    .uebermich-philosophie-werte {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .uebermich-philosophie-wert {
        padding: 6px 0;
    }

    .uebermich-philosophie-werticon {
        margin-bottom: 10px;
        font-size: 1.7rem;
    }

    .uebermich-philosophie-werttitel {
        font-size: 1.1rem;
    }

    .uebermich-philosophie-werttext {
        font-size: 0.96rem;
    }
}


/* =========================================================
   BER MICH
   Mein Weg
========================================================= */

.uebermich-weg {
    margin-bottom: 28px;
}

.uebermich-weg-inhalt {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 34px;
    align-items: start;
    padding: 30px 34px;
    background: #f8f2ee;
    border: 1px solid var(--farbe-rahmen);
    border-radius: 24px;
    box-shadow: var(--farbe-schatten);
}

.uebermich-weg-bildbereich {
    overflow: hidden;
    border-radius: 20px;
    background: #ead8c3;
    height: 720px;
}

.uebermich-weg-bild {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.uebermich-weg-textbereich {
    position: relative;
    padding: 28px 6px 12px 8px;
}

.uebermich-weg-titel {
    max-width: 620px;
}

.uebermich-weg-text {
    margin: 0 0 16px;
    font-size: 1.04rem;
    line-height: 1.85;
    color: var(--farbe-text);
}

    .uebermich-weg-text:last-child {
        margin-bottom: 0;
    }

/* Tablet */
@media (max-width: 1100px) {
    .uebermich-weg-inhalt {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .uebermich-weg-bildbereich {
        height: auto;
    }

    .uebermich-weg-bild {
        min-height: 340px;
        max-height: 460px;
    }

    .uebermich-weg-textbereich {
        padding: 0;
    }
}

/* Mobil */
@media (max-width: 768px) {
    .uebermich-weg {
        margin-bottom: 22px;
    }

    .uebermich-weg-inhalt {
        gap: 20px;
    }

    .uebermich-weg-bildbereich {
        height: auto;
        border-radius: 20px;
    }

    .uebermich-weg-bild {
        min-height: 260px;
        max-height: 320px;
    }

    .uebermich-weg-text {
        margin-bottom: 14px;
        font-size: 1rem;
        line-height: 1.75;
    }
}




/* =========================================================
   BER MICH
   Qualifikationen
========================================================= */

.uebermich-qualifikationen {
    margin-bottom: 28px;
}

.uebermich-qualifikationen-karte {
    padding: 28px 32px;
    background: #f8f2ee;
    border: 1px solid var(--farbe-rahmen);
    border-radius: 24px;
    box-shadow: var(--farbe-schatten);
}

.uebermich-qualifikationen-kopf {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 26px;
}

.uebermich-qualifikationen-linie {
    flex: 1;
    max-width: 140px;
    height: 1px;
    background: rgba(122, 61, 180, 0.18);
}

.uebermich-qualifikationen-titel {
    margin: 0;
    font-family: var(--schrift-titel);
    font-size: clamp(1.9rem, 2.2vw, 2.4rem);
    line-height: 1.1;
    color: var(--farbe-text);
    text-align: center;
}

.uebermich-qualifikationen-liste {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.uebermich-qualifikation {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.uebermich-qualifikation-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 2px solid var(--farbe-primary);
    border-radius: 50%;
    font-size: 1rem;
    font-weight: 700;
    color: var(--farbe-primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.uebermich-qualifikation-titel {
    margin: 0 0 6px;
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--farbe-text);
}

.uebermich-qualifikation-text {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--farbe-text-weich);
}

/* Tablet */
@media (max-width: 1100px) {
    .uebermich-qualifikationen-liste {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .uebermich-qualifikationen-linie {
        max-width: 90px;
    }
}

/* Mobil */
@media (max-width: 768px) {
    .uebermich-qualifikationen {
        margin-bottom: 22px;
    }

    .uebermich-qualifikationen-karte {
        padding: 24px 20px;
        border-radius: 20px;
    }

    .uebermich-qualifikationen-kopf {
        gap: 12px;
        margin-bottom: 22px;
    }

    .uebermich-qualifikationen-linie {
        max-width: 40px;
    }

    .uebermich-qualifikationen-titel {
        font-size: clamp(1.6rem, 6vw, 2rem);
    }

    .uebermich-qualifikation {
        gap: 12px;
    }

    .uebermich-qualifikation-icon {
        width: 30px;
        height: 30px;
        font-size: 0.9rem;
    }

    .uebermich-qualifikation-titel {
        font-size: 1.02rem;
    }

    .uebermich-qualifikation-text {
        font-size: 0.95rem;
    }
}

/* =========================================================
   BER MICH
   Vertrauen + Zitat
========================================================= */

.uebermich-vertrauen {
    margin-bottom: 28px;
}

.uebermich-vertrauen-layout {
    display: grid;
    grid-template-columns: 0.92fr 1.25fr;
    gap: 26px;
    align-items: stretch;
}

.uebermich-vertrauenskarte,
.uebermich-zitatkarte {
    border: 1px solid var(--farbe-rahmen);
    border-radius: 24px;
    box-shadow: var(--farbe-schatten);
    overflow: hidden;
}

.uebermich-vertrauenskarte {
    position: relative;
    padding: 34px 32px;
    background: #f8f2ee;
}

.uebermich-vertrauen-titel {
    margin: 0 0 18px;
    font-family: var(--schrift-titel);
    font-size: clamp(2rem, 2.4vw, 2.5rem);
    line-height: 1.1;
    color: var(--farbe-text);
}

.uebermich-vertrauen-text {
    margin: 0 0 16px;
    font-size: 1.02rem;
    line-height: 1.8;
    color: var(--farbe-text);
}

.uebermich-vertrauen-liste {
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 14px;
}

.uebermich-vertrauen-eintrag {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--farbe-text);
}

.uebermich-vertrauen-listenicon {
    width: 18px;
    font-size: 1rem;
    color: var(--farbe-primary);
    flex-shrink: 0;
}

.uebermich-zitatkarte {
    display: grid;
    grid-template-columns: 1.18fr 0.72fr;
    background: #f3ecf3;
    min-height: 100%;
}

.uebermich-zitat-inhalt {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 34px 34px 30px;
}

.uebermich-zitat-zeichen {
    margin-bottom: 10px;
    font-family: var(--schrift-titel);
    font-size: 4.3rem;
    line-height: 0.9;
    color: rgba(122, 61, 180, 0.35);
}

.uebermich-zitat-text {
    margin: 0 0 22px;
    max-width: 470px;
    font-family: var(--schrift-titel);
    font-size: clamp(1.7rem, 2.15vw, 2.25rem);
    line-height: 1.42;
    color: var(--farbe-primary);
}

.uebermich-zitat-abschluss {
    margin-top: auto;
}

.uebermich-zitat-name {
    margin: 0 0 6px;
    font-family: var(--schrift-titel);
    font-size: 1.95rem;
    line-height: 1.08;
    color: var(--farbe-primary);
}

.uebermich-zitat-rolle {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(45, 36, 48, 0.62);
}

.uebermich-zitat-bildbereich {
    min-height: 100%;
    background: #ead8c3;
}

.uebermich-zitat-bild {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 17% center;
}

/* Tablet */
@media (max-width: 1100px) {
    .uebermich-vertrauen-layout {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .uebermich-zitatkarte {
        grid-template-columns: 1fr;
    }

    .uebermich-zitat-bild {
        min-height: 300px;
        max-height: 360px;
        object-position: center top;
    }
}

/* Mobil */
@media (max-width: 768px) {
    .uebermich-vertrauen {
        margin-bottom: 22px;
    }

    .uebermich-vertrauenskarte,
    .uebermich-zitatkarte {
        border-radius: 20px;
    }

    .uebermich-vertrauenskarte {
        padding: 26px 20px;
    }

    .uebermich-vertrauen-titel {
        margin-bottom: 14px;
        font-size: clamp(1.8rem, 7vw, 2.2rem);
    }

    .uebermich-vertrauen-text {
        margin-bottom: 14px;
        font-size: 1rem;
        line-height: 1.75;
    }

    .uebermich-vertrauen-liste {
        margin-top: 18px;
        gap: 12px;
    }

    .uebermich-vertrauen-eintrag {
        gap: 10px;
        padding-left: 0;
        font-size: 0.98rem;
    }

    .uebermich-vertrauen-listenicon {
        width: 16px;
        font-size: 0.95rem;
    }

    .uebermich-zitat-inhalt {
        padding: 26px 20px;
    }

    .uebermich-zitat-zeichen {
        font-size: 3.4rem;
    }

    .uebermich-zitat-text {
        margin-bottom: 20px;
        font-size: clamp(1.5rem, 6vw, 2rem);
        line-height: 1.3;
    }

    .uebermich-zitat-name {
        font-size: 1.65rem;
    }

    .uebermich-zitat-rolle {
        font-size: 0.84rem;
        letter-spacing: 0.12em;
    }

    .uebermich-zitat-bild {
        min-height: 220px;
        max-height: 280px;
    }
}

/* =========================================================
   BER MICH
   Abschluss CTA
========================================================= */

.uebermich-abschluss {
    margin-bottom: 8px;
}

.uebermich-abschluss-box {
    display: grid;
    grid-template-columns: 180px 1fr auto;
    align-items: center;
    gap: 40px;
    padding: 26px 34px;
    background: #e9dbef;
    border: 1px solid var(--farbe-rahmen);
    border-radius: 28px;
    box-shadow: var(--farbe-schatten);
    overflow: hidden;
}

.uebermich-abschluss-bildwrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.uebermich-abschluss-bild {
    display: block;
    width: 100%;
    max-width: 150px;
    height: auto;
    object-fit: contain;
}

.uebermich-abschluss-text {
    min-width: 0;
}

.uebermich-abschluss-titel {
    margin: 0 0 8px;
    font-family: var(--schrift-titel);
    font-size: clamp(2.1rem, 2.8vw, 3rem);
    line-height: 1.05;
    color: var(--farbe-text);
}

.uebermich-abschluss-absatz {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--farbe-text-weich);
}

.uebermich-abschluss-aktion {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.uebermich-abschluss-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 26px;
    min-width: 170px;
    border-radius: 18px;
    background: var(--farbe-primary);
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 10px 24px rgba(122, 61, 180, 0.22);
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

    .uebermich-abschluss-button:hover {
        transform: translateY(-2px);
        background: var(--farbe-primary-dunkler);
        box-shadow: 0 14px 28px rgba(122, 61, 180, 0.28);
    }

/* Tablet */
@media (max-width: 1100px) {
    .uebermich-abschluss-box {
        grid-template-columns: 140px 1fr;
        gap: 24px;
    }

    .uebermich-abschluss-aktion {
        grid-column: 1 / -1;
        justify-content: center;
        margin-top: 4px;
    }

    .uebermich-abschluss-bild {
        max-width: 120px;
    }
}

/* Mobil */
@media (max-width: 768px) {
    .uebermich-abschluss {
        margin-bottom: 0;
    }

    .uebermich-abschluss-box {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 16px;
        padding: 24px 20px;
        border-radius: 20px;
    }

    .uebermich-abschluss-bild {
        max-width: 110px;
    }

    .uebermich-abschluss-titel {
        font-size: clamp(1.8rem, 7vw, 2.3rem);
    }

    .uebermich-abschluss-absatz {
        font-size: 1rem;
        line-height: 1.6;
    }

    .uebermich-abschluss-aktion {
        width: 100%;
        justify-content: center;
        margin-top: 2px;
    }

    .uebermich-abschluss-button {
        width: 100%;
        min-width: 0;
    }
}


/* =========================================================
   MASSAGEN
   Hero
========================================================= */

.massagen-seite {
    padding: 32px 0 80px;
}

.massagen-hero {
    margin-bottom: 28px;
}

.massagen-hero-inhalt {
    display: grid;
    grid-template-columns: 1.02fr 1fr;
    align-items: stretch;
    background: linear-gradient(135deg, #f8f2ee 0%, #f6efe9 100%);
    border: 1px solid var(--farbe-rahmen);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: var(--farbe-schatten);
    min-height: 560px;
}

.massagen-hero-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 56px 54px;
}

.massagen-kicker {
    display: inline-block;
    margin-bottom: 18px;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--farbe-primary);
}

.massagen-hero-titel {
    margin: 0 0 24px;
    font-family: var(--schrift-titel);
    font-size: clamp(2.7rem, 4vw, 4.2rem);
    line-height: 0.98;
    color: var(--farbe-text);
    max-width: 620px;
}

.massagen-hero-absatz {
    max-width: 560px;
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.8;
    color: var(--farbe-text);
}

.massagen-hero-bildbereich {
    position: relative;
    min-height: 100%;
    background: #ead8c3;
}

    .massagen-hero-bildbereich::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 -1px;
        width: 180px;
        background: linear-gradient(to right, #f7f1eb 0%, rgba(247, 241, 235, 0.92) 28%, rgba(247, 241, 235, 0) 100%);
        z-index: 2;
        pointer-events: none;
    }

.massagen-hero-bild {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 560px;
    object-fit: cover;
    object-position: center;
}

/* Tablet */
@media (max-width: 1100px) {
    .massagen-hero-inhalt {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .massagen-hero-text {
        padding: 48px 40px 36px;
    }

    .massagen-hero-bildbereich::before {
        display: none;
    }

    .massagen-hero-bild {
        min-height: 380px;
        max-height: 500px;
    }
}

/* Mobil */
@media (max-width: 768px) {
    .massagen-seite {
        padding: 20px 0 56px;
    }

    .massagen-hero {
        margin-bottom: 22px;
    }

    .massagen-hero-inhalt {
        border-radius: 22px;
    }

    .massagen-hero-text {
        padding: 34px 24px 28px;
    }

    .massagen-kicker {
        margin-bottom: 14px;
        font-size: 0.82rem;
        letter-spacing: 0.18em;
    }

    .massagen-hero-titel {
        margin-bottom: 18px;
        font-size: clamp(2.2rem, 8vw, 3.1rem);
        line-height: 1.02;
    }

    .massagen-hero-absatz {
        font-size: 1rem;
        line-height: 1.7;
    }

    .massagen-hero-bild {
        min-height: 280px;
        max-height: 340px;
    }
}

/* =========================================================
   MASSAGEN
   Grundgedanke / TouchLife
========================================================= */

.massagen-grundgedanke {
    margin-bottom: 28px;
}

.massagen-grundgedanke-karte {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 28px;
    align-items: center;
    padding: 30px 34px;
    background: #f3ecf3;
    border: 1px solid var(--farbe-rahmen);
    border-radius: 24px;
    box-shadow: var(--farbe-schatten);
}

.massagen-grundgedanke-einstieg {
    display: grid;
    grid-template-columns: 86px 1fr;
    gap: 22px;
    align-items: start;
}

.massagen-grundgedanke-iconbox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: rgba(122, 61, 180, 0.16);
    flex-shrink: 0;
}

.massagen-grundgedanke-icon {
    font-size: 2rem;
    color: var(--farbe-primary);
}

.massagen-bereichstitel {
    margin: 0 0 16px;
    font-family: var(--schrift-titel);
    font-size: clamp(2rem, 2.4vw, 2.6rem);
    line-height: 1.1;
    color: var(--farbe-text);
}

.massagen-grundgedanke-text {
    margin: 0 0 14px;
    font-size: 1.04rem;
    line-height: 1.8;
    color: var(--farbe-text);
}

    .massagen-grundgedanke-text:last-child {
        margin-bottom: 0;
    }

.massagen-grundgedanke-merkmale {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.massagen-grundgedanke-merkmal {
    text-align: center;
    padding: 12px 8px;
}

.massagen-grundgedanke-merkmalicon {
    margin-bottom: 12px;
    font-size: 2rem;
    line-height: 1;
    color: var(--farbe-primary);
}

.massagen-grundgedanke-merkmaltitel {
    margin: 0 0 8px;
    font-size: 1.18rem;
    font-weight: 700;
    color: var(--farbe-text);
}

.massagen-grundgedanke-merkmaltext {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--farbe-text-weich);
}

/* Tablet */
@media (max-width: 1100px) {
    .massagen-grundgedanke-karte {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 28px;
    }
}

/* Mobil */
@media (max-width: 768px) {
    .massagen-grundgedanke {
        margin-bottom: 22px;
    }

    .massagen-grundgedanke-karte {
        padding: 24px 20px;
        border-radius: 20px;
    }

    .massagen-grundgedanke-einstieg {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .massagen-grundgedanke-iconbox {
        width: 68px;
        height: 68px;
    }

    .massagen-grundgedanke-icon {
        font-size: 1.6rem;
    }

    .massagen-bereichstitel {
        margin-bottom: 12px;
        font-size: clamp(1.8rem, 7vw, 2.3rem);
    }

    .massagen-grundgedanke-text {
        font-size: 1rem;
        line-height: 1.75;
    }

    .massagen-grundgedanke-merkmale {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .massagen-grundgedanke-merkmal {
        padding: 6px 0;
    }

    .massagen-grundgedanke-merkmalicon {
        margin-bottom: 10px;
        font-size: 1.7rem;
    }

    .massagen-grundgedanke-merkmaltitel {
        font-size: 1.08rem;
    }

    .massagen-grundgedanke-merkmaltext {
        font-size: 0.96rem;
    }
}

/* =========================================================
   MASSAGEN
   berblick
========================================================= */

.massagen-ueberblick {
    margin-bottom: 28px;
}

.massagen-ueberblick-karte {
    padding: 30px 34px;
    background: #f8f2ee;
    border: 1px solid var(--farbe-rahmen);
    border-radius: 24px;
    box-shadow: var(--farbe-schatten);
}

.massagen-ueberblick-kopf {
    margin-bottom: 26px;
    max-width: 720px;
}

.massagen-ueberblick-einleitung {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--farbe-text);
}

.massagen-ueberblick-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.massagen-ueberblick-item {
    padding: 18px 16px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid var(--farbe-rahmen);
}

    .massagen-ueberblick-item h3 {
        margin: 0 0 8px;
        font-size: 1.18rem;
        font-weight: 700;
        color: var(--farbe-text);
    }

    .massagen-ueberblick-item p {
        margin: 0;
        font-size: 0.98rem;
        line-height: 1.6;
        color: var(--farbe-text-weich);
    }

/* Tablet */
@media (max-width: 1100px) {
    .massagen-ueberblick-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobil */
@media (max-width: 768px) {
    .massagen-ueberblick {
        margin-bottom: 22px;
    }

    .massagen-ueberblick-karte {
        padding: 24px 20px;
        border-radius: 20px;
    }

    .massagen-ueberblick-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .massagen-ueberblick-item {
        padding: 16px 14px;
    }

        .massagen-ueberblick-item h3 {
            font-size: 1.08rem;
        }

        .massagen-ueberblick-item p {
            font-size: 0.96rem;
        }
}

/* =========================================================
   MASSAGEN
   TouchLife Massage
========================================================= */

.massagen-touchlife {
    margin-bottom: 28px;
}

.massagen-touchlife-inhalt {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 34px;
    align-items: start;
    padding: 30px 34px;
    background: #f8f2ee;
    border: 1px solid var(--farbe-rahmen);
    border-radius: 24px;
    box-shadow: var(--farbe-schatten);
}

.massagen-touchlife-bildbereich {
    overflow: hidden;
    border-radius: 20px;
    background: #ead8c3;
    height: 720px;
}

.massagen-touchlife-bild {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.massagen-touchlife-textbereich {
    position: relative;
    padding: 20px 6px 12px 8px;
}

.massagen-touchlife-titel {
    max-width: 620px;
}

.massagen-touchlife-text {
    margin: 0 0 16px;
    font-size: 1.04rem;
    line-height: 1.85;
    color: var(--farbe-text);
}

    .massagen-touchlife-text:last-child {
        margin-bottom: 0;
    }

/* Tablet */
@media (max-width: 1100px) {
    .massagen-touchlife-inhalt {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 28px;
    }

    .massagen-touchlife-bildbereich {
        height: auto;
    }

    .massagen-touchlife-bild {
        min-height: 340px;
        max-height: 460px;
    }

    .massagen-touchlife-textbereich {
        padding: 0;
    }
}

/* Mobil */
@media (max-width: 768px) {
    .massagen-touchlife {
        margin-bottom: 22px;
    }

    .massagen-touchlife-inhalt {
        gap: 20px;
        padding: 24px 20px;
        border-radius: 20px;
    }

    .massagen-touchlife-bildbereich {
        height: auto;
        border-radius: 16px;
    }

    .massagen-touchlife-bild {
        min-height: 260px;
        max-height: 320px;
    }

    .massagen-touchlife-text {
        margin-bottom: 14px;
        font-size: 1rem;
        line-height: 1.75;
    }
}

/* =========================================================
   MASSAGEN
   Krperbereiche
========================================================= */

.massagen-koerperbereiche {
    margin-bottom: 28px;
}

.massagen-koerperbereiche-karte {
    padding: 30px 34px;
    background: #f3ecf3;
    border: 1px solid var(--farbe-rahmen);
    border-radius: 24px;
    box-shadow: var(--farbe-schatten);
}

.massagen-koerperbereiche-kopf {
    margin-bottom: 26px;
    max-width: 760px;
}

.massagen-koerperbereiche-einleitung {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--farbe-text);
}

.massagen-koerperbereiche-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.massagen-koerperbereich-item {
    padding: 18px 16px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid var(--farbe-rahmen);
    text-align: center;
}

.massagen-koerperbereich-icon {
    margin-bottom: 12px;
    font-size: 1.9rem;
    color: var(--farbe-primary);
}

.massagen-koerperbereich-item h3 {
    margin: 0 0 8px;
    font-size: 1.16rem;
    font-weight: 700;
    color: var(--farbe-text);
}

.massagen-koerperbereich-item p {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--farbe-text-weich);
}

/* Tablet */
@media (max-width: 1100px) {
    .massagen-koerperbereiche-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobil */
@media (max-width: 768px) {
    .massagen-koerperbereiche {
        margin-bottom: 22px;
    }

    .massagen-koerperbereiche-karte {
        padding: 24px 20px;
        border-radius: 20px;
    }

    .massagen-koerperbereiche-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .massagen-koerperbereich-item {
        padding: 16px 14px;
    }

    .massagen-koerperbereich-icon {
        font-size: 1.7rem;
    }

    .massagen-koerperbereich-item h3 {
        font-size: 1.08rem;
    }

    .massagen-koerperbereich-item p {
        font-size: 0.96rem;
    }
}

/* =========================================================
   MASSAGEN
   Fureflexzonen
========================================================= */

.massagen-fussreflex {
    margin-bottom: 28px;
}

.massagen-fussreflex-inhalt {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 34px;
    align-items: start;
    padding: 30px 34px;
    background: #f8f2ee;
    border: 1px solid var(--farbe-rahmen);
    border-radius: 24px;
    box-shadow: var(--farbe-schatten);
}

.massagen-fussreflex-textbereich {
    padding: 20px 8px 12px 6px;
}

.massagen-fussreflex-titel {
    max-width: 560px;
}

.massagen-fussreflex-text {
    margin: 0 0 16px;
    font-size: 1.04rem;
    line-height: 1.85;
    color: var(--farbe-text);
}

    .massagen-fussreflex-text:last-child {
        margin-bottom: 0;
    }

.massagen-fussreflex-bildbereich {
    overflow: hidden;
    border-radius: 20px;
    background: #ead8c3;
    height: 560px;
}

.massagen-fussreflex-bild {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Tablet */
@media (max-width: 1100px) {
    .massagen-fussreflex-inhalt {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 28px;
    }

    .massagen-fussreflex-textbereich {
        padding: 0;
    }

    .massagen-fussreflex-bildbereich {
        height: auto;
    }

    .massagen-fussreflex-bild {
        min-height: 320px;
        max-height: 420px;
    }
}

/* Mobil */
@media (max-width: 768px) {
    .massagen-fussreflex {
        margin-bottom: 22px;
    }

    .massagen-fussreflex-inhalt {
        gap: 20px;
        padding: 24px 20px;
        border-radius: 20px;
    }

    .massagen-fussreflex-bildbereich {
        border-radius: 16px;
    }

    .massagen-fussreflex-bild {
        min-height: 240px;
        max-height: 300px;
    }

    .massagen-fussreflex-text {
        margin-bottom: 14px;
        font-size: 1rem;
        line-height: 1.75;
    }
}

/* =========================================================
   MASSAGEN
   Energiearbeit
========================================================= */

.massagen-energiearbeit {
    margin-bottom: 28px;
}

.massagen-energiearbeit-karte {
    padding: 30px 34px;
    background: #f3ecf3;
    border: 1px solid var(--farbe-rahmen);
    border-radius: 24px;
    box-shadow: var(--farbe-schatten);
}

.massagen-energiearbeit-layout {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: 34px;
    align-items: center;
}

.massagen-energiearbeit-links {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.massagen-energiearbeit-kopf {
    margin-bottom: 26px;
    max-width: 760px;
}

.massagen-energiearbeit-einleitung {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--farbe-text);
}

.massagen-energiearbeit-textblock {
    width: 100%;
}

.massagen-energiearbeit-text {
    margin: 0 0 16px;
    font-size: 1.04rem;
    line-height: 1.85;
    color: var(--farbe-text);
}

    .massagen-energiearbeit-text:last-child {
        margin-bottom: 0;
    }

.massagen-energiearbeit-merkmale {
    display: grid;
    gap: 18px;
    align-self: center;
}

.massagen-energiearbeit-merkmal {
    padding: 18px 18px 16px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid var(--farbe-rahmen);
}

.massagen-energiearbeit-icon {
    margin-bottom: 10px;
    font-size: 1.5rem;
    color: var(--farbe-primary);
}

.massagen-energiearbeit-merkmal h3 {
    margin: 0 0 6px;
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--farbe-text);
}

.massagen-energiearbeit-merkmal p {
    margin: 0;
    font-size: 0.97rem;
    line-height: 1.65;
    color: var(--farbe-text-weich);
}

/* Tablet */
@media (max-width: 1100px) {
    .massagen-energiearbeit-layout {
        grid-template-columns: 1fr;
        gap: 22px;
        align-items: start;
    }

    .massagen-energiearbeit-links,
    .massagen-energiearbeit-merkmale {
        align-self: start;
    }
}

/* Mobil */
@media (max-width: 768px) {
    .massagen-energiearbeit {
        margin-bottom: 22px;
    }

    .massagen-energiearbeit-karte {
        padding: 24px 20px;
        border-radius: 20px;
    }

    .massagen-energiearbeit-kopf {
        margin-bottom: 20px;
    }

    .massagen-energiearbeit-einleitung {
        font-size: 1rem;
        line-height: 1.7;
    }

    .massagen-energiearbeit-text {
        margin-bottom: 14px;
        font-size: 1rem;
        line-height: 1.75;
    }

    .massagen-energiearbeit-merkmal {
        padding: 16px 14px;
    }

        .massagen-energiearbeit-merkmal h3 {
            font-size: 1.05rem;
        }

        .massagen-energiearbeit-merkmal p {
            font-size: 0.95rem;
        }
}

/* =========================================================
   MASSAGEN
   Bewegungsbungen
========================================================= */

.massagen-bewegung {
    margin-bottom: 28px;
}

.massagen-bewegung-inhalt {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 34px;
    align-items: start;
    padding: 30px 34px;
    background: #f8f2ee;
    border: 1px solid var(--farbe-rahmen);
    border-radius: 24px;
    box-shadow: var(--farbe-schatten);
}

.massagen-bewegung-bildbereich {
    overflow: hidden;
    border-radius: 20px;
    background: #ead8c3;
    height: 560px;
}

.massagen-bewegung-bild {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.massagen-bewegung-textbereich {
    padding: 20px 8px 12px 6px;
}

.massagen-bewegung-titel {
    max-width: 560px;
}

.massagen-bewegung-text {
    margin: 0 0 16px;
    font-size: 1.04rem;
    line-height: 1.85;
    color: var(--farbe-text);
}

    .massagen-bewegung-text:last-child {
        margin-bottom: 0;
    }

/* Tablet */
@media (max-width: 1100px) {
    .massagen-bewegung-inhalt {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 28px;
    }

    .massagen-bewegung-textbereich {
        padding: 0;
    }

    .massagen-bewegung-bildbereich {
        height: auto;
    }

    .massagen-bewegung-bild {
        min-height: 320px;
        max-height: 420px;
    }
}

/* Mobil */
@media (max-width: 768px) {
    .massagen-bewegung {
        margin-bottom: 22px;
    }

    .massagen-bewegung-inhalt {
        gap: 20px;
        padding: 24px 20px;
        border-radius: 20px;
    }

    .massagen-bewegung-bildbereich {
        border-radius: 16px;
    }

    .massagen-bewegung-bild {
        min-height: 240px;
        max-height: 300px;
    }

    .massagen-bewegung-text {
        margin-bottom: 14px;
        font-size: 1rem;
        line-height: 1.75;
    }
}

/* =========================================================
   MASSAGEN
   Mobile Massagen
========================================================= */

.massagen-mobil {
    margin-bottom: 28px;
}

.massagen-mobil-karte {
    padding: 30px 34px;
    background: #f3ecf3;
    border: 1px solid var(--farbe-rahmen);
    border-radius: 24px;
    box-shadow: var(--farbe-schatten);
}

.massagen-mobil-layout {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: 34px;
    align-items: center;
}

.massagen-mobil-links {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.massagen-mobil-kopf {
    margin-bottom: 26px;
    max-width: 760px;
}

.massagen-mobil-einleitung {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--farbe-text);
}

.massagen-mobil-textblock {
    width: 100%;
}

.massagen-mobil-text {
    margin: 0 0 16px;
    font-size: 1.04rem;
    line-height: 1.85;
    color: var(--farbe-text);
}

    .massagen-mobil-text:last-child {
        margin-bottom: 0;
    }

.massagen-mobil-rechts {
    display: grid;
    gap: 18px;
    align-self: center;
}

.massagen-mobil-merkmale {
    display: grid;
    gap: 18px;
}

.massagen-mobil-merkmal {
    padding: 18px 18px 16px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid var(--farbe-rahmen);
}

.massagen-mobil-merkmalicon {
    margin-bottom: 10px;
    font-size: 1.5rem;
    color: var(--farbe-primary);
}

.massagen-mobil-merkmal h3 {
    margin: 0 0 6px;
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--farbe-text);
}

.massagen-mobil-merkmal p {
    margin: 0;
    font-size: 0.97rem;
    line-height: 1.65;
    color: var(--farbe-text-weich);
}

.massagen-mobil-hinweisbox {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 14px;
    align-items: center;
    padding: 18px 18px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid var(--farbe-rahmen);
}

.massagen-mobil-hinweisicon {
    font-size: 1.45rem;
    color: var(--farbe-primary);
    text-align: center;
}

.massagen-mobil-hinweistext {
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--farbe-text);
}

/* Tablet */
@media (max-width: 1100px) {
    .massagen-mobil-layout {
        grid-template-columns: 1fr;
        gap: 22px;
        align-items: start;
    }

    .massagen-mobil-links,
    .massagen-mobil-rechts {
        align-self: start;
    }
}

/* Mobil */
@media (max-width: 768px) {
    .massagen-mobil {
        margin-bottom: 22px;
    }

    .massagen-mobil-karte {
        padding: 24px 20px;
        border-radius: 20px;
    }

    .massagen-mobil-kopf {
        margin-bottom: 20px;
    }

    .massagen-mobil-einleitung {
        font-size: 1rem;
        line-height: 1.7;
    }

    .massagen-mobil-text {
        margin-bottom: 14px;
        font-size: 1rem;
        line-height: 1.75;
    }

    .massagen-mobil-rechts {
        gap: 16px;
    }

    .massagen-mobil-merkmal {
        padding: 16px 14px;
    }

        .massagen-mobil-merkmal h3 {
            font-size: 1.05rem;
        }

        .massagen-mobil-merkmal p {
            font-size: 0.95rem;
        }

    .massagen-mobil-hinweisbox {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 16px 14px;
    }
}

/* =========================================================
   MASSAGEN
   Zusatzleistungen
========================================================= */

.massagen-zusatzleistungen {
    margin-bottom: 28px;
}

.massagen-zusatzleistungen-karte {
    padding: 30px 34px;
    background: #f8f2ee;
    border: 1px solid var(--farbe-rahmen);
    border-radius: 24px;
    box-shadow: var(--farbe-schatten);
}

.massagen-zusatzleistungen-kopf {
    margin-bottom: 26px;
    max-width: 760px;
}

.massagen-zusatzleistungen-einleitung {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--farbe-text);
}

.massagen-zusatzleistungen-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.massagen-zusatzleistung {
    padding: 22px 20px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid var(--farbe-rahmen);
}

.massagen-zusatzleistung-iconbox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: rgba(122, 61, 180, 0.12);
}

.massagen-zusatzleistung-icon {
    font-size: 1.4rem;
    color: var(--farbe-primary);
}

.massagen-zusatzleistung-titel {
    margin: 0 0 8px;
    font-size: 1.18rem;
    font-weight: 700;
    color: var(--farbe-text);
}

.massagen-zusatzleistung-text {
    margin: 0 0 14px;
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--farbe-text-weich);
}

.massagen-zusatzleistung-hinweis {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--farbe-primary);
}

/* Tablet */
@media (max-width: 1100px) {
    .massagen-zusatzleistungen-grid {
        grid-template-columns: 1fr;
    }
}

/* Mobil */
@media (max-width: 768px) {
    .massagen-zusatzleistungen {
        margin-bottom: 22px;
    }

    .massagen-zusatzleistungen-karte {
        padding: 24px 20px;
        border-radius: 20px;
    }

    .massagen-zusatzleistungen-einleitung {
        font-size: 1rem;
        line-height: 1.7;
    }

    .massagen-zusatzleistung {
        padding: 18px 16px;
    }

    .massagen-zusatzleistung-titel {
        font-size: 1.08rem;
    }

    .massagen-zusatzleistung-text {
        font-size: 0.96rem;
    }
}

/* =========================================================
   MASSAGEN
   Preise & Dauer
========================================================= */

.massagen-preise {
    margin-bottom: 28px;
}

.massagen-preise-karte {
    padding: 30px 34px;
    background: #f3ecf3;
    border: 1px solid var(--farbe-rahmen);
    border-radius: 24px;
    box-shadow: var(--farbe-schatten);
}

.massagen-preise-kopf {
    margin-bottom: 26px;
    max-width: 760px;
}

.massagen-preise-einleitung {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--farbe-text);
}

.massagen-preise-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-bottom: 22px;
}

.massagen-preis {
    position: relative;
    padding: 24px 18px 20px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid var(--farbe-rahmen);
}

.massagen-preis-empfohlen {
    border-color: var(--farbe-primary);
    box-shadow: 0 14px 32px rgba(122, 61, 180, 0.12);
}

.massagen-preis-badge {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--farbe-primary);
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(122, 61, 180, 0.18);
}

.massagen-preis-iconbox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: rgba(122, 61, 180, 0.14);
}

.massagen-preis-icon {
    font-size: 1.3rem;
    color: var(--farbe-primary);
}

.massagen-preis-titel {
    margin: 0 0 8px;
    font-size: 1.18rem;
    font-weight: 700;
    color: var(--farbe-text);
}

.massagen-preis-text {
    margin: 0 0 14px;
    font-size: 0.97rem;
    line-height: 1.65;
    color: var(--farbe-text-weich);
}

.massagen-preis-betrag {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 800;
    color: var(--farbe-primary);
}

.massagen-preise-hinweise {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.massagen-preise-hinweiskarte {
    padding: 18px 18px 16px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid var(--farbe-rahmen);
}

.massagen-preise-hinweisicon {
    margin-bottom: 10px;
    font-size: 1.45rem;
    color: var(--farbe-primary);
}

.massagen-preise-hinweiskarte h3 {
    margin: 0 0 6px;
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--farbe-text);
}

.massagen-preise-hinweiskarte p {
    margin: 0;
    font-size: 0.97rem;
    line-height: 1.65;
    color: var(--farbe-text-weich);
}

/* Tablet */
@media (max-width: 1100px) {
    .massagen-preise-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobil */
@media (max-width: 768px) {
    .massagen-preise {
        margin-bottom: 22px;
    }

    .massagen-preise-karte {
        padding: 24px 20px;
        border-radius: 20px;
    }

    .massagen-preise-einleitung {
        font-size: 1rem;
        line-height: 1.7;
    }

    .massagen-preise-grid,
    .massagen-preise-hinweise {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .massagen-preis,
    .massagen-preise-hinweiskarte {
        padding: 16px 14px;
    }

    .massagen-preis-titel {
        font-size: 1.08rem;
    }

    .massagen-preis-text,
    .massagen-preise-hinweiskarte p {
        font-size: 0.95rem;
    }
}



/* =========================================================
   MASSAGEN
   Abschluss CTA
========================================================= */

.massagen-abschluss {
    margin-bottom: 8px;
}

.massagen-abschluss-box {
    display: grid;
    grid-template-columns: 180px 1fr auto;
    align-items: center;
    gap: 40px;
    padding: 26px 34px;
    background: #e9dbef;
    border: 1px solid var(--farbe-rahmen);
    border-radius: 28px;
    box-shadow: var(--farbe-schatten);
    overflow: hidden;
}

.massagen-abschluss-bildwrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.massagen-abschluss-bild {
    display: block;
    width: 100%;
    max-width: 150px;
    height: auto;
    object-fit: contain;
}

.massagen-abschluss-text {
    min-width: 0;
}

.massagen-abschluss-titel {
    margin: 0 0 8px;
    font-family: var(--schrift-titel);
    font-size: clamp(2.1rem, 2.8vw, 3rem);
    line-height: 1.05;
    color: var(--farbe-text);
}

.massagen-abschluss-absatz {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--farbe-text-weich);
}

.massagen-abschluss-aktion {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.massagen-abschluss-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 26px;
    min-width: 170px;
    border-radius: 18px;
    background: var(--farbe-primary);
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 10px 24px rgba(122, 61, 180, 0.22);
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

    .massagen-abschluss-button:hover {
        transform: translateY(-2px);
        background: var(--farbe-primary-dunkler);
        box-shadow: 0 14px 28px rgba(122, 61, 180, 0.28);
    }

/* Tablet */
@media (max-width: 1100px) {
    .massagen-abschluss-box {
        grid-template-columns: 140px 1fr;
        gap: 24px;
    }

    .massagen-abschluss-aktion {
        grid-column: 1 / -1;
        justify-content: center;
        margin-top: 4px;
    }

    .massagen-abschluss-bild {
        max-width: 120px;
    }
}

/* Mobil */
@media (max-width: 768px) {
    .massagen-abschluss {
        margin-bottom: 0;
    }

    .massagen-abschluss-box {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 16px;
        padding: 24px 20px;
        border-radius: 20px;
    }

    .massagen-abschluss-bild {
        max-width: 110px;
    }

    .massagen-abschluss-titel {
        font-size: clamp(1.8rem, 7vw, 2.3rem);
    }

    .massagen-abschluss-absatz {
        font-size: 1rem;
        line-height: 1.6;
    }

    .massagen-abschluss-aktion {
        width: 100%;
        justify-content: center;
        margin-top: 2px;
    }

    .massagen-abschluss-button {
        width: 100%;
        min-width: 0;
    }
}

/* =========================================================
   GUTSCHEINE
   Hero
========================================================= */

.gutscheine-seite {
    padding: 32px 0 80px;
}

.gutscheine-erfolgsmeldung {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
    padding: 18px 22px;
    border-radius: 22px;
    background: linear-gradient(135deg, #f6efe9 0%, #f3ecf3 100%);
    border: 1px solid var(--farbe-rahmen);
    color: var(--farbe-text);
    box-shadow: var(--farbe-schatten);
}

    .gutscheine-erfolgsmeldung::before {
        content: "\f058";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(122, 61, 180, 0.12);
        color: var(--farbe-primary);
        font-size: 1.1rem;
    }

.gutscheine-erfolgsmeldung-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gutscheine-erfolgsmeldung-titel {
    font-family: var(--schrift-titel);
    font-size: 1.35rem;
    line-height: 1.1;
    color: var(--farbe-text);
}

.gutscheine-erfolgsmeldung-absatz {
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--farbe-text-weich);
}

.gutscheine-hero {
    margin-bottom: 28px;
}

.gutscheine-hero-inhalt {
    display: grid;
    grid-template-columns: 1.02fr 1fr;
    align-items: stretch;
    background: linear-gradient(135deg, #f8f2ee 0%, #f6efe9 100%);
    border: 1px solid var(--farbe-rahmen);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: var(--farbe-schatten);
    min-height: 560px;
}

.gutscheine-hero-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 56px 54px;
}

.gutscheine-kicker {
    display: inline-block;
    margin-bottom: 18px;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--farbe-primary);
}

.gutscheine-hero-titel {
    margin: 0 0 24px;
    font-family: var(--schrift-titel);
    font-size: clamp(2.7rem, 4vw, 4.2rem);
    line-height: 0.98;
    color: var(--farbe-text);
    max-width: 620px;
}

.gutscheine-hero-absatz {
    max-width: 560px;
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.8;
    color: var(--farbe-text);
}

.gutscheine-hero-bildbereich {
    position: relative;
    min-height: 100%;
    background: #ead8c3;
}

    .gutscheine-hero-bildbereich::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 -1px;
        width: 180px;
        background: linear-gradient(to right, #f7f1eb 0%, rgba(247, 241, 235, 0.92) 28%, rgba(247, 241, 235, 0) 100%);
        z-index: 2;
        pointer-events: none;
    }

.gutscheine-hero-bild {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 560px;
    object-fit: cover;
    object-position: center;
}

.gutscheine-validierung {
    display: block;
    margin-top: 6px;
    font-size: 0.9rem;
    color: #b42318;
}

.gutscheine-validierung-zusammenfassung {
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(235, 87, 87, 0.10);
    border: 1px solid rgba(235, 87, 87, 0.28);
    color: #b42318;
}

    .gutscheine-validierung-zusammenfassung:empty {
        display: none;
    }

/* Tablet */
@media (max-width: 1100px) {
    .gutscheine-hero-inhalt {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .gutscheine-hero-text {
        padding: 48px 40px 36px;
    }

    .gutscheine-hero-bildbereich::before {
        display: none;
    }

    .gutscheine-hero-bild {
        min-height: 380px;
        max-height: 500px;
    }
}

/* Mobil */
@media (max-width: 768px) {
    .gutscheine-seite {
        padding: 20px 0 56px;
    }

    .gutscheine-hero {
        margin-bottom: 22px;
    }

    .gutscheine-hero-inhalt {
        border-radius: 22px;
    }

    .gutscheine-hero-text {
        padding: 34px 24px 28px;
    }

    .gutscheine-kicker {
        margin-bottom: 14px;
        font-size: 0.82rem;
        letter-spacing: 0.18em;
    }

    .gutscheine-hero-titel {
        margin-bottom: 18px;
        font-size: clamp(2.2rem, 8vw, 3.1rem);
        line-height: 1.02;
    }

    .gutscheine-hero-absatz {
        font-size: 1rem;
        line-height: 1.7;
    }

    .gutscheine-hero-bild {
        min-height: 280px;
        max-height: 340px;
    }
}

/* =========================================================
   GUTSCHEINE
   Vorteile
========================================================= */

.gutscheine-vorteile {
    margin-bottom: 28px;
}

.gutscheine-vorteile-karte {
    padding: 30px 34px;
    background: #f3ecf3;
    border: 1px solid var(--farbe-rahmen);
    border-radius: 24px;
    box-shadow: var(--farbe-schatten);
}

.gutscheine-vorteile-kopf {
    margin-bottom: 26px;
    max-width: 760px;
}

.gutscheine-bereichstitel {
    margin: 0 0 16px;
    font-family: var(--schrift-titel);
    font-size: clamp(2rem, 2.4vw, 2.6rem);
    line-height: 1.1;
    color: var(--farbe-text);
}

.gutscheine-vorteile-einleitung {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--farbe-text);
}

.gutscheine-vorteile-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.gutscheine-vorteil {
    padding: 20px 18px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid var(--farbe-rahmen);
    text-align: center;
}

.gutscheine-vorteil-iconbox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: rgba(122, 61, 180, 0.12);
}

.giftscheine-vorteil-icon {
    font-size: 1.35rem;
    color: var(--farbe-primary);
}

.gutscheine-vorteil-titel {
    margin: 0 0 8px;
    font-size: 1.14rem;
    font-weight: 700;
    color: var(--farbe-text);
}

.gutscheine-vorteil-text {
    margin: 0;
    font-size: 0.97rem;
    line-height: 1.65;
    color: var(--farbe-text-weich);
}

/* Tablet */
@media (max-width: 1100px) {
    .gutscheine-vorteile-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobil */
@media (max-width: 768px) {
    .gutscheine-vorteile {
        margin-bottom: 22px;
    }

    .gutscheine-vorteile-karte {
        padding: 24px 20px;
        border-radius: 20px;
    }

    .gutscheine-bereichstitel {
        margin-bottom: 12px;
        font-size: clamp(1.8rem, 7vw, 2.3rem);
    }

    .gutscheine-vorteile-einleitung {
        font-size: 1rem;
        line-height: 1.7;
    }

    .gutscheine-vorteile-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .gutscheine-vorteil {
        padding: 18px 16px;
    }

    .gutscheine-vorteil-titel {
        font-size: 1.08rem;
    }

    .gutscheine-vorteil-text {
        font-size: 0.95rem;
    }
}

/* =========================================================
   GUTSCHEINE
   Erklrung
========================================================= */

.gutscheine-erklaerung {
    margin-bottom: 28px;
}

.gutscheine-erklaerung-inhalt {
    display: grid;
    grid-template-columns: 1fr 0.95fr;
    align-items: center;
    gap: 28px;
    padding: 34px;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rahmen);
    border-radius: 24px;
    box-shadow: var(--farbe-schatten);
}

.gutscheine-erklaerung-text {
    max-width: 720px;
}

.gutscheine-erklaerung-absatz {
    margin: 0 0 18px;
    font-size: 1.04rem;
    line-height: 1.8;
    color: var(--farbe-text);
}

    .gutscheine-erklaerung-absatz:last-child {
        margin-bottom: 0;
    }

.gutscheine-erklaerung-karten {
    display: grid;
    gap: 18px;
}

.gutscheine-erklaerung-karte {
    display: grid;
    grid-template-columns: 58px 1fr;
    align-items: start;
    gap: 16px;
    padding: 20px 18px;
    background: #ffffff;
    border: 1px solid var(--farbe-rahmen);
    border-radius: 20px;
}

.gutscheine-erklaerung-iconbox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: rgba(122, 61, 180, 0.12);
    flex-shrink: 0;
}

.gutscheine-erklaerung-icon {
    font-size: 1.2rem;
    color: var(--farbe-primary);
}

.gutscheine-erklaerung-kartentitel {
    margin: 0 0 8px;
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--farbe-text);
}

.gutscheine-erklaerung-kartentext {
    margin: 0;
    font-size: 0.97rem;
    line-height: 1.65;
    color: var(--farbe-text-weich);
}

/* Tablet */
@media (max-width: 1100px) {
    .gutscheine-erklaerung-inhalt {
        grid-template-columns: 1fr;
        align-items: center;
    }
}

/* Mobil */
@media (max-width: 768px) {
    .gutscheine-erklaerung {
        margin-bottom: 22px;
    }

    .gutscheine-erklaerung-inhalt {
        gap: 22px;
        padding: 24px 20px;
        border-radius: 20px;
    }

    .gutscheine-erklaerung-absatz {
        font-size: 1rem;
        line-height: 1.75;
    }

    .gutscheine-erklaerung-karte {
        grid-template-columns: 50px 1fr;
        gap: 14px;
        padding: 18px 16px;
    }

    .gutscheine-erklaerung-iconbox {
        width: 50px;
        height: 50px;
    }

    .gutscheine-erklaerung-kartentitel {
        font-size: 1.04rem;
    }

    .gutscheine-erklaerung-kartentext {
        font-size: 0.95rem;
    }
}


/* =========================================================
   GUTSCHEINE
   Bestellung
========================================================= */

.gutscheine-bestellung {
    margin-bottom: 28px;
}

.gutscheine-bestellung-inhalt {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    align-items: start;
    gap: 28px;
    padding: 34px;
    background: #f8f2ee;
    border: 1px solid var(--farbe-rahmen);
    border-radius: 24px;
    box-shadow: var(--farbe-schatten);
}

.gutscheine-bestellung-text {
    max-width: 680px;
}

.gutscheine-bestellung-absatz {
    margin: 0 0 18px;
    font-size: 1.04rem;
    line-height: 1.8;
    color: var(--farbe-text);
}

    .gutscheine-bestellung-absatz:last-of-type {
        margin-bottom: 22px;
    }

.gutscheine-bestellung-info {
    display: grid;
    gap: 12px;
}

.gutscheine-bestellung-infoelement {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    color: var(--farbe-text);
    font-size: 0.98rem;
    line-height: 1.55;
}

.gutscheine-bestellung-infoicon {
    color: var(--farbe-primary);
    font-size: 1rem;
    flex-shrink: 0;
}

.gutscheine-formular-karte {
    padding: 26px 24px;
    background: #ffffff;
    border: 1px solid var(--farbe-rahmen);
    border-radius: 22px;
}

.gutscheine-formular {
    display: grid;
    gap: 22px;
}

.gutscheine-formular-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.gutscheine-formular-feld {
    display: grid;
    gap: 8px;
}

.gutscheine-formular-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--farbe-text);
}

.gutscheine-formular-eingabe {
    width: 100%;
    min-height: 54px;
    padding: 14px 16px;
    border: 1px solid var(--farbe-rahmen);
    border-radius: 16px;
    background: #fcfaf8;
    font-size: 1rem;
    color: var(--farbe-text);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .gutscheine-formular-eingabe:focus {
        border-color: rgba(122, 61, 180, 0.45);
        box-shadow: 0 0 0 4px rgba(122, 61, 180, 0.08);
    }

.gutscheine-formular-textarea {
    min-height: 140px;
    resize: vertical;
}

.gutscheine-formular-gruppe {
    display: grid;
    gap: 12px;
}

.gutscheine-auswahlgruppe {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.gutscheine-auswahlkarte {
    display: block;
    cursor: pointer;
}

.gutscheine-auswahl-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.gutscheine-auswahl-inhalt {
    display: block;
    height: 100%;
    padding: 16px 16px;
    background: #fcfaf8;
    border: 1px solid var(--farbe-rahmen);
    border-radius: 18px;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.gutscheine-auswahlkarte:hover .gutscheine-auswahl-inhalt {
    border-color: rgba(122, 61, 180, 0.28);
    transform: translateY(-1px);
}

.gutscheine-auswahl-input:checked + .gutscheine-auswahl-inhalt {
    border-color: rgba(122, 61, 180, 0.55);
    box-shadow: 0 0 0 4px rgba(122, 61, 180, 0.08);
    background: #f7f1fb;
}

.gutscheine-auswahl-titel {
    display: block;
    margin-bottom: 6px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--farbe-text);
}

.gutscheine-auswahl-text {
    display: block;
    font-size: 0.94rem;
    line-height: 1.6;
    color: var(--farbe-text-weich);
}

.gutscheine-formular-kundendaten {
    display: grid;
    gap: 18px;
    padding-top: 4px;
}

.gutscheine-formular-adresseblock {
    display: grid;
    gap: 18px;
    padding: 18px;
    background: #faf6f3;
    border: 1px solid var(--farbe-rahmen);
    border-radius: 18px;
}

.gutscheine-formular-adressetitel {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--farbe-text);
}

.gutscheine-formular-untertitel {
    margin: 0;
    font-size: 1.18rem;
    font-weight: 700;
    color: var(--farbe-text);
}

.gutscheine-formular-hinweisbox {
    padding: 16px 18px;
    background: #f6f0f8;
    border: 1px solid rgba(122, 61, 180, 0.12);
    border-radius: 18px;
}

.gutscheine-formular-hinweistext {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--farbe-text-weich);
}

.gutscheine-formular-aktion {
    display: flex;
    justify-content: flex-start;
}

.gutscheine-formular-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    min-height: 54px;
    padding: 14px 24px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--farbe-primary) 0%, var(--farbe-primary-dunkler) 100%);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 12px 24px rgba(122, 61, 180, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .gutscheine-formular-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 28px rgba(122, 61, 180, 0.22);
    }

    .gutscheine-formular-button:active {
        transform: translateY(0);
    }

#postadresseBlock {
    display: none;
}

/* Tablet */
@media (max-width: 1100px) {
    .gutscheine-bestellung-inhalt {
        grid-template-columns: 1fr;
        align-items: center;
    }
}

/* Mobil */
@media (max-width: 768px) {
    .gutscheine-bestellung {
        margin-bottom: 22px;
    }

    .gutscheine-bestellung-inhalt {
        gap: 22px;
        padding: 24px 20px;
        border-radius: 20px;
    }

    .gutscheine-bestellung-absatz {
        font-size: 1rem;
        line-height: 1.75;
    }

    .gutscheine-formular-karte {
        padding: 20px 16px;
        border-radius: 20px;
    }

    .gutscheine-formular {
        gap: 18px;
    }

    .gutscheine-formular-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .gutscheine-auswahlgruppe {
        grid-template-columns: 1fr;
    }

    .gutscheine-formular-button {
        width: 100%;
        min-width: 0;
    }
}

/* =========================================================
   GUTSCHEINE
   Hinweise
========================================================= */

.gutscheine-hinweise {
    margin-bottom: 28px;
}

.gutscheine-hinweise-inhalt {
    padding: 34px;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rahmen);
    border-radius: 24px;
    box-shadow: var(--farbe-schatten);
}

.gutscheine-hinweise-kopf {
    max-width: 760px;
    margin-bottom: 26px;
}

.gutscheine-hinweise-einleitung {
    margin: 0;
    font-size: 1.04rem;
    line-height: 1.8;
    color: var(--farbe-text);
}

.gutscheine-hinweise-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.gutscheine-hinweis-karte {
    display: grid;
    grid-template-columns: 58px 1fr;
    align-items: start;
    gap: 16px;
    padding: 20px 18px;
    background: #ffffff;
    border: 1px solid var(--farbe-rahmen);
    border-radius: 20px;
}

.gutscheine-hinweis-iconbox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: rgba(122, 61, 180, 0.12);
    flex-shrink: 0;
}

.gutscheine-hinweis-icon {
    font-size: 1.15rem;
    color: var(--farbe-primary);
}

.gutscheine-hinweis-titel {
    margin: 0 0 8px;
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--farbe-text);
}

.gutscheine-hinweis-text {
    margin: 0;
    font-size: 0.97rem;
    line-height: 1.65;
    color: var(--farbe-text-weich);
}

/* Tablet */
@media (max-width: 1100px) {
    .gutscheine-hinweise-grid {
        grid-template-columns: 1fr;
    }
}

/* Mobil */
@media (max-width: 768px) {
    .gutscheine-hinweise {
        margin-bottom: 22px;
    }

    .gutscheine-hinweise-inhalt {
        padding: 24px 20px;
        border-radius: 20px;
    }

    .gutscheine-hinweise-kopf {
        margin-bottom: 22px;
    }

    .gutscheine-hinweise-einleitung {
        font-size: 1rem;
        line-height: 1.75;
    }

    .gutscheine-hinweis-karte {
        grid-template-columns: 50px 1fr;
        gap: 14px;
        padding: 18px 16px;
    }

    .gutscheine-hinweis-iconbox {
        width: 50px;
        height: 50px;
    }

    .gutscheine-hinweis-titel {
        font-size: 1.02rem;
    }

    .gutscheine-hinweis-text {
        font-size: 0.95rem;
    }
}

/* =========================================================
   GUTSCHEINE
   Abschluss
========================================================= */

.gutscheine-abschluss {
    margin-bottom: 28px;
}

.gutscheine-abschluss-inhalt {
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    align-items: center;
    gap: 28px;
    padding: 34px;
    background: linear-gradient(135deg, #f8f2ee 0%, #f4ecf6 100%);
    border: 1px solid var(--farbe-rahmen);
    border-radius: 24px;
    box-shadow: var(--farbe-schatten);
}

.gutscheine-abschluss-text {
    max-width: 720px;
}

.gutscheine-abschluss-absatz {
    margin: 0 0 18px;
    font-size: 1.04rem;
    line-height: 1.8;
    color: var(--farbe-text);
}

    .gutscheine-abschluss-absatz:last-child {
        margin-bottom: 0;
    }

.gutscheine-abschluss-karte {
    padding: 28px 24px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(122, 61, 180, 0.12);
    border-radius: 22px;
}

.gutscheine-abschluss-iconbox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: rgba(122, 61, 180, 0.12);
}

.gutscheine-abschluss-icon {
    font-size: 1.2rem;
    color: var(--farbe-primary);
}

.gutscheine-abschluss-kartentitel {
    margin: 0 0 10px;
    font-size: 1.18rem;
    font-weight: 700;
    color: var(--farbe-text);
}

.gutscheine-abschluss-kartentext {
    margin: 0 0 18px;
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--farbe-text-weich);
}

.gutscheine-abschluss-hinweis {
    padding: 14px 16px;
    background: #f7f1fb;
    border: 1px solid rgba(122, 61, 180, 0.1);
    border-radius: 16px;
    font-size: 0.94rem;
    line-height: 1.65;
    color: var(--farbe-text);
}

/* Tablet */
@media (max-width: 1100px) {
    .gutscheine-abschluss-inhalt {
        grid-template-columns: 1fr;
        align-items: center;
    }
}

/* Mobil */
@media (max-width: 768px) {
    .gutscheine-abschluss {
        margin-bottom: 22px;
    }

    .gutscheine-abschluss-inhalt {
        gap: 22px;
        padding: 24px 20px;
        border-radius: 20px;
    }

    .gutscheine-abschluss-absatz {
        font-size: 1rem;
        line-height: 1.75;
    }

    .gutscheine-abschluss-karte {
        padding: 22px 18px;
        border-radius: 20px;
    }

    .gutscheine-abschluss-iconbox {
        width: 54px;
        height: 54px;
        margin-bottom: 16px;
    }

    .gutscheine-abschluss-kartentitel {
        font-size: 1.08rem;
    }

    .gutscheine-abschluss-kartentext,
    .gutscheine-abschluss-hinweis {
        font-size: 0.95rem;
    }
}
/* =========================================================
   TERMIN BUCHEN
   Grundstruktur
========================================================= */

.termin-hero {
    margin-bottom: 28px;
}

.termin-hero-inhalt {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    padding: 0 4px;
}

.termin-seitentitel {
    margin: 0 0 12px;
    font-family: var(--schrift-titel);
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    line-height: 1.08;
    color: var(--farbe-text);
}

.termin-einleitung {
    max-width: 760px;
    margin: 0;
    font-size: 1.18rem;
    line-height: 1.7;
    color: var(--farbe-text);
}

.termin-hero-hinweis {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: #f1eaf5;
    border: 1px solid var(--farbe-rahmen);
    border-radius: 16px;
    color: var(--farbe-text);
    font-size: 0.98rem;
    line-height: 1.5;
    white-space: nowrap;
}

.termin-hero-hinweis-icon {
    color: var(--farbe-primary);
}

.termin-bereich {
    margin-bottom: 28px;
}

.termin-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) 320px;
    align-items: start;
    gap: 22px;
}

.termin-hauptspalte {
    display: grid;
    gap: 18px;
}

.termin-schrittkarte {
    padding: 28px 24px;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rahmen);
    border-radius: 24px;
    box-shadow: var(--farbe-schatten);
}

.termin-schrittkopf {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

.termin-schrittnummer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--farbe-primary);
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 700;
    flex-shrink: 0;
}

.termin-schritttitel {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    color: var(--farbe-text);
}

.termin-platzhalterbereich {
    padding: 26px 20px;
    background: #fcfaf8;
    border: 1px dashed rgba(122, 61, 180, 0.28);
    border-radius: 18px;
    font-size: 1rem;
    color: var(--farbe-text-weich);
}

.termin-seitenspalte {
    display: grid;
    gap: 18px;
}

.termin-info-karte,
.termin-ruhekarte,
.termin-bildkarte {
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rahmen);
    border-radius: 24px;
    box-shadow: var(--farbe-schatten);
}

.termin-info-karte {
    padding: 24px 20px;
}

.termin-info-titel {
    margin: 0 0 18px;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--farbe-text);
}

.termin-info-liste {
    display: grid;
    gap: 18px;
}

.termin-info-eintrag {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--farbe-text);
}

.termin-info-icon {
    margin-top: 2px;
    color: var(--farbe-primary);
    flex-shrink: 0;
}

.termin-ruhekarte {
    padding: 28px 22px;
    background: linear-gradient(180deg, #8b5bb7 0%, #7342a1 100%);
    color: #ffffff;
    text-align: center;
}

.termin-ruhekarte-icon {
    margin-bottom: 18px;
    font-size: 2rem;
}

.termin-ruhekarte-titel {
    margin: 0 0 12px;
    font-family: var(--schrift-titel);
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.1;
}

.termin-ruhekarte-text {
    margin: 0;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.95);
}

.termin-bildkarte {
    overflow: hidden;
    min-height: 320px;
}

.termin-bildkarte {
    overflow: hidden;
    min-height: 320px;
}

.termin-bild {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
}

.termin-tag-nav.deaktiviert {
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
}



/* Tablet */
@media (max-width: 1100px) {
    .termin-hero-inhalt {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .termin-hero-hinweis {
        white-space: normal;
    }

    .termin-layout {
        grid-template-columns: 1fr;
    }
}

/* Mobil */
@media (max-width: 768px) {
    .termin-hero {
        margin-bottom: 22px;
    }

    .termin-einleitung {
        font-size: 1.02rem;
        line-height: 1.75;
    }

    .termin-hero-hinweis {
        padding: 13px 16px;
        font-size: 0.95rem;
        border-radius: 14px;
    }

    .termin-bereich {
        margin-bottom: 22px;
    }

    .termin-schrittkarte {
        padding: 22px 18px;
        border-radius: 20px;
    }

    .termin-schrittkopf {
        gap: 12px;
        margin-bottom: 18px;
    }

    .termin-schrittnummer {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }

    .termin-schritttitel {
        font-size: 1.45rem;
    }

    .termin-platzhalterbereich {
        padding: 20px 16px;
        border-radius: 16px;
        font-size: 0.95rem;
    }

    .termin-info-karte,
    .termin-ruhekarte,
    .termin-bildkarte {
        border-radius: 20px;
    }

    .termin-info-karte {
        padding: 20px 16px;
    }

    .termin-info-titel {
        font-size: 1.3rem;
    }

    .termin-bildkarte,
    .termin-bildplatzhalter {
        min-height: 240px;
    }

    .termin-datumkopf,
    .termin-wochekopf {
        gap: 12px;
    }

    .termin-datum,
    .termin-wochetitel {
        font-size: 1rem;
    }

    .termin-tag-nav {
        width: 42px;
        height: 42px;
    }
}

/* =========================================================
   TERMIN  ZEITRASTER
========================================================= */

.termin-zeitbereich {
    display: grid;
    gap: 18px;
}

.termin-datumkopf,
.termin-wochekopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.termin-datum,
.termin-wochetitel {
    flex: 1;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--farbe-text);
}

.termin-tag-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--farbe-rahmen);
    background: #ffffff;
    color: var(--farbe-text);
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

    .termin-tag-nav:hover {
        background: #f8f3fb;
        box-shadow: 0 6px 14px rgba(122, 61, 180, 0.12);
        transform: translateY(-1px);
    }

    .termin-tag-nav i {
        font-size: 1rem;
        line-height: 1;
    }

.termin-legende {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 0.9rem;
    color: var(--farbe-text-weich);
}

.termin-legende-eintrag {
    display: flex;
    align-items: center;
    gap: 8px;
}

.termin-statuspunkt {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

    /* Statusfarben */
    .termin-statuspunkt.frei {
        background: #6fcf97;
    }

    .termin-statuspunkt.eingeschraenkt {
        background: #f2c94c;
    }

    .termin-statuspunkt.belegt {
        background: #eb5757;
    }

.termin-zeitgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 10px;
}

.termin-keine-zeiten {
    grid-column: 1 / -1;
    padding: 18px 20px;
    border-radius: 16px;
    border: 1px solid rgba(235, 87, 87, 0.35);
    background: rgba(235, 87, 87, 0.12);
    color: #b42318;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
    box-shadow: 0 0 22px rgba(235, 87, 87, 0.6);
}

.termin-slot {
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px 0;
    border-radius: 14px;
    border: 1px solid var(--farbe-rahmen);
    background: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
}

    .termin-slot.ausgewaehlt {
        border: 2px solid var(--farbe-primary);
        box-shadow: 0 0 0 4px rgba(122, 61, 180, 0.55);
        transform: translateY(-2px);
    }

.termin-dauerkarte.ausgewaehlt {
    border: 2px solid var(--farbe-primary);
    box-shadow: 0 0 0 4px rgba(122, 61, 180, 0.55);
    transform: translateY(-2px);
}

.termin-dauerkarte {
    display: grid;
    text-decoration: none;
    color: inherit;
}


.termin-zusammenfassung {
    margin-bottom: 20px;
    padding: 18px 20px;
    background: #f8f3fb;
    border: 1px solid var(--farbe-rahmen);
    border-radius: 16px;
}

.termin-zusammenfassung-titel {
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--farbe-primary);
}

.termin-zusammenfassung-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    font-size: 0.95rem;
}

.termin-zusammenfassung-label {
    color: var(--farbe-text-weich);
    margin-right: 6px;
}

.termin-zusammenfassung .label {
    color: var(--farbe-text-weich);
    margin-right: 6px;
}

.termin-validierung {
    display: block;
    margin-top: 6px;
    font-size: 0.9rem;
    color: #b42318;
}

.termin-validierung-zusammenfassung {
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(235, 87, 87, 0.10);
    border: 1px solid rgba(235, 87, 87, 0.28);
    color: #b42318;
}

    .termin-validierung-zusammenfassung:empty {
        display: none;
    }


.termin-erfolgsmeldung {
    margin: 0 0 32px 0;
    padding: 20px 24px;
    border-radius: 18px;
    background: #ecfdf3;
    border: 2px solid #78c98b;
    color: #166534;
    font-weight: 700;
    box-shadow: 0 14px 35px rgba(22, 101, 52, 0.14);
    display: flex;
    align-items: center;
    gap: 12px;
}
/* Status Slots */
.termin-slot.frei {
    background: rgba(111, 207, 151, 0.15);
    border-color: rgba(111, 207, 151, 0.4);
}

.termin-slot.eingeschraenkt {
    background: rgba(242, 201, 76, 0.18);
    border-color: rgba(242, 201, 76, 0.5);
}

.termin-slot.belegt {
    background: rgba(235, 87, 87, 0.18);
    border-color: rgba(235, 87, 87, 0.4);
    cursor: not-allowed;
    opacity: 0.7;
}

.termin-slot:hover:not(.belegt) {
    transform: translateY(-2px);
}

/* =========================================================
   TERMIN  TOGGLE
========================================================= */

.termin-ansicht-toggle {
    display: inline-flex;
    gap: 6px;
    padding: 6px;
    background: #f4eef7;
    border-radius: 999px;
    margin-bottom: 18px;
}

.termin-toggle-btn {
    padding: 8px 16px;
    border-radius: 999px;
    border: none;
    background: transparent;
    font-size: 0.95rem;
    cursor: pointer;
    color: var(--farbe-text-weich);
    transition: all 0.2s ease;
}

    .termin-toggle-btn:hover {
        background: rgba(122, 61, 180, 0.1);
    }

    .termin-toggle-btn.aktiv {
        background: var(--farbe-primary);
        color: #ffffff;
        box-shadow: 0 4px 12px rgba(122, 61, 180, 0.25);
    }

/* =========================================================
   TERMIN  WOCHENSICHT
========================================================= */

.termin-wochekopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.termin-wochetitel {
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--farbe-text);
    text-align: center;
}

.termin-wochengrid {
    display: grid;
    gap: 14px;
}

.termin-tagkarte {
    display: grid;
    gap: 14px;
    width: 100%;
    padding: 18px 18px;
    text-align: left;
    background: #ffffff;
    border: 1px solid var(--farbe-rahmen);
    border-radius: 20px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

    .termin-tagkarte:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 12px 24px rgba(84, 48, 112, 0.08);
    }

    .termin-tagkarte:disabled {
        cursor: not-allowed;
        opacity: 0.72;
    }

.termin-tagkarte-kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.termin-tagname {
    margin-bottom: 4px;
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--farbe-text);
}

.termin-tagdatum {
    font-size: 0.94rem;
    color: var(--farbe-text-weich);
}

.termin-tagstatus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
}

    .termin-tagstatus.frei {
        background: rgba(111, 207, 151, 0.16);
        color: #2f7a52;
    }

    .termin-tagstatus.eingeschraenkt {
        background: rgba(242, 201, 76, 0.2);
        color: #8a6a12;
    }

    .termin-tagstatus.belegt {
        background: rgba(235, 87, 87, 0.16);
        color: #a33d3d;
    }

.termin-tagkarte.frei {
    border-color: rgba(111, 207, 151, 0.3);
}

.termin-tagkarte.eingeschraenkt {
    border-color: rgba(242, 201, 76, 0.35);
}

.termin-tagkarte.belegt {
    border-color: rgba(235, 87, 87, 0.3);
}

.termin-tagkarte-text {
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--farbe-text);
}

.termin-tagkarte-hinweis {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--farbe-text-weich);
}

/* Mobil */
@media (max-width: 768px) {
    .termin-wochekopf {
        margin-bottom: 16px;
    }

    .termin-wochetitel {
        font-size: 1rem;
    }

    .termin-tagkarte {
        gap: 12px;
        padding: 16px;
        border-radius: 18px;
    }

    .termin-tagkarte-kopf {
        flex-direction: column;
        align-items: flex-start;
    }

    .termin-tagname {
        font-size: 1rem;
    }

    .termin-tagdatum,
    .termin-tagkarte-hinweis {
        font-size: 0.9rem;
    }

    .termin-tagkarte-text {
        font-size: 0.95rem;
    }
}

/* =========================================================
   TERMIN  DAUERN
========================================================= */

.termin-dauerbereich {
    display: grid;
    gap: 18px;
}

.termin-auswahlhinweis {
    padding: 16px 18px;
    background: #f7f1fb;
    border: 1px solid rgba(122, 61, 180, 0.12);
    border-radius: 18px;
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--farbe-text);
}

.termin-dauergrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.termin-dauerkarte {
    display: grid;
    gap: 14px;
    width: 100%;
    padding: 20px 18px;
    text-align: left;
    background: #ffffff;
    border: 1px solid var(--farbe-rahmen);
    border-radius: 20px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

    .termin-dauerkarte:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 12px 24px rgba(84, 48, 112, 0.08);
    }

    .termin-dauerkarte:disabled {
        cursor: not-allowed;
        opacity: 0.72;
    }

.termin-dauerkarte-kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.termin-dauerzeit {
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--farbe-text);
}

.termin-dauerpreis {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--farbe-primary);
    white-space: nowrap;
}

.termin-dauerbeschreibung {
    font-size: 0.96rem;
    line-height: 1.65;
    color: var(--farbe-text-weich);
}

.termin-dauerstatus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 700;
}

    .termin-dauerstatus.moeglich {
        background: rgba(111, 207, 151, 0.16);
        color: #2f7a52;
    }

    .termin-dauerstatus.nicht-moeglich {
        background: rgba(235, 87, 87, 0.16);
        color: #a33d3d;
    }

.termin-dauerkarte.moeglich {
    border-color: rgba(111, 207, 151, 0.3);
}

.termin-dauerkarte.nicht-moeglich {
    border-color: rgba(235, 87, 87, 0.25);
}

.termin-dauerkarte.aktiv {
    background: #f7f1fb;
    border-color: rgba(122, 61, 180, 0.42);
    box-shadow: 0 0 0 4px rgba(122, 61, 180, 0.08);
}

.termin-dauerinfo {
    font-size: 0.94rem;
    line-height: 1.65;
    color: var(--farbe-text-weich);
}

/* Tablet */
@media (max-width: 1100px) {
    .termin-dauergrid {
        grid-template-columns: 1fr;
    }
}

/* Mobil */
@media (max-width: 768px) {
    .termin-auswahlhinweis {
        padding: 14px 16px;
        border-radius: 16px;
        font-size: 0.95rem;
    }

    .termin-dauerkarte {
        gap: 12px;
        padding: 18px 16px;
        border-radius: 18px;
    }

    .termin-dauerkarte-kopf {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .termin-dauerzeit {
        font-size: 1rem;
    }

    .termin-dauerpreis {
        font-size: 0.98rem;
    }

    .termin-dauerbeschreibung,
    .termin-dauerinfo {
        font-size: 0.93rem;
    }
}

/* =========================================================
   TERMIN  FORMULAR
========================================================= */

.termin-formular {
    display: grid;
    gap: 22px;
}

.termin-formular-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.termin-formular-feld {
    display: grid;
    gap: 8px;
}

.termin-formular-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--farbe-text);
}

.termin-formular-eingabe {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--farbe-rahmen);
    font-size: 0.95rem;
    background: #ffffff;
}

    .termin-formular-eingabe:focus {
        outline: none;
        border-color: var(--farbe-primary);
    }

.termin-textarea {
    min-height: 100px;
    resize: vertical;
}

.termin-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.termin-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid var(--farbe-rahmen);
    cursor: pointer;
    font-size: 0.92rem;
    line-height: 1.35;
}

.zusatzleistungen-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.termin-checkbox-mit-info {
    align-items: flex-start;
    min-height: 82px;
}

    .termin-checkbox-mit-info small {
        margin-top: 4px;
        display: block;
        color: var(--farbe-text-weich);
        font-size: 0.78rem;
        line-height: 1.35;
    }

    .termin-checkbox-mit-info span {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .termin-checkbox-mit-info strong {
        font-weight: 700;
    }

    .termin-checkbox-mit-info small {
        color: var(--farbe-text-weich);
        font-size: 0.8rem;
        line-height: 1.35;
    }

.termin-checkbox input {
    accent-color: var(--farbe-primary);
}

.termin-formular-abschluss {
    margin-top: 10px;
}

.termin-submit-button {
    width: 100%;
    padding: 14px 18px;
    border-radius: 16px;
    border: none;
    background: var(--farbe-primary);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

    .termin-submit-button:hover {
        background: var(--farbe-primary-dunkler);
    }

/* Mobil */
@media (max-width: 768px) {
    .termin-formular-grid {
        grid-template-columns: 1fr;
    }

    .termin-checkbox-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.termin-formular-abschluss {
    display: grid;
    gap: 14px;
    margin-top: 10px;
}

.termin-sicherheitshinweis {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--farbe-text-weich);
}

.termin-sicherheitshinweis-icon {
    margin-top: 2px;
    color: var(--farbe-primary);
    flex-shrink: 0;
}

/* Responsive */

@media (max-width: 1100px) {
    .zeitenkopf {
        flex-direction: column;
        align-items: stretch;
    }

    .zeitenhinweis {
        max-width: none;
    }

    .zeitenkarten {
        grid-template-columns: 1fr 1fr;
    }

    .wirkungbereich {
        grid-template-columns: 1fr;
    }

    .wirkunginhalt {
        padding: 24px 22px;
    }

    .wirkungpunkte {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .wirkungpunkt {
        align-items: center;
        text-align: left;
        flex-direction: row;
        gap: 14px;
    }

    .wirkungicon {
        width: 64px;
        height: 64px;
        font-size: 1.6rem;
        margin-bottom: 0;
    }

    .wirkunglabel {
        max-width: none;
    }

    .mehrwertbereich {
        grid-template-columns: 1fr;
    }

    .mehrwertbild img {
        min-height: 280px;
    }

    .cta-bereich {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        column-gap: 0;
        row-gap: 18px;
        padding: 20px 20px;
    }

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

        .cta-inhalt p {
            max-width: 34ch;
        }

    .cta-aktion {
        justify-content: center;
    }

    .cta-bild img {
        width: 170px;
    }
}

@media (max-width: 960px) {
    .seitenrahmen {
        width: min(var(--seitenbreite), calc(100% - 28px));
    }

    .seitenkopf {
        position: static;
        backdrop-filter: none;
    }

    .kopf-inhalt {
        min-height: auto;
        flex-wrap: wrap;
        justify-content: center;
        gap: 14px;
        padding: 14px 0;
    }

    .logo-bild {
        height: 52px;
    }

    .hauptnavigation {
        order: 3;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px 18px;
    }

        .hauptnavigation a {
            font-size: 0.95rem;
            padding: 4px 0;
        }

            .hauptnavigation a.aktiv::after {
                bottom: -5px;
                height: 2px;
            }

    .kopf-button {
        min-height: 44px;
        padding: 0 18px;
        font-size: 0.95rem;
        width: auto;
    }

    .hero-start__inhalt {
        min-height: auto;
    }

    .hero-start__overlay {
        background: linear-gradient( to bottom, rgba(247, 241, 235, 0.94) 0%, rgba(247, 241, 235, 0.88) 38%, rgba(247, 241, 235, 0.70) 58%, rgba(247, 241, 235, 0.35) 100% );
    }

    .hero-start__text {
        max-width: none;
        padding: 34px 28px 120px;
    }

    .hero-start__bild {
        object-position: center center;
    }

    .hero-start__merkmale {
        gap: 16px 22px;
    }
}

@media (max-width: 640px) {
    .seitenrahmen {
        width: min(var(--seitenbreite), calc(100% - 20px));
    }

    .kopf-inhalt {
        gap: 12px;
        padding: 12px 0;
    }

    .logo-bild {
        height: 46px;
    }

    .hauptnavigation {
        gap: 8px 14px;
    }

        .hauptnavigation a {
            font-size: 0.9rem;
        }

    .kopf-button {
        width: 100%;
        min-height: 46px;
    }

    .hero-start__text {
        padding: 24px 20px 24px;
    }

    .hero-start h1 {
        line-height: 1.02;
    }

    .hero-start__aktionen {
        flex-direction: column;
    }

    .hero-start__button {
        width: 100%;
    }

    .hero-start__merkmale {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .zeitenbereich-inhalt {
        padding: 22px 18px 18px;
    }

    .zeitenkarten {
        grid-template-columns: 1fr;
    }

    .zeitenkopf h2,
    .wirkunginhalt h2,
    .mehrwertkarte h2,
    .cta-inhalt h2 {
        font-size: clamp(1.9rem, 7vw, 2.3rem);
    }

    .wirkunginhalt {
        padding: 22px 18px;
    }

    .mehrwertkarte {
        padding: 22px 18px;
    }

    .extraeintrag {
        padding: 14px 12px;
    }

    .cta-bereich {
        padding: 18px 16px;
        row-gap: 16px;
    }

    .cta-bild img {
        width: 150px;
    }

    .cta-inhalt p {
        max-width: none;
        font-size: 0.94rem;
    }

    .cta-button {
        width: 100%;
    }

    .cta-aktion {
        width: 100%;
    }
}


.login-bereich {
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 70px 20px;
}

.login-karte {
    width: 100%;
    max-width: 460px;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rahmen);
    border-radius: 28px;
    padding: 36px;
    box-shadow: var(--farbe-schatten);
}

.login-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--farbe-primary);
    color: #ffffff;
    font-size: 1.35rem;
    margin-bottom: 24px;
}

.login-kopf span {
    color: var(--farbe-primary);
    font-weight: 700;
    font-size: 0.9rem;
}

.login-kopf h1 {
    margin: 8px 0 10px;
    font-size: 2rem;
}

.login-kopf p {
    margin: 0 0 28px;
    color: var(--farbe-text-weich);
    line-height: 1.6;
}

.login-formular {
    display: grid;
    gap: 18px;
}

.login-feld {
    display: grid;
    gap: 7px;
}

    .login-feld label {
        font-weight: 700;
        color: var(--farbe-text);
    }

    .login-feld input {
        width: 100%;
        border: 1px solid var(--farbe-rahmen);
        border-radius: 14px;
        padding: 13px 14px;
        font: inherit;
        background: #ffffff;
    }

        .login-feld input:focus {
            outline: none;
            border-color: var(--farbe-primary);
            box-shadow: 0 0 0 4px rgba(122, 61, 180, 0.12);
        }

    .login-feld span {
        color: #b91c1c;
        font-size: 0.85rem;
    }

.login-fehler {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    color: #9f1239;
    border-radius: 14px;
    padding: 13px 14px;
    margin-bottom: 22px;
    font-weight: 700;
}

.login-button {
    margin-top: 6px;
    border: none;
    border-radius: 16px;
    padding: 14px 18px;
    background: var(--farbe-primary);
    color: #ffffff;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    box-shadow: 0 12px 26px rgba(122, 61, 180, 0.22);
}

    .login-button:hover {
        background: var(--farbe-primary-dunkler);
    }


/* =========================================================
   KONTAKT
========================================================= */

.kontakt-seite {
    padding: 32px 0 40px;
}

.kontakt-erfolgsmeldung {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    padding: 24px 28px;
    border-radius: 20px;
    background: #ecfff4;
    border: 2px solid #58d68d;
    box-shadow: 0 12px 30px rgba(46, 125, 50, 0.08);
    color: #075f2a;
    font-size: 1.05rem;
    line-height: 1.55;
    font-weight: 700;
}

    .kontakt-erfolgsmeldung i,
    .kontakt-erfolgsmeldung strong,
    .kontakt-erfolgsmeldung span {
        color: #075f2a;
    }

    .kontakt-erfolgsmeldung i {
        font-size: 1.25rem;
        flex-shrink: 0;
    }

.kontakt-hero {
    margin-bottom: 28px;
}

.kontakt-hero-inhalt {
    padding: 46px 48px;
    border-radius: 28px;
    background: #f3ecf3;
    border: 1px solid var(--farbe-rahmen);
    box-shadow: var(--farbe-schatten);
}

.kontakt-kicker {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--farbe-primary);
}

.kontakt-hero-titel,
.kontakt-bereichstitel {
    margin: 0 0 16px;
    font-family: var(--schrift-titel);
    color: var(--farbe-text);
}

.kontakt-hero-titel {
    max-width: 720px;
    font-size: clamp(2.5rem, 4vw, 4rem);
    line-height: 1;
}

.kontakt-hero-absatz,
.kontakt-text {
    margin: 0;
    max-width: 680px;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--farbe-text-weich);
}

.kontakt-bereich {
    margin-bottom: 28px;
}

.kontakt-inhalt {
    display: grid;
    gap: 24px;
}

.kontakt-kopfbereich {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 28px;
    align-items: stretch;
}

.kontakt-info {
    min-width: 0;
    padding: 30px 32px;
    border-radius: 24px;
    background: #f3ecf3;
    border: 1px solid var(--farbe-rahmen);
    box-shadow: var(--farbe-schatten);
}

.kontakt-bereichstitel {
    font-size: clamp(2rem, 2.7vw, 2.7rem);
    line-height: 1.08;
}

.kontakt-direktliste {
    display: grid;
    gap: 12px;
    margin-top: 22px;
}

.kontakt-direkt {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 12px;
    align-items: center;
    padding: 13px 14px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid var(--farbe-rahmen);
    color: var(--farbe-text);
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

    .kontakt-direkt:hover {
        border-color: var(--farbe-primary);
        transform: translateY(-1px);
    }

    .kontakt-direkt i {
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: rgba(122, 61, 180, 0.12);
        color: var(--farbe-primary);
        font-size: 1.1rem;
    }

    .kontakt-direkt strong {
        display: block;
        margin-bottom: 2px;
        color: var(--farbe-text);
    }

    .kontakt-direkt span {
        color: var(--farbe-text-weich);
        line-height: 1.45;
    }

.kontakt-bildbereich {
    min-width: 0;
    height: 100%;
}

.kontakt-bild {
    width: 100%;
    height: 100%;
    min-height: 100%;
    display: block;
    border-radius: 24px;
    object-fit: cover;
    object-position: center 28%;
    box-shadow: var(--farbe-schatten);
}

.kontakt-herzkarte {
    padding: 34px 28px;
    border-radius: 24px;
    background: linear-gradient(135deg, #9a64c7 0%, #7a3db4 100%);
    color: #ffffff;
    text-align: center;
    box-shadow: 0 18px 38px rgba(122, 61, 180, 0.22);
}

.kontakt-herz-icon {
    margin-bottom: 18px;
    font-size: 2.1rem;
    color: #ffffff;
}

.kontakt-herzkarte h3 {
    margin: 0 0 12px;
    font-family: var(--schrift-titel);
    font-size: 2.2rem;
    color: #1f1024;
}

.kontakt-herzkarte p {
    margin: 0 auto;
    max-width: 520px;
    font-size: 1.05rem;
    line-height: 1.7;
    font-weight: 700;
    color: #ffffff;
}

.kontakt-formular-karte {
    overflow: hidden;
    border-radius: 24px;
    background: #f8f2ee;
    border: 1px solid var(--farbe-rahmen);
    box-shadow: var(--farbe-schatten);
}

.kontakt-formular-kopf {
    padding: 34px 28px;
    background: linear-gradient(135deg, #9a64c7 0%, #7a3db4 100%);
    color: #ffffff;
    text-align: center;
}

    .kontakt-formular-kopf .kontakt-herz-icon {
        margin-bottom: 18px;
        font-size: 2.1rem;
        color: #ffffff;
    }

    .kontakt-formular-kopf h3 {
        margin: 0 0 12px;
        font-family: var(--schrift-titel);
        font-size: 2.2rem;
        color: #1f1024;
    }

    .kontakt-formular-kopf p {
        margin: 0 auto;
        max-width: 560px;
        font-size: 1.05rem;
        line-height: 1.7;
        font-weight: 700;
        color: #ffffff;
    }

.kontakt-formular {
    display: grid;
    gap: 18px;
    padding: 28px;
}

.kontakt-honigtopf {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.kontakt-formular-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.kontakt-formular-feld {
    display: grid;
    gap: 8px;
}

.kontakt-label {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--farbe-text);
}

.kontakt-eingabe {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--farbe-rahmen);
    background: #ffffff;
    color: var(--farbe-text);
    font-family: var(--schrift-text);
    font-size: 1rem;
    outline: none;
}

    .kontakt-eingabe:focus {
        border-color: var(--farbe-primary);
        box-shadow: 0 0 0 3px rgba(122, 61, 180, 0.12);
    }

.kontakt-textarea {
    min-height: 150px;
    resize: vertical;
}

.kontakt-validierung,
.kontakt-validierung-zusammenfassung {
    font-size: 0.9rem;
    color: #9b2f45;
}

.kontakt-hinweisbox {
    padding: 16px 18px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid var(--farbe-rahmen);
}

    .kontakt-hinweisbox p {
        margin: 0;
        font-size: 0.95rem;
        line-height: 1.65;
        color: var(--farbe-primary);
        font-weight: 700;
    }

.kontakt-aktion {
    display: flex;
    justify-content: flex-end;
}

.kontakt-button {
    min-height: 50px;
    padding: 0 24px;
    border: none;
    border-radius: 14px;
    background: var(--farbe-primary);
    color: #ffffff;
    font-family: var(--schrift-text);
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(122, 61, 180, 0.18);
    transition: background 0.2s ease, transform 0.2s ease;
}

    .kontakt-button:hover {
        background: var(--farbe-primary-dunkler);
        transform: translateY(-1px);
    }

/* Tablet */
@media (max-width: 1100px) {
    .kontakt-kopfbereich {
        grid-template-columns: 1fr;
    }

    .kontakt-bild {
        height: 380px;
        min-height: 0;
    }
}

/* Mobil */
@media (max-width: 768px) {
    .kontakt-seite {
        padding: 20px 0 56px;
    }

    .kontakt-hero-inhalt,
    .kontakt-info,
    .kontakt-formular-karte,
    .kontakt-herzkarte {
        padding: 24px 20px;
        border-radius: 20px;
    }

    .kontakt-formular-grid {
        grid-template-columns: 1fr;
    }

    .kontakt-bild {
        height: auto;
        max-height: 360px;
        border-radius: 20px;
    }

    .kontakt-direkt {
        grid-template-columns: 38px 1fr;
    }

        .kontakt-direkt i {
            width: 38px;
            height: 38px;
        }

    .kontakt-aktion {
        justify-content: stretch;
    }

    .kontakt-button {
        width: 100%;
    }
}

.kontakt-abschlusskarte {
    position: relative;
    overflow: hidden;
    padding: 34px 28px 30px;
    border-radius: 28px;
    background: radial-gradient(circle at 8% 78%, rgba(122, 61, 180, 0.14), transparent 28%), radial-gradient(circle at 92% 70%, rgba(122, 61, 180, 0.10), transparent 30%), linear-gradient(135deg, #fbf6f3 0%, #f3ecf3 52%, #fff8f1 100%);
    border: 1px solid var(--farbe-rahmen);
    box-shadow: var(--farbe-schatten);
    text-align: center;
}

    .kontakt-abschlusskarte::before,
    .kontakt-abschlusskarte::after {
        display: none;
    }

.kontakt-abschluss-deko {
    position: absolute;
    left: 38px;
    bottom: 34px;
    color: rgba(122, 61, 180, 0.28);
    font-size: 4.4rem;
    transform: rotate(-18deg);
}

.kontakt-abschluss-symbol {
    width: 58px;
    height: 58px;
    margin: 0 auto 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(122, 61, 180, 0.10);
    border: 1px solid rgba(122, 61, 180, 0.18);
    color: var(--farbe-primary);
    font-size: 1.45rem;
}

.kontakt-abschluss-zitat {
    max-width: 900px;
    margin: 0 auto 24px;
    font-family: var(--schrift-titel);
    font-size: clamp(1.55rem, 2.2vw, 2.35rem);
    line-height: 1.18;
    font-style: italic;
    color: var(--farbe-text);
}

.kontakt-abschluss-trenner {
    display: grid;
    grid-template-columns: minmax(40px, 140px) auto minmax(40px, 140px);
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 0 auto 18px;
    color: var(--farbe-primary);
}

    .kontakt-abschluss-trenner span {
        height: 1px;
        background: rgba(122, 61, 180, 0.22);
    }

    .kontakt-abschluss-trenner i {
        font-size: 1rem;
    }

.kontakt-abschluss-name {
    margin: 0;
    font-family: var(--schrift-titel);
    font-size: clamp(1.55rem, 2.2vw, 2.2rem);
    line-height: 1;
    color: var(--farbe-primary);
}

.kontakt-abschluss-herz {
    margin-top: 16px;
    color: var(--farbe-primary);
    font-size: 1.1rem;
}

/* Mobil */
@media (max-width: 768px) {
    .kontakt-abschlusskarte {
        padding: 38px 20px 34px;
        border-radius: 20px;
    }

    .kontakt-abschluss-deko {
        display: none;
    }

    .kontakt-abschluss-symbol {
        width: 62px;
        height: 62px;
        font-size: 1.6rem;
    }

    .kontakt-abschluss-zitat {
        font-size: clamp(1.7rem, 8vw, 2.3rem);
    }
}