/* ==========================================================================
   SECTION-DARK + SYSTEM-FLOW
   Dossier Edition — v04.26 (dark system)
   ========================================================================== */

/* Override .section constraints for dark full-bleed */
.section.section-dark {
    max-width: none;
    padding: 0;
    background: var(--ink);
    color: var(--paper);
}
.section.section-dark + .section { border-top: 0; }
.section + .section.section-dark { border-top: 0; }

/* Wenn zwei dark sections aufeinander folgen → Paddings kollabieren,
   damit sie als ein Kapitel wirken, nicht als zwei Blöcke mit leerer Mitte. */
/* Compact v1: 60-100 → 40-64 (Dark-Zwillinge noch dichter) */
.section-dark + .section-dark > .section-inner,
.section-dark + .section-dark > .section-grid,
.section-dark + .section-dark > .final-content {
    padding-top: clamp(40px, 6vh, 64px);
}
.section-dark:has(+ .section-dark) > .section-inner,
.section-dark:has(+ .section-dark) > .section-grid,
.section-dark:has(+ .section-dark) > .final-content {
    padding-bottom: clamp(40px, 6vh, 64px);
}

/* Subtile Trennlinie statt großer Abstand zwischen dark-Zwillingen */
.section-dark + .section-dark {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Interne Head-Margins reduzieren, wenn eine dark-Sektion an eine andere
   dark-Sektion direkt anschließt (kommt z. B. bei Voices → Reichweite vor) */
.section-dark + .section-dark .reach-head {
    /* Compact: 40-56 → 28-40 */
    margin-bottom: clamp(28px, 3.5vw, 40px);
}

.section-dark .section-inner,
.section-dark > .section-grid,
.section-dark > .section-head,
.section-dark > .final-content,
.section-dark > .proof-numbers,
.section-dark > .proof-statement {
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}
.section-dark > .section-grid {
    padding-top: var(--section-py);
    padding-bottom: var(--section-py);
}
.section-dark .section-inner {
    padding-top: var(--section-py);
    padding-bottom: var(--section-py);
}

/* Headline & Lead — white on black */
.section-dark .section-headline {
    color: var(--paper);
}
.section-dark .section-headline .accent {
    color: var(--accent);
}

/* Lead larger (user requested) */
.system-lead {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(22px, 2.4vw, 34px);
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--paper);
    max-width: 50ch;
    margin-top: 28px;
    text-transform: none;
}

/* ==========================================================================
   SYSTEM FLOW — horizontal, numbers 01–05 + arrows
   ========================================================================== */
.system-flow {
    list-style: none;
    /* Compact: 72 \u2192 48, 48 \u2192 32 */
    margin: 48px 0 0;
    padding: 32px 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
    align-items: stretch;
    gap: 0;
    border-top: 1px solid rgba(255,255,255,0.15);
    border-bottom: 1px solid rgba(255,255,255,0.15);
    position: relative;
}

.flow-step {
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.flow-num {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.28em;
    color: var(--accent);
    font-weight: 500;
}

.flow-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(22px, 2.4vw, 32px);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--paper);
    margin: 0;
    text-transform: none;
}

.flow-desc {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.6;
    color: rgba(247, 245, 241, 0.6);
    margin: 0;
}

.flow-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    font-family: var(--font-mono);
    font-size: 18px;
    color: rgba(255, 90, 31, 0.85);
    user-select: none;
}

/* ==========================================================================
   PLATFORM PRINCIPLES — dark variant (section-dark)
   ========================================================================== */
.section-dark .section-text {
    color: rgba(247, 245, 241, 0.72);
}
.section-dark .platform-principles {
    border-top-color: rgba(255, 255, 255, 0.18);
}
.section-dark .platform-principles li {
    border-bottom-color: rgba(255, 255, 255, 0.12);
}
.section-dark .platform-principles .pp-body h3 {
    color: var(--paper);
}
.section-dark .platform-principles .pp-body p {
    color: rgba(247, 245, 241, 0.6);
}
.section-dark .platform-principles .pp-num {
    color: var(--accent);
}

/* ==========================================================================
   PARTNERS WALL — dark variant
   ========================================================================== */
.section-dark .partners-headline {
    color: var(--paper);
}
.section-dark .partners-headline .accent {
    color: var(--accent);
}
.section-dark .partners-eyebrow {
    color: var(--accent);
}
.section-dark .partners-wall {
    background: rgba(255, 255, 255, 0.15);
    border-top-color: rgba(255, 255, 255, 0.25);
    border-bottom-color: rgba(255, 255, 255, 0.25);
}
.section-dark .partner-cell {
    background: var(--ink);
}
.section-dark .partner-cell::before,
.section-dark .partner-cell::after {
    border-color: rgba(255, 255, 255, 0.25);
    opacity: 0.8;
}
.section-dark .partner-name {
    color: var(--paper);
}
.section-dark .partners-note {
    color: rgba(247, 245, 241, 0.5);
}

