/* ========================================
   brandmediale Theme CSS
   ======================================== */

:root {
    --color-dark: #340A22;
    --color-dark-rgb: 52, 10, 34;
    --color-white: #ffffff;
    --color-light: #F4F4F2;
    --color-gray: #86868b;
    --color-border: #EBEBEB;
    --color-accent: #FF575A;
    --color-bg: #FFFFFF;
    --color-text: #340A22;
    --color-text-secondary: #86868b;
    --color-surface: #F5F5F3;
    --color-nav-scrolled: #fff;
    --color-nav-border: rgba(0, 0, 0, 0.06);
    --color-card-bg: #ffffff;
    --rosa-opacity: 0;
    --font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-serif: 'STIX Two Text', Georgia, 'Times New Roman', serif;
    --container-max: 1400px;
    --nav-height: 72px;
    --radius: 0;
    --transition: 0.3s ease;
}

/* Dark Mode – nur manuell via Toggle, kein prefers-color-scheme */

[data-theme="dark"] {
    --color-dark: #f0f0f0;
    --color-dark-rgb: 240, 240, 240;
    --color-white: #0a0a09;
    --color-light: #111110;
    --color-gray: #888;
    --color-border: #1e1e1d;
    --color-accent: #E8A0C0;
    --color-bg: #0a0a09;
    --color-text: #efefed;
    --color-text-secondary: #888;
    --color-surface: #111110;
    --color-nav-scrolled: #0a0a09;
    --color-nav-border: rgba(255, 255, 255, 0.05);
    --color-card-bg: #111110;
    --rosa-opacity: 0.3;
}

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

html {
    font-size: clamp(15px, 1vw, 18px);
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}

/* 4K ohne Windows-Skalierung: ab 3200px CSS-Pixel (= 4K@100% oder 5K@125%) */
@media (min-width: 3200px) {
    html { font-size: clamp(20px, 1.1vw, 28px); }
    :root { --container-max: 2400px; --nav-height: 5rem; }
}

@media (min-width: 3800px) {
    html { font-size: clamp(24px, 1.2vw, 34px); }
    :root { --container-max: 2800px; --nav-height: 5.5rem; }
}

body {
    font-family: var(--font-family);
    font-weight: 400;
    color: var(--color-text);
    line-height: 1.6;
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background 0.5s ease, color 0.5s ease;
}

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

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

/* ---- Base Typography ---- */
h1, h2, h3 {
    font-weight: 400;
    line-height: 1.15;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.02em;
    color: var(--color-dark);
}

h1 {
    font-family: var(--font-serif);
}

h2, h3, h4, h5, h6 {
    font-family: var(--font-family);
    letter-spacing: -0.01em;
}

h4, h5, h6 {
    font-family: var(--font-family);
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-dark);
}

h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); margin-bottom: 24px; }
h2 { font-size: clamp(1.75rem, 3.5vw, 3rem); margin-bottom: 20px; }
h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); margin-bottom: 16px; }
h4 { font-size: 1.125rem; margin-bottom: 12px; }
h5 { font-size: 0.9375rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
h6 { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-gray); margin-bottom: 8px; }

p {
    font-size: 1rem;
    line-height: 1.7;
    color: #3a3a3c;
    margin-bottom: 16px;
}

p:last-child { margin-bottom: 0; }

ul, ol {
    padding-left: 1.5em;
    margin-bottom: 16px;
    color: var(--color-gray);
    line-height: 1.7;
}

blockquote {
    font-family: var(--font-family);
    font-style: italic;
    font-size: 1.25rem;
    line-height: 1.6;
    padding-left: 24px;
    border-left: 2px solid var(--color-accent);
    margin: 24px 0;
}

strong { font-weight: 600; color: var(--color-dark); }
small { font-size: 0.8125rem; color: var(--color-gray); }

/* ---- Container ---- */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
}

/* ---- Navigation ---- */
@keyframes nav-enter {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    padding-top: 64px;
    /* Reveal: smooth deceleration (ease-out) – no padding transition */
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.3s ease,
                box-shadow 0.3s ease;
    background: transparent;
    animation: nav-enter 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.site-nav.nav-hidden {
    transform: translateY(-100%);
    /* Hide: quick acceleration (ease-in) */
    transition: transform 0.25s cubic-bezier(0.55, 0, 1, 0.45),
                background 0.3s ease,
                box-shadow 0.3s ease;
}

.site-nav.scrolled {
    padding-top: 32px;
    padding-bottom: 32px;
    height: auto;
    background: var(--color-nav-scrolled);
    border-bottom: 1px solid var(--color-nav-border);
}

/* Force text color on scrolled nav */
.site-nav.scrolled a,
.site-nav.scrolled .nav-logo,
.site-nav.scrolled .nav-contact,
.site-nav.scrolled .nav-ai-btn svg {
    color: var(--color-text) !important;
    fill: var(--color-text) !important;
}

.site-nav.scrolled a.active {
    border-bottom-color: var(--color-text) !important;
}

.site-nav.nav-light.scrolled {
    background: var(--color-nav-scrolled);
    border-bottom: 1px solid var(--color-nav-border);
}

/* Keep nav transparent while inside dark hero */
.site-nav.nav-dark.scrolled.in-hero {
    background: transparent;
    border-bottom: none;
    box-shadow: none;
}

.site-nav.nav-dark.scrolled.in-hero a,
.site-nav.nav-dark.scrolled.in-hero .nav-logo,
.site-nav.nav-dark.scrolled.in-hero .nav-contact,
.site-nav.nav-dark.scrolled.in-hero .nav-ai-btn svg {
    color: rgba(255,255,255,0.9) !important;
    fill: rgba(255,255,255,0.9) !important;
}

/* Dropdown-Links immer dark – egal ob nav-dark oder nav-light */
.site-nav .mega-link,
.site-nav .mega-title,
.site-nav .mega-label,
.site-nav .mega-desc,
.site-nav .mega-col-title,
.site-nav .mega-industry-title,
.site-nav .mega-industry-desc,
.site-nav .mega-story-title,
.site-nav .mega-cta-text,
.site-nav .mega-dropdown *,
.site-nav .mega-dropdown a {
    color: var(--color-text, #340A22) !important;
    fill: var(--color-text, #340A22) !important;
}

/* Accent-Color für Col-Titles erhalten */
.site-nav .mega-col-title {
    color: var(--color-accent, #FF575A) !important;
}

.nav-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.nav-logo {
    position: absolute;
    left: 24px;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.9);
    transition: color var(--transition);
    display: flex;
    align-items: center;
    text-decoration: none;
}

.nav-logo sup {
    font-size: 0.45em;
    font-weight: 400;
    vertical-align: super;
    margin-left: 1px;
}

.nav-logo:hover {
    color: var(--color-white);
}

/* Nav Light Mode */
.nav-light .nav-logo {
    color: var(--color-dark);
}
.nav-light .nav-logo:hover {
    color: var(--color-accent);
}
.nav-light .nav-main a {
    color: rgba(0, 0, 0, 0.9);
}
.nav-light .nav-main a:hover {
    color: rgba(0, 0, 0, 1);
}
.nav-light .nav-cta {
    color: var(--color-dark);
    border-color: rgba(0, 0, 0, 0.15);
}
.nav-light .nav-cta:hover {
    color: var(--color-dark);
    border-color: rgba(0, 0, 0, 0.4);
}
.nav-light .nav-burger span {
    background: rgba(0, 0, 0, 0.9);
}
.nav-light .nav-burger:hover span {
    background: rgba(0, 0, 0, 1);
}
.nav-light .nav-ai-btn {
    color: rgba(0, 0, 0, 0.9);
}
.nav-light .nav-ai-btn:hover {
    color: rgba(0, 0, 0, 1);
}

.nav-main {
    display: flex;
    align-items: center;
    gap: 40px;
    overflow: visible;
    position: relative;
}

.nav-main a {
    font-size: 0.92rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.85);
    transition: color var(--transition);
}

.nav-main a:hover {
    color: var(--color-white);
}

.nav-main a {
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
}

.nav-main a.active {
    border-bottom-color: currentColor;
}

.nav-right {
    position: absolute;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.nav-cta {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    padding: 8px 20px;
    text-decoration: none;
    transition: all 0.45s ease;
}

.nav-cta:hover {
    color: var(--color-white);
    border-color: rgba(255, 255, 255, 0.5);
}

.nav-ai-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    color: rgba(255, 255, 255, 0.85);
    transition: color var(--transition);
    display: flex;
    align-items: center;
}

.nav-ai-btn:hover {
    color: white;
}

.nav-light .nav-ai-btn {
    color: rgba(0, 0, 0, 0.85);
}

.nav-light .nav-ai-btn:hover {
    color: rgba(0, 0, 0, 1);
}

.nav-burger {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
}

.nav-burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: rgba(255, 255, 255, 0.8);
    transition: all var(--transition);
}

.nav-burger:hover span {
    background: white;
}

/* ---- Mega Navigation Dropdown ---- */
.nav-dropdown-wrap {
    position: relative;
    display: inline-block;
    overflow: visible;
}

.nav-dropdown-wrap > a {
    display: inline-block;
}

.nav-dropdown-wrap > a::after {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    margin-left: 6px;
    margin-bottom: 3px;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    transform: rotate(45deg);
    opacity: 0.5;
}

.nav-dropdown-wrap:hover > a::after {
    transform: rotate(-135deg) translateY(-1px);
    opacity: 1;
}

.mega-dropdown {
    position: absolute;
    top: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    min-width: 480px;
    background: var(--color-nav-scrolled, #fff);
    border: 1px solid var(--color-nav-border, rgba(0,0,0,0.06));
    border-radius: 12px;
    padding: 32px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    box-shadow: 0 20px 60px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.04);
    z-index: 1000;
    pointer-events: none;
}

/* Bridge – füllt Gap zwischen Nav-Link und Dropdown */
.mega-dropdown::before {
    content: '';
    position: absolute;
    top: -32px;
    left: -60px;
    right: -60px;
    height: 32px;
    background: transparent;
}

/* JS steuert via .is-open */
.nav-dropdown-wrap.is-open .mega-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

/* Wide variant – volle Breite */
.mega-wide {
    width: min(1060px, 90vw);
    min-width: unset;
}

.mega-services {
    width: clamp(860px, 55vw, 1200px) !important;
}

/* ── Shared mega styles ── */
.mega-label {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-secondary, #86868b);
    margin-bottom: 12px;
    display: block;
}

.mega-title {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text, #041C2D);
}

.mega-desc {
    font-size: 0.72rem;
    color: var(--color-text-secondary, #86868b);
    line-height: 1.4;
}

/* ── Solutions: 2-col grid ── */
.mega-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.mega-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 18px;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.45s ease;
}

.mega-item:hover {
    background: var(--color-surface, #f5f5f7);
}

/* ── Leistungen: 4-column mega ── */
/* width already set above via .mega-services override */

.mega-4col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.mega-4col > .mega-col {
    padding: 0 clamp(28px, 2.5vw, 56px);
    border-right: 1px solid var(--color-accent);
}

.mega-4col > .mega-col:first-child {
    padding-left: 0;
}

.mega-4col > .mega-col:last-child {
    border-right: none;
    padding-right: 0;
}

.mega-5col {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
}

.mega-5col .mega-col {
    padding: 0 20px;
    border-right: 1px solid var(--color-border, #e0e0e0);
}

.mega-5col .mega-col:first-child {
    padding-left: 0;
}

.mega-5col .mega-col:last-child {
    border-right: none;
    padding-right: 0;
}

.mega-col-highlight {
    background: transparent;
    margin: 0;
    padding: 0;
    border-radius: 0;
    border: none;
    align-self: start;
}

.mega-col-sub {
    font-size: 0.68rem;
    color: var(--color-text-secondary, #86868b);
    margin-top: -6px;
    margin-bottom: 8px;
    padding: 0 10px;
    display: block;
}

.mega-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mega-col-title {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-accent, #FF575A);
    margin-bottom: 10px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mega-link {
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--color-text, #041C2D);
    text-decoration: none;
    padding: 5px 10px;
    line-height: 1.3;
    border-radius: 3px;
    transition: background 0.45s ease, color 0.2s ease;
}

.mega-link:hover {
    background: var(--color-surface, #f5f5f7);
    color: var(--color-accent, #340A22);
}

/* ── Success Stories: Branches left, titles right ── */
.mega-stories {
    display: flex;
    gap: 32px;
}

.mega-stories-left {
    flex: 0 0 160px;
    border-right: 1px solid var(--color-border, #e0e0e0);
    padding-right: 32px;
}

.mega-branches {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mega-branch {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--color-text-secondary, #86868b);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.45s ease;
    cursor: pointer;
}

.mega-branch:hover,
.mega-branch.active {
    color: var(--color-text, #041C2D);
    background: var(--color-surface, #f5f5f7);
}

.mega-stories-right {
    flex: 1;
}

.mega-stories-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2px;
}

.mega-story-item {
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--color-text, #041C2D);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 3px;
    transition: background 0.45s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mega-story-item:hover {
    background: var(--color-surface, #f5f5f7);
}

/* ── Branchen: Image cards ── */
.mega-industries {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.mega-industry-card {
    text-decoration: none;
    border-radius: 10px;
    overflow: hidden;
    padding: 8px 12px;
    border-right: 1px solid var(--color-border, #e0e0e0);
    transition: background 0.45s ease;
}

.mega-industry-card:first-child {
    padding-left: 8px;
}

.mega-industry-card:last-child {
    border-right: none;
}

.mega-industry-card:hover {
    background: var(--color-surface);
}

.mega-industry-img {
    width: 100%;
    height: 120px;
    overflow: hidden;
    border-radius: 6px;
    flex-shrink: 0;
}

.mega-industry-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
}

.mega-industry-card:hover .mega-industry-img img {
    transform: none;
}

.mega-industry-title {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text, #041C2D);
    padding: 14px 4px 4px;
}

.mega-industry-desc {
    display: block;
    font-size: 0.72rem;
    color: var(--color-text-secondary, #86868b);
    padding: 0 4px 8px;
    line-height: 1.4;
}

/* ── Dark mode overrides ── */
[data-theme="dark"] .mega-dropdown,
/* prefers-color-scheme: dark – disabled, manual toggle only
   @media (prefers-color-scheme: dark) { .mega-dropdown {
       box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.2);
*/
}}

[data-theme="dark"] .mega-item:hover,
[data-theme="dark"] .mega-link:hover,
[data-theme="dark"] .mega-story-item:hover,
[data-theme="dark"] .mega-branch:hover,
[data-theme="dark"] .mega-branch.active {
    background: rgba(255,255,255,0.05);
}

[data-theme="dark"] .mega-industry-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

/* ---- Hero ---- */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    background: var(--color-dark);
}

.hero-short {
    min-height: 60vh;
    text-align: left;
}

.hero-short .hero-content {
    max-width: var(--container-max);
    width: 100%;
    padding: 0 24px;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.6;
}

.hero-video-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0.5;
}

.hero-video-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(var(--color-dark-rgb), 0.3) 0%, rgba(var(--color-dark-rgb), 0.7) 100%);
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    padding: 0 24px;
}

.hero-content h1 {
    font-family: var(--font-serif);
    font-size: clamp(3rem, 6vw, 6.5rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.08;
    color: var(--color-white);
    margin-bottom: 24px;
}

/* Hero Light Mode */
.hero-light {
    background: var(--color-bg);
}

.hero-light .hero-content h1 {
    color: var(--color-dark);
}

.hero-light .hero-subtext {
    color: var(--color-gray);
}

.hero-light .cs-hero-content h1 {
    color: var(--color-dark);
}

.hero-subtext {
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    color: rgba(255, 255, 255, 0.75);
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.6;
}

.hero-short .hero-subtext {
    margin: 0;
    max-width: 500px;
}

/* ---- Hero Branded (Video Passepartout + Brandmark Overlay) ---- */
.hero-branded {
    background: linear-gradient(135deg, rgba(252,241,240,0.4) 0%, rgba(218,49,55,0.1) 30%, rgba(194,62,100,0.07) 50%, rgba(175,75,144,0.05) 70%, rgba(160,80,163,0.03) 100%);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 48px;
}

/* Video background fullscreen + outline passepartout */
.hero-passe-frame {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.hero-passe-inner {
    position: absolute;
    inset: 0;
}

.hero-passe-inner video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-passe-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(252,241,240,0.3) 0%, rgba(218,49,55,0.08) 30%, rgba(194,62,100,0.06) 50%, rgba(175,75,144,0.04) 70%, rgba(160,80,163,0.02) 100%),
        rgba(255, 255, 255, 0.91);
}



/* Decorative outline frame */
.hero-passe-outline {
    position: absolute;
    inset: 32px;
    border: 2px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    z-index: 1;
    pointer-events: none;
}

[data-theme="dark"] .hero-passe-outline {
    border-color: rgba(255, 255, 255, 0.15);
}

.hero-branded-row {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
    max-width: 1400px;
    padding: 0 48px;
}

.hero-branded-text {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 4.5vw, 4.5rem);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--color-dark, #340A22);
    white-space: nowrap;
}

.hero-branded-left {
    text-align: right;
    padding-right: clamp(16px, 3vw, 48px);
}

.hero-branded-right {
    text-align: left;
    padding-left: clamp(16px, 3vw, 48px);
}

.hero-brandmark-video {
    position: relative;
    width: clamp(350px, 55vw, 900px);
    aspect-ratio: 400 / 225.71;
    flex-shrink: 0;
    overflow: hidden;
    -webkit-mask-image: url('/media/images/ui/brandmark.svg');
    mask-image: url('/media/images/ui/brandmark.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.hero-brandmark-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-subtext-branded {
    position: relative;
    z-index: 2;
    font-size: clamp(1rem, 1.8vw, 1.35rem);
    color: var(--color-gray, #86868b);
    max-width: 640px;
    text-align: center;
    line-height: 1.6;
    padding: 0 24px;
}

@media (max-width: 768px) {
    .hero-branded-row {
        flex-direction: column;
        gap: 24px;
        padding: 0 24px;
    }

    .hero-branded-left,
    .hero-branded-right {
        padding: 0;
        text-align: center;
    }

    .hero-brandmark-video {
        width: 80vw;
    }
}

/* Page-wide subtle gradient background */
.page-gradient-bg {
    position: relative;
}

.page-gradient-bg::before {
    content: '';
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, rgba(252,241,240,0.3) 0%, rgba(218,49,55,0.08) 30%, rgba(194,62,100,0.06) 50%, rgba(175,75,144,0.04) 70%, rgba(160,80,163,0.02) 100%);
    pointer-events: none;
    z-index: -1;
}

/* ---- Work Hero (2-col) ---- */
.work-hero {
    padding: 220px 0 64px;
    background: var(--color-bg);
    position: relative;
    overflow: hidden;
}

.work-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: none;
    pointer-events: none;
}

.work-hero-grid {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 60px;
}

.work-hero-left {
    flex: 1;
}

.work-hero-left h1 {
    font-family: var(--font-serif);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--color-text);
    max-width: 8em;
    overflow-wrap: normal;
    word-break: keep-all;
    hyphens: none;
}

.work-hero-right {
    max-width: 480px;
    padding-top: 1rem;
}

.work-hero-right p {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

/* ---- Sections ---- */
.section {
    padding: 120px 0;
}

.section + .section {
    border-top: 1px solid var(--color-border);
}

.section-headline {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 400;
    letter-spacing: -0.01em;
    margin-bottom: 64px;
    text-align: center;
}

.section-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent);
    margin-bottom: 16px;
}

/* ---- Clients Section ---- */
.clients-section {
    background: #340A22;
}

.clients-section .container {
    text-align: left;
}

.clients-section .section-headline {
    color: #fff;
    text-align: left;
    margin-bottom: 2rem;
}

.clients-section .section-label {
    color: rgba(255,255,255,0.5);
    display: block;
    text-align: left;
}

.clients-section .client-slide {
    border-color: rgba(255,255,255,0.15);
    color: #fff;
}

.clients-section .client-slide h3 {
    color: #fff;
}

.clients-section .client-slide p {
    color: rgba(255,255,255,0.6);
}

.clients-section .client-slide:hover {
    border-color: rgba(255,255,255,0.18);
}

/* Clients Marquee */
.clients-marquee-wrapper {
    overflow: hidden;
    width: 100%;
    padding: 2rem 0;
    mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.clients-marquee {
    display: flex;
    gap: 2rem;
    width: max-content;
    animation: marquee-scroll 120s linear infinite;
}

.clients-marquee:hover {
    animation-play-state: paused;
}

@keyframes marquee-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.client-slide {
    flex: 0 0 22rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.client-slide__logo {
    border: 1px solid rgba(255,255,255,0.18);
    width: 22rem;
    height: 14rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.client-logo {
    max-height: 4rem;
    max-width: 12rem;
    width: auto;
    display: block;
    filter: brightness(0) invert(1) opacity(0.85);
}

.client-name {
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255,255,255,0.85);
    letter-spacing: 0.03em;
    text-align: center;
}

.client-tagline {
    font-size: 0.88rem;
    line-height: 1.5;
    color: #fff;
    margin: 0;
    padding: 0 0.25rem;
    max-width: 22rem;
}

@keyframes clients-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ---- Solved / Products Section ---- */
.solved-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.solved-text h2 {
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    font-weight: 400;
    letter-spacing: -0.01em;
    margin-bottom: 24px;
}

.solved-text p {
    font-size: 1.0625rem;
    color: var(--color-gray);
    line-height: 1.7;
}

.solved-image img {
    border-radius: var(--radius);
    width: 100%;
}

/* ---- Work Section ---- */
.work-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px 36px;
}

/* View Toggle */
.view-toggle {
    display: flex;
    gap: 4px;
    margin-left: auto;
    background: var(--color-surface);
    border-radius: 10px;
    padding: 4px;
}
.view-btn {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    width: 34px;
    height: 34px;
    border-radius: 7px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease, color 0.25s ease;
}
.view-btn.active {
    background: var(--color-bg);
    color: var(--color-text);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.view-btn:hover:not(.active) {
    color: var(--color-text);
    background: rgba(0,0,0,0.04);
}

/* Grid view (default) */
.work-card .work-card-list { display: none; }
.work-card .work-card-visual { display: block; }

/* List view */
.work-list {
    display: flex !important;
    flex-direction: column;
    gap: 0;
}
.work-list .work-card {
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
.work-list .work-card .work-card-visual { display: none; }
.work-list .work-card .work-card-list {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 1.25rem 0;
    transition: background 0.45s ease;
}
.work-list .work-card:hover .work-card-list {
    background: rgba(0,0,0,0.02);
    padding-left: 1rem;
    padding-right: 1rem;
}
.list-thumb {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    overflow: hidden;
}
.list-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Floating preview image on hover */
.list-preview-float {
    position: fixed;
    width: 480px;
    height: 320px;
    pointer-events: none;
    z-index: 1000;
    overflow: hidden;
    opacity: 0;
    transform: scale(0.92) translateY(8px);
    transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    padding: 14px;
    background: linear-gradient(135deg, rgba(252,241,240,0.4) 0%, rgba(218,49,55,0.1) 30%, rgba(194,62,100,0.07) 50%, rgba(175,75,144,0.05) 70%, rgba(160,80,163,0.03) 100%);
    border-radius: 6px;
}
.list-preview-float.active {
    opacity: 1;
    transform: scale(1) translateY(0);
}
.list-preview-float img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 3px;
}
.list-info {
    flex: 0 0 200px;
}
.list-info h3 {
    font-size: 1.25rem;
    font-weight: 400;
    margin: 0;
    color: var(--color-dark);
}
.list-info .list-client {
    font-size: 0.8rem;
    color: #888;
    margin-top: 0.15rem;
    display: block;
}
.list-desc {
    flex: 1;
}
.list-desc p {
    margin: 0;
    font-size: 0.9rem;
    color: #555;
    line-height: 1.4;
}
.list-tags {
    flex: 0 0 220px;
    font-size: 0.75rem;
    color: #999;
    text-align: right;
}
.list-arrow {
    font-size: 1.25rem;
    color: #ccc;
    transition: color 0.2s, transform 0.2s;
}
.work-list .work-card:hover .list-arrow {
    color: var(--color-dark);
    transform: translateX(4px);
}

.work-card {
    display: block;
    overflow: hidden;
}

.work-card-visual {
    position: relative;
    aspect-ratio: 16 / 12;
    overflow: hidden;
    padding: 12px;
    background: linear-gradient(135deg, rgba(252,241,240,0.35) 0%, rgba(218,49,55,0.08) 30%, rgba(194,62,100,0.06) 50%, rgba(175,75,144,0.04) 70%, rgba(160,80,163,0.02) 100%);
}

.work-card-visual-inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 4px;
}

.work-card-video,
.work-card-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.work-card:hover .work-card-visual img,
.work-card:hover .work-card-video {
    transform: scale(1.04);
}

.work-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.3) 40%,
        transparent 70%
    );
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 48px;
    color: white;
    opacity: 0;
    transition: opacity 0.4s ease;
}

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

.work-card-overlay h3 {
    font-size: clamp(1.25rem, 1.8vw, 1.75rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    color: #fff;
    margin-bottom: 6px;
    line-height: 1.25;
}

.work-card-overlay p {
    font-size: 0.75rem;
    color: #fff;
    margin-bottom: 20px;
    line-height: 1.5;
    max-width: 85%;
}

.work-card-overlay h3 {
    font-size: clamp(1.25rem, 1.8vw, 1.75rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    color: #fff;
    margin-bottom: 6px;
    line-height: 1.25;
}

.work-card-overlay p {
    font-size: 0.75rem;
    color: #fff;
    margin-bottom: 20px;
    line-height: 1.5;
    max-width: 85%;
}

.work-tags-inline {
    font-size: 0.6rem;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.work-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 100px;
    background: rgba(var(--color-dark-rgb), 0.06);
    color: var(--color-gray);
}

/* ---- Filter Bar ---- */
.filter-bar {
    padding: 64px 0 32px;
    border-bottom: 1px solid var(--color-border);
}

.filter-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.filter-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
}

.filter-buttons {
    display: flex;
    gap: 10px;
}

.filter-toggle {
    background: none;
    border: 1px solid var(--color-dark);
    border-radius: 100px;
    padding: 10px 20px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-family);
    color: var(--color-dark);
    transition: all var(--transition);
}

.filter-toggle:hover {
    background: var(--color-dark);
    color: var(--color-white);
    border-color: var(--color-dark);
}

.filter-toggle-icon {
    font-size: 1rem;
    line-height: 1;
}

.filter-tags-row {
    padding: 16px 0 0;
}

.filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-tag {
    background: transparent;
    border: 1.5px solid var(--color-accent);
    border-radius: 100px;
    padding: 7px 16px;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    font-family: var(--font-family);
    color: var(--color-accent);
    transition: all var(--transition);
}

.filter-tag:hover {
    background: rgba(255, 87, 90, 0.06);
}

.filter-tag.active {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

.filter-search {
    margin-left: 0;
}

.filter-search-input {
    background: var(--color-bg);
    border: 1.5px solid var(--color-accent);
    border-radius: 100px;
    padding: 10px 20px;
    font-size: 0.875rem;
    font-family: var(--font-family);
    color: var(--color-text);
    width: 220px;
    transition: all var(--transition);
    outline: none;
}

.filter-search-input:focus {
    border-color: var(--color-accent);
    background: var(--color-bg);
    box-shadow: 0 0 0 3px rgba(255, 87, 90, 0.1);
}

.filter-search-input::placeholder {
    color: var(--color-gray);
}

.filter-active {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    min-height: 8px;
}

.active-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-accent);
    color: white;
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition);
}

.active-filter:hover {
    background: var(--color-dark);
}

.work-no-results {
    text-align: center;
    padding: 80px 0;
    font-size: 1.125rem;
    color: var(--color-gray);
}

.filter-toggle.active {
    border-color: var(--color-dark);
    background: var(--color-dark);
    color: var(--color-white);
}

@media (max-width: 768px) {
    .filter-row {
        flex-wrap: wrap;
    }
    
    .filter-search {
        margin-left: 0;
        width: 100%;
    }
    
    .filter-search-input {
        width: 100%;
    }
}

/* ---- Stats Section ---- */
.stats-section {
    background: var(--color-dark);
    color: var(--color-white);
}

.stats-section + .section {
    border-top: none;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 48px;
    text-align: center;
}

.stat-number {
    display: block;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 12px;
}

.stat-label {
    display: block;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.4;
}

/* ---- Office Image ---- */
.office-section {
    padding: 0 0 120px;
}

.office-image {
    width: 100%;
    border-radius: var(--radius);
}

/* ---- Success Story Detail (Manyone-style) ---- */

/* Hero */
/* ---- Passepartout Hero ---- */
.cs-hero-passe {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(252,241,240,0.4) 0%, rgba(218,49,55,0.1) 30%, rgba(194,62,100,0.07) 50%, rgba(175,75,144,0.05) 70%, rgba(160,80,163,0.03) 100%);
}

