// ======================================================
// Salon Miss Fox Website
// STYLE.CSS
//
// (C) 2026 LMP-MEDIA IT-Solutions e. K.
// Alle Rechte vorbehalten.
// ======================================================


/* ==========================================================
   1. FONTS
========================================================== */

@font-face{
    font-family:"Poppins";
    src:url("fonts/Poppins/Poppins-Regular.ttf") format("truetype");
    font-weight:400;
    font-style:normal;
}

@font-face{
    font-family:"Poppins";
    src:url("fonts/Poppins/Poppins-Medium.ttf") format("truetype");
    font-weight:500;
    font-style:normal;
}

@font-face{
    font-family:"Poppins";
    src:url("fonts/Poppins/Poppins-SemiBold.ttf") format("truetype");
    font-weight:600;
    font-style:normal;
}

@font-face{
    font-family:"Cormorant";
    src:url("fonts/Cormorant_Garamond/CormorantGaramond-Regular.ttf") format("truetype");
    font-weight:400;
    font-style:normal;
}

@font-face{
    font-family:"Cormorant";
    src:url("fonts/Cormorant_Garamond/CormorantGaramond-Bold.ttf") format("truetype");
    font-weight:700;
    font-style:normal;
}


/* ==========================================================
   2. VARIABLES
========================================================== */

:root{
    --primary:#a97b50;
    --primary-dark:#8d6641;
    --accent:#d6c0a3;
    --dark:#2c2724;
    --text:#5f564f;
    --light:#faf8f4;
    --white:#ffffff;
    --border:#ebe3da;
    --radius:18px;
    --transition:.35s ease;
    --shadow:0 18px 45px rgba(0,0,0,.08);
}


/* ==========================================================
   3. RESET UND BASIS
========================================================== */

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

html{
    width:100%;
    scroll-behavior:smooth;
    overflow-x:hidden;
}

body{
    width:100%;
    min-height:100%;
    overflow-x:hidden;

    font-family:"Poppins",sans-serif;
    font-size:16px;
    line-height:1.7;

    color:#3b342e;
    background:#faf8f4;

    -webkit-font-smoothing:antialiased;
}

img{
    display:block;
    max-width:100%;
    height:auto;

    user-select:none;
    -webkit-user-drag:none;

    transition:
        transform .5s ease,
        filter .35s ease;
}

picture{
    display:block;
}

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

button{
    font:inherit;
    border:none;
    background:none;
    cursor:pointer;
}

ul,
ol{
    list-style:none;
}

input,
textarea,
select{
    font:inherit;
}

section{
    position:relative;
}

svg{
    display:block;
}


/* ==========================================================
   4. CONTAINER
========================================================== */

.container{
    width:min(1180px,92%);
    margin-inline:auto;
}


/* ==========================================================
   5. TYPOGRAFIE
========================================================== */

h1,
h2,
h3,
h4{
    font-family:"Cormorant",serif;
    color:var(--dark);
    font-weight:700;
    line-height:1.1;
}

h1{
    font-size:clamp(2.7rem,6vw,4.9rem);
}

h2{
    margin-bottom:25px;
    font-size:clamp(1.9rem,4.3vw,3.2rem);
}

h3{
    font-size:2rem;
}

h4{
    font-size:1.4rem;
}

p{
    color:var(--text);
}

strong{
    font-weight:600;
}


/* ==========================================================
   6. GLOBALE BUTTONS
========================================================== */

.btn,
.btn-outline,
.header-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.btn{
    padding:16px 34px;

    border-radius:999px;

    background:var(--primary);
    color:#ffffff;

    font-weight:600;

    box-shadow:0 15px 35px rgba(169,123,80,.30);
}

.btn:hover{
    background:var(--primary-dark);
    transform:translateY(-4px);
}

.btn-outline{
    padding:16px 34px;

    border:2px solid rgba(255,255,255,.8);
    border-radius:999px;

    color:#ffffff;
}

.btn-outline:hover{
    background:#ffffff;
    color:var(--dark);
}

a,
button,
.btn,
.btn-outline,
.header-button{
    transition:
        color .3s ease,
        background .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}


/* ==========================================================
   7. HEADER
========================================================== */

.header{
    position:fixed;
    top:0;
    left:0;

    width:100%;
    height:110px;

    z-index:1000;

    background:rgba(250,248,244,.96);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(169,123,80,.12);

    box-shadow:0 8px 30px rgba(0,0,0,.06);

    transition:
        background .35s ease,
        box-shadow .35s ease,
        height .35s ease;
}

.header.scrolled{
    background:rgba(250,248,244,.98);
    box-shadow:0 14px 35px rgba(0,0,0,.08);
}

.header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;

    height:110px;
    gap:40px;
}


/* ==========================================================
   8. LOGO
========================================================== */

.logo{
    display:flex;
    align-items:center;
    flex-shrink:0;
}

.logo img{
    width:auto;
    max-height:95px;
}

.logo:hover img{
    opacity:.92;
    transform:scale(1.04);
}


/* ==========================================================
   9. DESKTOP-NAVIGATION
========================================================== */

.navigation{
    margin-right:auto;
    margin-left:auto;
}

.navigation ul{
    display:flex;
    align-items:center;
    gap:52px;
}

.navigation a{
    position:relative;
    display:inline-block;

    padding:8px 0;

    color:var(--dark);

    font-size:.98rem;
    font-weight:500;
    letter-spacing:.08em;
    text-transform:uppercase;

    transition:
        color .3s ease,
        transform .3s ease;
}

.navigation a::after{
    content:"";

    position:absolute;
    left:50%;
    bottom:-6px;

    width:0;
    height:2px;

    border-radius:2px;
    background:var(--primary);

    transform:translateX(-50%);

    transition:width .3s ease;
}

.navigation a:hover{
    color:var(--primary);
    transform:translateY(-2px);
}

.navigation a:hover::after{
    width:100%;
}

.navigation a.active{
    color:var(--primary);
    font-weight:600;
}


/* ==========================================================
   10. HEADER-AKTIONEN
========================================================== */

.header-actions{
    display:flex;
    align-items:center;
    flex-shrink:0;
}

.header-button{
    height:54px;
    gap:12px;

    padding:0 28px;

    border-radius:999px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            #b98b5d
        );

    color:#ffffff;

    font-size:.95rem;
    font-weight:600;
    white-space:nowrap;

    box-shadow:0 12px 30px rgba(169,123,80,.25);
}

.header-button:hover{
    filter:brightness(1.05);
    transform:translateY(-3px);
    box-shadow:0 18px 40px rgba(169,123,80,.35);
}

.phone-icon{
    width:20px;
    height:20px;
    flex-shrink:0;

    animation:ring 3s ease infinite;
}

