/* ==========================================================================
   strategy-relaunch.css · Bundled CSS fuer alle 9 Strategie-Sektions-Komponenten
   Phase 1 Skelett · wird in Phase 2 ausgefuellt mit finalen Styles
   Geladen deferred via base.html.twig
   ========================================================================== */

/* ---------- Shared: liquid-glass-Variante fuer Sektionen ---------- */
.hero-statement,
.reality-panel,
.flow-vision,
.before-after,
.trust-strip,
.culture-mosaic,
.offer-block,
.manifest-close {
    position: relative;
    padding: var(--spacing-4xl) 0;
    isolation: isolate;
}

/* Section-Title-Default fuer alle Strategie-Sektionen */
.reality-panel .section-title,
.flow-vision .section-title,
.before-after .section-title,
.trust-strip .section-title,
.culture-mosaic .section-title,
.offer-block .section-title {
    font-family: var(--font-family-heading);
    font-size: clamp(1.8rem, 3.5vw, 2.75rem);
    line-height: var(--line-height-heading);
    color: var(--text-primary);
    margin-bottom: var(--spacing-lg);
}

/* ============================================================
   1. hero-statement
   ============================================================ */
.hero-statement {
    position: relative;
    min-height: min(92vh, 920px);
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: clamp(120px, 16vh, 200px) 0 clamp(80px, 12vh, 140px);
    isolation: isolate;
}
.hero-statement__media,
.hero-statement__media--static {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.hero-statement__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    /* SIMO-CI: hue-rotate verschiebt Gelb/Magenta in Purple,
       Saturate runter, Brightness runter — Video wird ruhig + on-brand. */
    filter: hue-rotate(220deg) saturate(0.85) brightness(0.7) contrast(1.05);
    animation: hero-video-slow 1s linear forwards;
}
.hero-statement__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg,
            rgba(0, 0, 51, 0.75) 0%,
            rgba(0, 0, 51, 0.88) 60%,
            rgba(0, 0, 51, 0.96) 100%),
        radial-gradient(ellipse at 28% 55%, rgba(183, 148, 246, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse at 78% 30%, rgba(123, 44, 191, 0.14) 0%, transparent 55%);
    pointer-events: none;
}
.hero-statement__3d-canvas {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0.32;
}

@keyframes hero-video-slow {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-statement__video {
        animation: none;
        filter: hue-rotate(220deg) saturate(0.6) brightness(0.55);
    }
    .hero-statement__3d-canvas {
        opacity: 0;
    }
}
.hero-statement__inner {
    position: relative;
    z-index: 3;
    width: min(92%, 1240px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2.5vh, 32px);
}
.hero-statement__headline {
    font-family: var(--font-family-heading);
    font-weight: 700;
    font-size: clamp(2.25rem, 5.5vw, 4.5rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin: 0;
    max-width: 22ch;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}
.hero-statement__subhead {
    font-size: clamp(1.05rem, 1.4vw, 1.3rem);
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.55;
    max-width: 62ch;
    margin: 0;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}
.hero-statement__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(12px, 1.5vw, 20px);
    margin-top: clamp(8px, 1.5vh, 16px);
}
.hero-statement__ctas .btn {
    min-height: 52px;
}

@media (max-width: 768px) {
    .hero-statement {
        min-height: auto;
        padding: 100px 0 60px;
    }
    .hero-statement__inner {
        gap: 20px;
    }
    .hero-statement__ctas {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .hero-statement__ctas .btn {
        width: 100%;
        justify-content: center;
    }
    .hero-statement__3d-canvas {
        opacity: 0.4;
    }
}

/* ============================================================
   2. reality-panel
   ============================================================ */
.reality-panel__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-2xl);
}
.reality-panel__column {
    padding: var(--spacing-2xl);
    border-radius: var(--border-radius-lg);
}
.reality-panel__column-title {
    font-size: 1.25rem;
    color: var(--teal-primary);
    margin-bottom: var(--spacing-lg);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.reality-panel__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--spacing-sm);
}
.reality-panel__list li {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    color: var(--text-primary);
    font-size: 1.1rem;
}
.reality-panel__list li i {
    color: var(--teal-primary);
    font-size: 1rem;
    flex-shrink: 0;
}
.reality-panel__column--results .reality-panel__list li i {
    color: var(--error-color); /* "before/reality" red marker */
}
.reality-panel__quote {
    text-align: center;
    margin: 0 auto;
    max-width: 38ch;
    padding: var(--spacing-2xl);
    border-left: 3px solid var(--teal-primary);
    background: var(--glass-bg);
    border-radius: var(--border-radius);
}
.reality-panel__quote p {
    font-family: var(--font-family-heading);
    font-size: clamp(1.4rem, 2.2vw, 2rem);
    line-height: 1.3;
    color: var(--text-primary);
    margin: 0;
}

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

/* ============================================================
   3. flow-vision · Architektur-SVG + WebGL-Layer
   ============================================================ */
