/* =========================================================
   DOWNLOAD-LISTEN
   ========================================================= */

.download-lists {
	width: 100%;

	padding-block:
		var(--content-block-padding-y);
}


.download-lists__inner {
	width: 100%;
	max-width:
		var(--content-width);

	margin-inline:
		auto;
}


/* =========================================================
   MODUL-ÜBERSCHRIFT
   ========================================================= */

.download-lists__headline {
	margin-top: 0;
	margin-bottom: 0.75rem;
}


.download-lists__intro {
	margin-bottom: 2.5rem;
}


.download-lists__intro > :first-child {
	margin-top: 0;
}


.download-lists__intro > :last-child {
	margin-bottom: 0;
}


/* =========================================================
   DOWNLOAD-GRUPPE
   ========================================================= */

.download-group {
	margin-bottom: 2.5rem;
}


.download-group:last-child {
	margin-bottom: 0;
}


.download-group__headline {
	margin:
		0
		0
		0.8rem;

	padding-bottom:
		0.55rem;

	border-bottom:
		2px solid
		var(--logo-color-1);

	color:
		var(--font-color);

	font-size:
		1.05rem;

	line-height:
		1.25;
}


/* =========================================================
   DOWNLOAD-LISTE
   ========================================================= */

.download-group__items {
	display: flex;
	flex-direction: column;

	gap:
		0.55rem;
}


/* =========================================================
   EINZELNER DOWNLOAD
   ========================================================= */

.download-item {
	display: grid;

	grid-template-columns:
		48px
		minmax(0, 1fr)
		auto;

	align-items:
		center;

	column-gap:
		1rem;

	width:
		100%;

	padding:
		0.85rem
		1rem;

	box-sizing:
		border-box;

	background:
		var(--neutral-color-light);

	border-radius:
		var(--card-border-radius);

	box-shadow:
		0 2px 10px
		rgba(
			var(--shadow-color-rgb),
			0.06
		);

	transition:
		background-color var(--transition-time),
		transform var(--transition-time),
		box-shadow var(--transition-time);
}


.download-item:hover {
	background:
		color-mix(
			in srgb,
			var(--logo-color-1-light) 18%,
			var(--neutral-color-light)
		);

	transform:
		translateY(-2px);

	box-shadow:
		0 5px 16px
		rgba(
			var(--shadow-color-rgb),
			0.10
		);
}


/* =========================================================
   DOWNLOAD-ICON
   ========================================================= */

.download-item__icon {
	display: flex;

	align-items:
		center;

	justify-content:
		center;

	width:
		42px;

	height:
		42px;

	background:
		var(--logo-color-1);

	color:
		var(--font-color-light);

	border-radius:
		var(--button-border-radius);
}


.download-item__icon svg {
	display: block;

	width:
		20px;

	height:
		20px;

	flex:
		0 0 20px;
}


/* =========================================================
   DOWNLOAD-INHALT
   ========================================================= */

.download-item__content {
	min-width:
		0;
}


.download-item__title {
	margin-bottom:
		0.2rem;

	color:
		var(--font-color);

	font-size:
		0.9rem;

	line-height:
		1.3;

	font-weight:
		600;
}


.download-item__text {
	color:
		var(--font-color);

	font-size:
		0.76rem;

	line-height:
		1.4;
}


/* =========================================================
   DATEIGRÖSSE / BUTTON
   ========================================================= */

.download-item__meta {
	display: flex;

	align-items:
		center;

	justify-content:
		flex-end;

	gap:
		1rem;

	min-width:
		0;
}


.download-item__size {
	color:
		var(--font-color);

	font-size:
		0.72rem;

	line-height:
		1.2;

	white-space:
		nowrap;
}


/* =========================================================
   DOWNLOAD-BUTTON
   ========================================================= */

.download-item__button {
	display: inline-flex;

	align-items:
		center;

	justify-content:
		center;

	gap:
		0.4rem;

	padding:
		0.5rem
		0.8rem;

	background:
		var(--logo-color-1);

	color:
		var(--font-color-light);

	border-radius:
		var(--button-border-radius);

	font-size:
		0.72rem;

	line-height:
		1;

	font-weight:
		600;

	text-decoration:
		none;

	white-space:
		nowrap;

	transition:
		background-color var(--transition-time),
		transform var(--transition-time);
}


.download-item__button:hover,
.download-item__button:focus-visible {
	background:
		var(--logo-color-1-dark);

	color:
		var(--font-color-light);

	text-decoration:
		none;

	transform:
		translateY(-1px);
}


.download-item__button svg {
	display: block;

	width:
		14px;

	height:
		14px;

	flex:
		0 0 14px;
}


.download-item__button:focus-visible {
	outline:
		3px solid
		var(--logo-color-1-light);

	outline-offset:
		3px;
}


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

@media (max-width: 900px) {

	.download-item {
		grid-template-columns:
			42px
			minmax(0, 1fr);

		row-gap:
			0.75rem;
	}


	.download-item__icon {
		width:
			38px;

		height:
			38px;
	}


	.download-item__meta {
		grid-column:
			2;

		justify-content:
			flex-start;
	}

}


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

@media (max-width: 600px) {

	.download-item {
		grid-template-columns:
			36px
			minmax(0, 1fr);

		column-gap:
			0.75rem;

		padding:
			0.8rem;
	}


	.download-item__icon {
		width:
			34px;

		height:
			34px;
	}


	.download-item__icon svg {
		width:
			17px;

		height:
			17px;
	}


	.download-item__meta {
		display:
			flex;

		flex-wrap:
			wrap;

		gap:
			0.6rem;
	}

}