/* Konzepte-Seite (Artikel 573) – Dark Mode, Stand 06.10.2026
   Alle Regeln laufen über den Wrapper .kz (z. B. ".kz .kz-text"),
   damit sie die Template-Regeln ".mainInner p / ul" sicher schlagen. */

/* ---------- Template-Rahmen ---------- */
body { background:#161515; }
.mainnormal { width:100%; margin:0; }
.mainInner { padding:0; width:100%; }
html, body { overflow-x:clip; }

/* Ersatz für die entfernten <div class="clr"></div> im Template */
header, .menu, .mainnormal, .mainInner, .untenOuter, .untenInner { display:flow-root; }
@media (max-width:1000px) { ul.rex-navi1 { float:none; } }

/* ---------- Grundgerüst ---------- */
.kz {
	width:100vw; max-width:100vw;
	margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
	background:#161515; color:#e8e6e3;
	font-family:Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
	letter-spacing:.01em;
	-webkit-text-size-adjust:100%; text-size-adjust:100%;
	-webkit-font-smoothing:antialiased;
}
.kz * { box-sizing:border-box; }
.kz .kz-wrap { max-width:1280px; margin:0 auto; padding:0 5%; }
.kz .kz-stack { display:flex; flex-direction:column; gap:24px; }
.kz .kz-center { align-items:center; text-align:center; }
.kz .kz-two { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(340px,100%),1fr)); gap:48px 96px; align-items:start; }
.kz .kz-align-center { align-items:center; }

