:root{
  --bg:#0a0a0b;
  --panel:#0f0f12;
  --card:#121216;
  --muted:#a1a1aa;
  --text:#ffffff;
  --grad-a:#623DBD;
  --grad-b:#A83ABD;
  --grad-c:#C63260;
  --radius:18px;




    --primary-background: #0A0A0C;
    --secondary-background: #16161B;
    --accent-1: #C8325A;
    --accent-2: #7D4AFF;
    --text-primary: #F5F5F5;
    --text-secondary: #B8B8B8;
    --border:rgba(255,255,255,.14);

}


*{
    box-sizing:border-box
}

html,body{
    margin:0;
    padding:0;
    background:var(--primary-background);
    color:var(--text);
    font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial,Apple Color Emoji,Segoe UI Emoji;
    scroll-behavior:smooth
}



/* Hero */
.hero {
	max-width: 1200px;
	margin: 0 auto;
	padding: 54px 20px 24px;
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: 32px;
	align-items: center
}

.eyebrow {
	color: #9aa3ad;
	font-weight: 600;
	letter-spacing: .04em;
	margin: 0 0 10px
}

.display {
	font-size: clamp(28px, 5.5vw, 64px);
	line-height: 1.06;
	letter-spacing: -.02em;
	margin: 0 0 10px;
	font-weight: 800
}

.accent {
	background-clip: text;
	-webkit-background-clip: text;
	color: var(--accent-2)
}

.sublead {
	color: var(--muted);
	max-width: 700px;
	margin: 6px 0 0
}

.cta-row {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 20px
}



/* Apply + form */
.apply {
	max-width: 1200px;
	margin: 40px auto;
	padding: 20px;
	display: flex;
	grid-template-columns: 1fr 1fr;
	gap: 26px;
	align-items: center;
	justify-content: center;
}

.h2 {
	font-size: clamp(22px, 3.6vw, 36px);
	margin: 0 0 12px
}

.h3 {
	font-size: 20px;
	margin: 0
}

.steps {
	list-style: none;
	display: grid;
	gap: 10px;
	padding: 0;
	margin: 0 0 14px
}

.steps li {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 10px 12px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .02);
	border: 1px solid var(--border)
}

.steps strong {
	font-size: 15px
}

.apply__note {
	color: var(--muted);
	font-size: 14px
}

.formcard {
	position: relative;
	background: var(--panel);
	border-radius: 18px;
	padding: 16px;
	border: 1px solid var(--border);
	overflow: hidden
}

.formcard__border {
	position: absolute;
	inset: 0;
	border-radius: 18px;
	padding: 1.5px;
	background: var(--prism);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	pointer-events: none
}

.formcard__header {
	display: grid;
	gap: 10px;
	margin-bottom: 12px
}

.progress {
	height: 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .06);
	overflow: hidden;
	border: 1px solid var(--border)
}

.progress__bar {
	display: block;
	height: 100%;
	width: 0%;
	background: var(--accent-2);
	transition: width .6s cubic-bezier(.2, .8, .2, 1)
}

.grid {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr 1fr
}

.field {
	display: flex;
	flex-direction: column;
	gap: 6px
}

.field span {
	font-weight: 600
}

.field input,
.field select,
.field textarea {
	width: 100%;
	padding: 12px 12px;
	border-radius: 12px;
	background: #0c0f12;
	border: 1px solid var(--border);
	color: #fff
}

.field textarea {
	resize: vertical
}

.error {
	color: #ff6b6b;
	min-height: 16px
}

.legal {
	color: #9aa3ad;
	font-size: 12px;
	margin: 10px 0 0
}

.success {
  place-items: center;
  text-align: center;
  gap: 8px;
  padding: 20px;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.success.show {
  opacity: 1;
  transform: scale(1);
}

.check svg {
	width: 78px;
	height: 78px
}

.check circle {
	stroke: url(#);
	stroke-width: 4;
	fill: none;
	stroke: rgba(255, 255, 255, .18)
}

.check path {
	stroke: #9BEF8B;
	stroke-width: 4;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 40;
	stroke-dashoffset: 40;
	animation: dash .9s ease forwards
}

.bewerbung-heading {
  text-align: center;
  color: #fff;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 2rem;
  margin-top: 3rem;
  background: linear-gradient(90deg, #C8325A, #7D4AFF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.apply {
  display: flex;
  flex-direction: column;
  align-items: center;
}


@keyframes dash {
	to {
		stroke-dashoffset: 0
	}
}


/* Animations */
@keyframes float {
	to {
		transform: translateY(-8px) scale(1.02)
	}
}

@keyframes drift {
	to {
		background-position: 200% 0
	}
}

@keyframes spin {
	to {
		transform: rotate(360deg)
	}
}

/* Responsive */
@media (max-width:980px) {
	.hero {
		grid-template-columns: 1fr;
		gap: 20px
	}

	.apply {
		grid-template-columns: 1fr
	}

	.grid {
		grid-template-columns: 1fr
	}
}



.section {
	padding: 72px 0
}

.section h2 {
	font-size: 32px;
	margin: 0 0 10px;
	text-align: center
}

.section p.lead {
	color: var(--muted);
	text-align: center;
	max-width: 760px;
	margin: 8px auto 0
}


.cta-box {
	position: relative;
	overflow: hidden;
	border-radius: 24px;
	background: linear-gradient(135deg, rgba(18, 18, 22, .8), rgba(18, 18, 22, .4));
	border: 1px solid var(--border);
	padding: 28px;
	text-align: center
}

.cta-box .bubble-a,
.cta-box .bubble-b {
	position: absolute;
	border-radius: 999px;
	filter: blur(80px);
	opacity: .35
}

.cta-box .bubble-a {
	width: 320px;
	height: 320px;
	background-color: rgba(240, 171, 252, .45);
	right: -60px;
	top: -80px
}

.cta-box .bubble-b {
	width: 360px;
	height: 360px;
	background-color: rgba(129, 140, 248, .45);
	left: -100px;
	bottom: -120px
}




.tile{position:relative}
.tile::before{content:"";position:absolute;inset:-2px;border-radius:22px;background:linear-gradient(90deg,rgba(240,171,252,.15),rgba(167,139,250,.15),rgba(129,140,248,.15));filter:blur(12px);opacity:0;transition:.3s}
.tile:hover::before{opacity:1}


.kpis{display:grid;gap:16px;margin:28px 0 0}
@media(min-width:640px){.kpis{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.kpis{grid-template-columns:repeat(4,1fr)}}
.card{background:rgba(18,18,22,.75);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.card h3{margin:0;font-size:26px}
.card p{margin:2px 0 0;color:#c4c4cc;font-size:13px}


/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.reveal-visible{opacity:1;transform:none}
.hidden{display:none}