/* ==========================================================================
   HERO SLIDER – msd-hero-slider.css
   Wrapper-Mechanik für den Kitt-Style Slider (3 Folien)
   Die eigentliche Folie nutzt opt-kit-slider CSS aus slider.css
   ========================================================================== */

/* ── Slider Mechanik ─────────────────────────────────────────────────── */
.hero-slider { position: relative; overflow: hidden; }

.hero-slider__track {
	display: flex;
	transition: transform .75s cubic-bezier(.77, 0, .175, 1);
	will-change: transform;
}

/* Jede Folie füllt 100% der Sektion */
.hero-slide {
	min-width: 100%;
	flex-shrink: 0;
	/* opt-kit-slider__inner übernimmt das innere Grid-Layout */
}

/* ── Progress Bar ────────────────────────────────────────────────────── */
.hero-slider__progress {
	position: absolute;
	top: 0; left: 0;
	height: 2px;
	width: 0;
	background: var(--opt-gold);
	z-index: 30;
	opacity: .8;
}

/* ── Dots ────────────────────────────────────────────────────────────── */
.hero-slider__dots {
	position: absolute;
	bottom: 2rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: .6rem;
	z-index: 20;
}

.hero-slider__dot {
	width: 28px;
	height: 3px;
	background: rgba(201, 168, 76, .25);
	border: none;
	cursor: pointer;
	padding: 0;
	transition: background .3s, width .35s;
}

.hero-slider__dot.is-active {
	background: var(--opt-gold);
	width: 44px;
}

/* ── Arrows ──────────────────────────────────────────────────────────── */
.hero-slider__prev,
.hero-slider__next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 20;
	width: 44px;
	height: 44px;
	background: rgba(13, 30, 58, .7);
	border: 1px solid rgba(201, 168, 76, .4);
	color: var(--opt-gold);
	font-size: 1.2rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s;
	backdrop-filter: blur(4px);
}

.hero-slider__prev { left:  1.5rem; }
.hero-slider__next { right: 1.5rem; }
.hero-slider__prev:hover,
.hero-slider__next:hover { background: rgba(201, 168, 76, .15); }

/* ── KI & KWK Visuals (rechte Spalte Folie 2+3) ─────────────────────── */
.hero__ki-side {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	opacity: 1 !important;
	transform: none !important;
}

.hero__ki-visual {
	position: relative;
	width: 100%;
	flex: 1;
	min-height: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--opt-blue-mid);
	border: 1px solid var(--opt-border-gold);
	overflow: hidden;
}

.hero__ki-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(201, 168, 76, .06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(201, 168, 76, .06) 1px, transparent 1px);
	background-size: 32px 32px;
}

.hero__ki-nodes {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.1rem;
}

.hero__ki-node {
	width: 66px;
	height: 66px;
	border-radius: 50%;
	border: 1.5px solid rgba(201, 168, 76, .5);
	background: var(--opt-blue-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	position: relative;
	animation: ki-pulse 3s ease-in-out infinite;
}

.hero__ki-node:nth-child(3) { animation-delay: .6s; }
.hero__ki-node:nth-child(5) { animation-delay: 1.2s; }

@keyframes ki-pulse {
	0%,100% { box-shadow: 0 0 0 0 rgba(201,168,76,0); }
	50%      { box-shadow: 0 0 0 12px rgba(201,168,76,.08); }
}

.hero__ki-line {
	width: 2px;
	height: 24px;
	background: linear-gradient(to bottom, rgba(201,168,76,.5), transparent);
}

/* KWK – Netzwerk-Visual */
.hero__kwk-visual { }

.hero__kwk-nodes {
	position: relative;
	z-index: 1;
	width: 200px;
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero__kwk-center {
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: var(--opt-blue-dark);
	border: 2px solid var(--opt-gold);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.7rem;
	z-index: 2;
	animation: kwk-pulse 3s ease-in-out infinite;
}

@keyframes kwk-pulse {
	0%,100% { box-shadow: 0 0 0 8px rgba(201,168,76,.08); }
	50%      { box-shadow: 0 0 0 16px rgba(201,168,76,.14); }
}

.hero__kwk-ring { position: absolute; inset: 0; }

.hero__kwk-node {
	position: absolute;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--opt-blue-mid);
	border: 1.5px solid rgba(201,168,76,.45);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	animation: kwk-glow 3s ease-in-out infinite;
}

.hero__kwk-node--1 { top: 0;   left: 50%; transform: translateX(-50%); animation-delay:    0s; }
.hero__kwk-node--2 { right: 0; top:  50%; transform: translateY(-50%); animation-delay: -2s; }
.hero__kwk-node--3 { bottom:0; left: 50%; transform: translateX(-50%); animation-delay: -4s; }
.hero__kwk-node--4 { left:  0; top:  50%; transform: translateY(-50%); animation-delay: -6s; }

@keyframes kwk-glow {
	0%,100% { box-shadow: 0 0 0 0 rgba(201,168,76,0); }
	50%      { box-shadow: 0 0 10px 3px rgba(201,168,76,.15); }
}

.hero__kwk-nodes::before {
	content: '';
	position: absolute;
	inset: 24px;
	border-radius: 50%;
	border: 1px dashed rgba(201,168,76,.2);
	animation: kwk-spin 20s linear infinite;
}
@keyframes kwk-spin { to { transform: rotate(360deg); } }

/* Stats unter KI/KWK Visual */
.hero__ki-side .hero__stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .75rem;
}

