/* ========== BASIS / GLOBALE STILE ========== */

/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Custom Fonts */
@font-face {
font-family: 'Playfair Display';
src: url('fonts/PlayfairDisplay-Regular.woff2') format('woff2');
font-weight: 700;
}
@font-face {
font-family: 'Brother 1816 Medium';
src: url('fonts/Brother1816-Medium.woff2') format('woff2');
font-weight: 700;
}
@font-face {
font-family: 'Brother 1816 Regular';
src: url('fonts/Brother1816-Regular.woff2') format('woff2');
font-weight: 400;
}
@font-face {
font-family: 'Brother 1816 Light';
src: url('fonts/Brother1816-Light.woff2') format('woff2');
font-weight: 300;
}
@font-face {
font-family: 'Roboto Regular';
src: url('fonts/roboto-regular.woff2') format('woff2');
font-weight: 400;
}
@font-face {
font-family: 'Roboto Light';
src: url('fonts/roboto-light.woff2') format('woff2');
font-weight: 300;
}
@font-face {
font-family: 'Menlo Regular';
src: url('fonts/menlo-regular.woff2') format('woff2');
font-weight: 300;
}

/* Desktop-Default: Hamburger & X ausblenden */
.hamburger,
.close-btn {
display: none;
}

/* Header allgemein */
.header {
width: 100%;
max-width: 1440px;
margin: 0 auto;
background-color: #ffffff;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
z-index: 1000;
text-align: center;
padding: 0.5em 0;
position: fixed;
top: 0;
left: 0;
right: 0;
}

.header-h1 {
font-family: 'Brother 1816 Light', sans-serif;
font-size: clamp(1.2rem, 3vw, 1.6rem);
padding-bottom: 0.2em;
}

.header-h2 {
font-family: 'Playfair Display', serif;
font-size: clamp(1.4rem, 4vw, 2.0rem);
padding-bottom: 0.4em;
}

.haarlinie {
width: 40%;
height: 1px;
background-color: #000;
margin: 0 auto 0.3em;
}

/* Navigation */
.navigation {
text-align: center;
padding-top: 0.5em;
padding-bottom: 0.5em;
}

.navi-liste {
list-style: none;
padding: 0;
margin: 0;
display: inline-flex;
gap: 2em;
justify-content: center;
}

.navi-liste li a {
font-family: 'Roboto Light', sans-serif;
text-decoration: none;
color: #333;
font-size: clamp(1rem, 2.5vw, 1.2rem);
padding: 0.5em;
transition: color 0.3s ease;
}

.navi-liste li a:hover {
color: #007bff;
}

/* Spacer für fixierten Header */
#header-spacer {
width: 100%;
height: 0;
}

/* Sanftes Scroll-Verhalten */
html {
scroll-behavior: smooth;
}

/* Angebot-Section */
.angebot-section {
width: 100%;
max-width: 1440px;
margin: 0 auto;
display: flex;
justify-content: center;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
background-color: #fff;
flex-direction: column;
align-items: center;
gap: 2em;
padding: 2em;
}

.angebot-header h2 {
text-align: center;
font-family: 'Playfair Display', serif;
font-size: clamp(1.5rem, 4vw, 1.5rem);
padding-top: 1.5%;
padding-bottom: 1.5%;
}

.box1 {
border-radius: 10px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
background-color: #fff;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
font-family: 'Brother 1816 Light', sans-serif;
font-size: 1.25em;
padding: 1.5em;
max-width: 40%;
height: auto;
margin-bottom: 1em;
}

.box1 h3 {
font-family: 'Brother 1816 Light', sans-serif !important;
font-size: 1em !important;
line-height: 1.6 !important;
font-weight: normal !important;
text-align: left !important;
padding-top: 0.5em!important;
padding-left: 0.25em!important;
}

.box1 ul {
margin: 0;
padding: 0 0 0 1.25em;
line-height: 1.6;
}

.box1 ul li {
margin: 0;
padding: 0;
line-height: 1.6;
}

.box1 p {
margin: 0;
padding: 0;
line-height: 1.6;
}

/* Inhalt-Angebot (Box2, Box3) */
.angebot-content {
display: flex;
justify-content: center;
gap: 2em;
width: 100%;
align-items: flex-start; /* Wichtig, damit Box1 nicht „gestretcht“ wird */
}

