/* ═══════════════════════════════════════════════════════════════════════════
   PHANTOM VEIL — MINI PORTRAIT (max-width: 375px, orientation: portrait)
   320x480 DevTools — Runterskaliert von Phone Portrait (500px)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 375px) and (orientation: portrait) {

    /* ── Kein horizontaler Overflow ── */
    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; }
    .phantom-hero { width: 100% !important; max-width: 100% !important; }
    .phantom-nav { max-width: 300px !important; box-sizing: border-box !important; }
    .phantom-section, .section-timeline, .section-timeline-bottom, .section-nexus { max-width: 100% !important; width: 100% !important; overflow: hidden !important; box-sizing: border-box !important; }
    .tl-block-row { width: 100% !important; box-sizing: border-box !important; }
    .tl-block-text { padding-right: 20px !important; box-sizing: border-box !important; }
    .timeline { max-width: 100% !important; overflow: hidden !important; }

    /* ── Nav Stack ── */
    .phantom-nav { flex-direction: column !important; align-items: center !important; padding: 6px 8px !important; gap: 4px !important; }
    .phantom-nav > div:nth-child(2) { order: -1 !important; width: 100% !important; justify-content: space-between !important; flex-wrap: nowrap !important; top: calc(50% + 310px) !important; }
    .nav-brand { order: 0 !important; font-size: 13px !important; gap: 5px !important; letter-spacing: 0.8px !important; margin-left: -160px !important; }
    .nav-brand canvas { width: 28px !important; height: 28px !important; }
    .nav-cta { order: 1 !important; font-size: 13px !important; position: absolute !important; left: -7px !important; top: 30px !important; }
    .phantom-nav .nav-cta #uc-float-btn,
    .phantom-nav #uc-float-btn,
    #uc-float-btn { 
        position: fixed !important;
        right: 20px !important;
        top: 5px !important;
        left: auto !important;
        margin: 0 !important;
    }
    .nav-cta a { font-size: 0 !important; gap: 5px !important; }
    .nav-cta svg { width: 20px !important; height: 20px !important; }

    /* ── Nav Nummer-Buttons — kleiner als phone-portrait, inline-styles überschreiben ── */
    .phantom-nav div[style*="display"] { gap: 2px !important; }
    .phantom-nav div[style*="display"] > div[style] { width: 32px !important; height: 32px !important; border-radius: 3px !important; }
    .phantom-nav > div:nth-child(2) > div[style] { 
        width: 32px !important; 
        height: 32px !important; 
        font-size: 28px !important;
        border-radius: 4px !important;
    }
    .phantom-nav > div:nth-child(2) > div[data-section] {
        width: 32px !important; 
        height: 32px !important; 
        font-size: 28px !important;
        border-radius: 4px !important;
    }
    div[data-section] {
        width: 32px !important; 
        height: 32px !important; 
        font-size: 28px !important;
    }

    /* ── Slogan sichtbar ── */
    body #layer-5 { display: block !important; }

    /* ── Sections / Timeline ── */
    .section-timeline { padding: 25px 10px 35px 10px; }
    .tl-intro { max-width: 100% !important; width: 100% !important; margin-bottom: 20px; padding: 0 5px !important; }
    .section-timeline .tl-intro { padding-top: 0 !important; }
    .tl-intro.tl-align-left { margin-left: 115px !important; }
    .tl-intro.tl-align-right { margin-right: 55px !important; }
    .tl-number { font-size: 42px; letter-spacing: 4px; margin-bottom: -4px; }
    .tl-accent { width: 24px; }
    .revealed .tl-accent { width: 42px; }
    .tl-intro h2 { font-size: 22px; letter-spacing: 1px; margin-bottom: 8px; }
    .section-timeline .tl-intro .tl-lead,
    .tl-intro .tl-lead,
    .tl-lead { font-size: 14px !important; letter-spacing: 0.3px !important; margin-bottom: 5px !important; }
    .section-timeline .tl-block-row .tl-intro p,
    .section-timeline .tl-intro p,
    .tl-intro p,
    p[data-i18n^="pv.b"] { font-size: 14px !important; line-height: 1.6 !important; margin-bottom: 5px !important; }

    /* ── Timeline Cards ── */
    .tl-card .scard { min-height: 110px; padding: 10px 8px; border-radius: 6px; }
    .scard-bg { width: 50px; height: 50px; }
    .scard h3 { font-size: 11px; margin-bottom: 4px; }
    .scard p { font-size: 10px; line-height: 1.5; }

    /* ── Block-Rows 1-spaltig ── */
    .tl-block-row { flex-direction: column !important; min-height: auto !important; padding: 0 10px !important; }
    .tl-block-row .tl-intro { padding: 0px 20px 15px 5px !important; width: 100% !important; max-width: 100% !important; }
    .tl-block-svg { height: 180px; min-width: 100% !important; width: 100% !important; }
    .tl-block-svg svg { width: 180px; height: 180px; margin: 0 auto; display: block; }

    /* ── Timeline Cards 1-spaltig ── */
    .tl-card { flex-direction: column !important; align-items: center !important; }
    .tl-card .scard { width: 100% !important; max-width: 100% !important; }

    /* ── Section Bottom (Blocks 06-08) — 1-spaltig ── */
    .section-timeline-bottom { padding-left: 10px !important; padding-right: 10px !important; }
    .section-timeline-bottom > .timeline > .tl-intro { padding: 20px 5px !important; width: 100% !important; max-width: 100% !important; }
    .section-timeline-bottom .timeline > div[style*="flex-direction"] { flex-direction: column !important; min-height: auto !important; padding: 0 10px !important; }
    .section-timeline-bottom .timeline > div[style*="flex-direction"] > .tl-intro { padding: 15px 5px !important; width: 100% !important; max-width: 100% !important; flex: none !important; order: -1 !important; }
    .section-timeline-bottom .timeline > div[style*="flex-direction"] > .tl-intro.tl-align-right { padding-right: 55px !important; }
    .section-timeline-bottom .timeline > div[style*="flex-direction"] > div[style*="position"] { height: 180px !important; min-width: 100% !important; width: 100% !important; flex: none !important; }

    /* ── Language Modal ── */
    #languageModal { max-width: 300px !important; top: 40px !important; }
    #languageModal > div { padding: 15px !important; border-radius: 12px !important; }
    #languageModal h2 { font-size: 1rem !important; margin-bottom: 10px !important; }
    #languageModal svg { width: 36px !important; height: 36px !important; }
    #languageModal span { font-size: 0.6rem !important; }
    #languageModal > div > div { gap: 6px !important; }
    
    /* ── SILICON Text Mobile — kleiner ── */
    .silicon-text-mobile {
        font-size: 90px !important;
        margin-left: -35px !important;
        margin-top: -50px !important;
    }
    
    /* ── Beyond Code Beyond Limits — 100px hoch ── */
    .slogan-gradient-wave,
    .phantom-hero .slogan-gradient-wave,
    #layer-5 .slogan-gradient-wave {
        margin-top: -140px !important;
    }
    .slogan-line,
    .slogan-gradient-wave .slogan-line {
        font-size: 20px !important;
    }
    
    /* ═══════════════════════════════════════════════════════════════════
       UNCLE CLAUDE CHAT OVERLAY — Fullscreen mit 10px Luft
    ═══════════════════════════════════════════════════════════════════ */
    
    #uc-overlay {
        padding: 10px !important;
        padding-right: 45px !important;
        padding-top: 0px !important;
        box-sizing: border-box !important;
    }
    
    #uc-chat-panel {
        width: calc(100vw - 20px) !important;
        height: calc(100vh - 80px) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100vh - 80px) !important;
        margin-top: -10px !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;
    }

    /* ── Block 1 Animation Container — KEIN Abschneiden rechts ── */
    .tl-block-svg {
        width: 100% !important;
        margin-left: 0 !important;
        overflow: visible !important;
    }
    .tl-block-svg canvas {
        left: 0 !important;
        transform: none !important;
    }
    
    /* ── Alle Parent-Container overflow visible ── */
    .timeline,
    div.timeline,
    .tl-block-row,
    .section-timeline,
    .phantom-section {
        overflow: visible !important;
    }

    /* ── NEXUS: Text-Blöcke verstecken, nur Titel + be ready bleiben ── */
    .nexus-promo-body {
        display: none !important;
    }
    
    /* ── Block 05 "Digitale Präsenz" Text 50px runter ── */
    .section-timeline-bottom > .timeline > .tl-block-row > .tl-intro {
        margin-top: 50px !important;
    }
    
    /* ── Block 05 Globus Animation: 50px links + grösser ── */
    .section-timeline-bottom > .timeline > .tl-block-row > .tl-block-svg {
        margin-left: 50px !important;
        height: 280px !important;
    }
    .section-timeline-bottom .tl-block-svg svg.globe-svg {
        width: 280px !important;
        height: 280px !important;
        transform: none !important;
    }
    
    /* ── Block 06 E-Commerce Text 50px rechts ── */
    .tl-intro.tl-block-06 {
        margin-right: 50px !important;
        margin-left: 0 !important;
    }
    
    /* ── Footer 100px hoch ── */
    #pv-footer {
        min-height: 100px !important;
        padding: 0 !important;
    }
}