@import url('phantom-veil-2k.css');
@import url('phantom-veil-4k.css');

/* ═══════════════════════════════════════════════════════════════════════════
   PHANTOM VEIL — FORGE SVG MEISTERWERKE
   Brothers in Code — Jedes SVG ein Unikat
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ LAYOUT: 2-Spalten Block-Rows (Text + SVG) ═══ */
.tl-block-row {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 500px;
    margin-bottom: 0;
    padding: 0 150px;
    position: relative;
}
.tl-block-row.row-left { flex-direction: row; }
.tl-block-row.row-right { flex-direction: row-reverse; }

.tl-block-row .tl-intro {
    flex: 1;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 80px 60px;
}

.tl-block-svg {
    flex: 1;
    min-width: 0;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.tl-block-svg svg {
    width: 500px;
    height: 500px;
    display: block;
}

/* Section Timeline ohne Padding */
.section-timeline {
    padding: 0;
}
/* Block 01 — 80px nach oben */
.section-timeline:not(.section-timeline-bottom) .timeline-line + .tl-block-row {
    margin-top: -80px;
}
/* Block 02 — 250px nach unten */
.section-timeline:not(.section-timeline-bottom) .timeline-line + .tl-block-row + .tl-block-row {
    margin-top: 250px;
}
/* Block 03 — 50px nach unten */
.section-timeline:not(.section-timeline-bottom) .timeline-line + .tl-block-row + .tl-block-row + .tl-block-row {
    margin-top: 50px;
}
/* Block 04 — 50px nach unten */
.section-timeline:not(.section-timeline-bottom) .timeline-line + .tl-block-row + .tl-block-row + .tl-block-row + .tl-block-row {
    margin-top: 50px;
}
/* Block 05 — 100px nach oben */
.section-timeline-bottom .timeline-line + .tl-block-row {
    margin-top: -100px;
}
/* Block 06 — 200px nach unten */
.section-timeline-bottom .tl-block-06 {
    margin-top: 200px !important;
}
/* Block 07 — 200px nach unten */
.section-timeline-bottom .tl-block-07 {
    margin-top: 200px !important;
}
/* Block 08 — 200px nach unten */
.section-timeline-bottom .tl-block-08 {
    margin-top: 200px !important;
}
.section-timeline .timeline {
    max-width: 100%;
}

/* Timeline-Line verstecken in Block-Row Sections */
.section-timeline-blocks .timeline-line { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   01 — DIE IDEENSCHMIEDE
   Kosmische Schmiede wo Ideen zu Code geschmiedet werden
   ═══════════════════════════════════════════════════════════════════════════ */

/* Astrolabe Ringe — langsame Rotation */
.forge-ring-outer { animation: forgeOrbit 80s linear infinite; transform-origin: 250px 250px; }
.forge-ring-inner { animation: forgeOrbit 55s linear infinite reverse; transform-origin: 250px 250px; }
.forge-ring-mid { animation: forgeOrbit 120s linear infinite; transform-origin: 250px 250px; }
@keyframes forgeOrbit { to { transform: rotate(360deg); } }

/* Tick-Markierungen drehen mit äusserem Ring */
.forge-ticks { animation: forgeOrbit 80s linear infinite; transform-origin: 250px 250px; }

/* Forge Core — atmendes Herz */
.forge-diamond-1 { animation: forgeBreathe 8s ease-in-out infinite; transform-origin: 250px 250px; }
.forge-diamond-2 { animation: forgeBreathe 8s ease-in-out infinite 4s; transform-origin: 250px 250px; }
.forge-hex { animation: forgeHexSpin 12s ease-in-out infinite; transform-origin: 250px 250px; }
.forge-core-pulse { animation: forgePulse 4s ease-in-out infinite; transform-origin: 250px 250px; }
.forge-center { animation: forgeCenterBeat 3s ease-in-out infinite; }

@keyframes forgeBreathe {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.12) rotate(8deg); }
}
@keyframes forgeHexSpin {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(30deg); }
}
@keyframes forgePulse {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.4); opacity: 0.6; }
}
@keyframes forgeCenterBeat {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* Neural-Nodes — sequentielles Pulsieren */
.forge-node { transform-origin: center; }
.forge-node-1 { animation: forgeNodePulse 5s ease-in-out infinite 0s; }
.forge-node-2 { animation: forgeNodePulse 5s ease-in-out infinite 0.6s; }
.forge-node-3 { animation: forgeNodePulse 5s ease-in-out infinite 1.2s; }
.forge-node-4 { animation: forgeNodePulse 5s ease-in-out infinite 1.8s; }
.forge-node-5 { animation: forgeNodePulse 5s ease-in-out infinite 2.4s; }
.forge-node-6 { animation: forgeNodePulse 5s ease-in-out infinite 3.0s; }
.forge-node-7 { animation: forgeNodePulse 5s ease-in-out infinite 3.6s; }
.forge-node-8 { animation: forgeNodePulse 5s ease-in-out infinite 4.2s; }
@keyframes forgeNodePulse {
    0%, 100% { opacity: 0.15; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.8); }
}