/* Hintergrund „Sternenhimmel“ (wie Agentur/Webdesign) */
.kz .tg-space{background-color:#08070b;background-image:radial-gradient(1px 1px at 12% 18%,rgba(255,255,255,.8),transparent 60%),radial-gradient(1px 1px at 78% 12%,rgba(255,255,255,.6),transparent 60%),radial-gradient(1.5px 1.5px at 33% 72%,rgba(255,255,255,.7),transparent 60%),radial-gradient(1px 1px at 88% 64%,rgba(255,255,255,.7),transparent 60%),radial-gradient(1px 1px at 55% 40%,rgba(255,255,255,.5),transparent 60%),radial-gradient(1px 1px at 6% 86%,rgba(255,255,255,.6),transparent 60%),radial-gradient(1.5px 1.5px at 66% 88%,rgba(255,255,255,.6),transparent 60%),radial-gradient(circle at 18% 30%,rgba(90,38,128,.55),transparent 45%),radial-gradient(circle at 85% 75%,rgba(61,26,82,.9),transparent 50%)}

/* ---------- Typografie ---------- */
.kz .kz-eyebrow { margin:0; font-size:15px; font-weight:500; letter-spacing:.18em; color:#8b63ff; }
.kz .kz-eyebrow-light { color:#cbb8ff; }
.kz .kz-h1 { margin:0; font-size:clamp(44px,5.4vw,76px); line-height:1.04; font-weight:700; letter-spacing:-.02em; color:#fff; }
.kz .kz-h2 { margin:0; font-size:clamp(32px,3.4vw,48px); line-height:1.12; font-weight:700; letter-spacing:-.01em; color:#fff; }
.kz .kz-h3 { margin:0; font-size:24px; line-height:1.25; font-weight:700; color:#fff; }
.kz .kz-lead { margin:0; font-size:clamp(22px,2.2vw,28px); line-height:1.35; font-weight:400; color:#cbb8ff; }
.kz .kz-text { margin:0; max-width:620px; font-size:18px; line-height:1.7; font-weight:300; color:#dedad5; }
.kz .kz-small { margin:0; font-size:17px; line-height:1.65; font-weight:300; color:#dedad5; }
.kz .kz-lila { color:#8b63ff; }
.kz .kz-lila-light { color:#cbb8ff; }
.kz .kz-muted { color:#a9a5a0; }

/* ---------- Buttons & Links ---------- */
.kz .kz-buttons { display:flex; flex-wrap:wrap; gap:16px; padding-top:8px; }
.kz .kz-center-row { justify-content:center; }
.kz .kz-btn { display:inline-flex; align-items:center; min-height:52px; padding:0 28px; background:#5b3fc4; border:1px solid #5b3fc4; color:#fff; text-decoration:none; font-size:17px; font-weight:500; transition:background-color .15s; }
.kz .kz-btn:hover, .kz .kz-btn:focus-visible { background:#6d52d6; border-color:#6d52d6; color:#fff; }
.kz .kz-btn-ghost { background:transparent; border-color:rgba(255,255,255,.7); }
.kz .kz-btn-ghost:hover, .kz .kz-btn-ghost:focus-visible { background:rgba(255,255,255,.08); border-color:#fff; }
.kz .kz-link { align-self:flex-start; display:inline-flex; align-items:center; min-height:44px; color:#fff; text-decoration:none; font-size:17px; font-weight:500; border-bottom:1px solid #8b63ff; }
.kz .kz-link:hover { color:#cbb8ff; }

/* ---------- Abschnitte ---------- */
.kz .kz-hero { padding:96px 0; }
.kz .kz-hero-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(380px,100%),1fr)); gap:48px 80px; align-items:center; }
.kz .kz-figure { display:flex; justify-content:center; }
.kz .kz-grafik { width:100%; max-width:520px; height:auto; display:block; }
.kz .kz-section { padding:120px 0; }
.kz .kz-band { padding:96px 0; background:#1e1d1c; border-top:1px solid #2c2a28; border-bottom:1px solid #2c2a28; }
.kz .kz-band .kz-stack { gap:16px; }
.kz .kz-steps { list-style:none; margin:40px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(240px,100%),1fr)); gap:40px; }
.kz .kz-step { display:flex; flex-direction:column; gap:14px; padding-top:28px; border-top:1px solid #3a3835; }
.kz .kz-num { font-size:15px; font-weight:500; letter-spacing:.12em; color:#8b63ff; }
.kz .kz-cloud { padding:112px 0; }

/* Word Cloud */
.kz .kz-words { display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:12px 32px; line-height:1.1; max-width:1000px; padding-top:16px; }
.kz .kz-words span { color:#f4f1ec; }
.kz .kz-words .w1 { font-size:clamp(52px,6vw,88px); font-weight:900; letter-spacing:-.03em; color:#fff; }
.kz .kz-words .w2 { font-size:clamp(36px,4vw,56px); font-weight:700; }
.kz .kz-words .w3 { font-size:38px; font-weight:500; }
.kz .kz-words .w4 { font-size:30px; font-weight:400; }
.kz .kz-words .w5 { font-size:26px; font-weight:300; }
.kz .kz-words .kz-lila { color:#cbb8ff; }
.kz .kz-words .kz-muted { color:#a9a5a0; }
.kz .kz-words .kz-tag { background:#6b3591; color:#fff; font-weight:700; padding:4px 16px 8px; }

/* Logos – weiße Karten, damit dunkle Schriftzüge im Dark Mode lesbar bleiben */
.kz .kz-logos { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.kz .kz-logo { display:flex; flex-direction:column; gap:12px; margin:0; }
.kz .kz-logo img { display:block; width:100%; height:auto; aspect-ratio:3 / 2; object-fit:contain; background:#ffffff; padding:18px 22px; border-radius:6px; box-sizing:border-box; }
.kz .kz-logo-cover img { object-fit:cover; padding:0; background:#3a5a35; }
.kz .kz-cap { font-size:15px; line-height:1.4; color:#c4c0bb; }

/* Abschluss */
.kz .kz-cta { padding:112px 0; background:linear-gradient(180deg,#1e1d1c 0%,#161515 100%); border-top:1px solid #2c2a28; }
.kz .kz-cta .kz-text { max-width:560px; }

/* ---------- Mobil (bis 767px) ---------- */
@media (max-width:767px) {
	.kz .kz-wrap { padding:0 20px; }
	.kz .kz-stack { gap:18px; }
	.kz .kz-hero { padding:48px 0 56px; }
	.kz .kz-hero-grid { gap:32px; }
	.kz .kz-h1 { font-size:38px; }
	.kz .kz-h2 { font-size:30px; }
	.kz .kz-h3 { font-size:22px; }
	.kz .kz-lead { font-size:21px; }
	.kz .kz-text, .kz .kz-small { font-weight:400; color:#ebe7e2; }
	.kz .kz-section { padding:64px 0; }
	.kz .kz-two { gap:28px; }
	.kz .kz-band { padding:56px 0; }
	.kz .kz-steps { margin-top:24px; gap:28px; }
	.kz .kz-cloud { padding:64px 0; }
	.kz .kz-words { zoom:.62; }
	.kz .kz-logos { gap:12px; }
	.kz .kz-logo img { padding:10px 12px; }
	.kz .kz-logo-cover img { padding:0; }
	.kz .kz-cta { padding:72px 0; }
	.kz .kz-btn { min-height:48px; padding:0 22px; font-size:16px; }
}

/* ==========================================================
   HELLER MODUS (Betriebssystem/Browser auf „Hell“)
   Bild-Bereiche (Hero, Kontakt) und Sternenhimmel bleiben dunkel,
   alle übrigen Abschnitte werden hell.
   ========================================================== */
@media (prefers-color-scheme: light){
body{background:#f6f4f1}
.kz{background:#f6f4f1;color:#2a2826}
.kz .kz-band{background:#ebe7e2;border-color:#d9d3cc}
.kz .kz-cta{background:linear-gradient(180deg,#ebe7e2 0%,#f6f4f1 100%);border-top-color:#d9d3cc}
.kz :is(.kz-section,.kz-band,.kz-cta) :is(.kz-h1,.kz-h2,.kz-h3){color:#1b1918}
.kz :is(.kz-section,.kz-band,.kz-cta) :is(.kz-text,.kz-small){color:#3b3835}
.kz :is(.kz-section,.kz-band,.kz-cta) :is(.kz-eyebrow,.kz-num,.kz-lila){color:#6a45e0}
.kz :is(.kz-section,.kz-band,.kz-cta) .kz-lila-light{color:#6a45e0}
.kz :is(.kz-section,.kz-band,.kz-cta) .kz-lead{color:#5b3fc4}
.kz :is(.kz-section,.kz-band,.kz-cta) .kz-muted{color:#6b6661}
.kz :is(.kz-section,.kz-band,.kz-cta) .kz-cap{color:#5c5853}
.kz :is(.kz-section,.kz-band,.kz-cta) .kz-step{border-top-color:#cfc8c0}
.kz :is(.kz-section,.kz-band,.kz-cta) .kz-link{color:#1b1918;border-bottom-color:#6a45e0}
.kz :is(.kz-section,.kz-band,.kz-cta) .kz-link:hover{color:#5b3fc4}
.kz :is(.kz-section,.kz-band,.kz-cta) .kz-btn-ghost{color:#1b1918;border-color:#1b1918}
.kz :is(.kz-section,.kz-band,.kz-cta) .kz-btn-ghost:hover,.kz :is(.kz-section,.kz-band,.kz-cta) .kz-btn-ghost:focus-visible{background:rgba(27,25,24,.06);color:#1b1918;border-color:#1b1918}
.kz :is(.kz-section,.kz-band,.kz-cta) .kz-logo img{box-shadow:0 0 0 1px #d9d3cc}
}