/* ═══════════════════════════════════════════════════════════════════════════
   PHANTOM VEIL — SMARTPHONE LANDSCAPE (max-width: 800px, landscape)
   Runterskaliert von Tablet Landscape (1100px)
   Per link Tag NACH forge.css + 15-14.css + tablet-landscape.css geladen
   !important NUR wo JS Inline-Styles ueberschrieben werden muessen
   ═══════════════════════════════════════════════════════════════════════════ */

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

    /* ── Nav — BLEIBT FIXED! ── */
    .phantom-nav { 
        padding: 0 8px !important; 
        max-width: 100vw; 
        box-sizing: border-box;
    }
    .nav-brand { font-size: 12px; gap: 6px; letter-spacing: 1px; }
    .nav-brand canvas { width: 32px !important; height: 32px !important; }
    .nav-logo { width: 32px !important; height: 32px !important; }
    .nav-links { gap: 8px; }
    .nav-links a { font-size: 7px; letter-spacing: 0.2px; }
    .nav-btn { font-size: 7px; padding: 3px 8px; border-radius: 4px; }

    /* ── Uncle Claude Button ── */
    .phantom-nav .nav-cta { 
        font-size: 10px !important; 
        margin-left: 0 !important;
        margin-right: 6px !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: 10px !important;
        font-family: 'Exo 2', sans-serif !important;
        transition: color 0.3s !important;
        display: flex !important;
        align-items: center !important;
        gap: 3px !important;
        padding: 4px 10px !important;
        width: auto !important;
        height: auto !important;
        min-width: auto !important;
        max-width: none !important;
        border-radius: 5px !important;
        margin: 0 !important;
    }
    .phantom-nav .nav-cta-btn:hover {
        color: #000 !important;
    }
    .phantom-nav .nav-cta svg { 
        width: 14px !important; 
        height: 14px !important;
    }

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


    /* ═══════════════════════════════════════════════════════════════════
       TIMELINE LAYOUT — 50-50 SPLIT, 25px RAND
    ═══════════════════════════════════════════════════════════════════ */
    
    /* ── Sections Container — 25px Rand ── */
    .section-timeline { 
        padding: 25px 25px 40px 25px !important; 
    }
    .section-timeline-bottom { 
        margin: 0 !important;
    }
    
    /* Block 05 Text-Container — 350px breit */
    .section-timeline-bottom .tl-block-row .tl-intro.tl-align-left {
        width: 350px !important;
        max-width: 350px !important;
        flex: 0 0 350px !important;
    }
    
    /* Block 06, 07, 08 Text-Container — 350px breit */
    .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: 350px !important;
        max-width: 350px !important;
        flex: 0 0 350px !important;
    }
    
    /* Block 06 + 08 Text — 20px nach links */
    .section-timeline-bottom .tl-intro.tl-block-06,
    .section-timeline-bottom .tl-intro.tl-block-08 {
        margin-left: -20px !important;
    }
    
    /* Block 05-08 Paragraphen — 330px breit */
    .section-timeline-bottom .tl-intro p {
        width: 330px !important;
        max-width: 330px !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: 1px !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 hoch */
    .tl-block-row:nth-child(2) {
        margin-top: -20px !important;
    }
    
    /* Text-Seite = 50% mit innerem Padding */
    .tl-block-row .tl-intro {
        width: 50% !important;
        max-width: 50% !important;
        padding: 20px 15px 20px 40px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        position: relative !important;
        overflow: visible !important;
    }
    .tl-block-row.row-right .tl-intro {
        padding: 20px 40px 20px 15px !important;
    }
    
    /* Animation-Seite = 300x360 */
    .tl-block-row .tl-block-svg {
        width: 300px !important;
        max-width: 300px !important;
        height: 360px !important;
        min-height: 360px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
    }
    /* ── Canvas pro Block — EIGENE SELEKTOREN ── */
    
    /* Block 01 (Ideenschmiede) — Canvas 30px nach RECHTS */
    .timeline > .tl-block-row:nth-child(2) .tl-block-svg canvas {
        width: 300px !important;
        height: 360px !important;
        margin-left: 30px !important;
    }
    
    /* Block 02 (CLI) — Canvas */
    .timeline > .tl-block-row:nth-child(3) .tl-block-svg canvas {
        width: 300px !important;
        height: 360px !important;
        margin-left: 0 !important;
    }
    
    /* Block 03 (Mass-Schneiderei) — Canvas 30px nach RECHTS */
    .timeline > .tl-block-row:nth-child(4) .tl-block-svg canvas {
        width: 400px !important;
        height: 360px !important;
        margin-left: 30px !important;
    }
    
    /* Block 04 (KI) — Canvas 20px weniger links/rechts */
    .timeline > .tl-block-row:nth-child(5) .tl-block-svg canvas {
        width: 380px !important;
        height: 360px !important;
        margin-left: -30px !important;
    }
    
    /* Block 05 (Globe/Planet) — Container overflow visible, Grösse via JS */
    .section-timeline.section-timeline-bottom .timeline .tl-block-row.row-left .tl-block-svg {
        overflow: visible !important;
    }
    svg.globe-svg {
        overflow: visible !important;
    }
    
    /* Block 05 — ALLE Parent overflow visible */
    .section-timeline-bottom,
    .section-timeline-bottom .timeline,
    .section-timeline-bottom .tl-block-row {
        overflow: visible !important;
    }
    
    /* ══════════════════════════════════════════════════════════════════
       SECTION-TIMELINE-BOTTOM — Blöcke 06-08 (JS Canvas Animationen)
    ══════════════════════════════════════════════════════════════════ */
    
    /* Block 06 (Funnel) — Canvas 30px LINKS */
    div:has(> .tl-block-06) > div:first-child > canvas {
        left: -30px !important;
        top: 30px !important;
        transform: scale(1.0) !important;
    }
    
    /* Block 07 (Cloud) — GANZER BLOCK 30px HOCH */
    .section-timeline-bottom .timeline-line + .tl-block-row + div[style*="padding"] + div[style*="padding"] {
        margin-top: 30px !important;
    }
    
    /* Block 07 (Cloud) — Canvas 30px RECHTS */
    .section-timeline-bottom .timeline-line + .tl-block-row + div[style*="padding"] + div[style*="padding"] > div:last-child > canvas {
        left: 30px !important;
        top: -20px !important;
        transform: scale(1.0) !important;
    }
    
    /* Block 08 (Radar/Shield) — Canvas 20px LINKS */
    .section-timeline-bottom .timeline-line + .tl-block-row + div[style*="padding"] + div[style*="padding"] + div[style*="padding"] > div:first-child > canvas {
        left: -20px !important;
        top: 0 !important;
    }
    
    /* Block 08 (Radar/Shield) — GANZER BLOCK 30px HOCH */
    .section-timeline-bottom .timeline-line + .tl-block-row + div[style*="padding"] + div[style*="padding"] + div[style*="padding"] {
        margin-top: -30px !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: 20px 15px 20px 15px !important;
    }
    
    /* Block 7 = links → Padding */
    .section-timeline-bottom .tl-intro.tl-block-07 {
        margin-right: auto !important;
        padding: 20px 15px 20px 15px !important;
    }
    
    /* ── Nummer groß im Hintergrund für alle Blöcke ── */
    .tl-number {
        position: absolute !important;
        font-size: 200px !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 0 !important;
        opacity: 0.35 !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 Smartphone Landscape ── */
    .tl-intro h2 { font-size: 18px; letter-spacing: 1.5px; margin-bottom: 8px; }
    .tl-lead { font-size: 16px; letter-spacing: 0.4px; margin-bottom: 5px; }
    .tl-intro p { font-size: 16px; line-height: 1.5; margin-bottom: 5px; }
    .tl-accent { width: 25px; height: 1px; margin: 8px 0; }
    .revealed .tl-accent { width: 50px; }


    /* ── NEXUS Text-Blöcke Anpassung — nur Text, Animation bleibt ── */
    .section-nexus > div:first-of-type {
        top: calc(4% + 10px) !important;
    }
    .section-nexus > div:last-of-type {
        bottom: calc(5% - 10px) !important;
    }
    
    /* ── NEXUS Canvas (NEXUS + AI) ── */
    .section-nexus #nexus-canvas {
        margin-top: -30px !important;
    }

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

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

    /* ── Language Modal ── */
    #languageModal { max-width: 450px !important; top: 40px !important; }
    #languageModal > div { padding: 18px !important; border-radius: 12px !important; }
    #languageModal h2 { font-size: 1.2rem !important; margin-bottom: 14px !important; }
    #languageModal svg { width: 40px !important; height: 40px !important; }
    #languageModal span { font-size: 0.6rem !important; }
    #languageModal > div > div { gap: 6px !important; }
    
    /* ── Uncle Claude Chat Panel — Text 14px ── */
    #uc-chat-panel,
    #uc-chat-panel * {
        font-size: 14px !important;
    }
    
    /* ── Uncle Claude Sidebar (Kategorien) ── */
    #uc-sidebar {
        width: 200px !important;
        min-width: 200px !important;
    }
    
    /* ── SILICON Text Mobile — Animierter Gradient Journey (HORIZONTAL) ── */
    .silicon-text-mobile {
        display: block !important;
        position: absolute !important;
        top: calc(50% - 20px) !important;
        left: calc(50% + 20px) !important;
        transform: translate(-50%, -50%) !important;
        font-family: system-ui, sans-serif !important;
        font-size: 160px !important;
        font-weight: 900 !important;
        letter-spacing: 16px !important;
        z-index: 1 !important;
        pointer-events: none !important;
        /* Animierter Gradient wie Nummer-Menü */
        background: linear-gradient(
            90deg,
            #00d4ff 0%,
            #00dfbb 14%,
            #00ea88 28%,
            #00ff88 42%,
            #55ee55 56%,
            #aadd33 70%,
            #ddbb11 84%,
            #ffaa00 100%
        );
        background-size: 200% 100%;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        opacity: 0.35 !important;
        animation: siliconGradientFlowH 8s ease-in-out infinite !important;
    }
    
    @keyframes siliconGradientFlowH {
        0%, 100% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
    }
    
    /* ── Layer 3 (SILICON Partikel), Layer 5 (Beyond Code) verstecken — Layer 4 bleibt! ── */
    #layer-3 canvas,
    #layer-5 canvas {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MINI LANDSCAPE (max-width: 480px, landscape) — Kleinste Smartphones
   Noch kompakter als normale Phone Landscape
   ═══════════════════════════════════════════════════════════════════════════ */

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

    /* ── Nav — noch kompakter ── */
    .phantom-nav { 
        padding: 0 4px !important; 
        height: 36px !important;
    }
    .nav-brand { font-size: 10px; gap: 4px; }
    .nav-brand canvas { width: 24px !important; height: 24px !important; }
    .nav-logo { width: 24px !important; height: 24px !important; }
    .phantom-nav .nav-cta { display: none !important; }
    
    /* ── Nav Nummer-Buttons — 28px ── */
    .phantom-nav div[style*="display"]:not(.nav-cta) > div[style] { 
        width: 28px !important; 
        height: 28px !important; 
        font-size: 18px !important; 
    }

    /* ── Hero — kompakter ── */
    .phantom-hero { min-height: 100vh !important; }
    .phantom-hero h1 { font-size: 28px !important; }
    .phantom-hero .hero-subtitle { font-size: 16px !important; }
    .phantom-hero .hero-lead { font-size: 16px !important; }

    /* ── Timeline — weniger Padding ── */
    .section-timeline { padding: 15px 10px 25px 10px !important; }
    .section-timeline-bottom { margin: 0 !important; }

    /* ── Timeline Blöcke 01-04 ── */
    .tl-block-row { padding: 0 !important; margin: 0 !important; }
    .tl-block-row .tl-intro { 
        padding: 10px 8px 10px 20px !important; 
        width: 45% !important;
        max-width: 45% !important;
    }
    .tl-block-row.row-right .tl-intro { padding: 10px 20px 10px 8px !important; }
    .tl-block-row .tl-block-svg { 
        width: 200px !important; 
        max-width: 200px !important; 
        height: 240px !important;
    }

    /* ── Text 16px minimum ── */
    .tl-intro h2 { font-size: 18px !important; line-height: 1.2 !important; }
    .tl-intro .tl-lead { font-size: 16px !important; }
    .tl-intro p { font-size: 16px !important; line-height: 1.4 !important; }
    .tl-number { font-size: 36px !important; }

    /* ── Block 05-08 Text ── */
    .section-timeline-bottom .tl-block-row .tl-intro.tl-align-left,
    .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: 280px !important;
        max-width: 280px !important;
        flex: 0 0 280px !important;
    }
    .section-timeline-bottom .tl-intro p {
        width: 260px !important;
        max-width: 260px !important;
    }

    /* ── NEXUS Section ── */
    .section-nexus { min-height: 100vh !important; }

    /* ── Footer ── */
    .phantom-footer { padding: 20px 10px !important; }
    .phantom-footer h2 { font-size: 20px !important; }
    .phantom-footer p { font-size: 16px !important; }

    /* ── Uncle Claude Chat Overlay — 10px rechts ── */
    #uc-chat-panel {
        margin-left: 20px !important;
    }

    /* ── Uncle Claude Dot Button — 20px rechts ── */
    #uc-float-btn {
        margin-right: -20px !important;
    }
}