.flow-vision__header {
    max-width: 980px;
    margin: 0 auto var(--spacing-2xl);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(12px, 1.5vh, 20px);
}
.flow-vision__eyebrow {
    display: inline-block;
    font-family: var(--font-family-heading);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--primary-color, #b794f6);
    padding: 6px 16px;
    border: 1px solid rgba(183, 148, 246, 0.35);
    border-radius: 999px;
    background: rgba(183, 148, 246, 0.08);
}
.flow-vision__title {
    font-family: var(--font-family-heading);
    font-size: clamp(1.7rem, 3.2vw, 2.5rem);
    line-height: 1.18;
    letter-spacing: -0.01em;
    color: #ffffff;
    max-width: 22ch;
    margin: 0;
}
.flow-vision__catch {
    font-family: var(--font-family-heading);
    font-style: italic;
    font-size: clamp(1.05rem, 1.45vw, 1.25rem);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
    max-width: 58ch;
    margin: 0;
}
.flow-vision__lead {
    font-size: clamp(0.98rem, 1.1vw, 1.08rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.78);
    max-width: 70ch;
    margin: 0;
}
.flow-vision__pillars {
    list-style: none;
    margin: clamp(8px, 1vh, 14px) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 10px;
}
.flow-vision__pillar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 0.92rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(183, 148, 246, 0.08);
    border: 1px solid rgba(183, 148, 246, 0.22);
    border-radius: 999px;
    transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.flow-vision__pillar i {
    color: var(--primary-color, #b794f6);
    font-size: 0.95rem;
}
.flow-vision__pillar:hover {
    transform: translateY(-2px);
    background: rgba(183, 148, 246, 0.16);
    border-color: rgba(183, 148, 246, 0.45);
}
.flow-vision__connector {
    font-family: var(--font-family-heading);
    font-size: clamp(0.95rem, 1.15vw, 1.1rem);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--primary-color, #b794f6);
    margin: 0;
    text-shadow: 0 0 24px rgba(183, 148, 246, 0.25);
}

@media (prefers-reduced-motion: reduce) {
    .flow-vision__pillar { transition: none; }
    .flow-vision__pillar:hover { transform: none; }
}

.flow-vision__poster {
    margin: var(--spacing-2xl) 0 var(--spacing-lg);
    padding: 0;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    position: relative;
}
.flow-vision__image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--border-radius-lg);
}

/* New: Architektur-SVG-Komponente (Stand 2026-05-31) */
.flow-vision__architecture {
    margin: var(--spacing-2xl) 0 var(--spacing-lg);
    padding: 0;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow), var(--glass-glow);
    position: relative;
    perspective: 1600px;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.6s ease;
}
.flow-vision__architecture:hover {
    transform: translateY(-4px) rotateX(0.5deg);
    box-shadow:
        0 16px 48px var(--overlay-medium),
        0 0 36px var(--purple-tint-50);
}
.flow-vision__architecture-inner {
    position: relative;
    width: 100%;
    aspect-ratio: 1600 / 1080;
    display: block;
}
.flow-vision__architecture-svg {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--border-radius-lg);
    position: relative;
    z-index: 1;
}

/* WebGL-Canvas-Override: liegt absolut, screen-blend, weniger opacity bei reduzierter Bewegung */
.flow-vision__architecture canvas {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2;
    pointer-events: none;
    border-radius: var(--border-radius-lg);
}

.flow-vision__caption {
    text-align: center;
    padding: var(--spacing-md);
    color: var(--text-secondary);
    font-size: 1rem;
    font-style: italic;
}
.flow-vision__3d-fallback-canvas {
    display: none; /* aktiviert von 3D-Adapter wenn poster-particles aktiv */
}

@media (prefers-reduced-motion: reduce) {
    .flow-vision__architecture,
    .flow-vision__architecture:hover {
        transform: none;
        transition: none;
    }
    .flow-vision__architecture canvas {
        display: none;
    }
}

/* Mobile: nur SVG, kein 3D, einfacheres Layout */
@media (max-width: 768px) {
    .flow-vision__architecture canvas {
        display: none;
    }
}

/* ============================================================
   4. sector-card (Branchen)
   ============================================================ */
.sectors-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
}
.sector-card {
    position: relative;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    transition: var(--transition);
}
.sector-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--glass-shadow), var(--glass-glow);
}
.sector-card__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.35;
}
.sector-card__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sector-card__inner {
    position: relative;
    z-index: 1;
    padding: var(--spacing-2xl);
}
.sector-card__icon {
    font-size: 2.5rem;
    color: var(--teal-primary);
    margin-bottom: var(--spacing-md);
}
.sector-card__headline {
    font-size: 1.4rem;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
    line-height: 1.3;
}
.sector-card__bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-lg);
    color: var(--text-secondary);
}
.sector-card__bullets li {
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid var(--glass-border);
}
.sector-card__bullets li:last-child {
    border-bottom: 0;
}
.sector-card__cta {
    color: var(--teal-primary);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}
.sector-card__cta:hover {
    color: var(--teal-light);
}

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

/* ============================================================
   5. before-after
   ============================================================ */
