/* ./assets/style.css */

/* --- Reset & Base Variables --- */
:root {
    --bg-base: #ecdbc8;
    --bg-surface: #ddc7b0;
    --bg-darker: #cdb39a;
    --accent: #b8735e;
    --accent-light: #d49a87;
    --accent-dark: #8f5444;
    --accent-gradient: linear-gradient(135deg, #e8cbc0 0%, #d49a87 35%, #b8735e 65%, #8f5444 100%);
    --text-main: #1f1915;
    --text-muted: #8c7a6d;
    --font-main: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    --shadow-lg: 0 20px 60px rgba(40, 25, 20, 0.12), 0 0 0 1px rgba(184, 115, 94, 0.08);
    --shadow-gold: 0 10px 40px rgba(184, 115, 94, 0.18);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-main);
    font-size: 1.1rem;
    color: var(--text-main);
    background-color: var(--bg-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; transition: var(--transition); }
img { max-width: 100%; height: auto; display: block; }

/* =========================================
   HERO SECTION
   ========================================= */
.hero {
    background: linear-gradient(rgba(236,219,200,0.75), rgba(236,219,200,0.85)),
                url('hero-background.svg') center/cover no-repeat fixed !important;
    padding: 6rem 0 4rem 0 !important;
    position: relative !important;
    overflow: hidden !important;
    text-align: left !important;
}
.hero::before {
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle at 30% 50%, rgba(184, 115, 94, 0.06), transparent 70%);
    pointer-events: none;
}
.hero-content { position: relative; z-index: 1; }
.hero h1 { margin-bottom: 1.5rem; }
.hero p { color: var(--text-muted); max-width: 650px; margin-bottom: 2.5rem; font-size: 1.2rem; }

/* --- Typography --- */
h1, h2, h3 {
    color: var(--text-main);
    margin-bottom: 1rem;
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.5px;
}
h1 { font-size: 3.2rem; letter-spacing: -1px; font-weight: 900; }
h2 { font-size: 2.6rem; font-weight: 700; }
h3 { font-size: 1.6rem; font-weight: 700; }
h1 strong, h2 strong, h3 strong {
    color: var(--accent);
    font-weight: 900;
    font-style: italic;
}
strong { color: var(--text-main); font-weight: 700; }

.subtitle {
    display: inline-block;
    color: var(--accent);
    font-family: var(--font-main);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--accent);
    padding-bottom: 4px;
}
.subtitle-text {
    color: var(--text-muted);
    font-size: 1.05rem;
    font-weight: 400;
    margin-bottom: 0;
}
.text-center { text-align: center; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.section-padding { padding: 5rem 0; }
.bg-light { background-color: var(--bg-surface); }
.bg-dark { background-color: var(--bg-darker); }

.btn-primary {
    display: inline-block; background-color: transparent; color: var(--text-main);
    padding: 1.1rem 2.2rem; font-size: 1rem; font-weight: 700; border: 2px solid var(--accent);
    cursor: pointer; transition: var(--transition); border-radius: 2px;
}
.btn-primary:hover {
    background-color: var(--accent); color: #fff; box-shadow: 0 0 15px rgba(184, 115, 94, 0.2);
}

.grid-2, .grid-3, .grid-4 { display: grid; grid-template-columns: 1fr; gap: 2rem; }

/* =========================================
   HEADER & NAVIGATION
   ========================================= */
.header {
    background-color: rgba(236, 219, 200, 0.95); padding: 1rem 0; position: sticky;
    top: 0; z-index: 1000; backdrop-filter: blur(10px); border-bottom: 1px solid rgba(31,25,21,0.05);
}
.nav-wrapper { display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; gap: 1rem; }
.logo img { height: 60px; width: auto; }

.main-nav ul { list-style: none; display: flex; gap: 1.8rem; }
.main-nav a {
    font-size: 1.1rem; font-weight: 600; color: var(--text-muted);
    position: relative; padding-bottom: 5px;
}
.main-nav a::after {
    content: ''; position: absolute; width: 0; height: 2px; bottom: 0; left: 0;
    background-color: var(--accent); transition: var(--transition);
}
.main-nav a:hover { color: var(--text-main); }
.main-nav a:hover::after { width: 100%; }
.main-nav a.active { color: var(--text-main); }
.main-nav a.active::after { width: 100%; }

/* Header Right (CTA + Hamburger) */
.header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}
.header-right .btn-primary { display: none; }

