/* Theme Name: Haudegen Theme
Version: 1.1
Author: Haudegen Webesign
Author URI: https://haudegen-webdesign.de */

@font-face {
    font-family: 'Inter 18pt';
    src: url('/fonts/Inter18pt-Regular.woff2') format('woff2'),
        url('/fonts/Inter18pt-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display SC';
    src: url('/fonts/PlayfairDisplaySC-Bold.woff2') format('woff2'),
        url('/fonts/PlayfairDisplaySC-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}



.desktop-only {
    display: none;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
    top: 0;
    left: 0;
}

.z-1 {
    z-index: 1;
}

.z-2 {
    z-index: 2;
}

.z-3 {
    z-index: 3;
}

.background {
    background-size: cover;
}

.align-center {
    text-align: center;
}



/*----------------------------------------
-------------MARGIN & PADDING-------------
----------------------------------------*/

.ma-bo {
    margin-bottom: 20px;
}

.ma-bo-10 {
    margin-bottom: 10px;
}

.ma-bo-20 {
    margin-bottom: 20px;
}

.ma-bo-40 {
    margin-bottom: 40px;
}

.section-padding, .left-padding, .right-padding {
    padding: 40px;
}

.item-padding {
    padding: 20px;
}

 



/*----------------------------------------
---------------FLEX & GRID----------------
----------------------------------------*/


.double-grid, .triple-grid {
    display: grid;
}

.flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.flex-start {
    align-items: flex-start;
}

.flex-horizontal {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.gap-5 {
    gap: 5px;
}

.gap-10 {
    gap: 10px;
}

.gap-20 {
    gap: 20px;
}

.gap-40 {
    gap: 40px;
}


/*------------------------------------------
-----------------ANIMATION------------------
------------------------------------------*/

.overflow-hidden {
    overflow: hidden;
}

.transform {
    opacity: 0;
    transition-duration: 0.6s;
    transition-timing-function: ease-out;
}

.transform-small {
    transform: translateY(50px);
}

.transform-middle {
    transform: translateY(100px);
}

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

.transform.aktiv {
    opacity: 0;
    transform: translateY(0);
}

.delay-1 {
    transition-delay: 0.2s;
}

.delay-2 {
    transition-delay: 0.4s;
}

.delay-3 {
    transition-delay: 0.6s;
}

.delay-4 {
    transition-delay: 0.8s;
}

.delay-5 {
    transition-delay: 1s;
}

.delay-6 {
    transition-delay: 1.2s;
}

.delay-7 {
    transition-delay: 1.4s;
}

.delay-8 {
    transition-delay: 1.6s;
}




.max-700 {
    max-width: 700px;
}

/*------------Brillen-Bild------------*/

.brillen-bild-container {
    max-width: 700px;
}

.brillen-bild-container .brillen-bild {
    opacity: 0;
    transition-duration: 0.6s;
    transition-timing-function: ease-out;
}

.brillen-bild-container.aktiv .brillen-bild {
    opacity: 1;
}


@media(min-width: 760px) {

    .section-padding, .left-padding, .right-padding {
        padding: 60px 100px;
    }
}

@media(min-width: 1040px) {

    .mobile-only {
        display: none;
    }

    .desktop-only {
        display: block;
    }

    .section-padding {
        padding: 60px 100px;
    }

    .left-padding {
        padding: 60px 0 60px 100px;
    }

    .right-padding {
        padding: 60px 100px 60px 0;
    }

    .double-grid {
        grid-template-columns: repeat(2, 1fr);    
    }

    .triple-grid {
        grid-template-columns: repeat(3, 1fr);    
    }

}

@media(min-width: 1400px) {
    
    .section-padding {
        padding: 80px 15vw;
    }

    .left-padding {
        padding: 80px 0 80px 15vw;
    }

    .right-padding {
        padding: 80px 15vw 80px 0;
    }

}

/*
Theme Name: Badblick
Theme URI: https://badblick.de
Author: Badblick Team
Description: Premium Badblick WordPress Theme - Badsanierung aus einer Hand
Version: 1.0.0
License: Private
Text Domain: badblick
*/

/* ============================
   CSS Variables / Design Tokens
   ============================ */
   :root {
    /* Core Brand Colors */
    --background: hsl(0, 0%, 100%);
    --foreground: hsl(210, 50%, 15%);
    
    --card: hsl(0, 0%, 100%);
    --card-foreground: hsl(210, 50%, 15%);
    
    /* Primary - Deep Navy Blue */
    --primary: hsl(210, 60%, 18%);
    --primary-foreground: hsl(0, 0%, 100%);
    
    /* Secondary - Light Blue Gray */
    --secondary: hsl(200, 25%, 95%);
    --secondary-foreground: hsl(210, 60%, 18%);
    
    /* Muted - Soft Gray */
    --muted: hsl(210, 20%, 96%);
    --muted-foreground: hsl(210, 15%, 45%);
    
    /* Accent - Warm Gold */
    --accent: hsl(38, 70%, 55%);
    --accent-foreground: hsl(0, 0%, 100%);
    
    --border: hsl(210, 25%, 88%);
    
    /* Custom Brand Colors */
    --navy: hsl(210, 60%, 18%);
    --navy-light: hsl(210, 50%, 25%);
    --navy-dark: hsl(210, 65%, 12%);
    --gold: hsl(38, 70%, 55%);
    --ice-blue: hsl(195, 30%, 92%);
    
    /* Shadows */
    --shadow-elegant: 0 10px 40px -10px hsla(210, 60%, 18%, 0.25);
    --shadow-card: 0 4px 20px -4px hsla(210, 60%, 18%, 0.1);
    --shadow-hover: 0 20px 50px -15px hsla(210, 60%, 18%, 0.3);
    --shadow-bubble: 0 20px 60px -15px hsla(210, 60%, 18%, 0.25),
                     0 8px 20px -8px hsla(210, 60%, 18%, 0.15),
                     inset 0 -5px 20px hsla(0, 0%, 100%, 0.1);
    
    /* Spacing */
    --container-padding: 1.5rem;
    --container-max: 1400px;
}

/* ============================
   Base Styles
   ============================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
    background-color: var(--background);
    color: var(--foreground);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    line-height: 1.2;
}

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

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

/* ============================
   Container
   ============================ */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

@media (min-width: 1024px) {
    .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* ============================
   Header
   ============================ */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    transition: all 0.5s ease;
    padding: 1.5rem 0;
    background: transparent;
}

.header.scrolled {
    background: hsla(0, 0%, 100%, 0.95);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-elegant);
    padding: 0.75rem 0;
}

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

.logo-link {
    position: relative;
    z-index: 10;
}

.logo {
    height: 3rem;
    width: auto;
    transition: all 0.3s ease;
}

@media (min-width: 768px) {
    .logo {
        height: 3.5rem;
    }
}

/* Desktop Navigation */
.nav-desktop {
    display: none;
    align-items: center;
    gap: 2rem;
}

@media (min-width: 768px) {
    .nav-desktop {
        display: flex;
    }
}

.nav-link {
    position: relative;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.025em;
    color: var(--primary);
    transition: color 0.3s ease;
}

.header.scrolled .nav-link {
    color: var(--foreground);
}

.nav-link:hover {
    color: var(--gold);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gold);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: flex;
    position: relative;
    z-index: 60;
    padding: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--primary);
}

.header.scrolled .mobile-menu-toggle {
    color: var(--foreground);
}

@media (min-width: 768px) {
    .mobile-menu-toggle {
        display: none;
    }
}

.menu-icon,
.close-icon {
    width: 24px;
    height: 24px;
}

.hidden {
    display: none;
}

/* Mobile Menu */
.mobile-menu {
    position: fixed;
    inset: 0;
    background: var(--primary);
    z-index: 55;
    transform: translateX(100%);
    transition: transform 0.5s ease;
}

.mobile-menu.open {
    transform: translateX(0);
}

.mobile-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 2rem;
}