/* Neural-Pfade — zeichnen sich */
.forge-path-draw {
    stroke-dasharray: 300;
    animation: forgePathDraw 8s ease-in-out infinite;
}
.forge-path-draw-d { stroke-dasharray: 300; animation: forgePathDraw 8s ease-in-out infinite 2s; }
.forge-path-draw-dd { stroke-dasharray: 300; animation: forgePathDraw 8s ease-in-out infinite 4s; }
@keyframes forgePathDraw {
    0% { stroke-dashoffset: 300; opacity: 0.08; }
    50% { stroke-dashoffset: 0; opacity: 0.3; }
    100% { stroke-dashoffset: -300; opacity: 0.08; }
}

/* Connection Threads — sanftes Weben */
.forge-thread { stroke-dasharray: 8 12; animation: forgeWeave 6s linear infinite; }
.forge-thread-d { stroke-dasharray: 6 14; animation: forgeWeave 8s linear infinite 2s; }
.forge-thread-dd { stroke-dasharray: 4 16; animation: forgeWeave 10s linear infinite 4s; }
@keyframes forgeWeave { to { stroke-dashoffset: -40; } }

/* Orbiting Ideas — Geometrien kreisen */
.forge-idea-tri { animation: forgeOrbit 24s linear infinite; transform-origin: 250px 250px; }
.forge-idea-sq { animation: forgeOrbit 30s linear infinite reverse; transform-origin: 250px 250px; }
.forge-idea-pent { animation: forgeOrbit 36s linear infinite; transform-origin: 250px 250px; }
.forge-idea-hex { animation: forgeOrbit 28s linear infinite reverse; transform-origin: 250px 250px; }

/* Funken — reisen vom Kern nach aussen wie Glut einer Schmiede */
.forge-spark-1 { animation: forgeSpark1 6s ease-out infinite; }
.forge-spark-2 { animation: forgeSpark2 7s ease-out infinite 1.2s; }
.forge-spark-3 { animation: forgeSpark3 5.5s ease-out infinite 2.4s; }
.forge-spark-4 { animation: forgeSpark4 8s ease-out infinite 0.8s; }
.forge-spark-5 { animation: forgeSpark5 6.5s ease-out infinite 3.2s; }
.forge-spark-6 { animation: forgeSpark6 7.5s ease-out infinite 1.8s; }

@keyframes forgeSpark1 {
    0% { transform: translate(0, 0); opacity: 0.6; }
    100% { transform: translate(-130px, -200px); opacity: 0; }
}
@keyframes forgeSpark2 {
    0% { transform: translate(0, 0); opacity: 0.5; }
    100% { transform: translate(160px, -160px); opacity: 0; }
}
@keyframes forgeSpark3 {
    0% { transform: translate(0, 0); opacity: 0.55; }
    100% { transform: translate(180px, 100px); opacity: 0; }
}
@keyframes forgeSpark4 {
    0% { transform: translate(0, 0); opacity: 0.45; }
    100% { transform: translate(-100px, 190px); opacity: 0; }
}
@keyframes forgeSpark5 {
    0% { transform: translate(0, 0); opacity: 0.5; }
    100% { transform: translate(-190px, -60px); opacity: 0; }
}
@keyframes forgeSpark6 {
    0% { transform: translate(0, 0); opacity: 0.4; }
    100% { transform: translate(80px, -220px); opacity: 0; }
}