@keyframes ring{
    0%,
    100%{
        transform:rotate(0);
    }

    2%{
        transform:rotate(-12deg);
    }

    4%{
        transform:rotate(12deg);
    }

    6%{
        transform:rotate(-8deg);
    }

    8%{
        transform:rotate(8deg);
    }

    10%{
        transform:rotate(0);
    }
}


/* ==========================================================
   11. HAMBURGER
========================================================== */

.hamburger{
    display:none;

    position:relative;
    z-index:10001;

    width:46px;
    height:46px;

    border:none;
    background:none;

    cursor:pointer;
}

.hamburger span{
    display:block;

    width:28px;
    height:3px;

    margin:6px auto;

    border-radius:20px;
    background:var(--dark);

    transition:.3s;
}


/* ==========================================================
   12. MOBILES MENÜ
========================================================== */

.mobile-menu{
    display:none;
}


/* ==========================================================
   13. HERO
========================================================== */

.hero{
    position:relative;

    display:flex;
    align-items:center;
    justify-content:flex-start;

    height:100vh;

    overflow:hidden;
}

.hero-image{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center center;
}

.hero-overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            rgba(25,20,18,.25),
            rgba(25,20,18,.10)
        );
}

.hero-container{
    position:relative;
    z-index:2;

    width:min(1180px,92%);
    margin:0 auto;
}

.hero-content{
    max-width:650px;
    padding-right:40px;

    color:#ffffff;
}

.hero-eyebrow{
    display:inline-block;

    margin-bottom:20px;

    color:#e8d7c2;

    font-size:.9rem;
    letter-spacing:.25em;
    text-transform:uppercase;
}

.hero h1{
    margin-bottom:30px;

    color:#ffffff;
    line-height:.95;
}

.hero-text{
    max-width:560px;
    margin-bottom:45px;

    color:#f7f3ee;

    font-size:1.15rem;
}

.hero-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
}

.hero-buttons .btn-outline{
    height:54px;
    padding:0 34px;
}


/* ==========================================================
   14. BEREICHSÜBERSCHRIFTEN
========================================================== */

.section-title{
    margin-bottom:70px;
    text-align:center;
}

.section-title span{
    display:block;

    margin-bottom:15px;

    color:var(--primary);

    font-size:.85rem;
    font-weight:600;
    letter-spacing:.25em;
    text-transform:uppercase;
}

.section-title h2{
    margin-bottom:0;
}


/* ==========================================================
   15. WILLKOMMEN
========================================================== */

.welcome{
    padding:120px 0;
    background:#ffffff;
}

.welcome-grid{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    align-items:center;

    gap:70px;
}

.welcome-text p{
    margin-bottom:25px;
}

.welcome-text .btn{
    margin-top:15px;
}

.welcome-image{
    max-width:400px;
    margin-left:auto;

    overflow:hidden;

    border-radius:var(--radius);

    box-shadow:var(--shadow);
}

.welcome-image img{
    width:100%;
    transition:transform .8s ease;
}

.welcome-image:hover img,
.welcome-image img:hover{
    transform:scale(1.05);
}


/* ==========================================================
   16. LEISTUNGEN
========================================================== */

.services-preview{
    padding:120px 0;
    background:var(--light);
}

.services-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:35px;
}

.service-card{
    padding:50px 40px;

    border-radius:var(--radius);

    background:#ffffff;

    text-align:center;

    box-shadow:var(--shadow);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

    animation:fadeIn .8s ease;
}

.service-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 55px rgba(0,0,0,.12);
}

.service-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    width:72px;
    height:72px;

    margin:0 auto 20px;

    border-radius:50%;

    background:rgba(169,123,80,.12);
    color:var(--primary);

    font-size:25px;

    transition:
        transform .35s ease,
        background .35s ease;
}

.service-card:hover .service-icon{
    transform:scale(1.08);
}

.service-icon svg{
    display:block;

    width:38px;
    height:38px;

    fill:currentColor;
}

.service-card h3{
    margin-bottom:18px;
    font-size:1.8rem;
}

.service-card p{
    margin-bottom:30px;
}

.service-card a{
    color:var(--primary);
    font-weight:600;

    transition:color .3s ease;
}

.service-card a:hover{
    color:var(--primary-dark);
}


/* ==========================================================
   17. CALL TO ACTION
========================================================== */

.cta{
    padding:130px 0;
    background:#ffffff;
}

.cta-box{
    padding:90px 60px;

    border-radius:28px;

    background:
        linear-gradient(
            135deg,
            #2c2724,
            #3d352f
        );

    color:#ffffff;
    text-align:center;

    box-shadow:0 25px 60px rgba(0,0,0,.18);

    animation:fadeIn .8s ease;
}

.cta-box > span {
    display:block;

    margin-bottom:20px;

    color:var(--accent);

    font-size:.9rem;
    letter-spacing:.25em;
    text-transform:uppercase;
}

.cta-box h2{
    margin-bottom:25px;
    color:#ffffff;
}

.cta-box p{
    max-width:700px;
    margin:0 auto 40px;

    color:#f2ece6;
}

.cta .btn{
    min-width:230px;
}


/* ==========================================================
   18. FOOTER
========================================================== */

footer{
    padding:60px 0 0;

    background:#2f2823;
    color:#d8d0c8;
}

.footer-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr .9fr .9fr;
    align-items:start;

    max-width:1050px;
    margin:0 auto;

    gap:35px;
}

.footer-logo{
    display:block;

    width:100px;

    margin:0 0 20px;
}

.footer-column{
    animation:fadeIn .8s ease;
}

.footer-column h4{
    margin-bottom:16px;

    color:#ffffff;

    font-size:1.35rem;
    font-weight:700;
}

.footer-column p,
.footer-column address{
    color:#d8d0c8;

    font-style:normal;
    line-height:1.7;
}

.footer-column p{
    margin-bottom:12px;
}

.footer-column ul{
    margin:0;
    padding:0;
}

.footer-column li{
    margin-bottom:10px;
}

.footer-column a{
    color:#d8d0c8;

    transition:
        color .3s ease,
        padding-left .3s ease;
}

.footer-column a:hover{
    padding-left:4px;
    color:var(--accent);
}


/* ==========================================================
   19. FOOTER SOCIAL LINKS
========================================================== */

.footer-social{
    margin:0;
    padding:0;

    list-style:none;
}

.footer-social li{
    margin-bottom:14px;
}

.footer-social a{
    display:inline-flex;
    align-items:center;
    gap:8px;

    color:rgba(255,255,255,.85);
    text-decoration:none;

    transition:color .25s ease;
}

.footer-social i{
    font-size:16px;

    transition:
        color .25s ease,
        transform .25s ease;
}

.footer-social a:hover{
    color:#ffffff;
}

.footer-social a:hover .fa-instagram{
    color:#e4405f;
    transform:scale(1.15);
}

.footer-social a:hover .fa-facebook-f{
    color:#1877f2;
    transform:scale(1.15);
}