.mobile-nav-link {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    color: var(--primary-foreground);
    letter-spacing: 0.05em;
    transition: color 0.3s ease;
}

.mobile-nav-link:hover {
    color: var(--gold);
}

/* ============================
   Buttons
   ============================ */
.btn-premium, .wpcf7-submit {
    display: inline-block;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--primary-foreground);
    background: var(--primary);
    border: 2px solid var(--primary);
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.wpcf7-submit {
    min-width: 60px;
    min-height: 15px;
}

.btn-premium:hover {
    background: var(--navy-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

/* ============================
   Hero Section
   ============================ */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: var(--secondary);
    padding-top: 6rem;
    overflow: hidden;
}

.hero-container {
    position: relative;
    z-index: 10;
}

.hero-grid {
    display: grid;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .hero-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.hero-content {
    padding-right: 0;
}

@media (min-width: 1024px) {
    .hero-content {
        padding-right: 2rem;
    }
}

.hero-title {
    font-size: 1.875rem;
    color: var(--foreground);
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .hero-title {
        font-size: 2.25rem;
    }
}

@media (min-width: 1024px) {
    .hero-title {
        font-size: 3rem;
    }
}

.hero-text {
    color: var(--muted-foreground);
    font-size: 1rem;
    line-height: 1.75;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .hero-text {
        font-size: 1.125rem;
    }
}

/* Hero Bubbles */
.hero-bubbles {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    max-width: 550px;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .hero-bubbles {
        margin: 0;
    }
}

.bubble {
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid hsla(0, 0%, 100%, 0.8);
    box-shadow: var(--shadow-bubble);
}

.bubble img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.bubble-jochen {
    top: 5%;
    left: 5%;
    width: 45%;
    z-index: 20;
}

.bubble-julia {
    top: 0%;
    right: 5%;
    width: 42%;
    z-index: 30;
}

.bubble-yves {
    bottom: 15%;
    left: 30%;
    width: 42%;
    z-index: 10;
}

.deco-circle {
    position: absolute;
    border-radius: 50%;
}

.deco-1 {
    top: 35%;
    left: 55%;
    width: 4%;
    aspect-ratio: 1;
    background: hsla(38, 70%, 55%, 0.3);
}

.deco-2 {
    bottom: 20%;
    right: 10%;
    width: 6%;
    aspect-ratio: 1;
    background: hsla(210, 60%, 18%, 0.2);
}

/* Hero Background Pattern */
.hero-bg-pattern {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    opacity: 0.1;
    pointer-events: none;
}

.pattern-circle {
    position: absolute;
    border-radius: 50%;
    border: 2px solid hsla(210, 60%, 18%, 0.3);
}

.pattern-1 {
    top: 5rem;
    right: 5rem;
    width: 16rem;
    height: 16rem;
}

.pattern-2 {
    top: 10rem;
    right: 10rem;
    width: 12rem;
    height: 12rem;
    border-width: 1px;
    border-color: hsla(210, 60%, 18%, 0.2);
}

.pattern-3 {
    bottom: 5rem;
    right: 4rem;
    width: 8rem;
    height: 8rem;
    border-width: 1px;
    border-color: hsla(210, 60%, 18%, 0.2);
}

/* ============================
   Tagline Section
   ============================ */
.tagline {
    padding: 1.5rem 0;
    background: var(--primary);
}

.tagline-text {
    text-align: center;
    color: var(--gold);
    font-family: 'Playfair Display', serif;
    font-size: 1.125rem;
    font-style: italic;
}

@media (min-width: 768px) {
    .tagline-text {
        font-size: 1.25rem;
    }
}

@media (min-width: 1024px) {
    .tagline-text {
        font-size: 1.5rem;
    }
}

/* ============================
   Perfektion Section
   ============================ */
.perfektion {
    padding: 5rem 0;
    background: var(--background);
}

@media (min-width: 1024px) {
    .perfektion {
        padding: 7rem 0;
    }
}

.perfektion-grid {
    display: grid;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .perfektion-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
}

.perfektion-image img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 0.5rem;
    box-shadow: var(--shadow-elegant);
}

.perfektion-content {
    padding-left: 0;
}

@media (min-width: 1024px) {
    .perfektion-content {
        padding-left: 2rem;
    }
}

.section-title {
    font-size: 1.875rem;
    color: var(--foreground);
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .section-title {
        font-size: 2.25rem;
    }
}

@media (min-width: 1024px) {
    .section-title {
        font-size: 3rem;
    }
}

.gold-line {
    height: 2px;
    width: 4rem;
    background: var(--gold);
    margin-bottom: 2rem;
}

.gold-line-center {
    margin-left: auto;
    margin-right: auto;
}

.section-text {
    color: var(--muted-foreground);
    font-size: 1rem;
    line-height: 1.75;
    margin-bottom: 1.5rem;
}

@media (min-width: 1024px) {
    .section-text {
        font-size: 1.125rem;
    }
}

.section-text-highlight {
    color: var(--foreground);
    font-weight: 500;
}

.text-center {
    text-align: center;
}

/* ============================
   Team Section
   ============================ */
.team-member {
    padding: 4rem 0;
}

@media (min-width: 1024px) {
    .team-member {
        padding: 6rem 0;
    }
}

.team-member-light {
    background: var(--background);
}

.team-member-dark {
    background: var(--primary);
    color: var(--primary-foreground);
}

.team-grid {
    display: grid;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .team-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
}

.team-image-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
}

