@font-face {
    font-family: "avenir-medium";
    src: url("../fonts/avenir/avenir-medium-webfont-0XFxSh8.woff2") format("woff2"), url("../fonts/avenir/avenir-medium-webfont-oei2eNe.woff") format("woff");
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: "avenir-italic";
    src: url("../fonts/avenir/avenir-oblique-webfont-x4ci0g6.woff2") format("woff2"), url("../fonts/avenir/avenir-oblique-webfont-t-kyMIX.woff") format("woff");
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: "avenir-black";
    src: url("../fonts/avenir/avenir-black-webfont-TMrc-3D.woff2") format("woff2"), url("../fonts/avenir/avenir-black-webfont-Po5Zhzl.woff") format("woff");
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: "dreamingoutloud-regular";
    src: url("../fonts/dreaming-outloud/dreaming-outloud-script-09OOdN6.woff2") format("woff2");
    font-style: normal;
    font-weight: normal;
}

:root {
    --font-family-body: "avenir-medium", sans-serif;
    --font-family-header: "avenir-black", sans-serif;
    --font-family-dream: "dreamingoutloud-regular", sans-serif;
    --title-color: rgb(35,83,114);
    --primary-text-color: rgb(29,29,29);
    --background-color_contrast: rgb(243,242,238);
    --color-altrosa: rgb(217,133,133);
    --color-primary-darkblue: #225372;
    --color-primary-green: rgb(4,106,105);
    --color-primary-lightgreen: rgb(155,188,179);
    --color-primary-lightblue: rgb(90,166,199);
    --color-signal-red: rgb(174,15,10);
    --color-signal-violet: #5c2873;
    --color-signal-yellow: rgb(215,173,69);
}


.primary-lightblue {
    color: var(--color-primary-lightblue) !important;
}

.primary-green {
    color: var(--color-primary-green) !important;
}

.signal-red {
    color: var(--color-signal-red) !important;
}

.signal-violet {
    color: var(--color-signal-violet) !important;
}

.signal-yellow {
    color: var(--color-signal-yellow) !important;
}

body {
    font-family: var(--font-family-body);
    color: var(--primary-text-color);
    font-size: 1rem !important;
}

h1, h2, h3, h4, h5, h6, .title {
    font-family: var(--font-family-header);
    color: var(--title-color) !important;
    text-align: center;
    font-weight: normal;
}

.header-fixed #header {
    z-index: 2;
}

#header-img {
    z-index: -1;
    display: block;
    width: 100%;
    height: 520px;
    object-fit: cover;
    object-position: top;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(
        to bottom,
        black 0%,
        black 50%,
        rgba(0,0,0,0.2) 100%
    );
}



#website-title h1 {
    font-size: 2.8rem !important;
    line-height: 1;
    margin:0;
    padding: 0;
}

#website-title h2 {
    font-family: "Patrick Hand SC", cursive !important;
    font-weight: 400;
    font-style: normal;
    color: var(--color-signal-violet) !important;
    margin: 0;
    padding: 0;
}

.navbar-section li {
    font-size: 1.0rem;
}

#header .navbar-section li a:hover {
    font-family: var(--font-family-header);
    color: var(--color-primary-green) !important;
}

.navbar .logo, #overlay .mobile-logo {
    padding-left: 1em;
}

.mobile-menu .button_container span {
    background: var(--color-primary-green);
}

h1, h2 {
    font-size: 1.8rem !important;
}

h1, h2 {
    margin-bottom: 0.9em;
}

h4 {
    font-size: 1rem;
    text-align: left;
    color: var(--primary-text-color) !important;
}

p, li {
    text-align: left;
}

li {
    line-height: 1.25;
    margin: 0;
    padding: 0;
}

section.page{
    margin: 4em 0 4em 0;
}

.together-header {
    height: 520px;
}

.abschnitt {
    margin: 4em 0;
}


.trennlinie {
    width: 80%;
    margin: 0 auto;
    border-top: 1px solid var(--color-primary-darkblue);
}

strong {
    font-family: var(--font-family-header);
}

.contrast {
    padding: 1em 0 3em 0;
    background-color: var(--background-color_contrast);
}

.bg-altrosa {
    background-color: var(--color-altrosa);
}


/* Abschnitt mit Bild hinter dem Text */
.bild-hintergrund {
    position: relative; /* Wichtig: Verankert die absoluten Kinder */
    width: 100%;
    overflow: hidden;   /* Verhindert, dass das Bild rausragt */
    display: flex;       /* Optional: Um den Text-Content zu zentrieren */
    justify-content: center;
    align-items: center;
}

.back-img {
    position: absolute; /* Löst das Bild aus dem Textfluss */
    top: 5em;
    center: auto;
    max-width: 220px;
    object-fit: cover;   /* Sorgt dafür, dass das Bild nicht verzerrt */
    z-index: 1;          /* Schiebt das Bild ganz nach hinten */

    /* Falls du hier auch deinen Gradienten nutzen willst: */
    /*
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.3) 100%, rgba(0,0,0,0.3) 100%);

     */
}

.text-content {
    position: relative; /* Wichtig, damit z-index greift */
    z-index: 1;        /* Liegt ÜBER dem Hintergrundbild */
    text-align: center;
    background-color: rgb(255, 255, 255, 0.75);
}


.infokasten {
    padding: 1em 4em;
    background-color: var(--background-color_contrast);
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}

.flex-item {
    flex: 1 1 10em;
    min-width: 0;
}

.process {
    margin-bottom: 4em;
}

.process p {
    text-align: center;
}

.process-dots {
    text-align: center;
    height: 3em;
}

p.p-step {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.contact {
    padding: 2em 5em;
    color: white;
    text-align: center;
}

.contact h2, .contact p, .contact a {
    color: white !important;
    text-align: center;
}

.contact a {
    text-decoration: underline;
}

.contact a:hover {
    font-family: var(--font-family-header);
}

.unterschrift {
    margin: 3em;
}

.navbar {
    background-image: url("../images/header_navbar-DN7QgnG.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

.hero {
    padding-top: 1rem;
    padding-bottom: 2rem;
}

.social {
    margin-top: 1em;
    margin-bottom: 1em;
    border-top: 1px solid rgb(183, 203, 193);
    color: rgb(183, 203, 193);
    text-align: center;
}

.social ul {
    display: block;
}

.social li {
    display: inline;
    text-align: center;
}

.social a {
    color: rgb(183, 203, 193);
    text-decoration: underline;
}

.social img {
    width: 1em;
    vertical-align: middle;
}

.impressum h2, .datenschutz h2,
.impressum h3, .datenschutz h3
{
    text-align: left !important;
}