/* ==========================================================================
   TESTIMONIAL — dark variant
   ========================================================================== */
.section-dark .testimonial-quote {
    color: var(--paper);
    border-left-color: var(--accent);
}
.section-dark .testimonial-mark {
    color: var(--accent);
}
.section-dark .testimonial-role {
    color: var(--paper);
}
.section-dark .testimonial-meta {
    color: rgba(247, 245, 241, 0.55);
}

/* ==========================================================================
   STRATEGIC (Schiff) — dark variant
   ========================================================================== */
.section-dark .strategic-statement {
    color: var(--paper);
    border-top-color: rgba(255, 255, 255, 0.18);
}
.section-dark .strategic-statement .accent {
    color: var(--accent);
}
.section-dark .usecase-list li {
    color: rgba(247, 245, 241, 0.75);
    border-color: rgba(255, 255, 255, 0.25);
    background: transparent;
}

/* Schiff-Bild: ECHTER Duotone-Effekt via Blend-Mode.
   Bild wird zu reinem B/W, darüber liegt ein oranger Layer (screen),
   der die hellen Partien warm einfärbt. Klassischer Magazin-Look. */
.section-dark .strategic-image {
    position: relative;
    border: 1px solid rgba(255, 90, 31, 0.45);
    background: #0a0a0a;
    box-shadow:
        0 0 0 6px rgba(255, 90, 31, 0.10),
        0 30px 80px rgba(0, 0, 0, 0.6),
        0 0 120px rgba(255, 90, 31, 0.12);
    isolation: isolate;
    overflow: hidden;
}

/* Bild bleibt im Original-Look (dunkel-stylisch passt zur Section) */
.section-dark .strategic-image img {
    filter: contrast(1.05) brightness(0.95);
    position: relative;
    z-index: 0;
    object-position: center center;
}

/* Subtiler Schatten-Gradient unten — erdet das Bild im schwarzen Hintergrund */
.section-dark .strategic-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 55%,
        rgba(0, 0, 0, 0.45) 90%,
        rgba(0, 0, 0, 0.7) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Schicht 3: Vignette + warmer Spot oben rechts (multiply blend → Tiefen) */
.section-dark .strategic-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 75% 25%, rgba(255, 180, 100, 0.22), transparent 55%),
        radial-gradient(ellipse at 20% 80%, rgba(20, 10, 5, 0.45), transparent 60%);
    mix-blend-mode: overlay;
    z-index: 2;
    pointer-events: none;
}

/* Fadenkreuz-Ecken prominenter auf dem Schiff-Bild */
.section-dark .strategic-image .crosshair {
    width: 28px;
    height: 28px;
    z-index: 3;
}
.section-dark .strategic-image .ch-tl {
    top: 12px;
    left: 12px;
    border-top: 1.5px solid var(--accent);
    border-left: 1.5px solid var(--accent);
}
.section-dark .strategic-image .ch-br {
    bottom: 12px;
    right: 12px;
    border-bottom: 1.5px solid var(--accent);
    border-right: 1.5px solid var(--accent);
}

/* System footer on dark */
.section-dark .system-footer {
    margin-top: 64px;
    padding-top: 28px;
    border-top: 1px solid rgba(255,255,255,0.15);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(247, 245, 241, 0.55);
}
.section-dark .system-footer .accent { color: var(--accent); }

/* ==========================================================================
   MINIMAL SCROLL REVEAL — staggered steps
   ========================================================================== */
