/* =======================================
   GOOGLE FONTS
======================================= */
/* =======================================
   1. RESET / BASE STYLES
======================================= */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* =======================================
   2. COLOR & GRADIENT VARIABLES
======================================= */
:root {
    --accent-start: #4776E6;
    --accent-mid: #6a82fb;
    --accent-end: #8E54E9;

    --gradient-accent: linear-gradient(
            115deg,
            var(--accent-start) 0%,
            var(--accent-mid) 50%,
            var(--accent-end) 100%
    );

    --dark-bg: #111111;
    --dark-bg-alt: #1a1a1a;
    --text-color: #eaeaea;
    --secondary-text: #b8b8b8;

    --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    --nav-height: 5rem;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    --radius-base: 12px;
    --radius-lg: 20px;
}

/* =======================================
   3. GLOBAL STYLES
======================================= */
html {
    background-color: #0f0f0f;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    color: var(--text-color);
    line-height: 1.6;
    background: var(--dark-bg) radial-gradient(circle at top left, #1a1a1a 10%, #0f0f0f 90%);
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    font-size: 1rem;
}

a {
    transition: color var(--transition-base), background var(--transition-base), transform var(--transition-base);
    cursor: pointer;
    text-decoration: none;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.01em;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.2rem; }
h5 { font-size: 0.9rem; }
h6 { font-size: 0.75rem; }

/* Anchor offset for sticky nav */
section[id] {
    scroll-margin-top: var(--nav-height);
}

/* =======================================
   4. NAVBAR
======================================= */
.navbar {
    width: 100%;
    max-width: 100%;
    height: var(--nav-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(15, 15, 15, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 1rem 2%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.logo {
    display: block;
    width: 300px;
    height: 80px;
}

.logo img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 600px) {
    .logo {
        height: 90px;
        width: 337.5px;
    }
    .logo img {
        height: 100%;
        width: auto;
    }
}

@media (max-width: 430px) {
    .logo {
        height: 80px;
        width: 300px;
    }
    .logo img {
        height: 100%;
        width: auto;
    }
}

/* Standard Desktop Nav */
.nav-menu ul {
    list-style: none;
    display: flex;
    gap: 1.5rem;
}

.nav-menu li a {
    font-family: var(--font-body);
    color: var(--text-color);
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    position: relative;
}

.nav-menu li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 60%;
    height: 2px;
    background: var(--gradient-accent);
    border-radius: 2px;
    transition: transform var(--transition-base);
}

.nav-menu li a:hover::after,
.nav-menu li a:focus::after {
    transform: translateX(-50%) scaleX(1);
}

.nav-menu li a:hover {
    color: #fff;
    transform: translateY(-1px);
}

/* =======================================
   5. BURGER BUTTON & MOBILE MENU OVERLAY
======================================= */
.nav-toggle {
    display: none;
    cursor: pointer;
    width: 35px;
    height: 25px;
    position: relative;
    margin-right: 2%;
    z-index: 1001;
}

.nav-toggle span {
    background-color: #fff;
    width: 100%;
    height: 3px;
    display: block;
    position: absolute;
    left: 0;
    transition: var(--transition-base);
    border-radius: 2px;
}

.nav-toggle span:nth-child(1) { top: 0; }
.nav-toggle span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nav-toggle span:nth-child(3) { bottom: 0; }

.nav-toggle.open span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

.nav-menu.active {
    transform: translateX(0);
}

/* =======================================
   6. ANIMATED GRADIENT BORDER UTILITY
   Used on .card, .step-card, .portfolio-item
======================================= */
.btn-animated-border {
    position: relative;
    isolation: isolate;
}

.btn-animated-border::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--gradient-accent);
    opacity: 0;
    transition: opacity var(--transition-base);
    pointer-events: none;
    padding: 1px;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 2;
}

.btn-animated-border:hover::after,
.btn-animated-border:focus-visible::after {
    opacity: 1;
}

/* =======================================
   7. BUTTONS
======================================= */
.btn-primary,
.btn-secondary {
    display: inline-block;
    text-decoration: none;
    padding: 0.75rem 1.75rem;
    border-radius: 30px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    cursor: pointer;
}

.btn-primary {
    background: var(--gradient-accent);
    color: #fff;
    border: none;
}

.btn-primary:hover {
    box-shadow: 0 8px 24px rgba(71, 118, 230, 0.4);
    transform: translateY(-3px);
}

.btn-secondary {
    border: 1.5px solid rgba(106, 130, 251, 0.6);
    color: var(--accent-mid);
    background-color: transparent;
}

.btn-secondary:hover {
    background: var(--gradient-accent);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 24px rgba(71, 118, 230, 0.3);
    transform: translateY(-3px);
}

/* =======================================
   8. SERVICES SECTION
======================================= */
#services {
    padding: 5rem 2rem;
    text-align: center;
    background: linear-gradient(160deg, #1a1a1a 60%, #111 100%);
}

#services h2 {
    font-size: 2.8rem;
    margin-bottom: 0.75rem;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

#services > .service-cards {
    margin-top: 2.5rem;
}

.service-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    align-items: stretch;
}

.card {
    background: #1f1f1f;
    border-radius: var(--radius-base);
    padding: 2.25rem 2rem;
    flex: 1 1 300px;
    max-width: 300px;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    border: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    will-change: transform;
}

.card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

/* Card icon */
.card-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 1.25rem;
    color: var(--accent-mid);
    opacity: 0.85;
    transition: opacity var(--transition-base), transform var(--transition-base);
}

.card-icon svg {
    width: 100%;
    height: 100%;
}

.card:hover .card-icon {
    opacity: 1;
    transform: scale(1.08);
}

.card h3 {
    font-size: 1.6rem;
    margin-bottom: 0.75rem;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.2;
}

.card p {
    color: var(--secondary-text);
    line-height: 1.5;
    margin-top: 0.25rem;
    font-size: 0.9rem;
    font-family: var(--font-body);
}

@media (max-width: 900px) {
    .card {
        flex: 0 0 45%;
        min-width: 300px;
    }
}

@media (max-width: 600px) {
    .card {
        flex: 0 0 90%;
        margin: 0 auto;
        min-width: 300px;
    }
}

/* =======================================
   9. REDESIGNED MODAL SYSTEM
======================================= */

/* ---- Shared overlay ---- */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow-y: auto;
    padding: 2rem 1rem;
    opacity: 0;
    transition: opacity 0.35s ease;
    align-items: center;
    justify-content: center;
}

.modal.show {
    display: flex;
    opacity: 1;
}

.modal.hide {
    opacity: 0;
}

/* ---- SERVICE MODAL DIALOG ---- */
.service-modal .modal-dialog {
    position: relative;
    background: linear-gradient(160deg, #1c1c1c 0%, #161616 100%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius-lg);
    max-width: 660px;
    width: 100%;
    overflow: hidden;
    animation: modalReveal 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255,255,255,0.04);
}

@keyframes modalReveal {
    from { opacity: 0; transform: translateY(36px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Gradient top bar */
.service-modal .modal-dialog::before {
    content: '';
    display: block;
    height: 3px;
    background: var(--gradient-accent);
    flex-shrink: 0;
}

/* Icon area */
.modal-icon-display {
    display: flex;
    justify-content: center;
    padding: 2.25rem 2rem 0.25rem;
}

.modal-icon-display svg {
    width: 52px;
    height: 52px;
    color: var(--accent-mid);
    opacity: 0.9;
}

/* Body */
.modal-body {
    padding: 1.25rem 3rem 3rem;
}

@media (max-width: 600px) {
    .modal-body {
        padding: 1.25rem 1.5rem 2.5rem;
    }
}

.modal-title {
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: left;
}

.modal-text p {
    color: var(--secondary-text);
    line-height: 1.85;
    font-size: 1rem;
    margin-bottom: 1.25rem;
    font-family: var(--font-body);
    text-align: left;
}

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

/* Close button — circular, top-right */
.modal-close-btn {
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.65);
    transition: background 0.22s, color 0.22s, transform 0.22s;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
    z-index: 10;
}

.modal-close-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    transform: rotate(90deg) scale(1.05);
}

/* ---- PORTFOLIO MODAL — full-screen split ---- */
.portfolio-modal.modal {
    padding: 0;
    overflow: hidden;
}

.portfolio-modal.modal .portfolio-dialog {
    display: flex;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    background: #0d0d0d;
    animation: portfolioReveal 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
    overflow: hidden;
}

@keyframes portfolioReveal {
    from { opacity: 0; transform: scale(0.975); }
    to   { opacity: 1; transform: scale(1); }
}

/* Left side: image slider */
.portfolio-slider-side {
    flex: 0 0 52%;
    position: relative;
    background: #050505;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Right side: project info */
.portfolio-info-side {
    flex: 1;
    padding: 5.5rem 3rem 3rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
}

/* Gradient decorative line on the right panel */
.portfolio-info-side::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient-accent);
    opacity: 0.5;
}

#portfolio-modal-title {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 1.75rem;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

#portfolio-modal-description {
    color: var(--secondary-text);
    line-height: 1.8;
    font-size: 0.95rem;
    font-family: var(--font-body);
}

#portfolio-modal-description p {
    margin-bottom: 1rem;
}

#portfolio-modal-description strong {
    color: var(--text-color);
    font-weight: 500;
}

/* Slider inside portfolio modal */
.portfolio-slider-side .slider {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
}

.portfolio-slider-side .slides {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: unset;
    overflow: hidden;
}

.portfolio-slider-side .slides img {
    position: absolute;
    width: auto;
    height: auto;
    top: 50%;
    transform: translateY(-50%);
    max-width: 100%;
    max-height: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
    display: none;
    object-fit: contain;
}

/* Portfolio modal prev/next */
.portfolio-slider-side .prev,
.portfolio-slider-side .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: 300;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.85);
    padding: 0.75rem 0.9rem;
    user-select: none;
    border-radius: 8px;
    transition: background var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
    z-index: 2;
    line-height: 1;
    backdrop-filter: blur(6px);
}

.portfolio-slider-side .prev { left: 1rem; }
.portfolio-slider-side .next { right: 1rem; }

.portfolio-slider-side .prev:hover,
.portfolio-slider-side .next:hover {
    background: rgba(71, 118, 230, 0.6);
    border-color: rgba(71, 118, 230, 0.4);
    transform: translateY(-50%) scale(1.07);
}

/* Portfolio close button */
.portfolio-close-btn {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 3000;
    background: rgba(15, 15, 15, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.75);
    transition: background 0.22s, color 0.22s, transform 0.22s;
    font-size: 1.2rem;
    line-height: 1;
    padding: 0;
    backdrop-filter: blur(8px);
}

.portfolio-close-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    transform: rotate(90deg);
}

/* Mobile: stacked layout */
@media (max-width: 768px) {
    .portfolio-modal.modal {
        overflow-y: auto;
    }

    .portfolio-modal.modal .portfolio-dialog {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        overflow-y: auto;
    }

    .portfolio-slider-side {
        flex: 0 0 auto;
        height: 60vw;
        min-height: 240px;
        max-height: 50vh;
    }

    .portfolio-info-side {
        flex: 1 0 auto;
        padding: 2rem 1.5rem 3rem;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        overflow-y: visible;
    }

    .portfolio-info-side::before {
        display: none;
    }

    #portfolio-modal-title {
        font-size: 1.7rem;
    }

    .portfolio-close-btn {
        top: 0.75rem;
        right: 0.75rem;
        width: 38px;
        height: 38px;
    }
}

/* Accent links inside modal descriptions */
.accent-link {
    color: var(--accent-mid);
    text-decoration: none;
    transition: color var(--transition-base);
}

.accent-link:hover,
.accent-link:focus {
    color: var(--accent-start);
}

/* ---- Backwards compat: old .close styles reset ---- */
.close {
    /* All styling handled by .modal-close-btn or .portfolio-close-btn */
    float: none;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    line-height: inherit;
    cursor: pointer;
}

/* Slide animations (unchanged, referenced by JS) */
@keyframes slideInFromRight {
    0%   { transform: translateY(-50%) translateX(100%); opacity: 0; }
    100% { transform: translateY(-50%) translateX(0);    opacity: 1; }
}
.slide-in-right { animation: slideInFromRight 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

@keyframes slideOutToLeft {
    0%   { transform: translateY(-50%) translateX(0);     opacity: 1; }
    100% { transform: translateY(-50%) translateX(-100%); opacity: 0; }
}
.slide-out-left { animation: slideOutToLeft 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

@keyframes slideInFromLeft {
    0%   { transform: translateY(-50%) translateX(-100%); opacity: 0; }
    100% { transform: translateY(-50%) translateX(0);     opacity: 1; }
}
.slide-in-left { animation: slideInFromLeft 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

@keyframes slideOutToRight {
    0%   { transform: translateY(-50%) translateX(0);    opacity: 1; }
    100% { transform: translateY(-50%) translateX(100%); opacity: 0; }
}
.slide-out-right { animation: slideOutToRight 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* ===============================
   PARTNER SECTION
=============================== */
#partner {
    padding: 4rem 2rem;
    background: linear-gradient(160deg, #1a1a1a 60%, #111 100%);
    text-align: center;
}

#partner h2 {
    font-size: 2.4rem;
    margin-bottom: 2rem;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.partner-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.partner-logos a {
    display: inline-block;
    transition: transform var(--transition-base), opacity var(--transition-base);
    opacity: 0.75;
}

.partner-logos a:hover {
    transform: scale(1.06);
    opacity: 1;
}

.partner-logos img {
    height: 90px;
    width: auto;
    max-width: 440px;
    object-fit: contain;
    filter: brightness(1);
    transition: filter var(--transition-base);
}

@media (max-width: 420px) {
    .partner-logos img {
        height: 65px;
        max-width: 300px;
    }
}

/************************************************
 * FIXED BACKGROUND SECTIONS
 ************************************************/
#fixed-image-section {
    height: 40vh;
    width: 100%;
    margin: 0;
    padding: 0;
    background: url("../compressed/side-photo2.webp") no-repeat fixed center center;
    background-size: cover;
}

#fixed-image-section2 {
    height: 40vh;
    width: 100%;
    margin: 0;
    padding: 0;
    background: url("../compressed/side-photo.webp") no-repeat fixed center center;
    background-size: cover;
}

@supports (-webkit-overflow-scrolling: touch) {
    #fixed-image-section,
    #fixed-image-section2 {
        background-attachment: scroll;
    }
}

.safari #fixed-image-section,
.safari #fixed-image-section2 {
    background-attachment: scroll;
}

@media (max-width: 600px) {
    #fixed-image-section {
        background-image: url("../compressed/side-photo2-mobile.webp");
    }
    #fixed-image-section2 {
        background-image: url("../compressed/side-photo-mobile.webp");
    }
}

/************************************************
 * STEPS SECTION
 ************************************************/
#steps {
    position: relative;
    overflow: hidden;
    padding: 6rem 2rem;
    z-index: 0;
    background: radial-gradient(circle at 30% 50%, #1c1c1c, #0f0f0f 80%);
}

#steps .steps-inner {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

#steps h2 {
    font-size: 3rem;
    margin-bottom: 1rem;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#steps .steps-intro {
    font-size: 1.05rem;
    font-family: var(--font-body);
    color: var(--secondary-text);
    max-width: 700px;
    margin: 0 auto 3rem auto;
    line-height: 1.7;
}

/************************************************
 * STEPS GRID
 ************************************************/
.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    width: 90%;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .steps-grid {
        grid-template-columns: 1fr;
        width: 100%;
    }
}

/************************************************
 * STEP CARDS
 ************************************************/
.step-card {
    background: #1e1e1e;
    border-radius: var(--radius-base);
    padding: 2rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.07);
    text-align: left;
    opacity: 0;
    transform: translateY(32px) scale(0.97);
    transition: opacity var(--transition-slow), transform var(--transition-slow),
                box-shadow var(--transition-base);
    will-change: transform, opacity;
}

.step-card.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.step-card:hover {
    transform: perspective(600px) rotateX(3deg) rotateY(3deg) translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

.step-number {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.75rem;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.3;
    display: block;
}

.step-card h3 {
    margin-bottom: 0.75rem;
    font-size: 1.35rem;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.step-card p {
    color: var(--secondary-text);
    font-family: var(--font-body);
    font-size: 0.93rem;
    line-height: 1.65;
}

/* =======================================
   INDEX PORTFOLIO / TEASER SECTION
======================================= */
#portfolio {
    padding: 5rem 2rem;
    text-align: center;
    background: #131313;
}

#portfolio h2 {
    font-size: 3rem;
    margin-bottom: 0.75rem;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

#portfolio > p {
    color: var(--secondary-text);
    margin-bottom: 2.5rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
    font-size: 1.05rem;
}

/* ---- Legacy grid (index.html teaser) ---- */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    width: 90%;
    max-width: 2000px;
    margin: 0 auto;
}

@media screen and (max-width: 1300px) {
    .portfolio-grid { grid-template-columns: repeat(3, 1fr); }
}
@media screen and (max-width: 768px) {
    .portfolio-grid { grid-template-columns: repeat(2, 1fr); width: 95%; }
}
@media screen and (max-width: 600px) {
    .portfolio-grid { grid-template-columns: 1fr; }
}

.portfolio-item {
    position: relative;
    aspect-ratio: 1 / 1;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-base);
    background: #1f1f1f;
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    will-change: transform;
}

.portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.portfolio-item:hover img { transform: scale(1.04); }

.portfolio-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(30, 30, 80, 0.75) 0%,
        rgba(71, 118, 230, 0.25) 55%,
        transparent 100%
    );
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    border-radius: inherit;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 1rem;
    z-index: 1;
}

.portfolio-overlay span {
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.35);
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    font-family: var(--font-body);
}

.portfolio-item:hover .portfolio-overlay { opacity: 1; }
.portfolio-item:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
}

/* =======================================
   PROJECTS PAGE — PROJEKTE.HTML
======================================= */

/* Header */
#projekte-header {
    padding-top: calc(var(--nav-height) + 4rem);
    padding-bottom: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
    text-align: center;
    background: radial-gradient(ellipse at 50% 0%, #1c1c2e 0%, #0f0f0f 60%);
    position: relative;
    overflow: hidden;
}

#projekte-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 1px;
    background: var(--gradient-accent);
    opacity: 0.5;
}

.projekte-label {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 1rem;
    display: block;
}

#projekte-header h1 {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.05;
    margin-bottom: 1.25rem;
    background: linear-gradient(135deg, #ffffff 0%, rgba(255,255,255,0.7) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

#projekte-header p.projekte-subtitle {
    font-family: var(--font-body);
    color: var(--secondary-text);
    max-width: 560px;
    margin: 0 auto 3rem;
    line-height: 1.75;
    font-size: 1.05rem;
}

@media (max-width: 600px) {
    #projekte-header h1 { font-size: 2.6rem; }
    #projekte-header { padding-top: calc(var(--nav-height) + 2.5rem); }
}

/* Filter Tabs */
.filter-tabs-wrap {
    background: #0f0f0f;
    padding: 2rem 2rem 0;
    display: flex;
    justify-content: center;
    position: sticky;
    top: var(--nav-height);
    z-index: 100;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(15, 15, 15, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.filter-tabs {
    display: flex;
    gap: 0.5rem;
    padding-bottom: 0;
    flex-wrap: wrap;
    justify-content: center;
}

.filter-btn {
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    background: none;
    border: none;
    padding: 0.85rem 1.5rem;
    cursor: pointer;
    position: relative;
    transition: color 0.25s ease;
    white-space: nowrap;
}

.filter-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 80%;
    height: 2px;
    background: var(--gradient-accent);
    border-radius: 2px 2px 0 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.filter-btn:hover {
    color: rgba(255, 255, 255, 0.8);
}

.filter-btn.active {
    color: #fff;
}

.filter-btn.active::after {
    transform: translateX(-50%) scaleX(1);
}

.filter-btn .filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.7rem;
    margin-left: 0.4rem;
    transition: background 0.25s;
}

.filter-btn.active .filter-count {
    background: var(--gradient-accent);
    color: #fff;
}

/* Projekte Grid Section */
#projekte-sektion {
    padding: 3rem 2rem 6rem;
    background: #0f0f0f;
}

/* Projects editorial card layout */
.projekte-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    width: 90%;
    max-width: 1400px;
}

/* Override the 1:1 aspect ratio for editorial cards */
.projekte-grid .portfolio-item {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    overflow: visible;
    background: #161616;
    border-radius: var(--radius-base);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.projekte-grid .portfolio-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
}

/* Image wrapper inside editorial card */
.projekte-card-image {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--radius-base) var(--radius-base) 0 0;
    flex-shrink: 0;
}

.projekte-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    display: block;
    transition: transform 0.5s ease;
}

.projekte-grid .portfolio-item:hover .projekte-card-image img {
    transform: scale(1.04);
}

/* Overlay inside image area */
.projekte-card-image .portfolio-overlay {
    border-radius: var(--radius-base) var(--radius-base) 0 0;
}

/* Text body below image */
.projekte-card-body {
    padding: 1.25rem 1.5rem 1.75rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #161616;
    border-radius: 0 0 var(--radius-base) var(--radius-base);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.projekte-tag {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.6rem;
    display: block;
}

.projekte-card-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-color);
    margin-bottom: 0.75rem;
    background: none;
    -webkit-text-fill-color: unset;
}

.projekte-card-excerpt {
    color: var(--secondary-text);
    font-family: var(--font-body);
    font-size: 0.88rem;
    line-height: 1.65;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Hidden items when filtered */
.portfolio-item.project-hidden {
    display: none;
}

/* Grid responsive for projects page */
@media (max-width: 900px) {
    .projekte-grid {
        grid-template-columns: 1fr;
        width: 95%;
    }
}

/* =======================================
   10. CONTACT SECTION
======================================= */
#contact {
    padding: 5rem 2rem 2.5rem;
    text-align: center;
    background: linear-gradient(160deg, #1a1a1a 60%, #111 100%);
    position: relative;
}

#contact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--gradient-accent);
    border-radius: 2px;
}

#contact h2 {
    font-size: 2.8rem;
    margin-bottom: 1rem;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.2;
}

#contact > p:first-of-type {
    margin-bottom: 2.25rem;
    color: var(--secondary-text);
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.75;
    font-family: var(--font-body);
}

.email-fallback {
    margin-top: 1.5rem;
    font-size: 0.88rem;
    color: #aaa;
    font-family: var(--font-body);
}

.email-fallback strong {
    color: #fff;
}

/* =======================================
   11. FOOTER
======================================= */
.footer-nav {
    background: #0e0e0e;
    padding: 2rem 1rem;
    text-align: center;
    max-width: 100%;
    overflow-x: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    list-style: none;
    justify-content: center;
    margin: 0 0 0.75rem;
    padding: 0;
}

.footer-nav li {
    flex: 0 0 auto;
    text-align: center;
}

@media (max-width: 600px) {
    .footer-nav li { flex: 0 0 calc(50% - 1rem); }
}

@media (max-width: 400px) {
    .footer-nav li { flex: 0 0 100%; }
}

.footer-nav li a {
    color: #888;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.85rem;
    font-family: var(--font-body);
    transition: color var(--transition-base);
    letter-spacing: 0.04em;
}

