/*
  Jennifer Schäfer – Hochzeitsfotografie
  Design: Swiss Editorial / Light / Premium
  ----------------------------------------
  Palette:
    --bg          #faf9f6   warm white
    --bg-alt      #f2ede5   warm cream
    --bg-card     #ffffff
    --text        #1c1916   near-black warm
    --text-muted  #6b6059
    --gold        #b8954a
    --border      rgba(28,25,22,0.10)
*/

/* ─── ZENTRALE EINSTELLUNGEN (Farben, Abstände, Schriften) ───── */
:root {
    --bg:           #ffffff;
    --bg-alt:       #fafafa;
    --bg-card:      #ffffff;
    --text:         #111111;
    --text-muted:   #5b5b5b;   /* Darker for WCAG AA on cream */
    --gold:         #b8954a;
    --gold-text:    #85672a;   /* Absolute AA compliant on white and cream */

    --gold-light:   #d4b06a;
    --gold-pale:    #f0e6ce;
    --gold-glow:    rgba(184, 149, 74, 0.45);
    --border:       rgba(17, 17, 17, 0.08);
    --border-hover: rgba(184, 149, 74, 0.80);


    --ff-display:   'Cormorant Garamond', Georgia, serif;
    --ff-body:      'Inter', system-ui, sans-serif;
    --ff-script:    'Pinyon Script', cursive;

    --fs-hero:      clamp(3.2rem, 8vw, 6.4rem);
    --fs-h2:        clamp(2rem, 4.5vw, 3.2rem);
    --fs-h3:        clamp(1.2rem, 2vw, 1.5rem);
    --fs-body:      1rem;
    --fs-small:     0.875rem;
    --fs-label:     0.75rem;

    --lh-tight:     1.1;
    --lh-snug:      1.35;
    --lh-normal:    1.6;
    --lh-loose:     1.85;

    --space-2xs:    0.25rem;
    --space-xs:     0.5rem;
    --space-sm:     0.75rem;
    --space-md:     1rem;
    --space-lg:     1.5rem;
    --space-xl:     2rem;
    --space-2xl:    3rem;
    --space-3xl:    5rem;
    --space-4xl:    8rem;
    --space-5xl:    12rem;

    --radius-sm:    4px;
    --radius-md:    8px;
    --radius-lg:    16px;
    --radius-xl:    32px;
    --radius-full:  9999px;

    --glass-bg:     rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.4);
    --glass-blur:   blur(12px);

    --nav-h:        72px;

    --shadow-sm:    0 1px 4px rgba(17,17,17,0.04);
    --shadow-md:    0 4px 20px rgba(17,17,17,0.06);
    --shadow-lg:    0 12px 48px rgba(17,17,17,0.08);
    --shadow-glow:  0 0 60px var(--gold-glow), 0 12px 40px rgba(17,17,17,0.08);

    --ease:         cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out:     cubic-bezier(0, 0, 0.2, 1);
    --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast:     0.25s;
    --dur-mid:      0.4s;
    --dur-slow:     0.7s;
}

/* ─── GRUNDREINIGUNG (Standard-Stile zurücksetzen) ──────────── */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    background: var(--bg);
    color: var(--text);
}

body {
    font-family: var(--ff-body);
    font-size: var(--fs-body);
    line-height: var(--lh-normal);
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--bg);
}

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

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; font: inherit; }

/* ─── BARRIEREFREIHEIT & TASTATUR-FOKUS ──────────────────────── */
:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 4px;
    border-radius: var(--radius-sm);
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--gold);
    color: white;
    padding: 1rem;
    z-index: 9999;
    transition: top 0.3s;
}

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


/* ─── TEXTGESTALTUNG & SCHRIFTEN ─────────────────────────────── */
h1, h2, h3, h4 {
    font-family: var(--ff-display);
    font-weight: 400;
    line-height: var(--lh-tight);
}

em { font-style: italic; }

.section-label {
    display: inline-block;
    font-family: var(--ff-body);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-text);  /* WCAG AA Compliant */
    margin-bottom: var(--space-md);
}


.section-headline {
    font-size: var(--fs-h2);
    color: var(--text);
    margin-bottom: var(--space-md);
    font-weight: 300;
}

.section-sub {
    font-size: var(--fs-small);
    letter-spacing: 0.10em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: var(--space-xl);
}

.body-text {
    font-size: var(--fs-body);
    line-height: var(--lh-loose);
    color: var(--text-muted);
    max-width: 52ch;
}

.body-text + .body-text { margin-top: var(--space-md); }
.mt-sm { margin-top: var(--space-sm); }

.text-gold { color: var(--gold); }

.logo-script {
    font-family: var(--ff-display);
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* ─── LAYOUT & STRUKTUR (Container, Abstände) ────────────────── */
.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 var(--space-xl);
}

.section {
    padding: var(--space-4xl) 0;
    background: var(--bg);
}

.section-cream {
    background: var(--bg-alt);
}

.section-white {
    background: var(--bg-card);
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4xl);
}

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

.reverse > :first-child { order: 1; }
.reverse > :last-child  { order: 0; }

.section-header {
    text-align: center;
    margin-bottom: var(--space-3xl);
}

/* ─── ABSCHNITTS-TRENNLINIE ──────────────────────────────────── */
.section-divider {
    width: 40px;
    height: 1px;
    background: var(--gold);
    margin: var(--space-xl) 0;
    opacity: 0.5;
}

/* ─── KOPFZEILE / NAVIGATION ─────────────────────────────────── */
#site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    height: var(--nav-h);
    transition:
        background  var(--dur-mid) var(--ease),
        box-shadow  var(--dur-mid) var(--ease);
}

/* transparent over hero for cinematic look */
#site-header.over-hero {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}


#site-header.scrolled {
    background: rgba(250, 249, 246, 0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 1px 0 var(--border);
}


.nav-container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 var(--space-xl);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
}

.nav-logo {
    display: flex;
    align-items: center;
    transition: transform var(--dur-fast) var(--ease);
}

.logo-img {
    height: 62px;
    width: auto;
    object-fit: contain;
}


.logo-white { display: none; }
.logo-black { display: block; }

/* In unscrolled state: Show White Logo, Hide Black Logo */
#site-header:not(.scrolled) .logo-white { display: block; }
#site-header:not(.scrolled) .logo-black { display: none; }

/* In scrolled state: Clear forced states */
#site-header.scrolled .logo-white { display: none !important; }
#site-header.scrolled .logo-img {
    height: 48px;
}


.nav-logo:hover { transform: translateY(-1px); }


.nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-2xl);
}

.nav-link {
    font-size: var(--fs-small);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text);
    position: relative;
    padding-bottom: 2px;
    transition: color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}

#site-header:not(.scrolled) .nav-link {
    color: #ffffff;
    opacity: 1;
}

#site-header.scrolled .nav-link {
    color: var(--text);
    opacity: 1;
}




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

.nav-link:hover,
.nav-link.is-active {
    color: var(--text);
}

