:root{

	--space-black:#050B18;
	--deep-space:#081226;
	--cosmic-blue:#0F2144;

	--star-white:#FFFFFF;
	--star-gold:#F4D27A;
	--solar-gold:#FFD977;

	--nebula:#1A2F5B;

	--text-primary:#F3F6FF;
	--text-secondary:#B9C4D9;

	}
	
	section{
	padding:140px 0;
	position:relative;
	z-index:1;
	}
	
	section::after{

	content:"";

	position:absolute;

	bottom:-1px;
	left:0;

	width:100%;
	height:120px;

	background:linear-gradient(
	to bottom,
	transparent,
	#0f0f0f
	);

	pointer-events:none;

	}

	section::before{

	content:"";

	position:absolute;

	left:0;
	right:0;
	top:-80px;
	height:80px;

	background:linear-gradient(
	to bottom,
	transparent,
	#0f0f0f
	);

	pointer-events:none;

	}
        * { box-sizing: border-box; }

	body{

	font-family:'Inter',sans-serif;

	font-size:16.5px;

	line-height:1.72;

	letter-spacing:0.2px;

	color:#e6ebf0;

	background:

	radial-gradient(circle at 20% 30%, rgba(255,255,255,0.08), transparent 40%),
	radial-gradient(circle at 80% 60%, rgba(244,210,122,0.08), transparent 50%),
	radial-gradient(circle at 50% 80%, rgba(255,255,255,0.04), transparent 60%),

	linear-gradient(
	180deg,
	#050B18,
	#0B162B,
	#050B18
	);

	margin:0;
	padding:0;

	overflow-x:hidden;

	position:relative;

	scroll-behavior:smooth;

	padding-top:86px;

	/* Typografie Premium Rendering */

	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;

	text-rendering:optimizeLegibility;

	}

		h1,h2,h3{

		  font-family:var(--font-heading, 'Space Grotesk', sans-serif);

		  font-weight:700;

		  line-height:var(--line-heading, 1.2);

		  letter-spacing:var(--headline-spacing, 0.3px);

		  color:#fff;

		}
		
		p{

		color:var(--text-secondary);

		font-size:1.02rem;

		line-height:1.75;

		}
		
		h1{
		font-size:clamp(2.4rem,4.2vw,3.4rem);
		}

		h2{
		font-size:clamp(1.9rem,3vw,2.4rem);
		}

		h3{
		font-size:1.35rem;
		}

		a {
		text-decoration: none;
		color: var(--star-gold);
		}

		a:hover {
		color: var(--metal-silver);
		}

		/* ==============================
		   ULTRA PREMIUM NAVBAR
		============================== */
		.navbar{

		position:fixed;

		background:

		linear-gradient(
		180deg,
		rgba(5,11,24,0.96),
		rgba(7,16,38,0.94)
		);

		backdrop-filter:blur(22px);
		-webkit-backdrop-filter:blur(22px);

		padding:16px 0;

		border-bottom:1px solid rgba(244,210,122,0.28);

		box-shadow:

		0 30px 120px rgba(0,0,0,0.95),
		0 0 60px rgba(244,210,122,0.12);

		transition:
		background .35s ease,
		box-shadow .35s ease;

		}


		/* ==============================
		   SUBTLE CYBER LINE
		============================== */

		.navbar::after{

		content:"";

		position:absolute;

		left:0;
		bottom:0;

		width:100%;
		height:1px;

		background:linear-gradient(
		90deg,
		transparent,
		rgba(244,210,122,0.75),
		rgba(255,255,255,0.55),
		transparent
		);

		opacity:0.9;

		}


		/* ==============================
		   BRAND
		============================== */

		.navbar-brand{

		font-size:2rem;

		font-weight:700;

		letter-spacing:0.25px;

		background:linear-gradient(
		90deg,
		#ffffff,
		#d8dee7,
		#aeb7c1,
		#ffffff
		);

		background-size:200%;

		-webkit-background-clip:text;
		-webkit-text-fill-color:transparent;

		animation:brandFlow 8s linear infinite;

		transition:
		transform 0.25s ease,
		filter 0.25s ease;

		text-decoration:none !important;
		border-bottom:none !important;
		outline:none !important;

		user-select:none;

		}

		@keyframes brandFlow{

		0%{background-position:0%}
		100%{background-position:200%}

		}

		.navbar-brand:hover{

		transform:translateY(-2px);

		filter:drop-shadow(
		0 0 16px rgba(244,210,122,0.55)
		);

		}

		.navbar-brand:focus,
		.navbar-brand:active{
		outline:none !important;
		}


		/* ==============================
		   NAV LINKS
		============================== */

		.navbar-nav .nav-item .nav-link{

		color:#cfd6dd;

		margin-right:22px;

		font-weight:500;

		letter-spacing:0.35px;

		position:relative;

		padding:6px 0;

		transition:
		color 0.25s ease,
		transform 0.25s ease;

		}


		/* ==============================
		   HOVER EFFECT
		============================== */

		.navbar-nav .nav-link:hover{

		color:#F4D27A;

		transform:translateY(-1px);

		}


		/* ==============================
		   ANIMATED UNDERLINE
		============================== */

		.navbar-nav .nav-link::before{

		content:"";

		position:absolute;

		left:0;
		bottom:-6px;

		width:0%;
		height:2px;

		background:linear-gradient(
		90deg,
		#F4D27A,
		#D8DEE7
		);

		border-radius:2px;

		transition:width 0.35s ease;

		}

		.navbar-nav .nav-link:hover::before{

		width:100%;

		}


		/* ==============================
		   ACTIVE STATE
		============================== */

		.navbar-nav .nav-link.active{

		color:#F4D27A;

		}

		.navbar-nav .nav-link.active::before{

		width:100%;

		}


		/* ==============================
		   MOBILE NAVBAR
		============================== */

		@media (max-width:768px){

		.navbar-collapse{

		background:rgba(10,10,12,0.95);

		backdrop-filter:blur(12px);

		padding:20px;

		border-radius:14px;

		margin-top:12px;

		border:1px solid rgba(255,255,255,0.06);

		box-shadow:
		0 30px 80px rgba(0,0,0,0.9);

		}

		.navbar-nav .nav-link{

		margin-right:0;

		padding:12px 0;

		font-size:1.05rem;

		}

		}


		/* ==============================
		   NAVBAR HOVER GLOW
		============================== */

		.navbar:hover{

		box-shadow:

		0 30px 90px rgba(0,0,0,0.95),
		0 0 70px rgba(244,210,122,0.18),
		inset 0 1px 0 rgba(255,255,255,0.08);

		}

		.hero{

		background:

		radial-gradient(
		circle at 20% 30%,
		rgba(255,255,255,0.08),
		transparent 40%
		),

		radial-gradient(
		circle at 80% 70%,
		rgba(244,210,122,0.08),
		transparent 45%
		),

		radial-gradient(
		circle at 50% 10%,
		rgba(255,255,255,0.04),
		transparent 55%
		),

		linear-gradient(
		135deg,
		#050B18,
		#0E1628,
		#050B18
		);

		height:calc(100vh - 86px);

		position:relative;

		display:flex;

		align-items:center;

		justify-content:center;

		text-align:center;

		overflow:hidden;

		}

		.hero::after{

			content:"";

			position:absolute;

			inset:-20%;

			background:

			/* 🔥 NEU: dunkle Basis für Kontrast */
			radial-gradient(
			circle at 50% 40%,
			rgba(0,0,0,0.55),
			transparent 60%
			),

			/* GOLD reduziert */
			radial-gradient(
			circle at 30% 20%,
			rgba(244,210,122,0.12),
			transparent 55%
			),

			/* WEISS stark reduziert (war Problem!) */
			radial-gradient(
			circle at 70% 70%,
			rgba(255,255,255,0.08),
			transparent 60%
			),

			/* Tiefe behalten */
			radial-gradient(
			circle at 50% 40%,
			rgba(26,47,91,0.28),
			transparent 65%
			);

			filter:blur(70px);

			opacity:0.85;

			animation:heroAtmosphere 18s ease-in-out infinite alternate;

			pointer-events:none;

		}
				
		.hero::before{

		content:"";

		position:absolute;

		inset:-65%;

		background:

		radial-gradient(
		circle at 35% 25%,
		rgba(255,255,255,0.28),
		transparent 60%
		),

		radial-gradient(
		circle at 75% 60%,
		rgba(244,210,122,0.26),
		transparent 65%
		),

		radial-gradient(
		circle at 25% 80%,
		rgba(255,255,255,0.14),
		transparent 70%
		),

		radial-gradient(
		circle at 60% 20%,
		rgba(244,210,122,0.18),
		transparent 70%
		);

		filter:blur(150px);

		opacity:0.9;

		animation:heroDepth 28s ease-in-out infinite alternate;

		pointer-events:none;

		z-index:0;

		}

		@keyframes heroDepth{

		0%{
		transform:translateY(-80px) scale(1);
		}

		100%{
		transform:translateY(80px) scale(1.1);
		}

		}

        .hero .hero-content {
            position: relative;
            z-index: 1;
            color: #fff;
            animation: fadeIn 3s ease-out;
            padding: 0 16px;
        }

		.hero h1{

		font-size:clamp(2rem,4.2vw,3.6rem);

		font-weight:700;

		letter-spacing:-0.6px;

		text-wrap:balance;

		line-height:1.15;

		max-width:900px;

		margin-left:auto;
		margin-right:auto;

		background:linear-gradient(
		90deg,
		#ffffff,
		#d8dee7,
		#aeb7c1,
		#ffffff
		);

		background-size:220%;

		-webkit-background-clip:text;
		-webkit-text-fill-color:transparent;

		animation:heroGradientFlow 9s linear infinite;

		}

		.hero p{

		font-size:1.22rem;

		max-width:720px;

		margin:0 auto 34px;

		line-height:1.72;

		color:#EAF1FF;

		letter-spacing:0.15px;

		animation:slideUp 3s ease-out;

		text-shadow:
			0 2px 10px rgba(0,0,0,0.75),
			0 0 18px rgba(0,0,0,0.35);

		}

		.hero a{

		display:inline-block;

		background:linear-gradient(
		135deg,
		#F4D27A,
		#D8DEE7,
		#FFFFFF
		);

		color:#050B18;

		padding:14px 32px;

		font-size:1.05rem;
		font-weight:600;

		letter-spacing:0.6px;
		text-transform:uppercase;

		border-radius:40px;

		border:1px solid rgba(255,255,255,0.25);

		backdrop-filter:blur(4px);

		box-shadow:

		0 12px 40px rgba(244,210,122,0.35),
		0 0 60px rgba(255,255,255,0.15),
		inset 0 1px 0 rgba(255,255,255,0.6);

		transition:

		transform 0.25s ease,
		box-shadow 0.25s ease,
		background 0.25s ease;

		position:relative;
		overflow:hidden;

		}
		
		
		.hero a::after{

		content:"";

		position:absolute;

		top:0;
		left:-120%;

		width:120%;
		height:100%;

		background:linear-gradient(
		120deg,
		transparent,
		rgba(255,255,255,0.35),
		transparent
		);

		transition:transform .7s ease;

		}

		.hero a:hover::after{

		transform:translateX(220%);

		}

			.hero a:hover{

			transform:
			translateY(-5px)
			scale(1.04);

			background:linear-gradient(
			135deg,
			#FFE8A3,
			#E6EDF5,
			#FFFFFF
			);

			box-shadow:

			0 25px 80px rgba(244,210,122,0.55),
			0 0 120px rgba(255,255,255,0.35),
			inset 0 1px 0 rgba(255,255,255,0.8);

			}

        .animated-bg {
            position: absolute;
            inset: 0;
            z-index: 0;
            overflow: hidden;
            background: linear-gradient(135deg, #0f0f0f, #1c1c1c);
        }
		
		.animated-bg .circle{

		position:absolute;

		border-radius:50%;

		background:
		radial-gradient(
		circle at 30% 30%,
		rgba(255,255,255,0.65),
		rgba(244,210,122,0.45),
		rgba(26,47,91,0.35),
		transparent 70%
		);

		box-shadow:
		0 0 60px rgba(244,210,122,0.55),
		0 0 120px rgba(244,210,122,0.25),
		0 0 200px rgba(26,47,91,0.35);

		filter:blur(1px);

		/* PERFORMANCE FIX */
		will-change: transform;
		transform: translateZ(0);
		backface-visibility: hidden;

		animation:
		orbitalFloat 28s ease-in-out infinite,
		spherePulse 8s ease-in-out infinite;

		}

        .animated-bg .circle:nth-child(1) {
		width:260px;
		height:260px;
		top:12%;
		left:14%;
		animation-duration:32s,9s;
		}

        .animated-bg .circle:nth-child(2) {
		width:180px;
		height:180px;
		top:28%;
		left:82%;
		animation-duration:26s,7s;
		}

        .animated-bg .circle:nth-child(3) {
		width:340px;
		height:340px;
		top:62%;
		left:44%;
		animation-duration:38s,11s;
		}

		@keyframes orbitalFloat{

		0%{ transform: translate3d(0,0,0) scale(1); }

		25%{ transform: translate3d(60px,-40px,0) scale(1.03); }

		50%{ transform: translate3d(-40px,80px,0) scale(1.05); }

		75%{ transform: translate3d(-80px,-40px,0) scale(1.03); }

		100%{ transform: translate3d(0,0,0) scale(1); }

		}

		#services{

		background:

		linear-gradient(
		90deg,
		#050B18 0%,
		#0F2144 35%,
		#1A2F5B 65%,
		#081226 100%
		);

		color:#fff;

		}
		
		#services::after{

		content:"";
		position:absolute;
		inset:0;

		background:

		linear-gradient(
		rgba(244,210,122,0.10) 1px,
		transparent 1px
		),

		linear-gradient(
		90deg,
		rgba(26,47,91,0.14) 1px,
		transparent 1px
		);

		background-size:140px 140px;

		opacity:0.28;

		pointer-events:none;

		transform:perspective(900px) rotateX(58deg);

		transform-origin:top;

		animation:techGridMove 22s linear infinite;

		}

		#services h2{

		font-size:2.4rem;

		letter-spacing:0.4px;

		text-align:center;

		margin-left:auto;
		margin-right:auto;

		background:linear-gradient(
		90deg,
		#FFFFFF,
		#D8DEE7,
		#F4D27A
		);

		-webkit-background-clip:text;
		-webkit-text-fill-color:transparent;

		position:relative;

		}
		
		.services-intro{

		
		text-align:center;

		max-width:980px;

		margin:0 auto 40px;

		color:#F2F5FB;

		font-size:1.05rem;

		line-height:1.75;

		letter-spacing:0.2px;

		text-shadow:
		0 1px 8px rgba(0,0,0,0.35),
		0 0 18px rgba(26,47,91,0.35);


		}
		
		.services-title{

		max-width:900px;

		margin-left:auto;
		margin-right:auto;

		text-wrap:balance;

		}
		

		#services h2::after{

		content:"";

		display:block;

		width:140px;
		height:2px;

		margin:16px auto 0;

		background:linear-gradient(
		90deg,
		transparent,
		rgba(244,210,122,0.85),
		transparent
		);

		}

        /* WICHTIG: Grid statt Flex -> keine Überlappungen, sauberes Wrapping */
        #services .service-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 24px;
            align-items: stretch;
            margin-top: 18px;
        }
		       

        @media (max-width: 768px) {

            #services .service-content {
                grid-template-columns: 1fr;
            }

        }
		
		@media (max-width:768px){

		#contact h2{

		font-size:1.7rem;

		line-height:1.3;

		max-width:100%;

		padding:0 10px;

		white-space:normal;

		word-break:break-word;

		text-align:center;

		}

		}
		
		#contact .container{
		  overflow:visible;
		}

		#services .service-box{

		display:flex;
		flex-direction:column;

		height:100%;

		background:

		linear-gradient(
		180deg,
		rgba(255,255,255,0.12),
		rgba(255,255,255,0.03)
		),

		linear-gradient(
		135deg,
		rgba(8,18,38,0.92),
		rgba(15,33,68,0.88),
		rgba(244,210,122,0.08)
		);

		padding:34px 28px;

		border-radius:24px;

		border:1px solid rgba(244,210,122,0.25);

		box-shadow:
		0 30px 90px rgba(0,0,0,0.82),
		0 80px 220px rgba(0,0,0,0.96),
		0 0 140px rgba(26,47,91,0.35),
		0 0 60px rgba(244,210,122,0.10),
		inset 0 1px 0 rgba(255,255,255,0.10);

		backdrop-filter:blur(22px);

		position:relative;
		
        overflow:visible;  		
	

		transition:
		transform .55s cubic-bezier(.16,1,.3,1),
		box-shadow .55s cubic-bezier(.16,1,.3,1),
		border-color .35s ease;

		}
		
		#services .service-box::before{

		content:"";

		position:absolute;

		inset:-1px;

		border-radius:24px;

		background:

		conic-gradient(
		from 120deg,
		transparent,
		rgba(244,210,122,0.85),
		rgba(255,255,255,0.55),
		rgba(26,47,91,0.45),
		transparent 75%
		);

		opacity:0.35;

		filter:blur(8px);

		transition:
		opacity .5s ease,
		transform .6s cubic-bezier(.16,1,.3,1);

		pointer-events:none;

		z-index:-1;

		}

		#services .service-box:hover::before{

		opacity:0.65;

		transform:rotate(18deg) scale(1.05);

		}

		#services .service-box::after{

		content:"";

		position:absolute;

		top:-60%;
		left:-80%;

		width:150%;
		height:260%;

		background:linear-gradient(
		120deg,
		transparent,
		rgba(255,255,255,0.18),
		transparent
		);

		transform:rotate(24deg);

		opacity:0;

		transition:
		opacity .6s ease,
		left .9s cubic-bezier(.16,1,.3,1);

		pointer-events:none;

		}

		#services .service-box:hover::after{

		opacity:0.45;

		left:-10%;

		}
				
		#services .service-box:hover{

		transform:
		translateY(-16px)
		scale(1.035)
		perspective(1200px)
		rotateX(2deg);

		border-color:rgba(244,210,122,0.55);

		box-shadow:

		0 70px 200px rgba(0,0,0,0.96),

		0 0 180px rgba(244,210,122,0.35),

		0 0 90px rgba(26,47,91,0.55),

		inset 0 1px 0 rgba(255,255,255,0.22);

		}
				
		#services .service-box:hover::after{

		opacity:1;

		transform:scale(1.03);

		}
		
		#services .service-box:hover i{

		filter:

		drop-shadow(0 0 28px rgba(244,210,122,0.75))
		drop-shadow(0 0 60px rgba(26,47,91,0.55));

		}

       
		#services .service-box h3{

		font-size:1.55rem;

		margin-bottom:14px;

		font-weight:700;

		background:linear-gradient(
		90deg,
		#F4D27A,
		#FFFFFF
		);

		-webkit-background-clip:text;
		-webkit-text-fill-color:transparent;

		}

		#services .service-box p{

		font-size:1.03rem;

		line-height:1.75;

		margin-bottom:10px;

		color:var(--text-secondary);

		letter-spacing:0.2px;

		}

		#services .service-box ul{

		padding-left:18px;

		margin:10px 0 0;

		color:#F3F6FF;

		font-size:0.98rem;

		line-height:1.75;

		}

        #services .service-box li{

		margin-bottom:10px;

		color:#E2E8F5;

		line-height:1.75;

		}
		
		/* ===============================
   SERVICE DETAILS TOGGLE
		================================ */

		.service-details{

		max-height:0;

		overflow:hidden;

		opacity:0;

		transition:
		max-height .6s ease,
		opacity .4s ease;

		}

		.service-box.active .service-details{

		max-height:2000px;

		opacity:1;

		}

		.service-toggle{

		margin-top:auto;

		align-self:center;

		background:transparent;

		border:1px solid rgba(244,210,122,0.5);

		color:#F4D27A;

		padding:7px 16px;

		border-radius:20px;

		font-size:0.8rem;

		cursor:pointer;

		transition:
		transform .25s ease,
		background .25s ease,
		box-shadow .25s ease;

		}

		.service-toggle:hover{

		background:rgba(244,210,122,0.15);

		transform:translateY(-2px);

		box-shadow:0 0 14px rgba(244,210,122,0.3);

		}

		.pill{

		position:relative;

		display:inline-flex;
		align-items:center;
		justify-content:center;

		padding:7px 14px;

		border-radius:999px;

		font-size:0.76rem;
		font-weight:600;

		letter-spacing:0.35px;

		color:#cbe8ff;

		border:1px solid rgba(80,150,255,0.35);

		background:

		linear-gradient(
		135deg,
		rgba(244,210,122,0.35),
		rgba(255,255,255,0.15)
		),

		rgba(20,20,24,0.65);

		backdrop-filter:blur(6px);

		box-shadow:

		0 0 18px rgba(30,107,255,0.18),

		inset 0 1px 0 rgba(255,255,255,0.12);

		transition:
		transform .28s ease,
		box-shadow .28s ease,
		border-color .28s ease;

		overflow:hidden;

		}
		
		.pill::after{

		content:"";

		position:absolute;

		top:0;
		left:-120%;

		width:120%;
		height:100%;

		background:linear-gradient(
		120deg,
		transparent,
		rgba(255,255,255,0.35),
		transparent
		);

		transition:transform .7s ease;

		}

		.pill:hover::after{

		transform:translateX(220%);

		}

		.pill:hover{

		transform:
		translateY(-3px)
		scale(1.05);

		border-color:rgba(244,210,122,0.65);

		box-shadow:

		0 0 40px rgba(244,210,122,0.45),
		0 0 22px rgba(26,47,91,0.45),

		inset 0 1px 0 rgba(255,255,255,0.35);

		}
		

		#contact{

		background:

		linear-gradient(
		180deg,
		#081226,
		#0F2144,
		#081226
		),

		radial-gradient(
		circle at 25% 30%,
		rgba(244,210,122,0.10),
		transparent 60%
		),

		radial-gradient(
		circle at 80% 70%,
		rgba(255,255,255,0.05),
		transparent 65%
		);

		text-align:center;

		color:#fff;

		position:relative;

		overflow:hidden;

		}
		
		#contact::after{

		content:"";
		position:absolute;
		inset:0;

		background:

		linear-gradient(
		rgba(244,210,122,0.07) 1px,
		transparent 1px
		),

		linear-gradient(
		90deg,
		rgba(255,255,255,0.05) 1px,
		transparent 1px
		);

		background-size:150px 150px;

		opacity:0.20;

		pointer-events:none;

		transform:perspective(900px) rotateX(60deg);

		transform-origin:top;

		animation:techGridMove 30s linear infinite;

		}
		
		
		#contact::before{

		content:"";

		position:absolute;

		inset:-40%;

		background:

		radial-gradient(
		circle at 40% 20%,
		rgba(26,47,91,0.35),
		transparent 60%
		),

		radial-gradient(
		circle at 70% 80%,
		rgba(244,210,122,0.18),
		transparent 60%
		);

		filter:blur(120px);

		opacity:0.8;

		animation:ambientFloat 40s ease-in-out infinite alternate;

		pointer-events:none;

		}

		#contact h2{

		font-size:2.5rem;

		margin-bottom:40px;

		text-transform:uppercase;

		background:linear-gradient(
		90deg,
		#F4D27A,
		#FFFFFF,
		#F4D27A
		);

		-webkit-background-clip:text;
		-webkit-text-fill-color:transparent;

		letter-spacing:0.6px;

		text-shadow:
		0 0 30px rgba(244,210,122,0.35);

		animation:none;

		}

        .contact-form {
            background: rgba(255, 255, 255, 0.1);
            padding: 40px;
            border-radius: 20px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            position: relative;
            overflow: hidden;
            max-width: 800px;
            margin: 0 auto;
            text-align: left;
        }

        .contact-form input, .contact-form textarea {
            width: 100%;
            padding: 15px;
            margin: 15px 0;
            border: none;
            border-radius: 5px;
            background: rgba(255, 255, 255, 0.2);
            color: #fff;
            font-size: 1rem;
        }

		.contact-form button{

		background:linear-gradient(
		135deg,
		#F4D27A,
		#FFFFFF
		);

		color:#050B18;

		padding:15px 30px;

		border:none;

		border-radius:50px;

		cursor:pointer;

		font-size:1.2rem;

		box-shadow:
		0 12px 40px rgba(244,210,122,0.35),
		0 0 40px rgba(255,255,255,0.15);

		transition:
		transform 0.25s ease,
		box-shadow 0.25s ease;

		}

		.contact-form button:hover{

		transform:translateY(-5px);

		box-shadow:
		0 20px 60px rgba(244,210,122,0.55),
		0 0 80px rgba(255,255,255,0.25);

		}

		footer{

		background:

		linear-gradient(
		180deg,
		#050B18,
		#081226
		),

		radial-gradient(
		circle at 50% 0%,
		rgba(244,210,122,0.12),
		transparent 60%
		);

		color:#d8dee7;

		padding:40px 0;

		text-align:center;

		position:relative;

		border-top:1px solid rgba(244,210,122,0.25);

		box-shadow:

		0 -40px 120px rgba(0,0,0,0.85),
		0 0 60px rgba(244,210,122,0.10);

		}

		footer p{

		margin:6px 0;

		font-size:0.95rem;

		color:#b9c4d9;

		}

		footer a{

		color:#F4D27A;

		text-decoration:none;

		font-weight:500;

		transition:
		color .25s ease,
		text-shadow .25s ease;

		}

		footer a:hover{

		color:#ffffff;

		text-shadow:0 0 14px rgba(244,210,122,0.55);

		}

		.company-info{

		background:linear-gradient(
		180deg,
		#121212,
		#0f0f0f
		);

		color:#fff;

		padding:40px 0;

		text-align:center;

		border-top:1px solid rgba(255,255,255,0.04);

		}

        .company-info p {
            margin: 5px 0;
            font-size: 1rem;
            line-height: 1.5;
        }

        .company-info span{
		font-weight:600;
		color:#F4D27A;
		}

		#privacy-policy-link{

		position:fixed;
		right:12px;
		bottom:130px;

		z-index:1050;

		display:none;

		}

		/* Icon Design */

		#privacy-policy-link a{

		display:flex;
		align-items:center;
		justify-content:center;

		width:42px;
		height:42px;

		border-radius:50%;

		background:rgba(20,20,20,0.85);

		border:1px solid rgba(255,255,255,0.15);

		color:#F4D27A;

		font-size:18px;

		backdrop-filter:blur(8px);

		transition:
		transform .25s ease,
		box-shadow .25s ease,
		color .25s ease;

		}

		/* Hover Effekt */

		#privacy-policy-link a:hover{

		transform:translateY(-2px);

		color:#FFFFFF;

		box-shadow:
		0 0 18px rgba(244,210,122,0.45);

		}

		/* COOKIE BANNER */

		#cookie-banner {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: rgba(20,30,48,0.96);
		color: white;
		text-align: center;
		padding: 20px 14px;
		z-index: 1200;
		display: none;
		border-top: 1px solid rgba(255,255,255,0.15);
		backdrop-filter: blur(10px);
		}

		/* Button Container */

		.cookie-buttons{
		margin-top:12px;
		}

		/* Buttons DSGVO konform */

		#cookie-banner .btn-cookie {
		background:#007bff;
		color:white;
		margin:6px;
		padding:10px 18px;
		border:none;
		border-radius:8px;
		cursor:pointer;
		font-weight:600;
		transition:opacity 0.2s;
		}

		#cookie-banner .btn-cookie:hover{
		opacity:0.85;
		}

		/* Cookie Icon */

		#cookie-icon{

		position:fixed;

		right:12px;
		bottom:80px;

		width:42px;
		height:42px;

		border-radius:50%;

		background:rgba(20,20,20,0.85);

		border:1px solid rgba(255,255,255,0.15);

		color:#F4D27A;

		font-size:18px;

		display:flex;
		align-items:center;
		justify-content:center;

		cursor:pointer;

		backdrop-filter:blur(8px);

		z-index:1050;

		display:none;

		transition:
		transform .25s ease,
		box-shadow .25s ease,
		color .25s ease;

		}
		
		#cookie-icon:hover{

		transform:translateY(-2px);

		color:#FFFFFF;

		box-shadow:
		0 0 18px rgba(244,210,122,0.45);

		}

		/* MOBILE */

		
			@media (max-width:768px){

			  #cookie-banner{
				padding:20px 16px;
				font-size:14px;
				line-height:1.5;
			  }

			  #cookie-banner p{
				margin-bottom:10px;
			  }

			  #cookie-banner .btn-cookie{
				width:100%;
				display:block;
				margin:8px 0;
			  }

			  #cookie-icon{
				bottom:20px;
			  }

			}

			/* globale Button Styles */

			#cookie-banner .btn-cookie{
			  display:block;
			  width:100%;
			  margin:8px 0;
			}

			#accept-cookies,
			#reject-cookies,
			#revoke-cookies{
			  background:#007bff;
			  color:white;
			}

		@media (max-width: 768px) {
			body { 
				padding-top: 78px;
				padding-bottom: 80px;
			}

			.navbar-nav .nav-item .nav-link { margin-right: 10px; font-size: 1rem; }

			.hero {min-height: calc(100vh - 86px); }

			.hero h1 { font-size: 2.5rem; }

			.hero p { font-size: 1.2rem; }

			.hero a { padding: 10px 20px; font-size: 1rem; }

			.contact-form { padding: 28px; }

			#privacy-policy-link { 
				bottom: 110px; 
				right: 12px; 
			}

			#cookie-banner .btn-cookie{
				display:block;
				width:100%;
				margin:8px 0;
			}
		}

        @media (max-width: 480px) {
            .navbar-brand { font-size: 1.5rem; }
            .navbar-nav .nav-item .nav-link { font-size: 0.9rem; }
            .hero h1 { font-size: 2rem; }
            .hero p { font-size: 1rem; }
            .hero a { padding: 8px 16px; font-size: 0.9rem; }
        }

        @keyframes slideUp {
            from { transform: translateY(50px); opacity: 0; }
            to   { transform: translateY(0); opacity: 1; }
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to   { opacity: 1; }
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50%      { transform: scale(1.08); }
        }

		

		.navbar-brand{
		text-decoration:none !important;
		border-bottom:none !important;
		}
		
		.security-section{
		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:center;
		margin-top:25px;
		width:100%;
		}

		/* SSL Badge */

		.ssl-secure{
		display:flex;
		justify-content:center;
		margin-bottom:12px;
		}

		.ssl-secure img{
		height:34px;
		}

		/* Badge Container */

		.trust-badges{
		display:flex;
		flex-wrap:wrap;
		justify-content:center;
		gap:8px;
		max-width:700px;
		padding:0 10px;
		}

		/* Badge Design */

		.badge{
		padding:5px 10px;
		border-radius:6px;
		font-size:13px;
		font-weight:500;
		white-space:nowrap;
		text-align:center;
		}

		/* Farben */

		.blue{background:#1A2F5B;color:white;}
		.green{
		background:linear-gradient(
		135deg,
		#F4D27A,
		#FFE8A3
		);
		color:#081226;
		}
		.purple{background:#1A2F5B;color:white;}
		.darkgreen{
		background:linear-gradient(
		135deg,
		#F4D27A,
		#FFD977
		);
		color:#081226;
		}
		.black{background:#0F2144;color:white;}
		.grey{background:#1A2F5B;color:white;}

		/* Mobile */

		@media (max-width:768px){

		.ssl-secure img{
		height:28px;
		}

		.badge{
		font-size:12px;
		padding:4px 8px;
		}

		}
		
		.project-highlights{
		display:grid;
		grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
		gap:30px;
		margin-bottom:50px;
		align-items:stretch;
		}

		.project-card{

		background:

		linear-gradient(
		180deg,
		rgba(255,255,255,0.86),
		rgba(255,248,226,0.92),
		rgba(244,210,122,0.92)
		);

		padding:28px;
		border-radius:18px;
		border:1px solid rgba(244,210,122,0.58);
		backdrop-filter:blur(6px);

		box-shadow:
		0 24px 70px rgba(0,0,0,0.18),
		0 0 50px rgba(244,210,122,0.22),
		inset 0 1px 0 rgba(255,255,255,0.92);

		transition:
		transform .35s ease,
		box-shadow .35s ease,
		border-color .35s ease,
		filter .35s ease;

		display:flex;
		flex-direction:column;
		min-height:220px;
		position:relative;
		overflow:hidden;

		}
		
		.project-card::after{

		content:"";

		position:absolute;

		top:-60%;
		left:-80%;

		width:150%;
		height:260%;

		background:linear-gradient(
		120deg,
		transparent,
		rgba(255,255,255,0.65),
		transparent
		);

		transform:rotate(25deg);

		opacity:0;

		transition:
		opacity .6s ease,
		left .9s cubic-bezier(.16,1,.3,1);

		pointer-events:none;

		}

		.project-card h3{

		font-size:1.25rem;
		margin-bottom:10px;
		line-height:1.35;
		word-break:normal;
		hyphens:none;

		background:linear-gradient(
		90deg,
		#14284B 0%,
		#294572 60%,
		#0F2144 100%
		);

		-webkit-background-clip:text;
		-webkit-text-fill-color:transparent;

		letter-spacing:0.2px;

		}

		.project-card p{

		font-size:0.96rem;

		line-height:1.75;

		color:#0A1630;

		font-weight:600;

		letter-spacing:0.2px;

		text-shadow:
		0 1px 0 rgba(255,255,255,0.55);

		}

		.project-kpi{

		margin-top:auto;

		font-weight:700;

		font-size:0.96rem;

		color:#0F2144;

		letter-spacing:0.35px;

		opacity:0.85;

		}
		.project-list ul{

		max-width:820px;
		margin:0 auto;
		columns:2;
		column-gap:54px;
		padding-left:0;
		list-style:none;

		}


		.project-list li{

		margin-bottom:14px;
		line-height:1.8;
		font-size:0.98rem;

		color:#0A1630;

		font-weight:600;

		letter-spacing:0.15px;

		position:relative;
		padding-left:22px;

		text-shadow:
		0 1px 0 rgba(255,255,255,0.55);

		}


/* Goldene Bullet Points passend zum Logo */

		.project-list li::before{

		content:"";

		position:absolute;

		left:0;
		top:11px;

		width:8px;
		height:8px;

		border-radius:50%;

		background:linear-gradient(
		135deg,
		#F4D27A,
		#FFF7DB,
		#FFFFFF
		);

		box-shadow:

		0 0 14px rgba(244,210,122,0.55),
		0 0 30px rgba(244,210,122,0.35);

		}


		@media(max-width:768px){

		.project-list ul{

		columns:1;

		column-gap:0;

		}

		}

		.trust-metrics{
		display:grid;
		grid-template-columns:repeat(auto-fit, minmax(180px, 220px));
		justify-content:center;
		gap:24px;
		margin:45px auto;
		max-width:1100px;
		}
		
		.metric::before{

		content:"";

		position:absolute;

		top:0;
		left:0;

		width:100%;
		height:1px;

		background:linear-gradient(
		90deg,
		transparent,
		rgba(244,210,122,0.45),
		transparent
		);

		opacity:0.6;

		}

		.metric{

		background:

		linear-gradient(
		180deg,
		rgba(255,255,255,0.14),
		rgba(255,255,255,0.04)
		),

		linear-gradient(
		135deg,
		rgba(8,18,38,0.92),
		rgba(15,33,68,0.85),
		rgba(244,210,122,0.08)
		);

		padding:26px 24px;

		border-radius:18px;

		text-align:center;

		border:1px solid rgba(244,210,122,0.25);

		backdrop-filter:blur(12px);

		box-shadow:

		0 40px 120px rgba(0,0,0,0.9),

		0 0 120px rgba(26,47,91,0.45),

		0 0 60px rgba(244,210,122,0.12),

		inset 0 1px 0 rgba(255,255,255,0.12);

		transition:
		transform 0.25s ease,
		box-shadow 0.25s ease,
		border-color 0.25s ease;

		}
		
		.metric:hover{

		transform:translateY(-10px) scale(1.04);

		border-color:rgba(244,210,122,0.55);

		box-shadow:

		0 40px 140px rgba(0,0,0,0.95),

		0 0 160px rgba(244,210,122,0.35),

		0 0 90px rgba(26,47,91,0.55),

		inset 0 1px 0 rgba(255,255,255,0.2);

		}

		.metric h3{

		font-size:2.4rem;

		font-weight:700;

		background:linear-gradient(
		90deg,
		#FFE8A3,
		#F4D27A,
		#FFFFFF
		);

		-webkit-background-clip:text;
		-webkit-text-fill-color:transparent;

		text-shadow:

		0 0 25px rgba(244,210,122,0.25);

		}

		.metric p{

		font-size:0.9rem;

		color:#9fa6ad;

		letter-spacing:0.3px;

		}

		.project-card h3{
		max-width:95%;
		}
		
		.project-card:hover{

		transform:
		translateY(-14px)
		scale(1.045);

		border-color:rgba(244,210,122,0.85);

		box-shadow:

		0 60px 180px rgba(0,0,0,0.35),

		0 0 160px rgba(244,210,122,0.65),

		0 0 80px rgba(26,47,91,0.45),

		inset 0 1px 0 rgba(255,255,255,0.95);

		filter:
		brightness(1.04)
		saturate(1.05);

		}
		
		.project-card:hover::after{

		opacity:0.8;

		left:-10%;

		}
			
				
		#about{

		background:

		radial-gradient(
		circle at 80% 25%,
		rgba(244,210,122,0.34),
		rgba(244,210,122,0.16),
		transparent 62%
		),

		radial-gradient(
		circle at 18% 70%,
		rgba(26,47,91,0.65),
		transparent 70%
		),

		radial-gradient(
		circle at 55% 42%,
		rgba(255,255,255,0.10),
		transparent 72%
		),

		linear-gradient(
		90deg,
		#1A2F5B 0%,
		#0F2144 25%,
		#081226 50%,
		#050B18 70%,
		#081226 88%,
		#1A2F5B 100%
		);

		border-top:none;

		position:relative;

		overflow:hidden;

		}
				
		.container,
		.service-box,
		.project-card{
		word-wrap:break-word;
		overflow-wrap:break-word;
		}
	

		/* =========================
		   SERVICE ICONS (GLOBAL)
		========================= */

		#services .service-box i{

		font-size:3.1rem;

		margin-bottom:18px;

		display:inline-block;

		background:linear-gradient(
		180deg,
		#FFFFFF,
		#F4D27A
		);

		-webkit-background-clip:text;
		-webkit-text-fill-color:transparent;

		filter:
		drop-shadow(0 0 16px rgba(244,210,122,0.55))
		drop-shadow(0 0 40px rgba(26,47,91,0.40));

		transform:translateZ(20px);

		transition:
		transform .35s ease,
		filter .35s ease;

		}
		
		

		/* ICON HOVER EFFECT */

		#services .service-box:hover i{

		transform:scale(1.08);

		filter:
		drop-shadow(0 0 28px rgba(244,210,122,0.75))
		drop-shadow(0 0 60px rgba(26,47,91,0.55));

		}


		/* =========================
		   MOBILE ICON SIZE
		========================= */

		@media (max-width:768px){

		#services .service-box i{

		font-size:2.6rem;
		margin-bottom:16px;

		}

		}


		/* =========================
		   HEADLINE FIX
		========================= */
		h1, h2, h3{
		text-shadow:none !important;
		}


		/* ===============================
		   INSIGHTS SECTION
		================================ */

		.insights-section{

		padding:110px 0;

		background:

		radial-gradient(
		circle at 18% 28%,
		rgba(244,210,122,0.22),
		transparent 60%
		),

		radial-gradient(
		circle at 82% 72%,
		rgba(255,255,255,0.12),
		transparent 65%
		),

		radial-gradient(
		circle at 50% 80%,
		rgba(26,47,91,0.45),
		transparent 70%
		),

		linear-gradient(
		90deg,
		#050B18 0%,
		#081226 25%,
		#0F2144 50%,
		#1A2F5B 75%,
		#081226 100%
		);

		text-align:center;

		position:relative;

		overflow:hidden;

		}


		.insights-section::after{

		content:"";
		position:absolute;
		inset:0;

		background:

		linear-gradient(
		rgba(255,255,255,0.05) 1px,
		transparent 1px
		),

		linear-gradient(
		90deg,
		rgba(26,47,91,0.10) 1px,
		transparent 1px
		);

		background-size:160px 160px;

		opacity:0.22;

		pointer-events:none;

		transform:perspective(900px) rotateX(55deg);

		transform-origin:top;

		animation:techGridMove 28s linear infinite;

		}


		/* ===============================
		   AMBIENT LIGHT
		================================ */

		.insights-section::before{

		content:"";

		position:absolute;

		inset:-40%;

		background:

		radial-gradient(
		circle at 30% 20%,
		rgba(26,47,91,0.45),
		transparent 60%
		),

		radial-gradient(
		circle at 70% 80%,
		rgba(244,210,122,0.28),
		transparent 60%
		);

		filter:blur(140px);

		opacity:0.9;

		animation:ambientFloat 40s ease-in-out infinite alternate;

		pointer-events:none;

		}


		/* ===============================
		   SECTION TITLE
		================================ */

		.insights-title{

		font-size:2.2rem;

		margin-bottom:12px;

		background:linear-gradient(
		90deg,
		#FFFFFF,
		#F4D27A,
		#FFFFFF
		);

		-webkit-background-clip:text;
		-webkit-text-fill-color:transparent;

		letter-spacing:0.4px;

		}


		/* ===============================
		   SUBTITLE
		================================ */

		.insights-subtitle{

		max-width:760px;

		margin:0 auto 50px;

		color:#C7D1E0;

		font-size:0.95rem;

		line-height:1.7;

		}


		/* ===============================
		   GRID
		================================ */

		.insights-grid{

		display:grid;

		grid-template-columns:repeat(auto-fit,minmax(280px,360px));

		justify-content:center;

		gap:32px;

		}


		/* ===============================
		   INSIGHT CARDS
		================================ */

		.insight-card{

		background:

		linear-gradient(
		180deg,
		rgba(255,255,255,0.12),
		rgba(255,255,255,0.03)
		),

		linear-gradient(
		135deg,
		rgba(8,18,38,0.95),
		rgba(15,33,68,0.85),
		rgba(26,47,91,0.65)
		);

		border:1px solid rgba(244,210,122,0.28);

		padding:32px;

		border-radius:18px;

		box-shadow:

		0 40px 120px rgba(0,0,0,0.9),
		0 0 100px rgba(26,47,91,0.45),
		0 0 60px rgba(244,210,122,0.12),

		inset 0 1px 0 rgba(255,255,255,0.10);

		transition:
		transform .35s ease,
		box-shadow .35s ease,
		border-color .35s ease,
		filter .35s ease;

		text-align:center;

		display:flex;

		flex-direction:column;

		align-items:center;

		position:relative;

		overflow:hidden;

		}


		/* ===============================
		   CARD LIGHT SWEEP
		================================ */

		.insight-card::after{

		content:"";

		position:absolute;

		top:-60%;
		left:-80%;

		width:150%;
		height:260%;

		background:linear-gradient(
		120deg,
		transparent,
		rgba(255,255,255,0.35),
		transparent
		);

		transform:rotate(24deg);

		opacity:0;

		transition:
		opacity .6s ease,
		left .9s cubic-bezier(.16,1,.3,1);

		pointer-events:none;

		}


		/* ===============================
		   CARD HOVER
		================================ */

		.insight-card:hover{

		transform:translateY(-12px) scale(1.03);

		border-color:#F4D27A;

		box-shadow:

		0 40px 140px rgba(0,0,0,0.95),

		0 0 140px rgba(244,210,122,0.35),

		0 0 80px rgba(26,47,91,0.55);

		filter:brightness(1.05) saturate(1.08);

		}

		.insight-card:hover::after{

		opacity:0.8;

		left:-10%;

		}


		/* ===============================
		   CARD ICON
		================================ */

		.insight-card img{

		width:48px;

		margin-bottom:18px;

		opacity:0.95;

		filter:drop-shadow(0 0 18px rgba(244,210,122,0.45));

		}


		/* ===============================
		   CARD TITLE
		================================ */

		.insight-card h3{

		font-size:1.2rem;

		margin-bottom:12px;

		background:linear-gradient(
		90deg,
		#FFFFFF,
		#F4D27A
		);

		-webkit-background-clip:text;
		-webkit-text-fill-color:transparent;

		letter-spacing:0.3px;

		}


		/* ===============================
		   CARD TEXT
		================================ */

		.insight-card p{

		font-size:0.92rem;

		color:#C9D3E2;

		line-height:1.65;

		margin-bottom:18px;

		}

		.download-label{

		font-size:0.85rem;

		color:#F4D27A;

		font-weight:600;

		letter-spacing:0.5px;

		}
		
		/* GLOBAL MOBILE TEXT FIX */



		p, li, h1, h2, h3{

		overflow-wrap:break-word;

		word-break:normal;

		hyphens:none;
		}

		/* Container Safety */

		.container{
		padding-left:20px;
		padding-right:20px;
		}

		/* Service Cards */


		.service-box:hover::after{

		opacity:0.35;

		}

		/* Pills / Tags */

		.pill{
		white-space:nowrap;
		}
		
		.pill-container{
		display:flex;
		flex-wrap:wrap;
		justify-content:center;
		gap:6px;

		min-height:46px;

		margin-bottom:6px;
		}

		/* Project Cards */

		.project-card{
		overflow:hidden;
		word-break:normal;
		}

		/* Insight Cards */

		.insight-card{
		word-break:break-word;
		}

		/* Metrics */

		.metric{
		word-break:break-word;
		}

		/* Prevent horizontal scroll completely */


		
			/* ABOUT PORTRAIT */

		.about-portrait{

		display:flex;
		justify-content:center;
		align-items:center;

		margin-bottom:40px;

		position:relative;

		z-index:1;

		}
		
		.about-portrait::before{

		content:"";

		position:absolute;

		width:260px;
		height:260px;

		background:

		radial-gradient(
		circle,
		rgba(244,210,122,0.45),
		rgba(244,210,122,0.18),
		transparent 70%
		);

		filter:blur(40px);

		z-index:-1;

		animation:portraitGlow 8s ease-in-out infinite alternate;

		}

		.about-portrait img{

		width:180px;
		max-width:90%;
		height:auto;

		border-radius:50%;

		border:3px solid rgba(244,210,122,0.45);

		box-shadow:

		0 12px 50px rgba(0,0,0,0.75),

		0 0 40px rgba(244,210,122,0.35),

		0 0 80px rgba(26,47,91,0.35),

		inset 0 1px 0 rgba(255,255,255,0.45);

		object-fit:cover;

		transition:
		transform .35s ease,
		box-shadow .35s ease;

		}

		.about-portrait img:hover{

		transform:scale(1.04);

		box-shadow:

		0 20px 70px rgba(0,0,0,0.9),

		0 0 90px rgba(244,210,122,0.55),

		0 0 120px rgba(26,47,91,0.45);

		}

		/* Mobile */

		@media(max-width:768px){

		.about-portrait img{
		width:140px;
		}

		}
		
		.section-divider{

		height:1px;

		max-width:900px;

		margin:0 auto;

		background:linear-gradient(
		90deg,
		transparent,
		rgba(255,255,255,0.15),
		transparent
		);

		}
			
		#experience{

		background:

		radial-gradient(
		circle at 20% 25%,
		rgba(255,255,255,0.35),
		transparent 45%
		),

		radial-gradient(
		circle at 40% 40%,
		rgba(244,210,122,0.35),
		transparent 40%
		),

		radial-gradient(
		circle at 75% 60%,
		rgba(26,47,91,0.35),
		transparent 45%
		),

		linear-gradient(
		90deg,
		#FFF7DB 0%,
		#F4D27A 18%,
		#E4C067 35%,
		#B89648 50%,
		#3C4E75 65%,
		#1A2F5B 80%,
		#0F2144 92%,
		#050B18 100%
		);

		position:relative;
		overflow:hidden;

		color:#081226;

		}
		
		#experience::after{

		content:"";
		position:absolute;
		inset:0;

		background:

		linear-gradient(
		rgba(244,210,122,0.08) 1px,
		transparent 1px
		),

		linear-gradient(
		90deg,
		rgba(244,210,122,0.08) 1px,
		transparent 1px
		);

		background-size:180px 180px;

		opacity:0.18;

		pointer-events:none;

		mix-blend-mode:soft-light;

		filter:blur(0.3px);

		}
		
		#experience::before{

		content:"";
		position:absolute;
		inset:-20%;

		background:

		radial-gradient(
		circle at 25% 35%,
		rgba(244,210,122,0.35),
		transparent 60%
		),

		radial-gradient(
		circle at 80% 70%,
		rgba(26,47,91,0.45),
		transparent 60%
		);

		filter:blur(160px);

		opacity:0.9;

		pointer-events:none;

		animation:ambientFloat 36s ease-in-out infinite alternate;

		}
		
		.reference-note{

		max-width:760px;
		margin:40px auto 0;
		text-align:center;

		font-size:1.02rem;
		line-height:1.75;

		color:#0F2144;

		font-weight:600;

		letter-spacing:0.2px;

		text-shadow:
		0 1px 0 rgba(255,255,255,0.75);

		}
		
		#experience h2{

		font-size:2.45rem;

		color:#0F2144;

		letter-spacing:0.5px;

		margin-bottom:28px;

		text-align:center;

		}
		
		#experience h2::after{

		content:"";

		display:block;

		width:120px;
		height:2px;

		margin:16px auto 0;

		background:linear-gradient(
		90deg,
		transparent,
		rgba(244,210,122,0.85),
		rgba(255,255,255,0.65),
		rgba(244,210,122,0.85),
		transparent
		);

		box-shadow:
		0 0 12px rgba(244,210,122,0.35);

		}
				
		body::before{

		content:"";

		position:fixed;

		inset:-70%;

		background:

		radial-gradient(
		circle at 18% 22%,
		rgba(255,255,255,0.18),
		transparent 55%
		),

		radial-gradient(
		circle at 82% 72%,
		rgba(244,210,122,0.18),
		transparent 55%
		),

		radial-gradient(
		circle at 45% 85%,
		rgba(255,255,255,0.08),
		transparent 60%
		),

		radial-gradient(
		circle at 60% 20%,
		rgba(244,210,122,0.10),
		transparent 65%
		);

		filter:blur(120px);

		opacity:0.7;

		animation:ambientFloat 40s ease-in-out infinite alternate;

		pointer-events:none;

		z-index:-3;

		}


		@keyframes ambientFloat{

		0%{
		transform:translate3d(-60px,-140px,0) scale(1);
		}

		50%{
		transform:translate3d(40px,60px,0) scale(1.08);
		}

		100%{
		transform:translate3d(120px,140px,0) scale(1.15);
		}

		}
		

				
		body::after{

		content:"";

		position:fixed;

		top:0;
		left:0;

		width:100%;
		height:100%;

		background:

		radial-gradient(
		circle at 15% 25%,
		rgba(244,210,122,0.08),
		transparent 40%
		),

		radial-gradient(
		circle at 85% 75%,
		rgba(26,47,91,0.08),
		transparent 45%
		);

		pointer-events:none;

		z-index:-1;

		}

		@keyframes gridDepth{

		0%{
		background-position:0 0;
		}

		100%{
		background-position:0 120px;
		}

		}
		
		.logos{
		padding:50px 0 40px 0;
		}
		
		
		.hero h1::before{

		content:"";

		position:absolute;

		top:0;
		left:-120%;

		width:120%;
		height:100%;

		background:linear-gradient(
		120deg,
		transparent,
		rgba(255,255,255,0.25),
		transparent
		);

		animation:heroSweep 10s linear infinite;
		opacity:0.6;

		}

		@keyframes heroSweep{

		0%{
		left:-120%;
		}

		100%{
		left:120%;
		}

		}
		
		#services .service-box h3{
		margin-top:12px;
		margin-bottom:14px;
		text-align:center;
		line-height:1.35;
		}
		
		
		.hero h1::after{

		content:"";

		position:absolute;

		left:50%;
		top:50%;

		width:780px;
		height:320px;

		background:

		radial-gradient(
		circle at center,
		rgba(255,255,255,0.28),
		rgba(244,210,122,0.32),
		rgba(26,47,91,0.18),
		transparent 70%
		);

		transform:translate(-50%,-50%);

		filter:blur(110px);

		opacity:0.95;

		animation:heroGlow 10s ease-in-out infinite alternate;

		z-index:-1;

		}

		@keyframes heroGlow{

		0%{
		transform:translate(-50%,-50%) scale(1);
		opacity:0.9;
		}

		100%{
		transform:translate(-50%,-50%) scale(1.12);
		opacity:1;
		}

		}
		
		/* =========================
		   MOBILE DESIGN FIX
		========================= */

		@media (max-width:768px){

		/* Seite insgesamt heller */

		body{
		background:#121212;
		}

		/* Ambient Hintergrund reduzieren */

		body::before{
		opacity:0.35;
		filter:blur(70px);
		}

		/* Hero weniger dunkel */

		.hero{

		background:

		radial-gradient(circle at 20% 30%, rgba(244,210,122,0.06), transparent 45%),

		radial-gradient(circle at 80% 70%, rgba(26,47,91,0.18), transparent 45%),

		linear-gradient(
		135deg,
		#050B18,
		#0F2144,
		#050B18
		);

		}

		}

		/* Service Cards – Mobile Optimized */

		#services .service-box{

		background:

		linear-gradient(
		180deg,
		rgba(255,255,255,0.12),
		rgba(255,255,255,0.03)
		),

		linear-gradient(
		135deg,
		rgba(8,18,38,0.85),
		rgba(15,33,68,0.75),
		rgba(244,210,122,0.05)
		);

		border:1px solid rgba(244,210,122,0.22);

		box-shadow:

		0 40px 120px rgba(0,0,0,0.92),

		0 0 120px rgba(26,47,91,0.35),

		0 0 50px rgba(244,210,122,0.08),

		inset 0 1px 0 rgba(255,255,255,0.10);

		}

		/* Glasreflexion deaktivieren */

		#services .service-box::after{
		display:none;
		}

		/* Edge Glow schwächer */

		#services .service-box::before{
		opacity:0.18;
		}

		}
		
		
		::selection{


		background:#F4D27A;

		color:#050B18;

		}
		
		a, button{

		transition:
		transform .25s ease,
		box-shadow .25s ease,
		background .25s ease,
		color .25s ease;

		}
		
		.navbar.scrolled{

		background:

		linear-gradient(
		180deg,
		rgba(5,11,24,0.98),
		rgba(10,18,36,0.96)
		);

		border-bottom:1px solid rgba(244,210,122,0.28);

		box-shadow:

		0 30px 110px rgba(0,0,0,0.95),
		0 0 80px rgba(244,210,122,0.18);

		}
		
		
		.language-switcher{
		margin-left:18px;
		display:flex;
		align-items:center;
		}

		#languageSelect{

		background:linear-gradient(
		180deg,
		rgba(5,11,24,0.92),
		rgba(8,18,38,0.92)
		);

		color:#F4D27A;

		border:1px solid rgba(244,210,122,0.35);

		padding:6px 12px;
		border-radius:10px;

		font-size:0.85rem;

		backdrop-filter:blur(10px);

		box-shadow:

		0 0 30px rgba(244,210,122,0.18),
		inset 0 1px 0 rgba(255,255,255,0.05);

		transition:
		transform .25s ease,
		box-shadow .25s ease,
		border-color .25s ease,
		color .25s ease;

		cursor:pointer;

		}
		#languageSelect:hover{

		  transform:translateY(-2px);

		  border-color:#F4D27A;

		  color:#FFFFFF;

		  box-shadow:
			0 0 50px rgba(244,210,122,0.35),
			0 0 90px rgba(26,47,91,0.35);

		}
				
		.nav-logo{
		height:64px;
		width:auto;
		object-fit:contain;
		}
		
		
		@media (max-width:768px){

		#services{
		padding:90px 0;
		}

		#services .service-content{
		gap:18px;
		}

		#services .service-box{
		padding:28px 22px;
		border-radius:18px;
		}

		#services .service-box h3{
		font-size:1.3rem;
		}

		#services .service-box p{
		font-size:0.95rem;
		}

		.service-toggle{
		margin-top:16px;
		width:100%;
		}

		}
		
		@media (max-width:768px){

		#services::after{
		display:none;
		}

		.hero::after{
		opacity:0.4;
		}

		body::before{
		opacity:0.25;
		}

		}
				
		
		
				
		@media (max-width:768px){

		.nav-logo{
		height:48px;
		}

		}
		
		.footer-logo{
		display:flex;
		justify-content:center;
		margin-bottom:18px;
		}

		.footer-logo img{
		height:110px;
		width:auto;
		opacity:0.95;
		}
		
		.trust-logo{
		display:flex;
		justify-content:center;
		margin-top:30px;
		}

		.trust-logo img{
		width:240px;
		max-width:85%;
		height:auto;
		opacity:0.9;
		filter:drop-shadow(0 15px 40px rgba(244,210,122,0.28));
		}
		
		@keyframes portraitGlow{

		0%{
		transform:scale(1);
		opacity:0.85;
		}

		100%{
		transform:scale(1.12);
		opacity:1;
		}

		}
		
		.result-text{

		font-weight:600;

		background:linear-gradient(
		90deg,
		#F4D27A,
		#FFE8A3,
		#FFFFFF
		);

		-webkit-background-clip:text;
		-webkit-text-fill-color:transparent;

		letter-spacing:0.2px;

		}
		
		@keyframes techGridMove{

		0%{
		background-position:0 0,0 0;
		}

		100%{
		background-position:0 180px,180px 0;
		}

		}
		
		@media (max-width:768px){

		.animated-bg .circle{
		animation: orbitalFloat 40s ease-in-out infinite;
		}

		}
		
		/* FIX HORIZONTAL SCROLL MOBILE */

		@media (max-width:768px){

		html, body{
		overflow-x:hidden;
		}

		.hero,
		.animated-bg{
		overflow:hidden;
		}

		}
		
		/* ===================================
		   FEATURED / CORE SERVICES
		=================================== */

		#services .service-box.service-featured{

		border:1px solid rgba(255,255,255,0.18);

		background:

		linear-gradient(
		180deg,
		rgba(255,255,255,0.10),
		rgba(255,255,255,0.02)
		),

		linear-gradient(
		135deg,
		rgba(8,18,38,0.96),
		rgba(15,33,68,0.92)
		);

		box-shadow:
		0 30px 90px rgba(0,0,0,0.92);

		}

		/* Hover minimal */

		#services .service-box.service-featured:hover{

		border-color:rgba(255,255,255,0.35);

		box-shadow:
		0 40px 120px rgba(0,0,0,0.96);

		}


		/* SUBTLE LABEL */

		#services .service-box.service-featured::before{

		content:"Core Service";

		position:absolute;

		top:16px;
		right:18px;

		font-size:0.65rem;

		letter-spacing:0.5px;

		color:rgba(255,255,255,0.55);

		font-weight:600;

		}
												

		.reveal{
		opacity:0;
		transform:translateY(60px);
		transition:all 1s cubic-bezier(.16,1,.3,1);
		}

		.reveal.active{
		opacity:1;
		transform:translateY(0);
		}


		.cursor-glow{
		position:fixed;
		width:400px;
		height:400px;
		pointer-events:none;
		background:radial-gradient(circle,
		rgba(244,210,122,0.15),
		transparent 60%);
		transform:translate(-50%,-50%);
		z-index:-1;
		}