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

html {
    scroll-behavior: smooth;
    /* `hidden` würde aus dem Dokument einen Scroll-Container machen und damit
       den mitlaufenden Header (position: sticky) aushebeln. `clip` schneidet
       den seitlichen Überhang genauso ab, ohne das zu tun. */
    overflow-x: hidden;
    overflow-x: clip;
}

/* Markenwelt „BLACK ROSE × SOFT PINK ROSE"
   Schwarz · Charcoal · Hot Pink · Blush Pink · Soft Ivory */
:root {
    --primary-color: #FF2E7E;
    /* Hot Pink - Knöpfe, Akzente */
    --magenta-deep: #C2185B;
    /* Dunkles Rosé für Verläufe */
    --magenta-soft: #F4B3CB;
    /* Blush Pink - helle Akzente */
    --blush: #F4B3CB;
    --ivory: #F7F2EC;
    /* Soft Ivory - Fließtext */
    --secondary-color: #8A8288;
    --accent-color: #FF2E7E;
    --accent-dark: #C2185B;
    --text-color: #F7F2EC;
    --text-muted: #A39BA0;
    --bg-dark: #000000;
    /* Schwarz */
    --bg-section: #0A0A0C;
    --bg-card: #131316;
    /* Charcoal */
    --border-soft: rgba(255, 46, 126, 0.14);
    --white: #ffffff;
    --gold: #D4AF37;
    --elegant-gradient: linear-gradient(135deg, #C2185B 0%, #FF2E7E 100%);
    --card-bg: linear-gradient(160deg, rgba(255, 46, 126, 0.05) 0%, rgba(19, 19, 22, 0) 45%), #131316;
    --shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    --transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

body {
    font-family: 'Montserrat', sans-serif;
    color: var(--text-color);
    background-color: var(--bg-dark);
    line-height: 1.6;
    overflow-x: hidden;
    overflow-x: clip;
    width: 100%;
}

h1,
h2,
h3,
.script-font {
    font-family: 'Playfair Display', serif;
    letter-spacing: -0.01em;
    position: relative;
    overflow: hidden;
}

.reveal-text span {
    display: inline-block;
    animation: revealUp 1.2s cubic-bezier(0.77, 0, 0.175, 1) forwards;
    transform: translateY(100%);
}

@keyframes revealUp {
    0% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(0);
    }
}

/* Bokeh Effect */
.bokeh-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: transparent;
}

.bokeh-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.13;
    animation: float-bokeh 25s infinite linear;
}

.orb-1 {
    width: 400px;
    height: 400px;
    background: var(--magenta-deep);
    top: -10%;
    left: -10%;
    animation-duration: 35s;
}

.orb-2 {
    width: 350px;
    height: 350px;
    background: var(--primary-color);
    bottom: -5%;
    right: -5%;
    animation-duration: 45s;
    animation-delay: -5s;
}

.orb-3 {
    width: 300px;
    height: 300px;
    background: #2A1420;
    top: 40%;
    left: 50%;
    animation-duration: 40s;
    animation-delay: -10s;
}

.orb-4 {
    width: 250px;
    height: 250px;
    background: #3A1E2C;
    bottom: 30%;
    left: 10%;
    animation-duration: 30s;
    animation-delay: -15s;
}

@keyframes float-bokeh {
    0% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(100px, 150px) scale(1.1);
    }

    66% {
        transform: translate(-100px, 50px) scale(0.9);
    }

    100% {
        transform: translate(0, 0) scale(1);
    }
}

@keyframes float-soft {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

@keyframes shimmer-premium {
    to {
        background-position: 200% center;
    }
}

@keyframes blur-in {
    from {
        filter: blur(10px);
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        filter: blur(0);
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes mask-reveal-side {
    from {
        clip-path: inset(0 100% 0 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

.shimmer-text {
    background: linear-gradient(to right, var(--primary-color) 0%, var(--magenta-soft) 50%, var(--primary-color) 100%);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer-premium 4s linear infinite;
}

/* Blumen-Dekor (danmall-Stil) */
.flower-decor {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.55));
}

.flower-hero {
    width: clamp(300px, 38vw, 560px);
    bottom: -60px;
    left: -80px;
    opacity: 0.95;
    animation: float-soft 9s ease-in-out infinite;
}

.flower-services {
    width: clamp(280px, 30vw, 460px);
    top: -40px;
    right: -60px;
    opacity: 0.5;
}

.flower-about {
    width: clamp(200px, 22vw, 320px);
    top: -70px;
    left: -50px;
    right: auto;
    opacity: 0.9;
    transform: rotate(8deg);
    animation: float-soft 11s ease-in-out infinite;
    z-index: 2;
}

.flower-footer {
    width: clamp(260px, 26vw, 420px);
    bottom: -40px;
    right: -50px;
    opacity: 0.22;
}

.flower-looks-left {
    width: clamp(260px, 26vw, 420px);
    bottom: -60px;
    left: -80px;
    opacity: 0.45;
    transform: rotate(-8deg);
}

.flower-locations-left {
    width: clamp(280px, 28vw, 460px);
    top: 22%;
    left: -100px;
    opacity: 0.5;
    transform: rotate(-12deg);
    animation: float-soft 13s ease-in-out infinite;
}

.flower-services-left {
    width: clamp(260px, 26vw, 430px);
    bottom: -50px;
    left: -90px;
    opacity: 0.45;
}

.flower-cta-left {
    width: clamp(240px, 24vw, 400px);
    top: -30px;
    left: -70px;
    opacity: 0.35;
    transform: rotate(6deg);
}

@media (max-width: 768px) {

    .flower-looks-left,
    .flower-locations-left,
    .flower-services-left,
    .flower-cta-left {
        width: 200px;
        opacity: 0.3;
    }
}

@media (max-width: 768px) {
    .flower-hero {
        width: 260px;
        left: -60px;
        bottom: -40px;
        opacity: 0.7;
    }

    .flower-about {
        width: 170px;
        top: -50px;
        right: -30px;
    }

    .flower-services {
        width: 220px;
        opacity: 0.35;
    }
}

.container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 40px;
}

@media (max-width: 768px) {
    .container {
        padding: 0 20px;
    }
}

.btn {
    display: inline-block;
    position: relative;
    padding: 16px 36px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: var(--transition);
    cursor: pointer;
    border: none;
    text-align: center;
}

/* Schwebende Blütenblätter beim Hover (danmall-Stil) */
.btn::before,
.btn::after {
    content: '';
    position: absolute;
    width: 46px;
    height: 48px;
    background: url('petal-a.png') no-repeat center / contain;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
    z-index: 2;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
}

.btn::before {
    top: -28px;
    left: -18px;
    transform: rotate(-18deg);
}

.btn::after {
    bottom: -28px;
    right: -16px;
    width: 40px;
    height: 50px;
    background-image: url('petal-b.png');
    transform: rotate(14deg);
}

.btn:hover::before {
    opacity: 1;
    animation: petal-float-a 2.8s ease-in-out infinite;
}

.btn:hover::after {
    opacity: 1;
    animation: petal-float-b 3.4s ease-in-out infinite;
}

@keyframes petal-float-a {

    0%,
    100% {
        transform: translateY(0) rotate(-18deg);
    }

    50% {
        transform: translateY(-10px) rotate(-2deg);
    }
}

@keyframes petal-float-b {

    0%,
    100% {
        transform: translateY(0) rotate(14deg);
    }

    50% {
        transform: translateY(8px) rotate(30deg);
    }
}

.btn-primary {
    background: var(--primary-color);
    color: #000000;
    box-shadow: 0 10px 20px rgba(255, 46, 126, 0.18);
}

.btn-primary:hover {
    transform: translateY(-2px);
    background: var(--magenta-soft);
    box-shadow: 0 15px 30px rgba(255, 46, 126, 0.28);
}

.btn-elegant {
    background: var(--elegant-gradient);
    color: var(--white);
    box-shadow: 0 10px 20px rgba(194, 24, 91, 0.25);
}

.btn-elegant:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(194, 24, 91, 0.35);
}

.btn-outline {
    background: var(--primary-color);
    border: none;
    color: #000000;
}

.btn-outline:hover {
    background: var(--magenta-soft);
    color: #000000;
}

/* Header & Nav */
.top-bar {
    background: var(--bg-section);
    color: var(--text-muted);
    padding: 12px 0;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-soft);
}

.top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-bar-right {
    display: flex;
    align-items: center;
}

@media (max-width: 768px) {
    .top-bar-text {
        font-size: 0.65rem;
    }

    .top-bar-link {
        font-size: 0.65rem;
        margin-left: 10px !important;
    }
}

.top-bar a {
    color: inherit;
    text-decoration: none;
    margin-left: 20px;
    transition: var(--transition);
}

.top-bar a:hover {
    color: var(--primary-color);
}

/* Base Navigation Styles */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    text-decoration: none;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 12px;
}

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