#site-header.scrolled .nav-link:hover,
#site-header.scrolled .nav-link.is-active {
    color: var(--text);
}

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

.nav-cta {
    /* WCAG AA fix: --gold-text (#85672a) on white nav bg = 4.65:1 vs --gold (#b8954a) = 2.77:1 */
    color: var(--gold-text) !important;
    border: 1px solid rgba(184,149,74,0.45);
    padding: 0.45rem 1.4rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: all var(--dur-fast) var(--ease);
}

#site-header:not(.scrolled) .nav-cta {
    background: #ffffff; /* White button on transparent header */
    color: var(--text) !important;
    border-color: #ffffff;
}



.nav-cta::after { display: none; }


.nav-cta:hover {
    color: var(--bg) !important;
    background: var(--gold);
    border-color: var(--gold);
    box-shadow: 0 0 20px var(--gold-glow);
}

.nav-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    padding: 0;
}

.nav-burger span {
    display: block;
    height: 1px;
    background: var(--text);
    transition:
        transform  var(--dur-mid) var(--ease),
        opacity    var(--dur-mid) var(--ease),
        width      var(--dur-mid) var(--ease),
        background var(--dur-fast) var(--ease);
}

#site-header.scrolled .nav-burger span { background: var(--text); }
#site-header:not(.scrolled) .nav-burger span { background: #ffffff; }


.nav-burger span:last-child { width: 60%; }


.nav-burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
    width: 100%;
}

@media (max-width: 860px) {
    .logo-img { height: 42px; }
    #site-header.scrolled .logo-img { height: 36px; }
}



/* ─── HERO-BEREICH (Das Hauptbild ganz oben) ─────────────────── */
#hero, #hero-service, .hero-small, .hero-bento {
    position: relative;
    height: 100vh;
    min-height: 600px;
    display: flex;
    background: var(--bg);
}


/* ─── SWISS EDITORIAL HERO (Premium Minimal) ────────────────── */
.hero-editorial {
    min-height: 90vh;
    background: var(--bg-alt);
    display: flex;
    align-items: center;
    padding: calc(var(--nav-h) + var(--space-xl)) 0 var(--space-4xl);
    overflow: hidden;
}

.hero-editorial-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    align-items: center;
    gap: var(--space-4xl);
}

.editorial-info {
    max-width: 440px;
    padding-left: var(--space-xl);
}

.editorial-info .section-label {
    margin-bottom: var(--space-xl);
    position: relative;
    padding-left: 1.5rem;
}

.editorial-info .section-label::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 0.8rem; height: 1px;
    background: var(--gold);
}

.hero-headline--editorial {
    font-size: clamp(3rem, 7vw, 5.2rem);
    line-height: 1.0;
    color: var(--text);
    margin-bottom: var(--space-2xl);
    font-weight: 300;
}

.hero-subheadline--editorial {
    font-size: var(--fs-body);
    line-height: var(--lh-loose);
    color: var(--text-muted);
    max-width: 32ch;
}

.editorial-visual {
    position: relative;
    height: 75vh;
    min-height: 500px;
}

.editorial-frame {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
    position: relative;
}

.editorial-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
}

/* Floating detail element (Premium Touch) */
.editorial-visual::after {
    content: '';
    position: absolute;
    bottom: -30px; left: -30px;
    width: 140px; height: 140px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    z-index: -1;
}

@media (max-width: 1024px) {
    .editorial-info { padding-left: 0; text-align: center; max-width: 100%; }
    .hero-editorial-grid { grid-template-columns: 1fr; gap: var(--space-3xl); }
    .editorial-visual { height: 50vh; }
    .hero-subheadline--editorial { margin: 0 auto; }
}

@media (max-width: 600px) {
    .hero-headline--editorial { font-size: 2.6rem; }
    .editorial-visual { height: 40vh; }
}

/* Unified 100vh vision across all page heroes */




.hero-media {
    position: absolute;
    inset: 0;
}

.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    will-change: transform;
}

.hero-vignette {
    position: absolute;
    inset: 0;
    background:
        /* Strong bottom white gradient for text grounding */
        linear-gradient(to top,    #ffffff 0%, rgba(255,255,255,0.9) 15%, rgba(255,255,255,0) 50%),
        /* Left-side white scim to protect the headline */
        linear-gradient(to right,  rgba(255,255,255,0.6) 0%, transparent 45%),
        /* Top dark scrim for navigation clarity */
        linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,  transparent 35%);
    z-index: 2;
}

/* Specific refined vignette for service pages with high-positioned subjects */
#hero-service .hero-vignette {
    background:
        linear-gradient(to top,    #ffffff 0%, rgba(255,255,255,0.4) 6%, transparent 20%),
        linear-gradient(to right,  rgba(255,255,255,0.35) 0%, transparent 40%),
        linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,  transparent 35%);
}

#hero-service .hero-headline,
#hero-service .script-font {
    text-shadow: 0 0 32px rgba(255,255,255,0.85); /* Readability halo on clearer backgrounds */
}

.hero-vignette.dark {
    background:
        linear-gradient(to top,    #ffffff 0%, rgba(255,255,255,0.8) 25%,  transparent 60%),
        linear-gradient(to right,  rgba(255,255,255,0.4) 0%, transparent 50%),
        linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,  transparent 45%);
}





@media (max-width: 860px) {
    .hero-vignette {
        background:
            linear-gradient(to top,    rgba(255,255,255,1) 0%,  rgba(255,255,255,0.2) 15%,  transparent 40%),
            linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,  transparent 25%);
    }
    .hero-eyebrow { color: var(--text); }
}








.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 var(--space-xl) var(--space-4xl);
}

.hero-eyebrow {
    font-size: var(--fs-label);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #ffffff;

    margin-bottom: var(--space-lg);
    font-weight: 500;
}


.hero-headline {
    font-size: clamp(2.8rem, 7vw, 5.2rem);
    font-weight: 300;
    line-height: 1.1; /* Increased from 0.95 to prevent overlap with script font and line breaks */
    color: var(--text);
    margin-bottom: var(--space-xl);
}

.script-font {
    display: block;
    font-family: var(--ff-script);
    font-style: normal;
    font-size: 1.15em;
    color: var(--gold);
    margin-top: 0.05em; /* Increased from -0.1em to prevent upward overlap */
    font-weight: 400;
}

.editorial-tag {
    display: inline-block;
    font-family: var(--ff-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold-text);
    border: 1px solid var(--border);
    padding: 0.4rem 1rem;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-xl);
}

.glass-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-md);
}

.card-hover-float {
    transition: transform var(--dur-slow) var(--ease-spring), box-shadow var(--dur-slow) var(--ease);
}

.card-hover-float:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: var(--shadow-glow);
}




.hero-divider {
    width: 56px;
    height: 1px;
    background: var(--gold);
    margin-top: var(--space-xl);
    opacity: 0.55;
}

.hero-scroll-hint {
    position: absolute;
    bottom: var(--space-xl);
    right: var(--space-xl);
    z-index: 2;
    height: 60px;
    display: flex;
    align-items: flex-end;
}

