.ds-kuno-coloring {
	--kc-paper: #faf7ef;
	--kc-paper-soft: #f0e9dc;
	--kc-surface: #fffdf8;
	--kc-ink: #302d26;
	--kc-muted: #706a5d;
	--kc-green: #4c6548;
	--kc-ochre: #b67d34;
	--kc-line: rgba(48, 45, 38, 0.14);
	color: var(--kc-ink);
	background: var(--kc-paper);
	font-family: inherit;
}

body.ds-darkmode .ds-kuno-coloring {
	--kc-paper: #101810;
	--kc-paper-soft: #19231b;
	--kc-surface: #202a21;
	--kc-ink: #f3eddf;
	--kc-muted: #c1b9a8;
	--kc-green: #b2c39b;
	--kc-ochre: #e0b86c;
	--kc-line: rgba(243, 237, 223, 0.16);
}

.ds-kuno-coloring *,
.ds-kuno-coloring *::before,
.ds-kuno-coloring *::after {
	box-sizing: border-box;
}

.ds-kuno-coloring h1,
.ds-kuno-coloring h2,
.ds-kuno-coloring h3,
.ds-kuno-coloring p {
	margin-top: 0;
}

.ds-kuno-coloring h1,
.ds-kuno-coloring h2,
.ds-kuno-coloring h3 {
	color: var(--kc-ink);
	font-family: inherit;
}

.ds-kuno-coloring img {
	display: block;
	max-width: 100%;
	height: auto;
}

.ds-kuno-coloring :focus-visible {
	outline: 3px solid #ad762f;
	outline-offset: 4px;
}

body.ds-darkmode .ds-kuno-coloring :focus-visible {
	outline-color: #f0d18b;
}


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

.ds-kuno-coloring-hero {
	position: relative;
	min-height: 445px;
	padding: 25px max(28px, calc((100% - 1120px) / 2)) 42px;
	background:
		repeating-linear-gradient(
			135deg,
			transparent 0 36px,
			rgba(255, 255, 255, 0.055) 37px 38px
		),
		linear-gradient(
			110deg,
			#e8e0d0 0%,
			#f5eddd 58%,
			#e4e9da 100%
		);
	overflow: hidden;
}

.ds-kuno-coloring-hero__inner {
	position: relative;
	z-index: 2;
	width: min(1120px, 100%);
	min-height: 370px;
	margin-inline: auto;
	padding: 0 40% 0 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}

.ds-kuno-coloring-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 25px;
	color: #6b675d;
	font-size: 13px;
}

.ds-kuno-coloring-breadcrumb a {
	color: #52664a;
	text-underline-offset: 3px;
}

.ds-kuno-coloring-eyebrow {
	margin-bottom: 13px;
	color: #718060;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

body.ds-darkmode .ds-kuno-coloring .ds-kuno-coloring-eyebrow {
	color: #c5d0a6;
}

.ds-kuno-coloring-hero h1 {
	margin: 0;
	color: #3c4935;
	font-size: 58px;
	line-height: 1.03;
}

.ds-kuno-coloring-hero__lead {
	max-width: 680px;
	margin: 16px 0 0;
	color: #5f5a50;
	font-size: 17px;
	line-height: 1.7;
}

.ds-kuno-coloring-hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 11px 26px;
	margin-top: 20px;
	color: #625d52;
	font-size: 13px;
}

.ds-kuno-coloring-hero__facts span {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
}

.ds-kuno-coloring-hero__facts strong {
	color: #4d6245;
	font-size: 18px;
}

.ds-kuno-coloring-hero__button {
	display: inline-flex;
	min-height: 47px;
	align-items: center;
	gap: 12px;
	margin-top: 20px;
	padding: 10px 18px;
	background: #718361;
	color: #fffdf8 !important;
	font-size: 14px;
	font-weight: 750;
	text-decoration: none;
	transition:
		transform 180ms ease,
		background-color 180ms ease;
}

.ds-kuno-coloring-hero__button:hover,
.ds-kuno-coloring-hero__button:focus-visible {
	transform: translateY(-2px);
	background: #5c704f;
}

