/* ===== GRUNDEINSTELLUNGEN & CSS-VARIABLEN ===== */
:root {
    /* Deine Farbcodes */
    --color-bg-gray: #B2AFAA;
    --color-bg-blue: #8AB8D0;
    --color-accent-pink: #FCB0D6;
    --color-text: #000000;
    --color-white: #FFFFFF;
    --color-light-gray: #f4f4f4;

    /* Deine Schriftfamilien */
    --font-logo: 'Beatrix Antiqua', serif;        /* Für das Logo */
    --font-body: 'TH Sarabun New', sans-serif;    /* Für den Fließtext ("Schönheit ist...") */
    --font-ui: 'Touvlo', sans-serif;              /* Für alle anderen UI-Texte */
    
    /* PLATZHALTER: Für die geschwungene Schrift. Ich setze eine Fallback-Schrift ein. */
    --font-slogan: 'Garamond', 'Times New Roman', serif;
}

/* ================================================
 WICHTIG: Lade deine Schriftarten 
================================================
Dieser Code lädt die Dateien, die du mir im Screenshot gezeigt hast.
*/

@font-face {
    font-family: 'Beatrix Antiqua';
    src: url('fonts/Beatrix Antiqua.ttf') format('truetype');
    font-weight: normal;
}
@font-face {
    font-family: 'TH Sarabun New';
    src: url('fonts/THSarabunNew.ttf') format('truetype');
    font-weight: normal;
}
@font-face {
    font-family: 'Touvlo'; /* Gleicher Name für beide */
    src: url('fonts/Touvlo-Regular.ttf') format('truetype');
    font-weight: normal; /* 400 */
}
@font-face {
    font-family: 'Touvlo'; /* Gleicher Name für beide */
    src: url('fonts/Touvlo-Bold.ttf') format('truetype');
    font-weight: bold; /* 700 */
}


/* ===== GLOBALE STILE & SMOOTH SCROLL ===== */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px; /* Höhe der fixen Navi, damit Sprungziele nicht verdeckt werden */
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body); /* Standard-Schrift ist dein Fließtext */
    color: var(--color-text);
    background-color: var(--color-white);
    font-size: 18px; 
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-ui); /* Alle Überschriften sind Touvlo */
    font-weight: bold; /* Und zwar Fett */
}

.section-title {
    font-size: 2.5em;
    text-align: center;
    margin-bottom: 40px;
    text-transform: uppercase;
}

/* ===== KOPFZEILE & NAVIGATION ===== */
header {
    width: 100%;
}

.top-bar {
    background-color: var(--color-light-gray);
    text-align: center;
    padding: 8px 0;
    font-size: 14px;
    font-family: var(--font-ui); /* Touvlo */
    font-weight: normal; /* Regular */
    border-bottom: 1px solid #ddd;
}

.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5%;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    width: 90%; 
    
    position: sticky; /* Bleibt oben kleben */
    top: 0;
    z-index: 1000;
}

.main-nav .logo {
    font-family: var(--font-logo); /* Beatrix Antiqua */
    font-size: 24px;
    text-decoration: none;
    color: var(--color-text);
    font-weight: normal;
}

.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 30px;
}

.main-nav a {
    text-decoration: none;
    color: var(--color-text);
    font-family: var(--font-ui); /* Touvlo */
    font-weight: bold; /* Bold */
    font-size: 16px;
    text-transform: uppercase;
    transition: color 0.3s;
}

.main-nav a:hover {
    color: var(--color-accent-pink);
}

/* ===== HOME-SEKTION (SLIDER) ===== */
#home {
    width: 100%;
    position: relative;
    overflow: hidden;
    height: 90vh; 
}

.slider-container {
    width: 200%; /* 100% pro Slide */
    height: 100%;
    display: flex;
    transition: transform 0.8s ease-in-out;
}

.slide {
    width: 50%; 
    height: 100%;
    display: flex;
    flex-shrink: 0; 
}

.slide-text {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 5%;
    box-sizing: border-box; 
    text-align: center;
}

.slide-image {
    width: 50%;
    height: 100%;
}

.slide-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
}

/* Stile für den Text im Hero-Slider */
.hero-title {
    font-family: var(--font-ui); /* Touvlo */
    font-weight: bold; /* Bold */
    font-size: 4em;
    margin: 0;
}
.hero-slogan {
    font-family: var(--font-slogan); /* FALLBACK: Garamond Italic */
    font-style: italic; /* Macht die Schrift kursiv */
    font-size: 2.5em;
    margin: 10px 0;
}
.hero-subtext {
    font-family: var(--font-ui); /* Touvlo */
    font-weight: normal; /* Regular */
    font-size: 1.1em;
    margin: 10px 0;
}

/* Slider-Navigation (Punkte) */
.slider-nav {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    z-index: 100;
}

.slider-nav a {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s;
}

.slider-nav a:hover {
    background-color: rgba(0, 0, 0, 0.6);
}

