.footer-section-meta {
  background: none;
  border-top: 1px solid #1696a0;
}
.footer-section-meta .frame {
  padding: 0rem;
}
.footer-section-meta .frame-space-after-none {
    --frame-outer-spacing-after: 0rem;
}
.footer-section-meta .frame-space-before-none {
    --frame-outer-spacing-before: 0rem;
}
.footer-section-meta .frame .footer-sociallinks {
  margin-top: 0rem;
}

/* ==========================================================
   1. Fonts
   ========================================================== */

@font-face {
    font-family: "Lato";
    src: url("/fileadmin/user_upload/achtsam_sein/fonts/Lato-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Lato";
    src: url("/fileadmin/user_upload/achtsam_sein/fonts/Lato-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Cormorant Garamond";
    src: url("/fileadmin/user_upload/achtsam_sein/fonts/CormorantGaramond-VariableFont_wght.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}


/* ==========================================================
   2. Farben / Grundtypografie
   ========================================================== */

:root {
    --dw-dark: #183247;
    --dw-text: #465966;

    --dw-turquoise: #1696a0;
    --dw-turquoise-dark: #08747d;

    --dw-sage: #e7f0ea;
    --dw-sage-light: #f2f6f3;
    --dw-beige: #f3e8db;
    --dw-cream: #faf7f2;

    --bs-body-font-family: "Lato", Arial, sans-serif;
    --bs-body-color: #465966;

    --bs-heading-color: #183247;

    --bs-primary: #1696a0;
    --bs-primary-rgb: 22, 150, 160;

    --bs-link-color: #168c96;
    --bs-link-hover-color: #08747d;

    --bs-border-color: #dfe8e4;
}


body {
    font-family: "Lato", Arial, sans-serif;
    color: var(--dw-text);
}


/* ==========================================================
   3. Headlines
   ========================================================== */

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: "Cormorant Garamond", Georgia, serif;
    color: var(--dw-dark);
    font-weight: 500;
}


/*
 * H1 etwas näher am Scribble.
 * KEINE Margins/Abstände anfassen.
 */
h1,
.h1 {
    font-size: clamp(3rem, 4.3vw, 4.6rem);
    line-height: 1;
}


/*
 * Bootstrap-Package H2-Größe nur optisch anpassen.
 */
h2,
.h2 {
    font-size: clamp(2.25rem, 3vw, 3.1rem);
    line-height: 1.08;
}


h3,
.h3 {
    color: var(--dw-dark);
}


/* ==========================================================
   4. Zierlinie unter den Abschnittsüberschriften
   ========================================================== */

.frame-header .element-header {
    position: relative;
}


/* Linie */

.frame-header .element-header::after {
    content: "";

    display: block;

    width: 46px;
    height: 2px;

    margin-top: .45rem;

    background: var(--dw-turquoise);

    border-radius: 10px;
}


/* zentrierte TYPO3 Headlines */

.frame-header .element-header.text-center::after {
    margin-left: auto;
    margin-right: auto;
}


/*
 * Keine Linie bei der Nutzenleiste.
 * Im Scribble wirkt diese bewusst ruhiger.
 */

#c64 .element-header::after {
    display: none;
}


/* ==========================================================
   5. Links
   ========================================================== */

a {
    color: var(--dw-turquoise);
}

a:hover,
a:focus {
    color: var(--dw-turquoise-dark);
}


/* ==========================================================
   6. Standard Buttons
   ========================================================== */

.btn {
    font-family: "Lato", Arial, sans-serif;
    font-weight: 700;

    border-radius: .55rem;
}


.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #1696a0;
    --bs-btn-border-color: #1696a0;

    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #08747d;
    --bs-btn-hover-border-color: #08747d;

    --bs-btn-active-bg: #08747d;
    --bs-btn-active-border-color: #08747d;
}


.btn-outline-primary {
    --bs-btn-color: #1696a0;
    --bs-btn-border-color: #1696a0;

    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1696a0;
    --bs-btn-hover-border-color: #1696a0;
}


/* ==========================================================
   7. Header / Navigation
   ========================================================== */

#page-header {
    background: #fff;
    border-bottom: 1px solid rgba(24, 50, 71, .07);
}


/*
 * Logo nur optisch größer.
 * Keine Header-Höhe oder Navigation-Abstände ändern.
 */

#page-header .navbar-brand img {
    width: auto;
    max-height: 68px;
}


/*
 * normale Navigation
 */

#mainnavigation .nav-link-main {
    color: #263d4b;
}