@media (min-width: 1024px) {
    .team-grid-right .team-image-wrapper {
        order: 2;
    }
    
    .team-grid-right .team-content {
        order: 1;
    }
    
    .team-grid-left .team-image-wrapper {
        order: 1;
    }
    
    .team-grid-left .team-content {
        order: 2;
    }
}

.team-bubble {
    width: 16rem;
    height: 16rem;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: var(--shadow-bubble);
}

@media (min-width: 768px) {
    .team-bubble {
        width: 20rem;
        height: 20rem;
    }
}

@media (min-width: 1024px) {
    .team-bubble {
        width: 24rem;
        height: 24rem;
    }
}

.team-bubble img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

/* Team Decorative Bubbles */
.team-deco {
    position: absolute;
    border-radius: 50%;
}

.team-deco-1 {
    width: 3rem;
    height: 3rem;
    background: hsla(38, 70%, 55%, 0.3);
    top: -1rem;
}

.team-image-left .team-deco-1 {
    right: -1rem;
}

.team-image-right .team-deco-1 {
    left: -1rem;
}

.team-deco-2 {
    width: 2rem;
    height: 2rem;
    background: hsla(210, 60%, 18%, 0.2);
    bottom: 2rem;
}

.team-deco-2-dark {
    width: 2rem;
    height: 2rem;
    background: hsla(0, 0%, 100%, 0.2);
    bottom: 2rem;
}

