/* Große Bildschirme: Inhaltsbereich ab 1280px breiter, ab 1440px noch breiter, darüber fest. Menü bleibt gleich. */
@media (min-width: 1280px) {
	:root {
		--content: 560px;
	}
}

@media (min-width: 1440px) {
	:root {
		--content: 680px;
	}
}

@media (min-width: 1280px) {
	#container {
		width: calc(470px + var(--content));
	}

	#header a img {
		margin-left: calc(361px + (var(--content) - 430px) / 2);
	}

	#content {
		width: var(--content);
	}

	#shopper {
		margin-left: calc(750px + var(--content) - 430px);
	}

	cite {
		width: auto;
	}

	/* Nivo-Slider mitwachsen lassen */
	.theme-default .nivoSlider {
		width: var(--content);
		height: var(--content);
	}

	.nivoSlider img {
		width: 100%;
		height: auto;
	}

	.nivoSlider, .nivo-slice {
		background-size: var(--content) var(--content) !important;
	}

	/* Kacheln (Shop, Kollektionen, Lookbook, Press) */
	ul.tiles {
		width: auto;
	}

	ul.tiles li {
		width: calc(50% - 10px);
	}

	ul.tiles li.odd {
		clear: left;
	}

	ul.tiles li img {
		width: 100%;
		height: auto;
	}

	ul.tiles li > div {
		height: auto !important;
		aspect-ratio: 1 / 1;
	}

	ul.tiles li > div img {
		height: 100%;
	}

	.lookbookTitle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	/* Kasse */
	#checkoutHead ol li {
		width: calc((100% - 9px) / 4 - 2px);
	}
}

/* Intro: Hintergrund im gleichen Verhältnis wie der Slider vergrößern, damit Ring und Schriftzug wieder zusammenpassen */
@media (min-width:1280px){
	body.intro, body.intro #header{
		background-size:calc(var(--content) * 1280 / 430) auto !important;
		background-position:50% calc(130px - var(--content) * 130 / 430) !important;
	}
}