.box-container {
display: flex;
flex-direction: column;
align-items: center;
width: 25%;
}

.box2,
.box3 {
border-radius: 10px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
background-color: #fff;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
font-family: 'Brother 1816 Light', sans-serif;
width: 100%;
padding: 0em;
height: auto;
margin-bottom: 0.5em;
}

.bild-container {
width: 100%;
}

.bild-container img {
width: 100%;
height: auto;
border-radius: 10px 10px 0 0;
display: block;
margin: 0;
}

.box2 h3,
.box3 h3 {
color: #0F330F;
margin-top: 1em;
margin-bottom: 0.2em;
font-family: 'Playfair Display', serif;
font-size: 1.5em;
}

.kontakt-info {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.5em;
padding: 1.5em;
font-size: 1.0em;
}

.kontakt-info div {
display: flex;
align-items: center;
gap: 0.5em;
}

.kontakt-info img {
width: 24px;
height: 24px;
object-fit: contain;
margin-right: 0.5em;
}

.nachricht {
font-style: italic;
margin: 1em;
text-align: left;
}

.jameda-logo img {
max-width: 50%;
height: auto;
padding-bottom: 1.5em;
}

/* Buttons (optional, momentan auskommentiert) */
.button-container {
margin-top: 2em;
text-align: center;
}

.button-bella,
.button-chrisch {
background-color: #f5f5f5;
border: 1px solid #ccc;
padding: 1em;
border-radius: 5px;
font-family: 'Brother 1816 Regular', sans-serif;
cursor: pointer;
transition: background-color 0.3s ease;
width: 100%;
text-align: center;
}

.button-bella:hover,
.button-chrisch:hover {
background-color: #e0e0e0;
}