.ds-kuno-coloring-hero__art {
	position: absolute;
	z-index: 1;
	right: max(6%, calc((100% - 1120px) / 2));
	bottom: 0;
	width: min(38%, 390px);
	height: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.ds-kuno-coloring-hero__art::before {
	position: absolute;
	bottom: -16%;
	left: 8%;
	width: 88%;
	aspect-ratio: 1;
	border-radius: 50%;
	background:
		radial-gradient(
			circle at 48% 43%,
			rgba(226, 190, 115, 0.48),
			rgba(226, 190, 115, 0.1) 66%,
			transparent 67%
		);
	content: "";
}

.ds-kuno-coloring-hero__art img {
	position: relative;
	z-index: 2;
	width: min(100%, 340px);
	max-height: 410px;
	object-fit: contain;
	object-position: bottom center;
	filter: drop-shadow(0 14px 18px rgba(66, 53, 33, 0.12));
}

.ds-kuno-coloring-hero__art img.ds-kuno-mascot-image {
	image-rendering: auto;
}

.ds-kuno-coloring-hero__leaf {
	position: absolute;
	z-index: 3;
	width: 42px;
	height: 22px;
	border-radius: 100% 0 100% 0;
	background: #82936f;
	opacity: 0.8;
	transform: rotate(-25deg);
}

.ds-kuno-coloring-hero__leaf--one {
	left: -1%;
	bottom: 33%;
}

.ds-kuno-coloring-hero__leaf--two {
	right: 5%;
	bottom: 25%;
	background: #a4a66f;
	transform: rotate(35deg) scale(0.78);
}

.ds-kuno-coloring-hero__flower {
	position: absolute;
	top: 27%;
	left: 8%;
	z-index: 3;
	color: #bd8940;
	font-size: 34px;
}

.ds-kuno-coloring-hero__pencil {
	position: absolute;
	z-index: 3;
	width: 9px;
	height: 91px;
	border: 1px solid rgba(87, 68, 42, 0.4);
	border-radius: 4px 4px 2px 2px;
	background:
		linear-gradient(
			90deg,
			#d5a14c 0 23%,
			#f1cb78 24% 77%,
			#bb8136 78%
		);
	box-shadow: 0 3px 7px rgba(55, 46, 32, 0.14);
	transform: rotate(31deg);
}

.ds-kuno-coloring-hero__pencil::before {
	position: absolute;
	top: -8px;
	left: -1px;
	width: 0;
	height: 0;
	border-right: 4px solid transparent;
	border-bottom: 9px solid #e9d6aa;
	border-left: 4px solid transparent;
	content: "";
}

.ds-kuno-coloring-hero__pencil--one {
	bottom: 15%;
	left: 9%;
}

.ds-kuno-coloring-hero__pencil--two {
	right: 1%;
	bottom: 37%;
	background:
		linear-gradient(
			90deg,
			#8b9b73 0 23%,
			#b9c39a 24% 77%,
			#6c805c 78%
		);
	transform: rotate(-33deg) scale(0.8);
}

.ds-kuno-coloring-hero__stamp {
	position: absolute;
	right: -3%;
	bottom: 17%;
	z-index: 4;
	display: flex;
	width: 135px;
	height: 135px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(81, 94, 65, 0.42);
	border-radius: 50%;
	color: #526549;
	font-size: 13px;
	font-weight: 750;
	line-height: 1.3;
	text-align: center;
	transform: rotate(8deg);
}

.ds-kuno-coloring-hero__stamp b {
	margin-top: 2px;
	color: #a27639;
	font-size: 33px;
}


/* =========================================================
   DARKMODE HERO
   ========================================================= */

body.ds-darkmode .ds-kuno-coloring-hero {
	background:
		repeating-linear-gradient(
			135deg,
			transparent 0 36px,
			rgba(255, 255, 255, 0.018) 37px 38px
		),
		linear-gradient(
			110deg,
			#17231a,
			#202b20 58%,
			#263027
		);
}

body.ds-darkmode .ds-kuno-coloring-hero__button {
	background: #d1aa64;
	color: #211d14 !important;
}

body.ds-darkmode .ds-kuno-coloring-hero__leaf {
	background: #829775;
}

body.ds-darkmode .ds-kuno-coloring-hero__leaf--two {
	background: #a5a879;
}

body.ds-darkmode .ds-kuno-coloring-hero h1,
body.ds-darkmode .ds-kuno-coloring-hero__lead,
body.ds-darkmode .ds-kuno-coloring-hero__facts {
	color: var(--kc-ink);
}

body.ds-darkmode .ds-kuno-coloring-breadcrumb {
	color: var(--kc-muted);
}

body.ds-darkmode .ds-kuno-coloring-breadcrumb a,
body.ds-darkmode .ds-kuno-coloring-hero__facts strong {
	color: #c5d0a6;
}

body.ds-darkmode .ds-kuno-coloring-hero__stamp {
	border-color: rgba(243, 237, 223, 0.32);
	color: #e5d7b7;
}


/* =========================================================
   SAMMLUNGSÜBERSCHRIFT
   ========================================================= */

.ds-kuno-coloring-toolbar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
	align-items: end;
	gap: 36px;
	width: min(1120px, calc(100% - 56px));
	margin: 0 auto;
	padding: 58px 0 28px;
	border-bottom: 1px solid var(--kc-line);
}

