/* =========================
   GRUNDSTIL
========================= */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Poppins", sans-serif;
    color: #222;
    background: #fff;
}

h1,
h2,
h3 {
    font-family: "Cormorant Garamond", serif;
}

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

img {
    width: 100%;
    display: block;
}



/* =========================
   NAVBAR
========================= */

header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}


.navbar {

    height: 90px;
    padding: 0 8%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(10px);

}


.logo img {

    width: 120px;

}



.navbar ul {

    display: flex;
    list-style: none;
    gap: 35px;

}



.navbar ul a {

    color: white;
    font-size: 15px;
    transition: .3s;

}



.navbar ul a:hover {

    color: #c9a227;

}



.book-btn {

    background: #c9a227;
    color:white;

    padding: 13px 25px;

    transition:.3s;

}



.book-btn:hover {

    background:white;
    color:#111;

}



/* =========================
   HERO
========================= */


.hero {

    height:100vh;

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    overflow:hidden;

}



/* Hintergrundbild */

.hero-image {

    position:absolute;

    inset:0;

    background:
    url("images/stockhome.jpg")
    center/cover;

    opacity:0.5;

}



/* dunkle Überlagerung */

.hero-overlay {

    position:absolute;

    inset:0;

    background:
    rgba(0,0,0,0.55);

}



.hero-content {

    position:relative;

    z-index:2;

    color:white;

    max-width:850px;

}



.hero-content h3 {

    font-size:28px;

    letter-spacing:4px;

}



.hero-content h1 {

    font-size:80px;

    margin:20px 0;

}



.hero-content span {

    color:#c9a227;

}



.hero-content p {

    font-size:20px;

    line-height:1.7;

    margin-bottom:40px;

}

/* =========================
   HERO BUTTON
========================= */


.hero-button {

    display:inline-block;

    background:#c9a227;

    color:white;

    padding:15px 40px;

    transition:.3s;

}


.hero-button:hover {

    background:white;

    color:black;

}

/* =========================
   ALLGEMEIN
========================= */


.container {

    width:85%;
    margin:auto;

    display:flex;
    gap:60px;

    align-items:center;

}



section {

    padding:100px 8%;

}



section h2 {

    text-align:center;

    font-size:55px;

    margin-bottom:60px;

}



/* =========================
   ABOUT
========================= */


.about {

    background:#faf7f0;

}



.about-image,
.about-text {

    flex:1;

}



.about-image img {

    border-radius:15px;

}



.about-text h2 {

    text-align:left;

    margin-bottom:25px;

}



.about-text p {

    margin-bottom:20px;

}



/* =========================
   LEISTUNGEN
========================= */


.services {

    text-align:center;

}



.service-grid {

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

    gap:30px;

}



.service-card {

    padding:35px;

    background:#fff;

    box-shadow:
    0 10px 30px rgba(0,0,0,.1);

    transition:.3s;

    text-decoration:none;

    color:#222;

    display:block;

}



.service-card:hover {

    transform:translateY(-10px);

}



.service-card i {

    font-size:40px;

    color:#c9a227;

}



.service-card h3 {

    font-size:30px;

    margin:20px 0;

}



.service-card ul {

    list-style:none;

}



/* =========================
   TEAM
========================= */


.team {

    background:#faf7f0;
    text-align:center;

}


.team-container {

    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:60px;
    flex-wrap:wrap;

}


.team-member {

    width:280px;

}


.team-member img {

    width:250px;
    height:250px;

    object-fit:cover;

    border-radius:50%;

    margin:auto;

}


.team-member h3 {

    margin-top:20px;

    font-size:30px;

}


.team-member p {

    margin-top:10px;

    color:#555;

}



/* =========================
   VORTEILE
========================= */


.advantages {

    text-align:center;

}



.advantage-grid {

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:40px;

}



.advantage i {

    color:#c9a227;

    font-size:45px;

}



.advantage h3 {

    font-size:30px;

}



/* =========================
   GALERIE
========================= */


.gallery {

    background:#faf7f0;

}



.gallery-grid {

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

}



.gallery-grid img {

    height:300px;

    object-fit:cover;

}



/* =========================
   BEWERTUNGEN
========================= */


.review-grid {

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}



.review-card {

    padding:35px;

    box-shadow:
    0 5px 25px rgba(0,0,0,.1);

}



.stars {

    color:#c9a227;

    font-size:25px;

}

/* =========================
   GOOGLE BEWERTUNGEN
========================= */


.reviews {

    background:#faf7f0;
    text-align:center;

}


.reviews-container {

    max-width:1100px;
    margin:auto;

}



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


.appointment {

    background:

    linear-gradient(
    rgba(0,0,0,.7),
    rgba(0,0,0,.7)
    ),

    url("images/appointment.jpg")
    center/cover;


    color:white;

    text-align:center;

}



.appointment h2 {

    color:white;

}