.footer-nav li a:hover { color: #fff; }

.footer-nav p {
    color: #888;
    font-size: 0.8rem;
    margin-top: 0.5rem;
    font-family: var(--font-body);
}

/* Cookie settings button: match footer link appearance exactly */
.footer-nav .fnx-cookie-settings-btn {
    color: #888;
    font-size: 0.85rem;
    font-weight: 500;
    font-family: var(--font-body);
    letter-spacing: 0.04em;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: color var(--transition-base);
    text-decoration: none;
    display: inline;
}
.footer-nav .fnx-cookie-settings-btn:hover { color: #fff; }
.footer-nav .fnx-cookie-settings-btn:focus-visible {
    outline: 2px solid #6a82fb;
    outline-offset: 3px;
    border-radius: 2px;
}

/* =======================================
   12. RESPONSIVE MOBILE NAV
======================================= */
@media (max-width: 768px) {
    .nav-menu ul { display: none; }

    .nav-toggle { display: block; }

    .nav-menu {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100vw;
        background: rgba(12, 12, 12, 0.96);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        transform: translateX(100%);
        transition: transform var(--transition-base);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .nav-menu ul {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        align-items: center;
    }

    .nav-menu li a {
        font-family: var(--font-display);
        font-size: 2rem;
        font-weight: 600;
        padding: 0.5rem 1rem;
        letter-spacing: 0.04em;
        text-transform: none;
    }

    .nav-menu li a::after { display: none; }

    .nav-menu.active { transform: translateX(0); }

    .hero-content h1,
    .hero-content h2 { font-size: 1.6rem; }

    #services .service-cards {
        flex-direction: column;
        align-items: center;
    }
}

/* =======================================
   13. LEGAL PAGES
======================================= */
.legal-container {
    max-width: 50%;
    margin: 2rem auto 4rem auto;
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-base);
    padding: 2rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
    color: var(--text-color);
}

.legal-container h1 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.legal-container p {
    font-family: var(--font-body);
    margin-bottom: 1.2rem;
    line-height: 1.6;
}

.back-button-container {
    text-align: center;
    margin-top: 4rem;
}

.back-button {
    display: inline-block;
    margin-bottom: 2rem;
}

@media (min-width: 601px) and (max-width: 1200px) {
    .legal-container {
        max-width: 70%;
        font-size: 1.05rem;
    }
}

@media (max-width: 600px) {
    .legal-container {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
        padding: 1.5rem;
        box-shadow: none;
        border: none;
        max-width: 90%;
    }

    .legal-container h1 {
        font-size: 2rem;
        margin-bottom: 1rem;
    }

    .legal-container p {
        font-size: 0.95rem;
        margin-bottom: 1rem;
    }

    .back-button-container { margin-top: 4rem; }
}

/* =======================================
   SECTION EYEBROW LABEL (shared)
======================================= */
.section-eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.75rem;
}

/* =======================================
   GALLERY HIGHLIGHTS SECTION
======================================= */
#highlights {
    background: #141414;
    padding: 4.5rem 2rem 5rem;
}

.highlights-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto 2rem;
}

.highlights-header-text h2 {
    font-size: 2rem;
    line-height: 1.1;
    color: #fff;
    margin: 0.3rem 0 0.5rem;
    background: none;
    -webkit-text-fill-color: #fff;
}

.highlights-header-text p {
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: rgba(255,255,255,0.42);
    line-height: 1.65;
    max-width: 360px;
    margin: 0;
}

/* "Alle Projekte" — pill button */
.highlights-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.75);
    white-space: nowrap;
    flex-shrink: 0;
    align-self: flex-end;
    margin-bottom: 0.15rem;
    padding: 0.55rem 1.1rem 0.55rem 1.25rem;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 30px;
    background: rgba(255,255,255,0.04);
    transition: color 0.25s, border-color 0.25s, background 0.25s, transform 0.2s;
    text-decoration: none;
}

.highlights-link span {
    font-size: 0.9rem;
    transition: transform 0.25s ease;
    display: inline-block;
    line-height: 1;
}

.highlights-link:hover {
    color: #fff;
    border-color: rgba(106,130,251,0.45);
    background: rgba(106,130,251,0.08);
    transform: translateY(-1px);
}

.highlights-link:hover span {
    transform: translateX(3px);
}

/* Three-column strip */
.highlights-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    max-width: 1100px;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}

.hl-item {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    cursor: pointer;
    background: #1a1a1a;
    border: none;
    border-radius: 0;
    will-change: transform;
}

.hl-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.65s cubic-bezier(0.25, 1, 0.5, 1), filter 0.5s ease;
    filter: brightness(0.8) saturate(0.88);
}

.hl-item:hover img {
    transform: scale(1.06);
    filter: brightness(0.58) saturate(1.1);
}

/* Permanent very soft vignette */
.hl-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, transparent 55%);
    z-index: 1;
    pointer-events: none;
}

/* Caption fades up on hover */
.hl-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.4rem 1.25rem 1.15rem;
    z-index: 2;
    transform: translateY(5px);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.hl-item:hover .hl-caption {
    opacity: 1;
    transform: translateY(0);
}

.hl-caption span {
    display: block;
    font-family: var(--font-body);
    font-size: 0.63rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.3rem;
}

.hl-caption p {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
    margin: 0;
}

@media (max-width: 700px) {
    #highlights {
        padding: 3rem 0 3.5rem;
    }

    .highlights-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 0 1.5rem;
        margin-bottom: 1.5rem;
    }

    .highlights-strip {
        grid-template-columns: 1fr;
        gap: 3px;
        border-radius: 0;
        max-width: 100%;
        box-shadow: none;
    }

    .hl-item {
        aspect-ratio: 4 / 3;
    }

    .hl-caption {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =======================================
   ABOUT / ÜBER MICH SECTION
======================================= */
#about {
    padding: 7rem 2rem;
    background: linear-gradient(170deg, #141414 0%, #0f0f0f 100%);
    position: relative;
    overflow: hidden;
}

/* Subtle decorative blob */
#about::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -15%;
    width: 60vw;
    height: 60vw;
    max-width: 700px;
    max-height: 700px;
    background: radial-gradient(circle, rgba(71, 118, 230, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.about-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 5rem;
    align-items: start;
}

/* Photo column */
.about-photo-wrap {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    position: sticky;
    top: calc(var(--nav-height) + 2rem);
}

.about-photo-placeholder {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-lg);
    background: linear-gradient(145deg, #1e1e1e 0%, #161616 100%);
    border: 1px solid rgba(255,255,255,0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Crosshair placeholder indicator */
.about-photo-placeholder::after {
    content: 'Porträt folgt';
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-body);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.18);
    white-space: nowrap;
}

.about-photo-initials {
    font-family: var(--font-display);
    font-size: 5rem;
    font-weight: 700;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.22;
    user-select: none;
}

/* Stats row below photo */
.about-stats {
    display: flex;
    gap: 0;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--radius-base);
    overflow: hidden;
    background: #161616;
}

.about-stat {
    flex: 1;
    padding: 1rem 0.5rem;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,0.06);
}

.about-stat:last-child {
    border-right: none;
}

.about-stat-number {
    display: block;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.1;
}

.about-stat-label {
    display: block;
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    margin-top: 0.25rem;
}

/* Text column */
.about-text {
    padding-top: 0.5rem;
}

.about-text h2 {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.05;
    color: #fff;
    margin-bottom: 0.75rem;
    background: none;
    -webkit-text-fill-color: #fff;
}

.about-lead {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 400;
    font-style: italic;
    color: rgba(255,255,255,0.65);
    line-height: 1.5;
    margin-bottom: 2rem;
}

.about-text p {
    font-family: var(--font-body);
    color: var(--secondary-text);
    line-height: 1.85;
    font-size: 0.97rem;
    margin-bottom: 1.25rem;
}

.about-text p strong {
    color: rgba(255,255,255,0.85);
    font-weight: 500;
}

.about-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 2rem;
}

.about-tags span {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    padding: 0.4rem 0.85rem;
    border-radius: 30px;
    border: 1px solid rgba(106, 130, 251, 0.28);
    color: rgba(255,255,255,0.55);
    transition: border-color 0.25s, color 0.25s;
}

.about-tags span:hover {
    border-color: rgba(106, 130, 251, 0.7);
    color: rgba(255,255,255,0.9);
}

@media (max-width: 1000px) {
    .about-inner {
        grid-template-columns: 280px 1fr;
        gap: 3rem;
    }

    .about-text h2 {
        font-size: 2.8rem;
    }
}

@media (max-width: 760px) {
    .about-inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .about-photo-wrap {
        position: static;
        max-width: 320px;
        margin: 0 auto;
    }

    .about-text h2 {
        font-size: 2.4rem;
    }

    #about {
        padding: 4rem 2rem;
    }
}

/* =======================================
   CONTACT SECTION — with form
======================================= */
#contact {
    padding: 6rem 2rem;
    background: linear-gradient(160deg, #1a1a1a 0%, #111 100%);
    position: relative;
}

#contact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 2px;
    background: var(--gradient-accent);
    border-radius: 2px;
    opacity: 0.6;
}

.contact-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 5rem;
    align-items: start;
}

.contact-text-col {
    padding-top: 0.5rem;
}

#contact h2 {
    font-size: 2.8rem;
    line-height: 1.15;
    margin-bottom: 1.25rem;
    background: none;
    -webkit-text-fill-color: #fff;
    color: #fff;
}

#contact .contact-text-col > p {
    font-family: var(--font-body);
    color: var(--secondary-text);
    line-height: 1.75;
    font-size: 1rem;
    margin-bottom: 0;
}

#contact .email-fallback {
    margin-top: 1.25rem;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.35);
    font-family: var(--font-body);
}

#contact .email-fallback strong {
    color: rgba(255,255,255,0.65);
    font-weight: 400;
}

/* Form */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.form-group label {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
}

.form-group input,
.form-group select,
.form-group textarea {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text-color);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 0.8rem 1rem;
    outline: none;
    transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    resize: none;
}

.form-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.35)' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 1rem;
    padding-right: 2.5rem;
}

.form-group select option {
    background: #1f1f1f;
    color: var(--text-color);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(255,255,255,0.2);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: rgba(106, 130, 251, 0.5);
    background: rgba(106, 130, 251, 0.05);
    box-shadow: 0 0 0 3px rgba(106, 130, 251, 0.1);
}

.form-group textarea {
    min-height: 130px;
}

.form-submit-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 2rem;
    font-size: 0.9rem;
    position: relative;
    overflow: hidden;
}

.btn-spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

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

.form-submit-btn.loading .btn-spinner { display: block; }
.form-submit-btn.loading .btn-text { opacity: 0.7; }

.form-success-msg {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: #7fffb4;
    min-height: 1.4em;
    margin-top: -0.5rem;
}

@media (max-width: 860px) {
    .contact-inner {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    #contact h2 {
        font-size: 2.2rem;
    }
}

@media (max-width: 500px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

/* =======================================
   LARGE / 4K SCREEN FONT SCALING
   Scales up body text on 1920px+ displays
   so copy stays comfortable to read.
======================================= */
@media (min-width: 1920px) {
    body {
        font-size: 1.1rem;
    }
    .projekte-card-excerpt  { font-size: 0.95rem; }
    .step-card p            { font-size: 1rem; }
    .hero-content p,
    .hero-content .hero-subtitle { font-size: 1.15rem; }
    #portfolio-modal-description { font-size: 1.05rem; }
    .modal-text p           { font-size: 1.05rem; }
    #steps .steps-intro     { font-size: 1.1rem; }
    .projekte-card-body     { font-size: 1rem; }
    .footer-nav li a,
    .footer-nav .fnx-cookie-settings-btn { font-size: 0.9rem; }
    .footer-nav p           { font-size: 0.85rem; }
    .legal-container p      { font-size: 1.05rem; }
}

@media (min-width: 2560px) {
    body {
        font-size: 1.2rem;
    }
    .projekte-card-excerpt  { font-size: 1.05rem; }
    .step-card p            { font-size: 1.1rem; }
    .hero-content p,
    .hero-content .hero-subtitle { font-size: 1.25rem; }
    #portfolio-modal-description { font-size: 1.15rem; }
    .modal-text p           { font-size: 1.15rem; }
    #steps .steps-intro     { font-size: 1.2rem; }
    .legal-container p      { font-size: 1.15rem; }
}

/* =======================================
   16. MAIN-SITE REFRESH — VIDEO-FIRST HERO
   Added for the Framenex homepage roadmap.
======================================= */

/* Keyboard navigation */
.skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 20000;
    padding: 0.7rem 1rem;
    border-radius: 8px;
    background: #fff;
    color: #111;
    font-family: var(--font-body);
    font-weight: 600;
    transform: translateY(-160%);
    transition: transform 0.2s ease;
}

.skip-link:focus {
    transform: translateY(0);
}

/* More robust header sizing, including 320px-wide devices */
.navbar {
    height: var(--nav-height);
    padding: 0.7rem clamp(1rem, 3vw, 3rem);
    gap: 1rem;
}

.navbar > .logo {
    width: clamp(165px, 18vw, 260px);
    height: auto;
    flex: 0 0 auto;
}

.navbar > .logo img {
    display: block;
    width: 100%;
    height: auto;
}

.nav-toggle {
    width: 44px;
    height: 44px;
    min-width: 44px;
    flex: 0 0 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    color: #fff;
}

.nav-toggle span {
    left: 10px;
    width: 24px;
    height: 2px;
}

.nav-toggle span:nth-child(1) { top: 12px; }
.nav-toggle span:nth-child(2) { top: 21px; transform: none; }
.nav-toggle span:nth-child(3) { bottom: 12px; }
.nav-toggle.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-toggle.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.nav-toggle:focus-visible,
.portfolio-item:focus-visible,
.card:focus-visible {
    outline: 3px solid var(--accent-mid);
    outline-offset: 4px;
}

body.nav-open {
    overflow: hidden;
}

/* One immersive hero: existing video + the core business message */
#hero.home-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    height: auto;
    padding: calc(var(--nav-height) + clamp(2rem, 6vh, 5rem)) clamp(1.25rem, 6vw, 6rem) clamp(5.5rem, 9vh, 8rem);
    overflow: hidden;
    background: #080808;
}

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

.hero-media {
    z-index: -3;
    overflow: hidden;
    background: #0a0a0a;
}

.home-hero #bg-video {
    position: absolute;
    inset: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    transform: none;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.hero-shade {
    z-index: -2;
    background:
        linear-gradient(90deg, rgba(5,5,7,0.94) 0%, rgba(5,5,7,0.78) 38%, rgba(5,5,7,0.26) 72%, rgba(5,5,7,0.42) 100%),
        linear-gradient(180deg, rgba(5,5,7,0.50) 0%, transparent 28%, rgba(5,5,7,0.28) 70%, rgba(5,5,7,0.95) 100%);
}

.home-hero .hero-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0;
    text-align: left;
    border: 0;
    border-radius: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.home-hero .hero-content h1,
.home-hero .hero-content p {
    min-height: 0;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0 0 1.2rem;
    color: rgba(255,255,255,0.76);
    font-family: var(--font-body);
    font-size: clamp(0.72rem, 1vw, 0.86rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.hero-eyebrow::before {
    content: '';
    width: 42px;
    height: 1px;
    background: var(--gradient-accent);
}

.home-hero .hero-content h1 {
    max-width: 1050px;
    margin: 0;
    color: #fff;
    background: none;
    -webkit-text-fill-color: currentColor;
    font-size: clamp(2.75rem, 5.7vw, 5.3rem);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: -0.025em;
    text-wrap: balance;
    text-shadow: 0 3px 30px rgba(0,0,0,0.45);
}

.hero-title-accent {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.home-hero .hero-subtitle {
    max-width: 790px;
    margin: 1.5rem 0 0;
    color: rgba(255,255,255,0.90);
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
    font-weight: 400;
    line-height: 1.38;
    text-wrap: balance;
}

.home-hero .hero-assurance {
    max-width: 730px;
    margin: 1rem 0 0;
    color: rgba(255,255,255,0.62);
    font-size: clamp(0.88rem, 1.2vw, 1rem);
    line-height: 1.65;
}

.home-hero .hero-assurance strong {
    color: rgba(255,255,255,0.90);
    font-weight: 600;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 1.8rem;
}

.hero-actions .btn-primary,
.hero-actions .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.82rem 1.7rem;
}

.hero-secondary {
    border-color: rgba(255,255,255,0.38);
    color: #fff;
    background: rgba(10,10,10,0.22);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.hero-secondary:hover {
    border-color: transparent;
}

.hero-services {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.3rem;
    max-width: 800px;
    margin: 1.65rem 0 0;
    padding: 0;
    list-style: none;
}

.hero-services li {
    position: relative;
    padding-left: 0.9rem;
    color: rgba(255,255,255,0.62);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.hero-services li::before {
    content: '';
    position: absolute;
    top: 0.58em;
    left: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent-mid);
    box-shadow: 0 0 12px rgba(106,130,251,0.75);
}

.hero-scroll {
    position: absolute;
    z-index: 2;
    right: clamp(1.25rem, 4vw, 4rem);
    bottom: 2.2rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: rgba(255,255,255,0.52);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.hero-scroll-line {
    position: relative;
    display: block;
    width: 54px;
    height: 1px;
    overflow: hidden;
    background: rgba(255,255,255,0.28);
}

.hero-scroll-line::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-accent);
    transform: translateX(-100%);
    animation: heroScrollLine 2.3s ease-in-out infinite;
}

@keyframes heroScrollLine {
    0%, 20% { transform: translateX(-100%); }
    65%, 100% { transform: translateX(100%); }
}

/* Compact, keyword-rich production overview without keyword stuffing */
#production-intro {
    position: relative;
    overflow: hidden;
    padding: clamp(5rem, 9vw, 8rem) clamp(1.25rem, 5vw, 4rem);
    background:
        radial-gradient(circle at 90% 10%, rgba(142,84,233,0.10), transparent 32%),
        linear-gradient(150deg, #151515 0%, #0d0d0d 100%);
}

#production-intro::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: min(92%, 1200px);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(106,130,251,0.45), transparent);
}

.production-inner {
    position: relative;
    z-index: 1;
    max-width: 1240px;
    margin: 0 auto;
}

.production-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: end;
    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.production-heading h2 {
    max-width: 720px;
    margin-top: 0.65rem;
    color: #fff;
    font-size: clamp(2.35rem, 4.5vw, 4.25rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.production-lead p {
    color: var(--secondary-text);
    font-size: 1rem;
    line-height: 1.8;
}

.production-lead .production-region {
    margin-top: 1rem;
    color: rgba(255,255,255,0.48);
    font-size: 0.86rem;
}

.production-region strong {
    color: rgba(255,255,255,0.78);
    font-weight: 500;
}

.production-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.production-card {
    position: relative;
    min-height: 290px;
    padding: clamp(1.6rem, 3vw, 2.4rem);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.075);
    border-radius: var(--radius-lg);
    background: linear-gradient(145deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018));
    box-shadow: 0 18px 50px rgba(0,0,0,0.16);
    transition: transform 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}

.production-card::after {
    content: '';
    position: absolute;
    top: -70px;
    right: -70px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(106,130,251,0.13), transparent 70%);
    pointer-events: none;
}

.production-card--featured {
    border-color: rgba(106,130,251,0.24);
    background: linear-gradient(145deg, rgba(71,118,230,0.105), rgba(255,255,255,0.02) 58%);
}

.production-card:hover {
    transform: translateY(-5px);
    border-color: rgba(106,130,251,0.30);
    background: linear-gradient(145deg, rgba(255,255,255,0.065), rgba(255,255,255,0.025));
}

.production-card-number {
    display: block;
    margin-bottom: 1.65rem;
    color: rgba(255,255,255,0.24);
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
}

.production-card h3 {
    max-width: 480px;
    color: #fff;
    font-size: clamp(1.65rem, 2.6vw, 2.3rem);
    line-height: 1.08;
}

.production-card > p {
    max-width: 580px;
    margin-top: 0.8rem;
    color: rgba(255,255,255,0.57);
    font-size: 0.93rem;
    line-height: 1.7;
}

.production-card > p strong {
    color: rgba(255,255,255,0.82);
    font-weight: 500;
}

.production-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 1.6rem 0 0;
    padding: 0;
    list-style: none;
}

.production-keywords li {
    padding: 0.36rem 0.72rem;
    border: 1px solid rgba(106,130,251,0.19);
    border-radius: 999px;
    color: rgba(255,255,255,0.53);
    background: rgba(0,0,0,0.13);
    font-size: 0.69rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.035em;
}

/* Existing service preview, aligned with the refreshed positioning */
#services .section-eyebrow {
    display: block;
    margin-bottom: 0.5rem;
}

#services h2 {
    margin-bottom: 0.8rem;
}

#services .section-intro {
    max-width: 680px;
    margin: 0 auto;
    color: var(--secondary-text);
    font-size: 0.98rem;
    line-height: 1.7;
}

#services > .service-cards {
    margin-top: 2.5rem;
}

.service-cards .card {
    width: 100%;
    color: var(--text-color);
    font: inherit;
    text-align: center;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.service-cards .card h3 {
    color: #fff;
}

/* Partner files stay unchanged; their transparent canvases are normalized here. */
.partner-logos {
    gap: 0.8rem;
}

.partner-logos .partner-logo-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(350px, 100%);
    height: 180px;
    overflow: hidden;
    border-radius: 14px;
}

.partner-logos .partner-logo {
    flex: 0 0 auto;
    max-width: none;
    object-fit: contain;
    filter: brightness(1);
}

.partner-logos .partner-logo--rubner {
    width: 320px;
    height: auto;
}

.partner-logos .partner-logo--square {
    width: 395px;
    height: 395px;
}

/* Portrait component prepared for matching B&W and colour files. */
.about-portrait,
.about-photo-placeholder {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--radius-lg);
    background: linear-gradient(145deg, #1e1e1e 0%, #151515 100%);
}

.about-photo-placeholder::after {
    content: none;
}

.about-photo-status {
    position: absolute;
    bottom: 1.1rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.24);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    white-space: nowrap;
}

.about-portrait-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: opacity 0.65s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.about-portrait-image--bw {
    opacity: 1;
}

.about-portrait-image--color {
    opacity: 0;
}

.about-portrait.has-portrait:hover .about-portrait-image--bw,
.about-portrait.has-portrait:focus .about-portrait-image--bw,
.about-portrait.has-portrait.color-visible .about-portrait-image--bw {
    opacity: 0;
}

.about-portrait.has-portrait:hover .about-portrait-image--color,
.about-portrait.has-portrait:focus .about-portrait-image--color,
.about-portrait.has-portrait.color-visible .about-portrait-image--color {
    opacity: 1;
    transform: scale(1.015);
}

.about-portrait-hint {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 3;
    padding: 0.35rem 0.65rem;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px;
    color: rgba(255,255,255,0.72);
    background: rgba(8,8,8,0.48);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#contact .email-fallback a {
    color: rgba(255,255,255,0.72);
    text-decoration: underline;
    text-decoration-color: rgba(106,130,251,0.55);
    text-underline-offset: 3px;
}

#contact .email-fallback a:hover {
    color: #fff;
}

