/* ═══════════════════════════════════════════════════════════════════════════
   PHANTOM VEIL — 15-14 ZOLL LAPTOP (max-width: 1440px)
   Runterskaliert von 1920x1080 Original
   Per link Tag NACH forge.css geladen
   !important NUR wo JS Inline-Styles ueberschrieben werden muessen
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1500px) {

    /* ── Nav — BLEIBT FIXED! ── */
    .phantom-nav { 
        padding: 0 12px !important; 
        max-width: 100vw; 
        box-sizing: border-box;
    }
    .nav-brand { font-size: 17px; gap: 10px; letter-spacing: 1.4px; }
    .nav-brand canvas { width: 42px !important; height: 42px !important; }
    .nav-logo { width: 42px !important; height: 42px !important; }
    .nav-links { gap: 14px; }
    .nav-links a { font-size: 10px; letter-spacing: 0.3px; }
    .nav-btn { font-size: 10px; padding: 5px 12px; border-radius: 5px; }
    
    /* ── Uncle Claude Button — 50px links + rechteckig! ── */
    .phantom-nav .nav-cta { 
        font-size: 13px !important; 
        margin-left: 50px !important;
    }
    .phantom-nav .nav-cta-btn { 
        color: rgba(0,0,0,0.5) !important;
        text-decoration: none !important;
        font-weight: 600 !important;
        font-size: 13px !important;
        font-family: 'Exo 2', sans-serif !important;
        transition: color 0.3s !important;
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        padding: 8px 16px !important;
        width: auto !important;
        height: auto !important;
        min-width: auto !important;
        max-width: none !important;
        border-radius: 8px !important;
    }
    .phantom-nav .nav-cta-btn:hover {
        color: #000 !important;
    }
    .phantom-nav .nav-cta svg { 
        width: 22px !important; 
        height: 22px !important; 
    }

    /* ── Nav Nummer-Buttons — 72px, GROSSE Nummern ── */
    .phantom-nav div[style*="display"]:not(.nav-cta) { gap: 8px !important; }
    .phantom-nav div[style*="display"]:not(.nav-cta) > div[style] { 
        width: 72px !important; 
        height: 72px !important; 
        font-size: 32px !important; 
        border-radius: 12px !important; 
    }

    /* ── Sections / Timeline — +2px ÜBERALL! ── */
    .section-timeline { padding: 60px 75px 80px 75px; }
    
    /* ── NUR SECTION 2 (Timeline Bottom) — 250px HOCH MIT !IMPORTANT! ── */
    .section-timeline-bottom { 
        margin-top: -250px !important; 
    }
    
    .tl-intro { max-width: 400px; margin-bottom: 60px; }
    .tl-number { font-size: 82px; letter-spacing: 8px; margin-bottom: -14px; }
    .tl-accent { width: 40px; height: 1px; margin: 14px 0; }
    .revealed .tl-accent { width: 80px; }
    .tl-intro h2 { font-size: 34px; letter-spacing: 2.5px; margin-bottom: 14px; }
    .tl-lead { font-size: 19px; letter-spacing: 0.7px; margin-bottom: 10px; }
    .tl-intro p { font-size: 17px; line-height: 1.8; margin-bottom: 10px; }

    /* ── Timeline Cards — +2px ÜBERALL! ── */
    .tl-card { margin-bottom: 50px; }
    .tl-left { padding-right: 40px; }
    .tl-right { padding-left: 40px; }
    .tl-node { width: 12px; height: 12px; }
    .tl-node-inner { width: 4px; height: 4px; margin: 2.5px auto; }
    .tl-left .tl-node { right: -6px; }
    .tl-right .tl-node { left: -6px; }
    .tl-card .scard { width: 280px; min-height: 220px; padding: 28px 22px; border-radius: 12px; }
    .scard-bg { width: 110px; height: 110px; }
    .scard h3 { font-size: 18px; margin-bottom: 8px; letter-spacing: 0.4px; }
    .scard p { font-size: 16px; line-height: 1.6; }
    .timeline-line { width: 1px; }

    /* ── Block-Rows (Forge) ── */
    .tl-block-row { min-height: 360px; padding: 0; }
    .tl-block-row .tl-intro { padding: 40px 75px; max-width: none; }
    
    /* ── Section 1 Block 2 Abstand — 150px statt 200px! ── */
    .section-timeline:not(.section-timeline-bottom) .timeline-line + .tl-block-row + .tl-block-row {
        margin-top: 150px;
    }
    
    /* ── Section 1 Block 3 — 250px! ── */
    .section-timeline:not(.section-timeline-bottom) .timeline-line + .tl-block-row + .tl-block-row + .tl-block-row {
        margin-top: 250px;
    }
    
    /* ── Section 1 Block 4 — 300px! (50px mehr für 1366x768) ── */
    .section-timeline:not(.section-timeline-bottom) .timeline-line + .tl-block-row + .tl-block-row + .tl-block-row + .tl-block-row {
        margin-top: 300px;
    }
    
    /* ── Section 2 Block 5 — 0px (150px höher) ── */
    .section-timeline-bottom .timeline-line + .tl-block-row {
        margin-top: 0px;
    }
    
    /* ── Section 2 Block 6 — GANZER BLOCK 100px runter! ── */
    .section-timeline-bottom .timeline-line + .tl-block-row + div[style*="padding"] {
        margin-top: 100px;
    }
    
    /* ── Section 2 Block 7 — GANZER BLOCK 200px runter! ── */
    .section-timeline-bottom .timeline-line + .tl-block-row + div[style*="padding"] + div[style*="padding"] {
        margin-top: 200px !important;
    }
    
    /* ── Section 2 Block 8 — GANZER BLOCK 100px runter! ── */
    .section-timeline-bottom .timeline-line + .tl-block-row + div[style*="padding"] + div[style*="padding"] + div[style*="padding"] {
        margin-top: 100px !important;
    }
    
    /* ── NEXUS Text-Blöcke Anpassung ── */
    .section-nexus > div:first-of-type {
        top: calc(4% - 70px) !important; /* 20px höher */
    }
    .section-nexus > div:last-of-type {
        bottom: calc(5% + 70px) !important; /* 10px runter */
    }
    
    /* ── NEXUS Canvas (NEXUS + INFINITY 888 AI) — 100px HÖHER ── */
    .section-nexus #nexus-canvas {
        margin-top: -100px !important;
    }
    
    .tl-block-svg { height: 360px; min-width: 360px; position: relative; overflow: visible; }
    .tl-block-svg svg { width: 360px; height: 360px; overflow: visible; }
    .tl-block-svg canvas { left: 50% !important; transform: translateX(-50%); }
    
    /* ── Section 2 Block 6 — Canvas 150px runter (NACH allgemeiner Regel)! ── */
    .section-timeline-bottom.section-timeline-bottom .timeline-line + .tl-block-row + .tl-block-row .tl-block-svg canvas[style] {
        top: 150px !important;
    }
    
    /* ── Section 2 ALLE Wrapper - Padding 30px - ÜBERSCHREIBT INLINE STYLES! ── */
    .section-timeline-bottom div[style*="padding"] {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
    
    .section-timeline-bottom > .timeline > .tl-intro { padding: 40px 30px !important; max-width: none; }
    .section-timeline-bottom { padding-left: 75px !important; padding-right: 75px !important; }
    
    /* ── Section 2 Block 7 — GANZER BLOCK 150px runter (NACH allgemeiner Regel)! ── */
    .section-timeline-bottom.section-timeline-bottom > .timeline > .tl-intro.tl-block-07 {
        margin-top: 150px !important;
    }

    /* ── Scroll Reveal ── */
    .from-left { transform: translateX(-80px) scale(1.06); }
    .from-right { transform: translateX(80px) scale(1.06); }

    /* ═══ FOOTER — 20px Abstand zum Rand ═══ */
    #pv-footer {
        padding: 55px 20px 40px !important;
    }
    #pv-footer-swiss {
        left: 20px !important;
    }
    #pv-footer-projekt {
        right: 20px !important;
    }
}