.scroll-line {
    display: block;
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, transparent, var(--gold));
    animation: scroll-pulse 2.4s ease-in-out infinite;
}

@keyframes scroll-pulse {
    0%   { transform: scaleY(0); transform-origin: top;    opacity: 0; }
    40%  { transform: scaleY(1); transform-origin: top;    opacity: 1; }
    60%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
    100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ─── HINTERGRUNDBILDER ALS ABSCHNITTS-TRENNER ───────────────── */
.section-bg-divider {
    position: relative;
    height: 55vh;
    min-height: 340px;
    max-height: 600px;
    overflow: hidden;
}

.section-bg-divider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    will-change: transform;
}


/* soft edges top & bottom */
.section-bg-divider::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 120px;
    background: linear-gradient(to bottom, var(--bg) 0%, transparent 100%);
    z-index: 2;
}

.section-bg-divider::after {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        linear-gradient(to top, var(--bg) 0%, transparent 150px),
        rgba(12, 10, 8, 0.08); /* slight dark scrim */
    pointer-events: none;
    z-index: 2;
}


/* ─── INTRO ──────────────────────────────────────────────────── */
#intro .intro-text {
    padding-right: var(--space-lg);
}

#intro .intro-text .btn {
    margin-top: var(--space-xl);
}

.image-frame {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
    transition:
        box-shadow   var(--dur-slow) var(--ease),
        border-color var(--dur-slow) var(--ease),
        transform    var(--dur-slow) var(--ease-out);
}

.image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 3/4;
    transition: transform var(--dur-slow) var(--ease);
}

.image-frame:hover {
    box-shadow: var(--shadow-glow);
    border-color: var(--border-hover);
    transform: translateY(-8px);
}

.image-frame:hover img {
    transform: scale(1.04);
}

.tilted {
    transform: rotate(2.5deg);
    transform-origin: center bottom;
}

.tilted:hover {
    transform: rotate(0deg) translateY(-8px);
}

/* ─── ABOUT ME PORTRAIT ──────────────────────────────────────── */
.about-portrait {
    display: flex;
    justify-content: center;
    align-items: center;
}

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

.portrait-ring {
    position: absolute;
    inset: -20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    pointer-events: none;
    transition:
        border-color var(--dur-slow) var(--ease),
        box-shadow   var(--dur-slow) var(--ease);
}

.portrait-wrapper:hover .portrait-ring {
    border-color: var(--border-hover);
    box-shadow: 0 0 40px var(--gold-glow);
}

.portrait-img {
    width: clamp(220px, 28vw, 340px);
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-full);
    border: 6px solid var(--bg-card);
    box-shadow: var(--shadow-lg);
    filter: grayscale(15%);
    transition:
        filter     var(--dur-slow) var(--ease),
        box-shadow var(--dur-slow) var(--ease);
}

.portrait-wrapper:hover .portrait-img {
    filter: grayscale(0%);
    box-shadow: var(--shadow-glow);
}

/* ─── TESTIMONIAL ────────────────────────────────────────────── */
.section-testimonial {
    background: var(--bg-alt);
    position: relative;
    overflow: hidden;
}

.section-testimonial::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 55% 70% at 50% 50%, rgba(184,149,74,0.07) 0%, transparent 70%);
    pointer-events: none;
}

.testimonial-inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    padding: var(--space-xl) 0;
}

.quote-mark {
    font-family: var(--ff-display);
    font-size: 7rem;
    line-height: 0.5;
    color: var(--gold);
    opacity: 0.28;
    margin-bottom: var(--space-lg);
    display: block;
    user-select: none;
}

.quote-text {
    font-family: var(--ff-display);
    font-size: clamp(1.2rem, 2.5vw, 1.75rem);
    font-style: italic;
    font-weight: 300;
    line-height: 1.65;
    color: var(--text);
    margin-bottom: var(--space-xl);
}

.quote-author {
    font-size: var(--fs-small);
    letter-spacing: 0.15em;
    /* WCAG AA fix: --gold-text (#85672a) on --bg-alt (#fafafa) = 4.65:1 */
    color: var(--gold-text);
    font-style: normal;
    text-transform: uppercase;
    font-weight: 500;
}

/* ─── PORTFOLIO ──────────────────────────────────────────────── */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    align-items: start;
}

.portfolio-card { position: relative; }

.portfolio-card--tall { margin-top: calc(-1 * var(--space-2xl)); }

.portfolio-link {
    display: block;
    color: inherit;
}

.portfolio-img-wrap {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    aspect-ratio: 3/4;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    transition:
        border-color var(--dur-slow) var(--ease),
        box-shadow   var(--dur-slow) var(--ease),
        transform    var(--dur-slow) var(--ease-spring);
}

.portfolio-card--tall .portfolio-img-wrap { aspect-ratio: 2/3; }

.portfolio-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease);
}

.portfolio-overlay {
    position: absolute;
    inset: 0;
    background: rgba(20,18,14,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--dur-mid) var(--ease);
}

.portfolio-overlay span {
    font-size: var(--fs-label);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #f8f4ee;
    border: 1px solid rgba(248,244,238,0.55);
    padding: 0.6rem 1.4rem;
    border-radius: var(--radius-sm);
    transition:
        border-color var(--dur-fast) var(--ease),
        color        var(--dur-fast) var(--ease);
}

.portfolio-link:hover .portfolio-img-wrap {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-glow);
    transform: translateY(-8px) scale(1.02);
}

.portfolio-link:hover .portfolio-img-wrap img { transform: scale(1.08); }
.portfolio-link:hover .portfolio-overlay       { opacity: 1; }

.portfolio-link:hover .portfolio-overlay span {
    border-color: var(--gold);
    color: var(--gold);
}

.portfolio-caption {
    padding: var(--space-md) var(--space-xs) 0;
    text-align: center;
}

.portfolio-caption h3 {
    font-size: var(--fs-h3);
    font-weight: 400;
    color: var(--text);
    margin-bottom: var(--space-xs);
}

.caption-line {
    width: 24px;
    height: 1px;
    background: var(--gold);
    margin: var(--space-xs) auto;
    opacity: 0.45;
    transition:
        width   var(--dur-mid) var(--ease),
        opacity var(--dur-mid) var(--ease);
}

.portfolio-link:hover .caption-line { width: 48px; opacity: 1; }

.portfolio-caption p {
    font-size: var(--fs-small);
    color: var(--text-muted);
    letter-spacing: 0.06em;
}

/* ─── CTA / BENTO ────────────────────────────────────────────── */
.cta-sub-italic {
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--fs-small);
    color: var(--text-muted);
}

.bento-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--space-sm);
    height: 480px;
}


.bento-cell {
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--bg-alt);

    border: 1px solid var(--border);
    transition:
        border-color var(--dur-slow) var(--ease),
        box-shadow   var(--dur-slow) var(--ease),
        transform    var(--dur-slow) var(--ease-spring);
}

.bento-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease);
}