/* Kosten-Section */
.kosten {
display: flex;
flex-direction: column;
gap: 2em;
padding: 2em;
background-color: white;
width: 100%;
max-width: 1440px;
margin: 0 auto;
font-family: 'Brother 1816 Regular', sans-serif;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

.kosten h2 {
text-align: center;
font-family: 'Playfair Display', serif;
font-size: clamp(1.5rem, 4vw, 1.5rem);
padding-top: 1.5%;
padding-bottom: 1.5%;
}

.kosten-row {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 2em;
flex-wrap: wrap;
}

.kosten-text {
font-family: 'Brother 1816 Light', sans-serif;
flex: 0 1 45%;
background-color: white;
border-radius: 1em;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
padding: 2em;
font-size: 1.25em;
color: #333;
text-align: left;
line-height: 1.6;
}

.kosten-text h3 {
font-family: 'Brother 1816', sans-serif;
font-size: 1.0em;
margin-bottom: 1em;
color: #333;
text-align: center;
}

.kosten-text p {
margin: 0;
width: 100%;
}

/* Sprechzeiten */
.sprechzeiten-box {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
background-color: white;
border-radius: 1em;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
padding: 1em;
font-size: 1em;
color: #555;
line-height: 1.6;
text-align: left;
margin-bottom: 0;
flex-grow: 0;
}

.sprechzeiten-box h2,
.sprechzeiten-box h3 {
font-family: 'Brother 1816 Regular', sans-serif;
font-size: 1.5em;
margin-bottom: 0.5em;
color: #333;
text-align: center;
}

.sprechzeiten-box p {
font-size: 1.0em;
color: #555;
line-height: 1.6;
margin-bottom: 1em;
}

.sprechzeiten-box strong {
font-weight: bold;
color: #333;
}

/* Zweite Zeile */
.kosten-preise-row {
display: flex;
justify-content: center;
gap: 1em;
flex-wrap: wrap;
align-items: stretch;
margin-top: 2%;
padding-bottom: 2%;
}

.kosten-preise {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
flex: 1 1 20%;
max-width: 250px;
background-color: #edede9;
border-radius: 1em;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
padding: 1.5em;
color: #333;
}

.erstgespraech-box .erstgespraech-titel {
font-family: 'Brother 1816', sans-serif;
font-size: 1.0em!important;
text-align: center;
display: block;
margin-bottom: 0.5em;
}

.erstgespraech-box .erstgespraech-preis {
font-family: 'Menlo Regular', monospace;
font-weight: bold;
font-size: 2em;
text-align: center;
display: block;
}

.erstgespraech-box .erstgespraech-info {
font-size: 1em;
color: #555;
text-align: center;
display: block;
margin-top: 0.25em;
}

.preis {
margin-bottom: 0.5em;
}

.info-text {
margin-bottom: 1em;
font-size: 2em;
}

.kosten-preise hr {
width: 100%;

border: none;
border-top: 2px solid #909090;
border-radius: 2px;
margin: 1em 0;
align-self: stretch;
}

/* Über uns */
.ueber-uns {
background-color: white;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
width: 100%;
max-width: 1440px;
margin: 0 auto;
text-align: center;
gap: 2em;
padding: 2em;
}

.ueber-uns h2 {
font-family: 'Playfair Display', serif;
font-size: clamp(1.5rem, 4vw, 1.5rem);
padding-top: 1.5%!important;
padding-bottom: 1.5%!important;
}

.ueber-uns-text {
font-family: 'Brother 1816 Light', sans-serif;
line-height: 1.5;
color: #333;
font-size: 1.25em;
background-color: white;
padding: 1.5em;
margin-bottom: 2em;
border-radius: 1em;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
text-align: left;
max-width: 65%;
margin: 0 auto 2em auto;
}

.ueber-uns-person {
display: flex;
flex-direction: column;
gap: 2em;
align-items: center;
}

.person-box {
background-color: white;
border-radius: 1em;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
display: flex;
overflow: hidden;
align-items: stretch;
width: 65%;
}

.person-content {
display: flex;
flex-grow: 1;
align-items: stretch;
}

.person-image {
flex: 0 0 auto;
width: 25%;
display: flex;
align-items: center;
margin-right: 4%;
}

.person-image img {
width: 100%;
height: 100%;
object-fit: cover;
border-top-left-radius: 1em;
border-bottom-left-radius: 1em;
}

.person-text {
flex: 1;
line-height: 1.5em;
text-align: left;
padding: 1em 1em 1em 0;
display: flex;
flex-direction: column;
justify-content: center;
font-family: 'Brother 1816 Light', sans-serif;
color: #333;
font-size: 1.0em;
}

.person-text ul {
padding-left: 4%;
}

/* FAQ */
.fragen {
width: 1440px;
max-width: 100%;
margin: 0 auto;
display: flex;
justify-content: center;
gap: 2em;
padding: 2em;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
background-color: #fff;
flex-direction: column;
align-items: center;
padding-bottom: 5%;
}

.faq-section h2 {
text-align: center;
font-family: 'Playfair Display', serif;
font-size: clamp(1.5rem, 4vw, 1.5rem);
padding-top: 1.5%;
padding-bottom: 5%;
}

.faq-container {
display: flex;
flex-direction: column;
gap: 1em;
}

.faq-item {
border: 1px solid #ddd;
border-radius: 5px;
overflow: hidden;
}

h3.faq-question {
font-family: 'Brother 1816', sans-serif;
font-size: 1em;
line-height: 1.5;
text-align: left;
background-color: #f9f9f9;
padding: 1em;
margin: 0;
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
max-width: 100%;
width: 800px;
}

h3.faq-question:hover {
background-color: #e0e0e0;
}

.faq-answer {
font-family: 'Brother 1816 Light', sans-serif;
font-size: 1em;
line-height: 1.6;
padding: 1em;
display: none;
background-color: #fff;
max-width: 100%;
width: 800px;
text-align: left;
}

.faq-item.active .faq-answer {
display: block;
}

/* Paartherapie */
.paartherapie {
width: 1440px;
max-width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 2em;
background-color: white;
padding: 2em;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
margin: 0 auto;
}

.paartherapie h2 {
text-align: center;
font-family: 'Playfair Display', serif;
font-size: clamp(1.5rem, 4vw, 1.5rem);
margin-bottom: 1.5%;
}

.paartherapiebild {
max-width: 30%;
align-self: center;
}

.paartherapiebild img {
width: 100%;
height: auto;
border-radius: 10px;
}

.paartherapietext {
max-width: 60%;
font-family: 'Brother 1816 Light', sans-serif;
font-size: 1.2em;
line-height: 1.6;
color: #333;
text-align: center;
align-self: center;
padding-bottom: 1.5%;
}

/* Footer */
.footer {
background-color: #edede9;
color: #000000;
padding: 2em 2%;
font-family: 'Brother 1816 Light', sans-serif;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
max-width: 1440px;
margin: 0 auto;
}

.footer-container {
display: flex;
justify-content: space-between;
align-items: flex-start;
max-width: 1440px;
margin: 0 auto;
padding: 0 2%;
}

.linkes-segment {
display: flex;
flex-direction: column;
align-items: flex-end;
width: 45%;
text-align: right;
}

.Intro,
.Outro {
font-family: 'Brother 1816', sans-serif;
font-size: clamp(0.9em, 1.0vw, 1.0em);
font-weight: 700;
margin-bottom: 1em;
}

.Bella-Chrisch {
display: flex;
flex-direction: row;
justify-content: flex-end;
gap: 2em;
font-size: clamp(0.9em, 1.0vw, 1.0em);
margin-bottom: 1em;
width: 100%;
}

.Bella,
.Chrisch {
text-align: right;
width: auto;
}

.Adresse {
margin-bottom: 1em;
}

.rechtes-segment {
width: 45%;
text-align: left;
margin-top: 0;
padding-top: 0;
font-size: clamp(0.9em, 1.5vw, 1.0em);
}

.footer p,
.footer a {
font-size: clamp(0.9em, 1.5vw, 1em);
line-height: 1.5em;
}

.footer a {
color: #c61843;
text-decoration: none;
}

.footer a:hover {
text-decoration: underline;
}

/* Impressum */
.impressum {
background-color: white;
padding: 2em;
padding-top: 2em;
padding-bottom: 2em;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
width: 100%;
max-width: 1440px;
margin-left: auto;
margin-right: auto;
font-family: 'Brother 1816', sans-serif;
}

.impressum h1 {
text-align: center;
font-size: clamp(0.9em, 1.5vw, 2.5em);
font-weight: bold;
margin-bottom: 1.5em;
}

.impressum-inhalt {
width: 40%;
margin-left: auto;
margin-right: auto;
text-align: left;
}

.impressum-inhalt p {
margin-bottom: 1.5em;
font-size: clamp(0.7em, 1.5vw, 1.1em);
line-height: 1.6;
}

.impressum-inhalt strong {
font-weight: bold;
}

.impressum-inhalt a {
color: #007bff;
text-decoration: none;
}

.impressum-inhalt a:hover {
text-decoration: underline;
}

/* Datenschutz */
.datenschutz {
background-color: white;
padding: 2em;
padding-bottom: 2em;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
width: 1440px;
margin-left: auto;
margin-right: auto;
font-family: 'Brother 1816', sans-serif;
}

.datenschutz h1 {
text-align: center;
font-size: clamp(0.9em, 1.5vw, 2.5em);
font-weight: bold;
margin-bottom: 1.5em;
}

.datenschutz-inhalt {
width: 60%;
margin-left: auto;
margin-right: auto;
text-align: left;
}

.datenschutz-inhalt p {
margin-bottom: 1.5em;
font-size: clamp(0.7em, 1.5vw, 1.1em);
line-height: 1.6;
}

.datenschutz-inhalt strong {
font-weight: bold;
}

.datenschutz-inhalt a {
color: #007bff;
text-decoration: none;
}

.datenschutz-inhalt a:hover {
text-decoration: underline;
}


/* ========== DESKTOP-STYLES (min-width: 769px) ========== */
@media (min-width: 769px) {
#angebot {
scroll-margin-top: 10em;
}
#kosten {
scroll-margin-top: 10em;
}
#ueber-uns {
scroll-margin-top: 13em;
}
#faq {
scroll-margin-top: 13em;
}
#paartherapie {
scroll-margin-top: 10em;
}
}