/* Hamburger Button */
.hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    flex-shrink: 0;
}
.hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--text-main);
    border-radius: 2px;
    transition: var(--transition);
    transform-origin: center;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile Nav Dropdown */
@media (max-width: 991px) {
    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(236, 219, 200, 0.98);
        backdrop-filter: blur(20px);
        border-top: 1px solid rgba(184, 115, 94, 0.2);
        padding: 1rem 0;
        z-index: 999;
    }
    .main-nav.open { display: block; }
    .main-nav ul { flex-direction: column; gap: 0; align-items: center; }
    .main-nav ul li { width: 100%; text-align: center; border-bottom: 1px solid rgba(31,25,21,0.04); }
    .main-nav ul li:first-child { border-top: 1px solid rgba(31,25,21,0.04); }
    .main-nav a { display: block; padding: 1.1rem 0; font-size: 1.15rem; }
}

/* =========================================
   FADE-IN ANIMATIONS
   ========================================= */
.fade-in {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================
   SERVICES SECTION
   ========================================= */
.intro-text { color: var(--text-muted); margin-bottom: 3rem; font-size: 1.1rem; }
.card { background: var(--bg-surface); padding: 0; border: 1px solid rgba(31,25,21,0.02); transition: var(--transition); position: relative; }
.card::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background-color: var(--accent); transition: var(--transition); }
.card:hover { transform: translateY(-5px); border-color: rgba(31,25,21,0.1); }
.card:hover::after { width: 100%; }
.card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-bottom: 1px solid rgba(31,25,21,0.05); }
.card h3 { padding: 1.5rem 1.5rem 0 1.5rem; margin-bottom: 0.5rem; }
.card p { padding: 0 1.5rem 1.5rem 1.5rem; color: var(--text-muted); font-size: 1rem; }

/* =========================================
   PREISLISTE SECTION
   ========================================= */
.price-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 3rem;
    text-align: left;
}
.price-card {
    background: var(--bg-base);
    border: 1px solid rgba(31,25,21,0.06);
    overflow: hidden;
    transition: var(--transition);
}
.price-card:hover { border-color: rgba(184, 115, 94, 0.25); }
.price-card-header {
    background: linear-gradient(135deg, #f5e6d3, #ddc7b0);
    padding: 1.4rem 2rem;
    border-bottom: 2px solid var(--accent);
}
.price-card-header h3 {
    margin: 0;
    font-size: 1.3rem;
    color: var(--accent);
    letter-spacing: 3px;
    text-transform: uppercase;
}
.price-list { list-style: none; padding: 0; }
.price-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.05rem 2rem;
    border-bottom: 1px solid rgba(31,25,21,0.04);
    transition: background 0.2s;
    gap: 1rem;
}
.price-list li:last-child { border-bottom: none; }
.price-list li:hover { background: rgba(184, 115, 94, 0.04); }
.price-service { color: var(--text-muted); font-size: 1rem; }
.price-value { color: var(--accent); font-weight: 700; font-size: 1rem; white-space: nowrap; }
.price-note { margin-top: 2rem; color: var(--text-muted); font-size: 0.9rem; }

/* =========================================
   STATISTICS SECTION
   ========================================= */
.stat-item { padding: 2rem 1rem; border-bottom: 1px solid rgba(31,25,21,0.05); }
.stat-item:last-child { border-bottom: none; }
.stat-icon { width: 70px; height: 70px; margin: 0 auto 1rem auto; }
.counter {
    font-family: var(--font-display);
    font-size: 3.8rem;
    font-weight: 900;
    color: var(--text-main);
    line-height: 1;
    margin-bottom: 0.5rem;
    letter-spacing: -1px;
}
.stat-item p { color: var(--accent); font-size: 0.95rem; font-weight: 700; }

/* =========================================
   ABOUT SECTION
   ========================================= */