.bento-cell:hover {
    border-color: var(--gold);
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
    transform: translateY(-8px) scale(1.01);
}


.bento-cell:hover img { transform: scale(1.08); }

.bento-1 { grid-column: 1; grid-row: 1 / 3; }
.bento-1 img { object-position: center bottom; }

.bento-2 { grid-column: 2; grid-row: 1; transform: translateY(-15px); }
.bento-3 { grid-column: 3; grid-row: 1; transform: translateY(15px); }
.bento-4 { grid-column: 2; grid-row: 2; transform: translateY(-15px); }
.bento-5 { 
    grid-column: 3; 
    grid-row: 2; 
    transform: translateY(15px);
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
}

.bento-5 img {
    width: 80% !important;
    height: auto !important;
    object-fit: contain !important;
}



/* ─── BUTTONS ────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-family: var(--ff-body);
    font-size: var(--fs-small);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.875rem 1.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition:
        color        var(--dur-fast) var(--ease),
        background   var(--dur-fast) var(--ease),
        border-color var(--dur-fast) var(--ease),
        box-shadow   var(--dur-mid)  var(--ease),
        transform    var(--dur-fast) var(--ease-spring);
}

.btn:active { transform: scale(0.98); }

.btn-primary {
    background: var(--text);
    color: var(--bg);
    border-color: var(--text);
}

.btn-primary:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--bg);
    box-shadow: var(--shadow-glow);
    transform: translateY(-4px) scale(1.03);
}

.btn-ghost {
    background: transparent;
    color: var(--text-muted);
    border-color: var(--border);
}

.btn-ghost-dark {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-ghost-dark:hover {
    color: var(--gold-text);
    border-color: var(--gold);
    background: rgba(184,149,74,0.05);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.btn-ghost:hover {
    color: var(--text);
    border-color: var(--gold);
    box-shadow: 0 0 16px var(--gold-glow);
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
}

.btn svg {
    flex-shrink: 0;
    transition: transform var(--dur-fast) var(--ease-spring);
}

.btn:hover svg { transform: translateX(3px); }

/* ═══════════════════════════════════════════════════════════════
   INSTAGRAM SHOWCASE SECTION  — Light / Warm Cream
   Contrasts clearly with the dark CTA above and dark footer below
   ═══════════════════════════════════════════════════════════════ */
.ig-showcase {
    position: relative;
    overflow: hidden;
    background: #f5efe3;           /* warm cream — breaks the dark–dark–dark run */
    padding: var(--space-5xl) 0;
    isolation: isolate;
}

/* Soft ambient glow orbs (subtle on light bg) */
.ig-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(90px);
}
.ig-glow--center {
    width: 640px;
    height: 380px;
    background: radial-gradient(ellipse, rgba(184,149,74,0.18) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: ig-pulse 7s ease-in-out infinite;
}
.ig-glow--left {
    width: 280px;
    height: 280px;
    background: radial-gradient(ellipse, rgba(184,149,74,0.10) 0%, transparent 70%);
    top: 10%;
    left: -80px;
    animation: ig-pulse-abs 9s ease-in-out infinite 1s;
}
.ig-glow--right {
    width: 240px;
    height: 240px;
    background: radial-gradient(ellipse, rgba(200,160,80,0.10) 0%, transparent 70%);
    bottom: 5%;
    right: -60px;
    animation: ig-pulse-abs 8s ease-in-out infinite 2s;
}

@keyframes ig-pulse {
    0%, 100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
    50%       { opacity: 1;   transform: translate(-50%, -50%) scale(1.12); }
}
@keyframes ig-pulse-abs {
    0%, 100% { opacity: 0.6; }
    50%       { opacity: 1; }
}

/* Giant decorative "@" — dark-tinted on cream */
.ig-deco-at {
    position: absolute;
    font-family: var(--ff-display);
    font-size: clamp(16rem, 35vw, 28rem);
    font-weight: 300;
    font-style: italic;
    color: rgba(100, 72, 20, 0.055);
    line-height: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    user-select: none;
    letter-spacing: -0.05em;
    white-space: nowrap;
}

/* Content */
.ig-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-xl);
}

/* Eyebrow — WCAG AA: --gold-text (#85672a) on #f5efe3 = 4.8:1 */
.ig-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    font-family: var(--ff-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold-text);
}
.ig-eyebrow-line {
    display: block;
    width: 32px;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--gold-text));
    opacity: 0.6;
}
.ig-eyebrow-line:last-child {
    background: linear-gradient(to left, transparent, var(--gold-text));
}

/* Headline — dark text on cream */
.ig-headline {
    font-family: var(--ff-display);
    font-size: clamp(2.6rem, 6vw, 5rem);
    font-weight: 300;
    line-height: 1.1;
    color: var(--text);
    margin: 0;
}

/* "Instagram" — gold gradient (works on both dark and light) */
.ig-wordmark {
    display: block;
    font-style: italic;
    font-size: 1.2em;
    background: linear-gradient(
        120deg,
        #7a5218 0%,
        var(--gold) 40%,
        var(--gold-light) 65%,
        #9a6820 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 12px rgba(184,149,74,0.25));
}

/* Description — WCAG AA: var(--text-muted) #5b5b5b on #f5efe3 = 5.0:1 */
.ig-desc {
    font-family: var(--ff-body);
    font-size: var(--fs-body);
    line-height: var(--lh-loose);
    color: var(--text-muted);
    max-width: 46ch;
    margin: 0;
}

/* ── Animated rotating-border button ───────────────────────── */
.ig-btn-ring {
    position: relative;
    display: inline-flex;
    margin-top: var(--space-md);
}

/* Inner button — light fill on cream bg */
.ig-btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.7em;
    padding: 0.9rem 2.4rem;
    border-radius: 9999px;
    background: #faf6ef;           /* slightly warmer than cream bg */
    color: var(--text);            /* WCAG AA: #111 on #faf6ef = 16:1 */
    font-family: var(--ff-body);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-decoration: none;
    text-transform: uppercase;
    transition:
        background  var(--dur-mid) var(--ease),
        box-shadow  var(--dur-mid) var(--ease),
        transform   var(--dur-fast) var(--ease-spring);
    white-space: nowrap;
}
.ig-btn:hover {
    background: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(184,149,74,0.25), 0 2px 8px rgba(0,0,0,0.08);
}
.ig-btn svg {
    flex-shrink: 0;
    color: var(--gold);
    transition: transform var(--dur-fast) var(--ease-spring);
}
.ig-btn:hover svg {
    transform: scale(1.2) rotate(-10deg);
}

/* Responsive */
@media (max-width: 600px) {
    .ig-showcase { padding: var(--space-3xl) 0; }
    .ig-deco-at  { font-size: 50vw; }
    .ig-btn      { font-size: 0.75rem; padding: 0.8rem 1.6rem; }
}


/* ─── FOOTER ─────────────────────────────────────────────────── */
#site-footer {
    border-top: 1px solid rgba(255,255,255,0.05);
    background: #1c1a18; /* Premium Midnight Swiss */
    color: #ffffff;
    padding: var(--space-4xl) 0 0;
    margin-top: 0;
}