.footer-social a:hover .fa-whatsapp{
    color:#25d366;
    transform:scale(1.15);
}


/* ==========================================================
   20. ÖFFNUNGSZEITEN
========================================================== */

.footer-hours{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;

    margin-top:40px;
    padding:20px 0;

    gap:12px;

    border-top:1px solid rgba(255,255,255,.12);

    color:rgba(255,255,255,.8);
    font-size:.95rem;
}

.footer-hours strong{
    color:#ffffff;
}

.footer-hours .separator{
    color:rgba(255,255,255,.35);
}


/* ==========================================================
   21. FOOTER BOTTOM
========================================================== */

.footer-bottom{
    margin-top:0;
    padding:22px 0;

    border-top:1px solid rgba(255,255,255,.10);

    text-align:center;
}

.footer-bottom p{
    color:#bfb5aa;

    font-size:.9rem;
    letter-spacing:.04em;
}


/* ==========================================================
   22. RECHTLICHE SEITEN
========================================================== */

.legal-page{
    padding:170px 0 100px;
}

.legal-eyebrow{
    display:inline-block;

    margin-bottom:18px;

    color:var(--primary);

    font-size:.85rem;
    letter-spacing:.22em;
    text-transform:uppercase;
}

.legal-page h1{
    margin:0 0 24px;

    font-family:"Poppins",sans-serif;
    font-size:1.75rem;
    font-weight:600;
}

.legal-page h2{
    margin:20px 0 6px;

    font-family:"Poppins",sans-serif;
    font-size:.92rem;
    font-weight:600;
}

.legal-page p{
    margin:0 0 10px;

    font-size:.92rem;
    line-height:1.55;
}

.legal-page strong{
    font-weight:600;
}

.legal-page a,
.legal-content a{
    color:var(--primary);
}

.legal-page a:hover{
    text-decoration:underline;
}


/* ==========================================================
   23. SCROLL-ANIMATION
========================================================== */

.fade-up{
    opacity:0;
    transform:translateY(40px);

    transition:
        opacity .8s ease,
        transform .8s ease;
}

.fade-up.show{
    opacity:1;
    transform:translateY(0);
}

@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}


/* ==========================================================
   24. FOCUS STATES
========================================================== */

a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
    outline:none;
    box-shadow:none;
}


/* ==========================================================
   25. TEXTAUSWAHL
========================================================== */

::selection{
    background:var(--primary);
    color:#ffffff;
}

::-moz-selection{
    background:var(--primary);
    color:#ffffff;
}


/* ==========================================================
   26. SCROLLBAR
========================================================== */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#f2efe9;
}

::-webkit-scrollbar-thumb{
    border-radius:10px;
    background:var(--primary);
}

::-webkit-scrollbar-thumb:hover{
    background:var(--primary-dark);
}


/* ==========================================================
   27. RESPONSIVE: BIS 1180 PX
========================================================== */

@media (max-width:1180px){

    .navigation ul{
        gap:32px;
    }

    .navigation a{
        font-size:.92rem;
        letter-spacing:.05em;
    }

    .header-button{
        padding:0 22px;
        font-size:.9rem;
    }

}


/* ==========================================================
   28. RESPONSIVE: TABLET UND MOBILE
========================================================== */

@media (max-width:1024px){

    /* HEADER */

    .navigation{
        display:none;
    }

    .header-actions{
        display:flex;
        align-items:center;
    }

    .hamburger{
        display:block;
    }


    /* MOBILES MENÜ */

    .mobile-menu{
        position:fixed;
        top:110px;
        left:0;
        z-index:9999;

        display:flex;
        flex-direction:column;

        width:100%;
        max-height:0;

        overflow:hidden;

        background:#ffffff;

        box-shadow:0 15px 35px rgba(0,0,0,.08);

        transition:max-height .4s ease;
    }

    .mobile-menu.active{

        height:calc(100vh - 110px);
        height:calc(100dvh - 110px);

        max-height:calc(100vh - 110px);
        max-height:calc(100dvh - 110px);

        overflow-x:hidden;
        overflow-y:auto;

        overscroll-behavior:contain;
        scrollbar-gutter:stable;

        scrollbar-width:thin;
        scrollbar-color:
            rgba(169,123,80,.65)
            rgba(169,123,80,.10);

        -webkit-overflow-scrolling:touch;
    }

    .mobile-menu.active::-webkit-scrollbar{
        width:7px;
    }

    .mobile-menu.active::-webkit-scrollbar-track{
        background:rgba(169,123,80,.10);
    }

    .mobile-menu.active::-webkit-scrollbar-thumb{
        border:1px solid rgba(255,255,255,.7);
        border-radius:999px;
        background:rgba(169,123,80,.65);
    }

    .mobile-menu.active::-webkit-scrollbar-thumb:hover{
        background:var(--primary);
    }

    .mobile-menu a{
        display:flex;
        align-items:center;
        flex-shrink:0;

        min-height:58px;
        padding:16px 30px;

        border-bottom:1px solid var(--border);

        color:var(--dark);

        transition:
            color .25s ease,
            background-color .25s ease,
            padding-left .25s ease;
    }

    .mobile-menu a:hover{
        background:rgba(169,123,80,.07);
        color:var(--primary);
        padding-left:36px;
    }

    .mobile-menu a:last-child{
        border-bottom:none;
    }


    /* LEISTUNGEN */

    .services-grid{
        grid-template-columns:repeat(2,1fr);
        gap:30px;
    }


    /* FOOTER */

    .footer-grid{
        grid-template-columns:1fr 1fr;
        gap:50px;
    }

}


/* ==========================================================
   29. RESPONSIVE: MOBILE
========================================================== */