.team-image-left .team-deco-2,
.team-image-left .team-deco-2-dark {
    left: -2rem;
}

.team-image-right .team-deco-2,
.team-image-right .team-deco-2-dark {
    right: -2rem;
}

.team-deco-3 {
    width: 1.5rem;
    height: 1.5rem;
    background: hsla(38, 70%, 55%, 0.2);
    top: 50%;
}

.team-image-left .team-deco-3 {
    left: -1.5rem;
}

.team-image-right .team-deco-3 {
    right: -1.5rem;
}

.team-content-left {
    padding-right: 0;
}

@media (min-width: 1024px) {
    .team-content-left {
        padding-right: 2rem;
    }
}

.team-content-right {
    padding-left: 0;
}

@media (min-width: 1024px) {
    .team-content-right {
        padding-left: 2rem;
    }
}

.team-name {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
    .team-name {
        font-size: 1.875rem;
    }
}

@media (min-width: 1024px) {
    .team-name {
        font-size: 2.25rem;
    }
}

.team-title {
    color: var(--gold);
    font-size: 1.125rem;
    margin-bottom: 0.25rem;
}

.team-subtitle {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted-foreground);
    margin-bottom: 1.5rem;
}

.team-subtitle-dark {
    color: hsla(0, 0%, 100%, 0.6);
}

.team-description {
    font-size: 1rem;
    line-height: 1.75;
}

@media (min-width: 1024px) {
    .team-description {
        font-size: 1.125rem;
    }
}

.team-member-light .team-description {
    color: var(--muted-foreground);
}

.team-member-dark .team-description {
    color: hsla(0, 0%, 100%, 0.9);
}

/* ============================
   Gallery Section
   ============================ */
.gallery {
    padding: 4rem 0;
    background: var(--background);
    border-top: 1px solid var(--border);
}

@media (min-width: 1024px) {
    .gallery {
        padding: 5rem 0;
    }
}

.gallery-title {
    font-size: 1.5rem;
    color: var(--foreground);
    text-align: center;
    font-style: italic;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .gallery-title {
        font-size: 1.875rem;
    }
}