/* .footer-instagram / .insta-glass-card / .btn-insta removed —
   replaced by the new .ig-showcase section above the footer */


.footer-main {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: var(--space-4xl);
    margin-bottom: var(--space-3xl);
    padding-bottom: var(--space-3xl);
}

.footer-brand p {
    font-size: var(--fs-small);
    color: rgba(255,255,255,0.75);
    line-height: 1.8;
    margin-top: var(--space-md);
    max-width: 280px;
}

.footer-logo {
    height: 44px;
    width: auto;
    margin-bottom: var(--space-sm);
}

.footer-nav-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
}

.footer-col h4,
.footer-col .footer-col-heading {
    font-size: var(--fs-label);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #ffffff;
    margin-bottom: var(--space-lg);
    font-weight: 600;
}

.footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.footer-link {
    font-size: var(--fs-small);
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease);
}

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

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: var(--space-xl) var(--space-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-lg);
}

.footer-legal {
    display: flex;
    gap: var(--space-xl);
    flex-wrap: wrap;
}

.footer-copy {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.75);
}


@media (max-width: 860px) {
    .footer-main { grid-template-columns: 1fr; gap: var(--space-3xl); }
    .insta-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-bottom { flex-direction: column; text-align: center; }
    .footer-nav-grid { gap: var(--space-2xl); }
}

/* duplicate footer rules removed — canonical definitions above */


/* ─── COOKIE BANNER ──────────────────────────────────────────── */
.cookie-banner {
    position: fixed;
    bottom: var(--space-lg);
    right: var(--space-lg);
    z-index: 950;
    max-width: 380px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-lg);
    animation: slide-up 0.4s var(--ease-out) both;
}

.cookie-banner[hidden] { display: none; }

@keyframes slide-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cookie-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.cookie-text {
    font-size: var(--fs-small);
    color: var(--text-muted);
    line-height: var(--lh-normal);
}

.cookie-text a {
    color: var(--gold);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--dur-fast);
}

.cookie-text a:hover { color: var(--text); }

.cookie-actions {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

/* ─── SCROLL REVEAL ──────────────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity   var(--dur-slow) var(--ease-out),
        transform var(--dur-slow) var(--ease-out);
}

.reveal.delay-1 { transition-delay: 0.12s; }
.reveal.delay-2 { transition-delay: 0.24s; }
.reveal.delay-3 { transition-delay: 0.36s; }

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

.portfolio-card.reveal.is-visible {
    transition-delay: calc(var(--delay, 0) * 0.15s);
}

/* ─── FOCUS ──────────────────────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 4px;
    border-radius: var(--radius-sm);
}

/* ─── PREMIUM SWISS & GLOW UTILITIES ─────────────────────────── */
.glass-card {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-lg);
    transition:
        box-shadow var(--dur-slow) var(--ease),
        border-color var(--dur-slow) var(--ease),
        transform var(--dur-slow) var(--ease-spring);
}

.glass-card:hover {
    box-shadow: var(--shadow-glow);
    border-color: var(--border-hover);
    transform: translateY(-8px);
}

.hover-glow {
    transition:
        transform var(--dur-slow) var(--ease-spring),
        box-shadow var(--dur-slow) var(--ease),
        filter var(--dur-slow) var(--ease);
}

.hover-glow:hover {
    transform: scale(1.05) translateY(-4px);
    box-shadow: 0 12px 40px var(--gold-glow);
    z-index: 10;
}

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
    :root { --space-3xl: 4rem; --space-4xl: 6rem; }
}

@media (max-width: 860px) {
    .nav-links {
        position: fixed;
        inset: var(--nav-h) 0 0;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: var(--space-2xl);
        background: rgba(250,249,246,0.97);
        backdrop-filter: blur(20px);
        transform: translateX(100%);
        transition: transform var(--dur-mid) var(--ease);
        z-index: 850;
    }

    .nav-links.is-open { transform: none; }

    .nav-link {
        font-size: 1.1rem;
        letter-spacing: 0.12em;
        color: var(--text-muted) !important;
    }

    .nav-link:hover, .nav-link.is-active { color: var(--text) !important; }

    .nav-cta { padding: 0.75rem 2rem; }

    .nav-burger { display: flex; }

    .grid-2 { grid-template-columns: 1fr; gap: var(--space-3xl); }

    /* On Mobile: Make sure reverse sections show text first if applicable */
    .reverse { display: flex; flex-direction: column; }
    .reverse > :first-child { order: 2; } /* Portrait/Image second */
    .reverse > :last-child  { order: 1; } /* Text first */

    #intro .intro-text { padding-right: 0; }


    .portfolio-grid { grid-template-columns: 1fr 1fr; }
    .portfolio-card--tall { margin-top: 0; }
    .portfolio-card:last-child { grid-column: span 2; }

    .bento-grid { height: 280px; }

    .section-bg-divider { display: none; }


}

@media (max-width: 600px) {
    :root { --space-4xl: 4rem; --space-3xl: 3rem; }

    .container { padding: 0 var(--space-lg); }

    .hero-content { padding: 0 var(--space-lg) var(--space-3xl); }

    .portfolio-grid { grid-template-columns: 1fr; }
    .portfolio-card:last-child { grid-column: 1; }
    .portfolio-card--tall { margin-top: 0; }

    .bento-grid {
        grid-template-columns: 1fr 1fr;
        height: 260px;
    }

    .cookie-banner {
        left: var(--space-md);
        right: var(--space-md);
        max-width: none;
        bottom: var(--space-md);
    }

    .footer-nav { gap: var(--space-lg); }

    .section-bg-divider { display: none; }
}


/* ─── PRICING CARDS ─────────────────────────────────────────── */
.pricing-card {
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    max-width: 440px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.04);
}

.pricing-header {
    margin-bottom: var(--space-lg);
    border-bottom: 1px solid var(--border);
    padding-bottom: var(--space-md);
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.price {
    font-size: 2.25rem;
    font-family: var(--ff-display);
    font-weight: 400;
    color: var(--text);
}

.price-info {
    font-size: var(--fs-small);
    color: var(--text-muted);
}

.pricing-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);
}

.pricing-list li {
    display: flex;
    align-items: start;
    gap: 0.75rem;
    font-size: var(--fs-small);
    color: var(--text-muted);
    line-height: 1.45;
}

.pricing-list li svg {
    flex-shrink: 0;
    color: var(--gold);
    margin-top: 2px;
}

/* ─── UTILITIES ──────────────────────────────────────────────── */
.btn-block { width: 100%; justify-content: center; }
.max-w-700 { max-width: 700px; }
.mx-auto   { margin-left: auto; margin-right: auto; }
.mt-sm   { margin-top: var(--space-sm); }
.mt-lg   { margin-top: var(--space-lg); }

@media (max-width: 600px) {
    .hero-small { height: 60vh; }
    .pricing-card { max-width: none; padding: var(--space-lg); }
    .price { font-size: 1.85rem; }
}


