/* ==========================================================
   Blue Devils DC
   Hauptstylesheet
========================================================== */

:root {
	--bg:#060a18;
	--bg2:#0b1430;
	--panel:#111b3d;
	--panel2:#18244d;
	--text:#eef4ff;
	--muted:#9fb0d6;
	--line:rgba(255,255,255,.08);
	--primary:#1c8cff;
	--primary2:#63b4ff;
	--success:#48e2a7;
	--danger:#ff5878;
	--radius:26px;
	--shadow:0 25px 65px rgba(0,0,0,.28);
}

/* ==========================================================
   Reset
========================================================== */

* {
	margin:0;
	padding:0;
	box-sizing:border-box;
}

html {
	scroll-behavior:smooth;
}

body {
	font-family:Inter, system-ui, sans-serif;
	background:radial-gradient(circle at top left,#18306c 0%,#071024 40%,#03050d 100%);
	color:var(--text);
	min-height:100vh;
}

a {
	text-decoration:none;
	color:inherit;
}

img {
	display:block;
	max-width:100%;
}

/* ==========================================================
   Header
========================================================== */

.site-header {
	position:sticky;
	top:0;
	z-index:500;
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:18px 5vw;
	backdrop-filter:blur(18px);
	background:rgba(6,10,24,.75);
	border-bottom:1px solid var(--line);
}

.brand {
	display:flex;
	align-items:center;
	gap:14px;
	font-weight:800;
}

.brand img {
	width:58px;
}

/* ==========================================================
   Grundlayout
========================================================== */

main {
	width:min(1280px,92vw);
	margin:auto;
}

section {
	margin:60px 0;
}

/* ==========================================================
   Einheitlicher Seiten-Hero
========================================================== */

.page-head {
	position:relative;
	width:100vw;
	margin:0 0 70px calc(50% - 50vw);
	padding:110px 5vw;
	min-height:420px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	overflow:hidden;
	isolation:isolate;
	background:
		linear-gradient(90deg, rgba(18,43,98,.96), rgba(7,16,36,.92) 52%, rgba(3,5,13,.98)),
		radial-gradient(circle at 18% 35%, rgba(28,140,255,.24), transparent 34%);
	border-bottom:1px solid var(--line);
}

.page-head::before {
	content:"";
	position:absolute;
	inset:0;
	background:radial-gradient(circle, rgba(255,255,255,.055) 1px, transparent 1px);
	background-size:22px 22px;
	opacity:.16;
	pointer-events:none;
	z-index:1;
}

.page-head > * {
	position:relative;
	z-index:3;
	width:min(1280px,92vw);
	margin-left:auto;
	margin-right:auto;
}

.page-kicker {
	display:inline-flex;
	width:auto;
	margin-bottom:14px;
	color:var(--primary2);
	font-size:14px;
	font-weight:900;
	letter-spacing:.12em;
	text-transform:uppercase;
}

.page-head h1 {
	max-width:760px;
	margin:0 0 16px;
	font-size:clamp(48px,6vw,82px);
	line-height:.95;
	letter-spacing:-2px;
	color:#fff;
}

.page-head p {
	max-width:700px;
	margin:0;
	color:#d4e1ff;
	font-size:20px;
	line-height:1.7;
}

.page-actions {
	display:flex;
	flex-wrap:wrap;
	gap:14px;
	margin-top:34px;
}

.page-actions .btn {
	padding:15px 28px;
	font-size:17px;
}

/* ==========================================================
   Hero Wasserzeichen
========================================================== */

.hero-watermark {
	position:relative;
	overflow:hidden;
	isolation:isolate;
}

.hero-watermark::after {
	content:"";
	position:absolute;
	right:10vw;
	top:50%;
	transform:translateY(-50%);
	width:clamp(300px,28vw,520px);
	aspect-ratio:1;
	background:url("/assets/img/logo.png") center/contain no-repeat;
	opacity:.07;
	filter:grayscale(100%) brightness(2) blur(1px);
	pointer-events:none;
	user-select:none;
	z-index:2;
}

/* ==========================================================
   Grid
========================================================== */

.grid {
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
	gap:28px;
}

/* ==========================================================
   Überschriften
========================================================== */

h2 {
	font-size:38px;
	margin-bottom:26px;
}

/* ==========================================================
   Cards
========================================================== */

.card {
	display:flex;
	flex-direction:column;
	align-items:center;
	text-align:center;
	background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
	border:1px solid var(--line);
	border-radius:28px;
	padding:34px;
	box-shadow:var(--shadow);
	transition:.3s;
	margin-bottom: 24px;
}

.card:hover {
	transform:translateY(-6px);
	border-color:rgba(28,140,255,.35);
}

.card h2 {
	font-size:30px;
	margin-bottom:16px;
}

.card h3 {
	font-size:24px;
	margin-bottom:14px;
}

.card strong {
	font-size:24px;
}

.card p {
	margin-top:14px;
	line-height:1.7;
}

.card .btn {
	margin-top:auto;
	align-self:center;
}

/* ==========================================================
   Sponsorenkarten
========================================================== */

.sponsor-logo-box {
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:170px;
	margin-bottom:30px;
	padding:22px;
	border-radius:20px;
	background:#ffffff;
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.6), 0 14px 35px rgba(0,0,0,.18);
}