.about-image img { border: 1px solid rgba(31,25,21,0.05); }
.about-content p { color: var(--text-muted); margin-bottom: 1.5rem; font-size: 1.1rem; }
.benefits-list { list-style: none; margin-top: 2rem; border-left: 2px solid rgba(31,25,21,0.05); padding-left: 1.5rem; }
.benefits-list li { margin-bottom: 1rem; font-weight: 600; color: var(--text-main); position: relative; font-size: 1.1rem; }
.benefits-list li::before { content: ''; position: absolute; left: -1.5rem; top: 50%; transform: translateY(-50%); width: 10px; height: 2px; background-color: var(--accent); }

/* =========================================
   ÖFFNUNGSZEITEN SECTION
   ========================================= */
.oeffnungszeiten { background-color: var(--bg-base); }
.oeff-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}
.oeff-content p { color: var(--text-muted); font-size: 1.1rem; margin-bottom: 2rem; }
.oeff-table {
    background: var(--bg-surface);
    border: 1px solid rgba(31,25,21,0.06);
}
.oeff-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.1rem 1.8rem;
    border-bottom: 1px solid rgba(31,25,21,0.04);
    transition: background 0.2s;
}
.oeff-row:last-child { border-bottom: none; }
.oeff-row:hover { background: rgba(184, 115, 94, 0.03); }
.oeff-row span:first-child { color: var(--text-muted); font-weight: 600; }
.oeff-row span:last-child { color: var(--text-main); font-weight: 700; }
.oeff-row.closed span:last-child { color: var(--text-muted); font-style: italic; font-weight: 400; }

/* =========================================
   KUNDENSTIMMEN CAROUSEL
   ========================================= */
.kundenstimmen {
    background: radial-gradient(ellipse at 50% 60%, rgba(184,115,94,0.05) 0%, transparent 65%), var(--bg-darker);
}

.kundenstimmen .carousel-wrapper {
    max-width: 750px;
    margin: 3rem auto 0;
}

.carousel-track-outer {
    overflow: hidden;
    border-radius: 16px;
}

.kundenstimmen .carousel {
    display: flex;
    align-items: stretch;
    transition: transform 0.55s cubic-bezier(0.32, 0.72, 0, 1);
}

.kundenstimmen .review-slide {
    flex: 0 0 100%;
    min-width: 100%;
    padding: 0 2px;
    display: flex;
}

.review-card {
    flex: 1;
}

/* Review Card */
.review-card {
    background: var(--bg-surface);
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(31,25,21,0.07);
    border-top: 2px solid var(--accent);
    border-radius: 16px;
    padding: 2.2rem 2.5rem 2.5rem;
    text-align: left;
    box-shadow: 0 20px 60px rgba(40,25,20,0.5);
    position: relative;
    overflow: hidden;
}
.review-card::before {
    content: '\201C';
    position: absolute;
    top: -10px;
    right: 24px;
    font-size: 7rem;
    line-height: 1;
    color: var(--accent);
    opacity: 0.08;
    font-family: Georgia, serif;
    pointer-events: none;
}

.review-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.2rem;
}
.reviewer-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), #8f5444);
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.5px;
}
.reviewer-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.reviewer-name {
    color: var(--text-main);
    font-size: 1rem;
    font-weight: 700;
}
.reviewer-meta {
    color: var(--text-muted);
    font-size: 0.82rem;
}
.google-g {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    color: #4285F4;
    font-weight: 900;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: Arial, sans-serif;
    box-shadow: 0 2px 8px rgba(40,25,20,0.3);
}
.review-stars {
    color: #fbbc04;
    font-size: 1.2rem;
    letter-spacing: 3px;
    margin-bottom: 1rem;
}
.review-text {
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.75;
    flex: 1;
}

/* Controls: ‹ dots › */
.carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    margin-top: 1.8rem;
}
.carousel-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: transparent;
    color: var(--accent);
    border: 1.5px solid rgba(184,115,94,0.4);
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
    line-height: 1;
}
.carousel-btn:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* Dots */
.carousel-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.carousel-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(31,25,21,0.2);
    border: none;
    cursor: pointer;
    transition: var(--transition);
    padding: 0;
}
.carousel-dot.active {
    background: var(--accent);
    transform: scale(1.5);
}