.passe-frame {
    position: absolute;
    inset: 32px;
    overflow: hidden;
    border-radius: 8px;
}

.passe-inner {
    position: absolute;
    inset: -10px;
    transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
    transform: scale(1.03);
}

.passe-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.passe-inner video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.passe-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        var(--hero-tint, rgba(0,0,0,0.1)) 0%,
        transparent 40%,
        rgba(0,0,0,0.55) 100%
    );
}

.cs-hero-passe .cs-hero-content {
    position: relative;
    z-index: 2;
    padding-bottom: 64px;
    padding-left: 80px;
}

.cs-hero-passe .cs-hero-content h1 {
    color: var(--color-white);
}

/* Passepartout border glow on hover */
.passe-frame::before {
    content: '';
    position: absolute;
    inset: -1px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    z-index: 3;
    pointer-events: none;
    transition: border-color 0.6s ease;
}

.cs-hero-passe:hover .passe-frame::before {
    border-color: rgba(218,49,55,0.15);
}

@media (max-width: 768px) {
    .passe-frame {
        inset: 16px;
    }

    .cs-hero-passe .cs-hero-content {
        padding-left: 40px;
        padding-bottom: 40px;
    }
}

/* ---- Legacy CS Hero (kept for compat) ---- */
.cs-hero {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--color-dark);
}

.cs-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.7;
}

.cs-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        var(--hero-tint-top, rgba(0,0,0,0.15)) 0%,
        var(--hero-tint-mid, transparent) 40%,
        var(--hero-tint-bottom, rgba(0,0,0,0.65)) 100%
    );
}

.cs-hero-content {
    position: relative;
    z-index: 2;
    padding-bottom: 80px;
}

.cs-hero-content h1 {
    font-family: var(--font-serif);
    font-size: clamp(3rem, 5vw, 5.5rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--color-white);
    max-width: 60%;
    text-align: left;
}

.hero-light .cs-hero-content h1 {
    color: var(--color-dark);
}

.cs-hero.hero-light {
    background: var(--color-white);
    min-height: 50vh;
}

/* Anchor Bar */
/* Hero Meta (inside hero, not sticky) */
.cs-hero-meta {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 32px;
}

.cs-anchor-meta {
    display: flex;
    gap: 40px;
}

.cs-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cs-meta-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.5);
}

.cs-meta-value {
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

.cs-anchor-nav {
    display: flex;
    gap: 24px;
}

.cs-anchor-nav a {
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    padding: 4px 0;
    border-bottom: 1px solid transparent;
    transition: all var(--transition);
}

.cs-anchor-nav a:hover {
    color: #fff;
    border-bottom-color: #fff;
}

/* Two-Column Section Layout (Headline left, Body right) */
.cs-section {
    padding: 96px 0;
}

.cs-section + .cs-section {
    border-top: 1px solid var(--color-border);
}

.cs-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}

.cs-col-left {
    position: sticky;
    top: 140px;
}

.cs-section-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-accent);
    margin-bottom: 16px;
}

.cs-col-left h2 {
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: #1d1d1f;
}

.cs-col-right p {
    font-size: 1.125rem;
    color: var(--color-gray);
    line-height: 1.8;
}

.cs-col-right p + p {
    margin-top: 24px;
}

/* Full-width Images */
.cs-fullwidth-image {
    padding: 32px 0;
}

.cs-fullwidth-image img {
    width: 100%;
    border-radius: var(--radius);
}

.cs-image-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.cs-image-grid img {
    width: 100%;
    border-radius: var(--radius);
    aspect-ratio: 16/10;
    object-fit: cover;
}

/* Video Module */
.cs-video-section {
    padding: 32px 0;
}

.cs-video-wrapper {
    border-radius: var(--radius);
    overflow: hidden;
}

.cs-video-wrapper video {
    width: 100%;
    display: block;
    border-radius: var(--radius);
}

/* Video Hero */
.cs-hero-video .cs-hero-video-bg {
    position: absolute;
    inset: 0;
}

.cs-hero-video .cs-hero-video-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Stat Callout */
.cs-stat-section {
    padding: 40px 0;
}

.cs-stat-callout {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cs-stat-number {
    font-size: clamp(3.5rem, 8vw, 6rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--color-accent);
}

.cs-stat-text {
    font-size: 1.0625rem;
    color: var(--color-gray);
    line-height: 1.5;
    max-width: 400px;
}

/* ---- Quote Module ---- */
.cs-quote-section {
    padding: 80px 0;
    background: var(--color-light);
}

.cs-quote {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.cs-quote p {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 400;
    font-style: italic;
    line-height: 1.6;
    color: #1d1d1f;
    margin-bottom: 32px;
}

.cs-quote cite {
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cs-quote cite strong {
    font-size: 1rem;
    font-weight: 600;
}

.cs-quote cite span {
    font-size: 0.875rem;
    color: var(--color-gray);
}

/* CTA Section */
.cs-cta-section {
    padding: 80px 0;
    background: var(--color-light);
}

.cs-cta-grid {
    max-width: 600px;
}

.cs-cta-text h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 400;
    letter-spacing: -0.01em;
    margin-bottom: 16px;
}

.cs-cta-text p {
    font-size: 1.0625rem;
    color: var(--color-gray);
    line-height: 1.7;
    margin-bottom: 32px;
}

.btn-primary {
    background: var(--color-dark);
    color: var(--color-white);
    border-color: var(--color-dark);
    padding: 14px 32px;
}

.btn-primary:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

/* Related Work */
.cs-related-section {
    position: relative;
    z-index: 10;
    padding: 120px 0;
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
}

.cs-related-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 48px;
}

.cs-related-header h2 {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 400;
    letter-spacing: -0.01em;
}

.cs-see-all {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-accent);
    transition: color var(--transition);
}

.cs-see-all:hover {
    color: var(--color-dark);
}

.cs-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Bottom Nav */
.cs-bottom-nav {
    padding: 48px 0;
    border-top: 1px solid var(--color-border);
}

/* Success Story Responsive */
@media (max-width: 768px) {
    .cs-hero {
        min-height: 60vh;
    }

    .cs-hero-content {
        padding-bottom: 48px;
    }

    .cs-anchor-bar .container {
        flex-direction: column;
        align-items: flex-start;
    }

    .cs-anchor-meta {
        flex-wrap: wrap;
        gap: 16px;
    }

    .cs-anchor-nav {
        gap: 16px;
        overflow-x: auto;
        padding-bottom: 12px;
        width: 100%;
    }

    .cs-two-col {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .cs-col-left {
        position: static;
    }

    .cs-image-grid {
        grid-template-columns: 1fr;
    }

    .cs-related-grid {
        grid-template-columns: 1fr;
    }

    .cs-related-header {
        flex-direction: column;
        gap: 8px;
    }
}

.btn {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 100px;
    border: 1px solid var(--color-border);
    transition: all var(--transition);
}

.btn:hover {
    background: var(--color-dark);
    color: var(--color-white);
    border-color: var(--color-dark);
}

/* ---- Insights Section ---- */
.insights-headline {
    text-align: left !important;
    margin-bottom: 48px !important;
}

.insights-headline em {
    font-family: var(--font-family);
    font-style: normal;
}

.insights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 64px;
}

.insight-card {
    display: flex;
    flex-direction: column;
    transition: transform var(--transition);
}

.insight-card:hover {
    transform: translateY(-4px);
}

.insight-card-image {
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: var(--radius);
    margin-bottom: 20px;
}

.insight-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

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

.insight-card-content h3 {
    font-size: 1.375rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin-bottom: 12px;
    color: var(--color-text);
}

.insight-card-content p {
    font-size: 0.9375rem;
    color: var(--color-gray);
    line-height: 1.6;
    margin-bottom: 16px;
}

.insight-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.insight-tag {
    font-size: 0.75rem;
    color: var(--color-gray);
}

.insight-tag::before {
    content: "○ ";
    font-size: 0.5rem;
    vertical-align: middle;
}

.insight-link {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-accent);
}

/* More curated insights link */
.insights-more {
    padding-top: 32px;
    border-top: 1px solid var(--color-border);
}

.insights-more-link {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 700;
    color: var(--color-accent);
    transition: color var(--transition);
}

.insights-more-link:hover {
    color: var(--color-dark);
}

.insights-more-line {
    flex: 1;
    height: 2px;
    background: var(--color-accent);
    display: block;
}

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

/* ---- Insights Filter Bar ---- */
.insights-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 40px;
}

.insights-filter-pill {
    display: inline-flex;
    align-items: center;
    padding: 7px 18px;
    border-radius: 100px;
    border: 1px solid var(--color-border, rgba(0,0,0,0.15));
    background: transparent;
    color: var(--color-gray, #6b6b6b);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    white-space: nowrap;
    line-height: 1;
}

.insights-filter-pill:hover {
    border-color: var(--color-dark);
    color: var(--color-dark);
}

.insights-filter-pill.active {
    background: var(--color-dark);
    border-color: var(--color-dark);
    color: #fff;
}

/* Empty state */
.insights-empty {
    text-align: center;
    padding: 60px 0;
    color: var(--color-gray);
    font-size: 0.9375rem;
}

/* Mobile: horizontal scroll */
@media (max-width: 600px) {
    .insights-filter {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
        margin-bottom: 28px;
    }
    .insights-filter::-webkit-scrollbar {
        display: none;
    }
}

/* ---- Styleguide ---- */
.sg-header {
    padding: 120px 0 60px;
    background: var(--color-dark);
    color: var(--color-white);
}

.sg-header h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 12px;
}

.sg-intro {
    font-size: 1.125rem;
    color: rgba(255,255,255,0.6);
    margin-bottom: 32px;
}

.sg-nav {
    display: flex;
    gap: 24px;
}

.sg-nav a {
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255,255,255,0.7);
    padding: 8px 16px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 100px;
    transition: all var(--transition);
}

.sg-nav a:hover {
    background: rgba(255,255,255,0.1);
    color: white;
}

.sg-section {
    padding: 80px 0;
}

.sg-section-alt {
    background: var(--color-light);
}

.sg-section-title {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 40px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--color-dark);
    display: inline-block;
}

.sg-note {
    font-size: 0.9375rem;
    color: var(--color-gray);
    margin-bottom: 32px;
}

.sg-note code {
    background: rgba(0,0,0,0.06);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8125rem;
}

/* Color Grid */
.sg-color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 20px;
}

.sg-color-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sg-color-swatch {
    height: 80px;
    border-radius: var(--radius);
}

.sg-color-card strong {
    font-size: 0.875rem;
}

.sg-color-card code {
    font-size: 0.75rem;
    color: var(--color-gray);
}

.sg-color-card span {
    font-size: 0.6875rem;
    color: var(--color-gray);
}

/* Type Samples */
.sg-type-samples {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.sg-type-item {
    padding-bottom: 32px;
    border-bottom: 1px solid var(--color-border);
}

.sg-type-label {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent);
    margin-bottom: 12px;
}

.sg-type-demo {
    margin-bottom: 12px;
}

.sg-type-item code {
    font-size: 0.75rem;
    color: var(--color-gray);
}

/* Module Blocks */
.sg-module-block {
    border-top: 1px solid var(--color-border);
    padding-top: 48px;
    margin-bottom: 48px;
}

.sg-module-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}

.sg-module-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
}

.sg-module-header code {
    font-size: 0.75rem;
    color: var(--color-gray);
}

.sg-module-fields {
    font-size: 0.875rem;
    color: var(--color-gray);
    margin-bottom: 32px;
}

.sg-module-fields strong {
    color: #1d1d1f;
}

/* Demo Row */
.sg-demo-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 48px;
}

.sg-subsection {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 16px;
    margin-top: 48px;
}

/* ---- Footer ---- */
/* ========================================
   Site Footer – full-width 5-column grid
   ======================================== */
.site-footer {
    background: var(--color-dark);
    color: var(--color-white);
    padding: 0;
}

/* 5-column nav grid, no logo col */
.footer-main {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 32px;
    padding: 80px 0 60px;
}

.footer-col h4 {
    font-size: 1rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 14px;
    letter-spacing: -0.01em;
    text-transform: none;
}

.footer-col-spacer {
    margin-top: 24px;
}

.footer-col a {
    display: block;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    transition: color 0.2s ease;
    margin-bottom: 8px;
    line-height: 1.5;
}

.footer-col a:hover {
    color: rgba(255, 255, 255, 0.8);
}

/* Footer bottom bar */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-bottom-left {
    flex: 1;
}

.footer-bottom-center {
    flex: 1;
}

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

/* Social icons – 7 icons, horizontal row */
.footer-social {
    flex: 1;
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: flex-end;
}

.footer-social a {
    color: rgba(255, 255, 255, 0.3);
    text-decoration: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-social a:hover {
    color: rgba(255, 255, 255, 0.7);
}

/* Responsive: Tablet → 3-col */
@media (max-width: 1024px) {
    .footer-main {
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
        padding: 60px 0 48px;
    }
}

/* Responsive: Mobile → 2-col */
@media (max-width: 640px) {
    .footer-main {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        padding: 48px 0 40px;
    }

    .footer-bottom {
        flex-wrap: wrap;
        gap: 16px;
    }

    .footer-social {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 12px;
    }
}

/* ========================================
   AI Personal Message
   ======================================== */
.ai-personal {
    padding: clamp(4rem, 8vw, 7rem) 0;
    background: var(--color-light);
}

.ai-personal__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 4vw, 3rem);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
}

.ai-personal__avatar {
    width: clamp(100px, 12vw, 160px);
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 3px solid var(--color-accent);
    box-shadow: 0 8px 32px rgba(52, 10, 34, 0.12);
}

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

.ai-personal__quote {
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 400;
    line-height: 1.65;
    color: var(--color-dark);
    margin: 0 0 1.5rem;
    padding: 0;
    border: none;
    font-style: normal;
    max-width: 640px;
}

.ai-personal__quote::before {
    content: '„';
    color: var(--color-accent);
    font-size: 1.5em;
    margin-right: 2px;
}

.ai-personal__quote::after {
    content: '"';
    color: var(--color-accent);
    font-size: 1.5em;
    margin-left: 2px;
}

.ai-personal__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ai-personal__name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-dark);
}