.before-after__video-wrap {
    margin: var(--spacing-2xl) 0;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    aspect-ratio: 16 / 9;
}
.before-after__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.before-after__grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--spacing-xl);
    align-items: stretch;
}
.before-after__col {
    padding: var(--spacing-2xl);
    border-radius: var(--border-radius-lg);
}
.before-after__col--before {
    border: 1px solid rgba(244, 67, 54, 0.25); /* error-color tinted border */
}
.before-after__col--after {
    border: 1px solid var(--glass-border-strong);
}
.before-after__col-title {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 1rem;
    margin-bottom: var(--spacing-lg);
}
.before-after__col--before .before-after__col-title {
    color: var(--error-color); /* "before/reality" red marker */
}
.before-after__col--after .before-after__col-title {
    color: var(--teal-primary);
}
.before-after__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--spacing-sm);
}
.before-after__list li {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}
.before-after__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--teal-primary);
}

@media (max-width: 768px) {
    .before-after__grid {
        grid-template-columns: 1fr;
    }
    .before-after__arrow {
        transform: rotate(90deg);
    }
}

/* ============================================================
   6. trust-strip
   ============================================================ */
.trust-strip__metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
    margin: var(--spacing-2xl) 0;
}
.trust-strip__metric {
    text-align: center;
    padding: var(--spacing-2xl);
    border-radius: var(--border-radius-lg);
}
.trust-strip__metric-value {
    display: block;
    font-family: var(--font-family-heading);
    font-size: clamp(2.5rem, 5vw, 4rem);
    color: var(--teal-primary);
    line-height: 1;
    margin-bottom: var(--spacing-sm);
}
.trust-strip__metric-label {
    color: var(--text-secondary);
    font-size: 0.95rem;
}
.trust-strip__cta-wrap {
    text-align: center;
}

@media (max-width: 1024px) {
    .trust-strip__metrics {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   7. culture-mosaic
   ============================================================ */
.culture-mosaic__pillars {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    justify-content: center;
    margin: var(--spacing-2xl) 0;
}
.culture-mosaic__pillar {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--border-radius-pill);
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 500;
}
.culture-mosaic__pillar i {
    color: var(--teal-primary);
    font-size: 1.2rem;
}
.culture-mosaic__cta-wrap {
    text-align: center;
}

/* ============================================================
   8. offer-block
   ============================================================ */
.offer-block__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-2xl);
}
.offer-block__col {
    padding: var(--spacing-2xl);
    border-radius: var(--border-radius-lg);
}
.offer-block__col-title {
    color: var(--teal-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--spacing-lg);
    font-size: 1rem;
}
.offer-block__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--spacing-md);
}
.offer-block__list li {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    color: var(--text-primary);
    font-size: 1.05rem;
}
.offer-block__list li i {
    color: var(--teal-primary);
    flex-shrink: 0;
}
.offer-block__cta-wrap {
    text-align: center;
}

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

/* ============================================================
   9. manifest-close
   ============================================================ */
.manifest-close {
    position: relative;
    overflow: hidden;
}
.manifest-close__media {
    position: absolute;
    inset: 0;
    z-index: -1;
}
.manifest-close__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.manifest-close__overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(26, 26, 26, 0.65) 0%, rgba(26, 26, 26, 0.95) 80%); /* one-off: manifest-close overlay (legacy dark base) */
}
.manifest-close__inner {
    padding: var(--spacing-4xl);
    border-radius: var(--border-radius-lg);
    text-align: center;
    max-width: 880px;
    margin: 0 auto;
}
.manifest-close__title {
    font-family: var(--font-family-heading);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    line-height: 1.3;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xl);
}
.manifest-close__manifest {
    color: var(--teal-primary);
    font-size: 1.2rem;
    margin-bottom: var(--spacing-2xl);
    font-weight: 500;
}
.manifest-close__ctas {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================================
   liquid-glass utility (shared, falls noch nicht global)
   ============================================================ */
.liquid-glass {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(var(--blur-amount)) saturate(var(--blur-saturate));
    -webkit-backdrop-filter: blur(var(--blur-amount)) saturate(var(--blur-saturate));
    box-shadow: var(--glass-shadow);
}

/* ============================================================
   3D Effekte · Layer + Parallax + Reduced-Motion-Fallbacks
   ============================================================ */

/* Section-Parallax: --parallax-y wird vom section-parallax.js gesetzt */
[data-3d-effect="section-parallax"] > * {
    will-change: transform;
    transform: translate3d(0, var(--parallax-y, 0), 0);
    transition: transform 0.05s linear;
}

/* Wenn der Loader 3D komplett überspringt: statische Fallbacks bleiben sichtbar */
html[data-three-d="skip-reduced-motion"] .hero-statement__3d-canvas,
html[data-three-d="skip-slow-connection"] .hero-statement__3d-canvas {
    display: none !important;
}

/* ============================================================
   prefers-reduced-motion: alle Videos pausieren, 3D-Canvas hide
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .hero-statement__video,
    .sector-card__video,
    .before-after__video,
    .manifest-close__video {
        display: none;
    }
    .hero-statement__3d-canvas,
    .flow-vision__3d-fallback-canvas {
        display: none !important;
    }
    /* Parallax-Transforms deaktivieren */
    [data-3d-effect="section-parallax"] > * {
        transform: none !important;
    }
}