@media (max-width:768px){

    /* HEADER */

    .header-button{
        height:48px;
        padding:0 18px;

        gap:8px;

        font-size:.85rem;
    }

    .phone-icon{
        width:18px;
        height:18px;
    }

    /* HERO */

    .hero{
        display:flex;
        align-items:flex-start;

        min-height:100vh;
    }

    .hero-image{
        object-position:center 18%;
    }

    .hero-container{
        display:flex;
        align-items:flex-start;

        height:100%;
    }

    .hero-content{
        width:100%;

        padding-top:150px;
        padding-right:0;
    }

    .hero-eyebrow{
        display:inline-block;

        margin:0;

        font-size:.85rem;
        letter-spacing:.22em;
    }

    .hero-main{
        transform:translateY(150px);
    }

    .hero h1{
        margin-top:70px;
        margin-bottom:24px;

        font-size:3.35rem;
        line-height:.92;
    }

    .hero-text{
        max-width:320px;
        margin-bottom:0;

        font-size:1rem;
        line-height:1.6;
    }

    .hero-buttons{
        display:flex;
        flex-direction:column;
        align-items:flex-start;

        margin-top:80px;

        gap:12px;
    }

    .hero-buttons .btn{
        display:none;
    }

    .hero-buttons .header-button,
    .hero-buttons .btn-outline{
        display:flex;
        align-items:center;
        justify-content:center;

        width:290px;
        height:54px;

        padding:0;

        box-sizing:border-box;

        font-size:.95rem;
    }

    /* CTA */

    .cta-box{
        padding:70px 24px;
    }

    .cta .header-button{
        display:flex;
        align-items:center;
        justify-content:center;

        width:290px;
        height:54px;

        margin:0 auto;
        padding:0;

        box-sizing:border-box;

        font-size:.95rem;
    }

    /* WILLKOMMEN */

    .welcome{
        padding:70px 0;
    }

    .welcome-grid{
        grid-template-columns:1fr;
        gap:35px;
    }

    .welcome-image{
        order:-1;

        max-width:320px;
        margin:0 auto;
    }

    /* LEISTUNGEN */

    .services-grid{
        grid-template-columns:1fr;
        gap:30px;
    }

    .service-card{
        max-width:500px;
        margin:0 auto;
    }

    /* FOOTER */

    .footer-grid{
        grid-template-columns:1fr;
        gap:32px;

        text-align:left;
    }

    .footer-column{
        width:100%;
    }

    .footer-hours{
        display:grid;
        grid-template-columns:1fr;

        margin-top:40px;
        padding:24px 18px;

        gap:8px;

        border-top:1px solid rgba(255,255,255,.12);

        text-align:center;
    }

    .footer-hours strong,
    .footer-hours span:not(.separator){
        display:block;

        width:100%;

        line-height:1.5;
        overflow-wrap:normal;
        word-break:normal;
    }

    .footer-hours strong{
        margin-bottom:4px;

        color:#ffffff;
        font-weight:600;
    }

    .footer-hours span:not(.separator){
        color:rgba(255,255,255,.85);
    }

    .footer-hours .separator{
        display:none;
    }

    /* RECHTLICHE SEITEN */

    .legal-page{
        padding:160px 0 60px;
    }

    .legal-content{
        width:100%;
        font-size:.92rem;
    }

    .legal-page h1{
        margin:0 0 20px;

        font-family:"Poppins",sans-serif;
        font-size:1.7rem;
        font-weight:600;
    }

    .legal-page h2{
        margin:18px 0 5px;

        font-family:"Poppins",sans-serif;
        font-size:.95rem;
        font-weight:600;
    }

    .legal-page p{
        margin:0 0 8px;

        font-size:.88rem;
        line-height:1.45;
    }

    .legal-page strong{
        font-weight:600;
    }

}

/* ==========================================================
   30. RESPONSIVE: KLEINE SMARTPHONES
========================================================== */

@media (max-width:450px){

    .header .header-button{
        width:48px;
        height:48px;

        padding:0;

        justify-content:center;
    }

    .header .header-button span{
        display:none;
    }

    .hero-content{
        padding-top:140px;
    }

    .hero-main{
        transform:translateY(80px);
    }

    .hero-buttons{
        margin-top:80px;
    }

}


/* ==========================================================
   31. RESPONSIVE: SMARTPHONE LANDSCAPE
========================================================== */

@media (max-width:1024px) and (max-height:600px) and (orientation:landscape){

    /* HEADER */

    .header{
        height:80px;
    }

    .header-inner{
        height:80px;
        gap:16px;
    }

    .logo img{
        width:auto;
        max-height:70px;
    }

    .header-button{
        height:42px;
        padding:0 18px;

        gap:8px;

        font-size:.85rem;
    }

    .phone-icon{
        width:18px;
        height:18px;
    }


    /* MOBILES MENÜ */

    .mobile-menu{
        top:80px;
    }

    .mobile-menu.active{
        height:calc(100vh - 80px);
        height:calc(100dvh - 80px);

        max-height:calc(100vh - 80px);
        max-height:calc(100dvh - 80px);

        overflow-x:hidden;
        overflow-y:auto;

        -webkit-overflow-scrolling:touch;
    }


    /* FOOTER */

    .footer-hours{
        display:grid;
        grid-template-columns:1fr;

        padding:20px 24px;

        gap:6px;

        text-align:center;
    }

    .footer-hours strong,
    .footer-hours span:not(.separator){
        display:block;

        width:100%;

        line-height:1.4;
        overflow-wrap:normal;
        word-break:normal;
    }

    .footer-hours strong{
        margin-bottom:2px;

        color:#ffffff;

        font-size:.95rem;
        font-weight:600;
    }

    .footer-hours span:not(.separator){
        color:rgba(255,255,255,.85);

        font-size:.9rem;
    }

    .footer-hours .separator{
        display:none;
    }


    /* HERO */

    .hero{
        align-items:center;

        height:100vh;
        min-height:100vh;

        padding-top:0;
    }

    .hero-container{
        width:min(1180px,92%);
        margin:0 auto;
    }

    .hero-content{
        max-width:520px;

        padding-top:0;
        padding-right:0;
    }

    .hero-main{
        transform:none;
    }

    .hero h1{
        margin:0 0 16px;

        font-size:2.6rem;
    }

    .hero-text{
        max-width:520px;
        margin-bottom:20px;

        font-size:.95rem;
        line-height:1.45;
    }

    .hero-buttons{
        display:flex;
        flex-direction:row;

        margin-top:12px;

        gap:10px;
    }

    .hero-buttons .btn,
    .hero-buttons .btn-outline{
        display:inline-flex;
        align-items:center;
        justify-content:center;

        height:42px;
        padding:0 18px;

        font-size:.85rem;
    }

}

/* ==========================================================
   32. RESPONSIVE: TABLET LANDSCAPE
========================================================== */

@media (min-width:769px) and (max-width:1024px) and (orientation:landscape){

    .hero-image{
        object-position:center center;
    }

}



/* ==========================================================
   TABLET: ÖFFNUNGSZEITEN
========================================================== */

@media (min-width:769px) and (max-width:1024px){

    .footer-hours{
        display:grid;
        grid-template-columns:1fr;

        margin-top:40px;
        padding:24px 20px;

        gap:8px;

        border-top:1px solid rgba(255,255,255,.12);

        text-align:center;
    }

    .footer-hours strong,
    .footer-hours span:not(.separator){
        display:block;

        width:100%;
        min-width:0;

        line-height:1.5;
        white-space:normal;
        overflow-wrap:normal;
        word-break:normal;
    }

    .footer-hours strong{
        margin-bottom:4px;

        color:#ffffff;
        font-weight:600;
    }

    .footer-hours span:not(.separator){
        color:rgba(255,255,255,.85);
    }

    .footer-hours .separator{
        display:none;
    }

}


/* ==========================================================
   33. REDUZIERTE BEWEGUNG
========================================================== */

