/* ==========================================================================
   monkeyz – Startseite
   Nur für die Startseite geladen. Der gemeinsame Seitenrahmen steht in
   chrome.css, hier stehen ausschließlich die Abschnitte der Startseite.
   ========================================================================== */

/* --- Hero --------------------------------------------------------------- */

.mz-hero {
	position: relative;
	min-height: 92vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--black);
}

.mz-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .16;
}

.mz-hero__scrim { position: absolute; inset: 0; background: var(--scrim-full); }
.mz-hero__inner { position: relative; width: 100%; }

.mz-hero__kicker { font-size: var(--fs-md); color: var(--grey-400); margin: 18px 0 0; }

/* Zum .mnkz-page-Zusatz siehe die Größenstaffel in components.css: Ohne ihn
   überstimmt das Elementor-Site-Kit die Größe (auf dem Telefon mit 29 px). */
.mnkz-page .mz-hero__title {
	/* Größe: siehe Stufe 1 in assets/css/typo.css */
	color: var(--white);
	margin: 8px 0 0;
	max-width: 900px;
}

.mz-hero__lead {
	font-size: var(--fs-md);
	line-height: var(--lh-body);
	color: var(--grey-300);
	max-width: 560px;
	margin: 26px 0 0;
}

.mz-hero__cta { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }

.mz-hero__note {
	margin-top: 30px;
	font-size: var(--fs-2xs);
	color: var(--grey-500);
	letter-spacing: .04em;
}