.logo-wordmark {
    height: 38px;
    width: auto;
}

@media (max-width: 480px) {
    .logo-wordmark {
        height: 30px;
    }

    .logo-img {
        height: 42px;
    }
}

.logo-text {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    font-family: 'Playfair Display', serif;
}

.logo-sub {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.55em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-top: 2px;
}

.nav-links {
    display: flex;
    gap: 40px;
    align-items: center;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: var(--transition);
}

.nav-links a:hover {
    color: var(--primary-color);
}

#bookingBtn {
    color: #000000 !important;
}

#bookingBtn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.nav-booking-wrapper {
    position: relative;
    display: inline-block;
}

.booking-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--bg-card);
    min-width: 220px;
    box-shadow: var(--shadow);
    border-radius: 4px;
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: var(--transition);
    z-index: 1001;
    border: 1px solid var(--border-soft);
}

.booking-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(5px);
}

.dropdown-item {
    display: block;
    padding: 12px 20px;
    color: var(--text-color);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: var(--transition);
}

.dropdown-item:hover {
    background: rgba(255, 46, 126, 0.08);
    color: var(--primary-color);
}

/* Header & Layers */
header {
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(20px);
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 46, 126, 0.08);
}

.nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    z-index: 1500;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}

.nav-overlay.active {
    opacity: 1;
    visibility: visible;
}

.menu-toggle {
    display: none;
    font-size: 1.8rem;
    color: var(--primary-color);
    cursor: pointer;
    z-index: 2005;
}

.mobile-nav {
    display: none;
}

/* Mobile Media Queries */
@media (max-width: 991px) {
    header {
        z-index: 2100;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(0, 0, 0, 1) !important;
    }

    .menu-toggle {
        display: block;
        position: relative;
        z-index: 2200;
    }

    .desktop-only {
        display: none !important;
    }

    .mobile-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: #000000;
        display: flex !important;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 25px;
        padding: 120px 40px 40px;
        z-index: 2000;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        visibility: hidden;
    }

    .mobile-nav.active {
        transform: translateX(0);
        visibility: visible;
    }

    .mobile-nav a {
        font-size: 1.4rem !important;
        color: #F7F2EC !important;
        font-weight: 600 !important;
        text-decoration: none;
        width: 100%;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        display: block;
    }

    .mobile-booking-options {
        margin-top: 20px;
        width: 100%;
        text-align: center;
        border-top: 1px solid rgba(255, 46, 126, 0.15);
        padding-top: 20px;
    }

    .mobile-booking-label {
        display: block;
        font-size: 0.8rem;
        color: var(--text-muted);
        margin-bottom: 15px;
        text-transform: uppercase;
        letter-spacing: 0.1em;
    }

    .mobile-nav .mobile-booking-item {
        background: var(--elegant-gradient);
        color: #ffffff !important;
        padding: 14px;
        margin-bottom: 12px;
        border-radius: 2px;
        font-size: 1rem !important;
        display: block;
    }

    .booking-dropdown {
        position: static !important;
        width: 100%;
        box-shadow: none;
        background: rgba(255, 255, 255, 0.03);
        margin-top: 10px;
        opacity: 1 !important;
        visibility: visible !important;
        display: none;
        transform: none !important;
    }

    .booking-dropdown.active {
        display: block;
    }
}

/* Hero Section */
.hero {
    padding: 80px 0;
    background: radial-gradient(circle at top right, var(--bg-section) 0%, var(--bg-dark) 70%);
    position: relative;
    overflow: hidden;
}

.hero .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 40px;
    position: relative;
    z-index: 1;
}

.hero-content h1 {
    font-size: 4.5rem;
    line-height: 1.1;
    margin-bottom: 30px;
    color: var(--text-color);
}

.hero-content h1 span {
    color: var(--primary-color);
    font-style: italic;
    font-weight: 400;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--text-muted);
    margin-bottom: 50px;
    max-width: 500px;
}

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

.hero-booking-buttons {
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.btn-booking {
    background: var(--primary-color);
    color: #000000;
    box-shadow: 0 10px 20px rgba(255, 46, 126, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-booking i {
    font-size: 1rem;
}

.btn-booking:hover {
    transform: translateY(-2px);
    background: var(--magenta-soft);
    box-shadow: 0 15px 30px rgba(255, 46, 126, 0.35);
    color: #000000;
}

.hero-image-wrapper {
    position: relative;
}

.hero-image-wrapper img {
    max-width: 100%;
    border-radius: 2px;
    box-shadow: 40px 40px 0px var(--bg-section);
}

/* Locations */
.locations {
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.locations .container {
    position: relative;
    z-index: 1;
}

.section-header {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
}

.section-header h2 {
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    margin-bottom: 15px;
    color: var(--text-color);
    line-height: 1.2;
}

.section-header p {
    color: var(--text-muted);
}

.location-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.location-card {
    background: var(--bg-card);
    border-radius: 0;
    overflow: hidden;
    transition: var(--transition);
    border: 1px solid var(--border-soft);
}

.location-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(255, 46, 126, 0.08);
}

.location-image img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.location-info {
    padding: 40px;
}

.location-info h3 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: var(--text-color);
}

.location-info p {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--text-muted);
}

.location-info i {
    width: 20px;
    color: var(--primary-color);
}

.opening-hours {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 46, 126, 0.1);
}

.opening-hours strong {
    color: var(--text-color);
}

/* Services */
.services {
    padding: 150px 0;
    background: var(--bg-section);
    position: relative;
    overflow: hidden;
}

.services .container {
    position: relative;
    z-index: 1;
}

.service-accordion {
    max-width: 900px;
    margin: 0 auto;
}

.accordion-item {
    background: var(--bg-card);
    margin-bottom: 20px;
    border-radius: 0;
    border: 1px solid var(--border-soft);
}

.accordion-header {
    padding: 30px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.accordion-header h3 {
    margin: 0;
    font-size: 1.3rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-color);
}

.accordion-header i {
    color: var(--primary-color);
}