@media (prefers-reduced-motion:reduce){

    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

        scroll-behavior:auto !important;
    }

}


/* ==========================================================
   34. DRUCKANSICHT
========================================================== */

@media print{

    .header,
    .hamburger,
    .mobile-menu,
    .hero-buttons,
    .cta{
        display:none !important;
    }

    body{
        background:#ffffff;
        color:#000000;
    }

    a{
        color:#000000;
        text-decoration:none;
    }

}


/* ==========================================================
   ENDE DER DATEI
========================================================== */



/* ==========================================
   PRODUKTSEITE
========================================== */

.products-page {
    overflow: hidden;
}

.products-intro {
    padding: clamp(90px, 10vw, 150px) 0 clamp(55px, 7vw, 95px);
    background: #ffffff;
}

.products-intro-title {
    margin-bottom: 32px;
    text-align: center;
}

.products-intro-title h1 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.3rem, 5vw, 4.4rem);
    font-weight: 400;
    line-height: 1.05;
}

.products-intro-text {
    width: min(760px, 100%);
    margin: 0 auto;
    text-align: center;
}

.products-intro-text p {
    margin: 0;
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    line-height: 1.85;
}

.products-intro-text p + p {
    margin-top: 18px;
}


/* ==========================================
   PRODUKTGALERIE
========================================== */

.products-gallery-section {
    padding: 0 0 clamp(80px, 9vw, 130px);
    background: #ffffff;
}

.products-gallery {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr;
    grid-template-rows: repeat(2, minmax(260px, 1fr));
    gap: 18px;
}

.products-gallery-item {
    position: relative;
    display: block;
    min-width: 0;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 20px;
    background: #ece8e2;
    cursor: zoom-in;
    appearance: none;
}

.products-gallery-item-large {
    grid-row: 1 / 3;
}

.products-gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 260px;
    object-fit: cover;
    transition:
        transform 600ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 400ms ease;
}

.products-gallery-item-large img {
    min-height: 538px;
}

.products-gallery-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(20, 18, 16, 0);
    transition: background-color 350ms ease;
}

.products-gallery-plus {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 50%;
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 2rem;
    font-weight: 200;
    line-height: 1;
    opacity: 0;
    transform: scale(0.75) rotate(-10deg);
    transition:
        opacity 300ms ease,
        transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
        background-color 300ms ease;
}

.products-gallery-item:hover img,
.products-gallery-item:focus-visible img {
    transform: scale(1.05);
}

.products-gallery-item:hover .products-gallery-overlay,
.products-gallery-item:focus-visible .products-gallery-overlay {
    background: rgba(20, 18, 16, 0.34);
}

.products-gallery-item:hover .products-gallery-plus,
.products-gallery-item:focus-visible .products-gallery-plus {
    opacity: 1;
    transform: scale(1) rotate(0);
}

.products-gallery-item:focus-visible {
    outline: 3px solid #b99a6b;
    outline-offset: 4px;
}


/* ==========================================
   GLYNT BANNER
========================================== */

.products-banner-section {
    padding: 0 0 clamp(90px, 10vw, 150px);
    background: #ffffff;
}

.products-banner {
    display: block;
    overflow: hidden;
    border-radius: 20px;
    background: #eeeae4;
}

.products-banner img {
    display: block;
    width: 100%;
    height: auto;
    transition:
        transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 400ms ease;
}

.products-banner:hover img {
    transform: scale(1.015);
    filter: brightness(0.97);
}

.products-banner:focus-visible {
    outline: 3px solid #b99a6b;
    outline-offset: 4px;
}


/* ==========================================
   PFLEGESERIEN
========================================== */

.care-series {
    padding: clamp(90px, 10vw, 145px) 0;
    background: #f7f4ef;
}

.care-series .section-title {
    text-align: center;
}

.care-series-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    margin-top: clamp(48px, 6vw, 78px);
}

.care-series-card {
    position: relative;
    min-height: 330px;
    padding: 36px 30px;
    overflow: hidden;
    border: 1px solid rgba(46, 39, 32, 0.1);
    border-radius: 18px;
    background: #ffffff;
    transition:
        transform 350ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 350ms ease,
        border-color 350ms ease;
}

.care-series-card:hover {
    transform: translateY(-7px);
    border-color: rgba(185, 154, 107, 0.4);
    box-shadow: 0 24px 55px rgba(52, 44, 36, 0.1);
}

.care-series-number {
    display: block;
    color: #b99a6b;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
}

.care-series-line {
    width: 42px;
    height: 1px;
    margin: 24px 0 32px;
    background: #b99a6b;
    transition: width 350ms ease;
}

.care-series-card:hover .care-series-line {
    width: 72px;
}

.care-series-card h3 {
    margin: 0 0 20px;
    color: #28231e;
    font-size: clamp(1.35rem, 2vw, 1.7rem);
    font-weight: 400;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.care-series-card p {
    margin: 0;
    color: #625b54;
    font-size: 0.98rem;
    line-height: 1.8;
}


/* ==========================================
   HERRENPRODUKTE
========================================== */

.products-men {
    padding: clamp(90px, 10vw, 150px) 0;
    background: #ffffff;
}

.products-men-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    align-items: center;
    gap: clamp(45px, 7vw, 100px);
}

.products-men-title {
    margin-bottom: 30px;
    text-align: left;
}

.products-men-text {
    max-width: 560px;
}

.products-men-text p {
    margin: 0;
    color: #5e5750;
    font-size: clamp(1rem, 1.5vw, 1.12rem);
    line-height: 1.85;
}

.products-men-text p + p {
    margin-top: 18px;
}

.products-men-button {
    margin-top: 34px;
}

.products-men-image {
    overflow: hidden;
    border-radius: 20px;
    background: #eae5de;
}

.products-men-image img {
    display: block;
    width: 100%;
    min-height: 580px;
    object-fit: cover;
    transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.products-men-image:hover img {
    transform: scale(1.025);
}

.products-cta {
    padding-top: 0;
}


/* ==========================================
   LIGHTBOX
========================================== */

body.lightbox-open {
    overflow: hidden;
}

.product-lightbox {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr) 90px;
    align-items: center;
    padding: 36px;
    background: rgba(15, 13, 12, 0.95);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 300ms ease,
        visibility 300ms ease;
}