.mz-hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 36px;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	color: var(--grey-500);
}
.mz-hero__scroll span { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.mz-hero__scroll i { width: 1px; height: 34px; background: var(--grey-600); animation: mzScrollLine 1.8s ease-in-out infinite; }

@keyframes mzScrollLine { 0%, 100% { transform: scaleY(1); opacity: .4 } 50% { transform: scaleY(.4); opacity: 1 } }
/* Derselbe Auftritt, dieselbe Dauer und dieselben Bilder wie beim Erscheinen
   der Abschnitte weiter unten – siehe "Auftritt beim Scrollen" in
   components.css. Der Unterschied ist nur der Auslöser: hier das Laden der
   Seite, dort das Hereinscrollen. */
.mz-fade { animation: mz-auftritt var(--dur-auftritt, 1.05s) var(--ease-standard) both; animation-delay: var(--d, 0s); }

@media (max-width: 900px) {
	/* Kein fixer Mindesthöhen-Block mehr: der Hero ist so hoch wie sein Inhalt,
	   dadurch verschwindet die große schwarze Fläche unter dem Kopfbereich. */
	.mz-hero { min-height: 0; padding: var(--space-8) 0 var(--space-5); align-items: flex-start; }
	.mz-hero__kicker { margin-top: 10px; font-size: var(--fs-sm); }
	.mz-hero__lead { margin-top: 18px; font-size: var(--fs-sm); }
	.mz-hero__cta { flex-direction: column; gap: 10px; margin-top: 24px; }
	.mz-hero__cta .mz-btn { width: 100%; min-height: 46px; padding: 12px var(--space-5); font-size: var(--fs-sm); }
	.mz-hero__note { margin-top: 20px; }
	.mz-hero__scroll { display: none; }
}

/* Der erste Abschnitt rückt auf dem Telefon näher an den Kopfbereich. Mit dem
   vollen Abstand (40 px Kopfbereich + 48 px Abschnitt) blieb unter dem Knopf
   eine große leere Fläche stehen – der nächste Block war erst nach dem ersten
   Wischen zu sehen und die Seite wirkte leer. */
@media (max-width: 900px) {
	#ablauf { padding-top: var(--space-6); }
}

/* --- Ablauf der Anmeldung -----------------------------------------------

   Vier Karten mit großer Nummer im Hintergrund, die letzte grün abgesetzt.
   Mobil untereinander, ab 900 px vier nebeneinander. Die Dauer steht über der
   Überschrift – sie ist die Angabe, wegen der der Abschnitt überhaupt da ist.
   ------------------------------------------------------------------------ */

.mz-flow {
	list-style: none;
	margin: var(--space-10) 0 0;
	padding: 0;
	display: grid;
	gap: var(--space-4);
}

.mz-flow__item {
	position: relative;
	overflow: hidden;
	padding: var(--space-6);
	border: var(--border-width) solid var(--white-a12);
	border-radius: var(--radius-lg);
	background: var(--grey-900);
}

/* Die Nummer liegt als Wasserzeichen hinter dem Text. */
.mz-flow__num {
	position: absolute;
	top: -6px;
	right: var(--space-4);
	font-family: var(--font-display);
	font-size: 64px;
	line-height: 1;
	letter-spacing: var(--ls-headline);
	color: rgba(255, 255, 255, .05);
	pointer-events: none;
}

.mz-flow__zeit {
	margin: 0 0 var(--space-2);
	font-size: var(--fs-3xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--accent);
}

.mz-flow__titel {
	margin: 0 0 var(--space-2);
	font-family: var(--font-core);
	font-size: var(--fs-lg);
	font-weight: var(--fw-bold);
	line-height: 1.3;
	color: var(--white);
}

.mz-flow__text {
	margin: 0;
	font-size: var(--fs-sm);
	line-height: var(--lh-body);
	color: var(--grey-300);
}

/* Der letzte Schritt ist das Ziel und sieht anders aus als der Weg dorthin. */
.mz-flow__item--ziel {
	border-color: var(--green-tint-32);
	background: linear-gradient(180deg, var(--green-tint-08), var(--grey-900) 60%);
}

/* Der Weg vor Ort ist kein fünfter Schritt, sondern ein Abzweig. */
.mz-flow__abzweig { margin-top: var(--space-6); }
.mz-flow__abzweig strong { display: block; color: var(--white); }

.mz-section .mz-flow__cta { margin-top: var(--space-8); }

@media (min-width: 900px) {
	.mz-flow { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
	.mz-flow__item { padding: var(--space-6) var(--space-5); }
}

@media (max-width: 600px) {
	.mz-flow__cta .mz-btn { width: 100%; }
}

/* --- Gut zu wissen ------------------------------------------------------ */

.mz-benefits {
	list-style: none;
	margin: var(--space-12) 0 0;
	padding: 0;
	border-bottom: var(--border-width) solid var(--white-a12);
}

.mz-benefit {
	display: grid;
	grid-template-columns: 96px auto 1fr;
	align-items: center;
	gap: 28px;
	padding: 32px 0;
	border-top: var(--border-width) solid var(--white-a12);
}

.mz-benefit__num { font-family: var(--font-display); font-size: 28px; color: var(--grey-700); }

.mz-benefit__icon {
	width: 52px;
	height: 52px;
	border-radius: var(--radius-pill);
	background: var(--green-tint-16);
	color: var(--green-500);
	display: grid;
	place-items: center;
}

.mz-benefit__text strong { display: block; font-size: var(--fs-lg); color: var(--white); font-weight: var(--fw-bold); }
.mz-benefit__text span { display: block; font-size: var(--fs-sm); color: var(--grey-400); line-height: var(--lh-body); margin-top: 4px; }

.mz-section .mz-center { margin-top: var(--space-12); }

@media (max-width: 900px) {
	.mz-benefit { grid-template-columns: auto 1fr; gap: var(--space-4); padding: 20px 0; }
	.mz-benefit__num { display: none; }
	.mz-benefit__icon { width: 40px; height: 40px; }
	.mz-benefit__text strong { font-size: var(--fs-md); }
	.mz-benefit__text span { display: none; }
	.mz-section .mz-center .mz-btn { width: 100%; }
}

/* --- Sortiment ----------------------------------------------------------

   Der Abschnitt sagte früher nur, dass man etwas NICHT sehen darf. Jetzt
   erklärt er den Grund (das Werbeverbot des Cannabisgesetzes) und belegt an
   dieser Stelle die Arbeitsweise des Vereins.

   Der Kreis um das Symbol ist bewusst derselbe wie bei „Gut zu wissen"
   (52 px, grüner Ton bei 16 %, Symbol in 22 px) – gleiche Bauteile, gleiches
   Aussehen.
   ------------------------------------------------------------------------ */

.mz-facts {
	list-style: none;
	margin: var(--space-10) 0 0;
	padding: 0;
	display: grid;
	gap: var(--space-4);
}

.mz-fact {
	padding: var(--space-6);
	border: var(--border-width) solid var(--white-a12);
	border-radius: var(--radius-lg);
	background: var(--grey-900);
}

.mz-fact__icon {
	width: 52px;
	height: 52px;
	border-radius: var(--radius-pill);
	background: var(--green-tint-16);
	color: var(--green-500);
	display: grid;
	place-items: center;
	margin-bottom: var(--space-4);
}

.mz-fact__titel {
	display: block;
	font-size: var(--fs-lg);
	font-weight: var(--fw-bold);
	color: var(--white);
	margin-bottom: var(--space-1);
}

.mz-fact__text {
	display: block;
	font-size: var(--fs-sm);
	line-height: var(--lh-body);
	color: var(--grey-400);
}

@media (min-width: 900px) {
	.mz-facts { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
}

/* --- Sperrhinweis --------------------------------------------------------
   Sitzt jetzt in einem .mz-notice – Flex-Verhalten und Farben kommen von
   dort, hier nur die Aufteilung der Zeile.
   ------------------------------------------------------------------------ */

.mz-gate {
	margin-top: var(--space-6);
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-4);
}

.mz-gate .mz-icon { flex: 0 0 auto; color: var(--accent); }
.mz-gate__text { flex: 1 1 240px; font-size: var(--fs-sm); color: var(--grey-300); }
.mz-gate .mz-btn { flex: 0 0 auto; }

@media (max-width: 600px) {
	.mz-gate .mz-btn { width: 100%; }
}

/* --- Standort ----------------------------------------------------------- */

.mz-location {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: var(--space-8);
	align-items: stretch;
	margin-top: var(--space-12);
}

.mz-location__map { background: var(--black); min-height: 320px; display: grid; place-items: center; }
.mz-location__map img { width: 100%; height: 100%; object-fit: contain; display: block; }

.mz-location__cards { display: flex; flex-direction: column; gap: var(--space-4); }

.mz-with-icon { display: flex; align-items: center; gap: var(--space-2); }
.mz-with-icon .mz-icon { color: var(--green-500); }

.mz-hours { font-size: var(--fs-sm); line-height: var(--lh-loose); color: var(--grey-400); margin: 0 0 var(--space-3); }
.mz-hours strong { color: var(--white); }
.mz-hours:last-child { margin-bottom: 0; }

.mz-entrance { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); color: var(--grey-400); margin: 0 0 var(--space-2); }
.mz-entrance i { width: 10px; height: 10px; border-radius: var(--radius-circle); flex: none; }

/* Wegbeschreibung – abgesetzt von den Eingängen, aber in derselben Karte. */
.mz-route {
	margin-top: var(--space-4);
	padding-top: var(--space-4);
	border-top: var(--border-width) solid var(--white-a12);
}

.mz-route__hinweis {
	margin: var(--space-2) 0 0;
	font-size: var(--fs-2xs);
	color: var(--grey-500);
	text-align: center;
}

.mz-ways { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); margin-top: var(--space-12); }
.mz-ways img { width: 100%; display: block; }
.mz-ways video { width: 100%; max-height: 240px; display: block; object-fit: cover; background: var(--black); }

