/* ==========================================================================
   monkeyz – Rechtsseiten (Impressum, Datenschutz)

   Der Inhalt beider Seiten bleibt in Elementor und bleibt inhaltlich
   unangetastet. Hier wird ausschließlich umgestylt: Typografie, Farben und
   Abstände werden auf das Redesign gezogen.

   Elementor gewichtet seine eigenen Angaben sehr hoch (Kit-Stile, Selektoren
   mit ID). Deshalb steht hier oft "!important" – es geht dabei ausnahmslos um
   Aussehen, nie um Struktur oder Inhalt.

   Bewusst NICHT gemacht: die Elementor-Container mit "display: contents"
   auflösen. Auf beiden Seiten liegt ein ausgeblendeter Abschnitt
   („blütezeit …"), der ausgeblendet bleiben muss.
   ========================================================================== */

/* --- Rahmen der Seite ---------------------------------------------------- */

.mz-legal {
	padding-top: var(--space-10);
	padding-bottom: var(--space-20);
}

/* Lange Fließtexte lesen sich in einer schmaleren Spalte deutlich besser.
   900 px lässt auf dem Impressum die zwei Spalten weiterhin nebeneinander. */
.mz-legal .mz-container { max-width: 900px; }

.mz-legal__head { margin-bottom: var(--space-5); }

/* --- Elementor-Gerüst ----------------------------------------------------
   Die Abschnitte bringen eigene Innenabstände mit (50 px oben, 60 px unten).
   Die werden hier zurückgesetzt und durch einen gleichmäßigen Abstand
   zwischen den Abschnitten ersetzt.
   ------------------------------------------------------------------------ */

.mnkz-legal .mz-legal__content .elementor-section {
	padding-block: 0 !important;
}

.mnkz-legal .mz-legal__content .elementor-section + .elementor-section {
	margin-top: var(--space-8);
}

.mnkz-legal .mz-legal__content .elementor-container {
	max-width: 100% !important;
}

/*
 * Die Spalten bringen einen eigenen Innenabstand mit. Nach außen wird er
 * entfernt, damit der Text bündig unter der Rubrik und dem Titel steht; der
 * Abstand zwischen zwei Spalten bleibt erhalten.
 */
.mnkz-legal .mz-legal__content .elementor-container > .elementor-column:first-child > .elementor-widget-wrap {
	padding-left: 0 !important;
}

.mnkz-legal .mz-legal__content .elementor-container > .elementor-column:last-child > .elementor-widget-wrap {
	padding-right: 0 !important;
}

.mnkz-legal .mz-legal__content .elementor-widget-wrap {
	padding-block: 0 !important;
}

/* Trennlinien: statt kräftigem Grün die zurückhaltende helle Linie. */
.mnkz-legal .mz-legal__content .elementor-section,
.mnkz-legal .mz-legal__content .elementor-column,
.mnkz-legal .mz-legal__content .elementor-widget-wrap {
	border-color: var(--white-a12) !important;
}

/* --- Seitentitel ---------------------------------------------------------
   Der große Titel („IMPRESSUM", „DATENSCHUTZ") ist der einzige
   Überschrift-Baustein mit einem p-Element – daran ist er sicher zu erkennen,
   ohne auf die Reihenfolge der Bausteine angewiesen zu sein.
   ------------------------------------------------------------------------ */

.mnkz-legal .mz-legal__content p.elementor-heading-title {
	margin: 0 !important;
	font-family: var(--font-display) !important;
	font-size: clamp(34px, 1.4vw + 29px, var(--fs-4xl)) !important;
	font-weight: var(--fw-regular) !important;
	line-height: var(--lh-tight) !important;
	letter-spacing: var(--ls-headline) !important;
	text-transform: uppercase !important;
	color: var(--white) !important;
	text-align: left !important;
}

/* Der Abschnitt mit dem Titel steht direkt unter der Rubrik. */
.mnkz-legal .mz-legal__content .elementor-widget-heading { text-align: left !important; }

/* --- Vorspann ------------------------------------------------------------
   Impressum: „Angaben gemäß § 5 TMG" (Text-Baustein).
   Datenschutz: der einleitende Satz (Überschrift-Baustein, h2).
   ------------------------------------------------------------------------ */

