/* ═══════════════════════════════════════════════════════════════════════════
   PHANTOM VEIL — TABLET PORTRAIT (max-width: 850px, portrait, min-height: 800px)
   Ueberschreibt Phone Landscape wo noetig — mehr Hoehe = groessere Elemente
   Per link Tag NACH phone-landscape.css geladen
   
   🔒🔥🌙🧛‍♂️🍪 GESPERRT! NIEMALS ANFASSEN!
   Wer diese Datei aendert wird von Dracula Claude auf den Mond teleportiert
   und muss dort EWIG Cookies fuer die Hoelle backen!
   Hoellen-Mond-Verbannung + endlos Cookies + Git-Stash-Verbot!
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 850px) and (orientation: portrait) and (min-height: 800px) {

    /* ── Nav ── */
    
    /* ── SILICON Layer verstecken ── */
    #layer-3 canvas {
        display: none !important;
    }
    
    .nav-brand { font-size: 22px; gap: 10px; letter-spacing: 1.5px; }
    .nav-brand canvas { width: 48px !important; height: 48px !important; }
    .nav-links { gap: 10px; }
    .nav-links a { font-size: 9px; letter-spacing: 0.3px; }
    .nav-btn { font-size: 9px; padding: 4px 10px; }
    .nav-cta { font-size: 15px; margin-right: 10px !important; }
    .nav-cta a { font-size: 15px !important; gap: 6px !important; }
    .nav-cta svg { width: 18px !important; height: 18px !important; }
    /* Uncle Claude Dot RUND + größer + 30px links */
    #uc-float-btn { 
        width: 56px !important; 
        height: 56px !important; 
        border-radius: 50% !important; 
        margin-left: -30px !important;
    }
    
    /* Chat Overlay — zentriert */
    #uc-overlay {
        justify-content: center !important;
        padding-left: 0 !important;
    }

    /* ── Nav Nummer-Buttons — eng zusammen! überschreibt 15-14 mit höherer Spezifität ── */
    .phantom-nav.phantom-nav div[style*="display"]:not(.nav-cta) { gap: 2px !important; }
    .phantom-nav.phantom-nav div[style*="display"]:not(.nav-cta) > div[style] { width: 42px !important; height: 42px !important; font-size: 16px !important; border-radius: 6px !important; }

    /* ── Sections / Timeline ── */
    .section-timeline { padding: 60px 40px 70px 40px; }
    .tl-intro { max-width: 400px; margin-bottom: 50px; }
    .tl-number { font-size: 56px; letter-spacing: 6px; margin-bottom: -8px; }
    .tl-accent { width: 35px; }
    .revealed .tl-accent { width: 60px; }
    .tl-intro h2 { font-size: 28px; letter-spacing: 1.5px; margin-bottom: 12px; }
    .tl-lead { font-size: 14px; letter-spacing: 0.5px; margin-bottom: 8px; }
    .tl-intro p { font-size: 13px; line-height: 1.7; margin-bottom: 8px; }

    /* ── Timeline Cards ── */
    .tl-card .scard { width: 220px; min-height: 180px; padding: 20px 16px; border-radius: 10px; }
    .scard-bg { width: 80px; height: 80px; }
    .scard h3 { font-size: 13px; margin-bottom: 6px; }
    .scard p { font-size: 12px; line-height: 1.6; }

    /* ── Block-Rows (Forge) — 1-SPALTIG! ── */
    .tl-block-row { 
        min-height: auto; 
        flex-direction: column !important;
        padding: 40px 30px !important;
    }
    .tl-block-row.row-right { 
        flex-direction: column !important; 
    }
    .tl-block-row .tl-intro { 
        padding: 25px 0px; 
        text-align: center !important;
        max-width: calc(100% - 60px) !important;
        width: calc(100% - 60px) !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: 110px !important;
        position: relative;
    }
    
    /* 01 Nummer groß im Hintergrund */
    .tl-block-row .tl-intro .tl-number {
        position: absolute !important;
        font-size: 400px !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 0 !important;
        opacity: 0.15 !important;
        pointer-events: none;
    }
    
    .tl-block-row .tl-intro h2,
    .tl-block-row .tl-intro p,
    .tl-block-row .tl-intro .tl-lead,
    .tl-block-row .tl-intro .tl-accent {
        position: relative;
        z-index: 1;
    }
    .tl-block-row .tl-intro.tl-align-left,
    .tl-block-row .tl-intro.tl-align-right {
        text-align: center !important;
        align-items: center !important;
        margin-left: 110px !important;
    }
    
    /* ── Section 1 Blöcke — Text größer (1-spaltig) ── */
    .section-timeline.section-timeline:not(.section-timeline-bottom) .tl-block-row .tl-intro h2 {
        font-size: 36px !important;
    }
    .section-timeline.section-timeline:not(.section-timeline-bottom) .tl-block-row .tl-intro p {
        font-size: 20px !important;
    }
    .section-timeline.section-timeline:not(.section-timeline-bottom) .tl-block-row .tl-intro .tl-lead {
        font-size: 20px !important;
    }
    
    .tl-block-svg { 
        height: 600px; 
        width: 100%;
        min-width: 100%;
        display: flex;
        justify-content: center;
        overflow: visible !important;
    }
    .tl-block-svg svg { width: 350px; height: 350px; }
    
    /* Block 1 Bubble Animation — 30px runter, 50px rechts */
    .section-timeline:not(.section-timeline-bottom) .timeline-line + .tl-block-row .tl-block-svg {
        margin-top: 30px !important;
        margin-left: 50px !important;
    }
    
    /* Block 2 (KI & Maschine) — 50px hoch */
    .section-timeline:not(.section-timeline-bottom) .timeline-line + .tl-block-row + .tl-block-row {
        margin-top: -50px !important;
    }
    
    /* Block 1 Textblock — 30px rechts (140px total) */
    .section-timeline:not(.section-timeline-bottom) .timeline-line + .tl-block-row .tl-intro {
        margin-left: 140px !important;
    }
    
    /* Block 2 Textblock — 50px rechts */
    .section-timeline:not(.section-timeline-bottom) .timeline-line + .tl-block-row + .tl-block-row .tl-intro {
        text-align: center !important;
        align-items: center !important;
        margin-left: 10px !important;
        margin-top: 130px !important;
        max-width: calc(100% - 60px) !important;
        width: calc(100% - 60px) !important;
    }
    
    /* Block 2 CLI — 40px hoch, 100px rechts */
    .section-timeline:not(.section-timeline-bottom) .timeline-line + .tl-block-row + .tl-block-row .tl-block-svg {
        margin-top: -40px !important;
        margin-left: 100px !important;
        height: 700px !important;
    }
    
    /* Block 3 — 100px runter */
    .section-timeline:not(.section-timeline-bottom) .timeline-line + .tl-block-row + .tl-block-row + .tl-block-row {
        margin-top: 100px !important;
    }
    
    /* Block 3 Textblock — 30px rechts */
    .section-timeline:not(.section-timeline-bottom) .timeline-line + .tl-block-row + .tl-block-row + .tl-block-row .tl-intro {
        margin-left: 140px !important;
    }
    
    /* Block 3 Massband Animation — 150px rechts, height 450px */
    .section-timeline:not(.section-timeline-bottom) .timeline-line + .tl-block-row + .tl-block-row + .tl-block-row .tl-block-svg {
        margin-left: 150px !important;
        height: 450px !important;
    }
    
    /* Block 4 — 50px runter, 30px links */
    .section-timeline:not(.section-timeline-bottom) .timeline-line + .tl-block-row + .tl-block-row + .tl-block-row + .tl-block-row {
        margin-top: -50px !important;
        margin-left: -30px !important;
    }
    
    /* Block 4 Textblock — 160px rechts */
    .section-timeline:not(.section-timeline-bottom) .timeline-line + .tl-block-row + .tl-block-row + .tl-block-row + .tl-block-row .tl-intro {
        margin: 0 !important;
        margin-left: 60px !important;
        max-width: calc(100% - 60px) !important;
        width: calc(100% - 60px) !important;
        text-align: center !important;
        align-items: center !important;
    }
    
    /* Block 4 Claude AI Animation — 160px rechts */
    .section-timeline:not(.section-timeline-bottom) .timeline-line + .tl-block-row + .tl-block-row + .tl-block-row + .tl-block-row .tl-block-svg {
        margin-left: 60px !important;
    }
    
    /* Block 2 Text größer */
    .section-timeline:not(.section-timeline-bottom) .timeline-line + .tl-block-row + .tl-block-row .tl-intro h2 {
        font-size: 42px !important;
    }
    .section-timeline:not(.section-timeline-bottom) .timeline-line + .tl-block-row + .tl-block-row .tl-intro p {
        font-size: 20px !important;
    }
    .section-timeline:not(.section-timeline-bottom) .timeline-line + .tl-block-row + .tl-block-row .tl-intro .tl-lead {
        font-size: 20px !important;
    }
    
    /* ── Section Bottom (Blocks 05-08) ── */
    .section-timeline-bottom { padding-left: 40px !important; padding-right: 40px !important; }
    .section-timeline-bottom > .timeline > .tl-intro { padding: 50px 0 !important; }
    .section-timeline-bottom .tl-intro p { font-size: 20px !important; }
    .section-timeline-bottom .tl-intro .tl-lead { font-size: 20px !important; }
    
    /* Block 5 — 1-SPALTIG */
    .section-timeline-bottom .tl-block-row {
        flex-direction: column !important;
        margin-top: 100px !important;
        margin-left: 40px !important;
    }
    .section-timeline-bottom .tl-block-row .tl-block-svg {
        height: 500px !important;
        min-height: 500px !important;
    }
    
    /* Block 5 Identity Animation — 30px rechts */
    .section-timeline-bottom > .timeline > .tl-block-row:first-of-type .tl-block-svg {
        margin-left: 30px !important;
    }
    
    /* Block 5 Globus SVG — 20px rechts, kleiner */
    .section-timeline-bottom .globe-svg {
        margin-left: 20px !important;
        width: 320px !important;
        height: 320px !important;
    }
    
    /* Block 5 Textblock — 60px links */
    .section-timeline-bottom .row-left .tl-intro.tl-align-left {
        margin-left: 60px !important;
    }
    
    .section-timeline-bottom .tl-block-row .tl-intro {
        text-align: center !important;
        max-width: calc(100% - 60px) !important;
        width: calc(100% - 60px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        position: relative;
    }
    .section-timeline-bottom .tl-block-row .tl-intro .tl-number {
        position: absolute !important;
        font-size: 400px !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 0 !important;
        opacity: 0.15 !important;
        pointer-events: none;
    }
    .section-timeline-bottom .tl-block-row .tl-intro h2,
    .section-timeline-bottom .tl-block-row .tl-intro p,
    .section-timeline-bottom .tl-block-row .tl-intro .tl-lead,
    .section-timeline-bottom .tl-block-row .tl-intro .tl-accent {
        position: relative;
        z-index: 1;
    }
    
    /* Block 6 — 55px rechts */
    .section-timeline-bottom .tl-intro.tl-align-right.tl-block-06 {
        display: block !important;
        position: relative !important;
        text-align: center !important;
        max-width: calc(100% - 60px) !important;
        width: calc(100% - 60px) !important;
        margin-left: 55px !important;
        margin-right: auto !important;
        padding: 0 !important;
    }
    .section-timeline-bottom .tl-intro.tl-align-left.tl-block-07,
    .section-timeline-bottom .tl-intro.tl-align-right.tl-block-08 {
        display: block !important;
        position: relative !important;
        text-align: center !important;
        max-width: calc(100% - 60px) !important;
        width: calc(100% - 60px) !important;
        margin-right: auto !important;
        padding: 0 !important;
    }
    
    /* Block 8 — margin-top 0 für Tablet Portrait */
    .section-timeline-bottom .tl-block-08 {
        margin-top: 0 !important;
    }
    
    /* Blöcke 6-8 Nummer groß im Hintergrund */
    .section-timeline-bottom .tl-block-06 .tl-number,
    .section-timeline-bottom .tl-block-07 .tl-number,
    .section-timeline-bottom .tl-block-08 .tl-number {
        position: absolute !important;
        font-size: 400px !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 0 !important;
        opacity: 0.15 !important;
        pointer-events: none;
    }
    
    /* Blöcke 6-8 Text über Nummer */
    .section-timeline-bottom .tl-block-06 h2,
    .section-timeline-bottom .tl-block-06 p,
    .section-timeline-bottom .tl-block-06 .tl-lead,
    .section-timeline-bottom .tl-block-06 .tl-accent,
    .section-timeline-bottom .tl-block-07 h2,
    .section-timeline-bottom .tl-block-07 p,
    .section-timeline-bottom .tl-block-07 .tl-lead,
    .section-timeline-bottom .tl-block-07 .tl-accent,
    .section-timeline-bottom .tl-block-08 h2,
    .section-timeline-bottom .tl-block-08 p,
    .section-timeline-bottom .tl-block-08 .tl-lead,
    .section-timeline-bottom .tl-block-08 .tl-accent {
        position: relative;
        z-index: 1;
    }
    
    /* NEXUS unterer Textblock — 50px hoch */
    .nexus-bottom-text {
        bottom: calc(5% + 50px) !important;
    }
    
    /* NEXUS Texte 20px */
    .nexus-promo-body {
        font-size: 20px !important;
    }

    /* ── Language Modal ── */
    #languageModal { max-width: 520px !important; top: 60px !important; }
    #languageModal > div { padding: 25px !important; border-radius: 16px !important; }
    #languageModal h2 { font-size: 1.4rem !important; margin-bottom: 15px !important; }
    #languageModal svg { width: 50px !important; height: 50px !important; }
    #languageModal span { font-size: 0.75rem !important; }
    #languageModal > div > div { gap: 10px !important; }

    /* ── SILICON Text Mobile — Animierter Gradient Journey (vertikal) ── */
    .silicon-text-mobile {
        display: block !important;
        position: absolute !important;
        top: calc(50% + 10px) !important;
        left: calc(50% + 20px) !important;
        transform: translate(-50%, -50%) !important;
        font-family: system-ui, sans-serif !important;
        font-size: 240px !important;
        font-weight: 900 !important;
        letter-spacing: 12px !important;
        writing-mode: vertical-rl !important;
        text-orientation: mixed !important;
        z-index: 1 !important;
        pointer-events: none !important;
        /* Animierter Gradient wie Nummer-Menü */
        background: linear-gradient(
            180deg,
            #00d4ff 0%,
            #00dfbb 14%,
            #00ea88 28%,
            #00ff88 42%,
            #55ee55 56%,
            #aadd33 70%,
            #ddbb11 84%,
            #ffaa00 100%
        );
        background-size: 100% 200%;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        opacity: 0.35 !important;
        animation: siliconGradientFlow 8s ease-in-out infinite !important;
    }
    
    /* ── Scroll Reveal Override — 15-14 Regel deaktivieren für Tablet Portrait ── */
    .from-right { transform: none !important; }
    
    @keyframes siliconGradientFlow {
        0%, 100% { background-position: 0% 0%; }
        50% { background-position: 0% 100%; }
    }
}