.form-success-msg.is-success { color: #7fffb4; }
.form-success-msg.is-error { color: #ff9292; }

.form-submit-btn:disabled {
    cursor: wait;
    opacity: 0.78;
}

@media (max-width: 960px) {
    .hero-shade {
        background:
            linear-gradient(90deg, rgba(5,5,7,0.91) 0%, rgba(5,5,7,0.65) 72%, rgba(5,5,7,0.45) 100%),
            linear-gradient(180deg, rgba(5,5,7,0.50) 0%, transparent 24%, rgba(5,5,7,0.43) 68%, rgba(5,5,7,0.96) 100%);
    }

    .production-heading {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        align-items: start;
    }

    .production-lead {
        max-width: 720px;
    }

    .partner-logos .partner-logo-frame {
        width: min(310px, 100%);
        height: 160px;
    }

    .partner-logos .partner-logo--rubner {
        width: 280px;
    }

    .partner-logos .partner-logo--square {
        width: 346px;
        height: 346px;
    }
}

@media (max-width: 768px) {
    .navbar {
        background: rgba(10,10,10,0.76);
    }

    #hero.home-hero {
        align-items: center;
        padding: calc(var(--nav-height) + 2rem) 1.25rem 5rem;
    }

    .home-hero #bg-video {
        object-position: center;
    }

    .hero-shade {
        background:
            linear-gradient(180deg, rgba(5,5,7,0.55) 0%, rgba(5,5,7,0.40) 22%, rgba(5,5,7,0.64) 62%, rgba(5,5,7,0.98) 100%),
            linear-gradient(90deg, rgba(5,5,7,0.63), rgba(5,5,7,0.25));
    }

    .home-hero .hero-content h1 {
        font-size: clamp(2.45rem, 11.5vw, 4.3rem);
        line-height: 1;
    }

    .home-hero .hero-subtitle {
        font-size: clamp(1.16rem, 5.1vw, 1.5rem);
    }

    .hero-scroll {
        display: none;
    }

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

    .production-card {
        min-height: 0;
    }

    .partner-logos {
        gap: 0;
    }

    .partner-logos .partner-logo-frame {
        width: min(300px, 100%);
        height: 150px;
    }

    .partner-logos .partner-logo--rubner {
        width: 270px;
    }

    .partner-logos .partner-logo--square {
        width: 333px;
        height: 333px;
    }
}

@media (max-width: 430px) {
    .navbar > .logo {
        width: 172px;
        height: auto;
    }

    .hero-eyebrow {
        margin-bottom: 0.95rem;
        font-size: 0.67rem;
        letter-spacing: 0.12em;
    }

    .hero-eyebrow::before {
        width: 28px;
    }

    .home-hero .hero-content h1 {
        font-size: clamp(2.25rem, 11.7vw, 3.15rem);
    }

    .home-hero .hero-subtitle {
        margin-top: 1.15rem;
        font-size: 1.08rem;
    }

    .home-hero .hero-assurance {
        font-size: 0.82rem;
        line-height: 1.55;
    }

    .hero-actions {
        gap: 0.65rem;
        margin-top: 1.35rem;
    }

    .hero-actions .btn-primary,
    .hero-actions .btn-secondary {
        min-height: 46px;
        padding: 0.72rem 1.25rem;
        font-size: 0.82rem;
    }

    .hero-services {
        gap: 0.45rem 0.9rem;
        margin-top: 1.3rem;
    }

    .hero-services li {
        font-size: 0.67rem;
    }

    #production-intro {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .production-card {
        padding: 1.45rem;
        border-radius: 16px;
    }

    .production-keywords li {
        font-size: 0.65rem;
    }

    .partner-logos .partner-logo-frame {
        width: min(270px, 100%);
        height: 140px;
    }

    .partner-logos .partner-logo--rubner {
        width: 243px;
    }

    .partner-logos .partner-logo--square {
        width: 300px;
        height: 300px;
    }
}

/* Keep the complete core message visible on short landscape/small screens. */
@media (max-height: 700px) and (max-width: 768px) {
    #hero.home-hero {
        padding-top: calc(var(--nav-height) + 1.25rem);
        padding-bottom: 2rem;
    }

    .home-hero .hero-assurance,
    .hero-services {
        display: none;
    }

    .home-hero .hero-content h1 {
        font-size: clamp(2rem, 9.8vw, 3.1rem);
    }

    .home-hero .hero-subtitle {
        margin-top: 0.85rem;
    }

    .hero-actions {
        margin-top: 1rem;
    }
}

@media (hover: none) {
    .about-portrait.has-portrait .about-portrait-image--bw {
        opacity: 0;
    }

    .about-portrait.has-portrait .about-portrait-image--color {
        opacity: 1;
    }

    .about-portrait-hint {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.home-hero #bg-video {
    opacity: 0;
    transition: opacity 0.7s ease;
}

.home-hero #bg-video.is-ready {
    opacity: 1;
}

.hero-poster,
.hero-poster img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.hero-poster img {
    object-fit: cover;
    object-position: center;
}

/* Use the document as the scroll container and keep the closed mobile menu inside the viewport. */
html,
body {
    height: auto;
    min-height: 100%;
}

@media (max-width: 768px) {
    .nav-menu {
        inset: 0;
        width: 100%;
        height: 100svh;
        transform: none;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    }

    .nav-menu.active {
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition-delay: 0s;
    }
}

/* Prevent long service labels and legacy card minimums from widening small screens. */
.service-cards .card {
    min-width: 0;
}

#services h2 {
    overflow-wrap: anywhere;
}

@media (max-width: 430px) {
    #services h2 {
        font-size: clamp(2rem, 9vw, 2.35rem);
        line-height: 1.05;
    }
}

