/* ==========================================================
   Blue Devils DC
   Einzelbeitrag

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


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

.post-detail {
	width:min(1180px, calc(100% - 32px));
	margin:0 auto 90px;
}


/* ==========================================================
   2. Beitragscontainer
========================================================== */

.post-container {
	position:relative;
	width:min(1040px, 100%);
	margin:0 auto;
	overflow:hidden;
	border:1px solid rgba(255,255,255,.1);
	border-radius:30px;
	background:
		radial-gradient(
			circle at 12% 0%,
			rgba(28,140,255,.18),
			transparent 30%
		),
		radial-gradient(
			circle at 92% 18%,
			rgba(72,226,167,.08),
			transparent 32%
		),
		linear-gradient(
			180deg,
			rgba(17,27,61,.88),
			rgba(6,10,24,.96)
		);
	box-shadow:0 30px 90px rgba(0,0,0,.34);
}


/* ==========================================================
   3. Beitragsbild
========================================================== */

.post-cover {
	width:100%;
	height:clamp(220px, 30vw, 360px);
	overflow:hidden;
	background:
		radial-gradient(
			circle at 22% 18%,
			rgba(99,180,255,.36),
			transparent 35%
		),
		radial-gradient(
			circle at 80% 70%,
			rgba(72,226,167,.16),
			transparent 34%
		),
		linear-gradient(
			135deg,
			rgba(28,140,255,.16),
			rgba(6,10,24,.95)
		);
}

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


/* ==========================================================
   4. Logo-Fallback
========================================================== */

.post-cover-fallback {
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:18px;
	height:220px;
}

.post-cover-logo {
	width:clamp(130px, 22vw, 220px);
	max-height:230px;
	object-fit:contain;
	opacity:.9;
	filter:drop-shadow(0 24px 44px rgba(0,0,0,.48));
}

.post-cover-fallback span {
	padding:9px 15px;
	border:1px solid rgba(255,255,255,.14);
	border-radius:999px;
	background:rgba(255,255,255,.07);
	color:#fff;
	font-size:.76rem;
	font-weight:900;
	letter-spacing:.09em;
	text-transform:uppercase;
}


/* ==========================================================
   5. Beitragsinhalt
========================================================== */

.post-inner {
	width:min(760px, calc(100% - 44px));
	margin:0 auto;
	padding:36px 0 48px;
}


/* ==========================================================
   6. Metadaten
========================================================== */

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

.post-meta span {
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:8px 13px;
	border:1px solid rgba(255,255,255,.09);
	border-radius:999px;
	background:rgba(255,255,255,.045);
}


/* ==========================================================
   7. Verlinkte Kategorie
========================================================== */

.post-category {
	display:inline-flex;
	align-items:center;
	gap:7px;
	padding:8px 13px;
	border:1px solid rgba(99,180,255,.25);
	border-radius:999px;
	background:rgba(28,140,255,.1);
	color:var(--primary2);
	font-size:.76rem;
	font-weight:900;
	line-height:1;
	letter-spacing:.07em;
	text-decoration:none;
	text-transform:uppercase;
	transition:
		transform .2s ease,
		border-color .2s ease,
		background .2s ease,
		color .2s ease;
}

.post-category::after {
	content:"→";
}

.post-category:hover {
	transform:translateY(-1px);
	border-color:rgba(99,180,255,.45);
	background:rgba(28,140,255,.18);
	color:#fff;
}

.post-featured {
	border-color:rgba(72,226,167,.25) !important;
	background:rgba(72,226,167,.11) !important;
	color:var(--success);
	font-weight:900;
}


/* ==========================================================
   8. Typografie
========================================================== */

.post-content {
	color:rgba(238,244,255,.94);
	font-size:1.08rem;
	line-height:1.9;
}

.post-content p {
	margin:0 0 1.45em;
}

.post-content p:first-child {
	color:#fff;
	font-size:1.18rem;
	line-height:1.85;
}

.post-content h2,
.post-content h3,
.post-content h4 {
	margin:1.8em 0 .75em;
	color:#fff;
	line-height:1.2;
}

.post-content h2 {
	font-size:clamp(1.7rem, 3vw, 2.4rem);
}

.post-content h3 {
	font-size:1.45rem;
}

.post-content strong {
	color:#fff;
	font-weight:900;
}

.post-content a {
	color:var(--primary2);
	font-weight:800;
	text-decoration:none;
}

.post-content a:hover {
	text-decoration:underline;
}

.post-content blockquote {
	position:relative;
	margin:34px 0;
	padding:24px 28px;
	border:1px solid rgba(99,180,255,.22);
	border-left:5px solid var(--primary);
	border-radius:20px;
	background:rgba(255,255,255,.055);
	color:#fff;
	font-size:1.12rem;
	line-height:1.75;
}

.post-content ul,
.post-content ol {
	margin:0 0 1.4em 1.3em;
}

.post-content li {
	margin:.45em 0;
}

.post-content img {
	max-width:100%;
	border:1px solid var(--line);
	border-radius:22px;
	box-shadow:0 18px 46px rgba(0,0,0,.24);
}