.ai-personal__role {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
}

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

    .ai-personal__avatar {
        margin: 0 auto;
    }

    .ai-personal__quote {
        margin: 0 auto 1.5rem;
    }

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

/* ========================================
   AI Video Advisor Widget
   ======================================== */
.ai-advisor-widget {
    position: fixed;
    bottom: 32px;
    right: 32px;
    z-index: 9998;
    /* Firefox zoom fix: Widget darf nicht in die Nav rutschen */
    top: auto;
    max-height: calc(100vh - var(--nav-height) - 48px);
}
.ai-advisor-widget__video-wrap {
    max-height: calc(100vh - var(--nav-height) - 80px);
    overflow: hidden;
}

.ai-advisor-widget__video-wrap {
    width: 320px;
    border-radius: 4px;
    overflow: visible;
    background: #000;
    cursor: pointer;
    position: relative;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s ease;
    box-shadow: 0 8px 32px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.18);
}

/* Kein Outline-Pseudo-Element */
.ai-advisor-widget__video-wrap::before {
    display: none;
}

.ai-advisor-widget__video-wrap:hover {
    transform: scale(1.04) translateY(-4px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}

.ai-advisor-widget__video-wrap.is-unmuted {
    width: clamp(420px, 40vw, 560px);
}

.ai-advisor-widget__video-wrap.is-hidden {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.9) translateY(20px);
    pointer-events: none;
}

.ai-advisor-widget__video-wrap video {
    width: 100%;
    display: block;
    border-radius: 4px;
}

.ai-advisor-widget__close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.45s ease;
    opacity: 0;
}

.ai-advisor-widget__video-wrap:hover .ai-advisor-widget__close {
    opacity: 1;
}

.ai-advisor-widget__close:hover {
    background: rgba(0,0,0,0.8);
}

.ai-advisor-widget__sound-toggle {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.5);
    color: #fff;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.45s ease;
    backdrop-filter: blur(8px);
}

.ai-advisor-widget__sound-toggle:hover {
    background: rgba(0,0,0,0.75);
}

@media (max-width: 768px) {
    .ai-advisor-widget {
        bottom: 20px;
        right: 16px;
    }

    .ai-advisor-widget__video-wrap {
        width: 140px;
    }

    .ai-advisor-widget__video-wrap.is-unmuted {
        width: 260px;
    }
}

/* Footer Dark Mode Fix */
[data-theme="dark"] .site-footer {
    background: #0a0a09;
    color: #f0f0f0;
}

[data-theme="dark"] .footer-logo {
    color: rgba(240, 240, 240, 0.85);
}

[data-theme="dark"] .footer-col h4 {
    color: rgba(240, 240, 240, 0.85);
}

[data-theme="dark"] .footer-col a {
    color: rgba(240, 240, 240, 0.4);
}

[data-theme="dark"] .footer-col a:hover {
    color: rgba(240, 240, 240, 0.8);
}

[data-theme="dark"] .footer-bottom {
    border-top-color: rgba(240, 240, 240, 0.08);
}

[data-theme="dark"] .footer-by {
    color: rgba(240, 240, 240, 0.35);
}

[data-theme="dark"] .footer-copy {
    color: rgba(240, 240, 240, 0.2);
}

[data-theme="dark"] .footer-social a {
    color: rgba(240, 240, 240, 0.3);
}

[data-theme="dark"] .footer-social a:hover {
    color: rgba(240, 240, 240, 0.7);
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .solved-grid {
        gap: 40px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
}

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

    .section-headline {
        margin-bottom: 40px;
    }

    .nav-links {
        display: none;
    }

    .solved-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

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

    .clients-slider {
        gap: 1rem;
    }

    .client-slide {
        flex: 0 0 260px;
    }

    .case-meta {
        flex-direction: column;
        gap: 24px;
    }

    .footer-top {
        flex-direction: column;
        gap: 40px;
    }

    .footer-links {
        gap: 32px;
    }
}

@media (max-width: 480px) {
    .client-slide {
        flex: 0 0 240px;
        padding: 1.5rem;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .footer-links {
        flex-direction: column;
        gap: 24px;
    }
}

/* ---- Industries ---- */
.industries-hero {
    padding: 220px 0 80px;
    background: var(--color-white);
}

.industries-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: end;
}

.industries-hero h1 {
    font-family: var(--font-serif);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 400;
    letter-spacing: -0.025em;
    color: var(--color-dark);
}

.industries-intro {
    font-size: 1.125rem;
    line-height: 1.6;
    color: #3a3a3c;
    max-width: 480px;
}

.industries-grid-section {
    padding: 0 0 120px;
}

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

.industry-card {
    display: block;
    background: var(--color-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 48px;
    transition: all 0.35s ease;
    text-decoration: none;
    color: inherit;
}

.industry-card:hover {
    border-color: var(--color-dark);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

.industry-card h2 {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 400;
    margin-bottom: 16px;
    color: var(--color-dark);
}

.industry-card p {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #3a3a3c;
    margin-bottom: 24px;
}

.industry-link {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-dark);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.industry-link span {
    transition: transform 0.3s ease;
}

.industry-card:hover .industry-link span {
    transform: translateX(4px);
}

/* ---- Industry Detail ---- */
.ind-detail-hero {
    padding: 220px 0 80px;
    background: var(--color-white, #fff);
}

/* ========================================
   Industry New Hero: Video Strip + Collage
   ======================================== */

/* .ind-new-hero entfernt – veraltet */

/* Video Strip */
.ind-video-strip {
    position: relative;
    height: 55vh;
    min-height: 380px;
    overflow: hidden;
}

.ind-video-strip__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ind-video-strip__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(4, 28, 45, 0.55) 0%,
        rgba(4, 28, 45, 0.3) 60%,
        rgba(4, 28, 45, 0.7) 100%
    );
    z-index: 1;
}

.ind-video-strip__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 0 clamp(1.5rem, 4vw, 3rem) clamp(2rem, 4vw, 3.5rem);
    max-width: var(--container-max);
    margin: 0 auto;
}

.ind-video-strip__label {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    margin-bottom: 0.75rem;
}

.ind-video-strip__content h1 {
    font-family: var(--font-serif);
    font-size: clamp(2.5rem, 5vw, 5rem);
    font-weight: 400;
    line-height: 1.0;
    letter-spacing: -0.025em;
    color: #fff;
    margin: 0 0 0.75rem;
}

.ind-video-strip__tagline {
    font-size: clamp(0.9rem, 1.5vw, 1.1rem);
    color: rgba(255,255,255,0.65);
    line-height: 1.5;
    max-width: 60ch;
    margin: 0;
}

/* Collage */
.ind-collage {
    display: grid;
    grid-template-columns: 2fr 1.2fr 1.5fr 1fr 1.3fr;
    height: clamp(240px, 28vw, 400px);
    overflow: hidden;
}

.ind-collage__cell {
    position: relative;
    overflow: hidden;
}

.ind-collage__cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    will-change: transform;
}

/* Panel 1 – Person: sehr sanftes Atmen */
.ind-collage__cell:nth-child(1) img {
    animation: collage-breathe 9s ease-in-out infinite;
}

/* Panel 2 – Maschine: langsamer Zoom + leichter Pan */
.ind-collage__cell:nth-child(2) img {
    animation: collage-zoom-pan 12s ease-in-out infinite;
}

/* Panel 3 – Flugzeug/Zentrum: sehr langsamer Zoom */
.ind-collage__cell:nth-child(3) img {
    animation: collage-slow-zoom 14s ease-in-out infinite;
}

/* Panel 4 – Meeting/Menschen: minimal, Gegenbewegung */
.ind-collage__cell:nth-child(4) img {
    animation: collage-breathe-alt 10s ease-in-out infinite;
}

/* Panel 5 – Detail/Turbine: leichte Rotation oder Pan */
.ind-collage__cell:nth-child(5) img {
    animation: collage-pan 16s ease-in-out infinite;
}

@keyframes collage-breathe {
    0%, 100% { transform: scale(1.04) translateY(0); }
    50%       { transform: scale(1.07) translateY(-6px); }
}

@keyframes collage-breathe-alt {
    0%, 100% { transform: scale(1.04) translateY(0); }
    50%       { transform: scale(1.06) translateY(5px); }
}

@keyframes collage-zoom-pan {
    0%   { transform: scale(1.05) translateX(0); }
    50%  { transform: scale(1.10) translateX(-8px); }
    100% { transform: scale(1.05) translateX(0); }
}

@keyframes collage-slow-zoom {
    0%, 100% { transform: scale(1.03); }
    50%       { transform: scale(1.08); }
}

@keyframes collage-pan {
    0%   { transform: scale(1.06) translateX(0) rotate(0deg); }
    50%  { transform: scale(1.09) translateX(6px) rotate(0.5deg); }
    100% { transform: scale(1.06) translateX(0) rotate(0deg); }
}

/* Hover pausiert die Animation */
.ind-collage__cell:hover img {
    animation-play-state: paused;
    transform: scale(1.1);
    transition: transform 0.6s ease;
}

/* Tints */
.ind-collage__cell--bordeaux::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(52, 10, 34, 0.55);
    mix-blend-mode: multiply;
}

.ind-collage__cell--bordeaux-light::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(52, 10, 34, 0.3);
    mix-blend-mode: multiply;
}

.ind-collage__cell--navy::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(4, 28, 45, 0.6);
    mix-blend-mode: multiply;
}

.ind-collage__cell--none img {
    filter: saturate(0.6) contrast(1.05);
}

@media (max-width: 768px) {
    .ind-collage {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        height: 300px;
    }

    .ind-collage__cell:nth-child(n+5) {
        display: none;
    }
}

/* Industry Split Hero */
.ind-hero-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    margin-top: calc(var(--nav-height) * -1);
    padding-top: 0;
}

.ind-hero-split__left {
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.ind-hero-split__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ind-hero-split__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0,0,0,0.1) 0%,
        transparent 40%,
        rgba(0,0,0,0.55) 100%
    );
    z-index: 1;
}

.ind-hero-split__content {
    position: relative;
    z-index: 2;
    padding: clamp(2rem, 5vw, 4rem);
    padding-bottom: clamp(3rem, 6vw, 5rem);
}

.ind-hero-split__content h1 {
    font-family: var(--font-serif);
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    font-weight: 400;
    letter-spacing: -0.025em;
    color: var(--color-white);
    margin: 0.5rem 0 1rem;
    line-height: 1.1;
}

.ind-hero-split__tagline {
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.7);
    max-width: 440px;
    margin: 0;
}

.ind-hero-split__right {
    position: relative;
    overflow: hidden;
}

.ind-hero-split__right::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(52, 10, 34, 0.4) 0%,
        rgba(52, 10, 34, 0.15) 50%,
        rgba(218, 49, 55, 0.1) 100%
    );
    mix-blend-mode: multiply;
    z-index: 1;
    pointer-events: none;
}

.ind-hero-split__right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: contrast(1.1) saturate(0.7);
    transition: transform 8s ease;
}

.ind-hero-split:hover .ind-hero-split__right img {
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .ind-hero-split {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .ind-hero-split__left {
        min-height: 60vh;
    }

    .ind-hero-split__right {
        height: 40vh;
    }
}

.ind-detail-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: end;
}

.ind-detail-hero h1 {
    font-family: var(--font-serif);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 400;
    letter-spacing: -0.025em;
    color: var(--color-dark);
}

.ind-detail-tagline {
    font-size: 1.125rem;
    line-height: 1.6;
    color: #3a3a3c;
    max-width: 480px;
}

.ind-detail-whatwedo {
    padding: 80px 0;
}

.ind-detail-whatwedo p {
    font-size: 1.125rem;
    line-height: 1.8;
    color: #3a3a3c;
    max-width: 800px;
    margin-bottom: 24px;
}

.ind-detail-whatwedo p:last-child {
    margin-bottom: 0;
}

.ind-detail-challenges {
    padding: 80px 0;
    background: var(--color-light);
}

.ind-detail-challenges h2 {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 400;
    color: var(--color-dark);
    margin-bottom: 40px;
}

.ind-challenges-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 20px;
    max-width: 720px;
}

.ind-challenges-list li {
    position: relative;
    padding-left: 28px;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: #3a3a3c;
}

.ind-challenges-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-accent);
}

.ind-detail-services {
    padding: 80px 0;
}

.ind-detail-services h2 {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 400;
    color: var(--color-dark);
    margin-bottom: 40px;
}

.ind-services-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.ind-pill {
    display: inline-block;
    padding: 10px 24px;
    border: 1px solid var(--color-border);
    border-radius: 100px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-dark);
    background: var(--color-light);
    transition: var(--transition);
    cursor: default;
}

.ind-pill:hover {
    border-color: var(--color-border);
    background: var(--color-light);
    color: var(--color-dark);
}

.ind-detail-stories {
    padding: 80px 0;
    background: var(--color-light);
}

.ind-detail-stories h2 {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 400;
    color: var(--color-dark);
    margin-bottom: 40px;
}

.ind-stories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 24px;
}

.ind-detail-cta {
    padding: 120px 0;
}

.ind-cta-inner {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.ind-cta-inner h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    color: var(--color-dark);
    margin-bottom: 16px;
}

.ind-cta-inner p {
    font-size: 1.125rem;
    line-height: 1.6;
    color: #3a3a3c;
    margin-bottom: 32px;
}

@media (max-width: 768px) {
    .ind-detail-hero-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .ind-stories-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- Services ---- */
.services-hero {
    padding: 220px 0 80px;
    background: var(--color-white);
}

.services-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: end;
}

.services-hero h1 {
    font-family: var(--font-serif);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 400;
    letter-spacing: -0.025em;
    color: var(--color-dark);
}

.services-intro {
    font-size: 1.125rem;
    line-height: 1.6;
    color: #3a3a3c;
    max-width: 480px;
}

.services-grid-section {
    padding: 0 0 120px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.service-card {
    display: block;
    background: var(--color-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 48px;
    transition: all var(--transition);
    text-decoration: none;
    color: inherit;
}

.service-card:hover {
    border-color: var(--color-dark);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

.service-icon {
    display: block;
    font-size: 2rem;
    margin-bottom: 20px;
    line-height: 1;
}

.service-card h2 {
    font-size: clamp(1.4rem, 2.2vw, 1.75rem);
    font-weight: 400;
    margin-bottom: 12px;
    color: var(--color-dark);
}

.service-card p {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #3a3a3c;
    margin-bottom: 24px;
}

.service-link {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-dark);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.service-link span {
    transition: transform 0.3s ease;
}

.service-card:hover .service-link span {
    transform: translateX(4px);
}

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

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

/* ── Solutions ── */
.solutions-hero {
    padding: 220px 0 80px;
    background: var(--color-light);
}

.solutions-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}

.solutions-hero h1 {
    font-family: var(--font-serif);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 400;
    line-height: 1.1;
    color: var(--color-dark);
}

.solutions-intro {
    font-size: 1.125rem;
    line-height: 1.6;
    color: #3a3a3c;
    max-width: 480px;
}

.solutions-grid-section {
    padding: 80px 0 120px;
}

.solutions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.solution-card {
    display: block;
    background: var(--color-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 56px;
    text-decoration: none;
    transition: var(--transition);
    position: relative;
}

.solution-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
    border-color: var(--color-dark);
}

.solution-card h2 {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 400;
    color: var(--color-dark);
    margin-bottom: 16px;
}

.solution-card p {
    font-size: 1rem;
    line-height: 1.7;
    color: #3a3a3c;
    margin-bottom: 24px;
}

.solution-duration {
    display: inline-block;
    padding: 6px 16px;
    background: var(--color-dark);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 100px;
    letter-spacing: 0.02em;
    margin-bottom: 24px;
}

.solution-link {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-dark);
    letter-spacing: 0.02em;
}

.solution-link span {
    display: inline-block;
    transition: var(--transition);
}

.solution-card:hover .solution-link span {
    transform: translateX(4px);
}

@media (max-width: 768px) {
    .solutions-hero-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

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

    .solution-card {
        padding: 32px;
    }
}

/* ---- Home Work Grid ---- */
.home-work-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px;
}

/* ---- Insight Detail ---- */

/* Reading Progress Bar */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background: var(--color-dark);
    z-index: 9999;
    transition: width 0.1s linear;
}

.insight-detail {
    background: var(--color-white);
}

/* ── Hero — dark, full-width ───────────────────────────────────────────── */
.insight-hero {
    background: var(--color-bg);
    padding: 200px 0 64px;
    text-align: center;
}

.insight-hero-tags {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 32px;
}

.insight-tag {
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
    background: transparent;
    border: 1px solid var(--color-border);
    padding: 5px 14px;
    border-radius: 0;
}

.insight-hero h1 {
    font-family: var(--font-serif);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 400;
    letter-spacing: -0.025em;
    line-height: 1.08;
    color: var(--color-text);
    max-width: 70%;
    margin: 0 auto 28px;
}

.insight-lead {
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    max-width: 600px;
    margin: 0 auto 40px;
}

.insight-hero-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
}

.insight-meta-sep {
    opacity: 0.4;
}

.insight-author,
.insight-date,
.insight-reading-time {
    font-size: 0.8125rem;
}

/* ── Hero Image ─────────────────────────────────────────────────────────── */
.insight-hero-image {
    margin-top: -32px;
    padding-bottom: 64px;
}

.insight-hero-image img {
    width: 100%;
    border-radius: 0;
}

/* ── Article Body – two-column: TOC | slim text ─────────────────────────── */
.insight-body {
    padding: 64px 0 80px;
}

.insight-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 64px;
    max-width: 1100px;
    margin: 0 auto;
    align-items: start;
}

/* ── Sticky Sidebar / TOC ───────────────────────────────────────────────── */
.insight-sidebar {
    position: relative;
}

.insight-sidebar-inner {
    position: sticky;
    top: calc(var(--nav-height) + 24px);
    max-height: calc(100vh - var(--nav-height) - 48px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.insight-sidebar-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.insight-sidebar-label {
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-gray);
    margin-bottom: 8px;
    display: block;
}

/* ── TOC ────────────────────────────────────────────────────────────────── */
.insight-toc {
    display: flex;
    flex-direction: column;
}

.insight-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.insight-toc-item {
    margin: 0;
    padding: 0;
}

.insight-toc-link {
    display: block;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--color-gray);
    text-decoration: none;
    padding: 6px 0 6px 14px;
    border-left: 2px solid var(--color-border);
    transition: color 0.2s ease, border-color 0.2s ease, font-weight 0.1s ease;
}

.insight-toc-link:hover {
    color: var(--color-dark);
    border-left-color: var(--color-dark);
}

.insight-toc-link.is-active {
    color: var(--color-dark);
    border-left-color: var(--color-dark);
    font-weight: 600;
}

/* ── Share Links ────────────────────────────────────────────────────────── */
.insight-share-links {
    display: flex;
    gap: 12px;
}

.insight-share-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--color-gray);
    border: 1px solid var(--color-border);
    transition: all 0.45s ease;
}

.insight-share-link:hover {
    color: var(--color-dark);
    border-color: var(--color-dark);
}

/* ── Main Content — slim, serif, readable ───────────────────────────────── */
.insight-content {
    max-width: 680px;
    font-family: var(--font-family);
    font-size: 1.125rem;
    line-height: 1.8;
    color: var(--color-text);
}

/* Hide all inline images in body — hero image is the only one */
.insight-content img {
    display: none;
}

.insight-content h2 {
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 400;
    margin: 64px 0 20px;
    padding-top: 56px;
    border-top: 1px solid var(--color-border);
    color: var(--color-dark);
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.insight-content h2:first-child {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

.insight-content h3 {
    font-size: 1.25rem;
    font-weight: 400;
    font-style: italic;
    margin: 40px 0 14px;
    color: var(--color-dark);
}

.insight-content p {
    font-family: var(--font-family);
    font-size: 1.125rem;
    line-height: 1.8;
    margin-bottom: 28px;
    color: var(--color-text);
}

.insight-content ul,
.insight-content ol {
    margin-bottom: 28px;
    padding-left: 26px;
}

.insight-content li {
    font-size: 1.125rem;
    line-height: 1.8;
    margin-bottom: 10px;
    color: #2c2c2e;
}

/* Pull Quotes / Blockquotes */
.insight-content blockquote {
    border-left: 3px solid var(--color-accent);
    padding: 8px 0 8px 32px;
    margin: 48px 0 48px -16px;
    font-style: italic;
    font-family: var(--font-family);
    font-size: 1.5rem;
    line-height: 1.5;
    color: var(--color-dark);
}

.insight-content blockquote p {
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    color: inherit;
}

/* Subtle bold in serif context */
.insight-content strong,
.insight-content b {
    font-weight: 600;
}

/* ── Related Insights ───────────────────────────────────────────────────── */
.insight-related {
    padding: 80px 0;
    border-top: 1px solid var(--color-border);
}

.insight-related h2 {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 400;
    margin-bottom: 48px;
}

.insight-card {
    transition: transform 0.3s ease;
}

.insight-card:hover {
    transform: translateY(-4px);
}

.insight-card-image {
    overflow: hidden;
}

.insight-card-image img {
    display: block; /* restore for card images — only body images are hidden */
    transition: transform 0.4s ease;
}

.insight-card:hover .insight-card-image img {
    transform: scale(1.03);
}

.insight-card-tags {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

.insight-tag-small {
    font-size: 0.625rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-gray);
}

/* ── Responsive — Insight ───────────────────────────────────────────────── */
@media (max-width: 900px) {
    .insight-layout {
        grid-template-columns: 180px 1fr;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .insight-hero {
        padding: 140px 0 48px;
    }
    .insight-hero h1 {
        max-width: 100%;
    }
    .insight-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .insight-sidebar {
        display: none;
    }
    .insight-content blockquote {
        margin-left: 0;
    }
}

/* ---- Hero Video Background ---- */
.cs-hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* No bold in body text — ever */
.cs-col-right strong,
.cs-col-right b {
    font-weight: 400;
}

/* ---- Image Collage Module (Masonry) ---- */
.collage-grid {
    columns: 4;
    column-gap: 0.5rem;
}
.collage-grid .collage-item {
    break-inside: avoid;
    margin-bottom: 0.5rem;
    overflow: hidden;
}
.collage-grid img {
    width: 100%;
    height: auto;
    display: block;
}

/* Masonry column count by image count */
.collage-2, .collage-3 { columns: 2; }
.collage-4, .collage-5, .collage-6 { columns: 3; }
.collage-7, .collage-8, .collage-9, .collage-10, .collage-11, .collage-12 { columns: 4; }

/* ---- Image Slider Module ---- */
.module-image-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 4rem 0;
}
.slider-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: transform;
}
.slider-slide {
    min-width: 100%;
    flex-shrink: 0;
}
.slider-slide img {
    width: 100%;
    height: auto;
    display: block;
}
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
    cursor: pointer;
    z-index: 10;
    transition: background 0.45s ease;
}
.slider-btn:hover {
    background: rgba(0, 0, 0, 0.8);
}
.slider-prev { left: 1rem; }
.slider-next { right: 1rem; }
.slider-dots {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 10;
}
.slider-dot {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: background 0.45s ease;
}
.slider-dot.active {
    background: #fff;
}