.mnkz-legal .mz-legal__content .elementor-widget-text-editor {
	margin-top: var(--space-3) !important;
	font-family: var(--font-core) !important;
	font-size: var(--fs-md) !important;
	line-height: var(--lh-body) !important;
	color: var(--grey-400) !important;
	text-align: left !important;
}

.mnkz-legal .mz-legal__content h2.elementor-heading-title {
	margin: 0 0 var(--space-6) !important;
	font-family: var(--font-core) !important;
	font-size: var(--fs-md) !important;
	font-weight: var(--fw-semibold) !important;
	line-height: 1.5 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--white) !important;
	text-align: left !important;
}

/* --- Textblöcke ----------------------------------------------------------
   Beide Seiten sind aus Icon-Boxen aufgebaut (ohne Icon): Überschrift plus
   Fließtext. Die Überschrift bekommt die Beschriftungsform des Redesigns –
   grün, versal, weit gesperrt –, der Text ruhiges Grau.
   ------------------------------------------------------------------------ */

.mnkz-legal .mz-legal__content .elementor-icon-box-title {
	margin: 0 0 var(--space-2) !important;
	font-family: var(--font-core) !important;
	font-size: var(--fs-sm) !important;
	font-weight: var(--fw-bold) !important;
	line-height: 1.3 !important;
	letter-spacing: var(--ls-label) !important;
	text-transform: uppercase !important;
	color: var(--accent) !important;
}

.mnkz-legal .mz-legal__content .elementor-icon-box-description {
	margin: 0 !important;
	font-family: var(--font-core) !important;
	font-size: var(--fs-base) !important;
	line-height: var(--lh-body) !important;
	color: var(--grey-300) !important;
}

.mnkz-legal .mz-legal__content .elementor-icon-box-wrapper {
	text-align: left !important;
}

/* Luft zwischen den einzelnen Blöcken. */
.mnkz-legal .mz-legal__content .elementor-widget-icon-box {
	margin-bottom: var(--space-6);
}

.mnkz-legal .mz-legal__content .elementor-widget-icon-box:last-child {
	margin-bottom: 0;
}

/* --- Verweise ------------------------------------------------------------ */

.mnkz-legal .mz-legal__content a {
	font-family: var(--font-core) !important;
	color: var(--accent) !important;
	text-decoration: none;
}

.mnkz-legal .mz-legal__content a:hover,
.mnkz-legal .mz-legal__content a:focus-visible {
	text-decoration: underline;
}

/* --- Knöpfe --------------------------------------------------------------
   Falls in den Inhalten ein Elementor-Knopf steht, bekommt er die Pillenform
   des Redesigns. --mz-btn-bg hält das Eltern-Theme davon ab, ihn beim
   Überfahren magenta einzufärben (siehe components.css).
   ------------------------------------------------------------------------ */

.mnkz-legal .mz-legal__content .elementor-button {
	padding: var(--space-3) var(--space-6) !important;
	border-radius: var(--radius-pill) !important;
	background-color: var(--accent) !important;
	color: var(--black) !important;
	font-family: var(--font-core) !important;
	font-size: var(--fs-sm) !important;
	font-weight: var(--fw-bold) !important;
	letter-spacing: var(--ls-label) !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	--mz-btn-bg: var(--accent);
}

.mnkz-legal .mz-legal__content .elementor-button:hover,
.mnkz-legal .mz-legal__content .elementor-button:focus {
	background-color: var(--accent-hover) !important;
	color: var(--black) !important;
	--mz-btn-bg: var(--accent-hover);
}

/* --- Schmale Bildschirme ------------------------------------------------- */

@media (max-width: 600px) {
	.mz-legal {
		padding-top: var(--space-8);
		padding-bottom: var(--space-12);
	}

	.mnkz-legal .mz-legal__content .elementor-section + .elementor-section {
		margin-top: var(--space-6);
	}

	.mnkz-legal .mz-legal__content .elementor-widget-icon-box {
		margin-bottom: var(--space-5);
	}
}