/* === Ratgeber / Wissensdatenbank === */

/* Container — .kmp-sec/.kmp-sec__inner leben in produkt.css, die hier nicht geladen wird */
.kmp-ratgeber-archiv .kmp-sec,
.kmp-ratgeber-single .kmp-sec { padding: clamp(56px, 6vw, 88px) clamp(20px, 4vw, 56px); position: relative; }
.kmp-ratgeber-archiv .kmp-sec__inner,
.kmp-ratgeber-single .kmp-sec__inner { max-width: 1280px; margin: 0 auto; width: 100%; }
.kmp-ratgeber-archiv .kmp-sec--light,
.kmp-ratgeber-single .kmp-sec--light { background: #F5F5F7; }
.kmp-ratgeber-archiv .kmp-h2,
.kmp-ratgeber-single .kmp-h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; color: #0D0B2E; letter-spacing: -0.02em; margin: 0 0 6px; }
.kmp-ratgeber-archiv .kmp-eyebrow,
.kmp-ratgeber-single .kmp-eyebrow { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #7F77DD; margin-bottom: 10px; }
.kmp-ratgeber-archiv .dot,
.kmp-ratgeber-single .dot { color: #7F77DD; }

/* --- Hero --- */
.kmp-rg-hero {
	position: relative;
	overflow: hidden;
	color: #fff;
	padding: clamp(100px, 13vw, 165px) clamp(20px, 4vw, 56px) clamp(76px, 9vw, 112px);
	background: linear-gradient(135deg, #0D0B2E 0%, #534AB7 100%);
	text-align: center;
}
.kmp-rg-hero::before {
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
	background: radial-gradient(ellipse 65% 60% at 50% 28%, rgba(127,119,221,0.30) 0%, transparent 70%);
}
.kmp-rg-hero__orb {
	position: absolute; z-index: 0; pointer-events: none;
	width: 760px; height: 760px; border-radius: 50%;
	top: -320px; left: 50%; margin-left: -380px;
	background: radial-gradient(circle, rgba(175,169,236,0.42) 0%, transparent 62%);
	filter: blur(100px);
	opacity: 0.55;
	animation: kmp-rg-drift 28s ease-in-out infinite;
}
@keyframes kmp-rg-drift {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50%      { transform: translate(-28px, 24px) scale(1.07); }
}
.kmp-rg-hero__raster {
	position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background-image:
		linear-gradient(rgba(175,169,236,0.055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(175,169,236,0.055) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(ellipse at 50% 38%, black 0%, transparent 72%);
	        mask-image: radial-gradient(ellipse at 50% 38%, black 0%, transparent 72%);
}
.kmp-rg-hero__inner {
	position: relative; z-index: 1;
	max-width: 800px; margin: 0 auto;
	display: flex; flex-direction: column; align-items: center;
}

.kmp-rg-badge {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 7px 16px; border-radius: 100px;
	background: rgba(255,255,255,0.10);
	border: 1px solid rgba(175,169,236,0.30);
	font-size: 13px; font-weight: 700; letter-spacing: 0.03em;
	color: #DCD9F5;
	backdrop-filter: blur(6px);
}
.kmp-rg-badge svg { color: #AFA9EC; }

.kmp-rg-h1 { margin: 22px 0 20px; font-weight: 800; letter-spacing: -0.028em; line-height: 1.06; color: #fff; }
.kmp-rg-h1__klein {
	display: block;
	font-size: clamp(1.5rem, 3.2vw, 2.4rem);
	font-weight: 700;
	color: rgba(220,217,245,0.85);
	margin-bottom: 4px;
}
.kmp-rg-h1__gross {
	display: block;
	font-size: clamp(2.1rem, 4.8vw, 3.5rem);
	background: linear-gradient(92deg, #FFFFFF 0%, #DAD5FF 55%, #AFA9EC 100%);
	-webkit-background-clip: text;
	        background-clip: text;
	-webkit-text-fill-color: transparent;
}
.kmp-rg-h1__gross .dot { -webkit-text-fill-color: #AFA9EC; color: #AFA9EC; }

.kmp-rg-hero__lead {
	font-size: clamp(1rem, 1.5vw, 1.15rem);
	line-height: 1.65;
	color: rgba(201,197,232,0.9);
	max-width: 600px;
	margin: 0 0 30px;
}
.kmp-rg-hero__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.kmp-rg-hero__meta span {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 6px 15px; border-radius: 100px;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(175,169,236,0.20);
	font-size: 13px; font-weight: 600; color: #C9C5E8;
}
.kmp-rg-hero__meta span::before {
	content: ""; width: 5px; height: 5px; border-radius: 50%; background: #7F77DD; flex: 0 0 auto;
}
@media (prefers-reduced-motion: reduce) { .kmp-rg-hero__orb { animation: none; } }

/* Karten-Grid */
.kmp-rg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 32px; }
.kmp-rg-card { display: flex; flex-direction: column; background: #fff; border-radius: 18px; overflow: hidden; text-decoration: none; color: #0D0B2E; box-shadow: 0 10px 30px rgba(45,40,90,0.06); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.kmp-rg-card:hover { transform: translateY(-5px); box-shadow: 0 24px 50px rgba(45,40,90,0.15); color: #0D0B2E; border-color: #D8D4F2; }
.kmp-rg-card { border: 1px solid #ECEAF8; }
.kmp-rg-card__bild--leer {
	aspect-ratio: 16/9;
	background: linear-gradient(135deg, #0D0B2E 0%, #534AB7 100%);
	position: relative;
}
.kmp-rg-card__bild--leer::after {
	content: ""; position: absolute; inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
	background-size: 32px 32px;
	-webkit-mask-image: radial-gradient(ellipse at 60% 50%, black 0%, transparent 75%);
	        mask-image: radial-gradient(ellipse at 60% 50%, black 0%, transparent 75%);
}
.kmp-rg-card__bild { aspect-ratio: 16/9; overflow: hidden; background: #F0EFFE; }
.kmp-rg-card__bild img { width: 100%; height: 100%; object-fit: cover; }
.kmp-rg-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.kmp-rg-card__meta { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #7F77DD; }
.kmp-rg-card__titel { font-size: 19px; font-weight: 700; line-height: 1.32; margin: 0; }
.kmp-rg-card__text { font-size: 14px; line-height: 1.6; color: #6b6b7d; margin: 0; flex: 1; }
.kmp-rg-card__link { font-size: 14px; font-weight: 700; color: #7F77DD; margin-top: 8px; transition: gap 0.2s ease; }
.kmp-rg-card:hover .kmp-rg-card__link { color: #6a62c9; }

/* Artikel-Kopf */
.kmp-rg-kopf {
	position: relative;
	overflow: hidden;
	color: #fff;
	padding: clamp(80px, 10vw, 130px) clamp(20px, 4vw, 56px) clamp(56px, 7vw, 90px);
	background: linear-gradient(135deg, #0D0B2E 0%, #534AB7 100%);
}
.kmp-rg-kopf::before {
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
	background: radial-gradient(ellipse 60% 55% at 75% 30%, rgba(127,119,221,0.26) 0%, transparent 70%);
}
.kmp-rg-kopf::after {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background-image:
		linear-gradient(rgba(175,169,236,0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(175,169,236,0.05) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(ellipse at 70% 45%, black 0%, transparent 72%);
	        mask-image: radial-gradient(ellipse at 70% 45%, black 0%, transparent 72%);
}
.kmp-rg-kopf__inner { max-width: 800px; margin: 0 auto; position: relative; z-index: 1; }
.kmp-rg-kopf .kmp-h1 {
	color: #fff; margin: 18px 0 16px;
	font-size: clamp(1.9rem, 4.2vw, 3rem);
	font-weight: 800; line-height: 1.15; letter-spacing: -0.025em;
}
.kmp-rg-back {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 14px; color: #AFA9EC; text-decoration: none; font-weight: 600;
	transition: color 0.2s ease, gap 0.2s ease;
}
.kmp-rg-back:hover { color: #fff; gap: 10px; }
.kmp-rg-kopf__meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; color: rgba(155,150,201,0.95); margin-bottom: 20px; }
.kmp-rg-kopf__lead { font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.65; color: rgba(201,197,232,0.92); margin: 0; }

.kmp-rg-hero-bild { max-width: 1000px; margin: -40px auto 0; padding: 0 24px; position: relative; z-index: 2; }
.kmp-rg-hero-bild img { width: 100%; border-radius: 18px; box-shadow: 0 24px 60px rgba(13,11,46,0.24); }

/* Artikel-Inhalt */
.kmp-rg-inhalt { max-width: 760px; margin: 0 auto; font-size: 17px; line-height: 1.75; color: #33314d; }
.kmp-rg-inhalt h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); font-weight: 700; color: #0D0B2E; margin: 48px 0 16px; line-height: 1.25; }
.kmp-rg-inhalt h3 { font-size: clamp(1.15rem, 1.8vw, 1.35rem); font-weight: 700; color: #0D0B2E; margin: 32px 0 12px; }
.kmp-rg-inhalt p { margin: 0 0 18px; }
.kmp-rg-inhalt ul, .kmp-rg-inhalt ol { margin: 0 0 22px; padding-left: 22px; }
.kmp-rg-inhalt li { margin-bottom: 9px; }
.kmp-rg-inhalt strong { color: #0D0B2E; font-weight: 700; }
.kmp-rg-inhalt a { color: #7F77DD; font-weight: 600; }
.kmp-rg-inhalt table { width: 100%; border-collapse: collapse; margin: 24px 0 28px; font-size: 15px; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 24px rgba(45,40,90,0.06); }
.kmp-rg-inhalt th { background: #F0EFFE; color: #0D0B2E; font-weight: 700; text-align: left; padding: 12px 16px; }
.kmp-rg-inhalt td { padding: 12px 16px; border-top: 1px solid #EDEBF9; }
.kmp-rg-inhalt blockquote { margin: 26px 0; padding: 18px 24px; background: #F0EFFE; border-left: 4px solid #7F77DD; border-radius: 8px; font-size: 16px; }
.kmp-rg-inhalt blockquote p:last-child { margin-bottom: 0; }

/* CTA */
.kmp-rg-cta { text-align: center; padding: clamp(60px, 8vw, 96px) 0; }
.kmp-rg-cta p { color: #6b6b7d; margin: 12px 0 26px; font-size: 17px; }
.kmp-rg-pagination { margin-top: 40px; text-align: center; }
.kmp-rg-pagination .page-numbers { display: inline-block; padding: 8px 14px; margin: 0 3px; border-radius: 8px; text-decoration: none; color: #0D0B2E; font-weight: 600; }
.kmp-rg-pagination .page-numbers.current { background: #0D0B2E; color: #fff; }

@media (max-width: 980px) { .kmp-rg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .kmp-rg-grid { grid-template-columns: 1fr; } .kmp-rg-inhalt { font-size: 16px; } }

/* Leerer Zustand: Abstand statt am Hero kleben */
.kmp-rg-leer { padding: 60px 0; text-align: center; color: #6b6b7d; font-size: 17px; }