/* ---- To Top Button ---- */
.to-top {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    width: 48px;
    height: 48px;
    background: var(--color-dark);
    color: #fff;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.to-top.visible {
    opacity: 1;
    visibility: visible;
}
.to-top:hover {
    background: var(--color-accent);
}

/* ========================================
   Image + Text Module
   ======================================== */
.cs-image-text-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.cs-image-text-media img {
    width: 100%;
    height: auto;
    display: block;
}

.cs-image-text-content h2 {
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 400;
    margin-bottom: 1.5rem;
    color: var(--color-dark);
}

.cs-image-text-content p {
    font-size: 1rem;
    line-height: 1.75;
    color: #3a3a3c;
}

.cs-image-text--reverse .cs-image-text-grid {
    direction: rtl;
}

.cs-image-text--reverse .cs-image-text-grid > * {
    direction: ltr;
}

/* Logo 25 Years Badge */
.logo-years {
    font-size: 0.45em;
    letter-spacing: 0.15em;
    vertical-align: super;
    opacity: 0.6;
    font-family: var(--font-family);
    font-weight: 400;
    margin-left: 0.15em;
}

/* Brandmark SVG in Nav */
.brandmark {
    height: 0.9em;
    width: auto;
    margin-right: 0.3em;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.brandmark polygon {
    fill: currentColor;
    transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.5s ease;
}

/* Glitch Logo Effect — alexanderotto.de style */
.glitch-wrap {
    /* positioning inherited from .nav-logo */
}

.glitch-layer {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    pointer-events: none;
}

.glitch-main {
    display: flex;
    align-items: center;
}

.glitch-layer svg polygon {
    fill: currentColor;
}

/* Hover triggers glitch-burst */
.glitch-wrap:hover .glitch-main {
    animation: glitch-burst 0.5s linear forwards;
}

.glitch-wrap:hover .glitch-layer:nth-child(1) {
    animation: glitch-layer-1 0.5s linear forwards;
    color: #FF575A;
}

.glitch-wrap:hover .glitch-layer:nth-child(2) {
    animation: glitch-layer-2 0.5s linear forwards;
    color: #7B8CFF;
}

@keyframes glitch-burst {
    0% { transform: translate(0); opacity: 1; text-shadow: none; }
    8% { transform: translate(-4px, 2px) skewX(-8deg) scaleY(1.1); opacity: 0.8; text-shadow: 4px 0 rgba(255,87,90,0.9), -4px 0 rgba(123,140,255,0.9); }
    16% { transform: translate(5px, -2px) skewX(6deg) scaleX(1.05); opacity: 0.5; text-shadow: -5px 0 rgba(52,10,34,1), 3px 0 rgba(21,44,58,1); }
    24% { transform: translate(-3px, 3px) skewX(-4deg) scaleY(0.95); opacity: 0.7; text-shadow: 3px 2px rgba(123,140,255,1), -2px -1px rgba(255,87,90,0.7); }
    32% { transform: translate(2px, -1px) skewX(10deg); opacity: 0.4; }
    42% { transform: translate(0) skewX(0); opacity: 0.6; }
    55% { transform: translate(-3px, 1px) skewX(-6deg); opacity: 0.5; }
    62% { transform: translate(4px, -2px) skewX(5deg) scaleY(1.08); opacity: 0.7; text-shadow: -4px 0 rgba(255,87,90,0.8), 4px 0 rgba(123,140,255,0.8); }
    72% { transform: translate(-2px, 1px) skewX(-3deg); opacity: 0.85; text-shadow: 2px 0 rgba(52,10,34,0.6), -3px 0 rgba(21,44,58,0.6); }
    82% { transform: translate(1px, 0) skewX(2deg); opacity: 0.9; text-shadow: 2px 0 rgba(255,87,90,0.3), -1px 0 rgba(123,140,255,0.3); }
    92% { transform: translate(-1px, 0); opacity: 0.95; text-shadow: 1px 0 rgba(255,87,90,0.1); }
    100% { transform: translate(0); opacity: 1; text-shadow: none; }
}

@keyframes glitch-layer-1 {
    0%, 42%, 100% { opacity: 0; transform: translate(0); }
    8% { opacity: 0.7; transform: translate(4px, -2px) skewX(8deg); clip-path: inset(20% 0 40% 0); }
    16% { opacity: 0.5; transform: translate(-5px, 2px) skewX(-6deg); clip-path: inset(60% 0 10% 0); }
    24% { opacity: 0.8; transform: translate(3px, -3px) skewX(4deg); clip-path: inset(10% 0 50% 0); }
    32% { opacity: 0.3; transform: translate(-2px, 1px) skewX(-10deg); clip-path: inset(40% 0 20% 0); }
    62% { opacity: 0.5; transform: translate(-4px, 2px) skewX(-5deg); clip-path: inset(30% 0 30% 0); }
    72% { opacity: 0.3; transform: translate(2px, -1px); clip-path: inset(50% 0 10% 0); }
}

@keyframes glitch-layer-2 {
    0%, 42%, 100% { opacity: 0; transform: translate(0); }
    8% { opacity: 0.6; transform: translate(-3px, 2px) skewX(-6deg); clip-path: inset(50% 0 10% 0); }
    16% { opacity: 0.4; transform: translate(4px, -1px) skewX(5deg); clip-path: inset(0 0 60% 0); }
    24% { opacity: 0.7; transform: translate(-2px, 3px) skewX(-3deg); clip-path: inset(30% 0 20% 0); }
    32% { opacity: 0.5; transform: translate(3px, -2px) skewX(8deg); clip-path: inset(70% 0 0 0); }
    62% { opacity: 0.4; transform: translate(3px, -2px) skewX(4deg); clip-path: inset(10% 0 60% 0); }
    72% { opacity: 0.2; transform: translate(-2px, 1px); clip-path: inset(0 0 50% 0); }
}

/* Brand Gradient Overlay on Hero */
.hero-brand-gradient {
    position: absolute;
    inset: 0;
    z-index: 1;
    mix-blend-mode: multiply;
    opacity: 0.7;
}

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

/* ========================================
   Dark Mode Overrides
   ======================================== */
[data-theme="dark"] .work-hero::before,
[data-theme="dark"] .hero-branded::before,
[data-theme="dark"] .page-gradient-bg::before,
[data-theme="dark"] .cs-editorial-hero::before {
    opacity: 0.3;
}

[data-theme="dark"] .hero-branded {
    background: var(--color-bg);
}

[data-theme="dark"] .hero-passe-overlay {
    background: rgba(10, 10, 10, 0.85);
}

[data-theme="dark"] .hero-branded-text {
    color: var(--color-accent);
}

[data-theme="dark"] .work-card-visual {
    background: var(--color-surface);
}

[data-theme="dark"] .list-preview-float {
    background: var(--color-surface);
}

[data-theme="dark"] .cs-hero-passe {
    background: var(--color-bg);
}

[data-theme="dark"] .nav-light .nav-logo {
    color: var(--color-accent);
}

[data-theme="dark"] .nav-light .nav-main a,
[data-theme="dark"] .nav-light .nav-cta {
    color: var(--color-text);
}

[data-theme="dark"] .section {
    background: var(--color-bg);
}

[data-theme="dark"] .cs-section {
    background: var(--color-bg);
}

[data-theme="dark"] .footer {
    background: var(--color-surface);
}

[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3 {
    color: var(--color-text);
}

[data-theme="dark"] .work-hero {
    background: var(--color-bg);
}

[data-theme="dark"] .page-gradient-bg::before {
    background: linear-gradient(135deg, rgba(52,10,34,0.15) 0%, rgba(218,49,55,0.05) 30%, rgba(194,62,100,0.04) 50%, rgba(175,75,144,0.03) 70%, transparent 100%);
    opacity: 1;
}

[data-theme="dark"] .cs-hero-passe .cs-hero-content h1 {
    color: #f0f0f0;
}

/* prefers-color-scheme: dark – disabled, manual toggle only
   @media (prefers-color-scheme: dark) {
       .cs-hero-passe .cs-hero-content h1 {
           color: #f0f0f0;
       }
*/
}

.mega-intro {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--color-text-secondary, #86868b);
    line-height: 1.5;
    margin-bottom: 24px;
    max-width: 480px;
}

/* ── Zusammenarbeit Mega ── */
.mega-collab {
    min-width: 720px;
    padding-bottom: 52px;
}

.mega-collab-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 0 40px;
    align-items: stretch;
}

.mega-collab-intro {
    border-right: 1px solid var(--color-border, #e8e0dc);
    padding-right: 40px;
    padding-bottom: 8px;
}

.mega-collab-intro h3 {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
    color: var(--color-text);
}

.mega-collab-intro p {
    font-size: 0.82rem;
    color: var(--color-text-secondary, #86868b);
    line-height: 1.6;
    margin-bottom: 20px;
}

.mega-collab-cta {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-accent);
    text-decoration: none;
    border: 1px solid var(--color-accent);
    border-radius: 999px;
    padding: 8px 20px;
    transition: all 0.45s ease;
}

.mega-collab-cta:hover {
    background: var(--color-accent);
    color: #fff;
}

.mega-collab-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}

.mega-collab-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.45s ease;
}

.mega-collab-card:hover {
    background: var(--color-surface);
}

.mega-collab-card .mega-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text);
}

.mega-collab-card .mega-desc {
    font-size: 0.72rem;
    color: var(--color-text-secondary, #86868b);
    line-height: 1.5;
}

/* ── Stories Slider ── */
.stories-slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.stories-slider-header h2 {
    margin: 0;
}

.stories-slider-arrows {
    display: flex;
    gap: 8px;
}

.slider-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--color-border, rgba(0,0,0,0.1));
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.45s ease;
}

.slider-arrow:hover {
    border-color: var(--color-text);
    background: var(--color-surface);
}

.stories-slider-track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 8px;
}

.stories-slider-track::-webkit-scrollbar {
    display: none;
}

.stories-slide {
    flex: 0 0 calc(33.333% - 16px);
    scroll-snap-align: start;
    min-width: 280px;
}

/* ══════════════════════════════════════
   Service Detail Pages
   ══════════════════════════════════════ */

.svc-hero {
    padding: 160px 0 80px;
    position: relative;
}

.svc-hero::after {
    content: '';
    position: absolute;
    inset: 32px;
    border: 2px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    pointer-events: none;
}

.svc-hero-split {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
    align-items: center;
}

.svc-hero-text {
    max-width: 540px;
}

.svc-hero-visual .svc-image-frame {
    aspect-ratio: auto;
    border-radius: 8px;
}

.svc-hero-visual .svc-image-frame img {
    object-fit: contain;
    animation: svc-float 6s ease-in-out infinite;
}

@keyframes svc-float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    33% {
        transform: translateY(-8px) rotate(0.5deg);
    }
    66% {
        transform: translateY(4px) rotate(-0.3deg);
    }
}

.svc-hero-cat {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent);
    margin-bottom: 16px;
    display: inline-block;
    background: rgba(var(--color-dark-rgb), 0.06);
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid var(--color-accent);
}

.svc-hero h1 {
    font-family: var(--font-serif);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: 24px;
}

.svc-hero-lead {
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.7;
    color: var(--color-text-secondary, #555);
    max-width: 600px;
}

.svc-image-frame {
    border-radius: 8px;
    overflow: hidden;
}

.svc-image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.svc-image-placeholder {
    background: linear-gradient(135deg, #E8C4C4 0%, #C8919E 40%, #9A6B7D 70%, #5C3D4E 100%);
}

/* Intro Grid */
.svc-intro {
    padding: 80px 0;
}

.svc-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 80px;
    align-items: start;
}

.svc-intro-left h2 {
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    position: sticky;
    top: 120px;
}

.svc-intro-right {
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--color-text-secondary, #555);
}

.svc-intro-right p {
    margin-bottom: 1.2em;
}

/* Services Grid */
.svc-services {
    padding: 80px 0;
    background: #fff;
}

.svc-services h2 {
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 400;
    margin-bottom: 48px;
}

.svc-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.svc-service-card {
    padding: 32px;
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 8px;
    transition: border-color 0.3s ease, transform 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
}

.svc-service-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
}

.svc-card-icon {
    width: 28px;
    height: 28px;
    margin-bottom: 16px;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.svc-service-card:hover .svc-card-icon {
    opacity: 1;
}

.svc-service-card h3 {
    font-size: 1.8rem;
    font-weight: 400;
    margin-bottom: 12px;
}

.svc-service-card p {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--color-text-secondary, #555);
    flex: 1;
}

.svc-card-arrow {
    font-size: 1.1rem;
    color: var(--color-accent);
    margin-top: 16px;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.svc-service-card:hover .svc-card-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* Process Steps */
.svc-process {
    padding: 80px 0;
}

.svc-process h2 {
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 400;
    margin-bottom: 48px;
}

.svc-process-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.svc-step {
    padding-top: 24px;
    padding-right: 32px;
    border-top: 2px solid var(--color-accent);
    position: relative;
}

.svc-step:last-child {
    padding-right: 0;
}

.svc-step:not(:last-child)::after {
    content: '→';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    color: var(--color-accent);
    font-weight: 300;
}

.svc-step-num {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-accent);
    display: block;
    margin-bottom: 12px;
}

.svc-step h3 {
    font-size: 1.6rem;
    font-weight: 400;
    margin-bottom: 8px;
}

.svc-step p {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--color-text-secondary, #555);
}

/* Mid Image */
.svc-midimage {
    padding: 40px 0 80px;
}

/* Why Us */
.svc-whyus {
    padding: 80px 0;
    background: #fff;
}

/* CTA */
.svc-cta {
    padding: 120px 0;
    text-align: center;
    background: var(--color-dark);
    color: var(--color-white);
}

.svc-cta-inner {
    max-width: 560px;
    margin: 0 auto;
}

.svc-cta h2 {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 400;
    margin-bottom: 16px;
}

.svc-cta p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 32px;
    line-height: 1.6;
}

.mega-col-icon {
    width: 16px;
    height: 16px;
    opacity: 0.7;
}

/* Reversed hero layout (image left, text right) */
.svc-hero-reversed {
    direction: rtl;
}

.svc-hero-reversed > * {
    direction: ltr;
}

/* ── Animated inline SVG ── */
.svc-animated-svg svg {
    width: 100%;
    height: auto;
}

.svc-animated-svg svg path[stroke] {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: svg-draw 3s ease-out forwards, svg-wave 8s ease-in-out 3s infinite;
}

.svc-animated-svg svg path:nth-child(2) { animation-delay: 0.1s, 3.1s; }
.svc-animated-svg svg path:nth-child(3) { animation-delay: 0.2s, 3.2s; }
.svc-animated-svg svg path:nth-child(4) { animation-delay: 0.3s, 3.3s; }
.svc-animated-svg svg path:nth-child(5) { animation-delay: 0.4s, 3.4s; }
.svc-animated-svg svg path:nth-child(6) { animation-delay: 0.5s, 3.5s; }
.svc-animated-svg svg path:nth-child(7) { animation-delay: 0.6s, 3.6s; }
.svc-animated-svg svg path:nth-child(8) { animation-delay: 0.7s, 3.7s; }
.svc-animated-svg svg path:nth-child(9) { animation-delay: 0.8s, 3.8s; }
.svc-animated-svg svg path:nth-child(10) { animation-delay: 0.9s, 3.9s; }
.svc-animated-svg svg path:nth-child(n+11) { animation-delay: 1s, 4s; }

.svc-animated-svg svg path[fill]:not([fill="none"]) {
    opacity: 0;
    animation: svg-fill-in 1.5s ease-out forwards, svg-breathe 6s ease-in-out 2s infinite;
}

.svc-animated-svg svg path[fill]:nth-child(2) { animation-delay: 0.3s, 2.3s; }
.svc-animated-svg svg path[fill]:nth-child(3) { animation-delay: 0.5s, 2.5s; }
.svc-animated-svg svg path[fill]:nth-child(4) { animation-delay: 0.7s, 2.7s; }
.svc-animated-svg svg path[fill]:nth-child(5) { animation-delay: 0.9s, 2.9s; }
.svc-animated-svg svg path[fill]:nth-child(6) { animation-delay: 1.1s, 3.1s; }
.svc-animated-svg svg path[fill]:nth-child(n+7) { animation-delay: 1.3s, 3.3s; }

@keyframes svg-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes svg-wave {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes svg-fill-in {
    to { opacity: 1; }
}

@keyframes svg-breathe {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

/* ── Tech Resources Bar ── */
.svc-tech-resources {
    padding: 0 0 80px;
}

.tech-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 24px 28px;
    background: var(--color-dark, #340A22);
    border-radius: 8px;
}

.tech-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: all 0.45s ease;
}

.tech-badge:hover {
    border-color: rgba(255, 255, 255, 0.35);
    color: rgba(255, 255, 255, 0.9);
}

.tech-badge svg {
    opacity: 0.4;
    transition: opacity 0.2s ease;
}

.tech-badge:hover svg {
    opacity: 0.8;
}

/* Prev/Next Hero Navigation */
.svc-hero-nav {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    padding: 16px clamp(1.5rem, 4vw, 3rem);
    z-index: 10;
}

.svc-hero-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: color var(--transition), transform var(--transition);
    padding: 8px 0;
}

.svc-hero-nav__link:hover {
    color: #fff;
}

.svc-hero-nav__prev:hover {
    transform: translateX(-4px);
}

.svc-hero-nav__next:hover {
    transform: translateX(4px);
}

.svc-hero-nav__next {
    margin-left: auto;
}

/* Light variant (non-video heroes) */
.svc-hero-nav--light {
    position: relative;
    padding: 16px clamp(1.5rem, 4vw, 3rem);
    max-width: var(--container-max);
    margin: 0 auto;
}

.svc-hero-nav--light .svc-hero-nav__link {
    color: var(--color-text-secondary);
}

.svc-hero-nav--light .svc-hero-nav__link:hover {
    color: var(--color-dark);
}

@media (max-width: 768px) {
    .svc-hero-nav__link span {
        display: none;
    }
}

.svc-hero-logo {
    height: 36px;
    width: auto;
    opacity: 0.5;
    margin-top: 2rem;
    margin-bottom: 0;
    display: block;
}

/* Dark mode: invert SVG illustrations */
/* prefers-color-scheme: dark – disabled, manual toggle only
   @media (prefers-color-scheme: dark) {
       .svc-hero-visual .svc-image-frame img {
           filter: invert(0.85) hue-rotate(180deg);
       }
*/
}

[data-theme="dark"] .svc-hero-visual .svc-image-frame img {
    filter: invert(0.85) hue-rotate(180deg);
}

/* Dark mode: burger + AI icon rosa */
/* prefers-color-scheme: dark – disabled, manual toggle only
   @media (prefers-color-scheme: dark) {
       .nav-burger span {
           background: var(--color-accent, #FF575A);
       }
*/
    .nav-burger:hover span {
        background: #E8A0C0;
    }
}

[data-theme="dark"] .nav-burger span {
    background: rgba(255, 255, 255, 0.85);
}
[data-theme="dark"] .nav-burger:hover span {
    background: rgba(255, 255, 255, 1);
}

/* ── Theme Toggle ── */
.nav-theme-toggle {
    background: none;
    border: 1.5px solid currentColor;
    border-radius: 999px;
    cursor: pointer;
    color: currentColor;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    opacity: 0.7;
    transition: opacity 0.3s ease, background 0.3s ease;
}

.nav-theme-toggle:hover {
    opacity: 1;
    background: rgba(128,128,128,0.1);
}

/* Light mode: show moon, hide sun */
.nav-theme-toggle .icon-sun { display: none; }
.nav-theme-toggle .icon-moon { display: block; }

/* Dark mode: show sun, hide moon */
[data-theme="dark"] .nav-theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .nav-theme-toggle .icon-moon { display: none; }

/* prefers-color-scheme: dark – disabled, manual toggle only */