/* ═══════════════════════════════════════════════════════════════
   SERVICE / LEISTUNGEN PAGE COMPONENTS
   ═══════════════════════════════════════════════════════════════ */

/* ─── Service intro block (centered) ────────────────────────── */
.svc-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}
.svc-intro-headline {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.15;
}

/* ─── glow-frame on dark bg: keep its own border colour ─────── */
.glow-frame--dark {
    border-color: rgba(255,255,255,0.06);
}
.glow-frame--dark .glow-frame-img {
    filter: brightness(0.9) contrast(1.04);
}

/* ─── SERVICE PRICE BLOCK ────────────────────────────────────── */
/*
   Default variant: used on light/cream sections.
   Header = near-black, body = white, features = muted dark.
   Creates a bold price card that stands out on cream backgrounds.
*/
.svc-price-block {
    margin-top: var(--space-2xl);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(17,17,17,0.10), 0 2px 8px rgba(17,17,17,0.06);
    border: 1px solid rgba(17,17,17,0.08);
}

.svc-price-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-xl);
    background: #111111;
}
.svc-price-amount {
    display: flex;
    align-items: baseline;
    gap: 0.2em;
}
.svc-price-value {
    font-family: var(--ff-display);
    font-size: 2.4rem;
    font-weight: 300;
    color: #ffffff;
    line-height: 1;
}
.svc-price-currency {
    font-family: var(--ff-display);
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--gold-light);
}
.svc-price-unit {
    font-family: var(--ff-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
}

.svc-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #ffffff;
    padding: var(--space-lg) var(--space-xl);
    border-bottom: 1px solid rgba(17,17,17,0.07);
}
.svc-feature {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    font-family: var(--ff-body);
    font-size: var(--fs-small);
    /* WCAG AA: var(--text-muted) #5b5b5b on white = 7:1 */
    color: var(--text-muted);
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(17,17,17,0.05);
}
.svc-feature:last-child { border-bottom: none; }
.svc-feature-icon {
    flex-shrink: 0;
    color: var(--gold);
}

.svc-price-cta {
    padding: var(--space-lg) var(--space-xl);
    background: #ffffff;
}

/* ─── Dark variant: light card on dark section bg ────────────── */
.svc-price-block--dark {
    border-color: rgba(255,255,255,0.08);
    box-shadow: 0 8px 40px rgba(0,0,0,0.4), 0 0 60px rgba(184,149,74,0.08);
}
.svc-price-block--dark .svc-price-header {
    background: rgba(184,149,74,0.12);
    border-bottom: 1px solid rgba(184,149,74,0.2);
}
.svc-price-block--dark .svc-price-value {
    color: #f0ede7;
}
.svc-price-block--dark .svc-price-unit {
    color: rgba(240,237,231,0.4);
}
.svc-price-block--dark .svc-features {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.06);
}
.svc-price-block--dark .svc-feature {
    /* WCAG AA: rgba(240,237,231,0.72) on #080808 ≈ 5.4:1 */
    color: rgba(240,237,231,0.72);
    border-color: rgba(255,255,255,0.06);
}
.svc-price-block--dark .svc-price-cta {
    background: rgba(255,255,255,0.04);
}

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
    .svc-price-block { margin-top: var(--space-xl); }
}
@media (max-width: 600px) {
    .svc-price-value  { font-size: 2rem; }
    .svc-price-block  { margin-top: var(--space-lg); }
}


/* ═══════════════════════════════════════════════════════════════
   INDEX — PREMIUM REDESIGN
   Swiss Editorial · Dark Sections · Glow & Hover FX
   ═══════════════════════════════════════════════════════════════ */

/* ─── HERO: CINEMATIC DARK VIGNETTE ─────────────────────────── */
.hero-vignette--cinematic {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top,    rgba(0,0,0,0.90) 0%, rgba(0,0,0,0.45) 35%, transparent 65%),
        linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, transparent 30%),
        linear-gradient(to right,  rgba(0,0,0,0.25) 0%, transparent 50%);
    z-index: 2;
}

/* ─── HERO: STAGED CONTENT (Centered / Bottom-Stage) ────────── */
.hero-content--stage {
    position: relative;
    z-index: 3;
    height: 100%;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
    padding: 0 var(--space-xl) var(--space-4xl);
}

/* Hero Badge — thin line + label + thin line */
.hero-badge {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}
.hero-badge-line {
    display: block;
    width: 36px;
    height: 1px;
    background: var(--gold);
    opacity: 0.7;
}
.hero-badge-text {
    font-family: var(--ff-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    /* WCAG AA: Weiß auf dunklem Overlay ≥ 12:1 — garantiert auf JEDEM Hero-Bild */
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 12px rgba(0,0,0,0.7);
}

/* Hero Headline override for white-on-dark */
.hero-headline--white {
    color: #ffffff;
    text-shadow: 0 4px 40px rgba(0,0,0,0.4);
    margin-bottom: var(--space-lg);
}

/* Gold script with subtle glow */
.script-font--glow {
    color: var(--gold-light);
    text-shadow: 0 0 80px rgba(212,176,106,0.55), 0 0 20px rgba(212,176,106,0.3);
}

/* Hero sub-eyebrow — WCAG AA: ≥4.5:1 on dark hero overlay */
.hero-sub {
    font-family: var(--ff-body);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.88);   /* ~#e0e0e0 → 9:1+ on dark overlay */
    margin-bottom: var(--space-2xl);
}

/* Hero CTA row */
.hero-cta-row {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
    justify-content: center;
}

/* ─── BUTTON: Ghost White (for dark hero) ────────────────────── */
.btn-ghost-white {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.85rem 2.2rem;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255,255,255,0.38);
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: rgba(255,255,255,0.9);
    font-family: var(--ff-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    transition:
        background   var(--dur-mid) var(--ease),
        border-color var(--dur-mid) var(--ease),
        transform    var(--dur-fast) var(--ease-spring),
        box-shadow   var(--dur-mid) var(--ease);
}
.btn-ghost-white:hover {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.75);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

/* ─── BUTTON: Radiant Gold (the hero CTA / main action) ─────── */
.btn-radiant {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.85rem 2.2rem;
    border-radius: var(--radius-full);
    background: var(--gold);
    color: #fff;
    font-family: var(--ff-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid var(--gold);
    position: relative;
    overflow: hidden;
    transition:
        transform    var(--dur-fast) var(--ease-spring),
        box-shadow   var(--dur-mid)  var(--ease),
        background   var(--dur-fast) var(--ease);
}
.btn-radiant::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.25) 0%, transparent 70%);
    opacity: 0;
    transition: opacity var(--dur-mid) var(--ease);
    pointer-events: none;
}
.btn-radiant:hover {
    background: #c9a454;
    box-shadow:
        0 0 0 4px rgba(184,149,74,0.22),
        0 0 35px rgba(184,149,74,0.5),
        0 8px 24px rgba(0,0,0,0.25);
    transform: translateY(-3px) scale(1.02);
}
.btn-radiant:hover::after { opacity: 1; }
.btn-radiant:active       { transform: scale(0.98); }