.product-lightbox.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.product-lightbox-content {
    display: flex;
    min-width: 0;
    height: min(84vh, 900px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.product-lightbox-image {
    display: block;
    max-width: 100%;
    max-height: calc(100% - 38px);
    border-radius: 14px;
    object-fit: contain;
    opacity: 0;
    transform: scale(0.96);
    transition:
        opacity 300ms ease,
        transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.product-lightbox.is-open .product-lightbox-image {
    opacity: 1;
    transform: scale(1);
}

.product-lightbox-counter {
    margin: 16px 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.85rem;
    letter-spacing: 0.14em;
}

.product-lightbox-close,
.product-lightbox-arrow {
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    cursor: pointer;
    transition:
        background-color 250ms ease,
        border-color 250ms ease,
        transform 250ms ease;
}

.product-lightbox-close:hover,
.product-lightbox-arrow:hover {
    border-color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.14);
}

.product-lightbox-close:focus-visible,
.product-lightbox-arrow:focus-visible {
    outline: 3px solid #d3b17c;
    outline-offset: 4px;
}

.product-lightbox-close {
    position: absolute;
    top: 28px;
    right: 28px;
    width: 52px;
    height: 52px;
    font-family: Arial, sans-serif;
    font-size: 2rem;
    font-weight: 200;
}

.product-lightbox-arrow {
    width: 58px;
    height: 58px;
    justify-self: center;
    font-size: 1rem;
}

.product-lightbox-arrow:active {
    transform: scale(0.94);
}


/* ==========================================
   HILFSKLASSE
========================================== */

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 1050px) {

    .products-intro {
        padding:
            155px
            0
            clamp(55px, 8vw, 80px);
    }

    .products-intro-title h1 {
        font-size: clamp(2.6rem, 6vw, 3.8rem);
        line-height: 1.08;
    }

    .products-gallery {
        grid-template-columns: 1.2fr 1fr 1fr;
        grid-template-rows: repeat(2, minmax(210px, 1fr));
        gap: 14px;
    }

    .products-gallery-item img {
        min-height: 210px;
    }

    .products-gallery-item-large img {
        min-height: 434px;
    }

    .care-series-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .care-series-card {
        min-height: 290px;
    }

    .products-men-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 45px;
    }

    .products-men-image img {
        min-height: 500px;
    }

}


/* ==========================================
   KLEINES TABLET
========================================== */

@media (max-width: 800px) {

    .products-intro {
        padding:
            155px
            0
            clamp(55px, 8vw, 80px);
    }

    .products-intro-title h1 {
        font-size: clamp(2.5rem, 7vw, 3.6rem);
        line-height: 1.08;
    }

    .products-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
    }

    .products-gallery-item-large {
        grid-column: 1 / 3;
        grid-row: auto;
        aspect-ratio: 16 / 9;
    }

    .products-gallery-item {
        aspect-ratio: 1 / 1;
    }

    .products-gallery-item img,
    .products-gallery-item-large img {
        min-height: 0;
    }

    .products-men-grid {
        grid-template-columns: 1fr;
    }

    .products-men-content {
        order: 1;
    }

    .products-men-image {
        order: 2;
    }

    .products-men-image img {
        min-height: 0;
        aspect-ratio: 4 / 5;
    }

    .product-lightbox {
        grid-template-columns: 64px minmax(0, 1fr) 64px;
        padding: 24px 12px;
    }

    .product-lightbox-arrow {
        width: 48px;
        height: 48px;
    }

}


/* ==========================================
   SMARTPHONE
========================================== */

@media (max-width: 600px) {

    .products-intro {
        padding:
            145px
            0
            48px;
    }

    .products-intro-title {
        margin-bottom: 26px;
    }

    .products-intro-title h1 {
       font-size: clamp(2.2rem, 10vw, 3rem);
        line-height: 1.08;
    }

    .products-intro-text {
        text-align: left;
    }

    .products-gallery-section {
        padding-bottom: 70px;
    }

    .products-gallery {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .products-gallery-item,
    .products-gallery-item-large {
        grid-column: auto;
        aspect-ratio: 4 / 3;
        border-radius: 14px;
    }

    .products-gallery-plus {
        width: 48px;
        height: 48px;
    }

    .products-banner-section {
        padding-bottom: 80px;
    }

    .products-banner {
        border-radius: 14px;
    }

    .care-series {
        padding: 78px 0;
    }

    .care-series-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 40px;
    }

    .care-series-card {
        min-height: 0;
        padding: 30px 26px;
    }

    .products-men {
        padding: 78px 0;
    }

    .products-men-title {
        text-align: left;
    }

    .products-men-image {
        border-radius: 14px;
    }

    .products-men-image img {
        aspect-ratio: 4 / 5;
    }

    .product-lightbox {
        display: block;
        padding: 72px 14px 24px;
    }

    .product-lightbox-content {
        height: calc(100vh - 110px);
    }

    .product-lightbox-close {
        top: 14px;
        right: 14px;
        width: 46px;
        height: 46px;
    }

    .product-lightbox-arrow {
        position: absolute;
        z-index: 2;
        top: 50%;
        width: 46px;
        height: 46px;
        transform: translateY(-50%);
    }

    .product-lightbox-arrow:active {
        transform: translateY(-50%) scale(0.94);
    }

    .product-lightbox-prev {
        left: 12px;
    }

    .product-lightbox-next {
        right: 12px;
    }

    .product-lightbox-image {
        max-height: calc(100% - 44px);
        border-radius: 10px;
    }

}


/* ==========================================
   REDUZIERTE BEWEGUNGEN
========================================== */

@media (prefers-reduced-motion: reduce) {

    .products-gallery-item img,
    .products-gallery-overlay,
    .products-gallery-plus,
    .products-banner img,
    .care-series-card,
    .care-series-line,
    .products-men-image img,
    .product-lightbox,
    .product-lightbox-image {
        transition-duration: 0.01ms !important;
    }

}


/* ==========================================
   PRODUKTSEITE – CTA-BUTTON KORREKTUR
========================================== */

.products-cta .cta-box .header-button {
    display: inline-flex;
    width: auto;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 28px;

    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
}

.products-cta .cta-box .header-button span {
    color: inherit;
    font: inherit;
    letter-spacing: normal;
    text-transform: none;
}

.products-cta .cta-box .header-button .phone-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: inherit;
    font-size: 1rem;
    letter-spacing: normal;
}

@media (max-width: 600px) {

    .products-cta .cta-box .header-button {
        width: auto;
        max-width: 100%;
        padding: 15px 24px;
        font-size: 0.95rem;
    }

}



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

.services-page {
    overflow: hidden;
    background: #ffffff;
}

.services-intro {
    padding: 110px 0 95px;
}

.services-intro-inner {
    max-width: 920px;
    text-align: center;
}

.services-intro-title {
    margin-bottom: 32px;
}

.services-intro-title h1 {
    margin: 0;
}

.services-intro-text {
    max-width: 790px;
    margin: 0 auto;
}

.services-intro-text p {
    margin: 0;
    color: #5f5a55;
    font-size: 18px;
    line-height: 1.9;
}

.services-intro-text p + p {
    margin-top: 12px;
}

.services-intro-line {
    width: 76px;
    height: 1px;
    margin: 45px auto 0;
    background: #bda06a;
}


/* =========================================================
   ABWECHSELNDE LEISTUNGSBEREICHE
========================================================= */