.sponsor-logo-box img {
	width:auto;
	height:auto;
	max-width:100%;
	max-height:130px;
	object-fit:contain;
	filter:none;
	opacity:1;
}

/* ==========================================================
   Sponsoren Logo-Slider Startseite
========================================================== */

.sponsors-section {
	text-align:center;
	overflow:hidden;
}

.sponsors-section h2 {
	margin-bottom:10px;
}

.sponsors-section > .muted {
	margin-bottom:34px;
}

.sponsors-marquee {
	position:relative;
	overflow:hidden;
	padding:8px 0;
}

.sponsors-marquee::before,
.sponsors-marquee::after {
	content:"";
	position:absolute;
	top:0;
	bottom:0;
	width:120px;
	z-index:2;
	pointer-events:none;
}

.sponsors-marquee::before {
	left:0;
	background:linear-gradient(90deg,var(--bg),transparent);
}

.sponsors-marquee::after {
	right:0;
	background:linear-gradient(270deg,var(--bg),transparent);
}

.sponsors-track {
	display:flex;
	width:max-content;
	gap:24px;
	animation:sponsor-scroll 28s linear infinite;
}

.sponsors-marquee:hover .sponsors-track {
	animation-play-state:paused;
}

.sponsor-logo {
	flex:0 0 240px;
	height:150px;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:24px;
	border-radius:26px;
	background:#ffffff;
	border:1px solid rgba(255,255,255,.25);
	box-shadow:0 18px 45px rgba(0,0,0,.20);
}

.sponsor-logo a {
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:100%;
}

.sponsor-logo img {
	max-width:190px;
	max-height:95px;
	width:auto;
	height:auto;
	object-fit:contain;
	filter:none;
	opacity:1;
	transition:.3s;
}

.sponsor-logo:hover img {
	transform:scale(1.06);
}

.sponsor-logo strong {
	font-size:20px;
	color:#071024;
}

@keyframes sponsor-scroll {
	from {
		transform:translateX(0);
	}

	to {
		transform:translateX(-50%);
	}
}

/* ==========================================================
   Texte
========================================================== */

.muted {
	color:var(--muted);
}

.content {
	line-height:1.8;
}

/* ==========================================================
   Buttons
========================================================== */

.btn {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:12px 22px;
	border-radius:999px;
	border:1px solid var(--line);
	background:rgba(255,255,255,.05);
	font-weight:700;
	transition:.3s;
}