/* =========================================
   CONTACT SECTION
   ========================================= */
.info-block { margin-bottom: 2rem; color: var(--text-muted); font-size: 1.1rem; }
.info-block strong { color: var(--text-main); display: block; margin-bottom: 0.3rem; }
.contact-form { background: var(--bg-surface); padding: 2.5rem; border: 1px solid rgba(31,25,21,0.05); }
.contact-form form { display: flex; flex-direction: column; gap: 1.5rem; }
.contact-form input, .contact-form textarea {
    width: 100%; padding: 1rem; border: none;
    border-bottom: 1px solid rgba(31,25,21,0.1);
    background-color: transparent; color: var(--text-main);
    font-family: inherit; font-size: 1.1rem; transition: var(--transition);
}
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-bottom-color: var(--accent); }

/* =========================================
   FOOTER
   ========================================= */
.footer { background-color: var(--bg-darker); padding: 3rem 0; border-top: 1px solid rgba(31,25,21,0.05); color: var(--text-muted); font-size: 1rem; }
.footer-links { margin-top: 1.5rem; display: flex; justify-content: center; gap: 2rem; }
.footer-links a:hover { color: var(--accent); }

/* =========================================
   WHATSAPP FLOATING BUTTON
   ========================================= */
.whatsapp-btn {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 58px;
    height: 58px;
    background: #25D366;
    color: var(--text-main);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
    z-index: 800;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.whatsapp-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(37, 211, 102, 0.6);
    color: var(--text-main);
}
.whatsapp-btn svg { width: 30px; height: 30px; }

/* =========================================
   SCROLL-TO-TOP BUTTON
   ========================================= */