.services-feature {
    padding: 100px 0;
}

.services-feature-soft {
    background: #f8f6f2;
}

.services-feature-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
    align-items: center;
    gap: clamp(55px, 7vw, 105px);
}

.services-feature-grid-reverse .services-feature-image {
    order: 2;
}

.services-feature-grid-reverse .services-feature-content {
    order: 1;
}

.services-feature-image {
    position: relative;
    overflow: hidden;
    min-height: 640px;
    border-radius: 2px;
    background: #ece8e1;
    box-shadow: 0 24px 65px rgba(40, 32, 23, 0.1);
}

.services-feature-image::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.28);
}

.services-feature-image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 640px;
    object-fit: cover;
    transition: transform 700ms ease;
}

.services-feature-image:hover img {
    transform: scale(1.025);
}

.services-feature-content {
    max-width: 540px;
}

.services-feature-number {
    display: block;
    margin-bottom: 26px;
    color: rgba(189, 160, 106, 0.48);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 58px;
    font-weight: 400;
    line-height: 1;
}

.services-feature-kicker {
    margin: 0 0 13px;
    color: #a7874e;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

..services-feature-content h2,
.services-occasion-heading h2,
.services-consultation-heading h2 {
    margin: 0;
    color: #2e2925;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(32px, 3.5vw, 49px);
    font-weight: 400;
    line-height: 1.12;
}

.services-feature-rule {
    width: 58px;
    height: 1px;
    margin: 28px 0 30px;
    background: #bda06a;
}

.services-feature-content > p {
    margin: 0;
    color: #625d58;
    font-size: 17px;
    line-height: 1.85;
}

.services-feature-content > p + p {
    margin-top: 17px;
}

.services-list {
    display: grid;
    gap: 12px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}

.services-list li {
    position: relative;
    padding-left: 27px;
    color: #4e4944;
    font-size: 15px;
    line-height: 1.6;
}

.services-list li::before {
    position: absolute;
    top: 0.72em;
    left: 0;
    width: 13px;
    height: 1px;
    content: "";
    background: #bda06a;
}


/* =========================================================
   BRAUT- UND HOCHSTECKFRISUREN
========================================================= */

.services-occasion {
    padding: 125px 0 130px;
    background: #ffffff;
}

.services-occasion-heading {
    max-width: 810px;
    margin: 0 auto 72px;
    text-align: center;
}

.services-occasion-heading .services-feature-kicker {
    margin-bottom: 15px;
}

.services-occasion-rule {
    width: 62px;
    height: 1px;
    margin: 30px auto;
    background: #bda06a;
}

.services-occasion-heading > p:last-child {
    margin: 0;
    color: #625d58;
    font-size: 17px;
    line-height: 1.85;
}

.services-occasion-gallery {
    display: grid;
    grid-template-columns: 0.85fr 1.2fr 0.85fr;
    align-items: center;
    gap: 28px;
}

.services-occasion-image {
    position: relative;
    overflow: hidden;
    margin: 0;
    background: #ece8e1;
    box-shadow: 0 20px 55px rgba(40, 32, 23, 0.1);
}

.services-occasion-image-left,
.services-occasion-image-right {
    height: 485px;
}

.services-occasion-image-main {
    height: 630px;
}

.services-occasion-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms ease;
}

.services-occasion-image:hover img {
    transform: scale(1.025);
}

.services-occasion-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 44px;
    margin-top: 78px;
}

.services-occasion-detail {
    padding-top: 27px;
    border-top: 1px solid rgba(189, 160, 106, 0.5);
}

.services-occasion-detail > span {
    display: block;
    margin-bottom: 20px;
    color: #a7874e;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
}

.services-occasion-detail h3 {
    margin: 0 0 14px;
    color: #332e2a;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.3;
}

.services-occasion-detail p {
    margin: 0;
    color: #6a645e;
    font-size: 15px;
    line-height: 1.75;
}


/* =========================================================
   HERREN
========================================================= */

.services-men {
    background: #f3f0eb;
}


/* =========================================================
   PFLEGE UND BERATUNG
========================================================= */

.services-consultation {
    padding: 115px 0;
    background: #ffffff;
}

.services-consultation-box {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(50px, 8vw, 120px);
    padding: clamp(55px, 7vw, 90px);
    border: 1px solid rgba(189, 160, 106, 0.37);
    background: #fbfaf8;
}

.services-consultation-heading {
    align-self: start;
}

.services-consultation-heading .services-feature-kicker {
    margin-bottom: 18px;
}

.services-consultation-content p {
    margin: 0;
    color: #625d58;
    font-size: 17px;
    line-height: 1.85;
}

.services-consultation-content p + p {
    margin-top: 17px;
}

.services-text-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 31px;
    padding-bottom: 7px;
    border-bottom: 1px solid #bda06a;
    color: #4d463e;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
    transition:
        color 250ms ease,
        gap 250ms ease;
}

.services-text-link:hover,
.services-text-link:focus-visible {
    gap: 19px;
    color: #a7874e;
}


/* =========================================================
   CTA
========================================================= */

.services-cta {
    padding-top: 25px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

    .services-intro {
        padding: 90px 0 75px;
    }

    .services-feature {
        padding: 85px 0;
    }

    .services-feature-grid {
        gap: 52px;
    }

    .services-feature-image,
    .services-feature-image img {
        min-height: 550px;
    }

 /* Tablet */
.services-feature-content h2,
.services-occasion-heading h2,
.services-consultation-heading h2 {
    font-size: clamp(31px, 4.2vw, 43px);
}

    .services-occasion {
        padding: 100px 0;
    }

    .services-occasion-gallery {
        gap: 18px;
    }

    .services-occasion-image-left,
    .services-occasion-image-right {
        height: 400px;
    }

    .services-occasion-image-main {
        height: 530px;
    }

    .services-occasion-details {
        gap: 26px;
        margin-top: 60px;
    }

    .services-consultation {
        padding: 90px 0;
    }

}


/* =========================================================
   KLEINES TABLET
========================================================= */