.btn:hover {
	background:linear-gradient(135deg, var(--primary), #0050cf);
	transform:translateY(-2px);
}

/* ==========================================================
   Hinweise
========================================================== */

.notice {
	background:rgba(72,226,167,.12);
	border:1px solid rgba(72,226,167,.4);
	padding:16px;
	border-radius:18px;
}

/* ==========================================================
   Formulare
========================================================== */

.form-grid {
	display:grid;
	gap:18px;
}

.form-grid label {
	display:grid;
	gap:8px;
}

input,
textarea,
select {
	width:100%;
	padding:14px;
	border-radius:16px;
	border:1px solid var(--line);
	background:#071024;
	color:white;
	font:inherit;
}

textarea {
	min-height:180px;
}

/* ==========================================================
   Tabellen
========================================================== */

.table-wrap {
	overflow:auto;
	border-radius:20px;
	border:1px solid var(--line);
}

table {
	width:100%;
	border-collapse:collapse;
}

th {
	background:rgba(255,255,255,.05);
}

th,
td {
	padding:16px;
	border-bottom:1px solid var(--line);
}

/* ==========================================================
   Galerie
========================================================== */

.gallery {
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
	gap:20px;
}

.gallery a {
	overflow:hidden;
	border-radius:22px;
	border:1px solid var(--line);
}

.gallery img {
	height:220px;
	width:100%;
	object-fit:cover;
	transition:.4s;
}

.gallery img:hover {
	transform:scale(1.08);
}

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

.site-footer {
	margin-top:80px;
	padding:50px 5vw;
	display:grid;
	grid-template-columns:2fr 1fr 1fr auto;
	gap:40px;
	align-items:start;
	border-top:1px solid var(--line);
	background:#03050d;
	color:var(--muted);
}

.footer-left strong {
	display:block;
	font-size:26px;
	color:white;
	margin-bottom:10px;
}

.footer-left p {
	margin:10px 0;
	line-height:1.6;
}

.footer-column h4 {
	margin-bottom:14px;
	font-size:15px;
	font-weight:800;
	letter-spacing:.04em;
	text-transform:uppercase;
	color:white;
}

.footer-nav {
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:12px;
}

.footer-nav a {
	color:var(--muted);
	transition:.25s ease;
}

.footer-nav a:hover,
.footer-right a:hover {
	color:white;
}

.footer-right {
	display:flex;
	justify-content:flex-end;
	align-items:flex-start;
	white-space:nowrap;
}

/* ==========================================================
   Startseite: Trainingszeiten
   ----------------------------------------------------------
   Zeigt auf der Indexseite maximal 2 Trainingszeiten.
   Die vollständige Übersicht liegt auf /training.
========================================================== */

.home-training-section {
	position:relative;
}

.home-training-grid {
	display:grid;
	grid-template-columns:repeat(2, minmax(0, 1fr));
	gap:28px;
	max-width:1120px;
	margin:0 auto;
}

.home-training-card {
	position:relative;
	overflow:hidden;
	min-height:190px;
	padding:34px 32px;
	border:1px solid rgba(255,255,255,.09);
	border-radius:26px;
	background:
		linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
		rgba(10,18,40,.78);
	box-shadow:0 22px 60px rgba(0,0,0,.25);
	backdrop-filter:blur(18px);
}

.home-training-card::before {
	content:"";
	position:absolute;
	inset:0;
	background:
		radial-gradient(circle at 18% 0%, rgba(28,140,255,.16), transparent 38%),
		radial-gradient(circle at 90% 100%, rgba(99,180,255,.1), transparent 42%);
	pointer-events:none;
}

.home-training-card h3,
.home-training-card p {
	position:relative;
}

.home-training-card h3 {
	margin-bottom:22px;
	font-size:1.65rem;
	text-align:center;
}

.home-training-card p {
	margin:0 0 14px;
	text-align:center;
}

.home-training-card p:last-child {
	margin-bottom:0;
	color:#aebde2;
}

.home-training-more {
	margin:30px 0 0;
	text-align:center;
}

@media(max-width:900px) {
	.home-training-grid {
		max-width:760px;
		grid-template-columns:1fr;
	}
}

@media(max-width:560px) {
	.home-training-card {
		min-height:auto;
		padding:30px 22px;
		border-radius:22px;
	}

	.home-training-card h3 {
		font-size:1.45rem;
	}
}

/* ==========================================================
   Startseite: Gemeinsame Abschnittsüberschrift
========================================================== */

.home-section-head {
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:20px;
	margin-bottom:28px;
}

.home-section-head h2 {
	margin:2px 0 0;
}


/* ==========================================================
   Startseite: Magazin für aktuelle Beiträge
========================================================== */

.home-magazine {
	display:grid;
	grid-template-columns:minmax(0, 1.45fr) minmax(320px, .75fr);
	gap:24px;
	min-height:650px;
}


/* ==========================================================
   Startseite: Großer Hauptbeitrag
========================================================== */

.home-magazine-main {
	position:relative;
	min-width:0;
	overflow:hidden;
	border:1px solid rgba(255,255,255,.1);
	border-radius:28px;
	background:#081123;
	box-shadow:0 28px 74px rgba(0,0,0,.3);
	transition:
		transform .3s ease,
		border-color .3s ease,
		box-shadow .3s ease;
}

.home-magazine-main:hover {
	transform:translateY(-5px);
	border-color:rgba(99,180,255,.36);
	box-shadow:0 36px 88px rgba(0,0,0,.38);
}

.home-magazine-main-media {
	position:relative;
	display:block;
	width:100%;
	height:100%;
	min-height:650px;
	overflow:hidden;
}

.home-magazine-main-media > img {
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform .55s ease;
}

.home-magazine-main:hover
.home-magazine-main-media > img {
	transform:scale(1.045);
}


/* ==========================================================
   Startseite: Bild-Fallback
========================================================== */

.home-magazine-fallback {
	position:relative;
	display:flex;
	align-items:flex-start;
	justify-content:center;
	width:100%;
	height:100%;
	min-height:inherit;
	padding-top:clamp(42px, 7vw, 92px);
	overflow:hidden;
	background:
		radial-gradient(
			circle at 18% 12%,
			rgba(28,140,255,.24),
			transparent 34%
		),
		radial-gradient(
			circle at 84% 82%,
			rgba(72,226,167,.08),
			transparent 32%
		),
		linear-gradient(
			145deg,
			#132b61 0%,
			#0b1735 48%,
			#050a17 100%
		);
}

.home-magazine-fallback::after {
	content:"";
	position:absolute;
	right:0;
	bottom:0;
	left:0;
	height:52%;
	background:
		linear-gradient(
			180deg,
			transparent,
			rgba(3,7,18,.88) 58%,
			rgba(3,7,18,.98)
		);
	pointer-events:none;
}

.home-magazine-fallback img {
	position:relative;
	z-index:1;
	width:clamp(105px, 14vw, 180px);
	max-height:185px;
	object-fit:contain;
	opacity:.72;
	filter:
		drop-shadow(0 18px 34px rgba(0,0,0,.46))
		saturate(.9);
}

.home-magazine-main .home-magazine-fallback {
	position:relative;
	align-items:flex-start;
	justify-content:flex-end;
	padding:
		clamp(44px, 6vw, 78px)
		clamp(52px, 7vw, 96px)
		0
		0;
}

.home-magazine-main .home-magazine-fallback img {
	width:clamp(120px, 12vw, 175px);
	max-height:180px;
	opacity:.42;
	transform:translateY(8px);
	filter:
		drop-shadow(0 18px 34px rgba(0,0,0,.42))
		saturate(.82);
}

.home-magazine-main .home-magazine-fallback::after {
	height:66%;
	background:
		linear-gradient(
			180deg,
			transparent 0%,
			rgba(3,7,18,.18) 28%,
			rgba(3,7,18,.86) 66%,
			rgba(3,7,18,.99) 100%
		);
}

.home-magazine-side-card .home-magazine-fallback {
	padding-top:36px;
}

.home-magazine-side-card .home-magazine-fallback img {
	width:118px;
	max-height:125px;
	opacity:.68;
}


/* ==========================================================
   Startseite: Bildabdunklung
========================================================== */

.home-magazine-shade {
	position:absolute;
	inset:0;
	background:
		linear-gradient(
			180deg,
			rgba(3,7,18,.04) 10%,
			rgba(3,7,18,.18) 38%,
			rgba(3,7,18,.72) 64%,
			rgba(3,7,18,.98) 100%
		);
	pointer-events:none;
}


/* ==========================================================
   Startseite: Inhalt des Hauptbeitrags
========================================================== */

.home-magazine-main-content {
	position:absolute;
	z-index:2;
	right:0;
	bottom:0;
	left:0;
	max-width:88%;
	padding:clamp(28px, 4vw, 48px);
}

.home-magazine-badges {
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:9px;
	margin-bottom:17px;
}

.home-magazine-label,
.home-magazine-category {
	display:inline-flex;
	align-items:center;
	padding:7px 11px;
	border:1px solid rgba(255,255,255,.14);
	border-radius:999px;
	background:rgba(6,14,34,.62);
	color:#fff;
	font-size:.69rem;
	font-weight:900;
	letter-spacing:.075em;
	text-transform:uppercase;
	backdrop-filter:blur(12px);
}

.home-magazine-label {
	border-color:rgba(72,226,167,.26);
	background:rgba(72,226,167,.12);
	color:var(--success);
}

.home-magazine-category {
	border-color:rgba(99,180,255,.28);
	background:rgba(28,140,255,.16);
	color:var(--primary2);
}

.home-magazine-main-content h3 {
	max-width:820px;
	margin:0 0 17px;
	color:#fff;
	font-size:clamp(2.2rem, 4.8vw, 4.5rem);
	line-height:.98;
	letter-spacing:-.055em;
	text-wrap:balance;
}

.home-magazine-main-content p {
	max-width:720px;
	margin:18px 0 0;
	color:rgba(238,244,255,.82);
	font-size:1rem;
	line-height:1.7;
}

.home-magazine-meta {
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:8px;
	color:rgba(238,244,255,.72);
	font-size:.77rem;
}

.home-magazine-meta span {
	display:inline-flex;
	align-items:center;
	padding:6px 9px;
	border:1px solid rgba(255,255,255,.1);
	border-radius:999px;
	background:rgba(6,14,34,.48);
	backdrop-filter:blur(10px);
}

.home-magazine-readmore {
	display:inline-flex;
	align-items:center;
	gap:9px;
	margin-top:22px;
	color:var(--primary2);
	font-weight:900;
}

.home-magazine-readmore span {
	transition:transform .2s ease;
}

.home-magazine-main:hover
.home-magazine-readmore span {
	transform:translateX(5px);
}


/* ==========================================================
   Startseite: Nebenbeiträge
========================================================== */

.home-magazine-side {
	display:grid;
	grid-template-rows:repeat(2, minmax(0, 1fr));
	gap:24px;
	min-width:0;
}

.home-magazine-side-card {
	position:relative;
	min-width:0;
	overflow:hidden;
	border:1px solid rgba(255,255,255,.09);
	border-radius:24px;
	background:#081123;
	box-shadow:0 22px 58px rgba(0,0,0,.25);
	transition:
		transform .27s ease,
		border-color .27s ease,
		box-shadow .27s ease;
}

.home-magazine-side-card:hover {
	transform:translateY(-4px);
	border-color:rgba(99,180,255,.34);
	box-shadow:0 28px 68px rgba(0,0,0,.32);
}

.home-magazine-side-media {
	position:relative;
	display:block;
	width:100%;
	height:100%;
	min-height:313px;
	overflow:hidden;
}

.home-magazine-side-media > img {
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform .5s ease;
}

.home-magazine-side-card:hover
.home-magazine-side-media > img {
	transform:scale(1.055);
}

.home-magazine-side-content {
	position:absolute;
	z-index:2;
	right:0;
	bottom:0;
	left:0;
	padding:25px;
}

.home-magazine-side-content h3 {
	margin:13px 0 12px;
	color:#fff;
	font-size:clamp(1.25rem, 2.2vw, 1.7rem);
	line-height:1.18;
	letter-spacing:-.025em;
	text-wrap:balance;
}


/* ==========================================================
   Startseite: Leerer Nebenbereich
========================================================== */

.home-magazine-side-empty {
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	min-height:300px;
	padding:30px;
	border:1px dashed rgba(255,255,255,.12);
	border-radius:24px;
	background:rgba(255,255,255,.025);
	color:var(--muted);
	text-align:center;
}

.home-magazine-side-empty img {
	width:88px;
	margin-bottom:18px;
	opacity:.82;
}


/* ==========================================================
   Startseite: Empty State
========================================================== */

.home-blog-empty {
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	min-height:320px;
	padding:44px 26px;
	border:1px dashed rgba(255,255,255,.12);
	border-radius:26px;
	background:
		radial-gradient(
			circle at 50% 0%,
			rgba(28,140,255,.12),
			transparent 40%
		),
		rgba(255,255,255,.025);
	text-align:center;
}

.home-blog-empty img {
	width:100px;
	margin-bottom:20px;
	opacity:.88;
}

.home-blog-empty h3 {
	margin-bottom:10px;
	font-size:1.5rem;
}

.home-blog-empty p {
	max-width:520px;
	color:var(--muted);
	line-height:1.7;
}


/* ==========================================================
   Startseite: Beliebte Blogbeiträge
========================================================== */

.home-popular-grid {
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:24px;
}

.home-popular-card {
	position:relative;
	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(17,27,61,.92),
			rgba(7,13,31,.97)
		);
	box-shadow:0 22px 58px rgba(0,0,0,.23);
	transition:
		transform .27s ease,
		border-color .27s ease,
		box-shadow .27s ease;
}