@media (min-width: 1024px) {
    .gallery-title {
        font-size: 2.25rem;
    }
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    max-width: 56rem;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.gallery-item {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

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

/* ============================
   Contact Placeholder
   ============================ */
.contact-placeholder {
    padding: 5rem 0;
    background: var(--secondary);
}

.contact-placeholder-text {
    text-align: center;
    color: var(--muted-foreground);
    font-size: 1.125rem;
    margin-top: 1.5rem;
}

/* ============================
   Footer
   ============================ */
.footer {
    background: var(--navy-dark);
    color: var(--primary-foreground);
    padding: 3rem 0;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

@media (min-width: 768px) {
    .footer-content {
        flex-direction: row;
        justify-content: space-between;
    }
}

.footer-logo {
    height: 2.5rem;
    width: auto;
}

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

.footer-link {
    font-size: 0.875rem;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: var(--gold);
}

.footer-copyright {
    font-size: 0.875rem;
    color: hsla(0, 0%, 100%, 0.6);
}

.footer-bottom {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid hsla(0, 0%, 100%, 0.1);
    text-align: center;
}

.footer-bottom p {
    font-size: 0.875rem;
    color: hsla(0, 0%, 100%, 0.5);
}

/* ============================
   Animations
   ============================ */

/* Float Animations */
@keyframes floatSlow {
    0%, 100% { 
        transform: translateY(0px) scale(1); 
    }
    50% { 
        transform: translateY(-15px) scale(1.02); 
    }
}

@keyframes floatMedium {
    0%, 100% { 
        transform: translateY(0px) scale(1); 
    }
    50% { 
        transform: translateY(-12px) scale(1.01); 
    }
}

@keyframes floatFast {
    0%, 100% { 
        transform: translateY(0px) scale(1); 
    }
    50% { 
        transform: translateY(-8px) scale(1.015); 
    }
}

.animate-float-slow {
    animation: floatSlow 12s ease-in-out infinite;
}

.animate-float-medium {
    animation: floatMedium 10s ease-in-out infinite;
}

.animate-float-fast {
    animation: floatFast 8s ease-in-out infinite;
}

/* Fade In Up Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
}

.animation-delay-200 {
    animation-delay: 200ms;
}

.animation-delay-400 {
    animation-delay: 400ms;
}

.animation-delay-600 {
    animation-delay: 600ms;
}

/* Slide In Animations */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-60px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(60px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.slide-in-left {
    animation: slideInLeft 0.8s ease-out forwards;
    opacity: 0;
}

.slide-in-right {
    animation: slideInRight 0.8s ease-out forwards;
    opacity: 0;
}

/* ============================
   Utility Classes
   ============================ */
.text-gold {
    color: var(--gold);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================
   Single Project (Projekt) Page
   ============================ */

/* Project Hero */
.projekt-hero {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: flex-end;
    background: var(--primary);
    overflow: hidden;
}

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

.projekt-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.projekt-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        hsla(210, 60%, 12%, 0.9) 0%,
        hsla(210, 60%, 12%, 0.5) 50%,
        hsla(210, 60%, 12%, 0.2) 100%
    );
}

.projekt-hero-content {
    position: relative;
    z-index: 10;
    padding: 4rem 0;
    color: var(--primary-foreground);
}

.projekt-title {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
    .projekt-title {
        font-size: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .projekt-title {
        font-size: 3.5rem;
    }
}

.projekt-subtitle {
    font-size: 1.125rem;
    color: var(--gold);
    font-style: italic;
}

@media (min-width: 768px) {
    .projekt-subtitle {
        font-size: 1.25rem;
    }
}

/* Project Introduction */
.projekt-intro {
    padding: 4rem 0;
    background: var(--background);
}

@media (min-width: 1024px) {
    .projekt-intro {
        padding: 5rem 0;
    }
}

.projekt-intro-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.projekt-text {
    color: var(--muted-foreground);
    font-size: 1rem;
    line-height: 1.8;
}

@media (min-width: 768px) {
    .projekt-text {
        font-size: 1.125rem;
    }
}

.projekt-text p {
    margin-bottom: 1.5rem;
}

.projekt-text p:last-child {
    margin-bottom: 0;
}

/* Project Gallery */
.projekt-gallery {
    padding: 4rem 0;
    background: var(--secondary);
}

@media (min-width: 1024px) {
    .projekt-gallery {
        padding: 5rem 0;
    }
}

.projekt-gallery-title {
    text-align: center;
    font-size: 1.5rem;
    color: var(--foreground);
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .projekt-gallery-title {
        font-size: 2rem;
    }
}

.projekt-gallery-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 640px) {
    .projekt-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .projekt-gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}

.projekt-gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
    aspect-ratio: 4/3;
}

.projekt-gallery-link {
    display: block;
    width: 100%;
    height: 100%;
}

.projekt-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

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

.projekt-gallery-hover {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsla(210, 60%, 18%, 0.6);
    color: var(--primary-foreground);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.projekt-gallery-item:hover .projekt-gallery-hover {
    opacity: 1;
}

/* Project Contact CTA */
.projekt-contact {
    padding: 5rem 0;
    background: var(--background);
}

.projekt-contact-content {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.projekt-contact-text {
    color: var(--muted-foreground);
    font-size: 1.125rem;
    margin-bottom: 2rem;
}

.projekt-contact-cta {
    display: flex;
    justify-content: center;
}

/* Project Navigation */
.projekt-navigation {
    padding: 3rem 0;
    background: var(--secondary);
    border-top: 1px solid var(--border);
}

.projekt-nav-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    text-align: center;
}

@media (min-width: 768px) {
    .projekt-nav-grid {
        grid-template-columns: 1fr auto 1fr;
        gap: 2rem;
        align-items: center;
    }
}

.projekt-nav-prev {
    text-align: left;
}

.projekt-nav-next {
    text-align: right;
}

.projekt-nav-link {
    display: inline-block;
    padding: 0.75rem 1rem;
    transition: color 0.3s ease;
}

.projekt-nav-link:hover {
    color: var(--gold);
}

.projekt-nav-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted-foreground);
    margin-bottom: 0.25rem;
}

.projekt-nav-title {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    color: var(--foreground);
}

@media (min-width: 768px) {
    .projekt-nav-title {
        font-size: 1.125rem;
    }
}

/* ============================
   Archive (All Projects) Page
   ============================ */

/* Archive Hero */
.archive-hero {
    padding: 8rem 0 4rem;
    background: var(--secondary);
    text-align: center;
}

.archive-title {
    font-size: 2rem;
    color: var(--foreground);
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .archive-title {
        font-size: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .archive-title {
        font-size: 3rem;
    }
}

.archive-subtitle {
    color: var(--muted-foreground);
    font-size: 1.125rem;
    max-width: 600px;
    margin: 0 auto 2rem;
}

/* Projects Grid */
.archive-projects {
    padding: 4rem 0;
    background: var(--background);
}

.projects-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 640px) {
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .projects-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Project Card */
.project-card {
    background: var(--card);
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: all 0.3s ease;
}

.project-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.project-card-link {
    display: block;
}

.project-card-image {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--muted);
}

.project-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.project-card:hover .project-card-img {
    transform: scale(1.05);
}

.project-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--muted-foreground);
}