.scroll-top {
    position: fixed;
    bottom: 6.5rem;
    right: 2rem;
    width: 50px;
    height: 50px;
    background: rgba(184, 115, 94, 0.1);
    color: var(--accent);
    border: 1px solid rgba(184, 115, 94, 0.4);
    border-radius: 50%;
    font-size: 1.3rem;
    cursor: pointer;
    z-index: 800;
    opacity: 0;
    pointer-events: none;
    transform: translateY(15px);
    transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.scroll-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.scroll-top:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* =========================================
   DESKTOP MEDIA QUERIES
   ========================================= */
@media (min-width: 992px) {
    h1 { font-size: 5rem; }
    h2 { font-size: 3.5rem; }
    .section-padding { padding: 8rem 0; }
    .logo img { height: 80px; }
    .main-nav ul { gap: 3rem; }
    .header-right .btn-primary { display: inline-block; }
    .hamburger { display: none; }
    .hero { padding: 12rem 0 8rem 0 !important; }
    .grid-2 { grid-template-columns: 1fr 1fr; align-items: center; gap: 4rem; }
    .grid-3 { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
    .grid-4 { grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid rgba(31,25,21,0.05); }
    .stat-item { border-bottom: none; border-right: 1px solid rgba(31,25,21,0.05); }
    .stat-item:last-child { border-right: none; }
    .price-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
    .oeff-grid { grid-template-columns: 1fr 1fr; gap: 5rem; }
}

/* =========================================
   SUPER-REALISTISCHES CINEMATIC HAIR-CUT INTRO
   ========================================= */
#intro-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 10000; overflow: hidden; display: flex; justify-content: center; align-items: center;
    pointer-events: auto; background: radial-gradient(circle at center, #ecdbc8 0%, #cdb39a 80%);
    animation: impactShake 0.4s cubic-bezier(.36,.07,.19,.97) 1.3s forwards;
}
.screen-panel {
    position: absolute; left: 0; width: 100%; height: 50vh;
    background: radial-gradient(circle at 50% 50%, #ecdbc8 0%, #cdb39a 100%);
    z-index: 1; box-shadow: 0 0 50px rgba(40,25,20,1);
    transition: transform 1s cubic-bezier(0.7, 0, 0.1, 1);
}
.panel-top { top: 0; animation: blastTop 1s cubic-bezier(0.7, 0, 0.1, 1) 1.7s forwards; }
.panel-bottom { bottom: 0; animation: blastBottom 1s cubic-bezier(0.7, 0, 0.1, 1) 1.7s forwards; }

.cut-impact {
    position: absolute; top: 50%; left: 0; width: 100%; height: 4px;
    z-index: 2; transform: translateY(-50%);
}
.golden-tear {
    position: absolute; width: 0%; height: 4px; background: linear-gradient(90deg, transparent, #b8735e, #8f5444, #b8735e, transparent);
    box-shadow: 0 0 25px #b8735e, 0 0 50px #d49a87, 0 0 90px rgba(184,115,94,0.4);
    animation: tearScreen 0.6s ease-out 1.2s forwards;
}
.hair-particles {
    position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; z-index: 3;
    transform: translate(-50%, -50%);
}
.hair {
    position: absolute; top: 0; left: 50%; width: 3px; background: linear-gradient(to bottom, #d6c8b8, #b8735e, #8f5444);
    box-shadow: 0 0 6px rgba(184, 115, 94, 0.4);
    border-radius: 50% 50% 0 0;
    opacity: 0;
    transform-origin: bottom center;
}
.hp-1  { height: 65px; animation: hairFly 0.65s ease-out 1.25s forwards; --angle: 25deg; }
.hp-2  { height: 48px; animation: hairFly 0.55s ease-out 1.28s forwards; --angle: -35deg; }
.hp-3  { height: 72px; animation: hairFly 0.72s ease-out 1.3s forwards; --angle: 160deg; }
.hp-4  { height: 55px; animation: hairFly 0.6s ease-out 1.32s forwards; --angle: -150deg; }
.hp-5  { height: 68px; animation: hairFly 0.68s ease-out 1.35s forwards; --angle: 55deg; }
.hp-6  { height: 42px; animation: hairFly 0.52s ease-out 1.38s forwards; --angle: -80deg; }
.hp-7  { height: 80px; animation: hairFly 0.75s ease-out 1.4s forwards; --angle: 115deg; }
.hp-8  { height: 51px; animation: hairFly 0.58s ease-out 1.43s forwards; --angle: -110deg; }
.hp-9  { height: 62px; animation: hairFly 0.7s ease-out 1.45s forwards; --angle: 35deg; }
.hp-10 { height: 47px; animation: hairFly 0.54s ease-out 1.47s forwards; --angle: -45deg; }
.hp-11 { height: 75px; animation: hairFly 0.73s ease-out 1.5s forwards; --angle: 170deg; }
.hp-12 { height: 58px; animation: hairFly 0.62s ease-out 1.52s forwards; --angle: -170deg; }

.logo-reveal {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.6);
    z-index: 4; opacity: 0; filter: drop-shadow(0 0 40px #b8735e);
    animation: logoReveal 0.9s cubic-bezier(0.23, 1, 0.32, 1) 1.6s forwards;
}
.logo-reveal img { width: 380px; height: auto; }

/* Keyframes */
@keyframes hairFly {
    0% { opacity: 1; transform: rotate(var(--angle)) translateY(0); }
    100% { opacity: 0; transform: rotate(var(--angle)) translate(420px, 120px); }
}
@keyframes tearScreen {
    0% { opacity: 1; width: 0%; }
    45% { opacity: 1; width: 100%; }
    100% { opacity: 0; width: 100%; }
}
@keyframes logoReveal {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes impactShake {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    10% { transform: translate(-15px, 15px) rotate(-2deg); }
    30% { transform: translate(15px, -15px) rotate(2deg); }
    50% { transform: translate(-10px, -10px) rotate(-1deg); }
    70% { transform: translate(10px, 10px) rotate(1deg); }
}
@keyframes blastTop { to { transform: translateY(-100vh); } }
@keyframes blastBottom { to { transform: translateY(100vh); } }

/* Mobile-Optimierung Intro */
@media (max-width: 768px) {
    .logo-reveal img { width: 260px; }
    .hair { width: 2.5px; }
}

/* =========================================
   PREMIUM POLISH — Section Ornaments, Cards, Hover-Refinements
   ========================================= */

/* Subtle texture on body for depth */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(184, 115, 94, 0.03) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(184, 115, 94, 0.02) 0%, transparent 40%);
    pointer-events: none;
    z-index: -1;
}

/* Enhanced Subtitle — with decorative dash */
.subtitle {
    position: relative;
    padding: 0 28px 6px 28px;
    border-bottom: none;
}
.subtitle::before,
.subtitle::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 18px;
    height: 1px;
    background: var(--accent);
    opacity: 0.6;
}
.subtitle::before { left: 0; }
.subtitle::after { right: 0; }

/* Section — make positioning available */
.section-padding {
    position: relative;
}

/* Hero — richer overlay and accent line */
.hero {
    background: linear-gradient(rgba(221,199,176,0.7), rgba(221,199,176,0.92)),
                url('hero-background.svg') center/cover no-repeat fixed !important;
}
.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(184,115,94,0.4), transparent);
    pointer-events: none;
}
.hero h1 {
    text-shadow: 0 2px 30px rgba(40,25,20,0.6);
}

/* Service Cards — luxury treatment */
.card {
    border-radius: 2px;
    background: linear-gradient(160deg, #f5e6d3 0%, #ddc7b0 100%);
    border: 1px solid rgba(184, 115, 94, 0.08);
    box-shadow: 0 8px 30px rgba(40,25,20,0.4);
    overflow: hidden;
    position: relative;
}
.card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(184, 115, 94, 0.08), transparent 60%);
    opacity: 0;
    transition: var(--transition);
    pointer-events: none;
    z-index: 1;
}
.card:hover {
    transform: translateY(-8px);
    border-color: rgba(184, 115, 94, 0.35);
    box-shadow: var(--shadow-gold), 0 20px 50px rgba(40,25,20,0.5);
}
.card:hover::before { opacity: 1; }
.card::after {
    background: var(--accent-gradient);
    height: 2px;
}
.card img {
    background: #ffffff;
    transition: transform 0.7s ease;
    position: relative;
    z-index: 0;
}
.card:hover img { transform: scale(1.03); }
.card h3 {
    position: relative;
    z-index: 2;
    padding-top: 1.8rem;
}
.card h3::before {
    content: '';
    display: block;
    width: 24px;
    height: 2px;
    background: var(--accent);
    margin-bottom: 0.8rem;
    transition: width 0.4s ease;
}
.card:hover h3::before { width: 60px; }