.home-popular-card:hover {
	transform:translateY(-5px);
	border-color:rgba(99,180,255,.32);
	box-shadow:0 30px 72px rgba(0,0,0,.32);
}

.home-popular-media {
	position:relative;
	display:block;
	height:235px;
	overflow:hidden;
	background:
		linear-gradient(
			135deg,
			#11285a,
			#060c1c
		);
}

.home-popular-media > img {
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform .5s ease;
}

.home-popular-card:hover
.home-popular-media > img {
	transform:scale(1.05);
}

.home-popular-fallback {
	display:grid;
	place-items:center;
	width:100%;
	height:100%;
}

.home-popular-fallback img {
	width:112px;
	max-height:120px;
	object-fit:contain;
	opacity:.88;
}

.home-popular-overlay {
	position:absolute;
	inset:0;
	background:
		linear-gradient(
			180deg,
			transparent 42%,
			rgba(4,8,20,.62)
		);
}

.home-popular-rank {
	position:absolute;
	z-index:2;
	top:16px;
	left:16px;
	display:grid;
	place-items:center;
	width:43px;
	height:43px;
	border:1px solid rgba(255,255,255,.18);
	border-radius:14px;
	background:rgba(4,9,23,.75);
	color:#fff;
	font-weight:900;
	box-shadow:0 12px 28px rgba(0,0,0,.3);
	backdrop-filter:blur(12px);
}