.accordion-content {
    padding: 0 40px;
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.accordion-item.active .accordion-content {
    padding: 0 40px 40px 40px;
    max-height: 2000px;
}

.service-item {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-weight: 500;
    color: var(--text-muted);
}

.service-price {
    font-weight: 700;
    color: var(--primary-color);
    white-space: nowrap;
}

.service-note {
    margin-top: 25px;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: center;
}

/* Gallery */
.gallery {
    padding: 150px 0;
    background: var(--bg-dark);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.gallery-item {
    aspect-ratio: 4/5;
    overflow: hidden;
    border: 1px solid var(--border-soft);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.gallery-item:hover img {
    transform: scale(1.05);
}

/* Footer */
footer {
    background: #000000;
    color: var(--white);
    padding: 60px 0 40px 0;
    position: relative;
    overflow: hidden;
}

footer .container {
    position: relative;
    z-index: 1;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 40px;
}

.footer-logo .logo-text {
    color: var(--white);
    margin-bottom: 20px;
}

.footer-links h4 {
    margin-bottom: 30px;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.9rem;
    color: var(--primary-color);
}

.footer-links ul {
    list-style: none;
}

.footer-links ul li {
    margin-bottom: 15px;
}

.footer-links a {
    color: #A39BA0;
    text-decoration: none;
    font-size: 0.9rem;
    transition: var(--transition);
    display: block;
}

.footer-links a i {
    margin-right: 10px;
    width: 15px;
    color: var(--primary-color);
}

.footer-links a:hover {
    color: var(--white);
    transform: translateX(5px);
}

.footer-social-icons {
    display: flex;
    gap: 15px;
    margin-top: 25px;
}

.footer-social-icons a {
    width: 40px;
    height: 40px;
    background: rgba(255, 46, 126, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--white);
    font-size: 1.1rem;
    transition: var(--transition);
}

.footer-social-icons a:hover {
    background: var(--magenta-deep);
    transform: translateY(-3px);
}

.footer-contact-block .location-name,
.footer-address .location-name {
    display: block;
    color: var(--white);
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    margin-bottom: 12px;
}

.footer-contact-block a {
    margin-bottom: 8px;
}

.footer-bottom {
    text-align: center;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.8rem;
    color: #6B646A;
    letter-spacing: 0.05em;
}

/* Responsive */
@media (max-width: 1024px) {
    .container {
        padding: 0 30px;
    }

    .hero-content h1 {
        font-size: 3.5rem;
    }

    .gallery-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .hero .container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-content h1 {
        font-size: 3rem;
    }

    .location-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

@media (max-width: 480px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
}

/* Animations & Reveal Effects */
.reveal-text {
    position: relative;
    overflow: hidden;
}

[data-aos="reveal-up"] {
    opacity: 0;
    transform: translateY(30px);
    transition-property: transform, opacity;
}

[data-aos="reveal-up"].aos-animate {
    opacity: 1;
    transform: translateY(0);
}

.hero-content h1 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 1.1;
    margin-bottom: 30px;
    perspective: 1000px;
}

.hero-main-title {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    color: var(--text-color);
    font-weight: 600;
    font-size: clamp(2.2rem, 5.5vw, 4rem);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 5px;
    animation: mask-reveal-side 1.5s cubic-bezier(0.77, 0, 0.175, 1) forwards, shimmer-premium 4s linear infinite 1.5s;
}

.hero-sub-title {
    display: block;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: clamp(1.8rem, 4.5vw, 3.5rem);
    font-weight: 400;
    color: var(--primary-color);
    background: linear-gradient(135deg, var(--primary-color), var(--magenta-soft));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: blur-in 2s cubic-bezier(0.23, 1, 0.32, 1) forwards, float-soft 6s ease-in-out infinite;
    animation-delay: 0.5s, 2s;
    opacity: 0;
}

.hero-collage {
    position: relative;
    width: 100%;
    height: clamp(350px, 50vh, 550px);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
}

.collage-img {
    position: absolute;
    border-radius: 4px;
    box-shadow: var(--shadow);
    transition: var(--transition);
    overflow: hidden;
    background: var(--bg-card);
}

.collage-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@keyframes swapLayers1 {

    0%,
    40% {
        z-index: 2;
        transform: translate(-15%, -10%) rotate(-2deg);
        opacity: 1;
    }

    50% {
        z-index: 1;
        transform: translate(0, 0) scale(0.9);
        opacity: 0.7;
    }

    60%,
    100% {
        z-index: 1;
        transform: translate(25%, 15%) rotate(3deg);
        opacity: 0.9;
    }
}

@keyframes swapLayers2 {

    0%,
    40% {
        z-index: 1;
        transform: translate(25%, 15%) rotate(3deg);
        opacity: 0.9;
    }

    50% {
        z-index: 2;
        transform: translate(0, 0) scale(1.1);
        opacity: 1;
    }

    60%,
    100% {
        z-index: 2;
        transform: translate(-15%, -10%) rotate(-2deg);
        opacity: 1;
    }
}

.img-1 {
    width: clamp(180px, 30vw, 320px);
    height: clamp(260px, 45vw, 480px);
    border: clamp(4px, 1vw, 8px) solid #1E1E22;
    animation: swapLayers1 8s ease-in-out infinite;
}

.img-2 {
    width: clamp(160px, 28vw, 300px);
    height: clamp(240px, 40vw, 420px);
    border: clamp(4px, 1vw, 8px) solid #1E1E22;
    animation: swapLayers2 8s ease-in-out infinite;
}

.collage-img:hover {
    z-index: 10;
    transform: translate(0, 0) scale(1.05);
}

@keyframes textAppear {
    from {
        opacity: 0;
        transform: rotateX(-40deg) translateY(30px);
    }

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

.hero-badge {
    position: absolute;
    bottom: 20px;
    right: -20px;
    background: var(--bg-card);
    padding: 25px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-soft);
    border-radius: 2px;
    z-index: 10;
    animation: float-soft 6s ease-in-out infinite;
}

.badge-title {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: var(--primary-color);
}

.badge-subtitle {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-muted);
    font-weight: 600;
}

/* About Section */
.about {
    padding: 80px 0;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    padding: 60px;
    border-radius: 4px;
    box-shadow: var(--shadow);
    position: relative;
}

.about-grid > * {
    min-width: 0;
}

.about-image {
    position: relative;
    z-index: 1;
}

.about-content {
    position: relative;
    z-index: 1;
}

.owner-image {
    width: 100%;
    max-width: 450px;
    display: block;
    margin: 0 auto;
    border-radius: 2px;
    filter: contrast(1.02);
}

.owner-title {
    text-transform: uppercase;
    letter-spacing: 0.25em;
    font-size: 0.85rem;
    color: var(--primary-color);
    font-weight: 700;
}

.owner-headline {
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    margin: 25px 0;
    color: var(--text-color);
    line-height: 1.2;
}

.owner-greeting {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.3rem;
    color: var(--text-color);
    margin-bottom: 35px;
    font-weight: 500;
}

.owner-name-italic {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 700;
    color: var(--primary-color);
}

.owner-text-wrapper {
    color: var(--text-muted);
    line-height: 2;
    font-size: 1.15rem;
}

.owner-quote {
    margin-bottom: 30px;
    font-style: italic;
    border-left: 3px solid var(--primary-color);
    padding-left: 20px;
}

.owner-desc {
    margin-bottom: 30px;
}

.owner-awards {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 0.95rem;
}

.owner-awards span i {
    color: var(--gold);
    margin-right: 10px;
}

@media (max-width: 768px) {
    .about {
        padding: 80px 0;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 30px;
        text-align: center;
    }

    .about-image {
        /* Hier liegen zwei Kinder: der Bildwechsler und die Punktereihe.
           Ohne Richtungsangabe stellt flex sie NEBENeinander - der Rahmen
           bekam dann seine Hoehe von den Puenktchen (100px) und
           aspect-ratio 4/5 machte daraus 80px Breite. Deshalb untereinander. */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .owner-image {
        max-width: 280px;
        height: auto;
    }

    .owner-headline {
        margin: 20px 0;
    }

    .owner-quote {
        text-align: left;
    }
}

/* Testimonials Section (danmall-Stil: pinke Fläche, große dunkle Serif-Zitate) */
.testimonials {
    padding: 100px 0;
    background: var(--primary-color);
}

.testimonials .display-heading {
    color: #000000;
}

.testimonials .display-heading .accent {
    color: var(--white);
}

.testimonials .display-sub {
    color: rgba(0, 0, 0, 0.75);
}

.testimonials .marble-card {
    background: transparent;
    border: none;
    box-shadow: none;
}

.testimonials-slider {
    position: relative;
    max-width: 800px;
    margin: 60px auto 0;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonial-card {
    position: absolute;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: all 0.8s ease;
    padding: 60px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.testimonial-card.active {
    opacity: 1;
    visibility: visible;
    position: relative;
}

.testimonial-stars {
    color: #000000;
    font-size: 0.9rem;
    margin-bottom: 25px;
}

.testimonial-text {
    font-family: 'Playfair Display', serif;
    font-style: normal;
    font-weight: 700;
    color: #000000;
    line-height: 1.4;
    margin-bottom: 35px;
    flex-grow: 1;
    font-size: clamp(1.5rem, 2.8vw, 2.4rem);
}

.testimonial-author {
    justify-content: center;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    padding-top: 20px;
}

.author-avatar {
    width: 45px;
    height: 45px;
    background: #000000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-weight: 700;
    font-family: 'Playfair Display', serif;
}

.author-info h4 {
    font-size: 1rem;
    color: #000000;
    margin: 0;
}

.author-info span {
    font-size: 0.8rem;
    color: rgba(0, 0, 0, 0.65);
}

.quote-icon {
    position: absolute;
    top: 30px;
    right: 40px;
    font-size: 2.5rem;
    color: rgba(0, 0, 0, 0.1);
    pointer-events: none;
}

.slider-dots {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 40px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: var(--transition);
}

.dot.active {
    background: #000000;
    transform: scale(1.3);
}

@media (max-width: 768px) {
    .testimonials {
        padding: 80px 0;
    }

    .testimonial-card {
        padding: 40px 20px;
    }

    .testimonials-slider {
        min-height: 500px;
    }
}

.whatsapp-float-wrapper {
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 2000;
}

.whatsapp-main-btn {
    width: 60px;
    height: 60px;
    background: var(--elegant-gradient);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: 0 10px 25px rgba(194, 24, 91, 0.4);
    cursor: pointer;
    transition: var(--transition);
}

.whatsapp-main-btn:hover {
    transform: scale(1.1);
}

.whatsapp-main-btn .fa-calendar-check {
    font-size: 24px;
}

.whatsapp-menu {
    position: absolute;
    bottom: 80px;
    right: 0;
    background: var(--bg-card);
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-soft);
    display: none;
    width: 250px;
    animation: slideUp 0.3s ease-out;
}

.whatsapp-menu.active {
    display: block;
}

.whatsapp-option {
    display: block;
    padding: 12px 15px;
    text-decoration: none;
    color: var(--text-color);
    border-radius: 8px;
    transition: var(--transition);
    margin-bottom: 5px;
}

.whatsapp-option:hover {
    background: rgba(255, 46, 126, 0.08);
}

.whatsapp-option strong {
    display: block;
    font-size: 0.9rem;
}

.whatsapp-option span {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.booking-option {
    background: rgba(255, 46, 126, 0.06);
    border: 1px solid var(--border-soft);
}

.booking-option:hover {
    background: var(--magenta-deep);
}

.booking-option:hover strong,
.booking-option:hover span {
    color: var(--white);
}

.booking-option strong i,
.whatsapp-option strong i {
    margin-right: 6px;
}

.float-menu-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 10px 0;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* Dark Card Effect (ersetzt Marble Card) */
.marble-card {
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
}

@media (max-width: 480px) {
    .whatsapp-float-wrapper {
        bottom: 20px;
        right: 20px;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

@media (max-width: 768px) {
    .hero {
        padding: 60px 0;
    }

    .hero .container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 50px;
    }

    .hero-content {
        order: 2;
    }

    .hero-collage {
        order: 1;
        height: 350px;
        margin-top: 0;
    }

    .hero-main-title {
        font-size: 2.2rem;
        letter-spacing: 0.1em;
        white-space: normal;
    }

    .hero-sub-title {
        font-size: 1.8rem;
        white-space: normal;
    }

    .hero-buttons {
        justify-content: center;
        flex-direction: column;
        gap: 15px;
    }

    .hero-buttons .btn {
        width: 100%;
    }

    .img-1 {
        width: 180px;
        height: 270px;
    }

    .img-2 {
        width: 160px;
        height: 240px;
    }

    .location-grid {
        grid-template-columns: 1fr;
    }
}

/* Lightbox Modal */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 3000;
    display: none;
    justify-content: center;
    align-items: center;
    cursor: zoom-out;
}

.lightbox.active {
    display: flex;
}

.lightbox-content {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    border: 5px solid #1E1E22;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.7);
    border-radius: 2px;
}

.lightbox-close {
    position: absolute;
    top: 30px;
    right: 40px;
    color: white;
    font-size: 3rem;
    font-weight: 300;
    cursor: pointer;
    line-height: 1;
}

/* ==========================================================
   danmall-Style: Hero mit Blumen-Ebenen + Display-Typografie
   ========================================================== */

.display-heading {
    font-family: 'Anton', 'Montserrat', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--white);
    line-height: 1.05;
    letter-spacing: 0.015em;
    font-size: clamp(2.2rem, 5.5vw, 4.2rem);
}

.display-heading .accent {
    color: var(--primary-color);
}

.display-sub {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    color: var(--text-muted);
    margin-top: 15px;
}

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

/* Hero */
.hero-flowers {
    position: relative;
    min-height: 96vh;
    background: radial-gradient(ellipse 46% 56% at 50% 40%, #1A1014 0%, rgba(21, 34, 58, 0) 70%), #000000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    padding: 3vh 20px 5vh;
}

.hero-keyvisual-stack {
    position: relative;
    z-index: 1;
    width: min(1250px, 94vw);
    margin-top: 0;
    -webkit-mask-image: radial-gradient(ellipse 55% 80% at 50% 52%, black 42%, transparent 78%),
        linear-gradient(to bottom, transparent 0%, black 10%);
    -webkit-mask-composite: source-in;
    mask-image: radial-gradient(ellipse 55% 80% at 50% 52%, black 42%, transparent 78%),
        linear-gradient(to bottom, transparent 0%, black 10%);
    mask-composite: intersect;
}

.hero-keyvisual {
    display: block;
    width: 100%;
    max-height: 74vh;
    object-fit: contain;
}

.hero-keyvisual-stack .kv2 {
    position: absolute;
    inset: 0;
    height: 100%;
    max-height: none;
    opacity: 0;
    animation: kv-crossfade 14s ease-in-out infinite;
}

@keyframes kv-crossfade {

    0%,
    46% {
        opacity: 0;
    }

    50%,
    96% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@media (max-width: 768px) {
    .hero-keyvisual-stack {
        width: 100vw;
        margin-top: 2vh;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 14%, black 76%, transparent 97%);
        -webkit-mask-composite: source-over;
        mask-image: linear-gradient(to bottom, transparent 0%, black 14%, black 76%, transparent 97%);
        mask-composite: add;
    }

    .hero-keyvisual {
        max-height: 52vh;
    }
}

.hero-flowers-back,
.hero-flowers-front {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.6));
}

.hero-flowers-back {
    bottom: 10vh;
    width: max(1200px, 103vw);
    height: 52vh;
    object-fit: cover;
    object-position: bottom center;
    z-index: 2;
    opacity: 0.96;
}

.hero-flowers-front {
    bottom: -5vh;
    width: max(1400px, 110vw);
    height: 58vh;
    object-fit: cover;
    object-position: bottom center;
    z-index: 3;
}

/* Verlauf ins Schwarze + Vignette: hebt Text ab und schluckt die Bildkanten der Blumen */
.hero-flowers::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom,
            rgba(0, 0, 0, 0) 55%,
            rgba(0, 0, 0, 0.35) 76%,
            rgba(0, 0, 0, 0.9) 93%,
            #000000 98%,
            #000000 100%),
        radial-gradient(ellipse 92% 85% at 50% 42%,
            rgba(0, 0, 0, 0) 62%,
            rgba(0, 0, 0, 0.25) 86%,
            rgba(0, 0, 0, 0.55) 100%);
    z-index: 3;
    pointer-events: none;
}

.hero-title {
    position: relative;
    z-index: 4;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--white);
    font-size: clamp(4.2rem, 17vw, 15.5rem);
    line-height: 0.98;
    letter-spacing: 0.03em;
    margin: clamp(150px, 30vh, 330px) 0 0;
    filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.65)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
}