/* Price Cards — premium frame */
.price-card {
    border-radius: 2px;
    position: relative;
    box-shadow: 0 8px 30px rgba(40,25,20,0.4);
}
.price-card::before,
.price-card::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 1px solid var(--accent);
    opacity: 0.6;
    transition: var(--transition);
}
.price-card::before {
    top: 8px;
    left: 8px;
    border-right: none;
    border-bottom: none;
}
.price-card::after {
    bottom: 8px;
    right: 8px;
    border-left: none;
    border-top: none;
}
.price-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-gold), 0 14px 40px rgba(40,25,20,0.5);
}
.price-card:hover::before,
.price-card:hover::after {
    width: 32px;
    height: 32px;
    opacity: 1;
}
.price-card-header {
    background: linear-gradient(135deg, #f5e6d3 0%, #ddc7b0 100%);
    text-align: center;
    position: relative;
}
.price-card-header::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 2px;
    background: var(--accent-gradient);
}
.price-card-header h3 {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    letter-spacing: 4px;
}
.price-value {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
}

/* Statistics — enriched with icon glow and frame */
.statistics {
    position: relative;
    overflow: hidden;
}
.statistics::before,
.statistics::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 600px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(184,115,94,0.25), transparent);
}
.statistics::before { top: 0; }
.statistics::after { bottom: 0; }
.stat-item {
    position: relative;
    transition: var(--transition);
}
.stat-item:hover { background: rgba(184, 115, 94, 0.03); }
.stat-icon {
    filter: drop-shadow(0 0 8px rgba(184, 115, 94, 0.25));
    transition: transform 0.5s ease;
}
.stat-item:hover .stat-icon {
    transform: scale(1.08) rotate(-3deg);
}
.counter {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* About — polished image frame */
.about-image {
    position: relative;
}
.about-image::before {
    content: '';
    position: absolute;
    inset: -12px;
    border: 1px solid rgba(184, 115, 94, 0.3);
    pointer-events: none;
    transition: var(--transition);
}
.about-image:hover::before {
    inset: -18px;
    border-color: rgba(184, 115, 94, 0.6);
}
.about-image img {
    transition: transform 0.6s ease;
    position: relative;
    z-index: 1;
}
.about-image:hover img { transform: translate(6px, 6px); }
.benefits-list li::before {
    width: 18px;
    background: var(--accent-gradient);
    transition: width 0.3s ease;
}
.benefits-list li:hover::before { width: 28px; }

/* Öffnungszeiten — frame with top accent */
.oeff-table {
    position: relative;
    border-radius: 2px;
    box-shadow: 0 8px 25px rgba(40,25,20,0.4);
    overflow: hidden;
}
.oeff-table::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent-gradient);
    z-index: 1;
}
.oeff-row.today {
    background: rgba(184, 115, 94, 0.08);
}
.oeff-row.today span:first-child {
    color: var(--accent);
}

