/* NOIO 0.9 – durchgehende Magazin-Bühne / Rahmen
   Ziel: Die im Hero sichtbaren Seitenkanten laufen optisch über die komplette
   Seite weiter und treffen sauber auf den sticky Header. */

:root {
	--noio-frame-width: 1536px;
	--noio-frame-line: #17384b;
	--noio-frame-line-soft: rgba(36, 229, 255, .10);
	--noio-frame-bg: #06111a;
	--noio-outside-bg: #030a11;
}

/* Außenfläche etwas dunkler, damit der Innenrahmen als "Bühne" lesbar bleibt. */
html,
body {
	background: var(--noio-outside-bg) !important;
}

body {
	position: relative;
}

/* Die bereits sichtbaren Kanten von Header und Hero werden exakt betont. */
.noio-home-header-stage,
.noio-home-hero-stage,
.noio-sub-header-stage {
	box-sizing: border-box;
	border-left: 1px solid var(--noio-frame-line);
	border-right: 1px solid var(--noio-frame-line);
}

/* Unterhalb des Hero wird die gleiche 1536px-Bühne fortgesetzt.
   Die WordPress-Constrained-Children bleiben weiterhin angenehm schmal. */
.noio-live-content {
	box-sizing: border-box;
	width: 100% !important;
	max-width: var(--noio-frame-width) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: clamp(18px, 3vw, 46px) !important;
	padding-right: clamp(18px, 3vw, 46px) !important;
	padding-bottom: clamp(4.5rem, 7vw, 7rem) !important;
	border-left: 1px solid var(--noio-frame-line);
	border-right: 1px solid var(--noio-frame-line);
	background:
		linear-gradient(180deg, rgba(7,18,28,.98) 0%, rgba(5,15,24,.99) 100%);
	box-shadow:
		inset 1px 0 0 var(--noio-frame-line-soft),
		inset -1px 0 0 var(--noio-frame-line-soft);
}

/* Der Übergang Hero -> Inhalt bleibt ohne "Abriss".
   Abstand entsteht nur innerhalb der Bühne. */
.noio-home-hero-wrap {
	margin-bottom: 0 !important;
}

.noio-live-content {
	margin-top: 0 !important;
}

/* Die erste Inhaltsüberschrift bekommt Luft, aber der Rahmen läuft durch. */
.noio-live-content > :first-child {
	margin-top: 0 !important;
}

/* Footer als Abschluss derselben Bühne. */
.noio-footer {
	box-sizing: border-box;
	width: 100% !important;
	max-width: var(--noio-frame-width) !important;
	margin: 0 auto !important;
	border-left: 1px solid var(--noio-frame-line);
	border-right: 1px solid var(--noio-frame-line);
	border-bottom: 1px solid var(--noio-frame-line);
	background: #050f18;
}

/* Unterseiten: dieselben vertikalen Führungslinien über die komplette Seite.
   So "fließt" die Seitenkante auch dort in den sticky Header. */
body::before {
	content: "";
	position: absolute;
	z-index: 40;
	top: 0;
	bottom: 0;
	left: 50%;
	width: min(100%, var(--noio-frame-width));
	box-sizing: border-box;
	transform: translateX(-50%);
	border-left: 1px solid rgba(23,56,75,.72);
	border-right: 1px solid rgba(23,56,75,.72);
	pointer-events: none;
}

/* Die wichtigen Seitenelemente liegen vor den rein dekorativen Rails. */
.noio-home-topline,
.noio-home-header-desktop,
.noio-home-header-mobile,
.noio-home-hero-wrap,
.noio-live-content,
.noio-sub-header-desktop,
.noio-sub-header-mobile,
.noio-subhero,
.noio-subpage-content,
.noio-archive-main,
.noio-search-main,
.noio-footer,
.tribe-events,
.tribe-common {
	position: relative;
	z-index: 50;
}

/* Unterseiten-Inhalte bleiben kompakter, die äußeren Rails sind aber identisch. */
.noio-subhero,
.noio-archive-main,
.noio-search-main {
	box-sizing: border-box;
}

/* Event-Seite visuell in dieselbe Gesamtbreite einpassen. */
.tribe-events .tribe-events-l-container,
.tribe-common .tribe-common-l-container {
	box-sizing: border-box;
}

/* Beim Scrollen verbindet sich der Rahmen sichtbar mit dem sticky Header. */
.noio-home-header-desktop,
.noio-sub-header-desktop {
	border-bottom: 1px solid var(--noio-frame-line);
}

/* Admin-Leiste berücksichtigen, ohne den Rahmen zu verschieben. */
@media (min-width: 901px) {
	.admin-bar .noio-home-header-desktop,
	.admin-bar .noio-sub-header-desktop {
		top: 32px;
	}
}

/* Auf kleinen Displays keine künstliche Außenrinne – Rahmen sitzt direkt am Rand. */
@media (max-width: 900px) {
	:root {
		--noio-frame-width: 100%;
	}

	body::before {
		display: none;
	}

	.noio-live-content {
		padding-left: 16px !important;
		padding-right: 16px !important;
		border-left-color: rgba(23,56,75,.72);
		border-right-color: rgba(23,56,75,.72);
	}

	.noio-home-header-stage,
	.noio-home-hero-stage,
	.noio-sub-header-stage {
		border-left: 0;
		border-right: 0;
	}
}