.hero-title span {
    display: block;
}

.hero-title span:last-child {
    background: linear-gradient(to bottom, #ffffff 62%, #E2D6DC 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-tagline {
    position: relative;
    z-index: 4;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: clamp(1.35rem, 2.8vw, 2.1rem);
    line-height: 1.45;
    color: var(--white);
    max-width: 760px;
    margin-top: auto;
    animation: float-soft 6s ease-in-out infinite;
}

.hero-tagline .accent {
    color: var(--primary-color);
}

.hero-cta {
    position: relative;
    z-index: 4;
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: clamp(22px, 3.5vh, 38px);
}

@media (max-width: 768px) {
    .hero-flowers {
        min-height: 90vh;
        padding: 3vh 15px 4vh;
    }

    .hero-flowers-back {
        width: 150vw;
        height: 34vh;
        bottom: 18vh;
    }

    .hero-flowers-front {
        width: 170vw;
        height: 42vh;
        bottom: -4vh;
    }

    .hero-portrait {
        width: min(480px, 115vw);
    }

    .hero-cta {
        flex-direction: column;
        width: 100%;
    }

    .hero-cta .btn {
        width: 100%;
    }
}

/* Statement-Sektionen */
.statement {
    padding: 120px 0;
    position: relative;
}

.statement .container {
    max-width: 860px;
    text-align: center;
}

.statement .display-heading {
    margin-bottom: 40px;
}

.statement p {
    color: var(--text-muted);
    font-size: 1.15rem;
    line-height: 1.9;
    max-width: 640px;
    margin: 18px auto;
}

.lead-italic {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    color: var(--text-color) !important;
    font-size: 1.45rem !important;
}

.big-italic {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: clamp(1.7rem, 3.2vw, 2.4rem) !important;
    color: var(--primary-color) !important;
    margin: 35px auto !important;
}

.stack-lines {
    list-style: none;
    margin: 35px auto;
    padding: 0;
}

.stack-lines li {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.25rem, 2.4vw, 1.65rem);
    color: var(--text-color);
    margin: 14px 0;
    line-height: 1.5;
}