.ds-kuno-coloring-toolbar h2 {
	margin: 0;
	font-size: 32px;
	line-height: 1.2;
}

.ds-kuno-coloring-toolbar > p {
	margin: 0;
	color: var(--kc-muted);
	font-size: 14px;
	line-height: 1.7;
}


/* =========================================================
   AUSMALBILD-GRID
   ========================================================= */

.ds-kuno-coloring-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	width: min(1120px, calc(100% - 56px));
	margin: 28px auto 76px;
}

.ds-kuno-coloring-card {
	min-width: 0;
	border: 1px solid var(--kc-line);
	border-radius: 8px;
	background: var(--kc-surface);
	box-shadow: 0 8px 22px rgba(55, 48, 34, 0.055);
	overflow: hidden;
	transition:
		transform 200ms ease,
		box-shadow 200ms ease,
		border-color 200ms ease;
}

.ds-kuno-coloring-card:hover,
.ds-kuno-coloring-card:focus-within {
	transform: translateY(-4px);
	border-color: rgba(114, 131, 97, 0.48);
	box-shadow: 0 16px 32px rgba(55, 48, 34, 0.11);
}

.ds-kuno-coloring-card__figure {
	margin: 0;
}


/* =========================================================
   AUSMALBILD-VORSCHAU
   A4-Hochformat – vollständiges Motiv sichtbar
   ========================================================= */

.ds-kuno-coloring-card__image-link {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	aspect-ratio: 210 / 297;

	padding: 14px;

	overflow: hidden;

	background: var(--kc-paper-soft);

	transition: background-color 200ms ease;
}

.ds-kuno-coloring-card:hover .ds-kuno-coloring-card__image-link {
	background: #e8eadf;
}

.ds-kuno-coloring-card__image-link img {
	display: block;

	width: 100%;
	height: 100%;

	max-width: 100%;
	max-height: 100%;

	margin: 0;

	object-fit: contain;
	object-position: center;
}


/* =========================================================
   PLATZHALTER FÜR NOCH FEHLENDE MOTIVE
   ========================================================= */

.ds-kuno-coloring-placeholder {
	position: relative;
	display: grid;
	min-height: 260px;
	aspect-ratio: 4 / 3;
	place-items: center;
	border-bottom: 1px solid var(--kc-line);
	background-color: var(--kc-paper-soft);
	background-image:
		repeating-linear-gradient(
			135deg,
			transparent 0 16px,
			rgba(119, 112, 91, 0.045) 17px 18px
		);
	color: var(--kc-muted);
	text-align: center;
	transition: background-color 200ms ease;
}

.ds-kuno-coloring-card:hover .ds-kuno-coloring-placeholder {
	background-color: #e9eadf;
}

.ds-kuno-coloring-placeholder::before {
	position: absolute;
	inset: 16px;
	border: 1px dashed rgba(112, 106, 93, 0.35);
	content: "";
	pointer-events: none;
}

.ds-kuno-coloring-placeholder__number {
	position: absolute;
	top: 28px;
	left: 30px;
	color: var(--kc-green);
	font-size: 24px;
	font-weight: 750;
}

.ds-kuno-coloring-placeholder__label {
	font-size: 13px;
	font-weight: 650;
	line-height: 1.55;
}

.ds-kuno-coloring-placeholder__mark {
	position: absolute;
	right: 30px;
	bottom: 22px;
	color: var(--kc-ochre);
	font-size: 23px;
}


/* =========================================================
   BILDUNTERSCHRIFT
   ========================================================= */

.ds-kuno-coloring-card__caption {
	padding: 9px 14px;
	border-bottom: 1px solid var(--kc-line);
	color: var(--kc-muted);
	font-size: 11px;
	line-height: 1.45;
}


