/* ==========================================================
   Blue Devils DC
   Blog und Vereinsmagazin

   Datei:
   /assets/css/blog.css
========================================================== */


/* ==========================================================
   1. Seitenrahmen
========================================================== */

.blog-page {
	width:min(1180px, calc(100% - 32px));
	margin:0 auto 96px;
}


/* ==========================================================
   2. Featured-Beitrag
========================================================== */

.blog-featured {
	position:relative;
	display:grid;
	grid-template-columns:minmax(0, 1.08fr) minmax(360px, .92fr);
	min-height:460px;
	margin-bottom:68px;
	overflow:hidden;
	border:1px solid rgba(255,255,255,.1);
	border-radius:32px;
	background:
		radial-gradient(
			circle at 90% 0%,
			rgba(28,140,255,.18),
			transparent 34%
		),
		linear-gradient(
			145deg,
			rgba(18,31,69,.98),
			rgba(9,16,38,.97)
		);
	box-shadow:0 30px 90px rgba(0,0,0,.32);
	isolation:isolate;
}

/* Dezente Lichtstruktur über dem Featured-Beitrag */

.blog-featured::before {
	content:"";
	position:absolute;
	z-index:0;
	inset:0;
	pointer-events:none;
	background:
		linear-gradient(
			115deg,
			rgba(255,255,255,.035),
			transparent 32%
		),
		radial-gradient(
			circle at 75% 80%,
			rgba(72,226,167,.08),
			transparent 34%
		);
}


/* ==========================================================
   2.1 Featured-Medienbereich
========================================================== */

.blog-featured-media {
	position:relative;
	z-index:1;
	display:block;
	min-height:460px;
	overflow:hidden;
	background:#091329;
}

.blog-featured-media > img {
	width:100%;
	height:100%;
	display:block;
	object-fit:cover;
	transition:
		transform .6s ease,
		filter .6s ease;
}

.blog-featured:hover .blog-featured-media > img {
	transform:scale(1.045);
	filter:saturate(1.1);
}

/* Verlauf zwischen Bild und Textbereich */

.blog-featured-shade {
	position:absolute;
	inset:0;
	pointer-events:none;
	background:
		linear-gradient(
			90deg,
			transparent 50%,
			rgba(8,15,35,.48)
		),
		linear-gradient(
			180deg,
			transparent 58%,
			rgba(5,10,24,.42)
		);
}


/* ==========================================================
   2.2 Featured-Inhalt
========================================================== */

.blog-featured-content {
	position:relative;
	z-index:2;
	display:flex;
	flex-direction:column;
	justify-content:center;
	padding:46px;
}

.blog-featured-content h2 {
	margin:0 0 18px;
	font-size:clamp(2.25rem, 4vw, 4.35rem);
	line-height:1;
	letter-spacing:-.045em;
	text-wrap:balance;
}

.blog-featured-content h2 a {
	color:var(--text);
	text-decoration:none;
	transition:color .2s ease;
}

.blog-featured-content h2 a:hover {
	color:var(--primary2);
}

.blog-featured-excerpt {
	margin:0 0 28px;
	color:var(--muted);
	font-size:1.02rem;
	line-height:1.75;
}


/* ==========================================================
   2.3 Featured-Link
========================================================== */

.blog-featured-link {
	display:inline-flex;
	align-items:center;
	justify-content:space-between;
	gap:20px;
	width:100%;
	margin-top:auto;
	padding:15px 18px;
	border:1px solid rgba(255,255,255,.1);
	border-radius:16px;
	background:rgba(255,255,255,.055);
	color:var(--text);
	font-weight:900;
	text-decoration:none;
	transition:
		transform .22s ease,
		background .22s ease,
		border-color .22s ease;
}

.blog-featured-link span {
	font-size:1.25rem;
	transition:transform .22s ease;
}

.blog-featured-link:hover {
	transform:translateY(-2px);
	border-color:rgba(99,180,255,.35);
	background:rgba(28,140,255,.12);
}

.blog-featured-link:hover span {
	transform:translateX(4px);
}


/* ==========================================================
   3. Logo-Fallback

   Wird angezeigt, wenn ein Beitrag kein eigenes Bild besitzt.
========================================================== */