.stack-lines li strong {
    color: var(--primary-color);
    font-weight: 400;
}

/* Brief von Phi (danmall-Stil) */
.phi-letter {
    position: relative;
    padding: 110px 0 130px;
    overflow: hidden;
}

.letter-flower {
    position: absolute;
    top: 90px;
    left: 50%;
    transform: translateX(-56%);
    width: clamp(420px, 44vw, 720px);
    opacity: 0.9;
    pointer-events: none;
    z-index: 0;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.6));
}

.letter-headline,
.letter-intro,
.letter-body,
.letter-signature-row {
    position: relative;
    z-index: 1;
}

.letter-headline .accent {
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7), 0 8px 30px rgba(0, 0, 0, 0.55);
}

.owner-headline,
.owner-greeting {
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7), 0 6px 24px rgba(0, 0, 0, 0.5);
}

.phi-letter .container {
    position: relative;
    z-index: 1;
    max-width: 1060px;
}

.letter-headline {
    text-align: center;
    font-size: clamp(2.6rem, 6.2vw, 5.2rem);
    line-height: 1.05;
    margin-bottom: 80px;
}

.letter-intro {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.3rem, 2.4vw, 1.7rem);
    line-height: 1.6;
    color: var(--text-color);
    max-width: 400px;
    margin: 0 0 300px;
}

.letter-body {
    max-width: 470px;
    margin-left: auto;
    margin-right: 0;
}

.letter-body p {
    color: var(--text-color);
    line-height: 1.9;
    margin-bottom: 24px;
    font-size: 1rem;
}

/* Texte über Bildern: kräftiger dunkler Schatten für Lesbarkeit */
.hero-tagline,
.letter-intro,
.letter-body p,
.flowers-banner .display-heading,
.flowers-banner p {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 4px 16px rgba(0, 0, 0, 0.85), 0 10px 40px rgba(0, 0, 0, 0.6);
}

.letter-signature-row {
    max-width: 470px;
    margin-left: auto;
    margin-right: 0;
}

.letter-signature {
    display: block;
    width: 280px;
    margin-top: 30px;
    opacity: 0.95;
}

@media (max-width: 768px) {
    .phi-letter {
        padding: 80px 0 90px;
    }

    .letter-flower {
        position: static;
        transform: none;
        display: block;
        width: 84vw;
        margin: 10px auto 45px;
        opacity: 1;
    }

    .letter-intro {
        max-width: 100%;
        text-align: center;
        margin-bottom: 40px;
    }

    .letter-body {
        margin-right: 0;
        max-width: 100%;
    }

    .letter-signature-row {
        margin-right: 0;
        max-width: 100%;
    }

    .letter-signature {
        margin-left: auto;
        margin-right: auto;
    }
}

/* Blumen-Banner */
.flowers-banner {
    position: relative;
    padding: 170px 0 190px;
    overflow: hidden;
    text-align: center;
    background: #000000;
}

.flowers-banner .banner-bg {
    position: absolute;
    bottom: -18%;
    left: 50%;
    transform: translateX(-50%);
    width: max(1100px, 100vw);
    opacity: 0.55;
    pointer-events: none;
}

.flowers-banner .container {
    position: relative;
    z-index: 1;
    max-width: 800px;
}

.flowers-banner p {
    color: var(--text-color);
    font-size: 1.2rem;
    line-height: 1.9;
    margin-top: 25px;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.8);
}

/* Looks */
.looks {
    padding: 130px 0;
    background: var(--bg-section);
    position: relative;
    overflow: hidden;
}

.looks .container {
    position: relative;
    z-index: 1;
}

.looks-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 60px;
}