/* Code Symbole — subtiles Blinken */
.forge-code-1 { animation: forgeCodeFade 6s ease-in-out infinite; }
.forge-code-2 { animation: forgeCodeFade 6s ease-in-out infinite 1.5s; }
.forge-code-3 { animation: forgeCodeFade 6s ease-in-out infinite 3s; }
.forge-code-4 { animation: forgeCodeFade 6s ease-in-out infinite 4.5s; }
.forge-code-5 { animation: forgeCodeFade 8s ease-in-out infinite 2s; }
.forge-code-6 { animation: forgeCodeFade 8s ease-in-out infinite 5s; }
@keyframes forgeCodeFade {
    0%, 100% { opacity: 0.04; }
    50% { opacity: 0.18; }
}

/* Rays — subtiles Atmen */
.forge-rays { animation: forgeRayBreathe 6s ease-in-out infinite; transform-origin: 250px 250px; }
@keyframes forgeRayBreathe {
    0%, 100% { opacity: 0.1; transform: scale(1); }
    50% { opacity: 0.25; transform: scale(1.15); }
}

/* Grid Hexagons — kaum sichtbares Pulsieren */
.forge-grid { animation: forgeGridPulse 10s ease-in-out infinite; transform-origin: 250px 250px; }
@keyframes forgeGridPulse {
    0%, 100% { opacity: 0.03; transform: scale(1); }
    50% { opacity: 0.06; transform: scale(1.02) rotate(2deg); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   02 — PHILOSOPHIE — Schweizer Uhrwerk
   Präzision, Handwerk, kein 08/15
   ═══════════════════════════════════════════════════════════════════════════ */

/* Gear Ringe — gegenläufig wie echtes Uhrwerk */
.philo-gear-outer { animation: philoGear 90s linear infinite; transform-origin: 300px 300px; }
.philo-gear-mid { animation: philoGear 60s linear infinite reverse; transform-origin: 300px 300px; }
.philo-gear-inner { animation: philoGear 40s linear infinite; transform-origin: 300px 300px; }
@keyframes philoGear { to { transform: rotate(360deg); } }

/* Pendulum swing */
.philo-pendulum { animation: philoPendulum 4s ease-in-out infinite; transform-origin: 300px 300px; }
@keyframes philoPendulum {
    0%, 100% { transform: rotate(-12deg); }
    50% { transform: rotate(12deg); }
}

/* Balance Wheel — hin und her */
.philo-balance { animation: philoBalance 2.5s ease-in-out infinite; transform-origin: 300px 300px; }
@keyframes philoBalance {
    0%, 100% { transform: rotate(-15deg); }
    50% { transform: rotate(15deg); }
}

/* Hairspring — atmet */
.philo-hairspring { animation: philoSpring 2.5s ease-in-out infinite; transform-origin: 300px 300px; }
@keyframes philoSpring {
    0%, 100% { transform: scale(1) rotate(-5deg); }
    50% { transform: scale(1.08) rotate(5deg); }
}

/* Escapement — subtiles Ticken */
.philo-escapement { animation: philoEscape 1.5s steps(2) infinite; transform-origin: 300px 300px; }
@keyframes philoEscape {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(3deg); }
    100% { transform: rotate(0deg); }
}

/* Jewel Bearings — sequentielles Leuchten */
.philo-jewel-1 { animation: philoJewel 6s ease-in-out infinite 0s; }
.philo-jewel-2 { animation: philoJewel 6s ease-in-out infinite 1.5s; }
.philo-jewel-3 { animation: philoJewel 6s ease-in-out infinite 3s; }
.philo-jewel-4 { animation: philoJewel 6s ease-in-out infinite 4.5s; }
@keyframes philoJewel {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.3); }
}

/* Micro Gears — eigene Drehung */
.philo-micro-1 { animation: philoGear 15s linear infinite reverse; transform-origin: 390px 210px; }
.philo-micro-2 { animation: philoGear 20s linear infinite; transform-origin: 210px 390px; }
.philo-micro-3 { animation: philoGear 12s linear infinite reverse; transform-origin: 210px 210px; }