/* Dark mode: AI icon rosa */
[data-theme="dark"] .nav-ai-btn { color: var(--color-accent, #FF575A); }

/* ── Hero with background image ── */
.svc-hero-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.svc-hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: none;
    z-index: 0;
}

.svc-hero-bg .container {
    position: relative;
    z-index: 1;
}

/* prefers-color-scheme: dark – disabled, manual toggle only
   @media (prefers-color-scheme: dark) {
       .svc-hero-bg::before {
           background: rgba(20, 20, 19, 0.7);
       }
*/
}

[data-theme="dark"] .svc-hero-bg::before {
    background: rgba(20, 20, 19, 0.7);
}

.svc-hero-bg .svc-hero-text h1,
.svc-hero-bg .svc-hero-lead,
.svc-hero-bg .svc-hero-cat {
    color: #fff;
}

.svc-hero-bg .svc-hero-cat {
    color: rgba(255, 255, 255, 0.7);
}

/* ── Hero video background ── */
.svc-hero-video,
.svc-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.svc-hero-img {
    background-size: cover;
    background-position: center;
}

.svc-hero-bg {
    position: relative;
    overflow: hidden;
}

/* ── Service Passepartout Hero ── */
.svc-hero-passe {
    position: relative;
    height: 85vh;
    min-height: 500px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(252,241,240,0.4) 0%, rgba(218,49,55,0.1) 30%, rgba(194,62,100,0.07) 50%, rgba(175,75,144,0.05) 70%, rgba(160,80,163,0.03) 100%);
}

.svc-passe-frame {
    position: absolute;
    inset: 32px;
    overflow: hidden;
    border-radius: 8px;
}

.svc-passe-frame::before {
    content: '';
    position: absolute;
    inset: -1px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    z-index: 3;
    pointer-events: none;
    transition: border-color 0.6s ease;
}

.svc-hero-passe:hover .svc-passe-frame::before {
    border-color: rgba(255,87,90,0.25);
}

.svc-passe-inner {
    position: absolute;
    inset: -10px;
    transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
    transform: scale(1.03);
}

.svc-passe-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.svc-passe-inner video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.svc-passe-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0,0,0,0.1) 0%,
        transparent 40%,
        rgba(0,0,0,0.55) 100%
    );
    z-index: 1;
}

.svc-passe-content {
    position: relative;
    z-index: 2;
    padding: 0 80px 64px;
    max-width: 800px;
}

.svc-passe-content h1 {
    color: #fff;
    font-size: clamp(2.5rem, 5vw, 4rem);
    margin-bottom: 16px;
}

.svc-passe-content .svc-hero-lead {
    color: rgba(255,255,255,0.8);
    font-size: clamp(1rem, 1.5vw, 1.2rem);
}

.svc-passe-content .svc-hero-cat {
    color: rgba(255,255,255,0.8);
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.3);
}

/* Mouse parallax for passepartout service hero */
.svc-hero-passe[data-parallax] .svc-passe-inner {
    will-change: transform;
}

@media (max-width: 768px) {
    .svc-passe-frame {
        inset: 16px;
    }
    .svc-passe-content {
        padding: 0 32px 40px;
    }
}

/* prefers-color-scheme: dark – disabled, manual toggle only
   @media (prefers-color-scheme: dark) {
       .svc-hero-passe {
           background: var(--color-bg, #141413);
       }
*/
}

[data-theme="dark"] .svc-hero-passe {
    background: var(--color-bg, #141413);
}

/* ========================================
   AI Newsletter Partial
   ======================================== */
.newsletter-ai {
    padding: clamp(4rem, 8vw, 8rem) 0;
    background: var(--color-surface, #f8f6f3);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.newsletter-ai--compact {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.newsletter-ai__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 4vw, 3rem);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 4vw, 6rem);
    align-items: center;
}

.newsletter-ai__badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-secondary, #6b6b6b);
    margin-bottom: 1rem;
}

.newsletter-ai__title {
    font-size: clamp(1.8rem, 3.5vw, 3rem);
    font-weight: 400;
    line-height: 1.1;
    margin: 0 0 1rem;
    color: var(--color-dark);
}

.newsletter-ai__title em {
    font-style: italic;
}

.newsletter-ai__text {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-secondary, #6b6b6b);
    max-width: 440px;
    margin: 0;
}

.newsletter-ai__input-group {
    display: flex;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-white);
    transition: border-color var(--transition);
}

.newsletter-ai__input-group:focus-within {
    border-color: var(--color-dark);
}

.newsletter-ai__input {
    flex: 1;
    padding: 0.9rem 1.25rem;
    border: none;
    background: transparent;
    color: var(--color-dark);
    font-size: 1rem;
    font-family: var(--font-family);
    outline: none;
}

.newsletter-ai__input::placeholder {
    color: rgba(0, 0, 0, 0.35);
}

.newsletter-ai__button {
    padding: 0.9rem 2rem;
    border: none;
    border-left: 1px solid var(--color-border);
    background: var(--color-dark);
    color: var(--color-white);
    font-size: 0.8rem;
    font-weight: 500;
    font-family: var(--font-family);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--transition);
    white-space: nowrap;
}

.newsletter-ai__button:hover {
    background: #340A22;
}

.newsletter-ai__legal {
    font-size: 0.78rem;
    color: var(--color-text-secondary, #6b6b6b);
    opacity: 0.6;
    margin: 0.75rem 0 0;
}

/* Compact: single column */
.newsletter-ai--compact .newsletter-ai__inner {
    grid-template-columns: 1fr;
    max-width: 640px;
}

.newsletter-ai--compact .newsletter-ai__text {
    margin: 0;
}

@media (max-width: 768px) {
    .newsletter-ai__inner {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   Discovery Call CTA Partial
   ======================================== */
.cta-discovery {
    padding: clamp(5rem, 10vw, 10rem) 0;
    background: var(--color-surface);
    text-align: center;
}

.cta-discovery--light {
    background: var(--color-white);
}

.cta-discovery__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 4vw, 3rem);
}

.cta-discovery__badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 1.5rem;
}

.cta-discovery__title {
    font-family: var(--font-serif);
    font-size: clamp(2.2rem, 5vw, 4rem);
    font-weight: 400;
    line-height: 1.1;
    margin: 0 0 1.25rem;
    color: var(--color-dark);
}

.cta-discovery__title em {
    font-style: italic;
}

.cta-discovery__text {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    max-width: 520px;
    margin: 0 0 2.5rem;
}

.cta-discovery__button {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2.5rem;
    background: var(--color-dark);
    color: var(--color-white);
    font-size: 0.9rem;
    font-weight: 600;
    font-family: var(--font-family);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
    transition: all var(--transition);
}

.cta-discovery__button:hover {
    background: var(--color-accent);
    transform: translateY(-2px);
}

.cta-discovery__arrow {
    transition: transform var(--transition);
}

.cta-discovery__button:hover .cta-discovery__arrow {
    transform: translateX(4px);
}

/* ========================================
   Insights Slider Partial
   ======================================== */
.insights-slider {
    padding: clamp(4rem, 8vw, 8rem) 0;
    background: var(--color-white);
    overflow: hidden;
}

.insights-slider__header {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 4vw, 3rem);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.insights-slider__badge {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 0.5rem;
}

.insights-slider__title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    line-height: 1.1;
    margin: 0;
    color: var(--color-dark);
}

.insights-slider__nav {
    display: flex;
    gap: 0.5rem;
}

.insights-slider__arrow {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
}

.insights-slider__arrow:hover {
    background: var(--color-dark);
    color: var(--color-white);
    border-color: var(--color-dark);
}

.insights-slider__track {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 clamp(1.5rem, 4vw, 3rem);
    max-width: calc(var(--container-max) + clamp(1.5rem, 4vw, 3rem) * 2);
    margin: 0 auto;
}

.insights-slider__track::-webkit-scrollbar {
    display: none;
}

.insights-slider__card {
    flex: 0 0 clamp(280px, 30vw, 380px);
    scroll-snap-align: start;
    text-decoration: none;
    color: inherit;
    border-radius: 6px;
    overflow: hidden;
    background: var(--color-light);
    transition: transform var(--transition), box-shadow var(--transition);
}

.insights-slider__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

.insights-slider__image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

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

.insights-slider__card:hover .insights-slider__image img {
    transform: scale(1.05);
}

.insights-slider__content {
    padding: 1.25rem 1.5rem 1.5rem;
}

.insights-slider__tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 0.75rem;
}

.insights-slider__card-title {
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.3;
    margin: 0 0 0.5rem;
    color: var(--color-dark);
}

.insights-slider__excerpt {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin: 0;
}

@media (max-width: 768px) {
    .insights-slider__card {
        flex: 0 0 85vw;
    }

    .insights-slider__nav {
        display: none;
    }
}


/* ========================================
   Kontaktseite
   ======================================== */

/* Hero */
.kontakt-hero {
    background: var(--color-bg);
    padding: 220px 0 80px;
    border-bottom: 1px solid var(--color-border);
}

.kontakt-hero__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 4vw, 3rem);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 4vw, 6rem);
    align-items: end;
}

@media (max-width: 768px) {
    .kontakt-hero__inner {
        grid-template-columns: 1fr;
    }
}

.kontakt-hero__label {
    display: block;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: 1.25rem;
}

.kontakt-hero__headline {
    font-family: var(--font-serif);
    font-size: clamp(3rem, 6vw, 5.5rem);
    font-weight: 400;
    line-height: 1.0;
    letter-spacing: -0.02em;
    color: var(--color-dark);
    margin: 0;
}

.kontakt-hero__subtext {
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    line-height: 1.7;
    color: var(--color-text-secondary);
    max-width: 48ch;
    padding-bottom: 0.5rem;
}

/* Kontaktoptionen */
.kontakt-options {
    background: var(--color-light);
    border-bottom: 1px solid var(--color-border);
}

.kontakt-options__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 4vw, 3rem);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

@media (max-width: 768px) {
    .kontakt-options__inner {
        grid-template-columns: 1fr;
    }
}

.kontakt-option-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem);
    text-decoration: none;
    color: var(--color-text);
    border-right: 1px solid var(--color-border);
    transition: background var(--transition), color var(--transition);
    position: relative;
}

.kontakt-option-card:last-child {
    border-right: none;
}

@media (max-width: 768px) {
    .kontakt-option-card {
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }
    .kontakt-option-card:last-child {
        border-bottom: none;
    }
}

.kontakt-option-card:hover {
    background: #340A22;
    color: #fff;
}

.kontakt-option-card__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #340A22;
    transition: all var(--transition);
}

.kontakt-option-card:hover .kontakt-option-card__icon {
    border-color: rgba(255,255,255,0.3);
    color: #fff;
}

.kontakt-option-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.kontakt-option-card__label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    transition: color var(--transition);
}

.kontakt-option-card:hover .kontakt-option-card__label {
    color: rgba(255,255,255,0.55);
}

.kontakt-option-card__value {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    font-weight: 400;
    color: var(--color-text);
    transition: color var(--transition);
}

.kontakt-option-card:hover .kontakt-option-card__value {
    color: #fff;
}

.kontakt-option-card__detail {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    transition: color var(--transition);
}

.kontakt-option-card:hover .kontakt-option-card__detail {
    color: rgba(255,255,255,0.45);
}

.kontakt-option-card__arrow {
    flex-shrink: 0;
    color: var(--color-border);
    transition: all var(--transition);
}

.kontakt-option-card:hover .kontakt-option-card__arrow {
    color: rgba(255,255,255,0.5);
    transform: translateX(4px);
}

/* Hauptbereich */
.kontakt-main {
    background: var(--color-white);
    padding: clamp(4rem, 8vw, 8rem) 0;
}

.kontakt-main__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 4vw, 3rem);
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
}

@media (max-width: 1024px) {
    .kontakt-main__inner {
        grid-template-columns: 1fr;
    }
}

/* Formular */
.kontakt-form-header {
    margin-bottom: 2.5rem;
}

.kontakt-form-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    color: var(--color-dark);
    margin: 0 0 0.75rem;
}

.kontakt-form-subtitle {
    font-size: 1rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.kontakt-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-row {
    width: 100%;
}

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

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

.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-field label {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text);
}

.form-field .req {
    color: #340A22;
}

.form-field input,
.form-field textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid var(--color-border);
    background: var(--color-white);
    color: var(--color-text);
    font-family: var(--font-family);
    font-size: 0.95rem;
    border-radius: 2px;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
    -webkit-appearance: none;
}

.form-field input:focus,
.form-field textarea:focus {
    border-color: #340A22;
    box-shadow: 0 0 0 3px rgba(52, 10, 34, 0.08);
}

.form-field textarea {
    resize: vertical;
    min-height: 140px;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: var(--color-text-secondary);
    opacity: 0.6;
}

.form-row--submit {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.kontakt-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2.25rem;
    background: #340A22;
    color: #fff;
    font-family: var(--font-family);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
}

.kontakt-submit:hover {
    background: #4a0f30;
    transform: translateY(-1px);
}

.kontakt-submit svg {
    transition: transform var(--transition);
}

.kontakt-submit:hover svg {
    transform: translateX(4px);
}

.form-privacy {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    max-width: 30ch;
}

/* Erfolgs-Message */
.form-success {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 4px;
}

.form-success__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #340A22;
    color: #fff;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.form-success h3 {
    font-size: 1.75rem;
    font-weight: 400;
    color: var(--color-dark);
    margin-bottom: 0.75rem;
}

.form-success p {
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* Sidebar */
.kontakt-sidebar {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Ansprechpartner */
.kontakt-person {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 2px;
    overflow: hidden;
}

.kontakt-person__photo {
    width: 100%;
    aspect-ratio: 4/3;
    background: #340A22;
    overflow: hidden;
}

.kontakt-person__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kontakt-person__photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.3);
}

.kontakt-person__body {
    padding: 1.5rem;
}

.kontakt-person__name {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: 0.2rem;
}

.kontakt-person__title {
    display: block;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 1rem;
}

.kontakt-person__quote {
    font-size: 0.95rem;
    font-style: italic;
    color: var(--color-text-secondary);
    line-height: 1.65;
    border-left: 2px solid #340A22;
    padding-left: 1rem;
    margin: 0;
}

/* Agentur-Info */
.kontakt-agency {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 2px;
    padding: 1.5rem;
}

.kontakt-agency__title {
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--color-dark);
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}

.kontakt-agency__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0 0 1.25rem;
}

.kontakt-agency__list li {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}

.kontakt-agency__list li svg {
    flex-shrink: 0;
    margin-top: 3px;
    color: #340A22;
}

.kontakt-agency__list a {
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--transition);
}

.kontakt-agency__list a:hover {
    color: #340A22;
}

.kontakt-agency__meta {
    border-top: 1px solid var(--color-border);
    padding-top: 1rem;
    font-size: 0.78rem;
    color: var(--color-text-secondary);
}

/* Dark Mode Adjustments */
[data-theme="dark"] .kontakt-hero {
    background: #1a0512;
}

[data-theme="dark"] .kontakt-option-card:hover {
    background: #1a0512;
}

[data-theme="dark"] .kontakt-option-card__icon {
    color: rgba(240,240,240,0.8);
}

[data-theme="dark"] .kontakt-person__photo {
    background: #1a0512;
}

[data-theme="dark"] .kontakt-submit {
    background: #f0f0f0;
    color: #340A22;
}



[data-theme="dark"] .form-field .req {
    color: var(--color-accent);
}

[data-theme="dark"] .kontakt-person__quote {
    border-left-color: var(--color-accent);
}

[data-theme="dark"] .kontakt-agency__list li svg {
    color: var(--color-accent);
}

/* prefers-color-scheme: dark – disabled, manual toggle only
   @media (prefers-color-scheme: dark) {
       .kontakt-hero { background: #1a0512; }
*/
    .kontakt-option-card:hover { background: #1a0512; }
    .kontakt-option-card__icon { color: rgba(240,240,240,0.8); }
    .kontakt-person__photo { background: #1a0512; }
    .kontakt-submit { background: #f0f0f0; color: #340A22; }
    .kontakt-submit:hover { background: #ffffff; }
    .form-field .req { color: var(--color-accent); }
    .kontakt-person__quote { border-left-color: var(--color-accent); }
    .kontakt-agency__list li svg { color: var(--color-accent); }
}

/* ── Announcement Bar ── */
.announcement-bar {
    background: #340A22;
    color: #fff;
    text-align: center;
    padding: 10px 48px;
    font-size: 0.875rem;
    position: relative;
    z-index: 1000;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.announcement-bar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: var(--container-max, 1400px);
    margin: 0 auto;
}
.announcement-bar-icon { font-size: 1rem; flex-shrink: 0; }
.announcement-bar-text { line-height: 1.4; }
.announcement-bar-text strong { font-weight: 600; }
.announcement-bar-link {
    color: #f0b8c8;
    text-decoration: none;
    margin-left: 8px;
    font-weight: 500;
    white-space: nowrap;
}
.announcement-bar-link:hover { text-decoration: underline; }
.announcement-bar-close {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255,255,255,0.6);
    font-size: 1.25rem;
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
}
.announcement-bar-close:hover { color: #fff; }
@media (max-width: 600px) {
    .announcement-bar { padding: 10px 40px; font-size: 0.8rem; }
}

/* ── Work Card Loader / Spinner ── */
.work-card-loader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(252,241,240,0.35) 0%, rgba(218,49,55,0.08) 30%, rgba(194,62,100,0.06) 50%, rgba(175,75,144,0.04) 70%, rgba(160,80,163,0.02) 100%);
    z-index: 2;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.work-card-spinner {
    width: 32px;
    height: 32px;
    border: 2px solid rgba(52,10,34,0.12);
    border-top-color: rgba(52,10,34,0.5);
    border-radius: 50%;
    animation: card-spin 0.8s linear infinite;
}
@keyframes card-spin {
    to { transform: rotate(360deg); }
}

/* Industry Detail – Hero Tagline */
.ind-hero-tagline {
    font-size: clamp(0.95rem, 1.5vw, 1.15rem);
    color: rgba(255,255,255,0.65);
    line-height: 1.6;
    max-width: 60ch;
    margin-top: 0.75rem;
}

/* .industry-detail-page entfernt – body_class wird nie gesetzt */

.ind-hero-passe {
    height: 72vh;
    min-height: 480px;
    margin-top: 0 !important;
}

.ind-hero-passe .passe-bg {
    background-position: center 40% !important;
}

/* ========================================
   Industry Hero Slideshow
   ======================================== */

.ind-slideshow-hero {
    position: relative;
    height: 66vh;
    min-height: 460px;
    overflow: visible;
    margin-top: calc(var(--nav-height) + 24px);
    padding: 24px;
    background: transparent;
}

/* Outer frame – wie svc-passe-frame */
.ind-slideshow-frame {
    position: absolute;
    inset: 24px;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 32px rgba(26,5,18,0.10);
    isolation: isolate;
}

.ind-slideshow-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 8px;
    z-index: 3;
    pointer-events: none;
    transition: border-color 0.6s ease;
}

.ind-slideshow-hero:hover .ind-slideshow-frame::after {
    border-color: rgba(255,87,90,0.2);
}

.ind-slideshow-track {
    position: absolute;
    inset: 0;
}

.ind-slideshow-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.4s ease;
}

.ind-slideshow-slide.is-active {
    opacity: 1;
}

.ind-slideshow-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: var(--slide-pos, center 25%);
    transform: scale(1.05);
    transition: transform 7s ease;
}

.ind-slideshow-slide.is-active .ind-slideshow-bg {
    transform: scale(1.0);
}

.ind-slideshow-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(26, 5, 18, 0.04) 0%,
        transparent 30%,
        rgba(26, 5, 18, 0.62) 100%
    );
}

/* Content – wie svc-passe-content */
.ind-slideshow-content {
    position: absolute;
    bottom: 24px;
    left: 24px;
    right: 24px;
    z-index: 4;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 80px 64px;
}

.ind-slideshow-text {
    flex: 1;
    max-width: 800px;
}

/* Category Badge – wie svc-hero-cat */
.ind-slideshow-label {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.30);
    padding: 6px 16px;
    border-radius: 999px;
    margin-bottom: 16px;
}

.ind-slideshow-content h1 {
    font-family: var(--font-serif);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 400;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin: 0 0 16px;
}

.ind-slideshow-lead {
    color: rgba(255,255,255,0.8);
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 1.6;
    margin: 0;
    max-width: 560px;
}

/* Counter rechts */
.ind-slideshow-counter {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.4);
    white-space: nowrap;
    padding-bottom: 0.15rem;
    align-self: flex-end;
    font-variant-numeric: tabular-nums;
}

.ind-slideshow-counter span {
    color: rgba(255,255,255,0.9);
}

/* Progress Bar – am unteren Rand des Frames */
.ind-slideshow-progress {
    position: absolute;
    bottom: 24px;
    left: 24px;
    right: 24px;
    height: 2px;
    background: rgba(255,255,255,0.12);
    z-index: 5;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
}

.ind-slideshow-bar {
    height: 100%;
    background: rgba(255,255,255,0.7);
    width: 0%;
    transition: width 5s linear;
}

.ind-slideshow-bar.is-running {
    width: 100%;
}

/* Dots entfernt, stattdessen Counter + Bar */

/* Video Overlay – vollflächig über allem */
.ind-slideshow-video-overlay {
    position: absolute;
    inset: -5%;
    width: 110%;
    height: 110%;
    object-fit: cover;
    opacity: 0.25;
    z-index: 3;
    pointer-events: none;
}

/* Slideshow Caption – wechselt mit jedem Motiv */
.ind-slideshow-caption {
    font-size: clamp(0.75rem, 1.1vw, 0.9rem);
    font-weight: 400;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.04em;
    margin: 10px 0 0;
    font-style: italic;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.ind-slideshow-caption.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   Industry Detail – Passepartout Hero polish
   ======================================== */

/* Content mit Container bündig */
.ind-hero-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding-bottom: clamp(2.5rem, 5vw, 5rem);
}