/* =========================
   KONTAKT
========================= */


.contact {

    background:#faf7f0;

}



.contact-top {

    display:grid;

    grid-template-columns:1fr 1.3fr;

    gap:60px;

    align-items:center;

}



.contact h2 {

    font-size:40px;

    text-align:left;

    margin-bottom:35px;

}




.contact-item {

    display:flex;

    gap:20px;

    margin-bottom:25px;

}



.contact-item i {

    color:#c9a227;

    font-size:25px;

    width:30px;

}



.contact-item p {

    line-height:1.6;

}




/* Karte */


.map iframe {

    width:100%;

    height:450px;

    border:0;

}




/* Formular */


.contact-form {

    margin-top:70px;

    max-width:900px;

    margin-left:auto;

    margin-right:auto;

    background:white;

    padding:40px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.1);

}



.contact-form h2 {

    text-align:center;

}



.contact-form input,
.contact-form textarea {

    width:100%;

    padding:15px;

    margin-bottom:15px;

    border:1px solid #ddd;

    font-family:"Poppins", sans-serif;

}



.contact-form textarea {

    height:140px;

    resize:none;

}



.contact-form button {

    width:100%;

    padding:15px;

    background:#c9a227;

    color:white;

    border:none;

    cursor:pointer;

    transition:.3s;

}



.contact-form button:hover {

    background:#111;

}


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


footer {

    background:#111;

    color:white;

    text-align:center;

    padding:40px;

}



.footer-logo img {

    width:130px;

    margin:auto;

}



.footer-links {

    margin-top:20px;

}



.footer-links a {

    margin:0 15px;

}



/* =========================
   MOBILE
========================= */





@media(max-width:900px){


.navbar ul {

    display:none;

}


.hero-content h1 {

    font-size:45px;

}



.container {

    flex-direction:column;

}



.contact-top {

    grid-template-columns:1fr;

}



.advantage-grid,
.review-grid {

    grid-template-columns:1fr;

}



.gallery-grid {

    grid-template-columns:repeat(2,1fr);

}



section h2 {

    font-size:40px;

}


}


/* =========================
   IMPRESSUM / RECHTLICHE SEITEN
========================= */


.legal-page {

    max-width:900px;
    margin:auto;

    padding:150px 8% 80px;

}


.legal-page h1 {

    font-size:60px;
    text-align:center;

    margin-bottom:50px;

}


.legal-page h2 {

    text-align:left;

    font-size:30px;

    margin-top:35px;

}


.legal-page p {

    margin-top:15px;

    line-height:1.8;

}

/* =========================
   WARUM WIR / QUALITÄT
========================= */


.about-quality {

    max-width:900px;

    margin:auto;

    text-align:center;

}


.about-quality h2 {

    margin-bottom:40px;

}



.about-quality p {

    margin-bottom:20px;

    font-size:18px;

}



.certificate-button {

    margin-top:25px;

    padding:15px 35px;

    border:none;

    background:#c9a227;

    color:white;

    cursor:pointer;

    font-size:16px;

    transition:.3s;

}


.certificate-button:hover {

    background:#111;

}



/* =========================
   URKUNDEN POPUP
========================= */


.certificate-modal {

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.75);

    justify-content:center;

    align-items:center;

    z-index:2000;

}



.certificate-box {

    background:white;

    padding:25px;

    max-width:700px;

    position:relative;

}



.certificate-box img {

    max-height:80vh;

    object-fit:contain;

}



.close-certificate {

    position:absolute;

    right:10px;

    top:5px;

    border:none;

    background:none;

    font-size:35px;

    cursor:pointer;

}



/* =========================
   COOKIE BANNER
========================= */


.cookie-banner {

position:fixed;

bottom:20px;

left:50%;

transform:translateX(-50%);

width:90%;

max-width:900px;

background:white;

padding:30px;

box-shadow:0 10px 40px rgba(0,0,0,.25);

z-index:3000;

display:flex;

}



.cookie-content h3 {

font-size:30px;

margin-bottom:15px;

}



.cookie-content p {

line-height:1.6;

}



.cookie-content a {

color:#c9a227;

}



.cookie-buttons {

display:flex;

gap:15px;

margin-top:25px;

flex-wrap:wrap;

}



.cookie-buttons button {

padding:12px 25px;

border:none;

cursor:pointer;

font-family:"Poppins";

}



.cookie-accept {

background:#c9a227;

color:white;

}



.cookie-decline {

background:#eee;

}



.cookie-settings {

background:#111;

color:white;

}




/* Einstellungen Fenster */


.cookie-modal {

display:none;

position:fixed;

inset:0;

background:rgba(0,0,0,.7);

z-index:4000;

justify-content:center;

align-items:center;

}



.cookie-box {

background:white;

padding:40px;

max-width:500px;

width:90%;

}



.cookie-box h2 {

text-align:left;

font-size:35px;

margin-bottom:20px;

}