.look-card {
    background: transparent;
    border: none;
    padding: 35px 28px;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.look-card:hover {
    transform: translateY(-6px);
}

.look-kicker {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.05rem;
    color: var(--primary-color);
    margin-bottom: 12px;
    display: block;
}

.look-card h3 {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 1.7rem;
    letter-spacing: 0.02em;
    color: var(--white);
    margin-bottom: 18px;
}

.look-card p {
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 8px;
}

.look-card.look-cta {
    justify-content: center;
    align-items: center;
    text-align: center;
}

@media (max-width: 991px) {
    .looks-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .looks-grid {
        grid-template-columns: 1fr;
    }
}

/* Typo-Banner */
.type-banner {
    padding: 120px 0;
    text-align: center;
    background: var(--bg-dark);
}

.type-banner h2 {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(2.4rem, 6.5vw, 5rem);
    line-height: 1.1;
    color: var(--white);
    max-width: 1000px;
    margin: 0 auto;
}

.type-banner h2 .accent {
    color: var(--primary-color);
}

.type-banner p {
    margin-top: 30px;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.3rem;
    color: var(--text-muted);
}

/* Finale CTA */
.final-cta {
    position: relative;
    padding: 140px 0 160px;
    text-align: center;
    background: var(--bg-section);
    overflow: hidden;
}

.final-cta .container {
    position: relative;
    z-index: 1;
    max-width: 860px;
}

.final-cta .stack-lines {
    margin-bottom: 60px;
}

.final-cta h3 {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(2rem, 5vw, 3.4rem);
    color: var(--white);
    margin-bottom: 20px;
}

.final-cta .cta-sub {
    color: var(--text-muted);
    font-size: 1.15rem;
    margin-bottom: 40px;
}

.final-cta .hero-cta {
    margin-top: 0;
}

.final-cta .flower-decor {
    z-index: 0;
}

/* ==========================================================
   Team-Slider, Galerie-Slider, Brief-Struktur
   ========================================================== */

/* Brief: Zwischenüberschriften und Liste */
.letter-subhead {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 1.15rem;
    letter-spacing: 0.03em;
    color: var(--primary-color);
    margin: 40px 0 16px;
    line-height: 1.25;
}

.letter-subhead:first-child {
    margin-top: 0;
}

.letter-list {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
}

.letter-list li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 10px;
    color: var(--text-color);
    line-height: 1.7;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 4px 16px rgba(0, 0, 0, 0.85);
}

.letter-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 11px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary-color);
}

/* Team-Slider im Über-Uns-Bereich */
.team-slider {
    position: relative;
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 2px;
    background: var(--bg-card);
}

.team-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.team-slide.active {
    opacity: 1;
}

.team-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.team-dots .dot {
    background: rgba(255, 46, 126, 0.25);
    /* 8x8 war auf dem Handy kaum zu treffen. Bei 11 Punkten auf 268px sind
       die geforderten 44px nicht erreichbar, ohne dass sich die Flaechen
       ueberlappen und der Nachbar den Tipp abfaengt. Deshalb ein lueckenloses
       Raster: 10px sichtbar, 24x40 Trefferflaeche, die genau aneinanderstoesst. */
    position: relative;
    width: 10px;
    height: 10px;
    margin: 0 7px;
}

.team-dots .dot::after {
    content: '';
    position: absolute;
    inset: -15px -7px;
}

.team-dots {
    gap: 0;
    flex-wrap: wrap;
}

.team-dots .dot.active {
    background: var(--primary-color);
}

/* Galerie als Slider mit Bildunterschriften */
.gallery-slider-wrap {
    position: relative;
    margin-top: 50px;
}

.gallery-track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 6px;
}

.gallery-track::-webkit-scrollbar {
    display: none;
}

.gallery-track .gallery-item {
    position: relative;
    flex: 0 0 calc((100% - 48px) / 3);
    aspect-ratio: 4 / 5;
    scroll-snap-align: start;
    overflow: hidden;
    border: 1px solid var(--border-soft);
}

.gallery-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 60px 22px 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 25%, rgba(0, 0, 0, 0) 100%);
    display: flex;
    flex-direction: column;
    gap: 4px;
    pointer-events: none;
}

.gallery-title {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 1.25rem;
    letter-spacing: 0.02em;
    color: var(--white);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

.gallery-price {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--primary-color);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: var(--primary-color);
    color: #000000;
    font-size: 1.1rem;
    cursor: pointer;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
    transition: var(--transition);
}

.gallery-nav:hover {
    background: var(--magenta-soft);
    transform: translateY(-50%) scale(1.08);
}

.gallery-nav.prev {
    left: -20px;
}

.gallery-nav.next {
    right: -20px;
}

@media (max-width: 991px) {
    .gallery-track .gallery-item {
        flex: 0 0 calc((100% - 24px) / 2);
    }
}

@media (max-width: 640px) {
    .gallery-track .gallery-item {
        flex: 0 0 84%;
    }

    .gallery-nav.prev {
        left: -6px;
    }

    .gallery-nav.next {
        right: -6px;
    }

    .letter-subhead {
        font-size: 1.05rem;
        margin-top: 32px;
    }
}

/* Lightbox: Blättern, Titel und Preis */
.lightbox-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 82vw;
    max-height: 88vh;
    cursor: default;
}

.lightbox .lightbox-content {
    max-width: 82vw;
    max-height: 76vh;
    border: 5px solid #1E1E22;
}

.lightbox-caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 22px;
    text-align: center;
}

.lightbox-title {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(1.3rem, 2.4vw, 1.9rem);
    letter-spacing: 0.03em;
    color: var(--white);
}

.lightbox-price {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--primary-color);
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    background: var(--primary-color);
    color: #000000;
    font-size: 1.3rem;
    cursor: pointer;
    z-index: 3010;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: var(--transition);
}

.lightbox-nav:hover {
    background: var(--magenta-soft);
    transform: translateY(-50%) scale(1.08);
}

.lightbox-nav.prev {
    left: 3vw;
}

.lightbox-nav.next {
    right: 3vw;
}

.lightbox-close {
    z-index: 3010;
}

@media (max-width: 768px) {
    .lightbox-nav {
        width: 46px;
        height: 46px;
        font-size: 1rem;
    }

    .lightbox-nav.prev {
        left: 10px;
    }

    .lightbox-nav.next {
        right: 10px;
    }

    .lightbox .lightbox-content {
        max-width: 88vw;
        max-height: 66vh;
    }

    .lightbox-stage {
        max-width: 88vw;
    }
}

/* Gründerbild mit Signatur unter dem Brief */
.letter-founder {
    display: block;
    width: min(420px, 100%);
    height: auto;
    margin: 10px auto 0;
    filter: drop-shadow(0 0 30px rgba(255, 46, 126, 0.22)) drop-shadow(0 18px 40px rgba(0, 0, 0, 0.6));
    -webkit-mask-image: linear-gradient(to bottom, black 90%, transparent 99%);
    mask-image: linear-gradient(to bottom, black 90%, transparent 99%);
}

.letter-signature-row {
    position: relative;
}

.letter-signature-row::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 46, 126, 0.22) 0%, rgba(194, 24, 91, 0.1) 45%, rgba(255, 46, 126, 0) 70%);
    pointer-events: none;
    z-index: -1;
}

@media (max-width: 768px) {
    .letter-founder {
        width: min(330px, 88%);
    }

    .letter-signature-row::before {
        width: 340px;
        height: 340px;
    }
}

/* ==========================================================
   Zugänglichkeit & Ersatzklassen für die PHP-Fassung
   ========================================================== */

/* Sprungmarke: nur sichtbar, wenn sie den Tastaturfokus hat */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 4000;
    background: var(--primary-color);
    color: #000000;
    padding: 12px 20px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0 0 6px 0;
}

.skip-link:focus {
    left: 0;
}

/* Name unter einer Bewertung - ersetzt das frühere h4 */
.author-name {
    font-size: 1rem;
    font-weight: 700;
    color: #000000;
    margin: 0;
    line-height: 1.3;
}

/* Spaltenüberschriften im Fußbereich */
.footer-col-title {
    margin-bottom: 30px;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-color);
}

/* Beschriftung im schwebenden Buchungsmenü */
.float-menu-label {
    margin-bottom: 12px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary-color);
    font-weight: 600;
}

/* Knöpfe, die vorher divs oder Links waren, erben nicht automatisch */
.menu-toggle,
.whatsapp-main-btn,
.accordion-header,
.gallery-nav,
.lightbox-close,
.lightbox-nav {
    font-family: inherit;
    background: none;
    border: none;
}

.accordion-header {
    width: 100%;
    text-align: left;
    color: inherit;
}

.lightbox-close {
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
    cursor: pointer;
}

