/**
 * ═══════════════════════════════════════════════════════════════════════════
 * OPERATIO FORTIS - SPLIT SCREEN HERO
 * Weighted UI: Präzises Einrasten, keine hektischen Bewegungen
 * ═══════════════════════════════════════════════════════════════════════════
 */


/* ═══════════════════════════════════════════════════════════════════════════
   SPLIT SCREEN CONTAINER
   ═══════════════════════════════════════════════════════════════════════════ */

.split-screen {
    display: flex;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    /* Dynamic viewport height — beruecksichtigt mobile Adressleiste */
    overflow: hidden;
    position: relative;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SPLIT PANELS - Base Styles
   ═══════════════════════════════════════════════════════════════════════════ */

.split-panel {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;

    /* Weighted UI: Präzise, gewichtige Transition - kein Nachschwingen */
    transition: flex 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover States - Weighted Expansion */
.split-screen:hover .split-panel {
    flex: 0.85;
}

.split-screen:hover .split-panel:hover {
    flex: 1.15;
}


/* ═══════════════════════════════════════════════════════════════════════════
   BACKGROUND LAYERS
   ═══════════════════════════════════════════════════════════════════════════ */

.split-panel__background {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Texture Layer */
.split-panel__texture {
    position: absolute;
    inset: 0;
    opacity: 0.4;
    z-index: 1;
}

/* Concrete Texture for B2B */
.split-panel__texture--concrete {
    background:
        repeating-linear-gradient(90deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.02) 2px,
            rgba(255, 255, 255, 0.02) 4px),
        repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.02) 2px,
            rgba(255, 255, 255, 0.02) 4px),
        linear-gradient(135deg, #1a1d22 0%, #0f1115 50%, #0a0c10 100%);
}

/* Deep Obsidian for Private */
.split-panel__texture--obsidian {
    background:
        radial-gradient(ellipse at 30% 70%, rgba(205, 127, 50, 0.03) 0%, transparent 50%),
        linear-gradient(180deg, #0a0c0f 0%, #0f1115 50%, #14171c 100%);
}

/* Background Image */
.split-panel__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 2;
    opacity: 0.6;

    /* Weighted UI: Smooth scale on hover */
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.5s ease;
}

/* LUXURY: Enhanced steel plasticity for B2B */
.split-panel--left .split-panel__image {
    filter: contrast(1.15) brightness(0.85) saturate(0.9);
}

.split-panel:hover .split-panel__image {
    transform: scale(1.05);
    opacity: 0.75;
}

/* Overlay Gradients */
.split-panel__overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.split-panel__overlay--teal {
    /* Premium "Ambient Steel" Gradient - Default */
    background:
        radial-gradient(ellipse at 50% 0%, rgba(0, 71, 171, 0.15) 0%, transparent 50%),
        linear-gradient(to bottom,
            rgba(60, 60, 60, 0.6) 0%,
            rgba(15, 17, 21, 0.95) 100%);
    mix-blend-mode: normal;
}

/* B2B Left: Elegant Gray Overlay - Matching Right Panel Style */
.split-panel--left .split-panel__overlay--teal {
    /* Sophisticated gray gradient like bronze panel */
    background:
        linear-gradient(225deg, rgba(15, 17, 21, 0.7) 0%, rgba(15, 17, 21, 0.4) 50%, rgba(90, 95, 100, 0.15) 100%),
        linear-gradient(to bottom, rgba(15, 17, 21, 0.2) 0%, rgba(15, 17, 21, 0.6) 100%);
}

.split-panel__overlay--bronze {
    background:
        linear-gradient(225deg, rgba(15, 17, 21, 0.9) 0%, rgba(15, 17, 21, 0.6) 50%, rgba(205, 127, 50, 0.1) 100%),
        linear-gradient(to bottom, rgba(15, 17, 21, 0.3) 0%, rgba(15, 17, 21, 0.8) 100%);
}


/* ═══════════════════════════════════════════════════════════════════════════
   CONTENT
   ═══════════════════════════════════════════════════════════════════════════ */

.split-panel__content {
    position: relative;
    z-index: 10;
    padding: var(--space-12);
    max-width: 500px;

    /* Weighted UI: Content slides in with weight */
    transform: translateY(10px);
    opacity: 0.9;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.4s ease;
}

.split-panel:hover .split-panel__content {
    transform: translateY(0);
    opacity: 1;
}

/* Label */
.split-panel__label {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    margin-bottom: var(--space-4);
    padding: var(--space-2) var(--space-4);
    border: 1px solid currentColor;
    opacity: 0.7;
}

.split-panel--left .split-panel__label {
    color: var(--color-cobalt-blue);
    border-color: rgba(0, 71, 171, 0.3);
}

.split-panel--right .split-panel__label {
    color: var(--color-burnished-bronze);
    border-color: rgba(205, 127, 50, 0.3);
}

/* Title */
.split-panel__title {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    color: var(--color-vapor-grey);
    margin-bottom: var(--space-6);

    /* Soft hyphenation for long German words */
    hyphens: manual;
}

/* LUXURY: Embossed/Engraved effect for B2B title */
.split-panel--left .split-panel__title {
    text-shadow: 0 1px 2px rgba(225, 228, 232, 0.1);
}

/* Description */
.split-panel__description {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-8);
    max-width: 35ch;
}

