/* ═══════════════════════════════════════════════════════════════════════════
   PHANTOM VEIL — SMARTPHONE LANDSCAPE (max-width: 1200px, landscape)
   Für Smartphones wie CMF Phone 1 (1080px) und kleiner
   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: 1200px) and (orientation: landscape) {

    /* ── HTML/Body/Layer-1 — 100% Viewport Fix ── */
    html { overflow-x: hidden !important; width: 100% !important; }
    body { overflow-x: hidden !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
    #layer-1 { 
        width: 100% !important; 
        max-width: 100% !important; 
        height: 100vh !important;
        max-height: 100vh !important;
    }
    #layer-1 canvas {
        height: 100vh !important;
        max-height: 100vh !important;
    }
    
    /* ── Phantom Layers — FIX für Mobile Viewport ── */
    .phantom-layer {
        height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden !important;
    }
    .phantom-layer canvas {
        max-height: 100vh !important;
    }
    .phantom-hero {
        height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden !important;
    }

    /* ── Nav — BLEIBT FIXED! ── */
    .phantom-nav { 
        padding: 0 8px !important; 
        width: 100% !important;
        max-width: none !important; 
        box-sizing: border-box;
    }
    .nav-brand { font-size: 16px; gap: 8px; letter-spacing: 1px; }
    .nav-brand canvas { width: 40px !important; height: 40px !important; }
    .nav-logo { width: 40px !important; height: 40px !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: 12px !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: 14px !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: 22px !important; 
        height: 22px !important;
    }

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


    /* ═══════════════════════════════════════════════════════════════════
       TIMELINE LAYOUT — 1-SPALTIG (wie Portrait)
    ═══════════════════════════════════════════════════════════════════ */
    
    /* ── Sections Container ── */
    .section-timeline { 
        padding: 40px 25px 50px 60px !important; 
    }
    .section-timeline-bottom { 
        margin: 0 !important;
        padding-left: 60px !important;
        padding-right: 20px !important;
    }
    
    /* ── Timeline Wrapper — volle Breite ── */
    .timeline {
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
    }
    
    /* ── Block-Rows — 1-SPALTIG ── */
    .tl-block-row {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-height: auto !important;
        padding: 20px 15px !important;
        margin: 0 !important;
        overflow: visible !important;
    }
    .tl-block-row.row-right {
        flex-direction: column !important;
    }
    
    /* Text-Seite = volle Breite */
    .tl-block-row .tl-intro {
        width: 100% !important;
        max-width: 100% !important;
        padding: 15px 20px 15px 0px !important;
        margin: 0 !important;
        margin-left: 50px !important;
        box-sizing: border-box !important;
        position: relative !important;
        text-align: left !important;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    
    /* Block 3 (row-left, nth-child 4) — 50px hoch */
    .timeline > .tl-block-row:nth-child(4).row-left .tl-intro {
        transform: translateY(-50px) !important;
    }
    
    /* Block 2+4 (row-right) — 70px nach links + 100px hoch */
    .tl-block-row.row-right .tl-intro {
        padding: 15px 20px 15px 0px !important;
        margin-left: 50px !important;
        transform: translate(-70px, -100px) !important;
    }
    
    /* Block 2+4 (row-right) — explizit */
    .timeline > .tl-block-row:nth-child(3).row-right .tl-intro {
        transform: translate(-70px, -100px) !important;
    }
    .timeline > .tl-block-row:nth-child(5).row-right .tl-intro {
        margin-top: 100px !important;
        margin-left: 50px !important;
    }
    
    /* Animation-Seite — NUR für Blöcke 1-4 */
    .section-timeline:not(.section-timeline-bottom) .tl-block-row .tl-block-svg {
        min-height: 400px !important;
        margin-left: -10% !important;
        position: relative !important;
        overflow: visible !important;
    }
    
    /* Block 05 (Globe) — 470px Container, Globe kleiner via radius — MEGA SPEZIFISCH */
    .section-timeline.section-timeline-bottom .timeline > .tl-block-row:first-of-type .tl-block-svg {
        width: 470px !important;
        height: 470px !important;
        min-width: 470px !important;
        min-height: 470px !important;
        max-width: 470px !important;
        max-height: 470px !important;
        margin-left: -30px !important;
        margin-top: -50px !important;
    }
    .section-timeline.section-timeline-bottom .timeline > .tl-block-row:first-of-type .tl-block-svg .globe-svg {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
    .section-timeline.section-timeline-bottom .timeline > .tl-block-row:first-of-type .tl-block-svg canvas {
        width: 470px !important;
        height: 470px !important;
        min-width: 470px !important;
        min-height: 470px !important;
        max-width: 470px !important;
        max-height: 470px !important;
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
    }
    
    .tl-block-row .tl-block-svg svg {
        margin: 0 auto !important;
        display: block !important;
        position: relative !important;
        z-index: 1 !important;
    }
    /* ── Canvas pro Block — 1-SPALTIG Layout ── */
    
    /* Block 02 (CLI) */
    .timeline > .tl-block-row:nth-child(3) .tl-block-svg canvas {
        width: 300px !important;
        height: 300px !important;
    }
    
    /* Block 03 (Mass-Schneiderei) */
    .timeline > .tl-block-row:nth-child(4) .tl-block-svg canvas {
        width: 480px !important;
        height: 480px !important;
    }
    
    /* Block 04 (KI) */
    .timeline > .tl-block-row:nth-child(5) .tl-block-svg canvas {
        width: 1000px !important;
        left: -210px !important;
        /* height: 580px !important; */
    }
    
    /* Block 05 (Globe/Planet) — Container overflow visible */
    .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 05-08 — 1-SPALTIG
    ══════════════════════════════════════════════════════════════════ */
    
    /* Block 05 — 1-spaltig */
    .section-timeline-bottom .tl-block-row {
        flex-direction: column !important;
        margin-top: 60px !important;
    }
    .section-timeline-bottom .tl-block-row .tl-intro {
        text-align: left !important;
        align-items: flex-start !important;
        margin-left: 50px !important;
        margin-top: -100px !important;
    }
    
    /* ── Blöcke 6-8 — RICHTIGE ZUORDNUNG ── */
    /* Block 06 (Funnel) = tl-block-08 */
    /* Block 07 (Cloud) = tl-block-06 */
    /* Block 08 (Shield) = tl-block-07 */
    
    /* Block 6 (Funnel) */
    .section-timeline-bottom .tl-intro.tl-block-08 {
        margin-left: 100px !important;
        margin-top: -220px !important;
        text-align: left !important;
    }
    
    /* Block 7 (Cloud) — 200px links */
    .section-timeline-bottom .tl-intro.tl-block-06 {
        margin-left: -100px !important;
        margin-top: -50px !important;
    }
    
    /* Block 8 (Shield) — weiter rechts */
    .section-timeline-bottom .tl-intro.tl-block-07 {
        margin-left: 180px !important;
        margin-top: 30px !important;
    }
    
    /* Blöcke 6-8 — P width wie Block 5 */
    .section-timeline-bottom .tl-intro.tl-block-06 p,
    .section-timeline-bottom .tl-intro.tl-block-07 p,
    .section-timeline-bottom .tl-intro.tl-block-08 p {
        width: 780px !important;
        max-width: 780px !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 — 18px ── */
    .tl-intro h2 { font-size: 18px; letter-spacing: 1.5px; margin-bottom: 8px; }
    .tl-lead { font-size: 18px; letter-spacing: 0.4px; margin-bottom: 5px; }
    .tl-intro p { font-size: 18px; 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% + 20px) !important;
    }
    
    /* ── NEXUS Promo Text — 18px ── */
    .section-nexus .nexus-promo-title,
    .section-nexus .nexus-promo-body,
    .section-nexus .nexus-bottom-text {
        font-size: 18px !important;
    }
    
    /* ── NEXUS Body-Texte ausblenden, nur Titel + BE READY bleiben ── */
    .section-nexus .nexus-promo-body {
        display: none !important;
    }
    
    /* ── NEXUS Titel 20px runter, BE READY 10px runter ── */
    .section-nexus .nexus-promo-title {
        margin-top: 20px !important;
    }
    .section-nexus .nexus-promo-cta {
        margin-top: 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 — padding-top 50px statt 100px ═══ */
    #pv-footer {
        padding: 50px 25px 25px !important;
    }
    #pv-footer-swiss {
        left: 25px !important;
    }
    #pv-footer-projekt {
        right: 25px !important;
    }

    /* ── Language Modal ── */
    #languageModal { max-width: 450px !important; top: -10px !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: 18px !important; }
    #languageModal > div > div { gap: 6px !important; }
    
    /* ── Uncle Claude Chat Panel — Text 18px ── */
    #uc-chat-panel,
    #uc-chat-panel * {
        font-size: 18px !important;
    }
    
    /* ── Uncle Claude Sidebar — VERSTECKEN für Phone Landscape ── */
    #uc-sidebar {
        display: none !important;
    }
    
    /* ── Uncle Claude Chat Panel — Schmaler + runter für Landscape ── */
    body #uc-chat-panel,
    html body #uc-chat-panel,
    #uc-chat-panel[style] {
        width: 85% !important;
        max-width: 85% !important;
        height: auto !important;
        max-height: 80vh !important;
        top: 0 !important;
        left: auto !important;
        right: 7.5% !important;
        transform: none !important;
        margin: 0 !important;
        border-radius: 12px !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 4 (S Identity) verstecken ── */
    #layer-3 canvas,
    #layer-4 canvas {
        display: none !important;
    }
    
    /* ── Beyond Code Beyond Limits — 140px höher ── */
    .slogan-gradient-wave {
        margin-top: -140px !important;
    }
    .slogan-line {
        font-size: 32px !important;
        display: block !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 ── */
    /* ── 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: -30px !important;
    }

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