.home-popular-card:first-child
.home-popular-rank {
	border-color:rgba(255,215,96,.35);
	background:rgba(102,73,4,.76);
	color:#ffd760;
}

.home-popular-content {
	display:flex;
	flex:1;
	flex-direction:column;
	padding:23px;
}

.home-popular-category {
	display:inline-flex;
	align-items:center;
	width:max-content;
	padding:6px 10px;
	border:1px solid rgba(99,180,255,.22);
	border-radius:999px;
	background:rgba(28,140,255,.1);
	color:var(--primary2);
	font-size:.68rem;
	font-weight:900;
	letter-spacing:.06em;
	text-transform:uppercase;
}

.home-popular-content h3 {
	margin:14px 0 12px;
	font-size:1.28rem;
	line-height:1.28;
}

.home-popular-content h3 a {
	color:#fff;
}

.home-popular-content h3 a:hover {
	color:var(--primary2);
}

.home-popular-meta {
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:8px;
	color:var(--muted);
	font-size:.77rem;
}

.home-popular-meta span {
	display:inline-flex;
	align-items:center;
	padding:6px 9px;
	border:1px solid rgba(255,255,255,.075);
	border-radius:999px;
	background:rgba(255,255,255,.035);
}

.home-popular-content p {
	margin:17px 0 20px;
	color:var(--muted);
	line-height:1.65;
}