/* =======================================
   17. FRAMENEX V4 — EDITORIAL SERVICE SYSTEM
   Clean typography, image-led services, dedicated pages.
======================================= */
:root {
    --accent-start: #7a8cff;
    --accent-mid: #8797ff;
    --accent-end: #a38cff;
    --gradient-accent: linear-gradient(115deg, #718cff 0%, #9a82ff 100%);
    --dark-bg: #0b0b0c;
    --dark-bg-alt: #111113;
    --text-color: #f0f0f2;
    --secondary-text: #9d9da3;
    --font-display: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --nav-height: 78px;
    --radius-base: 4px;
    --radius-lg: 6px;
}

.site-v4 {
    min-height: 100%;
    color: var(--text-color);
    background: #0b0b0c;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.site-v4 h1,
.site-v4 h2,
.site-v4 h3,
.site-v4 h4,
.site-v4 .about-lead,
.site-v4 .hero-subtitle,
.site-v4 .projekte-card-title,
.site-v4 .hl-caption p {
    font-family: var(--font-display);
    font-style: normal;
    letter-spacing: -0.035em;
}

.site-v4 h1,
.site-v4 h2,
.site-v4 h3 { text-wrap: balance; }
.site-v4 img { max-width: 100%; }
.site-v4 a { color: inherit; }
.site-v4 .content { overflow: clip; }
.site-v4 .btn-animated-border::after { display: none; }
.site-v4 .form-botcheck { position: absolute !important; left: -9999px !important; opacity: 0 !important; }

.section-shell {
    width: min(1240px, calc(100% - 4rem));
    margin-inline: auto;
}

.section-eyebrow {
    display: block;
    margin: 0 0 1rem;
    color: #8f9cff;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.editorial-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
    gap: clamp(2rem, 7vw, 7rem);
    align-items: end;
    margin-bottom: clamp(3rem, 7vw, 6rem);
}

.editorial-heading h2 {
    max-width: 800px;
    margin: 0;
    color: #fff;
    font-size: clamp(2.6rem, 5vw, 5.25rem);
    font-weight: 570;
    line-height: 0.98;
}

.editorial-heading > p,
.editorial-heading > div + p {
    max-width: 560px;
    margin: 0;
    color: var(--secondary-text);
    font-size: 1rem;
    line-height: 1.75;
}

.editorial-heading--compact h2 { font-size: clamp(2.35rem, 4.2vw, 4.4rem); }

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    width: fit-content;
    margin-top: 1.35rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.33);
    color: #fff;
    font-size: 0.84rem;
    font-weight: 620;
    letter-spacing: 0.04em;
    transition: border-color 0.2s ease, color 0.2s ease, gap 0.2s ease;
}
.text-link:hover,
.text-link:focus-visible { color: #aeb7ff; border-color: #aeb7ff; gap: 0.8rem; }
.text-link--strong { margin-top: 1.5rem; font-size: 0.9rem; }

/* Header */
.site-v4 .navbar {
    height: var(--nav-height);
    padding: 0 2.25rem;
    gap: 2rem;
    background: rgba(8,8,9,0.82);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    box-shadow: none;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.site-v4 .navbar > .logo { width: clamp(180px, 16vw, 230px); height: auto; }
.site-v4 .nav-menu ul { gap: 0.2rem; align-items: center; }
.site-v4 .nav-menu li a {
    padding: 0.65rem 0.8rem;
    border-radius: 0;
    color: rgba(255,255,255,0.68);
    font-size: 0.78rem;
    font-weight: 590;
    letter-spacing: 0.045em;
    text-transform: none;
}
.site-v4 .nav-menu li a::after {
    bottom: 0.35rem;
    width: calc(100% - 1.6rem);
    height: 1px;
    background: #9ba6ff;
}
.site-v4 .nav-menu li a[aria-current="page"],
.site-v4 .nav-menu li a:hover,
.site-v4 .nav-menu li a:focus-visible { color: #fff; }
.site-v4 .nav-menu li:last-child a {
    margin-left: 0.5rem;
    padding: 0.62rem 1rem;
    border: 1px solid rgba(255,255,255,0.28);
}
.site-v4 .nav-menu li:last-child a::after { display: none; }
.site-v4 .nav-menu li:last-child a:hover { border-color: #a8b1ff; background: rgba(126,145,255,0.08); }

/* Buttons */
.site-v4 .btn-primary,
.site-v4 .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.75rem 1.35rem;
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 650;
    letter-spacing: 0.045em;
    box-shadow: none;
    transform: none;
}
.site-v4 .btn-primary { background: #8796ff; border: 1px solid #8796ff; color: #09090a; }
.site-v4 .btn-primary:hover { background: #a5afff; border-color: #a5afff; color: #080809; box-shadow: none; transform: none; }
.site-v4 .btn-secondary { border: 1px solid rgba(255,255,255,0.34); color: #fff; background: rgba(0,0,0,0.10); }
.site-v4 .btn-secondary:hover { border-color: #a5afff; color: #fff; background: rgba(135,150,255,0.1); box-shadow: none; transform: none; }

/* Homepage hero */
.site-v4 #hero.home-hero {
    min-height: 100svh;
    padding: calc(var(--nav-height) + clamp(3rem, 7vh, 6rem)) clamp(1.5rem, 6vw, 6rem) clamp(5rem, 9vh, 7rem);
}
.site-v4 .hero-shade {
    background:
        linear-gradient(90deg, rgba(4,4,5,0.96) 0%, rgba(4,4,5,0.82) 42%, rgba(4,4,5,0.34) 72%, rgba(4,4,5,0.55) 100%),
        linear-gradient(180deg, rgba(4,4,5,0.58) 0%, transparent 30%, rgba(4,4,5,0.38) 70%, rgba(4,4,5,0.96) 100%);
}
.site-v4 .home-hero .hero-content { max-width: 1240px; }
.site-v4 .hero-eyebrow { color: rgba(255,255,255,0.68); font-size: 0.7rem; letter-spacing: 0.17em; }
.site-v4 .hero-eyebrow::before { width: 34px; background: #95a1ff; }
.site-v4 .home-hero .hero-content h1 {
    max-width: 1030px;
    color: #fff;
    font-size: clamp(3.25rem, 6.3vw, 6.25rem);
    font-weight: 560;
    line-height: 0.96;
    letter-spacing: -0.055em;
    text-shadow: 0 2px 30px rgba(0,0,0,0.45);
}
.site-v4 .hero-brand { color: #a6afff; }
.site-v4 .hero-title-accent { color: inherit; background: none; -webkit-text-fill-color: currentColor; }
.site-v4 .home-hero .hero-subtitle {
    max-width: 760px;
    margin-top: 1.45rem;
    color: rgba(255,255,255,0.86);
    font-size: clamp(1.12rem, 1.8vw, 1.45rem);
    font-weight: 430;
    line-height: 1.45;
    letter-spacing: -0.018em;
}
.site-v4 .home-hero .hero-assurance { max-width: 720px; margin-top: 0.95rem; color: rgba(255,255,255,0.58); font-size: 0.9rem; }
.site-v4 .home-hero .hero-assurance strong { color: #fff; }
.site-v4 .hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.8rem; }
.site-v4 .hero-services {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 2.2rem;
    padding: 0;
    list-style: none;
}
.site-v4 .hero-services li {
    padding: 0 1rem;
    border-left: 1px solid rgba(255,255,255,0.22);
    color: rgba(255,255,255,0.62);
    font-size: 0.73rem;
    font-weight: 580;
    letter-spacing: 0.06em;
}
.site-v4 .hero-services li:first-child { padding-left: 0; border-left: 0; }
.site-v4 .hero-scroll { color: rgba(255,255,255,0.48); }
.site-v4 .hero-scroll-line { background: rgba(255,255,255,0.3); }

/* Homepage services: image-led and editorial */
.home-services {
    padding: clamp(6rem, 11vw, 10rem) 0;
    background: #0b0b0c;
}
.service-feature {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.75fr);
    gap: clamp(2.25rem, 6vw, 6rem);
    align-items: center;
    padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(5rem, 8vw, 7rem);
    border-top: 1px solid rgba(255,255,255,0.14);
}
.service-feature-media { min-width: 0; overflow: hidden; background: #111; }
.service-feature-media img { display: block; width: 100%; aspect-ratio: 16/8.5; object-fit: cover; transition: transform 0.8s cubic-bezier(.2,.7,.2,1); }
.service-feature:hover .service-feature-media img { transform: scale(1.018); }
.service-feature-copy { max-width: 470px; }
.service-index { margin: 0 0 0.8rem; color: #8d8d94; font-size: 0.7rem; font-weight: 650; letter-spacing: 0.13em; text-transform: uppercase; }
.service-feature h3,
.service-preview h3 { margin: 0; color: #fff; font-size: clamp(2rem, 3.4vw, 3.6rem); font-weight: 560; line-height: 1; }
.service-feature-copy > p:not(.service-index):not(.service-note) { margin-top: 1.25rem; color: #aaaab0; line-height: 1.75; }
.service-note { margin-top: 1rem; color: #fff; font-size: 0.87rem; font-weight: 620; }
.service-preview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3.5vw, 3.5rem); }
.service-preview { padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,0.14); }
.service-preview--offset { margin-top: clamp(2rem, 7vw, 6rem); }
.service-preview-media { display: block; margin-bottom: 1.5rem; overflow: hidden; background: #111; }
.service-preview-media img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform 0.75s cubic-bezier(.2,.7,.2,1), filter 0.4s ease; }
.service-preview-media:hover img { transform: scale(1.025); filter: brightness(1.04); }
.service-preview h3 { font-size: clamp(1.7rem, 2.5vw, 2.5rem); }
.service-preview h3 a:hover { color: #aeb6ff; }
.service-preview > p:not(.service-index) { margin: 1rem 0 0; color: #99999f; font-size: 0.93rem; line-height: 1.72; }
.section-end-link { display: flex; justify-content: flex-end; margin-top: clamp(3rem, 6vw, 5rem); }

/* Highlights */
.site-v4 #highlights { padding: clamp(6rem, 10vw, 9rem) 0; background: #111113; }
.site-v4 .highlights-header { width: min(1240px, calc(100% - 4rem)); max-width: none; margin-bottom: 3rem; padding: 0; }
.site-v4 .highlights-header-text h2 { max-width: 760px; color: #fff; font-size: clamp(2.5rem, 4.5vw, 4.8rem); font-weight: 560; line-height: 0.98; }
.site-v4 .highlights-header-text p { max-width: 620px; color: #929298; }
.site-v4 .highlights-link { border: 0; border-bottom: 1px solid rgba(255,255,255,0.3); border-radius: 0; padding: 0 0 0.25rem; }
.site-v4 .highlights-link:hover { background: none; border-color: #aeb6ff; color: #aeb6ff; }
.site-v4 .highlights-strip { width: min(1240px, calc(100% - 4rem)); max-width: none; gap: 1px; border-radius: 0; box-shadow: none; background: rgba(255,255,255,0.1); }
.site-v4 .hl-item { aspect-ratio: 4/3; }
.site-v4 .hl-item img { object-position: center; filter: brightness(0.74) saturate(0.88); }
.site-v4 .hl-caption { opacity: 1; transform: none; padding: 1.5rem; }
.site-v4 .hl-caption span { color: #abb4ff; background: none; -webkit-text-fill-color: currentColor; }
.site-v4 .hl-caption p { font-size: 1.2rem; font-weight: 570; }

/* Process without cards */
.process-editorial { padding: clamp(6rem, 10vw, 9rem) 0; background: #0b0b0c; }
.process-list { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid rgba(255,255,255,0.14); }
.process-list li {
    display: grid;
    grid-template-columns: 80px minmax(230px, 0.55fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: baseline;
    padding: 1.7rem 0;
    border-top: 1px solid rgba(255,255,255,0.14);
}
.process-number { color: #8f9cff; font-size: 0.72rem; font-weight: 650; letter-spacing: 0.12em; }
.process-list h3 { margin: 0; color: #fff; font-size: clamp(1.3rem, 2vw, 1.85rem); font-weight: 560; }
.process-list p { max-width: 630px; margin: 0; color: #97979d; font-size: 0.94rem; }

/* Partners */
.partner-editorial { padding: clamp(5rem, 8vw, 7rem) 0; background: #111113; text-align: left; }
.site-v4 #partner h2 { margin: 0 0 3rem; color: #fff; background: none; -webkit-text-fill-color: currentColor; font-size: clamp(2.3rem, 4vw, 4rem); font-weight: 560; }
.site-v4 .partner-logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: rgba(255,255,255,0.10); }
.site-v4 .partner-logos .partner-logo-frame {
    width: 100%;
    height: 190px;
    border-radius: 0;
    background: #0d0d0e;
    opacity: 1;
    transition: background 0.25s ease;
}
.site-v4 .partner-logos .partner-logo-frame:hover { transform: none; background: #151517; }
.site-v4 .partner-logos .partner-logo--rubner { width: min(82%, 320px); }
.site-v4 .partner-logos .partner-logo--square { width: min(102%, 395px); height: auto; aspect-ratio: 1; }

/* About */
.site-v4 #about { padding: clamp(6rem, 11vw, 10rem) 0; background: #0b0b0c; }
.site-v4 #about::before { display: none; }
.site-v4 .about-inner { width: min(1160px, calc(100% - 4rem)); max-width: none; grid-template-columns: minmax(300px, 430px) minmax(0, 1fr); gap: clamp(3rem, 8vw, 8rem); align-items: center; }
.site-v4 .about-photo-wrap { position: static; max-width: 430px; }
.site-v4 .about-portrait,
.site-v4 .about-photo-placeholder { border-radius: 0; border-color: rgba(255,255,255,0.12); }
.site-v4 .about-photo-initials { color: rgba(255,255,255,0.14); background: none; -webkit-text-fill-color: currentColor; font-size: clamp(4rem, 9vw, 7rem); font-weight: 520; }
.site-v4 .about-photo-status { color: rgba(255,255,255,0.38); }
.site-v4 .about-text h2 { margin: 0 0 1rem; font-size: clamp(3rem, 6vw, 6rem); font-weight: 560; line-height: 0.95; }
.site-v4 .about-lead { margin: 0 0 2rem; color: #b8b8bd; font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 450; line-height: 1.45; }
.site-v4 .about-text p { max-width: 690px; color: #9b9ba1; line-height: 1.8; }
.about-facts { margin: 2.5rem 0 0; border-bottom: 1px solid rgba(255,255,255,0.14); }
.about-facts > div { display: grid; grid-template-columns: 145px 1fr; gap: 1.5rem; padding: 0.9rem 0; border-top: 1px solid rgba(255,255,255,0.14); }
.about-facts dt { color: #73737a; font-size: 0.72rem; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; }
.about-facts dd { margin: 0; color: #e8e8ea; font-size: 0.9rem; }

/* Contact */
.site-v4 #contact { padding: clamp(6rem, 10vw, 9rem) 0; background: #111113; }
.site-v4 #contact::before { display: none; }
.site-v4 .contact-inner { width: min(1100px, calc(100% - 4rem)); max-width: none; grid-template-columns: 0.8fr 1.2fr; gap: clamp(3rem, 8vw, 7rem); }
.site-v4 #contact h2 { margin-bottom: 1.25rem; font-size: clamp(2.8rem, 5vw, 5rem); font-weight: 560; line-height: 0.98; }
.site-v4 #contact .contact-text-col > p { color: #99999f; }
.site-v4 .contact-form { gap: 1.15rem; }
.site-v4 .form-group input,
.site-v4 .form-group select,
.site-v4 .form-group textarea { border-radius: 0; background: rgba(255,255,255,0.025); border-color: rgba(255,255,255,0.16); }
.site-v4 .form-group input:focus,
.site-v4 .form-group select:focus,
.site-v4 .form-group textarea:focus { border-color: #96a3ff; box-shadow: 0 0 0 2px rgba(135,150,255,0.12); }
.site-v4 .form-submit-btn { align-self: flex-start; }

/* Footer */
.site-footer { padding: 4.5rem 2rem 1.5rem; background: #080809; border-top: 1px solid rgba(255,255,255,0.1); }
.site-footer-grid { width: min(1240px, 100%); margin: 0 auto; display: grid; grid-template-columns: 1.6fr repeat(3, 0.8fr); gap: clamp(2rem, 5vw, 5rem); }
.site-footer-brand img { width: min(220px, 100%); height: auto; }
.site-footer-brand p { max-width: 360px; margin-top: 1.25rem; color: #77777e; font-size: 0.85rem; line-height: 1.7; }
.site-footer-column { display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem; }
.site-footer-title { margin: 0 0 0.5rem; color: #f0f0f2; font-size: 0.72rem; font-weight: 660; letter-spacing: 0.12em; text-transform: uppercase; }
.site-footer-column a,
.site-footer-column button { color: #7d7d84; font-size: 0.82rem; line-height: 1.5; text-align: left; }
.site-footer-column a:hover,
.site-footer-column button:hover { color: #fff; }
.site-footer-bottom { width: min(1240px, 100%); margin: 3.5rem auto 0; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,0.08); display: flex; justify-content: space-between; gap: 1.5rem; color: #5f5f66; font-size: 0.74rem; }
.site-footer-bottom nav { display: flex; gap: 1.25rem; }
.site-footer-bottom a:hover { color: #fff; }

/* Overview and detail heroes */
.page-hero,
.service-detail-hero {
    width: min(1240px, calc(100% - 4rem));
    margin-inline: auto;
    padding-top: calc(var(--nav-height) + clamp(4rem, 9vw, 8rem));
}
.page-hero { padding-bottom: clamp(4rem, 8vw, 7rem); }
.page-hero--overview { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.55fr); gap: clamp(3rem, 8vw, 8rem); align-items: end; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-bottom: clamp(3rem, 7vw, 6rem); color: #626269; font-size: 0.72rem; }
.breadcrumbs a:hover { color: #fff; }
.page-hero h1,
.service-detail-hero h1 { margin: 0; color: #fff; font-size: clamp(3.4rem, 7.3vw, 7.2rem); font-weight: 550; line-height: 0.92; letter-spacing: -0.06em; }
.page-hero-copy > p { max-width: 780px; margin: 1.6rem 0 0; color: #a1a1a7; font-size: clamp(1rem, 1.6vw, 1.22rem); line-height: 1.65; }
.page-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.booking-statement { margin: 0 0 0.25rem; padding: 1.5rem 0 0; border-top: 1px solid rgba(255,255,255,0.17); color: #9a9aa0; font-size: 0.92rem; line-height: 1.75; }
.booking-statement strong { color: #fff; }
.overview-image-strip { display: grid; grid-template-columns: 1.3fr 0.85fr 1fr; gap: 1px; background: rgba(255,255,255,0.1); }
.overview-image-strip figure { min-height: min(38vw, 520px); overflow: hidden; background: #111; }
.overview-image-strip img { display: block; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.78) saturate(0.88); }

/* Overview rows */
.service-overview-list { padding: clamp(6rem, 11vw, 10rem) 0; background: #0b0b0c; }
.overview-service-row { display: grid; grid-template-columns: 65px minmax(280px, 0.85fr) minmax(340px, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding: clamp(2.75rem, 5vw, 4.5rem) 0; border-top: 1px solid rgba(255,255,255,0.14); }
.overview-service-row:last-child { border-bottom: 1px solid rgba(255,255,255,0.14); }
.overview-service-number { align-self: start; padding-top: 0.35rem; color: #8d99ff; font-size: 0.72rem; font-weight: 650; letter-spacing: 0.12em; }
.overview-service-copy h3 { margin: 0; color: #fff; font-size: clamp(2.2rem, 4vw, 4rem); font-weight: 550; line-height: 0.98; }
.overview-service-copy > p { margin: 1.2rem 0 0; color: #99999f; }
.overview-service-meta { color: #717178 !important; font-size: 0.78rem; line-height: 1.7; }
.overview-service-image { display: block; overflow: hidden; background: #111; }
.overview-service-image img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: transform 0.7s cubic-bezier(.2,.7,.2,1); }
.overview-service-image:hover img { transform: scale(1.025); }

/* Service detail */
.service-detail-hero { display: grid; grid-template-columns: minmax(0, 0.94fr) minmax(420px, 1.06fr); gap: clamp(3rem, 7vw, 7rem); align-items: center; padding-bottom: clamp(5rem, 9vw, 8rem); }
.service-detail-copy .breadcrumbs { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.service-detail-hero h1 { font-size: clamp(3.3rem, 6.5vw, 6.6rem); }
.service-detail-intro { max-width: 700px; margin: 1.6rem 0 0; color: #d0d0d4; font-size: clamp(1.05rem, 1.65vw, 1.3rem); line-height: 1.62; }
.service-detail-assurance { max-width: 680px; margin: 1.25rem 0 0; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,0.15); color: #929298; font-size: 0.9rem; line-height: 1.7; }
.service-detail-assurance strong { color: #fff; }
.service-detail-visual { min-height: clamp(420px, 58vw, 720px); overflow: hidden; background: #111; }
.service-detail-visual img { display: block; width: 100%; height: 100%; min-height: inherit; object-fit: cover; filter: brightness(0.78) saturate(0.9); }

.service-content-section { padding: clamp(6rem, 10vw, 9rem) 0; background: #111113; }
.service-content-section--muted { background: #0b0b0c; }
.service-content-grid { display: grid; grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr); gap: clamp(3rem, 8vw, 8rem); align-items: start; }
.service-content-grid header { position: sticky; top: calc(var(--nav-height) + 2rem); }
.service-content-grid h2,
.drone-equipment-section h2,
.service-story-copy h2,
.related-services h2,
.cta-band h2 { margin: 0; color: #fff; font-size: clamp(2.5rem, 4.6vw, 4.8rem); font-weight: 550; line-height: 0.98; }
.service-content-grid header > p { margin: 1.5rem 0 0; color: #94949a; }
.service-type-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; margin: 0; padding: 0; border-bottom: 1px solid rgba(255,255,255,0.14); list-style: none; }
.service-type-list li { padding: 1rem 0; border-top: 1px solid rgba(255,255,255,0.14); color: #ededf0; font-size: clamp(1rem, 1.5vw, 1.25rem); font-weight: 530; }
.capability-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 4rem); margin: 0; padding: 0; border-bottom: 1px solid rgba(255,255,255,0.14); list-style: none; }
.capability-list li { display: flex; align-items: baseline; gap: 0.75rem; padding: 1rem 0; border-top: 1px solid rgba(255,255,255,0.14); color: #dedee2; font-size: 0.92rem; }
.capability-list li span { color: #74747b; font-size: 0.64rem; font-weight: 650; letter-spacing: 0.08em; }
.capability-list--short { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.legal-production-note { max-width: 900px; margin: 2.25rem 0 0; color: #8f8f95; font-size: 0.84rem; line-height: 1.75; }
.legal-production-note strong { color: #fff; }

.service-story-section,
.drone-equipment-section { display: grid; grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr); gap: clamp(3rem, 8vw, 8rem); align-items: center; width: min(1240px, calc(100% - 4rem)); margin-inline: auto; padding: clamp(6rem, 10vw, 9rem) 0; }
.service-story-copy p,
.drone-equipment-section div > p { max-width: 650px; margin: 1.4rem 0 0; color: #99999f; line-height: 1.8; }
.service-story-images { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,0.1); }
.service-story-images figure { min-height: 420px; overflow: hidden; background: #111; }
.service-story-images img { display: block; width: 100%; height: 100%; object-fit: cover; }
.drone-equipment-section { grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr); }
.drone-equipment-section figure { min-height: 560px; overflow: hidden; }
.drone-equipment-section img { display: block; width: 100%; height: 100%; min-height: inherit; object-fit: cover; }

.related-services { padding: clamp(6rem, 10vw, 9rem) 0; background: #111113; }
.related-services h2 { max-width: 720px; }
.related-links { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 3rem; background: rgba(255,255,255,0.12); }
.related-links a { position: relative; display: grid; gap: 0.7rem; min-height: 190px; padding: 1.7rem; background: #0d0d0e; transition: background 0.25s ease; }
.related-links a:hover { background: #161619; }
.related-links span { color: #8e99ff; font-size: 0.7rem; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; }
.related-links strong { max-width: 430px; color: #e8e8eb; font-size: clamp(1.1rem, 1.7vw, 1.45rem); font-weight: 520; line-height: 1.4; }
.related-links b { position: absolute; top: 1.5rem; right: 1.5rem; color: #8a8a91; font-weight: 400; }

.cta-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 0.55fr); gap: clamp(3rem, 8vw, 8rem); align-items: end; padding: clamp(6rem, 10vw, 9rem) max(2rem, calc((100vw - 1240px)/2)); background: #8796ff; color: #0a0a0b; }
.cta-band .section-eyebrow { color: rgba(0,0,0,0.58); }
.cta-band h2 { color: #09090a; }
.cta-band p { max-width: 520px; margin: 0; color: rgba(0,0,0,0.67); }
.cta-band .text-link { color: #080809; border-color: rgba(0,0,0,0.5); }
.cta-band .text-link:hover { color: #080809; border-color: #080809; }

/* Projects page refresh */
.site-v4.projects-page #projekte-header { padding: calc(var(--nav-height) + clamp(4rem, 8vw, 7rem)) 2rem clamp(3rem, 6vw, 5rem); background: #0b0b0c; }
.site-v4.projects-page #projekte-header h1 { color: #fff; background: none; -webkit-text-fill-color: currentColor; font-size: clamp(3.8rem, 8vw, 7.5rem); font-weight: 550; line-height: 0.92; }
.site-v4.projects-page .projekte-label { color: #8f9cff; }
.site-v4.projects-page .projekte-subtitle { max-width: 760px; color: #98989e; }
.site-v4.projects-page .filter-tabs-wrap { background: #0b0b0c; border-color: rgba(255,255,255,0.1); }
.site-v4.projects-page .filter-btn { border-radius: 0; color: #828289; }
.site-v4.projects-page .filter-btn.active { background: #8796ff; color: #09090a; }
.site-v4.projects-page #projekte-sektion { background: #111113; }
.site-v4.projects-page .projekte-grid { gap: clamp(2rem, 4vw, 4rem); }
.site-v4.projects-page .projekte-grid .portfolio-item { border-radius: 0; border: 0; background: transparent; box-shadow: none; }
.site-v4.projects-page .projekte-card-image { border-radius: 0; }
.site-v4.projects-page .projekte-card-image img { aspect-ratio: 16/10; object-fit: cover; }
.site-v4.projects-page .projekte-card-body { padding: 1.4rem 0 0; }
.site-v4.projects-page .projekte-card-title { color: #fff; font-size: clamp(1.7rem, 3vw, 2.8rem); font-weight: 550; }
.site-v4.projects-page .projekte-tag { color: #8f9cff; }
.site-v4.projects-page .projekte-card-excerpt { color: #919197; }
.site-v4.projects-page .portfolio-overlay { background: rgba(6,6,7,0.55); }
.site-v4.projects-page .portfolio-overlay span { border-radius: 0; background: #fff; color: #0b0b0c; }

/* Legal pages */
.site-v4.legal-page main { padding: calc(var(--nav-height) + 3rem) 2rem 5rem; background: #0b0b0c; }
.site-v4.legal-page .legal-container { max-width: 940px; margin: 0 auto; padding: 0; color: #a2a2a8; }
.site-v4.legal-page .legal-container h1 { margin-bottom: 2rem; color: #fff; font-size: clamp(3rem, 7vw, 6rem); font-weight: 550; }
.site-v4.legal-page .legal-container h2,
.site-v4.legal-page .legal-container h3,
.site-v4.legal-page .legal-container h4 { margin-top: 2.4rem; margin-bottom: 0.8rem; color: #fff; letter-spacing: -0.02em; }
.site-v4.legal-page .legal-container p,
.site-v4.legal-page .legal-container li { font-size: 0.92rem; line-height: 1.8; }
.site-v4.legal-page .legal-container a { color: #aab3ff; text-decoration: underline; text-underline-offset: 3px; }

/* Portfolio modal refinements */
.site-v4 .portfolio-info-side h2 { font-family: var(--font-display); }
.site-v4 .portfolio-slider-side .prev,
.site-v4 .portfolio-slider-side .next,
.site-v4 .portfolio-close-btn { border-radius: 2px; }

/* Responsive */
@media (max-width: 1040px) {
    .site-v4 .navbar { padding-inline: 1.25rem; }
    .service-feature { grid-template-columns: 1.25fr 0.75fr; gap: 3rem; }
    .service-detail-hero { grid-template-columns: 1fr 0.9fr; gap: 3rem; }
    .service-detail-visual { min-height: 560px; }
    .overview-service-row { grid-template-columns: 45px 0.85fr 1.15fr; gap: 2rem; }
    .site-footer-grid { grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2.5rem; }
}

@media (max-width: 820px) {
    .section-shell,
    .site-v4 .highlights-header,
    .site-v4 .highlights-strip,
    .site-v4 .about-inner,
    .site-v4 .contact-inner,
    .page-hero,
    .service-detail-hero,
    .service-story-section,
    .drone-equipment-section { width: min(100% - 2.5rem, 1240px); }
    .editorial-heading,
    .page-hero--overview,
    .service-detail-hero,
    .service-content-grid,
    .service-story-section,
    .drone-equipment-section,
    .cta-band { grid-template-columns: 1fr; gap: 2rem; }
    .editorial-heading { align-items: start; }
    .editorial-heading > p { max-width: 680px; }
    .site-v4 .nav-menu { background: rgba(8,8,9,0.98); }
    .site-v4 .nav-menu ul { gap: 0.2rem; }
    .site-v4 .nav-menu li a { font-size: 1.1rem; text-transform: none; }
    .site-v4 .nav-menu li:last-child a { margin-left: 0; border: 0; }
    .service-feature { grid-template-columns: 1fr; gap: 2rem; }
    .service-feature-copy { max-width: 700px; }
    .service-preview-grid { grid-template-columns: 1fr 1fr; }
    .service-preview--offset { margin-top: 0; }
    .service-preview:last-child { grid-column: 1 / -1; width: calc(50% - 0.75rem); }
    .process-list li { grid-template-columns: 50px minmax(190px, 0.55fr) minmax(0, 1fr); gap: 1rem; }
    .site-v4 .partner-logos { grid-template-columns: 1fr; }
    .site-v4 .partner-logos .partner-logo-frame { height: 165px; }
    .site-v4 .about-inner,
    .site-v4 .contact-inner { grid-template-columns: 1fr; }
    .site-v4 .about-photo-wrap { max-width: 420px; margin: 0; }
    .site-footer-grid { grid-template-columns: 1fr 1fr; }
    .site-footer-brand { grid-column: 1 / -1; }
    .overview-image-strip { grid-template-columns: 1fr 1fr; }
    .overview-image-strip figure:first-child { grid-column: 1 / -1; }
    .overview-image-strip figure { min-height: 340px; }
    .overview-service-row { grid-template-columns: 45px 1fr; }
    .overview-service-image { grid-column: 2; }
    .service-detail-copy { padding-bottom: 1rem; }
    .service-detail-visual { min-height: 470px; }
    .service-content-grid header { position: static; }
    .service-story-section { align-items: start; }
    .service-story-images { min-height: 500px; }
    .drone-equipment-section figure { min-height: 460px; }
    .capability-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    :root { --nav-height: 70px; }
    .site-v4 .navbar { padding-inline: 1rem; }
    .site-v4 .navbar > .logo { width: 172px; }
    .site-v4 #hero.home-hero { min-height: 100svh; padding: calc(var(--nav-height) + 2rem) 1.15rem 3rem; }
    .site-v4 .hero-shade { background: linear-gradient(180deg, rgba(5,5,6,0.56) 0%, rgba(5,5,6,0.52) 25%, rgba(5,5,6,0.75) 64%, rgba(5,5,6,0.98) 100%); }
    .site-v4 .home-hero .hero-content h1 { font-size: clamp(2.55rem, 12.4vw, 4rem); line-height: 0.98; }
    .site-v4 .home-hero .hero-subtitle { margin-top: 1.05rem; font-size: 1.03rem; }
    .site-v4 .home-hero .hero-assurance { font-size: 0.8rem; line-height: 1.55; }
    .site-v4 .hero-actions { margin-top: 1.35rem; }
    .site-v4 .hero-actions .btn-primary,
    .site-v4 .hero-actions .btn-secondary { min-height: 44px; padding: 0.66rem 0.95rem; font-size: 0.76rem; }
    .site-v4 .hero-services { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem 0; margin-top: 1.35rem; }
    .site-v4 .hero-services li { padding-left: 0.75rem; font-size: 0.66rem; }
    .site-v4 .hero-services li:nth-child(odd) { padding-left: 0; border-left: 0; }
    .site-v4 .hero-scroll { display: none; }
    .home-services,
    .site-v4 #highlights,
    .process-editorial,
    .site-v4 #about,
    .site-v4 #contact,
    .service-overview-list,
    .service-content-section,
    .related-services { padding-block: 4.5rem; }
    .editorial-heading { margin-bottom: 2.5rem; }
    .editorial-heading h2 { font-size: clamp(2.45rem, 12vw, 3.6rem); }
    .service-feature { padding-bottom: 4rem; }
    .service-feature-media img { aspect-ratio: 4/3; }
    .service-preview-grid { grid-template-columns: 1fr; gap: 3rem; }
    .service-preview:last-child { grid-column: auto; width: auto; }
    .service-preview-media img { aspect-ratio: 16/10; }
    .section-end-link { justify-content: flex-start; }
    .site-v4 .highlights-header { padding: 0; }
    .site-v4 .highlights-strip { grid-template-columns: 1fr; }
    .site-v4 .hl-item { aspect-ratio: 4/3; }
    .process-list li { grid-template-columns: 38px 1fr; gap: 0.8rem; align-items: start; }
    .process-list p { grid-column: 2; }
    .site-v4 .partner-logos .partner-logo-frame { height: 145px; }
    .site-v4 .partner-logos .partner-logo--rubner { width: min(78%, 270px); }
    .site-v4 .partner-logos .partner-logo--square { width: min(100%, 333px); }
    .site-v4 .about-inner { gap: 3rem; }
    .site-v4 .about-photo-wrap { max-width: none; }
    .about-facts > div { grid-template-columns: 1fr; gap: 0.25rem; }
    .site-v4 .form-row { grid-template-columns: 1fr; }
    .site-footer { padding: 3.5rem 1.25rem 1.25rem; }
    .site-footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem 1.5rem; }
    .site-footer-brand { grid-column: 1 / -1; }
    .site-footer-bottom { flex-direction: column; margin-top: 2.5rem; }
    .page-hero,
    .service-detail-hero { padding-top: calc(var(--nav-height) + 3.5rem); }
    .page-hero h1,
    .service-detail-hero h1 { font-size: clamp(3rem, 15vw, 4.5rem); }
    .breadcrumbs { margin-bottom: 2.5rem; }
    .overview-image-strip { grid-template-columns: 1fr; }
    .overview-image-strip figure:first-child { grid-column: auto; }
    .overview-image-strip figure { min-height: 280px; }
    .overview-service-row { grid-template-columns: 30px 1fr; gap: 1rem; }
    .overview-service-image { grid-column: 1 / -1; margin-top: 0.5rem; }
    .service-detail-visual { min-height: 370px; }
    .service-type-list,
    .capability-list,
    .capability-list--short { grid-template-columns: 1fr; }
    .service-story-section,
    .drone-equipment-section { padding-block: 4.5rem; }
    .service-story-images { grid-template-columns: 1fr; min-height: 0; }
    .service-story-images figure { min-height: 300px; }
    .drone-equipment-section figure { min-height: 340px; }
    .related-links { grid-template-columns: 1fr; }
    .cta-band { padding: 4.5rem 1.25rem; }
    .cta-band h2 { font-size: clamp(2.5rem, 12vw, 3.7rem); }
    .site-v4.projects-page #projekte-header { padding-inline: 1.25rem; }
    .site-v4.legal-page main { padding-inline: 1.25rem; }
}

@media (max-width: 360px) {
    .site-v4 .navbar > .logo { width: 154px; }
    .site-v4 .home-hero .hero-content h1 { font-size: 2.32rem; }
    .site-v4 .home-hero .hero-subtitle { font-size: 0.96rem; }
    .site-v4 .home-hero .hero-assurance { font-size: 0.76rem; }
    .site-v4 .hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .site-v4 .hero-actions .btn-primary,
    .site-v4 .hero-actions .btn-secondary { padding-inline: 0.55rem; }
    .site-footer-grid { grid-template-columns: 1fr; }
    .site-footer-brand { grid-column: auto; }
}

/* V4 mobile detail-page text containment */
.site-v4 .service-detail-copy {
    min-width: 0;
}
.site-v4 .service-detail-copy > * {
    max-width: 100%;
}
.site-v4 .service-detail-intro,
.site-v4 .service-detail-assurance {
    overflow-wrap: break-word;
}

@media (max-width: 600px) {
    .site-v4 .service-detail-hero {
        width: calc(100% - 2.5rem);
    }
    .site-v4 .service-detail-hero h1 {
        font-size: clamp(2.05rem, 10vw, 3.2rem);
        line-height: 0.98;
        letter-spacing: -0.055em;
    }
}

@media (max-width: 360px) {
    .site-v4 .service-detail-hero {
        width: calc(100% - 2rem);
    }
    .site-v4 .service-detail-hero h1 {
        font-size: clamp(2rem, 10vw, 2.35rem);
    }
}

/* Keep long German service names fully visible beside the hero image. */
@media (min-width: 821px) {
    .site-v4 .service-detail-hero {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
        gap: clamp(2.5rem, 5vw, 5rem);
    }
    .site-v4 .service-detail-hero h1 {
        font-size: clamp(3.1rem, 5vw, 5.25rem);
    }
}


/* =======================================
   FRAMENEX V5 — POLISH, NAVIGATION & PRICING
======================================= */

/* Smaller, calmer hero footprint. */
.site-v4 .home-hero .hero-content { max-width: 1120px; margin-left: 0; }
.site-v4 .home-hero .hero-content h1 {
    max-width: 880px;
    font-size: clamp(2.85rem, 5vw, 5rem);
    line-height: 1;
    letter-spacing: -0.048em;
}
.site-v4 .home-hero .hero-subtitle { max-width: 670px; font-size: clamp(1.03rem, 1.45vw, 1.28rem); }
.site-v4 .home-hero .hero-assurance { max-width: 650px; }

/* Accessible Leistungen dropdown: hover/focus on desktop, toggle on touch. */
.site-v4 .nav-menu > ul > li { position: relative; }
.site-v4 .nav-services-trigger { display: flex; align-items: center; }
.site-v4 .nav-services-trigger > .nav-services-link { padding-right: 0.35rem; }
.site-v4 .nav-item--current > .nav-services-trigger > .nav-services-link { color: #fff; }
.site-v4 .nav-submenu-toggle {
    position: relative;
    width: 30px;
    height: 34px;
    flex: 0 0 30px;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,0.62);
    cursor: pointer;
}
.site-v4 .nav-submenu-toggle span {
    position: absolute;
    left: 50%;
    top: 47%;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translate(-50%, -60%) rotate(45deg);
    transition: transform 0.22s ease, color 0.22s ease;
}
.site-v4 .nav-submenu-toggle:hover,
.site-v4 .nav-submenu-toggle:focus-visible { color: #fff; }
.site-v4 .nav-item--services:hover .nav-submenu-toggle span,
.site-v4 .nav-item--services:focus-within .nav-submenu-toggle span,
.site-v4 .nav-item--services.submenu-open .nav-submenu-toggle span { transform: translate(-50%, -20%) rotate(225deg); }
.site-v4 .nav-submenu {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    z-index: 20;
    display: grid;
    min-width: 245px;
    gap: 0.1rem;
    margin: 0;
    padding: 0.55rem;
    border: 1px solid rgba(255,255,255,0.11);
    background: rgba(10,10,11,0.97);
    box-shadow: 0 22px 55px rgba(0,0,0,0.38);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-5px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.site-v4 .nav-item--services:hover > .nav-submenu,
.site-v4 .nav-item--services:focus-within > .nav-submenu,
.site-v4 .nav-item--services.submenu-open > .nav-submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
}
.site-v4 .nav-submenu li,
.site-v4 .nav-submenu li:last-child { width: 100%; }
.site-v4 .nav-submenu li a,
.site-v4 .nav-submenu li:last-child a {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.65rem 0.75rem;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,0.66);
    font-size: 0.78rem;
    font-weight: 520;
    letter-spacing: 0.02em;
    text-transform: none;
    white-space: nowrap;
}
.site-v4 .nav-submenu li a::after,
.site-v4 .nav-submenu li:last-child a::after { display: none; }
.site-v4 .nav-submenu li a:hover,
.site-v4 .nav-submenu li a:focus-visible,
.site-v4 .nav-submenu li a[aria-current="page"] { color: #fff; background: rgba(255,255,255,0.065); transform: none; }

/* Seam-free portfolio crossfade. */
.site-v4 .portfolio-slider-side .slides { background: #050505; isolation: isolate; }
.site-v4 .portfolio-slider-side .slides img {
    inset: 0;
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    transform: none;
    object-fit: contain;
    background: #050505;
    backface-visibility: hidden;
}
.site-v4 .portfolio-info-side { border-left: 0; }
@keyframes slideInFromRight { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideOutToLeft { from { opacity: 1; } to { opacity: 0; } }
@keyframes slideInFromLeft { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideOutToRight { from { opacity: 1; } to { opacity: 0; } }

/* Keep descenders fully visible in the process heading. */
.site-v4 #steps .editorial-heading h2 {
    padding-bottom: 0.12em;
    color: #98a5ff;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: currentColor;
    line-height: 1.08;
}

/* Purposeful crop: the complete face remains visible in the narrow panel. */
.service-story-image--face img { object-position: 41% center; }

/* Pricing and equipment use editorial rows instead of package cards. */
.pricing-philosophy,
.price-guidance,
.equipment-editorial { padding: clamp(6rem, 10vw, 9rem) 0; }
.pricing-philosophy { background: #111113; }
.price-guidance { background: #0b0b0c; }
.equipment-editorial { background: #111113; }
.pricing-philosophy-grid,
.price-guidance-grid,
.equipment-editorial-grid {
    display: grid;
    grid-template-columns: minmax(290px, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(3rem, 8vw, 8rem);
    align-items: start;
}
.pricing-philosophy h2,
.price-guidance h2,
.equipment-editorial h2 {
    max-width: 690px;
    margin: 0;
    color: #fff;
    font-size: clamp(2.5rem, 4.6vw, 4.8rem);
    font-weight: 550;
    line-height: 1;
}
.pricing-philosophy header > p,
.price-guidance header > p,
.equipment-editorial header > p {
    max-width: 600px;
    margin: 1.45rem 0 0;
    color: #96969c;
    line-height: 1.8;
}
.price-factor-rows,
.equipment-rows { margin: 0; border-bottom: 1px solid rgba(255,255,255,0.14); }
.price-factor-rows > div,
.equipment-rows > div {
    display: grid;
    grid-template-columns: minmax(150px, 0.42fr) minmax(0, 1fr);
    gap: 2rem;
    padding: 1.35rem 0;
    border-top: 1px solid rgba(255,255,255,0.14);
}
.price-factor-rows dt,
.equipment-rows dt {
    color: #8f9cff;
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}
.price-factor-rows dd,
.equipment-rows dd { margin: 0; color: #dedee2; line-height: 1.7; }
.price-guide-list { border-bottom: 1px solid rgba(255,255,255,0.14); }
.price-guide-row {
    display: grid;
    grid-template-columns: minmax(180px, 0.75fr) minmax(260px, 1.25fr);
    gap: 2rem;
    align-items: baseline;
    padding: 1.45rem 0;
    border-top: 1px solid rgba(255,255,255,0.14);
}
.price-guide-row span { color: #96969c; font-size: 0.92rem; }
.price-guide-row strong { color: #f0f0f2; font-size: clamp(1.15rem, 2vw, 1.55rem); font-weight: 560; line-height: 1.35; }
.price-guide-note { margin: 1.35rem 0 0; color: #707077; font-size: 0.78rem; line-height: 1.7; }

@media (max-width: 820px) {
    .site-v4 .nav-menu { justify-content: flex-start; align-items: stretch; overflow-y: auto; padding: calc(var(--nav-height) + 2rem) 1.5rem 2.5rem; }
    .site-v4 .nav-menu > ul { width: min(100%, 430px); margin: 0 auto; align-items: stretch; gap: 0.65rem; }
    .site-v4 .nav-menu > ul > li > a,
    .site-v4 .nav-services-trigger > .nav-services-link { display: block; width: 100%; padding: 0.55rem 0; font-size: clamp(1.35rem, 6vw, 1.8rem); }
    .site-v4 .nav-menu > ul > li:last-child > a { margin-left: 0; padding: 0.55rem 0; border: 0; }
    .site-v4 .nav-services-trigger { width: 100%; }
    .site-v4 .nav-submenu-toggle { width: 48px; height: 48px; flex-basis: 48px; }
    .site-v4 .nav-submenu {
        position: static;
        display: grid;
        min-width: 0;
        max-height: 0;
        gap: 0;
        margin: 0;
        padding: 0 0 0 1rem;
        overflow: hidden;
        border: 0;
        border-left: 1px solid rgba(255,255,255,0.13);
        background: transparent;
        box-shadow: none;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: none;
        transition: max-height 0.28s ease, opacity 0.22s ease, margin 0.28s ease, visibility 0s linear 0.28s;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .site-v4 .nav-item--services:hover > .nav-submenu { max-height: 0; opacity: 0; visibility: hidden; pointer-events: none; margin: 0; }
    .site-v4 .nav-item--services:focus-within > .nav-submenu,
    .site-v4 .nav-item--services.submenu-open > .nav-submenu {
        max-height: 300px;
        margin-top: 0.45rem;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition-delay: 0s;
    }
    .site-v4 .nav-submenu li a,
    .site-v4 .nav-submenu li:last-child a { padding: 0.46rem 0.75rem; font-size: 0.94rem; white-space: normal; }
    .pricing-philosophy-grid,
    .price-guidance-grid,
    .equipment-editorial-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

@media (max-width: 600px) {
    .site-v4 .home-hero .hero-content h1 { max-width: 520px; font-size: clamp(2.2rem, 10.7vw, 3.25rem); line-height: 1.01; }
    .site-v4 .home-hero .hero-subtitle { font-size: 0.98rem; }
    .pricing-philosophy,
    .price-guidance,
    .equipment-editorial { padding-block: 4.5rem; }
    .pricing-philosophy h2,
    .price-guidance h2,
    .equipment-editorial h2 { font-size: clamp(2.35rem, 11vw, 3.45rem); }
    .price-factor-rows > div,
    .equipment-rows > div,
    .price-guide-row { grid-template-columns: 1fr; gap: 0.45rem; padding: 1.15rem 0; }
    .price-guide-row strong { font-size: 1.13rem; }
}

@media (max-width: 390px) {
    .site-v4 .hero-actions { display: grid; grid-template-columns: 1fr; }
    .site-v4 .hero-actions .btn-primary,
    .site-v4 .hero-actions .btn-secondary { width: 100%; }
}

/* Final hero scale adjustment: keep the statement strong without occupying the visual centre. */
.site-v4 .home-hero .hero-content h1 {
    max-width: 810px;
    font-size: clamp(2.75rem, 4.45vw, 4.5rem);
}
.site-v4 .home-hero .hero-subtitle { max-width: 620px; font-size: clamp(1rem, 1.3vw, 1.18rem); }
@media (max-width: 600px) {
    .site-v4 .home-hero .hero-content h1 {
        max-width: 500px;
        font-size: clamp(2.05rem, 9.2vw, 2.85rem);
    }
}

/* =======================================
   FRAMENEX V6 — REFERENCES & FINAL POLISH
======================================= */

/* The desktop submenu now touches its trigger and also remains open through
   the small pointer transition between navigation and menu. */
@media (min-width: 821px) {
    .site-v4 .nav-submenu {
        top: calc(100% - 1px);
        transform: translateY(-2px);
    }
    .site-v4 .nav-item--services:hover > .nav-submenu,
    .site-v4 .nav-item--services:focus-within > .nav-submenu,
    .site-v4 .nav-item--services.submenu-open > .nav-submenu {
        transform: translateY(0);
    }
}

/* Clearer calls to action on dark and accent backgrounds. */
.site-v4 .btn-primary {
    color: #070708;
    font-size: 0.86rem;
    font-weight: 740;
    letter-spacing: 0.022em;
    text-shadow: none;
}
.site-v4 .hero-actions .btn-primary,
.site-v4 .page-hero-actions .btn-primary { white-space: nowrap; }
.cta-band .section-eyebrow {
    color: #080809;
    font-size: 0.75rem;
    font-weight: 760;
    opacity: 1;
}
.cta-band .section-eyebrow::before { background: #080809; }
.cta-band p { color: rgba(0,0,0,0.82); }
.cta-band .text-link,
.cta-band .text-link:hover,
.cta-band .text-link:focus-visible {
    color: #080809;
    border-color: #080809;
    font-size: 0.94rem;
    font-weight: 750;
}

.price-tax-note {
    grid-column: 2;
    max-width: 760px;
    margin: -0.5rem 0 0;
    color: #85858c;
    font-size: 0.78rem;
    line-height: 1.7;
}

/* Every service can point to all relevant complementary disciplines. */
.related-links { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

/* The two cinematic Postproduktion stills retain their complete widescreen
   composition instead of being forced into narrow portrait crops. */
.postproduction-page .service-story-images {
    grid-template-columns: 1fr;
    align-self: stretch;
}
.postproduction-page .service-story-images figure {
    min-height: 0;
    aspect-ratio: 800 / 342;
}
.postproduction-page .service-story-images img {
    object-fit: cover;
    object-position: center;
}

/* ---------- References page ---------- */
.references-page { background: #0b0b0c; }
.references-hero {
    padding: calc(var(--nav-height) + clamp(4rem, 8vw, 7.5rem)) 0 clamp(5rem, 9vw, 8rem);
    background: #0b0b0c;
}
.references-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.48fr);
    gap: clamp(3rem, 8vw, 8rem);
    align-items: end;
}
.references-hero .breadcrumbs { margin-bottom: clamp(2.75rem, 6vw, 5.5rem); }
.references-hero h1 {
    max-width: 950px;
    margin: 0;
    color: #fff;
    font-size: clamp(3.4rem, 7vw, 7rem);
    font-weight: 550;
    line-height: 0.94;
    letter-spacing: -0.058em;
}
.references-hero-copy > p {
    max-width: 760px;
    margin: 1.65rem 0 0;
    color: #9a9aa1;
    font-size: clamp(1rem, 1.45vw, 1.2rem);
    line-height: 1.72;
}
.references-hero-aside {
    padding-top: 1.4rem;
    border-top: 1px solid rgba(255,255,255,0.16);
}
.references-hero-aside > p:last-child {
    max-width: 380px;
    margin: 1.3rem 0 0;
    color: #818188;
    font-size: 0.88rem;
    line-height: 1.75;
}
.references-total {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    margin: 0;
}
.references-total strong {
    color: #9aa6ff;
    font-size: clamp(2.7rem, 5vw, 4.8rem);
    font-weight: 520;
    line-height: 0.8;
    letter-spacing: -0.05em;
}
.references-total span {
    max-width: 110px;
    color: #dedee2;
    font-size: 0.72rem;
    font-weight: 650;
    line-height: 1.35;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.references-collection {
    padding: clamp(5.5rem, 10vw, 9rem) 0 clamp(7rem, 12vw, 11rem);
    background: #111113;
}
.references-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    align-items: end;
}
.references-toolbar h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(2.5rem, 4.6vw, 4.9rem);
    font-weight: 550;
    line-height: 0.98;
    letter-spacing: -0.045em;
}
.references-result-count {
    margin: 0 0 0.35rem;
    color: #76767d;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.reference-filters {
    display: flex;
    gap: clamp(1.1rem, 3vw, 2.5rem);
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding-bottom: 0;
    overflow-x: auto;
    border-bottom: 1px solid rgba(255,255,255,0.14);
    scrollbar-width: none;
}
.reference-filters::-webkit-scrollbar { display: none; }
.reference-filter {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    flex: 0 0 auto;
    margin: 0;
    padding: 0 0 0.85rem;
    border: 0;
    background: transparent;
    color: #77777e;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 580;
    cursor: pointer;
    transition: color 0.2s ease;
}
.reference-filter::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: #98a4ff;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.24s ease;
}
.reference-filter:hover,
.reference-filter:focus-visible,
.reference-filter.is-active { color: #fff; }
.reference-filter.is-active::after { transform: scaleX(1); }
.reference-filter sup {
    color: #66666d;
    font-size: 0.58rem;
    font-weight: 650;
    line-height: 1;
}
.reference-filter.is-active sup { color: #9ca8ff; }

.references-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: clamp(4rem, 7vw, 7rem) clamp(1.4rem, 3vw, 3rem);
    margin-top: clamp(3.5rem, 7vw, 6rem);
}
.reference-card-wrap--wide { grid-column: span 4; }
.reference-card-wrap--standard { grid-column: span 2; }
.reference-card-wrap--half { grid-column: span 3; }
.reference-card-wrap[hidden] { display: none; }
.reference-card {
    display: block;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}
.reference-card-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #080809;
}
.reference-card-wrap--wide .reference-card-media { aspect-ratio: 16 / 8.8; }
.reference-card-wrap--standard .reference-card-media { aspect-ratio: 4 / 3; }
.reference-card-wrap--half .reference-card-media { aspect-ratio: 3 / 2; }
.reference-card-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.08) 40%, rgba(0,0,0,0.56) 100%);
    pointer-events: none;
}
.reference-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.82) saturate(0.9);
    transition: transform 0.75s cubic-bezier(.2,.7,.2,1), filter 0.35s ease;
}
.reference-card:hover .reference-card-media img,
.reference-card:focus-visible .reference-card-media img {
    transform: scale(1.025);
    filter: brightness(0.94) saturate(0.96);
}
.reference-card-number,
.reference-card-video,
.reference-card-open {
    position: absolute;
    z-index: 2;
    color: rgba(255,255,255,0.82);
    font-size: 0.66rem;
    font-weight: 650;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.reference-card-number { top: 1rem; left: 1rem; }
.reference-card-video {
    top: 0.85rem;
    right: 0.85rem;
    padding: 0.42rem 0.55rem;
    background: rgba(6,6,7,0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.reference-card-open {
    right: 1rem;
    bottom: 1rem;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.reference-card:hover .reference-card-open,
.reference-card:focus-visible .reference-card-open { opacity: 1; transform: translateY(0); }
.reference-card-copy { padding-top: 1.45rem; }
.reference-card-label {
    margin: 0;
    color: #929eff;
    font-size: 0.68rem;
    font-weight: 650;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}
.reference-card-title {
    max-width: 760px;
    margin: 0.65rem 0 0;
    color: #f4f4f5;
    font-size: clamp(1.7rem, 3.2vw, 3.25rem);
    font-weight: 550;
    line-height: 1.03;
    letter-spacing: -0.035em;
}
.reference-card-wrap--standard .reference-card-title { font-size: clamp(1.55rem, 2.5vw, 2.35rem); }
.reference-card-lead {
    max-width: 700px;
    margin: 1rem 0 0;
    color: #8d8d94;
    font-size: 0.9rem;
    line-height: 1.72;
}
.reference-card-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 1.45rem 0 0;
    padding: 0;
    border-top: 1px solid rgba(255,255,255,0.13);
}
.reference-card-meta > div {
    min-width: 0;
    padding: 0.85rem 1rem 0.15rem 0;
}
.reference-card-meta dt {
    color: #63636a;
    font-size: 0.58rem;
    font-weight: 650;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.reference-card-meta dd {
    margin: 0.28rem 0 0;
    color: #c0c0c5;
    font-size: 0.76rem;
    line-height: 1.55;
}
.references-empty,
.references-noscript {
    margin: 4rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.14);
    color: #8b8b91;
}

/* ---------- Project modal ---------- */
.site-v4 .portfolio-modal.modal {
    padding: 0;
    overflow: hidden;
    background: #070708;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.site-v4 .portfolio-modal.modal .portfolio-dialog,
.site-v4 .project-modal-dialog {
    display: grid;
    grid-template-rows: 72px minmax(0, 1fr);
    width: 100%;
    height: 100svh;
    max-height: none;
    overflow: hidden;
    border: 0;
    background: #080809;
    box-shadow: none;
    animation: projectModalReveal 0.34s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes projectModalReveal {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.project-modal-topbar {
    position: relative;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-width: 0;
    padding: 0 1.4rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    background: #0a0a0b;
}
.project-modal-context {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin: 0;
}
.project-modal-context span {
    color: #76767d;
    font-size: 0.65rem;
    font-weight: 650;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.project-modal-context strong {
    color: #a0aaff;
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.08em;
}
.project-modal-topbar-actions { display: flex; align-items: center; gap: 0.35rem; }
.project-switch-btn,
.project-modal-topbar .portfolio-close-btn {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: auto;
    height: 40px;
    min-height: 40px;
    margin: 0;
    padding: 0 0.8rem;
    border: 0;
    border-left: 1px solid rgba(255,255,255,0.1);
    border-radius: 0;
    background: transparent;
    color: #8e8e95;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 610;
    letter-spacing: 0.035em;
    cursor: pointer;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: color 0.2s ease, background 0.2s ease;
}
.project-switch-btn:hover,
.project-switch-btn:focus-visible,
.project-modal-topbar .portfolio-close-btn:hover,
.project-modal-topbar .portfolio-close-btn:focus-visible {
    color: #fff;
    background: rgba(255,255,255,0.045);
    transform: none;
}
.project-modal-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.42fr) minmax(370px, 0.72fr);
    min-height: 0;
    overflow: hidden;
}
.site-v4 .project-media-panel {
    position: relative;
    display: block;
    min-width: 0;
    overflow: hidden;
    border: 0;
    background: #050505;
}
.site-v4 .project-media-stage {
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 1fr) 82px;
    width: 100%;
    height: 100%;
    margin: 0;
}
.site-v4 .project-media-stage .slides {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: hidden;
    isolation: isolate;
    background: #050505;
}
.site-v4 .project-media-stage .portfolio-slide,
.site-v4 .project-media-stage .project-slide {
    position: absolute;
    inset: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
    background: #050505;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}
.site-v4 .project-media-stage .project-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 2;
    transition-delay: 0s;
}
.site-v4 .portfolio-slider-side .slides .project-slide--image > img {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    transform: none !important;
    object-fit: contain;
    object-position: center;
    background: #050505;
    backface-visibility: hidden;
}
.project-slide--youtube iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #050505;
}
.project-video-consent {
    max-width: 430px;
    padding: 2rem;
    color: #e8e8ea;
    text-align: center;
}
.project-video-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 40px;
    margin-bottom: 1.2rem;
    background: #8796ff;
    color: #09090a;
    font-size: 1rem;
}
.project-video-title { margin: 0; color: #fff; font-size: 1.2rem; font-weight: 620; }
.project-video-copy { margin: 0.65rem 0 1.35rem; color: #85858c; font-size: 0.84rem; line-height: 1.65; }
.project-video-load {
    min-height: 44px;
    padding: 0.7rem 1rem;
    border: 1px solid #8796ff;
    border-radius: 0;
    background: #8796ff;
    color: #080809;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}
.site-v4 .project-media-stage .prev,
.site-v4 .project-media-stage .next {
    position: absolute;
    top: calc(50% - 41px);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 0;
    background: rgba(8,8,9,0.72);
    color: #f1f1f3;
    font-size: 1rem;
    line-height: 1;
    transform: translateY(-50%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.site-v4 .project-media-stage .prev { left: 1rem; }
.site-v4 .project-media-stage .next { right: 1rem; }
.site-v4 .project-media-stage .prev:hover,
.site-v4 .project-media-stage .prev:focus-visible,
.site-v4 .project-media-stage .next:hover,
.site-v4 .project-media-stage .next:focus-visible {
    border-color: #9aa5ff;
    background: #8796ff;
    color: #080809;
    transform: translateY(-50%);
}
.project-media-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-width: 0;
    padding: 0.75rem 1rem;
    background: #09090a;
}
.project-media-count {
    flex: 0 0 auto;
    color: #83838a;
    font-size: 0.66rem;
    font-weight: 650;
    letter-spacing: 0.1em;
}
.project-media-thumbs {
    display: flex;
    justify-content: flex-end;
    gap: 0.45rem;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.project-media-thumbs::-webkit-scrollbar { display: none; }
.project-media-thumb {
    position: relative;
    flex: 0 0 70px;
    width: 70px;
    height: 48px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.11);
    border-radius: 0;
    background: #111;
    opacity: 0.48;
    cursor: pointer;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}
.project-media-thumb:hover,
.project-media-thumb:focus-visible,
.project-media-thumb.is-active {
    opacity: 1;
    border-color: #98a4ff;
}
.project-media-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.project-media-thumb-video {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #a8b1ff;
    font-size: 0.9rem;
}
.site-v4 .project-info-panel,
.site-v4 .portfolio-info-side.project-info-panel {
    position: relative;
    display: block;
    min-width: 0;
    overflow-y: auto;
    padding: clamp(3rem, 5vw, 5.5rem) clamp(2rem, 4vw, 4.25rem) 4rem;
    border: 0 !important;
    border-left: 0 !important;
    background: #0d0d0e;
    box-shadow: none;
    scrollbar-color: #34343a transparent;
    scrollbar-width: thin;
}
.site-v4 .portfolio-info-side::before,
.site-v4 .project-info-panel::before,
.site-v4 .project-modal-dialog::before,
.site-v4 .project-modal-dialog::after { display: none !important; content: none !important; }
.project-modal-category {
    margin: 0 0 1rem;
    color: #98a4ff;
    font-size: 0.68rem;
    font-weight: 680;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.site-v4 #portfolio-modal-title {
    max-width: 720px;
    margin: 0;
    color: #f5f5f6;
    background: none;
    font-family: var(--font-body);
    font-size: clamp(2.4rem, 4.2vw, 4.4rem);
    font-weight: 550;
    line-height: 1;
    letter-spacing: -0.048em;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: currentColor;
}
.project-modal-lead {
    max-width: 650px;
    margin: 1.35rem 0 0;
    color: #b7b7bc;
    font-size: clamp(1rem, 1.4vw, 1.18rem);
    line-height: 1.65;
}
.project-modal-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 2.4rem 0 0;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}
.project-modal-meta > div {
    min-width: 0;
    padding: 0.95rem 1rem 0.95rem 0;
    border-top: 1px solid rgba(255,255,255,0.12);
}
.project-modal-meta dt {
    color: #66666d;
    font-size: 0.6rem;
    font-weight: 660;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.project-modal-meta dd {
    margin: 0.3rem 0 0;
    color: #dedee1;
    font-size: 0.82rem;
    line-height: 1.55;
}
.site-v4 #portfolio-modal-description,
.project-modal-description {
    margin-top: 2.2rem;
    color: #98989f;
    font-size: 0.91rem;
    line-height: 1.82;
}
.site-v4 #portfolio-modal-description p,
.project-modal-description p { margin: 0 0 1rem; }
.project-modal-facts {
    display: grid;
    gap: 0.55rem;
    margin: 1.8rem 0 0;
    padding: 1.35rem 0 0;
    border-top: 1px solid rgba(255,255,255,0.12);
    list-style: none;
}
.project-modal-facts li {
    position: relative;
    padding-left: 1rem;
    color: #c4c4c9;
    font-size: 0.8rem;
    line-height: 1.55;
}
.project-modal-facts li::before {
    content: '';
    position: absolute;
    top: 0.68em;
    left: 0;
    width: 4px;
    height: 4px;
    background: #98a4ff;
}
.project-modal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-top: 2rem;
}
.project-modal-text-action {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    width: fit-content;
    padding: 0 0 0.3rem;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,0.34);
    border-radius: 0;
    background: transparent;
    color: #f1f1f3;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 650;
    cursor: pointer;
}
.project-modal-text-action:hover,
.project-modal-text-action:focus-visible { color: #aab3ff; border-color: #aab3ff; }

@media (max-width: 980px) {
    .references-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(230px, 0.42fr); gap: 3rem; }
    .references-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .reference-card-wrap--wide { grid-column: span 2; }
    .reference-card-wrap--standard,
    .reference-card-wrap--half { grid-column: span 1; }
    .reference-card-wrap--standard .reference-card-media,
    .reference-card-wrap--half .reference-card-media { aspect-ratio: 4 / 3; }
    .project-modal-layout { grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr); }
}

@media (max-width: 820px) {
    .price-tax-note { grid-column: 1; margin-top: -1.4rem; }
    .references-hero-grid { grid-template-columns: 1fr; gap: 3rem; }
    .references-hero-aside { max-width: 520px; }
    .site-v4 .portfolio-modal.modal { overflow-y: auto; }
    .site-v4 .portfolio-modal.modal .portfolio-dialog,
    .site-v4 .project-modal-dialog {
        grid-template-rows: auto auto;
        height: auto;
        min-height: 100svh;
        overflow: visible;
    }
    .project-modal-topbar {
        position: sticky;
        top: 0;
        min-height: 64px;
        padding: 0 0.8rem 0 1rem;
    }
    .project-modal-layout {
        grid-template-columns: 1fr;
        overflow: visible;
    }
    .site-v4 .project-media-panel {
        height: min(76vw, 520px);
        min-height: 360px;
    }
    .site-v4 .project-info-panel,
    .site-v4 .portfolio-info-side.project-info-panel {
        overflow: visible;
        padding: 3.5rem 1.5rem 4.5rem;
    }
}

@media (max-width: 600px) {
    .site-v4 .hero-actions .btn-primary,
    .site-v4 .page-hero-actions .btn-primary {
        white-space: normal;
        text-align: center;
        line-height: 1.25;
    }
    .references-hero { padding-top: calc(var(--nav-height) + 3.3rem); padding-bottom: 4.5rem; }
    .references-hero h1 { font-size: clamp(2.75rem, 13.5vw, 4.2rem); line-height: 0.96; }
    .references-hero-copy > p { font-size: 0.96rem; }
    .references-collection { padding-block: 4.5rem 6rem; }
    .references-toolbar { align-items: flex-start; flex-direction: column; gap: 1rem; }
    .references-toolbar h2 { font-size: clamp(2.5rem, 12vw, 3.65rem); }
    .references-result-count { margin: 0; }
    .reference-filters { width: calc(100vw - 1.25rem); margin-right: -1.25rem; padding-right: 1.25rem; }
    .references-grid { grid-template-columns: 1fr; gap: 4.5rem; margin-top: 3.5rem; }
    .reference-card-wrap--wide,
    .reference-card-wrap--standard,
    .reference-card-wrap--half { grid-column: span 1; }
    .reference-card-wrap--wide .reference-card-media,
    .reference-card-wrap--standard .reference-card-media,
    .reference-card-wrap--half .reference-card-media { aspect-ratio: 4 / 3; }
    .reference-card-title,
    .reference-card-wrap--standard .reference-card-title { font-size: clamp(1.9rem, 9vw, 2.7rem); }
    .reference-card-open { opacity: 1; transform: none; }
    .reference-card-meta { grid-template-columns: 1fr; }
    .reference-card-meta > div:nth-child(n+3) { display: none; }
    .project-modal-context span,
    .project-switch-label,
    .portfolio-close-label { display: none; }
    .project-modal-context { gap: 0; }
    .project-switch-btn,
    .project-modal-topbar .portfolio-close-btn {
        width: 44px;
        min-width: 44px;
        padding: 0;
        border-left: 1px solid rgba(255,255,255,0.1);
        font-size: 1rem;
    }
    .site-v4 .project-media-panel {
        height: min(112vw, 460px);
        min-height: 330px;
    }
    .site-v4 .project-media-stage { grid-template-rows: minmax(0, 1fr) 72px; }
    .site-v4 .project-media-stage .prev,
    .site-v4 .project-media-stage .next {
        top: calc(50% - 36px);
        width: 42px;
        height: 42px;
    }
    .site-v4 .project-media-stage .prev { left: 0.65rem; }
    .site-v4 .project-media-stage .next { right: 0.65rem; }
    .project-media-footer { padding: 0.65rem 0.75rem; gap: 0.75rem; }
    .project-media-thumb { flex-basis: 58px; width: 58px; height: 40px; }
    .site-v4 #portfolio-modal-title { font-size: clamp(2.25rem, 11vw, 3.25rem); }
    .project-modal-meta { grid-template-columns: 1fr; }
    .project-modal-meta > div { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .reference-card-media img,
    .site-v4 .project-media-stage .portfolio-slide,
    .site-v4 .project-media-stage .project-slide,
    .site-v4 .portfolio-modal.modal .portfolio-dialog { transition: none; animation: none; }
}

/* V6.1 interaction and media polish */
@media (min-width: 821px) {
    /* A transparent pointer bridge makes the route from the navigation label
       into the flyout forgiving even when the pointer moves diagonally. */
    .site-v4 .nav-submenu::before {
        content: '';
        position: absolute;
        right: 0;
        bottom: 100%;
        left: 0;
        height: 12px;
        background: transparent;
    }
}

/* Important CTA labels stay legible over both the hero and light CTA bands. */
.site-v4 .btn-primary {
    background: #98a5ff;
    color: #060607 !important;
    font-size: 0.9rem;
    font-weight: 780;
}
.site-v4 .btn-primary:hover,
.site-v4 .btn-primary:focus-visible {
    background: #b1b9ff;
    color: #060607 !important;
}

/* Show the complete native 800 × 342 stills on the Postproduktion page. */
.postproduction-page .service-story-images figure,
.postproduction-page .service-story-images img {
    background: #050505;
}
.postproduction-page .service-story-images img {
    object-fit: contain;
    object-position: 50% 50%;
}

/* Fully neutralise borders, outlines and legacy pseudo-elements around the
   reference media plane. This prevents a one-pixel seam at the left edge
   during and after gallery changes. */
.site-v4 .project-media-panel,
.site-v4 .project-media-stage,
.site-v4 .project-media-stage .slides,
.site-v4 .project-media-stage .portfolio-slide,
.site-v4 .project-media-stage .project-slide,
.site-v4 .project-media-stage .project-slide > img {
    border: 0 !important;
    border-left: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}
.site-v4 .project-media-panel::before,
.site-v4 .project-media-panel::after,
.site-v4 .project-media-stage::before,
.site-v4 .project-media-stage::after,
.site-v4 .project-media-stage .slides::before,
.site-v4 .project-media-stage .slides::after,
.site-v4 .project-media-stage .portfolio-slide::before,
.site-v4 .project-media-stage .portfolio-slide::after,
.site-v4 .project-media-stage .project-slide::before,
.site-v4 .project-media-stage .project-slide::after {
    content: none !important;
    display: none !important;
}

/* Reference cards reuse the project-modal hook `.portfolio-item`, but they
   must not inherit the legacy square-card clipping from the former gallery. */
.references-grid .reference-card.portfolio-item {
    aspect-ratio: auto !important;
    height: auto;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
    will-change: auto;
}
.references-grid .reference-card.portfolio-item:hover,
.references-grid .reference-card.portfolio-item:focus-visible {
    box-shadow: none;
    transform: none;
}

.site-v4 .project-info-panel::after,
.site-v4 .portfolio-info-side.project-info-panel::after {
    content: none !important;
    display: none !important;
}

/* Full-screen reference dialogs must start at the top on narrow screens.
   The legacy modal container centred tall dialogs vertically, which could
   place the active image above the visible viewport. */
.site-v4 .portfolio-modal.modal {
    align-items: flex-start;
    justify-content: flex-start;
}

/* =======================================
   FRAMENEX V7 — WORKFLOW, FAQ & FINAL POLISH
======================================= */

/* Keep every top-level navigation label on one visual baseline. */
@media (min-width: 821px) {
    .site-v4 .nav-menu > ul {
        display: flex;
        align-items: center;
        min-height: 46px;
    }

    .site-v4 .nav-menu > ul > li {
        display: flex;
        align-items: center;
        min-height: 46px;
    }

    .site-v4 .nav-menu > ul > li > a,
    .site-v4 .nav-services-trigger,
    .site-v4 .nav-services-trigger > .nav-services-link {
        display: inline-flex;
        align-items: center;
        min-height: 46px;
        line-height: 1;
    }

    .site-v4 .nav-services-trigger {
        height: 46px;
    }

    .site-v4 .nav-submenu-toggle {
        height: 46px;
    }

    /* The menu begins directly below the trigger. Its first padding area is
       transparent, so the visual panel still floats while the pointer path
       contains no dead zone. */
    .site-v4 .nav-submenu {
        top: calc(100% - 1px);
        padding-top: 0.9rem;
        border-top-color: transparent;
    }

    .site-v4 .nav-submenu::before {
        height: 18px;
    }
}

@media (min-width: 821px) and (max-width: 1120px) {
    .site-v4 .navbar { gap: 1rem; }
    .site-v4 .navbar > .logo { width: clamp(170px, 18vw, 205px); }
    .site-v4 .nav-menu li a { padding-inline: 0.58rem; font-size: 0.72rem; }
    .site-v4 .nav-services-trigger > .nav-services-link { padding-right: 0.2rem; }
}

/* Pointer-triggered focus restoration must never paint a purple seam between
   the homepage references. Keyboard focus remains visible, but inside the
   selected card rather than outside it. */
.site-v4 .highlights-strip .portfolio-item:focus,
.site-v4 .references-grid .portfolio-item:focus {
    outline: 0 !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}

html.using-keyboard .site-v4 .highlights-strip .portfolio-item:focus-visible,
html.using-keyboard .site-v4 .references-grid .portfolio-item:focus-visible {
    outline: 0 !important;
    box-shadow: inset 0 0 0 3px #9da8ff !important;
    z-index: 4;
}

/* One media plane, never a row of slides. This also neutralises legacy slider
   rules that could expose part of the previous project during repainting. */
.site-v4 .project-media-stage .slides {
    display: block !important;
    gap: 0 !important;
    padding: 0 !important;
    transform: none !important;
}
.site-v4 .project-media-stage .project-slide {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    transform: none !important;
    background-clip: padding-box;
}

/* The action only exists for projects that actually contain a YouTube item. */
.project-modal-text-action[hidden],
.project-modal-links [hidden] {
    display: none !important;
}

.project-video-fallback {
    width: min(100% - 2rem, 460px);
    margin: auto;
    padding: 2rem;
    color: #e8e8ea;
    text-align: center;
}
.project-video-fallback .project-video-load {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* More breathing room around the long Drohnenaufnahmen entry. */
@media (min-width: 821px) {
    .overview-service-row--drone {
        grid-template-columns: 65px minmax(255px, 0.72fr) minmax(420px, 1.28fr);
        column-gap: clamp(3.5rem, 7vw, 7.5rem);
    }
    .overview-service-row--drone .overview-service-copy {
        padding-right: clamp(0.5rem, 1.5vw, 1.5rem);
    }
}
@media (min-width: 821px) and (max-width: 1040px) {
    .overview-service-row--drone {
        grid-template-columns: 45px minmax(235px, 0.8fr) minmax(360px, 1.2fr);
        column-gap: clamp(2.5rem, 5vw, 4rem);
    }
}
@media (max-width: 820px) {
    .overview-service-row--drone {
        grid-template-columns: 45px minmax(0, 1fr);
        gap: 2rem;
    }
    .overview-service-row--drone .overview-service-image { grid-column: 2; }
}

/* ---------- FAQ accordions ---------- */
.faq-section {
    padding: clamp(6rem, 10vw, 9rem) 0;
    background: #101012;
}

.faq-section--compact { background: #0d0d0f; }

.faq-section-grid {
    display: grid;
    grid-template-columns: minmax(270px, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(3.5rem, 9vw, 9rem);
    align-items: start;
}

.faq-section-heading {
    position: sticky;
    top: calc(var(--nav-height) + 2rem);
}

.faq-section-heading h2,
.faq-topic-heading h2 {
    max-width: 620px;
    margin: 0;
    color: #f3f3f4;
    font-size: clamp(2.6rem, 4.7vw, 4.9rem);
    font-weight: 560;
    line-height: 0.99;
    letter-spacing: -0.045em;
}

.faq-section-heading > p {
    max-width: 470px;
    margin: 1.35rem 0 0;
    color: #919198;
    line-height: 1.75;
}

.faq-list {
    min-width: 0;
    border-top: 1px solid rgba(255,255,255,0.16);
}

.faq-item {
    border-bottom: 1px solid rgba(255,255,255,0.16);
}

.faq-item summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
    gap: 1.5rem;
    align-items: center;
    min-height: 82px;
    padding: 1.25rem 0;
    color: #dedee1;
    cursor: pointer;
    list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-question {
    font-size: clamp(1rem, 1.45vw, 1.18rem);
    font-weight: 570;
    line-height: 1.45;
}

.faq-icon {
    position: relative;
    display: block;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 50%;
    transition: border-color 0.22s ease, transform 0.32s ease;
}

.faq-icon::before,
.faq-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 1px;
    background: #a8b1ff;
    transform: translate(-50%, -50%);
    transition: transform 0.25s ease;
}

.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-icon { border-color: rgba(157,168,255,0.62); transform: rotate(180deg); }
.faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-item[open] .faq-question { color: #fff; }

.faq-item summary:hover .faq-question,
.faq-item summary:focus-visible .faq-question { color: #fff; }
.faq-item summary:focus-visible { outline: 2px solid #9da8ff; outline-offset: 5px; }

.faq-answer {
    max-width: 760px;
    padding: 0 4.5rem 1.75rem 0;
}

.faq-answer p {
    margin: 0;
    color: #9999a0;
    font-size: 0.94rem;
    line-height: 1.82;
}

/* ---------- Dedicated FAQ page ---------- */
.faq-page-hero {
    padding: calc(var(--nav-height) + clamp(5rem, 10vw, 9rem)) 0 clamp(5rem, 9vw, 8rem);
    background: #09090a;
}

.faq-page-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(240px, 0.42fr);
    gap: clamp(4rem, 10vw, 10rem);
    align-items: end;
}

.faq-page-hero h1 {
    max-width: 900px;
    margin: 0;
    color: #f5f5f6;
    font-size: clamp(3.8rem, 8.5vw, 8.8rem);
    font-weight: 545;
    line-height: 0.88;
    letter-spacing: -0.065em;
}

.faq-page-hero h1 + p {
    max-width: 650px;
    margin: 1.6rem 0 0;
    color: #9a9aa1;
    font-size: clamp(1rem, 1.45vw, 1.18rem);
    line-height: 1.75;
}

.faq-page-aside {
    padding-top: 1.2rem;
    border-top: 1px solid rgba(255,255,255,0.16);
}

.faq-page-aside > span {
    display: block;
    color: #74747b;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.faq-page-aside strong {
    display: block;
    margin-top: 0.6rem;
    color: #a1abff;
    font-size: clamp(3rem, 6vw, 5.5rem);
    font-weight: 520;
    line-height: 1;
}

.faq-page-aside p {
    margin: 1rem 0 0;
    color: #85858c;
    font-size: 0.84rem;
    line-height: 1.7;
}

.faq-directory {
    padding: clamp(5rem, 9vw, 8rem) 0 clamp(7rem, 12vw, 11rem);
    background: #0e0e10;
}

.faq-jump-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1.5rem;
    margin-bottom: clamp(5rem, 10vw, 9rem);
    padding: 1.2rem 0;
    border-top: 1px solid rgba(255,255,255,0.14);
    border-bottom: 1px solid rgba(255,255,255,0.14);
}

.faq-jump-nav a {
    padding-block: 0.25rem;
    color: #9a9aa1;
    font-size: 0.78rem;
    font-weight: 590;
    border-bottom: 1px solid transparent;
}

.faq-jump-nav a:hover,
.faq-jump-nav a:focus-visible { color: #fff; border-color: #9da8ff; }

.faq-topic {
    display: grid;
    grid-template-columns: minmax(250px, 0.62fr) minmax(0, 1.38fr);
    gap: clamp(3rem, 8vw, 8rem);
    align-items: start;
    padding: clamp(4rem, 8vw, 7rem) 0;
    scroll-margin-top: calc(var(--nav-height) + 2rem);
}

.faq-topic + .faq-topic { border-top: 1px solid rgba(255,255,255,0.12); }

.faq-topic-heading {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 1rem;
    position: sticky;
    top: calc(var(--nav-height) + 2rem);
}

.faq-topic-heading .section-eyebrow { grid-column: 1 / -1; margin-left: 56px; margin-bottom: 0.5rem; }
.faq-topic-heading h2 { font-size: clamp(2.2rem, 4vw, 4rem); }
.faq-topic-number { padding-top: 0.42rem; color: #a1abff; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; }

/* ---------- V7 responsive ---------- */
@media (max-width: 980px) {
    .workflow-layout { grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr); gap: 4rem; }
    .workflow-visual { grid-template-columns: auto 1fr; gap: 1rem 1.25rem; }
    .faq-section-grid { grid-template-columns: minmax(235px, 0.62fr) minmax(0, 1.38fr); gap: 4rem; }
    .faq-page-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(210px, 0.34fr); gap: 4rem; }
}

@media (max-width: 820px) {
    .workflow-section { padding-block: 5.5rem; }
    .workflow-section::before { background-size: 100% 100%, 100% 72px; }
    .workflow-layout { grid-template-columns: 1fr; gap: 4.5rem; }
    .workflow-sticky { position: static; }
    .workflow-sticky h2 { font-size: clamp(2.8rem, 10vw, 4.8rem); }
    .workflow-visual { max-width: 540px; }
    .workflow-step { min-height: 0; padding: 3rem 0; opacity: 0.55; }
    .workflow-step.is-active { opacity: 1; }
    .faq-section-grid,
    .faq-page-hero-grid,
    .faq-topic { grid-template-columns: 1fr; gap: 2.5rem; }
    .faq-section-heading,
    .faq-topic-heading { position: static; }
    .faq-topic-heading { max-width: 600px; }
    .faq-topic-heading .section-eyebrow { margin-left: 56px; }
    .faq-page-aside { max-width: 520px; }
}

@media (max-width: 600px) {
    .workflow-section,
    .faq-section { padding-block: 4.75rem; }
    .workflow-visual {
        grid-template-columns: auto 1fr;
        gap: 1rem;
        margin-top: 2.5rem;
    }
    .workflow-dial { width: min(56vw, 190px); }
    .workflow-progress { height: 150px; }
    .workflow-time-readout { grid-template-columns: auto 1fr; }
    .workflow-time-readout span:nth-of-type(2),
    .workflow-time-readout strong:nth-of-type(2) { display: none; }
    .workflow-step { grid-template-columns: 38px minmax(0, 1fr); gap: 0.8rem; padding: 2.5rem 0; }
    .workflow-step h3 { font-size: clamp(1.85rem, 9vw, 2.7rem); }
    .faq-section-heading h2 { font-size: clamp(2.45rem, 12vw, 3.6rem); }
    .faq-item summary { min-height: 74px; gap: 1rem; padding: 1.1rem 0; }
    .faq-answer { padding-right: 0; }
    .faq-page-hero { padding-top: calc(var(--nav-height) + 3.5rem); padding-bottom: 4.5rem; }
    .faq-page-hero h1 { font-size: clamp(3.25rem, 17vw, 5.1rem); line-height: 0.91; }
    .faq-directory { padding-block: 4.5rem 6rem; }
    .faq-jump-nav { flex-direction: column; align-items: flex-start; margin-bottom: 3rem; }
    .faq-topic { padding: 3.5rem 0; }
    .faq-topic-heading { grid-template-columns: 32px minmax(0, 1fr); gap: 0.75rem; }
    .faq-topic-heading .section-eyebrow { margin-left: 44px; }
    .faq-topic-heading h2 { font-size: clamp(2.15rem, 11vw, 3.2rem); }
}

@media (prefers-reduced-motion: reduce) {
    .workflow-playhead,
    .workflow-dial-track,
    .workflow-progress span,
    .workflow-step,
    .faq-icon,
    .faq-icon::after { transition: none !important; }
    .workflow-step { opacity: 1; }
}

/* V7.1 final geometry corrections */
.workflow-section {
    /* Sticky positioning must use the document viewport. Clipping the entire
       section would turn it into the sticky containing block in some engines. */
    overflow: visible;
}

@media (min-width: 821px) {
    .overview-service-row--drone {
        grid-template-columns: 65px minmax(410px, 0.9fr) minmax(390px, 1.1fr);
        column-gap: clamp(3rem, 4.5vw, 4.5rem);
    }
    .overview-service-row--drone .overview-service-copy h3 {
        max-width: 100%;
        font-size: clamp(2.55rem, 3.45vw, 3.35rem);
        letter-spacing: -0.045em;
    }
}

@media (min-width: 821px) and (max-width: 1040px) {
    .overview-service-row--drone {
        grid-template-columns: 45px minmax(340px, 0.95fr) minmax(315px, 1.05fr);
        column-gap: clamp(2rem, 3.8vw, 2.8rem);
    }
    .overview-service-row--drone .overview-service-copy h3 {
        font-size: clamp(2.35rem, 4.7vw, 3rem);
    }
}

/* Long German service names must remain in their editorial column instead of
   extending over the accordion questions. */
.faq-topic {
    grid-template-columns: minmax(360px, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(3rem, 6.5vw, 6rem);
}
.faq-topic-heading h2 {
    min-width: 0;
    max-width: 100%;
    font-size: clamp(2.15rem, 3.2vw, 3.35rem);
    overflow-wrap: break-word;
    hyphens: auto;
}

@media (max-width: 980px) and (min-width: 821px) {
    .faq-topic {
        grid-template-columns: minmax(300px, 0.7fr) minmax(0, 1.3fr);
        gap: 3.5rem;
    }
    .faq-topic-heading h2 { font-size: clamp(2rem, 3.8vw, 2.8rem); }
}

@media (max-width: 820px) {
    .faq-topic { grid-template-columns: 1fr; }
    .faq-topic-heading h2 { font-size: clamp(2.15rem, 9.8vw, 3.4rem); }
}

/* The home page's main wrapper must not become a clipping ancestor, otherwise
   the workflow's sticky editorial panel cannot follow the viewport. */
.site-v4.home-page .content {
    overflow: visible;
}

/* `overflow-x:hidden` turns ancestors into scroll containers and breaks CSS
   sticky in Chromium/WebKit. `clip` prevents horizontal spill without
   stealing the workflow's viewport-based sticky behavior. */
html,
body {
    overflow-x: clip;
}

/* =======================================
   FRAMENEX V9 — SCROLL-REVEAL PROJECT FLOW
   Inspired by the clarity of a step-by-step workflow, but built as an
   original Framenex composition: a sticky introduction and six editorial
   phases that pop into focus as the visitor scrolls.
======================================= */
#steps.workflow-pop-section {
    --workflow-pop-progress: 0;
    --workflow-pop-accent: #9da8ff;
    --workflow-pop-marker: 4.35rem;
    --workflow-pop-marker-column: 6.25rem;
    position: relative;
    z-index: 1;
    overflow: visible;
    padding: clamp(7rem, 11vw, 10.5rem) 0 clamp(6rem, 10vw, 9rem);
    background:
        radial-gradient(circle at 77% 12%, rgba(111, 125, 255, 0.09), transparent 26rem),
        linear-gradient(180deg, #09090a 0%, #0b0b0d 48%, #09090a 100%);
}

#steps.workflow-pop-section::before,
#steps.workflow-pop-section::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    pointer-events: none;
}

#steps.workflow-pop-section::before { top: 0; }
#steps.workflow-pop-section::after { bottom: 0; }

.workflow-pop-layout {
    display: grid;
    grid-template-columns: minmax(270px, 0.68fr) minmax(0, 1.32fr);
    gap: clamp(4rem, 8vw, 9rem);
    align-items: start;
}

.workflow-pop-intro {
    position: sticky;
    top: calc(var(--nav-height) + clamp(2.5rem, 8vh, 6rem));
    align-self: start;
    min-width: 0;
    padding-bottom: 2rem;
}

#steps.workflow-pop-section .workflow-pop-intro h2 {
    max-width: 680px;
    margin: 0;
    padding: 0.06em 0 0.15em;
    color: #f4f4f5;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: currentColor;
    font-family: var(--font-body);
    font-size: clamp(3.05rem, 5.25vw, 5.55rem);
    font-weight: 570;
    line-height: 0.94;
    letter-spacing: -0.058em;
    text-wrap: balance;
}

#steps.workflow-pop-section .workflow-pop-intro h2 span {
    color: #aab2ff;
}

.workflow-pop-intro > p {
    max-width: 510px;
    margin: clamp(1.8rem, 4vw, 2.6rem) 0 0;
    padding-top: 1.35rem;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    color: #a0a0a7;
    font-size: clamp(0.98rem, 1.25vw, 1.08rem);
    line-height: 1.78;
}

.workflow-pop-status {
    display: grid;
    grid-template-columns: auto minmax(80px, 1fr) auto;
    gap: 0.85rem;
    align-items: center;
    max-width: 330px;
    margin-top: 2rem;
    color: #777780;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    font-variant-numeric: tabular-nums;
}

.workflow-pop-status > span:first-child {
    min-width: 1.7rem;
    color: #c4c9ff;
}

.workflow-pop-status i {
    position: relative;
    display: block;
    height: 1px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.16);
}

.workflow-pop-status b {
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--workflow-pop-progress) * 100%);
    background: linear-gradient(90deg, #8e9aff, #bec4ff);
    transition: width 180ms linear;
}

.workflow-pop-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.3rem;
    color: #62626a;
    font-size: 0.64rem;
    font-weight: 650;
    letter-spacing: 0.115em;
    text-transform: uppercase;
}

.workflow-pop-hint::before {
    content: '';
    width: 1.8rem;
    height: 1px;
    background: currentColor;
}

.workflow-pop-stage {
    position: relative;
    min-width: 0;
}

.workflow-pop-list {
    position: relative;
    z-index: 1;
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

.workflow-pop-rail {
    position: absolute;
    z-index: 0;
    top: calc(var(--workflow-pop-marker) / 2);
    bottom: calc(var(--workflow-pop-marker) / 2);
    left: calc(var(--workflow-pop-marker) / 2);
    width: 1px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.14);
    transform: translateX(-50%);
    pointer-events: none;
}

.workflow-pop-rail > span {
    position: absolute;
    inset: 0 0 auto;
    height: calc(var(--workflow-pop-progress) * 100%);
    background: linear-gradient(180deg, #c8ccff 0%, #8794ff 75%, #6874d7 100%);
    box-shadow: 0 0 16px rgba(148, 160, 255, 0.45);
    transition: height 180ms linear;
}

.workflow-pop-step {
    position: relative;
    display: grid;
    grid-template-columns: var(--workflow-pop-marker-column) minmax(0, 1fr);
    gap: clamp(1.4rem, 2.8vw, 2.4rem);
    align-items: center;
    min-height: clamp(450px, 61vh, 640px);
    min-width: 0;
}

.workflow-pop-marker {
    position: relative;
    z-index: 4;
    display: grid;
    place-items: center;
    width: var(--workflow-pop-marker);
    height: var(--workflow-pop-marker);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background: #0b0b0d;
    color: #767680;
    font-size: 0.67rem;
    font-weight: 760;
    letter-spacing: 0.1em;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 9px #0a0a0c;
    transition:
        color 500ms ease,
        border-color 500ms ease,
        background 500ms ease,
        box-shadow 500ms ease,
        transform 650ms cubic-bezier(0.16, 1.35, 0.3, 1);
}

.workflow-pop-marker::after {
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0;
    transform: scale(0);
    transition: opacity 350ms ease, transform 650ms cubic-bezier(0.16, 1.5, 0.3, 1);
}

.workflow-pop-card {
    position: relative;
    z-index: 1;
    max-width: 820px;
    min-width: 0;
    padding: clamp(2.5rem, 5vw, 4.5rem) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.11);
    isolation: isolate;
}

.workflow-pop-step:nth-child(even) .workflow-pop-card {
    margin-left: clamp(0rem, 3vw, 2.75rem);
}

.workflow-pop-card::before {
    content: attr(data-step-number);
    position: absolute;
    z-index: -2;
    top: -0.22em;
    right: -0.02em;
    color: rgba(255, 255, 255, 0.035);
    font-size: clamp(8rem, 15vw, 13rem);
    font-weight: 730;
    line-height: 1;
    letter-spacing: -0.08em;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    transition: color 550ms ease, transform 750ms cubic-bezier(0.16, 1, 0.3, 1);
}

.workflow-pop-card::after {
    content: '';
    position: absolute;
    z-index: -3;
    top: 8%;
    right: -8%;
    width: 72%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(131, 144, 255, 0.13) 0%, rgba(131, 144, 255, 0.045) 38%, transparent 70%);
    opacity: 0;
    transform: scale(0.72);
    transition: opacity 650ms ease, transform 850ms cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.workflow-pop-kicker {
    display: block;
    margin-bottom: clamp(1.15rem, 2.5vw, 1.8rem);
    color: #8d96e9;
    font-size: 0.66rem;
    font-weight: 760;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.workflow-pop-card h3 {
    max-width: 760px;
    margin: 0;
    color: #f2f2f4;
    font-family: var(--font-body);
    font-size: clamp(2.25rem, 4.25vw, 4.55rem);
    font-weight: 565;
    line-height: 0.98;
    letter-spacing: -0.052em;
    text-wrap: balance;
}

.workflow-pop-card p {
    max-width: 650px;
    margin: clamp(1.4rem, 3vw, 2rem) 0 0;
    color: #a4a4ab;
    font-size: clamp(0.98rem, 1.24vw, 1.09rem);
    line-height: 1.76;
}

.workflow-pop-meta {
    display: inline-block;
    margin-top: 1.6rem;
    color: #72727b;
    font-size: 0.64rem;
    font-weight: 680;
    letter-spacing: 0.105em;
    line-height: 1.6;
    text-transform: uppercase;
}

.workflow-pop-cta {
    width: max-content;
    margin-top: 1.8rem;
}

/* The content stays fully usable without JavaScript. With JavaScript, the
   current phase pops into focus while completed phases remain readable. */
html.js .workflow-pop-card {
    opacity: 0.16;
    filter: blur(7px);
    transform: translate3d(0, 76px, 0) scale(0.88);
    transform-origin: 50% 56%;
    transition:
        opacity 520ms ease,
        filter 620ms ease,
        transform 760ms cubic-bezier(0.16, 1.36, 0.3, 1);
}

html.js .workflow-pop-step.is-active .workflow-pop-card {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
}

html.js .workflow-pop-step.is-past .workflow-pop-card {
    opacity: 0.48;
    filter: blur(0);
    transform: translate3d(0, -10px, 0) scale(0.97);
}

html.js .workflow-pop-step.is-active .workflow-pop-card::before {
    color: rgba(161, 171, 255, 0.09);
    transform: translate3d(-0.025em, 0, 0);
}

html.js .workflow-pop-step.is-active .workflow-pop-card::after {
    opacity: 1;
    transform: scale(1);
}

html.js .workflow-pop-step.is-active .workflow-pop-marker {
    border-color: rgba(181, 190, 255, 0.88);
    background: #a6afff;
    color: #09090b;
    box-shadow: 0 0 0 9px #0a0a0c, 0 0 32px rgba(146, 158, 255, 0.26);
    transform: scale(1.09);
}

html.js .workflow-pop-step.is-active .workflow-pop-marker span {
    opacity: 1;
}

html.js .workflow-pop-step.is-past .workflow-pop-marker {
    border-color: rgba(153, 164, 255, 0.55);
    color: #8f99e7;
}

@media (max-width: 1080px) and (min-width: 821px) {
    .workflow-pop-layout {
        grid-template-columns: minmax(245px, 0.62fr) minmax(0, 1.38fr);
        gap: clamp(3rem, 5.5vw, 5rem);
    }

    #steps.workflow-pop-section .workflow-pop-intro h2 {
        font-size: clamp(2.85rem, 5vw, 4.35rem);
    }

    .workflow-pop-card h3 {
        font-size: clamp(2.15rem, 4.25vw, 3.6rem);
    }
}

@media (max-width: 820px) {
    #steps.workflow-pop-section {
        --workflow-pop-marker: 2.9rem;
        --workflow-pop-marker-column: 3.9rem;
        padding: clamp(5.5rem, 18vw, 7rem) 0 clamp(5rem, 16vw, 6.5rem);
    }

    .workflow-pop-layout {
        grid-template-columns: 1fr;
        gap: clamp(3.5rem, 12vw, 5rem);
    }

    .workflow-pop-intro {
        position: relative;
        top: auto;
        padding-bottom: 0;
    }

    #steps.workflow-pop-section .workflow-pop-intro h2 {
        max-width: 650px;
        font-size: clamp(2.75rem, 11.6vw, 4.65rem);
        line-height: 0.95;
    }

    .workflow-pop-intro > p {
        max-width: 620px;
    }

    .workflow-pop-status {
        max-width: 100%;
    }

    .workflow-pop-hint {
        display: none;
    }

    .workflow-pop-step {
        grid-template-columns: var(--workflow-pop-marker-column) minmax(0, 1fr);
        gap: 0.9rem;
        min-height: 0;
        padding: clamp(1.25rem, 4vw, 2rem) 0 clamp(3.6rem, 13vw, 5rem);
        align-items: start;
    }

    .workflow-pop-step:last-child {
        padding-bottom: 0;
    }

    .workflow-pop-marker {
        margin-top: 1.75rem;
        font-size: 0.58rem;
        box-shadow: 0 0 0 7px #0a0a0c;
    }

    .workflow-pop-rail {
        top: calc(var(--workflow-pop-marker) / 2 + 1.75rem);
        bottom: calc(var(--workflow-pop-marker) / 2 + 0.5rem);
        left: calc(var(--workflow-pop-marker) / 2);
    }

    .workflow-pop-step:nth-child(even) .workflow-pop-card {
        margin-left: 0;
    }

    .workflow-pop-card {
        padding: 1.75rem 0 2.65rem;
    }

    .workflow-pop-card::before {
        top: 0;
        right: 0;
        font-size: clamp(6rem, 28vw, 9rem);
    }

    .workflow-pop-card h3 {
        font-size: clamp(2rem, 8.8vw, 3.25rem);
        line-height: 1.01;
    }

    .workflow-pop-card p {
        font-size: 0.98rem;
        line-height: 1.72;
    }

    html.js .workflow-pop-card {
        filter: blur(4px);
        transform: translate3d(0, 46px, 0) scale(0.92);
    }

    html.js .workflow-pop-step.is-past .workflow-pop-card {
        opacity: 0.54;
        transform: translate3d(0, -4px, 0) scale(0.985);
    }

    html.js .workflow-pop-step.is-active .workflow-pop-marker {
        box-shadow: 0 0 0 7px #0a0a0c, 0 0 24px rgba(146, 158, 255, 0.24);
    }
}

@media (max-width: 430px) {
    #steps.workflow-pop-section {
        --workflow-pop-marker: 2.65rem;
        --workflow-pop-marker-column: 3.35rem;
    }

    .workflow-pop-layout {
        width: min(100% - 2rem, 1320px);
    }

    .workflow-pop-step {
        gap: 0.7rem;
    }

    .workflow-pop-card h3 {
        font-size: clamp(1.85rem, 9vw, 2.65rem);
    }

    .workflow-pop-meta {
        font-size: 0.57rem;
        letter-spacing: 0.085em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .workflow-pop-status b,
    .workflow-pop-rail > span,
    .workflow-pop-marker,
    .workflow-pop-marker::after,
    .workflow-pop-card,
    .workflow-pop-card::before,
    .workflow-pop-card::after {
        transition: none !important;
    }

    html.js .workflow-pop-card,
    html.js .workflow-pop-step.is-active .workflow-pop-card,
    html.js .workflow-pop-step.is-past .workflow-pop-card {
        opacity: 1;
        filter: none;
        transform: none;
    }

    html.js .workflow-pop-step .workflow-pop-card::after {
        display: none;
    }
}

/* =======================================
   FRAMENEX V11 — PRODUCTION-READY POLISH
   Final responsive, consent and legal-page corrections.
======================================= */

/* Reliable, high-contrast primary actions on every background. */
.site-v4 .btn-primary,
.site-v4 a.btn-primary,
.site-v4 button.btn-primary,
.site-v4 .form-submit-btn {
    border: 1px solid #b9c1ff !important;
    background: #b9c1ff !important;
    background-image: none !important;
    color: #07070a !important;
    -webkit-text-fill-color: #07070a !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    text-shadow: none !important;
    opacity: 1 !important;
}
.site-v4 .btn-primary *,
.site-v4 .form-submit-btn * {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}
.site-v4 .btn-primary:hover,
.site-v4 .btn-primary:focus-visible,
.site-v4 .form-submit-btn:hover,
.site-v4 .form-submit-btn:focus-visible {
    border-color: #d0d4ff !important;
    background: #d0d4ff !important;
    color: #050507 !important;
    -webkit-text-fill-color: #050507 !important;
}

/* Homepage hero service labels: no separator lines; every point owns its
   spacing so the first point can never sit on top of the word. */
.site-v4 .hero-services {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem clamp(1.1rem, 2.4vw, 2rem) !important;
    max-width: 880px;
    border: 0 !important;
}
.site-v4 .hero-services li,
.site-v4 .hero-services li:first-child {
    position: relative;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 0 0 0 1rem !important;
    border: 0 !important;
    line-height: 1.35;
}
.site-v4 .hero-services li::before,
.site-v4 .hero-services li:first-child::before {
    content: '' !important;
    position: absolute;
    top: 50%;
    left: 0;
    display: block !important;
    width: 6px;
    height: 6px;
    border: 0;
    border-radius: 50%;
    background: #96a2ff;
    box-shadow: 0 0 12px rgba(150, 162, 255, 0.58);
    transform: translateY(-50%);
}
.hero-title-mobile,
.hero-subtitle-mobile {
    display: none;
}

/* The final workflow action should read as a distinct next step. */
.site-v4 .workflow-pop-cta {
    margin-top: clamp(2.8rem, 5vw, 4.4rem) !important;
}

/* Navigation alignment and a forgiving desktop service flyout. */
@media (min-width: 1041px) {
    .site-v4 .nav-toggle { display: none !important; }
    .site-v4 .nav-menu { position: static; transform: none !important; }
    .site-v4 .nav-menu > ul {
        display: flex;
        align-items: center;
        min-height: 46px;
    }
    .site-v4 .nav-menu > ul > li {
        display: flex;
        align-items: center;
        min-height: 46px;
    }
    .site-v4 .nav-menu > ul > li > a,
    .site-v4 .nav-services-trigger,
    .site-v4 .nav-services-trigger > .nav-services-link,
    .site-v4 .nav-submenu-toggle {
        min-height: 46px;
        line-height: 1;
    }
    .site-v4 .nav-services-trigger,
    .site-v4 .nav-services-trigger > .nav-services-link {
        display: inline-flex;
        align-items: center;
    }
    .site-v4 .nav-submenu {
        top: calc(100% - 1px) !important;
        padding-top: 1rem;
    }
    .site-v4 .nav-submenu::before {
        content: '';
        position: absolute;
        right: 0;
        bottom: 100%;
        left: 0;
        display: block;
        height: 22px;
        background: transparent;
    }
}

/* Pointer users should not receive a frame around a project after closing it.
   Keyboard focus remains clear through the text/action treatment below. */
.site-v4 .reference-card,
.site-v4 .reference-card:focus,
.site-v4 .reference-card:focus-visible,
.site-v4 .reference-card.portfolio-item,
.site-v4 .reference-card.portfolio-item:focus,
.site-v4 .reference-card.portfolio-item:focus-visible,
.site-v4 .highlights-strip .hl-item,
.site-v4 .highlights-strip .hl-item:focus,
.site-v4 .highlights-strip .hl-item:focus-visible {
    border: 0 !important;
    outline: 0 !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}
.site-v4 .reference-card::before,
.site-v4 .reference-card::after,
.site-v4 .hl-item::after {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}
html.using-keyboard .site-v4 .reference-card:focus-visible .reference-card-title,
html.using-keyboard .site-v4 .hl-item:focus-visible .hl-caption p {
    color: #b8c0ff;
}
html.using-keyboard .site-v4 .reference-card:focus-visible .reference-card-open {
    opacity: 1;
    transform: translateY(0);
}

/* FAQ geometry: every grid item may shrink and every long German question
   wraps inside its own column. */
.site-v4 .faq-section-grid,
.site-v4 .faq-section-grid > *,
.site-v4 .faq-list,
.site-v4 .faq-item,
.site-v4 .faq-item summary,
.site-v4 .faq-question,
.site-v4 .faq-answer,
.site-v4 .faq-topic,
.site-v4 .faq-topic > * {
    min-width: 0;
    max-width: 100%;
}
.site-v4 .faq-question {
    overflow-wrap: anywhere;
    hyphens: auto;
}
.site-v4 .faq-item summary {
    width: 100%;
    overflow: hidden;
}
.site-v4 .faq-answer {
    box-sizing: border-box;
}
@media (max-width: 1120px) {
    .site-v4 .drone-page .faq-section-grid,
    .site-v4.drone-page .faq-section-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: clamp(2.25rem, 6vw, 3.75rem) !important;
    }
    .site-v4 .drone-page .faq-section-heading,
    .site-v4.drone-page .faq-section-heading {
        position: static !important;
        max-width: 680px;
    }
}

/* ---------- Modern legal pages ---------- */
.site-v4.legal-page {
    background: #09090a;
}
.site-v4.legal-page .content,
.site-v4.legal-page .legal-main,
.site-v4.legal-page main {
    padding: 0 !important;
    overflow: visible;
    background: #09090a;
}
.legal-shell {
    width: min(calc(100% - clamp(2.5rem, 8vw, 8rem)), 1280px);
    margin-inline: auto;
}
.legal-hero {
    position: relative;
    isolation: isolate;
    padding: calc(var(--nav-height) + clamp(4.5rem, 9vw, 8rem)) 0 clamp(4.5rem, 8vw, 7rem);
    overflow: hidden;
    background:
        radial-gradient(circle at 78% 24%, rgba(130, 145, 255, 0.12), transparent 31%),
        linear-gradient(180deg, #09090a 0%, #0c0c0e 100%);
    border-bottom: 1px solid rgba(255,255,255,0.09);
}
.legal-hero::after {
    content: '';
    position: absolute;
    z-index: -1;
    right: clamp(-12rem, -8vw, -4rem);
    bottom: -19rem;
    width: clamp(26rem, 46vw, 48rem);
    aspect-ratio: 1;
    border: 1px solid rgba(166,175,255,0.13);
    border-radius: 50%;
    box-shadow: inset 0 0 0 5rem rgba(255,255,255,0.007), inset 0 0 0 10rem rgba(255,255,255,0.006);
}
.legal-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.46fr);
    gap: clamp(3.5rem, 9vw, 9rem);
    align-items: end;
}
.legal-hero-copy,
.legal-hero-aside,
.legal-layout,
.legal-article,
.legal-section,
.legal-section > div {
    min-width: 0;
}
.legal-hero .breadcrumbs {
    margin-bottom: clamp(2.8rem, 5vw, 4.5rem);
}
.legal-hero h1 {
    max-width: 920px;
    margin: 0;
    color: #f5f5f6;
    font-family: var(--font-body);
    font-size: clamp(3.7rem, 8.1vw, 8.35rem);
    font-weight: 555;
    line-height: 0.9;
    letter-spacing: -0.068em;
    text-wrap: balance;
}
.legal-hero h1 span {
    color: #9da8ff;
}
.legal-hero-copy > p {
    max-width: 720px;
    margin: 1.75rem 0 0;
    color: #9a9aa2;
    font-size: clamp(1rem, 1.45vw, 1.16rem);
    line-height: 1.78;
}
.legal-hero-aside {
    padding: 1.35rem 0 0;
    border-top: 1px solid rgba(255,255,255,0.18);
}
.legal-hero-aside > span {
    display: block;
    color: #74747c;
    font-size: 0.63rem;
    font-weight: 720;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}
.legal-hero-aside strong {
    display: block;
    margin-top: 0.75rem;
    color: #f1f1f3;
    font-family: var(--font-body);
    font-size: clamp(1.45rem, 2.5vw, 2.25rem);
    font-weight: 570;
    line-height: 1.15;
    letter-spacing: -0.035em;
}
.legal-hero-aside p {
    margin: 1rem 0 0;
    color: #85858c;
    font-size: 0.86rem;
    line-height: 1.72;
}
.legal-hero-aside a {
    display: block;
    width: fit-content;
    margin-top: 0.65rem;
    color: #c5caff;
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(197,202,255,0.42);
}
.legal-settings-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 1.35rem;
    padding: 0.72rem 1rem;
    border: 1px solid rgba(178,187,255,0.55);
    border-radius: 2px;
    background: rgba(154,166,255,0.08);
    color: #e6e8ff;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 680;
    cursor: pointer;
}
.legal-settings-button:hover,
.legal-settings-button:focus-visible {
    border-color: #bdc5ff;
    background: #bdc5ff;
    color: #07070a;
}
.legal-content-section {
    padding: clamp(5.5rem, 9vw, 8.5rem) 0 clamp(7rem, 12vw, 11rem);
    background: #0e0e10;
}
.legal-layout {
    display: grid;
    grid-template-columns: minmax(190px, 0.3fr) minmax(0, 1fr);
    gap: clamp(4rem, 10vw, 10rem);
    align-items: start;
}
.legal-toc {
    position: sticky;
    top: calc(var(--nav-height) + 2rem);
    display: grid;
    gap: 0.3rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.16);
}
.legal-toc p {
    margin: 0 0 0.75rem;
    color: #6f6f77;
    font-size: 0.62rem;
    font-weight: 720;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}
.legal-toc a {
    padding: 0.42rem 0;
    color: #85858d;
    font-size: 0.82rem;
    line-height: 1.4;
}
.legal-toc a:hover,
.legal-toc a:focus-visible {
    color: #dfe2ff;
}
.legal-updated {
    margin: 0 0 clamp(2rem, 5vw, 4rem);
    color: #72727a;
    font-size: 0.7rem;
    font-weight: 650;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
.legal-section {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: clamp(1.2rem, 3vw, 2.5rem);
    padding: clamp(3.2rem, 6vw, 5.25rem) 0;
    border-top: 1px solid rgba(255,255,255,0.13);
    scroll-margin-top: calc(var(--nav-height) + 2rem);
}
.legal-section:first-of-type {
    padding-top: 0;
    border-top: 0;
}
.legal-section-number {
    padding-top: 0.55rem;
    color: #929cff;
    font-size: 0.64rem;
    font-weight: 760;
    letter-spacing: 0.1em;
    font-variant-numeric: tabular-nums;
}
.legal-section h2 {
    margin: 0 0 1.35rem !important;
    color: #f1f1f3 !important;
    font-family: var(--font-body);
    font-size: clamp(2rem, 4.2vw, 3.75rem);
    font-weight: 550;
    line-height: 1.02;
    letter-spacing: -0.05em;
}
.legal-section p,
.legal-section li,
.legal-address,
.legal-facts dd {
    color: #9a9aa1 !important;
    font-size: clamp(0.92rem, 1.1vw, 1rem) !important;
    line-height: 1.85 !important;
}
.legal-section p {
    max-width: 790px;
    margin: 0 0 1.15rem !important;
}
.legal-section p:last-child {
    margin-bottom: 0 !important;
}
.legal-section strong,
.legal-address strong {
    color: #ededf0;
    font-weight: 620;
}
.legal-section a {
    color: #c0c6ff !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(192,198,255,0.4);
}
.legal-address {
    max-width: 620px;
    margin: 1.35rem 0;
    padding: 1.25rem 1.35rem;
    border-left: 2px solid #929dff;
    background: rgba(255,255,255,0.025);
    font-style: normal;
}
.legal-facts {
    margin: 0;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}
.legal-facts > div {
    display: grid;
    grid-template-columns: minmax(155px, 0.42fr) minmax(0, 1fr);
    gap: 1.5rem;
    padding: 1.05rem 0;
    border-top: 1px solid rgba(255,255,255,0.12);
}
.legal-facts dt {
    color: #74747b;
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.55;
    text-transform: uppercase;
}
.legal-facts dd {
    margin: 0;
    color: #c4c4c9 !important;
}
.legal-section code {
    display: inline;
    padding: 0.15em 0.4em;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 2px;
    background: rgba(255,255,255,0.045);
    color: #d9dcff;
    font-size: 0.86em;
    overflow-wrap: anywhere;
}
.legal-review-note {
    margin-top: 1.8rem !important;
    padding: 1.25rem 1.35rem;
    border: 1px solid rgba(164,174,255,0.2);
    background: rgba(148,159,255,0.045);
    color: #85858d !important;
    font-size: 0.83rem !important;
}

/* ---------- Tablet and mobile navigation/layout ---------- */
@media (max-width: 1040px) {
    :root { --nav-height: 4.75rem; }

    .site-v4 .navbar {
        height: var(--nav-height);
        padding: 0 clamp(1rem, 3vw, 1.75rem);
        gap: 1rem;
    }
    .site-v4 .navbar > .logo {
        width: clamp(155px, 24vw, 205px);
        height: auto;
        flex: 0 1 auto;
    }
    .site-v4 .navbar > .logo img {
        width: 100%;
        height: auto;
    }
    .site-v4 .nav-toggle {
        display: block !important;
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        margin: 0;
    }
    .site-v4 .nav-menu {
        position: fixed !important;
        z-index: 999;
        inset: 0;
        display: flex;
        justify-content: flex-start;
        align-items: stretch;
        width: 100%;
        height: 100dvh;
        padding: calc(var(--nav-height) + clamp(2rem, 7vh, 4rem)) clamp(1.5rem, 8vw, 5rem) 3rem !important;
        overflow-y: auto;
        background: rgba(8,8,9,0.985);
        transform: translateX(100%) !important;
        transition: transform 0.34s cubic-bezier(.2,.75,.2,1);
    }
    .site-v4 .nav-menu.active {
        transform: translateX(0) !important;
    }
    .site-v4 .nav-menu > ul {
        display: flex !important;
        flex-direction: column;
        align-items: stretch !important;
        width: min(100%, 620px);
        min-height: 0;
        margin: 0 auto;
        gap: 0.35rem !important;
    }
    .site-v4 .nav-menu > ul > li {
        display: block;
        width: 100%;
        min-height: 0;
    }
    .site-v4 .nav-menu > ul > li > a,
    .site-v4 .nav-services-trigger > .nav-services-link,
    .site-v4 .nav-menu > ul > li:last-child > a {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 54px;
        margin: 0;
        padding: 0.65rem 0 !important;
        border: 0 !important;
        color: rgba(255,255,255,0.78);
        font-size: clamp(1.45rem, 4.4vw, 2.15rem);
        line-height: 1.1;
    }
    .site-v4 .nav-menu li a::after {
        display: none !important;
    }
    .site-v4 .nav-services-trigger {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 52px;
        align-items: center;
        width: 100%;
        min-height: 54px;
    }
    .site-v4 .nav-submenu-toggle {
        display: block;
        width: 52px;
        height: 52px;
        min-height: 52px;
        flex: 0 0 52px;
    }
    .site-v4 .nav-submenu {
        position: static !important;
        display: grid !important;
        min-width: 0;
        max-height: 0;
        gap: 0;
        margin: 0;
        padding: 0 0 0 1rem !important;
        overflow: hidden;
        border: 0 !important;
        border-left: 1px solid rgba(255,255,255,0.14) !important;
        background: transparent !important;
        box-shadow: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: none !important;
        transition: max-height .32s ease, opacity .22s ease, margin .32s ease, visibility 0s linear .32s !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .site-v4 .nav-item--services:hover > .nav-submenu,
    .site-v4 .nav-item--services:focus-within > .nav-submenu {
        max-height: 0;
        margin: 0;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    .site-v4 .nav-item--services.submenu-open > .nav-submenu,
    .site-v4 .nav-item--services.submenu-open:hover > .nav-submenu,
    .site-v4 .nav-item--services.submenu-open:focus-within > .nav-submenu {
        max-height: 360px;
        margin-top: 0.55rem;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transition-delay: 0s !important;
    }
    .site-v4 .nav-submenu li a,
    .site-v4 .nav-submenu li:last-child a {
        min-height: 42px;
        padding: 0.52rem 0.75rem !important;
        font-size: clamp(0.96rem, 2.7vw, 1.1rem) !important;
        white-space: normal;
    }

    /* Portrait tablets use calm single-column compositions instead of squeezed
       desktop grids. */
    .site-v4 .service-detail-hero,
    .site-v4 .service-content-grid,
    .site-v4 .service-story-section,
    .site-v4 .drone-equipment-section,
    .site-v4 .pricing-philosophy-grid,
    .site-v4 .price-guidance-grid,
    .site-v4 .equipment-editorial-grid,
    .site-v4 .faq-section-grid,
    .site-v4 .faq-page-hero-grid,
    .site-v4 .faq-topic {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .site-v4 .service-detail-hero {
        width: min(calc(100% - clamp(2.5rem, 8vw, 5rem)), 900px);
        gap: clamp(2.5rem, 7vw, 4.5rem);
        padding-top: calc(var(--nav-height) + clamp(3.5rem, 8vw, 5.5rem));
    }
    .site-v4 .service-detail-copy,
    .site-v4 .service-detail-visual {
        min-width: 0;
        max-width: 100%;
    }
    .site-v4 .service-detail-visual {
        width: 100%;
        max-width: 820px;
    }
    .site-v4 .service-detail-visual img {
        width: 100%;
        height: auto;
        max-height: 640px;
        object-fit: cover;
    }
    .site-v4 .service-content-grid header,
    .site-v4 .faq-section-heading,
    .site-v4 .faq-topic-heading {
        position: static !important;
    }
    .site-v4 .faq-section-grid,
    .site-v4 .faq-topic {
        gap: clamp(2.5rem, 7vw, 4.5rem) !important;
    }
    .site-v4 .overview-service-row,
    .site-v4 .overview-service-row--drone {
        grid-template-columns: 45px minmax(0, 1fr) !important;
        gap: clamp(1.5rem, 5vw, 2.5rem) !important;
    }
    .site-v4 .overview-service-row .overview-service-image,
    .site-v4 .overview-service-row--drone .overview-service-image {
        grid-column: 2 !important;
        width: 100%;
    }
    .site-v4 .overview-service-row--drone .overview-service-copy {
        padding-right: 0;
    }

    /* Workflow behaves like its mobile vertical version on portrait tablets. */
    #steps.workflow-pop-section {
        --workflow-pop-marker: 3.25rem;
        --workflow-pop-marker-column: 4.4rem;
        padding: clamp(6rem, 12vw, 8rem) 0;
    }
    .workflow-pop-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: clamp(3.5rem, 8vw, 5.5rem) !important;
    }
    .workflow-pop-intro {
        position: relative !important;
        top: auto !important;
        max-width: 760px;
    }
    .workflow-pop-hint { display: none; }
    .workflow-pop-step {
        grid-template-columns: var(--workflow-pop-marker-column) minmax(0, 1fr);
        gap: clamp(0.9rem, 3vw, 1.5rem);
        min-height: 0 !important;
        padding: clamp(1.8rem, 4vw, 2.8rem) 0 clamp(4rem, 9vw, 6rem);
        align-items: start;
    }
    .workflow-pop-step:last-child { padding-bottom: 0; }
    .workflow-pop-marker {
        margin-top: 1.7rem;
        box-shadow: 0 0 0 8px #0a0a0c;
    }
    .workflow-pop-rail {
        top: calc(var(--workflow-pop-marker) / 2 + 1.7rem);
        bottom: calc(var(--workflow-pop-marker) / 2 + .65rem);
        left: calc(var(--workflow-pop-marker) / 2);
    }
    .workflow-pop-step:nth-child(even) .workflow-pop-card { margin-left: 0; }
    .workflow-pop-card { padding: 1.8rem 0 3rem; }
    .workflow-pop-card h3 { font-size: clamp(2.35rem, 6.5vw, 4rem); }
    html.js .workflow-pop-card {
        filter: blur(4px);
        transform: translate3d(0, 48px, 0) scale(.93);
    }
    html.js .workflow-pop-step.is-past .workflow-pop-card {
        opacity: .52;
        transform: translate3d(0, -4px, 0) scale(.985);
    }

    /* Tablet references. */
    .site-v4 .references-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(3.5rem, 7vw, 5rem) clamp(1.5rem, 4vw, 2.5rem);
    }
    .site-v4 .reference-card-wrap--wide,
    .site-v4 .reference-card-wrap--standard,
    .site-v4 .reference-card-wrap--half {
        grid-column: span 1;
    }
    .site-v4 .reference-card-wrap--wide .reference-card-media,
    .site-v4 .reference-card-wrap--standard .reference-card-media,
    .site-v4 .reference-card-wrap--half .reference-card-media {
        aspect-ratio: 4 / 3;
    }

    .legal-hero-grid,
    .legal-layout {
        grid-template-columns: minmax(0, 1fr);
    }
    .legal-hero-grid { gap: 3rem; }
    .legal-hero-aside { max-width: 680px; }
    .legal-layout { gap: 4rem; }
    .legal-toc {
        position: static;
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem 1.2rem;
        padding: 1rem 0;
        border-top: 1px solid rgba(255,255,255,0.15);
        border-bottom: 1px solid rgba(255,255,255,0.15);
    }
    .legal-toc p { flex-basis: 100%; margin-bottom: 0.3rem; }
}

@media (min-width: 821px) and (max-width: 1040px) {
    .site-v4 .reference-filters {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1px;
        width: 100%;
        margin-right: 0;
        padding: 1px;
        overflow: visible;
        border: 0;
        background: rgba(255,255,255,0.13);
    }
    .site-v4 .reference-filter {
        justify-content: space-between;
        min-height: 52px;
        padding: 0.8rem 0.95rem;
        background: #111113;
    }
    .site-v4 .reference-filter::after {
        right: auto;
        bottom: 0;
        width: 100%;
    }
}

@media (max-width: 820px) {
    .site-v4 .reference-filters {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1px;
        width: 100% !important;
        margin-right: 0 !important;
        padding: 1px !important;
        overflow: visible;
        border: 0;
        background: rgba(255,255,255,0.13);
    }
    .site-v4 .reference-filter {
        justify-content: space-between;
        min-width: 0;
        min-height: 52px;
        padding: 0.8rem 0.9rem;
        background: #111113;
        font-size: 0.82rem;
        text-align: left;
    }
    .site-v4 .reference-filter::after {
        right: auto;
        bottom: 0;
        width: 100%;
    }
    .site-v4 .references-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 600px) {
    .site-v4 #hero.home-hero {
        min-height: 100svh;
        padding: calc(var(--nav-height) + 2.8rem) 1.15rem 3.5rem;
        align-items: flex-end;
    }
    .site-v4 .hero-shade {
        background:
            linear-gradient(180deg, rgba(4,4,5,.30) 0%, rgba(4,4,5,.12) 26%, rgba(4,4,5,.38) 58%, rgba(4,4,5,.95) 100%),
            linear-gradient(90deg, rgba(4,4,5,.42), rgba(4,4,5,.06) 78%);
    }
    .site-v4 .home-hero .hero-content {
        max-width: 520px;
        margin: 0;
    }
    .site-v4 .hero-eyebrow,
    .site-v4 .hero-title-desktop,
    .site-v4 .hero-subtitle-desktop,
    .site-v4 .home-hero .hero-assurance,
    .site-v4 .hero-services,
    .site-v4 .hero-scroll {
        display: none !important;
    }
    .site-v4 .hero-title-mobile,
    .site-v4 .hero-subtitle-mobile {
        display: block;
    }
    .site-v4 .home-hero .hero-content h1 {
        max-width: 100%;
        font-size: clamp(2.35rem, 12.1vw, 3.45rem);
        line-height: 0.97;
        letter-spacing: -0.06em;
        text-wrap: initial;
    }
    .site-v4 .hero-title-mobile .hero-brand {
        display: block;
        margin-bottom: 0.28rem;
        color: #aeb6ff;
        font-size: 1em;
    }
    .site-v4 .hero-title-mobile-line {
        display: block;
        max-width: 13.5em;
        color: #fff;
        font-size: 0.63em;
        font-weight: 560;
        line-height: 1.08;
        letter-spacing: -0.04em;
    }
    .site-v4 .home-hero .hero-subtitle {
        max-width: 30rem;
        margin-top: 1rem;
        font-size: 0.94rem;
        line-height: 1.55;
    }
    .site-v4 .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.6rem;
        width: min(100%, 330px);
        margin-top: 1.35rem;
    }
    .site-v4 .hero-actions .btn-primary,
    .site-v4 .hero-actions .btn-secondary {
        width: 100%;
        min-height: 46px;
        padding: 0.72rem 1rem;
        white-space: normal;
    }

    .site-v4 .service-detail-hero {
        width: calc(100% - 2rem);
        padding-top: calc(var(--nav-height) + 3rem);
    }
    .site-v4 .service-detail-hero h1,
    .site-v4.drone-page .service-detail-hero h1 {
        max-width: 100%;
        font-size: clamp(2.15rem, 10.6vw, 3.1rem);
        line-height: 1;
        letter-spacing: -0.055em;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }
    .site-v4 .faq-section,
    .site-v4 .faq-directory {
        overflow: clip;
    }
    .site-v4 .faq-section-grid,
    .site-v4 .faq-topic,
    .site-v4 .faq-list,
    .site-v4 .faq-item,
    .site-v4 .faq-item summary {
        width: 100%;
    }
    .site-v4 .faq-section-heading h2 {
        font-size: clamp(2.25rem, 11vw, 3.25rem);
        overflow-wrap: anywhere;
    }
    .site-v4 .faq-item summary {
        grid-template-columns: minmax(0, 1fr) 30px;
        gap: 0.8rem;
        min-height: 68px;
    }
    .site-v4 .faq-question {
        font-size: 0.96rem;
        line-height: 1.45;
    }
    .site-v4 .faq-answer {
        width: 100%;
        padding-right: 0;
    }

    #steps.workflow-pop-section {
        --workflow-pop-marker: 2.75rem;
        --workflow-pop-marker-column: 3.55rem;
    }
    .workflow-pop-layout {
        width: min(calc(100% - 2rem), 1320px);
    }
    .workflow-pop-step { gap: 0.7rem; }
    .workflow-pop-card h3 { font-size: clamp(1.85rem, 9vw, 2.75rem); }
    .workflow-pop-card p { font-size: 0.95rem; line-height: 1.7; }
    .workflow-pop-meta { font-size: 0.57rem; letter-spacing: 0.08em; }

    .legal-shell {
        width: calc(100% - 2rem);
    }
    .legal-hero {
        padding-top: calc(var(--nav-height) + 3.5rem);
        padding-bottom: 4.5rem;
    }
    .legal-hero h1 {
        max-width: 100%;
        font-size: clamp(3rem, 15.2vw, 4.8rem);
        line-height: 0.93;
        letter-spacing: -0.065em;
        overflow-wrap: anywhere;
    }
    .legal-hero-copy > p { font-size: 0.96rem; line-height: 1.7; }
    .legal-content-section { padding-block: 4.5rem 6rem; }
    .legal-toc {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.15rem 1rem;
    }
    .legal-toc p { grid-column: 1 / -1; }
    .legal-section {
        grid-template-columns: 31px minmax(0, 1fr);
        gap: 0.85rem;
        padding: 3.2rem 0;
    }
    .legal-section h2 { font-size: clamp(1.9rem, 9.5vw, 2.85rem); }
    .legal-section p,
    .legal-section li,
    .legal-address,
    .legal-facts dd { font-size: 0.92rem !important; line-height: 1.78 !important; }
    .legal-address { padding: 1rem 1.05rem; }
    .legal-facts > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.35rem;
    }
    .legal-settings-button { width: 100%; }
}

@media (max-width: 360px) {
    .site-v4 .navbar > .logo { width: 148px; }
    .site-v4 .reference-filters { grid-template-columns: minmax(0, 1fr); }
    .site-v4 .home-hero .hero-content h1 { font-size: clamp(2.1rem, 11.7vw, 2.75rem); }
    .site-v4 .hero-title-mobile-line { font-size: 0.61em; }
    .legal-toc { grid-template-columns: minmax(0, 1fr); }
    .legal-hero h1 { font-size: clamp(2.65rem, 14vw, 3.55rem); }
}

@media (prefers-reduced-motion: reduce) {
    .site-v4 .nav-menu,
    .legal-settings-button,
    .site-v4 .btn-primary,
    .site-v4 .reference-card-title,
    .site-v4 .reference-card-open {
        transition: none !important;
    }
}

/* V11 final production corrections */
.site-v4 .workflow-pop-card .workflow-pop-cta {
    display: flex !important;
    width: max-content;
    margin-top: clamp(2.8rem, 5vw, 4.4rem) !important;
}

/* V11 final mobile FAQ containment */
@media (max-width: 820px) {
    .site-v4 .faq-section > .section-shell.faq-section-grid,
    .site-v4 .faq-directory > .section-shell {
        width: min(calc(100% - 2.5rem), 1240px) !important;
        margin-inline: auto !important;
    }

    .site-v4.drone-page #faq-drohnenaufnahmen .faq-section-heading h2 {
        max-width: 100%;
        font-size: clamp(1.9rem, 9vw, 2.4rem);
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }
}

@media (max-width: 360px) {
    .site-v4 .faq-section > .section-shell.faq-section-grid,
    .site-v4 .faq-directory > .section-shell {
        width: calc(100% - 2rem) !important;
    }
}

/* =======================================
   FRAMENEX V12 — FINALER FEINSCHLIFF
   Robust CTA contrast, link-like cookie control and collision-free drone FAQ.
======================================= */

/* The consultation action uses its own explicit label layer. This avoids
   inherited gradient-text rules in WebKit/Safari and increases legibility on
   every hero and service landing page. */
.site-v4 .consultation-cta,
.site-v4 a.consultation-cta {
    position: relative;
    isolation: isolate;
    min-height: 54px;
    padding: 0.9rem 1.5rem;
    border: 1px solid #f2f3f8 !important;
    border-radius: 2px;
    background: #f2f3f8 !important;
    background-image: none !important;
    color: #08080a !important;
    -webkit-text-fill-color: #08080a !important;
    font-family: var(--font-body) !important;
    font-size: 0.98rem !important;
    font-weight: 760 !important;
    font-style: normal !important;
    line-height: 1.2 !important;
    letter-spacing: 0.005em !important;
    text-align: center;
    text-decoration: none !important;
    text-shadow: none !important;
    text-transform: none;
    white-space: normal;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    -webkit-font-smoothing: antialiased;
}

.site-v4 .consultation-cta::before,
.site-v4 .consultation-cta::after {
    display: none !important;
    content: none !important;
}

.site-v4 .consultation-cta .consultation-cta-label {
    position: relative;
    z-index: 1;
    display: inline-block;
    max-width: 100%;
    background: none !important;
    color: #08080a !important;
    -webkit-text-fill-color: #08080a !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    font: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

.site-v4 .consultation-cta:hover,
.site-v4 .consultation-cta:focus-visible {
    border-color: #ffffff !important;
    background: #ffffff !important;
    color: #050506 !important;
    -webkit-text-fill-color: #050506 !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.24) !important;
    transform: translateY(-1px) !important;
}

.site-v4 .consultation-cta:hover .consultation-cta-label,
.site-v4 .consultation-cta:focus-visible .consultation-cta-label {
    color: #050506 !important;
    -webkit-text-fill-color: #050506 !important;
}

/* The recurring CTA-band label is now a high-contrast tag rather than small
   low-contrast eyebrow text. */
.site-v4 .cta-band .section-eyebrow {
    display: inline-flex;
    align-items: center;
    width: max-content;
    max-width: 100%;
    min-height: 34px;
    margin-bottom: 1.15rem;
    padding: 0.45rem 0.72rem;
    border-radius: 2px;
    background: #09090b;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 0.78rem;
    font-weight: 760;
    line-height: 1.2;
    letter-spacing: 0.095em;
    text-shadow: none;
    opacity: 1;
}

.site-v4 .cta-band .section-eyebrow::before {
    display: none !important;
    content: none !important;
}

/* Footer cookie settings must behave like a button, but look exactly like the
   surrounding footer links. Explicitly reset native button chrome on Safari,
   Firefox and Chromium. */
.site-v4 .site-footer-column .fnx-cookie-settings-btn {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: inline-block !important;
    align-self: flex-start;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #7d7d84 !important;
    -webkit-text-fill-color: #7d7d84 !important;
    font: inherit !important;
    font-family: var(--font-body) !important;
    font-size: 0.82rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: normal !important;
    text-align: left !important;
    text-decoration: none !important;
    text-transform: none !important;
    text-shadow: none !important;
    cursor: pointer;
    opacity: 1 !important;
}

.site-v4 .site-footer-column .fnx-cookie-settings-btn:hover {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.site-v4 .site-footer-column .fnx-cookie-settings-btn:focus-visible {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    outline: 1px solid #9da8ff !important;
    outline-offset: 4px !important;
}

/* Drone FAQ: keep the editorial two-column composition on larger screens,
   but reserve enough physical width for the long German heading. */
.site-v4.drone-page #faq-drohnenaufnahmen .faq-section-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(4rem, 5vw, 5rem);
}

.site-v4.drone-page #faq-drohnenaufnahmen .faq-section-heading {
    min-width: 0;
    max-width: none;
}

.site-v4.drone-page #faq-drohnenaufnahmen .faq-section-heading h2 {
    max-width: 100%;
    font-size: clamp(3rem, 3.5vw, 3.5rem);
    line-height: 1.01;
    letter-spacing: -0.05em;
    overflow: visible;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

.site-v4.drone-page #faq-drohnenaufnahmen .faq-title-line {
    display: block;
    width: max-content;
    max-width: 100%;
}

.site-v4.drone-page #faq-drohnenaufnahmen .faq-title-line--long {
    white-space: nowrap;
}

@media (max-width: 1120px) {
    .site-v4.drone-page #faq-drohnenaufnahmen .faq-section-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: clamp(2.5rem, 6vw, 4rem) !important;
    }

    .site-v4.drone-page #faq-drohnenaufnahmen .faq-section-heading {
        position: static !important;
        width: 100%;
        max-width: 760px;
    }

    .site-v4.drone-page #faq-drohnenaufnahmen .faq-section-heading h2 {
        font-size: clamp(2.55rem, 6vw, 3.35rem);
    }
}

@media (max-width: 600px) {
    .site-v4 .consultation-cta,
    .site-v4 a.consultation-cta {
        min-height: 52px;
        padding: 0.84rem 1rem;
        font-size: 0.94rem !important;
    }

    .site-v4.drone-page #faq-drohnenaufnahmen .faq-section-heading h2 {
        font-size: clamp(1.82rem, 8.3vw, 2.2rem);
        line-height: 1.04;
        letter-spacing: -0.052em;
    }
}

@media (max-width: 340px) {
    .site-v4.drone-page #faq-drohnenaufnahmen .faq-section-heading h2 {
        font-size: 1.78rem;
    }
}

@media (max-width: 600px) {
    .site-v4 .hero-actions .consultation-cta,
    .site-v4 .page-hero-actions .consultation-cta {
        min-height: 52px !important;
        padding-block: 0.84rem !important;
    }
}