@media (max-width: 900px) {
	.mz-location, .mz-ways { grid-template-columns: 1fr; gap: var(--space-4); margin-top: var(--space-8); }
	.mz-location__map { min-height: 220px; }
	.mz-ways video { max-height: 200px; }
}

/* --- Anmeldung -----------------------------------------------------------
   Das Formular kommt aus dem Plugin MNK Airtable Sync ([mnk_registration]).
   Dessen eigene Stile sind durchgehend mit !important gesetzt, deshalb muss
   hier ebenfalls mit !important gearbeitet werden. Es wird ausschließlich die
   Optik angepasst – Struktur, Feldnamen, IDs und Abläufe bleiben unberührt,
   damit Registrierung, Code-Prüfung und Airtable-Anbindung weiterlaufen.
   -------------------------------------------------------------------------- */

.mz-signup-wrap { margin-top: var(--space-10); }

.mnkz-home .mnk-reg-container {
	width: 100% !important;
	max-width: 760px !important;
	margin: 0 auto !important;
}

/* Grundgerüst bewusst vollständig ausformuliert: Im Vorschau-Abbild fehlen die
   Inline-Stile des Plugins, bei echten Besuchern sind sie da. Nur wenn hier
   alles definiert ist, sieht beides gleich aus. */
.mnkz-home .mnk-form-row { display: flex !important; }
.mnkz-home .mnk-form-col { flex: 1 1 0 !important; min-width: 0; }
.mnkz-home .mnk-form-label { display: block !important; }
.mnkz-home .mnk-form-control { width: 100% !important; box-sizing: border-box !important; }
.mnkz-home .mnk-reg-btn {
	display: block !important;
	width: 100% !important;
	border: 0 !important;
	cursor: pointer !important;
}