.btn-radiant--lg {
    padding: 1.1rem 3rem;
    font-size: 0.85rem;
}

/* ─── BTN ARROW ─────────────────────────────────────────────── */
.btn-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
}
.btn-arrow svg { transition: transform var(--dur-fast) var(--ease-spring); }
.btn-arrow:hover svg { transform: translateX(4px); }

/* ─── STATS STRIP ────────────────────────────────────────────── */
.stats-strip {
    background: #080808;
    border-top:    1px solid rgba(184,149,74,0.18);
    border-bottom: 1px solid rgba(184,149,74,0.18);
    padding: var(--space-xl) 0;
    position: relative;
    z-index: 1;
}
.stats-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4xl);
}
.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    text-align: center;
}
.stat-number {
    font-family: var(--ff-display);
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 300;
    color: #f0ede7;
    letter-spacing: 0.02em;
    line-height: 1;
}
.stat-label {
    font-family: var(--ff-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold);
}
.stat-sep {
    display: block;
    width: 1px;
    height: 44px;
    background: linear-gradient(to bottom, transparent, rgba(184,149,74,0.35), transparent);
}

/* ─── SECTION LIGHT (was section-white) ─────────────────────── */
.section-light {
    background: var(--bg-card);
    padding: var(--space-4xl) 0;
}

/* ─── SECTION CREAM (for About Me alternation) ──────────────── */
.section-cream {
    background: var(--bg-alt);    /* #fafafa */
    padding: var(--space-4xl) 0;
}

/* ─── SWISS SPLIT LAYOUT ─────────────────────────────────────── */
.swiss-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4xl);
    align-items: center;
}
.swiss-text {
    padding-right: var(--space-2xl);
}

/* Mirrored variant: image left, text right */
.swiss-split--reverse .swiss-text {
    padding-right: 0;
    padding-left: var(--space-2xl);
}
.swiss-split--reverse .swiss-visual { order: -1; }

/* ─── GLOW FRAME (image container with hover glow) ──────────── */
.glow-frame {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    aspect-ratio: 4/5;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    transition:
        transform    var(--dur-slow) var(--ease-spring),
        box-shadow   var(--dur-slow) var(--ease),
        border-color var(--dur-slow) var(--ease);
}
.glow-frame-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease);
    display: block;
}
.glow-frame-border {
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    border: 1px solid var(--gold);
    box-shadow: inset 0 0 30px rgba(184,149,74,0.15);
    transition: opacity var(--dur-slow) var(--ease);
}
.glow-frame:hover {
    transform: translateY(-10px);
    box-shadow:
        0 0 0 1px rgba(184,149,74,0.35),
        0 0 60px rgba(184,149,74,0.3),
        0 24px 64px rgba(0,0,0,0.12);
    border-color: rgba(184,149,74,0.4);
}
.glow-frame:hover .glow-frame-img  { transform: scale(1.04); }
.glow-frame:hover .glow-frame-border { opacity: 1; }

/* ─── SECTION DARK ───────────────────────────────────────────── */
.section-dark {
    background: #080808;
    padding: var(--space-4xl) 0;
    position: relative;
}
.section-dark::before,
.section-dark::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(184,149,74,0.3), transparent);
    pointer-events: none;
}
.section-dark::before { top: 0; }
.section-dark::after  { bottom: 0; }

.section-label--gold {
    color: var(--gold) !important;
}
.section-headline--light {
    color: #f0ede7 !important;
}
.section-divider--gold-dim {
    background: var(--gold);
    opacity: 0.35;
    width: 40px;
}

.dark-section-header {
    text-align: center;
    margin-bottom: var(--space-4xl);
}

/* ─── PORTFOLIO ASYMMETRIC GRID ──────────────────────────────── */
.pa-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr 1fr;
    gap: var(--space-xl);
    align-items: start;
}

.pa-card--offset-down { margin-top: var(--space-3xl); }
.pa-card--offset-up   { margin-top: var(--space-xl); }

.pa-img-wrap {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    aspect-ratio: 3/4;
    background: #141414;
    border: 1px solid rgba(255,255,255,0.05);
    transition:
        transform    var(--dur-slow) var(--ease-spring),
        box-shadow   var(--dur-slow) var(--ease),
        border-color var(--dur-slow) var(--ease);
}
.pa-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.88) contrast(1.05) saturate(0.9);
    transition:
        transform var(--dur-slow) var(--ease),
        filter    var(--dur-slow) var(--ease);
}

/* Full overlay gradient, revealed on hover */
.pa-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.82) 0%,
        rgba(0,0,0,0.25) 45%,
        transparent 75%
    );
    display: flex;
    align-items: flex-end;
    padding: var(--space-lg);
    opacity: 0;
    transition: opacity var(--dur-mid) var(--ease);
}
.pa-cta-tag {
    font-family: var(--ff-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.45);
    padding: 0.5rem 1.3rem;
    border-radius: var(--radius-full);
    background: rgba(255,255,255,0.07);
    backdrop-filter: blur(6px);
    transition:
        border-color var(--dur-fast) var(--ease),
        color        var(--dur-fast) var(--ease),
        background   var(--dur-fast) var(--ease);
}

/* Hover state — lift, glow, reveal overlay */
.pa-link:hover .pa-img-wrap {
    transform: translateY(-10px);
    box-shadow:
        0 0 0 1px rgba(184,149,74,0.4),
        0 0 55px rgba(184,149,74,0.28),
        0 20px 60px rgba(0,0,0,0.55);
    border-color: rgba(184,149,74,0.4);
}
.pa-link:hover .pa-img-wrap img {
    transform: scale(1.07);
    filter: brightness(1.0) contrast(1.05) saturate(1.0);
}
.pa-link:hover .pa-overlay  { opacity: 1; }
.pa-link:hover .pa-cta-tag  {
    border-color: var(--gold-light);
    color: var(--gold-light);
    background: rgba(184,149,74,0.12);
}

/* Caption */
.pa-meta {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-xs) 0;
}
.pa-meta-line {
    display: block;
    flex-shrink: 0;
    width: 18px;
    height: 1px;
    background: var(--gold);
    opacity: 0.35;
    transition: width var(--dur-mid) var(--ease), opacity var(--dur-mid) var(--ease);
}
.pa-link:hover .pa-meta-line { width: 34px; opacity: 0.9; }

.pa-meta h3 {
    font-family: var(--ff-display);
    font-size: 1.25rem;
    font-weight: 300;
    color: #f0ede7;
    letter-spacing: 0.03em;
    margin-bottom: 0.15em;
    line-height: 1.2;
}
.pa-meta p {
    font-size: 0.78rem;
    font-style: italic;
    /* WCAG AA fix: ≥4.5:1 on #080808 → rgba(240,237,231,0.62) ≈ #969390 → ~5.2:1 */
    color: rgba(240,237,231,0.62);
    letter-spacing: 0.05em;
}