/* Center Diamond — atmet */
.philo-center-diamond { animation: philoCenterBreathe 4s ease-in-out infinite; transform-origin: 300px 300px; }
@keyframes philoCenterBreathe {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.15) rotate(45deg); }
}

/* Center Dot */
.philo-center-dot { animation: forgeCenterBeat 2s ease-in-out infinite; }

/* Diagonal Arme — sanftes Atmen */
.philo-diag { animation: philoDiagBreathe 8s ease-in-out infinite; transform-origin: 300px 300px; }
@keyframes philoDiagBreathe {
    0%, 100% { opacity: 0.6; transform: rotate(0deg); }
    50% { opacity: 1; transform: rotate(3deg); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   03 — MASS-SCHNEIDEREI — DNA Doppelhelix
   Code trifft auf Ihre DNA
   ═══════════════════════════════════════════════════════════════════════════ */

/* DNA Stränge — zeichnen sich endlos */
.tailor-strand-1 { stroke-dasharray: 800; animation: tailorDraw 12s linear infinite; }
.tailor-strand-2 { stroke-dasharray: 800; animation: tailorDraw 12s linear infinite 6s; }
@keyframes tailorDraw {
    0% { stroke-dashoffset: 800; }
    100% { stroke-dashoffset: -800; }
}

/* Querbalken — sequentielles Aufleuchten */
.tailor-rung-1 { animation: tailorRung 8s ease-in-out infinite 0s; }
.tailor-rung-2 { animation: tailorRung 8s ease-in-out infinite 0.5s; }
.tailor-rung-3 { animation: tailorRung 8s ease-in-out infinite 1s; }
.tailor-rung-4 { animation: tailorRung 8s ease-in-out infinite 1.5s; }
.tailor-rung-5 { animation: tailorRung 8s ease-in-out infinite 2s; }
.tailor-rung-6 { animation: tailorRung 8s ease-in-out infinite 2.5s; }
.tailor-rung-7 { animation: tailorRung 8s ease-in-out infinite 3s; }
.tailor-rung-8 { animation: tailorRung 8s ease-in-out infinite 3.5s; }
.tailor-rung-9 { animation: tailorRung 8s ease-in-out infinite 4s; }
.tailor-rung-10 { animation: tailorRung 8s ease-in-out infinite 4.5s; }
.tailor-rung-11 { animation: tailorRung 8s ease-in-out infinite 5s; }
.tailor-rung-12 { animation: tailorRung 8s ease-in-out infinite 5.5s; }
@keyframes tailorRung {
    0%, 100% { opacity: 0.06; }
    25% { opacity: 0.35; }
    50% { opacity: 0.06; }
}

/* Basen-Nodes — pulsieren in Paaren */
.tailor-base-1 { animation: tailorBase 6s ease-in-out infinite 0s; }
.tailor-base-2 { animation: tailorBase 6s ease-in-out infinite 1s; }
.tailor-base-3 { animation: tailorBase 6s ease-in-out infinite 2s; }
.tailor-base-4 { animation: tailorBase 6s ease-in-out infinite 3s; }
.tailor-base-5 { animation: tailorBase 6s ease-in-out infinite 4s; }
.tailor-base-6 { animation: tailorBase 6s ease-in-out infinite 5s; }
@keyframes tailorBase {
    0%, 100% { opacity: 0.15; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.5); }
}

/* Scanning Beam — wandert vertikal */
.tailor-scan { animation: tailorScan 6s ease-in-out infinite; }
@keyframes tailorScan {
    0% { transform: translateY(-250px); opacity: 0; }
    20% { opacity: 0.2; }
    50% { transform: translateY(0); opacity: 0.15; }
    80% { opacity: 0.2; }
    100% { transform: translateY(250px); opacity: 0; }
}

/* Messbänder — sanftes Atmen */
.tailor-measure { animation: tailorMeasure 10s ease-in-out infinite; }
.tailor-measure-r { animation: tailorMeasure 10s ease-in-out infinite 5s; }
@keyframes tailorMeasure {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Code Fragments — subtiles Faden */
.tailor-code-1 { animation: forgeCodeFade 7s ease-in-out infinite 0s; }
.tailor-code-2 { animation: forgeCodeFade 7s ease-in-out infinite 1.5s; }
.tailor-code-3 { animation: forgeCodeFade 7s ease-in-out infinite 3s; }
.tailor-code-4 { animation: forgeCodeFade 7s ease-in-out infinite 4.5s; }

/* ═══════════════════════════════════════════════════════════════════════════
   04 — KUENSTLICHE INTELLIGENZ — Neural Network
   Das denkende Netz
   ═══════════════════════════════════════════════════════════════════════════ */

/* Brain Outline — subtiles Atmen */
.neural-brain { animation: neuralBrain 8s ease-in-out infinite; }
@keyframes neuralBrain {
    0%, 100% { opacity: 0.06; }
    50% { opacity: 0.14; }
}

/* Neuron Ringe — Layer-weise pulsieren */
.neural-n1-1, .neural-n1-2, .neural-n1-3, .neural-n1-4 { animation: neuralNode 5s ease-in-out infinite; }
.neural-n2-1, .neural-n2-2, .neural-n2-3, .neural-n2-4 { animation: neuralNode 5s ease-in-out infinite 1s; }
.neural-n3-1, .neural-n3-2, .neural-n3-3 { animation: neuralNode 5s ease-in-out infinite 2s; }
.neural-n4-1, .neural-n4-2 { animation: neuralNode 5s ease-in-out infinite 3s; }
@keyframes neuralNode {
    0%, 100% { opacity: 0.2; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.15); }
}

/* Connections — Welle von links nach rechts */
.neural-conn-12 { animation: neuralConn 4s ease-in-out infinite; }
.neural-conn-23 { animation: neuralConn 4s ease-in-out infinite 1.2s; }
.neural-conn-34 { animation: neuralConn 4s ease-in-out infinite 2.4s; }
@keyframes neuralConn {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* Signal Pulses — wandern durch Netzwerk */
.neural-pulse-1 { animation: neuralFire1 5s ease-in-out infinite; }
.neural-pulse-2 { animation: neuralFire2 6s ease-in-out infinite 1s; }
.neural-pulse-3 { animation: neuralFire3 5s ease-in-out infinite 1.5s; }
.neural-pulse-4 { animation: neuralFire4 4s ease-in-out infinite 2.5s; }
.neural-pulse-5 { animation: neuralFire5 5s ease-in-out infinite 3.5s; }
@keyframes neuralFire1 {
    0%, 100% { cx: 140; cy: 260; opacity: 0.5; }
    50% { cx: 260; cy: 260; opacity: 0.8; }
}
@keyframes neuralFire2 {
    0%, 100% { cx: 140; cy: 340; opacity: 0.4; }
    50% { cx: 260; cy: 370; opacity: 0.7; }
}
@keyframes neuralFire3 {
    0%, 100% { cx: 260; cy: 260; opacity: 0.5; }
    50% { cx: 380; cy: 300; opacity: 0.8; }
}
@keyframes neuralFire4 {
    0%, 100% { cx: 380; cy: 300; opacity: 0.55; }
    50% { cx: 490; cy: 240; opacity: 0.9; }
}
@keyframes neuralFire5 {
    0%, 100% { cx: 380; cy: 300; opacity: 0.45; }
    50% { cx: 490; cy: 360; opacity: 0.8; }
}

/* Label */
.neural-label { animation: forgeCodeFade 10s ease-in-out infinite; }


/* ═══════════════════════════════════════════════════════════════════════════
   05 — DIGITALE PRÄSENZ — Lebendiger Globus
   Die Welt vernetzt — Daten reisen um den Planeten
   ═══════════════════════════════════════════════════════════════════════════ */

/* Globe — KEIN Spin auf dem ganzen SVG */
.globe-svg { transform-origin: 300px 300px; }

/* Äusserer Ring — atmet */
.globe-outer { animation: globeBreathe 8s ease-in-out infinite; transform-origin: 300px 300px; }
@keyframes globeBreathe {
    0%, 100% { transform: scale(1); opacity: 0.15; }
    50% { transform: scale(1.03); opacity: 0.25; }
}

/* Latitude Lines — gegenläufig pulsieren */
.globe-lat-1 { animation: globeLatPulse 6s ease-in-out infinite; }
.globe-lat-2 { animation: globeLatPulse 6s ease-in-out infinite 2s; }
.globe-lat-3 { animation: globeLatPulse 6s ease-in-out infinite 4s; }
@keyframes globeLatPulse {
    0%, 100% { opacity: 0.06; stroke-width: 0.5; }
    50% { opacity: 0.18; stroke-width: 0.8; }
}

/* Longitude Lines — versetzt */
.globe-lon-1 { animation: globeLatPulse 7s ease-in-out infinite 1s; }
.globe-lon-2 { animation: globeLatPulse 7s ease-in-out infinite 3s; }
.globe-lon-3 { animation: globeLatPulse 7s ease-in-out infinite 5s; }

/* Städte — sequentielles Aufleuchten wie Server-Pings */
.globe-city-1 { animation: globeCity 4s ease-in-out infinite 0s; }
.globe-city-2 { animation: globeCity 4s ease-in-out infinite 0.7s; }
.globe-city-3 { animation: globeCity 4s ease-in-out infinite 1.4s; }
.globe-city-4 { animation: globeCity 4s ease-in-out infinite 2.1s; }
.globe-city-5 { animation: globeCity 4s ease-in-out infinite 2.8s; }
.globe-city-6 { animation: globeCity 4s ease-in-out infinite 3.5s; }
@keyframes globeCity {
    0%, 100% { r: 3; opacity: 0.3; }
    50% { r: 6; opacity: 0.8; }
}

/* Ping Ringe — expandieren von Städten aus */
.globe-ping-1 { animation: globePing 3s ease-out infinite 0s; }
.globe-ping-2 { animation: globePing 3s ease-out infinite 1s; }
.globe-ping-3 { animation: globePing 3s ease-out infinite 2s; }
@keyframes globePing {
    0% { r: 4; opacity: 0.3; stroke-width: 1; }
    100% { r: 28; opacity: 0; stroke-width: 0.2; }
}

/* Flight Paths — Daten reisen als Lichtstreifen */
.globe-flight-1 { stroke-dasharray: 40 200; animation: globeFlight 4s linear infinite; }
.globe-flight-2 { stroke-dasharray: 40 200; animation: globeFlight 5s linear infinite 0.8s; }
.globe-flight-3 { stroke-dasharray: 40 200; animation: globeFlight 4.5s linear infinite 1.6s; }
.globe-flight-4 { stroke-dasharray: 40 200; animation: globeFlight 5.5s linear infinite 2.4s; }
.globe-flight-5 { stroke-dasharray: 40 200; animation: globeFlight 6s linear infinite 3.2s; }
.globe-flight-6 { stroke-dasharray: 40 200; animation: globeFlight 4s linear infinite 1.2s; }
@keyframes globeFlight {
    0% { stroke-dashoffset: 240; opacity: 0.1; }
    50% { opacity: 0.4; }
    100% { stroke-dashoffset: -240; opacity: 0.1; }
}

/* Orbit Ring — dash dreht sich */
.globe-orbit { animation: globeOrbitSpin 30s linear infinite; transform-origin: 300px 300px; }
@keyframes globeOrbitSpin { to { stroke-dashoffset: -120; } }

/* Satellite — kreist um den Globus */
.globe-sat { animation: globeSatOrbit 20s linear infinite; transform-origin: 300px 300px; }
@keyframes globeSatOrbit { to { transform: rotate(360deg); } }

/* Devices — dezentes Ein-/Ausblenden */
.globe-device-1 { animation: globeDevice 5s ease-in-out infinite; }
.globe-device-2 { animation: globeDevice 5s ease-in-out infinite 2.5s; }
@keyframes globeDevice {
    0%, 100% { opacity: 0.04; }
    50% { opacity: 0.12; }
}


/* ═══ ORGANIC ART — SVG Overflow ═══ */
.tl-block-svg svg { overflow: visible; }
.philo-svg, .tailor-svg, .neural-svg, .globe-svg { overflow: visible; }

/* ═══ Blocks 6-8: Standalone tl-intro — gleicher Abstand wie tl-block-row ═══ */
.section-timeline-bottom > .timeline > .tl-intro {
    max-width: none;
    padding: 80px 150px;
}



/* ═══ BLOCK 05 SPACING — Extra Margin unten ═══ */
.section-timeline-bottom .tl-block-row:first-of-type {
    margin-bottom: 50px;
}