@media (max-width: 820px) {

    .services-intro-text p {
        font-size: 17px;
    }

    .services-feature-grid,
    .services-feature-grid-reverse {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .services-feature-grid-reverse .services-feature-image,
    .services-feature-grid-reverse .services-feature-content {
        order: initial;
    }

    .services-feature-image,
    .services-feature-image img {
        min-height: 0;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .services-feature-content {
        max-width: 680px;
    }

    .services-feature-number {
        margin-bottom: 18px;
        font-size: 46px;
    }

    .services-occasion-gallery {
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
    }

    .services-occasion-image-main {
        grid-column: 1 / -1;
        grid-row: 1;
        height: auto;
        aspect-ratio: 16 / 11;
    }

    .services-occasion-image-left,
    .services-occasion-image-right {
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .services-occasion-details {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .services-consultation-box {
        grid-template-columns: 1fr;
        gap: 35px;
    }

}


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

@media (max-width: 600px) {

    .services-intro {
        padding: 68px 0 58px;
    }

    .services-intro-title {
        margin-bottom: 25px;
    }

    .services-intro-text p {
        font-size: 16px;
        line-height: 1.75;
    }

    .services-intro-line {
        margin-top: 33px;
    }

    .services-feature {
        padding: 68px 0;
    }

    .services-feature-grid {
        gap: 34px;
    }

    .services-feature-image,
    .services-feature-image img {
        aspect-ratio: 1 / 1.08;
    }

    .services-feature-number {
        margin-bottom: 16px;
        font-size: 40px;
    }

    .services-feature-kicker {
        font-size: 10px;
        letter-spacing: 0.17em;
    }

.services-feature-content h2,
.services-occasion-heading h2,
.services-consultation-heading h2 {
    font-size: 30px;
    line-height: 1.15;
}

    .services-feature-rule {
        margin: 23px 0 24px;
    }

    .services-feature-content > p {
        font-size: 16px;
        line-height: 1.75;
    }

    .services-list {
        margin-top: 26px;
    }

    .services-occasion {
        padding: 75px 0;
    }

    .services-occasion-heading {
        margin-bottom: 42px;
    }

    .services-occasion-heading > p:last-child {
        font-size: 16px;
        line-height: 1.75;
    }

    .services-occasion-gallery {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .services-occasion-image-main,
    .services-occasion-image-left,
    .services-occasion-image-right {
        grid-column: auto;
        grid-row: auto;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .services-occasion-image-main {
        order: -1;
    }

    .services-occasion-details {
        margin-top: 45px;
    }

    .services-occasion-detail h3 {
        font-size: 22px;
    }

    .services-consultation {
        padding: 70px 0;
    }

    .services-consultation-box {
        gap: 30px;
        padding: 42px 25px;
    }

    .services-consultation-content p {
        font-size: 16px;
        line-height: 1.75;
    }

    .services-text-link {
        font-size: 12px;
        letter-spacing: 0.06em;
    }

    .services-cta {
        padding-top: 5px;
    }

}


/* =========================================================
   REDUZIERTE BEWEGUNG
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .services-feature-image img,
    .services-occasion-image img,
    .services-text-link {
        transition: none;
    }

    .services-feature-image:hover img,
    .services-occasion-image:hover img {
        transform: none;
    }

}



/* =========================================================
   LEISTUNGEN – INTRO-KORREKTUR
   Header, Navigation und Footer bleiben unberührt
========================================================= */

.services-intro {
    padding: 110px 0 95px;
}

.services-intro-inner {
    width: 100%;
    max-width: 1120px;
    margin-right: auto;
    margin-left: auto;
    padding-right: clamp(32px, 5vw, 72px);
    padding-left: clamp(32px, 5vw, 72px);
    box-sizing: border-box;
    text-align: center;
}

.services-intro-title {
    margin: 0 0 34px;
}

.services-intro-title h1 {
    margin: 0;
    line-height: 1.08;
}

.services-intro-text {
    width: 100%;
    max-width: 900px;
    margin-right: auto;
    margin-left: auto;
    box-sizing: border-box;
}

.services-intro-text p {
    margin: 0;
    color: #5f5a55;
    font-size: 18px;
    line-height: 1.9;
    text-align: center;
}

.services-intro-text p + p {
    margin-top: 12px;
}

.services-intro-line {
    width: 76px;
    height: 1px;
    margin: 45px auto 0;
    background: #bda06a;
}


/* =========================================================
   TABLET / HAMBURGER-MENÜ
========================================================= */

@media (max-width: 1024px) {

    /*
     * Zusätzlicher Abstand nach oben, damit die Überschrift
     * vollständig unterhalb des mobilen Headers beginnt.
     */
    .services-intro {
        padding-top: 145px;
        padding-bottom: 80px;
    }

    .services-intro-inner {
        max-width: 100%;
        padding-right: clamp(44px, 7vw, 70px);
        padding-left: clamp(44px, 7vw, 70px);
    }

    .services-intro-title {
        margin-bottom: 34px;
    }

    .services-intro-title h1 {
        font-size: clamp(52px, 7vw, 68px);
    }

    .services-intro-text {
        max-width: 880px;
    }

}


/* =========================================================
   KLEINES TABLET
========================================================= */

@media (max-width: 820px) {

    .services-intro {
        padding-top: 132px;
        padding-bottom: 72px;
    }

    .services-intro-inner {
        padding-right: 44px;
        padding-left: 44px;
    }

    .services-intro-title {
        margin-bottom: 34px;
    }

    .services-intro-title h1 {
        font-size: clamp(48px, 7.2vw, 58px);
    }

    .services-intro-text {
        max-width: 700px;
    }

    .services-intro-text p {
        font-size: 17px;
        line-height: 1.85;
    }

    .services-intro-text p + p {
        margin-top: 16px;
    }

    .services-intro-line {
        margin-top: 42px;
    }

}


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

@media (max-width: 600px) {

    .services-intro {
        padding-top: 122px;
        padding-bottom: 58px;
    }

    .services-intro-inner {
        padding-right: 24px;
        padding-left: 24px;
    }

    .services-intro-title {
        margin-bottom: 28px;
    }

    .services-intro-title h1 {
        font-size: clamp(45px, 13vw, 54px);
        line-height: 1.05;
    }

    .services-intro-text {
        max-width: 100%;
    }

    .services-intro-text p {
        font-size: 16px;
        line-height: 1.78;
    }

    .services-intro-text p + p {
        margin-top: 18px;
    }

    .services-intro-line {
        width: 76px;
        margin-top: 37px;
    }

}


/* =========================================================
   SEHR KLEINE SMARTPHONES
========================================================= */

@media (max-width: 390px) {

    .services-intro {
        padding-top: 118px;
    }

    .services-intro-inner {
        padding-right: 20px;
        padding-left: 20px;
    }

    .services-intro-title h1 {
        font-size: 47px;
    }

}


/* =========================================================
   LEISTUNGEN – DESKTOP-ABSTAND WIE PRODUKTSEITE
========================================================= */

@media (min-width: 1025px) {

    .services-intro {
        padding-top: 140px;
    }

}



/* =========================================================
   LETZTER CTA VOR DEM FOOTER – MOBILE KORREKTUR
========================================================= */

@media (max-width: 600px) {

    .cta .cta-box {
        box-sizing: border-box;
        padding-right: 24px;
        padding-left: 24px;
    }

    .cta .cta-box > .header-button {
        display: inline-flex;
        width: auto;
        max-width: 100%;
        margin-right: auto;
        margin-left: auto;
        padding-right: 28px;
        padding-left: 28px;
        box-sizing: border-box;
        justify-content: center;
        white-space: nowrap;
    }

}