/* ======== SCHEER - Utility Classes ======== */

/* ======== State & Visibility Utilities ======== */
.is-hidden { display: none; }
.is-visible { display: block; }
.is-flex { display: flex; }
.is-faded { opacity: 0; }
.is-shown { opacity: 1; }
.is-invisible { visibility: hidden; }
.no-transition { transition: none; }

/* ======== Links without href ======== */
a[role="button"] {
    cursor: pointer;
}

/* ======== Typography - Text Colors ======== */
.text-gold { color: #a7915d; }
.text-gold-light { color: #a7915d; font-weight: 400; }
.text-gold-16 { color: #a7915d; font-size: 16px; }
.text-gold-link { color: #a7915d; text-decoration: none; }

/* ======== Typography - Headings ======== */
.heading-lg { font-family: 'Cormorant Garamond', serif; font-size: clamp(48px, 8vw, 72px); font-weight: 300; color: #f5f5f0; margin-bottom: 25px; letter-spacing: 4px; }
.heading-md { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 400; color: #f5f5f0; margin-bottom: 12px; letter-spacing: 1px; }
.heading-sm { font-family: 'Cormorant Garamond', serif; font-size: 20px; color: #a7915d; }
.heading-22 { font-family: 'Cormorant Garamond', serif; font-size: 22px; color: #f5f5f0; margin-bottom: 6px; }

.heading-clamp { font-family: 'Cormorant Garamond', serif; font-size: clamp(42px, 6vw, 58px); font-weight: 300; color: #f5f5f0; margin-bottom: 25px; letter-spacing: 3px; }
.heading-clamp-lg { font-family: 'Cormorant Garamond', serif; font-size: clamp(42px, 7vw, 80px); font-weight: 300; color: #f5f5f0; line-height: 1.15; margin-bottom: 40px; }
.heading-clamp-md { font-family: 'Cormorant Garamond', serif; font-size: clamp(36px, 6vw, 52px); font-weight: 300; color: #f5f5f0; margin-bottom: 25px; letter-spacing: 3px; }
.heading-clamp-alt { font-family: 'Cormorant Garamond', serif; font-size: clamp(36px, 6vw, 52px); font-weight: 300; color: #f5f5f0; line-height: 1.3; margin-bottom: 20px; letter-spacing: 3px; }

.heading-68-gold { font-family: 'Cormorant Garamond', serif; font-size: 48px; font-weight: 300; color: #a7915d; margin-bottom: 12px; text-shadow: 1px 1px 2px rgba(0,0,0,0.7), 0 2px 4px rgba(0,0,0,0.5); }
.heading-58-gold { font-family: 'Cormorant Garamond', serif; font-size: 58px; color: #a7915d; font-weight: 300; margin-bottom: 15px; line-height: 1; }
.heading-42-gold { font-family: 'Cormorant Garamond', serif; font-size: 42px; color: #a7915d; font-weight: 300; }
.heading-42-gold-sm { font-family: 'Cormorant Garamond', serif; font-size: 42px; color: #a7915d; font-weight: 300; margin-bottom: 8px; }
.heading-36-gold { font-family: 'Cormorant Garamond', serif; font-size: 36px; font-weight: 400; color: #a7915d; margin-bottom: 30px; letter-spacing: 2px; }
.heading-32-gold { font-family: 'Cormorant Garamond', serif; font-size: 32px; color: #a7915d; font-weight: 400; }
.heading-28-gold { font-family: 'Cormorant Garamond', serif; font-size: 28px; color: #a7915d; }
.heading-26-gold { font-family: 'Cormorant Garamond', serif; font-size: 26px; color: #a7915d; margin-bottom: 15px; font-weight: 400; }
.heading-20-gold { font-family: 'Cormorant Garamond', serif; font-size: 20px; color: #a7915d; font-weight: 400; }

.heading-42-white { font-family: 'Cormorant Garamond', serif; font-size: 42px; font-weight: 300; color: #f5f5f0; }
.heading-36-white { font-family: 'Cormorant Garamond', serif; font-size: 36px; color: #f5f5f0; margin-bottom: 30px; font-weight: 300; }
.heading-28-white { font-family: 'Cormorant Garamond', serif; font-size: 28px; color: #f5f5f0; margin-bottom: 12px; font-weight: 600; }
.heading-28-white-sm { font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 400; color: #f5f5f0; margin-bottom: 15px; }
.heading-28-white-xs { font-family: 'Cormorant Garamond', serif; font-size: 28px; color: #f5f5f0; margin-bottom: 8px; }
.heading-26-white { font-family: 'Cormorant Garamond', serif; font-size: 26px; color: #f5f5f0; margin-bottom: 18px; line-height: 1.3; letter-spacing: 0.5px; }
.heading-24-white { font-family: 'Cormorant Garamond', serif; font-size: 24px; color: #f5f5f0; margin-bottom: 12px; letter-spacing: 1px; }
.heading-20-white { font-size: 20px; color: #f5f5f0; margin-bottom: 12px; font-weight: 600; }

/* ======== Typography - Body Text ======== */
.body-text { font-family: 'Raleway', sans-serif; font-size: 15px; color: rgba(245,245,240,0.7); line-height: 2.2; font-weight: 300; }
.body-text-lg { font-family: 'Raleway', sans-serif; font-size: 16px; color: rgba(245,245,240,0.75); line-height: 2; margin-bottom: 25px; font-weight: 300; }
.body-text-wide { font-family: 'Raleway', sans-serif; font-size: 15px; color: rgba(245,245,240,0.7); line-height: 2.4; font-weight: 300; }
.body-text-bright { font-family: 'Raleway', sans-serif; font-size: 15px; color: rgba(245,245,240,0.8); }
.body-text-mb25 { font-family: 'Raleway', sans-serif; font-size: 15px; color: rgba(245,245,240,0.7); line-height: 2.2; font-weight: 300; margin-bottom: 25px; }

.text-15 { font-size: 15px; line-height: 1.6; color: #c9c9c4; }
.text-15-white { display: block; font-size: 15px; color: #f5f5f0; font-weight: 400; }
.text-15-bold { font-size: 15px; font-weight: 600; color: #f5f5f0; font-family: 'Raleway', sans-serif; margin-bottom: 6px; }
.text-15-muted { font-size: 15px; line-height: 1.8; color: #888; }
.text-14-light { font-family: 'Raleway', sans-serif; color: rgba(245,245,240,0.5); font-size: 14px; line-height: 1.8; font-weight: 300; }
.text-14-muted { font-family: 'Raleway', sans-serif; font-size: 14px; color: rgba(245,245,240,0.5); font-weight: 300; letter-spacing: 1px; }
.text-24 { font-size: 24px; }
.text-18-italic { font-size: 18px; color: #a7915d; font-weight: 500; margin-bottom: 25px; font-style: italic; }

.text-20-muted { font-family: 'Cormorant Garamond', serif; font-size: 20px; color: rgba(245, 245, 240, 0.6); line-height: 1.8; max-width: 650px; margin: 0 auto 45px; }
.text-20-italic-muted { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-style: italic; color: #f5f5f0; max-width: 550px; margin: 0 auto 50px; line-height: 1.7; }
.text-22-quote { font-family: 'Cormorant Garamond', serif; font-size: 22px; line-height: 1.8; color: #f5f5f0; margin-bottom: 40px; font-weight: 300; flex-grow: 1; }
.text-18-italic-muted { font-family: 'Cormorant Garamond', serif; font-size: 18px; font-style: italic; color: rgba(245, 245, 240, 0.5); max-width: 500px; margin: 0 auto 50px; }
.text-18-italic-mb { font-family: 'Cormorant Garamond', serif; font-size: 18px; font-style: italic; color: rgba(245, 245, 240, 0.5); margin-bottom: 50px; }

.card-desc { font-size: 13px; line-height: 1.8; color: rgba(245, 245, 240, 0.5); max-width: 220px; margin: 0 auto; }
.quote-italic { font-style: italic; font-size: 48px; color: rgba(245,245,240,0.7); }
.quote-big { font-size: 120px; color: rgba(167, 145, 93, 0.12); font-family: Georgia, serif; line-height: 0.8; margin-bottom: -30px; filter: drop-shadow(0 0 20px rgba(167, 145, 93, 0.3)); }
.quote-subtitle { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-style: italic; color: #f5f5f0; max-width: 550px; margin: 0 auto; line-height: 1.7; }

/* ======== Typography - Labels ======== */
.section-label { font-family: 'Raleway', sans-serif; font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: #a7915d; margin-bottom: 25px; font-weight: 500; }
.section-label-sm { font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: 5px; text-transform: uppercase; color: #a7915d; font-weight: 500; }
.section-label-lg { font-family: 'Raleway', sans-serif; font-size: 12px; letter-spacing: 8px; text-transform: uppercase; color: #a7915d; font-weight: 500; }
.section-label-muted { font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: rgba(167,145,93,0.6); margin-bottom: 15px; }
.section-label-center { font-family: 'Raleway', sans-serif; font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: #a7915d; margin-bottom: 25px; font-weight: 500; text-align: center; }

.label-11 { font-size: 11px; color: #c9c9c4; text-transform: uppercase; letter-spacing: 1px; }
.label-11-gold { font-size: 11px; color: #a7915d; letter-spacing: 1px; font-weight: 600; }
.label-11-gold-wide { font-family: 'Raleway', sans-serif; font-size: 11px; letter-spacing: 6px; text-transform: uppercase; color: #a7915d; }
.label-11-gold-mb { font-family: 'Raleway', sans-serif; font-size: 11px; letter-spacing: 6px; text-transform: uppercase; color: #a7915d; margin-bottom: 30px; font-weight: 500; }
.label-11-faded { font-family: 'Raleway', sans-serif; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: rgba(245, 245, 240, 0.4); margin-bottom: 50px; }

.label-12-gold { font-size: 12px; letter-spacing: 4px; color: #a7915d; text-transform: uppercase; font-weight: 600; }
.label-12-gold-upper { font-size: 12px; color: #a7915d; font-family: 'Raleway', sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.label-12-gold-block { display: block; font-size: 12px; color: #a7915d; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 8px; }
.label-12-gold-caps { font-family: 'Raleway', sans-serif; font-size: 12px; color: rgba(167,145,93,0.9); letter-spacing: 2px; text-transform: uppercase; }
.label-12-muted { font-size: 12px; color: #c9c9c4; text-transform: uppercase; letter-spacing: 1.5px; }
.label-12-faded { font-family: 'Raleway', sans-serif; font-size: 12px; color: rgba(245,245,240,0.25); letter-spacing: 3px; }
.label-12-shadow { font-family: 'Raleway', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: rgba(245, 245, 240, 0.7); text-shadow: 1px 1px 2px rgba(0,0,0,0.7); }

.label-10-gold { font-family: 'Raleway', sans-serif; font-size: 10px; color: #a7915d; letter-spacing: 3px; font-weight: 500; }
.label-10-gold-mb { font-family: 'Raleway', sans-serif; font-size: 10px; color: #a7915d; letter-spacing: 3px; margin-bottom: 18px; font-weight: 500; }
.label-10-gold-mb15 { font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: #a7915d; margin-bottom: 15px; }
.label-10-gold-mb30 { font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: #a7915d; margin-bottom: 30px; font-weight: 500; }
.label-10-muted { font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: 4px; color: rgba(167,145,93,0.5); text-transform: uppercase; }
.label-10-muted-caps { font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: rgba(245,245,240,0.6); }
.label-10-faded-caps { font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: 4px; color: rgba(245,245,240,0.3); text-transform: uppercase; }
.label-10-dark { font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: #0a0a0a; font-weight: 600; }

.badge-gold { display: inline-block; padding: 4px 12px; background: rgba(167, 145, 93, 0.15); border: 1px solid rgba(167, 145, 93, 0.3); border-radius: 15px; margin-bottom: 15px; }
.step-hours { font-family: 'Cormorant Garamond', serif; font-size: 42px; font-weight: 300; color: #a7915d; letter-spacing: 3px; line-height: 1; margin-bottom: 12px; text-shadow: 0 0 40px rgba(167,145,93,0.2); }
.font-32 { font-size: 32px; }

/* ======== Layout - Flexbox ======== */
.flex-1 { flex: 1; }
.flex-1-center { flex: 1; text-align: center; padding: 0 30px; position: relative; }
.flex-full { width: 100%; display: flex; }
.flex-gap12 { display: flex; gap: 12px; margin-bottom: 30px; }
.flex-gap18 { display: flex; align-items: center; gap: 18px; margin-bottom: 25px; }
.flex-gap25 { display: inline-flex; align-items: center; gap: 25px; margin-bottom: 40px; }
.flex-center-gap { display: flex; align-items: center; gap: 18px; }
.flex-center-gap20 { display: inline-flex; align-items: center; gap: 20px; margin-bottom: 30px; }
.flex-center-start { display: flex; justify-content: center; align-items: flex-start; position: relative; }
.flex-col-center { display: flex; flex-direction: column; align-items: center; gap: 15px; }
.flex-start-gap { display: flex; align-items: flex-start; gap: 25px; }
.inline-flex-gap { display: inline-flex; align-items: center; gap: 12px; }

/* ======== Layout - Grid ======== */
.grid-1col { display: grid; grid-template-columns: 1fr; gap: 25px; max-width: 600px; margin: 0 auto; }
.grid-2col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; max-width: 1200px; margin: 0 auto; }
.grid-2col-bordered { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-bottom: 30px; padding: 25px 0; border-top: 1px solid rgba(167, 145, 93, 0.2); border-bottom: 1px solid rgba(167, 145, 93, 0.2); }
.stat-single-centered { text-align: center; margin-bottom: 30px; padding: 25px 0; border-top: 1px solid rgba(167, 145, 93, 0.2); border-bottom: 1px solid rgba(167, 145, 93, 0.2); }
.grid-timeline { display: grid; grid-template-columns: 1fr 80px 1fr; gap: 40px; margin-bottom: 60px; align-items: center; }
.grid-timeline-alt { display: grid; grid-template-columns: 1fr 100px 1fr; gap: 30px; align-items: center; margin-bottom: 50px; }

/* ======== Layout - Containers ======== */
.container-700 { max-width: 700px; margin: 0 auto; }
.container-750 { max-width: 750px; margin: 0 auto; text-align: center; position: relative; z-index: 2; }
.container-900 { max-width: 900px; margin: 0 auto; }
.container-1100 { max-width: 1100px; margin: 0 auto; }
.container-1200-z2 { max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; }
.max-w-1100 { max-width: 1100px; }
.content-center-z2 { max-width: 800px; margin: 0 auto; text-align: center; position: relative; z-index: 2; }
.hero-content-box { position: relative; z-index: 2; text-align: center; padding: 60px; max-width: 950px; }

/* ======== Layout - Positioning ======== */
.pos-relative { position: relative; }
.z-2 { position: relative; z-index: 2; }
.content-bottom-30 { position: absolute; bottom: 30px; left: 30px; right: 30px; }
.content-bottom-40 { position: absolute; bottom: 40px; left: 40px; right: 40px; }
.card-bottom { position: absolute; bottom: 25px; left: 25px; right: 25px; }
.badge-top-left-dark { position: absolute; top: 20px; left: 20px; background: rgba(10,10,10,0.95); padding: 12px 24px; border: 1px solid rgba(167,145,93,0.3); z-index: 2; }
.badge-top-left-gold { position: absolute; top: 20px; left: 20px; background: #a7915d; padding: 12px 24px; z-index: 2; }

/* ======== Layout - Text Alignment ======== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center-z2 { text-align: center; position: relative; z-index: 2; }
.text-center-z2-pad { text-align: center; z-index: 2; padding: 40px; }
.text-center-mb50 { text-align: center; margin-bottom: 50px; }
.text-center-mb70 { margin-bottom: 70px; text-align: center; }
.text-center-mb80 { text-align: center; margin-bottom: 80px; }
.text-center-mb-70 { text-align: center; margin-bottom: 70px; }
.text-center-mb-100 { text-align: center; margin-bottom: 100px; }
.text-center-border-top { text-align: center; margin-top: 100px; padding-top: 60px; border-top: 1px solid rgba(167,145,93,0.15); }

/* ======== Spacing - Margins ======== */
.mb-60 { margin-bottom: 60px; }
.mb-70 { margin-bottom: 70px; }

/* ======== Sections ======== */
.section-120 { padding: 120px 60px; position: relative; overflow: hidden; }
.section-140 { padding: 140px 60px; position: relative; overflow: hidden; }
.section-dark { padding: 120px 60px; position: relative; background: linear-gradient(180deg, #050505 0%, #0a0a0a 100%); overflow: hidden; }
.section-dark-alt { padding: 120px 60px; background: linear-gradient(180deg, #050505 0%, #0a0a0a 100%); position: relative; overflow: hidden; }
.section-100-dark { background: linear-gradient(180deg, #0a0a0a 0%, #080808 100%); padding: 100px 40px 120px; overflow: hidden; }
.section-120-dark { padding: 120px 60px; position: relative; background: #050505; overflow: hidden; }
.section-120-overflow { padding: 120px 60px; position: relative; background: linear-gradient(180deg, #0a0a0a 0%, #050505 100%); overflow: hidden; }
.section-140-dark { padding: 140px 60px; background: linear-gradient(180deg, #0a0a0a 0%, #050505 100%); overflow: hidden; }

.hero-section { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; background: #0a0a0a; overflow: hidden; }
.hero-50vh { min-height: 50vh; display: flex; align-items: center; justify-content: center; position: relative; background: linear-gradient(180deg, #000 0%, #0a0a0a 100%); padding-top: 80px; overflow: hidden; }
.hero-70vh { min-height: 70vh; display: flex; align-items: center; justify-content: center; position: relative; background: #050505; overflow: hidden; }
.hero-transparent { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; background: transparent; overflow: hidden; }

.page-bg { background: linear-gradient(-45deg, #0a0a0a 0%, #0f0f0f 25%, #050505 50%, #0f0f0f 75%, #0a0a0a 100%); padding: 0; margin: 0; }
.bg-dark-bare { background: #0a0a0a; padding: 0; margin: 0; }
.bg-sneaker { background-image: url('images/sneaker-tasche-studio-v2.webp'); background-color: #0a0a0a; }

/* ======== Cards ======== */
.card-subtle { text-align: center; padding: 50px 30px; background: rgba(255,255,255,0.02); border: 1px solid rgba(167, 145, 93, 0.15); transition: opacity 0.4s ease, transform 0.4s ease, border-color 0.4s ease; }
.card-subtle-hover { background: rgba(255,255,255,0.02); border: 1px solid rgba(167, 145, 93, 0.15); padding: 50px; position: relative; overflow: hidden; transition: opacity 0.4s ease, transform 0.4s ease, border-color 0.4s ease; }
.card-hover { position: relative; transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; }
.card-gold-border { padding: 50px; background: linear-gradient(135deg, rgba(167, 145, 93, 0.12) 0%, rgba(20, 20, 20, 0.85) 100%); border: 3px solid #a7915d; border-radius: 4px; position: relative; overflow: hidden; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 10px 50px rgba(167, 145, 93, 0.25); }
.card-gradient-hover { background: linear-gradient(135deg, rgba(20,20,20,0.9) 0%, rgba(15,15,15,0.95) 100%); border: 1px solid rgba(167,145,93,0.15); overflow: hidden; transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; }
.card-gradient-center { background: linear-gradient(135deg, rgba(167, 145, 93, 0.08) 0%, rgba(20, 20, 20, 0.5) 100%); border: 1px solid rgba(167,145,93,0.15); padding: 50px 30px; transition: opacity 0.5s ease, transform 0.5s ease, border-color 0.5s ease; text-align: center; }
.card-overlay-z4 { text-align: center; z-index: 4; padding: 40px; }
.card-overlay-z5 { text-align: center; z-index: 5; padding: 40px; }
.card-aspect-gold { aspect-ratio: 4/3; background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%); border: 2px solid rgba(167,145,93,0.4); display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 20px 60px rgba(167,145,93,0.1); transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.card-aspect-subtle { aspect-ratio: 4/3; background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%); border: 2px solid rgba(167,145,93,0.2); display: flex; align-items: center; justify-content: center; overflow: hidden; transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1); }

.gallery-card-title { font-family: 'Cormorant Garamond', serif; font-size: 28px; color: #f5f5f0; margin-bottom: 8px; letter-spacing: 2px; font-weight: 400; }
.gallery-card-subtitle { font-family: 'Raleway', sans-serif; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: #a7915d; }

/* ======== Icons ======== */
.icon-circle { width: 50px; height: 50px; margin: 0 auto 25px; background: rgba(10, 10, 10, 0.95); border: 1px solid rgba(167, 145, 93, 0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; transition: border-color 0.4s ease, background 0.4s ease; }
.icon-circle-50 { width: 50px; height: 50px; background: linear-gradient(135deg, rgba(167, 145, 93, 0.2) 0%, rgba(167, 145, 93, 0.1) 100%); border: 2px solid #a7915d; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 25px; }
.icon-circle-60 { width: 60px; height: 60px; border: 2px solid rgba(167,145,93,0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(10,10,10,0.8); box-shadow: 0 0 30px rgba(167,145,93,0.2); }
.icon-square-60 { width: 60px; height: 60px; border: 1px solid #a7915d; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon-70 { width: 70px; height: 70px; margin: 0 auto 25px; border: 1px solid rgba(167, 145, 93, 0.4); display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(167, 145, 93, 0.15) 0%, transparent 100%); }
.icon-80 { width: 80px; height: 80px; border: 2px solid #a7915d; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 25px; }
.icon-80-glow { width: 80px; height: 80px; background: linear-gradient(135deg, rgba(167, 145, 93, 0.2) 0%, rgba(167, 145, 93, 0.1) 100%); border: 3px solid #a7915d; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 30px rgba(167, 145, 93, 0.4), inset 0 0 20px rgba(167, 145, 93, 0.1); }
.icon-diamond-40 { width: 40px; height: 40px; margin: 0 auto 25px; border: 1px solid rgba(167,145,93,0.3); transform: rotate(45deg); display: flex; align-items: center; justify-content: center; }
.dot-gold { width: 8px; height: 8px; background: #a7915d; border-radius: 50%; }

/* ======== Dividers ======== */
.divider-sm { width: 40px; height: 1px; background: rgba(167,145,93,0.3); margin: 0 auto 60px; }
.divider-center { width: 40px; height: 1px; background: rgba(167,145,93,0.4); margin: 0 auto 70px; }
.divider-40-gold { width: 40px; height: 1px; background: #a7915d; margin: 0 auto 20px; }
.divider-60-gold { width: 60px; height: 1px; background: #a7915d; margin: 0 auto 40px; }
.divider-60-gold-mt { width: 60px; height: 1px; background: #a7915d; margin: 20px auto 0; }
.divider-80 { width: 80px; height: 1px; background: linear-gradient(90deg, transparent, #a7915d, transparent); margin: 0 auto; }
.divider-100 { width: 100px; height: 1px; background: linear-gradient(90deg, transparent, #a7915d, transparent); margin: 0 auto 35px; }
.divider-100-mb30 { width: 100px; height: 1px; background: linear-gradient(90deg, transparent, #a7915d, transparent); margin: 0 auto 30px; }
.divider-100-no-mb { width: 100px; height: 1px; background: linear-gradient(90deg, transparent, #a7915d, transparent); margin: 0 auto; }
.divider-120 { width: 120px; height: 1px; background: linear-gradient(90deg, transparent, #a7915d, transparent); margin: 0 auto 40px; }
.divider-wide { max-width: 1400px; margin: 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(167, 145, 93, 0.4), transparent); }
.divider-full { width: 100%; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(167, 145, 93, 0.4) 20%, rgba(167, 145, 93, 0.4) 80%, transparent 100%); }
.divider-full-wide { width: 100%; height: 1px; margin: 0 auto; background: linear-gradient(90deg, transparent 0%, rgba(167, 145, 93, 0.4) 20%, rgba(167, 145, 93, 0.4) 80%, transparent 100%); }
.divider-gold-mt { margin-top: 20px; border-top: 1px solid rgba(167, 145, 93, 0.3); padding-top: 15px; color: #a7915d; }

.vertical-line { width: 1px; height: 160px; background: linear-gradient(180deg, transparent, rgba(167, 145, 93, 0.6), transparent); position: relative; z-index: 2; }
.line-vert-50-up { width: 1px; height: 50px; background: linear-gradient(180deg, transparent, rgba(167,145,93,0.6)); }
.line-vert-50-down { width: 1px; height: 50px; background: linear-gradient(180deg, rgba(167,145,93,0.6), transparent); }
.line-gradient-left { width: 60px; height: 1px; background: linear-gradient(-90deg, transparent, rgba(167, 145, 93, 0.5)); }
.line-gradient-right { width: 60px; height: 1px; background: linear-gradient(90deg, transparent, rgba(167, 145, 93, 0.5)); }
.line-80-left { width: 80px; height: 1px; background: linear-gradient(-90deg, transparent, #a7915d); }
.line-80-right { width: 80px; height: 1px; background: linear-gradient(90deg, transparent, #a7915d); }
.line-top-center { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 300px; height: 1px; background: linear-gradient(to right, transparent, #a7915d, transparent); z-index: 2; }
.header-line { position: absolute; top: 24px; left: 50px; right: 50px; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(167, 145, 93, 0.4) 10%, rgba(167, 145, 93, 0.4) 90%, transparent 100%); }

/* ======== Corner Decorations ======== */
.corner-tl { position: absolute; top: 60px; left: 60px; width: 120px; height: 120px; border-left: 1px solid rgba(167,145,93,0.4); border-top: 1px solid rgba(167,145,93,0.4); opacity: 0; transform: scale(0.8); animation: cornerReveal 0.5s ease 0.6s forwards; }
.corner-tr { position: absolute; top: 60px; right: 60px; width: 120px; height: 120px; border-right: 1px solid rgba(167,145,93,0.4); border-top: 1px solid rgba(167,145,93,0.4); opacity: 0; transform: scale(0.8); animation: cornerReveal 0.5s ease 0.7s forwards; }
.corner-bl { position: absolute; bottom: 60px; left: 60px; width: 120px; height: 120px; border-left: 1px solid rgba(167,145,93,0.4); border-bottom: 1px solid rgba(167,145,93,0.4); opacity: 0; transform: scale(0.8); animation: cornerReveal 0.5s ease 0.8s forwards; }
.corner-br { position: absolute; bottom: 60px; right: 60px; width: 120px; height: 120px; border-right: 1px solid rgba(167,145,93,0.4); border-bottom: 1px solid rgba(167,145,93,0.4); opacity: 0; transform: scale(0.8); animation: cornerReveal 0.5s ease 0.9s forwards; }
.corner-tl-z4 { position: absolute; top: 60px; left: 60px; width: 120px; height: 120px; border-left: 1px solid rgba(167,145,93,0.4); border-top: 1px solid rgba(167,145,93,0.4); opacity: 0; transform: scale(0.8); animation: cornerReveal 0.5s ease 0.6s forwards; z-index: 4; }
.corner-tr-z4 { position: absolute; top: 60px; right: 60px; width: 120px; height: 120px; border-right: 1px solid rgba(167,145,93,0.4); border-top: 1px solid rgba(167,145,93,0.4); opacity: 0; transform: scale(0.8); animation: cornerReveal 0.5s ease 0.7s forwards; z-index: 4; }
.corner-bl-z4 { position: absolute; bottom: 60px; left: 60px; width: 120px; height: 120px; border-left: 1px solid rgba(167,145,93,0.4); border-bottom: 1px solid rgba(167,145,93,0.4); opacity: 0; transform: scale(0.8); animation: cornerReveal 0.5s ease 0.8s forwards; z-index: 4; }
.corner-br-z4 { position: absolute; bottom: 60px; right: 60px; width: 120px; height: 120px; border-right: 1px solid rgba(167,145,93,0.4); border-bottom: 1px solid rgba(167,145,93,0.4); opacity: 0; transform: scale(0.8); animation: cornerReveal 0.5s ease 0.9s forwards; z-index: 4; }
.corner-decor-tl { position: absolute; top: -2px; left: -2px; width: 50px; height: 50px; border-top: 2px solid #a7915d; border-left: 2px solid #a7915d; }
.corner-decor-tr { position: absolute; top: -2px; right: -2px; width: 50px; height: 50px; border-top: 2px solid #a7915d; border-right: 2px solid #a7915d; }
.corner-decor-bl { position: absolute; bottom: -2px; left: -2px; width: 50px; height: 50px; border-bottom: 2px solid #a7915d; border-left: 2px solid #a7915d; }
.corner-decor-br { position: absolute; bottom: -2px; right: -2px; width: 50px; height: 50px; border-bottom: 2px solid #a7915d; border-right: 2px solid #a7915d; }

/* ======== Overlays & Effects ======== */
.overlay-gradient { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); pointer-events: none; z-index: 1; }
.overlay-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,0.3) 20%, rgba(0,0,0,0.7) 100%); z-index: 1; pointer-events: none; }
.overlay-dark-gradient { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.5) 50%, rgba(10,10,10,0.8) 100%); }
.vignette-dark { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.6) 100%); pointer-events: none; z-index: 3; }
.vignette-dark-z2 { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,0.3) 20%, rgba(0,0,0,0.7) 100%); pointer-events: none; z-index: 2; }
.vignette-medium-z2 { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,0.2) 20%, rgba(0,0,0,0.6) 100%); pointer-events: none; z-index: 2; }
.vignette-subtle { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 20%, rgba(0,0,0,0.5) 100%); pointer-events: none; }
.gradient-bottom { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.6) 100%); }
.gradient-bottom-50 { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.6) 100%); }
.glow-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 600px; background: radial-gradient(circle, rgba(167, 145, 93, 0.06) 0%, transparent 70%); pointer-events: none; }
.glow-center-500 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 500px; height: 500px; background: radial-gradient(circle, rgba(167, 145, 93, 0.06) 0%, transparent 70%); pointer-events: none; }
.glow-subtle { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(167,145,93,0.03) 0%, transparent 70%); }
.glow-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background: radial-gradient(ellipse at center, rgba(167, 145, 93, 0.08) 0%, transparent 60%); pointer-events: none; }
.glow-pulse { position: absolute; inset: 0; background-image: radial-gradient(ellipse at 50% 50%, rgba(167,145,93,0.1) 0%, transparent 60%); animation: glowPulse 4s ease-in-out infinite; }
.glow-pulse-z3 { position: absolute; inset: 0; background-image: radial-gradient(ellipse at 50% 50%, rgba(167,145,93,0.1) 0%, transparent 60%); animation: glowPulse 4s ease-in-out infinite; z-index: 3; }
.shine-anim { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(167, 145, 93, 0.2), transparent); animation: shine 8s infinite; pointer-events: none; }
.shine-anim-delay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(167, 145, 93, 0.2), transparent); animation: shine 8s infinite 2s; pointer-events: none; }
.line-top-hover { position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(to right, #a7915d, transparent); opacity: 0; transition: opacity 0.4s; }
.underline-hover { position: absolute; bottom: 0; left: 50%; width: 0; height: 1px; background: #a7915d; transition: width 0.4s ease; transform: translateX(-50%); }

/* ======== Particles ======== */
.particle-1 { position: absolute; width: 4px; height: 4px; background: #a7915d; border-radius: 50%; top: 20%; left: 15%; animation: floatParticle 8s ease-in-out infinite; opacity: 0; }
.particle-1-z3 { position: absolute; width: 4px; height: 4px; background: #a7915d; border-radius: 50%; top: 20%; left: 15%; animation: floatParticle 8s ease-in-out infinite; opacity: 0; z-index: 3; }
.particle-2 { position: absolute; width: 4px; height: 4px; background: #a7915d; border-radius: 50%; top: 45%; left: 10%; animation: floatParticle 11s ease-in-out infinite 3s; opacity: 0; }
.particle-2-z3 { position: absolute; width: 4px; height: 4px; background: #a7915d; border-radius: 50%; top: 45%; left: 10%; animation: floatParticle 11s ease-in-out infinite 3s; opacity: 0; z-index: 3; }
.particle-3 { position: absolute; width: 5px; height: 5px; background: #a7915d; border-radius: 50%; top: 30%; right: 20%; animation: floatParticle 7s ease-in-out infinite 2s; opacity: 0; }
.particle-3-z3 { position: absolute; width: 5px; height: 5px; background: #a7915d; border-radius: 50%; top: 30%; right: 20%; animation: floatParticle 7s ease-in-out infinite 2s; opacity: 0; z-index: 3; }
.particle-4 { position: absolute; width: 6px; height: 6px; background: #a7915d; border-radius: 50%; top: 25%; right: 10%; animation: floatParticle 8s ease-in-out infinite 1.5s; opacity: 0; }
.particle-4-z3 { position: absolute; width: 6px; height: 6px; background: #a7915d; border-radius: 50%; top: 25%; right: 10%; animation: floatParticle 8s ease-in-out infinite 1.5s; opacity: 0; z-index: 3; }
.particle-5 { position: absolute; width: 3px; height: 3px; background: #a7915d; border-radius: 50%; top: 60%; left: 25%; animation: floatParticle 10s ease-in-out infinite 1s; opacity: 0; }
.particle-5-z3 { position: absolute; width: 3px; height: 3px; background: #a7915d; border-radius: 50%; top: 60%; left: 25%; animation: floatParticle 10s ease-in-out infinite 1s; opacity: 0; z-index: 3; }
.particle-6 { position: absolute; width: 3px; height: 3px; background: #a7915d; border-radius: 50%; top: 70%; right: 30%; animation: floatParticle 9s ease-in-out infinite 0.5s; opacity: 0; }
.particle-6-z3 { position: absolute; width: 3px; height: 3px; background: #a7915d; border-radius: 50%; top: 70%; right: 30%; animation: floatParticle 9s ease-in-out infinite 0.5s; opacity: 0; z-index: 3; }

/* ======== Animated Lines ======== */
.line-animated-left { width: 60px; height: 1px; background: linear-gradient(-90deg, transparent, #a7915d); transform: scaleX(0); animation: lineScaleIn 0.4s ease 0.5s forwards; }
.line-animated-right { width: 60px; height: 1px; background: linear-gradient(90deg, transparent, #a7915d); transform: scaleX(0); animation: lineScaleIn 0.4s ease 0.5s forwards; }
.line-expand-left { position: absolute; top: 50%; left: 0; width: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(167,145,93,0.5)); transform: translateY(-50%); animation: lineExpandLeft 0.7s ease 0.85s forwards; }
.line-expand-left-z4 { position: absolute; top: 50%; left: 0; width: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(167,145,93,0.5)); transform: translateY(-50%); animation: lineExpandLeft 0.7s ease 0.85s forwards; z-index: 4; }
.line-expand-right { position: absolute; top: 50%; right: 0; width: 0; height: 1px; background: linear-gradient(-90deg, transparent, rgba(167,145,93,0.5)); transform: translateY(-50%); animation: lineExpandRight 0.7s ease 0.85s forwards; }
.line-expand-right-z4 { position: absolute; top: 50%; right: 0; width: 0; height: 1px; background: linear-gradient(-90deg, transparent, rgba(167,145,93,0.5)); transform: translateY(-50%); animation: lineExpandRight 0.7s ease 0.85s forwards; z-index: 4; }
.divider-150-animated { width: 150px; height: 2px; background: linear-gradient(90deg, transparent, #a7915d, transparent); margin: 0 auto 45px; transform: scaleX(0); animation: dividerExpand 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.75s forwards; }
.scroll-indicator { margin-top: 70px; opacity: 0; animation: fadeInUp 0.4s ease 1.2s forwards; }
.scroll-line { width: 1px; height: 50px; background: linear-gradient(180deg, #a7915d, transparent); margin: 0 auto; animation: scrollPulse 2s ease-in-out infinite 2.1s; }

/* ======== Hero Animations ======== */
.hero-title-animated { font-family: 'Cormorant Garamond', serif; font-size: 100px; font-weight: 300; color: #f5f5f0; letter-spacing: 10px; margin-bottom: 40px; opacity: 0; transform: translateY(30px) scale(0.98); animation: heroTitleReveal 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards; }
.hero-quote { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-style: italic; color: rgba(245,245,240,0.7); max-width: 700px; margin: 0 auto; line-height: 1.7; opacity: 0; transform: translateY(20px); animation: heroFadeInUp 0.3s ease 0.7s forwards; }
.hero-flex-header { display: flex; align-items: center; justify-content: center; gap: 30px; margin-bottom: 50px; opacity: 0; transform: translateY(-20px); animation: heroFadeInDown 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards; }

/* ======== Misc Utilities ======== */
.hidden { display: none; }
.h-full { height: 100%; }
.aspect-3-4 { aspect-ratio: 3/4; }
.aspect-3-4-overflow { position: relative; overflow: hidden; aspect-ratio: 3/4; }
.rotate-45 { transform: rotate(-45deg); font-family: 'Cormorant Garamond', serif; font-size: 18px; color: #a7915d; }
.rotate-180 { transform: rotate(180deg); }
.transition-transform { transition: transform 0.4s ease; }
.img-cover { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.nav-link-style { color: rgba(245,245,240,0.7); text-decoration: none; font-family: 'Raleway', sans-serif; font-size: 11px; letter-spacing: 4px; text-transform: uppercase; font-weight: 500; transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; padding: 10px 0; }
.link-nav-style { display: flex; align-items: center; gap: 12px; text-decoration: none; color: rgba(245,245,240,0.6); font-family: 'Raleway', sans-serif; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; transition: color 0.4s ease, opacity 0.4s ease; }
.gallery-sidebar { position: fixed; top: 100px; left: 40px; z-index: 1000; }
.padding-35-30 { padding: 35px 30px; }
.border-top-section { padding-top: 30px; border-top: 1px solid rgba(167, 145, 93, 0.2); }

/* ======== Grid - Extended ======== */
.grid-2col-wide { display: grid; grid-template-columns: repeat(2, 1fr); gap: 80px; max-width: 1200px; margin: 0 auto; align-items: center; }
.grid-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 1200px; margin: 0 auto; }
.grid-2col-services { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; max-width: 1200px; margin: 0 auto; }

/* ======== Image Frame & Corners ======== */
.image-frame { position: absolute; inset: 15px; border: 1px solid rgba(167, 145, 93, 0.4); pointer-events: none; }
.corner-sm-tl { position: absolute; top: 15px; left: 15px; width: 30px; height: 30px; border-top: 2px solid #a7915d; border-left: 2px solid #a7915d; }
.corner-sm-br { position: absolute; bottom: 15px; right: 15px; width: 30px; height: 30px; border-bottom: 2px solid #a7915d; border-right: 2px solid #a7915d; }

/* ======== Badge Positions ======== */
.badge-bottom-right { position: absolute; bottom: -20px; right: 40px; background: #a7915d; padding: 15px 25px; z-index: 2; }

/* ======== Spacing - Extended ======== */
.mt-20 { margin-top: 20px; }
.mb-0 { margin-bottom: 0; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }
.m-0 { margin: 0; }

/* ======== Quote - Extended ======== */
.quote-lg-italic { font-style: italic; max-width: 800px; margin: 0 auto 40px; }

/* ======== Heritage Section ======== */
.heritage-section {
    position: relative;
    overflow: hidden;
}

.heritage-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #0a0a0a 0%, #111 50%, #0a0a0a 100%);
    z-index: 0;
}

.quote-heritage {
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
    font-style: italic;
    line-height: 1.8;
    color: rgba(245, 245, 240, 0.85);
    max-width: 700px;
    margin: 0 auto 40px;
}

.link-gold-arrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #a7915d;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s ease, opacity 0.3s ease;
}

.link-gold-arrow:hover {
    color: #f5f5f0;
}

.link-gold-arrow svg {
    transition: transform 0.3s ease;
}

.link-gold-arrow:hover svg {
    transform: translateX(5px);
}

/* ======== Mobile Section Divider ======== */
.mobile-section-divider { display: none; width: 100%; padding: 20px 0; background: #0a0a0a; }
.mobile-section-divider-compact { display: none; width: 100%; padding: 0; background: #0a0a0a; }

/* ======== Parallax Backgrounds ======== */
.parallax-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: -2; opacity: 0; transition: opacity 0.5s ease; }
.parallax-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(10,10,10,0.75) 0%, rgba(10,10,10,0.5) 50%, rgba(10,10,10,0.7) 100%); z-index: -1; opacity: 0; transition: opacity 0.5s ease; }

/* ======== Immersive Timeline Typography ======== */
.heading-display-gold { font-family: 'Cormorant Garamond', serif; font-size: clamp(80px, 15vw, 180px); font-weight: 200; color: rgba(167, 145, 93, 0.15); letter-spacing: 20px; line-height: 0.9; margin-bottom: 20px; }
.heading-year-massive { font-family: 'Cormorant Garamond', serif; font-size: clamp(60px, 12vw, 140px); font-weight: 300; color: #f5f5f0; letter-spacing: 10px; line-height: 1; margin-bottom: 30px; }
.heading-name-elegant { font-family: 'Cormorant Garamond', serif; font-size: clamp(28px, 4vw, 42px); font-weight: 400; color: #a7915d; letter-spacing: 4px; margin-bottom: 30px; }

/* ======== Additional Containers ======== */
.container-800-z2 { max-width: 800px; margin: 0 auto; padding: 0 40px; position: relative; z-index: 2; text-align: center; }

/* ======== Additional Text Utilities ======== */
.text-center-mb60 { text-align: center; margin-bottom: 60px; }
.text-22-italic-light { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-style: italic; color: rgba(245, 245, 240, 0.85); line-height: 1.8; max-width: 700px; margin: 0 auto 30px; }
.text-18-muted { font-family: 'Raleway', sans-serif; font-size: 18px; color: rgba(245, 245, 240, 0.5); line-height: 1.8; max-width: 600px; margin: 0 auto; }

/* ======== Additional Spacing ======== */
.mt-40 { margin-top: 40px; }
.divider-80 { width: 80px; height: 1px; background: linear-gradient(90deg, transparent, #a7915d, transparent); margin: 30px auto; }

/* ======== Badges ======== */
.badge-gold-outline { display: inline-block; padding: 12px 24px; border: 1px solid rgba(167, 145, 93, 0.5); color: #a7915d; font-family: 'Raleway', sans-serif; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; }

/* ======== Hero Section ======== */

/* Logo sizes */
.logo-loader { height: 60px; width: auto; }
.logo-nav { height: 35px; width: auto; }

/* Cursor */
.cursor-pointer { cursor: pointer; }

/* Hidden elements */
.hidden { display: none; }

/* Hero Vignette Overlay */
.hero-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.35) 20%, rgba(0,0,0,0.75) 100%);
    z-index: 4;
    pointer-events: none;
}

/* Hero Gold Shine Effect */
.hero-gold-shine {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(167, 145, 93, 0.15), transparent);
    animation: shine 7s infinite;
    pointer-events: none;
    z-index: 5;
}

/* Hero Eyebrow Animation */
.hero-eyebrow-anim {
    font-size: 14px;
    letter-spacing: 8px;
    color: rgba(245, 245, 240, 0.85);
    text-transform: uppercase;
    margin-bottom: 30px;
    font-weight: 600;
    opacity: 0;
    animation: fadeIn 0.5s ease 0s forwards;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7), 0 2px 4px rgba(0,0,0,0.5);
}

/* Hero Brand Title Animation */
.hero-brand-anim {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(80px, 11vw, 200px);
    font-weight: 300;
    line-height: 0.9;
    letter-spacing: 18px;
    padding-left: 18px;
    color: #a7915d;
    margin-bottom: 50px;
}

/* Hero Character Animation Base */
.char-anim {
    display: inline-block;
    transition: transform 0.3s ease, color 0.3s ease, text-shadow 0.3s ease;
    cursor: default;
    opacity: 0;
    transform: translateX(-100px);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7), 0 2px 4px rgba(0,0,0,0.5), 0 0 30px rgba(167,145,93,0.2);
    animation: slideInChar 0.6s ease forwards;
}

/* Character Animation Delays */
.char-delay-1 { animation-delay: 0.8s; }
.char-delay-2 { animation-delay: 0.95s; }
.char-delay-3 { animation-delay: 1.1s; }
.char-delay-4 { animation-delay: 1.25s; }
.char-delay-5 { animation-delay: 1.4s; }
.char-delay-6 { animation-delay: 1.55s; }

/* Character Hover Effect */
.char-anim:hover {
    color: var(--gold);
    transform: scale(1.1);
}

/* Hero Subtitle Animation */
.hero-subtitle-anim {
    font-family: 'Cormorant Garamond', serif;
    font-size: 32px;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 2px;
    color: rgba(245, 245, 240, 0.95);
    margin: 0 auto 60px;
    opacity: 0;
    /* ORIGINAL: filter: blur(10px); animation: fadeInBlur 0.5s ease 1.5s forwards; */
    animation: fadeIn 0.5s ease 1.5s forwards;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8), 0 2px 5px rgba(0,0,0,0.6);
}

/* Hero Stats Grid */
.hero-stats-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 100px;
    margin-bottom: 20px;
}

/* Stat Animation Base */
/* ORIGINAL: keine will-change, delays: 2.4s / 2.5s / 2.6s */
.stat-anim {
    opacity: 0;
    transform: scale(0.8);
    animation: fadeInScale 0.8s ease forwards;
    will-change: opacity, transform;
}

/* Stat Animation Delays - weiter gespreizt um GPU-Bottleneck zu vermeiden */
.stat-delay-1 { animation-delay: 3.2s; }
.stat-delay-2 { animation-delay: 3.5s; }
.stat-delay-3 { animation-delay: 3.8s; }

/* Hero CTA Animation */
.hero-cta-anim {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease 2.5s forwards;
}

/* ======== HERITAGE SECTION ======== */

.heritage-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #050505;
    overflow: hidden;
}

.heritage-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% 50%, rgba(167, 145, 93, 0.08) 0%, transparent 70%),
        linear-gradient(180deg, #0a0a0a 0%, #050505 50%, #0a0a0a 100%);
    z-index: 0;
}

.heritage-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.4) 100%);
    z-index: 1;
}

.heritage-vignette {
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 200px rgba(0,0,0,0.8);
    z-index: 1;
    pointer-events: none;
}

/* Corner Accents */
.heritage-corner {
    position: absolute;
    width: 80px;
    height: 80px;
    z-index: 2;
    opacity: 0;
    animation: heritageCornerReveal 1s ease 0.8s forwards;
}

.heritage-corner-tl {
    top: 60px;
    left: 60px;
    border-top: 1px solid rgba(167, 145, 93, 0.4);
    border-left: 1px solid rgba(167, 145, 93, 0.4);
}

.heritage-corner-tr {
    top: 60px;
    right: 60px;
    border-top: 1px solid rgba(167, 145, 93, 0.4);
    border-right: 1px solid rgba(167, 145, 93, 0.4);
    animation-delay: 0.9s;
}

.heritage-corner-bl {
    bottom: 60px;
    left: 60px;
    border-bottom: 1px solid rgba(167, 145, 93, 0.4);
    border-left: 1px solid rgba(167, 145, 93, 0.4);
    animation-delay: 1s;
}

.heritage-corner-br {
    bottom: 60px;
    right: 60px;
    border-bottom: 1px solid rgba(167, 145, 93, 0.4);
    border-right: 1px solid rgba(167, 145, 93, 0.4);
    animation-delay: 1.1s;
}

@keyframes heritageCornerReveal {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Content */
.heritage-content {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 60px 40px;
    max-width: 800px;
}

/* Imperial Crest */
.heritage-crest {
    margin-bottom: 50px;
    opacity: 0;
    animation: heritageCrestReveal 1.2s ease 0.3s forwards;
}

.heritage-crest-svg {
    width: 120px;
    height: 120px;
    color: rgba(167, 145, 93, 0.7);
}

@keyframes heritageCrestReveal {
    from {
        opacity: 0;
        transform: scale(0.8) rotate(-10deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* Eyebrow */
.heritage-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    margin-bottom: 35px;
    opacity: 0;
    animation: fadeInUp 0.8s ease 0.5s forwards;
}

.heritage-eyebrow span {
    font-family: 'Raleway', sans-serif;
    font-size: 11px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: #a7915d;
    font-weight: 500;
}

.heritage-line {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(167, 145, 93, 0.6), transparent);
}

/* Title */
.heritage-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(42px, 6vw, 72px);
    font-weight: 300;
    color: #f5f5f0;
    letter-spacing: 4px;
    margin-bottom: 40px;
    opacity: 0;
    animation: heritageTitleReveal 1s ease 0.6s forwards;
}

@keyframes heritageTitleReveal {
    from {
        opacity: 0;
        transform: translateY(30px);
        filter: blur(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* Divider */
.heritage-divider {
    width: 120px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #a7915d, transparent);
    margin: 0 auto 40px;
    opacity: 0;
    transform: scaleX(0);
    animation: heritageDividerExpand 0.8s ease 0.9s forwards;
}

@keyframes heritageDividerExpand {
    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

/* Quote */
.heritage-quote {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(18px, 2.5vw, 24px);
    font-style: italic;
    color: rgba(245, 245, 240, 0.75);
    line-height: 1.9;
    max-width: 650px;
    margin: 0 auto 50px;
    opacity: 0;
    animation: fadeInUp 0.8s ease 1.1s forwards;
}

/* CTA */
.heritage-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #a7915d;
    text-decoration: none;
    padding: 18px 35px;
    border: 1px solid rgba(167, 145, 93, 0.4);
    background: transparent;
    cursor: pointer;
    transition: opacity 0.4s ease, transform 0.4s ease, color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
    opacity: 0;
    animation: fadeInUp 0.8s ease 1.3s forwards;
}

.heritage-cta svg {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
}

.heritage-cta:hover {
    background: rgba(167, 145, 93, 0.1);
    border-color: #a7915d;
    color: #c9b883;
}

.heritage-cta:hover svg {
    transform: translateX(5px);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .heritage-section {
        min-height: auto;
        padding: 100px 0;
    }

    .heritage-corner {
        width: 40px;
        height: 40px;
    }

    .heritage-corner-tl,
    .heritage-corner-bl {
        left: 20px;
    }

    .heritage-corner-tr,
    .heritage-corner-br {
        right: 20px;
    }

    .heritage-corner-tl,
    .heritage-corner-tr {
        top: 20px;
    }

    .heritage-corner-bl,
    .heritage-corner-br {
        bottom: 20px;
    }

    .heritage-content {
        padding: 40px 25px;
    }

    .heritage-crest-svg {
        width: 90px;
        height: 90px;
    }

    .heritage-eyebrow {
        gap: 15px;
    }

    .heritage-line {
        width: 40px;
    }

    .heritage-quote {
        font-size: 18px;
        line-height: 1.8;
    }
}

/* ======== Erwin Wurm Section ======== */

/* Desktop: kein fade-in, sofort sichtbar */
@media (min-width: 769px) {
    .erwin-wurm-section.fade-in-up {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Erwin Wurm Background */
.erwin-wurm-bg-style {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('../images/erwin-wurm-v2.webp');
    background-size: cover;
    background-position: center 40%;
    z-index: 0;
    opacity: 0;
    animation: sectionBgReveal 1.25s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards;
}

/* Section Shine Effect */
.section-shine {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(167, 145, 93, 0.12), transparent);
    animation: shine 8s infinite;
    pointer-events: none;
    z-index: 2;
}

/* Top Badge Container */
.top-badge-container {
    text-align: center;
    margin-bottom: 50px;
    opacity: 0;
    animation: fadeInUp 1s ease forwards;
}

/* Inline Flex Center */
.inline-flex-center {
    display: inline-flex;
    align-items: center;
    gap: 20px;
}

/* Quote Container */
.quote-container {
    text-align: center;
    margin-bottom: 70px;
    opacity: 0;
    animation: fadeInUp 1.1s ease forwards 0.1s;
}

/* Quote Heading Style */
.quote-heading {
    font-family: 'Cormorant Garamond', serif;
    font-size: 56px;
    line-height: 1.6;
    color: #f5f5f0;
    margin: 0 0 40px;
    font-weight: 300;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}

/* Author Source Container */
.author-source-container {
    text-align: center;
    margin-bottom: 80px;
    opacity: 0;
    animation: fadeInUp 1.2s ease forwards 0.2s;
}

/* Flex Center Wrap */
.flex-center-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 35px;
    flex-wrap: wrap;
}

/* Author Name */
.author-name {
    font-size: 18px;
    font-weight: 600;
    color: #f5f5f0;
    font-family: 'Raleway', sans-serif;
    margin-bottom: 8px;
}

/* Author Title */
.author-title {
    font-size: 13px;
    color: #a7915d;
    font-family: 'Raleway', sans-serif;
    letter-spacing: 0.5px;
}

/* Vertical Divider Gold */
.vertical-divider-gold {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, transparent, #a7915d, transparent);
}

/* Publication Name */
.publication-name {
    font-size: 13px;
    letter-spacing: 2px;
    color: #f5f5f0;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 4px;
}

/* Publication Subtitle */
.publication-subtitle {
    font-size: 12px;
    color: #a7915d;
    font-family: 'Raleway', sans-serif;
}

/* Horizontal Divider Animated */
.horizontal-divider-anim {
    width: 120px;
    height: 2px;
    background: linear-gradient(to right, transparent, #a7915d, transparent);
    margin: 0 auto 70px;
    opacity: 0;
    animation: fadeInUp 1.3s ease forwards 0.3s;
}

/* ======== Showcase Section ======== */

/* Showcase Background Image */
.showcase-bg-img {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('../images/werkstatt-naehmaschine-v2.webp');
    background-size: cover;
    background-position: center;
    z-index: 0;
}

/* Dark Overlay 50% */
.overlay-dark-50 {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1;
}

/* Vignette Transparent */
.vignette-transparent {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.6) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Section Header Centered */
.section-header-centered {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 3;
}

/* Inline Flex Center with Margin */
.inline-flex-center-mb {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

/* Kreationen Heading */
.kreationen-heading {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(42px, 6vw, 64px);
    font-weight: 300;
    color: #f5f5f0;
    margin-bottom: 20px;
    letter-spacing: 4px;
}

/* Kreationen Gallery Grid */
.kreationen-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 3;
}

/* Kreationen Buttons Container */
.kreationen-btns-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ======== Scheer Essence Section ======== */

/* Scheer Essence Background */
.essence-bg-style {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('../images/warum-scheer.webp');
    background-size: cover;
    background-position: center;
    z-index: 0;
    opacity: 0;
    animation: sectionBgReveal 1.25s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards;
}

/* Mobile: Hochformat-Bild für "Warum Scheer" - ganzes Bild sichtbar */
@media (max-width: 768px) {
    .essence-bg-style {
        background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('../images/warum-scheer-mobile.jpg');
        background-size: contain;
        background-position: center top;
        background-color: #0a0a0a;
        background-repeat: no-repeat;
    }
}

/* Content Container Z2 */
.content-z2-1300 {
    position: relative;
    z-index: 2;
    max-width: 1300px;
    margin: 0 auto;
}

/* Grid 2 Columns Gap 40 */
.grid-2col-gap40-mb40 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

/* Text Paragraph Style */
.text-15-gray-mb20 {
    font-size: 15px;
    line-height: 1.7;
    color: #c9c9c4;
    margin-bottom: 20px;
}

/* Text Paragraph No Margin */
.text-15-gray {
    font-size: 15px;
    line-height: 1.7;
    color: #c9c9c4;
}

/* Statement Gold */
.text-16-gold-bold {
    font-size: 16px;
    color: #a7915d;
    font-weight: 600;
}

/* Card Gold Border Centered */
.card-gold-centered {
    padding: 50px 60px;
    background: linear-gradient(135deg, rgba(167, 145, 93, 0.12) 0%, rgba(20, 20, 20, 0.85) 100%);
    border: 3px solid #a7915d;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    text-align: center;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Shine Animation Delayed */
.shine-anim-4s {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(167, 145, 93, 0.2), transparent);
    animation: shine 8s infinite 4s;
    pointer-events: none;
}

/* Icon Circle 50 Centered */
.icon-circle-50-centered {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, rgba(167, 145, 93, 0.2) 0%, rgba(167, 145, 93, 0.1) 100%);
    border: 2px solid #a7915d;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
}

/* Heading 36 White */
.heading-36-white-cormorant {
    font-family: 'Cormorant Garamond', serif;
    font-size: 36px;
    color: #f5f5f0;
    margin-bottom: 20px;
    font-weight: 300;
}

/* Text 15 Centered */
.text-15-gray-centered {
    font-size: 15px;
    line-height: 1.7;
    color: #c9c9c4;
    margin-bottom: 25px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* Quote Italic 28 */
.quote-italic-28 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px;
    color: #f5f5f0;
    font-style: italic;
}

/* ======== Maßschuhe Section ======== */

/* Maßschuhe Background */
.massschuhe-bg-style {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('../images/perfekter-schuh-v2.webp');
    background-size: cover;
    background-position: center;
    z-index: 0;
    opacity: 0;
    animation: sectionBgReveal 1.25s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards;
}

/* Mobile: Hochformat-Bild für "Weg zum perfekten Schuh" */
@media (max-width: 768px) {
    .massschuhe-bg-style {
        background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('../images/perfekter-schuh-mobile.jpg');
        background-size: cover;
        background-position: center top;
    }
}

/* Section Header Centered 750 */
.section-header-750 {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 70px;
}

/* Grid 3 Columns Stats */
.grid-3col-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 700px;
    margin: 0 auto 40px;
}

/* Timeline Container */
.timeline-container {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}

/* Timeline Vertical Line */
.timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 100px;
    width: 2px;
    background: linear-gradient(to bottom, transparent, rgba(167, 145, 93, 0.5), rgba(167, 145, 93, 0.5), transparent);
    transform: translateX(-50%);
    z-index: 0;
}

/* Grid Timeline Last (no margin-bottom) */
.grid-timeline-last {
    display: grid;
    grid-template-columns: 1fr 80px 1fr;
    gap: 40px;
    margin-bottom: 0;
    align-items: center;
}

/* Icon 80 Glow Large */
.icon-80-glow-large {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(167, 145, 93, 0.3) 0%, rgba(167, 145, 93, 0.15) 100%);
    border: 4px solid #a7915d;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 40px rgba(167, 145, 93, 0.6), inset 0 0 25px rgba(167, 145, 93, 0.15);
}

/* Stats Counter */
.stats-counter {
    font-family: 'Cormorant Garamond', serif;
    font-variant-numeric: tabular-nums;
}

/* Heading 32 Gold Cormorant */
.heading-32-gold-cormorant {
    font-family: 'Cormorant Garamond', serif;
    font-size: 32px;
    color: #a7915d;
    font-weight: 600;
}

/* Investment Container */
.investment-container {
    margin-top: 100px;
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
}

/* Investment Box Grid */
.investment-box-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 50px;
    align-items: center;
    padding: 70px 80px;
    background: linear-gradient(135deg, rgba(167, 145, 93, 0.12) 0%, rgba(20, 20, 20, 0.85) 100%);
    border: 3px solid #a7915d;
    border-radius: 4px;
    overflow: hidden;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Corner Accent Top Left */
.corner-accent-tl {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 40px;
    height: 40px;
    border-left: 1px solid rgba(167, 145, 93, 0.4);
    border-top: 1px solid rgba(167, 145, 93, 0.4);
}

/* Corner Accent Top Right */
.corner-accent-tr {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    border-right: 1px solid rgba(167, 145, 93, 0.4);
    border-top: 1px solid rgba(167, 145, 93, 0.4);
}

/* Corner Accent Bottom Left */
.corner-accent-bl {
    position: absolute;
    bottom: 15px;
    left: 15px;
    width: 40px;
    height: 40px;
    border-left: 1px solid rgba(167, 145, 93, 0.4);
    border-bottom: 1px solid rgba(167, 145, 93, 0.4);
}

/* Corner Accent Bottom Right */
.corner-accent-br {
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    border-right: 1px solid rgba(167, 145, 93, 0.4);
    border-bottom: 1px solid rgba(167, 145, 93, 0.4);
}

/* Text Investment Description */
.text-investment-desc {
    font-family: 'Cormorant Garamond', serif;
    font-size: 21px;
    color: rgba(245, 245, 240, 0.9);
    line-height: 2.2;
    font-weight: 300;
}

/* Price Large */
.price-large {
    font-family: 'Cormorant Garamond', serif;
    font-size: 36px;
    color: #f5f5f0;
    font-weight: 400;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

/* Price Subtitle */
.price-subtitle {
    font-family: 'Raleway', sans-serif;
    font-size: 11px;
    color: rgba(245, 245, 240, 0.5);
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* CTA Container */
.cta-container {
    text-align: center;
    margin-top: 40px;
}

/* Golden Separator */
.golden-separator {
    background: linear-gradient(-45deg, #0a0a0a 0%, #0f0f0f 25%, #050505 50%, #0f0f0f 75%, #0a0a0a 100%);
    padding: 0;
    width: 100%;
}

/* Golden Separator Line */
.golden-separator-line {
    display: none;
}

/* ======== Testimonials Section ======== */

/* Testimonials Header */
.testimonials-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 100px;
}

/* Testimonials Grid */
.testimonials-grid-style {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 60px;
    max-width: 1100px;
    margin: 0 auto 80px;
}

/* Testimonial Card Style */
.testimonial-card-style {
    background: linear-gradient(135deg, rgba(167, 145, 93, 0.12) 0%, rgba(20, 20, 20, 0.75) 100%);
    border: 2px solid rgba(167, 145, 93, 0.4);
    padding: 60px;
    border-radius: 8px;
    transition: opacity 0.4s ease, transform 0.4s ease, color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
    display: flex;
    flex-direction: column;
}

.testimonial-card-wide {
    grid-column: 1 / -1;
}

.testimonial-quote-wide {
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
    line-height: 1.85;
    color: #f5f5f0;
    margin-bottom: 40px;
    font-weight: 300;
    flex-grow: 1;
    max-width: 750px;
}

/* CTA Section Background */
.cta-bg {
    position: absolute;
    inset: 0;
    background-image: url('../images/leisten-nahaufnahme-v2.webp');
    background-size: cover;
    background-position: center;
    filter: sepia(15%) saturate(90%) brightness(55%) contrast(115%);
    z-index: 0;
    animation: sectionBgReveal 1.25s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards;
    opacity: 0;
}

/* Decorative Line Bottom Center */
.line-bottom-center {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 1px;
    background: linear-gradient(to right, transparent, #a7915d, transparent);
    z-index: 2;
}

/* CTA Buttons Style */
.cta-buttons-style {
    display: flex;
    gap: 30px;
    justify-content: center;
    margin-bottom: 60px;
    flex-wrap: wrap;
}

/* CTA Info Grid Style */
.cta-info-style {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    padding-top: 50px;
    border-top: 1px solid rgba(167, 145, 93, 0.2);
    max-width: 700px;
    margin: 0 auto;
}

/* Instagram Section Background */
.instagram-bg {
    position: absolute;
    inset: 0;
    background-image: url('../images/handwerk-schuerze-v2.webp');
    background-size: cover;
    background-position: center;
    filter: sepia(15%) saturate(90%) brightness(55%) contrast(115%);
    z-index: 0;
    animation: sectionBgReveal 1.25s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards;
    opacity: 0;
}

/* Instagram CTA Button Style */
.instagram-cta-button-style {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 60px;
    flex-wrap: wrap;
}

/* Instagram Logo Container */
.instagram-logo-container {
    display: flex;
    justify-content: center;
    padding-top: 50px;
    border-top: 1px solid rgba(167, 145, 93, 0.2);
    max-width: 500px;
    margin: 0 auto;
}

/* Instagram Logo */
.instagram-logo {
    height: 80px;
    width: auto;
    opacity: 0.7;
}

/* Footer Credit Line */
.footer-credit-line {
    font-size: 13px;
    color: rgba(167, 145, 93, 0.6);
    letter-spacing: 0.5px;
    margin-top: 10px;
}

/* Essen Parallax Background */
.essen-parallax-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/scheer-essen-bg-v2.webp') center/cover no-repeat;
    z-index: -2;
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* Essen Parallax Overlay */
.essen-parallax-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(10,10,10,0.75) 0%, rgba(10,10,10,0.5) 50%, rgba(10,10,10,0.7) 100%);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* Führungen Parallax Background */
.fuehrungen-parallax-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/scheer_g2973.webp') center/cover no-repeat;
    z-index: -2;
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* Führungen Parallax Overlay */
.fuehrungen-parallax-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(10,10,10,0.75) 0%, rgba(10,10,10,0.5) 50%, rgba(10,10,10,0.7) 100%);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* FAQ Parallax Background */
.faq-parallax-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/dsc_6033.webp') center/cover no-repeat;
    z-index: -2;
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* FAQ Parallax Overlay */
.faq-parallax-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(10,10,10,0.8) 0%, rgba(10,10,10,0.5) 50%, rgba(10,10,10,0.75) 100%);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* Reparatur Vorher/Nachher Parallax Background */
.reparatur-parallax-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/scheer_1005_b3347.webp') center/cover no-repeat;
    z-index: -2;
    opacity: 0;
    transition: opacity 0.8s ease;
}

/* Reparatur Parallax Overlay */
.reparatur-parallax-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(10,10,10,0.05) 0%, rgba(10,10,10,0) 50%, rgba(10,10,10,0.05) 100%);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.8s ease;
    transform: translateZ(0);
}

/* FAQ Hero Background */
.faq-hero-bg {
    position: absolute;
    inset: 0;
    background-image: url('../images/image-12.webp');
    background-size: cover;
    background-position: center;
    filter: sepia(15%) saturate(90%) brightness(45%) contrast(115%);
    opacity: 0;
    animation: heroBgFadeIn 1.5s ease 0s forwards;
}

/* FAQ Content Section */
.faq-content-section {
    padding: 120px 60px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #0a0a0a 0%, #050505 50%, #0a0a0a 100%);
}

/* FAQ Ambient Background */
.faq-ambient-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 20%, rgba(167, 145, 93, 0.03) 0%, transparent 50%), radial-gradient(ellipse at 70% 80%, rgba(167, 145, 93, 0.02) 0%, transparent 50%);
    pointer-events: none;
}

/* Reparatur Hero Background */
.reparatur-hero-bg {
    position: absolute;
    inset: 0;
    background-image: url('../images/scheer_1005_b3347.webp');
    background-size: cover;
    background-position: center;
    z-index: 0;
    opacity: 0;
    animation: sectionBgReveal 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards;
    filter: sepia(10%) saturate(90%) brightness(80%) contrast(115%);
}

/* Reparatur Hero Subtitle */
.reparatur-hero-subtitle {
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px;
    font-style: italic;
    color: rgba(245,245,240,0.8);
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
    opacity: 0;
    transform: translateY(30px);
    animation: heroFadeInUp 0.35s ease 1.2s forwards;
}

/* Reparatur Statement Section */
.reparatur-statement-section {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: #050505;
}

/* Reparatur Statement Background */
.reparatur-statement-bg {
    position: absolute;
    inset: 0;
    background-image: url('../images/reparatur-werkstatt.webp');
    background-size: cover;
    background-position: center;
    filter: sepia(15%) saturate(90%) brightness(60%) contrast(115%);
    z-index: 0;
    opacity: 0;
    animation: sectionBgReveal 1.25s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards;
}

/* Reparatur Glow */
.reparatur-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(167, 145, 93, 0.08) 0%, transparent 60%);
    pointer-events: none;
    z-index: 1;
}

/* Reparatur Vignette */
.reparatur-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0) 20%, rgba(0,0,0,0.1) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Reparatur Content Box */
.reparatur-content-box {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 60px;
    max-width: 900px;
}

/* Text 20 Italic Muted Wide */
.text-20-italic-muted-wide {
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    font-style: italic;
    color: rgba(245, 245, 240, 0.6);
    line-height: 1.8;
    margin-bottom: 50px;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

/* Section Background Gradient */
.section-bg-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #0a0a0a 0%, #050505 50%, #0a0a0a 100%);
}

/* Glow Left */
.glow-left {
    position: absolute;
    top: 20%;
    left: 10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(167, 145, 93, 0.04) 0%, transparent 70%);
    pointer-events: none;
}

/* Glow Right */
.glow-right {
    position: absolute;
    bottom: 20%;
    right: 10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(167, 145, 93, 0.03) 0%, transparent 70%);
    pointer-events: none;
}

/* Service Grid 2 Columns */
.service-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

/* Service Card Left */
.service-card-left {
    padding: 80px 60px;
    background: linear-gradient(135deg, rgba(20,20,20,0.95) 0%, rgba(15,15,15,0.98) 100%);
    border: 1px solid rgba(167,145,93,0.2);
    border-right: none;
    position: relative;
    overflow: hidden;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Service Card Right */
.service-card-right {
    padding: 80px 60px;
    background: linear-gradient(135deg, rgba(167, 145, 93, 0.08) 0%, rgba(15,15,15,0.98) 100%);
    border: 1px solid rgba(167,145,93,0.3);
    position: relative;
    overflow: hidden;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Shine Effect */
.shine-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(167, 145, 93, 0.08), transparent);
    animation: shine 12s infinite;
    pointer-events: none;
}

/* Shine Effect Delayed */
.shine-effect-delayed {
    background: linear-gradient(90deg, transparent, rgba(167, 145, 93, 0.1), transparent);
    animation: shine 12s infinite 3s;
}

/* Service List */
.service-list {
    display: flex;
    flex-direction: column;
}

/* Reparatur Vorher/Nachher Background */
.reparatur-vorher-bg {
    position: absolute;
    inset: 0;
    background-image: url('../images/reparatur-vorher-nachher.webp');
    background-size: cover;
    background-position: center;
    filter: sepia(15%) saturate(90%) brightness(60%) contrast(115%);
    z-index: 0;
    opacity: 0;
    animation: sectionBgReveal 1.25s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards;
}

/* Reparatur Gold Overlay */
.reparatur-gold-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(167, 145, 93, 0.04) 0%, transparent 60%);
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 1;
}

/* Container 1100 z2 */
.container-1100-z2 {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: 0 auto;
}

/* Text Center MB120 */
.text-center-mb120 {
    text-align: center;
    margin-bottom: 120px;
}

/* Pflegekurse Parallax Background */
.pflegekurse-parallax-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/pflegekurse-hero-v2.webp') center/cover no-repeat;
    z-index: -2;
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* Pflegekurse Parallax Overlay */
.pflegekurse-parallax-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(10,10,10,0.75) 0%, rgba(10,10,10,0.5) 50%, rgba(10,10,10,0.7) 100%);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* Pflegekurse Section Background */
.pflegekurse-section-bg {
    position: absolute;
    inset: 0;
    background-image: url('../images/image-14.webp');
    background-size: cover;
    background-position: center;
    filter: grayscale(100%) brightness(0.15);
}

/* Pflegekurse Section Overlay */
.pflegekurse-section-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.7);
}

/* Pflegekurse Timeline Row */
.pflegekurse-timeline-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    margin-bottom: 80px;
}

/* Massschuhe Hero Background */
.massschuhe-hero-bg {
    position: absolute;
    inset: 0;
    background-color: #0a0a0a;
    z-index: 0;
}

/* Toggle Container Animated */
.toggle-container-animated {
    margin-top: 60px;
    opacity: 0;
    animation: fadeInUp 0.55s ease 1.55s forwards;
}

/* Scheer Toggle Style */
.scheer-toggle-style {
    display: inline-flex;
    border: 1px solid rgba(167, 145, 93, 0.4);
    overflow: hidden;
}

/* Scheer Toggle Button Active */
.scheer-toggle-btn-active {
    padding: 18px 45px;
    font-family: 'Raleway', sans-serif;
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    background: rgba(167, 145, 93, 0.2);
    color: #a7915d;
    border: none;
    cursor: pointer;
    transition: opacity 0.4s ease, transform 0.4s ease, color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
}

/* Scheer Toggle Button Inactive */
.scheer-toggle-btn-inactive {
    padding: 18px 45px;
    font-family: 'Raleway', sans-serif;
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    background: transparent;
    color: rgba(245, 245, 240, 0.5);
    border: none;
    border-left: 1px solid rgba(167, 145, 93, 0.4);
    cursor: pointer;
    transition: opacity 0.4s ease, transform 0.4s ease, color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
}

/* Scroll Indicator Animated */
.scroll-indicator-animated {
    margin-top: 50px;
    opacity: 0;
    animation: fadeInUp 0.55s ease 2s forwards;
}

/* Mobile Filter Button Style */
.mobile-filter-btn-style {
    display: none;
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    padding: 15px 35px;
    background: #0a0a0a;
    border: 1px solid #a7915d;
    color: #a7915d;
    font-family: 'Raleway', sans-serif;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    cursor: pointer;
    align-items: center;
    gap: 10px;
}

/* Gallery Nav Active */
.gallery-nav-active {
    width: 100%;
    display: block;
}

/* Gallery Nav Hidden */
.gallery-nav-hidden {
    width: 100%;
    display: none;
}

/* Galerie Parallax Base */
.galerie-parallax {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

/* Galerie Parallax Schuhe */
.galerie-parallax-schuhe {
    background: url('../images/galerie-bg-showroom-v2.webp') center/cover no-repeat;
}

/* Galerie Parallax Accessoires */
.galerie-parallax-accessoires {
    background: url('../images/galerie-bg-showroom-v2.webp') center/cover no-repeat;
}

/* Galerie Parallax Overlay */
.galerie-parallax-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5,5,5,0.6);
    z-index: -1;
}

/* Gallery Grid Stiefel */
.gallery-grid-stiefel {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
    height: 600px;
}

/* Gallery Grid 2 Columns */
.gallery-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    max-width: 1000px;
    margin: 60px auto 0;
}

/* Gallery Grid 3 Columns */
.gallery-grid-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    max-width: 1400px;
}

/* Gallery Grid 1 Column */
.gallery-grid-1col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    max-width: 1000px;
    margin: 0 auto;
}

/* Product Span 2 */
.product-span-2 {
    grid-column: span 2;
    aspect-ratio: 16/10;
}

/* Product Aspect Tall */
.product-aspect-tall {
    aspect-ratio: 1892/2000;
}

/* Product Aspect Wide */
.product-aspect-wide {
    aspect-ratio: 16/10;
}

/* Content Hidden */
.content-hidden {
    display: none;
}

/* ======== Scheer Breaker Section ======== */
.scheer-breaker-style {
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #030303;
    overflow: hidden;
}

.scheer-breaker-img-style {
    position: absolute;
    inset: -50px;
    background-image: url('../images/breaker-schuh.webp');
    background-size: cover;
    background-position: center;
    background-color: #0a0a0a;
    filter: brightness(0.7) saturate(0.9);
    transition: transform 0.1s ease-out;
}

.breaker-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.8) 100%);
    pointer-events: none;
}

.breaker-gold-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(167, 145, 93, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

.corner-accent-lg {
    position: absolute;
    width: 150px;
    height: 150px;
}

.corner-tl-lg {
    top: 50px;
    left: 50px;
    border-top: 1px solid rgba(167, 145, 93, 0.3);
    border-left: 1px solid rgba(167, 145, 93, 0.3);
}

.corner-tr-lg {
    top: 50px;
    right: 50px;
    border-top: 1px solid rgba(167, 145, 93, 0.3);
    border-right: 1px solid rgba(167, 145, 93, 0.3);
}

.corner-bl-lg {
    bottom: 50px;
    left: 50px;
    border-bottom: 1px solid rgba(167, 145, 93, 0.3);
    border-left: 1px solid rgba(167, 145, 93, 0.3);
}

.corner-br-lg {
    bottom: 50px;
    right: 50px;
    border-bottom: 1px solid rgba(167, 145, 93, 0.3);
    border-right: 1px solid rgba(167, 145, 93, 0.3);
}

.breaker-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 40px;
}

.breaker-line-top {
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #a7915d, transparent);
    margin: 0 auto 40px;
}

.breaker-line-bottom {
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #a7915d, transparent);
    margin: 40px auto 0;
}

.breaker-quote {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(28px, 5vw, 48px);
    font-style: italic;
    font-weight: 300;
    color: #f5f5f0;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.5;
    text-shadow: 0 4px 30px rgba(0,0,0,0.5);
}

/* ======== Gallery CTA Section ======== */
.gallery-cta-style {
    position: relative;
    padding: 200px 60px;
    background: #030303;
    overflow: hidden;
}

.cta-glow-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(167, 145, 93, 0.08) 0%, transparent 60%);
    pointer-events: none;
}

.cta-top-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(167, 145, 93, 0.3), transparent);
}

.corner-accent-sm {
    position: absolute;
    width: 100px;
    height: 100px;
}

.corner-tl-sm {
    top: 60px;
    left: 60px;
    border-top: 1px solid rgba(167, 145, 93, 0.2);
    border-left: 1px solid rgba(167, 145, 93, 0.2);
}

.corner-tr-sm {
    top: 60px;
    right: 60px;
    border-top: 1px solid rgba(167, 145, 93, 0.2);
    border-right: 1px solid rgba(167, 145, 93, 0.2);
}

.corner-bl-sm {
    bottom: 60px;
    left: 60px;
    border-bottom: 1px solid rgba(167, 145, 93, 0.2);
    border-left: 1px solid rgba(167, 145, 93, 0.2);
}

.corner-br-sm {
    bottom: 60px;
    right: 60px;
    border-bottom: 1px solid rgba(167, 145, 93, 0.2);
    border-right: 1px solid rgba(167, 145, 93, 0.2);
}

.cta-content-box {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.cta-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
}

.cta-line-left {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #a7915d);
}

.cta-line-right {
    width: 60px;
    height: 1px;
    background: linear-gradient(-90deg, transparent, #a7915d);
}

.cta-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(42px, 7vw, 72px);
    font-weight: 300;
    color: #f5f5f0;
    margin-bottom: 30px;
    line-height: 1.2;
}

.cta-divider {
    width: 120px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #a7915d, transparent);
    margin: 0 auto 40px;
}

.cta-description {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    font-style: italic;
    color: rgba(245, 245, 240, 0.6);
    max-width: 600px;
    margin: 0 auto 60px;
    line-height: 1.8;
}

/* ======== Exklusiv Modal ======== */
/* Exklusiv Loading Screen */
.exklusiv-loader {
    position: fixed;
    inset: 0;
    background: #050505;
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity: 1;
}

.exklusiv-loader.is-leaving {
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.exklusiv-loader-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    background: radial-gradient(ellipse, rgba(167,145,93,0.06) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 1.2s ease 0.3s;
}

.exklusiv-loader.is-active .exklusiv-loader-glow {
    opacity: 1;
}

.exklusiv-loader-corner {
    position: absolute;
    width: 80px;
    height: 80px;
    opacity: 0;
    transition: opacity 0.8s ease 0.6s;
}

.exklusiv-loader.is-active .exklusiv-loader-corner {
    opacity: 1;
}

.exklusiv-loader-corner-tl {
    top: 50px;
    left: 50px;
    border-left: 1px solid rgba(167,145,93,0.15);
    border-top: 1px solid rgba(167,145,93,0.15);
}

.exklusiv-loader-corner-br {
    bottom: 50px;
    right: 50px;
    border-right: 1px solid rgba(167,145,93,0.15);
    border-bottom: 1px solid rgba(167,145,93,0.15);
}

.exklusiv-loader-body {
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
}

.exklusiv-loader.is-active .exklusiv-loader-body {
    opacity: 1;
    transform: translateY(0);
}

.exklusiv-loader-ring {
    width: 100px;
    height: 100px;
    margin: 0 auto 50px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.exklusiv-loader-ring::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px solid rgba(167,145,93,0.1);
    border-top-color: rgba(167,145,93,0.6);
    animation: exklusivSpin 1.8s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.exklusiv-loader-ring::after {
    content: '';
    position: absolute;
    inset: -18px;
    border-radius: 50%;
    border: 1px solid rgba(167,145,93,0.05);
    border-bottom-color: rgba(167,145,93,0.25);
    animation: exklusivSpin 2.8s cubic-bezier(0.5, 0, 0.5, 1) infinite reverse;
}

@keyframes exklusivSpin {
    to { transform: rotate(360deg); }
}

.exklusiv-loader-logo {
    width: 45px;
    height: auto;
    opacity: 0.9;
    filter: brightness(1.1);
}

.exklusiv-loader-line {
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(167,145,93,0.5), transparent);
    margin: 0 auto 35px;
    transform: scaleX(0);
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.5s;
}

.exklusiv-loader.is-active .exklusiv-loader-line {
    transform: scaleX(1);
}

.exklusiv-loader-label {
    font-family: 'Raleway', sans-serif;
    font-size: 10px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: rgba(167,145,93,0.4);
    opacity: 0;
    transition: opacity 0.6s ease 0.8s;
}

.exklusiv-loader.is-active .exklusiv-loader-label {
    opacity: 1;
}

.exklusiv-modal-style {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.95);
    z-index: 999999;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.exklusiv-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 90%;
    max-width: 450px;
}

.exklusiv-close-btn {
    position: absolute;
    top: -60px;
    right: 0;
    background: none;
    border: none;
    color: #666;
    font-size: 32px;
    cursor: pointer;
    transition: opacity 0.3s, transform 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s;
}

.exklusiv-close-btn:hover {
    color: #a7915d;
}

.exklusiv-logo {
    font-family: 'Cormorant Garamond', serif;
    font-size: 48px;
    color: #a7915d;
    letter-spacing: 8px;
    margin-bottom: 20px;
}

.exklusiv-subtitle {
    font-family: 'Raleway', sans-serif;
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #666;
    margin-bottom: 50px;
}

.exklusiv-decorative-line {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #a7915d, transparent);
    margin: 0 auto 50px;
}

.exklusiv-input-wrapper {
    position: relative;
    margin-bottom: 30px;
}

.exklusiv-password-input {
    width: 100%;
    padding: 20px 25px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(167, 145, 93, 0.3);
    border-radius: 4px;
    color: #f5f5f0;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    letter-spacing: 8px;
    text-align: center;
    outline: none;
    transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.exklusiv-password-input:focus {
    border-color: #a7915d;
    box-shadow: 0 0 30px rgba(167,145,93,0.2);
}

.exklusiv-input-label {
    position: absolute;
    top: -10px;
    left: 20px;
    background: #0a0a0a;
    padding: 0 10px;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #666;
}

.exklusiv-error {
    color: #c94a4a;
    font-size: 12px;
    letter-spacing: 1px;
    margin-bottom: 20px;
    opacity: 0;
    transition: opacity 0.3s;
}

.exklusiv-checkmark-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 24px;
    height: 24px;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.exklusiv-checkmark-path {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}

.exklusiv-hint {
    margin-top: 40px;
    font-size: 11px;
    color: #444;
    letter-spacing: 1px;
}

/* ======== Exklusiv Modal V2 ======== */
.exklusiv-modal-v2 {
    position: fixed;
    inset: 0;
    background: url('../images/scheer_0607_a9929.webp') center/cover no-repeat;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.exklusiv-modal-v2::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(5, 5, 5, 0.85);
}

.exklusiv-modal-v2.is-hidden {
    display: flex;
    opacity: 0;
    pointer-events: none;
}

.exklusiv-modal-v2:not(.is-hidden) {
    opacity: 1;
    pointer-events: auto;
}

/* Close Button */
.exklusiv-close-v2 {
    position: absolute;
    z-index: 2;
    top: 40px;
    right: 40px;
    width: 50px;
    height: 50px;
    background: transparent;
    border: 1px solid rgba(167, 145, 93, 0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease, transform 0.4s ease, color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
}

.exklusiv-close-v2 svg {
    width: 20px;
    height: 20px;
    color: rgba(245, 245, 240, 0.4);
    transition: opacity 0.4s ease, transform 0.4s ease, color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
}

.exklusiv-close-v2:hover {
    border-color: #a7915d;
}

.exklusiv-close-v2:hover svg {
    color: #a7915d;
}

/* Content Box */
.exklusiv-content-v2 {
    position: relative;
    z-index: 1;
    width: 90%;
    max-width: 420px;
    padding: 60px 50px;
    text-align: center;
    border: 1px solid rgba(167, 145, 93, 0.15);
    background: rgba(10, 10, 10, 0.8);
}

/* Corner Decorations */
.exklusiv-corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border-color: #a7915d;
    border-style: solid;
    border-width: 0;
    opacity: 0.6;
}

.exklusiv-corner-tl { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.exklusiv-corner-tr { top: -1px; right: -1px; border-top-width: 1px; border-right-width: 1px; }
.exklusiv-corner-bl { bottom: -1px; left: -1px; border-bottom-width: 1px; border-left-width: 1px; }
.exklusiv-corner-br { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }

/* Eyebrow */
.exklusiv-eyebrow-v2 {
    font-family: 'Raleway', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: #a7915d;
    margin-bottom: 25px;
}

/* Logo */
.exklusiv-logo-v2 {
    margin-bottom: 40px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.exklusiv-logo-v2 img {
    width: 80px;
    height: auto;
    opacity: 0.9;
    margin-bottom: 15px;
}

.exklusiv-brand-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 32px;
    font-weight: 300;
    letter-spacing: 0.4em;
    padding-left: 0.4em;
    color: #a7915d;
    margin-bottom: 8px;
}

.exklusiv-brand-sub {
    font-family: 'Raleway', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.35em;
    padding-left: 0.35em;
    color: rgba(167, 145, 93, 0.6);
    text-transform: uppercase;
}

/* Divider */
.exklusiv-divider-v2 {
    width: 50px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(167, 145, 93, 0.6), transparent);
    margin: 0 auto 40px;
}

/* Input Group */
.exklusiv-input-v2 {
    position: relative;
    margin-bottom: 15px;
}

.exklusiv-input-v2 input {
    width: 100%;
    padding: 18px 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(167, 145, 93, 0.2);
    color: #f5f5f0;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    letter-spacing: 0.3em;
    text-align: center;
    outline: none;
    transition: opacity 0.4s ease, transform 0.4s ease, color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
}

.exklusiv-input-v2 input:focus {
    border-bottom-color: #a7915d;
}

.exklusiv-input-v2 label {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Raleway', sans-serif;
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(245, 245, 240, 0.3);
    pointer-events: none;
    transition: top 0.4s ease, font-size 0.4s ease, color 0.4s ease;
}

.exklusiv-input-v2 input:focus + label,
.exklusiv-input-v2 input:not(:placeholder-shown) + label {
    top: 0;
    font-size: 9px;
    color: #a7915d;
}

.exklusiv-input-v2 .input-line {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 1px;
    background: #a7915d;
    transition: width 0.4s ease;
    transform: translateX(-50%);
}

.exklusiv-input-v2 input:focus ~ .input-line {
    width: 100%;
}

/* Error */
.exklusiv-error-v2 {
    font-family: 'Raleway', sans-serif;
    font-size: 11px;
    letter-spacing: 0.1em;
    color: #c94a4a;
    height: 20px;
    margin-bottom: 25px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.exklusiv-error-v2.show {
    opacity: 1;
}

/* Button */
.exklusiv-btn-v2 {
    position: relative;
    width: 100%;
    max-width: 220px;
    padding: 18px 40px;
    background: transparent;
    border: 1px solid rgba(167, 145, 93, 0.4);
    color: #f5f5f0;
    font-family: 'Raleway', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    cursor: pointer;
    overflow: hidden;
    transition: opacity 0.4s ease, transform 0.4s ease, color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
}

.exklusiv-btn-v2:hover {
    border-color: #a7915d;
    color: #a7915d;
}

.exklusiv-btn-v2 .btn-text {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.exklusiv-btn-v2 .checkmark-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 22px;
    height: 22px;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.exklusiv-btn-v2.success {
    border-color: #a7915d;
    pointer-events: none;
}

.exklusiv-btn-v2.success .btn-text {
    opacity: 0;
    transform: scale(0.8);
}

.exklusiv-btn-v2.success .checkmark-icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Hint */
.exklusiv-hint-v2 {
    margin-top: 40px;
    font-family: 'Raleway', sans-serif;
    font-size: 10px;
    letter-spacing: 0.1em;
    color: rgba(245, 245, 240, 0.25);
    line-height: 1.6;
}

/* ======== Exklusiv Page Section ======== */
.exklusiv-bg-layer-style {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #0a0a0a 0%, #000 50%, #0a0a0a 100%);
    opacity: 0;
    animation: bgFadeIn 2s ease 0.2s forwards;
}

/* Pause hero animations while loading screen is visible */
#page-exklusiv.exklusiv-hero-waiting .subpage-hero .hero-flex-header,
#page-exklusiv.exklusiv-hero-waiting .subpage-hero .hero-title-animated,
#page-exklusiv.exklusiv-hero-waiting .subpage-hero .hero-quote,
#page-exklusiv.exklusiv-hero-waiting .subpage-hero .divider-150-animated,
#page-exklusiv.exklusiv-hero-waiting .subpage-hero .line-animated-left,
#page-exklusiv.exklusiv-hero-waiting .subpage-hero .line-animated-right,
#page-exklusiv.exklusiv-hero-waiting .subpage-hero .line-expand-left,
#page-exklusiv.exklusiv-hero-waiting .subpage-hero .line-expand-right,
#page-exklusiv.exklusiv-hero-waiting .subpage-hero .exklusiv-bg-layer-style,
#page-exklusiv.exklusiv-hero-waiting .subpage-hero .glow-pulse,
#page-exklusiv.exklusiv-hero-waiting .subpage-hero .corner-accent {
    animation: none !important;
    opacity: 0 !important;
}

#page-exklusiv.exklusiv-hero-waiting .subpage-hero .line-expand-left,
#page-exklusiv.exklusiv-hero-waiting .subpage-hero .line-expand-right {
    width: 0 !important;
}

.exklusiv-quick-nav {
    background: #080808;
    padding: 50px 60px;
    border-bottom: 1px solid rgba(167,145,93,0.15);
}

.exklusiv-nav-links {
    display: flex;
    justify-content: center;
    gap: 80px;
    flex-wrap: wrap;
}

.exklusiv-leder-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    grid-template-rows: 1fr 1fr;
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
    height: 700px;
}

.leather-card-large {
    grid-row: span 2;
    background: linear-gradient(135deg, rgba(30,25,20,1) 0%, rgba(20,15,10,1) 100%);
    border: 1px solid rgba(167,145,93,0.2);
    position: relative;
    overflow: hidden;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.5s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.leather-card-right-top {
    background: linear-gradient(135deg, rgba(25,20,18,1) 0%, rgba(15,12,10,1) 100%);
    border: 1px solid rgba(167,145,93,0.2);
    position: relative;
    overflow: hidden;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.5s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.leather-card-right-bottom {
    background: linear-gradient(135deg, rgba(28,22,18,1) 0%, rgba(18,14,10,1) 100%);
    border: 1px solid rgba(167,145,93,0.2);
    position: relative;
    overflow: hidden;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.5s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-gradient-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.6) 100%);
}

.exklusiv-accessoires-section {
    padding: 140px 60px;
    background: #050505;
}

.exklusiv-accessoires-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto;
    gap: 25px;
    max-width: 1400px;
    margin: 0 auto;
}

.accessoire-card-1 {
    grid-column: span 5;
    grid-row: span 2;
    min-height: 550px;
    background: linear-gradient(135deg, rgba(35,28,22,1) 0%, rgba(22,18,14,1) 100%);
    border: 1px solid rgba(167,145,93,0.2);
    position: relative;
    overflow: hidden;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.5s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.accessoire-card-2 {
    grid-column: span 4;
    min-height: 260px;
    background: linear-gradient(135deg, rgba(30,24,20,1) 0%, rgba(20,16,12,1) 100%);
    border: 1px solid rgba(167,145,93,0.2);
    position: relative;
    overflow: hidden;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.5s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.accessoire-card-3 {
    grid-column: span 3;
    min-height: 260px;
    background: linear-gradient(135deg, rgba(28,22,18,1) 0%, rgba(18,14,10,1) 100%);
    border: 1px solid rgba(167,145,93,0.2);
    position: relative;
    overflow: hidden;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.5s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.accessoire-card-4 {
    grid-column: span 3;
    min-height: 260px;
    background: linear-gradient(135deg, rgba(32,26,20,1) 0%, rgba(20,16,12,1) 100%);
    border: 1px solid rgba(167,145,93,0.2);
    position: relative;
    overflow: hidden;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.5s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.accessoire-card-5 {
    grid-column: span 4;
    min-height: 260px;
    background: linear-gradient(135deg, rgba(26,20,16,1) 0%, rgba(16,12,10,1) 100%);
    border: 1px solid rgba(167,145,93,0.2);
    position: relative;
    overflow: hidden;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.5s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-gradient-overlay-strong {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.7) 100%);
}

.exklusiv-news-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
    max-width: 1100px;
    margin: 0 auto;
}

.news-card-premium {
    background: linear-gradient(160deg, rgba(20,18,15,0.95) 0%, rgba(10,10,10,0.98) 100%);
    border: 1px solid rgba(167,145,93,0.12);
    overflow: hidden;
    cursor: pointer;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), color 0.6s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.6s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.news-card-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(167,145,93,0.4), transparent);
    opacity: 0;
    transition: opacity 0.6s ease;
}

.news-card-premium:hover {
    border-color: rgba(167,145,93,0.35);
    transform: translateY(-8px);
    box-shadow: 0 30px 60px rgba(0,0,0,0.5), 0 0 50px rgba(167,145,93,0.08);
}

.news-card-premium:hover::before {
    opacity: 1;
}

.news-card-visual {
    height: 280px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.news-card-visual-1 {
    background: linear-gradient(160deg, #1a1510 0%, #0d0b08 40%, #0a0a08 100%);
}

.news-card-visual-2 {
    background: linear-gradient(160deg, #10151a 0%, #0a0d10 40%, #080a0a 100%);
}

.news-card-visual-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(10,10,10,0.95) 100%);
    z-index: 1;
}

.news-card-visual-icon {
    font-size: 80px;
    color: rgba(167,145,93,0.08);
    z-index: 0;
    transition: opacity 0.6s ease, transform 0.6s ease, color 0.6s ease, background-color 0.6s ease, border-color 0.6s ease;
    user-select: none;
}

.news-card-premium:hover .news-card-visual-icon {
    color: rgba(167,145,93,0.15);
    transform: scale(1.1);
}

.news-card-body {
    padding: 40px 35px 45px;
}

.news-card-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px;
    color: #f5f5f0;
    margin-bottom: 20px;
    line-height: 1.3;
    letter-spacing: 0.5px;
    font-weight: 400;
}

.news-card-excerpt {
    font-family: 'Raleway', sans-serif;
    color: rgba(245,245,240,0.45);
    font-size: 14px;
    line-height: 1.9;
    font-weight: 300;
    margin-bottom: 30px;
}

.news-card-link {
    font-family: 'Raleway', sans-serif;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #a7915d;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: opacity 0.4s ease, transform 0.4s ease, color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
}

.news-card-arrow {
    transition: transform 0.4s ease;
    font-size: 14px;
}

.news-card-premium:hover .news-card-link {
    color: #c4a96a;
}

.news-card-premium:hover .news-card-arrow {
    transform: translateX(5px);
}

.exklusiv-termin-section {
    padding: 140px 60px;
    background: linear-gradient(180deg, #050505 0%, #0a0a0a 100%);
    position: relative;
}

.exklusiv-termin-content {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

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

.exklusiv-back-section {
    padding: 80px 60px;
    text-align: center;
    background: #050505;
    border-top: 1px solid rgba(167,145,93,0.1);
}

.exklusiv-back-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: rgba(245,245,240,0.4);
    text-decoration: none;
    font-family: 'Raleway', sans-serif;
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    transition: opacity 0.4s ease, transform 0.4s ease, color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
}

.exklusiv-back-link:hover {
    color: #a7915d;
}

.quote-description {
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    font-style: italic;
    color: rgba(245,245,240,0.5);
    max-width: 600px;
    margin: 0 auto;
}

.quote-description-mb60 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    font-style: italic;
    color: rgba(245,245,240,0.5);
    max-width: 550px;
    margin: 0 auto 60px;
}

/* ======== Blog Pages ======== */
.blog-hero-section {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(180deg, #000 0%, #0a0a0a 100%);
    overflow: hidden;
}

.blog-hero-radial-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(167,145,93,0.05) 0%, transparent 70%);
}

.blog-corner-tl {
    position: absolute;
    top: 80px;
    left: 80px;
    width: 100px;
    height: 100px;
    border-left: 1px solid rgba(167,145,93,0.3);
    border-top: 1px solid rgba(167,145,93,0.3);
}

.blog-corner-br {
    position: absolute;
    bottom: 80px;
    right: 80px;
    width: 100px;
    height: 100px;
    border-right: 1px solid rgba(167,145,93,0.3);
    border-bottom: 1px solid rgba(167,145,93,0.3);
}

.blog-hero-content {
    text-align: center;
    z-index: 2;
    padding: 40px;
    max-width: 900px;
}

.blog-category-label {
    font-family: 'Raleway', sans-serif;
    font-size: 11px;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: #a7915d;
    margin-bottom: 40px;
    font-weight: 500;
}

.blog-hero-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 72px;
    font-weight: 300;
    color: #f5f5f0;
    letter-spacing: 4px;
    margin-bottom: 30px;
    line-height: 1.1;
}

.blog-hero-divider {
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #a7915d, transparent);
    margin: 40px auto;
}

.blog-hero-subtitle {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    font-style: italic;
    color: rgba(245,245,240,0.6);
    line-height: 1.7;
}

.blog-article-section {
    background: linear-gradient(180deg, #0a0a0a 0%, #080808 50%, #0a0a0a 100%);
    padding: 100px 40px;
}

.blog-article-container {
    max-width: 800px;
    margin: 0 auto;
}

.blog-intro {
    margin-bottom: 80px;
}

.blog-intro-quote {
    font-family: 'Cormorant Garamond', serif;
    font-size: 26px;
    color: rgba(245,245,240,0.9);
    line-height: 1.9;
    font-style: italic;
    text-align: center;
    border-left: 2px solid #a7915d;
    padding-left: 40px;
    margin-left: 0;
}

.blog-image-placeholder {
    margin: 60px 0;
    background: linear-gradient(135deg, rgba(20,20,20,0.8) 0%, rgba(15,15,15,0.9) 100%);
    border: 1px solid rgba(167,145,93,0.2);
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-image-label {
    font-family: 'Raleway', sans-serif;
    font-size: 11px;
    letter-spacing: 4px;
    color: rgba(167,145,93,0.5);
    text-transform: uppercase;
}

.blog-quote-block {
    margin: 80px 0;
    padding: 50px;
    background: linear-gradient(135deg, rgba(167,145,93,0.08) 0%, rgba(167,145,93,0.03) 100%);
    border-left: 3px solid #a7915d;
}

.blog-quote-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px;
    font-style: italic;
    color: #f5f5f0;
    line-height: 1.7;
    margin-bottom: 20px;
}

.blog-quote-author {
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    letter-spacing: 3px;
    color: #a7915d;
    text-transform: uppercase;
}

.blog-closing {
    text-align: center;
    margin-top: 100px;
    padding-top: 60px;
    border-top: 1px solid rgba(167,145,93,0.2);
}

.blog-closing-icon {
    width: 40px;
    height: 40px;
    margin: 0 auto 30px;
    border: 1px solid rgba(167,145,93,0.4);
    transform: rotate(45deg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-closing-text {
    font-family: 'Raleway', sans-serif;
    font-size: 11px;
    letter-spacing: 4px;
    color: rgba(245,245,240,0.4);
    text-transform: uppercase;
}

.rotate-45-neg {
    transform: rotate(-45deg);
}

/* Legal Page h1 */
.legal-hero-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 64px;
    font-weight: 300;
    color: #f5f5f0;
    letter-spacing: 6px;
    margin-bottom: 30px;
}

/* Legal Page h2 */
.legal-section-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 42px;
    font-weight: 300;
    color: #f5f5f0;
    margin-bottom: 25px;
    letter-spacing: 3px;
}

/* Legal text styles */
.legal-intro-text {
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    color: rgba(245,245,240,0.5);
    line-height: 2;
    margin-bottom: 80px;
    text-align: center;
    font-weight: 300;
    letter-spacing: 0.5px;
}

.legal-address-text {
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    color: rgba(245,245,240,0.7);
    line-height: 2;
    font-weight: 300;
}

.legal-contact-text {
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    color: rgba(245,245,240,0.7);
    line-height: 2.2;
    font-weight: 300;
}

.legal-credit-text {
    font-family: 'Raleway', sans-serif;
    font-size: 15px;
    color: rgba(245,245,240,0.7);
    line-height: 2.2;
    font-weight: 300;
    text-align: center;
}

/* ======== Datenschutz Page ======== */
.datenschutz-hero-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 52px;
    font-weight: 300;
    color: #f5f5f0;
    letter-spacing: 4px;
    margin-bottom: 30px;
}

.datenschutz-intro {
    margin-bottom: 80px;
    text-align: center;
}

.datenschutz-intro-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: 32px;
    color: #f5f5f0;
    line-height: 1.6;
    font-style: italic;
    font-weight: 300;
}

/* ======== Gallery Grid Variants ======== */
.gallery-grid-narrow {
    max-width: 900px;
}

/* ======== Scroll Buttons ======== */
.scroll-btn {
    position: fixed;
    bottom: 35px;
    width: 50px;
    height: 50px;
    background: rgba(10, 10, 10, 0.85);
    border: 1px solid rgba(167, 145, 93, 0.4);
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999999;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(167, 145, 93, 0.1),
        inset 0 1px 0 rgba(167, 145, 93, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.scroll-btn-right {
    right: 25px;
}

.scroll-btn-left {
    left: 25px;
}

/* Das S-Logo im Button */
.scroll-btn .scroll-btn-logo {
    width: 22px;
    height: auto;
    opacity: 0.8;
    transition: opacity 0.3s ease, transform 0.3s ease;
    filter: brightness(1.1);
}

/* Fallback SVG Arrow */
.scroll-btn svg {
    width: 18px;
    height: 18px;
    stroke: #a7915d;
    opacity: 0.8;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.scroll-btn:hover {
    transform: translateY(-4px);
    border-color: rgba(167, 145, 93, 0.8);
    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(167, 145, 93, 0.25),
        inset 0 1px 0 rgba(167, 145, 93, 0.2);
}

.scroll-btn:hover .scroll-btn-logo,
.scroll-btn:hover svg {
    opacity: 1;
    transform: translateY(-2px);
}

.scroll-btn:active {
    transform: translateY(-2px) scale(0.97);
}

/* ======== Navigation Link Overrides ======== */
.nav-link-exklusiv {
    color: #f5f5f0 !important;
}

/* ======== Lenis Smooth Scroll ======== */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

/* ======== Safari Performance Fix ======== */
@supports (-webkit-touch-callout: none) {
    .erwin-wurm-bg-style,
    .essence-bg-style,
    .massschuhe-bg-style,
    .cta-bg,
    .instagram-bg,
    .reparatur-hero-bg,
    .reparatur-vorher-bg,
    .testimonials-bg {
        animation: sectionBgReveal 1.25s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards !important;
    }
}