/* CTA Button */
.split-panel__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    text-decoration: none;
    padding: var(--space-4) var(--space-6);
    border: 1px solid currentColor;
    background: transparent;

    /* Weighted UI: Precise hover transition */
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.split-panel__cta svg {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.split-panel__cta:hover svg {
    transform: translateX(4px);
}

.split-panel__cta--teal {
    color: var(--color-cobalt-blue);
    border-color: var(--color-cobalt-blue);
}

/* LUXURY: Ultra-thin Silver Border & Sapphire Glow */
.split-panel--left .split-panel__cta--teal {
    border: 1px solid var(--steel-polished);
    background: rgba(0, 40, 100, 0.1);
    color: var(--steel-polished);
}

.split-panel__cta--teal:hover {
    background: var(--color-cobalt-blue);
    color: white;
    box-shadow: none;
}

.split-panel--left .split-panel__cta--teal:hover {
    background: var(--sapphire-deep);
    border-color: var(--steel-polished);
    box-shadow: 0 0 20px var(--sapphire-glow), 0 0 40px rgba(0, 71, 171, 0.3);
    color: white;
}

.split-panel__cta--bronze {
    color: var(--color-burnished-bronze);
    border-color: var(--color-burnished-bronze);
}

.split-panel__cta--bronze:hover {
    background: var(--color-burnished-bronze);
    color: var(--color-obsidian-slate);
    box-shadow: 0 0 30px rgba(205, 127, 50, 0.3);
}


/* ═══════════════════════════════════════════════════════════════════════════
   ACCENT LINES
   ═══════════════════════════════════════════════════════════════════════════ */

.split-panel__accent {
    position: absolute;
    z-index: 5;
    pointer-events: none;

    /* Weighted UI: Accent appears with weight */
    transition: opacity 0.5s ease,
        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.split-panel__accent--teal {
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
            transparent 0%,
            var(--color-cobalt-blue) 50%,
            transparent 100%);
    opacity: 0.5;
    transform: scaleX(0.5);
}

/* Polished Silver Akzentstreifen für linke Seite */
.split-panel--left .split-panel__accent--teal {
    background: linear-gradient(to right,
            transparent 0%,
            var(--steel-dark) 20%,
            var(--steel-polished) 50%,
            var(--steel-dark) 80%,
            transparent 100%);
    box-shadow: 0 0 15px var(--sapphire-glow);
    height: 4px;
}

.split-panel--left:hover .split-panel__accent--teal {
    opacity: 1;
    transform: scaleX(1);
}

.split-panel__accent--bronze {
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
            transparent 0%,
            var(--color-burnished-bronze) 50%,
            transparent 100%);
    opacity: 0.5;
    transform: scaleX(0.5);
}

.split-panel--right:hover .split-panel__accent--bronze {
    opacity: 1;
    transform: scaleX(1);
}


/* ═══════════════════════════════════════════════════════════════════════════
   CENTER ELEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Center Logo */
.split-screen__logo {
    position: absolute;
    top: var(--space-8);
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;

    /* Weighted UI: Logo breathes subtly */
    animation: logoBreath 4s ease-in-out infinite;
}

.split-screen__logo img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    filter: drop-shadow(0 0 20px rgba(205, 127, 50, 0.3));
}

@keyframes logoBreath {

    0%,
    100% {
        filter: drop-shadow(0 0 20px rgba(205, 127, 50, 0.3));
    }

    50% {
        filter: drop-shadow(0 0 35px rgba(205, 127, 50, 0.5));
    }
}

/* Center Divider */
.split-screen__divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: linear-gradient(to bottom,
            transparent 0%,
            rgba(225, 228, 232, 0.2) 20%,
            rgba(225, 228, 232, 0.3) 50%,
            rgba(225, 228, 232, 0.2) 80%,
            transparent 100%);
    z-index: 50;
    pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .split-screen {
        flex-direction: column;
    }

    .split-panel {
        flex: 1;
        min-height: 0;
        /* flex: 1 teilt den Platz gleichmaessig */
    }

    .split-screen:hover .split-panel {
        flex: 1;
    }

    .split-screen:hover .split-panel:hover {
        flex: 1;
    }

    .split-screen__divider {
        top: 50%;
        left: 0;
        right: 0;
        bottom: auto;
        width: 100%;
        height: 1px;
        background: linear-gradient(to right,
                transparent 0%,
                rgba(225, 228, 232, 0.2) 20%,
                rgba(225, 228, 232, 0.3) 50%,
                rgba(225, 228, 232, 0.2) 80%,
                transparent 100%);
    }

    .split-screen__logo {
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .split-panel__content {
        padding: var(--space-8);
    }

    .split-panel__title {
        font-size: clamp(1.5rem, 5vw, 2rem);
    }
}

@media (max-width: 640px) {
    .split-screen {
        height: 100dvh;
        height: 100svh;
    }

    .split-panel__content {
        padding: var(--space-6);
        max-width: 100%;
    }

    .split-panel__description {
        max-width: 100%;
        font-size: var(--text-sm);
    }

    .split-panel__cta {
        padding: var(--space-3) var(--space-5);
        font-size: var(--text-xs);
        width: 100%;
        justify-content: center;
    }

    /* Logo und Divider auf Handy ausblenden */
    .split-screen__logo {
        display: none;
    }

    .split-screen__divider {
        display: none;
    }

    .split-panel__label {
        font-size: 9px;
        padding: var(--space-1) var(--space-3);
    }
}