.cookie-box label {

display:block;

margin:20px 0;

}

/* =========================
   DANKE SEITE
========================= */


.thank-you {

height:100vh;

display:flex;

justify-content:center;

align-items:center;

text-align:center;


background:

linear-gradient(
rgba(0,0,0,.65),
rgba(0,0,0,.65)
),

url("images/hero.jpg")

center/cover;


}



.thank-you-box {

background:white;

padding:60px;

max-width:600px;

box-shadow:

0 10px 40px rgba(0,0,0,.25);


}



.thank-you-box h1 {

font-size:70px;

color:#c9a227;

margin-bottom:25px;

}



.thank-you-box p {

font-size:18px;

margin-bottom:15px;

}



.thank-you-button {


display:inline-block;

margin-top:30px;

padding:15px 40px;

background:#c9a227;

color:white;

transition:.3s;


}



.thank-you-button:hover {


background:#111;


}

/* =========================
   DIENSTLEISTUNGEN SEITE
========================= */


.services-page{

padding:150px 8% 80px;

}


.services-page h1{

text-align:center;

font-size:60px;

margin-bottom:70px;

}



.service-detail{

max-width:900px;

margin:0 auto 80px;

padding:40px;

background:#faf7f0;

box-shadow:
0 10px 30px rgba(0,0,0,.08);

scroll-margin-top:120px;

}



.service-detail h2{

font-size:45px;

margin-bottom:20px;

text-align:left;

}



.service-detail p{

line-height:1.8;

margin-bottom:20px;

}



.service-detail ul{

list-style:none;

}



.service-detail li{

margin-bottom:10px;

}

/* =========================
   DIENSTLEISTUNGEN ACCORDION
========================= */


.services-page{

padding:150px 8% 80px;

}



.services-page h1{

text-align:center;

font-size:60px;

margin-bottom:60px;

}



.service-detail{

max-width:900px;

margin:0 auto 20px;

background:#faf7f0;

box-shadow:
0 10px 30px rgba(0,0,0,.08);

}



.accordion-title{

width:100%;

padding:25px 35px;

border:none;

background:white;

display:flex;

align-items:center;

gap:20px;

font-family:"Cormorant Garamond", serif;

font-size:35px;

cursor:pointer;

text-align:left;

}



.accordion-title i{

color:#c9a227;

}



.accordion-title span{

margin-left:auto;

font-size:35px;

}



.accordion-content{

display:none;

padding:30px 35px;

line-height:1.8;

}



.accordion-content ul{

list-style:none;

margin-top:20px;

}



.accordion-content li{

margin-bottom:10px;

}



/* =========================
   EINZELNE DIENSTLEISTUNGEN
========================= */


.category-description {

    margin-bottom:30px;

}



.service-list {

    display:grid;

    gap:20px;

}



.service-item {

    background:white;

    padding:25px;

    border-left:4px solid #c9a227;

    box-shadow:
    0 5px 20px rgba(0,0,0,.08);

    transition:.3s;

}



.service-item:hover {

    transform:translateY(-5px);

}



.service-item h3 {

    font-size:28px;

    margin-bottom:15px;

}



.service-info {

    display:flex;

    gap:30px;

    flex-wrap:wrap;

    color:#555;

}



.service-info span {

    display:flex;

    align-items:center;

    gap:8px;

}



.service-info i {

    color:#c9a227;

}

/* =========================
   PREISLISTE DIENSTLEISTUNGEN
========================= */


.price-list{

display:flex;

flex-direction:column;

gap:20px;

margin-top:30px;

}



.price-item{

background:white;

padding:25px;

display:flex;

justify-content:space-between;

align-items:center;

box-shadow:
0 5px 20px rgba(0,0,0,.08);

border-left:4px solid #c9a227;

}



.price-item h3{

font-size:26px;

margin-bottom:8px;

}



.price-item p{

margin:0;

color:#666;

}



.price-item span{

text-align:right;

font-weight:600;

font-size:18px;

color:#c9a227;

white-space:nowrap;

}



@media(max-width:600px){

.price-item{

flex-direction:column;

align-items:flex-start;

gap:15px;

}


.price-item span{

text-align:left;

}


}

/* =========================
   DAMEN HAARLÄNGEN
========================= */


.hair-length {
    margin-bottom:20px;
}


.length-title {

    width:100%;

    padding:18px 25px;

    background:#333;

    color:white;

    border:none;

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-family:"Cormorant Garamond", serif;

    font-size:28px;

    cursor:pointer;

}


.length-title span {

    font-size:25px;

}



.length-content {

    display:none;

}



.price-item {

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px 30px;

    background:#d2d2d2;

    border-bottom:3px solid #333;

    color:#555;

}



.price-item span {

    font-size:16px;

}



.price-item strong {

    font-style:italic;

    font-weight:400;

    color:#555;

    white-space:nowrap;

}