.system-flow .flow-step,
.system-flow .flow-arrow {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    transition-delay: calc(var(--i, 0) * 90ms);
}
.system-flow.is-visible .flow-step,
.system-flow.is-visible .flow-arrow {
    opacity: 1;
    transform: translateY(0);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .system-flow .flow-step,
    .system-flow .flow-arrow {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
    .system-flow {
        grid-template-columns: 1fr auto 1fr;
        gap: 8px 0;
    }
    /* Hide original arrows, add downward arrow between rows */
    .system-flow .flow-arrow:nth-child(4),
    .system-flow .flow-arrow:nth-child(8) {
        grid-column: 1 / -1;
        transform: rotate(90deg);
        padding: 12px 0;
    }
    .flow-step { padding: 24px 20px; }
}

@media (max-width: 720px) {
    .system-flow {
        grid-template-columns: 1fr;
        padding: 24px 0;
    }
    .flow-step {
        padding: 28px 4px;
        border-top: 1px solid rgba(255,255,255,0.1);
    }
    .flow-step:first-child { border-top: 0; }
    .flow-arrow {
        transform: rotate(90deg) !important;
        padding: 4px 0;
        grid-column: auto !important;
    }
    .system-lead {
        font-size: clamp(18px, 5vw, 24px);
    }
}

/* ==========================================================================
   CONTEXT SECTION — dark variant (II)
   ========================================================================== */
.section-dark .statement {
    color: var(--paper);
    border-left-color: var(--accent);
}
.section-dark .statement p {
    color: var(--paper);
}
.section-dark .statement em {
    color: var(--accent);
    font-style: normal;
}

/* -------------------------
   CONTEXT SECTION · Typo & Spacing Optimierung
   Scoped auf .section-context — bricht keine andere Section.
   ------------------------- */

/* Grid-Balance: linke Spalte mehr Raum für 2-zeilige Headline */
.section-context .section-grid {
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(48px, 7vw, 120px);
    align-items: start;
}

/* Mobile: Stack auf 1 Spalte (überschreibt die spezifischere 2-Col-Regel) */
@media (max-width: 1024px) {
    .section-context .section-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* Headline links: stärkere Hierarchie, sauberer Zeilenumbruch */
.section-context .col-left .section-headline {
    font-size: clamp(40px, 5.4vw, 76px);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.025em;
    margin: 0;
    max-width: 14ch;
}

/* Lead-Text rechts: bessere Lesbarkeit, klare Begrenzung */
.section-context .col-right .section-text {
    font-family: var(--font-sans, var(--font-body));
    font-weight: 400;
    font-size: clamp(17px, 1.3vw, 20px);
    line-height: 1.55;
    letter-spacing: 0;
    text-transform: none;
    max-width: 52ch;
    margin: 0;
    color: rgba(245, 241, 232, 0.72);
}

/* -------------------------
   EINHEITLICHE FETT-STIMME (Emphasis + Statement)
   Beide nutzen identische Typografie für klare Hierarchie:
   1 Stimme (Sans-Lead) → 1 Stimme (Display-Bold-Statements)
   ------------------------- */
.section-context .context-emphasis,
.section-context .statement,
.section-context .statement p {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(20px, 1.9vw, 26px);
    line-height: 1.22;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    color: var(--paper);
}

.section-context .context-emphasis {
    margin: clamp(28px, 3vw, 40px) 0 0;
}

/* Statement: gleiche Typo wie Emphasis — direkt anschließend ohne Abstand (Block-Optik) */
.section-context .statement {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
.section-context .statement p {
    margin: 0;
}

/* Akzent-Punkte: nur Punkte sind orange, Text bleibt weiß */
.section-context .context-emphasis .accent,
.section-context .statement .accent {
    color: var(--accent);
}

/* Override gegen evtl. ältere em/accent-Regeln in Context */
.section-context .statement em {
    color: var(--paper);
    font-style: normal;
}

/* Mobile: Headline kleiner, Abstände kompakter */
@media (max-width: 720px) {
    .section-context .col-left .section-headline {
        font-size: clamp(34px, 8vw, 48px);
        max-width: none;
    }
    .section-context .col-right {
        margin-top: 32px;
    }
}

/* ==========================================================================
   FINAL CTA — dark variant (XIV)
   ========================================================================== */
.section-final.section-dark > .final-content {
    max-width: 1100px;
    text-align: center;
    padding-top: clamp(140px, 20vh, 240px);
    padding-bottom: clamp(160px, 22vh, 280px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(40px, 5vw, 64px);
}
.section-dark .final-headline {
    color: var(--paper);
}
.section-dark .final-headline .accent {
    color: var(--accent);
}
.section-dark .final-subline {
    color: rgba(247, 245, 241, 0.55);
    margin-top: 8px;
}

/* Primary CTA button inverts on dark backgrounds */
.section-dark .btn-primary {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--paper);
}

/* Generic helpers for dark variant (applied when switching sections) */
.section-dark .section-headline {
    color: var(--paper);
}
.section-dark .section-text {
    color: rgba(247, 245, 241, 0.75);
}
.section-dark .section-header {
    color: rgba(247, 245, 241, 0.55);
    border-bottom-color: rgba(255, 255, 255, 0.15);
}
.section-dark .section-num {
    color: var(--accent);
}