.mnkz-home .mnk-reg-card {
	background: var(--black) !important;
	border: var(--border-width) solid var(--white-a12) !important;
	border-radius: var(--radius-md) !important;
	padding: 36px !important;
	box-shadow: none !important;
}

/* Die Überschrift steht bereits über der Karte – im Kasten wäre sie doppelt. */
.mnkz-home .mnk-reg-title { display: none !important; }

.mnkz-home .mnk-form-label {
	text-transform: uppercase !important;
	color: var(--accent) !important;
	font-size: var(--fs-3xs) !important;
	letter-spacing: var(--ls-label) !important;
	font-weight: var(--fw-semibold) !important;
	margin-bottom: 6px !important;
}

.mnkz-home .mnk-form-control {
	background: var(--black) !important;
	border: var(--border-width) solid var(--accent) !important;
	border-radius: var(--radius-md) !important;
	color: var(--white) !important;
	font-family: var(--font-core) !important;
	font-size: var(--fs-base) !important;
	min-height: var(--control-h) !important;
	padding: 12px var(--space-4) !important;
}

.mnkz-home .mnk-form-control:focus {
	outline: none !important;
	box-shadow: var(--ring-focus) !important;
}

.mnkz-home .mnk-form-group { margin-bottom: var(--field-gap) !important; }
.mnkz-home .mnk-form-row { gap: var(--field-gap) !important; }

.mnkz-home .mnk-reg-btn {
	background: var(--accent) !important;
	color: var(--text-on-accent) !important;
	border-radius: var(--radius-md) !important;
	font-family: var(--font-core) !important;
	font-size: var(--fs-md) !important;
	font-weight: var(--fw-bold) !important;
	min-height: var(--control-h-lg) !important;
	padding: 14px var(--space-6) !important;
	margin-top: var(--space-6) !important;
	white-space: normal !important;
	line-height: 1.25 !important;
	transition: var(--transition-control) !important;
}

.mnkz-home .mnk-reg-btn:hover {
	background: var(--accent-hover) !important;
	transform: none !important;
}

.mnkz-home .mnk-reg-btn:disabled {
	background: var(--grey-800) !important;
	color: var(--grey-500) !important;
}