/* Review Card — refined quote mark and gold glow */
.review-card {
    background: linear-gradient(160deg, #f5e6d3 0%, #ddc7b0 100%);
    border-top: none;
    position: relative;
}
.review-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent-gradient);
}
.review-card::before {
    font-family: var(--font-display);
    font-size: 9rem;
    opacity: 0.1;
    top: -15px;
}
.reviewer-avatar {
    background: var(--accent-gradient);
    box-shadow: 0 4px 12px rgba(184, 115, 94, 0.3);
}

/* Contact Form — gold-accented inputs */
.contact-form {
    background: linear-gradient(160deg, #f5e6d3 0%, #ddc7b0 100%);
    border: 1px solid rgba(184, 115, 94, 0.1);
    border-radius: 2px;
    position: relative;
    box-shadow: 0 8px 30px rgba(40,25,20,0.4);
}
.contact-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent-gradient);
}
.contact-form input,
.contact-form textarea {
    padding: 1rem 0.2rem;
    font-family: var(--font-main);
    transition: border-color 0.3s ease, padding-left 0.3s ease;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: rgba(138, 131, 119, 0.6);
    font-style: italic;
}
.contact-form input:focus,
.contact-form textarea:focus {
    padding-left: 0.6rem;
    border-bottom-width: 2px;
}
.contact-form .btn-primary {
    margin-top: 0.5rem;
    letter-spacing: 2px;
}
#formSuccess {
    background: linear-gradient(160deg, rgba(184,115,94,0.08), rgba(184,115,94,0.02)) !important;
    border: 1px solid rgba(184, 115, 94, 0.3);
    color: var(--text-main);
    font-family: var(--font-main);
}
#formSuccess strong {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--accent);
    display: block;
    margin-bottom: 0.5rem;
}

/* Enhanced btn-primary with shine */
.btn-primary {
    position: relative;
    overflow: hidden;
    letter-spacing: 2px;
    font-family: var(--font-main);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    border-radius: 0;
}
.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(31,25,21,0.2), transparent);
    transition: left 0.6s ease;
}
.btn-primary:hover::before { left: 100%; }
.btn-primary:hover {
    box-shadow: 0 0 20px rgba(184, 115, 94, 0.4), 0 0 40px rgba(184, 115, 94, 0.1);
}

/* Main nav — refined */
.main-nav a {
    font-family: var(--font-main);
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.main-nav a::after {
    height: 1px;
    background: var(--accent-gradient);
}

/* Footer — more elegant */
.footer {
    background: linear-gradient(180deg, var(--bg-darker) 0%, #d6c8b8 100%);
    position: relative;
}
.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    max-width: 400px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(184,115,94,0.3), transparent);
}
.footer-links {
    margin-top: 1.5rem;
}
.footer-links a {
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 500;
    transition: color 0.3s ease;
}