.ind-hero-content h1 {
    font-family: var(--font-serif);
    font-size: clamp(3rem, 7vw, 6.5rem);
    font-weight: 400;
    color: #fff;
    line-height: 1.0;
    letter-spacing: -0.03em;
    margin: 0 0 0.5rem;
}

/* Zarte horizontale Scan-Linie */
.ind-hero-scanline {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.25) 30%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.25) 70%, transparent 100%);
    animation: ind-scanline 6s ease-in-out infinite;
    z-index: 3;
    pointer-events: none;
}

@keyframes ind-scanline {
    0%   { top: 15%; opacity: 0; }
    10%  { opacity: 1; }
    85%  { opacity: 0.6; }
    100% { top: 85%; opacity: 0; }
}

/* Progress Circle – oben links */
.ind-progress-circle {
    position: absolute;
    top: 48px;
    left: 48px;
    z-index: 5;
    width: 40px;
    height: 40px;
    pointer-events: none;
}

.ind-progress-circle svg {
    transform: rotate(-90deg);
    width: 40px;
    height: 40px;
}

.ind-progress-circle__track {
    fill: none;
    stroke: rgba(255,255,255,0.15);
    stroke-width: 2;
}

.ind-progress-circle__fill {
    fill: none;
    stroke: rgba(255,255,255,0.85);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 100.53; /* 2π × 16 */
    stroke-dashoffset: 100.53;
    transition: stroke-dashoffset 0.1s linear;
}

.ind-progress-circle__fill.is-running {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 5s linear;
}

/* Floating Brand Block entfernt – war temporär */

/* ======================================
   HUD Dark Mode – Deep Dark Edition
   ====================================== */

[data-theme="dark"] body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
}



[data-theme="dark"] .work-card:hover,
[data-theme="dark"] .svc-card:hover,
[data-theme="dark"] .insight-card:hover {
    border-color: rgba(232,160,192,0.25);
    box-shadow: 0 0 24px rgba(232,160,192,0.06);
}

[data-theme="dark"] .site-nav::before {
    content: '◈ DARK';
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.5rem;
    font-family: monospace;
    letter-spacing: 0.2em;
    color: rgba(232,160,192,0.4);
    animation: hud-blink 2.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes hud-blink {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.9; }
}

[data-theme="dark"] .btn-primary {
    box-shadow: 0 0 16px rgba(232,160,192,0.12);
}
[data-theme="dark"] .btn-primary:hover {
    box-shadow: 0 0 28px rgba(232,160,192,0.28);
}



[data-theme="dark"] .site-footer,
[data-theme="dark"] .footer {
    background: #050504 !important;
}

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: #111110;
    border-color: #1e1e1d;
    color: #efefed;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #555;
}

/* ======================================
   Dark Mode – Keine hellen Flächen
   Alle white/light Backgrounds überschreiben
   ====================================== */

/* Allgemeine Regel – white backgrounds weg */
[data-theme="dark"] .hero-light,
[data-theme="dark"] .cs-hero.hero-light,
[data-theme="dark"] .industries-hero,
[data-theme="dark"] .ind-detail-hero,
[data-theme="dark"] .services-hero,
[data-theme="dark"] .insight-detail,
[data-theme="dark"] .svc-services,
[data-theme="dark"] .svc-whyus,
[data-theme="dark"] .cta-discovery--light,
[data-theme="dark"] .insights-slider,
[data-theme="dark"] .kontakt-hero,
[data-theme="dark"] .kontakt-main,
[data-theme="dark"] .form-success,
[data-theme="dark"] .kontakt-person,
[data-theme="dark"] .kontakt-agency {
    background: var(--color-bg);
}

/* Cards – alle dunkel */
[data-theme="dark"] .work-card,
[data-theme="dark"] .insight-card,
[data-theme="dark"] .svc-card,
[data-theme="dark"] .cs-card,
[data-theme="dark"] .mega-story-item,
[data-theme="dark"] .mega-industry-card,
[data-theme="dark"] .ind-slide-info,
[data-theme="dark"] .ind-slideshow-label,
[data-theme="dark"] .cta-discovery,
[data-theme="dark"] .newsletter-wrap,
[data-theme="dark"] .svc-process-step,
[data-theme="dark"] .svc-quickwin,
[data-theme="dark"] .svc-result-item,
[data-theme="dark"] .tag-list .tag,
[data-theme="dark"] .filter-tab,
[data-theme="dark"] .filter-search-input {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

/* Abschnitte mit rosa Gradient – dämpfen */
[data-theme="dark"] .page-gradient-bg,
[data-theme="dark"] .section--surface,
[data-theme="dark"] .svc-hero,
[data-theme="dark"] .ind-hero-passe,
[data-theme="dark"] .hero-passe {
    background: var(--color-bg);
}

/* Overlay-Gradients anpassen */
[data-theme="dark"] .page-gradient-bg::before,
[data-theme="dark"] .work-hero::before,
[data-theme="dark"] .hero-branded::before {
    background: linear-gradient(135deg, rgba(10,10,9,0.95) 0%, rgba(20,10,15,0.85) 100%) !important;
}

/* Mega Dropdown */
[data-theme="dark"] .mega-dropdown {
    background: #0f0f0e !important;
    border-color: #1e1e1d !important;
}

/* Filter Suchfeld */
[data-theme="dark"] .filter-search-input {
    background: #111110 !important;
    color: #efefed !important;
}
[data-theme="dark"] .filter-search-input::placeholder {
    color: #555 !important;
}

/* Slider-Dots */
[data-theme="dark"] .slider-dot {
    background: rgba(255,255,255,0.2) !important;
}
[data-theme="dark"] .slider-dot.active {
    background: var(--color-accent) !important;
}

/* Kontakt Submit Button */
[data-theme="dark"] .kontakt-submit:hover {
    background: var(--color-surface);
    color: var(--color-text);
}

/* Weiße Text-Boxen / Quoten */
[data-theme="dark"] blockquote,
[data-theme="dark"] .cs-quote {
    background: rgba(232,160,192,0.04) !important;
    border-left-color: rgba(232,160,192,0.35) !important;
}

/* Nav scrolled */
[data-theme="dark"] .site-nav {
    background: transparent;
}
[data-theme="dark"] .site-nav.scrolled {
    background: rgba(10,10,9,0.95) !important;
}

/* ======================================
   Dark Mode – NUCLEAR: Alles dunkel
   ====================================== */

[data-theme="dark"] *:not(img):not(video):not(svg):not(path):not(circle):not(rect):not(line):not(polyline):not(polygon):not(g):not(.ind-slideshow-bg):not(.ind-slideshow-slide):not(.work-hero-bg):not(.hero-bg):not(.cs-hero-bg) {
    --color-white: #0a0a09;
    background-color: var(--computed-bg, inherit);
}

/* Alle explizit weißen/hellen Backgrounds überschreiben */
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background-color: white"],
[data-theme="dark"] [style*="background-color: #fff"] {
    background: var(--color-surface);
}

/* Alle section/div/article mit background white */
[data-theme="dark"] section,
[data-theme="dark"] article,
[data-theme="dark"] aside,
[data-theme="dark"] .module,
[data-theme="dark"] .modular-row,
[data-theme="dark"] .section,
[data-theme="dark"] .cs-section,
[data-theme="dark"] .content-section,
[data-theme="dark"] .page-section {
    background: var(--color-bg);
    color: var(--color-text);
}

/* Modular Rows explizit */
[data-theme="dark"] .image-text-module,
[data-theme="dark"] .image-collage-module,
[data-theme="dark"] .text-module,
[data-theme="dark"] .cta-module,
[data-theme="dark"] .stats-module,
[data-theme="dark"] .testimonial-module,
[data-theme="dark"] .team-module,
[data-theme="dark"] .pricing-module,
[data-theme="dark"] .faq-module,
[data-theme="dark"] .logo-module {
    background: var(--color-bg);
}

/* Weiße Karten / Boxen */
[data-theme="dark"] .card,
[data-theme="dark"] [class*="-card"],
[data-theme="dark"] [class*="-box"],
[data-theme="dark"] [class*="-panel"],
[data-theme="dark"] [class*="-item"]:not(.nav-item):not(.mega-item) {
    background: var(--color-surface);
    border-color: var(--color-border);
}

/* Text überall sichtbar */
[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] span:not(.icon-sun):not(.icon-moon),
[data-theme="dark"] label,
[data-theme="dark"] td,
[data-theme="dark"] th {
    color: var(--color-text);
}

[data-theme="dark"] a:not(.btn):not(.nav-cta):not(.nav-contact) {
    color: var(--color-text);
}

/* ── Nav Dropdown: JS-gesteuert (class .is-open statt :hover) ── */
/* Duplikat entfernt – is-open Regeln stehen oben */
.nav-dropdown-wrap.is-open > a::after {
    transform: rotate(-135deg) translateY(-1px);
    opacity: 1;
}



/* ── CTA: Ähnliche Ergebnisse (Case Study) ── */
.cs-cta-section--results {
    background: var(--color-surface, #f8f8f6);
    border-top: 1px solid var(--color-border, rgba(0,0,0,0.08));
    padding: 80px 0 0;
}

.cs-cta-section--results .cs-cta-grid {
    max-width: 680px;
}

.cs-cta-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent, #e63e2a);
    margin-bottom: 12px;
}

.cs-cta-section--results h2 {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
    line-height: 1.15;
}

.cs-cta-section--results p {
    font-size: 1.0625rem;
    color: var(--color-gray, #666);
    line-height: 1.7;
    margin-bottom: 0;
    max-width: 520px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2026 POLISH — Apple-inspired micro-refinements
   Zart, subtil, modern — behält die rosa Basis, fügt Tiefe + Eleganz hinzu
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Buttons: Glassmorphism-inspired, layered shadows ────────────────────── */
.btn {
    position: relative;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(52, 10, 34, 0.12);
    color: var(--color-dark);
    box-shadow:
        0 1px 2px rgba(52,10,34,0.04),
        0 4px 12px rgba(52,10,34,0.06),
        inset 0 1px 0 rgba(255,255,255,0.8);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    letter-spacing: -0.01em;
}

.btn:hover {
    background: var(--color-dark);
    color: #fff;
    border-color: var(--color-dark);
    box-shadow:
        0 4px 20px rgba(52,10,34,0.18),
        0 1px 4px rgba(52,10,34,0.1);
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(52,10,34,0.1);
}

/* ── Primary Button: gradient fill ──────────────────────────────────────── */
.btn-primary {
    background: linear-gradient(135deg, #340A22 0%, #5a1037 100%);
    color: #fff;
    border-color: transparent;
    box-shadow:
        0 2px 8px rgba(52,10,34,0.25),
        0 1px 2px rgba(52,10,34,0.15),
        inset 0 1px 0 rgba(255,255,255,0.12);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #4a0f2f 0%, #6d1242 100%);
    border-color: transparent;
    box-shadow:
        0 6px 24px rgba(52,10,34,0.3),
        0 2px 8px rgba(52,10,34,0.2),
        inset 0 1px 0 rgba(255,255,255,0.15);
    transform: translateY(-1px);
    color: #fff;
}

/* ── Nav CTA Button: clean glass pill ────────────────────────────────────── */
.nav-cta {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
    transition: all 0.2s ease;
    letter-spacing: -0.01em;
}

.nav-cta:hover {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.4);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.25),
        0 4px 12px rgba(0,0,0,0.12);
    color: #fff;
    transform: none;
}

/* ── Work / Case Cards: Apple-like elevation ─────────────────────────────── */
.work-card,
.insight-card,
.service-card {
    border-radius: 16px;
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.2, 0.64, 1);
    box-shadow:
        0 1px 2px rgba(52,10,34,0.04),
        0 4px 16px rgba(52,10,34,0.05);
}

.work-card:hover,
.insight-card:hover {
    box-shadow:
        0 4px 8px rgba(52,10,34,0.06),
        0 16px 48px rgba(52,10,34,0.1);
    transform: translateY(-3px);
}

/* ── Mega Dropdown: Apple-style frosted glass ────────────────────────────── */
.mega-dropdown {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(52,10,34,0.07);
    box-shadow:
        0 8px 32px rgba(52,10,34,0.08),
        0 2px 8px rgba(52,10,34,0.04),
        inset 0 1px 0 rgba(255,255,255,0.7);
}

/* ── Section Backgrounds: subtle gradient wash ────────────────────────────── */
.section:nth-child(odd) {
    background: linear-gradient(180deg, var(--color-bg) 0%, #fff 100%);
}

/* ── Inputs: Apple-refined ───────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(52,10,34,0.12);
    border-radius: 100px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: inset 0 1px 3px rgba(52,10,34,0.04);
}

textarea {
    border-radius: 16px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
    outline: none;
    border-color: rgba(52,10,34,0.35);
    box-shadow:
        inset 0 1px 3px rgba(52,10,34,0.04),
        0 0 0 3px rgba(52,10,34,0.06);
}

/* ── Tags & Pills: Glassmorphism ─────────────────────────────────────────── */
.filter-tag,
.ind-pill,
.insight-tag {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ── Typography: tighter, more Apple-like ────────────────────────────────── */
h1 { letter-spacing: -0.03em; }
h2 { letter-spacing: -0.025em; }
h3 { letter-spacing: -0.02em; }
h4 { letter-spacing: -0.015em; }

/* ── Smooth anchor bar / sticky elements ─────────────────────────────────── */
.cs-anchor-bar {
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    background: rgba(253,248,247,0.85);
    border-bottom: 1px solid rgba(52,10,34,0.06);
}

/* ── Scrolled nav: deeper glass effect ───────────────────────────────────── */
.site-nav.scrolled {
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    background: rgba(253,248,247,0.88);
    border-bottom: 1px solid rgba(52,10,34,0.05);
    box-shadow:
        0 1px 0 rgba(52,10,34,0.04),
        0 4px 24px rgba(52,10,34,0.05);
}

/* ── Insight card image: softer radius ────────────────────────────────────── */
.insight-card-image {
    border-radius: 12px;
}

/* ── Work card passepartout: refined ─────────────────────────────────────── */
.work-card-passe {
    border-radius: 14px;
}

/* ── Newsletter & CTA sections: soft gradient ────────────────────────────── */
.newsletter-section,
.cta-discovery {
    background: linear-gradient(135deg, var(--color-surface) 0%, rgba(255,255,255,0.6) 100%);
    border: 1px solid rgba(52,10,34,0.05);
    border-radius: 20px;
}

/* ── Page-wide subtle gradient ───────────────────────────────────────────── */
body {
    background-image:
        radial-gradient(ellipse 80% 50% at 20% -10%, rgba(232,160,192,0.07) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 85% 100%, rgba(232,160,192,0.05) 0%, transparent 50%);
    background-attachment: fixed;
}

/* ── Hover link underline: modern ────────────────────────────────────────── */
.mega-link,
.mega-story-item,
.mega-item {
    position: relative;
}

/* ── Service card modern ─────────────────────────────────────────────────── */
.service-card {
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(52,10,34,0.06);
    box-shadow:
        0 1px 3px rgba(52,10,34,0.04),
        0 4px 16px rgba(52,10,34,0.05),
        inset 0 1px 0 rgba(255,255,255,0.8);
    transition: box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.2, 0.64, 1), background 0.3s ease;
}

.service-card:hover {
    background: rgba(255,255,255,0.85);
    box-shadow:
        0 4px 12px rgba(52,10,34,0.07),
        0 16px 40px rgba(52,10,34,0.09),
        inset 0 1px 0 rgba(255,255,255,0.9);
    transform: translateY(-2px);
}

/* ── Footer: subtle top gradient ────────────────────────────────────────── */
.site-footer {
    position: relative;
}

.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232,160,192,0.3) 30%, rgba(232,160,192,0.3) 70%, transparent);
}

/* ── Dark Mode override: keep glass working ──────────────────────────────── */
[data-theme="dark"] .btn {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
    color: var(--color-text);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 4px 16px rgba(0,0,0,0.2);
}

[data-theme="dark"] .btn:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.2);
    color: #fff;
}

[data-theme="dark"] .mega-dropdown {
    background: rgba(17,17,16,0.92);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-color: rgba(255,255,255,0.07);
    box-shadow:
        0 8px 32px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.04);
}

[data-theme="dark"] .service-card {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.06);
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

[data-theme="dark"] .service-card:hover {
    background: rgba(255,255,255,0.06);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

[data-theme="dark"] .site-nav.scrolled {
    background: rgba(10,10,9,0.88);
    border-bottom-color: rgba(255,255,255,0.04);
    box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}

[data-theme="dark"] .newsletter-section,
[data-theme="dark"] .cta-discovery {
    background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
    border-color: rgba(255,255,255,0.06);
}

/* ═══════════════════════════════════════════════════════════════════════════
   2026 POLISH — Round 2: Cards, Service Grid, Work Cards, Nav refinements
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Service Cards: echtes Glassmorphism ──────────────────────────────────── */
.service-card {
    background: rgba(255,255,255,0.65) !important;
    backdrop-filter: blur(12px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
    border: 1px solid rgba(52,10,34,0.07) !important;
    border-radius: 18px !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.8) inset,
        0 2px 8px rgba(52,10,34,0.04),
        0 8px 32px rgba(52,10,34,0.06) !important;
    transition: box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.34,1.2,0.64,1), background 0.3s ease !important;
}

.service-card:hover {
    background: rgba(255,255,255,0.85) !important;
    border-color: rgba(52,10,34,0.12) !important;
    transform: translateY(-3px) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.9) inset,
        0 8px 24px rgba(52,10,34,0.08),
        0 24px 56px rgba(52,10,34,0.1) !important;
}

/* ── Work Cards: subtle lift ──────────────────────────────────────────────── */
.work-card {
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(52,10,34,0.05);
    transition: box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.34,1.1,0.64,1);
}

.work-card:hover {
    box-shadow: 0 8px 40px rgba(52,10,34,0.12), 0 2px 8px rgba(52,10,34,0.06);
    transform: translateY(-2px);
}

/* ── Nav CTA: polished glass pill ─────────────────────────────────────────── */
.nav-cta {
    background: rgba(255,255,255,0.12) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255,255,255,0.28) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.2),
        0 2px 8px rgba(0,0,0,0.1) !important;
    letter-spacing: -0.01em;
    font-size: 0.75rem !important;
    transition: all 0.2s ease !important;
}

.nav-cta:hover {
    background: rgba(255,255,255,0.22) !important;
    border-color: rgba(255,255,255,0.45) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.3),
        0 4px 16px rgba(0,0,0,0.15) !important;
    transform: none !important;
}

/* ── Scrolled Nav: weißes Logo + dunkler Text ─────────────────────────────── */
.site-nav.scrolled .nav-cta {
    background: rgba(52,10,34,0.07) !important;
    border-color: rgba(52,10,34,0.14) !important;
    color: var(--color-dark) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6) !important;
}

.site-nav.scrolled .nav-cta:hover {
    background: var(--color-dark) !important;
    border-color: var(--color-dark) !important;
    color: #fff !important;
}

/* ── Section Labels: refined ─────────────────────────────────────────────── */
.section-label {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-dark);
    background: rgba(52,10,34,0.06);
    border: 1px solid rgba(52,10,34,0.09);
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 16px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ── Clients Marquee Section ─────────────────────────────────────────────── */
.clients-section {
    background: linear-gradient(180deg, var(--color-dark) 0%, #4a0f2f 100%);
    position: relative;
    overflow: hidden;
}

/* ── Work-Card passepartout: softer ──────────────────────────────────────── */
.work-card-visual {
    background: linear-gradient(135deg,
        rgba(253,248,247,0.5) 0%,
        rgba(232,160,192,0.08) 50%,
        rgba(218,49,55,0.05) 100%) !important;
}

/* ── Insight Cards: glass frame ──────────────────────────────────────────── */
.insight-card-image {
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(52,10,34,0.06);
}

/* ── Hero gradient ambient ───────────────────────────────────────────────── */
.hero-section,
section.hero {
    position: relative;
}

/* ── Footer gradient line: rosa shimmer ──────────────────────────────────── */
.site-footer {
    background: linear-gradient(180deg, #1a0512 0%, #0f030b 100%);
}

/* ── Refined Scrollbar ───────────────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: var(--color-bg);
}
::-webkit-scrollbar-thumb {
    background: rgba(52,10,34,0.2);
    border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(52,10,34,0.35);
}

/* ── Selection color: branded ────────────────────────────────────────────── */
::selection {
    background: rgba(52,10,34,0.12);
    color: var(--color-dark);
}

/* ── Dark Mode Card overrides ────────────────────────────────────────────── */
[data-theme="dark"] .service-card {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.07) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.2) !important;
}

[data-theme="dark"] .service-card:hover {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.12) !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.3) !important;
}

[data-theme="dark"] .work-card {
    box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}