/* Schritt 2: Eingabe des 6-stelligen Codes aus der E-Mail. */
.mnkz-home #mnk-otp-form { text-align: center; }

.mnkz-home #mnk-otp-form > p {
	font-size: var(--fs-sm) !important;
	line-height: var(--lh-body) !important;
	color: var(--grey-400) !important;
	max-width: 440px;
	margin: 0 auto var(--space-6) !important;
}

.mnkz-home .mnk-otp-input {
	max-width: 260px !important;
	margin: 0 auto !important;
	text-align: center !important;
	font-family: var(--font-mono) !important;
	font-size: 24px !important;
	font-weight: var(--fw-bold) !important;
	letter-spacing: .35em !important;
	text-indent: .35em !important;   /* gleicht die Sperrung optisch aus */
	padding: 14px var(--space-4) !important;
}

.mnkz-home #mnk-reg-back-btn {
	display: block !important;
	width: auto !important;
	margin: var(--space-5) auto 0 !important;
	background: transparent !important;
	border: 0 !important;
	color: var(--grey-400) !important;
	font-family: var(--font-core) !important;
	font-size: var(--fs-sm) !important;
	font-weight: var(--fw-semibold) !important;
	cursor: pointer;
}
.mnkz-home #mnk-reg-back-btn:hover { color: var(--white) !important; }

/* Hinweise und Fehlermeldungen des Formulars */
.mnkz-home .mnk-payment-toast,
.mnkz-home .mnk-reg-container .mnk-notice {
	border-radius: var(--radius-md) !important;
	font-size: var(--fs-sm) !important;
	line-height: var(--lh-body) !important;
}

.mz-signup__legal { max-width: 760px; margin: var(--space-6) auto 0; }

@media (max-width: 900px) {
	.mnkz-home .mnk-reg-card { padding: 20px 16px !important; }
	.mnkz-home .mnk-form-row { flex-direction: column !important; }
	.mnkz-home .mnk-reg-btn { font-size: var(--fs-sm) !important; padding: 14px var(--space-4) !important; }
	.mnkz-home .mnk-otp-input { font-size: 20px !important; letter-spacing: .25em !important; text-indent: .25em !important; }
}

/* --- FAQ ----------------------------------------------------------------

   Die Fragen sind in vier Gruppen sortiert – bei vierzehn Einträgen findet
   man sonst nichts wieder. Die Gruppenüberschrift ist bewusst klein und
   zurückhaltend: Sie ordnet, sie konkurriert nicht mit den Fragen.
   ------------------------------------------------------------------------ */

.mz-faq-gruppe { max-width: 860px; }
.mz-faq-gruppe + .mz-faq-gruppe { margin-top: var(--space-10); }

.mz-faq-gruppe__titel {
	margin: var(--space-10) 0 0;
	font-family: var(--font-core);
	font-size: var(--fs-3xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--accent);
}

.mz-faq-gruppe + .mz-faq-gruppe .mz-faq-gruppe__titel { margin-top: 0; }

.mz-faq-gruppe .mz-accordion { margin-top: var(--space-4); }

.mz-accordion { max-width: 860px; margin-top: var(--space-10); border-top: var(--border-width) solid var(--white-a12); }

.mz-acc { border-bottom: var(--border-width) solid var(--white-a12); }

.mz-acc__q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-5) 0;
	background: none;
	border: 0;
	color: var(--white);
	font-family: var(--font-core);
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	text-align: left;
	cursor: pointer;
	transition: var(--transition-control);
}
.mz-acc__q:hover { color: var(--green-500); }

/* Fremde Stylesheets setzen auf Buttons "white-space: nowrap" – dadurch lief
   die Frage in den Pfeil hinein, statt umzubrechen. Hier ausdrücklich
   zurückgesetzt, zusätzlich bekommt der Text eigenen Platz. */