.project-card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsla(210, 60%, 18%, 0.7);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.project-card:hover .project-card-overlay {
    opacity: 1;
}

.project-card-cta {
    padding: 0.75rem 1.5rem;
    background: var(--gold);
    color: var(--primary-foreground);
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 9999px;
}

.project-card-content {
    padding: 1.5rem;
}

.project-card-title {
    font-size: 1.25rem;
    color: var(--foreground);
    margin-bottom: 0.5rem;
}

.project-card-subtitle {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

/* Archive Pagination */
.archive-pagination {
    margin-top: 3rem;
    display: flex;
    justify-content: center;
}

.archive-pagination .nav-links {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.archive-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    font-size: 0.875rem;
    color: var(--foreground);
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 0.25rem;
    transition: all 0.3s ease;
}

.archive-pagination .page-numbers:hover {
    background: var(--secondary);
    border-color: var(--primary);
}

.archive-pagination .page-numbers.current {
    background: var(--primary);
    color: var(--primary-foreground);
    border-color: var(--primary);
}

/* Archive Empty State */
.archive-empty {
    text-align: center;
    padding: 4rem 0;
}

.archive-empty p {
    color: var(--muted-foreground);
    font-size: 1.125rem;
    margin-bottom: 2rem;
}

/* Archive Contact CTA */
.archive-contact {
    padding: 5rem 0;
    background: var(--secondary);
}

.archive-contact-content {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.archive-contact-text {
    color: var(--muted-foreground);
    font-size: 1.125rem;
    margin-bottom: 2rem;
}

/* ============================
   Lightbox
   ============================ */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsla(0, 0%, 0%, 0.9);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

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

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

.lightbox-content img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
}

.lightbox-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    background: hsla(0, 0%, 100%, 0.1);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s ease;
}

.lightbox-close:hover {
    background: hsla(0, 0%, 100%, 0.2);
}