/* ========== MOBILE-STYLES (max-width: 768px) ========== */
@media (max-width: 768px) {

#angebot,
#kosten,
#ueber-uns,
#faq,
#paartherapie {
scroll-margin-top: 5em;
}

.header {
padding: 1em;
position: sticky;
top: 0;
z-index: 999;
background-color: #fff;
}

#header-spacer {
display: none;
}

.logo {
margin-left: -2.0em;
}

.navigation {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.85);
z-index: 10000;
}

.hamburger {
display: block;
position: absolute;
top: 45%;
right: 1em;
font-size: 1.5rem;
cursor: pointer;
z-index: 10001;
}

.navigation.open {
display: block;
}

.close-btn {
position: absolute;
top: 2em!important;
right: 1em;
font-family: 'Brother 1816 Regular', sans-serif;
font-size: 2rem;
font-weight: 700;
color: #fff;
cursor: pointer;
z-index: 10001;
}

.navi-liste {
position: absolute;
top: 2em!important;
left: 0;
right: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5em;
margin: 0;
padding: 0;
}

.navi-liste li a {
margin-top: 1.5em;
color: #fff;
font-size: 1.5rem;
}

.navigation.open ~ .hamburger {
display: none;
}

.haarlinie {
display: none;
}

.header-h1 {
font-size: clamp(1.2rem, 4vw, 1.4rem);
}