.mz-acc__q,
.mz-acc__q > span {
	white-space: normal !important;
	overflow-wrap: break-word;
	hyphens: auto;
}

.mz-acc__q > span {
	flex: 1 1 auto;
	min-width: 0;
	padding-right: var(--space-2);
}

.mz-acc__q .mz-icon { flex: 0 0 auto; }

/* Hello Elementor und der Browser setzen auf Buttons eigene Hintergrund- und
   Fokusfarben. Für die FAQ-Zeilen werden sie hier ausdrücklich zurückgesetzt,
   sonst leuchtet die angeklickte Zeile farbig auf. */
.mz-acc__q,
.mz-acc__q:hover,
.mz-acc__q:focus,
.mz-acc__q:focus-visible,
.mz-acc__q:active,
.mz-acc__q[aria-expanded="true"] {
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}

.mz-acc__q[aria-expanded="true"] { color: var(--white); }

/* Tastaturbedienung bleibt sichtbar – aber dezent und in der Markenfarbe. */
.mz-acc__q:focus-visible {
	outline: 2px solid var(--green-500);
	outline-offset: 4px;
	border-radius: var(--radius-xs);
}
.mz-acc__q .mz-icon { flex: none; transition: transform var(--dur-base) var(--ease-standard); }
.mz-acc__q[aria-expanded="true"] .mz-icon { transform: rotate(180deg); color: var(--green-500); }

.mz-acc__a { padding-bottom: var(--space-5); }
.mz-acc__a p { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--grey-400); max-width: 68ch; }
.mz-acc__a a { color: var(--accent); text-decoration: none; }
.mz-acc__a a:hover { text-decoration: underline; }



@media (prefers-reduced-motion: reduce) {
	.mz-wa__btn::after { animation: none; }
	.mz-hero__scroll i { animation: none; }

	/* Das Hochschieben entfällt, das gestaffelte Aufblenden bleibt – wie bei
	   den Abschnitten weiter unten. Eine reine Überblendung ist keine Bewegung
	   im Sinne dieser Einstellung; ohne sie ginge der Auftritt der Seite für
	   diese Besucher vollständig verloren. */
	.mz-fade { animation-name: mz-auftritt-ruhig; }
}

/* --- Vorschau-Abbild des Anmeldeformulars ------------------------------- */
/* Nur im Vorschaumodus sichtbar. Besucher bekommen das echte Formular. */

.mnkz-preview-note {
	max-width: 760px;
	margin: 0 auto var(--space-4);
	padding: 12px 16px;
	border: 1px dashed var(--green-tint-32);
	border-radius: var(--radius-md);
	background: var(--green-tint-08);
	color: var(--grey-300);
	font-size: var(--fs-2xs);
	line-height: 1.6;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
}

.mnkz-preview-note__switch {
	background: transparent;
	border: 1px solid var(--accent);
	color: var(--accent);
	border-radius: var(--radius-pill);
	padding: 5px 12px;
	font-family: var(--font-core);
	font-size: var(--fs-2xs);
	font-weight: var(--fw-bold);
	cursor: pointer;
	transition: var(--transition-control);
}

.mnkz-preview-note__switch:hover { --mz-btn-bg: var(--accent); background: var(--accent); color: var(--black); }

/* --- Hinweis für bereits angemeldete Mitglieder --------------------------
   Ein Mitglied soll auf der Startseite kein Anmeldeformular sehen. Statt des
   Formulars steht dort der kurze Weg in den Mitgliederbereich.
   ------------------------------------------------------------------------ */

.mz-signup-member {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-5);
	text-align: center;
	max-width: 760px;
	margin: 0 auto;
	padding: var(--space-8);
}

.mz-signup-member__text {
	margin: 0;
	font-size: var(--fs-md);
	color: var(--grey-300);
}

@media (max-width: 900px) {
	.mz-signup-member { padding: var(--space-6); }
	.mz-signup-member .mz-btn { width: 100%; }
}