/* CSS-Logik für den Slider-Wechsel */
#home:has(#slide-1:target) .slider-container { transform: translateX(0%); }
#home:has(#slide-2:target) .slider-container { transform: translateX(-50%); }

/* Aktiven Punkt hervorheben */
#home:has(#slide-1:target) .slider-nav a[href="#slide-1"],
#home:has(#slide-2:target) .slider-nav a[href="#slide-2"] {
    background-color: var(--color-text);
}


/* ===== ABOUT US SEKTION ===== */
.content-section {
    padding: 80px 15%; 
    text-align: center;
}
.content-section p {
    max-width: 800px;
    margin: 0 auto 20px auto;
    font-family: var(--font-body); /* TH Sarabun New */
    font-size: 1.2em;
}
.signature {
    text-align: right;
    font-style: italic;
    font-family: var(--font-body); /* TH Sarabun New */
    font-size: 1.2em;
}

/* ===== BEHANDLUNGEN-GRID SEKTION ===== */
.treatments-bg {
    background-color: var(--color-light-gray); /* Heller Hintergrund für Abwechslung */
}

.treatment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 50px;
}

.treatment-card {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    text-decoration: none;
    color: var(--color-white);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.treatment-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.treatment-card:hover img {
    transform: scale(1.1); /* Zoom-Effekt */
}

.card-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--font-ui); /* Touvlo */
    font-weight: bold; /* Bold */
    font-size: 1.5em;
    text-align: center;
    padding: 10px;
    transition: background-color 0.3s;
}

.treatment-card:hover .card-overlay {
    background-color: rgba(0, 0, 0, 0.7);
}

/* ===== BEHANDLUNGEN-DETAILS SEKTIONEN ===== */
.treatment-detail {
    padding: 60px 10%;
    text-align: center;
}
/* Rosa Hintergrund für Abwechslung */
.treatment-detail.alt-bg {
    background-color: var(--color-accent-pink);
    color: var(--color-text);
}

.treatment-detail h3 {
    font-size: 2.2em;
    margin-bottom: 30px;
}
.treatment-detail ul {
    list-style: none;
    padding: 0;
    max-width: 600px;
    margin: 0 auto;
    font-family: var(--font-ui); /* Touvlo */
    font-weight: bold; /* Bold */
    font-size: 1.1em;
}
.treatment-detail li {
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
.treatment-detail li:last-child {
    border-bottom: none;
}
.treatment-description {
    max-width: 800px;
    margin: 0 auto;
    font-family: var(--font-body); /* TH Sarabun New */
    font-size: 1.2em;
}


/* ===== FUSSZEILE (KONTAKT) ===== */
/* ----- HIER BEGINNEN DIE ÄNDERUNGEN ----- */

/* Der <footer> ist jetzt der weiße Außencontainer */
footer {
    background-color: var(--color-white); /* Weißer Hintergrund */
    color: var(--color-text);
    padding: 60px 10%; /* Dies erzeugt den weißen "Rahmen" */
}

/* Der neue innere Container, der ROSA ist */
.footer-inner-container {
    background-color: var(--color-accent-pink); /* ROSA HINTERGRUND */
    padding: 40px; /* Innenabstand im rosa Kasten */
    border-radius: 10px; /* Schöne abgerundete Ecken */
}

/* Die Überschrift "CONTACTS" im rosa Kasten */
footer .section-title {
    color: var(--color-text); /* Schwarze Schrift */
    margin-bottom: 20px; /* Weniger Abstand nach unten */
}

/* Der Intro-Text, jetzt ZENTRIERT */
.contact-intro {
    font-family: var(--font-slogan); /* FALLBACK: Garamond Italic */
    font-style: italic;
    font-size: 1.8em;
    color: var(--color-text); /* Schwarz */
    margin-bottom: 40px; /* Abstand zu den Spalten darunter */
    text-align: center; /* ZENTRIERT */
}

/* Der 2-Spalten-Container (Text & Karte) */
.footer-content {
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-between; 
    align-items: center;
    gap: 40px;
    text-align: left; 
}

.contact-details {
    flex: 1; 
    min-width: 300px;
    font-family: var(--font-ui); /* Touvlo */
    font-weight: normal; /* Regular */
}

.map {
    flex: 1; 
    min-width: 300px;
    max-width: 500px;
}
.map img {
    width: 100%;
    border-radius: 5px;
    border: 2px solid var(--color-white); /* Weißer Rand um die Karte */
}

/* Stile für den restlichen Kontakttext */
.contact-time {
    font-size: 1.2em;
    margin-bottom: 20px;
}
.contact-insta {
    font-size: 1.2em;
    margin-top: 20px;
}

/* Der Copyright-Text, jetzt im weißen Außencontainer */
.footer-bottom {
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid #eee; /* Hellgraue Trennlinie */
    text-align: center;
    font-size: 14px;
    color: #888; /* Hellgraue Schrift */
    font-family: var(--font-body); /* TH Sarabun New */
}
/* ----- HIER ENDEN DIE ÄNDERUNGEN ----- */