/* =========================================================
   KARTENINHALT
   ========================================================= */

.ds-kuno-coloring-card__body {
	padding: 19px 18px 20px;
}

.ds-kuno-coloring-card__index {
	margin-bottom: 8px;
	color: var(--kc-ochre);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.08em;
}

.ds-kuno-coloring-card h3 {
	margin: 0 0 9px;
	font-size: 19px;
	line-height: 1.28;
}

.ds-kuno-coloring-card__body > p:not(.ds-kuno-coloring-card__index) {
	min-height: 72px;
	margin: 0;
	color: var(--kc-muted);
	font-size: 13px;
	line-height: 1.65;
}


/* =========================================================
   KARTEN-AKTIONEN
   ========================================================= */

.ds-kuno-coloring-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 9px 16px;
	margin-top: 17px;
	padding-top: 14px;
	border-top: 1px solid var(--kc-line);
}

.ds-kuno-coloring-action {
	display: inline-flex;
	min-height: 36px;
	align-items: center;
	gap: 7px;
	padding: 5px 0;
	border: 0;
	background: transparent;
	color: var(--kc-green) !important;
	font-family: inherit;
	font-size: 12px;
	font-weight: 750;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.ds-kuno-coloring-action:hover,
.ds-kuno-coloring-action:focus-visible {
	color: var(--kc-ochre) !important;
}

.ds-kuno-coloring-action--download {
	font-weight: 800;
}

.ds-kuno-coloring-card__pending {
	color: var(--kc-muted);
	font-size: 12px;
	font-weight: 700;
}


/* =========================================================
   AUSMALBUCH-BEREICH
   ========================================================= */

.ds-kuno-coloring-book {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	align-items: center;
	gap: 34px;
	width: min(920px, calc(100% - 56px));
	margin: 0 auto 76px;
	padding: 30px;
	border: 1px solid var(--kc-line);
	border-radius: 8px;
	background: var(--kc-paper-soft);
}

.ds-kuno-coloring-book__art {
	position: relative;
	display: grid;
	width: 150px;
	height: 185px;
	place-items: center;
	border: 1px solid rgba(74, 91, 67, 0.4);
	background: var(--kc-surface);
	box-shadow: 7px 7px 0 rgba(74, 91, 67, 0.14);
	color: var(--kc-green);
	transform: rotate(-3deg);
}

.ds-kuno-coloring-book__art span {
	font-size: 48px;
	font-weight: 800;
}

.ds-kuno-coloring-book__art i {
	position: absolute;
	right: 14px;
	bottom: 8px;
	color: var(--kc-ochre);
	font-size: 24px;
	font-style: normal;
}

.ds-kuno-coloring-book__copy .ds-kuno-coloring-eyebrow {
	margin-bottom: 8px;
}

.ds-kuno-coloring-book h2 {
	margin: 0 0 10px;
	font-size: 27px;
	line-height: 1.2;
}

.ds-kuno-coloring-book__copy > p:not(.ds-kuno-coloring-eyebrow) {
	max-width: 610px;
	margin: 0;
	color: var(--kc-muted);
	font-size: 14px;
	line-height: 1.7;
}

.ds-kuno-coloring-book__button {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	gap: 12px;
	margin-top: 17px;
	padding: 10px 15px;
	background: #718361;
	color: #fffdf8 !important;
	font-size: 13px;
	font-weight: 750;
	text-decoration: none;
}

.ds-kuno-coloring-book__status {
	margin-top: 13px !important;
	color: var(--kc-muted);
	font-size: 13px !important;
	font-weight: 700;
}

body.ds-darkmode .ds-kuno-coloring-book__button {
	background: #d1aa64;
	color: #211d14 !important;
}

.ds-kuno-coloring-book__copy p {
	margin: 0;
	color: var(--kc-muted);
	font-size: 14px;
	line-height: 1.7;
}


/* =========================================================
   FOOTER-BEREICH
   ========================================================= */

.ds-kuno-coloring-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 14px;
	width: min(1120px, calc(100% - 56px));
	margin: 0 auto;
	padding: 24px 0 58px;
	border-top: 1px solid var(--kc-line);
}

.ds-kuno-coloring-footer a {
	color: var(--kc-green) !important;
	font-size: 13px;
	font-weight: 750;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}


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