.home-popular-link {
	display:inline-flex;
	align-items:center;
	gap:8px;
	width:max-content;
	margin-top:auto;
	color:var(--primary2);
	font-weight:900;
}

.home-popular-link span {
	transition:transform .2s ease;
}

.home-popular-link:hover span {
	transform:translateX(4px);
}


/* ==========================================================
   Startseite: Blog Responsive
========================================================== */

@media (max-width:1050px) {

	.home-magazine {
		grid-template-columns:1fr;
		min-height:0;
	}

	.home-magazine-main-media {
		min-height:560px;
	}

	.home-magazine-side {
		grid-template-columns:repeat(2, minmax(0, 1fr));
		grid-template-rows:none;
	}

	.home-magazine-side-media {
		min-height:300px;
	}

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

	.home-popular-card:last-child {
		grid-column:1 / -1;
	}

}


@media (max-width:700px) {

	.home-section-head {
		align-items:flex-start;
		flex-direction:column;
	}

	.home-section-head .btn {
		width:100%;
	}

	.home-magazine-main {
		border-radius:23px;
	}

	.home-magazine-main-media {
		min-height:500px;
	}

	.home-magazine-main-content {
		padding:27px 23px;
	}

	.home-magazine-main-content h3 {
		font-size:clamp(2rem, 10vw, 3.25rem);
	}

	.home-magazine-main-content p {
		display:none;
	}

	.home-magazine-side {
		grid-template-columns:1fr;
	}

	.home-magazine-side-media {
		min-height:285px;
	}

	.home-popular-grid {
		grid-template-columns:1fr;
	}

	.home-popular-card:last-child {
		grid-column:auto;
	}

}