.gallery-nav,
.lightbox-nav {
    background: var(--primary-color);
}

.whatsapp-main-btn {
    background: var(--elegant-gradient);
}

/* Sichtbarer Fokus für Tastaturbedienung */
a:focus-visible,
button:focus-visible,
label:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 3px;
}

/* ==========================================================
   Rosen statt Blumen-Freisteller
   Die Bilder haben schwarzen Grund wie die Seite. Statt sie
   freizustellen, blenden wir die Kanten aus - dadurch gibt es
   keine Schnittkanten und die Rosen wachsen aus dem Dunkel.
   ========================================================== */

.flower-decor {
    filter: none;
    -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 42%, transparent 82%);
    mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 42%, transparent 82%);
}

/* Rosenband unten im Hero: oben und an den Seiten ausblenden */
.hero-flowers-back,
.hero-flowers-front {
    -webkit-mask-image:
        linear-gradient(to bottom, transparent 0%, #000 42%),
        linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to bottom, transparent 0%, #000 42%),
        linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%);
    mask-composite: intersect;
    filter: none;
}

.hero-flowers-back {
    opacity: 0.85;
}

/* Rosenstrauß in der Briefsektion */
.letter-flower {
    -webkit-mask-image: radial-gradient(ellipse 58% 60% at 50% 50%, #000 40%, transparent 80%);
    mask-image: radial-gradient(ellipse 58% 60% at 50% 50%, #000 40%, transparent 80%);
    filter: none;
}

/* Banner hinter „Hol dir deine Blumen" */
.flowers-banner .banner-bg {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 40%, #000 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 40%, #000 80%, transparent 100%);
    opacity: 0.8;
}

/* Der Hot Pink der Marke ist kräftiger als das alte Magenta -
   die Deko-Rosen dürfen deshalb etwas zurücktreten. */
.flower-looks-left,
.flower-services-left,
.flower-cta-left,
.flower-locations-left {
    opacity: 0.4;
}

.flower-footer {
    opacity: 0.2;
}

.flower-about {
    opacity: 1;
}

/* Feinabstimmung der Rosenbänder: kräftiger und weniger beschnitten */
.hero-flowers-back,
.hero-flowers-front {
    -webkit-mask-image:
        linear-gradient(to bottom, transparent 0%, #000 26%),
        linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
    mask-image:
        linear-gradient(to bottom, transparent 0%, #000 26%),
        linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
}

.hero-flowers-back {
    opacity: 1;
    height: 40vh;
    bottom: 16vh;
}

.hero-flowers-front {
    height: 46vh;
    bottom: -2vh;
}

/* Das Keyvisual hat einen blauen Studiohintergrund - leicht entsättigen,
   damit es sich in die schwarz-rosa Welt einfügt. */
.hero-keyvisual {
    filter: saturate(0.55) brightness(0.98) contrast(1.06);
}

/* Rosen rahmen von unten, statt Person und Schriftzug zu überdecken */
.hero-flowers-back {
    height: 30vh;
    bottom: 8vh;
    opacity: 0.9;
}

.hero-flowers-front {
    height: 36vh;
    bottom: -4vh;
    opacity: 1;
}

@media (max-width: 768px) {
    .hero-flowers-back {
        height: 24vh;
        bottom: 14vh;
    }

    .hero-flowers-front {
        height: 30vh;
        bottom: -2vh;
    }
}

/* ==========================================================
   Mitlaufender Header
   Bleibt beim Scrollen oben stehen, damit man jederzeit in eine
   andere Sektion springen kann, ohne zurück nach oben zu müssen.
   ========================================================== */

header {
    position: sticky;
    top: 0;
    z-index: 1000;
    /* Nur Farbe und Schatten werden weich überblendet - beides kostet den
       Browser nichts. Die Höhe springt einmalig beim Überschreiten der
       Schwelle, statt über jeden Frame neu berechnet zu werden. */
    transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Sobald gescrollt wird, rückt der Kopf enger zusammen und hebt sich ab */
header.scrolled {
    padding: 8px 0;
    background: rgba(0, 0, 0, 0.96);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
    border-bottom-color: rgba(255, 46, 126, 0.2);
}

/* Das Logo verkleinert sich per transform - das läuft auf der Grafikkarte
   und löst kein Neuberechnen des Layouts aus. */
.logo-img,
.logo-wordmark {
    transition: transform 0.3s ease;
    transform-origin: left center;
    will-change: transform;
}

header.scrolled .logo-img,
header.scrolled .logo-wordmark {
    transform: scale(0.78);
}

@media (max-width: 991px) {

    /* Auf dem Handy ist der mitlaufende Kopf besonders wichtig:
       das Menü bleibt so immer in Daumenreichweite. */
    header {
        position: sticky;
        top: 0;
        z-index: 2100;
    }

    header.scrolled .logo-img,
    header.scrolled .logo-wordmark {
        transform: scale(0.72);
    }
}

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

    .logo-img,
    .logo-wordmark {
        transition: none;
    }
}

/* ==========================================================
   Kopfbereich der Unterseiten
   ========================================================== */

.page-head {
    position: relative;
    padding: 90px 0 70px;
    text-align: center;
    overflow: hidden;
    background: var(--bg-section);
}

.page-head-roses {
    position: absolute;
    left: 50%;
    bottom: -30%;
    transform: translateX(-50%);
    width: max(1200px, 104vw);
    height: 100%;
    object-fit: cover;
    object-position: bottom center;
    opacity: 0.32;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 45%, #000 82%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 45%, #000 82%, transparent 100%);
}

.page-head .container {
    position: relative;
    z-index: 1;
}

.breadcrumb {
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 22px;
}

.breadcrumb a {
    color: var(--primary-color);
    text-decoration: none;
}

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

.breadcrumb span {
    margin: 0 8px;
}

.breadcrumb span[aria-current] {
    color: var(--text-color);
    margin-left: 0;
}

.page-title {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(2.2rem, 6vw, 4.4rem);
    line-height: 1.05;
    color: var(--white);
    max-width: 15ch;
    margin: 0 auto;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.9);
}

.page-intro {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    color: var(--text-muted);
    max-width: 620px;
    margin: 22px auto 0;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.9);
}

/* Auf Unterseiten beginnt der Inhalt direkt - der Abstand der ersten
   Sektion darf deshalb kleiner sein. */
.is-subpage main>section:first-of-type {
    padding-top: 70px;
}

@media (max-width: 768px) {
    .page-head {
        padding: 60px 0 48px;
    }

    .page-title {
        max-width: 100%;
    }
}

/* Lange Wörter wie „Wimpernverlängerung" dürfen die Überschrift nicht
   sprengen - trennen statt abschneiden. */
.page-title {
    max-width: 22ch;
    hyphens: auto;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
}

/* Brotkrumen mittig zusammenhalten statt über die Breite zu verteilen */
.breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.breadcrumb span {
    margin: 0;
}

/* Der Menüpunkt der Seite, auf der man gerade ist */
.nav-links a.is-current {
    color: var(--primary-color);
}

.nav-links a.is-current::after {
    content: '';
    display: block;
    height: 2px;
    margin-top: 5px;
    background: var(--primary-color);
    border-radius: 2px;
}

.mobile-nav a.is-current {
    color: var(--primary-color) !important;
}

/* ==========================================================
   Teambilder als Raster (Über-uns-Seite)
   ========================================================== */

.team-grid-section {
    padding: 120px 0;
    position: relative;
    overflow: hidden;
    background: var(--bg-section);
}

.team-grid-section .container {
    position: relative;
    z-index: 1;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 55px;
}

.team-grid-item {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: 2px;
    aspect-ratio: 4 / 5;
    background: var(--bg-card);
}

.team-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.team-grid-item:hover img {
    transform: scale(1.06);
}

/* Jedes fünfte Bild darf größer stehen - sonst wirkt das Raster monoton */
.team-grid-item:nth-child(6n + 1) {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: 1 / 1;
}

@media (max-width: 991px) {
    .team-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .team-grid-item:nth-child(6n + 1) {
        grid-column: span 2;
        grid-row: span 2;
    }
}

@media (max-width: 640px) {
    .team-grid-section {
        padding: 80px 0;
    }

    .team-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-top: 40px;
    }

    /* Auf dem Handy stünde ein doppelt breites Bild allein in der Reihe */
    .team-grid-item:nth-child(6n + 1) {
        grid-column: span 2;
        grid-row: auto;
        aspect-ratio: 3 / 2;
    }
}

/* ==========================================================
   Rosenrahmen im Startbereich
   Ein einziges Bild umschließt links, rechts und unten. Die Mitte
   ist schwarz und lässt Porträt und Schriftzug frei.
   ========================================================== */

.hero-rose-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    z-index: 3;
    pointer-events: none;
    /* Oben ausblenden, damit der Rahmen nicht an der Kopfzeile abreißt */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 14%);
}