.blog-logo-fallback {
	position:absolute;
	inset:0;
	display:flex;
	align-items:flex-start;
	justify-content:center;
	padding-top:44px;
	overflow:hidden;
	background:
		radial-gradient(
			circle at 20% 12%,
			rgba(66,136,231,.48),
			transparent 40%
		),
		radial-gradient(
			circle at 82% 86%,
			rgba(31,182,167,.16),
			transparent 34%
		),
		linear-gradient(
			145deg,
			#17366e,
			#0a1730 64%,
			#07101f
		);
}

/* Feine diagonale Struktur im Hintergrund */

.blog-logo-fallback::before {
	content:"";
	position:absolute;
	inset:0;
	pointer-events:none;
	background:
		linear-gradient(
			135deg,
			rgba(255,255,255,.045),
			transparent 38%
		),
		repeating-linear-gradient(
			135deg,
			transparent 0,
			transparent 30px,
			rgba(255,255,255,.012) 31px,
			rgba(255,255,255,.012) 32px
		);
}

/* Vereinslogo innerhalb des Fallbacks */

.blog-logo-fallback img {
	position:relative;
	z-index:1;
	width:145px;
	max-height:170px;
	object-fit:contain;
	filter:drop-shadow(0 20px 38px rgba(0,0,0,.46));
	transition:
		transform .45s ease,
		filter .45s ease;
}

/* Featured-Logo darf größer erscheinen */

.blog-logo-fallback-featured {
	align-items:center;
	padding-top:0;
}

.blog-logo-fallback-featured img {
	width:clamp(170px, 38%, 250px);
	max-height:280px;
}

/* Ruhiger Hover-Effekt */

.blog-featured:hover .blog-logo-fallback img,
.blog-card:hover .blog-logo-fallback img {
	transform:translateY(-4px) scale(1.025);
	filter:drop-shadow(0 27px 46px rgba(0,0,0,.52));
}


/* ==========================================================
   4. Badges
========================================================== */

.blog-badges {
	display:flex;
	flex-wrap:wrap;
	gap:9px;
	margin-bottom:20px;
}

.blog-badge {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:max-content;
	padding:7px 11px;
	border:1px solid rgba(99,180,255,.3);
	border-radius:999px;
	background:rgba(28,140,255,.12);
	color:var(--primary2);
	font-size:.7rem;
	font-weight:900;
	line-height:1;
	letter-spacing:.095em;
	text-transform:uppercase;
	backdrop-filter:blur(10px);
}

.blog-badge-featured {
	border-color:rgba(72,226,167,.3);
	background:rgba(72,226,167,.12);
	color:var(--success);
}


/* ==========================================================
   Verlinktes Badge im Featured-Beitrag
========================================================== */

.blog-badge-link {
	text-decoration:none;
	transition:
		transform .2s ease,
		border-color .2s ease,
		background .2s ease,
		color .2s ease;
}

.blog-badge-link:hover {
	transform:translateY(-1px);
	border-color:rgba(99,180,255,.48);
	background:rgba(28,140,255,.2);
	color:#fff;
}


/* ==========================================================
   Verlinkte Kategorie in Beitragskarten
========================================================== */

.blog-category-link {
	display:inline-flex;
	align-items:center;
	width:max-content;
	margin-bottom:13px;
	color:var(--primary2);
	font-size:.73rem;
	font-weight:900;
	line-height:1.2;
	letter-spacing:.075em;
	text-decoration:none;
	text-transform:uppercase;
}

.blog-category-link::after {
	content:"→";
	margin-left:7px;
	transition:transform .2s ease;
}

.blog-category-link:hover::after {
	transform:translateX(4px);
}

/* ==========================================================
   5. Metadaten
========================================================== */

.blog-meta {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:10px;
	margin-bottom:18px;
	color:var(--muted);
	font-size:.86rem;
}

.blog-meta span {
	display:inline-flex;
	align-items:center;
}

.blog-meta span + span::before {
	content:"•";
	margin-right:10px;
	color:rgba(255,255,255,.3);
}


/* ==========================================================
   6. Bereichsüberschrift
========================================================== */

.blog-section-head {
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:30px;
	margin-bottom:30px;
}

.blog-section-head h2 {
	margin:2px 0 0;
	font-size:clamp(2rem, 3.5vw, 3rem);
	line-height:1.05;
	letter-spacing:-.035em;
}