@media (max-width:480px) {

	.home-magazine-main-media {
		min-height:460px;
	}

	.home-magazine-main-content {
		padding:23px 19px;
	}

	.home-magazine-badges {
		align-items:flex-start;
		flex-direction:column;
	}

	.home-magazine-main-content h3 {
		font-size:2.15rem;
	}

	.home-magazine-meta span:nth-child(3) {
		display:none;
	}

	.home-magazine-side-content {
		padding:21px;
	}

	.home-popular-media {
		height:210px;
	}

}


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

	.home-magazine-main,
	.home-magazine-main-media > img,
	.home-magazine-readmore span,
	.home-magazine-side-card,
	.home-magazine-side-media > img,
	.home-popular-card,
	.home-popular-media > img,
	.home-popular-link span {
		transition:none;
	}

	.home-magazine-main:hover,
	.home-magazine-main:hover
	.home-magazine-main-media > img,
	.home-magazine-main:hover
	.home-magazine-readmore span,
	.home-magazine-side-card:hover,
	.home-magazine-side-card:hover
	.home-magazine-side-media > img,
	.home-popular-card:hover,
	.home-popular-card:hover
	.home-popular-media > img,
	.home-popular-link:hover span {
		transform:none;
	}

}

/* ==========================================================
   Responsive
========================================================== */

@media(max-width:1000px) {
	.page-head {
		padding:80px 5vw;
		min-height:360px;
	}

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

@media(max-width:900px) {
	.site-footer {
		grid-template-columns:1fr 1fr;
	}

	.footer-right {
		justify-content:flex-start;
	}

	.hero-watermark::after {
		width:210px;
		right:-30px;
		top:40px;
		transform:none;
		opacity:.045;
	}
}

@media(max-width:700px) {
	h2 {
		font-size:30px;
	}

	.page-head {
		padding:58px 5vw;
		min-height:300px;
		margin-bottom:46px;
	}

	.page-head h1 {
		font-size:42px;
		letter-spacing:-1px;
	}

	.page-head p {
		font-size:17px;
	}

	.page-actions {
		margin-top:24px;
	}

	.page-actions .btn {
		width:100%;
	}

	.hero-watermark::after {
		display:none;
	}

	.site-footer {
		grid-template-columns:1fr;
	}

	.footer-nav,
	.footer-right {
		align-items:flex-start;
		justify-content:flex-start;
	}

	.sponsors-marquee::before,
	.sponsors-marquee::after {
		width:60px;
	}

	.sponsor-logo {
		flex-basis:190px;
		height:125px;
		padding:18px;
	}

	.sponsor-logo img {
		max-width:150px;
		max-height:75px;
	}

	.sponsor-logo-box {
		height:145px;
	}

	.sponsor-logo-box img {
		max-height:105px;
	}
}

.admin-head {
	margin-bottom: 24px;
}