/*
 * Werbeflächen hundeallerlei
 *
 * Ab 980 px:
 * Werbung links | Inhalt | Werbung rechts
 *
 * Unter 980 px:
 * Inhalt und danach alle drei Anzeigen vor dem Footer
 */


/* =========================================================
   GEMEINSAME GRUNDREGELN
   ========================================================= */

.ha-site-shell {
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 auto !important;
}

.ha-site-shell__content {
	box-sizing: border-box !important;
	min-width: 0 !important;
	width: 100% !important;
}

.ha-site-shell > .ha-ad-rail {
	box-sizing: border-box !important;
	inset: auto !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	margin: 0 !important;
	overflow: visible !important;
	visibility: visible !important;
	opacity: 1 !important;
	transform: none !important;
	pointer-events: auto !important;
}

.ha-site-shell > .ha-ad-rail.is-hidden {
	visibility: visible !important;
	opacity: 1 !important;
	transform: none !important;
}

.ha-site-shell .ha-ad-slot {
	box-sizing: border-box !important;
	display: flex !important;
	flex-direction: column;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	margin: 0 !important;
	overflow: hidden !important;
}

.ha-site-shell .ha-ad-slot__label {
	position: static !important;
	display: inline-flex;
	align-self: flex-start;
	margin: 10px 10px 0;
	padding: 4px 7px;
	background: #ffffff;
	border-radius: 5px;
	color: #536258;
	font-size: 0.58rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1;
	text-transform: uppercase;
}

.ha-site-shell .ha-ad-slot__placeholder {
	box-sizing: border-box !important;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	aspect-ratio: auto !important;
	overflow: visible !important;
	text-align: center;
}

.ha-site-shell .ha-ad-slot__placeholder strong,
.ha-site-shell .ha-ad-slot__placeholder span,
.ha-site-shell .ha-ad-slot__placeholder a {
	max-width: 100%;
	overflow-wrap: anywhere;
	hyphens: auto;
}

.ha-site-shell .ha-ad-slot__placeholder strong {
	color: #30483a;
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 500;
	line-height: 1.28;
}

.ha-site-shell .ha-ad-slot__placeholder span {
	color: #65736a;
	line-height: 1.45;
}

.ha-site-shell .ha-ad-slot__placeholder a {
	box-sizing: border-box;
	color: #30483a;
	line-height: 1.3;
	text-align: center;
}

.ha-site-shell .ha-ad-slot__image {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	background: #ffffff;
	object-fit: contain !important;
}


/* =========================================================
   DREI SPALTEN AB 980 PIXEL
   ========================================================= */

@media (min-width: 980px) {

	.ha-site-shell {
		--ha-ad-width: clamp(105px, 9vw, 190px);
		--ha-ad-gap: clamp(10px, 1.2vw, 22px);

		display: grid !important;
		grid-template-columns:
			var(--ha-ad-width)
			minmax(0, 1fr)
			var(--ha-ad-width) !important;
		grid-template-areas:
			"ad-left content ad-right" !important;
		align-items: start !important;
		gap: var(--ha-ad-gap) !important;
		padding: 0 clamp(8px, 1vw, 16px) !important;
	}

	.ha-site-shell__content {
		grid-area: content;
	}

	.ha-site-shell > .ha-ad-rail {
		position: sticky !important;
		top: 18px !important;
		display: block !important;
		padding: 18px 0 0 !important;
	}

	.admin-bar .ha-site-shell > .ha-ad-rail {
		top: 50px !important;
	}

	.ha-site-shell > .ha-ad-rail--left {
		grid-area: ad-left;
	}

	.ha-site-shell > .ha-ad-rail--right {
		grid-area: ad-right;
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		gap: clamp(14px, 1.1vw, 20px) !important;
	}

	.ha-site-shell .ha-ad-slot--premium .ha-ad-slot__placeholder {
		min-height: clamp(330px, 30vw, 430px) !important;
		padding: 24px 11px !important;
	}

	.ha-site-shell .ha-ad-slot--premium .ha-ad-slot__placeholder strong {
		font-size: clamp(0.96rem, 1vw, 1.3rem) !important;
	}

	.ha-site-shell .ha-ad-slot--premium .ha-ad-slot__placeholder span {
		margin-top: 12px;
		font-size: clamp(0.65rem, 0.6vw, 0.78rem) !important;
	}

	.ha-site-shell .ha-ad-slot--premium .ha-ad-slot__image {
		aspect-ratio: 1 / 2 !important;
	}

	.ha-site-shell .ha-ad-slot--compact .ha-ad-slot__placeholder {
		min-height: clamp(185px, 17vw, 225px) !important;
		padding: 18px 9px !important;
	}

	.ha-site-shell .ha-ad-slot--compact .ha-ad-slot__placeholder strong {
		font-size: clamp(0.82rem, 0.8vw, 1.04rem) !important;
	}

	.ha-site-shell .ha-ad-slot--compact .ha-ad-slot__placeholder span {
		display: none !important;
	}

	.ha-site-shell .ha-ad-slot--compact .ha-ad-slot__image {
		aspect-ratio: 1 / 1 !important;
	}

	.ha-site-shell .ha-ad-slot__placeholder a {
		width: 100%;
		margin-top: 16px;
		padding: 8px 5px !important;
		font-size: clamp(0.58rem, 0.53vw, 0.7rem) !important;
	}
}