[data-theme="dark"] .section-label {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--color-bg);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.22);
}
[data-theme="dark"] ::selection {
    background: rgba(232,160,192,0.2);
    color: #efefed;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2026 POLISH — Round 3: Scroll Entrance Animations + Section Depth
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Scroll-Entrance: Fade + Lift ────────────────────────────────────────── */
.will-animate {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.will-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger für Card-Grids */
.service-card.will-animate:nth-child(2) { transition-delay: 0.08s; }
.service-card.will-animate:nth-child(3) { transition-delay: 0.16s; }
.service-card.will-animate:nth-child(4) { transition-delay: 0.24s; }
.service-card.will-animate:nth-child(5) { transition-delay: 0.32s; }
.service-card.will-animate:nth-child(6) { transition-delay: 0.40s; }

.work-card.will-animate:nth-child(2) { transition-delay: 0.1s; }
.work-card.will-animate:nth-child(3) { transition-delay: 0.2s; }
.work-card.will-animate:nth-child(4) { transition-delay: 0.3s; }

.insight-card.will-animate:nth-child(2) { transition-delay: 0.1s; }
.insight-card.will-animate:nth-child(3) { transition-delay: 0.2s; }

/* ── Section-Label: pill with entrance ───────────────────────────────────── */
.section-label.will-animate {
    transform: translateY(10px);
    transition-delay: 0s;
}

/* ── Dark Break Section (Clients): enhanced ──────────────────────────────── */
.clients-section {
    background: linear-gradient(135deg, #340A22 0%, #1a0512 50%, #0f030b 100%) !important;
    padding: 80px 0 !important;
}

/* ── Work-Hero: subtle ambient gradient ──────────────────────────────────── */
.work-hero {
    background: linear-gradient(180deg, var(--color-bg) 0%, rgba(245,239,237,0.6) 100%) !important;
}

/* ── Insight Hero: subtle gradient ───────────────────────────────────────── */
.insight-hero {
    background: linear-gradient(180deg, var(--color-bg) 60%, rgba(245,239,237,0.4) 100%) !important;
}

/* ── Service Card: visible baseline shadow (no backdrop-filter fallback) ─── */
@supports not (backdrop-filter: blur(1px)) {
    .service-card {
        background: rgba(249,248,242,0.95) !important;
        box-shadow:
            0 2px 8px rgba(52,10,34,0.06),
            0 8px 32px rgba(52,10,34,0.08) !important;
    }
}

/* ── Smooth focus-visible ring ───────────────────────────────────────────── */
:focus-visible {
    outline: 2px solid rgba(52,10,34,0.4);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ── Inter font-feature improvements ────────────────────────────────────── */
body, p, li, td {
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Reduce motion for accessibility ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .will-animate {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2026 POLISH — Round 4: Hero CTA Row + Wording Upgrades
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero CTA Row ────────────────────────────────────────────────────────── */
.hero-cta-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    padding-bottom: 40px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
}

.hero-cta-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.btn-hero-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    padding: 14px 28px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(255,255,255,0.9);
    color: var(--color-dark);
    text-decoration: none;
    box-shadow:
        0 2px 8px rgba(0,0,0,0.15),
        0 8px 24px rgba(0,0,0,0.12);
    transition: all 0.25s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.btn-hero-primary:hover {
    background: rgba(255,255,255,0.92);
    box-shadow:
        0 4px 16px rgba(0,0,0,0.2),
        0 16px 40px rgba(0,0,0,0.15);
    transform: translateY(-2px);
    color: var(--color-dark);
}

.btn-hero-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    padding: 14px 24px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-hero-ghost:hover {
    border-color: rgba(255,255,255,0.4);
    color: rgba(255,255,255,0.95);
    background: rgba(255,255,255,0.06);
}

/* ── Service Link: upgraded ──────────────────────────────────────────────── */
.service-link {
    color: var(--color-dark);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    opacity: 0.7;
    transition: opacity 0.2s ease, gap 0.2s ease;
}

.service-card:hover .service-link {
    opacity: 1;
    gap: 10px;
}

/* ── Disziplinen Hero: refined ───────────────────────────────────────────── */
.services-hero {
    background: var(--color-bg);
    padding: 160px 0 64px;
    border-bottom: 1px solid var(--color-border);
}

.services-intro {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 1.7;
    color: var(--color-text-secondary);
    max-width: 540px;
    letter-spacing: -0.01em;
}

/* ── Hero branded subtext: lighter weight ────────────────────────────────── */
.hero-subtext-branded {
    font-size: clamp(0.9rem, 1.3vw, 1.1rem);
    color: rgba(255,255,255,0.65);
    letter-spacing: -0.01em;
    line-height: 1.6;
    max-width: 480px;
    text-align: center;
}

/* ── Success Stories: section headline improved ──────────────────────────── */
.cs-related-header h2 {
    letter-spacing: -0.025em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FREE ROUND — Proof Bar, Bento Grid, Editorial System
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Proof Bar: credibility immediately below hero ───────────────────────── */
.proof-bar {
    background: var(--color-dark);
    padding: 0;
    overflow: hidden;
}

.proof-bar__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.proof-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 48px;
    gap: 4px;
}

.proof-num {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.proof-label {
    font-size: 0.6875rem;
    font-weight: 400;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.proof-sep {
    color: rgba(255,255,255,0.15);
    font-size: 1.5rem;
    user-select: none;
    padding: 0 4px;
}

/* ── Bento Grid für Disziplinen ──────────────────────────────────────────── */
.services-bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
    gap: 2px;
    background: var(--color-border);
    border: 2px solid var(--color-border);
    border-radius: 20px;
    overflow: hidden;
}

.service-card {
    background: var(--color-bg) !important;
    border-radius: 0 !important;
    border: none !important;
    padding: 0 !important;
    position: relative;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: background 0.2s ease;
}

.service-card:hover {
    background: var(--color-surface) !important;
    transform: none !important;
    box-shadow: none !important;
}

.service-card--hero {
    grid-column: span 2;
    grid-row: span 2;
}

.service-card--wide {
    grid-column: span 1;
}

.service-card__inner {
    padding: 40px 40px 36px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 220px;
}

.service-card--hero .service-card__inner {
    min-height: 380px;
    padding: 52px 52px 44px;
}

.service-card__num {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    margin-bottom: auto;
}

.service-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 12px;
    padding: 24px 0 20px;
}

.service-card h2 {
    font-size: clamp(1.1rem, 1.8vw, 1.5rem) !important;
    font-weight: 500 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
    color: var(--color-dark) !important;
    margin: 0 !important;
}

.service-card--hero h2 {
    font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
}

.service-card p {
    font-size: 0.875rem !important;
    color: var(--color-text-secondary) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.service-card--hero p {
    -webkit-line-clamp: 4;
    font-size: 0.9375rem !important;
}

.service-link {
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: var(--color-text-secondary) !important;
    letter-spacing: -0.01em;
    opacity: 0.6;
    transition: opacity 0.2s ease, gap 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.service-card:hover .service-link {
    opacity: 1;
    gap: 8px;
    color: var(--color-dark) !important;
}

/* ── Services Hero: stripped ─────────────────────────────────────────────── */
.services-hero {
    background: var(--color-bg);
    padding: 160px 0 48px;
    border-bottom: none;
}

.services-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: end;
}

.services-hero-grid h1 {
    font-size: clamp(2.5rem, 5vw, 4rem) !important;
    letter-spacing: -0.035em !important;
    line-height: 1.05 !important;
}

/* ── Hero: single CTA ────────────────────────────────────────────────────── */
.hero-cta-row {
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* ── Section headlines: more editorial weight ────────────────────────────── */
.section-headline,
.cs-related-header h2,
.insights-headline {
    font-size: clamp(1.75rem, 3.5vw, 3rem) !important;
    letter-spacing: -0.03em !important;
    font-weight: 500 !important;
    line-height: 1.1 !important;
}

/* ── Work cards: more editorial overlay ──────────────────────────────────── */
.work-card-overlay {
    background: linear-gradient(
        to top,
        rgba(10,5,8,0.88) 0%,
        rgba(10,5,8,0.4) 50%,
        transparent 100%
    );
}

.work-card-title {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    font-weight: 500;
    letter-spacing: -0.02em;
}

/* ── Solved section: editorial two-col ───────────────────────────────────── */
.solved-text h2 {
    font-size: clamp(1.8rem, 3.5vw, 3rem) !important;
    letter-spacing: -0.03em !important;
    line-height: 1.08 !important;
    font-weight: 500 !important;
}

.solved-text p {
    font-size: 1.0625rem !important;
    line-height: 1.75 !important;
    color: var(--color-text-secondary) !important;
}

/* ── Insights section headline ───────────────────────────────────────────── */
.insights-headline {
    margin-bottom: 40px !important;
}

/* ── Dark Mode: Proof Bar ────────────────────────────────────────────────── */
[data-theme="dark"] .proof-bar {
    background: #050504;
    border-top: 1px solid rgba(255,255,255,0.04);
}

[data-theme="dark"] .services-bento {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.04);
}

[data-theme="dark"] .service-card {
    background: var(--color-bg) !important;
}

[data-theme="dark"] .service-card:hover {
    background: rgba(255,255,255,0.04) !important;
}

[data-theme="dark"] .service-card h2 {
    color: var(--color-text) !important;
}

/* ── Responsive: Bento ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .services-bento {
        grid-template-columns: 1fr 1fr;
    }
    .service-card--hero {
        grid-column: span 2;
        grid-row: span 1;
    }
    .proof-item {
        padding: 20px 24px;
    }
}

@media (max-width: 600px) {
    .services-bento {
        grid-template-columns: 1fr;
        border-radius: 12px;
    }
    .service-card--hero,
    .service-card--wide {
        grid-column: span 1;
    }
    .proof-bar__inner {
        flex-wrap: wrap;
    }
    .proof-sep {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FREE ROUND 2 — Category Colors on Bento, Editorial Details
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Bento Cards: Left accent stripe by category ─────────────────────────── */
.service-card::after {
    content: '';
    position: absolute;
    top: 32px;
    left: 0;
    width: 3px;
    height: 32px;
    border-radius: 0 2px 2px 0;
    background: var(--color-dark);
    opacity: 0;
    transition: opacity 0.2s ease, height 0.2s ease;
}

.service-card:hover::after {
    opacity: 0.6;
    height: 48px;
}

/* Strategy cards: Bordeaux */
.service-card:nth-child(1)::after,
.service-card:nth-child(2)::after { background: #340A22; }

/* Design cards: Akzent pink */
.service-card:nth-child(3)::after,
.service-card:nth-child(6)::after,
.service-card:nth-child(8)::after,
.service-card:nth-child(9)::after { background: #C24774; }

/* Build/Tech cards: Navy */
.service-card:nth-child(4)::after,
.service-card:nth-child(5)::after { background: #041C2D; }

/* AI card: Accent */
.service-card:nth-child(7)::after { background: var(--color-accent); }

/* ── Solved Section: bigger, bolder ─────────────────────────────────────── */
.solved-section {
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

/* ── Work Section: contrast background ──────────────────────────────────── */
.work-section {
    background: var(--color-surface);
}

/* ── Insights Section: clean background ──────────────────────────────────── */
.insights-section {
    background: var(--color-bg);
}

/* ── Hero branded text: CMS-driven now, no change needed ────────────────── */

/* ── Footer: stronger editorial ─────────────────────────────────────────── */
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 24px;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.3);
    letter-spacing: 0.02em;
}

/* ── Fix: video widget stays floating (Alexander's choice) ───────────────── */
.ai-advisor-widget {
    /* Keep floating position — it's a deliberate UX element */
}

/* ── Newsletter Section: editorial ──────────────────────────────────────── */
.newsletter-section,
.cta-discovery {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid var(--color-border) !important;
    border-bottom: 1px solid var(--color-border) !important;
}

/* ── Global: page sections have clear alternation ────────────────────────── */
.section:nth-child(even) {
    background: var(--color-surface);
}

/* ── Clients Headline: more editorial ────────────────────────────────────── */
.clients-section .section-headline {
    color: rgba(255,255,255,0.9) !important;
    letter-spacing: -0.03em !important;
}

/* ── Proof Bar: ensure visibility ────────────────────────────────────────── */
.proof-bar {
    position: relative;
    z-index: 10;
}

/* ── Hero subtext: dunkel (kein Video-BG mehr) ───────────────────────────── */
.hero-subtext-branded {
    color: var(--color-text-secondary) !important;
}

/* ── Card Hover: kein dicker Outline – nur zarter rosa Shadow ────────────── */
.work-card:hover,
.insight-card:hover,
.service-card:hover {
    outline: none !important;
    border-color: transparent !important;
    box-shadow:
        0 4px 20px rgba(232, 160, 192, 0.15),
        0 1px 4px rgba(52, 10, 34, 0.04) !important;
    transform: translateY(-2px) !important;
}

.service-card:hover {
    background: rgba(255,255,255,0.9) !important;
    border-color: transparent !important;
}

/* ── Insight Cards: clean, kein Text-Kleben, normaler Hover ─────────────── */
.insight-card {
    background: #fff;
    border-radius: 12px !important;
    overflow: hidden;
    border: 1px solid rgba(52,10,34,0.06) !important;
    box-shadow: none !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease !important;
    display: flex;
    flex-direction: column;
}

.insight-card:hover {
    box-shadow: 0 4px 24px rgba(52,10,34,0.08) !important;
    transform: translateY(-2px) !important;
    border-color: rgba(52,10,34,0.08) !important;
    outline: none !important;
}

.insight-card-content {
    padding: 20px 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.insight-card-image {
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
}

/* ── Insights Toolbar: Search + Filter ──────────────────────────────────── */
.insights-toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.insights-search {
    width: 100%;
    max-width: 480px;
    padding: 10px 18px;
    font-size: 0.9rem;
    font-family: var(--font-family);
    color: var(--color-text);
    background: rgba(255,255,255,0.8);
    border: 1px solid rgba(52,10,34,0.12);
    border-radius: 999px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.insights-search:focus {
    border-color: rgba(52,10,34,0.3);
    box-shadow: 0 0 0 3px rgba(52,10,34,0.05);
}

.insights-search::placeholder {
    color: var(--color-text-secondary);
    opacity: 0.6;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INSIGHTS — Apple 2026 UI Polish
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Filter Pills: Apple SF-style segmented feel ─────────────────────────── */
.insights-filter {
    margin-bottom: 0 !important;
    gap: 6px !important;
}

.insights-filter-pill {
    padding: 6px 16px !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    border: 1px solid rgba(52,10,34,0.1) !important;
    background: rgba(255,255,255,0.6) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    color: var(--color-text-secondary) !important;
    transition: all 0.18s ease !important;
    border-radius: 999px !important;
}

.insights-filter-pill:hover {
    background: rgba(255,255,255,0.9) !important;
    border-color: rgba(52,10,34,0.2) !important;
    color: var(--color-dark) !important;
}

.insights-filter-pill.active {
    background: var(--color-dark) !important;
    border-color: var(--color-dark) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(52,10,34,0.2) !important;
}

/* ── Insight Cards: Apple-style editorial cards ──────────────────────────── */
.insight-card {
    background: #fff !important;
    border: 1px solid rgba(52,10,34,0.06) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow:
        0 1px 2px rgba(52,10,34,0.04),
        0 4px 16px rgba(52,10,34,0.04) !important;
    transition: box-shadow 0.25s ease, transform 0.25s cubic-bezier(0.34,1.1,0.64,1) !important;
}

.insight-card:hover {
    box-shadow:
        0 4px 12px rgba(52,10,34,0.07),
        0 16px 40px rgba(52,10,34,0.08) !important;
    transform: translateY(-3px) !important;
    border-color: rgba(52,10,34,0.08) !important;
    outline: none !important;
}

/* ── Insights Grid: 3-col, balanced ──────────────────────────────────────── */
.insights-grid {
    gap: 20px !important;
}

/* ── Card content: breathing room ───────────────────────────────────────── */
.insight-card-content {
    padding: 18px 20px 22px !important;
    gap: 6px !important;
}

.insight-card-content h3 {
    font-size: 1.1rem !important;
    letter-spacing: -0.02em !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
    color: var(--color-text) !important;
}

.insight-card-content p {
    font-size: 0.875rem !important;
    color: var(--color-text-secondary) !important;
    line-height: 1.55 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Insights Section label ──────────────────────────────────────────────── */
.insights-section > .container > .section-label,
section > .container > .section-label {
    display: inline-block;
    margin-bottom: 12px;
}

/* ── Insight Hero: section hero neutral ──────────────────────────────────── */
.hero-light .hero-content h1 {
    font-size: clamp(2.5rem, 5vw, 4rem) !important;
    letter-spacing: -0.035em !important;
    font-weight: 500 !important;
}

/* ── Dark mode adjustments ───────────────────────────────────────────────── */
[data-theme="dark"] .insights-filter-pill {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.5) !important;
}

[data-theme="dark"] .insights-filter-pill:hover {
    background: rgba(255,255,255,0.1) !important;
    color: rgba(255,255,255,0.85) !important;
}

[data-theme="dark"] .insights-filter-pill.active {
    background: rgba(255,255,255,0.12) !important;
    border-color: rgba(255,255,255,0.2) !important;
    color: #fff !important;
}

[data-theme="dark"] .insight-card {
    background: var(--color-card-bg) !important;
    border-color: rgba(255,255,255,0.06) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INSIGHT HERO — 50/50 Split mit Passepartout-Outline
   ═══════════════════════════════════════════════════════════════════════════ */

.insight-hero-split {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 80vh;
    padding-top: var(--nav-height);
    background: var(--color-bg);
    overflow: hidden;
}

/* Passepartout Outline – gleiche Logik wie CS-Hero */
.insight-hero-split__passe-outline {
    position: absolute;
    inset: 16px;
    border: 1px solid rgba(52,10,34,0.12);
    border-radius: 8px;
    pointer-events: none;
    z-index: 2;
}

/* ── Left: Text ──────────────────────────────────────────────────────────── */
.insight-hero-split__left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 52px 48px 52px 52px;
    gap: 32px;
    position: relative;
    z-index: 1;
}

.insight-hero-split__top {
    display: flex;
    align-items: flex-start;
}

.insight-hero-split__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

.insight-hero-split__content h1 {
    font-size: clamp(1.75rem, 3.5vw, 3rem);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--color-text);
}

.insight-hero-split__content .insight-lead {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--color-text-secondary);
    margin: 0;
    max-width: 100%;
}

/* ── Right: Image ────────────────────────────────────────────────────────── */
.insight-hero-split__right {
    position: relative;
    overflow: hidden;
}

.insight-hero-split__img-frame {
    position: absolute;
    inset: 16px 16px 16px 0;
    border-radius: 6px;
    overflow: hidden;
}

.insight-hero-split__img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.insight-hero-split__img-placeholder {
    position: absolute;
    inset: 16px 16px 16px 0;
    border-radius: 6px;
    background: var(--color-surface);
}

/* ── Meta row ────────────────────────────────────────────────────────────── */
.insight-hero-split__left .insight-hero-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

/* ── Tags in split hero ──────────────────────────────────────────────────── */
.insight-hero-split .insight-tag {
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
    background: transparent;
    border: 1px solid rgba(52,10,34,0.15);
    padding: 4px 12px;
    border-radius: 999px;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .insight-hero-split {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .insight-hero-split__right {
        height: 280px;
    }
    .insight-hero-split__img-frame {
        inset: 0 16px 16px 16px;
    }
    .insight-hero-split__left {
        padding: 40px 24px 32px;
    }
    .insight-hero-split__passe-outline {
        inset: 8px;
    }
}

/* ── Dark Mode ───────────────────────────────────────────────────────────── */
[data-theme="dark"] .insight-hero-split {
    background: var(--color-bg);
}

[data-theme="dark"] .insight-hero-split__passe-outline {
    border-color: rgba(255,255,255,0.08);
}

[data-theme="dark"] .insight-hero-split .insight-tag {
    border-color: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.5);
}

/* ── Insights Overview Hero: kompakt ────────────────────────────────────── */
.insights.hero-short,
section.hero.hero-short.hero-light {
    min-height: 0 !important;
    padding: calc(var(--nav-height) + 32px) 0 32px !important;
}

section.hero-short.hero-light {
    min-height: 0 !important;
    padding: calc(var(--nav-height) + 32px) 0 32px !important;
}

.hero.hero-short.hero-light {
    min-height: 0 !important;
    padding: calc(var(--nav-height) + 24px) 0 28px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INSIGHTS 2026 — Featured-First Layout, Glass Segmented Control
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Header Section ──────────────────────────────────────────────────────── */
.insights-header-section {
    background: var(--color-bg);
    padding: calc(var(--nav-height) + 32px) 0 0;
    border-bottom: 1px solid rgba(52,10,34,0.06);
}

.insights-header-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.insights-page-title {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 1;
    color: var(--color-text);
    margin: 0 0 8px;
}

.insights-page-sub {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    margin: 0;
    letter-spacing: -0.01em;
}

/* ── Segmented Control ───────────────────────────────────────────────────── */
.insights-segment {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: rgba(52,10,34,0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 999px;
    padding: 4px;
    margin-bottom: -1px;
    overflow-x: auto;
    scrollbar-width: none;
    max-width: 100%;
}

.insights-segment::-webkit-scrollbar { display: none; }

.insights-seg-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 18px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-family: var(--font-family);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.18s ease;
}

.insights-seg-btn:hover {
    color: var(--color-dark);
    background: rgba(255,255,255,0.5);
}

.insights-seg-btn.active {
    background: #fff;
    color: var(--color-dark);
    box-shadow: 0 1px 4px rgba(52,10,34,0.1), 0 0 0 0.5px rgba(52,10,34,0.06);
}

/* ── Search ──────────────────────────────────────────────────────────────── */
.insights-search {
    width: 220px;
    padding: 8px 16px;
    font-size: 0.875rem;
    font-family: var(--font-family);
    color: var(--color-text);
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(52,10,34,0.1);
    border-radius: 999px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, width 0.3s ease;
}

.insights-search:focus {
    width: 300px;
    border-color: rgba(52,10,34,0.25);
    box-shadow: 0 0 0 3px rgba(52,10,34,0.04);
}

.insights-search::placeholder { color: var(--color-text-secondary); opacity: 0.5; }

/* ── Content Section ─────────────────────────────────────────────────────── */
.insights-content-section {
    padding: 40px 0 80px;
    background: var(--color-bg);
}

/* ── Card List: Featured + Grid ──────────────────────────────────────────── */
.insights-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Featured: spans full width, horizontal layout */
.ins-card--featured {
    grid-column: 1 / -1;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    min-height: 360px;
}

.ins-card--featured .ins-card__img {
    border-radius: 12px 0 0 12px;
}

.ins-card--featured .ins-card__body {
    padding: 40px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
}

.ins-card--featured .ins-card__title {
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.ins-card--featured .ins-card__excerpt {
    -webkit-line-clamp: 4;
    font-size: 0.9375rem;
}

/* ── Base Card ───────────────────────────────────────────────────────────── */
.ins-card {
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    border: 1px solid rgba(52,10,34,0.06);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 3px rgba(52,10,34,0.04), 0 4px 16px rgba(52,10,34,0.04);
    transition: box-shadow 0.25s ease, transform 0.25s cubic-bezier(0.34,1.1,0.64,1);
}

.ins-card:hover {
    box-shadow: 0 6px 20px rgba(52,10,34,0.08), 0 20px 48px rgba(52,10,34,0.07);
    transform: translateY(-3px);
}

.ins-card__img {
    aspect-ratio: 16/9;
    overflow: hidden;
    flex-shrink: 0;
}

.ins-card--featured .ins-card__img {
    aspect-ratio: unset;
    height: 100%;
}

.ins-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}

.ins-card:hover .ins-card__img img {
    transform: scale(1.03);
}

.ins-card__body {
    padding: 22px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.ins-card__tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.ins-card__tags span {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    opacity: 0.7;
}

.ins-card__title {
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--color-text);
    margin: 0;
}

.ins-card__excerpt {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ins-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-dark);
    letter-spacing: -0.01em;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    margin-top: auto;
}

.ins-card:hover .ins-card__cta {
    opacity: 1;
    transform: translateX(0);
}

/* ── Mittelstand Card — gleiche Card-Optik, dunkelblaues Bild-Toning ─────── */
.ins-card--mittelstand .ins-card__img img {
    filter: hue-rotate(200deg) saturate(0.85) brightness(0.72);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .insights-list { grid-template-columns: 1fr; }
    .ins-card--featured { grid-template-columns: 1fr; min-height: auto; }
    .ins-card--featured .ins-card__img { height: 240px; border-radius: 14px 14px 0 0; }
    .ins-card--featured .ins-card__body { padding: 24px; }
    .insights-header-row { flex-direction: column; align-items: flex-start; }
    .insights-search { width: 100%; }
    .insights-search:focus { width: 100%; }
}

/* ── Dark Mode ───────────────────────────────────────────────────────────── */
[data-theme="dark"] .insights-header-section { background: var(--color-bg); }
[data-theme="dark"] .insights-content-section { background: var(--color-bg); }
[data-theme="dark"] .insights-segment { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .insights-seg-btn.active { background: rgba(255,255,255,0.12); box-shadow: none; }
[data-theme="dark"] .ins-card { background: var(--color-card-bg); border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .insights-search { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); color: var(--color-text); }

/* ═══════════════════════════════════════════════════════════════════════════
   INSIGHT DETAIL — Contained Hero + Apple Glass 2026
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero: Container-breit, nicht edge-to-edge ───────────────────────────── */
.insight-hero-split {
    display: block !important;
    min-height: 0 !important;
    padding: calc(var(--nav-height) + 40px) 0 0 !important;
    background: var(--color-bg) !important;
    overflow: visible !important;
}

.insight-hero-split__passe-outline {
    display: none !important; /* Outline wird am inneren Frame gesetzt */
}

/* Inner container wrapper */
.insight-hero-split__inner-wrap {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid rgba(52,10,34,0.1);
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.8),
        0 4px 32px rgba(52,10,34,0.07);
    min-height: 460px;
}

/* ── Left: Text links im Container ──────────────────────────────────────── */
.insight-hero-split__left {
    padding: 44px 48px 44px 44px !important;
}

/* ── Right: Bild exakt rechts ────────────────────────────────────────────── */
.insight-hero-split__right {
    position: relative !important;
    overflow: hidden !important;
}

.insight-hero-split__img-frame {
    position: absolute !important;
    inset: 0 !important;
    border-radius: 0 !important;
}

.insight-hero-split__img-frame img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* ── Body: Glass treatment ───────────────────────────────────────────────── */
.insight-body {
    background: var(--color-bg);
    padding: 0 0 80px !important;
}

.insight-layout {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 48px 24px 0;
}

/* ── Sidebar: Glass TOC ──────────────────────────────────────────────────── */
.insight-sidebar-inner {
    background: rgba(255,255,255,0.55) !important;
    backdrop-filter: blur(16px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
    border: 1px solid rgba(52,10,34,0.07) !important;
    border-radius: 14px !important;
    padding: 24px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 2px 12px rgba(52,10,34,0.04) !important;
}

/* ── Content: clean reading ──────────────────────────────────────────────── */
.insight-content {
    max-width: 680px;
}

.insight-content h2 {
    font-size: clamp(1.3rem, 2.5vw, 1.75rem) !important;
    letter-spacing: -0.025em !important;
    font-weight: 500 !important;
    margin: 48px 0 16px !important;
    color: var(--color-text) !important;
}

.insight-content h3 {
    font-size: 1.125rem !important;
    letter-spacing: -0.02em !important;
    font-weight: 500 !important;
    margin: 32px 0 12px !important;
}

/* ── Blockquotes: glass card ────────────────────────────────────────────── */
.insight-content blockquote {
    background: rgba(52,10,34,0.03) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: none !important;
    border-left: 3px solid rgba(52,10,34,0.2) !important;
    border-radius: 0 10px 10px 0 !important;
    padding: 20px 24px !important;
    margin: 28px 0 !important;
    font-style: normal !important;
    font-family: var(--font-family) !important;
    color: var(--color-text) !important;
}

/* ── Related: glass strip ────────────────────────────────────────────────── */
.insight-related {
    background: rgba(255,255,255,0.5) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-top: 1px solid rgba(52,10,34,0.06) !important;
    padding: 60px 0 !important;
}

/* ── Dark mode ───────────────────────────────────────────────────────────── */
[data-theme="dark"] .insight-hero-split__inner-wrap {
    background: rgba(17,17,16,0.7) !important;
    border-color: rgba(255,255,255,0.08) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 4px 32px rgba(0,0,0,0.3) !important;
}

[data-theme="dark"] .insight-sidebar-inner {
    background: rgba(17,17,16,0.6) !important;
    border-color: rgba(255,255,255,0.07) !important;
}

[data-theme="dark"] .insight-related {
    background: rgba(17,17,16,0.4) !important;
    border-top-color: rgba(255,255,255,0.06) !important;
}

[data-theme="dark"] .insight-content blockquote {
    background: rgba(255,255,255,0.03) !important;
    border-left-color: rgba(255,255,255,0.15) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER REDESIGN — Editorial, Minimal, Honest
   ═══════════════════════════════════════════════════════════════════════════ */

.site-footer {
    background: #0f030b;
    color: rgba(255,255,255,0.55);
    font-size: 0.875rem;
}

/* ── Statement Block ─────────────────────────────────────────────────────── */
.footer-statement {
    padding: 80px 0 60px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.footer-statement .container {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.footer-claim {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: rgba(255,255,255,0.9);
    margin: 0;
}

.footer-claim em {
    font-style: italic;
    color: rgba(255,255,255,0.4);
}

.footer-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 999px;
    padding: 12px 24px;
    white-space: nowrap;
    transition: all 0.2s ease;
    letter-spacing: -0.01em;
}

.footer-cta:hover {
    color: #fff;
    border-color: rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.06);
}

/* ── Nav Grid ────────────────────────────────────────────────────────────── */
.footer-nav {
    padding: 48px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.footer-nav__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-col__title {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    margin-bottom: 4px;
}

.footer-col a {
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    font-size: 0.875rem;
    letter-spacing: -0.01em;
    transition: color 0.15s ease;
    line-height: 1;
}

.footer-col a:hover { color: rgba(255,255,255,0.9); }

/* ── Bottom Bar ──────────────────────────────────────────────────────────── */
.footer-bottom {
    padding: 20px 0;
    border-top: none !important;
}

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

.footer-copy {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.25);
    letter-spacing: -0.01em;
}

.footer-social {
    display: flex;
    gap: 16px;
    align-items: center;
}

.footer-social a {
    color: rgba(255,255,255,0.3);
    transition: color 0.15s ease;
    display: flex;
    align-items: center;
}

.footer-social a:hover { color: rgba(255,255,255,0.8); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .footer-nav__grid { grid-template-columns: 1fr 1fr; }
    .footer-statement .container { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 600px) {
    .footer-nav__grid { grid-template-columns: 1fr; }
    .footer-claim { font-size: 2rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROCESS SECTION — 3 Steps, Editorial
   ═══════════════════════════════════════════════════════════════════════════ */

.process-section {
    background: #f8f7f6;
    padding: 80px 0;
    color: var(--color-dark);
}

.process-header {
    margin-bottom: 56px;
}

.process-header .section-label {
    background: rgba(52,10,34,0.06) !important;
    border-color: rgba(52,10,34,0.12) !important;
    color: rgba(52,10,34,0.55) !important;
}

.process-header h2 {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 400;
    letter-spacing: -0.03em;
    color: var(--color-dark);
    margin: 12px 0 0;
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: rgba(52,10,34,0.08);
    border-radius: 16px;
    overflow: hidden;
}

.process-step {
    background: #ffffff;
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: background 0.2s ease;
}

.process-step:hover {
    background: #faf9f8;
}

.process-step__num {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: rgba(52,10,34,0.4);
    font-variant-numeric: tabular-nums;
}

.process-step h3 {
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--color-dark);
    line-height: 1.3;
    margin: 0;
}

.process-step p {
    font-size: 0.9rem;
    color: rgba(52,10,34,0.7);
    line-height: 1.7;
    margin: 0;
}

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

/* ── Solved Section refined ──────────────────────────────────────────────── */
.solved-section {
    padding: 80px 0;
}

/* ── Hero: Film + Texte exakt vertikal mittig (alle Auflösungen) ─────────── */
.hero-branded {
    position: relative !important;
    justify-content: center !important;
    padding-top: var(--nav-height) !important; /* Kompensiert fixe Nav */
    padding-bottom: 0 !important;
}

/* CTA absolut am Bottom – raus aus Flex-Flow, stört Zentrierung nicht */
.hero-branded .hero-cta-row {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 2;
}

/* ── Mega-intro: kleiner, secondary ──────────────────────────────────────── */
.mega-intro {
    font-size: 0.6875rem !important;
    color: var(--color-text-secondary) !important;
    opacity: 0.7 !important;
    font-weight: 400 !important;
    max-width: 400px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE NAVIGATION – Full-Screen Drawer
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hide nav-main + cta on mobile, show burger ── */
@media (max-width: 900px) {
    .nav-main { display: none !important; }
    .nav-cta  { display: none !important; }
    .nav-ai-btn { display: none !important; }
    .nav-burger { display: flex !important; }
}
@media (min-width: 901px) {
    .nav-burger { display: none; }
}

/* ── Burger open state (X) ── */
.nav-burger.is-open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.nav-burger.is-open span:nth-child(2) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ── Mobile Nav Drawer ── */
.mobile-nav-drawer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background: var(--color-bg, #faf9f7);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mobile-nav-drawer.is-open {
    transform: translateX(0);
}

/* ── Drawer Header ── */
.mobile-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 24px;
    border-bottom: 1px solid var(--color-nav-border, rgba(0,0,0,0.06));
    flex-shrink: 0;
}

.mobile-nav-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Drawer Body ── */
.mobile-nav-body {
    flex: 1;
    padding: 24px 0 40px;
    overflow-y: auto;
}

/* ── Top-level nav items ── */
.mobile-nav-item {
    border-bottom: 1px solid var(--color-nav-border, rgba(0,0,0,0.06));
}

.mobile-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    letter-spacing: -0.01em;
    transition: color 0.2s ease;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
}

.mobile-nav-link:hover,
.mobile-nav-link:active {
    color: var(--color-accent, #FF575A);
}

.mobile-nav-chevron {
    width: 20px;
    height: 20px;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    color: var(--color-text-secondary, rgba(0,0,0,0.4));
    flex-shrink: 0;
}

.mobile-nav-item.is-open .mobile-nav-chevron {
    transform: rotate(180deg);
}

/* ── Accordion Sub-menu ── */
.mobile-nav-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    background: rgba(0,0,0,0.02);
}

.mobile-nav-item.is-open .mobile-nav-submenu {
    max-height: 800px;
}

/* ── Sub-menu group (Disziplinen) ── */
.mobile-sub-group {
    padding: 16px 24px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

.mobile-sub-group:last-child {
    border-bottom: none;
}

.mobile-sub-group-title {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent, #FF575A);
    margin-bottom: 12px;
}

.mobile-sub-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mobile-sub-link {
    display: block;
    padding: 8px 0;
    font-size: 0.95rem;
    color: var(--color-text);
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.2s, color 0.2s;
}

.mobile-sub-link:hover {
    opacity: 1;
    color: var(--color-accent, #FF575A);
}

/* ── Simple sub-links (non-grouped) ── */
.mobile-sub-simple {
    padding: 8px 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mobile-sub-simple a {
    display: block;
    padding: 10px 0;
    font-size: 0.95rem;
    color: var(--color-text);
    text-decoration: none;
    opacity: 0.8;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    transition: opacity 0.2s, color 0.2s;
}

.mobile-sub-simple a:last-child {
    border-bottom: none;
}

.mobile-sub-simple a:hover {
    opacity: 1;
    color: var(--color-accent, #FF575A);
}

/* ── Drawer Footer CTA ── */
.mobile-nav-footer {
    padding: 24px;
    flex-shrink: 0;
    border-top: 1px solid var(--color-nav-border, rgba(0,0,0,0.06));
}

.mobile-nav-cta {
    display: block;
    width: 100%;
    text-align: center;
    padding: 16px 24px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    background: var(--color-text, #340A22);
    border: none;
    border-radius: 999px;
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: background 0.3s ease, opacity 0.3s ease;
}

.mobile-nav-cta:hover {
    opacity: 0.85;
}

/* ── Logo in drawer header – reuse existing logo style ── */
.mobile-nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text);
    text-decoration: none;
}

.mobile-nav-logo .brandmark {
    width: 28px;
    height: auto;
    fill: var(--color-text);
}

/* ── Dark mode ── */
[data-theme="dark"] .mobile-nav-drawer {
    background: var(--color-bg, #0e0b0d);
}
[data-theme="dark"] .mobile-nav-submenu {
    background: rgba(255,255,255,0.03);
}
[data-theme="dark"] .mobile-nav-cta {
    background: #fff;
    color: #340A22;
}

/* ── Prevent body scroll when drawer is open ── */
body.mobile-nav-open {
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INDEX VIEW – Editorial Project Table
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hide index row in grid/list, show only in index mode */
.work-card-index { display: none; }

.work-grid.work-index .work-card-visual,
.work-grid.work-index .work-card-list { display: none; }

.work-grid.work-index .work-card-index { display: flex; }

/* ── Index grid layout ── */
.work-grid.work-index {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.work-grid.work-index .work-card {
    display: block;
    border-bottom: 1px solid var(--color-nav-border, rgba(0,0,0,0.07));
    text-decoration: none;
    color: var(--color-text);
}

.work-grid.work-index .work-card:first-child {
    border-top: 1px solid var(--color-nav-border, rgba(0,0,0,0.07));
}

/* ── Row layout ── */
.work-card-index {
    align-items: center;
    padding: 18px 0;
    gap: 0;
    transition: background 0.15s ease;
}

.work-grid.work-index .work-card:hover .work-card-index {
    padding-left: 12px;
    padding-right: 12px;
    margin: 0 -12px;
    background: var(--color-surface, rgba(0,0,0,0.025));
}

.work-grid.work-index .work-card:hover .idx-title {
    color: var(--color-accent, #FF575A);
}

.work-grid.work-index .work-card:hover .idx-arrow {
    transform: translateX(4px);
}

/* ── Columns ── */
.idx-num {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--color-text-secondary, rgba(0,0,0,0.35));
    letter-spacing: 0.05em;
    width: 40px;
    flex-shrink: 0;
}

.idx-title {
    flex: 2;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    transition: color 0.2s ease;
}

.idx-client {
    flex: 1;
    font-size: 0.85rem;
    color: var(--color-text-secondary, rgba(0,0,0,0.5));
}

.idx-services {
    flex: 1.5;
    font-size: 0.75rem;
    color: var(--color-text-secondary, rgba(0,0,0,0.4));
    letter-spacing: 0.02em;
    text-align: right;
}

.idx-arrow {
    width: 28px;
    text-align: right;
    font-size: 0.95rem;
    flex-shrink: 0;
    transition: transform 0.2s ease;
    color: var(--color-text-secondary, rgba(0,0,0,0.4));
}

/* ── Dark mode ── */
[data-theme="dark"] .work-grid.work-index .work-card:hover .work-card-index {
    background: rgba(255,255,255,0.04);
}

/* ── Mobile ── */
@media (max-width: 768px) {
    .idx-client, .idx-services { display: none; }
    .idx-title { font-size: 0.95rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PANORAMA VIEW – Cinematic 2-Column Visual
   ═══════════════════════════════════════════════════════════════════════════ */

.work-grid.work-panorama {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3px;
    padding: 0;
}

/* Hide list + index elements in panorama */
.work-grid.work-panorama .work-card-list,
.work-grid.work-panorama .work-card-index { display: none; }

.work-grid.work-panorama .work-card {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--color-surface, #111);
}

.work-grid.work-panorama .work-card-visual {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.work-grid.work-panorama .work-card-visual-inner {
    width: 100%;
    height: 100%;
    position: relative;
}

.work-grid.work-panorama .work-card-visual img,
.work-grid.work-panorama .work-card-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.work-grid.work-panorama .work-card:hover .work-card-visual img,
.work-grid.work-panorama .work-card:hover .work-card-video {
    transform: scale(1.04);
}

/* Gradient overlay */
.work-grid.work-panorama .work-card-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.75) 0%,
        rgba(0,0,0,0.2) 50%,
        rgba(0,0,0,0) 100%
    );
    z-index: 1;
    transition: opacity 0.3s ease;
}

/* Content overlay */
.work-grid.work-panorama .work-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 28px 28px 24px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transform: translateY(6px);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.work-grid.work-panorama .work-card:hover .work-card-overlay {
    transform: translateY(0);
}

.work-grid.work-panorama .work-card-overlay h3 {
    font-size: 1.4rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0;
}

.work-grid.work-panorama .work-card-overlay p {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.65);
    margin: 0;
    display: none;
}

.work-grid.work-panorama .work-card:hover .work-card-overlay p {
    display: block;
}

.work-grid.work-panorama .work-tags-inline {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* First card spans full width = featured */
.work-grid.work-panorama .work-card:first-child {
    grid-column: 1 / -1;
    aspect-ratio: 21 / 9;
}

.work-grid.work-panorama .work-card:first-child .work-card-overlay h3 {
    font-size: 2.2rem;
}

/* Mobile */
@media (max-width: 768px) {
    .work-grid.work-panorama {
        grid-template-columns: 1fr;
        gap: 2px;
    }
    .work-grid.work-panorama .work-card:first-child {
        grid-column: 1;
        aspect-ratio: 16 / 10;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FEATURED REEL – Horizontal Scrolling Highlight Strip
   ═══════════════════════════════════════════════════════════════════════════ */

.reel-section {
    padding: 48px 0 0;
    overflow: hidden;
}

.reel-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.reel-label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent, #FF575A);
}

/* ── Track ── */
.reel-track-wrap {
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
    padding: 0 var(--container-padding, 5vw) 32px;
}

.reel-track-wrap::-webkit-scrollbar { display: none; }
.reel-track-wrap.is-dragging { cursor: grabbing; }

.reel-track {
    display: flex;
    gap: 16px;
    width: max-content;
}

/* ── Cards ── */
.reel-card {
    position: relative;
    display: block;
    width: 480px;
    flex-shrink: 0;
    border-radius: 0;
    overflow: hidden;
    text-decoration: none;
    aspect-ratio: 16 / 10;
    background: var(--color-surface);
}

.reel-card-media {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.reel-card-media img,
.reel-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    display: block;
}

.reel-card:hover .reel-card-media img,
.reel-card:hover .reel-video {
    transform: scale(1.03);
}

/* Gradient */
.reel-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 50%, transparent 100%);
    display: flex;
    align-items: flex-end;
    padding: 20px 20px 18px;
    z-index: 1;
}

.reel-card-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.reel-client {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.reel-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0;
}

.reel-service {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.4);
    margin-top: 2px;
}

/* First card slightly wider = hero feel */
.reel-card:first-child {
    width: 580px;
}

/* ── Drag scroll JS ── */


/* ── Reel Spotlight: active/inactive card states ── */
.reel-card {
    opacity: 0.45;
    transform: scale(0.96);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.reel-card.reel-active {
    opacity: 1;
    transform: scale(1);
}

/* Progress bar on active card */
.reel-card.reel-active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--color-accent, #FF575A);
    z-index: 10;
    animation: reel-progress 3.2s linear forwards;
}

@keyframes reel-progress {
    from { width: 0%; }
    to   { width: 100%; }
}