.blog-section-head > p {
	max-width:440px;
	margin:0;
	color:var(--muted);
	line-height:1.7;
}


/* ==========================================================
   7. Karten-Grid

   auto-fit sorgt dafür, dass zwei Beiträge die Breite
   gleichmäßig ausfüllen und keine leere dritte Spalte bleibt.
========================================================== */

.blog-grid {
	display:grid;
	grid-template-columns:repeat(
		auto-fit,
		minmax(min(100%, 320px), 1fr)
	);
	gap:26px;
}


/* ==========================================================
   8. Beitragskarte
========================================================== */

.blog-card {
	position:relative;
	display:flex;
	flex-direction:column;
	min-width:0;
	min-height:570px;
	overflow:hidden;
	border:1px solid rgba(255,255,255,.09);
	border-radius:26px;
	background:
		linear-gradient(
			180deg,
			rgba(18,29,64,.96),
			rgba(8,15,35,.98)
		);
	box-shadow:0 20px 52px rgba(0,0,0,.2);
	transition:
		transform .28s ease,
		border-color .28s ease,
		box-shadow .28s ease;
}

.blog-card:hover {
	transform:translateY(-7px);
	border-color:rgba(99,180,255,.34);
	box-shadow:0 30px 70px rgba(0,0,0,.3);
}


/* ==========================================================
   8.1 Kartenbild
========================================================== */

.blog-card-media {
	position:relative;
	display:block;
	height:350px;
	overflow:hidden;
	background:#091329;
}

.blog-card-media > img {
	width:100%;
	height:100%;
	display:block;
	object-fit:cover;
	transition:
		transform .55s ease,
		filter .55s ease;
}

.blog-card:hover .blog-card-media > img {
	transform:scale(1.06);
	filter:saturate(1.12);
}


/* ==========================================================
   8.2 Verlauf über dem Kartenbild
========================================================== */

.blog-card-overlay {
	position:absolute;
	z-index:1;
	inset:0;
	pointer-events:none;
	background:
		linear-gradient(
			180deg,
			rgba(5,10,24,0) 16%,
			rgba(5,10,24,.06) 34%,
			rgba(5,10,24,.46) 57%,
			rgba(5,10,24,.84) 73%,
			rgba(5,10,24,.99) 100%
		);
}


/* ==========================================================
   8.3 Titelbereich auf dem Kartenbild
========================================================== */

.blog-card-image-content {
	position:absolute;
	z-index:2;
	right:0;
	bottom:0;
	left:0;
	padding:28px 28px 30px;
}

.blog-card-image-content .blog-badge {
	margin-bottom:18px;
}

.blog-card-image-content h2 {
	max-width:95%;
	margin:0;
	color:#fff;
	font-size:clamp(1.65rem, 2.1vw, 2.2rem);
	line-height:1.08;
	letter-spacing:-.035em;
	text-wrap:balance;
	overflow-wrap:anywhere;
}


/* ==========================================================
   8.4 Karteninhalt unter dem Bild
========================================================== */

.blog-card-content {
	display:flex;
	flex:1;
	flex-direction:column;
	padding:25px 28px 28px;
}

.blog-card-content .blog-meta {
	margin-bottom:18px;
}

.blog-card-content p {
	display:-webkit-box;
	margin:0 0 22px;
	overflow:hidden;
	color:var(--muted);
	line-height:1.7;
	-webkit-line-clamp:3;
	-webkit-box-orient:vertical;
}


/* ==========================================================
   8.5 Weiterlesen-Link
========================================================== */

.blog-readmore {
	display:inline-flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	margin-top:auto;
	padding-top:18px;
	border-top:1px solid rgba(255,255,255,.075);
	color:var(--primary2);
	font-weight:900;
	text-decoration:none;
}

.blog-readmore span {
	font-size:1.2rem;
	transition:transform .2s ease;
}

.blog-readmore:hover span {
	transform:translateX(5px);
}


/* ==========================================================
   9. Leerer Blog
========================================================== */

.blog-empty {
	display:grid;
	place-items:center;
	padding:56px 24px;
	border:1px solid var(--line);
	border-radius:28px;
	background:rgba(17,27,61,.75);
	text-align:center;
}