.post-content table {
	width:100%;
	margin:32px 0;
	overflow:hidden;
	border-collapse:collapse;
	border-radius:18px;
	background:rgba(255,255,255,.04);
}

.post-content th,
.post-content td {
	padding:14px 16px;
	border-bottom:1px solid var(--line);
	text-align:left;
}

.post-content th {
	color:var(--primary2);
	font-weight:900;
}

/* ==========================================================
   Schlagwörter
========================================================== */

.post-tags {
	position:relative;
	margin-top:42px;
	padding:24px;
	overflow:hidden;
	border:1px solid rgba(99,180,255,.15);
	border-radius:20px;
	background:
		radial-gradient(
			circle at 100% 0%,
			rgba(28,140,255,.12),
			transparent 42%
		),
		linear-gradient(
			145deg,
			rgba(255,255,255,.045),
			rgba(255,255,255,.02)
		);
}

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

.post-tags-head {
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:16px;
	margin-bottom:18px;
}

.post-tags-kicker {
	margin:0 0 4px;
	color:var(--primary2);
	font-size:.68rem;
	font-weight:900;
	letter-spacing:.09em;
	text-transform:uppercase;
}

.post-tags-head h2 {
	margin:0;
	color:#fff;
	font-size:1.28rem;
	line-height:1.2;
}

.post-tags-count {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:32px;
	padding:6px 11px;
	border:1px solid rgba(255,255,255,.09);
	border-radius:999px;
	background:rgba(255,255,255,.04);
	color:var(--muted);
	font-size:.72rem;
	font-weight:800;
}

.post-tag-list {
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:9px;
}

.post-tag {
	display:inline-flex;
	align-items:center;
	gap:5px;
	min-height:36px;
	padding:8px 13px;
	border:1px solid rgba(99,180,255,.2);
	border-radius:999px;
	background:rgba(28,140,255,.08);
	color:var(--primary2);
	font-size:.76rem;
	font-weight:900;
	letter-spacing:.035em;
	text-decoration:none;
	transition:
		transform .2s ease,
		border-color .2s ease,
		background .2s ease,
		color .2s ease,
		box-shadow .2s ease;
}

.post-tag span {
	color:rgba(99,180,255,.72);
}

.post-tag:hover {
	transform:translateY(-2px);
	border-color:rgba(99,180,255,.42);
	background:rgba(28,140,255,.16);
	color:#fff;
	box-shadow:0 12px 26px rgba(0,0,0,.18);
}

.post-tag:hover span {
	color:#fff;
}


/* ==========================================================
   9. Beitragsfooter
========================================================== */

.post-footer {
	display:flex;
	align-items:center;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:12px;
	margin-top:36px;
	padding-top:30px;
	border-top:1px solid rgba(255,255,255,.08);
}

.post-footer .btn {
	width:max-content;
}


/* ==========================================================
   10. Vorheriger und nächster Beitrag
========================================================== */

.post-navigation {
	display:grid;
	grid-template-columns:repeat(2, minmax(0, 1fr));
	gap:18px;
	width:min(1040px, 100%);
	margin:28px auto 0;
}

.post-navigation-item {
	display:flex;
	flex-direction:column;
	justify-content:center;
	min-height:130px;
	padding:22px 24px;
	border:1px solid rgba(255,255,255,.09);
	border-radius:22px;
	background:
		radial-gradient(
			circle at 100% 0%,
			rgba(28,140,255,.1),
			transparent 40%
		),
		rgba(17,27,61,.72);
	color:var(--text);
	text-decoration:none;
	transition:
		transform .25s ease,
		border-color .25s ease,
		background .25s ease,
		box-shadow .25s ease;
}

.post-navigation-item:hover {
	transform:translateY(-3px);
	border-color:rgba(99,180,255,.34);
	background:rgba(17,27,61,.92);
	box-shadow:0 20px 48px rgba(0,0,0,.2);
}

.post-navigation-next {
	align-items:flex-end;
	text-align:right;
}

.post-navigation-label {
	margin-bottom:9px;
	color:var(--primary2);
	font-size:.74rem;
	font-weight:900;
	letter-spacing:.08em;
	text-transform:uppercase;
}

.post-navigation-item strong {
	max-width:440px;
	font-size:1.08rem;
	line-height:1.35;
}

.post-navigation-placeholder {
	visibility:hidden;
}


/* ==========================================================
   11. Ähnliche Beiträge
========================================================== */

.post-related {
	margin-top:70px;
}

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

.post-related-head h2 {
	margin:3px 0 0;
	font-size:clamp(2rem, 4vw, 3rem);
	line-height:1.05;
	letter-spacing:-.04em;
}

.post-related-grid {
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:22px;
}


/* ==========================================================
   12. Ähnliche Beitragskarte
========================================================== */

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

.post-related-card:hover {
	transform:translateY(-6px);
	border-color:rgba(99,180,255,.34);
	box-shadow:0 26px 64px rgba(0,0,0,.28);
}