/* ─── CTA DARK SECTION ───────────────────────────────────────── */
.cta-dark {
    background: #050505;
    position: relative;
    overflow: hidden;
    padding: var(--space-5xl) 0;
    text-align: center;
}
.cta-dark::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(184,149,74,0.45), transparent);
}

/* Radial gold ambient glow */
.cta-dark-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 75% 55% at 50% 100%, rgba(184,149,74,0.22) 0%, transparent 70%),
        radial-gradient(ellipse 40% 30% at 50% 85%,  rgba(184,149,74,0.12) 0%, transparent 60%);
    pointer-events: none;
}

.cta-dark-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xl);
}

.cta-headline {
    font-family: var(--ff-display);
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 300;
    line-height: 1.2;
    color: #f0ede7;
}
.cta-headline .script-font {
    display: block;
    font-size: 1.15em;
    margin-top: 0.1em;
}
.cta-body {
    font-family: var(--ff-body);
    font-size: var(--fs-body);
    color: rgba(240,237,231,0.5);
    max-width: 44ch;
    line-height: var(--lh-loose);
}

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 900px) {
    .swiss-split {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
    .swiss-text { padding-right: 0; }
    .swiss-split--reverse .swiss-text  { padding-left: 0; }
    .swiss-split--reverse .swiss-visual { order: 0; }
    /* Bilder auf Tablet: kompakter, aber noch sichtbar */
    .swiss-visual { max-width: 520px; margin: 0 auto; }
    .glow-frame   { max-width: 100%; }

    .pa-grid {
        grid-template-columns: 1fr 1fr;
    }
    .pa-card--offset-down,
    .pa-card--offset-up  { margin-top: 0; }
    .pa-grid > .pa-card:last-child {
        grid-column: 1 / -1;
        max-width: 440px;
        margin: 0 auto;
    }

    .stats-inner { gap: var(--space-2xl); }
}

@media (max-width: 600px) {
    /* ── Hero: stärkeres Overlay auf Mobile für Lesbarkeit ────── */
    .hero-vignette--cinematic {
        background:
            linear-gradient(to top,    rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 45%, rgba(0,0,0,0.25) 75%, transparent 100%),
            linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, transparent 25%);
    }
    .hero-content--stage { padding: 0 var(--space-lg) var(--space-3xl); }
    .hero-cta-row  { flex-direction: column; align-items: center; }
    .hero-badge    { margin-bottom: var(--space-lg); }

    /* ── Split Sections: Bilder NUR auf der STARTSEITE ausblenden ──
       Unterseiten behalten ihre Bilder – dort sind sie Kern-Content */
    body.is-homepage .swiss-visual  { display: none; }
    /* Unterseiten: Bilder kompakt darstellen */
    .swiss-visual { max-width: 320px; margin: 0 auto var(--space-lg); }
    /* Portfolio-Bilder bleiben sichtbar — die sind der Kern-Content */

    /* ── Stats Strip: vertikal ────────────────────────────────── */
    .stats-inner {
        flex-direction: column;
        gap: var(--space-md);
    }
    .stat-sep {
        width: 44px;
        height: 1px;
        background: linear-gradient(to right, transparent, rgba(184,149,74,0.35), transparent);
    }

    /* ── Portfolio: 1 Spalte ─────────────────────────────────── */
    .pa-grid {
        grid-template-columns: 1fr;
    }
    .pa-grid > .pa-card:last-child {
        grid-column: 1;
        max-width: none;
    }

    .cta-dark { padding: var(--space-3xl) 0; }
}


/* ═══════════════════════════════════════════════════════════════
   2026 PREMIUM ADDITIONS
   ─ Noise Texture (Tiefe & Materialität auf dunklen Flächen)
   ─ Floating Inquiry CTA
════════════════════════════════════════════════════════════════ */

/* ─── NOISE TEXTURE — Dark Sections ─────────────────────────── */
/* Variante: winziges, sich wiederholendes SVG-Rauschen als         */
/* background-image-Overlay. Mix-blend-mode: overlay erzeugt       */
/* den analogen Filmkorn-Effekt ohne die Performance zu belasten.  */

.cta-dark::after,
.hero-vignette--cinematic::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px 200px;
    opacity: 0.032;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 1;
}

/* cta-dark-inner und cta-dark-glow bleiben darüber */
.cta-dark-glow { z-index: 2; }
.cta-dark-inner { z-index: 3; }

/* Hero Vignette: noise-Ebene sitzt über dem Bild, unter dem Content */
.hero-vignette--cinematic {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.hero-vignette--cinematic::after { z-index: 2; opacity: 0.025; }

/* ─── FLOATING INQUIRY CTA ───────────────────────────────────── */
.floating-cta {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 800;
    opacity: 0;
    transform: translateY(12px) scale(0.95);
    transition:
        opacity 0.4s var(--ease),
        transform 0.4s var(--ease-spring);
    pointer-events: none;
}

.floating-cta.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.floating-cta-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--text);
    color: #fff;
    font-family: var(--ff-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.85rem 1.6rem 0.85rem 1.25rem;
    border-radius: var(--radius-full);
    box-shadow: 0 8px 32px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.15);
    transition:
        background 0.3s var(--ease),
        box-shadow 0.3s var(--ease),
        transform  0.3s var(--ease-spring);
    border: 1px solid rgba(255,255,255,0.08);
}

.floating-cta-btn:hover {
    background: var(--gold);
    box-shadow: 0 8px 40px var(--gold-glow), 0 2px 8px rgba(0,0,0,0.15);
    transform: translateY(-3px) scale(1.03);
}

.floating-cta-btn svg {
    flex-shrink: 0;
    transition: transform 0.3s var(--ease-spring);
}

.floating-cta-btn:hover svg {
    transform: translateX(3px);
}

/* Auf Mobile etwas kleiner und höher positioniert (über dem a11y-Button) */
@media (max-width: 600px) {
    .floating-cta {
        bottom: 5rem;
        right: 1rem;
    }
    .floating-cta-btn {
        padding: 0.75rem 1.2rem 0.75rem 1rem;
    }
    .floating-cta-btn span { display: none; }
    .floating-cta-btn {
        width: 48px;
        height: 48px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }
}

/* ─── KONTAKTFORMULAR ERFOLGSMELDUNG ─────────────────────────── */
.contact-success-wrap {
    padding: var(--space-4xl) var(--space-xl);
    text-align: center;
}

.contact-success {
    max-width: 520px;
    margin: 0 auto;
}

.success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--gold-pale);
    color: var(--gold-text);
    margin-bottom: var(--space-xl);
}

.success-headline {
    font-family: var(--ff-display);
    font-size: var(--fs-h2);
    font-weight: 400;
    color: var(--text);
    margin-bottom: var(--space-lg);
}

.success-text {
    font-size: var(--fs-body);
    line-height: var(--lh-loose);
    color: var(--text-muted);
    margin-bottom: var(--space-lg);
}

.success-sub {
    font-family: var(--ff-script);
    font-size: 1.8rem;
    color: var(--gold);
}