.blog-empty-icon {
	display:grid;
	place-items:center;
	width:110px;
	height:110px;
	margin-bottom:20px;
	border:1px solid rgba(255,255,255,.1);
	border-radius:28px;
	background:rgba(255,255,255,.04);
}

.blog-empty-icon img {
	max-width:76px;
	max-height:76px;
	object-fit:contain;
}

.blog-empty h2 {
	margin-bottom:8px;
}

.blog-empty p {
	margin:0;
	color:var(--muted);
}

/* ==========================================================
   10. Blogsuche und Filter
========================================================== */

.blog-filter {
	position:relative;
	margin-bottom:46px;
	padding:26px;
	overflow:visible;
	border:1px solid rgba(255,255,255,.09);
	border-radius:24px;
	background:
		radial-gradient(
			circle at 100% 0%,
			rgba(28,140,255,.13),
			transparent 36%
		),
		linear-gradient(
			145deg,
			rgba(18,29,64,.88),
			rgba(8,15,35,.94)
		);
	box-shadow:0 20px 54px rgba(0,0,0,.18);
}

.blog-filter::before {
	content:"";
	position:absolute;
	top:0;
	left:26px;
	width:82px;
	height:2px;
	border-radius:999px;
	background:linear-gradient(
		90deg,
		var(--primary),
		var(--primary2)
	);
}

.blog-filter-head {
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:24px;
	margin-bottom:22px;
}

.blog-filter-head h2 {
	margin:2px 0 0;
	font-size:clamp(1.55rem, 3vw, 2.25rem);
	line-height:1.1;
	letter-spacing:-.035em;
}

.blog-filter-reset {
	color:var(--primary2);
	font-size:.84rem;
	font-weight:900;
	text-decoration:none;
}

.blog-filter-reset:hover {
	text-decoration:underline;
}


/* ==========================================================
   10.1 Filterformular
========================================================== */

.blog-filter-form {
	display:grid;
	grid-template-columns:
		minmax(0, 1.35fr)
		minmax(220px, .65fr)
		auto;
	align-items:end;
	gap:14px;
}

.blog-filter-form label {
	display:flex;
	flex-direction:column;
	gap:8px;
	min-width:0;
}

.blog-filter-label {
	color:var(--muted);
	font-size:.76rem;
	font-weight:900;
	letter-spacing:.075em;
	text-transform:uppercase;
}

.blog-filter-form input {
	width:100%;
	height:48px;
	padding:0 15px;
	border:1px solid rgba(255,255,255,.1);
	border-radius:14px;
	background:rgba(255,255,255,.055);
	color:var(--text);
	font:inherit;
	transition:
		border-color .2s ease,
		background .2s ease,
		box-shadow .2s ease;
}

.blog-filter-form input::placeholder {
	color:rgba(159,176,214,.66);
}

.blog-filter-form input:focus {
	outline:none;
	border-color:var(--primary);
	background:rgba(255,255,255,.075);
	box-shadow:0 0 0 3px rgba(28,140,255,.15);
}

/* Eigenes Kategorien-Dropdown */

.blog-filter-category {
	display:flex;
	flex-direction:column;
	gap:8px;
	min-width:0;
}

.blog-custom-select {
	position:relative;
}

.blog-custom-select.is-open {
	z-index:100;
}

.blog-custom-select-native {
	position:absolute;
	width:1px;
	height:1px;
	overflow:hidden;
	opacity:0;
	pointer-events:none;
}

.blog-custom-select-trigger {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	width:100%;
	height:48px;
	padding:0 16px;
	border:1px solid rgba(255,255,255,.1);
	border-radius:14px;
	background:rgba(255,255,255,.055);
	color:var(--text);
	font:inherit;
	text-align:left;
	cursor:pointer;
	transition:
		border-color .2s ease,
		background .2s ease,
		box-shadow .2s ease;
}

.blog-custom-select-trigger:hover {
	border-color:rgba(99,180,255,.28);
	background:rgba(255,255,255,.075);
}

.blog-custom-select.is-open .blog-custom-select-trigger {
	border-color:var(--primary);
	box-shadow:0 0 0 3px rgba(28,140,255,.15);
}

.blog-custom-select-arrow {
	width:9px;
	height:9px;
	border-right:2px solid var(--muted);
	border-bottom:2px solid var(--muted);
	transform:rotate(45deg) translateY(-2px);
	transition:transform .2s ease;
}