#mainnavigation .nav-link-main:hover,
#mainnavigation .nav-link-main:focus {
    color: var(--dw-turquoise);
}


/* ==========================================================
   8. Navi-CTA
   In Kontakt treten = nav-item-39
   ========================================================== */

#nav-item-39 {
    color: #fff !important;
    background: var(--dw-turquoise);

    border-radius: 999px;
}


/* Herz vor dem Text */

#nav-item-39::before {
    content: "♡";

    display: inline-block;

    margin-right: .4rem;

    color: #fff;

    font-size: 1.15em;
    line-height: 1;
}


#nav-item-39:hover,
#nav-item-39:focus {
    color: #fff !important;
    background: var(--dw-turquoise-dark);
}


/* ==========================================================
   9. Hero
   ========================================================== */

/*
 * KEIN Grid.
 * KEINE Breiten.
 * KEINE Padding-/Margin-Regeln.
 *
 * Bootstrap Package soll Textpic komplett selbst rendern.
 */


/*
 * Hintergrund lediglich optisch behandeln.
 */

#c48 .frame-backgroundimage {
    background-position: center center;
    background-size: cover;
}


/*
 * Daniela + Störer PNG:
 * nur sicherstellen, dass Transparenz und Bildgröße
 * sauber bleiben.
 */

#c48 .textpic-gallery img {
    width: 100%;
    height: auto;
}


/*
 * Hero Eyebrow
 */

#c48 .textpic-text > p:first-child strong {
    color: #536c77;

    font-size: .78rem;
    font-family: "Lato", Arial, sans-serif;

    font-weight: 700;
    letter-spacing: .1em;
}


/*
 * Hero-Fließtext etwas kräftiger lesbar
 */

#c48 .lead {
    color: var(--dw-text);
}


/* ==========================================================
   10. Angebotskarten
   ========================================================== */

#c58 .card {
    border-color: rgba(24, 50, 71, .07);

    border-radius: .8rem;

    box-shadow:
        0 8px 26px rgba(24, 50, 71, .06);

    overflow: hidden;
}


#c58 .card-title {
    color: var(--dw-dark);
}


/*
 * Card-Bild sauber bis an den Rand
 */

#c58 .card-img-top,
#c58 .card-img-top img {
    border-radius: 0;
}


/*
 * "Mehr erfahren" wie im Scribble als ruhiger Textlink
 */

#c58 .card-footer {
    border-top: 0;
    background: #fff;
}


#c58 .card-footer .btn {
    color: var(--dw-turquoise);

    border: 0;

    background: transparent;

    box-shadow: none;
}


#c58 .card-footer .btn:hover {
    color: var(--dw-turquoise-dark);

    background: transparent;
}


/* ==========================================================
   11. Über mich
   ========================================================== */

/*
 * Nur Listenmarker gestalten.
 * Zweispalter bleibt komplett Bootstrap Package.
 */

#c61 .list-normal {
    list-style: none;
    padding-left: 0;
}


#c61 .list-normal li {
    position: relative;

    padding-left: 1.7rem;
}


#c61 .list-normal li::before {
    content: "✓";

    position: absolute;
    left: 0;

    color: var(--dw-turquoise);
}


/* ==========================================================
   12. Nutzenleiste
   ========================================================== */

#c64 {
    background: var(--dw-sage) !important;
}


#c64 .icongroup-item-icon {
    color: var(--dw-turquoise);
}


/*
 * SVGs übernehmen currentColor.
 */

#c64 .icongroup-item-icon svg {
    color: var(--dw-turquoise);
}


/*
 * kleine Texte hier sans-serif statt Cormorant
 */

#c64 .icongroup-item-text-header {
    font-family: "Lato", Arial, sans-serif;
    color: var(--dw-dark);

    font-weight: 700;
}


/* ==========================================================
   13. Termine
   ========================================================== */

#c69 .card-panel {
    border-color: rgba(24, 50, 71, .10);

    border-radius: .75rem;

    box-shadow:
        0 6px 20px rgba(24, 50, 71, .04);

    overflow: hidden;
}


#c69 .card-header {
    color: var(--dw-dark);

    background: var(--dw-sage);

    border-bottom-color: rgba(24, 50, 71, .06);

    font-family: "Cormorant Garamond", Georgia, serif;
}


/* ==========================================================
   14. Kontaktblock
   ========================================================== */

#c73 .frame-backgroundimage {
    background-position: center center;
    background-size: cover;

    /*
     * Parallax hier bewusst deaktivieren.
     * Kein Layout-Eingriff.
     */
    background-attachment: scroll !important;
}


/*
 * Buttons als helle Pills auf Strandfoto
 */