@media (max-width: 900px) {

	.ds-kuno-coloring-hero {
		min-height: 400px;
	}

	.ds-kuno-coloring-hero__inner {
		min-height: 345px;
		padding-right: 38%;
	}

	.ds-kuno-coloring-hero h1 {
		font-size: 48px;
	}

	.ds-kuno-coloring-hero__art {
		right: 4%;
		width: 38%;
	}

	.ds-kuno-coloring-hero__art img {
		max-height: 365px;
	}

	.ds-kuno-coloring-hero__stamp {
		right: -2%;
		bottom: 18%;
		width: 100px;
		height: 100px;
		font-size: 11px;
	}

	.ds-kuno-coloring-hero__stamp b {
		font-size: 26px;
	}

	.ds-kuno-coloring-toolbar,
	.ds-kuno-coloring-grid,
	.ds-kuno-coloring-footer {
		width: calc(100% - 40px);
	}

	.ds-kuno-coloring-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 15px;
	}

	/*
	 * Nur der Platzhalter bekommt hier noch eine Mindesthöhe.
	 * Die echten A4-Bilder behalten ihr Seitenverhältnis automatisch.
	 */
	.ds-kuno-coloring-placeholder {
		min-height: 210px;
	}
}


/* =========================================================
   SMARTPHONE
   ========================================================= */

@media (max-width: 600px) {

	.ds-kuno-coloring-hero {
		min-height: 0;
		padding: 20px 20px 0;
	}

	.ds-kuno-coloring-hero__inner {
		width: 100%;
		min-height: 0;
		padding: 0;
	}

	.ds-kuno-coloring-breadcrumb {
		margin-bottom: 24px;
		font-size: 12px;
	}

	.ds-kuno-coloring-eyebrow {
		max-width: 300px;
		font-size: 10px;
		line-height: 1.5;
	}

	.ds-kuno-coloring-hero h1 {
		font-size: 39px;
	}

	.ds-kuno-coloring-hero__lead {
		max-width: 460px;
		font-size: 15px;
	}

	.ds-kuno-coloring-hero__facts {
		flex-direction: column;
		gap: 8px;
		margin-top: 20px;
	}

	.ds-kuno-coloring-hero__art {
		position: relative;
		right: auto;
		bottom: auto;
		width: 100%;
		height: 235px;
		margin-top: 6px;
	}

	.ds-kuno-coloring-hero__art img {
		width: auto;
		max-width: 64%;
		max-height: 245px;
	}

	.ds-kuno-coloring-hero__stamp {
		right: 2%;
		bottom: 17%;
		width: 70px;
		height: 70px;
		font-size: 9px;
	}

	.ds-kuno-coloring-hero__stamp b {
		font-size: 20px;
	}

	.ds-kuno-coloring-toolbar {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
		width: calc(100% - 36px);
		padding: 49px 0 24px;
	}

	.ds-kuno-coloring-toolbar h2 {
		font-size: 27px;
	}

	.ds-kuno-coloring-grid {
		grid-template-columns: minmax(0, 1fr);
		width: calc(100% - 36px);
		gap: 14px;
		margin-top: 18px;
		margin-bottom: 56px;
	}

	/*
	 * Auch mobil bleibt das echte Bild im A4-Verhältnis.
	 * Nur der Platzhalter benötigt weiterhin eine Mindesthöhe.
	 */
	.ds-kuno-coloring-placeholder {
		min-height: 240px;
	}

	.ds-kuno-coloring-card__body > p:not(.ds-kuno-coloring-card__index) {
		min-height: 0;
	}

	.ds-kuno-coloring-book {
		grid-template-columns: minmax(0, 1fr);
		justify-items: start;
		gap: 24px;
		width: calc(100% - 36px);
		margin-bottom: 55px;
		padding: 23px;
	}

	.ds-kuno-coloring-book__art {
		width: 110px;
		height: 136px;
	}

	.ds-kuno-coloring-book__art span {
		font-size: 38px;
	}

	.ds-kuno-coloring-book h2 {
		font-size: 23px;
	}

	.ds-kuno-coloring-footer {
		width: calc(100% - 36px);
		flex-direction: column;
		padding-bottom: 42px;
	}
}


/* =========================================================
   REDUZIERTE BEWEGUNG
   ========================================================= */

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

	.ds-kuno-coloring *,
	.ds-kuno-coloring *::before,
	.ds-kuno-coloring *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}