.blog-custom-select.is-open .blog-custom-select-arrow {
	transform:rotate(225deg) translate(-2px, -2px);
}

.blog-custom-select-menu {
	position:absolute;
	z-index:110;
	top:calc(100% + 8px);
	right:0;
	left:0;
	padding:8px;
	border:1px solid rgba(99,180,255,.22);
	border-radius:16px;
	background:#0d1733;
	box-shadow:0 24px 60px rgba(0,0,0,.45);
}

.blog-custom-select-menu[hidden] {
	display:none;
}

.blog-custom-select-option {
	display:block;
	width:100%;
	padding:11px 12px;
	border:1px solid transparent;
	border-radius:10px;
	background:transparent;
	color:var(--muted);
	font:inherit;
	text-align:left;
	cursor:pointer;
}

.blog-custom-select-option:hover {
	background:rgba(28,140,255,.1);
	color:#fff;
}

.blog-custom-select-option.is-selected {
	border-color:rgba(99,180,255,.25);
	background:rgba(28,140,255,.16);
	color:#fff;
	font-weight:800;
}

.blog-filter-submit {
	height:48px;
	white-space:nowrap;
}


/* ==========================================================
   10.2 Aktive Filter
========================================================== */

.blog-filter-summary {
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:9px;
	margin-top:18px;
	padding-top:18px;
	border-top:1px solid rgba(255,255,255,.075);
	color:var(--muted);
	font-size:.83rem;
}

.blog-filter-summary strong,
.blog-filter-summary span {
	display:inline-flex;
	align-items:center;
	padding:7px 11px;
	border:1px solid rgba(255,255,255,.08);
	border-radius:999px;
	background:rgba(255,255,255,.035);
}

.blog-filter-summary strong {
	border-color:rgba(72,226,167,.2);
	background:rgba(72,226,167,.08);
	color:var(--success);
}


/* ==========================================================
   10.3 Leere Suche
========================================================== */

.blog-search-empty {
	margin-top:8px;
}

.blog-search-empty .btn {
	margin-top:22px;
}

/* ==========================================================
   11. Tablet
========================================================== */

@media (max-width:1050px) {

	.blog-featured {
		grid-template-columns:1fr;
		min-height:0;
	}

	.blog-featured-media {
		min-height:370px;
	}

	.blog-featured-content {
		padding:38px;
	}

	.blog-featured-content h2 {
		font-size:clamp(2.2rem, 7vw, 4rem);
	}

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

	.blog-card {
		min-height:550px;
	}

	.blog-card-media {
		height:330px;
	}

	.blog-filter-form {
		grid-template-columns:
			minmax(0, 1fr)
			minmax(220px, .7fr);
	}

	.blog-filter-submit {
		grid-column:1 / -1;
		width:100%;
	}

}


/* ==========================================================
   12. Smartphone
========================================================== */

@media (max-width:720px) {

	.blog-page {
		width:min(100% - 22px, 1180px);
		margin-bottom:66px;
	}

	.blog-featured {
		margin-bottom:50px;
		border-radius:24px;
	}

	.blog-featured-media {
		min-height:280px;
	}

	.blog-featured-content {
		padding:28px 24px;
	}

	.blog-featured-content h2 {
		font-size:2.35rem;
	}

	.blog-section-head {
		display:block;
	}

	.blog-section-head > p {
		margin-top:12px;
	}

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

	.blog-card {
		min-height:0;
	}

	.blog-card-media {
		height:320px;
	}

	.blog-card-image-content {
		padding:24px;
	}

	.blog-card-content {
		padding:24px;
	}

	.blog-filter {
		margin-bottom:36px;
		padding:22px;
		border-radius:20px;
	}

	.blog-filter::before {
		left:22px;
	}

	.blog-filter-head {
		align-items:flex-start;
		flex-direction:column;
		gap:12px;
	}

	.blog-filter-form {
		grid-template-columns:1fr;
	}

	.blog-filter-submit {
		grid-column:auto;
	}

	.blog-filter-summary {
		align-items:flex-start;
		flex-direction:column;
	}

	.blog-filter-summary strong,
	.blog-filter-summary span {
		width:100%;
	}

}


/* ==========================================================
   13. Kleine Smartphones
========================================================== */

