/* ═══════════════════════════════════════════════════════════════════════════
   PHANTOM VEIL — MINI LANDSCAPE (max-width: 550px)
   1:1 Kopie von Phone Landscape (800px) — runterskaliert
   Per link Tag NACH phone-landscape.css geladen
   !important NUR wo JS Inline-Styles ueberschrieben werden muessen
   ═══════════════════════════════════════════════════════════════════════════ */

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

    /* ═══════════════════════════════════════════════════════════════════
       GLOBAL OVERFLOW CONTROL — Verhindert horizontales Schieben
    ═══════════════════════════════════════════════════════════════════ */
    html, body {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* ── Nav — BLEIBT FIXED! ── */
    .phantom-nav { 
        padding: 0 5px !important; 
        max-width: 100vw; 
        box-sizing: border-box;
        overflow: visible !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    .nav-brand { 
        gap: 4px !important; 
        letter-spacing: 0.5px !important;
        flex-shrink: 0 !important;
    }
    /* "Networks" verstecken */
    .brand-networks {
        display: none !important;
    }
    /* "Silicon" kleiner */
    .brand-silicon {
        font-size: 12px !important;
        font-weight: 600 !important;
    }
    .nav-brand canvas { width: 28px !important; height: 28px !important; }
    .nav-logo { width: 28px !important; height: 28px !important; }
    .phantom-nav .nav-links { gap: 0px !important; padding: 0 !important; margin: 0 !important; position: relative !important; z-index: 1001 !important; }
    .phantom-nav .nav-links a { font-size: 6px !important; letter-spacing: 0.1px !important; padding: 0 !important; margin: 0 -3px !important; }
    .phantom-nav .nav-links div.nav.active { margin: 0 !important; }
    .phantom-nav .nav-links div[data-section] { margin: 0 !important; width: 24px !important; position: relative !important; z-index: 1001 !important; transform: translateY(5px) !important; }
    
    /* Globus Icon 50px links */
    .nav-cta-btn {
        margin-right: 50px !important;
    }
    .nav-btn { font-size: 6px; padding: 2px 6px; border-radius: 3px; }

    /* ── Translate Button — nur Globus, kein Text ── */
    .phantom-nav .nav-cta { 
        display: flex !important;
        flex-shrink: 0 !important;
        gap: 4px !important;
    }
    .phantom-nav .nav-cta .nav-cta-btn {
        font-size: 0 !important;
        padding: 4px !important;
        color: transparent !important;
        text-indent: -9999px !important;
        overflow: hidden !important;
    }
    .phantom-nav .nav-cta .nav-cta-btn svg {
        width: 20px !important;
        height: 20px !important;
        text-indent: 0 !important;
    }
    /* Text im Translate Link verstecken */
    .phantom-nav .nav-cta a {
        font-size: 0 !important;
        color: transparent !important;
        text-indent: -9999px !important;
    }
    .phantom-nav .nav-cta a svg {
        text-indent: 0 !important;
    }
    
    /* ── Chat-Dot Button — klein, neben ∞, mit Glow + Pulsieren ── */
    .phantom-nav .nav-cta #uc-float-btn,
    .phantom-nav #uc-float-btn,
    #uc-float-btn {
        position: relative !important;
        left: -228px !important;
        z-index: 9999 !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
        margin-left: 4px !important;
        margin-right: 0 !important;
        border-radius: 50% !important;
        box-shadow: 0 0 15px rgba(0,212,255,0.8), 0 0 30px rgba(0,212,255,0.5), 0 0 45px rgba(255,170,0,0.4) !important;
        animation: ucPulseGlow 2s ease-in-out infinite !important;
    }
    
    @keyframes ucPulseGlow {
        0%, 100% {
            box-shadow: 0 0 15px rgba(0,212,255,0.8), 0 0 30px rgba(0,212,255,0.5), 0 0 45px rgba(255,170,0,0.4);
            transform: scale(1);
        }
        50% {
            box-shadow: 0 0 25px rgba(0,212,255,1), 0 0 50px rgba(0,212,255,0.7), 0 0 70px rgba(255,170,0,0.6);
            transform: scale(1.08);
        }
    }
    .phantom-nav .nav-cta #uc-float-btn svg,
    .phantom-nav #uc-float-btn svg,
    #uc-float-btn svg {
        width: 14px !important;
        height: 14px !important;
    }
    /* Uncle Claude Tooltip verstecken */
    .phantom-nav #uc-float-btn span,
    #uc-float-btn span {
        display: none !important;
    }

    /* ── Nav Nummer-Buttons — 28px, 5px Gap zu Silicon ── */
    .phantom-nav div[style*="display"]:not(.nav-cta) { 
        gap: 2px !important; 
        margin-left: 5px !important;
        flex-shrink: 0 !important;
    }
    .phantom-nav div[style*="display"]:not(.nav-cta) > div[style] { 
        width: 28px !important; 
        height: 28px !important; 
        font-size: 16px !important; 
        border-radius: 4px !important;
        letter-spacing: -1px !important;
    }


    /* ═══════════════════════════════════════════════════════════════════
       HERO SECTION
    ═══════════════════════════════════════════════════════════════════ */
    .phantom-hero { 
        min-height: 100vh !important; 
        max-width: 100vw !important;
        overflow: hidden !important;
    }
    .phantom-hero h1 { font-size: 24px !important; }
    .phantom-hero .hero-subtitle { font-size: 14px !important; }
    .phantom-hero .hero-lead { font-size: 14px !important; }


    /* ═══════════════════════════════════════════════════════════════════
       TIMELINE LAYOUT — 1-SPALTIG (Text oben, Animation unten)
    ═══════════════════════════════════════════════════════════════════ */
    
    /* ── Sections Container ── */
    .section-timeline { 
        padding: 20px 15px !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    .section-timeline-bottom { 
        margin: 0 !important;
        overflow: visible !important;
        max-width: 100vw !important;
    }
    
    /* ── Timeline Linie — VERSTECKT ── */
    .timeline-line {
        display: none !important;
    }
    
    /* ── Timeline Wrapper ── */
    .timeline {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
    }

    /* ── Block-Rows — 1-SPALTIG ── */
    .tl-block-row {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        align-items: center !important;
    }
    
    /* ── Text-Block — Volle Breite, linksbündig ── */
    .tl-block-row .tl-intro {
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 15px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        text-align: left !important;
        order: 1 !important;
    }
    
    /* Block 01 + 03 (row-left) — Text 20px mehr links */
    .tl-block-row.row-left .tl-intro.tl-align-left {
        padding-left: 35px !important;
    }
    
    /* ── Block 02 (Philosophie) Text — 200px höher ── */
    .section-timeline:not(.section-timeline-bottom) .timeline > div:nth-child(3) .tl-intro {
        margin-top: -200px !important;
    }
    
    /* Block 02 + 04 (row-right) — Text 20px nach links */
    .tl-block-row.row-right .tl-intro.tl-align-right {
        transform: translateX(-20px) !important;
    }
    
    /* ── Animation-Block — Zentriert unter Text ── */
    .tl-block-row .tl-block-svg {
        width: 200px !important;
        max-width: 200px !important;
        height: 200px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        order: 2 !important;
        margin: 10px auto !important;
    }
    
    /* ── Block 02 (Philosophie/CLI) Animation — 30px nach links ── */
    .section-timeline:not(.section-timeline-bottom) .timeline > div:nth-child(3) .tl-block-svg {
        transform: translateX(-30px) !important;
    }
    
    /* ── Block 03 (Mass-Schneiderei) Animation — 50px höher ── */
    .section-timeline:not(.section-timeline-bottom) .timeline > div:nth-child(4) .tl-block-svg {
        margin-top: -50px !important;
    }
    
    /* ── Block 04 (KI) Animation — 100px höher + 300px Container ── */
    .section-timeline:not(.section-timeline-bottom) .timeline > div:nth-child(5) .tl-block-svg {
        margin-top: -100px !important;
        width: 300px !important;
        max-width: 300px !important;
        height: 300px !important;
    }
    
    /* Block 04 Canvas grösser */
    .timeline > .tl-block-row:nth-child(5) .tl-block-svg canvas {
        height: 360px !important;
        margin-left: -30px !important;
    }
    
    /* Block 02 (Philosophie) — Text-Block 100px Höhe */
    .tl-block-row.row-right .tl-intro.tl-align-right {
        height: 100px !important;
        overflow: hidden !important;
        transform: translateX(-20px) !important;
    }
    
    /* Block 05 (Globe) — 50px hoch, 240x300 für Satelliten */
    .section-timeline-bottom .tl-block-row .tl-block-svg,
    svg.globe-svg {
        width: 240px !important;
        height: 300px !important;
        overflow: visible !important;
        margin-top: -50px !important;
    }
    
    /* Block 05 Text — 160px nach links */
    .section-timeline-bottom .timeline > div:nth-child(2) .tl-intro.tl-align-left {
        margin-left: -160px !important;
        position: relative !important;
    }
    .section-timeline-bottom .timeline > div:nth-child(2) .tl-intro.tl-align-left p {
        width: 400px !important;
        max-width: 400px !important;
        min-width: 400px !important;
    }
    
    /* Block 5-8 Nummern zentriert hinter Text */
    .section-timeline-bottom .tl-intro .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.25 !important;
        pointer-events: none !important;
    }
    
    /* Block 5 Nummer 90px rechts */
    .section-timeline-bottom .timeline > div:nth-child(2) .tl-intro .tl-number {
        left: calc(50% + 90px) !important;
    }
    
    /* Block 6 Nummer 40px rechts */
    .section-timeline-bottom .tl-intro.tl-block-06 .tl-number {
        left: calc(50% + 40px) !important;
    }
    
    /* Block 7 Nummer 40px rechts */
    .section-timeline-bottom .tl-intro.tl-block-07 .tl-number {
        left: calc(50% + 40px) !important;
    }
    
    /* Block 8 Nummer 60px rechts */
    .section-timeline-bottom .tl-intro.tl-block-08 .tl-number {
        left: calc(50% + 60px) !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 (1-SPALTIG)
    ══════════════════════════════════════════════════════════════════ */
    
    /* ── Block 5-8 Rows — 1-SPALTIG ── */
    .section-timeline-bottom .tl-block-row {
        flex-direction: column !important;
        margin-top: 60px !important;
        margin-left: 0px !important;
    }
    
    /* ── Parent-Container von Block 6-8 — INLINE FLEX überschreiben ── */
    .section-timeline-bottom div:has(> .tl-block-06),
    .section-timeline-bottom div:has(> .tl-block-07),
    .section-timeline-bottom div:has(> .tl-block-08) {
        flex-direction: column !important;
    }
    
    /* ── Canvas-Container für Block 6-8 — sichtbar machen ── */
    .section-timeline-bottom div:has(> .tl-block-06) > div:first-child,
    .section-timeline-bottom div:has(> .tl-block-07) > div:first-child,
    .section-timeline-bottom div:has(> .tl-block-08) > div:first-child {
        width: 100% !important;
        height: 200px !important;
        min-height: 200px !important;
        flex: none !important;
    }
    
    /* ── Block 6 — 40px links, 50px hoch, p 440px ── */
    .section-timeline-bottom .tl-intro.tl-align-right.tl-block-06 {
        display: block !important;
        position: relative !important;
        text-align: left !important;
        align-items: flex-start !important;
        margin-left: -40px !important;
        margin-top: -50px !important;
        padding: 0 !important;
        width: 440px !important;
    }
    .section-timeline-bottom .tl-intro.tl-align-right.tl-block-06 p {
        width: 400px !important;
        max-width: 400px !important;
    }
    
    /* ── Block 7 — 50px hoch ── */
    .section-timeline-bottom .tl-intro.tl-align-left.tl-block-07 {
        display: block !important;
        position: relative !important;
        text-align: left !important;
        align-items: flex-start !important;
        margin-left: 10px !important;
        margin-top: -50px !important;
        padding: 0 !important;
        width: 400px !important;
    }
    .section-timeline-bottom .tl-intro.tl-align-left.tl-block-07 p {
        width: 400px !important;
        max-width: 400px !important;
    }
    
    /* ── Block 8 — 50px links, p 400px ── */
    .section-timeline-bottom .tl-intro.tl-block-08 {
        display: block !important;
        position: relative !important;
        text-align: left !important;
        margin-left: -50px !important;
        margin-top: 0px !important;
        width: 400px !important;
    }
    .section-timeline-bottom .tl-intro.tl-block-08 p {
        width: 400px !important;
        max-width: 400px !important;
    }
    
    /* ── Nummer groß im Hintergrund — VIEL GRÖSSER ── */
    .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.25 !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 Mini Landscape — 1-spaltig linksbündig ── */
    .tl-intro h2 { font-size: 18px; letter-spacing: 1px; margin-bottom: 8px; text-align: left !important; }
    .tl-lead { font-size: 16px; letter-spacing: 0.3px; margin-bottom: 6px; text-align: left !important; }
    .tl-intro p { font-size: 14px; line-height: 1.5; margin-bottom: 6px; text-align: left !important; }
    .tl-accent { width: 40px; height: 2px; margin: 8px 0; }
    .revealed .tl-accent { width: 60px; margin: 8px 0; }

    /* ── NEXUS Text-Blöcke — nur Titel + BE READY ── */
    .section-nexus {
        max-width: 100vw !important;
        overflow: hidden !important;
    }
    /* Oberer Text-Block - nur Titel sichtbar */
    .section-nexus > div:not(#nexus-canvas):not(.nexus-bottom-text) {
        top: 5% !important;
        bottom: auto !important;
    }
    /* Body-Texte im oberen Block verstecken */
    .section-nexus .nexus-promo-body {
        display: none !important;
    }
    /* Unterer Text-Block komplett verstecken */
    .section-nexus .nexus-bottom-text {
        display: none !important;
    }
    /* BE READY Text unterhalb Titel */
    .section-nexus .nexus-promo-title::after {
        content: "BE READY" !important;
        display: block !important;
        margin-top: 10px !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        letter-spacing: 4px !important;
        opacity: 0.7 !important;
    }
    
    /* ── NEXUS Canvas (NEXUS + AI) ── */
    .section-nexus #nexus-canvas {
        margin-top: -20px !important;
    }

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

    /* ═══ FOOTER — 15px Abstand zum Rand ═══ */
    #pv-footer {
        padding: 25px 15px 15px !important;
        max-width: 100vw !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    #pv-footer-swiss {
        left: 15px !important;
    }
    #pv-footer-projekt {
        right: 15px !important;
    }


    /* ── Language Modal ── */
    #languageModal { max-width: 380px !important; top: 35px !important; }
    #languageModal > div { padding: 14px !important; border-radius: 10px !important; }
    #languageModal h2 { font-size: 1rem !important; margin-bottom: 10px !important; }
    #languageModal svg { width: 32px !important; height: 32px !important; }
    #languageModal span { font-size: 0.55rem !important; }
    #languageModal > div > div { gap: 4px !important; }
    
    /* ── Uncle Claude Chat Panel — Text 12px ── */
    #uc-chat-panel,
    #uc-chat-panel * {
        font-size: 12px !important;
    }
    
    /* ── Uncle Claude Sidebar (Kategorien) ── */
    #uc-sidebar {
        width: 160px !important;
        min-width: 160px !important;
    }
    
    /* ── SILICON Text Mobile — grösser (90px) ── */
    .silicon-text-mobile {
        display: block !important;
        position: absolute !important;
        top: calc(50% - 10px) !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        font-family: system-ui, sans-serif !important;
        font-size: 110px !important;
        font-weight: 900 !important;
        letter-spacing: 6px !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: siliconGradientFlowMini 8s ease-in-out infinite !important;
    }

    
    @keyframes siliconGradientFlowMini {
        0%, 100% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
    }
    
    /* ── Layer 3 (SILICON Partikel), Layer 4 (Bubble S Identity), Layer 5 verstecken ── */
    #layer-3 canvas,
    #layer-4 canvas,
    #layer-5 canvas {
        display: none !important;
    }
    
    /* ── Beyond Code Beyond Limits — 50px höher ── */
    .slogan-gradient-wave {
        margin-top: -50px !important;
    }
    
    /* ═══════════════════════════════════════════════════════════════════
       UNCLE CLAUDE CHAT OVERLAY — Fullscreen mit 10px Luft
    ═══════════════════════════════════════════════════════════════════ */
    
    #uc-overlay {
        padding: 10px !important;
        box-sizing: border-box !important;
    }
    
    #uc-chat-panel {
        width: calc(100vw - 20px) !important;
        height: calc(100vh - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100vh - 20px) !important;
        border-radius: 16px !important;
        flex-direction: column !important;
    }
    
    /* Sidebar verstecken */
    #uc-sidebar {
        display: none !important;
    }
    
    /* Chat-Content volle Breite + Scroll */
    #uc-chat-content,
    #uc-chat-panel > div:last-child {
        width: 100% !important;
        height: 100% !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Messages Container scrollbar */
    #uc-messages {
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-height: calc(100vh - 120px) !important;
    }
    
    /* Input am unteren Rand fixiert */
    #uc-input-wrap {
        flex-shrink: 0 !important;
        padding: 8px !important;
    }
}