#c70 .btn-outline-primary {
    background: rgba(255, 255, 255, .9);

    border-radius: 999px;
}


#c70 .btn-outline-primary:hover {
    background: var(--dw-turquoise);
}


/* ==========================================================
   15. Footer
   ========================================================== */

#page-footer,
#page-footer .footer-section-content {
    color: var(--dw-text);

    background: #fff;
}


#page-footer a {
    color: var(--dw-text);
}


#page-footer a:hover {
    color: var(--dw-turquoise);
}


/*
 * Footerlogo
 */

#c71 img {
    width: auto;
    max-width: 210px;
    height: auto;
}


/*
 * Herz rechts unten
 */

#c75 img {
    width: 48px;
    height: auto;
}


/*
 * Claim
 */

#c75 .lead {
    color: var(--dw-text);

    font-size: .95rem;
}


/*
 * Unterer leerer/dunkler Bootstrap-Package-Metabereich:
 * dieser enthält derzeit keinen Inhalt.
 */

#page-footer .footer-section-meta:empty {
    display: none;
}


/* ==========================================================
   16. Mobile – NUR optische Anpassungen
   Bootstrap macht das Layout.
   ========================================================== */

@media (max-width: 767.98px) {

    #page-header .navbar-brand img {
        max-height: 54px;
    }

    h1,
    .h1 {
        font-size: clamp(2.7rem, 11vw, 3.5rem);
    }

    h2,
    .h2 {
        font-size: clamp(2rem, 8vw, 2.65rem);
    }


    /*
     * Navi CTA im geöffneten Burger nicht randlos.
     */

    #nav-item-39 {
        display: inline-flex;
        align-items: center;

        width: max-content;
    }

}

/* ==========================================================
   Hero Desktop:
   Daniela in das untere Frame-Padding hineinsetzen
   ========================================================== */

@media (min-width: 992px) {

    #c48 {
        overflow: hidden;
    }

    #c48 .textpic-gallery {
        position: relative;
        z-index: 2;

        /* entspricht ungefähr dem unteren Bootstrap-Frame-Padding */
        transform: translateY(3rem);
    }

    /* im aktuellen Stand einen Tick kleiner als jetzt */
    #c48 .textpic-gallery img {
        width: 92%;
        height: auto;
        margin-left: auto;
    }

}

/* ==========================================================
   Finetuning Header-CTA + Hero-Bild
   ========================================================== */

/* ------------------------------------------
   1. CTA oben rechts: etwas mehr links/rechts
   ------------------------------------------ */

#nav-item-39 {
    display: inline-flex;
    align-items: center;
    padding: .4rem 1.5rem !important;
    border-radius: 999px;
}

#nav-item-39::before {
    margin-right: .45rem;
}


/* ------------------------------------------
   2. Hero allgemein
   ------------------------------------------ */

#c48 {
    overflow: hidden;
}

#c48 .textpic-gallery {
    position: relative;
    z-index: 2;
}

#c48 .textpic-gallery img {
    display: block;
    height: auto;
}


/* ------------------------------------------
   3. Desktop: etwas kleiner und weiter runter
   ------------------------------------------ */

@media (min-width: 992px) {

    #c48 .textpic-gallery {
        transform: translateY(3rem);
    }

    #c48 .textpic-gallery img {
        width: 88%;
        max-width: 540px;
        margin-left: auto;
    }

}


/* ------------------------------------------
   4. Tablet: ebenfalls runter, aber etwas weniger
   ------------------------------------------ */

@media (min-width: 768px) and (max-width: 991.98px) {

    #c48 .textpic-gallery {
        transform: translateY(2.25rem);
    }

    #c48 .textpic-gallery img {
        width: 92%;
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
    }

}


/* ------------------------------------------
   5. Mobile: leicht runter + unten weich ausblenden
   ------------------------------------------ */

@media (max-width: 767.98px) {

    #c48 .textpic-gallery {
        transform: translateY(1rem);
    }

    #c48 .textpic-gallery img {
        width: 100%;
        max-width: 460px;
        margin-left: auto;
        margin-right: auto;

        /* weicher Auslauf nach unten */
        -webkit-mask-image: linear-gradient(
            to bottom,
            rgba(0,0,0,1) 0%,
            rgba(0,0,0,1) 78%,
            rgba(0,0,0,0) 100%
        );
        mask-image: linear-gradient(
            to bottom,
            rgba(0,0,0,1) 0%,
            rgba(0,0,0,1) 78%,
            rgba(0,0,0,0) 100%
        );
    }

}