/* ==========================================================================
   Startseite – ergänzt den Brand-Layer aus style.css
   Leitidee aus dem Briefing: die Verbindung technischer und kaufmännischer
   Kompetenz. Das Key Visual trägt sie, die Abschnitte buchstabieren sie aus.
   ========================================================================== */

:root {
	--kk-tech: #5b686f;          /* Graphit – technische Hälfte des Key Visuals */
	--kk-tech-pale: #eef1f3;
}


/* --------------------------------------------------------------------------
   Bühne mit Key Visual
   -------------------------------------------------------------------------- */

.kk-stage {
	background: linear-gradient(180deg, #fff 0%, var(--kk-bg-muted) 100%);
	border-bottom: 1px solid var(--kk-line);
}

.kk-claim {
	font-size: clamp(2rem, 4.4vw, 3.1rem);
	font-weight: 300;
	line-height: 1.1;
	color: var(--kk-ink);
	margin: 0 0 0.6em;
}

.kk-claim strong {
	font-weight: 700;
	color: var(--kk-green);
}

.kk-kv {
	display: block;
	width: 100%;
	height: auto;
}

/* Legende: verknüpft die beiden Hälften des Key Visuals mit der Aussage */
.kk-kv-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 2rem;
	margin-top: 1.4rem;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--kk-muted);
}

.kk-kv-legend span { display: flex; align-items: center; gap: 0.55rem; }

.kk-kv-legend i {
	width: 14px;
	height: 14px;
	flex: 0 0 14px;
}

.kk-kv-legend .is-tech { background-color: var(--kk-tech); }
.kk-kv-legend .is-comm { background-color: var(--kk-green); }

/* Auf schmalen Viewports stehen die Buttons untereinander statt eingerückt */
@media (max-width: 639px) {
	/* .uk-margin-small-left setzt margin-left mit !important, daher hier ebenfalls */
	.kk-stage .uk-button { display: block; width: 100%; margin-left: 0 !important; }
	.kk-stage .uk-button + .uk-button { margin-top: 0.6rem; }
}


/* --------------------------------------------------------------------------
   Die zwei Kompetenzen
   -------------------------------------------------------------------------- */

.kk-pillar {
	height: 100%;
	padding: 2.2rem;
	background-color: #fff;
	border-top: 3px solid var(--kk-green);
}

.kk-pillar-tech { border-top-color: var(--kk-tech); }

.kk-pillar-label {
	font-size: 0.74rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--kk-green);
	margin: 0 0 0.9rem;
}

.kk-pillar-tech .kk-pillar-label { color: var(--kk-tech); }

.kk-pillar h3 {
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--kk-ink);
	margin: 0 0 0.8rem;
}

.kk-pillar ul {
	margin: 1.2rem 0 0;
	padding: 0;
	list-style: none;
}

.kk-pillar li {
	position: relative;
	padding-left: 1.5rem;
	margin-top: 0.55rem;
	font-size: 0.95rem;
	color: var(--kk-muted);
}

.kk-pillar li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 8px;
	height: 8px;
	background-color: var(--kk-green);
}

.kk-pillar-tech li::before { background-color: var(--kk-tech); }

/* Klammer zwischen den beiden Säulen – die Verbindung als Bildzeichen */
.kk-bracket {
	text-align: center;
	margin-top: 2.5rem;
	font-size: 0.82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--kk-green);
}


/* --------------------------------------------------------------------------
   Vorgehen in drei Schritten
   -------------------------------------------------------------------------- */

.kk-step {
	position: relative;
	height: 100%;
	padding: 2rem 1.8rem;
	background-color: rgba(255, 255, 255, 0.06);
}

.kk-step-no {
	display: block;
	font-size: 2.6rem;
	font-weight: 300;
	line-height: 1;
	color: rgba(255, 255, 255, 0.45);
	margin-bottom: 0.7rem;
}

.kk-step h3 {
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
	margin: 0 0 0.6rem;
}

.kk-step p {
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.78);
	margin: 0;
}

/* Verbindende Linie zwischen den Schritten (nur nebeneinander sinnvoll) */
@media (min-width: 960px) {
	.kk-step::after {
		content: '';
		position: absolute;
		top: 3.1rem;
		right: -1.6rem;
		width: 1.6rem;
		height: 2px;
		background-color: rgba(255, 255, 255, 0.35);
	}
	.kk-steps > div:last-child .kk-step::after { display: none; }
}


/* --------------------------------------------------------------------------
   Success Stories
   -------------------------------------------------------------------------- */

.kk-story {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.8rem;
	background-color: #fff;
	border-left: 3px solid var(--kk-green);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	transition: box-shadow 0.25s ease-in-out, transform 0.25s ease-in-out;
}

.kk-story:hover { box-shadow: 0 8px 26px rgba(0, 0, 0, 0.1); transform: translateY(-3px); }

.kk-story-client {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--kk-green);
	margin: 0 0 0.7rem;
}

.kk-story h3 {
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--kk-ink);
	margin: 0 0 0.6rem;
}

.kk-story p {
	font-size: 0.92rem;
	color: var(--kk-muted);
	margin: 0;
}


/* --------------------------------------------------------------------------
   Insights
   -------------------------------------------------------------------------- */

.kk-insight {
	display: block;
	height: 100%;
	padding: 2rem 1.8rem;
	background-color: var(--kk-tech-pale);
	border-bottom: 3px solid transparent;
	transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.kk-insight:hover {
	background-color: #fff;
	border-bottom-color: var(--kk-green);
	text-decoration: none;
}

.kk-insight h3 {
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--kk-green);
	margin: 0 0 0.6rem;
}

.kk-insight p { font-size: 0.93rem; color: var(--kk-muted); margin: 0; }

.kk-insight-more {
	display: inline-block;
	margin-top: 1rem;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--kk-green);
}


/* --------------------------------------------------------------------------
   Kennzahlenband
   -------------------------------------------------------------------------- */

.kk-facts { border-top: 1px solid var(--kk-line); }

.kk-fact strong {
	display: block;
	font-size: 2.2rem;
	font-weight: 300;
	line-height: 1;
	color: var(--kk-green);
	margin-bottom: 0.35rem;
}

.kk-fact span {
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--kk-muted);
}