/* Scroll-top button — pill shape with gold glow */
.scroll-top {
    background: rgba(184, 115, 94, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(184, 115, 94, 0.35);
}
.scroll-top:hover {
    box-shadow: 0 0 20px rgba(184, 115, 94, 0.5);
}

/* Smooth image rendering for SVGs */
img { image-rendering: -webkit-optimize-contrast; }

/* Desktop refinements */
@media (min-width: 992px) {
    .card img {
        aspect-ratio: 16/10;
    }
    .price-card-header {
        padding: 1.8rem 2rem;
    }
    .contact-form {
        padding: 3rem;
    }
}

/* =========================================
   HERO GIMMICK — Falling Hair Strands & Cutting Scissors
   ========================================= */
.hero-fx {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

/* Falling gold strands (like hair being cut) */
.strand {
    position: absolute;
    top: -15%;
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom,
        transparent,
        rgba(184, 115, 94, 0.55) 40%,
        rgba(212, 154, 135, 0.8) 50%,
        rgba(184, 115, 94, 0.55) 60%,
        transparent);
    opacity: 0;
    animation: fallStrand linear infinite;
    will-change: transform, opacity;
}
.strand.s1 { left: 8%;  height: 50px; animation-duration: 9s;    animation-delay: 0s; }
.strand.s2 { left: 16%; height: 75px; animation-duration: 11s;   animation-delay: 2.2s; }
.strand.s3 { left: 27%; height: 40px; animation-duration: 8s;    animation-delay: 4s; }
.strand.s4 { left: 39%; height: 65px; animation-duration: 10.5s; animation-delay: 1s; }
.strand.s5 { left: 56%; height: 55px; animation-duration: 12s;   animation-delay: 3s; }
.strand.s6 { left: 71%; height: 70px; animation-duration: 9.5s;  animation-delay: 5s; }
.strand.s7 { left: 83%; height: 45px; animation-duration: 11.5s; animation-delay: 1.5s; }
.strand.s8 { left: 93%; height: 60px; animation-duration: 8.5s;  animation-delay: 3.5s; }

@keyframes fallStrand {
    0% {
        transform: translate3d(0, 0, 0) rotate(-4deg);
        opacity: 0;
    }
    8% { opacity: 0.85; }
    92% { opacity: 0.85; }
    100% {
        transform: translate3d(20px, 110vh, 0) rotate(6deg);
        opacity: 0;
    }
}

/* Animated cutting scissors */
.hero-scissors {
    position: absolute;
    right: 3.5rem;
    bottom: 3rem;
    width: 80px;
    height: 80px;
    opacity: 0.55;
    filter: drop-shadow(0 0 14px rgba(184, 115, 94, 0.35));
    animation: scissorFloat 5s ease-in-out infinite;
}

.scissor-blade {
    transform-box: view-box;
    transform-origin: 60px 60px;
}
.blade-a { animation: cutBladeA 2.4s cubic-bezier(0.5, 0, 0.3, 1) infinite; }
.blade-b { animation: cutBladeB 2.4s cubic-bezier(0.5, 0, 0.3, 1) infinite; }

@keyframes cutBladeA {
    0%, 100% { transform: rotate(-9deg); }
    42% { transform: rotate(1deg); }
    50% { transform: rotate(3deg); }
    58% { transform: rotate(1deg); }
}
@keyframes cutBladeB {
    0%, 100% { transform: rotate(9deg); }
    42% { transform: rotate(-1deg); }
    50% { transform: rotate(-3deg); }
    58% { transform: rotate(-1deg); }
}
@keyframes scissorFloat {
    0%, 100% { transform: translateY(0) rotate(-8deg); }
    50% { transform: translateY(-8px) rotate(-5deg); }
}

/* Mobile: kleinere Schere, weniger Strähnen */
@media (max-width: 768px) {
    .hero-scissors {
        width: 56px;
        height: 56px;
        right: 1.5rem;
        bottom: 2rem;
        opacity: 0.45;
    }
    .strand.s2, .strand.s4, .strand.s6, .strand.s8 { display: none; }
}

/* Accessibility: Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .strand,
    .blade-a,
    .blade-b,
    .hero-scissors {
        animation: none;
    }
    .strand { opacity: 0; }
    .hero-scissors { transform: rotate(-8deg); }
}