/* =========================================================
   KLEINERE ANSICHTEN UNTER 980 PIXEL
   ========================================================= */

@media (max-width: 979px) {

	.ha-site-shell {
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
		padding: 0 !important;
	}

	.ha-site-shell__content {
		order: 1;
		width: 100% !important;
	}

	.ha-site-shell > .ha-ad-rail {
		position: static !important;
		top: auto !important;
		display: block !important;
		width: min(calc(100% - 28px), 620px) !important;
		max-width: 620px !important;
		margin-right: auto !important;
		margin-left: auto !important;
		padding: 0 !important;
	}

	.ha-site-shell > .ha-ad-rail--left {
		order: 2;
		margin-top: 28px !important;
	}

	.ha-site-shell > .ha-ad-rail--right {
		order: 3;
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 16px !important;
		margin-top: 16px !important;
		margin-bottom: 30px !important;
	}

	.ha-site-shell .ha-ad-slot__placeholder {
		min-height: 145px !important;
		padding: 24px 20px !important;
	}

	.ha-site-shell .ha-ad-slot--premium .ha-ad-slot__placeholder {
		min-height: 165px !important;
	}

	.ha-site-shell .ha-ad-slot__placeholder strong,
	.ha-site-shell .ha-ad-slot--premium .ha-ad-slot__placeholder strong {
		font-size: 1.18rem !important;
	}

	.ha-site-shell .ha-ad-slot__placeholder span {
		display: block !important;
		margin-top: 10px;
		font-size: 0.85rem !important;
	}

	.ha-site-shell .ha-ad-slot__placeholder a {
		width: auto;
		min-width: 220px;
		margin-top: 17px;
		padding: 10px 15px !important;
		font-size: 0.77rem !important;
	}

	.ha-site-shell .ha-ad-slot__image {
		width: 100% !important;
		height: auto !important;
		max-height: 320px !important;
		aspect-ratio: auto !important;
	}
}

@media (max-width: 420px) {

	.ha-site-shell > .ha-ad-rail {
		width: min(calc(100% - 22px), 620px) !important;
	}

	.ha-site-shell .ha-ad-slot__placeholder a {
		width: 100%;
		min-width: 0;
	}
}


/* MOBILE WERBEREIHENFOLGE 2026 */

@media (max-width: 767px) {

	.ha-site-shell > .ha-ad-rail--left {
		order: 0 !important;
		margin-top: 24px !important;
		margin-bottom: 24px !important;
	}

	.ha-site-shell__content {
		order: 1 !important;
	}

	.ha-site-shell > .ha-ad-rail--right {
		order: 2 !important;
		margin-top: 26px !important;
		margin-bottom: 30px !important;
	}
}


/* GROESSERE DESKTOP-WERBEFLAECHEN 2026 */

@media (min-width: 1280px) {

	.ha-site-shell {
		grid-template-columns:
			clamp(170px, 11.5vw, 205px)
			minmax(0, 1fr)
			clamp(160px, 10.5vw, 190px) !important;
		gap: clamp(16px, 1.35vw, 24px) !important;
	}

	.ha-site-shell .ha-ad-slot--premium .ha-ad-slot__placeholder {
		min-height: clamp(380px, 31vw, 450px) !important;
	}

	.ha-site-shell .ha-ad-slot--compact .ha-ad-slot__placeholder {
		min-height: clamp(200px, 18vw, 235px) !important;
	}
}