/* ═══════════════════════════════════════════════════════════════════════════
   PHANTOM VEIL — 15-14 ZOLL LAPTOP
   MODUS 1: 14 Zoll (1440x900) — max-width: 1500px and min-width: 1400px
   MODUS 2: 15 Zoll (1366x768) — max-width: 1400px
   Per link Tag NACH forge.css geladen
   !important NUR wo JS Inline-Styles ueberschrieben werden muessen
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   MODUS 1: 14 ZOLL (1440x900)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1500px) and (min-width: 1400px) {

    /* ── ROOT OVERFLOW FIX ── */
    html { overflow-x: hidden !important; width: 100% !important; }
    body { overflow-x: hidden !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }

    /* ── Timeline Bottom Blocks (05-08) — 100px runter ── */
    .section-timeline-bottom .timeline-line + .tl-block-row {
        margin-top: 150px !important;
    }

    /* ── 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 ── */
    .section-timeline { padding: 60px 75px 80px 75px; }
    .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: 18px; letter-spacing: 0.7px; margin-bottom: 10px; }
    .tl-intro p { font-size: 18px; line-height: 1.8; margin-bottom: 10px; }

    /* ── Timeline Cards ── */
    .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: 18px; 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 Abstände ── */
    .section-timeline:not(.section-timeline-bottom) .timeline-line + .tl-block-row + .tl-block-row {
        margin-top: 150px;
    }
    .section-timeline:not(.section-timeline-bottom) .timeline-line + .tl-block-row + .tl-block-row + .tl-block-row {
        margin-top: 250px;
    }
    .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 Abstände ── */
    .section-timeline-bottom .timeline-line + .tl-block-row { margin-top: 0px; }
    .section-timeline-bottom .timeline-line + .tl-block-row + div[style*="padding"] { margin-top: 100px; }
    .section-timeline-bottom .timeline-line + .tl-block-row + div[style*="padding"] + div[style*="padding"] { margin-top: 200px !important; }
    .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 ── */
    .section-nexus > div:first-of-type { top: calc(4% - 70px) !important; }
    .section-nexus > div:last-of-type { bottom: calc(5% + 70px) !important; }
    .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; }
    
    .section-timeline-bottom.section-timeline-bottom .timeline-line + .tl-block-row + .tl-block-row .tl-block-svg canvas[style] { top: 150px !important; }
    .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-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 ── */
    #pv-footer { padding: 55px 20px 40px !important; }
    #pv-footer-swiss { left: 20px !important; }
    #pv-footer-projekt { right: 20px !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   MODUS 2: 15 ZOLL (1366x768)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1400px) {

    /* ── ROOT OVERFLOW FIX ── */
    html { overflow-x: hidden !important; width: 100% !important; }
    body { overflow-x: hidden !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }

    /* ── 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 ── */
    .section-timeline { padding: 60px 75px 80px 75px; }
    .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: 18px; letter-spacing: 0.7px; margin-bottom: 10px; }
    .tl-intro p { font-size: 18px; line-height: 1.8; margin-bottom: 10px; }

    /* ── Timeline Cards ── */
    .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: 18px; 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 Abstände ── */
    .section-timeline:not(.section-timeline-bottom) .timeline-line + .tl-block-row + .tl-block-row {
        margin-top: 150px;
    }
    .section-timeline:not(.section-timeline-bottom) .timeline-line + .tl-block-row + .tl-block-row + .tl-block-row {
        margin-top: 250px;
    }
    .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 Abstände ── */
    .section-timeline-bottom .timeline-line + .tl-block-row { margin-top: 0px; }
    .section-timeline-bottom .timeline-line + .tl-block-row + div[style*="padding"] { margin-top: 100px; }
    .section-timeline-bottom .timeline-line + .tl-block-row + div[style*="padding"] + div[style*="padding"] { margin-top: 200px !important; }
    .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 ── */
    .section-nexus > div:first-of-type { top: calc(4% - 70px) !important; }
    .section-nexus > div:last-of-type { bottom: calc(5% + 70px) !important; }
    .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; }
    
    .section-timeline-bottom.section-timeline-bottom .timeline-line + .tl-block-row + .tl-block-row .tl-block-svg canvas[style] { top: 150px !important; }
    .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-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 ── */
    #pv-footer { padding: 55px 20px 40px !important; }
    #pv-footer-swiss { left: 20px !important; }
    #pv-footer-projekt { right: 20px !important; }
}