.header-h2 {
font-size: clamp(1rem, 3vw, 1.2rem);
}

.angebot-content {
flex-direction: column!important;

align-items: center!important;
}

.sprechzeiten-box {
width: 100%!important;
}

.kosten {
flex-direction: column!important;
align-items: center!important;
}

.kosten-row {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
width: 100% !important;
max-width: none !important;
}

.kosten-row .kosten-text {
width: 100% !important;
max-width: none !important;
flex: none !important;
margin: 0 auto !important;
}

.angebot-content,
.box-container,
.box1,
.box2,
.box3,
.kosten-row,
.ueber-uns-text,
.person-content,
.person-box,
.bild-container {
width: 100% !important;
max-width: none !important;
}

.person-box {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
width: 100% !important;
height: auto !important;
overflow: visible !important;
}

.person-content {
display: block !important;
width: 100% !important;
height: auto !important;
overflow: visible !important;
}

.person-image {
width: 100% !important;
overflow: visible !important;
}

.person-image img {
width: 100% !important;
height: auto !important;
object-fit: cover;
border-top-left-radius: 1em!important;
border-top-right-radius: 1em!important;
border-bottom-left-radius: 0!important;
border-bottom-right-radius: 0!important;
}

.person-text {
display: block !important;
width: 90% !important;
max-width: none !important;
margin: 1em auto !important;
text-align: left !important;
height: auto !important;
color: #333 !important;
overflow: visible !important;
z-index: 999 !important;
}

.ueber-uns h2 {
padding-bottom: 10%!important;
}

.faq-section,
.faq-container,
.faq-item,
.faq-question,
.faq-answer {
width: 100% !important;
max-width: none !important;
margin: 0 auto !important;
padding: 0.5em !important;
}

.faq-question {
font-size: clamp(1rem, 3vw, 1.2rem) !important;
}

.faq-answer {
font-size: clamp(0.9rem, 2.5vw, 1.1rem) !important;
line-height: 1.5 !important;
}

.faq-item {
margin-bottom: 0em !important;
}

.paartherapiebild {
max-width: 100%!important;
align-self: center!important;
}

.paartherapiebild img {
width: 100%;
height: auto;
align-self: center!important;
border-radius: 10px;
}

.paartherapietext {
max-width: 90%!important;
}

.Bella-Chrisch {
flex-direction: column !important;
align-items: flex-end !important;
gap: 0.5em !important;
}
}

@media (min-width: 769px) and (max-width: 1023px) {
.kosten-preise-row {
flex-direction: column !important;
align-items: center !important;
}

.kosten-row,
.kosten-preise-row {
flex-direction: column !important;
align-items: center !important;
}

.sprechzeiten-box,
.kosten-text,
.kosten-preise {
width: 80% !important;
max-width: 40% !important;
margin-bottom: 2em !important;
}

.ueber-uns-text {
width: 80% !important;
max-width: 80% !important;
margin: 0 auto 2em auto !important;
}

.person-box {
width: 80% !important;
max-width: 80% !important;
margin: 0 auto 2em auto !important;
}

.box-container {
width: auto !important;
max-width: 100% !important;
}

.angebot-content {
flex-direction: column !important;
align-items: center !important;
}

.box1,
.box2,
.box3 {
width: 80% !important;
max-width: 80% !important;
margin-bottom: 2em !important;
}
}	
@media (max-width: 769px) {
.kosten-preise-row {
flex-direction: column !important;
align-items: center !important;
}
}