.hero__ki-side .hero__stat {
	background: rgba(255,255,255,.03);
	border: 1px solid var(--opt-border-gold);
	padding: .75rem 1rem;
	display: flex;
	flex-direction: column;
	gap: .2rem;
}

.hero__ki-side .hero__stat-num {
	font-family: var(--opt-font-serif);
	font-size: 1.6rem;
	font-weight: 300;
	color: var(--opt-gold);
	line-height: 1;
}

.hero__ki-side .hero__stat-label { font-size: .75rem; color: var(--opt-text-muted); }

/* ── Chips ───────────────────────────────────────────────────────────── */
.hero__chips {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: 1.5rem;
}

.hero__chip {
	font-family: var(--opt-font-sans);
	font-size: .68rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: .35rem .9rem;
	border: 1px solid rgba(201,168,76,.35);
	background: rgba(201,168,76,.07);
	color: #e8c97a;
	white-space: nowrap;
}

/* ── Video Button ────────────────────────────────────────────────────── */
.hero__vid-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--opt-cream);
	font-family: var(--opt-font-sans);
	padding: 0;
	margin-top: 4px;
}

.hero__vid-ring {
	position: relative;
	width: 60px;
	height: 60px;
	flex-shrink: 0;
	transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}

.hero__vid-btn:hover .hero__vid-ring { transform: scale(1.15); }