.post-related-media {
	position:relative;
	display:block;
	height:220px;
	overflow:hidden;
	background:#091329;
}

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

.post-related-card:hover .post-related-media > img {
	transform:scale(1.055);
	filter:saturate(1.1);
}

.post-related-overlay {
	position:absolute;
	inset:0;
	pointer-events:none;
	background:
		linear-gradient(
			180deg,
			transparent 45%,
			rgba(5,10,24,.52)
		);
}


/* ==========================================================
   13. Fallback ähnlicher Beiträge
========================================================== */

.post-related-fallback {
	position:absolute;
	inset:0;
	display:grid;
	place-items:center;
	background:
		radial-gradient(
			circle at 20% 12%,
			rgba(66,136,231,.44),
			transparent 40%
		),
		linear-gradient(
			145deg,
			#17366e,
			#09152c
		);
}

.post-related-fallback img {
	width:110px;
	max-height:130px;
	object-fit:contain;
	filter:drop-shadow(0 18px 34px rgba(0,0,0,.45));
	transition:transform .4s ease;
}

.post-related-card:hover .post-related-fallback img {
	transform:translateY(-3px) scale(1.025);
}


/* ==========================================================
   14. Inhalt ähnlicher Beiträge
========================================================== */

.post-related-content {
	display:flex;
	flex:1;
	flex-direction:column;
	padding:22px;
}

.post-related-category {
	display:inline-flex;
	align-items:center;
	width:max-content;
	margin-bottom:12px;
	color:var(--primary2);
	font-size:.7rem;
	font-weight:900;
	letter-spacing:.08em;
	text-decoration:none;
	text-transform:uppercase;
}

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

.post-related-category:hover::after {
	transform:translateX(4px);
}

.post-related-content h3 {
	margin:0 0 14px;
	font-size:1.28rem;
	line-height:1.25;
}

.post-related-content h3 a {
	color:#fff;
	text-decoration:none;
	transition:color .2s ease;
}

.post-related-content h3 a:hover {
	color:var(--primary2);
}

.post-related-meta {
	display:flex;
	flex-wrap:wrap;
	gap:9px;
	margin-bottom:14px;
	color:var(--muted);
	font-size:.78rem;
}

.post-related-meta span + span::before {
	content:"•";
	margin-right:9px;
	color:rgba(255,255,255,.28);
}

.post-related-content p {
	display:-webkit-box;
	margin:0 0 20px;
	overflow:hidden;
	color:var(--muted);
	font-size:.92rem;
	line-height:1.65;
	-webkit-line-clamp:3;
	-webkit-box-orient:vertical;
}

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

.post-related-link span {
	font-size:1.15rem;
	transition:transform .2s ease;
}

.post-related-link:hover span {
	transform:translateX(5px);
}


/* ==========================================================
   15. Tablet
========================================================== */

@media (max-width:980px) {

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

}


/* ==========================================================
   16. Smartphone
========================================================== */

@media (max-width:720px) {

	.post-detail {
		width:min(100% - 22px, 1180px);
		margin-bottom:64px;
	}

	.post-cover {
		height:210px;
	}

	.post-inner {
		width:calc(100% - 34px);
		padding:28px 0 38px;
	}

	.post-content {
		font-size:1rem;
		line-height:1.75;
	}

	.post-content p:first-child {
		font-size:1.05rem;
	}

	.post-footer {
		align-items:stretch;
		flex-direction:column;
	}

	.post-footer .btn {
		width:100%;
	}

	.post-navigation {
		grid-template-columns:1fr;
	}

	.post-navigation-placeholder {
		display:none;
	}

	.post-navigation-next {
		align-items:flex-start;
		text-align:left;
	}

	.post-related {
		margin-top:52px;
	}

	.post-related-head {
		align-items:flex-start;
		flex-direction:column;
	}

	.post-related-grid {
		grid-template-columns:1fr;
	}

	.post-related-media {
		height:250px;
	}

	.post-tags {
		margin-top:34px;
		padding:20px;
	}

	.post-tags-head {
		align-items:flex-start;
		flex-direction:column;
	}

	.post-tags-count {
		align-self:flex-start;
	}

}


/* ==========================================================
   17. Kleine Smartphones
========================================================== */

@media (max-width:420px) {

	.post-navigation-item {
		min-height:115px;
		padding:19px;
		border-radius:18px;
	}

	.post-related-media {
		height:220px;
	}

	.post-related-content {
		padding:19px;
	}

}


/* ==========================================================
   18. Reduzierte Animationen
========================================================== */

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

	.post-category,
	.post-navigation-item,
	.post-related-card,
	.post-related-media > img,
	.post-related-fallback img,
	.post-related-category::after,
	.post-related-content h3 a,
	.post-related-link span,
	.post-tag {
		transition:none;
	}

	.post-category:hover,
	.post-navigation-item:hover,
	.post-related-card:hover,
	.post-related-card:hover .post-related-media > img,
	.post-related-card:hover .post-related-fallback img,
	.post-related-category:hover::after,
	.post-related-link:hover span,
	.post-tag:hover {
		transform:none;
	}

}