/* Text und Knöpfe liegen über dem Rahmen */
.hero-tagline,
.hero-cta {
    z-index: 5;
}

@media (max-width: 768px) {
    .hero-rose-frame {
        /* Auf dem Handy den Ausschnitt enger fassen, damit die Rosen
           an den Seiten sichtbar bleiben statt herausgeschnitten zu werden. */
        object-position: center bottom;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%);
        mask-image: linear-gradient(to bottom, transparent 0%, #000 10%);
    }
}

/* Banner „Hol dir deine Blumen" bekommt ein volles Rosenbild */
.flowers-banner {
    position: relative;
    overflow: hidden;
}

.flowers-banner .banner-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    opacity: 0.85;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
}

.flowers-banner .display-heading,
.flowers-banner p {
    position: relative;
    z-index: 1;
}

/* ==========================================================
   WhatsApp mit Studio-Auswahl im Fußbereich
   ========================================================== */

.wa-picker {
    position: relative;
}

.wa-toggle {
    width: 40px;
    height: 40px;
    background: rgba(255, 46, 126, 0.08);
    border: none;
    border-radius: 50%;
    color: var(--white);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    font-family: inherit;
}

.wa-toggle:hover,
.wa-toggle[aria-expanded="true"] {
    background: #25D366;
    color: #06281A;
    transform: translateY(-3px);
}

.wa-menu {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    width: 250px;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7);
    z-index: 30;
}

.wa-menu[hidden] {
    display: none;
}

.wa-menu-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 10px;
}

.wa-menu-item {
    display: flex !important;
    align-items: center;
    gap: 11px;
    padding: 10px 11px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-color) !important;
    transition: var(--transition);
    margin-bottom: 4px;
}

.wa-menu-item:hover {
    background: rgba(37, 211, 102, 0.14);
    transform: none !important;
}

.wa-menu-item i {
    color: #25D366;
    font-size: 1.15rem;
    margin: 0 !important;
    width: auto !important;
}

.wa-menu-item strong {
    display: block;
    font-size: 0.88rem;
    line-height: 1.3;
}

.wa-menu-item small {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
}

@media (max-width: 480px) {
    .wa-menu {
        left: 0;
        transform: none;
        width: min(250px, calc(100vw - 60px));
    }
}

/* Das Rahmenbild hat einen schwarzen Grund, der sonst das Porträt verdecken
   würde. „screen" lässt Schwarz durchscheinen und behält nur die hellen
   Rosen - dadurch liegt der Rahmen über dem Bild, ohne es zu verstecken. */
.hero-rose-frame {
    mix-blend-mode: screen;
}

/* Ältere Regel verschob das Bannerbild um die halbe Breite - hier aufheben,
   damit es die Sektion vollständig ausfüllt. */
.flowers-banner .banner-bg {
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    max-width: none;
}

/* Die Einträge im WhatsApp-Menü sind Links im Bereich der runden Icons.
   Deren Regeln (40px Kreis, zentriert) müssen hier weichen. */
.footer-social-icons .wa-menu .wa-menu-item {
    width: auto;
    height: auto;
    min-height: 0;
    background: transparent;
    border-radius: 8px;
    justify-content: flex-start;
    font-size: 1rem;
    margin: 0 0 4px;
}

.footer-social-icons .wa-menu .wa-menu-item:hover {
    background: rgba(37, 211, 102, 0.14);
    transform: none;
}

.footer-social-icons .wa-menu .wa-menu-item span {
    display: block;
    min-width: 0;
}

.footer-social-icons .wa-menu .wa-menu-item strong {
    font-size: 0.88rem;
    color: var(--text-color);
    white-space: nowrap;
}

.footer-social-icons .wa-menu .wa-menu-item small {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Der Kreis selbst behält seine Größe */
.footer-social-icons .wa-picker {
    width: 40px;
    height: 40px;
}

/* ==========================================================
   Teambilder vollständig zeigen
   Der Kunde lädt Hoch- und Querformate gemischt hoch. Vorher wurden
   sie auf ein festes Format zugeschnitten - bei Querformaten blieb nur
   die Bildmitte übrig. Jetzt behält jedes Bild seine eigenen Maße.
   ========================================================== */

.team-slider {
    aspect-ratio: 4 / 5;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
}

.team-slide {
    /* „contain" zeigt das ganze Bild, statt es auf den Rahmen zu beschneiden */
    object-fit: contain;
    /* kein eigener Hintergrund mehr: darunter liegt die unscharfe Fassung */
    z-index: 1;
}

/* Dasselbe Bild unscharf als Fuellung der Raender. Die Teamfotos reichen
   von hoch (0,66) bis quer (1,51); ein fester Rahmen laesst sonst bei jedem
   zweiten Bild einen leeren Balken stehen. */
.team-slide-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(26px) saturate(1.3);
    /* etwas groesser skaliert, sonst werden die Unschaerfe-Raender sichtbar */
    transform: scale(1.2);
    opacity: 0.5;
    z-index: 0;
}

/* Bildunterschrift im Bildwechsler */
.team-slide-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 40px 18px 14px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0) 100%);
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 2;
}

.team-slide.active~.team-slide-caption,
.team-slider .team-slide-caption.active {
    opacity: 1;
}

.team-slide-caption strong {
    display: block;
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 1.05rem;
    letter-spacing: 0.03em;
    color: var(--white);
}

.team-slide-caption span {
    display: block;
    font-size: 0.82rem;
    color: var(--primary-color);
    margin-top: 2px;
}

/* Bilderwand: Mauerwerk statt starrem Raster, damit jedes Bild
   sein eigenes Format behält und nichts abgeschnitten wird. */
.team-grid {
    display: block;
    column-count: 4;
    column-gap: 18px;
    margin-top: 55px;
}

.team-grid-item {
    break-inside: avoid;
    margin: 0 0 18px;
    aspect-ratio: auto;
    position: relative;
}

.team-grid-item img {
    width: 100%;
    height: auto;
    display: block;
}

.team-grid-item:nth-child(6n + 1) {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: auto;
}

/* Bildunterschrift auf der Bilderwand */
.team-grid-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 45px 14px 12px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 25%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}

.team-grid-caption strong {
    display: block;
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    color: var(--white);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

.team-grid-caption span {
    display: block;
    font-size: 0.78rem;
    color: var(--primary-color);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

@media (max-width: 991px) {
    .team-grid {
        column-count: 3;
    }
}

@media (max-width: 640px) {
    .team-grid {
        column-count: 2;
        column-gap: 12px;
    }

    .team-grid-item {
        margin-bottom: 12px;
    }
}