/**
 * Theme – Layout: Siteframe, Sektions-Wrapper, Bild-Wrapper, Seiten-Container.
 *
 * Die Wrapper-Klassen (sec-wrap, header-wrap, *-image-wrap, text-*-columns)
 * stammen aus Gutenberg-Inhalten der Datenbank — Namen nicht ändern.
 * Desktop-first (Projekt-Konvention, siehe global.css).
 */

/* =========================================================================
   Siteframe (dekorativer Seitenrahmen, inline in header.php)
   ========================================================================= */

svg.siteframe {
	z-index: 100;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: calc(100vh - 5.375rem);
	height: calc(100dvh - 5.375rem);
	pointer-events: none;
}

svg.siteframe-md {
	display: none;
}

@media only screen and (max-width: 55em) {
	svg.siteframe {
		display: none;
	}

	svg.siteframe-md {
		display: block;
		z-index: 100;
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: calc(100vh - 5.75rem + 1px);
		height: calc(100dvh - 5.75rem + 1px);
		pointer-events: none;
	}
}

@media only screen and (max-width: 36em) {
	svg.siteframe-md {
		/*
		 * Oberen Grünraum um 30px verschmälern: Rahmen 30px hochziehen und die
		 * Höhe um 30px erhöhen, damit die Unterkante an Ort bleibt.
		 */
		top: -30px;
		height: calc(100vh - 4rem + 1px + 30px);
		height: calc(100dvh - 4rem + 1px + 30px);
	}
}

/* =========================================================================
   Sektions-Wrapper (aus DB-Inhalten)
   ========================================================================= */

.sec-wrap {
	position: relative;
	width: 100%;
	height: auto;
}

.sec-wrap__bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.sec-wrap__inner {
	position: relative;
	width: var(--innerwrap__width);
	height: auto;
	margin: auto;
}

.sec-wrap__inner:not([class*="pxy"], [class*="px-"], [class*="pl-"]) {
	padding-left: var(--innerwrap__px);
}

.sec-wrap__inner:not([class*="pxy"], [class*="px-"], [class*="pr-"]) {
	padding-right: var(--innerwrap__px);
}

.sec-wrap__inner:not([class*="pxy"], [class*="py-"], [class*="pt-"]) {
	padding-top: var(--innerwrap__py);
}

.sec-wrap__inner:not([class*="pxy"], [class*="py-"], [class*="pb-"]) {
	padding-bottom: var(--innerwrap__py);
}

.sec-wrap__inner.full {
	width: 100%;
}

.sec-wrap__inner.slim {
	width: var(--innerwrap__width--slim);
}

.sec-wrap__inner.slimmer {
	width: var(--innerwrap__width--slimmer);
}

.sec-wrap__inner.slim-af {
	width: var(--innerwrap__width--slim-af);
}

/* --- Header-Wrapper (identisches Muster) */

.header-wrap {
	position: relative;
	width: 100%;
	height: auto;
	padding-top: var(--spnkt-nav-height);
}

.header-wrap__bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.header-wrap__inner {
	position: relative;
	width: var(--innerwrap__width);
	height: auto;
	margin: auto;
}

.header-wrap__inner:not([class*="pxy"], [class*="px-"], [class*="pl-"]) {
	padding-left: var(--innerwrap__px);
}

.header-wrap__inner:not([class*="pxy"], [class*="px-"], [class*="pr-"]) {
	padding-right: var(--innerwrap__px);
}

.header-wrap__inner:not([class*="pxy"], [class*="py-"], [class*="pt-"]) {
	padding-top: var(--innerwrap__py);
}

.header-wrap__inner:not([class*="pxy"], [class*="py-"], [class*="pb-"]) {
	padding-bottom: var(--innerwrap__py);
}

.header-wrap__inner.full {
	width: 100%;
}

.header-wrap__inner.slim {
	width: var(--innerwrap__width--slim);
}

.header-wrap__inner.slimmer {
	width: var(--innerwrap__width--slimmer);
}

.header-wrap__inner.slim-af {
	width: var(--innerwrap__width--slim-af);
}

/* =========================================================================
   Seiten-Container (neue Templates): Unterseiten mittig, Home ungebremst
   ========================================================================= */

body:not(.home) .spnkt-content {
	width: var(--innerwrap__width--slim);
	max-width: 100%;
	margin: auto;
	padding: var(--innerwrap__py) var(--innerwrap__px);
}

body.home .spnkt-content {
	width: 100%;
}

/* =========================================================================
   Text-Spalten & Text-Helfer (aus DB-Inhalten)
   ========================================================================= */

.text-2-columns {
	column-count: 2;
	column-gap: 1.875em;
	margin: 1.875em 0;
}

.text-3-columns {
	column-count: 3;
	column-gap: 2em;
}

@media only screen and (max-width: 36em) {
	.text-2-columns,
	.text-3-columns {
		column-count: 1;
	}
}

.shorten {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* =========================================================================
   Bild-Wrapper (aus DB-Inhalten)
   ========================================================================= */

.centered-image-wrap {
	width: 100%;
	margin: auto;
	height: 28em;
	position: relative;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.centered-image-wrap img {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	margin-right: -50%;
	transform: translate(-50%, -50%);
}

.centered-image-wrap.full img {
	width: 100%;
}

.covered-image-wrap {
	position: relative;
	overflow: hidden;
	height: 100%;
	width: 100%;
}

.covered-image-wrap img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.contained-image-wrap {
	position: relative;
	overflow: hidden;
	height: 100%;
	width: 100%;
}

.contained-image-wrap img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

a:focus-visible .covered-image-wrap::after,
a:focus-visible .contained-image-wrap::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.5;
	background: var(--wp--preset--color--primary);
}

.centered--vertical {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
}