@media (max-width:420px) {

	.blog-featured-media {
		min-height:235px;
	}

	.blog-featured-content h2 {
		font-size:2rem;
	}

	.blog-logo-fallback {
		padding-top:36px;
	}

	.blog-logo-fallback img {
		width:125px;
		max-height:150px;
	}

	.blog-logo-fallback-featured {
		align-items:center;
		padding-top:0;
	}

	.blog-logo-fallback-featured img {
		width:160px;
		max-height:190px;
	}

	.blog-card-media {
		height:290px;
	}

	.blog-card-image-content,
	.blog-card-content {
		padding:20px;
	}

	.blog-card-image-content h2 {
		font-size:1.65rem;
	}

}


/* ==========================================================
   14. Reduzierte Animationen

   Berücksichtigt Systemeinstellungen für weniger Bewegung.
========================================================== */

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

	.blog-featured-media > img,
	.blog-logo-fallback img,
	.blog-featured-link,
	.blog-featured-link span,
	.blog-card,
	.blog-card-media > img,
	.blog-readmore span,
	.blog-filter-form input,
	.blog-custom-select-trigger,
	.blog-custom-select-arrow,
	.blog-custom-select-option {
		transition:none;
	}

	.blog-featured:hover .blog-featured-media > img,
	.blog-featured:hover .blog-logo-fallback img,
	.blog-card:hover,
	.blog-card:hover .blog-logo-fallback img,
	.blog-card:hover .blog-card-media > img,
	.blog-featured-link:hover,
	.blog-featured-link:hover span,
	.blog-readmore:hover span,
	.blog-custom-select-option:hover {
		transform:none;
	}

}

/* ==========================================================
   15. Pagination
========================================================== */

.blog-pagination {
	display:flex;
	align-items:center;
	justify-content:center;
	flex-wrap:wrap;
	gap:8px;
	margin-top:52px;
}

.blog-pagination-link,
.blog-pagination-arrow {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:44px;
	height:44px;
	padding:0 13px;
	border:1px solid rgba(255,255,255,.09);
	border-radius:14px;
	background:
		linear-gradient(
			145deg,
			rgba(255,255,255,.055),
			rgba(255,255,255,.025)
		);
	color:var(--text);
	font-weight:900;
	text-decoration:none;
	box-shadow:0 10px 26px rgba(0,0,0,.12);
	transition:
		transform .2s ease,
		border-color .2s ease,
		background .2s ease,
		box-shadow .2s ease;
}

.blog-pagination-arrow {
	font-size:1.45rem;
	line-height:1;
}

.blog-pagination-link:hover,
.blog-pagination-arrow:hover {
	transform:translateY(-2px);
	border-color:rgba(99,180,255,.36);
	background:rgba(28,140,255,.13);
	box-shadow:0 14px 34px rgba(0,0,0,.18);
}

.blog-pagination-link.is-current {
	border-color:rgba(99,180,255,.45);
	background:
		linear-gradient(
			135deg,
			var(--primary),
			#2569d8
		);
	color:#fff;
	box-shadow:
		0 12px 30px rgba(28,140,255,.26),
		inset 0 1px 0 rgba(255,255,255,.18);
}

.blog-pagination-dots {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:32px;
	height:44px;
	color:var(--muted);
	font-size:1rem;
	font-weight:900;
}

/* ==========================================================
   16. Pagination: Smartphone
========================================================== */

@media (max-width:720px) {

	.blog-pagination {
		gap:6px;
		margin-top:38px;
	}

	.blog-pagination-link,
	.blog-pagination-arrow {
		min-width:39px;
		height:39px;
		padding:0 10px;
		border-radius:12px;
	}

	.blog-pagination-dots {
		min-width:24px;
		height:39px;
	}

}


/* ==========================================================
   17. Pagination: Kleine Smartphones
========================================================== */

@media (max-width:420px) {

	.blog-pagination-link,
	.blog-pagination-arrow {
		min-width:36px;
		height:36px;
		padding:0 9px;
	}

	.blog-pagination-dots {
		height:36px;
	}

}


/* ==========================================================
   18. Pagination: Reduzierte Animationen
========================================================== */

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

	.blog-pagination-link,
	.blog-pagination-arrow {
		transition:none;
	}

	.blog-pagination-link:hover,
	.blog-pagination-arrow:hover {
		transform:none;
	}

}