/* ═══════════════════════════════════════════════════════════════════════════
   PHANTOM VEIL — TABLET LANDSCAPE (max-width: 1100px, landscape)
   Kopiert von 1366x768 (15-14.css), runterskaliert
   Per link Tag NACH forge.css + 15-14.css geladen
   !important NUR wo JS Inline-Styles ueberschrieben werden muessen
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) and (orientation: landscape) {

    /* ── Nav — BLEIBT FIXED! ── */
    .phantom-nav { 
        padding: 0 10px !important; 
        max-width: 100vw; 
        box-sizing: border-box;
    }
    .nav-brand { font-size: 16px; gap: 10px; letter-spacing: 1.4px; }
    .nav-brand canvas { width: 44px !important; height: 44px !important; }
    .nav-logo { width: 44px !important; height: 44px !important; }
    .nav-links { gap: 12px; }
    .nav-links a { font-size: 9px; letter-spacing: 0.2px; }
    .nav-btn { font-size: 9px; padding: 4px 10px; border-radius: 5px; }

    /* ── Uncle Claude Button — 10px rechts ── */
    .phantom-nav .nav-cta { 
        font-size: 12px !important; 
        margin-left: 0 !important;
        margin-right: 10px !important;
    }
    .phantom-nav .nav-cta .nav-cta-btn,
    .phantom-nav .nav-cta a.nav-cta-btn,
    a.nav-cta-btn { 
        color: rgba(0,0,0,0.5) !important;
        text-decoration: none !important;
        font-weight: 600 !important;
        font-size: 12px !important;
        font-family: 'Exo 2', sans-serif !important;
        transition: color 0.3s !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        padding: 6px 14px !important;
        width: auto !important;
        height: auto !important;
        min-width: auto !important;
        max-width: none !important;
        border-radius: 7px !important;
        margin: 0 !important;
    }
    .phantom-nav .nav-cta-btn:hover {
        color: #000 !important;
    }
    .phantom-nav .nav-cta svg { 
        width: 18px !important; 
        height: 18px !important; 
    }

    /* ── Nav Nummer-Buttons — 50px, kompakt! ── */
    .phantom-nav div[style*="display"]:not(.nav-cta) { gap: 3px !important; }
    .phantom-nav div[style*="display"]:not(.nav-cta) > div[style] { 
        width: 50px !important; 
        height: 50px !important; 
        font-size: 36px !important; 
        border-radius: 6px !important;
        letter-spacing: -1px !important;
    }


    /* ═══════════════════════════════════════════════════════════════════
       TIMELINE LAYOUT — 50-50 SPLIT, 20px RAND, SAUBER FÜR ALLE BLÖCKE
    ═══════════════════════════════════════════════════════════════════ */
    
    /* ── Sections Container — 40px Rand ── */
    .section-timeline { 
        padding: 40px 40px 60px 40px !important; 
    }
    .section-timeline-bottom { 
        padding: 40px 40px 60px 40px !important;
        margin-top: -150px !important; 
    }
    
    /* ── Timeline Wrapper — volle Breite ── */
    .timeline {
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
    }
    
    /* ── Timeline Linie — EXAKT MITTE ── */
    .timeline-line {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 2px !important;
        height: 100% !important;
        top: 0 !important;
    }
    
    /* ── Block-Rows (Blöcke 1-4 + Block 5) — 50-50 ── */
    .tl-block-row {
        display: flex !important;
        width: 100% !important;
        min-height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Block 2 — 50px runter */
    .tl-block-row:nth-child(2) {
        margin-top: 50px !important;
    }
    
    /* Text-Seite = 50% mit innerem Padding */
    .tl-block-row .tl-intro {
        width: 50% !important;
        max-width: 50% !important;
        padding: 30px 20px 30px 60px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        position: relative !important;
        overflow: visible !important;
    }
    .tl-block-row.row-right .tl-intro {
        padding: 30px 60px 30px 20px !important;
    }
    
    /* Animation-Seite = 486x584 (exakt wie Textblock) */
    .tl-block-row .tl-block-svg {
        width: 486px !important;
        max-width: 486px !important;
        height: 584px !important;
        min-height: 584px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    /* ── Canvas pro Block — EIGENE SELEKTOREN ── */
    
    /* Block 01 (Ideenschmiede) — Canvas 50px nach RECHTS */
    .timeline > .tl-block-row:nth-child(2) .tl-block-svg canvas {
        width: 486px !important;
        height: 584px !important;
        margin-left: 50px !important;
    }
    
    /* Block 02 (CLI) — Canvas */
    .timeline > .tl-block-row:nth-child(3) .tl-block-svg canvas {
        width: 486px !important;
        height: 584px !important;
        margin-left: 0 !important;
    }
    
    /* Block 03 (Mass-Schneiderei) — Canvas 50px nach RECHTS */
    .timeline > .tl-block-row:nth-child(4) .tl-block-svg canvas {
        width: 486px !important;
        height: 584px !important;
        margin-left: 50px !important;
    }
    
    /* Block 04 (KI) — Canvas 50px nach LINKS */
    .timeline > .tl-block-row:nth-child(5) .tl-block-svg canvas {
        width: 486px !important;
        height: 584px !important;
        margin-left: -50px !important;
    }
    
    /* ══════════════════════════════════════════════════════════════════
       SECTION-TIMELINE-BOTTOM — Blöcke 06-08 (JS Canvas Animationen)
    ══════════════════════════════════════════════════════════════════ */
    
    /* Block 06 (Funnel) — Canvas 50px LINKS, 50px HOCH, GRÖSSER */
    div:has(> .tl-block-06) > div:first-child > canvas {
        left: -50px !important;
        top: 50px !important;
        transform: scale(1.15) !important;
    }
    
    /* Block 07 (Cloud) — GANZER BLOCK 100px HOCH */
    .section-timeline-bottom .timeline-line + .tl-block-row + div[style*="padding"] + div[style*="padding"] {
        margin-top: 50px !important;
    }
    
    /* Block 07 (Cloud) — Canvas 50px RECHTS, 30px HOCH, GRÖSSER */
    .section-timeline-bottom .timeline-line + .tl-block-row + div[style*="padding"] + div[style*="padding"] > div:last-child > canvas {
        left: 50px !important;
        top: -30px !important;
        transform: scale(1.2) !important;
    }
    
    /* Block 08 (Radar/Shield) — Canvas 30px LINKS */
    .section-timeline-bottom .timeline-line + .tl-block-row + div[style*="padding"] + div[style*="padding"] + div[style*="padding"] > div:first-child > canvas {
        left: -30px !important;
        top: 0 !important;
    }
    
    /* Block 08 (Radar/Shield) — GANZER BLOCK 50px HOCH */
    .section-timeline-bottom .timeline-line + .tl-block-row + div[style*="padding"] + div[style*="padding"] + div[style*="padding"] {
        margin-top: -50px !important;
    }
    
    /* ── Blöcke 6-8 (ohne .tl-block-row) — auch 50% mit innerem Padding ── */
    .section-timeline-bottom .tl-intro.tl-block-06,
    .section-timeline-bottom .tl-intro.tl-block-07,
    .section-timeline-bottom .tl-intro.tl-block-08 {
        width: 50% !important;
        max-width: 50% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        overflow: visible !important;
    }
    
    /* Block 6 + 8 = rechts → Padding */
    .section-timeline-bottom .tl-intro.tl-block-06,
    .section-timeline-bottom .tl-intro.tl-block-08 {
        margin-left: auto !important;
        padding: 30px 20px 30px 20px !important;
    }
    
    /* Block 7 = links → Padding */
    .section-timeline-bottom .tl-intro.tl-block-07 {
        margin-right: auto !important;
        padding: 30px 20px 30px 20px !important;
    }
    
    /* ── Nummer im Hintergrund für alle Blöcke ── */
    .tl-number {
        position: absolute !important;
        font-size: 320px !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 0 !important;
        opacity: 0.10 !important;
        pointer-events: none !important;
    }
    
    .tl-intro h2,
    .tl-intro p,
    .tl-intro .tl-lead,
    .tl-intro .tl-accent {
        position: relative !important;
        z-index: 1 !important;
    }


    /* ── Typografie für Tablet Landscape ── */
    .tl-intro h2 { font-size: 26px; letter-spacing: 2px; margin-bottom: 12px; }
    .tl-lead { font-size: 16px; letter-spacing: 0.5px; margin-bottom: 8px; }
    .tl-intro p { font-size: 18px; line-height: 1.7; margin-bottom: 8px; }
    .tl-accent { width: 35px; height: 1px; margin: 12px 0; }
    .revealed .tl-accent { width: 70px; }


    /* ── NEXUS Text-Blöcke Anpassung ── */
    .section-nexus > div:first-of-type {
        top: calc(4% - 60px) !important;
    }
    .section-nexus > div:last-of-type {
        bottom: calc(5% + 60px) !important;
    }
    
    /* ── NEXUS Canvas — 80px HÖHER ── */
    .section-nexus #nexus-canvas {
        margin-top: -80px !important;
    }

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

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

    /* ── Language Modal — EIN WENIG GRÖSSER ── */
    #languageModal { max-width: 580px !important; top: 55px !important; }
    #languageModal > div { padding: 26px !important; border-radius: 14px !important; }
    #languageModal h2 { font-size: 1.5rem !important; margin-bottom: 20px !important; }
    #languageModal svg { width: 55px !important; height: 55px !important; }
    #languageModal span { font-size: 0.75rem !important; }
    #languageModal > div > div { gap: 10px !important; }
    
    /* ── Uncle Claude Chat Panel — Text 18px ── */
    #uc-chat-panel,
    #uc-chat-panel * {
        font-size: 18px !important;
    }
    
    /* ── Uncle Claude Sidebar (Kategorien) — BREITER ── */
    #uc-sidebar {
        width: 280px !important;
        min-width: 280px !important;
    }
}