/* =========================================================
   KUNT & BUNT REDESIGN
   Bereinigter Masterstand
   letzte Aenderung 02-11-2026
   ========================================================= */

.page-title, .page-header  { display:none !important; }
.rund5 { border-radius: 5px 5px 5px 5px; }
.rund10 { border-radius: 8px 8px 8px 8px; }
.rund20 { border-radius: 20px 20px 20px 20px; }
.fineborder { border: 1px solid #ccc; }

/* ========================================================= KUNT & BUNT Schriften ========================================================= */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* Grundvariablen */
:root {
    --font-display: 'DM Serif Display', serif;
    --font-main: 'Plus Jakarta Sans', sans-serif;
    --text-color: #2c0b30;
}

/* Grundschrift */
body {
    font-family: var(--font-main);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-color);
}

header { border:none !important; }

h1 {
    font-family: var(--font-display) !important;
    font-weight: 400;
    font-size: clamp(3rem, 5vw, 6rem);
    line-height: 0.98;
    letter-spacing: -0.02em;
    color: var(--text-color);
    margin-top: 0;
    margin-bottom: 0.4em;
}

h2 {
    font-family: var(--font-main) !important;
    font-weight: 700;
    font-size: clamp(2rem, 3.5vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: var(--text-color);
    margin-top: 0;
    margin-bottom: 0.5em;
}

.kbEmpfehlungenHeader h2, .kbthemenintro h2  { font-family: var(--font-display) !important; font-size: clamp(2.8rem, 4.5vw, 5rem); font-weight: 500; color: #2c0b30; }

h3 {
    font-family: var(--font-main) !important;
    font-weight: 600;
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--text-color);
    margin-top: 0;
    margin-bottom: 0.5em;
}

.topbar p { color:#fff !important; }

p, .text {
    font-family: var(--font-main);
    font-weight: 400;
    font-size: clamp(1rem, 1.1vw, 1.125rem);
    line-height: 1.7;
    color: var(--text-color);
}

a { font-family: var(--font-main); }

button, .btn, .button {
    font-family: var(--font-main);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.2;
    letter-spacing: 0.01em;
}

nav, nav a {
    font-family: var(--font-main);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
}

small, .small {
    font-family: var(--font-main);
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.6;
}

.schatten { box-shadow: 0 0 15px rgba(0, 0, 0, 0.7); }

/* Optional f?r sehr grosse Titelbereiche */
.hero h1, {
    font-size: clamp(3.5rem, 7vw, 7rem);
    line-height: 0.92;
}

/* Tablet */
@media screen and (max-width: 1024px) {
    body { font-size: 16px; }
    h1 { font-size: clamp(2.8rem, 7vw, 4.5rem); }
    h2 { font-size: clamp(1.8rem, 5vw, 2.8rem); }
}

/* Mobile */
@media screen and (max-width: 767px) {
    body { font-size: 16px; line-height: 1.65; }
    h1 { font-size: clamp(2.5rem, 12vw, 3.6rem); line-height: 1; }
    h2 { font-size: clamp(1.75rem, 8vw, 2.4rem); line-height: 1.1; }
    h3 { font-size: 1.25rem; line-height: 1.3; }
    p, .text { font-size: 1rem; line-height: 1.65; }
}

/* ========================================================= KUNT & BUNT UNSERE EMPFEHLUNGEN ========================================================= */

.kbEmpfehlungen { --kbCardWidth: min(68vw, 980px); --kbGap: 28px; width: 100%; padding: 90px 0 100px; overflow: hidden; background: #f5f5f7; box-sizing: border-box; }

/* HEADER  */
.kbEmpfehlungenHeader { width: min(1500px, calc(100% - 80px)); margin: 0 auto 42px; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; box-sizing: border-box; }
.kbEmpfehlungenTitel { flex: 1; min-width: 0; }
.kbEmpfehlungenOverline { display: block; margin-bottom: 10px; color: #777777; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.kbEmpfehlungenHeader h2 { margin: 0; line-height: 1; letter-spacing: -0.035em; }

/* NAVIGATION */
.kbEmpfehlungenNavigation { display: flex; align-items: center; Justify-content: flex-end; gap: 10px; flex-shrink: 0; }
.kbEmpfehlungenNav { display: inline-flex; align-items: center; justify-content: center; min-width: 92px; height: 46px; padding: 0 20px; border: 0; border-radius: 5px; background: #ffffff; color: #2c0b30; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06); transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease; }
.kbEmpfehlungenNav:hover { background: #2c0b30; color: #ffffff; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(44, 11, 48, 0.18); }
.kbEmpfehlungenNav:active { transform: translateY(0); }
.kbEmpfehlungenNav:disabled { opacity: 0.4; cursor: default; }

/* VIEWPORT */
.kbEmpfehlungenViewport { position: relative; width: 100%; overflow: hidden; }

/* TRACK */
.kbEmpfehlungenTrack {

    display: flex;

    align-items: stretch;

    gap: var(--kbGap);

    width: max-content;

    padding: 6px 0 24px;

    box-sizing: border-box;

    will-change: transform;

    transform: translate3d(0, 0, 0);
}

/* KARTE */

.kbEmpfehlungenCard {

    position: relative;

	display: block;

	flex: 0 0 var(--kbCardWidth);

	width: var(--kbCardWidth);

	height: clamp(560px, 47vw, 720px);

	overflow: hidden;

	border-radius: 30px;

	background: #dddddd;

	color: #ffffff;

	text-decoration: none;

	box-shadow:
		0 10px 30px rgba(0, 0, 0, 0.06);

	transform: translateZ(0);

	transition:
		box-shadow 0.5s ease;
}

/* BILD */

.kbEmpfehlungenBild {

	position: absolute;

	inset: 0;

	width: 100%;

	height: 100%;

	object-fit: cover;

	transform: scale(1);

	transition:
		transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* OVERLAY */

.kbEmpfehlungenOverlay {

	position: absolute;

	inset: 0;

	background:
		linear-gradient(
			to bottom,
			rgba(0, 0, 0, 0.02) 10%,
			rgba(0, 0, 0, 0.05) 40%,
			rgba(0, 0, 0, 0.72) 100%
		);
}

/* CONTENT */

.kbEmpfehlungenContent {

	position: absolute;

	z-index: 2;

	left: 0;

	right: 0;

	bottom: 0;

	padding: 50px;

	box-sizing: border-box;
}

/* KICKER */

.kbEmpfehlungenKicker {

	display: block;

	margin-bottom: 12px;

	color: #ffffff;

	font-size: 13px;

	font-weight: 600;

	text-transform: uppercase;

	letter-spacing: 0.08em;

	opacity: 0.8;
}

/* TITEL */

.kbEmpfehlungenContent h3 {

	margin: 0 0 15px;

	color: #ffffff;

	font-size: clamp(2.8rem, 4vw, 4.8rem);

	font-weight: 600;

	line-height: 0.95;

	letter-spacing: -0.04em;
}

/* TEXT */

.kbEmpfehlungenContent p {

	max-width: 500px;

	margin: 0 0 28px;

	color: #ffffff;

	font-size: clamp(16px, 1.2vw, 19px);

	line-height: 1.5;

	opacity: 0.92;
}

/* BUTTON */

.kbEmpfehlungenButton {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	min-height: 48px;

	padding: 0 24px;

	border-radius: 5px;

	background: rgba(255, 255, 255, 0.96);

	color: #2c0b30;

	font-size: 14px;

	font-weight: 600;

	transition:
		background 0.3s ease,
		color 0.3s ease,
		transform 0.3s ease;
}

/* HOVER */

@media (hover: hover) {

	.kbEmpfehlungenCard:hover {

		box-shadow:
			0 22px 55px rgba(0, 0, 0, 0.14);
	}

	.kbEmpfehlungenCard:hover .kbEmpfehlungenBild {

		transform: scale(1.055);
	}

	.kbEmpfehlungenCard:hover .kbEmpfehlungenButton {

		background: #2c0b30;

		color: #ffffff;

		transform: translateY(-2px);
	}

}

/* TABLET */

@media screen and (max-width: 1100px) {

	.kbEmpfehlungen {

		--kbCardWidth: 76vw;

		--kbGap: 22px;

		padding: 70px 0 80px;
	}

	.kbEmpfehlungenHeader {

		width: calc(100% - 48px);

		margin-bottom: 32px;
	}

	.kbEmpfehlungenCard {

		height: 600px;

		border-radius: 26px;
	}

	.kbEmpfehlungenContent {

		padding: 38px;
	}

	.kbEmpfehlungenContent h3 {

		font-size: clamp(2.5rem, 6vw, 4rem);
	}

	.kbEmpfehlungenNav {

		min-width: 82px;

		height: 44px;

		padding: 0 17px;

		font-size: 13px;
	}

}

/* MOBILE */

@media screen and (max-width: 650px) {

	.kbEmpfehlungen {

		--kbCardWidth: 86vw;

		--kbGap: 14px;

		padding: 55px 0 65px;
	}

	.kbEmpfehlungenHeader {

		width: calc(100% - 36px);

		margin-bottom: 26px;

		display: block;
	}

	.kbEmpfehlungenOverline {

		margin-bottom: 8px;

		font-size: 11px;
	}

	.kbEmpfehlungenHeader h2 {

		font-size: clamp(2.5rem, 11vw, 3.8rem);
	}

	.kbEmpfehlungenNavigation {

		display: none;
	}

	.kbEmpfehlungenCard {

		height: 520px;

		border-radius: 22px;
	}

	.kbEmpfehlungenContent {

		padding: 28px;
	}

	.kbEmpfehlungenContent h3 {

		margin-bottom: 12px;

		font-size: clamp(2.2rem, 10vw, 3rem);
	}

	.kbEmpfehlungenContent p {

		margin-bottom: 22px;

		font-size: 15px;

		line-height: 1.45;
	}

	.kbEmpfehlungenKicker {

		margin-bottom: 9px;

		font-size: 10px;
	}
	.kbEmpfehlungenButton {

		min-height: 42px;

		padding: 0 19px;

		font-size: 13px;
	}
}

/* REDUZIERTE BEWEGUNG */
@media (prefers-reduced-motion: reduce) {
	.kbEmpfehlungenBild, .kbEmpfehlungenButton, .kbEmpfehlungenNav { transition: none; }
}

/* ========================================================= Neuer Themenbereich Startseite 4-Fach ========================================================= */

.kbthemen {
  width: 100%;
  padding: clamp(50px, 7vw, 100px) 24px;
  box-sizing: border-box;
}

.kbthemenintro {
  width: min(100%, 1400px);
  margin: 0 auto clamp(30px, 4vw, 50px);
  text-align: center;
}

.kbthemenintro h2 { margin: 0 0 12px; line-height: 1.1; }

.kbthemenintro p {
  max-width: 760px;
  margin: 0 auto;
  color: #000;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.6;
}

.kbthemengrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  width: min(100%, 1400px);
  margin: 0 auto;
}

.kbthemenkarte {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  color: #303331;
  text-decoration: none;
  border: 1px solid rgba(48, 51, 49, 0.1);
  border-radius: 5px;
  box-shadow: 0 8px 28px rgba(48, 51, 49, 0.07);
  transition:
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.kbthemenkarte1 {
  background-color: #ead0cf;
}

.kbthemenkarte2 {
  background-color: #d9ddce;
}

.kbthemenkarte3 {
  background-color: #eee0c9;
}

.kbthemenkarte4 {
  background-color: #dfcfd7;
}

.kbthemenbild {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background-color: #eeeeea;
}

.kbthemenbild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.kbthemeninhalt {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: clamp(20px, 2vw, 30px);
}

.kbthemeninhalt h3 {
  margin: 0 0 10px;
  color: #303331;
  font-size: clamp(23px, 2vw, 30px);
  font-weight: 600;
  line-height: 1.15;
}

.kbthemeninhalt p {
  margin: 0 0 24px;
  color: #454947;
  font-size: 16px;
  line-height: 1.55;
}

.kbthemenbutton {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: auto;
  padding: 8px 18px;
  color: #303331;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  border: 1px solid #303331;
  box-sizing: border-box;
  transition:
    color 0.3s ease,
    background-color 0.3s ease;
}

.kbthemenkarte:hover {
  border-color: rgba(48, 51, 49, 0.3);
  box-shadow: 0 12px 34px rgba(48, 51, 49, 0.13);
}

.kbthemenkarte:hover .kbthemenbild img {
  transform: scale(1.04);
}

.kbthemenkarte:hover .kbthemenbutton {
  color: #ffffff;
  background: linear-gradient(135deg,  #8e0063 0%,#4f0033 99%);
}

.kbthemenkarte:focus-visible {
  outline: 3px solid #303331;
  outline-offset: 4px;
}

/* Tablet */

@media screen and (max-width: 1023px) {

  .kbthemen {
    padding-right: 20px;
    padding-left: 20px;
  }

  .kbthemengrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .kbthemenbild {
    aspect-ratio: 16 / 10;
  }

}

/* Mobile */

@media screen and (max-width: 639px) {

  .kbthemen {
    padding: 45px 12px;
  }

  .kbthemenintro {
    margin-bottom: 26px;
  }

  .kbthemenintro h2 {
    font-size: clamp(28px, 9vw, 38px);
  }

  .kbthemenintro p {
    font-size: 15px;
    line-height: 1.5;
  }

  .kbthemengrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .kbthemenkarte {
    border-radius: 3px;
  }

  .kbthemenbild {
    aspect-ratio: 1 / 1;
  }

  .kbthemeninhalt {
    padding: 14px 10px 10px;
  }

  .kbthemeninhalt h3 {
    margin-bottom: 12px;
    font-size: clamp(17px, 5vw, 21px);
    text-align: center;
  }

  .kbthemeninhalt p {
    display: none;
  }

  .kbthemenbutton {
    min-height: 42px;
    padding: 6px 7px;
    font-size: clamp(11px, 3.2vw, 14px);
  }

}

/* Reduzierte Animation */

@media (prefers-reduced-motion: reduce) {

  .kbthemenkarte,
  .kbthemenbild img,
  .kbthemenbutton {
    transition: none;
  }

}

/* ========================================================= Footer ========================================================= */

.footer { width: 100%; background: #e8dee9; }
.footerInner { width: 100%; max-width: 1800px; margin: 0 auto; padding: 70px 50px 30px 50px; box-sizing: border-box; }

/* 5 COLUMN LAYOUT */

.footerGrid { display: grid;
	grid-template-columns:
		minmax(220px, 1.4fr)
		minmax(140px, 0.8fr)
		minmax(170px, 0.9fr)
		minmax(220px, 1.15fr)
		minmax(260px, 1.35fr);

	column-gap: 55px;
	row-gap: 50px;

	width: 100%;

	align-items: start;
}

.footerColumn {
	width: 100%;
	min-width: 0;

	box-sizing: border-box;
}

/* COLUMN 1 */
.footerColumn1 { display: flex; flex-direction: column; align-items: flex-start; }

/* LOGO PLACEHOLDER */
.footerLogo {
	display: flex;

	align-items: center;
	justify-content: center;

	width: 220px;
	height: 65px;

	margin-bottom: 22px;

	font-size: 14px;
	letter-spacing: 2px;

	color: rgba(0, 0, 0, 0.45);

	box-sizing: border-box;
}

/* CLAIM */
.footerClaim {
	margin: 0 0 8px 0;

	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;

	color: #222;
}

/* INTRO */
.footerIntro { max-width: 280px; margin: 0; font-size: 15px; font-weight: 400; line-height: 1.6; color: #555; }

/* KONTAKT */
.footerContact { margin-top: 20px; font-size: 14px; font-weight: 400; line-height: 1.6; color: #555; }
.footerAddress { margin: 0 0 8px 0; }
.footerPhone { position: relative; display: inline-block; color: #555; text-decoration: none; transition: color 0.25s ease; }
.footerPhone::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background-color: #2c0b30; transition: width 0.25s ease; }
.footerPhone:hover { color: #2c0b30; }
.footerPhone:hover::after { width: 100%; }

/* SOCIAL MEDIA */
.footerSocial { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.footerSocialLink {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: #222;
	text-decoration: none;
}

.footerSocialLink svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.footerSocialLink:nth-child(2) svg,
.footerSocialLink:nth-child(3) svg {
	fill: currentColor;
	stroke: none;
}

/* COLUMN TITEL */
.footerTitle {
	margin: 0 0 22px 0;

	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;

	letter-spacing: 1.2px;

	color: #2c0b30;
}

/* COLUMN 2 + 3 */
.footerNavigation { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.footerNavigation a {
	position: relative;

	display: inline-block;

	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;

	color: #333;

	text-decoration: none;

	transition:
		color 0.25s ease,
		transform 0.25s ease;
}

.footerNavigation a::after {
	content: "";

	position: absolute;

	left: 0;
	bottom: -3px;

	width: 0;
	height: 1px;

	background: #2c0b30;

	transition: width 0.25s ease;
}

.footerNavigation a:hover {
	color: #2c0b30;

	transform: translateX(3px);
}

.footerNavigation a:hover::after {
	width: 100%;
}

/* COLUMN 4 SERVICE */
.footerService { display: flex; flex-direction: column; gap: 24px; }
.footerServiceItem { display: flex; align-items: flex-start; gap: 14px; }

.footerServiceIcon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	color: #2c0b30;
}

.footerServiceIcon svg {
	width: 21px;
	height: 21px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.footerServiceText {
	display: flex;

	flex-direction: column;

	gap: 4px;

	padding-top: 1px;
}

.footerServiceText strong {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;

	color: #222;
}

.footerServiceText span {
	max-width: 210px;

	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;

	color: #666;
}

/* COLUMN 5 NEWSLETTER */
.footerNewsletter { display: flex; flex-direction: column; align-items: flex-start; }
.footerNewsletterText { max-width: 280px; margin: 0 0 22px 0; font-size: 14px; font-weight: 400; line-height: 1.6; color: #555; }

/* NEWSLETTER BUTTON */
.footerNewsletterButton {
	display: inline-flex;

	align-items: center;
	justify-content: space-between;

	gap: 24px;

	min-width: 220px;

	padding: 13px 16px 13px 20px;

	border: 1px solid rgba(44, 11, 48, 0.28);
	border-radius: 5px;

	box-sizing: border-box;

	background-color: transparent;

	font-size: 14px;
	font-weight: 600;
	line-height: 1;

	color: #571a5e;

	text-decoration: none;

	transition:
		background-color 0.3s ease,
		border-color 0.3s ease,
		color 0.3s ease,
		transform 0.3s ease;
}

.footerNewsletterButton svg {
	width: 19px;
	height: 19px;

	flex: 0 0 auto;

	fill: none;

	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;

	transition: transform 0.3s ease;
}

.footerNewsletterButton:hover {
	background-color: #571a5e;

	border-color: #2c0b30;

	color: #fff;

	transform: translateY(-2px);
}

.footerNewsletterButton:hover svg {
	transform: translate(3px, -3px);
}

/* FOOTER BOTTOM */
.footerBottom {
	display: flex;

	align-items: center;
	justify-content: space-between;

	gap: 30px;

	width: 100%;

	margin-top: 60px;
	padding-top: 24px;

	border-top: 1px solid rgba(44, 11, 48, 0.14);
}

/* COPYRIGHT */
.footerCopyright { font-size: 12px; font-weight: 400; line-height: 1.5; letter-spacing: 0.3px; color: #777; }

/* RECHTLICHE LINKS */
.footerLegalNavigation { display: flex; align-items: center; gap: 28px; }
.footerLegalNavigation a { position: relative; font-size: 12px; font-weight: 400; line-height: 1.5; color: #777; text-decoration: none; transition: color 0.25s ease; }
.footerLegalNavigation a::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 0; height: 1px; background-color: #2c0b30; transition: width 0.25s ease; }
.footerLegalNavigation a:hover { color: #2c0b30; }
.footerLegalNavigation a:hover::after { width: 100%; }

/* TABLET */
@media screen and (max-width: 1100px) {
	.footerInner { padding: 60px 40px 30px 40px; }
	.footerGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 50px; row-gap: 50px; }
	.footerServiceText span { max-width: 260px; }
	.footerNewsletterText { max-width: 320px; }
	.footerBottom { margin-top: 50px; }
}

/* MOBILE */
@media screen and (max-width: 650px) {
	.footerInner { padding: 45px 25px 25px 25px; }
	.footerGrid { grid-template-columns: 1fr; column-gap: 0; row-gap: 40px; }
	.footerLogo { width: 200px; height: 60px; }
	.footerClaim { font-size: 19px; }
	.footerIntro { max-width: 100%; }
	.footerContact { margin-top: 18px; }
	.footerSocialLink { width: 42px; height: 42px; }
	.footerTitle { margin-bottom: 18px; }
	.footerNavigation { gap: 10px; }
	.footerService { gap: 20px; }
	.footerServiceIcon { width: 40px; height: 40px; }
	.footerServiceIcon svg { width: 20px; height: 20px; }
	.footerServiceText span { max-width: 100%; }
	.footerNewsletterText { max-width: 100%; }
	.footerNewsletterButton { width: 100%; max-width: 300px; min-width: 0; }
	.footerBottom { flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 45px; padding-top: 22px; }
 	.footerLegalNavigation { flex-wrap: wrap; gap: 10px 22px; }
}

.msa-generator-teaser, .msa-generator-teaser > span { background-color: #e8dee9 !important; }

/* == KUNT & BUNT Globale Unterseiten Einleitung == */

.kbintro {
	width: 100%;
	position: relative;
	overflow: hidden;
	z-index:1;
	background:#f7f4f6;

	padding: clamp(30px, 9vw, 60px) 0;
}

.kbintro_container {
	width: 90%;
	max-width: 1400px;
	margin: 0 auto;

	position: relative;

	display: flex;
	align-items: center;

	min-height: 280px;
}

/* Textbereich */

.kbintro_text {
	position: relative;
	z-index: 2;

	max-width: 1000px;
}

/* Kleine ?berschrift */

.kbintro_eyebrow {
	display: block;
	margin-bottom: 18px;

	font-size: clamp(12px, 1vw, 14px);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* Haupttitel */

.kbintro h1 {
	margin: 0 0 28px 0;

	font-size: clamp(48px, 7vw, 100px);
	line-height: 0.95;
	font-weight: 400;
}

.kbintro h1 span { display: block; font-style: italic; font-size: 1.15em; }

/* Einleitung */

.kbintro_lead {
	max-width: 1000px;
	margin: 0;

	font-size: clamp(17px, 1.5vw, 21px);
	line-height: 1.65;
}

/* Grosses Wort im Hintergrund */

.kbintro_word {
	position: absolute;
	z-index: 1;
	right: -0.2em;
	bottom: -0.40em;

	font-size: clamp(150px, 20vw, 480px);
	font-weight: 700;
	line-height: 0.75;
	letter-spacing: -0.06em;

	opacity: 0.055;

	white-space: nowrap;

	pointer-events: none;
	user-select: none;
}

/* =========================================
   Tablet
   ========================================= */

@media (max-width: 1024px) {

	.kbintro {
		padding: 80px 0;
	}

	.kbintro_container {
		min-height: 240px;
	}

	.kbintro_text {
		max-width: 680px;
	}

	.kbintro_word {
		right: -0.05em;
		bottom: -0.16em;

		font-size: clamp(130px, 23vw, 240px);
	}
}

/* =========================================
   Mobile
   ========================================= */

@media (max-width: 700px) {

	.kbintro {
		padding: 60px 0 70px;
		margin-bottom: 70px;
	}

	.kbintro_container {
		width: 88%;
		min-height: 240px;
	}

	.kbintro_text {
		max-width: 100%;
	}

	.kbintro_eyebrow {
		margin-bottom: 14px;
	}

	.kbintro h1 {
		margin-bottom: 22px;
	}

	.kbintro_lead {
		max-width: 100%;
		line-height: 1.55;
	}

	.kbintro_word {
		right: -0.04em;
		bottom: -0.12em;

		font-size: clamp(110px, 34vw, 180px);
		opacity: 0.045;
	}
}

/* === KUNT & BUNT News Seite === */

#kbnews {
    --kbnews_purple: #2c0b30;
    --kbnews_text: #332d34;
    --kbnews_muted: #716a72;
    --kbnews_light: #f7f4f6;
    --kbnews_soft: #eee7ed;
    --kbnews_line: #ded6dc;
    --kbnews_white: #ffffff;
    --kbnews_serif: Georgia, "Times New Roman", serif;

    position: relative;
    z-index: 0;
    isolation: isolate;
    width: 100%;
    overflow: hidden;
    background: var(--kbnews_white);
    color: var(--kbnews_text);
}

#kbnews *, #kbnews *::before, #kbnews *::after { box-sizing: border-box; }
#kbnews button, #kbnews a { font: inherit; }
#kbnews button { appearance: none; }
.kbnews_container { width: min(1380px, calc(100% - 80px)); margin: 0 auto; }

/* QUICK LINKS */

.kbnews_quick {
    position: relative;
    z-index: 10;
    margin-top: -48px;
}

.kbnews_quick_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--kbnews_purple);
}

.kbnews_quick_item {
    position: relative;
    min-height: 250px;
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 18px;
    padding: 45px 40px;
    color: var(--kbnews_white);
    text-decoration: none;
    border-right: 1px solid rgba(255, 255, 255, 0.16);
    overflow: hidden;
    transition:
        background 0.35s ease,
        transform 0.35s ease;
}

.kbnews_quick_item:last-child {
    border-right: 0;
}

.kbnews_quick_item::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 5px;
    background: var(--kbnews_white);
    transition: width 0.45s ease;
}

.kbnews_quick_item:hover {
    background: #3c1540;
	color: #f0c;
}

.kbnews_quick_item:hover::after {
    width: 100%;
}

.kbnews_quick_number {
    padding-top: 6px;
    font-size: 11px;
    letter-spacing: 0.16em;
    opacity: 0.55;
}

.kbnews_quick_label {
    display: block;
    margin-bottom: 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.65;
}

.kbnews_quick_item h2 {
    margin: 0 0 14px;
    color: inherit;
    /* font-family: var(--kbnews_serif); */
    font-size: clamp(30px, 2.8vw, 46px);
    font-weight: 400;
}

.kbnews_quick_item p {
    max-width: 310px;
    margin: 0 0 25px;
    font-size: 14px;
    line-height: 1.55;
    opacity: 0.8;
}

/* =========================================================
   LINKS
   ========================================================= */

.kbnews_textlink {
    position: relative;
    display: inline-block;
    padding-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
}

.kbnews_textlink::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 35px;
    height: 1px;
    background: currentColor;
    transition: width 0.35s ease;
}

a:hover .kbnews_textlink::after,
button:hover .kbnews_textlink::after {
    width: 100%;
}

/* =========================================================
   FEATURED
   ========================================================= */

.kbnews_featured {
    padding: 150px 0 100px;
}

.kbnews_featured_grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(370px, 0.75fr);
    min-height: 650px;
}

.kbnews_featured_image {
    position: relative;
    overflow: hidden;
    background: var(--kbnews_soft);
}

.kbnews_featured_image img {
    width: 100%;
    height: 100%;
    min-height: 650px;
    display: block;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.kbnews_featured_link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.kbnews_featured_link .kbnews_featured_grid {
    cursor: pointer;
}

.kbnews_featured_link:hover .kbnews_featured_image img {
    transform: scale(1.055);
}

.kbnews_featured_link:hover .kbnews_story_button::after {
    width: 100%;
}

.kbnews_featured_small {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.7;
}

.kbnews_featured_grid:hover .kbnews_featured_image img {
    transform: scale(1.045);
}

.kbnews_featured_content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 70px;
    background: var(--kbnews_purple);
    color: var(--kbnews_white);
}

.kbnews_category {
    margin-bottom: 22px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.62;
}

.kbnews_featured_content time {
    margin-bottom: 15px;
    font-size: 13px;
    opacity: 0.65;
}

.kbnews_featured_content h2 {
    margin: 0 0 8px;
    color: inherit;
    /* font-family: var(--kbnews_serif); */
    font-size: clamp(48px, 5vw, 80px);
    font-weight: 400;
    line-height: 0.95;
}

.kbnews_featured_content h3 {
    margin: 10px 0 28px;
    color: inherit;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
}

.kbnews_featured_content p {
    margin: 0 0 40px;
    font-size: 16px;
    line-height: 1.75;
    opacity: 0.8;
}

.kbnews_story_button {
    align-self: flex-start;
    position: relative;
    padding: 14px 0 8px;
    color: var(--kbnews_white);
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}

.kbnews_story_button::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 0;
    height: 1px;
    background: var(--kbnews_white);
    transition: width 0.35s ease;
}

.kbnews_story_button:hover::after {
    width: 100%;
}

/* =========================================================
   SECTION HEAD
   ========================================================= */

.kbnews_stories,
.kbnews_archive {
    padding: 100px 0 140px;
}

.kbnews_section_head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: end;
    margin-bottom: 60px;
}

.kbnews_section_head h2 {
    margin: 0;
    color: var(--kbnews_purple);
    /* font-family: var(--kbnews_serif); */
    font-size: clamp(50px, 6vw, 90px);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: -0.045em;
}

.kbnews_section_head p {
    max-width: 520px;
    margin: 0;
    justify-self: end;
    font-size: 17px;
    line-height: 1.7;
    color: var(--kbnews_muted);
}

/* =========================================================
   FILTER
   ========================================================= */

.kbnews_filter {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 45px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--kbnews_line);
}

.kbnews_filter_button {
    padding: 11px 20px;
    color: var(--kbnews_text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
	transition: background 0.25s ease, color 0.25s ease, border 0.25s ease; }

.kbnews_filter_button:hover { border-color: var(--kbnews_line); }
.kbnews_filter_button.is_active { color: var(--kbnews_white); background: var(--kbnews_purple); border-color: var(--kbnews_purple); }

/* =========================================================
   NEWS GRID
   ========================================================= */

.kbnews_grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 55px 30px;
}

.kbnews_card {
    min-width: 0;
    transition:
        opacity 0.3s ease,
        transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.kbnews_card_large {
    grid-column: span 2;
}

.kbnews_card_wide {
    grid-column: span 2;
}

.kbnews_card_action {
    width: 100%;
    height: 100%;
    display: block;
    padding: 0;
    text-align: left;
    color: inherit;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.kbnews_card_image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--kbnews_soft);
}

.kbnews_card_large .kbnews_card_image {
    aspect-ratio: 16 / 8.5;
}

.kbnews_card_wide .kbnews_card_image {
    aspect-ratio: 16 / 8.5;
}

.kbnews_card_image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--kbnews_purple);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.kbnews_card_image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.85s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.kbnews_card_action:hover .kbnews_card_image img {
    transform: scale(1.055);
}

.kbnews_card_action:hover .kbnews_card_image::after {
    opacity: 0.06;
}

.kbnews_card_content {
    padding: 25px 2px 5px;
    transition: transform 0.35s ease;
}

.kbnews_card_action:hover .kbnews_card_content {
    transform: translateY(-5px);
}

.kbnews_card_meta {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 17px;
    color: var(--kbnews_muted);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.kbnews_card h3 {
    margin: 0 0 14px;
    color: var(--kbnews_purple);
    /* font-family: var(--kbnews_serif); */
    font-size: clamp(30px, 3vw, 46px);
    font-weight: 400;
    line-height: 1.05;
}

.kbnews_card p {
    max-width: 590px;
    margin: 0 0 22px;
    color: var(--kbnews_muted);
    font-size: 15px;
    line-height: 1.65;
}

.kbnews_card.is_hidden {
    display: none;
}

/* =========================================================
   ARTICLE READER
   ========================================================= */

.kbnews_reader {
    width: 100%;
    grid-column: 1 / -1;
    height: 0;
    margin: 35px 0 20px;
    overflow: hidden;
    background: var(--kbnews_light);
    opacity: 0;
    transform: translateY(22px) scale(0.995);
    transition:
        height 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.38s ease,
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: height, opacity, transform;
}

.kbnews_reader[hidden] {
    display: none;
}

.kbnews_reader.is_open {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.kbnews_reader_inner {
    position: relative;
    width: min(1180px, calc(100% - 80px));
    margin: 0 auto;
    padding: 85px 0 95px;
}

.kbnews_reader_close {
    position: absolute;
    top: 35px;
    right: 0;
    z-index: 2;
    padding: 8px 0;
    color: var(--kbnews_muted);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--kbnews_line);
    cursor: pointer;
    font-size: 12px;
    opacity: 0;
    transform: translateY(-8px);
    transition:
        color 0.25s ease,
        opacity 0.4s ease 0.18s,
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.18s;
}

.kbnews_reader.is_open .kbnews_reader_close {
    opacity: 1;
    transform: translateY(0);
}

.kbnews_reader_close:hover {
    color: var(--kbnews_purple);
}

.kbnews_article_meta {
    display: flex;
    gap: 25px;
    margin-bottom: 20px;
    color: var(--kbnews_muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.kbnews_article h2 {
    max-width: 900px;
    margin: 0 0 25px;
    color: var(--kbnews_purple);
    /* font-family: var(--kbnews_serif); */
    font-size: clamp(45px, 6vw, 82px);
    font-weight: 400;
    line-height: 0.98;
}

.kbnews_article_lead {
    max-width: 850px;
    margin: 0 0 55px;
    color: var(--kbnews_text);
    font-size: clamp(20px, 2vw, 27px);
    line-height: 1.55;
}

.kbnews_article_columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr);
    gap: 80px;
}

.kbnews_article p {
    max-width: 720px;
    margin: 0 0 23px;
    font-size: 16px;
    line-height: 1.8;
}

.kbnews_article h3 {
    margin: 42px 0 15px;
    color: var(--kbnews_purple);
    /* font-family: var(--kbnews_serif); */
    font-size: 28px;
    font-weight: 400;
}

.kbnews_article_side {
    overflow: hidden;
}

.kbnews_article_side img {
    width: 100%;
    height: auto;
    display: block;
    transform: scale(1.035);
    transition:
        transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.kbnews_reader.is_open .kbnews_article_side img {
    transform: scale(1);
}

.kbnews_article_link {
    display: inline-block;
    margin-top: 20px;
    padding: 13px 25px;
    color: var(--kbnews_white);
    background: var(--kbnews_purple);
    text-decoration: none;
    transition:
        transform 0.25s ease,
        background 0.25s ease;
}

.kbnews_article_link:hover {
    transform: translateY(-2px);
    background: #421949;
}

/* Gestaffelte Story Einblendung */

.kbnews_reader .kbnews_article_meta,
.kbnews_reader .kbnews_article h2,
.kbnews_reader .kbnews_article_lead,
.kbnews_reader .kbnews_article_columns,
.kbnews_reader .kbnews_article > p {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 0.55s ease,
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.kbnews_reader.is_open .kbnews_article_meta {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.10s;
}

.kbnews_reader.is_open .kbnews_article h2 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.16s;
}

.kbnews_reader.is_open .kbnews_article_lead {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.22s;
}

.kbnews_reader.is_open .kbnews_article_columns,
.kbnews_reader.is_open .kbnews_article > p {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.30s;
}

/* =========================================================
   ARCHIVE
   ========================================================= */

.kbnews_archive {
    background: var(--kbnews_light);
}

.kbnews_archive_list {
    border-top: 1px solid var(--kbnews_line);
}

.kbnews_archive_year {
    border-bottom: 1px solid var(--kbnews_line);
}

.kbnews_archive_toggle {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 30px 0;
    color: var(--kbnews_purple);
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
}

.kbnews_archive_year_number {
    /* font-family: var(--kbnews_serif); */
    font-size: clamp(38px, 4vw, 60px);
    line-height: 1;
    transition: transform 0.35s ease;
}

.kbnews_archive_count {
    color: var(--kbnews_muted);
    font-size: 13px;
}

.kbnews_archive_toggle:hover .kbnews_archive_year_number {
    transform: translateX(10px);
}

.kbnews_archive_panel {
    display: grid;
    grid-template-rows: 0fr;
    transition:
        grid-template-rows 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.kbnews_archive_panel_inner {
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition:
        opacity 0.32s ease,
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        padding-bottom 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.kbnews_archive_year.is_open .kbnews_archive_panel {
    grid-template-rows: 1fr;
}

.kbnews_archive_year.is_open .kbnews_archive_panel_inner {
    padding-bottom: 25px;
    opacity: 1;
    transform: translateY(0);
}

.kbnews_archive_story {
    width: 100%;
    display: grid;
    grid-template-columns: 130px 1fr 120px;
    gap: 30px;
    align-items: center;
    padding: 19px 20px;
    color: var(--kbnews_text);
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(44, 11, 48, 0.08);
    cursor: pointer;
    text-align: left;
    transition:
        padding 0.25s ease,
        background 0.25s ease;
}

.kbnews_archive_story:hover {
    padding-left: 30px;
    background: var(--kbnews_white);
}

.kbnews_archive_story span {
    color: var(--kbnews_muted);
    font-size: 12px;
}

.kbnews_archive_story strong {
    color: var(--kbnews_purple);
    /* font-family: var(--kbnews_serif); */
    font-size: 22px;
    font-weight: 400;
}

/* =========================================================
   NEWSLETTER
   ========================================================= */

.kbnews_newsletter {
    padding: 130px 0;
    color: var(--kbnews_white);
    background: var(--kbnews_purple);
    text-align: center;
}

.kbnews_newsletter_inner {
    max-width: 830px;
    margin: 0 auto;
}

.kbnews_newsletter_small {
    display: block;
    margin-bottom: 18px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.55;
}

.kbnews_newsletter h2 {
    margin: 0 0 25px;
    color: inherit;
    /* font-family: var(--kbnews_serif); */
    font-size: clamp(50px, 7vw, 100px);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: -0.045em;
}

.kbnews_newsletter p {
    max-width: 560px;
    margin: 0 auto 35px;
    font-size: 17px;
    line-height: 1.7;
    opacity: 0.75;
}

.kbnews_newsletter_button {
    display: inline-block;
    padding: 15px 29px;
    color: var(--kbnews_purple);
    background: var(--kbnews_white);
    border: 1px solid var(--kbnews_white);
    border-radius: 5px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition:
        color 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease;
}

.kbnews_newsletter_button:hover {
    color: var(--kbnews_white);
    background: transparent;
    transform: translateY(-3px);
}

/* =========================================================
   SCROLL ANIMATION
   ========================================================= */

.kbnews_reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.75s ease var(--kbnews-delay, 0ms),
        transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) var(--kbnews-delay, 0ms);
}

.kbnews_reveal.is_visible {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================
   FILTER ANIMATION
   ========================================================= */

.kbnews_card.is_filter_leaving {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
    pointer-events: none;
    transition:
        opacity 0.28s ease,
        transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.kbnews_card.is_filter_entering {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
    transition:
        opacity 0.34s ease,
        transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}

.kbnews_card.is_filter_entering.is_filter_visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .kbnews_container {
        width: min(100% - 50px, 1200px);
    }

    .kbnews_quick_item {
        grid-template-columns: 35px 1fr;
        padding: 38px 28px;
    }

    .kbnews_featured_grid {
        grid-template-columns: 1.15fr 0.85fr;
    }

    .kbnews_featured_content {
        padding: 50px;
    }

    .kbnews_grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kbnews_card_large,
    .kbnews_card_wide {
        grid-column: span 2;
    }

    .kbnews_article_columns {
        gap: 45px;
    }

}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .kbnews_container {
        width: calc(100% - 36px);
    }

    .kbnews_hero,
    .kbnews_hero_inner {
        min-height: 490px;
    }

    .kbnews_hero_text {
        padding: 80px 0;
    }

    .kbnews_hero h1 {
        font-size: clamp(68px, 22vw, 105px);
    }

    .kbnews_hero h1 span {
        margin-left: 3%;
    }

    .kbnews_hero_intro {
        margin-top: 35px;
        font-size: 16px;
    }

    .kbnews_hero_word {
        right: -25px;
        bottom: -15px;
        font-size: 180px;
    }

    /* QUICK */

    .kbnews_quick {
        margin-top: 0;
    }

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

    .kbnews_quick_item {
        min-height: auto;
        grid-template-columns: 35px 1fr;
        padding: 35px 25px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    }

    /* FEATURED */

    .kbnews_featured {
        padding: 80px 0;
    }

    .kbnews_featured_grid {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .kbnews_featured_image img {
        min-height: 0;
        aspect-ratio: 4 / 3;
    }

    .kbnews_featured_content {
        padding: 45px 28px 50px;
    }

    .kbnews_featured_content h2 {
        font-size: 54px;
    }

    /* TITEL */

    .kbnews_stories,
    .kbnews_archive {
        padding: 75px 0 90px;
    }

    .kbnews_section_head {
        grid-template-columns: 1fr;
        gap: 25px;
        margin-bottom: 45px;
    }

    .kbnews_section_head p {
        justify-self: start;
        font-size: 15px;
    }

    /* FILTER */

    .kbnews_filter {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin-right: -18px;
        padding-right: 18px;
    }

    .kbnews_filter::-webkit-scrollbar {
        display: none;
    }

    .kbnews_filter_button {
        flex: 0 0 auto;
    }

    /* GRID */

    .kbnews_grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .kbnews_card_large,
    .kbnews_card_wide {
        grid-column: span 1;
    }

    .kbnews_card_large .kbnews_card_image,
    .kbnews_card_wide .kbnews_card_image {
        aspect-ratio: 4 / 3;
    }

    .kbnews_card h3 {
        font-size: 36px;
    }

    /* READER */

    .kbnews_reader {
        margin: 10px 0;
    }

    .kbnews_reader_inner {
        width: calc(100% - 36px);
        padding: 75px 0 65px;
    }

    .kbnews_reader_close {
        top: 25px;
    }

    .kbnews_article_lead {
        margin-bottom: 35px;
        font-size: 20px;
    }

    .kbnews_article_columns {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* ARCHIVE */

    .kbnews_archive_toggle {
        padding: 23px 0;
    }

    .kbnews_archive_story {
        grid-template-columns: 1fr;
        gap: 5px;
        padding: 18px 5px;
    }

    .kbnews_archive_story:hover {
        padding-left: 10px;
    }

    .kbnews_archive_story strong {
        font-size: 20px;
    }

    /* NEWSLETTER */

    .kbnews_newsletter {
        padding: 90px 0;
    }

}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    #kbnews *,
    #kbnews *::before,
    #kbnews *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .kbnews_reveal {
        opacity: 1;
        transform: none;
    }

    .kbnews_reader {
        transform: none;
    }

    .kbnews_reader .kbnews_article_meta,
    .kbnews_reader .kbnews_article h2,
    .kbnews_reader .kbnews_article_lead,
    .kbnews_reader .kbnews_article_columns,
    .kbnews_reader .kbnews_article > p {
        opacity: 1;
        transform: none;
    }

    .kbnews_article_side img {
        transform: none;
    }

}
/* =========================================
   KUNT & BUNT
   DO IT YOURSELF
   ========================================= */

.diy-page {
	width: 100%;
	background: #ffffff;
	color: #2c0b30;
	overflow: hidden;
}

.diy-container {
	width: min(1280px, calc(100% - 80px));
	margin: 0 auto;
}

/* =========================================
   SPOTLIGHT
   ========================================= */

.diy-spotlight {
	background: #ffffff;
	box-shadow: 0 24px 70px rgba(44, 11, 48, 0.12);
	display: grid;
	grid-template-columns: 1.45fr 1fr;
	min-height: 580px;
	margin: 60px auto 130px auto;
	background: #f3eff2;
	overflow: hidden;
}

.diy-spotlight-image {
	overflow: hidden;
}

.diy-spotlight-image a {
	display: block;
	width: 100%;
	height: 100%;
}

.diy-spotlight-image img {
	width: 100%;
	height: 100%;
	min-height: 580px;
	object-fit: cover;
	display: block;
	transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.diy-spotlight:hover .diy-spotlight-image img {
	transform: scale(1.035);
}

.diy-spotlight-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(45px, 6vw, 90px);
}

.diy-label {
	margin: 0 0 22px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.diy-spotlight-content h2 {
	margin: 0 0 14px;
	font-size: clamp(38px, 4vw, 64px);
	line-height: 1;
}

.diy-spotlight-content h3 {
	margin: 0 0 24px;
	font-size: clamp(20px, 2vw, 28px);
	font-weight: 400;
	line-height: 1.3;
}

.diy-spotlight-content p {
	max-width: 480px;
	font-size: 17px;
	line-height: 1.7;
}

/* =========================================
   BUTTON
   ========================================= */

.diy-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	margin-top: 26px;
	padding: 15px 26px;
	background: #2c0b30;
	color: #ffffff !important;
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	transition:
		background 0.3s ease,
		transform 0.3s ease;
}

.diy-button:hover {
	background: #4a2050;
	transform: translateY(-2px);
}

/* =========================================
   PROJEKT BEREICH
   ========================================= */

.diy-projects {
	padding-bottom: 120px;
}

.diy-projects-head {
	margin-bottom: 55px;
}

.diy-projects-head h2 {
	margin: 0 0 18px;
	font-size: clamp(38px, 5vw, 68px);
	line-height: 1;
}

.diy-projects-head > p:last-child {
	margin: 0;
	font-size: 18px;
	color: #625962;
}

/* =========================================
   GRID
   ========================================= */

.diy-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 55px 32px;
}

/* =========================================
   KARTE
   ========================================= */

.diy-card {
	position: relative;
	background: #ffffff;
	transition:
		transform 0.4s ease,
		box-shadow 0.4s ease;
}

.diy-card:hover {
	transform: translateY(-7px);
	box-shadow: 0 18px 45px rgba(44, 11, 48, 0.10);
}

.diy-card-image {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: #f2f2f2;
}

.diy-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.diy-card:hover .diy-card-image img {
	transform: scale(1.06);
}

.diy-card-content {
	padding: 28px 25px 30px;
}

.diy-card-content h3 {
	margin: 0 0 12px;
	font-size: clamp(24px, 2vw, 31px);
	line-height: 1.1;
}

.diy-card-content p {
	margin: 0 0 22px;
	font-size: 15px;
	line-height: 1.6;
	color: #625962;
}

.diy-card-link {
	position: relative;
	display: inline-block;
	color: #2c0b30 !important;
	text-decoration: none;
	font-size: 14px;
	font-weight: 700;
	padding-bottom: 5px;
}

.diy-card-link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: #2c0b30;
	transform-origin: right;
	transition: transform 0.35s ease;
}

.diy-card-link:hover::after {
	transform: scaleX(0);
}

/* =========================================
   PARALLAX
   ========================================= */

.diy-parallax {
	position: relative;
	min-height: 650px;
	display: flex;
	align-items: center;
	overflow: hidden;
	margin: 10px 0 120px;
}

.diy-parallax-background {
	position: absolute;
	inset: -70px 0;
	background-image:
		url("/files/images/diy/diy-parallax.jpg");
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

.diy-parallax::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(30, 15, 30, 0.15);
}

.diy-parallax-inner {
	position: relative;
	z-index: 2;
	width: min(1280px, calc(100% - 80px));
	margin: 0 auto;
}

.diy-parallax-box {
	max-width: 520px;
	padding: 55px;
	background: rgba(255, 255, 255, 0.93);
	backdrop-filter: blur(8px);
}

.diy-parallax-box h2 {
	margin: 0 0 22px;
	font-size: clamp(38px, 4vw, 60px);
	line-height: 1;
}

.diy-parallax-box p {
	font-size: 17px;
	line-height: 1.7;
}

/* =========================================
   ZWEITER PROJEKT BEREICH
   ========================================= */

.diy-projects-more {
	padding-top: 0;
	padding-bottom: 140px;
	scroll-margin-top: 120px;
}

/* =========================================
   ABSCHLUSS
   ========================================= */

.diy-community {
	background: #f3eff2;
	padding: 110px 0;
	text-align: center;
}

.diy-community-inner {
	max-width: 820px;
}

.diy-community h2 {
	margin: 0 0 25px;
	font-size: clamp(38px, 5vw, 68px);
	line-height: 1;
}

.diy-community p {
	max-width: 700px;
	margin: 0 auto 18px;
	font-size: 17px;
	line-height: 1.7;
	color: #554b55;
}

/* =========================================
   SCROLL ANIMATION
   ========================================= */

.diy-card,
.diy-spotlight {
	opacity: 0;
	transform: translateY(35px);
}

.diy-card.diy-visible,
.diy-spotlight.diy-visible {
	opacity: 1;
	transform: translateY(0);
	transition:
		opacity 0.8s ease,
		transform 0.8s ease,
		box-shadow 0.4s ease;
}

.diy-card.diy-visible:hover {
	transform: translateY(-7px);
}

/* =========================================
   TABLET
   ========================================= */

@media screen and (max-width: 1000px) {

	.diy-container,
	.diy-parallax-inner {
		width: min(100% - 50px, 1280px);
	}

	.diy-intro {
		padding: 70px 0 65px;
	}

	.diy-spotlight {
		grid-template-columns: 1fr 1fr;
		min-height: 500px;
		margin-bottom: 100px;
	}

	.diy-spotlight-image img {
		min-height: 500px;
	}

	.diy-spotlight-content {
		padding: 45px;
	}

	.diy-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 45px 28px;
	}

	.diy-parallax {
		min-height: 570px;
	}

	.diy-parallax-background {
		background-attachment: scroll;
	}

}

/* =========================================
   MOBILE
   ========================================= */

@media screen and (max-width: 650px) {

	.diy-container,
	.diy-parallax-inner {
		width: calc(100% - 32px);
	}

/* =========================================
   DIY HERO
   ========================================= */

.diy-hero {
	position: relative;
	z-index: 0;
	min-height: 570px;
	display: flex;
	align-items: center;
	background: #f7f4f6;
	overflow: hidden;
}

.diy-hero-inner {
	position: relative;
	min-height: 570px;
	display: flex;
	align-items: center;
}

.diy-hero-text {
	position: relative;
	z-index: 2;
	max-width: 750px;
	padding: 100px 0;
}

.diy-hero-eyebrow {
	display: block;
	margin-bottom: 25px;
	color: #2c0b30;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.diy-hero h1 {
	margin: 0;
	color: #2c0b30;
	font-size: clamp(65px, 8vw, 138px);
	font-weight: 400;
	line-height: 0.8;
	letter-spacing: -0.055em;
}

.diy-hero h1 span {
	display: block;
	margin-left: 12%;
	font-style: italic;
}

.diy-hero-intro {
	width: min(560px, 100%);
	margin: 48px 0 0;
	font-size: clamp(17px, 1.45vw, 22px);
	line-height: 1.65;
	color: #332d34;
}

.diy-hero-word {
	position: absolute;
	right: -40px;
	bottom: -65px;
	color: rgba(44, 11, 48, 0.035);
	font-size: clamp(190px, 30vw, 480px);
	font-weight: 700;
	line-height: 0.8;
	letter-spacing: -0.08em;
	pointer-events: none;
	user-select: none;
}

	.diy-count {
		margin-top: 24px;
	}

	.diy-spotlight {
		display: block;
		margin-bottom: 80px;
	}

	.diy-spotlight-image {
		aspect-ratio: 4 / 3;
	}

	.diy-spotlight-image img {
		min-height: 0;
		height: 100%;
	}

	.diy-spotlight-content {
		padding: 38px 28px 42px;
	}

	.diy-projects {
		padding-bottom: 80px;
	}

	.diy-projects-head {
		margin-bottom: 40px;
	}

	.diy-grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.diy-card-content {
		padding: 24px 20px 26px;
	}

	.diy-parallax {
		min-height: 550px;
		margin-bottom: 80px;
	}

	.diy-parallax-background {
		inset: 0;
		background-attachment: scroll;
	}

	.diy-parallax-box {
		max-width: none;
		padding: 36px 28px;
	}

	.diy-projects-more {
		padding-bottom: 90px;
	}

	.diy-community {
		padding: 75px 0;
	}

}

/* =========================================
   NOVA GRUNDLAGEN
   ========================================= */

.novaContainer {
	width: 90%;
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
}

.novaEyebrow {
	display: block;
	margin-bottom: 20px;

	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.novaStart h2,
.novaDetail h2,
.novaStory h2,
.novaAbschluss h2,
.novaFakten h2 {
	margin: 0;

	font-size: clamp(48px, 6vw, 92px);
	font-weight: 400;
	line-height: 0.95;
}

.novaStart h2 span,
.novaDetail h2 span,
.novaStory h2 span,
.novaAbschluss h2 span,
.novaFakten h2 span {
	display: block;
	font-size: 1.12em;
	font-style: italic;
}

.novaStart p,
.novaDetail p,
.novaStory p,
.novaAbschluss p {
	font-size: clamp(17px, 1.4vw, 20px);
	line-height: 1.7;
}

/* =========================================
   START
   Bild mit ?berlagerter Farbbox
   ========================================= */

.novaStart {
	width: 90%;
	max-width: 1600px;

	margin: clamp(70px, 8vw, 130px) auto
			clamp(100px, 12vw, 190px);

	position: relative;

	min-height: 760px;
}

.novaStartBild {
	width: 72%;
	height: 720px;

	overflow: hidden;
}

.novaStartBild img {
	display: block;
	width: 100%;
	height: 100%;

	object-fit: cover;
}

.novaStartBox {
	position: absolute;

	z-index: 3;

	right: 0;
	top: 50%;

	width: min(560px, 45%);

	padding: clamp(45px, 6vw, 85px);

	box-sizing: border-box;

	background: #2c0b30;
	color: #ffffff;

	transform: translateY(-50%);
}

.novaStartBox p {
	margin: 35px 0 0;
}

.novaStartWort {
	position: absolute;

	z-index: 2;

	right: 2%;
	bottom: -0.17em;

	font-size: clamp(140px, 20vw, 330px);
	font-weight: 800;
	line-height: 0.8;

	letter-spacing: -0.07em;

	color: #f0c;

	opacity: 0.14;

	pointer-events: none;
}

/* =========================================
   FAKTEN
   ========================================= */

.novaFakten {
	padding: clamp(90px, 11vw, 170px) 0;

	background: #f1ebe5;
}

.novaFaktenIntro {
	max-width: 760px;
	margin-bottom: clamp(60px, 7vw, 100px);
}

.novaFaktenGrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);

	border-top: 1px solid rgba(44, 11, 48, 0.25);
	border-bottom: 1px solid rgba(44, 11, 48, 0.25);
}

.novaFakt {
	min-height: 220px;

	padding: 35px;

	box-sizing: border-box;

	display: flex;
	flex-direction: column;
	justify-content: space-between;

	border-right: 1px solid rgba(44, 11, 48, 0.25);
}

.novaFakt:last-child {
	border-right: 0;
}

.novaFakt strong {
	font-size: clamp(44px, 5vw, 74px);
	font-weight: 400;
	line-height: 1;

	color: #2c0b30;
}

.novaFakt span {
	max-width: 180px;

	font-size: 15px;
	line-height: 1.45;
}

/* =========================================
   DETAIL
   ========================================= */

.novaDetail {
	position: relative;

	padding: clamp(110px, 13vw, 200px) 0;

	overflow: hidden;

	background: #ffffff;
}

.novaDetailGrid {
	position: relative;
	z-index: 2;

	display: grid;
	grid-template-columns: 0.8fr 1.15fr;
	grid-template-rows: auto auto;

	gap: 50px clamp(50px, 8vw, 120px);

	align-items: center;
}

.novaDetailText {
	grid-column: 1;
	grid-row: 1 / span 2;

	max-width: 530px;
}

.novaDetailText p:first-of-type {
	margin-top: 40px;
}

.novaDetailText p + p {
	margin-top: 25px;
}

.novaDetailBildGross {
	grid-column: 2;
	grid-row: 1;

	margin-left: 8%;
}

.novaDetailBildGross img {
	display: block;

	width: 100%;
	height: 560px;

	object-fit: cover;
}

.novaDetailBildKlein {
	grid-column: 2;
	grid-row: 2;

	width: 58%;

	margin-top: -120px;
	margin-left: -8%;

	position: relative;
	z-index: 3;
}

.novaDetailBildKlein img {
	display: block;

	width: 100%;
	aspect-ratio: 1 / 1;

	object-fit: cover;

	border: 16px solid #ffffff;
	box-sizing: border-box;
}

.novaDetailWort {
	position: absolute;

	left: -0.04em;
	bottom: -0.17em;

	font-size: clamp(180px, 25vw, 420px);
	font-weight: 800;
	line-height: 0.8;

	letter-spacing: -0.07em;

	color: #2c0b30;
	opacity: 0.045;

	pointer-events: none;
}

/* =========================================
   NOVA PARALLAX TEXT
   ========================================= */

.novaParallaxText {
	width: min(850px, 100%);

	color: #ffffff;
}

.novaParallaxText h2 {
	margin: 0;

	font-size: clamp(52px, 7vw, 105px);
	font-weight: 400;
	line-height: 0.92;
}

.novaParallaxText h2 span {
	display: block;
	font-size: 1.12em;
	font-style: italic;
}

.novaParallaxText p {
	margin: 28px 0 0;

	font-size: clamp(20px, 2vw, 30px);
}

/* =========================================
   GESCHICHTE
   ========================================= */

.novaStory {
	position: relative;

	padding: clamp(110px, 14vw, 220px) 0;

	overflow: hidden;

	background: #2c0b30;
	color: #ffffff;
}

.novaStoryGrid {
	position: relative;
	z-index: 2;

	display: grid;
	grid-template-columns: 1.05fr 0.75fr;

	gap: clamp(70px, 10vw, 160px);
}

.novaStoryHeadline {
	max-width: 750px;
}

.novaStoryText {
	max-width: 540px;
	padding-top: 80px;
}

.novaStoryLead {
	margin-top: 0;

	font-size: clamp(24px, 2.4vw, 36px) !important;
	line-height: 1.35 !important;
}

.novaStoryText p + p {
	margin-top: 30px;
}

.novaStoryWort {
	position: absolute;

	right: -0.04em;
	bottom: -0.18em;

	font-size: clamp(180px, 27vw, 450px);
	font-weight: 800;
	line-height: 0.8;

	letter-spacing: -0.07em;

	color: #ffffff;
	opacity: 0.035;

	pointer-events: none;
}

/* =========================================
   ABSCHLUSS
   ========================================= */

.novaAbschluss {
	position: relative;

	width: 90%;
	max-width: 1600px;

	min-height: 760px;

	margin: clamp(100px, 13vw, 200px) auto;
}

.novaAbschlussBild {
	position: absolute;

	right: 0;
	top: 0;

	width: 68%;
	height: 100%;

	overflow: hidden;
}

.novaAbschlussBild img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
}

.novaAbschlussBox {
	position: relative;
	z-index: 2;

	width: min(600px, 48%);

	padding: clamp(50px, 7vw, 95px);

	box-sizing: border-box;

	background: #f1ebe5;

	top: 100px;
}

.novaAbschlussBox p {
	margin: 35px 0;
}

/* =========================================
   BUTTON
   ========================================= */

.novaButton {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	min-height: 52px;

	padding: 12px 28px;

	background: #2c0b30;
	color: #ffffff;

	text-decoration: none;

	transition:
		transform 0.3s ease,
		background-color 0.3s ease;
}

.novaButton:hover {
	transform: translateY(-4px);
	background: #151818;
}

/* =========================================
   TABLET
   ========================================= */

@media screen and (max-width: 900px) {

	.novaStart {
		width: 100%;
		min-height: 680px;
	}

	.novaStartBild {
		width: 78%;
		height: 630px;
	}

	.novaStartBox {
		width: 52%;
		right: 5%;
	}

	.novaFaktenGrid {
		grid-template-columns: repeat(2, 1fr);
	}

	.novaFakt:nth-child(2) {
		border-right: 0;
	}

	.novaFakt:nth-child(1),
	.novaFakt:nth-child(2) {
		border-bottom: 1px solid rgba(44, 11, 48, 0.25);
	}

	.novaDetailGrid {
		grid-template-columns: 0.8fr 1fr;
		gap: 45px;
	}

	.novaDetailBildGross img {
		height: 480px;
	}

	.novaStoryGrid {
		gap: 60px;
	}

	.novaAbschluss {
		width: 100%;
	}

}

/* =========================================
   MOBILE
   ========================================= */

@media screen and (max-width: 600px) {

	.novaContainer {
		width: 88%;
	}

	.novaStart {
		width: 100%;

		min-height: 0;

		margin-top: 50px;
	}

	.novaStartBild {
		width: 88%;
		height: 520px;
	}

	.novaStartBox {
		position: relative;

		width: 88%;

		top: auto;
		right: auto;

		margin-top: -90px;
		margin-left: auto;

		padding: 40px 30px;

		transform: none;
	}

	.novaStartWort {
		font-size: 34vw;
		right: -2%;
		bottom: -0.12em;
	}

	/* Fakten */

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

	.novaFakt {
		min-height: 170px;
		padding: 22px;
	}

	/* Detail */

	.novaDetailGrid {
		display: block;
	}

	.novaDetailText {
		margin-bottom: 55px;
	}

	.novaDetailBildGross {
		margin: 0;
	}

	.novaDetailBildGross img {
		height: auto;
		aspect-ratio: 4 / 5;
	}

	.novaDetailBildKlein {
		width: 60%;

		margin-top: -75px;
		margin-left: auto;
		margin-right: -4%;
	}

	.novaDetailBildKlein img {
		border-width: 10px;
	}

	/* Geschichte */

	.novaStoryGrid {
		grid-template-columns: 1fr;
		gap: 45px;
	}

	.novaStoryText {
		padding-top: 0;
	}

	/* Abschluss */

	.novaAbschluss {
		width: 100%;
		min-height: 0;

		margin-bottom: 0;
	}

	.novaAbschlussBild {
		position: relative;

		width: 88%;
		height: 520px;

		margin-left: auto;
	}

	.novaAbschlussBox {
		width: 88%;

		top: auto;

		margin-top: -80px;

		padding: 40px 30px;
	}

}

/* =========================================================
   KUNT & BUNT QUICKLINKS
   ========================================================= */

.kbquicklinks {
    position: relative;
    z-index: 3;
    margin-top: -48px;
}

.kbquicklinks_container {
    width: min(1380px, calc(100% - 80px));
    margin: 0 auto;
}

.kbquicklinks_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: #2c0b30;
}

.kbquicklinks_item {
    position: relative;
    min-height: 250px;
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 18px;
    padding: 45px 40px;
    color: #ffffff;
    text-decoration: none;
    border-right: 1px solid rgba(255, 255, 255, 0.16);
    overflow: hidden;
    transition:
        background 0.35s ease,
        color 0.35s ease,
        transform 0.35s ease;
}

.kbquicklinks_item:last-child {
    border-right: 0;
}

.kbquicklinks_item::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 5px;
    background: #ffffff;
    transition: width 0.45s ease;
}

.kbquicklinks_item:hover {
    background: #3c1540;
    color: #f0c;
}

.kbquicklinks_item:hover p {
    color: #ffffff;
}

.kbquicklinks_item:hover::after {
    width: 100%;
}

.kbquicklinks_number {
    padding-top: 6px;
    font-size: 11px;
    letter-spacing: 0.16em;
    opacity: 0.55;
}

.kbquicklinks_label {
    display: block;
    margin-bottom: 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.65;
}

.kbquicklinks_item h2 {
    margin: 0 0 14px;
    color: inherit;
    font-size: clamp(30px, 2.8vw, 42px);
    font-weight: 400;
}

.kbquicklinks_item p {
    max-width: 310px;
    margin: 0 0 25px;
    color: inherit;
    font-size: 14px;
    line-height: 1.55;
    opacity: 0.8;
}

.kbquicklinks_textlink {
    position: relative;
    display: inline-block;
    padding-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
}

.kbquicklinks_textlink::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 35px;
    height: 1px;
    background: currentColor;
    transition: width 0.35s ease;
}

.kbquicklinks_item:hover .kbquicklinks_textlink::after {
    width: 100%;
}

.kbquicklinks_reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.75s ease,
        transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.kbquicklinks_reveal.is_visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 1100px) {

    .kbquicklinks_container {
        width: min(100% - 50px, 1200px);
    }

    .kbquicklinks_item {
        grid-template-columns: 35px 1fr;
        padding: 38px 28px;
    }

}

@media (max-width: 767px) {

    .kbquicklinks {
        margin-top: 0;
    }

    .kbquicklinks_container {
        width: calc(100% - 36px);
    }

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

    .kbquicklinks_item {
        min-height: auto;
        grid-template-columns: 35px 1fr;
        padding: 35px 25px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    }

}

@media (prefers-reduced-motion: reduce) {

    .kbquicklinks_reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

}

/* =========================================================
   KUNT & BUNT EDITORIAL SPLIT
   ========================================================= */

.kbeditorial {
	width: 100%;
	padding: clamp(90px, 11vw, 170px) 0;
}

.kbeditorial_container {
	width: 90%;
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
}

.kbeditorial_item {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
	align-items: stretch;
	margin-bottom: clamp(70px, 9vw, 130px);
	scroll-margin-top: 120px;
}

.kbeditorial_item:last-child {
	margin-bottom: 0;
}

.kbeditorial_media {
	grid-column: 1;
	grid-row: 1;
	min-height: clamp(480px, 48vw, 680px);
	overflow: hidden;
	background: #f7f4f6;
}

.kbeditorial_media img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: inherit;
	object-fit: cover;
}

.kbeditorial_content {
	grid-column: 2;
	grid-row: 1;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(45px, 6vw, 90px);
	box-sizing: border-box;
	background: #f7f4f6;
	overflow: hidden;
}

.kbeditorial_item--reverse .kbeditorial_media {
	grid-column: 2;
}

.kbeditorial_item--reverse .kbeditorial_content {
	grid-column: 1;
}

.kbeditorial_number {
	position: absolute;
	right: 0.08em;
	top: -0.14em;
	font-family: var(--font-display);
	font-size: clamp(130px, 15vw, 250px);
	font-weight: 400;
	line-height: 1;
	color: rgba(44, 11, 48, 0.055);
	pointer-events: none;
	user-select: none;
}

.kbeditorial_eyebrow {
	position: relative;
	z-index: 1;
	display: block;
	margin-bottom: 18px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.kbeditorial_content h2 {
	position: relative;
	z-index: 1;
	margin: 0 0 12px;
	font-family: var(--font-display) !important;
	font-size: clamp(46px, 5vw, 82px);
	font-weight: 400;
	line-height: 0.98;
	color: var(--text-color);
}

.kbeditorial_subtitle {
	position: relative;
	z-index: 1;
	display: block;
	margin-bottom: 30px;
	font-size: clamp(15px, 1.2vw, 18px);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-color);
}

.kbeditorial_content p {
	position: relative;
	z-index: 1;
	max-width: 560px;
	margin: 0;
	font-size: clamp(16px, 1.35vw, 19px);
	line-height: 1.75;
}

.kbeditorial_button {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	margin-top: 28px;
	padding: 10px 18px;
	color: #2c0b30;
	background: transparent;
	border: 1px solid rgba(44, 11, 48, 0.28);
	border-radius: 5px;
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	transition:
		background 0.3s ease,
		color 0.3s ease,
		border-color 0.3s ease,
		transform 0.3s ease;
}

.kbeditorial_button:hover {
	color: #ffffff;
	background: #2c0b30;
	border-color: #2c0b30;
	transform: translateY(-2px);
}

.kbeditorial_reveal {
	opacity: 0;
	transform: translateY(34px);
	transition:
		opacity 0.8s ease,
		transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.kbeditorial_reveal.is_visible {
	opacity: 1;
	transform: translateY(0);
	box-shadow: 0 24px 70px rgba(44, 11, 48, 0.2);
}

@media screen and (max-width: 900px) {
	.kbeditorial_item {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.kbeditorial_media {
		min-height: 520px;
	}

	.kbeditorial_content {
		padding: 45px;
	}
}

@media screen and (max-width: 700px) {
	.kbeditorial {
		padding: 80px 0;
	}

	.kbeditorial_container {
		width: 88%;
	}

	.kbeditorial_item,
	.kbeditorial_item--reverse {
		grid-template-columns: 1fr;
		margin-bottom: 70px;
		scroll-margin-top: 90px;
	}

	.kbeditorial_media,
	.kbeditorial_item--reverse .kbeditorial_media {
		grid-column: 1;
		grid-row: 1;
		min-height: 0;
		aspect-ratio: 4 / 5;
	}

	.kbeditorial_content,
	.kbeditorial_item--reverse .kbeditorial_content {
		grid-column: 1;
		grid-row: 2;
		padding: 40px 30px;
	}

	.kbeditorial_number {
		font-size: clamp(110px, 34vw, 180px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.kbeditorial_reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}


/* =========================================================
   KUNT & BUNT ACCORDION
   ========================================================= */

.kbaccordion {
    width: 100%;
	padding: clamp(70px, 9vw, 130px) 0;
	background: #f7f4f6;
}

.kbaccordion_container {
	width: 90%;
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
}

.kbaccordion_list {
	border-top: 1px solid #ded6dc;
}

.kbaccordion_item {
	border-bottom: 1px solid #ded6dc;
}

.kbaccordion_toggle {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 30px;
	align-items: center;
	padding: 30px 0;
	color: #2c0b30;
	background: transparent;
	border: 0;
	cursor: pointer;
	text-align: left;
}

.kbaccordion_title {
	font-family: var(--font-display);
	font-size: clamp(30px, 4vw, 60px);
	font-weight: 400;
	line-height: 1;
	transition: transform 0.35s ease;
}

.kbaccordion_meta {
	position: relative;
	padding-right: 34px;
	color: #716a72;
	font-size: 13px;
	white-space: nowrap;
}

.kbaccordion_meta::before,
.kbaccordion_meta::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: 16px;
	height: 1px;
	background: #2c0b30;
	transition: transform 0.35s ease;
}

.kbaccordion_meta::after {
	transform: rotate(90deg);
}

.kbaccordion_item.is_open .kbaccordion_meta::after {
	transform: rotate(0deg);
}

.kbaccordion_toggle:hover .kbaccordion_title {
	transform: translateX(10px);
}

.kbaccordion_panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.kbaccordion_panel_inner {
	overflow: hidden;
	opacity: 0;
	transform: translateY(-10px);
	transition:
		opacity 0.32s ease,
		transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
		padding-bottom 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.kbaccordion_item.is_open .kbaccordion_panel {
	grid-template-rows: 1fr;
}

.kbaccordion_item.is_open .kbaccordion_panel_inner {
	padding-bottom: 35px;
	background: #ffffff;
	opacity: 1;
	transform: translateY(0);
}

.kbaccordion_content {
	padding: 40px;
}

.kbaccordion_content p:first-child {
	margin-top: 0;
}

.kbaccordion_content p:last-child {
	margin-bottom: 0;
}

.kbnews_archive_entry + .kbnews_archive_entry {
	margin-top: 52px;
	padding-top: 42px;
	border-top: 1px solid #ded6dc;
}

.kbnews_archive_date {
	margin: 0 0 8px !important;
	color: #716a72;
	font-size: 12px !important;
	font-weight: 600;
	line-height: 1.4 !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.kbnews_archive_entry h3 {
	margin: 0 0 12px;
}

.kbnews_archive_entry p:not(.kbnews_archive_date) {
	margin: 0 0 14px;
	line-height: 1.5;
}

.kbnews_archive_entry p:last-child {
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.kbaccordion {
		padding: 60px 0 80px;
	}

	.kbaccordion_container {
		width: calc(100% - 36px);
	}

	.kbaccordion_toggle {
		grid-template-columns: 1fr;
		gap: 10px;
		padding: 23px 0;
	}

	.kbaccordion_meta {
		justify-self: start;
	}

	.kbaccordion_content {
		padding-right: 30px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kbaccordion_title,
	.kbaccordion_meta::before,
	.kbaccordion_meta::after,
	.kbaccordion_panel,
	.kbaccordion_panel_inner {
		transition: none;
	}
}

/* =========================================================
   KUNT & BUNT BREADCRUMB
   ========================================================= */

.kb-breadcrumb {
	width: 100%;
}

.kb-breadcrumb .block-content {
	width: 90%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 24px 0 18px;
}

.kb-breadcrumb .msw-breadcrumb {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0;
	width: fit-content;
	max-width: 100%;
	margin: 0;
	padding: 0 20px 10px 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(44, 11, 48, 0.16);
	font-family: var(--font-main);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.kb-breadcrumb .bc-navitem,
.kb-breadcrumb .bc-navitem a {
	color: #716a72;
	text-decoration: none;
}

.kb-breadcrumb .bc-navitem a {
	transition: color 0.25s ease;
}

.kb-breadcrumb .bc-navitem a:hover {
	color: #2c0b30;
}

.kb-breadcrumb .bc-navitem:last-of-type,
.kb-breadcrumb .bc-navitem:last-of-type a {
	color: #2c0b30;
}

.kb-breadcrumb .bc-separator {
	font-size: 0;
	margin: 0 12px;
	color: #aaa1a8;
}

.kb-breadcrumb .bc-separator::before {
	content: "/";
	font-size: 12px;
	font-weight: 400;
}

.kb-breadcrumb .eo-breadcrumb {
	display: none;
}

@media (max-width: 700px) {
	.kb-breadcrumb .block-content {
		width: 88%;
		padding: 18px 0 14px;
	}

	.kb-breadcrumb .msw-breadcrumb {
		font-size: 11px;
		letter-spacing: 0.1em;
	}

	.kb-breadcrumb .bc-separator {
		margin: 0 9px;
	}

	.kb-breadcrumb .bc-separator::before {
		font-size: 11px;
	}
}

/* =========================================================
   KUNT & BUNT INSPIRATIONEN
   ========================================================= */

#inspirationen-projekte {
	padding-top: clamp(80px, 9vw, 130px);
}

/* =========================================================
   KUNT & BUNT SOCIAL MEDIA
   ========================================================= */

.kbsocial {
	width: 100%;
	padding: 110px 0;
	background: #f3eff2;
	text-align: center;
}

.kbsocial_container {
	width: 90%;
	max-width: 820px;
	margin: 0 auto;
}

.kbsocial_kicker {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #554b55;
}

.kbsocial_title {
	margin: 0;
	font-size: clamp(38px, 5vw, 68px);
	line-height: 1;
}

.kbsocial_title span {
	display: block;
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 400;
	margin-top: 8px;
}

.kbsocial_links {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: clamp(24px, 4vw, 42px);
	margin-top: 48px;
}

.kbsocial_link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(58px, 6vw, 76px);
	height: clamp(58px, 6vw, 76px);
	color: inherit;
	background: transparent;
	text-decoration: none;
	transition: transform 0.3s ease;
}

.kbsocial_link::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -16px;
	width: 72%;
	height: 14px;
	background: rgba(77, 29, 114, 0.24);
	border-radius: 50%;
	filter: blur(7px);
	transform: translateX(-50%) skewX(-14deg) scaleY(0.72);
	transform-origin: center;
	transition:
		width 0.3s ease,
		opacity 0.3s ease,
		transform 0.3s ease,
		background 0.3s ease;
	pointer-events: none;
}

.kbsocial_link svg {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.kbsocial_link--pinterest svg {
	width: 92%;
	height: 92%;
}

.kbsocial_link path {
	transition: fill 0.3s ease;
}

.kbsocial_link:hover {
	transform: translateY(-8px);
}

.kbsocial_link:hover::after {
	width: 82%;
	background: rgba(240, 0, 204, 0.24);
	transform: translateX(-50%) skewX(-14deg) scaleY(0.82);
}

.kbsocial_link:hover path {
	fill: #f0c;
}

.kbsocial_link:focus-visible {
	outline: 3px solid #2c0b30;
	outline-offset: 5px;
}

@media screen and (max-width: 650px) {
	.kbsocial {
		padding: 75px 0;
	}

	.kbsocial_container {
		width: 88%;
	}

	.kbsocial_links {
		gap: 20px;
		margin-top: 38px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kbsocial_link,
	.kbsocial_link::after,
	.kbsocial_link path {
		transition: none;
	}
}

/* =========================================================
   KUNT & BUNT INSPIRATIONSUNTERSEITE
   ========================================================= */

.kbinspiration {
	width: 100%;
	background: #ffffff;
}

.kbinspiration > .kbeditorial {
	padding-top: clamp(45px, 5vw, 70px);
	padding-bottom: clamp(45px, 5vw, 70px);
}

.kbinspiration > .kbquicklinks + .kbeditorial {
	padding-top: clamp(70px, 7vw, 95px);
}

.kbinspiration > .kbeditorial + .kbeditorial {
	padding-top: 0;
}

.kbinspiration_linklist {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 18px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.kbinspiration_linklist li {
	position: relative;
	padding-left: 28px;
	font-size: clamp(16px, 1.35vw, 19px);
	line-height: 1.65;
}

.kbinspiration_linklist li::before {
	content: "\279C";
	position: absolute;
	left: 0;
	top: 0;
	color: #f0c;
	font-weight: 700;
}

.kbinspiration_linklist a {
	color: #2c0b30;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.kbinspiration_editorial {
	position: relative;
	overflow: hidden;
	background: #f7f4f6;
	box-shadow: 0 24px 70px rgba(44, 11, 48, 0.12);
}

.kbinspiration_editorial_number {
	position: absolute;
	right: 0.08em;
	top: -0.14em;
	font-family: var(--font-display);
	font-size: clamp(130px, 15vw, 250px);
	font-weight: 400;
	line-height: 1;
	color: rgba(44, 11, 48, 0.055);
	pointer-events: none;
	user-select: none;
}

.kbinspiration_editorial_row {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
	align-items: start;
	gap: clamp(45px, 7vw, 100px);
	padding: clamp(45px, 6vw, 90px);
	box-sizing: border-box;
}

.kbinspiration_editorial_title {
	min-width: 0;
}

.kbinspiration_editorial_title h2 {
	margin: 0;
	font-family: var(--font-display) !important;
	font-size: clamp(46px, 5vw, 82px);
	font-weight: 400;
	line-height: 0.98;
	color: var(--text-color);
}

.kbinspiration_editorial_content {
	min-width: 0;
	padding-top: 4px;
}

.kbinspiration_editorial_divider {
	position: relative;
	z-index: 1;
	width: calc(100% - clamp(90px, 12vw, 180px));
	height: 1px;
	margin: 0 auto;
	background: #ded6dc;
}

.kbinspiration_steps {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: kbinspiration-step;
}

.kbinspiration_steps li {
	position: relative;
	counter-increment: kbinspiration-step;
	padding: 20px 0 20px 58px;
	border-bottom: 1px solid #ded6dc;
	font-size: clamp(17px, 1.4vw, 20px);
	line-height: 1.5;
}

.kbinspiration_steps li:first-child {
	border-top: 1px solid #ded6dc;
}

.kbinspiration_steps li::before {
	content: "0" counter(kbinspiration-step);
	position: absolute;
	left: 0;
	top: 20px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: #716a72;
}

.kbinspiration_tiplist {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kbinspiration_tiplist li {
	position: relative;
	padding: 18px 0 18px 30px;
	border-bottom: 1px solid #ded6dc;
	font-size: clamp(16px, 1.25vw, 18px);
	line-height: 1.65;
}

.kbinspiration_tiplist li:first-child {
	border-top: 1px solid #ded6dc;
}

.kbinspiration_tiplist li::before {
	content: "\279C";
	position: absolute;
	left: 0;
	top: 18px;
	color: #f0c;
	font-weight: 700;
}

.kbinspiration_editorial_text p {
	margin: 0 0 24px;
	font-size: clamp(17px, 1.4vw, 20px);
	line-height: 1.75;
}

.kbinspiration_editorial_text p:last-child {
	margin-bottom: 0;
}

.kbinspiration_editorial_row--abschluss {
	align-items: center;
}

.kbinspiration_editorial_row--abschluss .kbinspiration_editorial_title h2 {
	font-size: clamp(38px, 4.5vw, 68px);
}

@media screen and (max-width: 900px) {
	.kbinspiration_editorial_row {
		grid-template-columns: 1fr;
		gap: 30px;
		padding: 50px 45px;
	}

	.kbinspiration_editorial_divider {
		width: calc(100% - 90px);
	}
}

@media screen and (max-width: 700px) {
	.kbinspiration_editorial_row {
		padding: 40px 30px;
	}

	.kbinspiration_editorial_number {
		font-size: clamp(110px, 34vw, 180px);
	}

	.kbinspiration_editorial_divider {
		width: calc(100% - 60px);
	}

	.kbinspiration_steps li {
		padding-left: 52px;
	}
}

/* =========================================================
   KUNT & BUNT ?BER UNS
   Team & Abschluss
   ========================================================= */

.kbabout_team {
	width: 100%;
	padding: clamp(75px, 8vw, 120px) 0 clamp(45px, 5vw, 70px);
	scroll-margin-top: 120px;
}

.kbabout_team_container {
	width: 90%;
	max-width: 1400px;
	margin: 0 auto;
}

.kbabout_team_box {
	position: relative;
	overflow: hidden;
	padding: clamp(45px, 6vw, 85px);
	background: #f7f4f6;
	box-shadow: 0 24px 70px rgba(44, 11, 48, 0.12);
}

.kbabout_team_header {
	max-width: 900px;
	margin-bottom: clamp(40px, 5vw, 70px);
}

.kbabout_team_header h2 {
	margin: 0 0 24px;
	font-family: var(--font-display) !important;
	font-size: clamp(46px, 5vw, 82px);
	font-weight: 400;
	line-height: 0.98;
	color: var(--text-color);
}

.kbabout_team_header p {
	margin: 0;
	max-width: 820px;
	font-size: clamp(17px, 1.4vw, 20px);
	line-height: 1.75;
}

.kbabout_team_grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 42px);
}

.kbabout_person {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	background: #ffffff;
}

.kbabout_person_media {
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #e8e1e6;
}

.kbabout_person_media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kbabout_person_content {
	min-width: 0;
	padding: clamp(28px, 3vw, 42px);
}

.kbabout_person_name {
	display: block;
	margin-bottom: 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #f0c;
}

.kbabout_person_content h3 {
	margin: 0 0 18px;
	font-family: var(--font-display) !important;
	font-size: clamp(30px, 3vw, 48px);
	font-weight: 400;
	line-height: 1.02;
	color: var(--text-color);
}

.kbabout_person_role {
	margin: 0 0 20px;
	font-size: 13px !important;
	font-weight: 700;
	line-height: 1.6 !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #716a72;
}

.kbabout_person_content p {
	margin: 0;
	font-size: clamp(16px, 1.2vw, 18px);
	line-height: 1.7;
}

.kbabout_values {
	width: 100%;
	padding: clamp(45px, 5vw, 70px) 0 clamp(90px, 10vw, 150px);
	scroll-margin-top: 120px;
}

.kbabout_values_container {
	width: 90%;
	max-width: 1400px;
	margin: 0 auto;
}

.kbabout_values_box {
	position: relative;
	overflow: hidden;
	padding: clamp(50px, 7vw, 95px);
	background: #f3eff2;
	color: var(--text-color);
	box-shadow: 0 24px 70px rgba(44, 11, 48, 0.12);
}

.kbabout_values_box .kbeditorial_eyebrow {
	color: var(--text-color);
}

.kbabout_values_header {
	max-width: 950px;
}

.kbabout_values_header h2 {
	margin: 0 0 28px;
	font-family: var(--font-display) !important;
	font-size: clamp(48px, 6vw, 88px);
	font-weight: 400;
	line-height: 0.98;
	color: var(--text-color);
}

.kbabout_values_header > p {
	margin: 0;
	max-width: 1000px;
	font-size: clamp(17px, 1.4vw, 20px);
	line-height: 1.75;
	color: #554b55;
}

.kbabout_values_grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: clamp(45px, 6vw, 80px);
	border-top: 1px solid #ded6dc;
}

.kbabout_value {
	min-width: 0;
	padding: clamp(28px, 4vw, 48px) clamp(24px, 3vw, 42px) 0 0;
}

.kbabout_value + .kbabout_value {
	padding-left: clamp(24px, 3vw, 42px);
	border-left: 1px solid #ded6dc;
}

.kbabout_value h3 {
	margin: 0 0 18px;
	font-family: var(--font-display) !important;
	font-size: clamp(32px, 3.4vw, 52px);
	font-weight: 400;
	line-height: 1;
	color: var(--text-color);
}

.kbabout_value p {
	margin: 0 0 clamp(24px, 2vw, 36px) 0;
	font-size: clamp(16px, 1.2vw, 18px);
	line-height: 1.7;
	color: #554b55;
}

@media screen and (max-width: 1100px) {
	.kbabout_team_grid {
		grid-template-columns: 1fr;
	}


}

@media screen and (max-width: 900px) {
	.kbabout_values_grid {
		grid-template-columns: 1fr;
	}

	.kbabout_value {
		padding: 30px 0;
	}

	.kbabout_value + .kbabout_value {
		padding-left: 0;
		border-left: 0;
		border-top: 1px solid #ded6dc;
	}
}

@media screen and (max-width: 700px) {
	.kbabout_team_container,
	.kbabout_values_container {
		width: 88%;
	}

	.kbabout_team_box {
		padding: 40px 30px;
	}

	.kbabout_person_media {
		aspect-ratio: 4 / 3;
	}

	.kbabout_values_box {
		padding: 45px 30px;
	}
}

/* RESPONSIVES NÄHVIDEO */

.kbdiy_video {
	position: relative;
	z-index: 1;
	width: calc(100% - clamp(90px, 12vw, 180px));
	aspect-ratio: 16 / 9;
	margin: clamp(40px, 5vw, 70px) auto;
	overflow: hidden;
	background: #000000;
}

.kbdiy_video iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* DOWNLOADS & HINWEIS */

.diy-page .kbabout_value {
	display: flex;
	flex-direction: column;
}

.diy-page .kbabout_value .kbeditorial_button {
	align-self: flex-start;
	margin-top: auto;
}

.kbdiy_resources_note {
	margin-top: clamp(45px, 6vw, 80px);
	padding-top: clamp(32px, 4vw, 48px);
	border-top: 1px solid #ded6dc;
}

.kbdiy_resources_note h3 {
	margin: 0 0 18px;
	font-family: var(--font-display) !important;
	font-size: clamp(32px, 3.4vw, 52px);
	font-weight: 400;
	line-height: 1;
	color: var(--text-color);
}

.kbdiy_resources_note p {
	max-width: 900px;
	margin: 0 0 16px;
	font-size: clamp(16px, 1.2vw, 18px);
	line-height: 1.7;
	color: #554b55;
}

.kbdiy_resources_note p:last-of-type {
	margin-bottom: 0;
}


@media screen and (max-width: 700px) {

	.kbdiy_video {
		width: calc(100% - 60px);
		margin: 30px auto;
	}

}

.diy-page .kbdiy_main_box {
	margin-bottom: clamp(70px, 9vw, 130px);
	scroll-margin-top: 120px;
}

.diy-page .kbdiy_main_box:last-child {
	margin-bottom: 0;
}

.diy-page > .kbeditorial {
	padding-bottom: clamp(70px, 9vw, 130px);
}

.diy-page > .kbeditorial + .kbabout_values {
	padding-top: 0;
}

@media screen and (max-width: 700px) {

	.diy-page .kbdiy_main_box {
		margin-bottom: 70px;
		scroll-margin-top: 90px;
	}

	.diy-page > .kbeditorial {
		padding-bottom: 70px;
	}

}

/* =========================================================
   DIY VORBEREITUNG MIT VOLLBREITEM BILD
   ========================================================= */

.diy-page .kbdiy_preparation_media {
	position: relative;
	z-index: 1;
	width: 100%;
	overflow: hidden;
	background: #f7f4f6;
}

.diy-page .kbdiy_preparation_media img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

.diy-page .kbdiy_preparation_text {
	margin-top: 24px;
}

.diy-page .kbdiy_preparation_ready {
	position: relative;
	z-index: 1;
	padding: clamp(40px, 5vw, 70px) clamp(45px, 6vw, 90px);
	box-sizing: border-box;
}

.diy-page .kbdiy_preparation_ready h3 {
	margin: 0 0 18px;
	font-family: var(--font-display) !important;
	font-size: clamp(38px, 4.5vw, 68px);
	font-weight: 400;
	line-height: 1;
	color: var(--text-color);
}

.diy-page .kbdiy_preparation_ready p {
	max-width: 1000px;
	margin: 0;
	font-size: clamp(17px, 1.4vw, 20px);
	line-height: 1.75;
	color: #554b55;
}

@media screen and (max-width: 700px) {

	.diy-page .kbdiy_preparation_ready {
		padding: 40px 30px;
	}

}

/* =========================================================
   DIY MATERIALNUMMERN IN ARBEITSSCHRITTEN
   ========================================================= */

.diy-page .kbdiy_material_number {
	color: #f0c;
	font-weight: 700;
}

/* =========================================================
   DIY MATERIALNUMMERN IN VORBEREITUNG
   ========================================================= */

.diy-page .kbdiy_material_list li::before {
	color: #f0c;
	font-weight: 700;
}