.hero__vid-ring::before {
	content: '';
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	background: conic-gradient(#c9a84c 0deg,#e8c97a 90deg,rgba(201,168,76,.15) 180deg,#c9a84c 360deg);
	animation: vid-spin 3s linear infinite;
}
.hero__vid-ring::after {
	content: '';
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	background: conic-gradient(rgba(201,168,76,.15) 0deg,#e8c97a 180deg,#c9a84c 270deg,rgba(201,168,76,.15) 360deg);
	animation: vid-spin 3s linear infinite reverse;
	opacity: .45;
}
@keyframes vid-spin { to { transform: rotate(360deg); } }

.hero__vid-ring-inner {
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: rgba(13,30,58,.95);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(201,168,76,.3);
	z-index: 1;
}

.hero__vid-arrow {
	width: 0; height: 0;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 14px solid var(--opt-gold);
	margin-left: 4px;
}

.hero__vid-text { display: flex; flex-direction: column; gap: 2px; }
.hero__vid-label {
	font-size: .78rem;
	font-weight: 500;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--opt-cream);
	line-height: 1.4;
	transition: color .2s;
}
.hero__vid-btn:hover .hero__vid-label { color: var(--opt-gold-light); }
.hero__vid-hover {
	font-size: .7rem;
	color: var(--opt-gold);
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity .25s, transform .25s;
}
.hero__vid-btn:hover .hero__vid-hover { opacity: 1; transform: translateY(0); }

/* ── Video Overlay ───────────────────────────────────────────────────── */
.msd-vid-overlay {
	position: fixed;
	inset: 0;
	background: rgba(5,10,25,.93);
	backdrop-filter: blur(12px);
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s, visibility .3s;
}
.msd-vid-overlay.is-open { opacity: 1; visibility: visible; }
.msd-vid-modal {
	position: relative;
	width: 100%;
	max-width: 920px;
	background: var(--opt-blue-dark);
	border: 1px solid rgba(201,168,76,.4);
	transform: scale(.95) translateY(20px);
	transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.msd-vid-overlay.is-open .msd-vid-modal { transform: scale(1) translateY(0); }
.msd-vid-modal::before {
	content: '';
	position: absolute;
	top:0;left:0;right:0;height:2px;
	background: linear-gradient(90deg,transparent,#c9a84c 30%,#e8c97a 50%,#c9a84c 70%,transparent);
}
.msd-vid-ratio { position:relative;width:100%;padding-top:56.25%;background:#000; }
.msd-vid-ratio video { position:absolute;inset:0;width:100%;height:100%;display:block; }
.msd-vid-close {
	position:absolute;top:-42px;right:0;width:38px;height:38px;
	background:transparent;border:1px solid rgba(201,168,76,.4);color:#f5f0e8;
	font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
	transition:background .2s,color .2s;
}
.msd-vid-close:hover { background:#c9a84c;color:#0a1428; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media(max-width:1024px) {
	/* Pfeile nach innen rücken damit kein Überlappen */
	.hero-slider__prev { left: .5rem; }
	.hero-slider__next { right: .5rem; }
	.hero-slider__prev,
	.hero-slider__next { width:36px; height:36px; font-size:1rem; }
}

@media(max-width:768px) {
	/* Pfeile ausblenden auf Mobile */
	.hero-slider__prev,.hero-slider__next { display:none; }
	/* Dots nach unten */
	.hero-slider__dots { bottom: 1rem; }
	.hero__chips { gap:.35rem; flex-wrap:wrap; }
	.hero__chip { font-size:.62rem; padding:.28rem .7rem; }
	.hero__ki-side { display:none; } /* KI/KWK Visual auf Mobile ausblenden */
	.hero__stats--grid { grid-template-columns:1fr 1fr; }
}

@media(max-width:480px) {
	.hero-slider__dots { bottom: .5rem; }
	.hero-slider__dot { width:20px; }
	.hero-slider__dot.is-active { width:32px; }
}

/* ==========================================================================
   FOLIE 2 & 3 – Freischwebende Grafiken (Stil wie Portrait Folie 1)
   ========================================================================== */

/* Gemeinsam: portrait-Spalte für Folie 2+3 */
.hero__ki-side {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 2rem;
	opacity: 1 !important;
	transform: none !important;
}

/* ── KI Floating Nodes (Folie 2) ─────────────────────────────────────── */
.hero__ki-float {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	filter: drop-shadow(-8px 12px 20px rgba(0,0,0,.5))
	        drop-shadow(4px -2px 15px rgba(201,168,76,.15));
}

.hero__ki-node--lg {
	width: 88px;
	height: 88px;
	border-radius: 50%;
	border: 1.5px solid rgba(201,168,76,.55);
	background: rgba(13,30,58,.9);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	position: relative;
	animation: ki-pulse-lg 3s ease-in-out infinite;
	backdrop-filter: blur(8px);
}

.hero__ki-node--lg:nth-child(3) { animation-delay: .7s; width:76px; height:76px; font-size:1.7rem; }
.hero__ki-node--lg:nth-child(5) { animation-delay: 1.4s; }

.hero__ki-node--lg::before {
	content: '';
	position: absolute;
	inset: -8px;
	border-radius: 50%;
	border: 1px solid rgba(201,168,76,.12);
	animation: ki-ring-lg 3s ease-in-out infinite;
}

@keyframes ki-pulse-lg {
	0%,100% { box-shadow: 0 0 0 0 rgba(201,168,76,0), inset 0 0 20px rgba(201,168,76,.05); }
	50%      { box-shadow: 0 0 20px 6px rgba(201,168,76,.12), inset 0 0 30px rgba(201,168,76,.1); }
}
@keyframes ki-ring-lg {
	0%,100% { transform: scale(1); opacity: .4; }
	50%      { transform: scale(1.15); opacity: .08; }
}

/* ── KWK Floating Network (Folie 3) ──────────────────────────────────── */
.hero__kwk-float {
	position: relative;
	width: 260px;
	height: 260px;
	display: flex;
	align-items: center;
	justify-content: center;
	filter: drop-shadow(-8px 12px 20px rgba(0,0,0,.5))
	        drop-shadow(4px -2px 15px rgba(201,168,76,.15));
}

.hero__kwk-center-lg {
	width: 86px;
	height: 86px;
	border-radius: 50%;
	background: rgba(13,30,58,.9);
	border: 2px solid var(--opt-gold);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	z-index: 2;
	position: relative;
	animation: kwk-pulse-lg 3s ease-in-out infinite;
	backdrop-filter: blur(8px);
	box-shadow: 0 0 30px rgba(201,168,76,.2), inset 0 0 20px rgba(201,168,76,.06);
}

@keyframes kwk-pulse-lg {
	0%,100% { box-shadow: 0 0 10px rgba(201,168,76,.2), 0 0 30px rgba(201,168,76,.08); }
	50%      { box-shadow: 0 0 25px rgba(201,168,76,.4), 0 0 50px rgba(201,168,76,.15); }
}

.hero__kwk-ring-lg { position: absolute; inset: 0; }

.hero__kwk-ring-lg::before {
	content: '';
	position: absolute;
	inset: 20px;
	border-radius: 50%;
	border: 1px dashed rgba(201,168,76,.25);
	animation: kwk-spin-lg 18s linear infinite;
}
@keyframes kwk-spin-lg { to { transform: rotate(360deg); } }

.hero__kwk-node {
	position: absolute;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(13,30,58,.85);
	border: 1.5px solid rgba(201,168,76,.5);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	animation: kwk-glow-lg 3s ease-in-out infinite;
	backdrop-filter: blur(6px);
}

.hero__kwk-node--1 { top:  0;   left: 50%; transform: translateX(-50%); animation-delay: 0s; }
.hero__kwk-node--2 { right: 0;  top:  50%; transform: translateY(-50%); animation-delay: -.75s; }
.hero__kwk-node--3 { bottom:0;  left: 50%; transform: translateX(-50%); animation-delay: -1.5s; }
.hero__kwk-node--4 { left:  0;  top:  50%; transform: translateY(-50%); animation-delay: -2.25s; }

@keyframes kwk-glow-lg {
	0%,100% { box-shadow: 0 0 0 0 rgba(201,168,76,0); }
	50%      { box-shadow: 0 0 15px 4px rgba(201,168,76,.18); }
}

/* ── Stats unter den Grafiken ────────────────────────────────────────── */
.hero__stats--grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .75rem;
	width: 100%;
}

.hero__stats--grid .hero__stat {
	background: rgba(255,255,255,.03);
	border: 1px solid rgba(201,168,76,.25);
	padding: .8rem 1rem;
	display: flex;
	flex-direction: column;
	gap: .2rem;
}

.hero__stats--grid .hero__stat-num {
	font-family: var(--opt-font-serif);
	font-size: 1.7rem;
	font-weight: 300;
	color: var(--opt-gold);
	line-height: 1;
}

.hero__stats--grid .hero__stat-label {
	font-size: .72rem;
	color: var(--opt-text-muted);
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.hero__kwk-float { width: 200px; height: 200px; }
	.hero__kwk-center-lg { width: 68px; height: 68px; font-size: 1.6rem; }
	.hero__kwk-node { width: 46px; height: 46px; font-size: 1.2rem; }
	.hero__ki-node--lg { width: 72px; height: 72px; font-size: 1.7rem; }
}

@media (max-width: 768px) {
	.hero__kwk-float { width: 160px; height: 160px; }
	.hero__stats--grid { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   FOLIE 2 – Animierte KI-Symbole
   ========================================================================== */

.hero__ki-float {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .75rem;
	padding: 2rem;
	background: rgba(10,20,40,.5);
	border: 1px solid rgba(201,168,76,.2);
	backdrop-filter: blur(12px);
	filter: drop-shadow(0 20px 40px rgba(0,0,0,.5));
}

.hero__ki-node--lg {
	position: relative;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	background: rgba(13,30,58,.9);
	border: 1.5px solid rgba(201,168,76,.4);
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(8px);
}

.hero__ki-icon {
	font-size: 2.2rem;
	position: relative;
	z-index: 2;
	display: block;
}

.hero__ki-connector {
	width: 2px;
	height: 28px;
	background: linear-gradient(to bottom, rgba(201,168,76,.6), rgba(201,168,76,.1));
}

/* Pulse Ringe für Chat-Bubble */
.hero__ki-pulse-ring {
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 1.5px solid rgba(201,168,76,.4);
	animation: chat-pulse 2s ease-out infinite;
}
.hero__ki-pulse-ring--2 {
	inset: -14px;
	border-color: rgba(201,168,76,.2);
	animation-delay: .5s;
}
@keyframes chat-pulse {
	0%   { transform: scale(.9); opacity: .7; }
	100% { transform: scale(1.3); opacity: 0; }
}

/* Chat-Bubble – leicht wackeln */
.hero__anim-chat .hero__ki-icon {
	animation: chat-bounce 2.5s ease-in-out infinite;
}
@keyframes chat-bounce {
	0%,100% { transform: scale(1) translateY(0); }
	20%      { transform: scale(1.15) translateY(-4px); }
	40%      { transform: scale(1) translateY(0); }
	60%      { transform: scale(1.05) translateY(-2px); }
}

/* Telefon – vibrieren */
.hero__anim-phone {
	background: rgba(13,30,58,.9);
	border-color: rgba(201,168,76,.55);
	box-shadow: 0 0 20px rgba(201,168,76,.15);
	animation: phone-ring 2s ease-in-out infinite;
}
.hero__anim-phone .hero__ki-icon {
	animation: phone-vibrate 2s ease-in-out infinite;
}
@keyframes phone-ring {
	0%,85%,100% { box-shadow: 0 0 0 0 rgba(201,168,76,0); }
	10%          { box-shadow: 0 0 0 8px rgba(201,168,76,.2); }
	20%          { box-shadow: 0 0 0 4px rgba(201,168,76,.1); }
	30%          { box-shadow: 0 0 0 10px rgba(201,168,76,.15); }
}
@keyframes phone-vibrate {
	0%,10%,20%,30%,100% { transform: rotate(0deg); }
	5%                   { transform: rotate(-12deg); }
	15%                  { transform: rotate(12deg); }
	25%                  { transform: rotate(-8deg); }
}

/* Buch – aufblättern / hüpfen */
.hero__anim-book .hero__ki-icon {
	animation: book-flip 3s ease-in-out infinite;
}
@keyframes book-flip {
	0%,100% { transform: scaleX(1) translateY(0); }
	20%      { transform: scaleX(.85) translateY(-3px); }
	40%      { transform: scaleX(1) translateY(0); }
	60%      { transform: scaleX(.9) translateY(-2px); }
}

/* ==========================================================================
   FOLIE 3 – Wachsendes Netzwerk
   ========================================================================== */

.hero__kwk-float {
	position: relative;
	width: 260px;
	height: 260px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}

/* Hover: ganzes Netzwerk zoomen */
.hero__kwk-float:hover { transform: scale(1.08); }

/* Wachsende Ringe — erscheinen nacheinander nach außen */
.hero__kwk-grow-ring {
	position: absolute;
	border-radius: 50%;
	border: 1.5px solid rgba(201,168,76,.35);
	animation: kwk-grow 3s ease-out infinite;
	pointer-events: none;
}

.hero__kwk-grow-ring--1 {
	width: 110px; height: 110px;
	animation-delay: 0s;
}
.hero__kwk-grow-ring--2 {
	width: 175px; height: 175px;
	animation-delay: 1s;
	border-color: rgba(201,168,76,.2);
}
.hero__kwk-grow-ring--3 {
	width: 240px; height: 240px;
	animation-delay: 2s;
	border-color: rgba(201,168,76,.1);
}

@keyframes kwk-grow {
	0%   { opacity: 0; transform: scale(.6); }
	20%  { opacity: 1; }
	80%  { opacity: .4; }
	100% { opacity: 0; transform: scale(1); }
}

.hero__kwk-center-lg {
	width: 80px;
	height: 104px;
	border-radius: 50%;
	background: rgba(13,30,58,.9);
	border: 2px solid var(--opt-gold);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	z-index: 2;   /* Unter den Nodes (z-index:3) und Labels (z-index:50) */
	position: relative;
	box-shadow: 0 0 25px rgba(201,168,76,.25);
	animation: kwk-center-pulse 3s ease-in-out infinite;
}
@keyframes kwk-center-pulse {
	0%,100% { box-shadow: 0 0 15px rgba(201,168,76,.2); }
	50%      { box-shadow: 0 0 35px rgba(201,168,76,.45); }
}

.hero__kwk-ring-lg { position: absolute; inset: 0; z-index: 3; }

/* Neue Personen erscheinen sekündlich */
.hero__kwk-node {
	position: absolute;
	width: 52px; height: 52px;
	border-radius: 50%;
	background: rgba(13,30,58,.85);
	border: 1.5px solid rgba(201,168,76,.5);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.3rem;
	animation: kwk-appear 4s ease-in-out infinite;
	backdrop-filter: blur(6px);
}
.hero__kwk-node--1 { top:0;left:50%;transform:translateX(-50%);  animation-delay: 0s; }
.hero__kwk-node--2 { right:0;top:50%;transform:translateY(-50%); animation-delay: 1s; }
.hero__kwk-node--3 { bottom:0;left:50%;transform:translateX(-50%);animation-delay: 2s; }
.hero__kwk-node--4 { left:0;top:50%;transform:translateY(-50%);  animation-delay: 3s; }

@keyframes kwk-appear {
	0%   { opacity: 0; transform: translateX(-50%) scale(.4); }
	15%  { opacity: 1; transform: translateX(-50%) scale(1.1); }
	25%  { transform: translateX(-50%) scale(1); }
	75%  { opacity: 1; }
	100% { opacity: .6; }
}
/* Korrektur für rechts/links Nodes */
.hero__kwk-node--2 { animation-name: kwk-appear-r; }
.hero__kwk-node--4 { animation-name: kwk-appear-l; }
.hero__kwk-node--3 { animation-name: kwk-appear-b; }
@keyframes kwk-appear-r {
	0%   { opacity:0; transform:translateY(-50%) scale(.4); }
	15%  { opacity:1; transform:translateY(-50%) scale(1.1); }
	25%  { transform:translateY(-50%) scale(1); }
	75%  { opacity:1; } 100%{ opacity:.6; }
}
@keyframes kwk-appear-l {
	0%   { opacity:0; transform:translateY(-50%) scale(.4); }
	15%  { opacity:1; transform:translateY(-50%) scale(1.1); }
	25%  { transform:translateY(-50%) scale(1); }
	75%  { opacity:1; } 100%{ opacity:.6; }
}
@keyframes kwk-appear-b {
	0%   { opacity:0; transform:translateX(-50%) scale(.4); }
	15%  { opacity:1; transform:translateX(-50%) scale(1.1); }
	25%  { transform:translateX(-50%) scale(1); }
	75%  { opacity:1; } 100%{ opacity:.6; }
}

/* Dashed orbit ring */
.hero__kwk-ring-lg::before {
	content: '';
	position: absolute;
	inset: 18px;
	border-radius: 50%;
	border: 1px dashed rgba(201,168,76,.2);
	animation: kwk-spin-lg 18s linear infinite;
}
@keyframes kwk-spin-lg { to { transform: rotate(360deg); } }

/* ==========================================================================
   FOLIE 1 – Text-Layout Verbesserungen
   ========================================================================== */

/* Mehr vertikaler Abstand zwischen Elementen */
.opt-kit-slider__content .opt-kit-slider__badge { margin-bottom: 1.25rem; }
.opt-kit-slider__content .opt-kit-slider__heading { margin-bottom: 1.25rem; }
.opt-kit-slider__content .opt-kit-slider__subtext { margin-bottom: 2rem; }

/* Buttons untereinander auf Mobile und mehr Abstand */
.opt-kit-slider__ctas {
	gap: 1rem;
	flex-wrap: wrap;
}

/* Video-Button als eigene Zeile */
.hero__vid-btn { display: flex; margin-top: .75rem; }

@media(max-width:1024px) {
	.hero__kwk-float { width: 200px; height: 200px; }
	.hero__kwk-center-lg { width: 64px; height: 64px; font-size: 1.6rem; }
	.hero__kwk-node { width: 42px; height: 42px; font-size: 1.1rem; }
	.hero__kwk-grow-ring--1 { width: 88px; height: 88px; }
	.hero__kwk-grow-ring--2 { width: 136px; height: 136px; }
	.hero__kwk-grow-ring--3 { width: 185px; height: 185px; }
}

/* ── Logo über Badge ────────────────────────────────────────────────── */
.hero__slider-logo {
	margin-bottom: 1.25rem;
}

.hero__slider-logo-img {
	height: 104px;
	width: auto;
	display: block;
	filter: brightness(0) invert(1);
	opacity: .92;
	max-width: 364px;
}

/* ── Slider Track fix für Responsivität ─────────────────────────────── */
.hero-slider { width: 100%; }
.hero-slider__track { width: 100%; }
.hero-slide {
	min-width: 100%;
	width: 100%;
	overflow: hidden;
}

/* Slider-Pfeile: nie Content überlappen */
.hero-slider__prev { left: 1rem; }
.hero-slider__next { right: 1rem; }

@media (max-width: 1024px) {
	.hero-slider__prev,
	.hero-slider__next {
		width: 36px;
		height: 36px;
		font-size: .9rem;
	}
}

@media (max-width: 768px) {
	.hero-slider__prev,
	.hero-slider__next { display: none; }
	.hero__slider-logo-img { height: 30px; }
}

/* ==========================================================================
   FOLIE 2 – KI Symbol Tooltips bei Hover
   ========================================================================== */

.hero__ki-item {
	position: relative;
	display: flex;
	align-items: center;
}

.hero__ki-tooltip {
	position: absolute;
	left: calc(100% + 16px);
	top: 50%;
	transform: translateY(-50%);
	background: rgba(10, 20, 40, 0.95);
	border: 1px solid rgba(201, 168, 76, 0.4);
	backdrop-filter: blur(12px);
	padding: .75rem 1rem;
	width: 220px;
	pointer-events: none;
	opacity: 0;
	transform: translateY(-50%) translateX(-8px);
	transition: opacity .25s ease, transform .25s ease;
	z-index: 30;
}

.hero__ki-tooltip--right {
	left: auto;
	right: calc(100% + 16px);
	transform: translateY(-50%) translateX(8px);
}

/* Goldene Spitze */
.hero__ki-tooltip::before {
	content: '';
	position: absolute;
	top: 50%;
	left: -6px;
	transform: translateY(-50%) rotate(45deg);
	width: 10px;
	height: 10px;
	background: rgba(10, 20, 40, 0.95);
	border-left: 1px solid rgba(201, 168, 76, 0.4);
	border-bottom: 1px solid rgba(201, 168, 76, 0.4);
}

.hero__ki-tooltip--right::before {
	left: auto;
	right: -6px;
	border: none;
	border-right: 1px solid rgba(201, 168, 76, 0.4);
	border-top: 1px solid rgba(201, 168, 76, 0.4);
}

.hero__ki-tooltip strong {
	display: block;
	font-family: var(--opt-font-sans);
	font-size: .72rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--opt-gold);
	margin-bottom: .35rem;
}

.hero__ki-tooltip span {
	display: block;
	font-size: .75rem;
	color: rgba(245, 240, 232, .75);
	line-height: 1.55;
}

/* Hover ODER automatisch – animiert sequenziell */
.hero__ki-item:hover .hero__ki-tooltip,
.hero__ki-item:hover .hero__ki-tooltip--right {
	opacity: 1 !important;
	transform: translateY(-50%) translateX(0) !important;
	animation: none !important;
}

/* Automatisch: Tooltip 1 sofort, Tooltip 2 nach 1s, Tooltip 3 nach 2s */
.hero__ki-item:nth-child(1) .hero__ki-tooltip {
	animation: ki-tooltip-auto 6s ease-in-out infinite;
	animation-delay: 0s;
}
.hero__ki-item:nth-child(3) .hero__ki-tooltip--right {
	animation: ki-tooltip-auto 6s ease-in-out infinite;
	animation-delay: 2s;
}
.hero__ki-item:nth-child(5) .hero__ki-tooltip {
	animation: ki-tooltip-auto 6s ease-in-out infinite;
	animation-delay: 4s;
}

@keyframes ki-tooltip-auto {
	0%   { opacity: 0; transform: translateY(-50%) translateX(-8px); }
	8%   { opacity: 1; transform: translateY(-50%) translateX(0); }
	28%  { opacity: 1; transform: translateY(-50%) translateX(0); }
	36%  { opacity: 0; transform: translateY(-50%) translateX(-8px); }
	100% { opacity: 0; }
}

/* ==========================================================================
   FOLIE 3 – KWK Notification Labels
   ========================================================================== */

.hero__kwk-node {
	overflow: visible !important; /* Labels dürfen rausragen */
}

.hero__kwk-label {
	position: absolute;
	white-space: nowrap;
	font-family: var(--opt-font-sans);
	font-size: .62rem;
	font-weight: 600;
	letter-spacing: .06em;
	color: var(--opt-gold);
	background: rgba(10, 20, 40, .97);
	border: 1px solid rgba(201, 168, 76, .55);
	padding: .25rem .6rem;
	pointer-events: none;
	opacity: 0;
	z-index: 100; /* absolut im Vordergrund - über allem */
	/* Standard: rechts vom Node */
	top: 50%;
	left: calc(100% + 10px);
	transform: translateY(-50%) translateX(-6px);
}

/* Jeder Node zeigt sein Label zeitgleich mit seiner Erscheinungsanimation */
.hero__kwk-node--1 .hero__kwk-label {
	top: auto;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	animation: kwk-label-appear 4s ease-in-out infinite;
	animation-delay: 0s;
}
.hero__kwk-node--2 .hero__kwk-label {
	top: 50%;
	left: calc(100% + 10px); /* rechts – Node 2 ist ganz rechts im Ring */
	right: auto;
	transform: translateY(-50%) translateX(-6px);
	animation: kwk-label-appear 4s ease-in-out infinite;
	animation-delay: -1s;
}
.hero__kwk-node--3 .hero__kwk-label {
	top: calc(100% + 8px);
	bottom: auto;
	left: 50%;
	transform: translateX(-50%) translateY(-4px);
	animation: kwk-label-appear 4s ease-in-out infinite;
	animation-delay: -2s;
}
.hero__kwk-node--4 .hero__kwk-label {
	top: 50%;
	left: calc(100% + 10px);  /* rechts vom Node */
	transform: translateY(-50%) translateX(-6px);
	animation: kwk-label-appear 4s ease-in-out infinite;
	animation-delay: -3s;
}

@keyframes kwk-label-appear {
	0%   { opacity: 0; }
	15%  { opacity: 1; }
	60%  { opacity: 1; }
	80%  { opacity: 0; }
	100% { opacity: 0; }
}

/* Mobile: Tooltips & Labels ausblenden */
@media (max-width: 768px) {
	.hero__ki-tooltip,
	.hero__ki-tooltip--right,
	.hero__kwk-label { display: none; }
}

/* ── Folie 1: Video btn + CTA vertikal gestapelt ──────────────────── */
.opt-kit-slider__ctas {
	flex-direction: column;
	align-items: flex-start;
	gap: 1.4rem;
}
.hero__cta-block {
	display: flex;
	width: auto;
}

/* ==========================================================================
   FOLIE 1 – Expertise Badges unter Portrait
   ========================================================================== */

.hero__portrait-wrap {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
}

.hero__expertise-badges {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .5rem;
	width: 100%;
	margin-top: .75rem;
}

.hero__expertise-badge {
	display: flex;
	align-items: center;
	gap: .55rem;
	padding: .55rem .8rem;
	background: rgba(10, 20, 40, .75);
	border: 1px solid rgba(201, 168, 76, .3);
	backdrop-filter: blur(8px);
	transition: border-color .2s, background .2s;
}

.hero__expertise-badge:hover {
	border-color: rgba(201, 168, 76, .7);
	background: rgba(201, 168, 76, .08);
}

.hero__expertise-icon {
	font-size: 1.1rem;
	flex-shrink: 0;
}

.hero__expertise-badge span:last-child {
	font-family: var(--opt-font-sans);
	font-size: .78rem;
	font-weight: 600;
	color: var(--opt-cream);
	line-height: 1.3;
}

.hero__expertise-badge small {
	font-size: .65rem;
	font-weight: 400;
	color: var(--opt-text-muted);
	letter-spacing: .05em;
}

@media (max-width: 768px) {
	.hero__expertise-badges { display: none; }
}